/* ==========================================================================
   Article Content — طراحی محتوای مقالات فیتیتو
   ----------------------------------------------------------------------------
   این فایل هم در صفحه‌ی مقاله (frontend/blog/single) و هم داخل ادیتور CKEditor
   پنل ادمین لود می‌شود (bodyClass: article-body) تا نویسنده همان طراحی نهایی
   را هنگام نوشتن ببیند. همه‌ی قاعده‌ها زیر .article-body هستند.

   بلوک‌ها (از منوی «بلوک‌های مقاله» در ادیتور درج می‌شوند):
     .ab-callout.ab-callout--{tip|info|success|warning|note}   کادر نکته
     .ab-steps                                                   گام‌به‌گام
     .ab-mistakes                                                اشتباهات رایج
     .ab-summary                                                 خلاصه پایان مقاله
   کلاس‌های قدیمی وردپرس (my-attention*) و کلاس‌های FIT-455 (.highlight و ...)
   هم به همین طراحی‌ها وصل شده‌اند تا مقالات قبلی بدون ویرایش به‌روز شوند.
   ========================================================================== */

.article-body {
    /* رنگ‌های برند (همان --color-home-base-* در tailwind) */
    --ab-brand: #df0a0a;
    --ab-brand-2: #00008b;

    --ab-ink: #0b1437;
    --ab-text: #374151;
    --ab-muted: #5b6474;
    --ab-line: #e5e7eb;
    --ab-soft: #f7f8fc;
    --ab-link: #1b2fb3;

    --ab-radius: 18px;

    /* آیکون‌ها به‌صورت mask تا رنگشان از CSS بیاید */
    --ab-i-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/%3E%3C/svg%3E");
    --ab-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
    --ab-i-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --ab-i-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --ab-i-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
    --ab-i-steps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M4 6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h13a2 2 0 0 0 1.152-.365l3.424-2.317a1 1 0 0 0 0-1.635l-3.424-2.318A2 2 0 0 0 17 6z'/%3E%3C/svg%3E");
    --ab-i-mistake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
    --ab-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    --ab-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --ab-i-summary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
    --ab-i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 11H6.2c.3-2.3 1.7-3.7 4-4.2L9.5 5C6 5.7 4 8.4 4 12.2V19h6zm10 0h-3.8c.3-2.3 1.7-3.7 4-4.2L19.5 5C16 5.7 14 8.4 14 12.2V19h6z'/%3E%3C/svg%3E");
    --ab-i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");

    color: var(--ab-text);
    font-family: "Vazirmatn RD FD", IRANSans, Tahoma, sans-serif;
    font-size: 16px;
    line-height: 2.05;
    overflow-wrap: break-word;
}

/* resources/css/font.css روی همه‌ی عناصر («*») فونت IRANSans می‌گذارد؛ پس فونت باید روی
   فرزندان هم صریحاً تنظیم شود، نه فقط روی والد */
.article-body * {
    font-family: inherit;
}

/* محتوای کپی‌شده از Word فونت را inline می‌آورد (بیش از ۳۵۰۰ مورد 'B Nazanin' که روی
   اکثر دستگاه‌ها نصب نیست). فقط همین عناصر اجباراً به فونت مقاله برمی‌گردند. */
.article-body [style*="font-family"] {
    font-family: inherit !important;
}

