/*
 * Box4U floor plan. Every rule is scoped under .box4u-fp; fonts come from the theme. A theme sets the
 * accent with --box4u-accent and the text on it with --box4u-on-accent, together, at 4.5:1 or more;
 * without them the accent is dark blue with white text. The focus ring does not use the accent.
 * The status colours (--box4u-available ... --box4u-on-reserved) and --box4u-hatch are set inline
 * on the root by the renderer from the settings; the values here are the fallbacks.
 * Breakpoints: 360 (floor), 768, 1024, 1440.
 */

.box4u-fp {
	--box4u-accent-color: var(--box4u-accent, #14284B);
	--box4u-on-accent-color: var(--box4u-on-accent, #FFFFFF);
	--box4u-available: #F2B21B;
	--box4u-occupied: #14284B;
	--box4u-unavailable: #C9CED6;
	--box4u-reserved: #7A8499;
	--box4u-on-available: #0F172A;
	--box4u-on-occupied: #FFFFFF;
	--box4u-on-unavailable: #0F172A;
	--box4u-on-reserved: #0F172A;
	--box4u-danger: #B91C1C;
	--box4u-radius: 8px;
	--box4u-line: rgba(15, 23, 42, 0.2);
	--box4u-muted: rgba(15, 23, 42, 0.7);
	/* Two-tone, so it shows on light and on dark surfaces whatever the accent is. */
	--box4u-focus: #14284B;
	--box4u-focus-gap: #FFFFFF;
	--box4u-s1: 4px;
	--box4u-s2: 8px;
	--box4u-s3: 12px;
	--box4u-s4: 16px;
	--box4u-s6: 24px;
	--box4u-s8: 32px;
	--box4u-duration: 200ms;

	display: flex;
	flex-direction: column;
	gap: var(--box4u-s6);
	box-sizing: border-box;
	max-width: 100%;
	font-family: inherit;
	line-height: 1.5;
	color: inherit;
}

.box4u-fp *,
.box4u-fp *::before,
.box4u-fp *::after {
	box-sizing: inherit;
}

.box4u-fp [hidden] {
	display: none !important;
}

/* Visually hidden, still read aloud. */
.box4u-fp .box4u-fp__sr {
	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;
}

/* ---------- Focus: a 3 px dark ring, 2 px out, with a light line between it and the control ---------- */

.box4u-fp a:focus-visible,
.box4u-fp button:focus-visible,
.box4u-fp input:focus-visible,
.box4u-fp select:focus-visible,
.box4u-fp textarea:focus-visible,
.box4u-fp [tabindex]:focus-visible {
	outline: 3px solid var(--box4u-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--box4u-focus-gap);
}

/* Browsers without :focus-visible (iOS Safari 15.0 to 15.3) get the same ring on :focus. */
@supports not selector(:focus-visible) {
	.box4u-fp a:focus,
	.box4u-fp button:focus,
	.box4u-fp input:focus,
	.box4u-fp select:focus,
	.box4u-fp textarea:focus,
	.box4u-fp [tabindex]:not([tabindex="-1"]):focus {
		outline: 3px solid var(--box4u-focus);
		outline-offset: 2px;
		box-shadow: 0 0 0 2px var(--box4u-focus-gap);
	}
}

.box4u-fp button {
	touch-action: manipulation;
	font: inherit;
}

/* ---------- Notices ---------- */

.box4u-fp .box4u-fp__notice,
.box4u-fp .box4u-fp__message,
.box4u-fp .box4u-fp__setup {
	margin: 0;
	padding: var(--box4u-s3) var(--box4u-s4);
	border: 1px solid var(--box4u-line);
	border-inline-start: 4px solid var(--box4u-danger);
	border-radius: var(--box4u-radius);
	background: #FFFFFF;
	color: #0F172A;
}

.box4u-fp .box4u-fp__notice p {
	margin: 0;
}

.box4u-fp .box4u-fp__notice p + p {
	margin-top: var(--box4u-s2);
}

.box4u-fp .box4u-fp__setup {
	border-inline-start-color: var(--box4u-accent-color);
}

.box4u-fp .box4u-fp__phone {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: inherit;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------- Tabs ---------- */

.box4u-fp .box4u-fp__browse {
	display: flex;
	flex-direction: column;
	gap: var(--box4u-s4);
	min-width: 0;
}

.box4u-fp .box4u-fp__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.box4u-fp .box4u-fp__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--box4u-s2);
	border-bottom: 1px solid var(--box4u-line);
}

.box4u-fp .box4u-fp__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--box4u-s2);
	min-width: 44px;
	min-height: 44px;
	margin: 0 0 -1px;
	padding: var(--box4u-s2) var(--box4u-s4);
	border: 1px solid transparent;
	border-bottom: 3px solid transparent;
	border-radius: var(--box4u-radius) var(--box4u-radius) 0 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-align: start;
}

