/* ============================================================
   BITV v2.0 Appointment Wizard — WCAG 2.1 AA / BITV 2.0
   ============================================================ */

/* --- Custom Properties --- */
:root {
	/* Default color scheme — overridden per theme via [data-wiz-theme="..."] rules.
	   Ensures native browser controls (select dropdowns, date pickers, scrollbars,
	   autofill) render matching the wizard's theme colors. */
	color-scheme: light;
	--wiz-color-primary: #006DB8; /* brand-primary */
	--wiz-color-primary-hover: #005084; /* brand-primary-shadow */
	--wiz-color-primary-contrast: #ffffff;
	/* The "primary-text" role (the brand where it is drawn AS text on the page —
	   links, service URLs, the earliest-appointment hint) and the "secondary" role
	   (the progress line above the steps) have no base declaration here. Each is
	   only set, as an inline style on :root, when a brand color is configured; a
	   configured primary-text color arrives derived to 4.5:1. Every use site
	   supplies its own fallback — to the primary color, or to the success color,
	   respectively — as the second argument of the custom-property lookup, so the
	   fallback resolves at the point of use, against that element's own cascade,
	   not here on :root. That is what keeps every theme, default and preset alike,
	   rendering exactly as it does today when no brand color is configured. */
	/* Darkened from #E1141C, which reached only 4.45:1 on the tinted error box
	   --wiz-color-error-bg and so missed WCAG 1.4.3 (#996). #D6111A gives 4.85:1
	   there and stays above the threshold on white as well. */
	--wiz-color-error: #D6111A;
	--wiz-color-error-bg: #fef2f2;
	--wiz-color-success: #0d7a3e;
	--wiz-color-success-bg: #f0fdf4;
	--wiz-color-warning: #92400e;
	--wiz-color-warning-bg: #fffbeb;
	--wiz-color-bg: #ffffff;
	--wiz-color-bg-alt: #f5f5f5;
	/* Surface of a selected service or location card. Was written out as the
	   literal #f0f6fc at both use sites, which is a tint of the accent this
	   wizard used to be fixed to — invisible while that accent never changed,
	   and the one surface that stayed blue once the brand colour became free
	   (#977). The value is unchanged, so an unbranded page and every preset
	   render exactly as before; a configured brand replaces it from :root. */
	--wiz-color-bg-selected: #f0f6fc;
	--wiz-color-text: #1a1a1a;
	--wiz-color-text-muted: #555555;
	--wiz-color-border: #333333;
	--wiz-color-border-light: #cccccc;
	/* Border of interactive controls that carry no fill of their own, where the outline
	   is the only thing saying "this is operable" — WCAG 1.4.11 asks for 3:1 there.
	   Kept apart from --wiz-color-border-light on purpose (#995): that one is also the
	   colour of hairline separators, progress tracks and image frames, which would turn
	   visually heavy at this value. #767676 measures 4.54:1 against white. */
	--wiz-color-border-control: #767676;
	/* Decoupled from the primary color on purpose (#977). As var(--wiz-color-primary)
	   this sat at 2.14:1 against the page and 1.97:1 against the card surface —
	   below the 3:1 that WCAG 1.4.11 wants for a focus indicator, in the theme
	   called "Default (BITV)". #4d91bb is the same blue four derivation steps
	   darker: 3.45:1 and 3.17:1. A configured brand color replaces this with a
	   value the server derives to the same floor. */
	--wiz-color-focus: #4d91bb;
	--wiz-font-family: 'Lato', Arial, Helvetica, sans-serif;
	--wiz-font-size-base: 1rem;
	--wiz-font-size-sm: 0.875rem;
	--wiz-font-size-lg: 1.125rem;
	--wiz-font-size-xl: 1.5rem;
	--wiz-max-width: 1024px;
	--wiz-border-radius: 0;
	--wiz-focus-outline: 3px solid var(--wiz-color-focus);
	--wiz-focus-offset: 2px;
	--wiz-spacing-xs: 0.25rem;
	--wiz-spacing-sm: 0.5rem;
	--wiz-spacing-md: 1rem;
	--wiz-spacing-lg: 1.5rem;
	--wiz-spacing-xl: 2rem;
	--wiz-transition: 150ms ease-in-out;
}

/* Presets keep the ring they render today. --wiz-focus-outline resolves on the
   element it is declared on, so the darker default value above would be inherited
   into every preset — and on the dark ones it falls below the 3:1 of WCAG 1.4.11
   (commodore's page: 2.98:1). Scoping --wiz-color-focus instead would not help,
   because the outline is already resolved by the time a preset could override it.
   A preset's own declaration wins over this one on source order once the stray
   comment terminator at the top of the theme files is repaired (#977 follow-up). */
[data-wiz-theme] {
	--wiz-focus-outline: 3px solid #006DB8;
}

/* --- Reset & Base --- */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--wiz-font-family);
	font-size: var(--wiz-font-size-base);
	line-height: 1.5;
	color: var(--wiz-color-text);
	background-color: var(--wiz-color-bg);
	-webkit-font-smoothing: antialiased;
}

/* --- Skip Link --- */
.wiz-skip-link {
	position: absolute;
	top: -100%;
	left: var(--wiz-spacing-md);
	z-index: 1000;
	padding: var(--wiz-spacing-sm) var(--wiz-spacing-md);
	background: var(--wiz-color-primary);
	color: var(--wiz-color-primary-contrast);
	text-decoration: none;
	font-weight: 700;
	border-radius: var(--wiz-border-radius);
}

.wiz-skip-link:focus {
	top: var(--wiz-spacing-sm);
	outline: var(--wiz-focus-outline);
	outline-offset: var(--wiz-focus-offset);
}

/* --- Noscript Fallback --- */
.wiz-noscript {
	max-width: var(--wiz-max-width);
	margin: var(--wiz-spacing-xl) auto;
	padding: var(--wiz-spacing-lg);
	background: var(--wiz-color-warning-bg);
	border: 2px solid var(--wiz-color-warning);
	color: var(--wiz-color-warning);
}

/* --- Focus Styles (Global) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var(--wiz-focus-outline);
	outline-offset: var(--wiz-focus-offset);
}

/* --- Page Layout --- */
.wiz-page {
	max-width: var(--wiz-max-width);
	margin: 0 auto;
	padding: 0 var(--wiz-spacing-md);
}

