/**
 * WPJobify — Frontend Styles
 *
 * Aesthetic: Enterprise — clean, structured, professional
 * Typography: Plus Jakarta Sans (single family, 400–800)
 * Palette: Slate neutrals · Blue primary · Green salary · Red urgent
 * Grid: 8px baseline · 260px filter sidebar
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
	/* Typography */
	--wpjf-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

	/* Brand */
	--wpjf-blue:        #2563eb;
	--wpjf-blue-dark:   #1d4ed8;
	--wpjf-blue-mid:    #3b82f6;
	--wpjf-blue-dim:    #eff6ff;
	--wpjf-blue-border: #bfdbfe;

	/* Functional */
	--wpjf-green:        #16a34a;
	--wpjf-green-dark:   #15803d;
	--wpjf-green-dim:    #f0fdf4;
	--wpjf-green-border: #bbf7d0;
	--wpjf-amber:        #d97706;
	--wpjf-amber-dim:    #fffbeb;
	--wpjf-red:          #dc2626;
	--wpjf-red-dark:     #b91c1c;
	--wpjf-red-dim:      #fef2f2;
	--wpjf-purple:        #7c3aed;
	--wpjf-purple-dark:   #6d28d9;
	--wpjf-purple-dim:    #f5f3ff;
	--wpjf-purple-border: #ddd6fe;
	--wpjf-amber-border:  #fcd34d;
	--wpjf-red-border:    #fca5a5;
	--wpjf-teal:          #0d9488;
	--wpjf-teal-dim:      #f0fdfa;
	--wpjf-teal-border:   #99f6e4;
	--wpjf-indigo:        #4f46e5;
	--wpjf-indigo-dim:    #eef2ff;
	--wpjf-indigo-border: #c7d2fe;

	/* Neutrals — warm zinc scale (replaces cool slate) */
	--wpjf-900:  #18181b;
	--wpjf-800:  #27272a;
	--wpjf-700:  #3f3f46;
	--wpjf-600:  #52525b;
	--wpjf-500:  #71717a;
	--wpjf-400:  #a1a1aa;
	--wpjf-300:  #d4d4d8;
	--wpjf-200:  #e4e4e7;
	--wpjf-100:  #f4f4f5;
	--wpjf-50:   #fafafa;
	--wpjf-white: #ffffff;

	/* Surfaces */
	--wpjf-bg:            #f4f4f5;
	--wpjf-dashboard-bg:  #f1f1f3;
	--wpjf-card:          #ffffff;
	--wpjf-border:        #e4e4e7;
	--wpjf-border-strong: #d4d4d8;

	/* Shadow — layered, zinc-tinted */
	--wpjf-shadow-xs: 0 1px 2px rgba(9,9,11,.05);
	--wpjf-shadow-sm: 0 1px 3px rgba(9,9,11,.07), 0 1px 2px rgba(9,9,11,.04);
	--wpjf-shadow-md: 0 4px 12px rgba(9,9,11,.07), 0 2px 4px rgba(9,9,11,.04);
	--wpjf-shadow-lg: 0 12px 28px rgba(9,9,11,.10), 0 4px 8px rgba(9,9,11,.05);
	--wpjf-shadow-blue: 0 0 0 3px rgba(37,99,235,.15);

	/* Shape */
	--wpjf-r-xs:  3px;
	--wpjf-r-sm:  6px;
	--wpjf-r:     8px;
	--wpjf-r-md:  10px;
	--wpjf-r-lg:  14px;
	--wpjf-r-xl:  20px;

	/* Motion */
	--wpjf-t-fast: 100ms;
	--wpjf-t:      150ms;
	--wpjf-t-slow: 250ms;
	--wpjf-ease:   cubic-bezier(.4,0,.2,1);
	--wpjf-ease-out: cubic-bezier(0,0,.2,1);
	--wpjf-spring: cubic-bezier(.34,1.56,.64,1);

	/* Layout */
	--wpjf-sidebar-w: 264px;
	--wpjf-gap:       20px;
}

/* ── Reset & base ───────────────────────────────────────────────────────── */
.wpjobify-wrap *,
.wpjobify-wrap *::before,
.wpjobify-wrap *::after,
.wpjobify-sj *,
.wpjobify-sj *::before,
.wpjobify-sj *::after {
	box-sizing: border-box;
}

.wpjobify-wrap {
	font-family: var(--wpjf-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--wpjf-900);
	background: var(--wpjf-bg);
	padding: 28px 24px;
	border-radius: var(--wpjf-r-xl);
}

/*
 * Theme isolation — Elementor and page-builder themes often set global
 * `a { color: theme-accent }` and `button { border-color: theme-accent }`
 * which bleeds into plugin UI at higher specificity.
 * We use !important only on color/border properties inside our scope.
 */
.wpjobify-wrap a,
.wpjobify-sj a {
	color: inherit !important;
	text-decoration: none !important;
}

/* Reset button colors inside plugin scope — no border-color here since
   individual components set their own intentional borders below */
.wpjobify-wrap button,
.wpjobify-sj button {
	color: inherit !important;
}
.wpjobify-wrap button:focus-visible,
.wpjobify-sj button:focus-visible {
	outline: 2px solid var(--wpjf-blue) !important;
	outline-offset: 2px !important;
}

/* Filter group header — must stay borderless */
.wpjobify-filter-group__header {
	border: none !important;
	background: none !important;
}

/* Filter toggle (mobile) — specific border */
.wpjobify-filter-toggle {
	border: 1px solid var(--wpjf-border) !important;
	color: var(--wpjf-800) !important;
	background: var(--wpjf-card) !important;
}

/* Save button — subtle border */
.wpjobify-save-btn {
	border: 1px solid var(--wpjf-border) !important;
	color: var(--wpjf-400) !important;
	background: var(--wpjf-card) !important;
}
.wpjobify-save-btn--saved { color: var(--wpjf-red) !important; border-color: var(--wpjf-red) !important; }

/* View toggle buttons */
.wpjobify-view-toggle__btn { border: none !important; color: var(--wpjf-500) !important; background: none !important; }
.wpjobify-view-toggle__btn--active { background: var(--wpjf-white) !important; color: var(--wpjf-blue) !important; }

