/**
 * Booking Flow wizard styles — UX redesign.
 *
 * Component prefix: .sbf (Sthlmsauna Booking Flow).
 * Tokens map to the global design system (see design/DESIGN.md and the
 * theme's theme.json). Brand color resolves automatically via the active
 * style variation — no hex literals here.
 */

/* ============ Variables ============ */

.sbf {
	--sbf-card-bg: #ffffff;
	--sbf-text: var(--wp--preset--color--ink);
	--sbf-text-muted: var(--wp--preset--color--muted-text);
	--sbf-primary: var(--wp--preset--color--primary);
	--sbf-primary-dark: var(--wp--preset--color--primary-hover);
	--sbf-primary-light: var(--wp--preset--color--primary-light);
	--sbf-border: var(--wp--preset--color--hairline);
	--sbf-border-selectable: var(--wp--preset--color--hairline);
	--sbf-radius: var(--wp--custom--radius--md);
	--sbf-radius-sm: var(--wp--custom--radius--sm);
	--sbf-shadow: var(--wp--custom--shadow--card);
	--sbf-shadow-hover: var(--wp--custom--shadow--card);
	--sbf-transition: var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
	--sbf-error: var(--wp--preset--color--error);

	color: var(--sbf-text);
	font-size: 16px;
	line-height: 1.5;
	padding: 3rem 1rem;
	min-height: 60vh;
}

.sbf *, .sbf *::before, .sbf *::after { box-sizing: border-box; }
.sbf button, .sbf a, .sbf input, .sbf select { touch-action: manipulation; }
[x-cloak] { display: none !important; }

/* ============ Storefront / WooCommerce CSS resets ============ */

/* Undo Storefront float-based checkout layout */
.sbf .col2-set,
.sbf #order_review,
.sbf #order_review_heading {
	width: auto;
	float: none;
	margin-right: 0;
}

.sbf .col2-set .form-row-first,
.sbf .col2-set .form-row-last,
.sbf .form-row-first,
.sbf .form-row-last {
	width: 100%;
	float: none;
	margin-right: 0;
	clear: none;
}

/* Undo Storefront payment section styling */
.sbf #payment .payment_methods li .payment_box {
	padding: 0;
}

.sbf #payment .place-order {
	padding: 0;
	margin-top: 0;
}

.sbf #payment .place-order .button {
	font-size: inherit;
}

/* WooCommerce notices — match wizard error style */
.sbf .woocommerce-NoticeGroup {
	margin-bottom: 1rem;
}

