/*
 * Components: buttons, forms, header/footer chrome, theme toggle, welcome
 * gate. Page-specific components (ticket cards, checkout, result) are added
 * by their respective phases but share these primitives.
 */

/* ---------------- Buttons ---------------- */
.sbp-btn {
	--btn-bg: var(--surface-raised);
	--btn-fg: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1;
	padding: 0.95rem 1.6rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.sbp-btn:active { transform: scale(0.97); }
.sbp-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sbp-btn:disabled:active { transform: none; }

.sbp-btn--primary {
	--btn-bg: var(--accent);
	--btn-fg: var(--accent-contrast);
	border-color: transparent;
	background-image: linear-gradient(180deg, var(--accent-soft), var(--accent));
	box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.sbp-btn--primary:hover { color: var(--accent-contrast); }

/* Gold sheen sweep on hover (desktop pointers only). */
@media (hover: hover) and (pointer: fine) {
	.sbp-btn--primary::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
		transform: translateX(-120%);
	}
	.sbp-btn--primary:hover::after { animation: sbp-sheen 0.7s var(--ease); }
}

.sbp-btn--block { width: 100%; }
.sbp-btn--lg { padding: 1.1rem 2rem; font-size: 1.05rem; }
.sbp-btn--ghost { background: transparent; }

/* ---------------- Forms ---------------- */
.sbp-field { margin-bottom: 1.1rem; }
.sbp-field > label,
.sbp-field .sbp-label { display: block; margin-bottom: 0.4rem; }

.sbp-input {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1.05rem;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.1rem;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sbp-input::placeholder { color: var(--text-muted); }
.sbp-input:focus {
	outline: 2px solid transparent; /* visible under forced-colors */
	outline-offset: 2px;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.sbp-input.is-error {
	border-color: var(--error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent);
}

.sbp-error-msg {
	margin-top: 0.5rem;
	color: var(--error);
	font-size: var(--fs-sm);
	font-weight: 500;
}

/* ---------------- Theme toggle ---------------- */
.sbp-toggle {
	position: fixed;
	top: calc(1rem + var(--safe-top));
	right: 1rem;
	z-index: 120;
	width: 46px; height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
	backdrop-filter: blur(8px);
	color: var(--text);
	cursor: pointer;
	box-shadow: var(--shadow-card);
	transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease);
}
.sbp-toggle:active { transform: scale(0.92); }
.sbp-toggle svg { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.sbp-toggle .sbp-toggle__moon { display: none; }
:root[data-theme="dark"] .sbp-toggle .sbp-toggle__sun { display: none; }
:root[data-theme="dark"] .sbp-toggle .sbp-toggle__moon { display: inline-flex; }
:root[data-sbp-lock] .sbp-toggle { display: none; }

/* ---------------- Header (minimal) ---------------- */
.sbp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: calc(1.1rem + var(--safe-top)) clamp(1rem, 4vw, 2rem) 0;
}
.sbp-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--text);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.15rem;
}
.sbp-logo__mark {
	display: inline-flex;
	width: 38px; height: 38px;
	align-items: center; justify-content: center;
	border-radius: 12px;
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	color: var(--accent);
}
.sbp-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--text);
	padding: 0.5rem;
}
.sbp-cart-count {
	position: absolute;
	top: -4px; right: -6px;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center; justify-content: center;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--accent-contrast);
	background: var(--accent);
	border-radius: 999px;
}

/* ---------------- Footer ---------------- */
.sbp-footer {
	max-width: var(--wrap);
	margin: 2rem auto 0;
	padding: 1.5rem clamp(1rem, 4vw, 2rem) calc(1.5rem + var(--safe-bottom));
	border-top: 1px solid var(--border-soft);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	text-align: center;
}

