/* QuickBasket design tokens — pine + haldi */
:root {
  --pine: #0D3B2E;
  --pine-2: #12503E;
  --pine-3: #1B6650;
  --leaf: #12804A;
  --leaf-600: #0E6B3D;
  --leaf-50: #E8F5EC;
  --haldi: #F6B400;
  --haldi-50: #FFF6D9;
  --paper: #F4F6F3;
  --surface: #FFFFFF;
  --ink: #1A2420;
  --slate: #5F6B66;
  --line: #E3E8E4;
  --chili: #D6342C;
  --chili-50: #FDECEA;
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 0 rgba(13,59,46,.04), 0 6px 24px -8px rgba(13,59,46,.14);
  --font-display: 'Baloo 2', 'Hind', system-ui, sans-serif;
  --font: 'Hind', 'Baloo 2', system-ui, sans-serif;
  --haldi-ink: #8A6400;     /* readable text on haldi-50 */
  --soft: #F6F8F6;          /* quiet panel / table head */
  --soft-2: #EEF2EF;        /* flat buttons */
  --ring: rgba(18,128,74,.12);
  /* legacy aliases used by platform login theme */
  --primary: var(--leaf); --bg: var(--paper); --text: var(--ink); --muted: var(--slate); --border: var(--line);
}

/* ---- Themes: chosen in Admin → Settings → Theme (website and admin separately) ----
   Each sets the deep brand colour (pine), the action colour (leaf, white text ≥ 4.5:1),
   the accent (haldi) and the page tint. "pine" is the default above. */
