/* ============================================================================
 * QueZap v2 — core.css
 * Design tokens, type scale, motion curves. Loaded on every page, both web
 * and native. No component styles here — those live in components.css.
 *
 * Coexists with app.css's --bg/--text/--primary etc. The v2 system uses the
 * --qz-* namespace exclusively to avoid clashes during rolling sprint migration.
 * Pages still on v1 styling see no visual change from this file loading.
 *
 * Authored: Sprint 1, v2.0 redesign. Author: Claude (Anthropic) for Satyam.
 * ========================================================================== */

/* ── 1. Tokens (light mode default) ─────────────────────────────────────── */
:root {
  /* — Brand — */
  --qz-primary:        #F26100;   /* QueZap orange — never red, never red-orange */
  --qz-primary-dark:   #C84F00;
  --qz-primary-soft:   #FFF3EC;   /* hover states, banner bg */

  /* — Surfaces — */
  --qz-bg:             #FFFFFF;
  --qz-bg-2:           #F8F8F8;   /* page section divisions */
  --qz-card:           #FFFFFF;
  --qz-border:         #ECECEC;
  --qz-border-strong:  #DEDEDE;

  /* — Text — */
  --qz-text:           #1A1A2E;
  --qz-text-2:         #555560;
  --qz-muted:          #8B8B95;
  --qz-inverse:        #FFFFFF;

  /* — Status — */
  --qz-success:        #0F8A4F;   /* Zomato-style rating green, "OPEN" */
  --qz-warn:           #D4930D;
  --qz-error:          #D42B2B;
  --qz-info:           #3168B3;
  --qz-veg:            #0F8A4F;
  --qz-nonveg:         #D42B2B;

  /* — Type families (reuse app.css fonts; do NOT re-import) — */
  --qz-ff:         var(--ff,         'Urbanist', system-ui, -apple-system, sans-serif);
  --qz-ff-display: var(--ff-display, 'Urbanist', system-ui, -apple-system, sans-serif);

  /* — Type scale —
     Per spec §3 — aggressive hierarchy, full scale used.
     Do NOT default to 14/12 everywhere. Reach for the right size. */
  --qz-fs-hero:    28px;  --qz-lh-hero:    1.15;  --qz-fw-hero:    900;
  --qz-fs-page:    22px;  --qz-lh-page:    1.30;  --qz-fw-page:    800;
  --qz-fs-section: 16px;  --qz-lh-section: 1.40;  --qz-fw-section: 800;
  --qz-fs-card:    15px;  --qz-lh-card:    1.30;  --qz-fw-card:    800;
  --qz-fs-body:    14px;  --qz-lh-body:    1.50;  --qz-fw-body:    500;
  --qz-fs-label:   12px;  --qz-lh-label:   1.40;  --qz-fw-label:   700;
  --qz-fs-caption: 11px;  --qz-lh-caption: 1.40;  --qz-fw-caption: 600;

  /* — Spacing (4px grid) — */
  --qz-s-1:   4px;
  --qz-s-2:   8px;
  --qz-s-3:  12px;
  --qz-s-4:  16px;
  --qz-s-5:  20px;
  --qz-s-6:  24px;
  --qz-s-8:  32px;
  --qz-s-12: 48px;
  --qz-s-16: 64px;

  /* — Radii — */
  --qz-r-tiny:  6px;
  --qz-r-sm:   10px;
  --qz-r-md:   14px;
  --qz-r-lg:   20px;
  --qz-r-xl:   28px;
  --qz-r-pill: 9999px;

  /* — Shadows — */
  --qz-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
  --qz-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
  --qz-shadow-lg: 0 10px 30px rgba(0, 0, 0, .12);
  --qz-shadow-xl: 0 20px 50px rgba(0, 0, 0, .18);  /* modals/sheets */

  /* — Motion —
     Use the spring for interactions that should feel alive (taps, sheet open).
     Use --qz-ease for everything else. NEVER linear, NEVER plain ease. */
  --qz-ease:        cubic-bezier(.2, .8, .3, 1);
  --qz-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --qz-dur-std:    200ms;
  --qz-dur-page:   300ms;
  --qz-dur-sheet:  350ms;
  --qz-dur-spring: 400ms;

  /* — Layout constants — */
  --qz-header-h:    56px;
  --qz-bottom-h:    64px;
  --qz-safe-top:    env(safe-area-inset-top, 0px);
  --qz-safe-bottom: env(safe-area-inset-bottom, 0px);
  --qz-tap-min:     44px;   /* WCAG touch target floor */

  /* — Z-index scale (so future sprints don't fight each other) — */
  --qz-z-base:    1;
  --qz-z-sticky:  10;
  --qz-z-header:  20;
  --qz-z-bottom:  30;
  --qz-z-sheet:   40;
  --qz-z-modal:   50;
  --qz-z-toast:   60;
}

/* ── 2. Dark mode (system preference) ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --qz-bg:             #0F0F12;
    --qz-bg-2:           #1A1A1F;
    --qz-card:           #1F1F26;
    --qz-border:         #2A2A33;
    --qz-border-strong:  #3A3A45;
    --qz-text:           #F5F5F7;
    --qz-text-2:         #B5B5C0;
    --qz-muted:          #707080;
    --qz-primary-soft:   #2A1A0F;   /* rebalanced for dark surfaces */

    --qz-shadow-sm: 0 1px 3px rgba(0, 0, 0, .30);
    --qz-shadow-md: 0 4px 12px rgba(0, 0, 0, .40);
    --qz-shadow-lg: 0 10px 30px rgba(0, 0, 0, .50);
    --qz-shadow-xl: 0 20px 50px rgba(0, 0, 0, .60);
  }
}

/* ── 3. Manual theme override (settings toggle, Sprint 4) ───────────────── */
:root[data-qz-theme="dark"] {
  --qz-bg:             #0F0F12;
  --qz-bg-2:           #1A1A1F;
  --qz-card:           #1F1F26;
  --qz-border:         #2A2A33;
  --qz-border-strong:  #3A3A45;
  --qz-text:           #F5F5F7;
  --qz-text-2:         #B5B5C0;
  --qz-muted:          #707080;
  --qz-primary-soft:   #2A1A0F;

  --qz-shadow-sm: 0 1px 3px rgba(0, 0, 0, .30);
  --qz-shadow-md: 0 4px 12px rgba(0, 0, 0, .40);
  --qz-shadow-lg: 0 10px 30px rgba(0, 0, 0, .50);
  --qz-shadow-xl: 0 20px 50px rgba(0, 0, 0, .60);
}
:root[data-qz-theme="light"] {
  /* Force light even on dark OS. Mirrors :root defaults for clarity. */
  --qz-bg:             #FFFFFF;
  --qz-bg-2:           #F8F8F8;
  --qz-card:           #FFFFFF;
  --qz-border:         #ECECEC;
  --qz-border-strong:  #DEDEDE;
  --qz-text:           #1A1A2E;
  --qz-text-2:         #555560;
  --qz-muted:          #8B8B95;
  --qz-primary-soft:   #FFF3EC;

  --qz-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
  --qz-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
  --qz-shadow-lg: 0 10px 30px rgba(0, 0, 0, .12);
  --qz-shadow-xl: 0 20px 50px rgba(0, 0, 0, .18);
}

/* ── 4. Reduced-motion override (accessibility) ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --qz-dur-std:    0ms;
    --qz-dur-page:   0ms;
    --qz-dur-sheet:  0ms;
    --qz-dur-spring: 0ms;
  }
}

/* ── 5. Type utilities (opt-in classes) ─────────────────────────────────────
   These do NOT auto-style anything. A page must apply the class to use them.
   This is intentional — Sprint 1's DoD is "no visible change", so we can't
   restyle h1/h2/p globally. v2-migrated screens use these classes; v1 screens
   keep their existing app.css styles. ───────────────────────────────────── */
.qz-h1 {
  font-family: var(--qz-ff-display);
  font-size: var(--qz-fs-hero);
  line-height: var(--qz-lh-hero);
  font-weight: var(--qz-fw-hero);
  letter-spacing: -0.02em;
  color: var(--qz-text);
}
.qz-h2 {
  font-family: var(--qz-ff-display);
  font-size: var(--qz-fs-page);
  line-height: var(--qz-lh-page);
  font-weight: var(--qz-fw-page);
  letter-spacing: -0.015em;
  color: var(--qz-text);
}
.qz-h3 {
  font-family: var(--qz-ff-display);
  font-size: var(--qz-fs-section);
  line-height: var(--qz-lh-section);
  font-weight: var(--qz-fw-section);
  letter-spacing: -0.01em;
  color: var(--qz-text);
}
.qz-card-title {
  font-family: var(--qz-ff);
  font-size: var(--qz-fs-card);
  line-height: var(--qz-lh-card);
  font-weight: var(--qz-fw-card);
  letter-spacing: -0.005em;
  color: var(--qz-text);
}
.qz-body {
  font-family: var(--qz-ff);
  font-size: var(--qz-fs-body);
  line-height: var(--qz-lh-body);
  font-weight: var(--qz-fw-body);
  color: var(--qz-text);
}
.qz-body-muted {
  font-family: var(--qz-ff);
  font-size: var(--qz-fs-body);
  line-height: var(--qz-lh-body);
  font-weight: var(--qz-fw-body);
  color: var(--qz-text-2);
}
.qz-label {
  font-family: var(--qz-ff);
  font-size: var(--qz-fs-label);
  line-height: var(--qz-lh-label);
  font-weight: var(--qz-fw-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--qz-muted);
}
.qz-caption {
  font-family: var(--qz-ff);
  font-size: var(--qz-fs-caption);
  line-height: var(--qz-lh-caption);
  font-weight: var(--qz-fw-caption);
  color: var(--qz-text-2);
}
.qz-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;   /* prices, ratings, counters align */
}

/* ── 6. v2 page scope helpers ──────────────────────────────────────────────
   When a page has been migrated to v2, the bridge sets `data-qz-v2` on the
   <body> for that page (or on the .page element). These rules then activate.
   Pages without the marker are unaffected. ────────────────────────────────── */
.qz-v2 *,
.qz-v2 *::before,
.qz-v2 *::after {
  box-sizing: border-box;
}
.qz-v2 img {
  max-width: 100%;
  display: block;
}
.qz-v2 button {
  font-family: var(--qz-ff);
  -webkit-tap-highlight-color: transparent;
}

/* ── End core.css ─────────────────────────────────────────────────────── */
/* ============================================================================
 * QueZap v2 — components.css
 * Production-grade primitives. All classes prefixed `qz-` to avoid clashing
 * with app.css. Pages opt in by adding the class — nothing here auto-styles.
 *
 * Organisation:
 *   1. Buttons         (qz-btn, qz-btn-primary, qz-btn-ghost, qz-btn-icon)
 *   2. Inputs          (qz-input, qz-search, qz-otp-cell)
 *   3. Cards           (qz-card, qz-cafe-card, qz-dish-card)
 *   4. Badges & pills  (qz-badge, qz-rating, qz-promo, qz-veg-dot)
 *   5. Chips           (qz-chip — categories + filters)
 *   6. Sheets & modals (qz-sheet, qz-sheet-handle, qz-scrim)
 *   7. Skeletons       (qz-skel, shimmer keyframes)
 *   8. Sticky bars     (qz-sticky-cart, qz-cta-bar)
 *   9. Empty state     (qz-empty)
 *  10. Toast           (qz-toast)
 *  11. Ripple          (qz-ripple — tap feedback)
 *  12. Stepper         (qz-step — qty +/-)
 *  13. Segmented       (qz-seg)
 *  14. Section header  (qz-section-head)
 * ========================================================================== */


/* ── 1. Buttons ─────────────────────────────────────────────────────────── */
.qz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qz-s-2);
  min-height: var(--qz-tap-min);
  padding: 0 var(--qz-s-5);
  border: 1.5px solid transparent;
  border-radius: var(--qz-r-md);
  background: transparent;
  font-family: var(--qz-ff);
  font-size: var(--qz-fs-card);
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--qz-text);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--qz-dur-std) var(--qz-ease-spring),
    background var(--qz-dur-std) var(--qz-ease),
    border-color var(--qz-dur-std) var(--qz-ease),
    box-shadow var(--qz-dur-std) var(--qz-ease);
  white-space: nowrap;
}
.qz-btn:active { transform: scale(0.97); }
.qz-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.qz-btn-primary {
  background: var(--qz-primary);
  color: var(--qz-inverse);
  border-color: var(--qz-primary);
  box-shadow: 0 4px 14px rgba(242, 97, 0, 0.25);
}
.qz-btn-primary:hover { background: var(--qz-primary-dark); border-color: var(--qz-primary-dark); }
.qz-btn-primary:active { box-shadow: 0 2px 8px rgba(242, 97, 0, 0.20); }

.qz-btn-secondary {
  background: var(--qz-card);
  color: var(--qz-primary);
  border-color: var(--qz-primary);
}
.qz-btn-secondary:hover { background: var(--qz-primary-soft); }

.qz-btn-ghost {
  background: transparent;
  color: var(--qz-text-2);
  border-color: var(--qz-border);
}
.qz-btn-ghost:hover { background: var(--qz-bg-2); border-color: var(--qz-border-strong); }

.qz-btn-icon {
  width: 40px; height: 40px;
  min-height: 0;
  padding: 0;
  border-radius: var(--qz-r-pill);
  background: var(--qz-card);
  box-shadow: var(--qz-shadow-md);
  color: var(--qz-text);
}
.qz-btn-icon:hover { background: var(--qz-bg-2); }

.qz-btn-block { width: 100%; }
.qz-btn-sm { min-height: 36px; padding: 0 var(--qz-s-3); font-size: var(--qz-fs-label); }
.qz-btn-lg { min-height: 52px; padding: 0 var(--qz-s-6); font-size: var(--qz-fs-section); border-radius: var(--qz-r-lg); }


/* ── 2. Inputs ──────────────────────────────────────────────────────────── */
.qz-input {
  width: 100%;
  min-height: var(--qz-tap-min);
  padding: 0 var(--qz-s-4);
  background: var(--qz-card);
  border: 1.5px solid var(--qz-border);
  border-radius: var(--qz-r-md);
  font-family: var(--qz-ff);
  font-size: 16px; /* prevents iOS zoom on focus */
  font-weight: 500;
  color: var(--qz-text);
  outline: none;
  transition: border-color var(--qz-dur-std) var(--qz-ease), box-shadow var(--qz-dur-std) var(--qz-ease);
}
.qz-input::placeholder { color: var(--qz-muted); }
.qz-input:focus {
  border-color: var(--qz-primary);
  box-shadow: 0 0 0 3px rgba(242, 97, 0, 0.12);
}
.qz-input-error { border-color: var(--qz-error); }
.qz-input-error:focus { box-shadow: 0 0 0 3px rgba(212, 43, 43, 0.12); }

/* Full-width search pill (Swiggy pattern) */
.qz-search {
  display: flex;
  align-items: center;
  gap: var(--qz-s-3);
  height: 48px;
  padding: 0 var(--qz-s-4);
  background: var(--qz-card);
  border: 1.5px solid var(--qz-border);
  border-radius: var(--qz-r-pill);
  box-shadow: var(--qz-shadow-sm);
  cursor: text;
  transition: border-color var(--qz-dur-std) var(--qz-ease), box-shadow var(--qz-dur-std) var(--qz-ease);
}
.qz-search:hover { border-color: var(--qz-border-strong); }
.qz-search:focus-within { border-color: var(--qz-primary); box-shadow: 0 0 0 3px rgba(242, 97, 0, 0.10); }
.qz-search-input {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  font-family: var(--qz-ff);
  font-size: 16px; font-weight: 500;
  color: var(--qz-text);
}
.qz-search-input::placeholder { color: var(--qz-muted); }
.qz-search-icon { flex-shrink: 0; color: var(--qz-muted); width: 20px; height: 20px; }
.qz-search-mic { flex-shrink: 0; color: var(--qz-primary); width: 22px; height: 22px; cursor: pointer; }

/* OTP cell — used by the existing #otpBoxes markup, opt-in styling */
.qz-otp-cell {
  width: 48px; height: 56px;
  text-align: center;
  font-family: var(--qz-ff-display);
  font-size: 22px; font-weight: 800;
  color: var(--qz-text);
  background: var(--qz-card);
  border: 1.5px solid var(--qz-border);
  border-radius: var(--qz-r-md);
  outline: none; padding: 0;
  caret-color: var(--qz-primary);
  transition:
    border-color var(--qz-dur-std) var(--qz-ease),
    box-shadow var(--qz-dur-std) var(--qz-ease),
    transform var(--qz-dur-std) var(--qz-ease-spring);
}
.qz-otp-cell:focus { border-color: var(--qz-primary); box-shadow: 0 0 0 3px rgba(242, 97, 0, 0.15); }
.qz-otp-cell.qz-otp-filled { border-color: var(--qz-primary); transform: scale(1.04); }


/* ── 3. Cards ───────────────────────────────────────────────────────────── */
.qz-card {
  background: var(--qz-card);
  border: 1px solid var(--qz-border);
  border-radius: var(--qz-r-md);
  padding: var(--qz-s-4);
  transition: box-shadow var(--qz-dur-std) var(--qz-ease), transform var(--qz-dur-std) var(--qz-ease-spring);
}
.qz-card-elevated { box-shadow: var(--qz-shadow-md); border-color: transparent; }
.qz-card-tap { cursor: pointer; }
.qz-card-tap:active { transform: scale(0.98); box-shadow: var(--qz-shadow-sm); }

/* CafeCard — image-left, 100px tall — spec §5.4.
   Used on home, cafe list, recently viewed, search results. */
