/* --- Booking app shell (full-screen, theme-free wrapper around #cp-bf-root) ----
   Namespace: .mk-ba-* only. Never reuse .cp-bf-* class names here — the wizard's
   showStep() hides every .cp-bf-step document-wide.

   STRUCTURE — one screen, one scroll container:

     header.mk-ba__bar      full width, fixed height, never scrolls
     .mk-ba__body           everything under it, two columns
       aside.mk-ba__rail      header to floor, hairline down its right edge
       .mk-ba__main           flex column, min-height:0
         .mk-ba__progress       the step pills; part of the form column, fixed
         main.mk-ba__stage      flex:1, THE scroll container
           #cp-bf-root            flex column filling the stage
             .cp-bf-step            the visible step, flex column, flex:1
               .cp-bf-nav             sticky against the stage floor

   The root is height:100dvh;overflow:hidden, so the bar, the rail, the pill row
   and the Back/Continue line are all immovable and the step content is the only
   thing that ever moves — on desktop and, more importantly, on a phone.

   PALETTE. White surface, the studio's own --bf-accent for progress and brand
   moments, and one blue (--mk-ba-primary) for everything the client has chosen
   or is about to choose: Continue, the selected day, the selected time. Two jobs,
   two colours, so a studio whose accent is near-black still gets an obvious
   "forward" button.

   TYPE. Montserrat, full stop. cp_fb_booking_app_strip_font_vars() removes the
   studio's --cp-font-* choices from the inline token set before they reach this
   root, and src/features/booking-app/branding.php enqueues the self-hosted face
   (the staff-only helper it used to call does not exist on a public request).

   Every colour token reads a real --cp-* token first; the hard-coded fallbacks
   are portal.css's own defaults. */

