/* ==========================================================================
   Modal de validação de aposta AO VIVO (2026-07-16)
   Cobre a espera de até 8s antes da confirmação, e os 4 desfechos possíveis:
   confirmada / odds alteradas / mercado indisponível / erro.
   Puramente visual — não decide nada, só mostra o estado que o betslip.js manda.
   Usa as variáveis de variables.css (verde da casa, fundos, raios, sombras).
   ========================================================================== */

.lvm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;      /* centraliza vertical  */
    justify-content: center;  /* centraliza horizontal */
    padding: var(--space-lg);
    background: rgba(6, 13, 8, 0.72);          /* --bg-darkest com alpha */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .22s ease;
    /* Só intercepta clique quando está de fato aberto. Enquanto some (fade de
       .22s) ou se sobrar algo na tela, não engole clique de ninguém. */
    pointer-events: none;
}
.lvm-overlay.is-open { opacity: 1; pointer-events: auto; }

/* O atributo [hidden] do navegador é `display: none` numa regra MENOS específica
   que `.lvm-overlay { display: flex }` — ou seja, sozinho ele NÃO esconde nada.
   Sem isto o overlay ficava na tela invisível, fixed cobrindo tudo, e engolia
   todos os cliques (travou Fechar/Compartilhar do bilhete em 16/07). O close()
   também desmonta o elemento; isto aqui é a segunda linha de defesa. */
.lvm-overlay[hidden] { display: none; }

.lvm-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-card) 60%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 0 40px var(--green-glow);
    padding: var(--space-2xl) var(--space-xl) var(--space-xl);
    text-align: center;
    transform: translateY(10px) scale(.98);
    opacity: 0;
    transition: transform .26s cubic-bezier(.16, 1, .3, 1), opacity .26s ease;
}
.lvm-overlay.is-open .lvm-card { transform: translateY(0) scale(1); opacity: 1; }

/* Fio de luz no topo do card — o "glow discreto" */
.lvm-card::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--green-light), transparent);
    opacity: .7;
}

/* ---------- Ícone ---------- */
.lvm-icon {
    width: 64px; height: 64px;
    margin: 0 auto var(--space-lg);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    background: var(--green-glow);
    border: 1px solid var(--green-dark);
    color: var(--green-light);
}
.lvm-icon svg { width: 30px; height: 30px; }

/* Girando durante a verificação */
.lvm-state-checking .lvm-icon svg { animation: lvm-spin 1.6s linear infinite; }
@keyframes lvm-spin { to { transform: rotate(360deg); } }

/* Halo pulsante enquanto verifica */
.lvm-state-checking .lvm-icon { animation: lvm-pulse 2s ease-in-out infinite; }
@keyframes lvm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--green-glow-strong); }
    50%      { box-shadow: 0 0 0 10px rgba(0, 166, 81, 0); }
}

/* ---------- Texto ---------- */
.lvm-title {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    letter-spacing: -.01em;
}
.lvm-sub {
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-xl);
}

/* ---------- Barra de progresso ---------- */
.lvm-bar {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--bg-input);
    overflow: hidden;
    border: 1px solid var(--border);
}
.lvm-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--green-dark), var(--green-light));
    box-shadow: 0 0 12px var(--green-glow-strong);
    transition: width .25s linear;
}
/* Brilho correndo por cima da barra enquanto verifica */
.lvm-state-checking .lvm-bar-fill::after {
    content: '';
    display: block; height: 100%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(240, 245, 241, .35), transparent);
    animation: lvm-sheen 1.2s ease-in-out infinite;
}
@keyframes lvm-sheen { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

.lvm-count {
    margin-top: var(--space-md);
    font-size: var(--font-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.lvm-count strong { color: var(--green-light); font-size: var(--font-base); }

/* ---------- Odd destacada (caso "odds alteradas") ---------- */
.lvm-odds {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.lvm-odd {
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lvm-odd--old {
    background: var(--bg-input);
    color: var(--text-muted);
    text-decoration: line-through;
    border: 1px solid var(--border);
}
.lvm-odd--new {
    background: var(--odds-bg-selected);
    color: var(--text-accent);
    border: 1px solid var(--odds-border-selected);
    box-shadow: var(--shadow-glow);
    animation: lvm-pop .4s cubic-bezier(.16, 1, .3, 1);
}
@keyframes lvm-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lvm-arrow { color: var(--text-muted); display: flex; }
.lvm-arrow svg { width: 16px; height: 16px; }

/* ---------- Botões ---------- */
.lvm-actions { display: flex; flex-direction: column; gap: var(--space-sm); }
.lvm-btn {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter .18s ease, transform .12s ease;
    font-family: var(--font-family);
}
.lvm-btn:active { transform: scale(.985); }
.lvm-btn--primary {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: #fff;
    box-shadow: var(--shadow-glow-green);
}
.lvm-btn--primary:hover { filter: brightness(1.08); }
.lvm-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-light);
}
.lvm-btn--ghost:hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* ---------- Variações por desfecho ---------- */
.lvm-state-success .lvm-icon {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
    animation: lvm-pop .45s cubic-bezier(.16, 1, .3, 1);
}
.lvm-state-success .lvm-bar-fill { background: linear-gradient(90deg, var(--green), var(--success)); }

.lvm-state-changed .lvm-icon {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning);
}
.lvm-state-changed .lvm-bar-fill { background: linear-gradient(90deg, var(--warning), var(--primary)); }

.lvm-state-blocked .lvm-icon,
.lvm-state-error .lvm-icon {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}
.lvm-state-blocked .lvm-bar-fill,
.lvm-state-error .lvm-bar-fill { background: var(--danger); }

/* ---------- Mobile ---------- */
/* Continua CENTRALIZADO: o align-items:center vem do bloco base e não é
   sobrescrito aqui. (Antes isto usava align-items:flex-end e virava bottom
   sheet — o card colava embaixo em vez de ficar no meio da tela.) */
@media (max-width: 480px) {
    .lvm-overlay { padding: var(--space-md); }
    .lvm-card {
        max-width: 100%;
        padding: var(--space-xl) var(--space-lg) var(--space-lg);
    }
    .lvm-icon { width: 56px; height: 56px; }
}

/* Respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion: reduce) {
    .lvm-overlay, .lvm-card, .lvm-bar-fill { transition: none; }
    .lvm-state-checking .lvm-icon,
    .lvm-state-checking .lvm-icon svg,
    .lvm-state-checking .lvm-bar-fill::after { animation: none; }
}