/*
 * Booking Upgrades front end.
 * Theme-agnostic: inherits the theme's font family and size unless the Appearance settings set them (then they are
 * applied through --bu-font / --bu-font-size / --bu-heading-font / --bu-heading-size), and sets its own colours for
 * guaranteed contrast. Sizes are in em, so the base font size scales everything.
 * Override any --bu-* property from a theme (e.g. `.booking-upgrades { --bu-accent: #455d58; }`): the defaults
 * are declared with :where() so any theme rule wins, whatever order the stylesheets load in.
 * 8px spacing scale, borders over shadows, 44px+ touch targets, visible focus.
 */
:where(.booking-upgrades) {
	--bu-accent: #1f2a2c;
	--bu-on-accent: #ffffff;
	--bu-text: #1f2629;
	--bu-surface: #ffffff;
	--bu-soft: #f3f5f5;
	--bu-border: #d3d8d8;
	--bu-border-strong: #7b8686;
	--bu-error: #b32d2e;
	--bu-focus: #1a5fb4;
	--bu-radius: 12px;
	--bu-radius-sm: 8px;
	--bu-button-radius: var(--bu-radius-sm);
	--bu-button-font: inherit;
	--bu-button-transform: none;
	--bu-button-spacing: normal;
	--bu-heading-color: var(--bu-text);
	--bu-sticky-top: 24px;
	--bu-1: 8px;
	--bu-2: 16px;
	--bu-3: 24px;
	--bu-4: 32px;
	--bu-6: 48px;
}
.booking-upgrades {
	box-sizing: border-box;
	max-width: 72em;
	margin: 0 auto;
	color: var(--bu-text);
	line-height: 1.5;
	text-align: left;
	/* Font family and size are inherited from the page. Decorative page-wide text styles are not: some themes set
	   uppercase, heavy or shadowed body text for their menus, which would make a form hard to read. */
	font-weight: var(--bu-text-weight, 400);
	font-style: normal;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
}
.booking-upgrades.bu-has-font-size { font-size: var(--bu-font-size); }
/* A chosen font also wins over theme rules aimed at paragraphs, labels and form controls (e.g. an Elementor kit's
   label font). Headings keep the theme's heading font unless "Heading font" is set. */
.booking-upgrades.bu-has-font,
.booking-upgrades.bu-has-font :where(p, li, label, span, dt, dd, th, td, summary, input, select, textarea, button, a, strong, em, small) { font-family: var(--bu-font); }
.booking-upgrades.bu-has-heading-font :is(.bu-title, .bu-subtitle, .bu-dim__legend, .bu-booking__name, .bu-extra__name) {
	font-family: var(--bu-heading-font);
	text-transform: var(--bu-heading-transform, none);
	letter-spacing: var(--bu-heading-spacing, normal);
}
/* Headings take the heading font's weight (setting, or the Elementor global's own), never a hard-coded bold, and a
   weight the font doesn't have is never faked. */
.booking-upgrades :is(.bu-title, .bu-subtitle, .bu-dim__legend, .bu-booking__name, .bu-extra__name) { font-weight: var(--bu-heading-weight, 700); font-synthesis: none; }
/* Theme rules for labels and headings (colour, case, shadows) must not reach the form's own text. */
div.booking-upgrades :is(label, legend) { color: var(--bu-text); text-transform: none; letter-spacing: normal; text-shadow: none; }
.booking-upgrades *,
.booking-upgrades *::before,
.booking-upgrades *::after { box-sizing: inherit; }
.booking-upgrades [hidden] { display: none !important; }
.booking-upgrades img { max-width: 100%; height: auto; border: 0; box-shadow: none; }
/* Paragraph spacing is ours: `div.` outranks the usual theme resets (`.entry-content p`, an Elementor kit's `p`)
   while every class rule in this file still wins over it. */
