/**
 * Foundry Gym kiosk.
 *
 * @package FoundryKiosk
 * @since   1.0.0
 */

/* -----------------------------------------------------------------------------
 * Tokens
 * -------------------------------------------------------------------------- */

:root {
	--fg-ink: #ffffff;
	--fg-ink-dim: #a7a9b0;
	--fg-ink-faint: #6f7178;

	--fg-bg: #131316;
	--fg-bg-raise: #1e1f24;
	--fg-bg-sink: #0d0d10;

	--fg-orange: #ea6a1e;
	--fg-orange-hot: #f7801f;
	--fg-orange-deep: #b8500f;

	--fg-teal: #1ba391;
	--fg-teal-hot: #22bda8;
	--fg-teal-deep: #14806f;

	--fg-danger: #d63638;
	--fg-line: #33353c;

	--fg-radius: 14px;
	--fg-radius-lg: 20px;

	/* Touch targets. 60px, not 44px: gym hands, sometimes chalky, always in a hurry. */
	--fg-tap: 60px;

	--fg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--fg-step: 240ms;

	/*
	 * Fallback chain, oldest first. `vh` assumes the browser's toolbars are RETRACTED,
	 * so `100vh` on a tablet is taller than the screen and a "non-scrolling" kiosk
	 * quietly scrolls by 60px. `svh` is the guaranteed-visible height; `dvh` tracks the
	 * live one. Each line overwrites the last where supported.
	 */
	--fg-h: 100vh;
	--fg-h: 100svh;
	--fg-h: 100dvh;
}

/* -----------------------------------------------------------------------------
 * Kiosk reset
 * -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * The kiosk deliberately loads none of the theme's CSS, so it has to bring its own
 * copy of this WordPress convention. Every field still carries a real <label>; this
 * hides it from sight while leaving it to screen readers, which is the only correct
 * way to ship a placeholder-only form.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;               /* the document never scrolls */
	overscroll-behavior: none;      /* kills pull-to-refresh and rubber-banding */
	touch-action: manipulation;     /* kills double-tap zoom and the 300ms delay */
	-webkit-text-size-adjust: 100%; /* stops iOS silently inflating text */
}

