/*
 * Restaurant Ordering Core order status — Phase 15, NTF-003.
 *
 * Customer-facing, so it uses the same warm brand token set as
 * storefront.css / checkout.css / booking.css rather than inventing a
 * fourth palette for what is, to a customer, just another page of the
 * same site.
 */


/* ══ THEME GUARD (alpha.49, production 2026-09-10) ═══════════════════════
   Hello Elementor's reset.css styles EVERY <button> on the site: pink
   (#c36) text and border, a pink fill on :hover AND :focus (= after a
   tap on a phone), `white-space: nowrap` and .5rem/1rem padding. On an
   iPhone the entry cards therefore could not wrap their text and ran off
   the screen, and every tapped button turned pink. Neutralised here for
   the guest surfaces at the theme's own specificity via :where(), placed
   BEFORE the component rules so those still win. */
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) button,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="button"],
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="submit"] {
	-webkit-appearance: none; appearance: none;
	background-color: transparent; border: 0; border-radius: 0; color: inherit;
	font: inherit; line-height: 1.3; padding: 0; margin: 0; width: auto; display: inline-block;
	white-space: normal; text-wrap: wrap; text-align: center; text-decoration: none;
	transition: none; -webkit-tap-highlight-color: transparent;
}
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) button:hover,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) button:focus,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="button"]:hover,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="button"]:focus,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="submit"]:hover,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="submit"]:focus {
	background-color: transparent; color: inherit; text-decoration: none;
}

#rso-order-status {
	--rso-bg: #f6f7f1;
	--rso-surface: #ffffff;
	--rso-surface-2: #f0ede4;
	--rso-ink: #241a10;
	--rso-ink-soft: #6b5d4d;
	--rso-line: #e8e1d2;
	--rso-accent: #46a500;
	--rso-accent-deep: #35800a;
	--rso-accent-tint: #eaf6df;
	--rso-success: #4c7a2e;
	--rso-success-tint: #eaf1e2;
	--rso-warn: #92680f;
	--rso-warn-tint: #fbf1d9;
	--rso-shadow: 0 1px 2px rgba(36, 26, 16, .06), 0 8px 24px -12px rgba(36, 26, 16, .18);
	--rso-radius-s: 10px;
	--rso-radius-l: 22px;
	--rso-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI Rounded", ui-rounded, "Segoe UI", Roboto, system-ui, sans-serif;
	--rso-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rso-focus: #1857c4;

	font-family: var(--rso-font-body);
	color: var(--rso-ink);
	background: var(--rso-bg);
	line-height: 1.45;
	max-width: 560px;
	margin: 0 auto;
	padding: 24px 18px 64px;
}

@media (prefers-color-scheme: dark) {
	#rso-order-status:not([data-theme="light"]) {
		--rso-bg: #18130d;
		--rso-surface: #221a11;
		--rso-surface-2: #2b2116;
		--rso-ink: #f3ecdf;
		--rso-ink-soft: #c7b9a4;
		--rso-line: #3a2d1d;
		--rso-accent: #ff8354;
		--rso-accent-deep: #ffa77e;
		--rso-accent-tint: #3a2318;
		--rso-success: #8fc65e;
		--rso-success-tint: #26311c;
		--rso-warn: #e8c368;
		--rso-warn-tint: #362a11;
		--rso-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
	}
}

#rso-order-status * { box-sizing: border-box; }
#rso-order-status h1, #rso-order-status h2 { font-family: var(--rso-font-display); margin: 0; }
#rso-order-status p, #rso-order-status dl { margin: 0; }
#rso-order-status ul, #rso-order-status ol { margin: 0; padding: 0; list-style: none; }
#rso-order-status .rso-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;
}
#rso-order-status :focus-visible { outline: 3px solid var(--rso-focus); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
	#rso-order-status *, #rso-order-status *::before, #rso-order-status *::after {
		animation-duration: .001ms !important; transition-duration: .001ms !important;
	}
}
#rso-order-status .rso-os-title { font-size: 24px; font-weight: 700; margin-bottom: 18px; }
#rso-order-status .rso-os-body { display: flex; flex-direction: column; gap: 16px; }
#rso-order-status .rso-os-card {
	background: var(--rso-surface); border-radius: var(--rso-radius-l); box-shadow: var(--rso-shadow);
	padding: 22px; display: flex; flex-direction: column; gap: 18px;
}
#rso-order-status .rso-os-headline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
#rso-order-status .rso-os-number { font-family: var(--rso-font-display); font-size: 18px; font-weight: 700; }
#rso-order-status .rso-os-badge { font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
#rso-order-status .rso-os-badge.is-paid { background: var(--rso-success-tint); color: var(--rso-success); }
#rso-order-status .rso-os-badge.is-unpaid { background: var(--rso-warn-tint); color: var(--rso-warn); }

