/* Main Wrapper */
.longiq-main-wrapper {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 25px;
}

.longiq-container {
    font-size: 1.1em;
    line-height: 1.8;
    position: relative;
}

/* MODIFIED: Animation now includes a red color pulse for the text */
@keyframes pulse-background {
    0% {
        background-color: #e9ecef;
        border-bottom-color: #ced4da;
        color: #212529; /* Default text color */
    }
    50% {
        background-color: #cfe2ff; /* Light, catchy blue */
        border-bottom-color: #a1c4e4;   /* A matching blue for the border */
        color: #dc3545; /* A vibrant red for the '...' text */
    }
    100% {
        background-color: #e9ecef;
        border-bottom-color: #ced4da;
        color: #212529; /* Back to default text color */
    }
}

/* Start Screen Styles */
.longiq-start-screen {
    text-align: center;
}
.longiq-legend {
    list-style: none; padding: 0; margin: 20px auto; max-width: 450px; text-align: left;
}
.longiq-legend li {
    margin-bottom: 12px; display: flex; align-items: center;
}
.legend-item {
    display: inline-block; padding: 2px 8px; border-radius: 4px; margin-right: 10px;
    font-weight: bold; min-width: 100px; text-align: center; line-height: 1.5;
}
.legend-blank { background-color: #e9ecef; }
.legend-quiz, .longiq-tappable.tappable-quiz {
    background-color: #e6e6fa; color: #4B0082; border: 1px solid #c3bbf7; border-radius: 4px;
}
.legend-info, .longiq-tappable.tappable-info {
    background-color: #e0ffe0; color: #006400; border: 1px solid #b3ffb3; border-radius: 20px;
}
.longiq-start-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;
    border: none; border-radius: 5px; padding: 12px 25px; font-size: 1.1em;
    cursor: pointer; transition: transform 0.2s ease;
}
.longiq-start-button:hover { transform: scale(1.05); }


