/**
 * SST Booking — public stylesheet.
 *
 * Design system first (tokens, primitives), then components in the order the
 * customer meets them: cards → service page → modal → dashboard.
 *
 * Everything is scoped under `.sstb-*` so it never leaks into the host theme,
 * and every colour resolves from a custom property that the plugin prints
 * inline from Settings — restyling is a settings change, not a rebuild.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Palette — overridden by the inline block Assets::theme_css() appends. */
	--sstb-primary: #4f46e5;
	--sstb-primary-dark: #4338ca;
	--sstb-accent: #0ea5e9;
	--sstb-success: #10b981;

	--sstb-ink: #0f172a;
	--sstb-ink-2: #334155;
	--sstb-muted: #64748b;
	--sstb-line: #e2e8f0;
	--sstb-line-soft: #f1f5f9;
	--sstb-surface: #ffffff;
	--sstb-surface-2: #f8fafc;
	--sstb-surface-3: #f1f5f9;
	--sstb-danger: #dc2626;
	--sstb-warning: #d97706;

	/* Shape */
	--sstb-radius: 16px;
	--sstb-radius-sm: 10px;
	--sstb-radius-pill: 999px;

	/* Elevation — soft, layered, never harsh. */
	--sstb-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--sstb-shadow: 0 4px 16px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .05);
	--sstb-shadow-lg: 0 24px 60px rgba(15, 23, 42, .16), 0 8px 20px rgba(15, 23, 42, .08);

	/* Rhythm */
	--sstb-space-1: 4px;
	--sstb-space-2: 8px;
	--sstb-space-3: 12px;
	--sstb-space-4: 16px;
	--sstb-space-5: 24px;
	--sstb-space-6: 32px;
	--sstb-space-7: 48px;
	--sstb-space-8: 72px;

	/* Motion */
	--sstb-ease: cubic-bezier(.4, 0, .2, 1);
	--sstb-ease-out: cubic-bezier(.16, 1, .3, 1);
	--sstb-fast: 150ms;
	--sstb-base: 260ms;
	--sstb-slow: 420ms;
}

/* ==========================================================================
   2. Base & primitives
   ========================================================================== */

.sstb-page,
.sstb-modal,
.sstb-dashboard,
.sstb-services {
	color: var(--sstb-ink);
	font-feature-settings: "kern", "liga";
	-webkit-font-smoothing: antialiased;
}

.sstb-page *,
.sstb-modal *,
.sstb-dashboard * {
	box-sizing: border-box;
}

.sstb-container {
	width: min(1180px, 100% - 2 * var(--sstb-space-5));
	margin-inline: auto;
}

.sstb-muted { color: var(--sstb-muted); }
.sstb-warning { color: var(--sstb-warning); }
.sstb-required { color: var(--sstb-danger); }
.sstb-optional { color: var(--sstb-muted); font-weight: 400; }

.sstb-eyebrow {
	margin: 0 0 var(--sstb-space-2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sstb-primary);
}

.sstb-icon {
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -.125em;
}

.sstb-icon--filled { fill: currentColor; stroke-width: 0; color: #f59e0b; }
.sstb-icon--muted { fill: var(--sstb-line); stroke-width: 0; }

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

.sstb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sstb-space-2);
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--sstb-radius-sm);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--sstb-fast) var(--sstb-ease),
	            background-color var(--sstb-fast) var(--sstb-ease),
	            box-shadow var(--sstb-fast) var(--sstb-ease),
	            border-color var(--sstb-fast) var(--sstb-ease);
}

.sstb-btn:focus-visible {
	outline: 2px solid var(--sstb-primary);
	outline-offset: 2px;
}

.sstb-btn:active { transform: translateY(1px); }

.sstb-btn[disabled],
.sstb-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

.sstb-btn--primary {
	background: var(--sstb-primary);
	color: #fff;
	box-shadow: var(--sstb-shadow-sm);
}

.sstb-btn--primary:hover:not(:disabled) {
	background: var(--sstb-primary-dark);
	box-shadow: var(--sstb-shadow);
}

.sstb-btn--ghost {
	background: var(--sstb-surface);
	border-color: var(--sstb-line);
	color: var(--sstb-ink-2);
}

.sstb-btn--ghost:hover:not(:disabled) {
	border-color: var(--sstb-primary);
	color: var(--sstb-primary);
}

.sstb-btn--danger {
	background: transparent;
	border-color: #fecaca;
	color: var(--sstb-danger);
}

.sstb-btn--danger:hover:not(:disabled) { background: #fef2f2; }

.sstb-btn--sm { padding: 8px 14px; font-size: 14px; }
.sstb-btn--lg { padding: 16px 30px; font-size: 16px; }

.sstb-link-btn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--sstb-primary);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Pills & chips ---------------------------------------------------- */

.sstb-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--sstb-radius-pill);
	background: var(--sstb-surface-3);
	color: var(--sstb-ink-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}

