/*
 * ═══════════════════════════════════════════════════════
 * Novava - Main Stylesheet
 * فایل استایل اصلی نُواوا
 * شامل: reset، تایپوگرافی، layout، کلاس‌های کمکی
 * وابستگی: variables.css باید قبل از این فایل لود بشه
 * ═══════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════ */
/* ═══ بخش ۱ — ریست و نرمال‌سازی مرورگرها ═══ */
/* ═══════════════════════════════════════ */

/* ۱. باکس‌سایزینگ و حذف مارجین/پدینگ پیش‌فرض تمام المان‌ها */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ۲. تنظیمات پایه html */
html {
    -webkit-text-size-adjust: 100%;         /* جلوگیری از تغییر سایز فونت در iOS */
    -moz-text-size-adjust: 100%;            /* جلوگیری از تغییر سایز فونت در فایرفاکس */
    text-size-adjust: 100%;                 /* استاندارد */
    scroll-behavior: smooth;                /* اسکرول نرم بین بخش‌ها */
    -webkit-font-smoothing: antialiased;    /* صاف‌سازی فونت در وبکیت */
    -moz-osx-font-smoothing: grayscale;     /* صاف‌سازی فونت در مک */
    tab-size: 4;                            /* اندازه تب */
    font-size: 100%;                        /* 16px پایه */
    scrollbar-width: thin;                                                              /* عرض اسکرولبار فایرفاکس */
    scrollbar-color: var(--color-border-dark) var(--color-bg-secondary);                 /* رنگ اسکرولبار فایرفاکس */
}

/* ۳. تنظیمات پایه body */
body {
    min-height: 100vh;                              /* حداقل ارتفاع کل صفحه */
    min-height: 100dvh;                             /* ارتفاع داینامیک ویوپورت برای موبایل */
    font-family: var(--font-fa);                    /* فونت فارسی ایران سنس ایکس */
    font-size: var(--font-size-base);               /* سایز پایه: 1rem (16px) */
    font-weight: var(--font-weight-regular);        /* وزن معمولی: 400 */
    line-height: var(--line-height-normal);          /* ارتفاع خط: 1.5 */
    color: var(--color-text);                       /* رنگ متن اصلی */
    background-color: var(--color-bg);              /* پس‌زمینه سفید */
    direction: rtl;                                 /* راست‌به‌چپ برای فارسی */
    text-align: right;                              /* چینش متن از راست */
    overflow-x: hidden;                             /* جلوگیری از اسکرول افقی */
    -webkit-tap-highlight-color: transparent;       /* حذف هایلایت آبی لمسی در موبایل */
}

/* ۴. رفع مشکل نمایش main در IE11 */
main {
    display: block;
}

/* ۵. خط جداکننده افقی */
hr {
    height: 0;
    border: none;
    border-top: 1px solid var(--color-border);      /* خط خاکستری */
    margin: var(--spacing-6) 0;                     /* فاصله بالا و پایین: 1.5rem */
}

/* ۶. اختصار با عنوان */
abbr[title] {
    text-decoration: underline dotted;              /* خط‌چین نقطه‌ای */
    cursor: help;                                   /* نشانگر راهنما */
    text-decoration-skip-ink: none;
}

/* ۷. متن ضخیم */
b,
strong {
    font-weight: var(--font-weight-bold);           /* وزن بولد: 700 */
}

/* ۸. فونت‌های تک‌فاصله (کد) */
code,
kbd,
samp,
pre {
    font-family: 'Courier New', Courier, monospace; /* فونت مونواسپیس */
    font-size: 0.875em;                             /* نسبت به والد */
}

/* ۹. بلاک کد چند خطی */
pre {
    overflow: auto;                                 /* اسکرول افقی برای متن طولانی */
    white-space: pre-wrap;                          /* شکست خط خودکار */
    word-wrap: break-word;                          /* شکست کلمات طولانی */
}

/* ۱۰. متن کوچک */
small {
    font-size: 80%;
}

/* ۱۱. پایین‌نویس و بالانویس */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

/* ۱۲. پایین‌نویس */
sub {
    bottom: -0.25em;
}

/* ۱۳. بالانویس */
sup {
    top: -0.5em;
}

/* ۱۴. تصاویر و مدیا — بلاکی و ریسپانسیو */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ۱۵. حذف حاشیه تصویر در IE */
img {
    border-style: none;
}

/* ۱۶. ریست فرم‌ها — ارث‌بری از والد */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    outline: none;
}

/* ۱۷. دکمه‌ها — نشانگر کلیک */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;                     /* ظاهر استاندارد وبکیت */
    cursor: pointer;                                /* نشانگر دست */
}

/* ۱۸. حذف حاشیه داخلی فوکوس فایرفاکس */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* ۱۹. ریست fieldset */
fieldset {
    padding: 0;
    margin: 0;
    border: none;
}

/* ۲۰. ریست legend */
legend {
    padding: 0;
    white-space: normal;
}

/* ۲۱. تکست‌اریا — فقط تغییر اندازه عمودی */
textarea {
    overflow: auto;                                 /* رفع مشکل IE */
    resize: vertical;                               /* فقط تغییر ارتفاع */
}

/* ۲۲. حذف پدینگ چک‌باکس و رادیو */
[type="checkbox"],
[type="radio"] {
    padding: 0;
}

/* ۲۳. حذف دکمه‌های افزایش/کاهش input عددی */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/* ۲۴. ریست input جستجو */
[type="search"] {
    -webkit-appearance: textfield;                  /* ظاهر ساده */
    outline-offset: -2px;
}

