/**
 * استایل حرفه‌ای فرانت‌اند آزمون‌ساز
 * @package MyExamPlugin
 */

/* دیگر هیچ فونت خارجی (گوگل یا غیره) بارگذاری نمی‌شود — تمام المان‌های
   پلاگین با font-family: inherit فونت را از تم/سایت به ارث می‌برند تا هم
   با ظاهر کلی سایت هماهنگ باشد و هم هیچ درخواست شبکه‌ی اضافه‌ای
   (و مشکلات render-blocking / زنجیره‌ی بحرانی مربوط به آن در PageSpeed)
   ایجاد نشود. */

/* ================================================
   متغیرها
================================================ */
:root {
    --mep-primary:   #6366f1;
    --mep-primary-d: #4f46e5;
    --mep-secondary: #0ea5e9;
    --mep-success:   #10b981;
    --mep-warning:   #f59e0b;
    --mep-danger:    #ef4444;
    --mep-dark:      #1e293b;
    --mep-body-bg:   #f8fafc;
    --mep-card-bg:   #ffffff;
    --mep-border:    #e2e8f0;
    --mep-text:      #334155;
    --mep-muted:     #94a3b8;
    --mep-radius:    16px;
    --mep-shadow:    0 4px 20px rgba(0,0,0,.07);
    --mep-shadow-lg: 0 12px 40px rgba(0,0,0,.13);
}

/* ================================================
   ریست / تایپوگرافی
================================================ */
.mep-exam-wrapper,
.mep-exam-list,
.mep-result-page,
.mep-register-form,
.mep-results,
.mep-login-notice,
.mep-single-exam-buy {
    direction: rtl;
    font-family: var(--mep-font, inherit);
    color: var(--mep-text);
    background: transparent;
    line-height: 1.7;
}

/* ================================================
   لیست آزمون‌ها
================================================ */
.mep-exam-list {
    padding: 32px 0;
}

.mep-exam-list-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--mep-dark);
    text-align: center;
    margin-bottom: 8px;
}

.mep-exam-list-subtitle {
    text-align: center;
    color: var(--mep-muted);
    margin-bottom: 40px;
    font-size: .95rem;
}

.mep-exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

/* کارت آزمون */
.mep-exam-card {
    background: var(--mep-card-bg);
    border-radius: var(--mep-radius);
    box-shadow: var(--mep-shadow);
    border: 1px solid var(--mep-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
    position: relative;
}

.mep-exam-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--mep-shadow-lg);
}

.mep-exam-card-ribbon {
    position: absolute;
    top: 16px;
    left: 16px;
    background: linear-gradient(135deg, var(--mep-success), #059669);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: .3px;
}

.mep-exam-card-header {
    background: linear-gradient(135deg, var(--mep-primary), var(--mep-primary-d));
    padding: 28px 22px 20px;
    position: relative;
}

.mep-exam-card-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 16px;
    background: var(--mep-card-bg);
    clip-path: ellipse(55% 100% at 50% 100%);
}

.mep-exam-card-icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
    backdrop-filter: blur(4px);
}

.mep-exam-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.mep-exam-card-body {
    padding: 20px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mep-exam-card-desc {
    font-size: .88rem;
    color: var(--mep-muted);
    flex: 1;
}

.mep-exam-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.mep-exam-card-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.mep-exam-card-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    color: var(--mep-muted);
    font-weight: 500;
}

.mep-exam-card-meta-item .icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.mep-exam-card-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--mep-border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    background: #fafbfc;
}

.mep-exam-card-footer .mep-btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.mep-exam-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--mep-success);
}

.mep-exam-price small {
    font-size: .75rem;
    font-weight: 400;
    color: var(--mep-muted);
    margin-right: 3px;
}

.mep-exam-price.free {
    color: var(--mep-secondary);
}

/* ================================================
   دکمه‌ها
================================================ */
.mep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 10px;
    font-family: var(--mep-font, inherit);
    font-size: .875rem;
    font-weight: 700;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -.1px;
    -webkit-tap-highlight-color: transparent;
}

.mep-btn:hover   { filter: brightness(1.08); transform: translateY(-2px); }
.mep-btn:active  { transform: translateY(0); }
.mep-btn:focus-visible { box-shadow: 0 0 0 3px rgba(37,99,235,.35); }

.mep-btn-primary {
    background: linear-gradient(135deg, var(--mep-primary), var(--mep-primary-d));
    color: #fff;
    box-shadow: 0 6px 18px rgba(99,102,241,.35);
}

.mep-btn-success {
    background: linear-gradient(135deg, var(--mep-success), #059669);
    color: #fff;
    box-shadow: 0 6px 18px rgba(16,185,129,.35);
}

.mep-btn-outline {
    background: transparent;
    border: 2px solid var(--mep-border);
    color: var(--mep-text);
}

.mep-btn-outline:hover { border-color: var(--mep-primary); color: var(--mep-primary); background: #eef2ff; }

/* دکمه‌ی «کپی» (مثلاً کپی شماره کارت در پاپ‌آپ پرداخت کارت‌به‌کارت) —
   چون داخل HTML سفارشی SweetAlert2 تزریق می‌شود، از کلاس‌های بوت‌استرپ
   (btn btn-outline-secondary) استفاده نمی‌شود تا رنگ پیش‌فرض/صورتیِ قالب
   روی آن اثر نگذارد؛ به‌جایش دقیقاً هم‌زبان با بقیه‌ی دکمه‌های outline پلاگین است.
   مثل بقیه‌ی جاهایی که با استایل پیش‌فرض دکمه‌های قالب سایت تداخل پیدا می‌کند،
   !important لازم است وگرنه استایل قالب (که اولویت بالاتری دارد) همچنان اعمال می‌شود */
.mep-copy-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    background: #fff !important;
    border: 1.5px solid var(--mep-primary) !important;
    border-radius: 10px !important;
    color: var(--mep-primary) !important;
    font-family: var(--mep-font, inherit) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.mep-copy-btn:hover,
.mep-copy-btn:focus-visible {
    background: var(--mep-primary) !important;
    color: #fff !important;
}

.mep-copy-btn.is-copied {
    background: var(--mep-success) !important;
    border-color: var(--mep-success) !important;
    color: #fff !important;
}

.mep-btn-lg { padding: 13px 28px; font-size: 1rem; border-radius: 12px; }
.mep-btn-sm { padding: 7px 14px; font-size: .8rem; border-radius: 8px; }

.mep-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
}

/* ================================================
   صفحه آزمون
================================================ */
.mep-exam-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 16px 60px;
}