/* Filter apply / clear buttons */
.wpjobify-filter-apply-btn { color: #fff !important; background: var(--wpjf-blue) !important; border-color: var(--wpjf-blue) !important; }
.wpjobify-filter-panel__clear { color: var(--wpjf-blue) !important; border: none !important; background: none !important; }
.wpjobify-clear-all-btn { border: 1px solid var(--wpjf-border) !important; color: var(--wpjf-500) !important; background: var(--wpjf-white) !important; }

/* Filter pills container — force flex so pills don't stack */
.wpjobify-filter-pills { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }

/* Filter pills — prevent theme block-level button override */
.wpjobify-filter-pill {
	display: inline-flex !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 5px 12px !important;
	border: 1px solid var(--wpjf-200) !important;
	border-radius: 20px !important;
	background: var(--wpjf-white) !important;
	color: var(--wpjf-700) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}
.wpjobify-filter-pill--active {
	border-color: var(--wpjf-blue) !important;
	background: var(--wpjf-blue) !important;
	color: #fff !important;
}
.wpjobify-filter-pill--active:hover {
	background: var(--wpjf-blue-dark) !important;
	border-color: var(--wpjf-blue-dark) !important;
}

/* Active filter chip × button — prevent theme from adding pink borders */
.wpjobify-filter-tag__remove {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: none !important;
	color: var(--wpjf-blue) !important;
	cursor: pointer !important;
}
.wpjobify-filter-tag__remove:hover {
	background: var(--wpjf-blue) !important;
	color: #fff !important;
}

/* Explicit overrides for elements that need a specific non-inherited color */
.wpjobify-job-card__title a,
.wpjobify-job-card__title a:visited  { color: var(--wpjf-900) !important; }
.wpjobify-job-card__title a:hover    { color: var(--wpjf-blue) !important; }

.wpjobify-job-card__apply-btn,
.wpjobify-job-card__apply-btn:visited,
.wpjobify-job-card__apply-btn:hover  { color: #fff !important; text-decoration: none !important; }

.wpjobify-btn--primary,
.wpjobify-btn--primary:visited,
.wpjobify-btn--primary:hover         { color: #fff !important; text-decoration: none !important; }

.wpjobify-btn--outline,
.wpjobify-btn--outline:visited       { color: var(--wpjf-700) !important; }
.wpjobify-btn--outline:hover         { color: var(--wpjf-blue-dark) !important; }

.wpjobify-btn--ghost,
.wpjobify-btn--ghost:visited         { color: var(--wpjf-500) !important; }
.wpjobify-btn--ghost:hover           { color: var(--wpjf-800) !important; }

.wpjobify-sj__apply-card .wpjobify-btn--primary { color: #fff !important; }

.wpjobify-categories-widget__link,
.wpjobify-categories-widget__link:visited { color: var(--wpjf-700) !important; }
.wpjobify-categories-widget__link:hover   { color: var(--wpjf-blue) !important; }

.wpjobify-locations-widget__link,
.wpjobify-locations-widget__link:visited  { color: var(--wpjf-700) !important; }
.wpjobify-locations-widget__link:hover    { color: var(--wpjf-blue) !important; }

.wpjobify-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wpjobify-layout {
	display: grid;
	grid-template-columns: var(--wpjf-sidebar-w) 1fr;
	gap: var(--wpjf-gap);
	align-items: start;
}

.wpjobify-layout--no-sidebar {
	grid-template-columns: 1fr;
}

/* ── Filter toggle (mobile) ─────────────────────────────────────────────── */
.wpjobify-filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	margin-bottom: 16px;
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r);
	font-size: 14px;
	font-weight: 500;
	color: var(--wpjf-800);
	cursor: pointer;
	user-select: none;
	width: 100%;
}

.wpjobify-filter-toggle svg {
	color: var(--wpjf-500);
	flex-shrink: 0;
}

.wpjobify-filter-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--wpjf-blue);
	color: #fff;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	margin-left: auto;
}

/* ── Active filter tags ─────────────────────────────────────────────────── */
.wpjobify-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
	min-height: 0;
}

.wpjobify-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px 4px 10px;
	background: var(--wpjf-blue-dim);
	border: 1px solid var(--wpjf-blue-border);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	color: var(--wpjf-blue-dark);
}

.wpjobify-filter-tag__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	background: none;
	border: none;
	border-radius: 50%;
	color: var(--wpjf-blue);
	cursor: pointer;
	padding: 0;
	transition: background var(--wpjf-t), color var(--wpjf-t);
}

.wpjobify-filter-tag__remove:hover {
	background: var(--wpjf-blue);
	color: #fff;
}

/* ── Filter sidebar ─────────────────────────────────────────────────────── */
.wpjobify-filters-sidebar {
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-md);
	overflow: hidden;
	position: sticky;
	top: 20px;
}

.wpjobify-filter-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	border-bottom: 1px solid var(--wpjf-border);
	background: var(--wpjf-50);
}

.wpjobify-filter-panel__title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--wpjf-500);
}

.wpjobify-filter-panel__clear {
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--wpjf-blue);
	cursor: pointer;
	font-family: inherit;
	transition: color var(--wpjf-t);
}

.wpjobify-filter-panel__clear:hover { color: var(--wpjf-blue-dark); text-decoration: underline; }

.wpjobify-filter-panel__body {
	padding: 8px 0;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wpjobify-filter-panel__foot {
	padding: 12px 16px;
	border-top: 1px solid var(--wpjf-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Filter search field */
.wpjobify-filter-group--search {
	padding: 8px 16px;
}

.wpjobify-filter-search-wrap {
	position: relative;
}

.wpjobify-filter-search__icon {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wpjf-400);
	pointer-events: none;
}

.wpjobify-keyword-input,
.wpjobify-location-input {
	width: 100%;
	padding: 8px 10px 8px 32px;
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r);
	font-size: 13px;
	font-family: var(--wpjf-font);
	color: var(--wpjf-900);
	background: var(--wpjf-50);
	outline: none;
	transition: border-color var(--wpjf-t), box-shadow var(--wpjf-t);
}

.wpjobify-keyword-input:focus,
.wpjobify-location-input:focus {
	border-color: var(--wpjf-blue);
	box-shadow: 0 0 0 3px rgba(37,99,235,.12);
	background: var(--wpjf-white);
}

.wpjobify-keyword-input::placeholder,
.wpjobify-location-input::placeholder { color: var(--wpjf-400); }

/* Filter groups */
.wpjobify-filter-group {
	border-bottom: 1px solid var(--wpjf-100);
}

.wpjobify-filter-group:last-child { border-bottom: none; }

.wpjobify-filter-group__header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 16px;
	background: none;
	border: none;
	font-family: var(--wpjf-font);
	cursor: pointer;
	text-align: left;
}

.wpjobify-filter-group__title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--wpjf-600);
}

.wpjobify-filter-group__chevron {
	color: var(--wpjf-400);
	flex-shrink: 0;
	transition: transform var(--wpjf-t);
}

.wpjobify-filter-group--collapsed .wpjobify-filter-group__chevron {
	transform: rotate(-90deg);
}

.wpjobify-filter-group__body {
	padding: 4px 16px 12px;
}

/* Checkboxes */
.wpjobify-filter-check {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	cursor: pointer;
	font-size: 13px;
	color: var(--wpjf-700);
	transition: color var(--wpjf-t);
}

.wpjobify-filter-check:hover { color: var(--wpjf-900); }

.wpjobify-filter-check input[type="checkbox"] {
	width: 15px;
	height: 15px;
	border: 1.5px solid var(--wpjf-300);
	border-radius: 4px;
	appearance: none;
	-webkit-appearance: none;
	background: var(--wpjf-white);
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--wpjf-t), border-color var(--wpjf-t);
	position: relative;
}

.wpjobify-filter-check input[type="checkbox"]:checked {
	background: var(--wpjf-blue);
	border-color: var(--wpjf-blue);
}

.wpjobify-filter-check input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}

.wpjobify-filter-check__label { flex: 1; }

.wpjobify-filter-check__count {
	font-size: 11px;
	color: var(--wpjf-400);
	font-variant-numeric: tabular-nums;
}

/* Radios */
.wpjobify-filter-radio {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	cursor: pointer;
	font-size: 13px;
	color: var(--wpjf-700);
	transition: color var(--wpjf-t);
}