/* اندازه‌ی inline داخل تیترها (مثل span با 18pt از Word) طراحی تیتر را به هم نمی‌زند */
.article-body :is(h1, h2, h3, h4) [style*="font-size"] {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* متن کپی‌شده از Word اندازه‌ی inline به pt دارد (بیش از ۳۶۰۰ مورد 18pt/16pt، یعنی ۲۴ و ۲۱ پیکسل)
   و اندازه‌ی متن مقاله را نادیده می‌گرفت. اندازه‌ی px ابزار Size ادیتور دست نمی‌خورد. */
.article-body [style*="font-size"][style*="pt"] {
    font-size: inherit !important;
}

/* داخل ادیتور CKEditor همین کلاس روی body است */
.article-body.cke_editable {
    background: #ffffff;
    margin: 0;
    padding: 24px 32px 48px;
}

/* ==========================================================================
   تیترها
   سطح اول بخش‌ها «نوار بخش» می‌گیرند و سطح دوم «تیتر فرعی».
   - مقالات قدیمی: بخش‌ها h2 هستند و زیربخش‌ها h3.
   - مقالات جدید ادیتور: بخش‌ها h1 هستند و موارد شماره‌دار h2
     (کلاس article-body--h1-sections از سمت سرور اضافه می‌شود).
   همه‌ی تیترها هم‌اندازه‌ی متن (۱۶px) هستند و فقط با وزن، نوار رنگی و پس‌زمینه متمایز می‌شوند.
   ========================================================================== */

.article-body h1,
.article-body h2 {
    background: linear-gradient(to left, rgba(223, 10, 10, 0.08), rgba(0, 0, 139, 0.035) 55%, rgba(0, 0, 139, 0) 100%);
    border-radius: 16px;
    color: var(--ab-ink);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.6;
    margin: 3rem 0 1.35rem;
    padding: 0.7em 1.15em 0.7em 0.9em;
    position: relative;
    scroll-margin-top: 100px;
}

/* نوار رنگی سمت راست تیتر بخش */
.article-body h1::before,
.article-body h2::before {
    background: linear-gradient(to bottom, var(--ab-brand), var(--ab-brand-2));
    border-radius: 999px;
    bottom: 0.55em;
    content: "";
    position: absolute;
    right: 0.45em;
    top: 0.55em;
    width: 5px;
}

/* تیتر فرعی: موارد شماره‌دار زیر بخش‌های h1 */
.article-body--h1-sections h2 {
    background: none;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to left, rgba(223, 10, 10, 0.55), rgba(0, 0, 139, 0.15) 45%, transparent 80%) 1;
    border-radius: 0;
    font-size: 16px;
    font-weight: 800;
    margin: 2.2rem 0 1rem;
    padding: 0 1.25em 0.45em 0;
}

.article-body--h1-sections h2::before {
    border-radius: 3px;
    bottom: auto;
    height: 0.6em;
    right: 0;
    top: 0.5em;
    transform: rotate(45deg);
    width: 0.6em;
}

.article-body h3 {
    color: var(--ab-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
    margin: 2rem 0 0.85rem;
    padding-right: 1.1em;
    position: relative;
    scroll-margin-top: 100px;
}

.article-body h3::before {
    background: var(--ab-brand);
    border-radius: 3px;
    content: "";
    height: 0.45em;
    position: absolute;
    right: 0.1em;
    top: 0.62em;
    width: 0.45em;
}

.article-body h4 {
    color: var(--ab-ink);
    font-size: 16px;
    font-weight: 800;
    margin: 1.5rem 0 0.6rem;
}

/* ==========================================================================
   متن پایه
   ========================================================================== */

.article-body p {
    margin: 0 0 1.35rem;
}

.article-body a {
    border-bottom: 1px dashed currentColor;
    color: var(--ab-link);
    font-weight: 600;
    text-decoration: none;
}

.article-body a:hover {
    border-bottom-style: solid;
}

.article-body strong,
.article-body b {
    color: var(--ab-ink);
    font-weight: 800;
}

.article-body img {
    border-radius: 1.25rem;
    height: auto;
    margin: 1.5rem 0;
    max-width: 100%;
}

.article-body figure {
    margin: 1.75rem 0;
}

.article-body figcaption {
    color: var(--ab-muted);
    font-size: 0.85em;
    margin-top: -0.75rem;
    text-align: center;
}

.article-body hr {
    background: linear-gradient(to left, transparent, var(--ab-line), transparent);
    border: 0;
    height: 1px;
    margin: 2.5rem 0;
}

/* ---- فهرست‌ها ---- */

/* محتوای CKEditor گاهی list-style را به‌صورت inline (style="list-style-type: disc")
   یا با ::marker پیش‌فرض روی ul/li ست می‌کند که specificity بالاتری از قانون ساده دارد،
   بنابراین همه‌جا با !important صفر می‌شود تا فقط دایره‌ی قرمز سفارشی دیده شود. */
.article-body ul,
.article-body ul li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
}

.article-body ul li::marker {
    content: "" !important;
}

.article-body ul {
    padding-right: 0; /* چون دیگه به فضای پیش‌فرض بولت نیازی نیست */
}

.article-body ul li {
    position: relative;
    padding-right: 1.5rem; /* فضا برای دایره قرمز خودتون */
}

.article-body ul li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444; /* دایره قرمز */
}

.article-body ol {
    counter-reset: ab-ol;
    list-style: none !important;
    list-style-type: none !important;
    margin: 1.4rem 0;
    padding: 0;
}

.article-body ol > li {
    counter-increment: ab-ol;
    margin-bottom: 0.9rem;
    padding-right: 2.7rem;
    position: relative;
}

