/* =====================================================================
   SARAMAND — main.css
   تنها فایل پایه‌ی طراحی سایت. تا پیش از این، پایه‌ی طراحی بین دو فایل
   base.css و main.css تقسیم شده بود: base.css یک سیستم قدیمی‌تر با پالت
   طلایی بود که روی همه‌ی صفحات به‌جز صفحه‌ی خانه لود می‌شد، و همین باعث
   می‌شد صفحات داخلی با صفحه‌ی خانه هماهنگ نباشند. حالا هر چیزی که واقعاً
   استفاده می‌شد به همین فایل منتقل شده (فونت‌ها از قبل همین‌جا بودند)،
   ارجاع‌های پالت طلایی به توکن‌های سرمه‌ای همین‌جا نگاشت شده، و base.css
   به‌کلی از پروژه حذف شده است.
   ===================================================================== */

/* =====================================================================
   کامپوننت‌های منتقل‌شده از base.css
   این بخش عمداً پیش از قوانین اصلی main.css قرار گرفته تا ترتیب آبشار
   دقیقاً مثل قبل بماند (base.css همیشه قبل از main.css لود می‌شد)، پس
   هر جا main.css همین انتخابگر را داشته باشد، همچنان main.css برنده است.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

table {
    border-collapse: collapse;
    width: 100%;
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
    max-width: 780px;
    margin-inline: auto;
}

/* برچسب کوچک بالای بخش + تیتر درشت زیرش. هر دو بلوکی‌اند، پس هم در
   قاب وسط‌چین کار می‌کنند و هم در ستون‌های راست‌چین. */
.section-tag {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.section-title {
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--primary);
    margin: 0;
    text-wrap: balance;
}

.btn--primary:active {
    transform: translateY(0);
}

.btn__spinner[hidden] {
    display: none;
}

.btn__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

/* ===== BADGES ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* چرخش اسپینرها (.btn__spinner و .loading-inline) */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== INLINE LOADING ===== */
.loading-inline[hidden] {
    display: none;
}

.loading-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 0;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ===== SECTIONS ===== */
.page-section {
    padding: 96px 0;
}

.page-section--alt {
    background: var(--surface);
}

.page-banner {
    padding: 72px 0 48px;
    background: var(--surface);
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.page-banner h1 {
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.page-banner p {
    color: var(--text-muted);
}

.page-banner--car {
    text-align: start;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

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

/* ===== FORM CONTROLS ===== */
.select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.select-wrap select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 36px;
}

.select-wrap__chevron {
    position: absolute;
    inset-inline-end: 12px;
    pointer-events: none;
    color: var(--text-faint);
}

.select-wrap--sm {
    width: auto;
}

.form-row {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.form-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
}

.form-row--split>* {
    min-width: 0;
}

.form-row label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    min-width: 0;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-ring);
}

.form-success[hidden] {
    display: none;
}

.form-success {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-strong);
    font-weight: 600;
    margin-top: 14px;
}

/* ===== CTA FINAL (shared component) ===== */
.cta-final {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--white);
    padding: 108px 0;
    text-align: center;
}

.cta-final__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 680px;
    margin-inline: auto;
}

.cta-final__title {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.16;
    letter-spacing: -0.025em;
    color: #fff;
    font-weight: 700;
    text-wrap: balance;
}

/* ===== CAR CARDS (shared across pages) ===== */
.car-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition:
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        border-color var(--dur-fast) var(--ease);
    display: block;
}

.car-card__image {
    aspect-ratio: 16 / 10;
    background: var(--surface);
    overflow: hidden;
}

.car-card__image--placeholder,
.about-short__image--placeholder,
.car-detail__gallery-main--placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-strong);
    background: var(--surface);
    overflow: hidden;
}

.car-card__image--placeholder::before,
.about-short__image--placeholder::before,
.car-detail__gallery-main--placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%23b8935a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 68 30 40a10 10 0 0 1 9-6h62a10 10 0 0 1 9 6l10 28'/%3E%3Crect x='10' y='68' width='180' height='20' rx='6'/%3E%3Ccircle cx='45' cy='88' r='7'/%3E%3Ccircle cx='155' cy='88' r='7'/%3E%3Cline x1='36' y1='55' x2='164' y2='55'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72% auto;
    opacity: 0.14;
}

.car-card__body {
    padding: 24px;
}

.car-card__title {
    font-size: 1.12rem;
    margin-bottom: 12px;
}

.car-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.car-card__specs span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface);
    padding: 5px 11px;
    border-radius: var(--radius-sm);
}

.car-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.car-card__price {
    font-weight: 700;
    color: var(--primary-strong);
    font-size: 1.05rem;
}

.car-card__compare {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.car-card__compare:hover {
    color: var(--primary-strong);
    border-color: var(--primary);
}

/* ===== COLOR SWATCHES ===== */
.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-swatches .color-swatch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
}

.color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--swatch-color, #ccc);
    cursor: pointer;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    position: relative;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}


.color-swatch__input:checked+.color-swatch {
    box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--primary);
}

.color-swatch__input:focus-visible+.color-swatch {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ===== RANGE SLIDER ===== */
.range-slider {
    position: relative;
    height: 30px;
    margin: 6px 0 2px;
}

.range-slider__track {
    position: absolute;
    top: 50%;
    inset-inline: 2px;
    transform: translateY(-50%);
    height: 4px;
    background: var(--border-strong);
    border-radius: var(--radius-sm);
}

.range-slider__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--primary);
    border-radius: var(--radius-sm);
}

