/* /css/whatsapp-fab.css  — produção */
:root{
  --wa-size: 62px;
  --wa-right: 18px;
  --wa-bottom: 18px;
  --wa-green-1:#25D366; /* brand */
  --wa-green-2:#18b558; /* sombra/gradiente */
  --wa-shadow: 0 14px 28px rgba(0,0,0,.18), 0 10px 24px rgba(37,211,102,.22);
  --wa-z: 1061; /* acima de offcanvas/header, abaixo de modal (BS modal ~1055-1080; ajuste se preciso) */
}

@media (max-width:576px){
  :root{
    --wa-size: 58px;
    --wa-right: 14px;
    --wa-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

.wa-fab{
  position:fixed;
  right:var(--wa-right);
  bottom:var(--wa-bottom);
  z-index:var(--wa-z);
  pointer-events:none; /* evita bloquear cliques no wrapper */
}
.wa-fab__btn{
  pointer-events:auto;
  width:var(--wa-size);
  height:var(--wa-size);
  border:0; border-radius:50%;
  display:grid; place-items:center;
  background-image: radial-gradient(120% 140% at 30% 20%, #32e07a 0%, var(--wa-green-1) 55%, var(--wa-green-2) 100%);
  box-shadow: var(--wa-shadow);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.wa-fab__btn::before{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.wa-fab__btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.wa-fab__btn:hover{ transform: translateY(-1px); filter: saturate(1.05); }
.wa-fab__btn:active{ transform: translateY(0); }

@media print{ .wa-fab{ display:none !important; } }