/* تب‌بارِ پایینِ موبایل — مشترکِ لندینگ و گالری.
   از landing2.css جدا شد تا گالری هم همین را داشته باشد. */

/* =========================================
   PREMIUM MOBILE BOTTOM NAVIGATION
========================================= */

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

@media(max-width:900px){

    body{
        padding-bottom:115px;
    }

    /* =========================================
       MAIN NAV
    ========================================= */

    .mobile-bottom-nav{

        position:fixed;

        left:16px;
        right:16px;
        bottom:14px;

        height:78px;

        display:grid;
        grid-template-columns:1fr 1fr 90px 1fr 1fr;
        align-items:center;

        padding:0 10px;

        border-radius:34px;

        background:rgba(15,23,42,.58);

        backdrop-filter:blur(28px) saturate(180%);
        -webkit-backdrop-filter:blur(28px) saturate(180%);

        border:1px solid rgba(255,255,255,.08);

        box-shadow:
                0 10px 40px rgba(0,0,0,.45),
                inset 0 1px 0 rgba(255,255,255,.06);

        z-index:9999;

        overflow:visible;
    }

    /* =========================================
       CENTER CURVE / NOTCH
    ========================================= */

.mobile-bottom-nav::before{

    content:"";

    position:absolute;

    width:126px;
    height:78px;

    top:-34px;
    left:50%;

    transform:translateX(-50%);

    background:transparent;

    border-bottom-left-radius:80px;
    border-bottom-right-radius:80px;

    backdrop-filter:blur(18px);

    box-shadow:
            0 14px 24px rgba(0,0,0,.28);

    z-index:1;

}
    /* =========================================
       NAV ITEMS
    ========================================= */

    .nav-item{

        position:relative;

        width:52px;
        height:52px;

        margin:auto;

        border-radius:18px;

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

        transition:
                transform .25s cubic-bezier(.34,1.56,.64,1),
                background .25s ease,
                box-shadow .25s ease;

        overflow:hidden;

        z-index:3;
    }

    .nav-item svg{

        width:24px;
        height:24px;

        stroke:#dbeafe;
        fill:none;
        stroke-width:2;

        stroke-linecap:round;
        stroke-linejoin:round;

        transition:
                transform .35s cubic-bezier(.34,1.56,.64,1),
                stroke .25s ease,
                filter .25s ease;
    }

    .nav-item:hover svg{
        stroke:#fff;
    }

    /* ACTIVE */

    .nav-item.active{

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

        box-shadow:
                inset 0 0 18px rgba(255,255,255,.04),
                0 0 24px rgba(34,211,238,.12);
    }

    .nav-item.active svg{

        stroke:#22d3ee;

        filter:
                drop-shadow(0 0 8px rgba(34,211,238,.55));
    }

    /* =========================================
       CLICK ANIMATION
    ========================================= */

    .nav-item:active{

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

        box-shadow:
                inset 0 0 18px rgba(255,255,255,.05),
                0 0 24px rgba(34,211,238,.18);
    }

    .nav-item:active svg{

        animation:iconPop .45s cubic-bezier(.34,1.56,.64,1);
    }

    /* =========================================
       RIPPLE EFFECT
    ========================================= */

    .nav-item::before{

        content:"";

        position:absolute;

        width:10px;
        height:10px;

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

        border-radius:50%;

        left:50%;
        top:50%;

        transform:
                translate(-50%,-50%)
                scale(0);

        opacity:0;

        pointer-events:none;
    }

    .nav-item:active::before{

        animation:rippleEffect .6s ease;
    }

    /* =========================================
       CENTER FAB BUTTON
    ========================================= */
.mobile-fab{

    position:relative;

    width:84px;
    height:84px;

    margin:auto;

    margin-top:-18px;

    border-radius:50%;

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

    background:
            linear-gradient(
                    135deg,
                    #22d3ee 0%,
                    #3b82f6 30%,
                    #8b5cf6 60%,
                    #ec4899 100%
            );

    background-size:300% 300%;

    animation:
            aiGradient 8s ease infinite;

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    box-shadow:
            0 18px 38px rgba(0,0,0,.34),
            0 0 22px rgba(34,211,238,.34),
            0 0 40px rgba(139,92,246,.24),
            0 0 55px rgba(236,72,153,.22);

    transition:
            transform .28s cubic-bezier(.34,1.56,.64,1),
            box-shadow .25s ease;

    z-index:5;

    overflow:hidden;
}

/* نور متحرک */

.mobile-fab::before{

    content:"";

    position:absolute;

    inset:-20px;

    border-radius:50%;

    background:
            conic-gradient(
                    from 0deg,
                    rgba(34,211,238,.0),
                    rgba(34,211,238,.35),
                    rgba(139,92,246,.0),
                    rgba(236,72,153,.35),
                    rgba(34,211,238,.0)
            );

    animation:
            rotateGlow 5s linear infinite;

    filter:blur(12px);

    z-index:-1;
}

/* لایه شیشه ای */

.mobile-fab::after{

    content:"";

    position:absolute;

    inset:2px;

    border-radius:50%;

    background:
            linear-gradient(
                    145deg,
                    rgba(255,255,255,.22),
                    rgba(255,255,255,.04)
            );

    backdrop-filter:blur(10px);

    z-index:1;
}

/* آیکون */

.mobile-fab img{

    width:40px;
    height:40px;

    object-fit:contain;

    position:relative;

    z-index:3;

    filter:
            brightness(0)
            drop-shadow(0 4px 12px rgba(0,0,0,.22));

    animation:
            fabFloat 3s ease-in-out infinite;
}

/* کلیک */

.mobile-fab:active{

    transform:
            scale(.84)
            rotate(-8deg);

    box-shadow:
            0 8px 18px rgba(0,0,0,.24),
            0 0 20px rgba(34,211,238,.42);
}

/* انیمیشن گرادیانت */

@keyframes aiGradient{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

/* چرخش نور */

@keyframes rotateGlow{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }
}
    /* =========================================
       ANIMATIONS
    ========================================= */

    @keyframes iconPop{

        0%{
            transform:scale(1) rotate(0);
        }

        30%{
            transform:scale(.72) rotate(-10deg);
        }

        60%{
            transform:scale(1.18) rotate(8deg);
        }

        100%{
            transform:scale(1) rotate(0);
        }
    }

    @keyframes rippleEffect{

        0%{
            transform:
                    translate(-50%,-50%)
                    scale(0);

            opacity:.45;
        }

        100%{
            transform:
                    translate(-50%,-50%)
                    scale(12);

            opacity:0;
        }
    }

    @keyframes fabFloat{

        0%,100%{
            transform:translateY(0);
        }

        50%{
            transform:translateY(-6px);
        }
    }

    @keyframes fabPulse{

        0%,100%{
            transform:scale(1);
            opacity:.8;
        }

        50%{
            transform:scale(1.12);
            opacity:1;
        }
    }

    @keyframes fabSpin{

        0%{
            transform:scale(1) rotate(0);
        }

        50%{
            transform:scale(.78) rotate(-18deg);
        }

        100%{
            transform:scale(1) rotate(0);
        }
    }
}

/* =========================================
   برچسبِ زیرِ هر تب (۲۰۲۶-۱۰-۲۶)
   بدونِ برچسب، کاربر باید از روی آیکون حدس می‌زد کدام تب کجاست.
========================================= */

.nav-item__label,
.mobile-fab__label {
    display: none;
}

@media (max-width: 900px) {

    .mobile-bottom-nav .nav-item {
        width: 60px;
        height: 58px;
        flex-direction: column;
        gap: 4px;
        border-radius: 18px;
        -webkit-tap-highlight-color: transparent;
    }

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

    .nav-item__label {
        display: block;
        color: rgba(219, 234, 254, .78);
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .nav-item.active .nav-item__label {
        color: #22d3ee;
    }

    /* برچسبِ دکمه‌ی وسط زیرِ دایره، بیرون از آن */
    .mobile-fab {
        overflow: visible;
    }

    .mobile-fab__label {
        display: block;
        position: absolute;
        top: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 10.5px;
        font-weight: 800;
        white-space: nowrap;
        z-index: 4;
    }
}