/* =============================================================================
   SEARCH STYLING FIXES
   ============================================================================= */

/* Comprehensive fix to prevent search box from turning white */
#searchBox,
.search-box {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-background-color: transparent !important;
}

/* Handle all possible states that might turn the background white */
#searchBox:focus,
#searchBox:active,
#searchBox:hover,
#searchBox:-webkit-autofill,
#searchBox:-webkit-autofill:hover,
#searchBox:-webkit-autofill:focus,
#searchBox:-webkit-autofill:active,
.search-box:focus,
.search-box:active,
.search-box:hover,
.search-box:-webkit-autofill,
.search-box:-webkit-autofill:hover,
.search-box:-webkit-autofill:focus,
.search-box:-webkit-autofill:active {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 30px var(--bg-primary) inset !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    color: var(--text-secondary) !important;
}

/* Search suggestions dropdown styling */
.search-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: calc(100% - 2px) !important;
    background: #000000;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
    display: none;
    box-sizing: border-box;
}

.search-suggestions-dropdown.show {
    display: block;
}

.search-suggestion-item {
    padding: 8px 12px;
    color: var(--accent-primary);
    background: #000000;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color 0.2s ease;
    font-size: 14.4px;
    font-family: 'Space Grotesk', Roboto, sans-serif;
    line-height: 1.4;
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestion-item:hover,
.search-suggestion-item.highlighted {
    background: rgba(240, 246, 252, 0.1);
    color: var(--accent-primary);
}

/* Ensure dropdown container positioning */
.search-box-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Handle browser-specific autocomplete dropdowns */
/* Completely disable browser autocomplete dropdown */
input[type="text"]::-webkit-calendar-picker-indicator,
input[type="text"]::-webkit-list-button,
input[type="text"]::-webkit-datetime-edit-fields-wrapper,
input[type="text"]::-webkit-inner-spin-button,
input[type="text"]::-webkit-outer-spin-button {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Hide browser native autocomplete dropdown */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-primary) inset !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Disable browser's dropdown list */
input[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

input[type="text"] {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Style the datalist but hide it - we'll use custom dropdown */
#search-datalist {
    display: none !important;
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    #searchBox,
    .search-box {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    #searchBox:focus,
    .search-box:focus {
        background: transparent !important;
        background-color: transparent !important;
    }
}

/* Additional Safari/WebKit fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    #searchBox,
    .search-box {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    #searchBox:focus,
    .search-box:focus {
        background: transparent !important;
        background-color: transparent !important;
        -webkit-appearance: none;
        appearance: none;
    }
}