/* ============================================================
   Flex Recruit – Frontend Stylesheet  v2.0
   All colors reference brand variables — tweak one place only.
   ============================================================ */

/* ── Brand Variables ──────────────────────────────────────── */
:root {
	--fr-primary:      #009AB2;
	--fr-primary-dark: #007a90;
	--fr-dark:         #173557;
	--fr-accent:       #29a8c4;
	--fr-text:         #1f2733;
	--fr-text-light:   #5a6b7d;
	--fr-border:       #d8e1ea;
	--fr-bg:           #f6fafb;
	--fr-danger:       #d93025;
	--fr-success:      #1a7f37;
	--fr-radius:       6px;
	--fr-shadow:       0 6px 14px -8px color-mix(in srgb, var(--fr-primary) 55%, transparent);
	--fr-transition:   0.2s ease;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration:       0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:      0.01ms !important;
		scroll-behavior:          auto !important;
	}
}

/* ── Job Card ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   Job card — unified with detail page style
   ══════════════════════════════════════════════════════════════ */

.flex-recruit-job {
	background:    #fff;
	border:        1px solid var(--fr-border);
	border-radius: 14px;
	padding:       1.5rem;
	margin-bottom: 1rem;
	box-shadow:    0 2px 12px -4px rgba(10,20,35,.06);
	transition:    box-shadow var(--fr-transition), transform var(--fr-transition);
	position:      relative;
}

.flex-recruit-job:hover {
	box-shadow: 0 6px 24px -6px rgba(10,20,35,.12);
	transform:  translateY(-2px);
}

.flex-recruit-job:last-child { margin-bottom: 0; }

/* Top row: badges (category + type) */
.flex-recruit-job__badges {
	display:       flex;
	flex-wrap:     wrap;
	gap:           .4rem;
	margin-bottom: .6rem;
}
.flex-recruit-job__badge {
	display:        inline-flex;
	align-items:    center;
	padding:        .2rem .65rem;
	border-radius:  99px;
	font-size:      .68rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.flex-recruit-job__badge--category {
	background: color-mix(in srgb, var(--fr-primary) 12%, #fff);
	color:      var(--fr-primary);
	border:     1px solid color-mix(in srgb, var(--fr-primary) 30%, transparent);
}
.flex-recruit-job__badge--type {
	background: color-mix(in srgb, var(--fr-dark) 8%, #fff);
	color:      var(--fr-dark);
	border:     1px solid color-mix(in srgb, var(--fr-dark) 20%, transparent);
}
.flex-recruit-job__badge--new {
	background: #fff3cd;
	color:      #856404;
	border:     1px solid #f0c040;
	animation:  fr-badge-pulse 2s ease infinite;
}
@keyframes fr-badge-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .75; }
}

/* Title */
.flex-recruit-job h2 {
	font-size:   1.2rem;
	margin:      0 0 .9rem;
	line-height: 1.25;
}
.flex-recruit-job h2 a {
	color:           var(--fr-dark);
	text-decoration: none;
	transition:      color var(--fr-transition);
}
.flex-recruit-job h2 a:hover { color: var(--fr-primary); }
/* Make entire card clickable */
.flex-recruit-job h2 a::after {
	content:  '';
	position: absolute;
	inset:    0;
	border-radius: 14px;
}

/* Meta grid: labelled cells like the detail page */
.flex-recruit-meta {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	border:                1px solid var(--fr-border);
	border-radius:         8px;
	overflow:              hidden;
	margin-bottom:         1rem;
}

.flex-recruit-meta .meta-item {
	display:        flex;
	flex-direction: column;
	gap:            .2rem;
	padding:        .5rem .75rem;
	border-right:   1px solid var(--fr-border);
	background:     var(--fr-bg);
	font-size:      inherit;
	font-weight:    inherit;
	color:          inherit;
	background:     transparent;
	border-radius:  0;
}
.flex-recruit-meta .meta-item:last-child { border-right: none; }

/* Label (icon + text) */
.flex-recruit-meta .meta-item .dashicons {
	font-size: .8rem;
	width:     .8rem;
	height:    .8rem;
	color:     var(--fr-primary);
	vertical-align: middle;
}
.flex-recruit-meta .meta-label {
	display:        flex;
	align-items:    center;
	gap:            .25rem;
	font-size:      .58rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color:          var(--fr-text-light);
}
.flex-recruit-meta .meta-value {
	font-size:   .88rem;
	font-weight: 700;
	color:       var(--fr-dark);
}
.flex-recruit-meta .meta-value--accent { color: var(--fr-primary); }

/* Excerpt */
.flex-recruit-job > p {
	color:       var(--fr-text-light);
	margin:      .25rem 0 .75rem;
	line-height: 1.6;
	font-size:   .92rem;
}

/* Remove old link style from within card — card is fully clickable */
.flex-recruit-job .flex-recruit-link {
	position: relative; /* above the ::after overlay */
	z-index:   1;
	font-size: .85rem;
	padding:   .45rem .9rem;
}

/* ── CTA Button ───────────────────────────────────────────── */
.flex-recruit-link,
.rnButton,
.solliciteer-button,
.btn-close-vacature,
.btn-filter-submit {
	display:          inline-flex;
	align-items:      center;
	gap:              .4rem;
	padding:          .55rem 1.1rem;
	background:       var(--fr-primary);
	color:            #fff;
	font-size:        .9rem;
	font-weight:      700;
	border:           none;
	border-radius:    var(--fr-radius);
	cursor:           pointer;
	text-decoration:  none;
	transition:       background var(--fr-transition), transform 60ms ease, box-shadow var(--fr-transition);
	box-shadow:       var(--fr-shadow);
}

.flex-recruit-link:hover,
.rnButton:hover,
.solliciteer-button:hover,
.btn-close-vacature:hover,
.btn-filter-submit:hover {
	background: var(--fr-primary-dark);
	color: #fff;
}

.flex-recruit-link:active,
.rnButton:active,
.btn-close-vacature:active,
.btn-filter-submit:active {
	transform: translateY(1px);
}

.flex-recruit-link:focus-visible,
.rnButton:focus-visible,
.btn-filter-submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-primary) 30%, transparent);
}

/* ── Pagination ───────────────────────────────────────────── */
.flex-recruit-pagination {
	margin: 2rem 0 0;
	text-align: center;
}

.flex-recruit-pagination .page-numbers {
	display:     inline-flex;
	gap:         .4rem;
	padding:     0;
	margin:      0;
	list-style:  none;
	flex-wrap:   wrap;
	justify-content: center;
}

.flex-recruit-pagination .page-numbers li > a,
.flex-recruit-pagination .page-numbers li > span,
.flex-recruit-pagination .page-numbers li > button {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	min-width:        2.5rem;
	height:           2.5rem;
	padding:          0 .85rem;
	border-radius:    var(--fr-radius);
	font-weight:      700;
	font-size:        .9rem;
	text-decoration:  none;
	border:           1px solid transparent;
	background:       var(--fr-primary);
	color:            #fff;
	cursor:           pointer;
	transition:       background var(--fr-transition), transform 60ms ease;
	box-shadow:       var(--fr-shadow);
}

.flex-recruit-pagination .page-numbers li > a:hover,
.flex-recruit-pagination .page-numbers li > button:hover { background: var(--fr-primary-dark); }

.flex-recruit-pagination .page-numbers li > a:active,
.flex-recruit-pagination .page-numbers li > button:active { transform: translateY(1px); }

.flex-recruit-pagination .page-numbers li > span.current {
	background: var(--fr-dark);
	color:      #fff;
	cursor:     default;
}

