/* ==========================================================================
   بام پنجم — استایل مشترک بلاگ
   ==========================================================================

   این فایل جایگزین بلوک‌های <style> پراکنده‌ای شده که قبلاً داخل تک‌تک
   تمپلیت‌های بلاگ تکرار می‌شدند. هر تمپلیت فقط همین فایل را لینک می‌کند.

   قواعدی که هنگام ویرایش باید رعایت شود:

   1) موبایل‌فرست: قواعد پایه (بدون مدیا کوئری) حالت موبایل را توصیف می‌کنند.
      بزرگ‌تر شدن صفحه فقط با @media (min-width: ...) اضافه می‌شود. هرگز از
      max-width برای «خنثی کردن» چیدمان دسکتاپ استفاده نکنید.

   2) توکن‌ها فقط یک‌جا تعریف می‌شوند: بلوک :root پایین. قبلاً شش تمپلیت
      مختلف :root خودشان را داشتند و چون همه‌شان روی یک صفحه لود می‌شدند،
      مقادیر همدیگر را بازنویسی می‌کردند.

   3) اندازه‌ی متن: فونت (Vazirmatn) را base.html برای کل سایت تعیین می‌کند؛
      این فایل فقط اندازه‌ها را دارد. اندازه‌ها با زومیت، ویرگول، دیجیاتو و
      دیجی‌کالا مگ هم‌تراز شده‌اند: متن مقاله ۱۶px با line-height ‏۲ در همه‌ی
      عرض‌ها، تیتر مقاله ۲۲ تا ۲۸px. کوچک‌ترین متن ‎.75rem‎ (۱۲px) است؛
      Vazirmatn ریزتر از آن خوانا نیست.

   نقاط شکست (هماهنگ با بوت‌استرپ):
      sm = 576px   md = 768px   lg = 992px   xl = 1200px
   ========================================================================== */


/* ==========================================================================
   ۱. توکن‌های طراحی
   ========================================================================== */

:root {
    /* رنگ اصلی */
    --primary-color: #2563eb;
    --primary-light: #eff6ff;

    /* متن
       دو تُن مشکی داریم چون تمپلیت‌های قبلی دو مقدار متفاوت استفاده می‌کردند
       و ادغام‌شان رنگ بخشی از صفحات را عوض می‌کرد. هر دو حفظ شده‌اند. */
    --text-main: #0f172a;       /* تیره‌ترین: تیتر مقاله، عنوان کارت */
    --text-dark: #0f172a;       /* هم‌ارز text-main، برای سازگاری نام‌ها */
    --text-dark-soft: #1e293b;  /* کمی روشن‌تر: هدر دسته‌بندی، نام کامنت‌گذار */
    --text-body: #334155;       /* متن بدنه‌ی مقاله */
    --text-muted: #64748b;      /* متن کم‌رنگ، متا */
    --text-gray: #64748b;       /* هم‌ارز text-muted */

    /* سطوح و حاشیه */
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-softer: #f1f5f9;
    --border-soft: #e2e8f0;
    --border-softer: #f1f5f9;

    /* گردی گوشه‌ها */
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --card-radius: 24px;   /* کارت دسته‌بندی و کارت مقاله */
    --img-radius: 20px;    /* قاب تصویر داخل کارت */
    --radius-card: 20px;   /* کارت «مقالات مرتبط» */
    --radius-comment: 16px;/* کارت کامنت — قبلاً با radius-card تداخل داشت */
    --radius-box: 24px;    /* فرم ارسال نظر */

    /* پس‌زمینه‌ی بخش کامنت‌ها */
    --bg-comment: #f8fafc;
    --bg-reply: #f1f5f9;

    /* سایه */
    --shadow-soft: 0 20px 40px -10px rgba(0, 0, 0, .06);

    /* متغیرهای بوت‌استرپ که کلاس‌های ‎*-soft‎ به آن‌ها تکیه دارند */
    --bs-primary-rgb: 13, 110, 253;
    --bs-success-rgb: 25, 135, 84;
    --bs-warning-rgb: 255, 193, 7;
}


/* ==========================================================================
   ۲. المان‌های مشترک
   ========================================================================== */

/* تیتر بخش با خط عمودی کنارش */
.section-title {
    font-weight: 800;
    letter-spacing: -.3px;
    position: relative;
    padding-right: 15px;
}

.section-title::before {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 4px;
    background-color: #212529;
    border-radius: 4px;
}

/* نسخه‌ی تیتر در بخش «مقالات مرتبط» */
.related-section-modern .section-title {
    font-size: 1.15rem;
    color: var(--text-main);
    margin-bottom: .5rem;
    letter-spacing: -.5px;
}

