/* ============================================================
   MOBILE / PWA BOTTOM NAVIGATION
   ============================================================ */

.mobile-bottom-nav {
    display: none;
}


@media (max-width: 760px) {

    /* Main mobile menu — left aligned */

    .primary-nav {
        align-items: flex-start;
        text-align: left;
    }

    .primary-nav > a,
    .primary-nav > button {
        align-self: flex-start;
        text-align: left;
    }

    .primary-nav .nav-divider {
        align-self: stretch;
    }



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


    .mobile-bottom-nav {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 900;

        display: grid;
        grid-template-columns: repeat(5, 1fr);

        min-height: 68px;

        padding:
            7px
            8px
            calc(7px + env(safe-area-inset-bottom));

        background: rgba(255, 255, 255, .94);

        border-top: 1px solid var(--line);

        box-shadow:
            0 -8px 28px rgba(20, 30, 55, .08);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }


    .mobile-bottom-nav-item {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 4px;

        min-width: 0;

        color: var(--muted);

        text-decoration: none;

        font-size: .64rem;
        font-weight: 700;

        transition:
            color .2s ease,
            transform .2s ease;
    }


    .mobile-bottom-nav-item svg {
        width: 20px;
        height: 20px;

        fill: none;

        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .mobile-bottom-nav-item.is-active {
        color: var(--blue);
    }


    .mobile-bottom-nav-primary {
        transform: translateY(-8px);
    }


    .mobile-bottom-nav-primary-icon {
        width: 42px;
        height: 42px;

        display: grid;
        place-items: center;

        border-radius: 50%;

        background:
            linear-gradient(
                135deg,
                var(--blue),
                var(--pink)
            );

        color: #fff;

        font-size: .7rem;
        font-weight: 900;

        box-shadow:
            0 10px 24px rgba(89, 104, 220, .28);
    }


    .mobile-bottom-nav-primary > span:last-child {
        margin-top: -2px;
    }


    [data-theme="dark"] .mobile-bottom-nav {
        background: rgba(8, 17, 38, .94);
    }

}