.box4u-fp .box4u-fp__tab:hover {
	border-bottom-color: var(--box4u-line);
}

.box4u-fp .box4u-fp__tab[aria-selected="true"] {
	border-bottom-color: var(--box4u-accent-color);
	font-weight: 600;
}

.box4u-fp .box4u-fp__count {
	display: inline-block;
	min-width: 1.75em;
	padding: 0 var(--box4u-s2);
	border-radius: 999px;
	background: var(--box4u-available);
	color: var(--box4u-on-available);
	font-size: 0.875em;
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---------- Map ---------- */

.box4u-fp .box4u-fp__map {
	position: relative;
	width: 100%;
	/* aspect-ratio comes inline from the viewBox, so the space is reserved before anything loads. */
	max-height: min(70vh, 720px);
	max-height: min(70dvh, 720px);
	overflow: hidden;
	border: 1px solid var(--box4u-line);
	border-radius: var(--box4u-radius);
	background: #FFFFFF;
}

.box4u-fp .box4u-fp__svg {
	display: block;
	width: 100%;
	height: 100%;
	font-family: inherit;
	/* One finger scrolls the page; two fingers reach the script, which zooms the map. */
	touch-action: pan-x pan-y;
}

/* Zoomed in, a drag pans the map instead of the page. */
.box4u-fp .box4u-fp__map.is-zoomed .box4u-fp__svg {
	touch-action: none;
	cursor: grab;
}

.box4u-fp .box4u-fp__floor {
	position: relative;
}

/* Phones: a row above the drawing, so the buttons never cover a box. From 768 px: over its corner. */
.box4u-fp .box4u-fp__zoom {
	display: flex;
	justify-content: flex-end;
	gap: var(--box4u-s2);
	margin-bottom: var(--box4u-s2);
}

@media (min-width: 768px) {
	.box4u-fp .box4u-fp__zoom {
		position: absolute;
		z-index: 1;
		top: var(--box4u-s2);
		right: var(--box4u-s2);
		flex-direction: column;
		margin: 0;
	}
}

.box4u-fp .box4u-fp__zoom-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--box4u-line);
	border-radius: var(--box4u-radius);
	background: #FFFFFF;
	color: #0F172A;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}

.box4u-fp .box4u-fp__zoom-button:hover {
	background: #F1F5F9;
}

.box4u-fp .box4u-fp__shape {
	stroke: rgba(15, 23, 42, 0.35);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	transition: opacity var(--box4u-duration) ease;
}

.box4u-fp .box4u-fp__code {
	font-weight: 600;
	pointer-events: none;
	user-select: none;
	font-variant-numeric: tabular-nums;
}

.box4u-fp .is-available > .box4u-fp__shape {
	fill: var(--box4u-available);
	/* 2 px outline: available boxes are the ones you can open. */
	stroke: var(--box4u-on-available);
	stroke-width: 2;
}

.box4u-fp .is-available > .box4u-fp__code {
	fill: var(--box4u-on-available);
}

.box4u-fp .is-occupied > .box4u-fp__shape {
	fill: var(--box4u-occupied);
}

.box4u-fp .is-occupied > .box4u-fp__code {
	fill: var(--box4u-on-occupied);
}

.box4u-fp .is-reserved > .box4u-fp__shape {
	/* Reserved with its own colour: dotted, so it differs from occupied without colour. */
	fill: var(--box4u-dots, var(--box4u-reserved));
}

.box4u-fp .is-reserved > .box4u-fp__code {
	fill: var(--box4u-on-reserved);
}

/* The dots and the hatch run under the code: a halo in the box's own colour keeps the digits readable. */
.box4u-fp .is-reserved > .box4u-fp__code,
.box4u-fp .is-unavailable > .box4u-fp__code {
	paint-order: stroke;
	stroke-width: 0.25em;
	stroke-linejoin: round;
}

.box4u-fp .is-reserved > .box4u-fp__code {
	stroke: var(--box4u-reserved);
}

