/* (0.4.0) A conta da marcenaria (conta.mobpro.com.br): por cima do painel.css (as mesmas variáveis e o modo escuro). */
[hidden] { display: none !important; }
.topo--conta { justify-content: space-between; }
/* o "Pro" e o "MINHA CONTA" na cor do M do símbolo do MobPro (o laranja), como o painel usa a cor do M dele (o pedido dele em 22/10/2026) */
.topo--conta .marca em, .topo--conta .marca small { color: #f88205; }
.topo-nome { color: #e9e6f4; font-weight: 600; font-size: 14px; }
.conta-principal { max-width: 1120px; }
.checkout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.checkout-lado { position: sticky; top: 76px; }
.botao--grande { padding: 12px 22px; font-size: 16px; }
.botao--quadrado { width: 42px; height: 42px; padding: 0; font-size: 20px; }
.link-perigo { color: var(--cor-erro); }

.passos-do-checkout { list-style: none; display: flex; gap: 6px; padding: 0; margin: 4px 0 16px; flex-wrap: wrap; }
.passos-do-checkout li { padding: 5px 12px; border-radius: 999px; background: var(--cor-neutro-fundo); color: var(--cor-suave); font-size: 13px; font-weight: 600; }
.passos-do-checkout li.feito { background: var(--cor-marca-clara); color: var(--cor-marca-texto); }

.meses { display: flex; align-items: center; gap: 10px; }
.meses-campo { width: 76px !important; text-align: center; font-size: 20px; font-weight: 700; }
.formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.forma { position: relative; cursor: pointer; }
.forma input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.forma span { display: grid; gap: 2px; border: 2px solid var(--cor-borda); border-radius: 12px; padding: 12px 14px; background: var(--cor-campo); }
.forma small { color: var(--cor-suave); font-size: 12px; }
.forma .forma-preco { font-size: 18px; margin-top: 4px; }
.forma input:checked + span { border-color: var(--cor-marca); background: var(--cor-marca-clara); }
.forma input:focus-visible + span { outline: 2px solid var(--cor-marca); outline-offset: 2px; }
.conta-linha { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--cor-neutro-fundo); font-size: 14px; }
.conta-linha span { color: var(--cor-suave); }
.conta-linha small { color: var(--cor-suave); }

.resumo .linha { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.resumo .linha span:first-child { color: var(--cor-suave); }
.resumo .linha--pequena { font-size: 13px; }
.resumo .linha--desconto { color: var(--cor-ok); }
.resumo .linha--desconto span { color: var(--cor-ok) !important; }
.resumo .linha--total { font-size: 19px; font-weight: 700; border-top: 1px solid var(--cor-borda); margin-top: 6px; padding-top: 10px; }
.resumo .linha--total strong { color: var(--cor-ok); }
.resumo hr { border: 0; border-top: 1px solid var(--cor-borda); margin: 12px 0; }
.lista-de-certo { list-style: none; padding: 0; margin: 10px 0; font-size: 14px; }
.lista-de-certo li { padding: 3px 0 3px 22px; position: relative; }
.lista-de-certo li::before { content: "✓"; position: absolute; left: 2px; color: var(--cor-ok); font-weight: 700; }
.selo-largo { text-align: center; border: 1px solid var(--cor-borda); border-radius: 8px; padding: 8px; font-weight: 600; font-size: 13px; margin: 8px 0 0; }
.preco-grande { font-size: 30px; font-weight: 800; margin: 0; }
.preco-grande small { font-size: 15px; font-weight: 600; color: var(--cor-suave); }

.validade-caixa { border: 1px solid var(--cor-ok-fundo); background: var(--cor-ok-fundo); border-radius: 12px; padding: 12px 14px; }
.validade-rotulo { color: var(--cor-ok); font-weight: 700; font-size: 13px; margin: 0; }
.validade-data { font-size: 19px; font-weight: 800; margin: 2px 0; }
.validade h3 { font-size: 14px; margin: 14px 0 4px; }
.tabela--pequena { font-size: 13px; }
.tabela--pequena td, .tabela--pequena th { padding: 6px 6px; vertical-align: top; }
.tabela--pequena small { color: var(--cor-suave); }
.volta { color: var(--cor-ok); }
.nao-volta { color: var(--cor-suave); }
.avisos-do-cancelamento { font-weight: 400; font-size: 13px; margin-top: 12px; }
.avisos-do-cancelamento ul { margin: 0; padding-left: 18px; }
.avisos-do-cancelamento li + li { margin-top: 4px; }

.endereco-do-site { display: flex; align-items: center; border: 1px solid var(--cor-borda); border-radius: 8px; background: var(--cor-campo); overflow: hidden; }
.endereco-do-site span { padding: 0 8px; color: var(--cor-suave); font-size: 14px; white-space: nowrap; }
.endereco-do-site input { border: 0 !important; border-radius: 0 !important; flex: 1; min-width: 0; padding-left: 2px !important; }
.pela-chave { margin-top: 12px; }
.pela-chave summary { cursor: pointer; color: var(--cor-link); font-size: 14px; }
.chave-grande { margin: 0 0 8px; }
.assinatura .sit { white-space: normal; }
.chave-grande .chave { font-size: 15px; }

.pix-qr { display: flex; justify-content: center; margin: 8px 0 14px; }
.pix-qr img { background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--cor-borda); }
#copia-e-cola { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; word-break: break-all; }
.esperando { display: flex; align-items: center; gap: 8px; color: var(--cor-suave); font-size: 14px; }
.girando { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cor-borda); border-top-color: var(--cor-marca); animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }
.resultado-do-pagamento { text-align: center; }
.icone-grande { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; }
.resultado--ok .icone-grande { background: var(--cor-ok-fundo); color: var(--cor-ok); }
.resultado--erro .icone-grande { background: var(--cor-erro-fundo); color: var(--cor-erro); }

@media (max-width: 860px) {
  .checkout { grid-template-columns: minmax(0, 1fr); }
  .checkout-lado { position: static; }
  .topo-nome { display: none; }
}