/* Optimal Drive design preview — the additions shared by the three variants (logo, slider arrows, "Ofertele lunii",
   demo tags, preview bar) and the per-variant adjustments on top of the generated theme-*.css. */

/* ---------- logos for light / dark backgrounds (same files, never redrawn) */
.od-on-dark { display: none !important; }
.od-variant-dark .od-on-dark,
.od-variant-hybrid .od-dark .od-on-dark,
.od-ctx-dark .od-on-dark,
.od-variant-dark .od-on-light ~ .od-on-dark { display: inline-block !important; }
.od-variant-dark .od-on-light,
.od-variant-hybrid .od-dark .od-on-light,
.od-ctx-dark .od-on-light { display: none !important; }
/* The header capsule is dark in Dark and Hybrid, white in Light. */
.od-variant-dark .site-header .od-on-dark, .od-variant-hybrid .site-header .od-on-dark { display: inline-block !important; }
.od-variant-dark .site-header .od-on-light, .od-variant-hybrid .site-header .od-on-light { display: none !important; }

.od-logo { display: inline-flex; align-items: center; }
.site-header .od-logo-img { height: 24px !important; width: auto !important; max-width: none !important; display: block; }
.site-footer .od-logo-img { height: 30px !important; width: auto !important; max-width: none !important; display: block; }
@media (max-width: 760px) { .site-header .od-logo-img { height: 20px !important; } }

/* Brand marks: the approved CSS whitens them on dark surfaces with a filter; our light/dark files make it unnecessary. */
.site-nav-megamenu-logo img, .showcase-brand-tab.is-active img { filter: none !important; }
.site-nav-megamenu-logo img { height: 22px !important; max-width: 140px; }
.showcase-brand-tab img.showcase-tab-logo-wordmark { height: 18px; max-width: 110px; }
.showcase-brand-tab.is-active .od-on-light { display: none !important; }
.showcase-brand-tab.is-active .od-on-dark { display: inline-block !important; }
.od-tab-text { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 13px; }
.veh-hero-brand-badge img.od-badge-logo { width: auto; height: 22px; }

