/**
 * MDLA Events registration wizard — frontend styles (dark / native to the
 * single-event "Register" band).
 *
 * Brand-conformance notes
 * -----------------------
 * The wizard renders inside the single-event "Register" band, which the theme
 * paints dark (`.mdla-event-section--register { background: #0f0f0f; color:
 * #fff }`). The wizard is styled as a dark panel so it reads as part of that
 * band rather than a foreign white popover — mirroring the theme's own
 * dark-band FluentForm treatment (translucent-white input fills, gold focus).
 *
 * Although the band force-colors descendant `p, li, h2` white (which is now
 * *correct* on a dark card), every color-bearing rule is still scoped under
 * `.mdla-wizard` and set explicitly. This keeps the card deterministic and
 * portable: a dark card reads correctly whether the host page is dark or light.
 *
 * Palette = MDLA brand tokens (mirrors the theme's `--tok-*`): crimson accent
 * (#b8202e, brightening to #cf2331 on hover for dark-ground affordance), gold
 * (#c9a44c), ink ground, warm paper text. No teal/green.
 */

.mdla-wizard {
	--mdla-wizard-font: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Dark ground — card barely lifts off the #0f0f0f band; panels lift again. */
	--mdla-wizard-bg: #141414;
	--mdla-wizard-panel: rgba( 255, 255, 255, 0.05 );
	--mdla-wizard-panel-border: rgba( 255, 255, 255, 0.12 );
	--mdla-wizard-border: rgba( 255, 255, 255, 0.16 );

	/* Text on dark. */
	--mdla-wizard-ink: #f6f3ec;
	--mdla-wizard-muted: rgba( 255, 255, 255, 0.62 );

	/* Brand. */
	--mdla-wizard-accent: #b8202e;
	--mdla-wizard-accent-hover: #cf2331;
	--mdla-wizard-accent-soft: rgba( 184, 32, 46, 0.18 );
	--mdla-wizard-gold: #c9a44c;
	--mdla-wizard-gold-soft: rgba( 201, 164, 76, 0.16 );

	/* Form controls — mirrors the theme's dark-band FluentForm treatment. */
	--mdla-wizard-input-bg: rgba( 255, 255, 255, 0.06 );
	--mdla-wizard-input-bg-focus: rgba( 255, 255, 255, 0.1 );
	--mdla-wizard-input-border: rgba( 255, 255, 255, 0.22 );

	/* Status. */
	--mdla-wizard-danger: #ffb3b3;
	--mdla-wizard-danger-soft: rgba( 207, 35, 49, 0.14 );

	font-family: var(--mdla-wizard-font);
	color: var(--mdla-wizard-ink);
	background: var(--mdla-wizard-bg);
	border: 1px solid var(--mdla-wizard-border);
	border-radius: 10px;
	padding: 28px;
	max-width: 920px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba( 0, 0, 0, 0.45 );
}

/* Brand top stripe — crimson into gold, the band's signature accent. */
.mdla-wizard::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(
		90deg,
		var(--mdla-wizard-accent) 0%,
		var(--mdla-wizard-accent) 64%,
		var(--mdla-wizard-gold) 64%,
		var(--mdla-wizard-gold) 100%
	);
}

.mdla-wizard * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Text colors — explicit light on dark, scoped under `.mdla-wizard` so the
 * card owns its contrast on any host page. */
.mdla-wizard,
.mdla-wizard p,
.mdla-wizard h2,
.mdla-wizard h3,
.mdla-wizard li,
.mdla-wizard dt,
.mdla-wizard dd,
.mdla-wizard label,
.mdla-wizard span,
.mdla-wizard legend,
.mdla-wizard th,
.mdla-wizard td {
	color: var(--mdla-wizard-ink);
}

.mdla-wizard .mdla-wizard-step-heading p,
.mdla-wizard .mdla-wizard-help,
.mdla-wizard .mdla-wizard-summary,
.mdla-wizard .mdla-wizard-addon-row small,
.mdla-wizard .mdla-wizard-addon-row em {
	color: var(--mdla-wizard-muted);
	margin: 0 0 8px;
}

.mdla-wizard-progress {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
}

.mdla-wizard-progress button {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid var(--mdla-wizard-border);
	background: rgba( 255, 255, 255, 0.04 );
	color: var(--mdla-wizard-muted);
	font-weight: 700;
}

.mdla-wizard .mdla-wizard-progress button.is-active {
	background: var(--mdla-wizard-accent);
	color: #fff;
	border-color: var(--mdla-wizard-accent);
}

