/* ===================================================================
   content-import.css — استایل متن کامل مقالات و صفحات خدمات (full-content)
   هماهنگ با تم سایت (متغیرهای CSS موجود)، RTL و واکنش‌گرا.
   =================================================================== */

.article-body {
    font-family: var(--font-fa);
    color: var(--color-text);
    line-height: 2.05;
    font-size: 1.02rem;
    direction: rtl;
    text-align: right;
    word-break: break-word;
}

/* تیترها */
.article-body h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--color-text);
    margin: 2.1rem 0 0.9rem;
    padding-inline-start: 0.7rem;
    border-inline-start: 4px solid var(--color-accent);
}
.article-body h3 {
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--color-accent-bright, var(--color-accent));
    margin: 1.5rem 0 0.7rem;
}
.article-body h4 {
    font-size: 1.06rem;
    color: var(--color-text);
    margin: 1.2rem 0 0.6rem;
}

/* پاراگراف و فهرست‌ها */
.article-body p { margin: 0 0 1.05rem; }
.article-body ul,
.article-body ol { margin: 0 0 1.15rem; padding-inline-start: 1.5rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body ul { list-style: none; padding-inline-start: 0; }
.article-body ul > li {
    position: relative;
    padding-inline-start: 1.5rem;
}
.article-body ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.15rem;
    top: 0.85em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-gold);
}
.article-body ol { list-style: decimal; padding-inline-start: 1.6rem; }
.article-body ol > li { padding-inline-start: 0.3rem; }

.article-body strong, .article-body b { color: var(--color-text); font-weight: 700; }

/* لینک‌های داخل متن */
.article-body a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--color-accent-glow, var(--color-accent));
    transition: color .2s, border-color .2s;
}
.article-body a:hover {
    color: var(--color-accent-bright, var(--color-accent));
    border-bottom-color: var(--color-accent);
}

/* نقل‌قول */
.article-body blockquote {
    margin: 1.4rem 0;
    padding: 1rem 1.2rem;
    border-inline-start: 4px solid var(--color-gold);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 1.02rem;
}

/* لید (مقدمه‌ی برجسته) */
.article-body .article-lede {
    font-size: 1.12rem;
    line-height: 1.95;
    color: var(--color-text-muted);
    padding: 0.2rem 0 1rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--color-border);
}

/* ===================== باکس‌های تأکیدی ===================== */
.article-body .content-box {
    position: relative;
    margin: 1.5rem 0;
    padding: 1.1rem 1.25rem 1.1rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-accent);
    background: var(--color-surface-2);
}
.article-body .content-box > :first-child { margin-top: 0; }
.article-body .content-box > :last-child { margin-bottom: 0; }
.article-body .content-box h3,
.article-body .content-box h4 {
    margin-top: 0;
    margin-bottom: 0.6rem;
    color: var(--color-text);
}

/* اطلاع‌رسانی / نکته‌ی عمومی — فیروزه‌ای برند */
.article-body .content-box--info {
    border-inline-start-color: var(--color-accent);
    background: var(--color-accent-soft);
}
/* نکته‌ی مهم — طلایی برند */
.article-body .content-box--note {
    border-inline-start-color: var(--color-gold);
    background: var(--color-gold-soft);
}
.article-body .content-box--note h3,
.article-body .content-box--note h4 { color: var(--color-gold); }