.hero-box {
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--card-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.soft-card {
    border: 1px solid rgba(0, 0, 0, .04);
    border-radius: var(--img-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
    transition: transform .3s ease, box-shadow .3s ease;
    overflow: hidden;
    height: 100%;
    background-color: var(--surface);
}

.card-img-wrapper {
    height: 170px;
    overflow: hidden;
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.pill-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.2rem;
    border-radius: var(--radius-sm);
    background: #f8f9fa;
    color: #212529;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, .06);
    transition: all .2s;
    font-weight: 500;
}

/* مسیر راهنما — در موبایل اجازه‌ی شکستن به خط بعد دارد */
.custom-breadcrumb {
    background: var(--surface);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid var(--border-soft);
    font-size: .8rem;
    margin-bottom: 1.5rem;
}

.custom-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: .2s;
}

.custom-breadcrumb .separator {
    margin: 0 8px;
    color: #cbd5e1;
}

.custom-breadcrumb .active {
    color: var(--primary-color);
    font-weight: 700;
}


/* ==========================================================================
   ۳. صفحه‌ی فرود (landing)
   ========================================================================== */

.hero-section {
    padding-top: 5rem;
    padding-bottom: 3rem;
    color: #fff;
    background: linear-gradient(-45deg, #4b6cb7, #182848, #243b55, #141e30);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    position: relative;
}

@keyframes gradientBG {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-section h1 {
    text-shadow: 0 4px 8px rgba(0, 0, 0, .3);
}

.hero-section .lead {
    color: rgba(255, 255, 255, .9);
}

.bazaar-badge {
    height: 54px;
    width: auto;
    max-width: 100%;
}

.hero-image-box {
    width: 100%;
    max-width: 38rem;
    margin-inline: auto;
}

.hero-app-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .4);
    transition: transform .3s ease;
}

.btn-hero-primary {
    background-color: #fff;
    color: #182848;
    transition: all .3s ease;
}

.btn-hero-secondary {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    transition: all .3s ease;
}

/* بخش ویژگی‌ها */
.features-section {
    background-color: #f8f9fa;
}

.feature-card {
    background-color: var(--surface);
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform .3s ease, box-shadow .3s ease;
    height: 100%;
}

.feature-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
}

.feature-icon {
    font-size: 3rem;
    color: var(--bs-primary);
}

.bg-primary-soft { background-color: rgba(var(--bs-primary-rgb), .1); }
.bg-success-soft { background-color: rgba(var(--bs-success-rgb), .1); }
.bg-warning-soft { background-color: rgba(var(--bs-warning-rgb), .15); }

/* بخش ویدیو — الگوی پس‌زمینه‌ی SVG
   (قبلاً به‌خاطر یک تگ HTML که اشتباهی وسط CSS چسبیده بود کار نمی‌کرد) */
.video-section {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f0f2f5' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* بخش فراخوان (CTA) */
.cta-section {
    background: linear-gradient(135deg, #0d6efd 0%, #054cb2 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 80%;
    height: 150%;
    background: rgba(255, 255, 255, .08);
    transform: rotate(25deg);
    z-index: 0;
}

.cta-content {
    position: relative;
    z-index: 1;
}

/* بخش کمپین — در موبایل عمودی می‌چیند */
.campaign-section {
    background-color: #f8f9fa;
}

.campaign-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.campaign-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    transition: all .3s ease-in-out;
    box-shadow: 0 10px 30px rgba(102, 126, 234, .3);
}

.campaign-icon {
    font-size: 2.25rem;
    margin-left: 0;
}

.campaign-content {
    flex-grow: 1;
    text-align: right;
}

.campaign-title {
    font-weight: 700;
    margin-bottom: .5rem;
}

.campaign-description {
    margin-bottom: 0;
    opacity: .9;
}

.campaign-arrow {
    font-size: 1.5rem;
    align-self: flex-end;
}


/* ==========================================================================
   ۴. صفحه‌ی «درباره‌ی ما»
   ========================================================================== */

/* در این صفحه hero-section پس‌زمینه‌ی ساده دارد، نه گرادینت متحرک */
.about-page .hero-section {
    background: #f8f9fa;
    color: inherit;
    animation: none;
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.contact-card {
    transition: transform .3s ease, box-shadow .3s ease;
}


/* ==========================================================================
   ۵. فهرست دسته‌بندی‌ها
   ========================================================================== */

.page-header-minimal {
    padding: 2.5rem 0 1.5rem;
    position: relative;
}

.page-header-minimal h1 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark-soft);
    margin-bottom: 1rem;
    letter-spacing: -.5px;
}

.page-header-minimal p {
    color: var(--text-gray);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

.category-card-modern {
    display: block;
    background: var(--surface);
    border-radius: var(--card-radius);
    padding: 12px;
    text-decoration: none;
    transition: all .4s cubic-bezier(.165, .84, .44, 1);
    border: 1px solid transparent;
    height: 100%;
}

.card-image-wrapper {
    position: relative;
    height: 180px;
    border-radius: var(--img-radius);
    overflow: hidden;
    background-color: var(--surface-softer);
}

.card-bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform .6s ease;
}

.card-placeholder-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e0e7ff 0%, #f3f4f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 3rem;
}

.article-count-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-dark-soft);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-content {
    padding: 1.25rem .5rem .5rem;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark-soft);
    margin-bottom: .75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* فلش کارت روی موبایل همیشه دیده می‌شود، چون hover وجود ندارد */
.card-arrow {
    opacity: 1;
    transform: translateX(0);
    transition: all .3s ease;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.card-desc {
    font-size: .95rem;
    color: var(--text-gray);
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   ۶. فهرست مقالات یک دسته
   ========================================================================== */

.modern-hero {
    position: relative;
    padding: 2.5rem 1.25rem;
    min-height: 200px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 2rem;
    background-color: var(--surface-soft);
}

.modern-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #eff6ff, #fff);
    z-index: 1;
}

.modern-hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.modern-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(8px);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 700px;
}

.hero-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -.5px;
}

