/**
 * Ultra Calendar & Booking - booking wizard styles.
 *
 * RTL-first, responsive, theme-agnostic. Every colour/size is a `--ucb-*` custom
 * property with a sensible fallback so the Elementor STYLE controls can override
 * them on `{{WRAPPER}} .ucb-wizard`. WCAG 2.2 AA contrast, visible focus rings,
 * reduced-motion aware, and no horizontal overflow on small screens.
 *
 * @package UltraCalendarBooking
 */

.ucb-wizard {
	/* Palette.
	   Every token points at the matching Elementor global first, so a fresh
	   install already wears the site's own colours and font instead of the
	   plugin's blue. The literal after the comma is only the fallback for a
	   site with no Elementor kit. Per-widget Style controls still win, because
	   Elementor writes them on `{{WRAPPER}} .ucb-wizard`. */
	--ucb-w-bg: #ffffff;
	--ucb-w-fg: var(--e-global-color-text, #1f2733);
	--ucb-w-muted: color-mix(in srgb, var(--ucb-w-fg) 62%, var(--ucb-w-bg));
	--ucb-w-border: color-mix(in srgb, var(--ucb-w-fg) 14%, var(--ucb-w-bg));
	--ucb-w-accent: var(--e-global-color-primary, #2563eb);
	--ucb-w-accent-fg: #ffffff;
	--ucb-w-card-bg: var(--ucb-w-bg);
	--ucb-w-card-accent: var(--ucb-w-accent);
	--ucb-w-slot-bg: color-mix(in srgb, var(--ucb-w-fg) 5%, var(--ucb-w-bg));
	--ucb-w-slot-available: var(--ucb-w-bg);
	--ucb-w-slot-selected: var(--ucb-w-accent);
	--ucb-w-slot-selected-fg: var(--ucb-w-accent-fg);
	--ucb-w-past: color-mix(in srgb, var(--ucb-w-fg) 45%, var(--ucb-w-bg));
	--ucb-w-danger: #b42318;
	--ucb-w-ok: #067647;

	/* Type */
	--ucb-w-font: var(--e-global-typography-text-font-family, inherit);
	--ucb-w-font-heading: var(--e-global-typography-primary-font-family, var(--ucb-w-font));

	/* Metrics */
	--ucb-w-radius: 14px;
	--ucb-w-radius-sm: 9px;
	--ucb-w-gap: 14px;
	--ucb-w-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
	--ucb-w-focus: 0 0 0 3px var(--ucb-w-focus-ring, color-mix(in srgb, var(--ucb-w-accent) 35%, transparent));

	box-sizing: border-box;
	/* Fill whatever container Elementor puts it in. The widget used to cap
	   itself at 720px, which read as a narrow strip inside a full-width
	   section; the "Maximum width" Style control still narrows it on demand. */
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding: clamp(12px, 2.4vw, 22px);
	background: var(--ucb-w-bg);
	color: var(--ucb-w-fg);
	border: 1px solid var(--ucb-w-border);
	border-radius: var(--ucb-w-radius);
	box-shadow: var(--ucb-w-shadow);
	font-family: var(--ucb-w-font, inherit);
	line-height: 1.45;
}

.ucb-wizard__intro-title,
.ucb-wizard__heading,
.ucb-wizard__summary-title,
.ucb-wizard__cal-month {
	font-family: var(--ucb-w-font-heading, inherit);
}

.ucb-wizard *,
.ucb-wizard *::before,
.ucb-wizard *::after {
	box-sizing: border-box;
}

.ucb-wizard button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.ucb-wizard :focus-visible {
	/* Its own variable so the focus ring can be themed without dragging the
	   accent colour — a site may want a loud ring and a quiet accent. */
	outline: 2px solid var(--ucb-w-focus-color, var(--ucb-w-accent));
	outline-offset: 2px;
	border-radius: 6px;
}

/* --------------------------------------------------------------------- *
 *  Intro
 * --------------------------------------------------------------------- */

.ucb-wizard__intro {
	margin-bottom: var(--ucb-w-gap);
}

.ucb-wizard__intro-title {
	margin: 0 0 4px;
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	font-weight: 700;
}

.ucb-wizard__intro-text {
	margin: 0;
	color: var(--ucb-w-muted);
}

/* --------------------------------------------------------------------- *
 *  Progress rail
 * --------------------------------------------------------------------- */

.ucb-wizard__progress {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 clamp(14px, 3vw, 20px);
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ucb-wizard__step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ucb-w-muted);
	font-size: .86rem;
	font-weight: 600;
}

.ucb-wizard__step-num {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--ucb-w-border);
	background: var(--ucb-w-bg);
	font-size: .8rem;
	line-height: 1;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ucb-wizard__step.is-active {
	color: var(--ucb-w-fg);
}

.ucb-wizard__step.is-active .ucb-wizard__step-num {
	background: var(--ucb-w-accent);
	border-color: var(--ucb-w-accent);
	color: var(--ucb-w-accent-fg);
}

.ucb-wizard__step.is-done .ucb-wizard__step-num {
	background: var(--ucb-w-ok);
	border-color: var(--ucb-w-ok);
	color: #fff;
}

.ucb-wizard__step-label {
	white-space: nowrap;
}

/* --------------------------------------------------------------------- *
 *  Status region
 * --------------------------------------------------------------------- */

.ucb-wizard__status {
	margin-bottom: 12px;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	border-radius: var(--ucb-w-radius-sm);
	font-size: .92rem;
	transition: max-height .15s ease, padding .15s ease;
}

.ucb-wizard__status.is-visible {
	max-height: 200px;
	padding: 10px 12px;
	background: var(--ucb-w-notice-bg, rgba(37, 99, 235, .08));
	color: var(--ucb-w-notice-fg, var(--ucb-w-fg));
}

.ucb-wizard__status.is-error {
	background: rgba(180, 35, 24, .1);
	color: var(--ucb-w-danger);
}

/* --------------------------------------------------------------------- *
 *  Panels
 * --------------------------------------------------------------------- */

.ucb-wizard__panel {
	animation: ucb-w-fade .18s ease;
}

@keyframes ucb-w-fade {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

.ucb-wizard__panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.ucb-wizard__heading {
	margin: 0;
	font-size: clamp(1.05rem, 2.4vw, 1.3rem);
	font-weight: 700;
	outline: none;
}

.ucb-wizard__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--ucb-w-border);
	border-radius: 999px;
	color: var(--ucb-w-muted);
	font-size: .86rem;
	font-weight: 600;
}

