/**
 * ABF checkout — /pay/
 *
 * This page lives in the ABF dark world (#050007), the same one the tickets and
 * registration pages occupy. An earlier version of this file styled it as a LIGHT
 * surface, which put a pale card on an obsidian page and is what made the page
 * read as unfinished. The surface treatment here is the incumbent `.abf-summary`
 * from the registration page — the same gradient, the same 16px radius, the same
 * 1px rgba(255,255,255,.16) hairline — so step 2 of the funnel looks like step 1.
 *
 * Every selector is self-nested under `.abf-pay`. `.elementor-kit-16330 a` is
 * specificity 0-0-1-1 and ties a bare `.abf-pay__x a`, then wins on source order,
 * repainting every link the kit's gold. Media-query selectors are nested too, or
 * they lose to the stronger base rules below.
 *
 * Contrast, measured against the card ground #0A0410:
 *   #FFFFFF  20.2:1   #A79FB8  7.99:1   #857D96  5.18:1   #FDDB00 14.75:1
 *   #EF003D   4.57:1  — passes as text here, but only just; never on a lighter ground.
 * White on a solid #EF003D fill is 4.43:1 and FAILS, which is why no control in
 * this file uses a flat crimson fill behind white text.
 */

.abf-pay {
	/* Surfaces */
	--pay-surface: linear-gradient( 160deg, #11070d, #0a0410 );
	--pay-ground: #0a0410;
	--pay-raise: rgba( 255, 255, 255, 0.04 );
	--pay-raise-hi: rgba( 255, 255, 255, 0.07 );
	--pay-line: rgba( 255, 255, 255, 0.16 );
	--pay-line-soft: rgba( 255, 255, 255, 0.09 );

	/* Ink */
	--pay-ink: #ffffff;
	--pay-body: #a79fb8;
	--pay-muted: #857d96;

	/* Brand */
	--pay-crimson: #ef003d;
	--pay-gold: #fddb00;
	--pay-magenta: #dc49e2;
	--pay-energy: linear-gradient( 90deg, #dc49e2 0%, #ef003d 38%, #fe4600 68%, #fddb00 100% );

	/* Motion — the site's curve, not a new one. */
	--pay-ease: cubic-bezier( 0.2, 0.7, 0.2, 1 );

	--pay-display: Povlar, "Area Extended", "Space Grotesk", system-ui, sans-serif;
	--pay-text: Inter, Onest, system-ui, -apple-system, sans-serif;

	max-width: 1040px;
	margin: 0 auto;
	padding: 0 20px;
	font-family: var( --pay-text );
	color: var( --pay-body );
	text-align: left;
}

/* Kit overrides that reach inside the component.
   The kit uppercases headings and forces a fill on every SVG, which turned the
   drawn icons into solid blocks and the panel headings into tracked-out caps.
   Both are corrected here rather than by weakening the kit for the whole site. */
.abf-pay .abf-pay__title,
.abf-pay .abf-pay__headline,
.abf-pay .abf-pay__panel-title,
.abf-pay .abf-pay__method-name {
	text-transform: none;
}

.abf-pay svg {
	fill: none;
	stroke: currentColor;
}

/* Browser surfaces — the parts we did not draw still belong to the design. */
.abf-pay ::selection {
	background: rgba( 239, 0, 61, 0.32 );
	color: #ffffff;
}

.abf-pay :focus-visible {
	outline: 2px solid var( --pay-gold );
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------- steps ---
 * Registration says "Step 1 of 2: your details · Step 2: secure payment", then
 * hands the buyer here with no indication they are in the same flow. This is the
 * other half of that sentence.
 */

.abf-pay .abf-pay__steps {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

.abf-pay .abf-pay__step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var( --pay-muted );
}

.abf-pay .abf-pay__step-dot {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 1px solid var( --pay-line );
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: var( --pay-muted );
}

.abf-pay .abf-pay__step--done {
	color: var( --pay-body );
}

.abf-pay .abf-pay__step--done .abf-pay__step-dot {
	border-color: rgba( 253, 219, 0, 0.5 );
	background: rgba( 253, 219, 0, 0.12 );
	color: var( --pay-gold );
}

.abf-pay .abf-pay__step--now {
	color: var( --pay-ink );
	font-weight: 600;
}

.abf-pay .abf-pay__step--now .abf-pay__step-dot {
	border-color: var( --pay-crimson );
	background: rgba( 239, 0, 61, 0.16 );
	color: #ff5c81;
}

.abf-pay .abf-pay__step-rule {
	flex: 1 1 auto;
	max-width: 56px;
	height: 1px;
	background: var( --pay-line-soft );
}

/* ------------------------------------------------------------ masthead --- */

.abf-pay .abf-pay__title {
	margin: 0 0 10px;
	font-family: var( --pay-display );
	font-size: clamp( 32px, 5vw, 48px );
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.0125em;
	color: var( --pay-ink );
	text-wrap: balance;
}

.abf-pay .abf-pay__lede {
	margin: 0 0 30px;
	max-width: 56ch;
	font-size: 15px;
	line-height: 1.6;
	color: var( --pay-body );
	text-wrap: pretty;
}

/* ---------------------------------------------------------------- grid --- */

.abf-pay .abf-pay__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 20px;
	align-items: start;
}

/* Without this the `fr` tracks floor at min-content, the long method note widens
   the left column, and the price overflows the rail. */
.abf-pay .abf-pay__main,
.abf-pay .abf-pay__aside {
	min-width: 0;
}

.abf-pay .abf-pay__panel {
	position: relative;
	border: 1px solid var( --pay-line );
	border-radius: 16px;
	background: var( --pay-surface );
	padding: 24px;
	overflow: hidden;
}

/* The energy gradient is the one mark that could belong to no other product.
   One hairline, on the order rail only — not repeated on every surface. */
.abf-pay .abf-pay__edge {
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var( --pay-energy );
}

.abf-pay .abf-pay__panel-title {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var( --pay-ink );
}

/* ----------------------------------------------------------- order rail --- */

.abf-pay .abf-pay__line {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 6px;
}

.abf-pay .abf-pay__pass {
	min-width: 0;
	font-family: var( --pay-display );
	font-size: 18px;
	font-weight: 400;
	line-height: 1.25;
	color: var( --pay-ink );
}

.abf-pay .abf-pay__price {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: clamp( 24px, 2.4vw, 30px );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var( --pay-ink );
	font-variant-numeric: tabular-nums;
}

.abf-pay .abf-pay__was {
	margin-right: 0;
	margin-bottom: 3px;
	font-size: 16px;
	font-weight: 500;
	color: var( --pay-muted );
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.abf-pay .abf-pay__saving {
	display: inline-block;
	margin: 0 0 18px;
	padding: 5px 10px;
	border: 1px solid rgba( 253, 219, 0, 0.34 );
	border-radius: 999px;
	background: rgba( 253, 219, 0, 0.1 );
	font-size: 12px;
	line-height: 1.4;
	color: var( --pay-gold );
}

.abf-pay .abf-pay__meta {
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid var( --pay-line-soft );
}

.abf-pay .abf-pay__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 7px 0;
}

.abf-pay .abf-pay__row dt {
	flex: 0 0 auto;
	font-size: 12px;
	color: var( --pay-muted );
}

.abf-pay .abf-pay__row dd {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	text-align: right;
	color: var( --pay-body );
	overflow-wrap: anywhere;
}

.abf-pay .abf-pay__correct {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var( --pay-line-soft );
	font-size: 12px;
	color: var( --pay-muted );
}

.abf-pay .abf-pay__correct a,
.abf-pay .abf-pay__body a {
	color: var( --pay-ink );
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.34 );
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color 160ms var( --pay-ease );
}

.abf-pay .abf-pay__correct a:hover,
.abf-pay .abf-pay__body a:hover {
	text-decoration-color: var( --pay-gold );
}

/* -------------------------------------------------------------- methods ---
 * Two genuine alternatives, weighted equally. Neither is styled as the primary
 * action: a flat crimson fill behind white text measures 4.43:1 and fails AA, and
 * making one method louder than the other is a claim about the buyer's wallet we
 * have no basis for.
 */

.abf-pay .abf-pay__methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.abf-pay .abf-pay__method {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 68px;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var( --pay-line-soft );
	border-radius: 12px;
	background: var( --pay-raise );
	font: inherit;
	color: inherit;
	text-align: left;
	/* Buttons inherit nowrap from the theme reset, which held the method note on a
	   single line and clipped it at the panel edge. */
	white-space: normal;
	cursor: pointer;
	transition:
		border-color 200ms var( --pay-ease ),
		background-color 200ms var( --pay-ease ),
		transform 200ms var( --pay-ease );
}

.abf-pay .abf-pay__method:hover:not( [disabled] ) {
	border-color: rgba( 239, 0, 61, 0.6 );
	background: var( --pay-raise-hi );
	transform: translateY( -2px );
}

.abf-pay .abf-pay__method:active:not( [disabled] ) {
	transform: translateY( 0 ) scale( 0.995 );
}

.abf-pay .abf-pay__method[disabled] {
	cursor: default;
	opacity: 0.55;
}

.abf-pay .abf-pay__method-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var( --pay-line-soft );
	border-radius: 10px;
	background: rgba( 255, 255, 255, 0.03 );
	color: var( --pay-ink );
	transition: border-color 200ms var( --pay-ease ), color 200ms var( --pay-ease );
}

