/*
 * 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;
}

/* ---------------- Lock-screen layout (gate + landing info) ----------------
   Mobile/tablet (default): normal document flow — gate first, landing info
   reachable by scrolling down. From 900px up, wide enough to show the code
   field and the pitch/disclaimer/lead-gen side-by-side without cramping
   either, so they sit in a two-column row instead of stacking. */
@media (min-width: 900px) {
	.sbp-lock-layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		min-height: 100vh;
		min-height: 100dvh;
		background: url('../images/login-page-dark.webp') no-repeat center top;
		background-size: cover;
	}
	.sbp-lock-layout .sbp-gate { min-height: 0; padding-block: clamp(2rem, 4vw, 3rem); }
	.sbp-lock-layout .sbp-landing-info {
		padding-block: clamp(2rem, 4vw, 3rem);
		border-left: 1px solid var(--border-soft);
	}
	:root[data-theme="light"] .sbp-lock-layout {
		background-color: #F8FAFC;
		background-image: url('../images/login-page-light.webp');
	}
}

/* ---------------- 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__tagline {
	margin: 0.75rem 0 0;
	color: var(--text-muted);
	font-size: var(--fs-sm);
}
.sbp-gate__form .sbp-input {
	text-align: center;
	font-size: 1.35rem;
	letter-spacing: 0.15em;
}
.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; } }

/* ---------------- Landing info (below the gate, Page 1) ----------------
   Supplementary content below the primary action (code entry) — product
   pitch, coverage disclaimer, and a lead-gen line for other properties.
   Condensed rather than hidden on mobile: smaller type/spacing, but every
   element (idea, disclaimer, lead-gen) still shows — see CRO/legal notes
   on why these shouldn't disappear on the majority-mobile traffic split. */
.sbp-landing-info {
	padding: clamp(1.5rem, 6vw, 3rem) 1.25rem clamp(3rem, 8vh, 5rem);
}
.sbp-landing-pitch { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.sbp-landing-pitch h2 { font-size: var(--fs-h2); margin: 0 0 0.6rem; }
.sbp-landing-pitch p { color: var(--text-muted); max-width: 52ch; margin-inline: auto; }

.sbp-landing-steps {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
	padding: 0;
}
.sbp-landing-step {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.75rem;
	text-align: left;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}
.sbp-landing-step__mark {
	display: inline-flex;
	width: 40px; height: 40px;
	align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--accent-wash);
	color: var(--accent);
	flex-shrink: 0;
	margin-top: 0.1rem;
}
.sbp-landing-step__num {
	font-weight: 700;
	font-size: var(--fs-base);
	color: var(--accent);
}
.sbp-landing-step__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.sbp-landing-step__title {
	font-weight: 600;
	color: var(--text);
}
.sbp-landing-step__desc {
	font-size: var(--fs-xs, 0.8rem);
	color: var(--text-muted);
}

.sbp-landing-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	max-width: 60ch;
	margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
	padding: 0.9rem 1.1rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	text-align: left;
}
.sbp-landing-disclaimer svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--accent-text); }
.sbp-landing-disclaimer p { margin: 0; }
@media (min-width: 900px) {
	.sbp-landing-disclaimer { max-width: none; margin-inline: 0; }
}

.sbp-landing-lead {
	max-width: 60ch;
	margin-inline: auto;
	text-align: center;
}
.sbp-landing-lead h3 { font-size: var(--fs-h3); margin: 0 0 0.5rem; }
.sbp-landing-lead p { color: var(--text-muted); margin: 0 0 1.1rem; }
.sbp-landing-lead .sbp-btn { display: inline-flex; }

@media (max-width: 640px) {
	.sbp-landing-info { padding: 1rem 1rem 2.5rem; }
	.sbp-landing-pitch h2 { font-size: var(--fs-h3); }
	.sbp-landing-pitch p { font-size: var(--fs-sm); }
	.sbp-landing-steps { gap: 0.6rem; margin-bottom: 1.25rem; }
	.sbp-landing-disclaimer { margin-bottom: 1.25rem; }
	.sbp-landing-lead { padding: 1.1rem; }
}