.text-light-theme .hero-title,
.text-light-theme .hero-desc { color: #fff; }

.text-dark-theme .hero-title { color: var(--text-dark); }
.text-dark-theme .hero-desc  { color: var(--text-gray); }

.hero-desc {
    font-size: 1rem;
    line-height: 1.8;
    opacity: .9;
}

.article-card-minimal {
    display: block;
    background: var(--surface);
    border-radius: var(--card-radius);
    padding: 10px;
    text-decoration: none;
    transition: transform .4s cubic-bezier(.165, .84, .44, 1);
    height: 100%;
}

.article-img-wrapper {
    position: relative;
    border-radius: var(--img-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--surface-softer);
}

.article-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.date-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, .95);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.article-content {
    padding: 1.25rem .5rem .5rem;
}

.article-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: .75rem;
    line-height: 1.5;
    transition: color .2s;
}

.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .85rem;
    color: #94a3b8;
}

.article-meta i {
    font-size: .8rem;
    margin-left: 4px;
}


/* ==========================================================================
   ۷. لیست قیمت — صفحه‌ی فهرست و صفحه‌ی دسته
   ========================================================================== */

.price-index { padding-block: 1.5rem; }

.price-index h1 {
    font-size: clamp(1.3rem, 4vw, 1.75rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.price-index-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

.price-index-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-main);
    background: var(--surface);
}

.price-index-card strong {
    display: block;
    font-size: 1rem;
    margin-bottom: .3rem;
}

.price-index-card-text > span {
    color: var(--text-muted);
    font-size: .85rem;
}

/* آیکون دسته‌بندی کالا؛ هم‌شکل .mp-cat-icon در صفحات مینی‌پروژه */
.price-cat-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--primary-light);
    vertical-align: middle;
}

.price-cat-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.price-index-empty,
.price-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.price-empty {
    background: var(--surface-soft);
    border-radius: var(--radius-sm);
}

/* ---------- صفحه‌ی دسته: سربرگ ---------- */

.price-page { padding-block: 1rem 2rem; }

.price-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}

.price-head h1 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    font-weight: 800;
    line-height: 1.7;
    margin: 0 0 .5rem;
}

.price-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    color: var(--text-muted);
    font-size: .8rem;
}

.price-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.price-head-actions {
    display: flex;
    gap: .5rem;
}

.price-action {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text-body);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.price-action i { font-size: 1rem; }

/* دسترسی سریع: روی موبایل همبرگری همین کار را می‌کند، پس نوار چیپ‌ها از md
   به بالا اضافه می‌شود و صفحه‌ی گوشی شلوغ نمی‌شود. */
.price-quick { display: none; }


/* ---------- چیدمان: ستون فیلتر + جدول‌ها ---------- */

.price-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.price-sidebar { min-width: 0; }

.price-main { min-width: 0; }

.price-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .7rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}

.price-filter-count {
    min-width: 22px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: .75rem;
    line-height: 22px;
    text-align: center;
}


/* ---------- پنل فیلتر ---------- */

.price-filters-inner {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    width: 100%;
}

/* روی موبایل هدر خود offcanvas عنوان را نشان می‌دهد */
.price-filters-head { display: none; }

.filter-group {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.filter-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    font-size: .9rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.filter-group > summary::-webkit-details-marker { display: none; }

.filter-group > summary i {
    color: var(--text-muted);
    transition: transform .2s ease;
}

.filter-group[open] > summary i { transform: rotate(180deg); }

.filter-options {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    padding: .25rem .5rem .75rem;
    overflow-y: auto;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .5rem;
    border-radius: 8px;
    font-size: .85rem;
    cursor: pointer;
}

.filter-option input {
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.filter-option-title {
    flex: 1 1 auto;
    min-width: 0;
}

.filter-option-count {
    flex: none;
    color: var(--text-muted);
    font-size: .75rem;
}

/* مقدارهایی که زیر فیلترِ دیگر هیچ کالایی ندارند حذف نمی‌شوند، فقط کم‌رنگ
   می‌شوند؛ وگرنه لیست با هر انتخاب می‌پرد و کاربر جای خودش را گم می‌کند. */
.filter-option.is-empty,
.filter-chip.is-empty { opacity: .45; }

.filter-options-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .5rem .75rem .9rem;
}

.filter-chip {
    position: relative;
    cursor: pointer;
}

.filter-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-chip span {
    display: inline-block;
    min-width: 42px;
    padding: .35rem .6rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-soft);
    font-size: .8rem;
    text-align: center;
}

.filter-chip input:checked + span {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
}

.filter-chip input:focus-visible + span {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.filter-submit {
    padding: .7rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--primary-color);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}


/* ---------- فیلترهای فعال ---------- */

.price-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
}

.price-active-label {
    color: var(--text-muted);
    font-size: .8rem;
}

.price-active-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.price-active-reset {
    color: var(--text-muted);
    font-size: .78rem;
    text-decoration: underline;
}

.price-result-count {
    margin-bottom: .8rem;
    color: var(--text-muted);
    font-size: .82rem;
}


/* ---------- بلوک هر برند ---------- */

.brand-block {
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.brand-block-head {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-soft);
}

.brand-block-head h2 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 800;
}

.brand-updated {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--text-muted);
    font-size: .75rem;
}

/* جدول قیمت اسکرول افقی خودش را دارد تا بدنه‌ی صفحه افقی اسکرول نشود */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* دو ویژگی و قیمت، به‌علاوه‌ی یکی از «واحد» یا «مدل/طرح»، در عرض گوشی جا
   می‌شوند: وقتی ستون مدل هست، واحدِ مشترک به سرستون قیمت رفته است. */
