/*
 * Quote pages: mobile usability layer.
 *
 * Enqueued on the Quote Result template only (the quick quote and its result
 * pages, see enqueue_quote_mobile_assets() in functions.php), after the theme
 * stylesheet. Goes with assets/js/quote-mobile.js. Remove both files and that
 * function to roll back.
 */

.quick-quote-form {
	--qm-ink: var(--vq-ink);
	--qm-action: var(--vq-action);
	--qm-ease: var(--vq-ease);
}

/* Validation: one nudge at a time, as on the Sundays NZ and AU quote lines.
   main.js shows the message of the first field that fails; here it is a small
   dark card with an arrow, floating under that field, so nothing on the page
   moves. Taps go straight through it to whatever is underneath. No red: it
   reads as a pointer, not a telling-off. The wording is unchanged. */
.quick-quote-form .form-group .invalid-feedback {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	width: max-content;
	max-width: min(22rem, 100%);
	margin-top: 10px;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--qm-ink);
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
	pointer-events: none;
	animation: qm-nudge-in 200ms var(--qm-ease) both;
}

.quick-quote-form .form-group .invalid-feedback::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 22px;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--qm-ink);
	transform: translateX(-50%) rotate(45deg);
}

/* Fields sit in .form-group with 10px of gutter; line the card up with the
   field's own left edge. The bike value's message sits in the input group,
   which has no gutter. */
.quick-quote-form .form-group > .invalid-feedback {
	left: 10px;
	max-width: min(22rem, calc(100% - 20px));
}

/* The date of birth message carries an info button with the age rules. Keep
   that one tappable, and its popup in its own colours. */
.quick-quote-form .invalid-feedback .info-detail {
	pointer-events: auto;
}

.quick-quote-form .invalid-feedback .info-popup {
	font-weight: 400;
	text-align: left;
}

@keyframes qm-nudge-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* The field the card points at. */
.quick-quote-form [aria-invalid="true"] {
	border-color: var(--qm-ink);
	box-shadow: 0 0 0 1px var(--qm-ink);
}

/* Busy state. quote-mobile.js swaps the button's label while main.js's veil
   is up; the veil's own spinner is hidden, as on a phone it sat a screen or
   more above the button. The veil still stops the form being edited. */
.quick-quote-form .ajax-loader-sidebar {
	background-image: none !important;
}

.quick-quote-form .submit-btn.qm-busy,
.quick-quote-form .submit-btn.qm-busy:disabled {
	position: relative;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-color: transparent;
	background-color: var(--qm-action);
	color: #ffffff !important;
	cursor: progress;
}

.quick-quote-form .submit-btn.qm-busy::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgb(255 255 255 / 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: qm-spin 700ms linear infinite;
}

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

/* "Go Basic" / "Go Premium", once tapped (quote-mobile.js): a spinner in the
   label's colour beside "Loading…", and no second tap. The links
   keep their own display, so the spinner sits in the line of text. */
.price_block a.big-round-btn-link.qm-busy,
.qm-go-bar button.qm-busy {
	pointer-events: none;
	cursor: progress;
}

.price_block a.big-round-btn-link.qm-busy::before,
.qm-go-bar button.qm-busy::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -2px;
	animation: qm-spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.price_block a.big-round-btn-link.qm-busy::before,
	.qm-go-bar button.qm-busy::before {
		animation-duration: 2s;
	}
}

/* Fields, as on the new Velosure and Sundays NZ quote lines: 52px tall,
   rounded, a light line that darkens on hover and turns green with a soft
   ring on focus. Labels use the 500 weight Graphik is loaded in (700 was drawn
   as a faux bold).
   These rules start with form.quick-quote-form to outrank the theme's
   .form .form-control, which prints after this file. */
form.quick-quote-form {
	--qm-line: var(--vq-line);
	--qm-muted: var(--vq-muted);
	--qm-ring: var(--vq-ring);
}

form.quick-quote-form .form-group > label:not(.disclaimer) {
	margin-bottom: 10px;
	color: var(--qm-ink);
	font-size: 15px;
	font-weight: 500;
}

form.quick-quote-form .form-group {
	margin-bottom: 28px;
}

form.quick-quote-form .form-control,
form.quick-quote-form .input-group-text {
	min-height: 52px;
	border-width: 2px;
	border-color: var(--qm-line);
	color: var(--qm-ink);
	transition: border-color 150ms var(--qm-ease), box-shadow 150ms var(--qm-ease);
}

form.quick-quote-form .form-control {
	border-radius: 8px;
}

form.quick-quote-form .input-group > .form-control {
	border-radius: 0 8px 8px 0;
}

