/* ── Funnel progress stepper ────────────────────────────────────────────
   4-step indicator shown at the top of every customer-facing page:
   Login → Pet Details → Plan & Pay → Done.

   Self-contained: uses literal hex fallbacks alongside CSS variables so the
   stepper renders correctly on index.html (which doesn't pull in theme.css).
*/
.funnel-progress {
  width: 100%;
  padding: 0.95rem 0.9rem 0.35rem;
  background: transparent;
}
.funnel-progress ol {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 720px;
  position: relative;
}
.funnel-progress li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  position: relative;
  color: rgba(232, 244, 243, 0.55);   /* var(--text-muted) */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}
/* Connector line between consecutive steps. Drawn behind the dots. */
.funnel-progress li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 3px;
  background: rgba(232, 244, 243, 0.16);
  z-index: 0;
}
.funnel-progress .step-dot {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 229, 212, 0.08);
  border: 2px solid rgba(0, 229, 212, 0.30);
  color: rgba(232, 244, 243, 0.55);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1;
}
.funnel-progress .step-label {
  font-size: 11px;
  line-height: 1.2;
}

/* ── COMPLETED steps (all li before the active one) ──────────────────── */
.funnel-progress[data-step="2"] li:nth-child(-n+1) .step-dot,
.funnel-progress[data-step="3"] li:nth-child(-n+2) .step-dot,
.funnel-progress[data-step="4"] li:nth-child(-n+3) .step-dot {
  background: #00e5d4;
  border-color: #00e5d4;
  color: #0a1628;
}
.funnel-progress[data-step="2"] li:nth-child(-n+1),
.funnel-progress[data-step="3"] li:nth-child(-n+2),
.funnel-progress[data-step="4"] li:nth-child(-n+3) {
  color: #00e5d4;
}
/* Fill the connector line for completed transitions. */
.funnel-progress[data-step="2"] li:nth-child(1)::after,
.funnel-progress[data-step="3"] li:nth-child(-n+2)::after,
.funnel-progress[data-step="4"] li:nth-child(-n+3)::after {
  background: #00e5d4;
}

/* ── ACTIVE step (the page the user is on) ───────────────────────────── */
.funnel-progress[data-step="1"] li:nth-child(1) .step-dot,
.funnel-progress[data-step="2"] li:nth-child(2) .step-dot,
.funnel-progress[data-step="3"] li:nth-child(3) .step-dot {
  background: #00e5d4;
  border-color: #00e5d4;
  color: #0a1628;
  box-shadow: 0 0 0 4px rgba(0, 229, 212, 0.22);
}
.funnel-progress[data-step="1"] li:nth-child(1),
.funnel-progress[data-step="2"] li:nth-child(2),
.funnel-progress[data-step="3"] li:nth-child(3) {
  color: #ffffff;
}

/* ── DONE state (thank-you page) — last dot in success green ─────────── */
.funnel-progress[data-step="4"] li:nth-child(4) .step-dot {
  background: #4adea2;
  border-color: #4adea2;
  color: #0a1628;
  box-shadow: 0 0 0 4px rgba(74, 222, 162, 0.25);
}
.funnel-progress[data-step="4"] li:nth-child(4) {
  color: #4adea2;
}

/* ── Mobile sizing ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .funnel-progress { padding: 0.7rem 0.5rem 0.25rem; }
  .funnel-progress .step-label { font-size: 10px; letter-spacing: 0.02em; }
  .funnel-progress .step-dot { width: 24px; height: 24px; font-size: 11px; }
  .funnel-progress li:not(:last-child)::after {
    top: 11px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
  }
}