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

.mobile-nav,
.mobile-add-btn{

    display:none;

}

/* ====================================
BOTTOM NAVBAR
==================================== */

.mobile-nav{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    height:76px;

    background:#ffffff;

    border-top:1px solid #e5e7eb;

    display:none;

    align-items:center;

    justify-content:space-between;

    padding:0 16px;

    z-index:999;

    box-shadow:
    0 -4px 20px rgba(0,0,0,.06);

}

/* ====================================
SIDE ITEMS
==================================== */

.mobile-nav-side{

    width:72px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ====================================
CENTER SPACER
==================================== */

.mobile-nav-center{

    width:145px;

    flex-shrink:0;

}

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

.mobile-nav-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    text-decoration:none;

    color:#6b7280;

    font-size:11px;

    font-weight:700;

    transition:.18s ease;

    white-space:nowrap;

}

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

.mobile-nav-item.active{

    color:#16a34a;

}

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

.mobile-nav-icon{

    font-size:20px;

    line-height:1;

}

/* ====================================
CENTER BUTTON
==================================== */

.mobile-add-btn{

    position:fixed;

    bottom:14px;

    left:50%;

    transform:translateX(-50%);

    width:155px;

    max-width:calc(100vw - 32px);

    height:54px;

    border-radius:999px;

    background:#16a34a;

    color:#ffffff !important;

    display:none;

    align-items:center;

    justify-content:center;

    gap:8px;

    text-decoration:none;

    font-size:16px;

    font-weight:800;

    z-index:1000;

    box-shadow:
    0 8px 24px rgba(22,163,74,.22);

}

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

.mobile-add-btn .plus{

    font-size:22px;

    line-height:1;

}

/* ====================================
MOBILE ONLY
==================================== */

@media(max-width:768px){

    .mobile-nav,
    .mobile-add-btn{

        display:flex !important;

    }

    html,
    body{

        overflow-x:hidden;

    }

    body{

        padding-bottom:105px;

    }

}