/* ============================================================
   SmartSearch — Frontend stijlen
   LSART
   ============================================================ */

:root {
    --ss-groen:         #008029;
    --ss-groen-dark:    #006420;
    --ss-groen-light:   #f0faf4;
    --ss-tekst:         #1a1a1a;
    --ss-tekst-licht:   #555555;
    --ss-border:        #d4e8da;
    --ss-wit:           #ffffff;
    /* Losgekoppeld van --ss-wit: dit is specifiek de tekstkleur op knoppen
       (bijv. bij een lichte huisstijlkleur wil je juist donkere knoptekst),
       niet "wit" in het algemeen zoals kaart-achtergronden dat wel zijn. */
    --ss-knoptekst:     #ffffff;
    --ss-radius:        10px;
    --ss-radius-groot:  14px;
    --ss-schaduw:       0 4px 24px rgba(0,0,0,0.10);
    /* Bewust losgekoppeld van de (evt. door de klant ingestelde) huisstijlkleur:
       een focusring moet altijd goed zichtbaar zijn, ook als iemand een merkkleur
       kiest die zelf weinig contrast heeft. */
    --ss-focus:         #1a56db;
}

/* Twee lagen bescherming tegen thema-CSS (bv. Salient/Nectar), hieronder
   consequent toegepast op alle selectors:
   1) !important op elke vorm-/kleurbepalende eigenschap.
   2) Elke selector begint met #smartsearch-main en/of #smartsearch-float —
      de twee vaste wrapper-ID's van de widget. Een ID-selector weegt zwaarder
      dan elke combinatie van classes/attributen/elementen, dus zelfs als een
      thema óók !important gebruikt (bv.
      `body[data-button-style^="rounded"] button { border-radius:200px
      !important; }` — specificiteit 0,1,1), verliest die alsnog van onze
      `#smartsearch-float .smartsearch-float-btn` (specificiteit 1,1,0):
      bij twee !important-regels wint niet de laatste in de broncode, maar
      de hoogste specificiteit — en een ID klopt daar altijd overheen zonder
      zelf ook een ID te gebruiken. Dat laatste doen thema's vrijwel nooit
      voor generieke resets. */

/* Basisreset tegen generieke thema-tag-stijling (bv. `p { padding-bottom:
   27px; }`, zoals bij het Werkcentrum-thema) die via kale elementselectors
   (p, span, h1-h6, a, li, label) doorlekt in onze tekstelementen. Alleen
   padding — nooit margin — want de widget zet zelf nergens padding op deze
   kale tekst-tags (alleen op containers als div/button/form, die hier
   bewust buiten deze lijst blijven, want dáár zetten we wél bewust padding).
   :where() geeft dit 0 specificiteit, dus elke eigen regel met een class
   (altijd het geval hieronder) wint hier automatisch overheen. */
:is(#smartsearch-main, #smartsearch-float) :where(p, span, h1, h2, h3, h4, h5, h6, a, li, label) {
    padding: 0 !important;
}

/* Zelfde soort thema-lek, maar dan functioneel i.p.v. cosmetisch: als een
   thema ergens `div, span { display: ... !important; }` (of iets dat onze
   panelen/knoppen raakt) zet, wint dat van het `hidden`-attribuut waar het
   open/dicht-klappen van paneel en resultaten op leunt — de widget lijkt
   dan niet meer te reageren op klikken. Dit dwingt `[hidden]` altijd af
   binnen de widget, met dezelfde ID-specificiteit + !important-aanpak als
   de rest van dit bestand. */
:is(#smartsearch-main, #smartsearch-float) [hidden] {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════
   SHORTCODE — Hero-blok stijl (zoals Gemini design)
   Wit kaartje dat half over de hero valt
   ══════════════════════════════════════════════════════════ */

#smartsearch-main.smartsearch-hero-blok {
    background: var(--ss-wit) !important;
    border-radius: var(--ss-radius-groot) !important;
    box-shadow: var(--ss-schaduw) !important;
    padding: 28px 32px 24px;
    margin: -60px 40px 0;
    position: relative;
    z-index: 10;
}

