/* Custom styling for area selection dropdown */

/* Style for the dropdown control (input field) */
#gemeenten-dropdown .Select-control {
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    min-height: 42px;
    transition: all 0.2s ease;
}

#gemeenten-dropdown .Select-control:hover {
    border-color: #b0b0b0;
}

#gemeenten-dropdown.is-focused:not(.is-open) > .Select-control {
    border-color: #1565c0;
    box-shadow: 0 0 0 1px #1565c0;
}

/* Dropdown menu styling */
#gemeenten-dropdown .Select-menu-outer {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0;
    margin-top: 6px;
    overflow: hidden;
}

/* Options in dropdown */
#gemeenten-dropdown .Select-option,
#gemeenten-dropdown .VirtualizedSelectOption {
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Hover state for options */
#gemeenten-dropdown .Select-option.is-focused,
#gemeenten-dropdown .VirtualizedSelectOption.is-focused {
    background-color: #f5f7fa;
}

/* Selected option */
#gemeenten-dropdown .Select-option.is-selected,
#gemeenten-dropdown .VirtualizedSelectOption.is-selected {
    background-color: #e3f2fd;
    color: #1565c0;
    font-weight: 500;
}

/* Selected values (pills) in multi-select */
#gemeenten-dropdown .Select-value {
    background-color: #e3f2fd !important;
    border-color: #1565c0 !important;
    border-radius: 6px;
    padding: 4px 8px;
}

#gemeenten-dropdown .Select-value-label {
    color: #1565c0 !important;
    font-weight: 500;
    font-size: 13px;
}

/* Remove button in selected values */
#gemeenten-dropdown .Select-value-icon {
    border-color: #1565c0 !important;
}

#gemeenten-dropdown .Select-value-icon:hover {
    background-color: #1565c0 !important;
    color: white !important;
}

/* Placeholder text */
#gemeenten-dropdown .Select-placeholder {
    color: #757575;
    font-size: 14px;
}

/* Input text */
#gemeenten-dropdown .Select-input input {
    font-size: 14px;
}

/* New React Select styling (for newer Dash versions using react-select) */
#gemeenten-dropdown div[class*="control"] {
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    min-height: 42px;
    transition: all 0.2s ease;
}

#gemeenten-dropdown div[class*="control"]:hover {
    border-color: #b0b0b0;
}

#gemeenten-dropdown div[class*="menu"] {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0;
    margin-top: 6px;
    overflow: hidden;
}

#gemeenten-dropdown div[class*="option"] {
    font-size: 14px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#gemeenten-dropdown div[class*="option"]:hover {
    background-color: #f5f7fa;
}

#gemeenten-dropdown div[class*="multiValue"] {
    background-color: #e3f2fd;
    border-radius: 6px;
}

#gemeenten-dropdown div[class*="multiValueLabel"] {
    color: #1565c0;
    font-weight: 500;
    font-size: 13px;
}

#gemeenten-dropdown div[class*="multiValueRemove"]:hover {
    background-color: #1565c0;
    color: white;
}