/* Floating "WhatsApp Us" button shown on the main pages.

   It sits in the bottom-left corner because the Zoho SalesIQ chat launcher owns
   the bottom-right one. The corner is fixed rather than direction-aware on
   purpose: the SalesIQ launcher stays bottom-right in Arabic too, so flipping
   this button in RTL would drop it straight on top of the launcher. */
.whatsapp-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9998; /* Under the SalesIQ launcher (9999), above page content. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25d366; /* WhatsApp brand green, behind the white glyph. */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  /* ChatWidgetOffset measures how much of the bottom footer bar is on screen and
     publishes it as --chat-widget-lift. Riding the same variable keeps this
     button clear of the footer once the page is scrolled to the end, in step
     with the chat launcher on the other side. */
  transform: translateY(calc(-1 * var(--chat-widget-lift, 0px)));
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transform: translateY(calc(-1 * var(--chat-widget-lift, 0px))) scale(1.06);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

@media (max-width: 767px) {
  .whatsapp-float {
    left: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
  }

  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    transition: none;
  }

  .whatsapp-float:hover,
  .whatsapp-float:focus-visible {
    transform: translateY(calc(-1 * var(--chat-widget-lift, 0px)));
  }
}