/* Custom overrides + mobile fixes for Betify template */

/* === Layout : body flex column + full-width children === */
        body { flex-direction: column !important; min-height: 100vh; }
        body > nav.topbar, body > main.content, body > footer.footer { width: 100%; max-width: 100%; }
        body > main.content { flex: 1; }
        /* Local fix : style.min.css set body to flex without column direction → footer appears top-right.
           Force column layout + nav full-width + main flex:1 */
        body { flex-direction: column !important; min-height: 100vh; }
        body > nav.topbar { width: 100%; }
        body > main.content { flex: 1; width: 100%; }
        body > footer.footer { width: 100%; }
        body {background-color: #031C03;color: #FFFFFF;}
        p, i, b, a, h1, h2, h3, h4, h5, h6, ul, ol {color: #FFFFFF;}
        .topbar {background: #031C03;}
        .topbar .header .flex .auth .login {border: 1px solid #FFBA75;}
        .topbar .header .flex .auth .login:hover {background: #FFBA75;}
        .topbar .header .flex .auth .reg {background: #1ED860;}
        .topbar .header .flex .auth .reg:hover {background: #073607;}
        @media (max-width: 750px) {.topbar .header .flex .block-menu {background-color: #031C03;}}
        .topbar .header .flex .block-menu li a.active, .topbar .header .flex .block-menu li a:hover {border-bottom: 1px solid #FFBA75;}
        .topbar .content-list {background: #073607;}
        .topbar .content-list .content-list-label p {color: #FFFFFF;}
        .topbar .content-list .content-list-items ul li a {background: #234923;}
        .topbar .content-list .content-list-items ul li a:hover {border: 1px solid #1ED860;}
        .topbar .content-list .content-list-items ul li a.active {border: 1px solid #1ED860;}
        .topbar .content-list .content-list-items::-webkit-scrollbar-thumb {background: #FFBA75;}
        .breadcrumbs {color: #FFFFFF;}
        .breadcrumbs a {color: rgba(255, 255, 255, 0.54);}
        .btn {border: 1px solid #FFFFFF;}
        .first-block {background: #073607;}
        .first-block .first-block-text {background: #234923;}
        .first-block .first-block-text .btn {background: #1ED860;}
        .first-block .first-block-text .btn:hover {background: #073607;}
        .footer {background: #073607;}
        .footer .footer-top {border-bottom: 1px solid #234923;}
        .footer .footer-top .flex .links a:hover {color: rgba(255, 255, 255, 0.54);}
        .footer .footer-bottom .links a {color: rgba(255, 255, 255, 0.54);}
        .footer .footer-bottom .links a:hover {color: #FFFFFF;}
        .footer .footer-copyright {color: rgba(255, 255, 255, 0.54);}
        table thead tr {background-color: #234923;}
        table tbody a {color: rgba(255, 255, 255, 0.54);}
        table tbody tr td:not(:first-child) {color: rgba(255, 255, 255, 0.54);}
        table tbody tr:nth-child(2n) {background-color: #234923;}
        .error p {color: rgba(255, 255, 255, 0.54);}
        .sitemap a:hover {background-color: #031C03;}
        .cookies {background-color: #031C03;}
        .author {background: #073607;}
        .author .author-item .flex .info .label {color: #C9D0D5;}
        .author .date {color: #C9D0D5;}
        .faq .faq-item h3 {background-color: #073607;}
        .faq .faq-item .faq-item-content {background-color: #073607;}
        .showcase .showcase-item {background-color: #073607;}
        .showcase .showcase-item .showcase-deposit .label {color: #C9D0D5;}
        .showcase .showcase-item .showcase-play .btn {background: #1ED860;}
        .showcase .showcase-item .showcase-play .btn:hover {background: #073607;}
        .showcase-grid .showcase-item {background-color: #073607;}
        .showcase-grid .showcase-item .showcase-content .flex .rating p {color: #C9D0D5;}
        .showcase-grid .showcase-item .showcase-content .flex .rating p span {color: #FFFFFF;}
        .showcase-grid .showcase-item .showcase-deposit {background: #234923;}
        .showcase-grid .showcase-item .showcase-deposit .col .label {color: #C9D0D5;}
        .showcase-grid .showcase-item .showcase-play .btn {background: #1ED860;}
        .showcase-grid .showcase-item .showcase-play .btn:hover {background: #073607;}
        .reviews .review {background: #073607;}
        .reviews .review .user .user-info .city {color: #C9D0D5;}
        .reviews .review .rating p {color: #C9D0D5;}
        .reviews .review .rating p span {color: #FFFFFF;}
        .slots .slot .item .info .top .rtp {background: rgba(0, 0, 0, 0.48);color: rgba(255, 255, 255, 0.54);}
        .slots .slot .item .info .top .rtp span {color: #FFFFFF;}
        .slots .slot .item .info .top .level {background: rgba(0, 0, 0, 0.48);color: #60DA60;}
        .slots .slot .item .info .action .btn.btn-play {background: #1ED860;}
        .slots .slot .item .info .action .btn.btn-play:hover {background: #073607;}
        .slots .slot .item .info .action .btn.btn-demo {color: #031C03;background: #FFFFFF;}
        .slots .slot .item .info .action .btn.btn-demo:hover {background: #C9D0D5;}
        .slots .slot .item .info .bottom {background: rgba(0, 0, 0, 0.48);color: rgba(255, 255, 255, 0.54);}
        .advantages .advantage {background: #073607;}
        .advantages .advantage .heading .num {background: #1ED860;}
        @media (max-width: 750px) {.download-app {background: #234923;}}
        .download-app a {background: #41E691;}
        .download-app a p {color: #134F38;}
        .download-app a span {color: rgba(0, 0, 0, 0.48);}
        @media (max-width: 475px) {.snippet-left .snippet-image{min-width:100%;}}


        /* === Mobile fixes (≤900px only — preserve desktop max-width:1320px) === */
        body { overflow-x: hidden; }
        @media (max-width: 900px) {
            body, html { max-width: 100vw; }
            .container { padding: 70px 0 0 0 !important; }
            .box { padding: 16px 12px !important; }
            .first-block { flex-direction: column !important; gap: 14px !important; padding: 16px !important; }
            .first-block .first-block-text, .first-block .first-block-image { width: 100% !important; max-width: 100% !important; }
            .first-block .first-block-image img { width: 100%; max-width: 100%; height: auto; }
            .snippet-left { display: flex !important; flex-direction: column !important; gap: 16px !important; }
            .snippet-left .snippet-image { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
            .snippet-left .snippet-image img { width: 100%; max-width: 100%; height: auto; }
            .snippet-left .snippet-text { width: 100%; max-width: 100%; }
            .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .topbar .content-list .content-list-items { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        }
        @media (max-width: 600px) {
            h1 { font-size: 1.5rem !important; line-height: 1.2; }
            h2 { font-size: 1.25rem !important; }
            h3 { font-size: 1.1rem !important; }
            .topbar .header .auth { gap: 8px; }
            .topbar .header .auth .login, .topbar .header .auth .reg { padding: 8px 14px; font-size: 13px; }
        }
        /* === Burger menu : show toggle on mobile, hide on desktop === */
        .burger-menu { display: none; cursor: pointer; }
        @media (max-width: 900px) {
            .burger-menu { display: inline-block !important; width: 32px; height: 32px; }
            .topbar .header .flex .block-menu { display: none; position: absolute; top: 70px; right: 0; left: 0; padding: 16px; flex-direction: column; gap: 12px; z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
            .topbar .header .flex .block-menu.open { display: flex !important; }
            .topbar .header .flex .auth { gap: 6px; }
        }
        /* === Mobile sommaire fix : sticky topbar + bounded content-list === */
        @media (max-width: 900px) {
            .topbar { position: fixed !important; top: 0; left: 0; right: 0; width: 100vw !important; max-width: 100vw !important; overflow: hidden; }
            .topbar .header { width: 100% !important; max-width: 100% !important; box-sizing: border-box; padding: 12px 16px !important; }
            .topbar .content-list { width: 100% !important; max-width: 100vw !important; box-sizing: border-box; overflow: hidden; }
            .topbar .content-list .content-list-items { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
            .topbar .content-list .content-list-items ul, .topbar .content-list .content-list-items .contentListJs { display: flex !important; flex-wrap: nowrap !important; }
            .topbar .content-list .content-list-items ul li, .topbar .content-list .content-list-items .contentListJs li { flex: 0 0 auto !important; }
            /* hide login text button on small mobile, keep only Inscription + burger */
        }
        /* === Tables : prevent breaking the box width on mobile === */
        @media (max-width: 900px) {
            .container { align-items: stretch !important; }
            .box { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
            .table-responsive { max-width: 100% !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
            .table-responsive table { width: 100%; min-width: 0; }
            /* Also constrain reviews / faq / first-block-image so they don't push width */
            .reviews, .faq, .first-block, .first-block-image, .snippet-left, .snippet-image { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
            .first-block-image img, .snippet-image img, .reviews img { max-width: 100% !important; height: auto !important; }
        }
        /* === Tables responsive aggressive (mobile only) === */
        @media (max-width: 900px) {
            html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
            section.container, .container, main { width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; padding-left: 12px !important; padding-right: 12px !important; }
            .box { width: 100% !important; max-width: calc(100vw - 24px) !important; padding: 14px 10px !important; box-sizing: border-box !important; min-width: 0 !important; }
            .table-responsive { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
            .table-responsive table { width: auto !important; min-width: 100% !important; font-size: 13px !important; }
            .table-responsive th, .table-responsive td { padding: 8px 10px !important; word-break: break-word !important; overflow-wrap: anywhere !important; }
        }
        /* === All bare tables : auto-scroll on mobile (covers tables without .table-responsive wrapper) === */
        @media (max-width: 900px) {
            .box table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap; font-size: 13px !important; }
            .box table thead, .box table tbody { display: table; width: 100%; min-width: max-content; }
            .box table tr { display: table-row; }
            .box table th, .box table td { display: table-cell; padding: 8px 10px !important; }
        }
        /* === Push content below sticky topbar+sommaire on mobile === */
        @media (max-width: 900px) {
            section.container { padding-top: 200px !important; }
        }
        @media (max-width: 600px) {
            section.container { padding-top: 220px !important; }
        }
        /* === Sticky bottom download bar (mobile only) === */
        @media (max-width: 900px) {
            .sticky-download-bar { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 95 !important; background: #234923 !important; box-shadow: 0 -4px 14px rgba(0,0,0,.4) !important; padding: 10px 12px !important; gap: 8px !important; }
            .sticky-download-bar a { padding: 8px 12px !important; min-width: 0 !important; flex: 1 1 0 !important; max-width: 200px; }
            .sticky-download-bar a strong { font-size: 13px !important; }
            body { padding-bottom: 80px !important; }
        }