/* ═══════════════════════════════════════════════════════════════════════════
   ВНЕШНИЙ ВИД СТРАНИЦ ПОДБОРА (/help/* и /help/personal?leaf=…)

   Единый стиль по макету владельца: заголовок с иконкой в одну строку с
   кнопкой «назад», фото в градиентной рамке, кнопки-таблетки капсом с иконкой
   слева и шевроном справа, дисклеймер отдельной карточкой со щитом.

   Шрифт — Montserrat (SIL OFL, свободная лицензия, полная кириллица), тот же,
   что теперь на всех публичных страницах: подключён в base_login.html.

   ПОЧЕМУ ВЕЗДЕ ПРЕФИКС .nfd-screen: базовые стили .nf-helpd-* лежат в
   инлайновом <style> внутри {% block content %}, то есть ПОЗЖЕ этого файла
   в документе. При равной специфичности побеждали бы они; префикс даёт
   вес (0,2,0) против (0,1,0).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Шапка: «назад» слева, иконка и название по центру ──────────────────── */
.nfd-screen .nf-helpd-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  margin: 2px 0 18px;
  padding: 0 52px;            /* место под круглую кнопку «назад» слева */
  text-align: center;
}
.nfd-screen .nf-helpd-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(21px, 5.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #f4f7fb;
}
.nfd-screen .nf-helpd-title__ic {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.nfd-screen .nf-helpd-title__ic svg { width: 100%; height: 100%; }

/* ── Общая форма кнопок: капс, иконка слева, шеврон справа ──────────────── */
.nfd-screen .nf-helpd-dose,
.nfd-screen .nf-helpd-buy {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: clamp(60px, 13vw, 72px);
  padding: 0 clamp(18px, 4.6vw, 26px);
  border-radius: 999px;
  text-decoration: none;
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  transition: transform .15s ease, filter .2s ease;
}
.nfd-screen .nf-helpd-dose:hover,
.nfd-screen .nf-helpd-buy:hover { transform: translateY(-2px); filter: brightness(1.12); }

/* Иконка слева и шеврон справа — одинаковые в обеих кнопках. */
.nfd-screen .nf-btn-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}
.nfd-screen .nf-btn-ic svg { width: 100%; height: 100%; }
.nfd-screen .nf-btn-lbl { flex: 1 1 auto; min-width: 0; text-align: center; }
.nfd-screen .nf-btn-chev {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: .85;
}
.nfd-screen .nf-btn-chev svg { width: 100%; height: 100%; }

/* «Получить схему курса» — тёмная заливка, градиентная обводка. */
.nfd-screen .nf-helpd-dose {
  position: relative;
  color: #dff6fd;
  border: 0;
  background: linear-gradient(180deg, rgba(9, 16, 28, .92), rgba(7, 12, 22, .92));
  box-shadow: 0 0 30px rgba(61, 212, 224, .14);
  animation: none;
}
.nfd-screen .nf-helpd-dose::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(120deg, #3dd4e0 0%, #6f7bff 52%, #ff66d0 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.nfd-screen .nf-helpd-dose .nf-btn-ic { color: #3dd4e0; }
/* Надпись у этой кнопки самая длинная. Держим её строго в одну строку и
   подбираем кегль от ширины экрана — иначе на телефоне она разваливается
   на две строки и кнопка перестаёт быть похожей на остальные. */
.nfd-screen .nf-helpd-dose .nf-btn-lbl {
  white-space: nowrap;
  letter-spacing: 0.012em;
  font-size: clamp(10.5px, 2.8vw, 14.5px);
}

/* Узкие телефоны: поджимаем поля и иконку, чтобы длинная надпись гарантированно
   не наехала на шеврон. */
@media (max-width: 420px) {
  .nfd-screen .nf-helpd-dose { gap: 8px; padding: 0 14px; }
  .nfd-screen .nf-helpd-dose .nf-btn-ic { width: 22px; height: 22px; flex-basis: 22px; }
  .nfd-screen .nf-helpd-dose .nf-btn-lbl { font-size: 10.5px; }
}

/* «Купить сейчас» — фирменный градиент заливкой. */
.nfd-screen .nf-helpd-buy {
  color: #fff;
  border: 0;
  background: linear-gradient(100deg, #2fc6e6 0%, #6a5cf0 52%, #9b3df0 100%);
  box-shadow: 0 10px 34px rgba(80, 90, 240, .34), 0 0 26px rgba(61, 212, 224, .18);
  animation: nfHelpdBuyGlow 3.4s ease-in-out infinite;
}
@keyframes nfHelpdBuyGlow {
  0%, 100% { box-shadow: 0 10px 30px rgba(80, 90, 240, .30), 0 0 22px rgba(61, 212, 224, .16); }
  50%      { box-shadow: 0 12px 44px rgba(80, 90, 240, .48), 0 0 40px rgba(61, 212, 224, .30); }
}
@media (prefers-reduced-motion: reduce) {
  .nfd-screen .nf-helpd-buy { animation: none; }
}

.nfd-screen .nf-helpd-dose-wrap { padding: 16px 16px 0; }
.nfd-screen .nf-helpd-buy-wrap { padding: 16px; }

/* ── Дисклеймер — карточка со щитом, текст по левому краю ───────────────── */
.nfd-screen .nf-helpd-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 14px 16px 0;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(61, 212, 224, .22);
  background: rgba(9, 14, 24, .55);
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(226, 234, 244, .82);
  text-align: left;
}
.nfd-screen .nf-helpd-note__ic {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: #3dd4e0;
}
.nfd-screen .nf-helpd-note__ic svg { width: 100%; height: 100%; }

/* ── «Поделиться» — та же типографика, что у кнопок ─────────────────────── */
.nfd-screen .nf-share-fab {
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

/* ── Компьютер ─────────────────────────────────────────────────────────── */
@media (min-width: 960px) {
  .nfd-screen .nf-helpd-brand { padding: 0; margin-bottom: 22px; }
  .nfd-screen .nf-helpd-brand > .nf-helpd-title { display: none; }  /* название уходит в пилюлю карточки */
  .nfd-screen .nf-helpd-side .nf-helpd-dose-wrap,
  .nfd-screen .nf-helpd-side .nf-helpd-buy-wrap { padding: 0; }
  .nfd-screen .nf-helpd-side .nf-helpd-note { margin: 0; }
  .nfd-screen .nf-helpd-side .nf-helpd-dose,
  .nfd-screen .nf-helpd-side .nf-helpd-buy { min-height: 72px; border-radius: 999px; font-size: 16px; }
}