/* Zoekbalk (11-10-2026): opmaak van themes/default/views/includes/zoekbalk.php.
   A  gedeeld (meldingen, verborgen retourcel)
   B  .zb--hero: de grote vorm op de voorpagina. Draagt ook .fe-search-compact;
      de regels hieronder zijn die van het vroegere search_compact.php, zodat
      de acht designs (themes/default/skins) hem stylen zoals voorheen.
   C  .zb--balk: de witte balk bovenaan /cars, blog, cms en account. */

/* ---------------------------------------------------------------- A */
.zb *, .zb *::before, .zb *::after { box-sizing: border-box; }
.zb [hidden] { display: none !important; }
.zb-fout { display: none; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #B91C1C; }
.zb--hero .zb-fout { color: #fecaca; }
.zb-fout--zichtbaar { display: block; }
.zb .is-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.2) !important; }
.zb-schakel { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.zb-plek { max-width: 1200px; margin: 24px auto 28px; padding: 0 20px; position: relative; z-index: 20; }

/* ---------------------------------------------------------------- B */
.fe-search-compact { background: var(--pt-search-bg, #0F172A); border-radius: 24px; padding: 1.75rem 1.5rem; border: 1px solid rgba(183,186,192,.15);
  box-shadow: 0 0 60px rgba(0,0,0,.30), 0 20px 60px rgba(0,0,0,.40); max-width: 1140px; margin: 0 auto; font-family: 'Poppins', sans-serif; position: relative; }
.fe-search-compact .fe-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.fe-search-compact .fe-cat { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; background: #22293b;
  border: 1px solid #b7bac0; color: #fff; font-weight: 500; font-size: 13.5px; cursor: pointer; transition: all .2s; font-family: 'Poppins'; }
.fe-search-compact .fe-cat:hover:not(.active) { border-color: var(--pt-accent, #F76B1C); }
.fe-search-compact .fe-cat.active { background: var(--pt-accent, #F76B1C); color: #fff; border-color: var(--pt-accent, #F76B1C); }
.fe-search-compact .fe-row { display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr auto; gap: 12px; align-items: end; }
.fe-search-compact .fe-row.has-dropoff { grid-template-columns: 1.1fr 1.1fr 1.4fr 1.4fr auto; }
.fe-search-compact .fe-cell { background: transparent; padding: 0; border: 0; min-width: 0; position: relative; }
.fe-search-compact .fe-cell-lbl { font-size: 14px; text-transform: uppercase; color: #fff; font-weight: 600; opacity: .7; letter-spacing: .05em; margin: 0 0 6px; display: flex; align-items: center; gap: 5px; }
.fe-search-compact .fe-cell-row { display: grid; grid-template-columns: 1fr 110px; gap: 8px; align-items: center; }
.fe-search-compact .fe-cell input[type="text"], .fe-search-compact .fe-cell select, .fe-search-compact .fe-ac-input, .fe-search-compact input.flatpickr-input.form-control, .fe-search-compact .flatpickr-mobile {
  background: #22293b !important; border: 1px solid #b7bac0 !important; color: #fff !important; border-radius: 12px !important; padding: .875rem 1rem !important;
  font-size: 16px !important; font-weight: 500 !important; font-family: 'Poppins' !important; width: 100%; outline: none; transition: all .2s; min-width: 0; box-shadow: none !important; }
.fe-search-compact .fe-cell input:hover, .fe-search-compact .fe-cell select:hover, .fe-search-compact .fe-ac-input:hover, .fe-search-compact input.flatpickr-input.form-control:hover { border-color: var(--pt-accent, #F76B1C) !important; }
.fe-search-compact .fe-cell input:focus, .fe-search-compact .fe-cell select:focus, .fe-search-compact .fe-ac-input:focus, .fe-search-compact input.flatpickr-input.form-control:focus {
  border-color: var(--pt-accent, #F76B1C) !important; box-shadow: 0 0 0 3px rgba(var(--pt-accent-rgb, 247,107,28),.15) !important; }
.fe-search-compact .fe-cell input::placeholder, .fe-search-compact .fe-ac-input::placeholder, .fe-search-compact input.flatpickr-input.form-control::placeholder { color: #fff !important; opacity: .4 !important; font-weight: 500 !important; }
.fe-search-compact .fe-cell select.fe-time-select { cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' fill='none' stroke='%23b7bac0' stroke-width='1.5'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 8px center !important; padding-right: 24px !important; font-weight: 400 !important;
  padding-top: 5px !important; padding-bottom: 5px !important; line-height: 22px !important; }
.fe-search-compact .fe-cell select.fe-time-select option { color: #0F172A; }
.fe-search-compact .fe-search-btn { background: var(--pt-search-btn, var(--pt-accent, #F76B1C)); color: #fff; border: 0; padding: 1rem 1.5rem; font-weight: 600; font-size: 17px;
  cursor: pointer; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .2s; min-width: 140px; font-family: 'Poppins'; align-self: stretch; }
.fe-search-compact .fe-search-btn:hover { filter: brightness(.92); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--pt-search-btn-rgb, var(--pt-accent-rgb, 247,107,28)),.40); }
.fe-search-compact .fe-search-btn svg { width: 16px; height: 16px; }
.fe-search-compact .fe-bottom { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.fe-search-compact .fe-toggle-diff { display: inline-flex; align-items: center; gap: 4px; color: #fff; opacity: .78; cursor: pointer; background: transparent; border: 0; padding: 0; font-family: 'Poppins'; font-size: 14px; font-weight: 500; transition: all .2s; }
.fe-search-compact .fe-toggle-diff:hover { color: var(--pt-accent, #F76B1C); opacity: 1; text-decoration: underline; }
@media (min-width: 1025px) {
  .fe-search-compact { --fe-ctl-h: 34px; }
  .fe-search-compact .fe-cell input[type="text"], .fe-search-compact .fe-cell select, .fe-search-compact .fe-ac-input, .fe-search-compact .fe-fp-date,
  .fe-search-compact input.flatpickr-input.form-control, .fe-search-compact .fe-search-btn { height: var(--fe-ctl-h); box-sizing: border-box; border-radius: 12px; }
  .fe-search-compact .fe-search-btn { align-self: end; padding-top: 0; padding-bottom: 0; line-height: 1; font-size: 15px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .fe-search-compact .fe-row, .fe-search-compact .fe-row.has-dropoff { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fe-search-compact .fe-search-btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 768px) {
  .fe-search-compact { padding: 1.25rem 1rem; border-radius: 20px; }
  .fe-search-compact .fe-row, .fe-search-compact .fe-row.has-dropoff { grid-template-columns: 1fr; gap: 10px; }
  .fe-search-compact .fe-search-btn { width: 100%; padding: 1rem; font-size: 17px; }
}

/* ---------------------------------------------------------------- C */
.zb--balk { --zb-h: 46px; max-width: 1160px; margin: 0 auto; background: #fff; border: 1px solid #E8ECF2; border-radius: 18px; padding: 18px 20px 14px;
  box-shadow: 0 10px 30px -12px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.05); color: #0F172A; font-family: 'Poppins', system-ui, sans-serif; }
.zb--balk .zb-rij { display: grid; grid-template-columns: 1.3fr 1.5fr 1.5fr auto; gap: 12px; align-items: end; }
.zb--balk .zb-rij--apart { grid-template-columns: 1.1fr 1.1fr 1.4fr 1.4fr auto; }
.zb--balk .zb-cel { position: relative; min-width: 0; }
.zb--balk .zb-lbl { display: block; margin: 0 0 6px 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5B6472; }
.zb--balk .zb-dt { display: grid; grid-template-columns: 1fr 92px; gap: 8px; }
.zb--balk .zb-in, .zb--balk input.flatpickr-input.form-control, .zb--balk .flatpickr-mobile {
  width: 100%; min-width: 0; height: var(--zb-h); padding: 0 14px; border-radius: 12px; background: #F8FAFC; border: 1px solid #DCE2EA; color: #0F172A;
  font: 500 15px/1 'Poppins', system-ui, sans-serif; outline: none; box-shadow: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.zb--balk .zb-in::placeholder, .zb--balk input.flatpickr-input::placeholder { color: #94A3B8; }
.zb--balk .zb-in:focus, .zb--balk input.flatpickr-input.form-control:focus, .zb--balk .flatpickr-mobile:focus {
  background: #fff; border-color: var(--pt-accent, #F76B1C); box-shadow: 0 0 0 3px rgba(var(--pt-accent-rgb, 247,107,28), .15); }
.zb--balk select.zb-uur { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer; font-weight: 400;
  background: #F8FAFC url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5'/></svg>") no-repeat right 10px center; }
.zb--balk .zb-knop { height: var(--zb-h); min-width: 140px; padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--pt-search-btn, var(--pt-accent, #F76B1C)); color: #fff; font: 600 15px/1 'Poppins', system-ui, sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s, transform .15s, box-shadow .15s; }
.zb--balk .zb-knop:hover { filter: brightness(.93); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--pt-accent-rgb, 247,107,28), .3); }
.zb--balk .zb-knop svg { width: 17px; height: 17px; }
.zb--balk .zb-onder { margin-top: 10px; }
.zb--balk .zb-schakel { color: #5B6472; font: 500 13px 'Poppins', system-ui, sans-serif; }
.zb--balk .zb-schakel:hover { color: var(--pt-accent, #F76B1C); text-decoration: underline; }
@media (max-width: 1024px) {
  .zb--balk .zb-rij, .zb--balk .zb-rij--apart { grid-template-columns: 1fr 1fr; }
  .zb--balk .zb-knop { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 640px) {
  .zb--balk { padding: 14px; border-radius: 14px; --zb-h: 50px; }
  .zb--balk .zb-rij, .zb--balk .zb-rij--apart { grid-template-columns: 1fr; gap: 10px; }
  .zb--balk .zb-in, .zb--balk .flatpickr-mobile { font-size: 16px; } /* geen inzoomen op iPhone */
}

/* De witte balk in de kleuren van het gekozen design (themes/default/skins).
   Zelfde knopkleur als het formulier op de voorpagina, zodat /cars en de
   voorpagina bij elkaar horen. */
body.sk-on .zb--balk .zb-knop { background: var(--sk-accent-vlak, var(--sk-accent)) !important; border-radius: var(--sk-btn-radius, 12px) !important;
  font-weight: 700; text-transform: var(--sk-btn-transform, none); letter-spacing: var(--sk-btn-tracking, 0); }
body.sk-on .zb--balk .zb-in:focus, body.sk-on .zb--balk input.flatpickr-input.form-control:focus { border-color: var(--sk-accent) !important; box-shadow: 0 0 0 3px rgba(var(--sk-accent-rgb, 247,107,28), .18) !important; }
body.sk-on .zb--balk .zb-schakel:hover { color: var(--sk-accent-tekst, var(--sk-accent)); }
body.sk-fjord .zb--balk .zb-knop { background: var(--sk-mint) !important; color: #12305B !important; border-radius: 999px !important; font-weight: 800; }
body.sk-fjord .zb--balk .zb-knop svg { stroke: #12305B; }
body.sk-prestige .zb--balk .zb-knop { background: #9A6B2F !important; }
body.sk-atlantique .zb--balk .zb-knop { border-radius: 8px !important; text-transform: uppercase; letter-spacing: .06em; }