/* ============================================================
   BG Remover — Forms & Inputs
   ============================================================ */

label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  font-size: var(--fs-sm);
  color: var(--fg-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-yellow-strong);
  box-shadow: var(--shadow-focus);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

input::placeholder,
textarea::placeholder {
  color: var(--fg-muted);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-yellow-strong);
  width: 16px;
  height: 16px;
}

fieldset.form-group {
  margin-bottom: var(--space-4);
}

.form-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}