.sstb-pill--accent    { background: color-mix(in srgb, var(--sstb-primary) 12%, #fff); color: var(--sstb-primary); }
.sstb-pill--confirmed,
.sstb-pill--paid,
.sstb-pill--completed { background: #ecfdf5; color: #047857; }
.sstb-pill--pending,
.sstb-pill--partial   { background: #fffbeb; color: #b45309; }
.sstb-pill--cancelled,
.sstb-pill--failed,
.sstb-pill--rejected  { background: #fef2f2; color: #b91c1c; }
.sstb-pill--unpaid    { background: var(--sstb-surface-3); color: var(--sstb-muted); }

.sstb-chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius-pill);
	background: var(--sstb-surface);
	color: var(--sstb-ink-2);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--sstb-fast) var(--sstb-ease);
}

.sstb-chip:hover { border-color: var(--sstb-primary); color: var(--sstb-primary); }

.sstb-chip.is-active {
	background: var(--sstb-primary);
	border-color: var(--sstb-primary);
	color: #fff;
}

/* --- Loading & feedback ---------------------------------------------- */

.sstb-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid color-mix(in srgb, var(--sstb-primary) 25%, transparent);
	border-top-color: var(--sstb-primary);
	border-radius: 50%;
	animation: sstb-spin .7s linear infinite;
}

.sstb-spinner--lg { width: 34px; height: 34px; border-width: 3px; }

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

.sstb-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
}

.sstb-notice {
	display: flex;
	gap: var(--sstb-space-3);
	padding: var(--sstb-space-4);
	border-radius: var(--sstb-radius-sm);
	background: var(--sstb-surface-2);
	font-size: 14px;
	line-height: 1.5;
}

.sstb-notice p { margin: 0; }
.sstb-notice--warning { background: #fffbeb; color: #92400e; }
.sstb-notice--error { background: #fef2f2; color: #991b1b; }

.sstb-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sstb-space-3);
	padding: var(--sstb-space-8) var(--sstb-space-5);
	border: 1px dashed var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface-2);
	text-align: center;
	color: var(--sstb-muted);
}

.sstb-empty-state__icon { font-size: 32px; color: var(--sstb-line); }
.sstb-empty-state h2 { margin: 0; font-size: 20px; color: var(--sstb-ink); }
.sstb-empty-state p { margin: 0; max-width: 46ch; }

/* ==========================================================================
   3. Animations
   ========================================================================== */

@keyframes sstb-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes sstb-slide-in-right {
	from { opacity: 0; transform: translateX(28px); }
	to   { opacity: 1; transform: none; }
}

@keyframes sstb-slide-in-left {
	from { opacity: 0; transform: translateX(-28px); }
	to   { opacity: 1; transform: none; }
}

@keyframes sstb-pop {
	0%   { transform: scale(.94); opacity: 0; }
	60%  { transform: scale(1.01); }
	100% { transform: scale(1); opacity: 1; }
}

.sstb-fade-in { animation: sstb-fade-up var(--sstb-slow) var(--sstb-ease-out) both; }

/* Scroll-triggered reveal. JS adds `is-visible`; without JS the base state
   stays visible, so content is never hidden from a non-JS visitor. */
.sstb-reveal { opacity: 1; }

.js .sstb-reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--sstb-slow) var(--sstb-ease-out), transform var(--sstb-slow) var(--sstb-ease-out); }
.js .sstb-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*,
	.js .sstb-reveal {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   4. Service cards & grid
   ========================================================================== */

.sstb-services {
	display: grid;
	gap: var(--sstb-space-5);
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	margin-block: var(--sstb-space-6);
}

.sstb-services--cols-1 { grid-template-columns: minmax(0, 640px); justify-content: center; }
.sstb-services--cols-2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.sstb-services--cols-4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.sstb-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
	box-shadow: var(--sstb-shadow-sm);
	transition: transform var(--sstb-base) var(--sstb-ease-out),
	            box-shadow var(--sstb-base) var(--sstb-ease-out),
	            border-color var(--sstb-base) var(--sstb-ease);
}

.sstb-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--sstb-card-accent, var(--sstb-primary)) 40%, var(--sstb-line));
	box-shadow: var(--sstb-shadow-lg);
}

.sstb-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--sstb-card-accent, var(--sstb-primary)) 18%, #fff),
		color-mix(in srgb, var(--sstb-card-accent, var(--sstb-primary)) 5%, #fff));
}

.sstb-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sstb-slow) var(--sstb-ease-out);
}

.sstb-card:hover .sstb-card__media img { transform: scale(1.05); }

.sstb-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 44px;
	color: color-mix(in srgb, var(--sstb-card-accent, var(--sstb-primary)) 45%, #fff);
}

.sstb-card__badge {
	position: absolute;
	top: var(--sstb-space-3);
	left: var(--sstb-space-3);
	padding: 6px 12px;
	border-radius: var(--sstb-radius-pill);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
	color: var(--sstb-card-accent, var(--sstb-primary));
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: var(--sstb-shadow-sm);
}

.sstb-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sstb-space-3);
	padding: var(--sstb-space-5);
}

.sstb-card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.sstb-card__title a {
	color: inherit;
	text-decoration: none;
}

.sstb-card__title a:hover { color: var(--sstb-card-accent, var(--sstb-primary)); }

.sstb-card__excerpt {
	margin: 0;
	color: var(--sstb-muted);
	font-size: 15px;
	line-height: 1.6;
}

.sstb-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sstb-space-2) var(--sstb-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--sstb-ink-2);
}

.sstb-card__meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sstb-card__meta .sstb-icon { color: var(--sstb-muted); }

.sstb-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sstb-space-3);
	margin-top: auto;
	padding-top: var(--sstb-space-4);
	border-top: 1px solid var(--sstb-line-soft);
}

