/* OnlineModares floating WhatsApp button (all pages). */
.om-wa {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 10px 26px rgba(18, 140, 126, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease, background 300ms ease;
  -webkit-tap-highlight-color: transparent;
}
.om-wa svg { position: relative; z-index: 1; width: 32px; height: 32px; fill: currentColor; }

/* Soft pulse ring while idle */
.om-wa-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; pointer-events: none;
  animation: om-wa-pulse 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@keyframes om-wa-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(1.6); opacity: 0; }
}

/* Moves while the visitor scrolls, springs back when they stop */
.om-wa.is-moving { transform: translateY(-8px) rotate(-12deg) scale(1.06); box-shadow: 0 18px 34px rgba(18, 140, 126, 0.4), 0 4px 10px rgba(0, 0, 0, 0.15); }
.om-wa.is-moving.is-down { transform: translateY(6px) rotate(12deg) scale(1.06); }
.om-wa.is-moving .om-wa-ring { animation-duration: 1.2s; }

.om-wa:hover, .om-wa:focus-visible { background: #1EBE5A; transform: scale(1.08); outline: none; box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.3), 0 14px 30px rgba(18, 140, 126, 0.4); }

/* "Chat with us" label, always shown above the button */
.om-wa-label {
  position: absolute; right: -6px; bottom: calc(100% + 12px); pointer-events: none;
  padding: 7px 13px; border-radius: 999px; background: #1F2B33; color: #FBF8F3; white-space: nowrap;
  font: 600 13px/1.2 "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif; box-shadow: 0 8px 20px rgba(31, 43, 51, 0.22);
  animation: om-wa-label-in 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 600ms both;
}
.om-wa-label::after {
  content: ""; position: absolute; right: 30px; top: 100%;
  border: 6px solid transparent; border-top-color: #1F2B33;
}
@keyframes om-wa-label-in { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .om-wa { right: 16px; width: 56px; height: 56px; }
  .om-wa svg { width: 30px; height: 30px; }
  .om-wa-label { font-size: 12px; padding: 6px 11px; }
  .om-wa-label::after { right: 28px; }
  /* Coded pages show a full-width "Try a Trial Lesson" bar at the bottom on phones: sit above it. */
  body.om-page .om-wa { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .om-wa { transition: none; }
  .om-wa-label { animation: none; }
  .om-wa-ring { animation: none; opacity: 0; }
  .om-wa.is-moving, .om-wa.is-moving.is-down { transform: none; }
}