.kmheading {
    font-size: 20px;
    color: #26b59d;
    margin-bottom: 25px;
}

.question {
    border: solid 1px #a8d7c4;

    border-radius: 20px;

    margin-bottom: 25px;
}

.explanation-btn-row {
    justify-content: flex-end;
    padding-bottom: 10px;
}

/* Explanation modal tabs — themed to match site palette */

.explanation-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid var(--lgray-color);
    margin-bottom: 0;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}

.explanation-tabs .nav-item {
    margin-bottom: -2px;
}

.explanation-tabs .nav-link {
    border: none;
    background: transparent;
    color: var(--text-light);
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
    border-bottom: 3px solid transparent;
}

.explanation-tabs .nav-link:hover {
    color: var(--sprimary-color);
    background-color: var(--bg-light);
}

.explanation-tabs .nav-link.active {
    color: var(--sprimary-color);
    border-bottom: 3px solid var(--sprimary-color);
    background-color: var(--bg-light);
}

.explanation-pane-body {
    padding: 18px 4px;
    color: var(--text-dark);
}

.explanation-pane-body p {
    margin: 0;
    line-height: 1.8;
}

.explanation-pane-body img {
    border-radius: 8px;
    border: 1px solid var(--lgray-color);
}

.explanation-pane-body video {
    border-radius: 8px;
    background: var(--dark-color);
}
.question_title {
    background: #f3f3f3;

    border-radius: 20px 20px 0 0;

    display: flex;

    justify-content: space-between;

    padding: 15px 30px;

    font-weight: bold;

    font-size: 20px;
}

.question ul {
    padding: 0px;
}

.question ul li {
    list-style: none;
    border-bottom: solid 1px #a8d7c4;
    padding: 15px 30px 15px 15px;
    display: flex;

    justify-content: space-between;
}

.question ul li:last-child {
    border-bottom: 0px;
}

.question ul li label {
    display: flex;

    gap: 10px;

    align-items: center;

    font-size: 20px;

    color: #515151;

    flex: 1;
    font-family: 'Noto Sans Arabic', sans-serif;
    font-weight: 500;
}

.custom-radio {
    display: inline-flex;

    align-items: center;

    cursor: pointer;
}

.custom-radio input {
    display: none;
}

.radio-box {
    width: 22px;

    height: 22px;

    border: 2px solid #ff7a18;

    border-radius: 50%;

    position: relative;
}

/* 

.radio-box::after {

    content: "✔";

    position: absolute;

    color: #26B59D;

    font-size: 30px;

    font-weight: bold;

    left: 1px;

    top: -18px;

    opacity: 0;

    transition: opacity 0.2s ease;

}

*/

.radio-box::after {
    content: '';

    position: absolute;

    width: 15px;

    height: 15px;

    background-color: #26b59d;

    border-radius: 50%;

    left: 2px;

    top: 2px;

    opacity: 0;

    transition: opacity 0.2s ease;
}

.custom-radio input:checked + .radio-box::after {
    opacity: 1;
}

.buttons_result {
    display: flex;
    margin-bottom: 30px;
}

.view_lesson {
    text-decoration: none;

    display: flex;

    gap: 6px;

    margin: 0;
}

.view_lesson i {
    margin-top: 5px;
}

.blank-select {
    margin: 10px 30px 10px 15px;

    width: 95%;

    padding: 10px 12px 10px 40px;

    border: 1px solid #cecece;

    border-radius: 6px;

    font-size: 14px;

    background-color: #fff;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-image: url(
        data:image/svg + xml;utf8,
        <svgfill='%23ff7a18'height='20'viewBox='0 0 24 24'width='20'xmlns='http://www.w3.org/2000/svg'><pathd='M7 10l5 5 5-5z'/></svg>
    );

    background-repeat: no-repeat;

    background-position: left 12px center;

    background-size: 16px;
}

/* hover */

.blank-selecthover {
    border-color: #ff7a18;

    border: 1px solid #cecece;
}

/* focus */

.blank-selectfocus {
    outline: none;

    border-color: #ff7a18;

    box-shadow: 0 0 0 2px rgba(255, 122, 24, 0.15);

    border: 1px solid #cecece;
}

