/* ============================================================
   گنج دانش — استایل صفحات استخدام (چهار مرحله)

   پایه از دیزاین سیستم می‌آید:
     gd-tokens.css      رنگ، فاصله، فونت، شعاع، سایه، قاعده‌ی زوم
     gd-components.css  دکمه، کارت، فیلد، هشدار، تگ، مسیر صفحه
     Home_Page.css      هدر، فوتر، کشو، تب‌بار

   اینجا فقط چیزهایی است که مخصوص همین چهار صفحه است، با پیشوند cr- .
   هیچ رنگ خام و هیچ فاصله‌ی خارج از مقیاس اینجا نوشته نشده.

   ⚠ قاعده‌ی زوم: از ۱۰۲۴ واقعی به بالا صفحه با zoom: 0.8 رندر می‌شود و
     zoom روی مدیاکوئری اثر ندارد. پس عددهای مجاز در @media فقط اینهاست:
       min-width: 640 · 768 · 1024 · 1280
       max-width: 639 · 767 · 1023 · 1279
     نگاشت: ۱۰۲۳ واقعی ≡ ۱۲۷۹ مجازی · ۱۲۸۰ واقعی ≡ ۱۶۰۰ مجازی
     نگهبان: python tools/css_zoom_lint.py
   ============================================================ */

/* ============================================================
   ۱. نوار بالا — مسیر صفحه و مراحل
   ============================================================ */
.cr-top {
    padding-block: var(--gd-space-4);
    background: var(--gd-surface-soft);
    border-block-end: 1px solid var(--gd-line);
}
.cr-top .gd-crumbs { margin-block-end: var(--gd-space-4); }

.cr-steps {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gd-space-2);
    text-align: center;
    font-size: var(--gd-text-xs);
    color: var(--gd-muted);
}

/* خط رابط بین دو مرحله. در RTL از وسطِ نقطه به سمت چپ کشیده می‌شود،
   یعنی به سمت مرحله‌ی بعدی. inset-inline-start خودش برعکس می‌شود. */
.cr-step::before {
    content: "";
    position: absolute;
    inset-block-start: 15px;
    inset-inline-start: 50%;
    width: 100%;
    height: 2px;
    background: var(--gd-line);
}
.cr-step:last-child::before { display: none; }
.cr-step.is-done::before    { background: var(--gd-primary); }

.cr-step__dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gd-surface);
    border: 2px solid var(--gd-line);
    border-radius: var(--gd-radius-full);
    font-size: var(--gd-text-sm);
    font-weight: var(--gd-fw-bold);
}
.cr-step.is-active .cr-step__dot {
    background: var(--gd-primary);
    border-color: var(--gd-primary);
    color: var(--gd-on-primary);
    box-shadow: var(--gd-focus-ring);
}
.cr-step.is-done .cr-step__dot {
    background: var(--gd-primary-soft);
    border-color: var(--gd-primary);
    color: var(--gd-primary);
}
.cr-step.is-active .cr-step__label {
    color: var(--gd-ink);
    font-weight: var(--gd-fw-medium);
}

/* موبایل کوچک: فقط نقطه‌ها، بدون برچسب — چهار برچسب فارسی در ۳۲۰ پیکسل
   روی هم می‌افتد و از خود نوار بی‌فایده‌تر می‌شود. */
.cr-step__label { display: none; }

@media (min-width: 640px) {
    .cr-step__label { display: block; font-size: var(--gd-text-xs); }
}
@media (min-width: 768px) {
    .cr-top { padding-block: var(--gd-space-5); }
    .cr-step { font-size: var(--gd-text-sm); }
    .cr-step__dot { width: 36px; height: 36px; }
    .cr-step::before { inset-block-start: 17px; }
}

/* ============================================================
   ۲. سرتیتر بخش‌ها
   ============================================================ */
.cr-head { margin-block-end: var(--gd-space-6); text-align: center; }
.cr-head h2 {
    margin: 0 0 var(--gd-space-2);
    font-size: var(--gd-text-xl);
    line-height: var(--gd-lh-snug);
}
.cr-head p { margin: 0; color: var(--gd-muted); font-size: var(--gd-text-sm); }

