/**
 * Blub Booking — vormgeving van de front-end widget (v1.1)
 * ---------------------------------------------------------------------------
 * Volledig herschreven voor SPEC §17. Deze stylesheet is geschreven tegen het
 * bindende klassencontract uit SPEC §20; er staat geen enkele selector in die
 * de JS of de shortcode niet werkelijk in de DOM zet.
 *
 * UITGANGSPUNTEN
 *
 * 1. Kleuren komen uit de beheerder (SPEC §19). De shortcode zet alle
 *    `--bb-*`-tokens in één `<style id="blub-booking-vars">`-blok op
 *    `.blub-booking`. Hier wordt daarom géén kleur hardgecodeerd: elk token
 *    wordt via `var(--bb-…, terugval)` gelezen. De terugval telt alleen als het
 *    stijlblok ontbreekt (bijvoorbeeld bij de zwevende knop, die buiten
 *    `.blub-booking` in de voettekst staat).
 *
 * 2. Om die terugval maar één keer te hoeven opschrijven staat er een tweede
 *    laag tokens met het voorvoegsel `--bb-x-` ("effectieve waarde"):
 *    `--bb-x-text: var(--bb-text, #1d1d1d)`. In de rest van het bestand wordt
 *    uitsluitend `var(--bb-x-…)` gebruikt. Voordeel: de beheerderinstelling
 *    wint altijd, ongeacht in welke volgorde dit bestand en het inline
 *    stijlblok in de pagina belanden.
 *
 * 3. Specificiteit is bewust vlak en voorspelbaar: elke component wordt
 *    geschreven als `.blub-booking .blub-booking__component` (twee klassen).
 *    De elementreset gebruikt `:where()` en telt daardoor even zwaar, maar
 *    staat bovenaan, zodat de componenten er altijd overheen gaan. De drie
 *    onderdelen buiten de container (de dialog, de openknop en de zwevende
 *    knop) halen diezelfde twee klassen door hun eigen klasse te herhalen —
 *    zonder dat wint een gewone thema-regel als `.entry-content button`.
 *    Er staat één `!important` in dit bestand: de `[hidden]`-regel uit §20.
 *
 * 4. Alles werkt in een off-canvas van 320 px én op een pagina van 1200 px.
 *    De indeling schaalt op de breedte van de widget zelf (`@container`) en op
 *    intrinsieke rasters (`auto-fit`), niet op de breedte van het scherm.
 *
 * INHOUDSOPGAVE
 *   1.  Ontwerptokens (kleur, ruimte, ronding, schaduw, iconen)
 *   2.  Donkere modus (alleen bij dark_mode = donker of auto)
 *   3.  Reset en kaart
 *   4.  Kop: titel, introtekst en voortgangsbalk
 *   5.  Staptitel, terugknop en meldingen
 *   6.  Keuzekaarten (dienst, locatie, medewerker) en categorie-accordeon
 *   7.  Kalender
 *   8.  Tijdsloten
 *   9.  Formulier: raster, velden, keuzevelden en foutmeldingen
 *   10. Privacy, honeypot en losse tekstblokken
 *   11. Samenvatting
 *   12. Voettekst en knoppen
 *   13. Successcherm en "toevoegen aan agenda"
 *   14. Laadskelet, laadtekst en laadstatus
 *   15. Modal, openknop en zwevende knop
 *   16. Gesplitste indeling (zijpaneel + stap)
 *   17. Bredere widgets (containerqueries)
 *   18. Animaties
 *   19. Focusweergave
 *   20. Verminderde beweging
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
   1. Ontwerptokens
   ========================================================================== */

/* De wortels van de widget. `.blub-booking` krijgt zijn tokens van de
   shortcode; de knoppen, de dialog en de noscript-melding staan buiten die
   container en teren volledig op de terugvalwaarden hieronder. */