[data-theme="pine"] {     /* Default: pine green with haldi (repeated so previews work inside other themes) */
  --pine: #0D3B2E; --pine-2: #12503E; --pine-3: #1B6650;
  --leaf: #12804A; --leaf-600: #0E6B3D; --leaf-50: #E8F5EC;
  --haldi: #F6B400; --haldi-50: #FFF6D9; --haldi-ink: #8A6400;
  --paper: #F4F6F3; --line: #E3E8E4; --soft: #F6F8F6; --soft-2: #EEF2EF; --ring: rgba(18,128,74,.12);
}
[data-theme="kesar"] {    /* Saffron: warm orange on deep brown */
  --pine: #4A1D0C; --pine-2: #5E2611; --pine-3: #7A3418;
  --leaf: #C2410C; --leaf-600: #9A3412; --leaf-50: #FFF0E5;
  --haldi: #FBBF24; --haldi-50: #FEF6DD; --haldi-ink: #8A5A00;
  --paper: #FAF5F0; --line: #EDE3DA; --soft: #FBF6F1; --soft-2: #F3EBE3; --ring: rgba(194,65,12,.14);
}
[data-theme="shahi"] {    /* Royal: plum with gold */
  --pine: #2E1A40; --pine-2: #3B2252; --pine-3: #4C2D69;
  --leaf: #7C3AED; --leaf-600: #6527CC; --leaf-50: #F1EAFE;
  --haldi: #E9B949; --haldi-50: #FBF3DE; --haldi-ink: #7A5A10;
  --paper: #F6F4FA; --line: #E6E1EF; --soft: #F8F6FB; --soft-2: #EEEAF5; --ring: rgba(124,58,237,.14);
}
[data-theme="neel"] {     /* Indigo blue: navy with bright blue */
  --pine: #0F2A4A; --pine-2: #15365E; --pine-3: #1D4677;
  --leaf: #1D6FD1; --leaf-600: #175BB0; --leaf-50: #E7F0FC;
  --haldi: #F5B700; --haldi-50: #FEF5D8; --haldi-ink: #7D5C00;
  --paper: #F3F6FA; --line: #E0E7F0; --soft: #F5F8FC; --soft-2: #EAF0F7; --ring: rgba(29,111,209,.14);
}
[data-theme="mirchi"] {   /* Chilli red: deep wine with red */
  --pine: #3F0D12; --pine-2: #521219; --pine-3: #6B1922;
  --leaf: #C8102E; --leaf-600: #A30D25; --leaf-50: #FDE8EB;
  --haldi: #F6B400; --haldi-50: #FFF6D9; --haldi-ink: #8A6400;
  --paper: #FAF4F4; --line: #EEDFE0; --soft: #FBF6F6; --soft-2: #F4EAEB; --ring: rgba(200,16,46,.13);
}
[data-theme="mitti"] {    /* Earth: cocoa brown with olive green */
  --pine: #3A2A1C; --pine-2: #4A3624; --pine-3: #5E452E;
  --leaf: #4D7C0F; --leaf-600: #3F660C; --leaf-50: #EEF4E2;
  --haldi: #E0A526; --haldi-50: #FBF1D9; --haldi-ink: #7A560A;
  --paper: #F7F4EE; --line: #E7E1D5; --soft: #F9F6F0; --soft-2: #F0EBE1; --ring: rgba(77,124,15,.14);
}
html, body { font-family: var(--font); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -.01em; }
[x-cloak] { display: none !important; }
:focus-visible { outline: 3px solid var(--haldi); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Icons: Lucide via CSS mask, colour follows currentColor */
.ic { display: inline-block; width: 1.25em; height: 1.25em; flex-shrink: 0; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -0.22em; }
.ic-sm { width: 1em; height: 1em; } .ic-lg { width: 1.5em; height: 1.5em; }
.i-house{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/house.svg)}
.i-search{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/search.svg)}
.i-bag{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/shopping-bag.svg)}
.i-package{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/package.svg)}
.i-user{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/user.svg)}
.i-pin{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/map-pin.svg)}
.i-zap{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/zap.svg)}
.i-right{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/chevron-right.svg)}
.i-left{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/chevron-left.svg)}
.i-plus{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/plus.svg)}
.i-minus{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/minus.svg)}
.i-x{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/x.svg)}
.i-trash{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/trash-2.svg)}
.i-printer{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/printer.svg)}
.i-sheet{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/file-spreadsheet.svg)}
.i-dashboard{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/layout-dashboard.svg)}
.i-boxes{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/boxes.svg)}
.i-tags{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/tags.svg)}
.i-warehouse{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/warehouse.svg)}
.i-users{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/users.svg)}
.i-bike{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/bike.svg)}
.i-ticket{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/ticket-percent.svg)}
.i-image{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/image.svg)}
.i-chart{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/chart-column.svg)}
.i-settings{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/settings.svg)}
.i-refresh{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/refresh-cw.svg)}
.i-lang{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/languages.svg)}
.i-logout{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/log-out.svg)}
.i-receipt{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/receipt.svg)}
.i-reorder{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/rotate-ccw.svg)}
.i-phone{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/phone.svg)}
.i-clock{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/clock.svg)}
.i-truck{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/truck.svg)}
.i-check{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/circle-check.svg)}
.i-store{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/store.svg)}
.i-menu{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/menu.svg)}
.i-pencil{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/pencil.svg)}
.i-upload{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/upload.svg)}
.i-trend{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/trending-up.svg)}
.i-alert{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/triangle-alert.svg)}
.i-shield{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/shield-check.svg)}
.i-wallet{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/wallet.svg)}
.i-download{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/download.svg)}
.i-phone-app{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/smartphone.svg)}
.i-layers{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/layers.svg)}
.i-file{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/file-text.svg)}
.i-calendar{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/calendar.svg)}
.i-cash{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/banknote.svg)}
.i-percent{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/percent.svg)}
.i-grid{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/grid-2x2.svg)}
.i-back{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/arrow-left.svg)}
.i-xcircle{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/circle-x.svg)}
.i-sparkles{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/sparkles.svg)}
.i-leaf{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/leaf.svg)}
.i-timer{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/timer.svg)}
.i-rupee{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/badge-indian-rupee.svg)}
.i-bell{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/bell.svg)}
.i-barcode{--i:url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/scan-barcode.svg)}

