/* Studio Booking: minimal neutral styles. Themes refine via the .sbk-* classes
   (the original class names are emitted too) or the custom properties below. */
.sbk {
	--sbk-accent: #36574a;
	--sbk-accent-soft: rgb(54 87 74 / 0.1);
	--sbk-on-accent: #fff;
	--sbk-border: rgb(128 128 128 / 0.35);
	--sbk-muted: currentColor;
	--sbk-error: #a8322b;
	--sbk-success: #2f6b4c;
	--sbk-info: #3a5a86;
	--sbk-warning: #7a5300;
	--sbk-radius: 12px;
	display: grid;
	gap: 1.5rem;
	min-width: 0;
}
/* Neutral greys follow the text colour, so they read on light and dark themes. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.sbk {
		--sbk-accent-soft: color-mix(in srgb, var(--sbk-accent) 12%, transparent);
		--sbk-border: color-mix(in srgb, currentColor 18%, transparent);
		--sbk-muted: color-mix(in srgb, currentColor 70%, transparent);
	}
}
/* Accent/status colours switch with the theme's color-scheme (a dark theme sets color-scheme: dark). */
@supports (color: light-dark(#000, #fff)) {
	.sbk {
		--sbk-accent: light-dark(#36574a, #a9c7b7);
		--sbk-on-accent: light-dark(#fff, #0f1a15);
		--sbk-error: light-dark(#a8322b, #f08a80);
		--sbk-success: light-dark(#2f6b4c, #7cc49a);
		--sbk-info: light-dark(#3a5a86, #8fb0df);
		--sbk-warning: light-dark(#7a5300, #e0b86a);
	}
}
.sbk-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.sbk-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sbk-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.sbk-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-radius);
	color: inherit;
	text-decoration: none;
}
.sbk-card__title { margin: 0; }
.sbk-card__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0; color: var(--sbk-muted); }
.sbk-card__body > * { margin: 0 0 0.75em; }
.sbk-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--sbk-border);
}
.sbk-price { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.sbk-card--link:hover, .sbk-card--link:focus-visible { border-color: var(--sbk-accent); }
.sbk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--sbk-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--sbk-accent);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.sbk-btn--primary { background: var(--sbk-accent); color: var(--sbk-on-accent); }
.sbk-btn--ghost { min-width: 44px; padding-inline: 0.5rem; border-color: transparent; }
.sbk-btn:disabled { opacity: 0.6; cursor: progress; }
.sbk a:focus-visible, .sbk-btn:focus-visible { outline: 2px solid var(--sbk-accent); outline-offset: 2px; }
.sbk-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sbk-steps { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; counter-reset: sbk-step; }
.sbk-step {
	counter-increment: sbk-step;
	flex: 1;
	min-width: 0;
	padding-top: 0.625rem;
	border-top: 3px solid var(--sbk-border);
	color: var(--sbk-muted);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}
.sbk-step::before { content: counter(sbk-step) "\00a0\00a0"; font-weight: 700; }
.sbk-step--done, .sbk-step--current { border-color: var(--sbk-accent); color: inherit; }
.sbk-step--current { font-weight: 650; }
.sbk-alert { margin: 0; padding: 0.875rem 1rem; border: 1px solid currentColor; border-radius: var(--sbk-radius); }
.sbk-alert--error { color: var(--sbk-error); }
.sbk-alert--success { color: var(--sbk-success); }
.sbk-alert--info { color: var(--sbk-info); }
.sbk-alert ul { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.sbk-alert a { color: inherit; font-weight: 600; }
.sbk-empty { margin: 0; padding: 1.5rem; border: 1px dashed var(--sbk-border); border-radius: var(--sbk-radius); color: var(--sbk-muted); text-align: center; }
.sbk-muted { color: var(--sbk-muted); }
.sbk-summary { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); margin: 0; }
.sbk-summary dt, .sbk-summary dd { margin: 0; padding: 0.5rem 1rem 0.5rem 0; border-top: 1px solid var(--sbk-border); }
.sbk-summary dt { color: var(--sbk-muted); }
.sbk-summary dd { font-weight: 600; }
.sbk-split { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .sbk-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.sbk-stack { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.sbk-stack > * { margin: 0; }
.sbk-calendar { padding: 1rem; border: 1px solid var(--sbk-border); border-radius: var(--sbk-radius); }
.sbk-calendar__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.sbk-calendar__title { margin: 0; font-size: 1.0625rem; text-transform: capitalize; }
.sbk-calendar__nav { display: flex; gap: 0.25rem; }
.sbk-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; text-align: center; }
.sbk-calendar__weekday { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--sbk-muted); }
.sbk-calendar__day {
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 3rem;
	aspect-ratio: 1;
	margin-inline: auto;
	border-radius: 50%;
	color: var(--sbk-muted);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.sbk-calendar__day--available { background: var(--sbk-accent-soft); color: var(--sbk-accent); font-weight: 650; }
.sbk-calendar__day--today { box-shadow: inset 0 0 0 2px currentColor; }
.sbk-calendar__day--selected { background: var(--sbk-accent); color: var(--sbk-on-accent); }
.sbk-calendar__day--disabled { opacity: 0.5; }
.sbk-form { display: grid; gap: 1.5rem; }
.sbk-form h2 { margin: 0; }
.sbk-field { display: grid; gap: 0.375rem; min-width: 0; }
.sbk-field__label { font-weight: 600; }
.sbk-field input:not([type=checkbox]):not([type=radio]), .sbk-field textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.6875rem 0.9375rem;
	border: 1px solid var(--sbk-border);
	border-radius: var(--sbk-radius);
	font: inherit;
	font-size: 1rem;
}
.sbk-field--checkbox { grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: start; }
.sbk-field--checkbox input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--sbk-accent); }
.sbk-field--checkbox .sbk-field__label { font-weight: 400; }
.sbk-field--checkbox .sbk-field__hint, .sbk-field--checkbox .sbk-field__error { grid-column: 2; }
.sbk-field__hint { margin: 0; font-size: 0.8125rem; color: var(--sbk-muted); }
.sbk-field__error { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--sbk-error); }
.sbk-field--invalid input, .sbk-field--invalid textarea { border-color: var(--sbk-error); }
.sbk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.sbk-slots legend { margin-bottom: 0.75rem; padding: 0; }
.sbk-slots legend h2 { margin: 0; }
.sbk-slot { position: relative; display: block; }
.sbk-slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sbk-slot span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid var(--sbk-border);
	border-radius: 999px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.sbk-slot input:checked + span { background: var(--sbk-accent); border-color: var(--sbk-accent); color: var(--sbk-on-accent); }
.sbk-slot input:focus-visible + span { outline: 2px solid var(--sbk-accent); outline-offset: 3px; }
.sbk-form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sbk-badge { display: inline-flex; padding: 0.125rem 0.625rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sbk-border); font-size: 0.75rem; font-weight: 650; }
.sbk-badge--pending { color: var(--sbk-warning); }
.sbk-badge--confirmed { color: var(--sbk-success); }
.sbk-badge--cancelled { color: var(--sbk-error); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.sbk-badge { background: color-mix(in srgb, currentColor 12%, transparent); box-shadow: none; }
}