/* Dalam assets/css/flip-clock.css */

/* --- Gaya Kontena Utama --- */
.wsj-flip-clock-container {
    padding: 30px;
    border-radius: 8px;
    color: #FFFFFF; /* DISET KE PUTIH PENUH */
    background-color: #000000; /* Pastikan latar belakang gelap */
    font-family: Arial, sans-serif;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 0.3s, background-image 0.3s;
}

/* --- Header --- */
.wsj-header {
    text-align: center;
    margin-bottom: 20px;
}
.wsj-header h3 {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    color: inherit; /* Inherit dari kontena (PUTIH) */
}
/* Gaya untuk Tarikh Miladi dan Hijriah */
.wsj-date-info { 
    margin: 0 0 10px 0;
    font-size: 1em;
    font-weight: bold;
    opacity: 0.9; /* Opacity rendah sikit untuk teks sokongan */
}
/* Gaya untuk Lokasi */
.wsj-location-info { 
    margin: 5px 0 0 0;
    font-size: 0.9em;
    opacity: 0.8; /* Opacity rendah sikit untuk teks sokongan */
}


/* --- Paparan Jam Utama --- */
.wsj-clock-display {
    text-align: center;
    margin-bottom: 30px;
}
#wsj-live-time {
    font-size: 5em; 
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    display: block;
    color: #FFFFFF; /* TETAPKAN SECARA SPESIFIK KE PUTIH */
}
#wsj-next-time-label {
    font-size: 1em;
    opacity: 0.9; /* Opacity dinaikkan */
    margin-top: 10px;
    display: block;
}
#wsj-next-time-value {
    color: #4CAF50; 
    font-weight: bold;
}

/* --- Senarai Waktu Solat (Desktop/Tablet) --- */
.wsj-waktu-list {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px; 
    justify-content: center;
}

.wsj-waktu-item {
    background-color: rgba(255, 255, 255, 0.1); /* Latar belakang item sedikit lutsinar */
    border-radius: 6px;
    padding: 15px 10px;
    min-width: 100px;
    text-align: center;
    flex-grow: 1;
    transition: background-color 0.3s, box-shadow 0.3s;
    color: #FFFFFF; /* Pastikan teks item adalah PUTIH */
}

.wsj-time-label {
    display: block;
    font-size: 0.8em;
    opacity: 0.9; /* Opacity dinaikkan */
    margin-bottom: 5px;
}

.wsj-time-value {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: #FFFFFF; /* Pastikan nilai masa adalah PUTIH */
}

/* --- Sorotan Waktu Semasa & Seterusnya --- */

/* Waktu Semasa */
.wsj-waktu-item.wsj-current {
    background-color: #f7a62d; 
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(247, 166, 45, 0.8);
}
.wsj-waktu-item.wsj-current .wsj-time-value,
.wsj-waktu-item.wsj-current .wsj-time-label {
    color: #1a1a1a; /* Teks dalam kotak sorotan harus gelap */
    opacity: 1;
}

/* Waktu Seterusnya */
.wsj-waktu-item.wsj-next {
    background-color: #4CAF50; 
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
}
.wsj-waktu-item.wsj-next .wsj-time-value,
.wsj-waktu-item.wsj-next .wsj-time-label {
    color: #1a1a1a; /* Teks dalam kotak sorotan harus gelap */
    opacity: 1;
}

/* ==================================== */
/* --- MOBILE VIEW OPTIMIZATION --- */
/* ==================================== */
@media (max-width: 600px) {
    .wsj-flip-clock-container {
        padding: 15px; 
        min-height: auto;
    }

    /* Saiz Jam Utama (Lebih Kecil) */
    #wsj-live-time {
        font-size: 3.5em; 
    }
    .wsj-clock-display {
        margin-bottom: 20px;
    }

    /* Susunan Waktu Solat */
    .wsj-waktu-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px; 
    }

    .wsj-waktu-item {
        padding: 10px 5px; 
        min-width: unset;
    }

    .wsj-time-label {
        font-size: 0.7em; 
        margin-bottom: 3px;
    }

    .wsj-time-value {
        font-size: 1em; 
    }
    
    /* Header/Tarikh */
    .wsj-date-info {
        font-size: 0.8em;
        margin-bottom: 5px;
    }
    .wsj-header h3 {
        font-size: 1.2em;
    }
}