/**
 * Flex Recruit – listing: job cards, filter bar, pagination, active chips
 * Part of the per-feature CSS split. Loaded conditionally by Plugin::enqueue_frontend_assets().
 */

/* ── 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);
	border-color: var(--fr-dark);
}

.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 color-mix(in srgb, var(--fr-dark) 7%, transparent);
	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 color-mix(in srgb, var(--fr-dark) 6%, transparent);
	background:     transparent;
	font-size:      inherit;
	font-weight:    inherit;
	color:          inherit;
	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,
.flex-recruit-loadmore,
.frs-sticky-apply__btn {
	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,
.flex-recruit-loadmore:hover,
.frs-sticky-apply__btn:hover {
	background: var(--fr-primary-dark);
	color: #fff;
}

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

.flex-recruit-link:focus-visible,
.rnButton:focus-visible,
.btn-filter-submit:focus-visible,
.flex-recruit-loadmore:focus-visible,
.frs-sticky-apply__btn: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-dark);
	border-radius:   12px 12px 0 0;
}

.fr-filter-panel__title {
	font-size:      .78rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color:          #fff;
}

.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:       rgba(255,255,255,.75) !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],
/* ── 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-salary-chips {
	display:   flex;
	flex-wrap: wrap;
	gap:       .5rem;
	padding:   .25rem 0 .5rem;
}

.fr-salary-chip {
	display:       inline-flex;
	align-items:   center;
	padding:       .35rem .75rem;
	font-size:     .82rem;
	font-weight:   500;
	color:         #fff;
	background:    var(--fr-primary);
	border:        1.5px solid var(--fr-primary);
	border-radius: 999px;
	cursor:        pointer;
	transition:    border-color .15s, background .15s, color .15s;
	white-space:   nowrap;
	opacity:       .75;
}

.fr-salary-chip:hover {
	border-color: var(--fr-dark);
	background:   var(--fr-dark);
	color:        #fff;
	opacity:      1;
}

.fr-salary-chip--active,
.fr-salary-chip[aria-pressed="true"] {
	background:   var(--fr-dark);
	border-color: var(--fr-dark);
	color:        #fff;
	font-weight:  600;
	opacity:      1;
}

.fr-chip-count {
	font-size:   .72em;
	opacity:     .75;
	margin-left: .15em;
}

/* ── Results header ───────────────────────────────────────── */
.fr-results-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             .5rem;
	margin-bottom:   1rem;
	flex-wrap:       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 */
#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); }

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

/* ── Active filter chips ──────────────────────────────────── */
#fr-active-chips {
	display:    flex;
	flex-wrap:  wrap;
	gap:        .4rem;
	margin-bottom: .75rem;
}
#fr-active-chips:empty { display: none; }

#fr-active-chips .fr-chip {
	display:       inline-flex;
	align-items:   center;
	gap:           .3rem;
	background:    color-mix(in srgb, var(--fr-primary) 10%, #fff);
	border:        1px solid color-mix(in srgb, var(--fr-primary) 35%, transparent);
	color:         var(--fr-primary);
	border-radius: 99px;
	font-size:     .78rem;
	font-weight:   700;
	padding:       .25rem .65rem .25rem .55rem;
	cursor:        pointer;
	transition:    background var(--fr-transition), border-color var(--fr-transition);
}
#fr-active-chips .fr-chip:hover {
	background:   color-mix(in srgb, var(--fr-primary) 18%, #fff);
	border-color: var(--fr-primary);
}
.fr-chip__remove {
	display:     inline-flex;
	align-items: center;
	justify-content: center;
	width:       14px;
	height:      14px;
	border-radius: 50%;
	background:  color-mix(in srgb, var(--fr-primary) 20%, transparent);
	font-size:   10px;
	line-height: 1;
	margin-left: .1rem;
}