div.booking-upgrades p { margin: 0 0 var(--bu-2); }
div.booking-upgrades p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- type */
.booking-upgrades .bu-title {
	margin: 0 0 var(--bu-1);
	color: var(--bu-heading-color);
	font-size: var(--bu-heading-size, clamp(1.375em, 1.2em + .8vw, 1.75em));
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
}
.booking-upgrades .bu-subtitle { margin: var(--bu-3) 0 var(--bu-1); color: var(--bu-heading-color); font-size: 1.125em; line-height: 1.3; }
.booking-upgrades .bu-eyebrow { margin: 0 0 4px; font-size: max(.8125em, 12px); line-height: 1.4; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.booking-upgrades .bu-lead { margin: 0 0 var(--bu-3); max-width: 40em; }
.booking-upgrades .bu-small { font-size: .9375em; }
.booking-upgrades .bu-prose > :last-child { margin-bottom: 0; }
/* The wrapper carries the gap to whatever follows (its last paragraph has none), e.g. the list on a confirmation. */
.booking-upgrades .bu-prose { margin: 0 0 var(--bu-2); }
.booking-upgrades .bu-prose:last-child { margin-bottom: 0; }
.booking-upgrades .bu-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.booking-upgrades .bu-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.booking-upgrades .bu-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- focus */
.booking-upgrades a:focus-visible,
.booking-upgrades button:focus-visible,
.booking-upgrades input:focus-visible,
.booking-upgrades summary:focus-visible,
.booking-upgrades .bu-choice__input:focus-visible + .bu-choice__body {
	outline: 3px solid var(--bu-focus);
	outline-offset: 2px;
	box-shadow: none;
}

/* ---------------------------------------------------------------- cards and layout */
.booking-upgrades .bu-card {
	background: var(--bu-surface);
	border: 1px solid var(--bu-border);
	border-radius: var(--bu-radius);
	padding: var(--bu-2);
	margin: 0 0 var(--bu-3);
}
@media (min-width: 600px) {
	.booking-upgrades .bu-card { padding: var(--bu-3); }
}
.booking-upgrades .bu-lookup,
.booking-upgrades .bu-closed,
.booking-upgrades .bu-state { max-width: 36em; }
.booking-upgrades .bu-review,
.booking-upgrades .bu-done { max-width: 48em; }
/* Single cards sit centred under the page title, like the page itself. */
.booking-upgrades .bu-lookup,
.booking-upgrades .bu-closed,
.booking-upgrades .bu-state,
.booking-upgrades .bu-review,
.booking-upgrades .bu-done { margin-left: auto; margin-right: auto; }

@media (min-width: 960px) {
	.booking-upgrades .bu-page--builder {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 21.5em;
		gap: var(--bu-4);
		align-items: start;
	}
	/* Sticky below the theme's pinned header (--bu-sticky-top is measured by the script). The bordered card itself
	   is never taller than the screen below it: its header and its Review button stay put inside the border, and
	   only the middle (breakdown, totals, future payments) scrolls, and only when it doesn't fit. */
	.booking-upgrades .bu-page__aside { position: sticky; top: var(--bu-sticky-top, 24px); }
	.booking-upgrades .bu-summary__card {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - var(--bu-sticky-top, 24px) - 16px);
	}
	.booking-upgrades .bu-summary__card > * { flex: none; }
	.booking-upgrades .bu-summary__card > .bu-summary__scroll {
		flex: 0 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		/* The scrollbar sits in the card's right padding, 8px clear of the amounts, which stay lined up with the
		   pinned totals below (--bu-sb is the scrollbar's measured width, 0 for overlay scrollbars). */
		margin-right: calc(-1 * (var(--bu-sb, 0px) + 8px));
		padding-right: 8px;
	}
	/* More below: the last visible line fades out, so a cut-off row reads as "scroll for more". */
	.booking-upgrades .bu-summary__scroll.has-more {
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
	}
}

/* ---------------------------------------------------------------- messages */
.booking-upgrades .bu-message,
.booking-upgrades .bu-notice {
	margin: 0 0 var(--bu-3);
	padding: 12px var(--bu-2);
	border: 1px solid var(--bu-border);
	border-left: 4px solid var(--bu-accent);
	border-radius: var(--bu-radius-sm);
	background: var(--bu-soft);
	color: var(--bu-text);
}
.booking-upgrades .bu-message--error { border-color: #e6b5b5; border-left-color: var(--bu-error); background: #fcf2f2; }

/* ---------------------------------------------------------------- forms and buttons */
.booking-upgrades .bu-lookup .bu-prose { margin-bottom: var(--bu-3); }
.booking-upgrades .bu-lookup__form { margin: 0; }
.booking-upgrades .bu-field { margin: 0 0 var(--bu-2); }
.booking-upgrades .bu-field label { display: block; margin: 0 0 4px; font-weight: 700; }
/* Form labels keep their own line height: a theme's tall label line-height (e.g. 28px on 15px text) would split a
   wrapped label into what reads as two items. `div.` outranks typical theme label rules; family and weight still
   follow the typography settings. */
div.booking-upgrades .bu-field > label,
div.booking-upgrades .bu-extra__choice > label { line-height: 1.35; }
/* Label → description 4px, description → box 10px, box → help 8px. */
.booking-upgrades .bu-field__desc { margin: 0 0 10px; font-size: .875em; line-height: 1.5; }
.booking-upgrades .bu-field input,
.booking-upgrades .bu-field textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--bu-border-strong);
	border-radius: var(--bu-radius-sm);
	background: var(--bu-surface);
	color: var(--bu-text);
	font: inherit;
	box-shadow: none;
}
.booking-upgrades .bu-field__help { margin: 8px 0 0; font-size: .875em; }

