/**
 * Contact Form styles - Figma Design Specs
 *
 * @package NexioEducation
 */

.contact-form-section {
	padding: 144px 142px;
	max-width: 1440px;
	margin: 0 auto;
	background: #fffefa;
}

.contact-form-columns {
	display: flex;
	gap: 142px;
	align-items: flex-start;
}

.contact-form-sidebar {
	flex: 0 0 auto;
	width: 448px;
	max-width: none;
}

.contact-form-main {
	flex: 0 0 566px;
	width: 566px;
}

/* Breadcrumb */
.contact-breadcrumb {
	font-family: "Manrope", sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 18px;
	color: #064d8e;
	margin: 0 0 16px;
}

.contact-breadcrumb a {
	color: #064d8e;
	text-decoration: none;
}

.contact-breadcrumb a:hover {
	text-decoration: underline;
}

/* Contact Details */
.contact-details {
	margin-bottom: 24px;
}

.contact-details-label {
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: #064d8e;
	margin: 0 0 16px;
}

.contact-details-item {
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #064d8e;
	margin: 0 0 16px;
}

.contact-details-item:last-child {
	margin-bottom: 0;
}

.contact-details-item a {
	color: #064d8e;
	text-decoration: none;
}

.contact-details-item a:hover {
	text-decoration: underline;
}

/* Hours */
.contact-hours {
	margin-bottom: 0;
}

.contact-hours-label {
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: #064d8e;
	margin: 0 0 16px;
}

.contact-hours-item {
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #064d8e;
	margin: 0 0 16px;
}

.contact-hours-item:last-child {
	margin-bottom: 0;
}

/* CF7 Form Styling */
.contact-form-main .wpcf7 {
	width: 100%;
}

.contact-form-main .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contact-form-main .wpcf7-form p {
	margin: 0;
}

.contact-form-main .wpcf7-form label,
.contact-form-main .wpcf7-form p > label,
.contact-form-main .wpcf7-form .form-row label,
.contact-form-main .wpcf7-form .form-row-3 label {
	display: block;
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: #064d8e;
	margin-bottom: 8px !important;
}

/* CF7 label text styling (when label wraps input) */
.contact-form-main .wpcf7-form p {
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: #064d8e;
}

.contact-form-main .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

.contact-form-main .wpcf7-form input[type="text"],
.contact-form-main .wpcf7-form input[type="email"],
.contact-form-main .wpcf7-form input[type="tel"],
.contact-form-main .wpcf7-form select,
.contact-form-main .wpcf7-form textarea {
	width: 100%;
	height: 42px;
	padding: 9px 8px;
	border: 1px solid rgba(172, 175, 194, 0.6);
	border-radius: 6px;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	color: #333;
	background: rgba(241, 241, 241, 0.5);
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.contact-form-main .wpcf7-form textarea {
	height: 175px;
	padding: 12px;
	resize: vertical;
}

.contact-form-main .wpcf7-form input[type="text"]:focus,
.contact-form-main .wpcf7-form input[type="email"]:focus,
.contact-form-main .wpcf7-form input[type="tel"]:focus,
.contact-form-main .wpcf7-form select:focus,
.contact-form-main .wpcf7-form textarea:focus {
	outline: none;
	border-color: #064d8e;
}

.contact-form-main .wpcf7-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 42px;
	padding: 9px 36px 9px 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.46967 8.96967C6.76256 8.67678 7.23744 8.67678 7.53033 8.96967L12 13.4393L16.4697 8.96967C16.7626 8.67678 17.2374 8.67678 17.5303 8.96967C17.8232 9.26256 17.8232 9.73744 17.5303 10.0303L12.5303 15.0303C12.3897 15.171 12.1989 15.25 12 15.25C11.8011 15.25 11.6103 15.171 11.4697 15.0303L6.46967 10.0303C6.17678 9.73744 6.17678 9.26256 6.46967 8.96967Z' fill='%23686868'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 24px 24px;
	cursor: pointer;
}