.sstb-card__price-label {
	display: block;
	font-size: 12px;
	color: var(--sstb-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.sstb-card__price-value {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.sstb-card__price-value del {
	margin-right: 6px;
	color: var(--sstb-muted);
	font-size: 16px;
	font-weight: 500;
}

.sstb-card__actions { display: flex; gap: var(--sstb-space-2); }

.sstb-card--compact .sstb-card__media { aspect-ratio: 3 / 2; }
.sstb-card--compact .sstb-card__body { padding: var(--sstb-space-4); }
.sstb-card--compact .sstb-card__title { font-size: 17px; }
.sstb-card--compact .sstb-card__excerpt { display: none; }

/* ==========================================================================
   5. Hero & service page
   ========================================================================== */

.sstb-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--sstb-space-8);
}

.sstb-hero--archive {
	background: linear-gradient(180deg, var(--sstb-surface-2), var(--sstb-surface));
	text-align: center;
}

.sstb-hero__inner {
	position: relative;
	z-index: 2;
	width: min(1180px, 100% - 2 * var(--sstb-space-5));
	margin-inline: auto;
}

.sstb-hero--archive .sstb-hero__inner { max-width: 760px; }

.sstb-hero__title {
	margin: 0 0 var(--sstb-space-4);
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
}

.sstb-hero__lead {
	margin: 0 0 var(--sstb-space-5);
	max-width: 62ch;
	font-size: clamp(1rem, .96rem + .3vw, 1.2rem);
	line-height: 1.65;
	color: var(--sstb-ink-2);
}

.sstb-hero--archive .sstb-hero__lead { margin-inline: auto; }

.sstb-hero--service {
	padding-block: clamp(56px, 9vw, 120px);
	color: #fff;
	background: var(--sstb-ink);
}

.sstb-hero--service .sstb-hero__lead { color: rgba(255, 255, 255, .82); }

.sstb-hero__media { position: absolute; inset: 0; z-index: 0; }

.sstb-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sstb-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		rgba(15, 23, 42, .93) 0%,
		rgba(15, 23, 42, .78) 45%,
		rgba(15, 23, 42, .35) 100%);
}

.sstb-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sstb-space-6);
	margin: 0 0 var(--sstb-space-6);
	padding: 0;
	list-style: none;
}

.sstb-hero__fact-label {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.sstb-hero__fact-value {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 20px;
	font-weight: 700;
}

.sstb-hero__fact-value del {
	margin-right: 6px;
	color: rgba(255, 255, 255, .5);
	font-weight: 500;
	font-size: 16px;
}

.sstb-single__body { padding-block: var(--sstb-space-7); }

.sstb-section {
	padding-block: var(--sstb-space-7);
	border-bottom: 1px solid var(--sstb-line-soft);
}

.sstb-section:last-of-type { border-bottom: 0; }

.sstb-section--soft {
	margin-inline: calc(-1 * var(--sstb-space-5));
	padding-inline: var(--sstb-space-5);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface-2);
	border-bottom: 0;
}

.sstb-section__title {
	margin: 0 0 var(--sstb-space-5);
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -.02em;
}

.sstb-prose { max-width: 72ch; font-size: 17px; line-height: 1.75; color: var(--sstb-ink-2); }
.sstb-prose > * + * { margin-top: 1.1em; }

.sstb-feature-grid {
	display: grid;
	gap: var(--sstb-space-4);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sstb-feature {
	padding: var(--sstb-space-5);
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
	transition: box-shadow var(--sstb-base) var(--sstb-ease), transform var(--sstb-base) var(--sstb-ease-out);
}

.sstb-feature:hover { transform: translateY(-3px); box-shadow: var(--sstb-shadow); }

.sstb-feature__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--sstb-space-3);
	border-radius: 12px;
	background: color-mix(in srgb, var(--sstb-card-accent, var(--sstb-primary)) 12%, #fff);
	color: var(--sstb-card-accent, var(--sstb-primary));
	font-size: 22px;
}

.sstb-feature h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.sstb-feature p { margin: 0; color: var(--sstb-muted); font-size: 15px; line-height: 1.6; }

.sstb-checklist-grid {
	display: grid;
	gap: var(--sstb-space-4);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.sstb-checklist-grid li { display: flex; gap: var(--sstb-space-3); }

.sstb-checklist-grid__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sstb-success) 15%, #fff);
	color: var(--sstb-success);
	font-size: 15px;
}

.sstb-checklist-grid strong { display: block; font-size: 15px; }
.sstb-checklist-grid span { color: var(--sstb-muted); font-size: 14px; }

.sstb-timeline-list {
	position: relative;
	margin: 0;
	padding: 0 0 0 var(--sstb-space-6);
	list-style: none;
}

.sstb-timeline-list::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 15px;
	width: 2px;
	background: linear-gradient(180deg, var(--sstb-primary), color-mix(in srgb, var(--sstb-primary) 15%, transparent));
}

.sstb-timeline-list li { position: relative; padding-bottom: var(--sstb-space-5); }

.sstb-timeline-list__marker {
	position: absolute;
	left: calc(-1 * var(--sstb-space-6));
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sstb-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 0 0 4px var(--sstb-surface);
}

.sstb-timeline-list__label {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sstb-primary);
}

.sstb-timeline-list h3 { margin: 0 0 4px; font-size: 18px; }
.sstb-timeline-list p { margin: 0; color: var(--sstb-muted); line-height: 1.65; }

.sstb-team {
	display: grid;
	gap: var(--sstb-space-5);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.sstb-team__member { text-align: center; }

.sstb-team__member img {
	width: 88px;
	height: 88px;
	margin-bottom: var(--sstb-space-3);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--sstb-shadow-sm);
}

.sstb-team__member h3 { margin: 0 0 2px; font-size: 16px; }
.sstb-team__member p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--sstb-muted); }

.sstb-accordion { display: grid; gap: var(--sstb-space-2); }