.ucb-wizard__back::before {
	content: "\2039";
	font-size: 1.15em;
	line-height: 1;
}

[dir="rtl"] .ucb-wizard__back::before {
	content: "\203A";
}

.ucb-wizard__back:hover {
	background: var(--ucb-w-back-bg-hover, transparent);
	border-color: var(--ucb-w-back-border-hover, var(--ucb-w-accent));
	color: var(--ucb-w-back-fg-hover, var(--ucb-w-accent));
}

.ucb-wizard__empty {
	margin: 8px 0;
	padding: 16px;
	background: var(--ucb-w-slot-bg);
	border-radius: var(--ucb-w-radius-sm);
	color: var(--ucb-w-muted);
	text-align: center;
}

/* --------------------------------------------------------------------- *
 *  Cards (service / resource)
 * --------------------------------------------------------------------- */

.ucb-wizard__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: var(--ucb-w-gap);
}

.ucb-wizard__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	text-align: start;
	background: var(--ucb-w-card-bg);
	border: 1px solid var(--ucb-w-border);
	border-inline-start: 4px solid var(--ucb-w-card-accent);
	border-radius: var(--ucb-w-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.ucb-wizard__card:hover {
	/* Colours are declared explicitly, not left to inherit: many themes ship a
	   blanket `button:hover { background: <brand> }` reset that would otherwise
	   repaint every card on hover. The Elementor hover controls override these. */
	background: var(--ucb-w-card-bg-hover, var(--ucb-w-card-bg));
	color: var(--ucb-w-card-fg-hover, inherit);
	border-color: var(--ucb-w-card-border-hover, var(--ucb-w-accent));
	box-shadow: var(--ucb-w-shadow);
	transform: translateY(-1px);
}

.ucb-wizard__card.is-selected {
	border-color: var(--ucb-w-accent);
	box-shadow: var(--ucb-w-focus);
}

.ucb-wizard__card--resource {
	border-inline-start-color: var(--ucb-w-accent);
}

.ucb-wizard__card-name {
	font-size: 1.02rem;
	font-weight: 700;
}

.ucb-wizard__card-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	color: var(--ucb-w-muted);
	font-size: .9rem;
}

.ucb-wizard__card-price {
	font-weight: 700;
	color: var(--ucb-w-fg);
}

/* --------------------------------------------------------------------- *
 *  Mini calendar
 * --------------------------------------------------------------------- */

.ucb-wizard__cal {
	border: 1px solid var(--ucb-w-border);
	border-radius: var(--ucb-w-radius-sm);
	overflow: hidden;
}

.ucb-wizard__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	background: var(--ucb-w-slot-bg);
	border-bottom: 1px solid var(--ucb-w-border);
}

.ucb-wizard__cal-month {
	font-weight: 700;
	text-align: center;
	flex: 1;
}

.ucb-wizard__cal-nav {
	display: inline-grid;
	place-items: center;
	width: var(--ucb-w-nav-size, 36px);
	height: var(--ucb-w-nav-size, 36px);
	/* Themes commonly set an asymmetric padding on every button. With
	   border-box sizing that shrinks the content box off-centre, which parked
	   the chevron against the edge of the circle instead of its middle. */
	padding: 0;
	line-height: 0;
	background: var(--ucb-w-bg);
	border: 1px solid var(--ucb-w-border);
	border-radius: var(--ucb-w-nav-radius, 50%);
	color: var(--ucb-w-fg);
}

.ucb-wizard__cal-nav svg {
	display: block;
	width: var(--ucb-w-nav-icon, 20px);
	height: var(--ucb-w-nav-icon, 20px);
}

.ucb-wizard__cal-nav:hover:not([disabled]) {
	background: var(--ucb-w-nav-bg-hover, var(--ucb-w-bg));
	border-color: var(--ucb-w-nav-border-hover, var(--ucb-w-accent));
	color: var(--ucb-w-nav-fg-hover, var(--ucb-w-accent));
}

.ucb-wizard__cal-nav[disabled] {
	opacity: .4;
	cursor: not-allowed;
}

.ucb-wizard__cal-nav[disabled]:hover {
	background: var(--ucb-w-bg);
	border-color: var(--ucb-w-border);
	color: var(--ucb-w-fg);
}

/* Chevrons already point the right way; flip horizontally for RTL. */
[dir="rtl"] .ucb-wizard__cal-nav svg {
	transform: scaleX(-1);
}

.ucb-wizard__cal-weekdays,
.ucb-wizard__cal-grid {
	display: grid;
	/* minmax(0, 1fr), not 1fr: a bare 1fr track will not shrink below its
	   content, so on a narrow screen seven day cells added up to more than the
	   card they sit in and the grid spilled out of it. */
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ucb-wizard__cal-weekdays {
	padding: 8px 6px 0;
	gap: 2px;
}

.ucb-wizard__cal-weekday {
	min-width: 0;
	overflow: hidden;
	padding: 6px 0;
	text-align: center;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--ucb-w-muted);
}

.ucb-wizard__cal-grid {
	gap: 2px;
	padding: 6px;
}

.ucb-wizard__cal-cell {
	position: relative;
	min-width: 0;
	/* Height is capped rather than tied to the cell's width: a square cell grows
	   with the widget, so a wide calendar became tall enough to push the rest of
	   the wizard off screen. */
	display: grid;
	place-items: center;
	min-height: var(--ucb-w-day-size, 44px);
	height: var(--ucb-w-day-size, 44px);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--ucb-w-radius-sm);
	color: var(--ucb-w-fg);
	font-size: .95rem;
	font-weight: 600;
}