.wrong,
.right,
.correct {
    flex-direction: row-reverse;
}

.correct {
    border: solid 3px #1bae98;
    border-bottom: solid 3px #1bae98 !important;
}

.wrong {
    border: solid 3px #ef7e22;
    border-bottom: solid 3px #ef7e22 !important;
}

.right {
    border: dashed 3px #1bae98;
    border-bottom: dashed 3px #1bae98 !important;
}

.correct-answer {
    color: #1bae98;

    font-size: 30px;

    font-weight: bold;
}

.wrong-answer {
    color: #ef7e22;

    font-size: 30px;

    font-weight: bold;
}

.right-answer {
    color: #1bae98;

    font-size: 30px;

    font-weight: bold;
}

.unanswered {
    border: solid 2px #ef7e22;

    position: relative;
}

.unanswered-message {
    position: absolute;

    left: 12%;

    top: 15px;

    font-size: 20px;

    color: #ff0000;

    transform: translateX(-50%);
}

/* Result Card Styles */

.result-section {
    margin: 40px 0;

    padding: 0;
}

.result-card {
    background: linear-gradient(
        to right,

        rgba(233, 245, 239, 0.6) 0%,

        #eff7f1 50%,

        #effaf3 100%
    );

    border-radius: 24px;

    padding: 40px;

    display: flex;

    align-items: center;

    gap: 40px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

    border: 2px solid rgba(76, 175, 80, 0.1);

    margin: 0 auto;

    flex-direction: row-reverse;
}

.result-trophy {
    flex-shrink: 0;
}

.trophy-img {
    max-width: 220px;

    object-fit: contain;

    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

.result-content {
    flex: 1;

    text-align: center;
}

.result-percent {
    font-size: 130px;

    font-weight: bold;

    color: #54d5a1;

    line-height: 1;

    margin-bottom: 15px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}

.result-score {
    font-size: 50px;

    font-weight: bold;

    color: #54d5a1;

    margin-bottom: 20px;
}

.result-message {
    font-size: 40px;

    color: #3e5451;

    direction: rtl;

    font-weight: bold;
}

.unanswered-message i {
    font-size: 20px;
}

/* Hide buttons after submission */

.blank-options {
    position: relative;
}

.blank-options span {
    position: absolute;

    left: 40px;

    top: 11px;
}

.blank-options span.right-answer {
    font-size: 16px;

    position: absolute;

    left: 15%;

    top: 20px;
}

.btn-orange {
    width: max-content;
}

.view_lesson {
    display: none;
}

.question_image {
    padding: 20px;
}

.question_image img {
    max-width: 50%;
}

.circle {
    display: inline-block;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    border: solid 1px black;

    margin: 0 4px;
}

/* //////////////////////////////////// */

.question_title {
    background: #f3f3f3;

    border-radius: 20px 20px 0 0;

    display: grid;

    grid-template-columns: 1fr 150px 165px;

    align-items: center;

    gap: 5px;

    padding: 15px 30px;

    font-weight: bold;

    font-size: 20px;
    font-family: 'Noto Sans Arabic', sans-serif;
    font-weight: 600;
}

.question_title .view_lesson {
    white-space: nowrap;

    justify-self: end; /* Align button to the right within its column */
}

.video-modal {
    display: none;

    position: fixed;

    z-index: 9999;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);
}

.video-modal-content {
    position: relative;

    width: 80%;

    max-width: 700px;

    margin: 8% auto;

    background: #000;

    padding: 10px;

    border-radius: 6px;
}

.video-close {
    position: absolute;

    right: 10px;

    top: 5px;

    color: #fff;

    font-size: 26px;

    cursor: pointer;
}

.video-close-btn {
    position: absolute;

    top: -12px;

    right: -12px;

    width: 35px;

    height: 35px;

    border-radius: 50%;

    border: none;

    background: #ff4d4d;

    color: #fff;

    font-size: 20px;

    cursor: pointer;

    line-height: 35px;

    text-align: center;

    z-index: 9;
}

.video-close-btn:hover {
    background: #e60000;
}

.videopoup {
    max-width: max-content;
}

.result-trophy img {
    max-width: 300px;
}

.askquestion {
    display: none;
}