.flex-recruit-pagination .page-numbers li > span.dots {
	background: #fff;
	color:      var(--fr-dark);
	border:     1px dashed rgba(0,0,0,.15);
	cursor:     default;
}

@media (max-width: 480px) {
	.flex-recruit-pagination .page-numbers li > a,
	.flex-recruit-pagination .page-numbers li > span,
	.flex-recruit-pagination .page-numbers li > button {
		min-width: 2.1rem;
		height:    2.1rem;
		padding:   0 .65rem;
		font-size: .82rem;
	}
}

/* ── Infinite Scroll Sentinel ─────────────────────────────── */
.flex-recruit-infinite {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             .75rem;
	margin-top:      1.25rem;
}

.flex-recruit-spinner {
	inline-size:    32px;
	block-size:     32px;
	border:         3px solid color-mix(in srgb, var(--fr-primary) 20%, transparent);
	border-top-color: var(--fr-primary);
	border-radius:  50%;
	animation:      fr-spin .75s linear infinite;
}

@keyframes fr-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════
   Flex Recruit – Elite Filter Panel
   ══════════════════════════════════════════════════════════════ */

/* ── Layout: sidebar + results ───────────────────────────── */
.fr-filter-wrap {
	display:   grid;
	grid-template-columns: 260px 1fr;
	gap:       2rem;
	align-items: start;
}

@media (max-width: 860px) {
	.fr-filter-wrap { grid-template-columns: 1fr; }
}

/* ── Filter panel ─────────────────────────────────────────── */
.fr-filter-panel {
	background:    #fff;
	border:        1px solid var(--fr-border);
	border-radius: 12px;
	position:      sticky;
	top:           1.5rem;
	overflow:      hidden;
	min-width:     0;
}

.fr-filter-panel__head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         .75rem 1.1rem;
	border-bottom:   1px solid var(--fr-border);
	background:      var(--fr-bg);
	border-radius:   12px 12px 0 0;
}

.fr-filter-panel__title {
	font-size:   .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color:       var(--fr-dark);
}

.fr-filter-panel__head-actions {
	display:     flex;
	align-items: center;
	gap:         .5rem;
}

/* Close button — only visible on mobile */
.fr-filter-panel__close {
	display:         none;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	background:      var(--fr-dark) !important;
	border:          none !important;
	border-radius:   6px !important;
	color:           #fff !important;
	cursor:          pointer;
	padding:         0 !important;
	box-shadow:      none !important;
	transition:      background var(--fr-transition);
}
.fr-filter-panel__close:hover { background: var(--fr-primary) !important; }
.fr-filter-panel__close .dashicons { font-size: 1.1rem; width: 1.1rem; height: 1.1rem; }

@media (max-width: 860px) {
	.fr-filter-panel__close { display: flex; }
}

.fr-filter-reset {
	background:  none !important;
	border:      none !important;
	border-radius: 0 !important;
	box-shadow:  none !important;
	color:       var(--fr-primary) !important;
	font-size:   .78rem;
	font-weight: 600;
	cursor:      pointer;
	padding:     .15rem .35rem !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition:  color var(--fr-transition);
}
.fr-filter-reset:hover { color: var(--fr-primary-dark) !important; }

/* ── Filter form ──────────────────────────────────────────── */
.fr-filter-form {
	display:    block;
	padding:    0;
	width:      100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

.fr-filter-section {
	display:       block;
	border-bottom: 1px solid var(--fr-border);
	padding:       .85rem 1.1rem;
	width:         100%;
	box-sizing:    border-box;
}
.fr-filter-section:last-child { border-bottom: none; }

/* Section title / collapsible trigger */
.fr-filter-section__title {
	display:         flex !important;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	background:      none !important;
	border:          none !important;
	border-radius:   0 !important;
	padding:         0 0 .65rem !important;
	margin:          0;
	font-size:       1rem;
	font-weight:     700;
	color:           var(--fr-dark) !important;
	cursor:          pointer;
	text-align:      left;
	box-shadow:      none !important;
	text-transform:  none !important;
	letter-spacing:  normal !important;
}

.fr-chevron {
	display:     inline-flex;
	align-items: center;
	justify-content: center;
	width:       20px;
	height:      20px;
	flex-shrink: 0;
	transition:  transform .2s ease;
}
.fr-chevron::after {
	content:      '';
	display:      block;
	width:        8px;
	height:       8px;
	border-right: 2px solid var(--fr-text-light);
	border-bottom: 2px solid var(--fr-text-light);
	transform:    rotate(45deg);
	margin-top:   -4px;
	transition:   transform .2s ease, border-color .2s ease;
}
.fr-collapsible[aria-expanded="false"] .fr-chevron::after {
	transform: rotate(-135deg);
	margin-top: 4px;
}
.fr-collapsible:hover .fr-chevron::after {
	border-color: var(--fr-primary);
}

/* Collapsible target */
.fr-check-list[hidden],
.fr-slider-wrap[hidden] { display: none; }

/* ── Search ───────────────────────────────────────────────── */
.fr-search-wrap {
	position:  relative;
	display:   flex;
	align-items: center;
}
.fr-search-wrap .dashicons {
	position: absolute;
	left:     .6rem;
	color:    var(--fr-text-light);
	font-size: 1rem;
}
.fr-search-wrap input[type="search"] {
	width:         100%;
	padding:       .5rem .75rem .5rem 2rem;
	border:        1px solid var(--fr-border);
	border-radius: var(--fr-radius);
	font-size:     .88rem;
	color:         var(--fr-text);
	background:    var(--fr-bg);
	box-sizing:    border-box;
	transition:    border-color var(--fr-transition), box-shadow var(--fr-transition);
}
.fr-search-wrap input:focus {
	border-color: var(--fr-primary);
	outline:      none;
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--fr-primary) 20%, transparent);
}

/* ── Checkbox list ────────────────────────────────────────── */
.fr-check-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        .45rem;
}

.fr-check-label {
	display:     flex;
	align-items: center;
	gap:         .55rem;
	cursor:      pointer;
	padding:     .25rem .1rem;
	border-radius: 4px;
	transition:  background var(--fr-transition);
}
.fr-check-label:hover { background: color-mix(in srgb, var(--fr-primary) 5%, #fff); }

.fr-check-label input[type="checkbox"] {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
}

.fr-check-box {
	width:         18px;
	height:        18px;
	flex-shrink:   0;
	border:        2px solid var(--fr-border);
	border-radius: 4px;
	background:    #fff;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    border-color var(--fr-transition), background var(--fr-transition);
}
.fr-check-box::after {
	content:    '';
	width:      9px;
	height:     6px;
	border-left:   2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform:  rotate(-45deg) translate(1px, -1px);
	opacity:    0;
	transition: opacity .15s ease;
}

.fr-check-label input:checked ~ .fr-check-box {
	background:   var(--fr-primary);
	border-color: var(--fr-primary);
}
.fr-check-label input:checked ~ .fr-check-box::after { opacity: 1; }

.fr-check-label input:focus-visible ~ .fr-check-box {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-primary) 25%, transparent);
}

.fr-check-name {
	flex:        1;
	font-size:   .88rem;
	color:       var(--fr-dark);
	line-height: 1.3;
}
.fr-check-count {
	font-size:   .78rem;
	color:       var(--fr-text-light);
	font-weight: 600;
	margin-left: auto;
	padding-left: .25rem;
}

/* ── Range Slider ─────────────────────────────────────────── */
.fr-slider-wrap { padding-top: .25rem; }