/* ---------- slider: brand wordmarks, arrows */
.hbs-title-logo.od-hbs-logo { width: auto; height: auto; border-radius: 0; background: none; border: 0; padding: 0; box-shadow: none; }
.hbs-title-logo.od-hbs-logo img.hbs-brand-logo-mark { filter: none; max-width: none; height: clamp(26px, 3.2vw, 40px); width: auto !important; }
.hbs-title-logo.od-hbs-logo-wide img.hbs-brand-logo-mark { height: clamp(22px, 2.8vw, 34px); }
.od-hbs-arrow {
    position: absolute; top: 50%; z-index: 5; width: 48px; height: 48px; margin-top: -24px;
    display: grid; place-items: center; border-radius: 999px; cursor: pointer;
    color: #fff; background: #0b0d10a6; border: 1px solid #ffffff2e;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.od-hbs-arrow:hover, .od-hbs-arrow:focus-visible { background: #ffd400; color: #11161b; border-color: #ffd400; }
.od-hbs-arrow:active { transform: scale(.94); }
.od-hbs-arrow svg { width: 20px; height: 20px; }
.od-hbs-arrow-prev { left: clamp(12px, 2.4vw, 32px); }
.od-hbs-arrow-next { right: clamp(12px, 2.4vw, 32px); }
.hbs-dot.is-active { background: #ffd400 !important; color: #11161b !important; }
.hbs-claims li::before { background: #ffd400 !important; color: #ffd400 !important; }
@media (max-width: 760px) {
    .od-hbs-arrow { width: 36px; height: 36px; margin-top: 0; top: auto; bottom: 14px; }
    .od-hbs-arrow svg { width: 16px; height: 16px; }
}

/* ---------- demo tags and notes */
.od-demo-tag {
    display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; vertical-align: middle;
    font: 700 9px/1.6 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
    color: #11161b; background: #ffd400;
}
.od-demo-note { margin: 18px 0 0; font-size: 12px; color: var(--ink-soft); }
.od-card-fallback-name {
    position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
    font: 700 22px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #11161b59;
}
.showcase-card-image { position: relative; }

/* ---------- "Ofertele lunii" */
.od-offers-section { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.od-offers-head { margin-bottom: 28px; }
.od-offers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.od-offers-grid .bd-card-media img { object-fit: cover; }
@media (max-width: 1100px) { .od-offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .od-offers-grid { grid-template-columns: 1fr; } }

/* ---------- preview bar (presentation only) */
.od-preview-bar {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9999;
    display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
    font: 600 12px/1 var(--font-sans); background: #0b0d10e6; border: 1px solid #ffffff24;
    box-shadow: 0 10px 30px #0000004d; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    white-space: nowrap; max-width: calc(100vw - 16px); overflow-x: auto;
}
.od-preview-bar a { color: #ffffffcc; text-decoration: none; padding: 8px 12px; border-radius: 999px; }
.od-preview-bar a:hover { color: #fff; background: #ffffff1a; }
.od-preview-bar a[aria-current="page"] { color: #11161b; background: #ffd400; }
.od-preview-home { color: #ffd400 !important; font-weight: 800; }
.od-preview-group { display: inline-flex; gap: 2px; padding-left: 6px; border-left: 1px solid #ffffff24; }
@media (max-width: 560px) { .od-preview-bar { font-size: 11px; } .od-preview-bar a { padding: 7px 9px; } }

/* =========================================================== LIGHT: white header capsule, white footer */
.od-variant-light .site-header-shell { background: #ffffffeb; border-color: #11161b14; box-shadow: 0 8px 28px #11161b14; }
.od-variant-light .site-header-scrolled .site-header-shell { background: #fffffff5; }
.od-variant-light .site-nav-desktop > a, .od-variant-light .site-nav-models-trigger { color: #11161b; }
.od-variant-light .site-nav-desktop > a:hover, .od-variant-light .site-nav-models-trigger:hover { color: #11161b; background: #11161b0d; }
.od-variant-light .mobile-menu-toggle, .od-variant-light .site-header-burger { color: #11161b; }
.od-variant-light .site-footer { background: #ffffff; color: #11161b; border-top: 1px solid #11161b14; }
.od-variant-light .site-footer a, .od-variant-light .site-footer p, .od-variant-light .site-footer span { color: #4a5460; }
.od-variant-light .site-footer a:hover { color: #11161b; }
.od-variant-light .site-footer-col-title { color: #11161b !important; }
.od-variant-light .site-footer-pill { color: #11161b !important; background: #ffd400 !important; }
.od-variant-light .site-footer .od-on-light { display: inline-block !important; }
.od-variant-light .site-footer .od-on-dark { display: none !important; }

/* =========================================================== DARK */
.od-variant-dark { background: #0d0f12; }
.od-variant-dark .showcase-brand-tab.is-active { background: #ffd400; border-color: #ffd400; color: #11161b; }
.od-variant-dark .showcase-brand-tab.is-active .od-on-dark { display: none !important; }
.od-variant-dark .showcase-brand-tab.is-active .od-on-light { display: inline-block !important; }
.od-variant-dark .od-card-fallback-name { color: #ffffff40; }

/* =========================================================== HYBRID: dark bands between white sections */
/* Full-bleed dark band behind the unchanged section width. */
.od-variant-hybrid .od-dark.od-band { background: #0d0f12; color: #eef0f3; box-shadow: 0 0 0 100vmax #0d0f12; clip-path: inset(0 -100vmax); padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(40px, 5vw, 72px) !important; }
.od-variant-hybrid .site-header-shell { background: #0d0f12eb !important; }
.od-variant-hybrid .od-dark.od-band-full { background: #0d0f12; color: #eef0f3; }
.od-variant-hybrid .od-dark h2, .od-variant-hybrid .od-dark h3 { color: #fff; }
.od-variant-hybrid .od-dark .od-demo-note { color: #a9b1bb; }

/* ---------- primary CTAs in the Optimal Drive yellow (hero, slider) */
.hbs-btn-primary { background: #ffd400 !important; color: #11161b !important; }
.hbs-btn-primary:hover { background: #ffe14d !important; }

/* Studio side views (wide, transparent): shown whole in the card frame. */
.showcase-card-image img.od-img-contain { object-fit: contain !important; padding: 8% 6%; }
.od-offers-section { padding-top: clamp(24px, 3vw, 40px) !important; }

/* Light: the footer's new brands, the closing block in the brand yellow */
.od-variant-light .site-footer-highlight { color: #11161b !important; }
.od-variant-light .closing-section { background: #ffd400 !important; color: #11161b; box-shadow: 0 30px 70px #11161b1f; }
.od-variant-light .closing-section h2, .od-variant-light .closing-section p, .od-variant-light .closing-section .section-kicker { color: #11161b !important; }
.od-variant-light .closing-section .button-primary { background: #11161b !important; color: #ffffff !important; }
.od-variant-light .closing-section::before, .od-variant-light .closing-section::after { display: none; }

/* Model page CTA band: anthracite (Dark, Hybrid) or the brand yellow (Light) instead of the template's red. */
.veh-cta { background: linear-gradient(140deg, #14171b 0%, #1b1f24 55%, #23272d 100%) !important; }
.veh-cta::before, .veh-cta::after { background: none !important; }
.veh-cta h2 { color: #ffffff !important; }
.veh-cta .section-kicker { color: #ffd400 !important; }
.od-variant-light .veh-cta { background: #ffd400 !important; }
.od-variant-light .veh-cta h2, .od-variant-light .veh-cta .section-kicker { color: #11161b !important; }
.od-variant-light .veh-cta .button-primary { background: #11161b !important; color: #fff !important; }
.od-variant-light .veh-cta .button-secondary { color: #11161b !important; border-color: #11161b40 !important; background: transparent !important; }
.od-variant-light .site-nav-desktop > a.site-nav-deals, .od-variant-light .site-nav-desktop > a.site-nav-deals .site-nav-deals-label { color: #ffffff !important; }
.od-variant-light .veh-cta .button.button-primary, .od-variant-light .veh-cta .button.button-primary.button-attention { background: #11161b !important; color: #ffffff !important; border-color: #11161b !important; }
.od-variant-light .veh-cta .button-attention-label { color: #ffffff !important; }
.od-variant-light .veh-cta .button-attention-glow { display: none; }
.od-variant-light .header-hamburger { color: #11161b !important; }
.mobile-menu-new, .site-nav-megamenu-new { background: #ffd400 !important; color: #11161b !important; }
.od-preview-bar { scrollbar-width: none; }
.od-preview-bar::-webkit-scrollbar { display: none; }
@media (max-width: 560px) { .od-preview-home { display: none; } .od-preview-group:first-of-type { border-left: 0; padding-left: 0; } }
/* Inside the index previews: no preview bar. */
.od-embed .od-preview-bar { display: none; }

/* Light: the "Models" mega menu panel in white (the header is white), dark brand logos. */
.od-variant-light .site-nav-megamenu { background: #ffffff !important; border-color: #11161b14 !important; box-shadow: 0 24px 60px #11161b24 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.od-variant-light .site-nav-megamenu-card { background: #f6f7f8 !important; border-color: #11161b0f !important; }
.od-variant-light .site-nav-megamenu-card:hover { background: #ffffff !important; border-color: #ffd400 !important; }
.od-variant-light .site-nav-megamenu-name { color: #11161b !important; }
.od-variant-light .site-nav-megamenu-kicker { color: #4a5460 !important; }
.od-variant-light .site-nav-megamenu-footer { color: #11161b !important; background: #f6f7f8 !important; border-color: #11161b14 !important; }
.mobile-menu-new, .site-nav-megamenu-new { box-shadow: 0 0 12px #ffd40066 !important; }
.mobile-menu-new::after, .site-nav-megamenu-new::after, .mobile-menu-new::before, .site-nav-megamenu-new::before { display: none !important; }