#smartsearch-main .smartsearch-testbadge {
    background: #fff3cd;
    border: 1px solid #e6c800;
    color: #7a5f00;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    margin-bottom: 16px;
    display: inline-block;
}

/* Twee kolommen: titel links, invoer rechts */
#smartsearch-main .smartsearch-hero-inner {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

#smartsearch-main .smartsearch-hero-links {
    flex: 0 0 auto;
    max-width: 280px;
}

#smartsearch-main .smartsearch-hero-rechts {
    flex: 1;
}

#smartsearch-main .smartsearch-titel-rij {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
}

#smartsearch-main .smartsearch-titel {
    font-size: 20px;
    font-weight: 700;
    color: var(--ss-tekst);
    margin: 0;
    line-height: 1.3;
}

/* Avatar-rondje links van de titel — eigen upload, anders het site-icoon
   (favicon), anders een grijs placeholder-rondje. */
:is(#smartsearch-main, #smartsearch-float) .smartsearch-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0;
    display: block !important;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-avatar--leeg {
    background: #d0d0d0 !important;
}

#smartsearch-main .smartsearch-subtitel {
    font-size: 14px;
    color: var(--ss-tekst-licht);
    margin: 0;
}

/* ── Formulier ─────────────────────────────────────────────── */
#smartsearch-main .smartsearch-form {
    margin: 0;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ss-tekst-licht);
    margin: 0 0 6px !important;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-input-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-input {
    flex: 1;
    border: 1.5px solid #d0d5d0 !important;
    border-radius: 50px !important;
    padding: 11px 18px !important;
    font-size: 14px !important;
    color: var(--ss-tekst) !important;
    background: #f5f5f5 !important;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-input:focus {
    border-color: var(--ss-groen) !important;
    background: var(--ss-wit) !important;
    box-shadow: 0 0 0 3px rgba(0, 128, 41, 0.12) !important;
}

/* ── Wis-knop ("×") naast het invoerveld ─────────────────────
   .smartsearch-input-wrap i.p.v. het invoerveld zelf krijgt flex:1 en
   position:relative — de knop wordt daarbinnen absoluut gepositioneerd,
   los van de knopbreedte van "Stel je vraag" ernaast in dezelfde rij. */
