/* ============================================================
PREMIUM WEB
EMPLOIS & OPPORTUNITÉS
============================================================ */


/* ============================================================
DESIGN SYSTEM
============================================================ */

:root {

--jobs-black:
#0b0b0b;

--jobs-black-soft:
#151515;

--jobs-dark:
#202020;

--jobs-gold:
#d4af37;

--jobs-gold-dark:
#9c7b17;

--jobs-gold-light:
#ead47d;

--jobs-gold-soft:
rgba(212, 175, 55, 0.10);

--jobs-gold-border:
rgba(212, 175, 55, 0.22);

--jobs-white:
#ffffff;

--jobs-bg:
#f6f6f6;

--jobs-soft-bg:
#fafafa;

--jobs-text:
#171717;

--jobs-muted:
#727272;

--jobs-muted-light:
#a0a0a0;

--jobs-border:
#e7e7e7;

--jobs-green:
#198754;

--jobs-red:
#c83e3e;

--jobs-blue:
#2563eb;

--jobs-orange:
#c98419;

--jobs-header-height:
68px;

--jobs-filter-width:
245px;

--jobs-right-width:
285px;

--jobs-radius-sm:
10px;

--jobs-radius-md:
15px;

--jobs-radius-lg:
20px;

--jobs-shadow-xs:
0 2px 9px
rgba(0, 0, 0, 0.035);

--jobs-shadow-sm:
0 8px 25px
rgba(0, 0, 0, 0.065);

--jobs-shadow-md:
0 16px 42px
rgba(0, 0, 0, 0.10);

--jobs-shadow-lg:
0 28px 75px
rgba(0, 0, 0, 0.18);

--jobs-transition:
0.22s ease;

}


/* ============================================================
RESET
============================================================ */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}


html {

scroll-behavior: smooth;

}


body {

min-height: 100vh;

background:
var(--jobs-bg);

color:
var(--jobs-text);

font-family:
"Inter",
Arial,
sans-serif;

font-size: 14px;

line-height: 1.5;

}


body.jobs-modal-open {

overflow: hidden;

}


button,
input,
textarea,
select {

font: inherit;

}


button {

border: 0;

outline: 0;

cursor: pointer;

}


a {

color: inherit;

text-decoration: none;

}


img {

display: block;

max-width: 100%;

}


textarea {

resize: vertical;

}


/* ============================================================
SCROLLBAR
============================================================ */

::-webkit-scrollbar {

width: 8px;

height: 8px;

}


::-webkit-scrollbar-track {

background: transparent;

}


::-webkit-scrollbar-thumb {

border-radius: 999px;

background:
#cecece;

}


::-webkit-scrollbar-thumb:hover {

background:
#bbbbbb;

}


/* ============================================================
PAGE LOADER
============================================================ */

.jobs-loader {

position: fixed;

inset: 0;

z-index: 20000;

display: flex;

align-items: center;

justify-content: center;

background:
#ffffff;

}


.jobs-loader-content {

display: flex;

flex-direction: column;

align-items: center;

gap: 17px;

}


.jobs-loader-logo {

color:
#111111;

font-size: 20px;

font-weight: 700;

letter-spacing:
-0.5px;

}


.jobs-loader-logo span {

color:
var(--jobs-gold);

}


.jobs-loader-spinner {

width: 28px;

height: 28px;

border:
3px solid
#ededed;

border-top-color:
var(--jobs-gold);

border-radius: 50%;

animation:
jobsLoaderSpin
0.8s linear infinite;

}


@keyframes jobsLoaderSpin {

to {

transform:
rotate(360deg);

}

}


/* ============================================================
HEADER
============================================================ */

.jobs-header {

position: sticky;

top: 0;

z-index: 5000;

width: 100%;

height:
var(--jobs-header-height);

border-bottom:
1px solid
var(--jobs-border);

background:
rgba(255, 255, 255, 0.96);

backdrop-filter:
blur(16px);

-webkit-backdrop-filter:
blur(16px);

}


.jobs-navbar {

width: 100%;

height: 100%;

padding:
0 24px;

display: grid;

grid-template-columns:
minmax(190px, auto)
minmax(0, 1fr)
minmax(250px, auto);

align-items: center;

gap: 26px;

}


/* ============================================================
NAV LEFT
============================================================ */

.jobs-nav-left {

min-width: 0;

display: flex;

align-items: center;

gap: 10px;

}


.jobs-logo {

color:
#111111;

font-size: 16px;

font-weight: 700;

letter-spacing:
-0.45px;

white-space: nowrap;

}


.jobs-logo span {

color:
var(--jobs-gold);

}


.jobs-menu-btn {

width: 38px;

height: 38px;

display: none;

align-items: center;

justify-content: center;

border-radius: 10px;

background:
#f2f2f2;

color:
#444444;

font-size: 12px;

}


.jobs-menu-btn:hover {

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

}


/* ============================================================
NAV LINKS
============================================================ */

.jobs-nav-links {
    position: fixed;

    top: var(--jobs-header-height);
    left: 0;
    bottom: 0;

    width: min(275px, 84vw);

    padding: 15px 11px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    gap: 4px;

    background: #ffffff !important;

    border-right: 1px solid var(--jobs-border);

    box-shadow:
        14px 0 35px rgba(0, 0, 0, 0.12);

    transform: translateX(-105%);

    transition: transform 0.3s ease;

    z-index: 5100;

    opacity: 1;

    visibility: visible;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


.jobs-nav-links.mobile-open {
    transform: translateX(0);
}


.jobs-nav-links a {
    width: 100%;

    min-height: 42px;

    padding: 0 12px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    border-radius: 9px;

    background: transparent;

    color: #444444;

    font-size: 7px;
    font-weight: 600;

    opacity: 1;
}


.jobs-nav-links a:hover {
    background: #f5f5f5;

    color: #111111;
}


.jobs-nav-links a.active {
    background: var(--jobs-gold-soft);

    color: var(--jobs-gold-dark);
}



/* ============================================================
NAV RIGHT
============================================================ */

.jobs-nav-right {

display: flex;

align-items: center;

justify-content: flex-end;

gap: 8px;

}


/* ============================================================
GUEST ACTIONS
============================================================ */

.jobs-guest-actions {

display: flex;

align-items: center;

gap: 7px;

}


.jobs-login-link {

min-height: 37px;

padding:
0 11px;

display: inline-flex;

align-items: center;

justify-content: center;

border-radius: 999px;

color:
#555555;

font-size: 7px;

font-weight: 600;

}


.jobs-login-link:hover {

background:
#f4f4f4;

color:
#111111;

}


.jobs-register-btn {

min-height: 38px;

padding:
0 13px;

display: inline-flex;

align-items: center;

justify-content: center;

border-radius: 999px;

background:
var(--jobs-black-soft);

color:
#ffffff;

font-size: 7px;

font-weight: 600;

}


.jobs-register-btn:hover {

background:
var(--jobs-gold);

color:
#111111;

}


/* ============================================================
USER ACTIONS
============================================================ */

.jobs-user-actions {

display: flex;

align-items: center;

gap: 7px;

}


.jobs-user-actions[hidden] {

display: none !important;

}


/* ============================================================
PUBLISH BUTTON
============================================================ */

.jobs-publish-btn {

min-height: 38px;

padding:
0 13px;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 6px;

border-radius: 999px;

background:
var(--jobs-black-soft);

color:
#ffffff;

font-size: 7px;

font-weight: 600;

transition:
background var(--jobs-transition),
color var(--jobs-transition),
transform var(--jobs-transition);

}


.jobs-publish-btn:hover {

transform:
translateY(-1px);

background:
var(--jobs-gold);

color:
#111111;

}


/* ============================================================
USER MENU
============================================================ */

.jobs-user-menu-wrapper {

position: relative;

}


.jobs-user-menu-btn {

min-height: 40px;

padding:
4px 9px 4px 4px;

display: flex;

align-items: center;

gap: 7px;

border:
1px solid
var(--jobs-border);

border-radius: 999px;

background:
#ffffff;

color:
#333333;

}


.jobs-user-menu-btn:hover {

border-color:
var(--jobs-gold-border);

box-shadow:
var(--jobs-shadow-xs);

}


.jobs-user-menu-btn img {

width: 31px;

height: 31px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;

}


.jobs-user-menu-btn span {

max-width: 90px;

overflow: hidden;

font-size: 7px;

font-weight: 600;

white-space: nowrap;

text-overflow: ellipsis;

}


.jobs-user-menu-btn > i {

color:
#999999;

font-size: 6px;

}


/* ============================================================
USER DROPDOWN
============================================================ */

.jobs-user-dropdown {

position: absolute;

top:
calc(100% + 10px);

right: 0;

z-index: 6000;

width: 235px;

padding: 8px;

display: none;

border:
1px solid
var(--jobs-border);

border-radius: 15px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-md);

}


.jobs-user-dropdown.active {

display: block;

animation:
jobsDropdownOpen
0.18s ease;

}


@keyframes jobsDropdownOpen {

from {

opacity: 0;

transform:
translateY(-5px);

}

to {

opacity: 1;

transform:
translateY(0);

}

}


.jobs-user-dropdown-header {

padding: 8px;

display: flex;

align-items: center;

gap: 9px;

}


.jobs-user-dropdown-header img {

width: 40px;

height: 40px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;

}


.jobs-user-dropdown-header > div {

min-width: 0;

}


.jobs-user-dropdown-header strong {

display: block;

overflow: hidden;

color:
var(--jobs-text);

font-size: 7.7px;

white-space: nowrap;

text-overflow: ellipsis;

}


.jobs-user-dropdown-header span {

display: block;

margin-top: 2px;

overflow: hidden;

color:
var(--jobs-muted);

font-size: 6px;

white-space: nowrap;

text-overflow: ellipsis;

}


.jobs-dropdown-divider {

height: 1px;

margin:
6px 0;

background:
var(--jobs-border);

}


.jobs-user-dropdown > a,
.jobs-user-dropdown > button {

width: 100%;

min-height: 38px;

padding:
0 10px;

display: flex;

align-items: center;

gap: 9px;

border-radius: 9px;

background:
transparent;

color:
#505050;

font-size: 7px;

text-align: left;

}


.jobs-user-dropdown > a i,
.jobs-user-dropdown > button i {

width: 15px;

color:
#888888;

font-size: 8px;

text-align: center;

}


.jobs-user-dropdown > a:hover {

background:
#f5f5f5;

color:
#111111;

}


#jobsLogoutBtn {

color:
var(--jobs-red);

}


#jobsLogoutBtn i {

color:
var(--jobs-red);

}


#jobsLogoutBtn:hover {

background:
rgba(200, 62, 62, 0.07);

}


.jobs-mobile-overlay {
    position: fixed;

    top: var(--jobs-header-height);
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 4800;

    display: none;

    background: rgba(0, 0, 0, 0.42);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


.jobs-mobile-overlay.active {
    display: block;
}


/* ============================================================
PAGE WRAPPER
============================================================ */

.jobs-page {

width: 100%;

max-width: 1500px;

margin:
0 auto;

padding:
18px 20px 55px;

}


/* ============================================================
HERO
============================================================ */

.jobs-hero {

position: relative;

min-height: 255px;

padding:
38px 38px 30px;

overflow: hidden;

border:
1px solid
rgba(212, 175, 55, 0.16);

border-radius:
22px;

background:
linear-gradient(
135deg,
#0d0d0d,
#202020
);

box-shadow:
var(--jobs-shadow-sm);

}


.jobs-hero::before {

content: "";

position: absolute;

top: -130px;

right: -100px;

width: 320px;

height: 320px;

border-radius: 50%;

background:
radial-gradient(
circle,
rgba(212, 175, 55, 0.16),
transparent 68%
);

pointer-events: none;

}


.jobs-hero-content {

position: relative;

z-index: 2;

max-width: 680px;

}


.jobs-eyebrow {

display: block;

margin-bottom: 8px;

color:
var(--jobs-gold);

font-size: 6.3px;

font-weight: 700;

letter-spacing:
1.3px;

}


.jobs-hero h1 {

max-width: 650px;

color:
#ffffff;

font-size: 24px;

font-weight: 650;

line-height: 1.3;

letter-spacing:
-0.45px;

}


.jobs-hero p {

max-width: 590px;

margin-top: 9px;

color:
#c7c7c7;

font-size: 8px;

line-height: 1.7;

}


/* ============================================================
HERO SEARCH PANEL
============================================================ */

.jobs-search-panel {

position: relative;

z-index: 2;

width: 100%;

margin-top: 26px;

padding: 8px;

display: grid;

grid-template-columns:
minmax(0, 1.3fr)
minmax(0, 0.9fr)
auto;

align-items: center;

gap: 7px;

border:
1px solid
rgba(255, 255, 255, 0.10);

border-radius: 14px;

background:
rgba(255, 255, 255, 0.08);

backdrop-filter:
blur(15px);

-webkit-backdrop-filter:
blur(15px);

}


.jobs-search-field {

position: relative;

min-width: 0;

}


.jobs-search-field > i {

position: absolute;

top: 50%;

left: 13px;

transform:
translateY(-50%);

color:
#989898;

font-size: 8px;

pointer-events: none;

}


.jobs-search-field input {

width: 100%;

height: 43px;

padding:
0 12px 0 36px;

border:
1px solid
rgba(255, 255, 255, 0.10);

border-radius: 10px;

outline: none;

background:
rgba(255, 255, 255, 0.96);

color:
#1e1e1e;

font-size: 7px;

}


.jobs-search-field input::placeholder {

color:
#959595;

}


.jobs-search-field input:focus {

border-color:
var(--jobs-gold);

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.08);

}


