/* Estilização para o botão do accordion com efeito degradê no clique */

.accordion-button {
  position: relative;
  overflow: hidden;
  background-color: #f2f1ff;
  color: #0F0F1A;
  border-bottom: 1px solid #ffcccc !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  padding: 15px;
  transition: all 0.4s ease-in-out;
  z-index: 1;
  padding: 16px;
  margin-bottom: 25px;
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* Remove bordas e estilos padrão do Bootstrap */

.accordion-button:not(.collapsed), .accordion-button.collapsed {
  background-color: #f2f1ff !important;
  border-bottom: 1px solid #ffcccc !important;
  box-shadow: none !important;
}

/* Pseudo-elemento para o efeito degradê */

.accordion-button::before {
  content: '';
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #ffcccc, #f2f1ff);
  transition: all 0.4s ease-in-out;
  z-index: -1;
}

/* Efeito ativado apenas no clique (estado ativo) */

.accordion-button:active::before {
  bottom: 0;
}

/* Efeito visual no clique */

.accordion-button:active {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 125, 125, 0.6) !important;
  color: #0F0F1A;
}

/* Remove o foco padrão do Bootstrap */

.accordion-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Garante que o accordion-item tenha bordas arredondadas consistentes */

.accordion-item {
  background-color: #f2f1ff;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden;
}