.abf-pay .abf-pay__method:hover:not( [disabled] ) .abf-pay__method-icon {
	border-color: rgba( 239, 0, 61, 0.45 );
	color: #ff5c81;
}

.abf-pay .abf-pay__method-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.abf-pay .abf-pay__method-main {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	white-space: normal;
}

.abf-pay .abf-pay__method-name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --pay-ink );
}

.abf-pay .abf-pay__method-note {
	font-size: 12px;
	line-height: 1.45;
	color: var( --pay-muted );
	white-space: normal;
	overflow-wrap: anywhere;
}

.abf-pay .abf-pay__method-go {
	flex: 0 0 auto;
	margin-left: auto;
	color: var( --pay-muted );
	transition: transform 200ms var( --pay-ease ), color 200ms var( --pay-ease );
}

.abf-pay .abf-pay__method-go svg {
	display: block;
	width: 16px;
	height: 16px;
}

.abf-pay .abf-pay__method:hover:not( [disabled] ) .abf-pay__method-go {
	transform: translateX( 4px );
	color: var( --pay-ink );
}

/* The authored moment: the wait between choosing a method and arriving at the
   gateway. Creating a session is a real round trip — measured at ~4s — so the
   button states that fact rather than going quiet. */
.abf-pay .abf-pay__method[data-abf-busy="1"] .abf-pay__method-go {
	transform: none;
}

