/* ==========================================================================
   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; }

/* iOS ZOOMT de hele pagina automatisch in zodra een invoerveld met een letter
   kleiner dan 16px focus krijgt, en zoomt bij het sluiten NIET terug. Gevolg
   (gemeld augustus 2026): zoekveld openen (krijgt meteen focus), sluiten met
   het kruisje, en de rail is weg - die hangt rechts aan de layout-viewport en
   valt na het zoomen buiten beeld. Daarom op touch exact 16px; desktop houdt
   de 14px van "Bel me terug". GEEN maximum-scale=1 in de viewport-meta als
   alternatief: dat blokkeert ook handmatig zoomen (toegankelijkheid). */
@media (hover: none) {
    .bf-search-panel .form-control { font-size: 16px; }
}

/* -------------------------------------------------------------- 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;
    /* Zonder dit neemt de PAGINA het scrollen over zodra de lijst aan zijn
       einde is (scroll chaining). Op touch voelt dat alsof de lijst "niet wil"
       scrollen: je veegt, en de pagina achter het paneel schuift mee. */
    overscroll-behavior: contain;
}

/* 12px i.p.v. 10px: dit label draagt echte terugkoppeling ("8 resultaten", "Zoeken wordt
   geladen..."), geen decoratie. Op 10px met uppercase + letter-spacing was het de kleinste
   tekst van de site en op een telefoon slecht leesbaar. (augustus 2026) */
.bf-search-grouplabel {
    font-size: 12px;
    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);
    }
}

/* De HOOGTE staat bewust niet hier maar in bf-search.js (pasInBeeld). Het
   paneel hangt naast een icoon dat midden op de zijkant van het scherm zweeft,
   dus hoeveel ruimte eronder overblijft weet je pas als je het meet: dat hangt
   af van de schermhoogte en, op iOS, van de in- of uitgeschoven adresbalk. Een
   vaste calc() hier gaf op een telefoon een paneel dat onder de schermrand
   doorliep, waardoor het laatste resultaat onbereikbaar bleef. Zet er dus geen
   max-height terug: het script topt de hoogte af op de ruimte die er onder het
   icoon is. Het paneel blijft daarbij op zijn plek naast het icoon; alleen in
   een extreem laag venster schuift het minimaal omhoog (zie de toelichting bij
   pasInBeeld in bf-search.js - eerdere "schuif omhoog tot 70%"-aanpak is door
   de opdrachtgever afgekeurd). */

/* --------------------------------------------------- scroll-aanwijzing --- */
/* De resultatenlijst scrollt (.bf-search-body: overflow-y auto), alleen is dat
   op touch onzichtbaar: geen scrollbalk, en de laatste regel wordt strak
   afgesneden alsof de lijst daar eindigt. Deze vervaging over de onderrand
   laat zien dat er meer onder staat. Ligt er niets onder, dan valt wit over
   wit en is de laag onzichtbaar: hij hoeft dus niet weggeschakeld te worden.
   pointer-events: none houdt de resultaten eronder aanklikbaar.

   De laag verdwijnt zodra je onderaan bent (.is-onderaan, gezet door
   bf-search.js). Anders zou de vervaging blijven hangen over de laatste regel
   en zou hij beloven dat er nog meer komt terwijl de lijst op is. */
.bf-search-panel.is-open::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(to top, #fff 20%, rgba(255, 255, 255, 0));
    pointer-events: none;
    opacity: 1;
    transition: opacity .15s ease-out;
}
.bf-search-panel.is-onderaan::after { opacity: 0; }

/* ------------------------------------------------- tikfout-suggestie ----- */
/* "Bedoel je koppelingen?" bij nul resultaten. Oogt als een link, is een
   <button> omdat het geen navigatie is maar een nieuwe zoekopdracht. */
.bf-search-suggestie {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--bf-primary, #00a3c4);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.bf-search-suggestie:hover { color: var(--bf-accent, #ffb600); }