/* ===========================================================================
   Insluitbare Stocklist-iframe (publieke wagen-browser die dealers via een
   iframe op hun site zetten). Herbouw in de Stocklist-huisstijl-STRUCTUUR
   (rustige vormen, zachte lijnen, kalme typografie). UX geinspireerd op de
   nieuwe de-backer-filters: een filterkaart met pill-tabs, native selects,
   dubbele bereikschuiven, en een net wagen-raster.

   Kleur en letter zijn TOKENS (de --w-* variabelen hieronder): dit bestand
   kent geen enkele dealerkleur, het leest ze. De standaardwaarden zijn de
   Stocklist-look (papier, Inter, blauw); website/theme/base.blade.php zet er
   per dealer de accentkleur, de knopkleur en het lettertype overheen, en
   theme/dark.blade.php de nachtvariant. Geen jQuery-plugins meer (select2 /
   ionRangeSlider zijn eruit): native <select> en native <input type=range>.
   =========================================================================== */

/* Stocklist-huisstijl-font (zelf-gehost, dezelfde woff2 als de app), de
   standaard zolang de dealer geen Google-font koos. */
@font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/InterVariable.woff2') format('woff2');
}

:root {
    /* Neutralen (theme/light of theme/dark overschrijft ze) */
    --w-bg: #ffffff;                       /* de pagina */
    --w-fg: #101828;                       /* inkt */
    --w-muted: #475467;                    /* gedempte tekst, labels */
    --w-faint: #98a2b3;                    /* asjes, placeholders */
    --w-surface: #ffffff;                  /* kaarten, knoppen, velden op een vlak */
    --w-panel: #f7f9fc;                    /* de filterkaart en -balk */
    --w-field: #fafbfc;                    /* selects en tekstvelden */
    --w-line: rgba(16, 24, 40, .10);
    --w-line-soft: rgba(16, 24, 40, .05);
    --w-field-line: rgba(16, 24, 40, .18);
    --w-ok: #0e9f6e;
    /* Dealerkeuzes (theme/base zet ze) */
    --w-accent: #0a8fd4;                   /* interactief: links, actieve pill, schuiven, focus */
    --w-accent-fg: #ffffff;                /* tekst op het accent, gekozen in PHP (App\Support\Colour) */
    --w-button: var(--w-accent);           /* de knop "toon alle wagens" / "toon enkel eigen wagens" */
    --w-button-fg: var(--w-accent-fg);
    --w-font: 'InterVariable', 'Inter', system-ui, -apple-system, sans-serif;
    /* Afgeleiden */
    --w-accent-deep: color-mix(in srgb, var(--w-accent) 80%, #000);
    --w-button-deep: color-mix(in srgb, var(--w-button) 80%, #000);
    --w-hover: color-mix(in srgb, var(--w-fg) 6%, var(--w-surface));
    --w-placeholder: color-mix(in srgb, var(--w-fg) 8%, var(--w-surface));
    --w-rond: 12px;
}
html, body { background: var(--w-bg); }

.website_wrapper {
    color: var(--w-fg);
    box-sizing: border-box;
    padding: 0 clamp(12px, 3cqi, 28px) 40px;
    max-width: 1400px;
    margin: 0 auto;
    float: none !important;
    /* Query-container: de layout reageert op de ECHTE iframe-breedte (waar de
       iframe ook wordt ingesloten), niet op aannames. cqi/@container hieronder. */
    container-type: inline-size;
}
.website_wrapper,
.website_wrapper * { font-family: var(--w-font) !important; }
.website_wrapper *,
.website_wrapper *::before,
.website_wrapper *::after { box-sizing: border-box; }

/* --- Volle-breedte filterbalk (progressive disclosure) ------------------
   Ingeklapt (standaard) toont de balk INLINE de primaire controls: Merk +
   Verkoopprijs-schuif, plus rechts een "Meer filters"-knop met teller.
   Uitgeklapt verschijnt de rest (de getabde kaart) eronder. Vloeiend: op breed
   naast elkaar, op smal netjes gestapeld. */
.ui-wbar-filter {
    display: flex; flex-wrap: wrap; align-items: end; gap: 12px 18px;
    background: var(--w-panel); border: 1px solid var(--w-line); border-radius: var(--w-rond);
    padding: 12px 16px; margin: 18px 0 14px;
}
.ui-wbar-filter .ui-wfield { flex: 1 1 160px; max-width: 300px; }   /* Merk/Brandstof */
.ui-wbar-filter .ui-wrange { flex: 1.6 1 240px; max-width: 460px; } /* Prijs/Km */
.ui-wbar-filter .ui-wtoggle { flex: 0 0 auto; margin-left: auto; align-self: end; }

/* Balk-controls: zichtbaarheid per ECHTE iframe-breedte (container-queries op
   .website_wrapper). Standaard (< ~560px) alles verborgen -> enkel de knop.
   tier1 (Merk + Prijs) vanaf 560, tier2 (Brandstof + Km) vanaf 920. */
.ui-wbar-filter .ui-wbar-ctrl { display: none; }   /* 0,2,0: wint van .ui-wfield/.ui-wrange { display:flex } */
@container (min-width: 560px) { .ui-wbar-filter .ui-wbar-ctrl.tier1 { display: flex; } }
@container (min-width: 920px) { .ui-wbar-filter .ui-wbar-ctrl.tier2 { display: flex; } }
/* Uitgeklapt: toon ALLE balk-controls (ongeacht breedte) naast het paneel. */
.ui-wbar-filter.is-open .ui-wbar-ctrl { display: flex; }

/* Smal + ingeklapt: enkel de toggle is zichtbaar. Maak hem dan VOLLE BREEDTE zodat de balk
   niet als een verloren knopje rechts oogt, maar als een duidelijke "Filters"-CTA. Zodra
   tier1 verschijnt (>=560) valt de knop terug naar rechts naast de controls. */
@container (max-width: 559px) {
    .ui-wbar-filter:not(.is-open) .ui-wtoggle {
        width: 100%; margin-left: 0; justify-content: center;
    }
}

/* Knop-label: smal "Filters", breder "Meer filters". */
.ui-wtoggle .tgl-breed { display: none; }
@container (min-width: 560px) {
    .ui-wtoggle .tgl-smal { display: none; }
    .ui-wtoggle .tgl-breed { display: inline; }
}
.ui-wtoggle {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid var(--w-field-line); background: var(--w-surface); color: var(--w-fg);
    font: inherit; font-size: 14px; font-weight: 600; padding: 9px 17px;
    border-radius: 999px; cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.ui-wtoggle:hover { border-color: var(--w-accent); color: var(--w-accent); }
.ui-wtoggle .chev {
    width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .18s ease; margin-top: -3px;
}
.ui-wtoggle[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 3px; }
.ui-wtoggle-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--w-accent); color: var(--w-accent-fg); font-size: 12px; font-weight: 700; line-height: 1;
}
.ui-wtoggle-count[hidden] { display: none; }

/* --- Filterkaart -------------------------------------------------------- */
.ui-wfilter {
    background: var(--w-panel);
    border: 1px solid var(--w-line);
    border-radius: var(--w-rond);
    padding: 6px 18px 18px;
    margin: 0 0 20px;
}
.ui-wfilter[hidden] { display: none; }

/* Pill-tabs (de bestaande Bootstrap .nav-tabs herstyled). */
.ui-wfilter .nav-tabs {
    display: flex;
    border: 0;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 0 16px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--w-line);
}
/* Tab-panes tonen/verbergen (Bootstrap-CSS is verwijderd; vanilla tab-JS zet .active). */
.ui-wfilter .tab-pane { display: none; }
.ui-wfilter .tab-pane.active { display: block; }
.ui-wfilter .nav-tabs .nav-link {
    border: 1px solid var(--w-line);
    border-radius: 999px;
    background: var(--w-surface);
    color: var(--w-fg);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 18px;
    line-height: 1.1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ui-wfilter .nav-tabs .nav-link:hover { background: var(--w-hover); }
.ui-wfilter .nav-tabs .nav-link.active {
    background: var(--w-accent);
    border-color: var(--w-accent);
    color: var(--w-accent-fg) !important;    /* leesbaar op het accent (PHP koos wit of inkt); !important wint van Bootstrap-CDN/thema/injectie */
}

/* Velden-raster (compact, vloeiend: vult elke breedte zonder vaste kolomtelling) */
.ui-wfields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 11px 16px;
    align-items: start;
    margin: 2px 0;
}
.ui-wfield { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui-wfield > label,
.ui-wrange .ui-wr-head label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--w-muted);
    margin: 0;
}

