/**
 * Checkout styles.
 *
 * Bootstrap 5.3 does the work; this is the small amount it doesn't cover.
 * Colour is never the only signal for validation state or for telling packages
 * apart — the brand accent per package isn't available from the API anyway.
 */

/**
 * Brand surface.
 *
 * The design's magenta and mint are not in the theme palette yet, so these fall
 * back to Bootstrap's theme colours and a project theme can set the real values
 * once palette.json carries them. Nothing here hardcodes a brand hex.
 */
.hbnl-block {
	--hbnl-accent: var(--bs-primary);
	--hbnl-button-bg: var(--bs-primary);
	--hbnl-button-color: var(--bs-white);
	--hbnl-track: var(--bs-secondary-bg);
	--hbnl-radius: 2rem;
	/* Keyline colour for a selected package. Gold in the Figma. */
	--hbnl-selected: var(--hbnl-accent);
}

/* Screen 1 sits in a narrow centred column. */
.hbnl-availability__inner {
	max-width: 30rem;
	margin-inline: auto;
}

.hbnl-availability__heading {
	color: var(--hbnl-accent);
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.hbnl-availability__subheading {
	color: var(--hbnl-accent);
	margin-bottom: 2rem;
}

.hbnl-availability__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: var(--hbnl-accent);
}

.hbnl-availability__escape {
	margin-top: 1.5rem;
	text-align: center;
}

.hbnl-availability__empty-filter {
	margin-top: 0.75rem;
	color: var(--bs-secondary-color);
}

/* Pill field and button, per the design. */
.hbnl-field {
	border-radius: var(--hbnl-radius);
	border-color: var(--hbnl-accent);
	padding-inline: 1.25rem;
}

.hbnl-btn {
	border-radius: var(--hbnl-radius);
	background: var(--hbnl-button-bg);
	color: var(--hbnl-button-color);
	font-weight: 700;
	border: 0;
}

.hbnl-btn:hover,
.hbnl-btn:focus-visible {
	background: var(--hbnl-button-bg);
	color: var(--hbnl-button-color);
	filter: brightness(0.94);
}

.hbnl-link {
	font-weight: 700;
	color: var(--hbnl-accent);
}

/* Two-segment progress bar: Postcode, then Results. */
.hbnl-progress {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	margin: 0 0 3rem;
}

.hbnl-progress__step {
	flex: 1 1 0;
	text-align: center;
}

.hbnl-progress__step::before {
	content: "";
	display: block;
	height: 0.4rem;
	border-radius: 999px;
	background: var(--hbnl-track);
	margin-bottom: 0.5rem;
}

.hbnl-progress__step.is-current::before {
	background: var(--hbnl-accent);
}

/* A step already passed stays filled, but steps back to let the current one lead. */
.hbnl-progress__step.is-done::before {
	background: var(--hbnl-accent);
	opacity: 0.45;
}

.hbnl-progress__label {
	font-size: 0.8125rem;
	color: var(--bs-secondary-color);
}

.hbnl-progress__step.is-current .hbnl-progress__label {
	color: var(--hbnl-accent);
}

/*
 * On the checkout the steps ahead stay unlabelled, as the design shows.
 * visibility rather than display, so the bar keeps its height throughout.
 */
.hbnl-checkout .hbnl-progress__label {
	visibility: hidden;
}

.hbnl-checkout .hbnl-progress__step.is-current .hbnl-progress__label,
.hbnl-checkout .hbnl-progress__step.is-done .hbnl-progress__label {
	visibility: visible;
}

/* Full-panel waiting state, used between screens. */
.hbnl-loading {
	padding: 3rem 0 4rem;
}

.hbnl-loading__heading {
	/* Wide enough for the longest of these headings to sit on two lines. */
	max-width: 32rem;
	margin: 0 auto;
	color: var(--hbnl-accent);
	font-weight: 700;
	text-wrap: balance;
}

