/**
 * Alpaca Flow Booking Widget — full-on makeover edition
 *
 * Pale cream background, paired display + body font tokens (controlled via
 * AppearanceSettings), Lucide icons in the sidebar, practitioner tags,
 * meeting-format chip, "Read more" bios, refined typography across.
 *
 * Font tokens (--afb-font-display, --afb-font-body) get set by inline
 * styles emitted from the PHP shortcode based on the site owner's choice.
 * If unset (theme inherit), we fall back to inherit.
 */

.alpaca-flow-booking-root {
	/* ── Brand tokens (scoped) ────────────────────────────────────── */
	--afb-navy:        #1A2A38;
	--afb-navy-soft:   #2A3A48;
	--afb-bg:          #FBFAF7;       /* paler cream than before */
	--afb-cream:       #FBFAF7;
	--afb-cream-soft:  #F5F3EE;
	--afb-surface:     #FFFFFF;
	--afb-accent:      #0A8EF1;
	--afb-accent-soft: #0871C0;
	--afb-accent-deep: #06548F;
	--afb-accent-tint: #D9EEFD;
	--afb-accent-glow: #A3D5FB;
	/* Accent as a raw "R, G, B" triplet — lets the focus ring and the
	 * background glow gradients use rgba() with the theme's accent. Must
	 * always match --afb-accent. */
	--afb-accent-rgb:  10, 142, 241;
	--afb-ink:         #1A2A38;
	--afb-ink-soft:    #404D5C;
	--afb-muted:       #6B7480;
	--afb-subtle:      #9CA3AB;
	--afb-line:        #E8E4DA;
	--afb-line-soft:   #F0EDE5;
	--afb-error:       #B3261E;
	--afb-error-bg:    #FBEAE8;

	--afb-r-sm: 6px;
	--afb-r-md: 10px;
	--afb-r-lg: 16px;

	--afb-shadow-sm: 0 1px 2px rgba(26, 42, 56, 0.04);
	--afb-shadow-md: 0 4px 16px rgba(26, 42, 56, 0.06);
	--afb-shadow-lg: 0 12px 40px rgba(26, 42, 56, 0.08);
	/* Composite shadow used on every card-like surface (practitioner cards,
	 * service cards, calendar panel, slot panel, summary sidebar). Tight 1px
	 * shadow for the edge + softer 12px for the lift — gives cards substance
	 * against the cream page background. Navy-tinted shadow stays neutral
	 * across all brand themes. */
	--afb-card-shadow: 0 1px 2px rgba(26, 42, 56, 0.04), 0 4px 12px rgba(26, 42, 56, 0.05);
	--afb-card-shadow-hover: 0 2px 4px rgba(26, 42, 56, 0.06), 0 8px 20px rgba(26, 42, 56, 0.08);

	/* Font tokens — overridable by inline <style> from PHP. Defaults
	 * are 'inherit' so if appearance settings say "match theme" we use
	 * whatever the page's font stack is. */
	--afb-font-display: inherit;
	--afb-font-body:    inherit;

	/* Size scale (px) */
	--afb-fs-10:   10.5px;
	--afb-fs-12:   12px;
	--afb-fs-13:   13px;
	--afb-fs-14:   14px;
	--afb-fs-15:   14.5px;
	--afb-fs-17:   17px;
	--afb-fs-21:   21px;
	--afb-fs-28:   28px;
	--afb-fs-34:   34px;

	/* Motion */
	--afb-ease:     cubic-bezier(0.4, 0, 0.2, 1);
	--afb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--afb-focus: 0 0 0 3px rgba(var(--afb-accent-rgb), 0.25);

	font-family: var(--afb-font-body);
	color: var(--afb-ink);
	font-size: var(--afb-fs-15);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* The widget inherits the container's width — no hardcoded max-width or
	   horizontal padding. Page builders (Breakdance, Elementor, etc) and
	   themes own the horizontal layout via their section padding; the widget
	   just sits politely inside whatever they give it. Vertical padding only,
	   so the widget breathes top-and-bottom without fighting the container
	   for left/right space. The internal step layout (.afb-widget) carries
	   its own max-width so content stays readable on very wide containers. */
	width: 100%;
	box-sizing: border-box;
	padding: 24px 0 48px;
}

/* Panel background — the soft accent glow behind the whole flow. Off by
   default (the root above has no background) so the widget inherits the
   client's page. Turned on via the "Panel background" appearance toggle,
   which adds .has-panel-bg to the root. */
.alpaca-flow-booking-root.has-panel-bg {
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--afb-accent-rgb), 0.04), transparent),
		radial-gradient(ellipse 60% 40% at 90% 100%, rgba(var(--afb-accent-rgb), 0.03), transparent);
}

.alpaca-flow-booking-root *,
.alpaca-flow-booking-root *::before,
.alpaca-flow-booking-root *::after { box-sizing: border-box; }

/* Lucide-style inline icons — currentColor stroke so they inherit text colour */
.afb-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

/* ── Initial loading ───────────────────────────────────────────────── */

