/* =============================================================================
   AP-VEHICLES.CSS — "Auto's zoeken" (?ap_page=vehicles)
   =============================================================================
   Laadt NA ap-core.css / ap-tokens.css / ap-icons.css / ap-chrome.css.
   FASE 1: filterbalk-bovenrij + resultatenraster (grote kaarten, echte data).
   Alle maten in px. Scoped onder .ap-vs.
   ============================================================================= */

/* Zelfde grijze achtergrond + glow + volle breedte als Mijn auto's (consistente pagina-start). */
.ap-content:has(.ap-vs){
    background:#F5F7FB radial-gradient(900px 320px at 18% -8%, rgba(27,77,228,.045), transparent 70%) no-repeat !important;
    max-width:none !important;
}
.ap-vs{ width:100%; display:flex; flex-direction:column; gap:16px; padding:24px 32px 44px; }

/* ============================ FILTERBALK ============================ */
.ap-vs-bar{
    position:relative; z-index:5; overflow:hidden;
    border-radius:14px; border:1px solid #E7EBF2; background:#fff;
    box-shadow:0 1px 1px rgba(16,35,64,.03), 0 10px 28px -22px rgba(16,35,64,.5);
}
.ap-vs-bar__top{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:13px 16px; }

.ap-vs-search{ position:relative; flex:1 1 380px; min-width:0; }
.ap-vs-search > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:16px; color:#93A2B8; pointer-events:none; }
.ap-vs-search input{ width:100%; box-sizing:border-box; height:42px; padding:0 12px 0 38px; border-radius:10px; background:#fff; border:1px solid #DDE3ED; font:inherit; font-size:13px; color:#0C1F3F; }
.ap-vs-search input::placeholder{ color:#93A2B8; }
.ap-vs-search input:hover{ border-color:#C9D4E6; }
.ap-vs-search input:focus{ outline:none; border-color:#1B4DE4; box-shadow:0 0 0 3px rgba(27,77,228,.10); }

/* Hogere specificiteit (.ap-vs …) zodat de WooCommerce-knopregel niet blauw wint. */
.ap-vs .ap-vs-filterbtn{
    display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 15px;
    border-radius:10px; background:#fff !important; border:1px solid #DDE3ED !important;
    font:inherit; font-size:12.5px; font-weight:600; color:#42536B !important; cursor:pointer;
    transition:background var(--ap-t-fast,.15s), border-color var(--ap-t-fast,.15s);
}
.ap-vs .ap-vs-filterbtn > i{ font-size:16px; color:#7B8CA6 !important; }
.ap-vs .ap-vs-filterbtn:hover{ background:#F5F8FE !important; border-color:#C9D4E6 !important; }
.ap-vs .ap-vs-filterbtn[aria-expanded="true"]{ background:#F2F6FE !important; border-color:#1B4DE4 !important; }
.ap-vs-filterbtn__caret{ color:#93A2B8; font-size:12px !important; }

.ap-vs-bar__right{ margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ap-vs-count{ font-size:12px; color:#7B8CA6; }
.ap-vs-sort{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:#7B8CA6; }
.ap-vs-sort select{ height:34px; border:1px solid #DDE3ED; border-radius:9px; background:#fff; font:inherit; font-size:12.5px; color:#0C1F3F; padding:0 10px; cursor:pointer; }

/* ============================ RESULTATENRASTER ============================ */
.ap-vs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; }

.ap-vs-card{
    display:flex; flex-direction:column; overflow:hidden; text-decoration:none;
    border-radius:15px; border:1px solid #E7EBF2;
    background:linear-gradient(180deg,#FFFFFF 0%,#FDFEFF 100%);
    box-shadow:0 1px 1px rgba(16,35,64,.03), 0 10px 28px -22px rgba(16,35,64,.5);
    transition:border-color var(--ap-t-fast,.15s), box-shadow var(--ap-t-fast,.15s), transform var(--ap-t-fast,.15s);
}
.ap-vs-card:hover{ border-color:#C9D9F6; box-shadow:0 2px 5px rgba(16,35,64,.05), 0 20px 40px -24px rgba(16,35,64,.6); transform:translateY(-2px); }

.ap-vs-card__photo{ position:relative; aspect-ratio:16/10; display:grid; place-items:center; background:linear-gradient(155deg,#EDF1F8,#DFE6F1); overflow:hidden; }
.ap-vs-card__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ap-vs-card__photo > i{ font-size:34px; color:#B3BFD1; }
.ap-vs-card.is-sold .ap-vs-card__photo{ opacity:.55; }

.ap-vs-tag{ position:absolute; top:10px; left:10px; height:24px; padding:0 10px; display:inline-flex; align-items:center; gap:5px; border-radius:7px; font-size:11px; font-weight:600; box-shadow:0 1px 3px rgba(11,31,63,.14); }
.ap-vs-tag i{ font-size:12px; }
.ap-vs-tag--amber{ background:#FFF6E5; color:#8A6100; }
.ap-vs-tag--green{ background:#E9F8EF; color:#1B7A4B; }
.ap-vs-tag--sold{ background:#FBE9E7; color:#B0403A; }

.ap-vs-fotos{ position:absolute; left:10px; bottom:10px; height:22px; padding:0 8px; display:inline-flex; align-items:center; gap:5px; border-radius:6px; background:rgba(11,36,71,.72); color:#fff; font-size:10.5px; font-weight:550; }
.ap-vs-fotos i{ font-size:12px; }
.ap-vs-time{ position:absolute; right:10px; bottom:10px; height:22px; padding:0 8px; display:inline-flex; align-items:center; border-radius:6px; background:rgba(255,255,255,.92); color:#42536B; font-size:10.5px; font-weight:550; }

.ap-vs-card__tx{ display:flex; flex-direction:column; gap:6px; padding:13px 14px 4px; min-width:0; }
.ap-vs-card__title{ font-size:14.5px; font-weight:600; letter-spacing:-.016em; color:#0C1F3F; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-vs-card__uitv{ font-size:12px; color:#7A889E; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-vs-specs{ display:flex; flex-wrap:wrap; gap:5px 13px; font-size:11.5px; color:#42536B; }
.ap-vs-specs span{ display:inline-flex; align-items:center; gap:5px; }
.ap-vs-specs i{ font-size:13px; color:#93A2B8; }

.ap-vs-card__price{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:10px 14px 12px; }
.ap-vs-price{ display:flex; flex-direction:column; min-width:0; }
.ap-vs-price__kicker{ font-size:10px; font-weight:600; letter-spacing:.07em; color:#A6B2C4; }
.ap-vs-price__val{ font-size:18px; font-weight:600; letter-spacing:-.022em; color:#0C1F3F; }
.ap-vs-price__btw{ font-size:11px; color:#8B99AE; }
.ap-vs-cta{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:9px; font-size:12px; font-weight:600; }
.ap-vs-cta i{ font-size:13px; }
.ap-vs-cta--view{ background:#fff; border:1px solid #DDE3ED; color:#42536B; }
.ap-vs-cta--bod{ background:#FFFBF2; border:1px solid #E0A800; color:#8A6100; }

.ap-vs-card__foot{ display:flex; align-items:center; gap:7px; padding:9px 14px; background:#FBFCFE; border-top:1px solid #EEF1F7; font-size:11px; color:#8B99AE; white-space:nowrap; overflow:hidden; }
.ap-vs-card__foot i{ font-size:13px; color:#2FA96B; flex:0 0 auto; }

/* ============================ LEGE STAAT ============================ */
.ap-vs-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:56px 20px; border:1px dashed #D7DEEA; background:#FAFBFE; border-radius:14px; text-align:center; }
.ap-vs-empty > i{ font-size:28px; color:#B3BFD1; }
.ap-vs-empty b{ font-size:13.5px; font-weight:550; color:#0C1F3F; }
.ap-vs-empty p{ margin:0; font-size:12.5px; color:#7A889E; max-width:44ch; }
.ap-vs-empty__btn{ margin-top:6px; display:inline-flex; align-items:center; height:32px; padding:0 16px; border-radius:9px; border:1px solid #1B4DE4; background:#fff !important; color:#1B4DE4 !important; font-size:12.5px; font-weight:550; text-decoration:none; }

/* ============================ MOBIEL (voorlopig) ============================ */
@media (max-width:720px){
    .ap-vs-bar__right{ margin-left:0; flex-basis:100%; }
    .ap-vs-grid{ grid-template-columns:1fr; }
}

/* =============================================================================
   FASE 2 — Filterpaneel + chips
   ============================================================================= */
.ap-vs-filterbtn__cnt{ min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#1B4DE4; color:#fff; font-size:10.5px; font-weight:700; }
.ap-vs-filterbtn__cnt[hidden]{ display:none; }

/* Paneel */
.ap-vs-panel{ border-top:1px solid #EEF1F7; padding:2px 16px 18px; }
.ap-vs-panel[hidden]{ display:none; }
.ap-vs-panel__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px 22px; }
.ap-vs-fcol{ padding-top:14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.ap-vs-flabel{ font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#8B99AE; }
.ap-vs-flabel--mt{ margin-top:6px; }

/* Aanbodtype */
.ap-vs .ap-vs-aanbod{ display:flex; align-items:center; gap:8px; height:36px; padding:0 11px; border-radius:9px; background:#fff !important; border:1px solid #DDE3ED !important; font:inherit; font-size:12.5px; font-weight:500; color:#42536B !important; cursor:pointer; transition:background var(--ap-t-fast,.15s), border-color var(--ap-t-fast,.15s); }
.ap-vs .ap-vs-aanbod i{ font-size:15px; }
.ap-vs .ap-vs-aanbod > span{ flex:1 1 auto; text-align:left; }
.ap-vs .ap-vs-aanbod b{ font-weight:500; color:#8B99AE; }
.ap-vs .ap-vs-aanbod:hover{ background:#F5F8FE !important; }
.ap-vs .ap-vs-aanbod.is-active{ background:#EEF3FE !important; border-color:#1B4DE4 !important; color:#1B4DE4 !important; font-weight:600; }
.ap-vs-aanbod[data-aanbod="alle"] i{ color:#8B99AE; }
.ap-vs-aanbod[data-aanbod="bieding"] i{ color:#8A6100; }
.ap-vs-aanbod[data-aanbod="direct"] i{ color:#1B7A4B; }

/* Merk */
.ap-vs-merk{ position:relative; }
.ap-vs-merk__search{ width:100%; box-sizing:border-box; height:36px; padding:0 30px 0 11px; border-radius:9px; background:#fff; border:1px solid #DDE3ED; font:inherit; font-size:12.5px; color:#0C1F3F; }
.ap-vs-merk__search:focus{ outline:none; border-color:#1B4DE4; }
.ap-vs-merk__caret{ position:absolute; right:10px; top:18px; transform:translateY(-50%); font-size:13px; color:#93A2B8; cursor:pointer; }
.ap-vs-merk__list{ position:absolute; top:41px; left:0; right:0; z-index:14; max-height:238px; overflow-y:auto; background:#fff; border:1px solid #E2E7F0; border-radius:11px; box-shadow:0 18px 40px -16px rgba(11,31,63,.5); padding:4px; }
.ap-vs-merk__list[hidden]{ display:none; }
.ap-vs-merk__row{ position:relative; display:flex; align-items:center; gap:9px; height:34px; padding:0 8px; border-radius:7px; cursor:pointer; }
.ap-vs-merk__row:hover{ background:#F5F8FE; }
.ap-vs-merk__row input{ position:absolute; opacity:0; width:0; height:0; }
.ap-vs-merk__box{ flex:0 0 15px; width:15px; height:15px; border-radius:4px; border:1px solid #C9D4E6; display:flex; align-items:center; justify-content:center; background:#fff; }
.ap-vs-merk__box i{ font-size:11px; color:#fff; opacity:0; }
.ap-vs-merk__row input:checked + .ap-vs-merk__box{ background:#1B4DE4; border-color:#1B4DE4; }
.ap-vs-merk__row input:checked + .ap-vs-merk__box i{ opacity:1; }
.ap-vs-merk__name{ flex:1 1 auto; font-size:12.5px; color:#0C1F3F; }
.ap-vs-merk__cnt{ font-size:12px; color:#8B99AE; }
.ap-vs-merk__empty{ padding:10px; font-size:12px; color:#8B99AE; }
.ap-vs-merkpills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }

/* Pills (merk + brandstof + transmissie) */
.ap-vs-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.ap-vs .ap-vs-pill{ height:30px; padding:0 12px; border-radius:999px; background:#fff !important; border:1px solid #DDE3ED !important; font:inherit; font-size:11.5px; font-weight:550; color:#42536B !important; cursor:pointer; transition:background var(--ap-t-fast,.15s), border-color var(--ap-t-fast,.15s); }
.ap-vs .ap-vs-pill:hover{ background:#F5F8FE !important; }
.ap-vs .ap-vs-pill.is-active{ background:#EEF3FE !important; border-color:#1B4DE4 !important; color:#1B4DE4 !important; }
.ap-vs-merkpills .ap-vs-pill{ height:27px; }

/* Prijs */
.ap-vs-prijs{ display:flex; align-items:center; gap:8px; }
.ap-vs-prijs__in{ width:100%; min-width:0; box-sizing:border-box; height:36px; padding:0 10px; border-radius:9px; background:#fff; border:1px solid #DDE3ED; font:inherit; font-size:12.5px; color:#0C1F3F; }
.ap-vs-prijs__in:focus{ outline:none; border-color:#1B4DE4; }
.ap-vs-prijs__sep{ flex:0 0 auto; color:#B3BFD1; }

/* Schakelaars */
.ap-vs-switch{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.ap-vs-switch input{ position:absolute; opacity:0; width:0; height:0; }
.ap-vs-switch__track{ position:relative; flex:0 0 30px; width:30px; height:18px; border-radius:999px; background:#D7DEEA; transition:background var(--ap-t-fast,.15s); }
.ap-vs-switch__track::after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left var(--ap-t-fast,.15s); }
.ap-vs-switch input:checked + .ap-vs-switch__track{ background:#1B4DE4; }
.ap-vs-switch input:checked + .ap-vs-switch__track::after{ left:14px; }
.ap-vs-switch__lbl{ font-size:12.5px; color:#42536B; }

/* Paneelvoet */
.ap-vs-panel__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px -16px -18px; padding:11px 16px; background:#FBFCFE; border-top:1px solid #EEF1F7; }
.ap-vs-panel__count{ font-size:11.5px; color:#8B99AE; }
.ap-vs-panel__btns{ display:flex; gap:8px; }
.ap-vs .ap-vs-clear, .ap-vs .ap-vs-collapse{ height:32px; padding:0 14px; border-radius:9px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.ap-vs .ap-vs-clear{ background:#fff !important; border:1px solid #DDE3ED !important; color:#42536B !important; }
.ap-vs .ap-vs-collapse{ background:#F2F6FE !important; border:1px solid #1B4DE4 !important; color:#1B4DE4 !important; }

/* Chips */
.ap-vs-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ap-vs-chips[hidden]{ display:none; }
.ap-vs .ap-vs-chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:999px; background:#EEF3FE !important; border:1px solid #D6E1F8 !important; color:#1B4DE4 !important; font:inherit; font-size:11.5px; font-weight:550; cursor:pointer; }
.ap-vs .ap-vs-chip i{ font-size:11px; }
.ap-vs .ap-vs-chips__clear{ background:none !important; border:0 !important; font:inherit; font-size:11.5px; color:#7B8CA6 !important; cursor:pointer; }