form.quick-quote-form .input-group-text {
	border-radius: 8px 0 0 8px;
	background: #f7f7f7;
	color: var(--qm-muted);
}

form.quick-quote-form .form-control:hover {
	border-color: var(--vq-line-hover);
}

/* The field the nudge points at, as above, at this file's new specificity. */
form.quick-quote-form .form-control[aria-invalid="true"] {
	border-color: var(--qm-ink);
}

form.quick-quote-form .form-control:focus {
	border-color: var(--qm-action);
	box-shadow: var(--qm-ring);
	outline: none;
}

form.quick-quote-form .form-control::placeholder {
	color: #8a8a8a;
}

/* Selects: the browser's own arrow is small and sits against the edge, and
   differs on every phone. Draw a slim ink chevron set in from the edge, as
   Bootstrap's .custom-select does, with room so a long answer never runs
   under it. */
form.quick-quote-form select.form-control:not([multiple]):not([size]) {
	padding-right: 48px;
	background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 16px center / 18px 18px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Date of birth as three boxes (quote-mobile.js). The original field stays in
   the form for main.js, out of sight but not display: none, which main.js
   would skip. */
form.quick-quote-form .qm-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden;
	border: 0 !important;
	clip-path: inset(50%);
	white-space: nowrap;
}

form.quick-quote-form .qm-dob {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 8px;
}

form.quick-quote-form .qm-visually-hidden[aria-invalid="true"] + .qm-dob .form-control {
	border-color: var(--qm-ink);
}

/* Gender as one-tap options (quote-mobile.js), the select kept for main.js.
   Equal thirds where they fit; a column never gets narrower than its label,
   so "Unspecified" takes a little more room in a narrow form column. */
form.quick-quote-form .qm-choices {
	display: grid;
	grid-template-columns: repeat(3, minmax(min-content, 1fr));
	gap: 8px;
}

form.quick-quote-form .qm-choices button {
	min-height: 52px;
	padding: 0 8px;
	border: 2px solid var(--qm-line);
	border-radius: 8px;
	background: #ffffff;
	color: var(--qm-ink);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
	transition: border-color 150ms var(--qm-ease), background-color 150ms var(--qm-ease), color 150ms var(--qm-ease);
}

form.quick-quote-form .qm-choices button:hover {
	border-color: var(--vq-line-hover);
}

/* "Unspecified" needs a little less on a 320px screen. */
@media (max-width: 359.98px) {
	form.quick-quote-form .qm-choices button {
		padding: 0 4px;
		font-size: 13px;
	}
}

form.quick-quote-form .qm-choices button[aria-checked="true"] {
	border-color: var(--qm-action);
	background: var(--vq-action-tint);
	color: #066a2e;
	font-weight: 500;
}

form.quick-quote-form .qm-choices button:focus-visible {
	outline: 2px solid var(--qm-ink);
	outline-offset: 2px;
}

form.quick-quote-form .qm-visually-hidden[aria-invalid="true"] + .qm-choices button,
form.quick-quote-form .qm-visually-hidden[aria-invalid="true"] + .qm-grouped-choices button:not([aria-checked="true"]) {
	border-color: var(--qm-ink);
}

/* Bike type as grouped one-tap options (quote-mobile.js): a first row like
   gender's, and under it, on a quiet panel, the second row that E-bike or
   More opens. Its answers have longer names ("Recumbent Bike"), so it fits
   as many columns as they allow. */
form.quick-quote-form .qm-grouped-choices {
	display: grid;
	gap: 8px;
}

form.quick-quote-form .qm-choices-more {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
	padding: 8px;
	border-radius: 16px;
	background: var(--vq-quiet);
	animation: qm-nudge-in 200ms var(--qm-ease) both;
}

form.quick-quote-form .qm-choices-more[hidden] {
	display: none;
}

/* The bike value's range, under its field (quote-mobile.js). */
form.quick-quote-form .qm-hint {
	margin: 8px 0 0;
	color: var(--qm-muted);
	font-size: 14px;
	line-height: 20px;
}

/* Suburbs as a tap list (quote-mobile.js) in place of main.js's select,
   which stays in the form, hidden, and still takes the choice. */
form.quick-quote-form select.post-select {
	display: none !important;
}

form.quick-quote-form .qm-suburbs {
	position: absolute;
	right: 10px;
	left: 10px;
	z-index: 30;
	display: grid;
	max-height: 288px;
	margin-top: 6px;
	padding: 4px;
	overflow-y: auto;
	border: 1px solid var(--qm-line);
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
}

form.quick-quote-form .qm-suburbs[hidden] {
	display: none;
}

