/*
 * Quote flow: mobile usability layer.
 *
 * Enqueued on the quote form template only (enqueue_quote_mobile_assets() in
 * functions.php), after quote-style.css. Remove this file and that function to
 * roll back.
 *
 * Step 1 is restyled to match the Sundays NZ quote line (sundays-nz-site,
 * app/assets/tailwind/application.css): its sizes, radii, lines, header and
 * validation nudge, with AU's own blue as the action colour. Rules are scoped
 * to body.quote-step-1 (set server-side by quote_step_body_class()) because
 * steps 2 to 4 have not been checked against it yet.
 */

/* Tokens. Names follow the NZ quote line; values are NZ's, except the action
   colour, which is the AU site's button blue (Webflow --button-links). */
body.quote-flow {
	--qm-ink: #000000;
	--qm-ink-soft: #333333;
	--qm-muted: #6b6b6b;
	--qm-canvas: #f5f5f7;
	--qm-surface: #ffffff;
	--qm-line: #d2d6db;
	--qm-action: #0299df;
	--qm-action-hover: #0284c2;
	--qm-action-wash: #e6f5fc;
	/* Focus doubles the field's black border, drawn inside: NZ's outer blue
	   halo is clipped at the sides by .frm-wrapper's overflow: hidden. */
	--qm-ring: inset 0 0 0 1px var(--qm-ink);
	--qm-radius-field: 10px;
	--qm-radius-card: 16px;
	--qm-radius-pill: 16px;
	--qm-header-height: 60px;
	--qm-ease: cubic-bezier(0.2, 0, 0, 1);

	background: var(--qm-canvas);
	color: var(--qm-ink);
}

/* Squircle corners where the browser has them (Chromium), as on NZ. */
@supports (corner-shape: squircle) {
	body.quote-flow {
		--qm-radius-field: 14px;
		--qm-radius-card: 26px;
		--qm-radius-pill: 9999px;
	}

	body.quote-flow .quote-form form :is(input[type="text"], input[type="email"], input[type="tel"], a.selectBox-dropdown, .generate_quote, .original_submit input, .dummy-pay-btn),
	body.quote-step-1 form[name="instant_quote_form"] label.error.qm-nudge,
	body.quote-step-1 .estimate-section :is(.month, .year),
	body.quote-step-1 .page-in-between :is(ul, .box) {
		corner-shape: squircle;
	}
}

/* Header: a slim white bar with the logo, as on NZ. The excess note it used
   to carry moves under the price (see .qm-disclosure). */
body.quote-flow #masthead {
	height: auto !important;
	padding: 8px 0 !important;
	background: var(--qm-surface) !important;
	box-shadow: 0 1px 0 var(--qm-line) !important;
}

body.quote-flow #masthead .site-width {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
}

body.quote-flow #masthead :is(.custom-header, .logo) {
	width: auto;
	height: auto !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* The Sundays logo, inlined: as quote-style.css's background file it was only
   requested once that stylesheet had arrived and been read, so on a slow
   server the header sat empty for a moment. This copy of
   sundays-insurance.svg (the plain "sundays" wordmark) is trimmed from 5.6 to
   3.2 KB and paints with this stylesheet. */
body.quote-flow #masthead .logo a {
	width: 101px;
	height: 28px;
	margin: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111 29'%3E%3Cpath fill-rule='evenodd' d='M7.7 9.8C8.4 9.8 9.3 10.1 9.6 10.9C9.8 11.2 10.1 11.4 10.5 11.4H12.9C13.5 11.4 14 10.8 13.8 10.3C13.1 8 10.7 6.6 7.9 6.6C3.9 6.6 1.6 8.4 1.6 11.3C1.6 13.5 3 15 5.1 15.7L7.3 16.5C8.4 16.8 8.9 17.4 8.9 18C8.9 18.7 8.2 19.3 7 19.3C5.9 19.3 4.7 18.9 4.4 17.9C4.3 17.5 3.9 17.3 3.5 17.3H.9C.3 17.3-.1 17.8 0 18.4C.6 20.9 3.2 22.5 6.8 22.5C10.7 22.5 13.2 20.7 13.2 17.7C13.2 15.3 11.6 13.9 9.2 13.1L7.3 12.5C6.6 12.2 6 11.8 6 11.1C6 10.3 6.7 9.8 7.7 9.8Z'/%3E%3Cpath fill-rule='evenodd' d='M23.8 22.2H25.9C26.6 22.2 27.2 21.7 27.3 21L30.1 7.4C30.2 7 29.9 6.6 29.5 6.6H27C26.5 6.6 26 7 25.9 7.5L24.5 14.5C23.9 17.2 22.6 18.6 20.7 18.6C19 18.6 18.2 17.3 18.6 15.2L20.1 7.7C20.2 7.1 19.8 6.6 19.2 6.6H17.3C16.6 6.6 16.1 7 15.9 7.7L14.4 15.3C13.6 18.8 15.4 22.5 19.1 22.5C20.9 22.5 22.3 21.7 23.2 20.6L23.1 21.2C23 21.7 23.3 22.2 23.8 22.2Z'/%3E%3Cpath fill-rule='evenodd' d='M54.7 10.4C56.8 10.4 58 11.8 58 14C58 16.8 56.1 18.8 53.6 18.8C51.5 18.8 50.3 17.5 50.3 15.3C50.3 12.5 52.2 10.4 54.7 10.4ZM52.1 22.5C54.1 22.5 55.5 21.8 56.2 21.1C56.3 21 56.4 21.1 56.4 21.2C56.3 21.7 56.7 22.2 57.2 22.2H59.7C60.1 22.2 60.4 21.9 60.5 21.5L64.8 1C64.9 .5 64.5 0 64 0H61.5C61.1 0 60.8 .3 60.7 .6L59.3 7.6C59.2 8.2 58.5 8.4 58.1 8C57.3 7.3 55.9 6.6 54.2 6.6C49.6 6.6 46.1 10.4 46.1 15.7C46.1 19.6 48.6 22.5 52.1 22.5Z'/%3E%3Cpath fill-rule='evenodd' d='M72 10.4C74.2 10.4 75.4 11.8 75.4 14C75.4 16.8 73.5 18.9 71 18.9C68.8 18.9 67.6 17.5 67.6 15.3C67.6 12.5 69.5 10.4 72 10.4ZM69.4 22.5C71.4 22.5 72.8 21.8 73.6 21.2C73.7 21.1 73.8 21.2 73.8 21.3C73.7 21.8 74.1 22.2 74.6 22.2H77.2C77.6 22.2 77.9 22 78 21.6L80.9 7.9C81.1 7.4 80.7 6.9 80.1 6.9H77.6C77.2 6.9 76.8 7.2 76.7 7.6L76.5 8.7C76.5 8.8 76.3 8.9 76.3 8.8C75.6 7.8 73.9 6.6 71.5 6.6C66.8 6.6 63.3 10.4 63.3 15.7C63.3 19.5 65.8 22.5 69.4 22.5Z'/%3E%3Cpath fill-rule='evenodd' d='M85.2 21.4L81.2 27.4C80.8 28 81.2 28.7 81.8 28.7H84.6C84.8 28.7 85.1 28.6 85.3 28.3L98.5 8.2C98.9 7.6 98.5 6.9 97.8 6.9H95C94.7 6.9 94.5 7.1 94.3 7.3L88.1 17L86.2 7.6C86.1 7.2 85.8 6.9 85.4 6.9H82.9C82.3 6.9 81.9 7.4 82.1 7.9L85.2 21.4Z'/%3E%3Cpath fill-rule='evenodd' d='M110.8 10.4C110.1 8 107.7 6.6 104.9 6.6C100.8 6.6 98.6 8.4 98.6 11.3C98.6 13.5 99.9 15 102 15.7L104.3 16.5C105.4 16.8 105.9 17.4 105.9 18C105.9 18.7 105.1 19.3 103.9 19.3C102.8 19.3 101.7 18.8 101.3 17.8C101.2 17.5 100.9 17.3 100.6 17.3H97.8C97.3 17.3 96.9 17.8 97 18.3C97.5 20.8 100.2 22.5 103.8 22.5C107.6 22.5 110.1 20.7 110.1 17.7C110.1 15.3 108.6 13.9 106.1 13.1L104.3 12.5C103.6 12.2 102.9 11.8 102.9 11.1C102.9 10.3 103.6 9.8 104.7 9.8C105.4 9.8 106.3 10.1 106.6 10.9C106.7 11.2 107 11.4 107.4 11.4H110C110.5 11.4 110.9 10.9 110.8 10.4Z'/%3E%3Cpath fill-rule='evenodd' d='M45 13.4L43.4 21.6C43.3 21.9 43 22.1 42.7 22.1H39.9C39.5 22.1 39.2 21.7 39.2 21.3L40.8 13.7C41.3 11.4 40.4 10.1 38.6 10.1C36.7 10.1 35.2 11.4 34.6 14.4L33.1 21.6C33 21.9 32.8 22.1 32.4 22.1H29.6C29.2 22.1 28.9 21.7 29 21.3L31.9 7.1C32 6.8 32.3 6.5 32.6 6.5H35.7C36 6.5 36.2 6.8 36.1 7C36 7.4 36.4 7.6 36.7 7.4C37.7 6.7 39 6.2 40.4 6.2C40.7 6.2 41 6.3 41.3 6.3C43.7 6.7 45 8.7 45.2 11.1C45.3 11.8 45.2 12.6 45 13.4Z'/%3E%3C/svg%3E");
	background-size: contain;
	background-position: left center;
}

