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

.mobile-bottom-nav {

    position: fixed;

    left: 12px;

    right: 12px;

    bottom: 12px;

    z-index: 1050;

    display: none;

    align-items: center;

    justify-content: space-around;

    padding: 8px 6px;

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

    border: 1px solid var(--border);

    border-radius: 22px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.14);

    backdrop-filter: blur(18px);

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

}


[data-theme="dark"]
.mobile-bottom-nav {

    background:
        rgba(13,27,45,.92);

}


.mobile-bottom-nav a,
.mobile-bottom-nav button {

    position: relative;

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    min-width: 0;

    min-height: 52px;

    border: 0;

    background: transparent;

    color: var(--text-muted);

    border-radius: 15px;

    font-size: .62rem;

    font-weight: 700;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);

}


.mobile-bottom-nav i {

    font-size: 1.15rem;

    line-height: 1;

}


.mobile-bottom-nav a:hover,
.mobile-bottom-nav a.active,
.mobile-bottom-nav button:hover {

    color: var(--primary);

    background: var(--primary-light);

}


.mobile-bottom-nav a:active,
.mobile-bottom-nav button:active {

    transform: scale(.94);

}


@media (max-width: 991px) {

    .mobile-bottom-nav {

        display: flex;

    }

}