/* ─── Amax Connect Booking Form ───────────────────────────────────── */
/* Layered on top of amax-connect-public.css — reuses --sx-* tokens.   */

.ac-booking {
	font-family: var(--ac-font, inherit);
	color: #0f172a;
	max-width: 1120px;
	margin: 0 auto;
}

/* ── Persistent booking header ───────────────────────────────────── */
/* Kept above the fold the way an airline keeps the itinerary bar: the
   customer can always see which unit and which site they are buying.     */

.ac-booking__header {
	margin: 0 0 24px;
	padding: 14px 0;
	border-bottom: 1px solid #e2e8f0;
	background: #fff;
}

.ac-booking__header-eyebrow {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #64748b;
}

.ac-booking__header-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
}

/* The heading element is a layout box only: it holds the unit name and the
   location as two separate facts, and each child states its own type. The
   element itself can be h1, h2 or h3, so nothing here may depend on which -
   hence font-size and weight are neutralised rather than set. Doubled
   specificity because a theme's ".entry-content h1" would otherwise size the
   box and inherit down into anything added here later. */
.ac-booking__header .ac-booking__header-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.2;
	color: inherit;
}

.ac-booking__header-unit {
	margin: 0;
	font-size: calc(var(--ac-heading-size, 20px) + 2px);
	font-weight: 700;
	line-height: 1.2;
	color: #0f172a;
}

.ac-booking__header-dim,
.ac-booking__header-like,
.ac-booking__header-site {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	line-height: 1.4;
	color: #475569;
}

.ac-booking__header-pin {
	flex: none;
	color: var(--ac-primary, #0066ff);
}

/* Deliberately not sticky, now that the overflow-x rule above makes sticky
   work at all. The summary rail is the element that follows the customer down
   the page; a second sticky bar above it would stack with the rail, take
   vertical room from the form and need its own offset to avoid overlapping.
   This header's job is done once the customer has seen it. */

/* ── Two-column grid ───────────────────────────────────────── */
.ac-booking__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 32px;
	align-items: start;
}