body.quote-flow #masthead .excess-box {
	display: none !important;
}

body.quote-flow .site-content {
	padding-top: var(--qm-header-height);
}

/*
 * Footer in the page flow, on every step. quote-style.css pins it to the
 * bottom (position: absolute) and footer.php reserves its space only after
 * the ~20 scripts below it have loaded, so until then it covered the form.
 * In the flow it can't overlap; footer.php skips the padding when it isn't
 * pinned.
 */
.site-footer {
	position: relative;
	clear: both;
}

/*
 * Journey bar, on every step: a thin line under the header, as on NZ, in place
 * of the four labelled bars. The page heading names the step, the header's
 * back arrow goes back a step, and screen readers hear "Step 2 of 4: Bike".
 * The bar grows from the last step's fill to this one's (template-quote-form.php
 * sets both; quote_journey_progress() in functions.php has the values).
 */
.form-nav ul,
.scrolling-nav {
	display: none !important;
}

body.quote-flow .form-nav {
	top: var(--qm-header-height);
}

.qm-journey {
	height: 5px;
	background: #e5e7eb;
}

.qm-journey-fill {
	display: block;
	width: var(--qm-journey-to);
	height: 100%;
	border-radius: 0 999px 999px 0;
	background: #0299df;
	animation: qm-journey-grow 700ms cubic-bezier(0.2, 0, 0, 1) 150ms both;
}

@keyframes qm-journey-grow {
	from {
		width: var(--qm-journey-from);
	}

	to {
		width: var(--qm-journey-to);
	}
}

@media (prefers-reduced-motion: reduce) {
	.qm-journey-fill {
		animation: none;
	}
}

/* Chat button at the right of the header, as on NZ (quote-mobile.js shows it
   once the CustomGPT chat has loaded). Its floating bubble is hidden then. */
body.quote-flow #masthead .qm-chat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 -10px 0 auto;
	padding: 0;
	border: 0;
	border-radius: var(--qm-radius-pill);
	background: transparent;
	color: var(--qm-ink);
	cursor: pointer;
	transition: background-color 150ms var(--qm-ease);
}

body.quote-flow #masthead .qm-chat[hidden] {
	display: none;
}

body.quote-flow #masthead .qm-chat:hover {
	background: rgb(0 0 0 / 0.05);
}

body.quote-flow #masthead .qm-chat:focus-visible {
	outline: 2px solid var(--qm-action);
	outline-offset: 2px;
}

body.quote-flow #masthead .qm-chat svg {
	width: 24px;
	height: 24px;
}

.qm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

body.quote-flow.qm-chat-ready .cgptcb-chat-bubble {
	display: none !important;
}

/* Labels: all the same weight and colour. quote-style.css greys out the label
   of a field that has a value (.filled), which made Gender look disabled. */
body.quote-flow .quote-form form .label-field label,
body.quote-flow .quote-form form .filled .label-field label {
	color: var(--qm-ink);
	font-size: 15px;
	font-weight: 600;
}

body.quote-flow .quote-form form .form-row .label-field {
	margin-bottom: 8px;
}

/* Fields: 52px tall, white, a light line that darkens on hover and turns ink
   with a soft blue ring on focus. */
