/* Tela de Pagamento (checkout/pagamento): restilizacao por CSS do fragmento
   checkout/confirm. O panel-body inteiro vira um unico card branco; a tabela
   do pedido fica como uma faixa destacada no topo desse card, e o bloco do
   meio de pagamento (h2/p/.well/.buttons que o bank_transfer imprime como
   irmaos soltos, sem wrapper) flui como conteudo normal dentro do mesmo
   card — assim nenhum seletor de maior especificidade (o antigo "> *:not(...)")
   compete com .buttons/.btn-primary. Nenhum id/classe do fragmento muda: e
   por eles que o MercadoPago se pendura. */
.route-checkout-pagamento #container { background: var(--xara-surface); color: var(--xara-ink); }
.route-checkout-pagamento #content { float: none; width: auto; padding: 0; }
.route-checkout-pagamento .breadcrumb { display: none; height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }

.xara-pagamento { padding: 24px 0 88px; }
.xara-pagamento__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.xara-pagamento__titulo { font-size: clamp(1.6rem, 6vw, 2.3rem); margin: 0; }
.xara-pagamento__voltar { display: inline-flex; align-items: center; margin-bottom: 16px; }

/* esqueleto: o painel vira uma coluna centralizada */
.xara-pagamento #accordion { max-width: 720px; margin: 0 auto; }
.xara-pagamento .xara-pagamento__painel { border: 0; background: none; box-shadow: none; margin: 0; }
.xara-pagamento #collapse-checkout-confirm .panel-body { padding: 18px; background: var(--xara-surface-panel); border: 1px solid var(--xara-border); border-radius: var(--xara-raio); display: block; }

/* tabela do pedido -> lista, como faixa destacada no topo do card */
.xara-pagamento .checkout-product { margin: -18px -18px 18px; padding: 18px; background: var(--xara-surface); border: 0; border-bottom: 1px solid var(--xara-border); border-radius: var(--xara-raio) var(--xara-raio) 0 0; }
.xara-pagamento .checkout-product table, .xara-pagamento .checkout-product tbody, .xara-pagamento .checkout-product tfoot { display: block; width: 100%; }
.xara-pagamento .checkout-product table { margin: 0; border: 0; }
.xara-pagamento .checkout-product thead { display: none; }
.xara-pagamento .checkout-product tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--xara-border); }
.xara-pagamento .checkout-product td { border: 0; padding: 0; background: none; }
.xara-pagamento .checkout-product td.name { grid-column: 1; }
.xara-pagamento .checkout-product td.name a { font-family: var(--xara-fonte-display); font-weight: 600; font-size: 1rem; color: var(--xara-ink); text-decoration: none; }
.xara-pagamento .checkout-product td.name small { font-size: .8rem; color: var(--xara-sage); font-weight: 600; }
.xara-pagamento .checkout-product td.model { display: none; }
.xara-pagamento .checkout-product td.quantity { grid-column: 1; font-size: .8rem; color: #6A625B; }
.xara-pagamento .checkout-product td.price { display: none; }
.xara-pagamento .checkout-product td.total { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-family: var(--xara-fonte-display); font-weight: 600; text-align: right; }
.xara-pagamento .checkout-product tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .92rem; font-variant-numeric: tabular-nums; }
.xara-pagamento .checkout-product tfoot tr:last-child { font-family: var(--xara-fonte-display); font-size: 1.3rem; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--xara-border); }
.xara-pagamento .checkout-product tfoot td { text-align: left; }
.xara-pagamento .checkout-product tfoot td:last-child { text-align: right; font-weight: 600; }

/* linha do cartao de presente injetada pela extensao (texto solto depois da tabela) */
.xara-pagamento #collapse-checkout-confirm .panel-body > br { display: none; }

/* estado de carregamento (antes do fragmento chegar) */
.xara-pagamento #xara-pagamento-carregando { text-align: center; }

.xara-pagamento .form-control { height: 48px; padding: 10px 14px; border: 1px solid var(--xara-border); border-radius: 12px; box-shadow: none; font-size: 1rem; }
.xara-pagamento .form-control:focus { border-color: var(--xara-gold); outline: 3px solid var(--xara-gold); outline-offset: 2px; box-shadow: none; }
.xara-pagamento .buttons { background: none; border: 0; padding: 0; margin-top: 12px; }
.xara-pagamento .buttons .pull-right { float: none; width: 100%; }
.xara-pagamento .btn-primary, .xara-pagamento input[type="button"].btn, .xara-pagamento .button, .xara-pagamento #button-confirm {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 26px;
  border: 1px solid transparent; border-radius: var(--xara-raio-pill); background: var(--xara-accent); color: #FFF;
  font-family: var(--xara-fonte-corpo); font-weight: 700; font-size: .95rem; box-shadow: none; text-shadow: none;
}
.xara-pagamento .btn-primary:hover, .xara-pagamento #button-confirm:hover { background: var(--xara-accent-2); color: #FFF; }
.xara-pagamento .btn-primary:focus-visible, .xara-pagamento #button-confirm:focus-visible { outline: 3px solid var(--xara-gold); outline-offset: 2px; }
.xara-pagamento .alert { border-radius: 12px; }

@media (min-width: 980px) {
  .xara-pagamento { padding: 40px 0 80px; }
}
.xara-pagamento [hidden] { display: none; }