.booking-upgrades .bu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bu-1);
	min-height: 48px;
	margin: 0;
	padding: 12px var(--bu-3);
	border: 2px solid var(--bu-accent);
	border-radius: var(--bu-button-radius);
	background: var(--bu-accent);
	color: var(--bu-on-accent);
	font-family: var(--bu-button-font);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--bu-button-spacing);
	text-transform: var(--bu-button-transform);
	text-decoration: none;
	text-align: center;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.booking-upgrades .bu-btn:hover { background: #000; border-color: #000; color: #fff; }
@supports (background: color-mix(in srgb, red, blue)) {
	.booking-upgrades .bu-btn:hover { background: color-mix(in srgb, var(--bu-accent) 82%, #000); border-color: color-mix(in srgb, var(--bu-accent) 82%, #000); color: var(--bu-on-accent); }
}
.booking-upgrades a.bu-btn:not(.bu-btn--ghost) { text-decoration: none; }
.booking-upgrades .bu-btn--secondary,
.booking-upgrades .bu-btn--secondary:hover { background: var(--bu-surface); color: var(--bu-text); border-color: var(--bu-accent); }
.booking-upgrades .bu-btn--secondary:hover { background: var(--bu-soft); }
.booking-upgrades .bu-btn--ghost,
.booking-upgrades .bu-btn--ghost:hover { background: transparent; border-color: transparent; color: var(--bu-text); text-decoration: underline; text-underline-offset: 3px; padding-left: var(--bu-1); padding-right: var(--bu-1); }
.booking-upgrades .bu-btn--block { display: flex; width: 100%; }
.booking-upgrades .bu-btn:disabled,
.booking-upgrades .bu-btn:disabled:hover {
	background: #e3e7e7;
	border-color: #e3e7e7;
	color: #3d4648;
	cursor: not-allowed;
}
.booking-upgrades .bu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bu-2); margin-top: var(--bu-3); }

/* ---------------------------------------------------------------- chips */
.booking-upgrades .bu-chips { display: flex; flex-wrap: wrap; gap: var(--bu-1); margin: var(--bu-1) 0 0; padding: 0; list-style: none; }
.booking-upgrades .bu-chip {
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--bu-border);
	border-radius: 999px;
	background: var(--bu-soft);
	font-size: .875em;
	line-height: 1.4;
}
.booking-upgrades .bu-chip__label { font-weight: 700; }

/* ---------------------------------------------------------------- booking card */
.booking-upgrades .bu-booking__head { margin-bottom: var(--bu-2); }
.booking-upgrades .bu-booking__item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--bu-2);
	align-items: start;
	padding: var(--bu-2) 0;
	border-top: 1px solid var(--bu-border);
}
@media (min-width: 600px) {
	.booking-upgrades .bu-booking__item { grid-template-columns: 168px minmax(0, 1fr); gap: var(--bu-3); }
}
.booking-upgrades .bu-booking__img,
.booking-upgrades .bu-img-empty { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bu-radius-sm); background: var(--bu-soft); }
.booking-upgrades .bu-booking__name { margin: 0; color: var(--bu-heading-color); font-size: 1.25em; line-height: 1.3; }
.booking-upgrades .bu-booking__qty { font-weight: 400; }
.booking-upgrades .bu-booking__price { display: flex; flex-wrap: wrap; gap: 4px var(--bu-1); align-items: baseline; margin: 12px 0 0; }
.booking-upgrades .bu-booking__price strong { font-size: 1.125em; }
.booking-upgrades .bu-details { margin: 12px 0 0; }
.booking-upgrades .bu-details div { display: flex; flex-wrap: wrap; gap: 0 var(--bu-1); }
.booking-upgrades .bu-details dt { font-weight: 700; margin: 0; }
.booking-upgrades .bu-details dt::after { content: ":"; }
.booking-upgrades .bu-details dd { margin: 0; }
.booking-upgrades .bu-booking__switch { margin: var(--bu-2) 0 0; font-size: .9375em; }

