/*
 * Contact Form — Contact Us page section.
 *
 * The right-hand "Get in Touch" form (.contact-form__*) is a SEPARATE,
 * self-contained component from the sitewide Request a Demo popup's own
 * styles (assets/css/global/demo-request-modal.css) — no shared classes,
 * no dependency between the two stylesheets, per this build's "do not
 * modify the Request a Demo form" requirement.
 *
 * @package Greenova
 */

.contact-form-section {
	background-color: #FFFFFF;
	padding-block:     100px;
}

.contact-form-section__inner {
	max-width:      1440px;
	margin:         0 auto;
	padding-inline: 80px;
	display:        flex;
	align-items:    flex-start;
}

.contact-form-section__col--left {
	flex:      0 0 42%;
	width:     42%;
	min-width: 0;
}

.contact-form-section__col--right {
	flex:      0 0 58%;
	width:     58%;
	min-width: 0;
}

.contact-form-section__divider {
	flex-shrink:   0;
	align-self:    stretch;
	width:         0;
	margin-inline: 48px;
	border-left:   1px dashed #D6D3D1;
}

/* =============================================================================
   Left column — dynamic content (custom fields)
   ============================================================================= */

.contact-form-section__heading {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   56px;
	font-weight: 400;
	line-height: 63px;
	color:       #000000;
	max-width:   482px;
	margin:      0;
}

.contact-form-section__description {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   18px;
	font-weight: 400;
	line-height: 28.8px;
	color:       #000000;
	max-width:   626px;
	margin-top:  32px;
}

.contact-form-section__description p {
	margin: 0 0 16px;
}

.contact-form-section__description > *:last-child {
	margin-bottom: 0;
}

.contact-form-section__cta {
	margin-top: 40px;
}

/* =============================================================================
   Right column heading/description
   ============================================================================= */

.contact-form-section__form-heading {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   32px;
	font-weight: 500;
	line-height: 52.8px;
	color:       #000000;
	margin:      0;
}

.contact-form-section__form-description {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 24px;
	color:       #000000;
	margin:      0 0 32px;
}

/* =============================================================================
   Contact form — own field system, independent of the Request a Demo popup.
   ============================================================================= */

.contact-form__row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	column-gap:            24px;
	row-gap:               20px;
	margin-bottom:         20px;
}

.contact-form__field {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	margin-bottom:  20px;
}

.contact-form__row .contact-form__field {
	margin-bottom: 0;
}

.contact-form__field label,
.contact-form__checkbox-legend {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   14px;
	font-weight: 500;
	color:       #111827;
}

.contact-form__required {
	color: #FF3B30;
}

.contact-form__field input[type="text"],
.contact-form__field input[type="tel"],
.contact-form__field input[type="email"],
.contact-form__field textarea {
	font-family:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:     16px;
	font-weight:   400;
	color:         #000000;
	background:    #FFFFFF;
	border:        1px solid #D6D3D1;
	border-radius: 10px;
	height:        56px;
	padding:       16px;
	box-sizing:    border-box;
	width:         100%;
	transition:    border-color 0.15s ease;
}

.contact-form__field textarea {
	height:     108px;
	resize:     vertical;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	color:       #A3A3A3;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
	outline:      none;
	border-color: #219FD6;
}

.contact-form__field.has-error label {
	color: #FF3B30;
}

.contact-form__field.has-error input,
.contact-form__field.has-error textarea {
	border-color: #FF3B30;
}

.contact-form__field-error {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   14px;
	color:       #FF3B30;
	display:     none;
}

.contact-form__field.has-error .contact-form__field-error {
	display: block;
}

.contact-form__error {
	font-family:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:        14px;
	color:            #B42318;
	background-color: #FEF3F2;
	border:           1px solid #FDA29B;
	border-radius:    10px;
	padding:          10px 14px;
	margin-bottom:    20px;
}

/* --- Custom dropdown (Industry / Company Size) --- */

.contact-form__dropdown {
	position: relative;
}

.contact-form__dropdown-toggle {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	width:            100%;
	height:           56px;
	padding:          16px;
	background:       #FFFFFF;
	border:           1px solid #D6D3D1;
	border-radius:    10px;
	box-sizing:       border-box;
	font-family:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:        16px;
	font-weight:       400;
	color:            #A3A3A3;
	cursor:           pointer;
	transition:       border-color 0.15s ease;
}

