/*
 * Booking step 3 — the details form.
 * design/DESIGN-SYSTEM.md §4.13 (form controls), §3.4 (modal form grid),
 * §1.2 (12px/.14em micro-label, 13px helper, 14px body).
 *
 * The controls themselves are components/form.css -- the site has ONE input
 * style and this file does not restate it. What is here is only what the modal
 * adds: the tighter 220px grid track the design gives the modal form (the
 * contact form's is 240px), the Hold countdown, the checkbox the prototype
 * never had, and the two message lines a field can carry.
 *
 * The checkbox is built, not borrowed: the prototype contains no checkbox at
 * all, so it is assembled from the vocabulary that does exist -- a square 20px
 * box on #111 with the field border, turning to the red border plus the
 * selected-option tint (§4.16) when ticked. Radius stays 0.
 *
 * TODO token: the modal grid's 220px track and the 20px checkbox have no
 * names in tokens.css.
 */

/* --------------------------------------------------- grid (§3.4 modal form) */

.sp-form__grid--modal {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* TODO token */
}

/* ----------------------------------------------------------- field messages */

/*
 * A warning, not an error: an expired coupon leaves the rest of the price
 * standing, so it reads in the helper size and only takes the accent when it
 * is actually telling the customer something did not apply.
 */
.sp-field__note {
	margin: 0;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-45);
}

.sp-field__note.is-warning {
	color: var(--sp-red);
}

/* ------------------------------------------------------- panel-level alert */

.sp-alert {
	margin: 0 0 var(--sp-8);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--sp-line-hover-sub);
	background: var(--sp-tint-red-8);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text);
}

/* ------------------------------------------------------------ Hold countdown */

/*
 * Quiet on purpose (ticket 17): the customer is told the capacity is being
 * held, not hurried. Micro-label plus the summary-value numeral, no live
 * region, no colour change as it runs down.
 */
.sp-hold {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-8);
}

.sp-hold__label {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-micro);
	letter-spacing: var(--sp-ls-label);
	text-transform: uppercase;
	color: var(--sp-text-45);
}

.sp-hold__value {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-btn);
	color: var(--sp-text);
}

/* ---------------------------------------------------------------- checkboxes */

.sp-checks {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	margin-top: var(--sp-10);
}

.sp-check-block {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.sp-check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	cursor: pointer;
}

/*
 * The real control stays in the accessibility tree and under the pointer; it
 * is simply transparent, with the visible box drawn beside it. Nothing here
 * uses `display:none`, so keyboard focus and screen readers are unaffected.
 */
.sp-check__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px; /* TODO token */
	height: 20px; /* TODO token */
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.sp-check__box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px; /* TODO token */
	height: 20px; /* TODO token */
	margin-top: 2px;
	background: var(--sp-bg-deep);
	border: var(--sp-border-field);
	border-radius: var(--sp-radius);
	font-size: var(--sp-fs-xs);
	line-height: 1;
	color: transparent;
	transition:
		border-color var(--sp-dur-fast) var(--sp-ease),
		background var(--sp-dur-fast) var(--sp-ease),
		color var(--sp-dur-fast) var(--sp-ease);
}

.sp-check:hover .sp-check__box {
	border-color: var(--sp-red);
}

.sp-check__input:checked + .sp-check__box {
	background: var(--sp-tint-red-16);
	border-color: var(--sp-red);
	color: var(--sp-text);
}

/* §4.13's focus replacement, moved onto the box the input is hiding behind. */
.sp-check__input:focus-visible + .sp-check__box {
	border-color: var(--sp-red);
	box-shadow: 0 0 0 2px var(--sp-tint-red-25);
}

.sp-check__text {
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

.sp-check__text a {
	color: var(--sp-red);
}

.sp-check__text a:hover,
.sp-check__text a:focus-visible {
	color: var(--sp-text);
}