.sstb-accordion__item {
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius-sm);
	background: var(--sstb-surface);
	overflow: hidden;
}

.sstb-accordion__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sstb-space-3);
	padding: var(--sstb-space-4) var(--sstb-space-5);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.sstb-accordion__item summary::-webkit-details-marker { display: none; }

.sstb-accordion__item summary .sstb-icon {
	color: var(--sstb-muted);
	transition: transform var(--sstb-base) var(--sstb-ease);
}

.sstb-accordion__item[open] summary .sstb-icon { transform: rotate(180deg); }

.sstb-accordion__body {
	padding: 0 var(--sstb-space-5) var(--sstb-space-4);
	animation: sstb-fade-up var(--sstb-base) var(--sstb-ease-out);
}

.sstb-accordion__body p { margin: 0; color: var(--sstb-muted); line-height: 1.7; }

.sstb-reviews {
	display: grid;
	gap: var(--sstb-space-4);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.sstb-review {
	margin: 0;
	padding: var(--sstb-space-5);
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
}

.sstb-review__stars { display: flex; gap: 2px; margin-bottom: var(--sstb-space-3); font-size: 16px; }

.sstb-review blockquote {
	margin: 0 0 var(--sstb-space-4);
	font-size: 16px;
	line-height: 1.7;
	color: var(--sstb-ink-2);
}

.sstb-review figcaption { display: flex; flex-direction: column; font-size: 14px; }

.sstb-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sstb-space-5);
	margin-block: var(--sstb-space-7);
	padding: var(--sstb-space-6);
	border-radius: var(--sstb-radius);
	background: linear-gradient(120deg, var(--sstb-primary), var(--sstb-primary-dark));
	color: #fff;
}

.sstb-cta h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.02em; }
.sstb-cta p { margin: 0; color: rgba(255, 255, 255, .85); }
.sstb-cta .sstb-btn--primary { background: #fff; color: var(--sstb-primary); }
.sstb-cta .sstb-btn--primary:hover { background: rgba(255, 255, 255, .9); }

.sstb-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sstb-space-2);
	width: min(1180px, 100% - 2 * var(--sstb-space-5));
	margin: 0 auto var(--sstb-space-5);
}

/* --- Sticky mobile CTA ------------------------------------------------ */

.sstb-sticky-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--sstb-space-4);
	padding: var(--sstb-space-3) var(--sstb-space-4);
	padding-bottom: max(var(--sstb-space-3), env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--sstb-line);
	box-shadow: 0 -6px 24px rgba(15, 23, 42, .08);
	animation: sstb-fade-up var(--sstb-base) var(--sstb-ease-out);
}

.sstb-sticky-cta__price { display: block; font-size: 18px; font-weight: 700; }
.sstb-sticky-cta__meta { display: block; font-size: 12px; color: var(--sstb-muted); }

@media (max-width: 782px) {
	.sstb-sticky-cta { display: flex; }
	.sstb-service-page { padding-bottom: 84px; }
}

/* ==========================================================================
   6. Booking modal
   ========================================================================== */

.sstb-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sstb-space-5);
}

.sstb-modal[hidden] { display: none; }

.sstb-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .55);
	backdrop-filter: blur(4px);
	animation: sstb-fade-in-simple var(--sstb-base) var(--sstb-ease) both;
	border: 0;
}

@keyframes sstb-fade-in-simple { from { opacity: 0; } to { opacity: 1; } }

.sstb-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(980px, 100%);
	max-height: min(880px, 100%);
	overflow: hidden;
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
	box-shadow: var(--sstb-shadow-lg);
	animation: sstb-pop var(--sstb-base) var(--sstb-ease-out) both;
}

.sstb-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sstb-space-4);
	padding: var(--sstb-space-5) var(--sstb-space-5) var(--sstb-space-4);
	border-bottom: 1px solid var(--sstb-line-soft);
}

.sstb-modal__eyebrow {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sstb-primary);
}

.sstb-modal__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.sstb-modal__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--sstb-surface-3);
	color: var(--sstb-ink-2);
	font-size: 18px;
	cursor: pointer;
	transition: background var(--sstb-fast) var(--sstb-ease);
}

.sstb-modal__close:hover { background: var(--sstb-line); }

/* --- Progress --------------------------------------------------------- */

.sstb-steps { padding: var(--sstb-space-4) var(--sstb-space-5) 0; }

.sstb-steps__track {
	height: 4px;
	border-radius: 2px;
	background: var(--sstb-line-soft);
	overflow: hidden;
}

.sstb-steps__fill {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sstb-primary), var(--sstb-accent));
	transition: width var(--sstb-slow) var(--sstb-ease-out);
}

.sstb-steps__list {
	display: flex;
	justify-content: space-between;
	gap: var(--sstb-space-2);
	margin: var(--sstb-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.sstb-steps__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--sstb-muted);
	transition: color var(--sstb-base) var(--sstb-ease);
}

.sstb-steps__dot {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 2px solid var(--sstb-line);
	border-radius: 50%;
	background: var(--sstb-surface);
	font-size: 12px;
	font-weight: 700;
	transition: all var(--sstb-base) var(--sstb-ease);
}

.sstb-steps__item.is-active { color: var(--sstb-primary); font-weight: 600; }

.sstb-steps__item.is-active .sstb-steps__dot {
	border-color: var(--sstb-primary);
	background: var(--sstb-primary);
	color: #fff;
	transform: scale(1.08);
}

/* Completed steps swap their number for a tick. The number is hidden with
   font-size:0 on the dot and restored on the pseudo-element, which keeps the
   digit in the DOM for screen readers that ignore generated content. */
