/* GC — Contact / Quote: the Fluent Form inside the band (`.gc-quote__form`).
 *
 * This is the ONLY part of the contact band that is not an Elementor control. Everything else — the
 * layout, the heading, the lede, the four chips, the three connect cards, the padding, the colours — is
 * edited in Elementor on the "GC — Contact / Quote" section. Fluent Forms free has no styler UI, so the
 * inputs are themed here instead.
 *
 * Two things it does NOT own, on purpose, so nothing competes for the same property:
 *   - the submit button's COLOURS live in Fluent Forms → form #3 → Submit Button → Styles (a no-code UI);
 *     only its geometry and type are set here, because the free styler cannot do those.
 *   - the field values, labels, options and validation messages live in the Fluent Forms editor.
 *
 * Specificity note: Fluent Forms' own skin matches at (0,2,0) — `.ff-default .ff-el-form-control` — and
 * its stylesheet loads from the body, i.e. AFTER this file. Everything here is therefore (0,3,0) or
 * better so it wins the tie regardless of order. Astra also styles inputs (it is where the #fafafa fill
 * came from, via --ast-comment-inputs-background), which the same specificity covers.
 *
 * Brand: navy #170D3D, purple #3A0CA3, body #5A5A72, band ground #EDEFFF.
 */

/* Fluent Forms exposes its skin as custom properties, so most of the theming is four values rather than
   a pile of overrides. Scoped to this form so no other form on the site is affected. */
.gc-quote__form .fluentform {
	--fluentform-primary: #3A0CA3;      /* focus border */
	--fluentform-secondary: #170D3D;    /* input text */
	--fluentform-danger: #C42B4F;       /* error border + message */
	--fluentform-border-color: #E1E4F7;
	--fluentform-border-radius: 10px;
}

/* The rest of the field: fill, family, size, padding. Fluent Forms hardcodes -apple-system and 11px/15px,
   which is why these four are here and not variables. */
.gc-quote__form .fluentform .ff-el-form-control {
	background-color: #F7F8FE;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	line-height: 1.45;
	padding: 13px 15px;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.gc-quote__form .fluentform .ff-el-form-control::placeholder {
	color: #8B8BA6;
	opacity: 1;
}

/* A visible focus ring: the band sits on a light ground where a 1px border change alone is easy to miss. */
.gc-quote__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;
}

.gc-quote__form .fluentform textarea.ff-el-form-control {
	min-height: 112px;
	line-height: 1.6;
	resize: vertical;
}

/* Row rhythm. Fluent Forms ships 20px; the band's own gaps are 14/22 so this keeps the card consistent.
   The two-column container holds its own children's groups, hence the reset on the last one. */
.gc-quote__form .fluentform .ff-el-group {
	margin-bottom: 14px;
}
.gc-quote__form .fluentform .ff-t-container .ff-el-group,
.gc-quote__form .fluentform .ff-name-field-wrapper .ff-el-group {
	margin-bottom: 0;
}
.gc-quote__form .fluentform .ff-t-container,
.gc-quote__form .fluentform .ff-name-field-wrapper {
	margin-bottom: 14px;
}
.gc-quote__form .fluentform .sq-row--submit {
	margin-bottom: 0;
}

/* Submit button — geometry and type only. Its colours are set in the Fluent Forms button styler. */
.gc-quote__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;
}
.gc-quote__form .fluentform .ff-btn-submit:focus-visible {
	outline: 3px solid #170D3D;
	outline-offset: 2px;
}

/* The paper-plane the design puts before the label. Fluent Forms free has no icon control on the button,
   so it is a masked SVG here — masked rather than filled so it inherits the button's text colour, which
   means changing that colour in the Fluent Forms styler still leaves a matching icon. Same Font Awesome 5
   glyph as the "Let's Work Together" pill above it. */
.gc-quote__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. The border colour comes from --fluentform-danger above; this is the message under it. */
.gc-quote__form .fluentform .ff-el-is-error .ff-el-form-control {
	background-color: #FFF6F8;
}
.gc-quote__form .fluentform .error.text-danger {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: #C42B4F;
	margin-top: 5px;
}

/* Confirmation. The form hides itself on success, so this message is all that is left in the card and it
   should not look like a stray paragraph. */
.gc-quote__form .ff-message-success {
	background-color: #EDEFFF;
	border: 1px solid #D9DDF6;
	border-radius: 12px;
	padding: 18px 20px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #170D3D;
}
.gc-quote__form .ff-message-success p:last-child {
	margin-bottom: 0;
}

/* Below 480px the two-column rows would leave ~130px per input, which is too narrow for
   "Phone Number (optional)" to read. Stack them. */
@media (max-width: 480px) {
	.gc-quote__form .fluentform .ff-t-container,
	.gc-quote__form .fluentform .ff-name-field-wrapper .ff-t-container {
		display: block;
	}
	.gc-quote__form .fluentform .ff-t-cell {
		flex-basis: 100% !important;
		padding-inline: 0;
	}
	.gc-quote__form .fluentform .ff-t-cell .ff-el-group {
		margin-bottom: 14px;
	}
	.gc-quote__form .fluentform .ff-t-cell:last-child .ff-el-group {
		margin-bottom: 0;
	}
}