.hbnl-spinner {
	width: 12rem;
	height: 12rem;
	margin: 2rem auto 0;
	border-radius: 50%;
	border: 0.35rem solid transparent;
	border-top-color: var(--hbnl-accent);
	border-right-color: var(--hbnl-accent);
	animation: hbnl-spin 1s linear infinite;
}

@keyframes hbnl-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hbnl-spinner {
		animation-duration: 4s;
	}
}

/* Search box with the magnifier inside it. */
.hbnl-search {
	position: relative;
	margin-bottom: 1rem;
}

.hbnl-search__input {
	padding-right: 3.25rem;
}

.hbnl-search__icon {
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hbnl-accent);
	pointer-events: none;
}

/**
 * Address list: one bordered card, rows divided by a hairline, scrolling inside
 * itself.
 *
 * A postcode can return dozens of addresses — 22 for a single Fortrose one —
 * and letting the card grow pushes "Can't find your address?" and everything
 * below it off the screen. Capped against the viewport as well as in rem so it
 * still behaves on a short window.
 *
 * No tabindex on the container: every row is a button, so keyboard users can
 * already scroll it by tabbing through. Adding one would only create a stop
 * that does nothing.
 */
.hbnl-address-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hbnl-accent);
	border-radius: 1rem;
	overflow-y: auto;
	max-height: min(60vh, 22rem);
	/* Don't hand the scroll to the page when the list reaches its end. */
	overscroll-behavior: contain;
	/*
	 * Hold the gutter open whether or not the bar is showing, so filtering the
	 * list doesn't shift the rows sideways on every keystroke.
	 */
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
	scrollbar-color: color-mix(in srgb, var(--hbnl-accent) 35%, transparent) transparent;
}

/* WebKit ignores scrollbar-width, so it gets the same treatment spelled out. */
.hbnl-address-list::-webkit-scrollbar {
	width: 0.375rem;
}

.hbnl-address-list::-webkit-scrollbar-track {
	background: transparent;
}

.hbnl-address-list::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.22);
	background-color: color-mix(in srgb, var(--hbnl-accent) 35%, transparent);
	border-radius: 999px;
}

.hbnl-address-list:hover::-webkit-scrollbar-thumb,
.hbnl-address-list:focus-within::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.4);
	background-color: color-mix(in srgb, var(--hbnl-accent) 60%, transparent);
}

/* Dividers sit lighter than the card's own border, as in the design. */
.hbnl-address-list__item + .hbnl-address-list__item {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	border-top-color: color-mix(in srgb, var(--hbnl-accent) 25%, transparent);
}

.hbnl-address-list__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.85rem 1.25rem;
	background: none;
	border: 0;
	text-align: left;
	color: var(--hbnl-accent);
}

.hbnl-address-list__button:hover,
.hbnl-address-list__button:focus-visible {
	background: var(--bs-tertiary-bg);
}

.hbnl-address-list__select {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex-shrink: 0;
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}

.hbnl-address-list__button:hover .hbnl-address-list__select,
.hbnl-address-list__button:focus-visible .hbnl-address-list__select {
	opacity: 1;
}