.mk-ba{
	/* Surfaces + ink (portal tokens first, portal defaults after) */
	--mk-ba-surface: var(--cp-surface, #ffffff);
	--mk-ba-page: var(--mk-ba-surface);
	--mk-ba-text: var(--cp-text, #262626);
	--mk-ba-heading: var(--cp-heading-text, #0a0a0a);
	--mk-ba-muted: var(--cp-muted-62, #525252);
	--mk-ba-faint: #737373;
	--mk-ba-line: var(--cp-border, #e5e5e5);
	--mk-ba-line-soft: #ededee;
	/* Solid, never a wash. Every surface in this app is an opaque colour with
	   black or white on it - no translucent tints stacking over whatever happens
	   to be behind them, and no text that is a darker shade of its own fill. */
	--mk-ba-fill: #f1f2f4;
	--mk-ba-tile: #eeeff1;

	/* The content canvas. Same token the staff desktop uses for a page surface
	   (assets/css/shared.css: --ds-surface-page), so the client-facing app and
	   the studio's own screens sit on one grey. Only the stage takes it - the
	   header, the rail, the pill row and the nav stay white. */
	--mk-ba-canvas: var(--ds-surface-page, #f5f6f8);

	/* The studio's real accent, straight through: pills, brand, checkmarks. */
	--mk-ba-accent: var(--bf-accent, #0a0a0a);
	--mk-ba-on-accent: #ffffff;

	/* One blue for "this is your choice / this is the way on". */
	--mk-ba-primary: #2563eb;
	--mk-ba-primary-strong: #1d4ed8;
	--mk-ba-primary-tint: #e6eefc;   /* solid pale blue: hover, never a wash */
	--mk-ba-primary-line: #b9cdf6;
	--mk-ba-on-primary: #ffffff;

	/* Golden hour. One solid amber with near-black on it, used identically as the
	   chip on a time card and as the chip in the rail - the amber is the
	   background, the ink is ink, and there is no second shade of it anywhere. */
	--mk-ba-gold-chip: #f5b942;
	--mk-ba-gold-line: #dda72f;
	--mk-ba-on-gold: #1f1a0a;

	/* Solid status fills. Every notice in the app is one of these four with black
	   on it - no washes, no coloured type, no left accent bar. */
	--mk-ba-ok-fill: #e7f6ec;
	--mk-ba-ok-line: #bfe3cb;
	--mk-ba-ok-chip: #cdebd8;
	--mk-ba-danger-fill: #fdecec;
	--mk-ba-danger-line: #f2c6c6;
	--mk-ba-info-fill: #eaf1fd;
	--mk-ba-info-line: #c6d8f8;
	--mk-ba-warn-fill: #fdf3d8;
	--mk-ba-warn-line: #ecd9a0;

	--mk-ba-danger: var(--cp-status-danger, #D32F2F);
	--mk-ba-radius: var(--cp-radius-md, 8px);

	/* Geometry */
	--mk-ba-gutter: clamp(20px, 2.4vw, 40px);    /* bar side padding */
	--mk-ba-pad: 24px;                           /* rail padding */
	--mk-ba-content-pad: clamp(24px, 3vw, 48px); /* form column, horizontal */
	--mk-ba-bar-h: 64px;
	--mk-ba-rail-w: clamp(300px, 22vw, 380px);
	--mk-ba-thumb-h: 148px;
	--mk-ba-cal-cell-h: clamp(56px, 4.2vw, 64px);
	/* A step up from --mk-ba-line: form fields need a border you can actually
	   see against the white surface, not the hairline used for structural
	   dividers. */
	--mk-ba-field-border: #d9dbe0;

	--mk-ba-ease: cubic-bezier(.22,.61,.36,1);

	/* One type system, no studio override. See cp_fb_booking_app_strip_font_vars(). */
	--mk-ba-font-ui: Montserrat, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	--cp-font-body: var(--mk-ba-font-ui);
	--cp-font-heading: var(--mk-ba-font-ui);
	--cp-font-button: var(--mk-ba-font-ui);

	display: grid;
	grid-template-rows: auto minmax(0,1fr);
	position: relative;
	height: 100vh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	overflow: hidden;
	background: var(--mk-ba-page);
	color: var(--mk-ba-text);
	font-family: var(--mk-ba-font-ui);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.mk-ba *,
.mk-ba *::before,
.mk-ba *::after{
	box-sizing: border-box;
}

/* Montserrat everywhere, no exceptions — including the wizard, which resolves
   its own face through --cp-font-* and its headings through --cp-font-heading. */
.mk-ba .cp-bf,
.mk-ba .cp-bf input,
.mk-ba .cp-bf select,
.mk-ba .cp-bf textarea,
.mk-ba .cp-bf button,
.mk-ba .cp-bf h1,
.mk-ba .cp-bf h2,
.mk-ba .cp-bf h3,
.mk-ba .cp-bf h4,
.mk-ba .cp-bf legend,
.mk-ba .cp-bf-gh-modal{
	font-family: var(--mk-ba-font-ui);
}

body.mk-ba-locked{
	overflow: hidden;
}

.mk-ba :focus-visible{
	outline: 2px solid var(--mk-ba-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.mk-ba [hidden]{
	display: none !important;
}

.mk-ba__num,
.mk-ba__hold{
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.mk-ba__sr,
.mk-ba__step{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Header bar ------------------------------------------------------------------ */

.mk-ba__bar{
	padding-inline: var(--mk-ba-gutter);
	background: var(--mk-ba-surface);
	border-bottom: 1px solid var(--mk-ba-line);
}

.mk-ba__bar-inner{
	display: grid;
	grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
	align-items: center;
	gap: 12px;
	min-height: var(--mk-ba-bar-h);
	min-width: 0;
}

.mk-ba__brand{
	display: flex;
	align-items: center;
	gap: 10px;
	justify-self: start;
	min-width: 0;
	color: var(--mk-ba-heading);
	text-decoration: none;
	transition: opacity .18s ease;
}

.mk-ba__brand:hover{
	opacity: .7;
}

.mk-ba__logo{
	display: block;
	width: auto;
	height: 26px;
	max-height: 26px;
	max-width: 150px;
	object-fit: contain;
	flex: none;
}

.mk-ba__brand-text{
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Centre of the bar: when the answers on this device were last saved, and the
   way to bin them. Deliberately small and quiet — it is a reassurance, not a
   headline, and the shell script leaves it hidden when there is no draft. */
.mk-ba__center{
	justify-self: center;
	min-width: 0;
	max-width: min(42vw, 420px);
}

.mk-ba__saved{
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mk-ba-faint);
	white-space: nowrap;
}

.mk-ba__saved-text{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mk-ba__saved-sep{
	flex: none;
	opacity: .55;
}

.mk-ba__saved-action{
	flex: none;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--mk-ba-muted);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--mk-ba-line);
	cursor: pointer;
	transition: color .18s ease, text-decoration-color .18s ease;
}

.mk-ba__saved-action:hover{
	color: var(--mk-ba-heading);
	text-decoration-color: currentColor;
}

.mk-ba__bar-actions{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	justify-self: end;
	gap: 8px;
	min-width: 0;
}

.mk-ba__hold{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border: 1px solid var(--mk-ba-line);
	border-radius: 999px;
	background: var(--mk-ba-fill);
	color: var(--mk-ba-muted);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

.mk-ba__hold.is-urgent{
	border-color: var(--mk-ba-danger-line);
	background: var(--mk-ba-danger-fill);
	color: var(--mk-ba-danger);
}

.mk-ba__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--mk-ba-line);
	border-radius: 999px;
	background: transparent;
	color: var(--mk-ba-muted);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.mk-ba__icon svg{
	display: block;
	width: 17px;
	height: 17px;
}

.mk-ba__icon:hover{
	color: var(--mk-ba-heading);
	background: var(--mk-ba-fill);
}

.mk-ba__icon[aria-expanded="true"]{
	border-color: var(--mk-ba-heading);
	color: var(--mk-ba-heading);
}

.mk-ba__close:hover{
	color: var(--mk-ba-danger);
	border-color: var(--mk-ba-danger-line);
	background: var(--mk-ba-danger-fill);
}

/* --- Body: session column | hairline | form column -------------------------------- */

.mk-ba__body{
	display: grid;
	grid-template-columns: var(--mk-ba-rail-w) minmax(0,1fr);
	align-items: stretch;
	min-width: 0;
	min-height: 0;
	background: var(--mk-ba-surface);
}

.mk-ba--no-rail .mk-ba__body,
.mk-ba__body:has(> .mk-ba__rail[hidden]),
.mk-ba__body:not(:has(> .mk-ba__rail)){
	grid-template-columns: minmax(0,1fr);
}

/* Runs from directly under the header to the floor. Scrolls itself, and only
   itself, when a long session title plus every summary row outgrows it. */
.mk-ba__rail{
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	min-height: 0;
	padding: 24px var(--mk-ba-pad) 28px;
	border-right: 1px solid var(--mk-ba-line);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mk-ba__rail-thumb{
	display: block;
	width: 100%;
	max-width: 100%;
	height: var(--mk-ba-thumb-h);
	object-fit: cover;
	border-radius: 12px;
	background: var(--mk-ba-tile);
	flex: none;
}

/* No featured image is not an empty hole: the same initial-on-tint tile the
   picker grid uses for a session type with no photo. */
.mk-ba__rail-thumb--tile{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mk-ba-tile);
	box-shadow: inset 0 0 0 1px var(--mk-ba-line);
}

.mk-ba__rail-monogram{
	font-size: 38px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	color: #8b9096;
}

.mk-ba__rail-body{
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.mk-ba__rail-eyebrow{
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mk-ba-faint);
}

.mk-ba__rail-title{
	margin: 0;
	font-family: inherit;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--mk-ba-heading);
	overflow-wrap: anywhere;
}

.mk-ba__rail-list{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.mk-ba__rail-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}

.mk-ba__rail-row dt{
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--mk-ba-muted);
	white-space: nowrap;
}

.mk-ba__rail-row dd{
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--mk-ba-heading);
	text-align: right;
	overflow-wrap: anywhere;
}

/* Base price + add-ons, always current: assets/js/portal-booking-app.js recomputes
   it from data-mk-ba-base (a plain number rendered server-side) plus whatever the
   Add-ons row already says, so it can never show a number the other two rows
   disagree with. A hairline and a heavier weight than the rows above it mark it as
   the row that adds the others up, without a second colour. */
.mk-ba__rail-row--subtotal{
	margin-top: 2px;
	padding-top: 12px;
	border-top: 1px solid var(--mk-ba-line);
}

.mk-ba__rail-row--subtotal dt{
	font-weight: 600;
	color: var(--mk-ba-heading);
}

.mk-ba__rail-row--subtotal dd{
	font-weight: 600;
}

/* The phone's compact restatement of the same rows. Off at desktop widths, where
   the label/value list above is the readable form. */
.mk-ba__rail-facts,
.mk-ba__rail-money{
	display: none;
}

/* Only on screen once the chosen time really is inside the day's window. In the
   full-height rail it is a line of text with a small sun in front of it, not a
   badge - the rail is a quiet column and a chip in it shouts. The phone strip
   has no room for the sentence and uses the chip instead (see the media query). */
.mk-ba__rail-golden{
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 0;
	padding: 0;
	max-width: 100%;
	background: none;
	color: var(--mk-ba-text);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
}

.mk-ba__rail-golden .mk-ba__rail-golden-icon{
	margin-top: 2px;
	color: #a06a12;
}

.mk-ba__rail-golden-icon{
	display: inline-flex;
	flex: none;
}

/* Never let an inline icon inherit a viewBox-sized box. */
.mk-ba__rail svg{
	display: block;
	width: 14px;
	height: 14px;
	flex: none;
	vertical-align: middle;
}

.mk-ba__rail-note{
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--mk-ba-muted);
}

/* --- Form column ------------------------------------------------------------------ */

.mk-ba__main{
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

/* --- Step pills: the top of the form column, and they do not scroll ---------------
   The wizard's own .cp-bf-stepper markup, lifted out of #cp-bf-root and restyled
   into tabs: checkmark for done, filled for active, quiet chip for future. Only
   the rules that have to beat portal.css's own !important carry one.

   The host element MUST keep the inline --bf-accent / --bf-radius copied from
   #cp-bf-root: those are inline custom properties, not globals, so outside that
   element var(--bf-accent) resolves to nothing and the pills render unaccented. */

.mk-ba__progress{
	flex: none;
	padding: 12px var(--mk-ba-content-pad) 13px;
	min-width: 0;
	border-bottom: 1px solid var(--mk-ba-line);
}

.mk-ba__progress .cp-bf-stepper{
	margin: 0;
	min-width: 0;
}

.mk-ba__progress .cp-bf-stepper__track{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.mk-ba__progress .cp-bf-stepper__sep{
	display: none;
}

.mk-ba__progress .cp-bf-stepper__node{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	min-width: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--mk-ba-fill);
	transition: background .2s ease, border-color .2s ease;
}

.mk-ba__progress .cp-bf-stepper .cp-bf-stepper__node .cp-bf-stepper__label{
	max-width: none;
	opacity: 1;
	padding-left: 0;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.35;
	color: var(--mk-ba-faint);
	white-space: nowrap;
	transition: color .2s ease;
}

/* Future steps: no numbered disc. */
.mk-ba__progress .cp-bf-stepper__node .cp-bf-stepper__dot{
	display: none;
}

/* Done: a bare check in the accent, no disc behind it. */
.mk-ba__progress .cp-bf-stepper__node.is-done .cp-bf-stepper__dot{
	display: inline-flex;
	width: 14px;
	height: 14px;
	background: none;
	border: 0;
	color: inherit;
}

.mk-ba__progress .cp-bf-stepper__node.is-done .cp-bf-stepper__check polyline{
	stroke: var(--mk-ba-accent) !important;
}

.mk-ba__progress .cp-bf-stepper .cp-bf-stepper__node.is-done .cp-bf-stepper__label{
	color: var(--mk-ba-muted);
}

.mk-ba__progress .cp-bf-stepper__node.is-active{
	flex: 0 0 auto;
	padding: 5px 12px;
	background: var(--mk-ba-accent);
	border-color: var(--mk-ba-accent);
}

.mk-ba__progress .cp-bf-stepper__node.is-active .cp-bf-stepper__dot{
	display: none;
}

.mk-ba__progress .cp-bf-stepper .cp-bf-stepper__node.is-active .cp-bf-stepper__label{
	max-width: none;
	padding-left: 0;
	font-weight: 600;
	color: var(--mk-ba-on-accent);
}

/* --- The stage: the one scroll container ------------------------------------------
   A flex column so #cp-bf-root can fill it exactly (flex:1 0 auto) instead of
   min-height:100%, which would add the stage's own padding to the page and leave
   a short step scrollable by a few pixels. No bottom padding: the sticky nav
   supplies the floor. */

.mk-ba__stage{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 26px var(--mk-ba-content-pad) 0;
	background: var(--mk-ba-canvas);
	scrollbar-color: rgba(38,38,38,.24) transparent;
}

.mk-ba__stage::-webkit-scrollbar{
	width: 10px;
}

.mk-ba__stage::-webkit-scrollbar-thumb{
	border: 3px solid transparent;
	border-radius: 999px;
	background: rgba(38,38,38,.24);
	background-clip: padding-box;
}

.mk-ba__stage:focus{
	outline: none;
}

/* The page is the card: the wizard prints straight onto it. */
.mk-ba__stage > .cp-bf{
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* The wizard injects questionnaire steps into this wrapper; display:contents
   lets them join the same flex column as the hard-coded steps, so the nav
   anchoring below works identically on a Details step. */
.mk-ba #cp-bf-dynamic-steps{
	display: contents;
}

/* showStep() shows the current step with an EMPTY inline display and gives every
   other one inline display:none — so this flex column lands on exactly the one
   step that is on screen, which is what lets its nav sink to the floor. */
.mk-ba .cp-bf-step{
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	min-height: 0;
	padding: 0;
	margin-bottom: 0;
}

/* A restore/"that slot is gone" message is appended after the steps, which would
   put it below the nav. It belongs at the top of the column. */
.mk-ba #cp-bf-submit-error:not(:empty){
	order: -1;
	margin-bottom: 14px;
}

/* The header mirrors this bar into .mk-ba__saved — one compact line instead of a
   full-width slab above the first question. The wizard writes display:flex into
   the element's own style attribute, so this has to be !important. */
.mk-ba .cp-bf-draft-note{
	display: none !important;
}

/* The nav is sticky, so it sits over the end of a scrolled step. The element
   immediately before it needs the clearance — :last-of-type cannot be used
   because the nav is itself the last div of the step. */
.mk-ba .cp-bf-step > *:has(+ .cp-bf-nav){
	margin-bottom: 24px;
}

/* --- Back / Continue: anchored to the floor of the form column --------------------
   The wizard binds these buttons by direct assignment in wireButtons()
   (document.querySelectorAll('#cp-bf-root .cp-bf-next')), NOT by delegation, so
   the row cannot be moved out of #cp-bf-root — it is anchored visually instead:
   margin-top:auto drops it to the bottom of a short step, position:sticky keeps
   it on screen through a long one, and the negative inline margin runs its rule
   edge to edge of the column. */

.mk-ba .cp-bf-nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	position: sticky;
	bottom: 0;
	z-index: 3;
	margin-top: auto;
	margin-inline: calc(-1 * var(--mk-ba-content-pad));
	padding: 14px var(--mk-ba-content-pad) max(14px, env(safe-area-inset-bottom, 0px));
	background: var(--mk-ba-surface);
	border-top: 1px solid var(--mk-ba-line);
}

.mk-ba .cp-bf-btn{
	padding: 11px 22px;
	min-height: 42px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}

/* Continue: one clean blue, white text. The studio accent stays on the pills. */
.mk-ba .cp-bf-btn--primary{
	background: var(--mk-ba-primary);
	border: 1px solid var(--mk-ba-primary);
	color: var(--mk-ba-on-primary);
	font-weight: 600;
}

.mk-ba .cp-bf-btn--primary:hover:not(:disabled){
	background: var(--mk-ba-primary-strong);
	border-color: var(--mk-ba-primary-strong);
	filter: none;
}

.mk-ba .cp-bf-btn--primary:disabled{
	opacity: .4;
}

/* Back: a quiet ghost pill. */
.mk-ba .cp-bf-btn--ghost{
	background: transparent;
	border: 1px solid var(--mk-ba-line);
	color: var(--mk-ba-muted);
	font-weight: 500;
}

.mk-ba .cp-bf-btn--ghost:hover:not(:disabled){
	border-color: var(--mk-ba-muted);
	background: transparent;
	color: var(--mk-ba-heading);
}

/* --- Living on the grey canvas ----------------------------------------------------
   Everything the client fills in, picks or reads is a white surface with a
   hairline, lifted off the canvas; the headings, descriptions and field labels
   sit straight on it. The wizard already paints inputs and add-on cards white -
   these are the surfaces that were transparent (and so went grey) or tinted. */

.mk-ba .cp-bf-contract-body,
.mk-ba .cp-bf-contract-sign,
.mk-ba .cp-bf-upload-drop,
.mk-ba .cp-bf-addon-summary{
	background: var(--mk-ba-surface);
	border: 1px solid var(--mk-ba-line);
}

.mk-ba .cp-bf-addon-card{
	border-color: var(--mk-ba-line);
}

/* --- Form fields: a real field, not a flat rectangle on the grey canvas ------------
   portal.css already gives .cp-bf-input/-select/-textarea a white background and a
   studio-radius border, but the border is a near-invisible #d4d4d4 hairline and the
   spacing between one question and the next is a flat 14px grid gap - on the
   canvas colour the whole step reads as unfinished. This gives every control a
   border you can actually see, a fixed 10px radius (the studio's own corner radius
   stays on cards and buttons, not here), room to breathe, and a solid pale-blue
   focus ring instead of portal.css's black wash. */

.mk-ba .cp-bf-step fieldset,
.mk-ba .cp-bf-fields{
	row-gap: 20px;
	column-gap: 16px;
}

.mk-ba .cp-bf-label{
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mk-ba-heading);
	margin-bottom: 6px;
}

.mk-ba .cp-bf-input,
.mk-ba .cp-bf-select,
.mk-ba .cp-bf-textarea{
	padding: 12px 14px;
	background-color: var(--mk-ba-surface);
	border: 1px solid var(--mk-ba-field-border);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 400;
	color: var(--mk-ba-heading);
}

.mk-ba .cp-bf-input::placeholder,
.mk-ba .cp-bf-textarea::placeholder{
	color: var(--mk-ba-muted);
	opacity: 1;
}

.mk-ba .cp-bf-input:focus,
.mk-ba .cp-bf-select:focus,
.mk-ba .cp-bf-textarea:focus{
	border-color: var(--mk-ba-primary);
	box-shadow: 0 0 0 3px var(--mk-ba-primary-tint);
	outline: none;
}

/* --- Radio / checkbox groups: one field, not one box per option -------------------
   The wizard renders every option as its own `<label>` inside a shared
   `.cp-bf-choice[role="group"]` wrapper (see buildFieldHTML() in
   src/portal/booking-form.php); portal.css borders each label individually, so a
   3-option question reads as three separate fields stacked with a gap between
   them. The group wrapper becomes the single white rounded card here, the gap
   between labels collapses to 0, and a hairline on every label but the first
   divides the rows instead - overflow:hidden lets the container's own radius
   clip the flush first/last rows without rounding them individually. */

.mk-ba .cp-bf-choice{
	gap: 0;
	background: var(--mk-ba-surface);
	border: 1px solid var(--mk-ba-line);
	border-radius: var(--mk-ba-radius);
	overflow: hidden;
}

.mk-ba .cp-bf-choice label{
	margin: 0;
	padding: 12px 14px;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 13.5px;
	color: var(--mk-ba-text);
	transition: background .14s ease;
}

.mk-ba .cp-bf-choice label + label{
	border-top: 1px solid var(--mk-ba-line-soft);
}

.mk-ba .cp-bf-choice label:hover{
	background: var(--mk-ba-fill);
}

/* The checked control is the one blue the client sees for "this is my answer" -
   the studio's own --bf-accent stays on the progress pills and brand moments. */
.mk-ba .cp-bf-choice input{
	accent-color: var(--mk-ba-primary);
}

/* --- Step content: hairlines, muted secondaries, no stray bold --------------------
   The active theme's stylesheet still loads through wp_head() on this route, and
   its heading scale lands on studio-authored HTML the wizard prints verbatim -
   a contract's <h2> was rendering at 28px inside a 13px document. Everything
   inside the wizard is put back on the app's own scale. */

.mk-ba .cp-bf h1,
.mk-ba .cp-bf h2,
.mk-ba .cp-bf h3,
.mk-ba .cp-bf h4,
.mk-ba .cp-bf h5,
.mk-ba .cp-bf h6{
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--mk-ba-heading);
}

.mk-ba .cp-bf h1{ font-size: 21px; }
.mk-ba .cp-bf h2{ font-size: 18px; }
.mk-ba .cp-bf h3{ font-size: 16px; }
.mk-ba .cp-bf h4,
.mk-ba .cp-bf h5,
.mk-ba .cp-bf h6{ font-size: 14px; }

.mk-ba .cp-bf-contract-body p,
.mk-ba .cp-bf-contract-body li,
.mk-ba .cp-bf-contract-body td,
.mk-ba .cp-bf-contract-body th{
	font-size: 13px;
	line-height: 1.65;
}

/* Three classes so it outranks the h3 cap above. */
.mk-ba .cp-bf .cp-bf-step__title{
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--mk-ba-heading);
}

.mk-ba .cp-bf-step__desc{
	font-size: 13.5px;
	color: var(--mk-ba-muted);
}

.mk-ba .cp-bf-label,
.mk-ba .mk-eyebrow{
	font-weight: 500;
}

/* A questionnaire step's own JS-built markup (buildDynamicSteps() in
   src/portal/booking-form.php) repeats the step's label twice: once as the
   step's <h3 class="cp-bf-step__title"> and again as a <legend class="mk-eyebrow">
   inside the fieldset, meant to label the fieldset for assistive tech. When a
   step's label is generic ("Step 1") the page visibly shows "Step 1" twice. The
   legend still needs to announce the fieldset's name to a screen reader, so it is
   moved off-screen here rather than display:none - same technique as .mk-ba__sr
   above. Scoped to #cp-bf-dynamic-steps only: the hard-coded "Your info" step
   uses the same legend class for a genuinely different, non-duplicated label. */
.mk-ba #cp-bf-dynamic-steps .mk-fieldgrid > legend.mk-eyebrow{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mk-ba .cp-bf-slots-title{
	font-size: 13px;
	font-weight: 500;
	color: var(--mk-ba-muted);
}

.mk-ba .cp-bf-booking-slots{
	border-top: 1px solid var(--mk-ba-line);
}

/* --- Notices -----------------------------------------------------------------------
   portal.css paints these as coloured type on a matching wash, some with a 4px
   accent bar down the left edge. In this app a notice is a solid pale fill with
   black text and one hairline - the colour says which kind it is, the words are
   just words. Same shape for every one of them so a page never shows two
   different ideas of what a notice looks like. */

.mk-ba .cp-bf-submit-error,
.mk-ba .cp-bf-error,
.mk-ba .cp-bf-payment-error,
.mk-ba .cp-bf-alert,
.mk-ba .crm-alert{
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--mk-ba-line);
	border-left-width: 1px;
	border-radius: 10px;
	background: var(--mk-ba-fill);
	color: var(--mk-ba-heading);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

.mk-ba .cp-bf-submit-error,
.mk-ba .cp-bf-error,
.mk-ba .cp-bf-payment-error,
.mk-ba .crm-alert--error{
	background: var(--mk-ba-danger-fill);
	border-color: var(--mk-ba-danger-line);
}

.mk-ba .crm-alert--success{
	background: var(--mk-ba-ok-fill);
	border-color: var(--mk-ba-ok-line);
}

.mk-ba .crm-alert--info{
	background: var(--mk-ba-info-fill);
	border-color: var(--mk-ba-info-line);
}

.mk-ba .crm-alert--warning{
	background: var(--mk-ba-warn-fill);
	border-color: var(--mk-ba-warn-line);
}

/* "Logged in as …" — portal.css builds it as a full success alert with a bold
   email. It is a quiet statement of fact here, not an announcement: hairline
   border, barely-there tint, and nothing heavier than 500 in it. */
.mk-ba .cp-bf-logged-in{
	padding: 12px 14px;
	background: var(--mk-ba-ok-fill);
	border: 1px solid var(--mk-ba-ok-line);
	border-radius: 10px;
}

.mk-ba .cp-bf-logged-in__icon{
	width: 22px;
	height: 22px;
	background: var(--mk-ba-ok-chip);
	color: var(--mk-ba-heading);
	font-size: 12px;
	font-weight: 600;
}

.mk-ba .cp-bf-logged-in__text{
	font-size: 13px;
	font-weight: 400;
	color: var(--mk-ba-text);
}

.mk-ba .cp-bf-logged-in__text strong{
	font-weight: 500;
	color: var(--mk-ba-heading);
}

.mk-ba .cp-bf-logged-in__hint{
	font-size: 12px;
	color: var(--mk-ba-muted);
}

/* The agreement is the document, not a widget inside one: portal.css boxes it at
   300px with its own scrollbar, which puts a second scroll area inside the only
   one this app has. It flows here and the stage scrolls it. */
.mk-ba .cp-bf-contract-body{
	max-height: none;
	overflow: visible;
	max-width: none;
	padding: 18px 20px;
	border-radius: var(--mk-ba-radius);
}

/* The studio wrote this content in whatever editor produced the stored HTML, and
   that HTML sometimes carries its own inline width - a fixed-width wrapper div, a
   pasted Word/Docs table - left over from wherever it was authored. Comfortable
   line length is this container's job (its own side padding above), not a cap
   baked into the document, so any inline width the content brought with it is
   neutralised rather than fought paragraph by paragraph. */
.mk-ba .cp-bf-contract-body > *{
	max-width: none;
}

.mk-ba .cp-bf-contract-body [style*="width"]{
	max-width: none !important;
	width: auto !important;
}

.mk-ba .cp-bf-contract-body table[style*="width"]{
	width: 100% !important;
}

.mk-ba .cp-bf-contract-sign{
	padding: 16px 18px;
	border-radius: var(--mk-ba-radius);
}


/* --- Calendar: the full width of the form column ----------------------------------
   No cap and no centring: the seven columns are 1fr each and span the same
   measure as the step heading and the "Available times" list below, so the month
   reads as one wide grid of rounded tiles. Only the cell HEIGHT is capped — a
   wider column grows the tiles sideways, never into tall slabs.

   Everything here beats portal.css on specificity (.mk-ba .x is 0,2,0) except
   where portal.css shouts, and there this shouts back. */

.mk-ba .cp-bf-booking-calendar,
.mk-ba .cp-bf-calendar{
	width: 100%;
	max-width: none;
	margin-inline: 0;
	margin-bottom: 4px;
}

.mk-ba .cp-bf-cal-header,
.mk-ba .cp-bf-calendar__header{
	margin-bottom: 10px;
}

.mk-ba .cp-bf-cal-month-label,
.mk-ba .cp-bf-calendar__month{
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--mk-ba-heading);
}

.mk-ba .cp-bf-cal-nav,
.mk-ba .cp-bf-calendar__nav{
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	border: 1px solid var(--mk-ba-line);
	border-radius: 999px;
	color: var(--mk-ba-muted);
	font-size: 15px;
}

.mk-ba .cp-bf-cal-nav:hover:not(:disabled),
.mk-ba .cp-bf-calendar__nav:hover:not(:disabled){
	background: var(--mk-ba-fill);
	color: var(--mk-ba-heading);
}

.mk-ba .cp-bf-cal-grid,
.mk-ba .cp-bf-calendar__grid{
	display: grid;
	grid-template-columns: repeat(7, minmax(0,1fr));
	gap: 10px;
}

.mk-ba .cp-bf-cal-head{
	padding: 4px 0 2px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--mk-ba-faint);
	text-align: center;
}

/* A bookable day is a white tile on the canvas; an unavailable one stays flat on
   it. That is the whole state model at a glance - "these are the days you can
   pick" - without a second colour. */
.mk-ba .cp-bf-cal-day{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mk-ba-cal-cell-h);
	height: var(--mk-ba-cal-cell-h);
	padding: 0;
	border: 1px solid var(--mk-ba-line);
	border-radius: 12px;
	background: var(--mk-ba-surface);
	font-size: 14px;
	font-weight: 500;
	color: var(--mk-ba-text);
	text-align: center;
	transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.mk-ba .cp-bf-cal-day-inner{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: 0;
	width: 100%;
	height: 100%;
}

.mk-ba .cp-bf-cal-day__num{
	line-height: 1;
}

/* The sun button moved onto the time cards; the renderer no longer draws it. */
.mk-ba .cp-bf-gh-sun{
	display: none !important;
}

.mk-ba .cp-bf-cal-day.empty{
	border-color: transparent;
	background: none;
	cursor: default;
}

.mk-ba .cp-bf-cal-head{
	background: none;
}

.mk-ba .cp-bf-cal-day.today:not(.selected){
	border-color: #9aa0a6;
	box-shadow: inset 0 0 0 1px #9aa0a6;
	font-weight: 600;
}

/* Hover is a tint, never a fill: only .selected turns the cell blue, and only
   .selected turns the label white.

   The !important is not decoration. portal.css carries
   `.cp-bf div{color:inherit!important}` and the same for spans, which beats any
   normal declaration here however specific — so the day cell and its number take
   whatever colour they inherit, and a day that was selected a moment ago keeps
   handing white down to its number under the hover tint. The only way to state a
   hover colour that actually lands is to state it with the same weight, on the
   cell and on the number. */
.mk-ba .cp-bf-cal-day:hover:not(.disabled):not(.empty):not(.selected),
.mk-ba .cp-bf-cal-day:hover:not(.disabled):not(.empty):not(.selected) *{
	color: var(--mk-ba-heading) !important;
}

/* Same reason: without this the unhovered, unselected cells resolve through
   `color:inherit!important` instead of the rule above them. */
.mk-ba .cp-bf-cal-day:not(.disabled):not(.empty):not(.selected),
.mk-ba .cp-bf-cal-day:not(.disabled):not(.empty):not(.selected) *{
	color: var(--mk-ba-text) !important;
}

.mk-ba .cp-bf-cal-day:hover:not(.disabled):not(.empty):not(.selected){
	background: var(--mk-ba-primary-tint);
	border-color: var(--mk-ba-primary-line);
}

.mk-ba .cp-bf-cal-day.selected,
.mk-ba .cp-bf-cal-day.selected *,
.mk-ba .cp-bf-calendar__day.selected{
	color: var(--mk-ba-on-primary) !important;
}

.mk-ba .cp-bf-cal-day.selected,
.mk-ba .cp-bf-calendar__day.selected{
	background: var(--mk-ba-primary);
	border-color: var(--mk-ba-primary);
	font-weight: 600;
}

/* Unavailable days are still tiles — the month reads as one bordered grid, the
   way the studio's own calendar does — just a solid grey one with muted ink. */
.mk-ba .cp-bf-cal-day.disabled,
.mk-ba .cp-bf-cal-day.disabled *{
	color: #9aa0a6 !important;
}

.mk-ba .cp-bf-cal-day.disabled{
	background: var(--mk-ba-tile);
	border-color: var(--mk-ba-line);
	opacity: 1;
	cursor: not-allowed;
}

.mk-ba .cp-bf-book-empty{
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--mk-ba-muted);
	text-align: center;
}

