@charset "UTF-8";
/* ============================================================================
   Платёжный портал ВВГУ — тема поверх Bootstrap 5.3.

   Подключается ПОСЛЕ css/bootstrap.min.css, css/header/style.css и
   css/style.css: здесь только внешний вид, поведение задаёт Bootstrap.

   Слои:
     1) токены
     2) база и типографика
     3) шапка
     4) каркас страницы и заголовок
     5) карточки (в том числе карточки услуг)
     6) вкладки услуг
     7) формы
     8) кнопки
     9) оповещения и метки
    10) нумерованные шаги и текст документа
    11) экраны результата платежа
    12) совместимость со старой разметкой
    13) адаптив и печать

   Шрифты локальные (css/fonts-ui, SIL Open Font License 1.1), без обращений
   к Google Fonts: Inter 400–700 для текста, Montserrat 600 для названия.
   ========================================================================== */

/* --- 1. токены ----------------------------------------------------------- */

:root {
  /* фирменный синий */
  --po-brand: #0a56a4;
  --po-brand-strong: #07406f;
  --po-brand-hover: #0b63bd;
  --po-brand-soft: #eaf2fb;
  --po-brand-line: #cfe0f3;
  /* --po-accent — только для заливок, градиентов и фокус-кольца. Как фон под
     белым текстом он не годится: белый на #1d7fd7 даёт 4.14 (< 4.5), поэтому
     градиент с белым текстом заканчивается на #0b63bd (5.94). */
  --po-accent: #0b63bd;
  --po-accent-bright: #1d7fd7;

  /* текст */
  --po-ink: #15263c;
  --po-ink-soft: #33475f;
  /* Приглушённый текст читается на всех подложках темы. Было #6a7c92 — на
     сиреневой и зелёной плашках это 3.68 и 4.06, ниже нормы 4.5. */
  --po-muted: #5b6d84;
  --po-muted-soft: #8ea0b5;

  /* поверхности */
  --po-bg: #f3f6fb;
  --po-surface: #fff;
  --po-surface-soft: #f7f9fd;
  --po-line: #e3eaf3;
  --po-line-strong: #d3dded;

  /* статусы */
  --po-ok: #0f6b3d;
  --po-ok-soft: #e9f7f0;
  --po-ok-line: #bfe6d2;
  --po-danger: #a3202f;
  --po-danger-soft: #fdeff1;
  --po-danger-line: #f2cdd3;
  --po-warn: #7d5200;
  --po-warn-soft: #fff6e2;
  --po-warn-line: #f0dfb8;

  /* Оттенки разделов: заголовки панелей и полосы карточек чередуются,
     чтобы страница не была одноцветной. У каждого оттенка три значения:
     цвет (полоса, засечка), мягкая подложка и чернила — текст на этой
     подложке. Чернила темнее цвета: цвет на своей подложке даёт 4.1–5.4,
     а на оранжевом 4.06 — меньше нормы 4.5, поэтому текст на плашке
     берётся из отдельного, более тёмного значения. */
  --tone-1: #0a56a4;
  --tone-1-light: #eaf2fb;
  --tone-1-ink: #07406f;
  --tone-2: #0f7a6b;
  --tone-2-light: #e6f6f2;
  --tone-2-ink: #0b5c51;
  --tone-3: #7a45b8;
  --tone-3-light: #f2ebfb;
  --tone-3-ink: #5b3190;
  /* оранжевый затемнён с #b2620d: на подложке #fdf1e3 он давал 4.06 */
  --tone-4: #a85a08;
  --tone-4-light: #fdf1e3;
  --tone-4-ink: #8a4c08;

  /* геометрия и ритм */
  --po-radius-lg: 18px;
  --po-radius: 14px;
  --po-radius-sm: 10px;
  --po-control-h: 44px;

  /* тени: мягкие, без «пластилина» */
  --po-shadow-sm: 0 1px 2px rgba(16, 42, 77, .05), 0 1px 3px rgba(16, 42, 77, .04);
  --po-shadow: 0 2px 4px rgba(16, 42, 77, .04), 0 16px 32px -14px rgba(16, 42, 77, .22);
  --po-shadow-lift: 0 4px 8px rgba(16, 42, 77, .06), 0 22px 40px -18px rgba(16, 42, 77, .28);
  --po-ring: 0 0 0 3px rgba(29, 127, 215, .18);

  /* шрифты */
  --po-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --po-font-display: 'Montserrat', 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* --- 2. база и типографика ----------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  /* Ровная однотонная заливка: никаких градиентов. Любой градиент на всю
     страницу даёт видимую горизонтальную полосу («заливка не по линейке»),
     особенно на широких мониторах и при прокрутке. */
  background: var(--po-bg);
  color: var(--po-ink);
  font-family: var(--po-font);
  font-size: .9375rem;                /* 15px */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--po-font);
  color: var(--po-ink);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.28;
  text-wrap: balance;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: 1.0625rem; }
h5, h6 { font-size: .9375rem; }

p { margin-bottom: .75rem; }
p:last-child { margin-bottom: 0; }

small, .small { font-size: .8125rem; }

strong, b { font-weight: 600; }

a {
  color: var(--po-brand);
  text-decoration-color: rgba(10, 86, 164, .28);
  text-underline-offset: 2px;
  transition: color .15s ease, text-decoration-color .15s ease;
}

a:hover {
  color: var(--po-brand-hover);
  text-decoration-color: currentColor;
}

a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--po-accent);
  outline-offset: 2px;
}

::selection {
  background: rgba(29, 127, 215, .18);
  color: var(--po-ink);
}

.text-muted, .text-body-secondary { color: var(--po-muted) !important; }
.text-primary { color: var(--po-brand) !important; }
.text-success { color: var(--po-ok) !important; }
.text-danger { color: var(--po-danger) !important; }

hr {
  border-color: var(--po-line);
  opacity: 1;
  margin: 1.5rem 0;
}

.bottom { display: none; }

@media (min-width: 1200px) {
  /* строки документа не должны растягиваться на всю ширину монитора */
  .container { max-width: 1180px; }
}

/* --- 3. шапка ------------------------------------------------------------ */

