/* Окно кассы поверх сайта.

   Кадр грузит нашу подписанную ссылку на payform, поэтому внутри — обычная
   страница оплаты, а снаружи остаётся сайт: адрес не меняется, корзина под
   окном никуда не делась. Размеры даны в vh/vw с потолком в пикселях: на
   телефоне окно занимает почти весь экран, на десктопе — карточку по центру.
*/
.payframe {
  position: fixed;
  inset: 0;
  z-index: var(--z-payframe);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.payframe__back {
  position: absolute;
  inset: 0;
  background: rgba(46, 36, 64, .55);
  backdrop-filter: blur(2px);
  animation: payframe-fade .18s ease-out;
}

.payframe__win {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--veil);            /* модальное окно, как шторка */
  padding: 14px 14px 10px;
  animation: payframe-rise .22s cubic-bezier(.2, .7, .3, 1);
}

.payframe__frame {
  display: block;
  width: 100%;
  height: min(74vh, 660px);
  border: 0;
  border-radius: 12px;
  /* кадр над плашкой ожидания и прозрачный: пока касса пуста, плашка видна
     сквозь него, а нарисовалась — её белая страница плашку закрывает. Ждать
     load нельзя: он ждёт счётчики кассы, и подвисшая Метрика держала плашку
     «Касса не отвечает» поверх готовой формы (17.10) */
  position: relative;
  z-index: 1;
  background: transparent;
}

/* пока касса едет, окно не должно быть пустым белым прямоугольником */
.payframe__wait {
  position: absolute;
  /* высота кадра, а не отступ от низа окна: подвал окна теперь с кнопкой, и
     «44px снизу» закрывал бы её сверху, пока касса едет */
  inset: 14px 14px auto;
  height: min(74vh, 660px);
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  border-radius: 12px;
  background: #fbf9fc;
  color: #6b6379;
  font-size: 14px;
  text-align: center;
  padding: 0 24px;
}

.payframe--ready .payframe__wait { display: none; }

.payframe__spin {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(86, 61, 135, .25);
  border-top-color: var(--violet, #563D87);
  border-radius: 50%;
  animation: payframe-spin .9s linear infinite;
}

/* текст про молчащую кассу показываем, только когда она реально молчит */
.payframe__slow { display: none; max-width: 22em; line-height: 1.45; }
.payframe--slow .payframe__slow { display: block; }
.payframe--slow .payframe__spin { display: none; }

.payframe__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #2E2440;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--lift-sm);         /* маленькая кнопка над окном */
}

/* ссылка на страницу кассы — кнопкой под окном, а не мелкой строкой: если
   кадр остался пустым (касса отказала встраиванию), это единственный выход */
.payframe__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin: 10px 4px 2px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: #6b6379;
}

/* касса не ответила по сети (pay-frame.js): строка под окном говорит об этом прямо */
.payframe--down .payframe__aside { color: var(--error, #C8102E); font-weight: 600; font-size: 14px; }
/* та же фраза серым в окне (через 12 с в WebKit) — одна, под окном, хватит */
.payframe--down .payframe__slow { display: none; }

.payframe__link { color: #563D87; }

/* страница под окном не должна ездить, пока идёт оплата */
body.payframe-open { overflow: hidden; }

/* куки-баннер во время оплаты только мешает: он липнет к низу экрана ровно
   там, где нижний край окна кассы */
body.payframe-open .ckb { display: none; }

@keyframes payframe-fade { from { opacity: 0 } to { opacity: 1 } }

@keyframes payframe-spin { to { transform: rotate(360deg) } }

@keyframes payframe-rise {
  from { opacity: 0; transform: translateY(12px) scale(.98) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .payframe__back, .payframe__win { animation: none }
  .payframe__spin { animation-duration: 2.4s }
}

@media (max-width: 560px) {
  .payframe { padding: 12px 10px }
  .payframe__win { padding: 10px 10px 8px; border-radius: 16px }
  .payframe__frame, .payframe__wait { height: min(78vh, 620px) }
  .payframe__close { top: -10px; right: -6px }
}

/* подсказка под формой оформления: окно закрыли, а оплата могла пройти */
.payframe__check {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #F6F1FA;
  color: #4a4358;
  font-size: 14px;
  line-height: 1.45;
}

.payframe__check a { color: #563D87; }

/* выбор почты для чека в оформлении: по умолчанию адрес аккаунта, поле
   открывается только тем, кому нужен другой */
.receipt-mail { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }

.receipt-mail__now { margin: 0; color: #4a4358; }

.receipt-mail__switch {
  border: 0;
  padding: 0;
  background: none;
  color: #563D87;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.receipt-mail__field { display: block; margin-top: 10px; }
/* display:block выше перебивает атрибут hidden — возвращаем ему силу */
.receipt-mail__field[hidden] { display: none; }

.receipt-mail__field span {
  display: block;
  margin-bottom: 4px;
  color: #6b6379;
}

.receipt-mail__field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--field-line, #8F7FA8);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}