form.quick-quote-form .qm-suburbs button {
	min-height: 48px;
	padding: 0 12px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--qm-ink);
	font: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}

form.quick-quote-form .qm-suburbs button:hover,
form.quick-quote-form .qm-suburbs button:focus-visible {
	background: var(--vq-quiet);
	outline: none;
}

form.quick-quote-form .qm-suburbs button:focus-visible {
	box-shadow: inset 0 0 0 2px var(--qm-ink);
}

form.quick-quote-form .qm-suburbs-empty {
	margin: 0;
	padding: 12px;
	color: var(--qm-ink);
	font-size: 15px;
	line-height: 1.45;
}

/* The marketing opt-in: its text was indented on the first line only and set
   in light grey (2.3:1). Same wording, still unticked, now lined up and
   readable. */
form.quick-quote-form .form-group > br {
	display: none;
}

form.quick-quote-form .pretty.quote-col-2 {
	display: block;
	margin: 4px 0 0;
	padding: 0;
	white-space: normal;
}

form.quick-quote-form .pretty.quote-col-2 .state {
	position: relative;
}

form.quick-quote-form .pretty.quote-col-2 .state label {
	display: block;
	padding: 0 0 0 34px;
	text-indent: 0;
	color: var(--qm-ink);
	font-size: 15px;
	line-height: 1.45;
	white-space: normal;
}

form.quick-quote-form .pretty.quote-col-2 .state label::before,
form.quick-quote-form .pretty.quote-col-2 .state label::after {
	top: 1px;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 4px;
}

/* "Calculate quote" full width and 56px tall, with its consent line kept
   right under it and readable (6.5:1; it was light grey, 2.3:1). */
form.quick-quote-form .submit-btn {
	width: 100%;
	min-height: 56px;
	border-radius: var(--vq-radius);
	font-weight: 500;
}

form.quick-quote-form label.disclaimer {
	display: block;
	margin-top: 12px;
	color: var(--qm-muted);
	font-size: 14px;
	line-height: 1.45;
}

/* Sticky "Calculate quote" on phones (quote-mobile.js adds .qm-stuck once
   every field has an answer and the button is below the screen). The block
   moves whole, consent line included. */
@media (max-width: 767.98px) {
	form.quick-quote-form .form-group.qm-stuck {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		margin: 0;
		padding: 14px 20px max(14px, env(safe-area-inset-bottom, 0px));
		background: #ffffff;
		box-shadow: 0 -1px 0 rgb(0 0 0 / 0.06), 0 -8px 24px rgb(0 0 0 / 0.08);
		animation: qm-rise 220ms var(--qm-ease) both;
	}

	form.quick-quote-form .form-group.qm-stuck > label:not(.disclaimer) {
		display: none;
	}

	form.quick-quote-form .form-group.qm-stuck label.disclaimer {
		margin-top: 8px;
		font-size: 13px;
		line-height: 1.4;
	}

	form.quick-quote-form .qm-sticky-spacer {
		flex: 0 0 100%;
	}

	/* Lift the chat bubble above the bar rather than hide it. */
	body.qm-action-stuck .cgptcb-chat-bubble {
		bottom: calc(var(--qm-sticky-height, 140px) + 12px) !important;
	}
}

@keyframes qm-rise {
	from { opacity: 0; transform: translateY(100%); }
	to { opacity: 1; transform: none; }
}

/* Quote header, as on the new Velosure quote line and the full quote
   (full-quote.css): the logo on the left and, on phones, chat on the right
   (quote-mobile.js; quote-pages.css draws it), 64px tall. It had a back
   arrow, the logo in the middle and "Edit quote", which competed with chat
   for the right-hand corner. Back now sits by the title (quote-mobile.js);
   the header's arrow and "Edit quote" stay in the page, 1px and clipped
   rather than display: none, as main.js only binds "Edit quote" while it
   has a box. On wide screens the logo lines up with the content below: the
   price cards (728px for two, 698px for one) or the quick quote's 600px
   form. */
body#quote-result .site-header.sticky-top-always {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 64px;
	/* 2px heavier below, so the logo sits in the visual middle above the
	   progress bar along the bottom. */
	padding-block: 8px 12px;
	transition: transform 200ms var(--vq-ease);
}

body#quote-result .site-header.sticky-top-always > .wrapper_logo {
	position: static;
	left: auto;
	line-height: 0;
}

