/* =========================================================================
   VDK OCCASIONS — style.css
   Donker premium thema. Mobiel-eerst en volledig responsive.
   Kleuren, fonts en componenten staan netjes gegroepeerd zodat je
   eenvoudig zelf kleine dingen kunt aanpassen.
   ========================================================================= */

/* ===== 1. RESET & BASIS ================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

img { max-width: 100%; height: auto; display: block; }

/* Respecteer het hidden-attribuut altijd (ook bij elementen met een eigen display-regel) */
[hidden] { display: none !important; }

/* Kleuren, afstanden en andere instellingen op één plek (CSS-variabelen).
   Wil je een kleur aanpassen? Verander de waarde hier en het werkt overal. */
:root {
  /* Achtergronden (zwart/antraciet) */
  --bg:          #0a0a0a;
  --bg-soft:     #0f0f11;
  --surface:     #141417;
  --surface-2:   #1b1b1f;

  /* Randen */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Tekst */
  --text:   #f4f5f7;
  --muted:  #9aa0a6;

  /* Accent: chic zilver/platinum (subtiel, niet schreeuwerig) */
  --accent:        #cdd2da;
  --accent-strong: #eef1f5;

  /* WhatsApp-groen */
  --whatsapp:       #25d366;
  --whatsapp-dark:  #1da851;

  /* Statuskleuren */
  --sold: #e0524d;

  /* Vormgeving */
  --radius:    14px;
  --radius-sm: 10px;
  --maxw:      1200px;
  --shadow:    0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);

  /* Overgangen */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Koppen in Poppins (modern, geometrisch, premium) */
h1, h2, h3, h4 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Toegankelijkheid: duidelijke focus-rand voor toetsenbordgebruikers */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respecteer de voorkeur "minder beweging" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 2. HULPKLASSEN =================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding: 72px 0; }

.section-head { max-width: 640px; margin-bottom: 40px; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.section h2 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin-bottom: 14px;
}

.section .lead { color: var(--muted); font-size: 1.05rem; }

.text-center { text-align: center; }
.center-x { margin-inline: auto; }

/* Subtiele "onthul bij scrollen"-animatie (aangestuurd via JavaScript) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== 3. KNOPPEN ====================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primaire knop: licht, premium */
.btn-primary {
  background: var(--accent-strong);
  color: #0a0a0a;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: #fff; box-shadow: 0 10px 30px rgba(255, 255, 255, 0.14); }

/* Secundaire knop: omlijnd */
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--text); background: rgba(255, 255, 255, 0.04); }

/* WhatsApp-knop */
.btn-whatsapp {
  background: var(--whatsapp);
  color: #06351c;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.25);
}
.btn-whatsapp:hover { background: #2ee06f; box-shadow: 0 10px 28px rgba(37, 211, 102, 0.4); }

.btn .icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ===== 4. HEADER / NAVIGATIE =========================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav-logo img { height: 42px; width: auto; }

/* Menu — op mobiel verborgen achter het hamburgermenu */
.nav-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(80vw, 320px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 100px 28px 40px;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  display: flex;
}
.nav-menu.open { transform: translateX(0); }

.nav-menu a {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--muted);
  padding: 10px 0;
  width: 100%;
  transition: color 0.25s;
}
.nav-menu a:hover,
.nav-menu a.active { color: var(--text); }

.nav-menu .btn { margin-top: 14px; width: 100%; }

/* Hamburger-knop */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1100;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Donkere laag achter het open menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
  z-index: 999;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

/* Op desktop: menu gewoon in de balk, geen hamburger */
@media (min-width: 900px) {
  .nav-toggle, .nav-overlay { display: none; }
  .nav-menu {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 0;
    background: none;
    border: none;
    transform: none;
  }
  .nav-menu a { width: auto; padding: 0; font-size: 0.95rem; }
  .nav-menu .btn { margin-top: 0; width: auto; padding: 10px 22px; }
  .nav-menu a:not(.btn)::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
    margin-top: 3px;
  }
  .nav-menu a:not(.btn):hover::after,
  .nav-menu a.active::after { transform: scaleX(1); }
}

