@import '../../../../styles/design-tokens';

// Колонка контента. 1080px — ширина контента из дизайн-системы (как .sec в
// референсе): форма и плитки читаются аккуратно, не растягиваясь. Прижата
// влево (без margin: auto), иначе на широком экране между боковым меню и
// формой появлялась пустая полоса, а вкладки категорий сверху шли шире формы.
.content {
  width: 100%;
  max-width: 1080px;
}

// ── Заглушка формы (до появления реальных форм) ──
.formPlaceholder {
  padding: $sp-8;
  background: $white;
  border: 1px solid $gray-200;
  border-radius: $r-lg;
  box-shadow: $sh-1;
}

.backButton {
  display: inline-flex;
  align-items: center;
  gap: $sp-2;
  margin-bottom: $sp-4;
  padding: 0;
  border: 0;
  background: transparent;
  color: $navy-700;
  font-family: $font-sans;
  font-size: $fs-sm;
  cursor: pointer;
  transition: color .18s;

  &:hover {
    color: $gold-600;
  }
}

.placeholderText {
  font-family: $font-serif;
  font-size: 18px;
  color: $navy-900;
}

.loading {
  padding: $sp-8;
  color: $gray-500;
  font-size: $fs-sm;
  text-align: center;
}