/* ============================================================
   REFERRAL WIZARD — full-screen modal, 4-step form

   ============================================================ */
.sh-wizard {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.55);
  padding: 1.5rem;
}

.sh-wizard[hidden] { display: none; }

.sh-wizard__frame {
  position: relative;
  max-width: 68rem;
  margin: 0 auto;
  border-radius: 2rem;
  /* Deep-blue canvas sits between the two brand anchors */
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--color-primary) 24%, var(--color-secondary)) 0%, var(--color-secondary) 55%),
    var(--color-secondary);
  padding: 2rem 2.5rem 3rem;
  overflow: hidden;
}

/* Topographic contour pattern. */

/* Keep the modal's content above the pattern */
.sh-wizard__frame > * {
  position: relative;
  z-index: 1;
}

.sh-wizard__close {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem 0.5rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 500;
  transition: var(--transition-base);
}

.sh-wizard__close:hover { background: rgba(255, 255, 255, 0.1); }

.sh-wizard__close-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.sh-wizard__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.sh-wizard__card {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: 1.5rem;
  padding: 2rem 2rem 2.5rem;
}

/* Transparent by design: the embedded form paints its own background,
   so any surface colour here shows as a white gutter whenever the
   iframe renders narrower than this container. */
.sh-wizard__embed {
  position: relative;
  margin: 0 auto;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}

/* Own copy of the loading-state toggle, independent of the Intake page's identical-looking rule — the two wrappers no longer share a class, on purpose, so a change to one can never leak into the other. */
.sh-wizard__embed.is-loaded .sh-intake-form__embed { opacity: 1; }
.sh-wizard__embed.is-loaded { min-height: 0; }

/* Kills the inline-element baseline gap under the iframe. */
.sh-wizard__embed iframe {
  display: block;
  border: 0;
}

/* ── Step indicator ─────────────────────────────────────────── */
.sh-wizard__steps {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.75rem;
  overflow-x: auto;
}

.sh-wizard__step {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
}

/* Connector line between steps */
.sh-wizard__step + .sh-wizard__step::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--color-border);
  margin-right: 0.75rem;
}

.sh-wizard__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #ececf0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.sh-wizard__step-label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-gray-light);
}

.sh-wizard__step.is-current .sh-wizard__step-num,
.sh-wizard__step.is-done .sh-wizard__step-num {
  background: var(--color-primary);
  color: #fff;
}

.sh-wizard__step.is-current .sh-wizard__step-label,
.sh-wizard__step.is-done .sh-wizard__step-label {
  color: var(--color-heading);
  font-weight: 700;
}

.sh-wizard__step.is-done .sh-wizard__step-label { color: var(--color-primary); font-weight: 600; }

/* ── Success banner ─────────────────────────────────────────── */
.sh-wizard__success {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, white);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-primary) 8%, white);
  color: var(--color-blue-deep);
  font-size: var(--text-base);
  font-weight: 500;
}

.sh-wizard__success[hidden] { display: none; }
.sh-wizard__success button { color: var(--color-muted); display: flex; }

/* ── Panels & fields ────────────────────────────────────────── */
.sh-wizard__panel { border: 0; }
.sh-wizard__panel[hidden] { display: none; }

.sh-wizard__panel-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-blue-deep);
  margin-bottom: 0.375rem;
}

.sh-wizard__panel-sub {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-heading-dark);
  margin-bottom: 1.5rem;
}

.sh-wizard__panel-sub--em { font-style: italic; }

.sh-wiz-req { color: var(--color-red); }

.sh-wiz-field { margin-bottom: 1.25rem; }

.sh-wiz-field label,
.sh-wiz-group-label {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-blue-deep);
  margin-bottom: 0.5rem;
}

.sh-wiz-field input,
.sh-wiz-field textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.625rem;
}

.sh-wiz-field select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: var(--transition-base);
}

.sh-wiz-field input::placeholder,
.sh-wiz-field textarea::placeholder { color: var(--color-placeholder); }

.sh-wiz-field input:focus,
.sh-wiz-field select:focus,
.sh-wiz-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.sh-wiz-field select:invalid { color: var(--color-placeholder); }

.sh-wiz-field.is-invalid input,
.sh-wiz-field.is-invalid select,
.sh-wiz-field.is-invalid textarea { border-color: var(--color-red); }

.sh-wiz-field--group.is-invalid .sh-wiz-group-label { color: var(--color-red); }

