/* ==========================================================================
   MENU CÁPSULA HORIZONTAL (FLOATING PILL NAVBAR)
   Em linha única com micro-interação de deslize de ícone e expansão de rótulo
   ========================================================================== */

.navbar-wrapper {
  position: fixed;
  top: 56px; /* Logo abaixo da faixa de áudio */
  left: 0;
  right: 0;
  z-index: 990;
  display: flex;
  justify-content: center;
  padding: 10px 16px;
  pointer-events: none;
}

.navbar-capsule {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(248, 244, 232, 0.88);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid rgba(126, 140, 84, 0.25);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(42, 44, 36, 0.12), 0 1px 3px rgba(126, 140, 84, 0.1);
  max-width: 95vw;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth), border-color var(--transition-smooth);
}

.navbar-capsule::-webkit-scrollbar {
  display: none;
}

.navbar-capsule:hover {
  border-color: rgba(198, 154, 57, 0.4);
  box-shadow: 0 12px 35px rgba(42, 44, 36, 0.15), 0 0 15px rgba(198, 154, 57, 0.15);
}

/* Itens da Cápsula */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--color-charcoal-light);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

/* Ícone */
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-verde-musgo);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  flex-shrink: 0;
}

.nav-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.2;
}

/* Rótulo (Texto que expande ao hover / active) */
.nav-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  transform: translateX(-8px);
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0;
  transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
}

/* Efeito Hover: Ícone desliza e rótulo aparece */
.nav-item:hover .nav-icon {
  transform: translateX(-3px);
  color: var(--color-terracota);
}

.nav-item:hover .nav-label {
  max-width: 180px;
  opacity: 1;
  transform: translateX(0);
  margin-left: 7px;
  color: var(--color-charcoal);
}

.nav-item:hover {
  background: rgba(227, 83, 54, 0.08);
}

/* Estado Ativo: Fixo expandido e estilizado */
.nav-item.active {
  background: var(--color-verde-musgo);
  color: var(--color-white);
  box-shadow: 0 4px 14px var(--color-verde-musgo-glow);
}

.nav-item.active .nav-icon {
  color: var(--color-pergaminho);
  transform: translateX(0);
}

.nav-item.active .nav-label {
  max-width: 200px;
  opacity: 1;
  transform: translateX(0);
  margin-left: 8px;
  color: var(--color-white);
}

/* Botão Especial Área dos Noivos */
.nav-item.nav-item-admin {
  border: 1px dashed rgba(198, 154, 57, 0.4);
}

.nav-item.nav-item-admin .nav-icon {
  color: var(--color-gold-dark);
}

.nav-item.nav-item-admin:hover {
  background: rgba(198, 154, 57, 0.12);
  border-color: var(--color-gold);
}

.nav-item.nav-item-admin.active {
  background: var(--color-gold-dark);
  color: var(--color-white);
  box-shadow: 0 4px 14px var(--color-gold-glow);
}

.nav-item.nav-item-admin.active .nav-icon {
  color: var(--color-white);
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  .navbar-wrapper {
    top: 50px;
    padding: 6px 10px;
  }

  .navbar-capsule {
    gap: 4px;
    padding: 4px 6px;
  }

  .nav-item {
    padding: 7px 10px;
    font-size: 0.82rem;
  }

  /* No mobile, manter rótulo visível no ativo e expansão tátil */
  .nav-item.active .nav-label {
    max-width: 140px;
  }
}