/* Booking widget (Task 17). Tokens from site.css. */

.vb-booking__app {
	margin-top: 12px;
}

.vb-booking__step {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vb-booking__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
	color: var(--vb-ink, #30272b);
}

.vb-booking__field select,
.vb-booking__field input,
.vb-booking__field textarea {
	/* 44px on every engine: WebKit ignores min-height on a native select and
	   drew the booking fields 27px tall on iOS (re-audit A8). appearance:
	   none takes the native box away; the chevron comes back as a
	   background, the way the home search does it. */
	box-sizing: border-box;
	min-height: var(--vb-tap-primary, 44px);
	padding: 10px 12px;
	font: inherit;
	font-weight: 400;
	color: var(--vb-ink, #30272b);
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-booking__field select:focus,
.vb-booking__field input:focus,
.vb-booking__field textarea:focus {
	/* Focus and selected states carry information, so 1.4.11 applies to them
	   too. The mint reads 2.59:1 against white; the darker green is the same
	   brand signal at 5.39:1. */
	outline: 2px solid transparent;
	border-color: var(--vb-accent-text, #68192e);
	box-shadow: var(--vb-focus, 0 0 0 2px var(--vb-raised, #fffcf8), 0 0 0 5px var(--vb-focus-color, #205f9c));
}

.vb-booking__slots-title {
	margin: 6px 0 0;
	font-size: var(--vb-text-body, 1rem);
}

.vb-booking__slots {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Calendar-style date picker -------------------------------------------------- */
.vb-booking__weeknav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.vb-booking__weeklabel {
	font-weight: 700;
	color: var(--vb-ink, #30272b);
	font-variant-numeric: tabular-nums;
}

.vb-booking__weekbtn {
	/* Was a hard 40 x 40. The two arrows are how somebody reaches next week,
	   and on a phone they sat four pixels under the target. */
	min-width: 44px;
	min-height: 44px;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--vb-accent-text, #68192e);
	background: var(--vb-primary-soft, #f3e2e7);
	border: none;
	border-radius: var(--vb-radius-sm, 11px);
	cursor: pointer;
}

.vb-booking__weekbtn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.vb-booking__week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.vb-booking__weekday {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 5px 0 4px;
	/* Seven of these share a 332 px card, so each is ~42 px wide - the width
	   cannot reach 44, and forcing it would push the strip out of the card.
	   The height can, and does. */
	min-height: 44px;
	background: var(--vb-surface, #f2e7df);
	border: 1px solid transparent;
	border-radius: var(--vb-radius-sm, 11px);
	cursor: pointer;
	color: var(--vb-ink, #30272b);
}

.vb-booking__weekday:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.vb-booking__weekday:not(:disabled):hover {
	border-color: var(--vb-primary, #b66a80);
}

.vb-booking__weekday.is-selected {
	background: var(--vb-primary-dark, #68192e);
	/* The edge has to stay visible against the page ground, which is dark
	   in dark mode - the fill colour reads 2.8:1 on it. */
	border-color: var(--vb-accent-text, #68192e);
	color: #fff;
	box-shadow: var(--vb-glow, 0 18px 44px -18px rgba(104, 25, 46, 0.30));
}

.vb-booking__weekday-dow {
	font-size: var(--vb-text-caption, 0.78rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.8;
}

/* On the selected day the label is white on #0c7a4a - 5.39:1 standing
   alone, 4.05:1 once this opacity is applied to it. The selected state is
   an active control, so it gets the full value back. */
.vb-booking__weekday.is-selected .vb-booking__weekday-dow {
	opacity: 1;
}

.vb-booking__weekday-num {
	font-size: var(--vb-text-body, 1rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.vb-booking__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	/* Der Punkt sagt "an diesem Tag ist etwas frei" - er trägt Bedeutung und
	   fällt damit unter die 3:1-Regel für Nicht-Text. #14b870 auf Weiß ist
	   2,59:1. */
	background: var(--vb-accent-text, #68192e);
}

.vb-booking__weekday.is-selected .vb-booking__dot {
	/* White on the action fill in both schemes: 11.9:1 light, 8.0:1 dark -
	   the page ground was 2.3:1 on the dark fill (review of #409). */
	background: #fff;
}

.vb-booking__time-grid {
	/* A real grid, not wrapped flex: content-width buttons produced ragged
	   rows of four then five, which reads as noise on a phone. */
	display: grid;
	/* A time label is five characters wide. Now that the list shows in full
	   rather than scrolling, the column count is the only thing holding the
	   height down, so the columns are as narrow as a label allows: 3.2rem
	   fits six per row on a normal widget width, which is two rows for a
	   morning and three for an afternoon. */
	grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr));
	gap: 5px;
}

/* Opening blocks. Practices break for lunch, and in a continuous grid the
   jump from 11:30 to 14:00 is invisible - the reader has to parse the
   numbers to notice. Each block gets a quiet heading instead. */
.vb-booking__timeblock + .vb-booking__timeblock { margin-top: 10px; }

.vb-booking__timeblock-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 5px;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 600;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
}

.vb-booking__timeblock-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--vb-line, #d9c7c1);
}

.vb-booking__day-label {
	margin: 0 0 2px;
	font-weight: 600;
	color: var(--vb-muted, #6b5b60);
	text-transform: capitalize;
}

.vb-booking__times {
	/* Column, not a wrapping row: this holds the day label and the
	   part-of-day blocks, which belong under each other. As a row the
	   blocks lined up side by side, each squeezed into its own narrow
	   column of times. */
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* No cap and no inner scrollbar. The list used to be capped at
	   min(46vh, 460px) so the week picker stayed in view, but that put a
	   scroll area inside a scroll area: with 26 slots the last ten pixels
	   sat behind a scrollbar, so the final time of the day was hidden
	   behind a gesture nobody expects inside a form. The whole selection is
	   visible now; the grid below is what keeps the height reasonable. */
	padding-right: 0;
}

/* Was sticky against the inner scroller. With the list no longer scrolling
   there is nothing to stick to, and a sticky heading inside a page-scrolled
   column would follow the page instead - which is not what it meant. */
.vb-booking__partlabel {
	background: var(--vb-base, #fbf7f2);
	padding-block: 2px;
}

.vb-booking__slot {
	/* 44 px, the target the whole site is measured against. Measured before
	   this: 32 of 32 time buttons rendered 58.2 x 30 px - the one control a
	   booking cannot be made without, and the smallest thing on the page. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 6px 4px;
	text-align: center;
	font-weight: 600;
	font-size: var(--vb-text-small, 0.85rem);
	font-variant-numeric: tabular-nums;
	color: var(--vb-accent-text, #68192e);
	background: var(--vb-base, #fbf7f2);
	border: 1.5px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-sm, 11px);
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.vb-booking__slot:hover {
	background: var(--vb-primary-dark, #68192e);
	border-color: var(--vb-accent-text, #68192e);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--vb-glow, 0 18px 44px -18px rgba(104, 25, 46, 0.30));
}

@media (prefers-reduced-motion: reduce) {
	.vb-booking__slot {
		transition: none;
	}
}

.vb-booking__muted {
	margin: 0;
	color: var(--vb-muted, #6b5b60);
}

/* Die drei Zustaende der Zeiten (Aufgabe #222, Grafik-Lead B10, Rang 15):
   "wird geladen", "keine Termine" und "Laden fehlgeschlagen" waren derselbe
   graue Satz. Jetzt je ein eigenes Zeichen (Uhr, Kalender mit Kreuz,
   Warnzeichen), eigene Worte und eine eigene Flaeche - nie nur die Farbe.
   Nichts dreht sich: auch "wird geladen" steht still (Ruhige Ansicht, keine
   Bewegung von selbst). Farben aus den Rollen des Profil-Designsystems
   (Aufgabe #257): neutral fuer Laden und "keine Termine", Notfall/Fehler
   fuer den Fehler; hell und dunkel ueber data-theme. Ausserhalb eines
   Profils (Einbettung, Teamseite) gelten die Seiten-Tokens dahinter. */
.vb-booking__state {
	display: flex;
	align-items: flex-start;
	gap: var(--vb-profile-icon-gap, 8px);
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-sm, 11px);
	background: var(--vb-profile-neutral-bg, var(--vb-neutral-soft, #efe9e6));
	color: var(--vb-ink, #30272b);
	line-height: 1.45;
}

.vb-booking__state--loading {
	color: var(--vb-profile-neutral-ink, var(--vb-muted, #6b5b60));
}

.vb-booking__state--error {
	border-color: currentColor;
	background: var(--vb-profile-alert-bg, var(--vb-danger-soft, #ffece6));
	color: var(--vb-profile-alert-ink, var(--vb-danger-ink, #b52216));
}

.vb-booking__stateicon {
	flex: none;
	width: var(--vb-profile-icon, 20px);
	height: var(--vb-profile-icon, 20px);
	margin-top: 1px;
}

/* Der Knopf "Erneut versuchen" unter dem Fehler: ein eigenstaendiges Ziel,
   mindestens 44 px hoch (Trefferflaeche des Designsystems). */
.vb-booking__retry {
	min-height: var(--vb-profile-target, var(--vb-tap-primary, 44px));
}

.vb-booking__summary {
	margin: 0;
	padding: 12px 16px;
	background: var(--vb-primary-soft, #f3e2e7);
	border-left: 4px solid var(--vb-lime, #c99b84);
	border-radius: var(--vb-radius-sm, 11px);
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
}

/* A video service says so before anything is agreed to (ADR 0024):
   plain text under the summary, no colour of its own. */
.vb-booking__video-note {
	margin: 8px 0 0;
	font-size: var(--vb-text-body, 1rem);
	color: var(--vb-ink, #30272b);
}

.vb-booking__reschedule-hint {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: var(--vb-warning-soft, #fff0d8);
	border-radius: var(--vb-radius-sm, 11px);
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
	color: var(--vb-warn-ink, #86520a);
}

.vb-booking__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 500;
	color: var(--vb-ink, #30272b);
}

.vb-booking__check input {
	margin-top: 3px;
	/* 24 px is the WCAG 2.5.8 minimum, and it applied here all along. The
	   design audit reported zero undersized targets because it walks the
	   public pages; the booking form does not render without a Turnstile key
	   and the console sits behind a login, so neither was ever measured. */
	width: var(--vb-tap-min, 24px);
	height: var(--vb-tap-min, 24px);
	accent-color: var(--vb-accent-text, #68192e);
}

.vb-booking__actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.vb-booking__actions button[type="submit"],
.vb-booking .vb-booking__submit {
	padding: 13px 26px;
	font-weight: 600;
	font-size: var(--vb-text-body, 1rem);
	color: #fff;
	/* Beide Halte dunkel: weißer Text auf #14b870 misst 2,59:1, und ein
	   Verlauf ist genau die Fläche, die der Messharness nicht bewerten kann
	   (design-audit.mjs meldet bei jedem backgroundImage "KONTRAST
	   UNBESTIMMT") - also die Fläche, auf der ein zu heller Wert am längsten
	   unbemerkt bleibt. Dasselbe Muster fährt .vb-cta in home.css bereits. */
	background: linear-gradient(135deg, var(--vb-primary-dark, #68192e), var(--vb-primary-darker, #300b17));
	border: none;
	border-radius: var(--vb-radius, 16px);
	cursor: pointer;
	box-shadow: var(--vb-glow, 0 18px 44px -18px rgba(104, 25, 46, 0.30));
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.vb-booking__actions button[type="submit"]:hover:not(:disabled),
.vb-booking .vb-booking__submit:hover {
	transform: translateY(-2px);
	filter: brightness(1.04);
	box-shadow: var(--vb-shadow-hover, 0 22px 48px -22px rgba(104, 25, 46, 0.32), 0 4px 12px -6px rgba(48, 39, 43, 0.20));
}

.vb-booking__actions button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: wait;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.vb-booking__actions button[type="submit"] {
		transition: none;
	}
}

.vb-booking__back {
	padding: 11px 18px;
	font: inherit;
	font-weight: 600;
	color: var(--vb-muted, #6b5b60);
	background: transparent;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-sm, 11px);
	cursor: pointer;
}

.vb-booking-confirm__facts {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vb-booking-confirm__cancel {
	margin-top: 16px;
}

/* Compact details form (design critique): 2-column grid + collapsed identity */
.vb-booking__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media ( min-width: 32.5rem ) {
	.vb-booking__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.vb-booking__identity {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	background: var(--vb-surface, #f2e7df);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-booking__identity-who {
	font-weight: 600;
	color: var(--vb-ink, #30272b);
}

.vb-booking__identity-edit {
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
}

/* Visit-reason questions in the booking widget (Task 32). */
.vb-booking__questions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.25rem;
}
.vb-booking__questions-title {
	margin: 0.25rem 0 0;
	font-size: var(--vb-text-body, 1rem);
}

/* Multi-pet selection (step 1) + read-only summary (step 2). */
.vb-booking__petpick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0.25rem 0 0.5rem;
}

.vb-booking__petpick-title {
	flex: 0 0 100%;
	font-weight: 600;
}

.vb-booking__petopt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-pill, 999px);
	cursor: pointer;
	font-size: var(--vb-text-body, 1rem);
}

.vb-booking__petopt:has( input:checked ) {
	border-color: var(--vb-accent-text, #68192e);
	background: var(--vb-primary-soft, #f3e2e7);
}

.vb-booking__forpets {
	margin: 0.25rem 0 0.75rem;
	font-weight: 600;
}

/* ----- Emergency triage interstitial ---------------------------------------- */
.vb-booking__triage {
	margin: 14px 0;
	padding: 14px 16px;
	border: 2px solid var(--vb-danger-text, #b52216);
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-danger-soft, #ffece6);
	color: var(--vb-danger-ink, #b52216);
}

.vb-booking__triage strong {
	display: block;
	margin-bottom: 4px;
	font-size: var(--vb-text-lead, 1.0625rem);
}

.vb-booking__triage p {
	margin: 0 0 10px;
}

.vb-booking__triagecall {
	display: inline-block;
	margin: 0 0 10px;
	padding: 10px 18px;
	border-radius: var(--vb-radius-sm, 11px);
	background: #c0392b;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.vb-booking__triagecall:hover {
	background: #962d22;
	color: #fff;
}

.vb-booking__triageack {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--vb-text-label, 0.9rem);
	color: #52302b;
}

/* ----- Series booking -------------------------------------------------------- */
.vb-booking__series {
	margin: 14px 0;
	padding: 12px 14px;
	border: 1px dashed var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
}

.vb-booking__seriestoggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	cursor: pointer;
}

.vb-booking__seriesopts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-top: 10px;
}

.vb-booking-confirm__series {
	margin: 14px 0;
	padding: 12px 14px;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-surface, #f2e7df);
}

.vb-booking-confirm__series ul {
	margin: 8px 0 0;
	padding-left: 1.2em;
}

.vb-booking-confirm__series .is-current {
	font-weight: 700;
}

/* The pet fields are optional as a PAIR: fill one and the other becomes
   required, because that is the rule the server applies. Marking it while
   the reader is still in the form is the whole point - being refused after
   submitting, by a message that does not name the field, is how a booking
   gets abandoned. */
.vb-booking__grid.is-pair-required label::after {
	content: " *";
	color: var(--vb-accent-text, #68192e);
	font-weight: 700;
}


/* Honeypot: visually removed, still present for bots.
   Deliberately repeated from profile.css rather than shared. The standalone
   embed document (EmbedWidget) prints ONE stylesheet - this one - so a rule
   that lives only in profile.css never reaches the iframe, and the field
   booking.js renders sat there fully styled and labelled "Website". A
   honeypot a person can see is one a person can fill in, and filling it
   answers 422 and loses the booking, on the surface a practice pasted onto
   its own site. HoneypotHiddenTest checks this sheet specifically. */
.vb-hp,
.vb-hp input,
.vb-callback__hp,
.vb-callback__hp input,
.vb-claim__hp {
	position: absolute !important;
	left: -9999px !important;
	height: 1px;
	overflow: hidden;
}


/* The widget's status line: the one sentence a screen reader should hear
   when the calendar changes under it - a slot taken, a week paged, the times
   failed to load. It is deliberately invisible, because everything it says
   is already on the screen as a notice, a highlighted day or a week label;
   showing it twice would be noise for sighted readers.

   Not display:none and not visibility:hidden - both take the node out of the
   accessibility tree, and a live region nobody can reach announces nothing.
   The clip-rect technique keeps it in the tree while giving it no box on
   the page. Repeated here rather than borrowed from profile.css for the same
   reason as the honeypot rule above: the embed iframe prints THIS sheet only. */
.vb-booking__live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The emergency sentence, before the first step rather than after the last.
   Quiet on purpose: it has to be readable by somebody who is not in an
   emergency, or it becomes the banner everybody learns to skip. */
.vb-booking__emergency {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	font-size: var(--vb-text-label, 0.9rem);
	color: var(--vb-ink, #30272b);
	background: var(--vb-neutral-soft, #efe9e6);
	border-left: 3px solid var(--vb-danger-text, #b52216);
	border-radius: 0 var(--vb-radius-sm, 11px) var(--vb-radius-sm, 11px) 0;
}

.vb-booking__emergency a {
	white-space: nowrap;
}

/* Where in the booking somebody is. Three steps, and the current one is
   marked by more than colour: the dot fills and the label goes bold, so it
   survives a colour-blind reader and a printed page. */
.vb-booking__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
}

.vb-booking__stepitem {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.vb-booking__stepitem-n {
	display: inline-grid;
	place-items: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: var(--vb-radius-pill, 999px);
	border: 1px solid var(--vb-field-line, #8c716e);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
}

.vb-booking__stepitem.is-current {
	color: var(--vb-accent-text, #68192e);
	font-weight: 700;
}

.vb-booking__stepitem.is-current .vb-booking__stepitem-n,
.vb-booking__stepitem.is-done .vb-booking__stepitem-n {
	color: #fff;
	background: var(--vb-primary-dark, #68192e);
	border-color: var(--vb-accent-text, #68192e);
}

.vb-booking__stepitem.is-done {
	color: var(--vb-accent-text, #68192e);
}


/* ----- Inline validation ----------------------------------------------------
   One sentence under the field that failed, in the page's language, tied to
   the field with aria-describedby. Tokens so it reads in both schemes. */
.vb-field__error {
	margin: -6px 0 12px;
	font-size: var(--vb-text-label, 0.9rem);
	color: var(--vb-danger-text, #b52216);
}

.vb-booking__field input[aria-invalid="true"],
.vb-booking__field select[aria-invalid="true"],
.vb-booking__field textarea[aria-invalid="true"] {
	border-color: var(--vb-danger-text, #b52216);
}

.vb-booking__req {
	color: var(--vb-danger-text, #b52216);
	font-weight: 700;
}

.vb-booking__reqnote {
	margin: 0 0 10px;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
}


/* The way to a new time, inside the "that slot was just taken" notice - so
   the form with everything typed in it can stay where it is. */
.vb-booking__pick-again {
	margin-left: 6px;
	padding: 4px 10px;
	border: 1px solid currentColor;
	border-radius: var(--vb-radius-pill, 999px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* The optional "why" beside the cancel button (M-055). Quiet on purpose: a
   person who is cancelling is not filling in a form, and a field that looked
   required would only teach them to pick the first item in the list. */
.vb-booking-confirm__reason {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 10px;
	font-size: var(--vb-text-small, 0.85rem);
	color: var( --vb-muted, #6b5b60 );
}

.vb-booking-confirm__reason select {
	padding: 10px 12px;
	font-size: var(--vb-text-body, 1rem);
	color: var( --vb-ink, #30272b );
	background: var( --vb-base, #fbf7f2 );
	border: 1px solid var( --vb-field-line, #8c716e );
	border-radius: var(--vb-radius-sm, 11px);
	/* The tap target the rest of the site is measured against. */
	min-height: 44px;
}

/* --- Waitlist: closed until somebody asks ------------------------------- */

/* Measured before the change: ten waitlist inputs standing open under the
   calendar on every bookable profile, on a page already 8,259px long on a
   phone. The list answers "none of these times work" - a question the reader
   has not asked while the times are still in front of them.
   A disclosure rather than the modal, drawer or bottom sheet the reference
   suggests: it works without JavaScript, traps no focus, darkens nothing and
   moves nothing on the screen, which is what the neuroinclusive default asks
   for. The reader gets the same thing - nothing until they ask. */
.vb-waitlist__more {
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-base, #fbf7f2);
}

.vb-waitlist__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	/* A summary is a control, so it clears the same target as every other
	   one on the page. */
	min-height: var(--vb-tap-primary, 44px);
	padding: 10px 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.vb-waitlist__summary::-webkit-details-marker {
	display: none;
}

.vb-waitlist__summary::after {
	content: "+";
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--vb-cat, var(--vb-accent-text, #68192e));
}

.vb-waitlist__more[open] > .vb-waitlist__summary {
	border-bottom: 1px solid var(--vb-line, #d9c7c1);
}

.vb-waitlist__more[open] > .vb-waitlist__summary::after {
	content: "\2212";
}

.vb-waitlist__body {
	padding: 14px;
}

.vb-waitlist__body > :first-child {
	margin-top: 0;
}


/* --- The preview the widget opens on ------------------------------------ */

.vb-booking__preview {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vb-booking__previewday {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vb-booking__more {
	margin-top: 12px;
	width: 100%;
}

/* Duration and price of the chosen service, under the field that chose it. */
.vb-booking__servicemeta {
	margin: -4px 0 12px;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-small, 0.85rem);
}

/* The practice's own out-of-hours wording, under the safety sentence rather
   than instead of it. A block of its own so the number above it stays the
   thing the eye lands on. */
.vb-booking__emergency-note {
	display: block;
	margin-top: 6px;
	font-weight: 400;
}

.vb-booking__field select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 2.2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2351635a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 16px;
}

:root[data-theme="dark"] .vb-booking__field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3b1b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
}


/* --- The profile's two places (Aufgabe #194) ----------------------------
   The box in the side column holds the choice and the next free times and
   stays in view while it fits; the calendar and the form open in the area
   at the start of the main column. Only these two classes change anything:
   the embed and the team member page print neither. Tighter spacing, not
   smaller type - the box fits by showing fewer times, then only the choice
   (booking.js), never by shrinking what it shows: every text in the box
   keeps the size it has in the widget (review of PR #204). */

/* Calm (Aufgabe #211, analysis "Box-Optik"): a 1 px line, the radius of
   every card, at most a faint shadow - no green frame, no glow, no bar in
   front of the title; the conversion moment is the times, not the frame.
   16 px inside, the same type sizes as everywhere. */
.vb-profile__section.vb-booking.vb-booking--box {
	padding: 16px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	/* The profile's one lifted surface (Aufgabe #257, token table C):
	   0 4px 16px at 8 %, black at 24 % in the dark scheme. Padding stays
	   16 px: the stages of the box are measured against it. */
	box-shadow: var(--vb-profile-shadow-box, 0 4px 16px rgba(48, 39, 43, 0.08));
}

/* One line: it labels the box; the heading of the booking is the area's, in
   the wording of the main button. General Sans at the level-3 step, 18/26 px
   (Aufgabe #257, A1): never heavier than a section heading. */
.vb-booking__boxtitle {
	margin: 0 0 8px;
	font-family: var(--vb-body, inherit);
	font-size: var(--vb-profile-h3, 1.125rem);
	line-height: var(--vb-profile-h3-lh, 1.4444);
	font-weight: 600;
	color: var(--vb-ink, #30272b);
}

/* The emergency line, before the first thing anybody can press, in every
   stage. It leads to the whole sentence above the area. */
.vb-booking__boxsos {
	margin: 0 0 8px;
	padding-inline-start: 10px;
	border-inline-start: 3px solid var(--vb-danger-text, #b52216);
	color: var(--vb-ink, #30272b);
	line-height: 1.4;
}

.vb-booking__boxsos a {
	font-weight: 700;
	color: var(--vb-danger-text, #b52216);
}

/* The starter stage: the title and one action, nothing else. */
.vb-booking__boxstart {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* The compact stage: what is chosen, and one button to change it. */
.vb-booking__boxchoice {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 8px;
}

/* Beside the change button the choice reads as lines of text, not as a
   second card in the card. */
.vb-booking__boxchoice .vb-booking__boxfacts {
	padding: 0;
	background: none;
}

.vb-booking--box .vb-booking__boxchange {
	min-height: var(--vb-tap-primary, 44px);
	min-width: var(--vb-tap-primary, 44px);
	padding: 8px 10px;
	font: inherit;
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
	background: transparent;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-sm, 11px);
	cursor: pointer;
}

.vb-booking--box .vb-booking__app {
	margin-top: 0;
}

.vb-booking--box .vb-booking__step {
	gap: 8px;
}

.vb-booking--box .vb-booking__slots {
	gap: 6px;
}

.vb-booking--box .vb-booking__field {
	gap: 4px;
}

.vb-booking--box .vb-booking__servicemeta {
	margin: -6px 0 0;
}

.vb-booking--box .vb-booking__slots-title {
	margin: 2px 0 0;
}

.vb-booking--box .vb-booking__preview {
	gap: 6px;
}

/* Day and its times on one row: "Mon, 05.10." beside three buttons, rather
   than a label line above each row. */
.vb-booking--box .vb-booking__previewday {
	display: grid;
	grid-template-columns: 6.2rem minmax( 0, 1fr );
	align-items: center;
	gap: 8px;
}

.vb-booking--box .vb-booking__previewday .vb-booking__day-label {
	margin: 0;
	line-height: 1.3;
}

.vb-booking--box .vb-booking__previewday .vb-booking__time-grid {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.vb-booking--box .vb-booking__more {
	margin-top: 4px;
}

.vb-booking--box .vb-booking__petpick {
	margin: 0;
	padding: 0;
	border: 0;
}

.vb-booking__boxfacts {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	/* A quiet surface, no lime bar (Aufgabe #211: one accent fewer). */
	background: var(--vb-surface, #f2e7df);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-booking__boxfacts p {
	margin: 0;
}

.vb-booking__boxfacts .vb-booking__servicemeta {
	margin: 0;
}

.vb-booking__boxwhen,
.vb-booking__boxwhat {
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
}

.vb-booking__boxwho {
	color: var(--vb-ink, #30272b);
}

.vb-booking--box .vb-booking__boxgo,
.vb-booking--box .vb-booking__boxalt {
	width: 100%;
	min-height: var(--vb-tap-primary, 44px);
}

.vb-booking__boxlink {
	margin: 0;
}


/* The area: the green card the widget always was, at the start of the main
   column, with its own way to fold it away again. */
.vb-profile__bookarea {
	margin: 0 0 clamp( 1.5rem, 3vw, 2.25rem );
}

.vb-profile__bookarea > .vb-waitlist {
	margin-top: 16px;
}

/* Air only when a jump or a focus lands here: html's scroll-padding on a
   profile already keeps the header and the anchor bar clear (site.css). */
.vb-profile__bookarea,
.vb-profile__bookarea h2,
.vb-booking--area .vb-booking__slots-title {
	scroll-margin-top: 4px;
}

.vb-booking__areahead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.vb-booking__areahead h2 {
	margin-bottom: 12px;
}

.vb-booking__areaclose {
	flex: none;
	min-height: var(--vb-tap-primary, 44px);
	padding: 8px 16px;
	font: inherit;
	font-weight: 600;
	color: var(--vb-muted, #6b5b60);
	background: transparent;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-sm, 11px);
	cursor: pointer;
}

.vb-booking__areaclose:hover {
	color: var(--vb-ink, #30272b);
	border-color: var(--vb-field-line, #8c716e);
}

/* The emergency sentence above the area (#vb-emergency, Aufgabe #211):
   the one place it stands in full on the profile. */
.vb-profile__sos > .vb-booking__emergency {
	margin: 0 0 clamp( 1rem, 2vw, 1.5rem );
	scroll-margin-top: 4px;
}