/* Ensure the main dropdown container is styled */
.custom-dropdown .Select-control {
    background-color: #162730 !important;
    border: 2px solid white !important;
    color: white !important; /* For placeholder and selected text */
}

/* Placeholder text color */
.custom-dropdown .Select-placeholder {
    color: white !important;
}

/* Selected value text color */
.custom-dropdown .Select-value-label {
    color: white !important;
}

/* Dropdown arrow color */
.custom-dropdown .Select-arrow {
    border-color: white transparent transparent !important;
}

/* Clear (cancel) button color */
.custom-dropdown .Select-clear {
    color: white !important;
    opacity: 1 !important; /* Ensure visibility */
}

/* Clear (cancel) button hover color */
.custom-dropdown .Select-clear:hover {
    color: #ff6b6b !important; /* A light red for hover */
}

/* Input text color when typing in the dropdown */
.custom-dropdown .Select-input > input {
    color: white !important;
}

/* ================================================================= */
/* STYLES FOR THE DROPDOWN MENU (THE LIST THAT APPEARS) */
/* ================================================================= */

/* Outer container of the dropdown menu */
.custom-dropdown .Select-menu-outer {
    background-color: #162730 !important;
    border: 2px solid white !important;
    border-top: none !important; /* Optional: to make it look connected to the control */
    box-shadow: none !important; /* Remove default shadow if any */
}

/* Inner container of the dropdown menu (where options live) */
.custom-dropdown .Select-menu {
    background-color: #162730 !important;
    color: white !important; /* Default text color for options */
}

/* Individual dropdown options */
.custom-dropdown .Select-option {
    background-color: #162730 !important;
    color: white !important;
    padding: 8px 10px !important; /* Adjust padding if needed */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle separator */
}

/* Last option in the list (remove bottom border) */
.custom-dropdown .Select-option:last-child {
    border-bottom: none !important;
}

/* Hovered/focused option */
.custom-dropdown .Select-option.is-focused,
.custom-dropdown .Select-option:hover {
    background-color: #1f3540 !important; /* Slightly lighter shade for hover */
    color: white !important;
}

/* Selected option */
.custom-dropdown .Select-option.is-selected {
    background-color: #0a1a1f !important; /* Darker shade for selected */
    color: white !important;
}

/* No results message */
.custom-dropdown .Select-noresults {
    background-color: #162730 !important;
    color: white !important;
    padding: 8px 10px !important;
}