/* 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}

/* Ureka Chat Container - Kid Friendly Theme */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

#ureka-chat-wrapper {
    width: 100%;
    margin: 20px 0;
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    /* Friendly rounded font */
    background: #ffffff;
    border-radius: 20px;
    /* Softer corners */
    box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    position: relative;
    border: 4px solid #fff;
    /* White border for emphasis */
}

/* Tabs Header */
.uc-tabs {
    display: flex;
    background: #fdfdfd;
    padding: 10px 10px 0 10px;
    /* Reduced padding */
    border-bottom: none;
    background: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}

.uc-tab {
    flex: 1;
    text-align: center;
    padding: 12px 5px;
    /* Compact padding */
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    font-weight: 700;
    color: #fff;
    transition: all 0.3s ease;
    font-size: 13px;
    /* Smaller font */
    margin: 0 3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
}

.uc-tab:hover {
    background: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.uc-tab.active {
    background: #fff;
    color: #2b6cb0;
    /* Deep Blue */
    box-shadow: 0 -4px 15px rgba(66, 153, 225, 0.4);
    /* Glowing effect */
    transform: translateY(0);
    position: relative;
    z-index: 1;
}

/* Add a glowing bottom border indicator */
.uc-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 0 10px #00f2fe;
}

/* Tab Content Pane */
.uc-content {
    background: #fff;
    min-height: 400px;
    background-image: radial-gradient(#e6e9f0 1px, transparent 1px);
    background-size: 20px 20px;
    /* Subtle grid pattern */
}

.uc-tab-pane {
    display: none;
    padding: 30px;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.uc-tab-pane.active {
    display: block;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Inputs & Textareas */
#uc-word-input,
#uc-gk-input,
.uc-input-group math-field {
    width: 100%;
    padding: 15px;
    border: 3px solid #e0e7ff;
    border-radius: 15px;
    margin-bottom: 20px;
    font-size: 17px;
    transition: all 0.3s;
    box-sizing: border-box;
    font-family: inherit;
    background: #fbfdff;
    color: #333;
}

#uc-word-input:focus,
#uc-gk-input:focus,
.uc-input-group math-field:focus-within {
    border-color: #ff9a9e;
    /* Playful Pink/Orange focus */
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 154, 158, 0.2);
    transform: scale(1.01);
}

/* Math Toolbar */
.uc-toolbar {
    margin-bottom: 12px;
    background: #f1f5f9;
    padding: 5px;
    /* Minimal padding when closed */
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.uc-toolbar-toggle {
    width: 100%;
    background: transparent;
    border: none;
    color: #4a5568;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 5px;
    text-align: center;
    border-radius: 6px;
}

.uc-toolbar-toggle:hover {
    background: #e2e8f0;
    color: #2d3748;
}

.uc-toolbar-content {
    display: flex;
    /* Hidden by default via inline style, but this is for when open */
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 8px;
    /* Space between toggle and buttons */
    margin-top: 5px;
    border-top: 1px solid #e2e8f0;
}

/* Ensure hidden state overrides display flex when toggled off via JS */
.uc-toolbar-content[style*="display: none"] {
    display: none !important;
}

.uc-sym-btn {
    padding: 5px 8px;
    /* Even smaller button */
    font-size: 13px;
    /* Smaller font */
    background: #fff;
    border: 1px solid #cbd5e0;
    /* Thinner border */
    border-radius: 6px;
    /* Slightly tighter radius */
    cursor: pointer;
    transition: all 0.2s;
    color: #2d3748;
    /* Darker text */
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    margin-bottom: 2px;
    flex-grow: 1;
    /* Allow buttons to grow to fill space */
    min-width: 30px;
    /* Minimum width for touch targets */
    text-align: center;
}

/* Specific styling for the fraction button to match sym-btn */
.uc-fraction-btn {
    padding: 5px 8px;
    font-size: 13px;
    background: #4a5568;
    /* Distinct dark color */
    color: #fff;
    border: 1px solid #2d3748;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    margin-bottom: 2px;
    flex-grow: 1;
    min-width: 40px;
}

.uc-fraction-btn:hover {
    background: #2d3748;
}

.uc-sym-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.uc-sym-btn:hover {
    border-color: #66a6ff;
    color: #0056b3;
    background: #f0f7ff;
}

/* Primary Buttons */
.uc-solve-btn,
.uc-send-btn {
    background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);
    /* Adjusted gradient angle */
    color: white;
    border: none;
    padding: 12px 25px;
    /* Slightly smaller */
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    /* Slightly smaller */
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(255, 94, 98, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.uc-solve-btn:hover,
.uc-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 94, 98, 0.4);
}

.uc-solve-btn:active,
.uc-send-btn:active {
    transform: translateY(1px);
}

/* Chat Interface */
.uc-chat-box {
    height: 400px;
    overflow-y: auto;
    border: 2px solid #e2e8f0;
    /* Thinner border */
    padding: 20px;
    margin-bottom: 20px;
    background: #f8fafc;
    /* Cleaner background */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.uc-message {
    padding: 12px 18px;
    margin-bottom: 12px;
    border-radius: 12px;
    max-width: 85%;
    /* Slightly wider */
    line-height: 1.5;
    position: relative;
    font-size: 15px;
    /* Comfortable reading size */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    /* Sharper text */
    -moz-osx-font-smoothing: grayscale;
}

.uc-ai-message {
    background: #ffffff;
    color: #1a202c;
    /* Deep black/gray for high contrast */
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    border-left: 4px solid #3182ce;
    /* Solid blue accent */
    border: 1px solid #edf2f7;
    /* Subtle border definition */
}

.uc-user-message {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    /* Pure white */
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    /* Subtle text shadow for white text */
}

/* Chat Controls */
.uc-chat-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.uc-chat-controls select {
    padding: 10px 35px 10px 15px;
    border-radius: 20px;
    border: 1px solid #cbd5e0;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #2d3748;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.uc-chat-controls select:hover {
    border-color: #3182ce;
}

/* Result Areas */
#uc-math-result {
    margin-top: 25px;
    padding: 25px;
    background: #e0ffd4;
    /* Light Green */
    border: 3px dashed #76db91;
    border-radius: 15px;
    color: #00600f;
    position: relative;
}

#uc-math-result:before {
    content: "✨ Success!";
    position: absolute;
    top: -15px;
    left: 20px;
    background: #76db91;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
}

#uc-math-result h3 {
    margin-top: 10px;
    color: #00600f;
}

