/*
 * HCE Booking — design tokens + components.
 *
 * Palette derived from the current hungariancardexpo.hu visual identity
 * (deep navy → magenta hero gradient, gold "Powered by" accent, bold
 * uppercase geometric type, blocky high-contrast CTAs). Everything is a
 * custom property scoped under .hce-booking so the whole UI can be
 * re-branded from one place (spec §2) and never leaks into the host theme
 * (spec §32/§33) — every selector below is prefixed `.hce-…`, never a bare
 * `.button`/`.card`/`.title`.
 */

.hce-booking {
	--hce-navy: #171b3d;
	--hce-navy-light: #232a58;
	--hce-primary: #e31c63;
	--hce-primary-dark: #b71350;
	--hce-accent-gold: #d4af37;
	--hce-background: #f6f5fa;
	--hce-surface: #ffffff;
	--hce-text: #14162b;
	--hce-text-muted: #6b6f8a;
	--hce-border: #e4e3ed;
	--hce-success: #1fa363;
	--hce-success-bg: #e8f8ef;
	--hce-warning: #c98a12;
	--hce-danger: #d3273f;
	--hce-danger-bg: #fdeaee;

	--hce-radius-sm: 6px;
	--hce-radius-md: 10px;
	--hce-radius-lg: 16px;
	--hce-radius-xl: 28px;

	--hce-shadow-sm: 0 1px 2px rgba(23, 27, 61, 0.06);
	--hce-shadow-md: 0 6px 20px rgba(23, 27, 61, 0.08);
	--hce-shadow-lg: 0 16px 40px rgba(23, 27, 61, 0.14);

	--hce-space-xs: 4px;
	--hce-space-sm: 8px;
	--hce-space-md: 16px;
	--hce-space-lg: 24px;
	--hce-space-xl: 40px;

	--hce-font-heading: 'Montserrat', 'Poppins', 'Segoe UI', Arial, sans-serif;
	--hce-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	color: var( --hce-text );
	font-family: var( --hce-font-body );
	font-size: 16px;
	line-height: 1.55;
	background: var( --hce-background );
	padding-bottom: var( --hce-space-xl );
}

/*
 * Defensive fix for page-builder layouts (spec §32/§33). Elementor's
 * columns don't always hand a widget their full column width by default —
 * on some layouts the shortcode's own wrapper stays shrink-wrapped to a
 * narrow strip, so everything inside it (already correctly centered with
 * margin:auto) ends up looking pinned to one side of the page with a big
 * empty gap next to it, rather than actually centered. Scoped with
 * :has() so it only ever touches the specific ancestor that is holding
 * THIS widget, never any other Elementor content on the site.
 */
.elementor-widget-container:has( .hce-booking ),
.elementor-column:has( .hce-booking ),
.elementor-widget-wrap:has( .hce-booking ) {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
}

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

.hce-booking h1,
.hce-booking h2,
.hce-booking h3 {
	font-family: var( --hce-font-heading );
	font-weight: 800;
	letter-spacing: 0.01em;
	margin: 0;
}

.hce-icon {
	display: inline-block;
	vertical-align: -4px;
	flex-shrink: 0;
}

/*
 * Reset native form controls before our own component styles apply.
 * A host theme or page builder (Elementor, Astra, etc.) commonly styles the
 * bare `button`/`input` elements globally — often with a selector like
 * `.elementor-widget-container button`, which can outrank a lone
 * `.hce-room-card` class. Stripping that skin here, then re-applying our
 * own look with `!important` on the properties a theme is most likely to
 * fight over (background/color/border), keeps every control legible
 * regardless of what the host site does (spec §32/§33).
 */
.hce-booking button {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	line-height: inherit;
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Layout shell: content column + sticky summary sidebar on desktop.  */
/* ------------------------------------------------------------------ */

.hce-booking-form {
	display: block;
}

.hce-booking-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --hce-space-lg );
	padding: 0 var( --hce-space-md );
}

@media ( min-width: 1024px ) {
	.hce-booking-layout {
		grid-template-columns: 1fr 360px;
		align-items: start;
	}
	.hce-booking-main {
		min-width: 0;
	}
	.hce-booking-sidebar {
		position: sticky;
		top: var( --hce-space-lg );
	}
}

/* ------------------------------------------------------------------ */
/* Hero.                                                                */
/* ------------------------------------------------------------------ */