/* ۲۵. حذف تزئینات جستجوی وبکیت */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/* ۲۶. دکمه آپلود فایل */
::-webkit-file-upload-button {
    -webkit-appearance: button;                     /* ظاهر دکمه */
    font: inherit;                                  /* ارث‌بری فونت */
}

/* ۲۷. عنصر summary */
summary {
    display: list-item;
    cursor: pointer;
}

/* ۲۸. مخفی کردن المان‌های hidden و template */
[hidden],
template {
    display: none !important;
}

/* ۲۹. ریست لینک‌ها */
a {
    color: inherit;                                 /* رنگ ارثی از والد */
    text-decoration: none;                          /* بدون خط زیر */
    background-color: transparent;                  /* بدون پس‌زمینه */
}

/* ۳۰. ریست جدول */
table {
    border-collapse: collapse;                      /* ادغام حاشیه‌ها */
    border-spacing: 0;                              /* حذف فاصله بین سلول‌ها */
    width: 100%;                                    /* عرض کامل */
}

/* ۳۱. ریست سلول‌های جدول */
th,
td {
    text-align: inherit;                            /* چینش ارثی */
    padding: 0;
}

/* ۳۲. حذف بولت لیست‌ها */
ol,
ul {
    list-style: none;
}

/* ۳۳. حذف علامت نقل‌قول */
blockquote,
q {
    quotes: none;
}

/* ۳۴. حذف محتوای قبل و بعد نقل‌قول */
blockquote::before,
blockquote::after,
q::before,
q::after {
    content: '';
}

/* ۳۵. رنگ انتخاب متن — آبی برند با متن سفید */
::selection {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

/* ۳۶. رنگ placeholder */
::placeholder {
    color: var(--color-text-muted);                 /* خاکستری روشن */
    opacity: 1;                                     /* شفافیت کامل */
}

/* ۳۷. استایل فوکوس قابل مشاهده — برای دسترسی‌پذیری */
:focus-visible {
    outline: 2px solid var(--color-primary);         /* حاشیه آبی */
    outline-offset: 2px;                             /* فاصله از المان */
}

/* ۳۸. کاهش حرکت برای کاربران حساس به انیمیشن */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۲ — تایپوگرافی              ═══ */
/* ═══════════════════════════════════════ */

/* --- عناوین (h1 تا h6) — استایل مشترک --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-fa);                    /* فونت فارسی ایران سنس ایکس */
    font-weight: var(--font-weight-bold);           /* وزن بولد: 700 */
    line-height: var(--line-height-tight);          /* ارتفاع خط: 1.25 */
    color: var(--color-text);                       /* رنگ متن اصلی */
    margin-bottom: var(--spacing-4);                /* فاصله پایین: 1rem */
}

/* عنوان سطح ۱ — بزرگ‌ترین عنوان صفحه */
h1 {
    font-size: var(--font-size-3xl);                /* 2.25rem (36px) */
}

/* عنوان سطح ۲ — عنوان بخش */
h2 {
    font-size: var(--font-size-2xl);                /* 1.875rem (30px) */
}

/* عنوان سطح ۳ — زیرعنوان بخش */
h3 {
    font-size: var(--font-size-xl);                 /* 1.5rem (24px) */
}

/* عنوان سطح ۴ — عنوان کارت */
h4 {
    font-size: var(--font-size-lg);                 /* 1.25rem (20px) */
}

/* عنوان سطح ۵ — عنوان فرعی */
h5 {
    font-size: var(--font-size-md);                 /* 1.125rem (18px) */
}

/* عنوان سطح ۶ — کوچک‌ترین عنوان */
h6 {
    font-size: var(--font-size-base);               /* 1rem (16px) */
}

/* --- پاراگراف --- */
p {
    margin-bottom: var(--spacing-4);                /* فاصله پایین: 1rem */
    line-height: var(--line-height-normal);         /* ارتفاع خط: 1.5 */
}

/* آخرین پاراگراف بدون فاصله پایین */
p:last-child {
    margin-bottom: 0;
}

/* --- لینک‌های متنی (با کلاس .link) --- */
.link {
    color: var(--color-primary);                    /* آبی برند */
    text-decoration: none;                          /* بدون خط زیر */
    transition: color var(--transition-fast);        /* انتقال رنگ نرم: 150ms */
    cursor: pointer;                                /* نشانگر دست */
}

/* لینک در حالت هاور */
.link:hover {
    color: var(--color-primary-dark);               /* آبی تیره‌تر */
    text-decoration: underline;                     /* خط زیر */
}

/* لینک در حالت فعال */
.link:active {
    color: var(--color-primary-dark);               /* آبی تیره‌تر */
}

/* لینک در حالت فوکوس */
.link:focus-visible {
    outline: 2px solid var(--color-primary);         /* حاشیه آبی */
    outline-offset: 2px;
}

/* --- متن lead — بزرگ‌تر از معمول --- */
.lead {
    font-size: var(--font-size-md);                 /* 1.125rem (18px) */
    line-height: var(--line-height-relaxed);        /* ارتفاع خط: 1.75 */
    color: var(--color-text-light);                 /* خاکستری */
    margin-bottom: var(--spacing-6);                /* فاصله پایین: 1.5rem */
}

/* --- متن کوچک --- */
.small,
small {
    font-size: var(--font-size-sm);                 /* 0.875rem (14px) */
}

/* --- متن خیلی کوچک (کپشن) --- */
.caption {
    font-size: var(--font-size-xs);                 /* 0.75rem (12px) */
    color: var(--color-text-muted);                 /* خاکستری روشن */
}

