/*
 * Floating WhatsApp button.
 *
 * Mirrors the theme's .scrollToTop button on the opposite edge: same
 * fixed offset (20px), same 55px -> 40px sizing at the same breakpoint,
 * same circle. Unlike that button it is visible from the top of the
 * page, since it is a contact call to action rather than a scroll aid.
 *
 * Everything is scoped to .toh-wa so it cannot reach any existing
 * element, and it is fixed to the viewport so it sits outside the flow
 * the theme's GSAP smooth scroller measures.
 */
.toh-wa {
  position: fixed;
  left: 20px;
  bottom: 20px;
  /* Below the theme's offcanvas menu (997) and its backdrop (995), so an
     open mobile menu covers the button instead of the button floating
     over it. Still far above ordinary page content. */
  z-index: 990;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  -webkit-transition: 0.5s ease all;
  transition: 0.5s ease all;
}

/* Same lift the .scrollToTop button uses on hover. */
.toh-wa:hover,
.toh-wa:focus {
  color: #fff;
  transform: translateY(-15%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.toh-wa:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.toh-wa svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: currentColor;
  pointer-events: none;
}

/* Matches the breakpoint .scrollToTop shrinks at. */
@media only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px),
  (max-width: 574.98px) {
  .toh-wa {
    width: 40px;
    height: 40px;
  }
  .toh-wa svg {
    width: 22px;
    height: 22px;
  }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .toh-wa,
  .toh-wa:hover,
  .toh-wa:focus {
    -webkit-transition: none;
    transition: none;
    transform: none;
  }
}