@media (min-width: 768px) {
    .cr-head { margin-block-end: var(--gd-space-8); }
    .cr-head h2 { font-size: var(--gd-text-2xl); }
    .cr-head p  { font-size: var(--gd-text-md); }
}

/* ============================================================
   ۳. مرحله ۱ — هیرو
   ============================================================ */
.cr-hero {
    padding-block: var(--gd-space-8);
    background: linear-gradient(160deg, var(--gd-primary-soft), var(--gd-surface-soft));
    border-block-end: 1px solid var(--gd-line);
}
.cr-hero__inner { display: grid; gap: var(--gd-space-8); }

.cr-hero__text h1 {
    margin: var(--gd-space-3) 0 var(--gd-space-4);
    font-size: var(--gd-text-2xl);
    line-height: var(--gd-lh-snug);
}
.cr-hero__text p {
    margin: 0 0 var(--gd-space-6);
    max-width: 56ch;
    color: var(--gd-muted);
    line-height: var(--gd-lh-relaxed);
}
.cr-hero__cta { display: flex; flex-wrap: wrap; gap: var(--gd-space-3); }
.cr-hero__cta .gd-btn { flex: 1 1 auto; justify-content: center; }

.cr-facts {
    display: grid;
    gap: var(--gd-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cr-facts li {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: var(--gd-space-1) var(--gd-space-3);
    padding: var(--gd-space-4);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
}
.cr-facts__icon {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--gd-primary-soft);
    border-radius: var(--gd-radius-full);
    color: var(--gd-primary);
    font-size: var(--gd-text-lg);
}
.cr-facts strong { font-size: var(--gd-text-sm); }
.cr-facts span   { color: var(--gd-muted); font-size: var(--gd-text-xs); }

@media (min-width: 640px) {
    .cr-hero__cta .gd-btn { flex: 0 0 auto; }
    .cr-facts { grid-template-columns: repeat(3, 1fr); }
    .cr-facts li { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .cr-facts__icon { grid-row: auto; }
}
@media (min-width: 768px) {
    .cr-hero { padding-block: var(--gd-space-12); }
    .cr-hero__text h1 { font-size: var(--gd-text-3xl); }
}
@media (min-width: 1024px) {
    .cr-hero__inner {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--gd-space-12);
    }
    .cr-facts { grid-template-columns: 1fr; }
    .cr-facts li { grid-template-columns: 44px 1fr; text-align: start; justify-items: stretch; }
    .cr-facts__icon { grid-row: span 2; }
}
@media (min-width: 1280px) {
    .cr-hero { padding-block: var(--gd-space-16); }
    .cr-hero__text h1 { font-size: var(--gd-text-4xl); }
}

/* ============================================================
   ۴. مرحله ۱ — کارت موقعیت شغلی
   ============================================================ */
.cr-jobs { display: grid; gap: var(--gd-space-4); }

.cr-job-card {
    display: grid;
    gap: var(--gd-space-4);
    padding: var(--gd-space-5);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
    transition: border-color var(--gd-dur-base) var(--gd-ease),
                box-shadow   var(--gd-dur-base) var(--gd-ease);
}
.cr-job-card:hover {
    border-color: var(--gd-primary-border);
    box-shadow: var(--gd-shadow-2);
}

.cr-job-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--gd-primary-soft);
    border-radius: var(--gd-radius-lg);
    color: var(--gd-primary);
    font-size: var(--gd-text-xl);
}
.cr-job-card__body { min-width: 0; }
.cr-job-card h3 {
    margin: var(--gd-space-2) 0;
    font-size: var(--gd-text-lg);
    line-height: var(--gd-lh-snug);
}
.cr-job-card h3 a:hover { color: var(--gd-primary); }
.cr-job-card__body > p {
    margin: 0 0 var(--gd-space-3);
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
}
.cr-job-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gd-space-2) var(--gd-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--gd-muted);
    font-size: var(--gd-text-xs);
}
.cr-job-card__meta i { margin-inline-end: var(--gd-space-1); color: var(--gd-primary); }