.article-body ol > li::marker {
    content: "" !important;
}

.article-body ol > li::before {
    align-items: center;
    background: var(--ab-brand-2);
    border-radius: 50%;
    color: #ffffff;
    content: counter(ab-ol);
    display: flex;
    font-size: 0.8rem;
    font-weight: 800;
    height: 1.75rem;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 0;
    top: 0.3em;
    width: 1.75rem;
}

/* ---- جدول ---- */

/* اسکریپت صفحه‌ی مقاله هر جدول را در .table-scroll می‌پیچد تا در موبایل افقی اسکرول شود */
.article-body .table-scroll {
    border-radius: 1rem;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.08);
    margin: 2rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.article-body .table-scroll table {
    margin: 0 !important;
    min-width: 560px;
}

.article-body table {
    border-collapse: collapse;
    width: 100%;
}

.article-body thead th,
.article-body table tr:first-child th {
    background: linear-gradient(135deg, var(--ab-brand-2), #1f2c8f);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    padding: 0.9rem 1rem;
    text-align: right;
}

.article-body td {
    border-bottom: 1px solid #eef0f5;
    font-size: 0.92rem;
    padding: 0.85rem 1rem;
}

.article-body tbody tr:nth-child(even) {
    background: #f8fafc;
}

/* ---- نقل قول (از جمله wp-block-quote مقالات قدیمی) ---- */

.article-body blockquote {
    background: var(--ab-soft);
    border: 1px solid #e8eaf3;
    border-radius: var(--ab-radius);
    color: var(--ab-ink);
    font-weight: 600;
    margin: 2rem 0;
    padding: 1.3rem 3.6rem 1.3rem 1.4rem;
    position: relative;
}

.article-body blockquote::before {
    background: var(--ab-brand-2);
    content: "";
    height: 1.6rem;
    -webkit-mask: var(--ab-i-quote) center / contain no-repeat;
    mask: var(--ab-i-quote) center / contain no-repeat;
    opacity: 0.2;
    position: absolute;
    right: 1.15rem;
    top: 1.2rem;
    width: 1.6rem;
}

.article-body blockquote p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   کادر نکته — ۵ طرح
   <div class="ab-callout ab-callout--tip">
       <p class="ab-callout__title">نکته مهم</p>
       <p>متن</p>
   </div>
   ========================================================================== */

.article-body .ab-callout,
.article-body .my-attention,
.article-body .my-attention1,
.article-body .my-attention2,
.article-body .my-attention3,
.article-body .highlight,
.article-body .warning,
.article-body .answer-box,
.article-body .glance {
    --c-accent: #1d4ed8;
    --c-bg: #eef4ff;
    --c-border: #cddcff;
    --c-icon: var(--ab-i-info);

    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--ab-radius);
    color: var(--ab-ink);
    margin: 2rem 0;
    padding: 1.15rem 4.4rem 1.15rem 1.35rem;
    position: relative;
}

/* نشان آیکون گوشه‌ی راست بالا */
.article-body .ab-callout::before,
.article-body .my-attention::before,
.article-body .my-attention1::before,
.article-body .my-attention2::before,
.article-body .my-attention3::before,
.article-body .highlight::before,
.article-body .warning::before,
.article-body .answer-box::before,
.article-body .glance::before {
    background: var(--c-accent);
    content: "";
    /* روی blockquote قدیمی، شفافیت آیکون نقل‌قول به ارث نرسد */
    opacity: 1;
    z-index: 1;
    height: 1.35rem;
    -webkit-mask: var(--c-icon) center / contain no-repeat;
    mask: var(--c-icon) center / contain no-repeat;
    position: absolute;
    right: 1.3rem;
    top: 1.2rem;
    width: 1.35rem;
}

/* پس‌زمینه‌ی دایره‌ای پشت آیکون */
.article-body .ab-callout::after,
.article-body .my-attention::after,
.article-body .my-attention1::after,
.article-body .my-attention2::after,
.article-body .my-attention3::after,
.article-body .highlight::after,
.article-body .warning::after,
.article-body .answer-box::after,
.article-body .glance::after {
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    content: "";
    height: 2.35rem;
    position: absolute;
    right: 0.8rem;
    top: 0.7rem;
    width: 2.35rem;
    z-index: 0;
}


.article-body .ab-callout__title,
.article-body .highlight > h4,
.article-body .warning > h4,
.article-body .answer-box > h4,
.article-body .glance > h4 {
    color: var(--c-accent);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.8;
    margin: 0 0 0.25rem;
}

