/* Floating mobile navbar */
.bottom-nav {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 520px;

  background: #ffffff;
  border-radius: 22px;

  padding: 10px 8px;

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

  box-shadow:
    0 10px 30px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.08);

  z-index: 9999;
}

/* item */
.nav-item {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #7a7a7a;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;

  font-size: 11px;
  font-weight: 500;
}

/* icon */
.nav-item .icon {
  font-size: 20px;
  line-height: 20px;
}

/* active */
.nav-item.active {
  color: #0aa37f;
}

.nav-item.active .icon {
  transform: translateY(-2px);
}

/* prevent page hidden under navbar */
.page {
  padding-bottom: 90px;
}

.nav-item i {
  font-size: 20px;
  line-height: 20px;
  transition: 0.2s ease;
}

.nav-item span {
  font-size: 11px;
  font-weight: 500;
}

/* active state */
.nav-item.active {
  color: #0aa37f;
}

.nav-item.active i {
  transform: translateY(-3px) scale(1.08);
}


.nav-item {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #8a8a8a;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  padding: 6px 0;
  border-radius: 14px;
  transition: 0.15s ease;
}

.nav-item:active {
  background: rgba(0,0,0,0.05);
  transform: scale(0.96);
}


.nav-icon-wrapper{
  position:relative;
}

.cart-badge{

  position:absolute;
  top:-6px;
  right:-10px;

  background:#ff3b30;
  color:white;

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

  border-radius:50%;

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

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

  padding:0 4px;
}