.cr-job-card__cta { display: grid; gap: var(--gd-space-2); }
.cr-job-card__cta .gd-btn { justify-content: center; }

@media (min-width: 640px) {
    .cr-job-card { grid-template-columns: 52px minmax(0, 1fr); align-items: start; }
    .cr-job-card__cta { grid-column: 1 / -1; grid-auto-flow: column; }
}
@media (min-width: 1024px) {
    .cr-job-card {
        grid-template-columns: 64px minmax(0, 1fr) 180px;
        gap: var(--gd-space-5);
        padding: var(--gd-space-6);
    }
    .cr-job-card__icon { width: 64px; height: 64px; font-size: var(--gd-text-2xl); }
    .cr-job-card__cta  { grid-column: auto; grid-auto-flow: row; align-self: center; }
}
@media (min-width: 1280px) {
    .cr-job-card { grid-template-columns: 64px minmax(0, 1fr) 200px; }
}

/* ============================================================
   ۵. مرحله ۱ — مسیر استخدام و سوالات متداول
   ============================================================ */
.cr-path { display: grid; gap: var(--gd-space-4); }
.cr-path__item {
    padding: var(--gd-space-5);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
}
.cr-path__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-block-end: var(--gd-space-3);
    background: var(--gd-primary);
    border-radius: var(--gd-radius-full);
    color: var(--gd-on-primary);
    font-weight: var(--gd-fw-bold);
}
.cr-path__item h3 { margin: 0 0 var(--gd-space-2); font-size: var(--gd-text-md); }
.cr-path__item p  {
    margin: 0;
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
}

.cr-faq details {
    margin-block-end: var(--gd-space-2);
    padding-inline: var(--gd-space-5);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
}
.cr-faq summary {
    padding-block: var(--gd-space-4);
    font-weight: var(--gd-fw-medium);
    font-size: var(--gd-text-sm);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gd-space-3);
}
.cr-faq summary::-webkit-details-marker { display: none; }
.cr-faq summary::after {
    content: "\f107";                       /* chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--gd-primary);
    transition: rotate var(--gd-dur-base) var(--gd-ease);
}
.cr-faq details[open] summary::after { rotate: 180deg; }
.cr-faq p {
    margin: 0 0 var(--gd-space-4);
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
}

@media (min-width: 640px) { .cr-path { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cr-path { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   ۶. مرحله ۲ — شرح شغلی
   ============================================================ */
.cr-job__grid { display: grid; gap: var(--gd-space-6); align-items: start; }

.cr-job__head {
    padding-block-end: var(--gd-space-5);
    border-block-end: 1px solid var(--gd-line);
}
.cr-job__head h1 {
    margin: var(--gd-space-3) 0 var(--gd-space-4);
    font-size: var(--gd-text-xl);
    line-height: var(--gd-lh-snug);
}
.cr-job__summary {
    margin: 0 0 var(--gd-space-4);
    color: var(--gd-muted);
    line-height: var(--gd-lh-relaxed);
}
.cr-job__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gd-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cr-job__meta li {
    padding: var(--gd-space-2) var(--gd-space-3);
    background: var(--gd-surface-soft);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-full);
    color: var(--gd-muted);
    font-size: var(--gd-text-xs);
}
.cr-job__meta i { margin-inline-end: var(--gd-space-1); color: var(--gd-primary); }

.cr-block {
    padding-block: var(--gd-space-6);
    border-block-end: 1px solid var(--gd-line);
}
.cr-block:last-of-type { border-block-end: 0; }
.cr-block h2 { margin: 0 0 var(--gd-space-4); font-size: var(--gd-text-lg); }
.cr-block h2 i { margin-inline-end: var(--gd-space-2); color: var(--gd-primary); }