body#quote-result .site-header.sticky-top-always > .qm-header-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 768px) {
	body#quote-result .site-header.sticky-top-always {
		padding-inline: max(20px, calc((100% - var(--qm-content-width, 728px)) / 2));
	}

	body#quote-result:has(.result.one-bike) {
		--qm-content-width: 698px;
	}

	body#quote-result:not(:has(section.result)) {
		--qm-content-width: 600px;
	}
}

/* The result pages' title row (quote-mobile.js), as on the full quote: a
   grey back circle left of "Your price", above the price cards and in line
   with them. The circle opens the quick quote with the customer's answers.
   The title takes the full quote's step title type. */
body#quote-result .qm-title-row {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--qm-content-width, 728px);
	margin: 0 auto 20px;
}

/* The result pages' container has no side padding on phones. */
@media (max-width: 767.98px) {
	body#quote-result .qm-title-row {
		padding-inline: 20px;
	}
}

body#quote-result .qm-title {
	margin: 0;
	color: var(--vq-heading);
	font-size: 28px;
	font-weight: 500;
	line-height: 34px;
	letter-spacing: -0.03em;
	text-align: left;
}

body#quote-result .qm-back {
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vq-quiet) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m15 18-6-6 6-6'/%3e%3c/svg%3e") no-repeat center / 20px 20px;
	cursor: pointer;
	transition: background-color 150ms var(--vq-ease);
}

body#quote-result .qm-back:hover {
	background-color: var(--vq-quiet-hover);
}

body#quote-result .qm-back:focus-visible {
	outline: 2px solid var(--vq-ink);
	outline-offset: 2px;
}

/* Progress through the quote, as on the new Velosure quote line: a thin bar
   along the bottom of the header, with no step count on screen. Quick quote
   is step 1 of 4, the price step 2 (quote-mobile.js adds it). */
body#quote-result .qm-progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: rgb(7 136 59 / 0.12);
}

body#quote-result .qm-progress > span {
	display: block;
	width: 12.5%;
	height: 100%;
	border-radius: 0 3px 3px 0;
	background: var(--vq-action);
	transition: width 500ms var(--vq-ease);
}

body#quote-result .qm-progress.qm-step-2 > span {
	width: 37.5%;
}

@media (max-width: 767.98px) {
	/* The logo on the page's 20px edge; the chat button's 40px circle
	   reaches 12px from the other, so its icon sits on the same edge. */
	body#quote-result .site-header.sticky-top-always {
		padding-inline: 20px 12px;
	}

	body#quote-result .site-header.sticky-top-always .wrapper_logo img {
		max-width: 88px;
	}

	/* The header slides away while the form is scrolled down and comes back
	   on the way up (quote-mobile.js). A transform, so nothing below moves. */
	body#quote-result.qm-header-away .site-header.sticky-top-always {
		transform: translateY(-100%);
	}
}

/* The phone "Learn more" (under "Go", or after the two-bike cover list) is
   for phones; desktop keeps its own "Learn more" button. */
@media (min-width: 768px) {
	body#quote-result .price_block a.qm-learn-more,
	body#quote-result .price_block .qm-cycle-price {
		display: none;
	}
}

/* From 768px the result templates' own CSS fixes the cards' box in px (570px
   one bike, 880px two; 900px and 1200px up to 991px) and the row fills it.
   The title row (quote-mobile.js) adds 60px inside that box, so the cards
   ran 60px past it and over "Email me a copy of my quote". The box now grows
   with the title row and the cards keep the templates' height. */
@media (min-width: 768px) {
	body#quote-result section.result:has(.qm-title-row),
	body#quote-result section.result:has(.qm-title-row) > #result,
	body#quote-result section.result > #result > .container:has(> .qm-title-row) {
		height: auto;
	}

	body#quote-result .result .qm-title-row + .row {
		height: 570px;
	}

	body#quote-result .result.two-bikes .qm-title-row + .row {
		height: 880px;
	}

	/* The desktop "Learn more" icon was a stray text glyph (an accented "I");
	   it gets the arrow the phone button draws. */
	body#quote-result .price_block .desk_block a.dark-link > img[src$="text-icon.svg"] {
		display: none;
	}

	body#quote-result .price_block .desk_block a.dark-link::after {
		content: "";
		display: inline-block;
		width: 16px;
		height: 16px;
		margin-left: 6px;
		vertical-align: -2px;
		background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12h14M13 6l6 6-6 6'/%3e%3c/svg%3e") no-repeat center / 16px 16px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	body#quote-result .result .qm-title-row + .row {
		height: 900px;
	}

	body#quote-result .result.two-bikes .qm-title-row + .row {
		height: 1200px;
	}
}

/* The quick quote opened with no heading, straight into "Bike value". Show
   the "Check our price" heading the form already carries, hidden. */
