/*
 * ATP smart-suggest dropdown. Inherits the Performance search design tokens
 * (defined on .atp-app in atp-search.css) so it matches the app exactly.
 * Enriched rows: brand logo, car icon, ECU/TCU badges.
 */

.atp-app .atp-suggest-host { position: relative; }

.atp-app .atp-suggest {
	position: absolute;
	left: 0; right: 0; top: calc(100% + var(--space-2));
	z-index: 60;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
	overflow: hidden auto;
	max-height: 70vh;
	font-family: inherit;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.atp-app .atp-suggest[hidden] { display: none; }

.atp-app .atp-sg__group { padding: var(--space-1) 0; border-top: 1px solid var(--line); }
.atp-app .atp-sg__group:first-child { border-top: 0; }
.atp-app .atp-sg__h {
	font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--text-dim);
	padding: var(--space-2) var(--space-4) var(--space-1);
}

/* Rows */
.atp-app .atp-sg__row {
	display: flex; align-items: center; gap: var(--space-3);
	width: 100%;
	padding: 9px var(--space-4);
	border: 0; background: transparent;
	text-align: left; text-decoration: none; cursor: pointer;
	color: var(--text);
	font-family: inherit;
	transition: background var(--motion-fast);
}
/* Mouse hover — a soft tint only. */
.atp-app .atp-sg__row:hover { background: rgba(15, 23, 42, 0.045); }
/* Keyboard selection (arrow keys) — deliberately stronger than the hover tint
   plus a brand accent rail on the left edge, so it reads as an explicit
   selection that is visually distinct from a passing hover. */
