/* ============================================================
   Zero Max — vehicle-details.css
   Tokens: aliases the sitewide --gv-* tokens (header.css), accent
   color sourced from --zm-orange (matches home.css / all-cars.css /
   the brand pages, all on the Zero Max orange theme)
   Font: Poppins (sitewide) via --gv-font
   CSS prefix: vdt-
   H tags: H1 (vehicle name) → H2 (sections) → H3 (sim card titles)
   ============================================================ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
    --black:          var(--gv-black, #0A0A0A);
    --gray-900:       var(--gv-gray-900, #1A1A1A);
    --gray-800:       var(--gv-gray-800, #222222);
    --gray-700:       var(--gv-gray-700, #2C2C2C);
    --gray-600:       var(--gv-gray-600, #3A3A3A);
    --gray-500:       var(--gv-gray-500, #4A4A4A);
    --gray-400:       var(--gv-gray-400, #6A6A6A);
    --gray-300:       var(--gv-gray-300, #9A9A9A);
    --gray-200:       var(--gv-gray-200, #CCCCCC);
    --gray-100:       var(--gv-gray-100, #E8E8E8);
    --gray-50:        #161616;
    --white:          var(--gv-white, #FFFFFF);
    --border:         var(--gv-gray-700, #2C2C2C);
    --wa:             #25D366;
    --font-body:      var(--gv-font, 'Poppins', sans-serif);
    --font-display:   var(--gv-font-display, 'Poppins', sans-serif);
    --ease:           cubic-bezier(.4,0,.2,1);
    --ease-spring:    cubic-bezier(.34,1.56,.64,1);
    --r:              var(--gv-radius, 8px);
    --r-lg:           16px;
    --rsm:            6px;
}


/* ── RESET + BASE ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html, body { overflow-x: hidden; scroll-behavior: smooth }
body  { font-family: var(--font-body); background: var(--black); color: var(--white); -webkit-font-smoothing: antialiased }
img   { max-width: 100%; height: auto; display: block }
a     { text-decoration: none; color: inherit }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none }

.wrap { max-width: 1380px; margin: 0 auto; padding: 0 32px }


/* ── SHARED EYEBROW ───────────────────────────────────────── */
.vdt-eyebrow-sm {
    display: block;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 3px; color: var(--zm-orange, #FF6A2B); margin-bottom: 8px;
}


/* ── SHARED SECTION TITLE ─────────────────────────────────── */
.vdt-section-title {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 700; color: var(--white); line-height: 1.15;
    margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 2px solid var(--gray-800);
}
.vdt-section-title--lg {
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 10px; padding-bottom: 0; border-bottom: none;
}
.vdt-section-title em { font-style: italic; color: var(--zm-orange-light, #FF8A52) }


/* ════════════════════════════════════════════════════════════
   TOPBAR — breadcrumb
════════════════════════════════════════════════════════════ */
.vdt-topbar {
    background: var(--gray-900);
    border-bottom: 1px solid var(--gray-800);
    padding: 14px 0;
    animation: vdtFadeDown .4s var(--ease) both;
}
@keyframes vdtFadeDown {
    from { opacity: 0; transform: translateY(-8px) }
    to   { opacity: 1; transform: translateY(0) }
}
.vdt-crumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 11px; font-weight: 500; color: var(--gray-300);
}
.vdt-crumb a       { color: var(--gray-300); transition: color .2s }
.vdt-crumb a:hover { color: var(--zm-orange, #FF6A2B) }
.vdt-crumb span    { color: var(--gray-400) }
.vdt-crumb span[aria-current] { color: var(--white) }


/* ════════════════════════════════════════════════════════════
   PAGE LAYOUT
════════════════════════════════════════════════════════════ */
.vdt-page    { padding: 40px 0 80px }
.vdt-main-grid {
    display: grid;
    grid-template-columns: 1fr 560px;
    gap: 40px;
    align-items: flex-start;
}
.vdt-detail-col { min-width: 0 }
/* .vdt-book-col needs the same min-width:0 reset — both columns share
   the single 1fr track once .vdt-main-grid collapses to one column
   (≤960px, see RESPONSIVE below), and without it the payment table's
   min-width:460px (deep inside .vdt-book-col, past several plain block
   ancestors with no definite width of their own) bubbles all the way
   up and forces that shared track — and the whole page — ~136px wider
   than the viewport on phones, instead of scrolling inside its own
   .vdt-table-scroll wrapper like it's meant to. */
.vdt-book-col { min-width: 0 }


/* ════════════════════════════════════════════════════════════
   GALLERY
════════════════════════════════════════════════════════════ */
.vdt-gallery { margin-bottom: 28px }

/* Single Call/WhatsApp CTA location, shown right under the gallery at
   every screen size (the sticky booking card further down no longer
   repeats these — see .vdt-book-cta usage here vs. the tabs/table/
   inquiry-form still inside the card). */
.vdt-gallery-ctas {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
}

.vdt-gallery-main {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: var(--r-lg); overflow: hidden;
    background: var(--gray-800);
    border: 1px solid var(--gray-800);
    cursor: zoom-in;
    margin-bottom: 10px;
}
#vdtMainImg {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: opacity .24s var(--ease), transform .24s var(--ease);
    display: block;
}
#vdtMainImg.vdt-fading { opacity: 0; transform: scale(.98) }

.vdt-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.22) 0%, transparent 38%);
    pointer-events: none;
}

