/*
 * IG Parts vehicle detail skin
 *
 * The component markup and all vehicle / calculator behaviour remain in the
 * Mobility Match Hub plugin.  These rules deliberately only restyle the
 * branded detail wrapper that is rendered on the trusted IG Parts host.
 */

body.igparts-site .mmh-detail,
body.igparts-site .gofleet-detail {
	--mmh-bg: #ffffff;
	--mmh-card-bg: #ffffff;
	--mmh-text: #001a72;
	--mmh-text-muted: #52627a;
	--mmh-text-light: #73829a;
	--mmh-accent: #001a72;
	--mmh-accent-hover: #00145c;
	--mmh-primary: #001a72;
	--mmh-primary-bg: #eef4ff;
	--mmh-success: #001a72;
	--mmh-success-bg: #eef4ff;
	--mmh-signal: #001a72;
	--mmh-signal-bg: #eef4ff;

	/*
	 * Alt-Aliasse aus dem gemeinsamen Motor.
	 *
	 * Sie sind dort als `--mmh-blue-bg: var(--mmh-primary-bg)` deklariert, aber
	 * ausserhalb dieses Bereichs. Ihr Wert steht deshalb schon fest, bevor die
	 * Grundvariablen oben auf IG Parts umgestellt werden — sie tragen weiterhin
	 * Mobility-Match-Farben und muessen einzeln nachgezogen werden.
	 *
	 * Am 20.08.2026 am laufenden System gemessen: `--mmh-primary-bg` stand
	 * korrekt auf #eef4ff, `--mmh-blue-bg` gleichzeitig auf #e8f8ef — einem
	 * Gruenton. Sichtbar wurde er beim Ueberfahren der Fahrzeugdetail-Kacheln.
	 *
	 * Die Namen taeuschen zusaetzlich: "blue" traegt gruen, "orange" traegt gelb.
	 * Beim Ergaenzen weiterer Variablen nicht auf den Namen verlassen, sondern
	 * den aufgeloesten Wert am gerenderten Element messen.
	 */
	--mmh-blue: #001a72;
	--mmh-blue-bg: #eef4ff;
	--mmh-green: #001a72;
	--mmh-green-bg: #eef4ff;
	--mmh-orange: #00e6ff;
	--mmh-orange-bg: #eef4ff;
	--gofleet-blue: #001a72;
	--gofleet-blue-bg: #eef4ff;
	--gofleet-green: #001a72;
	--gofleet-green-bg: #eef4ff;
	--gofleet-orange: #00e6ff;
	--gofleet-orange-bg: #eef4ff;

	--mmh-border: #d7e1f2;
	--mmh-shadow: 0 8px 24px rgba(0, 26, 114, 0.08);
	--mmh-shadow-hover: 0 12px 28px rgba(0, 26, 114, 0.12);
	--mmh-radius: 12px;
	--mmh-radius-sm: 6px;
	--mmh-font: Arial, Helvetica, sans-serif;
	--mmh-font-heading: Arial, Helvetica, sans-serif;
}

/* The page header is a sibling immediately before the real detail wrapper. */
body.igparts-site .mmh-page-header:has(+ .mmh-detail),
body.igparts-site .gofleet-page-header:has(+ .gofleet-detail) {
	position: static;
	padding: 30px 32px 22px;
	background: #ffffff;
	border-bottom: 1px solid #d7e1f2;
	box-shadow: none;
	font-family: Arial, Helvetica, sans-serif;
}

body.igparts-site .mmh-page-header:has(+ .mmh-detail) .mmh-page-header__inner,
body.igparts-site .gofleet-page-header:has(+ .gofleet-detail) .gofleet-page-header__inner {
	max-width: 1400px;
}

body.igparts-site .mmh-page-header:has(+ .mmh-detail) .mmh-page-header__title,
body.igparts-site .gofleet-page-header:has(+ .gofleet-detail) .gofleet-page-header__title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(2rem, 3.2vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	color: #001a72;
}

body.igparts-site .mmh-page-header:has(+ .mmh-detail) .mmh-page-header__subline,
body.igparts-site .gofleet-page-header:has(+ .gofleet-detail) .gofleet-page-header__subline,
body.igparts-site .mmh-detail .mmh-calc__meta-label,
body.igparts-site .gofleet-detail .gofleet-calc__meta-label,
body.igparts-site .mmh-detail .mmh-calc__contract-row,
body.igparts-site .gofleet-detail .gofleet-calc__contract-row {
	color: #52627a;
}

