/* 
 * Fix for icon positioning when reCAPTCHA is added to form
 * The original CSS positions icons using percentages relative to the entire form height
 * This breaks when form height changes (due to reCAPTCHA addition)
 * Solution: Make each field position:relative so icons position relative to their own field
 */

/* Make each form field a positioning context for its icon */
#contact-sales .form .form-field {
    position: relative !important;
}

/* Override all icon positions to be relative to their own field, not the form */
#contact-sales .form .fullname:before,
#contact-sales .form .company:before,
#contact-sales .form .email:before,
#contact-sales .form .phone:before,
#contact-sales .form .country:before,
#contact-sales .form .state:before {
    top: 50% !important;
    left: 0 !important;
}

/* Message textarea icon needs different positioning */
#contact-sales .form .message:before {
    top: 25px !important;
    left: 0 !important;
}