.qz-cafe-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--qz-s-3);
  background: var(--qz-card);
  border: 1px solid var(--qz-border);
  border-radius: var(--qz-r-md);
  padding: var(--qz-s-3);
  margin-bottom: var(--qz-s-3);
  cursor: pointer;
  transition: transform var(--qz-dur-std) var(--qz-ease-spring), box-shadow var(--qz-dur-std) var(--qz-ease);
}
.qz-cafe-card:active { transform: scale(0.985); box-shadow: var(--qz-shadow-md); }
.qz-cafe-card-img {
  width: 96px; height: 96px;
  border-radius: var(--qz-r-sm);
  object-fit: cover;
  background: var(--qz-bg-2);
}
.qz-cafe-card-img-fallback {
  display: grid; place-items: center;
  font-size: 32px;
  background: linear-gradient(135deg, var(--qz-primary-soft), #FFE4D2);
}
.qz-cafe-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 56px; }
.qz-cafe-card-name {
  font-family: var(--qz-ff);
  font-size: var(--qz-fs-card); font-weight: 800;
  color: var(--qz-text);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qz-cafe-card-cuisine {
  font-size: var(--qz-fs-label); font-weight: 500;
  color: var(--qz-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qz-cafe-card-meta {
  display: inline-flex; align-items: center; gap: var(--qz-s-2);
  font-size: var(--qz-fs-caption); font-weight: 600;
  color: var(--qz-muted);
}
.qz-cafe-card-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--qz-muted); }
.qz-cafe-card-rating {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--qz-success); color: #fff;
  padding: 3px 7px;
  border-radius: var(--qz-r-tiny);
  font-size: var(--qz-fs-caption); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.qz-cafe-card-promo {
  display: inline-block; align-self: flex-start;
  margin-top: 2px;
  background: var(--qz-primary-soft); color: var(--qz-primary);
  padding: 2px 8px;
  border-radius: var(--qz-r-tiny);
  font-size: var(--qz-fs-caption); font-weight: 800;
  letter-spacing: 0.02em;
}
.qz-cafe-card-closed .qz-cafe-card-img { filter: grayscale(1); opacity: 0.7; }
.qz-cafe-card-closed .qz-cafe-card-rating {
  background: var(--qz-error);
}

/* Dish card — popular dishes scroller (spec §5.3.8) */
.qz-dish-card {
  flex-shrink: 0;
  width: 160px;
  background: var(--qz-card);
  border: 1px solid var(--qz-border);
  border-radius: var(--qz-r-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--qz-dur-std) var(--qz-ease-spring), box-shadow var(--qz-dur-std) var(--qz-ease);
}
.qz-dish-card:active { transform: scale(0.97); box-shadow: var(--qz-shadow-md); }
.qz-dish-card-img { width: 100%; height: 140px; object-fit: cover; background: var(--qz-bg-2); }
.qz-dish-card-body { padding: var(--qz-s-3); display: flex; flex-direction: column; gap: 2px; }
.qz-dish-card-name {
  font-size: var(--qz-fs-label); font-weight: 800;
  color: var(--qz-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qz-dish-card-price {
  font-size: var(--qz-fs-card); font-weight: 900;
  color: var(--qz-text);
  font-variant-numeric: tabular-nums;
}
.qz-dish-card-cafe {
  font-size: var(--qz-fs-caption); font-weight: 600;
  color: var(--qz-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ── 4. Badges & pills ──────────────────────────────────────────────────── */
.qz-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  border-radius: var(--qz-r-tiny);
  font-size: var(--qz-fs-caption); font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.qz-badge-success { background: var(--qz-success); color: #fff; }
.qz-badge-error   { background: var(--qz-error);   color: #fff; }
.qz-badge-warn    { background: var(--qz-warn);    color: #fff; }
.qz-badge-soft    { background: var(--qz-primary-soft); color: var(--qz-primary); }
.qz-badge-outline { background: transparent; color: var(--qz-text-2); border: 1px solid var(--qz-border-strong); }

/* Veg / non-veg dot — square with inset dot */
.qz-veg-dot, .qz-nonveg-dot {
  flex-shrink: 0;
  width: 14px; height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  display: inline-grid; place-items: center;
  position: relative;
}
.qz-veg-dot { color: var(--qz-veg); }
.qz-nonveg-dot { color: var(--qz-nonveg); }
.qz-veg-dot::after, .qz-nonveg-dot::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}


/* ── 5. Chips (categories + filters) ────────────────────────────────────── */
.qz-chip {
  display: inline-flex; align-items: center; gap: var(--qz-s-2);
  height: 36px;
  padding: 0 var(--qz-s-3);
  background: var(--qz-card);
  border: 1.5px solid var(--qz-border);
  border-radius: var(--qz-r-pill);
  font-family: var(--qz-ff);
  font-size: var(--qz-fs-label); font-weight: 700;
  color: var(--qz-text-2);
  white-space: nowrap; flex-shrink: 0;
  cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--qz-dur-std) var(--qz-ease),
    border-color var(--qz-dur-std) var(--qz-ease),
    color var(--qz-dur-std) var(--qz-ease),
    transform var(--qz-dur-std) var(--qz-ease-spring);
}
.qz-chip:active { transform: scale(0.95); }
.qz-chip-active {
  background: var(--qz-primary);
  border-color: var(--qz-primary);
  color: var(--qz-inverse);
}
.qz-chip-soft-active {
  background: var(--qz-primary-soft);
  border-color: var(--qz-primary);
  color: var(--qz-primary);
}

/* Category circle — 64px circle with image + label (home quick-categories) */
.qz-cat {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--qz-s-2);
  width: 72px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--qz-dur-std) var(--qz-ease-spring);
}
.qz-cat:active { transform: scale(0.95); }
.qz-cat-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--qz-bg-2);
  display: grid; place-items: center;
  font-size: 32px;
  border: 2px solid transparent;
  transition: border-color var(--qz-dur-std) var(--qz-ease), transform var(--qz-dur-std) var(--qz-ease-spring);
  overflow: hidden;
}
.qz-cat-circle img { width: 100%; height: 100%; object-fit: cover; }
.qz-cat-active .qz-cat-circle {
  border-color: var(--qz-primary);
  transform: scale(1.05);
}
.qz-cat-label {
  font-size: var(--qz-fs-caption); font-weight: 700;
  color: var(--qz-text-2);
  text-align: center;
  white-space: nowrap;
}
.qz-cat-active .qz-cat-label { color: var(--qz-primary); font-weight: 800; }

/* Horizontal scroll container — used by chip rows, cat rows, dish scrollers */
.qz-hscroll {
  display: flex;
  gap: var(--qz-s-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--qz-s-2) var(--qz-s-4);
  margin: 0 calc(-1 * var(--qz-s-4));
}
.qz-hscroll::-webkit-scrollbar { display: none; }
.qz-hscroll > * { scroll-snap-align: start; }


/* ── 6. Sheets & modals ─────────────────────────────────────────────────── */
.qz-scrim {
  position: fixed; inset: 0;
  background: rgba(15, 15, 18, 0.5);
  z-index: var(--qz-z-sheet);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--qz-dur-sheet) var(--qz-ease);
}
.qz-scrim-open { opacity: 1; pointer-events: auto; }

.qz-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: calc(var(--qz-z-sheet) + 1);
  background: var(--qz-card);
  border-top-left-radius: var(--qz-r-xl);
  border-top-right-radius: var(--qz-r-xl);
  box-shadow: var(--qz-shadow-xl);
  max-height: 90vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--qz-dur-sheet) var(--qz-ease);
  padding-bottom: var(--qz-safe-bottom);
}
.qz-sheet-open { transform: translateY(0); }
.qz-sheet-handle {
  width: 36px; height: 4px;
  background: var(--qz-border-strong);
  border-radius: var(--qz-r-pill);
  margin: var(--qz-s-2) auto var(--qz-s-3);
  flex-shrink: 0;
}
.qz-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--qz-s-5) var(--qz-s-4);
  flex-shrink: 0;
}
.qz-sheet-title {
  font-family: var(--qz-ff-display);
  font-size: var(--qz-fs-page);
  font-weight: 800;
  color: var(--qz-text);
  letter-spacing: -0.015em;
}
.qz-sheet-close {
  width: 32px; height: 32px;
  border: none; background: var(--qz-bg-2);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--qz-text-2);
  cursor: pointer;
}
.qz-sheet-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 0 var(--qz-s-5) var(--qz-s-5);
  -webkit-overflow-scrolling: touch;
}
.qz-sheet-foot {
  flex-shrink: 0;
  padding: var(--qz-s-4) var(--qz-s-5) calc(var(--qz-s-4) + var(--qz-safe-bottom));
  border-top: 1px solid var(--qz-border);
  background: var(--qz-card);
  display: flex; gap: var(--qz-s-3);
}


/* ── 7. Skeletons ───────────────────────────────────────────────────────── */
@keyframes qz-shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position:  1000px 0; }
}
.qz-skel {
  background: linear-gradient(
    90deg,
    var(--qz-bg-2) 0%,
    rgba(0, 0, 0, 0.04) 50%,
    var(--qz-bg-2) 100%
  );
  background-size: 1000px 100%;
  animation: qz-shimmer 1.4s linear infinite;
  border-radius: var(--qz-r-tiny);
  color: transparent;
  user-select: none;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .qz-skel {
    background: linear-gradient(
      90deg,
      var(--qz-bg-2) 0%,
      rgba(255, 255, 255, 0.04) 50%,
      var(--qz-bg-2) 100%
    );
    background-size: 1000px 100%;
  }
}
.qz-skel-line { height: 12px; border-radius: var(--qz-r-tiny); margin-bottom: var(--qz-s-2); }
.qz-skel-line-lg { height: 16px; }
.qz-skel-block { height: 96px; border-radius: var(--qz-r-sm); }

/* CafeCard skeleton — exact dimensions of .qz-cafe-card */
.qz-cafe-card-skel {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--qz-s-3);
  background: var(--qz-card);
  border: 1px solid var(--qz-border);
  border-radius: var(--qz-r-md);
  padding: var(--qz-s-3);
  margin-bottom: var(--qz-s-3);
}
.qz-cafe-card-skel-img { width: 96px; height: 96px; border-radius: var(--qz-r-sm); }
.qz-cafe-card-skel-body { display: flex; flex-direction: column; gap: var(--qz-s-2); padding-top: var(--qz-s-2); }


/* ── 8. Sticky bars ─────────────────────────────────────────────────────── */
.qz-sticky-cart {
  position: fixed; left: var(--qz-s-3); right: var(--qz-s-3);
  bottom: calc(var(--qz-bottom-h) + var(--qz-s-3) + var(--qz-safe-bottom));
  z-index: var(--qz-z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--qz-primary);
  color: var(--qz-inverse);
  padding: var(--qz-s-3) var(--qz-s-4);
  border-radius: var(--qz-r-md);
  box-shadow: var(--qz-shadow-lg);
  transform: translateY(150%);
  transition: transform var(--qz-dur-spring) var(--qz-ease-spring);
  cursor: pointer;
}
.qz-sticky-cart-shown { transform: translateY(0); }
.qz-sticky-cart-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qz-sticky-cart-count { font-size: var(--qz-fs-label); font-weight: 700; opacity: 0.9; }
.qz-sticky-cart-total { font-size: var(--qz-fs-card); font-weight: 800; font-variant-numeric: tabular-nums; }
.qz-sticky-cart-cta { font-size: var(--qz-fs-card); font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }

/* Bottom CTA bar (cart, checkout) */
.qz-cta-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  z-index: var(--qz-z-sticky);
  background: var(--qz-card);
  border-top: 1px solid var(--qz-border);
  padding: var(--qz-s-3) var(--qz-s-4) calc(var(--qz-s-3) + var(--qz-safe-bottom));
  display: flex; align-items: center; gap: var(--qz-s-3);
}


/* ── 9. Empty state ─────────────────────────────────────────────────────── */
.qz-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--qz-s-8) var(--qz-s-5);
  gap: var(--qz-s-4);
}
.qz-empty-illust {
  width: 160px; height: 160px;
  flex-shrink: 0;
}
.qz-empty-title {
  font-family: var(--qz-ff-display);
  font-size: var(--qz-fs-page);
  font-weight: 800;
  color: var(--qz-text);
  letter-spacing: -0.015em;
  margin: 0;
}
.qz-empty-sub {
  font-size: var(--qz-fs-body);
  color: var(--qz-text-2);
  max-width: 320px;
  margin: 0;
}
.qz-empty-actions {
  display: flex; flex-direction: column; gap: var(--qz-s-2);
  width: 100%; max-width: 280px;
  margin-top: var(--qz-s-3);
}


/* ── 10. Toast ──────────────────────────────────────────────────────────── */
.qz-toast {
  position: fixed; left: 50%; top: calc(var(--qz-safe-top) + var(--qz-s-4));
  transform: translateX(-50%) translateY(-150%);
  z-index: var(--qz-z-toast);
  display: inline-flex; align-items: center; gap: var(--qz-s-2);
  background: var(--qz-text);
  color: var(--qz-inverse);
  padding: var(--qz-s-3) var(--qz-s-5);
  border-radius: var(--qz-r-pill);
  font-size: var(--qz-fs-body);
  font-weight: 600;
  box-shadow: var(--qz-shadow-lg);
  max-width: calc(100vw - 32px);
  transition: transform var(--qz-dur-spring) var(--qz-ease-spring);
}
.qz-toast-shown { transform: translateX(-50%) translateY(0); }
.qz-toast-success { background: var(--qz-success); }
.qz-toast-error   { background: var(--qz-error); }


/* ── 11. Ripple (tap feedback for cards/buttons) ────────────────────────── */
.qz-ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.qz-ripple::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--qz-rx, 50%) var(--qz-ry, 50%),
    rgba(0, 0, 0, 0.08) 0%,
    transparent 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--qz-ease);
}
.qz-ripple:active::after { opacity: 1; transition-duration: 0s; }


/* ── 12. Stepper (qty +/-) ──────────────────────────────────────────────── */
.qz-step {
  display: inline-flex; align-items: center;
  background: var(--qz-card);
  border: 1.5px solid var(--qz-primary);
  border-radius: var(--qz-r-sm);
  overflow: hidden;
  height: 32px;
}
.qz-step-btn {
  width: 32px; height: 100%;
  border: none; background: transparent;
  color: var(--qz-primary);
  font-size: 18px; font-weight: 900;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--qz-dur-std) var(--qz-ease);
}
.qz-step-btn:active { background: var(--qz-primary-soft); }
.qz-step-num {
  min-width: 28px;
  text-align: center;
  font-size: var(--qz-fs-card); font-weight: 800;
  color: var(--qz-primary);
  font-variant-numeric: tabular-nums;
}


/* ── 13. Segmented control ──────────────────────────────────────────────── */
.qz-seg {
  display: inline-flex;
  background: var(--qz-bg-2);
  border-radius: var(--qz-r-pill);
  padding: 4px;
  gap: 4px;
}
.qz-seg-btn {
  flex: 1;
  min-height: 36px;
  padding: 0 var(--qz-s-4);
  border: none; background: transparent;
  border-radius: var(--qz-r-pill);
  font-family: var(--qz-ff);
  font-size: var(--qz-fs-label); font-weight: 800;
  color: var(--qz-text-2);
  cursor: pointer;
  transition:
    background var(--qz-dur-std) var(--qz-ease),
    color var(--qz-dur-std) var(--qz-ease),
    box-shadow var(--qz-dur-std) var(--qz-ease);
}
.qz-seg-btn-active {
  background: var(--qz-card);
  color: var(--qz-text);
  box-shadow: var(--qz-shadow-sm);
}


/* ── 14. Section header ─────────────────────────────────────────────────── */
.qz-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--qz-s-5) var(--qz-s-4) var(--qz-s-3);
  gap: var(--qz-s-3);
}
.qz-section-title {
  font-family: var(--qz-ff-display);
  font-size: var(--qz-fs-section);
  font-weight: 800;
  color: var(--qz-text);
  letter-spacing: -0.01em;
  margin: 0;
}
.qz-section-count {
  font-size: var(--qz-fs-caption);
  font-weight: 600;
  color: var(--qz-muted);
}
.qz-section-link {
  font-size: var(--qz-fs-label);
  font-weight: 800;
  color: var(--qz-primary);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 2px;
}


/* ── End components.css ─────────────────────────────────────────────────── */
/* ============================================================================
 * QueZap v2 — transitions.css
 * Page transitions, fade, slide. CSS-only — no JS state machines.
 *
 * The bridge sets data-qz-direction="forward" or "back" on <body> right
 * before swapping the active page. These rules animate accordingly.
 * Reduced-motion users get instant transitions via the duration zeroing
 * in core.css (--qz-dur-page becomes 0ms).
 * ========================================================================== */


/* ── Page transitions ────────────────────────────────────────────────────── */
/* Forward: new page slides in from right, opacity 0 → 1.
   Back:    new page slides in from left  (reverse).        */

