/* --- resumo no topo ------------------------------------------------------------------- */
.metrica { display: flex; align-items: center; gap: 14px; }
.metrica-icone { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); color: #fff; }
.metrica-icone .icone { width: 22px; height: 22px; }
.metrica-valor { font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.metrica-rotulo { color: var(--tblr-secondary); font-size: .85rem; margin-top: 4px; }
.metrica.ok .metrica-icone { background: rgba(52, 211, 153, .14); color: #34d399; }
.metrica.atencao .metrica-icone { background: rgba(248, 113, 113, .14); color: #f87171; }

/* --- janela: classes do Tabler abertas pelo script, sem o JS do kit -------------------- */
.modal.aberta { display: block; opacity: 1; overflow-y: auto; }
.modal-backdrop.aberta { opacity: .7; }

/* --- capas dos jogos ------------------------------------------------------------------ */
.capas { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capa { min-width: 0; }
.capa img, .jogo-linha img { display: block; width: 100%; aspect-ratio: 460 / 215; object-fit: cover;
  border-radius: 7px; background: var(--tblr-bg-surface-secondary); }
.capa span { display: block; margin-top: 4px; font-size: .8rem; color: var(--tblr-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
img.sem-capa { visibility: hidden; }

.jogo-linha { display: flex; align-items: center; gap: 12px; padding: 8px; }
.jogo-linha img { width: 92px; flex: none; }
.jogo-linha .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lista-jogos { max-height: 300px; overflow-y: auto; }

.codigo-caixa { border: 1px solid rgba(248, 113, 113, .55); border-radius: 10px; padding: 12px;
  background: rgba(248, 113, 113, .06); }
.codigo-caixa input { text-align: center; font-size: 1.4rem; letter-spacing: .3em; text-transform: uppercase; }
.passos { display: flex; gap: 6px; margin-bottom: 16px; }
.passo { flex: 1; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.passo.feito { background: var(--marca-degrade); }

@media (max-width: 480px) { .capas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- pagamento por Pix ------------------------------------------------------------ */
.qr-pix { width: 220px; max-width: 100%; height: auto; background: #fff; padding: 10px; border-radius: 12px; }
textarea.form-control { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
#plano .alert { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* pagina de ajuda: perguntas que abrem e fecham */
.ajuda { max-width: 860px; }
.ajuda-item { border: 1px solid var(--tblr-border-color); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; background: var(--tblr-bg-surface); }
.ajuda-item summary { font-weight: 600; }
.ajuda-item[open] summary { margin-bottom: 8px; }
.ajuda-item p, .ajuda-item ul, .ajuda-item ol { color: var(--tblr-secondary); margin-bottom: 8px; }

/* o que fazer agora: orientacao no cartao da conta */
.proximo-passo { border-left: 3px solid #3b82f6; background: rgba(59, 130, 246, .08); border-radius: 6px; padding: 10px 12px; }
.proximo-passo.urgente { border-left-color: #ef4444; background: rgba(239, 68, 68, .08); }

/* pagina de termos: coluna de leitura */
.termos { max-width: 860px; }
.termos h2 { font-size: 1.15rem; }

/* --- pagamento facilitado por Pix ------------------------------------------------------------ */
.selo-pix { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700;
  letter-spacing: .04em; color: #32bcad; background: rgba(50, 188, 173, .14); border: 1px solid rgba(50, 188, 173, .35); white-space: nowrap; }
.passos-pix { margin: 14px 0; padding-left: 20px; color: var(--tblr-secondary); display: grid; gap: 6px; }
.passos-pix li::marker { color: #32bcad; font-weight: 700; }
details summary { cursor: pointer; }

/* plano do meio da vitrine */
.plano-destaque { border-color: rgba(59, 130, 246, .65); box-shadow: 0 0 0 1px rgba(59, 130, 246, .35), 0 14px 40px rgba(0, 0, 0, .45); }

/* campo fora da tela, so para copiar texto sem abrir janela */
.copia-oculta { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* QR do login: fundo branco e pixels nitidos, para o celular ler de primeira */
.qr-imagem { background: #fff; padding: 10px; border-radius: 12px; image-rendering: pixelated; max-width: 100%; height: auto; }

/* escolha de como entrar na Steam (QR ou senha) */
.opcao-entrada { display: block; width: 100%; text-align: left; white-space: normal; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface); color: inherit; cursor: pointer; }
.opcao-entrada:hover { border-color: #3b82f6; }
.opcao-entrada.recomendada { border-color: rgba(59, 130, 246, .65); box-shadow: 0 0 0 1px rgba(59, 130, 246, .25); }
.opcao-entrada .titulo { font-weight: 700; margin-bottom: 4px; }
.opcao-entrada .texto { font-size: .85rem; color: var(--tblr-secondary); }

/* conta reiniciando: faixa com o circulo girando no lugar dos botoes */
.espera-conta { background: rgba(59, 130, 246, .10); border: 1px solid rgba(59, 130, 246, .35); }