.fr-slider-labels {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-top:      .65rem;
	gap:             .4rem;
	max-width:       100%;
}

.fr-slider-val {
	font-size:    .78rem;
	font-weight:  700;
	color:        var(--fr-dark);
	background:   var(--fr-bg);
	border:       1px solid var(--fr-border);
	border-radius: 4px;
	padding:      .2rem .45rem;
	white-space:  nowrap;
	max-width:    48%;
	overflow:     hidden;
	text-overflow: ellipsis;
}

.fr-slider-track {
	position:   relative;
	height:     6px;
	background: var(--fr-border);
	border-radius: 3px;
	margin:     .5rem .75rem 0;
	overflow:   visible;
}

.fr-slider-fill {
	position:     absolute;
	height:        100%;
	background:   var(--fr-primary);
	border-radius: 3px;
}

.fr-range {
	-webkit-appearance: none;
	appearance:   none;
	position:     absolute;
	top:          50%;
	transform:    translateY(-50%);
	width:        100%;
	height:       100%;
	background:   transparent;
	margin:       0;
	pointer-events: none;
	z-index:      1;
}
/* When min thumb is at the high end, raise it so it stays clickable */
.fr-range--min { z-index: 2; }
.fr-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance:   none;
	width:        20px;
	height:       20px;
	border-radius: 50%;
	background:   #fff;
	border:       2.5px solid var(--fr-primary);
	box-shadow:   0 2px 6px rgba(0,0,0,.15);
	cursor:       pointer;
	pointer-events: all;
	transition:   border-color var(--fr-transition), transform .1s ease;
}
.fr-range::-moz-range-thumb {
	width:        20px;
	height:       20px;
	border-radius: 50%;
	background:   #fff;
	border:       2.5px solid var(--fr-primary);
	box-shadow:   0 2px 6px rgba(0,0,0,.15);
	cursor:       pointer;
	pointer-events: all;
}
.fr-range:focus-visible::-webkit-slider-thumb {
	border-color: var(--fr-primary-dark);
	transform:    translateY(-50%) scale(1.15);
}
.fr-range::-webkit-slider-thumb:active { transform: scale(1.2); }

/* ── Results header ───────────────────────────────────────── */
.fr-results-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             .75rem;
	margin-bottom:   1rem;
	flexwrap:        wrap;
}

.fr-result-count {
	font-size:   .85rem;
	color:       var(--fr-text-light);
	font-weight: 600;
}

/* Mobile filter toggle button */
.fr-mobile-filter-toggle {
	display:     none;
	align-items: center;
	gap:         .45rem;
	background:  var(--fr-dark);
	color:       #fff;
	border:      none;
	padding:     .55rem 1rem;
	border-radius: var(--fr-radius);
	font-size:   .88rem;
	font-weight: 700;
	cursor:      pointer;
	transition:  background var(--fr-transition);
}
.fr-mobile-filter-toggle:hover { background: var(--fr-primary); }
.fr-mobile-filter-toggle .dashicons { font-size: 1rem; width: 1rem; height: 1rem; }

.fr-active-count {
	background:    var(--fr-primary);
	color:         #fff;
	border-radius: 99px;
	font-size:     .72rem;
	padding:       0 .45rem;
	min-width:     1.2em;
	text-align:    center;
}

/* Mobile backdrop */
.fr-filter-backdrop {
	position:   fixed;
	top:        0;
	left:       0;
	right:      0;
	bottom:     0;
	width:      100vw;
	height:     100vh;
	background: rgba(10,20,35,.5);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index:    8000;
	cursor:     pointer;
}
.fr-filter-backdrop[hidden] { display: none; }

/* ── Mobile overrides ─────────────────────────────────────── */
@media (max-width: 860px) {
	.fr-mobile-filter-toggle { display: inline-flex; }

	.fr-filter-panel {
		position:       fixed;
		top:            0;
		left:           0;
		bottom:         0;
		width:          min(85vw, 300px);
		z-index:        8100;
		border-radius:  0;
		display:        flex;
		flex-direction: column;
		overflow:       hidden;
		transform:      translateX(-110%);
		transition:     transform .3s cubic-bezier(.4,0,.2,1);
		border:         none;
		box-shadow:     4px 0 32px rgba(0,0,0,.22);
	}

	.fr-filter-panel.is-open {
		transform: translateX(0);
	}

	/* Head stays locked at top — never scrolls away */
	.fr-filter-panel .fr-filter-panel__head {
		flex-shrink:    0;
		position:       relative; /* not sticky — it's locked by flex */
		z-index:        2;
		border-radius:  0;
		padding:        1rem 1.1rem;
		box-shadow:     0 2px 8px rgba(0,0,0,.06);
	}

	/* Form/content area scrolls independently */
	.fr-filter-panel .fr-filter-form {
		flex:           1;
		overflow-y:     auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding-bottom: env(safe-area-inset-bottom, 1rem);
	}
}

/* Result count + reset */
.fr-results-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   1rem;
	flex-wrap:       wrap;
	gap:             .5rem;
}

#flex-recruit-count {
	font-size:   .88rem;
	color:       var(--fr-text-light);
	font-weight: 600;
}

.fr-reset {
	background:  none;
	border:      1px solid var(--fr-border);
	color:       var(--fr-text-light);
	font-size:   .82rem;
	padding:     .3rem .7rem;
	border-radius: var(--fr-radius);
	cursor:      pointer;
	transition:  border-color var(--fr-transition), color var(--fr-transition);
}
.fr-reset:hover { border-color: var(--fr-primary); color: var(--fr-primary); }

/* Error state inside results */
.fr-error { color: var(--fr-danger); font-weight: 600; }

/* Loading fade */
#flex-recruit-results[aria-busy="true"] { transition: opacity var(--fr-transition); }

/* ── Consultant Profile Widget ─────────────────────────────── */
/* ── Consultant Widget (fcw) ─────────────────────────────── */
.fcw {
	background:    var(--fr-dark);
	border-radius: 10px;
	padding:       1.1rem 1.25rem;
	color:         #fff;
}

.fcw__label {
	font-size:      .7rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color:          var(--fr-accent);
	margin:         0 0 .75rem;
}

.fcw__body {
	display:     flex;
	align-items: center;
	gap:         .9rem;
	min-width:   0; /* critical — allows flex children to shrink */
}

.fcw__avatar {
	flex-shrink: 0;
}

.fcw__avatar img {
	width:         60px;
	height:        60px;
	border-radius: 50%;
	object-fit:    cover;
	border:        2px solid var(--fr-primary);
	display:       block;
}

.fcw__info {
	display:  flex;
	flex-direction: column;
	gap:      .3rem;
	min-width: 0; /* allow shrink */
	overflow:  hidden;
}

.fcw__name {
	font-size:   .95rem;
	font-weight: 700;
	color:       #fff;
	display:     block;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.fcw__contact {
	display:     flex;
	align-items: center;
	gap:         .35rem;
	color:       rgba(255,255,255,.8);
	text-decoration: none;
	font-size:   .8rem;
	min-width:   0;
	transition:  color var(--fr-transition);
}

.fcw__contact:hover { color: var(--fr-accent); }

.fcw__contact .dashicons {
	font-size:   .95rem;
	width:       .95rem;
	height:      .95rem;
	flex-shrink: 0;
	color:       var(--fr-accent);
}

.fcw__contact-text {
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	min-width:     0;
}

/* ── Job Details Box (single vacancy) ─────────────────────── */
.job-details-box {
	background:    var(--fr-bg);
	border:        1px solid var(--fr-border);
	border-radius: calc(var(--fr-radius) + 2px);
	padding:       1.25rem;
	margin-bottom: 1.5rem;
}

.job-details-title {
	font-size:     1rem;
	font-weight:   700;
	color:         var(--fr-dark);
	margin:        0 0 .85rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--fr-primary);
}