/* --- متن ضخیم --- */
.bold,
.fw-bold {
    font-weight: var(--font-weight-bold);           /* 700 */
}

/* وزن فونت معمولی */
.fw-normal {
    font-weight: var(--font-weight-regular);        /* 400 */
}

/* --- بلاک‌نقل‌قول --- */
.blockquote {
    padding: var(--spacing-4) var(--spacing-6);     /* فاصله داخلی: 1rem 1.5rem */
    margin-bottom: var(--spacing-4);                /* فاصله پایین: 1rem */
    border-right: 4px solid var(--color-primary);   /* خط عمودی آبی سمت راست (RTL) */
    background-color: var(--color-bg-secondary);    /* پس‌زمینه خاکستری روشن */
    border-radius: 0 var(--radius-md) var(--radius-md) 0;  /* گردی فقط سمت چپ */
    font-size: var(--font-size-md);                 /* 1.125rem */
    color: var(--color-text-light);                 /* خاکستری */
}

/* پانوشت نقل‌قول */
.blockquote-footer {
    display: block;
    margin-top: var(--spacing-2);                   /* فاصله بالا: 0.5rem */
    font-size: var(--font-size-sm);                 /* 0.875rem */
    color: var(--color-text-muted);                 /* خاکستری روشن */
}

/* --- کد درون‌خطی --- */
.code,
code {
    padding: var(--spacing-1) var(--spacing-2);     /* فاصله داخلی: 0.25rem 0.5rem */
    background-color: var(--color-bg-secondary);    /* پس‌زمینه خاکستری روشن */
    border-radius: var(--radius-sm);                /* گردی: 4px */
    font-size: 0.875em;                             /* نسبت به والد */
    color: var(--color-danger);                     /* قرمز */
    direction: ltr;                                 /* چپ‌به‌راست برای کد */
    display: inline-block;
}

/* --- تقسیم‌کننده با متن وسط --- */
.divider {
    display: flex;
    align-items: center;
    margin: var(--spacing-6) 0;                     /* فاصله بالا و پایین: 1.5rem */
    color: var(--color-text-muted);                 /* خاکستری روشن */
    font-size: var(--font-size-sm);                 /* 0.875rem */
}

/* خط سمت چپ متن (RTL — قبل = سمت راست بصری) */
.divider::before {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-border);          /* خط خاکستری */
    margin-left: var(--spacing-4);                  /* فاصله از متن: 1rem */
}

/* خط سمت راست متن (RTL — بعد = سمت چپ بصری) */
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-border);          /* خط خاکستری */
    margin-right: var(--spacing-4);                 /* فاصله از متن: 1rem */
}

/* --- متن انگلیسی — برای بخش‌های LTR --- */
.text-en,
[lang="en"] {
    font-family: var(--font-en);                    /* فونت سورس سنس ۳ */
    direction: ltr;                                 /* چپ‌به‌راست */
    text-align: left;                               /* چینش از چپ */
}

/* --- لیست‌های استایل‌دار (با بولت/شماره) --- */
.list-styled {
    padding-right: var(--spacing-6);                /* فاصله از راست: 1.5rem (RTL) */
}

/* فاصله بین آیتم‌های لیست */
.list-styled li {
    margin-bottom: var(--spacing-2);                /* فاصله پایین: 0.5rem */
}

/* لیست نامرتب با بولت */
ul.list-styled {
    list-style-type: disc;
}

/* لیست مرتب با شماره */
ol.list-styled {
    list-style-type: decimal;
    direction: rtl;                                 /* شماره‌گذاری فارسی */
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۳ — ساختار صفحه (Layout)    ═══ */
/* ═══════════════════════════════════════ */

/* --- Container اصلی — عرض 1200px --- */
.container {
    width: 100%;
    max-width: var(--container-xl);                 /* 1200px */
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-padding);        /* 1rem */
    padding-left: var(--container-padding);         /* 1rem */
}

/* Container کوچک — فرم‌ها و ورود/ثبت‌نام */
.container-sm {
    width: 100%;
    max-width: var(--container-sm);                 /* 640px */
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-padding);        /* 1rem */
    padding-left: var(--container-padding);         /* 1rem */
}

/* Container متوسط — محتوای متنی */
.container-md {
    width: 100%;
    max-width: var(--container-md);                 /* 768px */
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-padding);        /* 1rem */
    padding-left: var(--container-padding);         /* 1rem */
}

/* Container بزرگ — محتوای عادی */
.container-lg {
    width: 100%;
    max-width: var(--container-lg);                 /* 1024px */
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-padding);        /* 1rem */
    padding-left: var(--container-padding);         /* 1rem */
}

/* Container خیلی بزرگ — عرض حداکثر */
.container-2xl {
    width: 100%;
    max-width: var(--container-2xl);                /* 1400px */
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-padding);        /* 1rem */
    padding-left: var(--container-padding);         /* 1rem */
}

/* --- فاصله بالای محتوا (زیر navbar) --- */
.main-content {
    padding-top: var(--page-padding-top);           /* calc(64px + 2rem) */
    min-height: calc(100vh - var(--navbar-height)); /* حداقل ارتفاع = کل صفحه منهای navbar */
}

/* --- بخش‌ها (Section) --- */
.section {
    padding-top: var(--section-padding);            /* 4rem */
    padding-bottom: var(--section-padding);         /* 4rem */
}

/* بخش کوچک‌تر */
.section-sm {
    padding-top: var(--spacing-8);                  /* 2.5rem */
    padding-bottom: var(--spacing-8);               /* 2.5rem */
}

/* --- سیستم Grid --- */

