/* ==========================================================================
   KPRS FOODS — FORM COMPONENTS
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Two-up field layout — collapses to a single column below 600px */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-4);
}
@media (min-width: 600px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field--full { grid-column: 1 / -1; }
}

/* Numbered section blocks inside the distributor application */
.form-section {
  border: 0;
  border-top: 1px solid var(--neutral-200);
  margin: 0 0 var(--space-4);
  padding: var(--space-5) 0 0;
}
.form-section:first-of-type { border-top: 0; padding-top: 0; }
.form-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-900);
}
.form-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: rgba(20, 184, 196, 0.14);
  color: var(--cyan-600);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
}

.field__label {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--navy-900);
}
.field__label .required { color: var(--danger); margin-left: var(--space-1); }

.field__input,
.field__select,
.field__textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  padding: 0.85rem 1rem;
  min-height: 44px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  width: 100%;
}

.field__textarea { min-height: 110px; resize: vertical; }
.field__textarea--compact { min-height: 84px; }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px rgba(20, 184, 196, 0.18);
  outline: none; /* box-shadow carries the focus indication here, contrast-checked */
}

/* Error styling only AFTER the visitor has interacted (:user-invalid) or
   after our own JS validation sets aria-invalid. The previous
   :invalid:not(:placeholder-shown) form matched empty required fields that
   simply had no placeholder attribute, so untouched forms opened pre-reddened. */
.field__input:user-invalid,
.field__select:user-invalid,
.field__textarea:user-invalid,
.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.field__hint {
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}
.field__error {
  font-size: var(--fs-micro);
  color: var(--danger);
  display: none;
}
.field__error.is-visible { display: block; }

.form-status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  margin-bottom: var(--space-5);
  display: none;
}
.form-status.is-success {
  display: block;
  background: rgba(31, 157, 99, 0.1);
  color: var(--success);
  border: 1px solid rgba(31, 157, 99, 0.25);
}
/* Neutral in-flight state while the enquiry is being sent */
.form-status.is-pending {
  display: block;
  background: rgba(20, 184, 196, 0.10);
  color: var(--navy-900);
  border: 1px solid rgba(20, 184, 196, 0.30);
}
.form-status.is-error {
  display: block;
  background: rgba(200, 80, 58, 0.1);
  color: var(--danger);
  border: 1px solid rgba(200, 80, 58, 0.25);
}

/* Checkbox / consent row, if needed */
.field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
}
.field--checkbox input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--cyan-500);
}

.field__label--inline {
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.field--checkbox { margin-bottom: var(--space-2); }
.field--checkbox input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }