/* N1: wallet. Правила только внутри body.n1 (см. n1.css).
 *
 * Кошелёк, история, пополнение, счёт по номеру, бонусы и все их шторки.
 * Разметку строит js/wallet.js, его старые стили лежат строкой в
 * <style id="wallet-styles"> в конце <head>, то есть ПОСЛЕ этого файла.
 * Поэтому здесь каждое правило с приставкой body.n1 (выше вес), а где у
 * старого правила !important, у нашего тоже.
 * Переходы экранов и шторок (transform, transition, z-index) не трогаем:
 * ими управляют стопка экранов и жесты (neo-gestures.js, style.css).
 */

/* Красный для ошибок и удаления (правило N1_KIT: добавить в body.n1, если нет) */
body.n1 { --n1-red: #ff6b6b; }

/* ── Знак бонусов «Б» ────────────────────────────────────────────────────
   Вид prod-18-09 (замечание Тима 03.10, № 29): буква Montserrat 600 и черта
   ::before по 10–90% ширины буквы — правила в wallet.js (.wl-b), шрифт
   подгружает он же. Своей перебивки здесь больше нет: системный шрифт с
   border-top давал черту шире буквы и выше, на iPhone — неровно. */

/* ── Экран ───────────────────────────────────────────────────────────── */
/* во всю ширину: старый стиль экрана min(420px,100vw) прижат вправо, и на
   428/430 слева оставалась полоса нижнего экрана, принимавшая касания и свайп */
body.n1 .wl-screen {
  width: 100vw;
  background: var(--n1-bg);
  border-left: 0;
  color: #fff;
  font-family: var(--n1-font);
}
body.n1 .wl-header {
  flex: none;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  gap: 8px;
  background: var(--n1-bg);
  border-bottom: 0;
}
body.n1 .wl-back,
body.n1 .wl-help {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.n1 .wl-back,
body.n1 .wl-back:hover { background: var(--n1-card2); }
body.n1 .wl-help { background: none; }
body.n1 .wl-title {
  flex: 1;
  min-width: 0;
  font: 600 17px/22px var(--n1-font);
  letter-spacing: -.4px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.n1 .wl-header-spacer { width: 44px; }
body.n1 .wl-body {
  gap: 0;
  padding: 8px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

/* Нижняя панель с главной кнопкой: фон экрана и волосок сверху */
body.n1 .wl-dock {
  flex: none;
  position: relative;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--n1-bg);
}
body.n1 .wl-dock::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  transform: scaleY(.5);
  transform-origin: top;
  background: var(--n1-hair);
}
body.n1 .wl-dock .s-cta { gap: 10px; }

/* Главная кнопка: выключенное состояние */
body.n1 .wl-screen .s-cta,
body.n1 .wl-sheet .s-cta { -webkit-tap-highlight-color: transparent; }
body.n1 .wl-screen .s-cta:disabled,
body.n1 .wl-sheet .s-cta:disabled {
  background: var(--n1-card2);
  color: var(--n1-grey2);
  opacity: 1;
  cursor: default;
}
body.n1 .wn-btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 26px;
  background: var(--n1-card2);
  color: #fff;
  font: 600 17px/22px var(--n1-font);
  letter-spacing: -.4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Шторки ──────────────────────────────────────────────────────────── */
body.n1 .wl-sheet-backdrop,
body.n1 .wl-backdrop-over {
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.n1 .wl-sheet {
  max-width: none;   /* старые 420px давали щели по краям на 428/430; окно .wn-dialog узкое своим правилом */
  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 .wl-sheet-grab {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: #5a5a5a;
  margin: 0 auto 18px;
}
body.n1 .wl-sheet-title {
  margin: 0 0 16px;
  font: 700 22px/28px var(--n1-font);
  letter-spacing: -.4px;
  color: #fff;
  text-align: left;
}

/* ── Общие куски разметки ────────────────────────────────────────────── */
/* Группа строк внутри шторки: второй слой #383838 */
body.n1 .wn-grp { background: var(--n1-card2); border-radius: 20px; overflow: hidden; }
/* Подпись группы в шторке («Kaspi», «Карты») */
body.n1 .wn-cap { margin: 0 0 8px; padding: 0 16px; font: 600 15px/20px var(--n1-font); letter-spacing: -.2px; color: var(--n1-grey); }
body.n1 .wn-grp + .wn-cap { margin-top: 20px; }
/* Строка «подпись: значение» */
body.n1 .wn-kv { gap: 16px; min-height: 56px; }
body.n1 .wn-kv > .s-b:first-child { flex: none; }
body.n1 .wn-kv .wn-v { flex: 1; min-width: 0; text-align: right; color: var(--n1-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* строка во всю ширину без значения справа («Друг получит 500 Б, когда…»):
   текст переносится, а не вылезает за карточку на узком экране */
body.n1 .wn-kv--full > .s-b:first-child { flex: 1; min-width: 0; padding: 16px 0; }
/* Миниатюра строки с 3D-посылкой */
body.n1 .wn-thumb img { width: 44px; height: 44px; object-fit: contain; }

/* Пусто / ошибка: по центру, одна строка серым, при нужде одна кнопка */
body.n1 .wn-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 24px; }
body.n1 .wn-state-art { width: 112px; height: 112px; object-fit: contain; margin-bottom: 16px; }
body.n1 .wn-state-ic { color: var(--n1-grey2); margin-bottom: 14px; }
body.n1 .wn-state .s-g { margin-top: 4px; max-width: 300px; text-wrap: balance; }
body.n1 .wn-state .s-btn { margin-top: 20px; }
body.n1 .wn-state--err { padding-top: 88px; }
/* с 3D-картинкой ошибки (NeoArt 'error') отступ меньше: картинка сама даёт воздух */
body.n1 .wn-state--err.wn-state--art { padding-top: 48px; }
body.n1 .wn-state--err .s-t { font-size: 20px; line-height: 25px; font-weight: 700; }

/* Скелетоны: плашки #333, мерцание в одну сторону */
body.n1 .wn-sk {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #333;
}
body.n1 .wn-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, 0) 100%);
  animation: wlShimmer 1.4s ease-in-out infinite;
}
body.n1 .wl-sk { background: #333; border-radius: 24px; }

@media (prefers-reduced-motion: reduce) {
  body.n1 .wn-sk::after,
  body.n1 .wl-sk::after,
  body.n1 .wl-card-sk::after,
  body.n1 .wl-amt-loading::before { animation: none; }
}

/* ── Кошелёк ─────────────────────────────────────────────────────────── */
body.n1 .wn-bal { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 4px 0; }
/* Шапка: баланс слева, 3D-кошелёк справа (NeoArt 'wallet', как монеты на
   Бонусах). Сумма не сжимается уже своего текста, картинка уступает ей место
   на узком экране; по высоте картинка не раздвигает шапку (отступы −11). */
body.n1 .wn-wal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
body.n1 .wn-wal-top .wn-bal { padding-top: 0; min-width: auto; }
body.n1 .wn-wal-art {
  flex: 0 1 96px;
  min-width: 0;
  width: 96px;
  height: 96px;
  margin: -11px 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .4));
  pointer-events: none;
}
/* крупная сумма: 44/700, длинная — меньше (класс ставит wallet.js) */
body.n1 .wn-big { font: 700 44px/52px var(--n1-font); letter-spacing: -1px; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.n1 .wn-big--m { font-size: 36px; line-height: 44px; letter-spacing: -.8px; }
body.n1 .wn-big--s { font-size: 30px; line-height: 38px; letter-spacing: -.6px; }
body.n1 .wn-bonus-row { margin-top: 24px; min-height: 64px; gap: 14px; }
body.n1 .wn-bs { width: 26px; flex: none; display: grid; place-items: center; color: var(--n1-bonus); font: 700 24px/1 var(--n1-font); }
body.n1 .wn-bonus-val { color: var(--n1-grey); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.n1 .wn-sub { margin: 24px 0 10px; }
/* Пополнение ждёт оплаты: строка над «Последними операциями», статус янтарём,
   сумма серым (денег на кошельке ещё нет) */
body.n1 .wn-pend { margin-top: 12px; }
body.n1 .wn-pend-st { color: var(--n1-amber); }
body.n1 .wn-amt--wait { color: var(--n1-grey); }
/* Посылки ждут оплаты: строка сразу под балансом, бонусы ближе к ней */
body.n1 .wn-unpaid { margin-top: 24px; gap: 14px; transition: opacity .15s ease; }
body.n1 .wn-unpaid .s-chev { margin-left: -6px; }
body.n1 .wn-unpaid.is-busy { opacity: .6; }
body.n1 #wl-unpaid-slot:not(:empty) + .wn-bonus-row { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  body.n1 .wn-unpaid { transition: none; }
}
body.n1 .wn-all { height: 44px; margin: -11px -4px; padding: 0 4px; color: var(--n1-lime); font: 400 17px/22px var(--n1-font); letter-spacing: -.4px; }

/* Строка операции */
body.n1 .wn-op { width: 100%; }
body.n1 .wn-op-text { display: flex; flex-direction: column; gap: 2px; }
/* вторая строка «способ · дата/время»: сжимается только способ, дата видна всегда */
body.n1 .wn-op-sub { display: flex; min-width: 0; white-space: nowrap; }
body.n1 .wn-op-sub .s-ell { min-width: 0; flex: 0 1 auto; }
body.n1 .wn-op-when { flex: none; }
/* 320: строке не хватало места, резались и названия («Оплата доста…») */
@media (max-width: 359px) {
  body.n1 .s-row.s-row--p.wn-op { gap: 10px; padding: 0 12px; }
  body.n1 .s-row--p.wn-op + .s-row--p.wn-op::before { left: 70px; }
}
body.n1 .wn-amt { flex: none; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
body.n1 .wn-amt--in { color: var(--n1-lime); }
body.n1 .wn-amt--bonus { color: var(--n1-bonus); }
/* Длинная сумма в строке (wallet.js, fitOpRows): ступени ставит замер, только
   когда названию не хватает места. Высота строки та же. Тип операции,
   обрезанный до пары букв, уходит вместе с точкой: остаётся время. */
body.n1 .wn-amt--l { font-size: 15px; letter-spacing: -.23px; }
body.n1 .wn-amt--xl { font-size: 14px; letter-spacing: -.15px; }
body.n1 .wn-op--nokind .wn-op-sub > .s-ell,
body.n1 .wn-op--nokind .wn-op-dot { display: none; }
body.n1 .wn-thumb { color: var(--n1-grey); }
body.n1 .wn-thumb--kaspi { background: #4a2b28; }
body.n1 .wn-thumb--kaspi img { width: 46px; height: 46px; object-fit: contain; }
body.n1 .wn-thumb--bonus { color: var(--n1-bonus); }
/* Neo Cargo: из логотипа видно только слово «neo» (картинка на фоне #262626).
   Серым, как остальные значки строк: салатовый знак в каждой строке спорил
   с единственным акцентом экрана. */
body.n1 .wn-thumb--neo,
body.n1 .wn-grp .wn-thumb--neo { background: var(--n1-bg); }
body.n1 .wn-neo { position: relative; display: block; width: 38px; height: 13px; overflow: hidden; }
body.n1 .wn-neo img,
body.n1 .wn-rcp-thumb .wn-neo img { position: absolute; left: -10px; top: -34px; width: 80px; height: 80px; max-width: none; filter: grayscale(1) brightness(1.05); }

/* Скелет кошелька по форме экрана */
body.n1 .wn-sk--cap { width: 64px; height: 16px; margin: 4px 0 8px; }
body.n1 .wn-sk--big { width: 190px; height: 40px; margin: 4px 0 4px; border-radius: 14px; }
body.n1 .wn-sk--ic { width: 26px; height: 26px; border-radius: 8px; flex: none; }
body.n1 .wn-sk--sub { width: 170px; height: 18px; margin: 30px 4px 14px; }
body.n1 .wn-sk--thumb { width: 48px; height: 48px; border-radius: 14px; flex: none; }
body.n1 .wn-sk-lines { display: flex; flex-direction: column; gap: 8px; }
body.n1 .wn-sk--l1 { width: 58%; height: 16px; }
body.n1 .wn-sk--l2 { width: 36%; height: 14px; }
body.n1 .wn-sk--amt { width: 72px; height: 16px; flex: none; }
body.n1 .wn-sk-card { pointer-events: none; }
body.n1 .wn-sk-row + .wn-sk-row::before { display: none; }

/* Справка: короткие абзацы, кнопка под ними */
body.n1 .wn-faq p { margin: 0; font: 400 17px/24px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .wn-faq p + p { margin-top: 12px; }
body.n1 .wn-faq-btn { margin-top: 24px; }

/* ── История (кошелёк и бонусы) ──────────────────────────────────────── */
/* Тип операций — сегмент во всю ширину: три значения видны сразу (.s-seg) */
body.n1 .wn-hseg { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
body.n1 .wn-hseg > button {
  min-width: 0;
  height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 22px;
  background: var(--n1-card);
  color: var(--n1-grey);
  font: 600 15px/20px var(--n1-font);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body.n1 .wn-hseg > button.on { color: #fff; box-shadow: inset 0 0 0 1.5px var(--n1-lime); }
body.n1 .wn-hist-sum { padding: 12px 4px 0; font-variant-numeric: tabular-nums; }
body.n1 .wn-hist-sum + .wn-hist-sum { padding-top: 2px; }
body.n1 .wn-day { margin: 24px 0 10px; color: var(--n1-grey); }
/* Пустая история: картинка чуть ниже сегмента */
body.n1 .wn-hseg ~ .wn-state { padding-top: 64px; }

/* Скелет истории */
body.n1 .wn-sk--seg { height: 44px; margin-top: 4px; border-radius: 22px; }
body.n1 .wn-sk--line { width: 240px; height: 16px; margin: 16px 4px 0; }
body.n1 .wn-sk--day { width: 96px; height: 18px; margin: 28px 4px 12px; }

/* ── Шторка «Период» ─────────────────────────────────────────────────── */
body.n1 #wl-period-options .s-row { width: 100%; min-height: 56px; gap: 12px; }
body.n1 .wn-period-from { flex: none; white-space: nowrap; font-size: 17px; line-height: 22px; letter-spacing: -.4px; }
body.n1 .wn-radio {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #6a6a6a;
  display: grid;
  place-items: center;
}
body.n1 .wl-period-option.active .wn-radio { background: var(--n1-lime); box-shadow: none; }
body.n1 .wl-period-option.active .wn-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--n1-on-lime); }
body.n1 .wn-sheet-cta { margin-top: 20px; }

/* ── Чек операции (шторка) ───────────────────────────────────────────── */
/* длинный список посылок не выталкивает шторку за верх экрана */
body.n1 #wl-receipt-sheet { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
body.n1 .wn-rcp-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 0 20px; }
body.n1 .wn-rcp-thumb { width: 56px; height: 56px; border-radius: 16px; background: var(--n1-card2); }
body.n1 .wn-rcp-thumb img { width: 38px; height: 38px; }
body.n1 .wn-rcp-thumb.wn-thumb--kaspi { background: #4a2b28; }
body.n1 .wn-rcp-thumb.wn-thumb--kaspi img { width: 54px; height: 54px; }
body.n1 .wn-rcp-amt { margin-top: 14px; font: 700 30px/36px var(--n1-font); letter-spacing: -.5px; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.n1 .wn-rcp-amt.wn-amt--in { color: var(--n1-lime); }
body.n1 .wn-rcp-amt.wn-amt--bonus { color: var(--n1-bonus); }
body.n1 .wn-rcp-when { margin-top: 4px; }
/* описание записи (причина возврата, корректировки): целиком, с переносом */
body.n1 .wn-rcp-desc { margin-top: 12px; max-width: 320px; white-space: normal; overflow-wrap: anywhere; }
body.n1 .wn-rcp-sub { margin: 20px 0 10px; padding: 0 16px; color: var(--n1-grey); }
body.n1 .wn-rcp-sk { margin: 24px 16px 12px; }
body.n1 .wn-rcp-note { margin: 16px 8px 12px; text-align: center; }
body.n1 .wn-grp .s-thumb { background: #444; }

/* ── Пополнение ──────────────────────────────────────────────────────── */
/* Верх прокручивается, кнопка и клавиатура прибиты к низу */
body.n1 #wallet-topup-screen .wl-body { overflow: hidden; padding: 0 16px; }
body.n1 .wl-topup-scroll { gap: 0; padding-bottom: 16px; }
body.n1 .wl-amount-zone { gap: 6px; padding: 28px 0 28px; }
body.n1 .wl-amount-display {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font: 700 48px/56px var(--n1-font);
  letter-spacing: -1px;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.n1 .wl-amount-display.empty { color: var(--n1-grey2); }
/* салатовая каретка ввода сразу за цифрами, перед «₸»: туда встают новые цифры */
body.n1 .wl-amount-display::after { content: none; }
body.n1 .wn-caret {
  flex: none;
  width: 3px;
  height: .92em;
  margin: 0 8px 0 3px;
  border-radius: 2px;
  background: var(--n1-lime);
}
body.n1 .wl-amount-display.wn-big--m { font-size: 40px; line-height: 48px; letter-spacing: -.8px; }
body.n1 .wl-amount-display.wn-big--s { font-size: 32px; line-height: 40px; letter-spacing: -.6px; }
body.n1 .wl-min-hint {
  min-height: 20px;
  font: 400 15px/20px var(--n1-font);
  letter-spacing: -.23px;
  color: var(--n1-grey);
  text-align: center;
  text-wrap: balance;   /* на 320 длинная подсказка в две ровные строки, без одинокого слова */
  font-variant-numeric: tabular-nums;
  transition: none;
}
body.n1 .wl-min-hint.warn { color: var(--n1-amber); }
/* строка способа: подпись «Способ оплаты» над ней, рамка и белая стрелка —
   видно, что это выбор и что строка нажимается (замечание Тима 03.10, № 24) */
body.n1 .wn-from-cap { margin: 0 4px 8px; color: var(--n1-grey); }
body.n1 .wl-select-card { min-height: 72px; padding: 0 16px; gap: 14px; border: 0; border-radius: var(--n1-r-card); background: var(--n1-card); cursor: pointer; box-shadow: inset 0 0 0 1.5px #5a5a5a; }
body.n1 .wl-select-card .s-chev { color: #fff; }
body.n1 .wl-select-card { -webkit-tap-highlight-color: transparent; }

/* Значок способа: логотип Kaspi, карта Visa/Mastercard, значок карты */
body.n1 .wl-method-ic { width: 36px; height: 36px; flex: none; border-radius: 0; background: none; display: grid; place-items: center; overflow: visible; color: var(--n1-grey); }
body.n1 .wl-method-ic--kaspi { background: none; }
body.n1 .wl-method-ic--kaspi img { width: 46px; height: 46px; max-width: none; object-fit: contain; }
body.n1 .wl-method-ic--brand img { width: 36px; height: 25px; object-fit: contain; border-radius: 4px; }
body.n1 .wl-method-ic--bank,
body.n1 .wl-method-ic--card { background: none; color: var(--n1-grey); }
/* «Банковская карта»: 3D-карта Тима (NeoArt 'card') 48 px в колонке 36, как
   логотип Kaspi 46 px рядом: строки шторки ровные по левому краю текста */
body.n1 .wl-method-ic--art img { width: 48px; height: 48px; max-width: none; object-fit: contain; pointer-events: none; }
body.n1 .wn-add-ic { color: var(--n1-lime); }

/* Кнопка и цифровая клавиатура внизу: волосок сверху, клавиши без плашек */
body.n1 .wl-topup-bottom {
  position: relative;
  gap: 8px;
  margin: 0 -16px;
  padding: 12px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--n1-bg);
}
body.n1 .wl-topup-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  transform: scaleY(.5);
  transform-origin: top;
  background: var(--n1-hair);
}
body.n1 .wl-numpad { gap: 2px 8px; }
body.n1 .wl-numpad-key {
  height: 56px;
  border-radius: 28px;
  background: none;
  color: #fff;
  font: 400 28px/34px var(--n1-font);
  letter-spacing: -.3px;
}
/* подсветка нажатой клавиши — единственный разрешённый отклик на касание
   в приложении (n1-motion.css, «Нажатие») */
body.n1 .wl-numpad-key.pressed { background: var(--n1-card2); }
body.n1 .wl-numpad-key svg { width: 26px; height: 26px; }
/* Невысокие экраны (360×640, 320×568): строка способа уходила под панель с
   кнопкой и клавишами, а касание по её месту нажимало «Пополнить». Клавиатура
   своя, системная не открывается, так что высота окна здесь не скачет. */
@media (max-height: 700px) {
  body.n1 .wl-amount-zone { padding: 12px 0 16px; }
  body.n1 .wl-numpad-key { height: 48px; border-radius: 24px; }
}
@media (max-height: 600px) {
  body.n1 .wl-amount-zone { padding: 8px 0 12px; }
  body.n1 .wl-amount-display { font-size: 40px; line-height: 48px; }
  body.n1 .wl-select-card { min-height: 64px; }
  body.n1 .wl-numpad-key { height: 44px; border-radius: 22px; font-size: 26px; }
}

/* ── Шторка «Способ пополнения» ──────────────────────────────────────── */
body.n1 #wl-method-list { max-height: calc(100dvh - 150px); margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
body.n1 .wl-method {
  gap: 14px;
  min-height: 64px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.n1 .wl-method + .wl-method { margin-top: 0; }
/* Названия способов длинные («Счёт по номеру Kaspi.kz», «Отправим счёт в
   приложение Kaspi»): на узком экране переносятся на вторую строку, а не
   режутся многоточием. Сверху и снизу поле, чтобы две строки не липли к
   разделителю. Так же строка способа на экране пополнения. */
body.n1 .wl-method,
body.n1 .wl-select-card { padding-top: 10px; padding-bottom: 10px; }
body.n1 .wl-method .wn-op-text .s-ell,
body.n1 .wl-select-card .wn-op-text .s-ell { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: pretty; }
body.n1 .wn-grp .s-row + .s-row::before { left: 66px; }
body.n1 .wn-grp .s-row--i + .s-row--i::before { left: 16px; }
body.n1 .wl-method.active .wn-radio { background: var(--n1-lime); box-shadow: none; }
body.n1 .wl-method.active .wn-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--n1-on-lime); }
body.n1 .wl-method-add .wn-op-text .s-b { color: #fff; }
body.n1 .wl-method-add.is-off { opacity: .45; cursor: default; }
body.n1 .wl-method-add.is-off .wn-add-ic { color: var(--n1-grey); }
body.n1 .wl-method-del {
  width: 44px;
  height: 44px;
  margin: 0 -6px 0 -8px;
  border-radius: 22px;
  color: var(--n1-grey2);
  display: grid;
  place-items: center;
}
body.n1 .wl-method-del:hover { color: var(--n1-grey2); background: none; }
body.n1 .wl-method-del svg { width: 22px; height: 22px; }
/* Низ шторки: зелёный щит и «Мы не храним данные карт…» (вид prod-18-09:
   значок слева, текст рядом). Зелёный — общий --n1-green из n1.css. */
body.n1 .wn-safe { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0 4px; text-align: left; }
body.n1 .wn-safe svg { width: 18px; height: 18px; flex: none; color: var(--n1-green, #4ade80); }
/* Шапка шторки способов: заголовок слева, «Изменить» справа (удаление карт и номера) */
body.n1 .wn-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
body.n1 .wn-sheet-head .wl-sheet-title { margin: 0; }
body.n1 .wn-edit { height: 44px; margin: -10px -4px; padding: 0 4px; color: var(--n1-lime); font: 400 17px/22px var(--n1-font); letter-spacing: -.4px; }
body.n1 .wn-edit[hidden] { display: none; }
/* режим правки: выбирать нельзя, у сохранённых красная корзина */
body.n1 #wl-method-sheet.is-edit .wl-method:not(.is-deletable) { opacity: .4; pointer-events: none; }
body.n1 #wl-method-sheet.is-edit .wl-method-del { color: var(--n1-red); }
body.n1 .wn-sk--ic36 { width: 36px; height: 36px; border-radius: 50%; flex: none; }
body.n1 .wn-sk-method + .s-row::before,
body.n1 .s-row + .wn-sk-method::before { display: none; }


/* ── Счёт по номеру и «Мой номер» ────────────────────────────────────── */
body.n1 .wn-f-cap { display: block; margin: 8px 4px 8px; }
body.n1 .wn-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--n1-card2);
  color: #fff;
  font: 400 17px/22px var(--n1-font);
  letter-spacing: -.4px;
  transition: box-shadow .12s ease;
}
/* фокус — тонкая салатовая обводка внутрь */
body.n1 .wn-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--n1-lime); }
body.n1 .wn-field-cc { flex: none; color: #fff; font-variant-numeric: tabular-nums; }
body.n1 .wn-field input.wn-field-in {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  color: #fff;
  font: inherit;
  letter-spacing: inherit;
  font-variant-numeric: tabular-nums;
  caret-color: var(--n1-lime);
}
body.n1 .wn-field input.wn-field-in::placeholder { color: var(--n1-grey2); opacity: 1; }
body.n1 .wn-field input.wn-field-in:focus { border: 0; outline: 0; box-shadow: none; background: transparent; }
body.n1 .wn-f-hint { margin: 8px 4px 0; }
body.n1 .wl-inv-row,
body.n1 .wn-inv-add { margin-top: 24px; min-height: 72px; gap: 14px; }
body.n1 .wl-inv-row { cursor: pointer; padding: 0 12px 0 16px; background: var(--n1-card); border-radius: var(--n1-r-card); }
/* шторка «Мой номер»: поле на втором слое */
body.n1 #wl-ap-sheet .wn-field { background: var(--n1-card2); }
body.n1 #wl-ap-sheet .wn-f-hint { margin: 10px 4px 0; }
/* номер не понять однозначно: красная обводка и текст ошибки под полем */
body.n1 .wn-field.is-err,
body.n1 .wn-field.is-err:focus-within { box-shadow: inset 0 0 0 1.5px var(--n1-red); }
body.n1 .wn-f-hint.is-err { color: var(--n1-red); font-size: 13px; line-height: 18px; }
/* просьба проверить номер (не ошибка, кнопка доступна) */
body.n1 .wn-f-hint.is-warn { color: var(--n1-amber); }

@media (prefers-reduced-motion: reduce) {
  body.n1 .wn-field { transition: none; }
}

/* ── Окно по центру: удалить карту / убрать номер ────────────────────── */
body.n1 .wl-sheet.wn-dialog {
  top: 0;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: fit-content;
  max-width: 342px;
  margin: auto;
  padding: 24px;
  border-radius: var(--n1-r-card);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(.94);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, visibility 0s .2s;
}
body.n1 .wl-sheet.wn-dialog.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, visibility 0s 0s;
}
body.n1 .wn-dlg-title { font: 700 20px/25px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .wn-dlg-text { margin-top: 8px; }
body.n1 .wn-dlg-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
body.n1 .wn-btn2--danger { color: var(--n1-red); }

/* ── Подтверждение оплаты картой ─────────────────────────────────────── */
body.n1 #wl-pc-rows .wn-kv .wn-v { color: var(--n1-grey); }

/* ── Шторка оплаты: идёт / ждём оплату / успех / отказ ───────────────── */
/* Высота одна у всех состояний (макеты WalletTopupWait, WalletPay*): кнопки
   прижаты к низу, при смене состояния шторка не прыгает. Ручка есть везде,
   кроме идущего списания (.is-busy): тогда шторку не смахнуть, круг и
   текст стоят по центру. */
body.n1 .wl-sheet.wl-sheet--pay {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: calc(356px + env(safe-area-inset-bottom, 0px));
  padding: 8px 20px max(20px, calc(12px + env(safe-area-inset-bottom, 0px)));
}
body.n1 .wl-pay-grab { flex: none; margin-bottom: 23px; }
body.n1 .wl-pay-body { flex: 1 1 auto; padding: 0; }
body.n1 .wl-sheet--pay.is-busy .wl-pay-body { justify-content: center; }
body.n1 .wl-sheet--pay.is-busy .wl-pay-actions { display: none; }
body.n1 .wl-pay-ring { width: 84px; height: 84px; margin: 8px 0 24px; color: #fff; }
body.n1 .wl-pay-ring::before {
  border: 3px solid rgba(178, 254, 18, .18);
  border-top-color: var(--n1-lime);
  animation-duration: .9s;
}
body.n1 .wn-pay-ic { display: grid; place-items: center; color: #fff; }
body.n1 .wn-pay-ic img { width: 48px; height: 48px; object-fit: contain; }
body.n1 .wl-pay-ring--ok .wn-pay-ic,
body.n1 .wl-pay-ring--err .wn-pay-ic { display: none; }
body.n1 .wl-pay-ring svg { width: 36px; height: 36px; }
body.n1 .wl-pay-ring--ok { background: var(--n1-lime); color: var(--n1-on-lime); }
body.n1 .wl-pay-ring--err { background: #ff453a; color: #fff; }
/* значок способа (карта) и причины итога: базовое правило прячет все svg в круге */
body.n1 .wl-pay-ring .wn-pay-ic svg { display: block; animation: none; }
/* счёт истёк, нет связи: серый круг, значок белым, без вращения (макеты
   WalletPayExpired, WalletPayOffline) */
body.n1 .wl-pay-ring--mute { background: var(--n1-card2); color: #fff; }
/* галочка рисуется одним движением */
body.n1 .wl-pay-ring--ok .ok path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wnDraw .36s ease-out .08s forwards; }
@keyframes wnDraw { to { stroke-dashoffset: 0; } }
body.n1 .wl-pay-amount { display: none; }
/* Итог «Кошелёк пополнен»: под заголовком крупно сколько пришло («+5 000 ₸»),
   ниже серым баланс. Порядок в шторке: круг, заголовок, сумма, подпись, кнопки. */
body.n1 .wl-pay-ring { order: 0; }
body.n1 .wl-pay-title { order: 1; }
body.n1 .wl-pay-amount { order: 2; }
body.n1 .wl-pay-sub { order: 3; }
body.n1 .wl-pay-actions { order: 4; }
body.n1 .wl-sheet--pay.is-done .wl-pay-amount {
  display: block;
  margin-top: 6px;
  font: 700 30px/36px var(--n1-font);
  letter-spacing: -.5px;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* 3D-картинка вместо кольца (wallet.js payHero): «Ждём оплату в Kaspi» —
   телефон с оплатой, «Кошелёк пополнен» — коробка с галочкой. Занимает
   ровно место кольца (84 + отступы 8 и 24 = 116), высота шторки не меняется
   между ожиданием и итогом. Пока ждём, в углу крутится маленькое кольцо
   (опрос идёт); итог появляется лёгким увеличением. */
body.n1 .wn-pay-hero { order: 0; position: relative; flex: none; width: 120px; height: 120px; margin: -4px 0 0; }
body.n1 .wn-pay-hero[hidden],
body.n1 .wl-sheet--pay.has-hero .wl-pay-ring { display: none; }
body.n1 .wn-pay-hero img { display: block; width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)); pointer-events: none; -webkit-user-drag: none; user-select: none; }
body.n1 .wn-pay-hero-spin { display: none; position: absolute; right: 2px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--n1-card2); box-shadow: 0 0 0 3px var(--n1-card); }
body.n1 .wn-pay-hero-spin::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2.5px solid rgba(178, 254, 18, .2); border-top-color: var(--n1-lime); animation: wlSpin .9s linear infinite; }
body.n1 .wn-pay-hero--wait .wn-pay-hero-spin { display: block; }
body.n1 .wn-pay-hero--done img { animation: wnHeroIn .32s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes wnHeroIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.n1 .wn-pay-hero-spin::before { animation: none; }
  body.n1 .wn-pay-hero--done img { animation: none; }
}
body.n1 .wl-pay-title { margin-top: 0; font: 700 22px/28px var(--n1-font); letter-spacing: -.4px; color: #fff; text-align: center; }
body.n1 .wl-pay-sub { margin-top: 6px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); text-align: center; }
body.n1 .wl-pay-actions { gap: 8px; margin-top: auto; padding-top: 24px; }
body.n1 .wl-pay-actions .wn-btn2 { height: 56px; border-radius: 28px; }

@media (prefers-reduced-motion: reduce) {
  body.n1 .wl-sheet.wn-dialog,
  body.n1 .wl-sheet.wn-dialog.active { transform: none; transition: opacity .01s linear, visibility 0s; }
  body.n1 .wl-pay-ring::before { animation: none; }
  body.n1 .wl-pay-ring svg { animation: none; }
  body.n1 .wl-pay-ring--ok .ok path { animation: none; stroke-dashoffset: 0; }
}

/* ── Бонусы ──────────────────────────────────────────────────────────── */
body.n1 .wn-bonus-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
/* сумма не сжимается уже своего текста, а картинка карты уступает ей место:
   на 320 крупная сумма заезжала под карту */
body.n1 .wn-bonus-top .wn-bal { padding-top: 0; min-width: auto; }
/* знак Б у суммы бонусов — фиолетовый акцент */
body.n1 .wn-big--b .wl-b { color: var(--n1-bonus); }
/* 3D-монеты бонусов (n1/bonus-monety, № 39) вместо плоской карты BONUS:
   квадрат, без наклона; на узком экране уступает место сумме. 96 px, как
   кошелёк в шапке Кошелька (04.10): соседние экраны с одной шапкой */
body.n1 .wn-bonus-art {
  flex: 0 1 96px;
  min-width: 0;
  width: 96px;
  height: 96px;
  margin: -11px 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .4));
  pointer-events: none;
}
/* «Накоплено»: кэшбэк и доход от друзей (wallet.js, earnedHtml). Строки как
   в истории бонусов: значок в плитке, сумма фиолетовым, стрелка. «Кэшбэк»
   ведёт в историю одного кэшбэка, «От друзей» на «Пригласить друзей» */
body.n1 .wn-earn .s-chev { margin-left: -6px; }
/* на 320 подпись («4 друга с вашим кодом») встаёт в две строки: поля сверху
   и снизу, чтобы текст не прилипал к разделителю. Строке в одну строку они
   не мешают, высоту держит min-height 72. */
body.n1 .wn-earn .s-row.s-row--p.wn-op { padding-top: 10px; padding-bottom: 10px; }
body.n1 .wn-code { color: #fff; letter-spacing: .4px; }
body.n1 .wn-copy {
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0 -12px 0 -8px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: none;
  color: var(--n1-grey2);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* строка «Ввести промокод» и сбой истории: ведущий значок в колонке 26 px */
body.n1 .wn-promo-row,
body.n1 .wn-mini-err { margin-top: 24px; min-height: 64px; gap: 14px; }
body.n1 .wn-mini-err { margin-top: 0; min-height: 72px; }
body.n1 .wn-lead { width: 26px; flex: none; display: grid; place-items: center; color: var(--n1-lime); }
body.n1 .wn-lead--grey { color: var(--n1-grey2); }
body.n1 .wn-state--flat { padding-top: 48px; }
body.n1 .wl-dock[hidden] { display: none; }

/* скелет бонусов */
body.n1 .wn-sk--bbig { width: 150px; }
body.n1 .wn-sk--bline { width: 170px; height: 16px; margin-top: 8px; }
body.n1 .wn-sk--bcard { width: 76px; height: 76px; border-radius: 38px; flex: none; }
body.n1 .wn-sk--k { width: 90px; height: 16px; flex: none; }

/* ── Бонусы: рекламная карточка «Приглашайте друзей» (№ 30) ──────────────
   Как карточки карусели Главной (их Тим хвалит): текст слева, 3D-подарок
   справа, плюс салатовая кнопка «Пригласить» — видно, что это нажимается.
   Ведёт на экран «Пригласить друзей». */
body.n1 .wn-inv-card {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 136px;
  margin-top: 24px;
  padding: 20px 132px 20px 20px;
  overflow: hidden;
  text-align: left;
}
body.n1 .wn-inv-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
body.n1 .wn-inv-card-title { font: 700 20px/25px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .wn-inv-card-btn { display: inline-flex; align-items: center; height: 36px; margin-top: 10px; padding: 0 16px; border-radius: 18px; background: var(--n1-lime); color: var(--n1-on-lime); font: 600 15px/20px var(--n1-font); letter-spacing: -.2px; }
body.n1 .wn-inv-card-art { position: absolute; right: 2px; top: 50%; width: 124px; height: 124px; margin-top: -62px; object-fit: contain; transform: rotate(-8deg); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)); pointer-events: none; }
@media (max-width: 359px) {
  body.n1 .wn-inv-card { padding-right: 104px; }
  body.n1 .wn-inv-card-art { width: 100px; height: 100px; margin-top: -50px; right: 0; }
}

/* ── Пригласить друзей (замечание Тима 03.10, № 31) ──────────────────────
   Сверху «Друг получит 500 Б» и ваш процент, справа 3D-подарок (NeoArt
   'invite'); карточка с крупным промокодом и «Скопировать»; группа итогов;
   внизу «Поделиться в WhatsApp» и «Другие способы». */
body.n1 .wn-inv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px 0; }
body.n1 .wn-inv-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.n1 .wn-inv-title { font: 700 28px/34px var(--n1-font); letter-spacing: -.5px; color: #fff; text-wrap: balance; }
body.n1 .wn-inv-title .wl-b { color: var(--n1-bonus); }
body.n1 .wn-inv-art { flex: none; width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)); pointer-events: none; }
body.n1 .wn-inv-code { margin-top: 24px; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
body.n1 .wn-inv-codev { max-width: 100%; font: 700 34px/42px var(--n1-font); letter-spacing: 3px; color: #fff; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
body.n1 .wn-inv-copy { margin-top: 12px; -webkit-tap-highlight-color: transparent; }
body.n1 .wn-inv-stats { margin-top: 24px; }
/* подпись слева переносится, число справа целиком (на 320 не режется) */
body.n1 .wn-inv-stats .wn-kv > .s-b:first-child { flex: 1 1 auto; min-width: 0; padding: 10px 0; }
body.n1 .wn-inv-stats .wn-kv .wn-v { flex: none; overflow: visible; }
body.n1 #wallet-invite-screen .wl-dock:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
/* скелет */
body.n1 .wn-sk--ititle { width: 190px; height: 28px; }
body.n1 .wn-sk--iart { width: 104px; height: 104px; border-radius: 24px; flex: none; }
body.n1 .wn-sk--icode { width: 200px; height: 36px; margin-top: 8px; }
@media (max-width: 359px) {
  body.n1 .wn-inv-title { font-size: 24px; line-height: 30px; }
  body.n1 .wn-inv-art { width: 88px; height: 88px; }
  body.n1 .wn-inv-codev { font-size: 30px; line-height: 38px; letter-spacing: 2px; }
}

/* ── Тарифы: строка «Бонусы» (ссылка на экран Бонусов, app.html) ──────── */
body.n1 #tariff-to-bonus { width: 100%; margin: 16px 0 24px; }

/* Чек: «Поделиться» внизу, второй кнопкой */
body.n1 .wn-rcp-share { margin-top: 20px; }

/* ── Промокод (#promo-code-screen, app.html): герой 3D-купон ─────────────
   Экран открывают с Бонусов («Ввести промокод») и из настроек. Сверху
   3D-купон Тима (NeoArt 'coupon', путь ставит app.js) вместо прежней
   плоской карты бонусов: её рисовал #promo-modal-form::before в
   n1-profilesub.css, здесь он гаснет, как только купон показан. */
body.n1 #promo-modal-form:has(> #promo-art:not([hidden]))::before { content: none; }
body.n1 #promo-art { display: block; flex: none; width: 160px; height: 160px; margin: -4px auto 16px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)); pointer-events: none; -webkit-user-drag: none; user-select: none; }
body.n1 #promo-art[hidden] { display: none; }
/* невысокие экраны (360×640, 320×568): купон меньше, поле выше */
@media (max-height: 700px) {
  body.n1 #promo-art { width: 128px; height: 128px; margin-bottom: 12px; }
}