/* ===== 5. HERO ========================================================= */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: 90px;
  overflow: hidden;
  background: var(--bg); /* donkere fallback zolang de video laadt */
}
/* Achtergrondvideo (mobiel-vriendelijk: muted + autoplay + playsinline).
   Laag 0 = video, laag 1 = donkere overlay, laag 2 = de tekst.
   Met positieve z-index voorkomen we dat de video achter de
   achtergrondkleur verdwijnt. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Donkere overlay bovenop de video, zodat de tekst goed leesbaar blijft.
   Links donkerder (waar de tekst staat), rechts lichter (video zichtbaar).
   Onderaan loopt het uit naar zwart voor een vloeiende overgang. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.6) 45%, rgba(10,10,10,0.25) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.2) 0%, transparent 35%, rgba(10,10,10,0.96) 100%);
}
/* De inhoud (kop, tekst, knoppen) bovenop alles */
.hero-inner { position: relative; z-index: 2; }
/* Tekstschaduw zodat de koppen altijd leesbaar zijn over de video */
.hero h1, .hero p { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.hero-inner { max-width: 760px; }
.hero h1 {
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  margin-bottom: 22px;
}
.hero h1 .accent {
  background: linear-gradient(120deg, #fff 0%, var(--accent) 60%, #8a8f96 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 36px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Kleine vertrouwens-balk onder de knoppen */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 46px;
  color: var(--muted);
  font-size: 0.9rem;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 18px; height: 18px; color: var(--accent); }

/* ===== 6. WAARDEN-KAARTEN ============================================== */
.values { background: var(--bg-soft); }
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s;
}
.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.value-card .ic {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(205, 210, 218, 0.08);
  margin-bottom: 18px;
}
.value-card .ic svg { width: 26px; height: 26px; color: var(--accent); }
.value-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.value-card p { color: var(--muted); font-size: 0.95rem; }

/* ===== 7. AUTO-GRID & KAARTEN ========================================== */
.cars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* Hele kaart is klikbaar (link). Knop binnenin blijft los klikbaar. */
.car-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.car-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.car-media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
  overflow: hidden;
}
.car-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.car-card:hover .car-media img { transform: scale(1.05); }

/* Prijs-badge op de foto */
.car-price-tag {
  position: absolute;
  left: 14px; bottom: 14px;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  padding: 7px 14px;
  border-radius: 10px;
}
/* "Verkocht"-label */
.car-sold-badge {
  position: absolute;
  right: 14px; top: 14px;
  background: var(--sold);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 8px;
}
.car-card.is-sold .car-media img { opacity: 0.55; }

.car-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.car-title { font-size: 1.2rem; font-family: 'Poppins', sans-serif; font-weight: 600; }
.car-sub { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }

/* Specs als kleine rij met scheidingsstippen */
.car-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 0.88rem;
}
.car-specs li { display: inline-flex; align-items: center; gap: 6px; }
.car-specs svg { width: 15px; height: 15px; opacity: 0.7; }

/* "Stretched link": de titel-link bedekt de hele kaart, zo is alles klikbaar
   naar de detailpagina. De WhatsApp-knop ligt erbovenop (hogere z-index) en
   blijft dus apart klikbaar. Geen ongeldige geneste <a>-tags nodig. */
.car-link { color: inherit; }
.car-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}
.car-card .car-footer { position: relative; z-index: 2; }

.car-footer { margin-top: auto; }
.car-footer .btn { width: 100%; }

/* ===== 8. UITGELICHT (homepage) ======================================= */
.featured-cta { margin-top: 40px; text-align: center; }

/* ===== 9. OVER ONS ===================================================== */
.about { background: var(--bg-soft); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
.about-text p { color: var(--muted); margin-bottom: 16px; }
.about-text p strong { color: var(--text); font-weight: 600; }
.about-stats { display: flex; gap: 30px; margin-top: 26px; flex-wrap: wrap; }
.about-stats .stat .num {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-strong);
}
.about-stats .stat .lbl { color: var(--muted); font-size: 0.85rem; }
.about-visual img { border-radius: var(--radius); border: 1px solid var(--border); }

/* ===== 10. CONTACT ==================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.contact-list { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.contact-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-item .ic {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(205, 210, 218, 0.08);
}
.contact-item .ic svg { width: 22px; height: 22px; color: var(--accent); }
.contact-item .lbl { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.contact-item .val { font-size: 1.05rem; color: var(--text); }
.contact-item a.val:hover { color: var(--accent); }

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 320px;
  height: 100%;
}
.map-embed iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: grayscale(0.3) contrast(1.05); }

/* ===== 11. FOOTER ===================================================== */
.site-footer {
  background: #070707;
  border-top: 1px solid var(--border);
  padding: 56px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  margin-bottom: 36px;
}
.footer-brand img { height: 48px; margin-bottom: 16px; }
.footer-brand p { color: var(--muted); font-size: 0.92rem; max-width: 320px; }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col address {
  color: var(--text);
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.7;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent); }

/* Social-iconen */
.socials { display: flex; gap: 12px; }
.socials a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color 0.25s, border-color 0.25s, transform 0.25s;
}
.socials a:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ===== 12. ZWEVENDE WHATSAPP-KNOP ===================================== */
.wa-float {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 900;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
  animation: wa-pop 0.4s var(--ease) 0.6s both;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6); }