.booking-upgrades .bu-pay { padding-top: var(--bu-2); border-top: 1px solid var(--bu-border); }
.booking-upgrades .bu-pay__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--bu-2); margin: 0 0 var(--bu-1); }
.booking-upgrades .bu-progress { height: 8px; border-radius: 999px; background: var(--bu-soft); border: 1px solid var(--bu-border); overflow: hidden; }
.booking-upgrades .bu-progress span { display: block; height: 100%; min-width: 4px; background: var(--bu-accent); border-radius: 999px; }
.booking-upgrades .bu-pay__next { margin: var(--bu-1) 0 0; font-weight: 700; }
.booking-upgrades .bu-schedule { margin-top: var(--bu-2); }
.booking-upgrades .bu-schedule summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.booking-upgrades .bu-status { display: inline-block; padding: 0 8px; border-radius: 999px; border: 1px solid var(--bu-border); font-size: .8667em; font-weight: 700; }
.booking-upgrades .bu-status--paid { background: var(--bu-soft); }

/* Several booked lines: the guest picks the one to change. */
.booking-upgrades .bu-booking__choose { margin: var(--bu-1) 0 0; }
.booking-upgrades .bu-booking__line { margin: 0 0 4px; font-size: .8125em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.booking-upgrades .bu-booking__item--choice.is-selected { margin: 0 calc(-1 * var(--bu-1)); padding-left: var(--bu-1); padding-right: var(--bu-1); border-radius: var(--bu-radius-sm); background: var(--bu-soft); box-shadow: inset 4px 0 0 var(--bu-accent); }
.booking-upgrades .bu-booking__action { margin: var(--bu-2) 0 0; }
.booking-upgrades .bu-booking__action .bu-btn { min-height: 44px; padding: 8px var(--bu-2); }
.booking-upgrades .bu-booking__also { margin: 0 0 var(--bu-2); font-size: .9375em; }
.booking-upgrades .bu-badge--inline { display: inline-block; margin: 0 0 0 var(--bu-1); vertical-align: 1px; letter-spacing: .02em; text-transform: none; }

/* Downgrades explanation and the fewer-guests link, under the choices. */
.booking-upgrades .bu-downgrade-note { margin: var(--bu-3) 0 0; padding: 12px var(--bu-2); border-left: 4px solid var(--bu-accent); background: var(--bu-soft); font-size: .9375em; }
.booking-upgrades .bu-downgrade-note + .bu-reduce { border-top: 0; }
.booking-upgrades .bu-reduce { margin: var(--bu-3) 0 0; padding-top: var(--bu-2); border-top: 1px solid var(--bu-border); font-size: .9375em; }

/* Extras. */
.booking-upgrades .bu-extra { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--bu-2); padding: var(--bu-2) 0; border-top: 1px solid var(--bu-border); }
@media (min-width: 600px) {
	.booking-upgrades .bu-extra { grid-template-columns: 120px minmax(0, 1fr); gap: var(--bu-3); }
}
.booking-upgrades .bu-extra__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bu-radius-sm); background: var(--bu-soft); }
.booking-upgrades .bu-extra__name { margin: 0 0 4px; color: var(--bu-heading-color); font-size: 1.125em; line-height: 1.3; }
.booking-upgrades .bu-extra__note { margin: 0 0 4px; font-weight: 700; }
.booking-upgrades .bu-extra__facts { margin: 4px 0 0; font-size: .875em; }
.booking-upgrades .bu-extra__max { margin: var(--bu-1) 0 0; font-style: italic; }
.booking-upgrades .bu-extra__choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bu-1) var(--bu-2); margin: 12px 0 0; }
.booking-upgrades .bu-extra__choice label { display: flex; flex-wrap: wrap; gap: 0 var(--bu-1); font-weight: 400; }
.booking-upgrades .bu-extra__label { font-weight: 700; }
.booking-upgrades .bu-extra__price { font-variant-numeric: tabular-nums; }
.booking-upgrades select,
.booking-upgrades textarea {
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--bu-border-strong);
	border-radius: var(--bu-radius-sm);
	background-color: var(--bu-surface);
	color: var(--bu-text);
	font: inherit;
	box-shadow: none;
}
.booking-upgrades .bu-extra__qty { min-width: 5em; }
.booking-upgrades .bu-extras .bu-actions { margin-top: var(--bu-2); }