.job-detail-item {
	display:     flex;
	align-items: center;
	gap:         .5rem;
	font-size:   .9rem;
	color:       var(--fr-text);
	margin-bottom: .55rem;
}

.job-detail-item .dashicons {
	color:     var(--fr-primary);
	font-size: 1.1rem;
	width:     1.1rem;
	height:    1.1rem;
	flex-shrink: 0;
}

.solliciteer-button {
	margin-top: 1rem;
	width:      100%;
	justify-content: center;
}

/* ── Application Form Container ───────────────────────────── */
.job-application-container { max-width: 820px; }

.job-application-container .job-details {
	background:    var(--fr-bg);
	border:        1px solid var(--fr-border);
	border-radius: var(--fr-radius);
	padding:       1rem 1.25rem;
	margin-bottom: 1.25rem;
}

.job-application-container .job-details h2 {
	font-size:   1.2rem;
	color:       var(--fr-dark);
	margin:      0 0 .75rem;
}

.form-container {
	padding:       1.25rem;
	border:        1px solid var(--fr-border);
	border-radius: var(--fr-radius);
	background:    #fff;
}

.btn-close-vacature {
	margin: .5rem 0 1.25rem;
}

/* ── RecruitNow Web Component Overrides ───────────────────── */
h2 .rnTitlePrefix,
h2 .rnVacancyTitle { display: none; }

.rnFormWrapper { padding: 1.25rem; }

.rnFieldList { margin: 0; padding: 0; }

.rnFieldList fieldset {
	border:        none;
	margin-bottom: 1.25rem;
	padding:       0;
}

.rnFieldList legend {
	font-size:     1.05rem;
	font-weight:   700;
	margin-bottom: .6rem;
	color:         var(--fr-dark);
}

.rnFormGroup {
	margin-bottom: .9rem;
	display:       flex;
	flex-direction: column;
}

.rnLabel {
	font-weight:   700;
	color:         var(--fr-dark);
	margin-bottom: .35rem;
	font-size:     .9rem;
}

.rnFormControl {
	width:         100%;
	padding:       .55rem .75rem;
	border:        1px solid var(--fr-border);
	border-radius: var(--fr-radius);
	font-size:     1rem;
	box-sizing:    border-box;
	background:    #fff;
	color:         var(--fr-text);
	transition:    border-color var(--fr-transition), box-shadow var(--fr-transition);
}

.rnFormControl:hover { border-color: color-mix(in srgb, var(--fr-primary) 35%, var(--fr-border)); }

.rnFormControl:focus {
	border-color: var(--fr-primary);
	outline:      none;
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--fr-primary) 22%, transparent);
}

textarea.rnFormControl { resize: vertical; min-height: 130px; }

.rnField.error .rnFormControl {
	border-color: var(--fr-danger);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--fr-danger) 15%, transparent);
}

.rnErrors { color: var(--fr-danger); font-size: .85rem; margin-top: .35rem; }

/* Checkbox */
input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
	background:         #fff;
	border:             1.5px solid var(--fr-border);
	border-radius:      4px;
	width:              18px;
	height:             18px;
	cursor:             pointer;
	position:           relative;
	display:            inline-block;
	vertical-align:     middle;
	flex-shrink:        0;
	transition:         border-color var(--fr-transition), background var(--fr-transition);
}

input[type="checkbox"]:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-primary) 25%, transparent);
}

input[type="checkbox"]:checked {
	background:   var(--fr-primary);
	border-color: var(--fr-primary);
}

input[type="checkbox"]:checked::before {
	content:      '';
	position:     absolute;
	left:         4px;
	top:          1px;
	width:        7px;
	height:       11px;
	border-right: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform:    rotate(45deg);
}

.rnCheckbox {
	display:     flex;
	align-items: center;
	gap:         .5rem;
}

/* File upload */
.rnFileUpload {
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	border:        1px solid var(--fr-border);
	border-radius: var(--fr-radius);
	padding:       .55rem .75rem;
	background:    #fff;
	position:      relative;
	gap:           .75rem;
}

.rnFileUpload .rnFilename {
	font-size:   .88rem;
	color:       var(--fr-text-light);
	flex:        1;
	overflow:    hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rnFileUpload .rnAction {
	background:    var(--fr-primary);
	color:         #fff;
	padding:       .45rem .85rem;
	border-radius: var(--fr-radius);
	cursor:        pointer;
	font-weight:   700;
	font-size:     .85rem;
	white-space:   nowrap;
	transition:    background var(--fr-transition);
}

.rnFileUpload .rnAction:hover { background: var(--fr-primary-dark); }

.rnFileUpload input[type="file"] {
	position: absolute;
	inset:    0;
	opacity:  0;
	cursor:   pointer;
}

/* Privacy consent */
.rnPrivacyStatement label,
.rnCheckbox label {
	display:     flex;
	align-items: center;
	cursor:      pointer;
	margin:      0;
	gap:         .5rem;
}

/* Phone widget */
.oe_widget .oe_fieldset {
	display:   flex;
	flex-wrap: wrap;
	gap:       .75rem;
	margin:    0 0 1.25rem;
	border:    0;
	padding:   0;
}

.oe_widget .oe_label {
	flex:        1 1 100%;
	margin:      0 0 .35rem;
	font-weight: 700;
	color:       var(--fr-dark);
	font-size:   .9rem;
}

.oe_widget .oe_textElement.oe_phoneNumber { flex: 0 0 min(280px, 100%); }

.oe_widget .oe_textElement.oe_phoneNumberInput {
	flex:        1 1 380px;
	display:     flex;
	align-items: stretch;
	gap:         0;
}

.oe_widget .oe_textElement.oe_phoneNumber .oe_selector {
	position:      relative;
	display:       block;
	min-height:    42px;
	padding:       .5rem 2rem .5rem .75rem;
	border:        1px solid var(--fr-border) !important;
	border-radius: var(--fr-radius);
	background:    #fff !important;
	color:         var(--fr-text);
	transition:    border-color var(--fr-transition);
}

.oe_widget .oe_textElement.oe_phoneNumber .oe_selector:focus-within {
	border-color: var(--fr-primary) !important;
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--fr-primary) 22%, transparent);
	outline:      none;
}

.oe_widget .oe_textElement.oe_phoneNumberInput .oe_phone_prefix {
	display:     inline-flex;
	align-items: center;
	padding:     0 .6rem;
	background:  #fff !important;
	color:       var(--fr-dark);
	font-weight: 600;
	border:      1px solid var(--fr-border) !important;
	border-radius: var(--fr-radius) !important;
}

.oe_widget .oe_textElement.oe_phoneNumberInput input[type="tel"] {
	flex:          1 1 auto;
	width:         100%;
	height:        42px;
	padding:       .5rem .75rem;
	background:    #fff !important;
	color:         var(--fr-text) !important;
	border:        1px solid var(--fr-border) !important;
	border-radius: var(--fr-radius) !important;
	box-shadow:    none !important;
	outline:       none !important;
}

.oe_widget .oe_textElement.oe_phoneNumberInput input[type="tel"]:focus {
	border-color: var(--fr-primary) !important;
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--fr-primary) 22%, transparent) !important;
}

@media (max-width: 600px) {
	.oe_widget .oe_textElement.oe_phoneNumber,
	.oe_widget .oe_textElement.oe_phoneNumberInput { flex-basis: 100%; }
}

