/* ==========================================================================
   LK Risk — WhatsApp button
   Fixed to the bottom-right corner. Rises by --cookie-banner-offset (set by
   assets/js/cookie-banner.js) so it never overlaps the cookie banner.
   Markup: components/whatsapp-widget.html · Behaviour: assets/js/whatsapp-widget.js
   ========================================================================== */

.whatsapp-widget {
  --whatsapp-green: #25D366; /* official brand colour */
  position: fixed;
  right: calc(var(--space-5) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  z-index: 89; /* below the header (100) and cookie banner (90) */
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--whatsapp-green);
  color: var(--white);
  box-shadow: var(--shadow), 0 0 0 1px rgba(10, 18, 31, 0.06);

  /* Independent properties so the slow lift and the quick hover don't fight */
  translate: 0 calc(var(--cookie-banner-offset, 0px) * -1);
  scale: 1;
  transition:
    translate var(--duration-slow) var(--ease-out),
    scale var(--duration) var(--ease-out),
    opacity var(--duration-slow) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.whatsapp-widget svg {
  width: 28px;
  height: 28px;
}

.whatsapp-widget:hover,
.whatsapp-widget:focus-visible {
  scale: 1.06;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(10, 18, 31, 0.06);
}

/* Keep the focus ring circular (the global ring uses a small radius) */
.whatsapp-widget:focus-visible {
  border-radius: 50%;
}

/* Entrance: held back until the page has settled (whatsapp-widget.js).
   Scoped to .js so the button is always visible without scripts. */
.js .whatsapp-widget:not(.is-ready) {
  opacity: 0;
  scale: 0.85;
  pointer-events: none;
}


/* --- Tooltip (pointer devices only) ---------------------------------------- */
.whatsapp-widget__tooltip {
  position: absolute;
  right: calc(100% + var(--space-3));
  top: 50%;
  padding: var(--space-2) var(--space-4);
  background-color: var(--navy-950);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(6px, -50%);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    visibility 0s linear var(--duration-fast);
}

.whatsapp-widget:hover .whatsapp-widget__tooltip,
.whatsapp-widget:focus-visible .whatsapp-widget__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition-delay: 0s;
}

@media (hover: none) {
  .whatsapp-widget__tooltip {
    display: none;
  }
}


/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .whatsapp-widget {
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }

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