/* ---------------- Scroll cue (mobile-only, gate → landing info) ----------------
   Floating circular hint that there's more content below the fold on mobile,
   where the gate and landing-info sections stack instead of sitting
   side-by-side (see .sbp-lock-layout's 900px breakpoint above). Hidden at
   that breakpoint and up since both sections are already visible together. */
.sbp-scroll-cue {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(1rem + var(--safe-bottom));
	z-index: 40;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--surface) 80%, transparent);
	border: 1px solid var(--border);
	color: var(--text);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-card);
	cursor: pointer;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.3s var(--ease);
}
.sbp-scroll-cue.is-hidden {
	opacity: 0;
	pointer-events: none;
}
@media (min-width: 900px) {
	.sbp-scroll-cue { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	/* A few bounces are enough to read as "there's more below" — looping
	   forever while a guest is just reading turns a hint into a distraction. */
	.sbp-scroll-cue { animation: sbp-scroll-cue-bounce 1.6s ease-in-out 3; }
}
@keyframes sbp-scroll-cue-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(0.4rem); }
}

/* ---------------- Shop bar (Page 2 header) ---------------- */
.sbp-shopbar {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	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.webp') 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(-10rem, -19vw, -13rem);
	overflow: hidden;
}
/* Light theme: swap to the light hero artwork + dark-ink text, since the
   dark hero image/text combo is illegible against a white page. */
:root[data-theme="light"] .sbp-shop__hero {
	--hero-text: #0F172A;
	--hero-text-muted: #64748B;
	--hero-line: rgba(37, 99, 235, 0.25);
	--hero-accent: #2563EB;
	background-color: #F8FAFC;
	background-image: url('../images/shop-hero-bg-light.webp');
}
.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 { background-position: 70% center; }
}
.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;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
}
.sbp-trust-badges svg { color: var(--accent); flex-shrink: 0; }
.sbp-trust-badges--gate { margin-top: 2rem; }
@media (max-width: 480px) {
	.sbp-trust-badges { gap: 0.5rem; }
	.sbp-trust-badges li { font-size: 0.78rem; }
}

/* ---------------- 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); }
.sbp-footer__legal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-size: var(--fs-sm);
}
.sbp-footer__legal a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.sbp-footer__legal a:hover { color: var(--accent-text); }
.sbp-footer__legal span { color: var(--text-muted); }
/* "Lost voucher" is a recovery action, not a legal page link — give it a
   touch of weight so it reads as interactive rather than blending into the
   surrounding About/Contact/Privacy links. */
.sbp-footer__legal a.sbp-footer__action {
	color: var(--accent-text);
	font-weight: 600;
	text-decoration-style: dotted;
}

@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(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.sbp-ticket-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------- 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);
}
/* Light-ray glint sweep, clipped to the card by the base .sbp-ticket's
   overflow: hidden. mix-blend-mode keeps it a highlight rather than a
   wash that would obscure the price/text underneath. Reduced-motion
   users get it capped to a single, near-instant pass by the global
   @media (prefers-reduced-motion: reduce) rule in motion.css. */
.sbp-ticket.is-popular::before {
	content: "";
	position: absolute;
	inset: -10% -40%;
	background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 1;
	animation: sbp-glint 3.4s ease-in-out infinite;
}
/* 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); }

/* Folded-ribbon banner, not a pill: flush with the card's top edge (so
   .sbp-ticket's own overflow: hidden doesn't clip it). A foil-style
   diagonal gradient (light -> accent -> dark, all color-mix'd off the
   same var(--accent) token — no new color introduced) gives it fold/sheen
   depth instead of flat fill; ::before/::after hang two small forked
   ribbon-tail flags below each end, the actual recognizable "ribbon" cue,
   rather than a diagonal corner triangle. */