/* ---------------- Welcome gate (Page 1) ---------------- */
.sbp-gate {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(2rem, 8vh, 5rem) 1.25rem;
	padding-top: calc(clamp(2rem, 8vh, 5rem) + var(--safe-top));
}
.sbp-gate__inner {
	width: 100%;
	max-width: var(--wrap-narrow);
	margin-inline: auto;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sbp-gate__mark {
	width: 64px; height: 64px;
	margin: 0 auto 1.5rem;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 20px;
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	color: var(--accent);
}
.sbp-gate__mark svg { width: 30px; height: 30px; }
.sbp-gate__heading {
	font-size: var(--fs-display);
	margin-bottom: 0.5rem;
}
.sbp-gate__subtext {
	color: var(--text-muted);
	max-width: 34ch;
	margin: 0 auto 2rem;
}
.sbp-gate__form { display: flex; flex-direction: column; gap: 1rem; }
.sbp-gate__form .sbp-input {
	text-align: center;
	font-size: 1.35rem;
	letter-spacing: 0.15em;
}
.sbp-gate__copyright {
	margin-top: 2.5rem;
	color: var(--text-muted);
	font-size: var(--fs-cap);
}
.sbp-gate__logo img { max-height: 56px; width: auto; margin: 0 auto 1.5rem; }
.sbp-gate__continue-busy { display: inline-flex; align-items: center; gap: 0.5rem; }
/* The [hidden] attribute must win over the display rules above/on the label. */
.sbp-gate__continue-label[hidden],
.sbp-gate__continue-busy[hidden] { display: none; }
.sbp-spinner {
	width: 16px; height: 16px;
	border: 2px solid color-mix(in srgb, var(--accent-contrast) 45%, transparent);
	border-top-color: var(--accent-contrast);
	border-radius: 50%;
	animation: sbp-spin 0.7s linear infinite;
}
@keyframes sbp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sbp-spinner { animation-duration: 1.4s; } }

/* ---------------- Shop bar (Page 2 header) ---------------- */
.sbp-shopbar {
	border-bottom: 1px solid var(--border-soft);
	padding: calc(0.9rem + var(--safe-top)) clamp(1rem, 4vw, 2rem) 0.9rem;
}
.sbp-shopbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.sbp-shopbar .sbp-logo img { max-height: 40px; width: auto; }
/* Shop page also renders a network badge as a 3rd child — group it with the
   actions on the right instead of letting space-between spread all 3 out. */
.sbp-shopbar__inner:has(.sbp-network-badge) { justify-content: flex-start; }
.sbp-shopbar__inner:has(.sbp-network-badge) .sbp-logo { margin-right: auto; }

.sbp-logo__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.sbp-logo__eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-cap);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.sbp-network-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface-raised);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	white-space: nowrap;
}
.sbp-network-badge svg { color: var(--accent); width: 16px; height: 16px; }

/* ---------------- Shop hero (Page 2 header) ----------------
   Always a dark navy band — independent of the site's own light/dark toggle,
   like a fixed brand banner — with the floating voucher card straddling the
   seam into the lighter body below. Colors are hardcoded to the dark palette
   (not var(--bg) etc.) so the band doesn't flip with the toggle. */
.sbp-shop__hero {
	--hero-bg: #020617;
	--hero-text: #F1F5F9;
	--hero-text-muted: #94A3B8;
	--hero-line: rgba(96, 165, 250, 0.35);
	--hero-accent: #60A5FA;

	position: relative;
	text-align: center;
	color: var(--hero-text);
	background: var(--hero-bg) url('../images/shop-hero-bg.png') no-repeat center center;
	background-size: cover;
	padding: clamp(3.5rem, 8vw, 5.5rem) clamp(1rem, 4vw, 2rem) clamp(7rem, 14vw, 9rem);
	margin-bottom: clamp(-8rem, -17vw, -11rem);
	overflow: hidden;
}
.sbp-shop__hero-eyebrow,
.sbp-shop__hero-subtext,
.sbp-trust-badges li { color: var(--hero-text-muted); }
.sbp-shop__hero-eyebrow { color: var(--hero-accent); }
.sbp-shop__hero-heading { color: var(--hero-text); }
.sbp-trust-badges svg { color: var(--hero-accent); }
.sbp-shop__hero > * { position: relative; z-index: 1; }
@media (max-width: 640px) {
	.sbp-shop__hero::before,
	.sbp-shop__hero::after,
	.sbp-shop__hero-inner-frame { opacity: 0.55; }
}
.sbp-shop__hero-eyebrow {
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}
.sbp-shop__hero-heading {
	font-size: var(--fs-display);
	margin: 0 0 0.75rem;
}
.sbp-shop__hero-subtext {
	max-width: 46ch;
	margin: 0 auto 1.75rem;
}
.sbp-trust-badges {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem clamp(1rem, 3vw, 2rem);
	margin: 0;
	padding: 0;
}
.sbp-trust-badges li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--fs-sm);
}

