/* ============================================================================
   OSKART customer app — design tokens, dark mode and shared UI polish (v95 / C1)
   Loaded on every customer page (via pwa_head('customer')) AFTER the page CSS.
   Colours in pages use these tokens: --card --soft --bg --ink --muted --line --brand-text
   and --dk (0 = light, 1 = dark) for the colour-mix() status tints.
   ============================================================================ */
html[data-theme]{
  --brand:#5a2ee0;--brand-deep:#3f1cb0;--brand2:#8a4dff;--brand-text:#5a2ee0;
  --ink:#161327;--ink-soft:#5b566e;--muted:#6b6685;--muted2:#a9a3c0;
  --line:#eae7f4;--bg:#f4f2fb;--bg2:#e6e2f3;--card:#fff;--soft:#f3effe;--soft2:#faf8ff;
  --mint:#12b886;--accent:#ff7a4d;--accent-soft:#fff0e9;--bad:#e03131;--good:#0ca678;
  --shadow:0 10px 26px -18px rgba(40,20,110,.45);--shadow-lg:0 22px 50px -28px rgba(40,20,110,.55);
  --glass:rgba(255,255,255,.86);--overlay:rgba(20,15,45,.5);
  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;
  --dk:0;color-scheme:light;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans','Noto Sans Devanagari',sans-serif;
  --font-head:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans Devanagari',sans-serif;
}
html[data-theme=dark]{
  --brand:#6b45f0;--brand-deep:#4a26c9;--brand-text:#b3a0ff;
  --ink:#eeebf8;--ink-soft:#c5bfdc;--muted:#a49ebd;--muted2:#7d7796;
  --line:#2f2946;--bg:#0f0d19;--bg2:#0a0912;--card:#1a1728;--soft:#251f3b;--soft2:#1f1a31;
  --shadow:0 10px 26px -18px rgba(0,0,0,.9);--shadow-lg:0 22px 50px -24px rgba(0,0,0,.95);
  --glass:rgba(26,23,40,.86);--overlay:rgba(0,0,0,.6);
  --accent-soft:#3a2319;--dk:1;color-scheme:dark;
}