/* --- Time slots: pills, medium weight, filled when chosen ------------------------- */

.mk-ba .cp-bf-slot-list,
.mk-ba .cp-bf-timeslots__grid{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	grid-template-columns: none;
}

.mk-ba .cp-bf-slot{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	min-height: 42px;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid var(--mk-ba-line);
	border-radius: 999px;
	background: var(--mk-ba-surface);
	font-size: 13px;
	font-weight: 500;
	color: var(--mk-ba-text);
	white-space: nowrap;
	transition: background .14s ease, border-color .14s ease, color .14s ease;
}

/* Same contract as the calendar cells: hover tints, selection fills. The label
   lives in a child span, so the colour is spelled out on both. */
.mk-ba .cp-bf-slot:hover:not(.taken):not(.selected),
.mk-ba .cp-bf-slot:hover:not(.taken):not(.selected) .cp-bf-slot__t{
	color: var(--mk-ba-heading) !important;
}

.mk-ba .cp-bf-slot:hover:not(.taken):not(.selected){
	border-color: var(--mk-ba-primary-line);
	background: var(--mk-ba-primary-tint);
}

.mk-ba .cp-bf-slot.selected,
.mk-ba .cp-bf-slot.selected .cp-bf-slot__t{
	color: var(--mk-ba-on-primary) !important;
}

