/* Form Validation Styles for POURED */
/* Uses CSS variables from variables.css */

/* Field Error State */
.field-error {
  border-color: var(--red, #dc2626) !important;
  background-color: rgba(220, 38, 38, 0.02);
}

.field-error:focus {
  border-color: var(--red, #dc2626) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
  outline: none;
}

/* Error Message Text */
.error-message {
  display: block;
  color: var(--red, #dc2626);
  font-size: 11px;
  margin-top: 4px;
  margin-bottom: 8px;
  font-weight: 400;
  line-height: 1.4;
}

/* Field Valid State (optional, for real-time validation feedback) */
.field-valid {
  border-color: var(--green, #16a34a) !important;
  background-color: rgba(22, 163, 74, 0.02);
}

.field-valid:focus {
  border-color: var(--green, #16a34a) !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
  outline: none;
}

/* Valid checkmark (when using real-time validation) */
.field-valid::after {
  content: '✓';
  position: absolute;
  right: 12px;
  color: var(--green, #16a34a);
  font-weight: 600;
  font-size: 14px;
}

/* Success message (optional) */
.success-message {
  display: block;
  color: var(--green, #16a34a);
  font-size: 11px;
  margin-top: 4px;
  margin-bottom: 8px;
  font-weight: 400;
}

/* Form submission state */
form.validating {
  opacity: 0.7;
  pointer-events: none;
}

/* Button disabled state during validation */
button[type="submit"]:disabled,
button.btn-dark:disabled,
button.btn-gold:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Validation summary (for showing all errors at once) */
.validation-summary {
  background-color: var(--red-bg, #fee2e2);
  border: 1px solid var(--red, #dc2626);
  border-radius: var(--radius, 12px);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.validation-summary-title {
  font-weight: 600;
  color: var(--red, #dc2626);
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.validation-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.validation-summary li {
  color: var(--red, #dc2626);
  font-size: 11px;
  margin-bottom: 3px;
  padding-left: 16px;
  position: relative;
}

.validation-summary li::before {
  content: '•';
  position: absolute;
  left: 0;
  font-weight: 600;
}

/* Loading state during form submission */
.form-submitting {
  position: relative;
}

.form-submitting button[type="submit"] {
  color: transparent;
}

.form-submitting button[type="submit"]::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .error-message {
    font-size: 10px;
    margin-top: 3px;
    margin-bottom: 6px;
  }

  .validation-summary {
    padding: 10px 12px;
  }

  .validation-summary-title {
    font-size: 11px;
  }

  .validation-summary li {
    font-size: 10px;
  }
}