/* Шапка — тёмная фирменная полоса: тот же градиент, что у героя заголовка и
   подвала, как в проектах services и admin. Раньше шапка была белой, и портал
   выглядел «белой рамочкой вокруг синего» — при переходе между сервисами ВВГУ
   он читался как другое приложение.

   Белый текст держится на самом светлом стопе (#2f6bb0) — 5.45; подзаголовок
   не белый и не полупрозрачный, а #e3eefb (4.65). Сквозь полупрозрачный фон
   при прокрутке просвечивал контент, поэтому сама полоса сплошная (без
   backdrop-filter), а «стекло» осталось только у пилюль — и оно затемняющее:
   белый слой rgba(255,255,255,.16) поверх #2f6bb0 дал бы 3.87, текст на нём
   не читается. */
.po-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background:
    radial-gradient(520px 200px at 4% -60%, rgba(120, 190, 255, .16), transparent 70%),
    linear-gradient(100deg, #16304f 0%, #245083 42%, #2f6bb0 100%);
  border-bottom: none;
  box-shadow: 0 8px 22px -16px rgba(11, 47, 87, .85);
  color: #fff;
}

.po-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
  padding: .5rem 0;
}

.po-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  text-decoration: none;
}

.po-brand:hover,
.po-brand:focus {
  color: #fff;
  text-decoration: none;
}

/* Логотип в шапке — белая версия (logo.svg / logo_en.svg): синий logo_blue.svg
   на тёмной полосе даёт контраст около 1.9 и почти невидим. */
.po-brand img {
  display: block;
  height: 34px;
  width: auto;
}

.po-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.po-brand-name {
  font-family: var(--po-font-display);
  font-weight: 600;
  font-size: .9375rem;
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.po-brand-sub {
  font-size: .75rem;
  color: #e3eefb;
  letter-spacing: .01em;
}

.po-header-side {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

/* Пилюли в шапке — затемняющее стекло с белой волосяной рамкой. */
.po-pay-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .75rem .25rem .5rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.po-pay-chip img {
  display: block;
  height: 15px;
  width: auto;
  /* Зелёный знак МИР на тёмной пилюле читается, но лишняя насыщенность
     спорит с фирменным синим — слегка приглушаем. */
  filter: saturate(.9);
}

.po-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 34px;
  padding: .25rem .75rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.po-lang:hover,
.po-lang:focus {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .34);
  color: #fff;
}

/* --- 3.1 подвал ---------------------------------------------------------- */

/* Подвал — тёмная фирменная полоса, как в services и admin: организация слева,
   телефон поддержки и год справа. Он есть на каждой странице, поэтому низ
   длинной страницы не выглядит обрезанным, а короткая (успех/ошибка) не
   заканчивается пустым фоном: body — колонка на всю высоту, .po-main тянется.

   Фон именно полоса, а не заливка страницы: правило «фон body без градиентов»
   остаётся в силе. Белый текст держится на самом светлом стопе (#2f6bb0) —
   5.45. */
.po-footer {
  margin-top: auto;
  padding: 1rem 0;
  background: linear-gradient(100deg, #16304f 0%, var(--po-brand) 58%, #2f6bb0 100%);
  color: #fff;
  font-size: .8125rem;
  line-height: 1.5;
}

.po-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.25rem;
}

.po-footer-org {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.po-footer-icon {
  flex: 0 0 auto;
  opacity: .9;
}

.po-footer-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  color: rgba(255, 255, 255, .88);
}

.po-footer a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: 2px;
}

.po-footer a:hover,
.po-footer a:focus {
  color: #fff;
  text-decoration-color: #fff;
}

/* --- 4. каркас страницы и заголовок -------------------------------------- */

/* Колонка на всю высоту: подвал прижат к низу окна на коротких страницах.
   Раньше body был обычным блоком, и на странице «платёж выполнен» подвал
   оказывался посередине экрана. */
body {
  display: flex;
  flex-direction: column;
}

.po-main {
  flex: 1 0 auto;
  padding: 2rem 0 3.5rem;
}

/* Заголовок страницы — фирменный герой-блок. Один и тот же вид для новых
   (.po-page-head) и старых (.page-header) страниц: заголовок задаёт первое
   впечатление, поэтому это не строка текста, а тёмная плашка с мягкими
   бликами. Фон страницы при этом остаётся одним плоским цветом — цвет живёт
   в самом блоке, а не размазан под ним.

   Белый текст держится на самом светлом стопе градиента (#2f6bb0): 5.45.
   Подзаголовок — не белый и не полупрозрачный, а светло-голубой #e3eefb:
   4.65 на том же стопе. Полупрозрачный белый здесь дал бы 4.1 и меньше. */
.po-page-head,
.page-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 0 0 1.75rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--po-radius-lg);
  color: #fff;
  background:
    radial-gradient(560px 240px at 6% -40%, rgba(122, 190, 255, .30), transparent 70%),
    radial-gradient(520px 240px at 97% 135%, rgba(139, 92, 246, .26), transparent 70%),
    linear-gradient(112deg, #16304f 0%, #245083 52%, #2f6bb0 100%);
  box-shadow: 0 18px 36px -26px rgba(16, 42, 77, .95);
  overflow: hidden;
}

/* Точечный узор поверх градиента: 1 px через 18 px, доли процента площади,
   поэтому фон под текстом он практически не осветляет. Содержимое поднято
   над узором — иначе точки лягут на буквы. */
.po-page-head::after,
.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .5;
  pointer-events: none;
}

.po-page-head > *,
.page-header > * {
  position: relative;
  z-index: 1;
}

.po-page-title,
.po-page-head h1,
.po-page-head h2,
.page-header h1,
.page-header h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}

.po-page-sub {
  margin: .5rem 0 0;
  max-width: 62ch;
  font-size: .9375rem;
  color: #e3eefb;
}