.sbf .woocommerce-error,
.sbf .woocommerce-message,
.sbf .woocommerce-info {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: var(--sbf-radius-sm);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Empty notice shells are produced when we re-route a notice through
   wc_add_notice and return an empty message from the original print call
   (see WooCommerce::queue_change_payment_notice). Hide them so the empty
   shell outside .sbf doesn't render an empty band. */
.woocommerce-info:empty,
.woocommerce-error:empty,
.woocommerce-message:empty {
	display: none;
}

.sbf .woocommerce-error {
	border-left: 3px solid var(--sbf-error);
	background: #fff5f5;
	color: var(--sbf-error);
}

.sbf .woocommerce-message {
	border-left: 3px solid #0f834d;
	background: #f0faf5;
	color: #0f834d;
}

.sbf .woocommerce-info {
	border-left: 3px solid var(--sbf-primary);
	background: var(--sbf-primary-light);
	color: var(--sbf-text);
}

.sbf .woocommerce-error li,
.sbf .woocommerce-message li,
.sbf .woocommerce-info li {
	list-style: none;
	margin: 0;
}

.sbf .woocommerce-error li > a {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
	cursor: default;
}

.sbf .checkout-inline-error-message {
	color: var(--sbf-error);
	font-size: 0.8125rem;
	margin: 0.25rem 0 0;
}

.sbf .woocommerce-error::before,
.sbf .woocommerce-message::before,
.sbf .woocommerce-info::before {
	display: none;
}

.sbf .woocommerce-error .button,
.sbf .woocommerce-message .button,
.sbf .woocommerce-info .button {
	float: none;
	padding: 0;
	margin-left: 0;
	border-left: 0;
	background: none;
	color: inherit;
	text-decoration: underline;
}

/* Undo Storefront coupon form margin */
.sbf .checkout_coupon {
	margin-bottom: 0;
}

/* Undo Storefront form position override */
.sbf form.checkout {
	position: relative !important;
}

/* ============ Button reset ============ */
/* Neutralize theme button styles (background, shadow, text-transform)
	without stripping structural props (border, padding, border-radius)
	that component classes add back. */

.sbf button,
.sbf [type="button"],
.sbf [type="submit"],
.sbf .button {
	appearance: none;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-decoration: none;
	text-transform: none;
	letter-spacing: inherit;
	box-shadow: none;
	cursor: pointer;
}

.sbf button:hover,
.sbf button:focus,
.sbf button:active,
.sbf [type="button"]:hover,
.sbf [type="button"]:focus,
.sbf [type="button"]:active,
.sbf [type="submit"]:hover,
.sbf [type="submit"]:focus,
.sbf [type="submit"]:active,
.sbf .button:hover,
.sbf .button:focus,
.sbf .button:active {
	box-shadow: none;
	text-decoration: none;
}

.sbf button:focus,
.sbf .button:focus,
.sbf a:focus {
	outline: none;
}

.sbf button:focus-visible,
.sbf .button:focus-visible,
.sbf a:focus-visible {
	outline: 2px solid var(--sbf-primary);
	outline-offset: 2px;
}

.sbf__day:focus-visible {
	outline-offset: -2px;
	border-radius: 2px;
}

/* ============ Page title ============ */

.sbf__title {
	max-width: 1100px;
	margin: 0 auto 1.5rem;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 300;
	color: var(--sbf-text);
	text-wrap: balance;
}

/* ============ Layout ============ */

.sbf__layout {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.sbf__layout {
		grid-template-columns: 1fr 320px;
		align-items: start;
	}
}

.sbf__main {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	/* Prevent child overflow from expanding the grid column */
	min-width: 0;
}

.sbf__sidebar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 900px) {
	.sbf__sidebar {
		position: sticky;
		top: 1.5rem;
	}
}

/* ============ Steps + headings ============ */

.sbf__step {
	margin-bottom: 0.25rem;
}

.sbf__heading {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sbf-text);
	margin: 0 0 0.5rem;
	padding-left: 0.25rem;
	text-wrap: balance;
}

/* h1 spans both columns in the .sbf__layout grid (1fr 320px >=900px). */
.sbf__page-title {
	grid-column: 1 / -1;
}

/* ============ Cards ============ */

.sbf__card {
	background: var(--sbf-card-bg);
	border-radius: var(--sbf-radius);
	padding: 1.5rem;
	box-shadow: var(--sbf-shadow);
	transition: opacity var(--sbf-transition);
	/* Prevent flex children (date strip) from blowing out the card width */
	min-width: 0;
	overflow: hidden;
}

.sbf__card.is-placeholder {
	opacity: 0.5;
}

.sbf__card--sidebar {
	padding: 1.25rem;
}

.sbf__card-title {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sbf-text-muted);
	margin: 0 0 1rem;
}

.sbf__placeholder {
	color: var(--sbf-text-muted);
	font-size: 0.875rem;
	margin: 0;
	padding: 0.5rem 0;
}

/* ============ Location cards ============ */

.sbf__locations {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.sbf__location-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0.875rem 2.5rem 0.875rem 1rem;
	border: 2px solid var(--sbf-border-selectable);
	border-radius: var(--sbf-radius-sm);
	background: var(--sbf-card-bg);
	cursor: pointer;
	transition: background var(--sbf-transition);
	font: inherit;
	color: inherit;
}

.sbf__location-card:hover {
	background: var(--wp--preset--color--surface-strong);
}

.sbf__location-card.is-selected {
	border-color: var(--sbf-primary);
	background: var(--sbf-primary-light);
	color: var(--sbf-primary-dark);
}

.sbf__location-card.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: var(--wp--preset--color--surface-strong);
}

.sbf__location-card.is-disabled:hover {
	background: var(--wp--preset--color--surface-strong);
}

.sbf__location-locked {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--muted-soft);
}

.sbf__location-locked-mobile {
	display: none;
	color: var(--sbf-text-muted);
	font-weight: 400;
	font-size: 0.875rem;
	margin-left: 0.25rem;
}

