/* WHATSAPP-BUTTON v1 — zwevende knop rechtsonder. Classes prefixed .wab1.
   WhatsApp-groen #25D366 is een third-party brand-kleur met dezelfde
   uitzonderings-status als de Google-kleuren (DESIGN-RULES § kleur-regels):
   bewust NIET tokenized, anders oogt de knop niet als WhatsApp. */

.wab1 {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 900; /* onder navbar-v2 (1000) en de Rohentwurf-banner (1001) */
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.wab1:hover,
.wab1:focus-visible {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.wab1:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .wab1 {
    width: 52px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wab1 {
    transition: none;
  }

  .wab1:hover,
  .wab1:focus-visible {
    transform: none;
  }
}