/*
 * Full quote (/quote/): mobile usability layer.
 *
 * Enqueued on the quote page only (see enqueue_full_quote_assets() in
 * functions.php). Goes with assets/js/full-quote.js. Remove both files and
 * that function to roll back.
 *
 * The quote plugin's rules start with "#main article .entry-content .quote23"
 * and some use !important, so these start with "body.quote-line #main .quote23"
 * to outrank them.
 */

body.quote-line #main .quote23 {
	--fq-ink: var(--vq-ink);
	--fq-action: var(--vq-action);
	--fq-line: var(--vq-line);
	--fq-ease: var(--vq-ease);
}

/* Progress through the quote as a thin bar along the bottom of the header,
   as on the quick quote, in place of the numbered steps (full-quote.js adds
   it). The bike and personal details steps carry on from the quick quote's
   12.5% and 37.5%, and payment is the last stretch. */
body.quote-line #masthead .fq-progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: rgb(7 136 59 / 0.12);
}

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

body.quote-line #masthead .fq-progress[data-stage="later"] > span {
	width: 70%;
}

body.quote-line #masthead .fq-progress[data-stage="payment"] > span {
	width: 87.5%;
}

@media (prefers-reduced-motion: reduce) {
	body.quote-line #masthead .fq-progress > span {
		transition: none;
	}
}

/* The header, as on the new Velosure quote line and the quick quote's pages
   (quote-mobile.css): the logo on the left and, on phones, chat on the
   right, 64px tall, its row lined up with the form and summary below
   (1080px wide on desktop). Back is by the step, not up here. It was 81px
   (an inline style, for a "Call us" bar this page hides), with the logo
   sitting high, or on the right at some widths. The menu button and its
   menu (empty here) go on phones and tablets; from 992px the theme shows
   the menu inline, on the right. */
body.quote-line #masthead {
	min-height: 64px !important;
}

/* The header row is 63px plus the header's 1px line. Its padding is 2px
   heavier below, so the logo sits in the visual middle above the progress
   bar along the bottom. The page starts under it: 80px was room for the
   81px header. */
body.quote-line #main article .entry-content .quote23 {
	padding-top: 64px;
}

body.quote-line #masthead #site-navigation {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: none;
	min-height: 63px;
	padding: 8px max(30px, calc((100% - 1080px) / 2)) 12px;
}

body.quote-line #masthead #site-navigation > .wrapper_logo {
	line-height: 0;
}

/* From 992px the theme shows its menu inline: "Call us on 1300 83 56 78",
   whose item carries 21px and 16px of padding. That made the header 98px
   on desktop, and the page only leaves 64px for it, so the step title sat
   behind the header. The item now fits the row, level with the logo. */
@media (min-width: 992px) {
	body.quote-line #masthead #primary-menu > li.call {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

body.quote-line #masthead #site-navigation > .wrapper_logo img {
	margin: 0;
}

@media (max-width: 991.98px) {
	body.quote-line #masthead .navbar-toggler,
	body.quote-line #masthead #primary-menu-wrap {
		display: none !important;
	}
}

@media (max-width: 767.98px) {
	body.quote-line #masthead #site-navigation {
		padding-inline: 20px 12px;
	}

	body.quote-line #masthead #site-navigation > .wrapper_logo img {
		max-width: 88px;
	}
}

/* The step title (full-quote.js) in place of the product name:
   left-aligned, smaller, so the form starts higher. */
body.quote-line #main .quote23 .quote-line-header > h2 {
	margin: 0;
	color: var(--vq-heading);
	font-size: 28px;
	font-weight: 500;
	line-height: 34px;
	letter-spacing: -0.03em;
	text-align: left;
}

/* The form card, as velosure.com.au's cards: 13px corners and its soft
   shadow, where it had square corners. */
body.quote-line #main .quote23 .tab-content .parentblock {
	border-radius: var(--vq-radius-card);
	box-shadow: var(--vq-shadow-card);
}

/* The optional extras (custom parts, accessories, wheelsets, travel): one
   even row each, the label level with its +, lined up with the questions
   above. Each row stacked two paddings (10px and 25px above, 25px and 15px
   below) and a faint shadow of its own. */
body.quote-line #main .quote23 .tab-content .childblock {
	margin-inline: 30px;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

body.quote-line #main .quote23 .tab-content .childblock > .pretty {
	padding: 16px 0;
}

/* Phones: one 20px gutter, as the header's logo and the quick quote. The
   page had 30px at its edges and the card another 30px inside, so fields
   sat 60px in; now the title, price bar and card start 20px in, and every
   question 20px inside the card, on every step. The theme already did this
   at 376px and below, except for the serial number, which one of its rules
   holds at 30px with !important. The extras rows, the Project 529 card and
   the one-at-a-time message follow the same edge. */
@media (max-width: 767.98px) {
	body.quote-line #main article .entry-content .quote23 {
		padding-left: 20px;
		padding-right: 20px;
	}

	body.quote-line #main .quote23 .tab-content [class*="quote-col-"][class]:not(.childblock *, .subblock *) {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	body.quote-line #main .quote23 .tab-content .childblock {
		margin-inline: 20px;
	}

	/* [class] outranks the rules for these further down. */
	body.quote-line #main .quote23.fq-nudges .help-block.form-error.fq-nudge[class] {
		left: 20px;
		max-width: calc(100% - 40px);
	}

	body.quote-line #main .quote23 .subblock[class]:has(> .project-529-logo) {
		margin-inline: 20px !important;
	}
}