body.igparts-site .mmh-page-header:has(+ .mmh-detail) .mmh-badge,
body.igparts-site .gofleet-page-header:has(+ .gofleet-detail) .gofleet-badge {
	background: #eef4ff;
	color: #001a72;
	border: 1px solid #d7e1f2;
	border-radius: 999px;
}

body.igparts-site .mmh-detail,
body.igparts-site .gofleet-detail {
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 40px;
	max-width: 1400px;
	padding: 32px;
	font-family: Arial, Helvetica, sans-serif;
	background: #ffffff;
}

body.igparts-site .mmh-detail .mmh-gallery__main,
body.igparts-site .gofleet-detail .gofleet-gallery__main {
	background: #f6f8fc;
	border: 1px solid #d7e1f2;
	border-radius: 12px;
	box-shadow: none;
}

/* Leasing vehicles remain fully visible, matching the established GoFleet view. */
body.igparts-site .mmh-detail .mmh-gallery__main img,
body.igparts-site .gofleet-detail .gofleet-gallery__main img {
	object-fit: contain;
}

body.igparts-site .mmh-detail .mmh-gallery__thumb,
body.igparts-site .gofleet-detail .gofleet-gallery__thumb {
	border-color: #d7e1f2;
	border-radius: 6px;
}

body.igparts-site .mmh-detail .mmh-gallery__thumb--active,
body.igparts-site .gofleet-detail .gofleet-gallery__thumb--active {
	border-color: #001a72;
}

/*
 * Regulatory energy-efficiency scale: these colours are semantic vehicle
 * information, not IG Parts brand colours. Keep the A-to-G sequence fixed.
 */
body.igparts-site .mmh-detail .mmh-energy {
	--mmh-energy-grade-a: #00a651;
	--mmh-energy-grade-b: #52b848;
	--mmh-energy-grade-c: #b6d333;
	--mmh-energy-grade-d: #f6e71d;
	--mmh-energy-grade-e: #f9b233;
	--mmh-energy-grade-f: #ef7d32;
	--mmh-energy-grade-g: #e30613;
}

/* Protected staging serves the same statutory scale through the legacy
 * gofleet-* component. These are legal energy-label colours, not branding. */
body.igparts-site .gofleet-detail .gofleet-energy {
	--gofleet-energy-grade-a: #00a651;
	--gofleet-energy-grade-b: #52b848;
	--gofleet-energy-grade-c: #b6d333;
	--gofleet-energy-grade-d: #f6e71d;
	--gofleet-energy-grade-e: #f9b233;
	--gofleet-energy-grade-f: #ef7d32;
	--gofleet-energy-grade-g: #e30613;
}

body.igparts-site .mmh-detail .mmh-detail__nav,
body.igparts-site .gofleet-detail .gofleet-detail__nav {
	background: #ffffff;
	border-bottom-color: #d7e1f2;
}

/*
 * Der aktive Abschnittsreiter erhaelt im gemeinsamen Motor einen fest
 * eingetragenen Rahmen in rgba(29, 185, 84, 0.35) — einem Gruenton, der ueber
 * keine Variable laeuft und deshalb von der Umstellung oben nicht erfasst wird.
 * Hintergrund und Schrift des Reiters sind bereits korrekt; nur der Rahmen fiel
 * heraus.
 */
body.igparts-site .mmh-detail .mmh-section-nav__link.is-active,
body.igparts-site .gofleet-detail .gofleet-section-nav__link.is-active {
	border-color: #d7e1f2;
}

body.igparts-site .mmh-detail .mmh-detail__sidebar,
body.igparts-site .gofleet-detail .gofleet-detail__sidebar {
	position: sticky;
	top: 24px;
}

body.igparts-site .mmh-detail .mmh-calc,
body.igparts-site .gofleet-detail .gofleet-calc {
	background: #ffffff;
	border-color: #d7e1f2;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 26, 114, 0.08);
}

body.igparts-site .mmh-detail .mmh-calc__footer,
body.igparts-site .gofleet-detail .gofleet-calc__footer {
	background: #ffffff;
	border-top-color: #d7e1f2;
}

body.igparts-site .mmh-detail .mmh-calc__rate-box,
body.igparts-site .gofleet-detail .gofleet-calc__rate-box {
	background: #001a72;
	border-radius: 6px;
	box-shadow: none;
}

/*
 * The shared calculator adds --up/--down while it counts to a new rate.
 * Its generic colour resolves to navy in this brand, so keep the numerals
 * white for the complete animation on the navy rate card.
 */
