/* ==========================================
   OJA EDE FLOATING NAVBAR
========================================== */

:root{

    --nav-height:78px;

    --nav-radius:40px;

    --nav-bg:rgba(255,255,255,.92);

    --nav-shadow:
    0 15px 35px rgba(0,0,0,.15);

    --green:#0F9D58;

    --gray:#8C8C8C;

}

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

.floating-navbar{

    position:fixed;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    width:92%;

    max-width:520px;

    height:var(--nav-height);

    background:var(--nav-bg);

    backdrop-filter:blur(18px);

    border-radius:var(--nav-radius);

    box-shadow:var(--nav-shadow);

    display:flex;

    align-items:center;

    justify-content:space-around;

    z-index:9999;

    padding:8px;

}

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

.nav-item{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:var(--gray);

    transition:.35s;

    position:relative;

}

.nav-item span{

    margin-top:6px;

    font-size:11px;

    font-weight:600;

}

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

.nav-icon{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    transition:.35s;

}

.nav-icon i{

    font-size:20px;

    transition:.35s;

}

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

.nav-item.active{

    color:var(--green);

}

.nav-item.active .nav-icon{

    background:var(--green);

    color:#fff;

    transform:translateY(-12px);

    box-shadow:
    0 10px 25px rgba(15,157,88,.35);

}

.nav-item.active .nav-icon i{

    color:#fff;

}

.nav-item.active span{

    color:var(--green);

    font-weight:700;

}

/* ==========================================
HOVER EFFECT
========================================== */

.nav-item:hover{

    color:var(--green);

}

.nav-item:hover .nav-icon{

    transform:translateY(-5px);

}

.nav-item:hover .nav-icon i{

    transform:scale(1.12);

}

/* ==========================================
PRESS EFFECT
========================================== */

.nav-item:active .nav-icon{

    transform:
    translateY(-5px)
    scale(.92);

}

/* ==========================================
SMOOTH ANIMATION
========================================== */

.nav-item,

.nav-icon,

.nav-icon i,

.nav-item span{

    transition:

    .30s ease;

}

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

.badge{

    position:absolute;

    top:-4px;

    right:-4px;

    min-width:20px;

    height:20px;

    padding:0 5px;

    border-radius:20px;

    background:#E53935;

    color:#fff;

    font-size:11px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #fff;

}

/* ==========================================
PROFILE DOT
========================================== */

.dot{

    position:absolute;

    top:2px;

    right:2px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#E53935;

    display:none;

    border:2px solid #fff;

}

.dot.show{

    display:block;

}

/* ==========================================
FLOATING ANIMATION
========================================== */

@keyframes navFloat{

    0%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-3px);

    }

    100%{

        transform:
        translateY(0);

    }

}

.nav-item.active .nav-icon{

    animation:

    navFloat

    2s

    infinite;

}

/* ==========================================
SAFE AREA
========================================== */

@supports (padding:max(0px)){

.floating-navbar{

    bottom:

    max(

    20px,

    env(safe-area-inset-bottom)

    );

}

}

/* ==========================================
DESKTOP
========================================== */

@media(min-width:768px){

.floating-navbar{

    max-width:560px;

}

.nav-item span{

    font-size:12px;

}

}