/**
 * Blanche Nail Boutique — booking experience.
 *
 * Every rule is scoped beneath .sbk-booking-app so the interface is independent
 * of whatever theme is active, in both directions: the theme cannot restyle the
 * booking flow, and the booking flow cannot leak into the theme.
 *
 * Colours, radii and type come from CSS custom properties written server-side
 * from the CMS design settings. The fallbacks here are the shipped defaults, so
 * the file is still coherent if the property block fails to load.
 */

/* -------------------------------------------------------------------------
 * Tokens and reset
 * ---------------------------------------------------------------------- */

.sbk-booking-app {
	/* Fallbacks; the server-generated block overrides these. */
	--sbk-primary: #2f2b28;
	--sbk-secondary: #6f6459;
	--sbk-accent: #b8975f;
	--sbk-accent-soft: #f7f1e6;
	--sbk-accent-line: #dfcaa4;
	--sbk-accent-ink: #ffffff;
	--sbk-page-bg: #faf7f2;
	--sbk-card-bg: #ffffff;
	--sbk-text: #2f2b28;
	--sbk-muted: #6f6459;
	--sbk-border: #e5ded3;
	--sbk-radius: 14px;
	--sbk-btn-radius: 10px;
	--sbk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sbk-font-heading: Georgia, "Times New Roman", serif;

	--sbk-danger: #a8291f;
	--sbk-danger-soft: #fdf2f0;
	--sbk-success: #1f6b4a;
	--sbk-success-soft: #eef6f1;

	--sbk-shadow-sm: 0 1px 2px rgba(47, 43, 40, 0.05);
	--sbk-shadow-md: 0 2px 10px rgba(47, 43, 40, 0.07);
	--sbk-shadow-lg: 0 12px 40px rgba(47, 43, 40, 0.16);

	--sbk-gap: 16px;
	--sbk-space: 24px;
	--sbk-max: 1120px;

	box-sizing: border-box;
	color: var(--sbk-text);
	font-family: var(--sbk-font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	text-align: left;
}

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

.sbk-booking-app p,
.sbk-booking-app h1,
.sbk-booking-app h2,
.sbk-booking-app h3,
.sbk-booking-app h4,
.sbk-booking-app ul,
.sbk-booking-app ol,
.sbk-booking-app figure {
	margin: 0;
	padding: 0;
}

.sbk-booking-app ul,
.sbk-booking-app ol {
	list-style: none;
}

/*
 * `:where()` keeps this reset at zero specificity, so a component class like
 * `.sbk-btn` reliably wins the colour. A plain `.sbk-booking-app button`
 * selector is (0,1,1) and would beat `.sbk-btn` at (0,1,0) — which is exactly
 * how the primary button ended up dark text on a dark fill.
 */
:where(.sbk-booking-app) button {
	font: inherit;
	color: inherit;
	margin: 0;
	background: none;
	border: 0;
}

.sbk-booking-app h1,
.sbk-booking-app h2,
.sbk-booking-app h3 {
	font-family: var(--sbk-font-heading);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.sbk-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: block;
}

/* Visible only to assistive technology. */
.sbk-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* One focus treatment everywhere, so nothing is ever focused invisibly. */
.sbk-booking-app :focus-visible {
	outline: 2px solid var(--sbk-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * Shell
 * ---------------------------------------------------------------------- */

/*
 * Break out of a narrow theme container so the booking flow can use the width
 * it was designed for.
 *
 * Offset rather than negative margins: a block theme's constrained-layout rule
 * sets `margin-left` on its children and wins the cascade, so a margin-based
 * breakout silently half-applies and leaves the app hanging off the right edge.
 * `left` on a relatively positioned box is not something themes touch.
 *
 * Deliberately not `transform: translateX(-50%)`, which would make this element
 * the containing block for `position: fixed` descendants and trap the modal
 * inside the app instead of the viewport.
 *
 * `--sbk-sbw` is the scrollbar width, measured by the app: `100vw` includes the
 * classic scrollbar, and without subtracting it the page gains a horizontal
 * scrollbar exactly that wide.
 */
.sbk-booking-app {
	background: var(--sbk-page-bg);
	position: relative;
	width: calc(100vw - var(--sbk-sbw, 0px));
	max-width: calc(100vw - var(--sbk-sbw, 0px));
	left: calc(50% - ((100vw - var(--sbk-sbw, 0px)) / 2));
	padding-bottom: 56px;
	overflow-x: clip;
}

.sbk-shell {
	max-width: var(--sbk-max);
	margin: 0 auto;
	padding: 0 20px;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.sbk-header {
	background: var(--sbk-card-bg);
	border-bottom: 1px solid var(--sbk-border);
}

.sbk-header__inner {
	max-width: var(--sbk-max);
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: var(--sbk-gap);
	flex-wrap: wrap;
}

.sbk-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.sbk-brand__logo {
	max-height: 44px;
	width: auto;
	display: block;
}

.sbk-brand__name {
	font-family: var(--sbk-font-heading);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0;
	white-space: nowrap;
}

.sbk-brand__tag {
	display: block;
	font-family: var(--sbk-font);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sbk-muted);
	font-weight: 500;
}

.sbk-header__contact {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 0.85rem;
	color: var(--sbk-muted);
}

.sbk-header__item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.sbk-header__item .sbk-icon {
	width: 16px;
	height: 16px;
	color: var(--sbk-accent);
}

.sbk-header__item address {
	font-style: normal;
	white-space: pre-line;
	line-height: 1.35;
}

.sbk-header__phone {
	color: var(--sbk-text);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.sbk-header__phone:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Page title and progress
 * ---------------------------------------------------------------------- */

.sbk-intro {
	padding: 28px 0 4px;
}

.sbk-intro__title {
	font-size: 1.9rem;
	margin-bottom: 6px;
}

.sbk-intro__subtitle {
	color: var(--sbk-muted);
	max-width: 60ch;
}

.sbk-progress {
	display: flex;
	gap: 6px;
	margin: 20px 0 var(--sbk-space);
	padding: 0;
	flex-wrap: wrap;
}

.sbk-progress__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	color: var(--sbk-muted);
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	background: transparent;
	white-space: nowrap;
}

.sbk-progress__dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--sbk-border);
	display: grid;
	place-items: center;
	font-size: 0.7rem;
	font-weight: 600;
	background: var(--sbk-card-bg);
	flex: 0 0 auto;
}

.sbk-progress__item--done .sbk-progress__dot {
	background: var(--sbk-accent-soft);
	border-color: var(--sbk-accent-line);
	color: var(--sbk-primary);
}

.sbk-progress__item[aria-current='step'] {
	background: var(--sbk-card-bg);
	color: var(--sbk-text);
	font-weight: 600;
	box-shadow: var(--sbk-shadow-sm);
}

.sbk-progress__item[aria-current='step'] .sbk-progress__dot {
	background: var(--sbk-accent);
	border-color: var(--sbk-accent);
	color: var(--sbk-accent-ink);
}

/* -------------------------------------------------------------------------
 * Layout: main column + sticky summary rail
 * ---------------------------------------------------------------------- */

.sbk-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 336px;
	gap: var(--sbk-space);
	align-items: start;
}