body.quote-flow .quote-form form :is(input[type="text"], input[type="email"], input[type="tel"]),
body.quote-flow .quote-form form .filled input[type="tel"],
body.quote-flow .quote-form form a.selectBox-dropdown {
	min-height: 52px;
	border: 1px solid var(--qm-line);
	border-radius: var(--qm-radius-field);
	background-color: var(--qm-surface);
	color: var(--qm-ink);
	box-shadow: none;
	transition: border-color 150ms var(--qm-ease), box-shadow 150ms var(--qm-ease);
}

body.quote-flow .quote-form form :is(input[type="text"], input[type="email"], input[type="tel"]) {
	padding: 12px 16px;
}

body.quote-flow .quote-form form .currency-block input[type="tel"] {
	padding-left: 32px;
}

body.quote-flow .quote-form form .currency-block .currencyinput {
	z-index: 1;
	left: 17px;
	height: 52px;
	line-height: 52px;
	color: var(--qm-ink-soft);
}

/* quote-style.css outlines empty fields in blue or orange (.is-empty) to draw
   the eye; on NZ only focus and the nudge do that. */
body.quote-flow .quote-form form :is(input, a.selectBox-dropdown).is-empty {
	border-color: var(--qm-line);
	box-shadow: none;
}

body.quote-flow .quote-form form :is(input, a.selectBox-dropdown):hover {
	border-color: var(--qm-ink-soft);
}

body.quote-flow .quote-form form :is(input[type="text"], input[type="email"], input[type="tel"]):focus,
body.quote-flow .quote-form form a.selectBox-dropdown:focus,
body.quote-flow .quote-form form a.selectBox-dropdown.selectBox-menuShowing {
	border-color: var(--qm-ink) !important;
	box-shadow: var(--qm-ring);
	outline: none;
}

body.quote-flow .quote-form form input::placeholder {
	color: rgb(107 107 107 / 0.7);
}

/* A ticked box in ink rather than orange. It is inline, not a file:
   quote-style.css's chk-box.svg only downloads on the first tick, so the box
   lagged behind the click. */
body.quote-flow .form-design .check-field input[type="checkbox"]:checked ~ .wpcf7-list-item-label {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23000'/%3E%3Cpath d='M4.5 9.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The on/off switches (Custom parts, Add accessories, Add wheelsets) are the
   same markup inside .quote-title. quote-style.css draws them without a
   background, so keep the tick off them, or it tiles across the switch and
   its label. */
body.quote-flow .form-design .check-field .quote-title input[type="checkbox"]:checked ~ .wpcf7-list-item-label {
	background-image: none;
}

/* The jquery.selectBox dropdowns, drawn to match the text fields. */
body.quote-flow .quote-form form a.selectBox-dropdown {
	display: flex !important;
	align-items: center;
}

body.quote-flow .quote-form form a.selectBox-dropdown .selectBox-label {
	width: auto !important;
	min-width: 0;
	flex: 1;
	padding: 12px 44px 12px 16px;
	text-overflow: ellipsis;
	color: rgb(107 107 107 / 0.7);
}

body.quote-flow .quote-form form a.selectBox-dropdown.sel .selectBox-label,
body.quote-flow .quote-form form .filled a.selectBox-dropdown .selectBox-label {
	color: var(--qm-ink);
}

body.quote-flow .quote-form form a.selectBox-dropdown .selectBox-arrow,
body.quote-flow .quote-form form .error span.selectBox-arrow {
	width: 44px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Step 1 selects, drawn like the text fields from the first paint. On touch
   screens they stay native (quote-mobile.js); elsewhere jquery.selectBox
   replaces them with a control of the same 52px height. Sizing them only once
   the scripts ran made the bike type, date of birth and gender rows grow by
   26px each a few seconds into a slow load, pushing the form down. 16px text
   stops iOS zooming in on focus. A placeholder ("Select", or "" for DD / MM /
   YYYY) shows in the placeholder grey. */
body.quote-step-1 .cycle-section select {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 44px 12px 16px;
	border: 1px solid var(--qm-line);
	border-radius: var(--qm-radius-field);
	background: var(--qm-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") right 12px center / 20px no-repeat;
	color: var(--qm-ink);
	font: inherit;
	font-size: 16px;
	line-height: 1.45;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 150ms var(--qm-ease), box-shadow 150ms var(--qm-ease);
}

body.quote-step-1 .cycle-section select:has(> option:checked:is([value=""], [value="Select"])) {
	color: rgb(107 107 107 / 0.7);
}

body.quote-step-1 .cycle-section select:focus {
	border-color: var(--qm-ink);
	box-shadow: var(--qm-ring);
	outline: none;
}

@supports (corner-shape: squircle) {
	body.quote-step-1 .cycle-section select {
		corner-shape: squircle;
	}
}

/* Suburb matches: a list under the field, in the page flow, with full-width
   rows to tap, rather than a short box floating over the next field.
   quote-mobile.js adds the searching / no match notes. */
body.quote-flow .subrub-auto-complete {
	position: static;
	max-height: none;
	margin-top: 8px;
	padding: 4px;
	overflow: visible;
	border: 0;
	border-radius: var(--qm-radius-field);
	background: var(--qm-surface);
	box-shadow: 0 0 0 1px var(--qm-line);
	cursor: auto;
}

body.quote-flow .subrub-auto-complete ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.quote-flow .subrub-auto-complete li {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 12px;
	border-radius: 10px;
	color: var(--qm-ink);
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color 150ms var(--qm-ease);
}

body.quote-flow .subrub-auto-complete li[hidden] {
	display: none;
}

body.quote-flow .subrub-auto-complete li:hover,
body.quote-flow .subrub-auto-complete li:focus-visible {
	background: var(--qm-action-wash);
	outline: none;
}

body.quote-flow .subrub-auto-complete li:active {
	background: #d3ecf8;
}

body.quote-flow .subrub-auto-complete .qm-suburb-note {
	margin: 0;
	padding: 12px;
	color: var(--qm-ink-soft);
	font-size: 15px;
	line-height: 1.4;
}

/* Validation: one nudge at a time, as on NZ and the 4x4 quote line. A small
   dark card under the first field that still needs an answer, shown when
   "Generate a quote" is tapped and cleared once that field is touched
   (quote-mobile.js adds and removes .qm-nudge). No red: it reads as a
   pointer, not a telling-off. It floats over what is below, so nothing moves,
   and taps go straight through it. The messages' wording is unchanged. */
body.quote-flow .quote-form form .input-field {
	position: relative;
}

body.quote-step-1 form[name="instant_quote_form"] label.error {
	display: none !important;
}

body.quote-step-1 form[name="instant_quote_form"] label.error.qm-nudge {
	display: block !important;
	position: absolute;
	top: 100%;
	left: 0;
	right: auto;
	z-index: 20;
	float: none;
	width: max-content;
	max-width: min(22rem, calc(100vw - 32px));
	margin-top: 10px;
	padding: 12px 16px;
	border-radius: var(--qm-radius-field);
	background: var(--qm-ink);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	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;
}

body.quote-step-1 form[name="instant_quote_form"] label.error.qm-nudge::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 20px;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--qm-ink);
	transform: translateX(-50%) rotate(45deg);
}

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

@media (prefers-reduced-motion: reduce) {
	body.quote-step-1 form[name="instant_quote_form"] label.error.qm-nudge {
		animation: none;
	}
}

/* quote-style.css draws invalid fields in orange with !important. */
body.quote-step-1 form[name="instant_quote_form"] input.error:not(:focus),
body.quote-step-1 form[name="instant_quote_form"] a.selectBox-dropdown.error:not(:focus) {
	border: 1px solid var(--qm-line) !important;
}

body.quote-step-1 form[name="instant_quote_form"] :is(input, a.selectBox-dropdown).error {
	color: var(--qm-ink);
}

body.quote-step-1 form[name="instant_quote_form"] input.error::placeholder {
	color: rgb(107 107 107 / 0.7);
}

/* The primary buttons: 56px, full width on phones, 19px semibold so white on
   the AU blue (3.2:1) meets AA as large text. */
body.quote-flow .quote-form form :is(.generate_quote, .original_submit input, .dummy-pay-btn) {
	min-height: 56px;
	padding: 0 28px;
	border-radius: var(--qm-radius-pill);
	background: var(--qm-action);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 150ms var(--qm-ease), transform 150ms var(--qm-ease);
}

body.quote-flow .quote-form form :is(.generate_quote, .original_submit input, .dummy-pay-btn):hover {
	background: var(--qm-action-hover);
}

body.quote-flow .quote-form form :is(.generate_quote, .original_submit input, .dummy-pay-btn):active:not(:disabled) {
	transform: scale(0.98);
}

body.quote-flow .quote-form form .dots-loader {
	height: 56px;
}

body.quote-flow .quote-form form .dots-loader.active {
	border-radius: var(--qm-radius-pill);
	background-color: var(--qm-action);
}

@media (max-width: 767px) {
	body.quote-flow .quote-form form :is(.generate_quote, .original_submit input, .dummy-pay-btn) {
		width: 100%;
	}
}

/* The price: two cards like NZ's Monthly / Yearly choice on its payment step,
   in place of the black and grey tiles. Each card is still the existing radio
   (an invisible overlay), and custom-script.js still moves .selected between
   them. Sizes are pinned here because validation.js resizes the tiles while
   scrolling on desktop. */
body.quote-step-1 .estimate-section {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	float: none;
	height: auto !important;
	margin-bottom: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	visibility: visible !important;
}

body.quote-step-1 .estimate-section :is(.month, .year) {
	position: relative;
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--qm-line);
	border-radius: var(--qm-radius-card);
	background: var(--qm-surface);
	box-shadow: none;
	color: var(--qm-ink);
	font-family: inherit;
	text-align: left;
	transition: border-color 150ms var(--qm-ease), background-color 150ms var(--qm-ease), box-shadow 150ms var(--qm-ease);
}