/* Buttons, as on the quick quote and velosure.com.au: the step's main button
   56px with 8px corners, darker on hover; "Add Another Bike" as the site's
   outlined button. */
body.quote-line #main .quote23 :is(.generate_quote_next, .generate_quote_dup) {
	min-height: 56px;
	border-radius: var(--vq-radius);
	font-size: 16px;
	font-weight: 500;
	transition: background-color 150ms var(--vq-ease);
}

body.quote-line #main .quote23 :is(.generate_quote_next, .generate_quote_dup):hover:not(:disabled) {
	background: var(--vq-action-hover) !important;
}

/* The theme writes "Add Another Bike" over this link as an ::after box with
   a thin green border; that box is restyled, the wording kept. "form" in
   the selector outranks the theme's rule, which prints later. */
body.quote-line #main .quote23 .button-with-margin a.add-bike-action {
	min-height: 52px;
	margin-bottom: 0;
}

body.quote-line #main .quote23 form .button-with-margin a.add-bike-action::after {
	border: 2px solid var(--vq-ink) !important;
	border-radius: var(--vq-radius);
	color: var(--vq-ink);
	font-weight: 500;
	line-height: 48px;
	text-align: center;
	transition: background-color 150ms var(--vq-ease);
}

body.quote-line #main .quote23 form .button-with-margin a.add-bike-action:hover::after {
	background: var(--vq-quiet);
}

body.quote-line #main .quote23 .button-with-margin a.add-bike-action:focus-visible {
	outline: 2px solid var(--vq-ink);
	outline-offset: 2px;
}

/* The numbered steps and their line are hidden, not removed: the plugin's
   "Previous step" link reads them to find the step to go back to. */
body.quote-line #main .quote23 .quote-line-header .gray-line,
body.quote-line #main .quote23 .quote-line-header ul.tabs {
	display: none;
}

/* Back, as on the new Velosure quote line: a slim ink chevron in a light
   grey 40px circle left of the step title, and a "Back" button left of the
   step's main button. Both are the plugin's own controls. The title's was
   an arrow drawn as a "<" character, or a text link on wide screens; the
   button's was hidden. The plugin hides the title's with visibility and
   never shows it again, and shows it with an inline display, hence the
   !important. None on the first step, with nowhere to go back to. */
/* The title row keeps the same 30px above and below at every width. From
   1025px the theme made it 50px, which left the back circle (placed for the
   30px) 23px above the title and a wide gap under it. [class] outranks the
   theme's rule, which prints later. */
body.quote-line #main .quote23 .quote-line-header[class] {
	position: relative;
	padding-top: 30px;
	padding-bottom: 30px;
}

/* With one bike its block has no heading (full-quote.js): it would read
   "Bike 1" under the step's "Your bike". The first question then opens the
   card, 20px in like everything else in it: no divider above it (the theme
   sets that with !important) and no 28px gap above its label, which is
   there to separate a question from the one before. The "$" is placed from
   the top of the question, so it moves up by the same 28px. */
body.quote-line #main .quote23 #tab-1.fq-one-bike .parentblock .quote-col-1.bike {
	display: none;
}

body.quote-line #main .quote23 #tab-1.fq-one-bike .parentblock .quote-col-1.bikeValue {
	border-top: 0 !important;
}

body.quote-line #main .quote23 #tab-1.fq-one-bike .parentblock .quote-col-1.bikeValue > label {
	margin-top: 0;
}

body.quote-line #main .quote23 #tab-1.fq-one-bike .parentblock .bikeValue .input-icon {
	top: 46px;
}

/* The extras (custom parts, accessories, wheelsets, travel) sat 2px under
   the transport answers with a line between, so the line touched the
   buttons. The line goes and they start 24px lower (the theme pins that
   margin with !important). Opened, each one's header, line and first field
   are 16px and 21px apart, where they were 40px and 44px; and "Remove" and
   "Add another" (floats the block didn't wrap) have 24px under them before
   the next extra's line, where they touched it. */
body.quote-line #main .quote23 #tab-1 .childblock:has(> .quote-col-1.parts) {
	margin-top: 24px !important;
	border-top: 0;
}

body.quote-line #main .quote23 #tab-1 .childblock > .quote-col-1.pretty {
	padding-bottom: 16px !important;
}

body.quote-line #main .quote23 #tab-1 .childblock .subblock {
	padding-top: 20px !important;
}

body.quote-line #main .quote23 #tab-1 .childblock .subblock > .quote-col-1:first-of-type > label {
	margin-top: 0 !important;
}

body.quote-line #main .quote23 #tab-1 .childblock .subblock .addremove {
	display: flow-root;
	padding-bottom: 24px;
}

/* The theme positions this container at the same strength, later. */
body.quote-line #main .quote23 form .quote-line-header .one-column {
	position: static;
}