@media (max-width: 600px) {
	.sbf__location-card {
		padding-right: 1rem;
		align-items: center;
		text-align: center;
	}

	.sbf__location-locked {
		display: none;
	}

	.sbf__location-locked-mobile {
		display: inline;
	}
}

.sbf__location-name {
	font-size: 1.125rem;
	font-weight: 700;
}

.sbf__location-desc {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted-text);
	margin-top: 0.25rem;
}

/* ============ Persons buttons ============ */

.sbf__persons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.sbf__person-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-width: 4.5rem;
	padding: 0.75rem 0.5rem;
	border: 2px solid var(--sbf-border-selectable);
	border-radius: var(--sbf-radius-sm);
	background: var(--sbf-card-bg);
	font: inherit;
	color: var(--sbf-text);
	cursor: pointer;
	transition: background var(--sbf-transition);
}

.sbf__person-emoji {
	font-size: 1.5rem;
	line-height: 1;
}

.sbf__person-num {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sbf-text-muted);
}

.sbf__person-btn:hover {
	background: var(--wp--preset--color--surface-strong);
}

.sbf__person-btn.is-selected {
	border-color: var(--sbf-primary);
	background: var(--sbf-primary-light);
	color: var(--sbf-primary-dark);
}

/* ============ Date strip ============ */

.sbf__date-strip-wrap {
	position: relative;
	overflow: visible;
}

/* Arrows at absolute edges of the card (negative margin) */
.sbf__date-strip-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	padding: 0 0.25rem;
	border: none;
	color: var(--sbf-text);
	cursor: pointer;
	transition: color var(--sbf-transition);
}

.sbf__date-strip-arrow svg {
	display: block;
}

.sbf button.sbf__date-strip-arrow--left,
.sbf button.sbf__date-strip-arrow--left:hover,
.sbf button.sbf__date-strip-arrow--left:focus,
.sbf button.sbf__date-strip-arrow--left:active {
	left: -1.5rem;
	background: linear-gradient(to right, var(--sbf-card-bg) 50%, transparent);
}

.sbf button.sbf__date-strip-arrow--right,
.sbf button.sbf__date-strip-arrow--right:hover,
.sbf button.sbf__date-strip-arrow--right:focus,
.sbf button.sbf__date-strip-arrow--right:active {
	right: -1.5rem;
	background: linear-gradient(to left, var(--sbf-card-bg) 50%, transparent);
}

.sbf__date-strip-arrow:hover:not(:disabled) {
	color: var(--sbf-primary);
}

.sbf__date-strip-arrow:disabled {
	opacity: 0.08;
	cursor: default;
	pointer-events: none;
}

.sbf__date-strip {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	min-width: 0;
	padding: 0;
	/* Offset the snap point so items don't snap behind the arrow fade */
	scroll-padding: 0 1rem 0 1rem;
}

.sbf__date-strip::-webkit-scrollbar {
	display: none;
}

.sbf__date-strip > button:first-of-type {
	margin-left: 1rem;
}

.sbf__date-strip > button:last-of-type {
	margin-right: 1rem;
}

.sbf__day {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	width: 4.25rem;
	padding: 0.75rem 0.25rem 0.5rem;
	border: none;
	border-bottom: 2px solid var(--sbf-border);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transition: color var(--sbf-transition), border-color var(--sbf-transition), background var(--sbf-transition);
	scroll-snap-align: start;
	font: inherit;
	color: var(--sbf-text-muted);
	user-select: none;
}

.sbf__day.is-available {
	color: var(--sbf-text);
}

.sbf__day.is-available:hover {
	background: var(--wp--preset--color--surface-strong);
}

.sbf__day.is-selected {
	background: var(--sbf-primary);
	color: var(--sbf-primary-light);
	border-bottom-color: var(--sbf-primary);
	font-weight: 600;
}

.sbf__day.is-selected:hover {
	background: var(--sbf-primary-dark);
}

.sbf__day.is-full,
.sbf__day.is-unavailable {
	color: var(--sbf-text-muted);
	background: var(--wp--preset--color--surface-strong);
}

.sbf__day.is-full:hover {
	background: var(--wp--preset--color--hairline);
}

