/* =========================================================================
   ایران‌گاه — لایه پوسته (Shell): توکن‌ها، هدر، سایدبار، فوتر
   نسخه: v2 (2026-09)
   مقصد در پروداکشن: public/css/shell-v2.css
   وابستگی: ندارد. عمداً بدون Bootstrap نوشته شده تا مستقل و سبک باشد.
   ========================================================================= */

/* ---------- 1) فونت ---------------------------------------------------- */
@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('/theme/css/custom/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('/theme/css/custom/fonts/iransansfanum/woff2/IRANSansWeb(FaNum).woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('/theme/css/custom/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('/theme/css/custom/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- 2) توکن‌های طراحی ------------------------------------------ */
:root {
    /* هویت برند — همان آبی فعلی ایران‌گاه */
    --ir-primary: #0044bb;
    --ir-primary-hover: #0035a0;
    --ir-primary-active: #002a80;
    --ir-primary-soft: #eef4ff;
    --ir-primary-soft-2: #dde9ff;
    --ir-primary-border: #c3d9ff;
    --ir-primary-contrast: #ffffff;

    /* خنثی‌ها */
    --ir-ink: #0f172a;
    --ir-body: #475569;
    --ir-muted: #64748b;
    --ir-line: #e2e8f0;
    --ir-line-soft: #eef2f7;
    --ir-surface: #ffffff;
    --ir-bg: #f7f9fc;
    --ir-bg-alt: #f1f5f9;

    /* وضعیت‌ها */
    --ir-success: #0f8a4d;
    --ir-danger: #c62828;

    /* شعاع و سایه */
    --ir-r-xs: 8px;
    --ir-r-sm: 12px;
    --ir-r-md: 16px;
    --ir-r-lg: 22px;
    --ir-r-pill: 999px;
    --ir-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --ir-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --ir-shadow-md: 0 6px 20px rgba(15, 23, 42, .08);
    --ir-shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);

    /* ابعاد */
    --ir-container: 1240px;
    --ir-gutter: 16px;
    --ir-header-h: 86px;
    --ir-sidebar-w: 336px;

    /* فوکوس */
    --ir-focus: #1d4ed8;
    --ir-focus-ring: 0 0 0 3px rgba(29, 78, 216, .35);

    /* لایه‌بندی z-index — پیش‌تر همه چیز روی z-index:3 بود و تداخل داشت */
    --ir-z-header: 100;
    --ir-z-backdrop: 200;
    --ir-z-sidebar: 210;
    --ir-z-bottombar: 90;
    --ir-z-toast: 400;
}

/* ---------- 3) ریست پایه ----------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* جای اسکرول‌بار همیشه رزرو می‌شود، پس هنگام باز شدن سایدبار و قفل شدن
       اسکرول، صفحه به چپ و راست نمی‌پرد. جایگزین تنظیم دستی padding در JS
       که در RTL سمت اشتباه را پدینگ می‌داد. */
    scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

body.ir-v2 {
    margin: 0;
    font-family: 'IRANSansXFaNum', 'IRANSansfanum', 'IRANSans', 'Vazirmatn', Tahoma, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    color: var(--ir-body);
    background: var(--ir-bg);
    direction: rtl;
    text-align: right;
    overflow-wrap: break-word;
}

body.ir-v2.is-scroll-locked {
    overflow: hidden;
}

/* در صفحات داخلی، پوستهٔ جدید جدا از محتوای قدیمی نگه داشته می‌شود تا
   resetهای v2 تایپوگرافی و لیست‌های قالب قبلی را تغییر ندهند. */
body.ir-v2-shell.is-scroll-locked {
    overflow: hidden;
}

.ir-v2-chrome {
    font-family: 'IRANSansXFaNum', 'IRANSansfanum', 'IRANSans', 'Vazirmatn', Tahoma, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    color: var(--ir-body);
    direction: rtl;
    text-align: right;
    overflow-wrap: break-word;
}