.fg-kiosk-body {
	background: var(--fg-bg-sink);
	color: var(--fg-ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

.fg-kiosk {
	position: fixed;
	inset: 0;
	height: var(--fg-h);
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;

	touch-action: none;             /* the shell itself takes no gestures at all */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;    /* no iOS long-press "Copy / Look Up" on the £10 */
	-webkit-tap-highlight-color: transparent;

	background:
		radial-gradient(120% 80% at 50% 0%, #2a2118 0%, transparent 60%),
		radial-gradient(100% 60% at 50% 100%, #14262a 0%, transparent 55%),
		var(--fg-bg);

	padding:
		env(safe-area-inset-top) env(safe-area-inset-right)
		env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Inputs opt back in: a parent user-select:none does not reliably except textboxes. */
.fg-kiosk input,
.fg-kiosk textarea,
.fg-kiosk select {
	-webkit-user-select: text;
	user-select: text;
	touch-action: manipulation;
}

/* -----------------------------------------------------------------------------
 * Progress
 * -------------------------------------------------------------------------- */

.fg-progress {
	height: 4px;
	background: rgba(255, 255, 255, 0.07);
}

.fg-progress__bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--fg-orange), var(--fg-orange-hot));
	transition: width 420ms var(--fg-ease);
}

/* -----------------------------------------------------------------------------
 * Stage & screens
 * -------------------------------------------------------------------------- */

.fg-stage {
	position: relative;
	overflow: hidden;
}

.fg-screen {
	position: absolute;
	inset: 0;
	overflow-y: auto;               /* only the screen scrolls, never the document */
	overscroll-behavior: contain;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;

	opacity: 0;
	transform: translate3d(28px, 0, 0);
	pointer-events: none;
	visibility: hidden;

	/* transform + opacity only: the two the compositor can animate without layout. */
	transition:
		opacity var(--fg-step) var(--fg-ease),
		transform var(--fg-step) var(--fg-ease),
		visibility 0s linear var(--fg-step);
}

.fg-screen[data-active] {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}

.fg-screen[data-direction="back"] {
	transform: translate3d(-28px, 0, 0);
}

/* Promote to its own layer only while moving, then hand the memory back. */
.fg-screen.is-moving {
	will-change: opacity, transform;
}

.fg-screen__inner {
	min-height: 100%;
	max-width: 540px;
	margin: 0 auto;
	padding: 28px 24px 40px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fg-screen__inner--center {
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* -----------------------------------------------------------------------------
 * Logo
 * -------------------------------------------------------------------------- */

.fg-logo {
	align-self: center;
	text-align: center;
	margin-bottom: 4px;
}

.fg-logo--img {
	max-width: 240px;
	height: auto;
}

.fg-logo__word {
	display: block;
	font-size: 2.35rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1;
	color: #fff;
}

.fg-logo__rules {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.fg-logo__rule {
	flex: 1;
	height: 6px;
	background: #fff;
}

.fg-logo__sub {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.34em;
	padding: 0 2px;
	color: #fff;
}

/* -----------------------------------------------------------------------------
 * Type
 * -------------------------------------------------------------------------- */

.fg-title {
	margin: 0;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.fg-title--hero {
	font-size: 2.6rem;
	text-transform: uppercase;
}

.fg-title__rule {
	display: block;
	width: 132px;
	height: 4px;
	margin-top: 12px;
	background: var(--fg-orange);
	border-radius: 2px;
}

.fg-screen__inner--center .fg-title__rule {
	margin-inline: auto;
}

.fg-tagline {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--fg-ink-dim);
}

.fg-question {
	margin: 0 0 10px;
	font-size: 1.1rem;
	font-weight: 700;
}

.fg-label {
	display: block;
	margin-bottom: 8px;
	font-size: 1.05rem;
	font-weight: 700;
}

.fg-note {
	margin: 0;
	font-size: 0.95rem;
	color: var(--fg-ink-dim);
}

.fg-note--dim {
	color: var(--fg-ink-faint);
	font-size: 0.88rem;
}

.fg-link {
	color: var(--fg-teal-hot);
}

.fg-error {
	margin: 6px 0 0;
	min-height: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #ff8a8c;
}

.fg-error:empty {
	display: none;
}

/* -----------------------------------------------------------------------------
 * Price card
 * -------------------------------------------------------------------------- */

.fg-price-card {
	width: 100%;
	padding: 20px;
	border-radius: var(--fg-radius-lg);
	background: linear-gradient(135deg, var(--fg-orange), var(--fg-orange-deep));
	box-shadow: 0 12px 30px rgba(234, 106, 30, 0.28);
}

.fg-price-card__label {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
}

.fg-price-card__amount {
	margin: 2px 0 16px;
	font-size: 3.4rem;
	font-weight: 900;
	line-height: 1;
}

/* -----------------------------------------------------------------------------
 * Buttons
 * -------------------------------------------------------------------------- */

.fg-btn {
	appearance: none;
	border: 0;
	border-radius: var(--fg-radius);
	min-height: var(--fg-tap);
	padding: 0 26px;
	font: inherit;
	font-size: 1.15rem;
	font-weight: 800;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	transition:
		transform 120ms var(--fg-ease),
		filter 120ms var(--fg-ease),
		background-color 120ms var(--fg-ease);
}

.fg-btn:active {
	transform: scale(0.97);
	filter: brightness(0.92);
}

.fg-btn:focus-visible {
	outline: 3px solid var(--fg-teal-hot);
	outline-offset: 3px;
}

.fg-btn[disabled] {
	opacity: 0.55;
	pointer-events: none;
}

.fg-btn--block {
	width: 100%;
}

.fg-btn--grow {
	flex: 1;
}

.fg-btn--orange {
	background: var(--fg-orange);
	color: #fff;
}

.fg-btn--teal {
	background: var(--fg-teal);
	color: #fff;
}

.fg-btn--light {
	background: #fff;
	color: #1a1a1a;
}

.fg-btn--ghost {
	background: transparent;
	color: var(--fg-ink-dim);
	border: 2px solid var(--fg-line);
}

.fg-actions {
	display: flex;
	gap: 12px;
	margin-top: 6px;
}

.fg-countdown {
	font-size: 0.85rem;
	font-weight: 700;
	opacity: 0.65;
}

/* -----------------------------------------------------------------------------
 * Forms
 * -------------------------------------------------------------------------- */

.fg-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fg-field {
	margin: 0;
	padding: 0;
	border: 0;
}

.fg-input,
.fg-select {
	width: 100%;
	min-height: var(--fg-tap);
	padding: 0 18px;
	border-radius: var(--fg-radius);
	border: 2px solid var(--fg-line);
	background: var(--fg-bg-raise);
	color: var(--fg-ink);
	font: inherit;

	/*
	 * 18px, and never below 16px. iOS force-zooms the viewport when you focus an input
	 * smaller than 16px — and since iOS ignores user-scalable=no, that zoom WILL happen
	 * and will wreck the layout. This is the fix, not a preference.
	 */
	font-size: 18px;

	transition: border-color 140ms var(--fg-ease), background-color 140ms var(--fg-ease);
}

.fg-textarea {
	min-height: 110px;
	padding: 14px 18px;
	line-height: 1.4;
	resize: none;
}

.fg-input::placeholder {
	color: var(--fg-ink-faint);
}

.fg-input:focus,
.fg-select:focus {
	outline: none;
	border-color: var(--fg-teal);
	background: #24252b;
}

.fg-input[aria-invalid="true"] {
	border-color: var(--fg-danger);
}

.fg-select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a7a9b0'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	padding-right: 42px;
}

.fg-select--block {
	width: 100%;
}

.fg-dob {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

/* -----------------------------------------------------------------------------
 * Phone: a locked +44
 *
 * The prefix is a label, not a field. The gym is in Coventry, VoodooSMS only accepts a
 * UK mobile, and a visitor who types their own country code can only ever produce a
 * number that silently never receives a pass. It is joined to the input rather than
 * floated beside it, so it reads as one control.
 * -------------------------------------------------------------------------- */

.fg-phone {
	display: flex;
	align-items: stretch;
}

.fg-phone__prefix {
	display: flex;
	align-items: center;
	padding: 0 14px 0 18px;
	border: 2px solid var(--fg-line);
	border-right: 0;
	border-radius: var(--fg-radius) 0 0 var(--fg-radius);
	background: #26272d;
	color: var(--fg-ink-dim);
	font-size: 18px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	user-select: none;
}

.fg-phone__input {
	border-radius: 0 var(--fg-radius) var(--fg-radius) 0;
	min-width: 0;
	flex: 1;
}

/* Keep the seam intact when the field takes focus. */
.fg-phone:focus-within .fg-phone__prefix {
	border-color: var(--fg-teal);
	color: var(--fg-ink);
}

.fg-hint {
	margin: 6px 0 0;
	font-size: 0.82rem;
	color: var(--fg-ink-faint);
}

/* Off-screen, not display:none — the better bots read computed style. */
.fg-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * Checkboxes
 * -------------------------------------------------------------------------- */

.fg-check,
.fg-extra {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border-radius: var(--fg-radius);
	border: 2px solid var(--fg-line);
	background: var(--fg-bg-raise);
	cursor: pointer;
	transition: border-color 140ms var(--fg-ease);
}

.fg-check input,
.fg-extra input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fg-check__box {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 2px solid var(--fg-ink-faint);
	background: transparent;
	position: relative;
	transition: background-color 140ms var(--fg-ease), border-color 140ms var(--fg-ease);
}

.fg-check__box::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 4px;
	width: 7px;
	height: 13px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 140ms var(--fg-ease);
}

.fg-check input:checked ~ .fg-check__box,
.fg-extra input:checked ~ .fg-check__box {
	background: var(--fg-teal);
	border-color: var(--fg-teal);
}

.fg-check input:checked ~ .fg-check__box::after,
.fg-extra input:checked ~ .fg-check__box::after {
	transform: rotate(45deg) scale(1);
}

.fg-check input:focus-visible ~ .fg-check__box,
.fg-extra input:focus-visible ~ .fg-check__box {
	outline: 3px solid var(--fg-teal-hot);
	outline-offset: 2px;
}

.fg-check:has(input:checked),
.fg-extra:has(input:checked) {
	border-color: var(--fg-teal);
}

.fg-check__label {
	font-size: 1rem;
	line-height: 1.35;
}

.fg-check--consent .fg-check__label {
	font-size: 0.92rem;
	color: var(--fg-ink-dim);
}

.fg-extra__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.fg-extra__title {
	font-size: 1.05rem;
	font-weight: 800;
}

.fg-extra__desc {
	font-size: 0.88rem;
	color: var(--fg-ink-faint);
	line-height: 1.35;
}

/* -----------------------------------------------------------------------------
 * Yes / No toggle
 * -------------------------------------------------------------------------- */

.fg-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-radius: var(--fg-radius);
	border: 2px solid var(--fg-line);
	overflow: hidden;
}

.fg-toggle--three {
	grid-template-columns: repeat(3, 1fr);
}

.fg-toggle__option {
	position: relative;
	cursor: pointer;
}

.fg-toggle__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fg-toggle__option span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fg-tap);
	padding: 0 8px;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--fg-ink-dim);
	background: var(--fg-bg-raise);
	text-align: center;
	transition: background-color 140ms var(--fg-ease), color 140ms var(--fg-ease);
}

