/* Reusable search autocomplete dropdown — carbon-copy of the legacy
   #suggestionBox / .suggestion-item / .type-tag design (flying411.com).
   Shared by the home hero search and the aircraft listing search so both
   render identically. All selectors are scoped under .search-suggestion-box
   to avoid colliding with the vendored .type-tag rules in home.css/aircraft.css. */
/* The hero search input gets the global amber :focus-visible ring (globals.css)
   which the legacy never had — drop it on the pill input (both home + aircraft
   load this file). The input keeps its box-shadow as a subtle focus cue. */
.search-input:focus,
.search-input:focus-visible {
    outline: none;
}

/* Narrow screens: the hero search-bar stacks and stretches its wrapper to full
   width. Make the input + wrapper fill it too, so the magnifier icon stays
   inside the field (instead of jumping to the wrapper's left edge) and the
   suggestion dropdown snaps to the viewport width. Same on home + aircraft. */
@media (max-width: 768px) {
    /* Side gap so the field (and the dropdown that follows its width) doesn't
       sit edge-to-edge against the viewport. */
    .search-bar {
        box-sizing: border-box;
        padding-left: 28px;
        padding-right: 28px;
    }
    .search-wrapper {
        display: block;
        width: 100%;
    }
    .search-input {
        width: 100% !important;
    }
}

/* Keep each listing card a self-contained stacking context so its badge / save
   heart / carousel-button z-indexes don't leak up to the root and paint over
   page overlays like this dropdown. */
.v3-listing-card {
    isolation: isolate;
}

.search-suggestion-box {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
    background: #1e293b;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(3, 7, 18, 0.35);
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #999 transparent;
}
/* Pin the font so the dropdown looks the same on every page — each page's
   vendored `* { font-family: … !important }` reset differs (EB Garamond on
   home, Plus Jakarta on aircraft); this beats it via higher specificity. */
.search-suggestion-box,
.search-suggestion-box * {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}
.search-suggestion-box::-webkit-scrollbar {
    width: 6px;
}
.search-suggestion-box::-webkit-scrollbar-track {
    background: transparent;
}
.search-suggestion-box::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 4px;
}

.search-suggestion-box .suggestion-rows {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.search-suggestion-box .suggestion-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    color: #f8fafc;
    text-decoration: none;
    font-size: 13px;
}
.search-suggestion-box .suggestion-row:hover,
.search-suggestion-box .suggestion-row:focus-visible {
    background: #22314a;
}
.search-suggestion-box .suggestion-row--request {
    border-top: 1px solid #2b3c57;
}

.search-suggestion-box .suggestion-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    white-space: nowrap;
    color: #ffffff;
}
.search-suggestion-box .suggestion-tag.is-aircraft {
    background: #065f46;
}
.search-suggestion-box .suggestion-tag.is-engine {
    background: #1e40af;
}
.search-suggestion-box .suggestion-tag.is-part {
    background: #991b1b;
}
.search-suggestion-box .suggestion-tag.is-service {
    background: #9d174d;
}
.search-suggestion-box .suggestion-tag.is-default {
    background: #1e3a8a;
}

.search-suggestion-box .suggestion-label {
    line-height: 1.4;
    text-align: left;
}
.search-suggestion-box .suggestion-status {
    margin: 0;
    padding: 10px 16px;
    font-size: 13px;
    color: #d1d5db;
}

@media (max-width: 480px) {
    .search-suggestion-box .suggestion-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .search-suggestion-box .suggestion-tag {
        margin-bottom: 6px;
    }
}