/* MSUPTECH_PAGAMENTO_ONLINE_V2 — o painel do Pix, dentro do carrinho.
   Folha propria, carregada por ultimo. Classes novas (pix-box-*), entao
   nao ha regra antiga com !important disputando. */

/* `hidden` e ATRIBUTO, e o navegador o declara como [hidden]{display:none}
   com especificidade zero — qualquer regra de classe com `display` o
   derrota em silencio. Aconteceu com as duas coisas opcionais deste
   painel: o QR virava icone de imagem quebrada (display:block, daqui
   mesmo) e a fatura virava link para lugar nenhum (display:flex, do .btn
   da loja) — justamente nos casos que o JS pensava ter escondido.
   Achado olhando a tela, nao lendo o codigo. */
.pix-box [hidden] { display: none !important; }

.pix-box {
  margin-top: 14px;
  padding: 16px;
  border-radius: 12px;
  border: 2px solid #12b886;
  background: rgba(18, 184, 134, 0.07);
}

.pix-box-titulo {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}

.pix-box-texto {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
  opacity: .85;
}

.pix-box-qr {
  display: block;
  width: 168px;
  height: 168px;
  margin: 0 auto 12px;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

/* O codigo Pix tem ~200 caracteres sem espaco nenhum. Sem quebrar dentro
   da caixa, ele estica o carrinho e joga barra de rolagem horizontal na
   pagina inteira — no celular, que e onde quase todo pedido acontece. */
.pix-box-codigo {
  display: block;
  max-height: 96px;
  overflow-y: auto;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .18);
  background: rgba(255, 255, 255, .55);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}

.pix-box-botoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* A fatura e um <a class="btn">. O .btn da loja foi escrito para <button>
   e nao neutraliza a cor nem o sublinhado do link, entao ele saia como
   texto azul ao lado de um botao de verdade. */
.pix-box-botoes .btn {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
}

.pix-box-aviso {
  min-height: 18px;
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}

/* A caixa aparece sobre o tema escuro da loja tambem. Sem isto, o codigo
   ficava texto escuro sobre fundo escuro e o cliente nao lia o que
   precisava copiar. */
@media (prefers-color-scheme: dark) {
  .pix-box-codigo {
    background: rgba(0, 0, 0, .35);
    border-color: rgba(255, 255, 255, .18);
    color: #F2F2F2;
  }
}