.fg-toggle__option input:checked + span {
	background: var(--fg-teal);
	color: #fff;
}

.fg-toggle__option input:focus-visible + span {
	outline: 3px solid var(--fg-teal-hot);
	outline-offset: -3px;
}

/* -----------------------------------------------------------------------------
 * Payment methods
 * -------------------------------------------------------------------------- */

.fg-amount-due {
	margin: 0;
	font-size: 1.15rem;
	color: var(--fg-ink-dim);
}

.fg-amount-due strong {
	color: var(--fg-ink);
	font-size: 1.4rem;
}

.fg-methods {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fg-method {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	min-height: var(--fg-tap);
	border-radius: var(--fg-radius);
	border: 2px solid var(--fg-line);
	background: var(--fg-bg-raise);
	cursor: pointer;
	transition: border-color 140ms var(--fg-ease), background-color 140ms var(--fg-ease);
}

.fg-method input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fg-method:has(input:checked) {
	border-color: var(--fg-orange);
	background: #2a2118;
}

.fg-method__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fg-method__label {
	font-size: 1.1rem;
	font-weight: 800;
}

.fg-method__hint {
	font-size: 0.85rem;
	color: var(--fg-ink-faint);
}

/* -----------------------------------------------------------------------------
 * Processing
 * -------------------------------------------------------------------------- */

.fg-spinner {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 5px solid rgba(255, 255, 255, 0.12);
	border-top-color: var(--fg-orange);
	animation: fg-spin 800ms linear infinite;
}

@keyframes fg-spin {
	to {
		transform: rotate(360deg);
	}
}

/* -----------------------------------------------------------------------------
 * Thank you / pass
 * -------------------------------------------------------------------------- */

.fg-qr {
	padding: 14px;
	background: #fff;             /* QR needs a light quiet zone to scan reliably */
	border-radius: var(--fg-radius);
	line-height: 0;
}

.fg-qr img {
	display: block;
	width: 260px;
	height: 260px;
	image-rendering: pixelated;   /* keep the modules crisp when upscaled */
}

.fg-pin {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--fg-ink-dim);
}

.fg-pin strong {
	color: var(--fg-ink);
	font-size: 2rem;
	letter-spacing: 0.14em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fg-reference {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--fg-ink-faint);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fg-pin-block {
	margin: 4px auto 0;
	padding: 14px 18px;
	max-width: 320px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	text-align: center;
}

.fg-pin-block__label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-ink-faint);
}

.fg-pin-block__code {
	margin: 4px 0 0;
	font-size: 2.1rem;
	font-weight: 800;
	letter-spacing: 0.32em;
	/* Trailing indent balances the letter-spacing so the code looks centred. */
	text-indent: 0.32em;
	color: var(--fg-orange-hot);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fg-pin-block__hint {
	margin: 6px 0 0;
	font-size: 0.8rem;
	color: var(--fg-ink-faint);
}

.fg-validity {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	justify-content: center;
	align-items: baseline;
}

.fg-validity__until {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--fg-orange-hot);
}

.fg-validity__show {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 800;
}

.fg-pay-warning {
	margin: 0;
	padding: 14px 18px;
	border-radius: var(--fg-radius);
	background: rgba(234, 106, 30, 0.14);
	border: 2px solid var(--fg-orange);
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
 * Idle warning
 * -------------------------------------------------------------------------- */

.fg-idle {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(5, 5, 7, 0.88);
	backdrop-filter: blur(3px);
	animation: fg-fade 180ms var(--fg-ease);
}

.fg-idle[hidden] {
	display: none;
}

.fg-idle__panel {
	width: 100%;
	max-width: 440px;
	padding: clamp(28px, 4vh, 40px) clamp(24px, 5vw, 34px);
	border-radius: var(--fg-radius-lg);
	background: var(--fg-bg-raise);
	border: 1px solid var(--fg-line);
	border-top: 5px solid var(--fg-brand);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 2.4vh, 22px);
}

.fg-idle__panel .fg-form-divider {
	margin: 0 auto;
}

