/* Form Validation States */
.form-field {
  margin-bottom: 24px; /* Space for error message */
}

.form-field input.is-valid {
  border: 2px solid #9cc443;
}

.form-field input.is-invalid {
  border: 2px solid #f1553c;
}

.error-message {
  color: #f1553c;
  font-size: 14px;
  margin-top: 4px;
  display: none;
  position: absolute;
  left: 0;
  text-align: left;
  margin-top: -1px;
  margin-left: 3px;
}

.form-field.has-error .error-message {
  display: block;
}

/* Validation Icons */
.validation-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: bold;
  display: none;
  z-index: 1; /* Below the input and label */
}

.validation-icon.success {
  color: #9cc443;
  display: none;
}

.validation-icon.error {
  color: #f1553c;
  display: none;
}

.form-field.is-valid .validation-icon.success {
  display: block;
}

.form-field.is-invalid .validation-icon.error {
  display: block;
}

/* Prevent icon from overlapping with input text */
.form-field input {
  padding-right: 40px;
}

/* Remove our label style overrides and let qualify.css handle the label animations */
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label {
  z-index: 3; /* Above the validation icons */
}

/* Disabled submit button state */
.pmq-option-cta[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Opt-in validation styling */
.form-field-thankyou .checkbox-container {
  transition: border-color 0.2s ease;
}

.form-field-thankyou.is-valid .checkbox-container {
  border-color: #9cc443;
}

.form-field-thankyou.is-invalid .checkbox-container {
  border-color: #f1553c;
}

.optin-error, .checkbox-help {
  font-size: 14px;
  margin-top: 4px;
  position: absolute;
  left: 0;
  bottom: -20px;
  visibility: hidden;
}

.optin-error {
  color: #f1553c;
}

.checkbox-help {
  color: #4c5c74;
}

.form-field-thankyou.has-error .optin-error {
  visibility: visible;
}



/* Ensure disabled button state works for opt-in form */
.form-fields-thankyou .pmq-option-cta[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}