/* dep-qr.css — 23/10 (devjunior): carregamento BONITO do QR Code PIX, sem a "listra branca".
   Antes: enquanto o QR vinha do serviço externo, o .dep-qr-wrap ficava um bloco BRANCO (background:#fff)
   com um spinner genérico. Agora, SÓ no estado .is-loading (classe que o deposit.php já põe/tira),
   vira um cartão escuro com shimmer + anel da marca + cantos de QR pulsando. Quando o QR carrega,
   a classe sai e o fundo branco volta (QR precisa de fundo branco pra escanear). CSS puro, sem mexer no JS.
   Carrega DEPOIS do brava.css (no layout) pra vencer o background:#fff. */

.dep-qr-wrap.is-loading{
  position:relative; overflow:hidden;
  min-width:168px; min-height:168px;
  background:linear-gradient(135deg,#171a2e 0%,#0e1020 100%)!important;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(22,82,240,.08);
}
/* a imagem (gif 1x1 / QR meio-carregado) some de vez enquanto gera */
.dep-qr-wrap.is-loading > .dep-qr-img{opacity:0!important}

/* shimmer diagonal varrendo o cartão (skeleton premium) */
.dep-qr-wrap.is-loading::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.14) 52%,transparent 72%);
  background-size:220% 100%;
  animation:depQrShimmer 1.25s linear infinite;
}

/* anel da marca no centro (sobrescreve o spinner genérico do .jc-loading-area) */
.dep-qr-wrap.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; z-index:2;
  width:48px; height:48px; border-radius:50%; background:none;
  border:3px solid rgb(var(--primary-color)/.18);
  border-top-color:rgb(var(--primary-color));
  animation:depQrSpin .8s linear infinite;
}

@keyframes depQrShimmer{ to{ background-position:-220% 0 } }
@keyframes depQrSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){
  .dep-qr-wrap.is-loading, .dep-qr-wrap.is-loading::before, .dep-qr-wrap.is-loading::after{ animation:none }
}