/* ============================================================
   CHECKOUT - cadastro do cliente em etapas
   Mesma identidade do painel: verde como ação, cartões brancos,
   borda de 1px fazendo a separação.
   ============================================================ */

.pagina-checkout{background:var(--canvas)}
.pagina-checkout .cabecalho{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--borda)}
.pagina-checkout .cabecalho .logo{color:var(--tinta)}
.pagina-checkout .cabecalho .menu-desktop{color:rgba(39,56,51,.75)}
.pagina-checkout .cabecalho .menu-desktop a:hover{color:var(--tinta);border-bottom-color:var(--verde)}
.pagina-checkout .cabecalho .botao-menu span{background:var(--tinta)}
.pagina-checkout .cabecalho .btn-cabecalho{background:var(--verde);color:var(--branco)}

.co{padding:118px 0 96px}

/* ---------------- cabeçalho da página ---------------- */
.co-topo{max-width:none}
.co-titulo{
  margin-top:14px;
  font-size:clamp(28px,3.4vw,42px);
  font-weight:750;
  letter-spacing:-.045em;
  line-height:1.12;
  color:var(--tinta);
  max-width:980px;
}
.co-sub{color:var(--muted);margin-top:14px;font-size:16.5px;max-width:720px}

/* ---------------- pagamento (etapa 6) ---------------- */
.co-metodos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.co-metodo{
  position:relative;
  display:grid;
  gap:6px;
  padding:20px 22px;
  border:1px solid var(--borda);
  border-radius:var(--raio-borda);
  background:var(--branco);
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.co-metodo:hover{border-color:#cfdad4}
.co-metodo input{position:absolute;opacity:0;pointer-events:none}
.co-metodo.escolhido{border-color:var(--verde);background:var(--verde-claro)}
.co-metodo.escolhido::after{
  content:"✓";
  position:absolute;
  top:16px;right:18px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--verde);
  color:var(--branco);
  font-size:12px;
  font-weight:800;
  display:grid;
  place-items:center;
}
.co-metodo-topo{display:flex;align-items:center;gap:10px;padding-right:28px;flex-wrap:wrap}
.co-metodo-nome{font-size:16.5px;font-weight:750;letter-spacing:-.02em}
.co-metodo-selo{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--verde-escuro);
  background:rgba(255,255,255,.7);
  border:1px solid rgba(21,159,121,.25);
  padding:4px 9px;
  border-radius:var(--raio-selo);
}
.co-metodo-desc{font-size:13.5px;color:var(--muted)}

.co-cartao{margin-top:22px}
.co-cartao .co-campos{margin-top:0}
.co-seguranca{
  margin-top:16px;
  font-size:12.5px;
  color:var(--muted);
  background:var(--canvas);
  border:1px solid var(--borda);
  border-radius:10px;
  padding:12px 16px;
}
.co-pix{
  margin-top:22px;
  font-size:14.5px;
  color:var(--tinta);
  background:var(--verde-claro);
  border:1px solid rgba(21,159,121,.22);
  border-radius:var(--raio-borda);
  padding:18px 20px;
}