/* چیدمان دوستونه: نوار کناری (اطلاعات بانک + پیشرفت + بانک‌های دیگر) سمت راست،
   سؤال‌ها سمت چپ. چون کانتینر RTL است، اولین ستون تعریف‌شده (300px) در سمت
   راست قرار می‌گیرد و چون نوار کناری هم اولین فرزندِ DOM است، دقیقاً همان‌جا
   می‌نشیند — بدون نیاز به ترتیب بصری دستی. */
.mep-exam-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
}

.mep-exam-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: var(--mep-sticky-offset, 20px);
}

.mep-exam-questions {
    display: flex;
    flex-direction: column;
    min-width: 0; /* جلوگیری از سرریز گرید با محتوای طولانی (متن سؤال/ویدیو) */
}

.mep-sidebar-banks {
    background: var(--mep-card-bg);
    border: 1px solid var(--mep-border);
    border-radius: var(--mep-radius);
    padding: 18px;
    box-shadow: var(--mep-shadow);
}

.mep-sidebar-banks h4 {
    font-size: .92rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--mep-text);
}

.mep-sidebar-bank-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}

.mep-sidebar-bank-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 11px 13px;
    border: 1.5px solid var(--mep-border);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.mep-sidebar-bank-item:hover {
    border-color: var(--mep-primary);
    background: #eef2ff;
    text-decoration: none;
}

.mep-sidebar-bank-title {
    font-size: .84rem;
    font-weight: 600;
    color: var(--mep-text);
}

.mep-sidebar-bank-meta {
    font-size: .74rem;
    color: var(--mep-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* هدر آزمون */
.mep-exam-header {
    background: linear-gradient(135deg, var(--mep-dark) 0%, #1a2744 100%);
    border-radius: var(--mep-radius);
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    box-shadow: var(--mep-shadow-lg);
    flex-wrap: wrap;
    gap: 16px;
}

.mep-exam-header-info h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.mep-exam-header-info p {
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    margin: 0;
}

/* در نوار کناریِ باریک (300px)، هدر با پدینگ کمتر و بدون فاصله‌ی پایینیِ اضافه
   نمایش داده می‌شود (چون خودِ mep-exam-sidebar با gap فاصله می‌دهد) */
.mep-exam-sidebar .mep-exam-header {
    padding: 18px 20px;
    margin-bottom: 0;
}

/* تایمر */
.mep-timer-wrap {
    text-align: center;
    background: rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 12px 20px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.1);
}

#mep-timer {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 3px;
    display: block;
    line-height: 1;
    transition: color .3s;
    font-variant-numeric: tabular-nums;
}

#mep-timer.danger { color: #fca5a5; animation: pulse-timer .8s infinite; }

@keyframes pulse-timer {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

.mep-timer-label {
    font-size: .72rem;
    color: rgba(255,255,255,.5);
    font-weight: 500;
    letter-spacing: .5px;
    display: block;
    margin-top: 4px;
}

/* نوار پیشرفت */
.mep-progress-container {
    background: var(--mep-card-bg);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: var(--mep-shadow);
    border: 1px solid var(--mep-border);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.mep-progress-info {
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
    color: var(--mep-muted);
    min-width: 100px;
}

.mep-progress-bar-wrap {
    flex: 1;
    background: #f1f5f9;
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
}

.mep-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mep-primary), var(--mep-secondary));
    border-radius: 10px;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}

.mep-progress-score {
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 700;
    color: var(--mep-success);
    min-width: 80px;
    text-align: left;
}

/* داخل نوار کناریِ باریک (300px)، این خلاصه به‌صورت عمودی و فشرده‌تر نمایش داده می‌شود */
.mep-exam-sidebar .mep-progress-container {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 0;
}

.mep-exam-sidebar .mep-progress-info,
.mep-exam-sidebar .mep-progress-score {
    min-width: 0;
    text-align: center;
}

/* دکمه‌ی «ادامه از جایی که مانده بودید» — دقیقاً هم‌استایل با دکمه‌ی «نمایش پاسخ»
   (mep-btn-primary)، فقط با عرض کامل چون داخل نوار کناری است */
.mep-btn-resume {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px 24px;
    border: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--mep-primary), var(--mep-primary-d));
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(99, 102, 241, .25);
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.mep-btn-resume,
.mep-btn-resume span {
    color: #fff !important;
}

.mep-btn-resume:hover,
.mep-btn-resume:focus {
    background: linear-gradient(135deg, var(--mep-primary-d), #4338ca);
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .32);
    transform: translateY(-1px);
}

.mep-btn-resume:active {
    transform: translateY(0);
}

/* نشانه‌ی کوچکِ «این سؤال قبلاً بررسی شده» روی شماره‌ی سؤال */
.mep-question-num--reviewed { box-shadow: 0 0 0 2px var(--mep-success); }

/* هایلایتِ موقتِ کارت سؤالِ نقطه‌ی ادامه، هنگام اسکرول به آن */
.mep-question-card.mep-resume-highlight {
    animation: mepResumePulse 1.6s ease;
}
@keyframes mepResumePulse {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.45); }
    60%  { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

/* کارت سؤال */
.mep-question-card {
    background: var(--mep-card-bg);
    border-radius: var(--mep-radius);
    box-shadow: var(--mep-shadow);
    border: 1px solid var(--mep-border);
    overflow: hidden;
    margin-bottom: 24px; /* فاصله بین کارت‌های سؤال در حالت اسکرول عمودی پیوسته */
    animation: slideInUp .35s ease;
}

.mep-question-card:last-of-type { margin-bottom: 0; }

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mep-question-card.d-none { display: none !important; }

.mep-question-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--mep-primary), var(--mep-primary-d));
    color: #fff;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mep-q-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--mep-border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafbfc;
    font-size: .82rem;
    color: var(--mep-muted);
    font-weight: 600;
}