body.igparts-site .mmh-detail .mmh-calc__rate-value,
body.igparts-site .gofleet-detail .gofleet-calc__rate-value,
body.igparts-site .mmh-detail .mmh-calc__rate-value--up,
body.igparts-site .gofleet-detail .gofleet-calc__rate-value--up,
body.igparts-site .mmh-detail .mmh-calc__rate-value--down,
body.igparts-site .gofleet-detail .gofleet-calc__rate-value--down {
	color: #ffffff !important;
}

/* The public facade rewrites the canonical rate id and animation classes. */
body.igparts-site .mmh-detail #mmh-rate-value,
body.igparts-site .gofleet-detail #gofleet-rate-value,
body.igparts-site .mmh-detail #mmh-rate-value.mmh-calc__rate-value--animating,
body.igparts-site .gofleet-detail #gofleet-rate-value.gofleet-calc__rate-value--animating,
body.igparts-site .mmh-detail #mmh-rate-value.mmh-calc__rate-value--up,
body.igparts-site .gofleet-detail #gofleet-rate-value.gofleet-calc__rate-value--up,
body.igparts-site .mmh-detail #mmh-rate-value.mmh-calc__rate-value--down,
body.igparts-site .gofleet-detail #gofleet-rate-value.gofleet-calc__rate-value--down {
	color: #ffffff !important;
}

/* Keep the CTA inside the real canonical/facade detail wrappers. */
body.igparts-site .mmh-detail .mmh-calc__cta,
body.igparts-site .gofleet-detail .gofleet-calc__cta,
body.igparts-site .mmh-detail .mmh-calc__cta:visited,
body.igparts-site .gofleet-detail .gofleet-calc__cta:visited {
	background: #001a72;
	border-radius: 6px;
	box-shadow: none;
	font-family: Arial, Helvetica, sans-serif;
}

body.igparts-site .mmh-detail .mmh-calc__cta:hover,
body.igparts-site .gofleet-detail .gofleet-calc__cta:hover,
body.igparts-site .mmh-detail .mmh-calc__cta:focus,
body.igparts-site .gofleet-detail .gofleet-calc__cta:focus {
	background: #00145c;
	box-shadow: none;
}

body.igparts-site .mmh-detail .mmh-calc__btn--active,
body.igparts-site .gofleet-detail .gofleet-calc__btn--active,
body.igparts-site .mmh-detail .mmh-calc__btn--active *,
body.igparts-site .gofleet-detail .gofleet-calc__btn--active * {
	background: #001a72;
	border-color: #001a72;
	color: #ffffff;
}

body.igparts-site .mmh-detail .mmh-calc__contract-panel,
body.igparts-site .gofleet-detail .gofleet-calc__contract-panel,
body.igparts-site .mmh-detail .mmh-calc__contract-row,
body.igparts-site .gofleet-detail .gofleet-calc__contract-row,
body.igparts-site .mmh-detail .mmh-calc__meta,
body.igparts-site .gofleet-detail .gofleet-calc__meta {
	border-color: #d7e1f2;
}

/* Keep every detail section compact without changing cards or navigation. */
body.igparts-site #gofleet-detail > .gofleet-detail__top > #gofleet-vehicle-header,
body.igparts-site #gofleet-detail > .gofleet-detail__content > section,
body.igparts-site #mmh-detail > .mmh-detail__top > #mmh-vehicle-header,
body.igparts-site #mmh-detail > .mmh-detail__content > section {
	padding-block: 20px;
}

/* The shared configuration modal marks its final CTA as a success action.
 * On IG Parts that must stay within the navy action system, including hover. */
body.igparts-site #gofleet-modal-next.gofleet-modal__btn-next,
body.igparts-site #gofleet-modal-next.gofleet-modal__btn-next--cta,
body.igparts-site #mmh-modal-next.mmh-modal__btn-next,
body.igparts-site #mmh-modal-next.mmh-modal__btn-next--cta {
	background: #001a72 !important;
	border-color: #001a72 !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

body.igparts-site #gofleet-modal-next.gofleet-modal__btn-next:hover,
body.igparts-site #gofleet-modal-next.gofleet-modal__btn-next--cta:hover,
body.igparts-site #gofleet-modal-next.gofleet-modal__btn-next:focus-visible,
body.igparts-site #gofleet-modal-next.gofleet-modal__btn-next--cta:focus-visible,
body.igparts-site #mmh-modal-next.mmh-modal__btn-next:hover,
body.igparts-site #mmh-modal-next.mmh-modal__btn-next--cta:hover,
body.igparts-site #mmh-modal-next.mmh-modal__btn-next:focus-visible,
body.igparts-site #mmh-modal-next.mmh-modal__btn-next--cta:focus-visible {
	background: #00145c !important;
	border-color: #00145c !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

/* The legacy search modal shares this class name; restore the configurator's card layout. */
body.igparts-site .gofleet-modal-overlay .gofleet-modal {
	position: relative !important;
	inset: auto !important;
	z-index: auto !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	padding: 0 !important;
}

/* Configuration choices need to read as full-width, keyboard-accessible controls. */
body.igparts-site .gofleet-modal :is(.gofleet-modal__btn-grid, .gofleet-modal__color-grid) {
	width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

body.igparts-site .gofleet-modal :is(.gofleet-modal__option-btn, .gofleet-modal__extra-btn, .gofleet-modal__color-btn) {
	width: 100%;
	border: 2px solid #001A72 !important;
	border-radius: 3px;
	background: #ffffff !important;
	color: #001A72 !important;
	box-shadow: none;
}

body.igparts-site .gofleet-modal :is(.gofleet-modal__option-btn, .gofleet-modal__extra-btn, .gofleet-modal__color-btn):hover {
	border-color: #001A72 !important;
	background: #EEF4FF !important;
	color: #001A72 !important;
}

body.igparts-site .gofleet-modal :is(.gofleet-modal__option-btn, .gofleet-modal__extra-btn, .gofleet-modal__color-btn):focus-visible {
	outline: 2px solid #00E6FF;
	outline-offset: 3px;
}

body.igparts-site .gofleet-modal :is(.gofleet-modal__option-btn--active, .gofleet-modal__extra-btn--active, .gofleet-modal__color-btn--active),
body.igparts-site .gofleet-modal :is(.gofleet-modal__option-btn--active, .gofleet-modal__extra-btn--active, .gofleet-modal__color-btn--active):hover {
	border-color: #001A72 !important;
	background: #001A72 !important;
	color: #ffffff !important;
}

/* The current configurator uses mmh-modal; retain visible choice states despite the global button reset. */
body.igparts-site .mmh-modal .mmh-modal__option-btn {
	width: 100%;
	border: 2px solid #001A72 !important;
	border-radius: 3px;
	background: #ffffff !important;
	color: #001A72 !important;
	box-shadow: none;
}

body.igparts-site .mmh-modal .mmh-modal__option-btn:hover {
	border-color: #001A72 !important;
	background: #EEF4FF !important;
	color: #001A72 !important;
}

body.igparts-site .mmh-modal .mmh-modal__option-btn:focus-visible {
	outline: 2px solid #00E6FF;
	outline-offset: 3px;
}

body.igparts-site .mmh-modal .mmh-modal__option-btn--active,
body.igparts-site .mmh-modal .mmh-modal__option-btn--active:hover {
	border-color: #001A72 !important;
	background: #001A72 !important;
	color: #ffffff !important;
}

/* Recommended extras use the IG Parts navy/cyan system; keep maintenance/wear distinct. */
body.igparts-site .mmh-modal .mmh-modal__extra-btn:not(.mmh-modal__maintenance-wear-btn) {
	border: 2px solid #001A72 !important;
	border-radius: 3px;
	background: #ffffff !important;
	color: #001A72 !important;
	box-shadow: none;
}

body.igparts-site .mmh-modal .mmh-modal__extra-btn:not(.mmh-modal__maintenance-wear-btn):hover {
	border-color: #001A72 !important;
	background: #EEF4FF !important;
	color: #001A72 !important;
}

body.igparts-site .mmh-modal .mmh-modal__extra-btn:not(.mmh-modal__maintenance-wear-btn):focus-visible {
	outline: 2px solid #00E6FF;
	outline-offset: 3px;
}

body.igparts-site .mmh-modal .mmh-modal__extra-btn--recommended:not(.mmh-modal__maintenance-wear-btn) {
	border-color: #001A72 !important;
	background: #ffffff !important;
	color: #001A72 !important;
}

body.igparts-site .mmh-modal .mmh-modal__extra-btn--recommended .mmh-modal__extra-badge {
	background: #00E6FF !important;
	color: #001A72 !important;
}

body.igparts-site .mmh-modal .mmh-modal__extra-btn:not(.mmh-modal__maintenance-wear-btn).mmh-modal__extra-btn--active,
body.igparts-site .mmh-modal .mmh-modal__extra-btn:not(.mmh-modal__maintenance-wear-btn).mmh-modal__extra-btn--active:hover,
body.igparts-site .mmh-modal .mmh-modal__extra-btn--recommended:not(.mmh-modal__maintenance-wear-btn).mmh-modal__extra-btn--active,
body.igparts-site .mmh-modal .mmh-modal__extra-btn--recommended:not(.mmh-modal__maintenance-wear-btn).mmh-modal__extra-btn--active:hover {
	border-color: #001A72 !important;
	background: #001A72 !important;
	color: #ffffff !important;
}

body.igparts-site .mmh-modal .mmh-modal__extra-btn:not(.mmh-modal__maintenance-wear-btn).mmh-modal__extra-btn--active .mmh-modal__extra-check {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.25);
}

