/* CHAKRA DESIGN SYSTEM — extracted from welcome.html */
/* Welcome tokens: bg #16111b (deep purple-black), 
   btn linear-gradient(135deg,#ae72ff,#7e28df) — violet gradient,
   fonts Plus Jakarta Sans + Manrope,
   accent #d8b9ff (primary lavender), tertiary #ffb868 (amber) */

/* --- Google Fonts: load Plus Jakarta Sans + Manrope for quiz pages --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&family=Manrope:wght@400;500;700&display=swap');


/* --- Reset body/html to chakra deep purple --- */
html, body {
  background-color: #16111b !important;
  color: #e9dfee !important;
}

/* Override MALAYADARKFIX if present — match welcome exactly */
html, body {
  background: #16111b !important;
}

/* --- Typography: Plus Jakarta Sans + Manrope --- */
h1, h2, h3, h4, h5, h6,
[class*='font-headline'], [class*='font-display'],
[class*='font-brand'] {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
body, p, span, div, button, input, select, label,
[class*='font-body'], [class*='font-label'] {
  font-family: 'Manrope', 'Hanken Grotesk', sans-serif !important;
}

/* --- Button / CTA override to violet gradient --- */
button[class*='btn'], button[onclick], .cta-gradient, .pill-gradient,
button[class*='cta'], #next-btn, #unlock-btn, #continue-btn,
button[data-funnel-next], a[class*='btn'] {
  background: linear-gradient(135deg, #ae72ff 0%, #7e28df 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(174,114,255,0.4) !important;
  border: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
button[data-funnel-next]:disabled, button[data-funnel-next].f-btn-disabled {
  background: linear-gradient(135deg, #ae72ff 0%, #7e28df 100%) !important;
  opacity: 0.4 !important;
}

/* --- glass-card selected state --- */
.glass-card.active, .glass-card.selected, [data-option][data-selected='true'], .selected {
  border-color: #ae72ff !important;
  background: rgba(174,114,255,0.15) !important;
}

/* --- Surface containers deep purple --- */
[class*='surface-container'], .glass-card, .glass-panel {
  background: rgba(22, 17, 31, 0.7) !important;
  border-color: rgba(174,114,255,0.2) !important;
}

/* --- Accent lavender primary --- */
[class*='text-primary'], .text-primary {
  color: #d8b9ff !important;
}

/* --- Amber tertiary accent --- */
[class*='text-tertiary'], .text-tertiary {
  color: #ffb868 !important;
}

/* --- Progress bars violet --- */
[data-funnel-progress], [class*='progress-fill'], [id*='score-bar'] {
  background: linear-gradient(90deg, #ae72ff, #7e28df) !important;
}

/* --- Input fields deep purple dark --- */
input[type=email], input[type=text], select, textarea {
  background: rgba(22,17,31,0.8) !important;
  color: #e9dfee !important;
  border-color: rgba(174,114,255,0.3) !important;
}
input::placeholder, textarea::placeholder {
  color: #978da0 !important;
}

/* --- Sticky bottom overlay --- */
._sticky_cta, [class*='fixed bottom'] {
  background: linear-gradient(to top, #16111b 60%, transparent) !important;
}

/* LIGATURE FIX: prevent body/span font-family override from breaking Material Symbols icons */
span.material-symbols-outlined,
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}