.range-slider .range-slider__input {
    position: absolute;
    inset-inline: 0;
    top: 0;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.range-slider__input::-webkit-slider-runnable-track {
    background: transparent;
    -webkit-appearance: none;
}

.range-slider__input::-moz-range-track {
    background: transparent;
}

.range-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--surface-2);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    margin-top: 0;
}

.range-slider__input::-moz-range-thumb {
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--surface-2);
    box-shadow: var(--shadow-1);
    cursor: pointer;
}

.range-slider__values {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* ===== SEARCH MODAL ===== */
.search-modal[hidden] {
    display: none;
}

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 13, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.search-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    max-height: min(640px, 88vh);
    overflow-y: auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
    animation: modal-in var(--dur) var(--ease-soft);
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.search-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.search-modal__header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
}

.search-modal__header h2 .icon {
    color: var(--primary);
}

.search-modal__close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-modal__close:hover {
    color: var(--primary-strong);
    border-color: var(--primary);
}

.search-modal__body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-modal__footer {
    display: flex;
    gap: 10px;
    padding: 18px 22px;
    border-top: 1px solid var(--border);
}

.search-modal__footer .btn {
    flex: 1;
}

.filters__advanced-btn {
    width: 100%;
    margin-bottom: 16px;
    justify-content: center;
}

@keyframes floating-support-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    70% {
        transform: scale(1.28);
        opacity: 0;
    }

    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

/* ===== RESPONSIVE (generic) ===== */
@media (max-width: 768px) {
    .container {
        padding-inline: 20px;
    }

    .section-header {
        margin-bottom: 44px;
    }

    .form-row--split {
        grid-template-columns: 1fr;
    }

    .page-section {
        padding: 64px 0;
    }

    .cta-final {
        padding: 76px 0;
    }

    .floating-support {
        width: 50px;
        height: 50px;
        right: 16px;
        bottom: 16px;
    }
}

@media (max-width: 480px) {
    .container {
        padding-inline: 16px;
    }

}

/* =========================================================
   SARAMAND — main.css
   توکن‌ها + ریست + هدر + فوتر + منوی موبایل
   این فایل در همه‌ی صفحات لود می‌شود.
   ========================================================= */