/* --- Header --- */
.wiz-header {
	padding: var(--wiz-spacing-lg) 0;
	border-bottom: 2px solid var(--wiz-color-border);
}

.wiz-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wiz-spacing-md);
}

.wiz-header__logo {
	max-height: 60px;
	width: auto;
}

.wiz-header__title {
	font-size: var(--wiz-font-size-xl);
	font-weight: 700;
	margin: 0;
	flex: 1;
	color: var(--wiz-color-text);
}

/* Language Switcher */
.wiz-lang-switch {
	margin-left: auto;
	flex-shrink: 0;
}

.wiz-lang-switch__select {
	font-family: var(--wiz-font-family);
	font-size: var(--wiz-font-size-sm);
	padding: var(--wiz-spacing-xs) var(--wiz-spacing-sm);
	border: 1px solid var(--wiz-color-border);
	border-radius: var(--wiz-border-radius);
	background: var(--wiz-color-bg);
	color: var(--wiz-color-text);
	cursor: pointer;
}

.wiz-lang-switch__select:focus {
	outline: var(--wiz-focus-outline);
	outline-offset: var(--wiz-focus-offset);
}

/* --- Step Navigation --- */
.wiz-steps {
	padding: var(--wiz-spacing-lg) 0 var(--wiz-spacing-sm);
}

.wiz-steps__list {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
	position: relative;
}

/* Grey baseline — full width behind all circles */
.wiz-steps__list::before {
	content: "";
	position: absolute;
	top: calc(var(--wiz-spacing-sm) + 1.125rem - 1px);
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wiz-color-border-light);
	z-index: 0;
}

/* Progress overlay — width from --wiz-progress (set in JS), color from
   --wiz-color-secondary, which falls back here to the theme's success green
   when unset. This is where a configured secondary brand color lands (#977).
   The completed-step marker keeps the success color and its check mark, so
   progress is still carried by something other than a freely chosen hue. */
.wiz-steps__list::after {
	content: "";
	position: absolute;
	top: calc(var(--wiz-spacing-sm) + 1.125rem - 1px);
	left: 0;
	width: var(--wiz-progress, 0%);
	height: 3px;
	background: var(--wiz-color-secondary, var(--wiz-color-success));
	z-index: 0;
	transition: width 0.3s ease;
}

.wiz-steps__item {
	counter-increment: step;
	position: relative;
	text-align: center;
	flex: 0 0 auto;
}

.wiz-steps__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wiz-spacing-xs);
	padding: var(--wiz-spacing-sm) 0;
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
	text-decoration: none;
	border: 2px solid transparent;
	background: none;
	cursor: default;
	font-family: inherit;
	position: relative;
	z-index: 1;
}

.wiz-steps__label::before {
	content: counter(step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 2px solid var(--wiz-color-border-light);
	border-radius: 50%;
	font-weight: 700;
	font-size: var(--wiz-font-size-base);
	color: var(--wiz-color-text-muted);
	background: var(--wiz-color-bg);
	transition: background var(--wiz-transition), color var(--wiz-transition), border-color var(--wiz-transition);
}

.wiz-steps__item--active .wiz-steps__label {
	color: var(--wiz-color-text);
	font-weight: 700;
}

.wiz-steps__item--active .wiz-steps__label::before {
	background: var(--wiz-color-primary);
	color: var(--wiz-color-primary-contrast);
	border-color: var(--wiz-color-primary);
}

.wiz-steps__item--completed .wiz-steps__label {
	color: var(--wiz-color-text);
	cursor: pointer;
}

.wiz-steps__item--completed .wiz-steps__label::before {
	content: "\2713";
	background: var(--wiz-color-success);
	color: #fff;
	border-color: var(--wiz-color-success);
}

button.wiz-steps__label:hover {
	border-color: var(--wiz-color-primary-text, var(--wiz-color-border-control));
}

button.wiz-steps__label:focus-visible {
	outline: var(--wiz-focus-outline);
	outline-offset: var(--wiz-focus-offset);
}

/* --- Main Content Area --- */
.wiz-main {
	display: flex;
	gap: var(--wiz-spacing-xl);
	padding: var(--wiz-spacing-lg) 0;
	min-height: 400px;
}

.wiz-content {
	flex: 1;
	min-width: 0;
}

.wiz-sidebar {
	width: 280px;
	flex-shrink: 0;
}

/* --- Step Content --- */
.wiz-step__title {
	font-size: var(--wiz-font-size-xl);
	font-weight: 700;
	margin: 0 0 var(--wiz-spacing-sm) 0;
	color: var(--wiz-color-text);
}

.wiz-step__title:focus {
	outline: none;
}

.wiz-step__intro {
	margin: 0 0 var(--wiz-spacing-lg) 0;
	color: var(--wiz-color-text-muted);
}

/* --- Fieldset / Legend --- */
.wiz-fieldset {
	border: none;
	margin: 0 0 var(--wiz-spacing-lg) 0;
	padding: 0;
}

.wiz-legend {
	font-size: var(--wiz-font-size-lg);
	font-weight: 700;
	padding: 0;
	margin: 0 0 var(--wiz-spacing-md) 0;
	color: var(--wiz-color-text);
}

/* --- Service Card --- */
.wiz-service {
	display: flex;
	align-items: flex-start;
	gap: var(--wiz-spacing-md);
	padding: var(--wiz-spacing-md);
	margin-bottom: var(--wiz-spacing-sm);
	background: var(--wiz-color-bg-alt);
	border: 2px solid transparent;
	transition: border-color var(--wiz-transition);
}

.wiz-service:hover {
	border-color: var(--wiz-color-border-light);
}

.wiz-service--selected {
	border-color: var(--wiz-color-primary-text, var(--wiz-color-border-control));
	background: var(--wiz-color-bg-selected);
}

.wiz-service--disabled {
	opacity: 0.5;
	pointer-events: none;
}

.wiz-service--incompatible {
	opacity: 0.55;
	border-color: var(--wiz-color-border-light);
}

.wiz-service--incompatible .wiz-service__name {
	cursor: default;
}

.wiz-service__combination-msg {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-error, #c0392b);
	margin-top: var(--wiz-spacing-xs);
	font-style: italic;
}

.wiz-service__checkbox {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	accent-color: var(--wiz-color-primary);
	cursor: pointer;
}

.wiz-service__body {
	flex: 1;
	min-width: 0;
}

.wiz-service__name {
	font-weight: 700;
	cursor: pointer;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
	word-break: break-word;
}

.wiz-service__info {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
	margin-top: var(--wiz-spacing-xs);
}

.wiz-service__extra {
	flex: 1 1 40%;
	min-width: 0;
	border-left: 1px solid var(--wiz-color-border-light, rgba(128,128,128,0.25));
	padding-left: var(--wiz-spacing-md);
	align-self: center;
}

.wiz-service__description {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
	line-height: 1.5;
}

.wiz-service__description p {
	margin: 0 0 var(--wiz-spacing-xs) 0;
}

.wiz-service__description p:last-child {
	margin-bottom: 0;
}

.wiz-service__description a {
	color: var(--wiz-color-primary-text, var(--wiz-color-primary));
	text-decoration: underline;
	pointer-events: auto;
}

.wiz-service__description a:hover {
	opacity: 0.8;
}

.wiz-service__image {
	/* No flex or auto-margin placement here any more (#960). The image used to be
	   a flex child of the card, pushed to the right edge, where it ended up beside
	   the quantity selector and crowded it. It now sits inside the card body; the
	   three properties that placed it in the row are gone rather than overridden,
	   because they are inert at the other use site too — on the confirmation page
	   the image is an inline replaced element in a plain block, where auto margins
	   compute to zero and flex properties never apply. */
	width: 120px;
	height: 90px;
	object-fit: cover;
	border-radius: var(--wiz-border-radius, 4px);
	border: 1px solid var(--wiz-color-border-light);
	cursor: zoom-in;
	transition: opacity var(--wiz-transition);
}

.wiz-service__image:hover {
	opacity: 0.8;
}

/* Inside the card body the image is the last row, under the quantity selector and
   flush with its left edge (#960). display:block is what makes that hold: as an
   inline element it only dropped below the selector when the two did not fit on
   one line, so a wide card — or one without the "more information" panel beside
   it — put it straight back next to the selector. The confirmation page keeps the
   inline image it renders today; this rule does not reach it. */
.wiz-service__body > .wiz-service__image {
	display: block;
	margin-top: var(--wiz-spacing-sm);
}

/* --- Image lightbox overlay --- */
.wiz-image-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
}