body.quote-step-1 .estimate-section :is(.month, .year):hover {
	border-color: var(--qm-ink-soft);
}

body.quote-step-1 .estimate-section :is(.month, .year).selected {
	border-color: var(--qm-action);
	background: var(--qm-action-wash);
	box-shadow: inset 0 0 0 1px var(--qm-action);
}

/* The radio dot, as on NZ: a ring that fills with the action colour. */
body.quote-step-1 .estimate-section :is(.month, .year)::after {
	content: "";
	position: absolute;
	top: 16px;
	right: 16px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid var(--qm-line);
	border-radius: 50%;
	background: var(--qm-surface);
	transition: border-width 150ms var(--qm-ease), border-color 150ms var(--qm-ease);
}

body.quote-step-1 .estimate-section :is(.month, .year).selected::after {
	border: 6px solid var(--qm-action);
}

body.quote-step-1 .estimate-section :is(.month, .year) .quick-table {
	display: block;
	height: auto;
}

/* Amount and period on one baseline: "$20.00", then "Month*" beneath. */
body.quote-step-1 .estimate-section :is(.month, .year) .quick-table-cell {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	height: auto;
	padding-right: 28px;
}

body.quote-step-1 .estimate-section :is(.month, .year) sup,
body.quote-step-1 .estimate-section :is(.price, .year-txt) {
	position: static;
	height: auto;
	font-family: inherit;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	vertical-align: baseline;
	color: var(--qm-ink);
}

body.quote-step-1 .estimate-section :is(.price, .year-txt) sup {
	font-size: inherit;
}

body.quote-step-1 .estimate-section .mont-txt {
	flex-basis: 100%;
	margin-top: 2px;
	color: var(--qm-muted);
	font-size: 15px;
	visibility: visible;
}

body.quote-step-1 .estimate-section .or-circle {
	display: none;
}

/* "Your coverage" info button: bottom right of the yearly card, clear of the
   radio dot, in the theme's grey info icon (the white one was drawn for the
   old dark tile). */
body.quote-step-1 .estimate-section .coverage_pop {
	top: auto;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	background-image: url(../images/info-icon-grey.svg);
	background-size: contain;
}

/* The desktop scroll effect hides the price and the logo and shows a price
   button in the header. The step 1 header is now the plain NZ bar, so keep
   both in place instead. */
body.quote-flow #masthead .after-scroll-btn {
	display: none !important;
}

body.quote-flow #masthead .logo {
	visibility: visible !important;
}

/* Cycle Cover quotes (?promo=CYCLECOVER): the Cycle Cover wordmark, a thin
   divider and the plain Sundays logo, all inlined so they paint with this
   stylesheet. The old cyclecover-quoteline-logo.png paired Cycle Cover with
   the "sundays insurance" lock-up, and wp-custom-style.css hides the logo
   below 568px, which left the slim header empty on phones. Kept when the
   header gains .fixed-header on scroll, where quote-style.css removes it. */
body.quote-flow.cycle-cover-quote #masthead .custom-header .logo {
	display: block;
}

