/* GC — Contact Page: the Fluent Form inside the `.cp-contact` section on /contact/.
 *
 * Same division of labour as assets/quote-form.css. Everything about the SECTION — the two columns, the
 * heading, the four trust chips, the three channel rows, the consultation panel, every colour and size — is
 * edited in Elementor on the "GC — Contact Page" library section. This file only themes the form, because
 * Fluent Forms free has no styler UI. Two things it deliberately does not own:
 *   - the submit button's COLOURS, which are set in Fluent Forms → form #4 → Submit Button → Styles;
 *   - the field labels, options and validation messages, which are in the Fluent Forms editor.
 *
 * Specificity: Fluent Forms' own skin matches at (0,2,0) from a stylesheet that loads in the BODY, i.e.
 * after this file, and Astra styles inputs too. Everything here is (0,3,0) or better so it wins the tie
 * regardless of source order.
 *
 * Brand: navy #170D3D, purple #3A0CA3, body #5A5A72, ground #EDEFFF.
 */

/* Fluent Forms exposes its skin as custom properties, so most of the theming is five values. The in-field
   icons are Font Awesome 5 paths, masked rather than filled so they inherit a colour. */
.cp-contact__form .fluentform {
	--fluentform-primary: #3A0CA3;
	--fluentform-secondary: #170D3D;
	--fluentform-danger: #C42B4F;
	--fluentform-border-color: #E1E4F7;
	--fluentform-border-radius: 10px;

	--cp-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'/%3E%3C/svg%3E");
	--cp-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/%3E%3C/svg%3E");
	--cp-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z'/%3E%3C/svg%3E");
	--cp-i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M436 480h-20V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v456H12c-6.627 0-12 5.373-12 12v20h448v-20c0-6.627-5.373-12-12-12zM128 76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76zm0 96c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40zm52 148h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12zm76 160h-64v-84c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v84zm64-172c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40z'/%3E%3C/svg%3E");
	--cp-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z'/%3E%3C/svg%3E");
}

/* --- labels ------------------------------------------------------------------------------------- */

.cp-contact__form .fluentform .ff-el-input--label label {
	font-family: 'Montserrat', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #170D3D;
	margin-bottom: 0;
}
.cp-contact__form .fluentform .ff-el-input--label {
	margin-bottom: 6px;
}
/* The required asterisk: brand danger rather than Fluent Forms' default red, and given some air. */
.cp-contact__form .fluentform .ff-el-is-required.asterisk-right label:after {
	color: #C42B4F;
	margin-inline-start: 4px;
	font-weight: 700;
}

/* --- fields ------------------------------------------------------------------------------------- */

.cp-contact__form .fluentform .ff-el-form-control {
	background-color: #F7F8FE;
	font-family: 'Montserrat', sans-serif;
	font-size: 13.5px;
	line-height: 1.45;
	padding: 12px 14px;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cp-contact__form .fluentform .ff-el-form-control::placeholder {
	color: #8B8BA6;
	opacity: 1;
}
.cp-contact__form .fluentform .ff-el-form-control:focus {
	background-color: #fff;
	border-color: #3A0CA3;
	box-shadow: 0 0 0 3px rgba(58, 12, 163, .14);
	outline: none;
}
.cp-contact__form .fluentform textarea.ff-el-form-control {
	min-height: 108px;
	line-height: 1.6;
	resize: vertical;
	/* room for the counter in the bottom-right corner */
	padding-bottom: 26px;
}

/* --- the icon inside each text field ------------------------------------------------------------ */

.cp-contact__form .fluentform .ff-el-input--content {
	position: relative;
}
.cp-contact__form .fluentform .cp-ic-user .ff-el-input--content:before,
.cp-contact__form .fluentform .cp-ic-mail .ff-el-input--content:before,
.cp-contact__form .fluentform .cp-ic-phone .ff-el-input--content:before,
.cp-contact__form .fluentform .cp-ic-building .ff-el-input--content:before,
.cp-contact__form .fluentform .cp-ic-globe .ff-el-input--content:before,
.cp-contact__form .fluentform .ff-name-field-wrapper .ff-el-input--content:before {
	content: "";
	position: absolute;
	inset-inline-start: 13px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background-color: #9A9AB4;
	pointer-events: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: var(--cp-i-user);
	mask-image: var(--cp-i-user);
}
.cp-contact__form .fluentform .cp-ic-mail .ff-el-input--content:before { -webkit-mask-image: var(--cp-i-mail); mask-image: var(--cp-i-mail); }
.cp-contact__form .fluentform .cp-ic-phone .ff-el-input--content:before { -webkit-mask-image: var(--cp-i-phone); mask-image: var(--cp-i-phone); }
.cp-contact__form .fluentform .cp-ic-building .ff-el-input--content:before { -webkit-mask-image: var(--cp-i-building); mask-image: var(--cp-i-building); }
.cp-contact__form .fluentform .cp-ic-globe .ff-el-input--content:before { -webkit-mask-image: var(--cp-i-globe); mask-image: var(--cp-i-globe); }

/* Only the fields that carry an icon get the extra left padding — the selects and the textarea do not. */
.cp-contact__form .fluentform .cp-ic-user .ff-el-form-control,
.cp-contact__form .fluentform .cp-ic-mail .ff-el-form-control,
.cp-contact__form .fluentform .cp-ic-phone .ff-el-form-control,
.cp-contact__form .fluentform .cp-ic-building .ff-el-form-control,
.cp-contact__form .fluentform .cp-ic-globe .ff-el-form-control,
.cp-contact__form .fluentform .ff-name-field-wrapper .ff-el-form-control {
	padding-inline-start: 38px;
}

/* --- row rhythm --------------------------------------------------------------------------------- */

.cp-contact__form .fluentform .ff-el-group {
	margin-bottom: 16px;
}
.cp-contact__form .fluentform .ff-t-container .ff-el-group,
.cp-contact__form .fluentform .ff-name-field-wrapper .ff-el-group {
	margin-bottom: 0;
}
.cp-contact__form .fluentform .ff-t-container,
.cp-contact__form .fluentform .ff-name-field-wrapper {
	margin-bottom: 16px;
}
.cp-contact__form .fluentform .cp-row--submit {
	margin-bottom: 0;
}

/* --- the character counter ---------------------------------------------------------------------- */

/* Rendered by the section's own script against the textarea's real maxlength, so the number moves.
   The script wraps the textarea in .cp-ta so the counter is positioned against the FIELD — anchoring it to
   .ff-el-input--content instead dropped it out of the box as soon as a validation message appeared. */
.cp-contact__form .fluentform .cp-ta {
	position: relative;
	display: block;
}
.cp-contact__form .fluentform .cp-counter {
	position: absolute;
	inset-inline-end: 12px;
	bottom: 9px;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	line-height: 1;
	color: #9A9AB4;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* --- the consultation checkbox ------------------------------------------------------------------ */

.cp-contact__form .fluentform .cp-row--consult .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: 'Montserrat', sans-serif;
	font-size: 12.5px;
	line-height: 1.5;
	color: #5A5A72;
	cursor: pointer;
	margin-bottom: 0;
}
.cp-contact__form .fluentform .cp-row--consult input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid #C9CEEE;
	border-radius: 4px;
	background-color: #F7F8FE;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.cp-contact__form .fluentform .cp-row--consult input[type="checkbox"]:checked {
	background-color: #3A0CA3;
	border-color: #3A0CA3;
	/* the tick, drawn rather than a glyph so it needs no font */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}