.sbf__day.is-full.is-selected {
	background: var(--sbf-primary);
	color: var(--sbf-primary-light);
}

.sbf__day.is-full.is-selected:hover {
	background: var(--sbf-primary-dark);
}

.sbf__day.is-unavailable {
	cursor: pointer;
}

.sbf__date-message {
	position: absolute;
	bottom: -2.25rem;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--surface);
	background: var(--sbf-text);
	padding: 0.35rem 0.75rem;
	border-radius: var(--sbf-radius-sm);
	pointer-events: none;
	z-index: 3;
}
.sbf__day-name {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 500;
}

.sbf__day-num {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

.sbf__day-month {
	font-size: 0.6875rem;
	text-transform: uppercase;
	opacity: 0.7;
}

/* ============ Slot grid ============ */

.sbf__slots {
	margin-top: 1rem;
}

.sbf__slot-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
}

@media (min-width: 480px) {
	.sbf__slot-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 700px) {
	.sbf__slot-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.sbf__slot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	padding: 0.875rem 1rem;
	border: 2px solid var(--sbf-border-selectable);
	border-radius: var(--sbf-radius-sm);
	background: var(--sbf-card-bg);
	cursor: pointer;
	transition: background var(--sbf-transition);
	font: inherit;
	color: inherit;
	text-align: left;
	opacity: 0;
	animation: sbf-slot-appear 0.3s ease forwards;
	animation-delay: var(--sbf-slot-delay, 0s);
}

@keyframes sbf-slot-appear {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.sbf__slot:hover:not(:disabled) {
	background: var(--wp--preset--color--surface-strong);
}

.sbf__slot.is-selected {
	border-color: var(--sbf-primary);
	background: var(--sbf-primary-light);
	color: var(--sbf-primary-dark);
}

.sbf__slot.is-full {
	background: var(--sbf-border);
	border-color: var(--sbf-border);
	color: var(--sbf-text-muted);
	cursor: not-allowed;
	opacity: 1;
}

.sbf__slot-time {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sbf-primary-dark);
}

.sbf__slot-name {
	font-size: 0.875rem;
}

.sbf__slot-avail {
	font-size: 0.75rem;
	color: var(--sbf-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ============ Skeletons ============ */

.sbf__skeleton {
	height: 3rem;
	border-radius: var(--sbf-radius-sm);
	margin-bottom: 0.5rem;
	background: linear-gradient(90deg, var(--wp--preset--color--surface-strong) 0%, var(--wp--preset--color--hairline) 50%, var(--wp--preset--color--surface-strong) 100%);
	background-size: 200% 100%;
	animation: sbf-shimmer 1.4s linear infinite;
}

@keyframes sbf-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.sbf__slots-loading {
	margin-top: 1rem;
}

.sbf__skeleton--slot {
	height: 4.5rem;
	border-radius: var(--sbf-radius-sm);
}

/* ============ Error / empty ============ */

.sbf__error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--sbf-error);
	background: #fff5f5;
	color: var(--sbf-error);
	border-radius: var(--sbf-radius-sm);
}

.sbf__error-retry {
	flex: 0 0 auto;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--sbf-error);
	border-radius: var(--sbf-radius-sm);
	color: var(--sbf-error);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.sbf__error-retry:hover {
	background: var(--sbf-error);
	color: var(--wp--preset--color--surface);
}

.sbf__notice {
	padding: 0.75rem 1rem;
	border-radius: var(--sbf-radius-sm);
	margin-bottom: 1rem;
}

.sbf__notice--warning {
	border-left: 3px solid #b8860b;
	background: #fdf6e3;
	color: #6b5900;
}

.sbf__notice-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
}

.sbf__notice-card-icon {
	flex-shrink: 0;
	color: var(--sbf-text-muted);
}

.sbf__notice-card-text {
	flex: 1;
	font-size: 0.9375rem;
	color: var(--sbf-text);
}

.sbf__notice-card-link {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sbf-primary);
	text-decoration: none;
	white-space: nowrap;
}

.sbf__notice-card-link:hover {
	color: var(--sbf-primary-dark);
	text-decoration: underline;
}