.sbp-ticket__ribbon {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	min-width: 62%;
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--accent) 80%, white 20%) 0%,
		var(--accent) 45%,
		color-mix(in srgb, var(--accent) 78%, black 22%) 100%);
	color: var(--accent-contrast);
	font-size: var(--fs-cap);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.65rem 1.5rem 0.8rem;
	border-radius: 0 0 0.25rem 0.25rem;
	box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent);
	z-index: 2;
}
.sbp-ticket__ribbon::before,
.sbp-ticket__ribbon::after {
	content: "";
	position: absolute;
	top: 100%;
	width: 1rem;
	height: 0.85rem;
	background: color-mix(in srgb, var(--accent) 65%, black 30%);
	clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}
.sbp-ticket__ribbon::before { left: 0.2rem; }
.sbp-ticket__ribbon::after { right: 0.2rem; }

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

/* Duration/device line — the actual differentiator between cards on this
   shop (every card is a "WiFi Voucher"; not every card is "1 hour, single
   device"), so it gets a badge treatment instead of the muted eyebrow label
   this replaced. */
.sbp-ticket__duration {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--accent-text);
	background: var(--accent-wash);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	margin: 0 0 0.85rem;
}
.sbp-ticket__duration svg { color: var(--accent); flex: none; }

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

.sbp-ticket__price {
	color: var(--ticket-ink);
	line-height: 1;
}
.sbp-ticket__price-now { display: inline-flex; align-items: flex-start; gap: 0.35rem; }
.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.1rem; font-weight: 600; letter-spacing: 0.04em; align-self: center; 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; }

.sbp-ticket__actions {
	padding: 1.25rem clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
	display: grid;
	gap: 0.65rem;
}
/* Two label sets + an icon live in the one .sbp-ticket__cart link so the
   card's not-yet-added state can switch appearance with a single class on
   <body> (sbp-cart-active, see sbp_body_class_cart_state()) — no need to
   touch every card's markup when the guest starts a cart elsewhere. */
