/* Desktop Dropdown Menu Styles */

/* Hamburger menu wrapper for desktop dropdown */
.hamburgerMenuWrapper {
    position: relative;
}

/* Desktop dropdown menu - Only visible on desktop */
.desktopDropdownMenu {
    display: none;
    position: absolute;
    top: calc(100% + 19px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 1001;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.desktopDropdownMenu.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.desktopDropdownList {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.desktopDropdownList li {
    margin: 0;
}

.desktopDropdownList li a {
    display: block;
    padding: 12px 20px;
    color: #2B2A29;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    text-align: right;
    direction: rtl;
}

.desktopDropdownList li a:hover {
    background: #f8f8f8;
    color: #e74c3c;
}

.desktopDropdownList li.active a {
    color: #e74c3c;
    font-weight: 600;
}

.desktopDropdownList li:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

/* Show hamburger menu on desktop */
@media (min-width: 976px) {
    .hamburgerMenu {
        display: flex !important;
    }
    
    .desktopDropdownMenu {
        display: none;
    }
    
    .desktopDropdownMenu.active {
        display: block;
    }
}

/* Hide desktop dropdown on mobile/tablet - keep mobile menu functionality */
@media (max-width: 975px) {
    .desktopDropdownMenu {
        display: none !important;
    }
}