/**
 * Booking form styles.
 *
 * The form's local --frst-* aliases inherit from the theme's unprefixed
 * brand variables (declared in frst-theme/assets/css/styles.css :root and
 * overridable from Appearance → Customize → FRST Branding). Hex fallbacks
 * keep the form looking right if the theme is swapped or its CSS hasn't
 * loaded yet.
 */

.frst-booking {
	--frst-gold:       var(--gold,       #C9A84C);
	--frst-gold-deep:  var(--gold-deep,  #B0902F);
	--frst-navy:       var(--navy,       #1B2D4F);
	--frst-cream:      var(--cream,      #FAF8F3);
	--frst-cream-deep: var(--cream-deep, #F2ECDE);
	--frst-charcoal:   var(--charcoal,   #2C2C2C);
	--frst-grey:       var(--grey,       #7A7162);
	--frst-border:     var(--border,     #E8E0D0);
	--frst-error: #B33A3A;

	/* Semantic aliases — inherit from theme UI tokens so the booking form
	   recolours in lockstep with the rest of the site via Customize → FRST
	   Branding → Interface tokens. */
	--frst-btn-bg:       var(--btn-primary-bg,       var(--gold, #C9A84C));
	--frst-btn-bg-hover: var(--btn-primary-bg-hover, var(--gold-deep, #B0902F));
	--frst-btn-text:     var(--btn-primary-text,     var(--navy, #1B2D4F));
	--frst-text:         var(--text-body,    var(--charcoal, #2C2C2C));
	--frst-text-muted:   var(--text-muted,   var(--grey, #7A7162));
	--frst-surface:      var(--surface,      var(--cream, #FAF8F3));
	--frst-surface-card: var(--surface-card, #FFFFFF);
	--frst-divider:      var(--divider,      var(--border, #E8E0D0));

	max-width: 720px;
	margin: 0 auto;
	padding: 32px;
	background: var(--frst-cream);
	border-radius: 12px;
	border: 1px solid var(--frst-border);
	font-family: var(--wp--preset--font-family--lato, "Lato", sans-serif);
	color: var(--frst-charcoal);
}

/* ============ Progress indicator ============ */
.frst-booking__progress {
	list-style: none;
	margin: 0 0 36px;
	padding: 0 8px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
}

.frst-booking__progress-step {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0;
	background: none;
	border: none;
	color: var(--frst-grey);
	text-align: center;
	transition: color .25s;
}

/* Connector segment — runs from the previous circle to this one */
.frst-booking__progress-step::before {
	content: '';
	position: absolute;
	top: 18px;                      /* vertical center of the 36px circle */
	right: 50%;
	left: -50%;
	height: 2px;
	background: var(--frst-border);
	transition: background-color .3s;
	z-index: 0;
}
.frst-booking__progress-step:first-child::before { display: none; }

.frst-booking__progress-num {
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--frst-border);
	color: var(--frst-grey);
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s;
}

.frst-booking__progress-label {
	display: block;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: inherit;
	max-width: 110px;
	line-height: 1.25;
}

/* Active step — solid navy circle with a soft ring */
.frst-booking__progress-step.is-active {
	color: var(--frst-navy);
}
.frst-booking__progress-step.is-active .frst-booking__progress-num {
	background: var(--frst-navy);
	border-color: var(--frst-navy);
	color: #fff;
	box-shadow: 0 0 0 5px rgba(27, 45, 79, 0.12);
}

/* Done step — gold circle with a check, connector turns gold */
.frst-booking__progress-step.is-done {
	color: var(--frst-navy);
}
.frst-booking__progress-step.is-done::before {
	background: var(--frst-gold);
}
.frst-booking__progress-step.is-done .frst-booking__progress-num {
	background: var(--frst-gold);
	border-color: var(--frst-gold);
	color: var(--frst-navy);
	font-size: 0;                   /* hide the "01" so check stands alone */
}
.frst-booking__progress-step.is-done .frst-booking__progress-num::after {
	content: '';
	width: 14px;
	height: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path fill='black' d='M12.5.6 5.1 8 1.5 4.4 0 5.9l5.1 5.1L14 2.1z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path fill='black' d='M12.5.6 5.1 8 1.5 4.4 0 5.9l5.1 5.1L14 2.1z'/></svg>") no-repeat center / contain;
}

@media (max-width: 600px) {
	.frst-booking { padding: 20px; }
	.frst-booking__progress { padding: 0; margin-bottom: 28px; }
	.frst-booking__progress-num { width: 30px; height: 30px; font-size: 12px; }
	.frst-booking__progress-step::before { top: 15px; }
	.frst-booking__progress-label { font-size: 10.5px; letter-spacing: 0.4px; }
	.frst-booking__progress-step.is-done .frst-booking__progress-num::after { width: 12px; height: 9px; }
}

/* ============ Fields ============ */
.frst-field {
	margin-bottom: 18px;
}
.frst-field--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.frst-field--two > div { margin: 0; }

.frst-field__label {
	display: block;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--frst-navy);
	margin: 0 0 6px;
}

.frst-field__input,
.frst-field__select {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	background: #fff;
	border: 1px solid var(--frst-border);
	border-radius: 6px;
	color: var(--frst-charcoal);
	transition: border-color .15s;
}
.frst-field__input:focus,
.frst-field__select:focus {
	outline: none;
	border-color: var(--frst-gold);
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

.frst-field__err {
	margin: 6px 0 0;
	color: var(--frst-error);
	font-size: 13px;
	display: none;
}
.frst-field.show-err .frst-field__err,
.frst-check.show-err .frst-field__err { display: block; }
.frst-field.show-err .frst-field__input,
.frst-field.show-err .frst-field__select { border-color: var(--frst-error); }

/* ============ Seat stepper ============ */
.frst-seat-stepper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--frst-border);
	border-radius: 6px;
	padding: 4px;
}
.frst-seat-stepper__btn {
	width: 38px;
	height: 38px;
	background: var(--frst-cream-deep);
	border: none;
	border-radius: 4px;
	font-size: 20px;
	font-weight: 600;
	color: var(--frst-navy);
	cursor: pointer;
}
.frst-seat-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.frst-seat-stepper input {
	width: 56px;
	text-align: center;
	border: none;
	background: transparent;
	font-size: 18px;
	font-weight: 600;
	color: var(--frst-navy);
	-moz-appearance: textfield;
}
.frst-seat-stepper input::-webkit-outer-spin-button,
.frst-seat-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.frst-deposit-summary {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--frst-grey);
}
.frst-deposit-summary strong { color: var(--frst-navy); font-weight: 600; }

/* ============ Card element ============ */
.frst-stripe-element {
	padding: 14px;
	background: #fff;
	border: 1px solid var(--frst-border);
	border-radius: 6px;
}

/* ============ Checkbox ============ */
.frst-check {
	margin: 14px 0 18px;
	font-size: 14px;
	color: var(--frst-charcoal);
}
.frst-check label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.frst-check input[type=checkbox] { margin-top: 3px; flex-shrink: 0; }

/* ============ Submit ============ */
.frst-booking__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 24px;
	background: var(--frst-btn-bg);
	color: var(--frst-btn-text);
	border: none;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.4px;
	cursor: pointer;
	transition: background-color .15s, transform .15s;
}
.frst-booking__submit:hover { background: var(--frst-btn-bg-hover); }
.frst-booking__submit:active { transform: translateY(1px); }
.frst-booking__submit:disabled { opacity: 0.7; cursor: progress; }

.frst-booking__submit-spinner {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(27, 45, 79, 0.25);
	border-top-color: var(--frst-btn-text);
	animation: frst-spin 0.7s linear infinite;
	display: none;
}
.frst-booking__submit.is-busy .frst-booking__submit-spinner { display: inline-block; }
@keyframes frst-spin { to { transform: rotate(360deg); } }

.frst-booking__legal {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--frst-grey);
	text-align: center;
}

/* ============ Success ============ */
.frst-booking__success {
	background: #fff;
	border: 1px solid var(--frst-gold);
	border-radius: 8px;
	padding: 32px;
	text-align: center;
}
.frst-booking__success h3 {
	margin: 8px 0 16px;
	font-family: var(--wp--preset--font-family--cormorant, "Cormorant Garamond", serif);
	font-size: 28px;
	color: var(--frst-navy);
}

/* ============ Dates table ============ */
.frst-dates-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 auto 32px;
	max-width: 720px;
	background: #fff;
	border: 1px solid var(--border, #E8E0D0);
	border-radius: 8px;
	overflow: hidden;
}
.frst-dates-table th,
.frst-dates-table td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--border, #E8E0D0);
	text-align: left;
	font-size: 15px;
}
.frst-dates-table tbody tr:last-child td { border-bottom: none; }
.frst-dates-table th {
	font-family: var(--ff-label, var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif));
	font-size: 12px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--grey, #7A7162);
	background: var(--cream-deep, #F2ECDE);
}
.frst-dates-table td:last-child { text-align: right; }

.frst-btn {
	display: inline-block;
	padding: 10px 18px;
	background: var(--gold, #C9A84C);
	color: var(--navy, #1B2D4F);
	border: none;
	border-radius: 6px;
	font-family: var(--ff-label, var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif));
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.3px;
	cursor: pointer;
}
.frst-btn:hover { background: var(--gold-deep, #B0902F); }
.frst-btn--small { padding: 8px 14px; font-size: 12px; }

.frst-dates-empty {
	background: #fff;
	border: 1px dashed var(--border, #E8E0D0);
	border-radius: 8px;
	padding: 24px;
	text-align: center;
	color: var(--grey, #7A7162);
}

/* Balance preference cards */
.frst-balance-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 540px) { .frst-balance-options { grid-template-columns: 1fr; } }
.frst-balance-option {
	display: flex; flex-direction: column; gap: 4px;
	padding: 14px 16px; border: 1.5px solid #E8E0D0; border-radius: 8px;
	cursor: pointer; background: #fff; transition: border-color .12s ease, background .12s ease;
}
.frst-balance-option:hover { border-color: #C9A84C; }
.frst-balance-option input { margin-right: 6px; }
.frst-balance-option:has(input:checked) { border-color: #1B2D4F; background: #f6f1e2; }
.frst-balance-option__title { font-weight: 600; color: #1B2D4F; }
.frst-balance-option__hint { font-size: 13px; color: #7A7162; }

/* Public waitlist */
.frst-waitlist { background: #f6f1e2; border-radius: 8px; padding: 14px 16px; margin: 4px 0 16px; }
.frst-waitlist__label { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #7A7162; margin: 0 0 6px; font-weight: 600; }
.frst-waitlist__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.frst-waitlist__list li { background: #fff; border: 1px solid #E8E0D0; border-radius: 999px; padding: 4px 10px; font-size: 13px; color: #1B2D4F; }
.frst-waitlist__count { margin: 8px 0 0; font-size: 13px; color: #7A7162; }

/* Seat lock countdown */
.frst-seat-lock { background: #fff8c4; border-left: 4px solid #C9A84C; padding: 10px 14px; border-radius: 4px; margin: 4px 0 16px; color: #5a4a00; font-size: 14px; }
.frst-seat-lock [data-lock-countdown] { font-family: 'Lato', sans-serif; font-variant-numeric: tabular-nums; }

/* ============ Thank-you page ============ */
.frst-thanks {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(40px, 7vw, 80px) 20px;
}
.frst-thanks__card {
	background: var(--white, #fff);
	border: 1px solid var(--border, #E8E0D0);
	border-radius: 16px;
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
	box-shadow: 0 18px 40px rgba(27, 45, 79, 0.06);
}
.frst-thanks__tick {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--gold, #C9A84C);
	color: var(--navy, #1B2D4F);
	display: flex;
	align-items: center;
	justify-content: center;
}
.frst-thanks__tick svg { width: 32px; height: 32px; }
.frst-thanks__eyebrow {
	margin: 0 0 8px;
	font-family: var(--ff-label, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--gold-deep, #B0902F);
}
.frst-thanks__title {
	margin: 0 0 14px;
	font-family: var(--ff-display, "Cormorant Garamond", Georgia, serif);
	font-size: clamp(32px, 5vw, 44px);
	line-height: 1.1;
	color: var(--navy, #1B2D4F);
}
.frst-thanks__lead {
	margin: 0 auto 28px;
	max-width: 520px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--grey, #7A7162);
}
.frst-thanks__summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 24px;
	margin: 0 auto 32px;
	padding: 24px;
	border: 1px solid var(--border, #E8E0D0);
	border-radius: 10px;
	background: var(--cream, #FAF8F3);
	text-align: left;
}
.frst-thanks__summary > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.frst-thanks__summary dt {
	margin: 0;
	font-family: var(--ff-label, "Montserrat", sans-serif);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--grey, #7A7162);
}
.frst-thanks__summary dd {
	margin: 0;
	font-size: 15px;
	color: var(--charcoal, #2C2C2C);
	word-break: break-word;
}
.frst-thanks__next { text-align: left; margin: 0 0 28px; }
.frst-thanks__next-title {
	margin: 0 0 12px;
	font-family: var(--ff-display, "Cormorant Garamond", Georgia, serif);
	font-size: 22px;
	color: var(--navy, #1B2D4F);
}
.frst-thanks__steps {
	margin: 0;
	padding-left: 22px;
	color: var(--charcoal, #2C2C2C);
}
.frst-thanks__steps li { margin: 0 0 8px; line-height: 1.55; }
.frst-thanks__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.frst-thanks__cta .btn { min-width: 200px; }
@media (max-width: 540px) {
	.frst-thanks__summary { grid-template-columns: 1fr; }
}