.hce-hero {
	background: linear-gradient( 115deg, var( --hce-navy ) 20%, #6d1a63 62%, var( --hce-primary ) 100% );
	color: #fff;
	padding: var( --hce-space-xl ) var( --hce-space-md ) var( --hce-space-lg );
	margin-bottom: var( --hce-space-lg );
	text-align: center;
}

.hce-hero-eyebrow {
	display: block;
	font-family: var( --hce-font-heading );
	font-weight: 700;
	letter-spacing: 0.16em;
	font-size: 0.8rem;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.75 );
	margin-bottom: var( --hce-space-sm );
}

.hce-hero-title {
	font-size: clamp( 1.6rem, 5vw, 2.4rem );
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0 0 var( --hce-space-sm );
}

.hce-hero-lead {
	font-family: var( --hce-font-body );
	font-size: 1.02rem;
	color: rgba( 255, 255, 255, 0.9 );
	max-width: 480px;
	margin: 0 auto var( --hce-space-md );
}

.hce-hero-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --hce-space-md );
	font-size: 0.92rem;
	font-weight: 600;
}

.hce-hero-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba( 255, 255, 255, 0.12 );
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	padding: 8px 14px;
	border-radius: 999px;
}

/* ------------------------------------------------------------------ */
/* Step indicator.                                                      */
/* ------------------------------------------------------------------ */

.hce-steps {
	display: flex;
	justify-content: space-between;
	gap: 4px;
	margin: 0 0 var( --hce-space-lg );
	padding: 0 var( --hce-space-md );
	list-style: none;
}

.hce-step-indicator {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	position: relative;
}

.hce-step-indicator::before {
	content: '';
	position: absolute;
	top: 15px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var( --hce-border );
	z-index: 0;
}

.hce-step-indicator:first-child::before {
	display: none;
}

.hce-step-indicator.is-done::before {
	background: var( --hce-primary );
}

.hce-step-num {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var( --hce-surface );
	border: 2px solid var( --hce-border );
	color: var( --hce-text-muted );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --hce-font-heading );
	font-weight: 800;
	font-size: 0.85rem;
}

.hce-step-indicator.is-active .hce-step-num {
	border-color: var( --hce-primary );
	color: var( --hce-primary );
	box-shadow: 0 0 0 4px rgba( 227, 28, 99, 0.12 );
}

.hce-step-indicator.is-done .hce-step-num {
	background: var( --hce-primary );
	border-color: var( --hce-primary );
	color: #fff;
}

.hce-step-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --hce-text-muted );
}

.hce-step-indicator.is-active .hce-step-label {
	color: var( --hce-text );
}

@media ( max-width: 480px ) {
	.hce-step-label {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Step cards.                                                          */
/* ------------------------------------------------------------------ */

.hce-step {
	background: var( --hce-surface );
	border: 1px solid var( --hce-border );
	border-radius: var( --hce-radius-lg );
	box-shadow: var( --hce-shadow-sm );
	padding: var( --hce-space-lg );
	margin-bottom: var( --hce-space-md );
}

.hce-step-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var( --hce-space-md );
}

.hce-step-heading .hce-icon {
	color: var( --hce-primary );
}

.hce-step-title {
	font-size: 1.05rem;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Exhibitor fields.                                                    */
/* ------------------------------------------------------------------ */

.hce-field {
	margin-bottom: var( --hce-space-md );
}

.hce-field label {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.hce-field-hint {
	display: block;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var( --hce-text-muted );
	font-size: 0.85rem;
	margin-top: 2px;
	margin-bottom: 8px;
}

.hce-optional {
	font-weight: 400;
	text-transform: none;
	color: var( --hce-text-muted );
	font-size: 0.8rem;
}

.hce-field input {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var( --hce-border );
	border-radius: var( --hce-radius-sm );
	font-size: 1rem;
	min-height: 48px;
	font-family: var( --hce-font-body );
	background: #fff;
	color: var( --hce-text );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hce-field input:focus {
	outline: none;
	border-color: var( --hce-primary );
	box-shadow: 0 0 0 4px rgba( 227, 28, 99, 0.12 );
}

.hce-field.has-error input {
	border-color: var( --hce-danger );
}

/* ------------------------------------------------------------------ */
/* Terms card.                                                          */
/* ------------------------------------------------------------------ */

.hce-terms-html,
.hce-info-html {
	max-height: 260px;
	overflow-y: auto;
	padding: var( --hce-space-md );
	background: var( --hce-background );
	border: 1px solid var( --hce-border );
	border-radius: var( --hce-radius-md );
	margin-bottom: var( --hce-space-md );
	font-size: 0.94rem;
}

.hce-terms-html h1,
.hce-terms-html h2,
.hce-terms-html h3 {
	font-size: 1rem;
	text-transform: none;
	margin: 0.6em 0 0.3em;
}

.hce-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: 0.98rem;
	font-weight: 600;
	padding: var( --hce-space-sm );
	border-radius: var( --hce-radius-sm );
	transition: background 0.15s ease;
}

.hce-checkbox-label:hover {
	background: var( --hce-background );
}

.hce-checkbox-label input {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	margin-top: 1px;
	accent-color: var( --hce-primary );
}

.hce-checkbox-note {
	color: var( --hce-text-muted );
	font-size: 0.85rem;
	font-weight: 400;
	margin: 4px 0 0 38px;
}

.hce-field-error {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var( --hce-danger );
	background: var( --hce-danger-bg );
	border-radius: var( --hce-radius-sm );
	padding: 8px 12px;
	font-size: 0.88rem;
	font-weight: 600;
	margin-top: 8px;
}

/*
 * Any element carrying our own `display` rule needs an explicit `[hidden]`
 * override — an author stylesheet's `display` always beats the UA
 * stylesheet's `[hidden] { display: none }`, so without this every error
 * banner below would stay visibly on-screen (as flex) even while the
 * `hidden` attribute is set. This bit the room/table capacity errors.
 */
.hce-booking [hidden] {
	display: none !important;
}

/* Gated section: dimmed + inert until terms are accepted (spec §8). */
.hce-booking-fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	transition: opacity 0.2s ease;
}

.hce-booking-fieldset[disabled] {
	opacity: 0.4;
	pointer-events: none;
	user-select: none;
}

/* ------------------------------------------------------------------ */
/* Room cards.                                                          */
/* ------------------------------------------------------------------ */

.hce-rooms-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --hce-space-md );
}

