/* ================================================
   MoonMitra - Production Stylesheet v2.0
   Architecture: Tokens → Reset → Components → Utilities
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@300;400;500;600;700;800&family=Tiro+Devanagari+Hindi:ital@0;1&family=Noto+Serif+Devanagari:wght@400;500;600&display=swap');

/* ===== 1. DESIGN TOKENS ===== */
:root {
  --bg: #0B0F2E; --bg-alt: #11163C;
  --light: #FAF6EC; --light-alt: #F4ECD6;
  --gold: #C9A24C; --gold-light: #E8C76B; --gold-deep: #9B7826;
  --maroon: #7A1F2B; --saffron: #E07B2C; --cream: #F5EEDB;
  --ink: #1A1A2E; --mute: #9994B5; --mute-ink: #6B6B85;
  --success: #0d8056; --success-light: #5BE584;
  --error: #c0392b; --warning: #e67e22; --info: #3498db;
  --line: rgba(201, 162, 76, 0.22);
  --line-ink: rgba(26, 26, 46, 0.1);
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-devanagari: 'Tiro Devanagari Hindi', serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px -12px rgba(0,0,0,0.15);
  --shadow-lg: 0 20px 40px -10px rgba(0,0,0,0.15);
  --transition: all 0.2s ease;
}

/* ===== 2. RESET ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--light);color:var(--ink);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:var(--transition)}
button{font-family:inherit;cursor:pointer;border:none;background:none;padding:0}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* ===== 3. TYPOGRAPHY ===== */
.serif{font-family:var(--font-serif)}
.devanagari{font-family:var(--font-devanagari)}
.text-xs{font-size:11px} .text-sm{font-size:12px} .text-base{font-size:14px}
.text-md{font-size:15px} .text-lg{font-size:16px} .text-xl{font-size:18px}
.text-2xl{font-size:22px} .text-3xl{font-size:28px} .text-4xl{font-size:36px}
.font-medium{font-weight:500} .font-semibold{font-weight:600}
.font-bold{font-weight:700} .font-extrabold{font-weight:800}
.italic{font-style:italic} .uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:0.06em} .tracking-wider{letter-spacing:0.1em} .tracking-widest{letter-spacing:0.2em}
.leading-tight{line-height:1.2} .leading-normal{line-height:1.5} .leading-relaxed{line-height:1.65}
.text-center{text-align:center} .text-left{text-align:left} .text-right{text-align:right}

/* ===== 4. COLORS ===== */
.text-ink{color:var(--ink)} .text-mute{color:var(--mute-ink)} .text-cream{color:var(--cream)}
.text-white{color:white} .text-gold{color:var(--gold)} .text-gold-deep{color:var(--gold-deep)}
.text-gold-light{color:var(--gold-light)} .text-maroon{color:var(--maroon)}
.text-saffron{color:var(--saffron)} .text-success{color:var(--success)} .text-error{color:var(--error)}
.bg-white{background:white} .bg-light{background:var(--light)} .bg-light-alt{background:var(--light-alt)}
.bg-cream{background:var(--cream)} .bg-ink{background:var(--ink)} .bg-gold{background:var(--gold)}
.bg-gold-soft{background:rgba(201,162,76,0.13)}

/* ===== 5. LAYOUT - CONTAINER ===== */
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 16px}
@media(min-width:1024px){.container{padding:0 32px}}
.container-sm{max-width:480px} .container-md{max-width:800px} .container-lg{max-width:1100px}

/* ===== 6. FLEX & GRID ===== */
.flex{display:flex} .inline-flex{display:inline-flex} .grid{display:grid}
.block{display:block} .inline-block{display:inline-block} .hidden{display:none}
.flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap}
.flex-1{flex:1} .flex-shrink-0{flex-shrink:0}
.items-start{align-items:flex-start} .items-center{align-items:center} .items-end{align-items:flex-end}
.justify-start{justify-content:flex-start} .justify-center{justify-content:center}
.justify-end{justify-content:flex-end} .justify-between{justify-content:space-between}
.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-5{gap:20px} .gap-6{gap:24px} .gap-8{gap:32px}
.grid-cols-1{grid-template-columns:1fr} .grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)} .grid-cols-4{grid-template-columns:repeat(4,1fr)}
.grid-cols-6{grid-template-columns:repeat(6,1fr)}
@media(min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.sm\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.sm\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}.lg\:grid-cols-5{grid-template-columns:repeat(5,1fr)}.lg\:grid-cols-6{grid-template-columns:repeat(6,1fr)}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:block{display:block}}
@media(max-width:1023px){.lg\:only{display:none!important}}

/* ===== 7. SPACING ===== */
.m-0{margin:0} .mx-auto{margin-left:auto;margin-right:auto}
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px}
.mt-5{margin-top:20px} .mt-6{margin-top:24px} .mt-8{margin-top:32px} .mt-10{margin-top:40px} .mt-12{margin-top:48px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px}
.mb-5{margin-bottom:20px} .mb-6{margin-bottom:24px} .mb-8{margin-bottom:32px} .mb-10{margin-bottom:40px} .mb-12{margin-bottom:48px}
.p-0{padding:0} .p-2{padding:8px} .p-3{padding:12px} .p-4{padding:16px}
.p-5{padding:20px} .p-6{padding:24px} .p-8{padding:32px} .p-10{padding:40px}
.px-3{padding-left:12px;padding-right:12px} .px-4{padding-left:16px;padding-right:16px}
.py-3{padding-top:12px;padding-bottom:12px} .py-4{padding-top:16px;padding-bottom:16px}
.py-6{padding-top:24px;padding-bottom:24px} .py-8{padding-top:32px;padding-bottom:32px}
.py-10{padding-top:40px;padding-bottom:40px} .py-12{padding-top:48px;padding-bottom:48px}