.sstb-steps__item.is-done .sstb-steps__dot {
	border-color: var(--sstb-success);
	background: var(--sstb-success);
	color: #fff;
	font-size: 0;
}

.sstb-steps__item.is-done .sstb-steps__dot::after {
	content: "✓";
	font-size: 13px;
}

/* --- Body & steps ----------------------------------------------------- */

.sstb-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--sstb-space-5);
	scrollbar-width: thin;
}

.sstb-step { animation: sstb-slide-in-right var(--sstb-base) var(--sstb-ease-out) both; }
.sstb-step[hidden] { display: none; }
.sstb-modal.is-going-back .sstb-step { animation-name: sstb-slide-in-left; }

.sstb-step__intro {
	margin: 0 0 var(--sstb-space-4);
	color: var(--sstb-muted);
	font-size: 15px;
}

.sstb-step__layout {
	display: grid;
	gap: var(--sstb-space-5);
	grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr);
	align-items: start;
}

@media (max-width: 820px) {
	.sstb-step__layout { grid-template-columns: 1fr; }
}

/* --- Calendar --------------------------------------------------------- */

.sstb-calendar {
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
	overflow: hidden;
}

.sstb-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sstb-space-3) var(--sstb-space-4);
	border-bottom: 1px solid var(--sstb-line-soft);
}

.sstb-calendar__month { font-size: 16px; font-weight: 700; }

.sstb-calendar__nav { display: flex; gap: var(--sstb-space-2); }

.sstb-calendar__nav button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--sstb-line);
	border-radius: 8px;
	background: var(--sstb-surface);
	color: var(--sstb-ink-2);
	cursor: pointer;
	transition: all var(--sstb-fast) var(--sstb-ease);
}

.sstb-calendar__nav button:hover:not(:disabled) { border-color: var(--sstb-primary); color: var(--sstb-primary); }
.sstb-calendar__nav button:disabled { opacity: .35; cursor: not-allowed; }

.sstb-calendar__weekdays,
.sstb-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.sstb-calendar__weekdays {
	padding: var(--sstb-space-3) var(--sstb-space-3) 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--sstb-muted);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.sstb-calendar__grid { gap: 4px; padding: var(--sstb-space-3); }

.sstb-day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 46px;
	padding: 4px;
	border: 1px solid transparent;
	border-radius: var(--sstb-radius-sm);
	background: transparent;
	color: var(--sstb-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--sstb-fast) var(--sstb-ease);
}

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

.sstb-day--available:hover {
	border-color: var(--sstb-primary);
	background: color-mix(in srgb, var(--sstb-primary) 8%, #fff);
}

.sstb-day--available::after {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--sstb-success);
}

.sstb-day--full,
.sstb-day--blocked,
.sstb-day--past,
.sstb-day--unavailable,
.sstb-day--outside {
	color: var(--sstb-line);
	cursor: not-allowed;
	background: transparent;
}

.sstb-day--blocked { text-decoration: line-through; }

.sstb-day--full::after {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--sstb-line);
}

.sstb-day.is-selected {
	border-color: var(--sstb-primary);
	background: var(--sstb-primary);
	color: #fff;
	font-weight: 700;
	box-shadow: var(--sstb-shadow-sm);
}

.sstb-day.is-selected::after { background: rgba(255, 255, 255, .8); }

.sstb-day.is-in-period {
	background: color-mix(in srgb, var(--sstb-primary) 5%, #fff);
}

.sstb-calendar__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sstb-space-3);
	padding: 0 var(--sstb-space-4) var(--sstb-space-3);
	font-size: 12px;
	color: var(--sstb-muted);
}

.sstb-calendar__legend span { display: inline-flex; align-items: center; gap: 5px; }

.sstb-legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.sstb-legend-dot--free { background: var(--sstb-success); }
.sstb-legend-dot--full { background: var(--sstb-line); }
.sstb-legend-dot--picked { background: var(--sstb-primary); }

/* --- Selection summary ------------------------------------------------ */

.sstb-summary-panel {
	position: sticky;
	top: 0;
	padding: var(--sstb-space-4);
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface-2);
}

.sstb-summary-panel h4 {
	margin: 0 0 var(--sstb-space-3);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sstb-muted);
}

.sstb-period-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.sstb-period {
	display: flex;
	align-items: center;
	gap: var(--sstb-space-2);
	padding: 9px 12px;
	border: 1px solid transparent;
	border-radius: var(--sstb-radius-sm);
	background: var(--sstb-surface);
	font-size: 14px;
	cursor: pointer;
	text-align: left;
	width: 100%;
	font-family: inherit;
	transition: all var(--sstb-fast) var(--sstb-ease);
}

.sstb-period:hover { border-color: var(--sstb-line); }

.sstb-period.is-active {
	border-color: var(--sstb-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sstb-primary) 12%, transparent);
}

.sstb-period__label { flex: 1; font-weight: 600; color: var(--sstb-ink-2); }
.sstb-period__value { color: var(--sstb-muted); font-size: 13px; }
.sstb-period.is-filled .sstb-period__value { color: var(--sstb-success); font-weight: 600; }

.sstb-period__check {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--sstb-line-soft);
	color: transparent;
	font-size: 11px;
	flex: none;
}

.sstb-period.is-filled .sstb-period__check { background: var(--sstb-success); color: #fff; }

/* --- Flexible multi-date summary --------------------------------------- */

.sstb-period-panel__count {
	float: right;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sstb-primary);
}