/* The Sundays mark's letters are centred on CYCLE COVER's letters, not on
   the box. The Cycle Cover letters sit 62% of the way down their image (the
   handlebars take the top), so at 19px high in the 28px box their centre is
   16.3px down; the Sundays letters are centred 49.5% down their mark, so at
   22px high its top goes at 5.4px. */
body.quote-flow.cycle-cover-quote #masthead .logo a,
body.quote-flow.cycle-cover-quote .fixed-header .logo a {
	width: 240px;
	height: 28px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111 29'%3E%3Cpath fill-rule='evenodd' d='M7.7 9.8C8.4 9.8 9.3 10.1 9.6 10.9C9.8 11.2 10.1 11.4 10.5 11.4H12.9C13.5 11.4 14 10.8 13.8 10.3C13.1 8 10.7 6.6 7.9 6.6C3.9 6.6 1.6 8.4 1.6 11.3C1.6 13.5 3 15 5.1 15.7L7.3 16.5C8.4 16.8 8.9 17.4 8.9 18C8.9 18.7 8.2 19.3 7 19.3C5.9 19.3 4.7 18.9 4.4 17.9C4.3 17.5 3.9 17.3 3.5 17.3H.9C.3 17.3-.1 17.8 0 18.4C.6 20.9 3.2 22.5 6.8 22.5C10.7 22.5 13.2 20.7 13.2 17.7C13.2 15.3 11.6 13.9 9.2 13.1L7.3 12.5C6.6 12.2 6 11.8 6 11.1C6 10.3 6.7 9.8 7.7 9.8Z'/%3E%3Cpath fill-rule='evenodd' d='M23.8 22.2H25.9C26.6 22.2 27.2 21.7 27.3 21L30.1 7.4C30.2 7 29.9 6.6 29.5 6.6H27C26.5 6.6 26 7 25.9 7.5L24.5 14.5C23.9 17.2 22.6 18.6 20.7 18.6C19 18.6 18.2 17.3 18.6 15.2L20.1 7.7C20.2 7.1 19.8 6.6 19.2 6.6H17.3C16.6 6.6 16.1 7 15.9 7.7L14.4 15.3C13.6 18.8 15.4 22.5 19.1 22.5C20.9 22.5 22.3 21.7 23.2 20.6L23.1 21.2C23 21.7 23.3 22.2 23.8 22.2Z'/%3E%3Cpath fill-rule='evenodd' d='M54.7 10.4C56.8 10.4 58 11.8 58 14C58 16.8 56.1 18.8 53.6 18.8C51.5 18.8 50.3 17.5 50.3 15.3C50.3 12.5 52.2 10.4 54.7 10.4ZM52.1 22.5C54.1 22.5 55.5 21.8 56.2 21.1C56.3 21 56.4 21.1 56.4 21.2C56.3 21.7 56.7 22.2 57.2 22.2H59.7C60.1 22.2 60.4 21.9 60.5 21.5L64.8 1C64.9 .5 64.5 0 64 0H61.5C61.1 0 60.8 .3 60.7 .6L59.3 7.6C59.2 8.2 58.5 8.4 58.1 8C57.3 7.3 55.9 6.6 54.2 6.6C49.6 6.6 46.1 10.4 46.1 15.7C46.1 19.6 48.6 22.5 52.1 22.5Z'/%3E%3Cpath fill-rule='evenodd' d='M72 10.4C74.2 10.4 75.4 11.8 75.4 14C75.4 16.8 73.5 18.9 71 18.9C68.8 18.9 67.6 17.5 67.6 15.3C67.6 12.5 69.5 10.4 72 10.4ZM69.4 22.5C71.4 22.5 72.8 21.8 73.6 21.2C73.7 21.1 73.8 21.2 73.8 21.3C73.7 21.8 74.1 22.2 74.6 22.2H77.2C77.6 22.2 77.9 22 78 21.6L80.9 7.9C81.1 7.4 80.7 6.9 80.1 6.9H77.6C77.2 6.9 76.8 7.2 76.7 7.6L76.5 8.7C76.5 8.8 76.3 8.9 76.3 8.8C75.6 7.8 73.9 6.6 71.5 6.6C66.8 6.6 63.3 10.4 63.3 15.7C63.3 19.5 65.8 22.5 69.4 22.5Z'/%3E%3Cpath fill-rule='evenodd' d='M85.2 21.4L81.2 27.4C80.8 28 81.2 28.7 81.8 28.7H84.6C84.8 28.7 85.1 28.6 85.3 28.3L98.5 8.2C98.9 7.6 98.5 6.9 97.8 6.9H95C94.7 6.9 94.5 7.1 94.3 7.3L88.1 17L86.2 7.6C86.1 7.2 85.8 6.9 85.4 6.9H82.9C82.3 6.9 81.9 7.4 82.1 7.9L85.2 21.4Z'/%3E%3Cpath fill-rule='evenodd' d='M110.8 10.4C110.1 8 107.7 6.6 104.9 6.6C100.8 6.6 98.6 8.4 98.6 11.3C98.6 13.5 99.9 15 102 15.7L104.3 16.5C105.4 16.8 105.9 17.4 105.9 18C105.9 18.7 105.1 19.3 103.9 19.3C102.8 19.3 101.7 18.8 101.3 17.8C101.2 17.5 100.9 17.3 100.6 17.3H97.8C97.3 17.3 96.9 17.8 97 18.3C97.5 20.8 100.2 22.5 103.8 22.5C107.6 22.5 110.1 20.7 110.1 17.7C110.1 15.3 108.6 13.9 106.1 13.1L104.3 12.5C103.6 12.2 102.9 11.8 102.9 11.1C102.9 10.3 103.6 9.8 104.7 9.8C105.4 9.8 106.3 10.1 106.6 10.9C106.7 11.2 107 11.4 107.4 11.4H110C110.5 11.4 110.9 10.9 110.8 10.4Z'/%3E%3Cpath fill-rule='evenodd' d='M45 13.4L43.4 21.6C43.3 21.9 43 22.1 42.7 22.1H39.9C39.5 22.1 39.2 21.7 39.2 21.3L40.8 13.7C41.3 11.4 40.4 10.1 38.6 10.1C36.7 10.1 35.2 11.4 34.6 14.4L33.1 21.6C33 21.9 32.8 22.1 32.4 22.1H29.6C29.2 22.1 28.9 21.7 29 21.3L31.9 7.1C32 6.8 32.3 6.5 32.6 6.5H35.7C36 6.5 36.2 6.8 36.1 7C36 7.4 36.4 7.6 36.7 7.4C37.7 6.7 39 6.2 40.4 6.2C40.7 6.2 41 6.3 41.3 6.3C43.7 6.7 45 8.7 45.2 11.1C45.3 11.8 45.2 12.6 45 13.4Z'/%3E%3C/svg%3E") right 0 top 5.4px / auto 22px no-repeat,
		linear-gradient(var(--qm-line), var(--qm-line)) 145px center / 1px 22px no-repeat,
		url("data:image/png;base64,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") left center / auto 19px no-repeat;
	transform: none;
}