@keyframes qz-page-in-forward {
  from { transform: translateX(20%);  opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes qz-page-out-forward {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-20%); opacity: 0; }
}
@keyframes qz-page-in-back {
  from { transform: translateX(-20%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes qz-page-out-back {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(20%);  opacity: 0; }
}

/* Apply only to v2-migrated pages. Pages without .qz-v2 use whatever
   transition app.css already provides. */
.qz-v2 .page.active {
  animation: qz-page-in-forward var(--qz-dur-page) var(--qz-ease) both;
}
[data-qz-direction="back"] .qz-v2 .page.active {
  animation-name: qz-page-in-back;
}

/* The outgoing page — kept .leaving for the duration of the transition */
.qz-v2 .page.qz-leaving {
  animation: qz-page-out-forward var(--qz-dur-page) var(--qz-ease) both;
  position: absolute; inset: 0;
  pointer-events: none;
}
[data-qz-direction="back"] .qz-v2 .page.qz-leaving {
  animation-name: qz-page-out-back;
}


/* ── Fade primitives (modal scrims, toasts, tooltips) ────────────────────── */
@keyframes qz-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes qz-fade-out { from { opacity: 1; } to { opacity: 0; } }
.qz-fade-in  { animation: qz-fade-in  var(--qz-dur-std) var(--qz-ease) both; }
.qz-fade-out { animation: qz-fade-out var(--qz-dur-std) var(--qz-ease) both; }


/* ── Pop-in (cards appearing, success ticks) ────────────────────────────── */
@keyframes qz-pop-in {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.qz-pop-in { animation: qz-pop-in var(--qz-dur-spring) var(--qz-ease-spring) both; }


/* ── Slide up (sheets, toasts, sticky cart bar) ─────────────────────────── */
@keyframes qz-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.qz-slide-up { animation: qz-slide-up var(--qz-dur-spring) var(--qz-ease-spring) both; }


/* ── Stagger helpers for lists (apply 1..N, each 40ms later) ─────────────── */
.qz-stagger > * {
  animation: qz-fade-in var(--qz-dur-std) var(--qz-ease) both;
}
.qz-stagger > *:nth-child(1) { animation-delay: 0ms;   }
.qz-stagger > *:nth-child(2) { animation-delay: 40ms;  }
.qz-stagger > *:nth-child(3) { animation-delay: 80ms;  }
.qz-stagger > *:nth-child(4) { animation-delay: 120ms; }
.qz-stagger > *:nth-child(5) { animation-delay: 160ms; }
.qz-stagger > *:nth-child(6) { animation-delay: 200ms; }
.qz-stagger > *:nth-child(7) { animation-delay: 240ms; }
.qz-stagger > *:nth-child(8) { animation-delay: 280ms; }
.qz-stagger > *:nth-child(n+9) { animation-delay: 320ms; }


/* ── Pulse (active step in tracker, live indicators) ──────────────────────── */
@keyframes qz-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.7; }
}
.qz-pulse { animation: qz-pulse 1.6s var(--qz-ease) infinite; }


/* ── Bounce (CTA pop after action, e.g. add-to-cart) ──────────────────────── */
@keyframes qz-bounce {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.12); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1);    }
}
.qz-bounce { animation: qz-bounce var(--qz-dur-spring) var(--qz-ease-spring); }


/* ── Pull-to-refresh spinner (mobile only — web has native refresh) ──────── */
@keyframes qz-spin { to { transform: rotate(360deg); } }
.qz-ptr {
  position: absolute; top: -56px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 32px;
  border: 3px solid var(--qz-border);
  border-top-color: var(--qz-primary);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--qz-dur-std) var(--qz-ease), top var(--qz-dur-std) var(--qz-ease);
}
.qz-ptr-active {
  opacity: 1;
  top: 16px;
  animation: qz-spin 0.8s linear infinite;
}


/* ── End transitions.css ─────────────────────────────────────────────────── */
/* ============================================================================
 * QueZap v2 — Phase 2 additions (splash, onboarding, login, signup)
 * Appends to v2.css. Does NOT replace Sprint 1 tokens or components.
 *
 * What's new in this section:
 *   §15 — Splash screen   (image 1)
 *   §16 — Onboarding card (image 2)
 *   §17 — Auth card       (images 3 + 4)
 *   §18 — Background gradient + decorative blobs (matches all 3 images)
 * ========================================================================== */


/* ── 15. Splash screen ──────────────────────────────────────────────────── */
.qz-splash-v2 {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at top, rgba(255, 213, 168, .55), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(255, 230, 200, .35), transparent 70%),
    #FFF5EC;
  transition: opacity .5s var(--qz-ease), visibility .5s;
  opacity: 1;
  padding: var(--qz-s-8);
}
.qz-splash-v2-hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* Splash visual styles moved to app.css (scoped under #qz-splash) to avoid conflicts.
   .qz-splash-v2 container + -hide above are kept (used by v2-phase2.js). */



/* ── 16. Onboarding card ────────────────────────────────────────────────── */
.qz-onboard-screen {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 213, 168, .55), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(255, 220, 180, .35), transparent 70%),
    #FFF5EC;
  display: flex; flex-direction: column;
  padding: max(var(--qz-safe-top), var(--qz-s-5)) var(--qz-s-5) calc(var(--qz-s-5) + var(--qz-safe-bottom));
  position: relative;
  overflow: hidden;
}

.qz-onboard-skip {
  position: absolute;
  top: max(var(--qz-safe-top), var(--qz-s-5));
  right: var(--qz-s-5);
  background: none; border: none;
  font-family: var(--qz-ff);
  font-size: 14px; font-weight: 700;
  color: var(--qz-text-2);
  cursor: pointer;
  padding: var(--qz-s-2) var(--qz-s-3);
  z-index: 2;
}
.qz-onboard-skip:hover { color: var(--qz-text); }

.qz-onboard-stage {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  animation: qz-onboard-in 500ms var(--qz-ease) both;
}
@keyframes qz-onboard-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.qz-onboard-visual {
  position: relative;
  width: 280px; height: 280px;
  display: grid; place-items: center;
  margin-bottom: var(--qz-s-6);
}
.qz-onboard-orbit {
  position: absolute; inset: 0;
  border: 2px dashed rgba(242, 97, 0, .35);
  border-radius: 50%;
  animation: qz-spin 30s linear infinite;
}
.qz-onboard-orbit-2 {
  position: absolute; inset: 24px;
  background: radial-gradient(circle, rgba(255, 213, 168, .55), transparent 70%);
  border-radius: 50%;
}
.qz-onboard-icon-tile {
  position: relative;
  width: 96px; height: 96px;
  background: #FFFFFF;
  border-radius: 22px;
  display: grid; place-items: center;
  box-shadow:
    0 18px 36px -8px rgba(242, 97, 0, .25),
    0 0 0 1px rgba(242, 97, 0, .08);
  z-index: 2;
}
.qz-onboard-icon-tile svg {
  width: 50px; height: 50px;
}

.qz-onboard-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: #FFFFFF;
  border-radius: var(--qz-r-pill);
  font-size: 13px; font-weight: 800;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, .12);
  z-index: 3;
  animation: qz-chip-float 4s var(--qz-ease) infinite;
}
.qz-onboard-chip-tl {
  top: 30px; left: 8px;
  color: var(--qz-success);
  animation-delay: 0s;
}
.qz-onboard-chip-br {
  bottom: 30px; right: 0;
  color: var(--qz-primary);
  animation-delay: 1.5s;
}
@keyframes qz-chip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.qz-onboard-title {
  font-family: var(--qz-ff-display);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--qz-text);
  margin: 0 0 var(--qz-s-3);
  max-width: 320px;
}
.qz-onboard-desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--qz-text-2);
  margin: 0;
  max-width: 320px;
}

.qz-onboard-dots {
  display: flex; gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: var(--qz-s-5);
  margin-bottom: var(--qz-s-5);
}
.qz-onboard-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(242, 97, 0, .25);
  transition: all 350ms var(--qz-ease);
}
.qz-onboard-dot-active {
  width: 32px;
  border-radius: 4px;
  background: var(--qz-primary);
}

.qz-onboard-cta {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}


/* ── 17. Auth card (login + signup share the same shell) ───────────────── */
.qz-auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 213, 168, .55), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(255, 220, 180, .25), transparent 60%),
    #FFF5EC;
  padding: max(var(--qz-safe-top), var(--qz-s-5)) var(--qz-s-4) calc(var(--qz-s-5) + var(--qz-safe-bottom));
  display: flex; flex-direction: column;
  align-items: center;
}

.qz-auth-card {
  width: 100%;
  max-width: 420px;
  background: #FFFFFF;
  border-radius: 24px;
  padding: var(--qz-s-6) var(--qz-s-5) var(--qz-s-5);
  box-shadow:
    0 20px 60px -20px rgba(242, 97, 0, .15),
    0 0 0 1px rgba(255, 213, 168, .35);
  margin-top: var(--qz-s-5);
  animation: qz-fade-in 400ms var(--qz-ease) both;
}

.qz-auth-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin-bottom: var(--qz-s-4);
}
.qz-auth-brand-tile {
  width: 38px; height: 38px;
  background: #FFF5EC;
  border-radius: 9px;
  display: grid; place-items: center;
}
.qz-auth-brand-tile svg { width: 22px; height: 22px; }
.qz-auth-brand-text {
  font-family: var(--qz-ff-display);
  font-size: 22px; font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--qz-text);
}
.qz-auth-brand-text .qz-z { color: var(--qz-primary); }

.qz-auth-title {
  font-family: var(--qz-ff-display);
  font-size: 28px; font-weight: 900;
  text-align: center;
  letter-spacing: -0.025em;
  color: var(--qz-text);
  margin: 0 0 6px;
}
.qz-auth-sub {
  font-size: 14px; font-weight: 500;
  text-align: center;
  color: var(--qz-text-2);
  margin: 0 0 var(--qz-s-5);
}

.qz-google-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  background: #FFFFFF;
  border: 1.5px solid var(--qz-border);
  border-radius: 12px;
  font-family: var(--qz-ff);
  font-size: 14px; font-weight: 700;
  color: var(--qz-text);
  cursor: pointer;
  transition: border-color 180ms var(--qz-ease), background 180ms var(--qz-ease), transform 150ms var(--qz-ease-spring);
}
.qz-google-btn:hover { border-color: var(--qz-border-strong); background: #FFFCF9; }
.qz-google-btn:active { transform: scale(.98); }
.qz-google-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.qz-auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: var(--qz-s-5) 0;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--qz-muted);
}
.qz-auth-divider::before,
.qz-auth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--qz-border);
}

