/**
 * Job Application Form Widget styles.
 */

.job__form {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Base Form Grid Setup */
.job__form .wpcf7 form {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 0 24px;
}

/* Normalize paragraphs inside CF7 */
.job__form .wpcf7 p {
	margin: 0;
	display: flex;
	flex-direction: column;
	font-size: 0.9rem;
	font-weight: 700;
}


.job__form .wpcf7 p.full-width:last-of-type {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}



/* Force Full Width for designated elements */
.job__form .wpcf7 p.full-width,
.job__form .wpcf7 p:has(input[type="submit"]),
.job__form .wpcf7 .wpcf7-response-output {
	grid-column: 1 / -1;
}

/* Labels */
.job__form .wpcf7 label {
	font-size: 12.5px;
	color: #5d636b;
	display: flex;
	flex-direction: row;
	margin-bottom: -20px;
}

/* Red Asterisk */
.job__form .wpcf7 label .required-ast {
	color: #d32f2f;
}

/* Input Fields & Textarea */
.job__form .wpcf7 input[type="text"],
.job__form .wpcf7 input[type="email"],
.job__form .wpcf7 input[type="tel"],
.job__form .wpcf7 textarea {
	width: 100%;
	border: 1px solid #cfd3d8;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 15px;
	background: #ffffff;
	color: #333333;
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: none;
}

.job__form .wpcf7 textarea {
	/* min-height: 140px; */
	resize: vertical;
}

/* Focus States */
.job__form .wpcf7 input:focus,
.job__form .wpcf7 textarea:focus {
	outline: none;
	border-color: #009a17;
	box-shadow: 0 0 0 2px rgba(0, 154, 23, 0.1);
}

/* ============================================
   CUSTOM FILE UPLOAD DROPZONE
   ============================================ */
.custom-file-upload {
	position: relative;
	display: block;
	width: 100%;
	border: 1px dashed #b0b8c4;
	border-radius: 8px;
	background-color: #ffffff;
	transition: background-color 0.3s ease;
	overflow: hidden;
}

.custom-file-upload:hover {
	background-color: #f8fafc;
}

/* 🟢 NEW: Override CF7's default wrapper so it covers the whole box */
.custom-file-upload .wpcf7-form-control-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 10;
}

/* Make the native CF7 file input invisible but cover the whole wrapper */
.custom-file-upload .wpcf7-form-control-wrap input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	display: block;
}

/* The visible UI elements inside the box */
.upload-ui {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 30px 20px;
	/* Added padding back to give the box height */
	pointer-events: none;
	/* 🟢 Prevents the text/SVG from blocking the click */
}

.upload-icon {
	margin-bottom: -10px;
}

.upload-title {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #4a4a4a;
	margin-bottom: -10px;
}

.upload-subtitle {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #828282;
}

/* Validation styling inside the dropzone */
.custom-file-upload .wpcf7-not-valid-tip {
	position: relative;
	z-index: 20;
	text-align: center;
}

/* ============================================
   SUBMIT BUTTON
   ============================================ */
.job__form .wpcf7 .wpcf7-submit {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #009a17;
	color: #ffffff;
	border: none;
	border-radius: 100px;
	/* Pill shape */
	padding: 0.7em 4rem;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	width: max-content;
	/* Aligns to left like the image, not 100% width */
	transition:
		background-color 0.3s ease,
		transform 0.3s ease;
}

.job__form .wpcf7 .wpcf7-submit:hover,
.job__form .wpcf7 .wpcf7-submit:focus {
	background-color: #007a1d;
	transform: translateY(-2px);
}

/* CF7 Messages */
.job__form .wpcf7 .wpcf7-not-valid-tip {
	font-size: 13px;
	margin-top: 5px;
	color: #d32f2f;
}

.job__form .wpcf7 .wpcf7-response-output {
	margin: 15px 0 0;
	border-radius: 8px;
	font-size: 14px;
}



@media (min-width:640px) {}

@media (min-width:768px) {
	.job__form .wpcf7 p.full-width:last-of-type {
		align-items: start;
	}
}

@media (min-width:1024px) {

	.job__form .wpcf7 form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.custom-file-upload {
		width: 50%;
	}


}

@media (min-width:1280px) {}

@media (min-width:1536px) {}