.afb-loading {
	padding: 80px 24px;
	text-align: center;
}
.afb-loading-rule {
	width: 40px;
	height: 2px;
	background: var(--afb-accent);
	margin: 0 auto 16px;
	animation: afb-pulse 1.4s ease-in-out infinite;
}
.afb-loading-text {
	font-size: var(--afb-fs-13);
	color: var(--afb-muted);
	letter-spacing: 0.04em;
}
@keyframes afb-pulse {
	0%, 100% { opacity: 0.35; transform: scaleX(1); }
	50%      { opacity: 1;    transform: scaleX(1.5); }
}

/* ── Layout shell ──────────────────────────────────────────────────── */

.afb-widget {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 40px;
	align-items: flex-start;
	/* Internal max-width so the booking flow stays comfortable on very wide
	   containers (full-width Breakdance sections, page-builder hero
	   sections). Sits centred inside whatever the parent gives us — narrower
	   containers shrink down to fit, wider containers cap here. The same
	   max-width applies to the practitioner step (.afb-widget--full) so the
	   visual width is consistent across all four steps of the flow. */
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
/* Full-width variant — used on the practitioner step, where there's no
   sidebar and the cards want the whole row. */
.afb-widget--full {
	grid-template-columns: 1fr;
}
.afb-main { min-width: 0; }
.afb-sidebar {
	position: sticky;
	top: 20px;
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-md);
	box-shadow: var(--afb-shadow-sm);
	overflow: hidden;
}

/* Sidebar header — always rendered, only acts as a toggle on mobile.
 * On desktop the chevron is hidden, the subtitle is hidden, and the
 * button is just an unstyled container around the eyebrow + title. */
.afb-sidebar-header {
	width: 100%;
	background: transparent;
	border: none;
	padding: 24px 24px 0;
	font-family: inherit;
	color: inherit;
	text-align: left;
	cursor: default;       /* desktop: not actionable */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.afb-sidebar-header-text { min-width: 0; flex: 1; }
.afb-sidebar-header-sub {
	display: none;          /* hidden on desktop, visible on mobile */
	font-size: 12.5px;
	color: var(--afb-muted);
	margin-top: 4px;
}
.afb-sidebar-header-chevron {
	display: none;          /* hidden on desktop, visible on mobile */
	color: var(--afb-muted);
	transition: transform 0.25s var(--afb-ease);
}

.afb-sidebar-body {
	padding: 18px 24px 24px;
	display: block;         /* always visible on desktop */
}

/* ── Mobile (≤900px) ──
 * - Single column, sidebar appears ABOVE the main content
 * - Sidebar header becomes a tappable toggle
 * - Sidebar body collapses unless .is-expanded
 */
@media (max-width: 900px) {
	.afb-widget {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.afb-sidebar {
		position: static;
		order: -1;            /* push above .afb-main in the grid */
	}
	.afb-sidebar-header {
		cursor: pointer;
		padding: 16px 18px;
	}
	.afb-sidebar-header:hover,
	.afb-sidebar-header:focus-visible {
		background: var(--afb-cream-soft);
	}
	.afb-sidebar-header:focus-visible {
		outline: none;
		box-shadow: var(--afb-focus);
	}
	.afb-sidebar-header-sub { display: block; }
	.afb-sidebar-header-chevron { display: inline-flex; }
	.afb-sidebar.is-expanded .afb-sidebar-header-chevron {
		transform: rotate(180deg);
	}

	/* Hide the big title on mobile — eyebrow + summary line is enough */
	.afb-sidebar-header .afb-summary-title {
		font-size: 16px;
		margin-bottom: 0;
	}

	/* Collapsible body */
	.afb-sidebar-body {
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
		transition: max-height 0.3s var(--afb-ease), padding 0.3s var(--afb-ease);
	}
	.afb-sidebar.is-expanded .afb-sidebar-body {
		max-height: 1200px;   /* generous ceiling; content rarely exceeds */
		padding: 8px 18px 18px;
		border-top: 1px solid var(--afb-line-soft);
	}
}

/* ── Stepper ───────────────────────────────────────────────────────── */

.afb-stepper {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 32px;
	justify-content: center;
}
.afb-step-dot {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--afb-muted);
	font-family: var(--afb-font-body);
	font-size: 12.5px;
	font-weight: 500;
	transition: color 0.4s var(--afb-ease);
}
.afb-step-dot-num {
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	transition: all 0.4s var(--afb-ease);
}
.afb-step-dot.is-active { color: var(--afb-navy); }
.afb-step-dot.is-active .afb-step-dot-num {
	background: var(--afb-accent-soft);
	color: var(--afb-cream);
	border-color: var(--afb-accent-soft);
}
.afb-step-dot.is-done .afb-step-dot-num {
	background: var(--afb-accent-tint);
	color: var(--afb-accent);
	border-color: var(--afb-accent-tint);
}
.afb-step-line {
	width: 32px;
	height: 1px;
	background: var(--afb-line);
	margin: 0 14px;
	transition: background 0.4s var(--afb-ease);
}
.afb-step-line.is-done { background: var(--afb-accent); }

@media (max-width: 600px) {
	.afb-step-dot-label { display: none; }
	.afb-step-line { width: 20px; margin: 0 8px; }
}

/* ── Step container ────────────────────────────────────────────────── */

.afb-step { animation: afb-fadeUp 0.45s var(--afb-ease-out); }
@keyframes afb-fadeUp {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Step header ───────────────────────────────────────────────────── */

.afb-step-header { margin-bottom: 28px; }
.afb-rule {
	display: block;
	width: 48px;
	height: 2px;
	background: var(--afb-accent);
	border: none;
	margin: 0 0 18px 0;
}
.afb-eyebrow {
	display: block;
	margin-bottom: 12px;
	font-size: var(--afb-fs-10);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--afb-accent);
	font-family: var(--afb-font-body);
}
.afb-title {
	margin: 0;
	font-family: var(--afb-font-display);
	font-size: var(--afb-fs-34);
	font-weight: 700;
	color: var(--afb-navy);
	line-height: 1.1;
	letter-spacing: -0.025em;
}
.afb-title-em {
	color: var(--afb-accent);
	font-style: italic;
}
.afb-subtitle {
	margin: 14px 0 0;
	font-size: var(--afb-fs-15);
	color: var(--afb-ink-soft);
	max-width: 540px;
	line-height: 1.55;
	font-family: var(--afb-font-body);
}

@media (max-width: 600px) {
	.afb-title { font-size: var(--afb-fs-28); }
}

/* ── Practitioner cards (2-col grid, avatar + name + bio + tags) ────── */

/* ─── Service filter (Who step) ──────────────────────────────────────
 * "Filter-as-a-card" design — the trigger looks like a slim card with
 * icon, label, current value, and chevron. Visually a peer of the
 * practitioner cards below it. Custom-rendered dropdown menu so it
 * looks identical cross-browser. */

.afb-svcfilter {
	position: relative;
	display: block;
	margin: 0 0 16px 0;
}

.afb-svcfilter-trigger {
	appearance: none;
	width: 100%;
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-md);
	padding: 14px 18px;
	color: var(--afb-ink);
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: border-color 0.15s var(--afb-ease), box-shadow 0.15s var(--afb-ease);
	font-family: inherit;
}