/* bloco do pagamento na tela de sucesso */
.co-pagamento{
  border:1px solid var(--borda);
  border-radius:var(--raio-borda);
  background:var(--branco);
  padding:20px;
  margin-bottom:6px;
}
.co-pagamento.ok{border-color:rgba(21,159,121,.35);background:#f2fbf7}
.co-pagamento.erro{border-color:#eec3c1;background:#fdf1f0}
.co-pagamento-titulo{font-size:16px;font-weight:750;color:var(--tinta)}
.co-pagamento-texto{margin-top:6px;font-size:14px;color:var(--muted)}
.co-pagamento-texto b{color:var(--tinta)}
.co-pagamento .btn{margin-top:16px}
.co-pagamento-aviso{margin-top:12px;font-size:13px;font-weight:600;color:var(--verde-escuro)}
.co-pix-imagem{
  display:block;
  width:200px;height:200px;
  margin:16px auto;
  border:1px solid var(--borda);
  border-radius:10px;
  background:var(--branco);
  object-fit:contain;
}
.co-pix-codigo{
  font-size:12.5px !important;
  font-weight:500 !important;
  max-height:66px;
  overflow:auto;
  word-break:break-all;
}

/* ---------------- trilha das etapas ---------------- */
.co-trilha{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:18px;
  margin-top:44px;
}
.co-passo{
  position:relative;
  padding-top:18px;
  border-top:2px solid var(--borda);
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.co-passo-numero{
  flex:none;
  width:24px;height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:800;
  background:var(--canvas);
  border:1px solid var(--borda);
  color:var(--muted);
}
.co-passo-texto b{display:block;font-size:13.5px;font-weight:700;color:var(--muted)}
.co-passo-texto small{display:block;font-size:11.5px;color:#a9b3b0;line-height:1.35;margin-top:2px}
.co-passo.atual{border-top-color:var(--verde)}
.co-passo.atual .co-passo-numero{background:var(--verde);border-color:var(--verde);color:var(--branco)}
.co-passo.atual .co-passo-texto b{color:var(--tinta)}
.co-passo.visto{border-top-color:var(--verde-escuro)}
.co-passo.visto .co-passo-numero{background:var(--verde-claro);border-color:var(--verde-claro);color:var(--verde-escuro)}

/* ---------------- grade principal ---------------- */
.co-grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:36px;
  align-items:start;
  margin-top:44px;
}
.co-formulario{min-width:0}

.co-etapa{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio-borda);
  box-shadow:var(--sombra);
  padding:34px;
}
.co-etapa-titulo{font-size:22px;font-weight:750;letter-spacing:-.03em;color:var(--tinta)}
.co-etapa-sub{color:var(--muted);font-size:15px;margin-top:8px}

.co-campos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:26px;
}
.co-largo{grid-column:1/-1}

/* ---------------- campos ---------------- */
.campo{display:grid;gap:7px}
.campo>span,.campo>label{font-size:13px;font-weight:600;color:var(--tinta)}
.campo>span em{font-style:normal;color:var(--muted);font-weight:500}
.campo input,.campo select{
  font:inherit;
  font-size:15px;
  color:var(--tinta);
  padding:13px 15px;
  border:1px solid var(--borda);
  border-radius:12px;
  background:var(--branco);
  width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.campo input:hover,.campo select:hover{border-color:#d3dcd7}
.campo input:focus-visible,.campo select:focus-visible{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(21,159,121,.13)}
.campo input::placeholder{color:#b7c0bd}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:var(--erro)}
.campo input[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 3px rgba(192,74,68,.12)}

.co-erro{font-size:12.5px;font-weight:600;color:var(--erro)}
.co-dica{font-size:12.5px;color:var(--muted)}
.co-dica.ok{color:var(--verde-escuro);font-weight:600}

.co-termos{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--tinta);font-weight:500}
.co-termos input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--verde);flex:none}
.co-termos a{color:var(--verde-escuro);font-weight:600}

/* endereço do sistema (subdomínio) */
.co-endereco{
  display:flex;
  align-items:center;
  border:1px solid var(--borda);
  border-radius:12px;
  background:var(--branco);
  overflow:hidden;
}
.co-endereco input{border:0;border-radius:0;flex:1;min-width:0}
.co-endereco input:focus-visible{box-shadow:none}
.co-endereco-final{
  padding:0 15px;
  font-size:14.5px;
  font-weight:600;
  color:var(--muted);
  background:var(--canvas);
  align-self:stretch;
  display:flex;
  align-items:center;
  border-left:1px solid var(--borda);
  white-space:nowrap;
}
/* O mesmo bloco quando o endereço é por pasta: o domínio vem ANTES do
   campo (dominio/loja/nome), com a mesma cara do sufixo. */
.co-endereco-inicio{
  padding:0 0 0 15px;
  font-size:14.5px;
  font-weight:600;
  color:var(--muted);
  background:var(--branco);
  align-self:stretch;
  display:flex;
  align-items:center;
  white-space:nowrap;
}
@media(max-width:520px){
  .co-endereco-inicio{padding-left:12px;font-size:13px}
}
.co-sugestoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.co-sugestoes button{
  border:1px solid var(--borda);
  background:var(--branco);
  border-radius:100px;
  padding:7px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--verde-escuro);
  cursor:pointer;
}
.co-sugestoes button:hover{border-color:var(--verde);background:var(--verde-claro)}