.sstb-summary-empty {
	margin: 0;
	font-size: 13px;
	color: var(--sstb-muted);
}

.sstb-selected-date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sstb-space-2);
	padding: 9px 10px 9px 12px;
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius-sm);
	background: var(--sstb-surface);
	font-size: 14px;
	animation: sstb-fade-in-simple var(--sstb-fast) var(--sstb-ease);
}

.sstb-selected-date__value { font-weight: 600; color: var(--sstb-ink-2); }

.sstb-selected-date__remove {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: var(--sstb-line-soft);
	color: var(--sstb-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	flex: none;
	transition: background var(--sstb-fast) var(--sstb-ease), color var(--sstb-fast) var(--sstb-ease);
}

.sstb-selected-date__remove:hover {
	background: var(--sstb-danger);
	color: #fff;
}

/* --- Time slots ------------------------------------------------------- */

.sstb-slot-groups { display: grid; gap: var(--sstb-space-5); }

.sstb-slot-group {
	padding: var(--sstb-space-4);
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
	animation: sstb-fade-up var(--sstb-base) var(--sstb-ease-out) both;
}

.sstb-slot-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sstb-space-2);
	margin-bottom: var(--sstb-space-3);
}

.sstb-slot-group__title { margin: 0; font-size: 16px; font-weight: 700; }
.sstb-slot-group__date { color: var(--sstb-muted); font-size: 14px; }

.sstb-slot-grid {
	display: grid;
	gap: var(--sstb-space-2);
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

.sstb-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 11px 8px;
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius-sm);
	background: var(--sstb-surface);
	color: var(--sstb-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--sstb-fast) var(--sstb-ease);
}

.sstb-slot:hover:not(:disabled) {
	border-color: var(--sstb-primary);
	color: var(--sstb-primary);
	transform: translateY(-1px);
}

.sstb-slot:disabled {
	background: var(--sstb-surface-2);
	color: var(--sstb-line);
	cursor: not-allowed;
	text-decoration: line-through;
}

.sstb-slot.is-selected {
	border-color: var(--sstb-primary);
	background: var(--sstb-primary);
	color: #fff;
	box-shadow: var(--sstb-shadow-sm);
}

.sstb-slot__meta { font-size: 11px; font-weight: 500; opacity: .75; }

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

.sstb-form { display: grid; gap: var(--sstb-space-4); }

.sstb-form__row {
	display: grid;
	gap: var(--sstb-space-4);
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
	.sstb-form__row { grid-template-columns: 1fr; }
}

.sstb-input { display: grid; gap: 6px; }

.sstb-input__label { font-size: 14px; font-weight: 600; color: var(--sstb-ink-2); }

.sstb-input input,
.sstb-input textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius-sm);
	background: var(--sstb-surface);
	color: var(--sstb-ink);
	font: inherit;
	font-size: 15px;
	transition: border-color var(--sstb-fast) var(--sstb-ease), box-shadow var(--sstb-fast) var(--sstb-ease);
}

.sstb-input input:focus,
.sstb-input textarea:focus {
	outline: 0;
	border-color: var(--sstb-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sstb-primary) 14%, transparent);
}

.sstb-input.has-error input,
.sstb-input.has-error textarea {
	border-color: var(--sstb-danger);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

.sstb-input__error {
	min-height: 0;
	font-size: 13px;
	color: var(--sstb-danger);
}

.sstb-input__error:not(:empty) { animation: sstb-fade-up var(--sstb-fast) var(--sstb-ease-out); }

.sstb-form__note {
	display: flex;
	align-items: center;
	gap: var(--sstb-space-2);
	margin: 0;
	padding: var(--sstb-space-3);
	border-radius: var(--sstb-radius-sm);
	background: var(--sstb-surface-2);
	color: var(--sstb-muted);
	font-size: 14px;
}

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

.sstb-review-panel { display: grid; gap: var(--sstb-space-4); }

.sstb-review-block {
	padding: var(--sstb-space-4);
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
}

.sstb-review-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sstb-space-3);
	margin-bottom: var(--sstb-space-3);
}

.sstb-review-block h4 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sstb-muted);
}

.sstb-review-rows { display: grid; gap: 8px; }

.sstb-review-row {
	display: flex;
	justify-content: space-between;
	gap: var(--sstb-space-3);
	font-size: 15px;
}

.sstb-review-row dt,
.sstb-review-row span:first-child { color: var(--sstb-muted); }
.sstb-review-row strong { font-weight: 600; text-align: right; }

.sstb-review-total {
	display: flex;
	justify-content: space-between;
	margin-top: var(--sstb-space-3);
	padding-top: var(--sstb-space-3);
	border-top: 2px solid var(--sstb-ink);
	font-size: 19px;
	font-weight: 700;
}

/* --- Payment ---------------------------------------------------------- */

.sstb-payment { display: grid; gap: var(--sstb-space-4); }

.sstb-payment__heading { margin: 0; font-size: 15px; font-weight: 700; }

.sstb-payment__types,
.sstb-payment__methods { display: grid; gap: var(--sstb-space-2); }

.sstb-payment-card { display: block; cursor: pointer; }
.sstb-payment-card input { position: absolute; opacity: 0; pointer-events: none; }

.sstb-payment-card__inner {
	display: flex;
	align-items: center;
	gap: var(--sstb-space-3);
	padding: var(--sstb-space-4);
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
	transition: all var(--sstb-fast) var(--sstb-ease);
}

.sstb-payment-card:hover .sstb-payment-card__inner { border-color: color-mix(in srgb, var(--sstb-primary) 45%, var(--sstb-line)); }