.afb-svcfilter-trigger:hover {
	border-color: var(--afb-accent);
}

.afb-svcfilter.is-open .afb-svcfilter-trigger {
	border-color: var(--afb-accent);
	box-shadow: var(--afb-focus);
}

/* The icon in its tinted circle */
.afb-svcfilter-trigger-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--afb-accent-tint);
	color: var(--afb-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Middle body — stacks the label above the current value (and counter) */
.afb-svcfilter-trigger-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.afb-svcfilter-trigger-label {
	font: 600 11px/1 var(--afb-font-body, inherit);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--afb-muted);
}

.afb-svcfilter-trigger-value {
	font: 600 16px/1.2 var(--afb-font-body, inherit);
	color: var(--afb-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.afb-svcfilter-trigger-count {
	font: 400 12px/1.3 var(--afb-font-body, inherit);
	color: var(--afb-muted);
	margin-top: 2px;
}

/* Chevron on the right */
.afb-svcfilter-trigger-chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--afb-muted);
	border-bottom: 2px solid var(--afb-muted);
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform 0.18s var(--afb-ease);
}

.afb-svcfilter.is-open .afb-svcfilter-trigger-chevron {
	transform: rotate(-135deg) translate(-3px, -3px);
}

/* Dropdown menu — unchanged from before, looks the same */
.afb-svcfilter-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-md);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
	max-height: 320px;
	overflow-y: auto;
	z-index: 50;
	padding: 6px;
	animation: afb-svcfilter-in 0.16s var(--afb-ease);
}

@keyframes afb-svcfilter-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.afb-svcfilter-opt {
	appearance: none;
	background: transparent;
	border: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--afb-r-sm);
	font: 500 14px/1.3 var(--afb-font-body, inherit);
	color: var(--afb-ink);
	text-align: left;
	cursor: pointer;
	transition: background 0.1s var(--afb-ease), color 0.1s var(--afb-ease);
}

.afb-svcfilter-opt:hover,
.afb-svcfilter-opt:focus {
	background: var(--afb-accent-tint);
	color: var(--afb-accent-deep);
	outline: none;
}

.afb-svcfilter-opt.is-selected {
	background: var(--afb-accent);
	color: #fff;
}

.afb-svcfilter-opt.is-selected:hover {
	background: var(--afb-accent);
}

.afb-svcfilter-opt-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.afb-svcfilter-opt-dur {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--afb-muted);
	font-weight: 400;
}

.afb-svcfilter-opt.is-selected .afb-svcfilter-opt-dur {
	color: rgba(255, 255, 255, 0.85);
}

.afb-svcfilter-opt:hover .afb-svcfilter-opt-dur {
	color: var(--afb-accent-deep);
}

