/**
 * Checkout styles.
 *
 * Bootstrap does the work; this is the small amount it doesn't cover. The theme
 * builds Bootstrap 5.1, so anything referenced here is either in that version
 * or carries a fallback. The five without one — --bs-body-bg, --bs-body-color,
 * --bs-primary, --bs-success and --bs-white — are all emitted by 5.1's :root.
 *
 * Colour is never the only signal for validation state or for telling packages
 * apart.
 */

/**
 * Brand surface.
 *
 * Everything here resolves through the theme's Bootstrap variables, so the
 * funnel takes the brand from one place and nothing hardcodes a hex.
 *
 * The mapping is not the obvious one. In the Highland Broadband palette
 * `$primary` is the mint (#a6e0c9) used for buttons, and `$secondary` is the
 * plum (#871555) used for headings, keylines and body copy on these screens.
 * So the accent is --bs-secondary, not --bs-primary.
 *
 * Buttons are not styled here at all. They are .btn-primary and
 * .btn-outline-secondary, which the theme builds from its own button
 * variables, so the funnel's buttons change when the site's buttons do.
 *
 * Fallbacks are given throughout because the theme builds Bootstrap 5.1, which
 * has no --bs-secondary-bg or --bs-body-bg. Those arrived in 5.3.
 */
.hbnl-block {
	--hbnl-accent: var(--bs-secondary, #871555);
	--hbnl-surface: var(--bs-body-bg, #fff);
	--hbnl-track: var(--bs-gray-200, #ebebeb);
	--hbnl-radius: 2rem;
	/*
	 * The selection colour: the tick, the "Selected" label and the card tint.
	 * Its own value rather than the accent, because the border carries product
	 * identity and selection has to stay legible against any of those colours.
	 * The palette's accessible green, which is the one approved for small text.
	 */
	--hbnl-selected: var(--bs-success, #1e7f5c);
}

/* The availability checker 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);
	font-size: 1rem; /* 16px */
	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, #53575a);
}

/* Pill field, per the design. Font size and padding are not set here: they come
   from the theme's $input-font-size and $input-padding-x/y, the same way buttons
   take their sizing from the theme's button variables, so a field in the funnel
   matches a field anywhere else on the site and moves when that does. Only the
   radius and the keyline colour are funnel-specific. */
.hbnl-field {
	border-radius: var(--hbnl-radius);
	border-color: var(--hbnl-accent);
}

.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;
}

/*
 * Every step is labelled, including the ones ahead: the bar is there to say
 * what the journey is, which it cannot do while most of it is blank. Colour
 * carries where you are instead, so a step ahead reads as grey rather than as
 * missing.
 */
.hbnl-progress__label {
	font-size: 0.8125rem;
	color: var(--bs-secondary-color, #53575a);
}

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

/* 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;
	font-size: 0.875rem; /* 14px */
	text-align: left;
	color: var(--hbnl-accent);
}

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

.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;
	}
}

/* ---------------------------------------------------------------------- *
 * Pick your package: packages
 * ---------------------------------------------------------------------- */

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

.hbnl-packages__notice,
.hbnl-packages__success {
	display: flex;
	align-items: center;
	/* Centred under the heading rather than sitting out on the left of a box
	   that is wider than the sentence in it. */
	justify-content: center;
	gap: 0.6rem;
	max-width: 44rem;
	padding: 0.9rem 1.25rem;
	margin-inline: auto;
	margin-bottom: 2rem;
	border-radius: 0.75rem;
	background: var(--bs-success-bg-subtle, #e8f5ef);
	color: var(--hbnl-accent);
	font-size: 0.875rem; /* 14px */
	text-align: center;
}

/*
 * The tick is green while the wording stays plum. Same token as the selection
 * tick on a package card, which is the palette's accessible green rather than
 * the mint: the mint is a button fill and disappears against this background.
 */
.hbnl-packages__success .hbnl-icon {
	color: var(--hbnl-selected);
}

/* 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-size: 1rem; /* 16px */
	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;
	/*
	 * No height: 100%. That stretched every card in a row to the tallest, so
	 * opening one card's "What's included" grew the whole row. The cards are
	 * levelled with a min-height instead, set by equalisePackages() in
	 * checkout.js from their collapsed heights.
	 */
	padding: 2rem 1.25rem 1.25rem;
	border: 4px solid var(--hbnl-package-accent);
	border-radius: 1.75rem;
	text-align: center;
}

/*
 * Per-product border colours, keyed on the Praxis SKU.
 *
 * In the stylesheet rather than the package content posts, because these are
 * brand identity rather than copy the client edits: here they version control
 * and travel with a deploy, where content meta has to be re-entered per
 * environment. A _hbnl_accent value on the content post still wins, since it
 * lands as an inline custom property.
 *
 * Only the products the brand has settled on carry one. Everything else keeps
 * the default, which reads as "not decided yet" rather than as a choice.
 */
.hbnl-package[data-hbnl-product-number="RES-ESS-000"] {
	--hbnl-package-accent: #871555;
}

.hbnl-package[data-hbnl-product-number="RES-EVE-001"] {
	--hbnl-package-accent: #4da584;
}

.hbnl-package[data-hbnl-product-number="RES-FAM-003"] {
	--hbnl-package-accent: #d79a2b;
}

