/* Стили страницы Платёжного виджета /widget/pay/. Общие сброс/токены/шрифты/логотип/шторка/QR —
   widget.css, подключённый раньше этого файла в index.html.

   Вёрстка перенесена из эталона (https://agent.nastart.app/sports-widget/pay/, спека §Эталон
   вёрстки): базовые правила — десктопная раскладка, `@media (max-width: 640px)` — мобильная
   (граница та же, что у Карточки, — по ширине iframe: страница целиком — содержимое iframe, её
   вьюпорт и есть ширина iframe).

   Высоту iframe задаёт Площадка: эталонные 736 px на мобильной и 596 px на десктопной (спека
   §Платёжный виджет, «Высота»; числа живут в frontend/tests/pay.spec.ts и в документации для
   Партнёра, вёрстке они не нужны). Виджет обязан вписываться в них без внутреннего скролла во
   всех состояниях — с сообщением под полем, с длинным подзаголовком, на экране благодарности с
   развёрнутым QR: если вёрстка эталона не влезает, pay.js включает ступени уплотнения
   .np-pay--dense и .np-pay--denser (внизу файла).

   Строение: #np-pay-root.np-pay — обрезающий элемент на весь iframe (по нему тесты и pay.js
   меряют переполнение) и хост шторок документов, внутри — белая карточка .np-pay__box высотой
   по содержимому, как в эталоне: ниже неё виден фон Площадки. */

html,
body {
  height: 100%;
}

/* Как в эталоне: вокруг формы — фон Площадки. */
body {
  background: transparent;
}

/* Переходы — только цветов, не размеров: у эталона `transition: .15s` на все свойства, и тогда
   отступы, которые меняют ступени уплотнения, анимировались бы — pay.js мерил бы высоту формы
   посреди анимации и выбирал бы ступень по промежуточному размеру. */
.np-pay {
  --np-pay-transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
  position: relative;
  height: 100%;
  overflow: hidden;
  /* Скругление — для шторки: она занимает весь iframe и наследует его (widget.css). */
  border-radius: var(--na-radius-card);
}

.np-pay__box {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: var(--na-radius-card);
  background: #fff;
  box-shadow: var(--na-shadow);
}

/* ---------- шапка ---------- */

.np-pay__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.np-pay__title {
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
}

.np-pay__title em {
  font-family: var(--na-font-accent);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--na-blue);
}

.np-pay__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--na-muted);
}

.np-pay__logo {
  margin-top: 2px;
}

/* ---------- режим ---------- */

.np-pay__toggle {
  display: flex;
  margin-bottom: 16px;
  padding: 5px;
  border-radius: var(--na-radius-block);
  background: var(--na-tint);
}

.np-pay__mode {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--na-text);
  cursor: pointer;
  transition: var(--np-pay-transition);
}

.np-pay__mode.on {
  background: #fff;
  color: var(--na-blue);
  box-shadow: 0 2px 10px rgba(48, 108, 246, .14);
}

.np-pay__mode small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--na-blue);
}

/* ---------- суммы ---------- */

.np-pay__cap {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--na-muted);
}

.np-pay__amounts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.np-pay__amount {
  position: relative;
  padding: 11px 12px;
  border: 2px solid var(--na-line);
  border-radius: var(--na-radius-block);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: var(--np-pay-transition);
}

.np-pay__amount.on {
  border-color: var(--na-blue);
  background: var(--na-tint);
}

.np-pay__sum {
  display: block;
  font-family: var(--na-font-accent);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0;
  font-size: 17px;
  color: var(--na-ink);
}

.np-pay__amount.on .np-pay__sum {
  color: var(--na-blue);
}

.np-pay__purpose {
  font-size: 12px;
  line-height: 1.25;
  color: var(--na-muted);
}

.np-pay__rec {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--na-blue);
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}

.np-pay__note {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--na-muted);
}

/* ---------- своя сумма ---------- */

.np-pay__input {
  position: relative;
  margin-bottom: 12px;
}

.np-pay__input input {
  width: 100%;
  padding: 12px 38px 12px 14px;
  border: 2px solid var(--na-line);
  border-radius: var(--na-radius-block);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--na-ink);
  outline: none;
}

.np-pay__input input:focus {
  border-color: var(--na-blue);
}

.np-pay__input input[aria-invalid="true"] {
  border-color: var(--na-danger);
}

.np-pay__input span {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  font-weight: 700;
  color: var(--na-muted);
}

/* Сообщение о границах суммы — под полем, до отправки. */
.np-pay__hint {
  margin: -6px 0 10px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--na-danger);
}

.np-pay__hint[hidden] {
  display: none;
}

/* ---------- согласие, кнопка, реквизиты ---------- */

.np-pay__consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--na-muted);
}

.np-pay__consent input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 3px 3px 4px;
  accent-color: var(--na-blue);
}

