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

#bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 160px; /* Tablet / iPad default */
  display: flex;
  background: #e7d9be;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 1000;
}

/* Buttons */
#bottom-nav button {
  flex: 1;
  background: none;
  border: none;
  border-right: 1px solid #000;
  border-radius: 0;
  color: #999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Icon */
#bottom-nav button img {
  width: 55px;
  height: 55px;
}

/* Label */
#bottom-nav button span {
  color: #000;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Active state */
#bottom-nav button.active {
  background: rgb(232, 82, 52);
  color: #fff;
  border-right: none;
}

#bottom-nav button.active span {
  color: #fff;
}

#bottom-nav button.active img {
  filter: brightness(0) saturate(100%) invert(100%);
}

/* =========================
   Mobile Adaptation ONLY
   ========================= */

@media (max-width: 767px) {

  #bottom-nav {
    height: 90px; /* Mobile height */
  }

  #bottom-nav button img {
    width: 28px;
    height: 28px;
  }

  #bottom-nav button span {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

}