/* =====================================================
   TUTOR LMS QUIZ – FIX & MODERN UI
   Compatible: Tutor LMS Pro
   Author: Nguyen Ngoc Anh
===================================================== */

/* -----------------------------------------------------
   1. FIX RADIO / CHECKBOX BỊ ẨN (Theme conflict)
----------------------------------------------------- */
.tutor-quiz-wrap input[type="radio"],
.tutor-quiz-wrap input[type="checkbox"] {
    position: static !important;
    clip: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 12px;
}

/* -----------------------------------------------------
   2. CUSTOM RADIO – Modern Style (Udemy-like)
----------------------------------------------------- */
.tutor-quiz-question-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #9ca3af;
    border-radius: 50%;
    background: #fff;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.tutor-quiz-question-item input[type="radio"]:checked {
    border-color: #2563eb;
    background: #2563eb;
}

.tutor-quiz-question-item input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
}

/* -----------------------------------------------------
   3. KHUNG ĐÁP ÁN – BORDER RADIUS + HOVER
----------------------------------------------------- */
.tutor-quiz-question-item .tutor-card {
    border-radius: 0 !important;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    padding: 14px 16px;
    transition: all 0.25s ease;
}

/* Hover */
.tutor-quiz-question-item:hover .tutor-card {
    border-color: #0c6fd1;
    background: #f8fbff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
}

/* Đáp án đang chọn */
.tutor-quiz-question-item input:checked ~ .tutor-card {
    border-color: #0c6fd1;
    background: #eff6ff;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.18);
}

/* -----------------------------------------------------
   4. TEXT ĐÁP ÁN
----------------------------------------------------- */
.tutor-quiz-question-item span {
    font-size: 16px;
    line-height: 1.6;
    color: #111827;
}

/* -----------------------------------------------------
   5. ĐÁP ÁN ĐÚNG / SAI (SAU KHI NỘP BÀI)
----------------------------------------------------- */
.tutor-quiz-answer-correct .tutor-card {
    border-color: #22c55e;
    background: #ecfdf5;
}

.tutor-quiz-answer-wrong .tutor-card {
    border-color: #ef4444;
    background: #fef2f2;
}

/* -----------------------------------------------------
   6. MOBILE OPTIMIZATION
----------------------------------------------------- */
@media (max-width: 768px) {
    .tutor-quiz-question-item .tutor-card {
        padding: 12px;
        border-radius: 0 !important;
    }
}

    .tutor-quiz-question-item span {
        font-size: 15px;
    }

    .tutor-quiz-wrap input[type="radio"],
    .tutor-quiz-wrap input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }
}

/* -----------------------------------------------------
   7. TOUCH FRIENDLY (MOBILE CLICK TỐT HƠN)
----------------------------------------------------- */
.tutor-quiz-question-item label {
    cursor: pointer;
}

/* -----------------------------------------------------
   END FILE
----------------------------------------------------- */
/* =====================================================
   MOBILE FULL FIX – TUTOR LMS QUIZ
===================================================== */
@media (max-width: 768px) {

    /* 1. Khung đáp án – vuông, full width, dễ tap */
    .tutor-quiz-question-item .tutor-card {
        border-radius: 0 !important;
        padding: 14px 14px;
        width: 100%;
    }

    /* 2. Label chiếm toàn bộ vùng click */
    .tutor-quiz-question-item label {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        cursor: pointer;
    }

    /* 3. Radio to hơn – dễ bấm */
    .tutor-quiz-wrap input[type="radio"],
    .tutor-quiz-wrap input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    /* 4. Text đáp án – dễ đọc */
    .tutor-quiz-question-item span {
        font-size: 16px;
        line-height: 1.6;
    }

    /* 5. Bỏ shadow để UI phẳng, nhẹ */
    .tutor-quiz-question-item:hover .tutor-card,
    .tutor-quiz-question-item input:checked ~ .tutor-card {
        box-shadow: none;
    }