.po-page-head-side {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Внутри тёмного героя вторичная кнопка и плашка пользователя были бы
   невидимы: белая заливка на синем фоне. Делаем их стеклянными — но
   ЗАТЕМНЯЮЩИМИ, а не осветляющими: белый слой поверх светлого стопа героя
   (#2f6bb0) даёт 4.28 и белый текст на нём не читается. Чёрный слой той же
   плотности уводит фон в 8.9 и выше. Чем светлее стоп, тем важнее правило. */
.po-page-head .btn-secondary,
.page-header .btn-secondary {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(0, 0, 0, .3);
  color: #fff;
}

.po-page-head .btn-secondary:hover,
.po-page-head .btn-secondary:focus,
.page-header .btn-secondary:hover,
.page-header .btn-secondary:focus {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(0, 0, 0, .45);
  color: #fff;
}

/* Плашка пользователя — в шапке, рядом с пилюлями: тёмное стекло, белый
   текст, аватар с инициалами. Раньше она стояла в плашке заголовка страницы
   и показывала логин, хотя ФИО уже было получено из sp_GetUserInfoPayOnline.
   Теперь ФИО в верхней полосе — как .user-pill в services и admin. */
.po-user {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 15rem;
  min-height: 34px;
  padding: .25rem .75rem .25rem .25rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font-size: .8125rem;
  white-space: nowrap;
}

/* Аватар — светлый круг с тёмными инициалами: так же в services. Светлая
   заливка на тёмной шапке читается лучше, чем ещё один тёмный слой. */
.po-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, #fff, #dce7f6);
  color: var(--po-brand-strong);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

.po-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Выход — контурная кнопка, как btn-exit в services. Наведение затемняет,
   а не осветляет: белый слой .16 на светлом стопе шапки дал бы 3.87. */
.po-logout {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 34px;
  padding: .25rem .75rem;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  color: #fff;
  font-size: .8125rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.po-logout:hover,
.po-logout:focus {
  border-color: #fff;
  background: rgba(0, 0, 0, .34);
  color: #fff;
  text-decoration: none;
}

.po-logout svg { flex: 0 0 auto; }

@media (max-width: 1199.98px) {
  .po-page-title,
  .po-page-head h1, .po-page-head h2,
  .page-header h1, .page-header h2 { font-size: 1.375rem; }
}

/* --- 5. карточки --------------------------------------------------------- */

.card {
  border: 1px solid var(--po-line);
  border-radius: var(--po-radius-lg);
  background: var(--po-surface);
  box-shadow: var(--po-shadow-sm);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.5rem;
  background: transparent;
  border-bottom: 1px solid var(--po-line);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--po-ink);
}

.card-body { padding: 1.5rem; }

.card-footer {
  padding: 1rem 1.5rem;
  background: var(--po-surface-soft);
  border-top: 1px solid var(--po-line);
}

/* «Рекомендуемая сумма оплаты» в карточках услуг: подпись сверху, сумма
   снизу крупно. Разметка исторически оборачивает <h4> в <small>, поэтому
   выравниваем это правилами, а не переписыванием всех карточек. */
.card-footer small {
  display: block;
  font-size: .8125rem;
  color: var(--po-muted);
  line-height: 1.35;
}

.card-footer small h4 {
  display: inline-block;
  margin: .25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--po-ink);
  font-variant-numeric: tabular-nums;
}

/* Подвал карточки услуги: подпись тише, сумма заметнее. Та же пара, что и
   <small><h4> выше, но в валидной разметке (span вместо блочного заголовка
   внутри строчного элемента). */
.card-footer .po-card-caption {
  display: block;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--po-muted);
  line-height: 1.35;
}

.card-footer .po-card-sum {
  display: block;
  margin-top: .25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--po-ink);
  font-variant-numeric: tabular-nums;
}

/* карточка услуги: выбирается кликом, выделение ставит js/main.js.
   Высоты выравниваются по ряду: контейнер — flex, карточки тянутся на всю
   высоту, подвал прижат к низу, поэтому суммы в карточках стоят на одной линии
   независимо от длины описания.
   ВАЖНО: разметка услуг приходит из шаблонов lang в pay.php обычными .card
   внутри .d-flex.flex-wrap (без класса po-service-card), поэтому селекторы
   цепляют и такие карточки — иначе ширины и высоты в ряду расходятся. */
.po-service-card,
.tab-pane .card,
.d-flex > .card:not(.po-amount-card) {
  flex: 1 1 19rem;
  min-width: 0;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .18s ease, transform .14s ease;
}

.po-service-card .card-footer,
.tab-pane .card .card-footer,
.d-flex > .card:not(.po-amount-card) .card-footer { margin-top: auto; }

/* Отступ в ряду карточек услуг задаёт только gap контейнера.
   В разметке у карточек остался исторический mb-3, и он складывался с gap:
   по горизонтали между карточками было 16 px, по вертикали 32 px — ряд
   с переносом выглядел рваным, а на узком экране карточки шли с двойным
   интервалом. Утилита .mb-3 объявлена в Bootstrap с !important, поэтому
   перебить её можно только так же; правило узкое — только карточки прямо
   внутри flex-контейнера, где отступ уже даёт gap. */
.d-flex.flex-wrap > .card { margin-bottom: 0 !important; }

/* карточки в колонках сетки (col-md-6 в услугах, бейджи, общежитие):
   колонка тянется на высоту ряда, карточка занимает её целиком. */
.row > [class*="col-"] > .card { height: 100%; }
.row > [class*="col-"] > .card .card-footer { margin-top: auto; }

.po-service-card:hover,
.tab-pane .card:hover {
  border-color: var(--po-brand-line);
  box-shadow: var(--po-shadow);
  transform: translateY(-2px);
}

.po-service-card .card-header,
.tab-pane .card .card-header {
  background: var(--po-surface-soft);
  font-size: .875rem;
  font-weight: 600;
  color: var(--po-brand);
}

.po-service-card .card-body,
.tab-pane .card .card-body { padding: 1rem 1.5rem; }

/* текст внутри карточки услуги: подписи тише, значения заметнее */
.po-service-card .card-body p,
.tab-pane .card .card-body p {
  margin-bottom: .25rem;
  font-size: .875rem;
  color: var(--po-ink-soft);
}

