/* Frontend styles for form validation messages */
.asm-error-message {
  background: #fee2e2;
  color: #991b1b;
  padding: 10px 15px;
  border-radius: 6px;
  margin: 10px 0;
  border: 1px solid #fecaca;
  font-size: 0.9rem;
  font-weight: 500;
}

.asm-field-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

.asm-success-message {
  background: #dcfce7;
  color: #166534;
  padding: 10px 15px;
  border-radius: 6px;
  margin: 10px 0;
  border: 1px solid #bbf7d0;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Form field animations */
.asm-field-error {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 20%, 40%, 60%, 80% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
}

/* Styles for different form types */

/* Contact Form 7 */
.wpcf7-form .asm-field-error {
  border: 2px solid #ef4444 !important;
}

.wpcf7-form .asm-error-message {
  margin-top: 5px;
  font-size: 0.85rem;
}

/* Gravity Forms */
.gform_wrapper .asm-field-error {
  border: 2px solid #ef4444 !important;
}

.gform_wrapper .asm-error-message {
  padding: 8px 12px;
  margin-top: 4px;
}

/* WPForms */
.wpforms-form .asm-field-error {
  border: 2px solid #ef4444 !important;
}

.wpforms-form .asm-error-message {
  font-size: 0.8rem;
  padding: 8px 10px;
  margin-top: 5px;
}

/* Ninja Forms */
.nf-form-layout .asm-field-error {
  border: 2px solid #ef4444 !important;
}

.nf-form-layout .asm-error-message {
  margin-top: 5px;
}

/* Forminator */
.forminator-custom-form .asm-field-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important;
}

.forminator-custom-form .asm-error-message {
  margin-top: 8px;
  font-size: 0.8rem;
}

/* Fluent Forms */
.frm-fluent-form .asm-field-error,
.ff-form .asm-field-error,
.ff-el-group .asm-field-error {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.frm-fluent-form .asm-error-message,
.ff-form .asm-error-message,
.ff-el-group .asm-error-message {
  margin-top: 5px;
  display: block !important;
  visibility: visible !important;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  .asm-error-message, .asm-success-message {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}