/* =========================================================
   FORMS – BASE STYLES
   Desktop First | No Layout | No Breakpoints
   ========================================================= */

/* ---------------------------------------------------------
   FORM FIELD
--------------------------------------------------------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.form-field label {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */

.form-field input,
.form-field textarea,
.form-field select {
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid #cfd8cf;

  font-family: var(--font-sans);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------
   ERROR STATE
--------------------------------------------------------- */

.form-field.is-invalid input,
.form-field.is-invalid textarea,
.form-field.is-invalid select {
  border-color: #d64545;
}

.form-error {
  font-size: 0.8rem;
  color: #d64545;
  min-height: 1em;
}

/* ---------------------------------------------------------
   DISABLED
--------------------------------------------------------- */

button[disabled],
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ================================
   INPUT AUTOFILL RESET (MOBILE)
================================ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(11, 14, 12, 0.8) inset !important;
  -webkit-text-fill-color: var(--color-neutral) !important;
  caret-color: var(--color-neutral);
  transition: background-color 9999s ease-in-out 0s;
}