.atp-app .atp-sg__row.is-active {
	background: rgba(15, 23, 42, 0.085);
	box-shadow: inset 3px 0 0 0 var(--performance-orange, #f26921);
}

.atp-app .atp-sg__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atp-app .atp-sg__title {
	font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atp-app .atp-sg__sub {
	font-size: 12.5px; color: var(--text-dim); line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atp-app .atp-sg__title mark {
	background: transparent; color: var(--text); border-radius: 3px;
	padding: 0; font-weight: 700;
}

.atp-app .atp-sg__go { flex: 0 0 auto; color: var(--text-dim); opacity: 0.55; }
.atp-app .atp-sg__row:hover .atp-sg__go,
.atp-app .atp-sg__row.is-active .atp-sg__go { color: var(--text); opacity: 1; }

/* Brand logo tile */
.atp-app .atp-sg__logo {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	border: 1px solid var(--line); border-radius: var(--radius-md);
	background: var(--panel);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.atp-app .atp-sg__logo img { max-width: 80%; max-height: 70%; object-fit: contain; }
.atp-app .atp-sg__logo--txt {
	background: var(--text); color: var(--panel); border-color: var(--text);
	font-weight: 600; font-size: 17px;
}

/* Car / unit icon */
.atp-app .atp-sg__ico {
	flex: 0 0 auto;
	width: 42px; height: 42px; border-radius: var(--radius-md);
	background: var(--panel-3); color: var(--text-soft);
	display: flex; align-items: center; justify-content: center;
}
.atp-app .atp-sg__ico svg { width: 22px; height: 22px; }
.atp-app .atp-sg__ico--unit { background: transparent; }

/* ECU / TCU badges — visually distinct */
.atp-app .atp-sg__badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 24px; padding: 0 9px;
	border-radius: var(--radius-sm);
	font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
	color: var(--panel);
}
.atp-app .atp-sg__badge--ecu { background: var(--text); }
.atp-app .atp-sg__badge--tcu { background: var(--accent); }
/* UDM / ACM: distinct from ECU(dark) and TCU(accent) so the four kinds read apart. */
.atp-app .atp-sg__badge--udm { background: #2f6f4f; }
.atp-app .atp-sg__badge--acm { background: #8a5a1c; }

/* Title + inline ECU/TCU badge on a vehicle row: title ellipsises, badge holds. */
.atp-app .atp-sg__titlewrap { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.atp-app .atp-sg__titlewrap .atp-sg__title { flex: 0 1 auto; }
.atp-app .atp-sg__badge--inline {
	flex: 0 0 auto;
	min-width: 0; height: 18px; padding: 0 7px;
	font-size: 10px; letter-spacing: 0.04em;
	max-width: 46%;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	display: inline-block; line-height: 18px;
}
.atp-app .atp-sg__badge--inline mark { background: transparent; color: inherit; padding: 0; }

/* Vehicle sub line: variant · fuel(icon) · engine · power · years. */
.atp-app .atp-sg__sub--meta { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; }
.atp-app .atp-sg__meta { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.atp-app .atp-sg__meta--fuel { flex: 0 0 auto; }
/* Engine-code : icone moteur + code, fondu dans la sous-ligne (meme couleur, taille
   et graisse que les autres bits : variant, fuel, power...). L'icone seule signale
   "code moteur". Pas de pill, pas de mono, pas de bold. */
.atp-app .atp-sg__meta--code {
	flex: 0 0 auto;
	gap: 4px;
}
.atp-app .atp-sg__codeico { display: inline-flex; color: var(--text-soft); }
.atp-app .atp-sg__codeico svg { width: 13px; height: 13px; }
.atp-app .atp-sg__fuelico { display: inline-flex; color: var(--text-soft); }
.atp-app .atp-sg__fuelico svg { width: 13px; height: 13px; }
.atp-app .atp-sg__sep { flex: 0 0 auto; margin: 0 7px; color: var(--line-strong); }
.atp-app .atp-sg__sub--meta .atp-sg__meta mark { background: transparent; color: var(--text); border-radius: 3px; padding: 0; font-weight: 700; }

.atp-app .atp-sg__empty {
	padding: var(--space-6) var(--space-4); text-align: center;
	font-size: 13.5px; color: var(--text-dim);
}

/* "See all results" footer — a quiet, neutral, compact bridge to the full grid
   (not a loud accent CTA). Smaller text, grayscale icon, count pill. */
.atp-app .atp-sg__group--all { border-top: 1px solid var(--line); padding: 0; }
.atp-app .atp-sg__row--all { padding: 8px var(--space-4); gap: var(--space-2); }
.atp-app .atp-sg__ico--all {
	width: 28px; height: 28px; border-radius: var(--radius-sm);
	background: var(--panel-3); color: var(--text-soft);
}
.atp-app .atp-sg__ico--all svg { width: 15px; height: 15px; }
.atp-app .atp-sg__row--all .atp-sg__title {
	font-size: 12.5px; font-weight: 500; color: var(--text-soft);
}
.atp-app .atp-sg__count {
	flex: 0 0 auto;
	font-size: 11px; font-weight: 600; color: var(--text-dim);
	background: var(--panel-3); border-radius: 999px;
	padding: 2px 9px; line-height: 1.45;
}
.atp-app .atp-sg__row--all:hover .atp-sg__count,
.atp-app .atp-sg__row--all.is-active .atp-sg__count { background: var(--panel-4); }

/* Loading skeleton */
.atp-app .atp-sg__sk {
	display: flex; align-items: center; gap: var(--space-3);
	padding: 9px var(--space-4);
}
.atp-app .atp-sg__sk-ico {
	width: 42px; height: 42px; border-radius: var(--radius-md);
	background: var(--panel-3); flex: 0 0 auto;
}
.atp-app .atp-sg__sk-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; }
.atp-app .atp-sg__sk-lines span { height: 10px; border-radius: 5px; background: var(--panel-3); }
.atp-app .atp-sg__sk-lines span:first-child { width: 58%; }
.atp-app .atp-sg__sk-lines span:last-child { width: 34%; }
@media (prefers-reduced-motion: no-preference) {
	.atp-app .atp-sg__sk-ico,
	.atp-app .atp-sg__sk-lines span {
		background: linear-gradient(90deg, var(--panel-3) 0%, var(--panel-4) 50%, var(--panel-3) 100%);
		background-size: 200% 100%;
		animation: atp-sg-shimmer 1.1s ease-in-out infinite;
	}
	@keyframes atp-sg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
}

@media (max-width: 600px) {
	.atp-app .atp-suggest { max-height: 64vh; }
	.atp-app .atp-sg__title { font-size: 14px; }
	/* Keep brand logo tiles as-is; the plain vehicle icon is de-boxed below. */
	.atp-app .atp-sg__logo { width: 38px; height: 38px; }

	/* Vehicle-row icon: drop the grey square, keep only the car glyph. */
	.atp-app .atp-sg__row { align-items: flex-start; gap: var(--space-2); }
	.atp-app .atp-sg__ico:not(.atp-sg__ico--all) {
		background: transparent;
		width: auto; height: auto;
		border-radius: 0;
		color: var(--text-soft);
	}
	.atp-app .atp-sg__ico:not(.atp-sg__ico--all) svg { width: 20px; height: 20px; }

	/* Vehicle rows: icon + model on line 1, and drop the spec line to its OWN
	   full-width line beneath so the specs get the whole row width instead of being
	   squeezed into the narrow column beside the icon. `display: contents` promotes
	   the title + sub out of `.atp-sg__body` so the row grid can place them directly.
	   Scoped to vehicle rows only — brand / unit / see-all / correct rows keep the
	   simple single-line flex layout. */
	.atp-app .atp-sg__row[data-kind="vehicle"] {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"ico title go"
			"sub sub   sub";
		align-items: center;
		column-gap: var(--space-2);
		row-gap: 3px;
	}
	.atp-app .atp-sg__row[data-kind="vehicle"] .atp-sg__body { display: contents; }
	.atp-app .atp-sg__row[data-kind="vehicle"] .atp-sg__ico { grid-area: ico; }
	.atp-app .atp-sg__row[data-kind="vehicle"] .atp-sg__titlewrap { grid-area: title; min-width: 0; }
	.atp-app .atp-sg__row[data-kind="vehicle"] .atp-sg__sub { grid-area: sub; }
	.atp-app .atp-sg__row[data-kind="vehicle"] .atp-sg__go { grid-area: go; align-self: center; }

	/* The spec chips must NOT shrink below their text width — that shrink is what
	   made the text overflow its own box and overlap the next chip. Let each chip
	   keep its natural size, then clip the whole line at the row's right edge with a
	   soft fade: we deliberately truncate the least-important trailing specs on
	   mobile rather than cram everything in. */
	.atp-app .atp-sg__row[data-kind="vehicle"] .atp-sg__sub--meta {
		flex-wrap: nowrap;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
		        mask-image: linear-gradient(to right, #000 88%, transparent);
	}
	.atp-app .atp-sg__row[data-kind="vehicle"] .atp-sg__sub--meta .atp-sg__meta { flex: 0 0 auto; min-width: auto; }

	/* Tighten separators a touch. */
	.atp-app .atp-sg__sep { margin: 0 5px; }
}

@media (prefers-reduced-motion: no-preference) {
	.atp-app .atp-suggest { animation: atp-sg-in var(--motion-enter) both; }
	@keyframes atp-sg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* =========================================================================
   Restructured search result cards — type icon + brand logo + model + info
   ========================================================================= */
.atp-app .selection-card-result {
	display: flex; flex-direction: column; gap: 10px;
	padding: 16px;
	text-align: left;
	/* Size to content — the base .selection-card min-height (240px) made search
	   result cards absurdly tall with big empty gaps. */
	min-height: 0;
	justify-content: flex-start;
}
/* Header: brand logo (far left) + type icon + vehicle name, all on one line. */
.atp-app .result-card-head {
	display: flex; align-items: center; gap: 12px;
	min-height: 52px;
}
.atp-app .result-card-type {
	flex: 0 0 auto; width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	color: var(--text-soft);
}
.atp-app .result-card-type svg { width: 26px; height: 26px; }
.atp-app .result-card-logo {
	flex: 0 0 auto; height: 52px; max-width: 128px;
	display: flex; align-items: center;
}
.atp-app .result-card-logo img { max-height: 50px; max-width: 128px; object-fit: contain; }
.atp-app .result-card-make {
	flex: 0 0 auto;
	font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
	text-transform: uppercase; color: var(--text-soft);
}
.atp-app .result-card-head .result-card-title {
	flex: 1 1 auto; min-width: 0;
	margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--text);
}

.atp-app .result-card-body { display: flex; flex-direction: column; gap: 8px; }
/* Variant trim + model years on one line, same size/colour, no label. */
.atp-app .result-card-variant {
	margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
	font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--text-soft);
}
.atp-app .result-card-years { color: inherit; font-size: inherit; font-weight: inherit; }
.atp-app .result-card-years:not(:first-child)::before {
	content: "·"; margin-right: 8px; color: var(--line-strong);
}

/* Labelled spec list — label stacked above its value, items separated by a
   drawn pipe. */
.atp-app .result-card-specs {
	margin: 0; display: flex; flex-wrap: wrap; align-items: stretch;
	gap: 8px 0;
}
.atp-app .result-card-spec {
	display: flex; flex-direction: column; gap: 3px;
	padding: 0 14px;
	border-left: 1px solid var(--line);
}
.atp-app .result-card-spec:first-child { padding-left: 0; border-left: 0; }
.atp-app .result-card-spec-label {
	font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--text-dim);
}
.atp-app .result-card-spec-value {
	margin: 0; display: inline-flex; align-items: center; gap: 5px;
	font-size: 13.5px; font-weight: 600; color: var(--text);
}
.atp-app .result-card-spec-icon { display: inline-flex; color: var(--text-soft); }
.atp-app .result-card-spec-icon svg { width: 15px; height: 15px; }

.atp-app .result-card-unitrow {
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px;
}

/* =========================================================================
   Sticky search bar + result counter (by type)
   ========================================================================= */
.atp-app .content-search {
	position: sticky;
	top: calc(var(--topbar-height) + var(--space-3));
	z-index: 20;
	background: var(--bg);
	padding: var(--space-2) 0 var(--space-3);
	margin-bottom: var(--space-3);
}

#selection-description .search-count {
	font-size: 14px; font-weight: 600; color: var(--text);
}
#selection-description .search-count-types {
	display: inline-flex; flex-wrap: wrap; gap: 6px;
	margin-left: 10px;
}
#selection-description .search-count-type {
	font-size: 12px; color: var(--text-soft);
	background: var(--panel-3); border-radius: var(--radius-sm);
	padding: 2px 9px;
}
#selection-description .search-count-type strong { color: var(--text); font-weight: 600; }

/* Infinite-scroll sentinel + batch loading spinner */
.atp-app .search-sentinel { width: 100%; height: 1px; }
.atp-app .search-sentinel.is-active { height: 52px; }
.atp-app .search-sentinel.is-loading::after {
	content: ""; display: block; margin: 16px auto 0;
	width: 22px; height: 22px;
	border: 2px solid var(--line-strong); border-top-color: var(--accent);
	border-radius: 50%;
	animation: atp-sentinel-spin 0.7s linear infinite;
}
@keyframes atp-sentinel-spin { to { transform: rotate(360deg); } }

/* "Did you mean" correction rows in the suggest dropdown (shown only when a
   query matched nothing but a close spelling exists). */
.atp-app .atp-sg__row--correct { display: block; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 9px 14px; font: inherit; }
.atp-app .atp-sg__row--correct:hover, .atp-app .atp-sg__row--correct.is-active { background: var(--panel-3, #f1efe8); }
.atp-app .atp-sg__correctTerm { font-weight: 600; color: var(--accent, #185fa5); }