/* =========================================================
   UPVOTE CAREERS - APPLICATION MODAL / FORM
   Compact enterprise layout
   ========================================================= */

body.ucs-application-modal-open {
	overflow: hidden;
}

.ucs-application-modal,
.ucs-application-modal *,
.ucs-application-modal *::before,
.ucs-application-modal *::after {
	box-sizing: border-box;
}

.ucs-application-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 24px;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	font-family: Helvetica, Arial, sans-serif;

	transition:
		opacity .18s ease,
		visibility .18s ease;
}

.ucs-application-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.ucs-application-modal-backdrop {
	position: absolute;
	inset: 0;

	background: rgba(6, 24, 45, .70);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ucs-application-modal-dialog {
	position: relative;
	z-index: 2;

	width: min(920px, 100%);
	max-height: calc(100vh - 48px);

	overflow-y: auto;

	background: #ffffff;
	border: 1px solid #dfe7f1;
	border-radius: 18px;

	box-shadow:
		0 28px 75px rgba(8, 24, 45, .24);
}

.ucs-application-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;
	padding: 0;

	border: 1px solid #dbe3ec;
	border-radius: 50%;

	background: #ffffff;
	color: #334155;

	font-size: 24px;
	line-height: 1;

	cursor: pointer;

	transition:
		background .18s ease,
		border-color .18s ease,
		color .18s ease;
}

.ucs-application-modal-close:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
}

.ucs-application-modal-header {
	padding: 30px 70px 20px 34px;
}

.ucs-application-eyebrow {
	display: block;
	margin-bottom: 7px;

	color: #2563eb;
	font-size: .70rem;
	font-weight: 800;
	letter-spacing: .09em;
}

.ucs-application-modal-header h2 {
	margin: 0 0 7px;

	color: #0f172a;

	font-family: "Items NormalBold", Helvetica, Arial, sans-serif;
	font-size: 1.9rem;
	line-height: 1.16;
	letter-spacing: -.02em;
}

.ucs-application-modal-header p {
	margin: 0;

	color: #64748b;
	font-size: .90rem;
	line-height: 1.55;
}

.ucs-application-modal-divider {
	height: 1px;
	margin: 0 34px;
	background: #e8edf3;
}

.ucs-application-form-wrap {
	padding: 24px 34px 32px;
}


/* Hide the old "Applying for" box from the CF7 form.
   Job title is now shown directly in the modal heading. */
.ucs-application-selected-job {
	display: none !important;
}


/* Form layout */

.ucs-job-application-form {
	margin: 0;
}

.ucs-application-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px 16px;
}

.ucs-application-field {
	min-width: 0;
}

/* CF7 can wrap individual form controls inside <p>.
   Remove those default paragraph margins. */
.ucs-application-field > p {
	margin: 0 0 10px;
}

.ucs-application-full {
	grid-column: 1 / -1;
}

.ucs-application-field label {
	display: block;
	margin: 0 0 6px;

	color: #334155;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.35;
}

.ucs-application-field input[type="text"],
.ucs-application-field input[type="email"],
.ucs-application-field input[type="tel"],
.ucs-application-field input[type="url"],
.ucs-application-field input[type="file"],
.ucs-application-field textarea {
	width: 100%;
	margin: 0;

	border: 1px solid #d2dce8;
	border-radius: 8px;

	background: #ffffff;
	color: #0f172a;

	font-family: inherit;
	font-size: .88rem;

	box-shadow: none;

	transition:
		border-color .18s ease,
		box-shadow .18s ease;
}

.ucs-application-field input[type="text"],
.ucs-application-field input[type="email"],
.ucs-application-field input[type="tel"],
.ucs-application-field input[type="url"] {
	height: 42px;
	padding: 0 12px;
}

.ucs-application-field textarea {
	min-height: 92px;
	max-height: 150px;
	padding: 10px 12px;
	resize: vertical;
}

.ucs-application-field input[type="file"] {
	min-height: 44px;
	padding: 5px 7px;
	background: #f8fafc;
}

.ucs-application-field input[type="file"]::file-selector-button {
	height: 32px;
	margin-right: 10px;
	padding: 0 12px;

	border: 0;
	border-radius: 6px;

	background: #eaf1fb;
	color: #174780;

	font-family: inherit;
	font-size: .77rem;
	font-weight: 800;

	cursor: pointer;
}

.ucs-application-field input::placeholder,
.ucs-application-field textarea::placeholder {
	color: #94a3b8;
	opacity: 1;
}

