/* The floating WhatsApp button ---------------------------------------------
   Same corner, size and colour as the one the live site carries. Pairs with
   inc/section-whatsapp-button.php. */

.tu-wa-fab {
  position: fixed;
  inset-block-end: 25px;
  /* The live button sits in the left corner in both languages — it is beside
     the page, not inside its text — so this is a physical side, not a logical
     one that would jump across when the language changes. */
  left: 25px;
  z-index: 9990;

  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  transition: transform .3s ease, box-shadow .3s ease;
}
.tu-wa-fab:hover,
.tu-wa-fab:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
  color: #fff;
}
.tu-wa-fab svg { display: block; }

/* Nothing should sit under the panel it opens. */
.tu-wa[open] ~ .tu-wa-fab,
dialog[open] ~ .tu-wa-fab { visibility: hidden; }

@media (max-width: 560px) {
  .tu-wa-fab { inset-block-end: 18px; left: 18px; width: 54px; height: 54px; }
  .tu-wa-fab svg { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .tu-wa-fab { transition: none; }
  .tu-wa-fab:hover, .tu-wa-fab:focus-visible { transform: none; }
}

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