/* 
   RESPONSIVE FIXES - LOTERICA
   Centralized overrides for mobile/responsive issues.
   Use !important to override legacy styles from loterias.css and tema.css.
*/

/* GLOBAL BOX SIZING RESET */
*, *:before, *:after {
    box-sizing: border-box !important;
}

/* ==========================================================================
   SCROLL & LAYOUT FIXES (CRITICAL)
   ========================================================================== */

/* FORCE SCROLL ON HTML/BODY & DISABLE BLOCKERS */
html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important; /* Prevent horizontal scroll from overflow */
    height: auto !important;
    min-height: 100vh !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    touch-action: auto !important; /* Restore touch scrolling */
    -webkit-overflow-scrolling: touch !important; /* iOS momentum scrolling */
}

/* Fix for dimScreen blocking interaction/scroll */
#dimScreen.hidden {
    display: none !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* KILL THE .mobile OVERFLOW HIDDEN RULE FROM loterias.css (Line 2891) */
.mobile, body.mobile, html.mobile {
    overflow: visible !important;
    overflow-y: auto !important;
    position: static !important; /* Prevent fixed positioning locks */
    height: auto !important;
}

/* Ensure main views scroll */
[ui-view="page-content"], 
[ui-view="header-content"],
.container,
.main-content {
    overflow: visible !important; 
    height: auto !important;
    display: block !important; /* Ensure block display to allow flow */
}

/* DISABLE CUSTOM SCROLLBAR PLUGINS ON MOBILE */
@media (max-width: 991px) {
    .mCustomScrollbar,
    ._mCS_1,
    .mCSB_container {
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        position: static !important;
    }

    .mCustomScrollBox, 
    .mCSB_scrollTools {
        display: none !important;
    }
}

/* ==========================================================================
   HEADER & MENU FIXES
   ========================================================================== */

/* HIDE GHOST INPUTS / LOGIN HEADER (Fix Overlap) */
.menuSecundario,
#LoginHeaderView\.html,
#step6Bolao,
.data-sua-conta-deslogado,
login-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Fix Menu Button Visibility */
.navbar-toggle {
    background-color: #0066b3 !important; /* Caixa Blue */
    color: white !important;
    border-radius: 4px !important;
    border: none !important;
    margin-top: 10px !important;
    margin-right: 10px !important;
    display: block !important; /* Ensure it's visible on mobile */
    float: right !important;
}

/* Fix Version Number Overlap */
.version-overlay {
    position: absolute !important;
    top: 15px !important;
    right: 60px !important; /* Move left of menu button */
    z-index: 1001 !important;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
}

/* Fix Concurso Header Alignment */
.titulo-pagina h3 {
    text-align: center !important;
    margin-top: 10px !important;
}

.titulo-pagina ul {
    text-align: center !important;
    padding-left: 0 !important;
    list-style: none !important;
}

/* Fix Button Spacing */
.titulo-pagina .btn {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    width: 100% !important; /* Full width on mobile */
}

/* Fix Container Volante Spacing */
#container-volante {
    margin-top: 20px !important;
    padding-top: 20px !important;
}

/* ==========================================================================
   MOBILE LAYOUT RESETS
   ========================================================================== */