.sh-wiz-grid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.sh-wiz-grid3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Checkbox rows */
.sh-wiz-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.875rem;
}

.sh-wiz-checks label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 0;
  cursor: pointer;
}

.sh-wiz-checks input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary);
}

/* Pill checkboxes (Presenting Needs) */
.sh-wiz-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sh-wiz-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--color-border-chip);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-blue-deep);
  cursor: pointer;
  transition: var(--transition-base);
  margin-bottom: 0 !important;
}

.sh-wiz-pill input { position: absolute; opacity: 0; pointer-events: none; }

.sh-wiz-pill__check {
  display: none;
  align-items: center;
  justify-content: center;
}

.sh-wiz-pill:has(input:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.sh-wiz-pill:has(input:checked) .sh-wiz-pill__check { display: flex; }

/* Radio cards (Urgency) */
.sh-wiz-radios {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sh-wiz-radio {
  display: flex !important;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  cursor: pointer;
  margin-bottom: 0 !important;
  transition: var(--transition-base);
}

.sh-wiz-radio input { position: absolute; opacity: 0; pointer-events: none; }

.sh-wiz-radio__dot {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--color-gray-light);
  border-radius: 50%;
  margin-top: 0.125rem;
  flex-shrink: 0;
  transition: var(--transition-base);
}

.sh-wiz-radio:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, white);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.sh-wiz-radio:has(input:checked) .sh-wiz-radio__dot {
  border-color: var(--color-primary);
  border-width: 5px;
}

.sh-wiz-radio__text { display: flex; flex-direction: column; gap: 0.125rem; }
.sh-wiz-radio__text strong { font-size: var(--text-base); font-weight: 600; color: var(--color-heading-dark); }
.sh-wiz-radio__text small { font-size: var(--text-sm); color: var(--color-muted); }

/* ── Navigation ─────────────────────────────────────────────── */
.sh-wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.sh-wizard__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-heading-dark);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 600;
  transition: var(--transition-base);
}

.sh-wizard__back:disabled {
  background: transparent;
  color: var(--color-gray-light);
  cursor: default;
}

.sh-wizard__next {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 600;
  transition: var(--transition-base);
}

.sh-wizard__next:hover { background: var(--color-primary-hover); }

/* ── Submitting state ───────────────────────────────────────── */
.sh-wizard__card.is-submitting .sh-wizard__form,
.sh-wizard__card.is-submitting .sh-wizard__steps {
  filter: blur(3px);
  pointer-events: none;
}

.sh-wizard__spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sh-wizard__spinner[hidden] { display: none; }

.sh-wizard__spinner-ring {
  width: 3.5rem;
  height: 3.5rem;
  border: 4px dashed color-mix(in srgb, var(--color-primary) 35%, white);
  border-top: 4px solid var(--color-primary);
  border-radius: 50%;
  animation: sh-wiz-spin 1s linear infinite;
}

@keyframes sh-wiz-spin {
  to { transform: rotate(360deg); }
}

/* Body lock while the modal is open */
body.sh-wizard-open { overflow: hidden; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sh-wizard { padding: 0.75rem; }
  .sh-wizard__frame { padding: 1.25rem 1rem 2rem; border-radius: 1.25rem; }
  .sh-wizard__title { margin-top: 4rem; }
  .sh-wizard__card { padding: 1.25rem 1rem 1.75rem; }
  .sh-wiz-grid2, .sh-wiz-grid3 { grid-template-columns: 1fr; gap: 0; }
  .sh-wizard__step-label { display: none; }
  .sh-wizard__step.is-current .sh-wizard__step-label { display: inline; }
}

/* ── Inline referral form ───────────────────────────────────── Lives here, not in sections.css:.sh-wizard's own `position:fixed` is declared in this file, and a same-specificity rule in an earlier-loading sheet loses to it. */
.sh-wizard--inline {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  overflow: visible;
  background: var(--color-bg);
  padding: 4.5rem var(--gutter) 5.5rem;
}

.sh-wizard--inline .sh-wizard__frame {
  max-width: 45rem;
  background: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

/* On the page the heading is the section's own, so it takes the page's
   heading colour rather than the reversed-out one the modal needs
   against its deep-blue canvas. */
.sh-wizard--inline .sh-wizard__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 500;
  color: var(--color-heading);
  text-align: center;
  margin-bottom: 1.25rem;
}

.sh-wizard--inline .sh-emergency { margin-bottom: 1.75rem; }