.box4u-fp .is-unavailable > .box4u-fp__code {
	stroke: var(--box4u-unavailable);
}

/* Not for rent: hatched, so it differs from occupied without colour. */
.box4u-fp .is-unavailable > .box4u-fp__shape {
	fill: var(--box4u-hatch, var(--box4u-unavailable));
}

.box4u-fp .is-unavailable > .box4u-fp__code {
	fill: var(--box4u-on-unavailable);
}

.box4u-fp .box4u-fp__hatch-bg {
	fill: var(--box4u-unavailable);
}

.box4u-fp .box4u-fp__hatch-line {
	stroke: var(--box4u-on-unavailable);
	stroke-width: 2;
	stroke-opacity: 0.35;
}

.box4u-fp .box4u-fp__dots-bg {
	fill: var(--box4u-reserved);
}

.box4u-fp .box4u-fp__dots-dot {
	fill: var(--box4u-on-reserved);
	fill-opacity: 0.45;
}

.box4u-fp a.box4u-fp__unit {
	cursor: pointer;
}

.box4u-fp a.box4u-fp__unit:hover > .box4u-fp__shape {
	opacity: 0.8;
}

/* SVG elements do not draw an outline everywhere; a thick stroke in the focus colour is the fallback. */
.box4u-fp a.box4u-fp__unit:focus-visible > .box4u-fp__shape {
	stroke: var(--box4u-focus);
	stroke-width: 6;
}

/* ---------- Legend ---------- */

.box4u-fp .box4u-fp__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--box4u-s2) var(--box4u-s6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.box4u-fp .box4u-fp__legend-item {
	display: inline-flex;
	align-items: center;
	gap: var(--box4u-s2);
	margin: 0;
}

.box4u-fp .box4u-fp__legend-text {
	display: inline-block;
}

.box4u-fp .box4u-fp__legend-text::first-letter {
	text-transform: uppercase;
}

.box4u-fp .box4u-fp__swatch {
	flex: none;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(15, 23, 42, 0.35);
	border-radius: 4px;
}

.box4u-fp .is-available > .box4u-fp__swatch {
	background: var(--box4u-available);
	border: 2px solid var(--box4u-on-available);
}

.box4u-fp .is-occupied > .box4u-fp__swatch {
	background: var(--box4u-occupied);
}

.box4u-fp .is-reserved > .box4u-fp__swatch {
	background-color: var(--box4u-reserved);
	background-image: radial-gradient(circle, var(--box4u-on-reserved) 1.25px, transparent 1.75px);
	background-size: 6px 6px;
	background-position: center;
}

.box4u-fp .is-unavailable > .box4u-fp__swatch {
	background-color: var(--box4u-unavailable);
	background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(15, 23, 42, 0.35) 4px 6px);
}

/* ---------- List ---------- */

.box4u-fp .box4u-fp__listing {
	min-width: 0;
}

.box4u-fp .box4u-fp__list {
	width: 100%;
	border-collapse: collapse;
	text-align: start;
}

.box4u-fp .box4u-fp__list caption {
	margin-bottom: var(--box4u-s2);
	font-weight: 600;
	text-align: start;
}

.box4u-fp .box4u-fp__list th,
.box4u-fp .box4u-fp__list td {
	padding: var(--box4u-s2) var(--box4u-s3);
	border-bottom: 1px solid var(--box4u-line);
	text-align: start;
	vertical-align: middle;
}

.box4u-fp .box4u-fp__list thead th {
	font-size: 0.875em;
	color: var(--box4u-muted);
}

.box4u-fp .box4u-fp__dims {
	display: block;
	font-size: 0.875em;
	color: var(--box4u-muted);
}

.box4u-fp .box4u-fp__price {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.box4u-fp .box4u-fp__view-cell {
	text-align: end;
}

.box4u-fp .box4u-fp__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--box4u-s4);
	border: 2px solid var(--box4u-accent-color);
	border-radius: var(--box4u-radius);
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	touch-action: manipulation;
}

.box4u-fp .box4u-fp__view:hover {
	text-decoration: underline;
}

.box4u-fp .box4u-fp__empty {
	margin: 0;
	color: var(--box4u-muted);
}

/* ---------- Hosts filled by the script ---------- */

/* The host adds no box of its own: an empty host takes no gap, a modal dialog lives in the top layer. */
.box4u-fp .box4u-fp__panel-host {
	display: contents;
}