.jobs-search-btn {

min-height: 43px;

padding:
0 17px;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 6px;

border-radius: 10px;

background:
var(--jobs-gold);

color:
#111111;

font-size: 7px;

font-weight: 650;

}


.jobs-search-btn:hover {

background:
var(--jobs-gold-light);

}


/* ============================================================
QUICK CATEGORY BAR
============================================================ */

.jobs-category-bar {

margin-top: 15px;

padding: 8px;

display: flex;

align-items: center;

gap: 5px;

overflow-x: auto;

border:
1px solid
var(--jobs-border);

border-radius: 14px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-xs);

scrollbar-width: none;

}


.jobs-category-bar::-webkit-scrollbar {

display: none;

}


.jobs-category-btn {

min-height: 34px;

padding:
0 11px;

flex-shrink: 0;

border-radius: 999px;

background:
transparent;

color:
#707070;

font-size: 6.6px;

font-weight: 600;

}


.jobs-category-btn:hover {

background:
#f4f4f4;

color:
#222222;

}


.jobs-category-btn.active {

background:
var(--jobs-black-soft);

color:
#ffffff;

}


/* ============================================================
MAIN LAYOUT
============================================================ */

.jobs-layout {

margin-top: 15px;

display: grid;

grid-template-columns:
var(--jobs-filter-width)
minmax(0, 1fr)
var(--jobs-right-width);

align-items: start;

gap: 18px;

}


/* ============================================================
FILTER SIDEBAR
============================================================ */

.jobs-filter-sidebar {

position: sticky;

top:
calc(
var(--jobs-header-height)
+
17px
);

max-height:
calc(
100vh -
var(--jobs-header-height)
-
34px
);

overflow-y: auto;

border:
1px solid
var(--jobs-border);

border-radius:
17px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-xs);

}


/* ============================================================
FILTER HEADER
============================================================ */

.jobs-filter-header {

padding:
14px 15px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 10px;

border-bottom:
1px solid
var(--jobs-border);

}


.jobs-filter-header > div > span {

display: block;

margin-bottom: 2px;

color:
var(--jobs-gold-dark);

font-size: 5.5px;

font-weight: 700;

letter-spacing:
0.8px;

}


.jobs-filter-header h2 {

color:
var(--jobs-text);

font-size: 9px;

font-weight: 650;

}


.jobs-filter-header button {

width: 30px;

height: 30px;

display: none;

align-items: center;

justify-content: center;

border-radius: 50%;

background:
#f2f2f2;

color:
#666666;

font-size: 7px;

}


/* ============================================================
FILTER GROUPS
============================================================ */

.jobs-filter-group {

padding:
15px;

border-bottom:
1px solid
var(--jobs-border);

}


.jobs-filter-group > strong,
.jobs-filter-group > label > strong {

display: block;

margin-bottom: 10px;

color:
#444444;

font-size: 6.7px;

font-weight: 650;

}


/* ============================================================
FILTER CHECKBOXES
============================================================ */

.jobs-filter-group > label:not([for]) {

min-height: 34px;

display: flex;

align-items: center;

gap: 8px;

cursor: pointer;

}


.jobs-filter-group > label:not([for])
input[type="checkbox"] {

width: 14px;

height: 14px;

flex-shrink: 0;

accent-color:
var(--jobs-gold);

}


.jobs-filter-group > label:not([for])
span {

color:
#666666;

font-size: 6.4px;

}


/* ============================================================
BUDGET GRID
============================================================ */

.jobs-budget-grid {

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 6px;

}


.jobs-budget-grid input,
.jobs-filter-group select {

width: 100%;

height: 37px;

border:
1px solid
var(--jobs-border);

border-radius: 9px;

outline: none;

background:
#fafafa;

color:
#555555;

font-size: 6.2px;

}


.jobs-budget-grid input {

padding:
0 9px;

}


.jobs-filter-group select {

margin-top: 7px;

padding:
0 30px 0 9px;

}


.jobs-budget-grid input:focus,
.jobs-filter-group select:focus {

border-color:
var(--jobs-gold);

background:
#ffffff;

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.06);

}


/* ============================================================
FILTER ACTIONS
============================================================ */

.jobs-filter-actions {

padding:
12px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 6px;

}


.jobs-filter-reset-btn,
.jobs-filter-apply-btn {

min-height: 34px;

border-radius: 999px;

font-size: 6.2px;

font-weight: 600;

}


.jobs-filter-reset-btn {

border:
1px solid
var(--jobs-border);

background:
#ffffff;

color:
#666666;

}


.jobs-filter-reset-btn:hover {

background:
#f5f5f5;

}


.jobs-filter-apply-btn {

background:
var(--jobs-black-soft);

color:
#ffffff;

}


.jobs-filter-apply-btn:hover {

background:
var(--jobs-gold);

color:
#111111;

}


/* ============================================================
MAIN JOB CONTENT
============================================================ */

.jobs-main-content {

min-width: 0;

display: flex;

flex-direction: column;

gap: 12px;

}


/* ============================================================
RESULTS TOOLBAR
============================================================ */

.jobs-results-toolbar {

min-height: 63px;

padding:
11px 13px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 14px;

border:
1px solid
var(--jobs-border);

border-radius: 15px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-xs);

}


.jobs-results-toolbar > div:first-child > span {

display: block;

margin-bottom: 2px;

color:
var(--jobs-gold-dark);

font-size: 5.5px;

font-weight: 700;

letter-spacing:
0.8px;

}


.jobs-results-toolbar h2 {

color:
var(--jobs-text);

font-size: 10px;

font-weight: 650;

}


.jobs-results-actions {

display: flex;

align-items: center;

gap: 8px;

}


.jobs-results-count {

color:
#8c8c8c;

font-size: 6.4px;

}


.jobs-open-filter-btn {

min-height: 33px;

padding:
0 9px;

display: none;

align-items: center;

justify-content: center;

gap: 5px;

border:
1px solid
var(--jobs-border);

border-radius: 999px;

background:
#ffffff;

color:
#555555;

font-size: 6.2px;

}


/* ============================================================
ACTIVE FILTERS
============================================================ */

.jobs-active-filters {

display: none;

align-items: center;

flex-wrap: wrap;

gap: 6px;

}


.jobs-active-filters.active {

display: flex;

}


.jobs-active-filter {

min-height: 28px;

padding:
0 8px;

display: inline-flex;

align-items: center;

gap: 5px;

border:
1px solid
var(--jobs-gold-border);

border-radius: 999px;

background:
var(--jobs-gold-soft);

color:
#765c0f;

font-size: 6px;

}


.jobs-active-filter button {

width: 18px;

height: 18px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background:
transparent;

color:
inherit;

font-size: 5px;

}


/* ============================================================
JOBS LIST
============================================================ */

.jobs-list {

display: flex;

flex-direction: column;

gap: 11px;

}


/* ============================================================
JOB CARD
============================================================ */

.job-card {

position: relative;

width: 100%;

padding: 16px;

border:
1px solid
var(--jobs-border);

border-radius: 16px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-xs);

transition:
border-color var(--jobs-transition),
box-shadow var(--jobs-transition),
transform var(--jobs-transition);

}


.job-card:hover {

transform:
translateY(-1px);

border-color:
rgba(212, 175, 55, 0.20);

box-shadow:
var(--jobs-shadow-sm);

}


/* ============================================================
JOB CARD HEADER
============================================================ */

.job-card-header {

display: flex;

align-items: flex-start;

justify-content: space-between;

gap: 12px;

}


.job-card-company {

min-width: 0;

display: flex;

align-items: center;

gap: 10px;

}


.job-card-company-logo {

width: 43px;

height: 43px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

border:
1px solid
var(--jobs-border);

border-radius: 12px;

background:
#fafafa;

color:
var(--jobs-gold-dark);

font-size: 12px;

}


.job-card-company-logo img {

width: 100%;

height: 100%;

object-fit: cover;

}


.job-card-company-info {

min-width: 0;

}


.job-card-company-info strong {

display: block;

overflow: hidden;

color:
var(--jobs-text);

font-size: 7.6px;

font-weight: 650;

white-space: nowrap;

text-overflow: ellipsis;

}


.job-card-company-info span {

display: block;

margin-top: 2px;

color:
var(--jobs-muted);

font-size: 5.9px;

}


.job-card-options-btn {

width: 31px;

height: 31px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background:
transparent;

color:
#777777;

font-size: 8px;

}


.job-card-options-btn:hover {

background:
#f2f2f2;

color:
#222222;

}


/* ============================================================
JOB BADGES
============================================================ */

.job-card-badges {

margin-top: 11px;

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 5px;

}


.job-badge {

min-height: 23px;

padding:
0 7px;

display: inline-flex;

align-items: center;

gap: 4px;

border-radius: 999px;

background:
#f3f3f3;

color:
#666666;

font-size: 5.8px;

font-weight: 650;

}


.job-badge.primary {

background:
var(--jobs-gold-soft);

color:
#765c0f;

}


.job-badge.remote {

background:
rgba(37, 99, 235, 0.07);

color:
var(--jobs-blue);

}


.job-badge.admin {

background:
var(--jobs-black-soft);

color:
#ffffff;

}


.job-badge.admin i {

color:
var(--jobs-gold);

}


/* ============================================================
JOB TITLE
============================================================ */

.job-card-title {

margin-top: 11px;

color:
var(--jobs-text);

font-size: 13px;

font-weight: 650;

line-height: 1.4;

}


.job-card-title button {

background:
transparent;

color:
inherit;

font: inherit;

text-align: left;

}


.job-card-title button:hover {

color:
var(--jobs-gold-dark);

}


/* ============================================================
JOB META
============================================================ */

.job-card-meta {

margin-top: 9px;

display: flex;

align-items: center;

flex-wrap: wrap;

gap:
6px 11px;

}


.job-card-meta span {

display: inline-flex;

align-items: center;

gap: 5px;

color:
#767676;

font-size: 6.2px;

}


.job-card-meta i {

color:
#9a9a9a;

font-size: 6.5px;

}


/* ============================================================
JOB DESCRIPTION
============================================================ */

.job-card-description {

margin-top: 10px;

color:
#555555;

font-size: 7px;

line-height: 1.65;

overflow: hidden;

}


.job-card-description p {

margin-bottom: 5px;

}


.job-card-description p:last-child {

margin-bottom: 0;

}


/* ============================================================
SKILLS
============================================================ */

.job-card-skills {

margin-top: 11px;

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 5px;

}


.job-skill {

min-height: 23px;

padding:
0 7px;

display: inline-flex;

align-items: center;

border-radius: 999px;

background:
#f4f4f4;

color:
#666666;

font-size: 5.7px;

}


.job-skill:hover {

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

}


/* ============================================================
JOB CARD FOOTER
============================================================ */

.job-card-footer {

margin-top: 13px;

padding-top: 11px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 10px;

border-top:
1px solid
var(--jobs-border);

}


.job-card-budget {

min-width: 0;

}


.job-card-budget small {

display: block;

margin-bottom: 2px;

color:
#9a9a9a;

font-size: 5.4px;

}


.job-card-budget strong {

color:
var(--jobs-text);

font-size: 8px;

}


.job-card-actions {

display: flex;

align-items: center;

gap: 6px;

}


.job-card-save-btn {

width: 34px;

height: 34px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

border:
1px solid
var(--jobs-border);

border-radius: 50%;

background:
#ffffff;

color:
#777777;

font-size: 8px;

}


.job-card-save-btn:hover,
.job-card-save-btn.saved {

border-color:
var(--jobs-gold-border);

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

}


.job-card-view-btn {

min-height: 34px;

padding:
0 11px;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 5px;

border-radius: 999px;

background:
var(--jobs-black-soft);

color:
#ffffff;

font-size: 6.2px;

font-weight: 600;

}


.job-card-view-btn:hover {

background:
var(--jobs-gold);

color:
#111111;

}

/* ============================================================
JOBS LOADING LIST
============================================================ */