/* ---------------- Shop footer (Page 2 terms/support) ---------------- */
.sbp-footer__terms { max-width: 60ch; margin: 0 auto 0.5rem; }
.sbp-footer__support { margin: 0 0 1rem; }
.sbp-footer__support a { color: var(--accent); }

@media (max-width: 640px) {
	.sbp-trust-badges { flex-direction: column; gap: 0.6rem; }
	.sbp-network-badge { font-size: var(--fs-cap); padding: 0.3rem 0.7rem; }
}

/* The voucher grid is the first thing in this section and overlaps up into
   the hero's negative bottom margin (straddling the dark/light seam), so no
   extra top clearance is needed here beyond the stage's own padding. */

/* ---------------- Ticket grid ---------------- */
.sbp-ticket-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: start;
}
@media (min-width: 900px) {
	.sbp-ticket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
}

/* ---------------- Ticket card ---------------- */
.sbp-ticket {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.sbp-ticket:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
.sbp-ticket.is-popular {
	border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
	box-shadow: var(--shadow-lift), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Real hierarchy for the featured plan, not just a hairline border. */
@media (min-width: 900px) {
	.sbp-ticket.is-popular { transform: scale(1.04); }
	.sbp-ticket.is-popular:hover { transform: scale(1.04) translateY(-4px); }
}
.sbp-ticket.is-popular .sbp-ticket__price-whole { color: var(--accent); }

.sbp-ticket__ribbon {
	position: absolute;
	top: 1rem; left: 50%;
	transform: translateX(-50%);
	background: var(--accent);
	color: var(--accent-contrast);
	font-size: var(--fs-cap);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent);
	z-index: 2;
}

.sbp-ticket__body {
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem) 1.5rem;
	text-align: center;
}
.is-popular .sbp-ticket__body { padding-top: 3.25rem; }

.sbp-ticket__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--ticket-ink-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	margin: 0 0 0.75rem;
}
.sbp-ticket__eyebrow svg { color: var(--accent); }

.sbp-ticket__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--ticket-ink);
	margin: 0 0 1rem;
}

.sbp-ticket__price {
	color: var(--ticket-ink);
	margin-bottom: 1.25rem;
	line-height: 1;
}
.sbp-ticket__price-now { display: inline-flex; align-items: flex-start; gap: 0.15rem; }
.sbp-ticket__price-was {
	display: block;
	font-size: 1rem;
	color: var(--ticket-ink-muted);
	text-decoration: line-through;
	margin-bottom: 0.2rem;
}
.sbp-ticket__price-sym { font-size: 1.35rem; font-weight: 600; margin-top: 0.4rem; color: var(--accent); }
.sbp-ticket__price-whole { font-family: var(--font-display); font-size: 3.5rem; font-weight: 600; }
.sbp-ticket__price-cents { font-size: 1.2rem; font-weight: 600; margin-top: 0.5rem; color: var(--ticket-ink); }

.sbp-ticket__features {
	list-style: none;
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--ticket-line);
	text-align: left;
	display: grid;
	gap: 0.7rem;
}
.sbp-ticket__feature {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--fs-sm);
	color: var(--ticket-ink);
}
.sbp-ticket__feature svg { color: var(--accent); flex: none; }

/* Perforated stub separator */
/* Flat corporate divider (was a perforated ticket stub). */
.sbp-ticket__stub {
	position: relative;
	height: 1px;
	margin: 0 clamp(1.5rem, 3vw, 2rem);
	background: var(--border);
}
.sbp-ticket__stub-mark { display: none; }