.cp-contact__form .fluentform .cp-row--consult input[type="checkbox"]:focus-visible {
	outline: 3px solid rgba(58, 12, 163, .3);
	outline-offset: 1px;
}

/* --- submit ------------------------------------------------------------------------------------- */

/* Geometry and type only; the colours are set in the Fluent Forms button styler. */
.cp-contact__form .fluentform .ff-btn-submit {
	width: 100%;
	font-family: 'Heebo', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	border-radius: 12px;
	padding: 15px 20px;
	white-space: normal;
}
.cp-contact__form .fluentform .ff-btn-submit:focus-visible {
	outline: 3px solid #170D3D;
	outline-offset: 2px;
}
/* The paper-plane the design puts before the label. Masked, so it follows the button's text colour. */
.cp-contact__form .fluentform .ff-btn-submit:before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-inline-end: 9px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v50.5c0 23.9 28.8 34.9 43.2 16.7L286 391l114.5 47.9c9 3.8 19.5-1.9 20.9-11.5l84-465.8C507.3-1.4 493.5-6.7 476 3.2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v50.5c0 23.9 28.8 34.9 43.2 16.7L286 391l114.5 47.9c9 3.8 19.5-1.9 20.9-11.5l84-465.8C507.3-1.4 493.5-6.7 476 3.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- validation + confirmation ------------------------------------------------------------------ */

.cp-contact__form .fluentform .ff-el-is-error .ff-el-form-control {
	background-color: #FFF6F8;
}
.cp-contact__form .fluentform .error.text-danger {
	font-family: 'Montserrat', sans-serif;
	font-size: 11.5px;
	line-height: 1.5;
	color: #C42B4F;
	margin-top: 5px;
}
.cp-contact__form .ff-message-success {
	background-color: #EDEFFF;
	border: 1px solid #D9DDF6;
	border-radius: 12px;
	padding: 18px 20px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	color: #170D3D;
}
.cp-contact__form .ff-message-success p:last-child {
	margin-bottom: 0;
}

/* --- narrow screens ----------------------------------------------------------------------------- */

/* Below 560px a 50% column leaves ~130px, too narrow for "Phone Number (optional)" to read. Stack. */
@media (max-width: 560px) {
	.cp-contact__form .fluentform .ff-t-container {
		display: block;
	}
	.cp-contact__form .fluentform .ff-t-cell {
		flex-basis: 100% !important;
		padding-inline: 0;
	}
	.cp-contact__form .fluentform .ff-t-cell .ff-el-group {
		margin-bottom: 16px;
	}
	.cp-contact__form .fluentform .ff-t-cell:last-child .ff-el-group {
		margin-bottom: 0;
	}
}