/**
 * Estilos minimalistas para validación del formulario de contacto
 * Solo añade estados de validación sin modificar estilos existentes
 */

/* Asegurar que los contenedores de inputs tengan espacio para errores */
#contact-form .single-input {
  position: relative;
  padding-bottom: 1.75rem; /* Espacio reservado para el mensaje de error */
}

/* Mensajes de error por campo - posición absoluta para no afectar el layout */
#contact-form .error-message {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: -1rem; /* Ajustar para que quede en el espacio reservado */
  font-size: 1.25rem;
  color: #dc3545;
  line-height: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-in,
    visibility 0.3s ease-in;
}

/* Estados de validación para inputs */
#contact-form input.is-invalid,
#contact-form textarea.is-invalid {
  border-color: #dc3545 !important;
}

#contact-form input.is-valid,
#contact-form textarea.is-valid {
  border-color: #28a745 !important;
}

/* Checkbox de privacidad: el borde no se aprecia, usar outline */
#contact-form input[type="checkbox"].is-invalid {
  outline: 2px solid #dc3545 !important;
  outline-offset: 2px;
}

#contact-form input[type="checkbox"].is-valid {
  outline: 2px solid #28a745 !important;
  outline-offset: 2px;
}

/* El mensaje de error del checkbox no debe ser absoluto (rompe el layout inline) */
#contact-form .single-input.with-checkbox .error-message {
  position: static;
  margin-top: 0.5rem;
}

/* Mensaje general del formulario */
#form-message {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 5px;
  font-size: 1.25rem;
  animation: slide-down 0.3s ease-out;
}

#form-message.message-success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

#form-message.message-error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

/* Estado de carga del botón - minimalista */
#contact-submit.is-loading {
  pointer-events: none;
  cursor: wait;
  opacity: 0.6;
  filter: grayscale(20%);
}

/* Animaciones */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dots {
  0%,
  20% {
    content: ".";
  }

  40% {
    content: "..";
  }

  60%,
  100% {
    content: "...";
  }
}