/* ============================================================
   Karma Hisaab — Cream + Forest Green Theme
   Add to Site.Master AFTER karma.css link:
   <link href="~/Styles/green.css" rel="stylesheet"/>
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;600&family=Cinzel:wght@400;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { -webkit-font-smoothing: antialiased !important; text-rendering: optimizeLegibility !important; }

/* ── ROOT VARIABLES ── */
:root {
  --bg:      #F5F0E8;
  --bg2:     #EDE8DC;
  --bg3:     #E4DDCC;
  --card:    #FFFFFF;
  --border:  rgba(45,106,79,0.18);
  --border2: rgba(45,106,79,0.35);
  --green:   #2D6A4F;
  --green2:  #40916C;
  --green3:  #74C69D;
  --gold:    #C8860A;
  --gold2:   #E9A520;
  --red:     #C0392B;
  --text:    #0D1F10;
  --muted:   rgba(13,31,16,0.58);
  --shadow:  0 2px 16px rgba(45,106,79,0.10);
  --teal:    #40916C;
}

/* ── BASE ── */
html, body       { background: #F5F0E8 !important; color: #0D1F10 !important; font-family: 'Nunito', sans-serif !important; }
.page-wrap       { background: #F5F0E8 !important; }
.stars           { background: radial-gradient(ellipse at 15% 15%, rgba(45,106,79,0.08) 0%, transparent 60%), radial-gradient(ellipse at 85% 85%, rgba(200,134,10,0.07) 0%, transparent 60%) !important; }
.container       { max-width: 440px !important; margin: 0 auto !important; }

/* ── APP NAME / LOGO ── */
.app-name {
  font-family: 'Cinzel', serif !important;
  background: linear-gradient(135deg,#2D6A4F,#40916C,#C8860A) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important; letter-spacing: 1px !important;
}
.app-tagline  { color: rgba(13,31,16,0.55) !important; }
.app-name-en  { font-family: 'Cinzel', serif !important; background: linear-gradient(135deg,#2D6A4F,#40916C,#C8860A) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.app-name-hi, .dash-logo-hi { font-family: 'Noto Sans Devanagari', sans-serif !important; color: #2D6A4F !important; opacity: 0.85 !important; }
.dash-logo-en { font-family: 'Cinzel', serif !important; font-size: 16px !important; font-weight: 700 !important; background: linear-gradient(135deg,#2D6A4F,#40916C,#C8860A) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.dash-trial-badge { color: rgba(13,31,16,0.55) !important; }

/* ── AVATAR ── */
.avatar { background: linear-gradient(135deg,#2D6A4F,#1B4332) !important; color: #F5F0E8 !important; box-shadow: 0 2px 10px rgba(45,106,79,0.3) !important; }
.avatar-lg { width: 46px !important; height: 46px !important; }

/* ── UPGRADE BTN ── */
.upgrade-btn { background: linear-gradient(135deg,#2D6A4F,#40916C) !important; color: #F5F0E8 !important; border-radius: 8px !important; font-size: 12px !important; padding: 7px 14px !important; text-decoration: none !important; font-weight: 600 !important; }

/* ── TABS ── */
.tabs            { background: #E8E2D4 !important; border: 1px solid rgba(45,106,79,0.15) !important; border-radius: 14px !important; }
.tab             { color: rgba(13,31,16,0.55) !important; font-weight: 600 !important; }
.tab.active      { background: #2D6A4F !important; color: #F5F0E8 !important; border-radius: 10px !important; }
.tab:hover:not(.active) { background: rgba(45,106,79,0.08) !important; color: #0D1F10 !important; }

/* ── CARD ── */
.card            { background: #FFFFFF !important; border: 1px solid rgba(45,106,79,0.15) !important; border-radius: 18px !important; box-shadow: 0 2px 16px rgba(45,106,79,0.10) !important; }
.card-title      { color: #1B4332 !important; font-size: 17px !important; font-weight: 700 !important; font-family: 'Cinzel', serif !important; }
.card-subtitle   { color: rgba(13,31,16,0.55) !important; font-size: 13px !important; }

/* ── CHAKRA WHEEL ── */
.chakra-score { color: #2D6A4F !important; font-size: 36px !important; font-weight: 800 !important; }
.chakra-title { color: rgba(13,31,16,0.55) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1px !important; }

/* ── STAT PILLS ── */
.stat-pill      { background: #FFFFFF !important; border-radius: 14px !important; box-shadow: 0 2px 10px rgba(45,106,79,0.10) !important; }
.stat-pill.good { border: 1.5px solid rgba(45,106,79,0.3) !important; }
.stat-pill.bad  { border: 1.5px solid rgba(192,57,43,0.25) !important; }
.stat-pill.good .stat-val { color: #40916C !important; font-size: 28px !important; font-weight: 800 !important; }
.stat-pill.bad  .stat-val { color: #C0392B !important; font-size: 28px !important; font-weight: 800 !important; }
.stat-lbl { color: rgba(13,31,16,0.60) !important; font-size: 12px !important; font-weight: 600 !important; }

/* ── SECTION TITLE ── */
.section-title { color: rgba(13,31,16,0.60) !important; font-weight: 700 !important; font-size: 11px !important; }
.section-title::after { background: rgba(45,106,79,0.15) !important; }

/* ── KARMA ITEMS ── */
.karma-item        { background: #FFFFFF !important; border-radius: 12px !important; box-shadow: 0 1px 8px rgba(45,106,79,0.08) !important; position: relative !important; }
.karma-item.Good   { border-left-color: #40916C !important; }
.karma-item.Bad    { border-left-color: #C0392B !important; }
.karma-item:hover  { background: #F0F7F3 !important; box-shadow: 0 3px 14px rgba(45,106,79,0.14) !important; }
.karma-item::after { background: rgba(45,106,79,0.12) !important; border-color: rgba(45,106,79,0.3) !important; color: #2D6A4F !important; }
.karma-item.Good .karma-dot   { background: #40916C !important; }
.karma-item.Bad  .karma-dot   { background: #C0392B !important; }
.karma-item.Good .karma-badge { background: rgba(64,145,108,0.12) !important; color: #40916C !important; }
.karma-item.Bad  .karma-badge { background: rgba(192,57,43,0.10) !important; color: #C0392B !important; }
.karma-desc { color: #0D1F10 !important; font-size: 14px !important; font-weight: 500 !important; }
.karma-meta { color: rgba(13,31,16,0.58) !important; font-size: 12px !important; }

/* ── PEOPLE CARD ── */
.people-card       { background: #FFFFFF !important; border: 1px solid rgba(45,106,79,0.15) !important; border-radius: 12px !important; box-shadow: 0 1px 8px rgba(45,106,79,0.06) !important; }
.people-card:hover { border-color: #40916C !important; background: #F0F7F3 !important; }
.mini-avatar       { background: linear-gradient(135deg,#40916C,#1B4332) !important; }
.people-name       { color: #0D1F10 !important; font-size: 15px !important; font-weight: 600 !important; }
.people-score      { color: rgba(13,31,16,0.58) !important; font-size: 12px !important; }
.score-badge.pos   { color: #40916C !important; background: rgba(64,145,108,0.12) !important; }
.score-badge.neg   { color: #C0392B !important; background: rgba(192,57,43,0.10) !important; }
.score-badge.neu   { color: #C8860A !important; background: rgba(200,134,10,0.12) !important; }

/* ── TYPE TOGGLE ── */
.type-btn          { border: 1.5px solid rgba(45,106,79,0.25) !important; color: rgba(13,31,16,0.55) !important; background: #F5F0E8 !important; font-weight: 600 !important; border-radius: 10px !important; }
.type-btn.good-sel { background: rgba(64,145,108,0.12) !important; border-color: #40916C !important; color: #2D6A4F !important; }
.type-btn.bad-sel  { background: rgba(192,57,43,0.10) !important; border-color: #C0392B !important; color: #C0392B !important; }

/* ── INPUTS ── */
.inp, input[type=text], input[type=tel], input[type=number], input[type=password], input[type=email], textarea, select {
  background: #F5F0E8 !important; border: 1.5px solid rgba(45,106,79,0.2) !important;
  color: #0D1F10 !important; border-radius: 10px !important; font-family: 'Nunito', sans-serif !important;
}
.inp:focus, input:focus, textarea:focus, select:focus {
  border-color: #40916C !important; background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(64,145,108,0.15) !important; outline: none !important;
}
input::placeholder, textarea::placeholder { color: rgba(13,31,16,0.35) !important; }
label { color: rgba(13,31,16,0.65) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; }

/* ── BUTTONS ── */
.btn-gold    { background: linear-gradient(135deg,#2D6A4F,#40916C) !important; color: #F5F0E8 !important; }
.btn-teal    { background: linear-gradient(135deg,#2D6A4F,#40916C) !important; color: #F5F0E8 !important; }
.btn-green   { background: linear-gradient(135deg,#2D6A4F,#40916C) !important; color: #F5F0E8 !important; }
.btn-outline { background: transparent !important; border: 1.5px solid rgba(45,106,79,0.3) !important; color: #2D6A4F !important; }
.btn-outline:hover { border-color: #40916C !important; background: rgba(45,106,79,0.06) !important; }
.btn-back    { background: rgba(45,106,79,0.07) !important; border: 1px solid rgba(45,106,79,0.2) !important; color: #2D6A4F !important; }

/* ── BOTTOM NAV ── */
.bottom-nav         { background: #FFFFFF !important; border-top: 1.5px solid rgba(45,106,79,0.15) !important; box-shadow: 0 -4px 20px rgba(45,106,79,0.10) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav-btn            { color: rgba(13,31,16,0.40) !important; font-weight: 600 !important; }
.nav-btn.active     { color: #2D6A4F !important; font-weight: 700 !important; }
.nav-label-hi       { font-family: 'Noto Sans Devanagari', sans-serif !important; font-size: 9px !important; display: block; opacity: 0.7; }

/* ── DIVIDER ── */
.divider { background: rgba(45,106,79,0.12) !important; }

/* ── ALERTS ── */
.alert-ok   { background: rgba(64,145,108,0.10) !important; border: 1px solid rgba(64,145,108,0.3) !important; color: #2D6A4F !important; }
.alert-warn { background: rgba(200,134,10,0.10) !important; border: 1px solid rgba(200,134,10,0.3) !important; color: #C8860A !important; }
.alert-err  { background: rgba(192,57,43,0.08) !important; border: 1px solid rgba(192,57,43,0.25) !important; color: #C0392B !important; }

/* ── TOAST ── */
.toast { background: #1B4332 !important; color: #F5F0E8 !important; border: none !important; box-shadow: 0 4px 20px rgba(45,106,79,0.3) !important; }

/* ── STEPS ── */
.step         { background: rgba(45,106,79,0.15) !important; }
.step.done    { background: #40916C !important; }
.step.current { background: #2D6A4F !important; }

/* ── OTP BOXES ── */
.otp-box       { background: #F5F0E8 !important; border: 1.5px solid rgba(45,106,79,0.22) !important; color: #0D1F10 !important; }
.otp-box:focus { border-color: #40916C !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(64,145,108,0.18) !important; }

/* ── EMPTY STATE ── */
.empty-msg { color: rgba(13,31,16,0.50) !important; }

/* ── PRICE TAG ── */
.price-tag    { background: rgba(45,106,79,0.06) !important; border: 1px solid rgba(45,106,79,0.18) !important; border-radius: 14px !important; }
.price-amount { color: #1B4332 !important; }
.price-inr    { color: #C8860A !important; }
.price-period { color: rgba(13,31,16,0.55) !important; }

/* ── LINKS ── */
.link         { color: #2D6A4F !important; font-weight: 700 !important; }
.text-muted   { color: rgba(13,31,16,0.55) !important; }
.forgot-link  { color: #2D6A4F !important; }

/* ── GENDER RADIO ── */
.gender-radio label           { background: #F5F0E8 !important; border: 1.5px solid rgba(45,106,79,0.2) !important; color: rgba(13,31,16,0.55) !important; border-radius: 25px !important; }
.gender-radio input:checked + label { background: linear-gradient(135deg,#2D6A4F,#40916C) !important; color: #FFFFFF !important; border-color: #2D6A4F !important; box-shadow: 0 3px 10px rgba(45,106,79,0.3) !important; }

/* ── PASS NOTE ── */
.pass-note { background: rgba(45,106,79,0.07) !important; border: 1px solid rgba(45,106,79,0.18) !important; color: rgba(13,31,16,0.6) !important; }

/* ── COUNTRY BADGE ── */
.country-badge { background: #EDE8DC !important; border: 1.5px solid rgba(45,106,79,0.2) !important; color: #0D1F10 !important; }

/* ── TRIAL BANNER ── */
.trial-banner  { background: linear-gradient(135deg,rgba(45,106,79,0.10),rgba(116,198,157,0.12)) !important; border: 1.5px solid rgba(45,106,79,0.25) !important; }
.trial-text h3 { color: #1B4332 !important; }
.trial-text p  { color: rgba(13,31,16,0.6) !important; }
.feature-icon  { background: rgba(45,106,79,0.10) !important; border: 1px solid rgba(45,106,79,0.2) !important; color: #2D6A4F !important; }
.feature-text  { color: #0D1F10 !important; font-weight: 500 !important; }

/* ── HI (Hindi) ── */
.hi { font-family: 'Noto Sans Devanagari', sans-serif !important; color: rgba(13,31,16,0.55) !important; }

/* ── CHAKRA WHEEL INNER CIRCLE — override inline SVG fill ── */
#chakraSVG { background: transparent !important; }

/* Target the inner fill circle by its position in SVG */
#chakraSVG circle:nth-child(4),
#chakraSVG circle:nth-child(5) { fill: #F5F0E8 !important; }

/* Spoke lines */
#chakraSVG line { stroke: rgba(45,106,79,0.4) !important; }

/* Outer ring */
#chakraSVG > circle:first-child { fill: rgba(45,106,79,0.04) !important; stroke: rgba(45,106,79,0.12) !important; }

/* Chakra wrap background */
.chakra-wrap { background: transparent !important; }

/* ── BOTTOM NAV — force white background ── */
.bottom-nav,
nav.bottom-nav {
  background: #FFFFFF !important;
  border-top: 1.5px solid rgba(45,106,79,0.15) !important;
  box-shadow: 0 -4px 20px rgba(45,106,79,0.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── DASH HEADER SECTION ── */
.dash-header { background: transparent !important; }

/* ── USER NAME in dashboard ── */
.dash-name,
.dash-header [style*="font-size:18px"] { color: #0D1F10 !important; }