/* ============================================================
   PIDE.NOW STOREFRONT — super-app structural components
   MODULE: food  ·  SHARED across all food themes
   ------------------------------------------------------------
   Loaded alongside the active theme CSS on every food page.
   Only STRUCTURE lives here; every colour comes from the active
   theme's --t-* variables, so this file adapts to pide_default
   (Rosa), pide_classic (Orange) and pide_dark automatically.
   Never hardcode a colour here — always var(--t-*).
   ============================================================ */

/* ── Shared building blocks ───────────────────────────────── */
.sf-shell { max-width: 48rem; margin-left: auto; margin-right: auto; }
.sf-tabbar-spacer { height: 4.5rem; }
.sf-bar-spacer { height: 5.5rem; }
.sf-menu-spacer { height: 8.5rem; }
.sf-flow-spacer { height: 1.5rem; }

/* Component classes (theme-btn-*, sf-sum-line, …) set `display`, and their
   stylesheet loads AFTER Tailwind, so a bare `.hidden` loses the cascade and
   JS show/hide toggles silently fail (e.g. the contact "Usar mis datos" button
   or the pickup delivery-fee row stay visible). Make `.hidden` authoritative
   inside storefront pages. Scoped to .theme-page so POS/dashboard (which hide
   via inline style) are unaffected. */
.theme-page .hidden { display: none !important; }

/* ── Filled search pill ───────────────────────────────────── */
.sf-search {
  display: flex; align-items: center; gap: 0.625rem;
  background: var(--t-input-bg);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  padding: 0.8125rem 0.9375rem;
  color: var(--t-text-muted);
  width: 100%;
}
.sf-search input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--t-text-heading); font-size: 0.9375rem; padding: 0;
}
.sf-search input::placeholder { color: var(--t-input-placeholder); }
.sf-search input:focus { outline: none; }
.sf-search .sf-search-ic { color: var(--t-text-accent); flex-shrink: 0; }

/* Personalization drawer (JS-built form) — super-app: chips + big stepper + hero.
   --t-* fallbacks let this render (rosa) on the POS comanda menu, which reuses
   this drawer but doesn't load the food theme. On public pages the theme vars win. */
