:root {
  --brand: #e8622c;
  --brand-soft: #fdece6;
  --bg: #f6f6f8;
  --card: #ffffff;
  --text: #17171c;
  --muted: #82828c;
  --line: #ececf0;
  --ok: #24a148;
  --radius: 18px;
  --shadow: 0 2px 14px rgba(20, 20, 40, .07);
  --nav-h: 62px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#131318; --card:#1e1e26; --text:#f2f2f5; --muted:#9a9aa6; --line:#2a2a34; --brand-soft:#3a231c; --shadow:0 2px 14px rgba(0,0,0,.35); }
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { min-height:100%; }
body { min-height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
.hidden { display:none !important; }
button { font:inherit; border:0; cursor:pointer; background:none; color:inherit; }
input,select,textarea { font:inherit; color:inherit; }

/* ---------- ro'yxatdan o'tish ---------- */
.reg-screen { position:fixed; inset:0; z-index:80; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:20px; }
.reg-card { background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:28px 22px; width:100%; max-width:400px; text-align:center; }
.reg-logo { width:76px; height:76px; border-radius:22px; object-fit:cover; margin-bottom:12px; }
.reg-card h2 { font-size:21px; }
.reg-card p { color:var(--muted); font-size:14px; margin:6px 0 18px; }
.reg-card label { display:block; text-align:left; font-size:13px; color:var(--muted); font-weight:600; margin-bottom:12px; }
.reg-card input { display:block; width:100%; margin-top:5px; border:1.5px solid var(--line); background:var(--bg); border-radius:12px; padding:12px 14px; font-size:16px; outline:none; }
.reg-card input:focus { border-color:var(--brand); }
.reg-note { font-size:12px; color:var(--muted); margin-top:12px; line-height:1.4; }
.reg-or { font-size:12.5px; color:var(--muted); margin:12px 0 8px; position:relative; }
.reg-or::before, .reg-or::after { content:""; position:absolute; top:50%; width:38%; height:1px; background:var(--line); }
.reg-or::before { left:0; } .reg-or::after { right:0; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 62%, #000)); color:#fff; padding:16px 16px 14px; border-radius:0 0 24px 24px; }
.hero-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.brand-row { display:flex; align-items:center; gap:10px; min-width:0; }
.brand-logo { width:44px; height:44px; border-radius:14px; object-fit:cover; background:#fff; flex:0 0 44px; }
.brand { font-size:19px; font-weight:800; letter-spacing:.3px; }
.tagline { font-size:12px; opacity:.85; margin-top:1px; }
.icon-btn { width:40px; height:40px; border-radius:13px; background:rgba(255,255,255,.18); font-size:18px; flex:0 0 40px; }

.addr-bar { display:flex; align-items:center; gap:8px; width:100%; margin-top:12px; background:rgba(255,255,255,.16); border-radius:13px; padding:10px 12px; color:#fff; font-size:14px; text-align:left; }
.addr-ico { flex:0 0 auto; }
.addr-txt { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.addr-chev { opacity:.8; font-size:12px; }

.search-wrap { margin-top:10px; }
#search { width:100%; border:0; border-radius:14px; padding:12px 14px; font-size:15px; background:rgba(255,255,255,.96); color:#17171c; outline:none; }
.closed-banner { margin-top:10px; background:rgba(0,0,0,.28); border-radius:12px; padding:9px 13px; font-size:13px; font-weight:600; }

/* ---------- bannerlar (karusel) ---------- */
.banners { display:flex; gap:12px; overflow-x:auto; padding:14px 16px 2px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.banners::-webkit-scrollbar { display:none; }
.banner { flex:0 0 82%; scroll-snap-align:center; border-radius:18px; padding:16px 18px; min-height:104px;
  display:flex; flex-direction:column; justify-content:center; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.banner b { font-size:17px; font-weight:800; line-height:1.2; }
.banner span { font-size:13px; opacity:.92; margin-top:5px; line-height:1.35; }
.banner .bic { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.55); margin-bottom:8px; }
.banner { color:var(--text); border:1px solid var(--line); }
.banner.b1 { background:color-mix(in srgb, #e8622c 10%, var(--card)); }
.banner.b1 .bic { color:#c44e1e; }
.banner.b2 { background:color-mix(in srgb, #1d8a42 10%, var(--card)); }
.banner.b2 .bic { color:#1d8a42; }
.banner.b3 { background:color-mix(in srgb, #2456c4 10%, var(--card)); }
.banner.b3 .bic { color:#2456c4; }
@media (prefers-color-scheme: dark) { .banner .bic { background:rgba(255,255,255,.08); } }

/* ---------- skeleton ---------- */
.skel { background:linear-gradient(90deg,var(--card) 25%,var(--line) 37%,var(--card) 63%); background-size:400% 100%; animation:sk 1.2s infinite; border-radius:var(--radius); }
@keyframes sk { 0% { background-position:100% 50% } 100% { background-position:0 50% } }
.skel-card { height:220px; }

/* ---------- upsell ---------- */
.upsell { margin:14px 0 4px; }
.upsell-title { font-size:15px; font-weight:800; padding:0 16px 8px; }
.upsell-row { display:flex; gap:10px; overflow-x:auto; padding:0 16px 4px; scrollbar-width:none; }
.upsell-row::-webkit-scrollbar { display:none; }
.ucard { flex:0 0 116px; background:var(--card); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; position:relative; }
.ucard img { width:100%; height:88px; object-fit:cover; background:#fff; display:block; }
.ucard .un { font-size:11.5px; font-weight:600; padding:6px 8px 2px; line-height:1.2; height:32px; overflow:hidden; }
.ucard .up { font-size:12.5px; font-weight:800; color:var(--brand); padding:0 8px 8px; }
.ucard .uadd { position:absolute; right:6px; top:66px; width:26px; height:26px; border-radius:9px; background:var(--brand); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; }

/* ---------- vaqt / pribor ---------- */
.fld-title { font-size:13px; color:var(--muted); font-weight:600; margin:4px 0 8px; }
.time-chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; scrollbar-width:none; }
.time-chips::-webkit-scrollbar { display:none; }
.tchip { flex:0 0 auto; border:1.5px solid var(--line); border-radius:12px; padding:9px 14px; font-size:13.5px; font-weight:700; color:var(--text); white-space:nowrap; }
.tchip.active { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.persons-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:14px; font-weight:600; }

/* ---------- ETA ---------- */
.eta-box { text-align:center; background:var(--brand-soft); color:var(--brand); border-radius:14px; margin:0 16px 12px; padding:12px; font-weight:800; font-size:15px; }
.eta-box small { display:block; font-weight:600; font-size:12px; opacity:.85; margin-top:2px; }
.prog { height:6px; background:var(--line); border-radius:99px; margin:10px 16px 4px; overflow:hidden; }
.prog i { display:block; height:100%; background:var(--brand); border-radius:99px; transition:width .6s; }

/* ---------- takrorlash ---------- */
.repeat-btn { background:var(--brand-soft); color:var(--brand); border-radius:10px; padding:7px 12px; font-size:12.5px; font-weight:700; white-space:nowrap; }

/* ---------- kategoriyalar (rasmli) ---------- */
.cats { display:flex; gap:10px; overflow-x:auto; padding:14px 16px 6px; position:sticky; top:0; background:var(--bg); z-index:5; scrollbar-width:none; }
.cats::-webkit-scrollbar { display:none; }
.cat-chip { flex:0 0 auto; width:74px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.cat-chip .cimg { width:62px; height:62px; border-radius:20px; object-fit:cover; background:var(--card); box-shadow:var(--shadow); border:2.5px solid transparent; transition:border-color .15s; }
.cat-chip.active .cimg { border-color:var(--brand); }
.cat-chip .cname { font-size:11.5px; font-weight:600; color:var(--muted); text-align:center; line-height:1.15; max-height:2.4em; overflow:hidden; }
.cat-chip.active .cname { color:var(--brand); font-weight:700; }
.cat-chip .cemoji { width:62px; height:62px; border-radius:20px; background:var(--card); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; font-size:28px; border:2.5px solid transparent; }
.cat-chip.active .cemoji { border-color:var(--brand); }

/* ---------- menyu ---------- */
main { padding: 8px 16px 90px; }
.cat-title { font-size:19px; font-weight:800; margin:20px 2px 12px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pcard { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; position:relative; }
.pcard .imgwrap { position:relative; width:100%; aspect-ratio:1/1; background:#fff; overflow:hidden; }
@media (prefers-color-scheme: dark) { .pcard .imgwrap { background:#f4f4f6; } }
.pcard img { width:100%; height:100%; object-fit:cover; display:block; }
.pcard .pi { padding:10px 12px 12px; display:flex; flex-direction:column; gap:3px; flex:1; }
.pcard .pp { font-size:15.5px; font-weight:800; color:var(--text); }
.pcard .pn { font-size:13.5px; font-weight:600; line-height:1.3; color:var(--muted); }
.pcard .add { position:absolute; right:9px; bottom:9px; width:36px; height:36px; border-radius:13px; background:var(--brand); color:#fff; font-size:21px; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.22); }
.pcard .qty-badge { position:absolute; top:9px; left:9px; background:var(--brand); color:#fff; font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; z-index:2; }
.pop-badge { position:absolute; top:9px; right:9px; background:#ffb800; color:#3a2a00; font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:999px; z-index:2; }

/* ---------- savat paneli ---------- */
.cart-bar { position:fixed; left:16px; right:16px; bottom:calc(var(--nav-h) + 10px + env(safe-area-inset-bottom)); background:var(--brand); color:#fff; border-radius:16px; padding:13px 18px; display:flex; justify-content:space-between; align-items:center; font-weight:700; box-shadow:0 8px 24px rgba(232,98,44,.42); z-index:20; animation:pop .25s; }
@keyframes pop { from { transform:translateY(20px); opacity:0; } }
.cart-bar-info { display:flex; gap:10px; align-items:baseline; }
#cartSum small { font-weight:500; font-size:13px; opacity:.85; }

/* ---------- yopishqoq CTA panel (Yandex uslubi) ---------- */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:var(--card); border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; z-index:25;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
body.no-nav .sticky-cta { bottom:0; }
.sticky-cta .cta-sum { display:flex; flex-direction:column; line-height:1.15; flex:0 0 auto; }
.sticky-cta .cta-sum span { font-size:11.5px; color:var(--muted); font-weight:600; }
.sticky-cta .cta-sum b { font-size:17px; font-weight:800; white-space:nowrap; }
.sticky-cta .main-btn { margin:0; flex:1; padding:14px; font-size:15px; }
.cart-more { padding:0 16px; }
.cart-more .ghost-btn { margin-bottom:0; }
/* CTA panel balandligi uchun kontent pastida joy */
#v-cart, #v-checkout { padding-bottom:96px; }
body.no-nav .bottom-nav { display:none; }

/* ---------- pastki navigatsiya ---------- */
.bottom-nav { position:fixed; left:0; right:0; bottom:0; height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--card); border-top:1px solid var(--line); display:flex; z-index:30; }
.bottom-nav button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--muted); font-size:10.5px; font-weight:600; position:relative; }
.bottom-nav button i { font-style:normal; line-height:1; display:flex; align-items:center; justify-content:center; height:22px; }
.bottom-nav button.active { color:var(--brand); }
.nav-badge { position:absolute; top:6px; left:calc(50% + 6px); background:var(--brand); color:#fff; font-size:10px; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* ---------- subviews ---------- */
.subhead { display:flex; align-items:center; gap:8px; padding:16px 16px 6px; position:sticky; top:0; background:var(--bg); z-index:5; }
.subhead h2 { font-size:20px; }
.back { width:36px; height:36px; border-radius:12px; background:var(--card); box-shadow:var(--shadow); font-size:22px; font-weight:700; }
.card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); margin:12px 16px; padding:16px; }

/* ---------- savat ---------- */
.citem { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); margin:10px 16px; padding:10px; }
.citem img { width:58px; height:58px; border-radius:12px; object-fit:cover; background:#fff; }
.citem .cn { flex:1; min-width:0; }
.citem .cn b { font-size:14px; display:block; }
.citem .cn span { font-size:13px; color:var(--muted); }
.stepper { display:flex; align-items:center; gap:2px; background:var(--bg); border-radius:12px; }
.stepper button { width:32px; height:32px; font-size:18px; font-weight:700; color:var(--brand); }
.stepper b { min-width:24px; text-align:center; font-size:14px; }
.empty { text-align:center; color:var(--muted); padding:60px 20px; font-size:15px; line-height:1.5; }

/* ---------- forma ---------- */
.form h3 { font-size:16px; margin:14px 0 10px; }
.form h3:first-child { margin-top:4px; }
.form label { display:block; font-size:13px; color:var(--muted); font-weight:600; margin-bottom:12px; }
.form input:not([type=radio]), .form select, .form textarea {
  display:block; width:100%; margin-top:5px; border:1.5px solid var(--line); background:var(--bg);
  border-radius:12px; padding:11px 12px; font-size:15px; outline:none;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color:var(--brand); }
.promo-row { display:flex; gap:8px; margin-top:5px; }
.promo-row input { margin-top:0 !important; text-transform:uppercase; }
.promo-btn { width:auto !important; margin:0 !important; padding:0 18px !important; }
.zone-hint { font-size:13px; color:var(--brand); font-weight:600; margin:-6px 0 12px; }
.ghost-btn { width:100%; border:1.5px dashed var(--line); border-radius:12px; padding:11px; color:var(--muted); font-weight:600; margin-bottom:12px; }
.otype { display:flex; gap:8px; margin-bottom:14px; }
.ot { flex:1; margin:0 !important; }
.ot input { display:none; }
.ot span { display:block; text-align:center; border:1.5px solid var(--line); border-radius:12px; padding:11px 6px; font-size:13.5px; font-weight:700; color:var(--text); }
.ot input:checked + span { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.pickup-info { background:var(--brand-soft); border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.5; margin-bottom:12px; }
.pay-opts { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pay { flex:1; min-width:100px; margin:0 !important; }
.pay input { display:none; }
.pay span { display:block; text-align:center; border:1.5px solid var(--line); border-radius:12px; padding:11px 6px; font-size:13.5px; font-weight:700; color:var(--text); }
.pay input:checked + span { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.pay small { display:block; font-size:9.5px; font-weight:600; color:var(--muted); margin-top:1px; }
.totals { border-top:1px dashed var(--line); padding-top:12px; font-size:14px; display:flex; flex-direction:column; gap:6px; }
.totals .row { display:flex; justify-content:space-between; }
.totals .grand { font-size:17px; font-weight:800; }
.free-progress { font-size:12.5px; color:var(--ok); font-weight:600; }
.main-btn { width:100%; background:var(--brand); color:#fff; border-radius:14px; padding:15px; font-size:16px; font-weight:800; margin-top:12px; box-shadow:0 6px 18px rgba(232,98,44,.35); }
.main-btn:disabled { opacity:.6; }
.err { background:#fdeaea; color:#c0392b; border-radius:12px; padding:10px 12px; font-size:14px; margin-top:10px; }
@media (prefers-color-scheme: dark) { .err { background:#3a1e1c; color:#ff8a7a; } }

/* ---------- xaritalar ---------- */
.mini-map { height:210px; border-radius:14px; overflow:hidden; margin-bottom:6px; border:1.5px solid var(--line); position:relative; z-index:0; }
.map-hint { font-size:12px; color:var(--muted); margin-bottom:8px; text-align:center; }
.zone-detect { font-size:13.5px; font-weight:700; color:var(--ok); background:#e2f5e8; border-radius:10px; padding:9px 12px; margin-bottom:12px; }
.zone-detect.warn { color:#b07708; background:#fdf3e0; }
@media (prefers-color-scheme: dark) { .zone-detect { background:#1c3a26; } .zone-detect.warn { background:#3a2f14; } }
.track-map { height:250px; border-radius:var(--radius); overflow:hidden; margin:12px 16px; box-shadow:var(--shadow); position:relative; z-index:0; }
.zones-map { height:280px; border-radius:14px; overflow:hidden; margin-top:10px; position:relative; z-index:0; border:1.5px solid var(--line); }
.route-meta { display:flex; gap:10px; justify-content:center; font-size:13px; color:var(--muted); margin:-4px 16px 4px; }
.route-meta b { color:var(--text); }
.courier-emoji-marker { font-size:26px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.dest-emoji-marker { font-size:24px; line-height:1; }

/* ---------- kuzatuv ---------- */
.status-hero { text-align:center; padding:24px 16px 10px; }
.status-hero .hero-ic { width:64px; height:64px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; margin:0 auto; }
.status-hero .hero-ic.bad { background:rgba(213,50,30,.12); color:#d5321e; }
.status-hero h3 { font-size:19px; margin-top:6px; }
.status-hero p { color:var(--muted); font-size:14px; margin-top:4px; }
.timeline { margin:8px 16px; }
.tstep { display:flex; gap:12px; position:relative; padding-bottom:22px; }
.tstep::before { content:""; position:absolute; left:15px; top:30px; bottom:0; width:2px; background:var(--line); }
.tstep:last-child::before { display:none; }
.tdot { width:32px; height:32px; border-radius:50%; background:var(--card); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; z-index:1; flex:0 0 32px; color:var(--muted); opacity:.55; }
.tstep.done .tdot { opacity:1; background:var(--brand-soft); color:var(--brand); }
.tstep.done.current .tdot { background:var(--brand); color:#fff; }
.tinfo b { font-size:14.5px; display:block; }
.tinfo span { font-size:12.5px; color:var(--muted); }
.courier-card { display:flex; align-items:center; gap:12px; }
.courier-card .ava { width:46px; height:46px; border-radius:50%; background:var(--brand-soft); display:flex; align-items:center; justify-content:center; font-size:22px; }
.courier-card a { margin-left:auto; background:var(--ok); color:#fff; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700; font-size:14px; }
.receipt { font-size:14px; }
.receipt .row { display:flex; justify-content:space-between; padding:4px 0; gap:10px; }
.receipt .row.total { border-top:1px dashed var(--line); margin-top:6px; padding-top:10px; font-weight:800; font-size:15px; }

/* ---------- buyurtmalar ro'yxati ---------- */
.ocard { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); margin:10px 16px; padding:14px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ocard .on b { display:block; font-size:15px; }
.ocard .on span { font-size:12.5px; color:var(--muted); }
.badge { font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; background:var(--brand-soft); color:var(--brand); white-space:nowrap; }
.badge.done { background:#e2f5e8; color:var(--ok); }
.badge.cancel { background:#fdeaea; color:#c0392b; }
@media (prefers-color-scheme: dark) { .badge.done { background:#1c3a26; } .badge.cancel { background:#3a1e1c; } }

/* ---------- profil ---------- */
.prof-head { display:flex; align-items:center; gap:14px; margin:12px 16px 4px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
.prof-ava { width:56px; height:56px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:23px; font-weight:800; object-fit:cover; }
.prof-head .pinfo b { font-size:17px; display:block; }
.prof-head .pinfo span { font-size:13.5px; color:var(--muted); }
.plist { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); margin:12px 16px; overflow:hidden; }
.prow { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); font-size:14.5px; text-decoration:none; color:inherit; width:100%; text-align:left; }
.prow:last-child { border-bottom:0; }
.prow i { font-style:normal; width:24px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.prow .pv { margin-left:auto; color:var(--muted); font-size:13.5px; }
.sect-title { font-size:13px; font-weight:700; color:var(--muted); margin:18px 16px 0; text-transform:uppercase; letter-spacing:.4px; }

/* ---------- mahsulot oynasi ---------- */
.sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; }
.sheet { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-radius:24px 24px 0 0; z-index:41; padding:0 0 calc(16px + env(safe-area-inset-bottom)); animation:up .28s cubic-bezier(.2,.8,.3,1); max-height:88vh; overflow:auto; }
@keyframes up { from { transform:translateY(100%); } }
.sheet img { width:100%; aspect-ratio:1/1; object-fit:cover; background:#fff; border-radius:24px 24px 0 0; max-height:44vh; }
.sheet .sc { padding:16px; }
.sheet h3 { font-size:20px; }
.sheet .desc { color:var(--muted); font-size:14px; margin:6px 0 14px; line-height:1.45; }
.sheet .srow { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sheet .price { font-size:20px; font-weight:800; color:var(--brand); }
.sheet .add-btn { flex:1; background:var(--brand); color:#fff; border-radius:14px; padding:14px; font-weight:800; font-size:15px; }

/* ---- konstruktor: variantlar + modifikatorlar ---- */
.mg { margin:0 0 14px; }
.mg-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.mg-head b { font-size:15px; }
.mg-hint { font-size:12px; color:var(--muted); font-weight:600; }
.mg-hint.req { color:var(--brand); }
.var-chips { display:flex; gap:8px; flex-wrap:wrap; }
.vchip { flex:1; min-width:88px; border:1.5px solid var(--line); border-radius:14px; padding:10px 8px; background:var(--card); color:var(--text); display:flex; flex-direction:column; align-items:center; gap:2px; }
.vchip span { font-size:13.5px; font-weight:700; }
.vchip small { font-size:12px; color:var(--muted); font-weight:700; }
.vchip.active { border-color:var(--brand); background:var(--brand-soft); }
.vchip.active span, .vchip.active small { color:var(--brand); }
.mo { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line); cursor:pointer; }
.mo:last-child { border-bottom:0; }
.mo input { width:19px; height:19px; accent-color:var(--brand); flex:0 0 auto; }
.mo-name { flex:1; font-size:14.5px; }
.mo-price { font-size:13px; font-weight:800; color:var(--muted); }
.mo input:checked ~ .mo-price { color:var(--brand); }

/* savatdagi qator tavsifi */
.cmods { display:block; font-style:normal; font-size:12px; color:var(--brand); margin:1px 0 2px; line-height:1.35; }

/* ---- stories ---- */
.stories { display:flex; gap:12px; overflow-x:auto; padding:12px 16px 2px; scrollbar-width:none; }
.stories::-webkit-scrollbar { display:none; }
.story-c { flex:0 0 auto; width:66px; background:none; border:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
.story-ring { width:62px; height:62px; border-radius:50%; padding:2.5px; background:linear-gradient(45deg, var(--brand), #ffb800); display:block; }
.story-c.seen .story-ring { background:var(--line); }
.story-ring img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--bg); display:block; background:#fff; }
.story-t { font-size:11px; font-weight:600; color:var(--text); max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-viewer { position:fixed; inset:0; background:#000; z-index:60; display:flex; align-items:center; justify-content:center; }
.story-viewer img { width:100%; height:100%; object-fit:contain; }
.story-progress { position:absolute; top:calc(8px + env(safe-area-inset-top)); left:10px; right:10px; display:flex; gap:4px; z-index:3; }
.story-progress i { flex:1; height:3px; border-radius:99px; background:rgba(255,255,255,.3); overflow:hidden; position:relative; }
.story-progress i.done { background:#fff; }
.story-progress i.run::after { content:''; position:absolute; inset:0; background:#fff; transform-origin:left; animation:storybar 5s linear forwards; }
@keyframes storybar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.story-close { position:absolute; top:calc(20px + env(safe-area-inset-top)); right:14px; z-index:4; background:rgba(0,0,0,.45); color:#fff; width:36px; height:36px; border-radius:50%; font-size:16px; }
.story-cap { position:absolute; left:0; right:0; bottom:0; padding:20px 18px calc(24px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(0,0,0,.78)); color:#fff; z-index:3; }
.story-cap b { font-size:20px; display:block; }
.story-cap p { font-size:14.5px; margin-top:6px; line-height:1.45; opacity:.92; }
.story-nav { position:absolute; inset:0; display:flex; z-index:2; }
.story-nav div { flex:1; }
.story-nav #storyPrev { flex:0 0 34%; }

/* ---- bonus ballar ---- */
.bonus-toggle { margin-bottom:10px; }
.bonus-chk { display:flex; flex-wrap:wrap; align-items:center; gap:9px; border:1.5px solid var(--line); border-radius:14px; padding:11px 13px; cursor:pointer; }
.bonus-chk.on { border-color:var(--brand); background:var(--brand-soft); }
.bonus-chk input { width:19px; height:19px; accent-color:var(--brand); }
.bonus-chk span { font-size:14px; font-weight:700; flex:1; }
.bonus-chk small { flex-basis:100%; color:var(--muted); font-size:11.5px; margin-left:28px; }
.bonus-card { margin:12px 16px; }
.bonus-head { display:flex; justify-content:space-between; align-items:center; }
.bonus-lbl { font-size:13px; color:var(--muted); font-weight:700; }
.bonus-bal { font-size:28px; font-weight:800; color:var(--brand); }
.bonus-bal small { font-size:14px; color:var(--muted); font-weight:700; }
.bonus-emoji { color:var(--brand); opacity:.85; display:flex; }
.bonus-note { font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.45; }
.bonus-hist { margin-top:10px; border-top:1px dashed var(--line); padding-top:8px; }
.bonus-hist b { font-size:12.5px; color:var(--muted); }
.bh-row { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; }
.bh-row .plus { color:var(--ok, #1d8a42); }
.bh-row .minus { color:var(--muted); }
.ref-card { margin:0 16px 12px; }
.ref-card p { font-size:13px; color:var(--muted); margin:4px 0 10px; line-height:1.45; }
.ref-link { background:var(--bg); border:1px dashed var(--line); border-radius:10px; padding:9px 11px; font-size:12px; word-break:break-all; color:var(--muted); margin-bottom:10px; }
.ref-btns { display:flex; gap:8px; }
.ref-btns .main-btn { flex:1.4; padding:11px; font-size:13.5px; }
.ref-btns .ghost-btn { flex:1; padding:11px; font-size:13.5px; margin:0; }

/* ---- manzillar kitobi ---- */
.addr-chips { display:flex; gap:8px; overflow-x:auto; margin-bottom:10px; scrollbar-width:none; }
.addr-chips::-webkit-scrollbar { display:none; }
.achip { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; border:1.5px solid var(--line); border-radius:12px; padding:9px 13px; font-size:13px; font-weight:700; color:var(--text); background:var(--card); white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.achip.active { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.addr-details { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:-4px 0 12px; }
.addr-details input { width:100%; border:1.5px solid var(--line); background:var(--bg); color:var(--text); border-radius:12px; padding:10px 11px; font-size:14px; outline:none; }
.addr-details input:focus { border-color:var(--brand); }

/* yetkazish sozlamalari (kuryerga ko'rsatmalar) */
.rec-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:-4px 0 12px; }
.rec-fields input { width:100%; border:1.5px solid var(--line); background:var(--bg); color:var(--text); border-radius:12px; padding:10px 11px; font-size:14px; outline:none; }
.rec-fields input:focus { border-color:var(--brand); }

/* kechikish uzri banneri */
.delay-banner { margin:0 16px 12px; background:#fff4e5; color:#b45309; border:1.5px solid #f5c98a; border-radius:14px; padding:12px 14px; font-size:13.5px; font-weight:700; line-height:1.45; }
@media (prefers-color-scheme: dark) { .delay-banner { background:#3a2a12; color:#f0b862; border-color:#6b4d1e; } }

/* baho sabab chiplari */
.rate-reasons { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:4px 0 10px; }
.rr-title { width:100%; font-size:13px; color:var(--muted); font-weight:600; margin-bottom:2px; }
.rchip { border:1.5px solid var(--line); background:var(--bg); color:var(--text); border-radius:999px; padding:8px 12px; font-size:13px; font-weight:600; }
.rchip.active { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.addr-row { display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--line); }
.addr-row:last-child { border-bottom:0; }
.addr-row .ae { display:flex; color:var(--muted); }
.addr-row .at { flex:1; min-width:0; display:flex; flex-direction:column; }
.addr-row .at b { font-size:13.5px; }
.addr-row .at span { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.addr-row .aact { background:none; border:0; font-size:15px; padding:5px; cursor:pointer; }

/* ---- mijoz bekor qilishi ---- */
.cancel-btn { display:block; width:calc(100% - 32px); margin:4px 16px 0; padding:13px; border-radius:14px; border:1.5px solid #e5484d; color:#e5484d; background:none; font-weight:800; font-size:14.5px; }
.cancel-hint { text-align:center; color:var(--muted); font-size:12px; margin:6px 16px 14px; }

/* stop-list (tugagan mahsulot) */
.pcard.oos .imgwrap img { filter:grayscale(1) opacity(.55); }
.pcard.oos .pp, .pcard.oos .pn { color:var(--muted); }
.oos-badge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(20,20,26,.82); color:#fff; font-size:12px; font-weight:800; padding:6px 14px; border-radius:999px; z-index:2; white-space:nowrap; }

/* inline SVG ikonkalar */
.ic { vertical-align:-4px; flex:0 0 auto; }
.courier-card .ava { color:var(--brand); }

/* xarita markerlari (SVG, emoji o'rniga) */
.mkr-wrap { background:none; border:none; }
.mkr { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.3); border:2px solid #fff; }
.mkr.home { background:#2456c4; }
.mkr.shop { background:#17171c; }
.mkr.rider { width:32px; height:32px; background:var(--brand); }