.wiz-image-overlay__content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	cursor: default;
}

.wiz-image-overlay__content img {
	display: block;
	max-width: 90vw;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--wiz-border-radius, 4px);
	background: #fff;
}

.wiz-image-overlay__caption {
	text-align: center;
	color: #fff;
	padding: var(--wiz-spacing-sm) 0;
	font-size: var(--wiz-font-size-sm);
}

.wiz-image-overlay__close {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: #fff;
	color: #333;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.wiz-image-overlay__close:hover {
	background: #eee;
}

.wiz-service__amount {
	display: inline-flex;
	align-items: center;
	gap: var(--wiz-spacing-sm);
	margin-top: var(--wiz-spacing-sm);
	visibility: hidden;
}

.wiz-service--selected .wiz-service__amount {
	visibility: visible;
}

.wiz-service__amount label {
	font-size: var(--wiz-font-size-sm);
	font-weight: 600;
}

.wiz-service__amount input[type="number"] {
	width: 4rem;
	padding: var(--wiz-spacing-xs) var(--wiz-spacing-sm);
	border: 2px solid var(--wiz-color-border);
	border-radius: var(--wiz-border-radius);
	font-family: inherit;
	font-size: var(--wiz-font-size-base);
	text-align: center;
}

/* --- Search field --- */
.wiz-search-field {
	display: block;
	width: 100%;
	padding: var(--wiz-spacing-sm) var(--wiz-spacing-md);
	border: 2px solid var(--wiz-color-border);
	border-radius: var(--wiz-border-radius);
	font-family: inherit;
	font-size: var(--wiz-font-size-base);
	margin-bottom: var(--wiz-spacing-md);
}

/* --- Location Card --- */
.wiz-location {
	display: flex;
	align-items: stretch;
	gap: var(--wiz-spacing-md);
	padding: var(--wiz-spacing-md);
	margin-bottom: var(--wiz-spacing-sm);
	background: var(--wiz-color-bg-alt);
	border: 2px solid transparent;
	transition: border-color var(--wiz-transition);
}

.wiz-location:hover {
	border-color: var(--wiz-color-border-light);
}

.wiz-location--disabled {
	opacity: 0.5;
	cursor: default;
	border-color: var(--wiz-color-border-light);
}

.wiz-location--disabled .wiz-location__name {
	cursor: default;
}

.wiz-location--disabled:hover {
	border-color: var(--wiz-color-border-light);
}

.wiz-location--selected {
	border-color: var(--wiz-color-primary-text, var(--wiz-color-border-control));
	background: var(--wiz-color-bg-selected);
}

.wiz-location__radio,
.wiz-location__checkbox {
	flex-shrink: 0;
	align-self: flex-start;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	accent-color: var(--wiz-color-primary);
	cursor: pointer;
}

.wiz-location__body {
	flex: 1;
	align-self: center;
}

.wiz-location__name {
	font-weight: 700;
	cursor: pointer;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
	word-break: break-word;
}

.wiz-location__address {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
	margin-top: var(--wiz-spacing-xs);
}

/* --- Slot Calendar --- */
.wiz-calendar {
	margin-bottom: var(--wiz-spacing-lg);
}

.wiz-calendar__nav {
	display: flex;
	align-items: stretch;
	margin-bottom: var(--wiz-spacing-md);
	gap: var(--wiz-spacing-sm);
}

.wiz-calendar__nav > * {
	flex: 1 1 0;
}

.wiz-calendar__nav > .wiz-btn {
	justify-content: center;
}

.wiz-calendar__period {
	font-weight: 700;
	font-size: var(--wiz-font-size-lg);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* One column per visible day, count from the template setting (#953).
   Deliberately not auto-fill: with a minimum column width the browser fits as many
   columns as the container happens to allow — four at the current content width — and
   puts the fifth day on a second row, where visitors do not look for it. An explicit
   count keeps the configured days on one row, so the floor has to be 0 rather than a
   pixel value, or the wrap returns at the higher settings. */
.wiz-calendar__days {
	display: grid;
	grid-template-columns: repeat(var(--wiz-visible-days, 5), minmax(0, 1fr));
	gap: var(--wiz-spacing-md);
}

.wiz-day {
	border: 2px solid var(--wiz-color-border-light);
	padding: var(--wiz-spacing-sm);
}

.wiz-day__header {
	font-weight: 700;
	padding-bottom: var(--wiz-spacing-sm);
	margin-bottom: var(--wiz-spacing-sm);
	border-bottom: 1px solid var(--wiz-color-border-light);
	font-size: var(--wiz-font-size-sm);
}

.wiz-day__slots {
	display: flex;
	flex-direction: column;
	gap: var(--wiz-spacing-xs);
}

.wiz-slot {
	display: block;
	width: 100%;
	padding: var(--wiz-spacing-sm);
	background: var(--wiz-color-bg);
	border: 2px solid var(--wiz-color-border-control);
	border-radius: var(--wiz-border-radius);
	font-family: inherit;
	font-size: var(--wiz-font-size-sm);
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: background var(--wiz-transition), border-color var(--wiz-transition);
}

.wiz-slot:hover {
	background: var(--wiz-color-bg-alt);
	/* --wiz-color-primary is the RAW configured brand and is not contrast-checked (#995):
	   this border fell to 1.79:1 on a branded tenant, undoing the 3:1 this ticket
	   established for the resting state. --wiz-color-primary-text is the same brand
	   already derived to 4.5:1 against the darkest surface it can land on
	   (WizardBrandColors), so a border that must carry 3:1 on its own takes that role.
	   Filled elements keep the raw value: there the brand is the fill and the contrast
	   is the fill's own.
	   The fallback is --wiz-color-border and NOT --wiz-color-border-control, which the
	   slot already wears at rest: unbranded there is no brand role to set, so the two
	   states were painted in one colour and the hover stopped being a state at all
	   (R3-B1). The background carries 1.09:1 and cannot stand in for it. #333333 gives
	   11.59:1 on the hover surface and separates from the resting #767676. The file drop
	   keeps the control border for the same reason in reverse -- it rests on
	   --wiz-color-border. */
	border-color: var(--wiz-color-primary-text, var(--wiz-color-border));
	/* Colour alone cannot carry this state. The hover border is the DERIVED brand, and on
	   a real brand that lands close to the resting #767676 in luminance -- #1cc3f4 derives
	   to #10708c, 1.24:1 apart; the current default #006DB8 gives 1.44:1. A sighted user
	   reads the hue change, someone on greyscale or with achromatopsia does not, and no
	   derivation can fix it for every brand at once without darkening the brand to near
	   black. So the state also changes something that is not a colour. border-box plus an
	   auto height means the extra pixel would grow the button and shift the list, so the
	   padding gives the same pixel back. */
	border-width: 3px;
	padding: calc(var(--wiz-spacing-sm) - 1px);
}

.wiz-slot--selected {
	background: var(--wiz-color-primary);
	color: var(--wiz-color-primary-contrast);
	border-color: var(--wiz-color-primary);
}

.wiz-slot--more,
.wiz-slot--prev,
[data-wiz-theme] .wiz-slot--more,
[data-wiz-theme] .wiz-slot--prev {
	border-style: dashed;
	font-weight: 400;
	color: var(--wiz-color-text-muted);
	text-shadow: none;
	letter-spacing: normal;
	text-transform: none;
}

.wiz-slot--more::before,
.wiz-slot--prev::before {
	display: none !important;
}

.wiz-slot--more:hover,
.wiz-slot--prev:hover,
[data-wiz-theme] .wiz-slot--more:hover,
[data-wiz-theme] .wiz-slot--prev:hover {
	color: var(--wiz-color-primary-text, var(--wiz-color-primary));
}

/* --- Timezone Toggle --- */
.wiz-tz-toggle {
	display: flex;
	justify-content: center;
	margin-bottom: var(--wiz-spacing-md);
}

.wiz-tz-toggle__option {
	padding: var(--wiz-spacing-xs) var(--wiz-spacing-md);
	font-family: inherit;
	font-size: var(--wiz-font-size-sm);
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--wiz-color-border);
	background: var(--wiz-color-bg);
	color: var(--wiz-color-text-muted);
	transition: background var(--wiz-transition), color var(--wiz-transition);
}

.wiz-tz-toggle__option:first-child {
	border-radius: var(--wiz-border-radius) 0 0 var(--wiz-border-radius);
	border-right: none;
}

.wiz-tz-toggle__option:last-child {
	border-radius: 0 var(--wiz-border-radius) var(--wiz-border-radius) 0;
}

/* Keyed on aria-pressed, not on a modifier class, so the visual state cannot
   diverge from the programmatic one. The underline is the non-colour cue: the
   fill is dropped by forced-colors mode, which left both options looking
   identical under a Windows contrast theme (#1032), and colour alone would not
   carry the state on greyscale either. */
.wiz-tz-toggle__option[aria-pressed="true"] {
	background: var(--wiz-color-primary);
	color: var(--wiz-color-primary-contrast);
	border-color: var(--wiz-color-primary);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* System colours are the one way to paint in forced-colors mode, so the fill
   comes back there instead of being dropped. No outline: that belongs to the
   focus ring alone, and the two states must not wear the same indicator.

   forced-color-adjust: none is what makes the fill usable. Every contrast theme
   tested has HighlightText equal to Canvas, and Chromium lays a Canvas backplate
   behind text whenever the adjustment is on, so label and underline came out
   Canvas on Canvas — invisible (#1032). The declarations below are system
   colours, so turning the adjustment off keeps the switch on the system palette.
   It also stops the UA from colouring the focus ring, which it derives from the
   text colour and therefore painted in Canvas here too, so the ring is set back
   to a system colour explicitly. */
@media (forced-colors: active) {
	.wiz-tz-toggle__option[aria-pressed="true"] {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
		border-color: Highlight;
	}

	.wiz-tz-toggle__option[aria-pressed="true"]:focus-visible {
		outline-color: CanvasText;
	}
}

.wiz-slot:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* --- Form Elements --- */
.wiz-form-group {
	margin-bottom: var(--wiz-spacing-md);
}

.wiz-label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--wiz-spacing-xs);
	font-size: var(--wiz-font-size-base);
}

.wiz-label--required::after {
	content: " *";
	color: var(--wiz-color-error);
}

.wiz-input,
.wiz-select,
.wiz-textarea {
	display: block;
	width: 100%;
	padding: var(--wiz-spacing-sm) var(--wiz-spacing-md);
	border: 2px solid var(--wiz-color-border);
	border-radius: var(--wiz-border-radius);
	font-family: inherit;
	font-size: var(--wiz-font-size-base);
	color: var(--wiz-color-text);
	background: var(--wiz-color-bg);
	transition: border-color var(--wiz-transition);
}

.wiz-input:focus,
.wiz-select:focus,
.wiz-textarea:focus {
	border-color: var(--wiz-color-primary);
}

.wiz-input[aria-invalid="true"],
.wiz-select[aria-invalid="true"],
.wiz-textarea[aria-invalid="true"] {
	border-color: var(--wiz-color-error);
}

.wiz-textarea {
	min-height: 6rem;
	resize: vertical;
}

.wiz-hint {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
	margin-top: var(--wiz-spacing-xs);
}

.wiz-field-hint {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
	margin-top: var(--wiz-spacing-xs);
}

.wiz-field-error {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-error);
	margin-top: var(--wiz-spacing-xs);
}