table.price-table {
    width: 100%;
    border-collapse: collapse;
}

.price-table th,
.price-table td {
    padding: .7rem .75rem;
    border-bottom: 1px solid var(--border-softer);
    font-size: .85rem;
    text-align: center;
    white-space: nowrap;
}

.price-table th {
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 700;
}

/* سرستون می‌تواند بشکند: «قیمت هر متر مربع (تومان)» یک‌خطی عریض‌ترین ستون جدول
   روی گوشی بود و جدول را بیرون می‌زد. */
.price-table thead th { white-space: normal; }

/* ستون «مدل/طرح» تنها ستون بدنه است که می‌شکند: بقیه یک‌خطی‌اند، پس کمبود عرض گوشی
   را این ستون با دو خط شدن جبران می‌کند. اگر جدول باز هم بیرون زد، این ستون
   چسبان می‌ماند تا هنگام اسکرول افقی معلوم باشد هر ردیف کدام مدل است. */
.price-table th.col-model {
    position: sticky;
    right: 0;
    z-index: 1;
    min-width: 5.5rem;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
}

.price-table tbody th.col-model {
    background: var(--surface);
    color: var(--text-dark);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.5;
}

.price-table tbody tr:last-child > * { border-bottom: none; }

.price-table td.price {
    color: var(--text-dark);
    font-size: .95rem;
    font-weight: 800;
}

.price-empty a {
    color: var(--primary-color);
    text-decoration: underline;
}


/* ---------- متن تحریری و سوالات متداول ---------- */

.article-body {
    margin-top: 1.5rem;
    line-height: 2.1;
}

.faq-block { margin-top: 1.5rem; }

.faq-block > h2 {
    margin-bottom: .75rem;
    font-size: 1.1rem;
    font-weight: 800;
}

.faq-item {
    overflow: hidden;
    margin-bottom: .5rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    font-size: .9rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary i {
    flex: none;
    color: var(--primary-color);
    transition: transform .2s ease;
}

.faq-item[open] > summary i { transform: rotate(45deg); }

.faq-answer {
    padding: 0 1rem 1rem;
    color: var(--text-body);
    font-size: .88rem;
    line-height: 2;
}

.faq-answer p:last-child { margin-bottom: 0; }


/* ---------- همبرگری دسته‌بندی‌های دیگر ---------- */

.price-nav-list {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.price-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem .9rem;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.price-nav-link i {
    color: var(--text-muted);
    font-size: .8rem;
}

.price-nav-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.price-nav-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.price-nav-link.is-current {
    background: var(--primary-light);
    color: var(--primary-color);
}

.price-nav-all {
    display: block;
    padding: .7rem 1rem;
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-sm);
    color: var(--primary-color);
    font-size: .85rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}


/* ---------- md به بالا ---------- */

@media (min-width: 768px) {
    .price-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.4rem 1.6rem;
    }

    .price-head-actions,
    .price-action { flex: none; }

    .price-quick {
        display: flex;
        align-items: center;
        gap: .75rem;
        margin-top: .8rem;
        padding: .7rem 1rem;
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-md);
        background: var(--surface);
    }

    .price-quick-label {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: .35rem;
        color: var(--text-dark);
        font-size: .82rem;
        font-weight: 700;
    }

    .price-quick-label i { color: var(--primary-color); }

    .price-quick-list {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
    }

    .price-quick-chip {
        padding: .3rem .8rem;
        border-radius: 999px;
        background: var(--surface-softer);
        color: var(--text-body);
        font-size: .8rem;
        text-decoration: none;
    }

    .price-table th,
    .price-table td { padding: .8rem 1rem; }
}


/* ---------- lg به بالا: ستون فیلتر از کشویی به ستون ثابت تبدیل می‌شود ---------- */

@media (min-width: 992px) {
    .price-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
    }

    /* در RTL اولین ستون سمت راست می‌نشیند، پس ترتیب سورس همان چیزی است که
       روی صفحه دیده می‌شود: فیلترها راست، جدول‌ها چپ. */
    .price-sidebar {
        position: sticky;
        /* زیر هدر ثابت ۹۰ پیکسلی سایت (base.html) */
        top: 5.75rem;
        flex: 0 0 280px;
        width: 280px;
    }

    .price-main { flex: 1 1 auto; }

    .price-filter-toggle { display: none; }

    .price-filters-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: .25rem;
        font-size: .95rem;
        font-weight: 800;
    }

    .price-filters-head i { color: var(--primary-color); }

    .price-filters-reset {
        color: var(--text-muted);
        font-size: .78rem;
        font-weight: 600;
        text-decoration: none;
    }

    /* در این اندازه ستون فیلتر همیشه دیده می‌شود و اسکریپت با هر تیک فرم را
       می‌فرستد؛ روی موبایل که پنل کشویی است دکمه سر جایش می‌ماند. */
    .price-filters.has-js .filter-submit { display: none; }

    .brand-block-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}


/* ==========================================================================
   ۸. صفحه‌ی مقاله — مشترک بین comparison و news
   ========================================================================== */

/* نوار پیشرفت مطالعه */
.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 9999;
}

.progress-bar-scroller {
    height: 4px;
    background: var(--primary-color);
    width: 0;
    transition: width .1s;
    box-shadow: 0 0 15px rgba(37, 99, 235, .6);
    border-radius: 0 4px 4px 0;
}