.fg-idle__note {
	margin: 0;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, 3.4vw, 1.35rem);
	line-height: 1.45;
	color: var(--fg-ink-dim);
}

.fg-idle__count {
	display: inline-block;
	min-width: 1.6em;
	font-weight: 800;
	font-size: 1.5em;
	color: var(--fg-brand);
	font-variant-numeric: tabular-nums;
}

.fg-idle__panel .fg-cta {
	width: 100%;
	margin-top: 4px;
}

@keyframes fg-fade {
	from {
		opacity: 0;
	}
}

/* -----------------------------------------------------------------------------
 * Pass page & login (not the kiosk shell — these DO scroll)
 * -------------------------------------------------------------------------- */

.fg-kiosk-body--pass,
.fg-kiosk-body--login {
	overflow: auto;
	background:
		radial-gradient(120% 70% at 50% 0%, #2a2118 0%, transparent 60%),
		var(--fg-bg);
	min-height: 100%;
}

.fg-pass,
.fg-login {
	min-height: var(--fg-h);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 20px;
}

.fg-pass__inner,
.fg-login__panel {
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.fg-login__panel {
	align-items: stretch;
	text-align: center;
	padding: 30px 26px;
	border-radius: var(--fg-radius-lg);
	background: var(--fg-bg-raise);
	border: 2px solid var(--fg-line);
}

.fg-login .fg-form {
	text-align: left;
	margin-top: 8px;
}

.fg-pass__name {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
}

.fg-banner {
	width: 100%;
	padding: 16px 18px;
	border-radius: var(--fg-radius);
	border: 2px solid;
}

.fg-banner__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
}

.fg-banner__body {
	margin: 6px 0 0;
	font-size: 0.95rem;
}

.fg-banner--valid {
	border-color: var(--fg-teal);
	background: rgba(27, 163, 145, 0.14);
	color: var(--fg-teal-hot);
}

.fg-banner--unpaid {
	border-color: var(--fg-orange);
	background: rgba(234, 106, 30, 0.14);
	color: var(--fg-orange-hot);
}

.fg-banner--invalid {
	border-color: var(--fg-danger);
	background: rgba(214, 54, 56, 0.14);
	color: #ff8a8c;
}

/* -----------------------------------------------------------------------------
 * Reduced motion
 *
 * "reduce" means reduced, not removed: a step change with NO transition at all reads
 * as a glitch. Keep a cross-fade, drop the movement.
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fg-screen {
		transform: none !important;
		transition: opacity 120ms linear, visibility 0s linear 120ms;
	}

	.fg-screen[data-active] {
		transition-delay: 0s;
	}

	.fg-btn:active {
		transform: none;
	}

	.fg-spinner {
		animation-duration: 2s;
	}

	.fg-progress__bar {
		transition: none;
	}
}

/* -----------------------------------------------------------------------------
 * Responsive
 *
 * The same flow has to work on three quite different machines: a portrait kiosk screen
 * bolted to a wall, a phone in someone's hand on the bus, and a desktop browser. The
 * layout is one centred column at every size — what changes is the breathing room, not
 * the structure, because a walk-in visitor should recognise the same screens whichever
 * way they arrive.
 * -------------------------------------------------------------------------- */

/* --- Phone --- */
@media (max-width: 30rem) {
	:root {
		--fg-tap: 54px;
	}

	.fg-kiosk-body {
		font-size: 17px;
	}

	.fg-screen__inner {
		padding: 20px 16px 32px;
		gap: 15px;
	}

	.fg-title {
		font-size: 1.7rem;
	}

	.fg-title--hero {
		font-size: 2.1rem;
	}

	.fg-logo__word {
		font-size: 1.9rem;
	}

	.fg-logo--img {
		max-width: 200px;
	}

	.fg-price-card__amount {
		font-size: 2.8rem;
	}

	.fg-qr img {
		width: 220px;
		height: 220px;
	}

	/* Stack Skip/Continue rather than squeezing two buttons onto a narrow screen. */
	.fg-actions {
		flex-wrap: wrap;
	}

	.fg-actions .fg-btn {
		flex: 1 1 100%;
	}

	.fg-toggle--three {
		grid-template-columns: 1fr;
	}

	.fg-validity {
		flex-direction: column;
		gap: 4px;
	}
}

/* --- Desktop --- */
@media (min-width: 56rem) {
	.fg-screen__inner {
		max-width: 560px;
	}

	.fg-logo--img {
		max-width: 300px;
	}
}

/* --- Short viewports: landscape phone, split screen --- */
@media (max-height: 44rem) {
	:root {
		--fg-tap: 54px;
	}

	.fg-title--hero {
		font-size: 2rem;
	}

	.fg-price-card__amount {
		font-size: 2.4rem;
	}

	.fg-qr img {
		width: 190px;
		height: 190px;
	}

	.fg-logo__word {
		font-size: 1.8rem;
	}
}

/*
 * A mouse is not a finger. Hover states only exist for pointers that can hover — on a
 * touchscreen they stick after a tap and make a button look permanently pressed.
 */
@media (hover: hover) and (pointer: fine) {
	.fg-btn:hover {
		filter: brightness(1.08);
	}

	.fg-method:hover,
	.fg-extra:hover,
	.fg-check:hover {
		border-color: var(--fg-ink-faint);
	}
}

/* ---------------------------------------------------------------------------
 * Self-service check-in — "I have a booking" screen (since 1.2.0)
 * ------------------------------------------------------------------------ */

.fg-checkin {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 8px;
}

.fg-checkin__reader {
	background: var(--fg-bg-raise);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	padding: 12px;
	min-height: 56px;
	overflow: hidden;
}

/* Theme the injected html5-qrcode controls to the kiosk's dark palette. */
.fg-checkin__reader video,
.fg-checkin__reader img,
.fg-checkin__reader canvas {
	max-width: 100%;
	border-radius: 10px;
}

#fg-checkin-reader {
	color: var(--fg-ink-dim);
	font-size: 0.95rem;
}