.jobs-loading-list {
display: flex;
flex-direction: column;
gap: 11px;
}


.jobs-loading-list.hidden {
display: none;
}


.jobs-skeleton-card {
padding: 16px;

overflow: hidden;

border:
1px solid
var(--jobs-border);

border-radius: 16px;

background: #ffffff;
}


.jobs-skeleton-top {
margin-bottom: 15px;

display: flex;
align-items: center;

gap: 10px;
}


.jobs-skeleton-top > div {
flex: 1;

display: flex;
flex-direction: column;

gap: 6px;
}


.jobs-skeleton-logo {
width: 43px;
height: 43px;

flex-shrink: 0;

border-radius: 12px;

background:
linear-gradient(
90deg,
#eeeeee 25%,
#f7f7f7 50%,
#eeeeee 75%
);

background-size:
200% 100%;

animation:
jobsSkeletonMove
1.4s infinite;
}


.jobs-skeleton-line {
width: 100%;
height: 8px;

display: block;

border-radius: 999px;

background:
linear-gradient(
90deg,
#eeeeee 25%,
#f7f7f7 50%,
#eeeeee 75%
);

background-size:
200% 100%;

animation:
jobsSkeletonMove
1.4s infinite;
}


.jobs-skeleton-line + .jobs-skeleton-line {
margin-top: 8px;
}


.jobs-skeleton-line.short {
width: 130px;
}


.jobs-skeleton-line.tiny {
width: 82px;
}


.jobs-skeleton-line.title {
width: 70%;
height: 11px;

margin-bottom: 13px;
}


.jobs-skeleton-line.medium {
width: 58%;
}


@keyframes jobsSkeletonMove {

0% {
background-position:
200% 0;
}

100% {
background-position:
-200% 0;
}

}


/* ============================================================
EMPTY STATE
============================================================ */

.jobs-empty {
min-height: 300px;

padding: 35px 20px;

display: none;
flex-direction: column;
align-items: center;
justify-content: center;

border:
1px solid
var(--jobs-border);

border-radius: 16px;

background: #ffffff;

text-align: center;
}


.jobs-empty.active {
display: flex;
}


.jobs-empty-icon {
width: 58px;
height: 58px;

margin-bottom: 14px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 18px;
}


.jobs-empty h3 {
margin-bottom: 6px;

color:
var(--jobs-text);

font-size: 12px;
}


.jobs-empty p {
max-width: 390px;

margin-bottom: 16px;

color:
var(--jobs-muted);

font-size: 7px;

line-height: 1.6;
}


.jobs-empty button {
min-height: 35px;

padding:
0 12px;

border-radius: 999px;

background:
var(--jobs-black-soft);

color: #ffffff;

font-size: 6.5px;
font-weight: 600;
}


.jobs-empty button:hover {
background:
var(--jobs-gold);

color:
#111111;
}


/* ============================================================
LOAD MORE
============================================================ */

.jobs-load-more-wrapper {
padding:
5px 0 14px;

display: flex;
justify-content: center;
}


.jobs-load-more-btn {
min-height: 36px;

padding:
0 14px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

border:
1px solid
var(--jobs-border);

border-radius: 999px;

background: #ffffff;

color:
#555555;

font-size: 6.5px;
font-weight: 600;
}


.jobs-load-more-btn:hover {
border-color:
var(--jobs-gold-border);

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);
}


.jobs-load-more-btn.loading i {
animation:
jobsLoaderSpin
0.8s linear infinite;
}


.jobs-load-more-btn.hidden {
display: none;
}


/* ============================================================
RIGHT SIDEBAR
============================================================ */

.jobs-right-sidebar {
position: sticky;

top:
calc(
var(--jobs-header-height)
+
17px
);

max-height:
calc(
100vh
-
var(--jobs-header-height)
-
34px
);

overflow-y: auto;

display: flex;
flex-direction: column;

gap: 12px;

scrollbar-width: none;
}


.jobs-right-sidebar::-webkit-scrollbar {
display: none;
}


/* ============================================================
RIGHT SIDEBAR CARD
============================================================ */

.jobs-side-card {
padding: 15px;

border:
1px solid
var(--jobs-border);

border-radius: 16px;

background: #ffffff;

box-shadow:
var(--jobs-shadow-xs);
}


.jobs-side-card-header {
margin-bottom: 12px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;
}


.jobs-side-card-header > div {
min-width: 0;
}


.jobs-side-eyebrow {
display: block;

margin-bottom: 3px;

color:
var(--jobs-gold-dark);

font-size: 5.5px;
font-weight: 700;

letter-spacing: 0.8px;
}


.jobs-side-card-header h2 {
color:
var(--jobs-text);

font-size: 9.5px;
font-weight: 650;
}


.jobs-side-card-header > i {
color:
var(--jobs-gold);

font-size: 11px;
}


/* ============================================================
TRUST CARD
============================================================ */

.jobs-trust-card > p {
color:
var(--jobs-muted);

font-size: 6.4px;

line-height: 1.6;
}


.jobs-trust-points {
margin-top: 12px;

display: flex;
flex-direction: column;

gap: 8px;
}


.jobs-trust-points > div {
min-height: 36px;

padding:
0 9px;

display: flex;
align-items: center;

gap: 8px;

border-radius: 9px;

background:
#fafafa;
}


.jobs-trust-points i {
width: 24px;
height: 24px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 7px;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 7px;
}


.jobs-trust-points span {
color:
#5f5f5f;

font-size: 6px;
}


/* ============================================================
FEATURED JOBS
============================================================ */

.jobs-featured-list {
display: flex;
flex-direction: column;

gap: 7px;
}


.jobs-featured-item {
padding: 10px;

border:
1px solid
var(--jobs-border);

border-radius: 11px;

background:
#fafafa;

cursor: pointer;

transition:
border-color var(--jobs-transition),
background var(--jobs-transition),
transform var(--jobs-transition);
}


.jobs-featured-item:hover {
transform:
translateY(-1px);

border-color:
var(--jobs-gold-border);

background:
#ffffff;
}


.jobs-featured-item-top {
margin-bottom: 5px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 8px;
}


.jobs-featured-item-type {
color:
var(--jobs-gold-dark);

font-size: 5.3px;
font-weight: 700;

text-transform: uppercase;
}


.jobs-featured-item-top i {
color:
#9b9b9b;

font-size: 7px;
}


.jobs-featured-item h3 {
margin-bottom: 4px;

overflow: hidden;

color:
var(--jobs-text);

font-size: 7.4px;

white-space: nowrap;

text-overflow: ellipsis;
}


.jobs-featured-item p {
color:
var(--jobs-muted);

font-size: 5.8px;

line-height: 1.5;
}


.jobs-featured-item-meta {
margin-top: 7px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 8px;
}


.jobs-featured-item-meta span {
color:
#858585;

font-size: 5.3px;
}


.jobs-featured-item-meta strong {
color:
var(--jobs-text);

font-size: 5.8px;
}


/* ============================================================
FEATURED ADMIN OFFER
============================================================ */

.jobs-featured-item.admin-featured {
border-color:
rgba(212, 175, 55, 0.28);

background:
linear-gradient(
135deg,
rgba(212, 175, 55, 0.06),
#ffffff
);
}


.jobs-featured-admin-badge {
min-height: 19px;

padding:
0 6px;

display: inline-flex;
align-items: center;

gap: 4px;

border-radius: 999px;

background:
var(--jobs-black-soft);

color:
#ffffff;

font-size: 4.9px;
font-weight: 650;
}


.jobs-featured-admin-badge i {
color:
var(--jobs-gold);
}


/* ============================================================
CATEGORY STATISTICS
============================================================ */

.jobs-category-stats {
display: flex;
flex-direction: column;

gap: 4px;
}


.jobs-category-stats button {
width: 100%;

min-height: 40px;

padding:
0 8px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 9px;

border-radius: 9px;

background: transparent;

color:
#555555;

text-align: left;
}


.jobs-category-stats button:hover {
background:
#f6f6f6;
}


.jobs-category-stats button > span {
min-width: 0;

display: flex;
align-items: center;

gap: 8px;

font-size: 6.2px;
}


.jobs-category-stats button i {
width: 16px;

color:
#898989;

font-size: 7px;

text-align: center;
}


.jobs-category-stats button strong {
min-width: 24px;
height: 22px;

padding:
0 6px;

flex-shrink: 0;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 999px;

background:
#f1f1f1;

color:
#666666;

font-size: 5.5px;
}


/* ============================================================
PUBLISH CTA
============================================================ */

.jobs-publish-cta {
padding:
20px 15px;

text-align: center;

background:
linear-gradient(
145deg,
#111111,
#202020
);

border-color:
rgba(212, 175, 55, 0.16);
}


.jobs-publish-cta-icon {
width: 45px;
height: 45px;

margin:
0 auto 10px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
rgba(212, 175, 55, 0.12);

color:
var(--jobs-gold);

font-size: 12px;
}


.jobs-publish-cta h2 {
color:
#ffffff;

font-size: 10px;
}


.jobs-publish-cta p {
max-width: 220px;

margin:
6px auto 12px;

color:
#bebebe;

font-size: 6px;

line-height: 1.55;
}


.jobs-publish-cta button {
width: 100%;

min-height: 34px;

border-radius: 999px;

background:
var(--jobs-gold);

color:
#111111;

font-size: 6.2px;
font-weight: 650;
}


.jobs-publish-cta button:hover {
background:
var(--jobs-gold-light);
}


/* ============================================================
RIGHT SIDEBAR LOADING
============================================================ */

.jobs-side-loading {
min-height: 70px;

display: flex;
align-items: center;
justify-content: center;

gap: 6px;

color:
#999999;

font-size: 6px;
}


.jobs-side-loading i {
color:
var(--jobs-gold);

font-size: 8px;
}


/* ============================================================
SIDE FOOTER
============================================================ */

.jobs-side-footer {
padding:
4px 7px 18px;
}


.jobs-side-footer > div {
display: flex;
flex-wrap: wrap;

gap:
5px 9px;
}


.jobs-side-footer a {
color:
#969696;

font-size: 5.5px;
}


.jobs-side-footer a:hover {
color:
var(--jobs-gold-dark);
}


.jobs-side-footer p {
margin-top: 8px;

color:
#aaaaaa;

font-size: 5.5px;
}


/* ============================================================
GENERIC MODAL
============================================================ */

.jobs-modal {
position: fixed;

inset: 0;

z-index: 10000;

padding: 22px;

display: none;
align-items: center;
justify-content: center;

overflow-y: auto;

background:
rgba(8, 8, 8, 0.66);

backdrop-filter:
blur(5px);

-webkit-backdrop-filter:
blur(5px);
}


.jobs-modal.active {
display: flex;

animation:
jobsModalFade
0.18s ease;
}


@keyframes jobsModalFade {

from {
opacity: 0;
}

to {
opacity: 1;
}

}


/* ============================================================
MODAL HEADER
============================================================ */

.jobs-modal-header {
min-height: 67px;

padding:
13px 17px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 15px;

border-bottom:
1px solid
var(--jobs-border);
}


.jobs-modal-header > div > span {
display: block;

margin-bottom: 2px;

color:
var(--jobs-gold-dark);

font-size: 5.5px;
font-weight: 700;

letter-spacing: 0.9px;
}


.jobs-modal-header h2 {
color:
var(--jobs-text);

font-size: 11px;
font-weight: 650;
}


.jobs-modal-close {
width: 33px;
height: 33px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
#f2f2f2;

color:
#666666;

font-size: 8px;
}


.jobs-modal-close:hover {
background:
#e9e9e9;

color:
#111111;
}


/* ============================================================
JOB DETAILS CARD
============================================================ */

.job-details-card {
width:
min(
1050px,
100%
);

max-height:
calc(
100vh - 44px
);

overflow: hidden;

border-radius: 19px;

background: #ffffff;

box-shadow:
var(--jobs-shadow-lg);

animation:
jobsModalCardOpen
0.22s ease;
}


@keyframes jobsModalCardOpen {

from {
opacity: 0;

transform:
translateY(10px)
scale(0.985);
}

to {
opacity: 1;

transform:
translateY(0)
scale(1);
}

}


/* ============================================================
JOB DETAILS LAYOUT
============================================================ */

.job-details-layout {
min-height: 500px;

max-height:
calc(
100vh - 115px
);

display: grid;

grid-template-columns:
minmax(0, 1.45fr)
minmax(300px, 0.55fr);

overflow: hidden;
}


.job-details-main {
min-width: 0;

padding: 19px;

overflow-y: auto;

border-right:
1px solid
var(--jobs-border);
}


/* ============================================================
JOB DETAIL MAIN CONTENT
============================================================ */

.job-detail-top {
display: flex;
align-items: flex-start;

gap: 12px;
}