/* Surfaces */
.card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.panel { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: 12px; padding: .62rem 1.05rem; font-weight: 600; font-size: .92rem; line-height: 1.2; transition: transform .1s, background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--leaf); color: #fff; }
.btn-primary:hover { background: var(--leaf-600); }
.btn-dark { background: var(--pine); color: #fff; }
.btn-dark:hover { background: var(--pine-2); }
.btn-haldi { background: var(--haldi); color: var(--pine); font-weight: 700; }
.btn-flat { background: var(--soft-2); color: var(--ink); }
.btn-flat:hover { background: #E2E8E4; }
.btn-ghost { background: transparent; color: var(--slate); }
.btn-ghost:hover { background: var(--soft-2); color: var(--ink); }
.btn-danger { background: var(--chili-50); color: var(--chili); }
.btn-danger:hover { background: #FAD9D5; }
.btn-sm { padding: .4rem .7rem; font-size: .82rem; border-radius: 10px; }
.btn-icon { padding: .5rem; border-radius: 10px; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* Inputs */
.input { width: 100%; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: .6rem .85rem; font-size: .93rem; outline: none; transition: border-color .15s, box-shadow .15s; color: var(--ink); }
.input:focus { border-color: var(--leaf); box-shadow: 0 0 0 4px var(--ring); }
.label { display: block; font-size: .8rem; font-weight: 600; color: var(--slate); margin-bottom: .3rem; }

/* Status chips with dot */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.nodot::before { display: none; }
.chip-placed { background: #E6F0FB; color: #1D5FB4; }
.chip-confirmed { background: #EFE8FA; color: #6B3FB8; }
.chip-packed { background: var(--haldi-50); color: var(--haldi-ink); }
.chip-out_for_delivery { background: #FFEEDD; color: #B4520E; }
.chip-delivered { background: var(--leaf-50); color: var(--leaf-600); }
.chip-cancelled { background: var(--chili-50); color: var(--chili); }

/* Tables */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.tbl th { text-align: left; font-size: .78rem; color: var(--slate); background: var(--soft); padding: .7rem .8rem; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl th:first-child { border-top-left-radius: 12px; } .tbl th:last-child { border-top-right-radius: 12px; }
.tbl td { padding: .7rem .8rem; border-bottom: 1px solid #EEF1EE; vertical-align: middle; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover td { background: #F8FAF8; }
.tbl tfoot td { padding: .75rem .8rem; font-weight: 700; background: var(--soft); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.srno { width: 3.4rem; color: #9AA5A0; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Product art */
.art { position: relative; border-radius: 16px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; }
.art img { width: 68%; height: 68%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(13,59,46,.16)); }
.art img.photo { width: 100%; height: 100%; object-fit: cover; filter: none; }
.art .em { font-size: 3rem; }
.art img.pack { width: 94%; height: 94%; object-fit: contain; filter: none; mix-blend-mode: multiply; }

/* Voucher / coupon ticket */
.voucher { position: relative; display: flex; border-radius: 16px; background: #fff; border: 1px solid var(--line); overflow: hidden; min-height: 112px; }
.voucher .stub { width: 92px; flex-shrink: 0; background: var(--pine); color: var(--haldi); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .6rem .4rem; position: relative; }
.voucher .stub .big { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.voucher .stub .sm { font-size: .7rem; font-weight: 700; color: #fff; opacity: .85; margin-top: .2rem; letter-spacing: .02em; }
.voucher .stub::after { content: ''; position: absolute; right: -1px; top: 8px; bottom: 8px; border-right: 2px dashed rgba(255,255,255,.35); }
.voucher::before, .voucher::after { content: ''; position: absolute; left: 82px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); z-index: 2; }
.voucher::before { top: -11px; } .voucher::after { bottom: -11px; }
.voucher .body { flex: 1; padding: .8rem 1rem .8rem 1.2rem; min-width: 0; display: flex; flex-direction: column; }
.voucher .code { font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; font-size: 1.05rem; color: var(--ink); border: 1.5px dashed var(--leaf); background: var(--leaf-50); border-radius: 8px; padding: .1rem .55rem; display: inline-block; }
/* Compact voucher for dense admin lists */
.voucher.mini { min-height: 0; border-radius: 12px; }
.voucher.mini .stub { width: 64px; padding: .4rem .25rem; }
.voucher.mini .stub .big { font-size: 1.2rem; }
.voucher.mini .stub .sm { font-size: .6rem; margin-top: .1rem; }
.voucher.mini::before, .voucher.mini::after { left: 56px; width: 14px; height: 14px; }
.voucher.mini::before { top: -8px; } .voucher.mini::after { bottom: -8px; }
.voucher.mini .body { padding: .5rem .6rem .5rem .85rem; gap: .1rem; }
.voucher.mini .code { font-size: .85rem; padding: 0 .4rem; letter-spacing: .06em; border-radius: 6px; }
.voucher.used .stub { background: #9AA5A0; color: #fff; }
.voucher.used { opacity: .7; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
@keyframes pop { 0% { transform: scale(.94); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
.pop { animation: pop .2s ease-out; }
@keyframes bump { 0%,100% { transform: scale(1) } 40% { transform: scale(1.18) } }
.bump { animation: bump .3s ease-out; }
.skeleton { background: linear-gradient(90deg, #ECF0ED 25%, #F5F7F5 50%, #ECF0ED 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 14px; }
@keyframes shimmer { to { background-position: -200% 0 } }