/* forms.css — inputs, selects, labels and the search field (12 §5). 44 px controls. */

.label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-strong);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease);
}

.textarea { min-height: calc(var(--control-h) * 3); padding-block: var(--sp-3); resize: vertical; }

.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }

.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); outline: none; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 0;
}

.select {
  appearance: none;
  padding-right: var(--sp-7);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - var(--sp-5)) 50%, calc(100% - var(--sp-4)) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.help { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }

/* Search field: icon inside the input. */
.search-field { position: relative; }
.search-field .bi {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.search-field .input { padding-left: calc(var(--sp-4) + var(--icon-md) + var(--sp-2)); }

/* Inline form: input + button on one row from sm up. */
.form-inline { display: flex; flex-direction: column; gap: var(--sp-2); }

@media (min-width: 576px) {
  .form-inline { flex-direction: row; }
  .form-inline > .input, .form-inline > .search-field { flex: 1; }
}