/* ==========================================================================
   Tooreen Construction — WhatsApp
   A floating route to WhatsApp, shared by every page. It stays out of the
   way until the hero has gone, and steps aside wherever the page is already
   offering a way to get in touch.
   ========================================================================== */

.wa-fab{
  position:fixed;z-index:70;
  right:clamp(16px,2.2vw,30px);bottom:clamp(16px,2.2vw,30px);
  display:inline-flex;align-items:center;gap:0;
  /* at rest: the bright WhatsApp-green circle from the Tooreen_DEPLOY site */
  height:54px;padding:0 13.5px;
  border:0;border-radius:999px;
  background:#25d366;color:#fff;
  box-shadow:0 0 16px rgba(37,211,102,.28),0 10px 24px rgba(10,26,18,.2);
  text-decoration:none;white-space:nowrap;
  transition:
    transform 520ms cubic-bezier(.23,1,.32,1),
    opacity 380ms ease,
    visibility 0s linear 380ms,
    gap 420ms cubic-bezier(.23,1,.32,1),
    padding 420ms cubic-bezier(.23,1,.32,1),
    background-color 260ms ease,
    border-color 260ms ease,
    box-shadow 320ms ease;
}

/* starts just out of place, then slides in once as the page opens and stays */
.wa-fab{opacity:0;visibility:hidden;transform:translateY(18px) scale(.92);pointer-events:none}
.wa-fab.is-on{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition-delay:0s;
}
/* contact page, phones: clear of the pinned "brief" bar */
.wa-fab.is-on.is-lifted{transform:translateY(calc(-1 * var(--wa-lift,0px)))}

.wa-fab-glyph{
  width:27px;height:27px;flex:none;fill:currentColor;
  transition:transform 520ms cubic-bezier(.23,1,.32,1),color 260ms ease;
}
.wa-fab-label{
  max-width:0;overflow:hidden;
  font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transition:max-width 460ms cubic-bezier(.23,1,.32,1),opacity 300ms ease;
  opacity:0;
}

/* small red notification dot, as on the original; it steps aside while the
   button is expanded */
.wa-fab::before{
  content:"";position:absolute;top:3px;right:3px;
  width:9px;height:9px;border-radius:50%;
  background:#ff625a;box-shadow:0 0 8px rgba(255,98,90,.3);
  pointer-events:none;
  transition:opacity 200ms ease;
}

/* the ring that says "this is live" — one slow pulse, not a strobe */
.wa-fab::after{
  content:"";position:absolute;inset:-1px;border-radius:999px;
  border:1px solid rgba(37,211,102,.55);
  opacity:0;pointer-events:none;
}
.wa-fab.is-on::after{animation:wa-ping 3.6s cubic-bezier(.23,1,.32,1) 700ms 2}
@keyframes wa-ping{
  0%{opacity:.85;transform:scale(1)}
  55%{opacity:0;transform:scale(1.22)}
  100%{opacity:0;transform:scale(1.22)}
}

@media(hover:hover){
  /* expanded: a white pill, green logo, dark green label */
  .wa-fab:hover{
    gap:12px;padding:0 22px 0 17px;
    background:#fff;color:#0b2b21;
    box-shadow:0 0 0 1px rgba(11,43,33,.08),0 18px 38px rgba(8,37,29,.24);
  }
  .wa-fab:hover .wa-fab-label{max-width:160px;opacity:1}
  .wa-fab:hover .wa-fab-glyph{transform:scale(1.06);color:#25d366}
  .wa-fab:hover::before{opacity:0}
}
.wa-fab:focus-visible{
  outline:2px solid #25d366;outline-offset:4px;
  gap:12px;padding:0 22px 0 17px;
  background:#fff;color:#0b2b21;
}
.wa-fab:focus-visible .wa-fab-label{max-width:160px;opacity:1}
.wa-fab:focus-visible .wa-fab-glyph{color:#25d366}
.wa-fab:focus-visible::before{opacity:0}

/* touch: the label rides along permanently, the target stays thumb-sized */
@media(hover:none){
  .wa-fab{height:52px;padding:0 13.5px}
  .wa-fab-glyph{width:25px;height:25px}
}

@media(prefers-reduced-motion:reduce){
  .wa-fab{transition:opacity 1ms linear,visibility 1ms linear}
  .wa-fab.is-on::after{animation:none}
  .wa-fab-label,.wa-fab-glyph{transition:none}
}

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