/* CGC MI Handoff: the Motoring Insider hand-off button (style E) and its notes. Loaded only in mi mode. */

/* Lime raised button with an arrow, no MI chip (Ian asked 9 Nov 2026 whether the M is needed). Ian, 9 Nov 2026. */
.cgc-mi-btn, a.cgc-mi-btn, button.cgc-mi-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: auto;
	min-height: 55px;
	margin: 0;
	padding: 8px 18px 8px 20px;
	border: 0;
	border-radius: 8px;
	background: #d9f3a3;
	color: #2e1a38;
	font-family: inherit;
	font-style: normal;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 2px 10px rgba(10, 2, 16, .35);
}
.cgc-mi-btn::after { content: ""; flex: 0 0 22px; width: 22px; height: 22px; margin-left: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e1a38' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.cgc-mi-btn:hover, a.cgc-mi-btn:hover, button.cgc-mi-btn:hover { background: #c9ea7f; color: #2e1a38; text-decoration: none; }
.cgc-mi-btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(10, 2, 16, .35); }
.cgc-mi-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cgc-mi-btn__side { display: none !important; }
.cgc-mi-btn__side--unused { display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 5px; background: #fff; }
.cgc-mi-btn__side img { display: block; width: 28px; height: 28px; max-width: none; }
.cgc-mi-btn__txt { display: block; min-width: 0; padding: 0; }
.cgc-mi-btn__l1 { display: block; color: #2e1a38; font-size: 18px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.cgc-mi-btn__l2 { display: block; margin-top: 2px; color: #4a3a55; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }

/* Price line under a main button. */
.cgc-mi-note { margin: 8px 0 0; color: #625d66; font-size: 14px; line-height: 1.45; }

/* Plain "provided by" line for small controls. */
.cgc-mi-by { display: block; margin-top: 2px; color: #625d66; font-size: 12px; font-weight: 600; line-height: 1.3; }

/* Landing page and repeat band: the button sits under the registration box. */
.cgc-lp-regform { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.cgc-lp-regform > .cgc-lp-regrow { flex: 1 1 260px; min-width: 0; }
.cgc-lp-regform > .cgc-mi-btn { flex: 0 0 auto; height: 55px; margin: 0; }
.cgc-lp-regform > .cgc-mi-note, .cgc-lp-regform > .cgc-pvr-form-note { flex: 0 0 100%; margin: 0; }
.cgc-lp-regform > .cgc-mi-note { margin-top: -2px; }

/* Hero sits on dark purple: light note text. */
.cgc-lp-hero .cgc-mi-note, .cgc-lp-repeat .cgc-mi-note { color: #f3eef6; }

@media (max-width: 640px) {
	.cgc-mi-btn, a.cgc-mi-btn, button.cgc-mi-btn { width: 100%; justify-content: center; }
	.cgc-lp-regform > .cgc-mi-btn { flex: 0 0 100%; }
	.cgc-mi-btn__l1 { font-size: 17px; }
}

/* Sticky bar: everything on one line. Label, price and "provided by" on the left, reg box and button on the right. */
.cgc-lp-sticky__inner { flex-wrap: nowrap; }
.cgc-lp-sticky__text { flex: 0 1 auto; align-items: baseline; white-space: nowrap; }
.cgc-lp-sticky__text .cgc-mi-by { display: inline; margin: 0; font-size: 12px; }
.cgc-lp-sticky .cgc-lp-regform { flex: 0 0 auto; }
@media (max-width: 1000px) {
	.cgc-lp-sticky__text { font-size: 16px; gap: 8px; }
	.cgc-lp-sticky__text strong { font-size: 18px; }
}
@media (max-width: 640px) {
	/* Phones: one line of text (label, price, provided by), then the reg box and button on one line. */
	.cgc-lp-sticky__inner { gap: 8px; padding: 14px 14px 12px; }
	.cgc-lp-sticky__text { gap: 6px; font-size: 13px; justify-content: center; }
	.cgc-lp-sticky__text strong { font-size: 16px; }
	.cgc-lp-sticky__text .cgc-mi-by { font-size: 11px; }
}

/* Tool result box. */
.cgc-tool-boundary__conversion .cgc-mi-btn { margin-top: 10px; }
.cgc-tool-boundary__conversion .cgc-tool-boundary__price strong { margin-right: .4em; }
.cgc-tool-boundary__conversion .cgc-mi-btn + .cgc-tool-boundary__note { margin-top: 12px; }

/* Garage. */
.cgc-garage-reminder-card__history .cgc-mi-by { margin-top: 4px; }

/* My Garage: the same two-line button as the landing page (markup from cgc_mi_button_html), with a 1px edge on the light surface. */
body .cgc-garage .cgc-mi-btn,
body .cgc-garage .cgc-garage-report-lookup button.cgc-mi-btn {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 55px; margin: 0; padding: 8px 18px 8px 20px;
	border: 1px solid #b4d874; border-radius: 8px; background: #d9f3a3; color: #2e1a38;
	text-align: left; text-decoration: none; box-shadow: 0 2px 8px rgba(46, 26, 56, .18);
}
body .cgc-garage .cgc-mi-btn:hover,
body .cgc-garage .cgc-garage-report-lookup button.cgc-mi-btn:hover { background: #c9ea7f; border-color: #a3c764; color: #2e1a38; }
body .cgc-garage .cgc-mi-btn:focus-visible { outline: 3px solid #5a3a6d; outline-offset: 2px; }
body .cgc-garage .cgc-mi-btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(46, 26, 56, .2); }
body .cgc-garage .cgc-garage-report-lookup button.cgc-mi-btn { flex: 0 0 auto; }
body .cgc-garage .cgc-mi-btn--card { display: flex; width: 100%; max-width: 100%; margin-top: 8px; gap: 8px; padding: 8px 12px 8px 14px; box-sizing: border-box; }
body .cgc-garage .cgc-mi-btn--card .cgc-mi-btn__l1 { font-size: 15px; }
body .cgc-garage .cgc-mi-btn--card .cgc-mi-btn__l2 { font-size: 12px; }
body .cgc-garage .cgc-mi-btn--card::after { flex-basis: 18px; width: 18px; height: 18px; margin-left: 0; }
body .cgc-garage .cgc-garage-reminder-card__history .cgc-mi-by { margin-top: 6px; }
@media (max-width: 600px) {
	body .cgc-garage .cgc-garage-report-lookup button.cgc-mi-btn, body .cgc-garage .cgc-mi-btn--card { width: 100%; max-width: none; }
}
/* Narrow desktop and tablet (901 to 1024px): the sample-report cards sit on the right of the hero, so the reg box
   and button stay clear of them. The button drops under the reg box, full width of the form. */
@media (min-width: 901px) and (max-width: 1024px) {
	.cgc-lp-hero .cgc-lp-regform { max-width: calc(100% - 290px); }
	.cgc-lp-hero .cgc-lp-regform > .cgc-mi-btn { flex: 0 0 100%; justify-content: center; }
}