/* Native selects + tekstvelden in huisstijl */
.website_wrapper select,
.website_wrapper input[type="text"]:not(.ui-wr-lo):not(.ui-wr-hi),
.website_wrapper input:not([type]) {
    width: 100%;
    height: 38px;
    padding: 0 36px 0 11px;
    border: 1px solid var(--w-field-line);
    border-radius: 8px;
    background: var(--w-field);
    color: var(--w-fg);
    font: inherit;
    font-size: 13.5px;
    line-height: 38px;
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.website_wrapper select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398a2b3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
.website_wrapper select:focus,
.website_wrapper input:focus {
    outline: 0;
    border-color: var(--w-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-accent) 20%, transparent);
}
.website_wrapper select:disabled { background: var(--w-placeholder); color: var(--w-faint); cursor: not-allowed; }

/* Checkbox (flexlease enkel-optie, opties-tab) */
.website_wrapper .form-check-input,
.website_wrapper input[type="checkbox"] { accent-color: var(--w-accent); width: 17px; height: 17px; }

/* --- Dubbele bereikschuiven (prijs, km, bouwjaar): vloeiend ---------------
   Flexbox met flex-grow: bij brede iframe 3 op een rij, medium 2, smal 1, en
   een alleenstaande schuif op de laatste rij groeit tot volle breedte (geen
   gapende lege helft). Past zich aan elke containerbreedte aan. */
