/*
 * Rice & Spice 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.
 */

#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; }
}