/* TWINFLAME design-system.css — extracted from welcome.html */
/* BG: #0d0e0f (near-black), buttons: fire gradient #b22222→#d4af37 */
/* Fonts: Playfair Display / Plus Jakarta Sans */

html, body {
  background-color: #0d0e0f !important;
  background-image: radial-gradient(circle at 50% 50%, rgba(178, 34, 34, 0.12) 0%, transparent 70%) !important;
  color: #e3e2e3 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif !important;
  background: linear-gradient(to bottom, #ffe088 0%, #e9c349 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

button.cta-btn,
button.cta-gradient,
button.gradient-button,
button.fiery-gradient-btn,
a.cta-btn,
.cta-button,
button[id*="cta"],
button[id*="next"],
button[id*="continue"],
button[id*="Btn"],
button[id*="Button"],
#vfc button {
  background: linear-gradient(135deg, #b22222 0%, #d4af37 100%) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  box-shadow: 0 0 20px rgba(178, 34, 34, 0.4) !important;
  border: none !important;
}

button.gradient-button:disabled,
.cta-button:disabled,
button[id*="next"]:disabled,
button[id*="Btn"]:disabled,
button[id*="Button"]:disabled {
  background: linear-gradient(135deg, #343536 0%, #1b1c1d 100%) !important;
  color: rgba(227, 226, 227, 0.4) !important;
  box-shadow: none !important;
}

.option-card,
.glass-card,
.glass-panel,
.card-choice {
  background: rgba(31, 32, 33, 0.4) !important;
  border-color: rgba(178, 34, 34, 0.25) !important;
}
.option-card.selected,
.glass-card.selected,
.card-choice.selected {
  border-color: #e9c349 !important;
  background: rgba(178, 34, 34, 0.10) !important;
}

.text-primary { color: #e9c349 !important; }
a { color: #e9c349 !important; }

.progress-fill, .progress-bar-fill {
  background: linear-gradient(90deg, #b22222, #e9c349) !important;
}

/* === CTA CLICK-FIX (g4 2026-05-31) === */
button.cta-btn,
button.cta-gradient,
button.gradient-button,
button.fiery-gradient-btn,
a.cta-btn,
.cta-button,
button[id*='cta'],
button[id*='next'],
button[id*='continue'],
button[id*='Btn'],
button[id*='Button'],
#vfc button {
  cursor: pointer !important;
  pointer-events: auto !important;
  display: inline-flex !important;
}
button.cta-btn > *,
button.cta-gradient > *,
button.gradient-button > *,
.cta-button > *,
button[id*='cta'] > *,
button[id*='next'] > *,
button[id*='continue'] > *,
button[id*='Btn'] > *,
button[id*='Button'] > * {
  pointer-events: none !important;
}

/* === g3 ligature fix 2026-05-31 === */
/* Restore Material Symbols font-family overridden by design-system body/span rules */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp,
span.material-symbols-outlined,
span.material-symbols-rounded,
span.material-symbols-sharp {
  font-family: "Material Symbols Outlined" !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}