/* ============================================================
   FOOTER-FAB.CSS
   Floating quick-contact stack, mobile sticky bottom bar
   (Call / WhatsApp / Book Visit), and the back-to-top button -
   the exact markup/behaviour that used to be hardcoded only on
   the homepage. Linked once from includes/footer.php so every
   page that includes the shared footer gets the same bottom
   nav as the homepage. Every rule is !important so it can't be
   overridden by any page's own older/legacy CSS.
   Do not add unrelated rules here - footer quick-actions only.
   ============================================================ */

.fab-stack {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 800 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.fab-btn {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform var(--transition, .28s cubic-bezier(.4,0,.2,1)) !important;
}

.fab-btn:hover {
  transform: scale(1.1) !important;
}

.fab-whatsapp {
  background: #25d366 !important;
  box-shadow: 0 8px 24px rgba(37,211,102,.45) !important;
}

.fab-call {
  background: var(--clr-accent) !important;
  box-shadow: 0 8px 24px rgba(0,180,216,.4) !important;
}

.fab-book {
  background: var(--clr-primary-dk) !important;
  box-shadow: 0 8px 24px rgba(14,47,90,.4) !important;
}

.fab-stack {
  align-items: center !important;
}

/* Pain & Movement Check launcher: glossy blue disc, neon cyan ring,
   glowing anatomy figure, pulse rings and a timed "Check Your Pain" bubble. */
.fab-pain {
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  isolation: isolate !important;
  background: #0a2455 !important;
  box-shadow: 0 0 0 3px #3ff0ff, 0 0 14px 3px rgba(63,240,255,.85), 0 0 32px 6px rgba(0,170,255,.45), 0 10px 24px rgba(6,30,80,.45) !important;
  animation: fabPain3dBeat 2s ease-in-out infinite !important;
}

.fab-pain:before, .fab-pain:after {
  content: "" !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(63,240,255,.9) !important;
  animation: fabPain3dPulse 2s ease-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.fab-pain:after {
  animation-delay: 1s !important;
}

@keyframes fabPain3dPulse {
  0% { transform: scale(1); opacity: .9; }
  100% { transform: scale(1.75); opacity: 0; }
}

@keyframes fabPain3dBeat {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px #3ff0ff, 0 0 14px 3px rgba(63,240,255,.85), 0 0 32px 6px rgba(0,170,255,.45), 0 10px 24px rgba(6,30,80,.45); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 3px #7ff7ff, 0 0 20px 5px rgba(63,240,255,1), 0 0 44px 10px rgba(0,170,255,.6), 0 10px 24px rgba(6,30,80,.45); }
}

.fab-pain-ring {
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.95) 82%,transparent 94%) !important;
  animation: fabPain3dSpin 2.6s linear infinite !important;
  z-index: 2 !important;
  pointer-events: none !important;
  -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)) !important;
  mask: radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)) !important;
}

@keyframes fabPain3dSpin {
  to { transform: rotate(360deg); }
}

.fab-pain-icon {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

.fab-pain:hover {
  transform: scale(1.1) !important;
}

.fab-pain-tip {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 16px) !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  gap: 8px !important;
  padding: 9px 15px 9px 12px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(127,247,255,.75) !important;
  /* Brand gradient with a light shimmer that sweeps across every few seconds. */
  background:
    linear-gradient(110deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%) 150% 0 / 250% 100% no-repeat,
    linear-gradient(135deg, #0e2f5a 0%, #1a64b8 58%, #14a9d6 100%) !important;
  color: #fff !important;
  font-family: var(--ff-body, system-ui, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .015em !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(6,30,80,.35) !important;
  box-shadow: 0 12px 28px rgba(8,40,96,.38), 0 0 0 3px rgba(63,240,255,.16), 0 0 20px rgba(63,240,255,.45) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) scale(.9) !important;
  transform-origin: calc(100% - 29px) 100% !important;
  transition: opacity .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1), visibility .35s !important;
  pointer-events: none !important;
}

