/* ======================================================
   SEAN B SHOP
   MOBILE BOTTOM NAVIGATION
   assets/css/layout/mobile-bottom-nav.css
====================================================== */


/* ======================================================
   HIDE ON DESKTOP
====================================================== */

.mobile-bottom-nav{

    display:none;

}





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

@media (max-width:991px){

.mobile-bottom-nav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:space-around;

    background:#ffffff;

    border-top:1px solid #e5e7eb;

    box-shadow:
    0 -5px 20px rgba(0,0,0,.08);

    z-index:9999;

}



/* ======================================================
   BODY OFFSET
====================================================== */

body{

    padding-bottom:78px;

}





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

.mobile-bottom-nav a{

    flex:1;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    text-decoration:none;

    color:#64748b;

    font-size:11px;

    font-weight:600;

    position:relative;

    transition:.25s;

}



.mobile-bottom-nav a:hover{

    color:#0b1f3a;

}



.mobile-bottom-nav a.active{

    color:#e60000;

}



.mobile-bottom-nav a.active::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:34px;

    height:3px;

    border-radius:10px;

    background:#e60000;

}





/* ======================================================
   ICONS
====================================================== */

.mobile-bottom-nav i{

    font-size:21px;

}





/* ======================================================
   LABEL
====================================================== */

.mobile-bottom-nav span{

    line-height:1;

}





/* ======================================================
   CART BADGE
====================================================== */

.mobile-bottom-nav .badge{

    position:absolute;

    top:8px;

    right:calc(50% - 22px);

    min-width:18px;

    height:18px;

    padding:0 4px;

    border-radius:20px;

    background:#e60000;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:10px;

    font-weight:700;

}





/* ======================================================
   SMALL DEVICES
====================================================== */

@media (max-width:480px){

.mobile-bottom-nav{

    height:64px;

}



body{

    padding-bottom:74px;

}



.mobile-bottom-nav i{

    font-size:19px;

}



.mobile-bottom-nav a{

    font-size:10px;

}



.mobile-bottom-nav .badge{

    top:6px;

    right:calc(50% - 20px);

}

}

}