/* ===== ۰. فونت وزیر ===== */
@font-face {
    font-family: 'Vazir';
    src: url('../font/Vazir-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazir';
    src: url('../font/Vazir-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazir';
    src: url('../font/Vazir.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazir';
    src: url('../font/Vazir-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazir';
    src: url('../font/Vazir-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== ۱. توکن‌های تم ===== */
:root {
    /* رنگ‌های پایه — سرمه‌ای اداری */
    --navy-900: #060e1c;
    --navy-800: #0a1930;
    --navy-700: #16294a;
    --navy-600: #22406b;
    --navy-500: #2f5590;
    --navy-400: #56709e;

    --white: #ffffff;
    --gray-50: #f7f8fa;
    --gray-100: #f0f1f4;
    --gray-200: #e3e5ea;
    --gray-300: #cbcfd8;
    --gray-400: #9aa0ad;
    --gray-500: #6b7280;
    --gray-600: #4b5262;
    --gray-700: #333947;
    --ink: #0a0c10;

    /* توکن‌های معنایی — حالت روشن */
    --bg: var(--white);
    --bg-elevated: var(--white);
    --surface: var(--gray-50);
    --surface-2: var(--white);
    --surface-sunken: var(--gray-100);

    --border: var(--gray-200);
    --border-strong: var(--gray-300);

    --text: var(--ink);
    --text-muted: var(--gray-500);
    --text-faint: var(--gray-400);

    --primary: var(--navy-600);
    --primary-strong: var(--navy-700);
    --primary-soft: var(--navy-400);
    --on-primary: var(--white);

    --header-bg: rgba(255, 255, 255, 0.85);
    --footer-bg: var(--navy-900);
    --footer-text: var(--gray-300);
    --footer-border: rgba(255, 255, 255, 0.08);

    --scrollbar-thumb: var(--gray-400);
    --scrollbar-track: var(--gray-100);
    --focus-ring: var(--navy-500);

    --grad-primary: linear-gradient(135deg, #2f5590, #16294a);

    --shadow-1: 0 1px 2px rgba(6, 14, 28, 0.05), 0 1px 1px rgba(6, 14, 28, 0.04);
    --shadow-2: 0 8px 24px rgba(6, 14, 28, 0.07), 0 2px 6px rgba(6, 14, 28, 0.04);
    --shadow-3: 0 24px 60px rgba(6, 14, 28, 0.14), 0 6px 16px rgba(6, 14, 28, 0.06);
    --shadow-ring: 0 0 0 3px rgba(34, 64, 107, 0.15);

    /* تایپوگرافی */
    --font-primary: 'Vazir', 'Segoe UI', Tahoma, Arial, sans-serif;

    /* حرکت */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.18s;
    --dur: 0.32s;
    --dur-slow: 0.5s;

    /* گردی گوشه‌ها */
    --radius-sm: 6px;
    --radius-md: 6px;
    --radius-lg: 6px;
    --radius-pill: 6px;

    /* هدر — ظریف و کم‌ارتفاع، چسبیده به لبه‌ی بالا */
    --header-h: 72px;
    --header-h-mobile: 60px;
    --header-gap-top: 0px;
    --header-gap-top-mobile: 0px;
}

/* ===== ۱.۱ توکن‌های حالت تیره ===== */
/* پایه‌ی دارک‌مود مشکیِ خالص و خنثی است (بدون گرایش آبی/سرمه‌ای)؛
   سرمه‌ای فقط به‌عنوان رنگ تاکیدی/هاور کنار طوسی باقی می‌ماند. */
:root[data-theme="dark"] {
    --bg: #000000;
    --bg-elevated: #0d0d0d;
    --surface: #131313;
    --surface-2: #1c1c1c;
    --surface-sunken: #000000;

    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);

    --text: #ffffff;
    --text-muted: #a8a8a8;
    --text-faint: #757575;

    /* در حالت تیره هیچ سرمه‌ای روشنی به کار نمی‌رود. رنگ تأکید سفید است:
       متن‌های تأکیدی سفید می‌شوند و دکمه‌ی اصلی پس‌زمینه‌ی سفید با متن
       مشکی می‌گیرد — یعنی هر جا پس‌زمینه تیره است متن سفید، و هر جا
       پس‌زمینه روشن است متن مشکی. */
    --primary: #ffffff;
    --primary-strong: #dcdcdc;
    --primary-soft: #3a3a3a;
    --on-primary: #000000;

    --header-bg: rgba(0, 0, 0, 0.75);
    --footer-bg: #000000;
    --footer-text: #a8a8a8;
    --footer-border: rgba(255, 255, 255, 0.08);

    --scrollbar-thumb: #3d3d3d;
    --scrollbar-track: #121212;
    --focus-ring: #ffffff;

    --grad-primary: linear-gradient(135deg, #ffffff, #d5d5d5);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.45);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.75), 0 6px 16px rgba(0, 0, 0, 0.55);
    --shadow-ring: 0 0 0 3px rgba(255, 255, 255, 0.28);
}

/* ===== ۲. ریست ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* فلش آبی/خاکستری موبایل هنگام لمس لینک‌ها و دکمه‌ها را حذف می‌کند
       تا انیمیشن‌های خود سایت دیده شوند. فوکوس کیبورد (:focus-visible)
       دست‌نخورده باقی می‌ماند. */
    -webkit-tap-highlight-color: transparent;
}

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

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

body {
    font-family: var(--font-primary);
    background: var(--bg);
    color: var(--text);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
    padding-top: calc(var(--header-h) + var(--header-gap-top) * 2);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--dur-fast) var(--ease);
}

ul {
    list-style: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== ۳. اسکرول‌بار ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-sm);
    border: 2px solid var(--scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-soft);
}

/* ===== ۴. لِی‌اوت و ابزارها ===== */
.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    padding-inline: 24px;
}

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--primary);
    color: var(--on-primary);
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.skip-link:focus {
    inset-inline-start: 0;
}

/* ===== ۵. آیکون‌ها ===== */
.icon {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

[dir="rtl"] .icon--arrow {
    transform: scaleX(-1);
}

.icon-file {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ===== ۶. تایپوگرافی پایه ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

/* ===== ۷. دکمه‌ها ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 13px 30px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    color: var(--text);
    white-space: nowrap;
    transition:
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

/* override base.css's gold text-selection highlight so it matches the navy palette everywhere */
::selection {
    background: var(--navy-400);
    color: #fff;
}

.btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-1);
}

.btn--primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    outline: 1px solid var(--primary);
    outline-offset: 3px;
}

/* override base.css's gold-branded CTA band button/heading so inner pages match the navy palette */
.cta-final .btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-1);
}

.cta-final .btn--primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    outline: 1px solid var(--primary);
    outline-offset: 3px;
}

.cta-final__title em {
    /* بدون ایتالیک، بدون وزن نازک، بدون رنگ متفاوت — em فقط معنای
       تأکید را نگه می‌دارد و ظاهرش دقیقاً مثل بقیه‌ی تیتر است. */
    font-style: normal;
    font-weight: inherit;
    color: inherit;
}

/* override base.css's gold hover border on car listing cards */
.car-card:hover {
    border-color: var(--border-strong);
}

.btn--outline {
    border-color: var(--border-strong);
    color: var(--text);
    background: var(--surface-2);
}

.btn--outline:hover {
    border-color: var(--primary);
    box-shadow: none;
}

.btn--ghost {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn--ghost:hover {
    border-color: #fff;
}

.btn--lg {
    padding: 16px 40px;
    font-size: 1rem;
}

.btn--sm {
    padding: 9px 20px;
    font-size: 0.8rem;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== ۹. هدر — نوار ثابت و آرام ===== */
.header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1000;
    background: var(--header-bg);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid transparent;
    transition:
        border-color var(--dur) var(--ease-soft),
        box-shadow var(--dur) var(--ease-soft),
        background var(--dur) var(--ease-soft);
}

.header.is-scrolled {
    border-color: var(--border);
    box-shadow: var(--shadow-1);
}

.header__container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    height: var(--header-h);
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 24px;
}

.header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header__logo-img {
    height: 36px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.header__logo-img--white {
    display: none;
}

:root[data-theme="dark"] .header__logo-img--navy {
    display: none;
}

:root[data-theme="dark"] .header__logo-img--white {
    display: block;
}

.header__logo-fallback {
    display: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
}

.header__logo.is-broken .header__logo-img {
    display: none;
}

.header__logo.is-broken .header__logo-fallback {
    display: inline-block;
}

.header__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.header__menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.header__menu a {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
    padding: 8px 0;
    white-space: nowrap;
}

.header__menu a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    inset-inline-start: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    border-radius: var(--radius-sm);
    transition: width var(--dur) var(--ease);
}

