/* Service Booking Calendar – front end.
 * Change the colours to match your theme by overriding these variables, e.g.
 * .sbc-booking { --sbc-accent: #e85d04; }
 */
.sbc-booking {
	--sbc-accent: #2563eb;
	--sbc-accent-contrast: #fff;
	--sbc-accent-soft: rgba(37, 99, 235, 0.1);
	--sbc-border: rgba(0, 0, 0, 0.14);
	--sbc-muted: rgba(0, 0, 0, 0.6);
	--sbc-surface: #fff;
	--sbc-radius: 10px;
	--sbc-error: #b42318;

	max-width: 820px;
	margin: 0 auto 2em;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
	box-sizing: border-box;
}
.sbc-booking *,
.sbc-booking *::before,
.sbc-booking *::after { box-sizing: inherit; }

.sbc-booking button { font: inherit; cursor: pointer; }
.sbc-booking button:disabled { cursor: default; }
.sbc-booking :focus-visible { outline: 2px solid var(--sbc-accent); outline-offset: 2px; }
.sbc-booking .sbc-step-title:focus { outline: none; }

.sbc-loading { padding: 1.5em 0; color: var(--sbc-muted); }
.sbc-error {
	margin: 0 0 1em;
	padding: 0.75em 1em;
	border-radius: var(--sbc-radius);
	background: #fef3f2;
	border: 1px solid #fecdca;
	color: var(--sbc-error);
}
.sbc-empty { color: var(--sbc-muted); }

/* Guard against theme button styles (backgrounds, borders, caps, shadows on hover/focus). */
.sbc-booking button,
.sbc-booking button:hover,
.sbc-booking button:focus,
.sbc-booking button:active {
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	text-shadow: none;
	min-height: 0;
	line-height: 1.4;
}
.sbc-booking .sbc-card:hover,
.sbc-booking .sbc-card:focus,
.sbc-booking .sbc-card:active { background: var(--sbc-surface); color: inherit; }
.sbc-booking .sbc-back:hover,
.sbc-booking .sbc-back:focus,
.sbc-booking .sbc-link:hover,
.sbc-booking .sbc-link:focus { background: none; color: var(--sbc-accent); border: 0; }
.sbc-booking .sbc-cal__nav:hover,
.sbc-booking .sbc-cal__nav:focus { background: transparent; }
.sbc-booking .sbc-cal__day:hover,
.sbc-booking .sbc-cal__day:focus { background: transparent; color: inherit; }
.sbc-booking .sbc-slot:focus { background: var(--sbc-surface); color: var(--sbc-accent); }

/* Progress */
.sbc-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1.25em;
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
	font-size: 0.875em;
	color: var(--sbc-muted);
}
.sbc-progress li { display: flex; align-items: center; gap: 0.45em; margin: 0; }
.sbc-progress li span {
	display: inline-grid;
	place-items: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	border: 1px solid var(--sbc-border);
	font-size: 0.85em;
	font-weight: 600;
}
.sbc-progress li.is-current { color: inherit; font-weight: 600; }
.sbc-progress li.is-current span,
.sbc-progress li.is-done span { background: var(--sbc-accent); border-color: var(--sbc-accent); color: var(--sbc-accent-contrast); }

.sbc-step-title { margin: 0 0 0.35em; font-size: 1.35em; }
.sbc-chosen { margin: 0 0 1.25em; color: var(--sbc-muted); }

.sbc-back,
.sbc-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--sbc-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.sbc-back { margin-bottom: 0.75em; text-decoration: none; font-size: 0.9em; }
.sbc-back:hover { text-decoration: underline; }

/* Cards */
.sbc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0.85em;
}
.sbc-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2em;
	width: 100%;
	padding: 1em 1.1em;
	text-align: left;
	background: var(--sbc-surface);
	color: inherit;
	border: 1px solid var(--sbc-border);
	border-radius: var(--sbc-radius);
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sbc-booking .sbc-card:hover { border-color: var(--sbc-accent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07); transform: translateY(-1px); }
.sbc-booking .sbc-card.is-selected { border-color: var(--sbc-accent); box-shadow: 0 0 0 1px var(--sbc-accent); }
.sbc-card__title { font-weight: 600; font-size: 1.05em; }
.sbc-card__meta { font-size: 0.9em; color: var(--sbc-accent); font-weight: 500; }
.sbc-card__desc { font-size: 0.9em; color: var(--sbc-muted); }
.sbc-card--any { border-style: dashed; }
.sbc-avatar {
	display: grid;
	place-items: center;
	width: 2.6em;
	height: 2.6em;
	margin-bottom: 0.35em;
	border-radius: 50%;
	background: var(--sbc-accent-soft);
	color: var(--sbc-accent);
	font-weight: 700;
}

