/*
 * "Os meus limites" fora da página (12/10/2026; opção C, aprovada pelo dono): o item do menu (só para conta com limite
 * próprio), o limite nos boletins do FIFA e do Desporto (.lim-*) e o pedido de revisão na porta única (.pa-*).
 * public/js/novo/limites.js e pedir-ajuda.js desenham; aqui só o visual. Uma animação por bloco; quem pede menos
 * movimento vê tudo parado.
 */

/* ---- o item "Os meus limites" no avatar, na gaveta e na área da conta */
[data-so-limitado][hidden] { display: none !important; }

/* ---- o boletim do FIFA: "O seu limite nesta seleção · já apostou · resta" */
.lim-faixa { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #14171b; border: 1px solid #2a3037; }
.lim-faixa[hidden] { display: none; }
.lim-faixa.passou { border-color: rgba(255, 212, 59, .38); }
.lim-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lim-linha > span:first-child { min-width: 0; font-size: 13px; line-height: 1.35; color: #b9bec5; }
.lim-valor { flex: none; font-size: 15px; font-weight: 800; color: #ffd43b; font-variant-numeric: tabular-nums; }
.lim-amarelo { color: #ffd43b; font-variant-numeric: tabular-nums; }
.lim-sub { font-size: 12px; line-height: 1.4; color: #8a919a; }
.lim-sub strong { color: #fff; font-variant-numeric: tabular-nums; }
.lim-porque { flex: none; font-size: 12px; font-weight: 700; color: #00ff88 !important; text-decoration: none; }
.lim-porque:hover { color: #7dffc0 !important; text-decoration: underline; }
.lim-barra { display: flex; height: 6px; border-radius: 99px; background: #2a3037; overflow: hidden; }
.lim-barra i { display: block; height: 6px; transition: width .3s ease; animation: lim-barra .9s cubic-bezier(.2, .8, .2, 1) backwards; }
.lim-ja { background: #8a919a; }
.lim-desta { background: #00ff88; animation-delay: .3s !important; }
.lim-desta.passou { background: #ffd43b; }
@keyframes lim-barra { from { width: 0; } }

/* o aviso amarelo, fixo até o valor caber (no lugar da caixa vermelha que some) */
.lim-aviso { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px;
    background: #2a2208; border: 1px solid rgba(255, 212, 59, .38); animation: lim-aviso .25s ease-out both; }
.lim-aviso[hidden] { display: none; }
.lim-aviso > span { min-width: 0; font-size: 13px; line-height: 1.4; color: #ffd43b; }
.lim-usar { flex: none; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 212, 59, .5); background: transparent; color: #ffd43b;
    font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.lim-usar:hover { background: rgba(255, 212, 59, .08); }
.lim-usar:focus-visible, .lim-porque:focus-visible { outline: 2px solid #ffd43b; outline-offset: 2px; }
@keyframes lim-aviso { from { opacity: 0; transform: translateY(-4px); } }

/* as fichas acima do que resta ficam apagadas; o "Máx" usa o que resta; o botão trava acima dele */
.bet-quick-chip.lim-acima:not(.active) { color: #8a919a; }
.bet-quick-chip.lim-max { color: #00ff88; border-color: #1d5a42; }
.bet-stake-input.lim-passou, .bet-stake-input.lim-passou:focus { border-color: rgba(255, 212, 59, .6) !important; }
#placeBetBtn.lim-travado { background: #2a3037 !important; color: #8a919a !important; box-shadow: none !important; cursor: not-allowed; }

/* ---- o boletim do Desporto: "O seu limite: R$ X por boletim" */
.sp-slip-teto.lim-teto { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sp-slip-teto.lim-teto[hidden] { display: none; }
.sp-slip-quick + .lim-aviso { margin-top: 0; }
.sp-slip-stake.lim-passou, .sp-slip-stake.lim-passou:focus-within { border-color: rgba(255, 212, 59, .6) !important; }
[data-slip="submit"].lim-travado { background: #2a3037 !important; color: #8a919a !important; opacity: 1 !important; cursor: not-allowed; }

/* ---- a porta única: "O meu limite de apostas" e o pedido de revisão */
.pa-limite { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 10px 14px; box-sizing: border-box; border-radius: 14px;
    border: 2px solid var(--nv-verde, #00ff88); background: #14171b; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.pa-limite:hover { background: #171b20; }
.pa-limite img { flex: none; width: 56px; height: 56px; }
.pa-limite-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-limite-texto b { font-size: 16px; font-weight: 800; }
.pa-limite-texto span { font-size: 13px; color: var(--nv-texto-2, #b9bec5); }
.pa-novo { position: absolute; top: -10px; right: 12px; padding: 3px 8px; border-radius: 99px; background: #ffd43b; color: #0e1013; font-size: 11px; font-weight: 700; }
.pa-limite:focus-visible { outline: 2px solid var(--nv-verde, #00ff88); outline-offset: 2px; }

.pa-limite-passo { display: flex; flex-direction: column; gap: 12px; animation: pa-ao-lado .3s ease-out both; }
@keyframes pa-ao-lado { from { opacity: 0; transform: translateX(16px); } }
.pa-junto { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #14171b; border: 1px solid var(--nv-linha, #2a3037); }
.pa-junto > span { font-size: 13px; color: #8a919a; }
.pa-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-selo { padding: 4px 10px; border-radius: 99px; background: #1b1f24; border: 1px solid #3a424b; color: #b9bec5; font-size: 12px; font-weight: 700; }
.pa-selo.ok { background: #0b2d21; border-color: #1d5a42; color: #00ff88; }
.pa-selo.espera { background: #2a2208; border-color: rgba(255, 212, 59, .38); color: #ffd43b; }
.pa-folha .pa-link { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--nv-verde, #00ff88); text-decoration: none; }
.pa-folha .pa-link:hover { text-decoration: underline; }
.pa-folha .pa-link-centro { align-self: center; padding: 6px 0; font-size: 15px; font-weight: 600; }
.pa-rotulo-forte { font-size: 14px; font-weight: 600; color: #fff; }
.pa-rotulo-forte span { font-weight: 400; color: #8a919a; }
.pa-texto-livre { padding: 12px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--nv-linha-2, #3a424b); background: var(--nv-fundo, #0e1013); color: #fff;
    font: inherit; font-size: 16px; line-height: 1.4; resize: none; }
.pa-texto-livre:focus { outline: none; border-color: var(--nv-verde, #00ff88); }
.pa-texto-livre::placeholder { color: #737a83; }
.pa-info { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: #8a919a; }
.pa-info svg { flex: none; margin-top: 1px; }
.pa-botao-texto { height: 40px; border: 0; background: transparent; color: var(--nv-texto-2, #b9bec5); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pa-botao-texto:hover { color: #fff; }
.pa-botao-texto:focus-visible, .pa-folha .pa-link:focus-visible { outline: 2px solid var(--nv-verde, #00ff88); outline-offset: 2px; border-radius: 6px; }

/* "Pedido enviado" e as 3 etapas */
.pa-enviado { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6px; text-align: center; }
.pa-enviado img { width: 120px; height: 120px; }
.pa-enviado-titulo { font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 38px; line-height: 1; text-transform: uppercase; }
.pa-enviado span { font-size: 15px; color: var(--nv-texto-2, #b9bec5); }
.pa-enviado strong, .pa-heroi strong { color: #fff; }
.pa-etapas { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 4px 0 0; padding: 16px; border-radius: 14px; background: #14171b; border: 1px solid var(--nv-linha, #2a3037); text-align: left; }
.pa-etapas li { display: flex; align-items: flex-start; gap: 12px; }
.pa-etapas li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-etapas b { font-size: 15px; color: #fff; }
.pa-etapas li:not(.feita):not(.agora) b { color: #b9bec5; }
.pa-etapas small { font-size: 13px; line-height: 1.45; color: #8a919a; }
.pa-etapa-ponto { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%;
    background: #1b1f24; border: 2px solid #3a424b; color: #00ff88; }
.pa-etapas .feita .pa-etapa-ponto { background: #0b2d21; border-color: #00ff88; }
.pa-etapas .agora .pa-etapa-ponto { background: #2a2208; border-color: #ffd43b; }
.pa-pulso { animation: pa-pulso 1.8s ease-in-out infinite; }
@keyframes pa-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 59, .45); } 50% { box-shadow: 0 0 0 8px rgba(255, 212, 59, 0); } }
.pa-entrar { animation: pa-subir .5s ease-out both; }
@keyframes pa-subir { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
    .lim-barra i, .lim-aviso, .pa-limite-passo, .pa-pulso, .pa-entrar { animation: none !important; }
    .lim-barra i { transition: none; }
}