/* No hover to reveal it on touch, so it always shows there. */
@media (hover: none) {
	.hbnl-address-list__select {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------- *
 * Screen 3: packages
 * ---------------------------------------------------------------------- */

.hbnl-packages__heading {
	margin-bottom: 1.5rem;
	color: var(--hbnl-accent);
	font-weight: 700;
	text-align: center;
}

.hbnl-packages__notice,
.hbnl-packages__success {
	max-width: 44rem;
	margin-inline: auto;
}

.hbnl-packages__success {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1.25rem;
	margin-bottom: 2rem;
	border-radius: 0.75rem;
	background: var(--bs-success-bg-subtle);
	color: var(--hbnl-accent);
}

/* Contract term switch: one pill holding the options. */
.hbnl-terms {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.3rem;
	margin: 0 auto 2.5rem;
	border-radius: 999px;
	background: var(--hbnl-accent);
}

.hbnl-packages .hbnl-terms {
	display: flex;
	width: fit-content;
}

.hbnl-terms__option {
	padding: 0.5rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--bs-white);
	font-weight: 700;
}

.hbnl-terms__option.is-active {
	background: var(--bs-white);
	color: var(--hbnl-accent);
}

/*
 * Four across, and wider than the column it sits in.
 *
 * The heading, notices and term switch stay at reading width, but the cards
 * break out to fill the page as the design shows. left/transform widens the
 * grid past its parent without needing the checkout to know how wide the
 * container is.
 */
.hbnl-packages__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: start;
	/*
	 * Room above the row for the badge to sit over the card's top edge. It used
	 * to be a margin on the badged card, which pushed that one card down out of
	 * line with the rest.
	 */
	padding-top: 1rem;
	position: relative;
	left: 50%;
	/* Sized off the viewport, less enough margin to clear a scrollbar. */
	width: min(84rem, calc(100vw - 3rem));
	transform: translateX(-50%);
}

@media (max-width: 1199.98px) {
	.hbnl-packages__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.hbnl-packages__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Each card carries its own accent, set from the package content. */
.hbnl-package {
	--hbnl-package-accent: var(--hbnl-accent);

	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem 1.25rem 1.25rem;
	border: 4px solid var(--hbnl-package-accent);
	border-radius: 1.75rem;
	text-align: center;
}

/*
 * The card is the control.
 *
 * The label only wraps the name and pricing, so on its own the padding, the
 * gaps and the empty space below the price wouldn't select anything. This
 * stretches its hit area over the whole card, the way a stretched link works.
 */
.hbnl-package__select {
	display: block;
	cursor: pointer;
}

.hbnl-package__select::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	cursor: pointer;
}

/*
 * The disclosure has to sit above that hit area, or opening "what's included"
 * would select the package instead.
 */
.hbnl-package__disclosure {
	position: relative;
	z-index: 1;
}

/*
 * Selected state: one border throughout, only its colour changes, plus the
 * drop shadow. The width stays at 4px so nothing reflows on selection.
 *
 * --hbnl-selected is the highlight colour, set to the brand accent until the
 * design stylesheet lands with the real one (gold, in the Figma). The shadow
 * carries the state as well, so colour is never the only signal.
 */
.hbnl-package.is-selected {
	border-color: var(--hbnl-selected);
	box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.18);
}

/*
 * Keyboard focus needs a visible ring, since the radio itself is hidden — but
 * :focus-within also fires on a mouse click, which drew a second keyline around
 * the card the moment it was picked. :has(:focus-visible) keeps the ring for
 * keyboard users only.
 */
.hbnl-package:has(:focus-visible) {
	outline: 2px solid var(--hbnl-accent);
	outline-offset: 3px;
}

/*
 * A one-shot confirmation on the card just chosen, not a loop. If the pulse in
 * the Figma is meant to draw attention to the promoted package instead, this
 * moves to .hbnl-package.has-badge as a gentle repeating animation.
 */
@keyframes hbnl-select-pop {
	0% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.03);
	}

	100% {
		transform: scale(1);
	}
}

.hbnl-package.just-selected {
	animation: hbnl-select-pop 0.35s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.hbnl-package.just-selected {
		animation: none;
	}
}