.sbk-layout--wide {
	grid-template-columns: minmax(0, 1fr);
}

.sbk-main {
	min-width: 0;
}

.sbk-rail {
	position: sticky;
	top: 20px;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * Panels and cards
 * ---------------------------------------------------------------------- */

.sbk-panel {
	background: var(--sbk-card-bg);
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-radius);
	box-shadow: var(--sbk-shadow-sm);
	padding: var(--sbk-space);
}

.sbk-panel+.sbk-panel {
	margin-top: var(--sbk-gap);
}

.sbk-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.sbk-panel__title {
	font-size: 1.25rem;
}

.sbk-panel__hint {
	color: var(--sbk-muted);
	font-size: 0.9rem;
	margin-bottom: var(--sbk-gap);
}

.sbk-panel__count {
	font-size: 0.85rem;
	color: var(--sbk-muted);
}

/* -------------------------------------------------------------------------
 * Search
 * ---------------------------------------------------------------------- */

.sbk-search {
	position: relative;
	margin-bottom: var(--sbk-gap);
}

.sbk-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sbk-muted);
	pointer-events: none;
}

.sbk-search__input {
	width: 100%;
	padding: 12px 40px 12px 44px;
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-btn-radius);
	background: var(--sbk-page-bg);
	font: inherit;
	color: inherit;
	min-height: 46px;
}

.sbk-search__input::placeholder {
	color: var(--sbk-muted);
}

.sbk-search__clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--sbk-muted);
	cursor: pointer;
	border-radius: 50%;
}

.sbk-search__clear:hover {
	background: var(--sbk-page-bg);
	color: var(--sbk-text);
}

/* -------------------------------------------------------------------------
 * Category accordion
 * ---------------------------------------------------------------------- */

.sbk-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sbk-cat {
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-radius);
	background: var(--sbk-card-bg);
	overflow: hidden;
}

.sbk-cat--open {
	border-color: var(--sbk-accent-line);
	box-shadow: var(--sbk-shadow-sm);
}

.sbk-cat__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	min-height: 60px;
}

.sbk-cat__toggle:hover {
	background: var(--sbk-page-bg);
}

.sbk-cat__badge {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--sbk-accent-soft);
	color: var(--sbk-primary);
	flex: 0 0 auto;
}

.sbk-cat__text {
	min-width: 0;
	flex: 1 1 auto;
}

.sbk-cat__name {
	font-family: var(--sbk-font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	display: block;
}

.sbk-cat__meta {
	font-size: 0.82rem;
	color: var(--sbk-muted);
}

.sbk-cat__chevron {
	color: var(--sbk-muted);
	transform: rotate(90deg);
	transition: transform 0.18s ease;
	flex: 0 0 auto;
}

.sbk-cat--open .sbk-cat__chevron {
	transform: rotate(-90deg);
}

/*
 * Smooth open/close via an animatable grid row. The body always lives in the
 * DOM inside .sbk-cat__reveal, which animates from 0fr (collapsed) to 1fr
 * (expanded) — no measured max-height, no layout jump, and it works for any
 * number of services. The inner element hides the overflow while it collapses.
 */
.sbk-cat__reveal {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 200ms ease;
}

.sbk-cat--open .sbk-cat__reveal {
	grid-template-rows: 1fr;
}

.sbk-cat__reveal>.sbk-cat__body {
	overflow: hidden;
	min-height: 0;
}

.sbk-cat__body {
	border-top: 1px solid var(--sbk-border);
	padding: 0 10px;
}

.sbk-cat--open .sbk-cat__body {
	padding: 6px 10px 10px;
}

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

/* -------------------------------------------------------------------------
 * Service rows
 * ---------------------------------------------------------------------- */

.sbk-service {
	display: flex;
	align-items: center;
	gap: var(--sbk-gap);
	padding: 14px 10px;
	border-bottom: 1px solid var(--sbk-border);
}

.sbk-service:last-child {
	border-bottom: 0;
}

.sbk-service__text {
	min-width: 0;
	flex: 1 1 auto;
}

.sbk-service__name {
	font-weight: 600;
	display: block;
	overflow-wrap: anywhere;
}

.sbk-service__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: var(--sbk-muted);
	margin-top: 3px;
}

