/* EG7 Decor - checkout e pagamento (etapas, Pix, selos de confiança, balão de frete grátis) */
.texto-verde { color: var(--verde); }
/* Etapas: número em cima, texto embaixo, todas ligadas por uma linha */
.etapas-compra { list-style: none; margin: 0 auto 28px; padding: 0; display: flex; max-width: 760px; }
.etapas-compra li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .82rem; font-weight: 600; color: #a89a8a; line-height: 1.25; }
.etapas-compra li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 21px); right: calc(-50% + 21px); height: 2px; background: var(--borda); border-radius: 2px; }
.etapas-compra li span { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--borda); background: #fff; font-size: .8rem; }
.etapas-compra li.feita { color: var(--texto); }
.etapas-compra li.feita span { background: var(--verde); border-color: var(--verde); color: #fff; }
.etapas-compra li.feita::after { background: var(--verde); }
.etapas-compra li.atual { color: var(--texto); }
.etapas-compra li.atual span { border-color: var(--cafe); background: var(--cafe); color: #fff; box-shadow: 0 0 0 4px rgba(46, 33, 24, .12); }

.pagamento-cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.pagamento-cabecalho h1 { margin-bottom: 4px; }
.pagamento-cabecalho p { margin: 0; color: var(--texto-suave); font-size: .9rem; }
.situacao-pedido { font-size: .8rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; letter-spacing: .2px; }
.situacao-pedido.aguardando { background: #fff5e4; color: #8a5a00; }
.situacao-pedido.pago { background: #e6f6ed; color: var(--verde-escuro); }
.situacao-pedido.cancelado { background: #f1ede8; color: var(--texto-suave); }

.pagamento .etapa, .cartao-pagamento { background: #fff; border: 1px solid var(--borda); border-radius: 18px; padding: 26px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(46, 33, 24, .05); }
.cartao-pagamento h2 { font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
.cartao-pagamento h3 { font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-suave); margin: 0 0 6px; }
.cartao-pagamento p { margin: 0 0 12px; }
.entrega-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: .9rem; }
.entrega-resumo p { margin: 0; }

/* Pix */
.pix-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.pix-marca { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.15rem; color: #32bcad; }
.pix-tempo { background: var(--creme-claro); border: 1px solid var(--borda); border-radius: 999px; padding: 6px 14px; font-size: .82rem; color: var(--texto-suave); }
.pix-tempo b { color: var(--texto); font-variant-numeric: tabular-nums; }
.cartao-pagamento .pix-valor { font-size: 1.05rem; margin-bottom: 18px; }
.pix-valor strong { font-size: 1.35rem; }
.pix-grade { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: center; padding: 18px; background: var(--creme-claro); border-radius: 14px; margin-bottom: 18px; }
.pix-qr { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 10px; }
.pix-qr img { width: 100%; height: auto; }
.pix-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: .92rem; }
.pix-passos li { display: flex; gap: 12px; align-items: flex-start; }
.pix-passos li span { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--cafe); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.pix-rotulo { display: block; font-size: .82rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 6px; }
.pix-copiar { display: flex; gap: 8px; }
.pix-copiar input { flex: 1; min-width: 0; border: 1px solid var(--borda); border-radius: 999px; padding: 12px 18px; font-family: monospace; font-size: .82rem; color: var(--texto-suave); background: #fff; text-overflow: ellipsis; }
.pix-copiar .botao-comprar { padding: 12px 24px; white-space: nowrap; }
.pix-copiar .botao-comprar.copiado { background: var(--verde-escuro); }
.pix-status { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: .86rem; color: var(--texto-suave); }
.pix-status i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #f2a91d; animation: pulsar 1.6s infinite; }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(242, 169, 29, .6); } 70% { box-shadow: 0 0 0 10px rgba(242, 169, 29, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 169, 29, 0); } }
.pix-trocar { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--borda); text-align: center; }
.pix-trocar button { background: none; border: 0; color: var(--madeira); font-weight: 600; font-size: .88rem; cursor: pointer; text-decoration: underline; }

/* Pedido aprovado */
.cartao-pagamento.sucesso { text-align: center; }
.sucesso-icone { width: 68px; height: 68px; border-radius: 50%; background: #e6f6ed; color: var(--verde); display: grid; place-items: center; margin: 4px auto 14px; }
.linha-tempo { list-style: none; padding: 0; margin: 22px auto; max-width: 420px; text-align: left; }
.linha-tempo li { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.linha-tempo li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--borda); }
.linha-tempo li span { flex: 0 0 28px; height: 28px; border-radius: 50%; border: 2px solid var(--borda); background: #fff; display: grid; place-items: center; }
.linha-tempo li.feita span { background: var(--verde); border-color: var(--verde); color: #fff; }
.linha-tempo li.atual span { border-color: var(--dourado); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 12px var(--dourado); }
.linha-tempo strong { display: block; font-size: .92rem; }
.linha-tempo small { color: var(--texto-suave); font-size: .8rem; }

/* Resumo lateral */
.pagamento .carrinho-resumo { background: #fff; box-shadow: 0 10px 30px rgba(46, 33, 24, .06); }
.pagamento-resumo .resumo-item span small { display: block; color: var(--texto-suave); font-size: .78rem; }
.resumo-parcelas { text-align: center; font-size: .8rem; color: var(--texto-suave); margin: 10px 0 0; }
.resumo-linha.total + .resumo-parcelas { text-align: right; margin: -4px 0 10px; }
.carrinho-resumo .balao-frete { margin: 6px 0 10px; }
.resumo-seguro { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: .78rem; font-weight: 600; color: var(--verde-escuro); background: #e6f6ed; border-radius: 999px; padding: 7px 12px; }
.resumo-ajuda { display: block; text-align: center; margin-top: 12px; font-size: .82rem; color: var(--madeira); text-decoration: underline; }

/* Selos de confiança */
.selos-seguranca { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.selos-seguranca li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--creme-claro); }
.selos-seguranca svg { color: var(--verde-escuro); flex: 0 0 auto; margin-top: 2px; }
.selos-seguranca strong { display: block; font-size: .84rem; }
.selos-seguranca span { font-size: .76rem; color: var(--texto-suave); }

/* Balão de frete grátis */
.balao-frete { position: relative; display: flex; gap: 12px; align-items: flex-start; background: #fff8e8; border: 1px solid #f0d6a6; color: #6d4a0c; border-radius: 14px; padding: 12px 14px; margin: 14px 0; font-size: .84rem; line-height: 1.45; }
.balao-frete::before { content: ""; position: absolute; top: -7px; left: 26px; width: 12px; height: 12px; background: #fff8e8; border-left: 1px solid #f0d6a6; border-top: 1px solid #f0d6a6; transform: rotate(45deg); }
.balao-frete > div { flex: 1; min-width: 0; }
.balao-frete svg { flex: 0 0 auto; color: var(--dourado); margin-top: 1px; }
.balao-frete strong { display: block; font-size: .9rem; color: var(--cafe); }
.balao-frete span { display: block; }
.balao-frete a { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--madeira); }
.balao-barra { display: block; height: 6px; background: #f3e3c2; border-radius: 999px; margin-top: 8px; overflow: hidden; }
.balao-barra b { display: block; height: 100%; background: linear-gradient(90deg, var(--dourado), var(--verde)); border-radius: 999px; }
.balao-frete.ganhou { background: #e9f7ef; border-color: #b6e2c8; color: #1f5c3a; }
.balao-frete.ganhou::before { background: #e9f7ef; border-color: #b6e2c8; }
.balao-frete.ganhou svg { color: var(--verde); }
/* Resultado do frete (produto e carrinho) e opções do checkout */
.verde { color: var(--verde) !important; }
.frete-card { border: 1px solid var(--borda); background: var(--creme-claro); border-radius: 14px; padding: 4px 14px; margin-top: 12px; }
.frete-card.gratis { background: #f1faf5; border-color: #c9ead7; }
.frete-card-local { display: flex; gap: 8px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: .82rem; color: var(--texto-suave); }
.frete-card-local svg { flex: 0 0 auto; margin-top: 2px; color: var(--madeira); }
.frete-card-local b { color: var(--texto); font-weight: 600; }
.frete-card-opcao { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.frete-card-opcao + .frete-card-opcao { border-top: 1px dashed var(--borda); }
.frete-card-opcao > svg { flex: 0 0 auto; color: var(--madeira); }
.frete-card.gratis .frete-card-opcao > svg { color: var(--verde); }
.frete-card-opcao > div { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.4; }
.frete-card-opcao small { display: block; color: var(--texto-suave); font-size: .78rem; }
.frete-card-opcao > strong { font-size: .95rem; white-space: nowrap; }
.opcao-frete .nome small { display: block; color: var(--texto-suave); font-size: .78rem; }
.opcao-frete:has(input:checked) { border-color: var(--verde); background: #f1faf5; }
.produto-frete-gratis { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--verde-escuro); margin: -4px 0 12px; }

@media (max-width: 640px) {
    .etapas-compra li { font-size: .7rem; gap: 6px; }
    .etapas-compra li span { width: 28px; height: 28px; }
    .etapas-compra li:not(:last-child)::after { top: 13px; left: calc(50% + 19px); right: calc(-50% + 19px); }
    .pagamento .etapa, .cartao-pagamento { padding: 18px; border-radius: 14px; }
    .pix-grade { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
    .pix-qr { max-width: 220px; margin: 0 auto; }
    .pix-copiar { flex-direction: column; }
    .pix-topo { flex-wrap: wrap; }
    .entrega-resumo, .selos-seguranca { grid-template-columns: 1fr; }
}