/*
 * W14-56 public booking flow. Scoped to .savvy-booking; loaded only where the flow renders.
 *
 * W14-58 publishes eighteen --sv-booking-* properties in the Base Specification. The details
 * step reuses Forms Studio classes and the shared field stylesheet through WordPress assets.
 * Booking colour roles also route to those shared fields, without a second form renderer.
 *
 * Every control is at least 16px (Brand & Design §4.5) and every target at least 44px (WP UI §6.4;
 * Brand & Design A.5.2). Control borders use the non-inverting --af-color-border-control; focus is the
 * two-tone fixed indicator (Public Website Specification §6.2.6).
 */

.savvy-booking {
	box-sizing: border-box;
	max-inline-size: min(100%, max(16rem, var(--sv-booking-max-width, 48rem)));
	color: var(--sv-booking-ink, var(--savvy-color-text-primary, #1d2327));
	background: var(--sv-booking-surface, var(--savvy-color-surface, #fff));
	font-size: max(1rem, 16px, var(--sv-booking-control-size, 0px));
	line-height: 1.6;
}

/* Shared fields inherit booking surface roles; fixed control borders remain distinct from band colours. */
.savvy-booking .savvy-vault-signup--booking {
	--sv-form-default-bg: transparent;
	--sv-form-default-ink: var(--sv-booking-ink, var(--savvy-color-text-primary, #1d2327));
}
[data-af-band] .savvy-booking {
	--af-color-border-control: #6B7280;
	--savvy-color-primary: #2271b1;
}

.savvy-booking *,
.savvy-booking *::before,
.savvy-booking *::after { box-sizing: inherit; }

.savvy-booking [hidden] { display: none !important; }

/* Public Website Specification §6.3.2 2xl rung: 20px mobile to 24px desktop, line-height 1.4. */
.savvy-booking__title { margin-block: 0 var(--savvy-space-2, .5rem); font-size: clamp(1.25rem, 1.1rem + .75vw, 1.5rem); font-weight: 600; line-height: 1.4; }

/* Interactive ink uses the published role; headings inherit the component surface ink. */
.savvy-booking h2,
.savvy-booking h3,
.savvy-booking legend { color: inherit; }
.savvy-booking a:not(.savvy-booking__secondary) { color: var(--sv-booking-link-ink, var(--af-color-interactive, #1E3A8A)); text-decoration: underline; }
.savvy-booking a:not(.savvy-booking__secondary):hover { color: var(--sv-booking-link-hover-ink, var(--af-color-interactive-hover, #92400E)); }

.savvy-booking__meta,
.savvy-booking__zone,
.savvy-booking__description,
.savvy-booking__summary { margin-block: 0 var(--savvy-space-4, 1rem); }

.savvy-booking__meta,
.savvy-booking__zone,
.savvy-booking__hold-note { color: var(--sv-booking-muted-ink, var(--savvy-color-text-secondary, #646970)); }

.savvy-booking__notice {
	margin-block: max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem)));
	padding: max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem)));
	/* An indicator rule, not a control border (§6.2.5): neutral-600, not border-control. */
	border-inline-start: 4px solid var(--af-color-neutral-600, #4B5563);
	background: var(--sv-booking-notice-surface, var(--savvy-color-surface-muted, #f7f8fb));
}
.savvy-booking__notice--error { border-inline-start-color: var(--sv-booking-error-ink, var(--savvy-color-error, #b32d2e)); color: var(--sv-booking-error-ink, var(--savvy-color-error, #8a2424)); }
.savvy-booking__availability { display: grid; gap: max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem))); margin-block: var(--savvy-space-4, 1rem); }

/* Error summary: text and a bordered panel, never colour alone (Brand & Design §4.6). */
.savvy-booking__errors {
	margin-block: 0 var(--savvy-space-4, 1rem);
	padding: max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem))) var(--savvy-space-4, 1rem);
	border: 2px solid var(--sv-booking-error-ink, var(--savvy-color-error, #b32d2e));
	border-radius: var(--sv-booking-radius, var(--af-radius-md, 8px));
	background: var(--sv-booking-surface, var(--savvy-color-surface, #fff));
}

.savvy-booking__errors-title { margin: 0 0 var(--savvy-space-2, .5rem); font-weight: 600; }
.savvy-booking__errors ul { margin: 0; padding-inline-start: 1.25em; }
.savvy-booking__errors a:not(.savvy-booking__secondary) { display: inline-flex; align-items: center; min-height: max(44px, var(--sv-booking-target-size, 44px)); color: var(--sv-booking-error-ink, var(--savvy-color-error, #b32d2e)); font-weight: 600; }

/* The view controls: timezone and length. */
.savvy-booking__view {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem)));
	margin-block: 0 var(--savvy-space-6, 1.5rem);
}

.savvy-booking__view-field { display: grid; gap: var(--savvy-space-1, .25rem); flex: 1 1 14rem; min-width: 0; }
.savvy-booking__label { font-weight: 600; }
.savvy-booking__suggest { flex: 1 1 100%; margin: 0; }

.savvy-booking__select {
	width: 100%;
	min-height: max(44px, var(--sv-booking-target-size, 44px));
	padding: var(--savvy-space-2, .5rem) max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem)));
	color: inherit;
	background: var(--sv-booking-surface, var(--savvy-color-surface, #fff));
	border: 1px solid var(--sv-booking-control-border, var(--af-color-border-control, #6b7280));
	border-radius: var(--sv-booking-control-radius, var(--savvy-radius-sm, .25rem));
	font-family: inherit;
	font-size: max(1rem, 16px, var(--sv-booking-control-size, 0px));
}

.savvy-booking__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: max(44px, var(--sv-booking-target-size, 44px));
	padding: var(--savvy-space-2, .5rem) var(--savvy-space-4, 1rem);
	color: var(--sv-booking-link-ink, var(--af-color-interactive, #1e3a8a));
	background: var(--sv-booking-surface, var(--savvy-color-surface, #fff));
	border: 1px solid var(--sv-booking-control-border, var(--af-color-border-control, #6b7280));
	border-radius: var(--sv-booking-radius, var(--af-radius-md, 8px));
	font-family: inherit;
	font-size: max(1rem, 16px, var(--sv-booking-control-size, 0px));
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

/* Steps. */
.savvy-booking__step { min-width: 0; margin: 0 0 var(--savvy-space-6, 1.5rem); padding: 0; border: 0; }
/* §6.3.2 xl rung, 18px mobile to 20px desktop. */
.savvy-booking__legend { padding: 0; margin: 0 0 max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem))); font-size: clamp(1.125rem, 1.05rem + .375vw, 1.25rem); font-weight: 600; line-height: 1.5; }

.savvy-booking__day { margin-block: 0 var(--savvy-space-4, 1rem); }
.savvy-booking__day-title { margin: 0 0 var(--savvy-space-2, .5rem); font-size: 1em; font-weight: 600; }

.savvy-booking__slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
	gap: var(--savvy-space-2, .5rem);
}

/* A slot is a native radio inside a 44px label: the whole row is the target, and the checked state is
   shown by the radio itself, a heavier border and weight, not by colour alone. */
.savvy-booking__slot,
.savvy-booking__choice {
	display: flex;
	align-items: center;
	gap: var(--savvy-space-2, .5rem);
	min-height: max(44px, var(--sv-booking-target-size, 44px));
	padding: var(--savvy-space-2, .5rem) max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem)));
	border: 1px solid var(--sv-booking-control-border, var(--af-color-border-control, #6b7280));
	border-radius: var(--sv-booking-radius, var(--af-radius-md, 8px));
	background: var(--sv-booking-surface, var(--savvy-color-surface, #fff));
	cursor: pointer;
	overflow-wrap: anywhere;
}

.savvy-booking__choice { align-items: flex-start; margin-block: 0 var(--savvy-space-2, .5rem); }
/* A time reads as one unit; it never breaks between the number and am/pm. */
.savvy-booking__slot span { white-space: normal; min-width: 0; }

.savvy-booking__slot input[type="radio"],
.savvy-booking__choice input[type="radio"] { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; }

/* Brand & Design §4.5 names every form input, glyph-only ones included; the UA default is 13.33px. */
.savvy-booking input[type="radio"],
.savvy-booking input[type="checkbox"] { font-size: max(1rem, 16px, var(--sv-booking-control-size, 0px)); }

.savvy-booking__slot:has(input:checked),
.savvy-booking__choice:has(input:checked) { border-width: 2px; border-color: var(--sv-booking-link-ink, var(--af-color-interactive, #1e3a8a)); font-weight: 600; }

.savvy-booking__choice-text { display: grid; gap: var(--savvy-space-1, .25rem); }
.savvy-booking__choice-label { font-weight: 600; }
.savvy-booking__choice-about { color: var(--sv-booking-muted-ink, var(--savvy-color-text-secondary, #646970)); font-weight: 400; }

.savvy-booking__pager { display: flex; flex-wrap: wrap; gap: var(--savvy-space-2, .5rem); margin-block-start: max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem))); }

/* The details step sits inside .savvy-vault-signup for the shared field styles; let it use the width. */
.savvy-booking .savvy-vault-signup--booking { max-width: 100%; }
.savvy-booking .savvy-vault-signup__label,
.savvy-booking .savvy-vault-signup__help { font-size: max(1rem, 16px, var(--sv-form-label-size, 0px), var(--sv-booking-control-size, 0px)); }
.savvy-booking .savvy-vault-signup__consent label { flex: 1 1 auto; }
.savvy-booking .savvy-vault-signup__consent label { display: flex; align-items: center; min-block-size: max(44px, var(--sv-booking-target-size, 44px)); }
.savvy-booking__privacy { margin-block: var(--savvy-space-2, .5rem) 0; }
/* The privacy notice link is interactive text: 16px and a 44px target (Brand & Design §4.5; Bookings Spec §15). */
.savvy-booking__privacy a { display: inline-flex; align-items: center; min-height: max(44px, var(--sv-booking-target-size, 44px)); font-size: max(1rem, 16px, var(--sv-booking-control-size, 0px)); }
/* Out-specifies the signup's inline .savvy-vault-signup__button width, whichever prints later. */
.savvy-booking .savvy-vault-signup__button.savvy-booking__submit { width: 100%; }

/* Honeypot: out of view and out of the accessibility tree; never display:none, which some bots skip. */
.savvy-booking__trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Confirmation. */
.savvy-booking__facts { margin: 0 0 var(--savvy-space-4, 1rem); }
.savvy-booking__facts > div { display: grid; grid-template-columns: minmax(6rem, 30%) 1fr; gap: var(--savvy-space-2, .5rem); padding-block: var(--savvy-space-2, .5rem); border-block-end: 1px solid var(--savvy-color-border, #dcdcde); }
.savvy-booking__facts dt { font-weight: 600; }
.savvy-booking__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.savvy-booking__place,
.savvy-booking__place-about { display: block; }
.savvy-booking__place-link { display: inline-flex; align-items: center; min-height: max(44px, var(--sv-booking-target-size, 44px)); overflow-wrap: anywhere; }
.savvy-booking__reference { overflow-wrap: anywhere; }

/* List placement. */
.savvy-booking__types { margin: 0; padding: 0; list-style: none; }
.savvy-booking__type { padding-block: max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem))); border-block-end: 1px solid var(--savvy-color-border, #dcdcde); }
.savvy-booking__type-link { display: inline-flex; align-items: center; min-height: max(44px, var(--sv-booking-target-size, 44px)); font-weight: 600; }

/* Accountless management page. It is a standalone document rather than host-theme content, so the
   shared booking scope owns its page ground, card geometry and complete control treatment. */
body.savvy-booking-manage {
	margin: 0;
	color: var(--sv-booking-ink, var(--savvy-color-text-primary, #1d2327));
	background: var(--sv-booking-notice-surface, var(--savvy-color-surface-muted, #f7f8fb));
}

.savvy-booking-manage .savvy-booking {
	width: 100%;
	margin-inline: auto;
	padding: clamp(1rem, 4vw, 2rem);
}

.savvy-booking-manage .savvy-booking__panel > h1 { margin-block: 0 var(--savvy-space-5, 1.25rem); line-height: 1.2; }
.savvy-booking-manage .savvy-booking__day {
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid var(--savvy-color-border, #dcdcde);
	border-radius: var(--sv-booking-radius, var(--af-radius-md, 8px));
	background: var(--sv-booking-surface, var(--savvy-color-surface, #fff));
}
.savvy-booking-manage .savvy-booking__day h2 { margin-block: 0 var(--savvy-space-2, .5rem); line-height: 1.3; }
.savvy-booking-manage .savvy-booking__day p { overflow-wrap: anywhere; }
.savvy-booking-manage .savvy-booking__day a,
.savvy-booking-manage .savvy-booking__day summary { display: inline-flex; align-items: center; min-height: max(44px, var(--sv-booking-target-size, 44px)); }
.savvy-booking-manage .savvy-booking__day summary { width: 100%; font-weight: 600; cursor: pointer; }
.savvy-booking-manage .savvy-booking__day form,
.savvy-booking-manage .savvy-booking__details { display: grid; gap: var(--savvy-space-2, .5rem); margin-block-start: max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem))); }
.savvy-booking-manage .savvy-booking label { font-weight: 600; }
.savvy-booking-manage .savvy-booking input,
.savvy-booking-manage .savvy-booking select,
.savvy-booking-manage .savvy-booking textarea,
.savvy-booking-manage .savvy-booking button {
	width: 100%;
	min-height: max(44px, var(--sv-booking-target-size, 44px));
	padding: var(--savvy-space-2, .5rem) max(0px, var(--sv-booking-gap, var(--savvy-space-3, .75rem)));
	color: inherit;
	background: var(--sv-booking-surface, var(--savvy-color-surface, #fff));
	border: 1px solid var(--sv-booking-control-border, var(--af-color-border-control, #6b7280));
	border-radius: var(--sv-booking-control-radius, var(--savvy-radius-sm, .25rem));
	font: inherit;
	font-size: max(1rem, 16px, var(--sv-booking-control-size, 0px));
}
.savvy-booking-manage .savvy-booking textarea { min-height: 6rem; resize: vertical; }
.savvy-booking-manage .savvy-booking button {
	color: var(--sv-booking-action-ink, var(--savvy-color-text-on-primary, #fff));
	background: var(--sv-booking-action-bg, var(--savvy-color-primary, #2271b1));
	font-weight: 600;
	cursor: pointer;
}

/* Fixed two-tone focus for everything this stylesheet owns. */
.savvy-booking a:focus-visible,
.savvy-booking button:focus-visible,
.savvy-booking input:focus-visible,
.savvy-booking select:focus-visible,
.savvy-booking textarea:focus-visible,
.savvy-booking__slot:focus-within,
.savvy-booking__choice:focus-within,
.savvy-booking [tabindex="-1"]:focus-visible {
	outline: 2px solid var(--af-color-focus-ring-fixed-inner, #0f172a);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--af-color-focus-ring-fixed-outer, #fff);
}

@media (forced-colors: active) {
	.savvy-booking a:focus-visible,
	.savvy-booking button:focus-visible,
	.savvy-booking input:focus-visible,
	.savvy-booking select:focus-visible,
	.savvy-booking textarea:focus-visible,
	.savvy-booking__slot:focus-within,
	.savvy-booking__choice:focus-within { outline: 2px solid CanvasText; box-shadow: none; }
	.savvy-booking__slot:has(input:checked),
	.savvy-booking__choice:has(input:checked) { border-color: Highlight; }
}

@media (max-width: 30rem) {
	.savvy-booking__facts > div { grid-template-columns: 1fr; gap: 0; }
	.savvy-booking__view .savvy-booking__secondary { width: 100%; }
	.savvy-booking-manage .savvy-booking { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.savvy-booking *,
	.savvy-booking *::before,
	.savvy-booking *::after { scroll-behavior: auto !important; transition-property: none !important; transition-duration: 0ms !important; animation-duration: 0ms !important; }
}


/* W14-58: scoped layout and public contract. Fixed focus colours stay outside
   the contract so overrides cannot remove the two-tone accessibility indicator. */
.savvy-booking { inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; }
.savvy-booking .savvy-vault-signup--booking {
	--sv-form-bg: transparent;
	--sv-form-ink: var(--sv-booking-ink, var(--savvy-color-text-primary, #1d2327));
	--sv-form-field-bg: var(--sv-booking-surface, var(--savvy-color-surface, #fff));
	--sv-form-field-ink: var(--sv-booking-ink, var(--savvy-color-text-primary, #1d2327));
	--sv-form-field-border: var(--sv-booking-control-border, var(--af-color-border-control, #6b7280));
	--sv-form-btn-bg: var(--sv-booking-action-bg, var(--savvy-color-primary, #2271b1));
}
.savvy-booking :is(input:not([type="hidden"]), select, textarea, button) {
	font-size: max(16px, 1rem, var(--sv-booking-control-size, 0px));
	max-inline-size: 100%;
}
.savvy-booking :is(a, button, select, input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), textarea),
.savvy-booking .savvy-vault-signup__consent {
	min-block-size: max(44px, var(--sv-booking-target-size, 44px));
}
.savvy-booking a { min-inline-size: 44px; }
/* The commercial forms reuse the same published surface, action and control roles. */
.savvy-booking__commerce form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--savvy-space-4, 1rem); margin-block: var(--savvy-space-4, 1rem); }
.savvy-booking__commerce a { display: inline-flex; align-items: center; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
.savvy-booking__commerce :is(article, form, details) { min-inline-size: 0; }
.savvy-booking__commerce button { box-sizing: border-box; min-inline-size: 0; overflow-wrap: anywhere; }
.savvy-booking__commerce button { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; padding: var(--savvy-space-2, .5rem) var(--savvy-space-4, 1rem); border: var(--af-border-width-control, 1px) solid var(--sv-booking-control-border, var(--af-color-border-control, #6B7280)); border-radius: var(--sv-booking-radius, var(--af-radius-md, 8px)); color: var(--sv-booking-action-ink, var(--savvy-color-text-on-primary, #fff)); background: var(--sv-booking-action-bg, var(--savvy-color-primary, #2271b1)); }
.savvy-booking__commerce .savvy-booking__choice input[type="checkbox"] { flex: 0 0 auto; inline-size: 24px; block-size: 24px; margin: 0; }
.savvy-booking summary { display: flex; align-items: center; min-block-size: max(44px, var(--sv-booking-target-size, 44px)); cursor: pointer; }
.savvy-booking summary:focus-visible { outline: 2px solid var(--af-color-focus-ring-fixed-inner, #0F172A); outline-offset: 2px; box-shadow: 0 0 0 6px var(--af-color-focus-ring-fixed-outer, #FFFFFF); }
@media (forced-colors: active) { .savvy-booking summary:focus-visible { outline-color: CanvasText; box-shadow: none; } }
.savvy-booking .savvy-vault-signup__button.savvy-booking__submit {
	color: var(--sv-booking-action-ink, var(--savvy-color-text-on-primary, #fff));
	background: var(--sv-booking-action-bg, var(--savvy-color-primary, #2271b1));
}
.savvy-booking__type-link { display: inline-flex; align-items: center; }
.savvy-booking__secondary { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
.savvy-booking-popup { font-family: inherit; }
.savvy-booking-popup__trigger,
.savvy-booking-popup__close {
	display: inline-flex; align-items: center; justify-content: center;
	min-block-size: max(44px, var(--sv-booking-target-size, 44px)); min-inline-size: 44px;
	padding: var(--savvy-space-2, .5rem) var(--savvy-space-4, 1rem);
	font: inherit; font-size: max(16px, 1rem, var(--sv-booking-control-size, 0px));
	color: var(--sv-booking-action-ink, var(--savvy-color-text-on-primary, #fff));
	background: var(--sv-booking-action-bg, var(--savvy-color-primary, #2271b1));
	border: 1px solid var(--sv-booking-control-border, var(--af-color-border-control, #6b7280));
	border-radius: var(--sv-booking-control-radius, var(--savvy-radius-sm, .25rem));
	text-decoration: none; cursor: pointer; overflow-wrap: anywhere;
}
.savvy-booking-popup__panel {
	box-sizing: border-box; inline-size: min(calc(100% - 2rem), max(16rem, var(--sv-booking-max-width, 48rem)));
	max-inline-size: calc(100% - 2rem); max-block-size: calc(100dvh - 2rem); overflow: auto;
	padding: max(.5rem, var(--sv-booking-popup-padding, var(--savvy-space-4, 1rem)));
	color: var(--sv-booking-ink, var(--savvy-color-text-primary, #1d2327));
	background: var(--sv-booking-surface, var(--savvy-color-surface, #fff));
	border: 1px solid var(--sv-booking-control-border, var(--af-color-border-control, #6b7280));
	border-radius: var(--sv-booking-radius, var(--af-radius-md, 8px));
}
.savvy-booking-popup__panel::backdrop { background: var(--sv-booking-backdrop, rgb(15 23 42 / .65)); }
.savvy-booking-popup__close { margin-block-end: var(--savvy-space-3, .75rem); }
.savvy-booking-popup__close[hidden] { display: none; }
.savvy-booking-popup :is(a, button):focus-visible {
	outline: 2px solid var(--af-color-focus-ring-fixed-inner, #0f172a); outline-offset: 2px; box-shadow: 0 0 0 6px var(--af-color-focus-ring-fixed-outer, #fff);
}
@media (forced-colors: active) {
	.savvy-booking-popup :is(a, button):focus-visible { outline-color: CanvasText; box-shadow: none; }
	.savvy-booking-popup__panel { border-color: CanvasText; }
}
.savvy-booking input[name="sv_bk_sms"] { flex: none; inline-size: 24px; block-size: 24px; margin: 0; border: 1px solid var(--af-color-border-control, #6B7280); accent-color: var(--af-color-link-fixed, #1E3A8A); }