form.quick-quote-form > .mob_block {
	display: none !important;
}

/* Same 600px column as the form's rows. */
form.quick-quote-form > .desk_block {
	display: block !important;
	max-width: 600px;
	margin-inline: auto;
	padding: 4px 10px 20px;
}

@media (min-width: 768px) {
	form.quick-quote-form > .desk_block {
		padding-top: 32px;
	}
}

form.quick-quote-form > .desk_block > br {
	display: none;
}

form.quick-quote-form > .desk_block > h2.hide {
	display: block;
	margin: 0;
	color: var(--vq-heading);
	font-size: 28px;
	font-weight: 500;
	line-height: 34px;
	letter-spacing: -0.03em;
	/* Bootstrap's .text-center on it is !important; align it with the fields. */
	text-align: left !important;
}

/* The cover list: a tick for what's covered and a cross for what isn't, as
   on the new Velosure quote line. The wording and the strike-through on
   what isn't covered are unchanged. */
body#quote-result .price_block .cover .details li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

body#quote-result .price_block .cover .details li::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: #e6f3eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2307883b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 10.5 2.5 2.5L14 7.5'/%3E%3C/svg%3E") center / 20px no-repeat;
}

body#quote-result .price_block .cover .details li.not-contain::before {
	background: #f1f1f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 7 6 6M13 7l-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Result page on a phone: the price and the Monthly / Annually choice come
   first, then the cover list, then "Go" (with "Learn more" under it) where
   the list ends, low in the first screen on most phones. On a longer list
   the sticky bar (quote-mobile.js) keeps "Go" in reach from the start. The
   template pins the section at 900px and its parts at percentages of that.
   The two-bike page follows, after this block. */
