/* ==========================================================================
   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 и поле «Ссылка на источник»
     5. Заявки v2 (12.10.2026): пояснение про подтверждение номера
        в Telegram, блок «я не робот» (Turnstile), кнопка «Подтвердить
        номер в Telegram» на панели результата

   Правила: анимаций нет; 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;
}


/* --- 5. Заявки v2: подтверждение номера в Telegram и «я не робот» --- */

/* Пояснение под именем: номер подтверждается в Telegram-боте */
.consult-phone-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(42, 171, 238, .28);
  border-radius: var(--radius-sm);
  background: rgba(42, 171, 238, .07);
}

.consult-phone-hint .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--tg);
}

/* Блок Cloudflare Turnstile. Высота виджета — 65 px (компактного — 140 px):
   место резервируем, чтобы кнопка не «прыгала», когда виджет появится. */
.consult-turnstile__widget {
  min-height: 65px;
  max-width: 100%;
}

/* Фокус ставит скрипт при ошибке «пройдите проверку» — рамка не нужна,
   рядом появляется текст ошибки */
.consult-turnstile:focus {
  outline: none;
}

/* Кнопка «Подтвердить номер в Telegram» (.consult-done__confirm) — это
   ряд .consult-done__actions из pages.css: на телефоне кнопка во всю ширину */