/* گرید پایه */
.grid {
    display: grid;
    gap: var(--spacing-6);                          /* 1.5rem (24px) */
}

/* گرید ۲ ستونه */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);                          /* 1.5rem */
}

/* گرید ۳ ستونه */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);                          /* 1.5rem */
}

/* گرید ۴ ستونه */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);                          /* 1.5rem */
}

/* ریسپانسیو گرید — تبلت افقی و لپ‌تاپ (زیر 1024px) */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);      /* ۴ ستون → ۳ ستون */
    }
}

/* ریسپانسیو گرید — تبلت عمودی (زیر 768px) */
@media (max-width: 768px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);      /* ۳ ستون → ۲ ستون */
    }
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);      /* ۴ ستون → ۲ ستون */
    }
}

/* ریسپانسیو گرید — موبایل (زیر 576px) */
@media (max-width: 576px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;                 /* همه → تک ستونه */
    }
}

/* --- Flex Utilities --- */

/* فلکس پایه */
.flex {
    display: flex;
}

/* فلکس درون‌خطی */
.flex-inline {
    display: inline-flex;
}

/* فلکس با شکست خط */
.flex-wrap {
    flex-wrap: wrap;
}

/* فلکس ستونی */
.flex-col {
    flex-direction: column;
}

/* فلکس ردیفی */
.flex-row {
    flex-direction: row;
}

/* فلکس وسط‌چین کامل — هم افقی هم عمودی */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* فلکس دو طرف — آیتم‌ها در دو سمت */
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* فلکس از ابتدا */
.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* فلکس از انتها */
.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ترازبندی عمودی آیتم‌ها — بالا */
.items-start {
    align-items: flex-start;
}

/* ترازبندی عمودی آیتم‌ها — وسط */
.items-center {
    align-items: center;
}

/* ترازبندی عمودی آیتم‌ها — پایین */
.items-end {
    align-items: flex-end;
}

/* ترازبندی عمودی آیتم‌ها — کشیدن */
.items-stretch {
    align-items: stretch;
}

/* ترازبندی افقی آیتم‌ها — ابتدا */
.justify-start {
    justify-content: flex-start;
}

/* ترازبندی افقی آیتم‌ها — وسط */
.justify-center {
    justify-content: center;
}

/* ترازبندی افقی آیتم‌ها — انتها */
.justify-end {
    justify-content: flex-end;
}

/* ترازبندی افقی آیتم‌ها — دو طرف */
.justify-between {
    justify-content: space-between;
}

/* ترازبندی افقی آیتم‌ها — فاصله دور */
.justify-around {
    justify-content: space-around;
}

/* انعطاف‌پذیری ۱ — پر کردن فضای باقی‌مانده */
.flex-1 {
    flex: 1;
}

/* انعطاف‌پذیری خودکار */
.flex-auto {
    flex: auto;
}

/* بدون انعطاف‌پذیری */
.flex-none {
    flex: none;
}

/* رشد فلکس */
.flex-grow {
    flex-grow: 1;
}

/* جلوگیری از کوچک شدن */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* --- Gap Utilities --- */

/* فاصله بین آیتم‌ها: 4px */
.gap-1 {
    gap: var(--spacing-1);
}

/* فاصله بین آیتم‌ها: 8px */
.gap-2 {
    gap: var(--spacing-2);
}

/* فاصله بین آیتم‌ها: 12px */
.gap-3 {
    gap: var(--spacing-3);
}

/* فاصله بین آیتم‌ها: 16px */
.gap-4 {
    gap: var(--spacing-4);
}

/* فاصله بین آیتم‌ها: 20px */
.gap-5 {
    gap: var(--spacing-5);
}

/* فاصله بین آیتم‌ها: 24px */
.gap-6 {
    gap: var(--spacing-6);
}

/* فاصله بین آیتم‌ها: 32px */
.gap-7 {
    gap: var(--spacing-7);
}

/* فاصله بین آیتم‌ها: 40px */
.gap-8 {
    gap: var(--spacing-8);
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۴ — فاصله‌ها (Spacing)      ═══ */
/* ═══════════════════════════════════════ */

/* --- Margin Top --- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-1); }            /* 0.25rem (4px) */
.mt-2 { margin-top: var(--spacing-2); }            /* 0.5rem (8px) */
.mt-3 { margin-top: var(--spacing-3); }            /* 0.75rem (12px) */
.mt-4 { margin-top: var(--spacing-4); }            /* 1rem (16px) */
.mt-5 { margin-top: var(--spacing-5); }            /* 1.25rem (20px) */
.mt-6 { margin-top: var(--spacing-6); }            /* 1.5rem (24px) */
.mt-7 { margin-top: var(--spacing-7); }            /* 2rem (32px) */
.mt-8 { margin-top: var(--spacing-8); }            /* 2.5rem (40px) */
.mt-auto { margin-top: auto; }                     /* مارجین خودکار */

/* --- Margin Bottom --- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-1); }         /* 0.25rem (4px) */
.mb-2 { margin-bottom: var(--spacing-2); }         /* 0.5rem (8px) */
.mb-3 { margin-bottom: var(--spacing-3); }         /* 0.75rem (12px) */
.mb-4 { margin-bottom: var(--spacing-4); }         /* 1rem (16px) */
.mb-5 { margin-bottom: var(--spacing-5); }         /* 1.25rem (20px) */
.mb-6 { margin-bottom: var(--spacing-6); }         /* 1.5rem (24px) */
.mb-7 { margin-bottom: var(--spacing-7); }         /* 2rem (32px) */
.mb-8 { margin-bottom: var(--spacing-8); }         /* 2.5rem (40px) */
.mb-auto { margin-bottom: auto; }                  /* مارجین خودکار */

/* --- Margin Right — سمت شروع در RTL --- */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--spacing-1); }          /* 0.25rem (4px) */
.mr-2 { margin-right: var(--spacing-2); }          /* 0.5rem (8px) */
.mr-3 { margin-right: var(--spacing-3); }          /* 0.75rem (12px) */
.mr-4 { margin-right: var(--spacing-4); }          /* 1rem (16px) */
.mr-5 { margin-right: var(--spacing-5); }          /* 1.25rem (20px) */
.mr-6 { margin-right: var(--spacing-6); }          /* 1.5rem (24px) */
.mr-auto { margin-right: auto; }                   /* مارجین خودکار */