:is(#smartsearch-main, #smartsearch-float) .smartsearch-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-input-wrap .smartsearch-input {
    width: 100%;
    padding-right: 38px !important;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-input-wis {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none !important;
    background: transparent !important;
    color: var(--ss-tekst-licht);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-input-wis:hover,
:is(#smartsearch-main, #smartsearch-float) .smartsearch-input-wis:focus-visible {
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--ss-tekst);
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-btn {
    background: var(--ss-groen) !important;
    color: var(--ss-knoptekst) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 11px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
    box-shadow: none !important;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-btn:hover,
:is(#smartsearch-main, #smartsearch-float) .smartsearch-btn:focus {
    background: var(--ss-groen-dark) !important;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-btn:focus-visible {
    outline: 3px solid var(--ss-focus) !important;
    outline-offset: 2px !important;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-btn--laden {
    opacity: 0.75;
    cursor: wait;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-btn--laden::after {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ss-spin 0.7s linear infinite;
    margin-left: 7px;
    vertical-align: middle;
}

@keyframes ss-spin {
    to { transform: rotate(360deg); }
}

/* ── Chips ─────────────────────────────────────────────────── */
:is(#smartsearch-main, #smartsearch-float) .smartsearch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-chip {
    background: var(--ss-wit) !important;
    border: 1.5px solid var(--ss-groen) !important;
    color: var(--ss-groen-dark) !important;
    font-size: 13px !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500 !important;
    transition: background 0.15s, color 0.15s;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-chip:hover,
:is(#smartsearch-main, #smartsearch-float) .smartsearch-chip:focus {
    background: var(--ss-groen) !important;
    color: var(--ss-knoptekst) !important;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-chip:focus-visible {
    outline: 3px solid var(--ss-focus) !important;
    outline-offset: 2px !important;
}

/* ── Resultaten ────────────────────────────────────────────── */
:is(#smartsearch-main, #smartsearch-float) .smartsearch-resultaten {
    margin-top: 20px;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-resultaten-intro {
    font-size: 13px;
    color: var(--ss-tekst-licht);
    margin: 0 0 10px !important;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-loading {
    color: var(--ss-tekst-licht);
    font-size: 14px;
    padding: 6px 0;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--ss-groen);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ss-spin 0.7s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

/* Grid i.p.v. gestapelde lijst: er zijn nooit meer dan 3 resultaten (de
   matching engine geeft er max. 3 terug), dus "3 naast elkaar" is meteen
   ook het absolute maximum — geen aparte begrenzing nodig. */
:is(#smartsearch-main, #smartsearch-float) .smartsearch-kaarten {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: stretch;
    gap: 14px;
    margin-bottom: 12px;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-kaart {
    display: flex !important;
    flex-direction: column;
    background: var(--ss-wit) !important;
    border: 1.5px solid var(--ss-border) !important;
    border-radius: var(--ss-radius-groot) !important;
    padding: 14px 18px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    /* Zonder dit trekt auto-fit een enkel kaartje over de volle breedte van
       de grid-track (bv. bij maar 1 resultaat) — minder prettig leesbaar op
       desktop. Cap op ongeveer de breedte die een kaartje zou hebben in een
       3-koloms rij. Alleen relevant op de hoofdpagina; het smalle
       float-paneel heeft toch nooit ruimte voor meerdere kolommen (zie
       override hieronder). */
    max-width: 320px;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-kaart:hover,
:is(#smartsearch-main, #smartsearch-float) .smartsearch-kaart:focus {
    border-color: var(--ss-groen) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-kaart:focus-visible {
    outline: 3px solid var(--ss-focus) !important;
    outline-offset: 2px !important;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-kaart:first-child {
    border-color: var(--ss-groen) !important;
    background: var(--ss-groen-light) !important;
}

/* flex column zodat de knop bij ongelijke tekstlengtes toch netjes
   onderaan elk kaartje uitlijnt binnen de grid-rij. */
:is(#smartsearch-main, #smartsearch-float) .smartsearch-kaart-body {
    margin: 0;
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

/* !important hier is bewust: dit kaartje draait binnen het thema van de
   klant, en globale paragraaf-marges van dat thema (bijv. via Bricks/VC)
   kunnen anders onze eigen, krappe marges overschrijven. */
:is(#smartsearch-main, #smartsearch-float) .smartsearch-kaart-titel {
    font-weight: 700;
    font-size: 15px;
    color: var(--ss-tekst);
    margin: 0 0 2px !important;
    line-height: 1.3;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-kaart-tekst {
    font-size: 13px;
    color: var(--ss-tekst-licht);
    margin: 0 0 6px !important;
    line-height: 1.45;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-kaart-btn {
    display: inline-block !important;
    align-self: flex-start;
    margin-top: auto;
    background: var(--ss-groen) !important;
    color: var(--ss-knoptekst) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none !important;
}

/* ── Fallback contactbalk ───────────────────────────────────── */
:is(#smartsearch-main, #smartsearch-float) .smartsearch-fallback {
    background: #fff9e6 !important;
    border: 1px solid #f0c84a !important;
    border-radius: var(--ss-radius) !important;
    padding: 10px 16px;
    font-size: 13px;
    color: #6b5200;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

:is(#smartsearch-main, #smartsearch-float) .smartsearch-fallback a {
    color: var(--ss-groen) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* ── Foutmelding ────────────────────────────────────────────── */
:is(#smartsearch-main, #smartsearch-float) .smartsearch-fout {
    background: #fff0f0 !important;
    border: 1px solid #ffb3b3 !important;
    border-radius: var(--ss-radius) !important;
    padding: 10px 16px;
    font-size: 13px;
    color: #8b0000;
}

/* ══════════════════════════════════════════════════════════
   ZWEVENDE WIDGET (rechtsonder op alle pagina's)
   ══════════════════════════════════════════════════════════ */

/* Positionering (fixed/bottom/right/z-index/transform) bewust ZONDER
   !important: het live voorbeeld in Instellingen hergebruikt deze classes
   maar zet daar zelf position:static via een inline style om de knop/paneel
   gewoon inline te tonen — !important zou die eigen override kapotmaken.
   Thema's resetten dit soort layout-eigenschappen sowieso vrijwel nooit
   generiek (dat zou hun eigen sticky/fixed elementen ook breken), dus hier
   is de ID-specificiteit zonder !important al voldoende. */
#smartsearch-float.smartsearch-float-wrapper {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-family: inherit;
}

#smartsearch-float.smartsearch-float-wrapper--links {
    right: auto;
    left: 24px;
}

#smartsearch-float.smartsearch-float-wrapper--links .smartsearch-float-panel {
    right: auto;
    left: 0;
}

#smartsearch-float.smartsearch-float-wrapper--midden {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

#smartsearch-float.smartsearch-float-wrapper--midden .smartsearch-float-panel {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

#smartsearch-float .smartsearch-float-btn {
    position: relative;
    background: var(--ss-groen) !important;
    color: var(--ss-knoptekst) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 20px 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18) !important;
    font-family: inherit;
    transition: background 0.2s;
}

#smartsearch-float .smartsearch-float-btn:hover,
#smartsearch-float .smartsearch-float-btn:focus {
    background: var(--ss-groen-dark) !important;
}

/* Ondersteunt zowel het ingebouwde <svg>-icoon als een eigen geüploade
   <img> (die geen eigen width/height-attributen heeft zoals de svg). */
#smartsearch-float .smartsearch-float-icon-open,
#smartsearch-float .smartsearch-float-icon-close {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
    flex-shrink: 0;
}

#smartsearch-float .smartsearch-float-btn:focus-visible {
    outline: 3px solid var(--ss-focus) !important;
    outline-offset: 2px !important;
}

#smartsearch-float .smartsearch-float-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e03131 !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ss-wit) !important;
    animation: ss-badge-pols 2s ease-in-out infinite;
}

@keyframes ss-badge-pols {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

#smartsearch-float .smartsearch-float-panel {
    /* position/bottom/right/width bewust zonder !important — zie toelichting
       bij .smartsearch-float-wrapper hierboven. box-shadow ook zonder
       !important: het live voorbeeld in Instellingen zet daar zelf een
       andere (kleinere) schaduw overheen.
       overflow:visible (i.p.v. hidden) is bewust: het avatar-rondje hangt
       gedeeltelijk buiten de paneelrand (alsof het avatar het "zegt") en
       zou anders afgesneden worden. De ronde bovenhoeken van de header
       komen daardoor niet meer "gratis" via clipping mee — die rondt de
       header nu zelf af, zie hieronder. */
    position: absolute;
    bottom: 64px;
    right: 0;
    width: 400px;
    background: var(--ss-wit) !important;
    border-radius: var(--ss-radius-groot) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    overflow: visible;
}

#smartsearch-float .smartsearch-float-header {
    background: var(--ss-groen) !important;
    color: var(--ss-knoptekst) !important;
    border-radius: var(--ss-radius-groot) var(--ss-radius-groot) 0 0 !important;
    padding: 13px 18px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
}

/* Zweeft volledig los, links van (niet boven) de titel — verticaal
   uitgelijnd met de headertekst, en met een echte marge tot de groene balk
   zodat hij er niet aan vastzit, zoals bij bekende chat-widgets
   (OpGroen-stijl). Zit vóór de header in de markup maar stapelt er toch
   overheen: positioned elements gaan altijd boven normale-flow siblings,
   ongeacht broncode-volgorde. */
#smartsearch-float .smartsearch-float-panel > .smartsearch-avatar {
    position: absolute !important;
    top: -8px !important;
    left: -76px !important;
    width: 60px !important;
    height: 60px !important;
    border: 3px solid var(--ss-wit) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
    z-index: 2;
}

#smartsearch-float .smartsearch-float-close {
    flex-shrink: 0;
    background: none !important;
    border: none !important;
    color: var(--ss-knoptekst) !important;
    font-size: 20px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    opacity: 0.85;
}

#smartsearch-float .smartsearch-float-close:hover {
    opacity: 1;
}

#smartsearch-float .smartsearch-float-close:focus-visible {
    outline: 2px solid var(--ss-wit) !important;
    outline-offset: 2px !important;
}

#smartsearch-float .smartsearch-float-form {
    padding: 18px 20px 8px;
}

#smartsearch-float .smartsearch-float-input-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

#smartsearch-float .smartsearch-float-input {
    flex: 1;
    font-size: 13px !important;
    padding: 10px 14px !important;
    border-radius: 50px !important;
    background: #f5f5f5 !important;
}

#smartsearch-float .smartsearch-input-wrap .smartsearch-float-input {
    padding-right: 34px !important;
}

#smartsearch-float .smartsearch-input-wis {
    width: 20px;
    height: 20px;
    font-size: 17px;
    right: 5px;
}

/* Icon-only knop: vaste breedte/hoogte + 50% radius voor een perfecte
   cirkel — met alleen padding (zoals voorheen) wordt het door de
   asymmetrische breedte/hoogte een afgeronde rechthoek, geen echte cirkel. */
#smartsearch-float .smartsearch-float-submit {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
}