.header__menu a:hover,
.header__menu a.active {
    color: var(--text);
}

.header__menu a:hover::after,
.header__menu a.active::after {
    width: 100%;
}

.header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.theme-toggle {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease), opacity 0.15s ease,
        width 0.35s var(--ease-soft), margin 0.35s var(--ease-soft), border-width 0.35s var(--ease-soft);
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--border);
    background: var(--surface);
}

.theme-toggle__icon {
    position: absolute;
    display: grid;
    place-items: center;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.theme-toggle__icon--moon {
    opacity: 0;
    transform: scale(0.4) rotate(-50deg);
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
    opacity: 0;
    transform: scale(0.4) rotate(50deg);
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.lang-switch {
    position: relative;
    flex-shrink: 0;
    transition: opacity 0.15s ease, width 0.35s var(--ease-soft), margin 0.35s var(--ease-soft);
}

.lang-switch__current {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding-inline: 12px;
    border-radius: var(--radius-sm);
    /* کادر نرم تا دکمه‌ی زبان به‌عنوان دکمه دیده شود: روز سرمه‌ای کم‌رنگ،
       شب سفید کم‌رنگ (پایین همین قاعده). */
    border: 1px solid rgba(10, 25, 48, 0.28);
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-muted);
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

:root[data-theme="dark"] .lang-switch__current {
    border-color: rgba(255, 255, 255, 0.28);
}

.lang-switch__current:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--surface);
}

.lang-switch__chevron {
    transition: transform var(--dur) var(--ease);
}

.lang-switch.is-open .lang-switch__chevron {
    transform: rotate(180deg);
}

.lang-switch__menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
    min-width: 130px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all var(--dur) var(--ease);
    z-index: 500;
    overflow: hidden;
}

.lang-switch.is-open .lang-switch__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switch__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-size: 0.85rem;
    transition: background var(--dur-fast) var(--ease);
}

.lang-switch__item:hover {
    background: var(--surface);
    color: var(--primary);
}

.flag-icon {
    flex-shrink: 0;
    display: inline-block;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* دکمه جستجوی هدر یک لینک ساده به صفحه خودروهاست — با کلیک همون‌جا
   می‌ره و توی خودِ هدر هیچ اتفاقی (باز شدن/جمع شدن چیزی) نمی‌افته. */
.header-search__link {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease);
}

.header-search__link:hover {
    color: var(--primary);
    border-color: var(--border);
    background: var(--surface);
}

.header__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
}

.header__hamburger span {
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 2px;
    margin: 0;
    padding: 0;
    background: var(--text);
    border-radius: 2px;
    transition: all var(--dur) var(--ease);
}

.header__hamburger.is-open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.header__hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.header__hamburger.is-open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ===== ۱۰. منوی موبایل ===== */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1500;
    visibility: hidden;
    pointer-events: none;
}

.mobile-menu.is-open {
    visibility: visible;
    pointer-events: all;
}

.mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 14, 28, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-soft);
}

.mobile-menu.is-open .mobile-menu__backdrop {
    opacity: 1;
}

.mobile-menu__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: min(360px, 88vw);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
    padding: 22px 24px 28px;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-soft);
    overflow-y: auto;
}

[dir="rtl"] .mobile-menu__panel {
    transform: translateX(-100%);
}

.mobile-menu.is-open .mobile-menu__panel {
    transform: translateX(0);
}

.mobile-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.mobile-menu__close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.mobile-menu__close:hover {
    color: var(--primary);
    border-color: var(--primary-soft);
}

.mobile-menu__search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.mobile-menu__search:focus-within {
    border-color: var(--primary-soft);
    box-shadow: var(--shadow-ring);
}

.mobile-menu__search-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--text-faint);
}

.mobile-menu__search input {
    flex: 1;
    min-width: 0;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
}

.mobile-menu__search input::placeholder {
    color: var(--text-faint);
}

.mobile-menu__search input:focus {
    outline: none;
}

.mobile-menu__nav {
    flex: none;
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-menu__list li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
    transition-delay: calc(var(--i, 0) * 45ms);
}

.mobile-menu.is-open .mobile-menu__list li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    font-size: 1.04rem;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.mobile-menu__list a.active {
    color: var(--primary);
}

.mobile-menu__footer {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

.mobile-menu__footer .btn {
    width: 100%;
}

.mobile-menu__utils {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobile-menu__langs {
    display: flex;
    gap: 8px;
}

.mobile-menu__lang-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.mobile-menu__lang-item:hover {
    color: var(--primary);
    border-color: var(--primary-soft);
}

/* ===== ۱۱. فوتر ===== */
/* هر صفحه با یک سکشن تمام می‌شود که خودش ۹۶ پیکسل فاصله‌ی پایینی دارد؛
   margin-top فوتر روی آن سوار می‌شد و قبل از فوتر ۱۹۲ پیکسل فضای خالی
   می‌ساخت. حالا همان فاصله‌ی سکشن کافی است. */
.footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 64px 0 0;
    margin-top: 0;
}

.footer__container {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: 32px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--footer-border);
}

.footer__logo--slot {
    display: block;
    width: 170px;
    height: 44px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}

.footer__logo--slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

[dir="rtl"] .footer__logo--slot img {
    object-position: right center;
}