/* Under the price: the excess, folded into a dropdown like NZ's "How we value
   your bike" (quote-mobile.js builds it from the header copy, which the
   existing scripts keep up to date). "Price subject to change" is hidden on
   step 1, at the business's request. */
body.quote-step-1 .estimate-section p.price-msg {
	display: none;
}

.qm-disclosure {
	margin: 4px 0 20px;
}

.qm-disclosure > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	color: var(--qm-ink-soft, #333333);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--qm-line, #d2d6db);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.qm-disclosure > summary:hover {
	text-decoration-color: var(--qm-ink, #000000);
}

.qm-disclosure > summary::-webkit-details-marker {
	display: none;
}

.qm-disclosure > summary::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 150ms var(--qm-ease, ease);
}

.qm-disclosure[open] > summary::after {
	transform: rotate(180deg);
}

.qm-disclosure-body {
	margin: 4px 0 0;
	padding: 16px;
	border-radius: var(--qm-radius-field, 10px);
	background: #f7f7f7;
	color: var(--qm-ink-soft, #333333);
	font-size: 14px;
	line-height: 1.45;
}

/* What the quote covers, shown under the price with CONTINUE (functions.php
   swaps it in for the form). A white card the width of the price cards. The
   ticks and crosses are inline SVG: greenarr.png was an 18px bitmap, blurred on
   high-density screens, and only downloaded once the card appeared. The tick
   keeps greenarr.png's green. "Price subject to change" goes here too, as on
   the price cards. */
body.quote-step-1 .page-in-between {
	text-align: left;
}

body.quote-step-1 .page-in-between > .helper-txt,
body.quote-step-1 .page-in-between > br {
	display: none;
}

body.quote-step-1 .page-in-between > p {
	margin: 28px 0 12px;
	color: var(--qm-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

body.quote-step-1 .page-in-between :is(ul, .box) {
	width: auto;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: var(--qm-radius-card);
	background: var(--qm-surface);
}

body.quote-step-1 .page-in-between ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px 24px;
	padding: 24px;
	text-indent: 0;
}

body.quote-step-1 .page-in-between ul li {
	min-height: 22px;
	padding: 0 0 0 32px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233bb54a'/%3E%3Cpath d='m6 10.2 2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center / 20px 20px;
	color: var(--qm-ink);
	font-size: 16px;
	line-height: 22px;
}

body.quote-step-1 .page-in-between ul li.no-cover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239b9b9b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 6 8 8M14 6l-8 8'/%3E%3C/svg%3E");
	color: var(--qm-muted);
}

body.quote-step-1 .page-in-between ul li .helper-txt {
	display: inline;
	color: var(--qm-muted);
	font-size: 14px;
}

body.quote-step-1 .page-in-between .box {
	padding: 20px 24px;
}

body.quote-step-1 .page-in-between .box .fright.quote-title {
	right: 24px;
}

body.quote-step-1 form[name="instant_quote_form"] .original_submit {
	margin-top: 28px;
}

/*
 * Steps 2 to 4. The fields, labels, dropdowns, tick boxes and buttons above
 * apply here too (body.quote-flow); these rules cover what only these steps
 * have.
 */

/* Back, as on the Velosure quote lines: not in the header but by the step,
   a grey circle left of the page title and a "Back" button left of the main
   button (quote-mobile.js adds both; they press the header's .prev-step). */
body.quote-flow #masthead .back-arrow {
	display: none;
}

.qm-title-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 0 4px;
}

body.quote-flow .quote-form .qm-title-row > h1.entry-title {
	margin: 0;
}

body.quote-step-4 .quote-form .qm-title-row {
	margin-bottom: 20px;
}

.qm-back-circle {
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' 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(--qm-ease);
}

.qm-back-circle:hover {
	background-color: rgb(0 0 0 / 0.1);
}

.qm-back-circle:focus-visible,
.qm-back-button:focus-visible {
	outline: 2px solid var(--qm-action);
	outline-offset: 2px;
}

/* "Back" and the main button on one row, back first. On phones the main
   button takes the rest of the row; on wider screens it keeps its size on the
   right. The busy dots (.dots-loader) sit over the main button, at the row's
   right edge, rather than centred on the row. */
