/* Mobile Sidebar Menu Styles for Home.html - Right Side Push Content Style */
/* This CSS file handles the mobile sidebar menu opening from RIGHT while keeping desktop unchanged */

/* Mobile-only styles (768px and below) */
@media (max-width: 768px) {
    /* Body transition for smooth page movement */
    body {
        transition: transform 0.3s ease-in-out !important;
        /* transform: translateX(0) !important; */
    }
    
    /* When sidebar is active, push body content to the LEFT */
    body.sidebar-open {
        transform: translateX(-90px) !important;
        overflow-x: hidden !important;
    }

    /* Override modal menu styles for mobile - RIGHT SIDE */
    .modal-menu {
        width: 90px !important;
        height: 100vh !important;
        background: linear-gradient(180deg, #0f1b2e 0%, #1e2a47 50%, #0a1428 100%) !important;
        right: -90px !important; /* Changed from left to right */
        top: 0 !important;
        position: fixed !important;
        z-index: 1050 !important;
        transition: right 0.3s ease-in-out !important; /* Changed from left to right */
        box-shadow: -2px 0 15px rgba(0, 0, 0, 0.3) !important; /* Changed shadow direction */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        backdrop-filter: blur(10px) !important;
    }

    .modal-menu.active {
        right: -90px !important; /* Changed from left to right */
    }

    .modal-content {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        background: transparent !important;
    }

    .modal-header {
        width: 100% !important;
        background: transparent !important;
        padding: 15px 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
    }

    .close-btn {
        color: #ffffff !important;
        font-size: 20px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: none !important;
        border-radius: 50% !important;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        position: absolute !important;
        top: 150% !important;
        transform: translateY(-50%) !important;
    }

    .close-btn:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-50%) scale(1.1) !important;
    }

    .modal-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 30px 0 !important;
        flex: 1 !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .modal-nav a {
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        padding: 20px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
        position: relative !important;
        text-align: center !important;
        min-height: 70px !important;
    }

    .modal-nav a::before {
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 24px !important;
        color: #ffffff !important;
        transition: all 0.3s ease !important;
        display: block !important;
        margin-bottom: 5px !important;
    }

    /* Add meaningful icons for each nav item */
    .modal-nav a[href="/"]::before,
    .modal-nav a[href="home.html"]::before {
        content: "\f015" !important; /* Home icon */
    }

    .modal-nav a[href="#about"]::before,
    .modal-nav a[href="/about.html"]::before {
        content: "\f007" !important; /* User/About icon */
    }

    .modal-nav a[href="#products"]::before,
    .modal-nav a[href="/products.html"]::before {
        content: "\f1b2" !important; /* Cube/Products icon */
    }

    .modal-nav a[href="#services"]::before,
    .modal-nav a[href="/services.html"]::before {
        content: "\f0ad" !important; /* Wrench/Services icon */
    }

    .modal-nav a[href="#contact"]::before {
        content: "\f2f6" !important; /* Comments/Connect icon */
    }

    .modal-nav a:hover {
        background: rgba(59, 130, 246, 0.1) !important; /* Changed to blue theme */
        color: #3b82f6 !important; /* Changed to blue */
        transform: none !important;
    }

    .modal-nav a:hover::before {
        color: #3b82f6 !important; /* Changed to blue */
        transform: scale(1.1) !important;
    }

    .modal-nav a::after {
        display: none !important;
    }

    /* Reset staggered animation delays for mobile */
    .modal-nav a:nth-child(1),
    .modal-nav a:nth-child(2),
    .modal-nav a:nth-child(3),
    .modal-nav a:nth-child(4),
    .modal-nav a:nth-child(5),
    .modal-nav a:nth-child(6) {
        transition-delay: 0s !important;
    }

    /* Add overlay for mobile sidebar - RIGHT SIDE */
    .modal-menu::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        right: 90px !important; /* Changed from left to right */
        /* width: calc(100vw - 90px) !important; */
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        pointer-events: none !important;
        z-index: 1049 !important;
    }

    .modal-menu.active::before {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: all !important;
    }

    /* Prevent body scroll when sidebar is open */
    body.sidebar-open {
        overflow: hidden !important;
    }
}

/* Desktop styles remain unchanged (larger than 768px) */
@media (min-width: 769px) {
    /* Ensure desktop styles are not affected */
    .modal-menu {
        display: none !important;
        /* Desktop styles remain as they are in the original CSS */
    }
}