/* ============================================================ AstroMart theme system — applied via 'cosmic' is the default :root palette in style.css. Each theme overrides the variable layer; a few hardcoded component gradients get per-theme overrides below. ============================================================ */ /* ---------- Saffron Dusk — warm dark, saffron + gold ---------- */ html[data-theme="saffron"]{ color-scheme:dark; --cy:#ff9a3d; --cy-deep:#e8640c; --cy-rgb:255,154,61; --cy-text:#ffc490; --saffron:#ff9a3d; --saffron-dark:#e8640c; --gold:#f2c14e; --gold-light:rgba(242,193,78,.15); --ink:#fdf3e7; --muted:#c9a98c; --bg:#120903; --bg-soft:#1c0f07; --card:#1e1108; --card-2:#281709; --line:rgba(255,190,120,.14); --field-rgb:38,21,9; --bg-deep:#0d0603; --on-accent:#2a1503; --ink-2:#e0c4a6; --veil:rgba(255,190,120,.07); --veil-soft:rgba(255,190,120,.03); --nav-bg:rgba(24,11,4,.85); --shadow:0 6px 24px rgba(0,0,0,.5); --shadow-lg:0 16px 44px rgba(0,0,0,.6),0 0 0 1px rgba(var(--cy-rgb),.08); } html[data-theme="saffron"] body{background: linear-gradient(180deg, rgba(255,140,40,0) 30%, rgba(255,140,40,.045) 52%, rgba(255,140,40,.055) 70%, rgba(255,140,40,.03) 100%), var(--bg)} html[data-theme="saffron"] .topbar{background:linear-gradient(90deg,#3d1c04,#5a2a06);color:#ffd9ad} html[data-theme="saffron"] .donate-band{background:linear-gradient(120deg,#3a1c05,#6b3410 55%,#241003); border-color:rgba(255,154,61,.22)} html[data-theme="saffron"] .coupon-card{background:linear-gradient(135deg,rgba(255,154,61,.08),rgba(232,100,12,.04))} html[data-theme="saffron"] .btn-primary{background:linear-gradient(to top, #ffd9a8 1px, #ffc98f 2px, #ffb96f 3px, #ffab55 4px, #f8933a 5px, #e87e22 6px, #d96f16 7px, #c76413 8px, #b05510 9px, #96440c 10px, #7d390b 12px, #6b2f0a 13px, #572608 14px, #47200a 16px, #331707 18px, #271208 20px, #1d0d07 24px, #160a06 30px, #130904 34px, #130904 100%); box-shadow:inset 0 3px 3px -2px rgba(255,220,170,.18), inset 1px 0 0 rgba(255,255,255,.10),inset -1px 0 0 rgba(255,255,255,.10), 0 1px 0 rgba(255,190,120,.35),0 0 8px rgba(255,150,50,.14), 0 2px 5px -3px rgba(255,160,70,.5)} html[data-theme="saffron"] .btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,230,190,.55), inset 1px 0 0 rgba(255,200,140,.3),inset -1px 0 0 rgba(255,200,140,.3), 0 6px 22px rgba(230,120,30,.45)} html[data-theme="saffron"] .btn-gold{background:linear-gradient(135deg,#f2c14e,#d99a1e);color:#2a1503} html[data-theme="saffron"] .nav-search button{background:linear-gradient(135deg,var(--cy),var(--cy-deep));color:#2a1503} /* ---------- Ivory Light — white bg, saffron accents ---------- */ html[data-theme="ivory"]{ color-scheme:light; --cy:#e8640c; --cy-deep:#c2500a; --cy-rgb:232,100,12; --cy-text:#c2500a; --saffron:#e8640c; --saffron-dark:#c2500a; --gold:#b8860b; --gold-light:rgba(184,134,11,.14); --ink:#2b1d0e; --muted:#8a7a66; --bg:#fdf9f3; --bg-soft:#f7f0e4; --card:#ffffff; --card-2:#faf3e8; --line:rgba(60,40,15,.12); --field-rgb:255,255,255; --bg-deep:#f7f0e4; --on-accent:#fff; --ink-2:#6b5d4a; --veil:rgba(60,40,15,.05); --veil-soft:rgba(60,40,15,.025); --nav-bg:rgba(253,249,243,.88); --shadow:0 4px 18px rgba(90,60,20,.10); --shadow-lg:0 16px 40px rgba(90,60,20,.14),0 0 0 1px rgba(232,100,12,.10); } html[data-theme="ivory"] body{background:var(--bg)} html[data-theme="ivory"] body::before{display:none} html[data-theme="ivory"] .topbar{background:linear-gradient(90deg,#e8640c,#c2500a);color:#fff3e4} html[data-theme="ivory"] .topbar a{color:#fff3e4} html[data-theme="ivory"] .navbar{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)} html[data-theme="ivory"] .nav-search input{background:#fff;border-color:var(--line);color:var(--ink)} html[data-theme="ivory"] .search-suggest,.account-dropdown{background:#fff} html[data-theme="ivory"] .search-suggest a{border-bottom-color:#f0e6d6} html[data-theme="ivory"] .drawer{background:#fff;color:var(--ink)} html[data-theme="ivory"] .mobile-nav{background:#fff;border-top:1px solid var(--line)} html[data-theme="ivory"] .btn-primary{background:linear-gradient(135deg,#ff8a2a,#e8640c);color:#fff; box-shadow:0 3px 12px rgba(232,100,12,.30)} html[data-theme="ivory"] .btn-primary:hover{box-shadow:0 6px 20px rgba(232,100,12,.40)} html[data-theme="ivory"] .btn-outline{border-color:rgba(232,100,12,.5);color:#c2500a} html[data-theme="ivory"] .btn-outline:hover{background:rgba(232,100,12,.08);color:#a3440a} html[data-theme="ivory"] .btn-gold{background:linear-gradient(135deg,#f2c14e,#d99a1e);color:#2a1503} html[data-theme="ivory"] .btn-dark{background:var(--card-2);color:var(--ink)} html[data-theme="ivory"] .nav-search button{background:linear-gradient(135deg,#ff8a2a,#e8640c);color:#fff} html[data-theme="ivory"] .nav-icon .count{background:var(--cy);color:#fff} html[data-theme="ivory"] .donate-band{background:linear-gradient(120deg,#fff4e6,#ffe3c2 55%,#fff0dd); border-color:rgba(232,100,12,.25);color:#5a2c08} html[data-theme="ivory"] .donate-band h2,html[data-theme="ivory"] .donate-band p, html[data-theme="ivory"] .donate-band span{color:#5a2c08} html[data-theme="ivory"] .donate-band .progress{background:rgba(184,98,14,.18)!important} html[data-theme="ivory"] .donate-band .progress i{background:linear-gradient(90deg,#f28c28,#d96f16)!important} html[data-theme="ivory"] .price,html[data-theme="ivory"] .pd-price{color:var(--ink)} html[data-theme="ivory"] .btn-outline:hover{color:#a3440a} html[data-theme="ivory"] .toast{color:var(--ink)} html[data-theme="ivory"] .footer{background:#f7f0e4;color:var(--muted)} html[data-theme="ivory"] .footer h4{color:var(--ink)} html[data-theme="ivory"] .product-card,.cat-tile,.puja-card,.temple-card,.form-card,.coupon-card{ box-shadow:0 2px 10px rgba(90,60,20,.06)} html[data-theme="ivory"] .alert-info{background:rgba(232,100,12,.08);color:#a3440a;border-color:rgba(232,100,12,.25)} html[data-theme="ivory"] .badge-saffron{background:rgba(232,100,12,.10);color:#c2500a} html[data-theme="ivory"] .checkout-steps span.on{background:rgba(232,100,12,.10);color:#c2500a} html[data-theme="ivory"] .attr-chips button.on,.amount-chips button.on{color:#c2500a} html[data-theme="ivory"] select.form-control option{background:#fff;color:var(--ink)} html[data-theme="ivory"] .modal{background:#fff} html[data-theme="ivory"] .otp-inputs input{background:#fff} /* Ivory hero — white stage, dark type, saffron accents */ html[data-theme="ivory"] .vx-stage{background:#fdf9f1} html[data-theme="ivory"] .vx-bg{background: linear-gradient(180deg, rgba(232,140,40,0) 38%, rgba(232,140,40,.05) 54%, rgba(232,140,40,.06) 68%, rgba(232,140,40,.035) 100%), #fdf9f1} html[data-theme="ivory"] .vx-stars{display:none} html[data-theme="ivory"] .vx-h1{color:#241708;text-shadow:0 0 30px rgba(232,140,40,.16)} html[data-theme="ivory"] .vx-sub{color:#6b5d4a} html[data-theme="ivory"] .vx-sub b{color:#241708} html[data-theme="ivory"] .vx-badge{border-color:rgba(60,40,15,.14); background:rgba(255,255,255,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px rgba(120,80,30,.10)} html[data-theme="ivory"] .vx-badge b{color:#3d2a12} html[data-theme="ivory"] .vx-badge i{background:linear-gradient(to top, #ffcf9a 0px, #ffb678 2px, #ff9d4e 4px, #f3862a 6px, #e8710f 8px, #d9680c 10px, #c45e0a 12px, #a94f09 14px, #8f420a 16px, #743608 19px, #5c2c08 23px, #45210a 29px)} html[data-theme="ivory"] .vx-btn{background:linear-gradient(to top, #ffd9a8 1px, #ffc98f 2px, #ffb96f 3px, #ffab55 4px, #f8933a 5px, #e87e22 6px, #d96f16 7px, #c76413 8px, #b05510 9px, #96440c 10px, #7d390b 12px, #6b2f0a 13px, #572608 14px, #47200a 16px, #331707 18px, #271208 20px, #1d0d07 24px, #160a06 30px, #130904 34px, #130904 100%); box-shadow:inset 0 3px 3px -2px rgba(255,220,170,.18), inset 1px 0 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,190,120,.4),0 0 8px rgba(255,150,50,.16), 0 2px 6px -3px rgba(230,120,30,.5)} html[data-theme="ivory"] .vx-btn:hover{box-shadow:inset 0 1px 0 rgba(255,230,190,.6), inset 1px 0 0 rgba(255,200,140,.35),inset -1px 0 0 rgba(255,200,140,.35), 0 6px 22px rgba(230,120,30,.45)} html[data-theme="ivory"] .vx-card{box-shadow:0 24px 46px rgba(90,55,15,.28),0 3px 8px rgba(90,55,15,.20)} html[data-theme="ivory"] .vx-browser{box-shadow:0 -14px 40px rgba(90,55,15,.22)} /* ---------- Royal Maroon — deep maroon + gold ---------- */ html[data-theme="royal"]{ color-scheme:dark; --cy:#f0b64c; --cy-deep:#c8891f; --cy-rgb:240,182,76; --cy-text:#f7d79a; --saffron:#f0b64c; --saffron-dark:#c8891f; --gold:#f2c14e; --gold-light:rgba(242,193,78,.16); --ink:#f9eef0; --muted:#c4a5ab; --bg:#140408; --bg-soft:#1e0810; --card:#210a12; --card-2:#2c0f1a; --line:rgba(240,182,76,.14); --field-rgb:42,14,24; --bg-deep:#0e0308; --on-accent:#2a1206; --ink-2:#e3c3c9; --veil:rgba(240,182,76,.06); --veil-soft:rgba(240,182,76,.025); --nav-bg:rgba(22,5,11,.85); --shadow:0 6px 24px rgba(0,0,0,.5); --shadow-lg:0 16px 44px rgba(0,0,0,.6),0 0 0 1px rgba(var(--cy-rgb),.08); } html[data-theme="royal"] body{background: linear-gradient(180deg, rgba(200,120,60,0) 30%, rgba(200,120,60,.04) 52%, rgba(200,120,60,.05) 70%, rgba(200,120,60,.028) 100%), var(--bg)} html[data-theme="royal"] .topbar{background:linear-gradient(90deg,#4a0d1e,#6b1429);color:#f7d79a} html[data-theme="royal"] .donate-band{background:linear-gradient(120deg,#3a0d18,#5c1526 55%,#26060e); border-color:rgba(240,182,76,.22)} html[data-theme="royal"] .coupon-card{background:linear-gradient(135deg,rgba(240,182,76,.08),rgba(200,137,31,.04))} html[data-theme="royal"] .btn-primary{background:linear-gradient(to top, #f7dfa8 1px, #f2cf8f 2px, #eec178 3px, #e8b35f 4px, #dda24a 5px, #cf8f34 6px, #c18227 7px, #b17420 8px, #9c631c 9px, #865317 10px, #6f4413 12px, #5d3810 13px, #4c2d0d 14px, #3d240b 16px, #2c1a09 18px, #221408 20px, #190e07 24px, #120a05 30px, #0f0805 34px, #0f0805 100%); box-shadow:inset 0 3px 3px -2px rgba(255,230,180,.18), inset 1px 0 0 rgba(255,255,255,.10),inset -1px 0 0 rgba(255,255,255,.10), 0 1px 0 rgba(240,190,110,.35),0 0 8px rgba(220,160,70,.14), 0 2px 5px -3px rgba(240,180,90,.5)} html[data-theme="royal"] .btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,235,195,.55), inset 1px 0 0 rgba(245,205,140,.3),inset -1px 0 0 rgba(245,205,140,.3), 0 6px 22px rgba(200,140,40,.45)} html[data-theme="royal"] .btn-gold{background:linear-gradient(135deg,#f2c14e,#c8891f);color:#2a1206} html[data-theme="royal"] .nav-search button{background:linear-gradient(135deg,var(--cy),var(--cy-deep));color:#2a1206} html[data-theme="royal"] .nav-icon .count{color:#2a1206} /* ---------- Theme picker (navbar + drawer) ---------- */ .theme-menu{position:relative} .theme-btn{background:none;border:0;color:inherit;cursor:pointer;font:inherit; display:flex;flex-direction:column;align-items:center;gap:2px;padding:0} .theme-dropdown{position:absolute;right:0;top:110%;background:var(--card);border:1px solid var(--line); border-radius:12px;min-width:170px;box-shadow:var(--shadow-lg);display:none;z-index:70;padding:8px} .theme-menu.open .theme-dropdown,.theme-menu:hover .theme-dropdown{display:block} .theme-dropdown button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px; border:0;background:none;color:var(--ink);font-size:13.5px;border-radius:8px;cursor:pointer;text-align:left} .theme-dropdown button:hover{background:rgba(var(--cy-rgb),.10)} .theme-dropdown button.on{background:rgba(var(--cy-rgb),.14);font-weight:600} .theme-dot{width:16px;height:16px;border-radius:50%;flex:0 0 16px;border:2px solid rgba(255,255,255,.25)} .theme-dot[data-t="cosmic"]{background:linear-gradient(135deg,#0a86d8,#35d8ff)} .theme-dot[data-t="saffron"]{background:linear-gradient(135deg,#e8640c,#ffb257)} .theme-dot[data-t="ivory"]{background:linear-gradient(135deg,#fdf9f3,#e8a05c);border-color:#d9c9b3} .theme-dot[data-t="royal"]{background:linear-gradient(135deg,#5c1526,#f0b64c)} .drawer .theme-row{display:flex;gap:8px;padding:10px 0;flex-wrap:wrap} .drawer .theme-row button{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:20px; border:1px solid var(--line);background:var(--card-2);color:var(--ink);font-size:12.5px;cursor:pointer} .drawer .theme-row button.on{border-color:var(--cy);font-weight:600}