/* Extracted from index.css L1197-L1256: Form inputs and validation */

/* ===== FORMS ===== */
.form-group { margin-bottom: 1.1rem; }
.form-label { 
  display: block; 
  font-size: 0.68rem; 
  font-weight: 700; 
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.form-input, .form-select { 
  width: 100%; 
  padding: 0.65rem 0.9rem; 
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm); 
  font-size: 0.88rem;
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-family: inherit;
  transition: all var(--transition);
}
.form-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238A94B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.7rem center !important;
  padding-right: 2rem !important;
}
.form-input:focus, .form-select:focus { 
  outline: none; 
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px var(--accent-green-dim), var(--glow);
}
.form-input::placeholder { color: var(--text-muted); }
.form-select option { background: var(--bg-card); color: var(--text-primary); }

/* ===== INLINE FIELD VALIDATION ===== */
.form-input.field-invalid,
.cd-trigger.field-invalid,
.dp-trigger.field-invalid {
  border-color: var(--accent-red) !important;
  box-shadow: 0 0 0 3px var(--accent-red-dim) !important;
}
.field-error-msg {
  display: block;
  color: var(--accent-red);
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
  animation: fieldErrorIn 0.15s ease-out both;
}
@keyframes fieldErrorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}