/* --- File Upload --- */

.wiz-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.wiz-file-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wiz-spacing-xs);
	padding: var(--wiz-spacing-lg) var(--wiz-spacing-md);
	border: 2px dashed var(--wiz-color-border);
	border-radius: var(--wiz-border-radius);
	background: var(--wiz-color-bg);
	cursor: pointer;
	transition: border-color var(--wiz-transition), background var(--wiz-transition);
	text-align: center;
}

.wiz-file-drop:hover,
.wiz-file-drop:focus-visible {
	border-color: var(--wiz-color-primary-text, var(--wiz-color-border-control));
	background: var(--wiz-color-bg-alt);
	/* Same reason as .wiz-slot:hover: this rests on a visible border, so the state needs
	   more than a change of colour. */
	border-width: 3px;
	padding: calc(var(--wiz-spacing-lg) - 1px) calc(var(--wiz-spacing-md) - 1px);
}

.wiz-file-drop--active {
	border-color: var(--wiz-color-primary-text, var(--wiz-color-border-control));
	background: var(--wiz-color-bg-alt);
	border-width: 3px;
	padding: calc(var(--wiz-spacing-lg) - 1px) calc(var(--wiz-spacing-md) - 1px);
}

.wiz-file-drop__icon {
	font-size: 1.5rem;
	line-height: 1;
}

.wiz-file-drop__text {
	font-size: var(--wiz-font-size-base);
	color: var(--wiz-color-text);
}

.wiz-file-drop__browse {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-primary-text, var(--wiz-color-primary));
	text-decoration: underline;
	font-weight: 600;
}

.wiz-file-drop__hint {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
}

.wiz-file-list {
	list-style: none;
	margin: var(--wiz-spacing-sm) 0 0;
	padding: 0;
}

.wiz-file-item {
	display: flex;
	align-items: center;
	gap: var(--wiz-spacing-sm);
	padding: var(--wiz-spacing-xs) var(--wiz-spacing-sm);
	border: 1px solid var(--wiz-color-border);
	border-radius: var(--wiz-border-radius);
	margin-bottom: var(--wiz-spacing-xs);
	background: var(--wiz-color-bg);
	flex-wrap: wrap;
}

.wiz-file-item--error {
	border-color: var(--wiz-color-error);
}

.wiz-file-item__name {
	flex: 1 1 auto;
	font-size: var(--wiz-font-size-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.wiz-file-item__size {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
	flex-shrink: 0;
}

.wiz-file-item__remove {
	background: none;
	border: none;
	color: var(--wiz-color-error);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.1rem 0.3rem;
	border-radius: var(--wiz-border-radius);
	flex-shrink: 0;
}

.wiz-file-item__remove:hover,
.wiz-file-item__remove:focus-visible {
	background: rgba(220, 53, 69, 0.1);
}

.wiz-file-item__error {
	width: 100%;
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-error);
}

.wiz-form-group--checkbox .wiz-checkbox-wrapper {
	display: flex;
	align-items: center;
	gap: var(--wiz-spacing-sm);
}

.wiz-form-group--checkbox input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.wiz-form-group--checkbox label {
	font-weight: 400;
}

/* --- Error Summary --- */
.wiz-error-summary {
	padding: var(--wiz-spacing-md);
	margin-bottom: var(--wiz-spacing-lg);
	background: var(--wiz-color-error-bg);
	border: 2px solid var(--wiz-color-error);
}

.wiz-error-summary__title {
	font-weight: 700;
	color: var(--wiz-color-error);
	margin: 0 0 var(--wiz-spacing-sm) 0;
}

.wiz-error-summary__list {
	margin: 0;
	padding: 0 0 0 var(--wiz-spacing-lg);
}

.wiz-error-summary__list a {
	color: var(--wiz-color-error);
}

/* --- Alert --- */
.wiz-alert {
	padding: var(--wiz-spacing-md);
	margin-bottom: var(--wiz-spacing-lg);
	border: 2px solid var(--wiz-color-border);
}

.wiz-alert--error {
	background: var(--wiz-color-error-bg);
	border-color: var(--wiz-color-error);
	color: var(--wiz-color-error);
}

.wiz-alert--warning {
	background: var(--wiz-color-warning-bg);
	border-color: var(--wiz-color-warning);
	color: var(--wiz-color-warning);
}

.wiz-alert p {
	margin: 0;
}

/* --- Success Icon --- */
.wiz-success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wiz-color-success);
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: var(--wiz-spacing-md);
}

