/*
 * GO DIESEL — form validation states.
 *
 * Deliberately a separate stylesheet: assets/css/style.css is the approved
 * design CSS, kept byte-identical to the client-approved HTML. These rules
 * only add states that did not exist before (field errors, the submit
 * alert, the sending state) and reuse the approved palette variables, so
 * nothing about the forms' resting appearance changes.
 *
 * Loaded after style.css in functions.php.
 */

/* Invalid field ------------------------------------------------------- */

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: var(--shell-red-lt);
  background: rgba(239, 74, 74, 0.06);
}

.field.has-error input:focus,
.field.has-error textarea:focus,
.field.has-error select:focus {
  border-color: var(--shell-red-lt);
  background: rgba(239, 74, 74, 0.09);
}

.field.has-error label {
  color: var(--shell-red-lt);
}

.field-error {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--shell-red-lt);
}

/* Form-level alert ---------------------------------------------------- */

.form-alert {
  display: none;
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  border: 1px solid transparent;
}

.form-alert.show {
  display: block;
}

.form-alert--error {
  color: #ffd7d7;
  background: rgba(216, 35, 42, 0.12);
  border-color: var(--red-dim);
}

.form-alert--success {
  color: #d3f5dd;
  background: rgba(15, 122, 52, 0.14);
  border-color: var(--green-dim);
}

/* Sending state ------------------------------------------------------- */

.order-panel button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

/* Small screens — match the approved form's tighter mobile scale. */
@media (max-width: 560px) {
  .field-error {
    font-size: 10.5px;
  }
  .form-alert {
    font-size: 11.5px;
    padding: 8px 10px;
    margin-bottom: 10px;
  }
}