body.quote-line #main .quote23 form .quote-line-header .one-column .backbutton {
	position: absolute;
	top: 27px;
	left: 0;
	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;
	font-size: 0;
	text-indent: 0;
	cursor: pointer;
	transition: background-color 150ms var(--vq-ease);
}

body.quote-line #main .quote23 form .quote-line-header .one-column .backbutton::after {
	content: none;
}

body.quote-line #main .quote23 form.fq-later-step .quote-line-header .one-column .backbutton {
	display: block !important;
	visibility: visible !important;
}

/* Hidden until full-quote.js has marked a later step, so neither flashes
   on the first step while the page loads. */
body.quote-line #main .quote23 form:not(.fq-later-step) .backbutton {
	display: none !important;
}

body.quote-line #main .quote23 form .quote-line-header .one-column .backbutton:hover {
	background-color: var(--vq-quiet-hover);
}

body.quote-line #main .quote23 form .quote-line-header .one-column .backbutton:focus-visible {
	outline: 2px solid var(--vq-ink);
	outline-offset: 2px;
}

/* Where the circle shows, the title starts clear of it. The circle is
   centred on the title's 34px line, which starts 30px down. */
body.quote-line #main .quote23 form.fq-later-step .quote-line-header > h2 {
	padding-left: 52px;
}

/* "Back" and the main button on one row, back first, as outlined as "Add
   Another Bike". The main button takes the rest of the row. */
body.quote-line #main .quote23 form .button-with-margin {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

body.quote-line #main .quote23 form .button-with-margin > a.add-bike-action {
	flex: 0 0 100%;
}

/* On phones the main button takes the rest of the row; on wide screens
   the plugin holds it at 200px on the right, with "Back" on the left, as on
   the new quote line. */
body.quote-line #main .quote23 form .button-with-margin > .generate_quote_next {
	flex: 1;
}

body.quote-line #main .quote23 form.fq-later-step .button-with-margin > .backbutton {
	display: block !important;
	visibility: visible !important;
	flex: none;
	width: auto !important;
	min-height: 56px;
	margin: 0;
	padding: 0 24px;
	border: 2px solid var(--vq-ink);
	border-radius: var(--vq-radius);
	background: #fff;
	color: var(--vq-ink);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 150ms var(--vq-ease);
}

body.quote-line #main .quote23 form .button-with-margin > .backbutton:hover {
	background: var(--vq-quiet);
}

body.quote-line #main .quote23 form .button-with-margin > .backbutton:focus-visible {
	outline: 2px solid var(--vq-ink);
	outline-offset: 2px;
}

