/* ════════════════════════════════════════════════════════════════
   step5-trust.css
   Шаг 5 «Предоплата» — правки подачи (сентябрь 2026).
   Подключать ПОСЛЕ ds/colors_and_type.css, booking-screens.css
   и step5-variantD.css.

   Только НОВЫЕ элементы и модификаторы. Существующие правила
   (.mb6, .mb6-cta, .bk-*) не переопределяются, кроме двух
   явно помеченных модификаторов.
   ════════════════════════════════════════════════════════════════ */

/* ─── 1. Подпись терапевта под заголовком ───
   Вспомогательный блок: тише сводки и суммы. Ни рамки, ни фона,
   ни регалий — одна строка, чтобы экран читался как запись
   к человеку, а не как чек-аут. Высоту экрана добавляет на 50px. */
.bk-who {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 13px;
}
.bk-who__ph {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-cream);
}
.bk-who__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-who__txt {
  font: 400 13.5px/1.35 var(--font-body);
  color: var(--text-muted);
}
.bk-who__name { font-weight: 500; color: var(--text-dark); }

.bk-compact .bk-who { margin-bottom: 12px; }

/* на мобильном подпись ужимается — там дорог каждый пиксель до кнопки */
@media (max-width: 640px) {
  .bk-who { gap: 10px; margin-bottom: 11px; }
  .bk-who__ph { width: 32px; height: 32px; }
  .bk-who__txt { font-size: 13px; }
}

/* ─── 1b. Узкие экраны (≤360 px) ───
   На 340 px узкая колонка добавляет переносы, и низ кнопки
   «Забронировать сессию» уходит за первый экран (644 px при
   границе 640). Возвращаем его тремя мелкими сжатиями —
   формулировки не трогаем.
   • принудительный перенос в строке про чек не нужен: на 340 px
     текст и так уходит на вторую строку;
   • подпись терапевта и отступ над кнопками — по 2-3 px. */
@media (max-width: 360px) {
  .bk-btn-note br { display: none; }
  .bk-who { margin-bottom: 8px; }
  .bk-who__ph { width: 30px; height: 30px; }
  .bk-compact .bk-wiz-head { margin-bottom: 12px; }
  .bk-compact .bk-h { margin-bottom: 9px; }
  .bk-compact .mb6 { margin-top: 11px; }
  .bk-compact .bk-wiznav { margin-top: 12px; }
  /* 13px — минимум, при котором кнопка остаётся 44 px высотой */
  .bk-compact .bk-btn { padding-top: 13px; padding-bottom: 13px; }
}

/* ─── 2. Фраза-успокоение под суммой ───
   Модификатор .mb6__rest: тот же размер, но текст темнее серого —
   это главное, что человек должен прочитать до нажатия кнопки.
   Технической строки про реквизиты остатка здесь больше нет. */
.mb6__rest--calm {
  color: #57514A;
  font-size: 12.5px;
}
.mb6__rest--calm b { color: var(--text-dark); font-weight: 500; }

/* ─── 3. Блок «сначала поговорить» как вторая дорога ───
   Тонкая линия сверху отделяет его от условий предоплаты,
   первая фраза подводки — тёмная. Кнопка остаётся контурной:
   основная по-прежнему «Забронировать сессию». */
.mb6-cta--road {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  gap: 10px;
}
.mb6-cta--road .mb6-cta__lead {
  font-size: 13.5px;
  line-height: 1.5;
  color: #57514A;
  text-wrap: pretty;
}
.mb6-cta--road .mb6-cta__lead b { color: var(--text-dark); font-weight: 500; }
.mb6-cta--road .mb6-cta__btn { background: transparent; }
.mb6-cta--road .mb6-cta__btn:hover { background: var(--accent); color: #fff; }

@media (max-width: 640px) {
  .mb6-cta--road { margin-top: 12px; padding-top: 11px; }
  .mb6-cta--road .mb6-cta__lead { font-size: 13px; }
}

/* ─── 4. Обёртка условий предоплаты ───
   Нужна только для отступа. Порядок под кнопкой изменился:
   кнопка → строка про ЮKassa → плашка «Оплата защищена» → рамка условий.
   Плашка и строка про защищённую страницу говорят об одном,
   поэтому стоят рядом, а не по разные стороны рамки. */
.bk-terms { margin-top: 13px; }

/* Плашка ЮKassa переехала вплотную к строке под кнопкой */
.bk-secure--tight { margin-top: 8px; }
.bk-compact .bk-secure--tight { margin-top: 8px; }

/* ─── 5. Низкие экраны: подпись уступает место кнопке ───
   Кнопка «Забронировать сессию» — главное действие воронки, она обязана
   попадать в первый экран. Подпись терапевта занимает ~42 px с отступом и на
   невысоких вьюпортах выталкивала кнопку за границу.

   🔴 Условие по ВЫСОТЕ, а не по ширине (в пакете было max-width: 360px):
   замеры 09.09 показали, что решает именно высота вьюпорта — 340×700 ведёт
   себя лучше, чем 360×640. По ширине порог не ловится.

   Замеры до правила (очный формат, он длиннее онлайна на строку про аренду):
     390×750  запас 75 px      → подпись остаётся
     375×667  обрезана на 8 px → подпись скрывается
     360×640  обрезана на 74 px
     340×700  обрезана на 14 px
     320×568  обрезана на 166 px
   Ограничение max-width оставлено, чтобы правило не срабатывало на десктопе
   с низким окном: там места хватает, а подпись — часть замысла экрана. */
@media (max-width: 640px) and (max-height: 700px) {
  .bk-who { display: none; }
  /* Строка «После брони я свяжусь с вами…» (~50 px вместе с разделителем):
     на низких экранах уступает место кнопке. Обещание при этом НЕ теряется —
     с 09.09 оно есть в письме после оплаты (api/booking/notify.php, обе
     версии), а письмо получают все оплатившие, в отличие от экрана «Готово».
     🔴 Если строку из письма когда-нибудь уберут — вернуть её сюда видимой. */
  .mb6__rest--confirm { display: none; }
}