.mk-ba .cp-bf-slot.selected{
	background: var(--mk-ba-primary);
	border-color: var(--mk-ba-primary);
	font-weight: 600;
}

.mk-ba .cp-bf-slot.taken{
	opacity: .38;
}

/* "☀ Golden hour" on the cards that fall inside the day's window.
   portal.css:6166 forces `color:inherit!important` onto every span inside .cp-bf
   at (0,3,1), which would hand the badge the pill's own ink instead of the gold -
   so the selector below deliberately runs to four classes to outrank it. */
.mk-ba .cp-bf .cp-bf-slot .cp-bf-slot__gh,
.mk-ba .cp-bf .cp-bf-slot .cp-bf-slot__gh *{
	color: var(--mk-ba-on-gold) !important;
}

.mk-ba .cp-bf-slot__gh{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	padding: 2px 8px 2px 6px;
	border-radius: 999px;
	background: var(--mk-ba-gold-chip);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.5;
}

.mk-ba .cp-bf-slot__gh svg{
	display: block;
	width: 12px;
	height: 12px;
}

/* Golden hour stays golden on a chosen pill: the same solid amber chip with the
   same near-black on it, so "this one is golden" survives the selection. */
.mk-ba .cp-bf-slot.selected .cp-bf-slot__gh{
	background: var(--mk-ba-gold-chip);
}