.sbp-ticket__cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2.75rem;
	text-align: center;
	padding: 0.4rem;
	color: var(--ticket-ink-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.sbp-ticket__cart:hover { color: var(--ticket-ink); }
.sbp-ticket__cart.is-added { color: var(--success); }
.sbp-ticket__cart svg { display: none; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.sbp-ticket__cart-label-active { display: none; }

/* Once any product is in the cart, every still-unselected card's "Buy Now"
   is hidden (below) and this link becomes the sole primary action — a lone
   "Buy Now" on every other card would read like a competing single-item
   purchase once the guest is already building a multi-item order. */
body.sbp-cart-active .sbp-ticket__cart {
	display: flex;
	width: 100%;
	height: auto;
	padding: 0.95rem 1.6rem;
	border: none;
	border-radius: 999px;
	background-image: linear-gradient(180deg, var(--accent-soft), var(--accent));
	color: var(--accent-contrast);
	font-size: var(--fs-body);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
body.sbp-cart-active .sbp-ticket__cart:hover { color: var(--accent-contrast); }
body.sbp-cart-active .sbp-ticket__cart svg { display: block; }
body.sbp-cart-active .sbp-ticket__cart-label-active { display: inline; }
body.sbp-cart-active .sbp-ticket__cart-label-default { display: none; }

.sbp-ticket__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.sbp-ticket__buy svg { width: 1rem; height: 1rem; flex-shrink: 0; }
/* Belt-and-braces for the live (no-reload) switch: PHP already hides Buy Now
   server-side whenever the cart has items, but this covers cards that were
   rendered before shop.js added sbp-cart-active to <body>. */
body.sbp-cart-active .sbp-ticket__buy { display: none !important; }

/* ---------------- Buy Now multi-click guard ----------------
   Belt-and-braces with the JS click guard in shop.js: pointer-events: none
   takes effect immediately (before the JS handler even finishes running),
   so a rapid double-tap can't register a second navigation. */
.sbp-ticket__buy.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* Add-ons: a supplement, not a standalone plan — dashed border and a
   slightly quieter surface keep it from being mistaken for a 10th pass. */
.sbp-ticket-grid--addons .sbp-ticket {
	border-style: dashed;
	background: color-mix(in srgb, var(--ticket-bg) 92%, var(--surface-raised));
}

.sbp-shop__tier-heading {
	position: relative;
	z-index: 2;
	font-family: var(--font-display);
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 2.25rem 0 1rem;
}
.sbp-shop__tier-heading::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--border);
}
.sbp-shop__tier-sub {
	position: relative;
	z-index: 2;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	margin: 0 0 1.25rem;
}
/* The first tier's heading sits inside the shop hero's negative-margin
   overlap (the ticket grid intentionally bleeds up into the hero — see
   .sbp-ticket-grid's z-index), which is always dark regardless of site
   theme. Plain ink-colored text there would be near-invisible; the hero's
   own text tokens aren't reachable here (they're scoped to .sbp-shop__hero),
   so this matches those same fixed values directly. */
.sbp-stage.sbp-shop > .sbp-wrap > .sbp-shop__tier-heading--hero { color: #F1F5F9; }
.sbp-stage.sbp-shop > .sbp-wrap > .sbp-shop__tier-heading--hero::after { background: rgba(241, 245, 249, 0.25); }
.sbp-stage.sbp-shop > .sbp-wrap > .sbp-shop__tier-sub:first-of-type { color: #94A3B8; }

/* Two stacked lines once a voucher is in the cart: line 1 is the qty
   stepper + remove, line 2 is a full-width "View cart" — kept as two
   distinct rows rather than crammed side by side, so each stays a
   comfortable tap target instead of shrinking to fit one line. */
.sbp-ticket__qtyrow {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.sbp-ticket__qtyrow[hidden] { display: none; }

.sbp-ticket__qtyline {
	display: flex;
	align-items: center;
}

/* Inline qty stepper that replaces Add to Cart once a voucher is in the cart. */
.sbp-ticket__qty {
	flex: 1 1 auto;
	width: auto;
	height: 2.75rem;
	justify-content: space-between;
	border-color: var(--border);
}
.sbp-ticket__qty .sbp-qty__val { flex: 1; }

.sbp-ticket__viewcart {
	width: 100%;
	height: 2.75rem;
	padding: 0 1rem;
	border-color: var(--border);
	color: var(--accent);
	font-size: var(--fs-sm);
	font-weight: 600;
}
.sbp-ticket__viewcart svg { width: 16px; height: 16px; }

/* WooCommerce appends its own "View cart" link (.added_to_cart.wc-forward)
   asynchronously after the added_to_cart event, which can race past shop.js's
   .hide() call and leave a duplicate, unthemed link next to ours. Hide it
   unconditionally in the shop grid — .sbp-ticket__viewcart is the only
   "View cart" link this layout should ever show. */
.sbp-ticket-grid .added_to_cart { display: none !important; }
.sbp-ticket__remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	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 {
	position: relative;
	z-index: 2;
	text-align: center;
	color: var(--text-muted);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 3rem 1.5rem;
	margin-top: 1rem;
}

/* ---------------- Pagination (shop archive) ---------------- */
.woocommerce-pagination {
	position: relative;
	z-index: 2;
	margin-top: clamp(2rem, 4vw, 3rem);
}
.woocommerce-pagination ul.page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination .page-numbers li { display: contents; }
.woocommerce-pagination .page-numbers a.page-numbers,
.woocommerce-pagination .page-numbers span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.woocommerce-pagination .page-numbers a.page-numbers:hover {
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	color: var(--accent);
}
.woocommerce-pagination .page-numbers span.page-numbers.current {
	background: var(--accent);
	color: var(--accent-contrast);
}
.woocommerce-pagination .page-numbers span.page-numbers.dots {
	background: transparent;
	color: var(--text-muted);
}

/* ---------------- 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); }

/* Trust badges reused outside the hero (checkout, result): the base
   .sbp-trust-badges rule hardcodes --hero-text-muted/--hero-accent, which are
   tuned for the hero's dark image background and fail contrast on a plain
   surface card in light mode. These variants use the theme-aware semantic
   tokens instead. */
.sbp-trust-badges--checkout,
.sbp-trust-badges--result {
	justify-content: flex-start;
	margin: 1rem 0;
}
.sbp-trust-badges--checkout li,
.sbp-trust-badges--result li { color: var(--text-muted); }
.sbp-trust-badges--checkout svg,
.sbp-trust-badges--result svg { color: var(--accent-text); }
.sbp-trust-badges--result { justify-content: center; }

/* ---------------- 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;
	box-shadow: var(--shadow-card);
}

/* 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 auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--border);
}
.sbp-summary__item:first-child { border-top: none; }
.sbp-summary__item.is-busy { opacity: 0.6; }
.sbp-summary__name { font-weight: 600; }
.sbp-summary__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.sbp-summary__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	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);
}
.sbp-summary__remove:hover { color: var(--text); border-color: var(--text-muted); }
.sbp-summary__remove svg { width: 18px; height: 18px; }

.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); }
.sbp-totals__empty { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* 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; 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; }
	.sbp-summary__item .sbp-summary__remove { order: 4; }
}

/* ---------------- 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; }
}

/* ---------------- Mobile/tablet: shopbar restack (badge + secure-checkout together) ----------------
   Checkout now always shows the property badge too (added when the badge's
   visibility was decoupled from $show_eyebrow), so both restack rules above
   can match the same shopbar at once — each independently claiming "row 2,
   column 1/-1", which visually overlapped the badge and the secure-checkout
   label. This gives the combined case its own three-row stack instead. */
@media (max-width: 900px) {
	.sbp-shopbar:has(.sbp-checkout__secure):has(.sbp-network-badge) .sbp-network-badge {
		grid-row: 2;
	}
	.sbp-shopbar:has(.sbp-checkout__secure):has(.sbp-network-badge) .sbp-checkout__secure {
		grid-row: 3;
	}
}

/* ---------------- 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; }
	/* Pin the two real columns explicitly — WooCommerce prepends its own
	   validation-error notice (.woocommerce-NoticeGroup-checkout) as a THIRD
	   direct child of form.checkout when a required field is missing, which
	   would otherwise consume a grid column slot and push these out of place. */
	.sbp-checkout__col--main { grid-column: 1; }
	.sbp-checkout__col--aside { grid-column: 2; }
}
/* Any other direct child WooCommerce injects into the form (notice groups,
   blockUI overlays) spans full width instead of stealing a column. */
.sbp-checkout__form > *:not(.sbp-checkout__col) { grid-column: 1 / -1; }

/* ---------------- 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; }
.sbp-result__guidance { margin: 1rem 0 1.5rem; line-height: 1.5; }
.sbp-result__guidance a { color: var(--accent-text); }
.sbp-result__back { display: flex; margin-top: 0.75rem; }

/* Venue branding + order-detail block (Part 1 of the success-page info fix:
   previously the success page showed only the order number, nothing else
   the PDF already surfaces). Left-aligned inside the otherwise-centered
   .sbp-result stage. */
.sbp-result__info { text-align: left; }
.sbp-result__info-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-bottom: 0.85rem;
	margin-bottom: 0.85rem;
	border-bottom: 1px solid var(--border);
}
.sbp-result__info-logo { width: 40px; height: 40px; object-fit: contain; border-radius: var(--radius-sm, 6px); flex: none; }
.sbp-result__info-venue { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md, 1.05rem); margin: 0; }
.sbp-result__info-address { color: var(--text-muted); font-size: var(--fs-sm); margin: 0.15rem 0 0; }
.sbp-result__info-rows .sbp-totals__row:first-child { padding-top: 0; }
.sbp-result__info-rows .sbp-totals__row:last-child { padding-bottom: 0; }

/* 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;
	min-width: 0;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: clamp(0.8rem, 3.4vw, 1.25rem);
	letter-spacing: 0.02em;
	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;
	white-space: nowrap;
	overflow-x: auto;
}
.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); }
@media (max-width: 480px) {
	.sbp-copy .sbp-copy__label { display: none; }
	.sbp-copy { padding: 0.6rem; min-width: 2.5rem; justify-content: center; }
}
.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); }
.sbp-terms__body h4.aai-voucher-terms-group {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 1.1rem 0 0.5rem;
}
.sbp-terms__body h4.aai-voucher-terms-group:first-of-type { margin-top: 0.65rem; }

/* 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;
}

/* ---------------- Lost-voucher modal ---------------- */
.sbp-modal {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}
.sbp-modal[hidden] { display: none; }
.sbp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--overlay);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}
.sbp-modal.is-active .sbp-modal__backdrop { opacity: 1; }
.sbp-modal__panel {
	position: relative;
	width: 100%;
	max-width: 26rem;
	max-height: calc(100vh - 2.5rem);
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
	padding: 1.75rem 1.5rem;
	transform: translateY(0.75rem) scale(0.98);
	opacity: 0;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.sbp-modal.is-active .sbp-modal__panel { transform: translateY(0) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.sbp-modal__backdrop,
	.sbp-modal__panel { transition: none; }
}
.sbp-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 1.4rem;
	line-height: 1;
	border-radius: 999px;
	cursor: pointer;
}
.sbp-modal__close:hover { background: var(--border-soft); color: var(--text); }
.sbp-modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sbp-modal__title {
	font-family: var(--font-display);
	font-size: 1.3rem;
	margin: 0 0 0.5rem;
	padding-right: 1.5rem;
}
.sbp-modal__desc {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	margin: 0 0 1.25rem;
	line-height: 1.5;
}
.sbp-modal__result {
	margin: 1.25rem 0 0;
	padding: 1rem 1rem 1.1rem;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--success) 10%, transparent);
	text-align: center;
	opacity: 0;
	transform: translateY(0.35rem) scale(0.98);
	animation: sbp-result-in var(--dur) var(--ease) forwards;
}
@keyframes sbp-result-in {
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.sbp-modal__result { animation: none; opacity: 1; transform: none; }
}
.sbp-modal__result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--success) 16%, transparent);
	color: var(--success);
}
.sbp-modal__result-title {
	margin: 0 0 0.35rem;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
}
.sbp-modal__result-body {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: 1.5;
}
/* Invalid-email inline error uses the same container but stays a plain,
   compact alert — no icon/headline, since it's a correction, not a
   confirmation moment. */
.sbp-modal__result.is-error {
	text-align: left;
	padding: 0.75rem 1rem;
	background: color-mix(in srgb, var(--error) 12%, transparent);
}
.sbp-modal__result.is-error .sbp-modal__result-icon,
.sbp-modal__result.is-error .sbp-modal__result-title { display: none; }
.sbp-modal__result.is-error .sbp-modal__result-body { color: var(--error); }
.sbp-modal__fallback {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: var(--radius-sm);
	background: var(--border-soft);
	color: var(--text);
	font-size: var(--fs-sm);
	line-height: 1.6;
}
.sbp-modal__fallback a { color: var(--accent); font-weight: 600; }
.sbp-modal__still-help {
	margin: 0.85rem 0 0;
	color: var(--text-muted);
	font-size: var(--fs-cap);
	line-height: 1.6;
}
.sbp-modal__still-help a { color: var(--accent-text); font-weight: 600; }
.sbp-trust-badges--modal { margin: 1.25rem 0 0; justify-content: flex-start; }
.sbp-trust-badges--modal li { color: var(--text-muted); }
.sbp-trust-badges--modal svg { color: var(--accent-text); }