/**
 * Elementor Form Icons Styles
 */

/* Wrapper to position icon relative to input */
.elementor-field-icon-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

/* Common Icon Styles */
.elementor-field-icon-wrapper .elementor-field-icon {
	position: absolute;
	top: 50%; /* Center vertically */
	transform: translateY(-50%);
	z-index: 2;
	pointer-events: none; /* Let clicks pass through to input */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5em; /* Fixed width for icon container */
	height: 1.5em;
	line-height: 1;
}

.elementor-field-icon-wrapper .elementor-field-icon i,
.elementor-field-icon-wrapper .elementor-field-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor; /* Inherit color */
}

/* Left Position */
.elementor-field-icon-left .elementor-field-icon {
	left: 12px;
}

/* Force padding on the input inside our wrapper */
.elementor-field-icon-left input,
.elementor-field-icon-left textarea,
.elementor-field-icon-left select {
	padding-left: 40px !important; /* Make room for icon */
}

/* Right Position */
.elementor-field-icon-right .elementor-field-icon {
	right: 12px;
}

/* Force padding on the input inside our wrapper */
.elementor-field-icon-right input,
.elementor-field-icon-right textarea,
.elementor-field-icon-right select {
	padding-right: 40px !important; /* Make room for icon */
}

/* Specific adjustments for textarea to align icon to top */
.elementor-field-icon-wrapper textarea ~ .elementor-field-icon, /* If icon is after */
.elementor-field-icon-wrapper .elementor-field-icon:has(+ textarea) { /* If icon is before (CSS4) - fallback via top adjustment */
	top: 15px;
	transform: none;
}

/* Since :has() support varies, let's use a more robust way for top alignment if wrapper is flex or similar.
   But here we used absolute positioning.
   If the input is a textarea, we might need JS or a class on the wrapper if pure CSS fails.
   However, our PHP wrapper puts icon BEFORE input.
*/
.elementor-field-icon-wrapper:has(textarea) .elementor-field-icon {
	top: 12px;
	transform: none;
}

/* Fallback for browsers without :has() support - simplified approach */
textarea + .elementor-field-icon,
.elementor-field-icon + textarea {
    /* This selector logic depends on DOM order.
       Our PHP: wrapper > icon > input
       So icon is first child.
    */
}