/* ============================================================
   ARTinez v2 — shared form fields
   Loaded by the Contact form and the Vision builder so both pages
   render the same controls in the same house style. These rules used
   to live only in vision.css, which left the Contact form showing
   native browser controls on the dark theme.
   ============================================================ */

.field {
  display: block;
  margin-bottom: 20px;
}
.field__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-3);
  margin-bottom: 8px;
  font-weight: 500;
}
.field__label .num {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-dim);
  letter-spacing: 0;
  font-style: italic;
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-strong);
  color: #fff;
  font: inherit;
  font-size: 15px;
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--gold-2);
  background: rgba(212,175,55,.04);
}
/* Only the mouse focus is flattened. A keyboard focus keeps the gold
   ring the whole site uses (base.css :focus-visible). */
.field__input:focus:not(:focus-visible),
.field__select:focus:not(:focus-visible),
.field__textarea:focus:not(:focus-visible) {
  outline: none;
}
.field__textarea {
  resize: vertical;
  min-height: 80px;
}
.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='1.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}
.field__select option { background: #0a0a12; color: #fff; }

.field__note {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* The required marker, on both the Contact form and the Vision builder. */
.req,
.required { color: #e0b34d; margin-left: 2px; font-weight: 600; }

/* Narrow phones — 16px stops iOS Safari zooming the page when a field is
   focused. This has to sit after the rule above to win the cascade. */
@media (max-width: 480px) {
  .field__input,
  .field__select,
  .field__textarea { font-size: 16px; }
}