/*
 * Booking app for spaces and sessions.
 *
 * Every colour, font, radius, shadow and control height comes from theme tokens:
 * --wp--preset--color--* (base, surface, surface-2, contrast, muted, line, accent, accent-ink,
 * accent-soft, warning-bg/ink, error-bg/ink), --wp--preset--font-family--body,
 * --wp--preset--font-size--*, --wp--custom--radius--*, --wp--custom--shadow--*,
 * --wp--custom--border--width and --wp--custom--sbk--*. Each has a fallback, so the form
 * also looks right under any other theme. No external fonts or images.
 */

/* Bundled face (OFL). Listed after the theme's font, so glyphs the theme font lacks
   (Persian letters under a Latin-only theme) come from here. */
@font-face {
	font-family: "SBK Vazirmatn";
	src: url("../fonts/Vazirmatn-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

.sbk-booking {
	/* Room for a sticky theme header when the page scrolls to the app. */
	scroll-margin-block-start: var(--wp--custom--sbk--scroll-offset, 88px);
	--sbk-bg: var(--wp--preset--color--base, #fff);
	--sbk-field-bg: var(--wp--preset--color--base, #fff);
	--sbk-surface: var(--wp--preset--color--surface, #f3f6f6);
	--sbk-surface-2: var(--wp--preset--color--surface-2, #e7eded);
	--sbk-ink: var(--wp--preset--color--contrast, #1b2227);
	--sbk-muted: var(--wp--preset--color--muted, #55626a);
	--sbk-line: var(--wp--preset--color--line, #d9e0e2);
	--sbk-accent: var(--wp--preset--color--accent, #0f766e);
	--sbk-accent-ink: var(--wp--preset--color--accent-ink, #fff);
	--sbk-accent-soft: var(--wp--preset--color--accent-soft, #e3f3f1);
	--sbk-warn-bg: var(--wp--preset--color--warning-bg, #fff4e5);
	--sbk-warn-ink: var(--wp--preset--color--warning-ink, #7a4209);
	--sbk-error-bg: var(--wp--preset--color--error-bg, #fdecea);
	--sbk-error-ink: var(--wp--preset--color--error-ink, #8c1d18);
	/* Success has its own green family: a theme accent may be red or pink and must not read
	   as an error. booking.js darkens/lightens every text colour below at mount until it
	   reaches 4.5:1 on the backgrounds it sits on (contrast guard), whatever the palette. */
	--sbk-ok-bg: var(--wp--preset--color--success-bg, #e7f6ec);
	--sbk-ok-ink: var(--wp--preset--color--success-ink, #166534);
	--sbk-accent-text: var(--sbk-accent);
	--sbk-accent-on-warn: var(--sbk-accent-text);
	--sbk-line-strong: var(--wp--custom--sbk--line-strong, #b5c0c4);

	--sbk-border: var(--wp--custom--border--width, 1px);
	--sbk-radius-sm: var(--wp--custom--radius--small, 6px);
	--sbk-radius: var(--wp--custom--radius--medium, 10px);
	--sbk-radius-lg: var(--wp--custom--sbk--card-radius, var(--wp--custom--radius--large, 14px));
	--sbk-radius-pill: var(--wp--custom--radius--pill, 999px);
	--sbk-day-radius: var(--wp--custom--sbk--day-radius, var(--sbk-radius));
	--sbk-slot-radius: var(--wp--custom--sbk--slot-radius, var(--sbk-radius));
	--sbk-day-border-style: var(--wp--custom--sbk--slot-border-style, solid);
	--sbk-shadow-card: var(--wp--custom--shadow--card, none);
	--sbk-shadow-raised: var(--wp--custom--shadow--raised, 0 -6px 20px rgb(0 0 0 / 0.08));
	--sbk-control: max(44px, var(--wp--custom--sbk--control-height, 48px));

	/* Local faces only: the theme's body font, else a Persian font the visitor has, else system. */
	--sbk-font: var(--wp--custom--sbk--form-font, var(--wp--preset--font-family--body, "SBK Vazirmatn")), "SBK Vazirmatn", Tahoma, sans-serif;

	font-family: var(--sbk-font);
	letter-spacing: 0;
	word-spacing: normal;
	color: var(--sbk-ink);
	line-height: 1.8;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	direction: rtl;
	text-align: right;
}

@supports (color: color-mix(in srgb, red, blue)) {

	.sbk-booking {
		--sbk-ok-bg: var(--wp--preset--color--success-bg, color-mix(in srgb, #16a34a 14%, var(--wp--preset--color--base, #fff)));
		--sbk-line-strong: var(--wp--custom--sbk--line-strong, color-mix(in srgb, var(--wp--preset--color--line, #b5c0c4) 75%, var(--wp--preset--color--contrast, #b5c0c4)));
	}
}

/* Pages that end with the sticky bar keep a focused field above it. */
html:has(.sbk-bar) {
	scroll-padding-bottom: 120px;
}

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

/* Never inherit spaced-out or upper-cased type from the host theme: Persian has no letter-spacing. */
.sbk-booking,
.sbk-booking :is(h1, h2, h3, h4, p, span, small, strong, button, a, input, select, textarea, label, legend, dt, dd, li, output, figcaption) {
	font-family: var(--sbk-font);
	letter-spacing: 0;
	text-transform: none;
	word-spacing: normal;
}

.sbk-booking bdi {
	unicode-bidi: isolate;
}

.sbk-booking img {
	max-inline-size: 100%;
}

.sbk-booking .sbk-shell {
	background: var(--sbk-bg);
	border: var(--sbk-border) solid var(--sbk-line);
	border-radius: var(--sbk-radius-lg);
	box-shadow: var(--sbk-shadow-card);
	padding: clamp(14px, 4vw, 28px);
	max-inline-size: 760px;
	margin-inline: auto;
}

.sbk-standalone-main {
	padding: 16px;
}

/* ---------- Head ---------- */

.sbk-booking .sbk-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 14px;
	min-block-size: 44px;
}

.sbk-booking .sbk-step-title {
	font-size: var(--wp--preset--font-size--large, 1.3rem);
	font-weight: 700;
	margin: 0;
	line-height: 1.5;
	flex: 1;
	min-inline-size: 0;
	color: var(--sbk-ink);
}

.sbk-booking .sbk-step-title:focus {
	outline: none;
}

.sbk-booking .sbk-back,
.sbk-booking .sbk-round {
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	border: var(--sbk-border) solid var(--sbk-line-strong);
	background: var(--sbk-bg);
	color: var(--sbk-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	flex: none;
	padding: 0;
}

.sbk-booking .sbk-back:hover,
.sbk-booking .sbk-round:hover:not(:disabled) {
	border-color: var(--sbk-accent);
	color: var(--sbk-accent-text);
}

.sbk-booking .sbk-round:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.sbk-booking .sbk-link {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--sbk-accent-text);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: 600;
	min-block-size: 44px;
	padding: 0 8px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sbk-booking .sbk-mine-link {
	white-space: nowrap;
}

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

.sbk-booking .sbk-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-block-size: var(--sbk-control);
	padding: 8px 18px;
	border: var(--sbk-border) solid var(--sbk-line-strong);
	border-radius: var(--sbk-radius);
	background: var(--sbk-bg);
	color: var(--sbk-ink);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
}

.sbk-booking .sbk-btn:hover:not(:disabled) {
	border-color: var(--sbk-accent);
	color: var(--sbk-accent-text);
}

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

.sbk-booking .sbk-btn-primary:hover:not(:disabled) {
	color: var(--sbk-accent-ink);
	filter: brightness(1.08);
}

.sbk-booking .sbk-btn-quiet {
	background: transparent;
	border-color: transparent;
	color: var(--sbk-accent-text);
	padding-inline: 10px;
}

.sbk-booking .sbk-btn-small {
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	padding-inline: 10px;
}

.sbk-booking .sbk-btn-danger {
	background: var(--sbk-error-ink);
	border-color: var(--sbk-error-ink);
	color: var(--sbk-error-bg);
}

.sbk-booking .sbk-btn-danger:hover:not(:disabled) {
	color: var(--sbk-error-bg);
	filter: brightness(1.1);
}

.sbk-booking .sbk-btn-danger-text {
	color: var(--sbk-error-ink);
}

.sbk-booking .sbk-btn-big {
	inline-size: 100%;
	min-block-size: 64px;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.sbk-booking .sbk-pending p {
	margin: 0 0 8px;
}

.sbk-booking .sbk-pending .sbk-error {
	margin-block: 8px;
}

.sbk-booking .sbk-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.sbk-booking .sbk-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.sbk-booking .sbk-actions-wrap {
	margin-block-start: 16px;
}

/* Focus ring: two-tone so it shows on every background. */
.sbk-booking :is(button, input, select, textarea, a, [tabindex]):focus-visible {
	outline: 3px solid var(--sbk-accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--sbk-bg);
}

.sbk-booking .sbk-step-title:focus-visible {
	outline: 2px dashed var(--sbk-accent);
	box-shadow: none;
}

/* ---------- Sticky action bar ---------- */

.sbk-booking .sbk-bar {
	position: sticky;
	inset-block-end: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-block-start: 8px;
	margin-inline: calc(-1 * clamp(14px, 4vw, 28px));
	margin-block-end: calc(-1 * clamp(14px, 4vw, 28px));
	padding: 10px clamp(14px, 4vw, 28px);
	padding-block-end: max(10px, env(safe-area-inset-bottom));
	background: var(--sbk-bg);
	border-block-start: var(--sbk-border) solid var(--sbk-line);
	border-end-start-radius: var(--sbk-radius-lg);
	border-end-end-radius: var(--sbk-radius-lg);
	box-shadow: var(--sbk-shadow-raised);
}

.sbk-booking .sbk-bar-note {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-inline-size: 0;
}

.sbk-booking .sbk-bar-actions {
	display: flex;
	gap: 8px;
	margin-inline-start: auto;
	flex-wrap: wrap;
	justify-content: flex-end;
}

@media (max-width: 480px) {

	.sbk-booking .sbk-bar-actions,
	.sbk-booking .sbk-bar-actions .sbk-btn-primary {
		flex: 1 1 auto;
	}

	.sbk-booking .sbk-bar-note {
		flex-basis: 100%;
	}
}

/* ---------- Messages ---------- */

.sbk-booking .sbk-error,
.sbk-booking .sbk-note,
.sbk-booking .sbk-ok,
.sbk-booking .sbk-test-note,
.sbk-booking .sbk-empty {
	border-radius: var(--sbk-radius);
	padding: 10px 14px;
	margin: 0 0 12px;
}

.sbk-booking .sbk-error p,
.sbk-booking .sbk-note p,
.sbk-booking .sbk-ok p,
.sbk-booking .sbk-empty p {
	margin: 0;
}

.sbk-booking .sbk-error {
	background: var(--sbk-error-bg);
	color: var(--sbk-error-ink);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.sbk-booking .sbk-error .sbk-btn {
	background: var(--sbk-bg);
}

.sbk-booking .sbk-note,
.sbk-booking .sbk-test-note {
	background: var(--sbk-warn-bg);
	color: var(--sbk-warn-ink);
}

.sbk-booking .sbk-note ul {
	margin: 6px 0 0;
	padding-inline-start: 20px;
}

.sbk-booking .sbk-ok {
	background: var(--sbk-ok-bg);
	color: var(--sbk-ok-ink);
	font-weight: 600;
}

.sbk-booking .sbk-test-note {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border: var(--sbk-border) dashed currentColor;
}

.sbk-booking .sbk-code {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sbk-booking .sbk-empty {
	background: var(--sbk-surface);
	text-align: center;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.sbk-booking .sbk-help {
	margin: 0;
	color: var(--sbk-muted);
	font-size: var(--wp--preset--font-size--small, 0.92rem);
}

.sbk-booking .sbk-help:empty {
	display: none;
}

.sbk-booking .sbk-meta {
	display: block;
	color: var(--sbk-muted);
	font-size: var(--wp--preset--font-size--small, 0.88rem);
	font-weight: 400;
}

.sbk-booking .sbk-meta-inline {
	color: var(--sbk-muted);
	font-weight: 400;
}

.sbk-booking .sbk-group-title {
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 700;
	margin: 20px 0 10px;
	color: var(--sbk-ink);
}

/* ---------- Lists (branch, type, my bookings) ---------- */

.sbk-booking .sbk-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbk-booking .sbk-row {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 14px;
	inline-size: 100%;
	min-block-size: 64px;
	padding: 12px 14px;
	border: var(--sbk-border) solid var(--sbk-line);
	border-radius: var(--sbk-radius);
	background: var(--sbk-bg);
	color: inherit;
	font: inherit;
	text-align: right;
	cursor: pointer;
}

.sbk-booking .sbk-row:hover {
	border-color: var(--sbk-accent);
	background: var(--sbk-surface);
}

.sbk-booking .sbk-row-main {
	flex: 1;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
}

.sbk-booking .sbk-row-name {
	font-weight: 700;
}

.sbk-booking .sbk-chevron {
	flex: none;
	color: var(--sbk-muted);
}

.sbk-booking .sbk-art {
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: var(--sbk-radius);
	background: var(--sbk-accent-soft);
	color: var(--sbk-accent-text);
	flex: none;
}

/* ---------- Space cards ---------- */

.sbk-booking .sbk-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 620px) {

	.sbk-booking .sbk-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sbk-booking .sbk-cards > li {
	display: flex;
}

.sbk-booking .sbk-card {
	appearance: none;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	padding: 0;
	border: var(--sbk-border) solid var(--sbk-line);
	border-radius: var(--sbk-radius-lg);
	background: var(--sbk-bg);
	color: inherit;
	font: inherit;
	text-align: right;
	cursor: pointer;
	overflow: hidden;
}

.sbk-booking .sbk-card:hover {
	border-color: var(--sbk-accent);
}

.sbk-booking .sbk-card-media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: var(--sbk-accent-soft);
	overflow: hidden;
}

.sbk-booking .sbk-card-media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.sbk-booking .sbk-card-media .sbk-art {
	inline-size: 72px;
	block-size: 72px;
	background: var(--sbk-bg);
	border-radius: 50%;
}

.sbk-booking .sbk-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px 14px;
	flex: 1;
}

.sbk-booking .sbk-card-name {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium, 1.05rem);
}

.sbk-booking .sbk-card-price {
	font-weight: 700;
	color: var(--sbk-accent-text);
	font-variant-numeric: tabular-nums;
}

.sbk-booking .sbk-card-price small {
	color: var(--sbk-muted);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small, 0.85rem);
}

.sbk-booking .sbk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: 4px;
}

.sbk-booking .sbk-chip {
	padding: 2px 10px;
	border-radius: var(--sbk-radius-pill);
	background: var(--sbk-surface);
	border: var(--sbk-border) solid var(--sbk-line);
	font-size: var(--wp--preset--font-size--x-small, 0.8rem);
	color: var(--sbk-ink);
}

/* ---------- Days ---------- */

.sbk-booking .sbk-days-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	margin-block-end: 8px;
}

.sbk-booking .sbk-days-range {
	color: var(--sbk-muted);
	font-size: var(--wp--preset--font-size--small, 0.85rem);
	text-align: center;
}

@media (max-width: 400px) {

	.sbk-booking .sbk-days-range {
		display: none;
	}
}

.sbk-booking .sbk-days {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	grid-auto-rows: 1fr;
	gap: 8px;
}

.sbk-booking .sbk-day {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-block-size: 76px;
	padding: 6px 2px;
	border: var(--sbk-border) var(--sbk-day-border-style) var(--sbk-line-strong);
	border-radius: var(--sbk-day-radius);
	background: var(--sbk-bg);
	color: var(--sbk-ink);
	font: inherit;
	line-height: 1.35;
	cursor: pointer;
}

.sbk-booking .sbk-day:hover:not(:disabled) {
	border-color: var(--sbk-accent);
}

.sbk-booking .sbk-day-week,
.sbk-booking .sbk-day-month {
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--sbk-muted);
}

.sbk-booking .sbk-day-num {
	font-size: var(--wp--preset--font-size--large, 1.3rem);
	font-weight: 700;
}

.sbk-booking .sbk-day-state {
	font-size: var(--wp--preset--font-size--x-small, 0.72rem);
	font-weight: 700;
	color: var(--sbk-muted);
	text-align: center;
	line-height: 1.3;
}

.sbk-booking .sbk-day:disabled {
	cursor: not-allowed;
	background: var(--sbk-surface);
	border-color: transparent;
	color: var(--sbk-muted);
}

.sbk-booking .sbk-day:disabled .sbk-day-num {
	opacity: 0.6;
}

.sbk-booking .sbk-day.is-full:disabled {
	border: var(--sbk-border) dashed var(--sbk-line-strong);
}

.sbk-booking .sbk-day.is-range {
	background: var(--sbk-accent-soft);
	border-color: var(--sbk-accent);
}

.sbk-booking .sbk-day.is-selected {
	background: var(--sbk-accent);
	border-color: var(--sbk-accent);
	color: var(--sbk-accent-ink);
}

.sbk-booking .sbk-day.is-selected :is(.sbk-day-week, .sbk-day-month, .sbk-day-state) {
	color: inherit;
}

/* ---------- Slots ---------- */

.sbk-booking .sbk-slots-wrap {
	scroll-margin-block-start: 16px;
}

.sbk-booking .sbk-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
	gap: 8px;
}

.sbk-booking .sbk-slots.is-range {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr));
}

.sbk-booking .sbk-slots > div {
	display: flex;
}

.sbk-booking .sbk-slot {
	appearance: none;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	inline-size: 100%;
	min-block-size: var(--sbk-control);
	padding: 8px 6px;
	border: 1.5px solid var(--sbk-line-strong);
	border-radius: var(--sbk-slot-radius);
	background: var(--sbk-bg);
	color: var(--sbk-ink);
	font: inherit;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
}

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

.sbk-booking .sbk-slot.is-selected {
	border-color: var(--sbk-accent);
	background: var(--sbk-accent);
	color: var(--sbk-accent-ink);
}

.sbk-booking .sbk-slot.is-selected :is(.sbk-slot-seats, .sbk-slot-price, .sbk-slot-tag) {
	color: inherit;
}

.sbk-booking .sbk-slot:disabled {
	cursor: not-allowed;
	background: var(--sbk-surface);
	border-color: transparent;
	color: var(--sbk-muted);
}

.sbk-booking .sbk-slot:disabled .sbk-slot-time {
	text-decoration: line-through;
}

.sbk-booking .sbk-slot-time {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sbk-booking .sbk-slot-seats,
.sbk-booking .sbk-slot-price,
.sbk-booking .sbk-slot-tag {
	font-size: var(--wp--preset--font-size--x-small, 0.78rem);
	color: var(--sbk-muted);
}

.sbk-booking .sbk-slot-seats.is-low {
	color: var(--sbk-warn-ink);
	font-weight: 700;
}

.sbk-booking .sbk-slot-tag {
	color: var(--sbk-accent-text);
	font-weight: 600;
}

.sbk-booking .sbk-badge {
	display: inline-block;
	padding: 0 8px;
	border-radius: var(--sbk-radius-pill);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 700;
	line-height: 1.8;
	white-space: nowrap;
	background: var(--sbk-surface-2);
	color: var(--sbk-ink);
}

.sbk-booking .sbk-badge-peak {
	background: var(--sbk-warn-bg);
	color: var(--sbk-warn-ink);
}

.sbk-booking .sbk-badge-confirmed {
	background: var(--sbk-ok-bg);
	color: var(--sbk-ok-ink);
}

.sbk-booking .sbk-badge-held {
	background: var(--sbk-warn-bg);
	color: var(--sbk-warn-ink);
}

.sbk-booking .sbk-badge-cancelled,
.sbk-booking .sbk-badge-expired,
.sbk-booking .sbk-badge-conflict {
	background: var(--sbk-surface-2);
	color: var(--sbk-muted);
}

/* ---------- Summary and price ---------- */

.sbk-booking .sbk-summary {
	margin: 0 0 16px;
	padding: 4px 14px;
	background: var(--sbk-surface);
	border-radius: var(--sbk-radius);
}

.sbk-booking .sbk-summary-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 6px 0;
	border-block-end: var(--sbk-border) solid var(--sbk-line);
}

.sbk-booking .sbk-summary-row:last-child {
	border-block-end: 0;
}

.sbk-booking .sbk-summary dt {
	color: var(--sbk-muted);
	min-inline-size: 64px;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
}

.sbk-booking .sbk-summary dd {
	margin: 0;
	flex: 1;
	font-weight: 600;
	min-inline-size: 0;
}

.sbk-booking .sbk-picked .sbk-link {
	min-block-size: 44px;
	margin-block: -8px;
}

.sbk-booking .sbk-price-box dd {
	text-align: left;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	flex: 0 0 auto;
}

.sbk-booking .sbk-price-box dt {
	flex: 1 1 0;
}

/* Amounts keep their unit on the same line. */
.sbk-booking .sbk-money {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Narrow phones: label above value instead of a squeezed value column. */
@media (max-width: 420px) {

	.sbk-booking .sbk-summary:not(.sbk-price-box) .sbk-summary-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sbk-booking .sbk-summary:not(.sbk-price-box) dt {
		min-inline-size: 0;
	}

	.sbk-booking .sbk-picked .sbk-summary-row {
		position: relative;
		padding-inline-end: 56px;
	}

	.sbk-booking .sbk-picked .sbk-link {
		position: absolute;
		inset-inline-end: 0;
		inset-block-start: 50%;
		transform: translateY(-50%);
		margin: 0;
	}
}

.sbk-booking .sbk-price-box .is-discount dd {
	color: var(--sbk-accent-text);
}

.sbk-booking .sbk-summary-total {
	font-size: var(--wp--preset--font-size--medium, 1.05rem);
}

.sbk-booking .sbk-summary-total dt,
.sbk-booking .sbk-summary-total dd {
	color: var(--sbk-ink);
	font-weight: 700;
}

.sbk-booking .is-stale {
	opacity: 0.6;
	transition: opacity 0.2s;
}

.sbk-booking .sbk-stay {
	margin-block-start: 14px;
}

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

.sbk-booking .sbk-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sbk-booking .sbk-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px;
	border: var(--sbk-border) solid var(--sbk-line);
	border-radius: var(--sbk-radius);
	background: var(--sbk-bg);
}

.sbk-booking .sbk-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small, 0.95rem);
}

.sbk-booking .sbk-field input,
.sbk-booking .sbk-field select,
.sbk-booking .sbk-field textarea {
	font: inherit;
	font-weight: 400;
	font-size: max(16px, var(--wp--preset--font-size--medium, 1rem));
	min-block-size: var(--sbk-control);
	padding: 8px 12px;
	border: var(--sbk-border) solid var(--sbk-line-strong);
	border-radius: var(--sbk-radius);
	background: var(--sbk-field-bg);
	color: var(--sbk-ink);
	inline-size: 100%;
}

.sbk-booking .sbk-field input[dir="ltr"] {
	text-align: left;
}

.sbk-booking .sbk-field input[readonly] {
	background: var(--sbk-surface);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
}

.sbk-booking .sbk-field :is(input, textarea)[aria-invalid="true"] {
	border-color: var(--sbk-error-ink);
}

.sbk-booking .sbk-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-inline-size: 0;
}

.sbk-booking .sbk-fieldset legend {
	font-weight: 700;
	margin-block-end: 6px;
	padding: 0;
}

.sbk-booking .sbk-choice {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: var(--sbk-control);
	padding: 8px 12px;
	border: var(--sbk-border) solid var(--sbk-line);
	border-radius: var(--sbk-radius);
	cursor: pointer;
	background: var(--sbk-bg);
}

.sbk-booking .sbk-choice:has(input:checked) {
	border-color: var(--sbk-accent);
	background: var(--sbk-accent-soft);
}

.sbk-booking .sbk-choice-plain,
.sbk-booking .sbk-choice-plain:has(input:checked) {
	border: 0;
	padding: 0;
	background: transparent;
}

.sbk-booking .sbk-choice input {
	inline-size: 22px;
	block-size: 22px;
	accent-color: var(--sbk-accent);
	margin: 0;
	flex: none;
}

.sbk-booking .sbk-choice-main {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.sbk-booking .sbk-choice-title {
	font-weight: 600;
}

.sbk-booking .sbk-hp {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Counters: label on the right, − value + on the left. */
.sbk-booking .sbk-counter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-block-size: 52px;
}

.sbk-booking .sbk-counter + .sbk-counter {
	border-block-start: var(--sbk-border) solid var(--sbk-line);
	padding-block-start: 10px;
}

.sbk-booking .sbk-counter-label {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	min-inline-size: 0;
}

.sbk-booking .sbk-counter-ctrl {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.sbk-booking .sbk-counter-value {
	min-inline-size: 2.2em;
	text-align: center;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large, 1.15rem);
	font-variant-numeric: tabular-nums;
}

/* ---------- Receipt ---------- */

.sbk-booking .sbk-receipt {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sbk-booking .sbk-receipt > .sbk-error,
.sbk-booking .sbk-receipt > .sbk-note,
.sbk-booking .sbk-receipt > .sbk-ok {
	margin: 0;
}

.sbk-booking .sbk-ticket {
	border: var(--sbk-border) solid var(--sbk-line);
	border-block-start: 6px solid var(--sbk-accent);
	border-radius: var(--sbk-radius-lg);
	padding: 18px;
	background: var(--sbk-bg);
}

.sbk-booking .sbk-ticket.is-pending {
	border-block-start-color: var(--sbk-warn-ink);
}

.sbk-booking .sbk-ticket.is-ended {
	border-block-start-color: var(--sbk-line-strong);
}

.sbk-booking .sbk-ticket-status {
	font-weight: 700;
	color: var(--sbk-ok-ink);
	margin: 0 0 4px;
}

.sbk-booking .sbk-ticket.is-pending .sbk-ticket-status {
	color: var(--sbk-warn-ink);
}

.sbk-booking .sbk-ticket.is-ended .sbk-ticket-status {
	color: var(--sbk-muted);
}

.sbk-booking .sbk-ticket-space {
	margin: 0;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large, 1.2rem);
}

.sbk-booking .sbk-ticket-time {
	margin: 0 0 12px;
}

.sbk-booking .sbk-ticket .sbk-summary {
	margin-block-end: 0;
}

.sbk-booking .sbk-ticket-code {
	margin: 12px 0 0;
	padding-block-start: 12px;
	border-block-start: var(--sbk-border) dashed var(--sbk-line);
	color: var(--sbk-muted);
}

.sbk-booking .sbk-ticket-code strong {
	color: var(--sbk-ink);
	font-size: var(--wp--preset--font-size--medium, 1.1rem);
	font-variant-numeric: tabular-nums;
}

.sbk-booking .sbk-qr {
	margin: 14px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.sbk-booking .sbk-qr img {
	inline-size: 180px;
	block-size: 180px;
	background: #fff;
	padding: 8px;
	border-radius: var(--sbk-radius-sm);
	border: var(--sbk-border) solid var(--sbk-line);
	image-rendering: pixelated;
}

.sbk-booking .sbk-qr figcaption {
	color: var(--sbk-muted);
	font-size: var(--wp--preset--font-size--small, 0.88rem);
}

.sbk-booking .sbk-team .sbk-group-title {
	margin-block-start: 0;
}

.sbk-booking .sbk-progress-wrap {
	margin-block: 8px;
}

.sbk-booking .sbk-progress-text {
	margin: 0 0 4px;
	font-weight: 700;
}

.sbk-booking .sbk-progress {
	block-size: 10px;
	border-radius: var(--sbk-radius-pill);
	background: var(--sbk-surface-2);
	overflow: hidden;
}

.sbk-booking .sbk-progress > span {
	display: block;
	block-size: 100%;
	background: var(--sbk-accent);
	border-radius: inherit;
}

.sbk-booking .sbk-share {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbk-booking .sbk-confirm {
	border: var(--sbk-border) solid var(--sbk-error-ink);
	border-radius: var(--sbk-radius);
	padding: 12px 14px;
	background: var(--sbk-error-bg);
	color: var(--sbk-error-ink);
}

.sbk-booking .sbk-confirm p {
	margin: 0 0 8px;
}

.sbk-booking .sbk-confirm .sbk-btn:not(.sbk-btn-danger) {
	background: var(--sbk-bg);
	color: var(--sbk-ink);
}

/* ---------- Skeletons ---------- */

.sbk-booking .sbk-skel {
	background: linear-gradient(90deg, var(--sbk-surface) 0%, var(--sbk-surface-2) 50%, var(--sbk-surface) 100%);
	background-size: 200% 100%;
	animation: sbk-shimmer 1.4s linear infinite;
	border-radius: var(--sbk-radius);
}

.sbk-booking .sbk-skel-card {
	block-size: 96px;
	margin-block-end: 10px;
}

.sbk-booking .sbk-skel-row {
	block-size: 44px;
	margin-block-end: 8px;
}

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

.sbk-booking .sbk-skel-day {
	block-size: 76px;
}

.sbk-booking .sbk-skel-slot {
	block-size: 56px;
}

@keyframes sbk-shimmer {

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

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

	.sbk-booking .sbk-skel {
		animation: none;
	}

	.sbk-booking * {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {

	.sbk-booking .sbk-day.is-selected,
	.sbk-booking .sbk-slot.is-selected,
	.sbk-booking .sbk-choice:has(input:checked) {
		outline: 3px solid Highlight;
	}
}

/* ---------- Narrow phones: flow summary, price lines, week navigation ---------- */

.sbk-booking .sbk-summary dt {
	white-space: nowrap;
}

@media (max-width: 420px) {

	.sbk-booking .sbk-price-box .sbk-summary-row {
		flex-wrap: wrap;
	}

	.sbk-booking .sbk-price-box dt {
		flex: 1 1 11em;
		white-space: normal;
	}

	.sbk-booking .sbk-price-box dd {
		margin-inline-start: auto;
	}

	.sbk-booking .sbk-days-head .sbk-btn {
		white-space: nowrap;
		padding-inline: 4px;
		gap: 2px;
		font-size: var(--wp--preset--font-size--x-small, 0.85rem);
	}
}

.sbk-booking .sbk-checkin-note {
	font-weight: 600;
	color: var(--sbk-ink);
}

/* ---------- Waitlist («خبرم کن») ---------- */

/* A full day stays clickable (it offers the waitlist) but reads as full. */
.sbk-booking .sbk-day.is-full:not(.is-selected) {
	background: var(--sbk-surface);
	border-style: dashed;
	color: var(--sbk-muted);
}

.sbk-booking .sbk-wait {
	margin-block-start: 14px;
	border-style: dashed;
}

.sbk-booking .sbk-wait .sbk-ok {
	margin: 0;
}

.sbk-booking .sbk-wait-row {
	cursor: default;
	flex-wrap: wrap;
}

.sbk-booking .sbk-wait-row:hover {
	background: var(--sbk-bg);
	border-color: var(--sbk-line);
}

/* ---------- Perks: codes, gift cards, points, packages ---------- */

.sbk-booking .sbk-inline {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.sbk-booking .sbk-inline input {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.sbk-booking .sbk-inline .sbk-btn {
	flex: none;
	min-block-size: var(--sbk-control);
}

.sbk-booking .sbk-field-msg {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small, 0.88rem);
	color: var(--sbk-muted);
}

.sbk-booking .sbk-field-msg.is-error {
	color: var(--sbk-error-ink);
	font-weight: 600;
}

.sbk-booking .sbk-field-msg.is-ok {
	color: var(--sbk-ok-ink);
}

.sbk-booking .sbk-perks {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.sbk-booking .sbk-perks > .sbk-panel {
	align-self: stretch;
}

.sbk-booking .sbk-summary-row.is-returned dd {
	text-decoration: line-through;
	color: var(--sbk-muted);
}

.sbk-booking .sbk-points {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 12px;
	font-weight: 600;
}

/* Refund and cancellation notes can be several sentences or lines. */
.sbk-booking .sbk-note p {
	white-space: pre-line;
}

.sbk-booking .sbk-checkin-note.is-done {
	color: var(--sbk-ok-ink);
}

/* Links and quiet buttons inside notices and the pending banner sit on the warning tint. */
.sbk-booking :is(.sbk-note, .sbk-test-note) :is(.sbk-link, .sbk-btn-quiet, a) {
	color: var(--sbk-accent-on-warn);
}