/* ============================================================
   Animação de giro para o ícone de atualizar saldo (refresh)
   que fica dentro do bloco "currency-info-box" nativo e também
   dentro do perfil que o auth-state.js monta em #sg-auth-bar.

   O ícone já tem o handler nativo do Vue que atualiza o saldo;
   este CSS só adiciona o retorno visual (giro) enquanto o
   JS balance-refresh.js mantém a classe .sg-spin-balance.
   ============================================================ */

@keyframes sgBalanceSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Alvo: qualquer ícone com "refresh-icon" no nome da classe
   (as classes são hash do Vite — ex.: _refresh-icon_1gbcf_178),
   dentro do balance block nativo ou do perfil montado no header. */
.sg-auth-native-profile [class*="refresh-icon"].sg-spin-balance,
[class*="currency-info-box"] [class*="refresh-icon"].sg-spin-balance {
  animation: sgBalanceSpin 0.7s linear infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform;
}

/* Garante que o ícone é claramente clicável mesmo que o Vue
   remova o cursor em algum ciclo de render. */
.sg-auth-native-profile [class*="refresh-icon"],
[class*="currency-info-box"] [class*="refresh-icon"] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}