/* The visitor's interface: the store's own look, deep green and marigold on ink, Anek Bangla throughout. */
:root {
  --ink: #0b1510; --panel: rgba(11, 21, 16, 0.94); --panel-2: rgba(22, 38, 30, 0.96);
  --paper: #fff5e2; --muted: rgba(255, 245, 226, 0.64); --faint: rgba(255, 245, 226, 0.14);
  --mari: #f2b53a; --mari-ink: #2a1c02; --leaf: #2f8a5c; --rose: #e0566b;
  --r1: 6px; --r2: 10px;
  --font: "Anek Bangla", system-ui, sans-serif;
}
#ui { position: fixed; inset: 0; pointer-events: none; font-family: var(--font); color: var(--paper); -webkit-font-smoothing: antialiased; }
#ui * { box-sizing: border-box; }
#ui button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
#ui .live { pointer-events: auto; }
#ui .hide { opacity: 0 !important; visibility: hidden; pointer-events: none !important; }

/* loading */
.load { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 110%, #1d5a3c 0%, #0b1510 62%); display: grid; place-items: center; transition: opacity 1.2s ease, visibility 0s linear 1.2s; pointer-events: auto; }
.load .mark { font-weight: 800; font-size: clamp(120px, 22vw, 260px); line-height: 0.8; font-stretch: 112%; letter-spacing: -0.02em; text-align: center; }
.load .bar { width: min(320px, 60vw); height: 2px; background: var(--faint); margin: 40px auto 16px; overflow: hidden; }
.load .bar i { display: block; height: 100%; width: 0; background: var(--mari); transition: width 0.4s ease; }
.load .step { font-weight: 300; font-size: 15px; color: var(--muted); text-align: center; min-height: 1.4em; }

/* title card over the arrival */
.title { position: absolute; inset-inline-start: clamp(20px, 6vw, 88px); bottom: clamp(60px, 14vh, 160px); transition: opacity 1.6s ease, transform 1.6s ease; }
.title.hide { transform: translateY(14px); }
.title .big { font-weight: 800; font-size: clamp(88px, 13vw, 190px); line-height: 0.82; font-stretch: 112%; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.45); }
.title .sub { font-weight: 200; font-size: clamp(22px, 2.6vw, 34px); margin-top: 14px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }
.title .when { font-weight: 500; font-size: 14px; color: var(--mari); margin-top: 10px; }
.skip { position: absolute; inset-inline-end: 20px; bottom: 20px; padding: 10px 16px; border-radius: var(--r1); background: rgba(11, 21, 16, 0.55); color: var(--muted); font-size: 14px; pointer-events: auto; transition: opacity 0.6s; }
.skip:hover { color: var(--paper); }

/* where you are */
.where { position: absolute; inset-inline-start: 18px; top: 16px; transition: opacity 0.6s; }
.where .brand { font-weight: 800; font-size: 26px; line-height: 1; font-stretch: 112%; }
.where .place { font-weight: 200; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.05; margin-top: 6px; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); transition: opacity 0.35s; }
.where .place small { display: block; font-size: 14px; font-weight: 500; color: var(--mari); margin-top: 4px; }

/* trolley chip */
.chip { position: absolute; inset-inline-end: 16px; top: 14px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; border-radius: var(--r2); background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.3s, opacity 0.6s; }
.chip svg { width: 30px; height: 30px; }
.chip .n { font-weight: 800; font-size: 20px; line-height: 1; }
.chip .t { font-weight: 300; font-size: 14px; color: var(--muted); }
.chip.bump { transform: scale(1.08); }

/* go-to */
.goto { position: absolute; inset-inline-start: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; transition: opacity 0.6s; }
#ui .goto > * { pointer-events: auto; }
.goto > button { padding: 11px 16px; border-radius: var(--r2); background: var(--panel); font-weight: 600; font-size: 15px; display: flex; gap: 10px; align-items: center; }
.goto .list { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 6px; padding: 10px; border-radius: var(--r2); background: var(--panel); max-height: 60vh; overflow: auto; transition: opacity 0.25s, transform 0.25s; transform-origin: bottom left; }
.goto .list.hide { transform: translateY(8px) scale(0.98); }
.goto .list button { text-align: start; padding: 9px 12px; border-radius: var(--r1); background: var(--faint); }
.goto .list button:hover, .goto .list button:focus-visible { background: rgba(242, 181, 58, 0.22); outline: none; }
.goto .list b { display: block; font-weight: 700; font-size: 16px; }
.goto .list span { font-weight: 300; font-size: 13px; color: var(--muted); }

.hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--r2); background: rgba(11, 21, 16, 0.72); font-weight: 400; font-size: 15px; white-space: nowrap; transition: opacity 0.8s; }

/* product drawer */
.sheet { position: absolute; inset-inline-end: 16px; top: 76px; bottom: 16px; width: min(400px, calc(100vw - 32px)); border-radius: var(--r2); background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.3s; }
.sheet.hide { transform: translateX(30px); }
.sheet .pic { flex: 0 0 auto; height: 36%; min-height: 180px; overflow: hidden; background: radial-gradient(70% 70% at 50% 60%, #fff3d6 0%, #e8d5b0 55%, #b99a6c 100%); display: grid; place-items: center; position: relative; }
.sheet .pic canvas { max-width: 78%; max-height: 84%; filter: drop-shadow(0 18px 18px rgba(60, 30, 0, 0.35)); }
.sheet .close { position: absolute; inset-inline-end: 10px; top: 10px; width: 36px; height: 36px; border-radius: var(--r1); background: rgba(11, 21, 16, 0.75); display: grid; place-items: center; }
.sheet .body { padding: 18px 20px; overflow: auto; flex: 1; }
.sheet .cat { font-weight: 500; font-size: 13px; color: var(--mari); }
.sheet h2 { margin: 6px 0 0; font-weight: 700; font-size: 22px; line-height: 1.2; }
.sheet .price { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.sheet .price b { font-weight: 200; font-size: 54px; line-height: 1; }
.sheet .price s { color: var(--muted); font-size: 18px; }
.sheet .price em { font-style: normal; color: var(--muted); font-size: 15px; }
.sheet .facts { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; color: var(--muted); }
.sheet .facts dd { margin: 0; color: var(--paper); }
.sheet .act { padding: 16px 20px 20px; display: flex; gap: 10px; border-top: 1px solid var(--faint); }
.qty { display: flex; align-items: center; border-radius: var(--r1); background: var(--faint); }
.qty button { width: 42px; height: 48px; font-size: 22px; }
.qty span { min-width: 28px; text-align: center; font-weight: 700; font-size: 18px; }
.primary { flex: 1; height: 48px; border-radius: var(--r1); background: var(--mari) !important; color: var(--mari-ink) !important; font-weight: 700 !important; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: filter 0.2s; }
.primary:hover { filter: brightness(1.06); }
.primary:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
.ghost { height: 48px; padding: 0 16px; border-radius: var(--r1); background: var(--faint) !important; font-weight: 600 !important; }

/* trolley panel */
.cart .rows { display: flex; flex-direction: column; gap: 2px; }
.cart .row { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--faint); }
.cart .row i { width: 54px; height: 54px; border-radius: var(--r1); background: #efe1c4 no-repeat; }
.cart .row b { font-weight: 600; font-size: 14px; line-height: 1.25; display: block; }
.cart .row small { color: var(--muted); font-size: 13px; }
.cart .row .qty button { width: 32px; height: 34px; font-size: 18px; }
.cart .sum { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 14px; font-size: 15px; color: var(--muted); }
.cart .sum .tot { color: var(--paper); font-weight: 800; font-size: 22px; }
.cart .empty { color: var(--muted); font-size: 15px; padding: 24px 0; text-align: center; }

/* checkout: the step rail */
.rail { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 16px); white-space: nowrap; display: flex; gap: 4px; padding: 6px; border-radius: var(--r2); background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: opacity 0.5s; }
.rail .st { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: var(--r1); color: var(--muted); font-size: 14px; font-weight: 500; transition: background 0.4s, color 0.4s; }
.rail .st i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r1); background: var(--faint); transition: background 0.4s, color 0.4s; }
.rail .st.done { color: var(--paper); }
.rail .st.done i { background: var(--leaf); color: #fff; }
.rail .st.on { background: rgba(242, 181, 58, 0.16); color: var(--paper); font-weight: 700; }
.rail .st.on i { background: var(--mari); color: var(--mari-ink); }

/* what people say */
.caption { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: max-content; max-width: min(720px, calc(100vw - 460px)); padding: 12px 18px; border-radius: var(--r2); background: rgba(11, 21, 16, 0.8); font-size: 18px; line-height: 1.35; text-align: center; transition: opacity 0.5s, transform 0.5s; }
.caption.hide { transform: translate(-50%, 8px); }
.caption b { display: block; font-size: 13px; font-weight: 600; color: var(--mari); margin-bottom: 2px; }

#ui.with-till .caption, #ui.with-till .rail { left: calc((100% - min(432px, 34vw)) / 2); }
#ui.with-till .caption { max-width: calc(100vw - min(432px, 34vw) - 40px); }

/* the till */
.till { position: absolute; inset-inline-end: 16px; top: 76px; bottom: 16px; width: min(400px, calc(100vw - 32px)); border-radius: var(--r2); background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.3s; }
.till.hide { transform: translateX(30px); }
.till .head { padding: 18px 20px 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.till .cat { font-weight: 500; font-size: 13px; color: var(--mari); }
.till h2 { margin: 4px 0 0; font-weight: 800; font-size: 24px; line-height: 1.15; }
.till h3 { margin: 14px 0 7px; font-weight: 600; font-size: 14px; color: var(--muted); }
.till .lines { flex: 1; overflow: auto; padding: 0 20px; scroll-behavior: smooth; }
.till .line { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--faint); }
.till .line b { font-weight: 600; font-size: 14px; line-height: 1.25; display: block; }
.till .line small { color: var(--muted); font-size: 13px; }
.till .line .amt { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.till .line.flash { animation: flash 0.9s ease; }
@keyframes flash { 0% { background: rgba(242, 181, 58, 0.32); } 100% { background: transparent; } }
.till .foot { padding: 14px 20px 20px; border-top: 1px solid var(--faint); display: flex; flex-direction: column; gap: 6px; }
.till .sumline { display: flex; justify-content: space-between; color: var(--muted); font-size: 15px; }
.till .big { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.till .big span { font-weight: 600; font-size: 16px; }
.till .big b { font-weight: 200; font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; }
.till .foot .primary { flex: 0 0 auto; margin-top: 10px; }
.till .choose { flex: 1; overflow: auto; padding: 0 20px 12px; }
.till .group { display: flex; flex-direction: column; gap: 6px; }
.till .group.pay, .till .group.addr { flex-direction: row; }
.till .group.addr .opt { flex: 1; align-items: flex-start; flex-direction: column; gap: 6px; }
.till .group.addr .opt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.till .opt { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r1); background: var(--faint) !important; text-align: start; outline: 2px solid transparent; transition: outline-color 0.2s, background 0.2s; }
.till .opt div { flex: 1; min-width: 0; }
.till .opt b { display: block; font-weight: 700; font-size: 15px; }
.till .opt small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.till .opt em { font-style: normal; font-weight: 600; font-size: 14px; }
.till .opt.on { outline-color: var(--mari); background: rgba(242, 181, 58, 0.14) !important; }
.till .opt.on > svg { color: var(--mari); }
.till .opt.tile { flex: 1; flex-direction: column; gap: 5px; padding: 11px 6px; text-align: center; }
.till .opt.tile b { font-size: 13px; font-weight: 600; line-height: 1.2; }
.till .paybox { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; }
.till .paybox > svg { color: var(--mari); }
.till .paybox b { font-size: 20px; font-weight: 700; }
.till .paybox small { color: var(--muted); font-size: 15px; }
.till .paybox small.ok { color: #9be3bd; font-weight: 600; }
.till .paybox.ok > svg { color: #9be3bd; }
.till .qrwrap { padding: 10px; border-radius: var(--r2); background: #fff; line-height: 0; }
.till .qrwrap canvas { width: 190px; height: 190px; image-rendering: pixelated; }
.till .receipt { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.till .receipt .lines { flex: 0 0 auto; overflow: visible; }
.till .receipt .facts { margin: 14px 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; color: var(--muted); }
.till .receipt .facts dd { margin: 0; color: var(--paper); }
.till .okmark { width: 40px; height: 40px; border-radius: var(--r2); background: var(--leaf); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }

/* cuts */
.fade { position: absolute; inset: 0; background: #050806; transition: opacity 450ms ease; z-index: 5; }

/* the order on its way */
.track { position: absolute; inset-inline-start: 16px; bottom: 16px; width: min(340px, calc(100vw - 32px)); padding: 16px 18px; border-radius: var(--r2); background: var(--panel); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); transition: opacity 0.5s, transform 0.5s; }
.track.hide { transform: translateY(14px); }
.track .cat { font-weight: 500; font-size: 13px; color: var(--mari); }
.track .min { display: block; font-weight: 200; font-size: 56px; line-height: 1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.track .at { color: var(--muted); font-size: 14px; }
.track .bar { height: 3px; margin: 14px 0 12px; background: var(--faint); border-radius: 2px; overflow: hidden; }
.track .bar i { display: block; height: 100%; width: 0; background: var(--mari); transition: width 0.4s linear; }
.track ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.track li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.track li i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r1); background: var(--faint); }
.track li.done { color: var(--paper); }
.track li.done i { background: var(--leaf); color: #fff; }
.track li.on { color: var(--paper); font-weight: 700; }
.track li.on i { background: var(--mari); color: var(--mari-ink); }
.track li time { font-size: 13px; color: var(--muted); font-weight: 400; }
.track .rider { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--faint); }
.track .face { width: 38px; height: 38px; border-radius: var(--r2); background: #b53a2c; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.track .rider div { flex: 1; }
.track .rider b { display: block; font-size: 15px; }
.track .rider small { color: var(--muted); font-size: 13px; }
.track .call { width: 40px; height: 40px; border-radius: var(--r1); background: var(--faint) !important; display: grid; place-items: center; }
.track .call:hover { background: rgba(242, 181, 58, 0.22) !important; }
/* while the tracking card is up, captions centre in the room beside it */
#ui.with-track .caption { left: calc(372px + (100% - 372px) / 2); max-width: min(720px, calc(100vw - 412px)); }

/* delivered: the card at the end of the ride */
.delivered { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); opacity: 0; width: min(420px, calc(100vw - 32px)); padding: 26px 26px 22px; border-radius: var(--r2); background: var(--panel); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); text-align: center; transition: opacity 0.6s, transform 0.6s cubic-bezier(.2,.8,.2,1); }
.delivered.in { opacity: 1; transform: translate(-50%, -50%); }
.delivered .okmark.big { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: var(--r2); background: var(--leaf); color: #fff; display: grid; place-items: center; }
.delivered .cat { font-weight: 500; font-size: 13px; color: var(--mari); }
.delivered h2 { margin: 4px 0 8px; font-weight: 800; font-size: 34px; line-height: 1.1; }
.delivered p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.delivered .rate { margin: 18px 0; padding: 14px; border-radius: var(--r1); background: var(--faint); }
.delivered .rate small { display: block; color: var(--muted); font-size: 14px; min-height: 1.3em; }
.delivered .stars { display: flex; justify-content: center; gap: 4px; margin: 6px 0; }
.delivered .stars button { width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); transition: color 0.2s, transform 0.2s; }
.delivered .stars button.on { color: var(--mari); }
.delivered .stars button.on svg { fill: currentColor; }
.delivered .stars button:hover { transform: scale(1.1); }
.delivered .primary { width: 100%; }

@media (max-width: 720px) {
  .sheet { inset-inline: 8px; width: auto; top: auto; height: min(72vh, 620px); bottom: 8px; }
  .sheet.hide { transform: translateY(40px); }
  .hint { bottom: 76px; white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 32px); }
  .goto .list { grid-template-columns: 1fr 1fr; }
  .till { inset-inline: 8px; width: auto; top: auto; height: min(64vh, 560px); bottom: 8px; }
  .till.hide { transform: translateY(40px); }
  .rail { top: 8px; padding: 4px; gap: 2px; }
  .rail .st { padding: 5px; }
  .rail .st.on { padding: 5px 10px 5px 5px; }
  .rail .st span { display: none; }
  .rail .st.on span { display: inline; }
  .caption { max-width: calc(100vw - 32px); bottom: auto; top: 62px; font-size: 16px; }
  #ui.with-till .caption, #ui.with-till .rail { left: 50%; }
  #ui.with-till .caption { max-width: calc(100vw - 32px); }
  #ui.with-track .caption { left: 50%; max-width: calc(100vw - 32px); }
  .track { inset-inline: 8px; width: auto; bottom: 8px; padding: 10px 12px; }
  .track .eta > div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
  .track .eta .cat { grid-column: 1 / -1; font-size: 12px; }
  .track .min { font-size: 30px; margin-top: 2px; }
  .track .at { font-size: 13px; }
  .track .bar { margin: 8px 0; }
  .track li i { width: 22px; height: 22px; }
  .track li { font-size: 11px; }
  .track .rider { margin-top: 8px; padding-top: 8px; gap: 10px; }
  .track .face { width: 30px; height: 30px; font-size: 15px; }
  .track .rider b { font-size: 14px; }
  .track .rider small { font-size: 12px; }
  .track .call { width: 34px; height: 34px; }
  .track ol { grid-template-columns: repeat(4, 1fr); }
  .track li { grid-template-columns: 1fr; justify-items: center; text-align: center; font-size: 12px; gap: 4px; }
  .track li time { display: none; }
}
@media (prefers-reduced-motion: reduce) { #ui * { transition: none !important; } }