.sbp-ticket__actions {
	padding: 1.25rem clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
	display: grid;
	gap: 0.65rem;
}
/* Card sits on parchment: ghost button needs ink-on-parchment styling. */
.sbp-ticket__cart {
	--btn-bg: transparent;
	--btn-fg: var(--ticket-ink);
	border-color: var(--ticket-line);
}
.sbp-ticket__cart:hover { color: var(--ticket-ink); background: color-mix(in srgb, var(--ticket-ink) 6%, transparent); }
.sbp-ticket__cart.is-added {
	--btn-fg: var(--success);
	border-color: color-mix(in srgb, var(--success) 45%, transparent);
	background: color-mix(in srgb, var(--success) 10%, transparent);
}

/* Inline qty stepper that replaces Add to Cart once a voucher is in the cart. */
.sbp-ticket__qty {
	width: 100%;
	justify-content: space-between;
	border-color: var(--border);
}
.sbp-ticket__qty[hidden] { display: none; }
.sbp-ticket__qty .sbp-qty__val { flex: 1; }
.sbp-ticket__remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 0; border-left: 1px solid var(--border);
	border-radius: 0;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease);
}
.sbp-ticket__remove:hover { color: var(--error); }
.sbp-ticket__actions.is-busy { opacity: 0.6; }

.sbp-empty {
	text-align: center;
	color: var(--text-muted);
	padding: 3rem 1rem;
}

/* ---------------- WooCommerce notices (info / success / error) ---------------- */
/* These render site-wide (cart, checkout, account) straight from WooCommerce
   core — without an override they keep WooCommerce's own white/red/green
   defaults, which look unstyled against the theme's dark mode. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	list-style: none;
	background: var(--surface-raised);
	color: var(--text);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 1rem 1.25rem;
	margin: 0 0 1.25rem;
	font-size: var(--fs-sm);
	box-shadow: var(--shadow-card);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; } /* drop WC's own icon glyph — the border color already communicates state */
.woocommerce-message { border-left-color: var(--success); }
.woocommerce-error { border-left-color: var(--error); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message a.button {
	order: 2;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease);
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover { border-color: var(--accent); color: var(--accent-text); }

/* ---------------- Checkout (Page 3) ---------------- */
.sbp-checkout__secure {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--text-muted);
	font-size: var(--fs-sm);
}
.sbp-checkout__head { text-align: center; margin-bottom: 1.75rem; }
.sbp-checkout__head h1 { font-size: var(--fs-h1); }
/* Left-aligned under the page heading (not centered) so it reads as one
   block with the h1 above it instead of floating independently. */
.sbp-checkout__sub { max-width: 52ch; margin: 0.35rem 0 0; }

/* Shared "secondary information" treatment: quieter than body text. */
.sbp-muted { color: var(--text-muted); font-size: var(--fs-sm); }

.sbp-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: clamp(1.1rem, 3vw, 1.5rem);
	margin-bottom: 1rem;
}

/* Summary strip */
.sbp-summary__items { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.sbp-summary__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0;
}
.sbp-summary__item.is-busy { opacity: 0.6; }
.sbp-summary__name { font-weight: 500; }
.sbp-summary__price { font-weight: 700; font-variant-numeric: tabular-nums; }

.sbp-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 999px;
	overflow: hidden;
}
.sbp-qty__btn {
	width: 44px; height: 44px;
	border: 0; background: transparent;
	color: var(--text); font-size: 1.1rem; line-height: 1;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease);
}
.sbp-qty__btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.sbp-qty__btn:active { transform: scale(0.9); }
.sbp-qty__val { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }

