/* ==========================================================================
   Search suggestions: the list under the header search and the catalog's
   OE-number box (views search/_suggest.php, js sp/search.js). Catalog places
   and categories use text/icons; identified products may have their own thumbnail.
   ========================================================================== */

.sp-site-search { position: relative; }
.sp-site-search:has(.sp-search-submit) { padding-right: 5px; }
.sp-site-search > .sp-search-submit { flex: none; width: var(--sp-hit); min-height: var(--sp-hit); padding: 0; border-radius: var(--sp-r-pill); }
/* Keep the button's space so typing never changes the field's dimensions. */
.sp-site-search:has(input:placeholder-shown):not([aria-busy="true"]) > .sp-search-submit { visibility: hidden; }
.sp-site-search.is-open { z-index: 45; }
/* The header isolates its stacking; lift it over the sticky car bar while the list is open. */
.sp-header:has(.sp-site-search.is-open) { z-index: 45; }

.sp-search-progress { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); display: none; color: var(--sp-ink-soft); pointer-events: none; }
.sp-site-search.is-loading > svg { visibility: hidden; }
.sp-site-search.is-loading .sp-search-progress { display: inline-flex; }
@media (max-width: 700px) { .sp-search-progress { left: 15px; } }

.sp-suggest {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1;
    max-height: min(72vh, 640px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px; border-radius: var(--sp-r-card);
    background: var(--sp-paper); color: var(--sp-ink); text-align: left;
    box-shadow: var(--sp-shadow-pop), 0 0 0 1px var(--sp-line);
}
.sp-suggest[hidden] { display: none; }

.sp-sug-group { padding: 4px 0; }
.sp-sug-group + .sp-sug-group, .sp-sug-group + .sp-sug-opt, .sp-sug-opt + .sp-sug-group { border-top: 1px solid var(--sp-line); margin-top: 4px; padding-top: 8px; }
.sp-sug-head { margin: 2px 10px 4px; font-size: var(--sp-fs-xs); font-weight: 600; line-height: 1.3; color: var(--sp-ink-soft); }

.sp-sug-opt {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--sp-hit);
    margin: 0; padding: 8px 10px; border: 0; border-radius: var(--sp-r-sm);
    background: none; color: var(--sp-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
body.sp .sp-sug-opt:hover, .sp-sug-opt.is-active { background: var(--sp-surface); color: var(--sp-ink); }
.sp-sug-icon {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: var(--sp-r-sm); background: var(--sp-surface); color: var(--sp-ink-soft);
}
.sp-sug-opt:hover .sp-sug-icon, .sp-sug-opt.is-active .sp-sug-icon { background: var(--sp-paper); }
.sp-sug-icon svg { width: 18px; height: 18px; }
.sp-sug-opt .sp-product-thumb { width: 32px; height: 32px; }
.sp-sug-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sp-sug-name { font-size: var(--sp-fs-ui); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sp-sug-opt mark { padding: 0 1px; border-radius: 3px; background: var(--sp-t1); color: inherit; }
.sp-sug-meta { font-size: var(--sp-fs-xs); line-height: 1.35; color: var(--sp-ink-soft); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sp-sug-meta .sp-fit { display: flex; margin-top: 3px; font-size: var(--sp-fs-xs); }
.sp-sug-meta .sp-fit svg { width: 14px; height: 14px; }
.sp-sug-side { flex: none; display: flex; align-items: center; gap: 8px; font-size: var(--sp-fs-ui); text-align: right; }
.sp-sug-note { color: var(--sp-ink-soft); font-size: var(--sp-fs-xs); }
.sp-sug-go { flex: none; width: 18px; height: 18px; color: var(--sp-action); }
.sp-sug-side .sp-plate-badge { font-size: 16px; line-height: 24px; }

/* The car rows (look up a plate, choose a car) are actions: green, like every action. */
.sp-sug-opt[data-picker] .sp-sug-icon { background: var(--sp-t1); color: var(--sp-action); }
.sp-sug-opt[data-picker] .sp-sug-name { color: var(--sp-action); }

.sp-sug-all { margin-top: 4px; }
.sp-sug-all .sp-sug-name { font-weight: 500; color: var(--sp-action); }
.sp-sug-empty { margin: 10px 12px 6px; font-size: var(--sp-fs-ui); color: var(--sp-ink-soft); }

@media (max-width: 999px) {
    .sp-suggest { max-height: 62vh; }
}