/* Top Scoreboard */
.longiq-stats-box {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 8px 15px;
    display: flex;
    justify-content: space-around;
    margin: -25px -25px 20px -25px;
    border-radius: 8px 8px 0 0;
}
.longiq-stats-box div {
    text-align: center; color: #777; font-size: 0.8em;
}
.longiq-stats-box .stat-value {
    display: block; font-size: 1.8em; font-weight: bold; line-height: 1.2;
}
.stat-attempts .stat-value { color: #007bff; }
.stat-correct .stat-value { color: #28a745; }
.stat-wrong .stat-value { color: #dc3545; }


/* Shake Animation for Wrong Answers */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.shake-error {
  animation: shake 0.5s;
}


/* Base style for interactive elements */
.longiq-blank, .longiq-tappable {
    padding: 2px 8px; cursor: pointer; transition: all 0.2s ease-in-out; font-weight: bold;
}
.longiq-blank {
    background-color: #e9ecef; border-bottom: 2px solid #ced4da; border-radius: 4px;
}
.longiq-blank:not(.correct) {
    animation: pulse-background 2s infinite ease-in-out;
}

.longiq-blank:hover, .longiq-tappable:hover {
    background-color: #d0d6dc; transform: translateY(-1px);
}
.longiq-blank.correct, .longiq-tappable.correct {
    background-color: #d4edda; color: #155724; border-color: #28a745; cursor: default;
    animation: none;
}
.longiq-tappable.incorrect {
    background-color: #f8d7da; color: #721c24; border-color: #dc3545; cursor: default;
}

.longiq-correct-answer { color: #155724; font-weight: bold; margin-left: 5px; }
.longiq-wrong-answer-hint { color: #721c24; text-decoration: line-through; margin-left: 5px; font-weight: normal; }

.longiq-tts-hint {
    background: #007bff; color: white; border: none; border-radius: 50%; width: 28px;
    height: 28px; cursor: pointer; margin: 0 5px; vertical-align: middle;
    display: inline-flex; align-items: center; justify-content: center;
}
.longiq-tts-hint i { font-size: 14px; line-height: 1; }

/* Popup Overlay */
.longiq-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center;
    align-items: center; z-index: 10000;
}
.longiq-popup {
    background: white; border-radius: 10px; padding: 25px;
    width: 90%; max-width: 450px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.longiq-popup-options-list { list-style: none; padding: 0; margin: 0; }
.longiq-popup-option {
    padding: 15px; margin-bottom: 10px; background: #f8f9fa; border-radius: 6px;
    cursor: pointer; border-left: 4px solid transparent; transition: all 0.2s ease;
}
.longiq-popup-option:hover { background: #e9ecef; border-left-color: #007bff; }

/* --- Completion Message Styles --- */
.longiq-completion-box {
    display: none;
    margin-top: 25px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid;
}
.longiq-completion-box h3 {
    margin-top: 0;
    font-size: 1.4em;
}
.longiq-completion-box.excellent {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}
.longiq-completion-box.good {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}
.longiq-completion-box.needs-improvement {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}
.longiq-retry-button {
    margin-top: 15px;
    background: #5a6268;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}
.longiq-retry-button:hover {
    background: #4a4f54;
}

/* --- Style for the final correct answers --- */
.longiq-final-answer {
    font-weight: bold;
    background-color: #d4edda;
    color: #155724;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c3e6cb;
}
/* msofrontcss
/*
 * == MahaSeo Frontend Styles ==
 */

/* --- Highlighted Term Styling --- */
.mahaseo-term {
    color: #b8860b; /* Dark Golden Rod color */
    cursor: pointer;
    text-decoration: none;
    background-image: linear-gradient(90deg, #ff8a00, #e52e71, #2980b9);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: all 0.3s ease-in-out;
    padding-bottom: 2px;
}

.mahaseo-term:hover {
    color: #000000;
    background-size: 100% 100%;
    background-position: 0 0;
    color: white;
}


/* --- Popup Modal Styling --- */
.mahaseo-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mahaseo-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px); /* Modern blur effect */
}

.mahaseo-popup-content {
    position: relative;
    background: #fff;
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    max-height: 85vh;
    overflow: hidden;
    border-top: 5px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
    
    /* Animation */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Style for when the popup becomes visible */
.mahaseo-popup:not([style*="display: none"]) .mahaseo-popup-content {
    opacity: 1;
    transform: scale(1);
}

.mahaseo-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    line-height: 1;
    border: none;
    background: #f0f0f0;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #666;
    transition: all 0.2s ease;
}

.mahaseo-popup-close:hover {
    color: #000;
    background-color: #e0e0e0;
    transform: rotate(90deg);
}

#mahaseo-popup-body {
    padding: 25px 30px;
    overflow-y: auto;
    max-height: calc(85vh - 5px); /* Adjust for border */
}

#mahaseo-popup-body h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.6em;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

#mahaseo-popup-body dl {
    margin: 0;
}

#mahaseo-popup-body dt {
    font-weight: bold;
    color: #4a4a7f; /* A deep purple-blue */
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 12px;
}

#mahaseo-popup-body dd {
    margin-left: 0;
    padding-left: 12px;
    border-left: 3px solid #f0c4a3; /* Soft orange-gold */
    margin-bottom: 12px;
    margin-top: 4px;
    font-size: 1.1em;
    /* --- CHANGES HERE --- */
    font-weight: bold; /* Makes the text bold */
    color: #333;      /* Makes the color deeper */
}

/* mehruseo fronted css */
/* Breadcrumbs Styles */ 
.mehruseo-breadcrumbs { 
    overflow: hidden; 
    font-family: sans-serif; 
    margin-bottom: 1.5em; 
} 
.mehruseo-breadcrumbs ol { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-wrap: wrap; 
} 
.mehruseo-breadcrumbs li { 
    display: block; 
    position: relative; 
    margin-right: 15px; 
    background-color: #0073aa; 
    line-height: 28px; 
    padding: 0 10px 0 20px; 
} 
.mehruseo-breadcrumbs li a { 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    padding: 0; 
    background-color: transparent; 
} 
.mehruseo-breadcrumbs li a:hover { 
    background-color: #0085ba; 
} 
.mehruseo-breadcrumbs li::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: -14px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 14px 0 14px 14px; 
    border-color: transparent transparent transparent white; 
} 
.mehruseo-breadcrumbs li::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: -14px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 14px 0 14px 14px; 
    border-color: transparent transparent transparent #0073aa; 
} 
.mehruseo-breadcrumbs li a:hover::after { 
    border-left-color: #0085ba; 
} 
.mehruseo-breadcrumbs li:first-child { 
    padding-left: 15px; 
    border-radius: 4px 0 0 4px; 
} 
.mehruseo-breadcrumbs li:first-child::before { 
    display: none; 
} 
.mehruseo-breadcrumbs li:last-child { 
    background-color: #f5f5f5; 
    color: red; 
    font-weight: bold; 
    border-radius: 0 4px 4px 0; 
} 
.mehruseo-breadcrumbs li:last-child::after { 
    display: none; 
} 