.abf-pay .abf-pay__spinner {
	display: block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 255, 255, 255, 0.22 );
	border-top-color: var( --pay-ink );
	border-radius: 999px;
	animation: abf-pay-spin 640ms linear infinite;
}

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

.abf-pay .abf-pay__secure {
	margin: 14px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: var( --pay-muted );
}

.abf-pay .abf-pay__error {
	margin: 12px 0 0;
	padding: 11px 13px;
	border: 1px solid rgba( 239, 0, 61, 0.5 );
	border-radius: 10px;
	background: rgba( 239, 0, 61, 0.1 );
	font-size: 13px;
	line-height: 1.5;
	color: #ffb3c4;
}

.abf-pay .abf-pay__error[hidden] {
	display: none;
}

/* -------------------------------------------------- free / unknown states --- */

.abf-pay .abf-pay__headline {
	margin: 0 0 8px;
	font-family: var( --pay-display );
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	color: var( --pay-ink );
	text-wrap: balance;
}

.abf-pay .abf-pay__body {
	margin: 0 0 14px;
	max-width: 60ch;
	font-size: 14px;
	line-height: 1.6;
	color: var( --pay-body );
	text-wrap: pretty;
}

.abf-pay .abf-pay__body--muted {
	color: var( --pay-muted );
	font-size: 13px;
}

