/**
 * AL-HAVI Instant Checkout Lead Capture — Frontend / Checkout Styles
 * Loaded only on the WooCommerce checkout page.
 */

/* ======================================================
   WhatsApp floating button
   ====================================================== */
.alhavi-wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.alhavi-wa-float:hover,
.alhavi-wa-float:focus {
  background: #1da851;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .30);
  transform: scale(1.08);
  outline: none;
}

.alhavi-wa-float svg {
  display: block;
}

/* Hide on desktop if admin prefers — add class alhavi-wa-mobile-only
   to the button element and uncomment the rule below:             */
/* @media (min-width: 769px) { .alhavi-wa-mobile-only { display: none !important; } } */

/* ======================================================
   Capture indicator (optional subtle pulse on phone field)
   ====================================================== */
@keyframes alhavi-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 113, 177, 0.35); }
  70%  { box-shadow: 0 0 0 7px rgba(34, 113, 177, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 113, 177, 0); }
}

.alhavi-field-captured {
  animation: alhavi-pulse 0.9s ease-out;
}

/* ======================================================
   Mobile tweaks for WooCommerce checkout
   ====================================================== */
@media screen and (max-width: 600px) {
  .alhavi-wa-float {
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
  }
}