.booking-upgrades .bu-extra__field { margin: 12px 0 0; }
.booking-upgrades .bu-extra__field input,
.booking-upgrades .bu-extra__field textarea { width: 100%; max-width: 24em; }
.booking-upgrades .bu-required,
.booking-upgrades .bu-optional { font-weight: 400; font-size: .875em; }
.booking-upgrades .bu-items__fields { display: block; font-size: .875em; }
.booking-upgrades .bu-items__fields span { display: block; }

/* The guest's note. */
.booking-upgrades .bu-note textarea { display: block; width: 100%; max-width: 40em; min-height: 6em; resize: vertical; }
.booking-upgrades .bu-note__text { padding: 12px var(--bu-2); border-left: 4px solid var(--bu-border); background: var(--bu-soft); }

/* ---------------------------------------------------------------- tables */
.booking-upgrades .bu-table { width: 100%; margin: var(--bu-1) 0 0; border: 0; border-collapse: collapse; font-size: .9375em; }
.booking-upgrades .bu-table th,
.booking-upgrades .bu-table td { padding: 10px 8px 10px 0; border: 0; border-bottom: 1px solid var(--bu-border); background: transparent !important; text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; }
.booking-upgrades .bu-table th { font-weight: 700; }
.booking-upgrades .bu-table tr:last-child td { border-bottom: 0; }
.booking-upgrades .bu-table td[data-label] { white-space: nowrap; }
@media (max-width: 599px) {
	/* Instalments as labelled rows: four columns don't fit a phone. */
	.booking-upgrades .bu-instalments thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.booking-upgrades .bu-instalments tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--bu-border); }
	.booking-upgrades .bu-instalments tr:last-child { border-bottom: 0; }
	.booking-upgrades .bu-instalments td { display: flex; justify-content: space-between; gap: var(--bu-2); padding: 2px 0; border: 0; }
	.booking-upgrades .bu-instalments td:first-child { font-weight: 700; padding-bottom: 4px; }
	.booking-upgrades .bu-instalments td[data-label]::before { content: attr(data-label); font-weight: 400; }
}

/* ---------------------------------------------------------------- builder */
.booking-upgrades .bu-form { margin: 0; }
.booking-upgrades .bu-dim { margin: 0; padding: var(--bu-3) 0 0; border: 0; background: transparent; border-top: 1px solid var(--bu-border); min-width: 0; }
.booking-upgrades .bu-dim + .bu-dim { margin-top: var(--bu-3); }
.booking-upgrades .bu-dim__legend { background: transparent; float: left; width: 100%; margin: 0 0 12px; padding: 0; color: var(--bu-heading-color); font-size: 1.125em; line-height: 1.3; }
.booking-upgrades .bu-choices { clear: both; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); }
.booking-upgrades .bu-dim--tent .bu-choices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr)); gap: var(--bu-2); }
@media (max-width: 420px) {
	.booking-upgrades .bu-dim--tent .bu-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.booking-upgrades .bu-dim--cards .bu-choices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11em), 1fr)); }