.np-pay__doc {
  color: inherit;
  text-decoration: underline;
}

.np-pay__cta {
  display: block;
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: var(--na-radius-pill);
  background: var(--na-blue);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: var(--np-pay-transition);
}

.np-pay__cta:hover {
  background: var(--na-blue-dark);
}

/* Оформление Спортс’’: кнопка оплаты — оранжевая, цвет искры НА СТАРТ. */
.np-pay--theme-sportsru .np-pay__cta {
  background: var(--na-orange);
}

.np-pay--theme-sportsru .np-pay__cta:hover {
  background: #e6471c;
}

/* Идёт create: «Готовим оплату…» (как у эталона — приглушённая кнопка). */
.np-pay__cta:disabled {
  opacity: .7;
  cursor: default;
}

.np-pay__cta:disabled:hover {
  background: var(--na-blue);
}

/* Сообщение под кнопкой (согласие не дано, ошибка create) встаёт на место реквизитов. */
.np-pay__result {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--na-radius-block);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;
}

.np-pay__result[hidden],
.np-pay__safe[hidden] {
  display: none;
}

.np-pay__result--err {
  background: var(--na-danger-bg);
  color: var(--na-danger);
}

.np-pay__result--info {
  background: var(--na-info-bg);
  color: var(--na-blue);
}

.np-pay__safe {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: var(--na-muted);
}

/* ---------- экран благодарности ----------
   Встаёт на место формы целиком (спека §Платёжный виджет, «Высота»): благодарность и следующий
   шаг — «Сделать поддержку регулярной» после разового платежа, «Помочь конкретному ребёнку»
   всегда; на десктопной раскладке ссылка «Установить приложение» разворачивает под собой QR. */

.np-pay__done {
  text-align: center;
}

.np-pay__tick {
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--na-success-bg);
  font-size: 27px;
  line-height: 54px;
  font-weight: 700;
  color: var(--na-success);
}

.np-pay__done-title {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
}

.np-pay__done-text {
  max-width: 360px;
  margin: 0 auto 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--na-muted);
}

.np-pay__next {
  padding: 14px;
  border: 1.5px solid var(--na-line);
  border-radius: 16px;
  text-align: left;
}

.np-pay__next + .np-pay__next {
  margin-top: 10px;
}

.np-pay__next-title {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
}

.np-pay__next-text {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--na-muted);
}

.np-pay__next .np-pay__cta {
  padding: 12px;
  font-size: 15px;
}

.np-pay__link {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--na-line);
  border-radius: var(--na-radius-pill);
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--na-ink);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.np-pay__link:hover,
.np-pay__link:focus-visible {
  border-color: var(--na-blue);
  color: var(--na-blue);
}

.np-pay__qr {
  margin-top: 10px;
  text-align: center;
}

.np-pay__qr[hidden] {
  display: none;
}

.np-pay__qr-code {
  display: flex;
  justify-content: center;
}

.np-pay__qr-caption {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--na-muted);
}

/* ---------- мобильная раскладка (iframe до 640 px) ---------- */

@media (max-width: 640px) {
  .np-pay {
    border-radius: var(--na-radius-card-sm);
  }

  .np-pay__box {
    padding: 16px 16px 15px;
    border-radius: var(--na-radius-card-sm);
  }

  .np-pay__title {
    font-size: 17px;
  }

  .np-pay__sub {
    font-size: 12px;
  }

  .np-pay__sum {
    font-size: 16px;
  }

  .np-pay__purpose {
    font-size: 11px;
  }

  .np-pay__cta {
    padding: 14px;
    font-size: 15.5px;
  }

  .np-pay__done-title {
    font-size: 18px;
  }
}

/* ---------- ступени уплотнения ----------
   Включаются pay.js по очереди, только когда форма не вписывается в высоту iframe: сначала
   сжимаются вертикальные отступы, затем — кегли второстепенного текста. */

.np-pay--dense .np-pay__box {
  padding-top: 14px;
  padding-bottom: 12px;
}

.np-pay--dense .np-pay__head,
.np-pay--dense .np-pay__toggle {
  margin-bottom: 10px;
}

.np-pay--dense .np-pay__mode {
  padding: 7px 8px;
}

.np-pay--dense .np-pay__cap {
  margin-bottom: 6px;
}

.np-pay--dense .np-pay__amounts {
  gap: 8px;
  margin-bottom: 8px;
}

.np-pay--dense .np-pay__amount {
  padding: 8px 12px;
}

.np-pay--dense .np-pay__note,
.np-pay--dense .np-pay__input {
  margin-bottom: 8px;
}

.np-pay--dense .np-pay__input input {
  padding-top: 9px;
  padding-bottom: 9px;
}

.np-pay--dense .np-pay__hint {
  margin: -4px 0 6px;
}

.np-pay--dense .np-pay__consent {
  margin-bottom: 10px;
}

