/* ════════════════════════════════════════════════════════
   Sticky mobile CTA bar — Dr Nicky Grant site
   Mobile-only (<=768px) · appears after first screen · dismissible
   Colours are literal (not themed vars) on purpose: polish.css remaps
   several main.css tokens (notably --s1/--s2) to light "paper" values
   for card contexts, so a fixed, body-level bar can't safely borrow
   them. --hr2/--gold/--t1/--t3 are still safe (see polish.css :root)
   and are used with literal fallbacks matching the true 2026-06-16
   design system (teal --bg, copper --cu1/--cu2, on-ink/on-mut/on-faint).
   ════════════════════════════════════════════════════════ */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.9rem;
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 38, 39, 0.88);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--hr2, rgba(245,242,236,0.24));
  box-shadow: 0 -10px 30px rgba(0,0,0,0.35);
  transform: translateY(112%);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.sticky-cta.is-visible { transform: translateY(0); }

.sticky-cta-close {
  position: absolute;
  top: -14px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(8, 38, 39, 0.92);
  border: 1px solid var(--hr2, rgba(245,242,236,0.24));
  color: var(--t3, #AABDC3);
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.sticky-cta-close:active,
.sticky-cta-close:hover { color: var(--t1, #F5F2EC); }

.sticky-cta-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.sticky-cta-eyebrow {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--t1, #F5F2EC);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-cta-sub {
  font-size: 0.66rem;
  color: var(--t3, #AABDC3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.12rem;
}

.sticky-cta-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}
.sticky-cta-call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--hr2, rgba(245,242,236,0.24));
  border-radius: 3px;
  color: var(--t2, #C9D6DA);
  flex: 0 0 auto;
  transition: border-color 0.2s, color 0.2s;
}
.sticky-cta-call:active,
.sticky-cta-call:hover { border-color: var(--gold, #ECC988); color: var(--gold, #ECC988); }

.sticky-cta-book.btn.btn-fill {
  padding: 0.62rem 1.05rem;
  font-size: 0.62rem;
  min-height: 40px;
  white-space: nowrap;
}

/* Hide entirely on tablet/desktop — this is a mobile-only pattern */
@media (min-width: 769px) {
  .sticky-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* Keep the floating chat launcher (js/chat.js, #ngchat) clear of this bar when it's showing.
   --sticky-cta-h is set by js/sticky-cta.js to the bar's real rendered height (0px when hidden). */
@media (max-width: 768px) {
  #ngchat {
    bottom: calc(clamp(14px, 4vw, 26px) + var(--sticky-cta-h, 0px)) !important;
    transition: bottom 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  }
}