/* ---------- Box panel: bottom sheet below 1024 px, drawer from the right above ---------- */

.box4u-fp .box4u-fp__panel {
	margin: 0;
	padding: 0;
	border: 0;
	background: #FFFFFF;
	color: #0F172A;
	font-family: inherit;
	line-height: 1.5;
}

.box4u-fp dialog.box4u-fp__panel {
	position: fixed;
	inset: auto 0 0 0;
	width: 100%;
	max-width: 100%;
	max-height: 85vh;
	max-height: 85dvh;
	overflow: auto;
	overscroll-behavior: contain;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.25);
	animation: box4u-sheet-in var(--box4u-duration) ease-out;
}

.box4u-fp dialog.box4u-fp__panel::backdrop {
	background: rgba(15, 23, 42, 0.5);
	animation: box4u-fade-in 200ms ease-out;
}

/* Without <dialog> (iOS Safari before 15.4): a section after the map, in the page flow. */
.box4u-fp .box4u-fp__panel.is-inline {
	border: 1px solid var(--box4u-line);
	border-inline-start: 4px solid var(--box4u-available);
	border-radius: var(--box4u-radius);
}

.box4u-fp .box4u-fp__panel-body {
	display: flex;
	flex-direction: column;
	gap: var(--box4u-s4);
	padding: var(--box4u-s4);
}

.box4u-fp .box4u-fp__panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--box4u-s2);
}

.box4u-fp .box4u-fp__panel-title {
	margin: 0;
	font-size: 1.5em;
	line-height: 1.25;
	align-self: center;
}

/* The heading takes focus only so a screen reader starts there; it is not a control. */
.box4u-fp .box4u-fp__panel-title:focus {
	outline: none;
	box-shadow: none;
}

.box4u-fp .box4u-fp__close {
	flex: none;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--box4u-s4);
	border: 1px solid var(--box4u-line);
	border-radius: var(--box4u-radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.box4u-fp .box4u-fp__panel-status {
	display: flex;
	align-items: center;
	gap: var(--box4u-s2);
	margin: 0;
	font-weight: 600;
}

/* The colour repeats what the words say. */
.box4u-fp .box4u-fp__panel-status::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid var(--box4u-on-available);
	border-radius: 4px;
	background: var(--box4u-available);
}

.box4u-fp .box4u-fp__facts {
	display: grid;
	margin: 0;
}

.box4u-fp .box4u-fp__fact {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--box4u-s4);
	padding: var(--box4u-s2) 0;
	border-bottom: 1px solid var(--box4u-line);
}

.box4u-fp .box4u-fp__fact dt {
	color: var(--box4u-muted);
}

.box4u-fp .box4u-fp__fact dd {
	margin: 0;
	font-weight: 600;
}

.box4u-fp .box4u-fp__fact.is-price dd {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.box4u-fp .box4u-fp__period {
	display: flex;
	flex-wrap: wrap;
	gap: var(--box4u-s2);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.box4u-fp .box4u-fp__period legend {
	margin-bottom: var(--box4u-s2);
	padding: 0;
	font-weight: 600;
}

.box4u-fp .box4u-fp__option {
	display: flex;
	flex: 1 1 140px;
	align-items: center;
	gap: var(--box4u-s2);
	min-height: 44px;
	padding: 0 0 0 var(--box4u-s3);
	border: 1px solid var(--box4u-line);
	border-radius: var(--box4u-radius);
}

.box4u-fp .box4u-fp__option input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--box4u-accent-color);
}

.box4u-fp .box4u-fp__option label {
	display: flex;
	flex: 1;
	align-items: center;
	min-height: 44px;
	padding-inline-end: var(--box4u-s3);
	cursor: pointer;
}

.box4u-fp .box4u-fp__description > :first-child {
	margin-top: 0;
}

.box4u-fp .box4u-fp__description > :last-child {
	margin-bottom: 0;
}

.box4u-fp .box4u-fp__choose {
	min-height: 48px;
	width: 100%;
	padding: var(--box4u-s3) var(--box4u-s6);
	border: 0;
	border-radius: var(--box4u-radius);
	background: var(--box4u-accent-color);
	color: var(--box4u-on-accent-color);
	font-weight: 600;
	cursor: pointer;
}