.cr-list { margin: 0; padding: 0; list-style: none; }
.cr-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--gd-space-3);
    margin-block-end: var(--gd-space-3);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
}
.cr-list i {
    flex: 0 0 auto;
    margin-block-start: 7px;
    font-size: var(--gd-text-2xs);
    color: var(--gd-primary);
}
.cr-list--soft  i { color: var(--gd-accent-text); }
.cr-list--check i { margin-block-start: 5px; font-size: var(--gd-text-sm); color: var(--gd-success); }

/* دکمه‌های پایین متن روی موبایل تکراری‌اند: نوار چسبان همان کار را می‌کند. */
.cr-job__cta { display: none; }

.cr-job__aside { display: grid; gap: var(--gd-space-4); }

.cr-panel { padding: var(--gd-space-5); }
.cr-panel--soft { background: var(--gd-surface-soft); }
.cr-panel h3 { margin: 0 0 var(--gd-space-4); font-size: var(--gd-text-md); }
.cr-panel p {
    margin: 0 0 var(--gd-space-3);
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
}
.cr-panel__job {
    color: var(--gd-ink) !important;
    font-size: var(--gd-text-md);
    font-weight: var(--gd-fw-medium);
}
.cr-note {
    display: flex;
    align-items: flex-start;
    gap: var(--gd-space-2);
    margin: var(--gd-space-4) 0 0 !important;
    font-size: var(--gd-text-xs) !important;
}
.cr-note i { margin-block-start: 3px; color: var(--gd-primary); }

.cr-links { margin: 0; padding: 0; list-style: none; }
.cr-links li { margin-block-end: var(--gd-space-3); font-size: var(--gd-text-sm); }
.cr-links li:last-child { margin-block-end: 0; }
.cr-links i { margin-inline-end: var(--gd-space-2); color: var(--gd-primary); }
.cr-links a:hover { color: var(--gd-primary); }

.cr-kv {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--gd-space-2) var(--gd-space-3);
    margin: 0 0 var(--gd-space-5);
    font-size: var(--gd-text-sm);
}
.cr-kv dt { color: var(--gd-muted); }
.cr-kv dd { margin: 0; font-weight: var(--gd-fw-medium); }

@media (min-width: 768px) {
    .cr-job__head h1 { font-size: var(--gd-text-2xl); }
    .cr-job__aside   { grid-template-columns: repeat(2, 1fr); }
    .cr-job__cta     { display: flex; flex-wrap: wrap; gap: var(--gd-space-3); padding-block-start: var(--gd-space-6); }
}
@media (min-width: 1024px) {
    .cr-job__grid  { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gd-space-8); }
    .cr-job__aside { grid-template-columns: 1fr; }
    .cr-job__head h1 { font-size: var(--gd-text-3xl); }
}
@media (min-width: 1280px) {
    .cr-job__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gd-space-12); }
}

/* چسبان فقط وقتی معنی دارد که ستون کناری کنارِ متن باشد */
@media (min-width: 1024px) {
    .cr-sticky { position: sticky; inset-block-start: var(--gd-space-5); }
}

/* ============================================================
   ۷. مرحله ۳ — فرم
   ============================================================ */
.cr-apply__grid { display: grid; gap: var(--gd-space-6); align-items: start; }

.cr-apply__head { margin-block-end: var(--gd-space-6); }
.cr-apply__head h1 {
    margin: var(--gd-space-3) 0 var(--gd-space-2);
    font-size: var(--gd-text-xl);
    line-height: var(--gd-lh-snug);
}
.cr-apply__head p { margin: 0; color: var(--gd-muted); font-size: var(--gd-text-sm); }

/* تله‌ی ربات: از دید بیرون، ولی برای ربات قابل پر کردن.
   display:none نیست چون بعضی ربات‌ها فیلد مخفی را رد می‌کنند. */
