/*
 * Мобильная нижняя навигация (ТЗ ч.3, разд. 24). Только мобилка: на планшете
 * и десктопе навигация живёт в шапке. Учитывает safe area iOS.
 */

.bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-bottom-nav);
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--bg-card);
        border-top: var(--border-w) solid var(--border);
        box-shadow: var(--shadow-bottom-nav);
    }

    .bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--text-secondary);
        text-align: center;
        transition: var(--transition-color);
    }

    .bottom-nav__item.is-active {
        color: var(--primary);
    }

    .bottom-nav__item.is-soon {
        color: var(--text-muted);
        cursor: default;
    }

    .bottom-nav__icon {
        display: grid;
        place-items: center;
    }

    .bottom-nav__label {
        font-size: var(--fs-label);
        font-weight: var(--fw-semibold);
    }

    /* Контент не должен уезжать под панель */
    .page {
        padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    }
}