.article-body .ab-callout > :last-child,
.article-body [class*="my-attention"] > :last-child,
.article-body .highlight > :last-child,
.article-body .warning > :last-child,
.article-body .answer-box > :last-child,
.article-body .glance > :last-child {
    margin-bottom: 0;
}

/* پاراگراف‌های قدیمی my-attention خودشان کادر هستند و عنوان ندارند */
.article-body p[class*="my-attention"] {
    min-height: 3.5rem;
}

.article-body blockquote[class*="my-attention"] {
    font-weight: 400;
}

/* نکته مهم — کهربایی */
.article-body .ab-callout--tip,
.article-body .my-attention1,
.article-body .glance {
    --c-accent: #b45309;
    --c-bg: #fff8eb;
    --c-border: #f8dfae;
    --c-icon: var(--ab-i-tip);
}

/* بیشتر بدانید — آبی */
.article-body .ab-callout--info,
.article-body .my-attention,
.article-body .highlight {
    --c-accent: #1d4ed8;
    --c-bg: #eef4ff;
    --c-border: #cddcff;
    --c-icon: var(--ab-i-info);
}

/* توصیه — سبز */
.article-body .ab-callout--success,
.article-body .my-attention2,
.article-body .answer-box {
    --c-accent: #047857;
    --c-bg: #ecfbf4;
    --c-border: #b5ebd2;
    --c-icon: var(--ab-i-success);
}

/* هشدار — قرمز */
.article-body .ab-callout--warning,
.article-body .warning {
    --c-accent: #b91c1c;
    --c-bg: #fff2f2;
    --c-border: #fbcfcf;
    --c-icon: var(--ab-i-warning);
}

/* یادداشت — سرمه‌ای برند */
.article-body .ab-callout--note,
.article-body .my-attention3 {
    --c-accent: #1e2a8a;
    --c-bg: #f2f3fb;
    --c-border: #d9dcf1;
    --c-icon: var(--ab-i-note);
}

/* فهرست داخل کادر نکته */
.article-body .ab-callout ul > li::before,
.article-body [class*="my-attention"] ul > li::before {
    background: var(--c-accent);
}

.article-body ul[class*="my-attention"] > li::before {
    background: var(--c-accent);
}

/* ==========================================================================
   گام‌به‌گام
   <div class="ab-steps">
       <p class="ab-steps__title">چطور ...؟</p>
       <ol>
           <li><strong>عنوان گام</strong> توضیح کوتاه</li>
       </ol>
   </div>
   ========================================================================== */