@media (max-width: 767.98px) {
	body#quote-result .result.one-bike,
	body#quote-result .result.one-bike #result,
	body#quote-result .result.one-bike #result > .container,
	body#quote-result .result.one-bike #result .row,
	body#quote-result .result.one-bike #result .row > .col-md-6,
	body#quote-result .result.one-bike .price_block,
	body#quote-result .result.one-bike .price_block .price_bold_text > *,
	body#quote-result .result.one-bike .price_block .cover,
	body#quote-result .result.one-bike .price_block .button {
		height: auto;
	}

	body#quote-result .result.one-bike {
		margin-bottom: 0;
	}

	body#quote-result .result.one-bike #result .row > .col-md-6 {
		margin-top: 0;
		border: 0;
		box-shadow: none;
	}

	body#quote-result .result.one-bike .price_block {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	body#quote-result .result.one-bike .price_block .price_bold_text {
		display: contents;
	}

	body#quote-result .result.one-bike .price_block .text-wrapper {
		order: 1;
		padding: 28px 20px 8px;
		border-bottom: 0;
	}

	body#quote-result .result.one-bike .price_block .price_bold_text .left {
		order: 2;
		padding: 4px 20px 0;
	}

	/* The basic plan's "* Quoted monthly charge includes $2 admin fee" sits in
	   the same column: keep it right under the price it's about. Its inline
	   style nudges it 18px up, onto the price. */
	body#quote-result .result.one-bike .price_block .price_bold_text > .mob_block {
		order: 2;
		position: static !important;
		margin-top: 12px;
		padding: 0 20px;
		color: #4e4e4e;
		text-align: center;
	}

	body#quote-result .result.one-bike .price_block .button {
		order: 5;
		overflow: visible;
		border-top: 0;
		padding: 0 20px 28px;
	}

	body#quote-result .result.one-bike .price_block .price_bold_text .right {
		order: 4;
		padding: 0;
		background: #ffffff;
	}

	body#quote-result .result.one-bike .price_block .button .mob_block {
		display: block;
		width: 100%;
	}

	body#quote-result .result.one-bike .price_block .button .mob_block a.big-round-btn-link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 56px;
	}

	body#quote-result .result.one-bike .price_block .button .mob_block a.dark-link {
		margin-top: 16px;
		font-size: 16px;
	}

	/* It sits in the price's column, which is set at 52px. */
	body#quote-result .result.one-bike .price_block .cover {
		margin: 0;
		padding: 28px 20px;
		border-top: 0;
		font-size: 16px;
		line-height: 1.5;
	}

	body#quote-result .result.one-bike .price_block .cover .toggle {
		position: static;
		display: block;
		padding: 0 0 12px;
		border: 0;
		background: none;
		font-size: 16px;
		text-align: left;
		text-transform: none;
	}

	body#quote-result .result.one-bike .price_block .cover .collapsable {
		margin-top: 0;
	}

	body#quote-result .result.one-bike .price_block .cover .details {
		padding: 0 0 0 4px;
	}

	/* The result page's sticky "Go" bar (quote-mobile.js): the chosen price
	   and the same "Go", once the page's own has scrolled out of view. */
	.qm-go-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 12px 20px max(12px, env(safe-area-inset-bottom, 0px));
		background: #ffffff;
		box-shadow: 0 -1px 0 rgb(0 0 0 / 0.06), 0 -8px 24px rgb(0 0 0 / 0.08);
		animation: qm-rise 220ms var(--vq-ease) both;
	}

	.qm-go-bar[hidden] {
		display: none;
	}

	/* Room under the footer, so its last lines (the PDS and TMD notice) can
	   always scroll clear of the bar. */
	body.qm-go-shown {
		padding-bottom: var(--qm-sticky-height, 80px);
	}

	/* As every price on the quote pages: the cycle above, the price under it
	   (quote-mobile.js). */
	.qm-go-price {
		display: flex;
		flex: none;
		flex-direction: column;
		gap: 2px;
		white-space: nowrap;
	}

	.qm-go-price .qm-go-cycle {
		color: var(--vq-muted);
		font-size: 13px;
		line-height: 18px;
	}

	.qm-go-price .qm-go-amount {
		color: #1c1c1c;
		font-size: 24px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: -0.01em;
		font-variant-numeric: tabular-nums;
	}

	.qm-go-bar button.big-round-btn {
		flex: 1;
		width: auto;
		min-height: 52px;
		padding: 0 16px;
		border: 0;
	}

	/* "Learn more": under "Go" on the one-bike pages, after the cover list
	   on the two-bike page (quote-mobile.js). */
	/* A grey button with the arrow inside, as the email buttons
	   (quote-pages.css), where it was underlined text with an icon-font
	   arrow underlined on its own. Same link, same words. */
	body#quote-result .result:is(.one-bike, .two-bikes) .price_block :is(.cover, .button > .mob_block) a.qm-learn-more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-top: 12px;
		padding: 12px 46px 12px 18px;
		border-radius: var(--vq-radius);
		background: var(--vq-quiet) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12h14M13 6l6 6-6 6'/%3e%3c/svg%3e") no-repeat right 16px center / 18px 18px;
		color: var(--vq-ink) !important;
		font-size: 15px;
		font-weight: 500;
		line-height: 20px;
		text-decoration: none;
		transition: background-color 150ms var(--vq-ease);
	}

	body#quote-result .result:is(.one-bike, .two-bikes) .price_block :is(.cover, .button > .mob_block) a.qm-learn-more:hover {
		background-color: var(--vq-quiet-hover);
	}

	body#quote-result .result.one-bike .price_block .button > .mob_block a.qm-learn-more .oi {
		display: none;
	}

	/* "Go" follows the cover list, with "Learn more" 16px under it. */
	body#quote-result .result.one-bike .price_block .button {
		padding-bottom: 24px;
	}

	/* Monthly / Annually as a segmented control with 42px targets, until
	   quote-mobile.js makes it two cards (below). */
	body#quote-result .result.one-bike .payment-cycle {
		display: flex;
		width: 100%;
		max-width: 280px;
		height: 48px;
		margin: 16px auto 20px;
		padding: 3px;
		border: 0;
		border-radius: 10px;
		background: rgb(0 0 0 / 0.06);
		box-shadow: none;
	}

	body#quote-result .result.one-bike .payment-cycle .monthly,
	body#quote-result .result.one-bike .payment-cycle .annually {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		float: none;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: #4e4e4e;
		font-size: 16px;
		line-height: 1;
		transition: background-color 150ms var(--qm-ease, ease), color 150ms var(--qm-ease, ease);
	}

	body#quote-result .result.one-bike .payment-cycle .monthly.active,
	body#quote-result .result.one-bike .payment-cycle .annually.active {
		margin: 0;
		border: 0;
		background: #ffffff;
		color: var(--vq-action);
		font-weight: 500;
		box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
	}

	/* Monthly and Annually as two cards, each with its own price
	   (quote-mobile.js), in place of the toggle and the single price. */
	body#quote-result .result.one-bike .price_block .left .wrapper.qm-cycle-cards {
		width: 100%;
	}

	body#quote-result .result:is(.one-bike, .two-bikes) .qm-cycle-cards > span.m,
	body#quote-result .result:is(.one-bike, .two-bikes) .qm-cycle-cards > span.y {
		display: none !important;
	}

	body#quote-result .result:is(.one-bike, .two-bikes) .qm-cycle-cards .payment-cycle {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		width: 100%;
		max-width: none;
		height: auto;
		margin: 12px 0 4px;
		padding: 0;
		background: none;
	}

	body#quote-result .result:is(.one-bike, .two-bikes) .qm-cycle-cards .payment-cycle .monthly,
	body#quote-result .result:is(.one-bike, .two-bikes) .qm-cycle-cards .payment-cycle .annually {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		min-height: 88px;
		margin: 0;
		padding: 14px 16px;
		border: 2px solid var(--vq-line);
		border-radius: 12px;
		background: #ffffff;
		color: #4e4e4e;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.2;
		text-align: left;
		box-shadow: none;
	}

	/* The radio dot, as on the Sundays NZ and AU price cards. */
	body#quote-result .result:is(.one-bike, .two-bikes) .qm-cycle-cards .payment-cycle .btn::after {
		content: "";
		position: absolute;
		top: 14px;
		right: 14px;
		width: 20px;
		height: 20px;
		box-sizing: border-box;
		border: 1.5px solid #c4c4c4;
		border-radius: 50%;
		background: #ffffff;
		transition: border-width 150ms ease, border-color 150ms ease;
	}

	body#quote-result .result:is(.one-bike, .two-bikes) .qm-cycle-cards .payment-cycle .btn.active {
		border-color: var(--vq-action);
		background: var(--vq-action-tint);
		color: #066a2e;
		font-weight: 500;
	}

	body#quote-result .result:is(.one-bike, .two-bikes) .qm-cycle-cards .payment-cycle .btn.active::after {
		border: 6px solid var(--vq-action);
	}

	body#quote-result .result:is(.one-bike, .two-bikes) .qm-cycle-cards .qm-cycle-price {
		margin-top: 6px;
		color: #1c1c1c;
		font-size: 26px;
		font-weight: 500;
		letter-spacing: -0.01em;
		font-variant-numeric: tabular-nums;
	}
}