/* ── Error message (back to overview) ─────────────────────── */
.jobs_error-message {
	display:       flex;
	align-items:   center;
	flex-wrap:     wrap;
	gap:           .5rem .75rem;
	background:    color-mix(in srgb, var(--fr-danger) 8%, #fff);
	border:        1px solid color-mix(in srgb, var(--fr-danger) 30%, transparent);
	border-radius: var(--fr-radius);
	padding:       1rem 1.25rem;
	color:         var(--fr-danger);
	font-weight:   600;
}

.jobs_back-to-overview {
	display:     inline-flex;
	align-items: center;
	gap:         .35rem;
	color:       var(--fr-primary);
	font-weight: 700;
	text-decoration: none;
}

.jobs_back-to-overview:hover { text-decoration: underline; }

/* ── Sticky Vacancy Bar (mobile) ──────────────────────────── */
@media (max-width: 768px) {
	.sticky-vacature-bar {
		position:    fixed;
		top:         80px;
		left:        0;
		right:       0;
		background:  var(--fr-dark);
		color:       #fff;
		padding:     .75rem 1.25rem;
		z-index:     9999;
		display:     flex;
		justify-content: space-between;
		align-items: center;
		gap:         1rem;
		transform:   translateY(-110%);
		opacity:     0;
		pointer-events: none;
		transition:  transform .3s ease, opacity .3s ease;
	}

	.sticky-vacature-bar.visible {
		transform:      translateY(0);
		opacity:        1;
		pointer-events: auto;
	}

	.sticky-vacature-title {
		font-weight: 600;
		font-size:   1rem;
		color:       #fff;
	}
}

/* ── Dark Mode ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.form-container {
		background:   #fff;
		border-color: #223049;
	}
	.flex-recruit-pagination .page-numbers li > span.dots {
		background:   #121a27;
		border-color: rgba(255,255,255,.15);
		color:        #dfe7f2;
	}
}

/* ══════════════════════════════════════════════════════════════
   Flex Recruit – Application Modal
   ══════════════════════════════════════════════════════════════ */

/* ── Overlay ──────────────────────────────────────────────────── */
.fr-modal {
	position:   fixed;
	inset:      0;
	z-index:    99999;
	display:    flex;
	align-items: center;
	justify-content: center;
	padding:    1rem;
}

.fr-modal[hidden] { display: none; }

.fr-modal.is-open { display: flex; }

.fr-modal__backdrop {
	position:   absolute;
	inset:      0;
	background: rgba(10, 20, 35, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	cursor:     pointer;
	animation:  fr-backdrop-in 220ms ease forwards;
}

@keyframes fr-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Dialog box ───────────────────────────────────────────────── */
.fr-modal__dialog {
	position:        relative;
	z-index:         1;
	display:         flex;
	flex-direction:  column;
	width:           100%;
	max-width:       680px;
	max-height:      92vh;
	background:      #fff;
	border-radius:   14px;
	box-shadow:      0 24px 64px -12px rgba(10, 20, 35, 0.35),
	                 0 8px 24px -8px rgba(10, 20, 35, 0.18);
	overflow:        hidden;
	animation:       fr-dialog-in 260ms cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes fr-dialog-in {
	from { opacity: 0; transform: translateY(20px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Header ───────────────────────────────────────────────────── */
.fr-modal__header {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             1rem;
	padding:         1.5rem 1.75rem 1.25rem;
	background:      var(--fr-dark);
	color:           #fff;
	flex-shrink:     0;
}

.fr-modal__eyebrow {
	display:        block;
	font-size:      .7rem;
	font-weight:    700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var(--fr-accent);
	margin-bottom:  .3rem;
}

.fr-modal__title {
	font-size:   1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color:       #fff;
	margin:      0 0 .9rem;
}

/* Chips row */
.fr-modal__chips {
	display:   flex;
	flex-wrap: wrap;
	gap:       .4rem .5rem;
}

.fr-chip {
	display:      inline-flex;
	align-items:  center;
	gap:          .35rem;
	background:   rgba(255,255,255,.12);
	color:        rgba(255,255,255,.9);
	padding:      .3rem .7rem;
	border-radius: 99px;
	font-size:    .78rem;
	font-weight:  600;
	line-height:  1.2;
	border:       1px solid rgba(255,255,255,.15);
}

.fr-chip--accent {
	background:   color-mix(in srgb, var(--fr-primary) 25%, transparent);
	border-color: color-mix(in srgb, var(--fr-primary) 45%, transparent);
	color:        #fff;
}

.fr-chip .dashicons {
	font-size: .9rem;
	width:     .9rem;
	height:    .9rem;
	flex-shrink: 0;
	opacity:   .75;
}

/* Close button */
.fr-modal__close {
	flex-shrink:   0;
	display:       flex;
	align-items:   center;
	justify-content: center;
	width:         36px;
	height:        36px;
	background:    rgba(255,255,255,.12);
	border:        1px solid rgba(255,255,255,.18);
	border-radius: 8px;
	color:         #fff;
	cursor:        pointer;
	transition:    background var(--fr-transition), transform 80ms ease;
	margin-top:    .15rem;
}

.fr-modal__close:hover  { background: rgba(255,255,255,.22); }
.fr-modal__close:active { transform: scale(.93); }

.fr-modal__close:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-primary) 50%, transparent);
}

.fr-modal__close .dashicons { font-size: 1.1rem; }

/* ── Body (scrollable) ────────────────────────────────────────── */
.fr-modal__body {
	flex:       1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.fr-modal__form-wrap {
	padding: 1.5rem 1.75rem;
}

/* Clean up the RecruitNow component header inside modal */
.fr-modal__form-wrap h2,
.fr-modal__form-wrap .rnTitlePrefix,
.fr-modal__form-wrap .rnVacancyTitle {
	display: none !important;
}

/* ── Footer ───────────────────────────────────────────────────── */
.fr-modal__footer {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
	padding:     1rem 1.75rem;
	border-top:  1px solid var(--fr-border);
	background:  var(--fr-bg);
}

.fr-modal__back-btn {
	display:     inline-flex;
	align-items: center;
	gap:         .4rem;
	background:  none;
	border:      1px solid var(--fr-border);
	color:       var(--fr-text-light);
	font-size:   .88rem;
	font-weight: 600;
	padding:     .45rem .9rem;
	border-radius: var(--fr-radius);
	cursor:      pointer;
	transition:  border-color var(--fr-transition), color var(--fr-transition), background var(--fr-transition);
}

.fr-modal__back-btn:hover {
	border-color: var(--fr-primary);
	color:        var(--fr-primary);
	background:   color-mix(in srgb, var(--fr-primary) 5%, #fff);
}

.fr-modal__back-btn:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-primary) 25%, transparent);
}

.fr-modal__back-btn .dashicons {
	font-size: 1rem;
	width:     1rem;
	height:    1rem;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 540px) {
	.fr-modal { padding: 0; align-items: flex-end; }

	.fr-modal__dialog {
		max-width:     100%;
		max-height:    92dvh;
		border-radius: 18px 18px 0 0;
		animation:     fr-dialog-in-mobile 300ms cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
	}

	@keyframes fr-dialog-in-mobile {
		from { opacity: 0; transform: translateY(40px); }
		to   { opacity: 1; transform: translateY(0);    }
	}

	.fr-modal__header { padding: 1.25rem 1.25rem 1rem; }
	.fr-modal__title  { font-size: 1.05rem; }
	.fr-modal__form-wrap { padding: 1.25rem; }
	.fr-modal__footer { padding: .85rem 1.25rem; }
}

/* ── Body scroll lock when modal is open ─────────────────────── */
body.fr-modal-open {
	overflow: hidden;
	/* Prevent layout shift from scrollbar disappearing */
	padding-right: var(--fr-scrollbar-width, 0px);
}

/* ══════════════════════════════════════════════════════════════
   Flex Recruit – Single Vacancy Page — Elite Edition
   ══════════════════════════════════════════════════════════════ */

.frs-container {
	max-width:     1100px;
	margin:        0 auto;
	padding-left:  1.25rem;
	padding-right: 1.25rem;
}

/* ── Back link ────────────────────────────────────────────────── */
.frs-topbar { padding: .85rem 0 0; }
.frs-back-link {
	display:         inline-flex;
	align-items:     center;
	gap:             .35rem;
	color:           var(--fr-text-light);
	font-size:       .82rem;
	font-weight:     600;
	text-decoration: none;
	transition:      color var(--fr-transition);
}
.frs-back-link:hover { color: var(--fr-primary); }
.frs-back-link .dashicons { font-size: .95rem; width: .95rem; height: .95rem; }

/* ── Title block ──────────────────────────────────────────────── */
.frs-title-block { padding: .75rem 0 0; }

/* Category / type badges above title */
.frs-title-badges {
	display:   flex;
	flex-wrap: wrap;
	gap:       .4rem;
	margin-bottom: .65rem;
}
.frs-badge {
	display:        inline-flex;
	align-items:    center;
	padding:        .25rem .75rem;
	border-radius:  99px;
	font-size:      .72rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .07em;
}
.frs-badge--category {
	background: color-mix(in srgb, var(--fr-primary) 12%, #fff);
	color:      var(--fr-primary);
	border:     1px solid color-mix(in srgb, var(--fr-primary) 30%, transparent);
}
.frs-badge--type {
	background: color-mix(in srgb, var(--fr-dark) 8%, #fff);
	color:      var(--fr-dark);
	border:     1px solid color-mix(in srgb, var(--fr-dark) 20%, transparent);
}
.frs-badge--new {
	background: #fff3cd;
	color:      #856404;
	border:     1px solid #f0c040;
}

.frs-title {
	font-size:   clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.15;
	color:       var(--fr-dark);
	margin:      0 0 1.25rem;
}

/* ── Inline meta row ──────────────────────────────────────────── */
.frs-meta-row {
	display:       flex;
	flex-wrap:     wrap;
	gap:           0;
	margin-bottom: .5rem;
	border:        1px solid var(--fr-border);
	border-radius: 10px;
	overflow:      hidden;
}
.frs-meta-cell {
	display:        flex;
	flex-direction: column;
	gap:            .15rem;
	padding:        .65rem 1.1rem;
	border-right:   1px solid var(--fr-border);
	flex:           1 1 auto;
}
.frs-meta-cell:last-child { border-right: none; }
.frs-meta-cell__label {
	display:        flex;
	align-items:    center;
	gap:            .3rem;
	font-size:      .62rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color:          var(--fr-text-light);
}
.frs-meta-cell__label .dashicons {
	font-size:  .85rem;
	width:      .85rem;
	height:     .85rem;
	color:      var(--fr-primary);
	flex-shrink: 0;
}
.frs-meta-cell__value {
	font-size:   .95rem;
	font-weight: 700;
	color:       var(--fr-dark);
}
.frs-meta-cell__value--accent {
	color: var(--fr-primary);
}

/* Mobile chips (legacy — replaced by frs-mobile-meta grid) */
.frs-mobile-chips { display: none; }
.frs-mchip {
	display:      inline-flex;
	align-items:  center;
	gap:          .35rem;
	background:   var(--fr-dark);
	color:        #fff;
	padding:      .38rem .85rem;
	border-radius: 99px;
	font-size:    .8rem;
	font-weight:  600;
}
.frs-mchip--salary { background: var(--fr-primary); }
.frs-mchip--muted  { background: var(--fr-bg); color: var(--fr-text-light); border: 1px solid var(--fr-border); }
.frs-mchip--muted .dashicons { color: var(--fr-text-light); }
.frs-mchip .dashicons { font-size: .85rem; width: .85rem; height: .85rem; opacity: .8; }

/* ── Two-column grid ─────────────────────────────────────────── */
.frs-body {
	display:               grid;
	grid-template-columns: 1fr 300px;
	grid-template-areas:   "main sidebar";
	gap:                   3rem;
	padding-top:           2.5rem;
	padding-bottom:        3rem;
	align-items:           start;
}
.frs-main    { grid-area: main; }
.frs-sidebar { grid-area: sidebar; }

/* ── Content sections ─────────────────────────────────────────── */
.frs-section { margin-bottom: 2.75rem; }
.frs-section:last-of-type { margin-bottom: 0; }

.frs-section__title {
	display:       flex;
	align-items:   center;
	gap:           .75rem;
	font-size:     1.15rem;
	font-weight:   700;
	color:         var(--fr-dark);
	margin:        0 0 1.25rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--fr-border);
}

.frs-section__num {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	width:          28px;
	height:         28px;
	background:     var(--fr-primary);
	color:          #fff;
	border-radius:  6px;
	font-size:      .72rem;
	font-weight:    800;
	letter-spacing: .03em;
	flex-shrink:    0;
}

/* ── Prose ────────────────────────────────────────────────────── */
.frs-prose {
	color:       var(--fr-text);
	line-height: 1.85;
	font-size:   1rem;
}
.frs-prose > *:first-child { margin-top: 0; }
.frs-prose > *:last-child  { margin-bottom: 0; }
.frs-prose p  { margin: 0 0 1rem; }
.frs-prose ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.frs-prose ul li {
	padding:  .2rem 0 .2rem 1.3rem;
	position: relative;
	line-height: 1.6;
}
.frs-prose ul li::before {
	content:      '';
	position:     absolute;
	left:         0;
	top:          .55em;
	width:        7px;
	height:       7px;
	background:   var(--fr-primary);
	border-radius: 50%;
}
.frs-prose ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.frs-prose strong { color: var(--fr-dark); font-weight: 700; }
.frs-prose h3, .frs-prose h4 { color: var(--fr-dark); margin: 1.5rem 0 .6rem; font-weight: 700; }

/* ── Benefits grid ────────────────────────────────────────────── */
.frs-benefits-grid {
	display:   grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap:       1rem;
}
.frs-benefit-card {
	background:    var(--fr-bg);
	border:        1px solid var(--fr-border);
	border-radius: 10px;
	padding:       1.1rem 1rem;
	display:       flex;
	flex-direction: column;
	gap:           .6rem;
	transition:    box-shadow var(--fr-transition), transform var(--fr-transition);
}
.frs-benefit-card:hover {
	box-shadow: 0 4px 16px -4px rgba(10,20,35,.1);
	transform:  translateY(-2px);
}
.frs-benefit-icon {
	color:     var(--fr-primary);
	font-size: 1.6rem;
	width:     1.6rem;
	height:    1.6rem;
}
.frs-benefit-text {
	font-size:   .88rem;
	font-weight: 600;
	color:       var(--fr-dark);
	margin:      0;
	line-height: 1.4;
}

/* Mobile apply/consultant/share */
.frs-mobile-apply,
.frs-mobile-consultant,
.frs-mobile-share { display: none; }
.frs-mobile-meta { display: none; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.frs-sidebar {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
	position:       sticky;
	top:            2rem;
}

/* ── Cards ───────────────────────────────────────────────────── */
.frs-card {
	background:    #fff;
	border:        1px solid var(--fr-border);
	border-radius: 14px;
	padding:       1.35rem;
	box-shadow:    0 4px 20px -6px rgba(10,20,35,.08);
}
.frs-card--cta {
	background:    linear-gradient(145deg, var(--fr-dark) 0%, #0f2d50 100%);
	border-color:  transparent;
	padding:       1.75rem;
	display:       flex;
	flex-direction: column;
	gap:           .75rem;
}
.frs-card--cta::before {
	content:        'Klaar om te solliciteren?';
	display:        block;
	font-size:      .65rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color:          color-mix(in srgb, #fff 40%, transparent);
}
.frs-card__title {
	font-size:      .68rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color:          var(--fr-primary);
	margin:         0 0 1.1rem;
}
.frs-apply-btn {
	width:           100%;
	justify-content: space-between;
	font-size:       .95rem;
	font-weight:     800;
	padding:         1rem 1.25rem;
	border-radius:   10px;
	background:      var(--fr-primary);
	color:           #fff;
	border:          none;
	letter-spacing:  .01em;
	box-shadow:      0 6px 20px -4px color-mix(in srgb, var(--fr-primary) 50%, transparent);
	transition:      background var(--fr-transition), box-shadow var(--fr-transition);
	gap:             1rem;
}
.frs-apply-btn:hover {
	background:  var(--fr-primary-dark);
	box-shadow:  0 8px 24px -4px color-mix(in srgb, var(--fr-primary) 60%, transparent);
	color:       #fff;
}
.frs-apply-btn .dashicons {
	transition: transform .2s ease;
}
.frs-apply-btn:hover .dashicons {
	transform: translateX(4px);
}

/* ── Detail list ─────────────────────────────────────────────── */
.frs-detail-list { list-style: none; margin: 0; padding: 0; }
.frs-detail-item {
	display:     flex;
	align-items: flex-start;
	gap:         .8rem;
	font-size:   .9rem;
	color:       var(--fr-text);
	padding:     .7rem 0;
	border-bottom: 1px solid var(--fr-bg);
}
.frs-detail-item:last-child { border-bottom: none; }
.frs-detail-icon { color: var(--fr-primary); font-size: 1.15rem; width: 1.15rem; height: 1.15rem; margin-top: .05rem; flex-shrink: 0; }
.frs-detail-item strong {
	display:        block;
	font-size:      .68rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color:          var(--fr-text-light);
	margin-bottom:  .2rem;
}

/* ── Consultant sidebar ──────────────────────────────────────── */
.frs-sidebar .fcw { max-width: 100%; border-radius: 14px; }

/* ── Share ───────────────────────────────────────────────────── */
.frs-card--share .frs-card__title { margin-bottom: .75rem; }
.frs-share-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.frs-share-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             .4rem;
	padding:         .5rem .95rem;
	border-radius:   8px;
	font-size:       .82rem;
	font-weight:     700;
	text-decoration: none;
	color:           #fff;
	transition:      filter var(--fr-transition), transform 60ms ease;
}
.frs-share-btn:hover  { filter: brightness(1.12); color: #fff; }
.frs-share-btn:active { transform: translateY(1px); }
.frs-share-btn--linkedin { background: #0a66c2; }
.frs-share-btn--whatsapp { background: #25d366; }
.frs-share-btn--email    { background: var(--fr-dark); }
.frs-share-btn .dashicons { font-size: 1rem; width: 1rem; height: 1rem; }

/* ══════════════════════════════════════════════════════════════
   MOBILE ≤ 860px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

	.frs-meta-row { display: none; }

	/* Hide badges on mobile — meta grid covers same info */
	.frs-title-badges { display: none; }

	.frs-title { font-size: 1.45rem; margin-bottom: .75rem; }

	/* Hide old pill chips */
	.frs-mobile-chips { display: none !important; }

	/* Mobile meta grid — 2-col labelled cells, matches desktop meta row */
	.frs-mobile-meta {
		display:               grid;
		grid-template-columns: 1fr 1fr;
		border:                1px solid var(--fr-border);
		border-radius:         10px;
		overflow:              hidden;
		margin-bottom:         1.25rem;
	}
	.frs-mobile-meta__cell {
		display:        flex;
		flex-direction: column;
		gap:            .2rem;
		padding:        .65rem .85rem;
		border-right:   1px solid var(--fr-border);
		border-bottom:  1px solid var(--fr-border);
		background:     #fff;
	}
	.frs-mobile-meta__cell:nth-child(2n)        { border-right: none; }
	.frs-mobile-meta__cell:nth-last-child(-n+2) { border-bottom: none; }
	.frs-mobile-meta__cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
	.frs-mobile-meta__label {
		font-size:      .6rem;
		font-weight:    700;
		text-transform: uppercase;
		letter-spacing: .1em;
		color:          var(--fr-text-light);
	}
	.frs-mobile-meta__value {
		display:     flex;
		align-items: center;
		gap:         .3rem;
		font-size:   .88rem;
		font-weight: 700;
		color:       var(--fr-dark);
	}
	.frs-mobile-meta__value .dashicons { color: var(--fr-primary); font-size: .95rem; width: .95rem; height: .95rem; flex-shrink: 0; }
	.frs-mobile-meta__value--accent    { color: var(--fr-primary); }

	.frs-body {
		grid-template-columns: 1fr;
		grid-template-areas:   "main";
		gap:          1.25rem;
		padding-top:  1rem;
		padding-bottom: 5rem;
	}
	.frs-sidebar { display: none; }

	.frs-mobile-apply      { display: block; margin: 1.5rem 0; }
	.frs-mobile-consultant { display: block; margin-top: 1.5rem; }
	.frs-mobile-share      { display: block; margin-top: 1.25rem; }

	.frs-mobile-apply .frs-apply-btn { width: 100%; justify-content: center; font-size: 1rem; padding: .9rem 1.25rem; }
	.frs-mobile-consultant .fcw { max-width: 100%; border-radius: 12px; }
	.frs-mobile-share__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--fr-primary); margin: 0 0 .65rem; }

	.frs-benefits-grid { grid-template-columns: 1fr 1fr; }

	.frs-sidebar { position: static; }
}

@media (max-width: 480px) {
	.frs-benefits-grid { grid-template-columns: 1fr; }
}

/* ── Mobile sticky bar ────────────────────────────────────────── */
.frs-sticky-apply {
	display:     none;
	position:    fixed;
	bottom:      0;
	left:        0;
	right:       0;
	z-index:     9000;
	background:  var(--fr-dark);
	padding:     .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
	box-shadow:  0 -4px 20px rgba(0,0,0,.2);
	transform:   translateY(100%);
	transition:  transform .3s ease, opacity .3s ease;
	opacity:     0;
}
.frs-sticky-apply.is-visible { display: block; transform: translateY(0); opacity: 1; }
.frs-sticky-apply__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 600px; margin: 0 auto; }
.frs-sticky-apply__info { display: flex; flex-direction: column; gap: .1rem; overflow: hidden; flex: 1; }
.frs-sticky-apply__title { color: #fff; font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frs-sticky-apply__meta  { color: var(--fr-accent); font-size: .75rem; }
.frs-sticky-apply__btn   { flex-shrink: 0; padding: .55rem 1.25rem; font-size: .9rem; border-radius: 8px; }

@media (max-width: 860px) { .frs-sticky-apply { display: block; } }


/* ══════════════════════════════════════════════════════════════
   MOBILE ≤ 860px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

	.frs-body {
		grid-template-columns: 1fr;
		grid-template-areas:   "main";
		gap:          1.25rem;
		padding-top:  1rem;
		padding-bottom: 5rem;
	}

	.frs-sidebar { display: none; }

	.frs-mobile-chips      { display: flex; }
	.frs-mobile-apply      { display: block; margin: 1.5rem 0; }
	.frs-mobile-consultant { display: block; margin-top: 1.5rem; }
	.frs-mobile-share      { display: block; margin-top: 1.25rem; }

	/* Mobile chip pills */
	.frs-mobile-chips {
		flex-wrap:  wrap;
		gap:        .4rem .45rem;
		margin-top: .6rem;
	}
	.frs-mchip {
		display:      inline-flex;
		align-items:  center;
		gap:          .35rem;
		background:   var(--fr-dark);
		color:        #fff;
		padding:      .38rem .85rem;
		border-radius: 99px;
		font-size:    .8rem;
		font-weight:  600;
		line-height:  1.2;
	}
	.frs-mchip--salary {
		background: var(--fr-primary);
	}
	.frs-mchip .dashicons {
		font-size: .85rem;
		width:     .85rem;
		height:    .85rem;
		opacity:   .8;
	}

	/* Mobile full-width apply button */
	.frs-mobile-apply .frs-apply-btn {
		width:           100%;
		justify-content: center;
		font-size:       1rem;
		padding:         .9rem 1.25rem;
	}

	/* Mobile consultant */
	.frs-mobile-consultant .fcw { max-width: 100%; border-radius: 12px; }

	.frs-mobile-share__label {
		font-size:      .72rem;
		font-weight:    700;
		text-transform: uppercase;
		letter-spacing: .09em;
		color:          var(--fr-primary);
		margin:         0 0 .65rem;
	}

	.frs-sidebar { position: static; }
}

/* ── Mobile sticky apply bar ─────────────────────────────────── */
.frs-sticky-apply {
	display:     none;
	position:    fixed;
	bottom:      0;
	left:        0;
	right:       0;
	z-index:     9000;
	background:  var(--fr-dark);
	padding:     .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
	box-shadow:  0 -4px 20px rgba(0,0,0,.2);
	transform:   translateY(100%);
	transition:  transform .3s ease, opacity .3s ease;
	opacity:     0;
}
.frs-sticky-apply.is-visible {
	display:   block;
	transform: translateY(0);
	opacity:   1;
}
.frs-sticky-apply__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	max-width:       600px;
	margin:          0 auto;
}
.frs-sticky-apply__info {
	display:        flex;
	flex-direction: column;
	gap:            .1rem;
	overflow:       hidden;
	flex:           1;
}
.frs-sticky-apply__title {
	color:         #fff;
	font-weight:   700;
	font-size:     .88rem;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}
.frs-sticky-apply__meta  { color: var(--fr-accent); font-size: .75rem; }
.frs-sticky-apply__btn   { flex-shrink: 0; padding: .55rem 1.25rem; font-size: .9rem; border-radius: 8px; }

@media (max-width: 860px) { .frs-sticky-apply { display: block; } }


/* ══════════════════════════════════════════════════════════════
   MOBILE ≤ 860px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

	.frs-body {
		grid-template-columns: 1fr;
		grid-template-areas:   "main";
		gap:          1.25rem;
		padding-top:  1rem;
		padding-bottom: 5rem;
	}

	/* Hide desktop sidebar entirely */
	.frs-sidebar { display: none; }

	/* Show mobile-only blocks */
	.frs-mobile-chips    { display: flex; }
	.frs-mobile-apply    { display: block; margin: 1.5rem 0; }
	.frs-mobile-consultant { display: block; margin-top: 1.5rem; }
	.frs-mobile-share    { display: block; margin-top: 1.25rem; }

	/* Mobile chips — pill badges */
	.frs-mobile-chips {
		flex-wrap:   wrap;
		gap:         .4rem .5rem;
		margin-top:  .5rem;
	}

	.frs-mchip {
		display:      inline-flex;
		align-items:  center;
		gap:          .35rem;
		background:   var(--fr-dark);
		color:        #fff;
		padding:      .35rem .8rem;
		border-radius: 99px;
		font-size:    .78rem;
		font-weight:  600;
		line-height:  1.2;
	}
	.frs-mchip--salary {
		background: var(--fr-primary);
	}
	.frs-mchip .dashicons {
		font-size: .85rem;
		width:     .85rem;
		height:    .85rem;
		opacity:   .8;
	}

	/* Mobile apply button full-width */
	.frs-mobile-apply .frs-apply-btn {
		width:           100%;
		justify-content: center;
		font-size:       1rem;
		padding:         .85rem 1.25rem;
	}

	/* Mobile consultant compact horizontal */
	.frs-mobile-consultant .fcw { max-width: 100%; border-radius: 10px; }

	/* Mobile share label */
	.frs-mobile-share__label {
		font-size:      .75rem;
		font-weight:    700;
		text-transform: uppercase;
		letter-spacing: .08em;
		color:          var(--fr-primary);
		margin:         0 0 .6rem;
	}

	/* Sidebar position reset (not needed but safety) */
	.frs-sidebar { position: static; max-height: none; overflow-y: visible; }
}

/* ── Mobile sticky apply bar ─────────────────────────────────── */
.frs-sticky-apply {
	display:        none;
	position:       fixed;
	bottom:         0;
	left:           0;
	right:          0;
	z-index:        9000;
	background:     var(--fr-dark);
	padding:        .75rem 1.25rem;
	padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
	box-shadow:     0 -4px 20px rgba(0,0,0,.2);
	transform:      translateY(100%);
	transition:     transform .3s ease, opacity .3s ease;
	opacity:        0;
}
.frs-sticky-apply.is-visible {
	display:   block;
	transform: translateY(0);
	opacity:   1;
}
.frs-sticky-apply__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	max-width:       600px;
	margin:          0 auto;
}
.frs-sticky-apply__info {
	display:        flex;
	flex-direction: column;
	gap:            .1rem;
	overflow:       hidden;
	flex:           1;
}
.frs-sticky-apply__title {
	color:         #fff;
	font-weight:   700;
	font-size:     .88rem;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}
.frs-sticky-apply__meta {
	color:     var(--fr-accent);
	font-size: .75rem;
}
.frs-sticky-apply__btn {
	flex-shrink:   0;
	padding:       .55rem 1.25rem;
	font-size:     .9rem;
	border-radius: 8px;
}

@media (max-width: 860px) {
	.frs-sticky-apply { display: block; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE  ≤ 860px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

	/* Single column — sidebar disappears, sticky bar takes over CTA */
	.frs-body {
		grid-template-columns: 1fr;
		grid-template-areas:   "main";
		gap:          1.5rem;
		padding-top:  1.25rem;
		padding-bottom: 5rem; /* room for sticky bar */
	}

	/* Sidebar hidden — all its content duplicated in mobile blocks */
	.frs-sidebar { display: none; }

	/* Mobile meta strip visible */
	.frs-mobile-strip { display: block; }

	/* Mobile inline blocks visible */
	.frs-mobile-consultant,
	.frs-mobile-share { display: block; margin-top: 1.5rem; }

	.frs-mobile-share__label {
		font-size:   .8rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .07em;
		color:       var(--fr-primary);
		margin:      0 0 .6rem;
	}

	/* Mobile consultant — already horizontal by default, just expand */
	.frs-mobile-consultant .fcw { max-width: 100%; }

	/* Sticky apply bar */
	.frs-sticky-apply { display: block; }
	.frs-sticky-apply.is-visible {
		display:   block;
		transform: translateY(0);
		opacity:   1;
	}
}