/**
 * Формы: input/select в стиле iOS.
 */

.field {
  display: grid;
  gap: var(--space-xs);
}

.field__label {
  font-size: var(--text-caption);
  color: var(--tg-hint);
}

.input,
.select {
  min-height: var(--tap-min);
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.03);
  color: var(--tg-text);
  padding: 0 var(--space-md);
  font-size: var(--text-body);
  outline: none;
}

.input::placeholder {
  color: var(--tg-hint);
}

.input:focus,
.select:focus {
  border-color: rgba(51, 144, 236, 0.55);
  box-shadow: 0 0 0 4px rgba(51, 144, 236, 0.18);
}

@media (prefers-color-scheme: dark) {
  .input,
  .select {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
  }
  .input:focus,
  .select:focus {
    border-color: rgba(51, 144, 236, 0.60);
    box-shadow: 0 0 0 4px rgba(51, 144, 236, 0.22);
  }
}

.form-row {
  display: grid;
  gap: var(--space-sm);
}

.form-row--2 {
  grid-template-columns: 1fr auto;
  align-items: end;
}