.wa-float svg { width: 30px; height: 30px; color: #fff; }
@keyframes wa-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ===== 13. VOORRAAD: FILTERBALK + STATUS ============================== */
.page-hero {
  padding: 130px 0 40px;
  background: linear-gradient(180deg, #0d0d10, #0a0a0a);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: 10px; }
.page-hero p { color: var(--muted); max-width: 560px; }

.filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 28px 0 34px;
}
.filters .field { display: flex; flex-direction: column; gap: 6px; }
.filters label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.filters input,
.filters select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.25s, background 0.25s;
}
.filters input::placeholder { color: #6a6e74; }
.filters input:focus,
.filters select:focus { border-color: var(--border-strong); background: var(--surface-2); outline: none; }
.filters select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}

.results-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}
.results-bar .reset {
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-family: inherit;
}
.results-bar .reset:hover { text-decoration: underline; }

/* Laad-, lege en foutmeldingen */
.state {
  text-align: center;
  padding: 70px 20px;
  color: var(--muted);
}
.state svg { width: 48px; height: 48px; margin-bottom: 16px; color: var(--accent); opacity: 0.7; }
.state h3 { font-size: 1.3rem; color: var(--text); margin-bottom: 8px; }
.state p { max-width: 420px; margin: 0 auto 20px; }