/* The two-bike page on a phone, to match: each plan is a card with its name,
   the Monthly and Annually cards (quote-mobile.js), then "Go" on a tint, and
   below them the cover list with "Learn more". Premium, the most popular,
   still comes first. The template sized the plans in percentages and main.js
   turned the cover lists into an accordion sized in pixels, which put Basic's
   "Go" under its list and let the "Cover" tab overlap it. main.js only runs
   that accordion while its chevrons show, so hiding them turns it off and
   clears its sizes; both lists stay open and everything takes its own
   height. */
@media (max-width: 767.98px) {
	body#quote-result .result.two-bikes,
	body#quote-result .result.two-bikes #result,
	body#quote-result .result.two-bikes #result > .container,
	body#quote-result .result.two-bikes #result .row,
	body#quote-result .result.two-bikes #result .row > .col-md-6,
	body#quote-result .result.two-bikes .price_block,
	body#quote-result .result.two-bikes .price_block .price_bold_text,
	body#quote-result .result.two-bikes .price_block .price_bold_text > *,
	body#quote-result .result.two-bikes .price_block .button-in-the-middle,
	body#quote-result .result.two-bikes .price_block .cover,
	body#quote-result .result.two-bikes .price_block .cover .collapsable,
	body#quote-result .result.two-bikes .price_block .cover .h-60 {
		height: auto;
	}

	body#quote-result .result.two-bikes .price_block .cover .toggle .oi {
		display: none !important;
	}

	body#quote-result .result.two-bikes {
		padding-bottom: 32px;
	}

	/* On the page's 20px edges at every phone width; the template drops
	   them on the smallest. */
	body#quote-result .result.two-bikes #result .row > .col-md-6 {
		margin: 0;
		padding: 0 20px;
		border: 0;
		background: none;
		box-shadow: none;
	}

	/* Premium, first, leaves room for its "Most popular" flag; Basic
	   follows. */
	body#quote-result .result.two-bikes #result .row > .col-md-6:last-child {
		margin-top: 20px;
	}

	body#quote-result .result.two-bikes #result .row > .col-md-6:first-child {
		margin-top: 32px;
	}

	/* The plan's card: the name, prices and "Go" on the tint the template
	   gave the whole plan, the cover list on white. */
	body#quote-result .result.two-bikes .price_block {
		border-radius: var(--vq-radius-card);
		background: #ffffff;
		box-shadow: var(--vq-shadow-card);
	}

	body#quote-result .result.two-bikes .price_block .price_bold_text,
	body#quote-result .result.two-bikes .price_block .button-in-the-middle {
		background: rgb(7 136 59 / 0.06);
	}

	/* flow-root, so the cards' bottom margin stays on the tint. */
	body#quote-result .result.two-bikes .price_block .price_bold_text {
		display: flow-root;
		padding: 28px 0 0;
		border-bottom: 0;
	}

	/* Clear of the flag. */
	body#quote-result .result.two-bikes .popular + .price_block .price_bold_text {
		padding-top: 40px;
	}

	/* Below 576px the template splits the plan 40/60 for name and price. */
	body#quote-result .result.two-bikes .price_block .price_bold_text .left {
		float: none;
		max-width: none;
		padding: 0 20px;
		font-size: 24px;
		line-height: 1.15;
		text-align: center;
	}

	body#quote-result .result.two-bikes .price_block .price_bold_text > .right {
		float: none;
		max-width: none;
		height: auto;
		padding: 0 20px;
		font-size: 16px;
	}

	/* The template's frame around the toggle goes; Basic's carries an
	   inline 25px. */
	body#quote-result .result.two-bikes .qm-cycle-cards .payment-cycle {
		margin-top: 16px !important;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* "* Quoted monthly charge includes $2 admin fee", under Basic's prices.
	   Its inline style nudges it 12px down. */
	body#quote-result .result.two-bikes .price_block .price_bold_text > .mob_block {
		display: block !important;
		position: static !important;
		margin-top: 12px;
		padding: 0 20px;
		color: #4e4e4e;
		text-align: center;
	}

	body#quote-result .result.two-bikes .price_block .button-in-the-middle {
		display: block;
		padding: 16px 20px 24px;
	}

	body#quote-result .result.two-bikes .price_block .button-in-the-middle a.big-round-btn-link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 56px;
	}

	body#quote-result .result.two-bikes .price_block .cover {
		position: static;
		margin: 0;
		padding: 24px 20px 28px;
		border-top: 0;
		font-size: 16px;
		line-height: 1.5;
	}

	/* "Cover" is now the list's heading. It is still a link to "#", which
	   with the accordion off would jump to the top of the page. */
	body#quote-result .result.two-bikes .price_block .cover .toggle {
		position: static;
		display: block;
		padding: 0 0 12px;
		border: 0;
		background: none;
		font-size: 16px;
		text-align: center;
		text-transform: none;
		pointer-events: none;
	}

	/* The template folds Basic's list away on phones. */
	body#quote-result .result.two-bikes .price_block .cover .collapsable {
		display: block;
		margin-top: 0;
	}

	body#quote-result .result.two-bikes .price_block .cover .h-60 {
		border-bottom: 0;
	}

	body#quote-result .result.two-bikes .price_block .cover .details {
		padding: 0 0 0 4px;
	}

	/* Left with only desktop's "Learn more" once the phone's has moved
	   (quote-mobile.js). */
	body#quote-result .result.two-bikes .price_block .cover .collapsable > .button {
		display: none;
	}

	/* Basic's carries an inline 15px. */
	body#quote-result .result.two-bikes .price_block .cover a.qm-learn-more {
		margin-bottom: 0 !important;
	}
}