.ucb-wizard__cal-cell.is-empty {
	background: transparent;
	pointer-events: none;
}

.ucb-wizard__cal-cell.is-available {
	background: var(--ucb-w-day-free-bg, var(--ucb-w-slot-available));
	border-color: var(--ucb-w-day-free-border, var(--ucb-w-border));
}

.ucb-wizard__cal-cell.is-available:hover {
	border-color: var(--ucb-w-day-border-hover, var(--ucb-w-accent));
	background: var(--ucb-w-day-bg-hover, rgba(0, 0, 0, .04));
	color: var(--ucb-w-day-fg-hover, var(--ucb-w-fg));
}

/* Days that cannot be picked keep their look on hover, whatever the theme's
   generic button reset says. */
.ucb-wizard__cal-cell.is-disabled:hover,
.ucb-wizard__cal-cell.is-empty:hover,
.ucb-wizard__cal-cell[disabled]:hover {
	background: transparent;
	border-color: transparent;
	color: var(--ucb-w-past);
}

.ucb-wizard__cal-cell.is-available::after {
	content: "";
	position: absolute;
	bottom: 5px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ucb-w-ok);
}

.ucb-wizard__cal-cell.is-disabled {
	color: var(--ucb-w-past);
	cursor: not-allowed;
}

.ucb-wizard__cal-monthstack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	line-height: 1.2;
}

.ucb-wizard__cal-month-heb {
	font-size: .74rem;
	font-weight: 500;
	color: var(--ucb-w-muted);
}

.ucb-wizard__cal-month.is-hidden {
	display: none;
}

/* Hebrew numeral, above the Gregorian number. */
.ucb-wizard__cal-heb {
	position: absolute;
	top: 3px;
	inset-inline-end: 5px;
	font-size: .6rem;
	font-weight: 600;
	line-height: 1;
	color: var(--ucb-w-muted);
	pointer-events: none;
}

.ucb-wizard__cal-cell.is-available .ucb-wizard__cal-heb,
.ucb-wizard__cal-cell.is-selected .ucb-wizard__cal-heb {
	color: inherit;
	opacity: .75;
}

/* Free-slot count on a bookable day, in place of the plain dot. */
.ucb-wizard__cal-count {
	position: absolute;
	bottom: 3px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	font-size: .62rem;
	font-weight: 600;
	line-height: 1;
	color: var(--ucb-w-ok);
}

.ucb-wizard__cal-cell.is-available::after {
	display: none;
}

.ucb-wizard__cal-cell.is-selected .ucb-wizard__cal-count {
	color: var(--ucb-w-accent-fg);
}

/* Booked out: the day exists but nothing is left. Struck through so it never
   reads the same as a day the business is simply closed. */
.ucb-wizard__cal-cell.is-full {
	background: var(--ucb-w-day-full-bg, rgba(0, 0, 0, .045));
	border-color: var(--ucb-w-day-full-border, var(--ucb-w-border));
	color: var(--ucb-w-day-full-fg, var(--ucb-w-muted));
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Closed / outside working hours / already past: no emphasis at all. */
.ucb-wizard__cal-cell.is-closed,
.ucb-wizard__cal-cell.is-past {
	background: var(--ucb-w-day-closed-bg, transparent);
	border-color: var(--ucb-w-day-closed-border, transparent);
	color: var(--ucb-w-day-closed-fg, var(--ucb-w-past));
}

.ucb-wizard__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 10px 12px 4px;
	list-style: none;
	border-top: 1px solid var(--ucb-w-border);
}

.ucb-wizard__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .78rem;
	color: var(--ucb-w-muted);
}

.ucb-wizard__legend-swatch {
	position: relative;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid var(--ucb-w-border);
	flex: none;
}