/* ---------------------------------------------------------------
 * Progress track — colour is never the only signal; every step
 * carries its own visible text label.
 * --------------------------------------------------------------- */

#rso-order-status .rso-os-track { display: flex; gap: 4px; }
#rso-order-status .rso-os-step { flex: 1; display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center; }
#rso-order-status .rso-os-step .rso-os-dot {
	width: 100%; height: 5px; border-radius: 999px; background: var(--rso-line);
}
#rso-order-status .rso-os-step.is-done .rso-os-dot { background: var(--rso-success); }
#rso-order-status .rso-os-step.is-current .rso-os-dot { background: var(--rso-accent); }
#rso-order-status .rso-os-step-label { font-size: 11.5px; color: var(--rso-ink-soft); line-height: 1.25; }
#rso-order-status .rso-os-step.is-current .rso-os-step-label { color: var(--rso-accent-deep); font-weight: 700; }
#rso-order-status .rso-os-rows { display: flex; flex-direction: column; border-top: 1px solid var(--rso-line); }
#rso-order-status .rso-os-row {
	display: flex; justify-content: space-between; gap: 12px; padding: 11px 0;
	border-bottom: 1px solid var(--rso-line); font-size: 14.5px;
}
#rso-order-status .rso-os-row dt { color: var(--rso-ink-soft); }
#rso-order-status .rso-os-row dd { margin: 0; font-weight: 600; text-align: right; }
#rso-order-status .rso-os-subheading { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
#rso-order-status .rso-os-items { display: flex; flex-direction: column; gap: 9px; }
#rso-order-status .rso-os-items li { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
#rso-order-status .rso-os-item-name { font-weight: 600; }
#rso-order-status .rso-os-item-mods { font-size: 12.5px; color: var(--rso-ink-soft); }
#rso-order-status .rso-os-refresh {
	appearance: none; border: 1px solid var(--rso-line); background: var(--rso-surface-2);
	color: var(--rso-ink); border-radius: var(--rso-radius-s); padding: 12px 18px;
	font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; min-height: 48px;
}
#rso-order-status .rso-os-alert { border-radius: var(--rso-radius-s); padding: 12px 14px; font-size: 14px; }
#rso-order-status .rso-os-alert.is-error { background: var(--rso-accent-tint); color: var(--rso-accent-deep); }
#rso-order-status .rso-os-alert.is-info { background: var(--rso-surface-2); color: var(--rso-ink-soft); }

@media (max-width: 400px) {
	#rso-order-status { padding: 16px 12px 56px; }
#rso-order-status .rso-os-title { font-size: 20px; }
#rso-order-status .rso-os-step-label { font-size: 10.5px; }
}

/* ── GUEST-2 (ADR-070): feedback and receipt on the status page ─────── */
#rso-order-status .rso-feedback-chips { display: flex; gap: 8px; }
#rso-order-status .rso-feedback-chip { flex: 1 1 0; min-height: 52px; border: 1px solid #ddd; background: #fff; border-radius: 999px; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
#rso-order-status .rso-feedback-chip.is-selected { background: #241a10; border-color: #241a10; color: #fff; }
#rso-order-status .rso-feedback-chip-3.is-selected { background: #35800a; border-color: #35800a; }
#rso-order-status .rso-feedback-chip-1.is-selected { background: #a33a2a; border-color: #a33a2a; }
#rso-order-status .rso-feedback-row { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
#rso-order-status .rso-feedback-text, #rso-order-status .rso-receipt-email { flex: 1 1 auto; min-height: 44px; border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; font: inherit; }
#rso-order-status .rso-receipt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#rso-order-status .rso-receipt-actions .rso-os-refresh { flex: 1 1 0; text-align: center; text-decoration: none; }
#rso-order-status .rso-os-hint { color: #6b5d4d; font-size: .9rem; margin: 8px 0 0; }
#rso-order-status .rso-os-badge.is-openbill { background: var(--rso-accent-tint, #eaf6df); color: var(--rso-accent-deep, #35800a); }