.sbk-service__meta .sbk-icon {
	width: 14px;
	height: 14px;
}

.sbk-service__price {
	font-weight: 600;
	color: var(--sbk-text);
	white-space: nowrap;
}

.sbk-service__cat {
	font-size: 0.78rem;
	color: var(--sbk-muted);
}

.sbk-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--sbk-accent-soft);
	color: var(--sbk-primary);
	font-weight: 600;
	white-space: nowrap;
}

.sbk-tag--muted {
	background: var(--sbk-page-bg);
	color: var(--sbk-muted);
	text-transform: none;
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.sbk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 11px 22px;
	border-radius: var(--sbk-btn-radius);
	border: 1px solid transparent;
	background: var(--sbk-primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	text-decoration: none;
	line-height: 1.2;
}

.sbk-btn:hover:not([disabled]) {
	background: var(--sbk-secondary);
}

.sbk-btn:active:not([disabled]) {
	transform: translateY(1px);
}

.sbk-btn[disabled],
.sbk-btn[aria-disabled='true'] {
	opacity: 0.45;
	cursor: not-allowed;
}

.sbk-btn--ghost {
	background: transparent;
	color: var(--sbk-text);
	border-color: var(--sbk-border);
}

.sbk-btn--ghost:hover:not([disabled]) {
	background: var(--sbk-page-bg);
	border-color: var(--sbk-muted);
}

.sbk-btn--accent {
	background: var(--sbk-accent);
	color: var(--sbk-accent-ink);
}

.sbk-btn--accent:hover:not([disabled]) {
	background: var(--sbk-accent);
	filter: brightness(0.94);
}

.sbk-btn--block {
	width: 100%;
}

.sbk-btn--sm {
	min-height: 38px;
	padding: 8px 14px;
	font-size: 0.87rem;
}

/* The compact add/added control on a service row. */
.sbk-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 92px;
	min-height: 44px;
	padding: 8px 14px;
	border-radius: var(--sbk-btn-radius);
	border: 1px solid var(--sbk-border);
	background: var(--sbk-card-bg);
	color: var(--sbk-text);
	font-weight: 600;
	font-size: 0.87rem;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	flex: 0 0 auto;
}

.sbk-add:hover {
	border-color: var(--sbk-accent-line);
	background: var(--sbk-accent-soft);
}

.sbk-add[aria-pressed='true'] {
	background: var(--sbk-accent);
	border-color: var(--sbk-accent);
	color: var(--sbk-accent-ink);
}

.sbk-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: var(--sbk-space);
	flex-wrap: wrap;
}

.sbk-actions--end {
	justify-content: flex-end;
}

/* Service step: a running count of what is chosen, then Continue. The count sits
   to the left, Continue to the right, so multi-select stays legible. */
.sbk-actions--service {
	position: sticky;
	bottom: 0;
	background: var(--sbk-card-bg);
	padding-top: 12px;
	z-index: 2;
}

.sbk-actions__count {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--sbk-muted);
}

/* -------------------------------------------------------------------------
 * Summary rail
 * ---------------------------------------------------------------------- */

.sbk-summary {
	background: var(--sbk-card-bg);
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-radius);
	box-shadow: var(--sbk-shadow-md);
	overflow: hidden;
}

.sbk-summary__head {
	padding: 16px 18px;
	border-bottom: 1px solid var(--sbk-border);
	display: flex;
	align-items: center;
	gap: 10px;
}

.sbk-summary__head .sbk-icon {
	color: var(--sbk-accent);
}

.sbk-summary__title {
	font-size: 1rem;
	margin: 0;
}

.sbk-summary__body {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sbk-summary__empty {
	color: var(--sbk-muted);
	font-size: 0.9rem;
}

.sbk-line {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	justify-content: space-between;
}

.sbk-line__text {
	min-width: 0;
}

.sbk-line__name {
	font-weight: 600;
	display: block;
	overflow-wrap: anywhere;
}

.sbk-line__meta {
	font-size: 0.82rem;
	color: var(--sbk-muted);
}

.sbk-line__price {
	font-weight: 600;
	white-space: nowrap;
}

/* Price above, Remove beneath it: the two never compete for the same row, so a
   long service name can wrap without pushing the control off the edge. */
.sbk-line__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * Removing a selected service
 *
 * A worded control, not an icon alone. It is quiet by default — removing is not
 * the thing we want a customer to do — and only takes on the danger colour when
 * they reach for it.
 * ---------------------------------------------------------------------- */

.sbk-remove {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	/* Comfortably tappable without shouting on a summary line. */
	min-height: 32px;
	padding: 4px 8px;
	margin: -4px -8px;
	border-radius: var(--sbk-btn-radius);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--sbk-muted);
	background: transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.sbk-remove:hover,
.sbk-remove:focus-visible {
	color: var(--sbk-danger);
	background: var(--sbk-danger-soft);
}

.sbk-remove .sbk-icon {
	width: 13px;
	height: 13px;
}

/* -------------------------------------------------------------------------
 * The chosen services, on Your appointment and Review
 * ---------------------------------------------------------------------- */

.sbk-picked {
	display: grid;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
}

.sbk-picked__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--sbk-border);
}

.sbk-picked__item:last-child {
	border-bottom: 0;
}

.sbk-picked__text {
	min-width: 0;
}

.sbk-picked__name {
	display: block;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.sbk-picked__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: var(--sbk-muted);
}

/* On a phone the control earns its own row rather than squeezing the name. */
@media (max-width: 520px) {
	.sbk-picked__item {
		flex-wrap: wrap;
	}

	/* Match the app's own touch-target standard, not a smaller one just because
	   this control is secondary. */
	.sbk-remove {
		min-height: 44px;
		padding: 10px 12px;
		margin: 0;
	}
}