.job-detail-company-logo {
width: 52px;
height: 52px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

overflow: hidden;

border:
1px solid
var(--jobs-border);

border-radius: 13px;

background:
#fafafa;

color:
var(--jobs-gold-dark);

font-size: 15px;
}


.job-detail-company-logo img {
width: 100%;
height: 100%;

object-fit: cover;
}


.job-detail-heading {
min-width: 0;
}


.job-detail-heading h1 {
color:
var(--jobs-text);

font-size: 17px;

line-height: 1.4;
}


.job-detail-heading > span {
display: block;

margin-top: 4px;

color:
var(--jobs-muted);

font-size: 6.8px;
}


/* ============================================================
DETAIL BADGES
============================================================ */

.job-detail-badges {
margin-top: 13px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 6px;
}


/* ============================================================
DETAIL META
============================================================ */

.job-detail-meta-grid {
margin-top: 16px;

display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);

gap: 8px;
}


.job-detail-meta-box {
min-height: 68px;

padding: 10px;

display: flex;
align-items: center;

gap: 8px;

border:
1px solid
var(--jobs-border);

border-radius: 11px;

background:
#fafafa;
}


.job-detail-meta-box i {
width: 30px;
height: 30px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 8px;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 8px;
}


.job-detail-meta-box span {
min-width: 0;
}


.job-detail-meta-box small {
display: block;

color:
#999999;

font-size: 5.2px;
}


.job-detail-meta-box strong {
display: block;

margin-top: 2px;

overflow: hidden;

color:
var(--jobs-text);

font-size: 6.6px;

white-space: nowrap;

text-overflow: ellipsis;
}


/* ============================================================
DETAIL SECTIONS
============================================================ */

.job-detail-section {
margin-top: 20px;
}


.job-detail-section > span {
display: block;

margin-bottom: 4px;

color:
var(--jobs-gold-dark);

font-size: 5.4px;
font-weight: 700;

letter-spacing:
0.7px;
}


.job-detail-section h2 {
margin-bottom: 8px;

color:
var(--jobs-text);

font-size: 10px;
}


.job-detail-section-content {
color:
#535353;

font-size: 7px;

line-height: 1.75;

word-wrap: break-word;
}


.job-detail-section-content p {
margin-bottom: 8px;
}


.job-detail-section-content ul,
.job-detail-section-content ol {
margin:
8px 0;

padding-left: 20px;
}


.job-detail-section-content a {
color:
var(--jobs-gold-dark);

text-decoration: underline;
}


/* ============================================================
DETAIL ACTIONS PANEL
============================================================ */

.job-details-actions-panel {
min-width: 0;

padding: 15px;

overflow-y: auto;

background:
#fafafa;
}


.job-details-action-card {
padding: 17px;

border:
1px solid
var(--jobs-border);

border-radius: 14px;

background:
#ffffff;

text-align: center;
}


.job-details-action-icon {
width: 48px;
height: 48px;

margin:
0 auto 10px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 13px;
}


.job-details-action-card h3 {
color:
var(--jobs-text);

font-size: 9px;
}


.job-details-action-card p {
margin:
6px auto 12px;

color:
var(--jobs-muted);

font-size: 6px;

line-height: 1.55;
}


.job-apply-main-btn,
.job-save-main-btn {
width: 100%;

min-height: 36px;

display: flex;
align-items: center;
justify-content: center;

gap: 6px;

border-radius: 999px;

font-size: 6.4px;
font-weight: 600;
}


.job-apply-main-btn {
background:
var(--jobs-black-soft);

color:
#ffffff;
}


.job-apply-main-btn:hover {
background:
var(--jobs-gold);

color:
#111111;
}


.job-save-main-btn {
margin-top: 7px;

border:
1px solid
var(--jobs-border);

background:
#ffffff;

color:
#555555;
}


.job-save-main-btn:hover,
.job-save-main-btn.saved {
border-color:
var(--jobs-gold-border);

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);
}


/* ============================================================
PUBLISHER CARD
============================================================ */

.job-publisher-card {
margin-top: 10px;

padding: 14px;

border:
1px solid
var(--jobs-border);

border-radius: 14px;

background:
#ffffff;
}


.job-publisher-label {
display: block;

margin-bottom: 9px;

color:
var(--jobs-gold-dark);

font-size: 5.2px;
font-weight: 700;

letter-spacing: 0.7px;
}


.job-publisher-info {
display: flex;
align-items: center;

gap: 8px;
}


.job-publisher-info img {
width: 38px;
height: 38px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.job-publisher-info > div {
min-width: 0;
}


.job-publisher-info strong {
display: block;

overflow: hidden;

color:
var(--jobs-text);

font-size: 6.8px;

white-space: nowrap;

text-overflow: ellipsis;
}


.job-publisher-info span {
display: block;

margin-top: 2px;

color:
var(--jobs-muted);

font-size: 5.5px;
}


.job-publisher-card > button {
width: 100%;

min-height: 31px;

margin-top: 10px;

border:
1px solid
var(--jobs-border);

border-radius: 999px;

background:
#ffffff;

color:
#555555;

font-size: 5.8px;
font-weight: 600;
}


.job-publisher-card > button:hover {
border-color:
var(--jobs-gold-border);

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);
}

/* ============================================================
AUTH REQUIRED CARDS
============================================================ */

.jobs-auth-required-card {
position: relative;

width:
min(
430px,
100%
);

padding:
28px 22px 22px;

border-radius: 18px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-lg);

text-align: center;
}


.jobs-auth-required-card
.jobs-modal-close {
position: absolute;

top: 10px;
right: 10px;
}


.jobs-auth-required-icon {
width: 58px;
height: 58px;

margin:
4px auto 13px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 17px;
}


.jobs-auth-eyebrow {
display: block;

margin-bottom: 5px;

color:
var(--jobs-gold-dark);

font-size: 5.6px;
font-weight: 700;

letter-spacing:
0.9px;
}


.jobs-auth-required-card h2 {
color:
var(--jobs-text);

font-size: 12px;
font-weight: 650;
}


.jobs-auth-required-card p {
max-width: 330px;

margin:
8px auto 17px;

color:
var(--jobs-muted);

font-size: 6.7px;

line-height: 1.6;
}


.jobs-auth-required-actions {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 7px;
}


.jobs-auth-login-btn,
.jobs-auth-register-btn {
min-height: 37px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 999px;

font-size: 6.5px;
font-weight: 600;
}


.jobs-auth-login-btn {
border:
1px solid
var(--jobs-border);

background:
#ffffff;

color:
#555555;
}


.jobs-auth-login-btn:hover {
background:
#f4f4f4;
}


.jobs-auth-register-btn {
background:
var(--jobs-black-soft);

color:
#ffffff;
}


.jobs-auth-register-btn:hover {
background:
var(--jobs-gold);

color:
#111111;
}


/* ============================================================
APPLICATION MODAL
============================================================ */

.job-apply-card {
width:
min(
650px,
100%
);

max-height:
calc(
100vh - 44px
);

overflow-y: auto;

border-radius: 19px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-lg);
}


#jobApplyForm {
padding:
15px 17px 17px;
}


/* ============================================================
APPLICATION SUMMARY
============================================================ */

.job-apply-summary {
padding: 11px;

display: flex;
align-items: center;

gap: 9px;

border:
1px solid
var(--jobs-border);

border-radius: 11px;

background:
#fafafa;
}


.job-apply-summary-icon {
width: 36px;
height: 36px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 9px;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 9px;
}


.job-apply-summary > div:last-child {
min-width: 0;
}


.job-apply-summary strong {
display: block;

overflow: hidden;

color:
var(--jobs-text);

font-size: 7px;

white-space: nowrap;

text-overflow: ellipsis;
}


.job-apply-summary span {
display: block;

margin-top: 2px;

color:
var(--jobs-muted);

font-size: 5.7px;
}


/* ============================================================
APPLICATION USER
============================================================ */

.job-apply-user {
margin-top: 11px;

padding:
9px 0;

display: flex;
align-items: center;

gap: 8px;
}


.job-apply-user img {
width: 38px;
height: 38px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.job-apply-user > div {
min-width: 0;
}


.job-apply-user strong {
display: block;

overflow: hidden;

color:
var(--jobs-text);

font-size: 6.8px;

white-space: nowrap;

text-overflow: ellipsis;
}


.job-apply-user span {
display: block;

margin-top: 2px;

color:
var(--jobs-muted);

font-size: 5.7px;
}


/* ============================================================
GENERIC FORM GROUP
============================================================ */

.jobs-form-group {
margin-top: 12px;
}


.jobs-form-group > label {
display: block;

margin-bottom: 6px;

color:
#444444;

font-size: 6.4px;
font-weight: 650;
}


.jobs-form-group > label span {
color:
var(--jobs-red);
}


.jobs-form-group input,
.jobs-form-group textarea,
.jobs-form-group select {
width: 100%;

border:
1px solid
var(--jobs-border);

border-radius: 10px;

outline: none;

background:
#fafafa;

color:
var(--jobs-text);

font-size: 6.7px;
}


.jobs-form-group input,
.jobs-form-group select {
height: 40px;

padding:
0 10px;
}


.jobs-form-group textarea {
min-height: 120px;

padding: 10px;

line-height: 1.6;
}


.jobs-form-group input:focus,
.jobs-form-group textarea:focus,
.jobs-form-group select:focus {
border-color:
var(--jobs-gold);

background:
#ffffff;

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.06);
}


.jobs-form-group > small {
display: block;

margin-top: 5px;

color:
#969696;

font-size: 5.5px;
}


/* ============================================================
FIELD COUNTER
============================================================ */

.jobs-field-counter {
margin-top: 5px;

display: flex;
justify-content: flex-end;

color:
#999999;

font-size: 5.5px;
}


/* ============================================================
PUBLISH JOB CARD
============================================================ */

.publish-job-card {
width:
min(
780px,
100%
);

max-height:
calc(
100vh - 44px
);

overflow-y: auto;

border-radius: 19px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-lg);
}


#publishJobForm {
padding:
14px 17px 17px;
}


/* ============================================================
FORM GRID
============================================================ */

.jobs-form-grid {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 10px;
}


.jobs-budget-form-grid {
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
}


/* ============================================================
RICH TEXT TOOLBAR
============================================================ */

.jobs-editor-toolbar {
padding:
6px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 3px;

border:
1px solid
var(--jobs-border);

border-bottom: 0;

border-radius:
10px 10px 0 0;

background:
#f7f7f7;
}


.jobs-editor-toolbar button {
width: 29px;
height: 29px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 7px;

background:
transparent;

color:
#666666;

font-size: 7.5px;
}


.jobs-editor-toolbar button:hover {
background:
#ffffff;

color:
#111111;
}


.jobs-editor-toolbar button.active {
background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);
}


.jobs-editor-separator {
width: 1px;
height: 18px;

margin:
0 2px;

background:
#dddddd;
}


/* ============================================================
RICH TEXT EDITOR
============================================================ */

.jobs-rich-editor {
min-height: 155px;
max-height: 320px;

padding: 11px;

overflow-y: auto;

border:
1px solid
var(--jobs-border);

border-radius:
0 0 10px 10px;

outline: none;

background:
#ffffff;

color:
var(--jobs-text);

font-size: 6.8px;

line-height: 1.7;
}


.jobs-rich-editor:focus {
border-color:
var(--jobs-gold);

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.06);
}


.jobs-rich-editor:empty::before {
content:
attr(data-placeholder);

color:
#999999;

pointer-events: none;
}


.jobs-rich-editor p {
margin-bottom: 7px;
}


.jobs-rich-editor ul,
.jobs-rich-editor ol {
margin:
7px 0;

padding-left: 18px;
}


.jobs-rich-editor a {
color:
var(--jobs-gold-dark);

text-decoration:
underline;
}


/* ============================================================
SWITCH ROW
============================================================ */

.jobs-switch-row {
margin-top: 13px;

min-height: 55px;

padding:
9px 10px;

display: flex;
align-items: center;

gap: 10px;

border:
1px solid
var(--jobs-border);

border-radius: 11px;

background:
#fafafa;

cursor: pointer;
}


.jobs-switch-row > input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.jobs-switch {
position: relative;

width: 35px;
height: 20px;

flex-shrink: 0;

border-radius: 999px;

background:
#d6d6d6;

transition:
background
var(--jobs-transition);
}


.jobs-switch::after {
content: "";

position: absolute;

top: 3px;
left: 3px;

width: 14px;
height: 14px;

border-radius: 50%;

background:
#ffffff;

box-shadow:
0 2px 5px
rgba(0, 0, 0, 0.16);

transition:
transform
var(--jobs-transition);
}


.jobs-switch-row
input:checked
+
.jobs-switch {
background:
var(--jobs-gold);
}


.jobs-switch-row
input:checked
+
.jobs-switch::after {
transform:
translateX(15px);
}