/* هدر را از جعبهٔ کوتاهِ chrome خارج می‌کند تا position:sticky
   نسبت به اسکرول صفحه کار کند؛ فونت و رنگ از همین کلاس به ارث می‌رسد. */
.ir-v2-chrome--header {
    display: contents;
}

/* ============ قواعد ریست ============
   همه داخل :where() پیچیده شده‌اند تا اختصاصیتشان صفر شود.
   قاعده ریست هرگز نباید از استایل یک کامپوننت قوی‌تر باشد؛ در غیر این‌صورت
   هر کامپوننت مجبور می‌شود برای بازپس‌گیری یک رنگ ساده، یا اختصاصیت را
   بالا ببرد یا !important بزند. نمونه‌های واقعی همین پروژه:
     .ir-v2 h1 (0,1,1)     بر  .ir-hero__title (0,1,0)     غلبه می‌کرد → تیتر مشکی
     .ir-v2 button (0,1,1) بر  .ir-btn--primary (0,1,0)    غلبه می‌کرد → متن دکمه نامرئی
     .ir-v2 a (0,1,1)      بر  .ir-btn--primary (0,1,0)    غلبه می‌کرد → متن دکمه نامرئی
   ==================================== */
.ir-v2 :where(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 .5em;
    color: var(--ir-ink);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0;
}

.ir-v2 :where(p) {
    margin: 0 0 1em;
}

/* :where() اختصاصیت را صفر می‌کند، پس این قاعده پایه است و هر کامپوننتی
   (دکمه، کارت، آیتم منو) می‌تواند رنگ خودش را بدون !important تعیین کند.
   بدون :where() اختصاصیت این قاعده (0,1,1) از .ir-btn--primary یعنی (0,1,0)
   بیشتر می‌شد و متن دکمه‌های آبی، آبی روی آبی و نامرئی می‌ماند. */
.ir-v2 :where(a) {
    color: var(--ir-primary);
    text-decoration: none;
    transition: color .15s ease;
}

.ir-v2 :where(a:hover) {
    color: var(--ir-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ir-v2 :where(img) {
    max-width: 100%;
    height: auto;
}

.ir-v2 :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ir-v2 :where(button) {
    font: inherit;
    color: inherit;
}

/* حلقه فوکوس یکسان و قابل‌رؤیت در کل سایت — قبلاً روی اکثر عناصر وجود نداشت */
.ir-v2 :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ir-focus);
    outline-offset: 2px;
    border-radius: var(--ir-r-xs);
}

/* ---------- 4) کمکی‌ها -------------------------------------------------- */
.ir-container {
    width: 100%;
    max-width: var(--ir-container);
    margin-inline: auto;
    padding-inline: var(--ir-gutter);
}

/* اسپرایت آیکون‌ها: باید در DOM باشد ولی فضایی اشغال نکند */
.ir-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ir-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* پرش به محتوا — برای کاربران کیبورد و صفحه‌خوان */
.ir-skip-link {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 500;
    transform: translateY(-200%);
    padding: 10px 18px;
    background: var(--ir-primary);
    color: #fff;
    border-radius: var(--ir-r-xs);
    font-weight: 700;
    box-shadow: var(--ir-shadow-md);
    transition: transform .18s ease;
}

.ir-skip-link:focus {
    transform: translateY(0);
    color: #fff;
    text-decoration: none;
}

/* ---------- 5) دکمه‌ها --------------------------------------------------- */
.ir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    /* حداقل اندازه هدف لمسی طبق WCAG 2.5.8 */
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--ir-r-xs);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.ir-btn:active {
    transform: translateY(1px);
}

/* الگوی .block.block--modifier عمدی است و اختصاصیت را به (0,2,0) می‌رساند.
   دلیل: دکمه باید هر جای صفحه قرار بگیرد رنگ خودش را نگه دارد. با اختصاصیت
   (0,1,0) قواعد زمینه‌ای مثل .ir-footer a یعنی (0,1,1) آن را بازنویسی می‌کردند
   و متن دکمه CTA در فوتر رنگ لینک‌های فوتر را می‌گرفت. */