.abf-pay .abf-pay__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 26px;
	border: 1px solid var( --pay-ink );
	border-radius: 0;
	background: var( --pay-ink );
	color: #0a0410;
	font-family: var( --pay-text );
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform 200ms var( --pay-ease ), background-color 200ms var( --pay-ease );
}

.abf-pay .abf-pay__btn:hover {
	transform: translateY( -2px );
	background: #f0ecf7;
}

.abf-pay .abf-pay__btn--ghost {
	background: transparent;
	border-color: var( --pay-line );
	color: var( --pay-ink );
}

.abf-pay .abf-pay__btn--ghost:hover {
	background: var( --pay-raise-hi );
	border-color: var( --pay-ink );
}

/* Liveet renders its own button. It stays in the DOM because its script needs a
   mount point, but the visible affordance is our method row, which clicks it. */
.abf-liveet {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
}

/* --------------------------------------------------------- responsive --- */

@media ( max-width: 900px ) {
	.abf-pay .abf-pay__grid {
		grid-template-columns: 1fr;
	}

	/* Order first on narrow screens: confirm what is being bought, then act. */
	.abf-pay .abf-pay__aside {
		order: -1;
	}
}

@media ( max-width: 560px ) {
	.abf-pay {
		padding: 0 16px;
	}

	.abf-pay .abf-pay__panel {
		padding: 18px 16px;
	}

	.abf-pay .abf-pay__price {
		font-size: 26px;
	}

	.abf-pay .abf-pay__line {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.abf-pay .abf-pay__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.abf-pay .abf-pay__row dd {
		text-align: left;
	}

	.abf-pay .abf-pay__steps {
		font-size: 12px;
	}

	.abf-pay .abf-pay__step-rule {
		max-width: 24px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.abf-pay .abf-pay__method,
	.abf-pay .abf-pay__method-go,
	.abf-pay .abf-pay__method-icon,
	.abf-pay .abf-pay__btn,
	.abf-pay .abf-pay__correct a,
	.abf-pay .abf-pay__body a {
		transition-property: border-color, background-color, color, text-decoration-color;
	}

	.abf-pay .abf-pay__method:hover:not( [disabled] ),
	.abf-pay .abf-pay__btn:hover {
		transform: none;
	}

	.abf-pay .abf-pay__spinner {
		animation-duration: 1600ms;
	}
}

/* Coupon entry, directly above the pay buttons. */
.abf-pay .abf-pay__coupon{margin:0 0 1rem}
.abf-pay .abf-pay__coupon-label{display:block;font-size:.85rem;font-weight:600;color:#574F62;margin:0 0 .4rem}
.abf-pay .abf-pay__coupon-row{display:flex;gap:.5rem}
.abf-pay .abf-pay__coupon-row input{flex:1;min-width:0;height:44px;padding:0 .75rem;border:1px solid #E4DFEE;border-radius:8px;background:#fff;color:#1A0022;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}
.abf-pay .abf-pay__coupon-row input:focus{outline:2px solid #7B0FD7;outline-offset:1px;border-color:#7B0FD7}
.abf-pay .abf-pay__coupon-apply{height:44px;padding:0 1.1rem;border:1px solid #1A0022;border-radius:8px;background:#fff;color:#1A0022;font-size:.9rem;font-weight:600;cursor:pointer}
.abf-pay .abf-pay__coupon-apply:hover{background:#1A0022;color:#fff}
.abf-pay .abf-pay__coupon-apply:disabled{opacity:.55;cursor:default}
.abf-pay .abf-pay__coupon-msg{margin:.5rem 0 0;font-size:.85rem}
.abf-pay .abf-pay__coupon-msg.is-good{color:#5FE0B0}
.abf-pay .abf-pay__coupon-msg.is-bad{color:#FF7A93}

/* Discount applied. Sits beside the early-bird pill rather than replacing it,
   so a buyer sees both reductions and can add them up. Mint reads as money off
   against the gold of the standing offer, and clears 11:1 on the dark ground -
   the old #046B60 was a light-page ink and measured about 3:1 here. */
.abf-pay .abf-pay__discount {
	display: inline-block;
	margin: 0 0 18px;
	padding: 5px 10px;
	border: 1px solid rgba( 95, 224, 176, 0.34 );
	border-radius: 999px;
	background: rgba( 95, 224, 176, 0.1 );
	font-size: 12px;
	line-height: 1.4;
	color: #5FE0B0;
	font-variant-numeric: tabular-nums;
}

/* Two pills are one group: tighten the gap between them, keep the separation
   before the order details below. */
/* Setting display on this element outranks the browser's own [hidden] rule, so
   the hidden attribute silently stopped working and an empty pill rendered under
   the early-bird chip. Any class that sets display must restate it. */
.abf-pay .abf-pay__discount[hidden] {
	display: none;
}

.abf-pay .abf-pay__saving:has( + .abf-pay__discount:not( [hidden] ) ) {
	margin-bottom: 8px;
}

/* ---------- receipt: what a buyer sees returning from a gateway ---------- */
.abf-rcpt{max-width:640px;margin:0 auto;padding:8px 0 12px;}
.abf-rcpt__mark{width:56px;height:56px;color:#BEFFDC;display:block;margin-bottom:22px;}
.abf-rcpt__title{font-family:Povlar,sans-serif;font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.03em;color:#fff;margin:0 0 14px;}
.abf-rcpt__lead{font-size:17px;line-height:1.55;color:#D9D9D9;margin:0 0 26px;max-width:52ch;}
.abf-rcpt__short{background:rgba(253,219,0,.1);border:1px solid rgba(253,219,0,.35);border-radius:12px;padding:14px 16px;color:#FDDB00;font-size:14.5px;line-height:1.5;margin:0 0 24px;}
.abf-rcpt__meta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:14px;overflow:hidden;margin:0 0 26px;}
.abf-rcpt__meta>div{background:#0A0410;padding:16px 18px;}
.abf-rcpt__meta dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8C929A;margin:0 0 6px;}
.abf-rcpt__meta dd{margin:0;font-size:15.5px;color:#fff;word-break:break-word;}
.abf-rcpt__meta code{font-family:Space Mono,ui-monospace,monospace;font-size:12.5px;color:#BEFFDC;}
.abf-rcpt__next{border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:20px 22px;margin:0 0 22px;}
.abf-rcpt__k{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8C929A;margin-bottom:12px;}
.abf-rcpt__next ol{margin:0;padding:0;list-style:none;counter-reset:r;}
.abf-rcpt__next li{counter-increment:r;position:relative;padding-left:30px;margin-bottom:10px;font-size:15px;line-height:1.5;color:#D9D9D9;}
.abf-rcpt__next li:last-child{margin-bottom:0;}
.abf-rcpt__next li::before{content:counter(r);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:#EF003D;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.abf-rcpt__help{font-size:14px;line-height:1.55;color:#8C929A;margin:0;}
.abf-rcpt__help a{color:#BEFFDC;}
@media(max-width:600px){.abf-rcpt__meta{grid-template-columns:1fr;}}

/* abf-rcpt-override: the theme forces uppercase + a dark colour on h1, and sizes
   bare svg from font-size. Both win on specificity, so state these outright. */
.abf-rcpt .abf-rcpt__title{color:#FFFFFF!important;text-transform:none!important;font-family:Povlar,sans-serif!important;letter-spacing:-.03em!important;line-height:1.05!important;}
.abf-rcpt svg.abf-rcpt__mark{width:56px!important;height:56px!important;max-width:56px!important;color:#BEFFDC!important;}
.abf-rcpt .abf-rcpt__lead{color:#D9D9D9!important;}
.abf-rcpt .abf-rcpt__meta dd{color:#FFFFFF!important;}
.abf-rcpt .abf-rcpt__meta dt,.abf-rcpt .abf-rcpt__k{color:#8C929A!important;}
.abf-rcpt .abf-rcpt__next li{color:#D9D9D9!important;}