/* The undo offer, in the live region. */
.sbk-status--undo {
	background: var(--sbk-accent-soft);
	border: 1px solid var(--sbk-accent-line);
	border-radius: var(--sbk-btn-radius);
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.sbk-undo {
	margin-left: auto;
	min-height: 36px;
	padding: 6px 14px;
	border-radius: var(--sbk-btn-radius);
	border: 1px solid var(--sbk-accent-line);
	background: var(--sbk-card-bg);
	color: var(--sbk-text);
	font-weight: 600;
	font-size: 0.87rem;
	cursor: pointer;
}

.sbk-undo:hover {
	background: var(--sbk-accent);
	color: var(--sbk-accent-ink);
	border-color: var(--sbk-accent);
}

.sbk-line--addon .sbk-line__name {
	font-weight: 500;
	font-size: 0.93rem;
}

.sbk-line--addon .sbk-line__name::before {
	content: '+ ';
	color: var(--sbk-accent);
}

.sbk-summary__rule {
	border: 0;
	border-top: 1px solid var(--sbk-border);
	margin: 0;
}

.sbk-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-weight: 700;
}

.sbk-summary__note {
	font-size: 0.8rem;
	color: var(--sbk-muted);
}

.sbk-summary__foot {
	padding: 0 18px 18px;
}

.sbk-edit {
	background: none;
	border: 0;
	padding: 2px 4px;
	color: var(--sbk-accent);
	font-size: 0.83rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sbk-edit:hover {
	color: var(--sbk-primary);
}

/* -------------------------------------------------------------------------
 * Staff
 * ---------------------------------------------------------------------- */

.sbk-staff-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

.sbk-staff {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-radius);
	background: var(--sbk-card-bg);
	text-align: left;
	cursor: pointer;
	width: 100%;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sbk-staff:hover {
	border-color: var(--sbk-accent-line);
}

.sbk-staff[aria-pressed='true'] {
	border-color: var(--sbk-accent);
	background: var(--sbk-accent-soft);
}

.sbk-staff__text {
	min-width: 0;
	flex: 1 1 auto;
}

.sbk-staff__name {
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sbk-staff__meta {
	font-size: 0.83rem;
	color: var(--sbk-muted);
	display: block;
	margin-top: 2px;
}

/* A small availability dot beside the staff name. The colour carries the state;
   the meaning is also in a visually-hidden label, so it is never colour alone,
   but there is no "Available for the service" sentence on screen. */
.sbk-staff__dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sbk-success);
	box-shadow: 0 0 0 3px var(--sbk-success-soft);
}

.sbk-staff__dot--none {
	background: var(--sbk-muted);
	box-shadow: 0 0 0 3px var(--sbk-page-bg);
}

.sbk-staff-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.sbk-heart {
	width: 48px;
	flex: 0 0 auto;
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-radius);
	background: var(--sbk-card-bg);
	color: var(--sbk-muted);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.sbk-heart:hover {
	color: var(--sbk-accent);
	border-color: var(--sbk-accent-line);
}

.sbk-heart .sbk-icon {
	width: 22px;
	height: 22px;
}

.sbk-heart[aria-pressed='true'] {
	color: var(--sbk-accent-ink);
	background: var(--sbk-accent);
	border-color: var(--sbk-accent);
}

.sbk-heart[aria-pressed='true'] .sbk-icon {
	fill: currentColor;
}

.sbk-lock {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: var(--sbk-gap);
	padding: 12px 14px;
	border-radius: var(--sbk-btn-radius);
	background: var(--sbk-accent-soft);
	border: 1px solid var(--sbk-accent-line);
	font-size: 0.88rem;
}

.sbk-lock .sbk-icon {
	color: var(--sbk-accent);
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * Calendar and slots
 * ---------------------------------------------------------------------- */

.sbk-when {
	display: grid;
	grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
	gap: var(--sbk-space);
	align-items: start;
}

/* The calendar is shorter than the slot list on desktop, so it stays put while
   the slots scroll past it. This only applies to the two-column layout; on a
   single column (tablet and phone) a sticky calendar would pin itself and let
   the sections below scroll underneath it — the iPhone overlap. It is made
   sticky only at the desktop breakpoint, below. */
.sbk-cal {
	position: static;
}

@media (min-width: 1024px) {
	.sbk-cal {
		position: sticky;
		top: 20px;
	}
}

.sbk-cal__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.sbk-cal__month {
	font-family: var(--sbk-font-heading);
	font-size: 1.05rem;
	font-weight: 600;
}

.sbk-cal__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--sbk-border);
	background: var(--sbk-card-bg);
	color: var(--sbk-text);
	display: grid;
	place-items: center;
	cursor: pointer;
}

.sbk-cal__arrow:hover:not([disabled]) {
	border-color: var(--sbk-accent-line);
	background: var(--sbk-accent-soft);
}

.sbk-cal__arrow[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.sbk-cal__arrow--prev .sbk-icon {
	transform: rotate(180deg);
}

.sbk-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.sbk-cal__dow {
	text-align: center;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sbk-muted);
	padding-bottom: 6px;
	font-weight: 600;
}

.sbk-day {
	aspect-ratio: 1 / 1;
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: var(--sbk-text);
	cursor: pointer;
	display: grid;
	place-items: center;
	position: relative;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sbk-day--available {
	background: var(--sbk-card-bg);
	border-color: var(--sbk-border);
	font-weight: 600;
}

.sbk-day--available:hover {
	border-color: var(--sbk-accent);
	background: var(--sbk-accent-soft);
}

.sbk-day--available::after {
	content: '';
	position: absolute;
	bottom: 6px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--sbk-accent);
}

