/*
 * 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);
}
.atp-app .atp-sg__row:hover,
.atp-app .atp-sg__row.is-active { background: rgba(15, 23, 42, 0.045); }

.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; }
	.atp-app .atp-sg__logo, .atp-app .atp-sg__ico { width: 38px; height: 38px; }
}

@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); }