/* Table of Contents Styles */ 
.mehruseo-toc { 
    background-color: #f9f9f9; 
    border: 1px solid #d9534f; 
    padding: 15px; 
    margin-bottom: 1.5em; 
    width: auto; 
    display: inline-block; 
    min-width: 250px; 
} 
.mehruseo-toc h3 { 
    background-color: #f2dede; 
    color: #a94442; 
    padding: 10px 15px; 
    margin: -15px -15px 10px -15px; 
    font-size: 1.1em; 
    font-weight: bold; 
} 
.mehruseo-toc ul { 
    margin: 0; 
    padding-left: 20px; 
} 
.mehruseo-toc ul ul { 
    margin-left: 15px; 
} 
.mehruseo-toc li { 
    margin-bottom: 0.5em; 
} 
.mehruseo-toc a { 
    color: #1e8a1e; 
    text-decoration: none; 
} 
.mehruseo-toc a:hover { 
    text-decoration: underline; 
}
/* mehruedustylecss */
/* General Quiz Container */
.mehruedu-quiz-container {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #28a745;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.reading-highlight {
    background-color: rgba(255, 230, 150, 0.6);
    border-radius: 3px;
    transition: background-color 0.2s ease-in-out;
}

/* --- Settings Icon and Panel --- */
.mehruedu-settings-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 110;
}