.sbk-day[aria-pressed='true'] {
	background: var(--sbk-primary);
	border-color: var(--sbk-primary);
	color: #fff;
}

.sbk-day[aria-pressed='true']::after {
	background: #fff;
}

.sbk-day[disabled] {
	color: var(--sbk-muted);
	opacity: 0.4;
	cursor: not-allowed;
}

.sbk-day--today:not([aria-pressed='true']) {
	box-shadow: inset 0 0 0 1px var(--sbk-accent-line);
}

.sbk-day--empty {
	visibility: hidden;
}

.sbk-cal__legend {
	display: flex;
	gap: 16px;
	margin-top: 14px;
	font-size: 0.78rem;
	color: var(--sbk-muted);
	flex-wrap: wrap;
}

.sbk-cal__legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sbk-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sbk-accent);
	display: inline-block;
}

.sbk-dot--off {
	background: var(--sbk-border);
}

.sbk-slots__group+.sbk-slots__group {
	margin-top: 18px;
}

.sbk-slots__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sbk-muted);
	font-weight: 600;
	margin-bottom: 10px;
}

.sbk-slots__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 8px;
}

.sbk-slot {
	min-height: 44px;
	padding: 10px 8px;
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-btn-radius);
	background: var(--sbk-card-bg);
	color: var(--sbk-text);
	font-weight: 600;
	font-size: 0.92rem;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sbk-slot:hover {
	border-color: var(--sbk-accent);
	background: var(--sbk-accent-soft);
}

.sbk-slot[aria-pressed='true'] {
	background: var(--sbk-primary);
	border-color: var(--sbk-primary);
	color: #fff;
}

.sbk-when__picked {
	margin-top: var(--sbk-gap);
	padding: 14px 16px;
	border-radius: var(--sbk-btn-radius);
	background: var(--sbk-accent-soft);
	border: 1px solid var(--sbk-accent-line);
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}

.sbk-when__picked .sbk-icon {
	color: var(--sbk-accent);
}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */

.sbk-field {
	margin-bottom: var(--sbk-gap);
}

.sbk-field__label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 6px;
}

.sbk-field__req {
	color: var(--sbk-danger);
	margin-left: 2px;
}

.sbk-field__opt {
	color: var(--sbk-muted);
	font-weight: 400;
	margin-left: 4px;
}

.sbk-field__input,
.sbk-field__textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-btn-radius);
	background: var(--sbk-card-bg);
	font: inherit;
	color: inherit;
}

.sbk-field__textarea {
	min-height: 96px;
	resize: vertical;
}

.sbk-field__input[aria-invalid='true'],
.sbk-field__textarea[aria-invalid='true'] {
	border-color: var(--sbk-danger);
	background: var(--sbk-danger-soft);
}

.sbk-field__error {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--sbk-danger);
	font-size: 0.85rem;
	margin-top: 6px;
	font-weight: 600;
}

.sbk-field__error .sbk-icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.sbk-field__help {
	font-size: 0.82rem;
	color: var(--sbk-muted);
	margin-top: 6px;
}

.sbk-grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 var(--sbk-gap);
}

/* Bots fill what people cannot see. */
.sbk-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sbk-errors {
	border: 1px solid var(--sbk-danger);
	background: var(--sbk-danger-soft);
	border-radius: var(--sbk-btn-radius);
	padding: 14px 16px;
	margin-bottom: var(--sbk-gap);
}

.sbk-errors__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--sbk-danger);
	margin-bottom: 6px;
}

.sbk-errors ul {
	margin: 0;
	padding-left: 22px;
	list-style: disc;
}

.sbk-errors a {
	color: var(--sbk-danger);
}

/* -------------------------------------------------------------------------
 * Review
 * ---------------------------------------------------------------------- */

.sbk-review {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sbk-review__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sbk-gap);
	padding: 12px 0;
	border-bottom: 1px solid var(--sbk-border);
}

.sbk-review__row:last-child {
	border-bottom: 0;
}

.sbk-review__key {
	color: var(--sbk-muted);
	font-size: 0.88rem;
	flex: 0 0 34%;
	max-width: 200px;
}

.sbk-review__val {
	font-weight: 600;
	text-align: right;
	min-width: 0;
	overflow-wrap: anywhere;
}

.sbk-review__val ul {
	font-weight: 500;
}

.sbk-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--sbk-btn-radius);
	background: var(--sbk-page-bg);
	border: 1px solid var(--sbk-border);
	font-size: 0.87rem;
	color: var(--sbk-muted);
	margin-top: var(--sbk-gap);
}

.sbk-notice .sbk-icon {
	width: 17px;
	height: 17px;
	color: var(--sbk-accent);
	margin-top: 1px;
}

/* -------------------------------------------------------------------------
 * Modal / bottom sheet
 * ---------------------------------------------------------------------- */

.sbk-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(31, 28, 25, 0.5);
	animation: sbk-fade 0.16s ease-out;
}

.sbk-modal__box {
	background: var(--sbk-card-bg);
	border-radius: var(--sbk-radius);
	box-shadow: var(--sbk-shadow-lg);
	width: min(640px, 100%);
	max-height: min(86vh, 760px);
	display: flex;
	flex-direction: column;
	animation: sbk-rise 0.2s ease-out;
}

.sbk-modal__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--sbk-border);
	flex: 0 0 auto;
}