/* ---------------- planos (etapa 1) ---------------- */
.co-planos{display:grid;gap:14px;margin-top:26px}
.co-plano{
  position:relative;
  display:grid;
  gap:8px;
  padding:22px 24px;
  border:1px solid var(--borda);
  border-radius:var(--raio-borda);
  background:var(--branco);
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease;
}
.co-plano:hover{border-color:#cfdad4;transform:translateY(-1px)}
.co-plano input{position:absolute;opacity:0;pointer-events:none}
.co-plano.escolhido{border-color:var(--verde);background:var(--verde-claro)}
.co-plano.escolhido::after{
  content:"✓";
  position:absolute;
  top:18px;right:20px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--verde);
  color:var(--branco);
  font-size:12px;
  font-weight:800;
  display:grid;
  place-items:center;
}
.co-plano-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-right:30px}
.co-plano-nome{font-size:18px;font-weight:750;letter-spacing:-.02em}
.co-plano-selo{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--branco);
  background:var(--verde);
  padding:5px 10px;
  border-radius:var(--raio-selo);
}
.co-plano-desc{font-size:14px;color:var(--muted)}
.co-plano-preco{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.co-plano-preco b{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1}
.co-plano-periodo{font-size:14px;color:var(--muted)}
.co-plano-recursos{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.co-plano-recursos li{
  position:relative;
  padding-left:18px;
  font-size:13.5px;
  color:var(--tinta);
}
.co-plano-recursos li::before{
  content:"";
  position:absolute;
  left:0;top:6px;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--verde-claro);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23159f79' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
  background-size:8px;
  background-position:center;
  background-repeat:no-repeat;
}
.co-plano.escolhido .co-plano-recursos li::before{background-color:var(--branco)}

.co-ciclo{
  display:inline-flex;
  gap:6px;
  margin-top:18px;
  padding:6px;
  border-radius:100px;
  background:var(--canvas);
  border:1px solid var(--borda);
}
.co-mini{margin-top:14px;font-size:13px;color:var(--muted)}

/* ---------------- ações ---------------- */
.co-acoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;margin-top:30px}
.co-acoes .co-voltar{margin-right:auto}
.co-acoes-sucesso{justify-content:flex-start}

/* ---------------- aviso geral ---------------- */
.co-aviso{
  margin-bottom:20px;
  padding:16px 20px;
  border-radius:var(--raio-borda);
  border:1px solid #e8cfa4;
  background:#fdf6e9;
  color:#7d5510;
  font-size:14.5px;
  font-weight:600;
}
.co-aviso.erro{border-color:#eec3c1;background:#fdf1f0;color:#8f332e}

.co-vazio{
  margin-top:24px;
  padding:28px;
  text-align:center;
  border:1px dashed var(--borda);
  border-radius:var(--raio-borda);
  color:var(--muted);
}
.co-vazio .btn{margin-top:16px}

/* ---------------- resumo (sticky) ---------------- */
.co-resumo{
  position:sticky;
  top:104px;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio-borda);
  box-shadow:var(--sombra);
  padding:26px 24px;
}
.co-resumo-titulo{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.co-resumo-plano{margin-top:14px}
.co-resumo-nome{font-size:19px;font-weight:750;letter-spacing:-.02em;color:var(--tinta)}
.co-resumo-ciclo{font-size:13px;color:var(--muted);margin-top:4px}
.co-resumo-valor{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--borda);
}
.co-resumo-valor span{font-size:13px;color:var(--muted)}
.co-resumo-valor b{font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--verde-escuro)}
.co-resumo-nota{font-size:12.5px;color:var(--muted);margin-top:8px}
.co-resumo-lista{margin-top:16px;display:grid;gap:7px}
.co-resumo-lista li{position:relative;padding-left:18px;font-size:13px;color:var(--muted)}
.co-resumo-lista li::before{
  content:"";
  position:absolute;
  left:0;top:7px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--verde);
}
.co-resumo-pe{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--borda);
  font-size:12px;
  color:var(--muted);
}

