/* ==================================================
   Mobile Bottom Navigation Bar — modern pill style
   Brand: teal #012A2B / #023436 + mint #00C48A→#39E8A0
   ================================================== */
.mobile-nav {
    display: none;
}

@media (max-width: 991.98px) {
    :root {
        --mn-teal: #023436;
        --mn-teal-dark: #012A2B;
        --mn-mint-1: #00C48A;
        --mn-mint-2: #39E8A0;
    }

    body {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .mobile-nav {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1080;
        pointer-events: none;
        padding: 0 16px calc(12px + env(safe-area-inset-bottom));
    }

    .mobile-nav_inner {
        pointer-events: auto;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        max-width: 480px;
        margin: 0 auto;
        padding: 8px;
        border-radius: 28px;
        background: rgba(1, 42, 43, 0.86);
        border: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow:
            0 18px 40px -12px rgba(1, 42, 43, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
    }

    .mobile-nav_item {
        flex: 1;
        min-width: 0;
        position: relative;
    }

    .mobile-nav_link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 9px 4px;
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
        border-radius: 20px;
        transition: color 0.25s ease, transform 0.2s ease;
    }

    .mobile-nav_link:active {
        transform: scale(0.9);
    }

    .mobile-nav_link .nav_icon {
        font-size: 20px;
        line-height: 1;
        transition: transform 0.25s ease;
    }

    .mobile-nav_link .nav_label {
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.2px;
    }

    /* ── Active item: gradient pill ── */
    .mobile-nav_item.active .mobile-nav_link {
        color: #012A2B;
        background: linear-gradient(160deg, #00C48A 0%, #39E8A0 100%);
        box-shadow: 0 8px 20px -6px rgba(0, 196, 138, 0.6);
        font-weight: 700;
    }

    .mobile-nav_item.active .mobile-nav_link .nav_icon {
        transform: translateY(-1px);
    }

    .mobile-nav_item.active .mobile-nav_link .nav_label {
        color: #02211f;
    }
}