/* certificadodigitalsp.org — fluxo de compra: /escolher-certificado/ e /checkout/.
 *
 * Carregado SÓ nessas duas páginas (gerar.mjs → pg.css). As outras 50 não
 * pagam estes bytes por uma tela de formulário que não têm.
 *
 * Usa os mesmos tokens de base.css. Nenhum hex literal aqui: cor nova entra
 * como token lá, senão o checar-contraste.mjs não a enxerga.
 */

/* ======================================================== wizard ========= */

.escolha { list-style: none; display: grid; gap: var(--e4); }

.etapa__bloco { border: 0; padding: 0; margin: 0; min-width: 0; }

.etapa__cabeca {
  display: flex; align-items: center; gap: var(--e2);
  padding: 0; margin-bottom: var(--e3);
}

/* Numeral e visto ocupam a MESMA célula da grade: a troca não muda o layout,
 * então marcar a etapa não empurra nada na tela. */
.etapa__num {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; flex: 0 0 auto;
  border-radius: var(--raio-pill);
  background: var(--c-marca); color: var(--c-btn-texto);
  font-weight: 700; font-size: 0.9375rem;
}
.etapa__num > * { grid-area: 1 / 1; }
.etapa__visto { width: 1.125rem; height: 1.125rem; display: none; }
.etapa__titulo { font-size: 1.25rem; margin: 0; }

.opcoes {
  display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 17rem), 1fr));
}

.opcao {
  position: relative; display: grid; gap: var(--e1);
  padding: var(--e3);
  border: 2px solid var(--c-borda); border-radius: var(--raio);
  background: var(--c-papel); color: inherit; text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.opcao:hover { border-color: var(--c-marca); box-shadow: var(--sombra-alta); transform: translateY(-2px); }

/* O radio real fica visível para o teclado e para o leitor de tela, mas fora
 * do fluxo visual — o estado é comunicado pela borda do cartão inteiro.
 * `appearance: none` sem isto deixaria o foco invisível. */
.opcao__radio { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opcao__radio:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 2px; }
.opcao:has(.opcao__radio:checked) { border-color: var(--c-marca); box-shadow: var(--sombra-alta); }

.opcao__icone { display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--raio-p); background: var(--c-nevoa); color: var(--c-marca-escura); }
.opcao__icone svg { width: 1.375rem; height: 1.375rem; }
.opcao__nome { font-weight: 700; font-size: 1.0625rem; }
.opcao__nota { color: var(--c-prosa); font-size: 0.9375rem; line-height: 1.5; }
.opcao .badge { justify-self: start; }

.opcao__preco { display: flex; align-items: baseline; gap: var(--e1); flex-wrap: wrap; margin-top: var(--e1); }
.opcao__preco--consulta { color: var(--c-prosa); font-size: 0.9375rem; font-style: italic; }

.opcao__ir { display: inline-flex; align-items: center; gap: 0.375rem;
  margin-top: var(--e1); font-weight: 600; color: var(--c-marca); }
.opcao__seta { width: 1.0625rem; height: 1.0625rem; transition: transform .15s ease; }
.opcao--saida:hover .opcao__seta { transform: translateX(3px); }

.etapa__estado { color: var(--c-prosa); margin-bottom: var(--e2); font-size: 0.9375rem; }
.escolha__pe { margin-top: var(--e3); }

/* --- progressivo, sem uma linha de JS -------------------------------------
 * O passo 2 já está no DOM (nada aparece do nada, CLS 0); o que muda é o que
 * está visível. Quem manda é o :checked do passo 1, lido por :has() lá de cima.
 * Fallback logo abaixo para navegador sem :has(). */
.etapa--2 .opcoes { display: none; }
.estado--pj, .estado--pf { display: none; }