@media ( min-width: 640px ) {
	.hce-rooms-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.hce-room-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	text-align: left;
	background: #fff !important;
	color: var( --hce-text ) !important;
	border: 2px solid var( --hce-border );
	border-radius: var( --hce-radius-lg );
	padding: var( --hce-space-md );
	min-height: 44px;
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
	position: relative;
}

.hce-room-card:hover:not(:disabled) {
	border-color: var( --hce-primary );
	box-shadow: var( --hce-shadow-md );
}

.hce-room-card.is-selected {
	border-color: var( --hce-primary );
	box-shadow: 0 0 0 4px rgba( 227, 28, 99, 0.12 ), var( --hce-shadow-md );
}

.hce-room-card.is-selected::after {
	content: '';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var( --hce-primary );
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 6 6L20 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
}

.hce-room-card:disabled,
.hce-room-card.is-full {
	opacity: 0.65;
	cursor: not-allowed;
	background: var( --hce-background ) !important;
}

.hce-room-card-icon {
	width: 40px;
	height: 40px;
	border-radius: var( --hce-radius-md );
	background: var( --hce-navy );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hce-room-card.is-full .hce-room-card-icon {
	background: var( --hce-text-muted );
}

.hce-room-name {
	font-family: var( --hce-font-heading );
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.98rem;
	color: var( --hce-text ) !important;
}

.hce-room-price {
	color: var( --hce-text-muted ) !important;
	font-size: 0.9rem;
	font-weight: 600;
}

.hce-room-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-weight: 800;
	font-size: 0.82rem;
	text-transform: uppercase;
	color: var( --hce-primary ) !important;
}

.hce-room-full-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: var( --hce-text-muted ) !important;
	font-weight: 700;
}

.hce-waitlist-block {
	margin: -4px 0 6px;
}

.hce-waitlist-toggle {
	background: none !important;
	border: 1.5px solid var( --hce-navy );
	color: var( --hce-navy ) !important;
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	padding: 10px 16px;
	border-radius: var( --hce-radius-sm );
	cursor: pointer;
	min-height: 44px;
	width: 100%;
}

.hce-waitlist-toggle:hover {
	background: var( --hce-navy ) !important;
	color: #fff !important;
}

.hce-waitlist-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.hce-waitlist-form input {
	flex: 1 1 140px;
	padding: 10px;
	border: 1.5px solid var( --hce-border );
	border-radius: var( --hce-radius-sm );
	min-height: 44px;
}

.hce-waitlist-message {
	font-size: 0.85rem;
	color: var( --hce-success );
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Counters.                                                            */
/* ------------------------------------------------------------------ */

.hce-step-counters {
	display: grid;
	gap: var( --hce-space-lg );
}

@media ( min-width: 640px ) {
	.hce-step-counters {
		grid-template-columns: 1fr 1fr;
	}
}

.hce-counter label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	margin-bottom: 10px;
	font-size: 0.92rem;
	text-transform: uppercase;
}

