/* VANDENBOORN AUTOMOTIVE - aanbodinterface in Brons & Bot.
   Vervangt de donkere richting uit vdb.css voor /aanbod/.
   Contract uit vdb.js: .vdb-results[data-view], .vdb-view button[data-view],
   .vdb-filters-toggle, .vdb-drawer, .vdb-scrim. */

/* ---------- Knoppen ---------- */
.vdb-btn{display:inline-flex;align-items:center;gap:8px;font-family:"Archivo",sans-serif;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;line-height:1;padding:14px 22px;border-radius:var(--vdb-r-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background-color .18s ease,color .18s ease;}
.vdb-btn svg{width:16px;height:16px;fill:currentColor;}
.vdb-btn--primary{background:var(--vdb-ink);color:#FFFFFF;}
.vdb-btn--primary:hover{background:var(--vdb-accent-deep);color:#FFFFFF;}
.vdb-btn--ghost{background:transparent;color:var(--vdb-ink);border-color:var(--vdb-ink);}
.vdb-btn--ghost:hover{background:var(--vdb-ink);color:#FFFFFF;}

/* ---------- Bovenbalk ---------- */
.vdb-bar{background:var(--vdb-bg);border-bottom:1px solid var(--vdb-line);position:sticky;top:0;z-index:20;}
.vdb-bar__inner{max-width:1320px;margin:0 auto;gap:var(--vdb-md);padding:18px 24px!important;align-items:center;}
.vdb-bar__search{flex:1 1 260px;min-width:0;}
.vdb-bar__right{margin-left:auto;display:flex;align-items:center;gap:var(--vdb-md);flex:0 0 auto;}

/* Zoekveld van JetSmartFilters. */
.vdb-bar .jet-search-filter__input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--vdb-line);border-radius:0;padding:10px 2px;font-family:"Manrope",sans-serif;font-size:15px;color:var(--vdb-ink);box-shadow:none;}
.vdb-bar .jet-search-filter__input::placeholder{color:var(--vdb-muted);}
.vdb-bar .jet-search-filter__input:focus{outline:none;border-bottom-color:var(--vdb-accent);}
.vdb-bar .jet-search-filter__submit,.vdb-bar .jet-search-filter__reset{display:none;}

/* Segmentschakelaar Lijst / Raster. */
.vdb-view{display:inline-flex;border:1px solid var(--vdb-ink);border-radius:var(--vdb-r-sm);overflow:hidden;}
.vdb-view button{display:inline-flex;align-items:center;gap:7px;font-family:"Archivo",sans-serif;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;line-height:1;padding:11px 16px;background:transparent;color:var(--vdb-ink);border:0;cursor:pointer;transition:background-color .18s ease,color .18s ease;}
.vdb-view button + button{border-left:1px solid var(--vdb-ink);}
.vdb-view button svg{width:15px;height:15px;fill:currentColor;}
.vdb-view button[aria-pressed="true"]{background:var(--vdb-ink);color:#FFFFFF;}

/* Sorteren. */
.vdb-bar .jet-sorting-select,.vdb-bar select{-webkit-appearance:none;appearance:none;background:transparent;border:0;border-bottom:1px solid var(--vdb-line);border-radius:0;font-family:"Archivo",sans-serif;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--vdb-ink);padding:11px 28px 11px 2px;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:18px;}
.vdb-bar select:focus{outline:none;border-bottom-color:var(--vdb-accent);}

@media (max-width:900px){
  .vdb-bar__inner{flex-wrap:wrap;gap:var(--vdb-sm);}
  .vdb-bar__search{order:3;flex:1 1 100%;}
  .vdb-bar__right{gap:var(--vdb-sm);}
  .vdb-view button{padding:10px 12px;}
  .vdb-view button span{display:none;}
}

/* ---------- Filterlade ---------- */
.vdb-drawer{background:var(--vdb-surface);border-right:1px solid var(--vdb-line);}
.vdb-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--vdb-md);border-bottom:1px solid var(--vdb-line);}
.vdb-drawer__close{background:transparent;border:0;cursor:pointer;font-size:22px;line-height:1;color:var(--vdb-ink);}
.vdb-drawer h3,.vdb-drawer .vdb-drawer__group-title{font-family:"Archivo",sans-serif;font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--vdb-accent);margin:0 0 var(--vdb-sm);}
.vdb-scrim{position:fixed;inset:0;background:rgba(0,0,0,0.45);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60;}
.vdb-scrim.is-open{opacity:1;pointer-events:auto;}

/* JetSmartFilters binnen de lade. */
.vdb-drawer .jet-filter{margin-bottom:var(--vdb-md);}
.vdb-drawer .jet-filter-label{font-family:"Archivo",sans-serif;font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--vdb-muted);margin-bottom:var(--vdb-xs);}
.vdb-drawer .jet-checkboxes-list__row{padding:6px 0;}
.vdb-drawer .jet-checkboxes-list__label{font-size:15px;color:var(--vdb-ink);}
.vdb-drawer .jet-checkboxes-list__decorator{border-radius:var(--vdb-r-sm);border:1px solid var(--vdb-line);}
.vdb-drawer .jet-filter-items-counter{color:var(--vdb-muted);font-size:13px;}
.vdb-drawer .jet-range__slider{background:var(--vdb-line);height:2px;}
.vdb-drawer .jet-range__slider__bar{background:var(--vdb-accent);}
.vdb-drawer .jet-range__slider__pin{background:var(--vdb-ink);border:0;border-radius:50%;}
.vdb-drawer .jet-range__inputs input{border:1px solid var(--vdb-line);border-radius:var(--vdb-r-sm);padding:8px;font-family:"Manrope",sans-serif;}