#fg-checkin-reader button {
	background: radial-gradient(120% 130% at 50% 0%, var(--fg-brand-light) 0%, var(--fg-brand) 100%);
	color: #0f0f0f;
	border: 0;
	border-radius: 10px;
	padding: 10px 16px;
	margin: 6px 4px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

#fg-checkin-reader select {
	background: var(--fg-bg-sink);
	color: var(--fg-ink);
	border: 1px solid var(--fg-line);
	border-radius: 8px;
	padding: 8px;
	font: inherit;
}

#fg-checkin-reader a {
	color: var(--fg-brand);
}

.fg-checkin__or {
	display: flex;
	align-items: center;
	text-align: center;
	color: var(--fg-ink-faint);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.fg-checkin__or::before,
.fg-checkin__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--fg-line);
}

.fg-checkin__or span {
	padding: 0 12px;
}

.fg-input--center {
	text-align: center;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-weight: 700;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fg-checkin__result {
	margin-top: 4px;
	padding: 18px;
	border-radius: var(--fg-radius);
	text-align: center;
	border: 1px solid var(--fg-line);
	background: var(--fg-bg-raise);
}

.fg-checkin__result--valid {
	border-color: var(--fg-teal);
	background: rgba( 27, 163, 145, 0.14 );
}

.fg-checkin__result--invalid {
	border-color: var(--fg-danger);
	background: rgba( 214, 54, 56, 0.12 );
}

.fg-checkin__result-title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
}

.fg-checkin__result--valid .fg-checkin__result-title {
	color: var(--fg-teal-hot);
}

.fg-checkin__result--invalid .fg-checkin__result-title {
	color: var(--fg-danger);
}

.fg-checkin__result-msg {
	margin: 8px 0 0;
	color: var(--fg-ink-dim);
}

/* ===========================================================================
 * Welcome screen — Figma revamp (node 35:8). Self-hosted fonts + assets.
 * ======================================================================== */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/montserrat-700.woff2) format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/montserrat-700italic.woff2) format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 800;
	font-display: swap;
	src: url(../fonts/montserrat-800italic.woff2) format("woff2");
}
@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/roboto-condensed-700.woff2) format("woff2");
}
@font-face {
	font-family: "Roboto Condensed";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/roboto-condensed-600italic.woff2) format("woff2");
}

:root {
	--fg-brand: #e7931b;
	--fg-brand-light: #ffc739;
}

/* The welcome screen paints its own photo background and ignores the shell gradient. */
.fg-screen--welcome {
	background: #0f0f0f;
}

.fg-screen--welcome::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 62%;
	background:
		linear-gradient( to bottom, rgba(15, 15, 16, 0.55) 0%, rgba(15, 15, 16, 0.5) 24%, rgba(15, 15, 16, 0.82) 56%, #0f0f0f 88% ),
		url(../img/kiosk-welcome-bg.jpg) center top / cover no-repeat;
	z-index: 0;
	pointer-events: none;
}

.fg-welcome {
	position: relative;
	z-index: 1;
	min-height: 100%;
	max-width: 680px;
	margin: 0 auto;
	padding: clamp(36px, 5vh, 64px) 30px clamp(36px, 5vh, 60px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 3.4vh, 34px);
	text-align: center;
}

.fg-welcome__hero {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 2.4vh, 24px);
}

.fg-welcome__eyebrow {
	margin: 0;
	font-family: "Montserrat", system-ui, sans-serif;
	font-style: italic;
	font-weight: 800;
	font-size: clamp(2rem, 8.9vw, 4rem);
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--fg-brand);
}

.fg-welcome__logo {
	width: min(86%, 500px);
	height: auto;
	display: block;
}

.fg-welcome__city {
	margin: 0;
	font-family: "Montserrat", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.1rem, 4.4vw, 2rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
}

.fg-features {
	width: 100%;
	display: flex;
	gap: clamp(8px, 1.6vw, 14px);
}

.fg-feature {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(10px, 1.8vh, 16px);
	padding: clamp(14px, 2.4vh, 22px) clamp(6px, 1.4vw, 12px);
	background: rgba(0, 0, 0, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
}

.fg-feature__icon {
	width: clamp(48px, 8.6vw, 64px);
	height: clamp(48px, 8.6vw, 64px);
	object-fit: contain;
}

.fg-feature__label {
	margin: 0;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(0.9rem, 3.2vw, 1.5rem);
	line-height: 1.08;
	text-transform: uppercase;
	color: #fff;
}

.fg-welcome__divider {
	width: clamp(120px, 23vw, 168px);
	height: 5px;
	border-radius: 3px;
	background: var(--fg-brand);
}

.fg-welcome__pass {
	margin: 0;
	font-family: "Montserrat", system-ui, sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.8rem, 7.7vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
}

.fg-welcome__price {
	color: var(--fg-brand);
	white-space: nowrap;
}

.fg-welcome__actions {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2vh, 20px);
	margin-top: clamp(2px, 1vh, 10px);
}

.fg-cta {
	width: 100%;
	min-height: clamp(60px, 11vw, 88px);
	padding: 0 18px;
	border-radius: 12px;
	border: 0;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.25rem, 5.2vw, 2.5rem);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 120ms var(--fg-ease), filter 120ms var(--fg-ease);
}

.fg-cta:active {
	transform: scale(0.985);
}

.fg-cta--primary {
	background: radial-gradient(120% 130% at 50% 0%, var(--fg-brand-light) 0%, var(--fg-brand) 100%);
	color: #0f0f0f;
}

.fg-cta--outline {
	background: transparent;
	border: 2px solid var(--fg-brand);
	color: var(--fg-brand);
}

/* ===========================================================================
 * Form screens — Figma revamp (Registration node 35:267, Payment 35:418).
 * Scoped under .fg-screen--form so non-redesigned screens are untouched.
 * ======================================================================== */