/* ===== 8. SIZING ===== */
.w-full{width:100%} .h-full{height:100%}
.max-w-sm{max-width:480px} .max-w-md{max-width:600px} .max-w-lg{max-width:800px}
.max-w-xl{max-width:1000px} .max-w-2xl{max-width:1100px}
.min-h-70vh{min-height:70vh}

/* ===== 9. BORDERS & POSITION ===== */
.relative{position:relative} .absolute{position:absolute}
.rounded{border-radius:8px} .rounded-md{border-radius:10px} .rounded-lg{border-radius:12px}
.rounded-xl{border-radius:16px} .rounded-2xl{border-radius:20px} .rounded-full{border-radius:999px}
.border{border:1px solid var(--line-ink)} .border-t{border-top:1px solid var(--line-ink)}
.border-b{border-bottom:1px solid var(--line-ink)} .border-gold{border:1px solid var(--gold)}
.overflow-hidden{overflow:hidden}
.cursor-pointer{cursor:pointer}
.shadow{box-shadow:var(--shadow)} .shadow-md{box-shadow:var(--shadow-md)} .shadow-lg{box-shadow:var(--shadow-lg)}

/* ===== 10. ANIMATIONS ===== */
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes drift{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.star{animation:twinkle 3s ease-in-out infinite}
.chart-rotate{animation:drift 80s linear infinite}
.pulse-dot{animation:pulse 2s ease-in-out infinite}
.marquee-track{animation:marquee 40s linear infinite}
.fade-up{animation:fadeUp 0.7s cubic-bezier(0.2,0.8,0.2,1) both}

/* ===== 11. BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:999px;font-weight:600;font-size:13px;border:none;cursor:pointer;transition:var(--transition);text-decoration:none;white-space:nowrap}
.btn:disabled{opacity:0.6;cursor:not-allowed}
.btn-gold{background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 100%);color:var(--ink);font-weight:700;box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 6px 18px -8px rgba(201,162,76,0.6)}
.btn-gold:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 10px 26px -8px rgba(201,162,76,0.8)}
.btn-outline-gold{background:transparent;color:var(--gold-deep);border:1.5px solid var(--gold)}
.btn-outline-gold:hover:not(:disabled){background:var(--gold);color:white}
.btn-dark{background:var(--ink);color:var(--cream);border:1px solid var(--line)}
.btn-ghost{background:transparent;color:var(--gold-deep)}
.btn-ghost:hover:not(:disabled){background:rgba(201,162,76,0.1)}
.btn-sm{padding:6px 12px;font-size:11px}
.btn-lg{padding:14px 28px;font-size:15px;border-radius:12px}
.btn-block{width:100%;padding:14px}

/* ===== 12. CARDS ===== */
.card{background:white;border:1px solid var(--line-ink);border-radius:12px;transition:var(--transition)}
.card-hover:hover{border-color:var(--gold);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-dark{background:linear-gradient(135deg,var(--bg) 0%,var(--bg-alt) 100%);color:var(--cream);border:none}
.card-flat{background:var(--light-alt);border:none}
.card-bordered{border:1px solid var(--line-ink)}

/* ===== 13. FORMS ===== */
.input{width:100%;background:white;border:1px solid var(--line-ink);color:var(--ink);font-size:14px;padding:10px 12px;border-radius:8px;font-family:inherit;transition:var(--transition)}
.input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(201,162,76,0.15)}
.input-lg{font-size:22px;padding:16px}
.input-otp{text-align:center;font-size:28px;font-family:var(--font-serif);font-weight:700;letter-spacing:0.3em;padding:16px}
.label{display:block;font-size:11.5px;font-weight:600;color:var(--mute-ink);margin-bottom:5px;letter-spacing:0.02em}
.input-group{display:flex;gap:8px}
.input-prefix{display:flex;align-items:center;padding:0 12px;background:var(--light-alt);border:1px solid var(--line-ink);border-radius:8px;font-weight:600;white-space:nowrap}
.gender-row{display:flex;gap:8px}
.gender-btn{flex:1;padding:9px;font-size:12.5px;border-radius:8px;background:white;border:1px solid var(--line-ink);color:var(--ink);font-weight:600;text-transform:capitalize;cursor:pointer;transition:var(--transition)}
.gender-btn.active{background:rgba(201,162,76,0.13);border-color:var(--gold);color:var(--gold-deep)}

/* ===== 14. PILLS & BADGES ===== */
.pill{display:inline-block;font-size:9.5px;letter-spacing:0.1em;font-weight:700;padding:2px 7px;border-radius:4px;background:rgba(201,162,76,0.13);color:var(--gold-deep);border:1px solid rgba(201,162,76,0.27)}
.pill-success{background:rgba(13,128,86,0.13);color:var(--success);border-color:rgba(13,128,86,0.27)}
.pill-saffron{background:rgba(224,123,44,0.13);color:var(--saffron);border-color:rgba(224,123,44,0.27)}
.pill-new{background:rgba(91,229,132,0.13);color:var(--success);border-color:rgba(91,229,132,0.27)}
.live-dot{width:7px;height:7px;background:var(--success-light);border-radius:50%;display:inline-block}

/* ===== 15. LOADER ===== */
.loader{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 1s linear infinite}
.loader-dark{border-color:rgba(0,0,0,0.1);border-top-color:var(--gold)}

/* ===== 16. AVATAR ===== */
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-family:var(--font-serif);font-weight:600;border:2px solid var(--gold)}
.avatar-sm{width:32px;height:32px;font-size:14px}
.avatar-md{width:40px;height:40px;font-size:14px}
.avatar-lg{width:64px;height:64px;font-size:24px}
.avatar-xl{width:72px;height:72px;font-size:30px}

