/* Dropdown Menu Styles for Moilcars.com */

/* General Dropdown Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--white);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Language Selector Dropdown */
.language-selector {
    position: relative;
}

.language-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--white);
    min-width: 120px;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    z-index: 100;
}

.language-selector:hover .language-options {
    display: block;
}

.language-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.language-option:hover {
    background-color: var(--secondary-color);
}

/* Sidebar Dropdown */
.sidebar-nav ul li {
    position: relative;
}

.dropdown-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
}

.sidebar-nav ul li:hover .dropdown-arrow {
    transform: translateY(-50%) rotate(90deg);
}

/* Mobile Dropdown Adjustments */
@media (max-width: 992px) {
    .dropdown-content {
        position: static;
        box-shadow: none;
        display: none;
        padding-left: 20px;
    }
    
    .dropdown-arrow {
        right: 15px;
    }
    
    .mobile-menu-active .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .sidebar-nav ul li:hover .submenu {
        display: none;
    }
    
    .sidebar-nav ul li.active .submenu {
        display: block;
        position: static;
        box-shadow: none;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
        padding-left: 20px;
    }
    
    .sidebar-nav ul li .dropdown-arrow {
        right: 5px;
    }
}

/* Product Category Dropdown */
.nav-container .main-nav > ul > li {
    position: relative;
}

.nav-container .main-nav > ul > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    min-width: 200px;
    box-shadow: var(--box-shadow);
    z-index: 100;
    border-radius: var(--border-radius);
    padding: 10px 0;
}

.nav-container .main-nav > ul > li:hover > ul {
    display: block;
}

.nav-container .main-nav > ul > li > ul > li {
    margin: 0;
}

.nav-container .main-nav > ul > li > ul > li > a {
    display: block;
    padding: 8px 15px;
}

.nav-container .main-nav > ul > li > ul > li > a:hover {
    background-color: var(--secondary-color);
}

/* Mobile Adjustments for Nav Dropdowns */
@media (max-width: 992px) {
    .mobile-menu-active .main-nav > ul > li > ul {
        position: static;
        box-shadow: none;
        width: 100%;
        display: none;
        padding: 0;
    }
    
    .mobile-menu-active .main-nav > ul > li.active > ul {
        display: block;
    }
    
    .mobile-menu-active .main-nav > ul > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .mobile-menu-active .main-nav > ul > li > a:after {
        content: '▼';
        font-size: 12px;
    }
    
    .mobile-menu-active .main-nav > ul > li.active > a:after {
        content: '▲';
    }
}

/* Styles for sidebar submenu activation on click for mobile */
.sidebar-nav ul li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-nav ul li .submenu-toggle {
    display: none;
}

@media (max-width: 992px) {
    .sidebar-nav ul li .submenu-toggle {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        cursor: pointer;
    }
    
    .sidebar-nav ul li .submenu-toggle:after {
        content: '';
        position: absolute;
        right: 10px;
        top: 14px;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--text-color);
        border-bottom: 2px solid var(--text-color);
        transform: rotate(45deg);
        transition: transform 0.3s;
    }
    
    .sidebar-nav ul li.active .submenu-toggle:after {
        transform: rotate(-135deg);
    }
}