/* ═══════════════════════════════════════════════════════════════════════════
   employe/css/employe.css — استایل ماژول کاریابی تاپ118
   ─────────────────────────────────────────────────────────────────────────
   توکن‌ها عیناً همان reditjobs.css هستند. طبق CONVENTIONS.md بخش ۲، وقتی
   /css/tokens.css ساخته شد، بلوک :root زیر حذف و آن فایل لینک می‌شود.
   همه کلاس‌ها پیشوند emp- دارند تا با header-main / footer-main تداخل نکنند.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Vazirmatn';
    src: url('https://www.top118.ir/css/fonts/Vazirmatn[wght].woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --brand-logo: #FFC400; --primary: #FBB40D; --primary-hover: #E19F04; --primary-active: #CE9204;
    --primary-deep: #A35800; --primary-tint: #FEF5E0; --primary-border: #E0A00A; --on-primary: #2E2E2E;
    --bg: #F7F5F2; --surface: #FFFFFF; --ink-strong: #332F2B; --text: #4A4642; --text-soft: #6E6862;
    --neutral: #CFC9C1; --line: #E8E4DE; --success: #167A4A; --success-tint: #EAF6EF;
    --alert: #C4321F; --alert-tint: #FBEDEA; --radius: 20px; --radius-sm: 12px;
    --shadow: 0 8px 26px rgba(58, 48, 38, .08);
}

/* ───── پایه ───── */
.emp-body { background: var(--bg); color: var(--text); font-family: 'Vazirmatn', system-ui, sans-serif; font-size: 15px; }
.emp-shell h1, .emp-shell h2, .emp-shell h3 { color: var(--ink-strong); }
.emp-shell a { color: var(--primary-deep); }
.emp-shell .breadcrumb { font-size: .85rem; }
.emp-shell .breadcrumb a { text-decoration: none; color: var(--text-soft); }
.emp-meta { font-size: .82rem; color: var(--text-soft); }
.emp-meta i { margin-inline-end: .2rem; }
.min-w-0 { min-width: 0; }

.emp-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* دکمه اصلی: زرد برند با متن تیره (کنتراست WCAG) */
.emp-btn-primary {
    background: var(--primary); border: 1px solid var(--primary-border);
    color: var(--on-primary) !important; font-weight: 700; border-radius: var(--radius-sm);
}
.emp-btn-primary:hover { background: var(--primary-hover); }
.emp-btn-primary:active { background: var(--primary-active); }
.emp-shell .btn-outline-secondary { border-radius: var(--radius-sm); }

/* ───── هیرو و جستجو ───── */
.emp-hero h1 { font-size: 1.35rem; font-weight: 800; }
.emp-search { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .4rem; }
.emp-search .form-control, .emp-search .form-select { border: 0; box-shadow: none; background-color: transparent; }
.emp-search .emp-divider { width: 1px; background: var(--line); margin: .35rem 0; }
@media (min-width: 768px) { .emp-city-select { min-width: 200px; } }

