/* ============================================================
   3TN Osasco — Solicitação de certidões (wizard)
   Usa tokens + styles + servicos (svc-hero). Só nesta página.
   ============================================================ */

.wizard { max-width: 780px; margin: 0 auto; }

/* ---- Stepper (sequência de passos) ---- */
.stepper { display: flex; list-style: none; margin: 0 0 2rem; padding: 0; }
.stepper__item { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center; }
.stepper__item::before { content: ""; position: absolute; top: 16px; right: 50%; width: 100%; height: 2px; background: var(--border-default); z-index: 0; }
.stepper__item:first-child::before { display: none; }
.stepper__item.is-current::before, .stepper__item.is-done::before { background: var(--color-primary); }
.stepper__num { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; background: var(--surface-card); border: 2px solid var(--border-default); color: var(--text-muted); transition: all var(--dur-normal) var(--ease-standard); }
.stepper__item.is-current .stepper__num { border-color: var(--color-primary); color: var(--color-primary); background: var(--blue-50); }
.stepper__item.is-done .stepper__num { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.stepper__label { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.stepper__item.is-current .stepper__label { color: var(--text-strong); }
.stepper__item.is-done .stepper__label { color: var(--text-secondary); }

/* ---- Passos ---- */
.wizard__step { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.wizard__step[hidden] { display: none; }
.wizard__legend { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 700; color: var(--text-strong); padding: 0; margin-bottom: 0.4rem; }
.wizard__legend:focus { outline: none; }
.wizard__hint { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.5; margin: 0 0 1.4rem; }

/* Opções de tipo de certidão (radio cards) */
.cert-options { display: grid; gap: 0.75rem; }
.cert-option { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.15rem; background: var(--surface-raised); border: 1.5px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.cert-option:hover { border-color: var(--color-primary); }
.cert-option input { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--color-primary); flex: none; }
.cert-option:has(input:checked) { border-color: var(--color-primary); background: var(--blue-50); }
.cert-option__title { display: block; font-family: var(--font-body); font-weight: 600; color: var(--text-strong); }
.cert-option__desc { display: block; font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.1rem; }

/* Navegação do wizard */
.wizard__nav { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid var(--border-subtle); }
.wizard__nav .btn[hidden] { display: none; }
.wizard__nav [data-next], .wizard__nav [data-submit] { margin-left: auto; }

/* Revisão */
.review { display: flex; flex-direction: column; }
.review__row { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border-subtle); }
.review__row:first-child { padding-top: 0; }
.review__k { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-primary); }
.review__v { color: var(--text-body); white-space: pre-wrap; word-break: break-word; }
.review__empty { color: var(--text-muted); }
.wizard__note { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1.2rem; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }
.wizard__note [data-lucide] { color: var(--color-seal); margin-top: 1px; flex: none; }