/* ============================================
   WHATSAPP FLOATING ACTION BUTTON
   ============================================ */

.whatsapp-fab {
  position: fixed;
  right: var(--sp-5);
  bottom: calc(70px + env(safe-area-inset-bottom) + var(--sp-4));
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  z-index: var(--z-fab);
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

.whatsapp-fab:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.5);
}

/* Pulsing ring */
.whatsapp-fab::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(37,211,102,0.4);
  animation: fab-ring 2.5s ease-in-out infinite;
}

@keyframes fab-ring {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 0; }
}

/* On desktop, shift higher (no mobile nav) */
@media (min-width: 769px) {
  .whatsapp-fab {
    bottom: var(--sp-8);
    right: var(--sp-8);
    width: 60px;
    height: 60px;
  }
}