@media (max-width: 1024px) {
	/* The price under the title, on every step (full-quote.js; the theme
	   copies it from the second step, quoteline-custom.js): a quiet bar with
	   the monthly and annual price side by side, as on velosure.com.au's
	   cards. Display only, as the sidebar's is. */
	/* The title, the price and the first question sit as close as the quick
	   quote's: 20px under the price, where the step's own 30px left a wide
	   gap. Desktop has no price here and keeps 30px (the back circle). */
	body.quote-line #main .quote23 .quote-line-header[class] {
		padding-bottom: 20px;
	}

	body.quote-line #main .quote23 .quote-line-header .one-column > .priceblock {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 16px 0 0;
		padding: 12px 0;
		border-radius: var(--vq-radius-card);
		background: var(--vq-surface);
	}

	body.quote-line #main .quote23 .quote-line-header .one-column > .priceblock .pricesubblock {
		display: flex;
		flex-direction: column;
		align-items: center;
		float: none;
		width: auto;
		margin: 0;
		padding: 0 12px;
		border: 0;
	}

	body.quote-line #main .quote23 .quote-line-header .one-column > .priceblock .pricesubblock + .pricesubblock {
		border-left: 1px solid var(--vq-line);
	}

	/* As every price on the quote pages: the cycle above, the price under it
	   at weight 500, written "$14.20" (full-quote.js drops the space). */
	body.quote-line #main .quote23 .quote-line-header .one-column > .priceblock .price {
		color: var(--vq-heading) !important;
		font-size: 22px;
		font-weight: 500;
		line-height: 28px;
		letter-spacing: -0.02em;
		font-variant-numeric: tabular-nums;
	}

	body.quote-line #main .quote23 .quote-line-header .one-column > .priceblock .mont-txt {
		order: -1;
		color: var(--vq-muted) !important;
		font-size: 13px;
		line-height: 18px;
	}

	body.quote-line #main .quote23 .quote-line-header .one-column > .priceblock .special-txt:empty {
		display: none;
	}

	/* On the payment step the Monthly and Annually cards carry the prices,
	   and with no figure yet (full-quote.js) there is nothing to show. */
	body.quote-line #main .quote23 form.fq-on-payment .quote-line-header .one-column > .priceblock,
	body.quote-line #main .quote23 .quote-line-header .one-column > .priceblock.fq-no-price {
		display: none;
	}

	/* The summary under the form: the price is already at the top, and the
	   step's button is just above, so their copies here go. The cover list
	   (with the excess) and the promo code fold behind a row each
	   (full-quote.js); the PDS notice and the liability add-on stay. */
	body.quote-line #main .quote23 .sidebar-page .pricetopblock .estimate-section > :is(.month, .year),
	body.quote-line #main .quote23 .sidebar-page .pricetopblock .priceblock,
	body.quote-line #main .quote23 .sidebar-page .button-no-margin:has(> .generate_quote_dup) {
		display: none !important;
	}

	/* Everything in the summary on the same edge as the fold rows: the PDS
	   notice, the cover list and the liability add-on had their own indents.
	   The add-on's label is ink, where its grey read as switched off. "form"
	   in the selectors outranks the theme's rules, which print later. */
	body.quote-line #main .quote23 form .sidebar-page .sidebar-description {
		margin: 0;
		padding: 16px 0 0 !important;
	}

	/* The promo code, opened: the field and "Apply" on one row at the
	   fields' size, where it was a grey box with a small field pushed right.
	   Its "Promo code" text is the field's name (full-quote.js), so it is
	   only hidden from view. */
	body.quote-line #main .quote23 form .sidebar-page .promoblock {
		display: flex;
		gap: 8px;
		padding: 16px 0;
		background: transparent;
		text-align: left;
	}

	body.quote-line #main .quote23 form .sidebar-page .promoblock > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	body.quote-line #main .quote23 form .sidebar-page .promoblock .discountCodeSide {
		flex: 1;
		width: auto;
		height: 52px;
		margin: 0;
		padding: 12px 14px !important;
		border: 2px solid var(--vq-line);
		border-radius: var(--vq-radius);
		color: var(--vq-ink);
		font-size: 16px;
	}

	body.quote-line #main .quote23 form .sidebar-page .promoblock .discountCodeSide:focus {
		border-color: var(--vq-action) !important;
		box-shadow: var(--vq-ring);
		outline: none;
	}

	body.quote-line #main .quote23 form .sidebar-page .promoblock .applyPromo {
		height: 52px;
		margin: 0;
		padding: 0 20px;
		border: 0;
		border-radius: var(--vq-radius);
		color: #fff;
		font-size: 16px;
		font-weight: 500;
	}

	body.quote-line #main .quote23 form .sidebar-page .detail-content > div > ul > li {
		padding-left: 0;
	}

	body.quote-line #main .quote23 .sidebar-page .button-no-margin:has(.form-row) {
		margin: 24px 0 0;
	}

	body.quote-line #main .quote23 .sidebar-page .button-no-margin .form-row {
		margin: 0;
	}

	body.quote-line #main .quote23 .sidebar-page .button-no-margin .form-group {
		margin: 0;
		padding: 0;
	}

	body.quote-line #main .quote23 .sidebar-page .button-no-margin .form-group label {
		color: var(--vq-ink) !important;
	}

	body.quote-line #main .quote23 form:not(.fq-open-promo) .sidebar-page .promoblock,
	body.quote-line #main .quote23 form:not(.fq-open-cover) .sidebar-page .detail-content > div > ul,
	body.quote-line #main .quote23 form:not(.fq-open-cover) .sidebar-page div.sidebar-description {
		display: none !important;
	}

	body.quote-line #main .quote23 .sidebar-page .fq-fold {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 56px;
		margin: 0;
		padding: 0 4px 0 0;
		border: 0;
		border-bottom: 1px solid var(--vq-line);
		background: transparent 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 4px center / 18px 18px;
		color: var(--vq-ink);
		font: inherit;
		font-size: 16px;
		font-weight: 500;
		text-align: left;
		text-transform: none;
		cursor: pointer;
	}

	body.quote-line #main .quote23 .sidebar-page .fq-fold[aria-expanded="true"] {
		background-image: 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='m18 15-6-6-6 6'/%3e%3c/svg%3e");
	}

	body.quote-line #main .quote23 .sidebar-page .fq-fold:focus-visible {
		outline: 2px solid var(--vq-ink);
		outline-offset: 2px;
	}

}

/* Wide screens keep the sidebar as it is: no price copy at the top and no
   fold rows (full-quote.js adds them for phones and tablets). Its card has
   the same corners and shadow as the form card beside it. */