/* Deal badge on main image */
.vdt-gallery-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 13px; border-radius: 20px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
}
.vdt-gallery-badge--deal { background: var(--zm-orange, #FF6A2B); color: var(--white) }
.vdt-gallery-badge svg { width: 11px; height: 11px }

/* Image counter */
.vdt-img-counter {
    position: absolute; bottom: 14px; right: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 20px;
    background: rgba(0,0,0,.68); border: 1px solid rgba(255,255,255,.15);
    font-size: 11px; font-weight: 600; color: var(--white);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.vdt-img-counter svg { width: 13px; height: 13px }

/* Nav arrows — light circles on image */
.vdt-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; z-index: 3;
    background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    opacity: 0;
    transition: opacity .2s, background .2s, transform .2s var(--ease-spring);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vdt-gallery-nav svg { width: 18px; height: 18px }
.vdt-gallery-nav--prev { left: 14px }
.vdt-gallery-nav--next { right: 14px }
.vdt-gallery-main:hover .vdt-gallery-nav { opacity: 1 }
.vdt-gallery-nav:hover {
    background: rgba(0,0,0,.8); border-color: var(--zm-orange, #FF6A2B);
    transform: translateY(-50%) scale(1.06);
}

/* Zoom button */
.vdt-zoom-btn {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 38px; height: 38px; border-radius: var(--rsm);
    background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center; color: var(--white);
    opacity: 0; transition: opacity .2s, background .2s;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vdt-zoom-btn svg { width: 15px; height: 15px }
.vdt-gallery-main:hover .vdt-zoom-btn { opacity: 1 }
.vdt-zoom-btn:hover { background: rgba(0,0,0,.8); border-color: var(--zm-orange, #FF6A2B) }

/* Thumbnail strip */
.vdt-thumbs {
    display: flex; gap: 8px;
    overflow-x: auto; padding: 4px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}
.vdt-thumbs::-webkit-scrollbar { height: 3px }
.vdt-thumbs::-webkit-scrollbar-track { background: transparent }
.vdt-thumbs::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px }

.vdt-thumb {
    flex-shrink: 0; width: 84px; height: 58px;
    border-radius: var(--rsm); overflow: hidden;
    border: 2px solid transparent; background: var(--gray-800);
    padding: 0; cursor: pointer;
    transition: border-color .2s, transform .2s var(--ease-spring), box-shadow .2s;
}
.vdt-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none }
.vdt-thumb:hover:not(.active) { border-color: var(--gray-600); transform: translateY(-2px) }
.vdt-thumb.active {
    border-color: var(--zm-orange, #FF6A2B);
    box-shadow: 0 0 0 3px rgba(255,106,43,.18);
    transform: translateY(-2px);
}


/* ════════════════════════════════════════════════════════════
   VEHICLE IDENTITY
════════════════════════════════════════════════════════════ */
.vdt-identity { margin-bottom: 32px }

.vdt-identity-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-bottom: 14px;
    animation: vdtFadeUp .6s .1s var(--ease) both;
}
@keyframes vdtFadeUp {
    from { opacity: 0; transform: translateY(12px) }
    to   { opacity: 1; transform: translateY(0) }
}

.vdt-brand-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px 5px 8px; border-radius: 20px;
    background: var(--gray-900); border: 1px solid var(--gray-800);
    font-size: 11px; font-weight: 600; color: var(--gray-300);
    transition: border-color .2s;
}
.vdt-brand-pill:hover { border-color: var(--zm-orange, #FF6A2B) }
.vdt-brand-pill img { width: 22px; height: 22px; object-fit: contain }

.vdt-cat-tag {
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: 20px;
    background: var(--gray-800); border: 1px solid var(--gray-700);
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--gray-300);
    transition: background .2s, border-color .2s;
}
.vdt-cat-tag:hover { background: var(--gray-700); border-color: var(--zm-orange, #FF6A2B) }

.vdt-year-tag {
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: 20px;
    background: var(--gray-800); border: 1px solid var(--gray-700);
    font-size: 10px; font-weight: 600; color: var(--gray-300);
}

.vdt-vehicle-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 52px);
    font-weight: 700; color: var(--white); line-height: 1.1;
    animation: vdtFadeUp .7s .18s var(--ease) both;
}


/* ════════════════════════════════════════════════════════════
   ABOUT THIS VEHICLE
════════════════════════════════════════════════════════════ */
.vdt-about { margin-bottom: 32px }
.vdt-about-text {
    font-size: 14px; line-height: 1.7; color: var(--gray-200);
}
.vdt-about-text p { margin-bottom: 10px }
.vdt-about-text p:last-child { margin-bottom: 0 }
.vdt-about-text:not(.vdt-expanded) {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Shared Read More / Read Less toggle — used here and by the Car
   Details spec table (see BOOKING CARD / TABLES below). */
.vdt-readmore-btn {
    display: flex; align-items: center; gap: 6px;
    margin-top: 12px;
    font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--zm-orange, #FF6A2B);
}
.vdt-readmore-btn:hover { color: var(--zm-orange-light, #FF8A52) }
.vdt-readmore-chevron {
    width: 14px; height: 14px;
    transition: transform .2s var(--ease);
}
.vdt-readmore-btn[aria-expanded="true"] .vdt-readmore-chevron { transform: rotate(180deg) }


/* ════════════════════════════════════════════════════════════
   TRUST SECTION
════════════════════════════════════════════════════════════ */
.vdt-trust-section { margin-bottom: 36px }
.vdt-trust-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.vdt-trust-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: var(--rsm);
    background: var(--gray-900); border: 1px solid var(--gray-800);
    font-size: 12px; font-weight: 500; color: var(--gray-300);
    transition: border-color .2s;
}
.vdt-trust-item:hover { border-color: var(--zm-orange, #FF6A2B) }
.vdt-trust-item svg { width: 15px; height: 15px; color: var(--zm-orange, #FF6A2B); flex-shrink: 0 }


/* ════════════════════════════════════════════════════════════
   BOOKING CARD
════════════════════════════════════════════════════════════ */
.vdt-book-card {
    position: sticky; top: 88px;
    background: var(--gray-900);
    border: 1.5px solid var(--gray-800);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,.5);
    animation: vdtCardIn .6s .25s var(--ease) both;
}
@keyframes vdtCardIn {
    from { opacity: 0; transform: translateY(20px) }
    to   { opacity: 1; transform: translateY(0) }
}

/* Orange gradient header (matches .zm-jt-btn-call's CTA gradient) */
.vdt-book-header {
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    padding: 22px 24px;
}
.vdt-book-htitle {
    font-family: var(--font-display);
    font-size: 17px; font-weight: 700; color: var(--white);
    line-height: 1.35; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vdt-book-deal-badge {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 10px;
    padding: 4px 10px; border-radius: 20px;
    background: var(--black); color: var(--zm-orange, #FF6A2B);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    border: 1px solid var(--black);
}
.vdt-book-deal-badge svg { width: 9px; height: 9px }

/* Body inner padding */
.vdt-book-body { padding: 26px 28px }

.vdt-book-divider { height: 1px; background: var(--gray-800); margin-bottom: 20px }


/* ════════════════════════════════════════════════════════════
   TABS — Payment Plan / Car Details
════════════════════════════════════════════════════════════ */
.vdt-tabs {
    display: flex; gap: 6px;
    background: var(--black); border: 1px solid var(--gray-800);
    border-radius: 10px; padding: 5px; margin-bottom: 22px;
}
.vdt-tab-btn {
    flex: 1; padding: 13px 16px; border-radius: 7px;
    font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px;
    color: var(--gray-300); background: transparent;
    outline: none;
    transition: background .22s var(--ease), color .22s var(--ease), box-shadow .15s;
}
.vdt-tab-btn.active {
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    color: var(--white);
    box-shadow: 0 4px 16px rgba(255,106,43,.3);
}
.vdt-tab-btn:not(.active):hover { color: var(--white) }
.vdt-tab-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px var(--zm-orange-light, #FF8A52);
}

.vdt-tab-panel.hidden { display: none }


/* ════════════════════════════════════════════════════════════
   PAYMENT PLAN / CAR DETAILS TABLES
════════════════════════════════════════════════════════════ */
.vdt-table-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px;
    border: 1px solid var(--gray-800); border-radius: 12px;
}
.vdt-payment-table, .vdt-specs-table { width: 100%; border-collapse: collapse; min-width: 460px }

.vdt-payment-table thead, .vdt-specs-table thead { background: var(--gray-800) }

.vdt-payment-table th, .vdt-specs-table th {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
    color: var(--gray-200); text-align: left; padding: 13px 16px;
    white-space: nowrap;
}
.vdt-payment-table thead tr:last-child th,
.vdt-specs-table thead tr:last-child th { border-bottom: 2px solid var(--zm-orange, #FF6A2B) }

.vdt-payment-table td, .vdt-specs-table td {
    font-size: 14px; padding: 14px 16px; color: var(--white);
    border-bottom: 1px solid var(--gray-800); white-space: nowrap;
}
.vdt-payment-table tbody tr:last-child td,
.vdt-specs-table tbody tr:last-child td { border-bottom: none }
.vdt-payment-table tbody tr:nth-child(even) td,
.vdt-specs-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.025) }

.vdt-payment-table th:first-child, .vdt-payment-table td:first-child { min-width: 130px }
.vdt-payment-table th:not(:first-child), .vdt-payment-table td:not(:first-child) { min-width: 118px }
.vdt-specs-table th:first-child, .vdt-specs-table td:first-child { min-width: 160px }
.vdt-specs-table th:not(:first-child), .vdt-specs-table td:not(:first-child) { min-width: 104px }

.vdt-payment-values-row td { padding-top: 10px; padding-bottom: 20px }
.vdt-price-orange { color: var(--zm-orange, #FF6A2B); font-weight: 700 }
.vdt-payment-values-row .vdt-price-orange { font-size: 19px; font-weight: 800 }
.vdt-tenure-label { color: var(--gray-200); font-weight: 600 }

.vdt-spec-label-cell { color: var(--gray-100); font-weight: 600; white-space: normal }
.vdt-specs-table td:not(.vdt-spec-label-cell) { color: var(--gray-200); white-space: normal }

.vdt-spec-group-header td {
    background: rgba(255,106,43,.1) !important;
    color: var(--zm-orange, #FF6A2B);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
    padding: 8px 16px; border-bottom: 1px solid var(--gray-800);
}

.vdt-empty-note { font-size: 13px; color: var(--gray-300); padding: 10px 0 18px }

/* First-payment note under the Payment Plan table. vdtNoteIn (and the
   staggered pill entrance) replays every time the Payment tab is
   re-shown, since the panel toggles display:none, so no JS is needed. */
.vdt-plan-note {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 14px;
    margin: -6px 0 20px; padding: 14px 16px;
    /* Gradient border: dark fill on padding-box, drifting orange
       gradient on border-box (see vdtNoteBorder). */
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(135deg, #24160E 0%, #161616 60%) padding-box,
        linear-gradient(120deg, var(--zm-orange, #FF6A2B), rgba(255,106,43,.12) 35%, rgba(255,106,43,.12) 65%, var(--zm-orange-light, #FF8A52)) border-box;
    background-size: 100% 100%, 250% 250%;
    box-shadow: 0 8px 24px -12px rgba(255,106,43,.45);
    animation:
        vdtNoteIn .55s cubic-bezier(.22,1,.36,1) both,
        vdtNoteBorder 6s ease-in-out infinite alternate;
}
/* Soft light sweep across the box */
.vdt-plan-note::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255,138,82,.14), transparent);
    transform: translateX(-120%);
    animation: vdtNoteShine 4.5s ease-in-out 1.2s infinite;
    pointer-events: none;
}
.vdt-plan-note-star {
    position: relative; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    color: var(--white, #fff);
    box-shadow: 0 4px 14px rgba(255,106,43,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
/* Expanding glow ring */
.vdt-plan-note-star::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    animation: vdtStarRing 2.4s ease-out infinite;
}
.vdt-plan-note-star svg {
    width: 19px; height: 19px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
    animation: vdtStarPulse 2.4s ease-in-out infinite;
}
.vdt-plan-note-body { position: relative; min-width: 0 }
.vdt-plan-note-label {
    margin: 0 0 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--zm-orange-light, #FF8A52);
}
.vdt-plan-note-items {
    margin: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
/* Each item is a pill that never breaks mid-phrase; a narrow card
   wraps at the "+" instead. */
.vdt-plan-note-item {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
    color: var(--white, #fff);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,106,43,.35);
    border-radius: 999px;
    animation: vdtNoteIn .5s cubic-bezier(.22,1,.36,1) .15s both;
}
.vdt-plan-note-group { display: inline-flex; align-items: center; gap: 8px }
.vdt-plan-note-group .vdt-plan-note-item { animation-delay: .3s }
.vdt-plan-note-item svg { width: 14px; height: 14px; color: var(--zm-orange, #FF6A2B); flex-shrink: 0 }
.vdt-plan-note-plus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 14px; font-weight: 700; line-height: 1;
    color: var(--white, #fff);
    background: var(--zm-orange, #FF6A2B);
    animation: vdtNoteIn .5s cubic-bezier(.22,1,.36,1) .22s both;
}

@keyframes vdtNoteIn {
    from { opacity: 0; transform: translateY(8px) }
    to   { opacity: 1; transform: none }
}
@keyframes vdtNoteBorder {
    from { background-position: 0 0, 0% 50% }
    to   { background-position: 0 0, 100% 50% }
}
@keyframes vdtNoteShine {
    0%        { transform: translateX(-120%) }
    40%, 100% { transform: translateX(280%) }
}
@keyframes vdtStarPulse {
    0%, 100% { transform: scale(1) rotate(0) }
    25%      { transform: scale(1.15) rotate(-12deg) }
    50%      { transform: scale(1) rotate(0) }
    75%      { transform: scale(1.15) rotate(12deg) }
}
@keyframes vdtStarRing {
    0%        { box-shadow: 0 0 0 0 rgba(255,106,43,.55) }
    70%, 100% { box-shadow: 0 0 0 12px rgba(255,106,43,0) }
}

/* Car Details collapses by default (24 spec rows across 4 groups runs
   ~1200px tall otherwise) — scoped to this one panel's table wrapper so
   the Payment Plan table (shares .vdt-table-scroll) is never affected. */
#vdtTabPanelDetails .vdt-table-scroll {
    position: relative;
    max-height: 320px;
    overflow-y: hidden;
}
#vdtTabPanelDetails .vdt-table-scroll::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
    background: linear-gradient(to bottom, transparent, var(--gray-900));
    pointer-events: none;
}
#vdtTabPanelDetails .vdt-table-scroll.vdt-expanded {
    max-height: none;
    overflow-y: visible;
}
#vdtTabPanelDetails .vdt-table-scroll.vdt-expanded::after { display: none }


/* ════════════════════════════════════════════════════════════
   SEND AN INQUIRY
════════════════════════════════════════════════════════════ */
.vdt-inquiry-card {
    background: var(--black); border: 1px solid var(--gray-800);
    border-radius: var(--r); padding: 18px;
}
.vdt-inquiry-title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 14px }
.vdt-inq-field { margin-bottom: 12px }
.vdt-inq-field:last-of-type { margin-bottom: 16px }
.vdt-inq-label { display: block; font-size: 11px; font-weight: 600; color: var(--gray-300); margin-bottom: 6px }
.vdt-inq-input {
    width: 100%; padding: 11px 14px;
    background: var(--gray-900); border: 1.5px solid var(--zm-orange, #FF6A2B);
    border-radius: var(--rsm); color: var(--white);
    font-family: var(--font-body); font-size: 13px;
    transition: border-color .2s, box-shadow .2s;
}
.vdt-inq-input::placeholder { color: var(--gray-400) }
.vdt-inq-field.is-focused .vdt-inq-input,
.vdt-inq-input:focus { border-color: var(--zm-orange-light, #FF8A52); box-shadow: 0 0 0 3px rgba(255,106,43,.18) }
.vdt-inq-input--error { border-color: #dc2626 }
select.vdt-inq-input { appearance: none; -webkit-appearance: none }
.vdt-inq-submit {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 13px; border: none; border-radius: var(--rsm); margin-top: 2px;
    color: var(--white); font-family: var(--font-body); font-weight: 700;
    font-size: 13px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer;
    transition: opacity .2s, transform .2s var(--ease-spring);
}
.vdt-inq-submit svg { width: 15px; height: 15px; flex-shrink: 0 }
.vdt-inq-submit:hover { opacity: .88; transform: translateY(-1px) }
.vdt-inq-submit:disabled { opacity: .6; cursor: default; transform: none }
.vdt-inq-submit--email { background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B)) }

/* CTA buttons — shared by .vdt-gallery-ctas (single location, all widths) */
.vdt-book-cta {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 20px; border-radius: 8px;
    font-family: var(--font-body); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .7px;
    transition: opacity .2s, transform .2s var(--ease-spring), box-shadow .2s;
}
.vdt-book-cta svg { width: 16px; height: 16px; flex-shrink: 0 }
.vdt-book-cta--primary { background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B)); color: var(--white) }
.vdt-book-cta--primary:hover { opacity: .85; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,106,43,.35) }
.vdt-book-cta--wa { background: #25D366; color: var(--white) }
.vdt-book-cta--wa:hover { opacity: .9; transform: translateY(-2px) }
.vdt-book-cta--ghost { background: transparent; border: 1.5px solid var(--zm-orange, #FF6A2B); color: var(--zm-orange, #FF6A2B) }
.vdt-book-cta--ghost:hover {
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    color: var(--white); border-color: transparent; transform: translateY(-2px);
}


/* ════════════════════════════════════════════════════════════
   SIMILAR VEHICLES
════════════════════════════════════════════════════════════ */
.vdt-similar {
    border-top: 1px solid var(--gray-800);
    padding: 64px 0 80px;
    background: var(--black);
}
.vdt-similar-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 40px; flex-wrap: wrap;
}
.vdt-see-all {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--zm-orange, #FF6A2B);
    padding: 8px 20px; border: 1.5px solid var(--zm-orange, #FF6A2B);
    border-radius: var(--rsm);
    transition: background .2s, color .2s, border-color .2s, gap .2s, transform .2s var(--ease-spring);
    flex-shrink: 0;
}
.vdt-see-all:hover {
    background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B));
    color: var(--white); border-color: transparent; gap: 11px; transform: translateY(-1px);
}
.vdt-see-all svg   { width: 13px; height: 13px }

/* Grid */
.vdt-sim-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

/* ── Card — same component as .zm-ac-card (all-cars.php) / the
   homepage fleet card, ported with the vdt- prefix ── */
.vdt-sim-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--zm-orange, #FF6A2B);
    border-radius: 12px;
    overflow: hidden;
    background: var(--gray-900);
}

.vdt-sim-img-wrap {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--white);
}
.vdt-sim-img-wrap img { width: 100%; height: 100%; object-fit: contain }

.vdt-sim-namebar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 12px 14px;
    background: var(--gray-800);
}
.vdt-sim-title-link { text-decoration: none; flex: 1; min-width: 0 }
h3.vdt-sim-title {
    font-family: var(--font-body); font-size: 14.5px; font-weight: 700; color: var(--white);
    text-align: left; line-height: 1.4; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vdt-sim-brand-badge { flex-shrink: 0; display: flex; align-items: center }
.vdt-sim-brand-logo { height: 32px; width: auto; max-width: 90px; object-fit: contain }

/* Action buttons */
.vdt-sim-actions { display: flex; gap: 8px; padding: 12px 14px 14px; margin-top: auto }
.vdt-sim-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 8px; border-radius: 8px;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: opacity .25s ease, transform .25s ease;
}
.vdt-sim-btn:hover { opacity: .88; transform: translateY(-1px) }
.vdt-sim-btn-call { background: linear-gradient(160deg, var(--zm-orange-light, #FF8A52), var(--zm-orange, #FF6A2B)); color: var(--white) }
.vdt-sim-btn-wa   { background: #25D366; color: var(--white) }
.vdt-sim-btn svg  { width: 14px; height: 14px; flex-shrink: 0 }


/* ════════════════════════════════════════════════════════════
   LIGHTBOX
════════════════════════════════════════════════════════════ */
.vdt-lightbox {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.95);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vdt-lightbox.vdt-lb-open { opacity: 1; pointer-events: all }

.vdt-lb-content {
    position: relative; max-width: 92vw; max-height: 88vh;
    display: flex; align-items: center; justify-content: center;
}
#vdtLbImg {
    max-width: 92vw; max-height: 86vh;
    object-fit: contain; border-radius: var(--rsm);
    box-shadow: 0 24px 80px rgba(0,0,0,.8);
    transition: opacity .22s var(--ease);
}
#vdtLbImg.vdt-fading { opacity: 0 }

.vdt-lb-close {
    position: fixed; top: 20px; right: 20px; z-index: 9001;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(30,30,30,.90); border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center; color: var(--white);
    transition: background .2s, transform .2s var(--ease-spring);
}
.vdt-lb-close:hover { background: rgba(60,60,60,.95); transform: scale(1.08) }
.vdt-lb-close svg { width: 20px; height: 20px }

.vdt-lb-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%; z-index: 9001;
    background: rgba(30,30,30,.90); border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center; color: var(--white);
    transition: background .2s, transform .2s var(--ease-spring);
}
.vdt-lb-nav:hover { background: rgba(60,60,60,.95); transform: translateY(-50%) scale(1.06) }
.vdt-lb-nav svg { width: 22px; height: 22px }
.vdt-lb-prev { left: 20px }
.vdt-lb-next { right: 20px }

.vdt-lb-counter {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7);
    background: rgba(0,0,0,.6); padding: 6px 16px; border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .vdt-main-grid { grid-template-columns: 1fr 460px; gap: 32px }
    .vdt-sim-grid  { grid-template-columns: repeat(3, 1fr) }
}

@media (max-width: 960px) {
    .wrap { padding: 0 20px }
    /* .vdt-page and .wrap are two classes on the same element, both
       setting the shorthand `padding` — whichever wins the cascade at
       a given width replaces all 4 sides, so .wrap's horizontal-only
       overrides (here and at the narrower breakpoints below) were
       silently zeroing out .vdt-page's vertical padding on every
       mobile width. Fixed with a higher-specificity combined selector
       and longhand top/bottom only, so it can't be clobbered by (or
       clobber) .wrap's own padding and wins at every width ≤960px
       regardless of source order. Values match .vdt-page's own
       pre-existing (previously dead) ≤768px intent. */
    .vdt-page.wrap { padding-top: 24px; padding-bottom: 60px }
    .vdt-main-grid { grid-template-columns: 1fr; gap: 28px }
    .vdt-book-card { position: static; top: auto }
    .vdt-sim-grid { grid-template-columns: repeat(2, 1fr) }
    .vdt-trust-grid { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 768px) {
    .vdt-page { padding: 24px 0 60px }
    .vdt-gallery-nav { display: none }
    .vdt-thumb { width: 70px; height: 48px }
    /* Booking card (price/tabs/inquiry form) stays first — the ≤960px
       block above already puts it there for tablets; this used to reset
       it back to last on actual phones, burying pricing ~2800px down the
       page below the whole gallery/description/trust-grid. */
    .vdt-inquiry-card { padding: 16px }

    /* Edge-fade "more content this way" hint for horizontally-scrolling
       strips (payment/specs tables, photo thumbnails) — only these two
       need it on touch screens, where the scrollbar itself is invisible
       so there's otherwise no cue more content is off-screen.
       .vdt-has-hscroll is added by JS only when content actually
       overflows, so a table/strip that already fits doesn't fade into
       nothing at its own edge. */
    .vdt-table-scroll.vdt-has-hscroll,
    .vdt-thumbs.vdt-has-hscroll {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }

}

@media (max-width: 640px) {
    .vdt-sim-grid { grid-template-columns: 1fr }
    .vdt-trust-grid { grid-template-columns: 1fr }
    .vdt-gallery-ctas .vdt-book-cta {
        flex: 1;
        padding: 11px 8px;
        gap: 6px;
        font-size: 11.5px;
        letter-spacing: .3px;
        white-space: nowrap;
    }
    .vdt-gallery-ctas .vdt-book-cta svg { width: 14px; height: 14px }
    .vdt-lb-nav { width: 42px; height: 42px }
    .vdt-lb-prev { left: 8px }
    .vdt-lb-next { right: 8px }
    .vdt-lb-close { top: 12px; right: 12px }
    .vdt-similar-header { flex-direction: column; align-items: flex-start }
    .vdt-see-all { align-self: flex-start }
    .vdt-payment-table th, .vdt-specs-table th,
    .vdt-payment-table td, .vdt-specs-table td { padding: 10px 10px; font-size: 12.5px }
    .vdt-payment-values-row .vdt-price-orange { font-size: 16px }
    .vdt-book-body { padding: 20px 18px }
    #vdtTabPanelDetails .vdt-table-scroll { max-height: 260px }
    .vdt-plan-note { padding: 12px 13px; gap: 12px }
    .vdt-plan-note-star { width: 34px; height: 34px }
    .vdt-plan-note-star svg { width: 17px; height: 17px }
}

/* Phones: the side-by-side pills can't fit, and wrapping them left the
   2nd pill indented behind the "+". Switch to a stacked "equation":
   star + label as a header row, then both pills full-width with the
   "+" centred between them. .vdt-plan-note-body/-group use
   display:contents so their children join the grid/flex directly. */
@media (max-width: 480px) {
    .vdt-plan-note {
        display: grid; grid-template-columns: auto 1fr;
        align-items: center; column-gap: 10px; row-gap: 12px;
    }
    .vdt-plan-note-body, .vdt-plan-note-group { display: contents }
    .vdt-plan-note-label { margin: 0 }
    .vdt-plan-note-items {
        grid-column: 1 / -1;
        flex-direction: column; align-items: stretch; gap: 0;
    }
    .vdt-plan-note-item { justify-content: flex-start; white-space: normal }
    /* "+" overlaps the gap between the two pills */
    .vdt-plan-note-plus {
        align-self: center; position: relative; z-index: 1;
        margin: -5px 0; box-shadow: 0 0 0 3px #1B1714;
    }
}

@media (max-width: 420px) {
    .wrap { padding: 0 14px }
    .vdt-vehicle-title { font-size: clamp(24px, 8vw, 36px) }
    .vdt-book-body  { padding: 18px 16px }
    .vdt-thumb      { width: 58px; height: 40px }
    .vdt-sim-actions { padding: 10px 12px 12px }
    .vdt-tabs { padding: 3px }
    .vdt-tab-btn { font-size: 11px; padding: 9px 8px }
    .vdt-plan-note-star { width: 30px; height: 30px }
    .vdt-plan-note-star svg { width: 15px; height: 15px }
    .vdt-plan-note-label { font-size: 10.5px; letter-spacing: 1.1px }
    .vdt-plan-note-item { font-size: 12px; padding: 7px 12px; gap: 7px }
    .vdt-plan-note-item svg { width: 13px; height: 13px }
    .vdt-plan-note-plus { width: 18px; height: 18px; font-size: 13px }
}

@media (max-width: 360px) {
    .wrap { padding: 0 12px }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    #vdtMainImg     { transition: opacity .1s }
    .vdt-thumb      { transition: border-color .15s }
    .vdt-lightbox   { transition: opacity .15s }
    .vdt-tab-btn    { transition: none }
    .vdt-plan-note, .vdt-plan-note::before, .vdt-plan-note-item, .vdt-plan-note-plus,
    .vdt-plan-note-star::after, .vdt-plan-note-star svg { animation: none }
    .vdt-plan-note::before { display: none }
}