.article-header-modern {
    text-align: center;
    padding: 1rem 0 1.5rem;
    max-width: 850px;
    margin: 0 auto;
}

.article-title-modern {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    letter-spacing: -.5px;
}

.article-header {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

.article-header-title,
.article-hero-title {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.4;
}

.article-hero-title {
    text-shadow: 0 4px 10px rgba(0, 0, 0, .6);
}

.article-meta-info {
    color: #6c757d;
    margin-top: 1rem;
}

/* باکس متای نویسنده */
.author-meta-box {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    padding: 8px 20px 8px 8px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .03);
    max-width: 100%;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    flex-shrink: 0;
}

.meta-text {
    text-align: right;
    line-height: 1.3;
    min-width: 0;
}

.author-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: .9rem;
    display: block;
}

.meta-info-sub {
    font-size: .75rem;
    color: var(--text-muted);
}

/* تصویر اصلی مقاله */
.media-container-modern {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
    background-color: var(--primary-light);
    height: 250px;
    width: 100%;
}

.media-container-modern img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* هدر تصویری صفحه‌ی خبر */
.article-image-hero {
    position: relative;
    height: 50vh;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
}

.article-image-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .3));
    z-index: 1;
}

.article-image-hero .hero-content {
    padding: 1.25rem;
    max-width: 800px;
}

.article-image-hero .article-meta-info {
    color: rgba(255, 255, 255, .8);
}

.video-player-container {
    border-radius: 1rem;
    overflow: hidden;
}

.article-main-content { padding: 2rem 0; }

/* بدنه و تایپوگرافی مقاله
   در موبایل متن راست‌چین است؛ justify روی عرض کم فاصله‌های بدترکیب می‌سازد */
.article-content-body {
    font-size: 1rem;
    line-height: 2;
    color: var(--text-body);
    text-align: right;
}

.article-content-body h2,
.article-body h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
    margin-top: 2rem;
    margin-bottom: 1rem;
    position: relative;
    padding-right: 15px;
}

.article-content-body h2::before,
.article-body h2::before {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 4px;
    background: var(--primary-color);
    border-radius: 4px;
}

/* بقیه‌ی تیترهای متن مقاله. بدون این‌ها h3 و h4 اندازه‌ی پیش‌فرض بوت‌استرپ را
   می‌گرفتند که در دسکتاپ از h2 مقاله درشت‌تر بود. ‎article.article-content‎
   متن صفحه‌ی خبر است؛ ‎.article-content‎ به‌تنهایی روی کارت‌های فهرست مقالات
   هم نشسته و این قواعد نباید به آن‌ها برسد. */
article.article-content h2 {
    font-size: 1.2rem;
    font-weight: 800;
}

.article-content-body h3,
.article-body h3,
article.article-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
}

.article-content-body :is(h4, h5, h6),
.article-body :is(h4, h5, h6),
article.article-content :is(h4, h5, h6) {
    font-size: 1rem;
    font-weight: 700;
}

.article-content-body img {
    border-radius: var(--radius-md);
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}

/* جدول‌های داخل محتوای CKEditor روی موبایل بیرون نزنند */
.article-content-body table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.article-content blockquote,
.article-content-body blockquote,
blockquote {
    background: var(--surface);
    border-right: 4px solid var(--primary-color);
    padding: 16px 20px;
    margin: 24px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    border-radius: 16px 0 0 16px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .05);
}

.key-points-box {
    background-color: var(--primary-light);
    border: 1px dashed #bfdbfe;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

/* محتوای مقاله‌ی خبری */
.article-content {
    font-size: 1rem;
    line-height: 2;
    color: #212529;
}

/* سایدبار و فهرست مطالب */
.sidebar-sticky-wrapper,
.article-sidebar {
    position: static;
}

.sidebar-block {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: .75rem;
}

.toc-box {
    background: var(--surface);
    border: 1px solid var(--border-softer);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.toc-link {
    display: block;
    padding: 6px 10px 6px 0;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .9rem;
    transition: .2s;
    border-right: 2px solid transparent;
    padding-right: 10px;
}

.toc-link:hover,
.toc-link.active {
    color: var(--primary-color);
    border-right-color: var(--primary-color);
    background: linear-gradient(to left, var(--primary-light), transparent);
}

/* باکس نویسنده — در موبایل عمودی */
.author-bio-card {
    background: var(--surface-soft);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 16px;
    align-items: center;
    margin-top: 2.5rem;
    border: 1px solid var(--border-soft);
}

.author-bio-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    flex-shrink: 0;
}

/* سوالات متداول */
.faq-accordion .accordion-item {
    border: none;
    margin-bottom: 10px;
    border-radius: 12px !important;
    overflow: hidden;
    background: var(--surface-soft);
}

.faq-accordion .accordion-button {
    background: var(--surface-soft);
    font-weight: 700;
    color: var(--text-main);
    box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--primary-light);
    color: var(--primary-color);
}

/* نوار شناور پایین صفحه — پایه‌ی موبایل، در دسکتاپ مخفی می‌شود */
.mobile-sticky-bar {
    display: flex;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(12px);
    padding: 10px 30px;
    border-radius: 100px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    z-index: 1000;
    gap: 30px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .5);
}

.mobile-action-btn {
    color: var(--text-muted);
    font-size: 1.5rem;
    transition: .2s;
    cursor: pointer;
}