.hbnl-package__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0.35rem 1.25rem;
	border-radius: 999px;
	background: var(--hbnl-package-accent);
	color: var(--bs-white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hbnl-package__name {
	margin-bottom: 0.75rem;
	color: var(--hbnl-accent);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
}

.hbnl-package__tagline {
	margin-bottom: 1.5rem;
	color: var(--hbnl-accent);
}

.hbnl-package__pricing {
	margin-top: auto;
}

.hbnl-package__was {
	margin-bottom: 0;
	color: var(--hbnl-accent);
	font-weight: 700;
	text-decoration: line-through;
}

.hbnl-package__price {
	margin-bottom: 0.25rem;
	color: var(--hbnl-accent);
	font-size: 2rem;
	font-weight: 700;
}

.hbnl-package__increase {
	margin-bottom: 0;
	color: var(--hbnl-accent);
	font-size: 0.8125rem;
}

.hbnl-package__gift {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	align-self: center;
	padding: 0.5rem 1.1rem;
	margin: 1rem 0 0;
	border-radius: 999px;
	background: var(--hbnl-accent);
	color: var(--bs-white);
	font-weight: 700;
	line-height: 1.2;
}

.hbnl-package__disclosure {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--hbnl-accent) 30%, transparent);
	text-align: left;
}

.hbnl-package__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	color: var(--hbnl-accent);
}

.hbnl-package__toggle-label {
	padding: 0.35rem 1rem;
	border-radius: 999px;
	background: var(--hbnl-accent);
	color: var(--bs-white);
	font-size: 0.875rem;
	font-weight: 700;
}

.hbnl-package__toggle[aria-expanded="true"] .hbnl-package__chevron {
	transform: rotate(180deg);
}

.hbnl-package__chevron {
	transition: transform 0.15s ease-in-out;
}

.hbnl-package__includes {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	color: var(--hbnl-accent);
	font-weight: 700;
	text-align: left;
}

.hbnl-package__includes li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.3rem 0;
}

/* ---------------------------------------------------------------------- *
 * Screen 4: add-ons
 * ---------------------------------------------------------------------- */

.hbnl-addons,
.hbnl-addons__basket {
	max-width: 46rem;
	margin-inline: auto;
}

.hbnl-addons__heading {
	margin-bottom: 2rem;
	color: var(--hbnl-accent);
	font-weight: 700;
	text-align: center;
}

.hbnl-addons__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
}

.hbnl-addons__empty {
	margin-top: 1rem;
	color: var(--hbnl-accent);
	text-align: center;
}

.hbnl-addon {
	padding: 1rem 1.25rem 0;
	border: 1px solid var(--hbnl-accent);
	border-radius: 1rem;
}

.hbnl-addon__main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid color-mix(in srgb, var(--hbnl-accent) 30%, transparent);
}

.hbnl-addon__name {
	display: block;
	color: var(--hbnl-accent);
	font-weight: 700;
}

.hbnl-addon__meta {
	margin: 0.15rem 0 0;
	color: var(--hbnl-accent);
}

.hbnl-addon__dot {
	margin: 0 0.35rem;
}

.hbnl-addon__details,
.hbnl-basket__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.85rem 0;
	background: none;
	border: 0;
	color: var(--hbnl-accent);
}

.hbnl-addon__chevron,
.hbnl-basket__chevron {
	flex-shrink: 0;
	transition: transform 0.15s ease-in-out;
}

.hbnl-addon__details[aria-expanded="true"] .hbnl-addon__chevron,
.hbnl-basket__toggle[aria-expanded="true"] .hbnl-basket__chevron {
	transform: rotate(180deg);
}

.hbnl-addon__panel {
	padding-bottom: 1rem;
	color: var(--hbnl-accent);
}

.hbnl-addon__points {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbnl-addon__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.2rem 0;
}

/* Basket panel, collapsed by default at the top of the screen. */
.hbnl-basket {
	padding: 0 1.25rem;
	border: 1px solid var(--hbnl-accent);
	border-radius: 1rem;
}

.hbnl-basket--empty {
	padding: 1rem 1.25rem;
	color: var(--hbnl-accent);
}

.hbnl-basket__title {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hbnl-basket__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.hbnl-basket__total {
	font-weight: 700;
}

.hbnl-basket__body {
	padding-bottom: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--hbnl-accent) 30%, transparent);
	color: var(--hbnl-accent);
}

.hbnl-basket__lines {
	list-style: none;
	margin: 0;
	padding: 0.75rem 0 0;
}

