/* Mobile Bottom Navigation - App View */
@media (max-width: 768px) {
    body {
        padding-bottom: 70px !important; /* Space for navigation */
    }

    /* Remove bottom padding for auth pages as they don't have bottom nav */
    body.auth-body {
        padding-bottom: 40px !important;
    }

    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: var(--bg-white);
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
        z-index: 1001;
        border-top: 1px solid var(--border-color);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--text-light);
        flex: 1;
        transition: color 0.3s ease;
        font-family: var(--font-heading);
        font-weight: 500;
        font-size: 0.75rem;
        gap: 4px;
    }

    .mobile-bottom-nav a i {
        font-size: 1.3rem;
    }

    .mobile-bottom-nav a.active {
        color: var(--primary-blue);
    }

    .whatsapp-chat-widget {
        bottom: 85px !important; /* Move above bottom nav */
    }
}

@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}