/* ============================================================
   WHATSAPP FLOATING CHAT BUBBLE
   Premium, minimal, brand-consistent floating action button.
   ============================================================ */

:root{
  /* ============ COLOR CUSTOMIZATION ============ */
  --wa-green: var(--whatsapp-color, #25D366);
  --wa-green-dark: var(--whatsapp-color-dark, #1DA851);
  --wa-badge-color: #FF3B30;
  /* ============ END COLOR CUSTOMIZATION ============ */

  --wa-size: 60px;
  --wa-size-mobile: 52px;
  --wa-offset-desktop: 24px;
  --wa-offset-mobile: 16px;
}

.wa-fab{
  position: fixed;
  right: var(--wa-offset-desktop);
  bottom: var(--wa-offset-desktop);
  z-index: 999;

  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--wa-green);
  box-shadow:
    0 8px 24px rgba(37, 211, 102, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.12);

  text-decoration: none;
  cursor: pointer;
  border: none;
  outline: none;

  transform: translateY(0) scale(1);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              box-shadow .28s ease,
              background-color .2s ease;

  /* entrance animation */
  animation: wa-enter .55s cubic-bezier(.34,1.56,.64,1) .35s both;
}

.wa-fab:hover,
.wa-fab:focus-visible{
  background: var(--wa-green-dark);
  transform: translateY(-2px) scale(1.08);
  box-shadow:
    0 12px 32px rgba(37, 211, 102, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.16);
}

.wa-fab:active{
  transform: translateY(0) scale(0.97);
}

.wa-fab:focus-visible{
  box-shadow:
    0 0 0 3px var(--white-color, #fff),
    0 0 0 6px var(--wa-green),
    0 8px 24px rgba(37, 211, 102, 0.35);
}

/* gentle idle pulse ring so the button reads as "alive" without being noisy */
.wa-fab::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--wa-green);
  opacity: .55;
  animation: wa-pulse 2.6s ease-out infinite;
  pointer-events: none;
}

.wa-fab:hover::before{ animation-play-state: paused; opacity: 0; }

.wa-fab svg{
  position: relative;
  width: 30px;
  height: 30px;
  fill: var(--white-color, #fff);
  z-index: 1;
}

/* unread / notification badge */
.wa-fab-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;

  background: var(--wa-badge-color);
  color: var(--white-color, #fff);
  border: 2px solid var(--white-color, #fff);

  font-family: var(--font-body, inherit);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;

  z-index: 2;
  animation: wa-badge-pop .4s cubic-bezier(.34,1.56,.64,1) 1s both;
}

/* tooltip label */
.wa-fab-tooltip{
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);

  background: var(--ink, #1C1B1F);
  color: var(--white-color, #fff);
  font-family: var(--font-body, inherit);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 8px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.wa-fab-tooltip::after{
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--ink, #1C1B1F);
}

.wa-fab:hover .wa-fab-tooltip,
.wa-fab:focus-visible .wa-fab-tooltip{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

@keyframes wa-enter{
  0%{ opacity: 0; transform: translateY(24px) scale(.6); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wa-pulse{
  0%{ transform: scale(1); opacity: .45; }
  70%{ transform: scale(1.55); opacity: 0; }
  100%{ transform: scale(1.55); opacity: 0; }
}

@keyframes wa-badge-pop{
  0%{ opacity: 0; transform: scale(.3); }
  100%{ opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .wa-fab{ animation: none; }
  .wa-fab::before{ animation: none; display: none; }
  .wa-fab-badge{ animation: none; }
}

/* Keep the WhatsApp bubble from colliding with the existing
   "Back to top" button — stack it above the bubble when visible. */
.back-to-top{
  right: var(--wa-offset-desktop) !important;
  bottom: calc(var(--wa-offset-desktop) + var(--wa-size) + 14px) !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px){
  .wa-fab{
    width: var(--wa-size-mobile);
    height: var(--wa-size-mobile);
    right: var(--wa-offset-mobile);
    bottom: var(--wa-offset-mobile);
  }

  .wa-fab svg{ width: 26px; height: 26px; }

  .back-to-top{
    right: var(--wa-offset-mobile) !important;
    bottom: calc(var(--wa-offset-mobile) + var(--wa-size-mobile) + 12px) !important;
    width: 42px !important;
    height: 42px !important;
  }

  /* Tooltip is hidden on touch devices; hover has no meaning there */
  .wa-fab-tooltip{ display: none; }
}

/* If a sticky mobile bottom navigation bar is ever introduced,
   lift the bubble above it automatically. */
body.has-mobile-bottom-nav .wa-fab{
  bottom: calc(var(--wa-offset-mobile) + 64px);
}
body.has-mobile-bottom-nav .back-to-top{
  bottom: calc(var(--wa-offset-mobile) + 64px + var(--wa-size-mobile) + 12px) !important;
}