.hbnl-package[data-hbnl-product-number="RES-ULT-005"] {
	--hbnl-package-accent: #3d7cc9;
}

/*
 * 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;
}

/*
 * Selection never touches the border.
 *
 * The design gives each product its own border colour, so the border says which
 * product this is and nothing else. Recolouring it on selection would overwrite
 * that identity the moment the palette lands, and while every card shares one
 * colour it says nothing at all: --hbnl-selected resolved to the same value the
 * border already had, which left the drop shadow carrying the state by itself.
 *
 * So selection owns the tick, the label and the fill. A tick and the word
 * "Selected" also mean colour is never the only signal, which a shadow alone
 * did not satisfy.
 */
.hbnl-package.is-selected {
	background: color-mix(in srgb, var(--hbnl-selected) 8%, transparent);
	box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.14);
}

/*
 * Out of the flow entirely, so appearing and disappearing moves nothing. Top
 * right clears the "Most popular" badge, which is centred on the top border.
 *
 * One selection colour on every card, rather than each product's own. Eight
 * products in eight colours would make "selected" look different every time,
 * and the point of the signal is that it reads the same wherever you meet it.
 */
.hbnl-package__tick {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--hbnl-selected);
	color: var(--bs-white);
	pointer-events: none;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.hbnl-package.is-selected .hbnl-package__tick {
	opacity: 1;
	transform: scale(1);
}

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

/*
 * 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: 2.375rem; /* 38px */
	font-weight: 700;
	line-height: 1.1;
}

/*
 * The speed on its own line. Three of the four names wrap there anyway because
 * they are too wide for the card; this puts the short one on the same two lines
 * rather than leaving Family 1000 a line shorter than its neighbours.
 */
.hbnl-package__speed {
	display: block;
}

.hbnl-package__tagline {
	margin-bottom: 1.5rem;
	color: var(--hbnl-accent);
	font-size: 1rem; /* 16px */
}

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

.hbnl-package__was {
	margin-bottom: 0;
	color: var(--hbnl-accent);
	font-size: 0.875rem; /* 14px */
	font-weight: 700;
	text-decoration: line-through;
}

.hbnl-package__price {
	margin-bottom: 0.25rem;
	color: var(--hbnl-accent);
	font-size: 1.625rem; /* 26px */
	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;
}

/*
 * Pinned to the bottom of the card, with the divider, so a gift pill on one card
 * doesn't push its "What's included" below the others'. The cards are levelled
 * to one height by equalisePackages(), and the label's margin keeps the gap when
 * the card is at its tallest.
 */
.hbnl-package__select {
	margin-bottom: 1.25rem;
}

.hbnl-package__disclosure {
	margin-top: auto;
	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-size: 1rem; /* 16px */
	font-weight: 400;
	text-align: left;
}

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

/* ---------------------------------------------------------------------- *
 * Pick your add-ons: 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;
}

/*
 * Included with the package, so it is not a choice. Faded to say so, and last in
 * the list, which leaves the ones that can be bought at the top of the page.
 *
 * The fade stops short of the line that explains why it is locked: a greyed-out
 * control on its own says only that it cannot be used, never that the package
 * already pays for it.
 */
.hbnl-addon--included {
	opacity: 0.55;
}

.hbnl-addon--included .hbnl-addon__included {
	opacity: 1;
}

.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-size: 1rem; /* 16px */
	font-weight: 700;
}

.hbnl-addon__meta {
	margin: 0.15rem 0 0;
	color: var(--hbnl-accent);
	font-size: 0.875rem; /* 14px */
}

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

/*
 * The struck price is context for "Included", not a number to read, so it sits
 * back. The green is the palette's accessible one, the same as the selection
 * tick, and it is never the only signal: the word carries the meaning.
 */
.hbnl-addon__was {
	margin-right: 0.4rem;
	opacity: 0.6;
}

.hbnl-addon__included {
	color: var(--hbnl-selected);
}

.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);
}

/*
 * A button inherits the page's font size, not the card's, so Details came out
 * at the theme's 19px against the 16px name directly above it. Set to match the
 * name. The basket toggle sets its own, with the rest of its bar.
 */
.hbnl-addon__details {
	font-size: 1rem; /* 16px */
}

.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);
}

/*
 * Set to the card's scale rather than the page's. With the editor's own font
 * taken off in EditorHtml, this text falls back to the page size, which is a
 * reading size for an article and too big inside a card whose name is 16px.
 */
.hbnl-addon__panel {
	padding-bottom: 1rem;
	color: var(--hbnl-accent);
	font-size: 0.875rem; /* 14px, the same as the price line above it */
}

.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.
 *
 * Emily's basket design (HBNL, Trello 96, October 2026): a dark pink bar with
 * white type, 16px in from the edges, on 8px corners. The design fills the open
 * panel pink too; HBNL asked for the body to stay white with plum text, so it
 * keeps a pink keyline instead and the bar and body read as one panel. Clipped,
 * so the bar takes the corners.
 */
.hbnl-basket {
	padding: 0;
	overflow: hidden;
	border: 1px solid #b32572;
	border-radius: 0.5rem;
}

