/* Zoekbalk  */

/* Outer frame om de homepage-zoekfilter. Op desktop: donkere
   semi-transparante laag rondom de witte visvakantie-filter
   card → 2-laagse uitstraling. Op mobiel transparant zodat de
   filter-card op de volle breedte staat zonder dubbele "doos". */
.ae-booking-bar {
  border-radius: 12px;
  background-color: rgba(0,0,0,.4);
  padding: 14px;
  margin: 30px 0 40px;
  z-index: 9;
  position: relative;
}

/* Bij gebruik op de homepage zit er een .ae-arch-filter--home
   binnenin — die heeft z'n eigen witte card-styling. We laten
   de dark wrapper alleen frame zijn en houden de inner-card
   tegen de wrapper-rand met aangepaste padding/margin. */
.ae-booking-bar .ae-arch-filter--home {
  margin: 0;
  position: relative;
}
/* Loading-spinner op het home-filter-blok wanneer de bezoeker
   met dates op Zoeken klikt. JS (script.js) zet .is-loading na
   form-submit, daarna zorgt CSS voor visuele feedback tot de
   browser naar /visvakanties/ navigeert. Werkt op zowel PC als
   mobiel. */
.ae-arch-filter--home.is-loading {
  pointer-events: none;
  position: relative;
}
.ae-arch-filter--home.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
}
.ae-arch-filter--home.is-loading::after {
  content: '';
  position: absolute;
  /* Echt in 't midden van 't filter (zowel horizontaal als
     verticaal) zodat de spinner duidelijk binnen 't zoek-block
     staat en niet er bovenuit steekt. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border: 5px solid rgba(15, 38, 60, 0.18);
  border-top-color: #ff7900;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 38, 60, 0.25);
  animation: ae-home-spin 0.7s linear infinite;
  z-index: 6;
  pointer-events: none;
}
@keyframes ae-home-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.ae-booking-form {
  display: grid;
  grid-template-columns: 2fr 2fr 3fr auto;
  gap: 10px;
  align-items: stretch;
}

.ae-booking-form > * {
  min-width: 0;
}

.ae-field {
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 10px 20px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ae-label {
  padding: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #757575;
  display: block;
}

.ae-select {
  border: 1px solid #ddd;
  border-radius: 6px;
  height: 34px;
  padding: 5px 8px;
  display: flex;
  font-size: 12px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: #fff;
  user-select: none;
  position: relative;
  z-index: 5;
}

.ae-value {
  font-size: 16px;
  font-weight: 600;
  color: #121212;
}

.ae-dropdown {
  position: absolute;
    contain: layout;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 15px 40px rgba(0,0,0,.25);
  display: none;
  z-index: 999;
}

.ae-dropdown-field.is-open .ae-dropdown {
  display: block;
}

.ae-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 12px;
}

.ae-dropdown li {
  margin-bottom: 6px;
}

.ae-dropdown li:last-child {
  margin-bottom: 0;
}

.ae-dropdown input {
  display: none;
}

.ae-dropdown label {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ae-dropdown label:hover {
  background: #f2f2f2;
}

.ae-submit {
  display: flex;
  height: 90px;
}
.ae-submit :hover{
background-color:#fff;
}

/* Dropdown kleur */
.ae-field.is-selected .ae-select {
  background: #e6f4ea;
  border-color: #4caf50;
}

.ae-field.is-selected .ae-value {
  color: #2e7d32;
  font-weight: 700;
}

/* Breedte per item */
.ae-booking-form .ae-dropdown-field:nth-of-type(1) {
  min-width: 200px; 
}

.ae-booking-form .ae-dropdown-field:nth-of-type(2) {
  min-width: 400px;
}

/* Mobiel specifiek */
@media (max-width: 1199px) {

  /* Mobiel: dark frame weg — visvakantie-filter card staat zelf
     mooi op het hero-beeld via z'n eigen witte achtergrond.
     Margin-top 5px lager dan PC zodat 't blok wat dichter onder
     de hero-titel zit. */
  .ae-booking-bar {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    margin: 25px 0 30px;
  }

  .ae-booking-form {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .ae-dropdown-field,
  .vtype,
  .ae-submit .button{
    min-width: 100% !important;
    width: 100%;
  }

  .ae-field {
    padding: 0;
    margin: 0;
  }

  .ae-label {
    padding-left: 10px;
  }

  .ae-select {
    border: 0;
    margin: 5px 10px;
  }
.ae-submit .button {
  height:60px;
  align-self: center;
}

  .ae-booking-bar,
  .ae-booking-form {
    overflow-x: hidden;
  }
}


/* Datum Selector */

.date-range-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.date-block {
  width: 100%;
}

.date-block.from {
  padding-bottom: 5px;
}
.date-select {
  display: flex;
  align-items: center;
  gap: 4px;

}

.date-label {
  width: 35%;
  font-size: 13px;
  color: #333;
  white-space: nowrap;
}

.date-select select {
  height: 38px;
  min-height: 38px;

  width: auto;

  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.2;

  text-align: center;
  text-align-last: center;

  background: #fff;
  color: #1f2937;
  border: 1px solid rgba(15, 38, 60, 0.18);
  border-radius: 6px;

  appearance: auto;
  -webkit-appearance: menulist;

  overflow-y: auto;
}
.date-select select:focus {
  outline: none;
  border-color: #ff7900;
  box-shadow: 0 0 0 3px rgba(255, 121, 0, 0.16);
}

/* =========================================================
   Aankomst + vertrek (home-mode datum-pickers).
   PC: één label "Aankomst en vertrek" boven 2 stacked rijen
       met selects (geen inline-label per rij). Selects spannen
       de volle wrap-breedte → meer ruimte voor land/activiteiten.
   Mobiel: alleen aankomst zichtbaar (vertrek door JS auto +7d);
       light-blue blokken, rechts uitgelijnd, selects content-
       breedte (day smal, year mid, month breed).
   ========================================================= */
.ae-fld-dates-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 1 190px;
  min-width: 170px;
  max-width: 210px;
  margin: 0;
}
/* Wrap-label: zichtbaar op zowel PC als mobiel — één label
   "Aankomst en vertrek" boven beide rijen, geen inline labels
   per rij. Op PC gecentreerd binnen het block, op mobiel
   rechts uitgelijnd (volgt 't right-aligned wrap). */
.ae-fld-dates-wrap__label {
  display: block;
}
.ae-fld-dates-wrap .ae-fld-dates__label {
  display: none;
}
.ae-fld-dates-wrap .ae-fld-dates {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0;
}
.ae-fld-dates-wrap .ae-fld-dates__label {
  flex: 0 0 64px;
  margin: 0;
  font-size: 10px;
  white-space: nowrap;
  letter-spacing: .02em;
  line-height: 1.2;
}
.ae-fld-dates-wrap .ae-fld-dates .date-block {
  flex: 1 1 auto;
  width: auto;
  padding: 0;
  min-width: 0;
}
.ae-fld-dates-wrap .ae-fld-dates .date-select {
  display: flex;
  gap: 3px;
  width: 100%;
}
.ae-fld-dates-wrap .ae-fld-dates .date-select select {
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  font-size: 11px;
  padding: 0 2px;
}
.ae-fld-dates-wrap .ae-fld-dates .date-select select.day {
  flex: 0 0 38px;
}

/* PC ≥701px: wrap-label gecentreerd boven het blok.
   Hogere specificity (.ae-arch-filter prefix) zodat 't de
   .ae-arch-filter .ae-fld__label rule (display:inline-flex)
   overschrijft — anders neemt 't label alleen z'n natuurlijke
   breedte in en heeft text-align geen effect. */
@media (min-width: 701px) {
  .ae-arch-filter .ae-fld-dates-wrap__label {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .ae-fld-dates-wrap .ae-fld-dates {
    /* geen inline label meer → date-block volle wrap-breedte */
    gap: 0;
  }
}

/* PC home-filter: alles op 1 rij forceren — flex-wrap uit op de
   home-row + krappere flex-shrink op grote velden zodat checks
   en submit naast elkaar blijven (i.p.v. submit op nieuwe regel). */
@media (min-width: 701px) {
  .ae-arch-filter--home .ae-arch-filter__row {
    flex-wrap: nowrap;
    gap: 8px;
  }
  /* Dates compacter — geen inline labels meer, dus de wrap heeft
     minder breedte nodig. */
  .ae-arch-filter--home .ae-fld-dates-wrap {
    flex: 0 1 200px;
    min-width: 180px;
    max-width: 220px;
  }
  /* Country en activiteiten ruimer zodat lange labels (bv. "All
     countries", "Bootvissen meerval", ES vertalingen) niet meer
     worden afgekapt. */
  .ae-arch-filter--home .ae-fld-count--anglers,
  .ae-arch-filter--home .ae-fld-count--guests {
    max-width: 130px;
  }
  .ae-arch-filter--home .ae-fld-country {
    flex: 1 1 130px;
    max-width: 200px;
  }
  .ae-arch-filter--home .ae-fld-activities {
    flex: 1 1 160px;
    max-width: 240px;
  }
  /* Checks compacter — schuift dichter naar de zoek-knop toe. */
  .ae-arch-filter--home .ae-fld-checks {
    flex: 0 1 160px;
    max-width: 180px;
  }
  .ae-arch-filter--home .ae-fld-submit {
    min-width: 100px;
  }

  /* Verticale dividers tussen logische blokken — krappere padding
     dan voorheen om ruimte te besparen voor de selects.
     align-self: stretch maakt de border full-row-height; zonder
     justify-content: flex-end zou de content (label + select)
     bovenaan in het stretched-wrapper komen te staan, waardoor
     country/checks visueel hoger staan dan activities. flex-end
     drukt de content naar onder zodat alle selects gelijk-
     uitgelijnd zijn. */
  .ae-arch-filter--home .ae-fld-country,
  .ae-arch-filter--home .ae-fld-dates-wrap,
  .ae-arch-filter--home .ae-fld-checks {
    align-self: stretch;
    justify-content: flex-end;
    padding-left: 10px;
    margin-left: 4px;
    border-left: 1px solid rgba(15, 38, 60, 0.12);
  }

}

@media (max-width: 767px) {
  /* Mobiel + tablet: label "Aankomst en vertrek" BOVEN de trigger
     (zelfde pattern als desktop). Home + archive gebruiken nu
     identieke verticale layout — verschil is alleen de uitlijning:
     home stretch over volle breedte, archive right-aligned zodat
     de filter-rij hierboven hetzelfde rechts-uitgelijnd voelt.
     Breakpoint 767px matcht de archive __group column-flow van
     archive.css zodat er geen "tussen-state" tussen 700 en 767 is. */
  .ae-fld-dates-wrap {
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    gap: 4px;
    border-top: 1px solid rgba(15, 38, 60, 0.12);
    padding-top: 8px;
    margin-top: 8px;
    width: 100%;
  }
  .ae-arch-filter .ae-fld-dates-wrap__label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
  }
  /* Archive-mobile: identiek aan home — volle breedte stretch.
     Label right-aligned als enige verschil zodat 't visueel
     matcht met de filter-rij hierboven die ook rechts eindigt.
     Expliciete width op de inner-datepicker zodat geen ouder
     desktop-rule per ongeluk doorlekt. */
  .ae-arch-filter:not(.ae-arch-filter--home) .ae-fld-dates-wrap__label {
    text-align: right;
  }
  /* Force full-width op archive — order:99 pusht 'm naar 't einde
     van de flex-flow zodat 'ie zeker op z'n eigen rij belandt en
     niet naast country/activities krimpt. */
  .ae-arch-filter:not(.ae-arch-filter--home) .ae-arch-filter__group--meta .ae-fld-dates-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    order: 99 !important;
  }
  .ae-arch-filter:not(.ae-arch-filter--home) .ae-fld-dates-wrap .ae-datepicker {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    display: block !important;
  }
  .ae-arch-filter:not(.ae-arch-filter--home) .ae-fld-dates-wrap .ae-datepicker__trigger {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* Archive datepicker volle breedte op laptop + tablet (768-1199).
   Op grote desktop (>=1200) ziet 't compact (180px) zodat de
   filter-row op één regel past — zie archive.css. Onder 1200
   geen ruimte-druk meer dus full-width is duidelijker. */
@media (min-width: 768px) and (max-width: 1199px) {
  .ae-arch-filter:not(.ae-arch-filter--home) .ae-arch-filter__group--meta .ae-fld-dates-wrap,
  .ae-arch-filter:not(.ae-arch-filter--home) .ae-fld-dates-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
  }
  .ae-arch-filter:not(.ae-arch-filter--home) .ae-fld-dates-wrap .ae-datepicker,
  .ae-arch-filter:not(.ae-arch-filter--home) .ae-fld-dates-wrap .ae-datepicker__trigger {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
  }
}

/* mobiel */
@media (max-width: 768px) {
  .date-label {
    width: 40%;
    font-size: 12px;
  }

  .date-select select {
    font-size: 13px;
    padding: 0 6px;
  }
}

.vtype.is-selected .date-select select {
  background: #ffffff;
  border-color: #4caf50;
}