/* CSS Variables for easy themeing */
:root {
  --nav-bg-color: #429343;
  --text-color-inactive: white;
  --text-color-active: #15803d;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Bottom Navigation Bar */
.bottom-nav-container {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 9999; /* Ensure it's above other content */
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Hide nav when scrolling up */
.bottom-nav-container.nav-hidden {
  transform: translateY(200%);
  pointer-events: none;
}

/* Prevent active icon from popping out while hidden */
.bottom-nav-container.nav-hidden .nav-item a {
  transform: translateY(0);
}

.bottom-nav {
  position: relative;
  width: 100%;
  max-width: 350px; /* max-w-sm */
  height: 100%;
}

.nav-svg-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 -5px 15px var(--shadow-color));
  border-radius: 20px;
}

.nav-svg-background path {
  fill: var(--nav-bg-color);
  transition: d 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: d;
}

.nav-list {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  pointer-events: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  flex: 1;
  margin-bottom: 0;
}

.nav-item a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* center since we only show icon */
  align-items: center;
  gap: 0.25rem; /* gap-1 */
  padding-bottom: 0; /* no extra bottom padding */
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-color-inactive);
  text-decoration: none;
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
  will-change: transform, color;
}

.nav-item.active a {
  color: var(--text-color-active);
  transform: translateY(-2.2rem); /* -translate-y-4 */
}

.icon-wrapper {
  width: 3.5rem; /* w-14 */
  height: 3.5rem; /* h-14 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px; /* rounded-full */
  background-color: transparent;
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: background-color;
}

.nav-item.active .icon-wrapper {
  background-color: var(--secondary-color);
}

.icon-wrapper svg {
  width: 1.75rem; /* w-7 */
  height: 1.75rem; /* h-7 */
  display: block;
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .bottom-nav-container {
    bottom: 20px;
  }

  /* Adjust transform for mobile */
  .bottom-nav-container.nav-hidden {
    transform: translateY(220%);
  }
  .bottom-nav {
	margin-inline: 15px;
  }
}

/* Hide on desktop if needed (optional) */
@media (min-width: 1024px) {
  .bottom-nav-container {
    display: none; /* Uncomment if you want to hide on desktop */
  }
}