/**
 * MicroBite Bookings — widget island styles.
 *
 * CSS-ISOLATION-STANDARD compliant:
 *   Rule 1  — the widget root carries data-mbb (its own island family;
 *             it must survive on arbitrary non-POS themes).
 *   Rule 2  — every selector is [data-mbb] .mbb-* (0,2,0) or the compound
 *             [data-mbb].mbb-widget for the root itself.
 *   Rule 3  — full state contract on every interactive element: base +
 *             :hover + :focus-visible + :active + :disabled, with display /
 *             font / line-height / text-align / background / color / border /
 *             padding / cursor / box-sizing / tap-highlight all declared.
 *   Rule 3½ — the island never trusts inherited typography: the root
 *             declares its own family / size / colour floor.
 *
 * @since 1.41.0-bookings.bk3
 */

[data-mbb].mbb-widget {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #1f2430;
	background: #fff;
	border: 1px solid #e3e6ec;
	border-radius: 12px;
	padding: 18px;
	max-width: 480px;
	box-sizing: border-box;
}
[data-mbb] *,
[data-mbb] *::before,
[data-mbb] *::after { box-sizing: border-box; }

[data-mbb] .mbb-head {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 14px;
	color: #1f2430;
}

[data-mbb] .mbb-loading,
[data-mbb] .mbb-none,
[data-mbb] .mbb-error {
	color: #667085;
	padding: 10px 0;
	font-size: 14px;
}
[data-mbb] .mbb-error { color: #b42318; }
/* §17.5 large-party terminal case — a prompt to call, not a dead end. */
[data-mbb] .mbb-callus {
	color: #344054;
	background: #f8f9fc;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	padding: 12px 14px;
	line-height: 1.5;
}

/* ── Buttons: the full state contract ─────────────────────────────── */
[data-mbb] .mbb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	line-height: 1.2;
	text-align: center;
	background: #fff;
	color: #1f2430;
	border: 1px solid #cfd4dd;
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	transition: background .12s, border-color .12s;
}
[data-mbb] .mbb-btn:hover          { background: #f4f6f9; border-color: #aeb6c2; color: #1f2430; }
[data-mbb] .mbb-btn:focus-visible  { outline: 2px solid #2f6fed; outline-offset: 2px; }
[data-mbb] .mbb-btn:active         { background: #e9edf3; }
[data-mbb] .mbb-btn:disabled       { opacity: .45; cursor: not-allowed; background: #fff; }

/* ── Party stepper ─────────────────────────────────────────────────── */
[data-mbb] .mbb-row       { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
[data-mbb] .mbb-lbl       { color: #667085; font-size: 13px; margin-right: auto; }
[data-mbb] .mbb-step      { width: 36px; height: 36px; padding: 0; font-size: 18px; font-weight: 700; }
[data-mbb] .mbb-party-n   { min-width: 28px; text-align: center; font-weight: 700; font-size: 16px; }

/* ── Day strip ─────────────────────────────────────────────────────── */
/* Day strip: a horizontal scroller (no month calendar). The wrapper hosts the
   edge fades (::before/::after) and the prev/next arrows; JS toggles the
   .mbb-can-prev/.mbb-can-next state classes based on scroll position. */
[data-mbb] .mbb-days-wrap {
	position: relative;
	margin: 0 0 6px;
}
[data-mbb] .mbb-days {
	position: relative;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 10px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	max-width: 100%;
}
/* Visible-days cap (strip_visible > 0): fixed-width buttons so exactly N show;
   the viewport is N buttons + the gaps between them, centred in the wrapper. */
[data-mbb] .mbb-days-wrap[style*="--mbb-days-visible"] .mbb-days {
	max-width: calc(var(--mbb-days-visible) * var(--mbb-day-w, 64px) + (var(--mbb-days-visible) - 1) * 8px);
	margin: 0 auto;
}
[data-mbb] .mbb-days-wrap[style*="--mbb-days-visible"] .mbb-day {
	flex: 0 0 var(--mbb-day-w, 64px);
	min-width: var(--mbb-day-w, 64px);
}
[data-mbb] .mbb-day {
	flex-direction: column;
	gap: 2px;
	min-width: 64px;
	padding: 8px 6px;
	flex: 0 0 auto;
	scroll-snap-align: start;
}
/* Edge fades — shown only when there's more to scroll that way. */
[data-mbb] .mbb-days-wrap::before,
[data-mbb] .mbb-days-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 12px;
	width: 32px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 1;
}
[data-mbb] .mbb-days-wrap::before {
	left: 0;
	background: linear-gradient(to right, var(--mbb-fade, #fff), transparent);
}
[data-mbb] .mbb-days-wrap::after {
	right: 0;
	background: linear-gradient(to left, var(--mbb-fade, #fff), transparent);
}
[data-mbb] .mbb-days-wrap.mbb-can-prev::before,
[data-mbb] .mbb-days-wrap.mbb-can-next::after { opacity: 1; }
/* Prev/next arrows — hidden until JS marks the strip scrollable that way. */
[data-mbb] .mbb-days-nav {
	position: absolute;
	top: 0;
	bottom: 12px;
	width: 26px;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var(--mbb-nav-fg, #344054);
	z-index: 2;
}
[data-mbb] .mbb-days-prev { left: 0; }
[data-mbb] .mbb-days-next { right: 0; }
[data-mbb] .mbb-days-wrap.mbb-can-prev .mbb-days-prev,
[data-mbb] .mbb-days-wrap.mbb-can-next .mbb-days-next { display: flex; }
[data-mbb] .mbb-days-nav:hover { color: var(--mbb-nav-fg-hover, #101828); }
[data-mbb] .mbb-day-dow    { font-size: 12px; color: #667085; }
[data-mbb] .mbb-day-date   { font-size: 14px; font-weight: 700; }
[data-mbb] .mbb-day-closed { font-size: 10px; color: #b42318; white-space: nowrap; max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
[data-mbb] .mbb-day.is-sel {
	background: #eef4ff;
	border-color: #2f6fed;
	color: #1d4fd7;
}
[data-mbb] .mbb-day.is-sel .mbb-day-dow { color: #1d4fd7; }
[data-mbb] .mbb-day.is-closed { opacity: .55; }

/* ── Slot grid ─────────────────────────────────────────────────────── */
[data-mbb] .mbb-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	max-height: 210px;
	overflow-y: auto;
	padding: 2px;
}
[data-mbb] .mbb-slot        { font-size: 14px; padding: 8px 10px; }
[data-mbb] .mbb-slot.is-sel { background: #2f6fed; border-color: #2f6fed; color: #fff; }
[data-mbb] .mbb-slot.is-sel:hover { background: #2b64d6; border-color: #2b64d6; color: #fff; }
[data-mbb] .mbb-slot-tail   { font-size: 11px; opacity: .75; margin-left: 3px; }

/* ── Area choice (§17.11: party → time → area) ─────────────────────── */
[data-mbb] .mbb-sections-lbl { margin: 4px 0 8px; }
[data-mbb] .mbb-sections {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}
[data-mbb] .mbb-section {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	text-align: left;
	line-height: 1.2;
}
[data-mbb] .mbb-section-img {
	width: 40px; height: 40px;
	border-radius: 6px;
	background-size: cover;
	background-position: center;
	background-color: var(--mbb-bg-soft, #f0f0f0);
	flex: 0 0 40px;
}
[data-mbb] .mbb-section-name { font-size: 14px; font-weight: 600; }
[data-mbb] .mbb-section.is-sel { background: #2f6fed; border-color: #2f6fed; color: #fff; }
[data-mbb] .mbb-section.is-sel:hover { background: #2b64d6; border-color: #2b64d6; color: #fff; }
/* A lone qualifying area is an info card (already selected), not a decision. */
[data-mbb] .mbb-sections.is-single .mbb-section { cursor: default; }

/* ── Details form ──────────────────────────────────────────────────── */
[data-mbb] .mbb-form { display: flex; flex-direction: column; gap: 8px; }
[data-mbb] .mbb-in {
	display: block;
	width: 100%;
	font: inherit;
	line-height: 1.3;
	text-align: left;
	background: #fff;
	color: #1f2430;
	border: 1px solid #cfd4dd;
	border-radius: 8px;
	padding: 10px 12px;
	cursor: text;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
[data-mbb] .mbb-in:hover         { border-color: #aeb6c2; }
[data-mbb] .mbb-in:focus,
[data-mbb] .mbb-in:focus-visible { outline: 2px solid #2f6fed; outline-offset: 1px; border-color: #2f6fed; }
[data-mbb] .mbb-in:active        { border-color: #2f6fed; }
[data-mbb] .mbb-in:disabled      { opacity: .5; cursor: not-allowed; }
[data-mbb] .mbb-in::placeholder  { color: #98a2b3; }

/* Honeypot: parked off-canvas — display:none tips some bots off. */
[data-mbb] .mbb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}

[data-mbb] .mbb-submit {
	background: #2f6fed;
	border-color: #2f6fed;
	color: #fff;
	font-weight: 700;
	padding: 12px;
	margin-top: 4px;
}
[data-mbb] .mbb-submit:hover         { background: #2b64d6; border-color: #2b64d6; color: #fff; }
[data-mbb] .mbb-submit:active        { background: #2559c0; }
[data-mbb] .mbb-submit:disabled      { background: #cfd4dd; border-color: #cfd4dd; color: #fff; }

[data-mbb] .mbb-msg        { min-height: 18px; font-size: 13px; color: #667085; }
[data-mbb] .mbb-msg.is-err { color: #b42318; }

/* ── Confirmation panel ────────────────────────────────────────────── */
[data-mbb] .mbb-done            { text-align: center; padding: 18px 8px; }
[data-mbb] .mbb-done-icon       { font-size: 34px; color: #12855b; margin-bottom: 6px; }
[data-mbb] .mbb-done.is-pending .mbb-done-icon { color: #b25e09; }
[data-mbb] .mbb-done-title      { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
[data-mbb] .mbb-done-body       { color: #344054; margin-bottom: 8px; }
[data-mbb] .mbb-done-seat       { display: inline-block; font-size: 15px; font-weight: 700; color: #12855b; background: #e7f5ee; border-radius: 8px; padding: 6px 14px; margin-bottom: 10px; }
[data-mbb] .mbb-done.is-pending .mbb-done-seat { color: #b25e09; background: #fdf0e2; }
[data-mbb] .mbb-done-note       { color: #667085; font-size: 13px; margin-bottom: 8px; }
[data-mbb] .mbb-done-ref        { font-size: 13px; color: #667085; }

@media (max-width: 420px) {
	[data-mbb].mbb-widget { padding: 14px; border-radius: 10px; }
}

/* ── [bk6] Product-page auto-inject (spec §7.3) ────────────────────────
   form.cart is Woo-core template markup — the ONLY theme assumption the
   inject makes. Qty and the native Add button are replaced wholesale by
   the widget (quantity is a booking concept the widget owns). */
form.cart.mbb-native-suppress .quantity,
form.cart.mbb-native-suppress .single_add_to_cart_button { display: none !important; }
form.cart.mbb-native-suppress [data-mbb].mbb-widget--inject { margin: 12px 0; }

/* P2: staff picker */
[data-mbb] .mbb-sel { padding: 8px 10px; border: 1px solid var(--mbb-border, #d5d5d5); border-radius: 8px; background: var(--mbb-bg, #fff); font: inherit; min-width: 180px; }

/* bk9: reschedule mode — the widget collects only a new time. */
[data-mbb] .mbb-form--reschedule { gap: 8px; }
[data-mbb] .mbb-reschedule-hint {
	font-size: 13px; line-height: 1.4; color: var(--mbb-muted, #666);
	padding: 6px 10px; margin-bottom: 2px;
	background: var(--mbb-bg-soft, #f6f6f6); border-radius: 8px;
}

/* ── [bk32] Area-photo peek + lightbox ─────────────────────────────── */
[data-mbb] .mbb-section-img { position: relative; }
[data-mbb] .mbb-peek {
	position: absolute; right: 2px; bottom: 2px;
	width: 20px; height: 20px; line-height: 20px;
	font-size: 12px; text-align: center; cursor: zoom-in;
	color: #fff; background: rgba(0,0,0,.55); border-radius: 4px;
}
[data-mbb] .mbb-peek:hover,
[data-mbb] .mbb-peek:focus-visible { background: rgba(0,0,0,.8); outline: none; }
.mbb-lightbox {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.82); cursor: zoom-out; padding: 24px;
}
.mbb-lightbox-img {
	max-width: 92vw; max-height: 88vh;
	border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.mbb-lightbox-close {
	position: absolute; top: 14px; right: 18px;
	font-size: 30px; line-height: 1; color: #fff;
	background: none; border: 0; cursor: pointer; padding: 6px;
}

/* ── [bk33] Month-calendar date picker (per-service opt-in) ────────────
   CSS-ISOLATION-STANDARD: every rule [data-mbb]-scoped; cells are .mbb-btn
   (full state contract inherited) plus the state classes below; the inert
   cells (dow header, pads, out-of-horizon days) are spans with their own
   display/typography declared — nothing trusts the theme. */
[data-mbb] .mbb-cal       { margin: 0 0 12px; }
[data-mbb] .mbb-cal-head  { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
[data-mbb] .mbb-cal-title {
	flex: 1;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: #1f2430;
	line-height: 1.2;
}
[data-mbb] .mbb-cal-nav   { width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1; flex: 0 0 34px; }
[data-mbb] .mbb-cal-grid  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
[data-mbb] .mbb-cal-dow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	color: #667085;
	text-align: center;
	padding: 2px 0 4px;
}
[data-mbb] .mbb-cal-pad   { display: block; min-height: 1px; }
[data-mbb] .mbb-cal-day {
	padding: 0;
	min-height: 36px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
}
/* In-month but outside the booking horizon — visible context, inert. */
[data-mbb] span.mbb-cal-day.is-out {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	color: #c6ccd6;
	background: none;
	border: 1px solid transparent;
	cursor: default;
}
/* Closed day: plainly gone. Full day: was open — nothing left for this
   party — the strikethrough says "sold", not "shut". Both disabled. */
[data-mbb] .mbb-cal-day.is-closed:disabled { opacity: .35; }
[data-mbb] .mbb-cal-day.is-full:disabled   { opacity: .45; text-decoration: line-through; text-decoration-thickness: 1px; }
/* Today: a quiet ring — cosmetic, never implies availability. */
[data-mbb] .mbb-cal-day.is-today { box-shadow: inset 0 0 0 1px #98a2b3; }
[data-mbb] .mbb-cal-day.is-sel {
	background: #2f6fed;
	border-color: #2f6fed;
	color: #fff;
}
[data-mbb] .mbb-cal-day.is-sel:hover { background: #2b64d6; border-color: #2b64d6; color: #fff; }
/* A selected day that emptied after a party bump stays selected (P-BK33.5)
   — keep it recognisable through the disabled fade. */
[data-mbb] .mbb-cal-day.is-sel:disabled { background: #2f6fed; border-color: #2f6fed; color: #fff; }

/* [appt3] Calendar + time column. Existing Appearance tokens; no new palette.
   Scope excludes strip, steps, range hires and rescheduling. Container queries
   respond to a narrow product column even on a wide desktop viewport. */
[data-mbb].mbb-widget.mbb-calendar-view {
 --mbb-book-surface: var(--mbpos-color-surface, #fff);
 --mbb-book-text: var(--mbpos-color-text, #1d2327);
 --mbb-book-muted: var(--mbpos-color-text-muted, #50575e);
 --mbb-book-border: var(--mbpos-color-border, #c3c4c7);
 container-type: inline-size;
 width: 100%; max-width: 720px;
 font-family: var(--mbpos-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
 font-size: var(--mbpos-font-size-base, 15px);
 color: var(--mbb-book-text); background: var(--mbb-book-surface);
 border-color: var(--mbb-book-border); border-radius: var(--mbpos-radius-lg, 16px);
 padding: 22px;
}
[data-mbb].mbb-calendar-view .mbb-head { color: var(--mbpos-color-heading, #1d2327); font-size: 24px; }
[data-mbb].mbb-calendar-view .mbb-lbl,
[data-mbb].mbb-calendar-view .mbb-none,
[data-mbb].mbb-calendar-view .mbb-cal-dow { color: var(--mbb-book-muted); }
[data-mbb].mbb-calendar-view .mbb-date-time { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(160px, 1fr); gap: 24px; margin: 18px 0; align-items: start; }
[data-mbb].mbb-calendar-view .mbb-cal { margin: 0; min-width: 0; }
[data-mbb].mbb-calendar-view .mbb-cal-key { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 11px; color: var(--mbb-book-muted); }
[data-mbb].mbb-calendar-view .mbb-cal-title { color: var(--mbpos-color-heading, #1d2327); }
[data-mbb].mbb-calendar-view .mbb-cal-day { min-height: 44px; }
[data-mbb].mbb-calendar-view .mbb-time-panel { min-width: 0; }
[data-mbb].mbb-calendar-view .mbb-time-heading { color: var(--mbpos-color-heading, #1d2327); font-weight: 700; margin: 0 0 8px; }
[data-mbb].mbb-calendar-view .mbb-time-hint,
[data-mbb].mbb-calendar-view .mbb-scroll-hint { font-size: 12px; color: var(--mbb-book-muted); margin: 6px 0 10px; }
[data-mbb].mbb-calendar-view .mbb-time-panel .mbb-slots { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; max-height: 286px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; padding: 3px 9px 3px 3px; margin: 0; }
[data-mbb].mbb-calendar-view .mbb-slot { flex-shrink: 0; width: 100%; min-height: 44px; }
[data-mbb].mbb-calendar-view .mbb-btn,
[data-mbb].mbb-calendar-view .mbb-in,
[data-mbb].mbb-calendar-view .mbb-sel { color: var(--mbb-book-text); background: var(--mbb-book-surface); border-color: var(--mbb-book-border); border-radius: var(--mbpos-radius-sm, 8px); min-height: 44px; }
[data-mbb].mbb-calendar-view .mbb-btn:hover,
[data-mbb].mbb-calendar-view .mbb-in:hover,
[data-mbb].mbb-calendar-view .mbb-sel:hover { color: var(--mbb-book-text); background: var(--mbpos-color-surface-2, #f6f7f7); border-color: var(--mbpos-color-border-strong, #8c8f94); }
[data-mbb].mbb-calendar-view .mbb-btn:active { background: var(--mbpos-color-surface-2, #f6f7f7); }
[data-mbb].mbb-calendar-view .mbb-btn:focus-visible,
[data-mbb].mbb-calendar-view .mbb-in:focus,
[data-mbb].mbb-calendar-view .mbb-sel:focus-visible,
[data-mbb].mbb-calendar-view .mbb-slots:focus-visible { outline: 2px solid var(--mbpos-color-primary, #2271b1); outline-offset: 2px; }
[data-mbb].mbb-calendar-view .mbb-btn:disabled { background: var(--mbb-book-surface); color: var(--mbb-book-muted); }
[data-mbb].mbb-calendar-view .mbb-slot.is-sel,
[data-mbb].mbb-calendar-view .mbb-cal-day.is-sel,
[data-mbb].mbb-calendar-view .mbb-section.is-sel { background: var(--mbpos-color-selected, #1d2327); color: var(--mbpos-color-selected-text, #fff); border-color: var(--mbpos-color-selected-strong, #1d2327); }
[data-mbb].mbb-calendar-view .mbb-slot.is-sel:hover,
[data-mbb].mbb-calendar-view .mbb-cal-day.is-sel:hover,
[data-mbb].mbb-calendar-view .mbb-section.is-sel:hover { background: var(--mbpos-color-selected-strong, #1d2327); color: var(--mbpos-color-selected-text, #fff); }
[data-mbb].mbb-calendar-view .mbb-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--mbpos-color-border-strong, #8c8f94); }
[data-mbb].mbb-calendar-view .mbb-cal-day.is-out { color: var(--mbb-book-muted); opacity: .45; }
[data-mbb].mbb-calendar-view .mbb-booking-footer { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; border-top: 1px solid var(--mbb-book-border); padding: 16px 0 0; background: var(--mbb-book-surface); }
[data-mbb].mbb-calendar-view .mbb-booking-summary { min-width: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
[data-mbb].mbb-calendar-view .mbb-booking-summary strong,
[data-mbb].mbb-calendar-view .mbb-booking-summary span { display: block; }
[data-mbb].mbb-calendar-view .mbb-booking-summary span { font-size: 12px; color: var(--mbb-book-muted); }
[data-mbb].mbb-calendar-view .mbb-booking-continue,
[data-mbb].mbb-calendar-view .mbb-submit { background: var(--mbpos-color-primary, #2271b1); color: var(--mbpos-color-primary-text, #fff); border-color: var(--mbpos-color-primary, #2271b1); font-weight: 700; }
[data-mbb].mbb-calendar-view .mbb-booking-continue:hover,
[data-mbb].mbb-calendar-view .mbb-submit:hover,
[data-mbb].mbb-calendar-view .mbb-booking-continue:active,
[data-mbb].mbb-calendar-view .mbb-submit:active { background: var(--mbpos-color-primary-hover, #135e96); color: var(--mbpos-color-primary-hover-text, #fff); border-color: var(--mbpos-color-primary-hover, #135e96); }
[data-mbb].mbb-calendar-view .mbb-booking-continue:disabled,
[data-mbb].mbb-calendar-view .mbb-submit:disabled { background: var(--mbpos-color-primary, #2271b1); color: var(--mbpos-color-primary-text, #fff); opacity: .45; }
[data-mbb].mbb-calendar-view .mbb-form { margin-top: 20px; }
[data-mbb].mbb-calendar-view .mbb-form[hidden],
[data-mbb].mbb-calendar-view .mbb-scroll-hint[hidden] { display: none; }
[data-mbb].mbb-calendar-view .mbb-selection-notice { padding: 12px 0 0; font-size: 13px; color: var(--mbb-book-text); }
[data-mbb].mbb-calendar-view .mbb-callus { color: var(--mbb-book-text); background: var(--mbpos-color-surface-2, #f6f7f7); border-color: var(--mbb-book-border); }
[data-mbb].mbb-calendar-view .mbb-in::placeholder { color: var(--mbb-book-muted); }
@container (max-width: 500px) {
 [data-mbb].mbb-calendar-view .mbb-date-time { grid-template-columns: minmax(0, 1fr); gap: 20px; }
 [data-mbb].mbb-calendar-view .mbb-time-panel .mbb-slots { max-height: 234px; }
 [data-mbb].mbb-calendar-view .mbb-booking-footer { position: sticky; bottom: 0; z-index: 2; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
 [data-mbb].mbb-calendar-view .mbb-booking-continue { width: 100%; }
 [data-mbb].mbb-calendar-view.mbb-details-open .mbb-booking-footer { position: static; }
 [data-mbb].mbb-calendar-view .mbb-submit { position: sticky; bottom: 0; z-index: 2; }
}

/* [appt4] Shared Appearance skin. Extra root specificity overrides legacy
   stepped colours without altering availability, photo crops or navigation. */
[data-mbb][data-mbb].mbb-widget.mbb-booking-view {
 --mbb-card: var(--mbpos-color-surface, #fff);
 --mbb-paper: var(--mbpos-color-surface, #fff);
 --mbb-ink: var(--mbpos-color-text, #1d2327);
 --mbb-muted: var(--mbpos-color-text-muted, #50575e);
 --mbb-line: var(--mbpos-color-border, #c3c4c7);
 --mbb-serif: var( --mbpos-font-family, system-ui);
 --mbb-fade: var(--mbpos-color-surface, #fff);
 --mbb-nav-fg: var(--mbpos-color-text, #1d2327);
 color: var(--mbb-ink); background: var(--mbb-card);
 font-family: var( --mbpos-font-family, system-ui);
 font-size: var(--mbpos-font-size-base, 15px);
 width: 100%; max-width: 720px; padding: 22px;
 border-color: var(--mbb-line); border-radius: var(--mbpos-radius-lg, 16px);
 container-type: inline-size;
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-head { font-family: inherit; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--mbpos-color-heading, #1d2327); }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-step-title, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-cal-title { font-family: inherit; color: var(--mbpos-color-heading, #1d2327); }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-lbl, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-none, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-step-sub, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-step-hint, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-cal-dow, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-day-dow { color: var(--mbb-muted); }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-btn, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-in, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-sel {
 min-height: 44px; background: var(--mbb-card); color: var(--mbb-ink);
 border-color: var(--mbb-line); border-radius: var(--mbpos-radius-sm, 8px);
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-btn:hover, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-btn:active, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-in:hover, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-sel:hover {
 background: var(--mbpos-color-surface-2, #f6f7f7); color: var(--mbb-ink); border-color: var(--mbpos-color-border-strong, #8c8f94);
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-btn:focus-visible, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-in:focus, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-sel:focus-visible, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-chip:focus-visible, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-back:focus-visible {
 outline: 2px solid var(--mbpos-color-primary, #2271b1); outline-offset: 2px; box-shadow: none;
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-btn:disabled { color: var(--mbb-muted); background: var(--mbb-card); opacity: .45; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-day.is-sel, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-slot.is-sel, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-cal-day.is-sel, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section.is-sel,
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-chip.is-cur {
 background: var(--mbpos-color-selected, #1d2327); color: var(--mbpos-color-selected-text, #fff);
 border-color: var(--mbpos-color-selected-strong, #1d2327); box-shadow: none;
}
/* Nested spans must consume the foreground pair too: inheritance alone fails. */
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section.is-sel .mbb-section-txt {
 background: var(--mbpos-color-selected, #1d2327); color: var(--mbpos-color-selected-text, #fff);
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section.is-sel .mbb-section-name,
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section.is-sel .mbb-section-meta,
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section.is-sel .mbb-section-combo,
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-day.is-sel .mbb-day-dow, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-day.is-sel .mbb-day-date {
 color: var(--mbpos-color-selected-text, #fff); background: transparent;
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section.is-sel .mbb-section-img::after {
 background: var(--mbpos-color-selected, #1d2327); color: var(--mbpos-color-selected-text, #fff);
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-next, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-submit, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-booking-continue {
 background: var(--mbpos-color-primary, #2271b1); color: var(--mbpos-color-primary-text, #fff);
 border-color: var(--mbpos-color-primary, #2271b1); font-weight: 700;
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-next:hover, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-submit:hover, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-booking-continue:hover,
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-next:active, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-submit:active, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-booking-continue:active {
 background: var(--mbpos-color-primary-hover, #135e96); color: var(--mbpos-color-primary-hover-text, #fff);
 border-color: var(--mbpos-color-primary-hover, #135e96);
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-next:disabled, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-submit:disabled, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-booking-continue:disabled {
 background: var(--mbpos-color-primary, #2271b1); color: var(--mbpos-color-primary-text, #fff); opacity: .45;
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-days { padding-top: 6px; padding-bottom: 14px; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-day { min-height: 72px; gap: 5px; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-day .mbb-day-date { font-size: 19px; font-weight: 700; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-party { padding: 12px; border: 1px solid var(--mbb-line); border-radius: var(--mbpos-radius-sm, 8px); }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-step { width: 44px; flex-shrink: 0; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-slots { gap: 8px; padding: 3px; margin-bottom: 18px; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-slot { min-width: 76px; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section-name { color: var(--mbb-ink); }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section-meta, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section-ph { color: var(--mbb-muted); }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section-combo, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-section-img.is-ph { background: var(--mbpos-color-surface-2, #f6f7f7); color: var(--mbb-ink); }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-chip { min-height: 36px; padding: 8px 12px; letter-spacing: 0; text-transform: none; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-chip.is-done, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-chip.is-done:hover, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-chip.is-done:active,
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-recap-row:hover, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-recap-row:active, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-callus {
 background: var(--mbpos-color-surface-2, #f6f7f7); color: var(--mbb-ink); border-color: var(--mbb-line);
}
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-back, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-back:hover, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-back:active, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-recap-edit { color: var(--mbb-ink); }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-in::placeholder { color: var(--mbb-muted); }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--mbpos-color-border-strong, #8c8f94); }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-cal-day.is-out { color: var(--mbb-muted); opacity: .45; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view:not(.mbb-steps) .mbb-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view:not(.mbb-steps) .mbb-section { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; text-align: left; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view:not(.mbb-steps) .mbb-section-img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
[data-mbb][data-mbb].mbb-widget.mbb-booking-view:not(.mbb-steps) .mbb-section-name { display: block; padding: 12px; }
@container (max-width: 360px) {
 [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-sections, [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-sections.is-shape-portrait { grid-template-columns: minmax(0,1fr); }
 [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-progress { gap: 4px; }
 [data-mbb][data-mbb].mbb-widget.mbb-booking-view .mbb-chip { padding: 8px; }
}
/* END appt4 */

/* ═══════════════════════════════════════════════════════════════════════
   [bk34] Stepped-flow premium skin (P-BK34.4 / P-BK34.6).
   EVERY rule here is scoped under the .mbb-steps root class, which the
   widget toggles ON only when date_ui === 'steps' — strip and calendar
   venues render byte-identically to bk33. Tokens live on the root so a
   future venue-accent option is a one-variable change. Palette: warm
   paper + ink + deep emerald — premium hospitality, not dashboard blue.
   System serif for display type (no font fetch — shared-host doctrine).
   CSS-ISOLATION-STANDARD: full state contract on every new interactive
   element; inert spans declare their own display/typography.
   ═══════════════════════════════════════════════════════════════════ */

[data-mbb].mbb-widget.mbb-steps {
	--mbb-accent:      #0e5741; /* deep emerald */
	--mbb-accent-dark: #0b4534;
	--mbb-accent-deep: #093a2c;
	--mbb-accent-soft: #e9f1ec;
	--mbb-paper:       #fbf9f4; /* warm paper */
	--mbb-card:        #ffffff;
	--mbb-ink:         #23201a;
	--mbb-muted:       #77705f;
	--mbb-line:        #e7e1d3;
	--mbb-serif:       ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
	background: var(--mbb-paper);
	border: 1px solid var(--mbb-line);
	border-radius: 18px;
	padding: 24px 22px;
	max-width: 560px;
	color: var(--mbb-ink);
	box-shadow: 0 1px 2px rgba(35, 32, 26, .04), 0 12px 32px -18px rgba(35, 32, 26, .18);
	--mbb-fade: var(--mbb-paper); /* strip fade token, harmless here */
}
[data-mbb].mbb-steps .mbb-head {
	font-family: var(--mbb-serif);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: .005em;
	color: var(--mbb-ink);
	margin: 0 0 14px;
}

/* ── Progress chips ── done = tappable, current = highlighted, rest muted */
[data-mbb].mbb-steps .mbb-progress {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--mbb-line);
}
[data-mbb].mbb-steps .mbb-chip {
	display: inline-flex;
	align-items: center;
	font: inherit;
	font-size: 12.5px;
	line-height: 1.2;
	text-align: center;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: transparent;
	color: var(--mbb-muted);
	border: none;
	border-radius: 999px;
	padding: 5px 8px;
	box-sizing: border-box;
}
[data-mbb].mbb-steps .mbb-chip.is-cur {
	color: var(--mbb-accent-dark);
	background: var(--mbb-accent-soft);
	font-weight: 700;
}
[data-mbb].mbb-steps button.mbb-chip.is-done {
	color: var(--mbb-ink);
	background: #f2eee3;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	font-weight: 600;
	transition: background .12s, color .12s;
}
[data-mbb].mbb-steps button.mbb-chip.is-done:hover         { background: var(--mbb-accent-soft); color: var(--mbb-accent-dark); }
[data-mbb].mbb-steps button.mbb-chip.is-done:focus-visible { outline: 2px solid var(--mbb-accent); outline-offset: 2px; }
[data-mbb].mbb-steps button.mbb-chip.is-done:active        { background: #e4ded0; }
[data-mbb].mbb-steps button.mbb-chip.is-done:disabled      { opacity: .45; cursor: not-allowed; }
[data-mbb].mbb-steps .mbb-chip-sep {
	display: inline-block;
	font-size: 13px;
	line-height: 1;
	color: var(--mbb-line);
}

/* ── Step body — gentle fade-up on step change ─────────────────────── */
[data-mbb].mbb-steps .mbb-step-body { animation: mbbStepIn .26s ease; }
@keyframes mbbStepIn {
	from { opacity: 0; transform: translateY(7px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	[data-mbb].mbb-steps .mbb-step-body { animation: none; }
}

/* ── Shared control retint ─────────────────────────────────────────── */
[data-mbb].mbb-steps .mbb-btn {
	border-color: #ddd6c6;
	border-radius: 10px;
	background: var(--mbb-card);
	color: var(--mbb-ink);
}
[data-mbb].mbb-steps .mbb-btn:hover         { background: #f6f3ea; border-color: #c9c1ab; color: var(--mbb-ink); }
[data-mbb].mbb-steps .mbb-btn:focus-visible { outline: 2px solid var(--mbb-accent); outline-offset: 2px; }
[data-mbb].mbb-steps .mbb-btn:active        { background: #efeadd; }
[data-mbb].mbb-steps .mbb-lbl               { color: var(--mbb-muted); letter-spacing: .02em; }
[data-mbb].mbb-steps .mbb-sel:focus-visible { outline: 2px solid var(--mbb-accent); outline-offset: 2px; }

/* ── Back link + step titles + hint ────────────────────────────────── */
[data-mbb].mbb-steps .mbb-back {
	display: inline-flex;
	align-items: center;
	font: inherit;
	font-size: 13.5px;
	line-height: 1.2;
	text-align: left;
	background: transparent;
	color: var(--mbb-muted);
	border: none;
	border-radius: 6px;
	padding: 4px 6px 4px 0;
	margin: 0 0 8px;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	transition: color .12s;
}
[data-mbb].mbb-steps .mbb-back:hover         { color: var(--mbb-accent-dark); background: transparent; }
[data-mbb].mbb-steps .mbb-back:focus-visible { outline: 2px solid var(--mbb-accent); outline-offset: 2px; }
[data-mbb].mbb-steps .mbb-back:active        { color: var(--mbb-accent-deep); }
[data-mbb].mbb-steps .mbb-back:disabled      { opacity: .45; cursor: not-allowed; }
[data-mbb].mbb-steps .mbb-step-title {
	display: block;
	font-family: var(--mbb-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--mbb-ink);
	margin: 0 0 12px;
}
[data-mbb].mbb-steps .mbb-step-sub  { font-family: inherit; font-size: 14px; font-weight: 400; color: var(--mbb-muted); }
[data-mbb].mbb-steps .mbb-step-hint { display: block; font-size: 13px; color: var(--mbb-muted); text-align: center; margin: 4px 0 0; }

/* ── Calendar retint — selection & today carry the accent ──────────── */
[data-mbb].mbb-steps .mbb-cal-title { font-family: var(--mbb-serif); font-weight: 600; }
[data-mbb].mbb-steps .mbb-cal-dow   { color: var(--mbb-muted); letter-spacing: .06em; }
[data-mbb].mbb-steps .mbb-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--mbb-accent-soft), inset 0 0 0 2.5px var(--mbb-accent); }
[data-mbb].mbb-steps .mbb-cal-day.is-sel,
[data-mbb].mbb-steps .mbb-cal-day.is-sel:hover,
[data-mbb].mbb-steps .mbb-cal-day.is-sel:disabled {
	background: var(--mbb-accent);
	border-color: var(--mbb-accent);
	color: #fff;
}
[data-mbb].mbb-steps .mbb-cal-day.is-sel:hover { background: var(--mbb-accent-dark); border-color: var(--mbb-accent-dark); }

/* ── Slots as pills ─────────────────────────────────────────────────── */
[data-mbb].mbb-steps .mbb-slot { border-radius: 999px; padding: 9px 14px; }
[data-mbb].mbb-steps .mbb-slot.is-sel,
[data-mbb].mbb-steps .mbb-slot.is-sel:hover {
	background: var(--mbb-accent);
	border-color: var(--mbb-accent);
	color: #fff;
}
[data-mbb].mbb-steps .mbb-slot.is-sel:hover { background: var(--mbb-accent-dark); border-color: var(--mbb-accent-dark); }

/* ── Area cards — moved to the [bk35] block at the end of this file.
   The bk34 retint kept the classic 40px chip thumb and only overrode its
   HEIGHT, producing a 40×96 photo sliver — bk35 replaces the whole card
   in steps mode (image-led, capacity + joined-tables tidbits). ───────── */

/* ── Continue + submit — confident, full-width accent ──────────────── */
[data-mbb].mbb-steps .mbb-next,
[data-mbb].mbb-steps .mbb-submit {
	display: flex;
	width: 100%;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .01em;
	background: var(--mbb-accent);
	border-color: var(--mbb-accent);
	color: #fff;
	border-radius: 12px;
	padding: 13px 16px;
	margin-top: 14px;
}
[data-mbb].mbb-steps .mbb-next:hover,
[data-mbb].mbb-steps .mbb-submit:hover    { background: var(--mbb-accent-dark); border-color: var(--mbb-accent-dark); color: #fff; }
[data-mbb].mbb-steps .mbb-next:active,
[data-mbb].mbb-steps .mbb-submit:active   { background: var(--mbb-accent-deep); }
[data-mbb].mbb-steps .mbb-next:disabled,
[data-mbb].mbb-steps .mbb-submit:disabled { background: #d5cfbf; border-color: #d5cfbf; color: #fff; opacity: 1; }

/* ── Recap card (step 3) — rows jump back to their step ────────────── */
[data-mbb].mbb-steps .mbb-recap {
	background: var(--mbb-card);
	border: 1px solid var(--mbb-line);
	border-radius: 14px;
	overflow: hidden;
	margin: 0 0 16px;
}
[data-mbb].mbb-steps .mbb-recap-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	font: inherit;
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	background: transparent;
	color: var(--mbb-ink);
	border: none;
	border-bottom: 1px solid var(--mbb-line);
	padding: 12px 14px;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	transition: background .12s;
}
[data-mbb].mbb-steps .mbb-recap-row:last-child     { border-bottom: none; }
[data-mbb].mbb-steps .mbb-recap-row:hover          { background: #faf7ef; }
[data-mbb].mbb-steps .mbb-recap-row:focus-visible  { outline: 2px solid var(--mbb-accent); outline-offset: -2px; }
[data-mbb].mbb-steps .mbb-recap-row:active         { background: #f3efe3; }
[data-mbb].mbb-steps .mbb-recap-row:disabled       { opacity: .45; cursor: not-allowed; }
[data-mbb].mbb-steps .mbb-recap-k {
	display: inline-block;
	flex: 0 0 44px;
	font-size: 11.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--mbb-muted);
}
[data-mbb].mbb-steps .mbb-recap-v    { display: inline-block; flex: 1 1 auto; font-weight: 600; }
[data-mbb].mbb-steps .mbb-recap-edit { display: inline-block; flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--mbb-accent-dark); }
[data-mbb].mbb-steps .mbb-recap-img {
	display: inline-block;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--mbb-line);
}

/* ── Inputs + messages + done card retint ──────────────────────────── */
[data-mbb].mbb-steps .mbb-in {
	border-color: #ddd6c6;
	border-radius: 10px;
	background: var(--mbb-card);
	color: var(--mbb-ink);
	padding: 11px 13px;
}
[data-mbb].mbb-steps .mbb-in:focus { border-color: var(--mbb-accent); outline: none; box-shadow: 0 0 0 3px rgba(14, 87, 65, .12); }
[data-mbb].mbb-steps .mbb-callus {
	background: #fbf6e9;
	border-color: #ead9ac;
	color: #6b5619;
	border-radius: 12px;
}
[data-mbb].mbb-steps .mbb-done-icon { color: var(--mbb-accent); }
[data-mbb].mbb-steps .mbb-done-title { font-family: var(--mbb-serif); font-size: 21px; }
[data-mbb].mbb-steps .mbb-done-seat  { color: var(--mbb-accent-deep); background: var(--mbb-accent-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   [bk35] Area chooser — image-led cards (P-BK35.1/2/4).
   Replaces the bk34 area-card retint. Steps mode ONLY: every selector
   here carries the .mbb-steps scope (the bk34 harness scoping scan covers
   this block too) — the classic chip rules at the top of the file are
   untouched and strip/calendar venues render zero-shift. The photo owns
   the card top full-bleed (killing the bk34 40×96 sliver: the classic
   40px chip width is overridden with width:100%). Selection is an emerald
   ring + tinted footer + a ✓ badge — confidence, never a colour flood
   over the venue's photo. Inert spans declare their own display —
   CSS-ISOLATION-STANDARD.
   ═══════════════════════════════════════════════════════════════════ */

[data-mbb].mbb-steps .mbb-sections {
	display: grid;
	/* [bk36/P-BK36.3] The grid owns a whole step now — the floor rises so
	   the photos get real presence (portrait narrows it; see [bk36]). */
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
	margin: 2px 0 16px;
}
[data-mbb].mbb-steps .mbb-sections.is-single { grid-template-columns: 1fr; }
[data-mbb].mbb-steps .mbb-section {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	background: var(--mbb-card);
	border: 1px solid var(--mbb-line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(35, 32, 26, .05);
	transition: border-color .15s, box-shadow .15s;
}
[data-mbb].mbb-steps .mbb-section:hover {
	background: var(--mbb-card);
	border-color: #cfc6b0;
	box-shadow: 0 6px 18px -10px rgba(35, 32, 26, .3);
	color: inherit;
}
[data-mbb].mbb-steps .mbb-section:focus-visible { outline: 2px solid var(--mbb-accent); outline-offset: 2px; }
[data-mbb].mbb-steps .mbb-section:active        { background: #faf7ef; }
[data-mbb].mbb-steps .mbb-section-img {
	width: 100%;
	/* [bk36/P-BK36.2] A RATIO, not a fixed height: the bk35 118px strip
	   letterboxed wide cards into a band through the middle of the room.
	   height:auto overrides the classic 40px chip; the shape classes in
	   the [bk36] block re-pin the ratio per the venue's photo_shape knob.
	   (The old is-single 152px override died with the fixed height — the
	   [bk36] block caps the lone info card's photo instead.) */
	height: auto;
	aspect-ratio: 4 / 3;
	flex: 0 0 auto;
	border-radius: 0;
}
/* No photo yet: a quiet serif monogram on warm paper — never a bare box. */
[data-mbb].mbb-steps .mbb-section-img.is-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #f4f0e5, #eae4d3);
}
[data-mbb].mbb-steps .mbb-section-ph {
	display: block;
	font-family: var(--mbb-serif);
	font-size: 34px;
	line-height: 1;
	color: #b5ab92;
}
[data-mbb].mbb-steps .mbb-section-txt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 10px 12px 12px;
}
[data-mbb].mbb-steps .mbb-section-name { display: block; font-size: 15px; font-weight: 600; color: var(--mbb-ink); }
[data-mbb].mbb-steps .mbb-section-meta { display: block; font-size: 12.5px; line-height: 1.3; color: var(--mbb-muted); }
[data-mbb].mbb-steps .mbb-section-combo {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mbb-accent-dark);
	background: var(--mbb-accent-soft);
	border-radius: 999px;
	padding: 3px 9px;
	margin-top: 3px;
}
[data-mbb].mbb-steps .mbb-section.is-sel,
[data-mbb].mbb-steps .mbb-section.is-sel:hover {
	background: var(--mbb-card);
	border-color: var(--mbb-accent);
	box-shadow: inset 0 0 0 1.5px var(--mbb-accent);
	color: var(--mbb-ink);
}
[data-mbb].mbb-steps .mbb-section.is-sel .mbb-section-txt  { background: var(--mbb-accent-soft); }
[data-mbb].mbb-steps .mbb-section.is-sel .mbb-section-name { color: var(--mbb-accent-deep); }
[data-mbb].mbb-steps .mbb-section.is-sel .mbb-section-img::after {
	content: '\2713';
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	color: #fff;
	background: var(--mbb-accent);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* The peek glass grows with the photo (bk32 behaviour unchanged). */
[data-mbb].mbb-steps .mbb-peek {
	width: 26px;
	height: 26px;
	line-height: 26px;
	font-size: 14px;
	right: 8px;
	bottom: 8px;
	border-radius: 8px;
}
[data-mbb].mbb-steps .mbb-peek:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ═══════════════════════════════════════════════════════════════════════
   [bk36] Area step + photo shapes (P-BK36.1/2/3/4).
   The area chooser owns a whole step now (the slots moved out from above
   it — bk35's cards were fine, their billing wasn't), and the photo box
   is a ratio riding the per-service photo_shape knob: landscape 4:3
   (default, pinned in the [bk35] rule above), portrait 3:4, square 1:1.
   The class lands on the .mbb-sections grid (is-shape-*); junk coerces
   to landscape at BOTH ends (normalizer + photoShape()), so an unstyled
   shape class can never render. Auto-detecting each image's natural
   ratio was DECLINED (P-BK36.4): mixed-ratio cards go ragged, and a bad
   crop is a crop-POSITION problem — banked as a per-area focal point,
   bk37 candidate. Every selector carries the .mbb-steps scope — the
   bk34 whole-tail scoping scan covers this block for free.
   ═══════════════════════════════════════════════════════════════════ */

[data-mbb].mbb-steps .mbb-sections.is-shape-portrait { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
[data-mbb].mbb-steps .is-shape-portrait .mbb-section-img { aspect-ratio: 3 / 4; }
[data-mbb].mbb-steps .is-shape-square .mbb-section-img   { aspect-ratio: 1 / 1; }
/* The lone-area info card runs full width — cap its photo so a desktop
   column never turns it into a billboard (cover keeps the crop honest). */
[data-mbb].mbb-steps .mbb-sections.is-single .mbb-section-img { max-height: 280px; }

/* ═══════════════════════════════════════════════════════════════════
   [bk37] Focal crops, multi-photo gallery, uniform time grid, accent
   (P-BK37.1/2/3/5/6).
   The steps-card photo moves to a ::before layer driven by inline CSS
   vars (--mbb-img/--mbb-fx/--mbb-fy/--mbb-zoom): background-position
   carries the 9-way focal point, transform:scale carries the zoom
   (the crop-position AND crop-tightness fixes — a source with baked-in
   letterbox bars zooms past them), and the span clips the overflow so
   a zoomed layer can never bleed over the card text. The peek glass is
   a CHILD of the span — children paint above ::before — so it never
   scales or drifts (P-BK37.2); the is-sel ::after ring paints above
   both by pseudo order. Every var has a default, so a payload without
   the knobs (stale cache) is exactly centre-cover. Lightbox nav rules
   are body-level like the bk32 lightbox itself; everything else here
   carries the .mbb-steps scope — the bk34 whole-tail scoping scan
   covers the scoped rules for free.
   ═══════════════════════════════════════════════════════════════════ */

[data-mbb].mbb-steps .mbb-section-img { overflow: hidden; }
[data-mbb].mbb-steps .mbb-section-img::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--mbb-img, none);
	background-size: cover;
	background-position: var(--mbb-fx, 50%) var(--mbb-fy, 50%);
	background-repeat: no-repeat;
	transform: scale(var(--mbb-zoom, 1));
	transform-origin: var(--mbb-fx, 50%) var(--mbb-fy, 50%);
}
/* [bk37/P-BK37.5] The time chips as an equal-cell grid: "12:30 PM" and
   "1:00 PM" render the same width, chronological order reads row-major
   left→right, and every row fills the column — no ragged right edge.
   Tabular numerals keep the digits aligned chip-to-chip. Classic keeps
   the bk-era flex-wrap untouched. */
[data-mbb].mbb-steps .mbb-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
[data-mbb].mbb-steps .mbb-slot {
	text-align: center;
	font-variant-numeric: tabular-nums;
}
/* [bk37/P-BK37.3] Gallery chrome — only rendered when a section has >1
   photo; the single-photo lightbox is the bk32 markup untouched. */
.mbb-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 64px;
	border: 0; border-radius: 10px;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font-size: 30px; line-height: 64px;
	cursor: pointer;
}
.mbb-lightbox-nav:hover,
.mbb-lightbox-nav:focus-visible { background: rgba(0, 0, 0, .75); outline: none; }
.mbb-lightbox-prev { left: 14px; }
.mbb-lightbox-next { right: 14px; }
.mbb-lightbox-count {
	position: absolute;
	bottom: 16px; left: 50%;
	transform: translateX(-50%);
	color: #fff;
	background: rgba(0, 0, 0, .55);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 13px;
}