/* =============================================================================
   Ordering Redesign — Foundation (Batch 1)
   -----------------------------------------------------------------------------
   Scope:   customer ORDERING flow only (menu → cart → checkout → payment →
            confirmation → order history). Everything is scoped under the
            `.gz-order` root class so the home/legal/contact pages (out of this
            redesign's scope) keep their current look untouched.
   Source:  design tokens from the approved Claude Design handoff
            (Bella Napoli redesign — see _INTEGRATION_WIRING_MAP.md / README).
   Rules honoured: mobile-first, light-only (no customer dark mode), RTL via
            logical properties + Cairo forced for Arabic, Latin digits, 44px
            touch targets, self-hosted fonts (no CDN — see
            ordering_redesign_fonts.css).
   Load order: after tokens.css/buttons.css/inputs.css; this file re-scopes the
            ordering surfaces without overriding the shared vocabulary globally.
   ========================================================================== */

/* ---- 1. Design tokens (scoped) ----------------------------------------- */
.gz-order {
  /* brand — Paprika */
  --gzo-primary: #CB492E;
  --gzo-primary-dark: #B0271B;
  --gzo-primary-shadow: rgba(203, 73, 46, .6);
  /* ink / text */
  --gzo-ink: #221F1B;
  --gzo-text: #4A4239;
  --gzo-text-2: #6A6056;
  --gzo-muted: #9C9388;
  --gzo-muted-2: #8E8475;
  /* surfaces */
  --gzo-paper: #F7F3EC;
  --gzo-paper-alt: #EFE8DC;
  --gzo-frame: #E5DDD0;
  --gzo-titlebar: #F1ECE3;
  --gzo-card: #FFFFFF;
  /* borders */
  --gzo-border: #EDE6DA;
  --gzo-border-2: #E5DDCE;
  --gzo-border-3: #EAE3D8;
  /* semantic */
  --gzo-success: #2E7D52;      --gzo-success-bg: #E7F2EB;
  --gzo-warning: #9A6400;      --gzo-warning-bg: #FBEEDA;   --gzo-warning-dot: #E0A52E;
  --gzo-error: #B0271B;        --gzo-error-bg: #FBEAE7;
  --gzo-info: #2A6FB0;         --gzo-info-bg: #EAF1FA;
  /* radii */
  --gzo-r-card: 16px;
  --gzo-r-btn: 13px;
  --gzo-r-input: 12px;
  --gzo-r-chip: 8px;
  --gzo-r-pill: 999px;
  --gzo-r-icon: 11px;
  /* shadows */
  --gzo-sh-card: 0 1px 2px rgba(34, 31, 27, .03);
  --gzo-sh-cta: 0 4px 12px -4px var(--gzo-primary-shadow);
  --gzo-sh-cta-lg: 0 6px 16px -6px var(--gzo-primary-shadow);
  --gzo-sh-raise: 0 14px 34px -16px rgba(34, 31, 27, .3);
  --gzo-sh-sheet: 0 -8px 22px -12px rgba(34, 31, 27, .22);
  /* fonts */
  --gzo-font-display: 'Schibsted Grotesk', 'Cairo', system-ui, sans-serif;
  --gzo-font-body: 'Hanken Grotesk', 'Cairo', system-ui, sans-serif;
  /* Cairo before the system monos: Space Mono's subsets are Latin-only, so
     Arabic inside mono contexts (e.g. the KEIN-BILD chip) must fall to Cairo,
     never to the system Arabic face. Digits/Latin still render Space Mono. */
  --gzo-font-mono: 'Space Mono', 'Cairo', ui-monospace, monospace;
  /* motion */
  --gzo-ease-rise: .28s ease;
  --gzo-ease-thumb: .34s cubic-bezier(.45, 0, .1, 1);
  /* touch */
  --gzo-tap: 44px;
}

/* Arabic / RTL — force Cairo everywhere, keep numbers Latin (handled by content). */
.gz-order[dir="rtl"],
[dir="rtl"] .gz-order {
  --gzo-font-display: 'Cairo', 'Schibsted Grotesk', system-ui, sans-serif;
  --gzo-font-body: 'Cairo', 'Hanken Grotesk', system-ui, sans-serif;
}