/* --- Margin Left — سمت پایان در RTL --- */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--spacing-1); }           /* 0.25rem (4px) */
.ml-2 { margin-left: var(--spacing-2); }           /* 0.5rem (8px) */
.ml-3 { margin-left: var(--spacing-3); }           /* 0.75rem (12px) */
.ml-4 { margin-left: var(--spacing-4); }           /* 1rem (16px) */
.ml-5 { margin-left: var(--spacing-5); }           /* 1.25rem (20px) */
.ml-6 { margin-left: var(--spacing-6); }           /* 1.5rem (24px) */
.ml-auto { margin-left: auto; }                    /* مارجین خودکار */

/* --- Margin X — هر دو طرف افقی --- */
.mx-auto { margin-right: auto; margin-left: auto; }    /* وسط‌چین افقی */
.mx-0 { margin-right: 0; margin-left: 0; }
.mx-2 { margin-right: var(--spacing-2); margin-left: var(--spacing-2); }    /* 0.5rem */
.mx-4 { margin-right: var(--spacing-4); margin-left: var(--spacing-4); }    /* 1rem */

/* --- Margin Y — بالا و پایین --- */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }    /* 0.5rem */
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }    /* 1rem */
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }    /* 1.5rem */
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }    /* 2.5rem */

/* --- Padding — همه جهات --- */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }                /* 0.25rem (4px) */
.p-2 { padding: var(--spacing-2); }                /* 0.5rem (8px) */
.p-3 { padding: var(--spacing-3); }                /* 0.75rem (12px) */
.p-4 { padding: var(--spacing-4); }                /* 1rem (16px) */
.p-5 { padding: var(--spacing-5); }                /* 1.25rem (20px) */
.p-6 { padding: var(--spacing-6); }                /* 1.5rem (24px) */
.p-7 { padding: var(--spacing-7); }                /* 2rem (32px) */
.p-8 { padding: var(--spacing-8); }                /* 2.5rem (40px) */

/* --- Padding Top --- */
.pt-0 { padding-top: 0; }
.pt-2 { padding-top: var(--spacing-2); }           /* 0.5rem (8px) */
.pt-4 { padding-top: var(--spacing-4); }           /* 1rem (16px) */
.pt-6 { padding-top: var(--spacing-6); }           /* 1.5rem (24px) */
.pt-8 { padding-top: var(--spacing-8); }           /* 2.5rem (40px) */

/* --- Padding Bottom --- */
.pb-0 { padding-bottom: 0; }
.pb-2 { padding-bottom: var(--spacing-2); }        /* 0.5rem (8px) */
.pb-4 { padding-bottom: var(--spacing-4); }        /* 1rem (16px) */
.pb-6 { padding-bottom: var(--spacing-6); }        /* 1.5rem (24px) */
.pb-8 { padding-bottom: var(--spacing-8); }        /* 2.5rem (40px) */

/* --- Padding Right --- */
.pr-0 { padding-right: 0; }
.pr-2 { padding-right: var(--spacing-2); }         /* 0.5rem (8px) */
.pr-4 { padding-right: var(--spacing-4); }         /* 1rem (16px) */
.pr-6 { padding-right: var(--spacing-6); }         /* 1.5rem (24px) */

/* --- Padding Left --- */
.pl-0 { padding-left: 0; }
.pl-2 { padding-left: var(--spacing-2); }          /* 0.5rem (8px) */
.pl-4 { padding-left: var(--spacing-4); }          /* 1rem (16px) */
.pl-6 { padding-left: var(--spacing-6); }          /* 1.5rem (24px) */

/* --- Padding X — افقی (راست و چپ) --- */
.px-0 { padding-right: 0; padding-left: 0; }
.px-2 { padding-right: var(--spacing-2); padding-left: var(--spacing-2); }  /* 0.5rem */
.px-4 { padding-right: var(--spacing-4); padding-left: var(--spacing-4); }  /* 1rem */
.px-6 { padding-right: var(--spacing-6); padding-left: var(--spacing-6); }  /* 1.5rem */

/* --- Padding Y — عمودی (بالا و پایین) --- */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }  /* 0.5rem */
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }  /* 1rem */
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }  /* 1.5rem */
.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }  /* 2.5rem */


/* ═══════════════════════════════════════ */
/* ═══ بخش ۵ — کلاس‌های کمکی متنی     ═══ */
/* ═══════════════════════════════════════ */

/* --- چینش متن --- */
.text-center { text-align: center; }               /* وسط‌چین */
.text-right { text-align: right; }                 /* راست‌چین */
.text-left { text-align: left; }                   /* چپ‌چین */

