/*
 * sticky-cta.css — mobile-only bottom action bar.
 *
 * WHY (audit 2026-08-16): the site header is `position: relative`, not sticky,
 * so it scrolls away and takes the only "Call Now" button with it. On /pricing/
 * that left 1,681 of 1,878 visible words — roughly 35 mobile screens — with no
 * call to action on screen at all. The page is the most-cited VTQ page in
 * ChatGPT answers, all of that traffic is mobile, and it had converted nobody.
 *
 * Self-contained plain CSS, matching lead-form.css: css/output.css is a
 * PREBUILT Tailwind bundle, so utility classes not already used elsewhere on
 * the site are absent from it and silently do nothing.
 *
 * MOBILE ONLY. Desktop keeps the in-page CTAs — a fixed bar there covers
 * content for no gain.
 */

.vtq-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60; /* above content; the nav is z-50 but scrolls away anyway */
  display: none; /* mobile query turns it on */
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.vtq-sticky-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 48px; /* >=44px: Apple's minimum tap target */
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vtq-sticky-cta a:active { transform: translateY(1px); }

/* Primary: back to the form. The highest-value action on a page whose whole
   job is turning a read price into a submitted job. */
.vtq-sticky-cta__quote {
  flex: 1 1 auto;
  background: #a3e635;
  color: #1a1a1a;
  box-shadow: 0 4px 16px rgba(163, 230, 53, 0.35);
}

/* Secondary: call. Same tel: href as every other CTA, so pipeline/tracker.js
   picks it up through its delegated document click listener — no new binding,
   and the phone conversion fires exactly as it does from the nav. */
.vtq-sticky-cta__call {
  flex: 0 0 auto;
  padding: 0 18px;
  background: #1a1a1a;
  color: #ffffff;
}

.vtq-sticky-cta__wa {
  flex: 0 0 auto;
  width: 48px;
  background: #25d366;
  color: #ffffff;
}

.vtq-sticky-cta svg { width: 19px; height: 19px; flex: none; }

@media (max-width: 767px) {
  .vtq-sticky-cta { display: flex; }
  /* Stop the bar covering the footer's last line at the end of the page. */
  body.has-sticky-cta { padding-bottom: 76px; }
}

/* ⚠️ DELIBERATELY NO prefers-color-scheme QUERY.
 *
 * tailwind.config.js sets darkMode:"class" and nothing on the site ever adds a
 * `.dark` class, so every `dark:` utility in the markup is inert and the site
 * renders light for everyone. An OS-preference query here made this bar the
 * ONE element on the page that answered to system dark mode — caught in the
 * mobile screenshot on 2026-08-16: a dark bar pinned under a white page.
 *
 * These class rules stay so the bar follows automatically IF the dark toggle is
 * ever switched on, without reintroducing the mismatch today. */
.dark .vtq-sticky-cta {
  background: rgba(17, 17, 17, 0.92);
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
.dark .vtq-sticky-cta__call { background: #ffffff; color: #1a1a1a; }

@media (prefers-reduced-motion: reduce) {
  .vtq-sticky-cta a { transition: none; }
}