/* Contact fields (WooCommerce billing, reduced to email + mobile) */
.sbp-contact h3 { display: none; } /* redundant "Billing details" — we show "Contact details" */
.sbp-contact .woocommerce-billing-fields__field-wrapper { display: grid; gap: 0.25rem; }
.sbp-contact .form-row { margin: 0 0 1rem; display: block; }
.sbp-contact label { display: block; margin-bottom: 0.4rem; font-size: var(--fs-cap); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sbp-contact .form-row:last-child { margin-bottom: 0; }
/*
 * WooCommerce's own core stylesheet targets these fields with
 * `.woocommerce form .form-row .input-text` (3 classes) — one class higher
 * than a plain `.sbp-contact input.input-text`, so its #fff background wins
 * the cascade. Matching its `.woocommerce-checkout` class keeps us ahead.
 */
.woocommerce-checkout .sbp-contact input.input-text {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1.05rem;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.1rem;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sbp-contact input.input-text::placeholder { color: var(--text-muted); }
.woocommerce-checkout .sbp-contact input.input-text:focus {
	outline: 2px solid transparent; /* visible under forced-colors */
	outline-offset: 2px;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.sbp-contact .required { color: var(--accent); border: 0; }

/*
 * WooCommerce's own live-validation (on blur) adds `.woocommerce-invalid` to
 * a `.form-row` and styles the label + input border with its hard-coded
 * `--wc-red`. Re-themed to our error token so it reads as "this theme's
 * error state," not a foreign red.
 */
.woocommerce-checkout .sbp-contact .form-row.woocommerce-invalid label {
	color: var(--error);
}
.woocommerce-checkout .sbp-contact .form-row.woocommerce-invalid input.input-text {
	border-color: var(--error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent);
}

/* WooCommerce's default checkout privacy-policy notice — secondary info. */
.woocommerce-privacy-policy-text {
	color: var(--text-muted);
	font-size: var(--fs-sm);
}
.woocommerce-privacy-policy-text a { color: var(--accent-text); }

/* Coupon */
.sbp-coupon__row { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.sbp-coupon__input { flex: 1; text-transform: uppercase; letter-spacing: 0.08em; }
.sbp-coupon__apply {
	--btn-bg: var(--surface-raised);
	white-space: nowrap;
	border-color: var(--border);
}
.sbp-coupon__msg { margin: 0.6rem 0 0; font-size: var(--fs-sm); font-weight: 500; }
.sbp-coupon__msg.is-success { color: var(--success); }
.sbp-coupon__msg.is-error { color: var(--error); }
.sbp-coupon__remove {
	border: 0; background: transparent; cursor: pointer;
	color: var(--text); font-size: 1.1rem; line-height: 1;
	min-width: 44px; min-height: 32px; padding: 0 0.5rem; margin-left: 0.25rem;
}
.sbp-coupon__remove:hover { color: var(--error); }

/* Totals */
.sbp-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.55rem 0;
	color: var(--text);
}
.sbp-totals__row--sub { color: var(--text-muted); }
.sbp-totals__row--discount { color: var(--success); }
.sbp-totals__row--total {
	border-top: 1px solid var(--border);
	margin-top: 0.35rem;
	padding-top: 0.9rem;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 600;
}
.sbp-totals__row--total span:last-child { color: var(--accent); }

/* Applied-coupon row: amount + WooCommerce's own remove link share the same
   cell, so let it wrap on narrow screens instead of squeezing both. */
.sbp-totals__row--discount { flex-wrap: wrap; }
.sbp-totals__row--discount > span:last-child {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
}
/* Proper tap-target button instead of the raw "[Remove]" text link. */
.sbp-totals__coupon-remove {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 36px;
	padding: 0.3rem 0.7rem 0.3rem 0.55rem;
	border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--error) 8%, transparent);
	color: var(--error);
	font-size: var(--fs-cap);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.sbp-totals__coupon-remove::before {
	content: "";
	width: 14px; height: 14px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6"/></svg>') center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
	.sbp-totals__coupon-remove:hover {
		background: color-mix(in srgb, var(--error) 14%, transparent);
	}
}
.sbp-totals__coupon-remove.is-busy { opacity: 0.6; pointer-events: none; }
@media (max-width: 480px) {
	.sbp-totals__coupon-remove { min-height: 40px; padding-inline: 0.85rem; }
}

.sbp-pay-label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	margin: 1.25rem 0 0.5rem;
}
.sbp-pay-label svg { color: var(--accent-text); flex: none; }

/* Payment (MyFatoorah card fields) */
.sbp-review #payment,
.sbp-review .woocommerce-checkout-payment {
	margin-top: 1.25rem;
	background: transparent;
}
/* WooCommerce's own core stylesheet also puts padding directly on #payment
   and ul.payment_methods via ID/element selectors — match that specificity
   to actually zero it out rather than leaving our class-only rule beaten. */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	background: transparent;
}
.sbp-review .payment_methods { list-style: none; margin: 0 0 1rem; padding: 0; }
.sbp-review .payment_methods li { padding: 0; }
/*
 * WooCommerce's own core stylesheet targets this box with
 * `.woocommerce-checkout #payment div.payment_box` — an ID selector, which
 * beats any number of classes (like our `.sbp-review .payment_box`)
 * regardless of stylesheet load order. Matching its exact selector is the
 * only reliable way to win the cascade here.
 */
