/* --- Global Lesson Styles --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f7f6;
    color: #333;
}
.il-lesson-container {
    max-width: 800px; margin: 20px auto; border: 1px solid #ddd;
    border-radius: 8px; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- Step Styles --- */
.il-step {
    display: none; /* All steps hidden by default */
    border-bottom: 1px solid #eee;
}
.il-step.il-active {
    display: block; /* Only active step is shown */
}
.il-step:last-child { border-bottom: none; }
.il-step-header {
    padding: 20px; background: #f9f9f9; border-bottom: 1px solid #eee;
}
.il-step-header h3 { margin: 0; color: #005a9c; }
.il-step-content {
    padding: 20px;
}

/* --- Content Group (il-content-item) Styles --- */
.il-content-item {
    display: none; /* All content groups hidden by default */
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
}
.il-content-item.il-active {
    display: block; /* Only active group is shown */
}
/* Margin between joined items */
.il-content-item > * + * {
    margin-top: 20px;
}

/* --- Content Block Styles --- */
.il-text-block { position: relative; }
.il-picture-block img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.il-video-wrapper {
    position: relative; padding-bottom: 56.25%; /* 16:9 */
    height: 0; overflow: hidden;
}
.il-video-wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* --- Continue & Complete Buttons --- */
.il-continue-btn {
    display: inline-block; margin-top: 15px; padding: 10px 18px; font-size: 15px;
    font-weight: bold; color: #fff; background-color: #28a745;
    border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s;
}
.il-continue-btn:hover { background-color: #1e7e34; }

.il-complete-btn {
    display: none; /* Hidden by default */
    margin-top: 25px; padding: 12px 20px; font-size: 16px;
    font-weight: bold; color: #fff; background-color: #007bff;
    border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s;
}
.il-complete-btn.il-active {
    display: inline-block;
}
.il-complete-btn:hover { background-color: #0056b3; }
.il-complete-btn:disabled { background-color: #ccc; cursor: not-allowed; }

/* Try Again Button */
.il-try-again-btn {
    display: none; /* Hidden by default, JS will show it */
    margin-top: 25px; padding: 12px 20px; font-size: 16px;
    font-weight: bold; color: #fff; background-color: #ffc107;
    border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s;
    margin-left: 10px;
}
.il-try-again-btn:hover { background-color: #e0a800; }

/* --- Feedback Messages --- */
.il-step-feedback, .il-lesson-feedback {
    display: none;
    padding: 15px; margin-top: 20px; border-radius: 5px;
    font-weight: bold;
}
.il-lesson-feedback {
    margin: 20px;
    display: none; /* Hide by default, showFinalScoreButton will show it */
}
.il-pass {
    color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb;
}
.il-fail {
    color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb;
}


/* --- Note Popup Styles --- */
.il-note-btn {
    background-color: #ffc107; border: none; padding: 5px 10px;
    border-radius: 5px; cursor: pointer; font-weight: bold;
}
.il-note-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); display: none;
    justify-content: center; align-items: center; z-index: 999;
}
.il-note-popup-content {
    background: #fff; padding: 30px; border-radius: 8px; max-width: 500px;
    width: 90%; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative;
}
.il-note-close-btn {
    position: absolute; top: 10px; right: 15px; font-size: 24px;
    font-weight: bold; cursor: pointer; color: #888;
}
.il-note-close-btn:hover { color: #000; }

/* --- Quiz Styles --- */
.il-quiz {
    border: 1px solid #007bff; border-radius: 8px;
    padding: 20px; background: #f8faff;
}
.il-quiz.quiz-submitted {
    border-color: #6c757d;
    background-color: #f8f9fa;
}
.il-quiz h4 { margin-top: 0; color: #007bff; }
.il-quiz-question-block {
    position: relative;
    margin-bottom: 20px; padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.il-quiz-question { font-weight: bold; margin-bottom: 10px; }
.il-quiz-options label {
    display: block; margin-bottom: 8px; padding: 10px;
    background: #f1f1f1; border-radius: 5px; cursor: pointer;
}
.il-quiz-options label:hover { background: #e0e0e0; }

.il-quiz[data-quiz-mode="single"] .il-quiz-question-block {
    display: none; /* Hide all questions */
}
.il-quiz[data-quiz-mode="single"] .il-quiz-question-block.il-q-active {
    display: block; /* Show only active question */
}

.il-submit-quiz-btn {
    padding: 10px 20px; font-size: 15px; font-weight: bold; color: #fff;
    background-color: #007bff; border: none; border-radius: 5px; cursor: pointer;
}
.il-submit-quiz-btn:hover { background-color: #0056b3; }
.il-submit-quiz-btn:disabled { background-color: #ccc; }

/* Quiz Feedback */
.il-quiz-q-feedback, .il-quiz-main-feedback {
    margin-top: 10px; font-weight: bold; padding: 10px;
    border-radius: 5px; display: none;
}
.il-quiz-q-feedback.il-correct { color: #155724; background-color: #d4edda; }
.il-quiz-q-feedback.il-incorrect { color: #721c24; background-color: #f8d7da; }
.il-quiz-main-feedback {
    display: none;
}

/* --- NEW: Updated TTS Styles --- */
.il-tts-controls {
    padding: 10px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.il-tts-group {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-grow: 1;
}
.il-tts-controls label {
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
}
.il-tts-controls select {
    max-width: 250px;
    flex-grow: 1;
}
.il-tts-controls button {
    font-size: 16px;
    padding: 5px 8px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: auto;
}
.il-tts-controls button:hover {
    background: #5a6268;
}

.il-tts-speak-btn {
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 18px;
    background: none;
    border: none;
    cursor: pointer;
    color: #007bff;
    padding: 5px;
}
.il-quiz-question-block .il-tts-speak-btn {
    top: 0;
}
.il-tts-speak-btn:hover {
    color: #0056b3;
}