.pz-form { display: flex; flex-direction: column; gap: 1.75rem; }
.pz-hero { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 0; border-bottom: 1px solid var(--t-border, #EAECEF); }
.pz-hero-pic { width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: var(--t-radius-sm, 0.75rem); object-fit: cover; background: var(--t-bg-item-empty, #FDE7F3); display: inline-flex; align-items: center; justify-content: center; color: var(--t-text-accent, #C20E77); font-size: 1.375rem; }
.pz-hero-info { min-width: 0; }
.pz-hero-desc { margin: 0; font-size: 0.8125rem; color: var(--t-text-muted, #6A7180); line-height: 1.35; }
.pz-hero-base { display: inline-block; margin-top: 0.25rem; font-weight: 800; color: var(--t-text-heading, #0F1216); }
.pz-group + .pz-group { margin-top: 1.75rem; }
.pz-group-h { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
.pz-group-title { margin: 0; font-size: 0.9375rem; font-weight: 800; color: var(--t-text-heading, #0F1216); }
.pz-tag { font-size: 0.6875rem; font-weight: 800; padding: 0.1875rem 0.5rem; border-radius: 999px; }
.pz-tag-req { background: var(--t-primary-light, #FDE7F3); color: var(--t-text-accent, #C20E77); }
.pz-tag-opt { background: var(--t-bg-section-alt, #F3F4F6); color: var(--t-text-muted, #6A7180); }
.pz-hint { margin: 0 0 0.625rem; font-size: 0.75rem; color: var(--t-text-muted, #6A7180); }
.pz-hint-inline { font-weight: 500; color: var(--t-text-muted, #6A7180); }
.pz-chips { display: flex; flex-wrap: wrap; gap: 0.5625rem; }
.pz-chip { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; border: 1.5px solid var(--t-border, #EAECEF); background: var(--t-bg-surface, #FFF); border-radius: 999px; padding: 0.625rem 0.9375rem; font-size: 0.875rem; font-weight: 700; color: var(--t-text-body, #3A4150); cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.pz-chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pz-chip-price { color: var(--t-text-muted, #6A7180); font-weight: 700; }
.pz-chip:has(.pz-chip-input:checked) { background: var(--t-primary, #E4118C); border-color: var(--t-primary, #E4118C); color: var(--t-btn-primary-text, #FFF); }
.pz-chip:has(.pz-chip-input:checked) .pz-chip-price { color: rgb(255 255 255 / 85%); }
.pz-chip:has(.pz-chip-input:focus-visible) { outline: 2px solid var(--t-primary, #E4118C); outline-offset: 2px; }
.pz-error { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--t-error-text, #DC2626); font-weight: 600; }
.pz-qty { text-align: center; }
.pz-qlabel { display: block; font-size: 0.9375rem; font-weight: 800; color: var(--t-text-heading, #0F1216); margin: 0 0 0.625rem; }
.pz-step { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; }
.pz-step button { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.5rem; font-weight: 700; color: var(--t-btn-primary-text, #FFF); background: linear-gradient(140deg, var(--t-primary, #E4118C), var(--t-primary-dark, #B60E70)); box-shadow: 0 8px 20px -6px rgba(var(--t-primary-rgb, 228, 17, 140), 0.5); }
.pz-step button:active { transform: scale(0.94); }
.pz-step-n { font-size: 1.75rem; font-weight: 900; min-width: 2.5rem; text-align: center; color: var(--t-text-heading, #0F1216); font-variant-numeric: tabular-nums; }
.pz-notes { width: 100%; border: 1px solid var(--t-border, #EAECEF); background: var(--t-bg-page, #F4F5F7); border-radius: var(--t-radius-sm, 0.75rem); padding: 0.8125rem; font: inherit; font-size: 0.875rem; color: var(--t-text-heading, #0F1216); resize: none; margin-top: 0.5rem; }
.pz-notes::placeholder { color: var(--t-input-placeholder, #9AA1AC); }
/* green check shown to the right of a required group's label once it's satisfied */
.pz-check { display: none; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #16A34A; color: #fff; font-size: 0.625rem; flex-shrink: 0; }
.pz-check:not(.hidden) { display: inline-flex; }
/* drawer header (eyebrow + item title + round close) */
.pz-dhead { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--t-border, #EAECEF); background: var(--t-bg-surface, #FFF); }
.pz-dhead-t { flex: 1; min-width: 0; }
.pz-dhead-ey { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-text-accent, #C20E77); }
.pz-dhead-title { margin: 0.0625rem 0 0; font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em; color: var(--t-text-heading, #0F1216); }
.pz-dhead-x { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; flex-shrink: 0; background: var(--t-bg-section-alt, #F3F4F6); color: var(--t-text-heading, #0F1216); font-size: 1.125rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
/* drawer footer + add-to-cart button (badge + label + price) */
.pz-dfoot { border-top: 1px solid var(--t-border, #EAECEF); padding: 0.875rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0)); background: var(--t-bg-surface, #FFF); }
.pz-addbtn { width: 100%; border: 0; cursor: pointer; color: var(--t-btn-primary-text, #FFF); font-weight: 800; font-size: 1rem; padding: 0.9375rem 1.125rem; border-radius: var(--t-radius, 1rem); background: linear-gradient(100deg, var(--t-primary, #E4118C), var(--t-primary-dark, #B60E70)); box-shadow: 0 10px 26px -8px rgba(var(--t-primary-rgb, 228, 17, 140), 0.55); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pz-addbtn-lab { display: inline-flex; align-items: center; gap: 0.5625rem; }
.pz-addbtn-badge { background: rgb(255 255 255 / 25%); min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 800; }

/* Header-integrated search: sits on the white store header and reads as a
   soft search affordance rather than a bordered form input. */
.sf-storehead-search { background: var(--t-bg-surface); padding: 0.75rem 1rem 0; }
.sf-search--soft { background: var(--t-bg-page); border-color: transparent; box-shadow: none; }
.sf-search--soft:focus-within { border-color: transparent; box-shadow: 0 0 0 2px rgba(var(--t-primary-rgb), 0.14); }

/* Super-app notice — soft surface card + tinted icon circle, replacing the
   boxy theme-alert-* banners in the storefront. */
.sf-notice { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--t-bg-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius); padding: 0.8125rem 0.875rem; }
.sf-notice-ic { width: 2rem; height: 2rem; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; }
.sf-notice-ic--brand { background: var(--t-primary-light); color: var(--t-text-accent); }
.sf-notice-ic--warn { background: var(--t-badge-warning-bg); color: var(--t-badge-warning-text); }
.sf-notice-ic--info { background: var(--t-alert-info-bg); color: var(--t-alert-info-text); }
.sf-notice-ic--success { background: var(--t-badge-success-bg); color: var(--t-badge-success-text); }
.sf-notice-body { margin: 0; font-size: 0.8125rem; color: var(--t-text-body); line-height: 1.4; }
.sf-notice-body strong { color: var(--t-text-heading); font-weight: 700; }
/* availability notice living inside the store-header card (divided section) */
.sf-storehead-notice { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--t-border); }

/* ── Bottom tab nav (mobile) ──────────────────────────────── */
.sf-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: var(--t-bg-surface);
  border-top: 1px solid var(--t-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -1px 0 0 rgb(0 0 0 / 4%);
}
.sf-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0.5rem 0 0.625rem;
  color: var(--t-text-muted); text-decoration: none;
  font-size: 0.6875rem; font-weight: 600;
  position: relative;
}
.sf-tab .sf-tab-ic { font-size: 1.25rem; line-height: 1; }
.sf-tab.is-active { color: var(--t-text-accent); }
.sf-tab-badge {
  position: absolute; top: 0.125rem; right: 50%; transform: translateX(1.25rem);
  min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: 999px;
  background: var(--t-primary); color: var(--t-btn-primary-text);
  font-size: 0.625rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
@media (width >= 1024px) { .sf-tabbar { display: none; } }

/* ── Sticky cart bar ──────────────────────────────────────── */
.sf-cartbar {
  position: fixed; left: 0.75rem; right: 0.75rem; bottom: 4.75rem; z-index: 41;
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--t-btn-primary-bg); color: var(--t-btn-primary-text);
  border: 0; border-radius: var(--t-radius); cursor: pointer;
  padding: 0.875rem 1rem; width: auto;
  box-shadow: 0 12px 28px -10px rgba(var(--t-primary-rgb), 0.6);
  font-family: inherit; text-align: left;
}
.sf-cartbar:hover { background: var(--t-btn-primary-hover); }
.sf-cartbar .sf-cartbar-count {
  background: var(--t-btn-primary-text); color: var(--t-primary);
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8125rem;
}
.sf-cartbar .sf-cartbar-label { font-weight: 700; font-size: 0.9375rem; }
.sf-cartbar .sf-cartbar-go { margin-left: auto; font-weight: 800; display: inline-flex; align-items: center; gap: 0.375rem; }
@media (width >= 1024px) {
  .sf-cartbar { left: 50%; right: auto; transform: translateX(-50%); min-width: 22rem; bottom: 1.25rem; }
}

/* ── Store header (menu) ──────────────────────────────────── */
.sf-storehead { background: var(--t-bg-surface); }
.sf-storehead-cover {
  height: 8rem;
  background: linear-gradient(120deg, var(--t-primary), var(--t-primary-dark));
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 2.25rem;
}
.sf-storehead-brand { height: 4.25rem; width: auto; }
.sf-storehead-card {
  background: var(--t-bg-surface);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  box-shadow: 0 8px 24px -14px rgb(0 0 0 / 25%);
  margin: -2.25rem 1rem 0; padding: 0.875rem 1rem; position: relative;
}
.sf-storehead-logo {
  width: 3.25rem; height: 3.25rem; border-radius: var(--t-radius-sm);
  object-fit: contain; background: var(--t-bg-item-empty);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--t-text-accent); font-size: 1.5rem; flex-shrink: 0; overflow: hidden;
}
.sf-storehead-back {
  position: absolute; top: 0.75rem; left: 0.75rem;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--t-bg-surface); color: var(--t-text-heading);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9375rem; text-decoration: none; box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}
.sf-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ── Category rail (sticky pills) ─────────────────────────── */
.sf-catrail {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: 0.5rem; overflow-x: auto;
  background: var(--t-bg-surface);
  border-bottom: 1px solid var(--t-border);
  padding: 0.75rem 1rem;
  scrollbar-width: none;
}
.sf-catrail::-webkit-scrollbar { display: none; }
.sf-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.875rem; border-radius: 999px;
  background: var(--t-bg-section-alt); color: var(--t-text-body);
  font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.sf-pill .sf-pill-count {
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px;
  background: var(--t-bg-surface); color: var(--t-text-muted);
  font-size: 0.6875rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
/* active category: dark ink pill (matches the Rápido prototype); overrides the
   theme's rosa .theme-category-link-active via higher specificity. */
.sf-pill.theme-category-link-active { background: var(--t-text-heading) !important; color: var(--t-bg-surface) !important; border-color: transparent !important; box-shadow: none; }
.sf-pill.theme-category-link-active .sf-pill-count { background: var(--t-bg-surface); color: var(--t-text-heading); }

/* ── Promotions strip ─────────────────────────────────────── */
.sf-promostrip { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.875rem 1rem 0.25rem; scrollbar-width: none; }
.sf-promostrip::-webkit-scrollbar { display: none; }
.sf-promo {
  flex: 0 0 15.5rem; border-radius: var(--t-radius); padding: 1.125rem;
  background: linear-gradient(120deg, var(--t-primary), var(--t-primary-dark));
  color: var(--t-btn-primary-text); position: relative; overflow: hidden;
}
.sf-promo h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 800; }
.sf-promo p { margin: 0; font-size: 0.75rem; opacity: 0.92; }
.sf-promo .sf-promo-ic { position: absolute; right: 0.5rem; bottom: -0.375rem; font-size: 3.25rem; opacity: 0.85; }

/* ── Menu list row ────────────────────────────────────────── */
.sf-row { display: flex; gap: 0.75rem; padding: 0.875rem 0; border-bottom: 1px solid var(--t-border); align-items: flex-start; }
.sf-row:last-child { border-bottom: 0; }
.sf-row-thumb {
  flex: 0 0 4.25rem; width: 4.25rem; height: 4.25rem; border-radius: var(--t-radius-sm);
  object-fit: cover; background: var(--t-bg-item-empty);
  display: flex; align-items: center; justify-content: center; color: var(--t-text-accent); font-size: 1.375rem;
  position: relative; overflow: hidden;
}
.sf-row-body { flex: 1; min-width: 0; }
.sf-row-body h3 { margin: 0 0 0.125rem; font-size: 0.9375rem; font-weight: 700; color: var(--t-text-heading); }
.sf-row-body p {
  margin: 0 0 0.375rem; font-size: 0.75rem; color: var(--t-text-muted); line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sf-row-add {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--t-btn-primary-bg); color: var(--t-btn-primary-text);
  border: 0; cursor: pointer; font-size: 1.25rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.sf-row-add:hover { background: var(--t-btn-primary-hover); }
.sf-row-add:disabled { background: var(--t-btn-disabled-bg); color: var(--t-btn-disabled-text); cursor: not-allowed; }
.sf-row-unavailable {
  flex: 0 0 auto; align-self: center; font-size: 0.75rem; font-weight: 700;
  color: var(--t-badge-neutral-text); background: var(--t-badge-neutral-bg);
  border-radius: var(--t-radius-sm); padding: 0.375rem 0.625rem; white-space: nowrap;
}
.sf-secttitle { font-size: 1.0625rem; font-weight: 800; color: var(--t-text-heading); padding: 1rem 0 0.25rem; }
.sf-secttitle .sf-secttitle-sub { display: block; font-size: 0.75rem; font-weight: 500; color: var(--t-text-muted); margin-top: 0.125rem; }

/* ── Branch cards (selector / landing) ────────────────────── */
.sf-branch {
  display: block; text-decoration: none; color: inherit;
  background: var(--t-bg-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-radius); overflow: hidden;
}
.sf-branch-cover {
  height: 6rem; position: relative;
  background: var(--t-bg-item-empty);
  display: flex; align-items: center; justify-content: center;
  color: var(--t-text-accent); font-size: 2.25rem;
}
.sf-branch-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-branch-status { position: absolute; top: 0.625rem; right: 0.625rem; }
.sf-branch-body { padding: 0.875rem 1rem 1rem; }
.sf-branch-body h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 800; color: var(--t-text-heading); }
.sf-branch-meta { display: flex; gap: 0.375rem; font-size: 0.8125rem; color: var(--t-text-muted); margin-bottom: 0.25rem; }
.sf-branch-meta .sf-ic { color: var(--t-text-accent); flex-shrink: 0; }
.sf-branch-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; }
.sf-branch-arrow {
  width: 2.125rem; height: 2.125rem; border-radius: 999px;
  background: var(--t-primary-light); color: var(--t-text-accent);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0;
}

/* ── Single-sheet flow (checkout / payment) ───────────────── */
.sf-sheettop {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--t-bg-surface); border-bottom: 1px solid var(--t-border);
  padding: 0.8125rem 1rem;
}
.sf-sheettop-back {
  width: 2.25rem; height: 2.25rem; border-radius: 999px; flex-shrink: 0;
  background: var(--t-bg-section-alt); color: var(--t-text-heading);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; text-decoration: none;
}
.sf-sheettop h1 { font-size: 1.0625rem; font-weight: 800; margin: 0; color: var(--t-text-heading); }
.sf-sheettop p { font-size: 0.75rem; color: var(--t-text-muted); margin: 0.125rem 0 0; }

.sf-progress { height: 4px; background: var(--t-border); }
.sf-progress-fill { height: 100%; background: var(--t-primary); border-radius: 0 4px 4px 0; transition: width 0.3s ease; }

.sf-block { background: var(--t-bg-surface); padding: 1rem; margin-top: 0.625rem; }
.sf-block-title { font-size: 0.9375rem; font-weight: 800; color: var(--t-text-heading); margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.sf-block-num {
  width: 1.375rem; height: 1.375rem; border-radius: 999px; flex-shrink: 0;
  background: var(--t-text-heading); color: var(--t-bg-surface);
  font-size: 0.75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}

/* Segmented choice — options keep .theme-card + JS-toggled .theme-card-selected */
.sf-seg { display: flex; gap: 0.625rem; }
.sf-seg > label { flex: 1; margin: 0; text-align: center; padding: 0.875rem; cursor: pointer; }
.sf-seg .sf-seg-ic { display: block; font-size: 1.25rem; margin-bottom: 0.375rem; color: var(--t-text-accent); }

/* Payment method row — keeps .theme-card / .theme-card-selected contract */
.sf-pm { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.sf-pm .sf-pm-ic { font-size: 1.25rem; color: var(--t-text-accent); flex-shrink: 0; }

/* Sticky pay bar */
.sf-paybar { position: sticky; bottom: 0; z-index: 30; background: var(--t-bg-surface); border-top: 1px solid var(--t-border); padding: 0.75rem 1rem calc(1.125rem + env(safe-area-inset-bottom, 0)); }
.sf-paybar-total { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.8125rem; color: var(--t-text-muted); }
.sf-paybar-total b { color: var(--t-text-heading); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }

/* Cart page: fixed bottom dock stacking the checkout bar over the mobile nav. */
.sf-cart-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--t-bg-surface); box-shadow: 0 -6px 20px -10px rgb(0 0 0 / 15%); }
.sf-cart-dock .sf-paybar { position: static; padding-bottom: 0.75rem; box-shadow: none; }
.sf-cart-dock .sf-tabbar { position: static; box-shadow: none; }
.sf-cart-dock-spacer { height: 17rem; }

/* Summary rows */
.sf-sum-line { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--t-text-body); margin-bottom: 0.5rem; }
.sf-discount { color: var(--t-badge-success-text); }
.sf-sum-line span:last-child { font-variant-numeric: tabular-nums; }
.sf-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.75rem; margin-top: 0.25rem; border-top: 1px solid var(--t-border); font-weight: 800; color: var(--t-text-heading); }
.sf-sum-total span:last-child { font-size: 1.1875rem; font-variant-numeric: tabular-nums; }

/* ── Order tracking ───────────────────────────────────────── */
.sf-track-hero { background: var(--t-bg-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius); padding: 1.25rem; text-align: center; }
.sf-track-hero .sf-track-ic { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 0.625rem; }
.sf-track-hero h2 { font-size: 1.375rem; font-weight: 800; margin: 0 0 0.25rem; color: var(--t-text-heading); }
.sf-track-hero p { margin: 0; font-size: 0.8125rem; color: var(--t-text-muted); }
.sf-track-eta { display: inline-block; margin-top: 0.75rem; padding: 0.4375rem 1rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 800; background: var(--t-primary-light); color: var(--t-text-accent); }

.sf-track-steps { display: flex; gap: 5px; }
.sf-track-steps > i { flex: 1; height: 5px; border-radius: 3px; background: var(--t-border); }
.sf-track-steps > i.is-done { background: var(--t-primary); }
.sf-track-caps { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.625rem; font-weight: 600; color: var(--t-text-muted); }

.sf-driver { display: flex; align-items: center; gap: 0.75rem; background: var(--t-bg-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius); padding: 0.875rem 1rem; }
.sf-driver-avatar { width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--t-primary-light); color: var(--t-text-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.sf-driver h4 { margin: 0; font-size: 0.875rem; font-weight: 800; color: var(--t-text-heading); }
.sf-driver p { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--t-text-muted); }
.sf-driver-action { margin-left: auto; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--t-badge-success-bg); color: var(--t-badge-success-text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem; text-decoration: none; flex-shrink: 0; }

/* ── Checkout "overdrive" (sf-co-*) ───────────────────────
   Immersive single-sheet checkout: animated collapsing hero, rising
   sections, elevated cards, live total count-up, shimmer pay button.
   Variable-driven so it adapts to each food theme. --t-co-spring is a
   local spring easing token. */
.sf-co-page { --t-co-spring: cubic-bezier(.34,1.56,.64,1); }

.sf-co-hero { position:fixed; top:0; left:0; right:0; z-index:30; color:#fff; overflow:hidden;
  padding-top:env(safe-area-inset-top, 0);
  background:linear-gradient(125deg, var(--t-primary), var(--t-primary-dark) 85%); box-shadow:0 8px 26px -14px rgba(var(--t-primary-rgb),.5); }
.sf-co-hero::before { content:""; position:absolute; inset:-40% -20% auto -20%; height:220%; pointer-events:none;
  background:radial-gradient(40% 45% at 20% 20%, rgba(255,255,255,.32), transparent 60%),
             radial-gradient(35% 40% at 85% 15%, rgba(255,255,255,.16), transparent 60%),
             radial-gradient(45% 50% at 70% 90%, rgba(0,0,0,.28), transparent 60%);
  animation:sf-co-mesh 12s ease-in-out infinite alternate; filter:blur(6px); opacity:.9; }
@keyframes sf-co-mesh { 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-6%,4%) scale(1.15); } }
.sf-co-hero-in { position:relative; z-index:1; max-width:48rem; margin:0 auto; padding:6px 16px 16px; }
.sf-co-hero-row { display:flex; align-items:center; gap:12px; }
.sf-co-round { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); display:inline-flex; align-items:center; justify-content:center; font-size:16px; color:#fff; text-decoration:none; flex-shrink:0; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.sf-co-hero-t { flex:1; min-width:0; }
.sf-co-hero-t .ey { font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-co-hero-t h1 { margin:2px 0 0; font-size:22px; font-weight:900; letter-spacing:-.02em; }
.sf-co-steps { position:relative; z-index:1; max-width:48rem; margin:0 auto; display:flex; gap:6px; padding:0 16px 13px; }
.sf-co-steps i { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.28); overflow:hidden; position:relative; }
.sf-co-steps i.done { background:#fff; }
.sf-co-steps i.cur::after { content:""; position:absolute; inset:0; width:66%; background:#fff; border-radius:3px; animation:sf-co-fill 1.2s var(--t-co-spring) both; }
@keyframes sf-co-fill { from{ width:0; } }

/* top/bottom padding are refined by JS to the exact fixed hero/pay-bar heights;
   these are sensible fallbacks so nothing hides behind them before JS connects. */
.sf-co-body { padding:5.5rem 16px 2rem; }
/* progressive reveal: steps start hidden, revealed one at a time via "Continuar" */
.sf-co-locked { display:none !important; }
/* opacity-only fade (no transform: the last step wraps the sticky pay bar) */
.sf-co-appear { animation:sf-co-rise .42s ease both; }
[data-food--delivery-type-target="step"] { scroll-margin-top:84px; }
@keyframes sf-co-rise { from{ opacity:0; } to{ opacity:1; } }
.sf-co-continue-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px; border:0; cursor:pointer; color:var(--t-btn-primary-text); font-weight:800; font-size:15px; padding:14px; border-radius:var(--t-radius); background:var(--t-primary); box-shadow:0 12px 26px -12px rgba(var(--t-primary-rgb),.55); transition:transform .18s var(--t-co-spring), background .2s; }
.sf-co-continue-btn:hover { background:var(--t-primary-dark); }
.sf-co-continue-btn:active { transform:scale(.98); }
.sf-co-lab { display:flex; align-items:center; gap:9px; margin:22px 2px 12px; }
.sf-co-lab .n { width:24px; height:24px; border-radius:50%; background:var(--t-text-heading); color:var(--t-bg-page); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sf-co-lab h2 { margin:0; font-size:16px; font-weight:800; color:var(--t-text-heading); }
.sf-co-lab .done-chip { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:var(--t-badge-success-text); background:var(--t-badge-success-bg); padding:3px 9px; border-radius:999px; }

.sf-co-card { background:var(--t-bg-surface); border:1px solid var(--t-border); border-radius:var(--t-radius); padding:16px; box-shadow:0 14px 32px -24px rgba(15,18,22,.55); }

/* contact card (avatar + name + key-value rows) */
.sf-co-contact-head { display:flex; align-items:center; gap:13px; }
.sf-co-avatar { width:52px; height:52px; border-radius:16px; background:linear-gradient(140deg, var(--t-primary), var(--t-primary-dark)); color:var(--t-btn-primary-text); display:inline-flex; align-items:center; justify-content:center; font-size:19px; font-weight:800; letter-spacing:.02em; flex-shrink:0; }
.sf-co-contact-head h3 { margin:0; font-size:17px; font-weight:800; color:var(--t-text-heading); }
.sf-co-contact-head p { margin:2px 0 0; font-size:13px; color:var(--t-text-muted); }
.sf-co-kv { margin-top:16px; display:grid; gap:11px; }
.sf-co-kv > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.sf-co-kv .k { font-size:14px; color:var(--t-text-muted); flex-shrink:0; }
.sf-co-kv .v { font-size:14px; font-weight:700; color:var(--t-text-heading); text-align:right; word-break:break-word; }
.sf-co-ghost-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:14px; border:1.5px solid var(--t-border); background:var(--t-bg-surface); color:var(--t-text-heading); font-weight:700; font-size:14px; padding:13px; border-radius:var(--t-radius); cursor:pointer; }
.sf-co-ghost-btn:hover { background:var(--t-bg-section-alt); }

/* order-tracking status card (post-purchase; shares the checkout sf-co look).
   Card is theme-surface so body text stays readable; the semantic status colour
   lives only in the icon chip, driven by theme tokens (never hardcoded hex). */
.sf-co-status-head { display:flex; align-items:flex-start; gap:13px; }
.sf-co-status-ic { width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.sf-co-status-ic--brand { background:var(--t-primary-light); color:var(--t-text-accent); }
.sf-co-status-ic--info { background:var(--t-alert-info-bg); color:var(--t-alert-info-text); }
.sf-co-status-ic--warn { background:var(--t-badge-warning-bg); color:var(--t-badge-warning-text); }
.sf-co-status-ic--success { background:var(--t-badge-success-bg); color:var(--t-badge-success-text); }
.sf-co-status-ic--danger { background:var(--t-alert-error-bg); color:var(--t-alert-error-text); }
.sf-co-status-txt { flex:1; min-width:0; }
.sf-co-status-ey { margin:0; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t-text-muted); }
.sf-co-status-title { margin:3px 0 0; font-size:17px; font-weight:800; color:var(--t-text-heading); line-height:1.25; }
.sf-co-status-body { margin-top:14px; padding-top:14px; border-top:1px solid var(--t-border); }
.sf-co-track { margin-bottom:16px; }

/* segmented toggle: pop the icon when the choice is selected */
.sf-co-page .sf-seg > label { border-radius:var(--t-radius); transition:transform .18s var(--t-co-spring); }
.sf-co-page .sf-seg > label:active { transform:scale(.97); }
.sf-co-page .sf-seg > label.theme-card-selected .sf-seg-ic { animation:sf-co-pop .42s var(--t-co-spring); }
@keyframes sf-co-pop { 0%{ transform:scale(.55); } 55%{ transform:scale(1.28) rotate(-6deg); } 100%{ transform:scale(1); } }

/* enhance the shared address + payment-method cards' selected state (scoped to checkout/pago) */
.sf-co-page [data-shared--address-selection-target="addressList"] > label,
.sf-co-page [data-checkout--payment-method-selection-target="paymentMethodList"] > label { transition:box-shadow .3s, transform .25s var(--t-co-spring), border-color .25s; }
.sf-co-page [data-shared--address-selection-target="addressList"] > label.theme-card-selected,
.sf-co-page [data-checkout--payment-method-selection-target="paymentMethodList"] > label.theme-card-selected {
  box-shadow:0 0 0 4px rgba(var(--t-primary-rgb),.1), 0 20px 36px -22px rgba(var(--t-primary-rgb),.6);
  transform:translateY(-2px); }
.sf-co-page [data-shared--address-selection-target="addressList"] > label:active,
.sf-co-page [data-checkout--payment-method-selection-target="paymentMethodList"] > label:active { transform:scale(.99); }

/* live floating total pill */
.sf-co-live { position:sticky; bottom:90px; z-index:35; margin:18px auto 0; width:-moz-fit-content; width:fit-content; display:flex; align-items:center; gap:10px; background:rgba(15,18,22,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; border-radius:999px; padding:9px 16px 9px 12px; box-shadow:0 16px 34px -14px rgba(0,0,0,.5); }
.sf-co-live .lt-ic { width:26px; height:26px; border-radius:50%; background:var(--t-primary); display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.sf-co-live .lt-l { font-size:11px; color:rgba(255,255,255,.7); line-height:1.1; }
.sf-co-live .lt-v { font-size:16px; font-weight:900; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.sf-co-live.is-bump { animation:sf-co-bump .45s var(--t-co-spring); }
@keyframes sf-co-bump { 0%{ transform:scale(1); } 40%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

/* sticky pay bar + shimmer button */
.sf-co-paybar { position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--t-bg-surface); border-top:1px solid var(--t-border); box-shadow:0 -8px 26px -18px rgba(0,0,0,.3); }
.sf-co-paybar-inner { max-width:48rem; margin:0 auto; padding:12px 16px calc(14px + env(safe-area-inset-bottom,0)); }
.sf-co-paybtn { position:relative; overflow:hidden; width:100%; border:0; cursor:pointer; color:var(--t-btn-primary-text); font-weight:900; font-size:16px; padding:16px; border-radius:var(--t-radius); background:linear-gradient(100deg, var(--t-primary), var(--t-primary-dark)); box-shadow:0 14px 30px -10px rgba(var(--t-primary-rgb),.6); display:flex; align-items:center; justify-content:center; gap:9px; }
.sf-co-paybtn::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg); animation:sf-co-shim 3.4s ease-in-out infinite; }
@keyframes sf-co-shim { 0%,60%{ left:-60%; } 100%{ left:130%; } }
.sf-co-paybtn .pv { font-variant-numeric:tabular-nums; }
.sf-co-spacer { height:8px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sf-progress-fill { transition: none; }
  .sf-co-hero::before, .sf-co-steps i.cur::after, .sf-co-appear, .sf-co-paybtn::after,
  .sf-co-live.is-bump, .sf-co-page .sf-seg > label.theme-card-selected .sf-seg-ic { animation: none !important; }
  .sf-co-appear { opacity:1; transform:none; }
}