.wpjobify-filter-radio:hover { color: var(--wpjf-900); }

.wpjobify-filter-radio input[type="radio"] {
	width: 15px;
	height: 15px;
	border: 1.5px solid var(--wpjf-300);
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	background: var(--wpjf-white);
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--wpjf-t), border-color var(--wpjf-t);
	position: relative;
}

.wpjobify-filter-radio input[type="radio"]:checked {
	border-color: var(--wpjf-blue);
	background: var(--wpjf-white);
}

.wpjobify-filter-radio input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wpjf-blue);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.wpjobify-filter-radio__label { flex: 1; }

/* Pills */
.wpjobify-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wpjobify-filter-pill {
	padding: 5px 12px;
	border: 1px solid var(--wpjf-border);
	border-radius: 20px;
	background: var(--wpjf-white);
	font-size: 12px;
	font-weight: 500;
	font-family: var(--wpjf-font);
	color: var(--wpjf-700);
	cursor: pointer;
	transition: background var(--wpjf-t), border-color var(--wpjf-t), color var(--wpjf-t);
}

.wpjobify-filter-pill:hover {
	border-color: var(--wpjf-blue-border);
	color: var(--wpjf-blue-dark);
	background: var(--wpjf-blue-dim);
}

.wpjobify-filter-pill--active {
	background: var(--wpjf-blue);
	border-color: var(--wpjf-blue);
	color: #fff;
}

.wpjobify-filter-pill--active:hover {
	background: var(--wpjf-blue-dark);
	border-color: var(--wpjf-blue-dark);
	color: #fff;
}

/* Dropdown */
.wpjobify-filter-dropdown.wpjobify-select {
	width: 100%;
}

/* ── Select (shared style) ──────────────────────────────────────────────── */
.wpjobify-select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r);
	font-size: 13px;
	font-family: var(--wpjf-font);
	color: var(--wpjf-800);
	padding: 7px 30px 7px 10px;
	outline: none;
	cursor: pointer;
	transition: border-color var(--wpjf-t), box-shadow var(--wpjf-t);
}

.wpjobify-select:focus {
	border-color: var(--wpjf-blue);
	box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.wpjobify-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.wpjobify-result-count {
	font-size: 13px;
	color: var(--wpjf-500);
	white-space: nowrap;
}

.wpjobify-result-count strong {
	font-weight: 600;
	color: var(--wpjf-800);
}

.wpjobify-toolbar__controls {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.wpjobify-toolbar__select-wrap {
	position: relative;
}

.wpjobify-select-chevron {
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wpjf-400);
	pointer-events: none;
}

/* View toggle */
.wpjobify-view-toggle {
	display: flex;
	gap: 2px;
	background: var(--wpjf-100);
	padding: 3px;
	border-radius: var(--wpjf-r);
}

.wpjobify-view-toggle__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: none;
	border: none;
	border-radius: var(--wpjf-r-sm);
	color: var(--wpjf-500);
	cursor: pointer;
	transition: background var(--wpjf-t), color var(--wpjf-t);
}

.wpjobify-view-toggle__btn:hover { color: var(--wpjf-800); }

.wpjobify-view-toggle__btn--active {
	background: var(--wpjf-white);
	color: var(--wpjf-blue);
	box-shadow: var(--wpjf-shadow-xs);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.wpjobify-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--wpjf-font);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--wpjf-r);
	transition:
		background var(--wpjf-t) var(--wpjf-ease),
		border-color var(--wpjf-t) var(--wpjf-ease),
		color var(--wpjf-t) var(--wpjf-ease),
		box-shadow var(--wpjf-t) var(--wpjf-ease),
		transform var(--wpjf-t-fast) var(--wpjf-ease);
	white-space: nowrap;
	line-height: 1;
	position: relative;
	letter-spacing: -.01em;
}

.wpjobify-btn:active {
	transform: translateY(1px) !important;
}

/* Sizes */
.wpjobify-btn--sm  { font-size: 12px; padding: 7px 14px; border-radius: var(--wpjf-r-sm); }
.wpjobify-btn--md  { font-size: 13px; padding: 9px 18px; }
.wpjobify-btn--lg  { font-size: 14px; padding: 11px 24px; border-radius: var(--wpjf-r-md); }

/* Variants */
.wpjobify-btn--primary {
	background: var(--wpjf-blue) !important;
	border-color: var(--wpjf-blue) !important;
	color: #fff !important;
	box-shadow: 0 1px 3px rgba(37,99,235,.3), inset 0 1px 0 rgba(255,255,255,.12);
}

.wpjobify-btn--primary:hover {
	background: var(--wpjf-blue-dark) !important;
	border-color: var(--wpjf-blue-dark) !important;
	box-shadow: 0 2px 6px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.12);
	text-decoration: none;
	color: #fff !important;
}

.wpjobify-btn--primary:active {
	box-shadow: 0 0 0 rgba(37,99,235,.2) !important;
}

.wpjobify-btn--outline {
	background: var(--wpjf-white) !important;
	border-color: var(--wpjf-border) !important;
	color: var(--wpjf-700) !important;
	box-shadow: var(--wpjf-shadow-xs);
}

.wpjobify-btn--outline:hover {
	border-color: var(--wpjf-blue-border) !important;
	color: var(--wpjf-blue-dark) !important;
	background: var(--wpjf-blue-dim) !important;
	text-decoration: none;
}

.wpjobify-btn--ghost {
	background: none !important;
	border-color: transparent !important;
	color: var(--wpjf-500) !important;
	box-shadow: none !important;
}

.wpjobify-btn--ghost:hover {
	background: var(--wpjf-100) !important;
	color: var(--wpjf-800) !important;
}

.wpjobify-btn--danger {
	background: var(--wpjf-red) !important;
	border-color: var(--wpjf-red) !important;
	color: #fff !important;
	box-shadow: 0 1px 3px rgba(220,38,38,.25);
}

.wpjobify-btn--danger:hover {
	background: var(--wpjf-red-dark) !important;
	border-color: var(--wpjf-red-dark) !important;
	color: #fff !important;
}

.wpjobify-btn--full { width: 100%; }

/* ── List / Grid containers ─────────────────────────────────────────────── */
.wpjobify-list-wrap { min-height: 120px; }

.wpjobify-job-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wpjobify-job-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 12px;
}

/* ── Job card ───────────────────────────────────────────────────────────── */
.wpjobify-job-card {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 14px;
	padding: 18px 20px;
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-md);
	transition:
		border-color var(--wpjf-t) var(--wpjf-ease),
		box-shadow var(--wpjf-t) var(--wpjf-ease),
		transform var(--wpjf-t) var(--wpjf-ease);
	position: relative;
	box-shadow: var(--wpjf-shadow-xs);
}

.wpjobify-job-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 0;
	border-radius: 0 2px 2px 0;
	transition: width var(--wpjf-t) var(--wpjf-ease);
}

.wpjobify-job-card:hover {
	border-color: var(--wpjf-blue-border);
	box-shadow: var(--wpjf-shadow-md);
	transform: translateY(-1px);
}

.wpjobify-job-card--featured {
	border-color: var(--wpjf-blue-border);
	background: linear-gradient(to right, rgba(239,246,255,.6), var(--wpjf-white));
}