.cr-hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cr-set {
    margin: 0 0 var(--gd-space-5);
    padding: var(--gd-space-5);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
}
.cr-set--accent { border-color: var(--gd-primary-border); background: var(--gd-primary-soft); }
.cr-set legend {
    display: flex;
    align-items: center;
    gap: var(--gd-space-3);
    padding-inline: 0;
    font-size: var(--gd-text-md);
    font-weight: var(--gd-fw-bold);
}
.cr-set__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--gd-primary);
    border-radius: var(--gd-radius-full);
    color: var(--gd-on-primary);
    font-size: var(--gd-text-sm);
}
.cr-set__note {
    margin: var(--gd-space-2) 0 0;
    color: var(--gd-muted);
    font-size: var(--gd-text-xs);
}

.cr-fields {
    display: grid;
    gap: var(--gd-space-5);
    margin-block-start: var(--gd-space-5);
}
.cr-fields .gd-field[hidden] { display: none; }

/* گزینه‌های رادیو — چیپ‌های لمسی ۴۴ پیکسلی */
.cr-choices { display: flex; flex-wrap: wrap; gap: var(--gd-space-2); }
.cr-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--gd-space-2);
    min-height: 44px;
    padding: var(--gd-space-2) var(--gd-space-4);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line-strong);
    border-radius: var(--gd-radius-full);
    font-size: var(--gd-text-sm);
    cursor: pointer;
    transition: border-color var(--gd-dur-base) var(--gd-ease),
                background   var(--gd-dur-base) var(--gd-ease),
                color        var(--gd-dur-base) var(--gd-ease);
}
.cr-choice:hover { border-color: var(--gd-primary-border); }
.cr-choice input { margin: 0; accent-color: var(--gd-primary); cursor: pointer; }
/* is-checked را JS می‌گذارد؛ :has برای مرورگر جدید و برای حالت بدون JS */
.cr-choice.is-checked,
.cr-choice:has(input:checked) {
    background: var(--gd-primary-soft);
    border-color: var(--gd-primary);
    color: var(--gd-primary);
    font-weight: var(--gd-fw-medium);
}

.cr-file {
    width: 100%;
    padding: var(--gd-space-3);
    background: var(--gd-surface-soft);
    border: 1px dashed var(--gd-line-strong);
    border-radius: var(--gd-radius);
    font-size: var(--gd-text-sm);
}
.cr-file::file-selector-button {
    margin-inline-end: var(--gd-space-3);
    padding: var(--gd-space-2) var(--gd-space-4);
    background: var(--gd-primary);
    border: 0;
    border-radius: var(--gd-radius-sm);
    color: var(--gd-on-primary);
    font: inherit;
    font-size: var(--gd-text-xs);
    cursor: pointer;
}

.cr-submit {
    padding: var(--gd-space-5);
    background: var(--gd-surface-soft);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
}
.cr-submit__confirm {
    margin-block-end: var(--gd-space-5);
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
}
.cr-submit__row { display: grid; gap: var(--gd-space-3); }
.cr-submit__row .gd-btn { justify-content: center; }

/* روی موبایل دکمه‌ی ارسال داخل فرم تکراری است؛ نوار چسبان کارش را می‌کند */
.cr-submit__row .js-apply-submit { display: none; }

.cr-progress { margin-block: var(--gd-space-4) 0; }
.cr-progress__bar {
    height: 8px;
    margin-block-end: var(--gd-space-2);
    background: var(--gd-line);
    border-radius: var(--gd-radius-full);
    overflow: hidden;
}
.cr-progress__bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gd-primary);
    border-radius: var(--gd-radius-full);
    transition: width var(--gd-dur-slow) var(--gd-ease-out);
}
.cr-progress small { color: var(--gd-muted); font-size: var(--gd-text-xs); }
.cr-progress b { color: var(--gd-primary); }

.cr-apply__aside { display: none; }

@media (min-width: 640px) {
    .cr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cr-fields .gd-field--full { grid-column: 1 / -1; }
    .cr-submit__row { grid-auto-flow: column; justify-content: start; }
    .cr-submit__row .js-apply-submit { display: inline-flex; }
}
@media (min-width: 768px) {
    .cr-apply__head h1 { font-size: var(--gd-text-2xl); }
}
@media (min-width: 1024px) {
    .cr-apply__grid  { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gd-space-8); }
    .cr-apply__aside { display: grid; gap: var(--gd-space-4); }
    .cr-set          { padding: var(--gd-space-6); }
}
@media (min-width: 1280px) {
    .cr-apply__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gd-space-12); }
}

