/* Mobile Bottom Navigation styles - Enhanced */
.mobile-bottom-nav { display: none; }

@media (max-width: 900px) {
    /* Show mobile nav and hide desktop nav on smaller screens */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 75px;
        background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,1) 100%);
        border-top: 2px solid #e0e7ff;
        display: flex !important;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        gap: 0;
        z-index: 1200;
        box-shadow: 0 -12px 32px rgba(15,76,58,0.12), 0 -2px 8px rgba(0,0,0,0.04);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        -webkit-user-select: none;
        user-select: none;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-bottom-nav .mnav-item {
        flex: 1;
        height: 75px;
        text-align: center;
        color: #64748b;
        font-size: 0.68rem;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 0;
        position: relative;
        transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        border-radius: 12px 12px 0 0;
        margin: 0 2px;
    }

    .mobile-bottom-nav .mnav-item:hover {
        background: rgba(42, 157, 143, 0.06);
    }

    .mobile-bottom-nav .mnav-item:active {
        background: rgba(42, 157, 143, 0.1);
    }

    .mobile-bottom-nav .mnav-item .mnav-icon {
        font-size: 1.5rem;
        display: block;
        transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        color: #94a3b8;
        line-height: 1;
    }

    .mobile-bottom-nav .mnav-item .mnav-label {
        font-size: 0.64rem;
        color: #94a3b8;
        font-weight: 600;
        letter-spacing: 0.3px;
        transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        line-height: 1.2;
    }

    /* Active state with enhanced animation */
    .mobile-bottom-nav .mnav-item.active {
        color: var(--primary);
        background: rgba(42, 157, 143, 0.08);
    }

    .mobile-bottom-nav .mnav-item.active .mnav-icon {
        transform: translateY(-6px) scale(1.2);
        color: var(--primary);
    }

    .mobile-bottom-nav .mnav-item.active .mnav-label {
        color: var(--primary);
        font-weight: 700;
        transform: translateY(-1px);
    }

    .mobile-bottom-nav .mnav-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 3px;
        background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
        border-radius: 0 0 2px 2px;
        animation: activeIndicator 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes activeIndicator {
        from {
            width: 0;
            left: 50%;
        }
        to {
            width: 80%;
            left: 10%;
        }
    }

    /* Tap/hold animation */
    .mobile-bottom-nav .mnav-item.anim {
        animation: mnavTap 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes mnavTap {
        0% { transform: scale(1); }
        50% { transform: scale(0.95); }
        100% { transform: scale(1); }
    }

    /* Cart item with badge */
    .mobile-bottom-nav .mnav-cart {
        position: relative;
    }

    .mobile-bottom-nav .mnav-badge {
        position: absolute;
        top: 6px;
        right: 8px;
        background: linear-gradient(135deg, var(--accent) 0%, #d97706 100%);
        color: white;
        font-size: 0.55rem;
        font-weight: 800;
        padding: 2px 6px;
        border-radius: 10px;
        border: 2px solid white;
        line-height: 1;
        box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3);
        min-width: 16px;
        text-align: center;
        animation: badgePop 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes badgePop {
        0% { 
            transform: scale(0) rotate(-45deg);
            opacity: 0;
        }
        50% { 
            transform: scale(1.2);
        }
        100% { 
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }
    }

    /* Hide desktop nav on mobile */
    nav .nav-links { 
        display: none !important; 
    }
    
    .hamburger { 
        display: block !important;
        z-index: 1001;
    }

    header { 
        padding-bottom: 12px; 
    }

    /* Add bottom padding to all main content */
    main {
        padding-bottom: 100px;
    }

    /* Responsive adjustments for tablets */
    @media (max-width: 768px) {
        .mobile-bottom-nav {
            height: 70px;
        }

        .mobile-bottom-nav .mnav-item {
            height: 70px;
            gap: 4px;
        }

        .mobile-bottom-nav .mnav-item .mnav-icon {
            font-size: 1.3rem;
        }

        .mobile-bottom-nav .mnav-item .mnav-label {
            font-size: 0.62rem;
        }

        main {
            padding-bottom: 95px;
        }
    }

    /* Responsive adjustments for small phones */
    @media (max-width: 480px) {
        .mobile-bottom-nav {
            height: 66px;
        }

        .mobile-bottom-nav .mnav-item {
            height: 66px;
            gap: 3px;
            margin: 0 1px;
        }

        .mobile-bottom-nav .mnav-item .mnav-icon {
            font-size: 1.2rem;
        }

        .mobile-bottom-nav .mnav-item .mnav-label {
            font-size: 0.6rem;
            font-weight: 500;
        }

        .mobile-bottom-nav .mnav-badge {
            right: 6px;
            top: 4px;
            padding: 1px 4px;
            font-size: 0.5rem;
        }

        main {
            padding-bottom: 90px;
        }
    }
}

/* Smooth transitions for all nav items */
.mobile-bottom-nav .mnav-item {
    transition: background 200ms ease,
                color 200ms ease,
                transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Prevent layout shift on active */
.mobile-bottom-nav .mnav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: transparent;
    border-radius: 0 0 2px 2px;
    transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}