.ui-wranges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin-top: 12px;
}
.ui-wrange { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-wr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ui-wr-val { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--w-accent); font-size: 12px; }
/* Histogram achter de schuif: verdeling van de voorraad over dit bereik. */
.ui-wr-histo {
    display: flex; align-items: flex-end; gap: 2px;
    height: 15px; padding: 0 9px; margin-bottom: 0;
}
.ui-wr-bar {
    flex: 1; min-height: 2px; border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, var(--w-fg) 18%, var(--w-surface)); transition: background .12s ease;
}
.ui-wr-bar.on { background: var(--w-accent); }
.ui-wr-track { position: relative; height: 18px; margin: 0; }
.ui-wr-rail { position: absolute; left: 9px; right: 9px; top: 7px; height: 4px; background: var(--w-line); border-radius: 2px; }
.ui-wr-fill { position: absolute; top: 7px; height: 4px; background: var(--w-accent); border-radius: 2px; }
.ui-wr-track input[type="range"] {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    background: transparent; border: 0; outline: 0; box-shadow: none;
    -webkit-appearance: none; appearance: none; pointer-events: none;
}
.ui-wr-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--w-surface); border: 2px solid var(--w-accent);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .25); cursor: grab; margin-top: 0;
}
.ui-wr-track input[type="range"]::-moz-range-thumb {
    pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
    background: var(--w-surface); border: 2px solid var(--w-accent);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .25); cursor: grab;
}
.ui-wr-track input[type="range"]::-webkit-slider-runnable-track { height: 18px; background: transparent; }
.ui-wr-track input[type="range"]::-moz-range-track { height: 18px; background: transparent; }
.ui-wr-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--w-faint); margin-top: -1px; }

/* Opties-tab: dichte meerkoloms opzet i.p.v. een lange kolom vinkjes */
.ui-wopt-group { margin-bottom: 6px; }
.ui-wopt-group > h5 {
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--w-muted); border-bottom: 1px solid var(--w-line-soft);
    padding: 12px 0 6px; margin: 0 0 8px;
}
.ui-wopt-checks {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 4px 16px; margin-bottom: 10px;
}
.ui-wopt-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--w-fg); line-height: 1.25; cursor: pointer;
}
.ui-wopt-check input { flex: none; margin: 0; }

/* Actieve-filter-chips + teller */
.ui-wbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 2px 0 18px;
}
.ui-wcount { font-size: 15px; color: var(--w-muted); }
.ui-wcount b { color: var(--w-fg); font-weight: 700; }
.ui-wchips { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-wchip {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--w-accent); background: color-mix(in srgb, var(--w-accent) 10%, var(--w-surface));
    color: var(--w-accent); font-size: 13px; font-weight: 500;
    padding: 5px 8px 5px 12px; border-radius: 999px; cursor: pointer;
    font-family: inherit;
}
.ui-wchip:hover { background: var(--w-accent); color: var(--w-accent-fg); }
.ui-wchip .x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--w-accent); color: var(--w-accent-fg);
}
.ui-wchip:hover .x { background: var(--w-accent-fg); color: var(--w-accent); }
.ui-wreset {
    border: 0; background: none; color: var(--w-muted); text-decoration: underline;
    cursor: pointer; font: inherit; font-size: 13.5px; padding: 0;
}
.ui-wreset:hover { color: var(--w-accent); }

/* --- Wagen-raster ------------------------------------------------------- */
.ui-wgrid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    /* Vloeiend: zoveel kaarten per rij als er passen, bij elke breedte. auto-fill
       (niet -fit) zodat een handvol resultaten niet uitrekt tot reuzenkaarten. */
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 24px;
}
.ui-wsep { border: 0; border-top: 1px solid var(--w-line); margin: 30px 0; }
.ui-wsub { font-size: 14px; font-weight: 600; color: var(--w-muted); margin: 0 0 14px; }