.escolha:has(#titular-pj:checked) .opcoes--pj { display: grid; }
.escolha:has(#titular-pf:checked) .opcoes--pf { display: grid; }
.escolha:has(#titular-pj:checked) .estado--pj,
.escolha:has(#titular-pf:checked) .estado--pf { display: inline; }
.escolha:has(#titular-pj:checked) .estado--vazio,
.escolha:has(#titular-pf:checked) .estado--vazio { display: none; }

/* Etapa respondida: numeral vira visto. */
.escolha:has(input[name="titular"]:checked) .etapa:first-child .etapa__digito { display: none; }
.escolha:has(input[name="titular"]:checked) .etapa:first-child .etapa__visto { display: block; }

/* Sem :has(), mostrar TUDO é o degradado certo: o usuário vê as quatro saídas
 * de uma vez e escolhe. Esconder seria deixá-lo sem caminho. */
@supports not selector(:has(*)) {
  .etapa--2 .opcoes { display: grid; }
  .estado--vazio { display: none; }
  .estado--pj, .estado--pf { display: inline; }
}

/* ====================================================== checkout ========= */

.secao--compra { padding-block: var(--e5); background: var(--c-nevoa); }

.checkout {
  display: grid; gap: var(--e4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62rem) {
  .checkout { grid-template-columns: 21rem minmax(0, 1fr); gap: var(--e5); }
  /* O resumo acompanha a rolagem: o valor a pagar fica à vista o formulário
   * inteiro, que é longo. `top` afasta do header fixo. */
  .resumo { position: sticky; top: var(--e2); }
}

.resumo {
  padding: var(--e3); border: var(--borda-fina); border-radius: var(--raio);
  background: var(--c-papel); box-shadow: var(--sombra);
}
.resumo__t { font-size: 1.0625rem; margin-bottom: var(--e2); }
.resumo__produto { display: flex; gap: var(--e2); align-items: flex-start; margin-bottom: var(--e2); }
.resumo__produto > span:last-child { display: grid; }
.resumo__icone { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
  border-radius: var(--raio-p); background: var(--c-nevoa); color: var(--c-marca-escura); }
.resumo__icone svg { width: 1.25rem; height: 1.25rem; }
.resumo__sub { color: var(--c-prosa); font-size: 0.875rem; }

.resumo__linhas { display: grid; gap: 0.5rem; margin: var(--e2) 0;
  padding: var(--e2) 0; border-block: var(--borda-fina); }
.resumo__linhas > div { display: flex; justify-content: space-between; gap: var(--e2); font-size: 0.9375rem; }
.resumo__linhas dt { color: var(--c-prosa); }
.resumo__linhas dd { font-weight: 600; text-align: right; }

.resumo__total { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e2); margin-top: var(--e2); font-weight: 700; }
.resumo__valor { font-size: 1.625rem; }
.resumo__rotulo { color: var(--c-prosa); font-size: 0.8125rem; margin-top: 0.25rem; }

.resumo__aceito { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--e2); }
.marca-pgto { display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem; border-radius: var(--raio-pill);
  background: var(--c-nevoa); color: var(--c-marca-escura);
  font-size: 0.8125rem; font-weight: 600; }
.marca-pgto svg { width: 1rem; height: 1rem; }
.marca-pgto--off { background: transparent; border: 1px dashed var(--c-borda); color: var(--c-prosa); }

.resumo__fornecedor { margin-top: var(--e2); padding-top: var(--e2);
  border-top: var(--borda-fina); color: var(--c-prosa);
  font-size: 0.8125rem; line-height: 1.5; }

/* --- formulário ----------------------------------------------------------- */

.compra { display: grid; gap: var(--e4); min-width: 0;
  padding: var(--e4); border: var(--borda-fina); border-radius: var(--raio);
  background: var(--c-papel); box-shadow: var(--sombra); }
@media (max-width: 30rem) { .compra { padding: var(--e3) var(--e2); } }

.grupo-campos { border: 0; padding: 0; margin: 0; min-width: 0; }
.grupo-campos > legend { font-size: 1.0625rem; font-weight: 700; padding: 0; margin-bottom: 0.5rem; }
.grupo-campos__intro { color: var(--c-prosa); font-size: 0.9375rem; margin-bottom: var(--e2); }

.campos { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.campo { display: grid; gap: 0.3125rem; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
@media (min-width: 40rem) { .campo--curto { max-width: 11rem; } }

.campo label, .campo__rot { font-weight: 600; font-size: 0.9375rem; }
.campo__opc { font-weight: 400; color: var(--c-prosa); }

.campo input, .campo select {
  width: 100%; min-height: 48px; padding: 0.625rem 0.75rem;
  border: 2px solid var(--c-borda); border-radius: var(--raio-p);
  background: var(--c-papel); color: var(--c-tinta);
  font: inherit; font-size: 1rem; /* 16px: abaixo disso o iOS dá zoom ao focar */
}
.campo input:focus-visible, .campo select:focus-visible {
  outline: 3px solid var(--c-foco); outline-offset: 1px; border-color: var(--c-marca);
}
.campo input[aria-invalid="true"] { border-color: var(--c-erro); }

.campo__dica { color: var(--c-prosa); font-size: 0.8125rem; }
.campo__erro { color: var(--c-erro); font-size: 0.8125rem; font-weight: 600; }
.campo__eco { font-weight: 600; }

/* Eco da razão social devolvida pela Receita: confirma que o CNPJ digitado é
 * mesmo a empresa que a pessoa quer, ANTES de pagar. */
#eco-razao { padding: 0.625rem 0.75rem; border-radius: var(--raio-p); background: var(--c-nevoa); }

.produtos-radio, .pagamentos, .confirmas { display: grid; gap: var(--e2); }
.produtos-radio { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.produto-op, .pgto {
  position: relative; display: grid; gap: 0.25rem;
  padding: var(--e2) var(--e3);
  border: 2px solid var(--c-borda); border-radius: var(--raio-p);
  cursor: pointer;
}
.produto-op input, .pgto input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.produto-op input:focus-visible, .pgto input:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 2px; }
.produto-op:has(input:checked), .pgto:has(input:checked) { border-color: var(--c-marca); background: var(--c-nevoa); }
.produto-op__nome, .pgto__nome { font-weight: 700; display: inline-flex; align-items: center; gap: 0.375rem; }
.pgto__nome svg { width: 1.125rem; height: 1.125rem; }
.produto-op__nota, .pgto__nota { color: var(--c-prosa); font-size: 0.875rem; line-height: 1.5; }

/* Cartão desabilitado continua LEGÍVEL: o motivo está no texto e precisa ser
 * lido. Opacidade baixa demais aqui esconderia justamente a explicação. */
.pgto--off { cursor: not-allowed; background: var(--c-nevoa); border-style: dashed; }
.pgto--off .pgto__nome { color: var(--c-prosa); }
.pgto--off input { cursor: not-allowed; }

.confirma { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem var(--e2); align-items: start; }
.confirma input { width: 1.375rem; height: 1.375rem; margin-top: 0.125rem; accent-color: var(--c-marca); }
.confirma label { font-weight: 400; font-size: 0.9375rem; line-height: 1.5; }
.confirma .campo__dica, .confirma .campo__erro { grid-column: 2; }

.compra__fechar { display: grid; gap: var(--e2); }
.compra__legal { color: var(--c-prosa); }

/* --- erros e avisos ------------------------------------------------------- */

.erros {
  padding: var(--e2) var(--e3); border-radius: var(--raio-p);
  border: 2px solid var(--c-erro); background: var(--c-erro-fundo);
}
.erros__titulo { font-weight: 700; color: var(--c-erro); }
.erros__lista { margin: 0.5rem 0 0 1.125rem; display: grid; gap: 0.25rem; font-size: 0.9375rem; }
.erros__lista a { color: var(--c-erro); }

.aviso { padding: var(--e2) var(--e3); border-radius: var(--raio-p);
  border: 2px solid var(--c-borda); background: var(--c-nevoa); font-size: 0.9375rem; }
.aviso--erro { border-color: var(--c-erro); background: var(--c-erro-fundo); }

/* --- alternância PJ/PF ---------------------------------------------------
 * Quem manda é o radio do produto. O JS também desabilita o fieldset oculto
 * (fieldset[disabled] não é enviado nem validado), então campo invisível nunca
 * barra o envio — o CSS sozinho esconderia sem desligar. */
.so-pj, .so-pf { display: none; }
.compra:has(#p-ecnpj:checked) .so-pj,
.checkout:has(#p-ecnpj:checked) .so-pj { display: revert; }
.compra:has(#p-ecpf:checked) .so-pf,
.checkout:has(#p-ecpf:checked) .so-pf { display: revert; }
.compra:has(#p-ecnpj:checked) fieldset.so-pj,
.compra:has(#p-ecpf:checked) fieldset.so-pf { display: block; }
.checkout:has(#p-ecnpj:checked) p.so-pj,
.checkout:has(#p-ecpf:checked) p.so-pf { display: flex; }

/* Sem :has(): mostra os dois blocos. Pede mais do cliente, mas nunca esconde
 * um campo obrigatório — que seria um formulário impossível de enviar. */
@supports not selector(:has(*)) {
  .so-pj, .so-pf { display: revert; }
}

/* Sem JS o envio não existe: o aviso aparece e o botão sai de cena, para
 * ninguém clicar num botão que não faz nada. */
.sem-js { padding: var(--e2) var(--e3); border-radius: var(--raio-p);
  border: 2px solid var(--c-borda); background: var(--c-nevoa); font-size: 0.9375rem; }
.sem-js p + p { margin-top: 0.5rem; }
.js .sem-js { display: none; }
html:not(.js) .compra__fechar > .btn { display: none; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}