/* ============================================
   MOBILE FIXES - Comprehensive Mobile Support
   ============================================ */

/* Global Mobile Fixes */
@media (max-width: 576px) {
    /* Prevent horizontal scroll */
    * {
        max-width: 100vw;
    }
    
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }
    
    /* Fix container padding */
    .container {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix Bootstrap row */
    .row {
        margin-left: -10px;
        margin-right: -10px;
        width: calc(100% + 20px);
        max-width: calc(100% + 20px);
    }
    
    /* Fix Bootstrap columns */
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Ensure all images are responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
    
    /* Fix iframes */
    iframe {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Fix video elements */
    video {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix tables */
    table {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix modals */
    .modal-dialog {
        margin: 0.25rem !important;
        max-width: calc(100% - 0.5rem) !important;
        width: calc(100% - 0.5rem) !important;
    }
    
    /* Fix navbar */
    .navbar-collapse {
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix hero buttons */
    .hero-nav-buttons {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 5px;
    }
    
    .btn-hero-nav {
        flex: 1 1 calc(50% - 4px);
        min-width: calc(50% - 4px);
        max-width: calc(50% - 4px);
        font-size: 0.8rem;
        padding: 10px 12px;
    }
    
    /* Fix filter buttons scroll */
    .filter-buttons {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 5px;
    }
    
    /* Fix tab buttons */
    .slot-nav-tabs,
    .bola-nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 5px;
    }
    
    /* Fix provider cards */
    #providerList,
    #demoProviderList {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix slot grid */
    #slotList,
    #demoSlotList {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        padding: 0;
        margin: 0;
    }
    
    /* Fix sorting controls */
    .rtp-sorting-controls,
    .bola-sorting-controls,
    .liga-filter {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Fix table container */
    #bolaTableContainer {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
        padding: 0 10px;
    }
    
    /* Fix stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    
    /* Fix promo cards */
    .promo-card-enhanced {
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix floating buttons */
    .floating-buttons {
        bottom: 10px;
        right: 10px;
        z-index: 1000;
    }
    
    /* Fix section titles */
    .section-title-main {
        font-size: 1.3rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Very Small Screens */
@media (max-width: 360px) {
    .btn-hero-nav {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
        font-size: 0.75rem;
        padding: 8px 10px;
    }
    
    .hero-nav-buttons {
        flex-direction: column;
        gap: 6px;
    }
    
    #slotList {
        grid-template-columns: 1fr !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        padding: 20px 0;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
    }
    
    .modal-body {
        max-height: calc(100vh - 150px);
    }
}