/* ==========================================================================
   Плавающая кнопка WhatsApp
   Вынесена в отдельный файл БЕЗ @layer: в составе @layer components хвост
   слоя после .form-success молча не применялся браузером (взаимодействие
   слоёв и пользовательских свойств). Неслоёное правило имеет высший
   приоритет и не конфликтует с остальными слоями сайта.
   Кнопка всегда на экране (position: fixed), в правом нижнем углу; ведёт
   на wa.me с заранее заполненным текстом. Цвет — официальный зелёный
   WhatsApp, чтобы отличаться от брендового красного клуба.
   ========================================================================== */

.wa-float {
  --wa-bg: #25D366;
  --wa-bg-dark: #1fb959;

  position: fixed;
  right: var(--sp-5, 20px);
  bottom: var(--sp-5, 20px);
  z-index: var(--z-toast, 80);

  display: inline-grid;
  place-items: center;

  width: 58px;
  height: 58px;
  border-radius: var(--radius-pill, 999px);
  background: var(--wa-bg);
  color: var(--c-on-dark, #fff);

  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  transition:
    background var(--t-fast, 120ms) var(--ease, ease),
    transform var(--t-fast, 120ms) var(--ease, ease);
}

.wa-float:hover,
.wa-float:focus-visible {
  background: var(--wa-bg-dark);
  transform: translateY(-2px);
}

.wa-float:focus-visible {
  box-shadow:
    0 0 0 3px var(--c-on-dark, #fff),
    0 8px 24px rgba(37, 211, 102, 0.35);
}

@media (max-width: 479px) {
  .wa-float {
    right: var(--sp-4, 16px);
    bottom: var(--sp-4, 16px);
    width: 52px;
    height: 52px;
  }
}