:root {
  --whatsapp-green: #25d366;
  --whatsapp-green-hover: #1ebe5d;
}

/* Platform colours stay independent of the navy-and-white site theme. */
body.experience-page[dir] .whatsapp-button {
  background: var(--whatsapp-green);
  border-color: var(--whatsapp-green);
  color: #071a2f;
}

body.experience-page[dir] .whatsapp-button:hover,
body.experience-page[dir] .whatsapp-button:focus-visible {
  background: var(--whatsapp-green-hover);
  border-color: var(--whatsapp-green-hover);
  color: #071a2f;
}

body.experience-page[dir] .whatsapp-button .wa-icon {
  color: #fff;
}

body.experience-page[dir] .whatsapp-button:focus-visible {
  outline: 3px solid #071a2f;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff;
}

.wa-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: currentColor;
}

.floating-wa {
  width: 58px;
  height: 58px;
  right: 16px;
  bottom: calc(var(--consent-height, 0px) + max(18px, env(safe-area-inset-bottom)));
  background: var(--whatsapp-green);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28), 0 0 0 0 rgba(37, 211, 102, .45);
  transition: transform .2s ease, background-color .2s ease;
  animation: whatsapp-pulse 2.2s ease-out infinite;
}

body.experience-page[dir] .floating-wa {
  background: var(--whatsapp-green);
  color: #fff;
}

.floating-wa .wa-icon {
  width: 30px;
  height: 30px;
}

.floating-wa:hover,
.floating-wa:focus-visible,
body.experience-page[dir] .floating-wa:hover,
body.experience-page[dir] .floating-wa:focus-visible {
  background: var(--whatsapp-green-hover);
  transform: translateY(-2px) scale(1.04);
  outline: none;
}

body.experience-page[dir] .floating-wa:focus-visible {
  outline: 3px solid #071a2f;
  outline-offset: 3px;
}

body[dir="rtl"] .floating-wa {
  right: auto;
  left: 16px;
}

@keyframes whatsapp-pulse {
  0%, 55%, 100% {
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28), 0 0 0 0 rgba(37, 211, 102, .42);
  }
  82% {
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28), 0 0 0 14px rgba(37, 211, 102, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-wa {
    animation: none;
  }
}