/* Hover and press underline the label: the colours, and so the contrast, stay as they are. */
.box4u-fp .box4u-fp__choose:hover,
.box4u-fp .box4u-fp__choose:active {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Reservation form: summary above below 1024 px, a sticky column beside it from 1024 px ---------- */

.box4u-fp .box4u-fp__form,
.box4u-fp .box4u-fp__done {
	display: flex;
	flex-direction: column;
	gap: var(--box4u-s4);
	min-width: 0;
	overflow-wrap: anywhere;
}

.box4u-fp .box4u-fp__form-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--box4u-s2);
}

.box4u-fp .box4u-fp__form-title {
	margin: 0;
	font-size: 1.5em;
	line-height: 1.25;
}

.box4u-fp .box4u-fp__form-title:focus {
	outline: none;
	box-shadow: none;
}

.box4u-fp .box4u-fp__done > p,
.box4u-fp .box4u-fp__loading {
	margin: 0;
}

.box4u-fp .box4u-fp__form-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--box4u-s6);
}

.box4u-fp .box4u-fp__summary {
	display: flex;
	flex-direction: column;
	gap: var(--box4u-s2);
	min-width: 0;
	padding: var(--box4u-s4);
	border: 1px solid var(--box4u-line);
	border-radius: var(--box4u-radius);
}

.box4u-fp .box4u-fp__summary-title {
	margin: 0;
	font-size: 1.125em;
}

.box4u-fp .box4u-fp__summary-box {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--box4u-s2);
	margin: 0;
	font-weight: 600;
}

.box4u-fp .box4u-fp__summary-box span {
	font-weight: 400;
	color: var(--box4u-muted);
}

.box4u-fp .box4u-fp__lines {
	display: grid;
	margin: 0;
}

.box4u-fp .box4u-fp__line {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--box4u-s4);
	padding: var(--box4u-s2) 0;
	border-bottom: 1px solid var(--box4u-line);
}

.box4u-fp .box4u-fp__line dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.box4u-fp .box4u-fp__line.is-total {
	font-weight: 700;
	border-bottom-width: 2px;
}

.box4u-fp .box4u-fp__vat-note {
	margin: 0;
	color: var(--box4u-muted);
	font-size: 0.875em;
}

.box4u-fp .box4u-fp__fields {
	display: flex;
	flex-direction: column;
	gap: var(--box4u-s6);
	min-width: 0;
}

.box4u-fp .box4u-fp__required-note {
	margin: 0;
	color: var(--box4u-muted);
}

.box4u-fp .box4u-fp__step {
	display: flex;
	flex-direction: column;
	gap: var(--box4u-s4);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.box4u-fp .box4u-fp__step > legend {
	margin-bottom: var(--box4u-s4);
	padding: 0;
	font-size: 1.25em;
	font-weight: 700;
}

.box4u-fp .box4u-fp__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--box4u-s4);
}

.box4u-fp .box4u-fp__field {
	display: flex;
	flex-direction: column;
	gap: var(--box4u-s1);
	min-width: 0;
}

.box4u-fp .box4u-fp__label,
.box4u-fp .box4u-fp__choices > legend {
	padding: 0;
	font-weight: 600;
}

.box4u-fp .box4u-fp__req {
	color: var(--box4u-danger);
}

.box4u-fp .box4u-fp__opt {
	font-weight: 400;
	color: var(--box4u-muted);
}

.box4u-fp .box4u-fp__input {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: var(--box4u-s2) var(--box4u-s3);
	border: 1px solid rgba(15, 23, 42, 0.5);
	border-radius: var(--box4u-radius);
	background: #FFFFFF;
	color: #0F172A;
	font: inherit;
	font-size: 16px;
}

.box4u-fp .box4u-fp__input[aria-invalid="true"] {
	border: 2px solid var(--box4u-danger);
}

.box4u-fp .box4u-fp__error {
	margin: 0;
	color: var(--box4u-danger);
	font-weight: 600;
}

.box4u-fp .box4u-fp__choices {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--box4u-s2);
	margin: 0;
	padding: 0;
	border: 0;
}

.box4u-fp .box4u-fp__choices > legend {
	margin-bottom: var(--box4u-s2);
}

.box4u-fp .box4u-fp__choices > .box4u-fp__error {
	flex-basis: 100%;
}

.box4u-fp .box4u-fp__choices > .box4u-fp__option {
	flex: 1 1 200px;
}

.box4u-fp .box4u-fp__consent > .box4u-fp__option {
	flex: none;
}

