/*
  Step Form — estilos do padrão de formulário multi-etapas do site Mosh.
  Usar junto de js/step-form.js. Depende das CSS vars de design system
  já definidas no :root de cada página (--bg, --surface, --ink, --muted,
  --hair, --lime, --magenta, --font-display, --font-body, --fw-display).

  Contrato de HTML: ver comentário no topo de js/step-form.js.
*/

.step-progress{height:4px;background:var(--hair);margin-bottom:10px;overflow:hidden}
.step-progress__bar{height:100%;width:0%;background:var(--lime);transition:width .3s ease}
.step-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:40px}

.step{display:none}
.step.is-active{display:block;animation:step-in .3s ease}
@keyframes step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.step__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:30px;text-transform:uppercase;color:var(--lime);margin-bottom:32px}

.step-nav{display:flex;align-items:center;gap:14px;margin-top:8px}

.field{margin-bottom:36px}
fieldset.field{border:0;padding:0}
.field label,.field legend{display:block;font-size:17px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:14px;padding:0}
.field .req{color:var(--magenta);margin-left:4px}
.field input[type=text],.field input[type=number],.field input[type=email],.field input[type=tel],.field textarea{width:100%;background:var(--surface);border:2px solid var(--hair);color:var(--ink);font-family:var(--font-body);font-size:16px;padding:16px;transition:border-color .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--lime)}
.field textarea{resize:vertical;min-height:96px;line-height:1.5;font-family:var(--font-body)}
.field--split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:0}
.field--split .sub label{font-size:15px}
@media(max-width:560px){.field--split{grid-template-columns:1fr;gap:36px}}

.choice-group{display:flex;flex-wrap:wrap;gap:10px}
.choice{position:relative;display:inline-flex}
.choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.choice span{display:inline-block;padding:13px 22px;border:2px solid var(--hair);background:var(--surface);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:all .2s;pointer-events:none}
.choice input:focus-visible + span{outline:2px solid var(--lime);outline-offset:2px}
.choice input:checked + span{background:var(--lime);border-color:var(--lime);color:var(--bg)}

.conditional-field{margin-top:14px;max-width:340px;display:none}
.conditional-field.is-visible{display:block}

.step-form__note{font-size:13px;color:var(--muted);margin-top:16px}

.success{display:none;max-width:640px;padding:48px;background:var(--surface);border-left:4px solid var(--lime)}
.success.is-visible{display:block}
.success h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:36px;text-transform:uppercase;color:var(--lime);margin-bottom:20px}
.success p{font-size:17px;line-height:1.6;color:var(--muted);margin-bottom:12px}
.success p:last-child{margin-bottom:0}