.hce-counter label .hce-icon {
	color: var( --hce-primary );
}

.hce-hint {
	display: block;
	font-weight: 400;
	text-transform: none;
	color: var( --hce-text-muted );
	font-size: 0.85rem;
	margin-top: 2px;
}

.hce-counter-control {
	display: flex;
	align-items: center;
	border: 1.5px solid var( --hce-border );
	border-radius: 999px;
	overflow: hidden;
	width: fit-content;
	background: var( --hce-background );
}

.hce-counter-btn {
	width: 48px;
	height: 48px;
	font-size: 1.5rem;
	background: transparent !important;
	border: none;
	cursor: pointer;
	line-height: 1;
	color: var( --hce-navy ) !important;
	font-weight: 700;
}

.hce-counter-btn:hover {
	background: rgba( 23, 27, 61, 0.06 ) !important;
}

.hce-counter-btn:active {
	background: rgba( 23, 27, 61, 0.12 ) !important;
}

.hce-counter-control input {
	width: 64px;
	text-align: center;
	border: none;
	font-size: 1.3rem;
	font-weight: 800;
	height: 48px;
	background: transparent !important;
	color: var( --hce-text ) !important;
}

/* ------------------------------------------------------------------ */
/* Summary / sidebar.                                                   */
/* ------------------------------------------------------------------ */

.hce-summary-card {
	background: var( --hce-navy );
	color: #fff;
	border-radius: var( --hce-radius-lg );
	padding: var( --hce-space-lg );
	box-shadow: var( --hce-shadow-lg );
}

.hce-summary-card .hce-step-title {
	color: #fff;
}

.hce-summary-room {
	font-weight: 700;
	margin-bottom: var( --hce-space-sm );
	padding-bottom: var( --hce-space-sm );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.15 );
}

.hce-summary-row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: 0.95rem;
	color: rgba( 255, 255, 255, 0.85 );
}

.hce-summary-total {
	border-top: 1px solid rgba( 255, 255, 255, 0.2 );
	margin-top: 8px;
	padding-top: var( --hce-space-md );
	font-weight: 800;
	font-size: 1.4rem;
	color: #fff;
}

.hce-summary-total .hce-summary-label {
	font-size: 0.78rem;
	text-transform: uppercase;
	display: block;
	color: rgba( 255, 255, 255, 0.7 );
	font-weight: 700;
	margin-bottom: 2px;
}

/* Sidebar-only CTA (desktop); on mobile the CTA lives in the sticky bar. */
.hce-summary-card .hce-reserve-btn {
	margin-top: var( --hce-space-md );
}

@media ( max-width: 1023px ) {
	.hce-summary-card {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* CTA button.                                                          */
/* ------------------------------------------------------------------ */

.hce-reserve-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 17px;
	font-family: var( --hce-font-heading );
	font-size: 1.02rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff !important;
	background: var( --hce-primary ) !important;
	border: none;
	border-radius: var( --hce-radius-sm );
	cursor: pointer;
	min-height: 54px;
	box-shadow: var( --hce-shadow-sm );
	transition: background 0.15s ease, transform 0.05s ease;
}

.hce-reserve-btn:hover:not(:disabled) {
	background: var( --hce-primary-dark ) !important;
}

.hce-reserve-btn:active:not(:disabled) {
	transform: translateY(1px);
}

.hce-reserve-btn:focus-visible {
	outline: 3px solid var( --hce-accent-gold );
	outline-offset: 2px;
}

.hce-reserve-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.hce-reserve-btn.is-loading {
	background: var( --hce-primary-dark );
}

.hce-spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2.5px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	animation: hce-spin 0.7s linear infinite;
	display: none;
}

.hce-reserve-btn.is-loading .hce-spinner {
	display: inline-block;
}

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