.ucs-application-field input:focus,
.ucs-application-field textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59,130,246,.10);
}

.ucs-application-field small {
	display: block;
	margin-top: 5px;

	color: #64748b;
	font-size: .69rem;
	line-height: 1.4;
}


/* Consent + Turnstile */

.ucs-application-consent {
	padding-top: 1px;

	color: #475569;
	font-size: .76rem;
	line-height: 1.45;
}

.ucs-application-consent .wpcf7-list-item {
	margin: 0;
}

.ucs-application-consent label {
	display: flex;
	align-items: flex-start;
	gap: 8px;

	margin: 0;

	font-size: .76rem;
	font-weight: 400;
	line-height: 1.45;
}

.ucs-application-consent input[type="checkbox"] {
	flex: 0 0 auto;

	width: 16px;
	height: 16px;
	margin: 2px 0 0;
}

.ucs-application-field .cf-turnstile,
.ucs-application-field iframe {
	max-width: 100%;
}


/* Submit */

.ucs-application-submit {
	margin-top: 18px;
}

.ucs-application-submit-button {
	width: 100%;
	min-height: 46px;

	padding: 0 20px !important;

	border: 0 !important;
	border-radius: 8px !important;

	background: #1765c1 !important;
	color: #ffffff !important;

	font-family: inherit !important;
	font-size: .88rem !important;
	font-weight: 800 !important;

	box-shadow: none !important;
	cursor: pointer;

	transition:
		background .18s ease,
		transform .18s ease;
}

.ucs-application-submit-button:hover {
	background: #0f55a6 !important;
	transform: translateY(-1px);
}

.ucs-job-application-form .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: .69rem;
}

.ucs-job-application-form .wpcf7-response-output {
	margin: 14px 0 0 !important;
	padding: 9px 11px !important;

	border-radius: 8px;

	font-size: .76rem;
	line-height: 1.45;
}


/* Success state */

.ucs-application-success {
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 64px 34px 68px;

	text-align: center;
}

.ucs-application-success[hidden] {
	display: none !important;
}

.ucs-application-success-mark {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;
	margin-bottom: 18px;

	border-radius: 50%;

	background: #ecfdf5;
	color: #059669;

	font-size: 26px;
	font-weight: 900;
}

.ucs-application-success-kicker {
	margin-bottom: 9px;

	color: #2563eb;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .09em;
}

.ucs-application-success h3 {
	margin: 0 0 10px;

	color: #0f172a;

	font-family: "Items NormalBold", Helvetica, Arial, sans-serif;
	font-size: 1.9rem;
	line-height: 1.15;
}

.ucs-application-success p {
	max-width: 560px;
	margin: 0 0 7px;

	color: #64748b;
	font-size: .92rem;
	line-height: 1.6;
}

.ucs-application-success p strong {
	color: #334155;
}

.ucs-application-success-note {
	font-size: .84rem !important;
}

.ucs-success-close {
	min-height: 42px;

	margin-top: 16px;
	padding: 0 22px;

	border: 0;
	border-radius: 8px;

	background: #1765c1;
	color: #ffffff;

	font-family: inherit;
	font-size: .84rem;
	font-weight: 800;

	cursor: pointer;
}


/* Tablet */

@media only screen and (max-width: 900px) {

	.ucs-application-modal {
		padding: 18px;
	}

	.ucs-application-modal-dialog {
		max-height: calc(100vh - 36px);
	}

	.ucs-application-modal-header {
		padding: 28px 64px 18px 26px;
	}

	.ucs-application-modal-divider {
		margin: 0 26px;
	}

	.ucs-application-form-wrap {
		padding: 22px 26px 28px;
	}
}


/* Mobile */

@media only screen and (max-width: 700px) {

	.ucs-application-modal {
		align-items: flex-start;
		padding: 10px;
	}

	.ucs-application-modal-dialog {
		max-height: calc(100vh - 20px);
		border-radius: 14px;
	}

	.ucs-application-modal-header {
		padding: 25px 52px 16px 18px;
	}

	.ucs-application-modal-header h2 {
		font-size: 1.42rem;
	}

	.ucs-application-modal-divider {
		margin: 0 18px;
	}

	.ucs-application-form-wrap {
		padding: 18px;
	}

	.ucs-application-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ucs-application-full {
		grid-column: auto;
	}

	.ucs-application-success {
		padding: 48px 20px 52px;
	}
}