/* ==========================================================
   QATAR LOTTO V2
   RESPONSIVE.CSS - FINAL MOBILE
   ----------------------------------------------------------
   Desktop layout is LOCKED.
   Mobile/tablet rules only.
========================================================== */


/* ==========================================================
   TABLET
========================================================== */

@media screen and (max-width: 1100px){

    .ql-main{
        margin-left:270px;
    }

    .hero-dashboard{
        grid-template-columns:1fr;
    }

    .latest-info{
        grid-template-columns:repeat(2,1fr);
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media screen and (max-width: 768px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    /* ------------------------------------------------------
       APP / SIDEBAR
    ------------------------------------------------------ */

    .ql-app{
        display:block !important;
        width:100% !important;
        min-height:100vh !important;
    }

    /* The desktop sidebar must disappear completely on phones.
       Keeping the 270px fixed sidebar is what causes the
       squeezed screenshot seen on mobile. */
    .ql-sidebar{
        display:none !important;
    }

    .ql-main{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin-left:0 !important;
        display:flex !important;
        flex-direction:column !important;
    }


    /* ------------------------------------------------------
       TOPBAR
    ------------------------------------------------------ */

    .ql-topbar{
        width:100% !important;
        height:auto !important;
        min-height:68px !important;
        padding:12px 15px !important;
        gap:10px !important;
        box-sizing:border-box !important;
        flex-wrap:nowrap !important;
    }

    .ql-topbar-left{
        min-width:0 !important;
        padding-left:0 !important;
        flex:1 !important;
    }

    .ql-topbar-left h1{
        font-size:18px !important;
        line-height:1.15 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .ql-topbar-left p{
        margin-top:4px !important;
        font-size:9px !important;
        line-height:1.25 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .ql-topbar-right{
        flex:0 0 auto !important;
        gap:7px !important;
    }

    .ql-live-status{
        padding:7px 9px !important;
        border-radius:9px !important;
        gap:5px !important;
        font-size:9px !important;
        white-space:nowrap !important;
    }

    .ql-live-dot{
        width:7px !important;
        height:7px !important;
    }

    .ql-topbar-date{
        display:none !important;
    }


    /* ------------------------------------------------------
       MAIN CONTENT
    ------------------------------------------------------ */

    .ql-content{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }


    /* ------------------------------------------------------
       HERO
    ------------------------------------------------------ */

    .hero-dashboard{
        width:100% !important;
        max-width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        padding:14px !important;
        box-sizing:border-box !important;
    }

    .hero-left,
    .hero-right{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    .hero-live-card{
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        padding:30px 14px !important;
        border-radius:18px !important;
        box-sizing:border-box !important;
    }

    .hero-content{
        width:100% !important;
        max-width:100% !important;
        padding:0 !important;
        box-sizing:border-box !important;
    }

    .hero-flag{
        width:125px !important;
        top:0 !important;
        left:0 !important;
    }

    .hero-ball-left{
        width:115px !important;
        left:-45px !important;
        bottom:-30px !important;
    }

    .hero-ball-right{
        width:105px !important;
        right:-35px !important;
        bottom:-20px !important;
    }

    .hero-badge{
        padding:8px 15px !important;
        gap:6px !important;
        font-size:9px !important;
    }

    .hero-content h2{
        margin:16px 0 7px !important;
        font-size:32px !important;
        line-height:1.05 !important;
    }

    .hero-content p{
        margin-top:8px !important;
        font-size:11px !important;
        line-height:1.45 !important;
    }

    .hero-countdown{
        width:100% !important;
        margin:22px 0 !important;
        gap:6px !important;
    }

    .hero-countdown .count-box{
        width:64px !important;
        height:64px !important;
        border-radius:12px !important;
    }

    .hero-countdown .count-box span{
        font-size:26px !important;
    }

    .hero-countdown .count-box small{
        margin-top:5px !important;
        font-size:7px !important;
    }

    .hero-countdown .dots{
        font-size:25px !important;
    }

    .winning-title{
        margin-top:14px !important;
        margin-bottom:8px !important;
        font-size:11px !important;
    }

    .winning-number{
        gap:7px !important;
        margin-top:10px !important;
    }

    .winning-number .ball{
        width:42px !important;
        height:42px !important;
        font-size:18px !important;
    }


    /* ------------------------------------------------------
       DRAW INFORMATION
    ------------------------------------------------------ */

    .hero-info-card{
        width:100% !important;
        height:auto !important;
        padding:20px !important;
        border-radius:18px !important;
        box-sizing:border-box !important;
    }

    .hero-info-card h3{
        margin-bottom:12px !important;
        font-size:18px !important;
    }

    .info-row{
        padding:11px 0 !important;
    }

    .info-row span,
    .info-row strong{
        font-size:10px !important;
    }


    /* ------------------------------------------------------
       LATEST RESULT
    ------------------------------------------------------ */

    .latest-result{
        width:100% !important;
        padding:0 14px 14px !important;
        box-sizing:border-box !important;
    }

    .latest-card{
        width:100% !important;
        padding:20px 14px !important;
        border-radius:18px !important;
        box-sizing:border-box !important;
    }

    .latest-header{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:10px !important;
        margin-bottom:16px !important;
    }

    .latest-badge{
        padding:6px 11px !important;
        font-size:8px !important;
    }

    .latest-header h2{
        margin-top:11px !important;
        font-size:22px !important;
        line-height:1.15 !important;
    }

    .latest-header p{
        margin-top:6px !important;
        font-size:10px !important;
        line-height:1.4 !important;
    }

    .latest-status{
        font-size:10px !important;
    }

    .status-dot{
        width:7px !important;
        height:7px !important;
    }

    .latest-number-group{
        width:100% !important;
        gap:7px !important;
        margin:20px 0 !important;
    }

    .latest-ball{
        width:52px !important;
        height:52px !important;
        border-radius:13px !important;
        font-size:23px !important;
    }

    .latest-info{
        width:100% !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:9px !important;
        margin-top:18px !important;
    }

    .info-box{
        min-width:0 !important;
        min-height:95px !important;
        padding:14px !important;
        border-radius:15px !important;
        box-sizing:border-box !important;
    }

    .info-icon{
        width:38px !important;
        height:38px !important;
        margin-bottom:10px !important;
        border-radius:10px !important;
        font-size:18px !important;
    }

    .info-title{
        font-size:8px !important;
        letter-spacing:1px !important;
    }

    .info-box strong{
        font-size:17px !important;
        line-height:1.2 !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    .info-content{
        gap:5px !important;
    }


    /* ------------------------------------------------------
       HISTORY
    ------------------------------------------------------ */

    .history-section{
        width:100% !important;
        padding:0 14px 14px !important;
        box-sizing:border-box !important;
    }

    .history-card{
        width:100% !important;
        padding:20px 12px !important;
        border-radius:18px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .history-header{
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;
        margin-bottom:16px !important;
    }

    .history-header h2{
        margin-top:10px !important;
        font-size:22px !important;
        line-height:1.15 !important;
    }

    .history-search{
        width:100% !important;
    }

    .history-search input{
        width:100% !important;
        height:44px !important;
        padding:0 14px !important;
        border-radius:12px !important;
        font-size:12px !important;
        box-sizing:border-box !important;
    }

    .history-table-wrapper{
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch !important;
    }

    .history-table{
        width:100% !important;
        min-width:520px !important;
    }

    .history-table th,
    .history-table td{
        padding:12px 10px !important;
        font-size:11px !important;
        white-space:nowrap !important;
    }

    .pagination{
        justify-content:center !important;
        gap:7px !important;
        flex-wrap:wrap !important;
    }

    .pagination button{
        width:38px !important;
        height:38px !important;
        border-radius:11px !important;
    }


    /* ------------------------------------------------------
       STATISTICS
    ------------------------------------------------------ */

    .statistics-section{
        width:100% !important;
        padding:0 14px 25px !important;
        box-sizing:border-box !important;
    }

    .stats-grid{
        width:100% !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:9px !important;
    }

    .stat-card{
        min-width:0 !important;
        padding:17px 12px !important;
        border-radius:15px !important;
    }

    .stat-card span{
        font-size:9px !important;
        margin-bottom:8px !important;
    }

    .stat-card h2{
        font-size:20px !important;
        line-height:1.2 !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }
}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 480px){

    .ql-topbar{
        padding:10px 12px !important;
    }

    .ql-topbar-left h1{
        font-size:16px !important;
    }

    .ql-topbar-left p{
        font-size:8px !important;
    }

    .ql-live-status{
        padding:6px 7px !important;
        font-size:8px !important;
    }

    .hero-dashboard{
        padding:10px !important;
        gap:10px !important;
    }

    .hero-live-card{
        padding:25px 10px !important;
    }

    .hero-content h2{
        font-size:28px !important;
    }

    .hero-countdown{
        gap:4px !important;
    }

    .hero-countdown .count-box{
        width:58px !important;
        height:58px !important;
    }

    .hero-countdown .count-box span{
        font-size:23px !important;
    }

    .hero-countdown .dots{
        font-size:22px !important;
    }

    .winning-number .ball{
        width:39px !important;
        height:39px !important;
        font-size:17px !important;
    }

    .latest-result,
    .history-section,
    .statistics-section{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .latest-ball{
        width:49px !important;
        height:49px !important;
        font-size:21px !important;
    }

    .latest-info{
        gap:7px !important;
    }

    .info-box{
        min-height:90px !important;
        padding:12px !important;
    }

    .info-box strong{
        font-size:15px !important;
    }

    .history-card{
        padding:18px 9px !important;
    }

    .history-table{
        min-width:500px !important;
    }

    .stat-card{
        padding:15px 10px !important;
    }

    .stat-card h2{
        font-size:18px !important;
    }
}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media screen and (max-width: 380px){

    .ql-topbar-left h1{
        font-size:14px !important;
    }

    .hero-content h2{
        font-size:25px !important;
    }

    .hero-countdown .count-box{
        width:54px !important;
        height:54px !important;
    }

    .hero-countdown .count-box span{
        font-size:21px !important;
    }

    .winning-number{
        gap:5px !important;
    }

    .winning-number .ball{
        width:36px !important;
        height:36px !important;
        font-size:15px !important;
    }

    .latest-number-group{
        gap:5px !important;
    }

    .latest-ball{
        width:46px !important;
        height:46px !important;
        font-size:20px !important;
    }

    .latest-info{
        grid-template-columns:1fr !important;
    }

    .stats-grid{
        grid-template-columns:1fr !important;
    }
}