#actionButtonContainer {
  display: none;
  /* position: fixed; */
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

/* #actionButton {
  width: 90px;
  height: 90px;
  background-color: red;
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
} */
#actionButton {
  width: 125px;
  height: 125px;
  /* background-image: url('../images/btn.webp'); */
  background-image: url('../images/btn.webp');
  background-size: cover;
  background-color: transparent;
  border: 0;
  border-radius: 100%;
  /* color: white; */
  /* font-size: 20px; */
  /* text-align: center; */
  /* line-height: 50px; */
  cursor: pointer;
  overflow: hidden;
  /* animation: flames 2s infinite; */
  animation: pulse infinite 0.8s;
}


/* Animação de fogo */
/* #actionButton::before, #actionButton::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 0, 0, 0.2), transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: flames 3s infinite;
  opacity: 0.6;
}

#actionButton::after {
  animation-delay: 0.5s;
  opacity: 0.4;
  pointer-events: none;
} */

/* @keyframes flames {
  0% {
    box-shadow: 0 0 var(--boxShadow) #af4f07, inset 0 0 var(--boxShadow) #0f0;
    filter: hue-rotate(0deg);
  }
  20% {
    box-shadow: 0 0 60px #d4a700, inset 0 0 60px #0f0;
  }
  40% {
    box-shadow: 0 0 40px #b55821, inset 0 0 40px #0f0;
  }
  60% {
    box-shadow: 0 0 80px #a8ee00, inset 0 0 80px #0f0;
  }
  80% {
    box-shadow: 0 0 100px #ec8309, inset 0 0 100px #0f0;
  }
  100% {
    box-shadow: 0 0 var(--boxShadow) #827403, inset 0 0 var(--boxShadow) #0f0;
    filter: hue-rotate(360deg);
  }
} */

@keyframes flames {
  0% {
    box-shadow: 0 0 10px 0 rgba(255, 165, 0, 0.75), 0 0 20px 10px rgba(255, 69, 0, 0.75), inset 0 0 10px rgba(255, 165, 0, 0.75);
  }
  20% {
    box-shadow: 0 0 15px 5px rgba(255, 140, 0, 0.75), 0 0 30px 15px rgba(255, 69, 0, 0.75), inset 0 0 15px rgba(255, 140, 0, 0.75);
  }
  40% {
    box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.75), 0 0 40px 20px rgba(255, 69, 0, 0.75), inset 0 0 20px rgba(255, 165, 0, 0.75);
  }
  60% {
    box-shadow: 0 0 25px 15px rgba(255, 140, 0, 0.75), 0 0 50px 25px rgba(255, 69, 0, 0.75), inset 0 0 25px rgba(255, 140, 0, 0.75);
  }
  80% {
    box-shadow: 0 0 30px 20px rgba(255, 165, 0, 0.75), 0 0 60px 30px rgba(255, 69, 0, 0.75), inset 0 0 30px rgba(255, 165, 0, 0.75);
  }
  100% {
    box-shadow: 0 0 10px 0 rgba(255, 165, 0, 0.75), 0 0 20px 10px rgba(255, 69, 0, 0.75), inset 0 0 10px rgba(255, 165, 0, 0.75);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgb(255 185 0 / 89%);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 40px rgba(255, 0, 0, 0); /* Diminui a área do efeito */
  }

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


.hide {
  opacity: 0;
}