/* ============================================================
   24-backtotop — floating "Back to top" button, every page.
   Injected by js/sections/24-backtotop.js (no markup to include).
   Fixed bottom-right; on mobile (<=820px) it sits above the
   17-mobilebar Call | Book bar. Below the nav overlay (z 199).
   All selectors scoped under .sec-24-backtotop.
   ============================================================ */

.sec-24-backtotop {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 170;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid hsl(0 0% 100% / 0.18);
  border-radius: 50%;
  background: var(--accent-strong);
  color: var(--accent-on);
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out),
    visibility 300ms, background-color 200ms var(--ease-out);
}

.sec-24-backtotop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sec-24-backtotop:hover {
  background: var(--accent);
}

.sec-24-backtotop svg {
  width: 20px;
  height: 20px;
  transition: transform 250ms var(--ease-out);
}

.sec-24-backtotop:hover svg {
  transform: translateY(-2px);
}

@media (max-width: 820px) {
  .sec-24-backtotop {
    width: 44px;
    height: 44px;
    bottom: calc(56px + env(safe-area-inset-bottom) + 0.85rem);
  }
}

/* Lift the GoHighLevel chat bubble (99-chat-widget.html) above this button
   and, on mobile, the 17-mobilebar bar. The widget renders in a shadow root,
   so 17-mobilebar.js injects a rule there that reads this variable (custom
   properties inherit into shadow DOM). */
chat-widget {
  --pt-chat-bottom: calc(clamp(1rem, 2vw, 1.75rem) + 48px + 0.75rem);
}

@media (max-width: 820px) {
  chat-widget {
    --pt-chat-bottom: calc(56px + env(safe-area-inset-bottom) + 0.85rem + 44px + 0.75rem);
  }
}

html.reduced-motion .sec-24-backtotop,
html.reduced-motion .sec-24-backtotop svg {
  transition: none;
}