@media (min-width: 1025px) {
	body.quote-line #main .quote23 .quote-line-header .one-column > .priceblock,
	body.quote-line #main .quote23 .sidebar-page .fq-fold {
		display: none !important;
	}

	body.quote-line #main .quote23 .sidebar-page .fast-quote-section {
		overflow: hidden;
		border-radius: var(--vq-radius-card);
		box-shadow: var(--vq-shadow-card);
	}

	/* The summary's prices as every price on the quote pages: the cycle above,
	   the price under it at weight 500 (it was a faux 900 bold: Graphik is
	   only loaded at 500), written "$14.20" (full-quote.js). */
	body.quote-line #main .quote23 form .sidebar-page .estimate-section .pricesubblock {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	body.quote-line #main .quote23 form .sidebar-page .estimate-section .pricesubblock .price {
		font-weight: 500;
		letter-spacing: -0.02em;
		font-variant-numeric: tabular-nums;
	}

	body.quote-line #main .quote23 form .sidebar-page .estimate-section .pricesubblock .mont-txt {
		order: -1;
		font-size: 13px;
		line-height: 18px;
		opacity: 0.8;
	}

	/* The price and the promo code under it: one card with round corners,
	   set in from the summary's edge, where they were square bands across
	   it. The promo field and "Apply" take the fields' corners, line and
	   height, and lose the button's drop shadow. "form" in the selectors
	   outranks the plugin's rules, which print later. */
	body.quote-line #main .quote23 form .sidebar-page .estimate-section {
		padding: 16px;
	}

	body.quote-line #main .quote23 form .sidebar-page .estimate-section > :is(.month, .year) {
		overflow: hidden;
		border-radius: var(--vq-radius-card) var(--vq-radius-card) 0 0;
	}

	body.quote-line #main .quote23 form .sidebar-page .estimate-section > .promoblock {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 12px 16px;
		border-radius: 0 0 var(--vq-radius-card) var(--vq-radius-card);
	}

	body.quote-line #main .quote23 form .sidebar-page .promoblock > span {
		flex: none;
		margin: 0;
	}

	body.quote-line #main .quote23 form .sidebar-page .promoblock .discountCodeSide {
		flex: 1;
		min-width: 0;
		width: auto;
		height: 40px;
		margin: 0;
		padding: 8px 12px !important;
		border: 2px solid var(--vq-line);
		border-radius: var(--vq-radius);
		background: #fff;
		color: var(--vq-ink);
		font-size: 16px;
	}

	body.quote-line #main .quote23 form .sidebar-page .promoblock .discountCodeSide:focus {
		border-color: var(--vq-action) !important;
		box-shadow: var(--vq-ring);
		outline: none;
	}

	body.quote-line #main .quote23 form .sidebar-page .promoblock .applyPromo {
		flex: none;
		height: 40px;
		margin: 0;
		padding: 0 16px;
		border: 0;
		border-radius: var(--vq-radius);
		box-shadow: none;
		font-size: 15px;
		font-weight: 500;
	}
}

/* Working on it (full-quote.js): while a price is worked out or the next
   step loads. The plugin's veil still stops the summary being used, but is
   clear, without its GIF. The prices, in the summary and under the title,
   fade under a ring spinner, and the button that was pressed shows a white
   one by its label. The buttons are <input>s, so the spinner is a
   background image: an SVG that turns itself, or a still ring where motion
   is reduced. */
body.quote-line #main .quote23 .ajax-loader-sidebar {
	background: transparent !important;
}

body.quote-line #main .quote23 form.fq-working :is(.sidebar-page, .quote-line-header .one-column) .priceblock {
	position: relative;
}

body.quote-line #main .quote23 form.fq-working :is(.sidebar-page, .quote-line-header .one-column) .priceblock > * {
	opacity: 0.3;
	transition: opacity 150ms var(--vq-ease);
}

body.quote-line #main .quote23 form.fq-working :is(.sidebar-page, .quote-line-header .one-column) .priceblock::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='2.5'/%3e%3cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3e%3canimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.7s' repeatCount='indefinite'/%3e%3c/path%3e%3c/svg%3e") no-repeat center / 28px 28px;
}

body.quote-line #main .quote23 form.fq-working .quote-line-header .one-column .priceblock::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='9' fill='none' stroke='%231d1d1b' stroke-opacity='.3' stroke-width='2.5'/%3e%3cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%231d1d1b' stroke-width='2.5' stroke-linecap='round'%3e%3canimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.7s' repeatCount='indefinite'/%3e%3c/path%3e%3c/svg%3e");
}

body.quote-line #main .quote23 :is(.generate_quote_next, .generate_quote_dup).fq-busy {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='2.5'/%3e%3cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3e%3canimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.7s' repeatCount='indefinite'/%3e%3c/path%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 20px center !important;
	background-size: 20px 20px !important;
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	body.quote-line #main .quote23 form.fq-working :is(.sidebar-page, .quote-line-header .one-column) .priceblock::after {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='2.5'/%3e%3cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3e%3c/path%3e%3c/svg%3e");
	}

	body.quote-line #main .quote23 form.fq-working .quote-line-header .one-column .priceblock::after {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='9' fill='none' stroke='%231d1d1b' stroke-opacity='.3' stroke-width='2.5'/%3e%3cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%231d1d1b' stroke-width='2.5' stroke-linecap='round'%3e%3c/path%3e%3c/svg%3e");
	}

	body.quote-line #main .quote23 :is(.generate_quote_next, .generate_quote_dup).fq-busy {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='2.5'/%3e%3cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3e%3c/path%3e%3c/svg%3e") !important;
	}
}

/* The original field or select, kept in the form for the quote scripts, out
   of sight but not display: none, which they would skip. */
body.quote-line #main .quote23 .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;
}

/* Labels: more room above each question and between a label and its
   answer (the plugin's 18px above and 8px below felt cramped). As on the
   quick quote. A question that wraps ("What do you mostly use your bicycle
   for?") had its lines set solid; they get room too. */
body.quote-line #main .quote23 .tab-content:not(:has([name="paymentfrequency"])) [class*="quote-col-"] > label {
	margin-top: 28px;
	margin-bottom: 10px;
	line-height: 1.35;
}

/* Fields, as on the quick quote: 52px tall, rounded, 16px text (iOS zooms
   the page into any field under 16px), a light line that darkens on hover and
   turns green with a soft ring on focus, where the plugin painted it blue.
   Not on the payment step (the one with the payment frequency choice, the
   second step for liability cover): its fields sit next to the card
   provider's own and are left as they are. The plugin sets
   padding and the focus colour with !important, hence the !important here. */