.hbnl-basket .hbnl-basket__toggle {
	padding: 1rem;
	font-size: 0.875rem; /* 14px, the design's, rather than the page's 19px */
	line-height: 1;
	background: #b32572;
	color: #fff;
}

.hbnl-basket__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

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

.hbnl-basket__title {
	font-weight: 700;
	text-transform: uppercase;
}

.hbnl-basket__body {
	padding: 0 1rem 1rem;
	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;
}

/* ---------------------------------------------------------------------- *
 * Your details: 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-size: 1.125rem; /* 18px */
	font-weight: 700;
}

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

/*
 * A field with an information button inside its right-hand end. The input
 * keeps room for it, and Bootstrap's valid and invalid icons move along so
 * the two never overlap.
 */
.hbnl-tip-field {
	position: relative;
}

.hbnl-tip-field .form-control {
	padding-right: 2.75rem;
}

.was-validated .hbnl-tip-field .form-control:valid,
.was-validated .hbnl-tip-field .form-control:invalid,
.hbnl-tip-field .form-control.is-invalid {
	padding-right: calc(1.5em + 3rem);
	background-position: right 2.6rem center;
}

.hbnl-tip__button {
	position: absolute;
	top: 0;
	right: 0.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: var(--hbnl-tip-field-height, calc(1.5em + 0.75rem + 2px));
	padding: 0;
	border: 0;
	background: none;
	color: var(--hbnl-accent);
}