.fg-screen--registration::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 46%;
	background:
		linear-gradient( to bottom, rgba(15, 15, 16, 0.5) 0%, rgba(15, 15, 16, 0.56) 30%, rgba(15, 15, 16, 0.9) 72%, #0f0f0f 92% ),
		url(../img/kiosk-welcome-bg.jpg) center top / cover no-repeat;
	z-index: 0;
	pointer-events: none;
}

.fg-form-wrap {
	position: relative;
	z-index: 1;
	min-height: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(26px, 4.5vh, 54px) 30px clamp(30px, 4vh, 48px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 2.4vh, 26px);
	text-align: center;
}

.fg-brandlogo {
	width: min(84%, 420px);
	height: auto;
	display: block;
}

.fg-form-title {
	margin: 0;
	font-family: "Montserrat", system-ui, sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.5rem, 5.6vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
}

.fg-form-divider {
	width: clamp(120px, 22vw, 168px);
	height: 5px;
	border-radius: 3px;
	background: var(--fg-brand);
}

.fg-screen--form .fg-form {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(12px, 1.8vh, 18px);
	text-align: left;
}

.fg-screen--form .fg-field {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.fg-screen--form .fg-input,
.fg-screen--form .fg-select {
	width: 100%;
	min-height: clamp(54px, 10.5vw, 80px);
	padding: 0 18px;
	border-radius: 12px;
	border: 2px solid rgba(255, 255, 255, 0.14);
	background-color: rgba(0, 0, 0, 0.28);
	color: #fff;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.05rem, 3.8vw, 1.75rem);
}

.fg-screen--form .fg-input::placeholder {
	color: #6a6a6a;
	opacity: 1;
	font-style: italic;
}

.fg-screen--form .fg-input:focus,
.fg-screen--form .fg-select:focus {
	outline: none;
	border-color: var(--fg-brand);
}

.fg-screen--form .fg-input[aria-invalid="true"],
.fg-screen--form .fg-select[aria-invalid="true"] {
	border-color: var(--fg-danger);
}

.fg-screen--form .fg-label {
	display: block;
	margin: 6px 0 10px;
	padding: 0;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.05rem, 3.6vw, 1.6rem);
	text-transform: uppercase;
	color: #fff;
}

.fg-screen--form .fg-dob {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(8px, 1.6vw, 14px);
}

.fg-screen--form .fg-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
}

/* Empty required select shows placeholder-grey until a real choice is made. */
.fg-screen--form .fg-select:invalid {
	color: #6a6a6a;
}

.fg-screen--form .fg-select option {
	color: #fff;
	background: #1e1f24;
	font-style: normal;
}

.fg-screen--form .fg-error {
	margin: 8px 0 0;
	text-align: left;
	color: var(--fg-danger);
	font-weight: 600;
}

.fg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(8px, 1.6vw, 12px);
}

.fg-chip {
	flex: 1 1 auto;
	min-width: 116px;
	min-height: clamp(48px, 8vw, 60px);
	padding: 0 16px;
	border: 2px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
	color: #0f0f0f;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(0.95rem, 3vw, 1.3rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: background 120ms var(--fg-ease), color 120ms var(--fg-ease), transform 120ms var(--fg-ease);
}

.fg-chip.is-selected {
	background: var(--fg-brand);
	border-color: var(--fg-brand-light);
	color: #0f0f0f;
}

.fg-chip:active {
	transform: scale(0.97);
}

/* The form screens keep their own gold CTA sized for a full-width form button. */
.fg-screen--form .fg-cta {
	margin-top: clamp(6px, 1.4vh, 14px);
}

/* ---------------------------------------------------------------------------
 * Payment screen — Figma revamp (node 35:418). Real methods, Figma card.
 * ------------------------------------------------------------------------ */

.fg-screen--payment::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 42%;
	background:
		linear-gradient( to bottom, rgba(15, 15, 16, 0.5) 0%, rgba(15, 15, 16, 0.55) 28%, rgba(15, 15, 16, 0.92) 74%, #0f0f0f 94% ),
		url(../img/kiosk-welcome-bg.jpg) center top / cover no-repeat;
	z-index: 0;
	pointer-events: none;
}

.fg-paycard {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
}

.fg-paycard__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: clamp(16px, 2.6vh, 22px) clamp(18px, 3.5vw, 26px);
	background: #efefef;
	border-bottom: 1px solid #d7d7d7;
}

.fg-paycard__total-label {
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(1.1rem, 3.8vw, 1.75rem);
	color: #0f0f0f;
}

.fg-paycard__total-amount {
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.2rem, 4.2vw, 1.9rem);
	color: #0f0f0f;
}

.fg-paycard__methods {
	padding: clamp(16px, 2.6vh, 22px) clamp(18px, 3.5vw, 26px);
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.8vh, 16px);
}

.fg-paymethod {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(56px, 10vw, 72px);
	padding: 0 16px;
	border: 1px solid #aaa;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color 120ms var(--fg-ease), background 120ms var(--fg-ease);
}

.fg-paymethod input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fg-paymethod__body {
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(1.05rem, 3.6vw, 1.6rem);
	color: #0f0f0f;
}

.fg-paymethod:has(input:checked) {
	border-color: var(--fg-brand);
	background: #fff6ea;
	box-shadow: inset 0 0 0 1px var(--fg-brand);
}

.fg-paymethod input:focus-visible + .fg-paymethod__body {
	outline: 2px solid var(--fg-brand);
	outline-offset: 4px;
}

.fg-agree {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	cursor: pointer;
	text-align: left;
}

.fg-agree input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fg-agree__box {
	flex: none;
	width: clamp(28px, 5vw, 34px);
	height: clamp(28px, 5vw, 34px);
	border: 2px solid #fff;
	border-radius: 8px;
	background: transparent center / 66% no-repeat;
	transition: background-color 120ms var(--fg-ease), border-color 120ms var(--fg-ease);
}

