/* CHECKOUT — estilos específicos da página de pagamento */
.checkout { padding: 40px 20px 80px; }
.checkout h1 { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2rem; margin-bottom: 24px; }
.checkout-grade { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }

/* Métodos de pagamento */
.metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.metodo { display: flex; align-items: center; gap: 12px; text-align: left; padding: 16px; border: 2px solid var(--borda); border-radius: var(--raio); background: #fff; transition: all var(--transicao); position: relative; }
.metodo:hover { border-color: var(--cor-primaria); }
.metodo.ativo { border-color: var(--cor-primaria); background: var(--fundo-suave); }
.metodo-ic { font-size: 1.6rem; }
.metodo span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.metodo strong { font-family: var(--fonte-titulo); font-size: 1.05rem; }
.metodo small { color: var(--texto-suave); font-size: .8rem; }
.metodo-check { width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--borda); color: #fff; display: grid; place-items: center; font-size: .8rem; transition: all var(--transicao); }
.metodo.ativo .metodo-check { background: var(--cor-primaria); border-color: var(--cor-primaria); }

.painel-pagamento { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px; }
.dados-cliente h3, .pix-box h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.2rem; margin-bottom: 16px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campos label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--texto-suave); }
.campos input { font-family: var(--fonte-texto); font-size: 1rem; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-sm); color: var(--texto); }
.campos input:focus { outline: none; border-color: var(--cor-primaria); }
.campos label:nth-child(1), .campos label:nth-child(2) { grid-column: 1 / -1; }
#btn-gerar-pix { margin-top: 20px; }

/* Caixa PIX */
.pix-box { margin: 24px 0; padding-top: 24px; border-top: 1px solid var(--borda); }
.pix-qr { display: grid; place-items: center; margin: 16px 0; }
.pix-qr img { width: 220px; height: 220px; border-radius: var(--raio-sm); }
.pix-qr-placeholder { width: 220px; height: 220px; border: 2px dashed var(--borda); border-radius: var(--raio-sm); display: grid; place-content: center; text-align: center; color: var(--texto-suave); gap: 6px; background: var(--fundo-suave); }
.pix-qr-placeholder span { font-family: var(--fonte-titulo); font-weight: 600; }
.pix-qr-placeholder small { font-size: .75rem; padding: 0 20px; }
.pix-copia { display: flex; gap: 8px; margin: 14px 0; }
.pix-copia input { flex: 1; font-family: monospace; font-size: .82rem; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo-suave); color: var(--texto-suave); }
.pix-aviso { font-size: .85rem; color: var(--texto-suave); text-align: center; }

/* Cartão fora do ar */
.fora-do-ar { text-align: center; padding: 20px 10px; }
.fora-ic { font-size: 3.5rem; margin-bottom: 10px; }
.fora-do-ar h3 { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.4rem; margin-bottom: 10px; color: var(--cor-destaque); }
.fora-do-ar p { color: var(--texto-suave); max-width: 380px; margin: 0 auto 20px; }

/* Resumo */
.resumo { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px; position: sticky; top: 96px; }
.resumo h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.2rem; margin-bottom: 16px; }
.resumo-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.resumo-item img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: var(--fundo-suave); }
.resumo-item-info { flex: 1; font-size: .9rem; }
.resumo-item-info strong { font-family: var(--fonte-titulo); font-weight: 600; display: block; }
.resumo-item-info small { color: var(--texto-suave); }
.resumo-item .preco { font-weight: 700; color: var(--cor-primaria); font-size: .9rem; }
.resumo-linha { display: flex; justify-content: space-between; padding: 10px 0; font-size: .95rem; }
.resumo-linha .gratis { color: var(--verde-pix); font-weight: 700; }
.resumo-linha.total { border-top: 2px solid var(--borda); margin-top: 6px; padding-top: 16px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.4rem; }
.resumo-seguro { margin-top: 16px; text-align: center; font-size: .82rem; color: var(--texto-suave); }

@media (max-width: 860px) {
  .checkout-grade { grid-template-columns: 1fr; }
  .metodos { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
  .campos label:nth-child(1), .campos label:nth-child(2) { grid-column: auto; }
  .resumo { position: static; }
}

/* CARTÃO DE CRÉDITO */
.cartao-box { margin: 24px 0; padding-top: 24px; border-top: 1px solid var(--borda); }
.cartao-box h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.2rem; margin-bottom: 16px; }
.campo-largo { grid-column: 1 / -1; }
.campos select { font-family: var(--fonte-texto); font-size: 1rem; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-sm); color: var(--texto); background: #fff; cursor: pointer; }
.campos select:focus { outline: none; border-color: var(--cor-primaria); }
#btn-gerar-pix, #btn-pagar-cartao { margin-top: 20px; }
.cartao-seguro { text-align: center; font-size: .84rem; color: var(--texto-suave); margin-top: 14px; }

/* Info do Pix (abre em aba nova) */
.pix-info { font-size: .92rem; color: var(--texto-suave); margin: 20px 0 4px; padding: 14px 16px; background: var(--fundo-suave); border-radius: var(--raio-sm); border-left: 3px solid var(--cor-primaria); }