/* Mobile Bottom Nav Styles - Scoped (Bug 5) */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #fff;
    z-index: 9999;
    display: none;
    justify-content: center;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
}

.mobile-bottom-nav ul {
    position: relative;
    width: 280px;
    /* 4 items * 70px */
    max-width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.mobile-bottom-nav ul li {
    width: 70px;
    height: 70px;
    list-style: none;
    position: relative;
    z-index: 2;
    /* Higher than indicator */
}

.mobile-bottom-nav ul li a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

/* Icons (Lucide SVG) */
.mobile-bottom-nav ul li a svg {
    width: 24px;
    height: 24px;
    color: #222;
    transition: 0.4s;
}

.mobile-bottom-nav ul li span {
    font-size: 0.75em;
    color: #222;
    opacity: 0;
    transform: translateY(8px);
    transition: 0.4s;
}

/* Active State Styling */
.mobile-bottom-nav ul li.active a svg {
    transform: translateY(-28px);
    color: #fff;
    /* White icon on blue bubble */
    /* Ensure icon color override works for SVG */
    stroke: #fff;
}

.mobile-bottom-nav ul li.active span {
    opacity: 1;
    transform: translateY(10px);
}

/* Indicator bubble */
.mobile-bottom-nav .indicator {
    position: absolute;
    top: -35px;
    width: 70px;
    height: 70px;
    background: #4070f4;
    border-radius: 50%;
    border: 6px solid #fff;
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1;
    /* Initial Position will be set by JS, but default to center relative to nav if something fails? 
       Actually, since it's outside UL, we need to center it relative to the viewport/nav 
       and then offset. 
       Easier: Keep it absolute in .mobile-bottom-nav, which is flex-centered. 
       Actually, .mobile-bottom-nav is flex justify-center.
       So if we put indicator absolute inside .mobile-bottom-nav, left: 50% is center.
       Then we need to offset it.
       Wait, the UL is 280px wide centered.
       The first li is at UL start.
       UL start is (Screen Width - 280) / 2.
       
       Better approach: relied on JS to set 'left' or 'transform'. 
       Let's stick to 'transform' for performance. 
       We need a reference point.
       If .indicator is absolute relative to .mobile-bottom-nav.
    */
    left: 50%;
    /* Start at center */
    margin-left: -35px;
    /* Center alignment (half of 70px) */
    transform: translateX(0);
    /* Default */
}


/* Mobile only - Body Padding Fix (Bug 2) */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        border-top-left-radius: 35px;
        border-top-right-radius: 35px;
        /* Increased radius and visibility */
        overflow: visible;
        background: #ffffff;
        /* Ensure background is solid white */
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
        /* Enhance separation */
    }

    body {
        padding-bottom: 90px;
        /* Prevent content blocked by nav */
    }
}