/* ============================================================================
   GARAGE GALS . FORMS + INPUTS + SLIDERS
   ----------------------------------------------------------------------------
   Quote intake fields, selects, textareas, file upload, validation states, and
   the range sliders used by the estimator. Works on cream or ink surfaces.
   ============================================================================ */

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

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-soft);
}
.field__label .req { color: var(--accent); }

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  font-size: var(--fs-body);
  color: var(--fg-strong);
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              background var(--dur-2);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--fg-faint); }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--rule-strong); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.textarea { min-height: 7rem; line-height: var(--lh-body); }

/* Select with a custom chevron */
.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 1.1rem; top: 50%;
  width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--fg-soft);
  border-bottom: 2px solid var(--fg-soft);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.select { padding-right: 2.6rem; cursor: pointer; }

/* Validation */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--red-600); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red-600) 16%, transparent); }
.field__error { font-size: var(--fs-caption); color: var(--red-600); display: none; }
.field.is-invalid .field__error { display: block; }
.field.is-valid .input { border-color: color-mix(in srgb, #2e9e5b 60%, var(--rule)); }

.field__hint { font-size: var(--fs-caption); color: var(--fg-faint); }

/* File upload (styled label over a hidden input) */
.file {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 1rem 1.1rem;
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.file:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file__icon { color: var(--accent); }
.file__text strong { display: block; color: var(--fg-strong); }
.file__text span { font-size: var(--fs-caption); color: var(--fg-faint); }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Submit row */
.form__actions { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.form__fine { font-size: var(--fs-caption); color: var(--fg-faint); }

/* Success / error states (JS toggles) */
.form-status {
  display: none;
  padding: var(--space-md);
  border-radius: var(--r-md);
  font-weight: var(--weight-medium);
}
.form-status.is-success { display: block; background: color-mix(in srgb, #2e9e5b 14%, var(--surface)); color: #1c6b3c; border: 1px solid color-mix(in srgb, #2e9e5b 40%, transparent); }
.form-status.is-error   { display: block; background: color-mix(in srgb, var(--red-600) 12%, var(--surface)); color: var(--red-700); border: 1px solid color-mix(in srgb, var(--red-600) 35%, transparent); }

/* ---- Range sliders (estimator) ------------------------------------------- */
.range {
  --val: 50%;
  width: 100%;
  height: 2.5rem;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent) 0 var(--val), var(--rule) var(--val) 100%);
}
.range::-moz-range-track {
  height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--rule);
}
.range::-moz-range-progress { height: 0.5rem; border-radius: var(--r-pill); background: var(--accent); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.55rem;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--cream-50);
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-2) var(--ease-out-back);
}
.range::-moz-range-thumb {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--cream-50);
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-2);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.range:active::-webkit-slider-thumb { transform: scale(0.96); }

/* Segmented choice (chips that act like radios) */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.seg__opt {
  position: relative;
  padding: 0.6rem 1rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--rule);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--fg);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-standard);
}
.seg__opt:hover { border-color: var(--rule-strong); }
.seg__opt[aria-pressed="true"] {
  background: var(--grad-red-flare);
  color: var(--cream-50);
  border-color: transparent;
  box-shadow: var(--glow-red-sm);
}