.sstb-payment-card input:checked + .sstb-payment-card__inner {
	border-color: var(--sstb-primary);
	background: color-mix(in srgb, var(--sstb-primary) 5%, #fff);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sstb-primary) 12%, transparent);
}

.sstb-payment-card input:focus-visible + .sstb-payment-card__inner { outline: 2px solid var(--sstb-primary); outline-offset: 2px; }

.sstb-payment-card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--sstb-surface-3);
	color: var(--sstb-ink-2);
	font-size: 20px;
}

.sstb-payment-card input:checked + .sstb-payment-card__inner .sstb-payment-card__icon {
	background: var(--sstb-primary);
	color: #fff;
}

.sstb-payment-card__text { flex: 1; display: grid; gap: 2px; }
.sstb-payment-card__text strong { font-size: 15px; }
.sstb-payment-card__text span { font-size: 13px; color: var(--sstb-muted); }

.sstb-payment-card__check {
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	border: 2px solid var(--sstb-line);
	border-radius: 50%;
	color: transparent;
	font-size: 12px;
	transition: all var(--sstb-fast) var(--sstb-ease);
}

.sstb-payment-card input:checked + .sstb-payment-card__inner .sstb-payment-card__check {
	border-color: var(--sstb-primary);
	background: var(--sstb-primary);
	color: #fff;
}

.sstb-payment__mount { min-height: 44px; }

.sstb-payment__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: var(--sstb-space-4);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface-2);
	font-size: 15px;
}

.sstb-payment__total strong { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

/* --- Confirmation ----------------------------------------------------- */

.sstb-step--confirmation { text-align: center; }

.sstb-success { display: grid; justify-items: center; gap: var(--sstb-space-3); margin-bottom: var(--sstb-space-5); }

.sstb-success__mark { display: block; width: 84px; height: 84px; }
.sstb-success__svg { width: 100%; height: 100%; }

.sstb-success__circle {
	stroke: var(--sstb-success);
	stroke-width: 3;
	stroke-dasharray: 152;
	stroke-dashoffset: 152;
	animation: sstb-draw .55s var(--sstb-ease-out) forwards;
}

.sstb-success__check {
	stroke: var(--sstb-success);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: sstb-draw .35s var(--sstb-ease-out) .45s forwards;
}

@keyframes sstb-draw { to { stroke-dashoffset: 0; } }

.sstb-success h3 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sstb-success p { margin: 0; color: var(--sstb-muted); max-width: 48ch; }

.sstb-confirmation { display: grid; gap: var(--sstb-space-4); text-align: left; }

.sstb-confirmation__number {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: var(--sstb-space-4);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface-2);
	text-align: center;
}

.sstb-confirmation__number span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sstb-muted); }
.sstb-confirmation__number strong { font-size: 24px; font-weight: 800; letter-spacing: .06em; }

.sstb-confirmation__schedule { display: grid; gap: 6px; }

.sstb-confirmation__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sstb-space-3);
	padding: 11px 14px;
	border-radius: var(--sstb-radius-sm);
	background: var(--sstb-surface-2);
	font-size: 14px;
}

.sstb-confirmation__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sstb-space-2);
}

/* --- Footer & overlays ------------------------------------------------ */

.sstb-modal__footer {
	display: flex;
	align-items: center;
	gap: var(--sstb-space-3);
	padding: var(--sstb-space-4) var(--sstb-space-5);
	border-top: 1px solid var(--sstb-line-soft);
	background: var(--sstb-surface);
}

.sstb-modal__footer-meta {
	flex: 1;
	font-size: 14px;
	color: var(--sstb-muted);
	text-align: right;
}

.sstb-modal__footer .sstb-btn--ghost { margin-right: auto; }

.sstb-modal__overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sstb-space-3);
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(2px);
	color: var(--sstb-muted);
	font-size: 15px;
}

.sstb-modal__overlay[hidden] { display: none; }

.sstb-modal__error {
	position: absolute;
	right: var(--sstb-space-5);
	bottom: 84px;
	left: var(--sstb-space-5);
	z-index: 6;
	padding: var(--sstb-space-3) var(--sstb-space-4);
	border-radius: var(--sstb-radius-sm);
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	font-size: 14px;
	animation: sstb-fade-up var(--sstb-base) var(--sstb-ease-out);
}

.sstb-modal__error[hidden] { display: none; }

@media (max-width: 640px) {
	.sstb-modal { padding: 0; }

	.sstb-modal__panel {
		width: 100%;
		max-height: 100%;
		height: 100%;
		border-radius: 0;
	}

	.sstb-steps__label { display: none; }
	.sstb-modal__title { font-size: 19px; }
	.sstb-modal__body { padding: var(--sstb-space-4); }
}

/* ==========================================================================
   7. Customer dashboard
   ========================================================================== */

.sstb-dashboard {
	width: min(1080px, 100% - 2 * var(--sstb-space-4));
	margin-inline: auto;
	padding-block: var(--sstb-space-6);
}

.sstb-dashboard__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sstb-space-4);
	margin-bottom: var(--sstb-space-6);
}

.sstb-dashboard__header h1 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); letter-spacing: -.02em; }

.sstb-dashboard__stats {
	display: grid;
	gap: var(--sstb-space-3);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin-bottom: var(--sstb-space-6);
}

.sstb-stat-tile {
	display: grid;
	gap: 4px;
	padding: var(--sstb-space-4);
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
}

.sstb-stat-tile__label { font-size: 13px; color: var(--sstb-muted); }
.sstb-stat-tile__value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