/* ===== 17. ICON BOX ===== */
.icon-box{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,rgba(201,162,76,0.13),rgba(201,162,76,0.03));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold-deep);flex-shrink:0}
.icon-box-lg{width:44px;height:44px}
.icon-box-xl{width:56px;height:56px;border-radius:12px}
.icon-box-success{background:linear-gradient(135deg,rgba(13,128,86,0.13),rgba(13,128,86,0.03))}

/* ===== 18. ONLINE STATUS ===== */
.online-dot{position:absolute;bottom:0;right:0;width:14px;height:14px;background:var(--success-light);border-radius:50%;border:2px solid white}

/* ===== 19. ALERT ===== */
.alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:16px}
.alert-warning{background:#fff3cd;border:1px solid #ffc107;color:#856404}
.alert-success{background:rgba(13,128,86,0.1);border:1px solid var(--success);color:var(--success)}
.alert-error{background:rgba(192,57,43,0.1);border:1px solid var(--error);color:var(--error)}

/* ===== 20. TOAST ===== */
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:white;padding:12px 20px;border-radius:8px;box-shadow:var(--shadow-lg);font-size:14px;z-index:1000;transform:translateY(100px);opacity:0;transition:all 0.3s}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{background:var(--success)}
.toast.error{background:var(--error)}

/* ===== 21. SECTIONS ===== */
section{padding:50px 0}
.section-sm{padding:30px 0}
.section-lg{padding:80px 0}
.section-eyebrow{color:var(--gold-deep);font-size:11px;letter-spacing:0.2em;font-weight:700;text-transform:uppercase}
.section-title{font-family:var(--font-serif);font-size:clamp(26px,3.5vw,40px);font-weight:500;letter-spacing:-0.01em;margin:6px 0 0;line-height:1.1}
.section-title-italic{font-style:italic;color:var(--gold-deep)}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.section-link{font-size:13px;color:var(--gold-deep);font-weight:600;display:inline-flex;align-items:center;gap:4px}

/* ===== 22. TABS ===== */
.form-tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--line-ink)}
.form-tab{padding:8px 14px;font-size:13px;font-weight:600;background:transparent;color:var(--mute-ink);border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.form-tab.active{color:var(--gold-deep);border-bottom-color:var(--gold)}
.period-tabs{display:flex;gap:8px;flex-wrap:wrap}
.period-btn{padding:8px 14px;font-size:12.5px;border-radius:999px;background:white;color:var(--ink);border:1px solid var(--line-ink);font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none}
.period-btn.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ===== 23. HEADER ===== */
.top-bar{background:var(--ink);color:var(--cream);font-size:12px}
.top-bar-inner{padding:8px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lang-list{display:flex;gap:12px;overflow-x:auto;flex:1;scrollbar-width:none}
.lang-list::-webkit-scrollbar{display:none}
.lang-list a{white-space:nowrap;color:var(--cream);opacity:0.8;padding:2px 8px}
.lang-list a:hover{opacity:1}
.lang-sc{color:var(--gold);margin-right:4px;font-family:var(--font-serif)}
.lang-label{color:var(--mute);font-size:11px;letter-spacing:0.08em;white-space:nowrap}
.main-header{background:white;border-bottom:1px solid var(--line-ink);position:sticky;top:0;z-index:50;transition:box-shadow 0.2s}
.main-header.scrolled{box-shadow:0 4px 12px -4px rgba(0,0,0,0.08)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo-text{font-family:var(--font-serif);font-size:21px;font-weight:600;color:var(--ink);line-height:1}
.logo-tagline{font-size:9px;letter-spacing:0.18em;color:var(--gold-deep);font-weight:600;margin-top:2px}
.search-wrap{flex:1;max-width:400px;margin:0 24px;position:relative}
.search-wrap input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--line-ink);border-radius:999px;font-size:13px;background:var(--light-alt)}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mute-ink)}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-bar{border-top:1px solid var(--line-ink);padding:10px 0 12px;display:flex;align-items:center;gap:28px}
.nav-link{font-size:13.5px;font-weight:600;color:var(--ink);padding:8px 0;position:relative;cursor:pointer;display:flex;align-items:center;gap:4px}
.nav-link::after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gold);transition:width 0.2s}
.nav-link:hover::after{width:100%} .nav-link:hover{color:var(--gold-deep)}
.nav-item{position:relative}
.dropdown{position:absolute;top:100%;left:0;background:white;border:1px solid var(--line-ink);border-radius:12px;box-shadow:var(--shadow-lg);padding:20px;min-width:240px;z-index:60;display:none}
.nav-item:hover .dropdown{display:block}
.dropdown a{display:block;padding:6px 0;font-size:13px;color:var(--ink)}
.dropdown a:hover{color:var(--gold-deep)}
.menu-toggle{background:none;border:none;padding:4px}
.mobile-nav{padding:16px;display:none;border-top:1px solid var(--line-ink)}
.mobile-nav.open{display:block}
.mobile-nav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}
.mobile-nav-grid a{font-size:14px;font-weight:600}