/* CHECKOUT-2: the pickup code — big, unmistakable, no name anywhere. */
#rso-order-status .rso-os-pickup { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label qr" "code qr" "hint qr"; align-items: center; column-gap: 16px; margin: 14px 0 6px; padding: 14px 16px; border-radius: 16px; background: var(--rso-accent-tint, #eaf6df); }
#rso-order-status .rso-os-pickup-label { grid-area: label; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rso-accent-deep, #35800a); }
#rso-order-status .rso-os-pickup-code { grid-area: code; font-size: 2.6rem; font-weight: 900; letter-spacing: .18em; line-height: 1.1; color: var(--rso-ink, #241a10); font-variant-numeric: tabular-nums; }
#rso-order-status .rso-os-pickup-hint { grid-area: hint; margin: 4px 0 0; font-size: .82rem; color: var(--rso-ink-soft, #6b5d4d); }
/* The QR and its caption are one column in the `qr` cell. Until 1.2.1
   the caption reused .rso-os-pickup-hint, which is `grid-area: hint`,
   so it shared a cell with the counter sentence and the two printed
   over each other — 3px of leading in English, unreadable in German,
   where that sentence wraps to two lines. */
#rso-order-status .rso-os-qr-col { grid-area: qr; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#rso-order-status .rso-os-qr { background: #fff; padding: 6px; border-radius: 12px; line-height: 0; }
#rso-order-status .rso-os-qr-hint { margin: 0; max-width: 150px; text-align: center; font-size: .72rem; line-height: 1.3; color: var(--rso-ink-soft, #6b5d4d); }
#rso-order-status .rso-os-qr canvas { display: block; width: 132px; height: 132px; }
@media (max-width: 420px) { #rso-order-status .rso-os-qr canvas { width: 96px; height: 96px; } }

/* STATUS-3: where to pick up — the restaurant, one tap to the route and the phone. */
#rso-order-status .rso-os-where { gap: 12px; }
#rso-order-status .rso-os-where-lines { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.4; }
#rso-order-status .rso-os-where-name { font-weight: 800; }
#rso-order-status .rso-os-where-phone { color: var(--rso-ink-soft, #6b5d4d); }
#rso-order-status .rso-os-where-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#rso-order-status .rso-os-where-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; flex: 1 1 140px; min-height: 52px; }
#rso-order-status .rso-os-where-btn-primary { background: var(--rso-accent, #46a500); border-color: var(--rso-accent, #46a500); color: #fff; }
#rso-order-status .rso-os-where-btn-primary:hover { background: var(--rso-accent-deep, #35800a); border-color: var(--rso-accent-deep, #35800a); color: #fff; }
#rso-order-status .rso-os-menu { margin: 4px 0 0; text-align: center; }
#rso-order-status .rso-os-menu-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 52px; padding: 12px 24px; }

/* --- KIOSK-6: the ready-beep card (one tap arms the sound) --- */
#rso-order-status .rso-os-sound { text-align: center; }
#rso-order-status .rso-os-sound-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 22px; border-radius: 999px; border: 2px solid var(--rso-accent, #46a500); background: var(--rso-accent, #46a500); color: #fff; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
#rso-order-status .rso-os-sound.is-armed .rso-os-sound-btn { background: var(--rso-accent-tint, #eaf6df); color: var(--rso-accent-deep, #35800a); }
#rso-order-status .rso-os-sound-hint { margin: 10px 0 0; font-size: .9rem; color: var(--rso-ink-soft, #6b5d4d); }
#rso-order-status .rso-os-ring { text-align: center; background: var(--rso-accent, #46a500); color: #fff; border-color: var(--rso-accent, #46a500); }
#rso-order-status .rso-os-ring-title { margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; color: #fff; }
#rso-order-status .rso-os-ring-stop { min-height: 56px; padding: 12px 24px; border-radius: 999px; border: 0; background: #fff; color: var(--rso-accent-deep, #35800a); font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; animation: rso-os-pulse 1.2s ease-in-out infinite; }
@keyframes rso-os-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .rso-os-ring-stop { animation: none; } }