/* ============================================================
   Booking page — the appointment-request flow (inc/booking.php).
   Loaded on that page only, by the per-template convention in
   inc/assets.php. Tokens only, like components.css.

   The radios stay real radios: each one is visually hidden inside its
   label, and the label is the card/chip. :has() styles the label from the
   radio's state, so checked, focus and disabled need no script.
   ============================================================ */

/* The script toggles [hidden] on steps and buttons; .ar-btn's own
   display:inline-flex would otherwise beat the UA's display:none. */
.ar-booking [hidden] { display: none !important; }

/* ---------- layout: form beside the how-it-works panel ---------- */

/* Same flow-reset as .ar-contact: a top-level wp:html block on its
   template, so it sizes and spaces itself. */
body main.wp-block-group > .ar-booking {
	max-width: 66rem;
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--md);
	box-sizing: border-box;
	padding-inline: var(--wp--preset--spacing--md);
}
.ar-booking__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--lg);
	align-items: start;
}
.ar-booking__aside {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	position: sticky;
	top: var(--wp--preset--spacing--md);
}

.ar-booking__how {
	background: var(--ar-surface);
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-lg);
	padding: var(--wp--preset--spacing--md);
}
.ar-booking__howhead {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}
.ar-booking__howlist {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding-inline-start: 1.25rem;
	color: var(--ar-text-2);
	font-size: 0.9375rem;
	line-height: 1.5;
}
.ar-booking__howlist strong { color: var(--ar-text); }

.ar-booking__call { position: static; }
.ar-booking__hours {
	display: grid;
	gap: 0.35rem;
	margin: 1.1rem 0 0;
	font-size: 0.875rem;
	text-align: start;
}
/* A narrow card puts the hours under their day rather than breaking either. */
.ar-booking__hours div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 1rem;
	padding-block-start: 0.35rem;
	border-block-start: 1px solid color-mix(in srgb, var(--ar-on-accent) 15%, transparent);
}
.ar-booking__hours dt,
.ar-booking__hours dd { white-space: nowrap; }
.ar-booking__hours dt { color: color-mix(in srgb, var(--ar-on-accent) 75%, transparent); }
.ar-booking__hours dd { margin: 0 0 0 auto; font-variant-numeric: tabular-nums; }

/* ---------- the form ---------- */

/* .ar-form pairs its rows on a two-column grid; here each step is a block
   and lays out its own fields. */
.ar-book { scroll-margin-block-start: var(--wp--preset--spacing--lg); }
.ar-book__form { display: block; }

.ar-book__progress {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0 0 var(--wp--preset--spacing--md);
	padding: 0;
	isolation: isolate;
}
.ar-book__progress li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--ar-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ar-text-2);
}
/* Connector from the previous step's number to this one's. */
.ar-book__progress li + li::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: 0.875rem;
	inset-inline-end: 50%;
	inline-size: 100%;
	block-size: 2px;
	background: var(--ar-border);
}
.ar-book__progress li.is-done + li::before { background: var(--ar-success); }
.ar-book__progress [aria-current="step"] { color: var(--ar-text); font-weight: 600; }

.ar-book__num {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2px solid var(--ar-border);
	background: var(--ar-bg);
	color: var(--ar-text-2);
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0;
}
.ar-book__progress [aria-current="step"] .ar-book__num,
.ar-book__legend .ar-book__num {
	border-color: var(--ar-btn-bg);
	background: var(--ar-btn-bg);
	color: var(--ar-on-accent);
}
.ar-book__progress .is-done .ar-book__num {
	border-color: var(--ar-success);
	color: var(--ar-success);
}

.ar-book__step {
	border: 0;
	margin: 0 0 var(--wp--preset--spacing--md);
	padding: 0;
	min-inline-size: 0;
}
.ar-book__legend {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	padding: 0;
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	text-transform: uppercase;
	color: var(--ar-text);
}
/* Focus lands here on every step change so a screen reader announces the
   step; a ring around a heading would only look like a stray selection. */
.ar-book__legend:focus { outline: none; }

.ar-book__hint,
.ar-book__note,
.ar-book__terms {
	color: var(--ar-text-2);
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 0 0 1rem;
}
.ar-book__note { margin-block: 0.6rem 0; }
.ar-book__hint a[href^="tel:"] { white-space: nowrap; }
.ar-book__terms {
	border-inline-start: 3px solid var(--ar-btn-bg);
	padding-inline-start: 0.75rem;
}
/* Stepped: the terms belong to the review step. Without the script they
   sit above the one submit button. */
.ar-book.is-stepped:not([data-ar-current="review"]) .ar-book__terms { display: none; }

/* Visually hidden, still focusable and still in the form. */
.ar-book__option input,
.ar-book__day input,
.ar-book__time input {
	position: absolute;
	opacity: 0;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	padding: 0;
	pointer-events: none;
}
.ar-book__option:has(:focus-visible),
.ar-book__day:has(:focus-visible),
.ar-book__time:has(:focus-visible) {
	outline: 3px solid color-mix(in srgb, var(--ar-accent) 50%, transparent);
	outline-offset: 2px;
}

/* step 1 — service cards */
.ar-book__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
	gap: 0.6rem;
}
.ar-form .ar-book__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius);
	background: var(--ar-surface);
	font-family: var(--ar-font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color var(--ar-ease), box-shadow var(--ar-ease);
}
/* The radio dot, drawn by the label so it can follow the brand red. */
.ar-book__option::before {
	content: "";
	flex: none;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2px solid var(--ar-text-2);
}
.ar-book__option:hover { border-color: var(--ar-accent); }
.ar-book__option:has(:checked) {
	border-color: var(--ar-btn-bg);
	box-shadow: inset 0 0 0 1px var(--ar-btn-bg);
}
.ar-book__option:has(:checked)::before { border: 5px solid var(--ar-btn-bg); }

