/* ==========================================================
   FIJI LOTTERY
   RESPONSIVE / MOBILE
   ----------------------------------------------------------
   Desktop styles are intentionally left untouched.
   This file only adapts the existing layout for tablets
   and mobile devices.
========================================================== */


/* ==========================================================
   TABLET
   993px and below
========================================================== */

@media (max-width: 992px){

    /* ---------- GLOBAL ---------- */

    .container{
        max-width:100%;
        padding-left:18px;
        padding-right:18px;
    }


    /* ---------- HEADER / NAVBAR ---------- */

    .site-header .container{
        height:auto;
        min-height:72px;
        padding-top:10px;
        padding-bottom:10px;
        gap:18px;
    }

    .logo img{
        width:200px;
        height:auto;
    }

    .main-nav{
        margin-left:auto;
        margin-right:0;
    }

    .main-nav ul{
        gap:24px;
    }

    .main-nav a{
        font-size:14px;
    }

    .main-nav a.active::after{
        bottom:-18px;
    }

    .header-clock{
        margin-left:0;
        padding:10px 13px;
        font-size:.82rem;
        gap:8px;
    }


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

    .hero{
        padding:40px 0 34px;
    }

    .hero-content{
        margin-bottom:32px;
    }

    .hero-title{
        font-size:3rem;
    }

    .hero-subtitle{
        margin-top:14px;
        font-size:1.3rem;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .panel-card{
        min-height:0;
        padding:28px;
    }

    .card-header{
        margin-bottom:20px;
    }

    .card-header h2{
        font-size:1.75rem;
    }

    .countdown{
        gap:14px;
    }

    .time-box{
        width:92px;
        height:112px;
    }

    .time-value{
        font-size:3.6rem;
    }

    .separator{
        font-size:3rem;
    }

    .latest-number{
        font-size:5.6rem;
    }


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

    .statistics{
        margin-top:32px;
        margin-bottom:32px;
    }

    .statistics-wrapper{
        padding:28px;
    }

    .statistics-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    .stat-card{
        padding:20px;
    }


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

    .history{
        margin-bottom:40px;
    }

    .history-wrapper{
        padding:28px;
    }

    .history-top{
        align-items:stretch;
    }

    .history-search{
        width:280px;
    }


    /* ---------- FOOTER ---------- */

    .footer-container{
        height:auto;
        min-height:70px;
        padding-top:18px;
        padding-bottom:18px;
    }

}


/* ==========================================================
   MOBILE
   768px and below
========================================================== */

@media (max-width: 768px){

    /* ---------- GLOBAL ---------- */

    .container{
        padding-left:15px;
        padding-right:15px;
    }

    body{
        overflow-x:hidden;
    }


    /* ---------- HEADER ---------- */

    .site-header .container{
        min-height:0;
        flex-wrap:wrap;
        justify-content:center;
        gap:10px 18px;
        padding-top:12px;
        padding-bottom:12px;
    }

    .logo{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .logo img{
        width:190px;
    }

    .main-nav{
        order:2;
        width:auto;
        margin:0;
    }

    .main-nav ul{
        justify-content:center;
        gap:20px;
    }

    .main-nav a{
        font-size:13px;
    }

    .main-nav a.active::after{
        bottom:-12px;
        width:22px;
        height:2px;
    }

    .header-clock{
        order:3;
        margin:0;
        padding:8px 12px;
        font-size:.78rem;
    }

    .header-clock i{
        font-size:.9rem;
    }


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

    .hero{
        padding:32px 0 28px;
    }

    .hero-content{
        margin-bottom:26px;
        padding:0 6px;
    }

    .hero-title{
        font-size:2.35rem;
        line-height:1.12;
    }

    .hero-subtitle{
        margin-top:12px;
        font-size:1.08rem;
        line-height:1.5;
    }

    .hero-grid{
        gap:18px;
    }

    .panel-card{
        padding:22px 16px;
        border-radius:16px;
    }

    .card-header{
        gap:9px;
        margin-bottom:18px;
    }

    .card-icon{
        width:42px;
        height:42px;
        font-size:1rem;
    }

    .card-header h2{
        font-size:1.35rem;
        letter-spacing:.3px;
    }


    /* ---------- COUNTDOWN ---------- */

    .countdown{
        gap:7px;
        margin-bottom:22px;
        padding-bottom:22px;
    }

    .time-box{
        width:68px;
        height:82px;
        border-radius:8px;
    }

    .time-value{
        font-size:2.65rem;
    }

    .time-label{
        margin-top:9px;
        font-size:.68rem;
        letter-spacing:.6px;
    }

    .separator{
        font-size:2rem;
        margin-top:-20px;
    }

    .draw-schedule{
        margin-top:18px;
        font-size:.86rem;
        text-align:center;
    }


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

    .latest-number-wrap{
        margin:18px 0 22px;
    }

    .latest-number{
        max-width:100%;
        font-size:4.8rem;
        letter-spacing:1px;
        white-space:nowrap;
    }


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

    .statistics{
        margin-top:24px;
        margin-bottom:28px;
    }

    .statistics-wrapper{
        padding:22px 16px;
    }

    .statistics-header{
        gap:11px;
        margin-bottom:20px;
    }

    .statistics-icon{
        width:42px;
        height:42px;
        font-size:1.1rem;
    }

    .statistics-header h2{
        font-size:1.4rem;
    }

    .statistics-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .stat-card{
        gap:12px;
        padding:16px 12px;
        min-height:92px;
        border-radius:12px;
    }

    .stat-icon{
        width:48px;
        height:48px;
        font-size:1.05rem;
    }

    .stat-title{
        font-size:.72rem;
        margin-bottom:5px;
    }

    .stat-value{
        font-size:1.25rem;
        overflow-wrap:anywhere;
    }


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

    .history{
        margin-bottom:30px;
    }

    .history-wrapper{
        padding:22px 12px;
    }

    .history-top{
        flex-direction:column;
        gap:16px;
        margin-bottom:20px;
    }

    .history-header{
        gap:11px;
    }

    .history-icon{
        width:42px;
        height:42px;
        font-size:1.05rem;
        flex-shrink:0;
    }

    .history-header h2{
        font-size:1.4rem;
    }

    .history-search{
        width:100%;
    }

    .history-search input{
        height:46px;
    }

    /* Horizontal scrolling keeps the existing table structure
       intact instead of squeezing columns until they break. */
    .history-table{
        width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
    }

    .history-table table{
        min-width:620px;
    }

    .history-table th{
        padding:14px 12px;
        font-size:.78rem;
    }

    .history-table td{
        padding:14px 12px;
        font-size:.88rem;
        white-space:nowrap;
    }

    .history-pagination{
        gap:7px;
        margin-top:20px;
    }

    .page-btn{
        min-width:40px;
        height:38px;
        padding:0 11px;
        font-size:.82rem;
    }


    /* ---------- FOOTER ---------- */

    .site-footer{
        margin-top:35px;
    }

    .footer-container{
        height:auto;
        min-height:0;
        padding-top:22px;
        padding-bottom:22px;
        flex-direction:column;
        justify-content:center;
        text-align:center;
        gap:14px;
    }

    .footer-left{
        font-size:.82rem;
        line-height:1.5;
    }

    .footer-right{
        justify-content:center;
        gap:18px;
        flex-wrap:wrap;
    }

    .footer-right a{
        font-size:.82rem;
    }

}


/* ==========================================================
   SMALL MOBILE
   576px and below
========================================================== */

@media (max-width: 576px){

    /* ---------- HEADER ---------- */

    .site-header .container{
        gap:8px 14px;
    }

    .logo img{
        width:175px;
    }

    .main-nav ul{
        gap:15px;
    }

    .main-nav a{
        font-size:12px;
    }

    .header-clock{
        padding:7px 10px;
        font-size:.72rem;
    }


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

    .hero{
        padding:27px 0 24px;
    }

    .hero-title{
        font-size:1.9rem;
    }

    .hero-subtitle{
        font-size:.95rem;
    }

    .panel-card{
        padding:20px 12px;
    }

    .card-header h2{
        font-size:1.2rem;
    }

    .card-icon{
        width:38px;
        height:38px;
        font-size:.9rem;
    }


    /* ---------- COUNTDOWN ---------- */

    .countdown{
        gap:4px;
    }

    .time-box{
        width:58px;
        height:72px;
    }

    .time-value{
        font-size:2.25rem;
    }

    .time-label{
        font-size:.58rem;
        letter-spacing:.4px;
    }

    .separator{
        font-size:1.7rem;
        margin-top:-17px;
    }

    .draw-schedule{
        font-size:.78rem;
    }


    /* ---------- RESULT NUMBER ---------- */

    .latest-number{
        font-size:4rem;
    }


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

    .statistics-wrapper{
        padding:20px 10px;
    }

    .statistics-grid{
        gap:10px;
    }

    .stat-card{
        gap:9px;
        padding:14px 9px;
        min-height:82px;
    }

    .stat-icon{
        width:42px;
        height:42px;
        font-size:.95rem;
    }

    .stat-title{
        font-size:.64rem;
    }

    .stat-value{
        font-size:1.05rem;
    }


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

    .history-wrapper{
        padding:20px 8px;
    }

    .history-header h2{
        font-size:1.25rem;
    }

    .history-table table{
        min-width:580px;
    }

    .history-table th{
        padding:12px 10px;
        font-size:.72rem;
    }

    .history-table td{
        padding:12px 10px;
        font-size:.82rem;
    }

    .page-btn{
        min-width:36px;
        height:36px;
        padding:0 9px;
    }


    /* ---------- FOOTER ---------- */

    .footer-right{
        gap:13px;
    }

    .footer-right a{
        font-size:.76rem;
    }

}


/* ==========================================================
   VERY SMALL PHONES
   400px and below
========================================================== */

@media (max-width: 400px){

    .container{
        padding-left:10px;
        padding-right:10px;
    }

    .logo img{
        width:160px;
    }

    .main-nav ul{
        gap:12px;
    }

    .main-nav a{
        font-size:11px;
    }

    .header-clock{
        font-size:.68rem;
    }

    .hero-title{
        font-size:1.7rem;
    }

    .hero-subtitle{
        font-size:.88rem;
    }

    .time-box{
        width:52px;
        height:66px;
    }

    .time-value{
        font-size:2rem;
    }

    .separator{
        font-size:1.5rem;
    }

    .latest-number{
        font-size:3.5rem;
    }

    .statistics-grid{
        grid-template-columns:1fr;
    }

    .stat-card{
        min-height:78px;
    }

}