body.quote-line #main .quote23 .tab-content:not(:has([name="paymentfrequency"])) :is(input[type="text"], input[type="number"], input[type="tel"], input[type="email"], select, textarea) {
	height: 52px;
	padding: 12px 14px !important;
	border: 2px solid var(--fq-line);
	border-radius: 8px;
	color: var(--fq-ink);
	font-size: 16px;
	transition: border-color 150ms var(--fq-ease), box-shadow 150ms var(--fq-ease);
}

body.quote-line #main .quote23 .tab-content:not(:has([name="paymentfrequency"])) textarea {
	height: auto;
	min-height: 104px;
}

body.quote-line #main .quote23 .tab-content:not(:has([name="paymentfrequency"])) :is(input, select, textarea):hover {
	border-color: var(--vq-line-hover);
}

body.quote-line #main .quote23 .tab-content:not(:has([name="paymentfrequency"])) :is(input, select, textarea):focus {
	border-color: var(--fq-action) !important;
	box-shadow: var(--vq-ring);
	outline: none;
}

/* Selects: a slim ink chevron set in from the edge, in place of the
   browser's small arrow. */
body.quote-line #main .quote23 .tab-content:not(:has([name="paymentfrequency"])) select {
	padding-right: 48px !important;
	background-image: 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");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px 18px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* The suburb lookup's list of matches is a select shown as an open list
   (main.js gives it a size), which takes no chevron. */
body.quote-line #main .quote23 .tab-content:not(:has([name="paymentfrequency"])) select.post-select {
	padding-right: 12px !important;
	background-image: none;
}

/* Bicycle value: the "$" sits 14px inside the taller field, level with the
   text. The field starts at its column's padding: 30px, or 20px on phones.
   Its top follows the label above (28px,
   22px tall, 10px) and centres on the 52px field. */
body.quote-line #main .quote23 .tab-content:not(:has([name="paymentfrequency"])) input[type="number"][id^="bikeValue"] {
	padding-left: 34px !important;
}

body.quote-line #main .quote23 .bikeValue .input-icon {
	top: 74px;
	left: 44px;
}

@media (max-width: 767.98px) {
	body.quote-line #main .quote23 .bikeValue .input-icon {
		left: 34px;
	}
}

/* The bike make search (select2) matches the fields, with the same chevron. */
body.quote-line #main .quote23 .select2-container .select2-selection--single {
	height: 52px;
	border: 2px solid var(--fq-line);
	border-radius: 8px;
	transition: border-color 150ms var(--fq-ease), box-shadow 150ms var(--fq-ease);
}

body.quote-line #main .quote23 .select2-container .select2-selection--single:hover {
	border-color: var(--vq-line-hover);
}

body.quote-line #main .quote23 .select2-container--focus .select2-selection--single,
body.quote-line #main .quote23 .select2-container--open .select2-selection--single {
	border-color: var(--fq-action);
	box-shadow: var(--vq-ring);
}

body.quote-line #main .quote23 .select2-container .select2-selection__rendered {
	padding: 0 48px 0 14px;
	color: var(--fq-ink);
	font-size: 16px;
	line-height: 48px;
}

body.quote-line #main .quote23 .select2-container .select2-selection__arrow {
	top: 0;
	right: 16px;
	width: 18px;
	height: 48px;
	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='m6 9 6 6 6-6'/%3e%3c/svg%3e") no-repeat center / 18px 18px;
}

body.quote-line #main .quote23 .select2-container .select2-selection__arrow b {
	display: none;
}

/* The payment step: its own controls take the other steps' look; the card
   provider's fields (in their own frame) are left as they are.
   - The start date is a field like the others, and the questions above
     the start date and the payment frequency use the same labels.
   - Monthly and Annually are two cards, each with its price
     (full-quote.js, display only), the radio as the mark; the chosen one
     is green as a chosen option is elsewhere.
   - The declarations read at 15px with room between them. */
body.quote-line #main .quote23 .tab-content:has([name="paymentfrequency"]) .startDate > label {
	margin: 28px 0 10px;
	color: var(--vq-ink);
	font-size: 15px;
	font-weight: 500;
}

body.quote-line #main .quote23 .tab-content:has([name="paymentfrequency"]) #startDate {
	height: 52px;
	padding: 12px 14px !important;
	border: 2px solid var(--vq-line);
	border-radius: var(--vq-radius);
	color: var(--vq-ink);
	font-size: 16px;
}

body.quote-line #main .quote23 .tab-content:has([name="paymentfrequency"]) #startDate:focus {
	border-color: var(--vq-action) !important;
	box-shadow: var(--vq-ring);
	outline: none;
}

/* Monthly and Annually: the same two cards, side by side, as on the result
   page (quote-mobile.css), so the choice looks the same at both steps: the
   cycle and a radio dot on top, its price under them (full-quote.js, display
   only). The radio stays in the label, out of sight, so it is still the
   control the plugin reads and the keyboard reaches. Side by side only when
   both are offered. [class][class] outranks the phone padding rule above. */
body.quote-line #main .quote23 .tab-content [class*="paymentfrequency_"] {
	margin-top: 12px;
}