.po-service-card .card-body h4,
.tab-pane .card .card-body h4 {
  font-size: .9375rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

/* Выбранная карточка. js/main.js добавляет .select и .border-danger —
   красную рамку Bootstrap заменяем фирменным кольцом. */
.po-service-card.select,
.tab-pane .card.select,
.po-service-card.border-danger,
.tab-pane .card.border-danger {
  border-color: var(--po-brand) !important;
  box-shadow: 0 0 0 3px rgba(29, 127, 215, .18), var(--po-shadow);
  background: #fff;
}

.po-service-card.select .card-header,
.tab-pane .card.select .card-header,
.po-service-card.border-danger .card-header,
.tab-pane .card.border-danger .card-header {
  background: var(--po-brand-soft);
  color: var(--po-brand-strong);
}

/* карточки готовых сумм (пожертвования, лекторий, тестирование) */
.po-amount-card,
.card.po-amount-card {
  flex: 0 0 auto;
  min-width: 8.5rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .16s ease, box-shadow .18s ease;
}

.po-amount-card .card-footer {
  padding: .75rem 1rem;
  background: #fff;
}

.po-amount-card:hover { border-color: var(--po-brand-line); box-shadow: var(--po-shadow); }

.po-amount-card.select,
.po-amount-card.border-danger {
  border-color: var(--po-brand) !important;
  box-shadow: 0 0 0 3px rgba(29, 127, 215, .18);
}

.po-amount-card.select .card-footer,
.po-amount-card.border-danger .card-footer { background: var(--po-brand-soft); }

/* Крупное значение в карточке выбора суммы: «500 ₽» без подписи. */
.po-amount-choice {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--po-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.po-amount-card .card-body { padding: 1rem 1rem; }

/* --- Цвет на карточках оплаты -------------------------------------------
   Карточки сумм — главный интерактивный элемент страниц доната, лектория и
   тестирования. Раньше они были белыми и терялись на белых панелях.
   Теперь: цветная подложка со своим оттенком у каждой карточки по кругу,
   цветная полоса сверху, сумма цветом оттенка; при выборе карточка
   заливается фирменным градиентом целиком. */

.card.po-amount-card {
  position: relative;
  overflow: hidden;
  border-color: var(--po-card-line, var(--po-brand-line));
  background: var(--po-card-bg, linear-gradient(165deg, #fff 0%, #f1f7fe 100%));
  box-shadow: 0 1px 2px rgba(10, 86, 164, .07);
}

/* полоса сверху — тот же приём, что у карточек услуг */
.card.po-amount-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--tone, var(--po-brand));
}

/* четыре оттенка по кругу: синий, зелёный, фиолетовый, оранжевый */
.card.po-amount-card:nth-child(4n + 1) {
  --tone: var(--tone-1);
  --po-card-line: #cfe0f3;
  --po-card-bg: linear-gradient(165deg, #fff 0%, #eaf2fb 100%);
}
.card.po-amount-card:nth-child(4n + 2) {
  --tone: var(--tone-2);
  --po-card-line: #c6e8e0;
  --po-card-bg: linear-gradient(165deg, #fff 0%, #e6f6f2 100%);
}
.card.po-amount-card:nth-child(4n + 3) {
  --tone: var(--tone-3);
  --po-card-line: #e0d3f5;
  --po-card-bg: linear-gradient(165deg, #fff 0%, #f2ebfb 100%);
}
.card.po-amount-card:nth-child(4n) {
  --tone: var(--tone-4);
  --po-card-line: #f3ddc4;
  --po-card-bg: linear-gradient(165deg, #fff 0%, #fdf1e3 100%);
}

.card.po-amount-card .po-amount-choice {
  color: var(--tone, var(--po-brand-strong));
}

.card.po-amount-card:hover {
  border-color: var(--tone, var(--po-brand));
  box-shadow: 0 6px 16px rgba(10, 86, 164, .16);
  transform: translateY(-2px);
}

.card.po-amount-card.select,
.card.po-amount-card.border-danger {
  border-color: var(--po-brand) !important;
  background: linear-gradient(150deg, var(--po-brand) 0%, var(--po-accent) 100%);
  box-shadow: 0 8px 20px rgba(10, 86, 164, .3);
}

.card.po-amount-card.select::before,
.card.po-amount-card.border-danger::before {
  background: #fff;
  opacity: .9;
  height: 5px;
}

.card.po-amount-card.select .po-amount-choice,
.card.po-amount-card.border-danger .po-amount-choice {
  color: #fff;
}

/* Выбранная сумма помечается галочкой: одна заливка синим читается как
   «подсвечено», но не как «выбрано». Галочка — на псевдоэлементе body,
   поэтому не требует правок в разметке и работает с любым набором сумм. */
.card.po-amount-card .card-body { position: relative; }

.card.po-amount-card.select .card-body::after,
.card.po-amount-card.border-danger .card-body::after {
  content: "✓";
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #fff;
  color: var(--po-brand);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
}

.card.po-amount-card.select .card-footer,
.card.po-amount-card.border-danger .card-footer {
  background: transparent;
  border-top-color: rgba(255, 255, 255, .25);
}

/* Карточки услуг: цветная полоса сверху, свой оттенок у каждой по счёту.
   Полоса живёт на псевдоэлементе, поэтому не мешает .card-header и не
   влияет на отступы. Разметка услуг — обычные .card внутри .d-flex.flex-wrap,
   поэтому в списках селекторов есть и этот вариант. */
.po-service-card,
.tab-pane .card,
.d-flex > .card:not(.po-amount-card),
.row > [class*="col-"] > .card {
  position: relative;
  overflow: hidden;
}

.po-service-card::before,
.tab-pane .card::before,
.d-flex > .card:not(.po-amount-card)::before,
.row > [class*="col-"] > .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--tone, var(--po-brand));
  opacity: .85;
}

.po-service-card:nth-child(4n + 1),
.tab-pane .card:nth-child(4n + 1),
.d-flex > .card:not(.po-amount-card):nth-child(4n + 1) { --tone: var(--tone-1); }
.po-service-card:nth-child(4n + 2),
.tab-pane .card:nth-child(4n + 2),
.d-flex > .card:not(.po-amount-card):nth-child(4n + 2) { --tone: var(--tone-2); }
.po-service-card:nth-child(4n + 3),
.tab-pane .card:nth-child(4n + 3),
.d-flex > .card:not(.po-amount-card):nth-child(4n + 3) { --tone: var(--tone-3); }
.po-service-card:nth-child(4n),
.tab-pane .card:nth-child(4n),
.d-flex > .card:not(.po-amount-card):nth-child(4n)      { --tone: var(--tone-4); }

/* полоса в колонках сетки считается по позиции карточки в ряду */
.row > [class*="col-"]:nth-child(4n + 1) > .card::before { background: var(--tone-1); --tone: var(--tone-1); }
.row > [class*="col-"]:nth-child(4n + 2) > .card::before { background: var(--tone-2); --tone: var(--tone-2); }
.row > [class*="col-"]:nth-child(4n + 3) > .card::before { background: var(--tone-3); --tone: var(--tone-3); }
.row > [class*="col-"]:nth-child(4n) > .card::before     { background: #c1660f; --tone: var(--tone-4); }

.po-service-card.select::before,
.tab-pane .card.select::before,
.po-service-card.border-danger::before,
.tab-pane .card.border-danger::before,
.d-flex > .card:not(.po-amount-card).select::before,
.d-flex > .card:not(.po-amount-card).border-danger::before {
  background: var(--po-brand);
  opacity: 1;
  height: 5px;
}

/* Сумма в подвале карточки услуги — цветом бренда, чтобы читалась сразу. */
.po-service-card .po-card-sum,
.tab-pane .card .po-card-sum,
.d-flex > .card:not(.po-amount-card) .po-card-sum,
.po-service-card .card-footer small h4,
.tab-pane .card .card-footer small h4,
.d-flex > .card:not(.po-amount-card) .card-footer small h4 {
  color: var(--po-brand-strong);
}

/* картинка в тексте страницы: скругление и единая высота ряда */
.po-media {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 15rem;
  object-fit: cover;
  border-radius: var(--po-radius);
  background: var(--po-surface-soft);
}

/* Полоса сбора средств. Отдельный класс, а не .progress: .progress на этих
   страницах занят индикатором отправки формы (его показывает donation.js). */
.po-progress {
  height: 10px;
  border-radius: 999px;
  background: #e7eef7;
  overflow: hidden;
}

.po-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--po-brand), var(--po-accent));
  transition: width .4s ease;
}

/* крупная сумма сбора */
.po-fund-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--po-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.po-fund-grid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: .25rem 0 .5rem;
  font-size: .8125rem;
  color: var(--po-muted);
  font-variant-numeric: tabular-nums;
}

/* карточка-блок с отступами и заголовком внутри содержимого.
   Отступ вынесен в переменную --po-panel-pad: от неё же считается вынос
   плашки заголовка, чтобы она вставала ровно к верхней кромке карточки. */
.po-panel {
  --po-panel-pad: 1.5rem;
  padding: var(--po-panel-pad);
  border: 1px solid var(--po-line);
  border-radius: var(--po-radius-lg);
  background: var(--po-surface);
  box-shadow: var(--po-shadow-sm);
  /* Панель обрезает содержимое по своим скруглениям: плашка заголовка
     выезжает за поля до самой кромки, и её верхние углы повторяют радиус
     карточки сами, без отдельного радиуса на плашке. */
  overflow: hidden;
}

.po-panel + .po-panel { margin-top: 1.25rem; }

/* Панель — единственный блок в колонке — тянется на всю высоту ряда.
   Bootstrap выравнивает колонки по высоте (align-items: stretch), но сама
   панель внутри колонки не растягивается, и рядом с колонкой из двух панелей
   она выглядит заметно короче — ряд смотрится неопрятно. Растягиваем только
   одинокую панель: если панелей в колонке несколько, у каждой своя высота по
   содержимому, иначе они наложились бы друг на друга.
   Только от md и выше: на телефоне колонки стоят друг под другом, ряда нет,
   и растягивать панель не по чему — там высота всегда по содержимому. */
@media (min-width: 768px) {
  .row > [class*="col-"] > .po-panel:only-child { height: 100%; }
}

.po-panel-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 .75rem;
}