.jobs-switch-row > span:last-child {
min-width: 0;
}


.jobs-switch-row strong {
display: block;

color:
var(--jobs-text);

font-size: 6.5px;
}


.jobs-switch-row small {
display: block;

margin-top: 2px;

color:
var(--jobs-muted);

font-size: 5.5px;

line-height: 1.4;
}


/* ============================================================
FORM MESSAGE
============================================================ */

.jobs-form-message {
margin-top: 12px;

display: none;

padding:
9px 10px;

border-radius: 9px;

font-size: 6.2px;

line-height: 1.5;
}


.jobs-form-message.success {
display: block;

border:
1px solid
rgba(25, 135, 84, 0.17);

background:
rgba(25, 135, 84, 0.08);

color:
#146c43;
}


.jobs-form-message.error {
display: block;

border:
1px solid
rgba(200, 62, 62, 0.17);

background:
rgba(200, 62, 62, 0.07);

color:
#a12f2f;
}


.jobs-form-message.info {
display: block;

border:
1px solid
rgba(37, 99, 235, 0.15);

background:
rgba(37, 99, 235, 0.07);

color:
#1d4ed8;
}


/* ============================================================
MODAL FOOTER
============================================================ */

.jobs-modal-footer {
margin-top: 15px;

padding-top: 13px;

display: flex;
align-items: center;
justify-content: flex-end;

flex-wrap: wrap;

gap: 7px;

border-top:
1px solid
var(--jobs-border);
}


.jobs-secondary-btn,
.jobs-primary-btn,
.jobs-danger-btn {
min-height: 36px;

padding:
0 11px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

border-radius: 999px;

font-size: 6.4px;
font-weight: 600;
}


.jobs-secondary-btn {
border:
1px solid
var(--jobs-border);

background:
#ffffff;

color:
#555555;
}


.jobs-secondary-btn:hover {
background:
#f4f4f4;
}


.jobs-primary-btn {
background:
var(--jobs-black-soft);

color:
#ffffff;
}


.jobs-primary-btn:hover {
background:
var(--jobs-gold);

color:
#111111;
}


.jobs-danger-btn {
background:
var(--jobs-red);

color:
#ffffff;
}


.jobs-danger-btn:hover {
background:
#b72f2f;
}


/* ============================================================
SMALL MODAL CARD
============================================================ */

.jobs-small-modal-card {
width:
min(
470px,
100%
);

max-height:
calc(
100vh - 44px
);

overflow-y: auto;

border-radius: 18px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-lg);
}


/* ============================================================
REPORT INTRO
============================================================ */

.jobs-report-intro {
padding:
14px 15px 3px;
}


.jobs-report-intro p {
color:
var(--jobs-muted);

font-size: 6.4px;

line-height: 1.55;
}


/* ============================================================
REPORT OPTIONS
============================================================ */

.jobs-report-options {
padding:
8px 15px;

display: flex;
flex-direction: column;

gap: 6px;
}


.jobs-report-options label {
cursor: pointer;
}


.jobs-report-options input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.jobs-report-options label > span {
min-height: 58px;

padding:
9px 10px;

display: flex;
align-items: center;

gap: 9px;

border:
1px solid
var(--jobs-border);

border-radius: 11px;

background:
#ffffff;
}


.jobs-report-options label > span:hover {
border-color:
rgba(200, 62, 62, 0.20);

background:
rgba(200, 62, 62, 0.025);
}


.jobs-report-options
input:checked
+
span {
border-color:
rgba(200, 62, 62, 0.38);

background:
rgba(200, 62, 62, 0.06);
}


.jobs-report-options
label > span > i {
width: 34px;
height: 34px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 9px;

background:
rgba(200, 62, 62, 0.07);

color:
var(--jobs-red);

font-size: 8px;
}


.jobs-report-options
label > span > span {
min-width: 0;
}


.jobs-report-options strong {
display: block;

color:
var(--jobs-text);

font-size: 6.6px;
}


.jobs-report-options small {
display: block;

margin-top: 2px;

color:
var(--jobs-muted);

font-size: 5.4px;

line-height: 1.4;
}


/* ============================================================
SHARE CONTENT
============================================================ */

.jobs-share-content {
padding: 15px;
}


.jobs-share-content > p {
margin-bottom: 12px;

color:
var(--jobs-muted);

font-size: 6.4px;

line-height: 1.55;
}


.jobs-share-options {
display: flex;
flex-direction: column;

gap: 7px;
}


.jobs-share-option {
min-height: 62px;

padding:
9px 10px;

display: flex;
align-items: center;

gap: 10px;

border:
1px solid
var(--jobs-border);

border-radius: 11px;

background:
#ffffff;

text-align: left;
}


.jobs-share-option:hover {
border-color:
var(--jobs-gold-border);

background:
#fafafa;
}


.jobs-share-icon {
width: 37px;
height: 37px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 10px;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 10px;
}


.jobs-share-option
> span:last-child {
min-width: 0;
}


.jobs-share-option strong {
display: block;

color:
var(--jobs-text);

font-size: 6.7px;
}


.jobs-share-option small {
display: block;

margin-top: 2px;

color:
var(--jobs-muted);

font-size: 5.4px;
}


/* ============================================================
SHARE LINK BOX
============================================================ */

.jobs-share-link-box {
position: relative;

margin-top: 13px;
}


.jobs-share-link-box input {
width: 100%;
height: 39px;

padding:
0 43px 0 10px;

border:
1px solid
var(--jobs-border);

border-radius: 9px;

outline: none;

background:
#f8f8f8;

color:
#666666;

font-size: 6px;
}


.jobs-share-link-box button {
position: absolute;

top: 50%;
right: 5px;

width: 30px;
height: 30px;

transform:
translateY(-50%);

display: flex;
align-items: center;
justify-content: center;

border-radius: 7px;

background:
var(--jobs-black-soft);

color:
#ffffff;

font-size: 7px;
}


.jobs-share-link-box button:hover {
background:
var(--jobs-gold);

color:
#111111;
}


/* ============================================================
JOB OPTIONS MENU
============================================================ */

.jobs-options-menu {
position: fixed;

z-index: 12000;

width: 210px;

padding: 6px;

display: none;

border:
1px solid
var(--jobs-border);

border-radius: 12px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-md);
}


.jobs-options-menu.active {
display: block;

animation:
jobsDropdownOpen
0.16s ease;
}


.jobs-options-menu button {
width: 100%;

min-height: 36px;

padding:
0 9px;

display: flex;
align-items: center;

gap: 8px;

border-radius: 8px;

background:
transparent;

color:
#555555;

font-size: 6.4px;

text-align: left;
}


.jobs-options-menu button i {
width: 15px;

color:
#888888;

font-size: 7px;

text-align: center;
}


.jobs-options-menu button:hover {
background:
#f5f5f5;

color:
#111111;
}


.jobs-options-menu
button.danger {
color:
var(--jobs-red);
}


.jobs-options-menu
button.danger i {
color:
var(--jobs-red);
}


.jobs-options-menu
button.danger:hover {
background:
rgba(200, 62, 62, 0.07);
}


/* ============================================================
CONFIRMATION CARD
============================================================ */

.jobs-confirm-card {
position: relative;

width:
min(
410px,
100%
);

padding:
25px 20px 19px;

border-radius: 18px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-lg);

text-align: center;
}


.jobs-confirm-card
.jobs-modal-close {
position: absolute;

top: 10px;
right: 10px;
}


.jobs-confirm-icon {
width: 57px;
height: 57px;

margin:
7px auto 13px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 16px;
}


.jobs-confirm-icon.danger {
background:
rgba(200, 62, 62, 0.08);

color:
var(--jobs-red);
}


.jobs-confirm-card h2 {
margin-bottom: 7px;

color:
var(--jobs-text);

font-size: 12px;
font-weight: 650;
}


.jobs-confirm-card p {
max-width: 330px;

margin:
0 auto;

color:
var(--jobs-muted);

font-size: 6.5px;

line-height: 1.6;
}


.jobs-confirm-actions {
margin-top: 18px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 7px;
}


.jobs-confirm-actions button {
width: 100%;
}


/* ============================================================
DISABLED BUTTON STATES
============================================================ */

.jobs-modal button:disabled,
.job-card button:disabled,
.jobs-publish-btn:disabled {
opacity: 0.55;

cursor: not-allowed;

transform: none;
}


/* ============================================================
INLINE BUTTON LOADING
============================================================ */

.jobs-button-loading {
pointer-events: none;
}


.jobs-button-loading i {
animation:
jobsLoaderSpin
0.8s linear infinite;
}

/* ============================================================
TOAST CONTAINER
============================================================ */

.jobs-toast-container {
position: fixed;

top:
calc(
var(--jobs-header-height)
+
14px
);

right: 17px;

z-index: 20000;

width:
min(
340px,
calc(
100vw -
30px
)
);

display: flex;

flex-direction: column;

gap: 8px;

pointer-events: none;
}


/* ============================================================
TOAST
============================================================ */

.jobs-toast {
width: 100%;

min-height: 58px;

padding:
10px 12px;

display: flex;

align-items: flex-start;

gap: 9px;

border:
1px solid
var(--jobs-border);

border-radius: 12px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-md);

pointer-events: auto;

animation:
jobsToastIn
0.25s ease;
}


@keyframes jobsToastIn {

from {
opacity: 0;

transform:
translateX(20px);
}

to {
opacity: 1;

transform:
translateX(0);
}

}


.jobs-toast.removing {
animation:
jobsToastOut
0.22s ease forwards;
}


@keyframes jobsToastOut {

to {
opacity: 0;

transform:
translateX(20px);
}

}


.jobs-toast-icon {
width: 31px;

height: 31px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

border-radius: 9px;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 8px;
}


.jobs-toast.success
.jobs-toast-icon {
background:
rgba(25, 135, 84, 0.08);

color:
var(--jobs-green);
}


.jobs-toast.error
.jobs-toast-icon {
background:
rgba(200, 62, 62, 0.08);

color:
var(--jobs-red);
}


.jobs-toast.info
.jobs-toast-icon {
background:
rgba(37, 99, 235, 0.08);

color:
var(--jobs-blue);
}


.jobs-toast-content {
min-width: 0;

flex: 1;
}


.jobs-toast-content strong {
display: block;

margin-bottom: 2px;

color:
var(--jobs-text);

font-size: 6.8px;
}


.jobs-toast-content p {
color:
var(--jobs-muted);

font-size: 5.8px;

line-height: 1.45;
}


.jobs-toast-close {
width: 23px;

height: 23px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background:
transparent;

color:
#aaaaaa;

font-size: 6px;
}


.jobs-toast-close:hover {
background:
#f2f2f2;

color:
#555555;
}


/* ============================================================
JOB STATUS STATES
============================================================ */

.job-status-badge {
min-height: 22px;

padding:
0 7px;

display: inline-flex;

align-items: center;

gap: 4px;

border-radius: 999px;

font-size: 5.5px;

font-weight: 650;
}


.job-status-badge.active {
background:
rgba(25, 135, 84, 0.08);

color:
var(--jobs-green);
}


.job-status-badge.draft {
background:
rgba(37, 99, 235, 0.08);

color:
var(--jobs-blue);
}


.job-status-badge.closed {
background:
rgba(200, 62, 62, 0.08);

color:
var(--jobs-red);
}


.job-status-badge.expired {
background:
#f1f1f1;

color:
#777777;
}


/* ============================================================
CLOSED / EXPIRED JOB CARD
============================================================ */

.job-card.closed,
.job-card.expired {
opacity: 0.78;
}


.job-card.closed::after,
.job-card.expired::after {
content: "";

position: absolute;

inset: 0;

border-radius: inherit;

pointer-events: none;
}


.job-card.closed::after {
border:
1px solid
rgba(200, 62, 62, 0.12);
}


.job-card.expired::after {
border:
1px solid
rgba(120, 120, 120, 0.12);
}


/* ============================================================
ADMIN / VERIFIED OFFER
============================================================ */

.job-admin-label {
min-height: 21px;

padding:
0 7px;

display: inline-flex;

align-items: center;

gap: 4px;

border-radius: 999px;

background:
var(--jobs-black-soft);

color:
#ffffff;

font-size: 5.2px;

font-weight: 650;
}


.job-admin-label i {
color:
var(--jobs-gold);
}


.job-verified-label {
min-height: 21px;

padding:
0 7px;

display: inline-flex;

align-items: center;

gap: 4px;

border-radius: 999px;

background:
rgba(37, 99, 235, 0.07);

color:
var(--jobs-blue);

font-size: 5.2px;

font-weight: 650;
}


/* ============================================================
APPLICATION STATUS
============================================================ */