/* ---- 2. Base shell + typography ---------------------------------------- */
.gz-order {
  background: var(--gzo-paper);
  color: var(--gzo-ink);
  font-family: var(--gzo-font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.gz-order *,
.gz-order *::before,
.gz-order *::after { box-sizing: border-box; }

/* Form controls do NOT inherit typography by default — an unstyled button/
   input falls back to the UA font, which on Arabic pages leaks the system
   Arabic face instead of Cairo (owner rule: EVERY Arabic glyph = Cairo, on
   every page and dialog). Family only — sizes/weights stay per component;
   components that declare their own family (all var()-based) still win. */
.gz-order button,
.gz-order input,
.gz-order select,
.gz-order textarea {
  font-family: inherit;
}

.gz-order h1, .gz-order h2, .gz-order h3, .gz-order .gzo-display {
  font-family: var(--gzo-font-display);
  letter-spacing: -.01em;
  color: var(--gzo-ink);
}
.gz-order .gzo-mono { font-family: var(--gzo-font-mono); }
.gz-order .gzo-muted { color: var(--gzo-muted); }

/* numbers/identifiers stay LTR even inside RTL */
.gz-order .gzo-ltr { direction: ltr; unicode-bidi: isolate; }

/* ---- 3. Buttons -------------------------------------------------------- */
.gzo-btn {
  font-family: var(--gzo-font-body);
  font-weight: 700;
  font-size: 15px;
  min-height: var(--gzo-tap);
  padding: 0 18px;
  border: none;
  border-radius: var(--gzo-r-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform var(--gzo-ease-thumb), background .18s ease;
}
.gzo-btn:active { transform: scale(.98); }
.gzo-btn--primary { background: var(--gzo-primary); color: #fff; box-shadow: var(--gzo-sh-cta); }
.gzo-btn--primary:hover { background: var(--gzo-primary-dark); }
.gzo-btn--primary-lg { min-height: 50px; box-shadow: var(--gzo-sh-cta-lg); font-size: 15px; }
.gzo-btn--ghost { background: var(--gzo-card); color: var(--gzo-text); border: 1.5px solid var(--gzo-border-2); }
.gzo-btn--block { width: 100%; }
.gzo-btn[disabled], .gzo-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }

.gzo-icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--gzo-r-icon);
  border: none;
  background: var(--gzo-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--gzo-sh-cta);
  transition: transform var(--gzo-ease-thumb);
}
.gzo-icon-btn:active { transform: scale(.92); }
.gzo-icon-btn--ghost { background: var(--gzo-card); color: var(--gzo-text-2); border: 1.5px solid var(--gzo-border-2); box-shadow: none; }
.gzo-icon-btn--danger { background: var(--gzo-card); color: var(--gzo-error); border: 1.5px solid #F2D9D3; box-shadow: none; }

/* stepper (− n +) */
.gzo-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--gzo-border-2); border-radius: 10px; overflow: hidden; }
.gzo-stepper button { width: 34px; height: 36px; border: none; background: var(--gzo-card); color: var(--gzo-ink); font-size: 18px; cursor: pointer; }
.gzo-stepper span { min-width: 26px; text-align: center; font-weight: 700; font-size: 14px; }

/* ---- 4. Cards / chips / badges / pills --------------------------------- */
.gzo-card {
  background: var(--gzo-card);
  border: 1px solid var(--gzo-border);
  border-radius: var(--gzo-r-card);
  padding: 13px;
  box-shadow: var(--gzo-sh-card);
}
.gzo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--gzo-r-pill);
  border: 1.5px solid var(--gzo-border-2);
  background: var(--gzo-card);
  font-weight: 600; font-size: 13px; color: var(--gzo-text);
  white-space: nowrap; cursor: pointer;
}
.gzo-chip--active { background: var(--gzo-primary); border-color: var(--gzo-primary); color: #fff; }
.gzo-badge {
  font-weight: 700; font-size: 9.5px; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
}
.gzo-badge--new { color: var(--gzo-success); background: var(--gzo-success-bg); }
.gzo-badge--updated { color: var(--gzo-warning); background: var(--gzo-warning-bg); }
.gzo-badge--disc { color: #fff; background: var(--gzo-primary); }
.gzo-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--gzo-r-pill);
  font-weight: 600; font-size: 11px;
}
.gzo-pill--wait { color: var(--gzo-warning); background: var(--gzo-warning-bg); }
.gzo-pill--ok { color: var(--gzo-success); background: var(--gzo-success-bg); }
.gzo-pill--info { color: var(--gzo-info); background: var(--gzo-info-bg); }
.gzo-pill--error { color: var(--gzo-error); background: var(--gzo-error-bg); }