.hbnl-tip__bubble {
	position: absolute;
	z-index: 5;
	top: calc(var(--hbnl-tip-field-height, calc(1.5em + 0.75rem + 2px)) + 0.4rem);
	right: 0;
	display: none;
	width: min(20rem, 100%);
	margin: 0;
	padding: 0.65rem 0.85rem;
	border-radius: 0.75rem;
	background: var(--hbnl-accent);
	color: #fff;
	font-size: 0.875rem;
	line-height: 1.4;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

/* The arrow, under the button. */
.hbnl-tip__bubble::before {
	content: "";
	position: absolute;
	top: -0.4rem;
	right: 1.1rem;
	border: 0.4rem solid transparent;
	border-top: 0;
	border-bottom-color: var(--hbnl-accent);
}

.hbnl-tip__button:focus-visible + .hbnl-tip__bubble,
.hbnl-tip-field.is-tip-open .hbnl-tip__bubble {
	display: block;
}

/* Only where hover is real: a tap leaves it stuck on, so a second tap could not close the tip. */
@media (hover: hover) {
	.hbnl-tip__button:hover + .hbnl-tip__bubble {
		display: block;
	}
}

/*
 * The "did you mean" prompt under the email field. Quiet on purpose: it is a
 * question, not a failure, and the address it is asking about is valid.
 */
.hbnl-details__suggestion {
	margin: 0.4rem 0 0;
	padding-left: 1.25rem;
	color: var(--hbnl-accent);
	font-size: 0.875rem;
}

.hbnl-details__suggestion-button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/*
 * Direct debit is a note about what happens next, not a choice. Keeps the boxed
 * treatment the toggle had, so it still reads as its own thing on the screen.
 */
.hbnl-details__notice-inline {
	padding: 1rem 1.25rem;
	margin: 1.5rem 0 2rem;
	border: 2px solid var(--hbnl-accent);
	border-radius: 1rem;
}

/*
 * An h3, so it inherits the theme's 52px heading line-height and sits in a line
 * box three times the height of its own 16px text. Setting the size without the
 * line-height leaves that leading in place, which reads as a gap above the
 * title rather than as the panel's padding.
 */
.hbnl-details__notice-title {
	margin: 0 0 0.25rem;
	color: var(--hbnl-accent);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
}

.hbnl-details__notice-copy {
	margin: 0;
	color: var(--hbnl-accent);
	font-size: 0.9375rem;
}

/*
 * The remaining questions put the switch first, then the label and details.
 *
 * The top margin separates them from the fields above. It used to come from the
 * direct debit panel that sat between the two, so when that panel is switched
 * off the questions ran straight into the last input.
 */
.hbnl-details__toggles {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 2rem;
}

/*
 * Marketing consent is a group of its own, so gap does not reach across to it.
 * Matching the gap here keeps the run of toggles evenly spaced whether or not
 * they happen to sit in the same container.
 */
.hbnl-details__toggles + .hbnl-details__toggles {
	margin-top: 1rem;
}

/*
 * The same 2.5rem the toggles use to separate themselves from what is above.
 * Bootstrap's .alert only carries a bottom margin, so without this the error
 * sits tight against the last toggle's explanatory line.
 */
.hbnl-details__error {
	margin-top: 2.5rem;
}

/* The size of the Find out more text above it (Trello 158). Bootstrap's .small
   was relative to a larger parent, so it came out bigger. */
.hbnl-details__consent {
	margin: 2rem 0 0;
	font-size: 0.875rem;
}

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

/*
 * The checkbox is the only child, and the row is already a flex layout, so
 * Bootstrap's own indent for the control would push it away from the label.
 */
.hbnl-toggle-row .form-check {
	flex: 0 0 auto;
	min-height: auto;
	padding-left: 0;
	margin-bottom: 0;
}

.hbnl-toggle-row__label {
	display: block;
	color: var(--hbnl-accent);
	font-size: 1.125rem; /* 18px */
	font-weight: 700;
	cursor: pointer;
}

/*
 * The Details control. Small and quiet: it is a way in to the explanation, not
 * a thing to do, so it carries no button chrome.
 */
.hbnl-toggle-row__disclosure {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0;
	margin-top: 0.1rem;
	border: 0;
	background: none;
	color: var(--hbnl-accent);
	font-size: 0.875rem;
	line-height: 1.4;
	cursor: pointer;
}

.hbnl-toggle-row__disclosure:hover,
.hbnl-toggle-row__disclosure:focus-visible {
	text-decoration: underline;
}

.hbnl-toggle-row__chevron {
	flex: 0 0 auto;
	/*
	 * Nudged down to sit on the middle of the word rather than the middle of the
	 * line box, which the chevron's own viewBox puts it above. Margin rather than
	 * a translate, because the expanded state already owns transform.
	 */
	margin-top: 2px;
	transition: transform 0.2s ease;
}

/*
 * Bootstrap sets aria-expanded on the control, so the arrow can follow the
 * panel without any JavaScript of our own.
 */
.hbnl-toggle-row__disclosure[aria-expanded="true"] .hbnl-toggle-row__chevron {
	transform: rotate(180deg);
}

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

/*
 * The message box that used to sit here said the same thing as the line of copy
 * directly above it, so the row now marks itself the way the text fields do: an
 * asterisk always, and the exclamation once the customer has tried to continue.
 */
.hbnl-toggle-row__required {
	font-weight: inherit;
}

/*
 * Bootstrap's own invalid icon, lifted so the mark is identical to the one
 * inside an empty required field. It cannot be Bootstrap's rule itself: that
 * paints the icon as a background on the control, and this control is a
 * checkbox in the row's other column, with nowhere to put it.
 */
.hbnl-toggle-row__label::after {
	content: "";
	display: none;
	width: 1.1em;
	height: 1.1em;
	margin-left: 0.4rem;
	vertical-align: -0.18em;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23b32572'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23b32572' stroke='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * Only after the customer has tried to continue, so an untouched form does not
 * open with a complaint about something they have not reached yet. The row
 * watches its own checkbox with :has(), because Bootstrap's sibling selector
 * cannot reach across from the control's column into this one.
 */
.was-validated .hbnl-toggle-row:has( .form-check-input:invalid ) .hbnl-toggle-row__label::after {
	display: inline-block;
}

/*
 * Indented under the question it belongs to, so it reads as part of that row
 * rather than as a fourth toggle in the list.
 */
.hbnl-toggle-row__follow-up {
	padding-left: 1rem;
	margin-top: 0.75rem;
}

.hbnl-toggle-row__follow-up-label {
	color: var(--hbnl-accent);
	font-weight: 700;
	cursor: pointer;
}

.hbnl-toggle-row__follow-up .hbnl-toggle-row__panel {
	margin-left: 1.5rem;
}

/*
 * The agreement page. A document to read rather than a screen to use, so it gets
 * a reading measure and nothing else competing with it.
 */
/*
 * The voice safeguarding questions, inside the add-on they belong to. Set apart
 * with a rule rather than a box, so they read as part of choosing Calls rather
 * than as a warning about it.
 *
 * The rule is the one already on .hbnl-addon__main. A border-top here as well
 * drew a second line a few pixels under the first.
 */
.hbnl-addon__safeguarding {
	padding-top: 0.85rem;
}

/*
 * .hbnl-addon has no bottom padding, because what normally ends a card is the
 * details button or its panel, each carrying its own. A voice add-on with
 * neither ended flush against the border.
 */
.hbnl-addon__safeguarding:last-child {
	padding-bottom: 1rem;
}

.hbnl-addon__safeguarding-lede {
	margin-bottom: 0.6rem;
	color: var(--hbnl-accent);
	font-size: 0.875rem;
	font-weight: 700;
}

.hbnl-addon__safeguarding-option {
	margin-bottom: 0.4rem;
}

.hbnl-addon__safeguarding-option:last-child {
	margin-bottom: 0;
}

.hbnl-addon__safeguarding-intro {
	margin: 0 0 0.9rem;
	color: var(--hbnl-accent);
	font-size: 0.875rem;
}

/*
 * A question that follows another's options gets the same gap above it, so
 * each reads as its own group. The power-cut question sits in its own wrapper,
 * so the question after it is spaced from the wrapper whether it shows or not.
 */
.hbnl-addon__safeguarding-option + .hbnl-addon__safeguarding-lede,
.hbnl-addon__safeguarding-step + .hbnl-addon__safeguarding-lede,
.hbnl-addon__safeguarding-step {
	margin-top: 1.25rem;
}

.hbnl-addon__safeguarding-option .form-check-label {
	color: var(--hbnl-accent);
	font-size: 0.875rem;
	cursor: pointer;
}

/* Keeping a number: the porting fields under the number question. */
.hbnl-addon__port {
	margin-top: 0.9rem;
}

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

.hbnl-agreement {
	padding-block: 3rem;
}

/*
 * Debug mode's box under an error. Deliberately off-brand yellow, so nobody
 * mistakes it for part of the design, and monospaced so codes and ids can be
 * copied exactly.
 */
.hbnl-debug {
	margin: 0.75rem 0 1rem;
	padding: 0.75rem 1rem;
	border: 2px dashed #b38600;
	border-radius: 0.5rem;
	background: #fff3b0;
	color: #3d2e00;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	text-align: left;
}

.hbnl-debug__title {
	margin: 0 0 0.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.hbnl-debug dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
	margin: 0;
}

.hbnl-debug dt {
	font-weight: 700;
}

.hbnl-debug dd {
	margin: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
	.hbnl-debug dl {
		grid-template-columns: 1fr;
	}

	.hbnl-debug dd {
		margin-bottom: 0.4rem;
	}
}

.hbnl-agreement__head,
.hbnl-agreement__missing,
.hbnl-agreement__document {
	max-width: 46rem;
	margin-inline: auto;
}

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

.hbnl-agreement__reference,
.hbnl-agreement__accepted {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
}

.hbnl-agreement__missing {
	color: var(--hbnl-accent);
	text-align: center;
}

/*
 * The document brings its own markup from Dynamics, so this only gives it room
 * to breathe and stops a wide table forcing the page sideways.
 */
.hbnl-agreement__document {
	overflow-x: auto;
}

.hbnl-agreement__document table {
	width: 100%;
}

/* The thank-you page with nothing behind it. */
.hbnl-no-order {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.hbnl-no-order__heading {
	margin-bottom: 0.75rem;
	color: var(--hbnl-accent);
	font-weight: 700;
}

.hbnl-no-order__body {
	margin-bottom: 1.5rem;
	color: var(--hbnl-accent);
	font-size: 0.875rem;
}

/* 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);
}

/*
 * An included accessory's switch. Bootstrap fades a disabled control to half
 * opacity, which here reads as broken rather than settled: it is on, it is
 * staying on, and it is not greyed out for want of something. Full colour, no
 * pointer, and the "Included with ..." line beside it does the explaining.
 */
.hbnl-switch .form-check-input:disabled {
	opacity: 1;
	cursor: default;
}

/* ---------------------------------------------------------------------- *
 * Review your order: 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__notice {
	margin-bottom: 1rem;
}

/*
 * The basket body, the line list and the total all come from .hbnl-basket. The
 * Edit control and the price increase note began on this screen and are named
 * for it, but the basket on every earlier step uses them too (Trello 96).
 */
.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);
	/* Sized to the 14px pencil beside it, which 1rem text dwarfed. */
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
}

.hbnl-review__increase {
	margin: 0.35rem 0 0;
	color: var(--hbnl-accent);
}

/*
 * Above the lines rather than under the total. Itemising the basket pushed the
 * only way back to the packages screen below the price-increase note, where
 * nobody found it. Each line already carries its own price on the right, so
 * Edit sits over the list rather than inside the first row.
 */
.hbnl-review__basket-actions {
	/* Clear of the header bar, matching the lines list underneath. */
	margin: 0.75rem 0 0;
	text-align: right;
}

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

.hbnl-review__summary-link .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);
}