/* --- Details List --- */
.wiz-details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wiz-spacing-xs) var(--wiz-spacing-md);
	margin: var(--wiz-spacing-md) 0;
}

.wiz-details dt {
	font-weight: 700;
	color: var(--wiz-color-text);
}

.wiz-details dd {
	margin: 0;
}

.wiz-details dd ul {
	margin: 0;
	padding-left: var(--wiz-spacing-md);
}

/* --- Buttons --- */
.wiz-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wiz-spacing-sm);
	padding: var(--wiz-spacing-sm) var(--wiz-spacing-lg);
	border: 2px solid transparent;
	border-radius: var(--wiz-border-radius);
	font-family: inherit;
	font-size: var(--wiz-font-size-base);
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--wiz-transition), border-color var(--wiz-transition);
	min-height: 44px;
}

.wiz-btn--primary {
	background: var(--wiz-color-primary);
	color: var(--wiz-color-primary-contrast);
	border-color: var(--wiz-color-primary);
}

.wiz-btn--primary:hover {
	background: var(--wiz-color-primary-hover);
	border-color: var(--wiz-color-primary-hover);
}

.wiz-btn--secondary {
	background: var(--wiz-color-bg);
	color: var(--wiz-color-text);
	border-color: var(--wiz-color-border);
}

.wiz-btn--secondary:hover {
	background: var(--wiz-color-bg-alt);
}

.wiz-btn--danger {
	background: var(--wiz-color-error);
	color: #fff;
	border-color: var(--wiz-color-error);
}

.wiz-btn--danger:hover {
	background: #c01018;
	border-color: #c01018;
}

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

.wiz-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: var(--wiz-spacing-md) 0;
	gap: var(--wiz-spacing-md);
	position: sticky;
	bottom: 0;
	background: var(--wiz-color-bg);
	border-top: 1px solid var(--wiz-color-border-light);
	z-index: 10;
}

/* The position of a control must follow its role, not the number of controls on
   the step (#1107). The back control claims the left edge and pushes everything
   else to the right edge; forward controls stay right even when they are alone. */
.wiz-actions > .wiz-btn--back {
	margin-right: auto;
}

/* --- Summary Sidebar --- */
.wiz-summary {
	background: var(--wiz-color-bg-alt);
	padding: var(--wiz-spacing-lg);
	border: 1px solid var(--wiz-color-border-light);
	position: sticky;
	top: var(--wiz-spacing-md);
}

.wiz-summary__title {
	font-size: var(--wiz-font-size-lg);
	font-weight: 700;
	margin: 0 0 var(--wiz-spacing-md) 0;
	padding-bottom: var(--wiz-spacing-sm);
	border-bottom: 2px solid var(--wiz-color-border);
}

.wiz-summary__empty {
	color: var(--wiz-color-text-muted);
	font-size: var(--wiz-font-size-sm);
	font-style: italic;
	margin: 0;
}

.wiz-summary__section {
	/* dl/dd carry browser default margins that the former div did not (#1027) */
	margin: 0;
	padding: var(--wiz-spacing-sm) 0;
}

.wiz-summary__section + .wiz-summary__section {
	border-top: 1px solid var(--wiz-color-border-light);
}

.wiz-summary__label {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
	margin-bottom: 2px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wiz-summary__value {
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
}

.wiz-summary__value--secondary {
	font-weight: 400;
	font-size: var(--wiz-font-size-sm);
}

.wiz-summary__additional {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
	padding: var(--wiz-spacing-xs) 0;
	line-height: 1.4;
}

/* Session countdown (footer) */
.wiz-footer__session {
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
	margin-top: var(--wiz-spacing-sm);
	text-align: right;
}

.wiz-footer__session--warning {
	color: var(--wiz-color-error);
	font-weight: 700;
}

/* --- Confirmation / Finish --- */
.wiz-confirmation {
	padding: var(--wiz-spacing-lg);
	background: var(--wiz-color-success-bg);
	border: 2px solid var(--wiz-color-success);
	margin-bottom: var(--wiz-spacing-lg);
}

.wiz-confirmation__title {
	font-size: var(--wiz-font-size-lg);
	font-weight: 700;
	color: var(--wiz-color-success);
	margin: 0 0 var(--wiz-spacing-sm) 0;
}

.wiz-detail-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wiz-spacing-sm) var(--wiz-spacing-md);
	margin-bottom: var(--wiz-spacing-lg);
}

.wiz-detail-list dt {
	font-weight: 600;
	color: var(--wiz-color-text-muted);
}

.wiz-detail-list dd {
	margin: 0;
}

/* --- Loading Spinner --- */
.wiz-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--wiz-spacing-xl);
	gap: var(--wiz-spacing-md);
}

/* Initial loading skeleton — visible immediately after the static shell
   parses, before any wizard JS executes. Cleared by WizardApp.init(). */
.wiz-initial-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
	padding: var(--wiz-spacing-xl);
}

.wiz-spinner {
	width: 2.5rem;
	height: 2.5rem;
	border: 3px solid var(--wiz-color-border-light);
	border-top-color: var(--wiz-color-primary);
	border-radius: 50%;
	animation: wiz-spin 0.8s linear infinite;
}

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

.wiz-loading__text {
	color: var(--wiz-color-text-muted);
	font-size: var(--wiz-font-size-sm);
}

/* --- Session Timeout Dialog --- */
.wiz-dialog-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.wiz-dialog {
	background: var(--wiz-color-bg);
	padding: var(--wiz-spacing-lg);
	max-width: 500px;
	width: 90%;
	border: 2px solid var(--wiz-color-border);
}

.wiz-dialog__title {
	font-size: var(--wiz-font-size-lg);
	font-weight: 700;
	margin: 0 0 var(--wiz-spacing-md) 0;
}

.wiz-dialog__actions {
	display: flex;
	gap: var(--wiz-spacing-md);
	margin-top: var(--wiz-spacing-lg);
}

/* --- Footer --- */
.wiz-footer {
	padding: var(--wiz-spacing-lg) 0;
	border-top: 2px solid var(--wiz-color-border);
	margin-top: var(--wiz-spacing-xl);
	/* The strong brand intensity tints cards, panels AND the footer — the field
	   description and the release note both say so. --wiz-color-bg-tint is the
	   only variable that exists under that intensity alone; --wiz-color-bg-alt
	   carries a theme default, so reading that one here would tint the footer of
	   every booking page, branded or not (#977). */
	background: var(--wiz-color-bg-tint, transparent);
}

