/* Bottom navigation bar — adapted from Bedimcode template */

.bottom-nav {

  position: fixed;

  bottom: 1.25rem;

  left: 0;

  right: 0;

  background-color: hsl(225, 12%, 12%);

  width: 92%;

  max-width: 480px;

  margin-inline: auto;

  box-shadow: 0 2px 16px hsla(228, 95%, 4%, 0.18);

  padding: 0.75rem 1.1rem;

  border-radius: 4rem;

  z-index: 1001;

  transition: transform 0.3s, opacity 0.3s;

}



.bottom-nav.hide {

  transform: translateY(120%);

  opacity: 0;

  pointer-events: none;

}



.bottom-nav__list {

  display: flex;

  justify-content: space-between;

  align-items: center;

  list-style: none;

  margin: 0;

  padding: 0;

}



.bottom-nav__link {

  color: hsl(225, 8%, 65%);

  font-size: 1.38rem;

  line-height: 1;

  transition: color 0.35s, transform 0.25s;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  position: relative;

  text-decoration: none;

  border: none;

  background: none;

  cursor: pointer;

  padding: 0;

  width: 2.25rem;

  height: 2.25rem;

}



.bottom-nav__link:hover,

.bottom-nav__link.active-link {

  color: #fff;

  transform: translateY(-1px);

}



.bottom-nav__link.active-link {

  color: #e8c872;

}



.bottom-nav__badge {

  position: absolute;

  top: -4px;

  right: -6px;

  background: #e74c3c;

  color: #fff;

  font-size: 10px;

  font-weight: 700;

  min-width: 16px;

  height: 16px;

  line-height: 16px;

  text-align: center;

  border-radius: 50%;

  padding: 0 4px;

  display: none;

}



.bottom-nav__badge.show {

  display: block;

}



.bottom-nav__expand {

  border: none;

  outline: none;

  width: 44px;

  height: 44px;

  background: linear-gradient(135deg, #c9a227 0%, #e8c872 55%, #dbcfb7 100%);

  border-radius: 50%;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.35);

  transition: transform 0.25s, box-shadow 0.25s;

}



.bottom-nav__expand:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(201, 162, 39, 0.45);

}



.bottom-nav__expand-icon {

  display: inline-block;

  color: #2a1f0f;

  width: 1.35rem;

  height: 1.35rem;

  transition: transform 0.4s;

}



.bottom-nav__expand-list {

  position: absolute;

  top: -4.25rem;

  left: 0;

  right: 0;

  background-color: hsl(225, 12%, 12%);

  box-shadow: 0 2px 16px hsla(228, 95%, 4%, 0.18);

  width: max-content;

  max-width: calc(100vw - 2rem);

  margin-inline: auto;

  padding: 0.55rem 1rem;

  border-radius: 4rem;

  display: flex;

  column-gap: 1.1rem;

  z-index: -1;

  overflow: hidden;

  transform: translateY(5rem) scale(0.1);

  transition: transform 0.5s cubic-bezier(0.5, 1.8, 0.4, 0.8);

  list-style: none;

}



.bottom-nav__expand-list li {

  transform: translateY(-3rem);

  transition: transform 0.4s;

}



.bottom-nav__expand-list li:nth-child(1) { transition-delay: 0.05s; }

.bottom-nav__expand-list li:nth-child(2) { transition-delay: 0.1s; }

.bottom-nav__expand-list li:nth-child(3) { transition-delay: 0.15s; }

.bottom-nav__expand-list li:nth-child(4) { transition-delay: 0.2s; }

.bottom-nav__expand-list li:nth-child(5) { transition-delay: 0.25s; }

.bottom-nav__expand-list li:nth-child(6) { transition-delay: 0.3s; }

.bottom-nav__expand-list li:nth-child(7) { transition-delay: 0.35s; }



.bottom-nav__expand-link {

  color: #d4d8e8;

  display: flex;

  flex-direction: column;

  align-items: center;

  transition: color 0.35s, transform 0.25s;

  text-decoration: none;

  font-size: 1.35rem;

}



.bottom-nav__expand-link:hover {

  color: #fff;

  transform: translateY(-2px);

}



.bottom-nav__expand-link .fa-instagram:hover,

.bottom-nav__expand-link:has(.fa-instagram):hover {

  color: #e1306c;

}



.bottom-nav__expand-link .fa-facebook-f:hover,

.bottom-nav__expand-link:has(.fa-facebook-f):hover {

  color: #1877f2;

}



.bottom-nav__expand-link .fa-whatsapp:hover,

.bottom-nav__expand-link:has(.fa-whatsapp):hover {

  color: #25d366;

}



.bottom-nav__expand-link .fa-tiktok:hover,

.bottom-nav__expand-link:has(.fa-tiktok):hover {

  color: #fff;

}



.bottom-nav__expand-link .fa-link:hover,

.bottom-nav__expand-link:has(.fa-link):hover {

  color: #e8c872;

}



.bottom-nav__expand-link svg {

  width: 22px;

  height: 22px;

}



.bottom-nav__expand-list.show-list,

.bottom-nav__expand-list.show-list li {

  transform: translateY(0);

}



.bottom-nav__expand-icon.rotate-icon {

  transform: rotate(135deg);

}



@media screen and (min-width: 450px) {

  .bottom-nav {

    width: 420px;

  }

}