/* Pointer tail, coloured to match the gradient's right end and outlined in
   the same cyan as the bubble. */
.fab-pain-tip:after {
  content: "" !important;
  position: absolute !important;
  right: 22px !important;
  bottom: -6px !important;
  width: 12px !important;
  height: 12px !important;
  background: #159fd4 !important;
  border-right: 1.5px solid rgba(127,247,255,.75) !important;
  border-bottom: 1.5px solid rgba(127,247,255,.75) !important;
  transform: rotate(45deg) !important;
  border-radius: 0 0 3px 0 !important;
}

/* "Live" pain dot: coral core with a ping ring. */
.fab-pain-tip:before {
  content: "" !important;
  flex: none !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ff4d6a !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 8px rgba(255,77,106,.9) !important;
  animation: fabTipDot 1.6s ease-out infinite !important;
}

@keyframes fabTipDot {
  0% { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 2px rgba(255,77,106,.7), 0 0 8px rgba(255,77,106,.9); }
  100% { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 9px rgba(255,77,106,0), 0 0 8px rgba(255,77,106,.9); }
}

.fab-pain-tip.is-show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  animation: fabTipFloat 3s ease-in-out .4s infinite, fabTipShine 3.6s ease-in-out .6s infinite !important;
}

/* translate (not transform) so the float never fights the show/hide pop. */
@keyframes fabTipFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes fabTipShine {
  0% { background-position: 150% 0, 0 0; }
  45%, 100% { background-position: -50% 0, 0 0; }
}

.fab-pain-tip:hover, .fab-pain-tip:focus {
  color: #fff !important;
  border-color: #aefcff !important;
  box-shadow: 0 14px 30px rgba(8,40,96,.42), 0 0 0 4px rgba(63,240,255,.24), 0 0 26px rgba(63,240,255,.65) !important;
}

.fab-pain-tip:focus-visible {
  outline: 2px solid #3ff0ff !important;
  outline-offset: 3px !important;
}

.fab-pain-wave {
  display: inline-block !important;
  transform-origin: 70% 80% !important;
  animation: fabPainWave 1.8s ease-in-out infinite !important;
}

@keyframes fabPainWave {
  0%, 55%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(16deg); }
  20%, 40% { transform: rotate(-10deg); }
}

body.sf-pain-modal-open .fab-pain-tip {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .fab-pain, .fab-pain:before, .fab-pain:after, .fab-pain-ring, .fab-pain-wave,
  .fab-pain-tip.is-show, .fab-pain-tip:before {
    animation: none !important;
  }
  .fab-pain-tip {
    transform: none !important;
    transition: opacity .35s ease, visibility .35s !important;
  }
}

/* ---- Mobile sticky quick bar: Call / WhatsApp / Book Visit (hidden on tablet/desktop) ---- */
.mobile-quickbar {
  display: none !important;
}

@media (max-width: 760px) {
  .mobile-quickbar {
    display: flex !important;
    align-items: stretch !important;
    gap: .4rem !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 970 !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid var(--clr-border) !important;
    box-shadow: 0 -10px 30px rgba(26,77,143,.14) !important;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom,0px)) !important;
  }
  .mqb-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .2rem !important;
    padding: .3rem .2rem !important;
    border-radius: var(--radius-md) !important;
    background: var(--clr-bg) !important;
    border: 1px solid var(--clr-border) !important;
    color: var(--clr-primary-dk) !important;
    font-family: var(--ff-body) !important;
    font-size: .66rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    transition: background var(--transition, .28s cubic-bezier(.4,0,.2,1)), transform var(--transition, .28s cubic-bezier(.4,0,.2,1)) !important;
  }
  .mqb-item:active {
    transform: scale(.96) !important;
    background: #e8f3fa !important;
  }
  .mqb-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: var(--clr-primary) !important;
    flex-shrink: 0 !important;
  }
  .mqb-primary {
    flex: 1.3 !important;
    border: none !important;
    background: linear-gradient(135deg,var(--clr-accent),var(--clr-primary)) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0,180,216,.4) !important;
  }
  .mqb-primary .mqb-icon {
    background: rgba(255,255,255,.22) !important;
    color: #fff !important;
  }
  .mqb-primary:active {
    transform: scale(.96) !important;
  }
  body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* ---- Back to top ---- */
