/* Career Listings plugin — "Apply for this position" section overrides */

.career-listings-application-section h2 {
	text-align: center;
}

.career-listings-application-form {
	max-width: 600px;
	margin: 0 auto;
}

.career-listings-application-form .df-form-wrap {
	text-align: left;
}

.career-listings-application-form .df-field-file {
	border: 1.5px dashed var( --career-listings-border, #d4e0ed );
	border-radius: 16px;
	padding: 24px 20px;
	background: var( --career-listings-surface, #ffffff );
	text-align: center;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.career-listings-application-form .df-field-file:hover,
.career-listings-application-form .df-field-file:focus-within {
	border-color: var( --career-listings-primary, #0084ff );
	background: var( --career-listings-panel, #f2f8ff );
}

.career-listings-application-form .df-file-input {
	display: inline-block;
	max-width: 100%;
	font-size: 13px;
	color: var( --career-listings-muted, #5e6c8d );
}

.career-listings-application-form .df-file-input::file-selector-button {
	margin-right: 14px;
	padding: 10px 22px;
	border: none;
	border-radius: 25px;
	background: var( --career-listings-primary, #0084ff );
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.career-listings-application-form .df-file-input::file-selector-button:hover {
	opacity: 0.85;
}

.career-listings-application-form .df-file-hint {
	margin: 12px 0 0;
	font-size: 12px;
	color: var( --career-listings-muted, #5e6c8d );
}

.career-listings-application-form .df-field-file .df-field-error {
	margin-top: 8px;
}

/*
 * Matches the site's other Delveant forms (.contact-submit-button .df-submit-btn
 * in style.css), but scoped by DOM structure instead of the submit field's
 * "CSS Class" setting — that setting lives in the Delveant Form Suite admin
 * builder and gets wiped every time the form is re-saved there, since the
 * builder always re-serializes the whole field list. Styling it here means
 * the button keeps its design regardless of what happens in wp-admin.
 */
.career-listings-application-form .df-submit-btn {
	width: 100%;
	border: 1px solid #c7d7e9;
	background: var( --career-listings-primary, #0084ff );
	border-radius: 25px;
	font-weight: 700;
	padding: 14px 35px;
	text-transform: uppercase;
	gap: 0;
}

.career-listings-application-form .df-submit-btn:hover {
	box-shadow: none;
	background: var( --career-listings-primary, #0084ff );
}

.career-listings-application-form .df-submit-btn::after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url( ../images/arrow-right.svg ) no-repeat;
	margin-left: 10px;
	filter: brightness( 0 ) saturate( 100% ) invert( 100% ) sepia( 8% ) saturate( 2344% ) hue-rotate( 213deg ) brightness( 110% ) contrast( 106% );
	vertical-align: middle;
	transition: all ease-in-out 0.3s;
}

.career-listings-application-form .df-submit-btn:hover::after {
	width: 0;
}

@media screen and ( max-width: 767px ) {
	.career-listings-application-form {
		max-width: 100%;
	}

	.career-listings-application-form .df-file-input {
		display: block;
	}

	.career-listings-application-form .df-file-input::file-selector-button {
		display: block;
		width: 100%;
		margin: 0 0 10px;
	}
}