.emp-seg { display: inline-flex; background: #EFEBE6; border-radius: 14px; padding: 4px; }
.emp-seg a { padding: .45rem 1rem; border-radius: 10px; text-decoration: none; color: var(--text-soft) !important; font-weight: 600; font-size: .9rem; }
.emp-seg a.active { background: #fff; color: var(--ink-strong) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }

/* ───── چیپ دسته‌ها (اسکرول افقی موبایل) ───── */
.emp-chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.emp-chips::-webkit-scrollbar { display: none; }
.emp-chip { white-space: nowrap; border: 1px solid var(--line); background: #fff; border-radius: 999px;
            padding: .35rem .85rem; font-size: .85rem; color: var(--text) !important; text-decoration: none; }
.emp-chip.active { background: var(--primary-tint); border-color: var(--primary-border); color: var(--primary-deep) !important; font-weight: 700; }

/* ───── کارت آگهی ───── */
.emp-job-card { display: block; padding: 1rem; text-decoration: none; color: var(--text) !important; transition: border-color .15s, transform .15s; }
.emp-job-card:hover, .emp-job-card:focus-visible { border-color: var(--primary-border); transform: translateY(-2px); }
.emp-job-card h2 { font-size: 1rem; font-weight: 800; margin: 0 0 .15rem; }
.emp-co-logo { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: var(--primary-tint);
               color: var(--primary-deep); display: grid; place-items: center; font-weight: 800; }
.emp-co-logo-lg { width: 56px; height: 56px; flex-basis: 56px; font-size: 1.3rem; border-radius: 14px; }
.emp-tag { display: inline-block; font-size: .75rem; border-radius: 8px; padding: .15rem .5rem; background: #F1EEEA; color: var(--text); white-space: nowrap; }
.emp-tag-new { background: var(--success-tint); color: var(--success); font-weight: 700; }
.emp-wage { font-weight: 700; color: var(--ink-strong); font-size: .88rem; }
.emp-more { font-size: .85rem; font-weight: 700; color: var(--primary-deep); }

/* ───── فیلترها: ستون دسکتاپ / پنل کشویی پایین در موبایل ───── */
@media (max-width: 991.98px) {
    .emp-filters { position: fixed; inset-inline: 0; bottom: 0; z-index: 1045; border-radius: var(--radius) var(--radius) 0 0;
                   transform: translateY(105%); visibility: hidden;   /* بسته: از دسترس کیبورد/صفحه‌خوان خارج */
                   transition: transform .25s ease, visibility .25s; max-height: 80vh; overflow-y: auto; }
    .emp-filters.is-open { transform: translateY(0); visibility: visible; }
    .emp-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1040; }
}
.emp-fab-filter { position: fixed; bottom: 16px; inset-inline-start: 50%; transform: translateX(50%); z-index: 1030;
                  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); border-radius: 999px !important; }
@media (min-width: 992px) { .emp-fab-filter { display: none; } }

/* ───── سایدبار ───── */
.emp-side-cta { padding: 1.25rem; }
.emp-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary-deep); font-size: 1.3rem; }
.emp-city-links a { display: inline-block; margin: 0 0 .4rem .5rem; font-size: .85rem; }
.emp-shell .pagination .page-link { border-radius: 10px !important; margin: 0 .15rem .3rem; border-color: var(--line); color: var(--ink-strong); }
.emp-shell .pagination .active .page-link { background: var(--primary); border-color: var(--primary-border); color: var(--on-primary); }
.emp-seo-text { font-size: .9rem; line-height: 2; }

/* ───── صفحه آگهی ───── */
.emp-job-title { font-size: 1.3rem; font-weight: 800; }
.emp-verified { color: var(--success); }
.emp-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 768px) { .emp-facts { grid-template-columns: repeat(4, 1fr); } }
.emp-fact { background: #FAF8F5; border: 1px solid var(--line); border-radius: 14px; padding: .6rem .75rem; }
.emp-fact .k { font-size: .75rem; color: var(--text-soft); }
.emp-fact .v { font-weight: 700; color: var(--ink-strong); font-size: .9rem; }
.emp-benefit { display: inline-flex; align-items: center; gap: .25rem; background: var(--success-tint); color: var(--success);
               border-radius: 10px; padding: .3rem .7rem; font-size: .85rem; font-weight: 600; }
.emp-section-title { font-size: 1rem; font-weight: 800; margin-bottom: .75rem; }
.emp-job-text { line-height: 2.1; overflow-wrap: anywhere; }
.emp-safety { background: var(--alert-tint); border: 1px solid #F3CFC8; border-radius: 14px; font-size: .85rem; color: #7A2417; }
.emp-expired { background: var(--ink-strong); color: #fff; border-radius: 14px; }
.emp-mini-job { display: block; padding: .75rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text) !important; }
.emp-mini-job:last-of-type { border-bottom: 0; }
.emp-mini-job strong { color: var(--ink-strong); }
.emp-phones a { display: inline-block; font-weight: 700; margin-inline-end: .75rem; direction: ltr; color: var(--ink-strong) !important; }
@media (min-width: 992px) { .emp-sticky { position: sticky; top: 1rem; } }

/* نوار ثابت پایین موبایل: دو اقدام اصلی همیشه در دسترس شست */
.emp-mobile-bar { position: fixed; bottom: 0; inset-inline: 0; background: #fff; border-top: 1px solid var(--line);
                  padding: .6rem .75rem; z-index: 1030; box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); }
@media (max-width: 991.98px) { .emp-body:has(.emp-mobile-bar) { padding-bottom: 76px; } }

@media (prefers-reduced-motion: reduce) {
    .emp-job-card, .emp-filters { transition: none; }
}

/* ───── ورود کارجو (login.php) ───── */
.emp-auth { max-width: 420px; margin: 1.5rem auto; }
.emp-auth-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--primary-tint); color: var(--primary-deep);
               display: grid; place-items: center; font-size: 1.8rem; margin: 0 auto 1rem; }