.scroll-top-btn {
  position: fixed !important;
  left: 18px !important;
  bottom: 104px !important;
  z-index: 800 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 1px solid var(--clr-border) !important;
  background: #fff !important;
  color: var(--clr-primary-dk) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-md) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  transition: opacity var(--transition, .28s cubic-bezier(.4,0,.2,1)), transform var(--transition, .28s cubic-bezier(.4,0,.2,1)), visibility var(--transition, .28s cubic-bezier(.4,0,.2,1)) !important;
}

.scroll-top-btn.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.scroll-top-btn:hover {
  background: var(--clr-accent) !important;
  color: #fff !important;
  border-color: var(--clr-accent) !important;
}

@media (max-width: 760px) {
  .fab-whatsapp, .fab-call, .fab-book {
    display: none !important;
  }
  .fab-stack {
    bottom: 172px !important;
    right: 16px !important;
  }
  .fab-pain {
    width: 54px !important;
    height: 54px !important;
  }
  .fab-pain-tip {
    bottom: calc(100% + 14px) !important;
    gap: 7px !important;
    padding: 8px 13px 8px 11px !important;
    font-size: 13.5px !important;
    transform-origin: calc(100% - 27px) 100% !important;
  }
  .fab-pain-tip:after {
    right: 20px !important;
    width: 11px !important;
    height: 11px !important;
  }
  .fab-pain-tip:before {
    width: 7px !important;
    height: 7px !important;
  }
  .scroll-top-btn {
    left: 16px !important;
    bottom: 88px !important;
  }
}

@media (max-width: 360px) {
  .fab-pain-tip {
    padding: 7px 11px 7px 10px !important;
    font-size: 12.5px !important;
  }
}

/* ---- Footer social icons row: keep in sync with the shared footer ----
   core.css (homepage-only) sets .footer-social{flex-wrap:wrap} with no
   width limit, which wraps the icon row even on wide screens. style.css
   (loaded on every page) only wraps it below 576px. Restating style.css's
   intended behaviour here, hardened, keeps the homepage's footer icons
   identical to every other page instead of wrapping to a second line. */
.footer-social {
  flex-wrap: nowrap !important;
}

@media (max-width: 576px) {
  .footer-social {
    flex-wrap: wrap !important;
  }
}

/* ---- AI chatbot launcher/window ----
   Desktop & tablet (above 760px): LEFT side, clear of the fab-stack,
   matching the homepage. Without this, core.css (homepage only) flips
   it to the right at tablet widths, and style.css (every page) keeps
   it on the right always - both overridden here so every page matches.

   Small/mobile (760px and below): the fab-stack shrinks down to just
   the Pain & Movement Check button (see the max-width:760px rule
   above hiding .fab-whatsapp/.fab-call/.fab-book), so the chatbot
   moves to the RIGHT here too, stacked directly under that pain-check
   button and above the mobile sticky quick bar, instead of sitting
   alone on the opposite side. ---- */
.chatbot-launcher {
  left: 20px !important;
  right: auto !important;
  bottom: 20px !important;
  align-items: flex-start !important;
}

.chatbot-window {
  left: 20px !important;
  right: auto !important;
  bottom: 96px !important;
  transform-origin: bottom left !important;
}

@media (max-width: 760px) {
  .chatbot-launcher {
    left: auto !important;
    right: 16px !important;
    bottom: 96px !important;
    align-items: flex-end !important;
  }
  .chatbot-window {
    left: auto !important;
    right: 16px !important;
    bottom: 168px !important;
    transform-origin: bottom right !important;
  }
}

@media (max-width: 520px) {
  .chatbot-window {
    width: calc(100vw - 1.5rem) !important;
    left: auto !important;
    right: .75rem !important;
    bottom: 160px !important;
    max-height: 60vh !important;
  }
}