/* ============================================================
   COXINHA EXPRESS — Delivery page styles (extends styles.css)
   ============================================================ */
.nav-links a.current { color: var(--fg); background: var(--cx-glass-hi); }

/* ---- header ---- */
.del-head { position: relative; padding: 168px 0 30px; overflow: hidden; }
.del-head .bokeh.dh1 { width: 500px; height: 500px; left: -150px; top: -70px; background: radial-gradient(circle, var(--cx-emerald), transparent 65%); }
.del-head .bokeh.dh2 { width: 460px; height: 460px; right: -120px; top: -10px; background: radial-gradient(circle, var(--cx-blue), transparent 65%); }
.del-head .wrap { position: relative; z-index: 2; }
.del-head h1 { font-size: clamp(46px, 8.4vw, 104px); letter-spacing: -0.035em; line-height: 0.9; margin-top: 20px; }
.del-head h1 .accent { background: linear-gradient(100deg, var(--cx-lead), var(--cx-lead-3) 55%, var(--cx-lead-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.del-head .lede { margin-top: 22px; max-width: 540px; color: var(--fg-2); font-size: 19px; line-height: 1.6; }

/* ---- ETA hero ---- */
.eta-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 880px){ .eta-hero { grid-template-columns: 1fr; } }
.eta-big { font-family: var(--cx-display); font-weight: 700; font-size: clamp(80px, 16vw, 200px); line-height: 0.86; letter-spacing: -0.04em; }
.eta-big b { background: linear-gradient(120deg, var(--cx-lead), var(--cx-lead-3) 60%, var(--cx-lead-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eta-big span { font-size: 0.28em; color: var(--fg-3); -webkit-text-fill-color: var(--fg-3); }
.eta-sub { color: var(--fg-2); font-size: 17px; margin-top: 16px; max-width: 420px; line-height: 1.6; }
.fresh-pill { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; padding: 9px 16px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cx-lead) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cx-lead) 36%, transparent);
  color: var(--cx-lead); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.fresh-pill .led { width: 8px; height: 8px; border-radius: 50%; background: var(--cx-lead); box-shadow: 0 0 10px var(--cx-lead); animation: ledPulse 2s ease-in-out infinite; }
@keyframes ledPulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* floating tracking / summary cards */
.track-stack { position: relative; min-height: 420px; }
.track-card { position: absolute; padding: 18px 20px; border-radius: var(--r-xl); background: rgba(16,16,22,0.82);
  border: 1px solid var(--cx-glass-border); backdrop-filter: blur(16px); box-shadow: 0 30px 64px -30px rgba(0,0,0,0.9);
  animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.track-card .tc-row { display: flex; align-items: center; gap: 12px; }
.track-card .tc-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; color: var(--cx-lead);
  background: color-mix(in srgb, var(--cx-lead) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cx-lead) 34%, transparent); }
.track-card .tc-ic svg { width: 19px; height: 19px; }
.track-card .tc-t { font-weight: 600; font-size: 14.5px; }
.track-card .tc-s { color: var(--fg-3); font-size: 12.5px; margin-top: 1px; }
.track-card.t1 { top: 0; left: 0; width: 260px; z-index: 3; --cx-lead-local: var(--cx-emerald); animation-delay: 0s; }
.track-card.t2 { top: 130px; right: 0; width: 250px; z-index: 4; animation-delay: 1.4s; }
.track-card.t3 { bottom: 0; left: 8%; width: 280px; z-index: 5; animation-delay: 2.6s; }
.track-card .bar { position: relative; height: 6px; border-radius: 4px; background: var(--cx-hairline); margin-top: 14px; overflow: hidden; }
.track-card .bar i { position: absolute; inset: 0 35% 0 0; background: var(--cx-lead); border-radius: 4px; box-shadow: 0 0 12px var(--cx-lead); }
.track-card .amt { font-family: var(--cx-display); font-weight: 700; font-size: 22px; }
@media (max-width: 880px){ .track-stack { min-height: 360px; max-width: 420px; margin-inline: auto; } }

/* ---- zones ---- */
.zones-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
@media (max-width: 900px){ .zones-wrap { grid-template-columns: 1fr; } }
.zone-list { display: flex; flex-direction: column; gap: 14px; }
.zone-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--r-xl);
  background: var(--cx-bg-2); border: 1px solid var(--cx-hairline); transition: transform .4s, border-color .4s; }
.zone-card:hover { transform: translateX(6px); border-color: var(--cx-glass-border); }
.zone-card .zdot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--zc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--zc) 20%, transparent), 0 0 16px var(--zc); }
.zone-card .zn { font-family: var(--cx-display); font-weight: 600; font-size: 18px; }
.zone-card .zd { color: var(--fg-3); font-size: 13px; margin-top: 2px; }
.zone-card .zmeta { margin-left: auto; text-align: right; white-space: nowrap; }
.zone-card .zeta { font-family: var(--cx-display); font-weight: 700; font-size: 17px; color: var(--cx-lead-3); }
.zone-card .zfee { color: var(--fg-3); font-size: 12px; margin-top: 2px; }

.del-map { position: relative; min-height: 420px; border-radius: var(--r-2xl); overflow: hidden;
  background: radial-gradient(120% 120% at 55% 45%, var(--cx-bg-3), var(--cx-ink)); border: 1px solid var(--cx-hairline); }
.del-map .map-grid { position: absolute; inset: 0; opacity: 0.6;
  background-image: linear-gradient(var(--cx-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--cx-hairline) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%); }