/* Заголовок панели — заметная плашка с цветной засечкой и мягкой подложкой.
   Оттенок чередуется по кругу, поэтому страница не выглядит одноцветной,
   а разделы легко находятся глазом.
   Плашка прижата к верхней кромке карточки: тянется на всю ширину за счёт
   отрицательных боковых полей и вверх на весь padding карточки, поэтому
   между заливкой и рамкой нет белого зазора. Верхние углы повторяют радиус
   карточки, нижние — малый радиус. */
.po-panel > .po-panel-title:first-child {
  position: relative;
  margin: calc(var(--po-panel-pad) * -1) calc(var(--po-panel-pad) * -1) 1rem;
  padding: 1rem var(--po-panel-pad) 1rem calc(var(--po-panel-pad) + 1rem);
  background: var(--tone-light, var(--po-brand-soft));
  color: var(--tone-ink, var(--po-brand-strong));
  box-shadow: inset 0 -1px 0 rgba(16, 42, 77, .06);
}

.po-panel > .po-panel-title:first-child::before {
  content: "";
  position: absolute;
  left: var(--po-panel-pad);
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.15em;
  border-radius: var(--po-radius-sm);
  background: var(--tone, var(--po-brand));
}

/* Оттенок плашки = позиция колонки в ряду + позиция панели в колонке, по кругу
   из четырёх. Раньше чередование считалось только внутри колонки, и на
   страницах, где в колонке одна панель (главная, услуги), все заголовки
   выходили синими — страница выглядела одноцветной. Без арифметики в CSS это
   16 правил, зато цвет предсказуем при любом числе разделов. */
.row > [class*="col-"]:nth-child(4n + 1) > .po-panel:nth-of-type(4n + 1) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n + 2) > .po-panel:nth-of-type(4n) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n + 3) > .po-panel:nth-of-type(4n + 3) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n) > .po-panel:nth-of-type(4n + 2) > .po-panel-title:first-child {
  --tone: var(--tone-1); --tone-light: var(--tone-1-light); --tone-ink: var(--tone-1-ink);
}

.row > [class*="col-"]:nth-child(4n + 1) > .po-panel:nth-of-type(4n + 2) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n + 2) > .po-panel:nth-of-type(4n + 1) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n + 3) > .po-panel:nth-of-type(4n) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n) > .po-panel:nth-of-type(4n + 3) > .po-panel-title:first-child {
  --tone: var(--tone-2); --tone-light: var(--tone-2-light); --tone-ink: var(--tone-2-ink);
}

.row > [class*="col-"]:nth-child(4n + 1) > .po-panel:nth-of-type(4n + 3) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n + 2) > .po-panel:nth-of-type(4n + 2) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n + 3) > .po-panel:nth-of-type(4n + 1) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n) > .po-panel:nth-of-type(4n) > .po-panel-title:first-child {
  --tone: var(--tone-3); --tone-light: var(--tone-3-light); --tone-ink: var(--tone-3-ink);
}

.row > [class*="col-"]:nth-child(4n + 1) > .po-panel:nth-of-type(4n) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n + 2) > .po-panel:nth-of-type(4n + 3) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n + 3) > .po-panel:nth-of-type(4n + 2) > .po-panel-title:first-child,
.row > [class*="col-"]:nth-child(4n) > .po-panel:nth-of-type(4n + 1) > .po-panel-title:first-child {
  --tone: var(--tone-4); --tone-light: var(--tone-4-light); --tone-ink: var(--tone-4-ink);
}

