/*
 * Quote pages: styles shared by the quick quote, its result pages and the
 * full quote (see enqueue_quote_pages_style() in functions.php). The header
 * chat button, the footer, and the cookie notice at the bottom of the
 * screen. Each page's own layer (quote-mobile.css, full-quote.css) places
 * things in its own header.
 *
 * The footer: same content and links as footer.php renders them; only the
 * layout changes. Rules start with #page #colophon to outrank the theme's
 * footer#colophon.site-footer. Remove this file and that function to roll
 * back.
 */

/* Design tokens, from velosure.com.au (its Webflow stylesheet), shared by
   the quote pages' layers (quote-mobile.css, full-quote.css) so the quick
   quote, its result pages and the full quote can't drift apart. Buttons use
   the site's forest green rather than its brighter #00c44f, which white text
   can't be read on (2.4:1). */
:root {
	--vq-ink: #1d1d1b;
	--vq-heading: #000;
	--vq-muted: #5e5e5e;
	--vq-action: #07883b;
	--vq-action-hover: #087433;
	--vq-action-tint: #e6f3eb;
	--vq-line: #dadada;
	--vq-line-hover: #9a9a9a;
	--vq-surface: #f5f5f5;
	--vq-quiet: #f1f3f1;
	--vq-quiet-hover: #e6e9e6;
	--vq-radius: 8px;
	--vq-radius-card: 13px;
	--vq-shadow-card: 0 20px 24px -4px rgb(0 0 0 / 0.08), 0 8px 8px -4px rgb(0 0 0 / 0.03);
	--vq-ring: 0 0 0 3px rgb(7 136 59 / 0.2);
	--vq-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* The quote pages showed whatever the browser paints behind a page: the
   result pages' own inline CSS clears the body's background below 992px
   (background: 0 0 !important). That is white in most browsers, but some
   dark modes and in-app browsers paint it dark, which put the result
   pages' "Your price" title, ink on nothing, on black. Only the colour is
   set, so the desktop background image stays. */
body#quote-result,
body.quote-line {
	background-color: #fff !important;
}

/* The header chat button (quote-fields.js), for phones: a 40px round target
   with the chat icon. Once it shows, the floating bubble it stands in for is
   hidden. Wider screens keep the bubble. */
@media (max-width: 767.98px) {
	#masthead .qm-chat {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--vq-ink);
		cursor: pointer;
		transition: background-color 150ms ease;
	}

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

	#masthead .qm-chat:hover {
		background: var(--vq-quiet);
	}

	#masthead .qm-chat:focus-visible {
		outline: 2px solid var(--vq-ink);
		outline-offset: 2px;
	}

	#masthead .qm-chat svg {
		width: 22px;
		height: 22px;
	}

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

@media (min-width: 768px) {
	#masthead .qm-chat {
		display: none;
	}
}

/* "Email me a copy of my quote" (result pages) and "Email my quote" (the
   full quote's summary): a quiet grey button with a mail icon, where they
   were an underlined green link and a bordered box. Same links, same
   wording. The summary's copy is shown and hidden with an inline display
   (block), so the button sizes to its text rather than relying on its
   display. The theme colours links in the quote with !important, and the
   plugin sizes the summary's copy with a longer selector, which the second
   selector matches. main.js marks it "diabled" (sic) while the email is
   being sent. */
#page a.email-quote[class],
body.quote-line #main .quote23 h3.side-bar-cover-name-top > a.email-quote[class] {
	width: fit-content;
	min-height: 44px;
	margin: 0;
	padding: 12px 18px 12px 46px;
	border: 0;
	border-radius: var(--vq-radius);
	background: var(--vq-quiet) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='5' width='18' height='14' rx='2'/%3e%3cpath d='m4 7 8 6 8-6'/%3e%3c/svg%3e") no-repeat 16px center / 20px 20px;
	color: var(--vq-ink) !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0;
	text-align: left;
	text-decoration: none !important;
	text-transform: none;
	transition: background-color 150ms var(--vq-ease);
}

#page a.email-quote[class]:hover,
body.quote-line #main .quote23 h3.side-bar-cover-name-top > a.email-quote[class]:hover {
	background-color: var(--vq-quiet-hover);
}

#page a.email-quote[class]:focus-visible,
body.quote-line #main .quote23 h3.side-bar-cover-name-top > a.email-quote[class]:focus-visible {
	outline: 2px solid var(--vq-ink);
	outline-offset: 2px;
}

#page a.email-quote.diabled {
	opacity: 0.6;
	pointer-events: none;
}

/* The result pages' copy sits in a centred row. */
#page .email-me-quote .row {
	justify-content: center;
}

/* The summary's copy, under the cover's name. */
body.quote-line #main .quote23 h3.side-bar-cover-name-top > a.email-quote[class] {
	margin: 12px auto 0;
}

/* The info popups (the (i) beside a question): the quote pages' grey
   surface, card corners and a soft shadow, in upright text, where they were
   white boxes with 2px corners, a heavy shadow and a faux bold italic
   (Graphik is only loaded at 500). The arrow takes the same grey. Same
   words. The second selector outranks the theme's full quote rule. */