/* Date & time */
.sbc-datetime {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 1.5em;
	align-items: start;
}
@media (max-width: 640px) {
	.sbc-datetime { grid-template-columns: 1fr; }
}

.sbc-cal {
	padding: 1em;
	background: var(--sbc-surface);
	border: 1px solid var(--sbc-border);
	border-radius: var(--sbc-radius);
}
.sbc-cal.is-loading .sbc-cal__grid { opacity: 0.45; }
.sbc-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75em; }
.sbc-cal__title { font-weight: 600; }
.sbc-cal__nav {
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	border: 1px solid var(--sbc-border);
	background: transparent;
	color: inherit;
	font-size: 1.2em;
	line-height: 1;
}
.sbc-booking .sbc-cal__nav:hover:not(:disabled) { border-color: var(--sbc-accent); color: var(--sbc-accent); }
.sbc-cal__nav:disabled { opacity: 0.3; }
.sbc-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; transition: opacity 0.15s; }
.sbc-cal__dow { text-align: center; font-size: 0.75em; font-weight: 600; color: var(--sbc-muted); padding-bottom: 0.4em; text-transform: uppercase; letter-spacing: 0.03em; }
.sbc-cal__day {
	aspect-ratio: 1;
	min-height: 2.3em;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	opacity: 0.35;
	font-size: 0.95em;
}
.sbc-cal__day.is-today { text-decoration: underline; text-underline-offset: 3px; }
.sbc-booking .sbc-cal__day.is-available { opacity: 1; background: var(--sbc-accent-soft); color: var(--sbc-accent); font-weight: 600; }
.sbc-booking .sbc-cal__day.is-available:hover { background: var(--sbc-accent); color: var(--sbc-accent-contrast); }
.sbc-booking .sbc-cal__day.is-selected,
.sbc-booking .sbc-cal__day.is-selected:hover { background: var(--sbc-accent); color: var(--sbc-accent-contrast); }
.sbc-cal__empty { margin: 0.75em 0 0; font-size: 0.9em; color: var(--sbc-muted); text-align: center; }

.sbc-slots__title { margin: 0 0 0.75em; font-size: 1em; }
.sbc-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.5em; }
.sbc-slot {
	padding: 0.6em 0.4em;
	border: 1px solid var(--sbc-accent);
	border-radius: 8px;
	background: var(--sbc-surface);
	color: var(--sbc-accent);
	font-weight: 600;
}
.sbc-booking .sbc-slot:hover,
.sbc-booking .sbc-slot:focus-visible { background: var(--sbc-accent); color: var(--sbc-accent-contrast); }
.sbc-hint { color: var(--sbc-muted); margin: 0.5em 0; }

/* Details */
.sbc-summary {
	margin: 0 0 1.5em;
	padding: 1em 1.1em;
	border-radius: var(--sbc-radius);
	background: var(--sbc-accent-soft);
}
.sbc-summary > div { display: flex; gap: 1em; padding: 0.2em 0; }
.sbc-summary dt { flex: 0 0 5.5em; margin: 0; font-weight: 600; }
.sbc-summary dd { margin: 0; }
.sbc-summary .sbc-link { margin-left: 0.5em; font-size: 0.85em; }

.sbc-form { max-width: 520px; }
.sbc-field { margin: 0 0 1em; }
.sbc-field label { display: block; margin-bottom: 0.3em; font-weight: 600; font-size: 0.95em; }
.sbc-field input,
.sbc-field textarea {
	display: block;
	width: 100%;
	padding: 0.65em 0.8em;
	border: 1px solid var(--sbc-border);
	border-radius: 8px;
	background: var(--sbc-surface);
	color: inherit;
	font: inherit;
}
.sbc-field input:focus,
.sbc-field textarea:focus { border-color: var(--sbc-accent); outline: 2px solid var(--sbc-accent-soft); }
.sbc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sbc-pending-note { font-size: 0.9em; color: var(--sbc-muted); }
.sbc-submit {
	padding: 0.8em 1.6em;
	border: 0;
	border-radius: 8px;
	background: var(--sbc-accent);
	color: var(--sbc-accent-contrast);
	font-weight: 600;
	font-size: 1em;
}
.sbc-booking .sbc-submit:hover:not(:disabled),
.sbc-booking .sbc-submit:focus { filter: brightness(1.08); background: var(--sbc-accent); color: var(--sbc-accent-contrast); border: 0; }
.sbc-submit:disabled { opacity: 0.6; }

/* Done */
.sbc-done { text-align: center; padding: 1em 0; }
.sbc-done .sbc-summary { text-align: left; max-width: 480px; margin: 1.25em auto; }
.sbc-done__icon {
	display: grid;
	place-items: center;
	width: 3.2em;
	height: 3.2em;
	margin: 0 auto 0.75em;
	border-radius: 50%;
	background: var(--sbc-accent);
	color: var(--sbc-accent-contrast);
	font-size: 1.4em;
}