/* Laad-spinner */
.spinner {
  width: 38px; height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton-kaarten tijdens het laden */
.skeleton-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.skeleton {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.skeleton .sk-img { aspect-ratio: 3 / 2; }
.skeleton .sk-line { height: 14px; border-radius: 6px; margin: 14px 20px; }
.skeleton .sk-img,
.skeleton .sk-line {
  background: linear-gradient(90deg, var(--surface-2) 25%, #232328 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}
.skeleton .sk-line.short { width: 50%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ===== 14. AUTODETAIL (auto.html) ==================================== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 22px;
  transition: color 0.2s, gap 0.2s;
}
.back-link:hover { color: var(--text); gap: 12px; }
.back-link svg { width: 18px; height: 18px; }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

/* Fotogalerij */
.gallery-main {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main .nav-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, 0.7);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
}
.gallery-main .nav-btn:hover { background: rgba(10, 10, 10, 0.95); }
.gallery-main .nav-btn.prev { left: 12px; }
.gallery-main .nav-btn.next { right: 12px; }
.gallery-main .nav-btn svg { width: 22px; height: 22px; }
.gallery-main .sold-overlay {
  position: absolute;
  left: 16px; top: 16px;
  background: var(--sold);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 8px;
}

.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumbs button {
  width: 84px; height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--surface-2);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, opacity 0.2s;
  opacity: 0.6;
}
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button.active { border-color: var(--accent); opacity: 1; }

/* Info-kolom */
.detail-info .car-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.detail-info .price {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 700;
  color: var(--accent-strong);
  margin: 14px 0 4px;
}
.detail-info .price .vat { font-size: 0.9rem; color: var(--muted); font-weight: 400; }

.spec-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 24px 0;
}
.spec-block .spec {
  background: var(--surface);
  padding: 16px 18px;
}
.spec-block .spec .k { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.spec-block .spec .v { font-size: 1.05rem; font-weight: 500; margin-top: 2px; }

.detail-desc { margin: 24px 0; }
.detail-desc h3 { font-size: 1.2rem; margin-bottom: 10px; }
.detail-desc p { color: var(--muted); white-space: pre-line; }

.detail-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.detail-actions .btn { width: 100%; }

.detail-address {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.92rem;
}
.detail-address a:hover { color: var(--accent); }

/* ===== 15. RESPONSIVE (grotere schermen) ============================= */
@media (min-width: 640px) {
  .container { padding-inline: 28px; }
  .filters { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: end; }
  .filters .field.search { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .section { padding: 90px 0; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .cars-grid, .skeleton-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1.4fr; }
  .detail-grid { grid-template-columns: 1.15fr 0.85fr; }
  .filters { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .filters .field.search { grid-column: auto; }
}

@media (min-width: 1024px) {
  .values-grid { grid-template-columns: repeat(4, 1fr); }
  .cars-grid, .skeleton-grid { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 1.1fr 0.9fr; }
}

/* ===== 16. FORMULIER (proefrit) ====================================== */
.form { max-width: 760px; }
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.form-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field label { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.form-field label .req { color: var(--accent); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 13px 15px;
  font-family: inherit;
  font-size: 0.98rem;
  transition: border-color 0.25s, background 0.25s;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #6a6e74; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--border-strong); background: var(--surface-2); outline: none; }
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
/* Markeer ontbrekende verplichte velden na verzenden */
.form-field.invalid input,
.form-field.invalid select { border-color: var(--sold); }
.field-error { color: var(--sold); font-size: 0.8rem; display: none; }
.form-field.invalid .field-error { display: block; }

.form-actions { margin-top: 6px; }
.form-actions .btn { width: 100%; }
.form-note { color: var(--muted); font-size: 0.85rem; margin-top: 16px; text-align: center; }

/* Bevestiging na verzenden */
.form-success {
  display: none;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
}
.form-success.show { display: block; }
.form-success svg { width: 46px; height: 46px; color: var(--whatsapp); margin-bottom: 12px; }
.form-success h3 { font-size: 1.3rem; margin-bottom: 8px; }
.form-success p { color: var(--muted); }

@media (min-width: 640px) {
  .form-card { padding: 34px 32px; }
  .form-grid.two { grid-template-columns: 1fr 1fr; }
  .form-field.full { grid-column: 1 / -1; }
}

/* ===== 17. OVER ONS / OVER MIJ ====================================== */
.person { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.person-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 28px;
  text-align: center;
}
.avatar {
  width: 118px; height: 118px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1c1c20, #2a2a2f);
  border: 1px solid var(--border-strong);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--accent-strong);
  letter-spacing: 0.02em;
}
.person-card h3 { font-size: 1.4rem; margin-bottom: 2px; }
.person-card .role { color: var(--muted); font-size: 0.92rem; margin-bottom: 6px; }
.person-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.person-contact .btn { width: 100%; }

/* Verhaal met accent-streep */
.story p { color: var(--muted); margin-bottom: 16px; }
.story p strong { color: var(--text); font-weight: 600; }
.story .highlight {
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  margin: 22px 0;
  color: var(--text);
  font-size: 1.1rem;
  font-style: italic;
}

@media (min-width: 768px) {
  .person { grid-template-columns: 0.85fr 1.15fr; }
}

/* ===== 18. EXTRA: upload-veld, "of"-scheiding, twee-kaarten-blok ====== */

/* Foto-upload veld */
.form-field input[type="file"] {
  padding: 11px 14px;
  cursor: pointer;
  color: var(--muted);
}
.form-field input[type="file"]::file-selector-button {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: background 0.2s, border-color 0.2s;
}
.form-field input[type="file"]::file-selector-button:hover {
  background: var(--surface);
  border-color: var(--text);
}
.upload-hint { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }

/* "of"-scheiding tussen de verzendknop en de WhatsApp-knop */
.form-or {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 0.82rem;
  margin: 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.form-or::before, .form-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Twee kaarten naast elkaar (homepage "Andere wensen?") */
.duo-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.duo-grid .value-card { display: flex; flex-direction: column; }
.duo-grid .value-card .btn { margin-top: 18px; align-self: flex-start; }
@media (min-width: 700px) { .duo-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .duo-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== 19. REVIEWS / SOCIAL PROOF ==================================== */
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.stars { display: flex; gap: 3px; margin-bottom: 12px; }
.stars svg { width: 18px; height: 18px; color: #f2c14e; }
.stars svg.empty { color: var(--surface-2); }
.review-text { color: var(--text); font-size: 0.98rem; margin-bottom: 16px; flex: 1; }
.review-author { color: var(--muted); font-size: 0.88rem; font-weight: 500; }
.review-author strong { color: var(--text); font-weight: 600; }
.reviews-cta { text-align: center; margin-top: 34px; }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== 20. DEELKNOPPEN (auto delen) ================================== */
.share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.share-row .share-label { color: var(--muted); font-size: 0.88rem; margin-right: 2px; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.share-btn:hover { background: var(--surface-2); transform: translateY(-2px); }
.share-btn svg { width: 16px; height: 16px; }
.share-btn.copied { border-color: var(--whatsapp); color: var(--whatsapp); }

/* ===== 21. STAPPEN ("Zo werkt het") ================================= */
.steps { display: grid; grid-template-columns: 1fr; gap: 16px; }
.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  position: relative;
}
.step-card .step-num {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(205, 210, 218, 0.08);
  color: var(--accent-strong);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin-bottom: 14px;
}
.step-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.step-card p { color: var(--muted); font-size: 0.95rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* Beloften-lijst ("Wat wij beloven") */
.promise-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
.promise-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.promise-list svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.promise-list strong { color: var(--text); font-weight: 600; }
@media (min-width: 640px) { .promise-list { grid-template-columns: 1fr 1fr; gap: 16px 28px; } }

/* ===== 22. FAQ-ACCORDEON ============================================ */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 18px 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 20px 18px; color: var(--muted); }
.faq-item .faq-body a { color: var(--accent); }

/* ===== 23. JURIDISCHE TEKST (privacy) + footer-onderlinks =========== */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.3rem; margin: 30px 0 10px; }
.legal p, .legal li { color: var(--muted); margin-bottom: 10px; }
.legal ul { padding-left: 20px; list-style: disc; margin-bottom: 10px; }
.legal a { color: var(--accent); }
.footer-bottom a { color: var(--muted); transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }