/* ============================================================
   GLOSSMITH 2.1 — Configurator layer
   Visual target: /references premium SUV configurator renders.
   Presentation only: no markup, logic, pricing or feature changes.
   Loaded last, after glossmith-calm.css.
   ============================================================ */

/* ---------- 1. Studio stage ---------- */
#coverageBlock {
  padding: 0;
  border: 0;
  background: none;
}
#coverageBlock > .qb-head,
#coverageBlock > .qb-note-sub {
  padding-inline: 0;
}
#cov3dStage.cov3d-stage {
  position: relative;
  height: clamp(300px, 46vw, 520px);
  border-radius: 20px;
  border: 1px solid var(--line2);
  overflow: hidden;
  background:
    radial-gradient(120% 85% at 50% 8%, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(65% 42% at 50% 88%, rgba(198,255,0,0.07) 0%, rgba(198,255,0,0) 70%),
    linear-gradient(180deg, #101216 0%, #0a0b0e 52%, #06070a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 22px 48px -28px rgba(0,0,0,0.9);
}
/* studio floor line under the vehicle */
#cov3dStage.cov3d-stage::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 16%;
  height: 1px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
#cov3dStage.cov3d-stage canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
#cov3dStage .gm-model-badge {
  z-index: 3;
  backdrop-filter: blur(6px);
}
#cov3dStage .cov-hint {
  z-index: 3;
}
/* the stage is the product stage — it stays dark in light theme */
[data-theme="light"] #cov3dStage.cov3d-stage {
  border-color: rgba(0,0,0,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 22px 48px -30px rgba(0,0,0,0.45);
}

/* rotate control reads as configurator hardware */
#cov3dSlider.cov-slider {
  margin-top: 0.9rem;
}
.cov-slabels {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cov-legend {
  margin-top: 0.7rem;
}

/* ---------- 2. Treatment chips (PPF / tint) ---------- */
#tintBtns { gap: 0.45rem !important; }
#tintBtns .tint-b {
  min-width: 68px;
  padding: 0.55rem 0.85rem !important;
  border-radius: 10px !important;
  font-family: var(--mono) !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-align: center;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
#tintBtns .tint-b:hover {
  border-color: rgba(198,255,0,0.5) !important;
  color: var(--gold-lt) !important;
}
#tintBtns .tint-b.on,
#tintBtns .tint-b[aria-pressed="true"] {
  border-color: var(--gold) !important;
  background: rgba(198,255,0,0.12) !important;
  color: var(--gold-lt) !important;
}
#tintRead {
  font-family: var(--mono);
  font-size: 0.68rem !important;
  letter-spacing: 0.05em;
}

/* ---------- 3. Estimate panel: quote bar behaviour ---------- */
@media (min-width: 1000px) {
  .quote-layout > div:last-child { align-self: start; }
  .qb-estimate {
    position: sticky;
    top: 96px;
  }
}
.qb-estimate .qb-book {
  margin-top: 0.9rem;
}

/* ---------- 4. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  #tintBtns .tint-b { transition: none; }
}

/* ============================================================
   5. LIGHT THEME READABILITY
   Electric lime is unreadable as text on white, so in light mode
   lime becomes a deep olive-lime for TEXT and thin strokes, and
   stays electric only where it is a FILL or sits on the dark
   vehicle stage. Contrast targets: 4.5:1 body, 3:1 large text.
   ============================================================ */
:root[data-theme="light"] {
  --gold: #566F00;      /* lime as readable text */
  --gold-lt: #4C6300;   /* was #B8FF00 — unreadable on white */
  --faint: #61675B;
  --grey: #C7CBC0;
}