.article-body .ab-steps {
    background: linear-gradient(160deg, #f7f8fd, #ffffff 70%);
    border: 1px solid #e6e8f4;
    border-radius: 24px;
    margin: 2.5rem 0;
    padding: 1.4rem 1.4rem 1.6rem;
}

.article-body .ab-steps__title {
    align-items: center;
    color: var(--ab-ink);
    display: flex;
    font-size: 16px;
    font-weight: 900;
    gap: 0.6rem;
    line-height: 1.7;
    margin: 0 0 1.2rem;
}

.article-body .ab-steps__title::before {
    background: var(--ab-brand);
    content: "";
    flex: 0 0 auto;
    height: 1.4rem;
    -webkit-mask: var(--ab-i-steps) center / contain no-repeat;
    mask: var(--ab-i-steps) center / contain no-repeat;
    width: 1.4rem;
}

.article-body .ab-steps ol,
.article-body ol.steps {
    counter-reset: ab-step;
    margin: 0;
}

.article-body .ab-steps ol > li,
.article-body ol.steps > li {
    background: #ffffff;
    border: 1px solid #e6e8f4;
    border-radius: 18px;
    box-shadow: 0 6px 18px -12px rgba(11, 20, 55, 0.25);
    counter-increment: ab-step;
    margin: 0 0 2.6rem;
    min-height: 4.6rem;
    padding: 1rem 5.4rem 1rem 1.2rem;
    position: relative;
}

.article-body .ab-steps ol > li:last-child,
.article-body ol.steps > li:last-child {
    margin-bottom: 0;
}

/* شماره‌ی بزرگ ۰۱، ۰۲ ... */
.article-body .ab-steps ol > li::before,
.article-body ol.steps > li::before {
    align-items: center;
    background: linear-gradient(135deg, var(--ab-brand), #b3002d 45%, var(--ab-brand-2));
    border: 0;
    border-radius: 14px;
    box-shadow: 0 8px 18px -8px rgba(223, 10, 10, 0.55);
    color: #ffffff;
    content: counter(ab-step, decimal-leading-zero);
    display: flex;
    font-size: 16px;
    font-weight: 900;
    height: 3rem;
    justify-content: center;
    letter-spacing: 0.02em;
    right: 1rem;
    top: 0.95rem;
    width: 3rem;
}

/* پیکان ↓ بین دو گام */
.article-body .ab-steps ol > li:not(:last-child)::after,
.article-body ol.steps > li:not(:last-child)::after {
    background: var(--ab-brand-2);
    bottom: -2.05rem;
    content: "";
    height: 1.45rem;
    left: 50%;
    -webkit-mask: var(--ab-i-down) center / contain no-repeat;
    mask: var(--ab-i-down) center / contain no-repeat;
    opacity: 0.55;
    position: absolute;
    transform: translateX(-50%);
    width: 1.45rem;
}

.article-body .ab-steps ol > li > strong:first-child,
.article-body ol.steps > li > strong:first-child {
    color: var(--ab-ink);
    display: block;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}

/* ==========================================================================
   اشتباهات رایج
   <div class="ab-mistakes">
       <p class="ab-mistakes__title">۵ اشتباه رایج</p>
       <ol>
           <li><strong>عنوان اشتباه</strong> توضیح اختیاری</li>
       </ol>
   </div>
   ========================================================================== */

.article-body .ab-mistakes {
    background: #ffffff;
    border: 1px solid #f6d2d2;
    border-radius: 24px;
    box-shadow: 0 12px 30px -22px rgba(185, 28, 28, 0.45);
    margin: 2.5rem 0;
    overflow: hidden;
}

.article-body .ab-mistakes__title {
    align-items: center;
    background: linear-gradient(to left, #fff1f1, #fff8f8);
    border-bottom: 1px solid #f6d2d2;
    color: #991b1b;
    display: flex;
    font-size: 16px;
    font-weight: 900;
    gap: 0.6rem;
    line-height: 1.7;
    margin: 0;
    padding: 1rem 1.3rem;
}

.article-body .ab-mistakes__title::before {
    background: #dc2626;
    content: "";
    flex: 0 0 auto;
    height: 1.45rem;
    -webkit-mask: var(--ab-i-mistake) center / contain no-repeat;
    mask: var(--ab-i-mistake) center / contain no-repeat;
    width: 1.45rem;
}

.article-body .ab-mistakes ol {
    counter-reset: ab-mistake;
    margin: 0;
    padding: 0.4rem 1.3rem 0.6rem;
}

.article-body .ab-mistakes ol > li {
    border-bottom: 1px dashed #f1dada;
    counter-increment: ab-mistake;
    margin: 0;
    padding: 0.95rem 5.4rem 0.95rem 0;
    position: relative;
}

.article-body .ab-mistakes ol > li:last-child {
    border-bottom: 0;
}

/* برچسب «اشتباه ۱» */
.article-body .ab-mistakes ol > li::before {
    background: #fdecec;
    border: 1px solid #f7c9c9;
    border-radius: 999px;
    color: #b91c1c;
    content: "اشتباه " counter(ab-mistake);
    font-size: 0.78rem;
    font-weight: 800;
    height: auto;
    line-height: 1.9;
    padding: 0 0.75rem;
    right: 0;
    top: 1.05rem;
    width: auto;
}

.article-body .ab-mistakes ol > li > strong:first-child {
    color: var(--ab-ink);
    display: block;
    font-weight: 800;
    line-height: 1.8;
}

/* ==========================================================================
   خلاصه پایان مقاله
   (از فیلد «خلاصه پایانی» پنل ادمین ساخته می‌شود)
   ========================================================================== */

.article-body .ab-summary {
    background: radial-gradient(circle at 12% 0%, rgba(223, 10, 10, 0.35), transparent 45%),
    linear-gradient(145deg, #0b1437, #13206b 60%, #00008b);
    border-radius: 28px;
    box-shadow: 0 24px 48px -28px rgba(0, 0, 139, 0.75);
    color: #e7eaff;
    margin: 3rem 0 1rem;
    overflow: hidden;
    padding: 1.6rem 1.6rem 1.8rem;
    position: relative;
}

.article-body .ab-summary__head {
    align-items: center;
    display: flex;
    gap: 0.9rem;
    margin-bottom: 1.2rem;
}

.article-body .ab-summary__icon {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    flex: 0 0 auto;
    height: 3rem;
    position: relative;
    width: 3rem;
}

.article-body .ab-summary__icon::before {
    background: #ffffff;
    content: "";
    inset: 0.7rem;
    -webkit-mask: var(--ab-i-summary) center / contain no-repeat;
    mask: var(--ab-i-summary) center / contain no-repeat;
    position: absolute;
}

.article-body .ab-summary__eyebrow {
    color: #ffb3b3;
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.6;
}

.article-body .ab-summary__title {
    background: none;
    border: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.article-body .ab-summary__title::before {
    display: none;
}

.article-body .ab-summary ol {
    counter-reset: ab-sum;
    display: grid;
    gap: 0.6rem;
    margin: 0;
}

.article-body .ab-summary ol > li {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: #f1f3ff;
    counter-increment: ab-sum;
    font-weight: 600;
    line-height: 1.9;
    margin: 0;
    padding: 0.75rem 3.6rem 0.75rem 1rem;
}

.article-body .ab-summary ol > li::before {
    background: var(--ab-brand);
    border-radius: 10px;
    box-shadow: 0 6px 14px -6px rgba(223, 10, 10, 0.8);
    color: #ffffff;
    content: counter(ab-sum);
    font-size: 0.85rem;
    height: 1.9rem;
    right: 0.8rem;
    top: 0.7rem;
    width: 1.9rem;
}

/* ==========================================================================
   اجزای FIT-455 که قبلاً تعریف شده بودند
   ========================================================================== */

.article-body .big-quote {
    background: var(--ab-soft);
    border: 2px solid #e8eaf3;
    border-radius: 2rem;
    margin: 2.5rem 0;
    overflow: hidden;
    padding: 2.5rem 2rem;
    position: relative;
    text-align: center;
}

.article-body .big-quote p {
    color: var(--ab-ink);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    position: relative;
}

.article-body ul.checklist {
    background: #ffffff;
    border: 2px solid var(--ab-line);
    border-radius: 1.5rem;
    padding: 1.25rem;
}

.article-body ul.checklist > li {
    align-items: center;
    border-radius: 0.75rem;
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    margin: 0 0 0.4rem;
    padding: 0.7rem 1rem;
}

.article-body ul.checklist > li::before {
    display: none;
}

.article-body ul.checklist > li.checked {
    background: #f0fdf4;
}

.article-body ul.checklist > li.checked .checklist-text {
    color: #9ca3af;
    text-decoration: line-through;
}

.article-body ul.checklist .checklist-box {
    align-items: center;
    border: 2px solid #d1d5db;
    border-radius: 0.45rem;
    display: flex;
    flex-shrink: 0;
    height: 1.4rem;
    justify-content: center;
    width: 1.4rem;
}

.article-body ul.checklist > li.checked .checklist-box {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.article-body .cta-box {
    background: linear-gradient(135deg, var(--ab-brand), var(--ab-brand-2));
    border-radius: 2rem;
    color: #ffffff;
    margin: 2.5rem 0;
    padding: 2.5rem 2rem;
    text-align: center;
}

.article-body .cta-box h3 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 0.75rem;
    padding: 0;
}

.article-body .cta-box h3::before {
    display: none;
}

.article-body .cta-box p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.25rem;
}

.article-body .cta-box a {
    background: #ffffff;
    border-bottom: none;
    border-radius: 1rem;
    color: var(--ab-brand);
    display: inline-flex;
    font-weight: 900;
    padding: 0.8rem 1.75rem;
}

/* ==========================================================================
   موبایل
   ========================================================================== */

@media (max-width: 575.98px) {
    .article-body h1,
    .article-body h2 {
        padding-right: 1.05em;
    }

    .article-body .ab-callout,
    .article-body [class*="my-attention"],
    .article-body .highlight,
    .article-body .warning,
    .article-body .answer-box,
    .article-body .glance {
        padding: 3.7rem 1.1rem 1.1rem;
    }

    .article-body .ab-steps {
        padding: 1.1rem 0.9rem 1.2rem;
    }

    .article-body .ab-steps ol > li,
    .article-body ol.steps > li {
        padding: 4.3rem 1rem 1rem;
    }

    .article-body .ab-mistakes ol {
        padding: 0.3rem 1rem 0.5rem;
    }

    .article-body .ab-mistakes ol > li {
        padding: 2.9rem 0 0.9rem;
    }

    .article-body .ab-summary {
        border-radius: 22px;
        padding: 1.3rem 1.1rem 1.4rem;
    }
}