/* --- Submitted: the receipt replaces the wizard ------------------------------------
   The wizard's own done state is one line in an otherwise empty step, with the
   rail, the pills and the Back/Continue bar still framing it as though there
   were more to do. assets/js/portal-booking-app.js puts .mk-ba--done on the root
   the moment every stepper node is done, and from there the screen is a single
   centred card on the canvas: what they booked, what they paid, what happens
   next, and one way out. */

.mk-ba--done .mk-ba__rail,
.mk-ba--done .mk-ba__progress,
.mk-ba--done .mk-ba__center{
	display: none !important;
}

.mk-ba--done .mk-ba__body{
	grid-template-columns: minmax(0,1fr);
}

/* The wizard, its done step and its sticky nav all go together. */
.mk-ba--done .mk-ba__stage > .cp-bf{
	display: none !important;
}

.mk-ba--done .mk-ba__stage,
.mk-ba--notice .mk-ba__stage{
	align-items: center;
	padding-block: clamp(24px, 5vh, 56px);
}

.mk-ba__receipt{
	display: flex;
	justify-content: center;
	width: 100%;
	flex: 0 0 auto;
}

.mk-ba__receipt-card,
.mk-ba--notice .mk-ba__stage > .cp-bf{
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
	padding: 30px 30px 26px;
	background: var(--mk-ba-surface);
	border: 1px solid var(--mk-ba-line);
	border-radius: 14px;
}