.mdla-wizard-step-heading h2 {
	margin: 0 0 18px;
	font-size: 1.5rem;
}

.mdla-wizard-tier-grid,
.mdla-wizard-addon-grid,
.mdla-wizard-attendees {
	display: grid;
	gap: 14px;
}

.mdla-wizard-tier,
.mdla-wizard-attendee,
.mdla-wizard-buyer-box,
.mdla-wizard-addon-row {
	border: 1px solid var(--mdla-wizard-panel-border);
	border-radius: 8px;
	background: var(--mdla-wizard-panel);
	padding: 16px;
}

.mdla-wizard-tier {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.mdla-wizard-tier-title,
.mdla-wizard-attendee header,
.mdla-wizard-total,
.mdla-wizard-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mdla-wizard-attendee h3,
.mdla-wizard-buyer-box h3,
.mdla-wizard-addon-section h3 {
	margin: 0;
	font-size: 1rem;
}

.mdla-wizard-tier h3 {
	margin: 0;
	font-size: 2rem;
	line-height: 1.15;
}

/* -------------------------------------------------------------------------
 * Pricing: only the price that applies to THIS viewer is emphasized.
 * `.is-applicable` = what the user actually pays (bright, heavy);
 * `.is-secondary` = informational (muted). When a member rate applies, the
 * struck regular price reads as the savings reference. */
.mdla-wizard-price {
	margin: 10px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.mdla-wizard .mdla-wizard-price__amount,
.mdla-wizard .mdla-wizard-price__member {
	font-weight: 600;
}

.mdla-wizard .mdla-wizard-price .is-applicable {
	color: #ffffff;
	font-weight: 800;
	font-size: 1.5rem;
}

.mdla-wizard .mdla-wizard-price .is-secondary {
	color: var(--mdla-wizard-muted);
	font-weight: 500;
}

.mdla-wizard .mdla-wizard-price__amount.is-secondary {
	text-decoration: line-through;
	text-decoration-color: var(--mdla-wizard-muted);
}

.mdla-wizard .mdla-wizard-price__tag {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	border-radius: 999px;
	background: var(--mdla-wizard-gold-soft);
	color: var(--mdla-wizard-gold);
	border: 1px solid var(--mdla-wizard-gold);
	padding: 2px 9px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mdla-wizard-badge {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mdla-wizard-border);
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.04 );
	padding: 3px 8px;
	font-size: 0.78rem;
	font-weight: 700;
}

.mdla-wizard .mdla-wizard-badge-danger {
	border-color: rgba( 255, 179, 179, 0.5 );
	color: var(--mdla-wizard-danger);
}

.mdla-wizard .mdla-wizard-badge-warning {
	border-color: var(--mdla-wizard-gold);
	color: var(--mdla-wizard-gold);
}

.mdla-wizard-qty,
.mdla-wizard-field {
	display: grid;
	gap: 6px;
	font-weight: 700;
}

.mdla-wizard-qty input {
	width: 96px;
}

.mdla-wizard input,
.mdla-wizard select,
.mdla-wizard textarea {
	border: 1px solid var(--mdla-wizard-input-border);
	border-radius: 6px;
	padding: 9px 10px;
	min-height: 40px;
	background: var(--mdla-wizard-input-bg);
	color: var(--mdla-wizard-ink);
	font-family: var(--mdla-wizard-font);
}

.mdla-wizard input::-moz-placeholder, .mdla-wizard textarea::-moz-placeholder {
	color: rgba( 255, 255, 255, 0.4 );
}

.mdla-wizard input::placeholder,
.mdla-wizard textarea::placeholder {
	color: rgba( 255, 255, 255, 0.4 );
}

.mdla-wizard select option {
	color: #0f0f0f;
}

.mdla-wizard input:focus,
.mdla-wizard select:focus,
.mdla-wizard textarea:focus {
	outline: none;
	background: var(--mdla-wizard-input-bg-focus);
	border-color: var(--mdla-wizard-gold);
	box-shadow: 0 0 0 1px var(--mdla-wizard-gold);
}

.mdla-wizard-fields {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mdla-wizard-check,
.mdla-wizard-addon-choice label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 14px;
}

.mdla-wizard-addon-section {
	margin-top: 20px;
}

.mdla-wizard-addon-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mdla-wizard-addon-row span {
	display: grid;
	gap: 2px;
}

.mdla-wizard-addon-row em {
	font-style: normal;
}

.mdla-wizard-buyer-box,
.mdla-wizard-attendee {
	margin-bottom: 14px;
}

.mdla-wizard-autocomplete {
	margin: 12px 0;
	position: relative;
}

.mdla-wizard-results {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	border: 1px solid var(--mdla-wizard-border);
	border-radius: 8px;
	background: #1d1d1d;
	overflow: hidden;
}

.mdla-wizard-results button {
	display: grid;
	width: 100%;
	text-align: left;
	border: 0;
	background: #1d1d1d;
	color: var(--mdla-wizard-ink);
	padding: 10px 12px;
}

.mdla-wizard-results button:hover {
	background: rgba( 255, 255, 255, 0.08 );
}

.mdla-wizard-selected-member {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--mdla-wizard-accent-soft);
}