/* --- 6. вкладки услуг ---------------------------------------------------- */

/* Bootstrap .nav-tabs переоформлен в «таблетки»: маркеры скриптов
   (js/main.js ищет .nav-tabs .active и data-service) сохраняются. */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-bottom: 0;
  margin-bottom: .25rem;
}

.nav-tabs .nav-item { margin: 0; }

.nav-tabs .nav-link {
  border: 1px solid var(--po-line);
  border-radius: 999px;
  background: #fff;
  color: var(--po-ink-soft);
  font-size: .875rem;
  font-weight: 600;
  padding: .5rem 1rem;
  line-height: 1.3;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--po-brand-line);
  background: var(--po-brand-soft);
  color: var(--po-brand);
}

/* Активная вкладка залита фирменным цветом. При наведении фон раньше
   возвращался к светлому из общего правила :hover, а текст оставался белым —
   надпись пропадала. Держим заливку и на hover, меняя только оттенок. */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
  border-color: var(--po-brand);
  background: var(--po-brand);
  color: #fff;
  box-shadow: 0 2px 6px rgba(10, 86, 164, .28);
}

.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
  background: var(--po-brand-hover);
  border-color: var(--po-brand-hover);
}

.tab-content > .tab-pane { padding-top: 1rem; }

/* --- 7. формы ------------------------------------------------------------ */

.form-label,
label {
  display: block;
  margin-bottom: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--po-ink-soft);
  letter-spacing: .005em;
}

.form-control,
.form-select {
  min-height: var(--po-control-h);
  padding: .5rem .75rem;
  border: 1px solid var(--po-line-strong);
  border-radius: var(--po-radius-sm);
  background-color: #fff;
  font-size: .9375rem;
  color: var(--po-ink);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder { color: #9aabc0; opacity: 1; }

.form-control:focus,
.form-select:focus {
  border-color: var(--po-accent);
  box-shadow: var(--po-ring);
}

.form-control:disabled,
.form-control[disabled],
.form-select:disabled {
  background-color: var(--po-surface-soft);
  color: var(--po-ink-soft);
  border-color: var(--po-line);
  opacity: 1;                       /* иначе текст «ФИО» выцветает в серый */
}

.form-text {
  font-size: .8125rem;
  color: var(--po-muted);
  margin-top: .25rem;
}

.input-group > .form-control { min-height: var(--po-control-h); }

.input-group-text {
  min-height: var(--po-control-h);
  padding: .5rem .75rem;
  border: 1px solid var(--po-line-strong);
  border-radius: var(--po-radius-sm);
  background: var(--po-surface-soft);
  color: var(--po-muted);
  font-weight: 600;
}

.input-group > .input-group-text:first-child { border-right: 0; }
.input-group > .input-group-text:first-child + .form-control { border-left: 0; }
.input-group > .form-control:focus { border-left: 1px solid var(--po-accent); }

/* поле «только чтение» показывает значение как данные, а не как ввод */
.form-control-plaintext {
  min-height: auto;
  padding: .25rem 0;
  border: 0;
  background: transparent;
  font-weight: 600;
  color: var(--po-ink);
}

.form-check-input {
  width: 1.05em;
  height: 1.05em;
  margin-top: .2em;
  border-color: var(--po-line-strong);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.form-check-input:checked {
  background-color: var(--po-brand);
  border-color: var(--po-brand);
}

.form-check-input:focus {
  border-color: var(--po-accent);
  box-shadow: var(--po-ring);
}

.form-check-label,
.form-check .form-check-label {
  display: inline;
  margin-bottom: 0;
  font-size: .875rem;
  font-weight: 400;
  color: var(--po-ink-soft);
}

.form-check { padding-left: 1.6em; }

.invalid-feedback {
  display: none;
  font-size: .8125rem;
  color: var(--po-danger);
}

/* подсказка под полем: тише и мельче, без навязчивой красной рамки */
.po-hint {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--po-muted);
}

.form-control.is-valid,
.was-validated .form-control:valid,
.form-control.is-invalid {
  background-image: none;           /* убираем зелёную/красную галочку в углу */
  padding-right: .75rem;
}

.form-control.is-invalid { border-color: #d8888f; background-color: #fffafa; }

/* --- 8. кнопки ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 40px;
  padding: .5rem 1rem;
  border-radius: var(--po-radius-sm);
  font-size: .9375rem;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease,
              border-color .15s ease, color .15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-lg {
  min-height: 48px;
  padding: .75rem 1.5rem;
  border-radius: var(--po-radius);
  font-size: 1.0625rem;
}

.btn-sm {
  min-height: 34px;
  padding: .25rem .75rem;
  border-radius: var(--po-radius-sm);
  font-size: .8125rem;
}

.btn-primary {
  --bs-btn-bg: var(--po-brand);
  --bs-btn-border-color: var(--po-brand);
  --bs-btn-hover-bg: var(--po-brand-hover);
  --bs-btn-hover-border-color: var(--po-brand-hover);
  --bs-btn-active-bg: var(--po-brand-strong);
  --bs-btn-active-border-color: var(--po-brand-strong);
  --bs-btn-disabled-bg: #7ba4cd;
  --bs-btn-disabled-border-color: #7ba4cd;
  box-shadow: 0 1px 2px rgba(10, 86, 164, .3);
}

.btn-secondary {
  --bs-btn-color: var(--po-ink-soft);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--po-line-strong);
  --bs-btn-hover-color: var(--po-ink);
  --bs-btn-hover-bg: #f3f7fc;
  --bs-btn-hover-border-color: #c7d4e4;
  --bs-btn-active-bg: #eaf0f8;
  --bs-btn-active-border-color: #c7d4e4;
}

.btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--po-line);
  --bs-btn-hover-bg: var(--po-surface-soft);
  --bs-btn-hover-border-color: var(--po-brand-line);
}

.btn-link {
  min-height: auto;
  padding: 0;
  border: 0;
  color: var(--po-brand);
  font-weight: 600;
  text-decoration: none;
}

.btn-link:hover { text-decoration: underline; }

/* ряд действий под формой */
.po-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

/* --- 9. оповещения и метки ----------------------------------------------- */

.alert {
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem 1rem;
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: var(--po-radius);
  font-size: .9375rem;
  box-shadow: none;
}

.alert > :last-child { margin-bottom: 0; }
.alert-heading { font-size: 1.0625rem; font-weight: 600; margin-bottom: .5rem; }
.alert p { margin-bottom: .5rem; }
.alert ul, .alert ol { margin: .25rem 0 0; padding-left: 1rem; }
.alert li + li { margin-top: .25rem; }

.alert-success {
  background: var(--po-ok-soft);
  border-color: var(--po-ok-line);
  border-left-color: var(--po-ok);
  color: #135c36;
}

.alert-success .alert-heading { color: var(--po-ok); }
.alert-success .alert-link { color: var(--po-ok); font-weight: 600; }

.alert-danger {
  background: var(--po-danger-soft);
  border-color: var(--po-danger-line);
  border-left-color: var(--po-danger);
  color: #8d1c29;
}

.alert-danger .alert-heading { color: var(--po-danger); }
.alert-danger .alert-link { color: var(--po-danger); font-weight: 600; }

.alert-warning {
  background: var(--po-warn-soft);
  border-color: var(--po-warn-line);
  border-left-color: #b3791a;
  color: #6f4a05;
}

.alert-info,
.alert-primary {
  background: var(--po-brand-soft);
  border-color: var(--po-brand-line);
  border-left-color: var(--po-brand);
  color: #0b4a8a;
}

.alert .btn-close { padding: 1rem; }

/* У закрываемого оповещения кнопка «крестик» — position: absolute, поэтому
   текст под неё не подстраивается и последняя строка уходит под кнопку
   (проверено замером: два текстовых прямоугольника пересекались с кнопкой).
   Bootstrap в .alert-dismissible сам добавляет padding-right, но здесь он
   перекрыт общим padding .alert — возвращаем место под кнопку. */
.alert-dismissible { padding-right: 3.25rem; }

.badge {
  padding: .34em .62em;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .015em;
}

.po-badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: var(--po-brand-soft);
  color: var(--po-brand);
  font-size: .75rem;
  font-weight: 600;
}

/* --- 10. нумерованные шаги и текст документа ----------------------------- */

/* Список шагов процедуры оплаты. Разметка: ul.po-steps > li > span.po-step-num
   + div.po-step-text. Нумерация «1, 2, 3…» задаётся счётчиком. */
.po-steps {
  list-style: none;
  counter-reset: po-step;
  margin: 0;
  padding: 0;
}

.po-steps > li {
  position: relative;
  counter-increment: po-step;
  padding: 0 0 1rem 2.5rem;
  margin: 0;
  font-size: .9375rem;
  color: var(--po-ink-soft);
}

.po-steps > li:last-child { padding-bottom: 0; }

.po-steps > li::before {
  content: counter(po-step);
  position: absolute;
  left: 0;
  top: .05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--po-brand-soft);
  color: var(--po-brand);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* вертикальная нить между шагами */
.po-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 34px;
  bottom: 6px;
  width: 2px;
  border-radius: 999px;
  background: var(--po-line);
}

/* Длинный текст документа: комфортная длина строки и читаемый ритм. */
.po-prose {
  max-width: 74ch;
  font-size: .9375rem;
  color: var(--po-ink-soft);
}

.po-prose > p { margin-bottom: 1rem; }

.po-prose h2,
.po-prose h3 {
  margin-top: 1.75rem;
  margin-bottom: .75rem;
  color: var(--po-ink);
}

.po-prose h2:first-child,
.po-prose h3:first-child { margin-top: 0; }

.po-prose ul,
.po-prose ol {
  margin: 0 0 1rem;
  padding-left: 1rem;
}

.po-prose li { margin-bottom: .5rem; }
.po-prose li:last-child { margin-bottom: 0; }

/* список с мягкими маркерами вместо стандартных жирных точек */
.po-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.po-list > li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
  color: var(--po-ink-soft);
}