.booking-upgrades .bu-choice { position: relative; display: block; margin: 0; padding: 0; font-weight: 400; cursor: pointer; }
.booking-upgrades .bu-choice__input { position: absolute; top: 12px; left: 12px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.booking-upgrades .bu-choice__body {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 56px;
	padding: 10px 14px;
	border: 1px solid var(--bu-border-strong);
	border-radius: var(--bu-radius-sm);
	background: var(--bu-surface);
	transition: border-color .15s ease, background-color .15s ease;
}
.booking-upgrades .bu-choice:hover .bu-choice__body { border-color: var(--bu-accent); }
.booking-upgrades .bu-choice__input:checked + .bu-choice__body {
	border-color: var(--bu-accent);
	box-shadow: inset 0 0 0 1px var(--bu-accent);
	background: var(--bu-soft);
}
@supports (background: color-mix(in srgb, red, blue)) {
	.booking-upgrades .bu-choice__input:checked + .bu-choice__body { background: color-mix(in srgb, var(--bu-accent) 7%, var(--bu-surface)); }
}
.booking-upgrades .bu-choice__text { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.booking-upgrades .bu-choice__label { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.booking-upgrades .bu-choice__meta { font-size: .875em; line-height: 1.4; }
.booking-upgrades .bu-nowrap { white-space: nowrap; }
.booking-upgrades .bu-choice__foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.booking-upgrades .bu-choice__note { font-size: .8125em; line-height: 1.35; font-weight: 600; }
.booking-upgrades .bu-choice__price { padding-top: 4px; font-size: .9375em; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
/* Cards: the price/status block is pinned to the bottom and always two lines tall, so its first line sits on the
   same baseline across a row whether it reads "+£250.00 on your booking" or wraps to two lines. */
.booking-upgrades .bu-dim--tent .bu-choice__price,
.booking-upgrades .bu-dim--cards .bu-choice__price { min-height: calc(2.8em + 4px); }

/* Selected tick (tent and package cards). */
.booking-upgrades .bu-choice__tick { display: none; }
.booking-upgrades .bu-dim--tent .bu-choice__tick,
.booking-upgrades .bu-dim--cards .bu-choice__tick {
	position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
	border: 2px solid var(--bu-border-strong); background: var(--bu-surface); display: block;
}
.booking-upgrades .bu-choice.is-disabled .bu-choice__tick { display: none !important; }
.booking-upgrades .bu-choice__input:checked + .bu-choice__body .bu-choice__tick { border-color: var(--bu-accent); background: var(--bu-accent); }
.booking-upgrades .bu-choice__input:checked + .bu-choice__body .bu-choice__tick::after {
	content: ""; position: absolute; left: 6px; top: 2px; width: 7px; height: 12px;
	border: solid var(--bu-on-accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.booking-upgrades .bu-dim--cards .bu-choice__body { padding-right: 44px; }

/* "Your tent" / "Current" badge. */
.booking-upgrades .bu-badge {
	align-self: flex-start;
	order: -1;
	margin: 0 0 6px;
	padding: 1px 8px;
	border: 1px solid var(--bu-accent);
	border-radius: 999px;
	background: var(--bu-surface);
	font-size: max(.75em, 12px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
}
.booking-upgrades .bu-dim--tent .bu-badge { position: absolute; top: 10px; left: 10px; margin: 0; }

/* Tent cards: image-led. */
.booking-upgrades .bu-dim--tent .bu-choice__body { padding: 0; overflow: hidden; }
.booking-upgrades .bu-choice__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; background: var(--bu-soft); }
.booking-upgrades .bu-dim--tent .bu-choice__text { padding: 12px 14px 0; }
.booking-upgrades .bu-dim--tent .bu-choice__foot { padding: 0 14px 14px; }
.booking-upgrades .bu-dim--tent .bu-choice__label { font-size: 1.0625em; }

/* Unavailable choices: still legible, clearly not clickable. */
.booking-upgrades .bu-choice.is-disabled { cursor: not-allowed; }
.booking-upgrades .bu-choice.is-disabled .bu-choice__body { border-style: dashed; border-color: var(--bu-border-strong); background: var(--bu-soft); box-shadow: none; }
.booking-upgrades .bu-choice.is-disabled .bu-choice__img { filter: grayscale(1); opacity: .55; }
.booking-upgrades .bu-choice.is-disabled .bu-choice__price { font-weight: 400; font-style: italic; }

/* Tent and package cards in a row share three row tracks (picture or badge | name and details | footer), so the
   footer, and the price at its top, starts at the same height on every card in the row even when one card has an
   "Only available with …" note under its price. Older browsers keep the footer pinned to the card bottom. */
@supports (grid-template-rows: subgrid) {
	.booking-upgrades :is(.bu-dim--tent, .bu-dim--cards):not(.is-single) .bu-choices { row-gap: 0; margin-bottom: calc(-1 * var(--bu-row-gap)); }
	.booking-upgrades .bu-dim--tent:not(.is-single) { --bu-row-gap: var(--bu-2); }
	.booking-upgrades .bu-dim--cards:not(.is-single) { --bu-row-gap: 12px; }
	.booking-upgrades :is(.bu-dim--tent, .bu-dim--cards):not(.is-single) .bu-choice {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: 0;
		margin-bottom: var(--bu-row-gap);
	}
	.booking-upgrades :is(.bu-dim--tent, .bu-dim--cards):not(.is-single) .bu-choice__body {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		row-gap: 0;
		height: auto;
	}
	.booking-upgrades :is(.bu-dim--tent, .bu-dim--cards):not(.is-single) .bu-choice__img { grid-row: 1; }
	.booking-upgrades .bu-dim--cards:not(.is-single) .bu-badge { grid-row: 1; justify-self: start; align-self: start; }
	.booking-upgrades :is(.bu-dim--tent, .bu-dim--cards):not(.is-single) .bu-choice__text { grid-row: 2; }
	.booking-upgrades :is(.bu-dim--tent, .bu-dim--cards):not(.is-single) .bu-choice__foot { grid-row: 3; margin-top: 0; }
}
@media (max-width: 420px) {
	.booking-upgrades .bu-dim--tent:not(.is-single) { --bu-row-gap: 12px; }
}

/* A choice with only one option for the chosen tent reads as information, not a control. */
.booking-upgrades .bu-dim.is-single .bu-choices { display: block; }
.booking-upgrades .bu-dim.is-single .bu-choice { display: inline-block; cursor: default; }
.booking-upgrades .bu-dim.is-single .bu-choice__body { display: inline-flex; min-height: 0; padding: 4px 12px; border: 1px solid var(--bu-border); border-radius: 999px; background: var(--bu-soft); box-shadow: none; }
.booking-upgrades .bu-dim.is-single .bu-choice__price,
.booking-upgrades .bu-dim.is-single .bu-badge,
.booking-upgrades .bu-dim.is-single .bu-choice__tick,
.booking-upgrades .bu-dim.is-single .bu-choice__meta { display: none !important; }
.booking-upgrades .bu-dim__only { margin: 8px 0 0; font-size: .875em; }
.booking-upgrades .bu-dim:not(.is-single) .bu-dim__only { display: none; }
.booking-upgrades .bu-fixed { margin-top: var(--bu-3); padding-top: var(--bu-2); border-top: 1px solid var(--bu-border); }
.booking-upgrades .bu-fixed__title { margin: 0; font-weight: 700; }
.booking-upgrades .bu-nojs { margin-top: var(--bu-3); padding-top: var(--bu-2); border-top: 1px solid var(--bu-border); }
.booking-upgrades.bu-js .bu-nojs { display: none; }

/* ---------------------------------------------------------------- summary */
.booking-upgrades .bu-summary__card { margin-bottom: 0; }
.booking-upgrades .bu-summary__product { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: start; margin: var(--bu-1) 0 var(--bu-2); }
.booking-upgrades .bu-summary__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bu-radius-sm); background: var(--bu-soft); }
.booking-upgrades .bu-summary__name { margin: 0; font-weight: 700; font-size: 1.0625em; line-height: 1.3; }
.booking-upgrades .bu-summary__product .bu-chips { gap: 4px; margin-top: 6px; }
.booking-upgrades .bu-summary__product .bu-chip { padding: 2px 8px; font-size: .8125em; }
.booking-upgrades .bu-summary__hint { margin: 12px 0 0; font-size: .875em; }

/* Itemised breakdown: what each changed choice adds, above the totals. */
.booking-upgrades .bu-items { margin: 0 0 var(--bu-1); padding: 0 0 var(--bu-1); list-style: none; border-bottom: 1px solid var(--bu-border-strong); font-size: .9375em; }
.booking-upgrades .bu-items li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bu-2); margin: 0; padding: 4px 0; }
.booking-upgrades .bu-items__amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.booking-upgrades .bu-lines { margin: 0 0 var(--bu-2); padding: 0; }
.booking-upgrades .bu-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bu-2); padding: 8px 0; border-bottom: 1px solid var(--bu-border); }
.booking-upgrades .bu-lines dt { margin: 0; font-weight: 400; }
.booking-upgrades .bu-lines dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.booking-upgrades .bu-summary__totals { margin: 0; border-top: 1px solid var(--bu-border-strong); }
.booking-upgrades .bu-lines__today { border-bottom: 0 !important; padding-top: 12px !important; }
.booking-upgrades .bu-lines__today dt,
.booking-upgrades .bu-lines__today dd { font-size: 1.25em; font-weight: 700; }