.footer__col--brand p {
    font-size: 0.85rem;
    margin: 16px 0;
    opacity: 0.8;
    line-height: 1.9;
}

.footer__col h4 {
    font-size: 0.82rem;
    margin-bottom: 18px;
    color: var(--gray-300);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer__col--hours h4 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer__col--hours h4 .icon-file {
    opacity: 0.8;
    flex-shrink: 0;
}

.footer__col p,
.footer__col li {
    font-size: 0.85rem;
    opacity: 0.82;
    line-height: 2.15;
}

.footer__col p {
    display: flex;
    align-items: center;
    gap: 9px;
}

.footer__col p .icon-file {
    opacity: 0.75;
    flex-shrink: 0;
}

/* فقط لینک‌های متنی؛ دکمه‌ها (مثل «عضویت در کانال») رنگ متن خودشان را نگه می‌دارند —
   وگرنه در حالت شب متن سفید روی دکمه‌ی روشن ناپدید می‌شد. */
.footer__col a:not(.btn):hover {
    color: #fff;
    opacity: 1;
}

.btn--primary:hover,
.btn--primary:focus-visible { color: var(--on-primary); }

.footer__social {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: grid;
    place-items: center;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.footer__social a:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: none;
}

.footer__social img {
    width: 18px;
    height: 18px;
}

/* دکمه‌ی عضویت هم‌عرض متن بالای خودش (کل عرض ستون)، با متن وسط‌چین. */
.footer__telegram-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 16px;
}

/* اینماد: بعد از بارگذاری کامل صفحه از روی <template> اضافه می‌شود (main.js)
   تا سرعت باز شدن صفحه را کم نکند. */
.footer__enamad {
    display: flex;
    justify-content: center;
    margin-top: 18px;
    line-height: 0;
}

.footer__enamad:empty { display: none; }

.footer__enamad img {
    display: block;
}

.footer__telegram-btn img {
    flex-shrink: 0;
}

.footer__bottom {
    padding: 22px 0;
    text-align: center;
    font-size: 0.8rem;
}

/* کپی‌رایت کم‌رنگ می‌ماند، ولی لینک‌های «سوالات متداول» و «قوانین و
   مقررات» کنارش باید خوانا باشند؛ برای همین کم‌رنگی از خودِ ردیف به
   پاراگراف منتقل شده. */
.footer__bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 24px;
}
.footer__bottom p { opacity: 0.55; margin: 0; }

.footer__legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
}
.footer__legal a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    opacity: 0.8;
    transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.footer__legal a svg {
    flex-shrink: 0;
    opacity: 0.85;
}

.footer__legal a:hover,
.footer__legal a:focus-visible {
    opacity: 1;
    color: #fff;
}

/* ===== ۱۲. دکمه‌ی شناور پشتیبانی ===== */
.floating-support {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 950;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--grad-primary);
    color: #fff;
    box-shadow: var(--shadow-3);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.floating-support img {
    filter: brightness(0) invert(1);
}

.floating-support:hover {
    transform: none;
    background: var(--grad-primary);
    box-shadow: none;
}

:root[data-theme="dark"] .floating-support:hover {
    background: var(--primary);
}

/* در حالت تیره رنگ تأکید سفید است، پس دایره‌ی این دکمه سفید می‌شود؛ ولی
   آیکونش با فیلتر invert به سفید تبدیل می‌شد و سفید روی سفید دیده
   نمی‌شد. اینجا فیلتر بدون invert اعمال می‌شود تا آیکون مشکی شود، و
   حلقه‌ی تپنده‌ی دورش هم که با --primary-soft تیره بود، روشن می‌شود تا
   روی پس‌زمینه‌ی مشکی صفحه پیدا باشد. */
:root[data-theme="dark"] .floating-support {
    color: var(--on-primary);
}

:root[data-theme="dark"] .floating-support img {
    filter: brightness(0);
}

:root[data-theme="dark"] .floating-support::after {
    border-color: rgba(255, 255, 255, 0.45);
}

.floating-support::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--primary-soft);
    opacity: 0.55;
    animation: floating-support-pulse 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes floating-support-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.55;
    }

    70% {
        transform: scale(1.28);
        opacity: 0;
    }

    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

/* ===== ۱۳. ریسپانسیو هدر و فوتر ===== */
/* با اضافه‌شدن «خدمات ما» منو ده گزینه دارد؛ در لپ‌تاپ‌های کم‌عرض
   (پیش از آنکه همبرگر ظاهر شود) فاصله و اندازه‌ی گزینه‌ها کمی کم
   می‌شود تا منو با لوگو و دکمه‌ها هم‌پوشانی نکند. */
@media (max-width: 1280px) and (min-width: 1025px) {
    .header__menu { gap: 20px; }
    .header__menu a { font-size: 0.83rem; }
}
@media (max-width: 1160px) and (min-width: 1025px) {
    .header__menu { gap: 13px; }
    .header__menu a { font-size: 0.79rem; }
}
@media (max-width: 1024px) {

    .header__nav,
    .header__actions .theme-toggle,
    .header-search__link {
        display: none;
    }

    .header__hamburger {
        display: flex;
    }

    .header__container {
        grid-template-columns: auto 1fr;
    }

    .footer__container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --header-h: var(--header-h-mobile);
        --header-gap-top: var(--header-gap-top-mobile);
    }

    .header__container {
        padding-inline: 18px;
    }

    .footer__container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer__bottom .container {
        flex-direction: column;
        justify-content: center;
    }

    .footer {
        margin-top: 72px;
        padding-top: 56px;
    }

    .floating-support {
        width: 50px;
        height: 50px;
        right: 16px;
        bottom: 16px;
    }
}

