:root {
--jfs-accent:       #1576AB; --jfs-accent-dark:  #023F6E;
--jfs-text:         #1a1a1a;
--jfs-text-muted:   #6b7280;
--jfs-border:       #e5e7eb;
--jfs-bg:           #ffffff;
--jfs-bg-hover:     #f9fafb;
--jfs-sidebar-w:    280px;
--jfs-radius:       6px;
--jfs-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
--jfs-shadow-md:    0 4px 12px rgba(0,0,0,.10);
--jfs-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--jfs-transition:   0.2s ease;
} .jfs-wrapper {
display: flex;
align-items: flex-start;
gap: 32px;
font-family: var(--jfs-font);
color: var(--jfs-text);
max-width: 1200px;
margin: 0 auto;
padding: 24px 16px;
} .jfs-sidebar {
flex: 0 0 var(--jfs-sidebar-w);
width: var(--jfs-sidebar-w);
background: var(--jfs-bg);
border: 1.5px solid var(--jfs-border);
border-radius: var(--jfs-radius);
padding: 0;
position: sticky;
top: 80px; max-height: 85vh;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #d1d5db transparent;
}
.jfs-sidebar::-webkit-scrollbar {
width: 4px;
}
.jfs-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.jfs-sidebar::-webkit-scrollbar-thumb {
background-color: #d1d5db;
border-radius: 4px;
} .jfs-sidebar-header {
position: sticky;
top: 0;
background: var(--jfs-bg);
z-index: 2;
}
.jfs-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--jfs-border); }
.jfs-sidebar-title {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
color: var(--jfs-text);
}
.jfs-clear-all {
font-size: 0.78rem;
color: var(--jfs-bg) !important;
background: var(--jfs-accent) !important;
border: 1px solid var(--jfs-accent) !important;
cursor: pointer;
padding: 2px 0;
text-decoration: none; font-family: var(--jfs-font);
font-weight: 500;
transition: color var(--jfs-transition);
}
.jfs-clear-all:hover {
color: var(--jfs-accent) !important;
background: var(--jfs-bg) !important;
} .jfs-filter-group {
border-bottom: 1px solid var(--jfs-border);
}
.jfs-filter-group:last-child { border-bottom: none; }
.jfs-group-toggle {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 20px !important;
background: none;
border: none;
cursor: pointer;
font-family: var(--jfs-font);
text-align: left;
transition: background var(--jfs-transition);
}
.jfs-group-toggle:hover { background: var(--jfs-bg-hover); }
.jfs-group-toggle .jfs-group-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--jfs-bg);
}
.jfs-filter-group:hover .jfs-group-label {
font-size: 0.9rem;
font-weight: 600;
color:#000;
}
.jfs-toggle-icon { transition: transform var(--jfs-transition);
display: flex;
align-items: center;
}
.jfs-group-toggle[aria-expanded="false"] .jfs-toggle-icon {
transform: rotate(-90deg);
} .jfs-group-body {
padding: 4px 20px 12px;
overflow: hidden;
transition: max-height var(--jfs-transition); display: none;
} .jfs-group-body.jfs-group-expanded {
display: block;
} .jfs-term-list {
list-style: none;
margin: 0;
padding: 0;
}
.jfs-term-item {
margin: 0;
padding: 0;
}
.jfs-term-item.jfs-term-hidden {
display: none;
}
.jfs-checkbox-label {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
cursor: pointer;
transition: color var(--jfs-transition);
}
.jfs-checkbox-label:hover { color: var(--jfs-accent-dark); } .jfs-checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
} .jfs-checkbox-custom {
flex-shrink: 0;
width: 17px;
height: 17px;
border: 1.8px solid #9ca3af;
border-radius: 3px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: border-color var(--jfs-transition), background var(--jfs-transition);
position: relative;
}
.jfs-checkbox:checked + .jfs-checkbox-custom {
background: var(--jfs-accent);
border-color: var(--jfs-accent);
}
.jfs-checkbox:checked + .jfs-checkbox-custom::after {
content: '';
display: block;
width: 4px;
height: 8px;
border: 2px solid #1a1a1a;
border-top: none;
border-left: none;
transform: rotate(45deg) translate(-1px, -1px);
}
.jfs-checkbox:focus-visible + .jfs-checkbox-custom {
outline: 2px solid var(--jfs-accent);
outline-offset: 2px;
}
.jfs-term-name {
flex: 1;
font-size: 0.875rem;
color: inherit;
line-height: 1.4;
}
.jfs-term-count {
font-size: 0.8rem;
color: var(--jfs-text-muted);
margin-left: auto;
min-width: 20px;
text-align: right;
} .jfs-show-more {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
font-weight: 500;
color: #1576AB !important;
border: 1.5px solid #1576AB !important;
background: #fff;
cursor: pointer;
padding: 6px 0 0;
font-family: var(--jfs-font);
transition: color var(--jfs-transition);
}
.jfs-show-more:hover { color: #1576AB ;
background: #fff !important; }
.jfs-show-more:focus { color: #1576AB ;
background: #fff !important; } .jfs-main {
flex: 1;
min-width: 0;
position: relative;
} .jfs-results-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
gap: 16px;
flex-wrap: wrap;
}
.jfs-results-count {
font-size: 1.2rem;
font-weight: 700;
color: var(--jfs-text);
margin: 0;
}
.jfs-count-number {
color: var(--jfs-text);
} .jfs-sort-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.jfs-sort-label {
font-size: 0.875rem;
color: var(--jfs-text-muted);
white-space: nowrap;
}
.jfs-sort-dropdown {
position: relative;
z-index: 100;
}
.jfs-sort-trigger {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: var(--jfs-bg);
border: 1.5px solid var(--jfs-border);
border-radius: var(--jfs-radius);
cursor: pointer;
font-family: var(--jfs-font);
font-size: 0.9rem;
color: var(--jfs-text);
min-width: 180px;
justify-content: space-between;
transition: border-color var(--jfs-transition), box-shadow var(--jfs-transition);
}
.jfs-sort-trigger:hover {
border-color: #9ca3af;
box-shadow: var(--jfs-shadow);
}
.jfs-dropdown-open .jfs-sort-trigger {
border-color: var(--jfs-accent);
box-shadow: 0 0 0 3px rgba(245, 196, 0, 0.2);
}
.jfs-sort-chevron {
color: var(--jfs-text-bg);
transition: transform var(--jfs-transition);
flex-shrink: 0;
}
.jfs-clear-all:hover .jfs-sort-chevron{
color: var(--jfs-accent) !important;
}
.jfs-dropdown-open .jfs-sort-chevron {
transform: rotate(180deg);
}
.jfs-sort-options {
position: absolute;
top: calc(100% + 4px);
right: 0;
left: 0;
background: var(--jfs-bg);
border: 1.5px solid var(--jfs-border);
border-radius: var(--jfs-radius);
box-shadow: var(--jfs-shadow-md);
list-style: none;
margin: 0;
padding: 4px 0;
display: none;
z-index: 200;
min-width: 180px;
}
.jfs-sort-options.jfs-sort-open { display: block; }
.jfs-sort-option {
padding: 10px 16px;
font-size: 0.875rem;
cursor: pointer;
color: var(--jfs-text);
transition: background var(--jfs-transition);
}
.jfs-sort-option:hover { background: var(--jfs-bg-hover); }
.jfs-sort-option.jfs-sort-active {
font-weight: 600;
color: var(--jfs-accent-dark);
} .jfs-active-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.jfs-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 12px;
background: #fef9e0;
border: 1.5px solid var(--jfs-accent);
border-radius: 100px;
font-size: 0.8rem;
font-weight: 500;
color: #78600a;
animation: jfs-chip-in 0.15s ease;
}
@keyframes jfs-chip-in {
from { opacity: 0; transform: scale(0.9); }
to   { opacity: 1; transform: scale(1); }
}
.jfs-chip-remove {
background: none  !important;
border: none !important;
cursor: pointer;
padding: 2px !important;
display: flex !important;
align-items: center !important;
color: var(--jfs-accent) !important;
opacity: 0.7;
transition: opacity var(--jfs-transition);
border-radius: 50%;
}
.jfs-chip-remove:hover { opacity: 1; background: rgba(0,0,0,.06); } .jfs-results {
display: flex;
flex-direction: column;
gap: 16px;
transition: opacity 0.2s ease;
}
.jfs-results--loading { opacity: 0.4; pointer-events: none; }
.jfs-job-card {
background: var(--jfs-bg);
border: 1.5px solid var(--jfs-border);
border-radius: var(--jfs-radius);
transition: box-shadow var(--jfs-transition), border-color var(--jfs-transition);
overflow: hidden;
}
.jfs-job-card:hover {
box-shadow: var(--jfs-shadow-md);
border-color: #d1d5db;
}
.jfs-card-inner { padding: 20px 22px; }
.jfs-job-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 10px;
line-height: 1.3;
}
.jfs-job-title a {
color: var(--jfs-text);
text-decoration: none;
transition: color var(--jfs-transition);
}
.jfs-job-title a:hover { color: var(--jfs-accent-dark); }
.jfs-job-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}
.jfs-meta-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.82rem;
color: var(--jfs-text-muted);
}
.jfs-meta-item svg { flex-shrink: 0; }
.jfs-meta-badge {
display: inline-flex;
align-items: center;
padding: 2px 9px;
background: #f3f4f6;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 500;
color: var(--jfs-text-muted);
}
.jfs-job-excerpt {
font-size: 0.875rem;
color: #4b5563;
line-height: 1.6;
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.jfs-read-more {
font-size: 0.95rem !important;
font-weight: 600;
color: var(--jfs-accent-dark);
text-decoration: none;
transition: color var(--jfs-transition);
}
.jfs-read-more:hover { color: var(--jfs-text); } .jfs-no-results {
text-align: center;
padding: 60px 20px;
color: var(--jfs-text-muted);
}
.jfs-no-results p { font-size: 1rem; margin: 16px 0 20px; }
.jfs-reset-btn {
padding: 10px 24px;
background: var(--jfs-accent);
color: var(--jfs-text);
border: none;
border-radius: var(--jfs-radius);
font-weight: 600;
cursor: pointer;
font-family: var(--jfs-font);
font-size: 0.9rem;
transition: background var(--jfs-transition);
}
.jfs-reset-btn:hover { background: var(--jfs-accent-dark); } .jfs-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 50;
}
.jfs-spinner {
width: 36px;
height: 36px;
border: 3px solid var(--jfs-border);
border-top-color: var(--jfs-accent);
border-radius: 50%;
animation: jfs-spin 0.7s linear infinite;
}
@keyframes jfs-spin {
to { transform: rotate(360deg); }
} .jfs-pagination { margin-top: 28px; }
.jfs-pager {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.jfs-page-btn {
padding: 7px 13px;
border: 1.5px solid var(--jfs-border);
border-radius: var(--jfs-radius);
background: var(--jfs-bg);
font-family: var(--jfs-font);
font-size: 0.85rem;
color: var(--jfs-text);
cursor: pointer;
transition: border-color var(--jfs-transition), background var(--jfs-transition);
}
.jfs-page-btn:hover {
border-color: var(--jfs-accent);
background: #fff;
color: #000;
}
.jfs-page-btn.jfs-page-active {
background: var(--jfs-accent);
border-color: var(--jfs-accent);
font-weight: 700;
color: #fff;
}
.jfs-page-prev, .jfs-page-next { color: var(--jfs-text-muted); }
.jfs-page-ellipsis {
padding: 7px 8px;
color: var(--jfs-text-muted);
font-size: 0.9rem;
} .jfs-error {
padding: 20px;
color: #dc2626;
text-align: center;
font-size: 0.9rem;
} @media (max-width: 900px) {
.jfs-wrapper {
flex-direction: column;
gap: 20px;
}
.jfs-sidebar {
width: 100%;
flex: none;
position: static;
}
}
@media (max-width: 600px) {
.jfs-results-header { flex-direction: column; align-items: flex-start; }
.jfs-sort-wrapper   { width: 100%; }
.jfs-sort-trigger   { width: 100%; }
.jfs-sort-options   { left: 0; right: 0; }
}