.ui-wcard {
    background: var(--w-surface); border: 1px solid var(--w-line); border-radius: var(--w-rond);
    overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.ui-wcard:hover {
    box-shadow: 0 10px 26px rgba(16, 24, 40, .13);
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--w-accent) 40%, var(--w-line));
}
.ui-wphoto {
    position: relative; display: block; aspect-ratio: 4 / 3;
    background: var(--w-placeholder);
    overflow: hidden;
}
.ui-wphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-wphoto .ui-wph-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--w-faint); font-size: 40px;
}
/* Badges linksboven op de foto (garantie / lease) */
.ui-wtags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; }
.ui-wtag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(16, 24, 40, .78); color: #fff; backdrop-filter: blur(4px);
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    padding: 4px 9px; border-radius: 999px;
}
.ui-wtag i { font-size: 11px; }
.ui-wtag.warr i { color: #6fe0b0; }
.ui-wtag.lease i { color: #7cc4f0; transform: rotate(-45deg); }

.ui-wbody { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.ui-wtitle {
    font-size: 15.5px; font-weight: 700; color: var(--w-fg); line-height: 1.25;
    margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ui-wspecs {
    font-size: 13px; color: var(--w-muted); line-height: 1.4;
}
.ui-wprice {
    margin-top: auto; padding-top: 8px;
    font-size: 18px; font-weight: 800; color: var(--w-fg);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ui-wprice small { font-size: 13px; font-weight: 600; color: var(--w-muted); }

.ui-wempty { padding: 50px 20px; text-align: center; color: var(--w-muted); font-size: 15px; }

/* Infinite scroll: sentinel + discrete laad-indicator */
.ui-wsentinel {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 28px 0 10px; color: var(--w-muted); font-size: 14px;
}
.ui-wspin {
    width: 18px; height: 18px; border: 2px solid var(--w-line);
    border-top-color: var(--w-accent); border-radius: 50%;
    animation: ui-wspin .7s linear infinite;
}
@keyframes ui-wspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-wspin { animation-duration: 2s; } }

/* "Niet gevonden wat u zoekt?" + toon-meer/eigen-voorraad-toggle */
.ui-wmore {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    text-align: center; margin-top: 36px; padding-top: 28px;
    border-top: 1px solid var(--w-line);
}
.ui-wmore h4 { margin: 0; font-size: 17px; font-weight: 700; color: var(--w-fg); }
.ui-wbtn {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid transparent; border-radius: 999px;
    font: inherit; font-size: 14px; font-weight: 600; padding: 11px 24px;
    cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* De wagenaanbod-toggle (stocklist_integration.blade.php) draagt de knopkleur van de dealer
   (website_toggle_button_color, --w-button; zonder keuze het accent): gevuld voor "toon alle
   wagens", als omlijning voor "toon enkel eigen wagens". */
.ui-wbtn--primary { background: var(--w-button); border-color: var(--w-button); color: var(--w-button-fg); }
.ui-wbtn--primary:hover { background: var(--w-button-deep); border-color: var(--w-button-deep); }
.ui-wbtn--ghost { background: var(--w-surface); border-color: var(--w-button); color: var(--w-button); }
.ui-wbtn--ghost:hover { background: var(--w-button); color: var(--w-button-fg); }
.ui-wbtn .ui-wspin { width: 15px; height: 15px; border-color: color-mix(in srgb, var(--w-button-fg) 50%, transparent); border-top-color: var(--w-button-fg); }
.ui-wbtn--ghost .ui-wspin { border-color: var(--w-line); border-top-color: var(--w-button); }
.ui-wbtn .ui-wspin.d-none { display: none; }

/* Kolomaantallen regelen auto-fit/flex hierboven zelf (vloeiend op elke breedte).
   Enkel de smalle-breedte-tweaks blijven, en die reageren op de ECHTE
   iframe-breedte via @container (niet de viewport). Kleine media-fallback voor
   browsers zonder container queries. */
@container (max-width: 440px) {
    .ui-wfilter { padding: 6px 12px 14px; }
    .ui-wr-track { height: 24px; }
    .ui-wr-track input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
    .ui-wr-track input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }
    .ui-wr-rail, .ui-wr-fill { top: 10px; }
    .ui-wtitle { font-size: 14.5px; }
    .ui-wprice { font-size: 16.5px; }
}
@supports not (container-type: inline-size) {
    @media (max-width: 440px) {
        .ui-wr-track { height: 24px; }
        .ui-wr-track input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
        .ui-wr-track input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }
        .ui-wr-rail, .ui-wr-fill { top: 10px; }
    }
}