.woocommerce-checkout #payment div.payment_box {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--border-soft);
	border-radius: 0;
	padding: 0.25rem 0 0;
	margin-top: 0.5rem;
}
/* Same core rule also draws a hard-coded grey arrow (::before) pointing at
   the selected method — kill it so it doesn't clash as a stray dark wedge. */
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* MyFatoorah's own plugin stylesheet (myfatoorah-style-css) wraps its embedded
   card fields in `.mf-payment-methods-container`, styled as a separate boxed
   widget (shadow, border, background) — strip that so it reads as part of
   the page instead of a foreign embed. Also flatten any nested `.mf-*`
   sub-containers it generates for the same reason. */
.woocommerce-checkout .payment_box .mf-payment-methods-container,
.woocommerce-checkout .payment_box [class*="mf-"] {
	box-shadow: none;
	border: 0;
	background: transparent;
	border-radius: 0;
	padding: 0;
	margin: 0;
}
.woocommerce-checkout .payment_box .mf-payment-methods-container input,
.woocommerce-checkout .payment_box .mf-payment-methods-container select {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
}
.sbp-review .payment_box input,
.sbp-review .payment_box select {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	padding: 0.75rem 0.85rem;
}
.sbp-review #place_order,
.sbp-review .button[name="woocommerce_checkout_place_order"] {
	width: 100%;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--accent-contrast);
	border: 0;
	border-radius: 999px;
	padding: 1.1rem 2rem;
	cursor: pointer;
	background-image: linear-gradient(180deg, var(--accent-soft), var(--accent));
	box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent);
	transition: transform var(--dur-fast) var(--ease);
}
.sbp-review #place_order:active { transform: scale(0.98); }

.sbp-checkout__terms {
	text-align: center;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	max-width: 42ch;
	margin: 1.25rem auto 0;
}

/* Sticky pay CTA elevation cue is handled by #order_review on mobile */
@media (max-width: 640px) {
	.sbp-review {
		position: sticky;
		bottom: 0;
		z-index: 30;
	}
	.sbp-review.is-stuck { box-shadow: 0 -12px 30px -18px rgba(0,0,0,0.5); }
}

/* ---------------- Mobile/tablet: 2-row product listing (cart + checkout summary) ---------------- */
@media (max-width: 900px) {
	.sbp-cart-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 1rem;
		row-gap: 0.6rem;
	}
	.sbp-cart-row__main { flex: 1 0 100%; }
	.sbp-cart-row .sbp-qty { order: 2; }
	.sbp-cart-row .sbp-cart-row__sub { order: 3; margin-left: auto; }

	.sbp-summary__item { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.5rem; }
	.sbp-summary__name { flex: 1 0 100%; }
	.sbp-summary__item .sbp-qty { order: 2; }
	.sbp-summary__item .sbp-summary__price { order: 3; margin-left: auto; }
}

/* ---------------- Mobile/tablet: shopbar restack (secure-checkout congestion) ----------------
   Scoped to the checkout variant only (via :has), so the shop/cart shopbar's
   cart icon + toggle keep their normal single-line layout untouched. */