.wpjobify-job-card--featured::before {
	width: 3px;
	background: var(--wpjf-blue);
}

.wpjobify-job-card--urgent {
	border-color: rgba(220,38,38,.18);
}

.wpjobify-job-card--urgent::before {
	width: 3px;
	background: var(--wpjf-red);
}

/* Logo */
.wpjobify-job-card__logo {
	width: 48px;
	height: 48px;
	border-radius: var(--wpjf-r);
	overflow: hidden;
	border: 1px solid var(--wpjf-200);
	flex-shrink: 0;
}

.wpjobify-job-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wpjobify-job-card__logo-initial,
.wpjobify-job-card__logo-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--wpjf-100) 0%, var(--wpjf-200) 100%);
	color: var(--wpjf-500);
	font-size: 17px;
	font-weight: 700;
	font-family: var(--wpjf-font);
	letter-spacing: -.02em;
}

/* Body */
.wpjobify-job-card__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wpjobify-job-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.wpjobify-job-card__title {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	line-height: 1.35;
	letter-spacing: -.01em;
}

.wpjobify-job-card__title a {
	color: var(--wpjf-900);
	text-decoration: none;
	transition: color var(--wpjf-t);
}

.wpjobify-job-card__title a:hover { color: var(--wpjf-blue); }

.wpjobify-job-card__badges {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
	align-items: center;
}

.wpjobify-job-card__company {
	font-size: 12px;
	font-weight: 500;
	color: var(--wpjf-500);
	margin: 0;
}

/* Meta row */
.wpjobify-job-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.wpjobify-job-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--wpjf-500);
}

.wpjobify-job-card__meta-item svg { flex-shrink: 0; opacity: .7; }

.wpjobify-job-card__meta-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: var(--wpjf-100);
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	color: var(--wpjf-600);
	white-space: nowrap;
}

.wpjobify-job-card__meta-pill--type { background: var(--wpjf-blue-dim); color: var(--wpjf-blue-dark); }
.wpjobify-job-card__meta-pill--cat  { background: #f0fdf4; color: #15803d; }

/* Footer */
.wpjobify-job-card__footer {
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 2px;
}

.wpjobify-job-card__footer-left {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.wpjobify-job-card__footer-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.wpjobify-job-card__deadline {
	font-size: 11px;
	font-weight: 600;
}

.wpjobify-job-card__deadline--ok       { color: var(--wpjf-green); }
.wpjobify-job-card__deadline--soon     { color: var(--wpjf-amber); }
.wpjobify-job-card__deadline--critical { color: var(--wpjf-red); }

.wpjobify-job-card__footer-sep { color: var(--wpjf-300); font-size: 10px; }

.wpjobify-job-card__posted {
	font-size: 11px;
	color: var(--wpjf-400);
}

.wpjobify-job-card__salary {
	font-size: 13px;
	font-weight: 600;
	color: var(--wpjf-green);
}

.wpjobify-job-card__apply-btn {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--wpjf-blue);
	color: #fff;
	border-radius: var(--wpjf-r-sm);
	font-size: 12px;
	font-weight: 600;
	font-family: var(--wpjf-font);
	text-decoration: none;
	border: 1px solid var(--wpjf-blue);
	box-shadow: 0 1px 3px rgba(37,99,235,.25), inset 0 1px 0 rgba(255,255,255,.1);
	transition:
		background var(--wpjf-t) var(--wpjf-ease),
		border-color var(--wpjf-t) var(--wpjf-ease),
		box-shadow var(--wpjf-t) var(--wpjf-ease),
		transform var(--wpjf-t-fast) var(--wpjf-ease);
	white-space: nowrap;
	letter-spacing: -.01em;
}

.wpjobify-job-card__apply-btn:hover {
	background: var(--wpjf-blue-dark);
	border-color: var(--wpjf-blue-dark);
	box-shadow: 0 2px 6px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.1);
	text-decoration: none;
	color: #fff;
}

.wpjobify-job-card__apply-btn:active {
	transform: translateY(1px);
	box-shadow: none;
}

/* Grid card adjustments */
.wpjobify-job-grid .wpjobify-job-card {
	grid-template-columns: 1fr;
}

.wpjobify-job-grid .wpjobify-job-card__logo {
	width: 44px;
	height: 44px;
	margin-bottom: 6px;
}

.wpjobify-job-grid .wpjobify-job-card__footer {
	grid-column: 1;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.wpjobify-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--wpjf-r-xs);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
	line-height: 1.6;
}

.wpjobify-badge--featured {
	background: var(--wpjf-blue-dim);
	color: var(--wpjf-blue-dark);
	border: 1px solid var(--wpjf-blue-border);
}

.wpjobify-badge--urgent {
	background: var(--wpjf-red-dim);
	color: var(--wpjf-red-dark);
	border: 1px solid rgba(220,38,38,.15);
}

/* ── Save button ────────────────────────────────────────────────────────── */
.wpjobify-save-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	background: var(--wpjf-white);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-sm);
	color: var(--wpjf-400);
	cursor: pointer;
	font-size: 13px;
	font-family: var(--wpjf-font);
	font-weight: 500;
	box-shadow: var(--wpjf-shadow-xs);
	transition:
		color var(--wpjf-t) var(--wpjf-ease),
		border-color var(--wpjf-t) var(--wpjf-ease),
		background var(--wpjf-t) var(--wpjf-ease),
		transform var(--wpjf-t-fast) var(--wpjf-ease);
}

.wpjobify-save-btn:hover {
	border-color: rgba(220,38,38,.35);
	color: var(--wpjf-red);
	background: var(--wpjf-red-dim);
	transform: scale(1.08);
}

.wpjobify-save-btn:active { transform: scale(.96); }

.wpjobify-save-btn--saved {
	border-color: rgba(220,38,38,.25);
	background: var(--wpjf-red-dim);
	color: var(--wpjf-red);
}

/* Expanded variant (used on single job page) */
.wpjobify-save-btn--full {
	width: 100%;
	height: auto;
	padding: 9px 18px;
	justify-content: center;
}

/* ── Skeleton loading ────────────────────────────────────────────────────── */
@keyframes wpjf-shimmer {
	0%   { background-position: -400px 0; }
	100% { background-position:  400px 0; }
}

.wpjobify-skeleton {
	background: linear-gradient(90deg, var(--wpjf-100) 25%, var(--wpjf-200) 50%, var(--wpjf-100) 75%);
	background-size: 800px 100%;
	animation: wpjf-shimmer 1.4s infinite linear;
	border-radius: var(--wpjf-r-sm);
}

.wpjobify-skeleton-card {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 14px;
	padding: 16px 18px;
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-md);
}

.wpjobify-skeleton-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 2px;
}

.wpjobify-skeleton--logo  { width: 48px; height: 48px; border-radius: var(--wpjf-r); }
.wpjobify-skeleton--title { height: 16px; width: 65%; }
.wpjobify-skeleton--sub   { height: 13px; width: 40%; }
.wpjobify-skeleton--meta  { height: 11px; width: 80%; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.wpjobify-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 60px 24px;
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-lg);
	box-shadow: var(--wpjf-shadow-xs);
}