/* Inside a plan's card the price cards have 40px less room than on the
   one-bike page; on a 320px screen "$156.20" needs a little more. */
@media (max-width: 359.98px) {
	body#quote-result .result.two-bikes .price_block .price_bold_text > .right {
		padding: 0 12px;
	}

	body#quote-result .result.two-bikes .qm-cycle-cards .payment-cycle .monthly,
	body#quote-result .result.two-bikes .qm-cycle-cards .payment-cycle .annually {
		padding: 12px;
	}

	body#quote-result .result.two-bikes .qm-cycle-cards .payment-cycle .btn::after {
		top: 12px;
		right: 10px;
	}

	body#quote-result .result.two-bikes .qm-cycle-cards .qm-cycle-price {
		font-size: 22px;
	}
}

/* Keyboard focus: the theme removes every outline. Bring one back for
   keyboard users only. */
.quick-quote-form .submit-btn:focus-visible,
.price_block a.big-round-btn-link:focus-visible,
.price_block a.qm-learn-more:focus-visible,
.price_block .payment-cycle .btn:has(input:focus-visible) {
	outline: 2px solid var(--qm-ink, var(--vq-ink));
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.quick-quote-form .form-group .invalid-feedback,
	form.quick-quote-form .qm-choices-more {
		animation: none;
	}

	.quick-quote-form .submit-btn.qm-busy::before {
		animation-duration: 2s;
	}

	form.quick-quote-form .form-group.qm-stuck {
		animation: none;
	}

	body#quote-result .site-header.sticky-top-always,
	body#quote-result .qm-progress > span {
		transition: none;
	}

	.qm-go-bar {
		animation: none;
	}
}