/* ─── MOBILE CTA BAR — PHASE 3 ─────────────────────────────────────
   Fixed bottom action bar · mobile only (≤900px)
   No scroll listeners · IntersectionObserver hide/show
   Phase 1 + Phase 2 files untouched
──────────────────────────────────────────────────────────────────── */

/* Desktop: bar never visible, no body padding */
.mobile-cta-bar { display: none; }

@media (max-width: 900px) {

  /* Body padding so content is never obscured by the 60px bar */
  body { padding-bottom: 68px; }

  /* ── BAR BASE ── */
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(27, 23, 19, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    align-items: center;
    padding: 0 12px;
    gap: 6px;
    z-index: 150;
    /* Hidden by default — slides up via JS */
    transform: translateY(100%);
  }

  /* Entrance animation class — added by JS before .bar-visible */
  .mobile-cta-bar.bar-animated {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Visible state */
  .mobile-cta-bar.bar-visible {
    transform: translateY(0);
  }

  /* Reduced motion: no transition even if .bar-animated is present */
  @media (prefers-reduced-motion: reduce) {
    .mobile-cta-bar.bar-animated {
      transition: none !important;
    }
  }

  /* ── SHARED BUTTON BASE ── */
  .cta-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    background: none;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, transform 0.1s;
  }

  /* ── GHOST (Call · Text) ── */
  .cta-bar-btn--ghost {
    color: rgba(244, 230, 211, 0.82);
    padding: 0 14px;
  }

  .cta-bar-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cream);
  }

  .cta-bar-btn--ghost:active { transform: scale(0.97); }

  /* ── PRIMARY (Get Estimate) ── */
  .cta-bar-btn--primary {
    flex: 1;
    background: var(--gold);
    color: var(--charcoal);
    padding: 0 16px;
    font-size: 14.5px;
    flex-shrink: 1;
  }

  .cta-bar-btn--primary:hover  { background: var(--gold-lt); }
  .cta-bar-btn--primary:active { transform: scale(0.97); }

  /* ── DIVIDER between ghost buttons ── */
  .cta-bar-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
  }

}