.wpjobify-empty-state__icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wpjf-100);
	border: 1px solid var(--wpjf-200);
	border-radius: 50%;
	margin-bottom: 18px;
	color: var(--wpjf-400);
}

.wpjobify-empty-state__heading {
	font-size: 17px;
	font-weight: 700;
	color: var(--wpjf-800);
	margin: 0 0 8px;
	letter-spacing: -.02em;
}

.wpjobify-empty-state__subtext {
	font-size: 13px;
	color: var(--wpjf-500);
	margin: 0 0 22px;
	max-width: 340px;
	line-height: 1.6;
}

/* ── Error state ────────────────────────────────────────────────────────── */
.wpjobify-error-state {
	padding: 32px;
	text-align: center;
	color: var(--wpjf-red);
	font-size: 14px;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.wpjobify-pagination-wrap { margin-top: 24px; }

.wpjobify-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-wrap: wrap;
}

.wpjobify-pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 4px;
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-sm);
	font-size: 13px;
	font-weight: 500;
	font-family: var(--wpjf-font);
	color: var(--wpjf-600);
	cursor: pointer;
	box-shadow: var(--wpjf-shadow-xs);
	transition:
		background var(--wpjf-t) var(--wpjf-ease),
		border-color var(--wpjf-t) var(--wpjf-ease),
		color var(--wpjf-t) var(--wpjf-ease),
		transform var(--wpjf-t-fast) var(--wpjf-ease);
}

.wpjobify-pagination__btn:hover:not(:disabled):not(.wpjobify-pagination__btn--active) {
	background: var(--wpjf-100);
	border-color: var(--wpjf-300);
	color: var(--wpjf-800);
}

.wpjobify-pagination__btn:active:not(:disabled) {
	transform: translateY(1px);
}

.wpjobify-pagination__btn--active {
	background: var(--wpjf-blue);
	border-color: var(--wpjf-blue);
	color: #fff;
	font-weight: 600;
	cursor: default;
	box-shadow: 0 1px 3px rgba(37,99,235,.3);
}

.wpjobify-pagination__btn:disabled {
	opacity: .35;
	cursor: not-allowed;
	box-shadow: none;
}

.wpjobify-pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 13px;
	color: var(--wpjf-400);
}

/* ── Mobile filter overlay ───────────────────────────────────────────────── */
.wpjobify-filter-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15,23,42,.5);
	z-index: 999;
	backdrop-filter: blur(2px);
}

.wpjobify-filter-overlay--open { display: block; }

/* ── Single job page ─────────────────────────────────────────────────────── */
.wpjobify-sj {
	font-family: var(--wpjf-font);
	color: var(--wpjf-900);
}

.wpjobify-sj * {
	box-sizing: border-box;
	float: none !important;
}

.wpjobify-sj__layout {
	display: grid !important;
	grid-template-columns: 1fr 300px !important;
	gap: 24px;
	align-items: start;
}

.wpjobify-sj__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Header card */
.wpjobify-sj__header-card {
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-lg);
	padding: 28px;
	border-top: 3px solid var(--wpjf-blue);
	box-shadow: var(--wpjf-shadow-sm);
	background-image: radial-gradient(ellipse at top right, rgba(239,246,255,.7) 0%, transparent 60%);
}

.wpjobify-sj__header-top {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.wpjobify-sj__logo {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: var(--wpjf-r-md);
	overflow: hidden;
	border: 1px solid var(--wpjf-200);
}

.wpjobify-sj__logo img { width: 100%; height: 100%; object-fit: contain; }

.wpjobify-sj__logo-initial {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wpjf-100);
	font-size: 28px;
	font-weight: 700;
	color: var(--wpjf-500);
}

.wpjobify-sj__header-body { flex: 1; min-width: 0; }

.wpjobify-sj__header-badges {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.wpjobify-sj__title {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--wpjf-900);
	line-height: 1.2;
	letter-spacing: -.02em;
}

.wpjobify-sj__company {
	font-size: 14px;
	color: var(--wpjf-500);
	margin: 0 0 14px;
}

.wpjobify-sj__company strong { color: var(--wpjf-800); font-weight: 600; }

.wpjobify-sj__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.wpjobify-sj__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--wpjf-600);
}

.wpjobify-sj__meta-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var(--wpjf-100);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	color: var(--wpjf-600);
}

/* Insights grid */
.wpjobify-sj__insights {
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-lg);
	padding: 20px 24px;
	box-shadow: var(--wpjf-shadow-xs);
}

.wpjobify-sj__insights-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.wpjobify-sj__insight {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.wpjobify-sj__insight-icon {
	width: 34px;
	height: 34px;
	min-width: 34px;
	border-radius: var(--wpjf-r-sm);
	background: var(--wpjf-blue-dim);
	border: 1px solid var(--wpjf-blue-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	color: var(--wpjf-blue);
}

.wpjobify-sj__insight-icon svg {
	display: block;
	width: 16px !important;
	height: 16px !important;
	max-width: 16px;
	max-height: 16px;
	flex-shrink: 0;
}

.wpjobify-sj__insight-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wpjobify-sj__insight-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wpjf-400);
}

.wpjobify-sj__insight-value {
	font-size: 13px;
	font-weight: 600;
	color: var(--wpjf-800);
}

/* Content sections */
.wpjobify-sj__section {
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-lg);
	padding: 22px 24px;
	box-shadow: var(--wpjf-shadow-xs);
}

.wpjobify-sj__section-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--wpjf-400);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wpjf-100);
}

.wpjobify-sj__section-content {
	font-size: 14px;
	line-height: 1.75;
	color: var(--wpjf-600);
}

.wpjobify-sj__section-content p:last-child { margin-bottom: 0; }

.wpjobify-sj__section-content ul,
.wpjobify-sj__section-content ol {
	padding-left: 1.5em;
	margin: .5em 0;
}

.wpjobify-sj__section-content li { margin-bottom: .35em; }

/* Skills */
.wpjobify-sj__skills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wpjobify-sj__skill-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	background: var(--wpjf-100);
	border: 1px solid var(--wpjf-200);
	border-radius: 99px;
	font-size: 12px;
	font-weight: 500;
	color: var(--wpjf-600);
	transition: background var(--wpjf-t), border-color var(--wpjf-t), color var(--wpjf-t);
}

.wpjobify-sj__skill-tag:hover {
	background: var(--wpjf-blue-dim);
	border-color: var(--wpjf-blue-border);
	color: var(--wpjf-blue-dark);
}

/* Sidebar */
.wpjobify-sj__sidebar {
	position: sticky !important;
	top: 20px;
	float: none !important;
	width: auto !important;
	clear: none !important;
}

.wpjobify-sj__apply-card {
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-lg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 3px solid var(--wpjf-blue);
	box-shadow: var(--wpjf-shadow-sm);
	background-image: radial-gradient(ellipse at top left, rgba(239,246,255,.6) 0%, transparent 55%);
}

.wpjobify-sj__apply-logo {
	width: 56px;
	height: 56px;
	border-radius: var(--wpjf-r-md);
	overflow: hidden;
	border: 1px solid var(--wpjf-200);
}

.wpjobify-sj__apply-logo img { width: 100%; height: 100%; object-fit: contain; }