.hbnl-basket__lines li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.25rem 0;
}

.hbnl-basket__sublabel {
	display: block;
	font-size: 0.875rem;
	opacity: 0.75;
}

.hbnl-basket__line-total {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.75rem;
	margin: 0.5rem 0 0;
	border-top: 1px solid color-mix(in srgb, var(--hbnl-accent) 30%, transparent);
	font-weight: 700;
}

.hbnl-basket__was {
	margin-right: 0.4rem;
	font-weight: 400;
	text-decoration: line-through;
	opacity: 0.7;
}

.hbnl-basket__note {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	opacity: 0.8;
}

/* ---------------------------------------------------------------------- *
 * Screen 5: your details
 * ---------------------------------------------------------------------- */

.hbnl-details,
.hbnl-details__basket {
	max-width: 46rem;
	margin-inline: auto;
}

.hbnl-details__heading {
	margin-bottom: 2rem;
	color: var(--hbnl-accent);
	font-weight: 700;
	text-align: center;
}

.hbnl-details__section {
	margin: 2.5rem 0 0.25rem;
	color: var(--hbnl-accent);
	font-weight: 700;
}

.hbnl-details__lede {
	margin-bottom: 1.5rem;
	color: var(--hbnl-accent);
	font-weight: 700;
}

.hbnl-details__field {
	margin-bottom: 0.75rem;
}

/* Direct debit sits in its own box, with the switch to the right. */
.hbnl-details__direct-debit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0 2rem;
	border: 2px solid var(--hbnl-accent);
	border-radius: 1rem;
}

.hbnl-details__direct-debit-label {
	max-width: 14rem;
	color: var(--hbnl-accent);
	font-weight: 700;
	cursor: pointer;
}

/* The remaining questions put the switch first, then the label and details. */
.hbnl-details__toggles {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hbnl-details__toggles--spaced {
	margin-top: 2.5rem;
}

.hbnl-toggle-row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.hbnl-toggle-row__label {
	display: block;
	color: var(--hbnl-accent);
	font-weight: 700;
	cursor: pointer;
}

.hbnl-toggle-row__details {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.15rem 0;
	background: none;
	border: 0;
	color: var(--hbnl-accent);
}

.hbnl-toggle-row__chevron {
	transition: transform 0.15s ease-in-out;
}

.hbnl-toggle-row__details[aria-expanded="true"] .hbnl-toggle-row__chevron {
	transform: rotate(180deg);
}

.hbnl-toggle-row__panel {
	max-width: 34rem;
	margin: 0.25rem 0 0;
	color: var(--hbnl-accent);
}

/* Shared switch sizing, matching the add-on toggles. */
.hbnl-switch {
	flex-shrink: 0;
	min-height: auto;
	padding-left: 0;
	margin-bottom: 0;
}

.hbnl-switch .form-check-input {
	width: 3rem;
	height: 1.6rem;
	margin: 0;
	cursor: pointer;
	background-color: color-mix(in srgb, var(--hbnl-accent) 18%, transparent);
	border-color: color-mix(in srgb, var(--hbnl-accent) 30%, transparent);
}

.hbnl-switch .form-check-input:checked {
	background-color: var(--hbnl-accent);
	border-color: var(--hbnl-accent);
}

.hbnl-details__notice {
	margin-top: 2.5rem;
}

/* ---------------------------------------------------------------------- *
 * Screen 6: review your order
 * ---------------------------------------------------------------------- */

.hbnl-review {
	max-width: 46rem;
	margin-inline: auto;
}

.hbnl-review__heading {
	margin-bottom: 2rem;
	color: var(--hbnl-accent);
	font-weight: 700;
	text-align: center;
}

.hbnl-review__confirmation {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1.25rem;
	margin-bottom: 1.5rem;
	border-radius: 0.75rem;
	background: var(--bs-success-bg-subtle);
	color: var(--hbnl-accent);
}

.hbnl-review__notice {
	margin-bottom: 1rem;
}

.hbnl-review__lines {
	padding: 0 0 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--hbnl-accent) 30%, transparent);
	color: var(--hbnl-accent);
}