.contact-form__dropdown-toggle.has-value {
	color: #000000;
}

.contact-form__dropdown.is-open .contact-form__dropdown-toggle {
	border-color: #7FB04F;
}

.contact-form__dropdown-icon {
	flex-shrink: 0;
	transition:  transform 0.15s ease;
}

.contact-form__dropdown.is-open .contact-form__dropdown-icon {
	transform: rotate(180deg);
}

.contact-form__dropdown-menu {
	position:      absolute;
	z-index:       5;
	top:           calc(100% + 6px);
	left:          0;
	right:         0;
	margin:        0;
	padding:       6px;
	list-style:    none;
	background:    #FFFFFF;
	border:        1px solid #E5E7EB;
	border-radius: 10px;
	box-shadow:    0 12px 32px rgba(0, 0, 0, 0.12);
	max-height:    240px;
	overflow-y:    auto;
}

.contact-form__dropdown-option {
	font-family:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:     15px;
	font-weight:   400;
	color:         #111827;
	padding:       10px 12px;
	border-radius: 8px;
	cursor:        pointer;
	transition:    background-color 0.12s ease;
}

.contact-form__dropdown-option:hover,
.contact-form__dropdown-option.is-active {
	background-color: rgba(33, 159, 214, 0.08);
}

/* --- Checkboxes --- */

.contact-form__field--checkboxes {
	gap: 12px;
}

.contact-form__checkbox {
	display:     flex;
	align-items: center;
	gap:         10px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 500;
	color:       #334156;
	cursor:      pointer;
}

.contact-form__checkbox input {
	width:        18px;
	height:       18px;
	flex-shrink:  0;
	accent-color: #219FD6;
	cursor:       pointer;
}

/* --- Submit button --- */

.contact-form__submit {
	position:         relative;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            100%;
	height:           56px;
	background-color: #3A83F6;
	color:            #FFFFFF;
	font-family:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:        18px;
	font-weight:      600;
	border:           none;
	border-radius:    8px;
	margin-top:       8px;
	cursor:           pointer;
	transition:       background-color 0.2s ease, opacity 0.2s ease;
}

.contact-form__submit:hover {
	background-color: #2f6fd6; /* Slightly darker blue, per spec. */
}

.contact-form__submit:active {
	background-color: #245bb3;
}

.contact-form__submit:disabled {
	opacity: 0.7;
	cursor:  not-allowed;
}

.contact-form__spinner {
	display:           none;
	width:             16px;
	height:            16px;
	margin-left:       10px;
	border:            2px solid rgba(255, 255, 255, 0.4);
	border-top-color:  #FFFFFF;
	border-radius:     50%;
	animation:         contact-form-spin 0.7s linear infinite;
}

.contact-form__submit.is-loading .contact-form__spinner {
	display: inline-block;
}

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

@media ( prefers-reduced-motion: reduce ) {
	.contact-form__spinner {
		animation: none;
	}
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 1199.98px ) {
	.contact-form-section__inner {
		padding-inline: 48px;
	}

	.contact-form-section__divider {
		margin-inline: 32px;
	}

	.contact-form-section__heading {
		font-size:   2.5rem;
		line-height: 1.15;
		max-width:   none;
	}
}

@media ( max-width: 991.98px ) {
	.contact-form-section {
		padding-block: 64px;
	}

	.contact-form-section__inner {
		flex-direction: column;
		padding-inline: 32px;
	}

	.contact-form-section__col--left,
	.contact-form-section__col--right {
		flex:  1 1 auto;
		width: 100%;
	}

	.contact-form-section__divider {
		width:         100%;
		height:        0;
		align-self:    stretch;
		margin-inline: 0;
		margin-block:  48px;
		border-left:   none;
		border-top:    1px dashed #D6D3D1;
	}

	.contact-form-section__description {
		max-width: none;
	}
}

@media ( max-width: 575.98px ) {
	.contact-form-section {
		padding-block: 48px;
	}

	.contact-form-section__inner {
		padding-inline: 20px;
	}

	.contact-form-section__heading {
		font-size: 1.75rem;
	}

	.contact-form-section__form-heading {
		font-size:   1.5rem;
		line-height: 1.25;
	}

	.contact-form__row {
		grid-template-columns: 1fr;
	}
}