/* khusus halaman jadwa lsholat mobile */
@media(max-width:768px){

    /* hanya container yang punya halaman jadwal sholat */
    .container.flexcon.column.gap-20:has(.jadwal-sholat-page){

        padding-left:0 !important;
        padding-right:0 !important;
    }

    /* top tags hilang di halaman jadwal sholat */
    .container.flexcon.column.gap-20:has(.jadwal-sholat-page)
    .top-tags{

        display:none !important;
    }

    /* jadwal sholat full layar */
    .jadwal-sholat-page{

        width:100vw !important;
        max-width:100vw !important;

        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;

        padding:10px !important;

        border-radius:0 !important;

        box-sizing:border-box !important;

        overflow:hidden !important;
    }

}




/* =========================
MOBILE FULL FIX
SEMUA ELEMEN RESPONSIVE
========================= */
@media(max-width:768px){

    /* CONTAINER */
    .jadwal-sholat-page{

        width:100% !important;

        padding:12px !important;

        box-sizing:border-box !important;

        overflow:hidden !important;
    }

    /* HEADER */
    .jadwal-header{

        margin-bottom:16px !important;
    }

    .jadwal-header h1{

        font-size:22px !important;

        line-height:1.2 !important;

        margin-bottom:6px !important;
    }

    .jadwal-info{

        font-size:12px !important;
    }

    /* HERO */
    .jadwal-main-card{

        flex-direction:column !important;

        gap:14px !important;

        padding:14px !important;

        border-radius:14px !important;
    }

    /* ICON */
    .jadwal-left{

        display:flex !important;

        justify-content:center !important;
    }

    .jadwal-left img{

        width:90px !important;

        height:90px !important;
    }

    /* CENTER */
    .jadwal-center{

        width:100% !important;
    }

    /* COUNTDOWN */
    .countdown-wrap{

        display:flex !important;

        flex-wrap:wrap !important;

        justify-content:center !important;

        gap:8px !important;

        margin-bottom:12px !important;
    }

    .count-box{

        width:60px !important;

        height:60px !important;

        border-radius:10px !important;
    }

    .count-box strong{

        font-size:22px !important;
    }

    .count-box span{

        font-size:10px !important;

        margin-top:2px !important;
    }

    /* INFO */
    .count-info{

        width:100% !important;

        text-align:center !important;

        padding-top:4px !important;
    }

    .hero-label{

        font-size:10px !important;
    }

    .hero-prayer{

        font-size:20px !important;

        line-height:1.2 !important;

        margin:5px 0 !important;
    }

    .hero-city{

        font-size:11px !important;
    }

    /* SELECT */
    #citySelect{

        height:44px !important;

        font-size:14px !important;

        border-radius:10px !important;

        padding:0 12px !important;
    }

    /* QUOTE */
    .jadwal-quote{

        width:100% !important;

        padding:14px !important;

        border-radius:12px !important;
    }

    .quote-title{

        font-size:16px !important;

        margin-bottom:8px !important;
    }

    .quote-text{

        font-size:12px !important;

        line-height:1.6 !important;
    }

.jadwal-grid{

    grid-template-columns:repeat(3,1fr) !important;

    gap:8px !important;
}

    .jadwal-item{

        padding:12px !important;

    }

    .jadwal-item span{

        font-size:11px !important;

        margin-bottom:4px !important;
    }

    .jadwal-item strong{

        font-size:18px !important;
    }

    /* TABLE */
    .jadwal-table-wrap{

        width:100% !important;

        overflow:hidden !important;

    }

    .jadwal-table{

        width:100% !important;

        table-layout:fixed !important;

        border-collapse:collapse !important;
    }

    .jadwal-table th,
    .jadwal-table td{

        padding:4px 1px !important;

        font-size:9px !important;

        line-height:1.2 !important;

        white-space:normal !important;

        word-break:break-word !important;

        text-align:center !important;
    }

    .jadwal-table th{

        font-size:7px !important;

        font-weight:700 !important;
    }

    /* TANGGAL */
    .jadwal-table td:first-child,
    .jadwal-table th:first-child{

        width:42px !important;
    }

    /* SUMBER */
    .jadwal-source{

        font-size:10px !important;

        margin-top:10px !important;

        line-height:1.5 !important;
    }

}










/* =========================
   CONTAINER
========================= */

.jadwal-sholat-page{

    max-width:1120px;

    margin:auto;

    padding:30px 20px;

    box-sizing:border-box;

    background:
    linear-gradient(
        135deg,
        #f8fff8 0%,
        #edf8ef 28%,
        #dff0e2 60%,
        #cfe6d2 100%
    );



    position:relative;

    overflow:hidden;
}

