/* =============================================
   MOBILE BOTTOM NAVIGATION
   хостелнедорого.рф — 2026
   ============================================= */

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

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9998;
        background: #fff;
        border-top: 1px solid rgba(18, 144, 248, 0.12);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
        padding: 6px 0 env(safe-area-inset-bottom, 6px);
        justify-content: space-around;
        align-items: center;
    }

    /* --- Entrance animation (staggered per item) --- */
    .mobile-bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-decoration: none;
        color: #7a8fa0;
        font-size: 11px;
        font-weight: 500;
        padding: 4px 12px;
        border-radius: 8px;
        transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
        -webkit-tap-highlight-color: transparent;
        opacity: 0;
        transform: translateY(20px);
        animation: navItemSlideUp 0.5s ease forwards;
    }

    .mobile-bottom-nav__item:nth-child(1) { animation-delay: 0.05s; }
    .mobile-bottom-nav__item:nth-child(2) { animation-delay: 0.12s; }
    .mobile-bottom-nav__item:nth-child(3) { animation-delay: 0.19s; }
    .mobile-bottom-nav__item:nth-child(4) { animation-delay: 0.26s; }

    @keyframes navItemSlideUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* --- Icon base --- */
    .mobile-bottom-nav__item img {
        width: 30px;
        height: 30px;
        opacity: 0.45;
        transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
    }

    /* --- Tap feedback --- */
    .mobile-bottom-nav__item:active {
        background: rgba(18, 144, 248, 0.08);
        transform: scale(0.92);
    }

    .mobile-bottom-nav__item:active img {
        transform: scale(0.9);
    }

    /* --- Active (selected) state --- */
    .mobile-bottom-nav__item.active {
        color: #1290F8;
    }

    .mobile-bottom-nav__item.active img {
        opacity: 1;
        filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1350%) hue-rotate(196deg) brightness(100%) contrast(95%);
        transform: scale(1.1);
    }

    /* --- Glow pulse on active icon --- */
    .mobile-bottom-nav__item.active::after {
        content: '';
        position: absolute;
        top: 2px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(18, 144, 248, 0.25) 0%, transparent 70%);
        animation: navGlow 2s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes navGlow {
        0%, 100% { opacity: 0.6; transform: scale(0.9); }
        50%      { opacity: 1;   transform: scale(1.2); }
    }

    /* position context for ::after */
    .mobile-bottom-nav__item {
        position: relative;
    }

    /* Offset footer and telegram widget for bottom nav */
    .footer {
        padding-bottom: 80px !important;
    }

    .telegram-widget {
        bottom: 75px !important;
    }
}