/* ===== 24. PAGE HERO ===== */
.page-hero{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);color:var(--cream);padding:60px 0 40px;text-align:center}
.page-hero h1{font-family:var(--font-serif);font-size:clamp(32px,4vw,48px);font-weight:500;margin:0 0 12px}
.page-hero p{font-size:15px;color:var(--mute);max-width:600px;margin:0 auto}

/* ===== 25. HOMEPAGE HERO ===== */
.hero{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);position:relative;overflow:hidden;color:var(--cream)}
.hero-stars{position:absolute;inset:0;pointer-events:none}
.hero-star{position:absolute;background:var(--gold-light);border-radius:50%;opacity:0.5}
.hero-inner{padding:40px 0 56px;position:relative}
.hero-grid{display:grid;gap:32px}
@media(min-width:1024px){.hero-grid{grid-template-columns:5fr 7fr;align-items:start}}
.hero-tag-line{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.hero-tag-line-bar{width:24px;height:1px;background:var(--gold)}
.hero-tag{color:var(--gold);font-size:11px;letter-spacing:0.2em;font-weight:700}
.hero-title{font-family:var(--font-serif);font-size:clamp(36px,4.8vw,60px);line-height:1.02;font-weight:500;letter-spacing:-0.02em;margin:0 0 18px}
.hero-title-italic{font-style:italic;color:var(--gold-light)}
.hero-desc{font-size:15.5px;line-height:1.6;color:var(--mute);margin-bottom:24px;max-width:440px}
.hero-stats{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.hero-stat-n{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--gold-light);line-height:1}
.hero-stat-l{font-size:10.5px;color:var(--mute);letter-spacing:0.06em;margin-top:4px}
.app-btn{background:var(--ink);color:var(--cream);border:1px solid var(--line);border-radius:10px;padding:10px 16px;display:flex;align-items:center;gap:10px;font-size:13px;text-decoration:none}
.app-btn-tag{font-size:9px;opacity:0.7}
.app-btn-name{font-weight:700;font-size:13px}

/* ===== 26. FORM CARD ===== */
.form-card{background:white;color:var(--ink);border-radius:16px;padding:24px;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.form-title{font-family:var(--font-serif);font-size:20px;font-weight:600;margin:0 0 4px}
.form-subtitle{font-size:12.5px;color:var(--mute-ink);margin-bottom:18px}
.trust-bar{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:11.5px;color:var(--mute-ink);justify-content:center}
.trust-bar span{display:flex;align-items:center;gap:6px}

/* ===== 27. PANCHANG TICKER ===== */
.panchang-ticker{background:var(--ink);border-top:1px solid var(--line);color:var(--cream)}
.panchang-inner{padding:12px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}
.panchang-live{display:flex;align-items:center;gap:8px;flex-shrink:0}
.panchang-live-label{color:var(--gold);font-weight:700;letter-spacing:0.1em;font-size:10.5px}
.panchang-items{display:flex;gap:28px;flex-wrap:wrap;color:var(--mute)}

/* ===== 28. ZODIAC GRID ===== */
.zodiac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(min-width:640px){.zodiac-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.zodiac-grid{grid-template-columns:repeat(6,1fr)}}
.zodiac-card{padding:16px;text-align:center;display:block;text-decoration:none;color:inherit}
.zodiac-orb{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;color:white}
.zodiac-orb-sm{width:48px;height:48px;font-size:22px}
.zodiac-orb-lg{width:96px;height:96px;font-size:48px}
.zodiac-name{font-family:var(--font-serif);font-size:15px;font-weight:600;color:var(--ink)}
.zodiac-hi{font-family:var(--font-devanagari);font-size:12px;color:var(--gold-deep);margin-top:2px}
.zodiac-dates{font-size:10px;color:var(--mute-ink);margin-top:4px}
.featured-card{padding:24px;margin-top:32px;display:flex;flex-direction:column;gap:24px}
@media(min-width:1024px){.featured-card{flex-direction:row;padding:32px}}
.featured-title{font-family:var(--font-serif);font-size:24px;font-weight:600;margin:0}
.featured-text{font-size:14.5px;line-height:1.65;color:#3a3a55;margin:8px 0 14px}
.lucky-row{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px}

/* ===== 29. SERVICES ===== */
.services-bg{background:var(--light-alt);border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink)}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.services-grid{grid-template-columns:repeat(4,1fr)}}
.service-card{padding:16px;display:flex;gap:12px;align-items:flex-start}
.service-name{font-size:14px;font-weight:700;color:var(--ink);margin:0}
.service-desc{font-size:12px;color:var(--mute-ink);margin:2px 0 0;line-height:1.4}

/* ===== 30. ASTROLOGERS ===== */
.astrologers-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.astrologers-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.astrologers-grid{grid-template-columns:repeat(3,1fr)}}
.astrologer-card{padding:20px}
.astrologer-row{display:flex;gap:16px;align-items:flex-start}
.astrologer-avatar-wrap{position:relative;flex-shrink:0}
.astrologer-name{font-family:var(--font-serif);font-size:17px;font-weight:600;margin:0;display:flex;align-items:center;gap:6px}
.astrologer-spec{font-size:12px;color:var(--gold-deep);font-weight:600;margin:4px 0}
.astrologer-info{font-size:11.5px;color:var(--mute-ink);line-height:1.5}
.astrologer-rating{display:flex;align-items:center;gap:4px;margin-top:4px}
.astrologer-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-ink)}
.astrologer-rate{font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--gold-deep);line-height:1}
.astrologer-rate-unit{font-size:12px;color:var(--mute-ink);font-weight:400}
.free-min{font-size:10px;color:var(--success-light);margin-top:2px;font-weight:600}