@media (max-width: 900px) {
	.sbp-shopbar:has(.sbp-checkout__secure) .sbp-shopbar__inner {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		row-gap: 0.35rem;
	}
	.sbp-shopbar:has(.sbp-checkout__secure) .sbp-logo { grid-column: 1; grid-row: 1; }
	.sbp-shopbar:has(.sbp-checkout__secure) .sbp-shopbar__actions { display: contents; }
	.sbp-shopbar:has(.sbp-checkout__secure) .sbp-toggle--inline { grid-column: 2; grid-row: 1; }
	.sbp-shopbar .sbp-checkout__secure { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

/* ---------------- Mobile/tablet: shopbar restack (shop page network badge) ----------------
   Scoped to the network-badge variant only, so cart/checkout shopbars are untouched. */
@media (max-width: 900px) {
	.sbp-shopbar:has(.sbp-network-badge) .sbp-shopbar__inner {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		row-gap: 0.35rem;
	}
	.sbp-shopbar:has(.sbp-network-badge) .sbp-logo { grid-column: 1; grid-row: 1; margin-right: 0; }
	.sbp-shopbar:has(.sbp-network-badge) .sbp-shopbar__actions { grid-column: 2; grid-row: 1; }
	.sbp-shopbar .sbp-network-badge { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

/* ---------------- Shared page head + back button ---------------- */
.sbp-page-head { margin-bottom: 1.75rem; }
.sbp-page-head h1 { font-size: var(--fs-h1); }
.sbp-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	margin-bottom: 0.75rem;
	transition: color var(--dur-fast) var(--ease);
}
.sbp-back:hover { color: var(--accent-text); }
.sbp-card__title { font-size: var(--fs-h3); margin: 0 0 1rem; }

/* Shopbar actions cluster (cart + inline toggle) */
.sbp-shopbar__actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.sbp-toggle--inline {
	position: static;
	width: 42px; height: 42px;
	box-shadow: none;
	backdrop-filter: none;
	background: var(--surface-raised);
}

/* Currency: isolate the RTL AED glyph so "د.إ 49.00" never reorders. */
.sbp-amount,
.woocommerce-Price-amount { unicode-bidi: isolate; }

/* ---------------- Cart page ---------------- */
.sbp-cart-items { padding: 0.5rem clamp(1.1rem, 3vw, 1.5rem); }
.sbp-cart-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: clamp(0.75rem, 3vw, 1.5rem);
	padding: 1rem 0;
	border-bottom: 1px solid var(--border-soft);
}
.sbp-cart-row:last-child { border-bottom: 0; }
.sbp-cart-row.is-busy { opacity: 0.55; }
.sbp-cart-row.is-removing { opacity: 0; transform: translateX(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sbp-cart-row__name { font-weight: 600; margin: 0; }
.sbp-cart-row__unit { color: var(--text-muted); font-size: var(--fs-sm); margin: 0.15rem 0 0; }
.sbp-cart-row__sub { display: inline-flex; align-items: center; gap: 0.5rem; }
.sbp-cart-row__subtotal { font-weight: 700; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.sbp-cart-row__remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.sbp-cart-row__remove:hover { color: var(--error); border-color: color-mix(in srgb, var(--error) 45%, transparent); background: color-mix(in srgb, var(--error) 8%, transparent); }
.sbp-cart-row__remove:active { transform: scale(0.92); }

.sbp-proceed { margin-top: 1.25rem; }
.sbp-proceed .checkout-button,
.sbp-proceed a.button {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--accent-contrast);
	border: 0;
	border-radius: 999px;
	padding: 1.1rem 2rem;
	text-decoration: none;
	background-color: var(--accent); /* WC's own purple default, in case the gradient is ever unsupported */
	background-image: linear-gradient(180deg, var(--accent-soft), var(--accent));
	box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.sbp-proceed .checkout-button:hover,
.sbp-proceed a.button:hover {
	/*
	 * WooCommerce's own `.woocommerce a.button:hover` rule sets
	 * `background-image: none` (to swap in a flat hover color for its default
	 * buttons). Because that lives only on the :hover selector, it beats our
	 * base (non-hover) rule for that one property — so the gradient must be
	 * re-declared here, not just on the base state.
	 */
	background-image: linear-gradient(180deg, var(--accent-soft), var(--accent));
	background-color: transparent;
	color: var(--accent-contrast);
	box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--accent) 75%, transparent);
}
.sbp-proceed .checkout-button:active,
.sbp-proceed a.button:active { transform: scale(0.98); }
/* Same slow sheen sweep as every other primary CTA on the site. */
@media (hover: hover) and (pointer: fine) {
	.sbp-proceed .checkout-button::after,
	.sbp-proceed a.button::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
		transform: translateX(-120%);
	}
	.sbp-proceed .checkout-button:hover::after,
	.sbp-proceed a.button:hover::after { animation: sbp-sheen 0.7s var(--ease); }
}

.sbp-empty--cart { text-align: center; display: grid; justify-items: center; gap: 1rem; padding: 2.5rem 1.5rem; }
.sbp-empty__mark {
	display: inline-flex; width: 56px; height: 56px;
	align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--accent-wash);
	color: var(--accent);
}

/* ---------------- Checkout 2-column (desktop) ---------------- */
.sbp-checkout__form { display: block; }
@media (min-width: 900px) {
	.sbp-checkout__form {
		display: grid;
		grid-template-columns: 1fr 400px;
		gap: clamp(1.25rem, 3vw, 2rem);
		align-items: start;
	}
	.sbp-checkout__sticky { position: sticky; top: 1.5rem; }
}

/* ---------------- Result page (Page 4) ---------------- */
.sbp-result { text-align: center; }
.sbp-result__head { margin-bottom: 1.75rem; }
.sbp-result__glyph {
	display: inline-flex;
	width: 76px; height: 76px;
	align-items: center; justify-content: center;
	border-radius: 999px;
	margin-bottom: 1rem;
}
.sbp-result__glyph--ok { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.sbp-result__glyph--fail { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.sbp-result__head h1 { font-size: var(--fs-h1); }
.sbp-result__sub { color: var(--text-muted); max-width: 42ch; margin-inline: auto; }
.sbp-result__panel { text-align: left; }
.sbp-result__chat { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 1.5rem; }
.sbp-result__pdf { margin-top: 0.5rem; }

/* Voucher block — flat corporate card with an accent frame */
.sbp-voucher-ticket {
	background: var(--surface);
	color: var(--text);
	border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
	border-radius: var(--radius);
	padding: 1.5rem;
	margin-bottom: 1rem;
	text-align: left;
	box-shadow: var(--shadow-card);
}
.sbp-voucher-ticket__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px dashed var(--ticket-line);
}
.sbp-voucher-ticket__label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.sbp-voucher-ticket__label svg { color: var(--accent); }
.sbp-voucher-ticket__price { font-weight: 700; color: var(--ticket-ink); }
.sbp-voucher-ticket .sbp-label { color: var(--ticket-ink-muted); }
.sbp-voucher-ticket__key {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
}
.sbp-voucher-ticket__key code {
	flex: 1;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 1.25rem;
	letter-spacing: 0.06em;
	color: var(--accent);
	background: var(--accent-wash);
	border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
	border-radius: var(--radius-sm);
	padding: 0.7rem 0.9rem;
	word-break: break-all;
}
.sbp-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	gap: 0.35rem;
	border: 1px solid var(--ticket-line);
	background: transparent;
	color: var(--ticket-ink);
	border-radius: var(--radius-sm);
	padding: 0.7rem 0.9rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--dur-fast) var(--ease);
}
.sbp-copy:hover { background: color-mix(in srgb, var(--ticket-ink) 6%, transparent); }
.sbp-copy.is-copied { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.sbp-voucher-ticket__pending { color: var(--ticket-ink-muted); font-style: italic; margin: 0; }

/* T&Cs accordion */
.sbp-terms { text-align: left; }
.sbp-terms summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sbp-terms summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.sbp-terms[open] summary::after { content: "\2212"; }
.sbp-terms__body { margin-top: 1rem; color: var(--text-muted); font-size: var(--fs-sm); }
.sbp-terms__body ol { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.sbp-terms__body h3 { font-size: 1rem; color: var(--text); }

/* Redirect overlay */
.sbp-pay-overlay {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--overlay);
	backdrop-filter: blur(6px);
}
.sbp-pay-overlay.is-active { display: flex; }
.sbp-pay-overlay__inner { text-align: center; color: var(--text); }
.sbp-pay-overlay__mark {
	display: inline-flex;
	width: 64px; height: 64px;
	align-items: center; justify-content: center;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 20%, transparent);
	color: var(--accent);
	margin-bottom: 1rem;
}