/**
 * Gravity Forms Real-time Validation Styles for Form ID 3
 */

/* Container positioning for validation icon */
#gform_3 .ginput_container,
.gform_wrapper_3 .ginput_container {
  position: relative;
}

/* Validation icon styling */
#gform_3 .gf-validation-icon,
.gform_wrapper_3 .gf-validation-icon {
  position: absolute;
  right: 12px;
  top: 30px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

#gform_3 .gf-validation-icon img,
.gform_wrapper_3 .gf-validation-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Adjust input padding to make room for icon */
#gform_3 .ginput_container input[type="text"],
#gform_3 .ginput_container input[type="email"],
#gform_3 .ginput_container input[type="tel"],
#gform_3 .ginput_container select,
.gform_wrapper_3 .ginput_container input[type="text"],
.gform_wrapper_3 .ginput_container input[type="email"],
.gform_wrapper_3 .ginput_container input[type="tel"],
.gform_wrapper_3 .ginput_container select {
  padding-right: 40px !important;
}

/* Valid field styling */
#gform_3 .gf-field-valid .ginput_container input,
#gform_3 .gf-field-valid .ginput_container select,
.gform_wrapper_3 .gf-field-valid .ginput_container input,
.gform_wrapper_3 .gf-field-valid .ginput_container select {
  border-color: #4caf50 !important;
}

#gform_3 .gf-input-valid,
.gform_wrapper_3 .gf-input-valid {
  border-color: #4caf50 !important;
}

/* Invalid field styling */
#gform_3 .gf-field-invalid .ginput_container input,
#gform_3 .gf-field-invalid .ginput_container select,
.gform_wrapper_3 .gf-field-invalid .ginput_container input,
.gform_wrapper_3 .gf-field-invalid .ginput_container select {
  border-color: #f44336 !important;
}

#gform_3 .gf-input-invalid,
.gform_wrapper_3 .gf-input-invalid {
  border-color: #f44336 !important;
}

/* Icon animation */
#gform_3 .gf-validation-icon,
.gform_wrapper_3 .gf-validation-icon {
  transition: opacity 0.2s ease-in-out;
}

#gform_3 .gf-validation-icon.valid img,
.gform_wrapper_3 .gf-validation-icon.valid img {
  animation: validPulse 0.3s ease-in-out;
}

#gform_3 .gf-validation-icon.invalid img,
.gform_wrapper_3 .gf-validation-icon.invalid img {
  animation: invalidShake 0.3s ease-in-out;
}

@keyframes validPulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes invalidShake {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
    opacity: 1;
  }
  75% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Dropdown specific styling */
#gform_3 .ginput_container_select,
.gform_wrapper_3 .ginput_container_select {
  position: relative;
}

#gform_3 .ginput_container_select .gf-validation-icon,
.gform_wrapper_3 .ginput_container_select .gf-validation-icon {
  right: 35px; /* Account for dropdown arrow */
}

/* Phone field specific */
#gform_3 .ginput_container_phone,
.gform_wrapper_3 .ginput_container_phone {
  position: relative;
}

/* Email field specific */
#gform_3 .ginput_container_email,
.gform_wrapper_3 .ginput_container_email {
  position: relative;
}

/* Focus state - keep border visible */
#gform_3 .gf-field-valid .ginput_container input:focus,
#gform_3 .gf-field-valid .ginput_container select:focus,
.gform_wrapper_3 .gf-field-valid .ginput_container input:focus,
.gform_wrapper_3 .gf-field-valid .ginput_container select:focus {
  border-color: #4caf50 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

#gform_3 .gf-field-invalid .ginput_container input:focus,
#gform_3 .gf-field-invalid .ginput_container select:focus,
.gform_wrapper_3 .gf-field-invalid .ginput_container input:focus,
.gform_wrapper_3 .gf-field-invalid .ginput_container select:focus {
  border-color: #f44336 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
}

/* Hide the existing checkmark spans that were in the HTML */
#gform_3 .ginput_container .checkmark,
.gform_wrapper_3 .ginput_container .checkmark {
  display: none !important;
}