/* ===== 31. AI MARQUEE ===== */
.ai-section{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);color:var(--cream);border-top:1px solid var(--line);overflow:hidden}
.ai-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(201,162,76,0.13);border:1px solid var(--line);font-size:10.5px;letter-spacing:0.12em;color:var(--gold);font-weight:700;margin-bottom:12px}
.marquee-wrap{mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent)}
.marquee-row{display:flex;gap:16px;width:max-content}
.ai-card{width:220px;flex-shrink:0;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:14px;padding:16px}

/* ===== 32. REPORTS ===== */
.reports-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:1024px){.reports-grid{grid-template-columns:repeat(3,1fr)}}
.report-card{overflow:hidden;padding:0;text-decoration:none;color:inherit;display:block}
.report-cover{height:140px;position:relative;background:linear-gradient(135deg,var(--ink) 0%,var(--bg-alt) 100%);display:flex;align-items:center;justify-content:center}
.report-tag{position:absolute;top:10px;left:10px;background:var(--saffron);color:white;font-size:10px;font-weight:700;letter-spacing:0.06em;padding:3px 8px;border-radius:4px}
.report-body{padding:16px}
.report-name{font-family:var(--font-serif);font-size:16px;font-weight:600;margin:0 0 10px;line-height:1.3}
.report-price{font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--gold-deep)}
.report-old{font-size:12px;color:var(--mute-ink);text-decoration:line-through;margin-left:6px}

/* ===== 33. SHOP ===== */
.shop-bg{background:var(--light-alt);border-top:1px solid var(--line-ink)}
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.shop-grid{grid-template-columns:repeat(6,1fr)}}
.shop-card{overflow:hidden;padding:0;text-decoration:none;color:inherit;display:block}
.shop-image{aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center}
.shop-cat-tag{position:absolute;top:8px;left:8px;background:white;color:var(--ink);font-size:9.5px;font-weight:700;letter-spacing:0.08em;padding:2px 6px;border-radius:3px}
.shop-body{padding:12px}
.shop-name{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 6px;line-height:1.3}
.shop-bottom{display:flex;align-items:center;justify-content:space-between}
.shop-price{font-family:var(--font-serif);font-size:15px;font-weight:600;color:var(--gold-deep)}
.shop-cart-btn{background:var(--ink);color:white;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none}

/* ===== 34. 2026 BANNER ===== */
.banner-2026{background:linear-gradient(135deg,var(--bg) 0%,var(--bg-alt) 100%);border-radius:20px;padding:40px;position:relative;overflow:hidden;color:var(--cream)}
.banner-grid{display:grid;gap:32px;align-items:center;position:relative}
@media(min-width:1024px){.banner-grid{grid-template-columns:repeat(2,1fr)}}
.banner-title{font-family:var(--font-serif);font-size:clamp(32px,4vw,48px);font-weight:500;letter-spacing:-0.02em;line-height:1.05;margin:10px 0 16px}
.banner-text{font-size:15px;color:var(--mute);line-height:1.6;margin-bottom:22px;max-width:480px}
.banner-buttons{display:flex;gap:12px;flex-wrap:wrap}
.banner-chart-wrap{position:relative;width:280px;height:280px;margin:0 auto}
.banner-chart-year{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-serif);font-size:56px;font-weight:500;color:var(--gold-light);letter-spacing:-0.02em}

/* ===== 35. TESTIMONIALS ===== */
.testimonial-card{padding:24px}
.stars-row{display:flex;gap:2px;margin-bottom:12px;color:var(--gold)}
.testimonial-text{font-size:14px;line-height:1.6;color:#3a3a55;margin:0 0 16px}
.testimonial-bottom{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line-ink)}

/* ===== 36. FOOTER ===== */
.footer{background:var(--ink);color:var(--cream);padding:60px 0 30px}
.footer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-bottom:48px}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(6,1fr)}}
.footer-brand{grid-column:span 2}
.footer-desc{font-size:13.5px;color:var(--mute);line-height:1.6;margin:16px 0;max-width:340px}
.footer-social{display:flex;gap:12px;margin-bottom:16px}
.social-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.footer-copyright{font-size:11px;color:var(--mute)}
.footer-col-title{font-size:11px;letter-spacing:0.16em;color:var(--gold);font-weight:700;margin-bottom:14px;text-transform:uppercase}
.footer-list li{margin-bottom:8px}
.footer-list a{font-size:12.5px;color:var(--cream);opacity:0.75}
.footer-list a:hover{opacity:1;color:var(--gold)}
.footer-popular{border-top:1px solid var(--line);padding-top:20px;font-size:11px;color:var(--mute);line-height:1.8}
.footer-popular strong{color:var(--gold);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase}