.po-list > li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--po-brand-line);
}

.po-list > li:last-child { margin-bottom: 0; }

/* блок «две колонки» для условий и реквизитов */
.po-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.po-kv { margin: 0; }

.po-kv dt {
  margin-bottom: .25rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--po-muted);
}

.po-kv dd {
  margin: 0 0 1rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--po-ink);
  font-variant-numeric: tabular-nums;
}

.po-kv dd:last-child { margin-bottom: 0; }

/* --- 11. экраны результата платежа -------------------------------------- */

.po-status {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--po-line);
  border-radius: var(--po-radius-lg);
  background: var(--po-surface);
  box-shadow: var(--po-shadow-sm);
}

.po-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}

.po-status-ok { border-color: var(--po-ok-line); }
.po-status-ok .po-status-icon { background: var(--po-ok-soft); color: var(--po-ok); }

.po-status-fail { border-color: var(--po-danger-line); }
.po-status-fail .po-status-icon { background: var(--po-danger-soft); color: var(--po-danger); }

.po-status-body { min-width: 0; }

.po-status-title {
  margin: 0 0 .25rem;
  font-size: 1.375rem;
  font-weight: 600;
}

.po-status-text {
  margin: 0;
  color: var(--po-ink-soft);
  font-size: .9375rem;
}

/* сумма платежа крупно */
.po-amount {
  font-family: var(--po-font);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--po-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.po-amount-currency { font-size: .75rem; font-weight: 600; color: var(--po-muted); }

/* список параметров платежа: подпись — значение, без рамок */
.po-facts {
  margin: 0;
  border-top: 1px solid var(--po-line);
}

.po-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--po-line);
}

.po-facts dt {
  margin: 0;
  font-size: .875rem;
  color: var(--po-muted);
  font-weight: 400;
}

.po-facts dd {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--po-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* старые экраны успеха собраны из .list-group — приводим к тому же виду */
.list-group {
  border-radius: var(--po-radius);
  overflow: hidden;
}

.list-group-item {
  padding: .75rem 1rem;
  border-color: var(--po-line);
  background: var(--po-surface);
  font-size: .9375rem;
}

.list-group-item-action:hover { background: var(--po-surface-soft); }

.list-group-item h4,
.list-group-item h5 {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--po-muted);
  margin-bottom: .25rem;
}

.list-group-item p { color: var(--po-ink); }

/* --- 12. совместимость со старой разметкой ------------------------------- */

/* Переключатель языка переехал в шапку; старые блоки .languages на страницах
   скрываем, чтобы не было двух контролов. */
.languages { display: none; }

