/* Floating "Join WhatsApp Group" button - bottom centre */
.waf{position:fixed;left:50%;bottom:18px;z-index:998;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  padding:8px 18px 8px 8px;border-radius:999px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--lgreen,#22a822) 0%,var(--xlgreen,#178a17) 50%,var(--green,#1a7a1a) 100%);
  box-shadow:0 10px 28px rgba(26,122,26,.45),0 2px 6px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.35);overflow:visible;white-space:nowrap;
  animation:waf-in .7s cubic-bezier(.2,1.4,.4,1) .8s both,waf-float 3.2s ease-in-out 1.6s infinite;
  -webkit-tap-highlight-color:transparent}
.waf:hover{filter:brightness(1.06);box-shadow:0 14px 34px rgba(26,122,26,.55),0 2px 6px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.4)}
.waf:active{transform:translateX(-50%) scale(.97)}
.waf-ico{position:relative;z-index:2;flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);animation:waf-wiggle 4s ease-in-out 2.4s infinite}
.waf-txt{position:relative;z-index:2;display:flex;flex-direction:column;line-height:1.15;text-align:left}
.waf-txt b{font-size:14.5px;font-weight:800;letter-spacing:.2px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.waf-txt small{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:rgba(255,255,255,.92)}
.waf-live{width:7px;height:7px;border-radius:50%;background:#ffd700;box-shadow:0 0 0 0 rgba(255,215,0,.8);animation:waf-dot 1.6s ease-out infinite}
/* pulsing rings that draw the eye */
.waf-ring{position:absolute;inset:0;border-radius:999px;border:2px solid var(--lgreen,#22a822);pointer-events:none;animation:waf-pulse 2.4s ease-out 1.6s infinite;opacity:0}
.waf-ring2{animation-delay:2.8s}
/* light sweep */
.waf-shine{position:absolute;inset:0;border-radius:999px;overflow:hidden;pointer-events:none;z-index:1}
.waf-shine::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);transform:skewX(-20deg);animation:waf-sweep 3.5s ease-in-out 2s infinite}

@keyframes waf-in{0%{opacity:0;transform:translate(-50%,40px) scale(.8)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes waf-float{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
@keyframes waf-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.25,1.6)}}
@keyframes waf-sweep{0%{left:-60%}55%,100%{left:130%}}
@keyframes waf-wiggle{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}94%{transform:rotate(6deg)}96%{transform:rotate(0)}}
@keyframes waf-dot{0%{box-shadow:0 0 0 0 rgba(255,215,0,.8)}100%{box-shadow:0 0 0 7px rgba(255,215,0,0)}}

/* keep page content (footer links) from hiding behind the button */
body{padding-bottom:78px}
@media (max-width:480px){
  .waf{bottom:14px;padding:6px 14px 6px 6px;gap:8px}
  .waf-ico{width:34px;height:34px}
  .waf-txt b{font-size:13.5px}
  .waf-txt small{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .waf,.waf-ico,.waf-ring,.waf-shine::before,.waf-live{animation:none!important}
  .waf{opacity:1}
}