#smartsearch-float .smartsearch-float-chips {
    gap: 6px;
}

#smartsearch-float .smartsearch-float-chips .smartsearch-chip {
    font-size: 12px !important;
    padding: 4px 10px !important;
}

#smartsearch-float .smartsearch-float-resultaten {
    position: relative;
    /* margin-top:0 overschrijft bewust de basis .smartsearch-resultaten
       (20px) — die was, samen met de padding-bottom van het formulier
       hierboven, veel te veel losse ruimte tussen de chips en de resultaten. */
    margin-top: 0;
    padding: 4px 20px 18px;
    max-height: 360px;
    overflow-y: auto;
}

/* Visuele hint dat er meer te scrollen valt — nodig omdat scrollbars op
   sommige platformen (bijv. macOS) standaard onzichtbaar zijn tot je scrolt.
   position:sticky + bottom:0 laat 'm vanzelf al goed uitlijnen met de
   werkelijke onderrand (incl. de padding-bottom van de container) — een
   eerdere margin-bottom: -18px hier bovenop trok 'm juist tegen die rand
   IN, waardoor de schaduw te hoog kwam te hangen en nog zichtbare content
   (zoals de "Meer informatie"-knop) eronder liet uitsteken. margin-top:
   -24px blijft wél nodig: zonder die correctie zou dit element de
   scrollhoogte met zijn eigen 24px verlengen i.p.v. over de laatste 24px
   van de voorgaande content heen te vallen. pointer-events:none zorgt dat
   de schaduw nooit klikken blokkeert, ook niet als hij over een knop heen
   zou vallen. */