/* Boxed like the basket above it, so the two read as sibling panels. */
.hbnl-dd {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--hbnl-accent);
	border-radius: 1rem;
	color: var(--hbnl-accent);
}

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

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

.hbnl-dd__done {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-weight: 600;
}

/*
 * The callback's thank-you sits inside the not-set-up message, which is in the
 * error colour. A request that went through is not an error, so it takes the
 * page's own colour, set like the "Set up" line.
 */
.hbnl-dd__callback-sent {
	color: var(--bs-body-color);
	font-weight: 600;
}

/* Under the box now, not inside it (HBNL, Trello 127), so it sets its own gap. */
.hbnl-dd-step__needed .hbnl-dd__needed {
	margin-top: 1rem;
}

/* Clear of the button above it; the box's own padding closes the bottom. */
.hbnl-dd__field {
	margin-top: 1.25rem;
}

.hbnl-dd__label {
	margin-bottom: 0.4rem;
	font-weight: 600;
}

.hbnl-dd__fallback {
	margin: 0.75rem 0 0;
}

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

/*
 * Wide enough to sit under the "Prepared ..." line rather than wrapping to a
 * narrower column than the copy above it.
 */
/*
 * A grid rather than a flex row, so the validation message has somewhere to go.
 * It is a sibling of the checkbox, which is what Bootstrap's ~ .invalid-feedback
 * selector needs, and as a flex item it landed beside the label. Two columns
 * puts the box in the first and everything else in the second, so the message
 * drops under the label and lines up with it.
 */
.hbnl-review__terms {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.75rem;
	max-width: 32rem;
	margin-inline: auto;
	color: var(--hbnl-accent);
	font-size: 0.875rem; /* 14px */
	line-height: 1.25rem;
}

.hbnl-review__terms .form-check-label,
.hbnl-review__terms .invalid-feedback {
	grid-column: 2;
}

/*
 * Plain text under the control, as Your details shows a missing field, so the
 * terms message and the Direct Debit one read as the same thing. It was a
 * keyline box until 8 October 2026, which no other screen used.
 */
.hbnl-review__terms .invalid-feedback {
	margin-top: 0.5rem;
}