/* Empty state — filter matched nothing */
.afb-svcfilter-empty {
	margin: 18px 0;
	padding: 24px 18px;
	background: var(--afb-cream-soft);
	border-radius: var(--afb-r-md);
	text-align: center;
	font: 400 14px/1.5 var(--afb-font-body, inherit);
	color: var(--afb-muted);
}

.afb-svcfilter-empty-reset {
	appearance: none;
	background: transparent;
	border: none;
	color: var(--afb-accent);
	font: 500 14px/1.5 var(--afb-font-body, inherit);
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

.afb-svcfilter-empty-reset:hover {
	color: var(--afb-accent-deep);
}

.afb-pcards {
	/* Flex-wrap with centred items keeps cards at a sensible width regardless
	 * of count. One visible card centres in the row at half-width; two sit
	 * side by side; three+ wrap naturally. Better than auto-fit grid which
	 * stretches a lone card to the full row — that looked banner-ish rather
	 * than card-ish. */
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.afb-pcards .afb-pcard {
	/* Each card takes "half-row minus half-gap" — so two cards sit perfectly
	 * side by side, one card centres at the same width. flex-basis with
	 * calc keeps the geometry consistent with the previous 2-column grid. */
	flex: 0 1 calc(50% - 7px);
	min-width: 0;
}

@media (max-width: 600px) {
	.afb-pcards .afb-pcard { flex-basis: 100%; }
}

.afb-pcard {
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-md);
	/* No padding on the root — head and body zones manage their own. */
	padding: 0;
	cursor: pointer;
	transition: all 0.25s var(--afb-ease);
	position: relative;
	overflow: hidden;
	text-align: left;
	width: 100%;
	font-family: inherit;
	color: inherit;
	display: flex;
	flex-direction: column;
	/* Soft layered shadow lifts the card off the cream page background.
	 * Tight 1px shadow gives the edge definition; wider 12px gives the
	 * lift. Neutral navy-based shadow so it works against any brand colour. */
	box-shadow: var(--afb-card-shadow);
	/* Gentle fade-in when a card appears (i.e. enters the visible set after
	 * the customer clears a filter or picks a different service). Short and
	 * subtle — meant to soften the swap rather than draw attention. */
	animation: afb-pcard-in 0.22s var(--afb-ease);
}

.afb-pcard:hover {
	box-shadow: var(--afb-card-shadow-hover);
	transform: translateY(-1px);
}

/* The head zone — avatar + name + role on a soft accent-tinted gradient.
 * Gradient fades the tint down toward the body so the divider doesn't
 * feel like a hard cut. Uses --afb-accent-tint which themes correctly
 * for every brand colour (Sky-tinted in default, Plum-tinted for Plum
 * theme, faint grey for Mono, etc.). */
.afb-pcard .afb-pcard-head {
	/* Flat tint background (not a gradient — gradients to white vanish when
	 * the brand colour is pale, e.g. a light custom red). A solid tint always
	 * shows the structural division regardless of how pale the brand colour
	 * is. The tint itself only applies when the widget root has the
	 * .has-tinted-head class — see the override block below. */
	background: var(--afb-surface);
	padding: 20px 20px 14px 20px;
	display: flex;
	gap: 14px;
	align-items: center;
}

.alpaca-flow-booking-root.has-tinted-head .afb-pcard .afb-pcard-head {
	background: var(--afb-accent-tint);
}

/* The body zone — bio, tags, "View full profile" link. White background
 * (inherited via the card root). A faint divider above separates from
 * the head zone — only present when the tinted head is on; otherwise
 * the head→body transition is implicit (both white) and a line would
 * cut the card unnecessarily. */
.afb-pcard .afb-pcard-body {
	padding: 14px 20px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.alpaca-flow-booking-root.has-tinted-head .afb-pcard .afb-pcard-body {
	border-top: 1px solid var(--afb-line);
}

@keyframes afb-pcard-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Single-practitioner hero card ──────────────────────────────────
   Photo column adapts to the practitioner's chosen hero aspect; text
   always sits on the right. Landscape is the exception — a 16:9 photo
   beside text would crush the text column, so it becomes a full-width
   banner with the text stacked below. */
.afb-hero-card {
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-md);
	overflow: hidden;
	margin-bottom: 1.25rem;
	display: grid;
}
.afb-hero-card--square    { grid-template-columns: 220px 1fr; }
.afb-hero-card--portrait  { grid-template-columns: 260px 1fr; }
.afb-hero-card--landscape { grid-template-columns: 1fr; }

.afb-hero-photo {
	background-color: var(--afb-accent-tint);
	background-size: cover;
	background-position: center;
}
.afb-hero-card--square .afb-hero-photo    { min-height: 240px; }
.afb-hero-card--portrait .afb-hero-photo  { min-height: 340px; }
.afb-hero-card--landscape .afb-hero-photo { aspect-ratio: 16 / 9; width: 100%; }

.afb-hero-info {
	padding: 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.afb-hero-name {
	font-family: var(--afb-font-display);
	font-size: 26px;
	font-weight: 600;
	color: var(--afb-ink);
	letter-spacing: -0.01em;
	margin-bottom: 4px;
}
.afb-hero-role {
	font-size: 13px;
	color: var(--afb-muted);
	margin-bottom: 14px;
	letter-spacing: 0.02em;
}
.afb-hero-bio {
	font-size: 14.5px;
	color: var(--afb-ink-soft);
	line-height: 1.65;
	margin: 0 0 16px;
}
.afb-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	padding-top: 14px;
	border-top: 1px solid var(--afb-line-soft);
	font-size: 13px;
	color: var(--afb-ink-soft);
}
.afb-hero-meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
}
.afb-hero-meta-item .afb-icon { color: var(--afb-accent); }
.afb-hero-actions {
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 560px) {
	.afb-hero-card--square,
	.afb-hero-card--portrait { grid-template-columns: 1fr; }
	.afb-hero-card--square .afb-hero-photo,
	.afb-hero-card--portrait .afb-hero-photo { aspect-ratio: 3 / 2; min-height: 0; }
	.afb-hero-info { padding: 1.5rem 1.5rem; }
}

