/* ─────────────────────────────────────────────────────────────
   Acquamar · Painel de Pagamento (checkout)
   Identidade: creme/marfim, terracota, Playfair + Jost
   Reaproveita o backdrop #acqBk do store.js
   ───────────────────────────────────────────────────────────── */

.aco{position:fixed;inset:0;z-index:580;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.aco.open{opacity:1;pointer-events:auto}
.aco-c{background:var(--creme,#faf6f0);width:100%;max-width:940px;max-height:94vh;overflow:hidden;position:relative;display:grid;grid-template-columns:1.15fr .85fr;transform:translateY(18px);transition:transform .38s cubic-bezier(.22,1,.36,1);box-shadow:0 34px 100px rgba(30,26,22,.34)}
.aco.open .aco-c{transform:none}

/* Coluna esquerda: formulário / etapas */
.aco-main{padding:30px 34px 34px;overflow-y:auto;max-height:94vh}
.aco-x{position:absolute;top:14px;right:16px;z-index:5;background:none;border:none;font-size:26px;line-height:1;color:var(--escuro,#1e1a16);cursor:pointer;padding:4px 8px;transition:color .2s,transform .2s}
.aco-x:hover{color:var(--terra,#c4693a);transform:rotate(90deg)}

/* Selo de ambiente de teste */
.aco-env{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans,sans-serif);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:5px 11px;border-radius:2px;margin-bottom:16px}
.aco-env.test{background:#fbead0;color:#a3671a;border:1px solid #edcb93}
.aco-env.prod{background:#e6f3ea;color:#2f7d4e;border:1px solid #bfe0c9}
.aco-env svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* Passos */
.aco-steps{display:flex;gap:6px;margin-bottom:22px}
.aco-step{flex:1;display:flex;flex-direction:column;gap:6px}
.aco-step i{height:3px;background:var(--areia-d,#d4c2a8);border-radius:2px;transition:background .3s}
.aco-step.on i,.aco-step.done i{background:var(--terra,#c4693a)}
.aco-step span{font-family:var(--sans,sans-serif);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--bege,#c9b394);transition:color .3s}
.aco-step.on span,.aco-step.done span{color:var(--moca,#6b5442)}

.aco-h{font-family:var(--serif,Georgia);font-size:24px;font-weight:300;color:var(--escuro,#1e1a16);margin-bottom:4px}
.aco-sub{font-size:12px;color:var(--moca,#6b5442);margin-bottom:20px;line-height:1.5}

/* Campos */
.aco-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.aco-f{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.aco-f.col2{grid-column:span 2}
.aco-f label{font-family:var(--sans,sans-serif);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--moca,#6b5442)}
.aco-f input,.aco-f select{border:1px solid var(--areia-d,#d4c2a8);background:#fff;font-family:var(--sans,sans-serif);font-size:13.5px;color:var(--escuro,#1e1a16);padding:11px 13px;outline:none;transition:border-color .2s;border-radius:2px;width:100%}
.aco-f input:focus,.aco-f select:focus{border-color:var(--terra,#c4693a)}
.aco-f input::placeholder{color:#c3b49c}
.aco-f.err input{border-color:#c0503f;background:#fdf3f1}
.aco-f .msg{font-size:10.5px;color:#c0503f;display:none}
.aco-f.err .msg{display:block}

/* Abas de método de pagamento */
.aco-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.aco-tab{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px;border:1px solid var(--areia-d,#d4c2a8);background:#fff;cursor:pointer;transition:all .2s;border-radius:3px}
.aco-tab:hover{border-color:var(--terra-l,#e08860)}
.aco-tab.on{border-color:var(--terra,#c4693a);background:#fff6ef;box-shadow:inset 0 0 0 1px var(--terra,#c4693a)}
.aco-tab svg{width:24px;height:24px;stroke:var(--moca,#6b5442);fill:none;stroke-width:1.5}
.aco-tab.on svg{stroke:var(--terra,#c4693a)}
.aco-tab span{font-family:var(--sans,sans-serif);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--moca,#6b5442);font-weight:500}

.aco-pane{display:none}
.aco-pane.on{display:block;animation:acoFade .3s ease}
@keyframes acoFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Bandeiras aceitas */
.aco-brands{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 16px}
.aco-brand{font-family:var(--sans,sans-serif);font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:3px;border:1px solid var(--areia-d,#d4c2a8);color:#a99a80;background:#fff;opacity:.55;transition:all .2s}
.aco-brand.on{opacity:1;color:#fff;border-color:transparent;transform:scale(1.04)}
.aco-brand.visa.on{background:#1a1f71}
.aco-brand.mastercard.on{background:#cc4b2c}
.aco-brand.elo.on{background:#111}
.aco-brand.amex.on{background:#2e77bc}
.aco-brand.hipercard.on{background:#8f1b2c}

.aco-cardbox{position:relative}
.aco-cardbox .aco-brandtag{position:absolute;right:12px;top:33px;font-family:var(--sans,sans-serif);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--terra,#c4693a)}

/* PIX / Boleto blocos */
.aco-pix{text-align:center;padding:6px 0 2px}
.aco-pix img{width:190px;height:190px;object-fit:contain;border:1px solid var(--areia-d,#d4c2a8);background:#fff;padding:8px;border-radius:4px;margin:6px auto 14px;display:block}
.aco-copy{display:flex;gap:0;margin:0 0 12px}
.aco-copy input{flex:1;border:1px solid var(--areia-d,#d4c2a8);background:#fff;font-family:var(--sans,sans-serif);font-size:11px;color:var(--moca,#6b5442);padding:10px 12px;outline:none;border-radius:2px 0 0 2px;text-overflow:ellipsis}
.aco-copy button{border:1px solid var(--escuro,#1e1a16);border-left:none;background:var(--escuro,#1e1a16);color:#fff;font-family:var(--sans,sans-serif);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:0 15px;cursor:pointer;border-radius:0 2px 2px 0;transition:background .2s;white-space:nowrap}
.aco-copy button:hover{background:var(--terra,#c4693a)}
.aco-note{font-size:11px;color:var(--moca,#6b5442);line-height:1.6;background:var(--marfim,#f5ede0);border:1px solid var(--areia-d,#d4c2a8);padding:11px 13px;border-radius:3px;margin-bottom:14px}
.aco-note strong{color:var(--escuro,#1e1a16)}
.aco-boleto-line{font-family:var(--sans,sans-serif);font-size:14px;letter-spacing:.02em;color:var(--escuro,#1e1a16);background:#fff;border:1px dashed var(--areia-dd,#c4ae90);padding:13px;text-align:center;border-radius:3px;margin-bottom:12px;word-break:break-all}

/* Resumo (coluna direita) */
.aco-side{background:var(--marfim,#f5ede0);border-left:1px solid var(--areia-d,#d4c2a8);padding:30px 28px;overflow-y:auto;max-height:94vh}
.aco-side-h{font-family:var(--sans,sans-serif);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bege,#c9b394);margin-bottom:18px}
.aco-sit{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(212,194,168,.5)}
.aco-sit img{width:52px;height:68px;object-fit:cover;flex:none;border-radius:2px}
.aco-sit-n{font-family:var(--serif,Georgia);font-size:14px;color:var(--escuro,#1e1a16);line-height:1.2;margin-bottom:3px}
.aco-sit-m{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bege,#c9b394)}
.aco-sit-p{font-size:12px;color:var(--moca,#6b5442);margin-top:3px}
.aco-tot{display:flex;justify-content:space-between;font-size:12px;color:var(--moca,#6b5442);padding:4px 0}
.aco-tot.big{font-size:17px;color:var(--escuro,#1e1a16);font-family:var(--serif,Georgia);padding-top:11px;margin-top:6px;border-top:1px solid var(--areia-d,#d4c2a8)}
.aco-tot .desc{color:#5a9a5a}
.aco-side-safe{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:10px;color:var(--bege,#c9b394);letter-spacing:.06em}
.aco-side-safe svg{width:15px;height:15px;stroke:var(--bege,#c9b394);fill:none;stroke-width:1.6;flex:none}

/* Botões */
.aco-actions{display:flex;gap:10px;margin-top:20px}
.aco-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-align:center;background:var(--escuro,#1e1a16);color:var(--creme,#faf6f0);border:none;font-family:var(--sans,sans-serif);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;padding:15px 20px;cursor:pointer;text-decoration:none;transition:background .3s,opacity .2s;border-radius:2px}
.aco-btn:hover{background:var(--terra,#c4693a)}
.aco-btn.ghost{background:transparent;color:var(--moca,#6b5442);border:1px solid var(--areia-d,#d4c2a8);flex:0 0 auto;padding:15px 22px}
.aco-btn.ghost:hover{background:var(--areia,#e8d9c4);color:var(--escuro,#1e1a16)}
.aco-btn.wa{background:#25d366}.aco-btn.wa:hover{background:#1ebe5b}
.aco-btn[disabled]{opacity:.5;cursor:not-allowed}
.aco-btn svg{width:17px;height:17px;fill:currentColor}
.aco-btn.spin{pointer-events:none;opacity:.75}
.aco-btn.spin::after{content:'';width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:acoSpin .7s linear infinite}
@keyframes acoSpin{to{transform:rotate(360deg)}}

/* Sucesso / recusa */
.aco-result{text-align:center;padding:14px 8px 6px}
.aco-result .ico{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.aco-result.ok .ico{background:#e6f3ea}
.aco-result.err .ico{background:#fbe9e6}
.aco-result.pending .ico{background:#fbead0}
.aco-result .ico svg{width:38px;height:38px;fill:none;stroke-width:2.4}
.aco-result.ok .ico svg{stroke:#2f7d4e}
.aco-result.err .ico svg{stroke:#c0503f}
.aco-result.pending .ico svg{stroke:#a3671a}
.aco-result h3{font-family:var(--serif,Georgia);font-size:26px;font-weight:300;color:var(--escuro,#1e1a16);margin-bottom:8px}
.aco-result p{font-size:13px;color:var(--moca,#6b5442);line-height:1.6;max-width:340px;margin:0 auto 6px}
.aco-result .oid{font-family:var(--sans,sans-serif);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bege,#c9b394);margin:14px 0 22px}

/* Responsivo */
@media(max-width:820px){
  .aco{padding:0}
  .aco-c{grid-template-columns:1fr;max-height:100vh;height:100%}
  .aco-side{border-left:none;border-top:1px solid var(--areia-d,#d4c2a8);order:-1;max-height:none;padding:22px 22px 18px}
  .aco-main{max-height:none}
  .aco-side .aco-sit{display:none}
  .aco-side .aco-side-h::after{content:' — toque em Ver itens';font-size:9px}
}
@media(max-width:520px){
  .aco-grid{grid-template-columns:1fr}
  .aco-f.col2{grid-column:span 1}
  .aco-tabs{grid-template-columns:repeat(2,1fr)}
  .aco-main{padding:24px 20px 26px}
}