.job-application-status {
min-height: 23px;

padding:
0 8px;

display: inline-flex;

align-items: center;

justify-content: center;

border-radius: 999px;

font-size: 5.5px;

font-weight: 650;
}


.job-application-status.pending {
background:
rgba(201, 132, 25, 0.09);

color:
var(--jobs-orange);
}


.job-application-status.reviewing {
background:
rgba(37, 99, 235, 0.08);

color:
var(--jobs-blue);
}


.job-application-status.accepted {
background:
rgba(25, 135, 84, 0.08);

color:
var(--jobs-green);
}


.job-application-status.rejected {
background:
rgba(200, 62, 62, 0.08);

color:
var(--jobs-red);
}


/* ============================================================
ALREADY APPLIED STATE
============================================================ */

.job-already-applied {
width: 100%;

min-height: 37px;

display: flex;

align-items: center;

justify-content: center;

gap: 6px;

border-radius: 999px;

background:
rgba(25, 135, 84, 0.08);

color:
var(--jobs-green);

font-size: 6.2px;

font-weight: 650;
}


/* ============================================================
SAVED STATE
============================================================ */

.job-card-save-btn.saved i,
.job-save-main-btn.saved i {
font-weight: 900;
}


/* ============================================================
OWN JOB CARD
============================================================ */

.job-card.own-job {
border-color:
rgba(212, 175, 55, 0.25);
}


.job-card.own-job::before {
content: "Votre offre";

position: absolute;

top: -8px;

left: 15px;

padding:
3px 7px;

border-radius: 999px;

background:
var(--jobs-gold);

color:
#111111;

font-size: 5px;

font-weight: 700;
}


/* ============================================================
FEATURED JOB CARD
============================================================ */

.job-card.featured {
border-color:
rgba(212, 175, 55, 0.34);

box-shadow:
0 9px 28px
rgba(212, 175, 55, 0.07);
}


.job-card.featured::before {
content: "En vedette";

position: absolute;

top: -8px;

left: 15px;

padding:
3px 7px;

border-radius: 999px;

background:
var(--jobs-black-soft);

color:
#ffffff;

font-size: 5px;

font-weight: 700;
}


/* ============================================================
APPLICATION COUNT
============================================================ */

.job-applications-count {
display: inline-flex;

align-items: center;

gap: 4px;

color:
#858585;

font-size: 5.8px;
}


.job-applications-count i {
color:
#9a9a9a;

font-size: 6px;
}


/* ============================================================
CONTACT INFO
============================================================ */

.job-contact-box {
margin-top: 14px;

padding: 12px;

border:
1px solid
var(--jobs-border);

border-radius: 11px;

background:
#fafafa;
}


.job-contact-box > span {
display: block;

margin-bottom: 7px;

color:
var(--jobs-gold-dark);

font-size: 5.3px;

font-weight: 700;

letter-spacing: 0.6px;
}


.job-contact-item {
min-height: 31px;

display: flex;

align-items: center;

gap: 7px;

color:
#555555;

font-size: 6px;
}


.job-contact-item i {
width: 17px;

color:
#8d8d8d;

text-align: center;
}


.job-contact-item a:hover {
color:
var(--jobs-gold-dark);
}


/* ============================================================
EXTERNAL APPLICATION NOTICE
============================================================ */

.job-external-application {
margin-top: 12px;

padding: 10px;

border:
1px solid
rgba(37, 99, 235, 0.14);

border-radius: 10px;

background:
rgba(37, 99, 235, 0.04);

color:
#525252;

font-size: 5.9px;

line-height: 1.5;
}


.job-external-application i {
margin-right: 4px;

color:
var(--jobs-blue);
}


/* ============================================================
FILTER SIDEBAR MOBILE STATE
============================================================ */

.jobs-filter-sidebar.mobile-open {
transform:
translateX(0);
}


/* ============================================================
NAV MOBILE STATE
============================================================ */

.jobs-nav-links.mobile-open {
transform:
translateX(0);
}


/* ============================================================
TABLET - LARGE
============================================================ */

@media (max-width: 1280px) {

.jobs-layout {
grid-template-columns:
225px
minmax(0, 1fr)
255px;

gap: 15px;
}


.jobs-navbar {
grid-template-columns:
minmax(165px, auto)
minmax(0, 1fr)
minmax(230px, auto);

gap: 16px;
}

}


/* ============================================================
TABLET LANDSCAPE
============================================================ */

@media (max-width: 1100px) {

.jobs-layout {
grid-template-columns:
220px
minmax(0, 1fr);
}


.jobs-right-sidebar {
display: none;
}


.jobs-navbar {
grid-template-columns:
auto
minmax(0, 1fr)
auto;
}


.jobs-nav-links {
gap: 3px;
}


.jobs-nav-links a {
padding:
0 8px;
}

}


/* ============================================================
TABLET
============================================================ */

@media (max-width: 900px) {

:root {
--jobs-header-height:
62px;
}


.jobs-header {
height:
var(--jobs-header-height);
}


.jobs-navbar {
padding:
0 14px;

grid-template-columns:
auto
minmax(0, 1fr)
auto;

gap: 10px;
}


.jobs-menu-btn {
display: flex;
}


.jobs-nav-links {
position: fixed;

top:
var(--jobs-header-height);

left: 0;

bottom: 0;

z-index: 4900;

width:
min(
275px,
84vw
);

padding:
15px 11px;

flex-direction: column;

align-items: stretch;

justify-content: flex-start;

gap: 4px;

transform:
translateX(-105%);

border-right:
1px solid
var(--jobs-border);

background:
#ffffff;

box-shadow:
18px 0 45px
rgba(0, 0, 0, 0.14);

transition:
transform
0.3s ease;
}


.jobs-nav-links a {
width: 100%;

min-height: 42px;

justify-content: flex-start;

padding:
0 12px;

border-radius: 9px;

font-size: 7px;
}


.jobs-nav-links.mobile-open {
transform:
translateX(0);
}


.jobs-page {
padding:
14px 14px 45px;
}


.jobs-filter-sidebar {
position: fixed;

top:
var(--jobs-header-height);

left: 0;

bottom: 0;

z-index: 4950;

width:
min(
300px,
88vw
);

max-height: none;

border-radius:
0 17px 17px 0;

transform:
translateX(-105%);

transition:
transform
0.3s ease;

box-shadow:
18px 0 45px
rgba(0, 0, 0, 0.15);
}


.jobs-filter-header button {
display: flex;
}


.jobs-layout {
display: block;
}


.jobs-main-content {
width: 100%;
}


.jobs-open-filter-btn {
display: inline-flex;
}

}


/* ============================================================
TABLET MODALS
============================================================ */

@media (max-width: 800px) {

.job-details-layout {
grid-template-columns:
1fr;

overflow-y: auto;
}


.job-details-main {
border-right: 0;

border-bottom:
1px solid
var(--jobs-border);
}


.job-details-actions-panel {
overflow: visible;
}


.job-detail-meta-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

}


/* ============================================================
MOBILE
============================================================ */

@media (max-width: 700px) {

:root {
--jobs-header-height: 58px;
}


.jobs-header {
height:
var(--jobs-header-height);
}


.jobs-navbar {
padding:
0 10px;

grid-template-columns:
1fr auto;

gap: 7px;
}


.jobs-nav-left {
min-width: 0;
}


.jobs-logo {
font-size: 13px;
}


.jobs-nav-right {
gap: 5px;
}


.jobs-guest-actions {
gap: 4px;
}


.jobs-login-link {
min-height: 34px;

padding:
0 8px;

font-size: 6.2px;
}


.jobs-register-btn {
min-height: 34px;

padding:
0 9px;

font-size: 6.1px;
}


.jobs-publish-btn {
width: 36px;
height: 36px;

min-height: 36px;

padding: 0;

border-radius: 50%;
}


.jobs-publish-btn span {
display: none;
}


.jobs-user-menu-btn {
width: 38px;
height: 38px;

min-height: 38px;

padding: 4px;

justify-content: center;
}


.jobs-user-menu-btn img {
width: 29px;
height: 29px;
}


.jobs-user-menu-btn span,
.jobs-user-menu-btn > i {
display: none;
}


.jobs-page {
padding:
10px 10px 40px;
}


/* ========================================================
HERO
======================================================== */

.jobs-hero {
min-height: auto;

padding:
22px 16px;

border-radius: 17px;
}


.jobs-eyebrow {
font-size: 5.7px;
}


.jobs-hero h1 {
font-size: 17px;

line-height: 1.35;
}


.jobs-hero p {
font-size: 7px;

line-height: 1.6;
}


.jobs-search-panel {
margin-top: 18px;

padding: 7px;

grid-template-columns:
1fr;

gap: 6px;
}


.jobs-search-field input {
height: 41px;

font-size: 6.7px;
}


.jobs-search-btn {
width: 100%;

min-height: 41px;
}


/* ========================================================
CATEGORY BAR
======================================================== */

.jobs-category-bar {
margin-top: 10px;

border-radius: 12px;
}


.jobs-category-btn {
min-height: 32px;

padding:
0 9px;

font-size: 6.1px;
}


/* ========================================================
RESULTS TOOLBAR
======================================================== */

.jobs-results-toolbar {
min-height: auto;

padding:
10px;

align-items: stretch;

flex-direction: column;

border-radius: 13px;
}


.jobs-results-toolbar h2 {
font-size: 9px;
}


.jobs-results-actions {
width: 100%;

justify-content: space-between;
}


.jobs-open-filter-btn {
min-height: 32px;
}


/* ========================================================
JOB CARD
======================================================== */

.job-card {
padding: 13px;

border-radius: 14px;
}


.job-card-company-logo {
width: 39px;
height: 39px;

border-radius: 10px;
}


.job-card-company-info strong {
font-size: 7.1px;
}


.job-card-title {
font-size: 11px;
}


.job-card-description {
font-size: 6.7px;
}


.job-card-footer {
align-items: stretch;

flex-direction: column;
}


.job-card-actions {
width: 100%;
}


.job-card-view-btn {
flex: 1;
}


/* ========================================================
FILTER DRAWER
======================================================== */

.jobs-filter-sidebar {
width: 100%;

border-radius: 0;

border-right: 0;
}


.jobs-filter-actions {
position: sticky;

bottom: 0;

z-index: 3;

background: #ffffff;

border-top:
1px solid
var(--jobs-border);
}


/* ========================================================
GENERIC MODAL
======================================================== */

.jobs-modal {
padding: 8px;

align-items: flex-end;
}


.job-details-card,
.job-apply-card,
.publish-job-card,
.jobs-small-modal-card,
.jobs-auth-required-card,
.jobs-confirm-card {
width: 100%;

max-height:
calc(
100vh - 16px
);

border-radius:
18px 18px 8px 8px;
}


/* ========================================================
JOB DETAILS
======================================================== */

.job-details-card {
height:
calc(
100vh - 16px
);

display: flex;

flex-direction: column;
}


.job-details-card
> .jobs-modal-header {
flex:
0 0 auto;
}


.job-details-layout {
flex: 1;

min-height: 0;

max-height: none;

display: flex;

flex-direction: column;

overflow-y: auto;
}


.job-details-main {
flex:
0 0 auto;

min-height: 0;

padding: 14px;

overflow: visible;
}


.job-details-actions-panel {
flex:
0 0 auto;

padding: 12px;

overflow: visible;
}


.job-detail-heading h1 {
font-size: 14px;
}


.job-detail-meta-grid {
grid-template-columns:
1fr;
}


.job-detail-meta-box {
min-height: 58px;
}


/* ========================================================
APPLICATION FORM
======================================================== */

#jobApplyForm {
padding:
12px;
}


.job-apply-card {
overflow-y: auto;
}


.job-apply-summary {
padding: 9px;
}


.jobs-form-group textarea {
min-height: 105px;
}


/* ========================================================
PUBLISH FORM
======================================================== */

#publishJobForm {
padding:
11px 12px 15px;
}


.jobs-form-grid,
.jobs-budget-form-grid {
grid-template-columns:
1fr;

gap: 0;
}


.jobs-rich-editor {
min-height: 135px;

max-height: 260px;
}


.jobs-editor-toolbar {
padding: 5px;
}


.jobs-editor-toolbar button {
width: 28px;
height: 28px;
}


.jobs-switch-row {
align-items: flex-start;
}


.jobs-modal-footer {
position: sticky;

bottom: 0;

z-index: 10;

margin-left: -12px;
margin-right: -12px;
margin-bottom: -15px;

padding:
10px 12px
calc(
10px +
env(safe-area-inset-bottom)
);

background: #ffffff;
}

}


/* ============================================================
MOBILE - SMALL
============================================================ */