/* --- رنگ متن --- */
.text-primary { color: var(--color-primary); }              /* آبی برند */
.text-accent { color: var(--color-accent); }                /* خردلی تأکیدی */
.text-success { color: var(--color-success); }              /* سبز موفقیت */
.text-warning { color: var(--color-warning); }              /* زرد هشدار */
.text-danger { color: var(--color-danger); }                /* قرمز خطا */
.text-info { color: var(--color-info); }                    /* آبی اطلاعات */
.text-light { color: var(--color-text-light); }             /* خاکستری ثانویه */
.text-muted { color: var(--color-text-muted); }             /* خاکستری غیرفعال */
.text-inverse { color: var(--color-text-inverse); }         /* سفید */

/* --- سایز متن --- */
.text-xs { font-size: var(--font-size-xs); }                /* 0.75rem (12px) */
.text-sm { font-size: var(--font-size-sm); }                /* 0.875rem (14px) */
.text-base { font-size: var(--font-size-base); }            /* 1rem (16px) */
.text-md { font-size: var(--font-size-md); }                /* 1.125rem (18px) */
.text-lg { font-size: var(--font-size-lg); }                /* 1.25rem (20px) */
.text-xl { font-size: var(--font-size-xl); }                /* 1.5rem (24px) */
.text-2xl { font-size: var(--font-size-2xl); }              /* 1.875rem (30px) */
.text-3xl { font-size: var(--font-size-3xl); }              /* 2.25rem (36px) */

/* --- تبدیل حروف --- */
.text-uppercase { text-transform: uppercase; }              /* تمام حروف بزرگ */
.text-lowercase { text-transform: lowercase; }              /* تمام حروف کوچک */
.text-capitalize { text-transform: capitalize; }            /* حرف اول بزرگ */
.text-normal { text-transform: none; }                      /* بدون تبدیل */

/* --- بریدن متن طولانی با ... --- */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- کنترل فضای سفید --- */
.text-wrap { white-space: normal; }                         /* شکست خط عادی */
.text-nowrap { white-space: nowrap; }                       /* بدون شکست خط */

/* شکست کلمات طولانی */
.text-break {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- ارتفاع خط --- */
.lh-tight { line-height: var(--line-height-tight); }       /* 1.25 — عناوین */
.lh-normal { line-height: var(--line-height-normal); }     /* 1.5 — متن فارسی */
.lh-relaxed { line-height: var(--line-height-relaxed); }   /* 1.75 — متن انگلیسی */
.lh-loose { line-height: var(--line-height-loose); }       /* 2 — فاصله زیاد */

/* --- خط‌تزئینی متن --- */
.text-decoration-none { text-decoration: none; }            /* بدون تزئین */
.text-underline { text-decoration: underline; }             /* خط زیر */
.text-line-through { text-decoration: line-through; }       /* خط‌خورده */


/* ═══════════════════════════════════════ */
/* ═══ بخش ۶ — نمایش، ابعاد و موقعیت  ═══ */
/* ═══════════════════════════════════════ */

/* --- Display --- */
.d-none { display: none; }                                 /* مخفی */
.d-block { display: block; }                               /* بلاکی */
.d-inline { display: inline; }                             /* درون‌خطی */
.d-inline-block { display: inline-block; }                 /* درون‌خطی بلاکی */
.d-flex { display: flex; }                                 /* فلکس */
.d-inline-flex { display: inline-flex; }                   /* فلکس درون‌خطی */
.d-grid { display: grid; }                                 /* گرید */

/* --- Width --- */
.w-100 { width: 100%; }                                    /* عرض کامل */
.w-auto { width: auto; }                                   /* عرض خودکار */
.w-50 { width: 50%; }                                      /* نصف عرض */
.max-w-100 { max-width: 100%; }                            /* حداکثر عرض کامل */

/* --- Height --- */
.h-100 { height: 100%; }                                   /* ارتفاع کامل */
.h-auto { height: auto; }                                  /* ارتفاع خودکار */
.min-h-screen { min-height: 100vh; }                       /* حداقل ارتفاع = کل صفحه */

/* --- Position --- */
.relative { position: relative; }                          /* نسبی */
.absolute { position: absolute; }                          /* مطلق */
.fixed { position: fixed; }                                /* ثابت */
.sticky { position: sticky; top: 0; }                      /* چسبان به بالا */

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }                     /* مخفی کردن سرریز */
.overflow-auto { overflow: auto; }                         /* اسکرول خودکار */
.overflow-x-auto { overflow-x: auto; }                     /* اسکرول افقی خودکار */
.overflow-y-auto { overflow-y: auto; }                     /* اسکرول عمودی خودکار */
.overflow-x-hidden { overflow-x: hidden; }                 /* مخفی کردن سرریز افقی */

/* --- Visibility --- */

/* مخفی کامل */
.hidden {
    display: none !important;
}

/* قابل مشاهده */
.visible {
    visibility: visible;
}

/* نامرئی (جا اشغال می‌کنه ولی دیده نمیشه) */
.invisible {
    visibility: hidden;
}

/* فقط برای صفحه‌خوان — مخفی بصری */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- ریسپانسیو visibility --- */

/* فقط موبایل — به‌طور پیش‌فرض مخفی */
.mobile-only {
    display: none;
}

/* فقط دسکتاپ — به‌طور پیش‌فرض نمایش */
.desktop-only {
    display: block;
}

/* در موبایل: mobile-only نمایش و desktop-only مخفی */
@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    .desktop-only {
        display: none;
    }
}