.sbk-modal__title {
	font-size: 1.15rem;
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.sbk-modal__close {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: var(--sbk-page-bg);
	color: var(--sbk-text);
	cursor: pointer;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	font-size: 1.2rem;
	line-height: 1;
}

.sbk-modal__close:hover {
	background: var(--sbk-border);
}

/* The close control reuses the plus glyph rotated into an ×, so the icon set
   needs no separate cross. */
.sbk-icon--x {
	transform: rotate(45deg);
}

.sbk-modal__body {
	padding: 20px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
}

.sbk-modal__foot {
	padding: 16px 20px;
	border-top: 1px solid var(--sbk-border);
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
	flex: 0 0 auto;
}

@keyframes sbk-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes sbk-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

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

/* -------------------------------------------------------------------------
 * Status, skeletons, live region
 * ---------------------------------------------------------------------- */

.sbk-status {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: var(--sbk-btn-radius);
	font-size: 0.9rem;
	border: 1px solid var(--sbk-border);
	background: var(--sbk-card-bg);
	color: var(--sbk-muted);
}

.sbk-status--error {
	border-color: var(--sbk-danger);
	background: var(--sbk-danger-soft);
	color: var(--sbk-danger);
	font-weight: 600;
}

.sbk-status--empty {
	text-align: center;
	justify-content: center;
	padding: 34px 20px;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border-style: dashed;
}

.sbk-status--empty .sbk-icon {
	width: 28px;
	height: 28px;
	color: var(--sbk-border);
}

.sbk-live {
	margin-top: var(--sbk-gap);
}

.sbk-spinner {
	width: 17px;
	height: 17px;
	border: 2px solid var(--sbk-border);
	border-top-color: var(--sbk-accent);
	border-radius: 50%;
	animation: sbk-spin 0.7s linear infinite;
	flex: 0 0 auto;
}

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

.sbk-skel {
	background: linear-gradient(90deg, var(--sbk-page-bg) 25%, var(--sbk-border) 50%, var(--sbk-page-bg) 75%);
	background-size: 200% 100%;
	animation: sbk-shimmer 1.3s ease-in-out infinite;
	border-radius: 8px;
}

.sbk-skel--slot {
	height: 44px;
}

.sbk-skel--row {
	height: 56px;
	margin-bottom: 8px;
}

@keyframes sbk-shimmer {
	from {
		background-position: 200% 0;
	}

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

/* -------------------------------------------------------------------------
 * Success page
 * ---------------------------------------------------------------------- */

.sbk-success {
	max-width: 620px;
	margin: 0 auto;
	padding-top: 32px;
}

.sbk-success__badge {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--sbk-success-soft);
	color: var(--sbk-success);
	display: grid;
	place-items: center;
	margin: 0 auto 18px;
}

.sbk-success__badge .sbk-icon {
	width: 32px;
	height: 32px;
	stroke-width: 2;
}

.sbk-success__title {
	text-align: center;
	font-size: 1.7rem;
	margin-bottom: 8px;
}

.sbk-success__message {
	text-align: center;
	color: var(--sbk-muted);
	margin-bottom: var(--sbk-space);
	max-width: 46ch;
	margin-left: auto;
	margin-right: auto;
}

.sbk-success__ref {
	display: block;
	text-align: center;
	font-family: var(--sbk-font-heading);
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	padding: 12px;
	background: var(--sbk-accent-soft);
	border-radius: var(--sbk-btn-radius);
	margin-bottom: var(--sbk-space);
	font-variant-numeric: tabular-nums;
}

.sbk-success__foot {
	margin-top: var(--sbk-space);
	text-align: center;
	color: var(--sbk-muted);
	font-size: 0.9rem;
}

.sbk-customer-request {
	margin-top: var(--sbk-gap);
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.sbk-customer-request p {
	margin: 6px 0 0;
	white-space: inherit;
}

.sbk-success__foot address {
	font-style: normal;
	white-space: pre-line;
	margin-top: 4px;
}

/* -------------------------------------------------------------------------
 * Filter chips, date shortcuts, empty-state actions, sticky CTA
 * ---------------------------------------------------------------------- */

.sbk-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: var(--sbk-gap);
}

.sbk-chip {
	min-height: 40px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--sbk-border);
	background: var(--sbk-card-bg);
	color: var(--sbk-text);
	font-weight: 600;
	font-size: 0.87rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sbk-chip:hover {
	border-color: var(--sbk-accent-line);
	background: var(--sbk-accent-soft);
}

.sbk-chip--on {
	background: var(--sbk-primary);
	border-color: var(--sbk-primary);
	color: #fff;
}

.sbk-chip--accent {
	border-color: var(--sbk-accent-line);
	background: var(--sbk-accent-soft);
	color: var(--sbk-primary);
}

.sbk-empty__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 6px;
}

/* On desktop the datetime actions are an ordinary footer. On a phone they stick
   to the bottom of the viewport (see the mobile block) so the primary CTA stays
   reachable without scrolling past a long slot list. */

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.sbk-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Below the step, not above it: before anything is chosen the summary is
	   an empty box, and putting that first pushes the actual work off-screen. */
	.sbk-rail {
		position: static;
		margin-top: var(--sbk-gap);
	}

	.sbk-when {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Single column: the calendar must not be sticky. */
	.sbk-cal {
		position: static;
	}
}