/* ---------- base ---------- */
html[data-theme] body{font-family:var(--font);color:var(--ink);background:var(--bg2);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-theme] .phone{background:var(--bg)}
html[data-theme] h1,html[data-theme] h2,html[data-theme] h3,html[data-theme] .ctitle,html[data-theme] .btn{font-family:var(--font-head)}
html[data-theme] :focus-visible{outline:2.5px solid var(--brand-text);outline-offset:2px}
/* v97.1: text boxes keep their own focus style — the ring made search boxes look thin/boxed-in */
html[data-theme] input:focus-visible,html[data-theme] textarea:focus-visible,html[data-theme] select:focus-visible{outline:none}
html[data-theme] input,html[data-theme] select,html[data-theme] textarea,html[data-theme] button{font-family:inherit}
html[data-theme] input,html[data-theme] select,html[data-theme] textarea{background:var(--card);color:var(--ink);border-color:var(--line)}
html[data-theme] input::placeholder,html[data-theme] textarea::placeholder{color:var(--muted2)}
html[data-theme] .muted,html[data-theme] .pdshop,html[data-theme] .cvar{color:var(--muted)}
@media (prefers-reduced-motion:reduce){html[data-theme] *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* a.btn used to render as a small inline pill (Logout, Browse products …) */
html[data-theme] a.btn{display:block;text-align:center}

/* ---------- images: placeholder instead of the broken-image icon + soft fade-in ---------- */
img.osk-ph{visibility:visible!important;opacity:1!important;object-fit:contain!important;
  background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99be0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-8 9'/%3E%3C/svg%3E") center/34% no-repeat!important}
img[loading=lazy]:not(.osk-ph){transition:opacity .35s ease}
img.osk-loading{opacity:0}

/* ---------- cards, pills, alerts in dark ---------- */
html[data-theme=dark] .card,html[data-theme=dark] .pcard,html[data-theme=dark] .ordcard{background:var(--card);border-color:var(--line);box-shadow:var(--shadow)}
html[data-theme=dark] .pill{background:var(--soft);color:var(--brand-text)}
html[data-theme=dark] .pill.g,html[data-theme=dark] .alert.good{background:#10362a;color:#6ee7b7}
html[data-theme=dark] .pill.o{background:#3a2a10;color:#fbbf6b}
html[data-theme=dark] .pill.r,html[data-theme=dark] .alert.bad{background:#3b1717;color:#ff9b9b}
html[data-theme=dark] .btn.ghost{background:var(--soft);color:var(--brand-text)}
html[data-theme=dark] .toast,html[data-theme=dark] .osk-toast{background:#eeebf8;color:#161327}
html[data-theme=dark] hr{border-color:var(--line)}
html[data-theme=dark] .pdimg,html[data-theme=dark] .cthumb,html[data-theme=dark] .pcard .pt,html[data-theme=dark] .orditem .ot{background:var(--soft)}
html[data-theme=dark] .leaflet-container{background:#1b1d22}
html[data-theme=dark] .leaflet-tile-pane{filter:brightness(.72) contrast(1.1) saturate(.85)}

/* ---------- app bar ---------- */
html[data-theme] .cbar{box-shadow:0 12px 30px -24px rgba(43,17,128,.9);padding-top:max(12px,env(safe-area-inset-top))}
html[data-theme=dark] .cbar{background:linear-gradient(135deg,#3a1fa8,#1f0f63)}

/* ---------- bottom nav: active pill, 44px targets, cart bounce, safe area ---------- */
html[data-theme] .botnav{background:var(--glass);-webkit-backdrop-filter:saturate(170%) blur(14px);backdrop-filter:saturate(170%) blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -22px rgba(20,10,60,.55)}
html[data-theme] .cnav{min-height:44px;justify-content:center;color:var(--muted2);transition:color .2s}
html[data-theme] .cnav b{font-weight:700;font-size:10.5px}
html[data-theme] .cnav:not(.center)::before{content:"";position:absolute;top:-9px;left:50%;width:0;height:3px;border-radius:0 0 4px 4px;background:var(--brand-text);transform:translateX(-50%);transition:width .25s}
html[data-theme] .cnav.on{color:var(--brand-text)}
html[data-theme] .cnav.on:not(.center)::before{width:26px}
html[data-theme] .cnav.on svg{transform:translateY(-1px)}
html[data-theme] .cartbadge.bump{animation:oskBump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes oskBump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ---------- sticky action bar: always above the bottom nav, never under the cart button ---------- */
html[data-theme] .actionbar{bottom:calc(66px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--bg) 38%);padding-top:18px}
html[data-theme] body:has(.actionbar) .cwrap{padding-bottom:calc(160px + env(safe-area-inset-bottom))}

/* ---------- skeleton + empty state + bottom sheet (shared components) ---------- */
.osk-skel{position:relative;overflow:hidden;background:var(--soft);border-radius:var(--r-md)}
.osk-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:oskShim 1.3s infinite}
html[data-theme=dark] .osk-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
@keyframes oskShim{100%{transform:translateX(100%)}}
html[data-theme] .emptyc{padding:56px 22px}
html[data-theme] .emptyc .big{width:92px;height:92px;margin:0 auto 14px;border-radius:30px;display:grid;place-items:center;background:var(--soft);font-size:44px}
html[data-theme] .emptyc p{color:var(--muted);font-size:14px;line-height:1.55}
.osk-sheet[hidden]{display:none!important}
.osk-sheet{position:fixed;inset:0;z-index:90;background:var(--overlay);display:flex;align-items:flex-end;justify-content:center;animation:oskFade .18s ease}
.osk-sheet>div{background:var(--card);color:var(--ink);width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;animation:oskUp .24s cubic-bezier(.2,.9,.3,1)}
.osk-sheet .grab{width:42px;height:5px;border-radius:5px;background:var(--line);margin:4px auto 12px}
@media(min-width:700px){.osk-sheet{align-items:center}.osk-sheet>div{border-radius:22px}}
@keyframes oskFade{from{opacity:0}}@keyframes oskUp{from{transform:translateY(40px);opacity:.5}}

/* ---------- theme / language switch (account page + home header) ---------- */
.osk-seg{display:flex;background:var(--soft);border-radius:13px;padding:4px;gap:4px}
.osk-seg button{flex:1;border:none;background:transparent;color:var(--muted);font:700 13px var(--font-head);padding:9px 6px;border-radius:10px;cursor:pointer}
.osk-seg button.on{background:var(--card);color:var(--brand-text);box-shadow:var(--shadow)}
.osk-hbtn{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.16);border:none;display:grid;place-items:center;cursor:pointer;color:#fff;position:relative}
.osk-dot{position:absolute;top:6px;right:6px;min-width:16px;height:16px;border-radius:9px;background:var(--accent);color:#fff;font:800 9px/16px var(--font);text-align:center;padding:0 3px;border:2px solid #4a24c7}

/* ---------- dark overrides for the desktop layer (≥1024px top bar) ---------- */
html[data-theme=dark] .dt-top,html[data-theme=dark] .dt-nav{background:var(--glass)!important;border-color:var(--line)!important;color:var(--ink)}

/* ---------- v100: install-the-app banner (home) ---------- */
#oskInst{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + env(safe-area-inset-bottom));z-index:35;width:min(440px,calc(100% - 20px));display:flex;align-items:center;gap:10px;
  background:var(--card);color:var(--ink);border-radius:18px;box-shadow:var(--shadow-lg);padding:10px 10px 10px 12px;border:1px solid var(--line);animation:oskUp .3s ease}
#oskInst .ii{font-size:24px}#oskInst .it{flex:1;min-width:0}#oskInst .it b{display:block;font-size:13.5px}#oskInst .it small{font-size:11.5px;color:var(--muted)}
#oskInst .ib{border:none;border-radius:11px;padding:9px 14px;background:var(--brand);color:#fff;font:800 13px var(--font-head);cursor:pointer}
#oskInst .ix{border:none;background:none;color:var(--muted);font-size:15px;cursor:pointer;padding:6px}