/* ===== Blinkit-style dark theme (customer app) ===== */
:root{
  --bg0:#0b0e2e;--bg1:#171c5b;--bg2:#1e2470;--card:#1a1f5e;--card2:#242a78;
  --txt:#fff;--txt2:#d6daf5;--muted:#aab0e0;--border:rgba(255,255,255,.12);
  --green:#1aa63a;--green-dark:#0f7a2a;--green-light:rgba(26,166,58,.18);
  --yellow:#f5c842;--yellow-light:rgba(245,200,66,.18);--red:#ff6b6b;--blue:#7cc4ff;--orange:#ffa94d;
  --shadow:0 2px 10px rgba(0,0,0,.35);
}
html{background:var(--bg0)!important}
body{background:linear-gradient(180deg,#232a7a 0,#171c5b 180px,#0d1138 100%)!important;color:var(--txt);min-height:100vh}
.muted{color:var(--muted)}
.card{background:var(--card);color:var(--txt);box-shadow:var(--shadow)}
.input,select.input,textarea.input{background:var(--card2);color:var(--txt);border-color:var(--border)}
.input::placeholder{color:#9aa1d8}
.input:focus{border-color:var(--yellow)}
label.lbl{color:var(--muted)}
.btn.outline{background:transparent;color:var(--yellow);border-color:var(--yellow)}
.btn.light{background:var(--green-light);color:#7dffa0}
.btn.ghost{color:var(--txt2)}
.btn.yellow{background:var(--yellow);color:#0b0e2e}
.btn.dark{background:#0b0e2e;color:#fff;border:1px solid var(--border)}
.btn.danger{background:rgba(255,107,107,.18);color:#ff8a8a}
.btn.blue{background:rgba(124,196,255,.18);color:#9fd4ff}
.chip{background:rgba(255,255,255,.06);border-color:var(--border);color:var(--txt2)}
.chip.on{background:var(--yellow);color:#0b0e2e;border-color:var(--yellow)}
.toast{background:#111;border:1px solid var(--border)}
.sheet,.modal{background:#1a1f5e;color:var(--txt)}
.sheet-bg{background:rgba(0,0,0,.6)}
.empty{color:var(--muted)}
.strike{color:#aab0e0}
table.tbl th{color:var(--muted);border-color:var(--border)}table.tbl td{border-color:rgba(255,255,255,.06)}
.badge{filter:saturate(.9)}
.logo{color:var(--yellow)}.logo .brand{background:#fff;color:#171c5b}
.logo-img{display:block;height:64px;margin:0 0 8px}.logo-img img{height:100%;filter:brightness(0) invert(1)}
.ad-green{background:linear-gradient(135deg,#0f7a2a,#1aa63a)}

/* --- top bar --- */
.top{background:linear-gradient(180deg,#2a318a 0,#1e2470 100%)!important;color:#fff}
.top .eta{color:#f5c842}
.top .addr{color:#fff}
.search{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff}
.search input{color:#fff}.search input::placeholder{color:#c5caf0}
#to-notif{background:rgba(0,0,0,.35);color:#fff}

/* --- category rail (icon above label) --- */
.cats{gap:4px;padding:8px 8px 10px;background:linear-gradient(180deg,#1e2470,#171c5b);border-bottom:1px solid var(--border)}
.cats .chip{flex-direction:column;gap:3px;background:none;border:0;border-radius:10px;padding:6px 8px;font-size:11.5px;font-weight:600;color:#d6daf5;min-width:70px;max-width:88px;white-space:normal;text-align:center;line-height:1.15}
.cats .chip .ci{font-size:24px;line-height:1}
.cats .chip.on{background:rgba(255,255,255,.1);color:#fff;border-bottom:3px solid var(--yellow);border-radius:10px 10px 0 0}

/* --- product cards (Blinkit) --- */
.section h2{color:#fff}
.grid{gap:10px}
.grid .prod{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:0 0 10px;overflow:visible}
.grid .prod .img{height:110px;background:#fff;border-radius:14px 14px 0 0;font-size:54px;position:relative;overflow:visible}
.grid .prod .img img{border-radius:14px 14px 0 0}
.grid .prod .off{top:8px;left:8px;background:#2a6df4;color:#fff;border-radius:5px;z-index:1}
.grid .prod .sub{top:8px;right:8px;background:var(--yellow);color:#0b0e2e;z-index:1}
.grid .prod .act{position:absolute;right:6px;bottom:-14px;margin:0;width:auto;z-index:2}
.grid .prod .add{flex:0 0 auto;min-width:58px;background:#0b0e2e;color:#4ade80;border:1.5px solid #4ade80;border-radius:8px;padding:8px 10px;font-size:12px;letter-spacing:.03em;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.grid .prod .qty{flex:0 0 auto;background:var(--green);border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.grid .prod .qty button{width:30px;height:34px}.prod .qty span{min-width:22px;font-size:13px}
.grid .prod .oos{flex:0 0 auto;background:#0b0e2e;color:#aab0e0;border:1.5px dashed var(--border);padding:8px 10px;font-size:11px}
.grid .prod .body{padding:22px 9px 0}
.grid .prod .un{color:#d6daf5;font-size:12px;font-weight:700;margin-top:0;min-height:18px}
.grid .prod .pr{margin-top:4px;align-items:baseline}
.grid .prod .price{background:var(--yellow);color:#0b0e2e;padding:2px 6px;border-radius:4px;font-size:14px}
.grid .prod .nm{color:#fff;margin-top:6px;font-size:12.5px;min-height:32px;font-weight:600;line-height:1.25}
.prod .nm .un2{color:var(--muted);font-weight:500;font-size:11px}
.prod .btn.xs.light{margin:6px 9px 0!important;background:rgba(245,200,66,.14);color:var(--yellow)}
.install{background:rgba(245,200,66,.12);border-color:var(--yellow);color:#fff}

/* --- cart bar + bottom nav pill --- */
#cartbar.cartbar{background:#1aa63a;border-radius:999px;padding:8px 10px 8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.45);left:50px;right:50px;max-width:460px;bottom:calc(78px + env(safe-area-inset-bottom))}
.cartbar .cb-ico{width:38px;height:38px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-right:8px}
#nav.nav{background:rgba(11,14,46,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:999px;left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));max-width:536px;padding:4px 6px;padding-bottom:calc(4px)}
#nav.nav button{color:#d6daf5;padding:7px 0 6px;border-radius:999px;border-top:0}
#nav.nav button.on{color:var(--yellow);background:rgba(255,255,255,.08)}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important}

/* --- inner pages --- */
.page .ph{background:#171c5b;color:#fff;border-color:var(--border)}
.line{border-color:rgba(255,255,255,.08)}.line .img{background:#fff}
.ocard,.sub-card{background:var(--card);border-color:var(--border)}
.tl i{background:rgba(255,255,255,.15)}.tl i.on{background:#4ade80}
.page .opt button{background:var(--card2);color:#fff;border-color:var(--border)}.page .opt button.on{border-color:var(--yellow);background:var(--yellow-light);color:var(--yellow)}
.pay{background:var(--card2);border-color:var(--border)}.pay.on{border-color:#4ade80;background:var(--green-light)}
.days button{background:var(--card2);color:#fff;border-color:var(--border)}
.stat{background:var(--card2)}.stat .v{color:#4ade80}
.menu-item{background:transparent;color:#fff;border-color:rgba(255,255,255,.08)}
.sub-card .img{background:#fff}
#wallet-body .card,#profile-body .card{background:var(--card)}
a{color:var(--yellow)}

.page .card{background:var(--card)}
.page .pay .small,.page .card .small{color:var(--muted)}
#cart-foot .card .row span:last-child{color:#fff}
.page h3{color:#fff}
.section h2{font-size:18px}

#cartbar.cartbar.hidden{display:none!important}
#place.btn{background:var(--green);font-size:17px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.4)}