.mep-q-body {
    padding: 24px;
}

.mep-question-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mep-dark);
    line-height: 1.7;
    margin-bottom: 24px;
}

.mep-question-img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--mep-border);
}

/* گزینه‌ها */
.mep-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mep-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 2px solid var(--mep-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    user-select: none;
}

.mep-option:hover {
    border-color: var(--mep-primary);
    background: #eef2ff;
    transform: translateX(-4px);
}

.mep-option.selected {
    border-color: var(--mep-primary);
    background: #eef2ff;
}

.mep-option.correct {
    border-color: var(--mep-success);
    background: #ecfdf5;
    pointer-events: none;
}

.mep-option.wrong {
    border-color: var(--mep-danger);
    background: #fef2f2;
    pointer-events: none;
}

.mep-option.disabled {
    pointer-events: none;
    opacity: .65;
}

.mep-option-key {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--mep-muted);
    flex-shrink: 0;
    transition: all .2s;
}

.mep-option.selected   .mep-option-key { background: var(--mep-primary); color: #fff; }
.mep-option.correct    .mep-option-key { background: var(--mep-success); color: #fff; }
.mep-option.wrong      .mep-option-key { background: var(--mep-danger); color: #fff; }

.mep-option-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.mep-option-text {
    font-size: .92rem;
    font-weight: 500;
    color: var(--mep-text);
    flex: 1;
    transition: color .2s;
}

.mep-option.selected .mep-option-text { color: var(--mep-primary); font-weight: 600; }
.mep-option.correct  .mep-option-text { color: #065f46; font-weight: 600; }
.mep-option.wrong    .mep-option-text { color: #991b1b; }

/* عکس اختصاصی گزینه (در صورت افزودن توسط مدرس) */
.mep-option-img {
    display: block;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--mep-border);
    background: #fff;
}

/* ستاره / چک / ایکس نشان‌دهنده نتیجه */
.mep-option-badge {
    position: absolute;
    left: 14px;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}

.mep-option.correct .mep-option-badge { color: var(--mep-success); }
.mep-option.wrong   .mep-option-badge { color: var(--mep-danger); }

/* پیام نتیجه */
.mep-q-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mep-btn-report {
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
}

.mep-btn-report:hover,
.mep-btn-report:focus {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.mep-answer-result {
    margin-top: 20px;
    animation: fadeIn .3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* «کارت پاسخ» — یک جعبه‌ی مجزا و برجسته (حسّ پاپ‌آپ) که همه‌ی محتوای راه‌حل
   (بنر نتیجه، پاسخ جای‌خالی، متن حل، تصویر حل، ویدیو، توضیحات) داخلش قرار می‌گیرد */
.mep-answer-card {
    background: var(--mep-body-bg);
    border: 1px solid var(--mep-border);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .07);
}

.mep-answer-type-hint {
    background: rgba(99,102,241,.06);
    border: 1px dashed var(--mep-primary);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .86rem;
    color: var(--mep-primary);
    margin: 4px 0 0;
}

.mep-result-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 14px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.mep-result-banner.correct {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.mep-result-banner.wrong {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.mep-result-banner .icon {
    font-size: 22px;
    flex-shrink: 0;
}

/* پاسخ صحیح جای‌خالی */
.mep-fillblank-answer {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .9rem;
    color: #065f46;
    margin-bottom: 14px;
}

/* متن حل سؤال */
.mep-solution-text {
    background: #fff;
    border: 1px solid var(--mep-border);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: .9rem;
    line-height: 1.9;
    margin-bottom: 14px;
    white-space: pre-wrap;
}

/* تصویر حل سؤال */
.mep-solution-image {
    margin-bottom: 14px;
}

.mep-solution-image img {
    max-width: 100%;
    border-radius: 10px;
    display: block;
}

/* کانتینر ویدیو */
.mep-video-container {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
}

/* پخش‌کننده SpotPlayer داخل مودال دوره‌های پاسخ در انتهای فایل استایل شده
   (کلاس .mep-videos-player .mep-spotplayer-mount) — همان‌جا مقدار نهایی است. */
.mep-video-container .video-js {
    width: 100%;
    max-height: 380px;
    border-radius: 12px;
}

/* کانتینر دکمه‌های عمل */
.mep-q-actions {
    padding: 16px 24px;
    background: #fafbfc;
    border-top: 1px solid var(--mep-border);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ================================================
   صفحه خرید
================================================ */
.mep-buy-card {
    background: var(--mep-card-bg);
    border-radius: 20px;
    box-shadow: var(--mep-shadow-lg);
    overflow: hidden;
    max-width: 460px;
    margin: 0 auto;
}

.mep-buy-card-header {
    background: linear-gradient(135deg, var(--mep-primary), var(--mep-primary-d));
    padding: 36px 28px 48px;
    text-align: center;
    position: relative;
}

.mep-buy-card-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 24px;
    background: var(--mep-card-bg);
    clip-path: ellipse(55% 100% at 50% 100%);
}

.mep-buy-card-header h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin: 12px 0 0;
}

.mep-buy-card-body {
    padding: 8px 28px 28px;
}

.mep-buy-price-box {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--mep-border);
    margin-bottom: 20px;
}

.mep-buy-price-box .amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--mep-success);
    line-height: 1;
}

.mep-buy-price-box .unit {
    font-size: .9rem;
    color: var(--mep-muted);
    margin-right: 4px;
}

.mep-buy-features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mep-buy-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    color: var(--mep-text);
}

.mep-buy-features li::before {
    content: '✓';
    width: 22px;
    height: 22px;
    background: #ecfdf5;
    color: var(--mep-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ================================================
   صفحه نتیجه
================================================ */
.mep-result-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 16px 60px;
}

.mep-result-hero {
    background: linear-gradient(135deg, var(--mep-dark), #1a2744);
    border-radius: 20px;
    padding: 44px 28px;
    text-align: center;
    margin-bottom: 32px;
    box-shadow: var(--mep-shadow-lg);
    position: relative;
    overflow: hidden;
}

.mep-result-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}

.mep-result-hero::after {
    content: '';
    position: absolute;
    bottom: -40px; left: -40px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}

.mep-score-circle-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 24px;
}

.mep-score-circle-wrap svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.mep-score-circle-bg {
    fill: none;
    stroke: rgba(255,255,255,.1);
    stroke-width: 10;
}

.mep-score-circle-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}

.mep-score-circle-fill.pass { stroke: #34d399; }
.mep-score-circle-fill.fail { stroke: #f87171; }

.mep-score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.mep-score-text .percent {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    display: block;
}

.mep-score-text .label {
    font-size: .72rem;
    color: rgba(255,255,255,.5);
    font-weight: 500;
}

.mep-result-hero h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
}

.mep-result-hero p {
    color: rgba(255,255,255,.6);
    font-size: .9rem;
    margin: 0;
}

.mep-result-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.mep-result-stat-item {
    background: rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 14px 24px;
    text-align: center;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.1);
    min-width: 90px;
}

.mep-result-stat-item .num {
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    display: block;
}

.mep-result-stat-item .lbl {
    font-size: .75rem;
    color: rgba(255,255,255,.5);
    margin-top: 4px;
    display: block;
}

.mep-result-stat-item.correct .num { color: #34d399; }
.mep-result-stat-item.wrong   .num { color: #f87171; }

/* بررسی پاسخ‌ها */
.mep-review-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mep-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mep-review-card {
    background: var(--mep-card-bg);
    border-radius: 14px;
    box-shadow: var(--mep-shadow);
    border: 1px solid var(--mep-border);
    overflow: hidden;
    margin-bottom: 16px;
    border-right: 4px solid transparent;
}

.mep-review-card.correct { border-right-color: var(--mep-success); }
.mep-review-card.wrong   { border-right-color: var(--mep-danger); }

.mep-review-card-header {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fafbfc;
    border-bottom: 1px solid var(--mep-border);
}

.mep-review-card-header .q-num {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--mep-muted);
    flex-shrink: 0;
}

.mep-review-card-header .q-text {
    flex: 1;
    font-size: .88rem;
    font-weight: 600;
    color: var(--mep-dark);
}

.mep-result-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mep-result-tag.correct { background: #dcfce7; color: #166534; }
.mep-result-tag.wrong   { background: #fee2e2; color: #991b1b; }

.mep-review-card-body {
    padding: 16px 18px;
}

.mep-answer-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: .85rem;
    margin-bottom: 12px;
}

.mep-answer-row .item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mep-answer-row .item strong {
    color: var(--mep-muted);
}

.mep-answer-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
}

.mep-answer-chip.selected { background: #fee2e2; color: #991b1b; }
.mep-answer-chip.correct  { background: #dcfce7; color: #166534; }

/* ================================================
   ویدیو
================================================ */
.video-js {
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    width: 100%;
}

video::-webkit-media-controls-enclosure {
    overflow: hidden;
}

video::-internal-media-controls-download-button {
    display: none !important;
}

/* ================================================
   صفحه ورود
================================================ */
.mep-login-card {
    background: var(--mep-card-bg);
    border-radius: 20px;
    box-shadow: var(--mep-shadow-lg);
    overflow: hidden;
    max-width: 400px;
    margin: 40px auto;
}

.mep-login-card-header {
    background: linear-gradient(135deg, var(--mep-primary), var(--mep-primary-d));
    padding: 32px 24px;
    text-align: center;
}

.mep-login-card-header .lock-icon {
    font-size: 44px;
    margin-bottom: 12px;
    display: block;
}

.mep-login-card-header h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.mep-login-card-body {
    padding: 28px 24px;
}

/* ================================================
   پیام خالی
================================================ */
.mep-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--mep-muted);
}

.mep-empty-state .icon {
    font-size: 56px;
    margin-bottom: 16px;
    display: block;
    opacity: .4;
}

.mep-empty-state h4 {
    font-size: 1rem;
    color: var(--mep-dark);
    margin-bottom: 6px;
}

.mep-empty-state p {
    font-size: .85rem;
}

/* ================================================
   جدول نتایج
================================================ */
.mep-results-table {
    width: 100%;
    border-collapse: collapse;
}

.mep-results-table thead th {
    background: var(--mep-dark);
    color: rgba(255,255,255,.8);
    padding: 12px 16px;
    text-align: right;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.mep-results-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mep-border);
    font-size: .88rem;
    vertical-align: middle;
}

.mep-results-table tbody tr:last-child td { border-bottom: none; }
.mep-results-table tbody tr:hover { background: #f8fafc; }

/* ================================================
   Spinner
================================================ */
.mep-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ================================================
   ریسپانسیو — چون اکثر کاربران با گوشی وارد می‌شوند
================================================ */
@media (max-width: 768px) {
    .mep-exam-header { flex-direction: column; text-align: center; }
    .mep-progress-container { flex-wrap: wrap; }
    .mep-result-stats { gap: 12px; }
    .mep-result-stat-item { min-width: 70px; padding: 10px 14px; }
    .mep-exam-grid { grid-template-columns: 1fr; }
    .mep-question-card { margin-bottom: 18px; }

    /* در تبلت/موبایل، نوار کناری (اطلاعات بانک + پیشرفت + بانک‌های دیگر)
       به‌جای ستون کناری، بالای سؤال‌ها می‌نشیند */
    .mep-exam-layout { grid-template-columns: 1fr; }
    .mep-exam-sidebar { position: static; }
    .mep-sidebar-bank-list { max-height: 260px; }

    .mep-exam-list,
    .mep-result-page,
    .mep-register-form,
    .mep-results,
    .mep-login-notice,
    .mep-single-exam-buy {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mep-buy-card-body { padding: 20px; }

    .mep-score-circle-wrap { width: 140px; height: 140px; }

    .mep-result-hero {
        padding: 24px 16px;
        text-align: center;
    }

    .mep-review-card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mep-answer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* جدول نتایج روی موبایل قابل اسکرول افقی می‌شود تا خراب نشود */
    .mep-results-table-wrap,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px; /* فاصله بین محتوای جدول و اسکرول‌بار افقی */
        scrollbar-width: thin;
        scrollbar-color: var(--mep-primary) #f1f5f9;
    }

    .mep-results-table-wrap::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar { height: 6px; }
    .mep-results-table-wrap::-webkit-scrollbar-track,
    .table-responsive::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
    .mep-results-table-wrap::-webkit-scrollbar-thumb,
    .table-responsive::-webkit-scrollbar-thumb { background: var(--mep-primary); border-radius: 3px; }
    .mep-results-table-wrap::-webkit-scrollbar-thumb:hover,
    .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--mep-primary-d); }
}