.box4u-fp .box4u-fp__consent > .box4u-fp__option label {
	display: block;
	padding-block: var(--box4u-s3);
}

.box4u-fp .box4u-fp__choices > .box4u-fp__option label {
	flex-wrap: wrap;
	gap: 0 var(--box4u-s2);
}

.box4u-fp .box4u-fp__addon-price {
	color: var(--box4u-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.box4u-fp .box4u-fp__end {
	display: flex;
	flex-direction: column;
	gap: var(--box4u-s1);
	margin: 0;
}

.box4u-fp .box4u-fp__code-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--box4u-s2);
}

.box4u-fp .box4u-fp__code-row .box4u-fp__input {
	flex: 1 1 160px;
	width: auto;
}

.box4u-fp .box4u-fp__discount-status:empty {
	display: none;
}

.box4u-fp .box4u-fp__discount-status,
.box4u-fp .box4u-fp__privacy,
.box4u-fp .box4u-fp__countdown,
.box4u-fp .box4u-fp__send-status {
	margin: 0;
}

.box4u-fp .box4u-fp__send-status:empty {
	display: none;
}

.box4u-fp .box4u-fp__privacy {
	color: var(--box4u-muted);
}

.box4u-fp .box4u-fp__privacy a {
	color: inherit;
	text-decoration: underline;
}

/* Off-screen for people, still in the form for bots. */
.box4u-fp .box4u-fp__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.box4u-fp .box4u-fp__errors,
.box4u-fp .box4u-fp__send-error {
	display: flex;
	flex-direction: column;
	gap: var(--box4u-s2);
	padding: var(--box4u-s3) var(--box4u-s4);
	border: 1px solid var(--box4u-line);
	border-inline-start: 4px solid var(--box4u-danger);
	border-radius: var(--box4u-radius);
}

.box4u-fp .box4u-fp__errors:focus {
	outline: none;
	box-shadow: none;
}

.box4u-fp .box4u-fp__errors p,
.box4u-fp .box4u-fp__send-error p,
.box4u-fp .box4u-fp__errors ul {
	margin: 0;
}

.box4u-fp .box4u-fp__errors-title {
	font-weight: 700;
}

.box4u-fp .box4u-fp__errors ul {
	padding: 0;
	list-style: none;
}

.box4u-fp .box4u-fp__errors li {
	padding: var(--box4u-s1) 0;
}

.box4u-fp .box4u-fp__errors a {
	display: block;
	min-height: 44px;
	padding: var(--box4u-s2) 0;
	color: inherit;
	text-decoration: underline;
}