#page .info-popup[class],
body #main article .entry-content .quote23 .info-popup[class] {
	padding: 14px 16px;
	border: 0;
	border-radius: var(--vq-radius-card);
	background: var(--vq-surface);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
	color: var(--vq-ink);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

#page .info-popup[class] .inner-wrapper,
body #main article .entry-content .quote23 .info-popup[class] .inner-wrapper {
	color: inherit;
	font: inherit;
}

/* The full quote's extras rows (custom parts, accessories, wheelsets,
   travel) sit at 80% opacity, and a popup inside such a row inherits that,
   so the popup was see-through and the (i) of the row behind showed through
   it. A row whose popup is open is drawn at full opacity. */
#page .quote-col-1:has(.info-popup[style*="block"]),
body #main article .entry-content .quote23 .quote-col-1:has(.info-popup[style*="block"]) {
	opacity: 1;
}

#page .info-popup[class] .info-tooltip,
body #main article .entry-content .quote23 .info-popup[class] .info-tooltip {
	border: 0;
	background: var(--vq-surface);
	box-shadow: none;
}

/* Same content, tidied:
   - The logo touched the left edge on phones (the container has no side
     padding there). It now shares the 20px gutter with everything else.
   - The links sat centred between "|" dividers, and "Duty to not
     misrepresent" broke over two lines. They now wrap as a left-aligned row
     with 44px tap targets, and the social icons line up beside or under them.
   - The two TMD links in the legal notice inherit the rows' padding and
     top border, which drew stray green lines through the text above them.
   - The legal notice (PDS, TMD, issuer) was 11px at 39% white. It's now
     13px at 70%, in a readable measure.
   - Extra room at the end, so the notice's last lines scroll clear of the
     chat bubble. */
#page #colophon {
	padding: 40px 0 112px;
	text-align: left;
}

#page #colophon > .container {
	padding-inline: 20px;
}

#page #colophon .footer-widgets {
	display: none;
}

#page #colophon .site-info {
	padding: 24px 0;
}

#page #colophon .site-info:first-of-type {
	padding-top: 0;
}

#page #colophon .site-info > img {
	display: block;
	width: 128px;
	height: auto;
}

#page #colophon .site-info:has(.links) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}

#page #colophon .links {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 24px;
	width: auto;
	line-height: 1.4;
	text-align: left !important;
}

#page #colophon .links > .d-inline,
#page #colophon .links > br {
	display: none !important;
}

#page #colophon .links > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: rgb(255 255 255 / 0.8);
	font-size: 14px;
}

#page #colophon .links > a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* The social icons, between their   spacers. */
#page #colophon .links.text-right {
	gap: 8px;
	/* Line the first icon, not its tap target, up with the gutter. */
	margin-left: -13px;
	font-size: 0;
}

#page #colophon .links.text-right > a {
	justify-content: center;
	min-width: 44px;
}

#page #colophon .site-info p {
	max-width: 80ch;
	margin: 0;
	padding: 0;
	color: rgb(255 255 255 / 0.7);
	font-size: 13px;
	line-height: 1.6;
}

#page #colophon .site-info p a {
	padding: 0;
	border: 0;
	font-size: inherit;
	color: rgb(255 255 255 / 0.9);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The cookie notice. The plugin's settings pin it to the top, where on a
   phone it was 199px tall and hid the logo, the heading and the first field
   on a first visit. On the quote pages it sits at the bottom instead, the
   message smaller and the two buttons on one row, "Accept" first so the chat
   bubble in the right corner can't cover it. On wider screens the bar keeps
   clear of the bubble with room on its right. Same wording and buttons.
   The plugin writes its position and the settings link's margin as inline
   styles, and the theme sets the shadow with !important, hence the
   !important here. Setting the plugin's position to the bottom in wp-admin
   would move it on every page. */
body #cookie-law-info-bar[data-cli-style] {
	top: auto !important;
	bottom: 0 !important;
	padding-right: 96px;
	padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -2px 15px 0 rgb(75 75 75 / 0.2) !important;
}

/* On wide screens its message and buttons line up with the content column
   (1110px, as the header), where they ran the full width of the window. The
   right side keeps at least 96px clear of the chat bubble. */
@media (min-width: 768px) {
	body #cookie-law-info-bar[data-cli-style] {
		padding-left: max(20px, calc((100% - 1110px) / 2));
		padding-right: max(96px, calc((100% - 1110px) / 2));
	}
}

@media (max-width: 767px) {
	body #cookie-law-info-bar[data-cli-style] {
		padding: 16px 20px max(16px, env(safe-area-inset-bottom, 0px));
	}

	body #cookie-law-info-bar .cli-style-v2 .cli-bar-message {
		font-size: 13px;
		line-height: 1.45;
		text-align: left;
	}

	body #cookie-law-info-bar .cli-style-v2 .cli-bar-btn_container {
		justify-content: flex-start;
		gap: 24px;
		width: 100%;
		margin: 12px 0 0;
	}

	body #cookie-law-info-bar .cli-style-v2 .cli-bar-btn_container .cli_settings_button {
		margin: 0 !important;
		font-size: 15px;
	}

	body #cookie-law-info-bar .cli-style-v2 .cli-bar-btn_container .cli-plugin-button {
		order: -1;
		min-height: 44px;
		margin: 0;
		padding: 12px 24px;
		font-size: 15px;
	}
}