@media (max-width: 480px) {
    .mep-exam-wrapper, .mep-result-page { padding: 16px 12px 40px; }
    .mep-q-body { padding: 16px; }
    .mep-question-card { margin-bottom: 14px; }
    .mep-q-actions {
        padding: 12px 16px;
        flex-direction: column;
        gap: 10px;
    }
    .mep-q-actions .mep-btn { width: 100%; }
    #mep-timer { font-size: 1.5rem; }

    /* گزینه‌ها: هدف لمسی بزرگ‌تر برای گوشی */
    .mep-option {
        padding: 13px 14px;
        min-height: 48px;
    }

    .mep-option-key {
        width: 26px;
        height: 26px;
        font-size: .8rem;
        flex-shrink: 0;
    }

    .mep-question-text { font-size: .95rem; }

    .mep-exam-header-info h2 { font-size: 1.1rem; }

    .mep-timer-wrap { width: 100%; justify-content: center; }

    .mep-results-table-wrap,
    .table-responsive {
        padding-bottom: 6px;
    }

    .mep-results-table-wrap::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar { height: 4px; }

    .mep-btn {
        min-height: 44px; /* حداقل اندازه‌ی توصیه‌شده برای لمس */
    }

    .mep-score-circle-wrap { width: 120px; height: 120px; }
    .mep-score-text .percent { font-size: 1.5rem; }

    .mep-result-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    .mep-review-card-header .q-text {
        font-size: .85rem;
        flex-basis: 100%;
        order: 3;
    }

    .mep-buy-price-box .amount { font-size: 1.6rem; }

    .mep-login-card-body { padding: 20px 16px; }
}


