/* ==========================================================================
   NSCH Quiz Answer Layout Toggle - CSS
   Target: Course ID 7 → Quiz 14 (Pretest, cid=92) & Quiz 15 (Posttest, cid=100)
   Guru Pro Version: 5.2.2
   Thaimentalhealth.com | Great Naka Co., Ltd.
   ========================================================================== */

/* ---------- ปุ่มสลับ Layout (Sticky บนหัว Quiz) ---------- */
.nsch-quiz-toggle {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 0 20px 0 !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
    border: 1px solid #cbd5e0 !important;
    border-radius: 10px !important;
    flex-wrap: wrap !important;
    font-family: 'Kanit', 'Sarabun', sans-serif !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.nsch-quiz-toggle .nsch-label {
    font-size: 16px !important;
    color: #2d3748 !important;
    margin-right: auto !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.4 !important;
}

.nsch-quiz-toggle .nsch-label::before {
    content: "⚙️";
    font-size: 18px;
}

.nsch-quiz-toggle button {
    padding: 8px 16px !important;
    border: 2px solid #2c7a7b !important;
    background: #fff !important;
    color: #2c7a7b !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-family: 'Kanit', 'Sarabun', sans-serif !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.2 !important;
    min-height: 38px !important;
    box-shadow: none !important;
}
.nsch-quiz-toggle button:hover {
    background: #e6fffa !important;
    transform: translateY(-1px) !important;
}
.nsch-quiz-toggle button.nsch-active {
    background: #2c7a7b !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(44, 122, 123, 0.35) !important;
}
.nsch-quiz-toggle button.nsch-active:hover {
    background: #285e61 !important;
}
.nsch-quiz-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   LIST MODE (แนวตั้ง) - ค่าเริ่มต้น (เหมาะกับ อสม./ผู้สูงวัย)
   ========================================================================== */

/* ยกเลิก uk-grid เปลี่ยนเป็น block stack */
body.nsch-quiz-list .guru-quiz__answers,
body.nsch-quiz-list .guru-quiz__answers.uk-grid,
body.nsch-quiz-list .guru-quiz__answers.wk-grid {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ทุก answer-wrapper ให้เต็มความกว้าง */
body.nsch-quiz-list .guru-quiz__answer-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    display: block !important;
}

/* กล่องตัวเลือกแต่ละข้อ */
body.nsch-quiz-list .guru-quiz__answer {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 18px !important;
    background: #f7fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    font-family: 'Kanit', 'Sarabun', sans-serif !important;
    color: #2d3748 !important;
    min-height: 48px !important;
}

body.nsch-quiz-list .guru-quiz__answer:hover {
    border-color: #2c7a7b !important;
    background: #e6fffa !important;
    transform: translateX(2px) !important;
    cursor: pointer !important;
}

/* checkbox/radio ใหญ่ขึ้น จิ้มง่าย */
body.nsch-quiz-list .guru-quiz__answer input[type="checkbox"],
body.nsch-quiz-list .guru-quiz__answer input[type="radio"] {
    transform: scale(1.3) !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    accent-color: #2c7a7b !important;
}

body.nsch-quiz-list .guru-quiz__check-box {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

body.nsch-quiz-list .guru-quiz__answer > span {
    flex: 1 !important;
    word-break: break-word !important;
	padding-left: 15px;
}

/* ==========================================================================
   GRID MODE (แนวนอน) - เหมาะกับจอกว้าง เห็นตัวเลือกครบในจอเดียว
   ========================================================================== */

body.nsch-quiz-grid .guru-quiz__answers,
body.nsch-quiz-grid .guru-quiz__answers.uk-grid,
body.nsch-quiz-grid .guru-quiz__answers.wk-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.nsch-quiz-grid .guru-quiz__answer-wrapper {
    width: auto !important;
    max-width: 100% !important;
    flex: unset !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    display: block !important;
}

body.nsch-quiz-grid .guru-quiz__answer {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 14px 16px !important;
    background: #f7fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    font-family: 'Kanit', 'Sarabun', sans-serif !important;
    color: #2d3748 !important;
    min-height: 60px !important;
}

body.nsch-quiz-grid .guru-quiz__answer:hover {
    border-color: #2c7a7b !important;
    background: #e6fffa !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(44, 122, 123, 0.15) !important;
    cursor: pointer !important;
}

body.nsch-quiz-grid .guru-quiz__answer input[type="checkbox"],
body.nsch-quiz-grid .guru-quiz__answer input[type="radio"] {
    transform: scale(1.2) !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    accent-color: #2c7a7b !important;
}

body.nsch-quiz-grid .guru-quiz__check-box {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

body.nsch-quiz-grid .guru-quiz__answer > span {
    flex: 1 !important;
    word-break: break-word !important;
	padding-left: 15px;
}

/* ==========================================================================
   Responsive: บังคับ List บนมือถือเสมอ (อ่านง่ายกว่า)
   ========================================================================== */

@media (max-width: 768px) {
    body.nsch-quiz-grid .guru-quiz__answers,
    body.nsch-quiz-grid .guru-quiz__answers.uk-grid,
    body.nsch-quiz-grid .guru-quiz__answers.wk-grid {
        grid-template-columns: 1fr !important;
    }
    .nsch-quiz-toggle {
        padding: 10px 12px !important;
    }
    .nsch-quiz-toggle .nsch-label {
        width: 100% !important;
        margin-bottom: 6px !important;
        margin-right: 0 !important;
        font-size: 15px !important;
    }
    .nsch-quiz-toggle button {
        flex: 1 !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   ปรับ guru-quiz__question-title ให้อ่านง่ายขึ้น (ทั้งสอง mode)
   ========================================================================== */

body.nsch-quiz-list .guru-quiz__question-title,
body.nsch-quiz-grid .guru-quiz__question-title {
    font-family: 'Kanit', 'Sarabun', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #1a202c !important;
    font-weight: 500 !important;
    margin-bottom: 14px !important;
}