@media (max-width: 767px) {
	.sbk-booking-app {
		font-size: 15px;
		padding-bottom: 32px;
	}

	.sbk-shell {
		padding: 0 14px;
	}

	.sbk-header__inner {
		padding: 12px 14px;
		gap: 10px;
	}

	.sbk-header__contact {
		margin-left: 0;
		width: 100%;
		gap: 14px;
		font-size: 0.8rem;
	}

	/* The full postal address costs more vertical space than it earns on a
	   phone; the phone number is what someone actually needs mid-booking. */
	.sbk-header__item--address {
		display: none;
	}

	.sbk-intro {
		padding: 20px 0 2px;
	}

	.sbk-intro__title {
		font-size: 1.45rem;
	}

	.sbk-panel {
		padding: 18px 16px;
		border-radius: var(--sbk-radius);
	}

	.sbk-progress {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 16px -14px 18px;
		padding: 0 14px 4px;
	}

	.sbk-progress::-webkit-scrollbar {
		display: none;
	}

	.sbk-service {
		flex-wrap: wrap;
		gap: 10px;
	}

	.sbk-service__text {
		flex: 1 1 100%;
	}

	.sbk-add {
		width: 100%;
	}

	.sbk-staff-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 391-767px: three columns, time text on one line. */
	.sbk-slots__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The date/time step is document flow, top to bottom: calendar, selected
	   date, filters, legend, slots, then the sticky actions. Nothing is pulled
	   over the calendar, and the scroll area is padded so the sticky CTA never
	   covers the final slot (its height plus the phone's safe-area inset). */
	.sbk-when {
		gap: var(--sbk-gap);
	}

	.sbk-panel--sticky {
		padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}

	.sbk-review__row {
		flex-direction: column;
		gap: 2px;
	}

	.sbk-review__key {
		flex: 1 1 auto;
		max-width: none;
	}

	.sbk-review__val {
		text-align: left;
	}

	.sbk-actions .sbk-btn {
		flex: 1 1 auto;
	}

	/* Sticky primary CTA on the date/time step, so it stays reachable above a
	   long slot list on a phone. */
	.sbk-actions--sticky {
		position: sticky;
		bottom: 0;
		background: var(--sbk-card-bg);
		margin: var(--sbk-gap) calc(-1 * var(--sbk-space)) calc(-1 * var(--sbk-space));
		padding: 12px var(--sbk-space) calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--sbk-border);
		box-shadow: 0 -4px 14px rgba(47, 43, 40, 0.06);
		z-index: 5;
	}

	/* Modals become bottom sheets: reachable with a thumb, and they never
	   extend past the viewport on a short screen. */
	.sbk-modal {
		place-items: end stretch;
		padding: 0;
	}

	.sbk-modal__box {
		width: 100%;
		max-height: 92vh;
		border-radius: var(--sbk-radius) var(--sbk-radius) 0 0;
		animation: sbk-sheet 0.22s ease-out;
	}

	.sbk-modal__head {
		position: sticky;
		top: 0;
		background: var(--sbk-card-bg);
		z-index: 1;
	}

	@keyframes sbk-sheet {
		from {
			transform: translateY(100%);
		}

		to {
			transform: none;
		}
	}
}

/* 320-390px: two columns, so the time text is never squeezed below a readable
   size to fit a third. */