.ir-btn.ir-btn--primary {
    background: var(--ir-primary);
    border-color: var(--ir-primary);
    color: #fff;
}

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

.ir-btn.ir-btn--outline {
    background: transparent;
    border-color: var(--ir-primary);
    color: var(--ir-primary);
}

.ir-btn.ir-btn--outline:hover {
    background: var(--ir-primary-soft);
    color: var(--ir-primary-hover);
}

.ir-btn.ir-btn--ghost {
    background: transparent;
    border-color: var(--ir-line);
    color: var(--ir-ink);
}

.ir-btn.ir-btn--ghost:hover {
    background: var(--ir-bg-alt);
    color: var(--ir-ink);
}

.ir-btn--sm {
    min-height: 38px;
    padding: 7px 14px;
    font-size: 14px;
}

.ir-btn--block {
    width: 100%;
}

.ir-icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- 6) هدر ------------------------------------------------------ */
.ir-header {
    position: sticky;
    top: 0;
    z-index: var(--ir-z-header);
    background: var(--ir-surface);
    border-bottom: 1px solid var(--ir-line);
    transition: box-shadow .2s ease;
}

.ir-header.is-stuck {
    box-shadow: var(--ir-shadow-sm);
}

.ir-header__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--ir-header-h);
}

.ir-header__start,
.ir-header__end {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
}

.ir-header__end {
    justify-content: flex-end;
}

.ir-header__brand {
    display: inline-flex;
    align-items: center;
    flex: none;
}

/* ارتفاع لوگو با نسخه فعلی سایت هم‌تراز شد (آنجا ۷۲px است) */
.ir-header__brand img {
    width: auto;
    height: 68px;
    display: block;
}

.ir-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: var(--ir-r-xs);
    background: transparent;
    color: var(--ir-ink);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ir-iconbtn:hover {
    background: var(--ir-bg-alt);
    color: var(--ir-primary);
}

.ir-iconbtn .ir-icon {
    width: 22px;
    height: 22px;
}

.ir-header__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--ir-r-xs);
    color: var(--ir-ink);
    font-size: 15px;
    font-weight: 500;
}

.ir-header__link:hover {
    background: var(--ir-bg-alt);
    color: var(--ir-primary);
    text-decoration: none;
}

@media (max-width: 575.98px) {
    :root {
        --ir-header-h: 68px;
    }

    .ir-header__brand img {
        height: 52px;
    }

    .ir-header__link--login span {
        display: none;
    }

    /* ثبت‌نام رایگان روی موبایل: نسخهٔ فعلی روی گوشی خیلی بزرگ و
       غالب به‌نظر می‌رسید — متن دو خط می‌شد و از ارتفاع هدر بیرون می‌زد.
       اینجا به یک قرص فشرده و تک‌خط تبدیل می‌شود؛ آیکون پلاس روی این
       اندازه چیزی اضافه نمی‌کرد، حذف شد. */
    .ir-header .ir-btn--primary {
        min-height: 34px;
        padding: 6px 12px;
        font-size: 12.5px;
        white-space: nowrap;
    }

    .ir-header .ir-btn--primary .ir-icon {
        display: none;
    }
}

/* ---------- 7) سایدبار (کشوی راست) -------------------------------------- */
.ir-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ir-z-backdrop);
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

.ir-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* عمداً از ویژگی‌های فیزیکی (right/left) استفاده شده، نه منطقی.
   دلیل: در RTL مقدار inset-inline-end به لبه «چپ» اشاره می‌کند، ولی
   transform: translateX() همیشه فیزیکی است و با جهت صفحه برعکس نمی‌شود.
   ترکیب این دو، کشو را از سمت اشتباه باز می‌کرد. */
.ir-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    z-index: var(--ir-z-sidebar);
    display: flex;
    flex-direction: column;
    width: min(var(--ir-sidebar-w), 88vw);
    height: 100dvh;
    /* 100dvh به‌جای 100vh — مشکل نوار آدرس موبایل را حل می‌کند */
    background: var(--ir-surface);
    box-shadow: var(--ir-shadow-lg);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s;
}