.qz-auth-seg {
  display: flex;
  background: #F0EFED;
  border-radius: var(--qz-r-pill);
  padding: 4px;
  margin-bottom: var(--qz-s-5);
}
.qz-auth-seg-btn {
  flex: 1;
  min-height: 40px;
  border: none; background: transparent;
  border-radius: var(--qz-r-pill);
  font-family: var(--qz-ff);
  font-size: 14px; font-weight: 800;
  color: var(--qz-text-2);
  cursor: pointer;
  transition: background 220ms var(--qz-ease), color 220ms var(--qz-ease), box-shadow 220ms var(--qz-ease);
}
.qz-auth-seg-btn-active {
  background: #FFFFFF;
  color: var(--qz-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.qz-auth-field { margin-bottom: var(--qz-s-4); }
.qz-auth-label {
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--qz-text);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.qz-auth-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: #FFFCF9;
  border: 1.5px solid var(--qz-primary);
  border-radius: 12px;
  font-family: var(--qz-ff);
  font-size: 15px; font-weight: 500;
  color: var(--qz-text);
  outline: none;
  transition: border-color 180ms var(--qz-ease), box-shadow 180ms var(--qz-ease), background 180ms var(--qz-ease);
}
.qz-auth-input:focus {
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(242, 97, 0, .12);
}
.qz-auth-input::placeholder { color: var(--qz-muted); font-weight: 500; }
.qz-auth-input.qz-input-empty { border-color: var(--qz-border); background: #FFFFFF; }
.qz-auth-input.qz-input-error { border-color: var(--qz-error); }
.qz-auth-input.qz-input-error:focus { box-shadow: 0 0 0 4px rgba(212, 43, 43, .12); }

.qz-field-error {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--qz-error);
  margin-top: 5px;
  min-height: 16px;
}

.qz-auth-submit {
  width: 100%;
  height: 52px;
  background: var(--qz-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  font-family: var(--qz-ff);
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(242, 97, 0, .45);
  transition: transform 150ms var(--qz-ease-spring), background 180ms var(--qz-ease), box-shadow 180ms var(--qz-ease);
  margin-top: var(--qz-s-2);
}
.qz-auth-submit:hover  { background: var(--qz-primary-dark); }
.qz-auth-submit:active { transform: scale(.98); box-shadow: 0 4px 12px -6px rgba(242, 97, 0, .45); }
.qz-auth-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.qz-auth-submit-loading {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: qz-spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

.qz-auth-forgot {
  text-align: center;
  margin-top: var(--qz-s-3);
  font-size: 13px;
  color: var(--qz-text-2);
}
.qz-auth-forgot-link {
  color: var(--qz-primary);
  font-weight: 800;
  cursor: pointer;
  background: none; border: none;
  font-family: inherit; font-size: inherit;
  padding: 4px;
}
.qz-auth-forgot-link:hover { text-decoration: underline; }

.qz-auth-foot {
  margin-top: var(--qz-s-5);
  text-align: center;
  font-size: 12px;
  color: var(--qz-text-2);
  line-height: 1.6;
}
.qz-auth-foot a {
  color: var(--qz-primary);
  font-weight: 800;
  text-decoration: none;
}
.qz-auth-foot a:hover { text-decoration: underline; }


/* ── 18. OTP form (used after signup) ───────────────────────────────────── */
.qz-otp-hint {
  font-size: 13px; font-weight: 500;
  color: var(--qz-text-2);
  text-align: center;
  margin: 0 0 var(--qz-s-4);
}
.qz-otp-hint strong { color: var(--qz-text); font-weight: 800; }
.qz-otp-row {
  display: flex; gap: 8px;
  justify-content: center;
  margin-bottom: var(--qz-s-4);
}
.qz-otp-row .qz-otp-cell {
  flex: 1;
  max-width: 52px;
}
.qz-otp-resend {
  text-align: center;
  margin-top: var(--qz-s-3);
  font-size: 13px;
  color: var(--qz-text-2);
}
.qz-otp-resend-btn {
  background: none; border: none;
  color: var(--qz-primary);
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  padding: 4px;
}
.qz-otp-resend-btn:disabled { opacity: .5; cursor: not-allowed; }


/* ── 19. Hide forgot password form by default ───────────────────────────── */
#qzForgotForm { display: none; }
#qzForgotForm.qz-shown { display: block; }


/* ── Phase 2 end ────────────────────────────────────────────────────────── */


/* ── 20. PHASE 2 FIX: onboarding fullscreen + visible elements ──────────── */

/* When page-onboarding is the active page, hide everything else on the page:
   nav, bottom tabs, footer, help bubble, location pickers, etc. */
body:has(#page-onboarding.active) #nav,
body:has(#page-onboarding.active) #btmTabBar,
body:has(#page-onboarding.active) .qz-bottom-tab,
body:has(#page-onboarding.active) #footer,
body:has(#page-onboarding.active) footer,
body:has(#page-onboarding.active) #helpBubble,
body:has(#page-onboarding.active) .help-bubble,
body:has(#page-onboarding.active) #qz-loader { display: none !important; }

/* Same protection for auth page */
body:has(#page-auth.active) #nav,
body:has(#page-auth.active) #btmTabBar,
body:has(#page-auth.active) .qz-bottom-tab,
body:has(#page-auth.active) #footer,
body:has(#page-auth.active) footer,
body:has(#page-auth.active) #helpBubble,
body:has(#page-auth.active) .help-bubble { display: none !important; }

/* The page-onboarding container itself needs to be fullscreen */
#page-onboarding.active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9000 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #FFF5EC !important;
  overflow: hidden !important;
}
#page-auth.active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9000 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #FFF5EC !important;
  overflow-y: auto !important;
}

/* Auth screen scrolls if content overflows on short viewports */
.qz-auth-screen { min-height: 100%; }

/* OVERRIDE: title must be solid dark text — fixing the "faded" issue from screenshot */
.qz-onboard-title {
  color: #1A1A2E !important;
  opacity: 1 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #1A1A2E !important;
}
.qz-onboard-desc {
  color: #555560 !important;
  opacity: 1 !important;
}

/* CTA button container — pinned to bottom */
.qz-onboard-cta-wrap {
  flex-shrink: 0;
  padding: var(--qz-s-5) var(--qz-s-5) calc(var(--qz-s-5) + var(--qz-safe-bottom));
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.qz-onboard-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  background: var(--qz-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  font-family: var(--qz-ff);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(242, 97, 0, .5);
  transition: transform 150ms var(--qz-ease-spring), background 180ms var(--qz-ease);
}
.qz-onboard-cta-btn:hover { background: var(--qz-primary-dark); }
.qz-onboard-cta-btn:active { transform: scale(.98); }
.qz-onboard-cta-btn svg { flex-shrink: 0; }

/* Bigger, more visible skip button */
.qz-onboard-skip {
  top: max(var(--qz-safe-top), 20px) !important;
  right: 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #555560 !important;
  background: rgba(255, 255, 255, .6) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  z-index: 10 !important;
}

/* Ensure stage is centered vertically with proper spacing */
.qz-onboard-stage {
  flex: 1;
  min-height: 0;
  padding: 60px var(--qz-s-5) var(--qz-s-4);
  justify-content: center;
}


/* ============================================================================
 * Phase 2 FIX v2 — overrides all visibility issues from screenshots
 * ========================================================================== */

/* ── KILL v1 fade-up classes inside v2 templates ─────────────────────────
   app.css has .fade-up that starts at opacity:0 and waits for scroll
   intersection to add .visible. Inside our injected v2 templates, these
   elements never get .visible because we don't run that observer.
   Force them visible. ───────────────────────────────────────────────────── */
.qz-v2 .fade-up,
.qz-v2 [class*="fade"],
#page-onboarding *,
#page-auth * {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Re-enable opacity for things that legitimately need animation */
.qz-v2 .qz-fade-in,
.qz-v2 .qz-pop-in,
.qz-v2 .qz-slide-up {
  /* Let their own animation rules win */
}

/* ── ONBOARDING fixed layout ─────────────────────────────────────────────── */
#page-onboarding {
  background: #FFF5EC !important;
}
#page-onboarding.active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9000 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
}

.qz-onboard-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 213, 168, .65), transparent 55%),
    radial-gradient(circle at 50% 95%, rgba(255, 220, 180, .35), transparent 70%),
    #FFF5EC;
  overflow: hidden;
}

/* Mobile-width centered container — caps everything to 480px on desktop */
.qz-onboard-inner {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: max(var(--qz-safe-top, 0px), 20px) 24px calc(24px + var(--qz-safe-bottom, 0px));
  min-height: 0;
}

.qz-onboard-skip {
  position: absolute !important;
  top: max(var(--qz-safe-top, 0px), 20px) !important;
  right: 24px !important;
  background: rgba(255, 255, 255, .85) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-family: var(--qz-ff) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #555560 !important;
  cursor: pointer !important;
  z-index: 10 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
}

.qz-onboard-stage {
  flex: 1;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 40px 0 20px !important;
}

.qz-onboard-visual {
  position: relative;
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
  margin: 0 auto 36px !important;
  flex-shrink: 0;
}
.qz-onboard-orbit {
  position: absolute; inset: 0;
  border: 2px dashed rgba(242, 97, 0, .35);
  border-radius: 50%;
}
.qz-onboard-orbit-2 {
  position: absolute; inset: 24px;
  background: radial-gradient(circle, rgba(255, 213, 168, .55), transparent 70%);
  border-radius: 50%;
}
.qz-onboard-icon-tile {
  position: relative;
  width: 96px; height: 96px;
  background: #FFFFFF;
  border-radius: 22px;
  display: grid; place-items: center;
  box-shadow: 0 18px 36px -8px rgba(242, 97, 0, .25), 0 0 0 1px rgba(242, 97, 0, .08);
  z-index: 2;
}
.qz-onboard-icon-tile svg { width: 64px; height: 64px; }

.qz-onboard-chip {
  position: absolute;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #FFFFFF;
  border-radius: 100px;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, .12);
  z-index: 3;
  white-space: nowrap;
}
.qz-onboard-chip-tl {
  top: 10px; left: -10px;
  color: #0F8A4F !important;
}
.qz-onboard-chip-br {
  bottom: 10px; right: -10px;
  color: #F26100 !important;
}

/* The title — FORCE solid dark text against any inherited fade */
.qz-onboard-title {
  font-family: var(--qz-ff-display, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 0 12px !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.qz-onboard-desc {
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  margin: 0 0 24px !important;
  max-width: 320px;
  opacity: 1 !important;
}

.qz-onboard-dots {
  display: flex !important;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin: 8px 0 0 !important;
}
.qz-onboard-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(242, 97, 0, .25);
  transition: all 350ms cubic-bezier(.2, .8, .3, 1);
}
.qz-onboard-dot-active {
  width: 32px;
  border-radius: 4px;
  background: #F26100;
}

/* CTA wrap — always visible, pinned to bottom of inner container */
.qz-onboard-cta-wrap {
  flex-shrink: 0 !important;
  width: 100%;
  padding: 16px 0 0 !important;
}
.qz-onboard-cta-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  background: #F26100 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none;
  border-radius: 16px;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(242, 97, 0, .5);
  transition: transform 150ms, background 180ms;
  opacity: 1 !important;
}
.qz-onboard-cta-btn:hover  { background: #C84F00 !important; }
.qz-onboard-cta-btn:active { transform: scale(.98); }
.qz-onboard-cta-btn svg    { flex-shrink: 0; }


/* ── AUTH fixed layout ─────────────────────────────────────────────────── */
#page-auth {
  background: #FFF5EC !important;
}
#page-auth.active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9000 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.qz-auth-screen {
  min-height: 100%;
  width: 100%;
  padding: max(var(--qz-safe-top, 0px), 24px) 16px calc(24px + var(--qz-safe-bottom, 0px));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 213, 168, .55), transparent 50%),
    #FFF5EC;
}

.qz-auth-card {
  width: 100% !important;
  max-width: 420px !important;
  background: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 32px 24px !important;
  box-shadow: 0 20px 60px -20px rgba(242, 97, 0, .15), 0 0 0 1px rgba(255, 213, 168, .35) !important;
  margin: 0 auto;
}

.qz-auth-brand {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.qz-auth-brand-tile {
  width: 38px; height: 38px;
  background: #FFF5EC !important;
  border-radius: 9px;
  display: grid !important;
  place-items: center;
  flex-shrink: 0;
}
.qz-auth-brand-tile svg { width: 24px; height: 24px; }

.qz-auth-brand-text {
  font-family: var(--qz-ff-display, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
  line-height: 1;
}
.qz-auth-brand-text .qz-q {
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  opacity: 1 !important;
}
.qz-auth-brand-text .qz-z {
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  opacity: 1 !important;
}

.qz-auth-title {
  font-family: var(--qz-ff-display, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  text-align: center;
  letter-spacing: -0.025em;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 0 6px !important;
  opacity: 1 !important;
}
.qz-auth-sub {
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  margin: 0 0 24px !important;
  opacity: 1 !important;
}

.qz-google-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  background: #FFFFFF !important;
  border: 1.5px solid #ECECEC !important;
  border-radius: 12px;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  cursor: pointer;
  opacity: 1 !important;
}
.qz-google-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.qz-google-btn span {
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  opacity: 1 !important;
}

.qz-auth-divider {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 24px 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  opacity: 1 !important;
}
.qz-auth-divider::before, .qz-auth-divider::after {
  content: ''; flex: 1; height: 1px; background: #ECECEC;
}

.qz-auth-seg {
  display: flex !important;
  background: #F0EFED;
  border-radius: 100px;
  padding: 4px;
  margin-bottom: 24px;
}
.qz-auth-seg-btn {
  flex: 1;
  min-height: 40px;
  border: none;
  background: transparent;
  border-radius: 100px;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  cursor: pointer;
  opacity: 1 !important;
  transition: background 220ms, color 220ms, box-shadow 220ms;
}
.qz-auth-seg-btn-active {
  background: #FFFFFF !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.qz-auth-field { margin-bottom: 16px; }
.qz-auth-label {
  display: block;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin-bottom: 6px;
  text-transform: uppercase;
  opacity: 1 !important;
}
.qz-auth-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: #FFFCF9 !important;
  border: 1.5px solid #F26100 !important;
  border-radius: 12px;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  outline: none;
  opacity: 1 !important;
  -webkit-appearance: none !important;
}
.qz-auth-input:focus {
  background: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(242, 97, 0, .12);
}
.qz-auth-input::placeholder {
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  font-weight: 500;
  opacity: 1;
}

.qz-auth-submit {
  width: 100%;
  height: 52px;
  background: #F26100 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none;
  border-radius: 14px;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(242, 97, 0, .45);
  margin-top: 8px;
  opacity: 1 !important;
}
.qz-auth-submit:hover  { background: #C84F00 !important; }
.qz-auth-submit:active { transform: scale(.98); }

.qz-auth-forgot {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  opacity: 1 !important;
}
.qz-auth-forgot-link {
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-weight: 800;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  padding: 4px;
}

.qz-auth-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  opacity: 1 !important;
}
.qz-auth-foot a {
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-weight: 800;
  text-decoration: none;
}

/* Make sure :has() polyfill isn't required — also handle browsers without :has() */
#page-onboarding.active ~ #nav,
#page-onboarding.active ~ #btmTabBar,
#page-auth.active ~ #nav,
#page-auth.active ~ #btmTabBar {
  display: none !important;
}

/* When onboarding or auth is active, hide v1 chrome via body class set by JS */
body.qz-fullscreen-mode #nav,
body.qz-fullscreen-mode #btmTabBar,
body.qz-fullscreen-mode .qz-bottom-tab,
body.qz-fullscreen-mode #footer,
body.qz-fullscreen-mode footer,
body.qz-fullscreen-mode #helpBubble,
body.qz-fullscreen-mode .help-bubble,
body.qz-fullscreen-mode #qz-loader {
  display: none !important;
}



/* ============================================================================
 * Phase 2 POLISH — final pass for professional look
 * ========================================================================== */

/* Constrain the CTA button width so it doesn't stretch absurdly on desktop */
.qz-onboard-cta-btn {
  max-width: 420px !important;
  margin: 0 auto !important;
  height: 56px !important;
}

/* The wrap also needs to center the constrained button */
.qz-onboard-cta-wrap {
  display: flex !important;
  justify-content: center;
  padding: 24px 0 0 !important;
}

/* Remove dots — even if any leftover .qz-onboard-dots HTML lingers */
.qz-onboard-dots { display: none !important; }

/* More breathing room around the title block */
.qz-onboard-stage {
  padding: 60px 0 32px !important;
  gap: 0 !important;
}
.qz-onboard-title { margin-bottom: 14px !important; }
.qz-onboard-desc  { margin-bottom: 0 !important; }

/* Slightly bigger visual circle for desktop hero feel — tighter on mobile */
@media (min-width: 600px) {
  .qz-onboard-visual { width: 280px !important; height: 280px !important; }
  .qz-onboard-title  { font-size: 32px !important; }
  .qz-onboard-desc   { font-size: 16px !important; max-width: 380px !important; }
}

/* Refined skip button — less heavy on desktop */
.qz-onboard-skip {
  padding: 10px 20px !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, .9) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 0, 0, .04) !important;
  transition: background 180ms, transform 150ms !important;
}
.qz-onboard-skip:hover {
  background: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

/* CTA — subtle gradient + better shadow for premium feel */
.qz-onboard-cta-btn {
  background: linear-gradient(180deg, #F26100 0%, #DB5800 100%) !important;
  box-shadow:
    0 12px 28px -8px rgba(242, 97, 0, .55),
    0 2px 6px -1px rgba(242, 97, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
}
.qz-onboard-cta-btn:hover  { background: linear-gradient(180deg, #DB5800 0%, #C84F00 100%) !important; }
.qz-onboard-cta-btn:active {
  transform: scale(.98) !important;
  box-shadow:
    0 6px 14px -4px rgba(242, 97, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}

/* The icon tile — slightly tighter shadow */
.qz-onboard-icon-tile {
  box-shadow:
    0 24px 48px -12px rgba(242, 97, 0, .28),
    0 4px 12px -2px rgba(242, 97, 0, .15),
    0 0 0 1px rgba(242, 97, 0, .06) !important;
}

/* Chips — refined typography */
.qz-onboard-chip {
  padding: 9px 14px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .15) !important;
}
.qz-onboard-chip-tl { top: 6px !important; left: -16px !important; }
.qz-onboard-chip-br { bottom: 6px !important; right: -16px !important; }



/* ── FIX: CTA overlapping description text ──────────────────────────────── */
.qz-onboard-inner {
  gap: 0 !important;
  justify-content: space-between !important;
}
.qz-onboard-stage {
  padding: 60px 0 40px !important;
}
.qz-onboard-cta-wrap {
  padding: 32px 0 16px !important;
  margin-top: auto !important;
}
.qz-onboard-desc {
  margin-bottom: 24px !important;
}
/* ============================================================================
 * QueZap v2 — Phase 3 (Home + Cafe list + Cafe detail + Menu)
 * Appends to v2.css. Self-contained — uses only --qz-* tokens from core.
 * ========================================================================== */


/* ── HOME PAGE ──────────────────────────────────────────────────────────── */
#page-home.active {
  background: #FFF5EC !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 100vh;
}

/* Hide v1 nav and v1 bottom-tab when home is on v2 */
body.qz-home-v2 #nav,
body.qz-home-v2 #btmTabBar,
body.qz-home-v2 .qz-bottom-tab,
body.qz-home-v2 #helpBubble,
body.qz-home-v2 .help-bubble {
  display: none !important;
}

.qz-home {
  background: #FFF5EC;
  min-height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 24px);
}

/* TOP HEADER */
.qz-home-head {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: max(env(safe-area-inset-top, 0), 12px) 16px 8px;
  background: #FFF5EC;
  position: sticky;
  top: 0;
  z-index: 100;
}

.qz-home-loc {
  flex: 1;
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, .04);
  border-radius: 100px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif);
  text-align: left;
  transition: background 180ms, transform 150ms;
}
.qz-home-loc:active { transform: scale(.98); }
.qz-home-loc:hover  { background: #fff; }

.qz-home-loc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: #FFE4D2;
  border-radius: 50%;
  color: #F26100 !important;
  flex-shrink: 0;
  font-size: 14px;
}
.qz-home-loc-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
}
.qz-home-loc-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qz-home-loc-sub {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qz-home-loc-chev {
  color: #555560;
  font-size: 14px;
  flex-shrink: 0;
}

/* When campus is ON, location pill turns orange-tinted */
.qz-home-loc.qz-campus-on {
  background: linear-gradient(135deg, #FFE4D2 0%, #FFD0AE 100%);
  border-color: rgba(242, 97, 0, .25);
}
.qz-home-loc.qz-campus-on .qz-home-loc-ic {
  background: #F26100;
  color: #fff !important;
}

.qz-home-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.qz-home-head-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .04);
  color: #1A1A2E !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  font-size: 17px;
  transition: background 180ms, transform 150ms;
}
.qz-home-head-icon:active { transform: scale(.93); }
.qz-home-head-icon:hover  { background: #FFFCF9; }
.qz-home-cart-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  background: #F26100;
  border: 2px solid #fff;
  border-radius: 50%;
}

.qz-home-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F26100, #C84F00);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none;
  font-family: var(--qz-ff, sans-serif);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: transform 150ms;
}
.qz-home-avatar:active { transform: scale(.93); }

/* SEARCH ROW */
.qz-home-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 12px;
  background: #FFF5EC;
}
.qz-home-search {
  flex: 1;
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif);
  transition: border-color 180ms, box-shadow 180ms;
}
.qz-home-search:hover { border-color: rgba(0, 0, 0, .12); }
.qz-home-search-ic { color: #1A1A2E !important; font-size: 18px; flex-shrink: 0; }
.qz-home-search-ph {
  flex: 1;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
}
.qz-home-search-mic { color: #F26100 !important; font-size: 18px; flex-shrink: 0; }

/* VEG MODE TOGGLE — green when on, gray when off */
.qz-home-veg-toggle {
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif);
  transition: background 180ms, border-color 180ms;
}
.qz-veg-square {
  width: 16px; height: 16px;
  border: 1.5px solid #0F8A4F;
  border-radius: 3px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.qz-veg-dot-in {
  width: 7px; height: 7px;
  background: #0F8A4F;
  border-radius: 50%;
}
.qz-veg-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  line-height: 1;
  text-align: left;
  letter-spacing: 0.04em;
}
.qz-veg-switch {
  position: relative;
  width: 32px;
  height: 18px;
  background: #D5D4CC;
  border-radius: 100px;
  transition: background 200ms;
  flex-shrink: 0;
}
.qz-veg-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.qz-home-veg-toggle.qz-veg-on .qz-veg-switch { background: #0F8A4F; }
.qz-home-veg-toggle.qz-veg-on .qz-veg-knob   { transform: translateX(14px); }
.qz-home-veg-toggle.qz-veg-on .qz-veg-label  { color: #0F8A4F !important; -webkit-text-fill-color: #0F8A4F !important; }
.qz-home-veg-toggle.qz-veg-on {
  background: #EAF6F0;
  border-color: rgba(15, 138, 79, .25);
}

/* BODY (white card area) */
.qz-home-body {
  background: #fff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 20px 16px 24px;
  margin-top: 4px;
  min-height: 70vh;
}

.qz-home-greet {
  font-family: var(--qz-ff-display, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 0 14px !important;
  line-height: 1.25;
}

/* STAT STRIP */
.qz-home-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 20px;
}
.qz-home-stat {
  background: #FFF5EC;
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.qz-home-stat-num {
  display: block;
  font-family: var(--qz-ff-display, 'Urbanist', system-ui, sans-serif);
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2px;
}
.qz-home-stat-lbl {
  display: block;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* SECTIONS */
.qz-home-section { margin: 24px 0; }
.qz-home-section:first-of-type { margin-top: 0; }
.qz-home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.qz-home-section-title {
  font-family: var(--qz-ff-display, 'Urbanist', system-ui, sans-serif) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 0 12px !important;
  line-height: 1.3;
}
.qz-home-section-head .qz-home-section-title { margin: 0 !important; }
.qz-home-section-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif);
}

/* CUISINE ROW — circular tiles */
.qz-cuisine-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 6px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  -webkit-overflow-scrolling: touch;
}
.qz-cuisine-row::-webkit-scrollbar { display: none; }

.qz-cat-circle-wrap {
  flex-shrink: 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif);
  transition: transform 200ms;
}
.qz-cat-circle-wrap:active { transform: scale(.94); }
.qz-cat-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #FFE4D2;
  display: grid !important;
  place-items: center;
  font-size: 32px;
  border: 2.5px solid transparent;
  transition: border-color 180ms, transform 180ms;
  overflow: hidden;
}
.qz-cat-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.qz-cat-circle-wrap.qz-cat-active .qz-cat-circle {
  border-color: #F26100;
}
.qz-cat-circle-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  text-align: center;
  white-space: nowrap;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qz-cat-circle-wrap.qz-cat-active .qz-cat-circle-label {
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-weight: 900 !important;
}

/* FILTER CHIPS row */
.qz-home-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 6px 0;
  margin: 16px -16px 0;
  padding-left: 16px;
  padding-right: 16px;
  -webkit-overflow-scrolling: touch;
}
.qz-home-chips::-webkit-scrollbar { display: none; }

.qz-chip {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: #fff;
  border: 1.5px solid #E5E5DF;
  border-radius: 100px;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif);
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms, border-color 180ms, color 180ms, transform 150ms;
}
.qz-chip:active { transform: scale(.95); }
.qz-chip.qz-chip-active {
  background: #1A1A2E;
  border-color: #1A1A2E;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.qz-chip.qz-chip-health {
  background: #EAF6F0;
  border-color: rgba(15, 138, 79, .3);
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
}
.qz-chip.qz-chip-health.qz-chip-active {
  background: #0F8A4F;
  border-color: #0F8A4F;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* CAFE LIST (cards) */
.qz-cafe-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.qz-cafe-card-v3 {
  display: grid !important;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  background: #fff;
  border: 1px solid #F0EFE8;
  border-radius: 16px;
  padding: 10px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms, box-shadow 180ms;
}
.qz-cafe-card-v3:active {
  transform: scale(.98);
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, .12);
}
.qz-cafe-card-v3 .qz-cc-img {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  background: #FFE4D2;
  flex-shrink: 0;
}
.qz-cafe-card-v3 .qz-cc-img-fallback {
  display: grid;
  place-items: center;
  font-size: 36px;
  background: linear-gradient(135deg, #FFE4D2, #FFD0AE);
}
.qz-cafe-card-v3 .qz-cc-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding-right: 50px;
}
.qz-cafe-card-v3 .qz-cc-name {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
  margin: 0;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif);
}
.qz-cafe-card-v3 .qz-cc-cuisine {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif);
}
.qz-cafe-card-v3 .qz-cc-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif);
}
.qz-cafe-card-v3 .qz-cc-meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #B0B0B5;
  flex-shrink: 0;
}
.qz-cafe-card-v3 .qz-cc-rating {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #0F8A4F;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-family: var(--qz-ff, 'Urbanist', system-ui, sans-serif);
}
.qz-cafe-card-v3 .qz-cc-rating-empty {
  background: #ECECEC;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
}
.qz-cafe-card-v3 .qz-cc-rating-low {
  background: #D4930D;
}
.qz-cafe-card-v3 .qz-cc-promo {
  display: inline-block;
  align-self: flex-start;
  background: #FFE4D2;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.qz-cafe-card-v3.qz-cc-closed .qz-cc-img { filter: grayscale(1); opacity: 0.6; }
.qz-cafe-card-v3.qz-cc-closed { opacity: 0.85; }

.qz-cafe-card-v3 .qz-cc-favbtn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ECECEC;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #B0B0B5;
  cursor: pointer;
  font-size: 14px;
  transition: color 180ms, transform 150ms;
}
.qz-cafe-card-v3 .qz-cc-favbtn:active { transform: scale(.88); }
.qz-cafe-card-v3 .qz-cc-favbtn.qz-cc-faved {
  color: #D42B2B;
}