#smartsearch-float .smartsearch-float-resultaten.smartsearch-heeft-meer::after {
    content: '';
    display: block;
    position: sticky;
    bottom: 0;
    height: 24px;
    margin-top: -24px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--ss-wit));
    pointer-events: none;
}

/* Losse, altijd volledig zichtbare voet voor de contact-fallback in de
   widget — staat buiten .smartsearch-float-resultaten, dus de "meer
   content"-schaduw hierboven kan 'm nooit meer overlappen (zie
   class-widget.php voor de toelichting). */
#smartsearch-float .smartsearch-float-fallback {
    padding: 0 20px 14px;
}

#smartsearch-float .smartsearch-float-fallback .smartsearch-fallback {
    font-size: 12px;
    padding: 8px 12px;
}

/* Kleine, duidelijke maar niet opdringerige LSART-vermelding onderaan het
   paneel — zelfde soort plek/stijl als "Powered by" bij bekende chat-
   widgets. Link bevat een ref-parameter met de sitenaam (zie
   SmartSearch_Shortcode::get_powered_by_url()) voor herkenning in Analytics. */
#smartsearch-float .smartsearch-float-branding {
    padding: 4px 20px !important;
    text-align: right;
    border-top: 1px solid var(--ss-border) !important;
    background: var(--ss-wit) !important;
    /* Het paneel gebruikt overflow:visible (voor het avatar-rondje), dus
       clipt zijn kinderen niet meer automatisch aan de eigen ronde hoeken —
       de onderhoeken hier daarom zelf afronden. */
    border-radius: 0 0 var(--ss-radius-groot) var(--ss-radius-groot) !important;
}