/* ===== 37. AUTH PAGES (Signup/Login) ===== */
.auth-section{padding:60px 0;background:var(--light-alt);min-height:70vh}
.auth-wrap{max-width:480px;margin:0 auto}
.auth-header{text-align:center;margin-bottom:32px}
.auth-header-logo{margin-bottom:16px}
.auth-title{font-family:var(--font-serif);font-size:28px;font-weight:600;margin:0}
.auth-subtitle{color:var(--mute-ink);margin-top:6px}
.auth-card{padding:32px}
.auth-footer{text-align:center;margin-top:24px;font-size:14px;color:var(--mute-ink)}
.auth-footer a{color:var(--gold-deep);font-weight:600;margin-left:4px}
.otp-debug{padding:12px;background:#fff3cd;border:1px solid #ffc107;border-radius:8px;margin-bottom:20px;text-align:center}
.otp-debug-label{font-size:11px;color:#856404;font-weight:700;letter-spacing:0.1em}
.otp-debug-code{font-family:var(--font-serif);font-size:28px;font-weight:700;color:#856404;letter-spacing:0.3em}
.otp-debug-hint{font-size:10px;color:#856404;margin-top:4px}
.btn-back{background:none;border:none;color:var(--gold-deep);font-size:13px;font-weight:600;padding:0;margin-bottom:16px;cursor:pointer}
.terms-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:20px;cursor:pointer;font-size:12px;color:var(--mute-ink)}
.terms-row input{margin-top:2px}
.terms-row a{color:var(--gold-deep);font-weight:600}

/* ===== 38. DASHBOARD ===== */
.dashboard-header{background:linear-gradient(135deg,var(--bg) 0%,var(--bg-alt) 100%);color:var(--cream);padding:40px 0}
.dashboard-header-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.welcome-label{font-size:12px;letter-spacing:0.2em;color:var(--gold);font-weight:700}
.user-name{font-family:var(--font-serif);font-size:28px;font-weight:600;margin:4px 0}
.user-info{font-size:13px;color:var(--mute)}
.stat-card{padding:20px}
.stat-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.stat-label{font-size:11px;letter-spacing:0.1em;color:var(--mute-ink);font-weight:600}
.stat-value{font-family:var(--font-serif);font-size:26px;font-weight:600;color:var(--gold-deep)}
.stat-link{font-size:12px;color:var(--gold-deep);font-weight:600}
.action-card{padding:16px;display:flex;align-items:center;gap:12px;text-decoration:none}
.profile-mini{padding:16px}
.profile-mini-row{display:flex;align-items:flex-start;gap:12px}
.profile-mini-name{font-weight:600;font-size:14px}
.profile-mini-info{font-size:11.5px;color:var(--mute-ink);line-height:1.5;margin-top:2px}
.txn-row{padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
.txn-row + .txn-row{border-top:1px solid var(--line-ink)}
.txn-name{font-weight:600;font-size:13px}
.txn-date{font-size:11px;color:var(--mute-ink)}
.txn-amount{font-weight:700}
.txn-credit{color:var(--success)} .txn-debit{color:var(--maroon)}
.empty-state{padding:40px 20px;text-align:center}
.empty-state-icon{font-size:48px;margin-bottom:12px}
.empty-state-title{font-family:var(--font-serif);font-size:18px;font-weight:600;margin:0 0 6px}
.empty-state-text{font-size:13px;color:var(--mute-ink);margin:0 0 16px}

/* ===== 39. PANCHANG PAGE ===== */
.panchang-card{padding:30px;max-width:1000px;margin:0 auto}
.panchang-stat{text-align:center;padding:16px;background:var(--light-alt);border-radius:12px}
.panchang-stat-label{font-size:11px;color:var(--gold-deep);font-weight:700;letter-spacing:0.15em;margin-bottom:8px}
.panchang-stat-value{font-family:var(--font-serif);font-size:18px;font-weight:600}
.muhurat-list{padding:0;overflow:hidden}
.muhurat-row{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}
.muhurat-row + .muhurat-row{border-top:1px solid var(--line-ink)}
.muhurat-name{font-weight:600;color:var(--ink)}
.muhurat-status{font-size:11px;font-weight:600;letter-spacing:0.1em}
.muhurat-status-shubh{color:var(--success)}
.muhurat-status-ashubh{color:var(--maroon)}
.muhurat-time{color:var(--gold-deep);font-weight:600;font-family:var(--font-serif)}
.muhurat-time-ashubh{color:var(--maroon);font-weight:600;font-family:var(--font-serif)}
.sm-card{text-align:center;padding:24px 16px}
.sm-icon{font-size:36px;margin-bottom:8px}
.sm-label{font-size:12px;letter-spacing:0.1em;color:var(--mute-ink);font-weight:600;text-transform:uppercase}
.sm-time{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--gold-deep);margin-top:4px}

/* ===== 40. MATCHING PAGE ===== */
.match-result{padding:32px;margin-top:32px}
.match-score-wrap{text-align:center;margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--line-ink)}
.match-score-emoji{font-size:48px;margin-bottom:8px}
.match-score-value{font-family:var(--font-serif);font-size:56px;font-weight:700;line-height:1}
.match-score-fraction{color:var(--mute-ink);font-size:28px}
.match-score-label{font-size:14px;color:var(--mute-ink);margin-top:4px}
.match-status{font-family:var(--font-serif);font-size:26px;font-weight:600;margin:12px 0 0}
.koota-item{margin-bottom:16px}
.koota-bar-bg{height:8px;background:var(--light-alt);border-radius:4px;overflow:hidden}
.koota-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-light),var(--gold));border-radius:4px}
.manglik-box{margin-top:32px;padding:20px;background:var(--light-alt);border-radius:12px}
.koota-card{text-align:center;padding:20px}
.koota-points{font-family:var(--font-serif);font-size:30px;font-weight:600;color:var(--gold-deep)}
.koota-points-label{font-size:11px;color:var(--mute-ink);letter-spacing:0.1em;font-weight:600}
.koota-name{font-family:var(--font-serif);font-size:17px;font-weight:600;margin:10px 0 4px}
.koota-meaning{font-size:12px;color:var(--mute-ink);margin:0}
.total-score-box{display:inline-block;padding:16px 32px;background:white;border:2px solid var(--gold);border-radius:16px}
.score-card{text-align:center;padding:24px}
.score-emoji{font-size:32px}
.score-range{font-family:var(--font-serif);font-size:22px;font-weight:600;margin:8px 0 4px}
.score-status{margin:10px 0 0;font-size:15px;font-weight:700}