.hbnl-review__package {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1rem;
}

.hbnl-review__package-name {
	margin: 0;
	font-weight: 700;
}

.hbnl-review__dot {
	margin: 0 0.35rem;
}

.hbnl-review__addon {
	margin: 0.15rem 0 0;
}

.hbnl-review__edit {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex-shrink: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--hbnl-accent);
	font-weight: 700;
}

.hbnl-review__total {
	margin: 0.85rem 0 0;
	font-weight: 700;
}

.hbnl-review__increase {
	margin: 0.35rem 0 0;
}

.hbnl-review__summary-link {
	margin-top: 1.5rem;
	text-align: center;
}

.hbnl-review__summary-link .hbnl-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.hbnl-review__prepared {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--hbnl-accent);
}

.hbnl-review__confirm {
	margin-top: 2rem;
}

.hbnl-review__terms {
	display: flex;
	gap: 0.75rem;
	max-width: 24rem;
	margin-inline: auto;
	color: var(--hbnl-accent);
}

.hbnl-review__terms .form-check-input {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	border-color: var(--hbnl-accent);
	border-width: 2px;
	border-radius: 0.25rem;
	cursor: pointer;
}

.hbnl-review__terms .form-check-input:checked {
	background-color: var(--hbnl-accent);
	border-color: var(--hbnl-accent);
}

.hbnl-review__terms .form-check-label {
	cursor: pointer;
}

/* ---------------------------------------------------------------------- *
 * Screen 7: confirmation
 * ---------------------------------------------------------------------- */

.hbnl-confirmation {
	max-width: 46rem;
	margin-inline: auto;
}

.hbnl-confirmation__intro {
	margin-bottom: 2.5rem;
	text-align: center;
}

.hbnl-confirmation__tick {
	color: var(--bs-success);
}

.hbnl-confirmation__heading {
	margin: 0.75rem 0 0.5rem;
	color: var(--hbnl-accent);
	font-weight: 700;
}

.hbnl-confirmation__lede {
	max-width: 26rem;
	margin-inline: auto;
	color: var(--hbnl-accent);
	text-wrap: balance;
}

.hbnl-confirmation__panel {
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	border: 1px solid var(--hbnl-accent);
	border-radius: 1rem;
	color: var(--hbnl-accent);
	text-align: center;
}

.hbnl-confirmation__ref-number {
	margin: 0;
	font-weight: 700;
}

.hbnl-confirmation__ref-note {
	margin: 0.15rem 0 0;
}

.hbnl-confirmation__panel-title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hbnl-confirmation__panel-lede {
	max-width: 28rem;
	margin: 0 auto;
	text-wrap: balance;
}

/* The visits are a numbered sequence: the outside work has to come first. */
.hbnl-install__visits {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	text-align: left;
}

.hbnl-install__visit + .hbnl-install__visit {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--hbnl-accent) 20%, transparent);
}

.hbnl-install__visit-head {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.hbnl-install__step {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--hbnl-accent);
	color: var(--hbnl-button-color, #fff);
	font-weight: 700;
	font-size: 0.875rem;
}

.hbnl-install__visit-title {
	margin: 0;
	color: var(--hbnl-accent);
	font-weight: 700;
	font-size: 1rem;
}

.hbnl-install__visit-blurb,
.hbnl-install__gap {
	margin: 0.25rem 0 0;
	color: var(--hbnl-accent);
	font-size: 0.875rem;
}

.hbnl-install__gap {
	opacity: 0.8;
}

.hbnl-install__confirmed {
	margin: 0.75rem 0 0;
	font-weight: 700;
	color: var(--hbnl-accent);
}

.hbnl-install__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
	text-align: left;
}

