/* ============================================================
   ROZOR popup — keyframes + Tailwind escape hatches.

   Visual styling lives inline as Tailwind classes in
   template-parts/popup-lead-capture.php. This file only handles:
     1. FOUC-pending state to keep popup hidden until popup.js is ready
     2. Mobile bottom-sheet positioning (media query Tailwind can't
        cleanly express across multiple cascading classes)
     3. Segmentation button micro-interactions Tailwind doesn't cover
     4. prefers-reduced-motion overrides that kill the micro-interactions

   Living reference: notes/popup_lead_capture.txt §2
   Design spec:      docs/superpowers/specs/2026-05-12-popup-lead-capture-design.md §4
   ============================================================ */

/* FOUC-pending: hide popup until popup.js boots + matchMedia is ready.
   popup.js removes this class on the root when it actually shows the popup. */
.rozor-popup-pending {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ============================================================
   Mando chatbot suppression while popup is active
   ============================================================
   Mando's launcher (#mando-cs-app, z-index: 2147483647) sits above
   everything — including our popup backdrop. To prevent the launcher
   bubble from overlapping the popup card and blocking interaction,
   hide Mando whenever the popup root is in its visible state (i.e.
   no longer carrying .rozor-popup-pending). When the user dismisses
   the popup, .rozor-popup-pending is re-added and Mando reappears.

   :has() is supported in Chrome 105+, Safari 15.4+, Firefox 121+ —
   well within our target browser matrix. */
body:has(.rozor-popup-root:not(.rozor-popup-pending)) #mando-cs-app {
  display: none !important;
}

/* ============================================================
   Mobile bottom sheet (≤768px)
   ============================================================ */

@media (max-width: 768px) {
  .rozor-popup-root {
    /* Override flex centering — slide-up from bottom */
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .rozor-popup-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    margin-bottom: 0 !important;
    /* Room for the drag handle at the top edge */
    padding-top: 1.75rem !important;
  }
  /* Step 1 segmentation grid — taller card to fit 6 stacked buttons */
  .rozor-popup-card-primary {
    max-height: 88vh;
    overflow-y: auto;
  }
  /* Step 2 form + step 3 success — shorter card, less to display */
  .rozor-popup-card-primary[data-step="2"],
  .rozor-popup-card-primary[data-step="3"],
  .rozor-popup-card-exit {
    max-height: 75vh;
    overflow-y: auto;
  }
  .rozor-popup-drag-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 4px;
    border-radius: 9999px;
    background: rgba(28, 30, 16, 0.15);
    z-index: 1;
  }
}

@media (min-width: 769px) {
  .rozor-popup-drag-handle { display: none; }
}

/* ============================================================
   Segmentation button micro-interaction
   ============================================================ */

.rozor-popup-segment {
  transition: transform 0.18s ease-out, border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}
.rozor-popup-segment:hover {
  transform: scale(1.01);
}
.rozor-popup-segment:active {
  transform: scale(0.99);
}

/* ============================================================
   Reduced-motion overrides
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .rozor-popup-segment,
  .rozor-popup-close,
  .rozor-popup-cta,
  .rozor-popup-cta-ghost {
    transition: none !important;
  }
  .rozor-popup-segment:hover,
  .rozor-popup-segment:active {
    transform: none !important;
  }
}