/* ==========================================================================
   MEDIA BOX — СТРАНИЦА «ПОДОБРАТЬ РЕШЕНИЕ» (p-consultation.css)
   --------------------------------------------------------------------------
   Подключается на consultation.html ПОСЛЕ pages.css и ПЕРЕД future.css.
   Основные стили формы (.consult-*, .choices/.choice, .field, .form-alert)
   описаны в pages.css, раздел 6. Здесь — только новое:
     1. Ссылка «Сравнить пакеты» под пунктами вступления
     2. Подсказка к выбранному пакету («Что вас интересует»)
     3. Вторая строка в чипе («рекомендуем»)
     4. Номера шагов заявки 1–5 и поле «Ссылка на источник»

   Правила: анимаций нет; hover — только для мыши; цвета — переменные base.css.
   ========================================================================== */


/* --- 1. Ссылка на «Цены и пакеты» под пунктами вступления --- */
.consult-intro__more {
  margin-top: clamp(24px, 3vw, 32px);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}


/* --- 2. Подсказка к выбранному пакету --- */
.consult-interest {
  margin-top: 12px;
}

.consult-interest__text {
  padding: 12px 14px;
  border: 1px solid rgba(56, 217, 255, .2);
  border-radius: var(--radius);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-muted);
  background: rgba(56, 217, 255, .05);
}

.consult-interest__text b {
  color: var(--text);
}

.consult-interest__text a {
  white-space: nowrap;
}


/* --- 3. Вторая строка в чипе --- */
.choice__sub {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .06);
}

.choice input:checked + .choice__body .choice__sub {
  color: var(--accent);
  background: rgba(56, 217, 255, .12);
}


/* --- 4. Номера шагов заявки (1 ниша … 5 контакт) --- */
.field__step {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border: 1px solid rgba(56, 217, 255, .45);
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  background: rgba(56, 217, 255, .08);
  vertical-align: 1px;
}

/* Заголовок шага 5 «Ваш контакт» — над полями имени и контакта */
.consult-form__section {
  margin-bottom: -8px;   /* ближе к своим полям, чем общий gap формы (файл идёт после pages.css) */
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

/* Пометка «— если есть» у необязательного поля */
.field__opt {
  font-weight: 500;
  color: var(--text-muted);
}

/* Ссылка на основной источник — под вариантами «Куда вести трафик» */
.consult-source-link {
  margin-top: 16px;
}