/*
  MCM UI - VRM journey + mobile header.
  Additive, opt-in stylesheet. Design tokens deliberately mirror
  customer-reviews-redesign.css (.crr) so the VRM journey and the reviews page
  share one visual language: Arial, navy #152b4a headings, #e2e7ee borders,
  16-18px card radii, #f7d600 plate with #164474 GB badge, #147c35 green actions.
  - Finder / confirmation / notice / layout rules only apply to elements or pages
    carrying an mcm-* class.
  - The only unscoped rules are the mobile header compaction (max-width: 767px).
*/
:root {
  --mcm-navy: #152b4a;
  --mcm-ink: #263344;
  --mcm-muted: #687587;
  --mcm-green: #147c35;
  --mcm-green-hover: #0e642a;
  --mcm-plate: #f7d600;
  --mcm-gb: #164474;
  --mcm-card: #fff;
  --mcm-soft: #f5f7fa;
  --mcm-line: #e2e7ee;
  --mcm-danger: #b3261e;
  --mcm-link: #0a3fb5;
  --mcm-focus: #1c58da;
  --mcm-font: Arial, Helvetica, sans-serif;
}

/* ---------- Page column (VRM templates only) ---------- */
.mcm-page { color: var(--mcm-ink); font-family: var(--mcm-font); box-sizing: border-box; }
.mcm-page *, .mcm-page *::before, .mcm-page *::after { box-sizing: border-box; }
.mcm-page .mcm-sr-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mcm-page a:focus-visible, .mcm-page button:focus-visible, .mcm-page input:focus-visible { outline: 3px solid var(--mcm-focus); outline-offset: 2px; }

/* Legacy two-column (float left content / float right reviews sidebar) becomes a centred
   journey column with the supporting panels below it. Scoped to articles containing .mcm-page. */