.uc-step-item {
    margin-bottom: 15px;
    padding: 15px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #ff9a9e;
    /* Pink accent */
}

/* Floating Button */
#uc-floating-ask-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(45deg, #ff0844 0%, #ffb199 100%);
    color: white;
    width: 50px;
    /* Smaller */
    height: 50px;
    /* Smaller */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(255, 8, 68, 0.3);
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    /* Smaller font */
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 3px solid rgba(255, 255, 255, 0.8);
    /* Semi-transparent border */
    animation: pulse 3s infinite;
    opacity: 0.8;
    /* Transparent */
}

#uc-floating-ask-btn:hover {
    transform: scale(1.1) rotate(5deg);
    opacity: 1;
    /* Full visibility on hover */
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 8, 68, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 8, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 8, 68, 0);
    }
}

/* Suggestion Chips */
.uc-suggestions-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 15px;
    background: #fffff0;
    /* Very light yellow-white */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #fcfcda;
    align-self: flex-start;
    max-width: 80%;
    margin-left: 20px;
    /* Align with AI message */
}

.uc-suggestion-chip {
    background: transparent;
    border: none;
    color: #3182ce;
    /* Blue text */
    text-align: left;
    padding: 2px 0;
    cursor: pointer;
    text-decoration: underline;
    /* Looks like a link */
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    transition: color 0.2s;
}

.uc-suggestion-chip::before {
    content: '•';
    color: #3182ce;
    margin-right: 10px;
    font-size: 18px;
    line-height: 1;
}

.uc-suggestion-chip:hover {
    color: #2c5282;
    /* Darker blue on hover */
    text-decoration: none;
    background: transparent !important;
}

/* Responsiveness */
@media (max-width: 600px) {
    #ureka-chat-wrapper {
        margin: 10px;
        border-width: 2px;
        border-radius: 15px;
    }

    .uc-tabs {
        flex-direction: row;
        padding: 5px;
    }

    .uc-tab {
        font-size: 14px;
        padding: 10px 5px;
        border-radius: 10px;
    }
}

/* Fraction Modal */
.uc-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(2px);
}

.uc-modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    width: 300px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.uc-modal-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #2d3748;
}

.uc-fraction-input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
    border: 2px dashed #cbd5e0;
}

#uc-frac-num,
#uc-frac-den {
    width: 80%;
    text-align: center;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
}

#uc-frac-num:focus,
#uc-frac-den:focus {
    border-color: #3182ce;
    outline: none;
}

.uc-frac-line {
    width: 80%;
    height: 3px;
    background: #2d3748;
    border-radius: 2px;
}

.uc-modal-actions {
    display: flex;
    justify-content: space-around;
    gap: 10px;
}