.mdla-wizard-addon-choice {
	border: 0;
	border-top: 1px solid var(--mdla-wizard-panel-border);
	margin: 14px 0 0;
	padding: 14px 0 0;
}

.mdla-wizard-addon-choice legend {
	font-weight: 700;
	padding: 0;
}

/* Per-attendee add-on option price — shown inline beside each choice so the
   cost is visible at selection time, not just on the review step. Gold to
   match the brand's "value" accent. */
.mdla-wizard .mdla-wizard-addon-price {
	margin-left: 8px;
	color: var(--mdla-wizard-gold);
	font-weight: 700;
}

.mdla-wizard .mdla-wizard-error,
.mdla-wizard .mdla-wizard-error-list,
.mdla-wizard .mdla-wizard-error-list p {
	color: var(--mdla-wizard-danger);
}

.mdla-wizard-error-list {
	border: 1px solid rgba( 255, 179, 179, 0.4 );
	border-radius: 8px;
	padding: 10px 12px;
	background: var(--mdla-wizard-danger-soft);
}

.mdla-wizard-review {
	overflow-x: auto;
}

.mdla-wizard-review table {
	width: 100%;
	border-collapse: collapse;
}

.mdla-wizard-review th,
.mdla-wizard-review td {
	padding: 10px;
	border-bottom: 1px solid var(--mdla-wizard-panel-border);
	text-align: left;
}

/* Member savings — gold, the brand's "value" accent (never green). */
.mdla-wizard .mdla-wizard-savings {
	display: block;
	color: var(--mdla-wizard-gold);
	font-size: 0.85rem;
	font-weight: 700;
}

.mdla-wizard-total {
	margin: 18px 0;
	font-size: 1.5rem;
}

.mdla-wizard .mdla-wizard-total span {
	color: var(--mdla-wizard-gold);
	font-weight: 700;
}

.mdla-wizard button {
	border: 1px solid var(--mdla-wizard-border);
	border-radius: 6px;
	background: rgba( 255, 255, 255, 0.04 );
	color: var(--mdla-wizard-ink);
	padding: 10px 14px;
	font-weight: 700;
	font-family: var(--mdla-wizard-font);
	cursor: pointer;
}

.mdla-wizard button:not(:disabled):hover {
	background: rgba( 255, 255, 255, 0.1 );
}

.mdla-wizard button:disabled,
.mdla-wizard input:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.mdla-wizard .mdla-wizard-primary {
	background: var(--mdla-wizard-accent);
	border-color: var(--mdla-wizard-accent);
	color: #fff;
	letter-spacing: 0.04em;
}

.mdla-wizard .mdla-wizard-primary:not(:disabled):hover {
	background: var(--mdla-wizard-accent-hover);
	border-color: var(--mdla-wizard-accent-hover);
}

/* Separate the action row ("Back" / "Next") from the step content above it. */
.mdla-wizard-actions {
	margin-top: 28px;
}

/* Step 3's "Continue to checkout" is rendered as the last child of the step
   section, directly above the "Back" action row. Give it clear breathing room
   so the primary CTA and the Back button never read as a cramped pair. (Only
   Step 3 puts a primary button inside the step; Step 1's "Next" lives in the
   actions row, so this selector targets the checkout button alone.) */
.mdla-wizard-step > .mdla-wizard-primary {
	margin-top: 8px;
	margin-bottom: 16px;
}

@media (max-width: 640px) {
	.mdla-wizard {
		padding: 18px;
	}

	.mdla-wizard-tier,
	.mdla-wizard-addon-row,
	.mdla-wizard-total,
	.mdla-wizard-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.mdla-wizard-fields {
		grid-template-columns: 1fr;
	}
}