article:has(> .wrap02.mcm-page) { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 24px; }
article:has(> .wrap02.mcm-page) > marquee { display: none; }
article:has(> .wrap02.mcm-page) > .wrap02.mcm-page { float: none !important; width: 100% !important; max-width: 720px; margin: 0 auto !important; padding: 0 16px !important; order: 1; box-sizing: border-box; }
article:has(> .wrap02.mcm-page) { padding-top: 20px; }
article:has(> .wrap02.mcm-vrm) > .wrap02.mcm-page { max-width: 960px; }
article:has(> .wrap02.mcm-page) > .wrap03 { float: none !important; width: 100% !important; max-width: 960px; padding: 0 16px; order: 2; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
article:has(> .wrap02.mcm-page) > .wrap03 .reviewWidget { max-height: 440px; }
@media (min-width: 900px) {
  article:has(> .wrap02.mcm-page) > .wrap03 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.mcm-page .wrap01, .mcm-page .wrap01a { width: auto !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.mcm-page > div > p:empty, .mcm-page p:empty { display: none; }

/* ---------- Shared card ---------- */
.mcm-finder, .mcm-confirm, .mcm-notice {
  background: var(--mcm-card) !important; border: 1px solid var(--mcm-line) !important; border-radius: 18px !important;
  box-shadow: 0 8px 26px rgba(18, 40, 65, .045) !important; padding: 22px 18px !important;
  margin: 0 auto 20px !important; float: none !important; width: auto !important; max-width: 720px; box-sizing: border-box;
}

/* ---------- Registration finder ---------- */
.mcm-finder .bg, .mcm-finder .clr { display: none !important; }
.mcm-finder .txtWrap { float: none !important; width: auto !important; padding: 0 !important; margin: 0 0 16px !important; text-align: left; }
.mcm-finder .txtWrap h3 { color: var(--mcm-navy) !important; font: 700 clamp(22px, 5vw, 32px)/1.2 var(--mcm-font) !important; letter-spacing: -.03em; margin: 0 !important; text-transform: none !important; text-shadow: none !important; }
.mcm-finder .txtWrap p { color: var(--mcm-muted) !important; font-size: 15px !important; line-height: 1.55 !important; margin: 10px 0 0 !important; }
.mcm-finder .searchWrap { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
.mcm-finder .searchWrap .inputWrap { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; width: auto !important; float: none !important; }
.mcm-finder .inputWrap > div, .mcm-finder .inputWrap > span { display: block; }
/* Plate: yellow frame, blue GB badge, white entry field (same construction as .reviews-sidebar-card__plate) */
.mcm-finder .searchWrap .inputWrap .input01 {
  display: block; box-sizing: border-box; float: none !important; width: 100% !important; height: 72px !important; margin: 0 0 12px !important;
  padding: 0 12px 0 62px !important; border: 8px solid var(--mcm-plate) !important; border-radius: 10px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='56' viewBox='0 0 52 56'%3E%3Crect width='52' height='56' fill='%23f7d600'/%3E%3Crect width='44' height='56' rx='5' fill='%23164474'/%3E%3Ctext x='22' y='46' font-family='Arial' font-weight='700' font-size='11' fill='%23fff' text-anchor='middle'%3EGB%3C/text%3E%3Ccircle cx='22' cy='20' r='9' fill='none' stroke='%23f7d600' stroke-width='2.4' stroke-dasharray='1.4 4.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left top / 52px 56px !important;
  color: #111 !important; font: 700 24px/56px var(--mcm-font) !important; letter-spacing: .04em; text-align: center; text-transform: uppercase; box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
.mcm-finder .input01::placeholder { color: #8a94a3; font-weight: 700; opacity: 1; }
.mcm-finder .searchWrap .inputWrap .button01 {
  display: block; box-sizing: border-box; float: none !important; width: 100% !important; height: 52px !important; min-height: 52px; margin: 0 !important; padding: 0 44px 0 16px !important;
  background: var(--mcm-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px 18px !important; color: #fff !important; border: 0 !important; border-radius: 9px !important; box-shadow: none !important; text-shadow: none !important;
  font: 700 16px/52px var(--mcm-font) !important; text-align: center; text-transform: none !important; cursor: pointer;
}
.mcm-finder .searchWrap .inputWrap .button01:hover { background-color: var(--mcm-green-hover) !important; }

/* Hide the finder when a vehicle result is being confirmed (progressive: browsers without :has keep it visible) */
.mcm-finder:has(~ .mcm-confirm) { display: none !important; }

/* ---------- Vehicle confirmation ---------- */
.mcm-confirm .contentWrap, .mcm-confirm .specWrap { display: block !important; float: none !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; background: none !important; text-align: left !important; }
.mcm-confirm h2, .mcm-confirm h3, .mcm-confirm__head p, .mcm-make { text-align: left !important; }
.mcm-confirm__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.mcm-confirm__head > div { flex: 1 1 auto; min-width: 0; }
.mcm-tick { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--mcm-green); position: relative; }
.mcm-tick::after { content: ""; position: absolute; left: 14px; top: 8px; width: 9px; height: 18px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.mcm-confirm h2 { margin: 0 !important; padding: 0 !important; color: var(--mcm-navy) !important; font: 700 clamp(20px, 4.5vw, 24px)/1.25 var(--mcm-font) !important; letter-spacing: -.02em; text-transform: none !important; }
.mcm-confirm__head p { margin: 6px 0 0 !important; padding: 0 !important; color: var(--mcm-muted) !important; font-size: 15px !important; line-height: 1.5 !important; }
.mcm-plate { display: flex; align-items: stretch; gap: 8px; padding: 8px; background: var(--mcm-plate); border-radius: 10px; margin: 0 0 18px; }
.mcm-plate__gb { flex: 0 0 44px; background: var(--mcm-gb); color: #fff; border-radius: 5px; font: 700 11px/1 var(--mcm-font); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.mcm-plate__reg { flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 5px; color: #111; font: 700 26px/1 var(--mcm-font); letter-spacing: .05em; text-transform: uppercase; }
.mcm-plate__reg span { display: inline !important; color: inherit !important; font: inherit !important; }
.mcm-make { margin: 0 0 4px !important; color: var(--mcm-muted); font: 700 12px/1.2 var(--mcm-font); letter-spacing: .1em; text-transform: uppercase; }
.mcm-make span, h3.mcm-model span { font: inherit !important; color: inherit !important; }
h3.mcm-model { margin: 0 0 16px !important; padding: 0 !important; min-height: 0 !important; height: auto !important; color: var(--mcm-navy) !important; font: 700 clamp(24px, 6vw, 32px)/1.2 var(--mcm-font) !important; letter-spacing: -.03em; text-transform: none !important; }
.mcm-spec-list { margin: 0 0 20px; padding: 0; border-top: 1px solid var(--mcm-line); }
.mcm-spec { display: flex !important; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--mcm-line); font-size: 15px; font-weight: 700; color: var(--mcm-navy) !important; }
.mcm-spec::before { content: attr(data-l); color: var(--mcm-muted); font-weight: 400; }
.mcm-spec:empty { display: none !important; }
.mcm-confirm ul.confirm { list-style: none; margin: 0 !important; padding: 0 !important; display: block; width: 100% !important; max-width: none !important; }
.mcm-confirm ul.confirm li { display: block !important; float: none !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; background: none !important; border: 0 !important; }
.mcm-confirm ul.confirm li a { display: flex !important; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 100% !important; min-height: 52px; margin: 0 !important; padding: 12px 16px !important; border-radius: 9px !important; font: 700 16px/1.25 var(--mcm-font) !important; text-align: center; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; text-transform: none !important; float: none !important; }
.mcm-confirm ul.confirm li a.yes { background: var(--mcm-green) !important; color: #fff !important; border: 0 !important; }
.mcm-confirm ul.confirm li a.yes:hover { background: var(--mcm-green-hover) !important; }
.mcm-confirm ul.confirm li a.no { background: #fff !important; color: var(--mcm-navy) !important; border: 1px solid #c9d2de !important; font-weight: 600 !important; }
.mcm-confirm ul.confirm li a.no:hover { background: var(--mcm-soft) !important; }
.mcm-confirm__again { display: block; text-align: center; margin: 4px 0 0; }
.mcm-confirm__again a { color: var(--mcm-link); font-size: 14px; text-decoration: underline; padding: 12px 8px; display: inline-block; }

/* ---------- Notice ---------- */
.mcm-notice { border-left: 5px solid var(--mcm-danger) !important; padding: 16px 18px !important; color: var(--mcm-ink) !important; font-size: 15px; line-height: 1.55; }
.mcm-notice a { color: var(--mcm-link) !important; font-weight: 700 !important; font-size: inherit !important; }

/* ---------- viewvrm.aspx (product selection, visual only) ---------- */
.mcm-vrm h1, .mcm-vrm h2, .mcm-vrm h3 { color: var(--mcm-navy); }
.mcm-vrm .vehicleConfirmation { border-radius: 12px; }

/* ---------- Mobile header (shared masters) ---------- */
@media (max-width: 767px) {
  header.whiteBG .ourOffer { padding: 5px 10px; font-size: 11px; line-height: 1.35; }
  header.whiteBG .payWithGPay { display: none !important; }
  header.whiteBG .logoSec { padding-top: 0; padding-bottom: 0; }
  header.whiteBG .logoSec .logo { width: auto; height: 34px; max-width: 100%; }
  header.whiteBG .menuIcon, header.whiteBG .aBasket { width: 44px !important; height: 44px !important; min-height: 44px; box-sizing: border-box; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; }
  header.whiteBG .aBasket p { display: none; }
  header.whiteBG .iconMenu { display: flex !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--mcm-line); }
  header.whiteBG .iconMenu li { flex: 1 1 0; margin: 0 !important; padding: 0 !important; text-align: center; border-left: 1px solid var(--mcm-line); }
  header.whiteBG .iconMenu li:first-child { border-left: 0; }
  header.whiteBG .iconMenu li a { display: flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 4px; font-size: 13px; line-height: 1.2; color: var(--mcm-navy); }
  header.whiteBG .iconMenu li a span { display: inline-flex !important; width: auto !important; height: auto !important; margin: 0 !important; }
  header.whiteBG .iconMenu li a span img { width: 20px !important; height: 20px !important; }
}

/* Contextual information links (replace the old buying-page sidebar). Same Fancybox attributes as before. */
header.heading02 > .mcm-hd { display: flex; width: 100%; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.mcm-help-grp { display: inline-flex; flex-wrap: wrap; gap: 2px 14px; }
.mcm-help { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 2px; font: 600 13px/1.2 Arial, sans-serif; color: var(--mcm-green); text-decoration: none; white-space: nowrap; cursor: pointer; }
.mcm-help:hover, .mcm-help:focus-visible { color: var(--mcm-green-hover); text-decoration: underline; }
.mcm-help-ico { flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
@media (max-width: 767px) { .mcm-help { min-height: 40px; } }
/* Colour charts add nothing on mobile: the swatches are already shown inline. */
@media (max-width: 767px) { .mcm-hd .mcm-help[data-src="#modal2"], .mcm-hd .mcm-help[data-src="#modal3"] { display: none; } }

/* Mobile fold-away sections (reviews, footer columns); see mcm-fold.js. */
@media (max-width: 860px) {
    .mcm-reviews-under > h2[data-mcm-fold], #footer01 > .section02 > h2[data-mcm-fold] { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin: 0; cursor: pointer; }
    .mcm-reviews-under > h2[data-mcm-fold]::after, #footer01 > .section02 > h2[data-mcm-fold]::after { content: "+"; flex: none; font: 400 24px/1 Arial, sans-serif; color: var(--mcm-green); }
    .mcm-reviews-under.mcm-open > h2[data-mcm-fold]::after, #footer01 > .section02.mcm-open > h2[data-mcm-fold]::after { content: "\2212"; }
    .mcm-reviews-under > h2[data-mcm-fold] > span { margin-left: auto; }
    .mcm-reviews-under > h2[data-mcm-fold]:focus-visible, #footer01 > .section02 > h2[data-mcm-fold]:focus-visible { outline: 2px solid var(--mcm-green); outline-offset: 2px; }
    .widget.mcm-reviews-under:not(.mcm-open) > *:not(h2), #footer01 > .section02:not(.mcm-open) > *:not(h2) { display: none; }
    #footer01 > .section02 { margin: 0; padding: 0 4px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
    #footer01 > .section02 > h2[data-mcm-fold]::after { color: currentColor; }
    #footer01 > .section02.mcm-open { padding-bottom: 10px; }
}