/* ==========================================================================
   HookGuard v56 — касса: окно пополнения и вывода.

   До v56 окно пополнения было одним столбцом шириной 420px, в который
   складывались ВСЕ 20 способов оплаты Free-Kassa (4 группы с заголовками).
   На десктопе карточка уезжала за нижний край экрана и не скроллилась:
   «слишком длинное окно».  Здесь окно пересобрано как нормальная касса:

   * шапка с иконкой, заголовком, подписью и текущим балансом;
   * тело — свой скролл-контейнер, карточка никогда не выше вьюпорта;
   * на десктопе две колонки: слева сумма и кнопка, справа способы оплаты;
   * способы разбиты на вкладки-группы, поэтому в кадре 3–8 плиток, а не 20;
   * у каждого способа своя иконка и свой фирменный оттенок.

   Слой грузится последним и перебивает .modal-card / .pay-sheet из style.css
   по специфичности (#payModal), а не по !important.
   ========================================================================== */

/* ---------- карточка ---------- */
#payModal .pay-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  max-height: min(92vh, 760px);
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #12151c;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  /* v55-motion анимирует появление карточки opacity+transform — перечисляем
     их здесь же, иначе max-width перебьёт чужой transition целиком. */
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-spring),
    max-width var(--dur-3) var(--ease-out);
}
/* Пополнение шире вывода: справа живёт сетка способов оплаты. */
@media (min-width: 861px) {
  #payModal .pay-sheet.is-topup { max-width: 880px; }
  /* Шаги QR и «готово» — одна колонка по центру, широкая карточка им ни к чему. */
  #payModal .pay-sheet.is-topup:not(.is-step-form) { max-width: 520px; }
}

/* ---------- шапка ---------- */
#payModal .pay-head {
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .022);
}
#payModal .pay-head .ptitle { gap: 11px; min-width: 0; font-size: 16px; }
.pay-head-ico {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), .13);
  border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--accent-ink);
}
.pay-head-ico .ico { width: 17px; height: 17px; }
.pay-head-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pay-head-txt b {
  font-size: 15.5px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25;
  color: var(--ink);
}
.pay-head-txt small {
  font-size: 11.5px; line-height: 1.35; color: var(--muted); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pay-head-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pay-bal {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
}
.pay-bal .ico { width: 13px; height: 13px; color: var(--steel); }
.pay-bal small {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.pay-bal b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
#payModal .pay-head .close-modal-btn {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid transparent;
  color: var(--muted);
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
#payModal .pay-head .close-modal-btn:hover {
  background: rgba(255, 255, 255, .06); border-color: var(--line); color: var(--ink);
}
#payModal .pay-head .close-modal-btn .ico { width: 15px; height: 15px; }

/* ---------- тело: единственный скролл окна ---------- */
#payModal .pay-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 18px;
}
#payModal .pay-scroll::-webkit-scrollbar { width: 8px; }
#payModal .pay-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12); border-radius: var(--r-pill);
}
#payModal .pay-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); }
#payModal .pay-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- сетка кассы ---------- */
#topStepForm.cashier {
  display: grid;
  grid-template-columns: minmax(240px, 296px) minmax(0, 1fr);
  grid-template-areas:
    "amount methods"
    "cta    methods";
  gap: 16px 0;
  align-items: start;
}
.cs-amount { grid-area: amount; padding-right: 18px; }
.cs-cta { grid-area: cta; padding-right: 18px; }
.cs-methods {
  grid-area: methods;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

/* ---------- подписи-заголовки блоков ---------- */
.cs-lab-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.cs-lab, #topAmtLabel {
  flex: 0 1 auto; min-width: 0;
  font-size: 10.5px; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-limit {
  flex: 0 1 auto; min-width: 0;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- сумма ---------- */
.cs-amt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  transition: border-color var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft);
}
.cs-amt:focus-within {
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}
.cs-amt.is-bad { border-color: rgba(229, 72, 77, .55); box-shadow: 0 0 0 3px rgba(229, 72, 77, .1); }
#topAmt {
  flex: 1 1 auto; min-width: 0;
  background: none !important; border: 0; outline: none;
  box-shadow: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-family: var(--font);
  font-size: 27px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  padding: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
