/* =========================================================
   GLOBAL FLOATING ACTION POSITION
   Adjust this value to move BOTH floating buttons
   above/below the running band.
   ========================================================= */

:root {
  --floating-action-bottom-offset: 5rem;
}


/* =========================================================
   FLOATING WHATSAPP
   Bottom-left
   ========================================================= */

.floating-whatsapp {
  position: fixed;

  left: clamp(1rem, 3vw, 2rem);
  right: auto;

  bottom: calc(
    var(--floating-action-bottom-offset) +
    env(safe-area-inset-bottom)
  );

  z-index: 950;

  display: inline-flex;

  width: 58px;
  height: 58px;

  align-items: center;
  justify-content: center;

  color: #ffffff;
  background: #25d366;

  border: 2px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.3);

  font-size: 2rem;
  line-height: 1;

  text-decoration: none;

  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}


/* =========================================================
   HOVER / FOCUS
   ========================================================= */

.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
  color: #ffffff;

  background: #1ebe5d;

  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.35);

  transform: translateY(-3px);
}


.floating-whatsapp:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}


/* =========================================================
   ATTENTION RING
   ========================================================= */

.floating-whatsapp::after {
  content: "";

  position: absolute;

  inset: -6px;

  border:
    2px solid rgba(37, 211, 102, 0.75);

  border-radius: inherit;

  opacity: 0;

  pointer-events: none;

  animation:
    whatsapp-attention-ring
    3s
    ease-out
    infinite;
}


@keyframes whatsapp-attention-ring {

  0%,
  84%,
  100% {
    opacity: 0;

    transform:
      scale(0.9);
  }


  88% {
    opacity: 0.75;

    transform:
      scale(1);
  }


  96% {
    opacity: 0;

    transform:
      scale(1.38);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  :root {
    --floating-action-bottom-offset: 4.5rem;
  }


  .floating-whatsapp {
    width: 52px;
    height: 52px;

    font-size: 1.75rem;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .floating-whatsapp::after {
    animation: none;
  }

}