/* lime text / accents on light surfaces */
:root[data-theme="light"] .spec-pill,
:root[data-theme="light"] .qb-gate strong,
:root[data-theme="light"] .qb-tap-guide,
:root[data-theme="light"] .cov-caption,
:root[data-theme="light"] #tintRead,
:root[data-theme="light"] .qb-div-title,
:root[data-theme="light"] .qb-est-title,
:root[data-theme="light"] .qb-sub-label,
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .hl,
:root[data-theme="light"] .why-num,
:root[data-theme="light"] .svc-cat,
:root[data-theme="light"] .qb-head .n,
:root[data-theme="light"] .promo-msg,
:root[data-theme="light"] .qb-promo-msg { color: #4C6300 !important; }

:root[data-theme="light"] .spec-pill {
  background: rgba(86,111,0,0.10) !important;
  border-color: rgba(86,111,0,0.34) !important;
}
:root[data-theme="light"] .qb-tapbuild {
  background: #3F5400 !important;
  color: #FFFFFF !important;
}
:root[data-theme="light"] .qb-chip,
:root[data-theme="light"] .qb-badge {
  background: rgba(86,111,0,0.14) !important;
  color: #3F5400 !important;
  border-color: rgba(86,111,0,0.32) !important;
}

/* selected chips/tabs: dark ink on the lime wash */
:root[data-theme="light"] .svc-tab.on,
:root[data-theme="light"] .prod-tab.on,
:root[data-theme="light"] .qb-modetab.on,
:root[data-theme="light"] .qb-opt.on .qb-name,
:root[data-theme="light"] .qb-opt.on .qb-price,
:root[data-theme="light"] .qb-film.on { color: #161A10 !important; }
:root[data-theme="light"] .svc-tab,
:root[data-theme="light"] .prod-tab,
:root[data-theme="light"] .qb-modetab,
:root[data-theme="light"] .svc-more,
:root[data-theme="light"] .qb-more,
:root[data-theme="light"] .svc-swipe-hint { color: #4A4F45 !important; }

/* tint chips: readable selected + unselected states in light mode */
:root[data-theme="light"] #tintBtns .tint-b {
  background: #FAFBF8 !important;
  border-color: rgba(20,24,18,0.20) !important;
  color: #3E433A !important;
}
:root[data-theme="light"] #tintBtns .tint-b:hover {
  border-color: #566F00 !important;
  color: #3F5400 !important;
}
:root[data-theme="light"] #tintBtns .tint-b[style*="gold"] {
  background: rgba(86,111,0,0.14) !important;
  border-color: #566F00 !important;
  color: #334500 !important;
}

