/* ═══════════════════════════════════════════
   AUTOGARAGE VENRAY — Gedeelde Stijlen
   Bewerk hier kleuren/fonts voor alle pagina's
═══════════════════════════════════════════ */

/* ── Kleurvariabelen — pas hier aan ── */
:root {
  --rood:      #CC1414;   /* hoofdkleur rood */
  --rood-h:    #E01818;   /* hover rood */
  --donker:    #0E0E0F;   /* achtergrond */
  --donker2:   #141416;
  --donker3:   #1A1A1C;   /* kaarten */
  --donker4:   #222226;
  --border:    rgba(255, 255, 255, 0.06);
  --border2:   rgba(255, 255, 255, 0.12);
  --zilver:    #E8E8E8;
  --gedempt:   rgba(232, 232, 232, 0.5);
  --gedempt2:  rgba(232, 232, 232, 0.25);
  --max-breedte: 1200px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Barlow', sans-serif;
  background: var(--donker);
  color: var(--zilver);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ── Gedeelde Layout ── */
.agv-container {
  max-width: var(--max-breedte);
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Topbar ── */
.agv-topbar {
  background: var(--rood);
  padding: 9px 0;
  font-size: 13px;
  font-weight: 500;
}
.agv-topbar .agv-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.agv-topbar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.agv-topbar-item svg { width: 13px; height: 13px; opacity: 0.85; }

/* ── Navigatie ── */
.agv-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(14, 14, 15, 0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.agv-nav .agv-container {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.agv-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.agv-logo .wit   { color: var(--zilver); }
.agv-logo .rood  { color: var(--rood); }
.agv-logo .sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gedempt);
  margin-left: 10px;
  border-left: 1px solid var(--border2);
  padding-left: 10px;
}
.agv-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  flex: 1;
}
.agv-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--gedempt);
  padding: 7px 14px;
  border-radius: 7px;
  transition: color 0.18s, background 0.18s;
}
.agv-nav-links a:hover,
.agv-nav-links a.actief { color: var(--zilver); background: var(--donker4); }
.agv-nav-acties {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ── Knoppen ── */
.agv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s, border-color 0.18s;
}
.agv-btn svg { width: 15px; height: 15px; }
.agv-btn-rood       { background: var(--rood);  color: #fff; }
.agv-btn-rood:hover { background: var(--rood-h); transform: translateY(-1px); }
.agv-btn-wit        { background: #fff; color: var(--rood); }
.agv-btn-wit:hover  { opacity: 0.9; transform: translateY(-1px); }
.agv-btn-omtrek {
  background: transparent;
  color: var(--zilver);
  border: 1px solid var(--border2);
}
.agv-btn-omtrek:hover { border-color: rgba(255,255,255,0.28); background: var(--donker3); }
.agv-btn-whatsapp {
  background: transparent;
  color: var(--zilver);
  border: 1px solid var(--border2);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
}
.agv-btn-whatsapp svg { width: 16px; height: 16px; color: #25d366; }
.agv-btn-whatsapp:hover { background: var(--donker4); }

/* ── Secties ── */
.agv-sectie { padding: 96px 0; }
.agv-sectie-donker  { background: var(--donker);  }
.agv-sectie-donker2 { background: var(--donker2); }

.agv-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.agv-label::before {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: var(--rood);
  border-radius: 2px;
  flex-shrink: 0;
}
.agv-label span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rood);
}

.agv-h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.97;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
.agv-h2 .rood { color: var(--rood); }

.agv-intro {
  font-size: 17px;
  font-weight: 300;
  color: rgba(232, 232, 232, 0.58);
  max-width: 560px;
  line-height: 1.75;
  margin-bottom: 52px;
}

/* ── Footer ── */
.agv-footer {
  background: var(--donker);
  border-top: 1px solid var(--border);
  padding: 60px 0 28px;
}
.agv-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.agv-footer-col h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gedempt2);
  margin-bottom: 18px;
}
.agv-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.agv-footer-col ul li a { font-size: 14px; color: rgba(232,232,232,0.55); transition: color 0.18s; }
.agv-footer-col ul li a:hover { color: var(--zilver); }
.agv-footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--gedempt2);
}
.agv-badge {
  padding: 4px 12px;
  border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.agv-badge-apk { background: var(--rood); color: #fff; }
.agv-badge-rdw { background: #003082;     color: #fff; }

/* ── Scroll Reveal ── */
.agv-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.agv-reveal.zichtbaar { opacity: 1; transform: none; }
.agv-d1 { transition-delay: 0.10s; }
.agv-d2 { transition-delay: 0.18s; }
.agv-d3 { transition-delay: 0.26s; }
.agv-d4 { transition-delay: 0.34s; }
.agv-d5 { transition-delay: 0.42s; }
.agv-d6 { transition-delay: 0.50s; }

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .agv-nav .agv-container { gap: 20px; }
  .agv-btn-whatsapp { display: none; }
}

/* ── Mobiel (≤ 768px) ── */
@media (max-width: 768px) {
  .agv-container { padding: 0 16px; }
  .agv-sectie { padding: 56px 0; }

  /* Topbar: toon enkel telefoonnummer + openingstijden */
  .agv-topbar .agv-container { flex-wrap: nowrap; gap: 0; justify-content: space-between; overflow: hidden; }
  .agv-topbar-item:nth-child(3),
  .agv-topbar-item:nth-child(4) { display: none; }

  /* Nav */
  .agv-nav .agv-container { gap: 0; height: 64px; }
  .agv-logo img { max-height: 42px !important; max-width: 150px !important; object-fit: contain; }
  .agv-nav-links { display: none; }
  .agv-nav-acties { gap: 8px; flex-shrink: 0; }
  .agv-btn-whatsapp { display: inline-flex !important; }  /* WhatsApp terug op mobiel */
  .agv-btn-rood     { display: none !important; }         /* bel-knop verbergen */
  #agv-menu-btn     { display: flex !important; }

  /* Footer */
  .agv-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .agv-footer-bottom { flex-direction: column; text-align: center; }

  /* Grids → 1 kolom (reviews, diensten-overzicht, etc.) */
  .agv-review-kaart-grid { grid-template-columns: 1fr !important; }
}

/* ── Klein mobiel (≤ 480px) ── */
@media (max-width: 480px) {
  .agv-h2 { font-size: 36px !important; }
  .agv-logo img { max-height: 36px !important; max-width: 120px !important; }
}

/* ══════════════════════════════════════════════════
   WORDPRESS THEME OVERRIDE BLOCK
   Hello Elementor zet a { color: #0073aa } op alle
   elementen — dit blok beschermt elk plugin-element
══════════════════════════════════════════════════ */

/* Geen onderstreping */
.agv-topbar a, .agv-nav a, .agv-logo,
.agv-btn, .agv-footer a, .agv-footer-col a {
  text-decoration: none !important;
}

/* ── Hero h1 ── */
.agv-hero h1, .agv-hero h1 span     { color: #E8E8E8 !important; }
.agv-hero h1 .rood                  { color: #CC1414 !important; }
.agv-hero h1 .sub {
  color: rgba(232, 232, 232, 0.55) !important;
  font-size: clamp(20px, 2.8vw, 34px) !important;
}

/* ── Topbar ── */
.agv-topbar,
.agv-topbar *,
.agv-topbar-item                    { color: #fff !important; }
.agv-topbar a, .agv-topbar a:visited,
.agv-topbar a:hover                 { color: #fff !important; }

/* ── Logo ── */
.agv-logo .wit                      { color: #E8E8E8 !important; }
.agv-logo .rood                     { color: #CC1414 !important; }
.agv-logo .sub                      { color: rgba(232,232,232,0.5) !important; }

/* ── Nav links ── */
.agv-nav-links a,
.agv-nav-links a:visited            { color: rgba(232,232,232,0.55) !important; }
.agv-nav-links a.actief,
.agv-nav-links a:hover              { color: #E8E8E8 !important; background: #222226 !important; }

/* ── Knoppen ── */
.agv-btn-rood, .agv-btn-rood:visited,
.agv-btn-rood:hover                 { color: #fff !important; }
.agv-btn-wit, .agv-btn-wit:visited,
.agv-btn-wit:hover                  { color: #CC1414 !important; }
.agv-btn-omtrek, .agv-btn-omtrek:visited,
.agv-btn-omtrek:hover               { color: #E8E8E8 !important; }
.agv-btn-whatsapp, .agv-btn-whatsapp:visited,
.agv-btn-whatsapp:hover             { color: #E8E8E8 !important; }

/* ── Pills ── */
.agv-pill, .agv-pill span,
.agv-pill *                         { color: #E8E8E8 !important; }

/* ── Secties algemeen ── */
.agv-label span                     { color: #CC1414 !important; }
.agv-h2                             { color: #E8E8E8 !important; }
.agv-h2 .rood                       { color: #CC1414 !important; }
.agv-intro                          { color: rgba(232,232,232,0.58) !important; }
.agv-intro > *, .agv-intro span,
.agv-intro a, .agv-intro a:visited  { color: inherit !important; text-decoration: none !important; }
.agv-sectie                         { color: #E8E8E8 !important; }
.agv-sectie h3                      { color: #E8E8E8 !important; }

/* ── .rood class overal in de plugin ── */
.agv-topbar .rood, .agv-nav .rood, .agv-hero .rood,
.agv-sectie .rood, .agv-footer .rood { color: #CC1414 !important; }

/* ── Hero paragraph ── */
.agv-hero p > *, .agv-hero p span,
.agv-hero p a, .agv-hero p a:visited { color: inherit !important; text-decoration: none !important; }

/* ── Openingstijden ── */
.agv-ot-dag                         { color: rgba(232,232,232,0.75) !important; }
.agv-ot-tijd                        { color: #E8E8E8 !important; }
.agv-ot-tijd.gesloten               { color: rgba(232,232,232,0.25) !important; }
.agv-ot-rij                         { color: #E8E8E8 !important; }
.agv-ot-rij span                    { color: inherit !important; }
.agv-ot-box-header                  { color: #fff !important; }

/* ── Stats ── */
.agv-stat-num                       { color: #CC1414 !important; }
.agv-stat-label                     { color: rgba(232,232,232,0.5) !important; }

/* ── Diensten grid ── */
.agv-dienst h3                      { color: #E8E8E8 !important; }
.agv-dienst.uitgelicht h3           { color: #CC1414 !important; }
.agv-dienst p                       { color: rgba(232,232,232,0.52) !important; }
.agv-uitgelicht-badge               { color: #fff !important; }

/* ── Reviews ── */
.agv-sterren                        { color: #F0A500 !important; }
.agv-review-kaart p                 { color: rgba(232,232,232,0.68) !important; }

/* ── Panel (openingstijden hero) ── */
.agv-panel-header                   { color: #fff !important; }
.agv-panel-body                     { color: #E8E8E8 !important; }
.agv-panel-body span                { color: inherit !important; }
.agv-panel-body strong              { color: #E8E8E8 !important; }

/* ── CTA band ── */
.agv-cta-band h2                    { color: #fff !important; }
.agv-cta-band p                     { color: rgba(255,255,255,0.78) !important; }

/* ── Contact pagina ── */
.agv-contact-ico                    { color: #CC1414 !important; }
.agv-contact-label                  { color: rgba(232,232,232,0.5) !important; }
.agv-contact-val                    { color: #E8E8E8 !important; }
.agv-contact-val a,
.agv-contact-val a:visited          { color: #E8E8E8 !important; }
.agv-contact-val a:hover            { color: #CC1414 !important; }

/* ── Footer ── */
.agv-footer-col h4                  { color: rgba(232,232,232,0.25) !important; }
.agv-footer-col ul li a,
.agv-footer-col ul li a:visited     { color: rgba(232,232,232,0.55) !important; }
.agv-footer-col ul li a:hover       { color: #E8E8E8 !important; }
.agv-footer-bottom,
.agv-footer-bottom span             { color: rgba(232,232,232,0.25) !important; }

/* ── Badges ── */
.agv-badge-apk                      { color: #fff !important; }
.agv-badge-rdw                      { color: #fff !important; }

/* ══════════════════════════════════════════════════
   MOTORS SINGLE LISTING — Dark Theme Override
   Zorgt dat de listing-detailpagina past bij het AGV-design
══════════════════════════════════════════════════ */

/* Body + html op listing-pagina's */
body.single-listings,
body.single-listings #page,
body.single-listings #content,
body.single-listings #primary,
body.single-listings main { background: #0E0E0F !important; }

.agv-listing-wrap {
  background: #0E0E0F;
  min-height: 60vh;
  padding-top: 0;
}

/* Alle Elementor secties en containers */
body.single-listings .agv-listing-wrap,
body.single-listings .agv-listing-wrap > *,
body.single-listings .agv-listing-wrap section,
body.single-listings .elementor-section,
body.single-listings .elementor-top-section,
body.single-listings .elementor-inner-section,
body.single-listings .elementor-element,
body.single-listings .elementor-container,
body.single-listings .elementor-column,
body.single-listings .elementor-widget-wrap,
body.single-listings .e-container,
body.single-listings .e-con,
body.single-listings .e-con-inner { background-color: #0E0E0F !important; background-image: none !important; }

/* Achtergronden */
.agv-listing-wrap .stm_single_car_wrapper,
.agv-listing-wrap .stm-single-car-side,
.agv-listing-wrap .stm_single_car_content,
.agv-listing-wrap .stm-listing-page { background: #0E0E0F !important; }

/* Kaarten / blokken */
.agv-listing-wrap .stm-car-data,
.agv-listing-wrap .stm-car-buttons,
.agv-listing-wrap .stm-car-price,
.agv-listing-wrap .car-price,
.agv-listing-wrap .stm_single_item,
.agv-listing-wrap [class*="stm-car-"] { background: var(--donker3) !important; border-color: var(--border) !important; }

/* Tekst */
.agv-listing-wrap,
.agv-listing-wrap *:not(a):not(.agv-btn) { color: var(--zilver) !important; }
.agv-listing-wrap h1,
.agv-listing-wrap h2,
.agv-listing-wrap h3,
.agv-listing-wrap .title,
.agv-listing-wrap .price-block  { color: #E8E8E8 !important; }

/* Prijs */
.agv-listing-wrap .price,
.agv-listing-wrap .stm-car-price .price,
.agv-listing-wrap .stm-normal-price { color: #CC1414 !important; }

/* Knoppen */
.agv-listing-wrap .btn-accent,
.agv-listing-wrap .stm-btn,
.agv-listing-wrap .button-primary,
.agv-listing-wrap input[type="submit"],
.agv-listing-wrap button[type="submit"] {
  background: #CC1414 !important;
  border-color: #CC1414 !important;
  color: #fff !important;
}
.agv-listing-wrap .btn-outline,
.agv-listing-wrap .button-default { background: transparent !important; border-color: rgba(255,255,255,0.15) !important; color: #E8E8E8 !important; }

/* Inputs */
.agv-listing-wrap input,
.agv-listing-wrap select,
.agv-listing-wrap textarea {
  background: var(--donker3) !important;
  border-color: var(--border2) !important;
  color: var(--zilver) !important;
}

/* Borders / dividers */
.agv-listing-wrap hr,
.agv-listing-wrap .divider,
.agv-listing-wrap [class*="border"] { border-color: var(--border) !important; }

/* Kenmerken tabel */
.agv-listing-wrap .stm-car-data ul li,
.agv-listing-wrap .stm-car-features li { border-color: var(--border) !important; }
.agv-listing-wrap .stm-car-data ul li span:first-child { color: rgba(232,232,232,0.5) !important; }

/* Tabs */
.agv-listing-wrap .nav-tabs > li > a { color: rgba(232,232,232,0.6) !important; border-color: var(--border) !important; background: var(--donker3) !important; }
.agv-listing-wrap .nav-tabs > li.active > a,
.agv-listing-wrap .nav-tabs > li > a:hover { color: #E8E8E8 !important; background: var(--donker4) !important; border-bottom-color: #CC1414 !important; }

/* Links */
.agv-listing-wrap a { color: #CC1414 !important; }
.agv-listing-wrap a:hover { color: #E01818 !important; }

/* ── Dealer contact buttons (Call Us / Message Us / Make Offer) ── */
body.single-listings .stm-dealer-info-unit,
body.single-listings .stm-dealer-info-unit.phone,
body.single-listings .stm-dealer-info-unit.email,
body.single-listings .stm-dealer-info-unit.make-offer,
body.single-listings .stm-contact-seller-form-wrap,
body.single-listings .stm-listing-make-offer {
  background: #1A1A1C !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: #E8E8E8 !important;
}
body.single-listings .stm-dealer-info-unit h5,
body.single-listings .stm-dealer-info-unit h4,
body.single-listings .stm-dealer-info-unit .inner h5 { color: #E8E8E8 !important; font-size: 13px !important; }
body.single-listings .stm-dealer-info-unit i,
body.single-listings .stm-dealer-info-unit svg { color: #CC1414 !important; }
body.single-listings .stm-dealer-info-unit span.phone,
body.single-listings .stm-dealer-info-unit span { color: rgba(232,232,232,0.6) !important; }
body.single-listings .stm-show-number { color: #CC1414 !important; cursor: pointer !important; }
body.single-listings .stm-show-number:hover { color: #E01818 !important; }

/* ── Message Us knop ── */
body.single-listings .dealer-contact-unit,
body.single-listings .dealer-contact-unit.mail { background: #1A1A1C !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 10px !important; }
body.single-listings .dealer-contact-unit a { color: #E8E8E8 !important; }
body.single-listings .dealer-contact-unit .email-btn { background: #1A1A1C !important; color: #E8E8E8 !important; }
body.single-listings .dealer-contact-unit .email-btn i { color: #CC1414 !important; }
body.single-listings .dealer-contact-unit .email-btn span { color: #E8E8E8 !important; }
body.single-listings .dealer-contact-unit:hover .email-btn,
body.single-listings .dealer-contact-unit:hover { background: #222226 !important; }

/* ── Make an Offer Price knop ── */
body.single-listings .stm-car_dealer-buttons { background: #1A1A1C !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 10px !important; }
body.single-listings .stm-car_dealer-buttons a { color: #E8E8E8 !important; background: transparent !important; }
body.single-listings .stm-car_dealer-buttons .label { color: #E8E8E8 !important; }
body.single-listings .stm-car_dealer-buttons i { color: #FAB637 !important; }
body.single-listings .stm-car_dealer-buttons:hover { background: #222226 !important; }

/* Similar listing sectie */
body.single-listings .stm-similar-cars,
body.single-listings .stm-similar-cars-title,
body.single-listings [class*="similar"] { background: #141416 !important; color: #E8E8E8 !important; }
body.single-listings .stm-similar-cars h3,
body.single-listings .stm-similar-cars h4 { color: #E8E8E8 !important; }

/* Alle witte achtergronden forceren naar donker */
body.single-listings [style*="background-color: #fff"],
body.single-listings [style*="background-color:#fff"],
body.single-listings [style*="background-color: white"],
body.single-listings [style*="background-color: rgb(255, 255, 255)"],
body.single-listings [style*="background: #fff"],
body.single-listings [style*="background: white"] { background-color: #1A1A1C !important; }