.mk-ba--notice .mk-ba__stage > .cp-bf{
	flex: 0 0 auto;
	text-align: center;
}

.mk-ba__receipt-check,
.mk-ba .cp-bf-done-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 16px;
	border-radius: 999px;
	background: var(--mk-ba-ok-chip);
	color: #14532d;
	font-size: 20px;
	line-height: 1;
}

.mk-ba__receipt-check svg{
	display: block;
	width: 22px;
	height: 22px;
}

.mk-ba__receipt-title{
	margin: 0 0 6px;
	font-family: inherit;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: var(--mk-ba-heading);
}

.mk-ba__receipt-title:focus{
	outline: none;
}

.mk-ba__receipt-lede{
	margin: 0 0 22px;
	font-size: 13.5px;
	line-height: 1.55;
	text-align: center;
	color: var(--mk-ba-muted);
}

.mk-ba__receipt-rows{
	display: flex;
	flex-direction: column;
	margin: 18px 0 0;
	padding: 0;
	border-top: 1px solid var(--mk-ba-line);
}

.mk-ba__receipt-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--mk-ba-line-soft);
}

.mk-ba__receipt-row dt{
	margin: 0;
	flex: none;
	font-size: 13px;
	font-weight: 400;
	color: var(--mk-ba-muted);
}

