/* Custom Dropdown Styles */
/* تصميم القوائم المنسدلة المخصصة */

/* Dropdown Menu */
[id$="-dropdown-menu"] {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #000 #f3f4f6;
}

[id$="-dropdown-menu"]::-webkit-scrollbar {
    width: 6px;
}

[id$="-dropdown-menu"]::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}

[id$="-dropdown-menu"]::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

[id$="-dropdown-menu"]::-webkit-scrollbar-thumb:hover {
    background: #333;
}

/* Dropdown Button Hover Effect */
[id$="-dropdown-btn"]:hover {
    border-color: #4b5563;
}

[id$="-dropdown-btn"]:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* Dropdown Arrow Animation */
[id$="-arrow"] {
    transition: transform 0.2s ease;
}

/* Mobile Specific Styles */
@media (max-width: 768px) {
    /* Larger touch targets on mobile */
    [id$="-dropdown-menu"] button {
        min-height: 44px;
    }

    /* Better spacing on mobile */
    [id$="-dropdown-menu"] {
        max-height: 280px;
    }
}

/* Desktop Hover Effects */
@media (min-width: 769px) {
    [id$="-dropdown-menu"] button:hover {
        background-color: #f9fafb;
    }
}

/* Selected Item Highlight */
[id$="-dropdown-menu"] button.selected {
    background-color: #f3f4f6;
    font-weight: 700;
}