.qz-cafe-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px 4px;
  -webkit-overflow-scrolling: touch;
}
.qz-cafe-scroll::-webkit-scrollbar { display: none; }
.qz-cafe-scroll .qz-cafe-card-v3 {
  flex-shrink: 0;
  width: 280px;
}


/* ── LOCATION SHEET (bottom sheet for city/campus picker) ───────────────── */
.qz-loc-sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 18, .55);
  z-index: 9500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms;
}
.qz-loc-sheet-scrim.qz-shown {
  opacity: 1;
  pointer-events: auto;
}
.qz-loc-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9600;
  background: #fff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .25);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.2, .8, .3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.qz-loc-sheet.qz-shown { transform: translateY(0); }
.qz-loc-sheet-handle {
  width: 40px;
  height: 4px;
  background: #E5E5DF;
  border-radius: 100px;
  margin: 10px auto 8px;
  flex-shrink: 0;
}
.qz-loc-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px 16px;
  flex-shrink: 0;
}
.qz-loc-sheet-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  letter-spacing: -0.015em;
  margin: 0;
}
.qz-loc-sheet-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #FFF5EC;
  border: none;
  color: #555560 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.qz-loc-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 20px;
  -webkit-overflow-scrolling: touch;
}

.qz-loc-mode-seg {
  display: flex !important;
  background: #FFF5EC;
  border-radius: 100px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 18px;
}
.qz-loc-mode-btn {
  flex: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border: none;
  background: transparent;
  border-radius: 100px;
  font-family: var(--qz-ff, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  cursor: pointer;
  transition: background 220ms, color 220ms, box-shadow 220ms;
}
.qz-loc-mode-btn.qz-active {
  background: #fff !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
.qz-loc-mode-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.qz-loc-section { margin-bottom: 20px; }
.qz-loc-section-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.qz-loc-current-pill {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: #FFE4D2;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.qz-loc-current-pill i {
  color: #F26100 !important;
  font-size: 20px;
}
.qz-loc-current-text {
  flex: 1;
  min-width: 0;
}
.qz-loc-current-label {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0;
  line-height: 1.2;
}
.qz-loc-current-sub {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  margin: 2px 0 0;
  line-height: 1.2;
}

.qz-loc-action {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  border: 1px solid #F0EFE8;
  border-radius: 14px;
  padding: 12px 14px;
  font-family: var(--qz-ff, sans-serif) !important;
  cursor: pointer;
  text-align: left;
  margin-bottom: 8px;
  transition: background 180ms, border-color 180ms;
}
.qz-loc-action:hover { background: #FFFCF9; border-color: #ECECEC; }
.qz-loc-action i {
  color: #F26100 !important;
  font-size: 20px;
  flex-shrink: 0;
}
.qz-loc-action-text {
  flex: 1;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
}
.qz-loc-action-chev {
  color: #B0B0B5;
  font-size: 16px;
}

.qz-loc-empty-state {
  text-align: center;
  padding: 20px 0;
  font-size: 13px;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
}
.qz-loc-empty-state strong {
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  display: block;
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 4px;
}
.qz-loc-empty-state .qz-btn-link {
  display: inline-block;
  margin-top: 10px;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-weight: 800;
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}


/* ── CAFE LIST PAGE ─────────────────────────────────────────────────────── */
#page-restaurants.active {
  background: #FFF5EC !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.qz-list-head {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: max(env(safe-area-inset-top, 0), 12px) 16px 12px;
  background: #FFF5EC;
  position: sticky;
  top: 0;
  z-index: 100;
}
.qz-back-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .04);
  color: #1A1A2E !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 150ms;
}
.qz-back-btn:active { transform: scale(.93); }

.qz-list-title-wrap { flex: 1; min-width: 0; }
.qz-list-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qz-list-title #restCityLabel {
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
}
.qz-list-sub {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  margin: 2px 0 0;
  line-height: 1.2;
}

.qz-list-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 12px;
  background: #FFF5EC;
}
.qz-list-search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--qz-ff, sans-serif);
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  padding: 0;
  min-width: 0;
}
.qz-list-search-input::placeholder {
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  font-weight: 500;
}
.qz-list-filter-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  color: #1A1A2E !important;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms, transform 150ms;
}
.qz-list-filter-btn:active { transform: scale(.93); }

.qz-list-chips {
  padding: 4px 16px 12px;
  margin: 0;
  background: #FFF5EC;
}
.qz-list-chips .qz-chip {
  background: #fff;
}

.qz-cafe-list-body {
  background: #fff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 20px 16px;
  min-height: 70vh;
}
.qz-cafe-list-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qz-empty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 20px;
  gap: 16px;
}
.qz-empty-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0;
}
.qz-empty-sub {
  font-size: 13px !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  max-width: 280px;
  margin: 0;
  line-height: 1.6;
}


/* ── CAFE DETAIL PAGE ──────────────────────────────────────────────────── */
#page-restaurant.active {
  background: #fff !important;
  padding-top: 0 !important;
}

