/* Sarah — estilo do formulário. Sem fontes ou recursos remotos. */
:root {
  --sz-bg: #f3f6f5;
  --sz-card: #ffffff;
  --sz-text: #1f2933;
  --sz-muted: #52606d;
  --sz-border: #d7e2dc;
  --sz-accent: #0f766e;
  --sz-accent-dark: #0b5a54;
  --sz-accent-soft: #edf8f4;
  --sz-error: #b42318;
  --sz-focus: #1d4ed8;
  --sz-yes: #146c35;
  --sz-yes-line: #35b86a;
  --sz-yes-soft: #effbf3;
  --sz-yes-fill: #15803d;
  --sz-no: #a11a1a;
  --sz-no-line: #ec5b5b;
  --sz-no-soft: #fff2f2;
  --sz-no-fill: #dc2626;
  --sz-arrow: #73808d;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sz-bg);
  color: var(--sz-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.sz-shell { max-width: 40rem; margin: 0 auto; padding: 24px 16px 40px; }
.sz-card {
  background: var(--sz-card);
  border: 1px solid var(--sz-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  padding: 24px 20px;
}
.sz-field { margin: 0; }
.sz-field + .sz-field { margin-top: 18px; }
.sz-label { font-size: 1.125rem; font-weight: 600; margin: 0 0 8px; overflow-wrap: anywhere; }
.sz-field-text .sz-label { font-size: 1rem; margin-bottom: 8px; }
.sz-label-html { display: inline; }
.sz-label-html > div { display: block; }
.sz-req { color: var(--sz-error); margin-left: 4px; }
.sz-hint { color: var(--sz-muted); margin: 0 0 14px; font-size: .9375rem; }

/* Respostas: Sim (verde) e Não (vermelho) lado a lado; outras escolhas empilhadas. */
.sz-choices { display: grid; gap: 10px; margin: 16px 0 4px; }
.sz-choices.sz-yesno { grid-template-columns: 1fr 1fr; gap: 12px; }
.sz-choice {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 12px 14px;
  border: 2px solid var(--sz-border); border-radius: 14px;
  background: #fff; cursor: pointer; line-height: 1.3;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .1s ease;
}
.sz-choice:hover { border-color: var(--sz-accent); }
.sz-choice:active { transform: scale(.98); }
.sz-choice.is-checked { border-color: var(--sz-accent); background: var(--sz-accent-soft); font-weight: 700; }
.sz-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sz-choice:has(input:focus-visible) { outline: 3px solid var(--sz-focus); outline-offset: 2px; }
@supports not selector(:has(*)) {
  .sz-choice:focus-within { outline: 3px solid var(--sz-focus); outline-offset: 2px; }
}
.sz-choice-text { overflow-wrap: anywhere; }
.sz-choice-mark { flex: 0 0 auto; font-size: 1.15em; line-height: 1; }
.sz-yesno .sz-choice { justify-content: center; min-height: 64px; padding: 12px 10px; font-size: 1.1875rem; font-weight: 700; }
.sz-choice.sz-yes { border-color: var(--sz-yes-line); background: var(--sz-yes-soft); color: var(--sz-yes); }
.sz-choice.sz-yes:hover { background: #def6e6; }
.sz-choice.sz-yes.is-checked { border-color: var(--sz-yes-fill); background: var(--sz-yes-fill); color: #fff; }
.sz-choice.sz-no { border-color: var(--sz-no-line); background: var(--sz-no-soft); color: var(--sz-no); }
.sz-choice.sz-no:hover { background: #ffe3e3; }
.sz-choice.sz-no.is-checked { border-color: var(--sz-no-fill); background: var(--sz-no-fill); color: #fff; }

.sz-input-wrap { margin: 0; }
.sz-input-wrap input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; color: inherit;
  border: 1.5px solid var(--sz-border); border-radius: 12px; background: #fff;
}
.sz-input-wrap input:focus { outline: 3px solid var(--sz-focus); outline-offset: 2px; border-color: var(--sz-accent); }
[aria-invalid="true"] .sz-choice, .sz-input-wrap input[aria-invalid="true"] { border-color: var(--sz-error); }
.sz-error { color: var(--sz-error); font-weight: 600; margin: 8px 0 0; }
.sz-error[hidden] { display: none; }

/* Navegação: setas discretas; no último passo, Voltar à esquerda e o botão de envio à direita. */
.sz-nav { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.sz-arrow {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 48px; height: 48px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--sz-arrow);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sz-arrow svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sz-arrow:hover { color: var(--sz-text); background: rgba(0, 0, 0, .04); }
.sz-arrow:focus-visible, .sz-cta:focus-visible { outline: 3px solid var(--sz-focus); outline-offset: 2px; }
.sz-arrow[hidden], .sz-cta[hidden] { display: none; }
.sz-arrow:disabled { opacity: .4; cursor: progress; }
.sz-nav .sz-next { margin-left: auto; }
.sz-cta {
  position: relative; overflow: hidden; flex: 1 1 auto; min-width: 0;
  min-height: 56px; margin: 0; padding: 12px 16px;
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #2bd46c 0%, #1fbe5c 45%, #128c4a 100%);
  color: #fff; font: inherit; font-size: 1.0625rem; font-weight: 800; line-height: 1.15;
  letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  box-shadow: 0 6px 18px rgba(37, 211, 102, .45);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: sz-cta-glow 2s ease-in-out infinite;
}
.sz-cta::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 45%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg); pointer-events: none;
  animation: sz-cta-shine 2.8s ease-in-out infinite;
}
.sz-cta:hover { filter: brightness(1.05); }
.sz-cta:active { transform: scale(.98); }
.sz-cta:disabled { opacity: .7; cursor: progress; animation: none; }
.sz-cta:disabled::after { animation: none; display: none; }
@keyframes sz-cta-shine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes sz-cta-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, .55); }
  50% { box-shadow: 0 6px 22px rgba(37, 211, 102, .6), 0 0 0 8px rgba(37, 211, 102, 0); }
}

/* "Tentar novamente" na recuperação do recibo. */
.sz-retry {
  flex: 1 1 auto; min-height: 52px; margin: 0; padding: 12px 16px;
  border: 1.5px solid var(--sz-accent); border-radius: 12px;
  background: var(--sz-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.sz-retry:hover { background: var(--sz-accent-dark); border-color: var(--sz-accent-dark); }
.sz-retry:focus-visible { outline: 3px solid var(--sz-focus); outline-offset: 2px; }
.sz-retry:disabled { opacity: .6; cursor: progress; }

/* Link "Continuar" do resultado recuperado. */
.sz-btn {
  display: inline-block; min-height: 52px; padding: 12px 18px;
  font: inherit; font-weight: 700; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--sz-accent);
}
.sz-btn.sz-next { background: var(--sz-accent); color: #fff; }
.sz-btn.sz-next:hover { background: var(--sz-accent-dark); border-color: var(--sz-accent-dark); }
.sz-btn:focus-visible { outline: 3px solid var(--sz-focus); outline-offset: 2px; }
.sz-result { text-align: center; }
.sz-result:focus { outline: none; }
.sz-splash { font-size: 1.125rem; font-weight: 600; margin: 0; }
.sz-fatal { color: var(--sz-error); font-weight: 600; }
.sz-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 480px) {
  .sz-shell { padding: 12px 10px 28px; }
  .sz-card { padding: 20px 16px; border-radius: 12px; }
  .sz-cta { font-size: 1rem; letter-spacing: 0; padding: 12px; }
}
@media (max-width: 340px) {
  .sz-yesno .sz-choice { font-size: 1.0625rem; min-height: 58px; }
  .sz-cta { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sz-choice, .sz-cta { transition: none; animation: none; }
  .sz-cta::after { animation: none; display: none; }
}
@media (forced-colors: active) {
  .sz-choice.is-checked { outline: 2px solid CanvasText; }
}