.wiz-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wiz-spacing-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wiz-footer__links a {
	color: var(--wiz-color-primary-text, var(--wiz-color-primary));
	text-decoration: underline;
	font-size: var(--wiz-font-size-sm);
}

.wiz-footer__links a:hover {
	color: var(--wiz-color-primary-hover);
}

/* --- Privacy Checkbox --- */
.wiz-privacy {
	display: flex;
	align-items: flex-start;
	gap: var(--wiz-spacing-sm);
	padding: var(--wiz-spacing-md);
	background: var(--wiz-color-bg-alt);
}

.wiz-privacy input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	accent-color: var(--wiz-color-primary);
}

.wiz-privacy--error {
	border: 2px solid var(--wiz-color-error);
	background: var(--wiz-color-error-bg);
}

.wiz-privacy--error label {
	color: var(--wiz-color-error);
}

/* --- Aria Live Region (hidden) --- */
.wiz-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.wiz-page {
		padding: 0 var(--wiz-spacing-sm);
	}

	[data-wiz-theme] .wiz-header,
	[data-wiz-theme] .wiz-footer {
		margin-left: calc(-1 * var(--wiz-spacing-sm)) !important;
		margin-right: calc(-1 * var(--wiz-spacing-sm)) !important;
	}

	.wiz-main {
		flex-direction: column;
		gap: var(--wiz-spacing-md);
		padding: var(--wiz-spacing-md) 0;
	}

	.wiz-content,
	[data-wiz-theme] .wiz-content {
		padding: var(--wiz-spacing-md);
	}

	.wiz-sidebar {
		width: 100%;
		order: -1;
	}

	.wiz-summary,
	[data-wiz-theme] .wiz-summary {
		position: static;
		padding: var(--wiz-spacing-md);
	}

	.wiz-summary__title {
		font-size: var(--wiz-font-size-base);
		margin-bottom: var(--wiz-spacing-sm);
		padding-bottom: var(--wiz-spacing-xs);
	}

	.wiz-summary__section {
		padding: var(--wiz-spacing-xs) 0;
	}

	.wiz-summary__label {
		font-size: 0.6875rem;
	}

	.wiz-summary__value {
		font-size: var(--wiz-font-size-sm);
	}

	.wiz-steps__label {
		font-size: 0.75rem;
		padding: var(--wiz-spacing-xs) 0;
	}

	.wiz-steps__list::before,
	.wiz-steps__list::after {
		display: none;
	}

	.wiz-calendar__nav {
		flex-wrap: wrap;
		gap: 0;
	}

	.wiz-calendar__nav .wiz-calendar__period {
		flex-basis: 100%;
		order: -1;
		font-size: var(--wiz-font-size-base);
		margin-bottom: var(--wiz-spacing-xs);
	}

	.wiz-calendar__nav > .wiz-btn {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		text-align: center;
	}

	.wiz-calendar__nav > .wiz-btn:first-child {
		border-radius: var(--wiz-border-radius) 0 0 var(--wiz-border-radius);
		border-right: none;
	}

	.wiz-calendar__nav > .wiz-btn:last-child {
		border-radius: 0 var(--wiz-border-radius) var(--wiz-border-radius) 0;
		border-left: 1px solid var(--wiz-color-border);
	}

	[data-wiz-theme="artdeco"] .wiz-calendar__nav > .wiz-btn:first-child {
		clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 12px 100%, 0% 50%) !important;
	}

	[data-wiz-theme="artdeco"] .wiz-calendar__nav > .wiz-btn:last-child {
		clip-path: polygon(0% 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 0% 100%) !important;
	}

	[data-wiz-theme="cyberpunk"] .wiz-calendar__nav > .wiz-btn:first-child {
		clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%) !important;
	}

	[data-wiz-theme="cyberpunk"] .wiz-calendar__nav > .wiz-btn:last-child {
		clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%) !important;
	}

	/* Phones keep two columns regardless of the setting (#953) — seven days across a
	   360px screen leaves no usable tap target for a slot. Unchanged behaviour. */
	.wiz-calendar__days {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wiz-spacing-sm);
	}

	.wiz-day {
		min-width: 0;
		overflow: hidden;
	}

	.wiz-slot {
		padding: var(--wiz-spacing-xs);
	}

	.wiz-detail-list {
		grid-template-columns: 1fr;
	}

	.wiz-actions {
		gap: 0;
		align-items: stretch;
	}

	.wiz-actions > .wiz-btn {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		text-align: center;
		font-size: var(--wiz-font-size-sm);
		padding-left: var(--wiz-spacing-sm);
		padding-right: var(--wiz-spacing-sm);
	}

	.wiz-actions > .wiz-btn:first-child:not(:only-child) {
		border-radius: var(--wiz-border-radius) 0 0 var(--wiz-border-radius);
		border-right: none;
	}

	.wiz-actions > .wiz-btn:last-child:not(:only-child) {
		border-radius: 0 var(--wiz-border-radius) var(--wiz-border-radius) 0;
		border-left: 1px solid var(--wiz-color-border);
	}

	[data-wiz-theme="artdeco"] .wiz-actions > .wiz-btn:first-child:not(:only-child) {
		clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 12px 100%, 0% 50%) !important;
	}

	[data-wiz-theme="artdeco"] .wiz-actions > .wiz-btn:last-child:not(:only-child) {
		clip-path: polygon(0% 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 0% 100%) !important;
	}

	[data-wiz-theme="artdeco"] .wiz-actions > .wiz-btn:only-child {
		clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0% 50%) !important;
	}

	[data-wiz-theme="cyberpunk"] .wiz-actions > .wiz-btn:first-child:not(:only-child) {
		clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%) !important;
	}

	[data-wiz-theme="cyberpunk"] .wiz-actions > .wiz-btn:last-child:not(:only-child) {
		clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%) !important;
	}

	[data-wiz-theme="cyberpunk"] .wiz-actions > .wiz-btn:only-child {
		clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%) !important;
	}

	.wiz-location {
		flex-wrap: wrap;
		padding: var(--wiz-spacing-sm);
		gap: var(--wiz-spacing-sm);
	}

	.wiz-location__body {
		flex: 1 1 calc(100% - 3rem);
		min-width: 0;
	}

	.wiz-location__image {
		width: 50px;
		height: 38px;
		order: -1;
	}

	.wiz-location__earliest {
		flex-basis: 100%;
		min-width: 0;
		margin-left: 0;
		padding-top: var(--wiz-spacing-sm);
		border-top: 1px solid var(--wiz-color-border-light);
		margin-top: var(--wiz-spacing-xs);
	}

	.wiz-location__earliest .wiz-btn--sm {
		width: 100%;
		text-align: center;
	}

	.wiz-service {
		flex-wrap: wrap;
		padding: var(--wiz-spacing-sm);
		gap: var(--wiz-spacing-sm);
	}

	.wiz-service__body {
		min-width: 0;
		flex: 1 1 calc(100% - 3rem);
	}

	.wiz-service__extra {
		flex: 1 1 100%;
		border-left: none;
		padding-left: 0;
		border-top: 1px solid var(--wiz-color-border-light, rgba(128,128,128,0.25));
		padding-top: var(--wiz-spacing-sm);
	}
}