body.quote-flow .quote-form .qm-has-back {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

body.quote-flow .quote-form .qm-has-back > :is(.generate_quote, .dummy-pay-btn) {
	flex: 1;
	width: auto;
	margin: 0;
}

body.quote-flow .quote-form .qm-has-back > .dots-loader {
	left: auto;
	right: 0;
	transform: none;
}

.qm-back-button {
	flex: none;
	min-height: 56px;
	margin: 0;
	padding: 0 24px;
	border: 1px solid var(--qm-line);
	border-radius: var(--qm-radius-pill);
	background: var(--qm-surface);
	color: var(--qm-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 150ms var(--qm-ease), transform 150ms var(--qm-ease);
}

.qm-back-button:hover {
	border-color: var(--qm-ink-soft);
}

.qm-back-button:active {
	transform: scale(0.98);
}

@media (min-width: 768px) {
	body.quote-flow .quote-form .qm-has-back > :is(.generate_quote, .dummy-pay-btn) {
		flex: none;
		min-width: 200px;
		margin-left: auto;
	}
}

@supports (corner-shape: squircle) {
	.qm-back-button {
		corner-shape: squircle;
	}
}

/* Page title in the quote line's own face (it was Lato), over the form. */
body.quote-flow .quote-form h1.entry-title {
	margin: 8px 0 4px;
	color: var(--qm-ink);
	font-family: inherit;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: left;
}

/* Step 4 has no price line under its title; give the first label room
   (on the title's row, above, when it has the back circle). */
body.quote-step-4 .quote-form h1.entry-title {
	margin-bottom: 20px;
}

body.quote-flow .quote-form h3 {
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

/* Project 529 registration (step 2): Project 529's badge beside the heading,
   and room above and below the tick box. The block is Contact Form 7 markup
   with no class of its own, hence :has(). */
body.quote-flow .quote-form .form-row:has(#register_529) > .label-field {
	display: flex;
	align-items: center;
	gap: 12px;
	float: none;
	width: auto;
	margin-bottom: 0;
}

body.quote-flow .quote-form .form-row:has(#register_529) > .label-field::before {
	content: "";
	flex: none;
	width: 48px;
	height: 44px;
	background: url(../images/project529-badge.svg) center / contain no-repeat;
}

body.quote-flow .quote-form .form-row:has(#register_529) > .label-field h3 {
	margin: 0;
}

body.quote-flow .quote-form .form-row:has(#register_529) > .check-field {
	margin: 0;
	padding: 16px 0;
}

/* The note under the tick box: supporting text, set like the other notes
   rather than in full-size black. */
body.quote-flow .quote-form .form-row:has(#register_529) > div:not([class]) {
	color: var(--qm-ink-soft);
	font-size: 15px;
	line-height: 1.45;
}

/* The price under the title (quote-mobile.js), with the excess dropdown. It
   replaces the black and grey price bar pinned to the bottom on phones. */
body.quote-flow .footer-pricebtn {
	display: none !important;
}

/* The price under the title (quote-mobile.js), with the excess dropdown. */
.qm-price-line {
	margin: 0;
	color: var(--qm-ink-soft);
	font-size: 16px;
	line-height: 1.45;
}

.qm-price-line strong {
	color: var(--qm-ink);
	font-weight: 700;
}

.qm-price-line + .qm-disclosure {
	margin: 0 0 16px;
}

/* Switch and tick-box labels were light grey until switched on (1.9:1 on the
   page background), so they read as disabled. */
body.quote-flow .form-design .check-field .wpcf7-list-item-label {
	color: var(--qm-ink-soft);
}

body.quote-flow .form-design .check-field input:checked ~ .wpcf7-list-item-label {
	color: var(--qm-ink);
}

/* Bike brand search (select2), drawn like the other fields. Its list opens in
   a container at the end of the page, so those rules are not form-scoped. */
body.quote-flow .quote-form form .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: 52px;
	border: 1px solid var(--qm-line);
	border-radius: var(--qm-radius-field);
	background: var(--qm-surface);
	transition: border-color 150ms var(--qm-ease), box-shadow 150ms var(--qm-ease);
}

body.quote-flow .quote-form form .select2-container--default .select2-selection--single:hover {
	border-color: var(--qm-ink-soft);
}

body.quote-flow .quote-form form .select2-container--default:is(.select2-container--open, .select2-container--focus) .select2-selection--single {
	border-color: var(--qm-ink);
	box-shadow: var(--qm-ring);
	outline: none;
}

body.quote-flow .quote-form form .select2-container--default .select2-selection__rendered {
	flex: 1;
	min-width: 0;
	padding: 0 44px 0 16px;
	border: 0;
	background: transparent;
	color: var(--qm-ink);
	font-size: 16px;
	line-height: 50px;
}

body.quote-flow .quote-form form .select2-container--default .select2-selection__placeholder {
	background: transparent;
	color: rgb(107 107 107 / 0.7);
}

body.quote-flow .quote-form form .select2-container--default .select2-selection__arrow {
	top: 0;
	right: 0;
	width: 44px;
	height: 50px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") center / 20px no-repeat;
}

body.quote-flow .quote-form form .select2-container--default .select2-selection__arrow b {
	display: none;
}

body.quote-flow .select2-container--default .select2-dropdown {
	overflow: hidden;
	border: 1px solid var(--qm-line);
	border-radius: var(--qm-radius-field);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

body.quote-flow .select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--qm-line);
	border-radius: 10px;
	font-size: 16px;
}

body.quote-flow .select2-container--default .select2-results__option {
	padding: 12px 16px;
	font-size: 16px;
}

body.quote-flow .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--qm-action-wash);
	color: var(--qm-ink);
}

@supports (corner-shape: squircle) {
	body.quote-flow .quote-form form .select2-selection--single,
	body.quote-flow .select2-dropdown {
		corner-shape: squircle;
	}
}

/* Step 4: monthly or yearly as two cards with a radio dot, like step 1's price,
   in place of the black and grey tiles. They stay the existing buttons;
   functions.php moves .btn-selected and rewrites their figures. The Westpac
   card frame below is the gateway's own and is left as it is. */