#smartsearch-float .smartsearch-float-branding a {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 11px !important;
    color: #999 !important;
    text-decoration: none !important;
}

#smartsearch-float .smartsearch-float-branding a strong {
    color: #666 !important;
    font-weight: 700 !important;
}

#smartsearch-float .smartsearch-float-branding-icoon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}

#smartsearch-float .smartsearch-float-branding a:hover,
#smartsearch-float .smartsearch-float-branding a:hover strong {
    color: var(--ss-groen-dark) !important;
}

/* De grid van de hoofdpagina is te breed voor het smalle float-paneel —
   hier blijven de kaartjes gewoon onder elkaar staan. */
#smartsearch-float .smartsearch-float-resultaten .smartsearch-kaarten {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    gap: 8px;
    margin-bottom: 10px;
}

#smartsearch-float .smartsearch-float-resultaten .smartsearch-kaart {
    padding: 10px 13px !important;
    max-width: none;
}

#smartsearch-float .smartsearch-float-resultaten .smartsearch-kaart-titel {
    font-size: 13px;
}

#smartsearch-float .smartsearch-float-resultaten .smartsearch-kaart-tekst {
    font-size: 12px;
}

#smartsearch-float .smartsearch-float-resultaten .smartsearch-kaart-btn {
    font-size: 12px !important;
    padding: 5px 12px !important;
}

/* ── Screenreader helpers ───────────────────────────────────── */
:is(#smartsearch-main, #smartsearch-float) .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    #smartsearch-main.smartsearch-hero-blok {
        margin: -40px 16px 0;
        padding: 20px 20px 18px;
    }

    #smartsearch-main .smartsearch-hero-inner {
        flex-direction: column;
        gap: 16px;
    }

    #smartsearch-main .smartsearch-hero-links {
        max-width: 100%;
    }

    :is(#smartsearch-main, #smartsearch-float) .smartsearch-input-row {
        flex-direction: column;
    }

    /* :not(.smartsearch-float-submit) is bewust: die knop deelt de
       .smartsearch-btn-class maar moet altijd de kleine ronde verzendknop
       blijven — zonder deze uitsluiting won deze regel (gelijke
       specificiteit, later in de broncode) van de vaste 42×42px-regel
       verderop en werd de widget's ronde knop op mobiel een volle balk. */
    :is(#smartsearch-main, #smartsearch-float) .smartsearch-btn:not(.smartsearch-float-submit) {
        width: 100% !important;
        text-align: center !important;
    }

    #smartsearch-float .smartsearch-float-panel {
        width: calc(100vw - 32px);
        right: -8px;
    }

    /* Kleiner en met veel minder overlap op smalle schermen: het paneel
       staat hier nog maar ~16px van de viewportrand af (breedte
       calc(100vw - 32px) hierboven), dus er is simpelweg geen ruimte om
       het avatar er ver buiten te laten zweven zonder dat de rand van het
       scherm hem afsnijdt. */
    #smartsearch-float .smartsearch-float-panel > .smartsearch-avatar {
        top: -2px !important;
        left: -10px !important;
        width: 36px !important;
        height: 36px !important;
    }

    /* Op een korte mobiele viewport (bv. liggend gebruik) kan een vaste
       360px anders het hele scherm vullen — beperk tot een deel van de
       zichtbare hoogte i.p.v. een vaste pixelwaarde. */
    #smartsearch-float .smartsearch-float-resultaten {
        max-height: 45vh;
    }
}