.blub-booking.blub-booking.blub-booking,
.blub-booking__modal,
.blub-booking__trigger,
.blub-booking__floating,
.blub-booking__noscript {
	/* --- kleur ------------------------------------------------------- */
	--bb-x-primary: var(--bb-primary, #c8a25a);
	--bb-x-primary-contrast: var(--bb-primary-contrast, #ffffff);
	--bb-x-primary-hover: var(--bb-primary-hover, color-mix(in srgb, var(--bb-x-primary) 88%, #000000));
	--bb-x-primary-soft: var(--bb-primary-soft, color-mix(in srgb, var(--bb-x-primary) 12%, var(--bb-x-surface)));

	--bb-x-text: var(--bb-text, #1d1d1d);
	--bb-x-text-soft: var(--bb-text-soft, #4a4a4a);
	--bb-x-muted: var(--bb-muted, #6b6b6b);

	--bb-x-bg: var(--bb-bg, var(--bb-x-surface));
	--bb-x-surface: var(--bb-surface, #ffffff);
	--bb-x-surface-soft: var(--bb-surface-soft, #f6f6f7);
	--bb-x-border: var(--bb-border, #e4e4e7);
	--bb-x-border-soft: var(--bb-border-soft, color-mix(in srgb, var(--bb-x-border) 55%, var(--bb-x-surface)));

	--bb-x-error: var(--bb-error, #c0392b);
	--bb-x-error-soft: var(--bb-error-soft, color-mix(in srgb, var(--bb-x-error) 12%, var(--bb-x-surface)));
	--bb-x-success: var(--bb-success, #2e7d5b);
	--bb-x-success-soft: var(--bb-success-soft, color-mix(in srgb, var(--bb-x-success) 12%, var(--bb-x-surface)));

	/* Vlak van het laadskelet plus de lichtstreep die eroverheen loopt. */
	--bb-x-skeleton: var(--bb-x-surface-soft);
	--bb-x-shimmer: rgba(255, 255, 255, 0.7);
	--bb-x-overlay: rgba(0, 0, 0, 0.45);

	/* --- ronding ------------------------------------------------------ */
	--bb-x-radius: var(--bb-radius, 10px);
	--bb-x-radius-sm: var(--bb-radius-sm, calc(var(--bb-x-radius) * 0.6));
	--bb-x-radius-lg: var(--bb-radius-lg, calc(var(--bb-x-radius) * 1.8));

	/* --- schaduw (zacht en meerlaags) --------------------------------- */
	--bb-x-shadow-sm: var(--bb-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
	--bb-x-shadow-md: var(--bb-shadow-md, 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08));
	--bb-x-shadow-lg: var(--bb-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.1), 0 24px 48px rgba(0, 0, 0, 0.16));

	/* --- ruimte ------------------------------------------------------- */
	--bb-x-space-1: var(--bb-space-1, 4px);
	--bb-x-space-2: var(--bb-space-2, 8px);
	--bb-x-space-3: var(--bb-space-3, 12px);
	--bb-x-space-4: var(--bb-space-4, 16px);
	--bb-x-space-5: var(--bb-space-5, 20px);
	--bb-x-space-6: var(--bb-space-6, 24px);
	--bb-x-space-7: var(--bb-space-7, 32px);
	--bb-x-space-8: var(--bb-space-8, 40px);

	/* --- typografie, beweging en breedte ------------------------------ */
	--bb-x-font: var(--bb-font, inherit);
	--bb-x-ease: var(--bb-ease, cubic-bezier(0.4, 0, 0.2, 1));
	--bb-x-max-width: var(--bb-max-width, 480px);
	--bb-x-max-width-split: var(--bb-max-width-split, 1008px);
	--bb-x-step: 160ms;
	--bb-x-quick: 120ms;

	/* --- iconen als data-URI ------------------------------------------
	   Een SVG in een data-URI kent geen `currentColor`, dus het pijltje van de
	   selects heeft een eigen token dat in de donkere modus meeschakelt. De
	   waarschuwing en het vinkje worden als masker gebruikt en nemen daardoor
	   wél de tekstkleur over. */
	--bb-x-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--bb-x-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.4 0.6 14.6h14.8L8 1.4Zm-.75 4.2h1.5l-.2 4h-1.1l-.2-4Zm.75 5.3a.95.95 0 1 1 0 1.9.95.95 0 0 1 0-1.9Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2. Donkere modus
   ==========================================================================
   Alleen actief als de beheerder `dark_mode` op donker of auto zet; de
   shortcode zet dat als `data-theme` op de container en op de zwevende knop.
   De echte kleuren komen ook hier uit de instellingen — dit zijn puur de
   terugvalwaarden. */

.blub-booking.blub-booking.blub-booking[data-theme="dark"],
.blub-booking__modal[data-theme="dark"],
.blub-booking__trigger[data-theme="dark"],
.blub-booking__floating[data-theme="dark"] {
	--bb-x-primary: var(--bb-primary, #d4ae6a);
	--bb-x-primary-contrast: var(--bb-primary-contrast, #17171a);
	--bb-x-primary-hover: var(--bb-primary-hover, color-mix(in srgb, var(--bb-x-primary) 88%, #ffffff));

	--bb-x-text: var(--bb-text, #f2f2f3);
	--bb-x-text-soft: var(--bb-text-soft, #c9c9cd);
	--bb-x-muted: var(--bb-muted, #9a9aa2);

	--bb-x-surface: var(--bb-surface, #1c1c20);
	--bb-x-surface-soft: var(--bb-surface-soft, #26262c);
	--bb-x-border: var(--bb-border, #3a3a42);

	--bb-x-error: var(--bb-error, #ef6b5c);
	--bb-x-success: var(--bb-success, #4fb98a);

	--bb-x-shadow-sm: var(--bb-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.5));
	--bb-x-shadow-md: var(--bb-shadow-md, 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5));
	--bb-x-shadow-lg: var(--bb-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.6));

	--bb-x-shimmer: rgba(255, 255, 255, 0.07);
	--bb-x-overlay: rgba(0, 0, 0, 0.6);
	--bb-x-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9aa2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	.blub-booking[data-theme="auto"],
	.blub-booking__modal[data-theme="auto"],
	.blub-booking__trigger[data-theme="auto"],
	.blub-booking__floating[data-theme="auto"] {
		--bb-x-primary: var(--bb-primary, #d4ae6a);
		--bb-x-primary-contrast: var(--bb-primary-contrast, #17171a);
		--bb-x-primary-hover: var(--bb-primary-hover, color-mix(in srgb, var(--bb-x-primary) 88%, #ffffff));

		--bb-x-text: var(--bb-text, #f2f2f3);
		--bb-x-text-soft: var(--bb-text-soft, #c9c9cd);
		--bb-x-muted: var(--bb-muted, #9a9aa2);

		--bb-x-surface: var(--bb-surface, #1c1c20);
		--bb-x-surface-soft: var(--bb-surface-soft, #26262c);
		--bb-x-border: var(--bb-border, #3a3a42);

		--bb-x-error: var(--bb-error, #ef6b5c);
		--bb-x-success: var(--bb-success, #4fb98a);

		--bb-x-shadow-sm: var(--bb-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.5));
		--bb-x-shadow-md: var(--bb-shadow-md, 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5));
		--bb-x-shadow-lg: var(--bb-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.6));

		--bb-x-shimmer: rgba(255, 255, 255, 0.07);
		--bb-x-overlay: rgba(0, 0, 0, 0.6);
		--bb-x-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9aa2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}

/* Afgeleide tinten worden met color-mix() berekend. Kan de browser dat niet,
   dan gelden hieronder rustige vaste waarden — voor de lichte én de donkere
   set, want de donkere staat hierboven en zou anders winnen.
   De test staat bewust als volledige declaratie (`color: color-mix(…)`): een
   kale functie tussen haakjes geldt voor @supports als "onbekend", en dan zou
   `not` het blok juist altijd laten gelden. */
@supports not (color: color-mix(in srgb, red, blue)) {
	.blub-booking,
	.blub-booking__modal,
	.blub-booking__trigger,
	.blub-booking__floating,
	.blub-booking[data-theme="dark"],
	.blub-booking__modal[data-theme="dark"],
	.blub-booking__trigger[data-theme="dark"],
	.blub-booking__floating[data-theme="dark"],
	.blub-booking[data-theme="auto"],
	.blub-booking__modal[data-theme="auto"],
	.blub-booking__trigger[data-theme="auto"],
	.blub-booking__floating[data-theme="auto"] {
		--bb-x-primary-hover: var(--bb-primary-hover, var(--bb-x-primary));
		--bb-x-primary-soft: var(--bb-primary-soft, rgba(128, 128, 128, 0.16));
		--bb-x-border-soft: var(--bb-border-soft, var(--bb-x-border));
		--bb-x-error-soft: var(--bb-error-soft, rgba(192, 57, 43, 0.12));
		--bb-x-success-soft: var(--bb-success-soft, rgba(46, 125, 91, 0.12));
	}
}

/* ==========================================================================
   3. Reset en kaart
   ========================================================================== */

/* De enige toegestane !important van dit bestand (§20): zonder deze regel
   wordt het `hidden`-attribuut door latere regels met dezelfde specificiteit
   overruled en blijven verborgen onderdelen staan. */
.blub-booking.blub-booking.blub-booking [hidden] {
	display: none !important;
}

/* De onderdelen buiten `.blub-booking` (de dialog, de openknop en de zwevende
   knop) staan in thema-gebied. Hun regels verderop verdubbelen de klasse om
   van een gewone thema-regel als `.entry-content button` te winnen; dan moet
   deze regel dat ook doen, anders verliest `hidden` er alsnog van. */
.blub-booking.blub-booking.blub-booking[hidden],
.blub-booking__modal.blub-booking__modal[hidden],
.blub-booking__trigger.blub-booking__trigger[hidden],
.blub-booking__floating.blub-booking__floating[hidden] {
	display: none;
}

/* Modal-instanties worden pas bij het eerste openen opgebouwd. */
.blub-booking.blub-booking.blub-booking.is-lazy {
	display: none;
}

.blub-booking.blub-booking.blub-booking,
.blub-booking.blub-booking.blub-booking *,
.blub-booking.blub-booking.blub-booking *::before,
.blub-booking.blub-booking.blub-booking *::after {
	box-sizing: border-box;
}

/* Korte reset op de eigen elementen, zodat agressieve thema-CSS de opmaak niet
   sloopt. `:where()` houdt de specificiteit gelijk aan die van de componenten
   hieronder; die staan verderop en winnen daardoor altijd. */
.blub-booking.blub-booking.blub-booking .blub-booking__inner :where(h2, h3, p, ol, ul, li, dl, dt, dd, figure, fieldset, blockquote) {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

.blub-booking.blub-booking.blub-booking .blub-booking__inner :where(ol, ul) {
	list-style: none;
}

.blub-booking.blub-booking.blub-booking .blub-booking__inner :where(button, input, select, textarea) {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

.blub-booking.blub-booking.blub-booking .blub-booking__inner :where(button) {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: inherit;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

.blub-booking.blub-booking.blub-booking .blub-booking__inner :where(table) {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.blub-booking.blub-booking.blub-booking .blub-booking__inner :where(th, td) {
	padding: 0;
	border: 0;
	background: none;
	font-weight: inherit;
	text-align: center;
	vertical-align: middle;
}

.blub-booking.blub-booking.blub-booking .blub-booking__inner :where(img, svg) {
	max-width: 100%;
}

.blub-booking.blub-booking.blub-booking .blub-booking__inner :where(a) {
	color: var(--bb-x-primary);
}

/* De kaart. Eén rustig vlak met een zachte, meerlaagse schaduw.
   `overflow: hidden` houdt de voortgangsbalk netjes binnen de ronde hoeken;
   niets in de kaart hoeft eruit te steken (de focusringen zitten ruim binnen
   de binnenmarge). */
.blub-booking.blub-booking.blub-booking {
	position: relative;
	width: 100%;
	max-width: var(--bb-x-max-width);
	margin-inline: auto;
	padding: var(--bb-x-space-6);
	overflow: hidden;
	color: var(--bb-x-text);
	background: var(--bb-x-bg);
	border: 1px solid var(--bb-x-border-soft);
	border-radius: var(--bb-x-radius-lg);
	box-shadow: var(--bb-x-shadow-md);
	font-family: var(--bb-x-font);
	font-size: 15px;
	line-height: 1.5;
	text-align: start;
	-webkit-text-size-adjust: 100%;
	container-type: inline-size;
	container-name: bb;
}

/* Vanaf een breed scherm staat de breedte er nóg een keer, met de containerklasse
   zes keer in plaats van drie.

   Reden: thema's begrenzen de breedte van álles in hun inhoudskolom, en ze doen
   dat met selectoren die zwaarder wegen dan de 0,4,0 van de rest van dit bestand.
   Twenty Twenty-One is het duidelijkste voorbeeld:

     .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft)
                      :not(.alignright):not(.wp-block-separator)  →  0,6,0

   Met de gewone drie klassen won die regel, en werd de widget precies zo breed
   als de tekstkolom van het thema: de ingestelde `max_width` deed niets, en de
   gesplitste indeling kreeg nooit de ruimte voor twee kolommen. Zes klassen
   tillen dit naar 0,7,0 en dat wint. Een site-eigenaar overschrijft het met
   dezelfde zes klassen; `!important` blijft daarmee onnodig (§17).

   Waarom pas vanaf 782 px (het mobiele breekpunt van WordPress zelf): op een
   smal scherm is de begrenzing van het thema geen keurslijf maar de zijmarge van
   de pagina. Zouden we die ook overrulen, dan plakte de widget op een telefoon
   tegen de schermranden terwijl alle andere inhoud netjes inspringt. Daar valt
   ook niets te winnen — onder de 720 px staan de twee panelen toch onder
   elkaar. */
@media (min-width: 782px) {
	.blub-booking.blub-booking.blub-booking.blub-booking.blub-booking.blub-booking {
		max-width: var(--bb-x-max-width);
	}
}

@media (max-width: 400px) {
	.blub-booking {
		padding: var(--bb-x-space-4);
	}
}

/* Meldingen voor schermlezers. De JS zet deze stijlen ook inline; hier staan ze
   nog eens, zodat de regel klopt als de JS ooit alleen de klasse zet. */
.blub-booking.blub-booking.blub-booking .blub-booking__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. Kop: titel, introtekst en voortgangsbalk
   ========================================================================== */

.blub-booking.blub-booking.blub-booking .blub-booking__header {
	display: flex;
	flex-direction: column;
	gap: var(--bb-x-space-2);
	margin-bottom: var(--bb-x-space-5);
}

/* De widgettitel is bewust een rustige bovenregel: de staptitel is de kop waar
   het oog op landt. */
.blub-booking.blub-booking.blub-booking .blub-booking__title {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-x-muted);
}

.blub-booking.blub-booking.blub-booking .blub-booking__intro {
	font-size: 13px;
	line-height: 1.55;
	color: var(--bb-x-muted);
}

.blub-booking.blub-booking.blub-booking .blub-booking__intro p + p {
	margin-top: var(--bb-x-space-2);
}

.blub-booking.blub-booking.blub-booking .blub-booking__progress {
	display: flex;
	align-items: center;
}

.blub-booking.blub-booking.blub-booking .blub-booking__progress-count {
	font-size: 12px;
	line-height: 1.4;
	color: var(--bb-x-muted);
	font-variant-numeric: tabular-nums;
}

/* De voortgangsbalk zelf ligt tegen de bovenrand van de kaart, niet in de
   tekstkolom. Elke stap is een segment dat met scaleX() invult. */
.blub-booking.blub-booking.blub-booking .blub-booking__progress-list {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	gap: 3px;
	height: 2px;
	overflow: hidden;
	border-top-left-radius: var(--bb-x-radius-lg);
	border-top-right-radius: var(--bb-x-radius-lg);
	pointer-events: none;
}

.blub-booking.blub-booking.blub-booking .blub-booking__progress-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 2px;
	overflow: hidden;
	background: var(--bb-x-border);
	color: transparent;
	white-space: nowrap;
	text-indent: 110%;
}

.blub-booking.blub-booking.blub-booking .blub-booking__progress-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bb-x-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__progress-item.is-done::before,
.blub-booking.blub-booking.blub-booking .blub-booking__progress-item.is-active::before {
	transform: scaleX(1);
}

/* ==========================================================================
   5. Staptitel, terugknop en meldingen
   ========================================================================== */

.blub-booking.blub-booking.blub-booking .blub-booking__stephead {
	display: flex;
	align-items: center;
	gap: var(--bb-x-space-3);
	min-height: 32px;
	margin-bottom: var(--bb-x-space-4);
}

.blub-booking.blub-booking.blub-booking .blub-booking__back {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: -4px;
	border-radius: 50%;
	background: transparent;
	color: var(--bb-x-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--bb-x-quick) var(--bb-x-ease), color var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__back:hover,
.blub-booking.blub-booking.blub-booking .blub-booking__back:focus-visible {
	background: var(--bb-x-surface-soft);
	color: var(--bb-x-text);
}

.blub-booking.blub-booking.blub-booking .blub-booking__steptitle {
	min-width: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--bb-x-text);
}

/* De staptitel krijgt bij elke stapwissel programmatisch focus; daar hoort geen
   focusring bij (die is er wel voor toetsenbordgebruik, zie §18). */
.blub-booking.blub-booking.blub-booking .blub-booking__steptitle:focus {
	outline: none;
}

.blub-booking.blub-booking.blub-booking .blub-booking__lead {
	margin-bottom: var(--bb-x-space-3);
	font-size: 14px;
	color: var(--bb-x-text-soft);
}

.blub-booking.blub-booking.blub-booking .blub-booking__notice {
	display: block;
	margin-bottom: var(--bb-x-space-4);
	padding: var(--bb-x-space-3) var(--bb-x-space-4);
	border: 1px solid var(--bb-x-border-soft);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface-soft);
	color: var(--bb-x-text-soft);
	font-size: 13px;
	line-height: 1.5;
}

.blub-booking.blub-booking.blub-booking .blub-booking__notice--error {
	border-color: var(--bb-x-error);
	background: var(--bb-x-error-soft);
	color: var(--bb-x-error);
}

.blub-booking.blub-booking.blub-booking .blub-booking__empty {
	padding: var(--bb-x-space-6) var(--bb-x-space-4);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface-soft);
	color: var(--bb-x-muted);
	font-size: 14px;
	text-align: center;
}

.blub-booking.blub-booking.blub-booking .blub-booking__note {
	margin-top: var(--bb-x-space-5);
	padding-top: var(--bb-x-space-3);
	border-top: 1px solid var(--bb-x-border-soft);
	color: var(--bb-x-muted);
	font-size: 12px;
	line-height: 1.6;
}

/* ==========================================================================
   6. Keuzekaarten en categorie-accordeon
   ========================================================================== */

.blub-booking.blub-booking.blub-booking .blub-booking__cards {
	display: grid;
	gap: var(--bb-x-space-2);
}

.blub-booking.blub-booking.blub-booking .blub-booking__card {
	display: grid;
	gap: 3px;
	width: 100%;
	padding: var(--bb-x-space-4);
	border: 1px solid var(--bb-x-border);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface);
	color: var(--bb-x-text);
	text-align: start;
	cursor: pointer;
	transition: border-color var(--bb-x-quick) var(--bb-x-ease), background var(--bb-x-quick) var(--bb-x-ease),
		box-shadow var(--bb-x-quick) var(--bb-x-ease), transform var(--bb-x-quick) var(--bb-x-ease);
}

/* Alleen de kaart van een dienst krijgt een dikke linkerrand, want alleen daar
   betekent hij iets: de JS zet er de kleur van de dienst inline op. Bij een
   locatie of een medewerker hoort geen kleur, en dan is het niet meer dan een
   rand die aan één kant dikker is. */
.blub-booking.blub-booking.blub-booking .blub-booking__card--service {
	border-left-width: 3px;
}

.blub-booking.blub-booking.blub-booking .blub-booking__card:hover {
	border-color: var(--bb-x-primary);
	background: var(--bb-x-surface-soft);
	box-shadow: var(--bb-x-shadow-sm);
	transform: translateY(-1px);
}

.blub-booking.blub-booking.blub-booking .blub-booking__card:active {
	transform: none;
	box-shadow: none;
}

.blub-booking.blub-booking.blub-booking .blub-booking__card.is-selected {
	border-color: var(--bb-x-primary);
	background: var(--bb-x-primary-soft);
}

.blub-booking.blub-booking.blub-booking .blub-booking__card-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.blub-booking.blub-booking.blub-booking .blub-booking__card-text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--bb-x-text-soft);
}

.blub-booking.blub-booking.blub-booking .blub-booking__card-meta {
	margin-top: 2px;
	font-size: 12px;
	color: var(--bb-x-muted);
	font-variant-numeric: tabular-nums;
}

/* Keuzescherm aan het begin van de datumstap: kalender, langskomen, bellen. */
.blub-booking.blub-booking.blub-booking .blub-booking__choices {
	display: grid;
	gap: var(--bb-x-space-3);
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice,
.blub-booking.blub-booking.blub-booking .blub-booking__choice:visited {
	display: flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 18px var(--bb-x-space-4);
	border: 1px solid var(--bb-x-border);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface);
	color: var(--bb-x-text);
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: border-color var(--bb-x-quick) var(--bb-x-ease), box-shadow var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice:hover,
.blub-booking.blub-booking.blub-booking .blub-booking__choice:focus-visible {
	border-color: var(--bb-x-primary);
	background: var(--bb-x-surface);
	color: var(--bb-x-text);
	text-decoration: none;
	box-shadow: var(--bb-x-shadow-sm);
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bb-x-primary-soft);
	color: var(--bb-x-primary);
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice-icon svg {
	width: 20px;
	height: 20px;
	stroke-width: 1.8;
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice-external {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	stroke-width: 2;
	color: var(--bb-x-muted);
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice-text {
	font-size: 14px;
	line-height: 1.45;
	color: var(--bb-x-text-soft);
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice-action {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--bb-x-primary);
	overflow-wrap: anywhere;
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice-arrow {
	flex: 0 0 auto;
	stroke-width: 2;
	color: var(--bb-x-muted);
}

@media (max-width: 400px) {
	.blub-booking.blub-booking.blub-booking .blub-booking__choice,
	.blub-booking.blub-booking.blub-booking .blub-booking__choice:visited {
		gap: var(--bb-x-space-3);
		padding: var(--bb-x-space-4) var(--bb-x-space-3);
	}
}

.blub-booking.blub-booking.blub-booking .blub-booking__accordion {
	display: grid;
	gap: var(--bb-x-space-2);
}

.blub-booking.blub-booking.blub-booking .blub-booking__accordion-item {
	overflow: hidden;
	border: 1px solid var(--bb-x-border-soft);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface);
}

.blub-booking.blub-booking.blub-booking .blub-booking__accordion-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bb-x-space-2);
	width: 100%;
	padding: var(--bb-x-space-3) var(--bb-x-space-4);
	background: var(--bb-x-surface-soft);
	color: var(--bb-x-text);
	font-size: 14px;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	transition: color var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__accordion-toggle::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-right: 3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	border-radius: 1px;
	opacity: 0.55;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--bb-x-step) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__accordion-toggle[aria-expanded="true"]::after,
.blub-booking.blub-booking.blub-booking .blub-booking__accordion-item.is-open .blub-booking__accordion-toggle::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.blub-booking.blub-booking.blub-booking .blub-booking__accordion-panel {
	display: grid;
	gap: var(--bb-x-space-2);
	padding: var(--bb-x-space-3);
}

/* ==========================================================================
   7. Kalender
   ========================================================================== */

.blub-booking.blub-booking.blub-booking .blub-booking__datetime {
	display: grid;
	gap: var(--bb-x-space-5);
}

.blub-booking.blub-booking.blub-booking .blub-booking__calendar {
	min-width: 0;
	transition: opacity var(--bb-x-step) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal-head {
	display: flex;
	align-items: center;
	gap: var(--bb-x-space-1);
	margin-bottom: var(--bb-x-space-3);
}

/* Maand en jaar links, de pijltjes rechts (§17). De DOM-volgorde blijft
   ongewijzigd; alleen de visuele volgorde draait om. */
.blub-booking.blub-booking.blub-booking .blub-booking__cal-selects {
	order: 1;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal-nav {
	order: 2;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: transparent;
	color: var(--bb-x-text-soft);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--bb-x-quick) var(--bb-x-ease), color var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal-nav--prev {
	order: 2;
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal-nav--next {
	order: 3;
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal-nav:hover:not(:disabled) {
	background: var(--bb-x-surface-soft);
	color: var(--bb-x-text);
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Eigen vormgeving voor de maand- en jaarkeuze: geen systeemdropdown-look,
   maar het toetsenbordgedrag van een echte <select>. */
.blub-booking.blub-booking.blub-booking .blub-booking__cal-month,
.blub-booking.blub-booking.blub-booking .blub-booking__cal-year {
	max-width: 100%;
	padding: 5px 24px 5px 8px;
	border: 1px solid transparent;
	border-radius: var(--bb-x-radius-sm);
	background-color: transparent;
	background-image: var(--bb-x-chevron);
	background-repeat: no-repeat;
	background-position: right 7px center;
	background-size: 10px 6px;
	color: var(--bb-x-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--bb-x-quick) var(--bb-x-ease), border-color var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal-year {
	font-weight: 500;
	color: var(--bb-x-text-soft);
	font-variant-numeric: tabular-nums;
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal-month:hover,
.blub-booking.blub-booking.blub-booking .blub-booking__cal-year:hover {
	background-color: var(--bb-x-surface-soft);
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	table-layout: fixed;
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal th {
	padding-bottom: var(--bb-x-space-1);
	color: var(--bb-x-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.blub-booking.blub-booking.blub-booking .blub-booking__cell {
	padding: 0;
}

.blub-booking.blub-booking.blub-booking .blub-booking__day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 48px;
	min-height: 34px;
	max-height: 48px;
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--bb-x-radius-sm);
	background: transparent;
	color: var(--bb-x-text);
	font-size: 14px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background var(--bb-x-quick) var(--bb-x-ease), color var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__day:hover:not(:disabled) {
	background: var(--bb-x-surface-soft);
}

/* Vandaag: een stip onder het cijfer, geen kader. */
.blub-booking.blub-booking.blub-booking .blub-booking__day.is-today::after {
	content: "";
	position: absolute;
	bottom: 5px;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--bb-x-primary);
}

/* Niet-beschikbare dagen: licht en zonder rand. */
.blub-booking.blub-booking.blub-booking .blub-booking__day.is-disabled,
.blub-booking.blub-booking.blub-booking .blub-booking__day:disabled {
	background: transparent;
	color: var(--bb-x-muted);
	opacity: 0.4;
	cursor: default;
}

.blub-booking.blub-booking.blub-booking .blub-booking__day.is-disabled.is-today::after,
.blub-booking.blub-booking.blub-booking .blub-booking__day:disabled.is-today::after {
	background: var(--bb-x-muted);
}

/* Volgeboekt is iets anders dan gesloten: de zaak is open, maar er is niets
   meer vrij. Iets minder weggezakt dan een dichte dag, met een streep erdoor. */
.blub-booking.blub-booking.blub-booking .blub-booking__day.is-full {
	opacity: 0.6;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* De selectie staat bewust ná alle andere statussen. De :hover staat erbij
   omdat de hoverregel hierboven sterker is (:hover en :not() tellen mee); anders
   werd de gekozen dag onder de muis lichtgroen met een wit, onleesbaar cijfer. */
.blub-booking.blub-booking.blub-booking .blub-booking__day.is-selected,
.blub-booking.blub-booking.blub-booking .blub-booking__day.is-selected:hover:not(:disabled) {
	background: var(--bb-x-primary);
	color: var(--bb-x-primary-contrast);
	font-weight: 600;
	opacity: 1;
}

.blub-booking.blub-booking.blub-booking .blub-booking__day.is-selected.is-today::after {
	background: var(--bb-x-primary-contrast);
}

.blub-booking.blub-booking.blub-booking .blub-booking__cal-status {
	margin-top: var(--bb-x-space-2);
	color: var(--bb-x-muted);
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

/* ==========================================================================
   8. Tijdsloten
   ========================================================================== */

.blub-booking.blub-booking.blub-booking .blub-booking__times {
	display: flex;
	flex-direction: column;
	gap: var(--bb-x-space-3);
	min-width: 0;
	transition: opacity var(--bb-x-step) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__times-head {
	color: var(--bb-x-text-soft);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.blub-booking.blub-booking.blub-booking .blub-booking__hint {
	padding: var(--bb-x-space-4);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface-soft);
	color: var(--bb-x-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

/* Twee kolommen, ook in een off-canvas van 320 px (§8). De lijst scrolt
   intern en vervaagt aan boven- en onderkant, zodat zichtbaar is dat er meer
   tijden zijn. */
.blub-booking.blub-booking.blub-booking .blub-booking__slots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bb-x-space-2);
	max-height: 268px;
	padding: 8px 2px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

.blub-booking.blub-booking.blub-booking .blub-booking__slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--bb-x-space-2);
	border: 1px solid var(--bb-x-border);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface);
	color: var(--bb-x-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color var(--bb-x-quick) var(--bb-x-ease), background var(--bb-x-quick) var(--bb-x-ease),
		color var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__slot:hover {
	border-color: var(--bb-x-primary);
	background: var(--bb-x-primary-soft);
}

.blub-booking.blub-booking.blub-booking .blub-booking__slot.is-selected {
	border-color: var(--bb-x-primary);
	background: var(--bb-x-primary);
	color: var(--bb-x-primary-contrast);
	font-weight: 600;
}

/* ==========================================================================
   9. Formulier
   ========================================================================== */

/* Het raster vult zichzelf: bij een smalle widget één kolom, vanaf ongeveer
   370 px twee. Daardoor is er geen breekpunt op schermbreedte nodig — wat
   telt is de breedte van de widget zelf, ook in een off-canvas van 320 px.
   De `max()` in de minmax() houdt het op maximaal twee kolommen: een veld van
   50% hoort nooit smaller te worden dan een halve regel. Snapt een browser
   `max()` niet, dan vervalt het raster naar één kolom — ook goed. */
.blub-booking.blub-booking.blub-booking .blub-booking__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(170px, (100% - var(--bb-x-space-4)) / 2), 1fr));
	gap: var(--bb-x-space-4);
}

.blub-booking.blub-booking.blub-booking .blub-booking__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	grid-column: 1 / -1;
}

.blub-booking.blub-booking.blub-booking .blub-booking__field--50 {
	grid-column: auto;
}

/* `__field--` (zonder waarde) ontstaat als een formulierveld geen breedte
   heeft; dat veld hoort net als `--100` over de volle breedte. */
.blub-booking.blub-booking.blub-booking .blub-booking__field--100,
.blub-booking.blub-booking.blub-booking .blub-booking__field-- {
	grid-column: 1 / -1;
}

.blub-booking.blub-booking.blub-booking .blub-booking__label {
	display: block;
	color: var(--bb-x-text-soft);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.blub-booking.blub-booking.blub-booking .blub-booking__required {
	color: var(--bb-x-error);
}

.blub-booking.blub-booking.blub-booking .blub-booking__input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--bb-x-border);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface);
	color: var(--bb-x-text);
	font-size: 15px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--bb-x-quick) var(--bb-x-ease), box-shadow var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__input::placeholder {
	color: var(--bb-x-muted);
	opacity: 1;
}

.blub-booking.blub-booking.blub-booking .blub-booking__input:hover {
	border-color: var(--bb-x-muted);
}

/* Focusring van 3px in de zachte tint van de primaire kleur (§17). */
.blub-booking.blub-booking.blub-booking .blub-booking__input:focus {
	border-color: var(--bb-x-primary);
	box-shadow: 0 0 0 3px var(--bb-x-primary-soft);
	outline: 2px solid transparent;
	outline-offset: 0;
}

.blub-booking.blub-booking.blub-booking .blub-booking__textarea {
	min-height: 104px;
	line-height: 1.55;
	resize: vertical;
}

.blub-booking.blub-booking.blub-booking .blub-booking__select {
	padding-right: 36px;
	background-image: var(--bb-x-chevron);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px 6px;
	cursor: pointer;
}

.blub-booking.blub-booking.blub-booking .blub-booking__choices {
	display: grid;
	gap: 6px;
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--bb-x-border);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface);
	color: var(--bb-x-text);
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color var(--bb-x-quick) var(--bb-x-ease), background var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice:hover {
	border-color: var(--bb-x-muted);
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice-input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--bb-x-primary);
	cursor: pointer;
}

.blub-booking.blub-booking.blub-booking .blub-booking__choice:has(.blub-booking__choice-input:checked) {
	border-color: var(--bb-x-primary);
	background: var(--bb-x-primary-soft);
}

/* Foutstatus van een veld. */
.blub-booking.blub-booking.blub-booking .blub-booking__field--error .blub-booking__input,
.blub-booking.blub-booking.blub-booking .blub-booking__field--error .blub-booking__choice {
	border-color: var(--bb-x-error);
}

.blub-booking.blub-booking.blub-booking .blub-booking__field--error .blub-booking__input:focus {
	box-shadow: 0 0 0 3px var(--bb-x-error-soft);
}

.blub-booking.blub-booking.blub-booking .blub-booking__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: var(--bb-x-error);
	font-size: 12px;
	line-height: 1.45;
}

/* Klein waarschuwingsicoon vóór de foutmelding. Als masker, zodat het icoon de
   ingestelde foutkleur overneemt. */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
	.blub-booking .blub-booking__error::before {
		content: "";
		flex: none;
		width: 13px;
		height: 13px;
		margin-top: 2px;
		background-color: currentColor;
		-webkit-mask: var(--bb-x-icon-warning) no-repeat center / contain;
		mask: var(--bb-x-icon-warning) no-repeat center / contain;
	}
}

/* ==========================================================================
   10. Privacy, honeypot en losse tekstblokken
   ========================================================================== */

.blub-booking.blub-booking.blub-booking .blub-booking__privacy {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: var(--bb-x-space-4);
	color: var(--bb-x-muted);
	font-size: 13px;
	line-height: 1.55;
}

.blub-booking.blub-booking.blub-booking .blub-booking__privacy .blub-booking__choice {
	align-items: flex-start;
	background: transparent;
	border-color: var(--bb-x-border-soft);
	color: var(--bb-x-muted);
	font-size: 13px;
}

.blub-booking.blub-booking.blub-booking .blub-booking__privacy-text p {
	margin: 0;
}

.blub-booking.blub-booking.blub-booking .blub-booking__privacy-text p + p {
	margin-top: var(--bb-x-space-2);
}

/* Het honeypot-veld staat buiten beeld, maar bewust niet op display:none (§9).
   De JS zet dit ook inline; hier staat het voor het geval dat verandert. */
.blub-booking.blub-booking.blub-booking .blub-booking__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Formulierveld van het type "content": een uitlegblok zonder invoer. */
.blub-booking.blub-booking.blub-booking .blub-booking__field--content {
	gap: 4px;
	padding: var(--bb-x-space-3) var(--bb-x-space-4);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface-soft);
}

.blub-booking.blub-booking.blub-booking .blub-booking__content-title {
	color: var(--bb-x-text);
	font-size: 14px;
	font-weight: 600;
}

.blub-booking.blub-booking.blub-booking .blub-booking__content-text {
	color: var(--bb-x-text-soft);
	font-size: 13px;
	line-height: 1.55;
}

/* ==========================================================================
   11. Samenvatting
   ========================================================================== */

.blub-booking.blub-booking.blub-booking .blub-booking__summary {
	display: block;
	width: 100%;
}

.blub-booking.blub-booking.blub-booking .blub-booking__summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bb-x-space-4);
	padding: 10px 0;
	border-top: 1px solid var(--bb-x-border-soft);
	text-align: start;
}

.blub-booking.blub-booking.blub-booking .blub-booking__summary-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.blub-booking.blub-booking.blub-booking .blub-booking__summary-label {
	flex: 0 1 auto;
	min-width: 0;
	color: var(--bb-x-muted);
	font-size: 13px;
}

.blub-booking.blub-booking.blub-booking .blub-booking__summary-value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--bb-x-text);
	font-size: 14px;
	font-weight: 500;
	text-align: end;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   12. Voettekst en knoppen
   ========================================================================== */

.blub-booking.blub-booking.blub-booking .blub-booking__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bb-x-space-2);
	margin-top: var(--bb-x-space-6);
}

.blub-booking.blub-booking.blub-booking .blub-booking__footer:empty {
	margin-top: 0;
}

.blub-booking.blub-booking.blub-booking .blub-booking__button {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bb-x-space-2);
	min-height: 48px;
	padding: 0 var(--bb-x-space-5);
	border: 1px solid var(--bb-x-border);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface);
	color: var(--bb-x-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background var(--bb-x-quick) var(--bb-x-ease), border-color var(--bb-x-quick) var(--bb-x-ease),
		box-shadow var(--bb-x-quick) var(--bb-x-ease), transform var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__button:hover:not(:disabled) {
	background: var(--bb-x-surface-soft);
	box-shadow: var(--bb-x-shadow-sm);
	transform: translateY(-1px);
}

.blub-booking.blub-booking.blub-booking .blub-booking__button:active:not(:disabled) {
	box-shadow: none;
	transform: none;
}

/* Uitgeschakeld: 45% dekking en gewoon een pijltje — `not-allowed` leest als
   "kapot", terwijl de knop alleen nog even wacht op een keuze. */
.blub-booking.blub-booking.blub-booking .blub-booking__button:disabled {
	opacity: 0.45;
	box-shadow: none;
	transform: none;
	cursor: default;
}

/* Tijdens het verzenden staat de knop wel uit, maar de spinner en de tekst
   moeten leesbaar blijven. */
.blub-booking.blub-booking.blub-booking .blub-booking__button.is-busy:disabled {
	opacity: 0.8;
	cursor: progress;
}

.blub-booking.blub-booking.blub-booking .blub-booking__button--primary {
	border-color: var(--bb-x-primary);
	background: var(--bb-x-primary);
	color: var(--bb-x-primary-contrast);
}

.blub-booking.blub-booking.blub-booking .blub-booking__button--primary:hover:not(:disabled) {
	border-color: var(--bb-x-primary-hover);
	background: var(--bb-x-primary-hover);
}

.blub-booking.blub-booking.blub-booking .blub-booking__button--ghost {
	border-color: var(--bb-x-border);
	background: transparent;
	color: var(--bb-x-text-soft);
}

.blub-booking.blub-booking.blub-booking .blub-booking__button--block {
	flex: 1 1 100%;
}

.blub-booking.blub-booking.blub-booking .blub-booking__spinner {
	flex: none;
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: 0.85;
	animation: bb-spin 700ms linear infinite;
}

/* ==========================================================================
   13. Successcherm en "toevoegen aan agenda"
   ========================================================================== */

.blub-booking.blub-booking.blub-booking .blub-booking__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bb-x-space-3);
	text-align: center;
}

.blub-booking.blub-booking.blub-booking .blub-booking__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--bb-x-space-1);
	border-radius: 50%;
	background: var(--bb-x-success-soft);
	color: var(--bb-x-success);
	fill: currentColor;
	animation: bb-pop 320ms var(--bb-x-ease) both;
}

.blub-booking.blub-booking.blub-booking .blub-booking__success-icon svg {
	width: 28px;
	height: 28px;
	display: block;
}

.blub-booking.blub-booking.blub-booking .blub-booking__success-title {
	color: var(--bb-x-text);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.blub-booking.blub-booking.blub-booking .blub-booking__success-text {
	color: var(--bb-x-text-soft);
	font-size: 14px;
	line-height: 1.6;
}

.blub-booking.blub-booking.blub-booking .blub-booking__success-text p + p {
	margin-top: var(--bb-x-space-2);
}

/* De samenvatting staat op het successcherm in een rustig vlak. */
.blub-booking.blub-booking.blub-booking .blub-booking__success .blub-booking__summary {
	width: 100%;
	margin-top: var(--bb-x-space-2);
	padding: var(--bb-x-space-2) var(--bb-x-space-4);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface-soft);
	text-align: start;
}

.blub-booking.blub-booking.blub-booking .blub-booking__calendar-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bb-x-space-2);
	margin-top: var(--bb-x-space-2);
}

.blub-booking.blub-booking.blub-booking .blub-booking__calendar-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 var(--bb-x-space-3);
	border: 1px solid var(--bb-x-border);
	border-radius: 999px;
	background: var(--bb-x-surface);
	color: var(--bb-x-text-soft);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--bb-x-quick) var(--bb-x-ease), background var(--bb-x-quick) var(--bb-x-ease),
		color var(--bb-x-quick) var(--bb-x-ease), transform var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking.blub-booking.blub-booking .blub-booking__calendar-link:hover {
	border-color: var(--bb-x-primary);
	background: var(--bb-x-surface-soft);
	color: var(--bb-x-text);
	transform: translateY(-1px);
}

.blub-booking.blub-booking.blub-booking .blub-booking__calendar-link-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	color: var(--bb-x-muted);
	fill: currentColor;
}

.blub-booking.blub-booking.blub-booking .blub-booking__calendar-link-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ==========================================================================
   14. Laadskelet, laadtekst en laadstatus
   ==========================================================================
   Het skelet staat in de HTML van de shortcode en wordt door de JS verwijderd
   vlak vóór .blub-booking__inner ingevoegd wordt (§20). */

.blub-booking.blub-booking.blub-booking .blub-booking__skeleton {
	display: grid;
	gap: var(--bb-x-space-3);
}

.blub-booking.blub-booking.blub-booking .blub-booking__skeleton-line,
.blub-booking.blub-booking.blub-booking .blub-booking__skeleton-block {
	display: block;
	background-color: var(--bb-x-skeleton);
	background-image: linear-gradient(90deg, transparent 0, var(--bb-x-shimmer) 50%, transparent 100%);
	background-repeat: no-repeat;
	background-size: 60% 100%;
	animation: bb-shimmer 1500ms linear infinite;
}

.blub-booking.blub-booking.blub-booking .blub-booking__skeleton-line {
	height: 12px;
	border-radius: 6px;
}

.blub-booking.blub-booking.blub-booking .blub-booking__skeleton-line--title {
	width: 55%;
	height: 20px;
	border-radius: 8px;
}

.blub-booking.blub-booking.blub-booking .blub-booking__skeleton-line--sub {
	width: 78%;
	margin-bottom: var(--bb-x-space-2);
}

.blub-booking.blub-booking.blub-booking .blub-booking__skeleton-line--wide {
	width: 100%;
	height: 46px;
	border-radius: var(--bb-x-radius);
}

.blub-booking.blub-booking.blub-booking .blub-booking__skeleton-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bb-x-space-2);
}

.blub-booking.blub-booking.blub-booking .blub-booking__skeleton-block {
	height: 42px;
	border-radius: var(--bb-x-radius-sm);
}

.blub-booking.blub-booking.blub-booking .blub-booking__loading {
	margin: var(--bb-x-space-4) 0 0;
	color: var(--bb-x-muted);
	font-size: 13px;
	text-align: center;
}

/* Bij mode="modal" zet de shortcode de noscript-melding buiten de container,
   omdat die dan verborgen is; vandaar de tweede selector. */
.blub-booking.blub-booking.blub-booking .blub-booking__noscript,
.blub-booking__noscript.blub-booking__noscript {
	margin: 0;
	padding: var(--bb-x-space-4);
	border: 1px solid var(--bb-x-border-soft);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-surface-soft);
	color: var(--bb-x-text-soft);
	font-size: 13px;
	line-height: 1.55;
}

/* Tijdens het ophalen van sloten vervaagt de kalender licht; hij blijft staan
   waar hij staat, zodat er geen sprong in de indeling komt. */
.blub-booking.blub-booking.blub-booking .blub-booking__calendar.is-loading,
.blub-booking.blub-booking.blub-booking .blub-booking__times.is-loading,
.blub-booking.blub-booking.blub-booking .blub-booking__content.is-loading,
.blub-booking.blub-booking.blub-booking.is-loading .blub-booking__calendar,
.blub-booking.blub-booking.blub-booking.is-loading .blub-booking__times {
	opacity: 0.5;
	pointer-events: none;
}

/* ==========================================================================
   15. Modal, openknop en zwevende knop
   ==========================================================================
   Deze drie staan bewust buiten `.blub-booking`: de dialog hangt aan het einde
   van de pagina en de knoppen staan in de inhoud van het thema. Daar helpt de
   nesting van hierboven niet, en een gewone thema-regel als
   `.entry-content button { … }` (specificiteit 0,1,1) zou van één losse klasse
   winnen. Daarom staat de klasse hier twee keer: dat brengt elke regel op
   dezelfde 0,2,0 als de rest van het bestand, zonder !important. Een
   site-eigenaar overschrijft ze met dezelfde twee klassen. */

/* De dialog. Zonder [open] of .is-open blijft hij weg — dat geldt ook voor de
   terugval zonder <dialog>-ondersteuning. */
.blub-booking__modal.blub-booking__modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--bb-x-space-4);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	background: var(--bb-x-overlay);
	color: var(--bb-x-text);
}

/* Een echte <dialog> tekent zijn achtergrond via ::backdrop. */
dialog.blub-booking__modal.blub-booking__modal {
	background: transparent;
}

.blub-booking__modal.blub-booking__modal[open],
.blub-booking__modal.blub-booking__modal.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
}

.blub-booking__modal.blub-booking__modal::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
	.blub-booking__modal.blub-booking__modal::backdrop {
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}
}

.blub-booking__modal-panel.blub-booking__modal-panel {
	position: relative;
	width: 100%;
	max-width: var(--bb-x-max-width);
	margin: auto;
}

/* In de modal vult de kaart de dialog; de schaduw wordt zwaarder. */
.blub-booking__modal.blub-booking__modal .blub-booking {
	max-width: none;
	margin: 0;
	box-shadow: var(--bb-x-shadow-lg);
}

.blub-booking__modal-close.blub-booking__modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bb-x-surface-soft);
	color: var(--bb-x-muted);
	font: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--bb-x-quick) var(--bb-x-ease), color var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking__modal-close.blub-booking__modal-close:hover {
	background: var(--bb-x-border-soft);
	color: var(--bb-x-text);
}

/* Op mobiel schuift de modal als vol-breed vlak van onderen in. */
@media (max-width: 559px) {
	.blub-booking__modal.blub-booking__modal {
		padding: 0;
	}

	.blub-booking__modal.blub-booking__modal[open],
	.blub-booking__modal.blub-booking__modal.is-open {
		align-items: flex-end;
	}

	.blub-booking__modal-panel.blub-booking__modal-panel {
		max-width: none;
		margin: 0;
		animation: bb-sheet-in 240ms var(--bb-x-ease) both;
	}

	.blub-booking__modal.blub-booking__modal .blub-booking {
		max-height: 92vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-bottom: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

/* De knop die de modal opent (mode="button"). */
.blub-booking__trigger.blub-booking__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bb-x-space-2);
	min-height: 48px;
	padding: 0 var(--bb-x-space-6);
	border: 1px solid var(--bb-x-primary);
	border-radius: var(--bb-x-radius);
	background: var(--bb-x-primary);
	color: var(--bb-x-primary-contrast);
	font-family: var(--bb-x-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--bb-x-shadow-sm);
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--bb-x-quick) var(--bb-x-ease), border-color var(--bb-x-quick) var(--bb-x-ease),
		box-shadow var(--bb-x-quick) var(--bb-x-ease), transform var(--bb-x-quick) var(--bb-x-ease);
}

.blub-booking__trigger.blub-booking__trigger:hover {
	border-color: var(--bb-x-primary-hover);
	background: var(--bb-x-primary-hover);
	box-shadow: var(--bb-x-shadow-md);
	transform: translateY(-1px);
}

.blub-booking__trigger.blub-booking__trigger:active {
	box-shadow: var(--bb-x-shadow-sm);
	transform: none;
}

/* De zwevende knop: een pil met icoon en tekst. */
.blub-booking__floating.blub-booking__floating {
	position: fixed;
	bottom: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--bb-x-primary);
	color: var(--bb-x-primary-contrast);
	font-family: var(--bb-x-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: var(--bb-x-shadow-lg);
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--bb-x-quick) var(--bb-x-ease), transform var(--bb-x-step) var(--bb-x-ease),
		box-shadow var(--bb-x-step) var(--bb-x-ease);
}

.blub-booking__floating.blub-booking__floating--bottom-right {
	right: 20px;
	right: calc(20px + env(safe-area-inset-right, 0px));
}

.blub-booking__floating.blub-booking__floating--bottom-left {
	left: 20px;
	left: calc(20px + env(safe-area-inset-left, 0px));
}

.blub-booking__floating.blub-booking__floating:hover {
	background: var(--bb-x-primary-hover);
	transform: translateY(-2px);
}

.blub-booking__floating.blub-booking__floating:active {
	transform: none;
}

.blub-booking__floating.blub-booking__floating .blub-booking__floating-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.blub-booking__floating.blub-booking__floating .blub-booking__floating-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.blub-booking__floating.blub-booking__floating .blub-booking__floating-text {
	white-space: nowrap;
}

/* Past de tekst niet meer, dan blijft alleen het icoon over (aria-label staat
   op de knop, dus de betekenis blijft). */
@media (max-width: 559px) {
	.blub-booking__floating.blub-booking__floating {
		width: 56px;
		min-height: 56px;
		padding: 0;
		justify-content: center;
		bottom: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.blub-booking__floating.blub-booking__floating--bottom-right {
		right: 16px;
		right: calc(16px + env(safe-area-inset-right, 0px));
	}

	.blub-booking__floating.blub-booking__floating--bottom-left {
		left: 16px;
		left: calc(16px + env(safe-area-inset-left, 0px));
	}

	.blub-booking__floating.blub-booking__floating .blub-booking__floating-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.blub-booking__floating.blub-booking__floating .blub-booking__floating-icon {
		width: 22px;
		height: 22px;
	}
}

/* ==========================================================================
   16. Gesplitste indeling (§17.1)
   ==========================================================================
   Bij `data-layout="split"` staat links een vast paneel met het logo, de dienst
   en wat de bezoeker al gekozen heeft, en rechts de stap zelf. De shortcode zet
   het attribuut al vóórdat de JS draait, zodat de kaart meteen de juiste
   breedte heeft en het laadskelet niet eerst smal staat.

   Het omslagpunt is de breedte van de wídget (`@container bb`), niet die van
   het scherm: in een sidebar of een off-canvas van 320 px staan de twee panelen
   dus gewoon onder elkaar, ook op een breed scherm. */

.blub-booking.blub-booking.blub-booking[data-layout="split"] {
	max-width: var(--bb-x-max-width-split);
	padding: 0;
}

/* Zes klassen vanaf 782 px, om precies dezelfde reden als bij de kaartbreedte in
   §3 — de uitleg staat daar. */
@media (min-width: 782px) {
	.blub-booking.blub-booking.blub-booking.blub-booking.blub-booking.blub-booking[data-layout="split"] {
		max-width: var(--bb-x-max-width-split);
	}
}

.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}

/* --- het zijpaneel ------------------------------------------------------- */

.blub-booking.blub-booking.blub-booking .blub-booking__aside {
	display: flex;
	flex-direction: column;
	padding: var(--bb-x-space-5) var(--bb-x-space-6) var(--bb-x-space-6);
	border-bottom: 1px solid var(--bb-x-border-soft);
}

/* De kop van het paneel bestaat alleen uit het logo, links uitgelijnd. De JS
   maakt deze balk niet eens aan als de site geen logo heeft — anders bleef er
   een lege strook met een scheidingslijn over. */
.blub-booking.blub-booking.blub-booking .blub-booking__aside-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: var(--bb-x-space-5);
	padding-bottom: var(--bb-x-space-4);
	border-bottom: 1px solid var(--bb-x-border-soft);
}

.blub-booking.blub-booking.blub-booking .blub-booking__logo {
	display: block;
	width: auto;
	max-width: min(120px, 100%);
	height: auto;
	max-height: 32px;
	object-fit: contain;
	object-position: left center;
}

.blub-booking.blub-booking.blub-booking .blub-booking__aside-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* De naam van de site, klein boven de dienst. */
.blub-booking.blub-booking.blub-booking .blub-booking__host {
	margin-bottom: var(--bb-x-space-1);
	color: var(--bb-x-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

/* In deze indeling is de titel de naam van de afspraak, en dus de kop waar het
   oog op landt — niet de rustige bovenregel van de kaartindeling. */
.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__title {
	color: var(--bb-x-text);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-transform: none;
}

/* --- de gegevens van de afspraak ----------------------------------------- */

.blub-booking.blub-booking.blub-booking .blub-booking__facts {
	display: flex;
	flex-direction: column;
	gap: var(--bb-x-space-2);
	margin-top: var(--bb-x-space-3);
	padding: 0;
	list-style: none;
}

.blub-booking.blub-booking.blub-booking .blub-booking__fact {
	display: flex;
	align-items: flex-start;
	gap: var(--bb-x-space-2);
	min-width: 0;
	color: var(--bb-x-text-soft);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

.blub-booking.blub-booking.blub-booking .blub-booking__fact-icon {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	color: var(--bb-x-muted);
}

/* Wat het icoon toont hoeft er niet ook nog eens te staan; voor een schermlezer
   moet het er wél zijn. Zelfde aanpak als .blub-booking__live. */
.blub-booking.blub-booking.blub-booking .blub-booking__fact-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.blub-booking.blub-booking.blub-booking .blub-booking__fact-value {
	min-width: 0;
}

/* De omschrijving van de dienst staat onderaan het paneel, in rustiger tekst. */
.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__intro {
	margin-top: var(--bb-x-space-5);
	color: var(--bb-x-text-soft);
	font-size: 15px;
	line-height: 1.6;
}

.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__intro p + p {
	margin-top: var(--bb-x-space-3);
}

/* --- de rechterkolom ----------------------------------------------------- */

/* `container-name: bb` staat hier bewust nóg een keer. De regels van hoofdstuk 17
   hieronder ("bredere widgets") vragen naar de dichtstbijzijnde container met die
   naam; door de rechterkolom er zelf één te maken kijken ze naar de ruimte die de
   stap werkelijk heeft, en niet naar de hele widget (waar het zijpaneel ook nog
   in zit). */
.blub-booking.blub-booking.blub-booking .blub-booking__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--bb-x-space-6);
	container-type: inline-size;
	container-name: bb;
}

/* De terugknop staat in deze indeling niet links in het zijpaneel maar helemaal
   rechts in de kop van de stap, achter de staptitel. `margin-left: auto` duwt
   hem daarheen; de -4px van de kaartindeling moet daarvoor weg. */
.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__back {
	width: 38px;
	height: 38px;
	margin-left: auto;
	border: 1px solid var(--bb-x-border);
	color: var(--bb-x-primary);
}

/* In deze indeling staat er alleen nog "Stap 2 van 3" in de kop. */
.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__header {
	margin-bottom: var(--bb-x-space-2);
}

.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__header:empty {
	display: none;
}

.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__steptitle {
	font-size: 22px;
	font-weight: 500;
}

/* --- twee kolommen naast elkaar ------------------------------------------ */

@container bb (min-width: 720px) {
	.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__inner {
		grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
	}

	.blub-booking.blub-booking.blub-booking .blub-booking__aside {
		padding: var(--bb-x-space-6);
		border-bottom: 0;
		border-inline-end: 1px solid var(--bb-x-border-soft);
	}

	.blub-booking.blub-booking.blub-booking .blub-booking__main {
		position: relative;
		padding: var(--bb-x-space-6) var(--bb-x-space-7);
	}

	/* De voortgangsbalk ligt tegen de bovenrand van zijn positieblok. Zolang de
	   panelen onder elkaar staan is dat de hele kaart en klopt dat; staan ze
	   naast elkaar, dan hoort de balk boven de stap en niet boven het zijpaneel.
	   De rechterkolom wordt dan het positieblok, en de linkerbovenhoek van die
	   balk valt midden in de kaart en heeft daar geen ronding meer nodig. */
	.blub-booking.blub-booking.blub-booking .blub-booking__progress-list {
		border-top-left-radius: 0;
	}
}

/* Onder het omslagpunt is het zijpaneel een kop en geen kolom; de titel mag dan
   een maat kleiner. */
@container bb (max-width: 719px) {
	.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__title {
		font-size: 22px;
	}

	/* Naast elkaar in plaats van onder elkaar. Het zijpaneel is hier een kop
	   boven de stap, en dan is een kolom van vier losse regels — duur, locatie,
	   medewerker, tijdzone — onnodig veel schuiven voordat je de kalender ziet.
	   Met `wrap` regelt de browser het zelf: korte regels als "1 uur 30 min" en
	   "Sgaap" delen een rij, en een lang adres past er niet naast en krijgt zijn
	   eigen rij. */
	.blub-booking.blub-booking.blub-booking .blub-booking__facts {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: var(--bb-x-space-5);
	}

	.blub-booking.blub-booking.blub-booking .blub-booking__fact {
		flex: 0 1 auto;
		max-width: 100%;
	}

	/* De omschrijving mag hier een maat kleiner: op een telefoon staat hij
	   tussen de dienst en de kalender in, en dan leest een compacter blok
	   prettiger dan vier of vijf brede regels. */
	.blub-booking.blub-booking.blub-booking[data-layout="split"] .blub-booking__intro {
		margin-top: var(--bb-x-space-4);
		font-size: 14px;
	}
}

/* In de rechterkolom staan kalender en tijden al vanaf 480 px naast elkaar; de
   algemene regel hieronder (600 px) is voor de kaartindeling, waar de hele
   widget de container is. */
@container bb (min-width: 480px) {
	.blub-booking[data-layout="split"] .blub-booking__datetime {
		grid-template-columns: minmax(0, 1fr) 190px;
		align-items: start;
		gap: var(--bb-x-space-6);
	}
}

/* De dialog begrenst de breedte van het paneel; de container zit daarbinnen en
   kan die breedte dus niet zelf afdwingen. */
.blub-booking__modal.blub-booking__modal[data-layout="split"] .blub-booking__modal-panel {
	max-width: var(--bb-x-max-width-split);
}

/* ==========================================================================
   17. Bredere widgets
   ==========================================================================
   De breekpunten slaan op de breedte van de widget zelf, niet op die van het
   scherm: zo klopt de indeling zowel in een off-canvas van 320 px als op een
   pagina van 1200 px met een ruime `max_width`. */

@container bb (min-width: 600px) {
	.blub-booking .blub-booking__datetime {
		grid-template-columns: minmax(0, 1fr) 210px;
		align-items: start;
		gap: var(--bb-x-space-6);
	}

	.blub-booking.blub-booking.blub-booking .blub-booking__slots {
		max-height: 336px;
	}

	.blub-booking.blub-booking.blub-booking .blub-booking__day {
		font-size: 15px;
	}
}

@container bb (min-width: 760px) {
	.blub-booking .blub-booking__datetime {
		grid-template-columns: minmax(0, 1fr) 260px;
	}

	.blub-booking.blub-booking.blub-booking .blub-booking__slots {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-height: 400px;
	}
}

/* ==========================================================================
   18. Animaties
   ========================================================================== */

/* Stapwissel: korte fade met 8 px verschuiving. De JS bouwt de inhoud van een
   stap opnieuw op, dus de nieuwe elementen starten de animatie vanzelf. */
.blub-booking.blub-booking.blub-booking .blub-booking__content > *,
.blub-booking.blub-booking.blub-booking .blub-booking__footer > * {
	animation: bb-step-in var(--bb-x-step) var(--bb-x-ease) both;
}

@keyframes bb-step-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

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

@keyframes bb-pop {
	from {
		opacity: 0;
		transform: scale(0.82);
	}

	60% {
		opacity: 1;
		transform: scale(1.04);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes bb-shimmer {
	from {
		background-position: -80% 0;
	}

	to {
		background-position: 180% 0;
	}
}

@keyframes bb-sheet-in {
	from {
		transform: translateY(16px);
	}

	to {
		transform: none;
	}
}

/* ==========================================================================
   19. Focusweergave
   ========================================================================== */

.blub-booking.blub-booking.blub-booking .blub-booking__inner :focus-visible,
.blub-booking__trigger.blub-booking__trigger:focus-visible,
.blub-booking__floating.blub-booking__floating:focus-visible,
.blub-booking__modal-close.blub-booking__modal-close:focus-visible {
	outline: 2px solid var(--bb-x-primary);
	outline-offset: 2px;
}

/* Focus zonder :focus-visible (na een muisklik, of een knop die de widget na
   het opnieuw opbouwen zelf focus geeft) krijgt geen rand. Veel thema's zetten
   op elke button:focus een eigen outline; die hoort hier niet. */
.blub-booking.blub-booking.blub-booking .blub-booking__inner :focus:not(:focus-visible) {
	outline: none;
}

/* Invoervelden hebben hun eigen ring van 3px; een extra outline is dubbelop.
   De doorzichtige outline blijft staan voor de modus met geforceerde kleuren. */
.blub-booking.blub-booking.blub-booking .blub-booking__input:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 0;
}

/* ==========================================================================
   20. Verminderde beweging
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.blub-booking .blub-booking__inner *,
	.blub-booking .blub-booking__inner *::before,
	.blub-booking .blub-booking__inner *::after,
	.blub-booking .blub-booking__skeleton-line,
	.blub-booking .blub-booking__skeleton-block,
	.blub-booking__modal-panel.blub-booking__modal-panel,
	.blub-booking__trigger.blub-booking__trigger,
	.blub-booking__floating.blub-booking__floating {
		animation: none;
		transition: none;
	}

	.blub-booking.blub-booking.blub-booking .blub-booking__button:hover:not(:disabled),
	.blub-booking.blub-booking.blub-booking .blub-booking__card:hover,
	.blub-booking.blub-booking.blub-booking .blub-booking__calendar-link:hover,
	.blub-booking__trigger.blub-booking__trigger:hover,
	.blub-booking__floating.blub-booking__floating:hover {
		transform: none;
	}
}