/**
 * /register-now/ — discount entry in the order rail, and a CTA that reports
 * its own progress.
 *
 * The rail is a dark card carrying mint, crimson and gold. The coupon controls
 * borrow that world but stay deliberately quiet: the red CTA below is the
 * primary action, and a discount field competing with it would be the loudest
 * thing on the card for the smallest reason.
 */

.abf-reg-coupon {
	margin: 0 0 14px;
}

/* Inputs and buttons do not inherit the page face by default, which is the only
   reason to declare one here. Inherit rather than pin a family, so these
   controls follow the rail instead of introducing a second voice into it. */
.abf-reg-coupon input[type="text"],
.abf-reg-coupon .abf-reg-coupon__apply {
	font-family: inherit;
}

.abf-reg-coupon .abf-reg-coupon__label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba( 255, 255, 255, 0.62 );
}

.abf-reg-coupon .abf-reg-coupon__row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.abf-reg-coupon input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: 2px;
	background: rgba( 255, 255, 255, 0.05 );
	color: #ffffff;
	/* 16px is a functional floor, not a type choice: iOS Safari force-zooms the
	   viewport on focus for anything smaller, which throws the buyer out of the
	   rail mid-checkout. Most of this audience is on a phone. */
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: border-color 0.16s ease, background 0.16s ease;
}

.abf-reg-coupon input[type="text"]::placeholder {
	color: rgba( 255, 255, 255, 0.42 );
	letter-spacing: 0.02em;
	text-transform: none;
}

.abf-reg-coupon input[type="text"]:hover {
	border-color: rgba( 255, 255, 255, 0.3 );
}

.abf-reg-coupon input[type="text"]:focus {
	outline: 2px solid #5fe0b0;
	outline-offset: 1px;
	border-color: transparent;
	background: rgba( 255, 255, 255, 0.08 );
}

.abf-reg-coupon .abf-reg-coupon__apply {
	flex: 0 0 auto;
	padding: 10px 16px;
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	border-radius: 2px;
	background: transparent;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease;
}

.abf-reg-coupon .abf-reg-coupon__apply:hover:not( [disabled] ) {
	border-color: rgba( 255, 255, 255, 0.5 );
	background: rgba( 255, 255, 255, 0.08 );
}

.abf-reg-coupon .abf-reg-coupon__apply:focus-visible {
	outline: 2px solid #5fe0b0;
	outline-offset: 2px;
}

.abf-reg-coupon .abf-reg-coupon__apply[disabled] {
	opacity: 0.6;
	cursor: default;
}

.abf-reg-coupon .abf-reg-coupon__msg {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
}

/* Both clear AA on the rail's near-black card; the checkout page's original
   inks were light-page colours and measured about 3:1 here. */
.abf-reg-coupon .abf-reg-coupon__msg.is-good {
	color: #5fe0b0;
}

.abf-reg-coupon .abf-reg-coupon__msg.is-bad {
	color: #ff7a93;
}

/* The saving the code produced, stated next to the price it changed. */
.abf-rail-disc {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #5fe0b0;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- CTA state */

.abf-do-submit .abf-cta--busy {
	pointer-events: none;
}

.abf-do-submit .abf-cta--busy .elementor-button-content-wrapper,
.abf-do-submit .abf-cta--busy .elementor-button-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.abf-do-submit .abf-cta--busy .elementor-button-text::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	border: 2px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: abf-cta-spin 0.7s linear infinite;
}

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

/* Motion is the signal here, so it cannot simply be removed: hold the ring
   still and let the changed label carry the message instead. */
@media ( prefers-reduced-motion: reduce ) {
	.abf-do-submit .abf-cta--busy .elementor-button-text::before {
		animation: none;
		border-top-color: rgba( 255, 255, 255, 0.35 );
	}
}