.afb-pcard:focus-visible {
	outline: none;
	border-color: var(--afb-accent);
	box-shadow:
		0 0 0 3px rgba(var(--afb-accent-rgb), 0.20),
		0 4px 12px rgba(26, 42, 56, 0.06);
}
.afb-pcard.is-selected {
	border-color: var(--afb-accent);
	box-shadow:
		0 0 0 1px var(--afb-accent),
		0 2px 4px rgba(26, 42, 56, 0.06),
		0 8px 20px rgba(26, 42, 56, 0.08);
}
.afb-pcard.is-selected::before {
	content: '';
	position: absolute;
	top: 14px; right: 14px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--afb-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 13px;
	background-position: center;
	background-repeat: no-repeat;
}
.afb-avatar {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--afb-accent-tint);
	color: var(--afb-accent-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: var(--afb-fs-17);
	font-family: var(--afb-font-display);
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.afb-avatar.has-photo { color: transparent; }
.afb-pcard-name {
	margin: 0;
	font-family: var(--afb-font-display);
	font-size: var(--afb-fs-17);
	font-weight: 600;
	color: var(--afb-navy);
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.afb-pcard-role {
	margin-top: 2px;
	font-size: var(--afb-fs-12);
	color: var(--afb-muted);
	letter-spacing: 0.02em;
}
.afb-pcard-bio {
	font-size: 13.5px;
	color: var(--afb-ink-soft);
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.afb-pcard-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}
.afb-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.afb-tag {
	background: var(--afb-cream-soft);
	color: var(--afb-ink-soft);
	font-size: 11.5px;
	font-weight: 500;
	padding: 3px 9px;
	border-radius: 999px;
	letter-spacing: 0.01em;
}
.afb-pcard-profile-link {
	font-family: inherit;
	font-size: var(--afb-fs-12);
	color: var(--afb-accent-soft);
	text-decoration: none;
	cursor: pointer;
	padding: 4px 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	transition: color 0.15s var(--afb-ease);
}
/* Armoured against host themes that set a global `a { color }` — the
   doubled root class + :link/:visited/:hover keeps the widget accent. */
.alpaca-flow-booking-root.alpaca-flow-booking-root a.afb-pcard-profile-link,
.alpaca-flow-booking-root.alpaca-flow-booking-root a.afb-pcard-profile-link:link,
.alpaca-flow-booking-root.alpaca-flow-booking-root a.afb-pcard-profile-link:visited {
	color: var(--afb-accent-soft);
}
.alpaca-flow-booking-root.alpaca-flow-booking-root a.afb-pcard-profile-link:hover {
	color: var(--afb-accent-deep);
}

/* "Selected" confirmation line below practitioner cards */
.afb-pcards-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}
.afb-selected-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--afb-fs-13);
	color: var(--afb-muted);
}
.afb-selected-line.is-active {
	color: var(--afb-accent);
}

/* ── Service cards ──────────────────────────────────────────────────── */

.afb-scards {
	display: grid;
	gap: 12px;
}
.afb-scard {
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-md);
	padding: 20px 22px;
	cursor: pointer;
	transition: all 0.2s var(--afb-ease);
	text-align: left;
	width: 100%;
	font-family: inherit;
	color: inherit;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.afb-scard:hover {
	border-color: var(--afb-muted);
	transform: translateY(-1px);
	box-shadow: var(--afb-shadow-sm);
}
.afb-scard:focus-visible {
	outline: none;
	border-color: var(--afb-accent);
	box-shadow: var(--afb-focus);
}
.afb-scard-body { flex: 1; min-width: 0; }
.afb-scard-name {
	margin: 0;
	font-family: var(--afb-font-display);
	font-size: var(--afb-fs-17);
	font-weight: 600;
	color: var(--afb-navy);
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.afb-scard-meta {
	margin-top: 4px;
	font-size: var(--afb-fs-13);
	color: var(--afb-muted);
}
.afb-scard-desc {
	margin-top: 10px;
	font-size: var(--afb-fs-13);
	color: var(--afb-ink-soft);
	line-height: 1.5;
}
.afb-scard-price {
	flex-shrink: 0;
	text-align: right;
}
.afb-scard-price-main {
	font-family: var(--afb-font-display);
	font-size: var(--afb-fs-21);
	font-weight: 600;
	color: var(--afb-navy);
	letter-spacing: -0.01em;
}
.afb-scard-price-meta {
	font-size: var(--afb-fs-12);
	color: var(--afb-muted);
	margin-top: 2px;
}

/* ── When-step layout ──────────────────────────────────────────────── */

.afb-when-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 14px;
}