/* ---------------- revisão ---------------- */
.co-revisao{display:grid;gap:14px;margin-top:26px}
.co-bloco{
  border:1px solid var(--borda);
  border-radius:var(--raio-borda);
  padding:20px 22px;
  background:var(--branco);
}
.co-bloco-topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.co-bloco-titulo{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.co-bloco-editar{
  border:0;
  background:none;
  padding:0;
  font-size:13px;
  font-weight:600;
  color:var(--verde);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.co-bloco-linhas{margin-top:12px;display:grid;gap:6px}
.co-bloco-linhas div{display:flex;gap:10px;font-size:14px}
.co-bloco-linhas dt{color:var(--muted);min-width:132px}
.co-bloco-linhas dd{margin:0;color:var(--tinta);font-weight:600;word-break:break-word}

/* ---------------- sucesso ---------------- */
.co-sucesso{text-align:center}
.co-sucesso-marca{
  width:56px;height:56px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--verde-claro);
  color:var(--verde);
  display:grid;
  place-items:center;
}
.co-sucesso-marca svg{width:26px;height:26px}
.co-acesso{
  display:grid;
  gap:12px;
  margin-top:26px;
  text-align:left;
  border:1px solid var(--verde-claro);
  background:var(--verde-claro);
  border-radius:var(--raio-borda);
  padding:22px;
}
.co-acesso-linha{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.co-acesso-rotulo{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-escuro)}
.co-acesso-valor{
  font-size:16px;
  font-weight:700;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
  word-break:break-all;
}
.co-acesso-copiar{
  border:1px solid rgba(21,159,121,.35);
  background:var(--branco);
  border-radius:var(--raio-selo);
  padding:8px 14px;
  font-size:12.5px;
  font-weight:600;
  color:var(--verde-escuro);
  cursor:pointer;
}
.co-acesso-copiar:hover{background:var(--branco);border-color:var(--verde)}
.co-acesso-aviso{font-size:12.5px;color:var(--verde-escuro);margin-top:4px}
.co-proximos{
  counter-reset:passo;
  display:grid;
  gap:12px;
  margin-top:28px;
  text-align:left;
}
.co-proximos li{
  position:relative;
  padding-left:34px;
  font-size:14.5px;
  color:var(--muted);
}
.co-proximos li::before{
  counter-increment:passo;
  content:counter(passo);
  position:absolute;
  left:0;top:0;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--canvas);
  border:1px solid var(--borda);
  color:var(--tinta);
  font-size:11.5px;
  font-weight:800;
  display:grid;
  place-items:center;
}
.co-proximos b{color:var(--tinta)}

/* ---------------- campos que balançam no erro ---------------- */
@keyframes co-tremer{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}
.co-tremer{animation:co-tremer .35s ease}

/* ---------------- responsivo ---------------- */
@media (max-width:1020px){
  .co-grade{grid-template-columns:1fr}
  .co-resumo{position:static;order:-1}
  .co-trilha{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}

@media (max-width:700px){
  .co{padding:96px 0 72px}
  .co-trilha{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-passo-texto small{display:none}
  .co-etapa{padding:24px 20px}
  .co-campos{grid-template-columns:1fr}
  .co-acoes{flex-direction:column-reverse}
  .co-acoes .btn{width:100%}
  .co-acoes .co-voltar{margin-right:0}
  .co-endereco{flex-wrap:wrap}
  .co-endereco-final{border-left:0;border-top:1px solid var(--borda);width:100%;justify-content:center;padding:10px}
  .co-bloco-linhas div{flex-direction:column;gap:2px}
  .co-bloco-linhas dt{min-width:0}
  .co-resumo-valor{flex-wrap:wrap}
  .co-resumo-valor b{font-size:21px}
  .co-metodos{grid-template-columns:1fr}
  .co-pix-imagem{width:160px;height:160px}
}

@media (prefers-reduced-motion:reduce){
  .co-tremer{animation:none}
}