/* step 2 — vehicle */
.ar-book__vehicle {
	display: grid;
	grid-template-columns: minmax(6.5rem, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--sm);
}
/* components.css spans every .ar-form__row holding a select (the contact
   form's layout); here year, make and model share one row. */
.ar-book__vehicle > .ar-form__row { grid-column: auto; }

/* step 3 — calendar + times */
.ar-book__days,
.ar-book__times {
	border: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	min-inline-size: 0;
}
.ar-book__sublegend {
	margin: 0 0 0.6rem;
	padding: 0;
	font-family: var(--ar-font-display);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ar-text-2);
}
.ar-book__month {
	margin-inline-start: 0.35rem;
	color: var(--ar-text);
	letter-spacing: 0.02em;
}
.ar-book__cal {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.35rem;
	max-inline-size: 27rem;
}
.ar-book__dow {
	padding-block: 0.25rem;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--ar-text-2);
}
.ar-form .ar-book__day {
	position: relative;
	display: grid;
	place-content: center;
	justify-items: center;
	min-block-size: 2.75rem;
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-sm);
	background: var(--ar-surface);
	font-family: var(--ar-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	cursor: pointer;
}
.ar-book__day:not(.is-off):hover { border-color: var(--ar-accent); }
.ar-book__day:has(:checked) {
	border-color: var(--ar-btn-bg);
	background: var(--ar-btn-bg);
	color: var(--ar-on-accent);
}
.ar-book__day.is-off {
	border-color: transparent;
	background: transparent;
	color: var(--ar-text-2);
	font-weight: 400;
	opacity: 0.5;
	cursor: default;
}
.ar-book__mon {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ar-book__timegrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
	gap: 0.45rem;
}
.ar-form .ar-book__time {
	position: relative;
	display: grid;
	place-items: center;
	padding: 0.65rem 0.5rem;
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-sm);
	background: var(--ar-surface);
	font-family: var(--ar-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}
.ar-book__time:not(.is-off):hover { border-color: var(--ar-accent); }
.ar-book__time:has(:checked) {
	border-color: var(--ar-btn-bg);
	background: var(--ar-btn-bg);
	color: var(--ar-on-accent);
}
.ar-book__time.is-off {
	color: var(--ar-text-2);
	text-decoration: line-through;
	opacity: 0.45;
	cursor: not-allowed;
}

/* step 4 — details: name full width, phone + email paired, notes full */
.ar-book__details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--sm);
}
.ar-book__details > :first-child,
.ar-book__notes { grid-column: 1 / -1; }
.ar-book__optional { font-weight: 400; color: var(--ar-text-2); }
.ar-book__notes textarea { min-block-size: 6rem; }

/* step 5 — review, and the "request received" panel */
.ar-book__summary {
	margin: 0 0 1rem;
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius);
	background: var(--ar-surface);
	text-align: start;
}
.ar-book__summary > div {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: 0.2rem 1rem;
	align-items: baseline;
	padding: 0.75rem 1rem;
}
.ar-book__summary > div + div { border-block-start: 1px solid var(--ar-border); }
.ar-book__summary dt {
	font-family: var(--ar-font-display);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ar-text-2);
}
.ar-book__summary dd {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	overflow-wrap: anywhere;
	white-space: pre-line;
}
.ar-book__edit {
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ar-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* nav */
.ar-book__nav {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	margin-block-start: var(--wp--preset--spacing--md);
}
.ar-book__nav .ar-btn {
	justify-content: center;
	border: 1px solid transparent;
	font-size: 0.9375rem;
	padding-block: 0.85em;
	cursor: pointer;
}
.ar-book__nav .ar-btn--ghost { border-color: var(--ar-border); }
.ar-book__nav [data-ar-next],
.ar-book__nav [data-ar-submit] { flex: 1 1 auto; }
.ar-book__nav .ar-btn:disabled {
	opacity: 0.6;
	transform: none;
	cursor: progress;
}

/* request received */
.ar-book__done {
	border: 1px solid var(--ar-border);
	border-radius: var(--ar-radius-lg);
	background: var(--ar-surface);
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	text-align: center;
}
.ar-book__doneicon {
	box-sizing: content-box;
	padding: 0.75rem;
	border-radius: 50%;
	color: var(--ar-success);
	background: color-mix(in srgb, var(--ar-success) 14%, transparent);
}
.ar-book__donehead {
	margin: 0.75rem 0 1rem;
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem);
	text-transform: uppercase;
}
.ar-book__donelead {
	margin: 0 auto;
	max-inline-size: 40ch;
	color: var(--ar-text-2);
	line-height: 1.55;
}
.ar-book__doneactions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--sm);
	margin: 1.25rem 0 0;
}

/* ---------- narrow screens ---------- */

@media (max-width: 48rem) {
	.ar-booking__grid { grid-template-columns: 1fr; }
	.ar-booking__aside { position: static; }
}
@media (max-width: 30rem) {
	.ar-book__vehicle,
	.ar-book__details { grid-template-columns: 1fr; }
	.ar-book__summary > div { grid-template-columns: 1fr; }
	/* Five labels don't fit a phone; keep only the current step's. */
	.ar-book__progress li:not([aria-current]) > span:last-child {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.ar-book__progress [aria-current="step"] > span:last-child { white-space: nowrap; }
}