/* Padding lateral para evitar scroll horizontal */
.menu-navegacao ul {
  padding: 0 5px;
}

.lista-navegacao-mobile {
  padding: 0 5px;
}

/* Estilo especial para o item "Leia Astion" */
.menu-item-destaque {
  background-color: var(--laranja-queimado) !important;
  border-radius: 8px !important;
  margin: 5px 0 !important;
  animation: pulsar 2s infinite !important;
  box-shadow: 0 4px 15px rgba(0, 139, 139, 0.3) !important;
}

.menu-item-destaque:hover {
  background-color: var(--azul-medio) !important;
  transform: translateX(5px) !important;
  box-shadow: 0 6px 20px rgba(0, 139, 139, 0.4) !important;
}

.menu-item-destaque i,
.menu-item-destaque span {
  color: white !important;
  font-weight: bold !important;
}

/* Animação de pulsar */
@keyframes pulsar {
  0% {
    box-shadow: 0 4px 15px rgba(0, 139, 139, 0.3);
  }
  50% {
    box-shadow: 0 4px 25px rgba(0, 139, 139, 0.6);
  }
  100% {
    box-shadow: 0 4px 15px rgba(0, 139, 139, 0.3);
  }
}

/* Versão mobile */
.lista-navegacao-mobile .menu-item-destaque {
  background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
  border-radius: 8px !important;
  margin: 5px 10px !important;
  padding: 12px 15px !important;
  animation: pulsar 2s infinite !important;
}

.lista-navegacao-mobile .menu-item-destaque:hover {
  background: linear-gradient(135deg, #ff8c5a, #ffa43e) !important;
}

/* Layout da área do usuário */
.menu-usuario {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 10px !important;
}

.menu-usuario-mobile {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.usuario-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}

.usuario-info p,
.usuario-info a {
  text-align: left !important;
}

/* Estilo para o card Saga Astion destacado */
.rank-bloco-destaque {
  background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
  border-radius: 12px !important;
  animation: pulsar 2s infinite !important;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;
  overflow: hidden !important;
}

.rank-bloco-destaque h3,
.rank-bloco-destaque ol,
.rank-bloco-destaque a {
  color: white !important;
}

.rank-bloco-destaque ol li::marker {
  color: white !important;
  font-weight: bold !important;
}

.rank-bloco-destaque:hover {
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4) !important;
}

/* Evita vazamento de estilo do card destacado */
.rank-bloco-destaque::before,
.rank-bloco-destaque::after {
  display: none !important;
}