/* Form row layouts */
.contact-form-main .form-row {
	display: flex;
	gap: 24px;
}

.contact-form-main .form-row > p {
	margin: 0;
}

/* Email field: 330px, Relationship: 212px */
.contact-form-main .form-row > p:first-child {
	flex: 0 0 330px;
	width: 330px;
}

.contact-form-main .form-row > p:last-child {
	flex: 0 0 212px;
	width: 212px;
}

.contact-form-main .form-row-3 {
	display: flex;
	gap: 24px;
}

.contact-form-main .form-row-3 > p {
	margin: 0;
}

/* Grade: 94px, Graduation: 212px, State: 212px */
.contact-form-main .form-row-3 > p:nth-child(1) {
	flex: 0 0 94px;
	width: 94px;
}

.contact-form-main .form-row-3 > p:nth-child(2) {
	flex: 0 0 212px;
	width: 212px;
}

.contact-form-main .form-row-3 > p:nth-child(3) {
	flex: 0 0 212px;
	width: 212px;
}

/* Buttons */
.contact-form-main .wpcf7-form .form-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0;
}

/* Submit button wrapper */
.contact-form-main .wpcf7-form > p:last-of-type {
	margin-top: 0;
}

.contact-form-main .wpcf7-form input[type="submit"],
.contact-form-main .wpcf7-form .wpcf7-submit,
.contact-form-main .wpcf7-form button[type="submit"] {
	background: #064d8e;
	color: #fffefa;
	border: none;
	padding: 18px 64px;
	border-radius: 30px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 19.2px;
	cursor: pointer;
	transition: background 0.2s;
}

.contact-form-main .wpcf7-form input[type="submit"]:hover,
.contact-form-main .wpcf7-form button[type="submit"]:hover {
	background: #053a6a;
}

/* Hide default CF7 spinner */
.contact-form-main .wpcf7-spinner {
	display: none !important;
}

/* Loading state - spinner inside button */
.contact-form-main .wpcf7-form .wpcf7-submit.is-loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.contact-form-main .wpcf7-form .wpcf7-submit.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.contact-form-main .wpcf7-form input[type="reset"],
.contact-form-main .wpcf7-form button[type="reset"],
.contact-form-main .wpcf7-form .btn-clear {
	background: transparent;
	color: #064d8e;
	border: 1px solid rgba(6, 77, 142, 0.25);
	padding: 18px 64px;
	border-radius: 30px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.contact-form-main .wpcf7-form input[type="reset"]:hover,
.contact-form-main .wpcf7-form button[type="reset"]:hover,
.contact-form-main .wpcf7-form .btn-clear:hover {
	background: rgba(6, 77, 142, 0.1);
}

/* Validation */
.contact-form-main .wpcf7-not-valid {
	border-color: #dc3545 !important;
}

.contact-form-main .wpcf7-not-valid-tip {
	color: #dc3545;
	font-size: 12px;
	margin-top: 4px;
}

/* Form response - appears under buttons */
.contact-form-main .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 18px 32px 18px 18px;
	border-radius: 6px;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 18px;
}

/* Success state - Figma specs */
.contact-form-main .wpcf7 form.sent .wpcf7-response-output {
	background: #ccffce;
	border: 1px solid rgba(48, 255, 69, 0.6);
	color: #000;
}

/* Error/Invalid state - Figma specs */
.contact-form-main .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-main .wpcf7 form.failed .wpcf7-response-output,
.contact-form-main .wpcf7 form.unaccepted .wpcf7-response-output {
	background: #ff4242;
	border: 1px solid rgba(254, 0, 0, 0.6);
	color: #fffefa;
}

/* Styled response layout - Figma specs */
.contact-form-main .wpcf7-response-output.response-styled {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 104px;
	padding: 18px 32px 18px 18px;
}

.contact-form-main .wpcf7-response-output .response-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 391px;
}

