/*
 * Nobatino booking form.
 *
 * Every colour, font, size, radius, shadow and control height comes from the theme
 * contract (docs/02-theme-contract.md): --wp--preset--color--*, --wp--preset--font-family--*,
 * --wp--preset--font-size--*, --wp--custom--radius--*, --wp--custom--shadow--*,
 * --wp--custom--border--width and --wp--custom--nbt--*. Each fallback is the value this
 * file used before the contract, so under any other theme the form looks the same.
 */
.nbt-booking {
	--nbt-bg: var(--wp--preset--color--base, #fcfdfd);
	--nbt-field-bg: var(--wp--preset--color--base, #fff);
	--nbt-surface: var(--wp--preset--color--surface, #f3f6f7);
	--nbt-surface-2: var(--wp--preset--color--surface-2, #e9eef0);
	--nbt-ink: var(--wp--preset--color--contrast, #1b2227);
	--nbt-muted: var(--wp--preset--color--muted, #56636b);
	--nbt-line: var(--wp--preset--color--line, #dde3e6);
	--nbt-accent: var(--wp--preset--color--accent, #1f6f5c);
	--nbt-accent-ink: var(--wp--preset--color--accent-ink, #fff);
	--nbt-accent-soft: var(--wp--preset--color--accent-soft, #e6f2ee);
	--nbt-warn-bg: var(--wp--preset--color--warning-bg, #fff4e5);
	--nbt-warn-ink: var(--wp--preset--color--warning-ink, #7a4209);
	--nbt-warn-edge: var(--wp--preset--color--warning-ink, #b4691f);
	--nbt-error-bg: var(--wp--preset--color--error-bg, #fdecea);
	--nbt-error-ink: var(--wp--preset--color--error-ink, #8c1d18);
	--nbt-danger: var(--wp--preset--color--error-ink, #a3271f);
	--nbt-danger-ink: var(--wp--preset--color--error-bg, #fff);

	/* Shades the palette has no slot for. Plain values here; mixed from the palette below. */
	--nbt-line-strong: #b9c3c8;
	--nbt-faint: #6b777e;
	--nbt-ended: #8a959b;
	--nbt-error-edge: #f0c4bf;

	--nbt-border: var(--wp--custom--border--width, 1px);
	--nbt-radius-sm: var(--wp--custom--radius--small, 6px);
	--nbt-radius: var(--wp--custom--radius--medium, 10px);
	--nbt-radius-lg: var(--wp--custom--nbt--card-radius, var(--wp--custom--radius--large, 14px));
	--nbt-radius-pill: var(--wp--custom--radius--pill, 999px);
	--nbt-day-radius: var(--wp--custom--nbt--day-radius, var(--nbt-radius));
	--nbt-slot-radius: var(--wp--custom--nbt--slot-radius, var(--nbt-radius));
	--nbt-slot-border-style: var(--wp--custom--nbt--slot-border-style, solid);
	--nbt-shadow-card: var(--wp--custom--shadow--card, none);
	--nbt-control: var(--wp--custom--nbt--control-height, 48px);

	/* The bundled face is always the last resort before system fonts. */
	--nbt-font: var(--wp--preset--font-family--body, "Nobatino Vazirmatn"), "Nobatino Vazirmatn", tahoma, sans-serif;
	--nbt-font-heading: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--body, "Nobatino Vazirmatn")), "Nobatino Vazirmatn", tahoma, sans-serif;
	/* Everything inside the form, step titles included, reads in the body font: a decorative
	   heading face (Ruqaa, Katibeh…) belongs to the page title and hero, not to labels and times. */
	--nbt-form-font: var(--wp--custom--nbt--form-font, var(--nbt-font));

	font-family: var(--nbt-font);
	color: var(--nbt-ink);
	line-height: 1.8;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	direction: rtl;
	text-align: right;
}

/* With both palette slots unset each mix collapses to the plain value above. */
@supports (color: color-mix(in srgb, red, blue)) {

	.nbt-booking {
		--nbt-line-strong: color-mix(in srgb, var(--wp--preset--color--line, #b9c3c8) 80%, var(--wp--preset--color--contrast, #b9c3c8));
		--nbt-faint: color-mix(in srgb, var(--wp--preset--color--muted, #6b777e) 85%, var(--wp--preset--color--base, #6b777e));
		--nbt-ended: color-mix(in srgb, var(--wp--preset--color--muted, #8a959b) 60%, var(--wp--preset--color--base, #8a959b));
		--nbt-error-edge: color-mix(in srgb, var(--wp--preset--color--error-bg, #f0c4bf) 75%, var(--wp--preset--color--error-ink, #f0c4bf));
	}
}

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

/* Never inherit the host theme's typography: no spaced-out Persian, no uppercase. */
.nbt-booking,
.nbt-booking :is(h1, h2, h3, h4, p, span, button, a, input, select, label, legend, dt, dd, strong, li) {
	font-family: var(--nbt-font);
	letter-spacing: normal;
	text-transform: none;
	word-spacing: normal;
}

.nbt-booking :is(h1, h2, h3, h4) {
	font-family: var(--nbt-form-font);
}

.nbt-booking bdi {
	unicode-bidi: isolate;
	direction: ltr;
}

.nbt-shell {
	background: var(--nbt-bg);
	border: var(--nbt-border) solid var(--nbt-line);
	border-radius: var(--nbt-radius-lg);
	box-shadow: var(--nbt-shadow-card);
	padding: clamp(16px, 4vw, 28px);
	max-width: 720px;
	margin-inline: auto;
}

.nbt-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.nbt-step-title {
	font-family: var(--nbt-form-font);
	font-size: var(--wp--preset--font-size--large, 1.3rem);
	font-weight: 700;
	margin: 0;
	line-height: 1.5;
}

.nbt-mine-link {
	margin-inline-start: auto;
	white-space: nowrap;
}

.nbt-badge {
	font-size: var(--wp--preset--font-size--x-small, 0.8rem);
	font-weight: 600;
	border-radius: var(--nbt-radius-pill);
	padding: 2px 10px;
	white-space: nowrap;
	background: var(--nbt-surface);
	color: var(--nbt-muted);
}

.nbt-badge-booked,
.nbt-badge-confirmed {
	background: var(--nbt-accent-soft);
	color: var(--nbt-accent);
}

.nbt-badge-cancelled {
	background: var(--nbt-error-bg);
	color: var(--nbt-error-ink);
}

.nbt-step-title:focus {
	outline: none;
}

.nbt-back {
	inline-size: max(44px, calc(var(--nbt-control) - 4px));
	block-size: max(44px, calc(var(--nbt-control) - 4px));
	border-radius: 50%;
	border: var(--nbt-border) solid var(--nbt-line);
	background: var(--nbt-bg);
	color: var(--nbt-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	flex: none;
}

.nbt-group-title {
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	font-weight: 600;
	color: var(--nbt-muted);
	margin: 20px 0 8px;
}

/* Category headings of the service list read as headings, in the form's font. */
.nbt-service-group .nbt-group-title {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 700;
	color: inherit;
}

.nbt-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--nbt-border) solid var(--nbt-line);
}

.nbt-list > li {
	border-bottom: var(--nbt-border) solid var(--nbt-line);
}

/* Services read like a price list, not a grid of identical cards. */
.nbt-service,
.nbt-person {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 16px;
	inline-size: 100%;
	min-block-size: 64px;
	padding: 14px 8px;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
	text-align: right;
}

.nbt-service:disabled {
	cursor: progress;
}

.nbt-service:hover,
.nbt-person:hover {
	background: var(--nbt-surface);
}

.nbt-service-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.nbt-service-name,
.nbt-person-name {
	font-weight: 600;
	display: block;
}

.nbt-service-desc {
	color: var(--nbt-muted);
	font-size: var(--wp--preset--font-size--small, 0.92rem);
}

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

.nbt-price {
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Phones: the price moves under the title instead of squeezing the description. */
@media (max-width: 480px) {
	.nbt-service {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 4px 16px;
	}

	.nbt-service-main {
		flex-basis: 100%;
	}
}

.nbt-avatar {
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	background: var(--nbt-accent-soft);
	color: var(--nbt-accent);
	display: grid;
	place-items: center;
	font-weight: 700;
	flex: none;
	object-fit: cover;
}

.nbt-avatar-any {
	background: var(--nbt-surface);
	color: var(--nbt-ink);
}

/* Days: a horizontal strip of date tabs. */
.nbt-days-head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.nbt-days {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
	gap: 8px;	grid-auto-rows: 1fr; /* A «تعطیل» note does not make its row taller than the others. */
}

.nbt-day {
	all: unset;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-block-size: 76px;
	padding: 8px 4px;
	/* The demo's border style (slot.border in demo.json) shows on the day tiles. */
	border: var(--nbt-border) var(--nbt-slot-border-style) var(--nbt-line);
	border-radius: var(--nbt-day-radius);
	cursor: pointer;
	font-family: inherit;
	background: var(--nbt-bg);
	color: var(--nbt-ink);
}

.nbt-day-week {
	font-size: var(--wp--preset--font-size--x-small, 0.8rem);
	color: var(--nbt-muted);
}

.nbt-day-num {
	font-size: var(--wp--preset--font-size--x-large, 1.35rem);
	font-weight: 700;
	line-height: 1.3;
}

.nbt-day-month {
	font-size: var(--wp--preset--font-size--x-small, 0.8rem);
}

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

.nbt-day.is-selected .nbt-day-week {
	color: inherit;
}

.nbt-day:disabled {
	cursor: not-allowed;
	color: var(--nbt-faint);
	background: var(--nbt-surface);
	border-color: transparent;
}

.nbt-day:disabled .nbt-day-num {
	opacity: 0.55;
}

.nbt-day.is-full:not(.is-selected) {
	background: var(--nbt-surface);
	border-style: dashed;
	border-color: var(--nbt-line-strong);
	color: var(--nbt-faint);
}

.nbt-day.is-full:not(.is-selected) .nbt-day-num {
	opacity: 0.55;
}

.nbt-day.is-selected .nbt-day-state {
	color: inherit;
}

.nbt-day-state {
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 600;
	color: var(--nbt-faint);
	line-height: 1.4;
}

/* Times: ticket-like stubs. */
.nbt-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 8px;
}

.nbt-period-title {
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: 600;
	margin: 14px 0 6px;
	color: var(--nbt-ink);
}

.nbt-slot {
	all: unset;
	box-sizing: border-box;
	text-align: center;
	min-block-size: var(--nbt-control);
	padding: 10px 4px;
	/* Always solid: a dashed time would read as unavailable. */
	border: 1.5px solid var(--nbt-line-strong);
	border-radius: var(--nbt-slot-radius);
	font-family: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium, 1.05rem);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	background: var(--nbt-bg);
	color: var(--nbt-ink);
}

.nbt-slot:hover {
	border-color: var(--nbt-accent);
	background: var(--nbt-accent-soft);
	color: var(--nbt-accent);
}

.nbt-slot:active {
	background: var(--nbt-accent);
	border-color: var(--nbt-accent);
	color: var(--nbt-accent-ink);
}

/* Summary of choices so far. */
.nbt-summary {
	margin: 0 0 16px;
	padding: 4px 12px;
	background: var(--nbt-surface);
	border-radius: var(--nbt-radius);
}

.nbt-summary-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 6px 0;
	border-bottom: var(--nbt-border) solid var(--nbt-line);
}

.nbt-summary-row:last-child {
	border-bottom: 0;
}

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

.nbt-summary dd {
	margin: 0;
	flex: 1;
	font-weight: 600;
}

.nbt-link {
	all: unset;
	cursor: pointer;
	color: var(--nbt-accent);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	padding: 10px 6px;
	margin: -10px 0;
}

/* Forms. */
.nbt-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nbt-row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 12px;
}

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

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

.nbt-field input[dir="ltr"] {
	text-align: left;
	letter-spacing: 0.05em;
}

.nbt-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.nbt-fieldset legend {
	font-weight: 600;
	margin-bottom: 4px;
}

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

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

.nbt-choice input {
	inline-size: 20px;
	block-size: 20px;
	accent-color: var(--nbt-accent);
	margin: 0;
}

.nbt-hp {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.nbt-field textarea {
	font: inherit;
	font-weight: 400;
	padding: 8px 12px;
	border: var(--nbt-border) solid var(--nbt-line-strong);
	border-radius: var(--nbt-radius);
	background: var(--nbt-field-bg);
	color: var(--nbt-ink);
	inline-size: 100%;
}

.nbt-intake {
	border: var(--nbt-border) solid var(--nbt-line);
	border-radius: var(--nbt-radius);
	padding: 12px 14px;
	gap: 12px;
}

.nbt-intake legend {
	padding: 0 6px;
}

.nbt-yesno {
	display: flex;
	gap: 8px;
}

.nbt-yesno .nbt-choice {
	flex: 1;
}

.nbt-consent {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: var(--nbt-border) dashed var(--nbt-line);
	padding-top: 10px;
}

.nbt-consent-text {
	margin: 0;
	background: var(--nbt-surface);
	padding: 10px 12px;
	border-radius: var(--nbt-radius);
	max-block-size: 12em;
	overflow-y: auto;
	white-space: pre-line;
}

.nbt-extras {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.nbt-row-codes {
	inline-size: 100%;
	grid-template-columns: 1fr 1fr;
}

.nbt-inline {
	display: flex;
	gap: 6px;
}

.nbt-inline input {
	flex: 1;
	min-inline-size: 0;
}

.nbt-booking [aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]) {
	border-color: var(--nbt-error-ink);
	box-shadow: 0 0 0 1px var(--nbt-error-ink);
}

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

.nbt-field-msg.is-error {
	color: var(--nbt-error-ink);
}

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

.nbt-price-box {
	margin: 0;
}

.nbt-price-box s {
	color: var(--nbt-muted);
	font-weight: 400;
}

.nbt-help {
	color: var(--nbt-muted);
	margin: 0;
}

.nbt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

/* The action row is never sticky: a bar fixed over the form always ends up covering a
   field or a total on some phone. On small screens the main button spans the width. */
@media (max-width: 600px) {
	.nbt-actions-sticky .nbt-btn {
		flex: 1;
	}

	.nbt-row {
		grid-template-columns: 1fr;
	}
}

.nbt-btn {
	font: inherit;
	font-weight: 600;
	min-block-size: var(--nbt-control);
	padding: 10px 20px;
	border-radius: var(--nbt-radius);
	border: var(--nbt-border) solid var(--nbt-line-strong);
	background: var(--nbt-bg);
	color: var(--nbt-ink);
	cursor: pointer;
}

.nbt-btn-primary {
	background: var(--nbt-accent);
	border-color: var(--nbt-accent);
	color: var(--nbt-accent-ink);
	min-inline-size: 180px;
}

.nbt-actions-full {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin-top: 16px;
}

.nbt-actions-full .nbt-btn {
	inline-size: 100%;
	min-inline-size: 0;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nbt-btn-danger {
	background: var(--nbt-danger);
	border-color: var(--nbt-danger);
	color: var(--nbt-danger-ink);
}

.nbt-btn.nbt-btn-danger-text {
	color: var(--nbt-danger);
}

.nbt-confirm {
	margin-top: 16px;
	padding: 14px;
	border: var(--nbt-border) solid var(--nbt-error-edge);
	background: var(--nbt-error-bg);
	border-radius: var(--nbt-radius);
}

.nbt-confirm p {
	margin: 0;
}

/* Move confirmation stays in view at the bottom while the times scroll. */
.nbt-confirm-sticky {
	position: sticky;
	bottom: 8px;
	z-index: 5;
	border-color: var(--nbt-accent);
	background: var(--nbt-bg);
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
}

.nbt-cancel-note {
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
}

.nbt-ticket.is-cancelled {
	border-top-color: var(--nbt-ended);
}

.nbt-ticket.is-cancelled .nbt-ticket-status {
	color: var(--nbt-muted);
}

.nbt-btn-quiet {
	border-color: transparent;
	background: transparent;
	color: var(--nbt-accent);
	padding-inline: 8px;
}

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

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

/* Messages. */
.nbt-error,
.nbt-note,
.nbt-test-note,
.nbt-empty {
	border-radius: var(--nbt-radius);
	padding: 10px 14px;
	margin: 0 0 12px;
}

.nbt-error p,
.nbt-note p,
.nbt-empty p {
	margin: 0;
}

.nbt-error {
	background: var(--nbt-error-bg);
	color: var(--nbt-error-ink);
}

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

.nbt-test-note {
	font-size: var(--wp--preset--font-size--small, 0.9rem);
}

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

/* Receipt: an appointment card with a perforated edge. */
.nbt-ticket {
	border: var(--nbt-border) solid var(--nbt-line);
	border-radius: var(--nbt-radius-lg);
	padding: 20px;
	position: relative;
	background: var(--nbt-bg);
	border-top: 6px solid var(--nbt-accent);
}

.nbt-ticket.is-pending {
	border-top-color: var(--nbt-warn-edge);
}

.nbt-ticket-status {
	font-weight: 700;
	color: var(--nbt-accent);
	margin: 0 0 8px;
}

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

.nbt-ticket-time {
	font-size: var(--wp--preset--font-size--large, 1.15rem);
	margin: 0 0 12px;
}

.nbt-ticket-time strong {
	font-size: var(--wp--preset--font-size--x-large, 1.6rem);
}

.nbt-ticket-code {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: var(--nbt-border) dashed var(--nbt-line);
	color: var(--nbt-muted);
}

.nbt-ticket-code strong {
	color: var(--nbt-ink);
	font-size: var(--wp--preset--font-size--medium, 1.1rem);
	letter-spacing: 0.1em;
}

/* ---------- Block options (data-* on the mount node, classes on .nbt-booking) ---------- */

/* Time tiles. "ticket" is the default look above. */
.nbt-booking.nbt-slot-pill .nbt-slot {
	border-radius: var(--nbt-radius-pill);
}

.nbt-booking.nbt-slot-square .nbt-slots {
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}

.nbt-booking.nbt-slot-square .nbt-slot {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: var(--nbt-radius-sm);
}

/* Days in one row that scrolls sideways; "grid" is the default above. */
.nbt-booking.nbt-days-strip .nbt-days {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	padding-block-end: 6px;
}

.nbt-booking.nbt-days-strip .nbt-day {
	flex: 0 0 68px;
	scroll-snap-align: start;
}

/* Compact: same steps, less air. Targets stay at least 44px. */
.nbt-booking.is-compact .nbt-shell {
	max-width: 560px;
	padding: clamp(12px, 3vw, 18px);
}

.nbt-booking.is-compact .nbt-step-title {
	font-size: var(--wp--preset--font-size--medium, 1.1rem);
}

.nbt-booking.is-compact .nbt-service,
.nbt-booking.is-compact .nbt-person {
	min-block-size: 52px;
	padding: 8px 6px;
	gap: 12px;
}

.nbt-booking.is-compact .nbt-service-desc {
	display: none;
}

.nbt-booking.is-compact .nbt-day {
	min-block-size: 64px;
	padding: 6px 2px;
}

.nbt-booking.is-compact .nbt-day-num {
	font-size: var(--wp--preset--font-size--large, 1.15rem);
}

.nbt-booking.is-compact .nbt-slot {
	min-block-size: 44px;
	padding: 8px 4px;
}

.nbt-booking.is-compact .nbt-group-title {
	margin: 14px 0 6px;
}

.nbt-booking.is-compact .nbt-avatar {
	inline-size: 40px;
	block-size: 40px;
}

/* Skeletons shaped like what they stand in for. */
.nbt-skel {
	background: linear-gradient(90deg, var(--nbt-surface) 0%, var(--nbt-surface-2) 50%, var(--nbt-surface) 100%);
	background-size: 200% 100%;
	animation: nbt-shimmer 1.4s linear infinite;
	border-radius: var(--nbt-radius);
}

.nbt-skel-row {
	block-size: 64px;
	margin-bottom: 8px;
}

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

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

.nbt-skel-slot {
	block-size: 48px;
}

@keyframes nbt-shimmer {
	to {
		background-position: -200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nbt-skel {
		animation: none;
	}

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