.qz-cd-hero-wrap {
  position: relative;
  margin-bottom: 16px;
}
.qz-cd-hero {
  height: 200px;
  background: linear-gradient(180deg, #FF8533 0%, #F26100 70%, #D85800 100%);
  position: relative;
  overflow: hidden;
}
.qz-cd-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qz-cd-hero-overlay {
  position: absolute;
  top: max(env(safe-area-inset-top, 0), 12px);
  left: 0;
  right: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 10;
}
.qz-cd-back, .qz-cd-fav, .qz-cd-share {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border: none;
  color: #1A1A2E !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: transform 150ms;
}
.qz-cd-back:active, .qz-cd-fav:active, .qz-cd-share:active { transform: scale(.93); }
.qz-cd-hero-right { display: flex; gap: 8px; }
.qz-cd-fav.qz-faved { color: #D42B2B !important; }

/* CAFE INFO BLOCK */
.qz-cd-info {
  padding: 0 16px 16px;
}
.qz-cd-name-row {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.qz-cd-name {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.15;
  flex: 1;
  min-width: 0;
}
.qz-cd-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #0F8A4F;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
  font-family: var(--qz-ff, sans-serif);
}
.qz-cd-rating .qz-cd-rating-count {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  text-align: center;
  margin-top: 2px;
}

.qz-cd-cuisine {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  margin: 0 0 12px;
}
.qz-cd-meta-row {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.qz-cd-meta-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
}
.qz-cd-meta-item i {
  color: #F26100 !important;
  font-size: 16px;
  flex-shrink: 0;
}
.qz-cd-meta-item .qz-cd-meta-light {
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  font-weight: 500;
}

.qz-cd-promo {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: #FFF5EC;
  border: 1.5px dashed #F26100;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.qz-cd-promo i {
  color: #F26100 !important;
  font-size: 18px;
}
.qz-cd-promo-text {
  flex: 1;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
}
.qz-cd-promo-code {
  background: #fff;
  border: 1px solid #F26100;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 900;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
}

/* PICKUP/DELIVERY toggle */
.qz-cd-mode-seg {
  display: flex !important;
  background: #FFF5EC;
  border: 1.5px solid #FFE4D2;
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
}
.qz-cd-mode-btn {
  flex: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-family: var(--qz-ff, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  cursor: pointer;
  transition: background 200ms, color 200ms, box-shadow 200ms;
}
.qz-cd-mode-btn.qz-active {
  background: #fff !important;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.qz-cd-mode-btn i { font-size: 16px; }
.qz-cd-mode-btn .qz-cd-mode-meta {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.7;
}

/* SLOT PICKER */
.qz-cd-slots-wrap {
  margin-bottom: 16px;
  background: #FFF5EC;
  border: 1.5px solid #FFE4D2;
  border-radius: 14px;
  padding: 12px 14px;
}
.qz-cd-slots-title {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.qz-cd-slots-title i { font-size: 13px; }
.qz-cd-slot-headline {
  font-family: var(--qz-ff-display, sans-serif);
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 0 10px;
}
.qz-cd-slot-headline-sub {
  font-size: 13px;
  font-weight: 700;
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
}
.qz-cd-slot-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -14px;
  padding: 4px 14px 4px;
}
.qz-cd-slot-row::-webkit-scrollbar { display: none; }

.qz-cd-slot {
  flex-shrink: 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1.5px solid #E5E5DF;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  min-width: 64px;
  font-family: var(--qz-ff, sans-serif);
  transition: background 180ms, border-color 180ms, transform 150ms;
}
.qz-cd-slot:active { transform: scale(.95); }
.qz-cd-slot-time {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  line-height: 1.1;
}
.qz-cd-slot-sub {
  font-size: 10px;
  font-weight: 700;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  margin-top: 2px;
}
.qz-cd-slot.qz-active {
  background: #F26100;
  border-color: #F26100;
}
.qz-cd-slot.qz-active .qz-cd-slot-time,
.qz-cd-slot.qz-active .qz-cd-slot-sub {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.qz-cd-slot.qz-cd-slot-full {
  opacity: 0.4;
  cursor: not-allowed;
}

/* MENU CATEGORY NAV */
.qz-menu-cats {
  display: flex !important;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #F0EFE8;
  border-bottom: 1px solid #F0EFE8;
  position: sticky;
  top: 0;
  z-index: 90;
  -webkit-overflow-scrolling: touch;
}
.qz-menu-cats::-webkit-scrollbar { display: none; }

.qz-menu-cat-btn {
  flex-shrink: 0;
  background: #fff;
  border: 1.5px solid #ECECEC;
  border-radius: 100px;
  padding: 7px 14px;
  font-family: var(--qz-ff, sans-serif);
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms, border-color 180ms, color 180ms;
}
.qz-menu-cat-btn.qz-active {
  background: #1A1A2E;
  border-color: #1A1A2E;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* MENU CONTENT */
.qz-menu-list {
  padding: 0 16px 100px;
  background: #fff;
}
.qz-menu-section {
  margin: 24px 0;
}
.qz-menu-section-head {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.qz-menu-section-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  letter-spacing: -0.015em;
  margin: 0;
}
.qz-menu-section-count {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
}

.qz-menu-item {
  display: grid !important;
  grid-template-columns: 1fr 96px;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #F0EFE8;
  align-items: start;
}
.qz-menu-item:last-child { border-bottom: none; }

.qz-menu-item-info { min-width: 0; }
.qz-menu-item-vegmark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.qz-veg-marker {
  width: 14px; height: 14px;
  border: 1.5px solid #0F8A4F;
  border-radius: 3px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.qz-veg-marker::after {
  content: '';
  width: 7px; height: 7px;
  background: #0F8A4F;
  border-radius: 50%;
}
.qz-nonveg-marker {
  width: 14px; height: 14px;
  border: 1.5px solid #D42B2B;
  border-radius: 3px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.qz-nonveg-marker::after {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #D42B2B;
}
.qz-menu-item-bestseller {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFF5E6;
  color: #B8741E !important;
  -webkit-text-fill-color: #B8741E !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}
.qz-menu-item-bestseller i { font-size: 11px; color: #D4930D !important; }
.qz-menu-item-name {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 4px 0 4px;
  line-height: 1.25;
  font-family: var(--qz-ff, sans-serif);
}
.qz-menu-item-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
  margin-bottom: 6px;
}
.qz-menu-item-rating i { font-size: 11px; }
.qz-menu-item-rating .qz-mr-count {
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  font-weight: 600;
  margin-left: 2px;
}
.qz-menu-item-price {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
  font-family: var(--qz-ff, sans-serif);
}
.qz-menu-item-price-old {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #B0B0B5 !important;
  -webkit-text-fill-color: #B0B0B5 !important;
  text-decoration: line-through;
  margin-left: 6px;
}
.qz-menu-item-desc {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qz-menu-item-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.qz-menu-item-img {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  object-fit: cover;
  background: #FFE4D2;
}
.qz-menu-item-img-fallback {
  display: grid;
  place-items: center;
  font-size: 36px;
  background: linear-gradient(135deg, #FFE4D2, #FFD0AE);
}
.qz-menu-item-img-square {
  width: 96px;
  height: 96px;
  border-radius: 12px;
}
.qz-menu-item-img-square.qz-color-orange { background: linear-gradient(135deg, #FF8533, #F26100); }
.qz-menu-item-img-square.qz-color-green  { background: linear-gradient(135deg, #4FB378, #2E8A52); }
.qz-menu-item-img-square.qz-color-blue   { background: linear-gradient(135deg, #5B9BD5, #2A6FB0); }
.qz-menu-item-img-square.qz-color-yellow { background: linear-gradient(135deg, #F5C246, #D49718); }

.qz-menu-item-add {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #fff;
  border: 1.5px solid #F26100;
  border-radius: 10px;
  padding: 6px 14px;
  font-family: var(--qz-ff, sans-serif);
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .12);
  white-space: nowrap;
  transition: background 180ms, transform 150ms;
}
.qz-menu-item-add:active { transform: translateX(-50%) scale(.94); }
.qz-menu-item-add:hover { background: #FFF5EC; }

/* Stepper variant when added to cart */
.qz-menu-item-step {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex !important;
  align-items: center;
  background: #fff;
  border: 1.5px solid #F26100;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .12);
  height: 32px;
}
.qz-menu-item-step-btn {
  width: 32px;
  height: 100%;
  border: none;
  background: transparent;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qz-menu-item-step-num {
  min-width: 24px;
  text-align: center;
  font-family: var(--qz-ff, sans-serif);
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-variant-numeric: tabular-nums;
}

/* STICKY CART BAR */
.qz-sticky-cart {
  position: fixed !important;
  left: 12px;
  right: 12px;
  bottom: max(env(safe-area-inset-bottom, 0), 12px);
  z-index: 95;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background: #F26100;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 8px 28px -4px rgba(242, 97, 0, .5);
  cursor: pointer;
  font-family: var(--qz-ff, sans-serif);
  text-decoration: none;
  transition: transform 200ms cubic-bezier(.34, 1.56, .64, 1);
}
.qz-sticky-cart-info {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}
.qz-sticky-cart-count {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, .9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .9) !important;
}
.qz-sticky-cart-total {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-variant-numeric: tabular-nums;
}
.qz-sticky-cart-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}


/* ── KILL v1 fade-up classes inside v2 home/cafe pages ──────────────────── */
#page-home .fade-up,
#page-home [class*="fade"],
#page-restaurants .fade-up,
#page-restaurants [class*="fade"],
#page-restaurant .fade-up,
#page-restaurant [class*="fade"] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}


/* ── DESKTOP — cap mobile-width feel ────────────────────────────────────── */
@media (min-width: 720px) {
  .qz-home,
  .qz-cafe-list,
  .qz-cafe-detail {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, .04);
  }
}


/* ── End Phase 3 ────────────────────────────────────────────────────────── */


/* ============================================================================
 * Phase 3 FIX 1 — addressing screenshot issues
 * ========================================================================== */

/* ── KILL v1 chrome on v2 home/list/detail pages — STRONGER selectors ──── */
body.qz-home-v2 #nav,
body.qz-home-v2 #btmTabBar,
body.qz-home-v2 #bottomTabBar,
body.qz-home-v2 .bottom-tab,
body.qz-home-v2 .bottom-nav,
body.qz-home-v2 .qz-bottom-tab,
body.qz-home-v2 .qz-btm-tab,
body.qz-home-v2 .btm-nav,
body.qz-home-v2 .btm-tab-bar,
body.qz-home-v2 #helpBubble,
body.qz-home-v2 #help-bubble,
body.qz-home-v2 .help-bubble,
body.qz-home-v2 .help-fab,
body.qz-home-v2 #qzHelpBubble,
body.qz-home-v2 #back-to-top,
body.qz-home-v2 .back-to-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fallback when body class missed — use page-active selector */
#page-home.active ~ #btmTabBar,
#page-home.active ~ #nav,
#page-home.active ~ #helpBubble,
#page-restaurants.active ~ #btmTabBar,
#page-restaurants.active ~ #nav,
#page-restaurants.active ~ #helpBubble,
#page-restaurant.active ~ #btmTabBar,
#page-restaurant.active ~ #nav,
#page-restaurant.active ~ #helpBubble {
  display: none !important;
}

/* Suppress legacy qz3TrustRow leak (the "1—" floating text) */
#qz3TrustRow {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Suppress location-pill subtitle when city is set (looks cleaner) */
.qz-home-loc .qz-home-loc-sub {
  font-size: 10px !important;
}
@media (max-width: 380px) {
  .qz-home-loc .qz-home-loc-sub { display: none; }
  .qz-home-loc { padding: 6px 12px; }
}

/* Tighten location sheet so it doesn't leak background */
.qz-loc-sheet-scrim {
  background: rgba(15, 15, 18, .65) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
.qz-loc-sheet {
  max-height: 75vh !important;
}



/* ============================================================================
 * Phase 3 FIX — kill v1 chrome, dividers, fix back button
 * ========================================================================== */

/* ── Stronger kill-list for v1 nav, bottom bar, help, divider lines ────── */
body.qz-home-v2 #nav,
body.qz-home-v2 #btmTabBar,
body.qz-home-v2 #bottomTabBar,
body.qz-home-v2 .bottom-tab,
body.qz-home-v2 .bottom-nav,
body.qz-home-v2 .qz-bottom-tab,
body.qz-home-v2 .qz-btm-tab,
body.qz-home-v2 .btm-nav,
body.qz-home-v2 .btm-tab-bar,
body.qz-home-v2 #helpBubble,
body.qz-home-v2 #help-bubble,
body.qz-home-v2 .help-bubble,
body.qz-home-v2 .help-fab,
body.qz-home-v2 #qzHelpBubble,
body.qz-home-v2 #back-to-top,
body.qz-home-v2 .back-to-top,
body.qz-home-v2 footer,
body.qz-home-v2 #footer,
body.qz-home-v2 .footer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
}

/* Fallback — page-based selectors if body class missed */
#page-home.active ~ #btmTabBar,
#page-home.active ~ #nav,
#page-home.active ~ #helpBubble,
#page-home.active ~ footer,
#page-home.active ~ .footer,
#page-restaurants.active ~ #btmTabBar,
#page-restaurants.active ~ #nav,
#page-restaurants.active ~ #helpBubble,
#page-restaurants.active ~ footer,
#page-restaurant.active ~ #btmTabBar,
#page-restaurant.active ~ #nav,
#page-restaurant.active ~ #helpBubble,
#page-restaurant.active ~ footer {
  display: none !important;
}

/* Suppress legacy "1—" leak */
#qz3TrustRow {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* No section dividers — match Zomato flat layout */
.qz-home-section { border: none !important; box-shadow: none !important; }
.qz-home-section + .qz-home-section { border-top: none !important; }
.qz-home-body { border-top: none !important; }
.qz-home-chips { border-top: none !important; border-bottom: none !important; }
.qz-cuisine-row { border: none !important; }
.qz-cafe-list { border: none !important; }

/* Subtitle hide when city set (compact layout) */
@media (max-width: 420px) {
  .qz-home-loc .qz-home-loc-sub { display: none !important; }
  .qz-home-loc { padding: 7px 12px; }
}

/* Sheet scrim darker + blur — fixes background bleed */
.qz-loc-sheet-scrim {
  background: rgba(15, 15, 18, .65) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
.qz-loc-sheet {
  max-height: 75vh !important;
}

/* Cuisine circle real photo styling */
.qz-cat-circle {
  background: #FFE4D2;
  position: relative;
  border: 2.5px solid transparent;
}
.qz-cat-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.qz-cat-circle-wrap.qz-cat-active .qz-cat-circle {
  border-color: #F26100 !important;
  transform: scale(1.05);
}


/* ============================================================================
 * Phase 3 FIX 2 — CORRECT IDs for kill-list (verified from real index.html)
 * Bottom nav is #btmTab / .btm-tab — NOT #btmTabBar
 * Help button is #qzHelpBtn / .qz-help-btn — NOT #helpBubble
 * ========================================================================== */

body.qz-home-v2 #btmTab,
body.qz-home-v2 .btm-tab,
body.qz-home-v2 #qzHelpBtn,
body.qz-home-v2 .qz-help-btn,
body.qz-home-v2 #nav,
body.qz-home-v2 footer,
body.qz-home-v2 #qzFooter,
body.qz-home-v2 .qz-footer,
body.qz-home-v2 #floatCart {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Page-based fallback if body class is missing */
body:has(#page-home.active) #btmTab,
body:has(#page-home.active) .btm-tab,
body:has(#page-home.active) #qzHelpBtn,
body:has(#page-home.active) .qz-help-btn,
body:has(#page-home.active) #nav,
body:has(#page-home.active) footer,
body:has(#page-home.active) #qzFooter,
body:has(#page-restaurants.active) #btmTab,
body:has(#page-restaurants.active) .btm-tab,
body:has(#page-restaurants.active) #qzHelpBtn,
body:has(#page-restaurants.active) .qz-help-btn,
body:has(#page-restaurants.active) #nav,
body:has(#page-restaurant.active) #btmTab,
body:has(#page-restaurant.active) .btm-tab,
body:has(#page-restaurant.active) #qzHelpBtn,
body:has(#page-restaurant.active) .qz-help-btn,
body:has(#page-restaurant.active) #nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Make sure body padding-bottom doesn't reserve space for the now-hidden btm-tab */
body.qz-home-v2 { padding-bottom: 0 !important; }



/* ============================================================================
 * PHASE 4 — Item modal + Cart redesign
 * ========================================================================== */

/* ── ITEM MODAL (bottom sheet, image 8 style) ──────────────────────────── */
.qz-item-scrim {
  position: fixed; inset: 0;
  z-index: 9500;
  background: rgba(15, 15, 18, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms;
}
.qz-item-scrim.qz-shown { opacity: 1; pointer-events: auto; }

.qz-item-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9600;
  background: #FFFFFF;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .25);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.2, .8, .3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
}
.qz-item-sheet.qz-shown { transform: translateY(0); }

.qz-item-hero {
  position: relative;
  height: 180px;
  background: linear-gradient(180deg, #FF8533 0%, #F26100 100%);
  flex-shrink: 0;
  overflow: hidden;
}
.qz-item-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.qz-item-hero-overlay {
  position: absolute;
  top: 16px; left: 16px; right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 2;
}
.qz-item-badges {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.qz-item-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, .65);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 5px 10px;
  border-radius: 100px;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
  font-family: var(--qz-ff, sans-serif);
}
.qz-item-badge i { font-size: 12px; color: #F5C246 !important; }
.qz-item-badge-orange {
  background: #F26100;
  color: #fff !important;
}
.qz-item-badge-orange i { color: #fff !important; }

.qz-item-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  border: none;
  color: #1A1A2E !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 150ms;
}
.qz-item-close:active { transform: scale(.9); }

.qz-item-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 8px;
  -webkit-overflow-scrolling: touch;
}

.qz-item-veg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qz-item-veg-nv {
  color: #D42B2B !important;
  -webkit-text-fill-color: #D42B2B !important;
}

.qz-item-name {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 0 8px;
  line-height: 1.2;
}
.qz-item-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.qz-item-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #0F8A4F;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
  font-family: var(--qz-ff, sans-serif);
}
.qz-item-rating i { font-size: 11px; }
.qz-item-rating-meta {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
}

.qz-item-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.qz-item-price {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  font-variant-numeric: tabular-nums;
  font-family: var(--qz-ff, sans-serif);
}
.qz-item-price-old {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #B0B0B5 !important;
  -webkit-text-fill-color: #B0B0B5 !important;
  text-decoration: line-through;
}
.qz-item-price-off {
  background: #FFE4D2;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
}

.qz-item-desc {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.6;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  margin: 0 0 20px;
}

.qz-item-foot {
  flex-shrink: 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid #F0EFE8;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.qz-item-step {
  display: inline-flex !important;
  align-items: center;
  background: #fff;
  border: 1.5px solid #E5E5DF;
  border-radius: 14px;
  overflow: hidden;
  height: 52px;
}
.qz-item-step-btn {
  width: 44px;
  height: 100%;
  border: none;
  background: transparent;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  font-family: var(--qz-ff, sans-serif);
}
.qz-item-step-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.qz-item-step-num {
  min-width: 32px;
  text-align: center;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  font-variant-numeric: tabular-nums;
}
.qz-item-add-cta {
  flex: 1;
  height: 52px;
  background: #F26100;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none;
  border-radius: 14px;
  font-family: var(--qz-ff, sans-serif);
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(242, 97, 0, .5);
  transition: transform 150ms, background 180ms;
}
.qz-item-add-cta:hover { background: #C84F00; }
.qz-item-add-cta:active { transform: scale(.98); }


/* ── CART PAGE redesign ─────────────────────────────────────────────────── */
#page-cart.active {
  background: #FFF5EC !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.qz-cart {
  min-height: 100vh;
  background: #FFF5EC;
  padding-bottom: 100px;
}

.qz-cart-content {
  padding: 16px;
}

.qz-cart-empty {
  text-align: center;
  padding: 80px 24px;
}
.qz-cart-empty-emoji {
  font-size: 64px;
  margin-bottom: 16px;
}
.qz-cart-empty-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 0 8px;
}
.qz-cart-empty-sub {
  font-size: 13px !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  margin: 0 0 24px;
}
.qz-cart-empty-cta {
  display: inline-block;
  background: #F26100;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--qz-ff, sans-serif);
  font-size: 14px;
}

/* Cafe card on cart */
.qz-cart-cafe {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #F0EFE8;
}
.qz-cart-cafe-img {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF8533, #F26100);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.qz-cart-cafe-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.qz-cart-cafe-info {
  flex: 1; min-width: 0;
}
.qz-cart-cafe-name {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-family: var(--qz-ff, sans-serif);
}
.qz-cart-cafe-sub {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  margin: 2px 0 0;
}
.qz-cart-cafe-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFE4D2;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  font-family: var(--qz-ff, sans-serif);
}
.qz-cart-cafe-time i { font-size: 12px; }

/* Order type segmented control */
.qz-cart-mode {
  display: flex !important;
  background: #fff;
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 12px;
  border: 1px solid #F0EFE8;
}
.qz-cart-mode-btn {
  flex: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-family: var(--qz-ff, sans-serif) !important;
  cursor: pointer;
  transition: background 200ms;
  flex-direction: column;
  padding: 8px 6px;
}
.qz-cart-mode-btn-title {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
}
.qz-cart-mode-btn-sub {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
}
.qz-cart-mode-btn.qz-active {
  background: #FFF5EC !important;
  border: 1.5px solid #F26100 !important;
}
.qz-cart-mode-btn.qz-active .qz-cart-mode-btn-title,
.qz-cart-mode-btn.qz-active .qz-cart-mode-btn-sub {
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
}
.qz-cart-mode-icon {
  font-size: 18px;
  color: #555560;
}
.qz-cart-mode-btn.qz-active .qz-cart-mode-icon { color: #F26100; }

/* Items list */
.qz-cart-items {
  background: #fff;
  border-radius: 16px;
  padding: 8px 16px;
  margin-bottom: 12px;
  border: 1px solid #F0EFE8;
}
.qz-cart-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #F0EFE8;
}
.qz-cart-item:last-child { border-bottom: none; }
.qz-cart-item-veg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  border: 1.5px solid #0F8A4F;
  border-radius: 3px;
  display: inline-grid;
  place-items: center;
}
.qz-cart-item-veg::after {
  content: '';
  width: 7px; height: 7px;
  background: #0F8A4F;
  border-radius: 50%;
}
.qz-cart-item-info { flex: 1; min-width: 0; }
.qz-cart-item-name {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 0 2px;
  font-family: var(--qz-ff, sans-serif);
}
.qz-cart-item-meta {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
}
.qz-cart-item-step {
  display: inline-flex !important;
  align-items: center;
  background: #fff;
  border: 1.5px solid #0F8A4F;
  border-radius: 8px;
  overflow: hidden;
  height: 28px;
}
.qz-cart-item-step-btn {
  width: 28px;
  height: 100%;
  border: none;
  background: transparent;
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}
.qz-cart-item-step-num {
  min-width: 20px;
  text-align: center;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
  font-variant-numeric: tabular-nums;
}
.qz-cart-item-price {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 64px;
}

/* Pickup slot reminder */
.qz-cart-slot {
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: #FFF5E6;
  border: 1.5px solid #FFD56B;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px 0 12px;
}
.qz-cart-slot i { font-size: 16px; color: #B8741E !important; }
.qz-cart-slot-text {
  flex: 1;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
}
.qz-cart-slot-cta {
  background: none; border: none;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  cursor: pointer;
  font-family: var(--qz-ff, sans-serif);
}

/* Promo */
.qz-cart-promo-box {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: #FFF5EC;
  border: 1.5px dashed #F26100;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.qz-cart-promo-icon {
  width: 36px; height: 36px;
  background: #F26100;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff !important;
  font-size: 16px;
  flex-shrink: 0;
}
.qz-cart-promo-info { flex: 1; }
.qz-cart-promo-title {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0;
}
.qz-cart-promo-sub {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
  margin: 2px 0 0;
}
.qz-cart-promo-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--qz-ff, sans-serif);
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  padding: 0;
}
.qz-cart-promo-input::placeholder {
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
}
.qz-cart-promo-apply {
  background: #F26100;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer;
  font-family: var(--qz-ff, sans-serif);
}

/* Bill summary */
.qz-cart-bill {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid #F0EFE8;
}
.qz-cart-bill-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 0 10px;
}
.qz-cart-bill-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
}
.qz-cart-bill-row strong {
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  font-weight: 800;
}
.qz-cart-bill-row.qz-cart-bill-discount {
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
  font-weight: 800;
}
.qz-cart-bill-row.qz-cart-bill-discount strong {
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
}
.qz-cart-bill-total {
  border-top: 1px dashed #E5E5DF;
  margin-top: 6px;
  padding-top: 12px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
}
.qz-cart-bill-total strong {
  font-size: 18px;
  font-family: var(--qz-ff-display, sans-serif);
}

/* Sticky proceed button */
.qz-cart-foot {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 90;
  background: #fff;
  border-top: 1px solid #F0EFE8;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
  display: flex !important;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, .1);
}
.qz-cart-foot-amt {
  flex: 1;
}
.qz-cart-foot-old {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #B0B0B5 !important;
  -webkit-text-fill-color: #B0B0B5 !important;
  text-decoration: line-through;
}
.qz-cart-foot-amt-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.qz-cart-foot-total {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  font-variant-numeric: tabular-nums;
  font-family: var(--qz-ff-display, sans-serif);
}
.qz-cart-proceed {
  background: #F26100;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none;
  border-radius: 14px;
  padding: 14px 24px;
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer;
  font-family: var(--qz-ff, sans-serif);
  box-shadow: 0 8px 20px -6px rgba(242, 97, 0, .5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.qz-cart-proceed:active { transform: scale(.98); }



/* ============================================================================
 * Phase 4 FIX — Kill ALL horizontal lines, dividers, separators on v2 pages
 * Plus refined cafe detail page polish ("peak detailing")
 * ========================================================================== */

/* ── KILL ALL DIVIDERS on v2 pages — Zomato style, only spacing separates ─ */
body.qz-home-v2 #page-restaurant *,
body.qz-home-v2 #page-restaurant {
  /* Remove all hr / borders / dividers */
}
body.qz-home-v2 #page-restaurant hr,
body.qz-home-v2 #page-home hr,
body.qz-home-v2 #page-restaurants hr,
body.qz-home-v2 #page-cart hr {
  display: none !important;
}

/* Specific known dividers in app.js menu rendering */
body.qz-home-v2 #page-restaurant .menu-cat-header,
body.qz-home-v2 #page-restaurant .menu-row {
  border-bottom: none !important;
  border-top: none !important;
}
body.qz-home-v2 #page-restaurant .qz2-menu-cat,
body.qz-home-v2 #page-restaurant .qz2-menu-cat-header,
body.qz-home-v2 #page-restaurant .qz2-menu-row,
body.qz-home-v2 #page-restaurant .menu-section,
body.qz-home-v2 #page-restaurant .menu-cat-items {
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* Menu category bar — no bottom border */
body.qz-home-v2 #menuCatsBar {
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .03) !important;
}

/* Restaurant detail sticky header strip */
body.qz-home-v2 #rest-sticky-header {
  border-bottom: none !important;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .08) !important;
}

/* ── REFINED CAFE DETAIL ("peak detailing") ────────────────────────────── */

/* Hero — bigger, with subtle gradient overlay */
body.qz-home-v2 .qz-cd-hero-wrap,
body.qz-home-v2 #page-restaurant .qz2-rd-hero,
body.qz-home-v2 #page-restaurant .rd-hero {
  position: relative;
  margin: 0 0 0 0 !important;
  padding: 0 !important;
}

body.qz-home-v2 #page-restaurant .qz2-rd-hero,
body.qz-home-v2 #page-restaurant .rd-hero,
body.qz-home-v2 #qz2RdHero {
  height: 170px !important;
  background: linear-gradient(180deg, #FFF5EC 0%, #FFE4D2 60%, #FFD0AE 100%);
  position: relative;
  overflow: hidden;
}
body.qz-home-v2 #qz2RdHero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 213, 79, .18) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(242, 97, 0, .08) 0%, transparent 50%);
  pointer-events: none;
}
body.qz-home-v2 #qz2RdHero::after {
  display: none !important;
}
body.qz-home-v2 #qz2RdHero img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* Make sure floating back/share/fav buttons are above hero overlay */
body.qz-home-v2 .qz-cd-hero-overlay,
body.qz-home-v2 .qz2-rd-overlay {
  z-index: 5 !important;
}

/* Cafe info section — pulled up over hero with white card effect */
body.qz-home-v2 #page-restaurant #rdInfo {
  background: #fff;
  border-radius: 24px 24px 0 0;
  margin-top: -28px;
  position: relative;
  z-index: 2;
  padding: 24px 16px 16px;
  box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, .12);
}

/* Cafe info text styling */
body.qz-home-v2 #rdInfo .rest-detail-name,
body.qz-home-v2 #rdInfo .rd-name {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  color: #1A1A2E !important;
  line-height: 1.15 !important;
  margin: 0 0 4px !important;
}

body.qz-home-v2 #rdInfo .rest-detail-cuisine,
body.qz-home-v2 #rdInfo .rd-cuisine {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #8B8B95 !important;
  margin: 0 0 14px !important;
}

/* Rating chip — green pill */
body.qz-home-v2 #rdInfo .rest-detail-rating,
body.qz-home-v2 #rdInfo .rd-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #0F8A4F !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

/* Meta items (location, hours, distance) — clean grid */
body.qz-home-v2 #rdInfo .rdm-list,
body.qz-home-v2 #rdInfo .rd-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 12px 0 0 !important;
  padding: 12px !important;
  background: #FFF5EC !important;
  border-radius: 14px !important;
  border: none !important;
}

body.qz-home-v2 #rdInfo .rdm-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

body.qz-home-v2 #rdInfo .rdm-item svg {
  flex-shrink: 0;
  color: #F26100 !important;
  width: 16px !important;
  height: 16px !important;
}

body.qz-home-v2 #rdInfo .rdm-new-badge {
  display: inline-block;
  background: #FFE4D2;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* Menu category bar — refined */
body.qz-home-v2 #menuCatsBar {
  background: #fff !important;
  padding: 14px 16px !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  -webkit-overflow-scrolling: touch;
}
body.qz-home-v2 #menuCatsBar::-webkit-scrollbar { display: none; }

body.qz-home-v2 #menuCatsBar .cat-btn,
body.qz-home-v2 #menuCatsBar .qz2-menu-cat-btn,
body.qz-home-v2 #menuCatsBar button {
  flex-shrink: 0 !important;
  background: #fff !important;
  border: 1.5px solid #ECECEC !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  font-family: var(--qz-ff, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 180ms, border-color 180ms, color 180ms !important;
}

body.qz-home-v2 #menuCatsBar .cat-btn.active,
body.qz-home-v2 #menuCatsBar .qz2-menu-cat-btn.active,
body.qz-home-v2 #menuCatsBar button.active {
  background: #1A1A2E !important;
  border-color: #1A1A2E !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Menu sections — section headers */
body.qz-home-v2 #menuContent .menu-cat-header,
body.qz-home-v2 #menuContent .menu-section-header,
body.qz-home-v2 #menuContent .qz2-menu-cat-header {
  padding: 20px 16px 12px !important;
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  letter-spacing: -0.015em !important;
  background: #fff !important;
  border: none !important;
}

/* Menu rows — refined */
body.qz-home-v2 #menuContent .menu-row,
body.qz-home-v2 #menuContent .qz2-menu-row {
  display: flex !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: none !important;
  align-items: flex-start !important;
  cursor: pointer;
  transition: background 150ms;
}
body.qz-home-v2 #menuContent .menu-row:active,
body.qz-home-v2 #menuContent .qz2-menu-row:active {
  background: #FFFCF9 !important;
}

/* Menu item image */
body.qz-home-v2 #menuContent .menu-row-img,
body.qz-home-v2 #menuContent .qz2-menu-row-img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 12px !important;
  overflow: hidden;
  flex-shrink: 0;
  background: #FFE4D2;
  position: relative;
}
body.qz-home-v2 #menuContent .menu-row-img img,
body.qz-home-v2 #menuContent .qz2-menu-row-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Menu item info */
body.qz-home-v2 #menuContent .menu-row-info,
body.qz-home-v2 #menuContent .qz2-menu-row-info {
  flex: 1;
  min-width: 0;
}
body.qz-home-v2 #menuContent .menu-row-name,
body.qz-home-v2 #menuContent .qz2-menu-row-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 0 4px !important;
  font-family: var(--qz-ff, sans-serif) !important;
  letter-spacing: -0.005em;
}
body.qz-home-v2 #menuContent .menu-row-price,
body.qz-home-v2 #menuContent .qz2-menu-row-price {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  font-variant-numeric: tabular-nums;
  margin: 0 0 6px !important;
}
body.qz-home-v2 #menuContent .menu-row-desc,
body.qz-home-v2 #menuContent .qz2-menu-row-desc {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Veg/non-veg marker square */
body.qz-home-v2 #menuContent .veg-mark,
body.qz-home-v2 #menuContent .qz2-veg-mark {
  width: 14px !important;
  height: 14px !important;
  border: 1.5px solid #0F8A4F !important;
  border-radius: 3px !important;
  display: inline-grid !important;
  place-items: center !important;
  margin-right: 6px !important;
  vertical-align: middle;
}

/* ADD button — orange outlined matching mockup */
body.qz-home-v2 #menuContent .menu-row-add,
body.qz-home-v2 #menuContent .qz2-menu-item-add-btn {
  background: #fff !important;
  border: 1.5px solid #F26100 !important;
  border-radius: 10px !important;
  padding: 7px 18px !important;
  font-family: var(--qz-ff, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  cursor: pointer !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 8px -2px rgba(242, 97, 0, .15) !important;
}
body.qz-home-v2 #menuContent .menu-row-add:hover,
body.qz-home-v2 #menuContent .qz2-menu-item-add-btn:hover {
  background: #FFF5EC !important;
}