/* بج‌های دسته‌بندی روی کارت بانک سؤال */
.mep-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.8;
}
.mep-badge-info      { background: rgba(99,102,241,.12);  color: var(--mep-primary); }
.mep-badge-secondary { background: rgba(148,163,184,.15); color: var(--mep-muted); }
.mep-badge-success   { background: rgba(16,185,129,.12);  color: var(--mep-success); }
.mep-badge-warning   { background: rgba(245,158,11,.12);  color: var(--mep-warning); }
.mep-badge-danger    { background: rgba(239,68,68,.12);   color: var(--mep-danger); }

/* توضیحات اضافه سؤال (پس از پاسخ نمایش داده می‌شود) */
.mep-extra-notes {
    background: rgba(99,102,241,.06);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: .88rem;
    line-height: 1.9;
}
.mep-extra-notes strong { display:block; margin-bottom:4px; color: var(--mep-primary); }

.mep-answer-card > *:last-child { margin-bottom: 0; }

.mep-exam-search-empty {
    text-align: center;
    padding: 24px;
    color: var(--mep-muted, #94a3b8);
    font-size: .95rem;
}

/* =========================================================
   فیلتر دسته‌بندی صفحه لیست بانک سؤال (دوره / رشته / پایه / کتاب / درس ...)
   ========================================================= */
.mep-exam-filters {
    max-width: 980px;
    margin: 0 auto 22px;
    background: var(--mep-card-bg, #fff);
    border: 1px solid var(--mep-border, #e2e8f0);
    border-radius: var(--mep-radius, 16px);
    box-shadow: var(--mep-shadow, 0 4px 20px rgba(0,0,0,.07));
    padding: 16px;
}

.mep-exam-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.mep-exam-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 140px;
    min-width: 130px;
}

.mep-exam-filter-field label {
    font-size: .74rem;
    font-weight: 700;
    color: var(--mep-muted, #94a3b8);
}

.mep-exam-filter-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--mep-border, #e2e8f0);
    border-radius: 10px;
    font-family: var(--mep-font, inherit);
    font-size: .85rem;
    background: #fff;
    color: var(--mep-text, #334155);
}

.mep-exam-filter-select:focus {
    outline: none;
    border-color: var(--mep-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

.mep-exam-filter-select:disabled { opacity: .55; cursor: not-allowed; }

/* دکمه‌ی «پاک کردن فیلترها»: از همان کلاس‌های عمومی دکمه‌ی پلاگین (.mep-btn,
   .mep-btn-outline, .mep-btn-sm) استفاده می‌شود تا دقیقاً هم‌شکل «بقیه‌ی دکمه‌ها»
   باشد. اما چون این دکمه در صفحه‌ی عمومی «لیست بانک سؤال» رندر می‌شود و می‌تواند
   با استایل پیش‌فرض دکمه‌های قالب سایت (که اولویت بالاتری در کش cascade دارد)
   تداخل پیدا کند — دقیقاً همان مشکلی که برای .mep-copy-btn (بالاتر در همین فایل)
   پیش آمده بود — تمام ویژگی‌های ظاهری اینجا هم با !important قفل شده‌اند تا
   مطمئناً همان چیزی که پلاگین تعریف کرده نمایش داده شود، نه رنگ/پدینگ پیش‌فرض قالب. */
.mep-exam-filter-clear {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 16px !important;
    border: 2px solid var(--mep-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--mep-text) !important;
    font-family: var(--mep-font, inherit) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, filter .15s ease;
}

.mep-exam-filter-clear svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.mep-exam-filter-clear:hover {
    border-color: var(--mep-danger, #ef4444) !important;
    color: var(--mep-danger, #ef4444) !important;
    background: #fef2f2 !important;
    transform: translateY(-2px);
}

.mep-exam-filter-clear:active {
    transform: translateY(0);
    box-shadow: none !important;
}

.mep-exam-filter-clear:focus-visible {
    outline: 2px solid var(--mep-danger, #ef4444);
    outline-offset: 2px;
}

.mep-exam-grid.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }

@media (max-width: 640px) {
    .mep-exam-filter-field { flex: 1 1 100%; }
    .mep-exam-filter-clear { width: 100%; }
}

/* =========================================================
   اصلاح بیرون‌زدگی فیلدهای مودال‌های SweetAlert2 (مثل کد تخفیف در
   مودال «خرید بانک سؤال»). بعضی قالب‌های وردپرس روی input های عمومی
   box-sizing/margin متفاوتی اعمال می‌کنند که باعث بیرون‌زدن فیلد از
   عرض کارت مودال می‌شود، مخصوصاً در حالت ریسپانسیو/موبایل.
   ========================================================= */
.swal2-popup {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: min(32em, 92vw) !important;
    padding: 1.25em !important;
}

.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1em auto 3px !important;
}

.swal2-popup .swal2-actions {
    flex-wrap: wrap !important;
    width: 100% !important;
}

@media (max-width: 480px) {
    .swal2-popup {
        max-width: 94vw !important;
        padding: 1em !important;
    }
    .swal2-popup .swal2-title {
        font-size: 1.15em !important;
    }
}

/* =========================================================
   دکمه‌های مودال‌های SweetAlert2 (مثل «انصراف / ادامه و پرداخت»)
   هماهنگ با استایل اصلی سایت (آبی)، به‌جای رنگ پیش‌فرض/صورتیِ قالب
   ========================================================= */
.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, var(--mep-primary, #6366f1), var(--mep-primary-d, #4f46e5)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-confirm:focus {
    background: var(--mep-primary-d, #4f46e5) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
}

.swal2-styled.swal2-cancel {
    background: #fff !important;
    color: var(--mep-primary, #6366f1) !important;
    border: 1.5px solid var(--mep-primary, #6366f1) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-cancel:focus {
    background: var(--mep-primary, #6366f1) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* دکمه‌ی «deny» (مثلاً گزینه‌ی «کارت به کارت» در کنار درگاه پرداخت)؛ رنگ سبز
   موفقیت پلاگین (همان رنگ دکمه‌های خرید/شرکت رایگان) به‌جای صورتیِ پیش‌فرض قالب،
   تا هم با بقیه‌ی دکمه‌ها هماهنگ باشد و هم از «تایید»/«انصراف» قابل تشخیص بماند */
.swal2-styled.swal2-deny {
    background: #fff !important;
    color: var(--mep-success, #10b981) !important;
    border: 1.5px solid var(--mep-success, #10b981) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
.swal2-styled.swal2-deny:hover,
.swal2-styled.swal2-deny:focus {
    background: var(--mep-success, #10b981) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* اقدامات مخرب (حذف سؤال/آزمون/کد تخفیف، رد بانک سؤال) عمداً قرمز می‌مانند؛
   این کلاس با customClass روی همین دکمه‌ی تأیید اضافه می‌شود و چون در ترتیب
   فایل بعد از قانون آبی بالا آمده، با تخصیص یکسان آن را override می‌کند */
.swal2-confirm.mep-swal-danger-btn {
    background: #ef4444 !important;
}
.swal2-confirm.mep-swal-danger-btn:hover,
.swal2-confirm.mep-swal-danger-btn:focus {
    background: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important;
}

/* =========================================================
   اقدامات سؤال: نمایش پاسخ / گزارش مشکل
   یکپارچه با طراحی کارت‌های آزمون
========================================================= */
.mep-q-actions {
    align-items: center;
    justify-content: flex-start;
}

.mep-q-actions .mep-btn {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.mep-q-actions .mep-btn:hover,
.mep-q-actions .mep-btn:focus-visible {
    transform: translateY(-1px);
}

.mep-q-actions .mep-show-answer {
    background: linear-gradient(135deg, var(--mep-primary, #6366f1), var(--mep-primary-d, #4f46e5));
    border: 1px solid var(--mep-primary, #6366f1);
    color: #fff;
    box-shadow: 0 5px 14px rgba(79, 70, 229, .16);
}

.mep-q-actions .mep-show-answer:hover,
.mep-q-actions .mep-show-answer:focus-visible {
    color: #fff;
    box-shadow: 0 7px 18px rgba(79, 70, 229, .22);
}

.mep-q-actions .mep-show-answer:disabled {
    opacity: .72;
    cursor: wait;
    transform: none;
}

.mep-q-actions .mep-btn-report {
    background: #fff;
    border: 1px solid #fecaca;
    color: #b91c1c;
    box-shadow: 0 2px 8px rgba(127, 29, 29, .04);
}

.mep-q-actions .mep-btn-report:hover,
.mep-q-actions .mep-btn-report:focus-visible {
    background: #fff7f7;
    border-color: #fca5a5;
    color: #991b1b;
    box-shadow: 0 5px 14px rgba(185, 28, 28, .08);
}

.mep-answer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--mep-border, #e5e7eb);
}

.mep-answer-actions .mep-close-answer {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.mep-answer-actions .mep-close-answer span {
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
}

.mep-answer-actions .mep-close-answer:hover,
.mep-answer-actions .mep-close-answer:focus-visible {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
    transform: translateY(-1px);
}

.mep-answer-actions .mep-close-answer:focus-visible,
.mep-q-actions .mep-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .16);
}

@media (max-width: 480px) {
    .mep-q-actions .mep-btn {
        width: 100%;
    }

    .mep-answer-actions {
        justify-content: stretch;
    }

    .mep-answer-actions .mep-close-answer {
        width: 100%;
    }
}

/* v1.15.3 — responsive hardening
   (box-sizing:border-box سراسری قبلاً توسط bootstrap.min.css روی کل صفحه
   اعمال می‌شود، تکرارش این‌جا زائد بود و حذف شد. دو قانون زیر هم که قبلاً
   بدون محدوده روی کل صفحه (از جمله ویجت‌های الیمنتور و بقیه‌ی پلاگین‌ها)
   اجرا می‌شدند، حالا فقط به کانتینرهای خودِ این پلاگین محدود شده‌اند تا با
   المنتور/تم/پلاگین‌های دیگر تداخل نداشته باشند.) */
:is(.mep-panel,.mep-exam-list,.mep-exam-wrapper,.mep-result-page,.mep-register-form,.mep-student-modal,.mep-onboarding-modal,.mep-videos-modal) :is(img,video,iframe){max-width:100%;height:auto}
:is(.mep-panel,.mep-exam-list,.mep-exam-wrapper,.mep-result-page,.mep-register-form,.mep-student-modal,.mep-onboarding-modal,.mep-videos-modal) :is(input,select,textarea,button){max-width:100%;font:inherit}
@media (max-width:782px){
    .mep-container,.mep-panel,.mep-panel-wrap,.mep-content,.frlda-modal-content{width:100%;max-width:100%}
    .mep-grid,.mep-form-grid,.mep-two-col,.mep-dashboard-grid{grid-template-columns:1fr!important}
    .mep-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .mep-table{min-width:620px}
    .mep-panel-card{max-width:100%;overflow:hidden}
    .mep-panel-card-body{overflow-wrap:anywhere}
    .mep-panel-actions,.mep-actions,.mep-question-actions{flex-wrap:wrap}
    .mep-panel-actions>*{max-width:100%}
}
@media (max-width:480px){
    .mep-panel,.mep-container{padding-left:12px!important;padding-right:12px!important}
    .mep-panel-card-body{padding:12px!important}
    .mep-btn,.mep-panel-btn,.mep-button{width:100%;min-height:42px}
    .mep-question-actions .mep-btn,.mep-question-actions button{width:100%}
    .frlda-modal-content{margin:10px!important;border-radius:14px}
}


/* v1.15.3 — پاسخ سؤال به‌صورت مودال مستقل */
body.mep-answer-modal-open{overflow:hidden}
.mep-answer-modal[hidden]{display:none!important}
.mep-answer-modal{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:24px;direction:rtl}
.mep-answer-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.68);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mep-answer-modal-dialog{position:relative;z-index:1;width:min(760px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;background:var(--mep-body-bg,#fff);border:1px solid var(--mep-border,#e5e7eb);border-radius:20px;box-shadow:0 24px 80px rgba(15,23,42,.24);outline:none;animation:mepAnswerModalIn .2s ease-out}
.mep-answer-modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--mep-border,#e5e7eb);background:var(--mep-card-bg,#fff);flex:0 0 auto}
.mep-answer-modal-header h2{margin:2px 0 0;font-size:1.08rem;line-height:1.5;color:var(--mep-heading,#0f172a)}
.mep-answer-modal-eyebrow{display:block;font-size:.72rem;color:var(--mep-primary,#6366f1);font-weight:800}
.mep-answer-modal-body{overflow:auto;padding:20px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mep-answer-modal-body .mep-answer-card{margin:0;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.mep-answer-modal-body .mep-result-banner{margin-bottom:16px}
.mep-answer-modal-body .mep-video-container{border-radius:14px;overflow:hidden}
.mep-answer-modal-body .mep-solution-image img{display:block;max-width:100%;height:auto;margin-inline:auto;border-radius:12px}
@keyframes mepAnswerModalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:782px){
 .mep-answer-modal{padding:12px;align-items:flex-end}
 .mep-answer-modal-dialog{width:100%;max-height:92vh;border-radius:18px 18px 0 0}
 .mep-answer-modal-header{padding:15px 16px}
 .mep-answer-modal-body{padding:16px}
}
@media (prefers-reduced-motion:reduce){.mep-answer-modal-dialog{animation:none}}

/* v1.18.3 — دکمه‌ی «پاسخ ویدیویی» سطح بانک سؤال (نوار کناری صفحه‌ی بانک + بالای صفحه‌ی نتیجه)
   چون هر لایسنس اسپات‌پلیر از اعتبار حساب کم می‌کند، ویدیو دیگر per-question نیست؛
   یک دکمه‌ی واحد، لیست ویدیوهای این بانک را در یک مودال مشترک باز می‌کند. */
.mep-video-answer-box{margin:14px 0}
/* v1.18.41 — همون مشکل دکمه‌های داخل مودال: این دکمه هم فقط یک کلاس ساده داشت
   و بدون !important، استایل پیش‌فرض (صورتی) دکمه‌های قالب سایت روی رنگ/سایه‌اش
   غالب می‌شد. اضافه کردن !important تا همیشه دقیقاً همین گرادیانِ بنفشِ پلاگین
   نمایش داده شود، فارغ از استایل قالب. */
.mep-btn-video-answer{display:flex !important;align-items:center !important;justify-content:center !important;gap:8px;width:100%;background:linear-gradient(135deg,#4f46e5,#6366f1) !important;color:#fff !important;border:none !important;border-radius:12px !important;padding:13px 16px;font-size:.92rem;font-weight:800;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 10px 24px rgba(79,70,229,.25) !important;font-family:var(--mep-font,inherit)}
.mep-btn-video-answer:hover,
.mep-btn-video-answer:focus-visible{transform:translateY(-1px);box-shadow:0 14px 30px rgba(79,70,229,.32) !important;color:#fff !important}
.mep-video-answer-box-result{max-width:420px;margin:20px auto 28px}

/* v1.20.11 — در تبلت/موبایل (همان بریک‌پوینت خط ۱۲۸۹ که نوار کناری را به بالای
   سؤال‌ها منتقل می‌کند)، دکمه‌ی «پاسخ ویدیویی» صفحه‌ی بانک سؤال (نه صفحه‌ی نتیجه)
   به‌جای اینکه همراه نوار کناری اسکرول شود و از دید خارج شود، با position:fixed
   به بالای صفحه می‌چسبد تا حین اسکرول در فهرست بلند سؤال‌ها همیشه در دسترس
   بماند. position:sticky ساده اینجا کافی نبود چون دامنه‌ی چسبیدنش به ارتفاع
   کوتاهِ خودِ نوار کناری محدود می‌ماند و با عبور از آن (یعنی همان‌جایی که
   اهمیت دارد، وسط فهرست سؤال‌ها) از صفحه خارج می‌شد. کلاس mep-has-video-answer
   روی mep-exam-wrapper — که فقط وقتی این دکمه واقعاً رندر شده اضافه می‌شود —
   فضای بالای صفحه را رزرو می‌کند تا نوار ثابت روی هدر/پیشرفت را نپوشاند. */
@media (max-width: 768px) {
    .mep-exam-wrapper.mep-has-video-answer {
        padding-top: calc(84px + env(safe-area-inset-top, 0px));
    }

    .mep-exam-wrapper .mep-video-answer-box:not(.mep-video-answer-box-result) {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 500;
        margin: 0;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
        background: var(--mep-body-bg, #fff);
        border-bottom: 1px solid var(--mep-border, #e5e7eb);
        box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
    }

    .mep-exam-wrapper .mep-video-answer-box:not(.mep-video-answer-box-result) .mep-btn-video-answer {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* مودال «دوره‌های پاسخ» — همان الگوی مودال پاسخ سؤال، با دو حالت داخلی: لیست ویدیوها / پخش‌کننده */
body.mep-answer-modal-open{overflow:hidden}
.mep-videos-modal[hidden]{display:none!important}
.mep-videos-modal{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:24px;direction:rtl}
.mep-videos-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.68);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mep-videos-modal-dialog{position:relative;z-index:1;width:min(680px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;background:var(--mep-body-bg,#fff);border:1px solid var(--mep-border,#e5e7eb);border-radius:20px;box-shadow:0 24px 80px rgba(15,23,42,.24);outline:none;animation:mepAnswerModalIn .2s ease-out}
.mep-videos-modal-header{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--mep-border,#e5e7eb);background:var(--mep-card-bg,#fff);flex:0 0 auto}
.mep-videos-modal-header h2{margin:2px 0 0;font-size:1.08rem;line-height:1.5;color:var(--mep-heading,#0f172a)}
.mep-videos-modal-eyebrow{display:block;font-size:.72rem;color:var(--mep-primary,#6366f1);font-weight:800}
/* v1.18.40 — این دو دکمه (مثل .mep-copy-btn در بالای همین فایل) داخل مودال تزریق
   می‌شوند و چون فقط یک کلاس ساده دارند (بدون .mep-btn پایه)، استایل پیش‌فرض
   دکمه‌های قالب سایت (که معمولاً بردر/رنگ صورتی دارد) با تخصیص برابر یا بالاتر
   جایگزین رنگ خنثیِ پلاگین می‌شد؛ دقیقاً همان مشکلی که در تصویر کاربر دیده
   می‌شد (باکس × با بردر و رنگ صورتیِ قالب، نه با ظاهر همسان بقیه دکمه‌های
   پلاگین). !important لازم است وگرنه استایل قالب همچنان اعمال می‌شود. */
.mep-videos-close-btn{margin-inline-start:auto;width:34px;height:34px;flex:0 0 auto;display:flex !important;align-items:center !important;justify-content:center !important;background:var(--mep-body-bg,#f3f4f6) !important;border:1px solid var(--mep-border,#e5e7eb) !important;border-radius:10px !important;font-size:1.1rem;line-height:1;color:var(--mep-text,#374151) !important;box-shadow:none !important;outline:none;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;-webkit-tap-highlight-color:transparent}
.mep-videos-close-btn:hover,
.mep-videos-close-btn:focus-visible{background:#fee2e2 !important;border-color:#fecaca !important;color:#991b1b !important}
.mep-videos-close-btn:active{transform:scale(.92)}
.mep-videos-back-btn{display:flex !important;align-items:center !important;gap:6px;flex:0 0 auto;background:var(--mep-body-bg,#f3f4f6) !important;border:1px solid var(--mep-border,#e5e7eb) !important;border-radius:10px !important;padding:8px 12px;font-size:.82rem;font-weight:700;color:var(--mep-text,#374151) !important;box-shadow:none !important;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;font-family:var(--mep-font,inherit)}
.mep-videos-back-btn:hover,
.mep-videos-back-btn:focus-visible{background:#eef2ff !important;border-color:var(--mep-primary,#6366f1) !important;color:var(--mep-primary,#6366f1) !important}
.mep-videos-modal-body{overflow:auto;padding:20px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mep-videos-list{display:flex;flex-direction:column;gap:10px}
.mep-video-list-item{display:flex !important;align-items:center;justify-content:space-between;gap:10px;width:100%;background:var(--mep-body-bg,#f9fafb) !important;border:1px solid var(--mep-border,#e5e7eb) !important;border-radius:12px !important;padding:14px 16px;font-size:.92rem;font-weight:700;color:var(--mep-heading,#0f172a) !important;box-shadow:none !important;cursor:pointer;text-align:right;transition:border-color .15s,background .15s;font-family:var(--mep-font,inherit)}
.mep-video-list-item::after{content:"▶";font-size:.78rem;color:var(--mep-primary,#6366f1);flex:0 0 auto}
.mep-video-list-item:hover,
.mep-video-list-item:focus-visible{border-color:var(--mep-primary,#6366f1) !important;background:#eef2ff !important}
/* پخش‌کننده‌ی SpotPlayer داخل مودال — یک <div> معمولی و محدود به همین باکس،
   دقیقاً طبق مستندات رسمی (spotplayer.ir/help/api/web)؛ نه تمام‌صفحه، نه خارج از مودال. */
.mep-videos-player .mep-spotplayer-mount{width:100%;height:480px;min-height:480px;position:relative;background:#000;border-radius:12px;overflow:hidden}
.mep-videos-player .mep-spotplayer-mount>iframe#spotplayer{display:block;width:100%;max-width:none;height:100%;border:0}
@media (max-width:782px){
 .mep-videos-modal{padding:12px;align-items:flex-end}
 .mep-videos-modal-dialog{width:100%;max-height:92vh;border-radius:18px 18px 0 0}
 .mep-videos-modal-header{padding:15px 16px}
 .mep-videos-modal-body{padding:16px}
 .mep-videos-player .mep-spotplayer-mount{height:720px;min-height:720px}
}
@media (prefers-reduced-motion:reduce){.mep-videos-modal-dialog{animation:none}}


/* v2.2.6: manager panel tabs are fixed; no internal tab scrolling */
.academy-manager-panel .manager-tabs,.academy-manager-panel .manager-sidebar,.academy-manager-panel .academy-manager-tabs,.academy-manager-panel .academy-manager-sidebar{overflow:visible !important;height:auto !important;max-height:none !important;overflow-y:visible !important;}
@media (max-width:782px){.academy-manager-panel .manager-tabs,.academy-manager-panel .manager-sidebar,.academy-manager-panel .academy-manager-tabs,.academy-manager-panel .academy-manager-sidebar{overflow:visible !important;max-height:none !important;}}