/* KARMIC-DEBT design-system — extracted from welcome.html */
/* Welcome palette: deep indigo bg #131318 / #140a22, gold accent #e8c266, Playfair+Manrope */
html, body {
  background: #140a22 !important;
  background-color: #140a22 !important;
  color: #e4e1e8 !important;
  font-family: 'Manrope', sans-serif !important;
}
/* Override the purple/crimson quiz theme bg (#0D0820) back to welcome indigo */
body[style*='background'], .karma-bg {
  background: radial-gradient(circle at 50% 0%, rgba(208,192,225,0.08) 0%, transparent 60%), #140a22 !important;
}
:root {
  --ds-bg: #140a22;
  --ds-surface: #1f1f24;
  --ds-accent: #e8c266;
  --ds-accent-dim: #a87f00;
  --ds-accent-gradient: linear-gradient(135deg, #e8c266 0%, #a87f00 50%, #f0d080 100%);
  --ds-cta-text: #3e2e00;
  --ds-font-display: 'Playfair Display', serif;
  --ds-font-body: 'Manrope', sans-serif;
  --ds-on-surface: #e4e1e8;
  --ds-on-surface-variant: #cbc4cd;
  --ds-glass-bg: rgba(20,10,34,0.6);
  --ds-glass-border: rgba(232,194,102,0.2);
}
/* CTA buttons — override purple/crimson celestial-btn to gold */
button.celestial-btn,
button.pulse-gold,
button[class*='celestial'],
button.cta-main,
.btn-primary {
  background: linear-gradient(135deg, #e8c266 0%, #a87f00 50%, #f0d080 100%) !important;
  box-shadow: 0 4px 20px rgba(232,194,102,0.35) !important;
  color: #3e2e00 !important;
}
/* Glass cards */
.glass-card {
  background: rgba(20,10,34,0.6) !important;
  border: 1px solid rgba(232,194,102,0.2) !important;
}
.glass-card.selected, .glass-card:hover {
  border-color: #e8c266 !important;
}
/* Accent text — override purple primary to gold */
.text-primary, [class*='text-primary'],
.text-secondary, [class*='text-secondary'] {
  color: #e8c266 !important;
}
/* Progress bar override */
.bg-gradient-to-r.from-primary-container {
  background: linear-gradient(90deg, #e8c266, #a87f00) !important;
}
/* Font override — replace Cinzel/Plus Jakarta with Playfair/Manrope */
[style*='Cinzel'], .font-headline-md, .font-headline-lg, [class*='font-headline'] {
  font-family: 'Playfair Display', serif !important;
}
[style*='Plus Jakarta Sans'], .font-body-md, .font-label-md, [class*='font-label'], [class*='font-body'] {
  font-family: 'Manrope', sans-serif !important;
}
/* Ensure btn-primary (upsell pages) gets gold too */
.btn-gold {
  background: linear-gradient(135deg, #e8c266 0%, #a87f00 50%, #f0d080 100%) !important;
  color: #3e2e00 !important;
}
/* Override .btn-gold on upsell-2 */
button.btn-gold {
  background: linear-gradient(135deg, #e8c266 0%, #a87f00 50%, #f0d080 100%) !important;
  color: #3e2e00 !important;
}

/* === Material Symbols Outlined — font-family fix (g2) === */
/* html,body !important override would break icon ligatures — restore here */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");
.material-symbols-outlined,
span.material-symbols-outlined {
  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";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}



/* ====================================================
   GLOBAL DARK INPUT OVERRIDE (fix #2 - all middle pages)
   ==================================================== */
input, select, textarea {
  background: rgba(28,18,56,0.85) !important;
  color: #e8d5ff !important;
  -webkit-text-fill-color: #e8d5ff !important;
  border: 1px solid rgba(192,132,252,0.35) !important;
}
input::placeholder, textarea::placeholder {
  color: #9080b0 !important;
  -webkit-text-fill-color: #9080b0 !important;
  opacity: 1 !important;
}
/* Keep select options readable */
select option {
  background: #1c1238 !important;
  color: #e8d5ff !important;
}
/* Gold border on focus */
input:focus, select:focus, textarea:focus {
  border-color: rgba(232,194,102,0.6) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(232,194,102,0.15) !important;
}

/* ====================================================
   STITCH LOOK FOR MIDDLE PAGES (fix #3)
   Cosmic bg, gold headers, gold-gradient buttons
   ==================================================== */
/* Cosmic background — all middle pages */
body {
  background: radial-gradient(circle at 50% 0%, rgba(103,0,181,0.12) 0%, transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(20,10,34,0.9) 0%, transparent 50%),
              #14102a !important;
}

/* Gold section headers */
h1, h2, h3 {
  font-family: 'Playfair Display', serif !important;
}

/* Gold-gradient primary CTA buttons — broad match */
button#next-btn:not(:disabled),
button#next_btn:not(:disabled),
button#continue-btn:not(:disabled),
button#nextBtn:not(:disabled),
button.btn-primary:not(:disabled),
button.cta-main:not(:disabled) {
  background: linear-gradient(135deg, #e8c266 0%, #a87f00 50%, #f0d080 100%) !important;
  color: #2a1205 !important;
  font-weight: 700 !important;
}
/* celestial-btn = quiz page nav buttons = gold */
button.celestial-btn:not(.glass-card):not(:disabled) {
  background: linear-gradient(135deg, #e8c266 0%, #a87f00 50%, #f0d080 100%) !important;
  color: #2a1205 !important;
  font-weight: 700 !important;
}
button#next-btn:not(:disabled) span,
button#next_btn:not(:disabled) span,
button#continue-btn:not(:disabled) span,
button.btn-primary:not(:disabled) span,
button.cta-main:not(:disabled) span {
  color: #2a1205 !important;
}
/* Explicitly keep glass-card button text light */
button.glass-card span,
button.glass-card div {
  color: #e8d5ff !important;
  -webkit-text-fill-color: #e8d5ff !important;
}
/* Disabled state */
button:disabled,
button[disabled] {
  background: rgba(28,18,56,0.6) !important;
  color: #6050a0 !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}
button:disabled span,
button[disabled] span {
  color: #6050a0 !important;
}

/* Glass-card quiz options — dark bg, light text */
.glass-card {
  background: rgba(28,18,56,0.80) !important;
  border: 1px solid rgba(192,132,252,0.25) !important;
  color: #e8d5ff !important;
}
.glass-card span, .glass-card div {
  color: #e8d5ff !important;
}
.glass-card:hover {
  background: rgba(28,18,56,0.95) !important;
  border-color: rgba(232,194,102,0.5) !important;
}
.glass-card.selected {
  background: rgba(28,18,56,0.95) !important;
  border-color: #e8c266 !important;
  box-shadow: 0 0 20px rgba(232,194,102,0.2) !important;
}

/* Quiz option labels (goal.html) */
.quiz-option {
  background: rgba(28,18,56,0.80) !important;
  border: 1px solid rgba(192,132,252,0.2) !important;
}
.quiz-option span:not(.material-symbols-outlined) {
  color: #e8d5ff !important;
}
.quiz-option.border-secondary {
  border-color: #e8c266 !important;
  background: rgba(232,194,102,0.08) !important;
}

/* Gold date select dropdowns */
select.karma-select {
  background: rgba(28,18,56,0.8) !important;
  color: #e8d5ff !important;
  border: 1px solid rgba(192,132,252,0.35) !important;
  border-radius: 8px !important;
  padding: 12px 10px !important;
  font-size: 16px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Material Symbols — already handled above, belt-and-suspenders */
.material-symbols-outlined {
  font-family: Material Symbols Outlined !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Header brand text — gold */
.text-primary,
.text-secondary {
  color: #e8c266 !important;
  -webkit-text-fill-color: #e8c266 !important;
}