/*
 * The box is 1.25rem and so is the label's line height, so with no offset the
 * two line up: the first line of text sits level with the box rather than
 * riding above or below it. Kept as top alignment so a label that wraps still
 * starts beside the box.
 */
.hbnl-review__terms .form-check-input {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: 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;
}

/* ---------------------------------------------------------------------- *
 * You're all set: confirmation
 * ---------------------------------------------------------------------- */

/* 52rem holds "Thanks for placing your order" on one line at the h3 size
   (Trello 162). */
.hbnl-confirmation {
	max-width: 52rem;
	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;
}

/* The full width of the panels below, so its edges line up with their
   outlines (Trello 162). */
.hbnl-confirmation__lede {
	color: var(--hbnl-accent);
	text-wrap: pretty;
}

.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;
}

/*
 * Book Your Install reads as a paragraph of instructions, so it is left aligned
 * and runs the width of the box (HBNL, October 2026). Centred at 28rem it left a
 * wide margin of empty box either side of the text.
 */
.hbnl-install {
	text-align: left;
}

.hbnl-install .hbnl-confirmation__panel-lede {
	max-width: none;
	text-wrap: pretty;
}

/* The voucher copy is paragraphs written under Checkout copy. */
.hbnl-confirmation__panel-copy > :last-child {
	margin-bottom: 0;
}

.hbnl-confirmation__panel-copy a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* The welcome call box, at the foot of the confirmation. */
/* The width of the box, like the order reference above it (Trello 164). */
.hbnl-confirmation__welcome .hbnl-confirmation__panel-lede {
	max-width: none;
	margin-bottom: 1rem;
	text-wrap: pretty;
}

/* 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-surface);
	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__offered {
	margin-top: 0.75rem;
	padding: 0.9rem 1.25rem;
	border-radius: 0.75rem;
	background: var(--bs-success-bg-subtle, #e8f5ef);
}

.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);
}

/*
 * Carries .hbnl-confirmation__panel for the border and radius, and overrides
 * the centring that comes with it: the toggle is a switch beside its label, so
 * centred text would sit oddly against the switch on the left.
 */
.hbnl-confirmation__switching {
	margin-top: 2rem;
	text-align: left;
}

/*
 * 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;
}

/*
 * The provider picker's list. Drops over the fields below rather than pushing
 * them down, and scrolls: the full list is about 350 names.
 */
.hbnl-combobox {
	position: relative;
}

.hbnl-combobox__list {
	position: absolute;
	top: calc(100% + 0.25rem);
	right: 0;
	left: 0;
	z-index: 20;
	max-height: 16rem;
	margin: 0;
	padding: 0.35rem 0;
	overflow-y: auto;
	border: 1px solid var(--hbnl-accent);
	border-radius: 1rem;
	background: var(--bs-body-bg, #fff);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
	list-style: none;
	text-align: left;
}

.hbnl-combobox__option,
.hbnl-combobox__empty {
	padding: 0.45rem 1.25rem;
	color: var(--hbnl-accent);
	font-size: 0.9375rem;
}

.hbnl-combobox__option {
	cursor: pointer;
}

.hbnl-combobox__option:hover,
.hbnl-combobox__option.is-active {
	background: color-mix(in srgb, var(--hbnl-accent) 10%, transparent);
}

.hbnl-combobox__empty {
	font-style: italic;
}

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

/* Early Termination Charges, under Start my switch. */
.hbnl-switching__note {
	margin-top: 1rem;
	color: var(--hbnl-accent);
	font-size: 0.8125rem;
}

.hbnl-switching__note > :last-child {
	margin-bottom: 0;
}

.hbnl-switching__status > :last-child {
	margin-bottom: 0;
}

.hbnl-switching__note a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

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

/* Screen actions: back on the left, continue on the right, centred as a pair. */
/*
 * Sits between the cards and Continue, narrow enough to read as one more thing
 * to fill in rather than another band across the page.
 */
/*
 * Editor-written note under the package list. Tinted rather than outlined, so
 * it reads as an aside to the cards above it and not as another thing to pick.
 * The content is whatever they type, so the spacing is set on the children it
 * can contain rather than on the box.
 */
.hbnl-packages__note {
	margin: 2.5rem auto 0;
	max-width: 44rem;
	padding: 1.25rem 1.5rem;
	border-radius: 1.5rem;
	background: color-mix(in srgb, var(--hbnl-accent) 8%, var(--hbnl-surface));
	color: var(--hbnl-accent);
}

.hbnl-packages__note > :first-child {
	margin-top: 0;
}

.hbnl-packages__note > :last-child {
	margin-bottom: 0;
}

/* Underlined, since the box already carries the brand colour and colour alone
   would be the only thing marking a link inside it. */
.hbnl-packages__note a,
.hbnl-packages__note a:hover,
.hbnl-packages__note a:focus {
	color: inherit;
	text-decoration: underline;
}

/* Under Continue, for someone who would rather ask first. Plain text, quieter
   than the note box, and two steps down from body copy (the theme's Body MD)
   at HBNL's request. */
.hbnl-packages__not-ready {
	margin: 2rem auto 0;
	max-width: 44rem;
	font-size: 1rem; /* 16px */
	line-height: 1.5;
	text-align: center;
	color: var(--hbnl-accent);
}

.hbnl-packages__not-ready > :last-child {
	margin-bottom: 0;
}

.hbnl-packages__not-ready a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* Above the term switch while a shorter term is selected. */
.hbnl-packages__term-callout {
	margin: 0 auto 0.75rem;
	text-align: center;
	font-weight: 700;
	color: var(--hbnl-accent);
}

/* The note supplies the gap above whatever follows it. */
.hbnl-packages__note + .hbnl-packages__promo,
.hbnl-packages__note + .hbnl-actions {
	margin-top: 1.5rem;
}

.hbnl-packages__promo {
	max-width: 30rem;
	margin: 3rem auto 0;
	text-align: center;
}

.hbnl-packages__promo-lede {
	margin-bottom: 0.75rem;
	color: var(--hbnl-accent);
	font-size: 0.875rem; /* 14px */
}

.hbnl-packages__promo-field {
	text-align: center;
}

/* The promo block already supplies the gap above Continue. */
.hbnl-packages__promo + .hbnl-actions {
	margin-top: 1.5rem;
}

.hbnl-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 3rem;
}

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

