/* Voeg een achtergrondkleur en een afbeelding toe aan de gehele sectie */
section.homepage-filters {
  position: relative;
  z-index: 1000;
  background-size: cover;
  width: 100%;
  padding-top: 2px;
}



section.homepage-filters div.tab-content {
  background-color: rgba(255, 255, 255, 0.94);
  padding: 25px 20px 5px;
  box-shadow: 0 0 34px 0 rgb(0 0 0 / 10%);
  border-radius: var(--na-border-radius);
}

section.homepage-filters form.filter-form .form-row {
  margin-bottom: 10px;
}

section.homepage-filters form.filter-form label {
  font-size: 14px;
  font-weight: bold;
}

section.homepage-filters form.filter-form input,
section.homepage-filters form.filter-form select,
section.homepage-filters form.filter-form button {
  font-size: 16px;
  height: 45px;
}

section.homepage-filters form.filter-form input#inputFilterDistance::-webkit-slider-thumb {
  background: var(--tertiary);
}

section.homepage-filters form.filter-form input#inputFilterDistance::-moz-range-thumb {
  background: var(--tertiary);
}

section.homepage-filters form.filter-form input#inputFilterDistance::-ms-thumb {
  background: var(--tertiary);
}

section.homepage-filters form.filter-form button {
  background-color: #e1f1fe;
  color: #0072CE;
  border: none;
}

@media only screen and (max-width: 768px) {
  section.homepage-filters form.filter-form button {
    top: 0;
  }
  }

section.homepage-filters form.filter-form select:disabled {
  background-color: #fff;
  color: #8f9498;
}

.filter-container {
  width: 40%; /* Pas de breedte aan naar 40% */
  margin-left: 0;
}

section.homepage-filters form.filter-form .form-group {
  margin-bottom: 15px;
}

section.homepage-filters form.filter-form .input-group select {
  width: 48%;
}

/* Stijl voor de "Meer filters" knop */
section.homepage-filters form.filter-form .more-filters-btn {
  text-align: left;
  margin: 10px;
  font-size: 16px;
  background: none;
  border: none;
  color: var(--primary); /* Kleur van de tekst */
  display: flex;
  align-items: center;
}

section.homepage-filters form.filter-form .more-filters-btn .plus-icon {
  margin-right: 5px;
  font-size: 20px;
}

/* Verwijder de rand van de uitgeklapte collapse-sectie */
section.homepage-filters .card,
section.homepage-filters .collapse,
section.homepage-filters .card-body {
  border: none;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.64);
}

/* Transparante achtergrondkleur voor de "Meer filters" container */
section.homepage-filters .card-body {
  background-color: rgba(255, 255, 255, 0.64);
}

/* Mobiele aanpassingen */
@media (max-width: 768px) {
  section.homepage-filters {
    padding: 10px 0;
  }

  section.homepage-filters .container {
    margin-left: 0; /* Verwijder margin-left op mobiele apparaten */
  }

  .filter-container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  section.homepage-filters form.filter-form .form-row {
    flex-direction: column;
  }

  section.homepage-filters form.filter-form .form-group {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  section.homepage-filters form.filter-form .input-group select {
    width: 100%;
    margin-bottom: 10px;
  }

  section.homepage-filters form.filter-form .more-filters-btn {
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 10px 0;
  }

  section.homepage-filters form.filter-form .btn-primary {
    width: 100%;
  }
}

/* Custom styling for the more-filters button and begin-zoeken button */
.custom-card-header {
  background: none;
  border: none;
  padding: 0;
}

.custom-btn {
  display: inline-block;
  width: auto;
}

/* Verwijder de border na het klikken op de link */
section.homepage-filters .card-header .btn-link:focus {
  box-shadow: none;
  outline: none;
}