@media (max-width: 480px) {
	.sbf__notice-card {
		flex-wrap: wrap;
	}

	.sbf__notice-card-text {
		flex-basis: calc(100% - 32px);
	}

	.sbf__notice-card-link {
		flex-basis: 100%;
		margin-top: 0.25rem;
	}
}

.sbf__slots-heading {
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
	text-transform: capitalize;
}

.sbf__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--sbf-text-muted);
	padding: 2rem 1.5rem;
	gap: 0.5rem;
}

.sbf__empty-icon {
	opacity: 0.4;
	margin-bottom: 0.25rem;
}

.sbf__empty-text {
	margin: 0;
	font-weight: 600;
	color: var(--sbf-text);
}

.sbf__empty-hint {
	margin: 0;
	font-size: 0.875rem;
}

.sbf__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============ Checkout sections (multi-box) ============ */

.sbf__checkout-sections {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sbf__checkout-loading {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sbf__checkout-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Override theme clearfix pseudo-elements that break flex layout */
form.sbf__checkout-form::before,
form.sbf__checkout-form::after {
	content: none;
	display: none;
}

/* --- Box: Billing fields (guests only — hidden when empty) --- */

.sbf__checkout-box--billing .woocommerce-billing-fields h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.sbf__checkout-box--billing .woocommerce-billing-fields__field-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* --- Coupon toggle (outside card) --- */

.sbf__coupon-toggle-wrap {
	text-align: center;
	padding: 0.25rem 0;
}

.sbf__coupon-toggle-wrap .woocommerce-info {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: var(--sbf-text-muted);
	font-size: 0.875rem;
}

.sbf__coupon-toggle-wrap .woocommerce-info::before {
	display: none;
}

.sbf__coupon-toggle-wrap a {
	color: var(--sbf-primary);
	text-decoration: none;
	font-weight: 600;
}

.sbf__coupon-toggle-wrap a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

/* --- Coupon form (inside card) --- */

.sbf__coupon-fields {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.sbf__coupon-fields input[type="text"] {
	flex: 1 1 0%;
	min-width: 0;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--sbf-border);
	border-radius: var(--sbf-radius-sm);
	font: inherit;
}

.sbf__coupon-fields input[type="text"]:focus {
	border-color: var(--wp--preset--color--ink);
	outline: none;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

.sbf__coupon-fields .button {
	flex: 0 0 auto;
	padding: 0.625rem 1rem;
	background: var(--sbf-primary);
	color: var(--wp--preset--color--surface);
	border: 0;
	border-radius: var(--sbf-radius-sm);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

/* --- Box: Product info --- */

.sbf__info-box {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.sbf__info-icon {
	flex: 0 0 auto;
	color: var(--sbf-primary);
	margin-top: 0.125rem;
}

.sbf__info-text {
	flex: 1 1 auto;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--sbf-text);
}

.sbf__info-text p:first-child {
	margin-top: 0;
}

.sbf__info-text p:last-child {
	margin-bottom: 0;
}

/* --- Box: Order review --- */

.sbf__checkout-box--review .shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.sbf__checkout-box--review thead {
	display: none; /* hide "Product / Subtotal" header row */
}

.sbf__checkout-box--review .cart_item td {
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--sbf-border);
}

/* Hide quantity — single booking, no need */
.sbf__checkout-box--review .product-quantity {
	display: none;
}

/* Hide booking details / variation data under product name */
.sbf__checkout-box--review .product-name dl,
.sbf__checkout-box--review .product-name .variation,
.sbf__checkout-box--review .product-name .wc-item-meta {
	display: none;
}

/* Product name: clean single line */
.sbf__checkout-box--review .product-name {
	font-weight: 500;
}

.sbf__checkout-box--review .product-total {
	text-align: right;
	white-space: nowrap;
}

/* FPDWS first-payment date row appended under the product subtotal. */
.sbf__first-payment-row {
	display: block;
	margin-top: 0.25rem;
	color: var(--sbf-text-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	white-space: normal;
}

.sbf__checkout-box--review tfoot th,
.sbf__checkout-box--review tfoot td {
	padding: 0.5rem 0;
	font-weight: normal;
	border-bottom: 1px solid var(--sbf-border);
	text-align: left;
}

/* Show order total (hidden by theme) */
.sbf__checkout-box--review tfoot .order-total {
	display: table-row;
}

.sbf__checkout-box--review tfoot .order-total th,
.sbf__checkout-box--review tfoot .order-total td {
	font-weight: normal;
	border-bottom: none;
	padding-top: 0.75rem;
}

/* Hide subtotal — redundant when there's one item */
.sbf__checkout-box--review tfoot .cart-subtotal {
	display: none;
}

/* Override theme background on table cells */
.sbf__checkout-box--review table th,
.sbf__checkout-box--review table:not(.has-background) th,
.sbf__checkout-box--review table td,
.sbf__checkout-box--review table:not(.has-background) tbody td {
	background-color: transparent;
}

.sbf__checkout-box--review tfoot td {
	text-align: right;
}

/* --- Payment methods (no card wrapper — each method is its own card) --- */

.sbf__checkout-box--payment .wc_payment_methods {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sbf__checkout-box--payment .wc_payment_method,
.sbf #payment .payment_methods > li:not(.woocommerce-notice) {
	padding: 0.875rem;
	border: 1px solid var(--sbf-border);
	border-radius: var(--sbf-radius-sm);
	margin-bottom: 0.5rem;
	background: var(--sbf-card-bg) !important;
	transition: background var(--sbf-transition), border-color var(--sbf-transition);
}

.sbf__checkout-box--payment .wc_payment_method:last-child {
	margin-bottom: 0;
}

.sbf #payment .payment_methods li:last-child:not(.woocommerce-notice) {
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--sbf-border);
}

.sbf #payment .sbf__checkout-box--payment .wc_payment_method.is-active,
.sbf #payment .payment_methods li.is-active,
.sbf #payment .payment_methods li.is-active:last-child {
	border-color: var(--sbf-primary);
	border-bottom: 1px solid var(--sbf-primary);
	background: var(--sbf-primary-light) !important;
}

.sbf__checkout-box--payment #payment .payment_methods > .wc_payment_method label {
	cursor: pointer;
	font-weight: 600;
	margin: 0;
	padding: 0;
}