#uc-insert-frac-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    flex: 1;
}

#uc-close-frac-btn {
    background: #edf2f7;
    color: #4a5568;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    flex: 1;
}
/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://qsh.in/boards/wbbse/
 Description:  A child theme for GeneratePress with PWA install prompt and performance styling.
 Author:       Mehrunnisa
 Author URI:   https://qsh.in
 Template:     generatepress
 Version:      1.3.0
*/

/* --- 1. PWA INSTALL BANNER (CLS OPTIMIZED) --- */
#pwa-install-banner {
    background-color: #e3f2fd;
    color: #1e3a56;
    padding: 16px 24px;
    margin: 20px auto;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    /* CLS Fix: Hide visually but reserve space, controlled by JS */
    display: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease;
}

#pwa-install-banner.is-visible {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

#pwa-install-banner p {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
}

#pwa-install-button {
    background: linear-gradient(45deg, #2196F3, #1976D2);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

#pwa-install-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* --- 2. NEW High-Readability Main Navigation --- */
.main-navigation {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.main-navigation .main-nav ul li a {
    color: #333745;
    font-weight: 600;
    padding: 20px;
    transition: all 0.25s ease-in-out;
    border-bottom: 3px solid transparent;
}

.main-navigation .main-nav ul li:not(.current-menu-item) a:hover {
    color: #4A90E2;
    background-color: #f7f9fb;
}

.main-navigation .main-nav ul li.current-menu-item>a {
    color: #4A90E2;
    font-weight: 700;
    border-bottom-color: #4A90E2;
    background-color: transparent;
}

/* --- 3. TYPOGRAPHY (PERFORMANCE OPTIMIZED) --- */
.entry-title {
    font-size: 26px;
    font-weight: 700;
    color: #1e3a56;
    padding-bottom: 15px;
    border-bottom: 4px solid #4A90E2;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .entry-title {
        font-size: 21px;
    }
}

.archive .entry-title a,
.blog .entry-title a {
    font-size: 22px;
    color: #1e3a56;
    text-decoration: none;
    transition: color 0.3s ease;
}

.archive .entry-title a:hover,
.blog .entry-title a:hover {
    color: #4A90E2;
}

/* --- 4. BUTTONS & POST NAVIGATION (NEW STYLE) --- */
.read-more-button a.button,
a.read-more {
    background: linear-gradient(45deg, #4A90E2, #1976D2);
    color: #ffffff !important;
    border-radius: 25px;
    padding: 10px 25px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.read-more-button a.button:hover,
a.read-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    min-width: 0;
}

.post-navigation .nav-next {
    text-align: right;
}

.post-navigation a {
    color: #4A90E2 !important;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
    padding: 10px 0;
    background: none !important;
    border: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-navigation a:hover {
    color: #1e3a56 !important;
    text-shadow: 0 0 8px rgba(74, 144, 226, 0.6);
}

/* --- 5. TOP BAR ACTION BUTTONS --- */
#gp-top-bar {
    background-color: #f8f9fa;
    /* Light clean background */
    border-bottom: 1px solid #eaeaea;
    padding: 10px 0;
    width: 100%;
    z-index: 99;
    /* Ensure it stays on top */
}

#gp-top-bar .gp-top-bar-inner {
    max-width: 1200px;
    /* Matches GeneratePress default container */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end !important;
    /* Right align forced to avoid menu overlap */
    align-items: center;
    gap: 15px;
}

.gp-top-btn {
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 50px;
    /* Pill shape */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

/* Primary Actions (Courses, Performance) */
.gp-btn-courses,
.gp-btn-perf {
    background: linear-gradient(135deg, #4A90E2 0%, #0077b6 100%);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
}

.gp-btn-courses:hover,
.gp-btn-perf:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    color: #fff !important;
}

/* Secondary Actions (Login / Logout) */
.gp-btn-login,
.gp-btn-logout {
    background-color: #ffffff;
    color: #333 !important;
    border: 1px solid #ddd;
}

.gp-btn-login:hover,
.gp-btn-logout:hover {
    background-color: #f1f1f1;
    border-color: #ccc;
    color: #000 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #gp-top-bar .gp-top-bar-inner {
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: 5px;
    }

    #gp-top-bar {
        padding: 12px 0;
    }

    .gp-top-btn {
        font-size: 13px;
        padding: 6px 14px;
        margin-bottom: 5px;
        /* Spacing for wrap */
    }
}
blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0;border:0}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}progress{vertical-align:baseline}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}body,button,input,select,textarea{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;text-transform:none;font-size:17px;line-height:1.5}p{margin-bottom:1.5em}h1,h2,h3,h4,h5,h6{font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit}pre{background:rgba(0,0,0,.05);font-family:inherit;font-size:inherit;line-height:normal;margin-bottom:1.5em;padding:20px;overflow:auto;max-width:100%}blockquote{border-left:5px solid rgba(0,0,0,.05);padding:20px;font-size:1.2em;font-style:italic;margin:0 0 1.5em;position:relative}blockquote p:last-child{margin:0}table,td,th{border:1px solid rgba(0,0,0,.1)}table{border-collapse:separate;border-spacing:0;border-width:1px 0 0 1px;margin:0 0 1.5em;width:100%}td,th{padding:8px}th{border-width:0 1px 1px 0}td{border-width:0 1px 1px 0}hr{background-color:rgba(0,0,0,.1);border:0;height:1px;margin-bottom:40px;margin-top:40px}fieldset{padding:0;border:0;min-width:inherit}fieldset legend{padding:0;margin-bottom:1.5em}h1{font-size:42px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h2{font-size:35px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h3{font-size:29px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h4{font-size:24px}h5{font-size:20px}h4,h5,h6{margin-bottom:20px}ol,ul{margin:0 0 1.5em 3em}ul{list-style:disc}ol{list-style:decimal}li>ol,li>ul{margin-bottom:0;margin-left:1.5em}dt{font-weight:700}dd{margin:0 1.5em 1.5em}b,strong{font-weight:700}cite,dfn,em,i{font-style:italic}address{margin:0 0 1.5em}code,kbd,tt,var{font:15px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{text-decoration:none}sub,sup{font-size:75%;height:0;line-height:0;position:relative;vertical-align:baseline}sup{bottom:1ex}sub{top:.5ex}small{font-size:75%}big{font-size:125%}figure{margin:0}table{margin:0 0 1.5em;width:100%}th{font-weight:700}img{height:auto;max-width:100%}button,input[type=button],input[type=reset],input[type=submit]{background:#55555e;color:#fff;border:1px solid transparent;cursor:pointer;-webkit-appearance:button;padding:10px 20px}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{border:1px solid;border-radius:0;padding:10px 15px;max-width:100%}textarea{width:100%}a,button,input{transition:color .1s ease-in-out,background-color .1s ease-in-out}a{text-decoration:none}.button,.wp-block-button .wp-block-button__link{padding:10px 20px;display:inline-block}.wp-block-button .wp-block-button__link{font-size:inherit;line-height:inherit}.using-mouse :focus{outline:0}.using-mouse ::-moz-focus-inner{border:0}.alignleft{float:left;margin-right:1.5em}.alignright{float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin:0 auto}.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail{max-width:100%;height:auto}.no-sidebar .entry-content .alignfull{margin-left:calc(-100vw / 2 + 100% / 2);margin-right:calc(-100vw / 2 + 100% / 2);max-width:100vw;width:auto}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}#primary[tabindex="-1"]:focus{outline:0}.main-navigation{z-index:100;padding:0;clear:both;display:block}.main-navigation a{display:block;text-decoration:none;font-weight:400;text-transform:none;font-size:15px}.main-navigation ul{list-style:none;margin:0;padding-left:0}.main-navigation .main-nav ul li a{padding-left:20px;padding-right:20px;line-height:60px}.inside-navigation{position:relative}.main-navigation .inside-navigation{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}.main-navigation .main-nav>ul{display:flex;flex-wrap:wrap;align-items:center}.main-navigation li{position:relative}.main-navigation .menu-bar-items{display:flex;align-items:center;font-size:15px}.main-navigation .menu-bar-items a{color:inherit}.main-navigation .menu-bar-item{position:relative}.main-navigation .menu-bar-item.search-item{z-index:20}.main-navigation .menu-bar-item>a{padding-left:20px;padding-right:20px;line-height:60px}.sidebar .main-navigation .main-nav{flex-basis:100%}.sidebar .main-navigation .main-nav>ul{flex-direction:column}.sidebar .main-navigation .menu-bar-items{margin:0 auto}.sidebar .main-navigation .menu-bar-items .search-item{order:10}.nav-align-center .inside-navigation{justify-content:center}.nav-align-center .main-nav>ul{justify-content:center}.nav-align-right .inside-navigation{justify-content:flex-end}.main-navigation ul ul{display:block;box-shadow:1px 1px 0 rgba(0,0,0,.1);float:left;position:absolute;left:-99999px;opacity:0;z-index:99999;width:200px;text-align:left;top:auto;transition:opacity 80ms linear;transition-delay:0s;pointer-events:none;height:0;overflow:hidden}.main-navigation ul ul a{display:block}.main-navigation ul ul li{width:100%}.main-navigation .main-nav ul ul li a{line-height:normal;padding:10px 20px;font-size:14px}.main-navigation .main-nav ul li.menu-item-has-children>a{padding-right:0;position:relative}.main-navigation.sub-menu-left ul ul{box-shadow:-1px 1px 0 rgba(0,0,0,.1)}.main-navigation.sub-menu-left .sub-menu{right:0}.main-navigation:not(.toggled) ul li.sfHover>ul,.main-navigation:not(.toggled) ul li:hover>ul{left:auto;opacity:1;transition-delay:150ms;pointer-events:auto;height:auto;overflow:visible}.main-navigation:not(.toggled) ul ul li.sfHover>ul,.main-navigation:not(.toggled) ul ul li:hover>ul{left:100%;top:0}.main-navigation.sub-menu-left:not(.toggled) ul ul li.sfHover>ul,.main-navigation.sub-menu-left:not(.toggled) ul ul li:hover>ul{right:100%;left:auto}.nav-float-right .main-navigation ul ul ul{top:0}.menu-item-has-children .dropdown-menu-toggle{display:inline-block;height:100%;clear:both;padding-right:20px;padding-left:10px}.menu-item-has-children ul .dropdown-menu-toggle{padding-top:10px;padding-bottom:10px;margin-top:-10px}.sidebar .menu-item-has-children .dropdown-menu-toggle,nav ul ul .menu-item-has-children .dropdown-menu-toggle{float:right}.widget-area .main-navigation li{float:none;display:block;width:100%;padding:0;margin:0}.sidebar .main-navigation.sub-menu-right ul li.sfHover ul,.sidebar .main-navigation.sub-menu-right ul li:hover ul{top:0;left:100%}.sidebar .main-navigation.sub-menu-left ul li.sfHover ul,.sidebar .main-navigation.sub-menu-left ul li:hover ul{top:0;right:100%}.site-main .comment-navigation,.site-main .post-navigation,.site-main .posts-navigation{margin:0 0 2em;overflow:hidden}.site-main .post-navigation{margin-bottom:0}.paging-navigation .nav-next,.paging-navigation .nav-previous{display:none}.paging-navigation .nav-links>*{padding:0 5px}.paging-navigation .nav-links .current{font-weight:700}.nav-links>:first-child{padding-left:0}.site-header{position:relative}.inside-header{padding:20px 40px}.main-title{margin:0;font-size:25px;line-height:1.2em;word-wrap:break-word;font-weight:700;text-transform:none}.site-description{margin:0;line-height:1.5;font-weight:400;text-transform:none;font-size:15px}.site-logo{display:inline-block;max-width:100%}.site-header .header-image{vertical-align:middle}.inside-header{display:flex;align-items:center}.header-widget{margin-left:auto}.header-widget p:last-child{margin-bottom:0}.nav-float-right .header-widget{margin-left:20px}.nav-float-right #site-navigation{margin-left:auto}.nav-float-left #site-navigation{margin-right:auto;order:-10}.nav-float-left .header-widget{margin-left:0;margin-right:20px;order:-15}.header-aligned-center:not([class*=nav-float-]) .inside-header{justify-content:center;flex-direction:column;text-align:center}.header-aligned-center:not([class*=nav-float-]) .header-widget{margin-left:auto;margin-right:auto}.header-aligned-center:not([class*=nav-float-]) .inside-header>:not(:first-child){margin-top:1em}.header-aligned-right:not([class*=nav-float-]) .inside-header{justify-content:flex-end}.header-aligned-right:not([class*=nav-float-]) .header-widget{margin-right:auto;margin-left:0;order:-10}.site-branding-container{display:inline-flex;align-items:center;text-align:left;flex-shrink:0}.site-branding-container .site-logo{margin-right:1em}.sticky{display:block}.entry-header .gp-icon,.posted-on .updated{display:none}.byline,.entry-header .cat-links,.entry-header .comments-link,.entry-header .tags-links,.group-blog .byline,.single .byline{display:inline}footer.entry-meta .byline,footer.entry-meta .posted-on{display:block}.entry-content:not(:first-child),.entry-summary:not(:first-child),.page-content:not(:first-child){margin-top:2em}.page-links{clear:both;margin:0 0 1.5em}.archive .format-aside .entry-header,.archive .format-status .entry-header,.archive .format-status .entry-meta,.archive .format-status .entry-title,.blog .format-aside .entry-header,.blog .format-status .entry-header,.blog .format-status .entry-meta,.blog .format-status .entry-title{display:none}.archive .format-aside .entry-content,.archive .format-status .entry-content,.blog .format-aside .entry-content,.blog .format-status .entry-content{margin-top:0}.archive .format-status .entry-content p:last-child,.blog .format-status .entry-content p:last-child{margin-bottom:0}.entry-header,.site-content{word-wrap:break-word}.entry-title{margin-bottom:0}.author .page-header .page-title{display:flex;align-items:center}.author .page-header .avatar{margin-right:20px}.page-header .author-info>:last-child,.page-header>:last-child{margin-bottom:0}.entry-meta{font-size:85%;margin-top:.5em;line-height:1.5}footer.entry-meta{margin-top:2em}.cat-links,.comments-link,.tags-links{display:block}.entry-content>p:last-child,.entry-summary>p:last-child,.page-content>p:last-child,.read-more-container,.taxonomy-description p:last-child{margin-bottom:0}.wp-caption{margin-bottom:1.5em;max-width:100%;position:relative}.wp-caption img[class*=wp-image-]{display:block;margin:0 auto 0;max-width:100%}.wp-caption .wp-caption-text{font-size:75%;padding-top:5px;opacity:.8}.wp-caption img{position:relative;vertical-align:bottom}.wp-block-image figcaption{font-size:13px;text-align:center}.wp-block-gallery,ul.blocks-gallery-grid{margin-left:0}.wp-block-gallery .blocks-gallery-image figcaption,.wp-block-gallery .blocks-gallery-item figcaption{background:rgba(255,255,255,.7);color:#000;padding:10px;box-sizing:border-box}.gallery{margin-bottom:1.5em}.gallery-item{display:inline-block;text-align:center;vertical-align:top;width:100%}.gallery-columns-2 .gallery-item{max-width:50%}.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery-columns-4 .gallery-item{max-width:25%}.gallery-columns-5 .gallery-item{max-width:20%}.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery-caption{display:block}.site-main .gallery{margin-bottom:1.5em}.gallery-item img{vertical-align:bottom}.gallery-icon{padding:5px}embed,iframe,object{max-width:100%}.wp-block-post-template{margin-left:0}.widget-area .widget{padding:40px}.widget select{max-width:100%}.footer-widgets .widget :last-child,.sidebar .widget :last-child{margin-bottom:0}.widget-title{margin-bottom:30px;font-size:20px;line-height:1.5;font-weight:400;text-transform:none}.widget ol,.widget ul{margin:0}.widget .search-field{width:100%}.widget .search-form{display:flex}.widget .search-form button.search-submit{font-size:15px}.footer-widgets .widget{margin-bottom:30px}.footer-widgets .widget:last-child,.sidebar .widget:last-child{margin-bottom:0}.widget ul li{list-style-type:none;position:relative;margin-bottom:.5em}.widget ul li ul{margin-left:1em;margin-top:.5em}.wp-calendar-table{table-layout:fixed}.site-content{display:flex}.grid-container{margin-left:auto;margin-right:auto;max-width:1200px}.page-header,.sidebar .widget,.site-main>*{margin-bottom:20px}.both-left .inside-left-sidebar,.both-right .inside-left-sidebar{margin-right:10px}.both-left .inside-right-sidebar,.both-right .inside-right-sidebar{margin-left:10px}.one-container.both-right .site-main,.one-container.right-sidebar .site-main{margin-right:40px}.one-container.both-left .site-main,.one-container.left-sidebar .site-main{margin-left:40px}.one-container.both-sidebars .site-main{margin:0 40px 0 40px}.one-container.archive .post:not(:last-child):not(.is-loop-template-item),.one-container.blog .post:not(:last-child):not(.is-loop-template-item){padding-bottom:40px}.one-container .site-content{padding:40px}.separate-containers .comments-area,.separate-containers .inside-article,.separate-containers .page-header,.separate-containers .paging-navigation{padding:40px}.separate-containers .site-main{margin:20px}.separate-containers.no-sidebar .site-main{margin-left:0;margin-right:0}.separate-containers.both-right .site-main,.separate-containers.right-sidebar .site-main{margin-left:0}.separate-containers.both-left .site-main,.separate-containers.left-sidebar .site-main{margin-right:0}.separate-containers .inside-left-sidebar,.separate-containers .inside-right-sidebar{margin-top:20px;margin-bottom:20px}.inside-page-header{padding:40px}.widget-area .main-navigation{margin-bottom:20px}.one-container .site-main>:last-child,.separate-containers .site-main>:last-child{margin-bottom:0}.full-width-content .container.grid-container{max-width:100%}.full-width-content.no-sidebar.separate-containers .site-main{margin:0}.full-width-content.one-container .site-content,.full-width-content.separate-containers .inside-article{padding:0}.full-width-content .entry-content .alignwide{margin-left:0;width:auto;max-width:unset}.contained-content.one-container .site-content,.contained-content.separate-containers .inside-article{padding:0}.sidebar .grid-container{max-width:100%;width:100%}.both-left .is-left-sidebar,.both-sidebars .is-left-sidebar,.left-sidebar .sidebar{order:-10}.both-left .is-right-sidebar{order:-5}.both-right .is-left-sidebar{order:5}.both-right .is-right-sidebar,.both-sidebars .is-right-sidebar{order:10}.inside-site-info{display:flex;align-items:center;justify-content:center;padding:20px 40px}.site-info{text-align:center;font-size:15px}.post-image:not(:first-child){margin-top:2em}.featured-image{line-height:0}.separate-containers .featured-image{margin-top:20px}.separate-containers .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.one-container .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.gp-icon{display:inline-flex;align-self:center}.gp-icon svg{height:1em;width:1em;top:.125em;position:relative;fill:currentColor}.close-search .icon-search svg:first-child,.icon-menu-bars svg:nth-child(2),.icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:first-child{display:none}.close-search .icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:nth-child(2){display:block}.entry-meta .gp-icon{margin-right:.6em;opacity:.7}nav.toggled .icon-arrow-left svg{transform:rotate(-90deg)}nav.toggled .icon-arrow-right svg{transform:rotate(90deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon svg{transform:rotate(180deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-left svg{transform:rotate(-270deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-right svg{transform:rotate(270deg)}.container.grid-container{width:auto}.menu-toggle,.mobile-bar-items,.sidebar-nav-mobile{display:none}.menu-toggle{padding:0 20px;line-height:60px;margin:0;font-weight:400;text-transform:none;font-size:15px;cursor:pointer}.menu-toggle .mobile-menu{padding-left:3px}.menu-toggle .gp-icon+.mobile-menu{padding-left:9px}.menu-toggle .mobile-menu:empty{display:none}button.menu-toggle{background-color:transparent;flex-grow:1;border:0;text-align:center}button.menu-toggle:active,button.menu-toggle:focus,button.menu-toggle:hover{background-color:transparent}.has-menu-bar-items button.menu-toggle{flex-grow:0}nav.toggled ul ul.sub-menu{width:100%}.toggled .menu-item-has-children .dropdown-menu-toggle{padding-left:20px}.main-navigation.toggled .main-nav{flex-basis:100%;order:3}.main-navigation.toggled .main-nav>ul{display:block}.main-navigation.toggled .main-nav li{width:100%;text-align:left}.main-navigation.toggled .main-nav ul ul{transition:0s;visibility:hidden;box-shadow:none;border-bottom:1px solid rgba(0,0,0,.05)}.main-navigation.toggled .main-nav ul ul li:last-child>ul{border-bottom:0}.main-navigation.toggled .main-nav ul ul.toggled-on{position:relative;top:0;left:auto!important;right:auto!important;width:100%;pointer-events:auto;height:auto;opacity:1;display:block;visibility:visible;float:none}.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle{float:right}.mobile-menu-control-wrapper{display:none;margin-left:auto;align-items:center}.has-inline-mobile-toggle #site-navigation.toggled{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search .nav-search-active{position:relative}.has-inline-mobile-toggle #site-navigation.has-active-search .navigation-search input{outline:auto}.nav-float-left .mobile-menu-control-wrapper{order:-10;margin-left:0;margin-right:auto;flex-direction:row-reverse}@media (max-width:768px){.hide-on-mobile{display:none!important}a,body,button,input,select,textarea{transition:all 0s ease-in-out}.inside-header{flex-direction:column;text-align:center}.site-header .header-widget{margin-top:1.5em;margin-left:auto;margin-right:auto;text-align:center}.site-content{flex-direction:column}.container .site-content .content-area{width:auto}.is-left-sidebar.sidebar,.is-right-sidebar.sidebar{width:auto;order:initial}.is-left-sidebar+.is-right-sidebar .inside-right-sidebar{margin-top:0}.both-left .inside-left-sidebar,.both-left .inside-right-sidebar,.both-right .inside-left-sidebar,.both-right .inside-right-sidebar{margin-right:0;margin-left:0}#main{margin-left:0;margin-right:0}body:not(.no-sidebar) #main{margin-bottom:0}.alignleft,.alignright{float:none;display:block;margin-left:auto;margin-right:auto}.comment .children{padding-left:10px;margin-left:0}.entry-meta{font-size:inherit}.entry-meta a{line-height:1.8em}}@media (min-width:769px) and (max-width:1024px){.hide-on-tablet{display:none!important}}@media (min-width:1025px){.hide-on-desktop{display:none!important}}
/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://qsh.in/boards/wbbse/
 Description:  A child theme for GeneratePress with PWA install prompt and performance styling.
 Author:       Mehrunnisa
 Author URI:   https://qsh.in
 Template:     generatepress
 Version:      1.3.0
*/

/* --- 1. PWA INSTALL BANNER (CLS OPTIMIZED) --- */
#pwa-install-banner {
    background-color: #e3f2fd;
    color: #1e3a56;
    padding: 16px 24px;
    margin: 20px auto;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    /* CLS Fix: Hide visually but reserve space, controlled by JS */
    display: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease;
}

#pwa-install-banner.is-visible {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

#pwa-install-banner p {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
}

#pwa-install-button {
    background: linear-gradient(45deg, #2196F3, #1976D2);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

#pwa-install-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* --- 2. NEW High-Readability Main Navigation --- */
.main-navigation {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.main-navigation .main-nav ul li a {
    color: #333745;
    font-weight: 600;
    padding: 20px;
    transition: all 0.25s ease-in-out;
    border-bottom: 3px solid transparent;
}

.main-navigation .main-nav ul li:not(.current-menu-item) a:hover {
    color: #4A90E2;
    background-color: #f7f9fb;
}

.main-navigation .main-nav ul li.current-menu-item>a {
    color: #4A90E2;
    font-weight: 700;
    border-bottom-color: #4A90E2;
    background-color: transparent;
}

/* --- 3. TYPOGRAPHY (PERFORMANCE OPTIMIZED) --- */
.entry-title {
    font-size: 26px;
    font-weight: 700;
    color: #1e3a56;
    padding-bottom: 15px;
    border-bottom: 4px solid #4A90E2;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .entry-title {
        font-size: 21px;
    }
}

.archive .entry-title a,
.blog .entry-title a {
    font-size: 22px;
    color: #1e3a56;
    text-decoration: none;
    transition: color 0.3s ease;
}

.archive .entry-title a:hover,
.blog .entry-title a:hover {
    color: #4A90E2;
}

/* --- 4. BUTTONS & POST NAVIGATION (NEW STYLE) --- */
.read-more-button a.button,
a.read-more {
    background: linear-gradient(45deg, #4A90E2, #1976D2);
    color: #ffffff !important;
    border-radius: 25px;
    padding: 10px 25px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.read-more-button a.button:hover,
a.read-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    min-width: 0;
}

.post-navigation .nav-next {
    text-align: right;
}

.post-navigation a {
    color: #4A90E2 !important;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
    padding: 10px 0;
    background: none !important;
    border: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-navigation a:hover {
    color: #1e3a56 !important;
    text-shadow: 0 0 8px rgba(74, 144, 226, 0.6);
}

/* --- 5. TOP BAR ACTION BUTTONS --- */
#gp-top-bar {
    background-color: #f8f9fa;
    /* Light clean background */
    border-bottom: 1px solid #eaeaea;
    padding: 10px 0;
    width: 100%;
    z-index: 99;
    /* Ensure it stays on top */
}

#gp-top-bar .gp-top-bar-inner {
    max-width: 1200px;
    /* Matches GeneratePress default container */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end !important;
    /* Right align forced to avoid menu overlap */
    align-items: center;
    gap: 15px;
}

.gp-top-btn {
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 50px;
    /* Pill shape */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

/* Primary Actions (Courses, Performance) */
.gp-btn-courses,
.gp-btn-perf {
    background: linear-gradient(135deg, #4A90E2 0%, #0077b6 100%);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
}

.gp-btn-courses:hover,
.gp-btn-perf:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    color: #fff !important;
}

/* Secondary Actions (Login / Logout) */
.gp-btn-login,
.gp-btn-logout {
    background-color: #ffffff;
    color: #333 !important;
    border: 1px solid #ddd;
}

.gp-btn-login:hover,
.gp-btn-logout:hover {
    background-color: #f1f1f1;
    border-color: #ccc;
    color: #000 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #gp-top-bar .gp-top-bar-inner {
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: 5px;
    }

    #gp-top-bar {
        padding: 12px 0;
    }

    .gp-top-btn {
        font-size: 13px;
        padding: 6px 14px;
        margin-bottom: 5px;
        /* Spacing for wrap */
    }
}