.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.form-input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-secondary-sm:focus-visible,
.btn-danger-link:focus-visible,
.submit-cta:focus-visible,
.primary-button:focus-visible,
.cancel-button:focus-visible,
.collapse-toggle:focus-visible,
.attach-tab:focus-visible,
.add-link:focus-visible,
.remove-link:focus-visible,
.template-card:focus-visible,
.mode-card:focus-visible,
.qb-btn-secondary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.form-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.form-input::placeholder {
  color: var(--color-muted);
}

select.form-input {
  font-family: var(--font-sans);
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 10px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

textarea.form-input {
  font-family: var(--font-sans);
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.form-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.form-error {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  border-left: 3px solid var(--danger);
  background: var(--color-danger-tint-15);
  color: var(--color-danger-text);
  display: none;
  margin-bottom: 14px;
}

.form-success {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  border-left: 3px solid var(--success);
  background: var(--color-success-tint-15);
  color: var(--color-success-text);
  display: none;
  margin-bottom: 14px;
}

/* NEX-632: a notice the user can act on, not a failure. First use: the
   active-RFQ limit on the RFQ form. */
.form-warning {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  border-left: 3px solid var(--warning);
  background: var(--color-warning-tint-12);
  color: var(--color-text);
  margin-bottom: 14px;
}
.form-warning[hidden] { display: none; }
.form-warning a { color: inherit; font-weight: 600; }

.form-error.show,
.form-success.show { display: block; }

.form-helper {
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 2px;
}