.del-map .ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1.5px dashed; }
.del-map .ring.r1 { width: 160px; height: 160px; border-color: color-mix(in srgb, var(--cx-emerald) 60%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--cx-emerald) 16%, transparent), transparent 70%); }
.del-map .ring.r2 { width: 300px; height: 300px; border-color: color-mix(in srgb, var(--cx-blue) 45%, transparent); }
.del-map .ring.r3 { width: 440px; height: 440px; border-color: color-mix(in srgb, var(--cx-orange) 32%, transparent); }
.del-map .store { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cx-lead); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cx-lead) 22%, transparent), 0 0 24px var(--cx-lead); }
.del-map .rider { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--cx-yellow);
  box-shadow: 0 0 16px var(--cx-yellow); transform: translate(60px, -90px); }

/* ---- payment chips ---- */
.pay { display: flex; flex-wrap: wrap; gap: 12px; }
.pay .chip { display: inline-flex; align-items: center; gap: 11px; padding: 14px 20px; border-radius: var(--r-lg);
  background: var(--cx-bg-2); border: 1px solid var(--cx-hairline); font-size: 15px; font-weight: 500; transition: transform .4s, border-color .4s; }
.pay .chip:hover { transform: translateY(-4px); border-color: var(--cx-glass-border); }
.pay .chip .pi { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--cx-lead);
  background: color-mix(in srgb, var(--cx-lead) 12%, transparent); }
.pay .chip .pi svg { width: 18px; height: 18px; }

/* ---- cinematic gallery (parallax) ---- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 16px; }
@media (max-width: 900px){ .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } }
.gtile { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--cx-hairline);
  display: flex; align-items: flex-end; padding: 18px; }
.gtile .gp { position: absolute; inset: -12% 0; background-size: cover; background-position: center; will-change: transform; }
.gtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.55)); }
.gtile .gl { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg); font-weight: 600; }
.gtile .gl svg { width: 14px; height: 14px; opacity: 0.7; }
.gtile.span2 { grid-column: span 2; }
.gtile.row2 { grid-row: span 2; }
@media (max-width: 900px){ .gtile.span2 { grid-column: span 2; } .gtile.row2 { grid-row: span 1; } }
/* tinted "macro food" placeholders */
.gtile.g1 .gp { background: radial-gradient(120% 120% at 30% 20%, rgba(233,162,59,0.55), rgba(8,8,10,1) 72%); }
.gtile.g2 .gp { background: radial-gradient(120% 120% at 70% 30%, rgba(255,122,26,0.5), rgba(8,8,10,1) 72%); }
.gtile.g3 .gp { background: radial-gradient(120% 120% at 40% 70%, rgba(0,200,120,0.45), rgba(8,8,10,1) 72%); }
.gtile.g4 .gp { background: radial-gradient(120% 120% at 60% 40%, rgba(255,210,63,0.45), rgba(8,8,10,1) 72%); }
.gtile.g5 .gp { background: radial-gradient(120% 120% at 30% 60%, rgba(43,108,219,0.5), rgba(8,8,10,1) 72%); }
.gtile.g6 .gp { background: radial-gradient(120% 120% at 70% 70%, rgba(233,162,59,0.45), rgba(8,8,10,1) 72%); }

/* ---- reuse hours (compact) ---- */
.del-hours { display: flex; flex-direction: column; gap: 2px; }
.del-hours .hrow { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--cx-hairline); font-size: 14px; }
.del-hours .hrow:last-child { border-bottom: 0; }
.del-hours .hrow .day { color: var(--fg-2); }
.del-hours .hrow .hr { color: var(--fg-3); white-space: nowrap; }
.del-hours .hrow.today { color: var(--fg); font-weight: 600; }
.del-hours .hrow.today .day { color: var(--fg); }
.del-hours .hrow.today .hr { color: var(--cx-lead-3); }
.del-hours .hrow.today .day::after { content: "Today"; margin-left: 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cx-lead); background: color-mix(in srgb, var(--cx-lead) 14%, transparent); padding: 2px 7px; border-radius: var(--r-pill); }

/* ============================================================
   MOBILE FIX — single-column, no overflow, no clipped cards
   ============================================================ */
@media (max-width: 760px) {
  .del-head { padding: 124px 0 18px; }
  .del-head h1 { margin-top: 14px; }
  .del-head .lede { font-size: 17px; margin-top: 16px; }

  /* ETA hero: tighter, balanced 22 min */
  .eta-hero { gap: 24px; }
  .eta-big { font-size: clamp(72px, 22vw, 110px); }
  .eta-sub { font-size: 16px; max-width: none; }
  .fresh-pill { margin-top: 18px; }

  /* tracking cards: stop floating absolutely → stack as full-width glass cards */
  .track-stack { min-height: 0; max-width: none; margin: 0; display: flex; flex-direction: column; gap: 12px; }
  .track-card { position: static; width: 100%; animation: none; padding: 16px 18px; }
  .track-card.t1, .track-card.t2, .track-card.t3 { top: auto; left: auto; right: auto; bottom: auto; width: 100%; }

  /* zones + map: single column, map below, capped height so it never clips */
  .zones-wrap { gap: 18px; }
  .del-map { min-height: 280px; }

  /* payment + hours grid (inline desktop grid on the section) → one column */
  section .delivery { display: block !important; }
  section .delivery > * + * { margin-top: 28px; }

  /* gallery: simpler, no tall row spans escaping */
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 132px; gap: 12px; }
  .gtile.span2 { grid-column: span 2; }
  .gtile.row2 { grid-row: span 1; }

  /* leave room for the sticky bottom CTA (engine sets body padding too) */
  .footer { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}

/* guard against any stray horizontal overflow on small screens */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .del-head .bokeh.dh1, .del-head .bokeh.dh2 { filter: blur(60px); opacity: 0.5; }
}