@media (max-width: 520px) {

.jobs-navbar {
padding:
0 8px;
}


.jobs-menu-btn {
width: 35px;
height: 35px;
}


.jobs-logo {
font-size: 12px;
}


.jobs-login-link {
display: none;
}


.jobs-register-btn {
padding:
0 8px;

font-size: 5.8px;
}


.jobs-page {
padding-left: 7px;
padding-right: 7px;
}


.jobs-hero {
padding:
19px 14px;
}


.jobs-hero h1 {
font-size: 15px;
}


.jobs-hero p {
font-size: 6.6px;
}


.jobs-search-panel {
margin-top: 15px;
}


.jobs-category-bar {
padding: 6px;
}


.jobs-results-count {
font-size: 5.9px;
}


.job-card {
padding: 11px;
}


.job-card-header {
gap: 7px;
}


.job-card-company {
gap: 7px;
}


.job-card-company-logo {
width: 36px;
height: 36px;
}


.job-card-title {
font-size: 10px;
}


.job-card-meta {
gap:
5px 8px;
}


.job-card-meta span {
font-size: 5.7px;
}


.job-card-description {
font-size: 6.4px;
}


.job-card-skills {
gap: 4px;
}


.job-card-footer {
margin-top: 10px;

padding-top: 9px;
}


.job-card-actions {
display: grid;

grid-template-columns:
36px
minmax(0, 1fr);

gap: 5px;
}


.job-card-save-btn {
width: 36px;
height: 36px;
}


.job-card-view-btn {
width: 100%;
}


/* ========================================================
AUTH MODAL
======================================================== */

.jobs-auth-required-card {
padding:
25px 15px 18px;
}


.jobs-auth-required-actions {
grid-template-columns:
1fr;
}


/* ========================================================
CONFIRMATION
======================================================== */

.jobs-confirm-actions {
grid-template-columns:
1fr;
}


/* ========================================================
MODAL HEADER
======================================================== */

.jobs-modal-header {
min-height: 58px;

padding:
10px 12px;
}


.jobs-modal-header h2 {
font-size: 9.5px;
}


/* ========================================================
SHARE
======================================================== */

.jobs-share-content {
padding: 12px;
}


.jobs-share-option {
min-height: 57px;
}


/* ========================================================
REPORT
======================================================== */

.jobs-report-intro {
padding:
12px 12px 3px;
}


.jobs-report-options {
padding:
7px 12px;
}


.jobs-small-modal-card
.jobs-form-group {
padding-left: 12px;
padding-right: 12px;
}

}


/* ============================================================
VERY SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

.jobs-logo {
max-width: 105px;

overflow: hidden;

white-space: nowrap;
}


.jobs-register-btn {
max-width: 92px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;
}


.jobs-hero {
border-radius: 14px;
}


.jobs-hero h1 {
font-size: 14px;
}


.jobs-search-field input {
padding-left: 33px;
}


.jobs-results-toolbar {
padding: 9px;
}


.jobs-results-actions {
align-items: stretch;

flex-direction: column;
}


.jobs-open-filter-btn {
width: 100%;
}


.job-card-company-info strong {
max-width: 190px;
}


.job-card-badges {
margin-top: 8px;
}


.job-detail-top {
flex-direction: column;
}


.job-detail-company-logo {
width: 46px;
height: 46px;
}


.jobs-modal-footer {
flex-direction: column;
}


.jobs-modal-footer button {
width: 100%;
}

}


/* ============================================================
MOBILE NAV DRAWER IMPROVEMENTS
============================================================ */

@media (max-width: 900px) {

.jobs-nav-links::before {
content: "Navigation";

display: block;

padding:
5px 12px 10px;

color:
var(--jobs-gold-dark);

font-size: 5.7px;

font-weight: 700;

letter-spacing: 0.8px;

text-transform: uppercase;
}


.jobs-nav-links a.active {
background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);
}

}


/* ============================================================
MOBILE OVERLAY ACTIVE WITH NAV OR FILTER
============================================================ */

@media (max-width: 900px) {

body.jobs-nav-open
.jobs-mobile-overlay,

body.jobs-filter-open
.jobs-mobile-overlay {
display: block;
}

}


/* ============================================================
SAFE AREA SUPPORT
============================================================ */

@supports (
padding-bottom:
env(safe-area-inset-bottom)
) {

@media (max-width: 700px) {

.jobs-filter-sidebar {
padding-bottom:
env(safe-area-inset-bottom);
}


.jobs-nav-links {
padding-bottom:
calc(
15px +
env(safe-area-inset-bottom)
);
}

}

}


/* ============================================================
KEYBOARD FOCUS
============================================================ */

.jobs-header a:focus-visible,
.jobs-header button:focus-visible,
.jobs-page button:focus-visible,
.jobs-page input:focus-visible,
.jobs-page textarea:focus-visible,
.jobs-page select:focus-visible,
.jobs-modal button:focus-visible,
.jobs-modal input:focus-visible,
.jobs-modal textarea:focus-visible,
.jobs-modal select:focus-visible,
.jobs-modal a:focus-visible {

outline:
2px solid
var(--jobs-gold);

outline-offset:
2px;

}


/* ============================================================
TOUCH DEVICES
============================================================ */

@media (hover: none) {

.job-card:hover,
.jobs-publish-btn:hover,
.jobs-featured-item:hover {
transform: none;
}

}


/* ============================================================
REDUCED MOTION
============================================================ */

@media (
prefers-reduced-motion:
reduce
) {

*,
*::before,
*::after {
scroll-behavior:
auto !important;

animation-duration:
0.01ms !important;

animation-iteration-count:
1 !important;

transition-duration:
0.01ms !important;
}

}


/* ============================================================
PRINT
============================================================ */

@media print {

.jobs-header,
.jobs-filter-sidebar,
.jobs-right-sidebar,
.jobs-category-bar,
.jobs-results-toolbar,
.jobs-active-filters,
.jobs-load-more-wrapper,
.jobs-toast-container,
.jobs-mobile-overlay,
.jobs-modal,
.job-card-options-btn,
.job-card-actions {
display:
none !important;
}


body {
background:
#ffffff;
}


.jobs-page {
max-width: none;

padding: 0;
}


.jobs-layout {
display: block;
}


.jobs-main-content {
width: 100%;
}


.job-card {
margin-bottom: 12px;

box-shadow: none;

break-inside:
avoid;
}

}

/* ============================================================
APPLICATION PROFILE PREVIEW
============================================================ */

.job-application-notice {
margin-top: 12px;

padding: 12px;

display: flex;
align-items: flex-start;

gap: 10px;

border:
1px solid
rgba(37, 99, 235, 0.14);

border-radius: 11px;

background:
rgba(37, 99, 235, 0.045);
}


.job-application-notice-icon {
width: 36px;
height: 36px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 9px;

background:
rgba(37, 99, 235, 0.08);

color:
var(--jobs-blue);

font-size: 9px;
}


.job-application-notice > div:last-child {
min-width: 0;
}


.job-application-notice strong {
display: block;

color:
var(--jobs-text);

font-size: 6.8px;
}


.job-application-notice p {
margin-top: 3px;

color:
var(--jobs-muted);

font-size: 5.8px;

line-height: 1.55;
}


/* ============================================================
APPLICATION SECTION HEADING
============================================================ */

.job-application-section-heading {
display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;
}


.job-application-section-heading > div > span {
display: block;

margin-bottom: 2px;

color:
var(--jobs-gold-dark);

font-size: 5.2px;
font-weight: 700;

letter-spacing: 0.75px;
}


.job-application-section-heading h3 {
color:
var(--jobs-text);

font-size: 9px;
font-weight: 650;
}


.job-application-edit-profile {
min-height: 30px;

padding:
0 9px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 5px;

flex-shrink: 0;

border:
1px solid
var(--jobs-border);

border-radius: 999px;

background:
#ffffff;

color:
#666666;

font-size: 5.7px;
font-weight: 600;
}


.job-application-edit-profile:hover {
border-color:
var(--jobs-gold-border);

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);
}


/* ============================================================
APPLICATION PROFILE CARD
============================================================ */

.job-application-profile-card {
margin-top: 12px;

padding: 14px;

border:
1px solid
var(--jobs-border);

border-radius: 14px;

background:
#ffffff;
}


/* ============================================================
PROFILE TOP
============================================================ */

.job-application-profile-top {
margin-top: 13px;

padding-bottom: 12px;

display: flex;
align-items: center;

gap: 10px;

border-bottom:
1px solid
var(--jobs-border);
}


.job-application-profile-top img {
width: 49px;
height: 49px;

flex-shrink: 0;

object-fit: cover;

border:
2px solid
#ffffff;

border-radius: 50%;

box-shadow:
0 4px 13px
rgba(0, 0, 0, 0.08);
}


.job-application-profile-identity {
min-width: 0;
}


.job-application-profile-identity strong {
display: block;

overflow: hidden;

color:
var(--jobs-text);

font-size: 8px;
font-weight: 650;

white-space: nowrap;
text-overflow: ellipsis;
}


.job-application-profile-identity > span {
display: block;

margin-top: 2px;

color:
var(--jobs-muted);

font-size: 5.8px;
}


.job-application-profile-identity small {
display: inline-flex;

margin-top: 4px;

padding:
3px 7px;

border-radius: 999px;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 5.1px;
font-weight: 650;
}


/* ============================================================
APPLICATION PROFILE GRID
============================================================ */

.job-application-profile-grid {
margin-top: 12px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 8px;
}


.job-application-profile-item {
min-width: 0;

min-height: 60px;

padding: 9px;

display: flex;
align-items: center;

gap: 8px;

border:
1px solid
var(--jobs-border);

border-radius: 10px;

background:
#fafafa;
}


.job-application-profile-icon {
width: 31px;
height: 31px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 8px;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 7px;
}


.job-application-profile-item > div {
min-width: 0;
}


.job-application-profile-item small {
display: block;

color:
#999999;

font-size: 5.1px;
}


.job-application-profile-item strong {
display: block;

margin-top: 2px;

overflow: hidden;

color:
var(--jobs-text);

font-size: 6.2px;

white-space: nowrap;
text-overflow: ellipsis;
}


/* ============================================================
APPLICATION PROFILE BLOCKS
============================================================ */

.job-application-profile-block {
margin-top: 11px;

padding-top: 11px;

border-top:
1px solid
var(--jobs-border);
}


.job-application-profile-block > small {
display: block;

margin-bottom: 6px;

color:
var(--jobs-gold-dark);

font-size: 5.2px;
font-weight: 700;

letter-spacing: 0.55px;
}


.job-application-profile-block p {
color:
#555555;

font-size: 6.3px;

line-height: 1.6;
}


/* ============================================================
APPLICATION SKILLS
============================================================ */

.job-application-skills {
display: flex;
flex-wrap: wrap;

gap: 5px;
}


.job-application-skill {
min-height: 23px;

padding:
0 7px;

display: inline-flex;
align-items: center;

border-radius: 999px;

background:
#f2f2f2;

color:
#5f5f5f;

font-size: 5.5px;
}


.job-application-empty-value {
color:
#999999;

font-size: 5.8px;
}


/* ============================================================
APPLICATION EXTRA SECTION
============================================================ */

.job-application-extra-section {
margin-top: 13px;

padding: 14px;

border:
1px solid
var(--jobs-border);

border-radius: 14px;

background:
#ffffff;
}


/* ============================================================
APPLICATION CONSENT
============================================================ */

.job-application-consent {
margin-top: 13px;

padding: 11px;

display: flex;
align-items: flex-start;

gap: 9px;

border:
1px solid
var(--jobs-border);

border-radius: 11px;

background:
#fafafa;

cursor: pointer;
}


.job-application-consent input {
width: 15px;
height: 15px;

margin-top: 2px;

flex-shrink: 0;

accent-color:
var(--jobs-gold);
}


.job-application-consent > span {
min-width: 0;
}


.job-application-consent strong {
display: block;

color:
var(--jobs-text);

font-size: 6.4px;
}


.job-application-consent small {
display: block;

margin-top: 3px;

color:
var(--jobs-muted);

font-size: 5.5px;

line-height: 1.5;
}


/* ============================================================
JOB AUTHOR MODAL
============================================================ */

.job-author-modal-card {
width:
min(
620px,
100%
);

max-height:
calc(
100vh - 44px
);

overflow: hidden;

border-radius: 19px;

background:
#ffffff;

box-shadow:
var(--jobs-shadow-lg);
}


.job-author-modal-body {
max-height:
calc(
100vh - 115px
);

padding: 16px;

overflow-y: auto;
}


/* ============================================================
AUTHOR PROFILE TOP
============================================================ */

.job-author-profile-top {
padding: 14px;

display: flex;
align-items: center;

gap: 13px;

border:
1px solid
var(--jobs-border);

border-radius: 14px;

background:
linear-gradient(
135deg,
#fafafa,
#ffffff
);
}


.job-author-avatar-wrapper {
position: relative;

flex-shrink: 0;
}