/* --- Border Radius --- */
.rounded-sm { border-radius: var(--radius-sm); }           /* 4px */
.rounded { border-radius: var(--radius-md); }              /* 8px */
.rounded-md { border-radius: var(--radius-md); }           /* 8px */
.rounded-lg { border-radius: var(--radius-lg); }           /* 12px */
.rounded-xl { border-radius: var(--radius-xl); }           /* 16px */
.rounded-full { border-radius: var(--radius-full); }       /* 9999px — دایره */
.rounded-0 { border-radius: 0; }                           /* بدون گردی */

/* --- Border --- */
.border { border: 1px solid var(--color-border); }                     /* حاشیه کامل */
.border-0 { border: 0; }                                              /* بدون حاشیه */
.border-top { border-top: 1px solid var(--color-border); }             /* حاشیه بالا */
.border-bottom { border-bottom: 1px solid var(--color-border); }       /* حاشیه پایین */
.border-right { border-right: 1px solid var(--color-border); }         /* حاشیه راست */
.border-left { border-left: 1px solid var(--color-border); }           /* حاشیه چپ */

/* --- Background --- */
.bg-primary { background-color: var(--color-primary); }                /* آبی برند */
.bg-primary-light { background-color: var(--color-primary-light); }    /* آبی خیلی روشن */
.bg-accent { background-color: var(--color-accent); }                  /* خردلی */
.bg-white { background-color: var(--color-bg); }                       /* سفید */
.bg-secondary { background-color: var(--color-bg-secondary); }         /* خاکستری روشن */
.bg-dark { background-color: var(--color-bg-dark); }                   /* تیره */
.bg-success { background-color: var(--color-success-light); }          /* سبز روشن */
.bg-warning { background-color: var(--color-warning-light); }          /* زرد روشن */
.bg-danger { background-color: var(--color-danger-light); }            /* قرمز روشن */
.bg-info { background-color: var(--color-info-light); }                /* آبی روشن */
.bg-transparent { background-color: transparent; }                     /* شفاف */

/* --- Shadow --- */
.shadow-none { box-shadow: var(--shadow-none); }                       /* بدون سایه */
.shadow-xs { box-shadow: var(--shadow-xs); }                           /* سایه خیلی کم */
.shadow-sm { box-shadow: var(--shadow-sm); }                           /* سایه کم */
.shadow { box-shadow: var(--shadow-md); }                              /* سایه متوسط */
.shadow-md { box-shadow: var(--shadow-md); }                           /* سایه متوسط */
.shadow-lg { box-shadow: var(--shadow-lg); }                           /* سایه بزرگ */
.shadow-xl { box-shadow: var(--shadow-xl); }                           /* سایه خیلی بزرگ */

/* --- Cursor --- */
.cursor-pointer { cursor: pointer; }                                   /* نشانگر دست */
.cursor-default { cursor: default; }                                   /* نشانگر پیش‌فرض */
.cursor-not-allowed { cursor: not-allowed; }                           /* نشانگر غیرمجاز */

/* --- User Select --- */
.select-none { user-select: none; }                                    /* غیرقابل انتخاب */
.select-all { user-select: all; }                                      /* انتخاب کامل با یک کلیک */
.select-text { user-select: text; }                                    /* قابل انتخاب متنی */

/* --- Transition --- */
.transition { transition: all var(--transition-normal); }               /* انتقال عادی: 250ms */
.transition-fast { transition: all var(--transition-fast); }            /* انتقال سریع: 150ms */
.transition-slow { transition: all var(--transition-slow); }            /* انتقال آرام: 350ms */
.transition-none { transition: none; }                                  /* بدون انتقال */


/* ═══════════════════════════════════════ */
/* ═══ بخش ۷ — انیمیشن‌های پایه        ═══ */
/* ═══════════════════════════════════════ */

/* انیمیشن محو شدن ورودی */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* انیمیشن محو شدن خروجی */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* انیمیشن محو شدن از پایین به بالا */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* انیمیشن محو شدن از بالا به پایین */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* انیمیشن اسلاید از راست */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* انیمیشن اسلاید از چپ */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* انیمیشن بزرگ‌نمایی ورودی */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* انیمیشن چرخش مداوم */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* انیمیشن نبض (ضربان) */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* انیمیشن پرش */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* انیمیشن لرزش */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* --- کلاس‌های انیمیشن --- */

/* محو شدن ورودی */
.animate-fade-in {
    animation: fadeIn var(--animation-duration-normal) ease forwards;            /* 300ms */
}

/* محو شدن از پایین به بالا */
.animate-fade-in-up {
    animation: fadeInUp var(--animation-duration-normal) ease forwards;          /* 300ms */
}

/* محو شدن از بالا به پایین */
.animate-fade-in-down {
    animation: fadeInDown var(--animation-duration-normal) ease forwards;        /* 300ms */
}

/* اسلاید از راست */
.animate-slide-in-right {
    animation: slideInRight var(--animation-duration-normal) ease forwards;      /* 300ms */
}

/* اسلاید از چپ */
.animate-slide-in-left {
    animation: slideInLeft var(--animation-duration-normal) ease forwards;       /* 300ms */
}

/* بزرگ‌نمایی ورودی */
.animate-scale-in {
    animation: scaleIn var(--animation-duration-fast) ease forwards;             /* 200ms */
}

/* چرخش مداوم — مثلاً لودینگ */
.animate-spin {
    animation: spin 1s linear infinite;
}

/* نبض مداوم — مثلاً نشانگر آنلاین */
.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* پرش مداوم — مثلاً توجه کاربر */
.animate-bounce {
    animation: bounce 1s ease infinite;
}

/* لرزش — مثلاً خطای فرم */
.animate-shake {
    animation: shake 0.5s ease;
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۸ — ساختار کلی صفحه        ═══ */
/* ═══════════════════════════════════════ */

/* --- پوشش کلی صفحه — فوتر همیشه پایین --- */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;                             /* ارتفاع داینامیک برای موبایل */
}

