/*
 * Computer header search styles.
 * Extracted from module/computer/layout/search.phtml during audit Step 6a.
 *
 * PHP-interpolated brand colours migrated to tokens:
 *   searchBgColor → var(--lb-search-bg) (new token)
 *   searchSelectTextColor → var(--lb-brand) (same value as firstColor on both brands)
 *   buttonColor → var(--lb-accent)
 *   adjustBrightness(buttonColor, -20) → var(--lb-accent-hover)
 */

.searchWrapper{
    display: flex;
    position: relative;
}

.searchLeft{
    height: 38px !important;
    max-width: 220px;
}

.searchFill{
    width: 100%;
}

.searchFill input{
    margin: 0 auto;
    display: block;
    width: 100%;
    height: 38px !important;
    padding: 0 10px;
    color: #131313;
    font-size: 14px;
    font-weight: 500;
    background: var(--lb-search-bg);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.searchLeft select{
    height: 38px !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 0;
    outline: 0;
    padding: 0 10px;
    font-weight: 500;
    color: var(--lb-brand) !important;
    cursor: pointer;
    max-width: 220px;
    background: var(--lb-search-bg);
}

.btn-search-comp{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-weight: 500;
    background-color: var(--lb-accent) !important;
    border-color: var(--lb-accent) !important;
}

.btn-search-comp:active,
.btn-search-comp.active,
.btn-search-comp:focus,
.btn-search-comp.focus,
.btn-search-comp[disabled]:hover{
    color: #FFF !important;
    background-color: var(--lb-accent) !important;
    border-color: var(--lb-accent) !important;
}

.btn-search-comp:hover{
    background-color: var(--lb-accent-hover) !important;
    border-color: var(--lb-accent-hover) !important;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
    outline-offset: 0;
}

#searchResults{
    position: absolute;
    top: 40px;
    left: 0;
    background: #fff;
    width: 100%;
    color: #000;
    overflow-y: auto;
    max-height: 372px;
    z-index: 200;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}

#searchResults::-webkit-scrollbar{
    width: 10px;
}

#searchResults::-webkit-scrollbar-track{
    background: #ebebeb;
}

#searchResults::-webkit-scrollbar-thumb{
    background: #888;
}

#searchResults::-webkit-scrollbar-thumb:hover{
    background: #616161;
}

.searchResultsLoading{
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 25px;
}

.searchResultsTop{
    background: #ebebeb;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
}