/* ================================================================
   QUOTE FORM — the "Get a Quote" page.
   ================================================================ */

.quote-form { margin-block-start: 24px; }
.form-row { margin-block-end: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-weight: var(--weight-label); font-size: 0.92rem; }
.optional { font-weight: var(--weight-body); color: var(--text-muted); }

.form-row input,
.form-row select,
.form-row textarea {
  font-family: inherit;
  font-size: 1rem;
  padding-block: 10px;
  padding-inline: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.field-error {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 1.1em;
  font-size: 0.82rem;
  color: var(--color-error);
}
.field-error-icon {
  display: none;
  order: -1;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
/* Color alone isn't a reliable enough signal — weight + an icon make
   a real error visually distinct from an empty placeholder line. Keyed
   off the text span's emptiness (not a JS-toggled class) so this works
   for every .field-error on the page, including the wizard's Step 1
   idea field, which never adds a .invalid class to its row. */
.field-error-text:not(:empty) {
  font-weight: var(--weight-label);
}
.field-error-text:not(:empty) ~ .field-error-icon {
  display: block;
}

.form-row.invalid input,
.form-row.invalid select,
.form-row.invalid textarea {
  border-color: var(--color-error);
}

.form-success {
  margin-block-start: 24px;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.form-success h2 { margin-block-end: 8px; }
.form-success h2:focus-visible { outline-offset: 4px; }