body.quote-step-4 .payment-btn {
	clear: both;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

body.quote-step-4 .payment-btn .input-field {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.quote-step-4 .payment-btn .payment-label {
	position: relative;
	display: block;
	width: 100%;
	min-height: 64px;
	padding: 16px 44px 16px 16px;
	border: 1px solid var(--qm-line);
	border-radius: var(--qm-radius-card);
	background: var(--qm-surface);
	box-shadow: none;
	color: var(--qm-ink) !important;
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: border-color 150ms var(--qm-ease), background-color 150ms var(--qm-ease), box-shadow 150ms var(--qm-ease);
}

body.quote-step-4 .payment-btn .payment-label:is(:hover, .mousehover) {
	border-color: var(--qm-ink-soft);
	background: var(--qm-surface);
	box-shadow: none;
}

body.quote-step-4 .payment-btn .payment-label.btn-selected {
	border-color: var(--qm-action);
	background: var(--qm-action-wash);
	box-shadow: inset 0 0 0 1px var(--qm-action);
}

body.quote-step-4 .payment-btn .payment-label::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border: 1.5px solid var(--qm-line);
	border-radius: 50%;
	background: var(--qm-surface);
	transition: border-color 150ms var(--qm-ease), box-shadow 150ms var(--qm-ease);
}

body.quote-step-4 .payment-btn .payment-label.btn-selected::after {
	border-color: var(--qm-action);
	box-shadow: inset 0 0 0 4px var(--qm-surface), inset 0 0 0 10px var(--qm-action);
}

/* Apply a promo code: a secondary button beside the field, the field's height. */
body.quote-step-4 .promo-code button.promocode_apply {
	min-height: 52px;
	padding: 0 20px;
	border: 1px solid var(--qm-line);
	border-radius: var(--qm-radius-field);
	background: var(--qm-surface);
	box-shadow: none;
	color: var(--qm-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition: border-color 150ms var(--qm-ease), background-color 150ms var(--qm-ease);
}

body.quote-step-4 .promo-code button.promocode_apply:hover:not(:disabled) {
	border-color: var(--qm-ink-soft);
}

body.quote-step-4 .promo-code button.promocode_apply:disabled {
	color: var(--qm-muted);
	cursor: default;
}

@supports (corner-shape: squircle) {
	body.quote-step-4 .payment-btn .payment-label,
	body.quote-step-4 .promo-code button.promocode_apply {
		corner-shape: squircle;
	}
}

/*
 * Keyboard focus. quote-style.css removes every focus outline; bring one back
 * for keyboard users only, in the brand blue.
 */
.form-design input[type="button"]:focus-visible,
.form-design input[type="submit"]:focus-visible,
.form-design button:focus-visible,
.form-design a.selectBox:focus-visible,
.form-design input[type="checkbox"]:focus-visible ~ .wpcf7-list-item-label,
.form-design input[type="radio"]:focus-visible ~ .wpcf7-list-item-label {
	outline: 2px solid #0299df;
	outline-offset: 2px;
}

/*
 * The last of the 2019 controls on steps 2 to 4, in the same tokens as the
 * fields above: the on/off switches, the round add buttons, the bike brand
 * box's blue glow, the (i) help notes and the Cycle Cover pop-ups.
 */

/* On/off switches (Custom parts, Add accessories, Add wheelsets): the action
   blue rather than the 2019 blue when on. */
body.quote-flow .quote-title input[type="checkbox"]:checked ~ .wpcf7-list-item-label::after {
	background: var(--qm-action);
	opacity: 0.35;
}

body.quote-flow .quote-title input[type="checkbox"]:checked ~ .wpcf7-list-item-label::before {
	background: var(--qm-action);
}

/* "Add another" and "Add a bicycle": the same round buttons and white icons,
   in the action blue, with labels set like the field labels. */
body.quote-flow .quote-form .add_another .add-bicycle button,
body.quote-flow .quote-form .add_cycle::after,
body.quote-flow .quote-form .add_cycle .add-bicycle-block::after {
	background-color: var(--qm-action);
}

body.quote-flow .quote-form .add_another .add-bicycle button:hover,
body.quote-flow .quote-form .add_cycle:hover::after,
body.quote-flow .quote-form .add_cycle .add-bicycle-block:hover::after {
	background-color: var(--qm-action-hover);
}

body.quote-flow .quote-form .add-bicycle > span,
body.quote-flow .quote-form .add_cycle span {
	width: auto;
	color: var(--qm-ink);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

/* The brand box: quote-style.css still drew a 2019-blue ring inside it on
   hover and while open, over the field's own border. */
body.quote-flow .quote-form .brand-box .select2-selection__rendered,
body.quote-flow .quote-form .brand-box .select2-selection__rendered:hover,
body.quote-flow .quote-form .brand-box .select2-container--open .select2-selection__rendered {
	border: 0;
	box-shadow: none;
}

/* (i) help notes: the same black note as step 1's validation nudge. */
body.quote-flow .info-popup {
	padding: 12px 16px;
	border-radius: var(--qm-radius-field);
	background: var(--qm-ink);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
	color: #ffffff;
	font-size: 14px;
	line-height: 1.4;
}

body.quote-flow .info-detail .info-tooltip {
	border-color: var(--qm-ink);
	background: var(--qm-ink);
}

/* Step 4 declarations: the (i) follows the last word. quote-style.css floats
   it right, so on a declaration that wraps it sat alone at the far edge. The
   !important beats the margin the form content sets inline. */
body.quote-flow .form-design .check-field .label-field .info-detail.right {
	float: none;
	display: inline-block;
	margin: 0 0 0 4px !important;
	vertical-align: -4px;
}

/* Cycle Cover pop-ups (retrieve a quote, confirm the email, sent): a card
   with step 1's field and buttons. quote-style.css gave the box a 450px
   minimum width, wider than a phone, and the layer z-index 1, so the header
   and the switch knobs showed through it. */
body.quote-flow .modal {
	z-index: 10000;
}

body.quote-flow .modal-content {
	width: min(480px, calc(100% - 32px));
	min-width: 0;
	margin: 10vh auto;
	overflow: hidden;
	border: 0;
	border-radius: var(--qm-radius-card);
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
}

body.quote-flow .modalHead {
	padding: 20px 24px;
}

body.quote-flow .modalHead p {
	color: var(--qm-ink);
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

body.quote-flow .cycleCoverModalClose {
	line-height: 1;
}

body.quote-flow .modalSubHead {
	padding: 16px 24px;
	border-color: var(--qm-line);
	text-align: left;
}

body.quote-flow .modalSubHead p {
	opacity: 1;
	color: var(--qm-ink-soft);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
}

body.quote-flow .modalBody {
	padding: 24px;
}

body.quote-flow .modalBody label {
	padding-bottom: 8px;
	color: var(--qm-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
}

body.quote-flow .modalBody input[type="text"] {
	height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--qm-line);
	border-radius: var(--qm-radius-field);
	background: var(--qm-surface);
	color: var(--qm-ink);
	font-size: 16px;
}

body.quote-flow .modalBody input[type="text"]:focus {
	border-color: var(--qm-ink);
	box-shadow: var(--qm-ring);
	outline: none;
}

body.quote-flow .modalBody .btn-orange {
	min-height: 56px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--qm-radius-pill);
	background: var(--qm-action);
	box-shadow: none;
	color: #ffffff;
	font-family: inherit;
	font-size: 17px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.02em;
}

body.quote-flow .modalBody .btn-orange:hover {
	background: var(--qm-action-hover);
}

body.quote-flow .modalBody .btn-orange:is(.btn-gray, .btn-empty) {
	border: 1px solid var(--qm-line);
	background: var(--qm-surface);
}

body.quote-flow .modalBody .btn-orange:is(.btn-gray, .btn-empty) a {
	color: var(--qm-ink) !important;
}

/* EMAIL QUOTE on the Cycle Cover payment step: a secondary button under the
   title (quote-mobile.js moves it there from .form-nav). */
body.quote-flow .quote-form .email-quote-btn-wrapper {
	position: static;
	max-width: none;
	margin: -8px 0 20px;
}

body.quote-flow .email-quote-btn-wrapper input[type="button"].email_quote {
	position: static;
	padding: 10px 16px;
	border: 1px solid var(--qm-line);
	border-radius: var(--qm-radius-pill);
	background: var(--qm-surface);
	color: var(--qm-ink);
	font-family: inherit;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
}

@supports (corner-shape: squircle) {
	body.quote-flow :is(.modal-content, .modalBody input[type="text"], .modalBody .btn-orange, .email-quote-btn-wrapper .email_quote, .info-popup) {
		corner-shape: squircle;
	}
}