/* ---- 5. Inputs --------------------------------------------------------- */
.gzo-input {
  width: 100%;
  min-height: var(--gzo-tap);
  padding: 0 14px;
  border: 1.5px solid var(--gzo-border-2);
  border-radius: var(--gzo-r-input);
  background: var(--gzo-card);
  font-family: var(--gzo-font-body);
  font-size: 15px;
  color: var(--gzo-ink);
}
.gzo-input:focus { outline: none; border-color: var(--gzo-primary); box-shadow: 0 0 0 3px rgba(203, 73, 46, .18); }
.gzo-input[aria-invalid="true"] { border-color: var(--gzo-error); }
.gzo-field-error { display: flex; align-items: center; gap: 5px; color: var(--gzo-error); font-size: 12px; margin-top: 5px; }
.gzo-field-error::before { content: "⚠"; }

/* ---- 6. App shell / header / bottom-nav / footer (shared chrome) -------- */
.gzo-app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--gzo-paper);
}
.gzo-header {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px;
  background: var(--gzo-titlebar);
  border-bottom: 1px solid var(--gzo-border);
}
/* Batch 9 (M13/D23): in-header back button — 38px rounded square (prototype).
   Chevron ships pointing LEFT and mirrors in RTL (B8 canon for back arrows). */
.gzo-header__back {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gzo-border-3);
  background: var(--gzo-card);
  border-radius: 11px;
  color: var(--gzo-ink);
  cursor: pointer;
}
.gzo-header__back[hidden] { display: none; }
.gzo-header__back:active { transform: scale(.95); }
[dir="rtl"] .gzo-header__back svg { transform: scaleX(-1); }
.gzo-header__avatar {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  object-fit: cover; background: var(--gzo-paper-alt);
}
/* Long names truncate to ONE line with an ellipsis (prototype) — never wrap. */
.gzo-header__name {
  font-family: var(--gzo-font-display); font-weight: 700; font-size: 16px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gzo-header__status { font-size: 11.5px; color: var(--gzo-text-2); margin-top: 1px; }
.gzo-header__status--open { color: var(--gzo-success); display: flex; align-items: center; gap: 6px; }
.gzo-header__status--open::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gzo-success); flex: none;
}
.gzo-header__status[hidden] { display: none; } /* display:flex must not defeat [hidden] */
.gzo-header__spacer { flex: 1; }

.gzo-content { flex: 1; min-width: 0; }

.gzo-bottomnav {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: stretch;
  background: var(--gzo-card);
  border-top: 1px solid var(--gzo-border);
  box-shadow: var(--gzo-sh-sheet);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.gzo-bottomnav__item {
  flex: 1; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; background: none; cursor: pointer;
  color: var(--gzo-text-2); font-size: 10.5px; font-weight: 600;
  position: relative;
  text-decoration: none; /* Start/Warenkorb/Bestellungen are <a> — no underline */
}
.gzo-bottomnav__item--active { color: var(--gzo-primary); }
.gzo-bottomnav__badge {
  position: absolute; top: 7px; inset-inline-start: 54%;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--gzo-r-pill);
  background: var(--gzo-primary); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.gzo-bottomnav__badge[hidden] { display: none; }

/* ---- 7. Toast (global — must show on mobile AND desktop) ---------------- */
.gzo-toasts {
  position: fixed; inset-inline: 0; bottom: 78px; z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; padding: 0 16px;
}
.gzo-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 9px;
  max-width: 420px; width: 100%;
  padding: 12px 14px;
  border-radius: var(--gzo-r-btn);
  background: var(--gzo-ink); color: var(--gzo-paper);
  box-shadow: var(--gzo-sh-raise);
  font-size: 13.5px; font-weight: 500;
  animation: gzo-rise var(--gzo-ease-rise);
}
.gzo-toast--error { background: var(--gzo-error); }
.gzo-toast--success { background: var(--gzo-success); }
.gzo-toast--warning { background: var(--gzo-warning); }