@media (max-width: 400px) {
    .header__logo-img {
        height: 28px;
        max-width: 125px;
    }
}
/* =====================================================================
   بنر مینیمال — کامپوننت مشترک همه‌ی صفحات
   ---------------------------------------------------------------------
   جایگزینِ سه چیزِ قبلی می‌شود: .page-banner ساده‌ی قدیمی، و بنرهای
   شلوغِ اختصاصیِ صفحه‌ی خدمات و اقامتی (پیل‌های شیشه‌ای، کارت‌های آمار،
   گرادیان‌های چندلایه). اینجا عمداً فقط چهار چیز هست: عکس، یک پرده‌ی
   تیرهٔ تخت، یک تیتر، و یک خط توضیح. بدون ایتالیک، بدون فونت نازک،
   بدون رنگ متفاوت برای بخشی از تیتر.

   عکس هر صفحه با <img> داخل .banner__media می‌آید (نه background-image)
   تا مرورگر بتواند آن را زودتر و با اولویت درست بارگذاری کند.
   ===================================================================== */
.banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 62px 0 58px;
    background: var(--navy-900);
}

.banner__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

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

/* یک پرده‌ی ساده و تخت. در RTL متن سمت راست است، پس تیرگی از راست
   شروع می‌شود؛ inset-inline نداریم اینجا چون گرادیان باید با جهت متن
   بچرخد، برای همین در بخش RTL پایین دوباره تعریف شده. */
.banner__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to left, rgba(6, 14, 28, 0.86) 0%, rgba(6, 14, 28, 0.62) 46%, rgba(6, 14, 28, 0.24) 100%);
}

:root[data-theme="dark"] .banner__scrim {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.70) 46%, rgba(0, 0, 0, 0.34) 100%);
}

.banner__inner {
    max-width: 640px;
    color: #fff;
}

.banner .breadcrumb {
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
}

.banner .breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.banner .breadcrumb a:hover { color: #fff; }
.banner .breadcrumb span:last-child { color: rgba(255, 255, 255, 0.92); }

/* برچسب بالای تیتر: متن ساده، بدون قرص، بدون بلور، بدون نقطه‌ی رنگی. */
.banner__eyebrow {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 14px;
}

.banner__title {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0;
    text-wrap: balance;
}

.banner__lede {
    font-size: 0.97rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.75);
    max-width: 46ch;
    margin: 12px 0 0;
}

.banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.banner__actions .btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--navy-800);
}

.banner__actions .btn--primary:hover {
    background: #fff;
    border-color: #fff;
    outline: 1px solid #fff;
    outline-offset: 3px;
}

.banner__actions .btn--ghost {
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
    background: transparent;
}

.banner__actions .btn--ghost:hover {
    border-color: #fff;
}

/* بنر کوتاه، برای صفحه‌هایی که محتوا باید سریع شروع شود. */
.banner--compact {
    padding: 46px 0 42px;
}

/* ===== حالت اسلایدی (صفحه‌ی خانه) ===== */
/* هیروی تمام‌صفحه: کل ارتفاع دید (منهای هدر ثابت) را می‌گیرد تا در
   لپ‌تاپ بخش بعدی دیده نشود. متن و دکمه‌ها پایین و سمت شروع
   (راست در RTL) می‌نشینند. */
.banner--hero {
    /* در صفحه‌ی خانه body فاصله‌ی بالا ندارد و بنر از زیر هدر ثابت شروع
       می‌شود؛ پس ارتفاع باید کل صفحه باشد (نه صفحه منهای هدر)، وگرنه
       یک نوار سفید به اندازه‌ی هدر پایین صفحه می‌ماند. */
    padding: var(--header-h) 0 0;
    min-height: max(560px, 100vh);
    min-height: max(560px, 100svh);
    display: flex;
    /* دسکتاپ: متن کمی بالاتر از وسط عمودی بنر؛ موبایل پایین همین فایل
       دوباره روی flex-end برمی‌گردد. */
    align-items: center;
}

/* .container داخل فلکس با margin-inline:auto جمع می‌شد و وسط می‌نشست؛
   همین باعث وسط‌چین شدن متن بود. */
.banner--hero > .container {
    width: 100%;
}

.banner--hero .banner__inner {
    max-width: 700px;
    /* بلوک متن کمی بالاتر از وسط بنر. */
    padding-bottom: 12vh;
    /* هم‌تراز لبه‌ی کانتینر (همان خط لوگوی هدر). */
    margin-inline-start: 0;
    text-align: start;
}

.banner--hero .banner__eyebrow {
    letter-spacing: 0;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 16px;
}

.banner--hero .banner__title {
    font-size: clamp(2.1rem, 3.6vw, 3.25rem);
    line-height: 1.3;
    /* سایه‌ی نرم فقط برای جدا کردن تیتر از جزئیات روشن عکس (مثل
       جلوپنجره‌ی خودروی سفید)؛ به چشم نمی‌آید ولی لبه‌ها را تمیز می‌کند. */
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.banner--hero .banner__lede {
    font-size: 1.02rem;
    max-width: 60ch;
    text-wrap: pretty;
    margin-top: 14px;
}

.banner--hero .banner__actions {
    margin-top: 28px;
    justify-content: flex-start;
}

.banner--hero .banner__actions .btn {
    padding: 13px 28px;
}

.banner__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease-in-out;
}

