/* Floating WhatsApp button (src/whatsapp.js), on every page of the site. */
.wa-float {
  position: fixed; z-index: 70; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 13px;
  border-radius: 999px; background: #25d366; color: #fff !important; text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); font: 700 14px/1 Archivo, system-ui, sans-serif;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.wa-float:focus-visible { outline: 3px solid #ffb32c; outline-offset: 3px; }
.wa-float svg { flex: none; }
/* The label opens on hover (desktop); phones show the icon alone. */
.wa-label { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease; }
@media (hover: hover) {
  .wa-float:hover .wa-label, .wa-float:focus-visible .wa-label { max-width: 220px; }
}
/* Phones: above the bottom nav (64 px); desktop has no bottom nav. */
@media (min-width: 1024px) { .wa-float { right: 24px; bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-label { transition: none; } }