/* =====================================================
   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;
    }

    /* 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;
        background: rgba(0, 0, 0, 0.82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        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;
    }

    .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);
    }
}