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

@media (max-width: 767px) {
    .mobile-bottom-nav {
        display: block;
        position: fixed;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        z-index: 900;
        transition: transform 0.3s ease;
    }

    .mobile-bottom-nav.is-hidden {
        transform: translateY(calc(100% + 20px));
    }

    .mobile-bottom-nav__inner {
        background: #fff;
        border-radius: var(--radius-button);
        box-shadow:
            0 4px 24px rgba(0, 0, 0, 0.1),
            0 1px 6px rgba(0, 0, 0, 0.07);
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 10px var(--space-sm);
    }

    .mobile-bottom-nav__item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        opacity: 0.85;
        transition: opacity 0.15s, transform 0.15s;
    }

    .mobile-bottom-nav__item:hover,
    .mobile-bottom-nav__item:active {
        opacity: 1;
        transform: scale(1.08);
    }

    .mobile-bottom-nav__item img {
        width: 36px;
        height: 36px;
        object-fit: contain;
    }

    body {
        padding-bottom: 0;
    }
}