/* =============================================================
   WHATSAPP FAB — Floating action button for WhatsApp contact
   ============================================================= */

/* Block */
.whatsapp-fab {
  position: fixed;
  bottom: var(--whatsapp-fab-offset);
  right: var(--whatsapp-fab-offset);
  z-index: var(--z-whatsapp-fab);
  opacity: 0;
  transform: scale(0);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* Block modifier — visible state */
.whatsapp-fab--visible {
  opacity: 1;
  transform: scale(1);
}

/* Element — anchor link */
.whatsapp-fab__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--whatsapp-fab-size);
  height: var(--whatsapp-fab-size);
  border-radius: var(--radius-full);
  background-color: var(--color-whatsapp);
  box-shadow: var(--whatsapp-fab-shadow);
  text-decoration: none;
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.whatsapp-fab__link:hover {
  background-color: var(--color-whatsapp-hover);
  box-shadow: var(--whatsapp-fab-shadow-hover);
  transform: scale(1.1);
}

.whatsapp-fab__link:focus-visible {
  outline: 2px solid var(--color-whatsapp);
  outline-offset: 3px;
}

/* Element — icon wrapper */
.whatsapp-fab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--whatsapp-fab-icon-size);
  height: var(--whatsapp-fab-icon-size);
  color: #FFFFFF;
  position: relative;
  z-index: 1;
}

/* Element — pulse ring */
.whatsapp-fab__ring {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-whatsapp);
  animation: whatsapp-pulse 3s ease-out infinite;
  z-index: 0;
}

.whatsapp-fab__link:hover .whatsapp-fab__ring {
  animation-play-state: paused;
}

/* Pulse keyframes */
@keyframes whatsapp-pulse {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Accessibility — reduced motion */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab__ring {
    animation: none;
  }

  .whatsapp-fab {
    transition: none;
  }
}