.wpjobify-sj__apply-heading {
	font-size: 17px;
	font-weight: 700;
	color: var(--wpjf-900);
	margin: 0;
	letter-spacing: -.02em;
}

.wpjobify-sj__apply-company {
	font-size: 13px;
	color: var(--wpjf-500);
	margin: -8px 0 0;
}

.wpjobify-sj__apply-deadline {
	font-size: 12px;
	font-weight: 600;
	margin: 0;
}

.wpjobify-sj-deadline--ok       { color: var(--wpjf-green); }
.wpjobify-sj-deadline--soon     { color: var(--wpjf-amber); }
.wpjobify-sj-deadline--critical { color: var(--wpjf-red); }

.wpjobify-sj__apply-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wpjobify-sj__apply-note {
	font-size: 11px;
	color: var(--wpjf-400);
	text-align: center;
	margin: 0;
}

/* Auth notice — shown by SavedJobsShortcode / other shortcodes to guests */
.wpjobify-auth-notice {
	display: block;
	padding: 14px 18px;
	background: var(--wpjf-blue-dim);
	border: 1px solid var(--wpjf-blue-border);
	border-radius: var(--wpjf-r-md);
	font-size: 14px;
	color: var(--wpjf-blue-dark);
	margin: 0;
}

.wpjobify-auth-notice a {
	color: var(--wpjf-blue) !important;
	font-weight: 600;
	text-decoration: underline !important;
}

/* Stub dashboards (Phase 3/4) */
.wpjobify-coming-soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 64px 24px;
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-lg);
}

.wpjobify-coming-soon__icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wpjf-blue-dim);
	border-radius: 50%;
	margin-bottom: 16px;
	color: var(--wpjf-blue);
}

.wpjobify-coming-soon h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--wpjf-900);
	margin: 0 0 8px;
}

.wpjobify-coming-soon p {
	font-size: 14px;
	color: var(--wpjf-500);
	margin: 0;
	max-width: 360px;
}

/* ── Standalone search form ──────────────────────────────────────────────── */
.wpjobify-search-form {
	width: 100%;
}

.wpjobify-search-form__fields {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--wpjf-card);
	border: 1px solid var(--wpjf-border);
	border-radius: var(--wpjf-r-xl);
	padding: 6px 6px 6px 18px;
	box-shadow: var(--wpjf-shadow-md);
	flex-wrap: wrap;
	transition: box-shadow var(--wpjf-t) var(--wpjf-ease);
}

.wpjobify-search-form__fields:focus-within {
	box-shadow: var(--wpjf-shadow-lg), var(--wpjf-shadow-blue);
	border-color: var(--wpjf-blue-border);
}

.wpjobify-search-form__field {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 160px;
	min-width: 0;
}

.wpjobify-search-form__field--location {
	border-left: 1px solid var(--wpjf-border);
	padding-left: 16px;
}

.wpjobify-search-form__icon {
	flex-shrink: 0;
	color: var(--wpjf-400);
}

.wpjobify-search-form__input {
	width: 100%;
	border: none;
	outline: none;
	font-family: var(--wpjf-font);
	font-size: 14px;
	color: var(--wpjf-900);
	background: transparent;
	box-shadow: none;
}

.wpjobify-search-form__input::placeholder { color: var(--wpjf-400); }

.wpjobify-search-form__btn {
	flex-shrink: 0;
	white-space: nowrap;
}

/* ── Categories widget ───────────────────────────────────────────────────── */
.wpjobify-categories-widget,
.wpjobify-locations-widget {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpjobify-categories-widget__item,
.wpjobify-locations-widget__item {
	border-bottom: 1px solid var(--wpjf-100);
}

.wpjobify-categories-widget__item:last-child,
.wpjobify-locations-widget__item:last-child {
	border-bottom: none;
}

.wpjobify-categories-widget__link,
.wpjobify-locations-widget__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--wpjf-700);
	text-decoration: none;
	transition: color 150ms;
}

.wpjobify-categories-widget__link:hover,
.wpjobify-locations-widget__link:hover {
	color: var(--wpjf-blue);
}

.wpjobify-categories-widget__link svg,
.wpjobify-locations-widget__link svg {
	flex-shrink: 0;
	color: var(--wpjf-400);
}

.wpjobify-categories-widget__count,
.wpjobify-locations-widget__count {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	color: var(--wpjf-500);
	background: var(--wpjf-100);
	border-radius: 20px;
	padding: 1px 7px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.wpjobify-sj__insights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	/* Job listing layout: stack sidebar on mobile */
	.wpjobify-layout {
		grid-template-columns: 1fr;
	}

	.wpjobify-filter-toggle { display: flex; }

	/* Filter sidebar becomes fixed overlay panel on mobile */
	.wpjobify-filters-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: min(320px, 90vw);
		z-index: 1000;
		border-radius: 0;
		border: none;
		border-right: 1px solid var(--wpjf-border);
		transform: translateX(-100%);
		transition: transform 200ms var(--wpjf-ease);
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: var(--wpjf-shadow-lg);
	}

	.wpjobify-filters-sidebar--open {
		transform: translateX(0);
	}

	.wpjobify-filter-panel__body {
		max-height: none;
	}

	/* Single job layout — sidebar stacks below content on narrow screens */
	.wpjobify-sj__layout {
		grid-template-columns: 1fr !important;
	}

	.wpjobify-sj__sidebar {
		position: static !important;
	}

	.wpjobify-sj__header-top {
		flex-direction: column;
		align-items: flex-start;
	}

	.wpjobify-sj__insights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.wpjobify-wrap { padding: 14px 12px; }

	.wpjobify-job-card {
		grid-template-columns: 40px 1fr;
		padding: 14px 14px;
		gap: 12px;
		/* Disable hover lift on touch — no hover exists */
		transform: none !important;
	}

	.wpjobify-job-card__logo { width: 40px; height: 40px; }

	.wpjobify-job-card__footer {
		flex-wrap: wrap;
		gap: 6px;
	}

	.wpjobify-toolbar { flex-wrap: wrap; }
	.wpjobify-toolbar__controls { flex-wrap: wrap; }

	.wpjobify-sj__title { font-size: 20px; }
	.wpjobify-sj__header-card { padding: 20px 18px; }
	.wpjobify-sj__insights-grid { grid-template-columns: 1fr; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL POLISH v2 — Product Quality Pass 2026
   Comprehensive UI/UX refinement: layout, hierarchy, motion, consistency.
   Append-only: each rule is intentionally more specific than the original.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. SINGLE JOB PAGE: Layout robustness & visual hierarchy ─────────────
   Problem: WordPress themes with narrow content areas (< 900px) or left-
   sidebar layouts cause all job content to stack in a thin right column,
   leaving a large empty area on the left of the viewport. The fix is:
   (a) lower the single-column breakpoint to 700px,
   (b) move the apply sidebar ABOVE the content in narrow mode so the CTA
       is always the first thing a candidate sees,
   (c) clean up the visual hierarchy throughout.
   ─────────────────────────────────────────────────────────────────────────── */

/* Prevent any theme float leak from misaligning the grid */
.wpjobify-sj__layout > * { float: none !important; }

/* Switch to single column earlier (most WP themes have 600-750px content) */
@media (max-width: 760px) {
	.wpjobify-sj__layout {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}

	/* Apply card moves ABOVE job description — primary CTA first */
	.wpjobify-sj__sidebar {
		order: -1 !important;
		position: static !important;
	}

	/* Apply card goes horizontal when stacked at top */
	.wpjobify-sj__apply-card {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 12px 16px !important;
		align-items: center !important;
		padding: 18px 20px !important;
	}

	.wpjobify-sj__apply-logo {
		width: 40px !important;
		height: 40px !important;
	}

	.wpjobify-sj__apply-heading {
		font-size: 15px !important;
		margin: 0 !important;
	}

	.wpjobify-sj__apply-company {
		margin: 0 !important;
	}

	.wpjobify-sj__apply-actions {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		width: 100% !important;
	}

	.wpjobify-sj__apply-actions .wpjobify-btn--primary,
	.wpjobify-sj__apply-actions .wpjobify-btn--outline {
		flex: 1 1 140px;
	}

	.wpjobify-sj__insights-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px;
	}
}