/* هشدار پزشکی — زرشکی ملایم هماهنگ با تم */
.article-body .content-box--warn {
    border-inline-start-color: #C2564E;
    background: rgba(194, 86, 78, 0.10);
}
.article-body .content-box--warn h3,
.article-body .content-box--warn h4 { color: #C2564E; }
.article-body .content-box--warn::before {
    content: "\26A0";
    position: absolute;
    inset-inline-end: 1rem;
    top: 0.9rem;
    font-size: 1.1rem;
    color: #C2564E;
    opacity: 0.8;
}

/* یادداشت پزشک — فیروزه‌ای عمیق، ایتالیک */
.article-body .content-box--doc {
    border-inline-start-color: var(--color-accent-deep, var(--color-accent));
    background: var(--color-accent-soft);
    font-style: italic;
}
.article-body .content-box--doc p { font-style: italic; }

/* سلب مسئولیت / توضیح آموزشی — خاکستری ملایم و کوچک‌تر */
.article-body .content-box--disc {
    border-inline-start-color: var(--color-text-soft);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

/* ===================== جدول‌ها ===================== */
.article-body .table-wrap {
    margin: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.article-body table,
.article-body .imported-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
    font-size: 0.96rem;
    text-align: right;
}
.article-body th,
.article-body td {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    vertical-align: top;
    line-height: 1.7;
}
.article-body thead th {
    background: var(--color-accent-soft);
    color: var(--color-text);
    font-weight: 700;
    border-bottom: 2px solid var(--color-accent);
    white-space: nowrap;
}
.article-body tbody tr:nth-child(even) { background: var(--color-surface-2); }
.article-body caption {
    caption-side: top;
    padding: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    text-align: right;
}

/* ===================== منابع علمی (Vancouver) ===================== */
.article-body .refs {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.9;
}
.article-body .refs h2,
.article-body .refs h3 { font-size: 1.15rem; border: 0; padding: 0; }
.article-body .refs ol { padding-inline-start: 1.4rem; }
.article-body .refs a { word-break: break-all; }

/* ===================== موبایل ===================== */
@media (max-width: 640px) {
    .article-body { font-size: 0.98rem; line-height: 1.95; }
    .article-body h2 { font-size: 1.28rem; }
    .article-body h3 { font-size: 1.1rem; }
    .article-body table,
    .article-body .imported-table { min-width: 460px; }
    .article-body .content-box { padding: 0.95rem 1rem; }
}

/* ===================================================================
   بخش‌های صفحه‌ی بلاگ — پربازدیدترین، عنوان بخش، شمارنده، صفحه‌بندی
   (با استفاده از کارت‌های موجود .blog-card، فقط افزودنی‌های لازم)
   =================================================================== */
.section--tight { padding-bottom: 0.5rem; }

.blog-section-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
}
.blog-section-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.blog-section-title i { color: var(--color-gold); font-size: 1.25rem; }

/* شمارنده‌ی بازدید روی کارت */
.blog-meta .blog-views {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-accent);
}
.blog-meta .blog-views i { font-size: 0.95em; }

/* گرید پربازدید — همان کارت‌های بلاگ، فقط برای تأکید کمی متمایز */
.blog-grid--popular .blog-card {
    border-color: var(--color-border-glow, var(--color-border));
}

/* صفحه‌بندی */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.4rem;
}
.pagination__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 42px;
    height: 42px;
    padding: 0 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.98rem;
    justify-content: center;
    transition: background .2s, border-color .2s, color .2s;
}
.pagination__link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.pagination__link.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 700;
    cursor: default;
}

@media (max-width: 640px) {
    .blog-section-title { font-size: 1.2rem; }
    .pagination__link { min-width: 38px; height: 38px; padding: 0 0.6rem; }
}

/* ===================================================================
   اصلاح صفحه‌سفید: تضمین نمایش متن مقاله صرف‌نظر از انیمیشن اسکرول-ریویل
   متن کامل مقالات بلند بسیار بلندتر از Viewport است و IntersectionObserver
   ممکن است هرگز به آستانه نرسد؛ بنابراین .article-body همیشه قابل‌مشاهده است.
   =================================================================== */
.article-body,
.reveal.article-body,
.detail-section.article-body,
.detail-section.article-body.reveal {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ===================================================================
   حالت «فقط پوستر» برای ویدئوی مقاله (post.php) — مطابق service/device
   =================================================================== */
.article-video__poster {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    background: var(--color-surface-2, #f0ece2);
}
.article-video__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.article-video__poster .article-video__play {
    position: absolute;
    top: 50%; inset-inline-start: 50%;
    transform: translate(50%, -50%);
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(102, 157, 154, 0.92);
    color: #fff; font-size: 1.6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.article-video__poster .article-video__label {
    position: absolute;
    inset-inline-start: 0; inset-inline-end: 0; bottom: 0;
    padding: 0.7rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
    color: #fff; font-size: 0.95rem; text-align: center;
}

/* ===================================================================
   انتخاب نوع حساب در صفحه‌ی ثبت‌نام (مراجع قبلی / بازدیدکننده‌ی جدید)
   =================================================================== */
.auth-choice { display: flex; flex-direction: column; gap: 0.6rem; }
.auth-choice__item {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--color-border, #e5e0d6);
    border-radius: var(--radius-md, 14px);
    cursor: pointer; transition: border-color .2s, background .2s;
    font-size: 0.95rem; line-height: 1.7;
}
.auth-choice__item:hover { border-color: var(--color-accent, #669D9A); }
.auth-choice__item input { margin-top: 0.35rem; accent-color: var(--color-accent, #669D9A); flex: 0 0 auto; }
.auth-choice__item input:checked + span { color: var(--color-accent, #669D9A); font-weight: 600; }
.auth-choice__item span i { margin-inline-end: 0.3rem; }