body.quote-line #main .quote23 .tab-content .parentblock:has(> .paymentfrequency_1):has(> .paymentfrequency_2) > :is(.paymentfrequency_1, .paymentfrequency_2)[class][class] {
	float: left;
	width: 50%;
}

body.quote-line #main .quote23 .tab-content .parentblock:has(> .paymentfrequency_1):has(> .paymentfrequency_2) > .paymentfrequency_1[class][class] {
	padding-right: 5px !important;
}

body.quote-line #main .quote23 .tab-content .parentblock:has(> .paymentfrequency_1):has(> .paymentfrequency_2) > .paymentfrequency_2[class][class] {
	padding-left: 5px !important;
}

body.quote-line #main .quote23 .tab-content .parentblock > .paymentfrequency_2 + * {
	clear: both;
}

body.quote-line #main .quote23 .tab-content [class*="paymentfrequency_"] > label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 88px;
	margin: 0;
	padding: 14px 16px;
	border: 2px solid var(--vq-line);
	border-radius: 12px;
	background: #fff;
	color: #4e4e4e;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 150ms var(--vq-ease), background-color 150ms var(--vq-ease);
}

body.quote-line #main .quote23 .tab-content [class*="paymentfrequency_"] > label:hover {
	border-color: var(--vq-line-hover);
}

body.quote-line #main .quote23 .tab-content [class*="paymentfrequency_"] > label:has(input:checked) {
	border-color: var(--vq-action);
	background: var(--vq-action-tint);
	color: #066a2e;
	font-weight: 500;
}

body.quote-line #main .quote23 .tab-content [class*="paymentfrequency_"] > label:has(input:focus-visible) {
	outline: 2px solid var(--vq-ink);
	outline-offset: 2px;
}

/* The radio dot, as on the result page's cards. */
body.quote-line #main .quote23 .tab-content [class*="paymentfrequency_"] > label::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: #fff;
	transition: border-width 150ms ease, border-color 150ms ease;
}

body.quote-line #main .quote23 .tab-content [class*="paymentfrequency_"] > label:has(input:checked)::after {
	border: 6px solid var(--vq-action);
}

body.quote-line #main .quote23 .tab-content [class*="paymentfrequency_"] input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
}

body.quote-line #main .quote23 .tab-content [class*="paymentfrequency_"] .fq-cycle-price {
	margin-top: 6px;
	color: #1c1c1c;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

body.quote-line #main .quote23 .tab-content:has([name="paymentfrequency"]) .pretty.p-default {
	margin: 0;
	padding-block: 8px;
}

/* The checkbox style indented only the first line, so the rest wrapped
   under the box. The whole text now hangs clear of it, the box level with
   the first line. */
body.quote-line #main .quote23 .tab-content:has([name="paymentfrequency"]) .pretty.p-default .state label {
	position: relative;
	padding-left: 30px;
	color: var(--vq-ink);
	font-size: 15px;
	line-height: 22px;
	text-indent: 0;
}

body.quote-line #main .quote23 .tab-content:has([name="paymentfrequency"]) .pretty.p-default .state label::before,
body.quote-line #main .quote23 .tab-content:has([name="paymentfrequency"]) .pretty.p-default .state label::after {
	top: 2px;
	left: 0;
}

/* Serial number: a note under the field in place of the "Provide Serial
   Number later" box (full-quote.js), which stays in the form, hidden. The
   plugin shows and hides the box's column with an inline display, hence the
   !important. */
body.quote-line #main .quote23 .tab-content .provideLater {
	display: none !important;
}

body.quote-line #main .quote23 .tab-content .fq-hint {
	margin: 8px 0 0;
	color: var(--vq-muted);
	font-size: 14px;
	line-height: 20px;
}

/* The e-bike notes under Bike Type and Bike Make: a flat grey panel with an
   ink info mark, where they were a yellow-outlined warning with an
   exclamation mark. Same words. The plugin shows and hides them with an
   inline display, so they stay blocks; Bootstrap's spacing, border and
   corner utilities on them are !important, hence the !important here. */
body.quote-line #main .quote23 .tab-content .info-box:is(.ebike-warning, .make-ebike-warning) {
	position: relative;
	margin: 12px 0 0 !important;
	padding: 12px 14px 12px 44px !important;
	border: 0 !important;
	border-radius: var(--vq-radius) !important;
	background: var(--vq-surface);
	color: var(--vq-ink);
	font-size: 14px;
	line-height: 20px;
}

body.quote-line #main .quote23 .tab-content .info-box:is(.ebike-warning, .make-ebike-warning) > svg {
	display: none !important;
}

body.quote-line #main .quote23 .tab-content .info-box:is(.ebike-warning, .make-ebike-warning)::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 14px;
	width: 20px;
	height: 20px;
	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='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='M12 11v5M12 8h.01'/%3e%3c/svg%3e") no-repeat center / 20px 20px;
}

body.quote-line #main .quote23 .tab-content .info-box:is(.ebike-warning, .make-ebike-warning) small {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Date of birth as three boxes. The boxes take the form's own field style. */
body.quote-line #main .quote23 .qm-dob {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 8px;
}

body.quote-line #main .quote23 .qm-dob input {
	width: 100%;
	min-width: 0;
}