.banner__slide.is-active { opacity: 1; }

/* بنر خانه سه عکس متفاوت را می‌چرخاند و یکی از آن‌ها خودروی سفید است؛
   پرده‌ی پیش‌فرض آنجا اجازه می‌داد پس‌زمینه روشن شود و متن معمولی
   (نه تیتر) زیر حد کنتراست AA بیفتد. این نسخه فقط برای همین حالت
   کمی تیره‌تر است. */
.banner--hero .banner__scrim {
    background:
        linear-gradient(to top, rgba(6, 14, 28, 0.88) 0%, rgba(6, 14, 28, 0.45) 38%, rgba(6, 14, 28, 0) 70%),
        linear-gradient(to left, rgba(6, 14, 28, 0.62) 0%, rgba(6, 14, 28, 0.30) 50%, rgba(6, 14, 28, 0.12) 100%);
}

:root[data-theme="dark"] .banner--hero .banner__scrim {
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.52) 38%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(to left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.36) 50%, rgba(0, 0, 0, 0.16) 100%);
}

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

/* زوم خیلی آرام روی عکس فعال تا بنر ساکن و مرده دیده نشود. */
/* عکس تمام‌قد دو طرفش بریده می‌شود؛ --pos روی هر اسلاید (index.html)
   نقطه‌ای را نگه می‌دارد که خودرو در آن است. */
.banner--hero .banner__slide img {
    object-position: var(--pos, center);
    transform: scale(1.06);
    transition: transform 8s ease-out;
}

.banner--hero .banner__slide.is-active img {
    transform: scale(1);
}

/* نشانگرها از جریان متن بیرون آمده‌اند و در پایین بنر وسط‌چین می‌شوند —
   قبلاً ته ستون متن می‌افتادند و بی‌قرینه دیده می‌شدند. */
.banner__dots {
    position: absolute;
    bottom: 26px;
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}

/* در هیرو، نشانگرها و دکمه‌ی توقف با هم در یک ردیف، هم‌تراز لبه‌ی
   کانتینر و سمت مقابل متن می‌نشینند. */
.banner__controls {
    position: absolute;
    bottom: 40px;
    inset-inline: 0;
    z-index: 2;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.banner--hero .banner__dots {
    position: static;
}

/* نشانگر فعال خودش نوار پیشرفت است. home.js مقدار --p (صفر تا یک) را
   هر فریم روی نشانگر فعال می‌گذارد و با رسیدن به یک، اسلاید بعد می‌آید؛
   پس نوار و اسلاید هیچ‌وقت از هم جدا نمی‌شوند. */
.banner--hero .banner__dot {
    position: relative;
    overflow: hidden;
    height: 3px;
}

/* ناحیه‌ی لمسی بزرگ‌تر از خط ۳ پیکسلی. */
.banner--hero .banner__dot::before {
    content: '';
    position: absolute;
    inset: -12px 0;
}

.banner--hero .banner__dot.is-active {
    background: rgba(255, 255, 255, 0.28);
}

.banner--hero .banner__dot.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: inherit;
    transform-origin: right center;
    transform: scaleX(var(--p, 0));
}

[dir="ltr"] .banner--hero .banner__dot.is-active::after {
    transform-origin: left center;
}

.banner__dot {
    width: 28px;
    height: 3px;
    border: none;
    padding: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), width var(--dur) var(--ease);
}

.banner__dot:hover { background: rgba(255, 255, 255, 0.5); }

.banner__dot.is-active {
    background: #fff;
    width: 44px;
}

.banner__dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

@media (max-width: 720px) {
    .banner { padding: 52px 0 48px; }
    .banner--compact { padding: 42px 0 38px; }

    /* موبایل: بنر بلند ولی نه تمام‌صفحه؛ متن کوچک‌تر و پایین، دکمه‌ها
       کوچک و کنار هم (نه دو دکمه‌ی پهن وسط بنر). */
    /* موبایل: اندازه‌ی بنر همان قبلی است؛ فقط متن‌ها و دکمه‌ها کوچک‌تر. */
    .banner--hero {
        /* بنر از زیر هدر ثابت شروع می‌شود؛ ارتفاع هدر به فاصله‌ی بالا
           اضافه شده تا تیتر زیر هدر نرود. بلندتر از قبل تا عکس خودرو
           بالای متن دیده شود و متن پایین بنشیند. */
        padding: calc(var(--header-h) + 34px) 0 76px;
        min-height: min(640px, 78vh);
        min-height: min(640px, 78svh);
        align-items: flex-end;
    }

    .banner--hero .banner__inner {
        padding-bottom: 0;
        margin-inline-start: 0;
    }

    .banner--hero .banner__eyebrow {
        font-size: 0.76rem;
        margin-bottom: 10px;
    }

    .banner--hero .banner__title {
        font-size: 1.62rem;
        line-height: 1.45;
    }

    .banner--hero .banner__lede {
        font-size: 0.86rem;
        line-height: 1.8;
        margin-top: 8px;
    }

    .banner--hero .banner__actions {
        margin-top: 18px;
        gap: 8px;
    }

    .banner--hero .banner__actions .btn {
        flex: 1 1 0;
        padding: 11px 16px;
        font-size: 0.86rem;
    }

    .banner--hero .banner__scrim {
        background: linear-gradient(to top, rgba(6, 14, 28, 0.92) 0%, rgba(6, 14, 28, 0.62) 45%, rgba(6, 14, 28, 0.25) 100%);
    }

    :root[data-theme="dark"] .banner--hero .banner__scrim {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.68) 45%, rgba(0, 0, 0, 0.32) 100%);
    }

    .banner__controls {
        bottom: 24px;
        padding-inline: 20px;
        justify-content: center;
    }

    .banner__scrim {
        background: linear-gradient(to top, rgba(6, 14, 28, 0.94) 0%, rgba(6, 14, 28, 0.80) 55%, rgba(6, 14, 28, 0.60) 100%);
    }

    :root[data-theme="dark"] .banner__scrim {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 55%, rgba(0, 0, 0, 0.66) 100%);
    }

    .banner__lede { font-size: 0.94rem; }

    /* دکمه‌ها کنار هم می‌مانند؛ تمام‌عرض‌شدن، بنر را سنگین می‌کرد. */
    .banner__actions { gap: 10px; }
    .banner__actions .btn { flex: 1; padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .banner__slide { transition: none; }
    .banner--hero .banner__slide img { transform: none; transition: none; }
}

