/* Mobile Menu Order Fix for RTL Layout */

/* Reverse the order of menu items on mobile */
@media (max-width: 991.98px) {
    /* Use flexbox to reverse the order */
    #navbarSupportedContent2 .navbar-nav {
        display: flex !important;
        flex-direction: column-reverse !important;
        width: 100% !important;
    }
    
    /* Alternative method using CSS order property */
    #navbarSupportedContent2 .nav-item:nth-child(1) { order: 7; }
    #navbarSupportedContent2 .nav-item:nth-child(2) { order: 6; }
    #navbarSupportedContent2 .nav-item:nth-child(3) { order: 5; }
    #navbarSupportedContent2 .nav-item:nth-child(4) { order: 4; }
    #navbarSupportedContent2 .nav-item:nth-child(5) { order: 3; }
    #navbarSupportedContent2 .nav-item:nth-child(6) { order: 2; }
    #navbarSupportedContent2 .nav-item:nth-child(7) { order: 1; }
    
    /* Ensure proper spacing and borders */
    #navbarSupportedContent2 .nav-item {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Remove border from the last visible item (which is now first due to reverse) */
    #navbarSupportedContent2 .nav-item:first-child {
        border-top: none !important;
    }
    
    #navbarSupportedContent2 .nav-item:last-child {
        border-bottom: none !important;
    }
    
    /* Fix animation delays for reversed order */
    #navbarSupportedContent2.mobile-menu-open .nav-item {
        animation: slide-in-menu 0.5s ease forwards;
        opacity: 0;
        transform: translateX(-30px);
    }
    
    /* Reversed animation delays */
    #navbarSupportedContent2.mobile-menu-open .nav-item:nth-child(7) { animation-delay: 0.1s; }
    #navbarSupportedContent2.mobile-menu-open .nav-item:nth-child(6) { animation-delay: 0.15s; }
    #navbarSupportedContent2.mobile-menu-open .nav-item:nth-child(5) { animation-delay: 0.2s; }
    #navbarSupportedContent2.mobile-menu-open .nav-item:nth-child(4) { animation-delay: 0.25s; }
    #navbarSupportedContent2.mobile-menu-open .nav-item:nth-child(3) { animation-delay: 0.3s; }
    #navbarSupportedContent2.mobile-menu-open .nav-item:nth-child(2) { animation-delay: 0.35s; }
    #navbarSupportedContent2.mobile-menu-open .nav-item:nth-child(1) { animation-delay: 0.4s; }
    
    @keyframes slide-in-menu {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* Ensure desktop view maintains normal order */
@media (min-width: 992px) {
    .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
    }
    
    .navbar-nav .nav-item {
        order: initial !important;
    }
}

/* Additional styling for better mobile menu appearance */
@media (max-width: 991.98px) {
    /* Add padding to mobile menu container */
    #navbarSupportedContent2.mobile-menu-open {
        padding: 1.5rem 1rem !important;
    }
    
    /* Style menu items for better touch targets */
    #navbarSupportedContent2 .nav-link,
    #navbarSupportedContent2 .page-scroll {
        display: block !important;
        width: 100% !important;
        padding: 0.875rem 1.25rem !important;
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        color: #333 !important;
        text-align: right !important;
        transition: all 0.2s ease !important;
        border-radius: 8px !important;
        margin: 2px 0 !important;
    }
    
    /* Hover effect for mobile menu items */
    #navbarSupportedContent2 .nav-link:hover,
    #navbarSupportedContent2 .page-scroll:hover,
    #navbarSupportedContent2 .nav-link:active,
    #navbarSupportedContent2 .page-scroll:active {
        background: rgba(59, 130, 246, 0.08) !important;
        color: #2563eb !important;
        transform: translateX(-5px) !important;
    }
    
    /* Active page indicator */
    #navbarSupportedContent2 .nav-link.active,
    #navbarSupportedContent2 .page-scroll.active {
        background: rgba(59, 130, 246, 0.1) !important;
        color: #2563eb !important;
        font-weight: 600 !important;
        position: relative !important;
    }
    
    /* Add a side indicator for active item */
    #navbarSupportedContent2 .nav-link.active::before,
    #navbarSupportedContent2 .page-scroll.active::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 70%;
        background: linear-gradient(180deg, #2563eb, #3b82f6);
        border-radius: 2px;
    }
    
    /* Add subtle shadow to mobile menu */
    #navbarSupportedContent2.mobile-menu-open {
        box-shadow: 
            0 10px 25px rgba(0, 0, 0, 0.08),
            0 6px 10px rgba(0, 0, 0, 0.05) !important;
    }
}

/* Small devices (phones in landscape) */
@media (max-width: 767px) {
    #navbarSupportedContent2 .nav-link,
    #navbarSupportedContent2 .page-scroll {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
}

/* Extra small devices */
@media (max-width: 575px) {
    #navbarSupportedContent2 .nav-link,
    #navbarSupportedContent2 .page-scroll {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.95rem !important;
    }
    
    #navbarSupportedContent2.mobile-menu-open {
        padding: 1rem 0.75rem !important;
    }
}