.booking-upgrades .bu-future { margin: 0 0 var(--bu-2); padding: 12px var(--bu-2); border: 1px solid var(--bu-border); border-radius: var(--bu-radius-sm); background: var(--bu-soft); }
.booking-upgrades .bu-future__title { margin: 0 0 4px; font-weight: 700; font-size: .9375em; }
.booking-upgrades .bu-future__list { margin: 0; padding: 0; list-style: none; font-size: .9375em; }
.booking-upgrades .bu-future__list li { display: flex; flex-direction: column; padding: 6px 0; margin: 0; }
.booking-upgrades .bu-future__list li + li { border-top: 1px solid var(--bu-border); }
.booking-upgrades .bu-future__date { font-size: .9333em; }
.booking-upgrades .bu-future__amounts { font-variant-numeric: tabular-nums; white-space: nowrap; }
.booking-upgrades .bu-future__amounts s { text-decoration-thickness: 1px; }

/* Mobile: summary card sits after the builder, a slim bar keeps the price and the action in reach. */
.booking-upgrades .bu-bar { display: none; }
@media (max-width: 959px) {
	/* Never let the last section sit behind the bar: pad by its measured height (set by the script), with a
	   generous fallback that includes the safe area. */
	.booking-upgrades .bu-page--builder { padding-bottom: calc(var(--bu-bar-height, calc(120px + env(safe-area-inset-bottom, 0px))) + var(--bu-2)); }
	/* The fixed bar also covers the end of the page (the theme footer): reserve its height there too. */
	body.bu-has-bar { padding-bottom: var(--bu-page-bar-height, 0px); }
	.booking-upgrades .bu-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--bu-2);
		padding: 12px var(--bu-2) calc(12px + env(safe-area-inset-bottom, 0px));
		background: var(--bu-surface);
		border-top: 1px solid var(--bu-border-strong);
		color: var(--bu-text);
	}
	.booking-upgrades .bu-bar__text { display: flex; flex-direction: column; flex: none; line-height: 1.3; }
	.booking-upgrades .bu-bar__label { font-size: max(.8125em, 13px); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
	.booking-upgrades .bu-bar__amount { font-size: max(1.25em, 20px); font-variant-numeric: tabular-nums; }
	.booking-upgrades .bu-bar__sub { font-size: max(.9375em, 15px); font-weight: 600; color: var(--bu-text); white-space: nowrap; }
	/* The button gives way first (tighter spacing, may wrap) so the amounts always keep their room. */
	.booking-upgrades .bu-bar .bu-btn { flex: 0 1 auto; min-width: 0; padding-left: 16px; padding-right: 16px; letter-spacing: .02em; }
}