/* ============================================================
   ۸. نوار چسبان پایین — فقط موبایل و تبلت کوچک
   روی گوشی، دکمه‌ی اصلی نباید ته صفحه دفن شود.
   ============================================================ */
.cr-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--gd-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--gd-space-3);
    padding: var(--gd-space-3) var(--gd-gutter);
    padding-block-end: calc(var(--gd-space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--gd-surface);
    border-block-start: 1px solid var(--gd-line);
    box-shadow: var(--gd-shadow-3);
}
.cr-bar__text { flex: 1; min-width: 0; }
.cr-bar__text strong {
    display: block;
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cr-bar__text span { color: var(--gd-muted); font-size: var(--gd-text-xs); }
.cr-bar__progress { flex: 1; min-width: 0; }
.cr-bar__progress small { color: var(--gd-muted); font-size: var(--gd-text-2xs); }
.cr-bar__progress b { color: var(--gd-primary); }
.cr-bar .gd-btn { flex: 0 0 auto; }

/* نوار پایین موبایلِ سایت (تب‌بار) هم همان‌جاست — روی هم نیفتند */
body.gd-careers .cr-bar { inset-block-end: var(--gd-tabbar-h, 60px); }

/* از تبلت به بالا، دکمه در ستون کناری هست و نوار لازم نیست */
@media (min-width: 768px) {
    .cr-bar { display: none; }
}

/* ============================================================
   ۹. مرحله ۴ — پیام موفقیت
   ============================================================ */
.cr-done {
    padding: var(--gd-space-8) var(--gd-space-5);
    text-align: center;
}
.cr-done__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-block-end: var(--gd-space-5);
    background: var(--gd-success-soft);
    border-radius: var(--gd-radius-full);
    color: var(--gd-success);
    font-size: var(--gd-text-2xl);
}
.cr-done h1 { margin: 0 0 var(--gd-space-3); font-size: var(--gd-text-xl); }
.cr-done > p {
    margin: 0 auto var(--gd-space-6);
    max-width: 54ch;
    color: var(--gd-muted);
    line-height: var(--gd-lh-relaxed);
}

.cr-ref {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gd-space-4);
    margin-block-end: var(--gd-space-6);
    padding: var(--gd-space-4) var(--gd-space-5);
    background: var(--gd-surface-soft);
    border: 1px dashed var(--gd-primary);
    border-radius: var(--gd-radius-lg);
}
.cr-ref small  { display: block; color: var(--gd-muted); font-size: var(--gd-text-xs); }
.cr-ref strong {
    font-size: var(--gd-text-lg);
    letter-spacing: 1px;
    color: var(--gd-primary);
}

.cr-next {
    display: grid;
    gap: var(--gd-space-3);
    max-width: 520px;
    margin: 0 auto var(--gd-space-6);
    padding: 0;
    list-style: none;
    text-align: start;
}
.cr-next li {
    display: flex;
    align-items: flex-start;
    gap: var(--gd-space-3);
    padding: var(--gd-space-4);
    background: var(--gd-surface-soft);
    border-radius: var(--gd-radius);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
}
.cr-next i { margin-block-start: 5px; color: var(--gd-primary); }

.cr-done__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gd-space-3);
}
.cr-done__cta .gd-btn { flex: 1 1 auto; justify-content: center; }

.cr-done__foot {
    margin-block-start: var(--gd-space-6);
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
}
.cr-done__foot a { color: var(--gd-primary); font-weight: var(--gd-fw-medium); }

@media (min-width: 640px) {
    .cr-done__cta .gd-btn { flex: 0 0 auto; }
}
@media (min-width: 768px) {
    .cr-done { padding: var(--gd-space-12) var(--gd-space-8); }
    .cr-done h1 { font-size: var(--gd-text-2xl); }
}