.hbnl-install__date {
	flex: 1 1 12rem;
}

.hbnl-install__grid {
	flex: 1 1 12rem;
}

.hbnl-install__offered {
	margin-top: 0.75rem;
	padding: 0.9rem 1.25rem;
	border-radius: 0.75rem;
	background: var(--bs-success-bg-subtle);
}

.hbnl-install__offered-title {
	margin: 0;
	font-weight: 700;
	color: var(--hbnl-accent);
}

.hbnl-install__offered-list {
	margin: 0.4rem 0;
	padding-left: 1.1rem;
	color: var(--hbnl-accent);
}

.hbnl-install__offered-note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--hbnl-accent);
}

.hbnl-confirmation__switching {
	margin-top: 2rem;
}

/*
 * One Touch Switching. The form is revealed by a toggle, so it needs clear air
 * above it: opened tight against the toggle's own explanation the two read as
 * one block and the heading gets lost.
 */
.hbnl-switching {
	/*
	 * Padding rather than margin: this sits inside a Bootstrap collapse, and a
	 * top margin on the first child escapes the panel once the transition ends
	 * and overflow is no longer hidden.
	 */
	padding-top: 2rem;
	text-align: left;
}

.hbnl-switching__heading {
	margin-bottom: 0.35rem;
	color: var(--hbnl-accent);
	font-weight: 700;
	font-size: 1.0625rem;
}

.hbnl-switching__lede {
	margin-bottom: 1.25rem;
	color: var(--hbnl-accent);
	font-size: 0.9375rem;
}

.hbnl-switching__field + .hbnl-switching__field {
	margin-top: 0.9rem;
}

.hbnl-switching__help {
	margin: 0.4rem 0 0;
	padding-inline: 1.25rem;
	color: var(--hbnl-accent);
	font-size: 0.8125rem;
}

.hbnl-switching__submit {
	margin-top: 1.5rem;
}

/* Screen actions: back on the left, continue on the right, centred as a pair. */
.hbnl-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 3rem;
}

.hbnl-actions .hbnl-btn {
	min-width: 9rem;
}

.hbnl-btn--ghost {
	background: transparent;
	border: 1px solid var(--hbnl-accent);
	color: var(--hbnl-accent);
}

.hbnl-btn--ghost:hover,
.hbnl-btn--ghost:focus-visible {
	background: transparent;
	color: var(--hbnl-accent);
}

.hbnl-checkout__steps ol {
	counter-reset: hbnl-step;
}

.hbnl-checkout__step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-pill);
	color: var(--bs-secondary-color);
}

.hbnl-checkout__step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--bs-secondary-bg);
	font-size: 0.85rem;
	font-weight: 600;
}

.hbnl-checkout__step.is-current {
	border-color: var(--bs-primary);
	color: var(--bs-body-color);
	font-weight: 600;
}

.hbnl-checkout__step.is-current .hbnl-checkout__step-number {
	background: var(--bs-primary);
	color: var(--bs-white);
}

/* Done steps carry a tick as well as the colour change. */
.hbnl-checkout__step.is-done .hbnl-checkout__step-number {
	position: relative;
	color: transparent;
	background: var(--bs-success);
}

.hbnl-checkout__step.is-done .hbnl-checkout__step-number::after {
	content: "\2713";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bs-white);
}

.hbnl-checkout__loading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0;
}

.hbnl-checkout__summary {
	top: 1rem;
}

@media (max-width: 991.98px) {
	.hbnl-checkout__summary {
		position: sticky;
		bottom: 0;
		top: auto;
		z-index: 5;
		background: var(--bs-body-bg);
	}
}

.hbnl-package__badge {
	font-weight: 600;
}

.hbnl-package__price-now {
	font-weight: 700;
}

.hbnl-package__includes li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.15rem 0;
}

.hbnl-basket__discount {
	color: var(--bs-success-text-emphasis);
}

.hbnl-address-list .btn-link {
	color: var(--bs-body-color);
}