/* فیلد لینک و دکمه‌ی کپی (صفحه‌ی خبر) */
.copy-link-input {
    background-color: #e9ecef;
    border-right: none;
    color: #495057;
    direction: ltr;
    text-align: left;
    font-family: monospace;
}

.copy-link-btn .bi-check-lg { color: var(--bs-success); }


/* ==========================================================================
   ۹. سایدبار مقاله (inc/article_sidebar)
   ========================================================================== */

.sidebar-modern-card {
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--img-radius);
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .02);
    margin-bottom: 1.5rem;
}

.sidebar-label {
    font-size: .85rem;
    font-weight: 800;
    color: var(--text-dark-soft);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-label i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.category-box-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--surface-soft);
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 12px 15px;
    text-decoration: none;
    color: #475569;
    transition: all .3s ease;
}

/* روی موبایل hover نداریم، پس فلش همیشه دیده می‌شود */
.cat-arrow {
    opacity: 1;
    transition: .2s;
    transform: translateX(0);
}

.copy-box-wrapper {
    position: relative;
    background-color: var(--surface-softer);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    transition: .3s;
}

.copy-box-wrapper:focus-within {
    background-color: var(--surface);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.copy-input-clean {
    border: none;
    background: transparent;
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    font-family: monospace;
    color: var(--text-muted);
    font-size: .9rem;
    direction: ltr;
    outline: none;
}

.btn-copy-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    border: none;
    background-color: var(--surface);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
    transition: .2s;
}

.btn-copy-icon:active { transform: scale(.95); }


/* ==========================================================================
   ۱۰. مقالات مرتبط (inc/article_related)
   ========================================================================== */

.related-section-modern {
    padding: 2.5rem 0 3rem;
    position: relative;
    border-top: 1px solid var(--border-softer);
    background-color: var(--surface);
}

/* پدینگ می‌دهیم تا سایه‌ی کارت‌ها هنگام هاور بریده نشود */
.related-slider-container {
    padding: 20px 10px 40px !important;
}

.related-card-modern {
    background-color: var(--surface);
    border: 1px solid var(--border-softer);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: all .3s cubic-bezier(.25, .8, .25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.related-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-img-box {
    height: 170px;
    position: relative;
    overflow: hidden;
    background-color: var(--surface-soft);
}

.card-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.category-badge-float {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    color: var(--primary-color);
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
    z-index: 2;
}

.card-body-modern {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title-modern {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: .5rem;
    line-height: 1.5;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta-modern {
    margin-top: auto;
    padding-top: 1rem;
    font-size: .8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #cbd5e1;
    opacity: 1;
    transition: .3s;
}

.swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background-color: var(--primary-color) !important;
}


/* ==========================================================================
   ۱۱. نظرات (inc/article_comment)
   ========================================================================== */

.comments-wrapper {
    background-color: var(--surface);
    margin-top: 2.5rem;
    border-top: 1px solid var(--border-soft);
    padding-top: 2rem;
}

.comment-card {
    background-color: var(--surface);
    border: 1px solid var(--border-softer);
    border-radius: var(--radius-comment);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    transition: all .2s;
    position: relative;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: .8rem;
}

.avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e7ff 0%, #eff6ff 100%);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.comment-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.comment-author {
    font-weight: 700;
    color: var(--text-dark-soft);
    font-size: 1rem;
    margin: 0;
}

.comment-date {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* در موبایل متن زیر آواتار تورفتگی ندارد */
.comment-text {
    color: #475569;
    line-height: 1.7;
    font-size: .95rem;
    padding-right: 0;
    margin-top: 10px;
}

.btn-reply-action {
    font-size: .8rem;
    color: var(--primary-color);
    background: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    transition: background .2s;
}

.replies-wrapper {
    margin-top: 1rem;
    margin-right: .75rem;
    padding-right: .75rem;
    border-right: 2px solid var(--border-soft);
}

.reply-card {
    background-color: var(--bg-reply);
    padding: 1rem;
    border-radius: 12px;
    margin-top: 1rem;
}

.reply-card.admin-reply {
    background-color: #fffbeb;
    border: 1px solid #fef3c7;
}

.reply-card.admin-reply .comment-author::after {
    content: 'مدیر سایت';
    font-size: .75rem;
    background: #f59e0b;
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

.comment-form-box {
    background-color: var(--bg-comment);
    border-radius: var(--radius-box);
    padding: 1.25rem;
    border: 1px dashed #cbd5e1;
}

.form-input-modern {
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px 15px;
    background: var(--surface);
    transition: all .3s;
}

.form-input-modern:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}


/* ==========================================================================
   ۱۱.۵ مقاله‌ی آموزشی گام‌به‌گام (how_to)
   ==========================================================================
   تیترهای h2 داخل ‎.howto-steps‎ با شمارنده‌ی CSS به «گام ۱، گام ۲ …» تبدیل
   می‌شوند. این کار محتوای دیداری را با schema نوع HowTo هم‌خوان می‌کند، بدون
   اینکه ویرایشگر مجبور باشد نشانه‌گذاری خاصی بنویسد — همان h2 معمولی کافی است.
   ========================================================================== */

.howto-kicker,
.price-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: var(--primary-light);
    color: var(--primary-color);
}

.price-kicker {
    background: #fff7ed;
    color: #c2410c;
}

.howto-steps {
    counter-reset: howto-step;
}

.howto-steps > h2 {
    counter-increment: howto-step;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding-right: 0;
    margin-top: 2.5rem;
}

/* خط عمودی پیش‌فرض h2 اینجا با بج شماره جایگزین می‌شود */
.howto-steps > h2::before {
    content: 'گام ' counter(howto-step);
    position: static;
    width: auto;
    height: auto;
    background: var(--primary-color);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: .3px;
}

.howto-supplies {
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.howto-supplies-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 1rem;
}

.howto-supply-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    background: var(--surface);
    border: 1px solid var(--border-softer);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-body);
    transition: border-color .2s;
}