@media (max-width: 720px) {
	.afb-when-grid { grid-template-columns: 1fr; }
}

.afb-calendar,
.afb-slots-section {
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-md);
	padding: 20px;
	box-shadow: var(--afb-shadow-sm);
}

.afb-cal-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
/* Slots header stacks — the day name on its own line, the timezone
   quietly beneath it (rather than crammed alongside a wrapping date). */
.afb-slots-head {
	margin-bottom: 16px;
}
.afb-cal-month, .afb-slots-day {
	font-family: var(--afb-font-display);
	font-size: var(--afb-fs-17);
	font-weight: 600;
	color: var(--afb-navy);
	letter-spacing: -0.01em;
}
.afb-slots-day { line-height: 1.25; }
.afb-cal-nav { display: flex; gap: 4px; }
.afb-cal-nav-btn {
	width: 30px; height: 30px;
	border: 1px solid var(--afb-line);
	background: var(--afb-surface);
	border-radius: var(--afb-r-sm);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--afb-muted);
	transition: all 0.2s var(--afb-ease);
	font-family: inherit;
}
.afb-cal-nav-btn:hover:not(:disabled) {
	border-color: var(--afb-accent);
	color: var(--afb-accent);
}
.afb-cal-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.afb-cal-dow-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-bottom: 4px;
}
.afb-cal-dow {
	text-align: center;
	font-size: 10px;
	color: var(--afb-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 6px 0;
	font-weight: 600;
	font-family: var(--afb-font-body);
}

.afb-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.afb-cal-day {
	aspect-ratio: 1;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--afb-r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--afb-font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--afb-ink);
	cursor: pointer;
	transition: all 0.15s var(--afb-ease);
	position: relative;
}
.afb-cal-day:hover:not(:disabled) { background: var(--afb-cream-soft); }
.afb-cal-day.is-today { font-weight: 700; }
.afb-cal-day.is-today:not(.is-selected) { color: var(--afb-accent); }
.afb-cal-day.is-available::after {
	content: '';
	position: absolute;
	bottom: 4px;
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--afb-accent);
}
.afb-cal-day.is-selected {
	background: var(--afb-accent-soft);
	color: var(--afb-cream);
	border-color: var(--afb-accent-soft);
}
.afb-cal-day.is-selected::after { background: var(--afb-cream); }
.afb-cal-day:disabled, .afb-cal-day.is-unavailable {
	color: var(--afb-line);
	cursor: not-allowed;
	background: transparent;
}

.afb-slots-tz {
	display: block;
	margin-top: 3px;
	font-size: var(--afb-fs-12);
	color: var(--afb-muted);
}
.afb-slots-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
}
.afb-slot {
	padding: 10px 8px;
	border: 1px solid var(--afb-line);
	background: var(--afb-surface);
	border-radius: var(--afb-r-sm);
	font-family: var(--afb-font-body);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	color: var(--afb-ink);
	text-align: center;
	transition: all 0.15s var(--afb-ease);
}
.afb-slot:hover {
	border-color: var(--afb-accent);
	color: var(--afb-accent);
}
.afb-slot.is-selected {
	background: var(--afb-accent-soft);
	border-color: var(--afb-accent-soft);
	color: var(--afb-cream);
}
.afb-slots-empty {
	padding: 28px 16px;
	text-align: center;
	color: var(--afb-muted);
	font-style: italic;
	font-size: var(--afb-fs-13);
	background: var(--afb-cream-soft);
	border-radius: var(--afb-r-sm);
}
.afb-slots-placeholder {
	padding: 60px 16px;
	text-align: center;
	color: var(--afb-muted);
	font-size: var(--afb-fs-13);
}

/* Meeting format chip (shown above calendar on When step) */
.afb-meeting-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding: 14px 16px;
	background: var(--afb-cream-soft);
	border: 1px solid var(--afb-line-soft);
	border-radius: var(--afb-r-md);
	color: var(--afb-ink-soft);
	font-size: var(--afb-fs-13);
}
.afb-meeting-chip-icon {
	display: inline-flex;
	color: var(--afb-accent);
}
.afb-meeting-chip strong {
	color: var(--afb-navy);
	font-weight: 600;
}

