/* ==========================================================================
   Checkout — estrutura de conversão, identidade do casamento
   ========================================================================== */
.tela-checkout { background: var(--papel); }
.ck-largura { width: min(1200px, calc(100vw - 48px)); margin-inline: auto; }

.ck-topo { background: var(--branco); border-bottom: 1px solid var(--linha); }
.ck-topo__interno { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.ck-marca { color: var(--dourado-texto); text-decoration: none; }
.ck-seguro { display: inline-flex; align-items: center; gap: var(--e2); color: var(--verde-texto); }

.ck-corpo { display: grid; grid-template-columns: 1fr 400px; gap: var(--e8); align-items: start; padding: var(--e9) 0 var(--e11); }
.ck-etapas { display: flex; flex-direction: column; gap: var(--e5); }
.ck-bloco { background: var(--branco); border: 1px solid var(--linha); padding: var(--e7); }
.ck-passo { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--e6); }
.ck-passo__num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--marinho); color: var(--branco);
  display: grid; place-items: center;
  font-family: var(--titulo); font-size: 12px;
}
.ck-passo--ok .ck-passo__num { background: var(--verde-texto); }

/* formas de pagamento */
.ck-formas { display: flex; gap: 14px; margin-bottom: var(--e6); }
.forma { flex: 1; position: relative; display: flex; }
.forma input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.forma__caixa {
  flex: 1; display: flex; flex-direction: column; gap: 5px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 6px; padding: var(--e4) 18px;
  background: var(--branco); transition: border-color .2s, background .2s;
}
.forma__topo { display: flex; align-items: center; gap: 10px; }
.forma__radio { flex: none; width: 15px; height: 15px; border: 1px solid var(--linha); border-radius: 50%; }
.forma input:checked + .forma__caixa { border-color: var(--marinho); border-width: 2px; padding: 15px 17px; background: var(--fundo-selecao); }
.forma input:checked + .forma__caixa .forma__radio { background: var(--marinho); border-color: var(--marinho); }
.forma input:checked + .forma__caixa .forma__apoio { color: var(--verde-texto); }
.forma input:focus-visible + .forma__caixa { outline: 2px solid var(--dourado-texto); outline-offset: 2px; }

.ck-cartao { border: 1px solid var(--linha); border-radius: 6px; padding: var(--e6); margin-bottom: var(--e6); background: var(--campo); }
.ck-cartao .campo:last-of-type { margin-bottom: 0; }
.ck-nota { display: flex; align-items: flex-start; gap: var(--e2); margin-top: var(--e4); }
.ck-nota svg { flex: none; margin-top: 2px; color: var(--verde-texto); }

/* resumo */
.ck-resumo { background: var(--branco); border: 1px solid var(--linha); padding: var(--e6); position: sticky; top: var(--e5); }
.ck-item { display: flex; gap: var(--e4); align-items: center; margin: var(--e4) 0 var(--e5); }
.ck-item__foto {
  flex: none; width: 72px; height: 72px; background: var(--areia-forte);
  display: grid; place-items: center; color: var(--icone-vazio); overflow: hidden;
}
.ck-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.ck-item span span { display: block; }
.ck-divisor { border: 0; border-top: 1px solid var(--linha); margin: var(--e5) 0; }
.ck-linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4); margin: 0 0 var(--e3); }
.ck-linha--total { margin: var(--e5) 0 var(--e6); }
.ck-aviso-final { text-align: center; margin: var(--e4) 0 0; }
.ck-selo { display: flex; align-items: center; justify-content: center; gap: var(--e2); color: var(--verde-texto); margin: var(--e5) 0 0; }
.ck-resumo .aviso { margin-bottom: var(--e4); }

/* --- estado de espera do Pix --- */
.ck-status {
  display: flex; align-items: center; gap: var(--e3);
  border: 1px solid var(--dourado); border-radius: 6px; background: var(--fundo-selecao);
  padding: 14px 18px; margin-bottom: var(--e5);
}
.ck-status__ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dourado-texto); }
.ck-status__tempo { margin-left: auto; color: var(--dourado-texto); }
.ck-status--fim { border-color: var(--vermelho-texto); background: var(--fundo-erro); }
.ck-status--fim .ck-status__ponto { background: var(--vermelho-texto); }
.ck-status--fim .ck-status__tempo { color: var(--vermelho-texto); }

.ck-pix { display: flex; gap: var(--e6); align-items: center; border: 1px solid var(--linha); border-radius: 6px; padding: var(--e6); background: var(--campo); }
.ck-pix__qr { flex: none; width: 205px; height: 205px; background: var(--branco); border: 1px solid var(--linha); padding: var(--e2); }
.ck-pix__qr img, .ck-pix__qr svg { width: 100%; height: 100%; }
.ck-pix__lado { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ck-codigo {
  width: 100%; font-family: var(--corpo); font-size: 15px; color: var(--tinta-apoio);
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px var(--e3); word-break: break-all; resize: none;
}
.ck-resumo__dados { display: flex; align-items: center; gap: 14px; }
.ck-selo-ok { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--verde-texto); color: var(--branco); display: grid; place-items: center; }

@media (max-width: 980px) {
  .ck-largura { width: calc(100vw - 32px); }
  .ck-corpo { grid-template-columns: 1fr; gap: var(--e5); padding: var(--e5) 0 var(--e9); }
  .ck-resumo { position: static; order: -1; }
  .ck-formas { flex-direction: column; }
  .ck-pix { flex-direction: column; }
  .ck-pix__qr { width: 200px; height: 200px; }
  .ck-bloco { padding: var(--e6) var(--e5); }
}

.qr-exemplo {
  width: 100%; height: 100%; display: grid; place-content: center; gap: 6px;
  text-align: center; color: var(--placeholder); border: 1px dashed var(--linha);
}
.qr-exemplo svg { margin: 0 auto; }
.qr-exemplo__nota { font-size: 13px; }

.ck-obrigado { max-width: 620px; margin: 0 auto; padding: var(--e11) 0; text-align: center; }
.ck-obrigado .selo { margin-bottom: var(--e5); }
.ck-recibo { text-align: left; margin: var(--e7) 0; }
.ck-recibo .ck-item { margin: 0 0 var(--e2); }