.howto-supply-item:last-child { margin-bottom: 0; }

.howto-supply-icon {
    font-size: 1.25rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.howto-supply-name {
    flex-grow: 1;
    font-weight: 600;
    font-size: .9rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.howto-supply-action {
    font-size: .8rem;
    font-weight: 700;
    color: var(--primary-color);
    flex-shrink: 0;
}


/* ==========================================================================
   ۱۱.۶ مقاله‌ی قیمت (prices)
   ========================================================================== */

/* تاریخ به‌روزرسانی — برای این نوع مقاله مهم‌ترین سیگنال اعتماد است */
.price-freshness {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: .85rem;
}

.price-freshness-icon { font-size: 1rem; }

.price-freshness strong { font-weight: 800; }

/* ارتفاع کمتر برای تصویر، چون در مقاله‌ی قیمت جدول مهم‌تر از عکس است */
.media-container-compact { height: 200px; }

/* جدول‌هایی که ویرایشگر داخل متن می‌سازد، ظاهر جدول قیمت می‌گیرند */
.price-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: .95rem;
}

.price-article th,
.price-article td {
    padding: .7rem .75rem;
    border-bottom: 1px solid var(--border-soft);
    text-align: right;
}

.price-article th {
    background: var(--surface-soft);
    font-weight: 700;
    font-size: .875rem;
    white-space: nowrap;
}

.price-article tr:last-child td { border-bottom: none; }

.price-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #854d0e;
    font-size: .875rem;
    line-height: 1.8;
}

.price-disclaimer-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.price-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 1.5rem;
    padding: 1.25rem;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    border: 1px solid #bfdbfe;
    text-decoration: none;
    color: var(--text-main);
    transition: border-color .2s, transform .2s;
}

.price-cta-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.price-cta-text strong { font-size: .95rem; }

.price-cta-text span {
    font-size: .8rem;
    color: var(--text-muted);
}

.price-cta-arrow {
    font-size: 1.25rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

/* زیرتیترهای فهرست مطالب کمی تورفته‌اند */
.toc-link-sub { padding-right: 24px; }


/* ==========================================================================
   ۱۲. بزرگ‌تر از موبایل — ‎min-width: 576px‎ (sm)
   ========================================================================== */

@media (min-width: 576px) {
    .bazaar-badge { height: 75px; }

    .campaign-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 2rem;
        gap: 0;
    }

    .campaign-icon {
        font-size: 3rem;
        margin-left: 1.5rem;
    }

    .campaign-arrow {
        font-size: 2rem;
        align-self: auto;
    }

    .author-bio-card {
        flex-direction: row;
        text-align: right;
        gap: 20px;
        padding: 2rem;
    }

    .card-img-wrapper { height: 200px; }
    .card-img-box     { height: 200px; }
    .card-image-wrapper { height: 220px; }
}


/* ==========================================================================
   ۱۳. تبلت و بالاتر — ‎min-width: 768px‎ (md)
   ========================================================================== */

