/* ============================================================
   HOME — Figma 101:53392, 360 x 830.
   Top-level blocks are placed at their Figma y; everything
   inside them is flex, the way the frames are auto-laid out.
   ============================================================ */
#home{background:#fff;font-family:var(--fp);color:var(--ink)}

/* ---------- 0 - 84 · status bar + location ---------- */
.hdr{position:absolute;top:0;left:0;width:360px}
.hdr-status{display:block;width:360px;height:34px;object-fit:cover}
.hdr-bar{
  height:50px;background:var(--purple-deep);
  padding:4px 12px 10px;display:flex;align-items:center;gap:28px;
}
.hdr-place{width:222px;min-width:0}
.hdr-name{
  display:flex;align-items:center;
  font-size:18px;font-weight:500;line-height:1.2;color:var(--purple-text);
}
.hdr-chev{width:16px;height:16px;color:#fadcff;flex:none}
.hdr-addr{
  font-size:14px;font-weight:400;line-height:1;color:var(--purple-sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hdr-icons{display:block;width:86px;height:28px;margin-left:auto}

/* ---------- 84 - 153 · the four surfaces ---------- */
.tabs{
  position:absolute;top:84px;left:0;width:360px;height:69px;
  background:var(--purple-strip);
  isolation:isolate;   /* keep the tab z-order below from leaking past the strip */
}
.tab{
  position:absolute;top:5px;left:var(--x);width:var(--w);height:64px;
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
}
.tab:focus-visible{outline:2px solid #f9cfff;outline-offset:-3px;border-radius:8px}
/* the strip is auto-layout with a -6px gap and "first on top" stacking, so each tab
   overlaps the one to its right — the active tab's flare sits over Instamart, not under it */
.tab:nth-child(1){z-index:4}
.tab:nth-child(2){z-index:3}
.tab:nth-child(3){z-index:2}
.tab:nth-child(4){z-index:1}
.tab-shape{position:absolute;top:-.5px;left:-.5px}
.tab-ico,.tab-lab{position:absolute;left:50%;transform:translateX(-50%)}
.tab-ico{top:8px;object-fit:contain}
.tab-lab{
  top:48px;font-size:10px;font-weight:400;line-height:1;
  color:var(--tab-label);white-space:nowrap;
}
/* the active tab's icon is 32 tall, not 34, so its label sits 2px higher */
.tab--on .tab-lab{top:46px;font-weight:500;color:var(--tab-label-on)}

/* ---------- 153 - 260 · search + filters ---------- */
.srch{
  position:absolute;top:153px;left:0;width:360px;height:107px;
  background:var(--purple);padding:12px 0 8px;
  display:flex;flex-direction:column;gap:16px;
}
.srch-row{display:flex;align-items:center;gap:6px;padding:0 12px}
.srch-bar{
  width:288px;height:42px;background:#fff;border-radius:var(--r-field);
  padding:0 14px;display:flex;align-items:center;justify-content:space-between;
}
.srch-q{
  display:flex;align-items:center;gap:9px;
  font-size:16px;font-weight:400;color:var(--placeholder);
}
.srch-ico{width:18px;height:18px;color:var(--placeholder)}
.srch-v{display:flex;align-items:center;gap:12px}
.srch-div{width:1px;height:20px;background:#dbdbdb}
.srch-mic{width:18px;height:18px;color:var(--mic)}

.veg{
  width:42px;height:42px;background:#fff;border-radius:var(--r-field);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.veg-lab{font-size:9px;font-weight:500;letter-spacing:.003em;color:var(--ink)}
.veg-track{width:24px;height:12px;background:#e2e2e2;border-radius:6px;padding:1px;display:block}
.veg-knob{
  width:11px;height:11px;background:#fff;border-radius:4px;
  display:grid;place-items:center;
}
.veg-knob i{width:6px;height:6px;border-radius:1.5px;background:var(--veg);display:block}

.filters{padding-left:12px}
.filters-row{display:flex;align-items:center;height:26px}
.chip{
  display:flex;align-items:center;gap:5px;padding:4px 9px;
  font-size:10.5px;font-weight:500;letter-spacing:.004em;
  color:rgba(255,255,255,.62);white-space:nowrap;
}
.chip--on{color:#fff}
.chip-ico{width:14px;height:14px;fill:rgba(255,255,255,.62);flex:none}
.chip--on .chip-ico{fill:#fff}
.chip-sep{width:1px;height:14px;background:rgba(255,255,255,.22);flex:none}
.filters-rule{position:relative;width:351px;height:3px}
.filters-rule::after{
  content:'';position:absolute;left:9px;right:0;bottom:0;height:1px;
  background:rgba(255,255,255,.14);
}
.filters-on{
  position:absolute;left:0;top:0;width:54px;height:3px;
  background:var(--underline);border-radius:1.5px;
}

/* ============================================================
   260 - 444 · THE BANNER
   Left: the offer. Right: his own last five orders, on a
   receipt, adding up to a number he can check.
   ============================================================ */
.banner{
  position:absolute;top:260px;left:0;width:360px;height:184px;
  background:var(--purple);
  border-radius:0 0 var(--r-banner) var(--r-banner);
  font-family:var(--ft);
}
.bn-star{position:absolute;width:6px;height:6px;fill:#fff}
.bn-star--a{left:4px;top:29px;opacity:.7}
.bn-star--b{left:100px;top:47px}

.bn-left{
  position:absolute;left:12px;top:30px;width:145px;height:123px;
  display:flex;flex-direction:column;gap:20px;
}
.bn-head{
  font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:116%;color:#fff;
}

.bn-cta{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bn-btn{
  font:inherit;font-size:12px;font-weight:500;letter-spacing:-.01em;
  color:#fff;
  display:flex;align-items:center;gap:2px;
  /* Figma 203:1136 — fill runs left to right on a 12.8deg tilt; the stroke
     runs straight down, holding white until 37.5% then turning gold */
  background:linear-gradient(103deg,var(--cta-a),var(--cta-b)) padding-box,
             linear-gradient(180deg,rgba(255,255,255,.2) 37.5%,#f8cd5c 100%) border-box;
  border:1px solid transparent;border-radius:8px;
  height:36px;line-height:16px;padding:0 12px;cursor:pointer;
  transition:transform .12s ease,filter .12s ease;
}
.bn-btn img{width:28px;height:12px;object-fit:contain;display:block}
.bn-btn:hover{filter:brightness(1.12)}
.bn-btn:active{transform:scale(.96)}
.bn-btn:focus-visible{outline:2px solid var(--cta-ink);outline-offset:2px}
.bn-fine{font-size:8.5px;font-weight:500;line-height:130%;color:#fff}

.bn-right{position:absolute;left:166px;top:0;width:192px;height:173px}
.bn-glow{
  position:absolute;left:10px;top:38px;width:172px;height:124px;
  border-radius:50%;background:rgba(226,226,226,.4);
  filter:blur(25px);
}
.bn-paper{
  position:absolute;inset:0 -1px 0 0;
  background:url(../assets/img/receipt.png) center / 193px 173px no-repeat;
}

.rcpt{
  position:absolute;left:21px;top:26px;width:148px;
  display:flex;flex-direction:column;gap:6px;
  color:var(--receipt-ink);
}
.rcpt-head{text-align:center;font-size:6.5px;font-weight:500;
  letter-spacing:.08em;line-height:8px;color:rgba(43,7,51,.7)}
.rcpt-rule{display:block;height:1px;
  background:repeating-linear-gradient(90deg,rgba(43,7,51,.55) 0 1.45px,transparent 1.45px 3.88px)}
.rcpt-rows{list-style:none;display:flex;flex-direction:column;gap:2px}
.rcpt-rows li{display:flex;justify-content:space-between;align-items:center;line-height:8px}
.rcpt-rows span{font-size:6.79px;font-weight:500;letter-spacing:-.01em;color:rgba(43,7,51,.58)}
.rcpt-rows b{font-size:7.27px;font-weight:700;letter-spacing:-.01em;color:rgba(43,7,51,.95)}
.rcpt-total{display:flex;flex-direction:column;align-items:center;gap:3px}
.rcpt-lab{font-size:6.2px;font-weight:500;letter-spacing:.08em;line-height:8px;
  color:rgba(43,7,51,.5)}
.rcpt-swap{display:flex;align-items:center;justify-content:center;gap:7px;height:26px}
.rcpt-was{font-size:13px;font-weight:700;letter-spacing:-.02em;color:rgba(43,7,51,.45)}
.rcpt-arrow{font-size:9px;font-weight:500;font-style:normal;color:rgba(43,7,51,.45)}
.rcpt-now{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:26px;
  color:var(--chip-ink)}
.rcpt-chip{font-size:6.5px;font-weight:700;letter-spacing:-.01em;line-height:8px;
  color:var(--chip-ink)}

/* ============================================================
   462 - 820 · the feed underneath
   ============================================================ */
.body{position:absolute;top:462px;left:0;width:360px;display:flex;flex-direction:column;gap:16px}
.body-top{display:flex;flex-direction:column;gap:12px}

.seg{
  margin:0 12px;height:32px;background:var(--toggle-bg);border-radius:100px;
  padding:4px 16px 4px 4px;display:flex;align-items:center;gap:8px;
}
.seg-on,.seg-off{
  height:24px;border-radius:80px;display:grid;place-items:center;
  font-size:10px;font-weight:600;letter-spacing:.02em;
}
.seg-on{width:170px;background:#fff;color:var(--accent)}
.seg-off{flex:1;color:var(--ink-2)}

.rail{
  display:flex;gap:10px;padding:0 12px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar,.cats::-webkit-scrollbar{display:none}
.card{width:104px;flex:none}
.card-shot{
  position:relative;width:104px;height:120px;border-radius:var(--r-card);
  background-size:cover;background-position:center;overflow:hidden;
}
.card-heart{position:absolute;right:8px;top:8px;width:16px;height:16px}
.card-scrim{
  position:absolute;left:0;right:0;bottom:0;height:54px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,.78) 100%);
}
.card-offer{position:absolute;left:8px;bottom:8px;color:#fff}
.card-offer em{display:block;font-style:normal;font-size:10px;font-weight:600;line-height:12px}
.card-offer b{display:block;font-family:var(--ft);font-size:10px;font-weight:700;line-height:13px}
.card-ad{
  position:absolute;right:8px;bottom:7px;
  font-family:var(--ft);font-size:6px;font-weight:500;color:#fff;
}
.card-name{
  margin-top:8px;height:12px;font-size:12px;font-weight:600;line-height:12px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-rate{
  display:flex;align-items:center;gap:3px;height:18px;padding:4px 0 2px;
  font-size:10px;font-weight:400;letter-spacing:-.02em;line-height:12px;color:var(--ink);
}
.card-star{
  width:10px;height:10px;border-radius:50%;background:var(--rating);
  display:grid;place-items:center;flex:none;
}
.card-star svg{width:6px;height:6px;fill:#fff}
.card-cuisine{height:10px;font-size:10px;font-weight:400;line-height:10px;color:var(--muted)}

.rule{display:block;height:1px;margin-bottom:-1px;background:var(--hairline)}

.body-mind{display:flex;flex-direction:column;gap:12px;padding:0 12px}
.mind{font-size:14px;font-weight:500;line-height:14px;color:var(--ink)}
.cats{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;align-items:center}
.cat{
  width:78px;flex:none;padding:0 2px;
  display:flex;flex-direction:column;align-items:center;
}
.cat img{width:74px;object-fit:cover;display:block}
.cat span{
  width:74px;text-align:center;
  font-size:12px;font-weight:500;line-height:12px;color:var(--muted-2);
}

/* ============================================================
   The two numbers on the receipt.
   Only these move. The ₹212 lands first because it is the
   thing being answered; the ₹0 arrives after it, so the swap
   reads as a consequence rather than a pair of numbers.
   ============================================================ */
@keyframes rcpt-was-in{
  from{opacity:0;transform:translateY(4px)}
  to  {opacity:1;transform:none}
}
@keyframes rcpt-now-in{
  from{opacity:0;transform:scale(.55)}
  60% {opacity:1;transform:scale(1.09)}
  to  {opacity:1;transform:scale(1)}
}

@media (prefers-reduced-motion:no-preference){
  #home.is-live .rcpt-was{animation:rcpt-was-in .34s ease-out .18s both}
  #home.is-live .rcpt-now{animation:rcpt-now-in .46s cubic-bezier(.34,1.3,.5,1) .46s both}
}