.box4u-fp .box4u-fp__total-repeat {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--box4u-s4);
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.box4u-fp .box4u-fp__back,
.box4u-fp .box4u-fp__apply {
	flex: none;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--box4u-s4);
	border: 1px solid var(--box4u-line);
	border-radius: var(--box4u-radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.box4u-fp .box4u-fp__apply {
	border-color: rgba(15, 23, 42, 0.5);
	font-weight: 600;
}

.box4u-fp .box4u-fp__apply:disabled {
	cursor: wait;
}

.box4u-fp .box4u-fp__submit,
.box4u-fp .box4u-fp__retry,
.box4u-fp .box4u-fp__back-map {
	min-height: 48px;
	width: 100%;
	padding: var(--box4u-s3) var(--box4u-s6);
	border: 0;
	border-radius: var(--box4u-radius);
	background: var(--box4u-accent-color);
	color: var(--box4u-on-accent-color);
	font-weight: 600;
	cursor: pointer;
}

.box4u-fp .box4u-fp__submit:hover,
.box4u-fp .box4u-fp__retry:hover,
.box4u-fp .box4u-fp__back-map:hover,
.box4u-fp .box4u-fp__submit:active,
.box4u-fp .box4u-fp__retry:active,
.box4u-fp .box4u-fp__back-map:active {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.box4u-fp .box4u-fp__submit[aria-disabled="true"] {
	cursor: wait;
}

.box4u-fp .box4u-fp__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

@keyframes box4u-sheet-in {
	from {
		transform: translateY(100%);
	}
}

@keyframes box4u-drawer-in {
	from {
		transform: translateX(100%);
	}
}

@keyframes box4u-fade-in {
	from {
		opacity: 0;
	}
}

.box4u-fp .box4u-fp__noscript {
	margin: 0;
}

/* ---------- Views: data-view (768 px and up) and data-view-mobile (below 768 px) ---------- */

@media (max-width: 767.98px) {
	/* Phones: the list comes first. */
	.box4u-fp[data-view-mobile="both"] > .box4u-fp__listing {
		order: -1;
	}

	.box4u-fp[data-view-mobile="both"] > .box4u-fp__notice,
	.box4u-fp[data-view-mobile="both"] > .box4u-fp__message {
		order: -2;
	}

	.box4u-fp[data-view-mobile="list"] > .box4u-fp__browse,
	.box4u-fp[data-view-mobile="map"] > .box4u-fp__listing {
		display: none;
	}

	/* The list as cards: no sideways scroll on a 360 px screen. */
	.box4u-fp .box4u-fp__list,
	.box4u-fp .box4u-fp__list tbody,
	.box4u-fp .box4u-fp__list tr,
	.box4u-fp .box4u-fp__list th,
	.box4u-fp .box4u-fp__list td {
		display: block;
	}

	.box4u-fp .box4u-fp__list caption {
		display: block;
	}

	.box4u-fp .box4u-fp__list thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
	}

	.box4u-fp .box4u-fp__list tbody {
		display: grid;
		gap: var(--box4u-s3);
	}

	.box4u-fp .box4u-fp__list tr {
		padding: var(--box4u-s3) var(--box4u-s4);
		border: 1px solid var(--box4u-line);
		border-inline-start: 4px solid var(--box4u-available);
		border-radius: var(--box4u-radius);
	}

	.box4u-fp .box4u-fp__list th,
	.box4u-fp .box4u-fp__list td {
		padding: var(--box4u-s1) 0;
		border: 0;
	}

	.box4u-fp .box4u-fp__list th[scope="row"] {
		font-size: 1.125em;
	}

	/* Label and value side by side; a value that wraps (or the sizes under the area) stays in its column. */
	.box4u-fp .box4u-fp__list td[data-label] {
		display: grid;
		grid-template-columns: 9em minmax(0, 1fr);
		gap: 0 var(--box4u-s2);
	}

	.box4u-fp .box4u-fp__list td[data-label]::before {
		content: attr(data-label) ":";
		grid-column: 1;
		grid-row: 1 / span 2;
		color: var(--box4u-muted);
	}

	.box4u-fp .box4u-fp__dims {
		grid-column: 2;
	}

	.box4u-fp .box4u-fp__view-cell {
		padding-top: var(--box4u-s2);
		text-align: start;
	}

	.box4u-fp .box4u-fp__view {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.box4u-fp[data-view="list"] > .box4u-fp__browse,
	.box4u-fp[data-view="map"] > .box4u-fp__listing {
		display: none;
	}
}

@media (min-width: 1024px) {
	.box4u-fp {
		gap: var(--box4u-s8);
	}

	.box4u-fp dialog.box4u-fp__panel {
		inset: 0 0 0 auto;
		width: min(480px, 100vw);
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		box-shadow: -8px 0 32px rgba(15, 23, 42, 0.25);
		animation-name: box4u-drawer-in;
	}

	.box4u-fp .box4u-fp__panel-body {
		padding: var(--box4u-s6);
	}

	/* The summary becomes a sticky column on the right; the total no longer repeats above Send. */
	.box4u-fp .box4u-fp__form-layout {
		/* Shares, not a fixed summary width: a theme's content column can be as narrow as 640 px. */
		grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr);
		align-items: start;
		gap: var(--box4u-s6);
	}

	.box4u-fp .box4u-fp__summary {
		position: sticky;
		top: var(--box4u-s4);
		grid-column: 2;
		grid-row: 1;
	}

	.box4u-fp .box4u-fp__fields {
		grid-column: 1;
		grid-row: 1;
	}

	.box4u-fp .box4u-fp__total-repeat {
		display: none;
	}

	.box4u-fp .box4u-fp__submit,
	.box4u-fp .box4u-fp__retry {
		width: auto;
		align-self: flex-start;
	}
}

@media (min-width: 1440px) {
	.box4u-fp .box4u-fp__list th,
	.box4u-fp .box4u-fp__list td {
		padding: var(--box4u-s3) var(--box4u-s4);
	}
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.box4u-fp *,
	.box4u-fp *::before,
	.box4u-fp *::after {
		transition: none !important;
		animation: none !important;
	}

	.box4u-fp .box4u-fp__panel::backdrop {
		animation: none !important;
	}
}