[dir="ltr"] .ir-sidebar {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

.ir-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
}

.ir-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ir-line);
}

.ir-sidebar__brand img {
    width: auto;
    height: 60px;
    display: block;
}

.ir-sidebar__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* از اسکرول شدن صفحه پشت سایدبار جلوگیری می‌کند */
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

/* کارت پروفایل / مهمان */
.ir-sidebar__profile {
    padding: 18px 16px;
    border: 1px solid var(--ir-primary-border);
    border-radius: var(--ir-r-md);
    background: linear-gradient(180deg, var(--ir-primary-soft) 0%, #fff 100%);
    text-align: center;
}

.ir-sidebar__avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid var(--ir-primary-border);
    display: block;
}

.ir-sidebar__welcome {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ir-ink);
}

.ir-sidebar__hint {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ir-muted);
}

.ir-sidebar__auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ir-sidebar__username {
    display: block;
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ir-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* دکمه اصلی ثبت کسب‌وکار */
.ir-sidebar__cta {
    margin-top: 14px;
}

/* گروه‌های ناوبری — با details/summary تا بدون جاوااسکریپت هم کار کند */
.ir-nav {
    margin-top: 18px;
}

.ir-nav__group {
    border-top: 1px solid var(--ir-line-soft);
}

.ir-nav__group:first-child {
    border-top: 0;
}

.ir-nav__group>summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    cursor: pointer;
    list-style: none;
    color: var(--ir-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    user-select: none;
}

.ir-nav__group>summary::-webkit-details-marker {
    display: none;
}

.ir-nav__group>summary:hover {
    color: var(--ir-ink);
}

.ir-nav__chevron {
    width: 16px;
    height: 16px;
    margin-inline-start: auto;
    transition: transform .2s ease;
}

.ir-nav__group[open]>summary .ir-nav__chevron {
    transform: rotate(180deg);
}

.ir-nav__list {
    padding-bottom: 8px;
}

.ir-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 8px 12px;
    border-radius: var(--ir-r-xs);
    color: var(--ir-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.ir-nav__link:hover {
    background: var(--ir-bg-alt);
    color: var(--ir-primary);
    text-decoration: none;
}

.ir-nav__link .ir-icon {
    width: 20px;
    height: 20px;
    color: var(--ir-muted);
    transition: color .15s ease;
}

.ir-nav__link:hover .ir-icon {
    color: var(--ir-primary);
}

/* صفحه جاری — پیش‌تر هیچ نشانه‌ای برای صفحه فعال وجود نداشت */
.ir-nav__link[aria-current="page"] {
    background: var(--ir-primary-soft);
    color: var(--ir-primary);
    font-weight: 700;
}

.ir-nav__link[aria-current="page"] .ir-icon {
    color: var(--ir-primary);
}

.ir-nav__badge {
    margin-inline-start: auto;
    padding: 1px 9px;
    border-radius: var(--ir-r-pill);
    background: var(--ir-bg-alt);
    color: var(--ir-muted);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ir-sidebar__foot {
    flex: none;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ir-line);
    text-align: center;
    background: var(--ir-bg);
}

.ir-social {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ir-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--ir-line);
    background: var(--ir-surface);
    color: var(--ir-muted);
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.ir-social a:hover {
    color: var(--ir-primary);
    border-color: var(--ir-primary-border);
    background: var(--ir-primary-soft);
}

.ir-social .ir-icon {
    width: 18px;
    height: 18px;
}

.ir-sidebar__copy {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.8;
    color: var(--ir-muted);
}

/* ---------- 8) فوتر ----------------------------------------------------- */
.ir-footer {
    margin-top: 56px;
    background: #0b1733;
    color: #b8c4d9;
}

.ir-footer a {
    color: #d7e2f5;
}

.ir-footer a:hover {
    color: #fff;
}

.ir-footer__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ir-footer__cta h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
}

.ir-footer__cta p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #9fb0cc;
}

