/* ==========================================================================
   BrightFlow site-zoekfunctie in de sticky-rail
   --------------------------------------------------------------------------
   Los bestand, bewust NIET in brightflow.css: alleen pagina's die
   bf-search.css + bf-search.js laden krijgen de zoekfunctie.

   LET OP: het paneel heet .bf-search-panel en NIET .bf-sticky-panel.
   brightflow.css opent .bf-sticky-panel namelijk op :hover. Voor zoeken
   moet dat klik-/hovergestuurd zijn met vergrendeling (je moet erin kunnen
   typen), daarom een eigen class.

   De vormgeving is wel bewust gelijk aan "Bel me terug": zelfde breedte,
   radius, schaduw en padding, en binnenin hergebruiken wij de bestaande
   classes .bf-sticky-panel-header / -title / -close en .form-control.
   ========================================================================== */

.bf-sticky-search .bf-sticky-icon { cursor: pointer; }

/* Geen uitklappend tekstlabel bij dit item: hover opent meteen het
   zoekscherm, zodat je direct een trefwoord kunt intypen. */
.bf-sticky-search .bf-sticky-label { display: none !important; }

/* Op TOUCH alle rail-labels verbergen (niet alleen die van zoeken). De labels
   ("Aanvraagformulier") zijn een desktop-hover-hint. Op touch bestaat geen echte
   hover, maar iOS Safari geeft na een tik een PLAKKENDE :hover - dan bleef het
   "Aanvraagformulier"-label staan en viel het over een open paneel ("Bel me
   terug"/zoeken) heen. De iconen blijven; tikken opent het paneel of gaat naar
   de pagina. Bewust hier en niet in brightflow.css: houdt de touch-rail-fixes
   bij elkaar en laat de gedeelde stylesheet ongemoeid. */
@media (hover: none) {
  .bf-sticky-widget .bf-sticky-label { display: none !important; }
}

/* --------------------------------------------------------------- paneel -- */
/* Afmeting, radius, schaduw en padding identiek aan .bf-sticky-panel. */
.bf-search-panel {
  position: absolute;
  right: 54px;
  top: -1px;
  width: 320px;
  max-height: 440px;
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  padding: 24px;
  display: none;
  flex-direction: column;
  overflow: hidden;       /* houdt de vol-breede rijen binnen de afronding */
  text-align: left;
  cursor: default;
}
.bf-search-panel.is-open { display: flex; }

/* ------------------------------------------------------------ invoerveld -- */
/* Zelfde veldstijl als Naam / Telefoonnummer in het belpaneel. */
.bf-search-panel .form-control {
  width: 100%;
  margin-bottom: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
}
.bf-search-panel .form-control:focus,
.bf-search-panel .form-control:focus-visible {
  border-color: #ddd !important;
  box-shadow: none !important;
  outline: none !important;
}
.bf-search-panel .form-control::placeholder {
  color: #999 !important;
  opacity: 1 !important;
}
.bf-search-panel .form-control::-webkit-search-cancel-button { display: none; }

/* -------------------------------------------------------------- resultaten */
/* Vol-breed (negatieve marges), met 24px rij-padding zodat de tekst netjes
   uitlijnt met het invoerveld erboven. */
.bf-search-body {
  overflow-y: auto;
  margin: 16px -24px -24px;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.bf-search-grouplabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bf-muted, #748494);
  padding: 12px 24px 5px;
  margin: 0;
}

.bf-search-hit {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 9px 24px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.bf-search-hit:hover,
.bf-search-hit.is-sel {
  background: #f2f8fb;
  border-left-color: var(--bf-primary, #00a1c6);
  text-decoration: none;
}
.bf-search-hit:focus-visible {
  outline: 2px solid var(--bf-primary, #00a1c6);
  outline-offset: -2px;
}
.bf-search-hit-main { min-width: 0; flex: 1; }
.bf-search-hit-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bf-dark, #1d2b37);
  margin: 0 0 2px;
  line-height: 1.35;
}
.bf-search-hit-snip {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--bf-muted, #748494);
  margin: 0;
  line-height: 1.45;
}
.bf-search-hit mark {
  background: rgba(0, 161, 198, .18);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* De lege staat toont bewust alleen het zoekveld (FAQ-link weggehaald juli 2026),
   dus hier stond eerder de .bf-search-faq-styling. Verwijderd omdat er geen
   .bf-search-faq-element meer wordt gerenderd. */

/* -------------------------------------------------------- niets gevonden -- */
.bf-search-empty { padding: 20px 24px; text-align: center; }
.bf-search-empty p {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bf-dark, #1d2b37);
}
.bf-search-empty small { font-size: 12px; color: var(--bf-muted, #748494); }

/* ------------------------------------------------------------- responsive -*/
/* Onder 600px past een paneel van 320px niet meer naast de rail. Exact dezelfde
   mobiele regel als het "Bel me terug"-paneel (.bf-sticky-panel in brightflow.css,
   @media max-width:600 -> max-width: calc(100vw - 68px)), zodat het zoekpaneel op
   precies dezelfde plek en breedte verschijnt. De basisstijl bovenaan (position:
   absolute, right: 54px, top: -1px) is al identiek aan .bf-sticky-panel; dit is
   de enige mobiele aanpassing die het ook nodig heeft.

   NIET vervangen door een eigen overlay (position: fixed, of het paneel naar
   <body> verplaatsen): dat landde op een andere plek dan "Bel me terug" en liep
   op iOS Safari mis door html { overflow-x: hidden }. */
@media (max-width: 600px) {
  .bf-search-panel {
    max-width: calc(100vw - 68px);
  }
}