/**
 * Flex Recruit – application modal + RecruitNow form component overrides
 * Part of the per-feature CSS split. Loaded conditionally by Plugin::enqueue_frontend_assets().
 */

/* ── 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 */
.fr-modal input[type="checkbox"],
.fr-enrollment input[type="checkbox"],
.job-application-container 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);
}

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

.fr-modal input[type="checkbox"]:checked,
.fr-enrollment input[type="checkbox"]:checked,
.job-application-container input[type="checkbox"]:checked {
	background:   var(--fr-primary);
	border-color: var(--fr-primary);
}

.fr-modal input[type="checkbox"]:checked::before,
.fr-enrollment input[type="checkbox"]:checked::before,
.job-application-container 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%; }
}

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

/* ── Trigger visibility guard ─────────────────────────────────── */
/* The RecruitNow form script hides page-level apply buttons via inline
   styles when its form mounts. While the modal is open that is fine (and
   arguably desirable); once it is closed, our triggers MUST be visible.
   !important stylesheet rules beat inline styles, so no JS timing race
   can leave the buttons hidden. */
body:not(.fr-modal-open) .fr-modal-trigger {
	display:    inline-flex !important;
	visibility: visible !important;
	opacity:    1 !important;
}

/* ── 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.4rem 1.5rem 1.3rem;
	background:      var(--fr-dark);
	color:           #fff;
	flex-shrink:     0;
}

.fr-modal__eyebrow {
	display:        block;
	font-size:      .62rem;
	font-weight:    700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color:          var(--fr-primary);
	margin-bottom:  .4rem;
}

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

/* Meta row — horizontal items separated by vertical lines */
.fr-modal__chips {
	display:               grid;
	grid-template-columns: repeat(2, auto);
	justify-content:       start;
	gap:                   .45rem 1.5rem;
	overflow:              visible;
}

.fr-modal__chips .fr-chip {
	display:       inline-flex;
	align-items:   center;
	gap:           .3rem;
	background:    transparent;
	color:         rgba(255,255,255,.7);
	padding:       0;
	margin:        0;
	border:        none;
	border-radius: 0;
	font-size:     .8rem;
	font-weight:   400;
	line-height:   1.4;
	white-space:   nowrap;
	cursor:        default;
}

.fr-modal__chips .fr-chip--accent {
	color: #fff;
}

.fr-modal__chips .fr-chip .dashicons {
	font-size:   .85rem;
	width:       .85rem;
	height:      .85rem;
	flex-shrink: 0;
	color:       var(--fr-primary);
	opacity:     1;
}

@media (min-width: 600px) {
	.fr-modal__chips {
		display:     flex;
		flex-wrap:   nowrap;
		gap:         0;
	}
	.fr-modal__chips .fr-chip {
		padding-right: 1rem;
		margin-right:  1rem;
		border-right:  1px solid rgba(255,255,255,.15);
	}
	.fr-modal__chips .fr-chip:last-child {
		border-right: none;
		padding-right: 0;
		margin-right: 0;
	}
}

/* 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;
}

.fr-modal__form-wrap .rnButton,
.fr-modal__form-wrap .btn-close-vacature {
	background:    var(--fr-primary) !important;
	color:         #fff !important;
	border:        none !important;
	box-shadow:    none !important;
	border-radius: var(--fr-radius) !important;
	font-size:     .88rem !important;
	padding:       .45rem .9rem !important;
}

/* ── Footer ───────────────────────────────────────────────────── */
.fr-modal .fr-modal__footer {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
	padding:     .85rem 1.5rem;
	border-top:  1px solid rgba(0,0,0,.06);
	background:  #fff;
}

/* The RecruitNow script injects its own stylesheet at runtime, AFTER ours,
   with generic button rules (the teal "Selecteer een bestand" look). Our
   modal chrome must not be repaintable by it — hence the explicit values
   and !important on the contested properties, same approach as the
   enrollment overrides. */
.fr-modal .fr-modal__back-btn {
	display:     inline-flex !important;
	align-items: center;
	gap:         .35rem;
	background:  transparent !important;
	border:      none !important;
	box-shadow:  none !important;
	color:       var(--fr-text-light) !important;
	font-size:   .85rem !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	padding:     .3rem 0 !important;
	margin:      0 !important;
	border-radius: 0 !important;
	cursor:      pointer;
	transition:  color var(--fr-transition);
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.fr-modal .fr-modal__back-btn:hover {
	background: transparent !important;
	color:      var(--fr-dark) !important;
}

.fr-modal .fr-modal__back-btn:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--fr-primary) 30%, transparent) !important;
	border-radius: 3px !important;
}

.fr-modal .fr-modal__back-btn .dashicons {
	font-size: .95rem;
	width:     .95rem;
	height:    .95rem;
	opacity:   .6;
}

/* ── 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.1rem 1.1rem .95rem; }
	.fr-modal__title  { font-size: 1rem; margin-bottom: .75rem; }
	.fr-modal__form-wrap { padding: 1.25rem; }
	.fr-modal .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);
}