.fg-agree input:checked + .fg-agree__box {
	background-color: var(--fg-brand);
	border-color: var(--fg-brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f0f0f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E");
}

.fg-agree input:focus-visible + .fg-agree__box {
	outline: 2px solid var(--fg-brand);
	outline-offset: 3px;
}

.fg-agree__label {
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, 3.4vw, 1.4rem);
	line-height: 1.3;
	color: #fff;
}

.fg-error--center {
	text-align: center;
}

/* ===========================================================================
 * Remaining kiosk screens — Figma revamp + matching branding.
 * Health 37:953 / Extras 37:1092 / Thanks 41:179 / Fitness+Processing (brand).
 * ======================================================================== */

/* Shared photo header for the redesigned form/result screens. */
.fg-screen--health::before,
.fg-screen--fitness::before,
.fg-screen--extras::before,
.fg-screen--thanks::before,
.fg-screen--booking::before,
.fg-screen--error::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 44%;
	background:
		linear-gradient( to bottom, rgba(15, 15, 16, 0.5) 0%, rgba(15, 15, 16, 0.56) 28%, rgba(15, 15, 16, 0.9) 72%, #0f0f0f 93% ),
		url(../img/kiosk-welcome-bg.jpg) center top / cover no-repeat;
	z-index: 0;
	pointer-events: none;
}

.fg-form-wrap--center {
	justify-content: center;
}

/* Skip + Continue row */
.fg-screen--form .fg-actions {
	display: flex;
	gap: clamp(10px, 2vw, 16px);
	margin-top: clamp(6px, 1.4vh, 14px);
}

.fg-screen--form .fg-actions .fg-cta {
	margin-top: 0;
	flex: 1.4 1 0;
}

.fg-screen--form .fg-actions .fg-cta--outline {
	flex: 1 1 0;
}

/* Toggle switch (health Q1) */
.fg-switchrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.fg-switchrow .fg-label {
	margin: 0;
	flex: 1;
}

.fg-switch {
	position: relative;
	flex: none;
	display: inline-block;
	width: 76px;
	height: 40px;
	cursor: pointer;
}

.fg-switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.fg-switch__track {
	position: absolute;
	inset: 0;
	background: #3a3a42;
	border-radius: 999px;
	transition: background 160ms var(--fg-ease);
}

.fg-switch__knob {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #c9c9c9;
	transition: transform 160ms var(--fg-ease), background 160ms var(--fg-ease);
}

.fg-switch input:checked + .fg-switch__track {
	background: var(--fg-teal);
}

.fg-switch input:checked + .fg-switch__track .fg-switch__knob {
	transform: translateX(36px);
	background: #f0f0f0;
}

.fg-switch input:focus-visible + .fg-switch__track {
	outline: 2px solid var(--fg-brand);
	outline-offset: 2px;
}

/* Segmented control (Yes/No, Yes/Maybe/No) */
.fg-seg {
	display: flex;
	border: 2px solid var(--fg-line);
	border-radius: 12px;
	overflow: hidden;
}

.fg-seg__opt {
	flex: 1 1 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(52px, 9vw, 64px);
	padding: 0 8px;
	cursor: pointer;
	text-align: center;
}

.fg-seg__opt + .fg-seg__opt {
	border-left: 2px solid var(--fg-line);
}

.fg-seg__opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fg-seg__opt span {
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1rem, 3.4vw, 1.4rem);
	text-transform: uppercase;
	color: #fff;
}

.fg-seg__opt:has(input:checked) {
	background: var(--fg-teal);
}

.fg-seg__opt input:focus-visible + span {
	outline: 2px solid var(--fg-brand);
	outline-offset: 4px;
}

/* Textarea */
.fg-screen--form .fg-textarea {
	min-height: clamp(120px, 20vh, 180px);
	padding: 14px 18px;
	line-height: 1.4;
	resize: vertical;
}

/* Consent checkbox: long legal text, smaller */
.fg-agree--consent .fg-agree__label {
	font-size: clamp(0.82rem, 2.5vw, 1.02rem);
	line-height: 1.35;
	color: var(--fg-ink-dim);
}

/* Extras cards */
.fg-extra {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: clamp(12px, 2.4vw, 18px);
	padding: clamp(16px, 2.4vh, 22px) clamp(16px, 3vw, 22px);
	border: 2px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: border-color 120ms var(--fg-ease), background 120ms var(--fg-ease);
}

.fg-extra input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fg-extra__box {
	flex: none;
	width: clamp(28px, 5vw, 34px);
	height: clamp(28px, 5vw, 34px);
	margin-top: 2px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 8px;
	background: transparent center / 66% no-repeat;
	transition: background-color 120ms var(--fg-ease), border-color 120ms var(--fg-ease);
}

.fg-extra:has(input:checked) {
	border-color: var(--fg-brand);
	background: rgba(231, 147, 27, 0.09);
}

.fg-extra input:checked + .fg-extra__box {
	background-color: var(--fg-brand);
	border-color: var(--fg-brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f0f0f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E");
}

.fg-extra input:focus-visible + .fg-extra__box {
	outline: 2px solid var(--fg-brand);
	outline-offset: 3px;
}

.fg-extra__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.fg-extra__title {
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.05rem, 3.6vw, 1.5rem);
	text-transform: uppercase;
	line-height: 1.1;
	color: #fff;
}

.fg-extra__desc {
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(0.9rem, 2.8vw, 1.15rem);
	color: var(--fg-ink-faint);
}

/* Status screens (processing) */
.fg-screen--status {
	background: #0f0f0f;
}

.fg-status {
	position: relative;
	z-index: 1;
	min-height: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 40px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 3vh, 30px);
	text-align: center;
}

.fg-status .fg-brandlogo {
	width: min(80%, 380px);
}