.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, #dee2e6);
	border-radius: var(--bs-border-radius-pill, 50rem);
	color: var(--bs-secondary-color, #53575a);
}

.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, #ebebeb);
	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);
}

/* Centred, like everything else on these screens. */
.hbnl-checkout__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 0;
	color: var(--hbnl-accent);
}

.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,
.hbnl-basket__free,
.hbnl-basket__credit {
	color: var(--bs-success-text-emphasis, #1e7f5c);
}

/* ---------------------------------------------------------------------- *
 * Leaving part-way through
 * ---------------------------------------------------------------------- */

/*
 * White, because the theme's modals are not. It sets $modal-content-bg to
 * $gray-800, so .modal-content lands on #474a4d and this dialog came out dark
 * grey with plum text on it. Taken from the funnel's own surface variable
 * rather than hardcoded, so it follows the site the way the rest of the plugin
 * does.
 */
.hbnl-exit__content {
	background: var(--hbnl-surface, #fff);
	border: 0;
	border-radius: 1rem;
}

/* No title in the header, so it exists only to place the close button. */
.hbnl-exit__header {
	border-bottom: 0;
	padding-bottom: 0;
}

/*
 * The theme squares off every .btn-close, which left a hard-cornered mint block
 * against a rounded dialog. Rounded here only, so nothing else on the site
 * moves.
 */
.hbnl-exit .btn-close {
	border-radius: 0.5rem;
}

.hbnl-exit__body {
	padding: 0 2rem 2.5rem;
	text-align: center;
}

.hbnl-exit__heading {
	color: var(--hbnl-accent);
	font-size: 1.5rem; /* 24px */
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.hbnl-exit__lede {
	color: var(--hbnl-accent);
	font-size: 1rem; /* 16px */
	margin-bottom: 1.5rem;
}

/*
 * Side by side where there is room, stacked on a narrow screen. The offer comes
 * first in the markup, so on a phone it is the one under the thumb.
 */
.hbnl-exit__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.hbnl-exit__actions .btn {
	flex: 0 1 auto;
}

@media (max-width: 420px) {
	.hbnl-exit__actions .btn {
		flex: 1 1 100%;
	}
}

/*
 * Credits against the contract, listed under the monthly total rather than in
 * it. Set apart with space rather than a second rule: the monthly total already
 * draws one directly above, and two lines a few pixels apart is the double
 * divider the add-on cards used to have.
 */
.hbnl-basket__credits {
	margin-top: 0.75rem;
}

/* "Free" is the fact about the line, so it carries the weight the price would. */
.hbnl-basket__free .text-nowrap {
	font-weight: 700;
}

.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, #f8f9fa);
}

.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__note {
	margin: 0 0 0.75rem;
	color: var(--hbnl-accent);
	font-size: 0.875rem;
}

.hbnl-slots__choice {
	margin-bottom: 0.9rem;
}

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

/* Day and time side by side; the day is wider because its label is longer. */
.hbnl-slots__selects {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 0.5rem;
}

/* Stacked on a phone, where "Wednesday 21 October" and a time won't share a line. */
@media (max-width: 575.98px) {
	.hbnl-slots__selects {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------- *
 * Register interest: register interest
 * ---------------------------------------------------------------------- */

/*
 * The honeypot (Support\FormGuard). Off screen rather than display: none, which
 * some scripts look for and skip.
 */
.hbnl-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.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;
}

/* Embedded and collapsed: the button opens the fields, then gets out of the way. */
.hbnl-interest__open[aria-expanded="true"] {
	display: none;
}

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

/*
 * The address block wraps its fields, which breaks the adjacency the rule above
 * relies on. Same rhythm restored, whichever half of it is on screen.
 */
.hbnl-interest__address > .hbnl-interest__field,
.hbnl-interest__address [data-hbnl-address-fields] .hbnl-interest__field,
.hbnl-interest__find {
	margin-top: 0.9rem;
}

/*
 * Same again for the in-contract questions: the field after that group is a
 * sibling of the group, not of a field, so it falls outside the rule above.
 * The group itself needs no top margin, the toggle over it supplies one.
 */
[data-hbnl-contract-fields] + .hbnl-interest__field {
	margin-top: 0.9rem;
}

.hbnl-interest__address-note {
	margin: 0.9rem 0 0;
	color: var(--hbnl-accent);
}

.hbnl-interest__address-switch {
	margin: 0.6rem 0 0;
}

.hbnl-interest__link {
	padding: 0;
	background: none;
	border: 0;
	color: var(--hbnl-accent);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: underline;
}

/* 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;
}

/*
 * The rule above squares off every control it touches, radios included, and a
 * square radio reads as a checkbox: pick one looks like pick any. Put back.
 */
.hbnl-check .form-check-input[type="radio"] {
	border-radius: 50%;
}

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

/*
 * Bigger than the default, for the rows that carry a declaration about the
 * property or a consent: those want a target that reads as deliberate rather
 * than incidental, and it clears the 24px minimum for a touch target twice
 * over. Defined after the base rule, since both selectors weigh the same and
 * source order is what decides.
 */
.hbnl-check--lg .form-check-input {
	width: 1.6rem;
	height: 1.6rem;
	margin: 0;
	border-width: 2px;
	border-radius: 0.35rem;
}

.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;
}

/* The error under the form, at the consent line's size (HBNL, Trello 187). */
.hbnl-interest__form [data-hbnl-error] {
	font-size: 0.875rem;
	line-height: 1.35;
}

/*
 * The plum panel behind the identity and address fields.
 *
 * Plum to pink, top to bottom, the same pair and direction the theme's Proof
 * block uses, so this reads as the same surface rather than a second gradient
 * that nearly matches. Both colours come from the theme's Bootstrap map, with
 * the hexes as fallbacks for a build that has not emitted them.
 */
.hbnl-interest__panel {
	background: linear-gradient(180deg, var(--bs-secondary, #871555) 0%, var(--bs-banner-pink, #c02385) 100%);
	border-radius: 1.5rem;
	padding: 2rem;
	margin-bottom: 2rem;
}

/*
 * On the panel the fields are white pills with no keyline: the plum around them
 * is the edge. The border is removed rather than recoloured, since a plum
 * keyline on plum is invisible anyway and a white one double-draws the pill.
 */
.hbnl-interest__panel .hbnl-field {
	border-color: transparent;
}

/*
 * Everything that was plum-on-white inside the panel is now white-on-plum: the
 * find-address button, the "enter it manually" link, and the note that appears
 * when a postcode returns nothing.
 */
.hbnl-interest__panel .hbnl-interest__find {
	border-color: var(--hbnl-surface, #fff);
	color: var(--hbnl-surface, #fff);
}

.hbnl-interest__panel .hbnl-interest__find:hover,
.hbnl-interest__panel .hbnl-interest__find:focus-visible {
	background: var(--hbnl-surface, #fff);
	color: var(--hbnl-accent);
}

.hbnl-interest__panel .hbnl-interest__link,
.hbnl-interest__panel .hbnl-interest__address-note,
.hbnl-interest__panel .hbnl-interest__address-switch {
	color: var(--hbnl-surface, #fff);
}

/*
 * Bootstrap's invalid feedback is red, which is the one thing here that should
 * not take the panel's colour: an error has to stay an error. Lifted to a tint
 * that clears the plum instead.
 */
.hbnl-interest__panel .invalid-feedback {
	color: var(--bs-danger-text-emphasis, #ffd7e4);
}

@media (max-width: 575.98px) {
	.hbnl-interest__panel {
		padding: 1.25rem;
		border-radius: 1rem;
	}
}

.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;
}


/*
 * Bootstrap paints every passing field green the moment a form is submitted, so
 * leaving the consent box unticked turned the optional use-case labels green as
 * well as showing the error. These screens only ever signal a problem, never a
 * pass, so the valid half of that styling comes off. Scoped to the plugin's own
 * forms, which all carry data-hbnl-form, so nothing else on the site changes.
 */
[data-hbnl-form].was-validated .form-control:valid,
[data-hbnl-form].was-validated .form-control:valid:focus {
	background-image: none;
	border-color: var(--hbnl-accent);
	box-shadow: none;
	padding-right: 0.9rem;
}

[data-hbnl-form].was-validated textarea.form-control:valid {
	padding-right: 0.9rem;
}

/* The select keeps its own chevron; only the tick behind it is removed. */
[data-hbnl-form].was-validated .form-select:valid,
[data-hbnl-form].was-validated .form-select:valid:not([multiple]):not([size]),
[data-hbnl-form].was-validated .form-select:valid:focus {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23474a4d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 24px center;
	background-size: 16px 12px;
	border-color: var(--hbnl-accent);
	box-shadow: none;
	padding-right: 72px;
}

[data-hbnl-form].was-validated .form-check-input:valid,
[data-hbnl-form].was-validated .form-check-input:valid:focus {
	border-color: var(--hbnl-accent);
	box-shadow: none;
}

[data-hbnl-form].was-validated .form-check-input:valid:checked {
	background-color: var(--hbnl-accent);
}

[data-hbnl-form].was-validated .form-check-input:valid ~ .form-check-label {
	color: var(--hbnl-accent);
}