.mk-ba__receipt-row dd{
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	text-align: right;
	color: var(--mk-ba-heading);
	overflow-wrap: anywhere;
}

.mk-ba__receipt-rows--money{
	margin-top: 0;
	border-top: 0;
}

.mk-ba__receipt-rows--money .mk-ba__receipt-row:last-child{
	border-bottom: 0;
}

.mk-ba__receipt-rows--money dd{
	font-weight: 600;
}

.mk-ba__receipt-hint{
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--mk-ba-muted);
}

.mk-ba__receipt-next{
	margin-top: 22px;
	padding: 16px 18px;
	border-radius: var(--mk-ba-radius);
	background: var(--mk-ba-canvas);
}

.mk-ba__receipt-eyebrow{
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mk-ba-faint);
}

.mk-ba__receipt-next ul{
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mk-ba-text);
}

.mk-ba__receipt-next li + li{
	margin-top: 5px;
}

.mk-ba__receipt-actions{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-top: 24px;
}

.mk-ba__receipt-done{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 11px 28px;
	border: 1px solid var(--mk-ba-primary);
	border-radius: 999px;
	background: var(--mk-ba-primary);
	color: var(--mk-ba-on-primary);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease;
}

.mk-ba__receipt-done:hover{
	background: var(--mk-ba-primary-strong);
	border-color: var(--mk-ba-primary-strong);
	color: var(--mk-ba-on-primary);
}

.mk-ba__receipt-chat{
	padding: 0;
	border: 0;
	background: none;
	color: var(--mk-ba-muted);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.mk-ba__receipt-chat:hover{
	color: var(--mk-ba-heading);
}

/* The Stripe return lands on the wizard's own paid-confirmation markup rather
   than the receipt (there is no wizard state left to read), so it is given the
   same card. */
.mk-ba--notice .cp-bf-confirmation{
	padding: 0;
	text-align: center;
}

.mk-ba--notice .cp-bf-confirmation .cp-bf-step__title{
	text-align: center;
}

.mk-ba--notice .cp-bf-error{
	margin: 0;
	text-align: center;
}

/* --- Scrim + FAQ drawer ----------------------------------------------------------- */

.mk-ba__scrim{
	position: fixed;
	inset: 0;
	z-index: 40;
	background: var(--cp-shell-scrim, rgba(15,23,42,.45));
	opacity: 0;
	transition: opacity .22s linear;
}

.mk-ba__scrim.is-open{
	opacity: 1;
}

.mk-ba__faq{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	width: min(420px, 92vw);
	background: var(--mk-ba-surface);
	color: var(--mk-ba-text);
	border-left: 1px solid var(--mk-ba-line);
	box-shadow: var(--cp-shell-slide-edge-shadow, -14px 0 40px rgba(15,23,42,.18));
	transform: translateX(100%);
	transition: transform .28s var(--mk-ba-ease);
}

.mk-ba__faq.is-open{
	transform: translateX(0);
}

.mk-ba__faq-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: none;
	padding: 16px 16px 14px var(--mk-ba-pad);
	border-bottom: 1px solid var(--mk-ba-line);
}

.mk-ba__faq-title{
	margin: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mk-ba-heading);
}

.mk-ba__faq-body{
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 4px var(--mk-ba-pad) 32px;
}

.mk-ba__faq-item{
	border-bottom: 1px solid var(--mk-ba-line-soft);
}

.mk-ba__faq-item > summary{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	list-style: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: var(--mk-ba-heading);
}

.mk-ba__faq-item > summary::-webkit-details-marker{
	display: none;
}

.mk-ba__faq-item > summary::after{
	content: "+";
	flex: none;
	font-size: 16px;
	line-height: 1;
	color: var(--mk-ba-muted);
}

.mk-ba__faq-item[open] > summary{
	font-weight: 600;
}

.mk-ba__faq-item[open] > summary::after{
	content: "\2212";
}

.mk-ba__faq-answer{
	padding: 0 0 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mk-ba-muted);
}

.mk-ba__faq-answer p{
	margin: 0 0 10px;
}

.mk-ba__faq-answer p:last-child{
	margin-bottom: 0;
}

.mk-ba__faq-answer a{
	color: var(--mk-ba-primary);
	text-underline-offset: 2px;
}

.mk-ba__faq-contact{
	padding-top: 18px;
}

/* --- The studio's floating chat launcher ------------------------------------------
   It floats in the bottom-right corner of every page, which on this one is
   exactly where Continue lives — unusable on a phone. The header carries a chat
   button instead (see cp_fb_render_booking_app_bar()).

   The launcher lives in a CLOSED shadow root, so it cannot be styled from here;
   the host can. display:none is not an option — the panel mounts into the same
   shadow root and would go with it — so the host is collapsed to nothing and
   clips its own content. The panel is position:fixed with no transformed
   ancestor, so its containing block is the viewport and this clip never reaches
   it. pointer-events is deliberately left alone for the same reason. */

