/*=========================================
Mobile Bottom Navigation
=========================================*/

.db-mobile-nav{

    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 75px;

    display: none;
    justify-content: space-around;
    align-items: center;

    background: #ffffff;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -3px 15px rgba(0,0,0,.08);

    z-index: 99999;

}


/*=========================================
Navigation Links
=========================================*/

.db-mobile-nav a{

    flex: 1;

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

    position: relative;

    overflow: hidden; /* Add this */

    text-decoration: none;

    color: #666;

    font-size: 12px;

    transition: all .25s ease;

}

/*=========================================
Navigation Icons
=========================================*/

.db-mobile-nav a i{

    width:42px;
    height:42px;

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

    font-size:20px;

    border-radius:50%;

    transition:all .3s ease;

}

/*=========================================
Active Navigation
=========================================*/

.db-mobile-nav a.active{

    color:#0F5C4D;

}

.db-mobile-nav a.active i{

    width:38px;
    height:38px;

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

    background:#E8F5F1;

    border-radius:50%;

    color:#0F5C4D;

    transform:none;

    transition:all .3s ease;

    box-shadow:0 4px 12px rgba(15,92,77,.15);

}


/*=========================================
Hover Effect
=========================================*/

.db-mobile-nav a:hover{

    color: #0F5C4D;

}


/*=========================================
Mobile View
=========================================*/

@media (max-width:767px){

    .db-mobile-nav{

        display: flex;

    }

    body{

        padding-bottom: 85px;

    }

}

/*=========================================
Cart Badge
=========================================*/

.db-cart-icon{

    position:relative;

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

}

.db-cart-count{

    position:absolute;

    top:-1px;
    right:-6px;

    min-width:18px;
    height:18px;

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

    background:#E53935;
    color:#fff;

    border-radius:50%;

    font-size:10px;
    font-weight:600;

    border:2px solid #fff;

    padding:0 4px;

}

/*=========================================
Search Popup
=========================================*/

.db-search-popup{

    position:fixed;

    left:0;
    right:0;
    bottom:-100%;

    background:#fff;

    border-radius:24px 24px 0 0;

    padding:20px;

    box-shadow:0 -10px 30px rgba(0,0,0,.15);

    z-index:999999;

    transition:.35s ease;

}

.db-search-popup.active{

    bottom:0;

}

.db-search-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.db-search-header h3{

    margin:0;

    font-size:20px;

}

.db-search-close{

    width:40px;
    height:40px;

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

    background:#1F4A43!important;

    color:#0F5C4D;

    border:none;

    border-radius:50%;

    cursor:pointer;

    transition:.3s;

}

.db-search-close:hover{

    background:#0F5C4D;

    color:#fff;

}

.db-search-popup input[type="search"]{

    width:100%;

    height:52px;

    padding:0 18px;

    background:#fff!important;

    border:2px solid #E5E7EB!important;

    border-radius:12px;

    font-size:15px;

    color:#333;

    transition:.3s;

}

.db-search-popup input[type="search"]:focus{

    outline:none;

    border-color:#0F5C4D;

    box-shadow:0 0 0 4px rgba(15,92,77,.08);

}