.np-pay--dense .np-pay__cta {
  padding: 12px;
}

.np-pay--dense .np-pay__result,
.np-pay--dense .np-pay__safe {
  margin-top: 8px;
}

.np-pay--dense .np-pay__result {
  padding: 9px 12px;
}

.np-pay--dense .np-pay__tick {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 40px;
}

.np-pay--dense .np-pay__done-text {
  margin-bottom: 10px;
}

.np-pay--dense .np-pay__next {
  padding: 10px 12px;
}

.np-pay--dense .np-pay__next + .np-pay__next,
.np-pay--dense .np-pay__qr {
  margin-top: 8px;
}

.np-pay--dense .np-pay__next-text {
  margin-bottom: 8px;
}

.np-pay--dense .np-pay__next .np-pay__cta,
.np-pay--dense .np-pay__link {
  padding: 10px;
}

.np-pay--denser .np-pay__title {
  font-size: 16px;
}

.np-pay--denser .np-pay__sub,
.np-pay--denser .np-pay__consent,
.np-pay--denser .np-pay__safe {
  font-size: 11px;
  line-height: 1.3;
}

.np-pay--denser .np-pay__mode small {
  display: inline;
  margin: 0 0 0 6px;
}

.np-pay--denser .np-pay__purpose,
.np-pay--denser .np-pay__note {
  font-size: 10.5px;
  line-height: 1.25;
}

.np-pay--denser .np-pay__result {
  font-size: 13px;
  line-height: 1.3;
}

/* Благодарность: галочка уходит, пояснения — мельче. */
.np-pay--denser .np-pay__tick {
  display: none;
}

.np-pay--denser .np-pay__done-text,
.np-pay--denser .np-pay__next-text {
  font-size: 11.5px;
  line-height: 1.3;
}

/* Кобрендинг (_shared/partners.js): в узкой форме связка логотипов не помещается рядом с
   заголовком — ставим её над ним, иначе заголовок и подзаголовок сжимаются в узкую колонку. */
@media (max-width: 640px) {
  .np-pay__head--cobrand {
    flex-direction: column-reverse;
    gap: 10px;
  }
}

/* ---------- оформление Спортс’’ (макет 15.10, ассеты partners/sportsru/) ----------
   Шапка формы — синяя плашка во всю ширину карточки: слева белый логотип НА СТАРТ, справа
   шильдик Спортс’’ — у каждого своя зона. Бренд-слой — как на синих слайдах партнёрской
   презентации и дека Спортмастера (public/nastart/comms-strategy-deck): единственный паттерн
   бренда lattice.png белой альфа-маской, прозрачность .16, тает от правого края радиальной
   маской, без блюра. Лучей и искр нет (снято 15.10). */
.np-pay__head--theme {
  position: relative;
  isolation: isolate;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: -22px -22px 16px;
  padding: 18px 22px 16px;
  border-radius: var(--na-radius-card) var(--na-radius-card) 0 0;
  background: var(--na-blue);
  color: #fff;
}

.np-pay__brands {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.np-pay__head--theme .np-pay__logo {
  height: 26px;
  margin: 0;
}

.np-pay__badge {
  width: auto;
  height: 30px;
}

.np-pay__head--theme .np-pay__title {
  color: #fff;
}

.np-pay__head--theme .np-pay__title em {
  color: #fff;
}

.np-pay__head--theme .np-pay__sub {
  color: rgba(255, 255, 255, .82);
}

/* Плашка выходит на края карточки: отрицательные поля равны полям .np-pay__box во всех
   раскладках и ступенях уплотнения. */
.np-pay--dense .np-pay__head--theme {
  margin-top: -14px;
  padding-top: 14px;
  padding-bottom: 12px;
}

/* Бренд-слой паттерна (рецепт .bgpat из деков): лежит под содержимым шапки. */
.np-pay__head--theme-sportsru::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: #fff;
  opacity: .16;
  -webkit-mask-image: url('/widget/_shared/partners/sportsru/lattice.png'),
    radial-gradient(120% 95% at 100% 58%, #000 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, 0) 82%);
  mask-image: url('/widget/_shared/partners/sportsru/lattice.png'),
    radial-gradient(120% 95% at 100% 58%, #000 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, 0) 82%);
  -webkit-mask-size: 118px auto, 100% 100%;
  mask-size: 118px auto, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-position: right top, 0 0;
  mask-position: right top, 0 0;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.np-pay__head--theme .np-pay__brands,
.np-pay__head--theme .np-pay__head-text {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .np-pay__head--theme {
    margin: -16px -16px 14px;
    padding: 14px 16px 14px;
  }

  .np-pay--dense .np-pay__head--theme {
    margin-top: -14px;
  }

  .np-pay__head--theme .np-pay__logo {
    height: 21px;
  }

  .np-pay__badge {
    height: 25px;
  }


}