/* =====================================================================
   AADHAYA Order App — iOS "LIQUID GLASS" layer  (glass.css v1)
   ui.css ke baad load hota hai. Sirf look badalta hai — koi logic nahi.
   Hatana ho to: index.html se glass.css aur glass.js ki 2 lines hata do.
   Product photos ka background white hi rehta hai (brand rule).
   ===================================================================== */
:root{
 --g-fill:rgba(255,255,255,.52);
 --g-fill2:rgba(255,255,255,.72);
 --g-edge:rgba(255,255,255,.85);
 --g-blur:saturate(190%) blur(22px);
 --g-blur-s:saturate(170%) blur(14px);
 --g-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgba(255,255,255,.5);
 --g-sh:0 10px 30px -14px rgba(60,48,20,.28),0 2px 6px -2px rgba(60,48,20,.10);
 --g-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- ambient background (glass needs colour behind it) ---------- */
html{background:#F3F1EB!important}
body{background:transparent!important}
#gAmb{position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#F7F5EF 0%,#EFEDE6 100%)}
#gAmb i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;will-change:transform}
#gAmb i:nth-child(1){width:55vmax;height:55vmax;left:-5vmax;top:-8vmax;background:radial-gradient(circle,rgba(214,182,96,.55),rgba(214,182,96,0) 70%);animation:gDrift1 26s ease-in-out infinite alternate}
#gAmb i:nth-child(2){width:50vmax;height:50vmax;right:-12vmax;top:22vh;background:radial-gradient(circle,rgba(150,196,170,.45),rgba(150,196,170,0) 70%);animation:gDrift2 32s ease-in-out infinite alternate}
#gAmb i:nth-child(3){width:48vmax;height:48vmax;left:10vw;bottom:-14vmax;background:radial-gradient(circle,rgba(176,190,214,.45),rgba(176,190,214,0) 70%);animation:gDrift3 29s ease-in-out infinite alternate}
@keyframes gDrift1{to{transform:translate(18vw,22vh) scale(1.15)}}
@keyframes gDrift2{to{transform:translate(-22vw,-12vh) scale(.9)}}
@keyframes gDrift3{to{transform:translate(14vw,-20vh) scale(1.1)}}

/* ---------- shared glass material ---------- */
.g-glass,header,.u-lv,.u-tabbar,.sheet,.chip,.u-cat .u-ci,.pc,.u-btn.ghost,.u-lvt,header .search{
 background:var(--g-fill)!important;
 border:1px solid var(--g-edge)!important;
 box-shadow:var(--g-hi),var(--g-sh)!important;
}
/* only the big surfaces get real backdrop blur (fast on all phones) */
header,.u-lv,.u-tabbar,.sheet,.chip,header .search,.u-lvt{-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}

/* specular sheen — glass.js inserts <i class="g-spec"> ; moves with finger/mouse (--gx/--gy) */
.g-spec{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:radial-gradient(260px circle at var(--gx,25%) var(--gy,-20%),rgba(255,255,255,.75),rgba(255,255,255,0) 62%),
            linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 40%);
 opacity:.85;transition:opacity .3s}
header,.u-lv,.u-tabbar,.sheet{isolation:isolate}
.u-lv,.chip,.pc,.u-lvt,.u-btn.ghost{position:relative}

/* ---------- header ---------- */
header{border-width:0 0 1px!important;border-radius:0 0 22px 22px!important;transition:background .35s,box-shadow .35s,padding .3s}
header.g-scrolled{background:var(--g-fill2)!important}
header .search{border-radius:999px!important;background:rgba(255,255,255,.45)!important;box-shadow:inset 0 1px 2px rgba(60,48,20,.08),inset 0 0 0 .5px rgba(255,255,255,.7)!important}
header .search:focus-within{background:rgba(255,255,255,.85)!important;border-color:rgba(200,168,74,.6)!important;box-shadow:0 0 0 4px rgba(200,168,74,.15)!important}

/* ---------- chips ---------- */
.chip{border-radius:999px!important;color:var(--u-ink2)!important;transition:transform .35s var(--g-spring),background .25s,color .25s!important}
.chip.on{background:rgba(17,17,17,.82)!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -10px rgba(0,0,0,.5)!important}
.trust div{color:var(--u-ink2)!important}

/* ---------- live stock bar ---------- */
.u-lv{border-radius:24px!important;overflow:hidden}
.u-lvt{background:rgba(255,255,255,.42)!important;border-radius:16px!important;box-shadow:var(--g-hi),0 4px 12px -8px rgba(60,48,20,.25)!important}
.u-lvt:hover{background:rgba(255,255,255,.7)!important}
.u-lvbar{background:rgba(255,255,255,.5)}
.u-lvim{background:#fff!important;border-color:rgba(255,255,255,.9)!important;box-shadow:0 4px 10px -6px rgba(60,48,20,.35)}
.u-lvrow:hover{background:rgba(255,255,255,.45)!important}
.u-lvring .bg{stroke:rgba(255,255,255,.75)}

/* ---------- categories ---------- */
.u-cat .u-ci{border-radius:24px!important;padding:6px}
.u-cat .u-ci img{background:#fff;border-radius:18px;width:100%!important;height:100%!important;object-fit:contain;padding:8%}
.u-cat:active .u-ci{transform:scale(.94)}

/* ---------- product cards: glass frame, photo stays on white ---------- */
.pc{border-radius:22px!important;overflow:hidden;padding:6px!important;transition:transform .45s var(--g-spring),box-shadow .3s!important}
.pc .imw{border-radius:16px;border:0!important;background:#fff!important;box-shadow:0 1px 0 rgba(255,255,255,.9),0 6px 14px -10px rgba(60,48,20,.35)}
.pc .bd{padding:10px 8px 8px!important}
.pc:active{transform:scale(.97)}

/* ---------- bottom tab bar: floating glass capsule ---------- */
.u-tabbar{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;height:var(--u-tab)!important;padding-bottom:0!important;border-radius:999px!important;max-width:560px;margin:0 auto;overflow:visible}
body.u-tabs{padding-bottom:calc(var(--u-tab) + env(safe-area-inset-bottom) + 28px)!important}
.u-tab{z-index:1}
.u-tab.on:after{display:none!important}
.u-tab.on{color:var(--u-ink)!important}
#gLens{position:absolute;top:5px;bottom:5px;left:0;width:60px;border-radius:999px;z-index:-1;pointer-events:none;
 background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(255,255,255,.4),0 4px 14px -6px rgba(60,48,20,.35),0 0 0 .5px rgba(200,168,74,.35);
 transition:transform .55s var(--g-spring),width .55s var(--g-spring),opacity .3s}
#gLens.g-move{animation:gStretch .55s ease}
@keyframes gStretch{40%{filter:blur(.3px);box-shadow:inset 0 1px 0 #fff,0 6px 20px -6px rgba(200,168,74,.6),0 0 0 .5px rgba(200,168,74,.6)}}
.u-tab.u-mid .u-mi{border:1px solid rgba(255,255,255,.75)!important;background:linear-gradient(180deg,#DCC173 0%,#C8A84A 55%,#B8963A 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 4px rgba(120,90,20,.35),0 10px 22px -8px rgba(160,125,40,.85)!important;border-radius:50%!important;width:50px!important;height:50px!important;margin-top:-22px!important;transition:transform .4s var(--g-spring)}
.u-tab.u-mid:active .u-mi{transform:scale(.88)}
.u-tab .u-bdg{border-color:rgba(255,255,255,.9)!important}
@media(min-width:900px){.u-tabbar{display:none}}

/* ---------- sheets (product page, cart, quick order) ---------- */
.ov-bg{background:rgba(40,32,15,.18)!important;-webkit-backdrop-filter:blur(6px) saturate(140%);backdrop-filter:blur(6px) saturate(140%)}
.sheet{background:rgba(250,249,245,.78)!important;border-radius:28px 28px 0 0!important}
.sheet table,.sheet details{background:rgba(255,255,255,.6)!important}
.sheet tr:nth-child(odd) td{background:rgba(255,255,255,.55)!important}
.sheet tr:nth-child(even) td{background:rgba(255,255,255,.3)!important}
.sheet .opt{background:rgba(255,255,255,.55)!important;border-color:rgba(255,255,255,.9)!important;box-shadow:var(--g-hi),0 2px 6px -4px rgba(60,48,20,.3)!important;transition:transform .35s var(--g-spring)!important}
.sheet .opt:active{transform:scale(.93)}

/* ---------- buttons ---------- */
.btn,.u-btn.gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(120,90,20,.25),0 10px 22px -12px rgba(160,125,40,.9)!important;transition:transform .35s var(--g-spring),filter .2s!important}
.btn.wa{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 4px rgba(0,80,30,.25),0 10px 22px -12px rgba(20,140,70,.9)!important}
.btn:active,.u-btn:active{transform:scale(.95)!important}
.u-btn.ghost{border-radius:999px!important}
.toast,#toast{background:rgba(30,28,24,.72)!important;-webkit-backdrop-filter:var(--g-blur-s);backdrop-filter:var(--g-blur-s);border:1px solid rgba(255,255,255,.18);border-radius:999px!important}

/* tap light (glass.js adds .g-tap with --tx/--ty) */
.g-ripple{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;z-index:5;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);animation:gRip .6s ease-out forwards}
@keyframes gRip{to{transform:scale(22);opacity:0}}

/* phones without backdrop-filter → solid frosted fallback */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
 header,.u-lv,.u-tabbar,.sheet,.chip,header .search{background:rgba(255,255,255,.93)!important}
}
@media(prefers-reduced-motion:reduce){#gAmb i,#gLens,.g-ripple{animation:none!important;transition:none!important}}
@media(prefers-reduced-transparency:reduce){header,.u-lv,.u-tabbar,.sheet,.pc,.chip{background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}}