@media (max-width: 390px) {
	.sbk-slots__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Very small screens: 320px still has to work. */
@media (max-width: 360px) {
	.sbk-shell {
		padding: 0 10px;
	}

	.sbk-panel {
		padding: 16px 12px;
	}

	.sbk-cat__toggle {
		padding: 14px 12px;
		gap: 10px;
	}

	.sbk-brand__name {
		font-size: 1.05rem;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sbk-booking-app *,
	.sbk-booking-app *::before,
	.sbk-booking-app *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.sbk-skel {
		background: var(--sbk-page-bg);
	}
}

/* -------------------------------------------------------------------------
 * Forced colours / high contrast
 * ---------------------------------------------------------------------- */

@media (forced-colors: active) {

	.sbk-day[aria-pressed='true'],
	.sbk-slot[aria-pressed='true'],
	.sbk-add[aria-pressed='true'],
	.sbk-staff[aria-pressed='true'] {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
		border-color: Highlight;
	}

	.sbk-panel,
	.sbk-cat,
	.sbk-staff,
	.sbk-slot,
	.sbk-day--available {
		border: 1px solid CanvasText;
	}
}

@media print {

	.sbk-header__contact,
	.sbk-progress,
	.sbk-actions,
	.sbk-modal {
		display: none !important;
	}

	.sbk-booking-app {
		background: #fff;
	}
}


/* -------------------------------------------------------------------------
 * Staff income portal
 *
 * The portal reuses the booking design system. These few classes are specific
 * to it — a simple card grid and the income adjustment form — and live here so
 * the two surfaces share one stylesheet and one set of tokens.
 * ---------------------------------------------------------------------- */

.sbk-booking-app .sbk-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.sbk-booking-app .sbk-card {
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-radius);
	background: var(--sbk-card-bg);
	padding: 16px;
	box-shadow: var(--sbk-shadow-sm);
}

.sbk-booking-app .sbk-from,
.sbk-booking-app .sbk-to {
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
 * Standalone shell
 *
 * /booking/ and /booking-success/ render as a self-contained document with no
 * theme chrome. These rules style the brand bar, the commitment section and the
 * minimal footer the shell provides.
 * ---------------------------------------------------------------------- */

.sbk-standalone-body {
	margin: 0;
	background: var(--sbk-page-bg);
}

/* Inside the standalone shell the page is already full width, so the app does
   not need to break out of a theme container. Neutralise the breakout so it
   does not fight the shell. */
.sbk-standalone-shell {
	position: static;
	width: 100%;
	max-width: 100%;
	left: auto;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.sbk-standalone-main {
	flex: 1 0 auto;
}

.sbk-brandbar {
	background: var(--sbk-card-bg);
	border-bottom: 1px solid var(--sbk-border);
	position: sticky;
	top: 0;
	z-index: 50;
}

.sbk-brandbar__inner {
	max-width: var(--sbk-max);
	margin: 0 auto;
	padding: 12px 20px;
	/* Two equal areas: the logo centred in one half, the hotline in the other. */
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--sbk-gap);
}

.sbk-brandbar__id {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 0;
}

.sbk-brandbar__logo {
	height: 48px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	display: block;
}

.sbk-brandbar__name {
	font-family: var(--sbk-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.sbk-brandbar__contact {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	font-size: 0.85rem;
	color: var(--sbk-muted);
}

.sbk-brandbar__item address {
	font-style: normal;
	white-space: pre-line;
	line-height: 1.35;
}

.sbk-brandbar__item a {
	color: inherit;
	text-decoration: none;
}

.sbk-brandbar__item a:hover address {
	text-decoration: underline;
}

.sbk-brandbar__phone {
	color: var(--sbk-text);
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
	font-size: 0.95rem;
}

.sbk-brandbar__phone:hover {
	color: var(--sbk-accent);
}

/* --- Commitment section --- */

.sbk-commit {
	margin-top: 8px;
	padding: 4px 0 8px;
}

.sbk-commit__inner {
	background: var(--sbk-card-bg);
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-radius);
	box-shadow: var(--sbk-shadow-sm);
	padding: 22px 24px;
}

.sbk-commit__heading {
	font-size: 1.15rem;
	margin-bottom: 8px;
}

.sbk-commit__body {
	color: var(--sbk-muted);
	max-width: 72ch;
	margin-bottom: 12px;
}

.sbk-commit__links {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.sbk-commit__link {
	color: var(--sbk-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sbk-commit__link:hover {
	color: var(--sbk-primary);
}

/* --- Shell footer --- */

.sbk-standalone-foot {
	flex: 0 0 auto;
	border-top: 1px solid var(--sbk-border);
	background: var(--sbk-card-bg);
	margin-top: 24px;
	padding: 20px 0;
}

.sbk-standalone-foot .sbk-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.sbk-standalone-foot__brand {
	font-family: var(--sbk-font-heading);
	font-weight: 600;
}

.sbk-standalone-foot__links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.sbk-standalone-foot__links a {
	color: var(--sbk-muted);
	font-size: 0.88rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sbk-standalone-foot__links a:hover {
	color: var(--sbk-text);
}

@media (max-width: 767px) {
	.sbk-brandbar__inner {
		/* Stack on a phone: logo above the hotline, both centred. */
		grid-template-columns: 1fr;
		padding: 10px 14px;
		gap: 8px;
	}

	.sbk-brandbar__logo {
		height: 93px;
	}

	.sbk-brandbar__name {
		font-size: 1.05rem;
	}

	.sbk-brandbar__contact {
		font-size: 0.8rem;
		gap: 14px;
		width: 100%;
		justify-content: center;
	}

	/* The full postal address costs vertical space the funnel needs; the phone
	   is what a customer reaches for mid-booking. */
	.sbk-brandbar__item--address {
		display: none;
	}

	.sbk-commit__inner {
		padding: 18px 16px;
	}

	.sbk-standalone-foot .sbk-shell {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* Rate-limit countdown -----------------------------------------------------
   Shown when the server asks the customer to wait. Everything they chose is
   still on screen behind this; only the submit button is held. */
.sbk-phone-link {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

.sbk-phone-link:hover,
.sbk-phone-link:focus-visible {
	text-decoration: none;
}
.sbk-preview-banner {
	background: #fff3cd;
	border: 2px solid #8a6d00;
	color: #4d3d00;
	font-weight: 700;
	padding: 12px 18px;
	text-align: center;
}

.sbk-opening {
	padding-block: clamp(28px, 6vw, 72px);
}

.sbk-opening__panel {
	margin-inline: auto;
	max-width: 780px;
	text-align: center;
}

.sbk-opening__eyebrow {
	color: var(--sbk-accent);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sbk-opening__message,
.sbk-opening__date {
	font-size: 1.08rem;
	line-height: 1.7;
}

.sbk-opening__countdown {
	background: var(--sbk-accent-soft);
	border-radius: var(--sbk-radius);
	font-weight: 700;
	margin: 24px auto;
	padding: 16px;
}

.sbk-opening__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 28px 0;
}

.sbk-opening__details {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin-top: 36px;
	text-align: left;
}

.sbk-opening__details h2 {
	font-size: 1.15rem;
}

.sbk-opening__details dl div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.sbk-opening__details dd {
	margin: 0;
	text-align: right;
}

.sbk-opening__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	margin-top: 32px;
}
.sbk-restricted-date-message {
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	border-left: 3px solid var(--sbk-accent);
	background: var(--sbk-accent-soft);
}

.sbk-group-entry {
	align-items: center;
	background: var(--sbk-surface-soft, #fff8f5);
	border: 1px solid var(--sbk-border, #eadfd9);
	border-radius: 14px;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin: 16px 0 22px;
	padding: 16px;
}

.sbk-group-entry p {
	margin: 4px 0 0;
}

@media (max-width: 480px) {
	.sbk-group-entry {
		align-items: stretch;
		flex-direction: column;
	}

	.sbk-group-entry .sbk-btn {
		min-height: 48px;
		width: 100%;
	}
}
.sbk-unified-guest__nav {
	display: flex;
	overflow-x: auto;
}

.sbk-unified-guest__chip {
	background: var(--sbk-accent-soft);
	border: 1px solid var(--sbk-accent);
	border-radius: 999px;
	min-height: 48px;
	padding: 0 18px;
}

.sbk-unified-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 16px 0;
}

.sbk-unified-tabs button {
	background: transparent;
	border: 0;
	border-bottom: 3px solid var(--sbk-border);
	font: inherit;
	font-weight: 700;
	min-height: 48px;
}

.sbk-unified-tabs button[aria-selected="true"] {
	border-bottom-color: var(--sbk-accent);
	color: var(--sbk-accent);
}