/* =====================================================
   DESKTOP LARGE (min-width: 1201px)
   ===================================================== */

@media (min-width: 1201px) {
    .main-content {
        max-width: calc(100% - var(--betslip-width));
        padding-right: var(--space-2xl);
        margin-right: var(--betslip-width);
        margin-left: auto;
    }

    .bottom-nav {
        display: none !important;
    }
}

/* =====================================================
   TABLET (max-width: 1200px)
   ===================================================== */

@media (max-width: 1200px) {
    .betslip-sidebar {
        display: none;
    }

    .main-content {
        margin-right: 0;
        padding-right: var(--space-xl);
        max-width: 100%;
    }

    .betslip-mobile-toggle {
        display: flex !important;
        bottom: 80px;
    }

    .betslip-sidebar.mobile-open {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 380px;
        z-index: var(--z-modal);
        animation: slideInRight 0.3s ease;
    }

    .betslip-sidebar.mobile-open .betslip-close-mobile {
        display: flex;
    }

    /* ── BILHETE COMO FOLHA DE BAIXO (31/08) ──────────────────────────────
       Antes o bilhete abria como painel de tela CHEIA (top:0 -> bottom:0):
       812px de altura pra 200px de conteudo, com duas selecoes. Agora ele
       sobe de baixo e para na altura do proprio bilhete, como na bet365,
       deixando a plataforma aparecendo (e escurecida) por tras.
       As regras vem DEPOIS do bloco .mobile-open original de proposito:
       mesma especificidade, entao ganha a ultima. */
    .betslip-sidebar.mobile-open {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        height: auto;
        /* Teto: bilhete comprido vira rolagem em vez de voltar a ser tela
           cheia. dvh porque no Safari do iPhone a barra de endereco entra e
           sai da conta do vh e a folha pularia de tamanho ao rolar. */
        max-height: 86vh;
        max-height: 86dvh;
        border-left: 0;
        border-top: 1px solid rgba(0, 232, 112, 0.14);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -18px 52px rgba(0, 0, 0, 0.55);
        overflow: hidden;                 /* a rolagem vive na lista, nao na folha */
        animation: betslipSobe 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .betslip-sidebar.mobile-open .betslip {
        height: auto;
        max-height: 86vh;
        max-height: 86dvh;
        /* barra de gestos do iPhone: sem isto o botao de confirmar fica
           debaixo do risco na tela inteira */
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* O flex:1 original mandava a lista ESTICAR pra preencher o painel — era
       ele que segurava a tela cheia mesmo com o bilhete curto. Agora ela mede
       o proprio conteudo e so vira rolagem quando passa do teto. */
    .betslip-sidebar.mobile-open .betslip-items {
        flex: 0 1 auto;
        max-height: 54vh;
        max-height: 54dvh;
    }

    @keyframes betslipSobe {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Escurecido cobrindo a plataforma INTEIRA. O overlay mora em z 199, que
       e ABAIXO do header (200) e da barra de baixo (300) — sem isto o topo e
       o rodape do site ficavam acesos por cima do fundo escuro. Sobe pra 499:
       logo debaixo do bilhete (500), logo em cima de todo o resto. */
    body.betslip-open .mobile-overlay.active {
        z-index: 499;
        background: rgba(0, 0, 0, 0.58);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        /* O bloco base usa transition:all, que anima ATE o z-index: durante os
           0,3s da abertura o z sobe de 199 a 499 aos poucos, entao a barra de
           cima e a de baixo ficam por CIMA do escuro e so depois somem — um
           tremido visivel no celular. Listando as propriedades a mao, o z troca
           na hora e so a cor e o desfoque animam. */
        transition: opacity 0.25s ease, background-color 0.25s ease, backdrop-filter 0.25s ease;
    }

    /* Quem prefere menos movimento na tela nao leva a folha subindo. */
    @media (prefers-reduced-motion: reduce) {
        .betslip-sidebar.mobile-open { animation: none; }
    }

    /* Overlay do ticket vira modal fullscreen no mobile — antes ficava dentro
       do .betslip (position: absolute) e cortava conteudo. Agora ocupa a tela
       inteira com backdrop bem borrado e card centralizado (menor e minimalista). */
    .betslip-ticket-overlay {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999 !important;
        /* mesmo tratamento da folha (0.58 + blur 7): 0.82 com blur 14 fechava
           demais e, no tema claro (a pagina inteira leva invert), virava um
           branco quase solido que apagava a plataforma por tras. */
        background: rgba(0, 0, 0, 0.58);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Scroll fica DENTRO do card (max-height limita) — overlay so serve
           de backdrop, sem scroll proprio. Elimina o glitch de flex+margin
           auto que colava o card no topo em iOS Safari. */
        overflow: hidden;
    }

    .betslip-ticket-overlay .betslip-ticket {
        max-width: 380px;
        width: 100%;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);           /* iOS: dynamic viewport */
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
        border: 1px solid rgba(0, 232, 112, 0.15);
        border-radius: 18px;
        padding: 14px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
        gap: 10px;
    }

    /* Enquanto o modal do ticket esta visivel, esconde o footer do betslip
       (Confirmar Aposta / Limpar Bilhete) — o backdrop e semi-transparente
       e deixava esses botoes brilhando por tras. */
    body.betslip-ticket-open .betslip-footer,
    body.betslip-ticket-open .betslip-header {
        display: none !important;
    }

    /* FOLHA INVISIVEL ENQUANTO O TICKET ESTA NA TELA (31/08).
       O #betslipTicketOverlay vive DENTRO da .betslip-sidebar, entao a folha nao
       pode ser fechada quando o ticket abre — sem .mobile-open a sidebar e
       display:none e o ticket sumiria junto. Ela fica aberta e some visualmente:
       sem fundo, sem borda, sem sombra e sem recorte, virando so um container.
       overflow/max-height/animation precisam ser desfeitos porque recortariam ou
       criariam bloco de contencao pro ticket, que e position:fixed. */
    body.betslip-ticket-open .betslip-sidebar.mobile-open {
        background: none;
        border: 0;
        box-shadow: none;
        animation: none;
        overflow: visible;
        max-height: none;
        pointer-events: none;
    }

    /* o ticket recebe o toque de volta (o pai desligou com pointer-events) */
    body.betslip-ticket-open .betslip-ticket-overlay {
        pointer-events: auto;
    }

    /* resto do bilhete escondido: header e footer ja saem numa regra acima */
    body.betslip-ticket-open .betslip-tabs,
    body.betslip-ticket-open .betslip-items {
        display: none !important;
    }

    .home-grid-2col {
        grid-template-columns: 1fr;
    }

    .bracket-phases {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bottom-nav {
        display: flex;
    }

    .main-content {
        padding-bottom: 80px;
    }
}

/* =====================================================
   MOBILE (max-width: 768px)
   ===================================================== */

@media (max-width: 768px) {
    :root {
        --header-height: 68px;
    }

    .main-content {
        padding: var(--space-lg);
        padding-bottom: 84px;
    }

    .header-center {
        display: none;
    }

    .logo-img {
        height: 50px;
    }

    .header-right {
        gap: 4px;
    }

    .header-right .btn-sm {
        padding: 4px 8px;
        font-size: 10px;
    }

    .user-balance {
        padding: 4px 6px;
        font-size: 10px;
        gap: 3px;
    }

    .user-balance .material-symbols-outlined {
        font-size: 13px;
    }

    .user-balance .balance-value {
        font-size: 10px;
    }

    .btn-deposit {
        padding: 4px 8px;
        font-size: 10px;
        gap: 2px;
        white-space: nowrap;
    }

    .btn-deposit .material-symbols-outlined {
        font-size: 13px;
    }

    /* Shortcuts - alinhados com o banner */
    .shortcuts-bar {
        margin: 0;
        padding: 0 0 var(--space-xs) 0;
    }

    .shortcuts-scroll {
        gap: 10px;
        justify-content: center;
    }

    .shortcut-item {
        flex: 0 1 auto;
        min-width: 0;
        width: 16%;
    }

    .shortcut-img {
        height: auto;
        width: 100%;
        max-height: 68px;
    }

    /* Carousel */
    .slide-content {
        bottom: var(--space-md);
        left: var(--space-md);
    }

    .carousel-btn {
        width: 32px;
        height: 32px;
    }

    .carousel-btn .material-symbols-outlined {
        font-size: 1.1rem;
    }

    /* Matches Grid */
    .matches-grid {
        grid-template-columns: 1fr;
    }

    .featured-odds-grid {
        grid-template-columns: 1fr;
    }

    /* Match Card */
    .match-card {
        padding: var(--space-md);
    }

    .team-logo {
        width: 40px;
        height: 40px;
    }

    .team-name {
        font-size: var(--font-xs);
    }

    .score-value {
        font-size: var(--font-xl);
    }

    /* Bracket */
    .bracket-phases {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .bracket-phase-card {
        padding: var(--space-lg);
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .stat-card {
        padding: var(--space-lg);
    }

    .stat-value {
        font-size: var(--font-xl);
    }

    /* Betslip Mobile */
    .betslip-sidebar.mobile-open {
        max-width: 100%;
        width: 100%;
    }

    .betslip-mobile-toggle {
        bottom: 76px;
    }

    /* Sections */
    .section {
        margin-bottom: var(--space-xl);
    }

    .section-title {
        font-size: var(--font-lg);
    }

    /* Filters */
    .filters-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-sm);
    }

    .filter-chip {
        flex-shrink: 0;
    }

    /* Toast */
    .toast-container {
        left: var(--space-md);
        right: var(--space-md);
        top: calc(var(--header-height) + var(--space-sm));
    }

    .toast {
        min-width: auto;
        max-width: 100%;
    }
}

/* =====================================================
   MOBILE SMALL (max-width: 480px)
   ===================================================== */

@media (max-width: 480px) {
    .main-content {
        padding: var(--space-md);
        padding-bottom: 80px;
    }

    .slide-content {
        bottom: var(--space-sm);
        left: var(--space-sm);
    }

    .slide-content .btn {
        font-size: var(--font-xs);
        padding: 6px 20px;
    }

    .section-title {
        font-size: var(--font-base);
    }

    .shortcut-item {
        flex: 1;
        min-width: 0;
    }

    .match-card-odds {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xs);
    }

    .odd-btn {
        padding: var(--space-xs);
    }

    .odd-value {
        font-size: var(--font-sm);
    }

    .bracket-phases {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .bracket-phase-card {
        padding: var(--space-md);
    }

    .phase-icon {
        width: 40px;
        height: 40px;
    }

    .bracket-phase-card h4 {
        font-size: var(--font-sm);
    }

    .stats-grid {
        gap: var(--space-sm);
    }

    .stat-card {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .stat-value {
        font-size: var(--font-lg);
    }

    .quick-stakes {
        flex-wrap: wrap;
    }

    .quick-stake {
        min-width: calc(33.33% - 4px);
    }
}

/* ==========================================================================
   Telas ESTREITAS (<=400px: iPhone 13/12/SE, Androids compactos) — o header
   estourava (logo + sino + saldo + "Depositar" > largura) e cortava o botão
   Depositar. Encolhe o logo (maior economia de espaço) e aperta o resto pra
   TUDO caber. NÃO afeta iPhone 14/15 Pro Max (430px) nem tablets.
   ========================================================================== */
@media (max-width: 400px) {
    .main-header { gap: 3px; padding: 0 5px 0 3px; }
    .logo-img { height: 40px; }
    .header-right { gap: 3px; }
    .notif-bell svg { width: 19px; height: 19px; }
    .user-balance { padding: 3px 6px; gap: 2px; }
    .user-balance .balance-value { font-size: 9.5px; }
    .user-balance .material-symbols-outlined { font-size: 12px; }
    .btn-deposit { padding: 4px 7px; font-size: 9.5px; gap: 2px; white-space: nowrap; }
    .btn-deposit .material-symbols-outlined { font-size: 12px; }
}

/* Telas MUITO estreitas (<=360px: iPhone SE 1ª/mini antigos) — mais um passo. */
@media (max-width: 360px) {
    .logo-img { height: 36px; }
    .user-balance { padding: 2px 5px; }
    .btn-deposit { padding: 4px 6px; }
}