.sbf__checkout-box--payment .payment_box,
.sbf #payment .payment_methods > li .payment_box {
	padding: 1em 0 0;
	background-color: transparent !important;
}

.sbf__checkout-box--payment .payment_box fieldset,
.sbf #payment .payment_methods > li .payment_box fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
}

.sbf__checkout-box--payment .payment_box ul,
.sbf #payment .payment_methods > li .payment_box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sbf__checkout-box--payment .payment_box ul li,
.sbf #payment .payment_methods > li .payment_box ul li {
	list-style: none;
	margin: 0;
	padding: 0.25rem 0;
}

.sbf__checkout-box--payment .wc_payment_method label img,
.sbf #payment .payment_methods > li label img {
	display: none;
}

/* Reset WooCommerce inline place-order background */
.sbf #payment .place-order {
	background-color: transparent !important;
}

/* --- WooCommerce notices --- */

.sbf .woocommerce-error {
	margin-bottom: 0;
}

/* --- Box: Terms & place order --- */

.sbf__checkout-box--submit .place-order {
	padding: 0;
	margin: 0;
}

.sbf__checkout-box--submit .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 1rem;
}

.sbf__checkout-box--submit #place_order {
	display: block;
	width: 100%;
	padding: 1rem 1.5rem;
	background: var(--sbf-primary);
	color: var(--wp--preset--color--surface);
	border: 0;
	border-radius: var(--sbf-radius-sm);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--sbf-transition);
	margin-top: 0.5rem;
}

.sbf__checkout-box--submit #place_order:hover {
	background: var(--sbf-primary-dark);
}

.sbf__checkout-box--submit #place_order.processing {
	pointer-events: none;
	opacity: 0.85;
}

/* --- Button spinner --- */

.sbf__btn-spinner {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: var(--wp--preset--color--surface);
	border-radius: 50%;
	animation: sbf-spin 0.6s linear infinite;
	vertical-align: middle;
}

.sbf__btn-spinner--slot {
	width: 1.5rem;
	height: 1.5rem;
	border-width: 2.5px;
	border-color: rgba(0, 0, 0, 0.12);
	border-top-color: var(--sbf-primary);
}

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

