/* ==========================================================
   HANNANET MOVIE MOBILE
   NAVIGATION CSS
   Version : 2.0
========================================================== */


/* ==========================================
   BOTTOM NAVIGATION
========================================== */

.bottom-nav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-around;

    background:rgba(17,17,17,.95);

    backdrop-filter:blur(14px);

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

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

    padding-bottom:env(safe-area-inset-bottom);

    z-index:9999;

}


/* ==========================================
   ITEM
========================================== */

.bottom-item{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    height:100%;

    color:#8b8b8b;

    text-decoration:none;

    transition:
        color .25s,
        transform .25s;

}


/* ==========================================
   ICON
========================================== */

.bottom-item i{

    font-size:22px;

    line-height:1;

    transition:
        transform .25s,
        color .25s;

}


/* ==========================================
   TEXT
========================================== */

.bottom-item span{

    font-size:11px;

    font-weight:600;

    letter-spacing:.2px;

}


/* ==========================================
   ACTIVE
========================================== */

.bottom-item.active{

    color:#e50914;

}

.bottom-item.active i{

    transform:translateY(-2px) scale(1.08);

}


/* ==========================================
   TOUCH
========================================== */

.bottom-item:active{

    transform:scale(.95);

}


/* ==========================================
   HOVER (Desktop Testing)
========================================== */

.bottom-item:hover{

    color:#ffffff;

}