.fg-status__note {
	margin: 0;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, 3.4vw, 1.4rem);
	color: var(--fg-ink-dim);
}

.fg-status__msg {
	margin: 0;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(1.05rem, 3.6vw, 1.5rem);
	color: var(--fg-danger);
}

.fg-spinner {
	width: clamp(52px, 12vw, 72px);
	height: clamp(52px, 12vw, 72px);
	border-radius: 50%;
	border: 6px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--fg-brand);
	animation: fg-spin 0.9s linear infinite;
}

@keyframes fg-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Thank-you pass card */
.fg-passcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(12px, 2vh, 18px);
}

.fg-passcard__qr {
	background: #fff;
	padding: clamp(14px, 2.6vw, 22px);
	border-radius: 20px;
	line-height: 0;
}

.fg-passcard__qr img {
	width: clamp(220px, 58vw, 320px);
	height: auto;
	display: block;
}

.fg-passcard__pin {
	margin: 0;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(1.2rem, 4.4vw, 1.9rem);
	color: #fff;
}

.fg-passcard__pin strong {
	font-weight: 700;
	letter-spacing: 0.08em;
}

.fg-passcard__valid {
	margin: 0;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.1rem, 4vw, 1.7rem);
	text-transform: uppercase;
	color: var(--fg-brand);
}

.fg-passcard__show {
	margin: 0;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.05rem, 3.8vw, 1.6rem);
	text-transform: uppercase;
	color: #fff;
}

.fg-passcard__note {
	margin: 0;
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(0.9rem, 3vw, 1.2rem);
	color: var(--fg-ink-faint);
}

.fg-pay-warning {
	margin: 0;
	font-weight: 700;
	color: var(--fg-brand);
}

/* Phone field with a fixed +44 prefix (registration). */
.fg-screen--form .fg-phone {
	display: flex;
	align-items: stretch;
	border: 2px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.28);
	overflow: hidden;
}

.fg-screen--form .fg-phone:focus-within {
	border-color: var(--fg-brand);
}

.fg-screen--form .fg-phone:has(.fg-input[aria-invalid="true"]) {
	border-color: var(--fg-danger);
}

.fg-screen--form .fg-phone__prefix {
	display: flex;
	align-items: center;
	padding: 0 16px;
	background: rgba(255, 255, 255, 0.06);
	border-right: 2px solid rgba(255, 255, 255, 0.14);
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.05rem, 3.8vw, 1.75rem);
	color: #fff;
}

.fg-screen--form .fg-phone__input {
	flex: 1;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.fg-screen--form .fg-phone__input:focus {
	border: 0;
}

/* ===========================================================================
 * User-feedback additions — Back button, Terms & Conditions pop-up, marketing.
 * ======================================================================== */

/* Back button — a quiet control at the top-left of each form step. */
.fg-back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: -8px 0 -2px;
	padding: 6px 12px 6px 0;
	border: 0;
	background: none;
	color: var(--fg-ink-dim);
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(0.95rem, 3vw, 1.1rem);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: color 120ms var(--fg-ease);
}

.fg-back:hover,
.fg-back:focus-visible {
	color: var(--fg-ink);
}

.fg-back:focus-visible {
	outline: 2px solid var(--fg-brand);
	outline-offset: 3px;
	border-radius: 8px;
}

.fg-back span {
	font-size: 1.25em;
	line-height: 1;
}

/* "Read the Terms & Conditions" opens the pop-up; styled as a plain link. */
.fg-agree__readlink {
	margin: 2px 0 0;
}

.fg-link {
	display: inline;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--fg-brand);
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(0.95rem, 3.2vw, 1.2rem);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.fg-link:hover,
.fg-link:focus-visible {
	color: var(--fg-brand-light, var(--fg-orange-hot));
}

.fg-link:focus-visible {
	outline: 2px solid var(--fg-brand);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Marketing opt-in sits slightly apart from the required terms agreement. */
.fg-agree--marketing {
	margin-top: 4px;
}

.fg-agree--marketing .fg-agree__label {
	color: var(--fg-ink-dim);
	font-size: clamp(0.92rem, 3vw, 1.2rem);
}

/* Terms & Conditions pop-up — mirrors the idle modal, with a scrollable body. */
.fg-terms {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(5, 5, 7, 0.88);
	backdrop-filter: blur(3px);
	animation: fg-fade 180ms var(--fg-ease);
}

.fg-terms[hidden] {
	display: none;
}

.fg-terms__panel {
	position: relative;
	width: 100%;
	max-width: 620px;
	max-height: 86vh;
	max-height: 86dvh;
	padding: clamp(24px, 4vh, 34px);
	border-radius: var(--fg-radius-lg);
	background: var(--fg-bg-raise);
	border: 1px solid var(--fg-line);
	border-top: 5px solid var(--fg-brand);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fg-terms__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--fg-ink-dim);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.fg-terms__close:hover,
.fg-terms__close:focus-visible {
	color: var(--fg-ink);
}

.fg-terms__body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-right: 6px;
	color: var(--fg-ink);
	font-family: "Roboto Condensed", system-ui, sans-serif;
	font-size: clamp(1rem, 3vw, 1.2rem);
	line-height: 1.55;
	text-align: left;
}

.fg-terms__body :first-child {
	margin-top: 0;
}

.fg-terms__body h1,
.fg-terms__body h2,
.fg-terms__body h3 {
	margin: 0 0 12px;
	font-weight: 700;
	font-size: clamp(1.25rem, 4.5vw, 1.7rem);
	color: #fff;
}

.fg-terms__body p,
.fg-terms__body ul,
.fg-terms__body ol {
	margin: 0 0 12px;
	color: var(--fg-ink-dim);
}

.fg-terms__body ul,
.fg-terms__body ol {
	padding-left: 1.3em;
}

.fg-terms__body a {
	color: var(--fg-brand);
}

.fg-terms__done {
	flex: none;
	width: 100%;
}