body.igparts-site .mmh-modal .mmh-modal__extra-btn:not(.mmh-modal__maintenance-wear-btn).mmh-modal__extra-btn--active .mmh-modal__extra-check::after {
	border-color: #ffffff;
}

/* Color and extra-info buttons are real buttons; protect them from the global IG Parts button reset. */
body.igparts-site .mmh-modal .mmh-modal__color-btn {
	border: 2px solid #001A72 !important;
	border-radius: 3px;
	background: #ffffff !important;
	color: #001A72 !important;
	box-shadow: none;
}

body.igparts-site .mmh-modal .mmh-modal__color-btn:hover {
	border-color: #001A72 !important;
	background: #EEF4FF !important;
	color: #001A72 !important;
}

body.igparts-site .mmh-modal .mmh-modal__color-btn:focus-visible {
	outline: 2px solid #00E6FF;
	outline-offset: 3px;
}

body.igparts-site .mmh-modal .mmh-modal__extra-info:focus-visible {
	outline: 2px solid #00E6FF;
	outline-offset: 3px;
}

body.igparts-site .mmh-modal .mmh-modal__color-btn--active,
body.igparts-site .mmh-modal .mmh-modal__color-btn--active:hover {
	border-color: #001A72 !important;
	background: #001A72 !important;
	color: #ffffff !important;
}

body.igparts-site .mmh-modal .mmh-modal__extra-info {
	border: 1px solid #001A72 !important;
	background: #ffffff !important;
	color: #001A72 !important;
}

body.igparts-site .mmh-modal .mmh-modal__extra-info:hover {
	border-color: #001A72 !important;
	background: #EEF4FF !important;
	color: #001A72 !important;
}

body.igparts-site .mmh-modal .mmh-modal__extra-btn--active .mmh-modal__extra-info,
body.igparts-site .mmh-modal .mmh-modal__extra-btn--recommended.mmh-modal__extra-btn--active .mmh-modal__extra-info {
	border-color: rgba(255, 255, 255, 0.85) !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: #001A72 !important;
}

/* Source filenames are internal evidence, not public option copy. */
body.igparts-site .gofleet-modal :is(.gofleet-modal__extra-info, .gofleet-modal__extra-description) {
	display: none !important;
}

@media (max-width: 640px) {
	body.igparts-site .gofleet-modal :is(.gofleet-modal__btn-grid, .gofleet-modal__color-grid) {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1024px) {
	body.igparts-site .mmh-detail,
	body.igparts-site .gofleet-detail {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 24px 20px 56px;
	}

	body.igparts-site .mmh-detail .mmh-detail__sidebar,
	body.igparts-site .gofleet-detail .gofleet-detail__sidebar {
		position: static;
	}
}

@media (max-width: 640px) {
	body.igparts-site #gofleet-detail > .gofleet-detail__top > #gofleet-vehicle-header,
	body.igparts-site #gofleet-detail > .gofleet-detail__content > section,
	body.igparts-site #mmh-detail > .mmh-detail__top > #mmh-vehicle-header,
	body.igparts-site #mmh-detail > .mmh-detail__content > section {
		padding-block: 16px;
	}

	body.igparts-site .mmh-page-header:has(+ .mmh-detail),
	body.igparts-site .gofleet-page-header:has(+ .gofleet-detail) {
		padding: 22px 20px 18px;
	}

	body.igparts-site .mmh-page-header:has(+ .mmh-detail) .mmh-page-header__title,
	body.igparts-site .gofleet-page-header:has(+ .gofleet-detail) .gofleet-page-header__title {
		font-size: 2rem;
	}

	body.igparts-site .mmh-detail,
	body.igparts-site .gofleet-detail {
		padding: 20px 16px 48px;
	}
}