/* ── Form ───────────────────────────────────────────────────────────── */

.afb-form { display: grid; gap: 18px; max-width: 560px; }
.afb-field { display: block; }
.afb-label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--afb-fs-13);
	font-weight: 500;
	color: var(--afb-ink);
}
.afb-label-required::after {
	content: ' *';
	color: var(--afb-accent);
}
.afb-input, .afb-textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: var(--afb-fs-15);
	color: var(--afb-ink);
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-sm);
	line-height: 1.4;
	transition: all 0.15s var(--afb-ease);
}
.afb-input:focus, .afb-textarea:focus {
	outline: none;
	border-color: var(--afb-accent);
	box-shadow: var(--afb-focus);
}
.afb-textarea { min-height: 100px; resize: vertical; }
.afb-help {
	margin: 6px 0 0;
	font-size: var(--afb-fs-12);
	color: var(--afb-muted);
	font-style: italic;
}
.afb-field-error {
	margin: 6px 0 0;
	font-size: var(--afb-fs-12);
	color: var(--afb-error);
}

/* ── Actions ───────────────────────────────────────────────────────── */

.afb-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--afb-line-soft);
}

/* Sticky action bar — date/time step. Pinned to the viewport bottom so
   Continue is reachable from anywhere in a long slot list. position:sticky
   keeps it inside the widget's flow (it won't sit over a site footer once
   scrolled past the widget). */
.afb-sticky-bar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	margin: 20px -20px 0;       /* bleed to the widget's edges */
	padding: 0 20px;
	pointer-events: none;        /* inner element re-enables — lets edge gutters click through */
}
.afb-sticky-bar-inner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-md);
	box-shadow: var(--afb-shadow-lg);
}
.afb-sticky-bar-info {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--afb-fs-15);
	color: var(--afb-ink);
	min-width: 0;
}
.afb-sticky-bar-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 50%;
	background: var(--afb-accent-tint);
	color: var(--afb-accent-soft);
}
.afb-sticky-bar-sub {
	color: var(--afb-muted);
	font-weight: 400;
}
@media (max-width: 560px) {
	.afb-sticky-bar-inner { padding: 10px 12px; gap: 10px; }
	.afb-sticky-bar-sub { display: none; }   /* keep the bar compact on phones */
}

.afb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	font-family: inherit;
	font-size: var(--afb-fs-15);
	font-weight: 500;
	line-height: 1.4;
	color: var(--afb-navy);
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-sm);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s var(--afb-ease);
}
.afb-btn:hover {
	background: var(--afb-cream-soft);
	border-color: var(--afb-muted);
}
.afb-btn:focus-visible {
	outline: none;
	box-shadow: var(--afb-focus);
}
.afb-btn-primary {
	background: var(--afb-accent-soft);
	border-color: var(--afb-accent-soft);
	color: var(--afb-cream);
	font-weight: 600;
}
.afb-btn-primary:hover {
	background: var(--afb-accent-deep);
	border-color: var(--afb-accent-deep);
	color: var(--afb-cream);
}
.alpaca-flow-booking-root.alpaca-flow-booking-root a.afb-btn-primary,
.alpaca-flow-booking-root.alpaca-flow-booking-root a.afb-btn-primary:hover,
.alpaca-flow-booking-root.alpaca-flow-booking-root a.afb-btn-primary:visited {
	color: var(--afb-cream);
	text-decoration: none;
}
.afb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.afb-btn-back {
	background: transparent;
	border: none;
	padding: 8px 0;
	color: var(--afb-muted);
	font-size: var(--afb-fs-13);
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 0.15s var(--afb-ease);
}
.afb-btn-back:hover { color: var(--afb-navy); }
.afb-btn-back:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Sidebar ───────────────────────────────────────────────────────── */

.afb-summary-eyebrow {
	font-size: var(--afb-fs-10);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--afb-accent);
	margin-bottom: 6px;
	font-family: var(--afb-font-body);
}
.afb-summary-title {
	margin: 0 0 18px;
	font-family: var(--afb-font-display);
	font-size: var(--afb-fs-21);
	font-weight: 600;
	color: var(--afb-navy);
	letter-spacing: -0.015em;
}
.afb-summary-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 0;
	border-top: 1px solid var(--afb-line-soft);
}
.afb-summary-row:first-of-type { border-top: none; padding-top: 0; }
.afb-summary-row-icon {
	color: var(--afb-muted);
	flex-shrink: 0;
	padding-top: 2px;
}
.afb-summary-row-body { flex: 1; min-width: 0; }
.afb-summary-label {
	font-size: var(--afb-fs-10);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--afb-muted);
	margin-bottom: 6px;
	font-family: var(--afb-font-body);
}
.afb-summary-value {
	font-size: var(--afb-fs-15);
	color: var(--afb-navy);
	font-weight: 500;
	font-family: var(--afb-font-body);
}
.afb-summary-value-sub {
	font-size: var(--afb-fs-12);
	color: var(--afb-muted);
	margin-top: 3px;
	font-weight: 400;
}
.afb-summary-empty {
	font-size: var(--afb-fs-12);
	color: var(--afb-subtle);
	font-style: italic;
	padding: 4px 0;
}