.hbnl-address-list .btn-link:hover,
.hbnl-address-list .btn-link:focus {
	background: var(--bs-tertiary-bg);
}

.hbnl-contract-frame {
	width: 100%;
	min-height: 60vh;
	border: 0;
}

/* Windows grouped under the day they fall on, since only a few days qualify. */
.hbnl-slots {
	margin-top: 1rem;
	border: 0;
	padding: 0;
}

.hbnl-slots__legend {
	float: none;
	width: auto;
	margin-bottom: 0.75rem;
	color: var(--hbnl-accent);
	font-weight: 700;
	font-size: 0.9375rem;
}

.hbnl-slots__day + .hbnl-slots__day {
	margin-top: 0.9rem;
}

.hbnl-slots__date {
	margin: 0 0 0.35rem;
	color: var(--hbnl-accent);
	font-weight: 700;
	font-size: 0.875rem;
}

.hbnl-slots__windows {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hbnl-slots__window {
	min-width: 10rem;
	border-radius: var(--hbnl-radius);
}

/* ---------------------------------------------------------------------- *
 * Screen 2: register interest
 * ---------------------------------------------------------------------- */

.hbnl-interest {
	max-width: 42rem;
	margin-inline: auto;
}

.hbnl-interest__heading {
	color: var(--hbnl-accent);
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.hbnl-interest__subheading {
	color: var(--hbnl-accent);
	font-weight: 700;
	font-size: 1.0625rem;
	margin-bottom: 1.75rem;
}

.hbnl-interest__field + .hbnl-interest__field {
	margin-top: 0.9rem;
}

/* The textarea keeps a corner radius rather than the field pill. */
.hbnl-interest__notes {
	border-radius: 1.5rem;
	min-height: 9rem;
	padding-block: 0.9rem;
	resize: vertical;
}

.hbnl-interest__group {
	margin-top: 1.75rem;
	border: 0;
	padding: 0;
}

.hbnl-interest__legend {
	float: none;
	width: auto;
	margin-bottom: 0.5rem;
	color: var(--hbnl-accent);
	font-weight: 700;
	font-size: 1rem;
}

/* Square checkboxes with the brand keyline, per the design. */
.hbnl-check .form-check-input {
	border-radius: 0.25rem;
	border-color: var(--hbnl-accent);
	border-width: 1.5px;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.2rem;
	cursor: pointer;
}

.hbnl-check .form-check-input:checked {
	background-color: var(--hbnl-accent);
	border-color: var(--hbnl-accent);
}

.hbnl-check .form-check-label {
	color: var(--hbnl-accent);
	cursor: pointer;
	padding-left: 0.35rem;
}

/* Switch on the left, its label to the right of it. */
.hbnl-interest__toggle {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0;
}

.hbnl-interest__toggle-label {
	color: var(--hbnl-accent);
	cursor: pointer;
	margin: 0;
}

/*
 * The design indents the consent block towards the centre rather than aligning
 * it with the fields, and holds it there on narrow screens by dropping to a
 * proportional inset once the fixed one would crowd the text.
 */
.hbnl-interest__consent {
	margin: 1.5rem 0 1.75rem;
	padding-left: min(11rem, 20%);
	max-width: 34rem;
	font-size: 0.875rem;
	line-height: 1.35;
}

.hbnl-interest__consent .form-check-input {
	margin-left: -1.5rem;
}

/* The confirmation replaces the form, so it sets its own vertical rhythm. */
.hbnl-interest__done {
	padding-block: 1rem 3rem;
}

.hbnl-interest__done-heading {
	color: var(--hbnl-accent);
	font-weight: 700;
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	line-height: 1.05;
	max-width: 12ch;
	margin-bottom: 1rem;
}

.hbnl-interest__done-copy {
	color: var(--hbnl-accent);
	font-weight: 700;
	font-size: 1.0625rem;
	max-width: 26rem;
	margin: 0;
}