/* ==========================================================================
   Tema escuro — funis v3 e v4 (classe qv-<versão> no <body>, setada por
   js/quiz-engine.js). v1 e v2 não têm essas classes, então nada aqui os afeta.
   Ao criar uma versão nova que herda esse visual, some o slug ao :is() abaixo.
   ========================================================================== */

body:is(.qv-v3, .qv-v4) {
  /* ---------- tokens (a maior parte do app.css/components.css já usa var()) ---------- */
  --color-bg: #1c1a24;
  --color-text: #f4f1f8;
  --color-muted: #a8a0ba;
  --color-accent: #e0473f;
  --color-danger: #e0473f;
  --bg-card: #26232f;
  --bg-card-hover: #2d2a38;
  --bg-option: #26232f;
  --bg-option-selected: #2d2438;
  --border-option: #3a3646;
  --border-option-selected: #e0473f;
}

/* ---------- seletores com cor hardcoded em components.css — overrides diretos ---------- */

body:is(.qv-v3, .qv-v4) .progress-bar { background: #3a3646; }

body:is(.qv-v3, .qv-v4) .option {
  background: #26232f;
  border-color: #3a3646;
}
body:is(.qv-v3, .qv-v4) .option:hover { background: #2d2a38; }
body:is(.qv-v3, .qv-v4) .option.selected {
  background: #2d2438;
  border-color: #e0473f;
}

body:is(.qv-v3, .qv-v4) .field-input {
  background: #26232f;
  color: #f4f1f8;
  border-color: #3a3646;
}

body:is(.qv-v3, .qv-v4) .offer-section hr.sep { border-top-color: #3a3646; }

body:is(.qv-v3, .qv-v4) .loading-progress-bar { background: #3a3646; }

body:is(.qv-v3, .qv-v4) .e1-timer {
  background: #26232f;
  border-color: #3a3646;
}
body:is(.qv-v3, .qv-v4) .e1-timer__label { color: #e0473f; }
body:is(.qv-v3, .qv-v4) .e1-timer__num { color: #f4f1f8; }
body:is(.qv-v3, .qv-v4) .e1-timer.is-expired .e1-timer__num { color: var(--color-muted); }

body:is(.qv-v3, .qv-v4) .e1-notice {
  background: #26232f;
  border-color: #3a3646;
}
body:is(.qv-v3, .qv-v4) .e1-notice h4 { color: #e0473f; }
body:is(.qv-v3, .qv-v4) .e1-notice.is-expired {
  background: #2d2438;
  border-color: #e0473f;
}

/* ---------- selo/pill da abertura (step.badge) ---------- */
body:is(.qv-v3, .qv-v4) .step-badge {
  display: table;
  margin: 0 auto var(--space-md);
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
}

/* ---------- opt-out do WhatsApp (lead_form) ---------- */
body:is(.qv-v3, .qv-v4) .optout { border-top-color: #3a3646; }
body:is(.qv-v3, .qv-v4) .optout__text { color: #a8a0ba; }