/* Qty stepper — filled orange */
body.qz-home-v2 #menuContent .menu-row-qty,
body.qz-home-v2 #menuContent .qz2-menu-item-qty {
  display: inline-flex !important;
  align-items: center !important;
  background: #F26100 !important;
  border-radius: 10px !important;
  overflow: hidden;
}
body.qz-home-v2 #menuContent .menu-row-qty button,
body.qz-home-v2 #menuContent .qz2-menu-item-qty button {
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
body.qz-home-v2 #menuContent .menu-row-qty span,
body.qz-home-v2 #menuContent .qz2-menu-item-qty span {
  min-width: 24px !important;
  text-align: center !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Wrap ADD/qty button to the right of the image */
body.qz-home-v2 #menuContent .menu-row-add-wrap {
  margin-top: 8px;
}

/* Sticky cart at bottom of cafe detail — refined */
body.qz-home-v2 #floatCart,
body.qz-home-v2 .qz-sticky-cart {
  background: #1A1A2E !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35) !important;
}



/* ============================================================================
 * Phase 4 add — Cafe-owner entry points (onboarding link + home card)
 * ========================================================================== */

/* Onboarding cafe owner link */
.qz-onboard-cafe-link {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  font-family: var(--qz-ff, 'Urbanist', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-align: center;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 180ms, color 180ms;
}
.qz-onboard-cafe-link strong {
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-weight: 900 !important;
}
.qz-onboard-cafe-link:active { transform: scale(.98); }

/* Home page "Own a cafe?" card */
.qz-list-cafe-card {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: linear-gradient(135deg, #FFF5EC 0%, #FFE4D2 100%);
  border: 1.5px solid rgba(242, 97, 0, .15);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: var(--qz-ff, 'Urbanist', sans-serif) !important;
  text-align: left;
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}
.qz-list-cafe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(242, 97, 0, .25);
  border-color: rgba(242, 97, 0, .35);
}
.qz-list-cafe-card:active {
  transform: translateY(0) scale(.98);
}
.qz-list-cafe-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #F26100;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(242, 97, 0, .35);
}
.qz-list-cafe-text {
  flex: 1;
  min-width: 0;
}
.qz-list-cafe-title {
  font-family: var(--qz-ff-display, 'Urbanist', sans-serif) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin-bottom: 2px;
  line-height: 1.2;
}
.qz-list-cafe-sub {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  line-height: 1.4;
}
.qz-list-cafe-chev {
  color: #F26100 !important;
  font-size: 18px;
  flex-shrink: 0;
}


/* ============================================================================
 * Phase 4 — Splash slide redesign (Option A + animations)
 * Overrides previous .qz-onboard-* styles for a polished entrance
 * ========================================================================== */

/* ── Entrance animation keyframes ─────────────────────────────────────────── */
@keyframes qzOnboardFadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes qzOnboardLogoIn {
  0%   { opacity: 0; transform: scale(.5) rotate(-15deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes qzOnboardLogoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-1.5deg); }
}

@keyframes qzOnboardChipIn {
  0%   { opacity: 0; transform: scale(.6) translate(var(--tx, 0), var(--ty, 0)); }
  100% { opacity: 1; transform: scale(1) translate(0, 0); }
}

@keyframes qzOnboardChipPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
  50%      { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .12); }
}

@keyframes qzOnboardOrbitSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes qzOnboardOrbitSpinReverse {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes qzOnboardCtaIn {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes qzOnboardCafeLinkIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: .85; transform: translateY(0); }
}

@keyframes qzOnboardCafeLinkPulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

@keyframes qzOnboardArrowSlide {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

@keyframes qzOnboardBoltPulse {
  0%, 100% { filter: drop-shadow(0 8px 20px rgba(242, 97, 0, 0.25)); }
  50%      { filter: drop-shadow(0 14px 28px rgba(242, 97, 0, 0.45)); }
}


/* ── Main container ───────────────────────────────────────────────────────── */
.qz-onboard-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: linear-gradient(180deg, #FFF5EC 0%, #FFE4D2 100%);
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  overflow: hidden;
  font-family: var(--qz-ff, 'Urbanist', sans-serif);
}

/* Skip button */
.qz-onboard-skip {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0) + 20px);
  right: 20px;
  z-index: 5;
  background: transparent;
  border: none;
  color: #555560;
  -webkit-text-fill-color: #555560;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 200ms;
  animation: qzOnboardFadeUp 600ms ease-out 200ms both;
}
.qz-onboard-skip:hover { background: rgba(0, 0, 0, .04); }
.qz-onboard-skip:active { transform: scale(.95); }

/* Inner content wrapper — constrained width, vertically distributed */
.qz-onboard-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 80px 24px 32px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

/* Slide stage — content area */
.qz-onboard-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* ── Hero visual area ─────────────────────────────────────────────────────── */
.qz-onboard-visual {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 48px;
}

/* Orbiting rings (decorative) */
.qz-onboard-orbit,
.qz-onboard-orbit-2 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(242, 97, 0, .15);
  pointer-events: none;
}
.qz-onboard-orbit {
  animation:
    qzOnboardFadeUp 700ms ease-out 100ms both,
    qzOnboardOrbitSpin 40s linear infinite 700ms;
}
.qz-onboard-orbit-2 {
  inset: 14%;
  border-color: rgba(255, 167, 38, .2);
  animation:
    qzOnboardFadeUp 700ms ease-out 200ms both,
    qzOnboardOrbitSpinReverse 30s linear infinite 700ms;
}

/* The logo tile — uses your REAL QueZap logo via SVG */
.qz-onboard-icon-tile {
  position: relative;
  z-index: 3;
  width: 160px;
  height: 160px;
  border-radius: 36px;
  background: #FFFFFF;
  box-shadow:
    0 24px 48px -12px rgba(242, 97, 0, .25),
    0 8px 16px -4px rgba(0, 0, 0, .08);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation:
    qzOnboardLogoIn 900ms cubic-bezier(.34, 1.56, .64, 1) 200ms both,
    qzOnboardLogoFloat 4s ease-in-out infinite 1200ms,
    qzOnboardBoltPulse 3s ease-in-out infinite 1200ms;
}
.qz-onboard-icon-tile svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Floating chips */
.qz-onboard-chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  color: #1A1A2E;
  -webkit-text-fill-color: #1A1A2E;
  padding: 8px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .08),
    0 1px 3px rgba(0, 0, 0, .04);
}
.qz-onboard-chip-emoji {
  font-size: 14px;
  line-height: 1;
}

/* Top-right chip ("Hot & ready") */
.qz-onboard-chip-tl {
  top: 8%;
  right: 4%;
  --tx: 20px;
  --ty: -10px;
  color: #C84F00;
  -webkit-text-fill-color: #C84F00;
  animation:
    qzOnboardChipIn 600ms cubic-bezier(.34, 1.56, .64, 1) 700ms both,
    qzOnboardChipPulse 3.5s ease-in-out infinite 1300ms;
}

/* Bottom-left chip ("Saves 12 min") */
.qz-onboard-chip-br {
  bottom: 8%;
  left: 4%;
  --tx: -20px;
  --ty: 10px;
  color: #0F8A4F;
  -webkit-text-fill-color: #0F8A4F;
  animation:
    qzOnboardChipIn 600ms cubic-bezier(.34, 1.56, .64, 1) 900ms both,
    qzOnboardChipPulse 3.5s ease-in-out infinite 1500ms;
}
.qz-onboard-chip-br svg {
  flex-shrink: 0;
  color: #0F8A4F;
}


/* ── Heading + description ────────────────────────────────────────────────── */
.qz-onboard-title {
  font-family: var(--qz-ff-display, 'Urbanist', sans-serif);
  font-weight: 900;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: center;
  color: #1A1A2E;
  -webkit-text-fill-color: #1A1A2E;
  margin: 0 0 16px;
  padding: 0 8px;
  animation: qzOnboardFadeUp 700ms ease-out 600ms both;
}

.qz-onboard-desc {
  font-size: 14.5px;
  line-height: 1.55;
  text-align: center;
  color: #555560;
  -webkit-text-fill-color: #555560;
  margin: 0;
  padding: 0 16px;
  max-width: 360px;
  font-weight: 500;
  animation: qzOnboardFadeUp 700ms ease-out 800ms both;
}


/* ── CTA wrap (Continue + cafe link) ──────────────────────────────────────── */
.qz-onboard-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-bottom: 8px;
}

/* Continue button — big orange CTA */
.qz-onboard-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #F26100;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none;
  border-radius: 16px;
  padding: 18px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
  width: 100%;
  box-shadow:
    0 10px 24px -6px rgba(242, 97, 0, .5),
    0 4px 8px -2px rgba(242, 97, 0, .3);
  transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1),
              box-shadow 180ms,
              background 180ms;
  animation: qzOnboardCtaIn 700ms cubic-bezier(.34, 1.56, .64, 1) 1000ms both;
  overflow: hidden;
}
.qz-onboard-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
  animation: qzOnboardCtaShine 2.5s ease-in-out infinite 2000ms;
}
@keyframes qzOnboardCtaShine {
  0%   { left: -100%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}
.qz-onboard-cta-btn:hover {
  background: #D45400;
  box-shadow:
    0 14px 32px -6px rgba(242, 97, 0, .6),
    0 6px 12px -2px rgba(242, 97, 0, .35);
  transform: translateY(-2px);
}
.qz-onboard-cta-btn:active {
  transform: scale(.97) translateY(0);
}
.qz-onboard-cta-btn svg {
  flex-shrink: 0;
  animation: qzOnboardArrowSlide 1.5s ease-in-out infinite 1800ms;
}


/* List your cafe link — below CTA, animated */
.qz-onboard-cafe-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, .55);
  border: 1.5px solid rgba(242, 97, 0, .15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 14px;
  width: 100%;
  text-align: center;
  transition: background 220ms, border-color 220ms, transform 180ms, box-shadow 220ms;
  animation:
    qzOnboardCafeLinkIn 700ms ease-out 1300ms both,
    qzOnboardCafeLinkPulse 2.5s ease-in-out infinite 2500ms;
}
.qz-onboard-cafe-link strong {
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-weight: 900 !important;
  margin-left: 2px;
}
.qz-onboard-cafe-link-icon {
  display: inline-flex;
  color: #F26100 !important;
  margin-right: 2px;
}
.qz-onboard-cafe-link:hover {
  background: rgba(255, 255, 255, .85);
  border-color: rgba(242, 97, 0, .35);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(242, 97, 0, .2);
  animation-play-state: paused;
  opacity: 1;
}
.qz-onboard-cafe-link:active {
  transform: scale(.97);
}


/* ── Reduce motion respect ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .qz-onboard-icon-tile,
  .qz-onboard-orbit,
  .qz-onboard-orbit-2,
  .qz-onboard-chip,
  .qz-onboard-cta-btn,
  .qz-onboard-cta-btn::before,
  .qz-onboard-cta-btn svg,
  .qz-onboard-cafe-link {
    animation: none !important;
  }
  .qz-onboard-skip,
  .qz-onboard-title,
  .qz-onboard-desc {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}




/* ============================================================================
 * Phase 4 fix9 — splash chips were stretching to full width.
 * Hard override: small floating pill chips at corners + smaller logo.
 * ========================================================================== */

.qz-onboard-visual {
  position: relative !important;
  width: 240px !important;
  max-width: 240px !important;
  height: 240px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto 40px !important;
  display: grid !important;
  place-items: center !important;
}

.qz-onboard-icon-tile {
  position: relative !important;
  z-index: 3 !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 28px !important;
  background: #FFFFFF !important;
  box-shadow:
    0 16px 36px -10px rgba(242, 97, 0, .3),
    0 6px 12px -3px rgba(0, 0, 0, .06) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 8px !important;
}
.qz-onboard-icon-tile svg {
  width: 100% !important;
  height: 100% !important;
}

.qz-onboard-orbit {
  position: absolute !important;
  width: 220px !important;
  height: 220px !important;
  inset: auto !important;
  top: 10px !important;
  left: 10px !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(242, 97, 0, .15) !important;
  pointer-events: none !important;
}
.qz-onboard-orbit-2 {
  position: absolute !important;
  width: 170px !important;
  height: 170px !important;
  inset: auto !important;
  top: 35px !important;
  left: 35px !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(255, 167, 38, .2) !important;
  pointer-events: none !important;
}