/* ── Single job: Stronger title presence ── */
.wpjobify-sj__title {
	font-size: 30px !important;
	font-weight: 800 !important;
	letter-spacing: -.03em !important;
	line-height: 1.15 !important;
}

/* ── Single job: Richer company byline ── */
.wpjobify-sj__company {
	font-size: 15px !important;
	color: var(--wpjf-600) !important;
	margin: 0 0 16px !important;
}

.wpjobify-sj__company strong {
	color: var(--wpjf-700) !important;
	font-weight: 700 !important;
}

/* ── Single job: Meta pills — more polished ── */
.wpjobify-sj__meta-pill {
	background: var(--wpjf-100) !important;
	border: 1px solid var(--wpjf-200) !important;
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
}

/* ── Single job: Insights — auto-fill grid adapts to any width ── */
.wpjobify-sj__insights-grid {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
	gap: 14px !important;
}

/* Insight icon: slightly larger */
.wpjobify-sj__insight-icon {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	border-radius: var(--wpjf-r) !important;
}

/* Section title: stronger uppercase label */
.wpjobify-sj__section-title {
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .10em !important;
	color: var(--wpjf-400) !important;
	padding-bottom: 14px !important;
	margin-bottom: 18px !important;
}

/* Section content: better readability */
.wpjobify-sj__section-content {
	font-size: 15px !important;
	line-height: 1.8 !important;
	color: var(--wpjf-700) !important;
}

.wpjobify-sj__section-content h2,
.wpjobify-sj__section-content h3,
.wpjobify-sj__section-content h4 {
	font-weight: 700;
	color: var(--wpjf-900);
	margin: 1.25em 0 .5em;
}

.wpjobify-sj__section-content ul,
.wpjobify-sj__section-content ol {
	margin: .75em 0 !important;
}

.wpjobify-sj__section-content li {
	margin-bottom: .5em !important;
}

/* Skills: richer tag feel */
.wpjobify-sj__skill-tag {
	padding: 5px 14px !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	color: var(--wpjf-700) !important;
	border-color: var(--wpjf-200) !important;
	background: var(--wpjf-50) !important;
}

.wpjobify-sj__skill-tag:hover {
	background: var(--wpjf-blue-dim) !important;
	border-color: var(--wpjf-blue-border) !important;
	color: var(--wpjf-blue-dark) !important;
}

/* Apply card: stronger heading */
.wpjobify-sj__apply-heading {
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: -.025em !important;
}

/* Apply note: better phrasing context */
.wpjobify-sj__apply-note {
	font-size: 11px !important;
	line-height: 1.5 !important;
}

/* ── 2. JOB CARDS: Premium visual hierarchy upgrade ──────────────────────
   All changes preserve the existing BEM structure; specificity used to
   cleanly override base rules without touching the original CSS block.
   ─────────────────────────────────────────────────────────────────────────── */

/* Card: cleaner shadow, slightly more breathing room */
.wpjobify-job-card {
	padding: 18px 20px !important;
	border-radius: var(--wpjf-r-lg) !important;
}

/* Stronger hover: lift + blue glow ring */
.wpjobify-job-card:hover {
	border-color: rgba(37,99,235,.25) !important;
	box-shadow: 0 6px 24px rgba(37,99,235,.09), 0 2px 6px rgba(0,0,0,.05) !important;
	transform: translateY(-2px) !important;
}

/* Title: more presence */
.wpjobify-job-card__title {
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: -.015em !important;
	line-height: 1.3 !important;
}

/* Company name: richer presence */
.wpjobify-job-card__company {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--wpjf-600) !important;
}

/* Logo initial: stronger monogram feel */
.wpjobify-job-card__logo-initial {
	font-weight: 800 !important;
	font-size: 16px !important;
	background: linear-gradient(135deg, #e0e7ff 0%, #dbeafe 100%) !important;
	color: #3730a3 !important;
}

/* Meta pills: slightly more polished */
.wpjobify-job-card__meta-pill {
	font-size: 11.5px !important;
	font-weight: 600 !important;
	padding: 3px 10px !important;
	letter-spacing: -.01em !important;
}

/* Type pill: blue tint */
.wpjobify-job-card__meta-pill--type {
	background: var(--wpjf-blue-dim) !important;
	color: var(--wpjf-blue-dark) !important;
	border: 1px solid rgba(37,99,235,.15) !important;
}

/* Category pill: green tint */
.wpjobify-job-card__meta-pill--cat {
	background: var(--wpjf-green-dim) !important;
	color: var(--wpjf-green-dark) !important;
	border: 1px solid rgba(22,163,74,.15) !important;
}

/* Salary: more prominent */
.wpjobify-job-card__salary {
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: -.015em !important;
}

/* View Job button: more polished with micro-interactions */
.wpjobify-job-card__apply-btn {
	font-size: 12px !important;
	font-weight: 700 !important;
	padding: 7px 16px !important;
	letter-spacing: -.01em !important;
	border-radius: 8px !important;
	gap: 5px !important;
}

/* Featured: stronger accent */
.wpjobify-job-card--featured {
	background: linear-gradient(
		105deg,
		rgba(239,246,255,.8) 0%,
		rgba(255,255,255,1) 60%
	) !important;
}

/* ── 3. BADGES: Unified system ───────────────────────────────────────────── */
.wpjobify-badge {
	border-radius: var(--wpjf-r-sm) !important;
	font-size: 10px !important;
	letter-spacing: .05em !important;
}

.wpjobify-badge--featured {
	background: var(--wpjf-indigo-dim) !important;
	color: var(--wpjf-indigo) !important;
	border-color: var(--wpjf-indigo-border) !important;
}

/* ── 4. FILTER SIDEBAR: Sharper typography ───────────────────────────────── */
.wpjobify-filter-panel__title {
	font-size: 11px !important;
	letter-spacing: .10em !important;
	font-weight: 800 !important;
	color: var(--wpjf-400) !important;
}

.wpjobify-filter-group__label {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--wpjf-700) !important;
}

/* ── 5. TOOLBAR: Better spacing and typography ───────────────────────────── */
.wpjobify-result-count {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--wpjf-600) !important;
}

.wpjobify-result-count strong {
	color: var(--wpjf-900) !important;
	font-weight: 700 !important;
}