#topAmt::placeholder { color: rgba(139, 146, 164, .5) !important; -webkit-text-fill-color: rgba(139, 146, 164, .5) !important; }
#topAmt::-webkit-outer-spin-button,
#topAmt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-amt-cur {
  font-size: 17px; font-weight: 750; color: var(--muted);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}

/* быстрые суммы */
.cs-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cs-quick button {
  flex: 1 1 auto; min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 700 12px/1 var(--font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.cs-quick button:hover {
  background: rgba(var(--accent-rgb), .12);
  border-color: rgba(var(--accent-rgb), .42);
  transform: translateY(-1px);
}
.cs-quick button.on {
  background: rgba(var(--accent-rgb), .17);
  border-color: rgba(var(--accent-rgb), .55);
  color: #fff;
}
.cs-quick button.is-max { flex: 0 0 auto; color: var(--muted); }
.cs-quick button.is-max:hover, .cs-quick button.is-max.on { color: #fff; }

/* ---------- способы оплаты ---------- */
.cs-sel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--ink);
  min-width: 0;
}
.cs-sel .pm-chip-ico {
  width: 16px; height: 16px; flex: 0 0 16px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--pm-bg, rgba(255, 255, 255, .06));
  color: var(--pm, var(--steel));
}
.cs-sel .pm-chip-ico .ico { width: 11px; height: 11px; stroke-width: 1.8; }
.cs-sel b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }

.tm-tabs {
  display: flex; gap: 6px; margin-bottom: 10px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 1px;
}
.tm-tabs::-webkit-scrollbar { display: none; }
.tm-tab {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  color: var(--muted);
  font: 700 12px/1.35 var(--font);
  white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.tm-tab .ico { width: 13px; height: 13px; stroke-width: 1.9; opacity: .85; }
.tm-tab i { font-style: normal; font-size: 10px; font-weight: 700; opacity: .55; }
.tm-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.tm-tab.on {
  color: #fff;
  background: rgba(var(--accent-rgb), .15);
  border-color: rgba(var(--accent-rgb), .5);
}
.tm-tab.on .ico { opacity: 1; color: var(--accent-ink); }

.top-methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 8px;
  margin: 0;
}
.pm {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  padding: 9px 26px 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .032);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}
.pm:hover { background: rgba(255, 255, 255, .065); transform: translateY(-1px); }
.pm:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .7); outline-offset: 2px; }
.pm.on {
  background: rgba(var(--accent-rgb), .1);
  border-color: rgba(var(--accent-rgb), .55);
}
.pm-ico {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--pm-bg, rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .05);
  color: var(--pm, var(--steel));
}
.pm-ico .ico { width: 20px; height: 20px; }
.pm-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-txt b {
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-txt i {
  font-style: normal; font-size: 10.5px; line-height: 1.3; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-cur {
  position: absolute; top: 6px; right: 7px;
  font: 700 8.5px/1.4 var(--mono); letter-spacing: .04em;
  color: var(--muted);
  background: rgba(255, 255, 255, .06);
  border-radius: 5px; padding: 0 3px;
  transition: opacity var(--dur-1);
}
.pm.on .pm-cur { opacity: 0; }
.pm-check {
  position: absolute; top: 6px; right: 6px;
  width: 15px; height: 15px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  opacity: 0; transform: scale(.5);
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.pm-check .ico { width: 9px; height: 9px; stroke-width: 3.4; }
.pm.on .pm-check { opacity: 1; transform: none; }
.cs-empty { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }

/* фирменные оттенки способов */
[data-pm="sbp"] { --pm: #7ea2ff; --pm-bg: rgba(126, 162, 255, .14); }
[data-pm="card"] { --pm: #6fd39a; --pm-bg: rgba(111, 211, 154, .13); }
[data-pm="mir"] { --pm: #4fc3a1; --pm-bg: rgba(79, 195, 161, .13); }
[data-pm="bank"] { --pm: #58a6e8; --pm-bg: rgba(88, 166, 232, .13); }
[data-pm="purse"] { --pm: #a98bff; --pm-bg: rgba(169, 139, 255, .14); }
[data-pm="wallet"] { --pm: #f2b45c; --pm-bg: rgba(242, 180, 92, .13); }
[data-pm="coins"] { --pm: #5f9bf8; --pm-bg: rgba(95, 155, 248, .13); }
[data-pm="visa"] { --pm: #6d8dff; --pm-bg: rgba(109, 141, 255, .14); }
[data-pm="mastercard"] { --pm: #f79e4a; --pm-bg: rgba(247, 158, 74, .14); }
[data-pm="btc"] { --pm: #f7931a; --pm-bg: rgba(247, 147, 26, .14); }
[data-pm="ltc"] { --pm: #b9c0cf; --pm-bg: rgba(185, 192, 207, .12); }
[data-pm="eth"] { --pm: #9aa4e8; --pm-bg: rgba(154, 164, 232, .14); }
[data-pm="usdt"] { --pm: #2fbf9b; --pm-bg: rgba(47, 191, 155, .13); }
[data-pm="ton"] { --pm: #35b8ea; --pm-bg: rgba(53, 184, 234, .14); }
[data-pm="bnb"] { --pm: #f3ba2f; --pm-bg: rgba(243, 186, 47, .14); }
[data-pm="trx"] { --pm: #ff6b6b; --pm-bg: rgba(255, 107, 107, .13); }

/* ---------- кнопка оплаты и мелкий шрифт ---------- */
.cs-go {
  width: 100%; min-height: 46px;
  justify-content: center;
  font-size: 14px; font-weight: 800; letter-spacing: -.01em;
}
.cs-check {
  width: 100%; min-height: 38px; margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font: 650 12.5px var(--font);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
}
.cs-check:hover { color: var(--ink); border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); }
.cs-check:disabled { opacity: .5; cursor: not-allowed; }
.cs-check .ico { width: 14px; height: 14px; }
#topCheckMsg {
  margin: 8px 0 0; padding: 8px 10px;
  border-radius: 8px;
  background: rgba(126, 162, 255, .1);
  border: 1px solid rgba(126, 162, 255, .22);
  color: #a8c0ff;
  font-size: 12px; line-height: 1.45;
}
.is-loading .ico { animation: cs-spin .8s linear infinite; }
@keyframes cs-spin { to { transform: rotate(360deg); } }

.cs-fine { margin-top: 12px; display: grid; gap: 4px; }
.cs-fine .pay-terms-note {
  margin: 0; text-align: left;
  font-size: 10.5px; line-height: 1.5; color: var(--muted);
}
.cs-seller summary {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; list-style: none;
  font-size: 10.5px; font-weight: 650; color: var(--muted);
  transition: color var(--dur-1);
}
.cs-seller summary::-webkit-details-marker { display: none; }
.cs-seller summary:hover { color: var(--ink); }
.cs-seller summary .ico {
  width: 11px; height: 11px; stroke-width: 2.4;
  transition: transform var(--dur-2) var(--ease-spring);
}
.cs-seller[open] summary .ico { transform: rotate(90deg); }
.cs-seller .pay-seller-note { margin: 4px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--muted); }

.cs-badges {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: auto; padding-top: 11px;
  border-top: 1px solid var(--line);
}
.cs-badges > span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.cs-badges .ico { width: 13px; height: 13px; color: var(--steel); }

/* ---------- шаг «оплата» и шаг «готово» ---------- */
#topStepPay, #topStepDone { max-width: 480px; margin: 0 auto; }
#payModal .fkpay-sum {
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
}
.fkpay-sum-ico {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--pm-bg, rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .05);
  color: var(--pm, var(--steel));
}
.fkpay-sum-ico .ico { width: 21px; height: 21px; }
.fkpay-sum-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
#payModal .fkpay-method { font-size: 13px; font-weight: 750; letter-spacing: 0; text-transform: none; color: var(--ink); opacity: 1; }
#payModal .fkpay-amount { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

#payModal .fkpay-qr {
  width: 184px; min-height: 184px;
  margin: 2px auto 12px; padding: 12px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
#payModal .fkpay-scan { font-size: 12.5px; line-height: 1.5; margin: 0 auto 12px; }
#payModal .fkpay-status { margin-top: 12px; border-radius: 9px; }
#payModal .fkpay-row { gap: 8px; margin-top: 8px; }
#payModal .fkpay-row .btn-secondary,
#payModal .fkpay-row .btn-ghost { min-height: 40px; border-radius: 8px; }
#payModal .fkpay-row .btn-ghost { border: 1px solid var(--line); color: var(--muted); }
#payModal .fkpay-row .btn-ghost:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
#payModal #fkPayOpen { width: 100%; min-height: 44px; justify-content: center; font-weight: 800; }
#payModal .fkpay-done { padding: 14px 0 2px; }
#payModal .fkpay-done-title { font-size: 17px; }

/* ---------- светлая тема ---------- */
html[data-theme="light"] #payModal .pay-sheet {
  background: var(--surface);
  border-color: rgba(26, 22, 20, .1);
  box-shadow: 0 18px 44px rgba(40, 16, 16, .16);
}
html[data-theme="light"] #payModal .pay-head { background: var(--surface-2); }
html[data-theme="light"] .pay-head-ico { color: var(--accent-ink); }
html[data-theme="light"] .pay-bal,
html[data-theme="light"] .cs-quick button,
html[data-theme="light"] .tm-tab,
html[data-theme="light"] .pm,
html[data-theme="light"] .pm-cur {
  background: rgba(26, 22, 20, .035);
  border-color: rgba(26, 22, 20, .1);
}
html[data-theme="light"] .cs-quick button:hover,
html[data-theme="light"] .tm-tab:hover,
html[data-theme="light"] .pm:hover,
html[data-theme="light"] #payModal .pay-head .close-modal-btn:hover {
  background: rgba(26, 22, 20, .06);
}
html[data-theme="light"] .cs-quick button.on,
html[data-theme="light"] .tm-tab.on {
  background: rgba(var(--accent-rgb), .12);
  border-color: rgba(var(--accent-rgb), .45);
  color: var(--accent-ink);
}
/* Белый текст активного чипса — только на тёмной подложке. */
html[data-theme="light"] .cs-quick button.is-max:hover,
html[data-theme="light"] .cs-quick button.is-max.on { color: var(--accent-ink); }
html[data-theme="light"] .tm-tab.on .ico { color: var(--accent-ink); }
html[data-theme="light"] .pm.on {
  background: rgba(var(--accent-rgb), .07);
  border-color: rgba(var(--accent-rgb), .45);
}
html[data-theme="light"] .cs-amt { background: var(--surface-2); border-color: rgba(26, 22, 20, .12); }
html[data-theme="light"] #topAmt::placeholder {
  color: rgba(106, 99, 92, .55) !important;
  -webkit-text-fill-color: rgba(106, 99, 92, .55) !important;
}
html[data-theme="light"] #topCheckMsg {
  background: rgba(37, 74, 168, .07); border-color: rgba(37, 74, 168, .2); color: #254aa8;
}
html[data-theme="light"] .cs-check { border-color: rgba(26, 22, 20, .14); }
html[data-theme="light"] .cs-check:hover { background: rgba(26, 22, 20, .04); border-color: rgba(26, 22, 20, .24); }
html[data-theme="light"] #payModal .fkpay-sum { background: rgba(26, 22, 20, .035); border-color: rgba(26, 22, 20, .1); }
html[data-theme="light"] .fkpay-sum-ico,
html[data-theme="light"] .cs-sel .pm-chip-ico,
html[data-theme="light"] .pm-ico { border-color: rgba(26, 22, 20, .08); }
html[data-theme="light"] #payModal .fkpay-qr { box-shadow: 0 6px 20px rgba(26, 22, 20, .18); }
html[data-theme="light"] #payModal .fkpay-row .btn-ghost { border-color: rgba(26, 22, 20, .14); }
html[data-theme="light"] #payModal .pay-scroll::-webkit-scrollbar-thumb { background: rgba(26, 22, 20, .16); }

/* На кремовой бумаге светлые оттенки (серебро LTC, лаванда ETH, голубой SBP)
   теряются — в светлой теме у каждого знака свой более глубокий вариант. */
html[data-theme="light"] [data-pm="sbp"] { --pm: #3f6fe0; --pm-bg: rgba(63, 111, 224, .13); }
html[data-theme="light"] [data-pm="card"] { --pm: #2f9e68; --pm-bg: rgba(47, 158, 104, .13); }
html[data-theme="light"] [data-pm="mir"] { --pm: #23927a; --pm-bg: rgba(35, 146, 122, .13); }
html[data-theme="light"] [data-pm="bank"] { --pm: #2f7fbe; --pm-bg: rgba(47, 127, 190, .13); }
html[data-theme="light"] [data-pm="purse"] { --pm: #8257e6; --pm-bg: rgba(130, 87, 230, .13); }
html[data-theme="light"] [data-pm="wallet"] { --pm: #c9822a; --pm-bg: rgba(201, 130, 42, .14); }
html[data-theme="light"] [data-pm="coins"] { --pm: #2f6fd0; --pm-bg: rgba(47, 111, 208, .13); }
html[data-theme="light"] [data-pm="visa"] { --pm: #3d5bd9; --pm-bg: rgba(61, 91, 217, .13); }
html[data-theme="light"] [data-pm="mastercard"] { --pm: #d9761a; --pm-bg: rgba(217, 118, 26, .14); }
html[data-theme="light"] [data-pm="btc"] { --pm: #cf7a06; --pm-bg: rgba(207, 122, 6, .14); }
html[data-theme="light"] [data-pm="ltc"] { --pm: #79818f; --pm-bg: rgba(121, 129, 143, .14); }
html[data-theme="light"] [data-pm="eth"] { --pm: #626cc4; --pm-bg: rgba(98, 108, 196, .13); }
html[data-theme="light"] [data-pm="usdt"] { --pm: #1f9c7c; --pm-bg: rgba(31, 156, 124, .13); }
html[data-theme="light"] [data-pm="ton"] { --pm: #0f8fc4; --pm-bg: rgba(15, 143, 196, .13); }
html[data-theme="light"] [data-pm="bnb"] { --pm: #c19000; --pm-bg: rgba(193, 144, 0, .15); }
html[data-theme="light"] [data-pm="trx"] { --pm: #dd3a3a; --pm-bg: rgba(221, 58, 58, .12); }

/* ---------- планшет и телефон ---------- */
@media (max-width: 860px) {
  #topStepForm.cashier {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "amount"
      "methods"
      "cta";
    gap: 14px;
  }
  .cs-amount, .cs-cta { padding-right: 0; }
  .cs-methods {
    padding-left: 0;
    border-left: 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .cs-badges { margin-top: 10px; padding-top: 10px; }
}
@media (max-width: 720px) {
  /* v53-phone.css делает любую модалку полноэкранной и скроллит саму
     карточку.  Кассе это не нужно: шапка должна оставаться на месте,
     поэтому скроллится только тело, а паддинги живут в секциях. */
  #payModal .pay-sheet {
    max-width: 100% !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  #payModal .pay-head { padding: 13px 14px 12px; }
  #payModal .pay-scroll {
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .pay-head-txt small { display: none; }
  .pay-bal small { display: none; }
  .pay-bal { padding: 6px 10px; }
  #topAmt { font-size: 26px; }
  .top-methods { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pm { padding: 8px 24px 8px 9px; }
  .pm-ico { width: 32px; height: 32px; flex: 0 0 32px; }
  #payModal .fkpay-qr { width: 168px; min-height: 168px; }
}
@media (max-width: 380px) {
  .top-methods { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #payModal .pm,
  #payModal .cs-quick button,
  #payModal .pm-check,
  #payModal .cs-seller summary .ico { transition: none; }
  #payModal .pm:hover,
  #payModal .cs-quick button:hover { transform: none; }
  .is-loading .ico { animation: none; }
}