.mehruedu-settings-button {
    background: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1.2em;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mehruedu-settings-button:hover {
    background: #e0e0e0;
}

.mehruedu-settings-panel {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    width: 250px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    text-align: left;
}

.mehruedu-settings-panel .setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mehruedu-settings-panel .setting-row label {
    font-size: 0.95em;
    color: #333;
    margin-right: 10px;
}

.mehruedu-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.mehruedu-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mehruedu-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.mehruedu-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.mehruedu-slider {
    background-color: #28a745;
}

input:focus+.mehruedu-slider {
    box-shadow: 0 0 1px #28a745;
}

input:checked+.mehruedu-slider:before {
    transform: translateX(20px);
}

.slide-text-display br+br {
    display: none;
}

#mehruedu-speech-controls {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

#mehruedu-speech-rate {
    width: 100%;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Initial Quiz Info Styling */
.mehruedu-quiz-initial-info {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #e9f5fe;
    border: 1px solid #bde0fe;
    border-radius: 6px;
    text-align: center;
}

.mehruedu-quiz-initial-info p {
    margin: 5px 0;
    font-size: 1.1em;
    color: #0056b3;
    font-weight: 500;
}

.mehruedu-quiz-initial-info p span {
    font-weight: bold;
    color: #004085;
}

.mehruedu-slide-range-selector {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #bde0fe;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mehruedu-slide-range-selector label {
    font-size: 1em;
    color: #0056b3;
}

.mehruedu-slide-range-selector input[type="number"] {
    width: 60px;
    padding: 5px;
    text-align: center;
    border: 1px solid #bde0fe;
    border-radius: 4px;
    font-size: 1em;
}

/* Top Bar (Progress + Timer) */
.mehruedu-top-bar {
    display: none;
    align-items: center;
    padding: 5px 10px;
    background-color: #f1f1f1;
    border-radius: 6px;
    margin-bottom: 15px;
    min-height: 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 90;
}

.question-type-display {
    font-weight: bold;
    font-size: 0.9em;
    color: #555;
    margin-right: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.timer-display {
    font-size: 1em;
    font-weight: bold;
    color: #ff5722;
    white-space: nowrap;
}

.progress-bar {
    flex-grow: 1;
    height: 18px;
    background-color: #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    margin: 0 15px;
}

.progress-bar .progress {
    height: 100%;
    width: 0;
    background-color: #28a745;
    transition: width 0.4s ease, background-color 0.4s ease;
}

.qsh-in-brand {
    font-weight: bold;
    color: #555;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 15px;
}

.mehruedu-top-bar .mehruedu-settings-container {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    margin-left: 10px;
}

/* Quiz Questions */
.mehruedu-quiz-question {
    display: none;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: left;
}

.question-top-line {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #aa2394;
}

.question-description {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #666;
}

.mehruedu-quiz-question label {
    display: block;
    margin: 10px 0;
    cursor: pointer;
}

.mehruedu-quiz-question input[type="radio"] {
    margin-right: 10px;
    vertical-align: middle;
}

.mehruedu-quiz-question input.fill-blank {
    width: 100px;
    padding: 5px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Pair Matching */
.pair-matching-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.left-pairs,
.right-pairs {
    width: 48%;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 6px;
    min-height: 100px;
}

.pair-item {
    padding: 8px;
    background-color: #fff;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.pair-item.selected {
    background-color: #ffd700;
}

.pair-item.correct {
    color: white;
}

.pair-item.incorrect {
    background-color: #dc3545;
    color: white;
}

/* --- MODIFIED: Colorful Rearrange Items --- */
.re-disordered,
.re-order-target {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    min-height: 50px;
    border-radius: 6px;
}

.re-disordered {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

.re-order-target {
    margin-top: 15px;
    border: 2px dashed #007bff;
    background-color: #f8f9fa;
}

.re-item {
    padding: 8px 15px;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    display: inline-block;
    font-weight: 500;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.re-item:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
}

.re-item:nth-child(5n+1) {
    background-color: #1abc9c;
}

/* Turquoise */
.re-item:nth-child(5n+2) {
    background-color: #3498db;
}

/* Peter River Blue */
.re-item:nth-child(5n+3) {
    background-color: #9b59b6;
}

/* Amethyst */
.re-item:nth-child(5n+4) {
    background-color: #e67e22;
}

/* Carrot */
.re-item:nth-child(5n+5) {
    background-color: #e74c3c;
}

/* Alizarin */
.re-order-container p {
    margin-bottom: 5px;
    font-weight: bold;
    color: #495057;
}


/* MCQ Buttons */
/* General Quiz Container */
.mehruedu-quiz-container {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #28a745;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.reading-highlight {
    background-color: rgba(255, 230, 150, 0.6);
    border-radius: 3px;
    transition: background-color 0.2s ease-in-out;
}

/* --- Settings Icon and Panel --- */
.mehruedu-settings-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 110;
}

.mehruedu-settings-button {
    background: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1.2em;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mehruedu-settings-button:hover {
    background: #e0e0e0;
}

.mehruedu-settings-panel {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    width: 250px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    text-align: left;
}

.mehruedu-settings-panel .setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mehruedu-settings-panel .setting-row label {
    font-size: 0.95em;
    color: #333;
    margin-right: 10px;
}

.mehruedu-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.mehruedu-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mehruedu-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.mehruedu-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.mehruedu-slider {
    background-color: #28a745;
}

input:focus+.mehruedu-slider {
    box-shadow: 0 0 1px #28a745;
}

input:checked+.mehruedu-slider:before {
    transform: translateX(20px);
}

.slide-text-display br+br {
    display: none;
}

#mehruedu-speech-controls {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

#mehruedu-speech-rate {
    width: 100%;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Initial Quiz Info Styling */
.mehruedu-quiz-initial-info {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #e9f5fe;
    border: 1px solid #bde0fe;
    border-radius: 6px;
    text-align: center;
}

.mehruedu-quiz-initial-info p {
    margin: 5px 0;
    font-size: 1.1em;
    color: #0056b3;
    font-weight: 500;
}

.mehruedu-quiz-initial-info p span {
    font-weight: bold;
    color: #004085;
}

.mehruedu-slide-range-selector {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #bde0fe;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mehruedu-slide-range-selector label {
    font-size: 1em;
    color: #0056b3;
}

.mehruedu-slide-range-selector input[type="number"] {
    width: 60px;
    padding: 5px;
    text-align: center;
    border: 1px solid #bde0fe;
    border-radius: 4px;
    font-size: 1em;
}

/* Top Bar (Progress + Timer) */
.mehruedu-top-bar {
    display: none;
    align-items: center;
    padding: 5px 10px;
    background-color: #f1f1f1;
    border-radius: 6px;
    margin-bottom: 15px;
    min-height: 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 90;
}

.question-type-display {
    font-weight: bold;
    font-size: 0.9em;
    color: #555;
    margin-right: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.timer-display {
    font-size: 1em;
    font-weight: bold;
    color: #ff5722;
    white-space: nowrap;
}

.progress-bar {
    flex-grow: 1;
    height: 18px;
    background-color: #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    margin: 0 15px;
}

.progress-bar .progress {
    height: 100%;
    width: 0;
    background-color: #28a745;
    transition: width 0.4s ease, background-color 0.4s ease;
}

.qsh-in-brand {
    font-weight: bold;
    color: #555;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 15px;
}

.mehruedu-top-bar .mehruedu-settings-container {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    margin-left: 10px;
}

/* Quiz Questions */
.mehruedu-quiz-question {
    display: none;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: left;
}

.question-top-line {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #aa2394;
}

.question-description {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #666;
}

.mehruedu-quiz-question label {
    display: block;
    margin: 10px 0;
    cursor: pointer;
}

.mehruedu-quiz-question input[type="radio"] {
    margin-right: 10px;
    vertical-align: middle;
}

.mehruedu-quiz-question input.fill-blank {
    width: 100px;
    padding: 5px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Pair Matching */
.pair-matching-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.left-pairs,
.right-pairs {
    width: 48%;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 6px;
    min-height: 100px;
}

.pair-item {
    padding: 8px;
    background-color: #fff;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.pair-item.selected {
    background-color: #ffd700;
}

.pair-item.correct {
    color: white;
}

.pair-item.incorrect {
    background-color: #dc3545;
    color: white;
}

/* --- MODIFIED: Colorful Rearrange Items --- */
.re-disordered,
.re-order-target {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    min-height: 50px;
    border-radius: 6px;
}

.re-disordered {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

.re-order-target {
    margin-top: 15px;
    border: 2px dashed #007bff;
    background-color: #f8f9fa;
}

.re-item {
    padding: 8px 15px;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    display: inline-block;
    font-weight: 500;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.re-item:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
}

.re-item:nth-child(5n+1) {
    background-color: #1abc9c;
}

/* Turquoise */
.re-item:nth-child(5n+2) {
    background-color: #3498db;
}

/* Peter River Blue */
.re-item:nth-child(5n+3) {
    background-color: #9b59b6;
}

/* Amethyst */
.re-item:nth-child(5n+4) {
    background-color: #e67e22;
}

/* Carrot */
.re-item:nth-child(5n+5) {
    background-color: #e74c3c;
}

/* Alizarin */
.re-order-container p {
    margin-bottom: 5px;
    font-weight: bold;
    color: #495057;
}


/* MCQ Buttons */
.mehruedu-mcq-option {
    display: block;
    padding: 10px 20px;
    margin-bottom: 10px;
    background-color: #b1cfec;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    font-size: 1em;
    border: 1px solid #a1c4e4;
}

.mehruedu-mcq-option:hover {
    background-color: #cf7de7;
    color: #fff;
}

.mehruedu-mcq-option.selected {
    background-color: #e754cf;
    color: #fff;
    font-size: 1.1em;
    border-color: #c445b0;
}

.mehruedu-mcq-option input[type="radio"] {
    display: none;
}

/* Buttons */
.mehruedu-submit-quiz,
.mehruedu-understood-button {
    display: block;
    width: 100%;
    padding: 12px;
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s;
    margin-top: 20px;
}

.mehruedu-submit-quiz {
    background-color: #28a745;
}

.mehruedu-submit-quiz:hover {
    background-color: #218838;
}

.mehruedu-understood-button {
    background-color: #007bff;
    margin-bottom: 10px;
}

.mehruedu-understood-button:hover {
    background-color: #0056b3;
}

.mehruedu-play-again-button,
.mehruedu-see-slides-again-button {
    display: block;
    width: auto;
    min-width: 200px;
    margin: 25px auto 10px;
    padding: 12px 20px;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background-color: #17a2b8;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.mehruedu-play-again-button:hover,
.mehruedu-see-slides-again-button:hover {
    background-color: #138496;
    transform: translateY(-1px);
}

.mehruedu-submit-quiz[disabled] {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    border: 1px solid #ced4da;
}

.mehruedu-quiz-container.answered-incorrectly .mehruedu-understood-button {
    background-color: #dc3545;
}

.mehruedu-quiz-container.answered-incorrectly .mehruedu-understood-button:hover {
    background-color: #c82333;
}

/* Scorecard & Social Share */
.mehruedu-scorecard {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.scorecard-content h2 {
    text-align: center;
    color: #007bff;
    margin-bottom: 20px;
}

.scorecard-content p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #495057;
}

.question-answer-list {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.question-answer-list h3 {
    text-align: center;
    color: #28a745;
    margin-bottom: 20px;
}

.question-answer-list ul {
    list-style-type: none;
    padding-left: 0;
}

.question-answer-list li {
    background-color: #f8f9fa;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.social-share {
    margin-top: 30px;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.social-share p {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #343a40;
}

.social-share-btn {
    display: inline-flex;
    align-items: center;
    margin: 5px 8px;
    padding: 10px 18px;
    font-size: 0.95em;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.social-share-btn i {
    margin-right: 8px;
    font-size: 1.2em;
}

.social-share-btn[data-platform="facebook"] {
    background-color: #3b5998;
}

.social-share-btn[data-platform="whatsapp"] {
    background-color: #25D366;
}

.social-share-btn[data-platform="x"] {
    background-color: #000000;
}

.social-share-btn:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

.start-quiz {
    display: block;
    width: auto;
    min-width: 200px;
    margin: 20px auto;
    padding: 15px 25px;
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.start-quiz:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

/* Knowledge Slides */
.mehruedu-knowledge-slides-area {
    padding: 20px;
    border: 1px dashed #007bff;
    background-color: #f0f8ff;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 6px;
}

.slide-text-display {
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid #bde0fe;
    background: #e7f5ff;
    color: #004085;
    min-height: 80px;
    border-radius: 6px;
    font-size: 1.4em;
    text-align: left;
    white-space: pre-wrap;
    line-height: 1.5;
}

.mehruedu-clickable-word {
    color: #28a745;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.mehruedu-clickable-word:hover {
    color: #218838;
}

.slide-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.slide-controls button {
    margin: 0;
    font-size: 1.6em;
    font-weight: bold;
    cursor: pointer;
    border: none;
    color: white;
    transition: all 0.2s;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.slide-controls button:hover {
    transform: translateY(-2px);
}

.slide-controls button.text-button {
    width: auto;
    height: auto;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 500;
}

.mehruedu-replay-slide-button {
    background-color: #fd7e14;
}

.mehruedu-previous-slide-button {
    background-color: #6c757d;
}

.mehruedu-next-slide-button {
    background-color: #28a745;
}

.mehruedu-skip-slides-button {
    background-color: #ffc107;
    color: #212529;
}

.mehruedu-explain-button {
    background-color: #17a2b8;
}

/* Overlays & Animations */
.mehruedu-explanation-overlay,
.mehruedu-feedback-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 105;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.mehruedu-explanation-overlay {
    background: rgba(40, 167, 69, 0.95);
    border-bottom: 3px solid #1e7e34;
}

.mehruedu-explanation-content {
    font-size: 1.2em;
    line-height: 1.5;
    text-align: center;
    padding-right: 30px;
    white-space: pre-wrap;
}

.mehruedu-explanation-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2em;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.mehruedu-feedback-overlay {
    display: none;
}

.mehruedu-feedback-overlay.correct {
    background: rgba(40, 167, 69, 0.95);
    border-bottom: 3px solid #1e7e34;
}

.mehruedu-feedback-overlay.incorrect {
    background: rgba(220, 53, 69, 0.95);
    border-bottom: 3px solid #a71d2a;
}

.mehruedu-feedback-overlay-content {
    font-size: 1.2em;
    line-height: 1.5;
    margin-bottom: 15px;
}

.mehruedu-explanation-animation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 95;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.sound-wave {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100px;
    height: 60px;
}

.sound-wave .bar {
    width: 6px;
    height: 10px;
    border-radius: 3px;
    background-color: rgba(23, 162, 184, 0.35);
    animation: wave-animation 1.2s ease-in-out infinite;
}

.sound-wave .bar:nth-child(2) {
    animation-delay: 0.1s;
}

.sound-wave .bar:nth-child(3) {
    animation-delay: 0.2s;
}

.sound-wave .bar:nth-child(4) {
    animation-delay: 0.3s;
}

.sound-wave .bar:nth-child(5) {
    animation-delay: 0.4s;
}

.sound-wave .bar:nth-child(6) {
    animation-delay: 0.5s;
}

.sound-wave .bar:nth-child(7) {
    animation-delay: 0.6s;
}

.sound-wave .bar:nth-child(8) {
    animation-delay: 0.7s;
}

.sound-wave .bar:nth-child(9) {
    animation-delay: 0.8s;
}

.sound-wave .bar:nth-child(10) {
    animation-delay: 0.9s;
}

@keyframes wave-animation {
    0% {
        height: 10px;
    }

    50% {
        height: 50px;
    }

    100% {
        height: 10px;
    }
}

/* Leaderboard */
.mehruedu-leaderboard-container {
    max-width: 700px;
    margin: 40px auto 20px;
    padding: 20px;
    border: 1px solid #d1e7dd;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    overflow: hidden;
}

.mehruedu-leaderboard-container h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #0a58ca;
}

.mehruedu-leaderboard-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mehruedu-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

.mehruedu-leaderboard-table th,
.mehruedu-leaderboard-table td {
    padding: 12px 8px;
    border: none;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.mehruedu-leaderboard-table th {
    color: #fff;
    background: linear-gradient(to right, #28a745, #218838);
}

.mehruedu-leaderboard-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}

.mehruedu-leaderboard-table tbody tr:last-child {
    border-bottom: none;
}

.mehruedu-leaderboard-table tbody tr:hover {
    background-color: #f8f9fa;
}

.mehruedu-leaderboard-table tbody tr:first-child {
    background-color: #fffbe6;
    font-weight: bold;
    color: #664d03;
}

.mehruedu-leaderboard-table tbody tr:first-child td:first-child::before {
    content: '\f091';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #ffc107;
    margin-right: 8px;
}

.mehruedu-leaderboard-table td:first-child,
.mehruedu-leaderboard-table th:first-child {
    font-weight: bold;
    text-align: center;
    width: 65px;
}

.mehruedu-leaderboard-see-more {
    margin-top: 20px;
    padding: 8px 16px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
}

/* Rating System Styles */
.mehruedu-rating-section {
    max-width: 700px;
    margin: 25px auto;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    background: #f8f9fa;
}

.mehruedu-rating-section h4 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #444;
}

.mehruedu-rating-summary p {
    margin: 0 0 10px;
    color: #666;
    font-size: 0.85em;
}

.mehruedu-rating-input-area p {
    margin: 0 0 5px 0;
    font-size: 0.9em;
}

.mehruedu-star-rating {
    display: inline-block;
    direction: rtl;
}

.mehruedu-star-rating .star {
    font-size: 2.2em;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
}

.mehruedu-star-rating .star:hover,
.mehruedu-star-rating .star:hover~.star,
.mehruedu-star-rating .star.hover,
.mehruedu-star-rating .star.hover~.star {
    color: #ffc107;
}

.mehruedu-rating-thank-you {
    font-weight: bold;
    color: #28a745;
}

/* Read the Word Question Type Styles */
.read-word-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.read-word-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Word left, Mic right */
    padding: 15px 20px;
    /* More horizontal padding */
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.read-word-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.read-word-text {
    font-size: 1.3rem;
    /* Slightly larger text */
    font-weight: 600;
    color: #333;
    transition: filter 0.3s ease;
    flex-grow: 1;
    /* Allow text to take space */
}

.read-word-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.read-word-mic {
    background: none;
    border: 2px solid #007bff;
    color: #007bff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.read-word-mic:hover {
    background: #007bff;
    color: #fff;
}

.read-word-mic:disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: not-allowed;
    background: #f9f9f9;
}

/* Listening State */
.read-word-item.listening .read-word-mic {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
    animation: pulse-red 1.5s infinite;
}

/* Success State - Green Background, Checkmark */
.read-word-item.success {
    background-color: #d4edda;
    /* Light green background */
    border-color: #28a745;
    border-left: 5px solid #28a745;
}

.read-word-item.success .read-word-text {
    filter: none;
    /* No blur */
    opacity: 1;
    color: #155724;
}

/* Success Checkmark ICON beside word (using pseudo-element on the control div or separate icon) */
.read-word-item.success .read-word-text::after {
    content: '\f00c';
    /* Checkmark */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 10px;
    color: #28a745;
    font-size: 1.2rem;
}

.read-word-item.success .read-word-mic {
    display: none;
    /* Hide mic on success as per new requirement implied? Or just disable? */
    /* User said "tick mark green beside the word phrase". 
       If we put tick beside word, do we remove mic? 
       "instead of bruring the word". 
       Let's keep mic hidden or simpler. 
       Let's just hide the mic button and show tick beside word. */
}

/* Fail State (After 3 attempts) */
.read-word-item.fail {
    background-color: #f8d7da;
    /* Light red */
    border-color: #dc3545;
    border-left: 5px solid #dc3545;
}

.read-word-item.fail .read-word-text {
    filter: blur(1px);
    /* Slight blur for fail */
    opacity: 0.8;
    text-decoration: line-through;
    color: #721c24;
}

.read-word-item.fail .read-word-mic {
    border-color: #dc3545;
    color: #dc3545;
    pointer-events: none;
    opacity: 0.5;
}

.read-word-item.fail .read-word-mic::after {
    content: '\f00d';
    /* Cross */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.read-word-item.fail .read-word-mic i {
    display: none;
}

/* Hide attempts text usually, but keep logic in JS */
.attempts-count {
    display: none;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.mehruedu-review-next-btn {
    margin-top: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    display: none;
    /* Hidden by default */
}

.mehruedu-review-next-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.mehruedu-ignore-button {
    display: none;
    width: 100%;
    margin-top: 10px;
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s;
}

.mehruedu-ignore-button:hover {
    background-color: #5a6268;
}

/* True/False Question Styling */
.mehruedu-quiz-question[data-question-type="true_false"] {
    text-align: center;
    /* Center the buttons */
}

.mehruedu-quiz-question[data-question-type="true_false"] label {
    display: inline-block;
    width: 45%;
    max-width: 200px;
    padding: 15px 10px;
    margin: 10px 5px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.mehruedu-quiz-question[data-question-type="true_false"] label:hover {
    background-color: #f8f9fa;
    border-color: #b0b0b0;
    transform: translateY(-1px);
}

.mehruedu-quiz-question[data-question-type="true_false"] label.selected {
    background-color: #e6f7ff;
    border-color: #1890ff;
    color: #1890ff;
    box-shadow: 0 4px 8px rgba(24, 144, 255, 0.2);
}

/* Hide the actual radio button */
.mehruedu-quiz-question[data-question-type="true_false"] label input[type="radio"] {
    display: none;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .mehruedu-quiz-question[data-question-type="true_false"] label {
        width: 100%;
        display: block;
        margin: 10px 0;
    }
}
/* Sidebar General Styling */
.mehrulms-sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: #fcfcfc;
    overflow-y: auto;
    overflow-x: hidden;
    transition: 0.4s;
    box-shadow: 2px 0 15px rgba(0,0,0,0.1);
    padding-top: 60px;
    border-right: 1px solid #e0e0e0;
}

.mehrulms-sidebar.open {
    width: 320px;
}

.mehrulms-sidebar-content {
    padding: 20px;
}

/* --- HIERARCHY STYLING FOR ALL LISTS --- */

/* General list styling */
.mehrulms-sidebar ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.mehrulms-sidebar li a {
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Pushes tick to the right */
    align-items: center;
    padding: 8px 15px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 4px;
    margin: 2px 0;
    font-size: 14px;
    border-left: 3px solid transparent;
}

.mehrulms-sidebar li a:hover {
    background-color: #f0f0f0;
}

/* General "Current Item" highlighting - This overrides all other colors */
.mehrulms-sidebar li.current-item > a {
    background-color: #e1f0fa;
    color: #005a87 !important; /* Use !important to ensure override */
    font-weight: 700;
    border-left-color: #0073aa;
}

/* --- SPECIFIC HIERARCHY STYLES WITH COLOR (UPDATED COLORS) --- */

/* 1. Current Lesson Outline (Nested Tree) */
.mehrulms-lesson-tree {
    padding-left: 5px;
}
.mehrulms-lesson > a {
    font-size: 1.05em;
    font-weight: 600;
    color: #1D2327; /* Darkest (almost black) for top level */
}
.mehrulms-sublesson {
    padding-left: 15px;
}
.mehrulms-sublesson > a {
    font-size: 1em;
    color: #005a87; /* UPDATED: Darker WordPress Blue */
}
.mehrulms-microlesson {
    padding-left: 30px;
}
.mehrulms-microlesson > a {
    font-size: 0.95em;
    color: #702963; /* UPDATED: Deeper Purple */
}
.mehrulms-nanolesson {
    padding-left: 45px;
}
.mehrulms-nanolesson > a {
    font-size: 0.9em;
    color: #50575e; /* UPDATED: Darker Gray */
}


/* 2. Flat lists (All Lessons, All Subjects) */
.mehrulms-context-block {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.mehrulms-context-block .section-title {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #1d2327;
}

/* 3. Available Courses Section */
.mehrulms-available-courses {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #e02020;
}
.mehrulms-available-courses .section-title {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #1d2327;
}

/* --- HEADER AND CONTROLS --- */

/* Current Course Header */
.mehrulms-current-course {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
}
.mehrulms-current-course h4 {
    margin: 0;
    font-size: 1.2em;
}
.mehrulms-current-course h4 a {
    text-decoration: none;
    color: #1d2327;
    font-weight: 700;
}

/* Menu Toggle and Close Buttons */
.mehrulms-menu-toggle {
    font-size: 24px;
    cursor: pointer;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 10000;
    background: #fff;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 1px solid #eee;
}

.mehrulms-close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 36px;
    cursor: pointer;
    color: #777;
    text-decoration: none;
    line-height: 1;
}
.mehrulms-close-btn:hover {
    color: #1d2327;
}

/* --- PROGRESS TRACKING STYLES --- */

.mehrulms-completed-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #34C759;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    margin-left: 10px;
    flex-shrink: 0;
}

li.status-completed > a {
    color: #6c757d; /* UPDATED: Slightly darker gray for completed items */
}

/* --- Shortcode Specific Styles for Ticks --- */
.mehrulms-course-content li a, 
.mehrulms-subject-content li a {
    display: inline-flex;
    align-items: center;
}
.mehrulms-course-content .mehrulms-completed-tick,
.mehrulms-subject-content .mehrulms-completed-tick {
    width: 18px;
    height: 18px;
    font-size: 12px;
    margin-left: 8px;
}


/* Mobile responsive */
@media (max-width: 768px) {
    .mehrulms-sidebar.open {
        width: 90%;
        max-width: 340px;
    }
}
.slide-text-display{white-space:normal!important}.slide-text-display p{margin:0!important;padding:0!important}