/* محتوای اصلی — فضای بین هدر و فوتر رو پر می‌کنه */
.page-content {
    flex: 1;
    padding-top: var(--page-padding-top);           /* calc(var(--navbar-height) + 2rem) */
}

/* عنوان صفحه */
.page-title {
    font-size: var(--font-size-3xl);                /* 2.25rem (36px) */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text);                       /* رنگ متن اصلی */
    margin-bottom: var(--spacing-2);                /* 0.5rem */
}

/* زیرعنوان صفحه */
.page-subtitle {
    font-size: var(--font-size-md);                 /* 1.125rem (18px) */
    color: var(--color-text-light);                 /* خاکستری */
    margin-bottom: var(--spacing-7);                /* 2rem */
}

/* هدر صفحه — شامل عنوان و زیرعنوان */
.page-header {
    margin-bottom: var(--spacing-7);                /* 2rem */
    padding-bottom: var(--spacing-6);               /* 1.5rem */
    border-bottom: 1px solid var(--color-border);   /* خط جداکننده */
}

/* --- حالت خالی (Empty State) --- */

/* پوشش حالت خالی — وقتی محتوایی نیست */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-10) var(--spacing-4);    /* 4rem 1rem */
    text-align: center;
}

/* آیکون حالت خالی */
.empty-state-icon {
    width: 80px;
    height: 80px;
    margin-bottom: var(--spacing-6);                /* 1.5rem */
    opacity: 0.4;
}

/* عنوان حالت خالی */
.empty-state-title {
    font-size: var(--font-size-lg);                 /* 1.25rem */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text);                       /* رنگ متن اصلی */
    margin-bottom: var(--spacing-2);                /* 0.5rem */
}

/* متن توضیحی حالت خالی */
.empty-state-text {
    font-size: var(--font-size-base);               /* 1rem */
    color: var(--color-text-light);                 /* خاکستری */
    margin-bottom: var(--spacing-6);                /* 1.5rem */
    max-width: 400px;
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۹ — متفرقه                  ═══ */
/* ═══════════════════════════════════════ */

/* --- آواتار (تصویر پروفایل گرد) --- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);              /* دایره کامل */
    overflow: hidden;
    background-color: var(--color-bg-secondary);    /* پس‌زمینه خاکستری */
    color: var(--color-text-light);                 /* رنگ متن خاکستری */
    font-weight: var(--font-weight-bold);           /* متن بولد */
    flex-shrink: 0;                                 /* جلوگیری از کوچک شدن */
}

/* آواتار کوچک — لیست‌ها */
.avatar-sm {
    width: var(--avatar-sm);                        /* 32px */
    height: var(--avatar-sm);
    font-size: var(--font-size-xs);                 /* 0.75rem */
}

/* آواتار متوسط — navbar */
.avatar-md {
    width: var(--avatar-md);                        /* 40px */
    height: var(--avatar-md);
    font-size: var(--font-size-sm);                 /* 0.875rem */
}

/* آواتار بزرگ — پروفایل */
.avatar-lg {
    width: var(--avatar-lg);                        /* 64px */
    height: var(--avatar-lg);
    font-size: var(--font-size-lg);                 /* 1.25rem */
}

/* آواتار خیلی بزرگ — صفحه پروفایل */
.avatar-xl {
    width: var(--avatar-xl);                        /* 96px */
    height: var(--avatar-xl);
    font-size: var(--font-size-2xl);                /* 1.875rem */
}

/* تصویر داخل آواتار */
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;                              /* پوشش کامل بدون کشیدگی */
}

/* --- قیمت خط‌خورده و تخفیف‌دار --- */

/* قیمت اصلی (قبل از تخفیف) */
.price-original {
    text-decoration: line-through;                  /* خط‌خورده */
    color: var(--color-text-muted);                 /* خاکستری روشن */
    font-size: var(--font-size-sm);                 /* 0.875rem */
}

/* قیمت با تخفیف */
.price-discounted {
    color: var(--color-success);                    /* سبز */
    font-weight: var(--font-weight-bold);           /* بولد */
    font-size: var(--font-size-xl);                 /* 1.5rem */
}

/* --- اسکرولبار سفارشی (Webkit: Chrome, Safari, Edge) --- */

/* عرض و ارتفاع اسکرولبار */
::-webkit-scrollbar {
    width: 8px;                                     /* عرض اسکرولبار عمودی */
    height: 8px;                                    /* ارتفاع اسکرولبار افقی */
}

/* مسیر اسکرولبار (پس‌زمینه) */
::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);          /* خاکستری روشن */
}

/* دسته اسکرولبار */
::-webkit-scrollbar-thumb {
    background: var(--color-border-dark);           /* خاکستری */
    border-radius: var(--radius-full);              /* گرد */
}

/* دسته اسکرولبار در حالت هاور */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-light);            /* خاکستری تیره‌تر */
}

/* --- استایل‌های چاپ --- */
@media print {
    /* پس‌زمینه سفید و متن مشکی */
    body {
        background: white;
        color: black;
    }

    /* مخفی کردن المان‌های غیرضروری در چاپ */
    .navbar,
    .footer,
    .btn,
    .toast {
        display: none !important;
    }

    /* نمایش آدرس لینک‌ها در چاپ */
    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666;
    }

    /* عرض کامل container در چاپ */
    .container {
        max-width: 100%;
        padding: 0;
    }
}

/* ═══ پایان فایل main.css ═══ */