@media (max-width: 900px) {
	.ac-booking__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Host-theme overflow: what makes position:sticky work ───── */
/* Many themes (hello-elementor among them) set overflow-x:hidden on html and
   body to hide horizontal spill. That turns both into scroll containers, and
   every position:sticky descendant then scrolls away instead of sticking.
   Measured on a StandBy booking page 2026-09-25 at scrollY 800: the summary
   rail sat at -458px where it should have been at +24px; switching html and
   body to overflow-x:clip put it at exactly 24px, and reverting brought the
   fault straight back. clip does the same clipping job as hidden without
   creating a scroll container, so nothing starts scrolling sideways.

   :has() keeps this to pages that actually contain a booking form, so the
   rest of the client's site is untouched, and @supports means a browser
   without either feature simply keeps the theme's own behaviour and a rail
   that does not stick. */
@supports (overflow-x: clip) and selector(:has(*)) {
	html:has(.ac-booking),
	body:has(.ac-booking) {
		overflow-x: clip;
	}
}

.ac-booking__fields {
	min-width: 0;
}

/* ── Step cards ────────────────────────────────────────────── */
.ac-booking__step {
	border: 1px solid #e5e7eb;
	border-radius: var(--ac-radius, 12px);
	padding: 24px 24px 20px;
	margin: 0 0 20px;
	background: #fff;
}

.ac-booking__step legend {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ac-booking__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--ac-primary, #0066ff);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}

/* ── Form rows ─────────────────────────────────────────────── */
.ac-booking__row {
	margin: 0 0 14px;
}

.ac-booking__row label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.ac-booking__row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 520px) {
	.ac-booking__row--split {
		grid-template-columns: 1fr;
	}
}

/* Sits under a field to say why it is asked for, rather than leaving the
   customer to find out from a rejection after they have paid attention to
   everything else. Styled quieter than an error so the two do not read as the
   same thing: this is standing guidance, not a problem with what they typed. */
.ac-field-note {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #6b7280;
}

/* The company-details row is a grid, and `display:grid` beats the `hidden`
   attribute — without this it would always be visible. */
.ac-booking__row[hidden] {
	display: none !important;
}

.ac-input {
	width: 100%;
	/* Measured on a 375px phone the text fields came out 40.5px tall and the
	   date field 42.5px, against the 44px floor this plugin uses for every
	   other control. The padding is shared with the desktop layout, so the
	   floor is a min-height: the text does not move and nothing reflows on a
	   wider screen. The selects in the same form already measured 46.5px, so
	   this closes a gap between two halves of one row rather than opening one. */
	min-height: 44px;
	padding: 11px 14px;
	font-size: 15px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	color: inherit;
	transition: border-color .15s, box-shadow .15s;
	box-sizing: border-box;
}

.ac-input:focus {
	outline: none;
	border-color: var(--ac-primary, #0066ff);
	box-shadow: 0 0 0 3px rgba(0,102,255,0.12);
}

select.ac-input {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}

/* Date inputs (move-in date) overflow their container on iOS Safari,
   which sizes them to intrinsic content and ignores width shrinking.
   Reset the native appearance and allow the box to shrink. */
input[type="date"].ac-input {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
}
input[type="date"].ac-input::-webkit-date-and-time-value {
	text-align: left;
	margin: 0;
	min-width: 0;
}
input[type="date"].ac-input::-webkit-calendar-picker-indicator {
	margin-left: auto;
	flex-shrink: 0;
}

/* The theme reset carries
 *   input[type="date"], ... input[type="text"], select, textarea
 *     { padding: 0.5rem 1rem }
 * whose attribute branches are 0,1,1 and so beat `.ac-input` at 0,1,0 — and
 * reset.css is enqueued AFTER this sheet, so matching its specificity would
 * still lose on order. Measured on /dev/ 2026-10-01: 11 of the 14 fields in
 * this form rendered 8px/16px, not the 11px/14px above. The three selects were
 * correct only because `select.ac-input` is already 0,1,1. Two classes settle
 * it. The min-height above was added earlier against fields measuring 40.5px
 * tall, which is this same override seen from the other end: 8+8 vertical
 * rather than 11+11. The floor stays, but the cause is here.
 *
 * The select's arrow gap has to come along, because the shorthand below would
 * otherwise outrank `select.ac-input`'s 0,1,1 padding-right and close the 38px
 * the chevron sits in.
 */
.ac-wrap .ac-input {
	padding: 11px 14px;
	/* The reset's `input[type="text"]` and friends are 0,1,1, the same weight as
	 * `.ac-input` would be with one element prefix, and the plugin's sheets load
	 * ahead of the theme's, so a tie goes to the theme. Measured on /dev/
	 * 2026-10-01: ten of the thirteen fields rendered the theme's 3px radius and
	 * #666 border, not the 8px/#d1d5db this sheet asks for. The selects escaped
	 * only because the reset does not target `select`. Two classes is 0,2,0,
	 * which wins on specificity and so no longer depends on load order. */
	border: 1px solid #d1d5db;
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ac-wrap select.ac-input {
	padding-right: 38px;
}

/* ── Step 1 bands: the unit, the term, the cover ───────────────
   Step 1 now carries three decisions that used to be three steps. Run
   together with nothing between them they read as one undifferentiated
   wall of controls, which is the failure mode collapsing a stepper invites
   and the reason the long form was split up in the first place. A hairline
   and some air give each band its own beginning, at no cost in clicks. */
/*
 * The folded billing-period disclosure.
 *
 * Styled as a line of text with a link-looking affordance, not as a form
 * control: it is not a thing the customer must answer, it is a thing they may
 * open. The native marker goes because it reads as a tree control next to the
 * rest of the form, and the summary keeps its own focus ring so removing it
 * costs no keyboard affordance.
 */
.ac-booking__disclose {
	margin: 0 0 12px;
}

.ac-booking__disclose-summary {
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	list-style: none;
	padding: 2px 0;
}

.ac-booking__disclose-summary::-webkit-details-marker {
	display: none;
}

.ac-booking__disclose-more {
	color: #2563eb;
	text-decoration: underline;
	font-size: 14px;
}

.ac-booking__disclose[open] .ac-booking__disclose-summary {
	margin-bottom: 8px;
}

.ac-booking__buying,
.ac-booking__extras {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #eef1f5;
}

/* Rows and the JS-rendered card grids both carry a bottom margin, which at
   the end of a band stacks on top of the next band's padding. */
.ac-booking__buying > :last-child,
.ac-booking__extras > :last-child {
	margin-bottom: 0;
}

/* ── Protection / product cards (JS-rendered) ──────────────── */
.ac-booking__protection,
.ac-booking__products {
	display: grid;
	gap: 10px;
	margin: 0 0 16px;
}

.ac-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	background: #fff;
}

.ac-option:hover {
	border-color: var(--ac-primary, #0066ff);
}

.ac-option input {
	margin-top: 3px;
	accent-color: var(--ac-primary, #0066ff);
	flex-shrink: 0;
}

.ac-option__body {
	flex: 1;
	min-width: 0;
}

.ac-option__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-weight: 600;
	font-size: 14px;
	color: #0f172a;
	margin: 0 0 2px;
}

.ac-option__price {
	font-weight: 700;
	color: var(--ac-primary, #0066ff);
	white-space: nowrap;
}

.ac-option__desc {
	font-size: 13px;
	color: #6b7280;
	margin: 0;
	line-height: 1.45;
}

.ac-option--selected {
	border-color: var(--ac-primary, #0066ff);
	background: color-mix(in srgb, var(--ac-primary, #0066ff) 5%, #fff);
}

.ac-booking__section-label {
	font-size: 11px;
	font-weight: 700;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 4px 0 8px;
}

/* ── Coupon + terms ────────────────────────────────────────── */
.ac-booking__coupon-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
}

.ac-booking__coupon-msg {
	margin-top: 6px;
	font-size: 13px;
	min-height: 18px;
}

.ac-booking__coupon-msg--ok  { color: #059669; }
.ac-booking__coupon-msg--err { color: #dc2626; }

.ac-btn--ghost {
	padding: 11px 20px;
	border: 1px solid #d1d5db;
	background: #fff;
	color: #374151;
	border-radius: var(--ac-btn-radius, 8px);
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.ac-btn--ghost:hover {
	border-color: var(--ac-primary, #0066ff);
	color: var(--ac-primary, #0066ff);
}

/*
 * The ID and agreement notice on the first step.
 *
 * Built on the same tokens as everything else so it takes the operator's
 * colour rather than shouting in a fixed blue, and toned as information, not
 * as a warning: nothing has gone wrong, the customer is being told what to
 * bring. The 5% mix is the same one the selected unit card uses.
 */
.ac-booking__notice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--ac-primary, #0066ff) 25%, #e5e7eb);
	border-radius: var(--ac-radius, 12px);
	background: color-mix(in srgb, var(--ac-primary, #0066ff) 5%, #fff);
	font-size: 14px;
	line-height: 1.5;
	color: #374151;
}

.ac-booking__notice svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--ac-primary, #0066ff);
}

.ac-booking__terms {
	display: flex;
	gap: 10px;
	/* The label wraps its checkbox, so the whole label is the activation
	   target, and it is the target the floor has to be measured against: the
	   terms label measured 305x21 on a 375px phone, under even the 24px AA
	   minimum. Centred rather than top-aligned because with a 44px floor the
	   single-line label would otherwise sit against its own top edge; the
	   three-line ID label is taller than the floor and is unaffected either way. */
	min-height: 44px;
	align-items: center;
	font-size: 14px;
	color: #374151;
	margin: 8px 0 18px;
	cursor: pointer;
	line-height: 1.5;
}

.ac-booking__terms input {
	/* 20px, up from the native 13px. These two are the consent controls for ID
	   and for the storage agreement, so they are the last things a visitor
	   touches before paying and the worst place in the flow for a mis-tap. The
	   box stops at 20 rather than reaching 44 because the label around it is
	   already the 44px target; a 44px checkbox would push the text off the line. */
	width: 20px;
	height: 20px;
	margin-top: 0;
	accent-color: var(--ac-primary, #0066ff);
	flex-shrink: 0;
}

.ac-booking__terms a {
	color: var(--ac-primary, #0066ff);
	text-decoration: underline;
}

/* ── Submit button + error ─────────────────────────────────── */
.ac-booking__submit {
	width: 100%;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 700;
	border: none;
	border-radius: var(--ac-btn-radius, 8px);
	cursor: pointer;
	transition: transform .1s, box-shadow .1s, opacity .15s;
}

/* `.ac-wrap .ac-btn` is 0,2,0 and the rule above is 0,1,0, so on the booking
 * form every one of its declarations was being overridden: measured on /dev/
 * 2026-10-01 at 375px the primary CTA rendered 189x38 with 10px 20px padding
 * and a 14px label, not the full-width 44px+ button the rule above describes.
 * `width: 100%` was lost to the reset's `[type="submit"] { width: auto }` at
 * the same specificity from a later sheet. Three classes settle both without
 * reaching for !important, and the min-height pins the result rather than
 * leaving it to the padding arithmetic.
 */
.ac-wrap .ac-btn.ac-booking__submit {
	width: 100%;
	min-height: 44px;
	padding: 14px 20px;
	font-size: 16px;
}

.ac-booking__submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.ac-booking__submit:disabled {
	opacity: 0.6;
	cursor: wait;
	transform: none;
	box-shadow: none;
}

.ac-booking__error {
	padding: 12px 14px;
	margin: 0 0 14px;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	color: #991b1b;
	border-radius: 8px;
	font-size: 14px;
}

.ac-booking__secure-note {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	color: #6b7280;
	margin: 14px 0 0;
	justify-content: center;
}

.ac-booking__secure-note svg {
	flex-shrink: 0;
}

/* ── Summary (right column) ────────────────────────────────── */
.ac-booking__summary {
	position: sticky;
	top: 24px;
	/* No max-height here. Capping the rail to the viewport moves its foot into a
	   nested scrollbar: measured 2026-09-25 on a 1280x700 screen, 184px of the
	   rail became reachable only by scrolling inside it. That is only a fair
	   trade when the rail has real sticky travel to spend, and it does not - the
	   rail (836px) is within 6px of the whole grid (842px), so page scrolling is
	   still how a customer reaches the bottom of it. */
}

.ac-booking__summary-inner {
	border: 1px solid #e5e7eb;
	border-radius: var(--ac-radius, 12px);
	background: var(--ac-secondary, #f5f7fa);
	padding: 20px;
}

/* The rail's heading names the rail, not the unit: the persistent header and
   the priced line below already name the unit. It can be h2, h3 or h4 with the
   heading_level att, so nothing here may depend on which. */
.ac-wrap .ac-booking__summary-head {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	margin: 0 0 14px;
}

.ac-booking__summary-lines {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
	border-top: 1px dashed #d1d5db;
	padding-top: 14px;
}

.ac-booking__summary-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: #374151;
	padding: 6px 0;
}

.ac-booking__summary-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ac-booking__summary-value {
	font-weight: 600;
	color: #0f172a;
	white-space: nowrap;
}

.ac-booking__summary-totals {
	border-top: 1px solid #d1d5db;
	padding-top: 14px;
}

.ac-booking__summary-row {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 600;
	color: #0f172a;
	padding: 4px 0;
}

.ac-booking__summary-row strong {
	font-weight: 700;
	color: var(--ac-primary, #0066ff);
}

/*
 * A hidden row has to be hidden.
 *
 * `.ac-booking__summary-row { display: flex }` is an author rule and the hidden
 * attribute is `display: none` in the user-agent sheet, so the author rule wins
 * on origin no matter how specific either one is. Every booking therefore drew
 * an empty "Thereafter" line, and a booking with no move-in fee drew an empty
 * "Due today" above it: two money rows with the label present and the figure
 * missing, on the one panel the customer is asked to trust before paying.
 *
 * Doubling the attribute takes this to 0,3,0 so it beats the class rule on
 * specificity as well as on order, and it is keyed on the attribute rather than
 * on the two slots so that a third row added later is hidden by the same rule
 * rather than discovering this again.
 */
.ac-wrap .ac-booking__summary-row[hidden][hidden] {
	display: none;
}

/*
 * The offer, said once, next to the money.
 *
 * It sits inside .ac-booking__summary-totals on purpose: the collapsed phone
 * bar keeps that block and drops everything else in the rail, so a note placed
 * anywhere else disappeared at the one moment the headline figure did not.
 * Doubled [hidden] for the reason the row rule above gives - `display: block`
 * here is an author rule and would otherwise beat the user-agent sheet.
 */
.ac-booking__offer-note {
	display: block;
	margin: 8px 0 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--ac-offer-note-bg, #ecfdf5);
	color: var(--ac-offer-note-text, #065f46);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
}

.ac-wrap .ac-booking__offer-note[hidden][hidden] {
	display: none;
}

/*
 * The word "offer" beside the discounted figure.
 *
 * The strikethrough was the only thing marking that price as temporary, and it
 * is absent entirely on a site with "was" prices turned off: the customer then
 * saw a smaller number and nothing saying why. This tag does not depend on that
 * setting, because it is a label rather than a comparison.
 */
.ac-booking .ac-booking__offer-tag {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 6px;
	border-radius: 100px;
	background: var(--ac-offer-tag-bg, #065f46);
	color: var(--ac-offer-tag-text, #fff);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .02em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.ac-booking__summary-note {
	font-size: 11px;
	color: #6b7280;
	margin: 14px 0 0;
	line-height: 1.5;
}

/* ── Small-screen summary: a pinned bar, not a card above the form ──
 *
 * Without JavaScript the rail stays where it always was: a static card above
 * the form. Everything pinned or collapsed below is gated on .ac-booking--bar,
 * which amax-connect-booking.js adds only once it has built the controls that
 * expand it - a collapsed panel with no way to open it is worse than a tall one.
 */
@media (max-width: 900px) {
	.ac-booking__summary {
		position: static;
		order: -1;
		margin-bottom: 16px;
	}

	.ac-booking--bar .ac-booking__summary {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 60;
		margin: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 4px 12px;
		padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid #e5e7eb;
		box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.14);
	}

	/* The page has to be able to scroll clear of it. Generous rather than
	   measured: the bar's own height changes with the label inside it. */
	.ac-booking--bar .ac-booking__grid {
		padding-bottom: 132px;
	}

	/* Resets `appearance` and the type as well as the paint, because a theme
	   that styles every button also sets the radius, the shadow and, on
	   StandBy, `text-transform: capitalize` - which rewrote this label as
	   "View Price Breakdown". */
	.ac-booking--bar .ac-booking__summary-grip {
		-webkit-appearance: none;
		appearance: none;
		grid-column: 1 / -1;
		justify-self: start;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		/* 44px, up from 32px. The bar is fixed over the page, so the height it
		   occupies is held at the old 32px by the negative margin: the target
		   grows, the viewport the visitor can still read does not shrink. */
		min-height: 44px;
		margin: -6px 0;
		padding: 4px 0;
		border: 0;
		border-radius: 0;
		background: none;
		background-image: none;
		box-shadow: none;
		color: var(--ac-grip-text, var(--ac-primary, #0066ff));
		font-family: inherit;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: normal;
		text-transform: none;
		cursor: pointer;
	}

	/* The reset above is 0,2,0, and `.elementor-kit-11 button:hover` is 0,2,1,
	   so a theme that paints every button takes this one back the moment a
	   thumb lands on it: the plain link becomes an orange slab mid-tap, which
	   is the same fault the step header had. The states carry the rail's class
	   as well, which puts them at 0,4,0, and they repaint rather than trusting
	   the reset to reach the state. The underline is the affordance a link
	   would have had; without it the only hover feedback would be the theme's,
	   and that is what is being refused here. */
	.ac-booking--bar .ac-booking__summary .ac-booking__summary-grip:hover,
	.ac-booking--bar .ac-booking__summary .ac-booking__summary-grip:focus,
	.ac-booking--bar .ac-booking__summary .ac-booking__summary-grip:active {
		background: none;
		background-image: none;
		border-radius: 0;
		box-shadow: none;
		color: var(--ac-grip-text, var(--ac-primary, #0066ff));
		text-decoration: underline;
	}

	.ac-booking--bar .ac-booking__summary .ac-booking__summary-grip:focus-visible {
		outline: 2px solid var(--ac-grip-text, var(--ac-primary, #0066ff));
		outline-offset: 2px;
	}

	.ac-booking--bar .ac-booking__summary-inner {
		grid-column: 1;
		min-width: 0;
		border: 0;
		background: none;
		padding: 0;
	}

	.ac-booking--bar .ac-booking__summary-go {
		grid-column: 2;
	}

	/* 16px so iOS does not zoom the page when it takes focus, 44px so a thumb
	   can hit it. */
	.ac-booking--bar .ac-booking__summary-next {
		min-height: 44px;
		font-size: 16px;
		white-space: nowrap;
	}

	/*
	 * Collapsed: the recurring total and nothing else. Keyed on what to keep
	 * rather than on a list of things to drop, so a row added to the rail later
	 * is collapsed by default instead of appearing in the bar unannounced.
	 */
	.ac-booking--bar .ac-booking__summary:not(.is-open) .ac-booking__summary-inner > *:not(.ac-booking__summary-totals) {
		display: none;
	}

	.ac-booking--bar .ac-booking__summary:not(.is-open) .ac-booking__summary-totals {
		border-top: 0;
		padding-top: 0;
	}

	.ac-booking--bar .ac-booking__summary:not(.is-open) [data-slot="one-time-row"],
	.ac-booking--bar .ac-booking__summary:not(.is-open) [data-slot="thereafter-row"] {
		display: none;
	}

	/* Open: the whole breakdown, capped so it cannot cover the page entirely
	   and scrollable inside the bar because there is nowhere else for it to go. */
	.ac-booking--bar .ac-booking__summary.is-open {
		max-height: 80vh;
		overflow-y: auto;
	}
}

/* The grip only means anything inside the pinned bar, where the breakdown is
   collapsed and needs a way open. Above 900px the rail is a full card with the
   breakdown already on it, so the button toggles a class no rule at that width
   reads - and, being unstyled by Connect there, the theme painted it: measured
   a 258x59 orange slab sitting inside the rail on StandBy's dev booking page.
   Hidden in its own min-width query rather than by out-specifying the bar rule,
   so the two never compete. */
@media (min-width: 901px) {
	.ac-booking .ac-booking__summary-grip {
		display: none;
	}
}

/* ─── Sidebar: offers ──────────────────────────────────────── */
.ac-booking__sidebar-label {
	margin: 18px 0 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	padding-top: 14px;
	border-top: 1px dashed #d1d5db;
}

.ac-booking__offers {
	padding: 0;
	margin: 0;
}

/* ─── Hero offer card (the saving being applied NOW) ───────── */
.ac-offer-hero {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border-radius: 12px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	position: relative;
	overflow: hidden;
}

/* Subtle left-edge accent — reads as a "price tag" ribbon */
.ac-offer-hero::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #16a34a;
}

.ac-offer-hero--auto {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.ac-offer-hero--auto::before {
	background: #16a34a;
}

/* When no auto-apply, style as "claim this" — still exciting */
.ac-offer-hero:not(.ac-offer-hero--auto) {
	background: #fff7ed;
	border-color: #fed7aa;
}

.ac-offer-hero:not(.ac-offer-hero--auto)::before {
	background: #ea580c;
}

.ac-offer-hero__tag {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #16a34a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ac-offer-hero:not(.ac-offer-hero--auto) .ac-offer-hero__tag {
	background: #ea580c;
}

.ac-offer-hero__body {
	flex: 1;
	min-width: 0;
}

.ac-offer-hero__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}

.ac-offer-hero__name {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}

.ac-offer-hero__badge {
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	flex-shrink: 0;
}

.ac-offer-hero__badge--auto {
	background: #16a34a;
	color: #fff;
}

.ac-offer-hero__badge--code {
	background: #0f172a;
	color: #fff;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	letter-spacing: 0.02em;
	font-size: 11px;
}

.ac-offer-hero__desc {
	font-size: 12px;
	color: #475569;
	margin: 0;
	line-height: 1.5;
}

/* ─── Compact "other offers" list ──────────────────────────── */
.ac-offers-more {
	margin: 12px 0 0;
	padding: 0;
}

.ac-offers-more__label {
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #94a3b8;
}

.ac-offers-more__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ac-offers-more__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #64748b;
	line-height: 1.4;
}

.ac-offers-more__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	padding: 0 6px;
	font-size: 9px;
	font-weight: 700;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

.ac-offers-more__tag--auto {
	background: #dcfce7;
	color: #166534;
}

.ac-offers-more__tag--code {
	background: #e2e8f0;
	color: #334155;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	text-transform: none;
	letter-spacing: 0;
}

/* ─── Sidebar: location contact ────────────────────────────── */
.ac-booking__location {
	padding: 0;
}

.ac-booking__contact-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 8px;
	font-size: 13px;
	color: #374151;
	line-height: 1.5;
}

.ac-booking__contact-row:last-child {
	margin-bottom: 0;
}

.ac-booking__contact-row svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--ac-primary, #0066ff);
}

.ac-booking__contact-row address {
	font-style: normal;
	color: #374151;
}

.ac-booking__contact-row a {
	color: #374151;
	text-decoration: none;
	border-bottom: 1px dotted #9ca3af;
}

/* The Elementor kit's global `a` colour is 0,1,1 and loaded after this sheet,
 * so the muted address link above rendered in the site link colour. */
.ac-wrap .ac-booking__contact-row a {
	color: #374151;
}

.ac-booking__contact-row a:hover {
	color: var(--ac-primary, #0066ff);
	border-bottom-color: var(--ac-primary, #0066ff);
}

/* ─── "Unit sold out" alternatives modal ───────────────────── */
.ac-sold-out-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.6);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: sxFadeIn .15s ease-out;
}

@keyframes sxFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.ac-sold-out {
	position: relative;
	background: #fff;
	border-radius: 14px;
	max-width: 480px;
	width: 100%;
	padding: 32px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
	max-height: 85vh;
	overflow-y: auto;
	animation: sxZoomIn .2s ease-out;
}

@keyframes sxZoomIn {
	from { transform: scale(.96); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}

.ac-sold-out__close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: #9ca3af;
	cursor: pointer;
	padding: 4px 10px;
}

.ac-sold-out__close:hover { color: #374151; }

.ac-sold-out__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fef3c7;
	color: #92400e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 700;
	margin: 0 auto 16px;
}

.ac-sold-out__title {
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: #0f172a;
	margin: 0 0 8px;
}

.ac-sold-out__lead {
	font-size: 14px;
	text-align: center;
	color: #4b5563;
	margin: 0 0 20px;
	line-height: 1.5;
}

.ac-sold-out__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.ac-sold-out__alt {
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	font-family: inherit;
}

.ac-sold-out__alt:hover {
	border-color: var(--ac-primary, #0066ff);
	background: color-mix(in srgb, var(--ac-primary, #0066ff) 4%, #fff);
}

.ac-sold-out__alt-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 2px;
}

.ac-sold-out__alt strong {
	font-size: 15px;
	color: #0f172a;
	font-weight: 600;
}

.ac-sold-out__price {
	font-weight: 700;
	color: var(--ac-primary, #0066ff);
	font-size: 14px;
}

.ac-sold-out__size {
	display: inline-block;
	font-size: 12px;
	color: #6b7280;
	margin-right: 10px;
}

.ac-sold-out__avail {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	color: #166534;
	background: #dcfce7;
	padding: 2px 8px;
	border-radius: 10px;
}

/* ─── Thank-you page ────────────────────────────────────────── */
.ac-thankyou {
	font-family: var(--ac-font, inherit);
	max-width: 640px;
	margin: 0 auto;
	padding: 20px;
}

.ac-thankyou__inner {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: var(--ac-radius, 12px);
	padding: 48px 40px;
	text-align: center;
	box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}

.ac-thankyou__check {
	width: 88px;
	height: 88px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: #dcfce7;
	color: #15803d;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: sxPop .35s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes sxPop {
	0%   { transform: scale(.6); opacity: 0; }
	60%  { transform: scale(1.08); }
	100% { transform: scale(1); opacity: 1; }
}

.ac-thankyou__title {
	font-size: 28px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 8px;
	line-height: 1.25;
}

.ac-thankyou__lead {
	font-size: 16px;
	color: #4b5563;
	margin: 0 0 20px;
	line-height: 1.5;
}

.ac-thankyou__ref {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	background: var(--ac-secondary, #f5f7fa);
	border-radius: 8px;
	margin: 0 0 28px;
}

.ac-thankyou__ref-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
}

.ac-thankyou__ref-code {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	background: transparent;
	padding: 0;
}

.ac-thankyou__steps {
	text-align: left;
	margin: 0 0 32px;
	padding: 24px;
	background: var(--ac-secondary, #f5f7fa);
	border-radius: 10px;
}

.ac-thankyou__steps-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	margin: 0 0 16px;
}

.ac-thankyou__steps-list {
	counter-reset: ac-step;
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 14px;
}

.ac-thankyou__steps-list li {
	counter-increment: ac-step;
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 14px;
	align-items: start;
	font-size: 14px;
	color: #374151;
	line-height: 1.5;
}

.ac-thankyou__steps-list li::before {
	content: counter(ac-step);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ac-primary, #0066ff);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ac-thankyou__steps-list li strong,
.ac-thankyou__steps-list .ac-thankyou__step-body strong {
	display: block;
	color: #0f172a;
	font-weight: 600;
	margin: 0 0 3px;
	font-size: 14px;
}

.ac-thankyou__steps-list li span,
.ac-thankyou__steps-list .ac-thankyou__step-body span {
	color: #4b5563;
	display: block;
}

.ac-thankyou__step-body {
	min-width: 0;
}

.ac-thankyou__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.ac-thankyou__actions .ac-btn {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--ac-btn-radius, 8px);
	text-decoration: none;
	display: inline-block;
	transition: transform .1s, box-shadow .1s;
}

.ac-thankyou__actions .ac-btn--primary {
	border: none;
	color: var(--ac-btn-text, #fff);
}

.ac-thankyou__actions .ac-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ac-thankyou__actions .ac-btn--ghost {
	background: #fff;
	color: #374151;
	border: 1px solid #d1d5db;
}

.ac-thankyou__actions .ac-btn--ghost:hover {
	border-color: var(--ac-primary, #0066ff);
	color: var(--ac-primary, #0066ff);
}

@media (max-width: 540px) {
	.ac-thankyou__inner { padding: 32px 20px; }
	.ac-thankyou__title { font-size: 22px; }
	.ac-thankyou__lead  { font-size: 14px; }
}

/* ─── Urgency badge in booking sidebar ─────────────────────── */
.ac-booking__summary-urgency {
	margin: 0 0 14px;
}

.ac-booking__summary-urgency .ac-urgency-badge {
	font-size: 12px;
	padding: 6px 12px;
}

/* The two states that are not scarcity.
   Red for "nearly gone" is already the urgency badge's job; these two exist so
   that changing option always swaps one statement for another. A line that
   disappears when the new option is plentiful reads as a page that broke, not
   as good news, and silence cannot be told apart from nothing having loaded. */
.ac-avail-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
}

.ac-avail-flag__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: currentColor;
}

/* Green means bookable now. Deliberately the same green as the storefront's
   availability chips, so the two do not disagree about what green means. */
.ac-avail-flag--ok {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #047857;
}

/* Amber, not red: the waitlist is a real destination, not an error. */
.ac-avail-flag--none {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
}


/* ─── Step 0: unit options at a size ──────────────────────────────────────
   Rendered only when a size genuinely comes more than one way. Each option is
   an anchor, so it must be reset to look like a control rather than a link. */

.ac-uopts {
	display: grid;
	gap: 10px;
}

/* Each option is an <a>, so the host theme's global link colour applies to it
   and to every child that does not set its own. On StandBy that meant
   `.elementor-kit-11 a` (0,1,1) beat `.ac-uopt { color: inherit }` (0,1,0) and
   the whole chooser — titles and prices — rendered in the theme's link orange,
   reading as a list of links rather than a set of radio options. The notes and
   deltas were unaffected only because they set their own colour. Qualified to
   (0,3,1) so it wins without !important. */
.ac-wrap.ac-booking a.ac-uopt,
.ac-wrap.ac-booking a.ac-uopt:link,
.ac-wrap.ac-booking a.ac-uopt:visited,
.ac-wrap.ac-booking a.ac-uopt:hover {
	color: #0f172a;
}

.ac-wrap.ac-booking a.ac-uopt .ac-uopt__title {
	color: #0f172a;
}

.ac-wrap.ac-booking a.ac-uopt .ac-uopt__price {
	color: #0c2038;
}

.ac-wrap.ac-booking a.ac-uopt .ac-uopt__per {
	color: #64748b;
}

.ac-uopt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid #e2e8f0;
	border-radius: var(--ac-radius, 12px);
	background: #fff;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* `.ac-wrap a { transition: var(--ac-transition) }` in the public sheet is
 * 0,1,1 and that variable carries no property list, so it resolves to
 * `all 0.22s` and replaced the three-property transition above. Restated at
 * 0,2,0 so the hover animates only what it means to. */
.ac-wrap .ac-uopt {
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ac-uopt:hover,
.ac-uopt:focus-visible {
	border-color: var(--ac-primary, #0066ff);
	text-decoration: none;
}

.ac-uopt:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 102, 255, .18);
}

.ac-uopt.is-selected {
	border-color: var(--ac-primary, #0066ff);
	background: var(--ac-secondary, #f0f4f8);
}

/* Radio affordance. The chooser is one-of-many: Stora has no unit type that
   combines two of these, so a checkbox would promise something unbookable. */
.ac-uopt__mark {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid #cbd5e1;
	border-radius: 50%;
	position: relative;
}

.ac-uopt.is-selected .ac-uopt__mark {
	border-color: var(--ac-primary, #0066ff);
}

.ac-uopt.is-selected .ac-uopt__mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--ac-primary, #0066ff);
}

.ac-uopt__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ac-uopt__title {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

/* The operator's explanation of what this option is. Sits below the heading
   and above the availability note, because it describes the unit while the
   note describes the stock. Wraps rather than truncating: a description cut
   off at one line is worse than none. */
.ac-uopt__desc {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.45;
	color: #475569;
}

.ac-uopt__note {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #64748b;
}

.ac-uopt__note--low {
	color: #b45309;
}

/* One line naming the offer, above the cards rather than repeated on each of
   them. Quiet on purpose: it qualifies the prices, it is not a second banner. */
.ac-uopts__offer {
	margin: 0 0 10px;
	font-size: 13px;
	color: #475569;
}

.ac-uopt__pricing {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}

.ac-uopt__price {
	display: block;
	font-weight: 700;
}

.ac-uopt__per {
	font-weight: 400;
	font-size: 12px;
	color: #64748b;
}

/* An offer price only reads as an offer next to the price it replaces, so the
   list price stays on the card, struck through and quiet, while the payable
   price keeps the weight. It is allowed to wrap here even though the rest of
   .ac-uopt__pricing is nowrap: two prices plus a suffix do not fit beside a
   unit name at 375px, and wrapping is better than overflowing the card. */
.ac-uopt__price--offer {
	white-space: normal;
}

.ac-uopt__was {
	margin-right: 6px;
}

/* Qualified to (0,3,1) to beat '.ac-wrap.ac-booking a.ac-uopt .ac-uopt__price',
   which sets #0c2038 on everything inside the price, struck text included. */
.ac-wrap.ac-booking a.ac-uopt .ac-uopt__was {
	font-weight: 400;
	font-size: 12px;
	color: #94a3b8;
	text-decoration: line-through;
}

/* A difference, not a surcharge. Cheaper variants are common (an upper floor
   usually costs less than a drive-up unit the same size), so the saving case
   gets the positive colour and the surcharge stays neutral. */
.ac-uopt__delta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 600;
}

.ac-uopt__delta--save { color: #047857; }
.ac-uopt__delta--more { color: #64748b; }
.ac-uopt__delta--same { color: #94a3b8; font-weight: 400; }

/* Waitlist options stay visible: at some sizes the only bookable unit IS a
   variant, so hiding the rest would make a size look unavailable when it is
   not. Dimmed, still clickable, since the waitlist is a real destination. */
.ac-uopt.is-waitlist {
	background: #f8fafc;
}

.ac-uopt.is-waitlist .ac-uopt__title,
.ac-uopt.is-waitlist .ac-uopt__price {
	color: #64748b;
}

.ac-uopts.is-busy {
	opacity: .6;
	pointer-events: none;
}

@media (max-width: 480px) {
	.ac-uopt {
		padding: 12px 13px;
		gap: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-uopt {
		transition: none;
	}
}

/* ─── Step-by-step disclosure ─────────────────────────────────────────────
   Only active when the operator has switched it on AND the script has run.
   The .ac-step--open class is added by JS, so with JavaScript off no step is
   ever hidden and the form reads exactly as it always has. */

.ac-booking--stepper .ac-booking__step {
	transition: border-color .15s ease;
}

/* Hide bodies only once JS has taken over, which it signals by opening a step. */
.ac-booking--stepper .ac-booking__step:not(.ac-step--open) .ac-step__body {
	display: none;
}

.ac-booking--stepper .ac-step__head {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.ac-booking--stepper .ac-booking__step.ac-step--done > .ac-step__head {
	cursor: pointer;
}

.ac-booking--stepper .ac-step__summary {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 400;
	font-size: 13px;
	color: #64748b;
}

.ac-booking--stepper .ac-step__edit {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--ac-primary, #0066ff);
	text-decoration: underline;
}

.ac-booking--stepper .ac-step__nav {
	margin-top: 14px;
}

.ac-booking--stepper .ac-step__continue {
	background: var(--ac-btn-bg, var(--ac-primary, #0066ff));
	color: var(--ac-btn-text, #fff);
	border: 1.5px solid var(--ac-btn-bg, var(--ac-primary, #0066ff));
	border-radius: var(--ac-btn-radius, 8px);
	padding: 12px 24px;
	font-weight: 700;
	cursor: pointer;
	/* Keeps the primary control of each step above the 44px minimum touch
	   target; at the previous padding it measured 40px on a 375px viewport. */
	min-height: 44px;
}

.ac-booking--stepper .ac-step__continue:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 102, 255, .25);
}

/* A collapsed step is a heading, not a section, so it should not keep the
   padding of an open one. At the open state's 24px/20px a 24px legend sat in a
   69px bordered box that read as an empty container. This applies to every
   collapsed step, not just completed ones — the steps ahead of the visitor
   were the worst offenders. */
.ac-booking--stepper .ac-booking__step:not(.ac-step--open) {
	padding-top: 15px;
	padding-bottom: 15px;
	margin-bottom: 12px;
}

/* Steps still to come are inert: dim them so the open one clearly leads. */
.ac-booking--stepper .ac-booking__step:not(.ac-step--open):not(.ac-step--done) .ac-booking__step-num {
	background: #cbd5e1;
	border-color: #cbd5e1;
	color: #475569;
}

.ac-booking--stepper .ac-booking__step:not(.ac-step--open):not(.ac-step--done) > legend {
	color: #64748b;
}

.ac-booking--stepper .ac-booking__step.ac-step--done .ac-booking__step-num {
	background: #047857;
	border-color: #047857;
}

@media (prefers-reduced-motion: reduce) {
	.ac-booking--stepper .ac-booking__step {
		transition: none;
	}
}

/* ─── Booking page: progress header ───────────────────────────────────────
   Where the customer is and how far there is to go. The numbers here repeat
   the numbers on the panels deliberately: "2" in the header and "2" on the
   open panel are a cross-reference, not a duplicated fact.

   Built by JavaScript, which also adds `.ac-booking--progress`. The panels
   ahead are concealed only under that class, so a header that never built
   cannot leave a visitor with the rest of the form hidden and nothing on the
   page saying it exists. */

/* Every rule below is qualified with `.ac-booking`, and where it paints the
   control with the `button` element too. A host theme that paints every button
   from a selector carrying one class beats a bare `.ac-step-progress__btn`:
   Elementor's kit does exactly that, `.elementor-kit-11 button` at 0,1,1
   against 0,1,0, and it takes the background, the radius, the padding and the
   type with it. Measured on StandBy's dev booking page at 1280px, the three
   steps drew as 57px orange slabs with white 18px capitalised text. So the
   header carries its own look at 0,2,1, and resets the properties a theme
   paints rather than only the ones this design happens to set. */

.ac-booking .ac-step-progress {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

/* The answered half of the journey, folded into the front of this list by the
   script. Scoped to .ac-step-progress and not to .ac-booking as well: the list
   only exists inside a booking form, and the third class would put these at
   0,3,0, level with the hidden-attribute guard, where only source order would
   still be keeping a hidden step hidden.

   These items are in the list without being in the flow: no button, so nothing
   invites a click back to a question this page cannot re-ask. The tick is the
   whole statement, which is why there is no number here. The panels keep 1, 2,
   3 and this half never competes with them, so one row carries one numbering.

   What they DO take is the panel steps' geometry, and that is the point of this
   block. They used to sit at `flex: 0 0 auto` with a 22px mark, a dash drawn
   after each one and no top border, beside panel steps that stretch, carry a
   26px numeral and hang from a 3px track. One <ol> then drew two components:
   two small ticks joined by dashes, floated in the middle of the row, and then
   three taller segments sitting lower with a coloured rail above them. A
   visitor reads that as a leftover and a control, not as one journey of five.

   So the track runs the whole way across now. Same 3px border-top, in the done
   colour the panel steps' own `.is-done` state already uses, so the row reads
   as five segments of which two are finished. Same `flex: 1 1 0`, so the
   segments are equal and the rail is a real measure of how far there is to go
   rather than a bar over the unanswered part only. Same padding, min-height,
   gap, mark size and type as `button.ac-step-progress__btn`, so the baselines
   line up and the circles are one size. The dash is gone: it was there to join
   two items that had nothing else joining them, and with the track present it
   would draw a second, contradicting connector.

   Every selector below names the `li` as well as the class. The public
   stylesheet owns the standalone spine and paints these same elements from
   `.ac-wrap .ac-spine__step` at 0,2,0, from `.ac-wrap .ac-spine__mark` at
   0,2,0, and from `.ac-wrap .ac-spine__step--done .ac-spine__mark` and
   `.ac-wrap .ac-spine__step:not(:last-child)::after` at 0,3,0. The booking page
   carries `.ac-wrap`, so all four reach these items. The last two are strictly
   heavier than a two-class selector here, which would have left the old green
   mark, its 1px border and the dash in place. Adding `.ac-booking` would fix
   the weight and break something else, putting the step selector level with the
   hidden-attribute guard, so the element name does it instead: it buys the
   0,0,1 that settles all four on weight rather than on which of the two
   stylesheets the page happens to print last. */
.ac-step-progress li.ac-spine__step {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	/* Vertical padding only, and the 8px side inset moves onto the two children
	   below. The panel steps put their padding on the inner button, so their
	   `li` contributes nothing to the flex base; padding on this `li` would,
	   because under `box-sizing: border-box` a `flex-basis: 0` item still cannot
	   go below its own padding. Two items with a 16px base and three with none
	   do not divide the row evenly: measured at 375px the folded segments came
	   out 69.4px against 65.4px, and the green-to-grey handover in the track
	   landed 11px off an even fifth. Margins on the children stay out of the
	   base, because `min-width: 0` has already removed the automatic minimum. */
	padding: 11px 0 12px;
	border-top: 3px solid var(--ac-step-done, #047857);
	color: var(--ac-step-text-done, #344054);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
}
/* `content: none` and not `display: none`: it does the same job here, because a
   pseudo-element with no content is never generated in the first place, and it
   keeps a `display` declaration off a 0,3,1 selector. stepper-default-look-test
   refuses those outright in this block rather than relying on source order to
   keep the hidden-attribute guards above them. */
.ac-step-progress li.ac-spine__step::after,
.ac-step-progress li.ac-spine__step:not(:last-child)::after {
	content: none;
}
/* The mark is split for the same reason: `display` stays on a two-class
   selector, and only the properties that have to outweigh the public sheet's
   `.ac-wrap .ac-spine__step--done .ac-spine__mark` take the element qualifier. */
.ac-step-progress .ac-spine__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ac-step-progress li.ac-spine__step .ac-spine__mark {
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var(--ac-step-done, #047857);
	color: var(--ac-step-num-text, #fff);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	margin-left: 8px;
}
.ac-step-progress li.ac-spine__step .ac-spine__label {
	min-width: 0;
	margin-right: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* On a phone the labels go the same way the panel steps' labels go, and by the
   same mechanism: clipped to a pixel rather than `display: none`. Both halves
   then become circles centred in their segment, which is the only treatment
   that still looks like one row at 320px. Nothing visible is lost, because
   this page's heading and its summary rail both name the branch and the size.

   Clipping rather than removing also gives a screen reader the word back. The
   old rule dropped the label out of the accessibility tree, leaving the
   `.ac-sr-only` text to announce a bare "done" with nothing said about what
   was done; now it reads "Location done". */
@media (max-width: 600px) {
	.ac-step-progress li.ac-spine__step {
		justify-content: center;
		padding: 10px 0 12px;
	}

	/* The side inset goes with the label it was insetting, and the circle is
	   centred by the rule above rather than pushed off centre by a margin. The
	   panel steps arrive at the same place from the other direction: their
	   button centres its own circle inside a symmetric 2px padding. */
	.ac-step-progress li.ac-spine__step .ac-spine__mark {
		margin-left: 0;
	}

	.ac-step-progress li.ac-spine__step .ac-spine__label {
		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;
	}
}

.ac-booking .ac-step-progress__item {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
}

/* The whole item is the tap target, and it has to clear 44px on a phone. The
   3px top border is the progress track: three segments side by side, coloured
   by state, so how far there is to go is readable without counting circles. */
.ac-booking button.ac-step-progress__btn {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 11px 8px 12px;
	background: transparent;
	background-image: none;
	border: 0;
	border-top: 3px solid var(--ac-step-track, #dfe4ec);
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	color: var(--ac-step-text, #667085);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.ac-booking .ac-step-progress__num {
	box-sizing: border-box;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ac-step-num-bg, #eef1f5);
	color: var(--ac-step-text, #667085);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.ac-booking .ac-step-progress__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A step that cannot be reached yet says so by being disabled, rather than
   taking a tap and doing nothing. */
.ac-booking button.ac-step-progress__btn[disabled] {
	cursor: default;
	opacity: .7;
}

.ac-booking .ac-step-progress__item.is-current button.ac-step-progress__btn {
	border-top-color: var(--ac-step-current, var(--ac-accent, #1f6feb));
	color: var(--ac-step-text-current, #101828);
	font-weight: 700;
}

.ac-booking .ac-step-progress__item.is-current .ac-step-progress__num {
	background: var(--ac-step-current, var(--ac-accent, #1f6feb));
	color: var(--ac-step-num-text, #fff);
}

.ac-booking .ac-step-progress__item.is-done button.ac-step-progress__btn {
	border-top-color: var(--ac-step-done, #047857);
	color: var(--ac-step-text-done, #344054);
}

.ac-booking .ac-step-progress__item.is-done .ac-step-progress__num {
	background: var(--ac-step-done, #047857);
	color: var(--ac-step-num-text, #fff);
}

.ac-booking button.ac-step-progress__btn:not([disabled]):hover .ac-step-progress__label,
.ac-booking button.ac-step-progress__btn:not([disabled]):focus-visible .ac-step-progress__label {
	text-decoration: underline;
}

/* Hover is where a themed button comes back.
   `.elementor-kit-11 button:hover` is 0,2,1, the same weight as the base rule
   above, and the kit's stylesheet is printed after this file, so the tie goes
   to the theme: on StandBy's dev booking page the current step filled solid
   black under the pointer while the rest of the header stayed flat. Resetting
   a property in the base rule does not carry into a state a theme also paints,
   so the states carry an extra class, `.ac-step-progress__item`, which puts
   them at 0,3,1, and they repaint the same properties rather than trusting the
   base rule to survive. `:focus` is here beside `:hover` for the same reason;
   the visible focus ring is the `:focus-visible` rule below. */
.ac-booking .ac-step-progress__item button.ac-step-progress__btn:hover,
.ac-booking .ac-step-progress__item button.ac-step-progress__btn:focus,
.ac-booking .ac-step-progress__item button.ac-step-progress__btn:active {
	background: transparent;
	background-image: none;
	border-radius: 0;
	box-shadow: none;
	color: var(--ac-step-text, #667085);
}

.ac-booking .ac-step-progress__item.is-current button.ac-step-progress__btn:hover,
.ac-booking .ac-step-progress__item.is-current button.ac-step-progress__btn:focus,
.ac-booking .ac-step-progress__item.is-current button.ac-step-progress__btn:active {
	color: var(--ac-step-text-current, #101828);
}

.ac-booking .ac-step-progress__item.is-done button.ac-step-progress__btn:hover,
.ac-booking .ac-step-progress__item.is-done button.ac-step-progress__btn:focus,
.ac-booking .ac-step-progress__item.is-done button.ac-step-progress__btn:active {
	color: var(--ac-step-text-done, #344054);
}

.ac-booking button.ac-step-progress__btn:focus-visible {
	outline: 2px solid var(--ac-step-current, var(--ac-accent, #1f6feb));
	outline-offset: 2px;
}

/*
 * The panels still to come.
 *
 * They were drawing as a stack of empty bordered boxes below the open one,
 * which read as five things gone wrong rather than five things left to do.
 * The header above now lists them, so the cards say nothing the page does not
 * already say. Gated on `.ac-booking--progress` so nothing is concealed
 * unless the header that replaces it is actually on the page.
 */
.ac-booking--progress .ac-booking__step.ac-step--ahead {
	display: none;
}

/* On a phone the labels have no room, so the header becomes numbers only:
   four or five words each would wrap into a paragraph of navigation. */
@media (max-width: 600px) {
	.ac-booking .ac-step-progress {
		gap: 5px;
	}

	.ac-booking button.ac-step-progress__btn {
		justify-content: center;
		padding: 10px 2px 12px;
	}

	.ac-booking .ac-step-progress__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ─── Booking page: unit not bookable ─────────────────────────────────────
   Shown instead of the form when the requested unit cannot be sold. The form
   used to render here in full, so a visitor could complete it and only be
   rejected at order creation, leaving no lead behind. */

.ac-booking--unavailable {
	max-width: 640px;
}

.ac-unavail {
	padding: 28px;
	background: #fff;
	border: 1px solid #e7ebf1;
	border-radius: var(--ac-radius, 16px);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.ac-unavail__badge {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Parent-scoped, so the rule is one specificity step above the theme's own
   "h1 inside content" rules. These three now take whichever tag the shortcode
   was told to use, and a bare class loses to any `.entry-content h1`. */
.ac-unavail .ac-unavail__title {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.25;
	color: #0f172a;
}

.ac-unavail__desc {
	margin: 0 0 20px;
	color: #5b6675;
	font-size: 14px;
	line-height: 1.5;
}

/* Class, not h3: the level moves with the shortcode's heading_level. */
.ac-unavail__alts-title {
	margin: 22px 0 10px;
	font-size: 14px;
	color: #0f172a;
}

.ac-unavail__list {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

/* Plain links, so switching to an available variant needs no JavaScript. */
.ac-unavail__alt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1.5px solid #e2e8f0;
	border-radius: var(--ac-radius, 12px);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.ac-wrap.ac-booking--unavailable a.ac-unavail__alt,
.ac-wrap.ac-booking--unavailable a.ac-unavail__alt:link,
.ac-wrap.ac-booking--unavailable a.ac-unavail__alt:visited {
	color: #0f172a;
}

.ac-unavail__alt:hover {
	border-color: var(--ac-primary, #1a2e4a);
	background: #f8fafc;
	text-decoration: none;
}

.ac-unavail__alt-name {
	flex: 1 1 auto;
	font-weight: 600;
}

.ac-unavail__alt-price {
	flex: 0 0 auto;
	font-weight: 800;
	color: #0c2038;
	white-space: nowrap;
}

.ac-unavail__alt-left {
	flex: 0 0 auto;
	font-size: 11.5px;
	color: #b45309;
	white-space: nowrap;
}

.ac-unavail__actions {
	margin-top: 22px;
}

.ac-unavail__note {
	margin: 10px 0 0;
	font-size: 13px;
	color: #5b6675;
}

/* ── Nearby locations with the same size ──────── */
/* Ranked by distance where Connect knows where the locations are, and by
   nothing in particular where it does not. Both have to look deliberate, so
   the distance line is a slot that can hold the town instead. */
.ac-nearby {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #e7ebf1;
}

/* Parent-scoped, so the rule is one specificity step above the theme's own
   "h1 inside content" rules. These three now take whichever tag the shortcode
   was told to use, and a bare class loses to any `.entry-content h1`. */
.ac-nearby .ac-nearby__title {
	margin: 0 0 10px;
	font-size: 14px;
	color: #0f172a;
}

.ac-nearby__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.ac-nearby__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid #e2e8f0;
	border-radius: var(--ac-radius, 12px);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.ac-wrap.ac-booking--unavailable a.ac-nearby__link,
.ac-wrap.ac-booking--unavailable a.ac-nearby__link:link,
.ac-wrap.ac-booking--unavailable a.ac-nearby__link:visited {
	color: #0f172a;
}

.ac-nearby__link:hover {
	border-color: var(--ac-primary, #1a2e4a);
	background: #f8fafc;
	text-decoration: none;
}

.ac-nearby__where {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ac-nearby__name {
	font-weight: 600;
}

.ac-nearby__dist {
	font-size: 12.5px;
	color: #5b6675;
}

.ac-nearby__meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex: 0 0 auto;
}

/* The size a row is actually about, shown only when it differs from the one the
   page is about. Same pill as .ac-sitesw__size on the booking page, because it
   carries the same meaning and the two lists are one journey. */
.ac-nearby__size {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	white-space: nowrap;
	padding: 2px 6px;
	border-radius: 999px;
	background: #eef2f7;
	color: #334155;
}

.ac-nearby__price {
	font-weight: 800;
	color: #0c2038;
	white-space: nowrap;
}

.ac-nearby__left {
	font-size: 11.5px;
	color: #b45309;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.ac-unavail { padding: 20px 16px; }
	.ac-unavail__alt { flex-wrap: wrap; gap: 6px 10px; }
	.ac-wrap.ac-booking--unavailable .ac-btn--waitlist { width: 100%; min-height: 44px; }
	.ac-nearby__link { flex-wrap: wrap; gap: 6px 10px; }
	.ac-nearby__meta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ac-unavail__alt,
	.ac-nearby__link { transition: none; }
}

/* ── Review block on the final step ──────────── */
/* Restates what the customer is about to pay for. No prices: the summary
   rail owns those, and two price displays drift apart. */
.ac-booking__review {
	display: grid;
	gap: 12px;
	margin-bottom: 20px;
}

.ac-review__group {
	border: 1px solid #e5e7eb;
	border-radius: var(--ac-radius, 12px);
	padding: 14px 16px;
}

.ac-review__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.ac-review__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
}

/* Scoped to .ac-booking to outrank the host theme's button styling. Elementor
   kits ship '.elementor-kit-NN button { ... }' at specificity (0,1,1), which
   beat a bare '.ac-review__edit' (0,1,0): measured on /dev/ 2026-09-25 this
   Edit link rendered as a filled orange 18px button with 15px 30px padding.
   Two classes take it back without reaching for !important. */
.ac-booking .ac-review__edit {
	flex: none;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	/* Measured 24.5x20.4 on a 375px phone, under the 24px AA minimum on one
	   axis. The padding grows the hit box to 44 and the matching negative
	   margin gives the space straight back to the layout, so the row keeps the
	   height it had: this buys the target without moving the review list. */
	padding: 12px 10px;
	margin: -12px -10px;
	font: inherit;
	font-size: 0.85rem;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ac-primary, #0b63ce);
	text-decoration: underline;
	cursor: pointer;
}

.ac-booking .ac-review__edit:hover,
.ac-booking .ac-review__edit:focus-visible {
	background-color: transparent;
	color: var(--ac-primary, #0b63ce);
	text-decoration: none;
}

/* max-content keeps the labels in one column without a fixed width that
   would clip a translated label. */
.ac-review__list {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 4px 16px;
	margin: 0;
	font-size: 0.9rem;
}

.ac-review__list dt {
	margin: 0;
	color: #6b7280;
}

.ac-review__list dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* On a phone an email address plus a label will not share a line. */
@media (max-width: 480px) {
	.ac-review__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.ac-review__list dd {
		margin-bottom: 8px;
	}
}

/* The rail's struck list price. The same idea as .ac-uopt__was on the unit
   cards, and deliberately the same weight and colour: the two sit on one screen
   and must read as one convention, not two. */
.ac-wrap.ac-booking .ac-booking__summary-was {
	font-weight: 400;
	font-size: 12px;
	color: #94a3b8;
	text-decoration: line-through;
	margin-right: 4px;
}

/* ── Goods protection ─────────────────────────────────────────────
 *
 * Asked as a group now rather than as an unlabelled dropdown, so it needs a
 * fieldset's default border, margin and padding stripped before it will sit
 * flush with the rows around it.
 */
.ac-prot {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0; /* a fieldset will not shrink below its content without this */
}

.ac-prot__legend {
	display: block;
	width: 100%;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #475569;
}

/* `.ac-booking__step legend` is 0,1,1 and the rule above is 0,1,0, so six of
 * its eight declarations were dead: measured on /dev/ 2026-10-01 this legend
 * rendered flex / 8px padding / 14px / 700 / 0.56px / #0f172a, i.e. the generic
 * step legend, where the rule above asks for a quieter sub-legend. Only
 * `width` survived (the generic rule does not set it) and `text-transform`
 * agreed by coincidence. Three selector parts settle it at 0,2,1.
 */
.ac-booking__step legend.ac-prot__legend {
	display: block;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #475569;
}

.ac-prot__help {
	margin: 4px 0 10px;
	font-size: 13px;
	line-height: 1.45;
	color: #64748b;
}

/* The question itself. The legend above it is a section label in small caps,
 * which is a heading and not something anyone answers, so the question is set
 * as prose: larger and darker than the help beneath it, because it is the one
 * line in this step the customer has to actually read.
 */
.ac-prot__q {
	margin: 8px 0 2px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: #1e293b;
}

/* ── What your things are worth ────────────────────────────────────
 *
 * One box, in money, then one line of plain text saying what that buys.
 * The dropdown under it is for anyone who wants to overrule the match,
 * and it is the only control here that carries a name, so there is
 * nothing to keep in sync: the box writes to the select, and the line
 * reads back from it.
 */
.ac-prot__field {
	display: flex;
	align-items: stretch;
	max-width: 220px;
	margin-top: 8px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.ac-prot__field:focus-within {
	border-color: var(--ac-primary, #0066ff);
	box-shadow: 0 0 0 3px rgba(0, 102, 255, .14);
}

/* The currency sits inside the box rather than in the placeholder, so it
 * is still there once the customer has typed over the example.
 */
.ac-prot__cur {
	display: flex;
	align-items: center;
	padding: 0 4px 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: #475569;
	background: #f8fafc;
	border-right: 1px solid #e2e8f0;
}

.ac-prot__value {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px; /* a finger, not a cursor */
	padding: 8px 12px 8px 10px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 16px; /* under 16px iOS zooms the page on focus */
	color: #0f172a;
}

/* Same 0,1,1 reset override as `.ac-input` above: this field measured 8px/16px
 * on /dev/ 2026-10-01, which pushed the amount 16px off the currency divider
 * instead of the 10px the rule above asks for.
 */
.ac-wrap .ac-prot__value {
	padding: 8px 12px 8px 10px;
	/* Same order loss as `.ac-input`: `border: 0` above was being beaten by the
	 * reset's `input[type="text"]`, so the field drew a 1px #666 box inside the
	 * bordered wrapper it is supposed to sit flush in. */
	border: 0;
}

.ac-prot__value:focus {
	outline: 0;
}

/* The answer. Reserved height so the block does not jump the step's layout
 * the moment the first digit lands.
 */
.ac-prot__result {
	min-height: 20px;
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: #64748b;
}

.ac-prot__result--set {
	font-weight: 600;
	color: #14532d;
}

/* Above the whole ladder. Amber, not red: nothing is wrong with the figure
 * they typed, we simply cannot cover it from here, and the text says so.
 */
.ac-prot__result--over {
	font-weight: 500;
	color: #92400e;
}

.ac-prot__pick-label {
	display: block;
	margin: 14px 0 4px;
	font-size: 13px;
	font-weight: 500;
	color: #475569;
}

.ac-prot__select {
	display: block;
	width: 100%;
	max-width: 420px;
	min-height: 44px;
	padding: 10px 36px 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	font: inherit;
	font-size: 16px;
	color: #0f172a;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.ac-prot__select:focus-visible {
	outline: 2px solid var(--ac-primary, #0066ff);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.ac-prot__field,
	.ac-prot__select {
		max-width: none;
	}
}

/* ── Inline field errors ──────────────────────────────────────────
 *
 * The message the browser used to put in a bubble that vanished on the next
 * keystroke. Red text alone would carry the meaning by colour only, so the
 * field it belongs to is outlined as well, via [aria-invalid].
 */
.ac-field-error {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	color: #b42318;
}

.ac-field-error[hidden] {
	display: none;
}

.ac-input[aria-invalid="true"] {
	border-color: #b42318;
	box-shadow: 0 0 0 1px #b42318;
}

/* The cover control is a select now, and accent-color does nothing to one,
 * so the invalid state has to be drawn on the box itself. accent-color is
 * kept for any radio or checkbox an operator's ladder still renders here.
 */
.ac-prot [aria-invalid="true"] {
	accent-color: #b42318;
}

.ac-prot__select[aria-invalid="true"] {
	border-color: #b42318;
	box-shadow: 0 0 0 1px #b42318;
}

/*
 * Cover required, no levels to offer. Reads as a problem, not as a choice,
 * because it is one: the step refuses until the levels load or the customer
 * calls. The select stays visible so the required message has something on
 * screen to point at.
 */
.ac-prot--unavailable {
	border-color: #f0b7ae;
	background: #fef6f5;
}

.ac-prot__unavailable {
	margin: 0 0 12px;
	color: #7a271a;
	font-size: 15px;
	line-height: 1.5;
}

.ac-prot__retry {
	margin-top: 12px;
	min-height: 44px;
}

.ac-booking__error:focus-visible,
.ac-booking__error:focus {
	outline: 2px solid #b42318;
	outline-offset: 2px;
}

/* ── Other locations with this size ────────────────────────────────── */
/* Between the header and the form: still part of "am I in the right place".
   A <details>, so the collapse needs no JavaScript and cannot be left in a
   state a script failed to reach. Selectors are scoped under .ac-wrap and
   doubled where a theme would otherwise win: a list and a link inside post
   content are two of the most heavily styled things in any WordPress theme. */

.ac-wrap .ac-sitesw {
	margin: 0 0 24px;
	border: 1px solid #e2e8f0;
	border-radius: var(--ac-radius, 12px);
	background: #fff;
}

.ac-wrap .ac-sitesw__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* 44px minimum, made of padding plus a 1.35 line box rather than a fixed
	   height, so a heading that wraps to two lines grows the target instead of
	   overflowing it. */
	min-height: 44px;
	padding: 12px 14px;
	margin: 0;
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
}

/* Both spellings: the marker is a pseudo-element in WebKit and a ::marker
   elsewhere, and a leftover triangle next to our own chevron reads as two
   controls. */
.ac-wrap .ac-sitesw__summary::-webkit-details-marker { display: none; }
.ac-wrap .ac-sitesw__summary::marker { content: ''; }

.ac-wrap .ac-sitesw__summary:focus-visible {
	outline: 2px solid var(--ac-primary, #0066ff);
	outline-offset: 2px;
	border-radius: var(--ac-radius, 12px);
}

/* The heading inside the summary is a label, not a size: it may be h2, h3 or
   h4 depending on the page, so nothing here may depend on which. */
.ac-wrap .ac-sitesw .ac-sitesw__title {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #0f172a;
}

.ac-wrap .ac-sitesw__chev {
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid #64748b;
	border-bottom: 2px solid #64748b;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .15s ease;
}

.ac-wrap .ac-sitesw[open] .ac-sitesw__chev { transform: rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
	.ac-wrap .ac-sitesw__chev { transition: none; }
}

.ac-wrap .ac-sitesw__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0;
	padding: 0 14px 14px;
	list-style: none;
}

.ac-wrap .ac-sitesw__list > .ac-sitesw__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Two abreast once there is room for a place name and its state side by side
   without either wrapping. Below that a single column, because a two-column
   grid at 375px puts "Fully booked" under the town it belongs to. */
@media (min-width: 640px) {
	.ac-wrap .ac-sitesw__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ac-wrap .ac-sitesw__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid #e2e8f0;
	border-left: 3px solid #cbd5e1;
	border-radius: 10px;
	background: #f8fafc;
	color: #0f172a;
	text-decoration: none;
}

.ac-wrap a.ac-sitesw__row:hover,
.ac-wrap a.ac-sitesw__row:focus-visible {
	border-color: var(--ac-primary, #0066ff);
	background: #fff;
	text-decoration: none;
}

.ac-wrap a.ac-sitesw__row:focus-visible {
	outline: 2px solid var(--ac-primary, #0066ff);
	outline-offset: 2px;
}

.ac-wrap .ac-sitesw__place {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ac-wrap .ac-sitesw__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.ac-wrap .ac-sitesw__dist {
	font-size: 12px;
	line-height: 1.3;
	color: #64748b;
}

.ac-wrap .ac-sitesw__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex: none;
	text-align: right;
}

.ac-wrap .ac-sitesw__price {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #0f172a;
}

/* The size on a row, shown only when the list is answering with sizes other
   than the one on the page. A quiet pill rather than another bold figure: it is
   there to be checked against the heading, not to compete with the price, and
   on the current location's own row it is the thing being compared away from. */
.ac-wrap .ac-sitesw__size {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	white-space: nowrap;
	padding: 2px 6px;
	border-radius: 999px;
	background: #eef2f7;
	color: #334155;
}

.ac-wrap .ac-sitesw__item--here .ac-sitesw__size {
	background: color-mix(in srgb, var(--ac-primary, #0066ff) 12%, #ffffff);
	color: var(--ac-primary, #0066ff);
}

/* The state carries a word as well as a colour: red and green alone are not a
   message to a colour-blind customer, and "Fully booked" has to survive a
   greyscale print. */
.ac-wrap .ac-sitesw__state {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.ac-wrap .ac-sitesw__state--free { color: #15803d; }
.ac-wrap .ac-sitesw__state--low  { color: #b45309; }
.ac-wrap .ac-sitesw__state--full { color: #b91c1c; }
.ac-wrap .ac-sitesw__state--here { color: var(--ac-primary, #0066ff); }

.ac-wrap .ac-sitesw__item--free .ac-sitesw__row { border-left-color: #15803d; }
.ac-wrap .ac-sitesw__item--low  .ac-sitesw__row { border-left-color: #b45309; }

/* A full branch is not a link, so it must not look like one: no hover, and a
   flatter background so the eye skips it on the way to something bookable. */
.ac-wrap .ac-sitesw__item--full .ac-sitesw__row {
	border-left-color: #b91c1c;
	background: #fff;
	cursor: default;
}

.ac-wrap .ac-sitesw__item--here .ac-sitesw__row {
	border-left-color: var(--ac-primary, #0066ff);
	background: #fff;
	cursor: default;
}