/* the vehicle stage stays a dark product stage — keep electric lime there */
:root[data-theme="light"] #cov3dStage .gm-model-badge,
:root[data-theme="light"] #cov3dStage .cov-hint { color: rgba(245,246,241,0.82) !important; }
:root[data-theme="light"] #cov3dStage .gm-model-badge span { background: #B8FF00 !important; }
/* controls BELOW the stage sit on white — keep them dark ink */
:root[data-theme="light"] .cov-slabels,
:root[data-theme="light"] .cov-slabels span,
:root[data-theme="light"] .cov-legend,
:root[data-theme="light"] .cov-legend span,
:root[data-theme="light"] .cov-summary { color: #4F544A !important; }
:root[data-theme="light"] .cov-legend i.lp,
:root[data-theme="light"] .cov-legend i.lt { background: #566F00 !important; }

/* the cinematic Experience promo keeps white copy, so it keeps a dark ground in light mode */
:root[data-theme="light"] #experience-promo {
  background: linear-gradient(160deg, #14171A 0%, #0B0D10 62%, #07080A 100%) !important;
}

/* ---- DARK-GROUND EXCEPTION ----
   #hero, #experience-promo, .cta-band and .feature-media keep photographic /
   gradient dark grounds in light mode, so the olive-lime ink above would read as
   dark-on-dark there. Inside these containers, lime stays electric and copy
   stays light — same exception already made for the vehicle stage.
   Scoping the TOKEN (not just colour rules) is what reaches text that paints via
   a clipped gradient stop or sits over a child <img>. */
:root[data-theme="light"] #hero,
:root[data-theme="light"] #experience-promo,
:root[data-theme="light"] #gallery .gal,
:root[data-theme="light"] .feature-media,
:root[data-theme="light"] .ba-slider,
:root[data-theme="light"] #cov3dStage {
  --gold: #B8FF00;
  --gold-lt: #B8FF00;
}
:root[data-theme="light"] #gallery .gal .tag { color: #B8FF00 !important; }

:root[data-theme="light"] #hero .eyebrow,
:root[data-theme="light"] #hero .hl,
:root[data-theme="light"] #hero em,
:root[data-theme="light"] #hero .grad-text,
:root[data-theme="light"] #hero .hg-num,
:root[data-theme="light"] #experience-promo .eyebrow,
:root[data-theme="light"] #experience-promo .hl,
:root[data-theme="light"] #experience-promo em,
:root[data-theme="light"] .feature-media .cap,
:root[data-theme="light"] .feature-media .hl { color: #B8FF00 !important; }

:root[data-theme="light"] #hero h1,
:root[data-theme="light"] #hero .hero-sub,
:root[data-theme="light"] #hero .hg-label,
:root[data-theme="light"] #experience-promo h2,
:root[data-theme="light"] #experience-promo p { color: #F5F6F1 !important; }

/* .cta-band has no dark ground in light mode (transparent + a faint lime radial),
   so it becomes its own dull off-white panel with dark ink. */
:root[data-theme="light"] .cta-band {
  background: #E7E9E1 !important;
  border-top: 1px solid rgba(20,24,18,0.10);
  border-bottom: 1px solid rgba(20,24,18,0.10);
}
:root[data-theme="light"] .cta-band .cta-title,
:root[data-theme="light"] .cta-band h2 { color: #14170F !important; }
:root[data-theme="light"] .cta-band .cta-sub,
:root[data-theme="light"] .cta-band p { color: #4B5046 !important; }
:root[data-theme="light"] .cta-band .eyebrow,
:root[data-theme="light"] .cta-band .hl,
:root[data-theme="light"] .cta-band em { color: #4C6300 !important; }
:root[data-theme="light"] .cta-band .btn-ghost {
  color: #22271D !important;
  background: #FFFFFF !important;
  border-color: rgba(20,24,18,0.22) !important;
}
:root[data-theme="light"] .cta-band .btn-ghost:hover {
  color: #11140D !important;
  background: #D9F58A !important;
  border-color: #789D00 !important;
}

:root[data-theme="light"] #hero .btn-ghost,
:root[data-theme="light"] #experience-promo .btn-ghost {
  color: #F0FAD8 !important;
  border-color: rgba(184,255,0,0.55) !important;
  background: rgba(10,12,8,0.32) !important;
}
:root[data-theme="light"] #hero .btn-ghost:hover,
:root[data-theme="light"] #experience-promo .btn-ghost:hover {
  color: #11140D !important;
  background: #B8FF00 !important;
  border-color: #B8FF00 !important;
}

/* product philosophy headings */
:root[data-theme="light"] .prod-head h3,
:root[data-theme="light"] .prod-list li b,
:root[data-theme="light"] .feature-link,
:root[data-theme="light"] .svc-from,
:root[data-theme="light"] .faq-icon { color: #4C6300 !important; }

/* body copy floors */
:root[data-theme="light"] .qb-disc,
:root[data-theme="light"] .qb-empty,
:root[data-theme="light"] .form-label,
:root[data-theme="light"] .qb-dur,
:root[data-theme="light"] .gal-note,
:root[data-theme="light"] .qb-note-sub { color: #4F544A !important; }
:root[data-theme="light"] .qb-desc { color: #3F443B !important; }

/* links must never fall back to browser blue */
:root[data-theme="light"] a { color: #3F5400; }
:root[data-theme="light"] a:hover { color: #2C3A00; }

/* ---- hero ground ----
   .hero-photo is tagged .gm-hero-item (base state opacity:0) but its reveal
   animation is cancelled (computed animation:none), so the photograph never
   paints in EITHER theme and the hero falls back to a light gradient. Release
   the photo from the reveal trap, and give #hero an explicit dark scrim in light
   mode so its light copy stays readable even if the image fails to load. */
#hero .hero-photo.gm-hero-item,
#hero .hero-photo {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  clip-path: none !important;
}
/* Content must never depend on an entrance animation completing: the hero copy
   and split headline words sat at their opacity:0 base state whenever the
   keyframes did not run. Visible is the base state; motion is the enhancement. */
.gm-hero-item,
.gm-word {
  opacity: 1;
  filter: none;
  transform: none;
  clip-path: none;
}
/* home.css runs the headline/sub on its own `heroIn` animation, which also fails
   to start — force their resting state visible too. */
#hero h1,
#hero .hero-sub,
#hero .hero-actions,
#hero .hero-glasscard {
  opacity: 1 !important;
  filter: none !important;
}
:root[data-theme="light"] #hero {
  background: linear-gradient(180deg, #101318 0%, #0A0C10 60%, #07080B 100%) !important;
}
:root[data-theme="light"] #hero .hero-photo { opacity: 0.9 !important; }

/* ---- service tiles + stat strip ----
   Card titles carry per-service accent colours picked for dark photo grounds
   (slate, brown), and .stat-num paints via a transparent text-fill + clipped
   gradient. On white cards both read as washed-out or missing type, so in light
   mode they become solid dark ink. */
:root[data-theme="light"] .svc .svc-name,
:root[data-theme="light"] .svc .svc-cat,
:root[data-theme="light"] .svc .svc-offer,
:root[data-theme="light"] .svc .svc-offer li,
:root[data-theme="light"] .svc-foot,
:root[data-theme="light"] .svc-price { color: #16190F !important; }
:root[data-theme="light"] .svc .svc-name { font-weight: 600 !important; }
:root[data-theme="light"] .svc .svc-cat { color: #5A6051 !important; }
:root[data-theme="light"] .svc .svc-desc { color: #3F443B !important; }

:root[data-theme="light"] .stat-num {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #16190F !important;
  color: #16190F !important;
}
:root[data-theme="light"] .stat-label { color: #4F544A !important; }