/* Fix horizontal scroll caused by fixed widths */
@media (max-width: 768px) {
    .container, .container-fluid {
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin: 0 !important;
    }

    /* Reset legacy min-widths */
    #interactive-map > .places,
    .content-section,
    .hero-landing,
    .section-slider {
        min-width: 0 !important;
        width: 100% !important;
    }
    
    /* CENTER ALIGNMENT & HEADER FIXES (User Request) */
    
    /* Center "Ir para o site da CAIXA" */
    .barraCaixa {
        text-align: center !important;
        display: block !important;
        padding: 10px 0 !important;
    }
    
    .barraCaixa .link, .barraCaixa .logo {
        float: none !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* Fix Jumbotron & Description Overlap */
    .jumbotron {
        text-align: center !important;
        padding: 15px 10px !important;
        margin-bottom: 20px !important; /* Force separation from next section */
        background-color: #f4f6f9 !important; /* Clean background */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Ensure text wraps and doesn't float over button */
    .jumbotron h2, 
    .jumbotron .titulo-principal {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        display: block !important;
        position: static !important;
        color: #0f172a !important;
        max-width: 100% !important;
        text-shadow: none !important;
    }
    
    /* Fix "Mega-Sena" Watermark/Image */
    .jumbotron img.img-responsive {
        max-width: 120px !important;
        margin: 10px auto !important;
        display: block !important;
    }

    /* Separate Header Content from Page Content */
    [ui-view="header-content"] {
        margin-bottom: 10px !important;
        display: block !important;
        position: relative !important;
        z-index: 20 !important;
    }

    [ui-view="page-content"] {
        padding-top: 10px !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* FIX HEADER LINK LINE BREAK */
.barraCaixa a, 
.barraCaixa .link {
    white-space: nowrap !important;
    display: inline-block !important;
    font-size: 12px !important;
    color: white !important;
    text-decoration: none !important;
}

.barraCaixa {
    background-color: #005ca9 !important;
    padding: 5px 15px !important;
    text-align: right !important; /* Align link to right like official site or keep centered but smaller */
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Restyle Navbar Header (Menu Bar) */
.navbar-header {
    background-color: #f4f4f4 !important; /* Light gray background for menu bar */
    padding: 5px 15px !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important; /* Put Menu (1st child) on Right, Version (2nd child) on Left */
    border-bottom: 1px solid #ddd !important;
    width: 100% !important;
}

/* Fix Menu Button (Hamburger style) */
.navbar-toggle {
    background-color: #0066b3 !important;
    color: white !important;
    border-radius: 4px !important;
    border: none !important;
    margin: 0 !important; /* Reset margins */
    padding: 8px 12px !important;
    display: inline-block !important;
    width: auto !important; /* Prevent full width */
    float: none !important; /* Use flexbox alignment */
    font-size: 14px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

.navbar-toggle:hover {
    background-color: #004d8c !important;
}

/* Adjust Version Overlay Position */
.version-overlay {
    position: static !important; /* Reset absolute positioning */
    font-size: 10px !important;
    color: #999 !important; /* Make it subtle */
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Hide the old menu text if needed, or keep it but styled as button */
/* Ensure no other styles interfere */
.navbar-collapse {
    border-top: none !important;
    box-shadow: none !important;
}


/* FIX CART BUTTON LAYOUT */
#colocarnocarrinho,
.data-incluir-aposta-mega-sena,
button[ng-click="vm.incluirAposta()"] {
    width: 100% !important;
    max-width: none !important; /* Remove max-width constraint */
    height: auto !important;
    min-height: 50px !important; /* Larger touch target */
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    margin: 10px 0 0 0 !important; /* Top margin only */
    float: none !important; /* Remove float */
    font-size: 16px !important;
}

#colocarnocarrinho span.glyphicon,
button[ng-click="vm.incluirAposta()"] span.glyphicon {
    margin-right: 10px !important;
    font-size: 18px !important;
}

/* Fix Price and Button Container */
.valor-aposta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.valor-aposta p {
    font-size: 1.3rem !important;
    margin-bottom: 5px !important;
    width: 100% !important;
    text-align: center !important;
}

.valor-aposta .preco {
    font-weight: bold !important;
    font-size: 1.5rem !important;
    color: #0066b3 !important;
}

/* CENTER ALIGNMENT FOR MAIN CONTENT (User Request "Ajuste Tudo") */
    #container-volante {
        float: none !important;
        margin: 0 auto !important;
        width: 100% !important;
        display: block !important;
    }

    .coluna-aposte {
        text-align: center !important;
    }

    .coluna-aposte h3, 
    .coluna-aposte .ng-binding {
        text-align: center !important;
    }
}

/* Fix Volantes Box Height (Prevent accidental hiding) */
.volantes-box {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
}

/* Remove Empty Space below Cart Button */
.valor-aposta {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
}

.coluna-aposte {
    padding-bottom: 20px !important;
}

/* Hide Footer Visual Overlap */
/* Note: The footer hiding is now handled in 3.html via ui-view style */