/* Breakdown rows at the bottom of the sidebar */
.afb-summary-breakdown {
	margin-top: 18px;
	padding: 16px 0 0;
	border-top: 1px solid var(--afb-line);
}
.afb-summary-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 6px 0;
	font-size: var(--afb-fs-13);
	color: var(--afb-ink-soft);
}
.afb-summary-line-meta {
	font-size: 11.5px;
	color: var(--afb-muted);
	margin-left: 4px;
}
.afb-summary-total {
	padding: 14px 0 0;
	margin-top: 8px;
	border-top: 1px solid var(--afb-line);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.afb-summary-total-label {
	font-size: var(--afb-fs-13);
	font-weight: 500;
	color: var(--afb-navy);
}
.afb-summary-total-value {
	font-family: var(--afb-font-display);
	font-size: var(--afb-fs-21);
	font-weight: 700;
	color: var(--afb-navy);
	letter-spacing: -0.015em;
}

/* ── Success ───────────────────────────────────────────────────────── */

.afb-success {
	text-align: center;
	padding: 60px 24px;
}
.afb-success-rule {
	width: 48px;
	height: 2px;
	background: var(--afb-accent);
	margin: 0 auto 20px;
}
.afb-success-eyebrow {
	font-size: var(--afb-fs-10);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--afb-accent);
	margin-bottom: 14px;
	font-family: var(--afb-font-body);
}
.afb-success-title {
	margin: 0 0 20px;
	font-family: var(--afb-font-display);
	font-size: var(--afb-fs-34);
	font-weight: 700;
	color: var(--afb-navy);
	letter-spacing: -0.025em;
	line-height: 1.1;
}
.afb-success-body { max-width: 480px; margin: 0 auto; color: var(--afb-ink-soft); }
.afb-success-body p { margin: 0 0 14px; font-size: var(--afb-fs-15); line-height: 1.6; }
.afb-success-home {
	display: inline-flex;
	margin-top: 18px;
	text-decoration: none;
}
.afb-success-summary {
	max-width: 440px;
	margin: 28px auto;
	padding: 24px;
	background: var(--afb-surface);
	border: 1px solid var(--afb-line);
	border-radius: var(--afb-r-md);
	text-align: left;
	box-shadow: var(--afb-shadow-sm);
}

/* ── Error banner ─────────────────────────────────────────────────── */

.afb-error-banner {
	margin-bottom: 20px;
	padding: 14px 18px;
	background: var(--afb-error-bg);
	border: 1px solid var(--afb-error);
	border-radius: var(--afb-r-sm);
	color: var(--afb-error);
	font-size: var(--afb-fs-13);
}

/* ── Spinner ──────────────────────────────────────────────────────── */

.afb-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: afb-spin 0.7s linear infinite;
	vertical-align: middle;
}
@keyframes afb-spin {
	to { transform: rotate(360deg); }
}

/* ── High-specificity font overrides ─────────────────────────────────
 *
 * Themes and page builders (looking at you, Breakdance) often set
 * font-family directly on heading elements and form controls with
 * selectors that beat ours via specificity. The doubled class
 * .alpaca-flow-booking-root.alpaca-flow-booking-root gives every
 * descendant rule double-class specificity (0,2,0) which beats just
 * about every realistic theme rule without resorting to !important.
 */

.alpaca-flow-booking-root.alpaca-flow-booking-root,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-eyebrow,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-subtitle,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-cal-dow,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-cal-day,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-slot,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-pcard-bio,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-tag,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-scard-meta,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-scard-desc,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-scard-price-meta,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-meeting-chip,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-pcard-role,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-summary-eyebrow,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-summary-label,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-summary-value,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-summary-value-sub,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-summary-empty,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-summary-line,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-summary-total-label,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-step-dot,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-step-dot-num,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-input,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-textarea,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-label,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-help,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-btn,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-btn-back,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-cal-nav-btn,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-pcard-profile-link,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-selected-line {
	font-family: var(--afb-font-body);
}

.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-title,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-pcard-name,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-scard-name,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-scard-price-main,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-cal-month,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-slots-day,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-summary-title,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-summary-total-value,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-success-title,
.alpaca-flow-booking-root.alpaca-flow-booking-root .afb-avatar {
	font-family: var(--afb-font-display);
}

/* ─── Shadow consistency across all card-like surfaces ──────────────────
 * The practitioner cards have a soft layered shadow that makes them feel
 * substantial. Apply the same lift to every other card-shaped surface so
 * the whole booking flow has consistent visual weight. */
.afb-scard,
.afb-calendar,
.afb-slots-section,
.afb-sidebar,
.afb-svcfilter-trigger {
	box-shadow: var(--afb-card-shadow);
}

.afb-scard:hover,
.afb-svcfilter-trigger:hover {
	box-shadow: var(--afb-card-shadow-hover);
}