/* ===== 41. KUNDLI PAGE ===== */
.feature-list{display:flex;flex-direction:column;gap:16px}
.feature-item{display:flex;gap:16px;align-items:flex-start}
.feature-title{margin:0;font-size:15px;font-weight:700}
.feature-desc{margin:4px 0 0;font-size:13px;color:var(--mute-ink)}

/* ===== 42. RESPONSIVE ===== */
@media(max-width:1023px){
  section{padding:40px 0}
  .section-header{flex-direction:column;align-items:flex-start}
  .hero-inner{padding:32px 0 40px}
}
/* ================================================
   MoonMitra - Quick Fixes (Append to style.css)
   ================================================ */

/* ===== FONT FAMILY UPDATE ===== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

html, body, .input, button, .btn, p, span, div, a, li, td, th {
  font-family: 'DM Sans', 'Roboto', system-ui, sans-serif !important;
}

/* Banner/Heading fonts keep serif */
h1, h2, h3, h4, h5, h6,
.serif, .hero-title, .section-title, .featured-title, .banner-title,
.form-title, .logo-text, .auth-title, .stat-value, .user-name,
.zodiac-name, .astrologer-name, .report-name, .featured-card *.serif,
.match-status, .panchang-stat-value, .sm-time, .koota-points, .koota-name,
.match-score-value, .empty-state-title, .report-price, .shop-price,
.astrologer-rate, .hero-stat-n, .banner-chart-year {
  font-family: 'Fraunces', Georgia, serif !important;
}

/* Devanagari keeps its font */
.devanagari, .lang-sc, .zodiac-hi {
  font-family: 'Tiro Devanagari Hindi', serif !important;
}

/* ===== FONT SIZE - BIGGER ===== */
html, body { font-size: 16px; }

.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-base { font-size: 15px; }
.text-md { font-size: 16px; }
.text-lg { font-size: 17px; }
.text-xl { font-size: 19px; }

.input { font-size: 15px; padding: 12px 14px; }
.label { font-size: 13px; }
.btn { font-size: 14px; padding: 11px 20px; }
.btn-lg { font-size: 16px; padding: 15px 30px; }
.btn-sm { font-size: 12px; padding: 7px 14px; }

.nav-link { font-size: 14.5px; }
.hero-desc { font-size: 17px; }
.featured-text { font-size: 16px; line-height: 1.7; }
.service-name { font-size: 15px; }
.service-desc { font-size: 13px; }
.testimonial-text { font-size: 15px; }
.section-eyebrow { font-size: 12px; }
.lang-list a, .lang-label { font-size: 13px; }

/* ===== BURGER MENU FIX ===== */
.mobile-nav {
  display: none !important;
  padding: 20px;
  background: white;
  border-top: 1px solid var(--line-ink);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  z-index: 100;
  max-height: 80vh;
  overflow-y: auto;
}
.mobile-nav.open { display: block !important; }

.mobile-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.mobile-nav-grid a {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 12px;
  background: var(--light-alt);
  border-radius: 8px;
  text-align: center;
}
.mobile-nav-grid a:hover { background: var(--gold); color: white; }

/* Mobile nav auth section */
.mobile-nav > div:first-child {
  padding: 16px;
  background: var(--light-alt);
  border-radius: 12px;
  margin-bottom: 16px;
}

/* Hide mobile nav on desktop */
@media (min-width: 1024px) {
  .mobile-nav { display: none !important; }
}

/* ===== HERO FORM - DATE/TIME/PLACE STACK ===== */
.form-card .grid.grid-3 {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

@media (min-width: 768px) {
  .form-card .grid.grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Place takes full row */
  .form-card .grid.grid-3 > div:last-child {
    grid-column: 1 / -1;
  }
}

/* ===== MODERN DATE/TIME INPUTS ===== */
input[type="date"],
input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  padding: 14px 16px !important;
  font-size: 15px !important;
  background: white;
  border: 1.5px solid var(--line-ink);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  color: var(--ink);
  font-weight: 500;
  min-height: 48px;
  transition: all 0.2s ease;
}