@media (min-width: 768px) {
    .hero-section {
        padding-top: 10rem;
        padding-bottom: 6rem;
    }

    .about-page .hero-section {
        padding-top: 5rem;
        padding-bottom: 4rem;
    }

    .hero-app-image { border-radius: 1.25rem; }

    .feature-card { padding: 2rem; }

    .feature-icon-circle {
        width: 70px;
        height: 70px;
        margin-bottom: 1.5rem;
        font-size: 2rem;
    }

    .page-header-minimal { padding: 4rem 0 3rem; }
    .page-header-minimal h1 { font-size: 1.875rem; }

    .modern-hero {
        padding: 4rem 2rem;
        min-height: 320px;
        border-radius: var(--radius-xl);
        margin-bottom: 4rem;
    }

    .hero-title { font-size: 2rem; letter-spacing: -1px; }

    .card-title    { font-size: 1.15rem; }
    .card-content  { padding: 1.5rem .5rem .5rem; }
    .article-title { font-size: 1.05rem; }

    .article-header { padding-top: 4rem; padding-bottom: 2rem; }

    .article-header-title,
    .article-hero-title { font-size: 2rem; }

    .article-title-modern { font-size: 1.75rem; }

    .article-header-modern { padding: 1rem 0 2rem; }

    .author-meta-box { padding: 8px 24px 8px 8px; }

    .media-container-modern {
        height: 450px;
        border-radius: var(--radius-xl);
        margin-bottom: 4rem;
    }

    .article-image-hero {
        height: 60vh;
        min-height: 400px;
    }

    .article-image-hero .hero-content { padding: 2rem; }

    .article-main-content { padding: 4rem 0; }

    /* اندازه‌ی متن در دسکتاپ هم ۱۶px می‌ماند، مثل همه‌ی سایت‌های مرجع؛
       فقط چینش justify می‌شود. */
    .article-content-body { text-align: justify; }

    .article-content-body h2,
    .article-body h2 {
        font-size: 1.375rem;
        margin-top: 3rem;
    }

    article.article-content h2 { font-size: 1.375rem; }

    .article-content-body h3,
    .article-body h3,
    article.article-content h3 { font-size: 1.2rem; }

    .article-content-body img { margin: 2rem 0; }

    blockquote {
        padding: 20px 30px;
        margin: 30px 0;
        font-size: 1.1rem;
    }

    .key-points-box { padding: 1.5rem; }

    /* سایدبار فقط وقتی کنار متن است معنی دارد که چسبنده شود */
    .sidebar-sticky-wrapper { position: sticky; top: 100px; }
    .article-sidebar        { position: sticky; top: 120px; }

    .sidebar-modern-card { padding: 1.5rem; }

    .toc-box { padding: 1.5rem; }

    /* نوار شناور فقط برای موبایل است */
    .mobile-sticky-bar { display: none; }

    /* --- how_to --- */
    .howto-steps > h2 {
        flex-direction: row;
        align-items: center;
        gap: .75rem;
        margin-top: 3rem;
    }

    .howto-steps > h2::before { font-size: .8rem; padding: 5px 14px; }

    .howto-supplies { padding: 1.5rem; }

    /* --- prices --- */
    .media-container-compact { height: 320px; }

    .price-article table { font-size: 1rem; }

    .price-cta { padding: 1.5rem; }

    .price-cta-text strong { font-size: 1.05rem; }

    .related-section-modern { padding: 4rem 0 5rem; }
    .related-slider-container { padding: 20px 10px 50px !important; }
    .related-section-modern .section-title { font-size: 1.3rem; }

    .comments-wrapper {
        margin-top: 4rem;
        padding-top: 3rem;
    }

    .comment-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* متن کامنت زیر آواتار تورفتگی می‌گیرد */
    .comment-text {
        padding-right: 60px;
        margin-top: 0;
    }

    .replies-wrapper {
        margin-right: 2rem;
        padding-right: 1.5rem;
    }

    .reply-card { padding: 1.2rem; }

    .comment-form-box { padding: 2rem; }

    .price-index { padding-block: 2rem; }
    .article-body { margin-top: 2.5rem; }
    .faq-block    { margin-top: 2.5rem; }

    .custom-breadcrumb {
        display: inline-flex;
        flex-wrap: nowrap;
        padding: 6px 20px;
        margin-bottom: 2rem;
    }
}


/* ==========================================================================
   ۱۴. افکت‌های اشاره‌گر — فقط جایی که واقعاً hover هست
   ==========================================================================
   روی صفحه‌ی لمسی hover یا اصلاً رخ نمی‌دهد یا بعد از تپ گیر می‌کند، پس
   همه‌ی حالت‌های hover پشت این کوئری قرار گرفته‌اند.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .soft-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 14px 32px rgba(0, 0, 0, .1);
    }

    .soft-card:hover .card-img-top { transform: scale(1.05); }

    .pill-link:hover {
        background: #212529;
        color: #fff;
        transform: translateX(-3px);
    }

    .custom-breadcrumb a:hover { color: var(--primary-color); }

    .hero-app-image:hover { transform: scale(1.03); }

    .btn-hero-primary:hover {
        background-color: #f0f0f0;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    }

    .btn-hero-secondary:hover {
        background-color: rgba(255, 255, 255, .1);
        border-color: #fff;
        transform: translateY(-3px);
    }

    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(42, 60, 92, .1);
    }

    .campaign-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 15px 40px rgba(102, 126, 234, .4);
    }

    .contact-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1) !important;
    }

    .category-card-modern:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .08);
        border-color: rgba(0, 0, 0, .03);
    }

    .category-card-modern:hover .card-bg-image { transform: scale(1.05); }

    /* در دسکتاپ فلش کارت تا قبل از hover پنهان است */
    .category-card-modern .card-arrow {
        opacity: 0;
        transform: translateX(10px);
    }

    .category-card-modern:hover .card-arrow {
        opacity: 1;
        transform: translateX(0);
    }

    .article-card-minimal:hover { transform: translateY(-6px); }

    .article-card-minimal:hover .article-img-wrapper img { transform: scale(1.08); }

    .article-card-minimal:hover .article-title { color: var(--primary-color); }

    .price-index-card:hover { border-color: var(--primary-color); }

    .mobile-action-btn:hover {
        color: var(--primary-color);
        transform: scale(1.1);
    }

    .category-box-link:hover {
        background-color: var(--primary-light);
        border-color: var(--primary-color);
        color: var(--primary-color);
        transform: translateY(-2px);
    }

    .category-box-link .cat-arrow {
        opacity: 0;
        transform: translateX(5px);
    }

    .category-box-link:hover .cat-arrow {
        opacity: 1;
        transform: translateX(0);
    }

    .btn-copy-icon:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    .related-card-modern:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px -5px rgba(0, 0, 0, .08);
        border-color: transparent;
    }

    .related-card-modern:hover .card-img-box img { transform: scale(1.08); }

    .related-card-modern:hover .card-title-modern { color: var(--primary-color); }

    .related-card-modern:hover #arrow-hover {
        opacity: 1 !important;
        transform: translateX(-5px);
    }

    .comment-card:hover {
        border-color: var(--border-soft);
        box-shadow: 0 4px 20px rgba(0, 0, 0, .03);
    }

    .btn-reply-action:hover { background-color: var(--primary-light); }
}


/* ==========================================================================
   ۱۵. کاهش حرکت — احترام به تنظیم سیستم کاربر
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hero-section { animation: none; }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}