.contact-form-main .wpcf7 form.invalid .wpcf7-response-output .response-content,
.contact-form-main .wpcf7 form.failed .wpcf7-response-output .response-content,
.contact-form-main .wpcf7 form.unaccepted .wpcf7-response-output .response-content {
	width: 369px;
}

.contact-form-main .wpcf7-response-output .response-title {
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 28px;
}

.contact-form-main .wpcf7-response-output .response-message {
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
}

.contact-form-main .wpcf7-response-output .response-icon {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
}

.contact-form-main .wpcf7-response-output .response-icon svg {
	width: 64px;
	height: 64px;
}

/* Responsive - Large tablet / small desktop */
@media (max-width: 1350px) {
	.contact-form-section {
		padding: 60px 80px;
	}

	.contact-form-columns {
		gap: 60px;
	}

	.contact-form-sidebar {
		width: auto;
		flex: 1;
	}

	.contact-form-main {
		flex: 0 0 520px;
		width: 566px;
	}
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
	.contact-form-section {
		padding: 50px 60px;
	}

	.contact-form-columns {
		gap: 40px;
	}

	.contact-form-sidebar {
		width: auto;
		flex: 1;
	}

	.contact-form-main {
		flex: 0 0 520px;
		width: 566px;
	}
}

/* Responsive - Tablet portrait */
@media (max-width: 900px) {
	.contact-form-section {
		padding: 40px 24px;
	}

	.contact-form-columns {
		flex-direction: column;
		gap: 40px;
	}

	.contact-form-sidebar {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}

	.contact-form-main {
		flex: 1 1 100%;
		width: 100%;
	}

	.contact-form-main .form-row,
	.contact-form-main .form-row-3 {
		flex-wrap: wrap;
	}

	/* Override fixed widths for tablet - use nth-child to match original selectors */
	.contact-form-main .form-row > p:first-child,
	.contact-form-main .form-row > p:last-child {
		flex: 1 1 calc(50% - 12px);
		width: auto;
		min-width: 140px;
	}

	.contact-form-main .form-row-3 > p:nth-child(1),
	.contact-form-main .form-row-3 > p:nth-child(2),
	.contact-form-main .form-row-3 > p:nth-child(3) {
		flex: 1 1 calc(33% - 16px);
		width: auto;
		min-width: 80px;
	}
}

/* Responsive - Mobile */
@media (max-width: 600px) {
	.contact-form-main .form-row,
	.contact-form-main .form-row-3 {
		flex-direction: column;
		gap: 16px;
	}

	/* Override fixed widths for mobile - full width stacked */
	.contact-form-main .form-row > p:first-child,
	.contact-form-main .form-row > p:last-child,
	.contact-form-main .form-row-3 > p:nth-child(1),
	.contact-form-main .form-row-3 > p:nth-child(2),
	.contact-form-main .form-row-3 > p:nth-child(3) {
		flex: 1 1 100%;
		width: 100%;
		min-width: unset;
	}

	.contact-form-main .wpcf7-form .form-buttons {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	/* Response states mobile */
	.contact-form-main .wpcf7-response-output.response-styled {
		height: auto;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 18px;
		text-align: center;
	}

	.contact-form-main .wpcf7-response-output .response-content,
	.contact-form-main .wpcf7 form.invalid .wpcf7-response-output .response-content,
	.contact-form-main .wpcf7 form.failed .wpcf7-response-output .response-content,
	.contact-form-main .wpcf7 form.unaccepted .wpcf7-response-output .response-content {
		width: 100%;
		align-items: center;
	}

	.contact-form-main .wpcf7-response-output .response-icon {
		width: 48px;
		height: 48px;
	}

	.contact-form-main .wpcf7-response-output .response-icon svg {
		width: 48px;
		height: 48px;
	}

	.contact-form-main .wpcf7-response-output .response-title {
		font-size: 20px;
		line-height: 24px;
	}
}