input[type="date"]:hover,
input[type="time"]:hover {
  border-color: var(--gold-light);
}

input[type="date"]:focus,
input[type="time"]:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 76, 0.15);
}

/* Custom calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator {
  background: var(--gold);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  filter: invert(1) brightness(2);
  opacity: 0.9;
  transition: all 0.2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.05);
}

input[type="time"]::-webkit-calendar-picker-indicator {
  background: var(--gold);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  filter: invert(1) brightness(2);
  opacity: 0.9;
}

/* Firefox date input */
input[type="date"]::-moz-calendar-picker-indicator {
  background: var(--gold);
  border-radius: 6px;
}

/* ===== HOMEPAGE FORM TWEAKS ===== */
.form-card { padding: 28px; }
.form-title { font-size: 22px; margin-bottom: 6px; }
.form-subtitle { font-size: 14px; margin-bottom: 20px; }

/* Better mobile spacing */
@media (max-width: 767px) {
  .form-card { padding: 22px; }
  .hero-inner { padding: 30px 0 40px; }
  .hero-title { font-size: 38px !important; }
  .hero-desc { font-size: 15px; }
  .container { padding: 0 14px; }
}
/* ================================================
   MOBILE BURGER MENU - PROFESSIONAL REDESIGN
   Slide-in drawer with sections
   ================================================ */

/* Hide old mobile-nav */
.mobile-nav { display: none !important; }

/* ===== HAMBURGER ICON ===== */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--light-alt);
  border-radius: 10px;
  border: 1px solid var(--line-ink);
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.menu-toggle:hover {
  background: var(--gold);
  border-color: var(--gold);
}
.menu-toggle:hover svg { color: white; }
.menu-toggle svg { color: var(--ink); transition: color 0.2s; }

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

/* ===== OVERLAY ===== */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 15, 46, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.mobile-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ===== DRAWER ===== */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88%;
  max-width: 360px;
  background: white;
  box-shadow: -10px 0 40px rgba(0,0,0,0.15);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-drawer.open {
  transform: translateX(0);
}

/* ===== DRAWER HEADER ===== */
.drawer-header {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-alt) 100%);
  color: var(--cream);
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.drawer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drawer-logo-text {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--cream);
}
.drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(201,162,76,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--cream);
}
.drawer-close:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: white;
  transform: rotate(90deg);
}

/* ===== USER CARD (logged in) ===== */
.drawer-user-card {
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(201,162,76,0.08), transparent);
  border-bottom: 1px solid var(--line-ink);
  display: flex;
  align-items: center;
  gap: 14px;
}
.drawer-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}
.drawer-user-info { flex: 1; min-width: 0; }
.drawer-user-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-user-wallet {
  font-size: 12px;
  color: var(--gold-deep);
  font-weight: 600;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ===== AUTH BUTTONS (logged out) ===== */
.drawer-auth-buttons {
  padding: 18px 20px;
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--line-ink);
}
.drawer-auth-buttons .btn { flex: 1; padding: 12px; font-size: 14px; }

/* ===== SCROLLABLE CONTENT ===== */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== SECTION TITLES ===== */
.drawer-section {
  padding: 18px 20px 10px;
}
.drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold-deep);
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* ===== NAV ITEMS ===== */
.drawer-nav {
  display: flex;
  flex-direction: column;
}
.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
  border-left: 3px solid transparent;
  position: relative;
}
.drawer-nav-item:hover,
.drawer-nav-item:active {
  background: var(--light-alt);
  border-left-color: var(--gold);
  color: var(--gold-deep);
}
.drawer-nav-item .nav-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(201,162,76,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
  flex-shrink: 0;
  transition: all 0.2s;
}
.drawer-nav-item:hover .nav-icon {
  background: var(--gold);
  color: white;
}
.drawer-nav-item .nav-arrow {
  margin-left: auto;
  color: var(--mute-ink);
  opacity: 0.5;
}
.drawer-nav-item-badge {
  background: var(--gold);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
}

/* ===== DIVIDER ===== */
.drawer-divider {
  height: 1px;
  background: var(--line-ink);
  margin: 8px 20px;
}

/* ===== LANGUAGE PICKER ===== */
.drawer-langs {
  padding: 12px 20px 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.drawer-lang-btn {
  padding: 8px 6px;
  background: var(--light-alt);
  border: 1px solid var(--line-ink);
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  transition: all 0.2s;
}
.drawer-lang-btn:hover {
  background: var(--gold);
  color: white;
  border-color: var(--gold);
}
.drawer-lang-btn .lang-script {
  font-family: var(--font-devanagari);
  color: var(--gold-deep);
  margin-right: 3px;
}
.drawer-lang-btn:hover .lang-script { color: white; }

/* ===== CTA FOOTER ===== */
.drawer-cta {
  padding: 18px 20px;
  background: var(--light-alt);
  border-top: 1px solid var(--line-ink);
  flex-shrink: 0;
}
.drawer-cta .btn {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.drawer-cta-hint {
  text-align: center;
  font-size: 11px;
  color: var(--mute-ink);
  margin-top: 10px;
  font-weight: 500;
}

/* ===== BODY LOCK WHEN OPEN ===== */
body.drawer-open {
  overflow: hidden;
}

/* Hide scrollbar in drawer body but keep functional */
.drawer-body::-webkit-scrollbar { width: 4px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb {
  background: rgba(201,162,76,0.3);
  border-radius: 2px;
}