.shape {
    display: inline-block;

    width: 18px;

    height: 18px;

    border: 2px solid #000;

    vertical-align: middle;

    margin: 0 4px;
}

.shape.circle {
    border-radius: 50%;
}

.shape.square {
}

.shape.rectangle {
    width: 26px;
}

.shape.triangle {
    display: inline-block;

    width: 0;

    height: 0;

    border-left: 12px solid transparent;

    border-right: 12px solid transparent;

    border-bottom: 24px solid black;

    border-top: 0; /* remove the line */

    vertical-align: middle;
}

.shape.triangle::after {
    content: '';

    position: absolute;

    left: -12px;

    top: 0;

    width: 0;

    height: 0;

    border-left: 12px solid transparent;

    border-right: 12px solid transparent;

    border-bottom: 24px solid black;
}

.math-symbol {
    font-size: 18px;

    font-weight: bold;

    margin: 0 4px;
}

.math-container.sqrt {
    display: inline-flex;

    align-items: flex-start;

    vertical-align: middle;

    white-space: nowrap;

    flex-direction: row-reverse;
}

.sqrt-symbol {
    /* font-size: 1.5em; */

    line-height: 1;

    margin-right: 1px;

    transform: rotateY(180deg);

    margin-top: 0px;
}

.sqrt-content {
    display: inline-block;

    border-top: 2px solid #000;

    padding: 2px 4px 0 4px;

    min-width: 10px;
}

.shape {
    display: inline-block;

    width: 18px;

    height: 18px;

    border: 2px solid #000;

    vertical-align: middle;

    margin: 0 4px;
}

.shape.circle {
    border-radius: 50%;
}

.shape.square {
}

.shape.rectangle {
    width: 26px;
}

.shape.triangle {
    display: inline-block;

    width: 0;

    height: 0;

    border-left: 12px solid transparent;

    border-right: 12px solid transparent;

    border-bottom: 24px solid transparent;

    border-bottom-color: transparent;

    position: relative;
}

.shape.triangle::after {
    content: '';

    position: absolute;

    left: -12px;

    top: 0;

    width: 0;

    height: 0;

    border-left: 12px solid transparent;

    border-right: 12px solid transparent;

    border-bottom: 24px solid black;
}

.math-symbol {
    font-size: 18px;

    font-weight: bold;

    margin: 0 4px;
}

span.math-container.mixR {
    direction: ltr;
}

/* exam missing  */
.katex {
    font-family: 'Cairo', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 25px;
    font-weight: bold;
}

/* ── Missing from doc1: KaTeX operator glyph fix ── */
.katex .mbin,
.katex .mrel,
.katex .mopen,
.katex .mclose,
.katex .mpunct {
    font-family: KaTeX_Main, KaTeX_AMS, 'Times New Roman', serif;
}

/* ── Missing from doc1: Arabic math convention exponent ordering ── */
[data-latex] .mord:has(> .msupsub) {
    direction: rtl !important;
}

/* ── Missing from doc1: Comparison table ── */
.exam-section table.compare-table {
    display: inline-table;
    vertical-align: middle;
    border-collapse: separate;
    border-spacing: 10px 0;
    margin: 0 6px;
    text-align: center;
    direction: rtl;
    max-width: 100%;
}
.exam-section table.compare-table th {
    border: 1.5px solid #555;
    padding: 6px 16px;
    background: #eae6da;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
}
.exam-section table.compare-table td {
    border: 1.5px solid #555;
    border-top: none;
    padding: 8px 16px;
    min-width: 70px;
    background: #fff;
    vertical-align: middle;
}
/* keep formulas inside the table small, not the oversized 25px .katex rule above */
.exam-section table.compare-table .katex {
    font-size: 1em;
}
.exam-section table.compare-table .katex .mfrac {
    margin: 8px 0;
}
@media (max-width: 768px) {
    .exam-section table.compare-table {
        border-spacing: 6px 0;
    }
    .exam-section table.compare-table th,
    .exam-section table.compare-table td {
        padding: 6px 10px;
    }
}

.buttons-row {
    display: flex;
    padding-bottom: 20px;
    padding-left: 20px;
    flex-direction: row-reverse;
}