/* ---------------------------------------------------------------- review and confirmation */
.booking-upgrades .bu-compare { display: grid; gap: var(--bu-2); margin: var(--bu-3) 0; }
@media (min-width: 600px) {
	.booking-upgrades .bu-compare { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
}
.booking-upgrades .bu-compare__col { padding: var(--bu-2); border: 1px solid var(--bu-border); border-radius: var(--bu-radius-sm); }
.booking-upgrades .bu-compare__col--new { border-color: var(--bu-accent); box-shadow: inset 0 0 0 1px var(--bu-accent); }
.booking-upgrades .bu-compare__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--bu-radius-sm); margin: 4px 0 12px; background: var(--bu-soft); }
.booking-upgrades .bu-compare__name { margin: 0; font-weight: 700; font-size: 1.125em; line-height: 1.3; }
.booking-upgrades .bu-compare__price { margin: 12px 0 0; font-weight: 700; font-size: 1.125em; font-variant-numeric: tabular-nums; }
.booking-upgrades .bu-compare__arrow { align-self: center; justify-self: center; font-size: 1.5em; line-height: 1; transform: rotate(90deg); }
@media (min-width: 600px) {
	.booking-upgrades .bu-compare__arrow { transform: none; }
}
.booking-upgrades .bu-confirm { margin-top: var(--bu-3); padding-top: var(--bu-2); border-top: 1px solid var(--bu-border); }

.booking-upgrades .bu-done__icon {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin: 0 0 var(--bu-2);
	border-radius: 50%; background: var(--bu-accent); color: var(--bu-on-accent);
}
.booking-upgrades .bu-done__email { font-weight: 700; }
.booking-upgrades .bu-state--notice { border-left: 4px solid var(--bu-accent); }

@media (prefers-reduced-motion: reduce) {
	.booking-upgrades *,
	.booking-upgrades *::before,
	.booking-upgrades *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Phones zoom into form fields with text under 16px; keep fields at least that size whatever the text size. */
@media (max-width: 599px) {
	.booking-upgrades input,
	.booking-upgrades select,
	.booking-upgrades textarea { font-size: max(1em, 16px); }
}