body.cp-booking-app #cp-conv-widget-host,
body.cp-booking-app [data-cp-conv-widget]{
	position: fixed !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* --- Responsive ------------------------------------------------------------------
   The session column stops being a column and becomes a compact strip across the
   top of the form column: thumbnail, title, and the summary rows wrapped into a
   tidy row. The stage is still the only thing that scrolls. */

@media (max-width: 900px){
	.mk-ba{
		--mk-ba-pad: 18px;
		--mk-ba-content-pad: 18px;
		--mk-ba-cal-cell-h: 52px;
	}

	.mk-ba .cp-bf-cal-grid,
	.mk-ba .cp-bf-calendar__grid{
		gap: 6px;
	}

	.mk-ba__body{
		grid-template-columns: minmax(0,1fr);
		grid-template-rows: auto minmax(0,1fr);
	}

	.mk-ba__rail{
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px 16px;
		padding: 12px var(--mk-ba-pad);
		border-right: 0;
		border-bottom: 1px solid var(--mk-ba-line);
		overflow: visible;
	}

	.mk-ba__rail-thumb{
		width: 52px;
		height: 52px;
		flex: none;
		border-radius: 10px;
	}

	.mk-ba__rail-monogram{
		font-size: 20px;
	}

	/* Three lines beside the thumbnail and nothing else: the session name, the
	   booking facts as one muted middot-separated line, and the money. The label
	   words, the eyebrow and the description all go - they cost a line each and
	   say nothing the values do not. */
	.mk-ba__rail-body{
		flex: 1 1 200px;
		gap: 2px;
		min-width: 0;
	}

	.mk-ba__rail-head{
		min-width: 0;
	}

	.mk-ba__rail-title{
		font-size: 15.5px;
		line-height: 1.3;
	}

	.mk-ba__rail-eyebrow,
	.mk-ba__rail-list,
	.mk-ba__rail-note,
	.mk-ba__rail-golden{
		display: none;
	}

	.mk-ba__rail-facts,
	.mk-ba__rail-money{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 6px;
		margin: 0;
		min-width: 0;
		font-size: 12.5px;
		line-height: 1.45;
		color: var(--mk-ba-muted);
	}

	.mk-ba__rail-money{
		color: var(--mk-ba-heading);
		font-weight: 500;
	}

	.mk-ba__fact{
		display: inline-flex;
		align-items: center;
		gap: 4px;
		min-width: 0;
	}

	/* A middot goes in front of a value only when something visible precedes it.
	   The general sibling combinator says exactly that and nothing else, so the
	   line reads correctly whichever of date / time is still unset - `+` would
	   have to guess how many hidden items to skip. */
	.mk-ba__rail-facts > .mk-ba__fact:not([hidden]) ~ .mk-ba__fact::before{
		content: "\00b7";
		margin-right: 6px;
		opacity: .7;
	}

	/* The golden-hour chip is a chip, not another value in the list. */
	.mk-ba__rail-facts > .mk-ba__fact:not([hidden]) ~ .mk-ba__fact--gold::before{
		content: none;
		margin-right: 0;
	}

	/* The golden-hour note becomes a chip on the same line. */
	.mk-ba__fact--gold{
		margin-left: 2px;
		padding: 1px 8px 1px 6px;
		border-radius: 999px;
		background: var(--mk-ba-gold-chip);
		color: var(--mk-ba-on-gold);
		font-size: 11px;
		font-weight: 600;
	}

	.mk-ba__rail svg{
		width: 12px;
		height: 12px;
	}

	.mk-ba__faq{
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-height: min(82dvh, 82vh);
		border-left: 0;
		border-top: 1px solid var(--mk-ba-line);
		border-radius: var(--cp-shell-sheet-top-radius, 16px) var(--cp-shell-sheet-top-radius, 16px) 0 0;
		box-shadow: var(--cp-shell-bottom-sheet-shadow, 0 -10px 36px rgba(15,23,42,.16));
		transform: translateY(100%);
	}

	.mk-ba__faq.is-open{
		transform: translateY(0);
	}
}

@media (max-width: 640px){
	.mk-ba{
		--mk-ba-gutter: 14px;
		--mk-ba-pad: 14px;
		--mk-ba-content-pad: 14px;
		--mk-ba-bar-h: 56px;
	}

	.mk-ba__brand-text{
		font-size: 14.5px;
	}

	.mk-ba__logo{
		height: 22px;
		max-height: 22px;
	}

	/* No room for the saved note between the brand and three icon buttons; the
	   script still mirrors it, the bar just does not show it at this width. */
	.mk-ba__bar-inner{
		grid-template-columns: minmax(0,1fr) auto;
		gap: 8px;
	}

	.mk-ba__center{
		display: none;
	}

	.mk-ba__icon{
		width: 32px;
		height: 32px;
	}

	.mk-ba__progress{
		padding-block: 10px 11px;
	}

	.mk-ba__stage{
		padding-top: 18px;
	}

	/* portal.css re-pads .cp-bf below 640px; the column already carries it. */
	.mk-ba__stage > .cp-bf{
		padding: 0;
	}

	.mk-ba .cp-bf-nav{
		padding-block: 12px max(12px, env(safe-area-inset-bottom, 0px));
	}

	.mk-ba .cp-bf-btn{
		padding: 10px 18px;
		min-height: 44px;
	}

	.mk-ba__rail-eyebrow{
		display: none;
	}

	.mk-ba__rail-thumb{
		width: 44px;
		height: 44px;
	}

	.mk-ba__rail-row dt,
	.mk-ba__rail-row dd{
		font-size: 12.5px;
	}

	.mk-ba .cp-bf-step__title{
		font-size: 18px;
	}

	.mk-ba{
		--mk-ba-cal-cell-h: 44px;
	}

	.mk-ba .cp-bf-cal-grid,
	.mk-ba .cp-bf-calendar__grid{
		gap: 4px;
	}

	.mk-ba .cp-bf-cal-day{
		font-size: 13px;
		border-radius: 10px;
	}

	.mk-ba .cp-bf-slot{
		flex: 1 1 auto;
		min-width: 46%;
	}

	.mk-ba .cp-bf-contract-body{
		padding: 14px 15px;
	}

	.mk-ba__receipt-card,
	.mk-ba--notice .mk-ba__stage > .cp-bf{
		padding: 22px 18px 20px;
		border-radius: 12px;
	}

	.mk-ba__receipt-title{
		font-size: 19px;
	}

	.mk-ba__receipt-actions{
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.mk-ba__receipt-done{
		min-height: 46px;
	}
}

/* Phone: only the step you are on keeps its name, the rest collapse to a check
   or their number. */
@media (max-width: 560px){
	.mk-ba__progress .cp-bf-stepper__node:not(.is-active){
		padding: 5px 9px;
	}

	.mk-ba__progress .cp-bf-stepper .cp-bf-stepper__node:not(.is-active) .cp-bf-stepper__label{
		display: none;
	}

	.mk-ba__progress .cp-bf-stepper__node:not(.is-active):not(.is-done) .cp-bf-stepper__dot{
		display: inline-flex;
		width: auto;
		height: auto;
		min-width: 9px;
		background: none;
		border: 0;
		color: var(--mk-ba-faint);
		font-size: 11px;
		font-weight: 600;
	}

	.mk-ba__progress .cp-bf-stepper .cp-bf-stepper__node.is-active .cp-bf-stepper__label{
		max-width: 14ch;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (prefers-reduced-motion: reduce){
	.mk-ba__faq,
	.mk-ba__scrim,
	.mk-ba__icon,
	.mk-ba__brand,
	.mk-ba__progress .cp-bf-stepper__node,
	.mk-ba__progress .cp-bf-stepper__label{
		transition: none !important;
	}
}