/*
 * TLC Booking Wizard styles — Phase 2 premium redesign.
 * Reuses the theme's existing design tokens (--color-*, --space-*, --radius-*,
 * --shadow-*, --motion-*, .cta button classes) rather than introducing a
 * parallel colour/spacing system, so the wizard reads as part of the core
 * product. Fallback values below are corrected to match the live token
 * values (theme/tlc-enterprise/src/css/tokens/*.css) in case this stylesheet
 * is ever loaded before the theme's token stylesheet.
 *
 * Presentation only: no selector here changes the JS DOM contract
 * ([data-tlc-*], [data-step], [data-conditional], [data-triage-group]) that
 * assets/js/booking-wizard.js and class-tlc-booking-wizard-shortcode.php
 * both depend on.
 */

.tlc-booking-wizard {
	--tlcbw-primary: var(--color-primary, #1e40af);
	--tlcbw-primary-dark: var(--color-primary-dark, #0f2a7a);
	--tlcbw-primary-light: var(--color-primary-light, #dbe6fb);
	--tlcbw-brand-dark: var(--color-brand-dark, #081d3a);
	--tlcbw-error: var(--color-urgency, #c22a1e);
	--tlcbw-error-bg: #fdecea;
	--tlcbw-error-text: #611a15;

	/* Phase 4: no boxed "card floating in a page" treatment at this, the
	   outermost level — elevation/border/radius are reserved for genuinely
	   smaller components inside the journey (cards, the summary panel, the
	   loading toast). The journey itself IS the page, edge to edge. */
	max-width: none;
	margin: 0 auto;
	background: var(--color-neutral-0, #fff);
	font-family: var(--font-family-base, "Inter", system-ui, sans-serif);
	/* The landing->wizard reveal (booking-wizard.js) calls
	   root.scrollIntoView({block:'start'}) — without this, native
	   scrollIntoView aligns the wizard flush with the viewport top, which
	   is then covered by the sitewide sticky .site-header (~4.5rem),
	   hiding the call banner and trust strip underneath it. */
	scroll-margin-top: 4.5rem;
}

/* ---------------------------------------------------------------------
 * Sticky emergency call banner — brand blue per TLC Next Owner Decision 2
 * (red is reserved for errors/validation only, never the emergency CTA).
 * ------------------------------------------------------------------- */
.tlc-booking-wizard__call-sticky {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 0.5rem);
	position: sticky;
	/* The sitewide .site-header (src/css/components.css) is itself sticky,
	   top: 0, z-index: 100, min-height 4.25rem — without this offset the
	   site header covers this banner completely instead of stacking below it. */
	top: 4.5rem;
	z-index: 5;
	padding: 0.85rem var(--space-6, 1.5rem);
	background: var(--tlcbw-primary-dark);
	color: var(--color-neutral-0, #fff);
	text-align: center;
	font-weight: var(--font-weight-bold, 700);
	text-decoration: none;
	letter-spacing: 0.01em;
}
.tlc-booking-wizard__call-sticky::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: #4ade80;
	flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__call-sticky::before {
		animation: tlcbw-pulse 2s ease-in-out infinite;
	}
}
.tlc-booking-wizard__call-sticky:focus-visible {
	outline: 3px solid var(--color-focus-on-dark, #7fa8ff);
	outline-offset: -3px;
}

/* ---------------------------------------------------------------------
 * Header: brand strip + trust signals + progress indicator.
 * ------------------------------------------------------------------- */
.tlc-booking-wizard__header {
	padding: var(--space-4, 1rem) var(--space-6, 1.5rem) 0;
	background: linear-gradient(180deg, var(--color-neutral-50, #f7f8fa) 0%, var(--color-neutral-0, #fff) 100%);
}
@media (min-width: 900px) {
	.tlc-booking-wizard__header {
		/* CTO UX requirement (viewport-fit wizard): was --space-8 (3rem) —
		   the single biggest header-area saving available without losing
		   the trust strip/progress indicator, which stay in place. */
		padding: var(--space-5, 1.25rem) var(--space-8, 3rem) 0;
	}
}

.tlc-booking-wizard__trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
	list-style: none;
	margin: 0 0 var(--space-3, 0.75rem);
	padding: 0;
	font-size: var(--font-size-small, 0.875rem);
	color: var(--color-neutral-600, #4b5160);
}
.tlc-booking-wizard__trust-strip li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: var(--font-weight-medium, 500);
}
.tlc-booking-wizard__trust-strip li::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--tlcbw-primary-light);
	color: var(--tlcbw-primary-dark);
	font-size: 0.65rem;
	font-weight: var(--font-weight-bold, 700);
	flex-shrink: 0;
}

.tlc-booking-wizard__progress {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0 0 var(--space-3, 0.75rem);
	padding: 0;
	counter-reset: tlcbw-step;
}
.tlc-booking-wizard__progress li {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	text-align: center;
	color: var(--color-neutral-500, #6b7280);
	counter-increment: tlcbw-step;
}
.tlc-booking-wizard__progress li:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 1.1rem;
	right: 50%;
	width: 100%;
	height: 3px;
	background: var(--color-neutral-200, #dee1e6);
	z-index: 0;
	transform: translateX(-1.1rem);
}
.tlc-booking-wizard__progress li[data-done]:not(:first-child)::before,
.tlc-booking-wizard__progress li[data-current]:not(:first-child)::before {
	background: var(--tlcbw-primary);
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__progress li::before {
		transition: background var(--motion-duration-slow, 250ms) var(--motion-easing-standard, ease);
	}
}
.tlc-booking-wizard__progress .tlcbw-dot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-neutral-0, #fff);
	border: 2px solid var(--color-neutral-300, #c4c9d1);
	color: var(--color-neutral-500, #6b7280);
	font-weight: var(--font-weight-bold, 700);
	font-size: 0.9rem;
}
.tlc-booking-wizard__progress .tlcbw-dot::after {
	content: counter(tlcbw-step);
}
.tlc-booking-wizard__progress li span.tlcbw-label {
	/* 7 labels at once need real room — below ~600px they wrap/crowd into
	   an unreadable row, so icon+number only until there's space, same
	   threshold this indicator used pre-Phase-4, restored deliberately
	   after this exact crowding showed up in mobile screenshot QA. */
	display: none;
	font-size: 0.65rem;
}
@media (min-width: 600px) {
	.tlc-booking-wizard__progress li span.tlcbw-label {
		display: block;
	}
}
.tlc-booking-wizard__progress li[data-current] {
	color: var(--tlcbw-brand-dark);
	font-weight: var(--font-weight-bold, 700);
}
.tlc-booking-wizard__progress li[data-current] .tlcbw-dot {
	border-color: var(--tlcbw-primary);
	background: var(--tlcbw-primary);
	color: var(--color-neutral-0, #fff);
	box-shadow: 0 0 0 5px var(--tlcbw-primary-light);
}
.tlc-booking-wizard__progress li[data-done] {
	color: var(--tlcbw-primary-dark);
}
.tlc-booking-wizard__progress li[data-done] .tlcbw-dot {
	border-color: var(--tlcbw-primary);
	background: var(--tlcbw-primary);
	color: var(--color-neutral-0, #fff);
}
.tlc-booking-wizard__progress li[data-done] .tlcbw-dot::after {
	content: "\2713";
	font-size: 1rem;
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__progress li[data-done] .tlcbw-dot {
		animation: tlcbw-tick-celebrate 500ms var(--motion-easing-standard, ease);
	}
}

.tlc-booking-wizard__errors {
	margin: 0 var(--space-6, 1.5rem) var(--space-5, 1.25rem);
	padding: var(--space-4, 1rem);
	border: 2px solid var(--tlcbw-error);
	border-radius: var(--radius-interactive, 0.375rem);
	background: var(--tlcbw-error-bg);
	color: var(--tlcbw-error-text);
}
.tlc-booking-wizard__errors ul {
	margin: var(--space-2, 0.5rem) 0 0;
	padding-left: 1.25rem;
}
.tlc-booking-wizard__errors a {
	color: inherit;
}

/* Screen-reader-only live region (same technique as WordPress core's own
   .screen-reader-text, duplicated here so this stylesheet doesn't depend
   on the theme happening to load first): announce()-driven "Step X of Y:
   …" messages exist for assistive tech, not as visible page content — the
   heading/eyebrow above and the progress dots already give sighted users
   that context. Previously rendered as a plain visible line (a real,
   avoidable chunk of vertical space on every step); the CTO viewport-fit
   requirement is what surfaced it. */
.tlc-booking-wizard__status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------
 * Step banner: per-stage photography + heading + supporting copy, so no
 * two stages look identical.
 * ------------------------------------------------------------------- */
.tlc-booking-wizard__step {
	padding: 0 0 var(--space-4, 1rem);
}
.tlc-booking-wizard__step[hidden] {
	display: none;
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__step:not([hidden]) {
		animation: tlcbw-fade-in 400ms var(--motion-easing-standard, ease);
	}
	/* Staggered reveal on the selection grids — each card/option settles in
	   a beat after the last, rather than the whole grid arriving at once.
	   Small, quick (<640ms total), never blocks interaction. */
	.tlc-booking-wizard__step:not([hidden]) .tlc-booking-wizard__card,
	.tlc-booking-wizard__step:not([hidden]) .tlc-booking-wizard__option {
		animation: tlcbw-fade-in 400ms var(--motion-easing-standard, ease) both;
	}
	.tlc-booking-wizard__cards .tlc-booking-wizard__card:nth-child(1) { animation-delay: 40ms; }
	.tlc-booking-wizard__cards .tlc-booking-wizard__card:nth-child(2) { animation-delay: 80ms; }
	.tlc-booking-wizard__cards .tlc-booking-wizard__card:nth-child(3) { animation-delay: 120ms; }
	.tlc-booking-wizard__cards .tlc-booking-wizard__card:nth-child(4) { animation-delay: 160ms; }
	.tlc-booking-wizard__cards .tlc-booking-wizard__card:nth-child(5) { animation-delay: 200ms; }
	.tlc-booking-wizard__cards .tlc-booking-wizard__card:nth-child(6) { animation-delay: 240ms; }
	.tlc-booking-wizard__cards .tlc-booking-wizard__card:nth-child(n+7) { animation-delay: 280ms; }
	.tlc-booking-wizard__options .tlc-booking-wizard__option:nth-child(1) { animation-delay: 40ms; }
	.tlc-booking-wizard__options .tlc-booking-wizard__option:nth-child(2) { animation-delay: 90ms; }
	.tlc-booking-wizard__options .tlc-booking-wizard__option:nth-child(3) { animation-delay: 140ms; }
	.tlc-booking-wizard__options .tlc-booking-wizard__option:nth-child(4) { animation-delay: 190ms; }
	.tlc-booking-wizard__options .tlc-booking-wizard__option:nth-child(n+5) { animation-delay: 240ms; }
}

/* Compact step header — CTO UX requirement (2026-07-25): steps must fit a
   standard laptop viewport with no scrolling. The previous per-step full-
   width photo (up to 46vh) is gone; eyebrow + heading + optional short
   intro only, tight vertical rhythm, no image to lay out around. */
.tlc-booking-wizard__banner {
	display: block;
	margin: 0 0 var(--space-3, 0.75rem);
	background: var(--color-neutral-0, #fff);
}
.tlc-booking-wizard__banner-content {
	max-width: 40rem;
	margin: 0 auto;
	padding: 0 var(--space-6, 1.5rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}
.tlc-booking-wizard__step-eyebrow {
	display: inline-flex;
	align-self: flex-start;
	margin: 0 0 var(--space-2, 0.5rem);
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-full, 999px);
	background: var(--tlcbw-primary-light);
	font-size: 0.7rem;
	font-weight: var(--font-weight-bold, 700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tlcbw-primary-dark);
}
.tlcbw-banner-heading {
	font-size: var(--font-size-h3, clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem));
	font-weight: var(--font-weight-bold, 700);
	line-height: var(--line-height-heading, 1.15);
	letter-spacing: -0.01em;
	color: var(--tlcbw-brand-dark);
	margin: 0;
	padding: 0;
}
.tlc-booking-wizard__step > legend {
	/* Legend rendered inside the banner via render_step_banner(); the
	   fieldset's own <legend> stays for accessible-name purposes but is
	   visually hidden once a banner legend already presents the heading. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.tlc-booking-wizard__step-intro {
	margin: var(--space-2, 0.5rem) 0 0;
	font-size: 0.9375rem;
	line-height: var(--line-height-body, 1.55);
	color: var(--color-neutral-600, #4b5160);
	max-width: var(--max-line-length, 65ch);
}

.tlc-booking-wizard__step-body {
	max-width: 40rem;
	margin: 0 auto;
	padding: 0 var(--space-6, 1.5rem) var(--space-3, 0.75rem);
}
/* Step 1 only: a wider reading column so the service grid can run 3-up on
   a laptop viewport (10 cards at 2-up is 5 rows — too tall to fit; 3-up is
   4 rows) without the cards themselves feeling cramped. */
.tlc-booking-wizard__step[data-step="1"] .tlc-booking-wizard__step-body {
	max-width: 54rem;
}

@media (min-width: 700px) {
	.tlc-booking-wizard__banner-content {
		padding: 0 var(--space-8, 3rem);
	}
	.tlc-booking-wizard__step-body {
		padding: 0 var(--space-8, 3rem) var(--space-3, 0.75rem);
	}
	/* Deliberately NOT stepped up to --font-size-h2 here as it was
	   pre-viewport-fit: this heading now sits in a compact utility header,
	   not next to a large hero image, so it stays the same size as mobile. */
}

.tlc-booking-wizard__reassurance {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
	margin: 0 0 var(--space-2, 0.5rem);
	background: var(--color-neutral-50, #f7f8fa);
	border-left: 3px solid var(--tlcbw-primary);
	border-radius: 0 var(--radius-interactive, 0.375rem) var(--radius-interactive, 0.375rem) 0;
	font-size: var(--font-size-small, 0.875rem);
	color: var(--color-neutral-700, #343a46);
}

.tlc-booking-wizard__step legend {
	font-size: var(--font-size-h4, 1.25rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--tlcbw-brand-dark);
	margin-bottom: var(--space-4, 1rem);
	padding: 0;
}

.tlc-booking-wizard__field {
	margin-bottom: var(--space-3, 0.75rem);
}
.tlc-booking-wizard__field label,
.tlc-booking-wizard__label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: var(--font-weight-bold, 700);
	color: var(--tlcbw-brand-dark);
}
.tlc-booking-wizard__field input[type="text"],
.tlc-booking-wizard__field input[type="tel"],
.tlc-booking-wizard__field input[type="email"],
.tlc-booking-wizard__field input[type="date"],
.tlc-booking-wizard__field input[type="file"],
.tlc-booking-wizard__field textarea {
	width: 100%;
	padding: 0.9rem 1rem;
	background: var(--color-neutral-0, #fff);
	border: 1.5px solid var(--color-neutral-300, #c4c9d1);
	border-radius: var(--radius-interactive, 0.375rem);
	font: inherit;
	color: var(--color-neutral-900, #14161b);
	min-height: 3.25rem;
}
.tlc-booking-wizard__field textarea {
	min-height: 6.5rem;
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__field input,
	.tlc-booking-wizard__field textarea,
	.tlc-booking-wizard__card,
	.tlc-booking-wizard__option {
		transition: border-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
			box-shadow var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
			transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
	}
	.tlc-booking-wizard__option::before {
		transition: width var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
	}
}
.tlc-booking-wizard__field input:hover,
.tlc-booking-wizard__field textarea:hover {
	border-color: var(--color-neutral-400, #9aa1ad);
}
.tlc-booking-wizard__field input:focus-visible,
.tlc-booking-wizard__field textarea:focus-visible,
.tlc-booking-wizard button:focus-visible,
.tlc-booking-wizard a:focus-visible {
	outline: 3px solid var(--tlcbw-primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Step 1 — branded service selection cards.
 * ------------------------------------------------------------------- */
.tlc-booking-wizard__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3, 0.75rem);
	margin-bottom: var(--space-3, 0.75rem);
}
.tlc-booking-wizard__card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-3, 0.75rem);
	/* Extra inline-end padding reserves room for the absolutely-positioned
	   corner radio (1.35rem, inset 0.75rem from the edge) so long card
	   titles wrap without running underneath it — a real overlap at the
	   narrower 3-up card width introduced by the viewport-fit layout. */
	padding: var(--space-3, 0.75rem) 2rem var(--space-3, 0.75rem) var(--space-3, 0.75rem);
	min-height: 3.5rem;
	background: var(--color-neutral-0, #fff);
	border: 1.5px solid var(--color-neutral-200, #dee1e6);
	border-radius: var(--radius-card, 0.75rem);
	cursor: pointer;
	font-weight: var(--font-weight-medium, 500);
	box-shadow: var(--shadow-resting, 0 1px 2px rgba(8, 29, 58, 0.06));
}
.tlc-booking-wizard__card::before {
	/* Selected-state accent bar — a second, unmistakable "this one's
	   chosen" signal alongside the corner check, so selection reads at a
	   glance rather than requiring a close look at a small radio dot. */
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--tlcbw-primary);
	border-radius: var(--radius-card, 0.75rem) 0 0 var(--radius-card, 0.75rem);
}
.tlc-booking-wizard__card:hover {
	border-color: var(--color-neutral-400, #9aa1ad);
	box-shadow: var(--shadow-raised, 0 4px 8px rgba(8, 29, 58, 0.1));
	transform: translateY(-2px);
}
.tlc-booking-wizard__card:has(input:checked) {
	border-color: var(--tlcbw-primary);
	background: var(--tlcbw-primary-light);
	box-shadow: 0 0 0 1px var(--tlcbw-primary), var(--shadow-raised, 0 4px 8px rgba(8, 29, 58, 0.1));
}
.tlc-booking-wizard__card:has(input:checked)::before {
	width: 4px;
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__card {
		transition: border-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
			box-shadow var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
			transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
	}
	.tlc-booking-wizard__card::before {
		transition: width var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
	}
	.tlc-booking-wizard__card:has(input:checked) {
		animation: tlcbw-card-select 320ms var(--motion-easing-standard, ease);
	}
}
/* The native radio is kept for real interaction/accessibility but visually
   replaced by a corner check-badge — a quieter, more considered selection
   signal than a bare radio dot sitting in the middle of a card. */
.tlc-booking-wizard__card input {
	position: absolute;
	top: var(--space-3, 0.75rem);
	right: var(--space-3, 0.75rem);
	width: 1.35rem;
	height: 1.35rem;
	margin: 0;
	accent-color: var(--tlcbw-primary);
}

/* ---------------------------------------------------------------------
 * Step 2 — illustrated urgency options (emergency gets its own accent,
 * still brand blue per Owner Decision 2, never red).
 * ------------------------------------------------------------------- */
.tlc-booking-wizard__options {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3, 0.75rem);
	margin-bottom: var(--space-2, 0.5rem);
}
.tlc-booking-wizard__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-4, 1rem) 1.5rem;
	min-height: 3.25rem;
	background: var(--color-neutral-0, #fff);
	border: 1.5px solid var(--color-neutral-200, #dee1e6);
	border-radius: var(--radius-card, 0.75rem);
	font-weight: var(--font-weight-medium, 500);
	cursor: pointer;
	box-shadow: var(--shadow-resting, 0 1px 2px rgba(8, 29, 58, 0.06));
}
.tlc-booking-wizard__option::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--tlcbw-primary);
	border-radius: var(--radius-card, 0.75rem) 0 0 var(--radius-card, 0.75rem);
}
.tlc-booking-wizard__option:hover {
	border-color: var(--color-neutral-400, #9aa1ad);
	box-shadow: var(--shadow-raised, 0 4px 8px rgba(8, 29, 58, 0.1));
	transform: translateY(-2px);
}
.tlc-booking-wizard__option:has(input:checked) {
	border-color: var(--tlcbw-primary);
	background: var(--tlcbw-primary-light);
	box-shadow: 0 0 0 1px var(--tlcbw-primary), var(--shadow-raised, 0 4px 8px rgba(8, 29, 58, 0.1));
}
.tlc-booking-wizard__option:has(input:checked)::before {
	width: 4px;
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__option:has(input:checked) {
		animation: tlcbw-card-select 320ms var(--motion-easing-standard, ease);
	}
}
.tlc-booking-wizard__option--emergency {
	border-color: var(--tlcbw-primary-dark);
}
.tlc-booking-wizard__option--emergency:has(input:checked) {
	background: var(--tlcbw-primary-dark);
	border-color: var(--tlcbw-primary-dark);
	color: var(--color-neutral-0, #fff);
}
.tlc-booking-wizard__option--emergency:has(input:checked) .tlcbw-option-icon {
	background: rgba(255, 255, 255, 0.18);
}
.tlcbw-option-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-neutral-100, #eef0f3);
	flex-shrink: 0;
	font-size: 1.1rem;
}

.tlc-booking-wizard__options input,
.tlc-booking-wizard__field input[type="radio"],
.tlc-booking-wizard__field input[type="checkbox"] {
	width: 1.35rem;
	height: 1.35rem;
	flex-shrink: 0;
	accent-color: var(--tlcbw-primary);
}
.tlc-booking-wizard__field label:has(input[type="radio"]),
.tlc-booking-wizard__field label:has(input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	font-weight: var(--font-weight-medium, 500);
	margin-bottom: var(--space-2, 0.5rem);
}

.tlc-booking-wizard__emergency-notice {
	margin-top: var(--space-3, 0.75rem);
	padding: var(--space-3, 0.75rem);
	border: 2px solid var(--tlcbw-error);
	border-radius: var(--radius-interactive, 0.375rem);
	background: var(--tlcbw-error-bg);
	color: var(--tlcbw-error-text);
	font-weight: var(--font-weight-bold, 700);
}

/* ---------------------------------------------------------------------
 * Step 3 — postcode row + loading affordance.
 * ------------------------------------------------------------------- */
.tlc-booking-wizard__postcode-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 0.75rem);
}
.tlc-booking-wizard__postcode-row button {
	width: 100%;
}
[data-tlc-postcode-result] {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 1.25rem;
	margin: var(--space-2, 0.5rem) 0 0;
	font-size: var(--font-size-small, 0.875rem);
	font-weight: var(--font-weight-medium, 500);
}
[data-tlc-postcode-result][data-state="loading"] {
	color: var(--color-neutral-600, #4b5160);
}
[data-tlc-postcode-result][data-state="matched"] {
	color: var(--color-success, #1a7a3c);
}
[data-tlc-postcode-result][data-state="excluded"],
[data-tlc-postcode-result][data-state="unresolved"] {
	color: var(--color-neutral-700, #343a46);
}

/* ---------------------------------------------------------------------
 * Step 5 — photo examples grid.
 * ------------------------------------------------------------------- */
.tlc-booking-wizard__photo-examples {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2, 0.5rem);
	margin: 0 0 var(--space-4, 1rem);
}
.tlc-booking-wizard__photo-example {
	position: relative;
	border-radius: var(--radius-interactive, 0.375rem);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-neutral-100, #eef0f3);
}
.tlc-booking-wizard__photo-example img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tlc-booking-wizard__photo-example span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.3rem 0.5rem;
	background: linear-gradient(0deg, rgba(8, 29, 58, 0.85), transparent);
	color: #fff;
	font-size: 0.65rem;
	font-weight: var(--font-weight-bold, 700);
}

/* ---------------------------------------------------------------------
 * Step 7 — review summary, trust footer.
 * ------------------------------------------------------------------- */
.tlc-booking-wizard__summary dl {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2, 0.5rem) 0;
	margin: 0 0 var(--space-4, 1rem);
	padding: var(--space-4, 1rem);
	background: var(--color-neutral-50, #f7f8fa);
	border-radius: var(--radius-card, 0.75rem);
}
.tlc-booking-wizard__summary dt {
	font-weight: var(--font-weight-bold, 700);
	color: var(--tlcbw-brand-dark);
	font-size: var(--font-size-small, 0.875rem);
}
.tlc-booking-wizard__summary dd {
	margin: 0 0 var(--space-3, 0.75rem);
}
.tlc-booking-wizard__summary button.tlc-booking-wizard__edit-link {
	background: none;
	border: none;
	color: var(--tlcbw-primary);
	text-decoration: underline;
	font: inherit;
	cursor: pointer;
	padding: 0;
}

.tlc-booking-wizard__review-trust {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2, 0.5rem);
	margin: 0 0 var(--space-4, 1rem);
	list-style: none;
	padding: 0;
}
.tlc-booking-wizard__review-trust li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
	background: var(--color-neutral-50, #f7f8fa);
	border-radius: var(--radius-interactive, 0.375rem);
	font-size: var(--font-size-small, 0.875rem);
	color: var(--color-neutral-700, #343a46);
}
.tlc-booking-wizard__review-trust li::before {
	content: "\2713";
	color: var(--tlcbw-primary);
	font-weight: var(--font-weight-bold, 700);
}

/* ---------------------------------------------------------------------
 * Skeleton loading placeholders — used while the review summary/
 * appointment messaging is being (re)built, so the page never looks idle.
 * ------------------------------------------------------------------- */
.tlcbw-skeleton {
	display: grid;
	gap: var(--space-2, 0.5rem);
	padding: var(--space-4, 1rem);
	background: var(--color-neutral-50, #f7f8fa);
	border-radius: var(--radius-card, 0.75rem);
}
.tlcbw-skeleton-line {
	height: 0.85rem;
	border-radius: var(--radius-full, 999px);
	background: linear-gradient(90deg, var(--color-neutral-200, #dee1e6) 25%, var(--color-neutral-100, #eef0f3) 37%, var(--color-neutral-200, #dee1e6) 63%);
	background-size: 400% 100%;
	width: 100%;
}
.tlcbw-skeleton-line:nth-child(3n+1) { width: 40%; }
.tlcbw-skeleton-line:nth-child(3n+2) { width: 85%; }
@media (prefers-reduced-motion: no-preference) {
	.tlcbw-skeleton-line {
		animation: tlcbw-shimmer 1.4s ease-in-out infinite;
	}
}
@media (prefers-reduced-motion: reduce) {
	.tlcbw-skeleton-line {
		background: var(--color-neutral-200, #dee1e6);
	}
}

/* ---------------------------------------------------------------------
 * Branded loading overlay — shown for postcode checks and submission.
 * Rotating, reassuring copy is written into [data-tlc-loading-message]
 * by JS; this is purely presentational chrome around that text.
 * ------------------------------------------------------------------- */
.tlcbw-loading {
	display: flex;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-4, 1rem);
	background: var(--color-neutral-0, #fff);
	border: 1px solid var(--color-neutral-200, #dee1e6);
	border-radius: var(--radius-card, 0.75rem);
	box-shadow: var(--shadow-raised, 0 4px 8px rgba(8, 29, 58, 0.1));
}
.tlcbw-loading[hidden] {
	display: none;
}
.tlcbw-spinner {
	position: relative;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	border-radius: 50%;
	border: 3px solid var(--tlcbw-primary-light);
	border-top-color: var(--tlcbw-primary);
}
@media (prefers-reduced-motion: no-preference) {
	.tlcbw-spinner {
		animation: tlcbw-spin 0.8s linear infinite;
	}
}
.tlcbw-loading-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.tlcbw-loading-message {
	font-weight: var(--font-weight-medium, 500);
	color: var(--tlcbw-brand-dark);
}
.tlcbw-loading-submessage {
	font-size: var(--font-size-small, 0.875rem);
	color: var(--color-neutral-500, #6b7280);
}
.tlcbw-loading-bar {
	position: relative;
	margin-top: 0.4rem;
	height: 4px;
	width: 100%;
	background: var(--color-neutral-100, #eef0f3);
	border-radius: var(--radius-full, 999px);
	overflow: hidden;
}
.tlcbw-loading-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 40%;
	background: var(--tlcbw-primary);
	border-radius: var(--radius-full, 999px);
}
@media (prefers-reduced-motion: no-preference) {
	.tlcbw-loading-bar::after {
		animation: tlcbw-loading-bar 1.1s ease-in-out infinite;
	}
}

/* Inline (small) loading affordance for the postcode "Check my area" flow. */
.tlcbw-loading-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.tlcbw-spinner--small {
	width: 1rem;
	height: 1rem;
	border-width: 2px;
}

/* ---------------------------------------------------------------------
 * Submit button micro-interaction + honeypot + nav.
 * ------------------------------------------------------------------- */
.tlc-booking-wizard__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tlc-booking-wizard__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3, 0.75rem);
	margin-top: var(--space-3, 0.75rem);
}
.tlc-booking-wizard__nav button,
.tlc-booking-wizard__nav a {
	min-height: 3.25rem;
	flex: 1 1 auto;
	border-radius: var(--radius-interactive, 0.375rem);
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__nav button,
	.tlc-booking-wizard__nav a {
		transition: transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
			box-shadow var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
	}
	.tlc-booking-wizard__nav button:active,
	.tlc-booking-wizard__nav a:active {
		transform: scale(0.98);
	}
}
.tlc-booking-wizard button[data-tlc-next].tlcbw-ready,
.tlc-booking-wizard button[data-tlc-submit].tlcbw-ready {
	box-shadow: 0 0 0 4px var(--tlcbw-primary-light);
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard button[data-tlc-next].tlcbw-ready,
	.tlc-booking-wizard button[data-tlc-submit].tlcbw-ready {
		animation: tlcbw-ready-pulse var(--motion-duration-slow, 250ms) var(--motion-easing-standard, ease);
	}
}

/* ---------------------------------------------------------------------
 * Completion sequence + confirmation screen.
 * ------------------------------------------------------------------- */
.tlc-booking-wizard__completion {
	padding: var(--space-6, 1.5rem);
	text-align: center;
}
.tlc-booking-wizard__completion-steps {
	display: grid;
	gap: var(--space-3, 0.75rem);
	max-width: 22rem;
	margin: var(--space-5, 1.25rem) auto 0;
	text-align: left;
}
.tlc-booking-wizard__completion-step {
	display: flex;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-3, 0.75rem);
	border-radius: var(--radius-interactive, 0.375rem);
	background: var(--color-neutral-50, #f7f8fa);
	color: var(--color-neutral-400, #9aa1ad);
	font-weight: var(--font-weight-medium, 500);
}
.tlc-booking-wizard__completion-step .tlcbw-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	border: 2px solid var(--color-neutral-300, #c4c9d1);
	flex-shrink: 0;
	font-size: 0.8rem;
}
.tlc-booking-wizard__completion-step[data-tlcbw-done] {
	background: var(--tlcbw-primary-light);
	color: var(--tlcbw-brand-dark);
}
.tlc-booking-wizard__completion-step[data-tlcbw-done] .tlcbw-check {
	background: var(--tlcbw-primary);
	border-color: var(--tlcbw-primary);
	color: #fff;
}
.tlc-booking-wizard__completion-step[data-tlcbw-done] .tlcbw-check::after {
	content: "\2713";
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__completion-step[data-tlcbw-done] {
		animation: tlcbw-fade-in var(--motion-duration-base, 200ms) var(--motion-easing-standard, ease);
	}
}

.tlc-booking-wizard__confirmation {
	max-width: 36rem;
	margin: 0 auto;
	padding: var(--space-8, 3rem) var(--space-6, 1.5rem);
	text-align: center;
}
.tlc-booking-wizard__confirmation h2 {
	font-size: var(--font-size-h1, clamp(2rem, 1.6rem + 2vw, 3.25rem));
	letter-spacing: -0.01em;
	color: var(--tlcbw-brand-dark, var(--color-brand-dark, #081d3a));
	margin: 0 0 var(--space-3, 0.75rem);
}
.tlc-booking-wizard__confirmation .tlc-booking-wizard__reference {
	display: inline-block;
	margin: var(--space-4, 1rem) 0;
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	background: var(--tlcbw-primary-light);
	border-radius: var(--radius-interactive, 0.375rem);
	font-size: var(--font-size-h4, 1.25rem);
	color: var(--tlcbw-brand-dark);
}
.tlc-booking-wizard__confirmation-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	margin: 0 auto var(--space-4, 1rem);
	border-radius: 50%;
	background: var(--tlcbw-primary);
	color: #fff;
	font-size: 2.25rem;
	box-shadow: 0 0 0 8px var(--tlcbw-primary-light);
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__confirmation-icon {
		animation: tlcbw-tick-celebrate 600ms var(--motion-easing-standard, ease);
	}
}

/* ---------------------------------------------------------------------
 * Keyframes.
 * ------------------------------------------------------------------- */
@keyframes tlcbw-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes tlcbw-tick-in {
	from { transform: scale(0.7); }
	to { transform: scale(1); }
}
@keyframes tlcbw-tick-celebrate {
	0% { transform: scale(0.7); box-shadow: 0 0 0 0 var(--tlcbw-primary-light); }
	55% { transform: scale(1.15); box-shadow: 0 0 0 6px var(--tlcbw-primary-light); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
@keyframes tlcbw-card-select {
	0% { transform: scale(1); }
	45% { transform: scale(1.025); }
	100% { transform: scale(1); }
}
@keyframes tlcbw-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}
@keyframes tlcbw-spin {
	to { transform: rotate(360deg); }
}
@keyframes tlcbw-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}
@keyframes tlcbw-loading-bar {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(250%); }
}
@keyframes tlcbw-ready-pulse {
	0% { box-shadow: 0 0 0 0 var(--tlcbw-primary-light); }
	100% { box-shadow: 0 0 0 4px var(--tlcbw-primary-light); }
}

/* ---------------------------------------------------------------------
 * Responsive.
 * ------------------------------------------------------------------- */
@media (min-width: 700px) {
	.tlc-booking-wizard__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tlc-booking-wizard__postcode-row {
		flex-direction: row;
	}
	.tlc-booking-wizard__postcode-row input {
		flex: 1;
	}
	.tlc-booking-wizard__postcode-row button {
		width: auto;
	}
	.tlc-booking-wizard__nav button,
	.tlc-booking-wizard__nav a {
		flex: 0 0 auto;
	}
	.tlc-booking-wizard__review-trust {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.tlc-booking-wizard__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* CTO UX requirement (viewport-fit wizard): 10 service cards at 2-up is
	   5 rows — too tall for a laptop viewport. 3-up is 4 rows, paired with
	   .tlc-booking-wizard__step-body's wider max-width for step 1 above. */
	.tlc-booking-wizard__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =======================================================================
 * Phase 3 — CTO UX architecture: landing page, persistent live summary,
 * progress bar, human-language card layout, redesigned confirmation.
 * Still entirely token-driven, still presentation-only.
 * ===================================================================== */

.tlc-booking-journey {
	/* The journey now controls overall page width (the wizard/landing no
	   longer cap themselves) — wide enough to feel like a full digital
	   product, not the site's narrow article measure, while still landing
	   short of a literally edge-to-edge 100vw reading width on very large
	   monitors. Individual sections (banners, the hero) break out further
	   still via full-bleed treatment, see .tlcbw-full-bleed. */
	max-width: 90rem;
	margin: 0 auto;
}

/* --- Landing screen ---------------------------------------------------- */
.tlc-booking-landing {
	/* Un-boxed, same rationale as .tlc-booking-wizard above. */
	background: var(--color-neutral-0, #fff);
	font-family: var(--font-family-base, "Inter", system-ui, sans-serif);
}

.tlc-booking-landing__hero {
	position: relative;
	/* True edge-to-edge breakout: this is the one screen with no sidebar
	   layout to conflict with, so it can go all the way to the viewport
	   edge — the "large immersive image" the brand-experience brief calls
	   for, at its most literal. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: var(--space-8, 3rem) var(--space-6, 1.5rem);
	min-height: 32rem;
	display: flex;
	align-items: center;
	/* Photo URL applied inline by PHP (render_landing()) via
	   get_template_directory_uri() — a relative CSS url() cannot safely
	   cross the plugins/ <-> themes/ directory boundary. This gradient is
	   the fallback if that inline style is ever stripped. A deeper, more
	   deliberate duotone (brand navy -> primary) reads as designed rather
	   than a generic dark-overlay-on-stock-photo treatment. */
	background: linear-gradient(160deg, rgba(8, 29, 58, 0.95) 0%, rgba(8, 29, 58, 0.75) 45%, rgba(30, 64, 175, 0.68) 100%);
	background-size: cover;
	background-position: center;
	color: var(--color-neutral-0, #fff);
	text-align: center;
}
.tlc-booking-landing__hero-inner {
	max-width: 42rem;
	margin: 0 auto;
}
.tlc-booking-landing__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3, 0.75rem);
	padding: 0.3rem 0.9rem;
	border-radius: var(--radius-full, 999px);
	background: rgba(255, 255, 255, 0.14);
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold, 700);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.tlc-booking-landing__hero h1 {
	font-size: var(--font-size-h1, clamp(2rem, 1.6rem + 2vw, 3.25rem));
	line-height: var(--line-height-heading, 1.15);
	margin: 0 0 var(--space-3, 0.75rem);
}
.tlc-booking-landing__hero-copy {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.92);
	max-width: var(--max-line-length, 65ch);
	margin: 0 auto var(--space-5, 1.25rem);
}
.tlc-booking-landing__hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3, 0.75rem);
	margin-bottom: var(--space-5, 1.25rem);
}
.tlc-booking-landing__hero-actions .cta {
	min-height: 3.25rem;
	padding-left: var(--space-6, 1.5rem);
	padding-right: var(--space-6, 1.5rem);
}
.tlc-booking-landing__hero-actions .cta--secondary {
	color: var(--color-neutral-0, #fff);
	border-color: var(--color-border-on-dark, rgba(255, 255, 255, 0.6));
	background: rgba(255, 255, 255, 0.08);
}
.tlc-booking-landing__hero-actions .cta--secondary:hover {
	background: rgba(255, 255, 255, 0.16);
}
.tlc-booking-landing__trust-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--font-size-small, 0.875rem);
	color: rgba(255, 255, 255, 0.9);
}
.tlc-booking-landing__trust-strip li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}
.tlc-booking-landing__trust-strip li::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.65rem;
	font-weight: var(--font-weight-bold, 700);
}

.tlc-booking-landing__section {
	padding: var(--space-6, 1.5rem);
	border-top: 1px solid var(--color-neutral-100, #eef0f3);
}
@media (min-width: 700px) {
	.tlc-booking-landing__section {
		padding: var(--space-8, 3rem);
	}
}
.tlc-booking-landing__section h2 {
	font-size: var(--font-size-h3, 1.5rem);
	color: var(--color-brand-dark, #081d3a);
	margin: 0 0 var(--space-4, 1rem);
}

.tlc-booking-landing__services {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3, 0.75rem);
}
.tlc-booking-landing__service-card {
	display: flex;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-4, 1rem);
	min-height: 3.5rem;
	background: var(--color-neutral-0, #fff);
	border: 2px solid var(--color-neutral-200, #dee1e6);
	border-radius: var(--radius-card, 0.75rem);
	cursor: pointer;
	font: inherit;
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-neutral-900, #14161b);
	text-align: left;
}
.tlc-booking-landing__service-card:hover {
	border-color: var(--color-primary, #1e40af);
	box-shadow: var(--shadow-raised, 0 4px 8px rgba(8, 29, 58, 0.1));
}
.tlc-booking-landing__service-title {
	font-size: var(--font-size-small, 0.875rem);
}

.tlc-booking-landing__cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-6, 1.5rem);
	background: var(--color-neutral-50, #f7f8fa);
	border-top: 1px solid var(--color-neutral-100, #eef0f3);
}
.tlc-booking-landing__cta-band p {
	margin: 0;
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-brand-dark, #081d3a);
}

@media (min-width: 700px) {
	.tlc-booking-landing__services {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Two-column layout: wizard + persistent live summary --------------- */
.tlc-booking-wizard__layout {
	display: block;
}
.tlc-booking-wizard__main {
	min-width: 0;
}

.tlc-booking-wizard__summary-panel {
	margin: 0 var(--space-6, 1.5rem) var(--space-6, 1.5rem);
	border: 1px solid var(--color-neutral-200, #dee1e6);
	border-radius: var(--radius-card, 0.75rem);
	background: var(--color-neutral-50, #f7f8fa);
	overflow: hidden;
}
.tlc-booking-wizard__summary-toggle {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	background: none;
	border: none;
	font: inherit;
	font-weight: var(--font-weight-bold, 700);
	color: var(--tlcbw-brand-dark, var(--color-brand-dark, #081d3a));
	cursor: pointer;
}
.tlcbw-summary-chevron {
	transition: transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
}
.tlc-booking-wizard__summary-toggle[aria-expanded="true"] .tlcbw-summary-chevron {
	transform: rotate(180deg);
}
.tlc-booking-wizard__summary-panel-body {
	padding: 0 var(--space-4, 1rem) var(--space-4, 1rem);
}
.tlc-booking-wizard__summary-panel-heading {
	display: none;
}
.tlc-booking-wizard__summary-reassurance {
	margin: 0 0 var(--space-4, 1rem);
	font-size: 0.8rem;
	color: var(--color-neutral-500, #6b7280);
	line-height: var(--line-height-body, 1.55);
}
.tlc-booking-wizard__live-summary {
	display: grid;
	gap: var(--space-2, 0.5rem);
	margin: 0 0 var(--space-4, 1rem);
	padding: 0;
}
.tlc-booking-wizard__live-summary > div {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.6rem;
	border-radius: var(--radius-interactive, 0.375rem);
	font-size: var(--font-size-small, 0.875rem);
}
.tlcbw-live-icon {
	font-size: 0.95rem;
	line-height: 1;
}
.tlc-booking-wizard__live-summary dt {
	margin: 0;
	color: var(--color-neutral-500, #6b7280);
	font-weight: var(--font-weight-medium, 500);
}
.tlc-booking-wizard__live-summary dd {
	grid-column: 3;
	margin: 0;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-full, 999px);
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-neutral-500, #6b7280);
	text-align: right;
}
/* "Filled in" status chip — [data-tlc-filled] is toggled by JS
   (updateLiveSummary()) once a row holds a real value rather than its
   placeholder text; the row gets a light brand tint and the value reads
   as a solid pill, a quiet visual confirmation that this part of the
   journey is settled, echoing the same language as the progress dots. */
.tlc-booking-wizard__live-summary > div[data-tlc-filled] {
	background: var(--tlcbw-primary-light, var(--color-primary-light, #dbe6fb));
}
.tlc-booking-wizard__live-summary > div[data-tlc-filled] dd {
	background: var(--tlcbw-primary, var(--color-primary, #1e40af));
	color: #fff;
	font-weight: var(--font-weight-bold, 700);
}
.tlc-booking-wizard__summary-phone {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3, 0.75rem);
	background: var(--tlcbw-primary, var(--color-primary, #1e40af));
	border-radius: var(--radius-interactive, 0.375rem);
	color: #fff;
	font-size: var(--font-size-small, 0.875rem);
}
.tlc-booking-wizard__summary-phone a {
	color: #fff;
	font-weight: var(--font-weight-bold, 700);
	text-decoration: none;
}

@media (min-width: 960px) {
	.tlc-booking-wizard__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 19rem;
		gap: var(--space-8, 3rem);
		align-items: start;
		padding-right: var(--space-8, 3rem);
	}
	.tlc-booking-wizard__summary-panel {
		position: sticky;
		/* Clears both the sitewide sticky header (4.5rem, see
		   .tlc-booking-wizard__call-sticky above) and the call-sticky
		   banner itself (~3.5rem tall) so no sticky element overlaps another. */
		top: calc(4.5rem + 3.5rem + var(--space-3, 0.75rem));
		margin: var(--space-6, 1.5rem) 0 0;
	}
	.tlc-booking-wizard__summary-toggle {
		display: none;
	}
	.tlc-booking-wizard__summary-panel-body {
		padding: var(--space-4, 1rem);
		hidden: none;
	}
	.tlc-booking-wizard__summary-panel-heading {
		display: block;
		font-size: var(--font-size-h4, 1.25rem);
		color: var(--tlcbw-brand-dark, var(--color-brand-dark, #081d3a));
		margin: 0 0 var(--space-3, 0.75rem);
	}
}

/* Mobile: collapsed by default (JS sets aria-expanded/hidden); ensure the
   body is visibly hidden pre-JS-init only via the [hidden] attribute the
   browser already respects, no extra CSS required. */

/* --- Progress bar (in addition to the dot indicator) -------------------- */
.tlc-booking-wizard__progress-bar {
	position: relative;
	height: 4px;
	width: 100%;
	margin-top: var(--space-2, 0.5rem);
	background: var(--color-neutral-200, #dee1e6);
	border-radius: var(--radius-full, 999px);
	overflow: hidden;
}
.tlc-booking-wizard__progress-bar-fill {
	height: 100%;
	width: 0%;
	background: var(--tlcbw-primary, var(--color-primary, #1e40af));
	border-radius: var(--radius-full, 999px);
}
@media (prefers-reduced-motion: no-preference) {
	.tlc-booking-wizard__progress-bar-fill {
		transition: width var(--motion-duration-slow, 250ms) var(--motion-easing-standard, ease);
	}
}

/* --- Step 1 cards: icon + title + short explanation --------------------- */
.tlc-booking-wizard__card {
	align-items: flex-start;
}
.tlc-booking-wizard__card-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.tlc-booking-wizard__card-title {
	font-weight: var(--font-weight-bold, 700);
	color: var(--tlcbw-brand-dark, var(--color-brand-dark, #081d3a));
}
.tlc-booking-wizard__card-description {
	font-size: 0.8rem;
	font-weight: var(--font-weight-regular, 400);
	color: var(--color-neutral-500, #6b7280);
}
.tlc-booking-wizard__card .tlcbw-option-icon {
	margin-top: 0.1rem;
}

/* --- Field row (side-by-side fields: Step 3 town/county, Step 6 name/phone) */
.tlc-booking-wizard__field-row {
	display: flex;
	flex-direction: column;
	gap: 0 var(--space-3, 0.75rem);
	margin-bottom: var(--space-3, 0.75rem);
}
.tlc-booking-wizard__field-row .tlc-booking-wizard__field {
	margin-bottom: 0;
}
@media (min-width: 500px) {
	.tlc-booking-wizard__field-row {
		flex-direction: row;
	}
	.tlc-booking-wizard__field-row .tlc-booking-wizard__field {
		flex: 1 1 0;
	}
}

/* --- Inline radio options (Step 6 preferred contact method) ------------- */
.tlc-booking-wizard__inline-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
}
.tlc-booking-wizard__inline-options label {
	margin-bottom: 0;
}

.tlc-booking-wizard__field--consent {
	margin-bottom: var(--space-2, 0.5rem);
}

/* --- Confirmation: timeline + return link -------------------------------- */
.tlc-booking-wizard__confirmation-timeline {
	display: grid;
	gap: var(--space-3, 0.75rem);
	max-width: 26rem;
	margin: var(--space-5, 1.25rem) auto;
	padding: 0;
	list-style: none;
	text-align: left;
}
.tlc-booking-wizard__confirmation-timeline li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-3, 0.75rem);
	background: var(--color-neutral-50, #f7f8fa);
	border-radius: var(--radius-interactive, 0.375rem);
}
.tlcbw-timeline-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tlcbw-primary, var(--color-primary, #1e40af));
	color: #fff;
	font-weight: var(--font-weight-bold, 700);
	font-size: 0.85rem;
}
.tlcbw-timeline-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.tlcbw-timeline-text strong {
	color: var(--tlcbw-brand-dark, var(--color-brand-dark, #081d3a));
}
.tlcbw-timeline-text span {
	font-size: var(--font-size-small, 0.875rem);
	color: var(--color-neutral-600, #4b5160);
}
.tlc-booking-wizard__confirmation-faq {
	max-width: 32rem;
	margin: var(--space-6, 1.5rem) auto 0;
	text-align: left;
}
.tlc-booking-wizard__confirmation-faq h3 {
	font-size: var(--font-size-h4, 1.25rem);
	color: var(--tlcbw-brand-dark, var(--color-brand-dark, #081d3a));
}
.tlc-booking-wizard__return-link {
	display: inline-block;
	margin-top: var(--space-5, 1.25rem);
	color: var(--tlcbw-primary, var(--color-primary, #1e40af));
	font-weight: var(--font-weight-medium, 500);
	text-decoration: none;
}
.tlc-booking-wizard__return-link:hover {
	text-decoration: underline;
}

/* --- Mobile-first: sticky Continue button on small screens -------------- */
@media (max-width: 699px) {
	.tlc-booking-wizard__nav {
		position: sticky;
		bottom: 0;
		z-index: 4;
		margin: var(--space-5, 1.25rem) calc(var(--space-6, 1.5rem) * -1) 0;
		padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
		background: var(--color-neutral-0, #fff);
		border-top: 1px solid var(--color-neutral-200, #dee1e6);
		box-shadow: 0 -4px 12px rgba(8, 29, 58, 0.08);
	}
}

/* =======================================================================
 * Phase 4 — CTO polish directive: remove generic WordPress page chrome so
 * the booking journey reads as its own dedicated environment, not a page
 * template with a form embedded in it. Everything below is scoped with
 * :has() to the specific page that contains the booking journey — the
 * shared theme/tlc-enterprise/page.php generic template (used by many
 * other, unrelated pages) is never edited, so no other page is affected.
 * ===================================================================== */

/* The theme's page.php always prints <h1><?php the_title(); ?></h1> before
   the shortcode output. Once the journey's own hero supplies the page's
   single, real H1 ("Let's get your lock sorted."), the generic page title
   would be a second, redundant, visually-weak H1 — both a WordPress "page
   chrome" cue and an accessibility problem (two H1s on one page). Hiding
   it here (rather than editing the shared template) keeps this change
   scoped to pages that actually contain the booking journey. */
.generic-page:has(.tlc-booking-journey) > h1 {
	display: none;
}
/* Breadcrumbs are useful site-wide orientation chrome, but on this one
   page they sit directly above a hero that already establishes context —
   removing them here is what "transition seamlessly into a dedicated
   booking environment" means in practice, without touching the shared
   breadcrumbs component used on every other page. */
main:has(.tlc-booking-journey) > .breadcrumbs {
	display: none;
}
/* Let the journey use the full available width rather than sitting inside
   the generic page's default content measure. */
.generic-page:has(.tlc-booking-journey),
.generic-page:has(.tlc-booking-journey) > .generic-page__content {
	max-width: none;
	padding: 0;
	margin: 0;
}

.tlc-booking-wizard__micro-reassurance,
.tlc-booking-wizard__privacy-note {
	margin: var(--space-2, 0.5rem) 0 0;
	font-size: 0.8rem;
	color: var(--color-neutral-500, #6b7280);
}

/* =======================================================================
 * Phase 5 — required-field clarity + inline validation.
 * ===================================================================== */

.tlc-booking-wizard__required-note {
	margin: 0 0 var(--space-3, 0.75rem);
	font-size: 0.8rem;
	color: var(--color-neutral-500, #6b7280);
}
.tlcbw-required-mark {
	color: var(--tlcbw-error, var(--color-urgency, #c22a1e));
	font-weight: var(--font-weight-bold, 700);
}
.tlcbw-optional-tag {
	font-weight: var(--font-weight-regular, 400);
	color: var(--color-neutral-500, #6b7280);
	font-size: 0.85em;
}
.tlc-booking-wizard__field-help {
	margin: 0 0 var(--space-2, 0.5rem);
	font-size: 0.8rem;
	color: var(--color-neutral-500, #6b7280);
}

/* Inline field errors — the primary validation signal (never colour
   alone): an icon, bold "Enter your..." text, and an error-tinted
   background on the field itself. */
.tlcbw-field-error {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
	padding: 0.5rem 0.75rem;
	background: var(--tlcbw-error-bg, #fdecea);
	border-left: 3px solid var(--tlcbw-error, var(--color-urgency, #c22a1e));
	border-radius: 0 var(--radius-interactive, 0.375rem) var(--radius-interactive, 0.375rem) 0;
	color: var(--tlcbw-error-text, #611a15);
	font-size: 0.85rem;
	font-weight: var(--font-weight-medium, 500);
}
.tlcbw-field-error::before {
	content: "!";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tlcbw-error, var(--color-urgency, #c22a1e));
	color: #fff;
	font-size: 0.7rem;
	font-weight: var(--font-weight-bold, 700);
}

.tlc-booking-wizard__field.tlcbw-has-error input,
.tlc-booking-wizard__field.tlcbw-has-error textarea {
	border-color: var(--tlcbw-error, var(--color-urgency, #c22a1e));
	background: var(--tlcbw-error-bg, #fdecea);
}
.tlc-booking-wizard__cards.tlcbw-has-error,
.tlc-booking-wizard__options.tlcbw-has-error {
	outline: 2px solid var(--tlcbw-error, var(--color-urgency, #c22a1e));
	outline-offset: 6px;
	border-radius: var(--radius-card, 0.75rem);
}

/* =======================================================================
 * Phase 7 — confirmation-screen local-number callout (shown only when the
 * booking's postcode resolved to a genuine local area, coverage_status
 * === 'matched' — see class-tlc-booking-wizard-shortcode.php /
 * booking-wizard.js renderConfirmation()).
 * ===================================================================== */
.tlc-booking-wizard__confirmation-phone {
	margin: var(--space-5, 1.25rem) 0;
	text-align: center;
}
.tlc-booking-wizard__confirmation-phone-prompt {
	margin: 0 0 var(--space-2, 0.5rem);
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-neutral-700, #343a46);
}
.tlc-booking-wizard__confirmation-phone-label {
	margin: 0 0 var(--space-1, 0.25rem);
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold, 700);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-neutral-500, #6b7280);
}