.ir-footer__cta .ir-btn.ir-btn--primary {
    background: #2f6bff;
    border-color: #2f6bff;
    color: #fff;
}

.ir-footer__cta .ir-btn.ir-btn--primary:hover {
    background: #1c56e8;
    border-color: #1c56e8;
    color: #fff;
}

.ir-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 28px;
    padding: 36px 0 28px;
}

.ir-footer h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.ir-footer p {
    font-size: 14px;
    line-height: 2;
}

.ir-footer__links li+li {
    margin-top: 2px;
}

.ir-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 14px;
    text-decoration: none;
}

.ir-footer__links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ir-footer__links .ir-icon {
    width: 14px;
    height: 14px;
    color: #64769b;
}

.ir-footer__addr {
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 1.9;
}

.ir-footer__addr .ir-icon {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 6px;
    color: #64769b;
}

.ir-footer__trust {
    margin-top: 16px;
    display: inline-block;
    padding: 6px;
    background: #fff;
    border-radius: var(--ir-r-xs);
    line-height: 0;
}

.ir-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px;
}

.ir-footer__bottom p {
    margin: 0;
}

.ir-footer .ir-social a {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #c3cfe4;
}

.ir-footer .ir-social a:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.ir-footer .ir-social {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .ir-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .ir-footer__grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ir-footer__cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .ir-footer__cta .ir-btn {
        width: 100%;
    }
}

/* ---------- 9) نوار پایین موبایل --------------------------------------- */
.ir-bottombar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--ir-z-bottombar);
    display: none;
    background: var(--ir-surface);
    border-top: 1px solid var(--ir-line);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .07);
    padding-bottom: env(safe-area-inset-bottom);
}

.ir-bottombar__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.ir-bottombar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-height: 58px;
    /* ریست، چون یکی از آیتم‌ها <button> است و بقیه <a> */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--ir-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.ir-bottombar__link:hover,
.ir-bottombar__link[aria-current="page"] {
    color: var(--ir-primary);
    text-decoration: none;
}

.ir-bottombar__link .ir-icon {
    width: 21px;
    height: 21px;
}

@media (max-width: 767.98px) {
    .ir-bottombar {
        display: block;
    }

    body.ir-v2,
    body.ir-v2-shell {
        padding-bottom: 58px;
    }
}

/* ---------- 10) کامپوننت‌های صفحهٔ داخلی -------------------------------
   بردکرامب، هدر صفحه، نوار فیلتر و صفحه‌بندی — همهٔ صفحات فهرستی سایت
   (بانک‌ها، دانشگاه‌ها، شهرها، وب‌سایت‌ها و ...) از این‌ها استفاده می‌کنند،
   پس در shell (سراسری) هستند نه در home.css.
   ------------------------------------------------------------------- */
.ir-breadcrumb {
    margin: 18px 0;
    font-size: 13px;
}

.ir-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--ir-muted);
}

.ir-breadcrumb__list li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ir-breadcrumb__list a {
    color: var(--ir-muted);
}

.ir-breadcrumb__list a:hover {
    color: var(--ir-primary);
    text-decoration: none;
}

.ir-breadcrumb__list li[aria-current="page"] {
    color: var(--ir-ink);
    font-weight: 600;
}

.ir-breadcrumb__sep {
    color: var(--ir-line);
}

.ir-page-head {
    padding-block: 6px 24px;
}

.ir-page-head__title {
    margin: 0 0 8px;
    font-size: clamp(21px, 3vw, 28px);
}

.ir-page-head__lead {
    margin: 0;
    max-width: 72ch;
    font-size: 15px;
    line-height: 2;
    color: var(--ir-muted);
}

.ir-page-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--ir-muted);
}

.ir-page-head__meta strong {
    color: var(--ir-ink);
    font-variant-numeric: tabular-nums;
}

