/* =========================================================
   CUSTOM CSS - MODIFIKASI UI/UX TES ONLINE
   Fitur: Checkbox Modern, Pilihan Ganda Icon, Tabel Benar/Salah
   ========================================================= */

/* --- 1. GENERAL UTILITY & LAYOUT --- */

/* Tombol Kembali ke Atas */
.scrolltop {
    display: none;
    width: 100%;
    margin: 0 auto;
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 999;
}
.scroll {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: #b2b2b2;
    background: rgba(178,178,178,0.7);
    padding: 10px;
    text-align: center;
    margin: 0;
    cursor: pointer;
    transition: 0.5s;
    border-radius: 4px;
}
.scroll:hover {
    background: rgba(178,178,178,1.0);
}
.scroll .fa {
    font-size: 30px;
    margin-top: -3px;
    color: #fff;
}

/* Header Login */
.login-header-top {
    height: 63px;
}
.bg-login {
    background: #373B44; 
    background: -webkit-linear-gradient(to right, #4286f4, #373B44); 
    background: linear-gradient(to right, #4286f4, #373B44);
}

/* Tombol Soal Custom */
.btn-soal {
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: all 0.2s;
}
.btn-soal:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* =============================================
   STYLE KHUSUS TIPE 1 (PILIHAN GANDA - .radio-one)
   ============================================= */
.radio-one {
    margin-bottom: 10px;
    position: relative;
}

/* Label Container: Flexbox Handal */
.radio-one > label {
    cursor: pointer;
    padding: 12px 15px;
    display: flex;
    align-items: flex-start; /* Kunci agar teks panjang tetap rapi di samping */
    width: 100%;
    border-radius: 8px; /* Lebih rounded modern */
    border: 1px solid #eee; /* Border halus */
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    margin-bottom: 0;
    font-weight: normal !important;
    position: relative;
}

/* Efek Hover */
.radio-one > label:hover {
    background-color: #f4f8ff;
    border-color: #cce0ff;
}

/* Efek Saat Dipilih (Active State) */
/* Selector :has() modern, fallback via JS logic jika perlu */
.radio-one > label:has(input:checked) {
    background-color: #eef5ff;
    border-color: #0008BF;
    box-shadow: 0 2px 8px rgba(0, 8, 191, 0.1);
}
/* Fallback untuk browser lama (sibling selector) */
.radio-one input[type="radio"]:checked + .icon-container + .text-container {
    /* Style diaplikasikan via parent logic biasanya, tapi ini safety net */
}

/* Sembunyikan Input Radio Asli */
.radio-one input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    z-index: -1;
}

/* --- STYLE ICON ABJAD (RESPONSIVE) --- */
.radio-one .icon-container {
    flex-shrink: 0; 
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px; 
    margin-top: 2px; /* Alignment dengan teks */
}

.radio-one .icon-container img {
    width: 32px;
    height: 32px;
    padding: 2px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background-color: #fff;
    object-fit: contain;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efek Gambar Saat Dipilih */
.radio-one input[type="radio"]:checked + .icon-container img {
    background-color: #0008BF;
    border-color: #0008BF;
    box-shadow: 0 4px 10px rgba(0, 8, 191, 0.3);
    transform: scale(1.1);
}

/* --- CONTAINER TEKS JAWABAN --- */
.radio-one .text-container {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    flex-grow: 1;
    word-wrap: break-word;
}
   
/* Gambar di dalam teks jawaban (misal rumus MTK) */
.radio-one .text-container img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Ubah warna teks saat dipilih */
.radio-one input[type="radio"]:checked ~ .text-container {
    color: #0008BF;
    font-weight: 500;
}

/* --- RESPONSIVE MOBILE (Layar Kecil) --- */
@media (max-width: 768px) {
    .radio-one > label {
        padding: 10px;
    }
    .radio-one .icon-container {
        margin-right: 10px;
    }
    .radio-one .icon-container img {
        width: 36px;
        height: 36px;
        padding: 6px;
    }
    .radio-one .text-container {
        font-size: 14px;
    }
}


/* =============================================
   STYLE KHUSUS TIPE 4 (CHECKBOX MODERN)
   ============================================= */
.checkbox-modern {
    margin-bottom: 10px;
    position: relative;
}

/* Label Container */
.checkbox-modern > label {
    cursor: pointer;
    padding: 12px 15px;
    display: flex;            
    align-items: flex-start;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    margin-bottom: 0;
    font-weight: normal !important;
    position: relative;
}

/* Efek Hover */
.checkbox-modern > label:hover {
    background-color: #f4f8ff;
    border-color: #cce0ff;
}

/* Efek Saat Dipilih */
.checkbox-modern > label:has(input:checked) {
    background-color: #eef5ff;
    border-color: #0008BF;
    box-shadow: 0 2px 8px rgba(0, 8, 191, 0.1);
}

/* Sembunyikan Checkbox Asli */
.checkbox-modern input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* --- CUSTOM CHECKMARK BOX --- */
.checkbox-modern .checkmark {
    position: relative;
    height: 24px;
    width: 24px;
    background-color: #fff;
    border: 2px solid #b0b0b0;
    border-radius: 4px;
    margin-right: 15px;
    flex-shrink: 0;
    transition: all 0.2s;
    margin-top: 2px;
}

/* Saat Dicentang: Ubah Background & Border */
.checkbox-modern input:checked ~ .checkmark {
    background-color: #0008BF;
    border-color: #0008BF;
    box-shadow: 0 2px 5px rgba(0, 8, 191, 0.3);
}

/* Icon Centang (CSS Pure) */
.checkbox-modern .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-modern input:checked ~ .checkmark:after {
    display: block;
}

/* Teks Container Checkbox */
.checkbox-modern .text-container {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    flex-grow: 1;
    word-wrap: break-word;
}

.checkbox-modern input:checked ~ .text-container {
    color: #0008BF;
    font-weight: 500;
}


/* =========================================
   STYLE KHUSUS TIPE 5 (TABEL BENAR SALAH)
   ========================================= */

/* Tabel Layout */
.table-bs-container th {
    background-color: #f4f4f4;
    vertical-align: middle !important;
    border-bottom: 2px solid #ddd !important;
    text-transform: uppercase;
    font-size: 14px;
}
.table-bs-container td {
    vertical-align: middle !important;
}
.table-bs-container tr:hover {
    background-color: #f9f9f9;
}

/* Radio Button Container di TD */
.radio-bs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 5px;
}

/* Sembunyikan Input Asli */
.radio-bs input[type="radio"] {
    display: none;
}

/* Label Wrapper */
.radio-bs label {
    cursor: pointer;
    margin: 0;
    padding: 0;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Lingkaran Indikator */
.radio-bs .circle-indicator {
    display: block;
    width: 28px;
    height: 28px;
    border: 3px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover Effect */
.radio-bs label:hover .circle-indicator {
    border-color: #4286f4;
    background-color: #eef5ff;
    transform: scale(1.1);
}

/* CHECKED STATE */
.radio-bs input[type="radio"]:checked + .circle-indicator {
    border-color: #0008BF;
    background-color: #0008BF;
    box-shadow: 0 0 10px rgba(0, 8, 191, 0.5);
    transform: scale(1.1);
}

/* Titik Putih di Tengah */
.radio-bs input[type="radio"]:checked + .circle-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
}

        /* WARNA OPSI */
        /* Salah (0) - Merah */
        .radio-bs-salah input:checked + .circle-indicator { background: #dd4b39; border-color: #dd4b39; box-shadow: 0 0 5px rgba(221, 75, 57, 0.5); }
        
        /* Benar (1) - Hijau */
        .radio-bs-benar input:checked + .circle-indicator { background: #00a65a; border-color: #00a65a; box-shadow: 0 0 5px rgba(0, 166, 90, 0.5); }
        
        /* Tidak Tepat (2) - Oranye */
        .radio-bs-tidak-tepat input:checked + .circle-indicator { background: #f39c12; border-color: #f39c12; box-shadow: 0 0 5px rgba(243, 156, 18, 0.5); }
        
        /* Tepat (3) - Biru */
        .radio-bs-tepat input:checked + .circle-indicator { background: #0073b7; border-color: #0073b7; box-shadow: 0 0 5px rgba(0, 115, 183, 0.5); }
        
        /* Hover Effects */
        .radio-bs label:hover .circle-indicator { transform: scale(1.1); }


/* =========================================
   ANIMASI BACKGROUND (Tetap Dipertahankan)
   ========================================= */
.bg {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
}
.bg2 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;
}
.bg3 {
    animation-duration: 5s;
}

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}

/* Helper Class untuk Checkbox Legacy (jika masih ada yang pakai class .checkbox lama) */
.checkbox {
    margin: 10px 0;
    font-size: 15px;
    padding: 10px 15px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.checkbox:hover {
    background-color: #eef5ff;
}
.checkbox input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.3);
}
.checkbox label {
    margin-bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}


    /* WEBCAM pemantau siswa saat mengerjakan */
    #webcam-container {
        position: fixed;
        top: 5px; 
        left: 50%; 
        transform: translateX(-50%); 
        z-index: 9999;
        border: 3px solid #dd4b39; 
        border-radius: 8px;
        overflow: hidden;
        background: #000;
        box-shadow: 0 4px 8px rgba(0,0,0,0.5);
        /* Tambahan transisi halus saat pertama kali load */
        transition: transform 0.1s; 
    }
    
    #webcam-header {
        background: #dd4b39;
        color: white;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        padding: 4px 0;
        letter-spacing: 1px;
        /* Tambahan agar bisa di-drag */
        cursor: move; 
        touch-action: none; /* Mencegah layar HP ikut scroll saat header disentuh */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    #video-webcam {
        width: 100px; 
        height: auto;
        display: block;
        transform: scaleX(-1); 
    }
    
    .blink-record {
        animation: blinker 1.5s linear infinite;
        color: #00ff00; 
    }
    
    @keyframes blinker {
        50% { opacity: 0; }
    }
    
    @media (max-width: 768px) {
        #webcam-container {
            top: 5px; 
        }
        #video-webcam { 
            width: 80px; 
        }
    }