/* Short selects as one-tap options: as many to a row as fit (two on a
   phone), short answers (years, claim counts) four or more to a row, and
   three answers always on one row. */
body.quote-line #main .quote23 .qm-choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
	gap: 8px;
}

body.quote-line #main .quote23 .qm-choices.qm-choices-short {
	grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr));
}

body.quote-line #main .quote23 .qm-choices:has(> button:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(min-content, 1fr));
}

body.quote-line #main .quote23 .qm-choices button {
	min-height: 52px;
	margin: 0;
	padding: 6px 8px;
	border: 2px solid var(--fq-line);
	border-radius: 8px;
	background: #ffffff;
	color: var(--fq-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.25;
	text-transform: none;
	cursor: pointer;
	transition: border-color 150ms var(--fq-ease), background-color 150ms var(--fq-ease), color 150ms var(--fq-ease);
}

body.quote-line #main .quote23 .qm-choices button:hover {
	border-color: var(--vq-line-hover);
	background: #ffffff;
}

body.quote-line #main .quote23 .qm-choices button:active {
	background: #f4f4f4;
}

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

body.quote-line #main .quote23 .qm-choices button:focus-visible {
	outline: 2px solid var(--fq-ink);
	outline-offset: 2px;
}

/* The plugin paints a focused button blue; options keep their own colours. */
body.quote-line #main .quote23 .qm-choices button:focus {
	background: #ffffff;
}

body.quote-line #main .quote23 .qm-choices button[aria-checked="true"]:focus {
	background: var(--vq-action-tint);
}

/* One message at a time (full-quote.js), on the bike and personal details
   steps. The first message is a small dark card with an arrow, floating under
   its field, so nothing on the page moves. Taps go through it, except on its
   links (a phone number, an info button). No red: fields that still need an
   answer get an ink line, and the one the card points at a heavier one. The
   validator writes a red border-color on the field itself, hence !important. */
body.quote-line #main .quote23.fq-nudges .tab-content .error {
	border-color: var(--fq-ink) !important;
}

body.quote-line #main .quote23.fq-nudges .tab-content .error + div.state > label::before {
	border-color: var(--fq-ink) !important;
}

body.quote-line #main .quote23.fq-nudges .tab-content .error.fq-nudged,
body.quote-line #main .quote23.fq-nudges .tab-content .fq-nudged + .select2 .select2-selection {
	box-shadow: 0 0 0 1px var(--fq-ink);
}

body.quote-line #main .quote23.fq-nudges .qm-visually-hidden.fq-nudged + .qm-dob input,
body.quote-line #main .quote23.fq-nudges .qm-visually-hidden.fq-nudged + .qm-choices button {
	border-color: var(--fq-ink);
}

body.quote-line #main .quote23.fq-nudges .help-block.form-error.fq-later {
	display: none;
}

body.quote-line #main .quote23.fq-nudges .help-block.form-error.fq-nudge {
	position: absolute;
	top: 100%;
	left: 30px;
	z-index: 20;
	display: block;
	width: max-content;
	max-width: min(22rem, calc(100% - 60px));
	margin-top: 4px;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--fq-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: fq-nudge-in 200ms var(--fq-ease) both;
}

body.quote-line #main .quote23.fq-nudges .help-block.form-error.fq-nudge::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 22px;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--fq-ink);
	transform: translateX(-50%) rotate(45deg);
}

/* Some messages wrap their text in a floated div next to an info button, and
   the theme colours every element in the quote (and every link, !important). */
body.quote-line #main .quote23.fq-nudges .help-block.form-error.fq-nudge > div:not(.info-detail) {
	display: inline;
	float: none !important;
	color: inherit;
}

body.quote-line #main .quote23.fq-nudges .help-block.form-error.fq-nudge > a {
	color: #ffffff !important;
	text-decoration: underline;
	pointer-events: auto;
}

body.quote-line #main .quote23.fq-nudges .help-block.form-error.fq-nudge .info-detail {
	pointer-events: auto;
}

body.quote-line #main .quote23.fq-nudges .help-block.form-error.fq-nudge .info-popup {
	font-weight: 400;
}

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

@media (prefers-reduced-motion: reduce) {
	body.quote-line #main .quote23.fq-nudges .help-block.form-error.fq-nudge {
		animation: none;
	}
}

/* Project 529 opt-in on the details step (the plugin's markup, with its own
   inline colours). It ran edge to edge of the form card with square corners.
   Line it up with the fields, round it like the other cards and give its
   content room, clear of the 529 logo. Same wording, same unticked box. The
   plugin's mt-3 is !important, hence the one !important here. */
body.quote-line #main .quote23 .subblock:has(> .project-529-logo) {
	margin: 24px 30px 30px !important;
	padding: 4px 20px 20px;
	border-radius: 8px;
	overflow: hidden;
}

body.quote-line #main .quote23 .subblock:has(> .project-529-logo) > .quote-col-1 {
	padding-inline: 0;
}

body.quote-line #main .quote23 .subblock:has(> .project-529-logo) > .make_webhook_heading {
	padding-right: 72px;
}

body.quote-line #main .quote23 .subblock:has(> .project-529-logo) > .make_webhook_copy p {
	margin-bottom: 0;
}