/* Actieve filters. */
.jet-active-filters .jet-active-filter{background:var(--vdb-sunk);border-radius:var(--vdb-r-sm);padding:6px 10px;font-size:13px;color:var(--vdb-ink);}

/* ---------- Resultaten ---------- */
.vdb-results{width:100%;}
.vdb-results .jet-listing-grid__items{gap:var(--vdb-md);}

/* Raster: twee kolommen, een onder 640px. */
.vdb-results[data-view="grid"] .jet-listing-grid__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
.vdb-results[data-view="grid"] .jet-listing-grid__item{width:100%!important;max-width:100%!important;padding:0!important;}
@media (max-width:640px){.vdb-results[data-view="grid"] .jet-listing-grid__items{grid-template-columns:1fr;}}

/* Lijst: twee kolommen met liggende kaarten, een onder 900px. */
.vdb-results[data-view="list"] .jet-listing-grid__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--vdb-lg);}
.vdb-results[data-view="list"] .jet-listing-grid__item{width:100%!important;max-width:100%!important;padding:0!important;border-top:1px solid var(--vdb-line);}
@media (max-width:900px){.vdb-results[data-view="list"] .jet-listing-grid__items{grid-template-columns:1fr;}}

/* ---------- Voertuigkaart ---------- */
.vdb-vcard{position:relative;background:var(--vdb-surface);border-radius:var(--vdb-r-md);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:transform .22s ease;}
.vdb-vcard:hover{transform:translateY(-2px);}
.vdb-vcard__media,.vdb-vcard .jet-listing-dynamic-image{display:block;}
.vdb-vcard .jet-listing-dynamic-image img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--vdb-sunk);}
.vdb-vcard__status{position:absolute;top:var(--vdb-sm);left:var(--vdb-sm);z-index:2;background:var(--vdb-ink);color:#FFFFFF;font-family:"Archivo",sans-serif;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:6px 12px;border-radius:var(--vdb-r-sm);}
.vdb-vcard__title{font-family:"Archivo",sans-serif;font-size:22px;font-weight:600;line-height:1.12;text-transform:uppercase;letter-spacing:-0.01em;color:var(--vdb-ink);margin:0;}
.vdb-vcard__trim{font-family:"Archivo",sans-serif;font-size:14px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;color:var(--vdb-muted);margin-top:4px;}
.vdb-vcard__price{font-family:"Archivo",sans-serif;font-size:22px;font-weight:600;color:var(--vdb-ink);}
.vdb-vcard__more{font-family:"Archivo",sans-serif;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--vdb-ink);border-bottom:1px solid var(--vdb-accent);padding-bottom:3px;display:inline-block;}
.vdb-vcard__more p{margin:0;}
.vdb-vcard:hover .vdb-vcard__more{color:var(--vdb-accent);}
.vdb-vcard__link{position:absolute;inset:0;z-index:3;font-size:0;color:transparent;}
.vdb-vcard__link:focus-visible{outline:2px solid var(--vdb-accent);outline-offset:-3px;}

/* Metaregel: bouwjaar, kilometerstand, brandstof, gescheiden door haarlijnen. */
.vdb-vcard__meta{display:flex;flex-wrap:wrap;gap:var(--vdb-sm);border-top:1px solid var(--vdb-line);border-bottom:1px solid var(--vdb-line);padding:11px 0;font-size:13px;color:var(--vdb-muted);}
.vdb-vcard__meta > *{margin:0;}

/* Lijstweergave: beeld links, tekst rechts, geen kaartvlak. */
.vdb-results[data-view="list"] .vdb-vcard{flex-direction:row;align-items:flex-start;gap:var(--vdb-md);background:transparent;border-radius:0;padding:var(--vdb-md) 0;}
.vdb-results[data-view="list"] .vdb-vcard:hover{transform:none;}
.vdb-results[data-view="list"] .vdb-vcard .jet-listing-dynamic-image{flex:0 0 240px;max-width:240px;}
.vdb-results[data-view="list"] .vdb-vcard .jet-listing-dynamic-image img{border-radius:var(--vdb-r-md);}
.vdb-results[data-view="list"] .vdb-vcard__status{top:calc(var(--vdb-md) + 8px);left:8px;}
.vdb-results[data-view="list"] .vdb-vcard__title{font-size:19px;}
.vdb-results[data-view="list"] .vdb-vcard__price{font-size:19px;}
@media (max-width:520px){
  .vdb-results[data-view="list"] .vdb-vcard{flex-direction:column;}
  .vdb-results[data-view="list"] .vdb-vcard .jet-listing-dynamic-image{flex:1 1 auto;max-width:100%;}
}

/* ---------- Leeg resultaat ---------- */
.vdb-empty{background:var(--vdb-sunk);border-radius:var(--vdb-r-md);padding:var(--vdb-lg);text-align:left;}
.vdb-empty h3{font-family:"Archivo",sans-serif;font-size:22px;font-weight:600;margin:0 0 var(--vdb-xs);}
.vdb-empty p{color:var(--vdb-muted);max-width:46ch;margin-bottom:var(--vdb-md);}

/* ---------- Paginering ---------- */
.jet-filters-pagination__item{font-family:"Archivo",sans-serif;font-size:13px;font-weight:600;color:var(--vdb-ink);border:1px solid var(--vdb-line);border-radius:var(--vdb-r-sm);min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;}
.jet-filters-pagination__current .jet-filters-pagination__link,.jet-filters-pagination__item.jet-filters-pagination__current{background:var(--vdb-ink);color:#FFFFFF;border-color:var(--vdb-ink);}

@media (prefers-reduced-motion:reduce){.vdb-vcard,.vdb-btn,.vdb-view button{transition:none;}}