/* N1: pay. Правила только внутри body.n1 (см. n1.css). */
/*
 * Шторка оплаты #pp-pay-sheet и общая оболочка шторок .pp-sheet (оплата и
 * название). Разметку строит parcels-pay.js; его собственный <style>
 * вставляется в конец <head> ПОСЛЕ этого файла, поэтому здесь всё с
 * приставкой body.n1 (вес выше), а где у модуля !important — тоже !important.
 * Высоту и сдвиг шторки не трогаем: на них завязан жест закрытия
 * (neo-gestures.js, зона 80 px от верха).
 */

body.n1 { --n1-red: #ff6b6b; }

/* ── Оболочка шторки ─────────────────────────────────────────────────── */
body.n1 .pp-sheet-bd {
  background: rgba(0, 0, 0, .6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.n1 .pp-sheet {
  max-width: none;   /* во всю ширину телефона, без щелей по бокам на 430/440 */
  background: var(--n1-card);
  border: 0;
  border-radius: 28px 28px 0 0;
  padding: 8px 20px max(20px, calc(12px + env(safe-area-inset-bottom, 0px)));   /* низ: в приложении 12 px над полоской «домой», как у кнопок в доках */
  color: #fff;
  font-family: var(--n1-font);
}
body.n1 .pp-grab {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: #5a5a5a;
  margin: 0 auto 16px;
}
/* Внутри шторки оплаты прокручивать нечего. Без этого протяжка по ней уходила
   браузеру (прокрутка страницы под шторкой), и если за это время шторка
   сменила содержимое (идёт оплата → «Оплачено»), следующее нажатие на новую
   кнопку «Готово» браузер не превращал в клик. Жест закрытия работает на
   touch-событиях, ему это не мешает. */
body.n1 #pp-pay-sheet,
body.n1 .pp-sheet-bd { touch-action: none; }
/* скрытые атрибутом hidden элементы: у .s-cta свой display перебивает его */
body.n1 .pp-sheet [hidden] { display: none !important; }

/* ── Форма оплаты ────────────────────────────────────────────────────── */
body.n1 .pp-n1-title { margin: 0 0 16px; }
/* Заголовок «Оплата» и справа «Снять все» / «Выбрать все» (parcels-pay.js
   syncPickAllN1): кнопка-текст салатовым, касание 44 px, по высоте строки
   заголовка не растёт. */
body.n1 .pp-n1-thead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
body.n1 .pp-n1-thead .pp-n1-title { margin: 0; }
body.n1 .pp-n1-pall {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  height: 44px;
  margin: -8px -10px -8px 0;
  padding: 0 10px;
  border: 0;
  background: none;
  font: 600 15px/20px var(--n1-font);
  letter-spacing: -.2px;
  color: var(--n1-lime);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.n1 .pp-n1-pall:focus-visible { outline: 2px solid var(--n1-lime); outline-offset: -2px; border-radius: 12px; }
/* «Сумма изменилась: теперь …» над формой (ответ PRICE_CHANGED) */
body.n1 .pp-n1-chg {
  margin: -8px 0 16px;
  font: 400 15px/20px var(--n1-font);
  color: var(--n1-amber);
  font-variant-numeric: tabular-nums;
}
body.n1 .pp-n1-grp {
  background: var(--n1-card2);
  border-radius: 20px;
  overflow: hidden;
}

/* Что оплачиваем: посылки строками с галочками (по умолчанию все) */
body.n1 .pp-n1-plist { margin-bottom: 12px; }
/* Список прокручивается (замечание Тима №17: «не понятно, что можно
   скролить»): у края, за которым есть ещё, мягкое затемнение тоном группы
   (снизу is-more, сверху is-top), на нижнем крае группы по центру пилюля
   «Ещё 3 ⌄» — нажатие листает ниже. Классы ставит parcels-pay.js
   (syncPayScrollN1). Затемнения короткие: сверху 10 px ложится только на
   поле строки, не на название (иначе отмеченная посылка выглядела
   снятой), снизу обрезанная строка остаётся видна — она и есть подсказка.
   Пилюля наполовину под группой, не на строке: под прокручиваемым
   списком промежуток до кошелька шире (is-scroll), пилюле хватает места. */
body.n1 .pp-n1-pwrap { position: relative; margin-bottom: 12px; }
body.n1 .pp-n1-pwrap.is-scroll { margin-bottom: 24px; }
body.n1 .pp-n1-pwrap > .pp-n1-plist { margin-bottom: 0; }
body.n1 .pp-n1-pwrap::before,
body.n1 .pp-n1-pwrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease-out;
}
/* верхнее: слой 20 px (не меньше скругления, иначе браузер ужимает радиус
   до 10 px и по углам выступают светлые «уголки» мимо скругления группы),
   само затемнение тает за первые 10 px */
body.n1 .pp-n1-pwrap::before { top: 0; height: 20px; border-radius: 20px 20px 0 0; background: linear-gradient(var(--n1-card2), rgba(56, 56, 56, 0) 10px); }
body.n1 .pp-n1-pwrap::after { bottom: 0; height: 40px; border-radius: 0 0 20px 20px; background: linear-gradient(rgba(56, 56, 56, 0), var(--n1-card2)); }
/* 320–359: от списка видно полторы строки — снизу затемнение ещё короче */
@media (max-width: 359px) { body.n1 .pp-n1-pwrap::after { height: 28px; } }
body.n1 .pp-n1-pwrap.is-top::before,
body.n1 .pp-n1-pwrap.is-more::after { opacity: 1; }
body.n1 .pp-n1-pmore {
  position: absolute;
  left: 50%;
  bottom: -16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: 16px;
  background: #454545;
  box-shadow: 0 0 0 3px var(--n1-card), 0 4px 10px rgba(0, 0, 0, .3);
  color: #fff;
  font: 600 13px/18px var(--n1-font);
  letter-spacing: -.08px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* видна 32 px, касание 44 */
body.n1 .pp-n1-pmore::before { content: ""; position: absolute; inset: -6px -4px; }
body.n1 .pp-n1-pmore:focus-visible { outline: 2px solid var(--n1-lime); outline-offset: 2px; }
body.n1 .pp-n1-pmore svg { flex: none; color: var(--n1-grey); }
/* больше трёх строк — прокрутка внутри списка, шторка не растёт выше экрана.
   Здесь потолок; точную высоту ставит fitPayListN1 (parcels-pay.js): край
   списка проходит через середину строки, видно, что дальше есть ещё */
body.n1 .pp-n1-plist.is-scroll {
  max-height: clamp(160px, calc(100dvh - 410px), 330px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
/* строки — единая строка посылки (.pp-prow, n1-parcel.css): имя, весь трек,
   вес, справа сумма к оплате; волосок от текста (с галочкой — от имени) */
body.n1 .pp-n1-pi.pp-prow + .pp-n1-pi.pp-prow::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  top: 0;
  height: 1px;
  transform: scaleY(.5);
  transform-origin: top;
  background: var(--n1-hair);
}
body.n1 .pp-n1-pi.pp-prow.has-lead + .pp-n1-pi.pp-prow.has-lead::before { left: 52px; }
body.n1 .pp-n1-pi.pp-prow.has-lead .pp-prow-l { margin-right: 0; }
/* «N посылок» одной строкой, когда список не собрать */
body.n1 .pp-n1-pi:not(.pp-prow) { min-height: 64px; gap: 12px; }
body.n1 .pp-n1-pi .pp-n1-col { min-width: 0; }
body.n1 .pp-n1-pi.is-pick { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* снятая посылка — вся строка серым: название, сумма, трек и вес (трек
   светлым при сером названии читался как «полуотмечено») */
body.n1 .pp-n1-pi.is-off .pp-prow-n,
body.n1 .pp-n1-pi.is-off .pp-prow-r,
body.n1 .pp-n1-pi.is-off .pp-prow-tr,
body.n1 .pp-n1-pi.is-off .pp-prow-w,
body.n1 .pp-n1-pi.is-off .pp-prow-sw .pp-prow-st { color: var(--n1-grey2); }
/* галочка 24 px r7: выбрано — салатовая заливка с тёмной галочкой */
body.n1 .pp-n1-cb {
  flex: none;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 2px solid #6a6a6a;
  color: var(--n1-on-lime);
  transition: background-color .15s ease, border-color .15s ease;
}
body.n1 .pp-n1-cb svg { opacity: 0; transition: opacity .15s ease; }
body.n1 .pp-n1-cb.on { background: var(--n1-lime); border-color: var(--n1-lime); }
body.n1 .pp-n1-cb.on svg { opacity: 1; }
body.n1 .pp-n1-pnote { padding: 0 16px 14px 52px; color: var(--n1-grey2); }
/* Строки с 3D (NeoArt.rowThumbs): плитка 48 светлее группы (группа уже
   #383838), галочка — кружок 22 в правом нижнем углу плитки с ободком цвета
   группы, как выбор в галерее фото. Снятая посылка бледнеет вместе с 3D.
   Волосок между строками и сноска «одного пакета» — от текста (76). */
body.n1 .pp-n1-grp .pp-prow-th { background: #444; }
body.n1 .pp-n1-pi .pp-prow-th > .pp-n1-cb {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--n1-card2);
  box-shadow: 0 0 0 2px var(--n1-card2);
}
body.n1 .pp-n1-pi .pp-prow-th > .pp-n1-cb.on { background: var(--n1-lime); }
body.n1 .pp-n1-pi .pp-prow-th > .pp-n1-cb svg { width: 12px; height: 12px; }
body.n1 .pp-n1-pi.pp-prow.has-th + .pp-n1-pi.pp-prow.has-th::before { left: 76px; }
body.n1 .pp-n1-pi .pp-prow-th img { transition: opacity .15s ease; }
body.n1 .pp-n1-pi.is-off .pp-prow-th img { opacity: .45; }
body.n1 .pp-n1-plist .pp-n1-pi.has-th ~ .pp-n1-pnote { padding-left: 76px; }
/* кошелёк: нехватка видна сразу, второй строкой */
body.n1 .pp-n1-pm .pp-n1-col { min-width: 0; }
body.n1 #pp-wal-low { font-variant-numeric: tabular-nums; }
body.n1 .pp-n1-pm { min-height: 64px; }
body.n1 .pp-n1-lead {
  width: 26px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--n1-lime);
}
body.n1 .pp-n1-lead--b {
  color: var(--n1-bonus);
  font: 700 22px/1 var(--n1-font);
}
body.n1 .pp-n1-col { display: flex; flex-direction: column; gap: 2px; }
body.n1 .pp-n1-val {
  flex: none;
  color: var(--n1-grey);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.n1 .pp-n1-val.n1-amber { color: var(--n1-amber); }
body.n1 .pp-n1-bon { cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.n1 .pp-n1-bon.is-off { cursor: default; }
/* бонусы не загрузились: подпись янтарём, нажатие по строке загружает заново */
body.n1 #pp-bon-val.n1-amber { color: var(--n1-amber); }
body.n1 .pp-n1-bon.is-off.is-err { cursor: pointer; }
body.n1 #pp-bon-val { font-variant-numeric: tabular-nums; }

/* Заглушка, пока кошелёк и бонусы едут с сервера */
body.n1 .pp-n1-skel {
  display: inline-block;
  width: 88px;
  height: 16px;
  border-radius: 8px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .07) 100%);
  background-size: 200% 100%;
  animation: ppN1Shimmer 1.4s linear infinite;
}
body.n1 #pp-bon-val.pp-n1-skel { width: 56px; height: 14px; margin-top: 3px; }
@keyframes ppN1Shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Переключатель как в iOS: 51×31, включён — салатовый */
body.n1 .pp-n1-sw {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #545454;
  cursor: pointer;
  transition: background-color .25s var(--neo-ease);
  -webkit-tap-highlight-color: transparent;
}
body.n1 .pp-n1-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
  transition: transform .25s var(--neo-ease);
}
body.n1 .pp-n1-sw.on { background: var(--n1-lime); }
body.n1 .pp-n1-sw.on::after { transform: translateX(20px); }
body.n1 .pp-n1-sw:disabled { opacity: .4; cursor: default; }
body.n1 .pp-n1-sw:focus-visible { outline: 2px solid var(--n1-lime); outline-offset: 2px; }

/* Итог: строки «Доставка» и «Бонусы» раскрываются плавно (0fr → 1fr) */
body.n1 .pp-n1-sum { margin-top: 16px; padding: 0 4px; }
body.n1 .pp-n1-sum-x {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .3s var(--neo-ease), opacity .2s ease;
}
body.n1 .pp-n1-pay.is-bonus .pp-n1-sum-x { grid-template-rows: 1fr; opacity: 1; }
body.n1 .pp-n1-sum-in { min-height: 0; overflow: hidden; }
body.n1 .pp-n1-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
body.n1 .pp-n1-k { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: var(--n1-grey); }
body.n1 .pp-n1-v {
  font: 400 17px/22px var(--n1-font);
  letter-spacing: -.43px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.n1 .pp-n1-bcol { color: var(--n1-bonus); }
body.n1 .pp-n1-kv--t { padding-top: 4px; align-items: center; }
body.n1 .pp-n1-kv--t > span:first-child { font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .pp-n1-kv--t > span:last-child {
  font: 700 20px/26px var(--n1-font);
  letter-spacing: -.4px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.n1 .pp-n1-cta { margin-top: 16px; font-variant-numeric: tabular-nums; }
body.n1 .pp-n1-cta.is-wait,
body.n1 .pp-n1-cta:disabled { opacity: .45; cursor: default; }
body.n1 .pp-n1-note {
  min-height: 18px;
  margin-top: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Состояния оплаты внутри шторки ──────────────────────────────────── */
body.n1 .pp-n1-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.n1 .pp-n1-st-art { margin-top: auto; padding-top: 12px; }
body.n1 .pp-n1-st-t { margin-top: 20px; }
body.n1 .pp-n1-st-s { max-width: 310px; margin-top: 6px; font-variant-numeric: tabular-nums; }
/* успех: что оплачено — белым над остатком кошелька */
body.n1 .pp-n1-st-what { display: block; margin-bottom: 2px; color: #fff; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; }
body.n1 .pp-n1-st-btns {
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.n1 .pp-n1-st-btns:empty { padding-top: 40px; }
body.n1 .pp-n1-dark { background: var(--n1-card2); color: #fff; }

/* Идёт оплата: кольцо крутится вокруг значка кошелька */
body.n1 .pp-n1-ring {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #fff;
}
body.n1 .pp-n1-ring > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(178, 254, 18, .18);
  border-top-color: var(--n1-lime);
  border-right-color: var(--n1-lime);
  animation: ppN1Spin .9s linear infinite;
}
@keyframes ppN1Spin { to { transform: rotate(360deg); } }
body.n1 .pp-n1-busy .pp-grab { opacity: .35; }

/* Успех: салатовый круг, галочка рисуется */
body.n1 .pp-n1-okc {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--n1-lime);
  display: grid;
  place-items: center;
  animation: ppN1Pop .32s var(--neo-ease) both;
}
body.n1 .pp-n1-okc path {
  fill: none;
  stroke: var(--n1-on-lime);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: ppN1Draw .36s .14s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes ppN1Pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ppN1Draw { to { stroke-dashoffset: 0; } }
/* Успех с 3D Тима «Оплачено» (посылка с салатовой галочкой, NeoArt 'paid'):
   128, та же «выпрыгивающая» анимация; салют из её середины */
body.n1 .pp-n1-okart {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: contain;
  animation: ppN1Pop .32s var(--neo-ease) both;
}
body.n1 .pp-n1-okart + .pp-n1-confetti { top: 76px; }

/* Салют после оплаты (замечание Тима №39): кружки и полоски разлетаются из
   галочки и гаснут, один раз. Только transform и opacity; при «меньше
   движения» его нет (parcels-pay.js его и не создаёт). */
body.n1 .pp-n1-st-art { position: relative; }
body.n1 .pp-n1-confetti { position: absolute; left: 50%; top: 48px; width: 0; height: 0; pointer-events: none; z-index: 2; }
body.n1 .pp-n1-confetti > i {
  position: absolute;
  left: -3px;
  top: -5px;
  width: 6px;
  height: 10px;
  border-radius: 2px;
  opacity: 0;
  animation: ppN1Conf 1.4s cubic-bezier(.15, .7, .3, 1) calc(140ms + var(--d, 0ms)) both;
}
body.n1 .pp-n1-confetti > i.is-dot { left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; }
@keyframes ppN1Conf {
  0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0deg); }
  12% { opacity: 1; }
  62% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 64px)) scale(.85) rotate(var(--r)); }
}

/* Отказ и нет связи */
body.n1 .pp-n1-badc,
body.n1 .pp-n1-offc {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  animation: ppN1Pop .28s var(--neo-ease) both;
}
body.n1 .pp-n1-badc { background: var(--n1-red); }
body.n1 .pp-n1-offc { background: var(--n1-card2); }

/* Кнопка шторки гаснет и загорается плавно (занята, выключена) */
body.n1 .pp-sheet .s-cta { transition: opacity .15s ease; }

@media (prefers-reduced-motion: reduce) {
  body.n1 .pp-n1-skel { animation: none; }
  body.n1 .pp-n1-sw,
  body.n1 .pp-n1-sw::after,
  body.n1 .pp-n1-sum-x { transition: none; }
  body.n1 .pp-n1-ring > i { animation: none; }
  body.n1 .pp-n1-okc,
  body.n1 .pp-n1-okart,
  body.n1 .pp-n1-badc,
  body.n1 .pp-n1-offc { animation: none; }
  body.n1 .pp-n1-okc path { animation: none; stroke-dashoffset: 0; }
  body.n1 .pp-n1-confetti { display: none; }
  body.n1 .pp-n1-pi .pp-prow-th img { transition: none; }
  body.n1 .pp-n1-pwrap::before,
  body.n1 .pp-n1-pwrap::after { transition: none; }
}