/* Служебный отступ старого «подвала» страниц. */
.bottom { display: none; }

.text-justify { text-align: left; }   /* выключка по ширине вредит чтению */

/* Кнопка-ссылка на регламент с иконкой Word. */
.dop_info {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-left: 2.5rem;
  background: url("img/word-icon.jpg") no-repeat left center;
  background-size: 28px 28px;
  font-weight: 600;
}

/* бейджи платёжных систем: тихие, в один ряд, без float */
.secure_mir,
.secure_vs,
.secure_mc,
.paymir,
.payvisa,
.paymc,
.paymaestro {
  display: inline-block;
  float: none;
  width: auto;
  height: 38px;
  margin: 0 .5rem 0 0;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  opacity: .9;
}

.secure_mir { width: 104px; background-image: url("img/mir_accept.png"); }
.secure_vs  { width: 76px;  background-image: url("img/visa_verif.png"); }
.secure_mc  { width: 96px;  background-image: url("img/mc_verif.png"); }
.paymir     { width: 62px;  background-image: url("img/mir.png"); }
.payvisa    { width: 70px;  background-image: url("img/visa.png"); }
.paymc      { width: 54px;  background-image: url("img/mc.png"); }
.paymaestro { width: 54px;  background-image: url("img/maestro.png"); }

/* строка «безопасность платежа» под формой */
.po-secure-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  color: var(--po-muted);
  font-size: .8125rem;
}

/* --- 12.1 подсказки и пояснения ----------------------------------------- */

/* Блок-справка «что будет дальше»: светлая фирменная подложка, иконка слева.
   Нужен там, где пользователь не понимает следующий шаг (оплата, отправка
   формы, переход в банк). Разметка: div.po-note > .po-note-icon + .po-note-body. */
.po-note {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1rem;
  border: 1px solid var(--po-brand-line);
  border-radius: var(--po-radius);
  background: var(--po-brand-soft);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--po-ink-soft);
}

.po-note-accent {
  border-color: var(--po-warn-line);
  background: var(--po-warn-soft);
  color: #6b4700;
}

.po-note-ok {
  border-color: var(--po-ok-line);
  background: var(--po-ok-soft);
  color: #125b34;
}

.po-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--po-brand);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
}

.po-note-accent .po-note-icon { color: #8a5a00; }
.po-note-ok .po-note-icon { color: var(--po-ok); }

.po-note-body { min-width: 0; }
.po-note-title { display: block; margin-bottom: .25rem; font-weight: 600; color: var(--po-ink); }
.po-note p { margin: 0; }
.po-note p + p { margin-top: .5rem; }
.po-note a { font-weight: 600; }

/* Сводка заказа: «что вы оплачиваете» одной строкой над кнопкой.
   Разметка: dl.po-summary > div > dt + dd. */
.po-summary {
  margin: 0;
  padding: .75rem 1rem;
  border: 1px dashed var(--po-line-strong);
  border-radius: var(--po-radius);
  background: var(--po-surface-soft);
}

.po-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .875rem;
}

.po-summary > div + div { margin-top: .5rem; }

.po-summary dt {
  margin: 0;
  font-weight: 400;
  color: var(--po-muted);
}

.po-summary dd {
  margin: 0;
  font-weight: 600;
  color: var(--po-ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.po-summary-total {
  padding-top: .5rem;
  border-top: 1px solid var(--po-line-strong);
  font-size: .9375rem;
}

.po-summary-total dd { font-size: 1.0625rem; color: var(--po-brand-strong); }

/* Метка «обязательное поле» и счётчик заполненности */
.po-req-legend {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .8125rem;
  color: var(--po-muted);
}

.po-req { color: var(--po-brand); font-weight: 700; }

/* Маркер шага над полем: «Шаг 1 из 3» */
.po-step-tag {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: var(--po-brand-soft);
  color: var(--po-brand-strong);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- 13. адаптив и печать ------------------------------------------------ */

@media (max-width: 991.98px) {
  .po-main { padding: 1.5rem 0 2.5rem; }
  .po-page-head, .page-header { margin-bottom: 1.5rem; }
}

@media (max-width: 767.98px) {
  .po-header-inner { min-height: 60px; gap: .5rem; }
  .po-brand img { height: 30px; }
  .po-brand-name { font-size: .8125rem; letter-spacing: .06em; }
  .po-brand-sub { display: none; }
  .po-pay-chip span { display: none; }
  .po-pay-chip { padding: .25rem .5rem; }
  /* ФИО длиннее логина — на планшете ограничиваем, иначе выдавит пилюли */
  .po-user { max-width: 11rem; }
  .po-page-title,
  .po-page-head h1, .po-page-head h2,
  .page-header h1, .page-header h2 { font-size: 1.375rem; }
  .card-body { padding: 1rem; }
  .card-header, .card-footer { padding: .75rem 1rem; }
  .po-panel { --po-panel-pad: 1.15rem; padding: var(--po-panel-pad); }
  .po-steps > li { padding-left: 2.25rem; }
  .po-amount { font-size: 1.75rem; }
  .po-page-head-side { width: 100%; }
}

@media (max-width: 575.98px) {
  body { font-size: .9375rem; }
  .po-brand { gap: .5rem; }
  .po-brand img { height: 26px; }
  /* На 390 px в шапке пять элементов: название сервиса уступает место
     пользователю и выходу — логотип и так несёт название вуза. */
  .po-brand-text { display: none; }
  .po-user { max-width: 44px; padding: .25rem; gap: 0; }
  .po-user-name { display: none; }
  .po-logout { padding: .25rem .5rem; gap: 0; }
  .po-logout-text { display: none; }
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { white-space: nowrap; }
  .po-service-card, .tab-pane .card { flex: 1 1 100%; }
  .po-actions .btn { width: 100%; }
  .po-facts > div { flex-direction: column; gap: .25rem; }
  .po-facts dd { text-align: left; }
  .po-status { padding: 1rem; gap: .75rem; }
  .po-status-icon { width: 38px; height: 38px; }
  .po-status-title { font-size: 1.0625rem; }
}

/* уважение к системной настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .po-service-card:hover, .tab-pane .card:hover { transform: none; }
}

@media print {
  .po-header, .po-actions, .btn { display: none !important; }
  body { background: #fff; }
  .po-main { padding: 0; }
  .card, .po-panel, .po-status { box-shadow: none; border-color: #c9d3e0; break-inside: avoid; }
}