/**
 * Mobile Styles - New Design
 * Only applies to screens max-width: 768px
 * Version: 4.0.5 - Optimized
 */

@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        overflow-x: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    body {
        font-size: 15px;
        line-height: 1.7;
        overflow-x: hidden;
        max-width: 100vw;
        padding-bottom: 0;
    }
    
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    .container {
        padding: 0 var(--space-4);
        max-width: 100%;
    }
    
    .header-top {
        padding: var(--space-3) 0;
        position: relative;
        padding-right: 60px;
    }
    
    .header-top-right {
        display: none;
    }
    
    .site-logo .logo-image {
        height: 50px !important;
        max-width: 220px !important;
    }
    
    .header-banner {
        display: none;
    }
    
    .site-content {
        padding: var(--space-6) 0;
    }
    
    .content-wrapper {
        grid-template-columns: 1fr !important;
        gap: var(--space-5) !important;
    }
    
    .sidebar-left,
    .sidebar-right {
        width: 100% !important;
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    .sidebar-left {
        order: 2;
    }
    
    .sidebar-right {
        order: 3;
    }
    
    .main-content-area {
        order: 1;
        padding: var(--space-5);
    }
    
    .sidebar-widget {
        margin-bottom: var(--space-5);
    }
    
    .ranking-widget {
        margin-bottom: var(--space-5);
    }
    
    .ranking-widget .bxh-110 {
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    .hot-leagues-title {
        font-size: var(--text-base);
        padding: var(--space-4) var(--space-5);
    }
    
    .category-title {
        font-size: var(--text-sm);
        padding: var(--space-3) var(--space-4);
    }
    
    /* Fixed categories override for mobile */
    .category-title.category-title-fixed {
        cursor: default !important;
        pointer-events: none !important;
        background: linear-gradient(135deg, #1a2d4d 0%, #0f1f3a 100%) !important;
        border: 2px solid #f59e0b !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        padding: 1rem 1.25rem !important;
        user-select: none !important;
    }
    
    .category-title.category-title-fixed:hover {
        transform: none !important;
        background: linear-gradient(135deg, #1a2d4d 0%, #0f1f3a 100%) !important;
    }
    
    .league-link {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
    
    button, .button, a.button {
        min-height: 44px;
        min-width: 44px;
        padding: var(--space-3) var(--space-5);
    }
    
    table {
        font-size: var(--text-sm);
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    input, select, textarea {
        font-size: 16px;
        min-height: 44px;
        padding: var(--space-3);
    }
}