/* Floating chip — small inline pill, NEVER full width */
.qz-onboard-chip {
  position: absolute !important;
  z-index: 4 !important;
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #fff !important;
  padding: 7px 12px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .1),
    0 1px 3px rgba(0, 0, 0, .04) !important;
  font-family: var(--qz-ff, 'Urbanist', sans-serif) !important;
  line-height: 1 !important;
}
.qz-onboard-chip > span {
  display: inline-block !important;
  line-height: 1.2 !important;
}
.qz-onboard-chip-emoji {
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Top-right chip — "Hot & ready" */
.qz-onboard-chip-tl {
  top: 12px !important;
  right: -4px !important;
  left: auto !important;
  bottom: auto !important;
  color: #C84F00 !important;
  -webkit-text-fill-color: #C84F00 !important;
}

/* Bottom-left chip — "Skip the queue" */
.qz-onboard-chip-br {
  bottom: 16px !important;
  left: -4px !important;
  top: auto !important;
  right: auto !important;
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
}
.qz-onboard-chip-br svg {
  flex-shrink: 0 !important;
  color: #0F8A4F !important;
  width: 12px !important;
  height: 12px !important;
}

/* Adjust title spacing now that visual is smaller */
.qz-onboard-title {
  margin-top: 0 !important;
}

/* Push content up a bit since logo is smaller */
.qz-onboard-inner {
  padding-top: 70px !important;
}

/* On smaller phones, push everything up further */
@media (max-height: 700px) {
  .qz-onboard-visual {
    width: 200px !important;
    height: 200px !important;
    margin-bottom: 28px !important;
  }
  .qz-onboard-icon-tile {
    width: 100px !important;
    height: 100px !important;
    border-radius: 24px !important;
  }
  .qz-onboard-orbit {
    width: 180px !important;
    height: 180px !important;
    top: 10px !important;
    left: 10px !important;
  }
  .qz-onboard-orbit-2 {
    width: 140px !important;
    height: 140px !important;
    top: 30px !important;
    left: 30px !important;
  }
  .qz-onboard-inner {
    padding-top: 50px !important;
  }
}


/* ============================================================================
 * PHASE 5 — Order Success + Order Tracking
 * ========================================================================== */

/* Kill v1 padding on these pages */
body.qz-home-v2 #page-order-success,
body.qz-home-v2 #page-track {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #FFF5EC !important;
}

/* ── ORDER SUCCESS ───────────────────────────────────────────────────────── */
.qz-success {
  min-height: 100vh;
  background: linear-gradient(180deg, #0F8A4F 0%, #0A7340 50%, #FFF5EC 50%, #FFF5EC 100%);
  padding: calc(env(safe-area-inset-top, 0) + 32px) 16px 32px;
  font-family: var(--qz-ff, 'Urbanist', sans-serif);
}

.qz-success-hero {
  position: relative;
  text-align: center;
  padding: 8px 16px 48px;
  color: #fff;
}

/* Confetti dots */
.qz-success-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.qz-success-confetti span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  animation: qzConfettiFall 1.2s ease-out forwards;
}
.qz-success-confetti span:nth-child(1) { left: 10%; background: #FFD54F; animation-delay: .1s; }
.qz-success-confetti span:nth-child(2) { left: 20%; background: #FF8533; animation-delay: .3s; }
.qz-success-confetti span:nth-child(3) { left: 35%; background: #fff; animation-delay: .2s; }
.qz-success-confetti span:nth-child(4) { left: 50%; background: #FFD54F; animation-delay: .4s; width: 6px; height: 6px; }
.qz-success-confetti span:nth-child(5) { left: 65%; background: #FF8533; animation-delay: .15s; }
.qz-success-confetti span:nth-child(6) { left: 80%; background: #fff; animation-delay: .25s; width: 10px; height: 10px; }
.qz-success-confetti span:nth-child(7) { left: 90%; background: #FFD54F; animation-delay: .35s; }
.qz-success-confetti span:nth-child(8) { left: 15%; background: #fff; animation-delay: .5s; top: 20%; }
.qz-success-confetti span:nth-child(9) { left: 75%; background: #FFD54F; animation-delay: .45s; top: 25%; }
.qz-success-confetti span:nth-child(10) { left: 45%; background: #FF8533; animation-delay: .55s; top: 30%; width: 5px; height: 5px; }

@keyframes qzConfettiFall {
  0%   { opacity: 0; transform: translateY(-20px) scale(0); }
  30%  { opacity: 1; transform: translateY(40px) scale(1); }
  100% { opacity: 0; transform: translateY(220px) scale(.6) rotate(180deg); }
}

/* Check mark with ring */
.qz-success-check-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}
.qz-success-check-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  animation: qzCheckRing 1.4s ease-out infinite;
}
@keyframes qzCheckRing {
  0%   { transform: scale(.8); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.qz-success-check {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: 3px solid rgba(255, 255, 255, .9);
  display: grid;
  place-items: center;
  animation: qzCheckIn 600ms cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes qzCheckIn {
  0%   { opacity: 0; transform: scale(.3) rotate(-30deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.qz-success-check svg {
  width: 40px;
  height: 40px;
  animation: qzCheckDraw 700ms ease-out 200ms both;
}
@keyframes qzCheckDraw {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

.qz-success-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  margin: 0 0 6px !important;
  animation: qzSuccessFadeUp 600ms ease-out 300ms both;
}
.qz-success-sub {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, .9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .9) !important;
  margin: 0 !important;
  animation: qzSuccessFadeUp 600ms ease-out 400ms both;
}
@keyframes qzSuccessFadeUp {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Order details card */
.qz-success-card {
  background: #fff;
  border-radius: 20px;
  padding: 18px 16px;
  margin: 0 0 20px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .12);
  animation: qzSuccessFadeUp 600ms ease-out 500ms both;
}

.qz-success-cafe {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #F0EFE8;
  margin-bottom: 14px;
}
.qz-success-cafe-emoji {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #FFF5EC;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.qz-success-cafe-info { flex: 1; min-width: 0; }
.qz-success-cafe-name {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  margin: 0 0 2px;
}
.qz-success-cafe-meta {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
}

.qz-success-items {
  margin-bottom: 14px;
}
.qz-success-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px !important;
}
.qz-success-item-qty {
  flex-shrink: 0;
  font-weight: 900;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-variant-numeric: tabular-nums;
  min-width: 26px;
}
.qz-success-item-name {
  flex: 1;
  font-weight: 600;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
}
.qz-success-item-price {
  font-weight: 900;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  font-variant-numeric: tabular-nums;
}

.qz-success-row {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px dashed #F0EFE8;
}
.qz-success-row i {
  color: #F26100;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.qz-success-row-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qz-success-row-value {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
}

.qz-success-total-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1.5px solid #F0EFE8;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
}
.qz-success-total-row strong {
  font-size: 20px;
  font-family: var(--qz-ff-display, sans-serif);
}

.qz-success-points {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #FFF5E6, #FFE4D2);
  border-radius: 12px;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #C84F00 !important;
  -webkit-text-fill-color: #C84F00 !important;
}
.qz-success-points svg {
  flex-shrink: 0;
  color: #F26100;
}
.qz-success-points strong { font-weight: 900; }

/* Actions */
.qz-success-actions {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  animation: qzSuccessFadeUp 600ms ease-out 600ms both;
}
.qz-success-btn {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 15px;
  font-family: var(--qz-ff, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 150ms;
}
.qz-success-btn:active { transform: scale(.98); }
.qz-success-btn-primary {
  background: #F26100;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 10px 24px -6px rgba(242, 97, 0, .5);
}
.qz-success-btn-primary:hover { background: #D45400; }
.qz-success-btn-outline {
  background: #fff;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  border: 1.5px solid #E5E5DF !important;
}
.qz-success-btn-ghost {
  background: transparent;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
  border: 1.5px dashed #E5E5DF !important;
}

.qz-success-tip {
  text-align: center;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  margin: 0;
  animation: qzSuccessFadeUp 600ms ease-out 700ms both;
}


/* ── ORDER TRACKING ──────────────────────────────────────────────────────── */
.qz-track {
  min-height: 100vh;
  background: #FFF5EC;
  font-family: var(--qz-ff, 'Urbanist', sans-serif);
  padding-bottom: 24px;
}

.qz-track-head {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0) + 16px) 16px 16px;
  background: #FFF5EC;
  position: sticky;
  top: 0;
  z-index: 30;
}
.qz-track-head-titles { flex: 1; min-width: 0; }
.qz-track-head-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  margin: 0 0 1px !important;
}
.qz-track-head-sub {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  margin: 0;
}
.qz-track-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0F8A4F;
  position: relative;
  flex-shrink: 0;
}
.qz-track-live-dot span {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #0F8A4F;
  opacity: .4;
  animation: qzLiveDotPulse 1.5s ease-in-out infinite;
}
@keyframes qzLiveDotPulse {
  0%, 100% { transform: scale(1); opacity: .4; }
  50%      { transform: scale(1.8); opacity: 0; }
}

.qz-track-body {
  padding: 0 16px;
}

.qz-track-loading {
  padding: 80px 24px;
  text-align: center;
}
.qz-track-loading p {
  margin: 12px 0 0;
  font-size: 13px;
  color: #555560;
  font-weight: 600;
}
.qz-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #FFE4D2;
  border-top-color: #F26100;
  border-radius: 50%;
  animation: qzSpinnerRot .8s linear infinite;
  margin: 0 auto;
}
@keyframes qzSpinnerRot { to { transform: rotate(360deg); } }

/* Hero status block */
.qz-track-hero {
  background: linear-gradient(135deg, #F26100 0%, #D45400 100%);
  border-radius: 22px;
  padding: 24px 20px;
  margin-bottom: 16px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px -8px rgba(242, 97, 0, .4);
}
.qz-track-hero::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(255, 213, 79, .15) 0%, transparent 50%);
  pointer-events: none;
}
.qz-track-hero.qz-track-status-ready {
  background: linear-gradient(135deg, #0F8A4F 0%, #0A6E40 100%);
  box-shadow: 0 12px 28px -8px rgba(15, 138, 79, .4);
}
.qz-track-hero.qz-track-status-completed {
  background: linear-gradient(135deg, #4B5563 0%, #1F2937 100%);
  box-shadow: 0 12px 28px -8px rgba(31, 41, 55, .35);
}
.qz-track-hero.qz-track-status-cancelled {
  background: linear-gradient(135deg, #B91C1C 0%, #7F1D1D 100%);
  box-shadow: 0 12px 28px -8px rgba(185, 28, 28, .35);
}

.qz-track-hero-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  animation: qzHeroEmojiPulse 2.4s ease-in-out infinite;
}
@keyframes qzHeroEmojiPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.qz-track-hero-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.02em !important;
  position: relative;
  z-index: 1;
}
.qz-track-hero-sub {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, .9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .9) !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}
.qz-track-hero-eta {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .25);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 900;
  margin-top: 10px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(8px);
}
.qz-track-hero-eta i { font-size: 13px; }
.qz-track-hero-order {
  font-size: 11.5px;
  font-weight: 700;
  opacity: .8;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

/* Progress bar + steps */
.qz-track-progress {
  background: #fff;
  border-radius: 16px;
  padding: 16px 14px;
  margin-bottom: 16px;
}
.qz-track-progress-bar {
  width: 100%;
  height: 6px;
  background: #F0EFE8;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 14px;
}
.qz-track-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD54F, #F26100);
  border-radius: 100px;
  transition: width .6s cubic-bezier(.34, 1.2, .64, 1);
}
.qz-track-progress-steps {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
}
.qz-track-step {
  flex: 1;
  text-align: center;
  position: relative;
  min-width: 0;
}
.qz-track-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F0EFE8;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  font-size: 12px;
  font-weight: 900;
  display: inline-grid;
  place-items: center;
  margin: 0 auto 6px;
  transition: background .3s, color .3s, transform .3s;
}
.qz-track-step-lbl {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}
.qz-track-step-done .qz-track-step-dot {
  background: #0F8A4F;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.qz-track-step-done .qz-track-step-lbl {
  color: #0F8A4F !important;
  -webkit-text-fill-color: #0F8A4F !important;
}
.qz-track-step-active .qz-track-step-dot {
  background: #F26100;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: scale(1.15);
  box-shadow: 0 6px 16px -4px rgba(242, 97, 0, .5);
  animation: qzTrackActivePulse 1.6s ease-in-out infinite;
}
@keyframes qzTrackActivePulse {
  0%, 100% { box-shadow: 0 6px 16px -4px rgba(242, 97, 0, .5); }
  50%      { box-shadow: 0 8px 24px -2px rgba(242, 97, 0, .8); }
}
.qz-track-step-active .qz-track-step-lbl {
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
}

/* Action row */
.qz-track-actions {
  display: flex !important;
  gap: 10px;
  margin-bottom: 16px;
}
.qz-track-action {
  flex: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  background: #fff;
  border: 1.5px solid #F0EFE8 !important;
  border-radius: 14px;
  font-family: var(--qz-ff, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms;
}
.qz-track-action i { font-size: 16px; }
.qz-track-action-call { color: #0F8A4F !important; -webkit-text-fill-color: #0F8A4F !important; }
.qz-track-action-call i { color: #0F8A4F; }
.qz-track-action-wa { color: #25D366 !important; -webkit-text-fill-color: #25D366 !important; }
.qz-track-action-wa i { color: #25D366; }
.qz-track-action:active { transform: scale(.97); }
.qz-track-action-outline {
  background: #fff;
}
.qz-track-action-primary {
  background: #F26100 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #F26100 !important;
  box-shadow: 0 8px 20px -6px rgba(242, 97, 0, .4);
}
.qz-track-action-primary i { color: #fff; }

/* Info cards */
.qz-track-info {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.qz-track-info-card {
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
}
.qz-track-info-lbl {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.qz-track-info-val {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qz-track-addr {
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
}
.qz-track-addr i {
  color: #F26100 !important;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Items breakdown */
.qz-track-items {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.qz-track-items-head {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #F0EFE8;
}
.qz-track-items-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin: 0 !important;
}
.qz-track-items-count {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  background: #FFE4D2;
  padding: 3px 8px;
  border-radius: 6px;
}
.qz-track-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px !important;
}
.qz-track-item-qty {
  flex-shrink: 0;
  font-weight: 900;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  font-variant-numeric: tabular-nums;
  min-width: 26px;
}
.qz-track-item-name {
  flex: 1;
  font-weight: 600;
  color: #555560 !important;
  -webkit-text-fill-color: #555560 !important;
}
.qz-track-item-price {
  font-weight: 900;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  font-variant-numeric: tabular-nums;
}
.qz-track-total {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1.5px solid #F0EFE8;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
}
.qz-track-total strong {
  font-size: 18px;
  font-family: var(--qz-ff-display, sans-serif);
}

/* Cancel button */
.qz-track-cancel-btn {
  width: 100%;
  background: #fff !important;
  border: 1.5px solid #FECACA !important;
  border-radius: 14px;
  padding: 14px;
  font-family: var(--qz-ff, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #B91C1C !important;
  -webkit-text-fill-color: #B91C1C !important;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 180ms;
}
.qz-track-cancel-btn:hover { background: #FEE2E2 !important; }

.qz-track-completed-actions {
  display: flex !important;
  gap: 10px;
  margin-bottom: 16px;
}

.qz-track-error {
  text-align: center;
  padding: 80px 24px;
}
.qz-track-error-emoji {
  font-size: 56px;
  margin-bottom: 14px;
}
.qz-track-error-title {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  margin: 0 0 6px;
}
.qz-track-error-sub {
  font-size: 13px !important;
  color: #555560 !important;
  margin: 0;
}



/* ============================================================================
 * Phase 5 fix — Cart proceed button loading state
 * Prevents users from tapping multiple times during order placement
 * ========================================================================== */

.qz-cart-spinner-mini {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: qzSpinMini .65s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes qzSpinMini {
  to { transform: rotate(360deg); }
}

/* Disabled button visual */
.qz-cart-proceed:disabled {
  pointer-events: none;
  opacity: 0.7;
  cursor: not-allowed !important;
  transform: none !important;
}
.qz-cart-proceed:disabled:active {
  transform: none !important;
}



/* ============================================================================
 * Phase 5 fix — Simplified location sheet (single clean options list)
 * ========================================================================== */

/* Current location summary card at top */
.qz-loc-current {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #FFF5EC, #FFFCF8);
  border: 1px solid rgba(242, 97, 0, .15);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 16px;
}
.qz-loc-current-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 20px;
}
.qz-loc-current-info { flex: 1; min-width: 0; }
.qz-loc-current-tag {
  font-size: 10.5px !important;
  font-weight: 900 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.qz-loc-current-name {
  font-family: var(--qz-ff-display, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Options list */
.qz-loc-options {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.qz-loc-opt {
  display: flex !important;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1.5px solid #F0EFE8;
  border-radius: 14px;
  padding: 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--qz-ff, sans-serif);
  transition: transform 150ms, border-color 180ms, background 180ms, box-shadow 180ms;
}
.qz-loc-opt:hover {
  border-color: rgba(242, 97, 0, .35);
  background: #FFFCF8;
  box-shadow: 0 6px 16px -8px rgba(242, 97, 0, .15);
}
.qz-loc-opt:active {
  transform: scale(.98);
}

/* Primary option (Use my location) has a slight emphasis */
.qz-loc-opt-primary {
  background: linear-gradient(135deg, #FFF5EC, #fff);
  border-color: rgba(242, 97, 0, .35) !important;
}
.qz-loc-opt-primary .qz-loc-opt-ic {
  background: #F26100;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 4px 12px -2px rgba(242, 97, 0, .4);
}

.qz-loc-opt-hint {
  background: transparent !important;
  border-style: dashed !important;
}

.qz-loc-opt-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #FFE4D2;
  color: #F26100 !important;
  -webkit-text-fill-color: #F26100 !important;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 18px;
}

.qz-loc-opt-text {
  flex: 1;
  min-width: 0;
}
.qz-loc-opt-title {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  color: #1A1A2E !important;
  -webkit-text-fill-color: #1A1A2E !important;
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.qz-loc-opt-sub {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #8B8B95 !important;
  -webkit-text-fill-color: #8B8B95 !important;
  line-height: 1.35;
}

.qz-loc-opt-chev {
  color: #8B8B95;
  font-size: 18px;
  flex-shrink: 0;
}

/* Toggle switch for campus mode option */
.qz-loc-opt-toggle {
  width: 40px;
  height: 24px;
  background: #E5E5DF;
  border-radius: 100px;
  position: relative;
  flex-shrink: 0;
  transition: background 250ms;
}
.qz-loc-opt-toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 250ms cubic-bezier(.34, 1.5, .64, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.qz-loc-opt-toggle.qz-on {
  background: #F26100;
}
.qz-loc-opt-toggle.qz-on span {
  transform: translateX(16px);
}