.emp-otp-input { text-align: center; font-size: 1.6rem; font-weight: 800; letter-spacing: .6em; padding: .6rem;
                 border-radius: 14px; font-family: 'Vazirmatn', monospace; }
.emp-auth .form-control:focus { border-color: var(--primary-border); box-shadow: 0 0 0 .2rem rgba(251, 180, 13, .2); }
.emp-auth-msg { min-height: 1.2rem; font-size: .85rem; }
.emp-auth-msg.is-err { color: var(--alert); }
.emp-auth-msg.is-ok { color: var(--success); }
.emp-auth-dev { background: #FFF8E1; border: 1px dashed var(--primary-border); border-radius: 10px;
                padding: .4rem .6rem; font-size: .8rem; text-align: center; margin-top: .25rem; }

/* ───── ویزارد رزومه (resume-builder.php) ───── */
.emp-wizard { max-width: 780px; }
.emp-shell .form-control, .emp-shell .form-select { border-radius: 12px; border-color: var(--line); }
.emp-shell .form-control:focus, .emp-shell .form-select:focus { border-color: var(--primary-border); box-shadow: 0 0 0 .2rem rgba(251, 180, 13, .2); }
.emp-shell .form-label { font-weight: 700; font-size: .88rem; color: var(--ink-strong); }
.emp-progress { height: 8px; background: #EFEBE6; border-radius: 99px; overflow: hidden; }
.emp-progress-fill { height: 100%; background: var(--primary); border-radius: 99px; transition: width .3s; }
.emp-steps { justify-content: space-between; margin-top: .5rem; }
.emp-steps button { border: 0; background: none; padding: 0; font-size: .75rem; color: var(--text-soft); }
.emp-steps button.on { color: var(--primary-deep); font-weight: 700; }
.emp-step { display: none; }
.emp-step.active { display: block; }
.emp-wz-foot { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: .75rem 1rem;
               border-radius: 0 0 var(--radius) var(--radius); z-index: 5; }
.emp-wz-alert { border-radius: 12px; padding: .5rem .75rem; margin-bottom: 1rem; font-size: .85rem; }
.emp-wz-alert.is-err { background: var(--alert-tint); color: var(--alert); }
.emp-wz-alert.is-ok { background: var(--success-tint); color: var(--success); }
.emp-photo { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%; border: 2px dashed var(--line); display: grid;
             place-items: center; color: var(--text-soft); cursor: pointer; background: #FAF8F5 center/cover no-repeat; margin: 0; }
.emp-photo:hover { border-color: var(--primary-border); }
.emp-exp { border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1rem .75rem; background: #FAF8F5; position: relative; }
.emp-exp-rm { position: absolute; top: .35rem; inset-inline-end: .35rem; z-index: 1; }
.emp-skill { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: 12px; padding: .45rem .7rem; background: #fff; }
.emp-skill-name { font-weight: 600; }
.emp-skill-lv { display: flex; gap: 4px; margin-inline-start: auto; }
.emp-skill-lv button { width: 22px; height: 10px; border-radius: 4px; background: #E8E4DE; border: 0; padding: 0; }
.emp-skill-lv button.on { background: var(--primary); }
.emp-skill-lbl { min-width: 3.2rem; }
.emp-tier { display: block; border: 2px solid var(--line); border-radius: 18px; padding: 1rem; cursor: pointer; background: #fff; height: 100%; margin: 0; }
.emp-tier input { position: absolute; opacity: 0; }
.emp-tier:has(input:checked) { border-color: var(--primary-border); background: var(--primary-tint); }
.emp-tier:has(input:focus-visible) { outline: 2px solid var(--primary-border); outline-offset: 2px; }
.emp-tier.is-disabled { opacity: .55; cursor: not-allowed; }
.emp-tier-price { font-weight: 800; color: var(--ink-strong); }

/* ───── فاز ۳-۴: بانک رزومه، صفحه رزومه، داشبورد ───── */
.emp-tag-feat { background: var(--primary-tint); color: var(--primary-deep); font-weight: 700; }
.emp-member-hint { background: var(--primary-tint); border: 1px solid var(--primary-border); border-radius: 16px; font-size: .9rem; }
.emp-owner-bar { background: #EFEBE6; border-radius: 14px; font-size: .88rem; }
.emp-avatar, .emp-avatar-lg { border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.emp-avatar { width: 52px; height: 52px; }
.emp-avatar-lg { width: 96px; height: 96px; }
.emp-avatar-ph { display: grid; place-items: center; background: var(--primary-tint); color: var(--primary-deep); font-weight: 800; font-size: 1.3rem; }
.emp-avatar-lg.emp-avatar-ph { font-size: 2rem; }
.emp-resume-card { padding: 1rem; text-decoration: none; color: inherit !important; transition: border-color .15s, box-shadow .15s; }
.emp-resume-card:hover { border-color: var(--primary-border); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.emp-resume-card.is-featured { border: 2px solid var(--primary-border); }
.min-w-0 { min-width: 0; }
.emp-skill-lv i { display: inline-block; width: 18px; height: 8px; border-radius: 4px; background: #E8E4DE; }
.emp-skill-lv i.on { background: var(--primary); }
.emp-timeline { list-style: none; padding: 0; margin: 0; border-inline-start: 2px solid var(--line); }
.emp-timeline li { position: relative; padding: 0 1rem 1rem; }
.emp-timeline li::before { content: ''; position: absolute; inset-inline-start: -7px; top: .35rem; width: 12px; height: 12px;
                           border-radius: 50%; background: var(--primary); border: 2px solid #fff; }
.emp-phones a[href^="mailto"] { direction: ltr; font-weight: 600; }
/* داشبورد */
.emp-ring { --p: 0; width: 88px; height: 88px; border-radius: 50%; flex: 0 0 88px; display: grid; place-items: center;
            background: conic-gradient(var(--primary) calc(var(--p) * 1%), #EFEBE6 0); }
.emp-ring span { width: 70px; height: 70px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 800; color: var(--ink-strong); }
.emp-pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 99px; padding: .2rem .7rem; font-size: .8rem; font-weight: 700; background: #EFEBE6; color: var(--text); }
.emp-pill.is-ok { background: var(--success-tint); color: var(--success); }
.emp-pill.is-warn { background: var(--primary-tint); color: var(--primary-deep); }
.emp-pill.is-err { background: var(--alert-tint); color: var(--alert); }
.emp-stat { border: 1px solid var(--line); border-radius: 16px; padding: .75rem; text-align: center; background: #fff; }
.emp-stat .n { font-size: 1.4rem; font-weight: 800; color: var(--ink-strong); }
.emp-stat .k { font-size: .78rem; color: var(--text-soft); }
.emp-offer { border: 1px solid var(--line); border-radius: 18px; padding: 1rem; background: #fff; height: 100%; display: flex; flex-direction: column; }
.emp-offer.is-pending { border: 2px solid var(--primary-border); background: var(--primary-tint); }
.emp-offer .price { font-weight: 800; color: var(--ink-strong); }
.emp-rc-title { font-weight: 800; font-size: 1.05rem; color: var(--primary-deep); line-height: 1.5; }   /* رنگ برند (قهوه‌ای-کهربایی) تا از نام جدا شود */
.emp-rc-name { font-size: .82rem; color: var(--text-soft); }

/* ───── فاز ۴: پنجره ارسال رزومه + درخواست‌های من ───── */
.emp-dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(520px, calc(100% - 2rem)); box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.emp-dialog::backdrop { background: rgba(30, 27, 24, .45); }
.emp-app-row { display: flex; gap: .75rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.emp-app-row:last-child { border-bottom: 0; }

/* ───── نوار کاربر ماژول (زیر هدر سایت) ───── */
.emp-userbar { background: #fff; border-bottom: 1px solid var(--line); font-size: .85rem; }
.emp-userbar .container-xl { min-height: 44px; padding-top: .3rem; padding-bottom: .3rem; }
.emp-userbar-hi { color: var(--text-soft); margin-inline-end: .25rem; }
.emp-userbar-link { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 99px;
                    color: var(--ink-strong) !important; text-decoration: none; font-weight: 600; white-space: nowrap; }
.emp-userbar-link:hover { background: #F1EEEA; }
.emp-userbar-link.active { background: var(--primary-tint); color: var(--primary-deep) !important; }
.emp-userbar-n { background: var(--primary); color: var(--on-primary); border-radius: 99px; padding: 0 .45rem; font-size: .75rem; }
/* موبایل: یک خط با اسکرول افقی (بدون شکستن به دو خط) */
.emp-userbar-row { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.emp-userbar-row::-webkit-scrollbar { display: none; }