.ucb-wizard__legend-swatch.is-available {
	background: var(--ucb-w-slot-available);
}

.ucb-wizard__legend-swatch.is-full {
	background: var(--ucb-w-day-full-bg, rgba(0, 0, 0, .045));
}

.ucb-wizard__legend-swatch.is-full::after {
	content: "";
	position: absolute;
	inset-inline: 2px;
	top: 50%;
	height: 1px;
	background: var(--ucb-w-muted);
}

.ucb-wizard__legend-swatch.is-closed {
	background: transparent;
}

.ucb-wizard__cal-cell.is-today {
	box-shadow: inset 0 0 0 2px var(--ucb-w-accent);
}

.ucb-wizard__cal-cell.is-selected {
	background: var(--ucb-w-day-sel-bg, var(--ucb-w-accent));
	border-color: var(--ucb-w-day-sel-border, var(--ucb-w-accent));
	color: var(--ucb-w-day-sel-fg, var(--ucb-w-accent-fg));
}

.ucb-wizard__cal-cell.is-selected::after {
	background: var(--ucb-w-accent-fg);
}

.ucb-wizard__cal-hint {
	margin: 0;
	padding: 10px 12px;
	color: var(--ucb-w-muted);
	font-size: .88rem;
	text-align: center;
}

.ucb-wizard__cal-hint.is-empty {
	color: var(--ucb-w-danger);
}

/* --------------------------------------------------------------------- *
 *  Time slots
 * --------------------------------------------------------------------- */

.ucb-wizard__day-label {
	margin: 0 0 12px;
	font-weight: 700;
}

.ucb-wizard__slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 10px;
}

.ucb-wizard__slot {
	padding: 11px 8px;
	text-align: center;
	background: var(--ucb-w-slot-available);
	border: 1px solid var(--ucb-w-border);
	border-radius: var(--ucb-w-radius-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: border-color .12s ease, background-color .12s ease, transform .1s ease;
}

.ucb-wizard__slot.is-available:hover {
	border-color: var(--ucb-w-slot-border-hover, var(--ucb-w-accent));
	background: var(--ucb-w-slot-bg-hover, rgba(0, 0, 0, .04));
	color: var(--ucb-w-slot-fg-hover, inherit);
	transform: translateY(-1px);
}

/* A theme's blanket `button:hover` reset must not repaint slots that are not
   selectable. */
.ucb-wizard__slot.is-booked:hover,
.ucb-wizard__slot.is-held:hover,
.ucb-wizard__slot.is-closed:hover,
.ucb-wizard__slot.is-past:hover,
.ucb-wizard__slot.is-unavailable:hover {
	/* Each state repeats its own colours here so a theme's blanket
	   `button:hover` rule cannot repaint a slot nobody can click. */
	background: inherit;
	color: inherit;
	border-color: inherit;
	transform: none;
}

.ucb-wizard__slot.is-past:hover {
	background: var(--ucb-w-slot-past-bg, transparent);
	border-color: var(--ucb-w-slot-past-border, var(--ucb-w-border));
	color: var(--ucb-w-slot-past-fg, var(--ucb-w-past));
}

.ucb-wizard__slot.is-booked:hover {
	background: var(--ucb-w-slot-taken-bg, var(--ucb-w-slot-available));
	border-color: var(--ucb-w-slot-taken-border, var(--ucb-w-border));
	color: var(--ucb-w-slot-taken-fg, inherit);
}

.ucb-wizard__slot.is-held:hover {
	background: var(--ucb-w-slot-held-bg, var(--ucb-w-slot-taken-bg, var(--ucb-w-slot-available)));
	border-color: var(--ucb-w-slot-held-border, var(--ucb-w-slot-taken-border, var(--ucb-w-border)));
	color: var(--ucb-w-slot-held-fg, var(--ucb-w-slot-taken-fg, inherit));
}

.ucb-wizard__slot.is-closed:hover {
	background: var(--ucb-w-slot-closed-bg, transparent);
	border-color: var(--ucb-w-slot-closed-border, var(--ucb-w-border));
	color: var(--ucb-w-slot-closed-fg, var(--ucb-w-past));
}

.ucb-wizard__slot.is-selected {
	background: var(--ucb-w-slot-selected);
	border-color: var(--ucb-w-slot-selected);
	color: var(--ucb-w-slot-selected-fg);
}

.ucb-wizard__slot.is-unavailable {
	background: var(--ucb-w-slot-bg);
	color: var(--ucb-w-muted);
	cursor: not-allowed;
}

.ucb-wizard__slot.is-past {
	background: var(--ucb-w-slot-past-bg, transparent);
	border-style: dashed;
	border-color: var(--ucb-w-slot-past-border, var(--ucb-w-border));
	color: var(--ucb-w-slot-past-fg, var(--ucb-w-past));
	cursor: not-allowed;
}

/* Taken: a real booking, or a slot someone else is paying for right now. The
   time itself is struck through so the state reads at a glance, and the reason
   sits under it in words. */
.ucb-wizard__slot.is-booked,
.ucb-wizard__slot.is-held {
	/* Keeps the slot's own colours and dims them, rather than swapping in a pale
	   grey: on a dark slot design the grey turned the label invisible. */
	background: var(--ucb-w-slot-taken-bg, var(--ucb-w-slot-available));
	border-color: var(--ucb-w-slot-taken-border, var(--ucb-w-border));
	color: var(--ucb-w-slot-taken-fg, inherit);
	opacity: var(--ucb-w-slot-taken-opacity, .5);
}

.ucb-wizard__slot.is-booked .ucb-wizard__slot-time,
.ucb-wizard__slot.is-held .ucb-wizard__slot-time {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--ucb-w-slot-taken-strike, currentColor);
}

