/* ============================================================
   Section 17 — Sticky mobile "Call | Book Now" bar
   Fixed bottom, mobile-only (<=820px). Sits below the nav's mobile
   overlay (z-index 199/210) and above ordinary content.
   All selectors scoped under .sec-17-mobilebar.
   ============================================================ */

.sec-17-mobilebar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 180;
  align-items: flex-start;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid hsl(0 0% 100% / 0.12);
  transform: translateY(110%);
  transition: transform 400ms var(--ease-out);
  font-family: var(--font-body);
}

@media (max-width: 820px) {
  .sec-17-mobilebar {
    display: flex;
  }
}

/* Slide up once the page has finished its load orchestration */
html.is-loaded .sec-17-mobilebar {
  transform: translateY(0);
}

/* Hidden while #booking is substantially in view, or while the nav's
   mobile overlay is open (state read via body.sec-01-nav-lock). */
html.is-loaded .sec-17-mobilebar.is-hidden {
  transform: translateY(110%);
}

html.reduced-motion .sec-17-mobilebar,
html.reduced-motion .sec-17-mobilebar.is-hidden {
  transition: none;
}

.sec-17-mobilebar__call,
.sec-17-mobilebar__book {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 56px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: filter 150ms var(--ease-out);
}

.sec-17-mobilebar__call:active,
.sec-17-mobilebar__book:active {
  filter: brightness(0.92);
}

/* Left half: dark ink-glass */
.sec-17-mobilebar__call {
  background: hsl(200 35% 8% / 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--text-on-ink);
}

.sec-17-mobilebar__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Right half: solid accent */
.sec-17-mobilebar__book {
  background: var(--accent);
  color: var(--accent-on);
}

/* Staszak: the primary CTA ("Request an Appointment") is longer than the template's
   "Book Now". Give it the wider share of the bar with side padding so it never
   touches the edges at 360-390px; Call keeps a comfortable tap target. */
.sec-17-mobilebar .sec-17-mobilebar__call { flex: 0 0 34%; }
.sec-17-mobilebar .sec-17-mobilebar__book { flex: 1 1 66%; padding-inline: 0.75rem; font-size: 0.9rem; white-space: nowrap; }