/* ===============================
BOTTOM NAV
=============================== */

.bottom-nav{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  height: 65px;
  background:
  rgba(10,15,25,0.94);
  backdrop-filter: blur(18px);
  border:
  1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  box-sizing: border-box;
  z-index: 9999;
  box-shadow:
  0 12px 35px rgba(0,0,0,0.4);
  /* FIX PHONE NAV OVERLAP */
  bottom: calc(env(safe-area-inset-bottom) + 0px);

}


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

.nav-item{

  flex:1;

  height:58px;

  border:none;
  background:none;

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

  border-radius:18px;

  color:
  rgba(255,255,255,0.5);

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

  cursor:pointer;

  position:relative;

  transition:.25s ease;

}



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

.nav-icon{

  width:23px;
  height:23px;

  margin-bottom:5px;

  stroke:currentColor;
  fill:none;

  stroke-width:2;

  stroke-linecap:round;
  stroke-linejoin:round;

  transition:.25s ease;

}


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

.nav-item.active{

  color:#00D492;

  background:
  rgba(0,212,146,0.08);

}


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

.nav-item.active .nav-icon{

  transform:
  translateY(-1px) scale(1.05);

}


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

.nav-item.active::after{

  content:"";

  position:absolute;

  bottom:6px;

  width:6px;
  height:6px;

  border-radius:50%;

  background:#00D492;

}


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

.nav-item:active{

  transform:scale(.95);

}


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

.nav-item span{

  letter-spacing:.2px;

}