/* =====================================================================
   منوی کشویی مدرن (ui-select، main.js)
   ===================================================================== */
.ui-select { position: relative; display: block; min-width: 0; }
.ui-select__native {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
}
.select-wrap.has-ui-select { display: block; }
.select-wrap.has-ui-select .select-wrap__chevron { display: none; }

.ui-select__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ui-select__btn:hover { border-color: var(--primary-soft); }
.ui-select__btn:focus-visible,
.ui-select.is-open .ui-select__btn { outline: none; border-color: var(--primary); box-shadow: var(--shadow-ring); }
.ui-select__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ui-select__btn.is-placeholder .ui-select__value { color: var(--text-muted); font-weight: 500; }
.ui-select__value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-select__chev { flex-shrink: 0; color: var(--text-muted); transition: transform 0.25s var(--ease); }
.ui-select.is-open .ui-select__chev { transform: rotate(180deg); color: var(--primary); }

.ui-select__menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1200;
    padding: 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-3);
    scrollbar-width: thin;
    animation: uiSelectIn 0.18s var(--ease);
    transform-origin: top center;
}
.ui-select.is-up .ui-select__menu { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; }
.ui-select__menu[hidden] { display: none; }
@keyframes uiSelectIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

.ui-select__group {
    position: sticky;
    top: -6px;
    z-index: 1;
    margin: 4px -6px 2px;
    padding: 8px 16px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: var(--bg-elevated);
}
.ui-select__group:first-child { margin-top: -6px; padding-top: 12px; }

.ui-select__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.ui-select__opt span { min-width: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.ui-select__opt.is-active { background: var(--surface); }
.ui-select__opt.is-selected { font-weight: 700; color: var(--primary); background: rgba(34, 64, 107, 0.07); }
:root[data-theme="dark"] .ui-select__opt.is-selected { color: #cfe0ff; background: rgba(255, 255, 255, 0.07); }
.ui-select__opt.is-disabled { opacity: 0.45; cursor: default; }
.ui-select__check { flex-shrink: 0; opacity: 0; }
.ui-select__opt.is-selected .ui-select__check { opacity: 1; }

/* در فرم‌ها هم‌شکل بقیه‌ی فیلدها */
.form-row .ui-select__btn { min-height: 48px; padding: 0 16px; border-radius: var(--radius-sm); border-color: var(--border); background: var(--surface-2); font-weight: 500; }

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

/* بنرهای جدا برای موبایل (عمودی ۱۰۸۰×۱۸۰۰): در موبایل فقط همین‌ها و نقطه‌هایشان،
   در دسکتاپ فقط بنرهای افقی. home.js اسلایدهای دیده‌شده را می‌چرخاند. */
@media (min-width: 721px) {
    .banner--hero .banner__slide--mobile,
    .banner--hero .banner__dot--mobile { display: none; }
}
@media (max-width: 720px) {
    .banner--hero:has(.banner__slide--mobile) .banner__slide:not(.banner__slide--mobile),
    .banner--hero:has(.banner__dot--mobile) .banner__dot:not(.banner__dot--mobile) { display: none; }
    .banner--hero .banner__slide--mobile img { object-position: center 35%; }
}

/* ============================================================
   یکپارچگی طراحی: همه‌ی کارت‌ها و دکمه‌ها یک گردی (--radius-sm) دارند،
   بدون سایه‌ی شناور و بدون حرکت؛ هاور کارت فقط رنگ قابش را عوض می‌کند.
   ============================================================ */
.btn--primary, .cta-final .btn--primary { box-shadow: none; }
.vehicle-card:hover, .blog-card:hover, .fz-zone:hover, .fz-card:hover, .info-help__ch:hover,
.inv-card:hover, .car-rel:hover, .car-card:hover, .xsvc-card:hover, .svc-card:hover, .svc-pick__opt:hover,
.svc-flow__step:hover .svc-flow__card, .svc-why2__item:hover, .res-card:hover, .res-tl__card:hover,
.res-country:hover, .res-read:hover, .service-item:hover, .vcard:hover {
    border-color: var(--primary);
}

/* آیکون‌های رنگی ایمیل و موقعیت */
.icon-img { display: inline-block; flex-shrink: 0; object-fit: contain; vertical-align: middle; }
.footer .icon-img--location,
:root[data-theme="dark"] .icon-img--location { filter: brightness(0) invert(1); opacity: 0.85; }