/* =========================================================================
   LUMINAGE — FLOATING WHATSAPP BUTTON
   =========================================================================
   Self-contained, like nav.css. The markup is injected by
   assets/js/whatsapp.js using the number in config.js, so there is only one
   place to change and it can never drift between pages.

   It parks bottom-right and lifts itself above the checkout total bar and
   the product-page buy bar when either of those is on screen.
   ========================================================================= */

.wa-float {
  --wa-green: #25d366;
  --wa-green-dark: #1da851;
  --wa-offset: 24px;

  position: fixed;
  right: var(--wa-offset);
  bottom: var(--wa-offset);
  /* Below the toast (2200) so a confirmation message is never hidden,
     above the buy bars (180) so it stays reachable. */
  z-index: 900;

  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--wa-green);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px -4px rgba(37, 211, 102, 0.5),
              0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease, bottom 0.3s ease;
}

.wa-float:hover,
.wa-float:focus-visible {
  background: var(--wa-green-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -4px rgba(37, 211, 102, 0.55),
              0 3px 10px rgba(0, 0, 0, 0.2);
}
.wa-float:focus-visible { outline: 3px solid #0f5132; outline-offset: 3px; }

/* -- Icon ----------------------------------------------------------------- */
.wa-float__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
}
.wa-float__icon svg { width: 30px; height: 30px; }

/* -- Label ---------------------------------------------------------------- */
/* Collapsed to nothing until hover, so the button stays a clean circle. */
.wa-float__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: max-width 0.32s ease, opacity 0.22s ease, padding 0.32s ease;
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label {
  max-width: 220px;
  padding-right: 22px;
  opacity: 1;
}

/* -- Attention pulse ------------------------------------------------------ */
/* One soft ring, not a loop — it draws the eye once and then stops. */
.wa-float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--wa-green);
  animation: wa-pulse 2.4s ease-out 3;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* -- Raised state ---------------------------------------------------------- */
/* Set by whatsapp.js when a bottom bar is on screen. */
.wa-float.is-raised { bottom: calc(var(--wa-offset) + 74px); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 767px) {
  .wa-float { --wa-offset: 16px; }
  .wa-float__icon { width: 52px; height: 52px; }
  .wa-float__icon svg { width: 27px; height: 27px; }
  /* No hover on touch, so the label would never appear — keep the circle. */
  .wa-float__label { display: none; }
}

/* =========================================================================
   PREFERENCES AND PRINT
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
  .wa-float:hover, .wa-float:focus-visible { transform: none; }
  .wa-float::after { animation: none; }
  .wa-float__label { transition: none; }
}

@media print {
  .wa-float { display: none !important; }
}