.job-author-avatar-wrapper img {
width: 65px;
height: 65px;

object-fit: cover;

border:
3px solid
#ffffff;

border-radius: 50%;

box-shadow:
0 6px 18px
rgba(0, 0, 0, 0.10);
}


.job-author-role-icon {
position: absolute;

right: -2px;
bottom: 0;

width: 24px;
height: 24px;

display: flex;
align-items: center;
justify-content: center;

border:
3px solid
#ffffff;

border-radius: 50%;

background:
var(--jobs-black-soft);

color:
var(--jobs-gold);

font-size: 6px;
}


/* ============================================================
AUTHOR MAIN INFO
============================================================ */

.job-author-main-info {
min-width: 0;
}


.job-author-premium-label {
width: fit-content;

min-height: 21px;

margin-bottom: 5px;

padding:
0 7px;

display: inline-flex;
align-items: center;

gap: 4px;

border-radius: 999px;

background:
var(--jobs-black-soft);

color:
#ffffff;

font-size: 5.2px;
font-weight: 650;
}


.job-author-premium-label[hidden] {
display: none !important;
}


.job-author-premium-label i {
color:
var(--jobs-gold);
}


.job-author-main-info h3 {
overflow: hidden;

color:
var(--jobs-text);

font-size: 13px;
font-weight: 650;

white-space: nowrap;
text-overflow: ellipsis;
}


.job-author-main-info > span:not(.job-author-premium-label) {
display: block;

margin-top: 2px;

color:
var(--jobs-muted);

font-size: 6.2px;
}


.job-author-main-info > small {
display: block;

margin-top: 3px;

color:
var(--jobs-gold-dark);

font-size: 5.5px;
font-weight: 600;
}


/* ============================================================
AUTHOR SECTION
============================================================ */

.job-author-section {
margin-top: 14px;

padding: 13px;

border:
1px solid
var(--jobs-border);

border-radius: 12px;

background:
#ffffff;
}


.job-author-section > span {
display: block;

margin-bottom: 7px;

color:
var(--jobs-gold-dark);

font-size: 5.3px;
font-weight: 700;

letter-spacing: 0.65px;
}


.job-author-section > p {
color:
#555555;

font-size: 6.4px;

line-height: 1.65;
}


/* ============================================================
AUTHOR INFO GRID
============================================================ */

.job-author-info-grid {
margin-top: 12px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 8px;
}


.job-author-info-item {
min-width: 0;

min-height: 62px;

padding: 9px;

display: flex;
align-items: center;

gap: 8px;

border:
1px solid
var(--jobs-border);

border-radius: 10px;

background:
#fafafa;
}


.job-author-info-item > i {
width: 31px;
height: 31px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 8px;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 7px;
}


.job-author-info-item > div {
min-width: 0;
}


.job-author-info-item small {
display: block;

color:
#999999;

font-size: 5.1px;
}


.job-author-info-item strong {
display: block;

margin-top: 2px;

overflow: hidden;

color:
var(--jobs-text);

font-size: 6.2px;

white-space: nowrap;
text-overflow: ellipsis;
}


/* ============================================================
AUTHOR SKILLS
============================================================ */

.job-author-skills {
display: flex;
flex-wrap: wrap;

gap: 5px;
}


.job-author-skill {
min-height: 23px;

padding:
0 7px;

display: inline-flex;
align-items: center;

border-radius: 999px;

background:
var(--jobs-gold-soft);

color:
var(--jobs-gold-dark);

font-size: 5.5px;
font-weight: 600;
}


.job-author-empty {
color:
#999999;

font-size: 5.8px;
}


/* ============================================================
AUTHOR OTHER JOBS
============================================================ */

.job-author-section-heading {
margin-bottom: 9px;
}


.job-author-section-heading > span {
display: block;

color:
var(--jobs-gold-dark);

font-size: 5.3px;
font-weight: 700;

letter-spacing: 0.65px;
}


.job-author-section-heading small {
display: block;

margin-top: 2px;

color:
var(--jobs-muted);

font-size: 5.3px;
}


.job-author-jobs-list {
display: flex;
flex-direction: column;

gap: 7px;
}


.job-author-job-item {
width: 100%;

min-height: 60px;

padding: 9px 10px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 9px;

border:
1px solid
var(--jobs-border);

border-radius: 10px;

background:
#fafafa;

cursor: pointer;

transition:
border-color var(--jobs-transition),
background var(--jobs-transition);
}


.job-author-job-item:hover {
border-color:
var(--jobs-gold-border);

background:
#ffffff;
}


.job-author-job-content {
min-width: 0;
}


.job-author-job-content strong {
display: block;

overflow: hidden;

color:
var(--jobs-text);

font-size: 6.5px;

white-space: nowrap;
text-overflow: ellipsis;
}


.job-author-job-content span {
display: block;

margin-top: 3px;

color:
var(--jobs-muted);

font-size: 5.3px;
}


.job-author-job-item > i {
flex-shrink: 0;

color:
var(--jobs-gold-dark);

font-size: 7px;
}


/* ============================================================
MOBILE APPLICATION + AUTHOR MODALS
============================================================ */

@media (max-width: 700px) {

.job-application-section-heading {
align-items: flex-start;

flex-direction: column;
}


.job-application-edit-profile {
align-self: flex-start;
}


.job-application-profile-grid {
grid-template-columns:
1fr;
}


.job-author-modal-card {
width: 100%;

height:
calc(
100vh - 16px
);

max-height:
calc(
100vh - 16px
);

display: flex;
flex-direction: column;

border-radius:
18px 18px 8px 8px;
}


.job-author-modal-card
> .jobs-modal-header {
flex: 0 0 auto;
}


.job-author-modal-body {
flex: 1;

min-height: 0;

max-height: none;

padding: 12px;

overflow-y: auto;
}


.job-author-profile-top {
align-items: flex-start;
}


.job-author-info-grid {
grid-template-columns:
1fr;
}

}


/* ============================================================
VERY SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

.job-application-notice {
padding: 10px;
}


.job-application-profile-card,
.job-application-extra-section {
padding: 11px;
}


.job-application-profile-top {
align-items: flex-start;
}


.job-application-profile-top img {
width: 44px;
height: 44px;
}


.job-application-consent {
padding: 9px;
}


.job-author-profile-top {
padding: 11px;
}


.job-author-avatar-wrapper img {
width: 56px;
height: 56px;
}


.job-author-main-info h3 {
font-size: 11px;
}

}

/* ============================================================
JOB DETAILS MODAL - FINAL SCROLL FIX
DESKTOP + TABLET + MOBILE
============================================================ */

/* Lock the page behind the modal */
body.jobs-modal-open {
overflow: hidden !important;
}


/* ============================================================
ACTUAL JOB DETAILS MODAL
============================================================ */

#jobDetailsModal {
position: fixed !important;
inset: 0 !important;

width: 100% !important;

height: 100vh !important;
height: 100dvh !important;

max-height: 100dvh !important;

overflow-y: auto !important;
overflow-x: hidden !important;

overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;

align-items: flex-start !important;

padding:
8px
0
40px !important;

box-sizing: border-box;

z-index: 9999;
}


/* ============================================================
EVERYTHING INSIDE MUST BE ALLOWED TO GROW
============================================================ */

#jobDetailsModal > * {
flex-shrink: 0 !important;

height: auto !important;
min-height: auto !important;

max-height: none !important;
}


/* Actual dynamically rendered job details */
#jobDetailsContent {
height: auto !important;

min-height: 0 !important;

max-height: none !important;

overflow: visible !important;

padding-bottom: 100px !important;
}


/* ============================================================
REMOVE HEIGHT RESTRICTIONS FROM JOB DETAIL CONTENT
============================================================ */

#jobDetailsContent .job-detail-top,
#jobDetailsContent .job-detail-badges,
#jobDetailsContent .job-detail-grid,
#jobDetailsContent .job-detail-main,
#jobDetailsContent .job-detail-sidebar,
#jobDetailsContent .job-detail-section,
#jobDetailsContent .job-detail-contact {
height: auto !important;

max-height: none !important;

overflow: visible !important;
}


/* ============================================================
TABLET
============================================================ */

@media (max-width: 1024px) {

#jobDetailsModal {
width: 100% !important;

height: 100dvh !important;

overflow-y: auto !important;

padding-bottom: 70px !important;
}


#jobDetailsContent {
height: auto !important;

max-height: none !important;

overflow: visible !important;

padding-bottom: 120px !important;
}

}


/* ============================================================
MOBILE
============================================================ */

@media (max-width: 768px) {

#jobDetailsModal {
inset: 0 !important;

width: 100% !important;

height: 100vh !important;
height: 100dvh !important;

max-height: 100dvh !important;

overflow-y: auto !important;
overflow-x: hidden !important;

align-items: flex-start !important;

padding:
0
0
calc(
100px +
env(safe-area-inset-bottom)
)
!important;

-webkit-overflow-scrolling: touch;
}


#jobDetailsModal > * {
width: 100% !important;

height: auto !important;

min-height: auto !important;

max-height: none !important;

margin: 0 !important;

border-radius: 0 !important;
}


#jobDetailsContent {
width: 100% !important;

height: auto !important;

min-height: 0 !important;

max-height: none !important;

overflow: visible !important;

padding-bottom:
calc(
140px +
env(safe-area-inset-bottom)
)
!important;
}

}


/* ============================================================
SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

#jobDetailsModal {
padding-bottom:
calc(
120px +
env(safe-area-inset-bottom)
)
!important;
}


#jobDetailsContent {
padding-bottom:
calc(
160px +
env(safe-area-inset-bottom)
)
!important;
}

}

/* ============================================================
REPORTED JOB - OWNER NOTICE
============================================================ */

.job-report-owner-notice {
display: flex;
align-items: flex-start;
gap: 12px;

margin: 14px 0 18px;
padding: 14px 16px;

border: 1px solid rgba(180, 135, 0, 0.25);
border-radius: 14px;

background: rgba(180, 135, 0, 0.06);
}

.job-report-owner-notice-icon {
flex: 0 0 36px;

width: 36px;
height: 36px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 10px;

background: rgba(180, 135, 0, 0.1);
}

.job-report-owner-notice-content {
min-width: 0;
}

.job-report-owner-notice-content strong {
display: block;
margin-bottom: 4px;
}

.job-report-owner-notice-content p {
margin: 0;
line-height: 1.55;
}

.job-report-owner-notice.reviewing {
border-color: rgba(30, 100, 210, 0.22);
background: rgba(30, 100, 210, 0.05);
}


@media (max-width: 600px) {

.job-report-owner-notice {
padding: 12px;
gap: 10px;
}

}


@media (max-width: 900px) {

    .jobs-nav-links {
        position: fixed;

        top: var(--jobs-header-height);
        left: 0;

        width: min(285px, 86vw);

        height: calc(
            100dvh - var(--jobs-header-height)
        );

        min-height: calc(
            100vh - var(--jobs-header-height)
        );

        padding: 16px 12px 24px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        gap: 5px;

        overflow-y: auto;
        overflow-x: hidden;

        background: #ffffff !important;

        border-right: 1px solid var(--jobs-border);

        box-shadow:
            18px 0 45px rgba(0, 0, 0, 0.14);

        transform: translateX(-105%);

        transition:
            transform 0.3s ease;

        z-index: 7000;

        opacity: 1 !important;

        visibility: visible !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    .jobs-nav-links.mobile-open {
        transform: translateX(0);
    }


    .jobs-nav-links::before {
        content: "Navigation";

        display: block;

        flex-shrink: 0;

        padding: 4px 12px 10px;

        color: var(--jobs-gold-dark);

        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.8px;

        text-transform: uppercase;
    }


    .jobs-nav-links a {
        width: 100%;

        min-height: 44px;

        flex-shrink: 0;

        padding: 0 13px;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        border-radius: 10px;

        background: #ffffff;

        color: #3f3f3f;

        font-size: 8px;
        font-weight: 600;

        opacity: 1 !important;
    }


    .jobs-nav-links a:hover {
        background: #f5f5f5;

        color: #111111;
    }


    .jobs-nav-links a.active {
        background: var(--jobs-gold-soft);

        color: var(--jobs-gold-dark);
    }

}

/* ============================================================
   DESKTOP NAV RESET
============================================================ */

@media (min-width: 901px) {

    .jobs-menu-btn {
        display: none !important;
    }


    .jobs-nav-links {
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: auto !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        overflow: visible !important;

        transform: none !important;

        border: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        z-index: auto !important;
    }


    .jobs-nav-links::before {
        content: none !important;

        display: none !important;
    }


    .jobs-nav-links a {
        width: auto !important;

        min-height: 37px !important;

        padding: 0 11px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;

        background: transparent;

        font-size: 7.1px;
    }


    .jobs-mobile-overlay {
        display: none !important;
    }

}