.ucb-wizard__slot.is-held {
	background: var(--ucb-w-slot-held-bg, var(--ucb-w-slot-taken-bg, var(--ucb-w-slot-available)));
	border-color: var(--ucb-w-slot-held-border, var(--ucb-w-slot-taken-border, var(--ucb-w-border)));
	color: var(--ucb-w-slot-held-fg, var(--ucb-w-slot-taken-fg, inherit));
}

.ucb-wizard__slot.is-closed {
	background: var(--ucb-w-slot-closed-bg, transparent);
	border-color: var(--ucb-w-slot-closed-border, var(--ucb-w-border));
	color: var(--ucb-w-slot-closed-fg, var(--ucb-w-past));
}

.ucb-wizard__slot-time {
	display: block;
}

.ucb-wizard__slot-tag {
	display: block;
	margin-top: 2px;
	font-size: var(--ucb-w-slot-tag-size, .68rem);
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	color: var(--ucb-w-slot-tag-fg, inherit);
	opacity: var(--ucb-w-slot-tag-opacity, .85);
}

.ucb-wizard__slot.is-loading {
	position: relative;
	color: transparent;
}

.ucb-wizard__slot.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	border: 2px solid var(--ucb-w-accent);
	border-top-color: transparent;
	border-radius: 50%;
	animation: ucb-w-spin .7s linear infinite;
}

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

/* --------------------------------------------------------------------- *
 *  Confirm / summary
 * --------------------------------------------------------------------- */

.ucb-wizard__summary {
	padding: 16px;
	background: var(--ucb-w-slot-bg);
	border-radius: var(--ucb-w-radius-sm);
}

.ucb-wizard__summary-title {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 700;
}

.ucb-wizard__summary-list {
	margin: 0;
	display: grid;
	gap: 8px;
}

.ucb-wizard__summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ucb-wizard__summary-row dt {
	margin: 0;
	color: var(--ucb-w-muted);
	font-size: .9rem;
}

.ucb-wizard__summary-row dd {
	margin: 0;
	font-weight: 700;
	text-align: end;
}

.ucb-wizard__countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 14px 0;
	padding: 10px;
	border: 1px dashed var(--ucb-w-border);
	border-radius: var(--ucb-w-radius-sm);
	font-size: .95rem;
	color: var(--ucb-w-muted);
}