@media (max-width: 480px) {
	:root {
		--wiz-font-size-base: 0.9375rem;
		--wiz-font-size-xl: 1.25rem;
	}

	.wiz-header__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- Step Info Text --- */
.wiz-step__info {
	margin: 0 0 var(--wiz-spacing-md) 0;
	color: var(--wiz-color-text-muted);
	font-size: var(--wiz-font-size-sm);
}

/* --- Step Sub-Header --- */
.wiz-step__header {
	font-size: var(--wiz-font-size-lg);
	font-weight: 600;
	margin: 0 0 var(--wiz-spacing-sm) 0;
	color: var(--wiz-color-text-muted);
}

/* --- Info Box --- */
.wiz-info-box {
	padding: var(--wiz-spacing-md);
	margin-bottom: var(--wiz-spacing-md);
	background: var(--wiz-color-warning-bg);
	border: 1px solid var(--wiz-color-border-light);
	font-size: var(--wiz-font-size-sm);
}

/* --- Service Categories --- */
.wiz-category {
	margin-bottom: var(--wiz-spacing-md);
	border: 1px solid var(--wiz-color-border-light);
}

.wiz-category__title {
	font-weight: 700;
	padding: var(--wiz-spacing-sm) var(--wiz-spacing-md);
	cursor: pointer;
	font-size: var(--wiz-font-size-base);
}

.wiz-category__title:hover {
	background: var(--wiz-color-bg-alt);
}

/* Services without a category share the category frame but have no title */
.wiz-category--uncategorized {
	padding-top: var(--wiz-spacing-sm);
}

/* --- Service URL --- */
.wiz-service__url {
	display: inline-block;
	margin-top: var(--wiz-spacing-xs);
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-primary-text, var(--wiz-color-primary));
}

/* --- Location Image --- */
.wiz-location__image {
	flex-shrink: 0;
	align-self: center;
	width: 80px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--wiz-color-border-light);
}

.wiz-location__image--empty {
	background: var(--wiz-color-bg-alt);
}

/* --- Location Select All --- */
.wiz-location--all {
	background: transparent;
	border: 2px dashed var(--wiz-color-border-light);
}

/* --- Footer Accessibility Button --- */
.wiz-footer__link-btn {
	background: none;
	border: none;
	color: var(--wiz-color-primary-text, var(--wiz-color-primary));
	text-decoration: underline;
	font-size: var(--wiz-font-size-sm);
	font-family: inherit;
	cursor: pointer;
	padding: 0;
}

.wiz-footer__link-btn:hover {
	color: var(--wiz-color-primary-hover);
}

/* --- Footer Text --- */
.wiz-footer__text {
	margin-top: var(--wiz-spacing-md);
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-text-muted);
}

/* --- Earliest Appointment (location cards) --- */
.wiz-location__earliest {
	flex: 0 0 16rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wiz-font-size-sm);
	color: var(--wiz-color-primary-text, var(--wiz-color-primary));
	margin-left: auto;
	padding: var(--wiz-spacing-xs) var(--wiz-spacing-sm);
	text-align: center;
}

.wiz-location__earliest-loading {
	font-style: italic;
	color: var(--wiz-color-text-muted);
}

.wiz-location__earliest-none {
	color: var(--wiz-color-text-muted);
}

.wiz-location__earliest .wiz-btn--sm {
	padding: var(--wiz-spacing-sm) var(--wiz-spacing-md);
	font-size: var(--wiz-font-size-sm);
	white-space: normal;
	line-height: 1.3;
	width: 100%;
	height: 100%;
}

/* --- Finish Action Buttons --- */
.wiz-finish-actions {
	display: flex;
	gap: var(--wiz-spacing-md);
	flex-wrap: wrap;
	margin-top: var(--wiz-spacing-lg);
}

/* --- Print Content (hidden on screen) --- */
.wiz-print-content {
	display: none;
}

/* --- Print --- */
@media print {
	.wiz-skip-link,
	.wiz-steps,
	.wiz-actions,
	.wiz-sidebar,
	.wiz-footer,
	.wiz-finish-actions,
	.wiz-finish-cancel {
		display: none !important;
	}

	.wiz-main {
		display: block;
	}

	body {
		font-size: 11pt;
		color: #000;
	}

	.wiz-confirmation {
		border: 1px solid #000;
		background: none;
	}

	.wiz-print-content {
		display: block !important;
	}
}

/* --- Live Slot Updates (SignalR) --- */

.wiz-slot--removed {
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}

.wiz-slot--added {
	animation: wiz-slot-fade-in 0.5s ease forwards;
}

@keyframes wiz-slot-fade-in {
	from { opacity: 0; transform: scale(0.95); }
	to   { opacity: 1; transform: scale(1); }
}

/* WCAG 2.3.1: Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.wiz-slot,
	.wiz-slot--removed,
	.wiz-slot--added {
		transition: none !important;
		animation: none !important;
	}
}