/* نوار فیلتر/جستجوی بالای فهرست */
.ir-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 14px;
    margin-bottom: 22px;
    background: var(--ir-surface);
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-md);
}

.ir-filter-bar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 220px;
    min-height: 44px;
    padding-inline: 12px;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-sm);
    background: var(--ir-bg);
}

.ir-filter-bar__search .ir-icon {
    width: 18px;
    height: 18px;
    color: var(--ir-muted);
    flex: none;
}

.ir-filter-bar__search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--ir-ink);
}

.ir-filter-bar__select {
    flex: 1 1 160px;
    min-height: 44px;
    padding-inline: 12px;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-sm);
    background: var(--ir-surface);
    color: var(--ir-ink);
    font: inherit;
    font-size: 14px;
}

@media (max-width: 575.98px) {
    .ir-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* صفحه‌بندی — لینک‌های واقعی و قابل‌ایندکس، نه فقط «بارگذاری بیشتر».
   الزام AGENTS.md پروژه: هر صفحه باید به آدرس خودش کانونیکال شود، نه
   به صفحهٔ یک. */
.ir-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
}

.ir-pagination__link,
.ir-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding-inline: 8px;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-xs);
    color: var(--ir-ink);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.ir-pagination__ellipsis {
    border-color: transparent;
    color: var(--ir-muted);
}

.ir-pagination__link:hover {
    border-color: var(--ir-primary-border);
    background: var(--ir-primary-soft);
    color: var(--ir-primary);
    text-decoration: none;
}

.ir-pagination__link[aria-current="page"] {
    background: var(--ir-primary);
    border-color: var(--ir-primary);
    color: #fff;
    font-weight: 700;
}

.ir-pagination__link[aria-disabled="true"] {
    opacity: .4;
    pointer-events: none;
}

.ir-pagination__link .ir-icon {
    width: 16px;
    height: 16px;
}

/* بلوک نتیجهٔ خالی روی صفحات فهرست (جستجوی بی‌نتیجه، فیلتر بدون تطبیق) */
.ir-list-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--ir-muted);
}

.ir-list-empty__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    color: var(--ir-line);
}

.ir-list-empty p {
    margin: 0;
    font-size: 14.5px;
}

/* ---------- 11) فرم‌ها و کارت‌های پروفایل ------------------------------
   کامپوننت عمومی فرم — در پروفایل، ورود/ثبت‌نام و صفحات ویرایش کسب‌وکار
   قابل استفاده مجدد است.
   ------------------------------------------------------------------- */
.ir-profile-layout {
    display: grid;
    gap: 20px;
    max-width: 640px;
}

.ir-profile-card {
    padding: 22px;
    background: var(--ir-surface);
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-md);
}

.ir-profile-card__title {
    margin: 0 0 18px;
    font-size: 16px;
}

.ir-form {
    display: grid;
    gap: 16px;
}

.ir-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 575.98px) {
    .ir-form__row {
        grid-template-columns: 1fr;
    }
}

.ir-form__field {
    display: grid;
    gap: 6px;
}

.ir-form__field label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ir-ink);
}

.ir-form__field input,
.ir-form__field select {
    min-height: 44px;
    padding-inline: 12px;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-sm);
    background: var(--ir-surface);
    color: var(--ir-ink);
    font: inherit;
    font-size: 15px;
}

.ir-form__field input:focus-visible,
.ir-form__field select:focus-visible {
    outline: none;
    border-color: var(--ir-primary);
    box-shadow: var(--ir-focus-ring);
}

.ir-form__field input:disabled {
    background: var(--ir-bg-alt);
    color: var(--ir-muted);
}

.ir-form__locked {
    position: relative;
}

.ir-form__locked input {
    width: 100%;
    padding-inline-end: 40px;
}

.ir-form__locked .ir-icon {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    translate: 0 -50%;
    width: 16px;
    height: 16px;
    color: var(--ir-muted);
}

.ir-form__hint {
    margin: 0;
    font-size: 12.5px;
    color: var(--ir-muted);
}