.hce-form-error {
	text-align: center;
	margin: 0 var( --hce-space-md ) var( --hce-space-md );
	justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Mobile sticky summary bar (spec §12/§20/§21).                       */
/* ------------------------------------------------------------------ */

.hce-sticky-bar {
	display: none;
}

@media ( max-width: 1023px ) {
	.hce-sticky-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var( --hce-space-md );
		position: sticky;
		bottom: 0;
		z-index: 20;
		background: var( --hce-navy );
		color: #fff;
		padding: 12px var( --hce-space-md );
		box-shadow: 0 -8px 24px rgba( 0, 0, 0, 0.18 );
		margin: var( --hce-space-lg ) calc( -1 * var( --hce-space-md ) ) 0;
	}
	.hce-sticky-bar .hce-reserve-btn {
		width: auto;
		flex: 0 0 auto;
		padding: 14px 22px;
		min-height: 48px;
		font-size: 0.9rem;
	}
	.hce-sticky-bar-total {
		line-height: 1.2;
	}
	.hce-sticky-bar-total .hce-summary-label {
		display: block;
		font-size: 0.7rem;
		text-transform: uppercase;
		color: rgba( 255, 255, 255, 0.65 );
		font-weight: 700;
	}
	.hce-sticky-bar-total strong {
		font-size: 1.15rem;
	}
}

/* ------------------------------------------------------------------ */
/* Closed state.                                                        */
/* ------------------------------------------------------------------ */

.hce-booking-closed {
	max-width: 640px;
	margin: var( --hce-space-xl ) auto;
	padding: var( --hce-space-xl ) var( --hce-space-lg );
	background: var( --hce-surface );
	border: 1px solid var( --hce-border );
	border-radius: var( --hce-radius-xl );
	box-shadow: var( --hce-shadow-lg );
	text-align: center;
}

.hce-booking-closed-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var( --hce-background );
	color: var( --hce-primary );
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var( --hce-space-md );
}

.hce-booking-closed-title {
	font-family: var( --hce-font-heading );
	font-weight: 800;
	text-transform: uppercase;
	font-size: 1.4rem;
	margin-bottom: var( --hce-space-md );
}

.hce-booking-closed-content {
	color: var( --hce-text-muted );
}

/* ------------------------------------------------------------------ */
/* Success + QR cards.                                                  */
/* ------------------------------------------------------------------ */

.hce-success {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 var( --hce-space-md );
}

.hce-success-header {
	text-align: center;
	background: linear-gradient( 135deg, var( --hce-navy ), var( --hce-primary ) );
	color: #fff;
	border: none;
}

.hce-success-checkmark {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.15 );
	border: 2px solid rgba( 255, 255, 255, 0.5 );
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var( --hce-space-md );
}

.hce-success-header h2 {
	margin: 0 0 6px;
	text-transform: uppercase;
	font-size: 1.5rem;
}

.hce-success-header p {
	margin: 0;
	color: rgba( 255, 255, 255, 0.85 );
}

.hce-summary-plain .hce-summary-row {
	color: var( --hce-text );
}

.hce-summary-plain .hce-summary-row span:first-child {
	color: var( --hce-text-muted );
}

.hce-summary-plain .hce-summary-total {
	border-top-color: var( --hce-border );
	color: var( --hce-primary-dark );
}

.hce-qr-block {
	text-align: center;
	border: 2px dashed var( --hce-accent-gold );
	background: #fffdf6;
}

.hce-qr-block-title {
	font-family: var( --hce-font-heading );
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	color: var( --hce-navy );
	margin-bottom: var( --hce-space-md );
}

.hce-qr-image-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: var( --hce-space-md );
}

.hce-qr-image {
	width: 220px;
	height: 220px;
	image-rendering: pixelated;
	border: 1px solid var( --hce-border );
	border-radius: var( --hce-radius-md );
	background: #fff;
	padding: var( --hce-space-sm );
}

.hce-qr-save-btn {
	display: inline-flex;
	width: auto;
	padding: 12px 28px;
	text-decoration: none;
	margin-bottom: var( --hce-space-md );
}

.hce-qr-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var( --hce-text-muted );
	font-size: 0.9rem;
	margin: 6px 0;
}

.hce-qr-note strong {
	color: var( --hce-text );
}

/* ------------------------------------------------------------------ */
/* Dark mode.                                                           */
/* ------------------------------------------------------------------ */

@media ( prefers-color-scheme: dark ) {
	.hce-booking {
		--hce-background: #0f1024;
		--hce-surface: #1b1d3a;
		--hce-border: #33355c;
		--hce-text: #f2f2f7;
		--hce-text-muted: #a9abc9;
		--hce-danger-bg: #3a1620;
		--hce-success-bg: #10301f;
	}
	.hce-field input,
	.hce-counter-control input,
	.hce-waitlist-form input {
		background: #12132a;
		color: var( --hce-text );
	}
	.hce-room-card.is-full,
	.hce-terms-html,
	.hce-info-html,
	.hce-counter-control {
		background: #12132a;
	}
	.hce-qr-block {
		background: #1c1a12;
	}
}