/* ---- 8. Motion --------------------------------------------------------- */
@keyframes gzo-rise { from { transform: translateY(8px); } to { transform: translateY(0); } }
@keyframes gzo-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes gzo-spin { to { transform: rotate(360deg); } }
.gzo-skeleton {
  background: linear-gradient(90deg, var(--gzo-paper-alt) 25%, var(--gzo-titlebar) 37%, var(--gzo-paper-alt) 63%);
  background-size: 800px 100%;
  animation: gzo-shimmer 1.3s linear infinite;
  border-radius: var(--gzo-r-card);
}
.gzo-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--gzo-border-2); border-top-color: var(--gzo-primary);
  animation: gzo-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gz-order *, .gzo-toast, .gzo-skeleton, .gzo-spinner { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- 9. A11y ----------------------------------------------------------- */
.gz-order :where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--gzo-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.gz-order .gzo-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- 10. Skip link ----------------------------------------------------- */
.gzo-skip {
  position: absolute; inset-block-start: -9999px; inset-inline-start: 8px;
  z-index: 200; background: var(--gzo-ink); color: var(--gzo-paper);
  padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 13px;
  text-decoration: none;
}
.gzo-skip:focus { inset-block-start: 8px; }

/* ---- 11. Language menu (scoped restyle of the shared .rt-lang-* hooks) --- */
/* Batch 9 (C9): the toggle is a compact badge — globe + short code (DE/ع/KU/
   TR/EN). The shared flag/name hooks stay in the DOM (restaurant_i18n.js
   updates them) but are hidden; redesign_desktop.js fills the code span. */
.gz-order .gzo-lang { position: relative; flex: none; }
.gz-order .gzo-lang__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; min-height: 38px; padding: 0 12px;
  border: 1px solid var(--gzo-border-3); border-radius: 11px;
  background: var(--gzo-card); color: var(--gzo-ink);
  font-family: var(--gzo-font-body); font-weight: 600; font-size: 13px; cursor: pointer;
}
.gz-order .gzo-lang__globe { flex: none; }
.gz-order .gzo-lang__code { font-weight: 700; font-size: 12.5px; letter-spacing: .01em; }
.gz-order .gzo-lang__toggle img[data-rt-lang-flag],
.gz-order .gzo-lang__toggle .gzo-lang__current,
.gz-order .gzo-lang__chevron { display: none; }
.gz-order .gzo-lang__toggle img { border-radius: 3px; }
.gz-order .gzo-lang__dropdown {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0;
  min-width: 172px; background: var(--gzo-card);
  border: 1px solid var(--gzo-border); border-radius: 14px;
  box-shadow: var(--gzo-sh-raise); padding: 6px; z-index: 120;
  display: none;
}
.gz-order .gzo-lang[data-open="true"] .gzo-lang__dropdown,
.gz-order .rt-lang-menu--open .gzo-lang__dropdown { display: block; }
.gz-order .gzo-lang__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; padding: 0 10px;
  border: none; background: none; border-radius: 10px; cursor: pointer;
  font-family: var(--gzo-font-body); font-weight: 600; font-size: 14px; color: var(--gzo-ink);
  text-align: start;
}
.gz-order .gzo-lang__item:hover { background: var(--gzo-paper-alt); }
.gz-order .gzo-lang__item[aria-current="true"] { color: var(--gzo-primary); }
.gz-order .gzo-lang__item img { border-radius: 3px; }

/* ---- 12. Content root placeholder (Batch 1 preview) -------------------- */
.gzo-approot { min-height: 60vh; }
.gzo-approot__placeholder { padding-top: 6px; }