/* Checkout do pagamento real — passo 2 "Pagamento" (PAGAMENTOS-ESPEC.md §7.1).
   Entra em planos.html DEPOIS de planos.css (Apêndice A.13) e reaproveita as peças dele (.btn, .seg, .rot, .resumo,
   .ck-acoes, .link-sutil). Também é carregado pela "Minha assinatura" (diálogo "Corrigir" dos dados de cobrança).
   Porcelana: azul #0755DE chapado, campos em poço, nenhuma fonte declarada aqui (herda a da página), números
   tabulares. Nenhum estilo embutido no HTML (CSP da §6.5). */

.pg-forma[hidden], .pg-corpo [hidden], .pg-nota[hidden], .pg-empresa[hidden] { display: none !important; }

.pg-corpo { display: grid; gap: 16px; margin-top: 12px; min-width: 0; }
.pg-forma-txt { font-size: 13px; line-height: 1.5; color: var(--tinta-2); max-width: 62ch; }

/* vendas fechadas (ou restritas para quem não é testador): só o recado */
.pg-fechado {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--marfim); border: 1px solid var(--filete);
  font-size: 13.5px; font-weight: 550; line-height: 1.45; color: var(--tinta);
}
.pg-fechado svg, .pg-aviso svg { width: 16px; height: 16px; margin-top: 2px; flex: none; fill: none; stroke: var(--tinta-3); stroke-width: 1.6; stroke-linecap: round; }

/* dados para a cobrança */
.pg-dados {
  margin: 0; min-width: 0;
  padding: 14px 16px 16px; border: 1px solid var(--filete); border-radius: 12px; background: var(--cartao, #FFFFFF);
}
.pg-dados legend { padding: 0 6px; font-size: 12.5px; font-weight: 650; color: var(--tinta); }
.pg-campos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.pg-campo { display: flex; flex-direction: column; min-width: 0; }
.pg-campo .rot { margin-bottom: 6px; }
.pg-input {
  width: 100%; height: 40px; padding: 0 12px;
  border-radius: 10px; border: 1px solid transparent; background: var(--campo); color: var(--tinta);
  font: inherit; font-size: 14px; font-weight: 450; letter-spacing: 0;
  transition: background-color 120ms, border-color 120ms, box-shadow 120ms;
}
.pg-input:hover { background: var(--campo-hover, #EFEBE3); }
.pg-input:focus { outline: none; background: #FFFFFF; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(7, 85, 222, .14); }
.pg-input[aria-invalid="true"] { background: #FFFFFF; border-color: #A3281D; }
.pg-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(163, 40, 29, .14); }
.pg-num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pg-erro-campo { margin-top: 6px; font-size: 12.5px; font-weight: 550; line-height: 1.4; color: #A3281D; }
.pg-dica { margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--tinta-3); }
.pg-dica a, .pg-aceite a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.pg-dica a:hover, .pg-aceite a:hover { color: var(--azul-hover); }

/* cliente já salvo: "{Nome} · {documento}" + "Usar outro CPF/CNPJ" */
.pg-salvo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.pg-salvo-txt { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pg-outro { min-height: 40px; }

.pg-email { font-size: 13px; line-height: 1.45; color: var(--tinta-2); overflow-wrap: anywhere; }
.pg-email b { font-weight: 600; color: var(--tinta); }

/* resumo: rótulo à esquerda, texto à direita (no celular, um embaixo do outro) */
.pg-resumo { padding: 16px 18px; }
.pg-resumo dl { display: block; }
.pg-resumo dl div {
  display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--filete); font-size: 13px;
}
.pg-resumo dl div:first-child { border-top: 0; padding-top: 2px; }
.pg-resumo dt { color: var(--tinta-3); font-weight: 550; }
/* sem tabular-nums no texto corrido: na Inter ele alarga o hífen ("e - mail") */
.pg-resumo dd { margin: 0; font-weight: 450; text-align: left; color: var(--tinta-2); line-height: 1.45; font-variant-numeric: normal; }
.pg-resumo .pg-forte dd { font-weight: 650; color: var(--tinta); }
.pg-resumo .resumo-total b { font-variant-numeric: tabular-nums; }

/* aceite */
.pg-aceite { display: flex; flex-direction: column; }
.pg-aceite-rot { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding: 8px 0; font-size: 13.5px; line-height: 1.45; color: var(--tinta); cursor: pointer; }
.pg-check { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--azul); cursor: pointer; }
.pg-check[aria-invalid="true"] { outline: 2px solid #A3281D; outline-offset: 2px; }
.pg-aceite .pg-erro-campo { margin-top: 0; padding-left: 28px; }

/* vendas fechadas: a tecla azul desabilitada perde o relevo e o azul (em planos.css o .btn.prim vence o :disabled) */
.pg-acoes .btn.prim:disabled, .pg-acoes .btn.prim[aria-disabled="true"] {
  transform: none; box-shadow: none; cursor: not-allowed;
  background: #F2EEE7; border-color: #E2DBCF; color: #A39B8F;
}

/* nota abaixo do botão e linha legal da empresa */
.pg-acoes { flex-wrap: wrap; }
.pg-nota { margin: 12px 0 0 auto; max-width: 460px; font-size: 12px; line-height: 1.45; color: var(--tinta-3); text-align: right; }
.pg-empresa { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--tinta-3); overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .pg-nota { margin: 12px 0 0; max-width: none; text-align: left; }
  /* folga acima da barra fixa: o esmaecido dela (planos.css) não cobre o erro do aceite nem o #ckErro */
  .pg-corpo, .ck-passo:has(> .pg-acoes) > .ck-erro { margin-bottom: 28px; }
  .ck-passo:has(> .pg-acoes) { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .pg-campos { grid-template-columns: minmax(0, 1fr); }
  .pg-resumo { padding: 14px 16px; }
  .pg-resumo dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-input { transition: none; }
}