/**
 * Search Form Select2 Dropdown Fixes
 * Fixes dropdown background transparency and ensures all options are visible
 */

/* Fix dropdown background - ensure it's opaque */
.select2-container--default .select2-results {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.select2-container--default .select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #CECECE !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999 !important;
}

.select2-container--default .select2-results__options {
    background-color: #ffffff !important;
    max-height: 400px !important; /* Increase height to show more options */
    overflow-y: auto !important;
}

.select2-container--default .select2-results__option {
    background-color: #ffffff !important;
    color: #333333 !important;
    padding: 8px 12px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #E88E28 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f5f5f5 !important;
    color: #333333 !important;
}

/* Ensure search box has white background */
.select2-search--dropdown {
    background-color: #ffffff !important;
    padding: 8px !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: #ffffff !important;
    border: 1px solid #CECECE !important;
    padding: 8px !important;
    border-radius: 4px !important;
}

/* Ensure the dropdown container itself is opaque */
.select2-dropdown {
    background: #ffffff !important;
    opacity: 1 !important;
}

/* Add a backdrop for better visibility */
.select2-container--open .select2-dropdown {
    border-top: 1px solid #CECECE !important;
}

/* Improve scrollbar styling */
.select2-results__options::-webkit-scrollbar {
    width: 8px;
}

.select2-results__options::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Make sure no results message is visible */
.select2-results__message {
    background-color: #ffffff !important;
    color: #666666 !important;
    padding: 12px !important;
}

/* Group headers for categorized results */
.select2-results__group {
    background-color: #f8f8f8 !important;
    color: #333333 !important;
    font-weight: bold !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Loading indicator */
.select2-results__option.loading-results {
    background-color: #ffffff !important;
    color: #666666 !important;
}

/* Ensure the container has proper z-index */
.select2-container {
    z-index: 9998 !important;
}

/* Add hint text below search field */
.form-field-select2 .select2-container::after {
    content: "Browse all services below or start typing to search";
    position: absolute;
    bottom: -20px;
    left: 10px;
    font-size: 12px;
    color: #666;
    display: none;
}

.form-field-select2:focus-within .select2-container::after {
    display: block;
}