.ucb-wizard__countdown-value {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--ucb-w-fg);
	letter-spacing: .02em;
}

.ucb-wizard__countdown.is-urgent {
	border-color: var(--ucb-w-danger);
	color: var(--ucb-w-danger);
}

.ucb-wizard__countdown.is-urgent .ucb-wizard__countdown-value {
	color: var(--ucb-w-danger);
}

.ucb-wizard__confirmbar {
	display: flex;
	gap: 12px;
}

.ucb-wizard__cta {
	flex: 1;
	padding: 14px 20px;
	background: var(--ucb-w-accent);
	border: 1px solid var(--ucb-w-accent);
	border-radius: var(--ucb-w-radius-sm);
	color: var(--ucb-w-accent-fg);
	font-size: 1.02rem;
	font-weight: 800;
	transition: filter .15s ease, transform .1s ease;
}

.ucb-wizard__cta:hover:not([disabled]) {
	background: var(--ucb-w-cta-bg-hover, var(--ucb-w-accent));
	border-color: var(--ucb-w-cta-border-hover, var(--ucb-w-accent));
	color: var(--ucb-w-cta-fg-hover, var(--ucb-w-accent-fg));
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.ucb-wizard__cta[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.ucb-wizard__cta[disabled]:hover {
	background: var(--ucb-w-accent);
	border-color: var(--ucb-w-accent);
	color: var(--ucb-w-accent-fg);
}

/* --------------------------------------------------------------------- *
 *  Responsive
 * --------------------------------------------------------------------- */

/* Tablet. The month grid keeps its seven columns at every width, so the cells
   are what has to give, not the layout. */
@media (max-width: 1024px) {
	.ucb-wizard {
		--ucb-w-day-size: 40px;
	}

	.ucb-wizard__slots {
		grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
	}
}

@media (max-width: 767px) {
	.ucb-wizard {
		--ucb-w-day-size: 38px;
		--ucb-w-gap: 12px;
	}

	.ucb-wizard__cards {
		grid-template-columns: 1fr;
	}

	.ucb-wizard__step {
		font-size: .8rem;
	}

	.ucb-wizard__summary-row {
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {
	.ucb-wizard {
		--ucb-w-day-size: 34px;
		--ucb-w-radius: 10px;
		padding: 12px;
	}

	.ucb-wizard__step-label {
		display: none;
	}

	.ucb-wizard__progress {
		gap: 6px;
	}

	.ucb-wizard__cal-grid,
	.ucb-wizard__cal-weekdays {
		padding-inline: 2px;
	}

	.ucb-wizard__cal-cell {
		font-size: .85rem;
	}

	.ucb-wizard__cal-heb {
		top: 2px;
		inset-inline-end: 3px;
		font-size: .5rem;
	}

	.ucb-wizard__cal-count {
		bottom: 2px;
		font-size: .52rem;
	}

	.ucb-wizard__cal-weekday {
		font-size: .62rem;
		letter-spacing: 0;
	}

	.ucb-wizard__slots {
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
		gap: 8px;
	}

	.ucb-wizard__slot {
		padding: 9px 4px;
		font-size: .9rem;
	}

	/* Thumb targets, and a button that is not a lonely stub in the corner. */
	.ucb-wizard__cta,
	.ucb-wizard__back {
		width: 100%;
		min-height: 46px;
	}

	.ucb-wizard__actions {
		flex-direction: column-reverse;
		gap: 8px;
	}
}

/* Nothing inside the wizard may push the page sideways on a phone. */
@media (max-width: 767px) {
	.ucb-wizard img,
	.ucb-wizard table,
	.ucb-wizard pre {
		max-width: 100%;
	}

	.ucb-wizard {
		overflow-wrap: anywhere;
	}
}

/* --------------------------------------------------------------------- *
 *  Reduced motion
 * --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ucb-wizard *,
	.ucb-wizard *::after,
	.ucb-wizard *::before {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}