/* ── 6. EMPTY STATE: Better visual quality ───────────────────────────────── */
.wpjobify-no-results__icon {
	background: var(--wpjf-blue-dim) !important;
}

/* ── 7. BUTTONS: Unified quality improvements ────────────────────────────── */

/* Primary: stronger shadow + lift */
.wpjobify-btn--primary {
	box-shadow: 0 1px 3px rgba(37,99,235,.25), inset 0 1px 0 rgba(255,255,255,.12) !important;
	font-weight: 700 !important;
	letter-spacing: -.015em !important;
}

.wpjobify-btn--primary:hover {
	box-shadow: 0 3px 10px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.12) !important;
	transform: translateY(-1px) !important;
}

.wpjobify-btn--primary:active {
	transform: translateY(0) !important;
	box-shadow: none !important;
}

/* Outline: cleaner */
.wpjobify-btn--outline {
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
}

/* SM size: tighter */
.wpjobify-btn--sm {
	font-size: 12px !important;
	font-weight: 700 !important;
}

/* ── 8. AUTH PROMPT: Better visual ───────────────────────────────────────── */
.wpjobify-auth-prompt {
	border-radius: var(--wpjf-r-xl) !important;
	padding: 48px 32px !important;
}

.wpjobify-auth-prompt__title {
	font-size: 22px !important;
	font-weight: 800 !important;
	letter-spacing: -.03em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JOB CARD v2 — Reference Design
   New card layout: logo+header row → title → company → icon tags →
   excerpt → footer (deadline · date | salary).
   Replaces the old meta-pill row and inline apply button.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base card reset for new layout ─────────────────────────────────────── */
.wpjobify-job-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 22px 24px 18px !important;
	border-radius: 14px !important;
	background: #fff !important;
	border: 1px solid var(--wpjf-200) !important;
	box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease !important;
	cursor: pointer;
}

.wpjobify-job-card:hover {
	border-color: rgba(37,99,235,.28) !important;
	box-shadow: 0 8px 28px rgba(37,99,235,.10), 0 2px 8px rgba(0,0,0,.05) !important;
	transform: translateY(-2px) !important;
}

.wpjobify-job-card--featured {
	background: linear-gradient(108deg, rgba(239,246,255,.7) 0%, #fff 55%) !important;
	border-color: var(--wpjf-blue-border) !important;
}

.wpjobify-job-card--urgent {
	border-color: rgba(220,38,38,.20) !important;
}

/* ── Header row: logo on left, actions (badges + heart) on right ─────────── */
.wpjobify-job-card__header {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-bottom: 14px !important;
}

/* Logo container */
.wpjobify-job-card__logo {
	flex-shrink: 0;
	width: 52px !important;
	height: 52px !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	border: 1px solid var(--wpjf-100) !important;
	background: var(--wpjf-50);
}

.wpjobify-job-card__logo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.wpjobify-job-card__logo-initial {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	font-family: var(--wpjf-font) !important;
	line-height: 1 !important;
	border-radius: 0 !important;
}

/* Actions: badges + save heart */
.wpjobify-job-card__header-actions {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
}

/* ── Save button repositioned to top-right ───────────────────────────────── */
.wpjobify-job-card .wpjobify-save-btn {
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	border: 1px solid var(--wpjf-200) !important;
	background: #fff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background .15s, border-color .15s, color .15s !important;
	color: var(--wpjf-400) !important;
}

.wpjobify-job-card .wpjobify-save-btn:hover {
	background: var(--wpjf-red-dim) !important;
	border-color: rgba(220,38,38,.25) !important;
	color: var(--wpjf-red) !important;
}

.wpjobify-job-card .wpjobify-save-btn--saved {
	background: var(--wpjf-red-dim) !important;
	border-color: rgba(220,38,38,.25) !important;
	color: var(--wpjf-red) !important;
}

/* ── Body: title → company → tags → excerpt ─────────────────────────────── */
.wpjobify-job-card__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	flex: 1 !important;
	/* Remove any old padding/flex-direction from v1 */
	padding: 0 !important;
}

/* Title */
.wpjobify-job-card__title {
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -.025em !important;
	color: var(--wpjf-900) !important;
	margin: 0 !important;
}

.wpjobify-job-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}

.wpjobify-job-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.wpjobify-job-card__title a:hover {
	color: var(--wpjf-blue) !important;
}

/* Company name */
.wpjobify-job-card__company {
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: var(--wpjf-500) !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

/* ── Taxonomy tags: icon + text, inline, no pills ────────────────────────── */
.wpjobify-job-card__tags {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px 14px !important;
	margin-top: 4px !important;
}

.wpjobify-job-card__tag {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: var(--wpjf-500) !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

.wpjobify-job-card__tag svg {
	color: var(--wpjf-400) !important;
	flex-shrink: 0;
}

/* ── Excerpt ─────────────────────────────────────────────────────────────── */
.wpjobify-job-card__excerpt {
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: var(--wpjf-500) !important;
	margin: 6px 0 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* ── Footer: deadline · posted | salary ──────────────────────────────────── */
.wpjobify-job-card__footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-top: 14px !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--wpjf-100) !important;
	flex-wrap: nowrap !important;
}

.wpjobify-job-card__footer-left {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
	min-width: 0 !important;
}

.wpjobify-job-card__footer-right {
	flex-shrink: 0 !important;
}

/* Deadline states */
.wpjobify-job-card__deadline {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
}

.wpjobify-job-card__deadline--ok {
	color: var(--wpjf-green) !important;
}

.wpjobify-job-card__deadline--soon {
	color: var(--wpjf-amber) !important;
}

.wpjobify-job-card__deadline--critical {
	color: var(--wpjf-red) !important;
}

/* Separator dot */
.wpjobify-job-card__footer-sep {
	color: var(--wpjf-300) !important;
	font-size: 12px !important;
	line-height: 1 !important;
}

/* Posted date */
.wpjobify-job-card__posted {
	font-size: 12px !important;
	color: var(--wpjf-400) !important;
	font-weight: 400 !important;
	line-height: 1 !important;
}

/* Salary */
.wpjobify-job-card__salary {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--wpjf-green-dark) !important;
	letter-spacing: -.02em !important;
}

/* ── Old elements that are no longer used — hide safely ─────────────────── */
.wpjobify-job-card__top,
.wpjobify-job-card__meta,
.wpjobify-job-card__meta-pill,
.wpjobify-job-card__apply-btn,
.wpjobify-job-card__badges {
	display: none !important;
}

/* ── Card needs position:relative for the title's full-card link ::after ─── */
.wpjobify-job-card {
	position: relative !important;
}

/* ── Header-actions badges sit above the link overlay ────────────────────── */
.wpjobify-job-card__header-actions {
	position: relative !important;
	z-index: 2 !important;
}

/* ── Responsive: compact on small screens ────────────────────────────────── */
@media (max-width: 640px) {
	.wpjobify-job-card {
		padding: 18px 16px 14px !important;
	}

	.wpjobify-job-card__logo {
		width: 44px !important;
		height: 44px !important;
	}

	.wpjobify-job-card__title {
		font-size: 15px !important;
	}

	.wpjobify-job-card__tags {
		gap: 5px 10px !important;
	}

	.wpjobify-job-card__footer {
		flex-wrap: wrap !important;
	}
}