.sstb-dashboard__section { margin-bottom: var(--sstb-space-7); }
.sstb-dashboard__section h2 { margin: 0 0 var(--sstb-space-4); font-size: 20px; letter-spacing: -.01em; }

.sstb-next-list { display: grid; gap: var(--sstb-space-2); margin: 0; padding: 0; list-style: none; }

.sstb-next-list__item {
	display: flex;
	align-items: center;
	gap: var(--sstb-space-4);
	padding: var(--sstb-space-3) var(--sstb-space-4);
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
}

.sstb-next-list__date {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	padding: 6px 0;
	border-radius: var(--sstb-radius-sm);
	background: color-mix(in srgb, var(--sstb-primary) 10%, #fff);
	color: var(--sstb-primary);
}

.sstb-next-list__day { font-size: 20px; font-weight: 700; line-height: 1; }
.sstb-next-list__month { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sstb-next-list__body { flex: 1; display: grid; gap: 2px; }

.sstb-booking-list { display: grid; gap: var(--sstb-space-4); }

.sstb-booking-item {
	padding: var(--sstb-space-5);
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius);
	background: var(--sstb-surface);
	box-shadow: var(--sstb-shadow-sm);
	transition: opacity var(--sstb-base) var(--sstb-ease);
}

.sstb-booking-item.is-cancelling { opacity: .5; pointer-events: none; }

.sstb-booking-item__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sstb-space-3);
	margin-bottom: var(--sstb-space-4);
}

.sstb-booking-item__head h3 { margin: 0 0 2px; font-size: 18px; }
.sstb-booking-item__head p { margin: 0; font-size: 13px; }

.sstb-booking-item__sessions {
	display: grid;
	gap: 2px;
	margin-bottom: var(--sstb-space-4);
	border: 1px solid var(--sstb-line-soft);
	border-radius: var(--sstb-radius-sm);
	overflow: hidden;
}

.sstb-session-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sstb-space-3);
	padding: 10px 14px;
	background: var(--sstb-surface-2);
	font-size: 14px;
}

.sstb-session-row.is-cancelled { opacity: .45; text-decoration: line-through; }
.sstb-session-row__index { flex: none; width: 92px; color: var(--sstb-muted); font-size: 13px; }
.sstb-session-row__date { flex: 1; font-weight: 600; }
.sstb-session-row__time { color: var(--sstb-ink-2); }

.sstb-booking-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sstb-space-5);
	margin-bottom: var(--sstb-space-4);
	font-size: 14px;
}

.sstb-booking-item__meta > div { display: grid; gap: 2px; }
.sstb-booking-item__meta strong { font-size: 16px; }

.sstb-booking-item__payments { margin-bottom: var(--sstb-space-4); }
.sstb-booking-item__payments summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--sstb-primary); }

.sstb-mini-table { width: 100%; margin-top: var(--sstb-space-3); border-collapse: collapse; font-size: 14px; }
.sstb-mini-table td { padding: 8px 0; border-bottom: 1px solid var(--sstb-line-soft); }
.sstb-mini-table td:last-child { text-align: right; }

.sstb-booking-item__actions { display: flex; flex-wrap: wrap; gap: var(--sstb-space-2); }

.sstb-toast {
	position: fixed;
	bottom: var(--sstb-space-5);
	left: 50%;
	z-index: 100001;
	padding: 13px 22px;
	border-radius: var(--sstb-radius-pill);
	background: var(--sstb-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	box-shadow: var(--sstb-shadow-lg);
	transform: translate(-50%, 12px);
	animation: sstb-toast-in var(--sstb-base) var(--sstb-ease-out) forwards;
}

.sstb-toast[hidden] { display: none; }
.sstb-toast--error { background: var(--sstb-danger); }
.sstb-toast--success { background: var(--sstb-success); }

@keyframes sstb-toast-in {
	from { opacity: 0; transform: translate(-50%, 16px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   8. Pagination
   ========================================================================== */

.sstb-pagination { margin-block: var(--sstb-space-6); text-align: center; }

.sstb-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	margin: 0 3px;
	padding: 0 10px;
	border: 1px solid var(--sstb-line);
	border-radius: var(--sstb-radius-sm);
	color: var(--sstb-ink-2);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: all var(--sstb-fast) var(--sstb-ease);
}

.sstb-pagination .page-numbers:hover { border-color: var(--sstb-primary); color: var(--sstb-primary); }

.sstb-pagination .page-numbers.current {
	background: var(--sstb-primary);
	border-color: var(--sstb-primary);
	color: #fff;
}

/* Package selection / weekly programme enhancements */
.sstb-package-selector { margin: 0 0 22px; }
.sstb-package-selector__title { margin: 0 0 12px; font-size: 18px; }
.sstb-package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.sstb-package-card { appearance: none; text-align: left; background: #fff; border: 1px solid #dfe3e8; border-radius: 12px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.sstb-package-card:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(0,0,0,.06); }
.sstb-package-card.is-selected { border-color: currentColor; box-shadow: 0 0 0 2px currentColor; }
.sstb-package-card__name { font-size: 16px; }
.sstb-package-card__weeks { font-size: 13px; opacity: .75; }
.sstb-package-card__price { font-size: 18px; font-weight: 700; margin-top: 3px; }
.sstb-package-card__description { font-size: 13px; opacity: .75; line-height: 1.45; }
.sstb-booking-period { white-space: pre-line; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: #f6f7f9; font-weight: 600; }
@media (max-width: 640px) { .sstb-package-grid { grid-template-columns: 1fr; } }