/* =========================================================
   FEATURE: WHATSAPP FLOATING SUPPORT BUTTON
   Fixed to the bottom-right corner on every front-end page.
   Only enqueued when the feature is on and a number is set
   (see bbpb_enqueue_assets' sibling hook in digiskyward.php),
   so this file loading at all already means the button is
   showing.
   ========================================================= */

.bbpb-whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;

  background: #25D366;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  text-decoration: none !important;

  transition: transform .2s ease, box-shadow .2s ease, bottom .2s ease;
}

.bbpb-whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: #FFFFFF;
}

.bbpb-whatsapp-float:hover,
.bbpb-whatsapp-float:focus {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .34);
}

.bbpb-whatsapp-float:active {
  transform: scale(.96);
}

@media (prefers-reduced-motion: reduce) {
  .bbpb-whatsapp-float {
    transition: none;
  }
}

@media (max-width: 600px) {
  .bbpb-whatsapp-float {
    right: 16px;
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }

  .bbpb-whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}

/* ---- Astra's sticky add-to-cart bar vs. this button ----
   Same technique sticky-bar.css already uses to lift
   #ast-scroll-top clear of the bar: once Astra marks the bar
   .is-active, push this button up above it instead of letting
   the two overlap in the same bottom-right corner. */
body:has(.ast-sticky-add-to-cart.is-active) .bbpb-whatsapp-float {
  bottom: 105px;
  bottom: calc(105px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 600px) {
  /* Mobile's sticky bar is the full-bleed two-button strip
     (see sticky-bar.css), roughly 60px tall plus its own
     safe-area padding -- clear that instead of the desktop
     bar's taller dark strip. */
  body:has(.ast-sticky-add-to-cart.is-active) .bbpb-whatsapp-float {
    bottom: 76px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Astra's own "scroll to top" circle vs. this button ----
   Verified live (bikingbrotherhood.in, both viewports): Astra's
   #ast-scroll-top is ALSO fixed to the bottom-right corner --
   right:30px/bottom:30px normally, right:30px/bottom:105px once
   sticky-bar.css lifts it clear of the add-to-cart bar -- so
   without this, it lands directly on top of the WhatsApp button
   on every scrolled page, not just product pages. Stacked here
   instead: same right edge as the WhatsApp button, sitting in
   the gap just above it, on every state.

   Specificity note: the sticky-bar-active rule below intentionally
   repeats sticky-bar.css's own "body:has(.ast-sticky-add-to-cart
   .is-active) #ast-scroll-top" selector with an extra
   ".single-product" body class so it always wins regardless of
   which of the two stylesheets happens to print first in wp_head --
   equal-specificity selectors otherwise fall back to source order,
   which isn't guaranteed between two independently-enqueued files. */
#ast-scroll-top {
  right: 20px !important;
  bottom: 86px !important;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
}

body.single-product:has(.ast-sticky-add-to-cart.is-active) #ast-scroll-top {
  bottom: 171px !important;
  bottom: calc(171px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 600px) {
  #ast-scroll-top {
    right: 16px !important;
    bottom: 76px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Mobile already hides #ast-scroll-top entirely while the sticky
     bar is active (see sticky-bar.css) -- nothing extra needed for
     that state here, only the default one above. */
}