/* GLOW */
.jadwal-sholat-page::before{

    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.55) 0%,
        rgba(255,255,255,0) 70%
    );

    pointer-events:none;
}



/* =========================
   HEADER
========================= */

.jadwal-header{

    margin-bottom:25px;
}

.jadwal-header h1{

    font-size:40px;

    color:#00000;
}

.jadwal-info{

    color:#557055;

    font-size:18px;
}



/* =========================
   HERO
========================= */

.jadwal-top-wrap{

    margin-bottom:20px;
}

.jadwal-main-card{

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.72),
        rgba(234,245,236,.88)
    );

    backdrop-filter:blur(14px);

    border-radius:26px;

    padding:24px;

    display:flex;

    gap:20px;

    align-items:stretch;
}

.jadwal-left img{

    width:170px;
    height:170px;

    object-fit:contain;
}

.jadwal-center{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:space-between;
}



/* =========================
   COUNTDOWN
========================= */

.countdown-wrap{

    display:flex;

    gap:12px;

    align-items:flex-start;

    margin-bottom:18px;
}

.count-box{

    width:95px;
    height:95px;

    border-radius:20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.85),
        rgba(221,239,225,.92)
    );
}

.count-box strong{

    font-size:44px;

    line-height:1;

    color:#2e5b39;
}

.count-box span{

    color:#6b826f;

    margin-top:5px;
}

.count-info{

    padding-top:5px;
}

.hero-label{

    font-size:12px;

    color:#6f8772;

    letter-spacing:.5px;

    text-transform:uppercase;
}

.hero-prayer{

    font-size:32px;

    margin:10px 0;

    color:#214221;
}

.hero-city{

    font-size:13px;

    color:#6f8772;
}



/* =========================
   SELECT
========================= */

#citySelect{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    padding:0 18px;

    font-size:22px;

    background:#fffff;

    outline:none;

    color:#000000;

    appearance:none;

    -webkit-appearance:none;
}



/* =========================
   QUOTE ISLAMIC
========================= */

.jadwal-quote{

    width:320px;

    background:
    linear-gradient(
        135deg,
        #355b3f 0%,
        #2d4c36 45%,
        #1d3223 100%
    );

    color:#fff;

    border-radius:24px;

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    text-align:center;

    position:relative;

    overflow:hidden;
}

.jadwal-quote::before{

    content:"☪";

    position:absolute;

    top:-10px;
    right:18px;

    font-size:90px;

    opacity:.08;

    line-height:1;
}

.quote-title{

    font-size:24px;

    margin-bottom:16px;

    font-weight:700;
}

.quote-text{

    line-height:1.9;

    font-weight:600;

    color:rgba(255,255,255,.92);
}



/* =========================
   GRID
========================= */

.jadwal-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:14px;

    margin-bottom:22px;
}

.jadwal-item{

    background:
    linear-gradient(
        135deg,
        rgba(53,91,63,.95),
        rgba(28,47,35,.98)
    );

    color:#fff;

    border-radius:22px;

    padding:20px;
}

.jadwal-item span{

    display:block;

    opacity:.72;

    margin-bottom:8px;

    font-size:14px;

    letter-spacing:.5px;

    text-transform:uppercase;
}

.jadwal-item strong{

    font-size:28px;
}



/* =========================
   TABLE
========================= */

.jadwal-table-wrap{

    overflow:auto;
}

.jadwal-table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;
}

.jadwal-table thead{

    background:
    linear-gradient(
        135deg,
        #355b3f,
        #23402b
    );

    color:#fff;
}

.jadwal-table th{

    padding:16px;

    font-size:15px;

    font-weight:700;

    border:none;
}

.jadwal-table td{

    padding:15px;

    text-align:center;

    background:#f7fbf7;

    color:#214221;

    font-size:15px;

    border:none;

    transition:.2s;
}

/* zebra soft */
.jadwal-table tr:nth-child(even) td{

    background:#edf5ee;
}

/* HARI BERJALAN */
.jadwal-table tr.today-row td{

    background:#b7d7bd !important;

    color:#18351f !important;

    font-weight:700;
}





/* =========================
   SOURCE
========================= */

.jadwal-source{

    margin-top:20px;

    color:#6b826f;

    font-size:14px;
}



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

@media(max-width:786px){

    .jadwal-main-card{

        flex-direction:column;
    }

    .jadwal-quote{

        width:100%;
    }

    .countdown-wrap{

        flex-wrap:wrap;
    }

    .jadwal-grid{

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

    .jadwal-header h1{

        font-size:24px;
    }

    .hero-prayer{

        font-size:26px;
    }

    #citySelect{

        font-size:18px;
    }
}