/* Businessbook floating actions — Brandbox theme1 / foundation parity (Mayukha dock + classic).
 *
 * CONTRACT (all themes): markup from bb_floating_render.php + this file via public.php when
 * showFloating. Themes may skin .pub-float-* / .whatsapp-float — MUST NOT display:none them
 * under breakpoints (no theme-only mobile bottom bar that replaces the dock).
 * See theme_orchestration/THEME_QA_CHECKLIST.md #11.
 */
:root {
  --gold: var(--color-accent, #c9a55c);
  --navy-dark: var(--color-secondary, #0a1120);
  --navy-darkest: var(--color-secondary, #050a14);
  --transition: 0.28s ease;
  --fab-quick-bottom: 20px;
  --fab-quick-toggle-h: 56px;
  --fab-col-gap: 12px;
  --fab-col-right: 20px;
  --fab-menu-right: calc(var(--fab-col-right) + 56px);
  --fab-wa-size: 58px;
  --fab-wa-center-nudge: 7px;
  --fab-float-btn-h: 44px;
  --fab-float-gap: 10px;
  --fab-stack-max-h: 152px;
  --fab-cart-size: 52px;
  --fab-cart-center-nudge: 6px;
  --fab-wa-bottom: var(--fab-quick-bottom);
  --fab-cart-bottom: calc(var(--fab-wa-bottom) + var(--fab-wa-size) + var(--fab-col-gap));
  --fab-float-stack-bottom: calc(var(--fab-cart-bottom) + var(--fab-cart-size) + var(--fab-col-gap));
  --fab-scroll-top-bottom: calc(var(--fab-quick-bottom) + var(--fab-quick-toggle-h) + var(--fab-col-gap));
}

.whatsapp-float,
.pub-float-stack {
  position: fixed;
  z-index: 1090;
}
.pub-float-stack a,
.whatsapp-float {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-float-stack a i,
.whatsapp-float i {
  display: inline-block;
  line-height: 1;
  pointer-events: none;
}

.whatsapp-float {
  right: calc(var(--fab-col-right) - var(--fab-wa-center-nudge));
  bottom: var(--fab-wa-bottom);
  z-index: 998;
  width: var(--fab-wa-size);
  height: var(--fab-wa-size);
  background: #25d366;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
  transition: var(--transition);
  animation: bb-pulse-whatsapp 2.5s infinite;
}
.whatsapp-float:hover {
  transform: scale(1.12);
  background: #1ebe5b;
}
.whatsapp-float--above-cart {
  /* Stack + cart-slot math assumes WA stays at the corner and cart sits above it.
   * Do not lift WA here — themes that skinned both selectors to the same bottom
   * were leaving cart + WA on one point (cart hidden under green). */
  bottom: var(--fab-wa-bottom);
}

/* Theme cart FABs (bb1-cart-fab … bb8-cart-fab): always clear classic WhatsApp */
body:has(.whatsapp-float) [class$="-cart-fab"]:not([hidden]) {
  bottom: var(--fab-cart-bottom) !important;
  right: calc(var(--fab-col-right) - var(--fab-cart-center-nudge));
  z-index: 999;
}
@keyframes bb-pulse-whatsapp {
  0%,
  100% {
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 6px 40px rgba(37, 211, 102, 0.65);
  }
}

.pub-float-stack {
  right: var(--fab-col-right);
  bottom: var(--fab-float-stack-bottom);
  z-index: 1098;
  display: flex;
  flex-direction: column;
  gap: var(--fab-float-gap);
  align-items: flex-end;
}
.pub-float-stack--no-cart {
  bottom: calc(var(--fab-wa-bottom) + var(--fab-wa-size) + var(--fab-col-gap));
}
.pub-float-stack--no-wa {
  bottom: var(--fab-wa-bottom);
}
.pub-float-stack--no-wa.pub-float-stack--no-cart {
  bottom: var(--fab-wa-bottom);
}
.pub-float-stack--with-wa.pub-float-stack--no-cart {
  bottom: calc(var(--fab-wa-bottom) + var(--fab-wa-size) + var(--fab-col-gap));
}
.pub-float-stack a {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--navy-dark);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--gold);
  font-size: 16px;
  text-decoration: none;
  transition: var(--transition);
}
.pub-float-stack a:hover {
  background: var(--gold);
  color: var(--navy-darkest);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

/* Right sticky dock — Mayukha navy rail + green WhatsApp */
.pub-float-wrap--dock {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 998;
}
.pub-float-dock {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 10px 0 0 10px;
  overflow: hidden;
  background: transparent;
  /* Vertical left edge + top/bottom frame */
  border: 1px solid color-mix(in srgb, #0b1526 88%, #ffffff);
  border-right: 0;
  box-shadow: -8px 10px 28px rgba(0, 0, 0, 0.42);
}
.pub-float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy-dark);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  color: var(--gold);
  font-size: 18px;
  text-decoration: none;
  transition: var(--transition);
  flex-shrink: 0;
}
.pub-float-btn:hover {
  background: var(--gold);
  color: var(--navy-darkest);
  border-color: var(--gold);
}
.pub-float-btn--dock {
  width: 46px;
  height: 44px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  /* Original Mayukha dock: deep navy (not gold) */
  background: #0b1526;
  background-image: none;
  color: #fff;
  font-size: 18px;
  position: relative;
  box-shadow: none;
}
.pub-float-btn--dock:last-child {
  border-bottom: 0;
  border-bottom-left-radius: 9px;
}
.pub-float-btn--dock:first-child {
  border-top-left-radius: 9px;
}
.pub-float-btn--dock::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #0b1526;
  color: var(--gold, #c9a55c);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--gold, #c9a55c) 35%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.pub-float-btn--dock:hover::before {
  opacity: 1;
}
.pub-float-btn--dock:hover {
  background: #122038;
  background-image: none;
  color: #fff;
  transform: none;
}
.pub-float-btn--wa {
  width: 46px;
  height: 44px;
  background: #25d366 !important;
  background-image: none !important;
  border-color: transparent;
  color: #fff !important;
  font-size: 20px;
  box-shadow: none;
  animation: none;
}
.pub-float-btn--wa:hover {
  background: #1ebe5b !important;
  background-image: none !important;
  color: #fff !important;
  border-color: transparent;
  transform: none;
}
.pub-float-btn--wa::before {
  color: #25d366;
  border-color: color-mix(in srgb, #25d366 40%, transparent);
}
@media (max-width: 540px) {
  .pub-float-wrap--dock {
    right: 0;
  }
  :root {
    --fab-col-right: 14px;
    --fab-quick-bottom: 16px;
    --fab-wa-size: 54px;
    --fab-wa-center-nudge: 5px;
    --fab-cart-size: 46px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    animation: none;
  }
}