/* style.css */

/* Customização dos elementos do Swiper.js para ficarem mais visíveis sobre as imagens */

/* Cor das setas de navegação */
.swiper-button-next,
.swiper-button-prev {
    color: #ffffff; /* Cor branca */
}

/* Cor da bolinha de paginação ativa */
.swiper-pagination-bullet-active {
    background-color: #ffffff; /* Cor branca */
}

/* Cor das bolinhas inativas */
.swiper-pagination-bullet {
    background-color: #a0a0a0; /* Um cinza claro para contraste */
    opacity: 0.8;
}

/* Container do botão. Garante que o ::after se posicione corretamente */
.pulse-effect {
  position: relative;
  /* Garante que o efeito de pulso não saia dos cantos arredondados do próprio botão */
  isolation: isolate;
}

/* O anel de pulsação */
.pulse-effect::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  
  /* 
   * AQUI ESTÁ A CORREÇÃO:
   * Removemos o border-radius fixo.
   * Agora, o efeito vai usar o mesmo border-radius do seu botão.
   * Se o seu botão tiver a classe "rounded-md" do Tailwind, o efeito também terá.
   * Se o botão for quadrado, o efeito também será.
  */
  border-radius: inherit; /* Herda o border-radius do elemento pai (.pulse-effect) */
  
  /* Animação: nome, duração, repetição */
  animation: pulse-refined 2s infinite;

  /* Garante que o anel fique atrás do conteúdo do botão */
  z-index: -1; 
}

/* Animação de pulsação refinada */
@keyframes pulse-refined {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); /* green-500 com 70% de opacidade */
  }
  
  70% {
    transform: scale(1.1); /* Um pouco maior para o efeito "escapar" das bordas */
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); /* Sombra expande e some */
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}