/* ============================================================
   StackForBrands — Form component styles
   ============================================================ */

.sfb-field { display: flex; flex-direction: column; gap: var(--space-2); }
.sfb-label {
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.sfb-label__hint { font-weight: var(--fw-regular); color: var(--text-faint); margin-left: 6px; }

.sfb-input,
.sfb-select {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sfb-input::placeholder { color: var(--text-faint); }
.sfb-input:hover, .sfb-select:hover { border-color: var(--ink-300); }
.sfb-input:focus, .sfb-select:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--green-500) 18%, transparent);
}
.sfb-input[disabled] { background: var(--paper-sunk); color: var(--text-faint); cursor: not-allowed; }

/* input with leading affix (e.g. currency) */
.sfb-input-group { position: relative; display: flex; align-items: center; }
.sfb-input-group .sfb-input { padding-left: 38px; }
.sfb-input-group__affix {
  position: absolute; left: 14px;
  font-family: var(--font-mono); font-size: var(--fs-body);
  color: var(--text-muted); pointer-events: none;
}

.sfb-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b746f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.sfb-hint { font-size: var(--fs-caption); color: var(--text-muted); }
.sfb-hint--error { color: var(--danger-600); }