/* ==========================================================================
   AAS Group - brand styling for Elementor's native Contact Form widget
   (Elementor Pro "Form" widget). Matches the red/dark AAS Group look used
   across every other custom widget in this theme. Targets the widget's
   own default classes, so it applies automatically to ANY Form widget
   placed anywhere on the site - no extra setup needed per-form.
   ========================================================================== */

.elementor-widget-form {
	--aas-accent: var(--e-global-color-accent, #FE212A);
	--aas-dark: var(--e-global-color-primary, #0D0D0D);
	--aas-text: var(--e-global-color-text, #666666);
	--aas-white: var(--e-global-color-white, #FFFFFF);
	--aas-light: var(--e-global-color-secondary, #F5F5F5);
	--aas-font-heading: var(--e-global-typography-primary-font-family, "Space Grotesk", sans-serif);
	--aas-font-text: var(--e-global-typography-text-font-family, "DM Sans", sans-serif);
	font-family: var(--aas-font-text);
}

/* ---- Field labels ----------------------------------------------------------
   Matching the live site's original form design: NO visible text label
   above each field - only an icon + placeholder text inside the field
   itself (the label is kept in the DOM for screen readers only). */
.elementor-widget-form .elementor-field-group {
	margin-bottom: 18px;
	position: relative;
}
.elementor-widget-form .elementor-field-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.elementor-widget-form .elementor-mark-required .elementor-field-label:after {
	content: "";
}

/* ---- Inputs / textarea / select ------------------------------------------ */
.elementor-widget-form .elementor-field-textual,
.elementor-widget-form select.elementor-field,
.elementor-widget-form textarea.elementor-field {
	background: var(--aas-light) !important;
	border: 1px solid rgba(13, 13, 13, 0.1) !important;
	border-radius: 6px !important;
	color: var(--aas-dark) !important;
	font-family: var(--aas-font-text) !important;
	font-size: 15px !important;
	padding: 13px 16px 13px 44px !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
	box-shadow: none !important;
}
.elementor-widget-form textarea.elementor-field {
	padding-top: 13px !important;
}
.elementor-widget-form .elementor-field-textual::placeholder,
.elementor-widget-form textarea.elementor-field::placeholder {
	color: rgba(13, 13, 13, 0.55);
}

/* ---- Icon inside each field (matches the reference design: icon sits
   inline with the placeholder text, left side of the field). Mapped by
   the field's custom_id, which Elementor adds as
   "elementor-field-group-{custom_id}" on the wrapper. */
.elementor-widget-form .elementor-field-group:before {
	font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", "eicons" !important;
	font-weight: 900 !important;
	position: absolute;
	left: 16px;
	top: 16px;
	color: var(--aas-accent);
	font-size: 15px;
	line-height: 1;
	pointer-events: none;
	z-index: 2;
}
.elementor-widget-form .elementor-field-group-name:before { content: "\f007"; }     /* user icon */
.elementor-widget-form .elementor-field-group-tel:before { content: "\f095"; }      /* phone icon */
.elementor-widget-form .elementor-field-group-email:before { content: "\f0e0"; }    /* envelope icon */
.elementor-widget-form .elementor-field-group-location:before { content: "\f3c5"; } /* map-pin icon */
.elementor-widget-form .elementor-field-group-select:before { content: "\f03a"; }   /* bullet-list icon */
.elementor-widget-form .elementor-field-group-message:before { content: "\f075"; }  /* comment icon */

/* Textarea icon sits at the top, matching the reference image */
.elementor-widget-form .elementor-field-group-message:before {
	top: 18px;
}

/* Checkbox/acceptance and submit rows have no icon / no left padding */
.elementor-widget-form .elementor-field-type-acceptance .elementor-field-label,
.elementor-widget-form .elementor-field-type-submit {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
}
.elementor-widget-form .elementor-field-type-acceptance:before {
	content: none;
}
.elementor-widget-form .elementor-field-type-acceptance .elementor-field-label {
	font-family: var(--aas-font-text);
	font-weight: 400;
	font-size: 14px;
	color: var(--aas-text);
}
.elementor-widget-form .elementor-field-textual:focus,
.elementor-widget-form select.elementor-field:focus,
.elementor-widget-form textarea.elementor-field:focus {
	background: var(--aas-white) !important;
	border-color: var(--aas-accent) !important;
	box-shadow: 0 0 0 3px rgba(254, 33, 42, 0.12) !important;
	outline: none !important;
}

/* Checkbox / radio accent color */
.elementor-widget-form input[type="checkbox"],
.elementor-widget-form input[type="radio"] {
	accent-color: var(--aas-accent);
}

/* ---- Submit button - same look as every other AAS button -----------------
   Hardened with !important against the parent theme's/Elementor's generic
   button reset (same issue fixed earlier on the FAQ accordion button). */
.elementor-widget-form .elementor-button,
.elementor-widget-form .elementor-button:visited {
	background-color: var(--aas-accent) !important;
	background-image: none !important;
	color: var(--aas-dark) !important;
	font-family: var(--aas-font-heading) !important;
	font-weight: 600 !important;
	border: 1px solid var(--aas-accent) !important;
	border-radius: 5px !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 14px 32px !important;
	transition: all 0.3s ease;
	width: auto;
}
.elementor-widget-form .elementor-button:hover,
.elementor-widget-form .elementor-button:focus {
	background-color: var(--aas-white) !important;
	color: var(--aas-dark) !important;
	border-color: var(--aas-dark) !important;
}
.elementor-widget-form .elementor-button .elementor-button-text {
	color: inherit;
}
.elementor-widget-form .elementor-button-icon svg {
	fill: currentColor;
}

/* Centered submit row by default (matches the rest of the site's CTAs);
   remove this rule if a left-aligned button is wanted instead. */
.elementor-widget-form .elementor-field-type-submit {
	text-align: left;
}

/* ---- Success / error messages --------------------------------------------- */
.elementor-widget-form .elementor-message-success {
	background: rgba(46, 160, 67, 0.1) !important;
	border: 1px solid rgba(46, 160, 67, 0.3) !important;
	color: #1f7a33 !important;
	border-radius: 6px;
	font-family: var(--aas-font-text);
	padding: 14px 16px;
}
.elementor-widget-form .elementor-message-danger,
.elementor-widget-form .elementor-field-group .elementor-message {
	background: rgba(254, 33, 42, 0.08) !important;
	border: 1px solid rgba(254, 33, 42, 0.3) !important;
	color: var(--aas-accent) !important;
	border-radius: 6px;
	font-family: var(--aas-font-text);
	font-size: 13px;
	padding: 10px 14px;
	margin-top: 6px;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 500px) {
	.elementor-widget-form .elementor-button {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}