/**
 * Формы: поля, подписи, радио-карточки.
 */

.field {
  display: block;
}

.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-soft);
}

.field__hint {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}

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

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ring);
}

.input[aria-invalid="true"] {
  border-color: var(--color-danger-border);
}

.textarea {
  min-height: 6.25rem;
  resize: vertical;
}

.field--narrow .input {
  max-width: 22rem;
}

.field__error {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-danger);
}

/* Класс, а не :invalid: браузер считает поле невалидным ещё до того,
   как человек в него что-то ввёл, и форма краснела бы при загрузке */
.input.is-invalid,
.textarea.is-invalid,
.select.is-invalid {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

/* ── Радио-карточка: строка-вариант с обводкой ───────── */

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);

  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);

  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.option:hover {
  border-color: var(--color-border-strong);
}

.option.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.option__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.option__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.option__note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.option__price {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.option input[type="radio"] {
  accent-color: var(--color-primary);
  flex: none;
}

/* ── Автоподсказка ───────────────────────────────────── */

.suggest {
  position: relative;
}

.suggest__list {
  position: absolute;
  z-index: var(--z-dropdown);
  inset-inline: 0;
  margin-top: var(--space-1);

  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.suggest__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.suggest__item:hover,
.suggest__item.is-active {
  background: var(--color-surface-subtle);
}

.suggest__city {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.suggest__full {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}