/* Slot loading state */
.sbf__slot {
	position: relative;
}

.sbf__slot.is-loading {
	pointer-events: none;
}

.sbf__slot-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
	border-radius: inherit;
}

/* --- WC form fields inside checkout --- */

.sbf__checkout-form .form-row {
	margin-bottom: 0.75rem;
}

.sbf__checkout-form input[type="text"],
.sbf__checkout-form input[type="email"],
.sbf__checkout-form input[type="tel"],
.sbf__checkout-form select,
.sbf__checkout-form textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--sbf-border);
	border-radius: var(--sbf-radius-sm);
	font: inherit;
	transition: border-color var(--sbf-transition);
}

.sbf__checkout-form input:focus,
.sbf__checkout-form select:focus,
.sbf__checkout-form textarea:focus {
	border-color: var(--wp--preset--color--ink);
	outline: none;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

/* ============ Sidebar ============ */

.sbf__link {
	color: var(--sbf-primary);
	text-decoration: none;
}

.sbf__link:hover {
	text-decoration: underline;
}

.sbf__muted {
	color: var(--sbf-text-muted);
	font-size: 0.875rem;
	margin: 0;
}

.sbf__sidebar-section-title {
	margin: 0 0 0.375rem;
	color: inherit;
}

.sbf__card--sidebar,
.sbf__card--sidebar p,
.sbf__card--sidebar dt {
	color: var(--sbf-text);
}

.sbf__card--sidebar dd {
	color: var(--sbf-text-muted);
}

.sbf__sidebar-divider {
	border: none;
	border-top: 1px solid var(--sbf-border);
	margin: 1rem 0;
}

/* ============ Upcoming-booking notice (sidebar top) ============ */

.sbf__upcoming-notice {
	padding: 1.125rem 1.25rem;
}

.sbf__upcoming-notice-resource {
	font-size: 1rem;
	font-weight: 600;
	color: var(--sbf-text);
	line-height: 1.3;
}

.sbf__upcoming-notice-time {
	font-size: 0.875rem;
	color: var(--sbf-text);
	margin-top: 0.125rem;
}

.sbf__upcoming-notice-link {
	display: inline-block;
	margin-top: 0.625rem;
	font-size: 0.875rem;
	font-weight: 600;
}

/* ============ Booking schedule ============ */

.sbf__schedule {
	margin: 0;
	line-height: 1.4;
}

.sbf__schedule-day {
	display: flex;
	gap: 0.75rem;
	padding: 0.25rem 0;
}

.sbf__schedule-day dt {
	flex: 0 0 5.5rem;
	font-weight: 600;
}

.sbf__schedule-day dd {
	flex: 1 1 auto;
	margin: 0;
}

.sbf__schedule-time {
	white-space: nowrap;
}

.sbf__schedule-closed {
	font-style: italic;
}

/* ============ Login card ============ */

.sbf__login {
	max-width: 480px;
	margin: 0 auto;
}

.sbf__login-desc {
	color: var(--sbf-text-muted);
	margin: 0 0 1.25rem;
}

/* Reset theme styles on the WC login form inside our card */
.sbf__card--login .woocommerce-form-login {
	padding: 0;
	max-width: none;
	margin: 0;
}

.sbf__card--login .form-row {
	width: 100%;
	float: none;
	clear: none;
	margin-right: 0;
	margin-bottom: 0.75rem;
}

.sbf__card--login .woocommerce-form-login__rememberme input {
	width: auto;
}

.sbf__card--login .woocommerce-form-login__submit {
	display: block;
	width: 100%;
	padding: 1rem 1.5rem;
	background: var(--sbf-primary);
	color: var(--wp--preset--color--surface);
	border: 0;
	border-radius: var(--sbf-radius-sm);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--sbf-transition);
}

.sbf__card--login .woocommerce-form-login__submit:hover {
	background: var(--sbf-primary-dark);
}

/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
	.sbf__skeleton { animation: none; }
	.sbf__slot { animation: none; opacity: 1; }
	.sbf__location-card,
	.sbf__person-btn,
	.sbf__day,
	.sbf__slot,
	.sbf__card input,
	.sbf__card select,
	.sbf__card #place_order,
	.sbf__card .wc_payment_method {
		transition: none;
	}
}