/* ============================================================================
   Obsidian Gold — money (страница «Баланс и платежи», payments.html).
   Только переменные из tokens.css; собственных цветов не объявлять.
   (Прозрачные оттенки записаны через rgba() ровно теми значениями, что заданы
   в дизайн-хендоффе — как в tokens.css и shell.css. Hex-кодов в файле нет.)

   ВАЖНО: все селекторы файла заключены в `.cabinet-payments`, чтобы стили
   денежной страницы не протекали на другие поверхности (cabinet.css грузится
   раньше money.css, и глобальные правила отсюда перекрывали бы чужие экраны).

   Эталон: «Zapret VPN Кабинет.dc.html», экран billing (строки 352–386) плюс
   хелперы chip() / tile() / badge() (строки 556–563). Экран состоит ровно из
   двух секций: «Пополнение баланса» и «История операций». Ни героя, ни
   карточек-показателей, ни колонки-памятки на нём нет — макет их не содержит.

   Оглавление
   ---------------------------------------------------------------------------
   1  Каркас страницы       .cabinet-payments (+ локальные переменные)
   2  Оболочка секций       .payment-topup .payment-history
   3  Пополнение: заголовок .payment-topup__heading/__balance
   4  Пополнение: сумма     .payment-amount-row .amount-btn
                            .payment-amount-input .payment-topup__hint
   5  Пополнение: кассы     .payment-provider-grid .provider-card
                            (__row/__title/__dot/__note) .payment-provider-empty
   6  Пополнение: оплата    .payment-method-row .payment-submit
                            .payment-topup__note
   7  История операций      .payment-history__heading/__count .table-toolbar
                            .filter-chip .search-input-wrap .tab-panel
                            .pay-table .payment-history-empty
   8  Адаптив               900 / 640 / 420
   ============================================================================ */


/* ============================================================================
   1. Каркас страницы
   ============================================================================ */

.cabinet-payments {
  /* Золото «меток» из макета (GOLD_GRAD, строка 533): им красятся чипы, ромбы
     и активные пилюли. Оно двухстоповое — у кнопок градиент другой, трёхстоповый
     (--zp-grad-gold), поэтому метке нужна собственная переменная. */
  --zp-grad-gold-mark: linear-gradient(140deg, var(--zp-gold-light), var(--zp-amber));
  /* Три толщины волосяных линий макета: чип/поле, плитка, строка таблицы. */
  --zp-line-chip: rgba(246, 240, 228, 0.14);
  --zp-line-tile: rgba(246, 240, 228, 0.08);
  --zp-line-row: rgba(246, 240, 228, 0.07);

  display: flex;
  flex-direction: column;
  /* В макете у каждой секции margin-top:14px — здесь это gap контейнера */
  gap: 14px;
  min-width: 0;
}


/* ============================================================================
   2. Оболочка секций: обе секции экрана выглядят одинаково
   ============================================================================ */

/* margin:0 — расстояния задаёт gap контейнера.
   Тени в макете у этих секций нет: тень несёт только чек оплаты на другом экране. */
.cabinet-payments .payment-topup,
.cabinet-payments .payment-history {
  margin: 0;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--zp-r-card);
  background: var(--zp-grad-card);
  border: 1px solid var(--zp-hairline);
  box-shadow: none;
}


/* ============================================================================
   3. Пополнение баланса: заголовок и моно-подпись баланса
   ============================================================================ */

.cabinet-payments .payment-topup__heading,
.cabinet-payments .payment-history__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  min-width: 0;
}

.cabinet-payments .payment-topup__heading h2,
.cabinet-payments .payment-history__heading h2 {
  margin: 0;
  min-width: 0;
  font-family: var(--zp-font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

/* «сейчас N ₽» — единственный показ баланса на этом экране по макету */
.cabinet-payments .payment-topup__balance,
.cabinet-payments .payment-history__count {
  flex: 0 0 auto;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}


/* ============================================================================
   4. Пополнение баланса: сумма (чипы и своя сумма — одной строкой)
   ============================================================================ */

.cabinet-payments .payment-amount-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/* chip() из макета: однострочная моно-пилюля, без подъёма на hover */
.cabinet-payments .amount-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 10px 18px;
  border-radius: var(--zp-r-pill);
  border: 1px solid var(--zp-line-chip);
  background: rgba(255, 255, 255, 0.03);
  color: var(--zp-ink-2);
  font-family: var(--zp-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 200ms var(--zp-ease),
    border-color 200ms var(--zp-ease),
    background 200ms var(--zp-ease),
    box-shadow 200ms var(--zp-ease);
}

/* Подъёма у чипа в макете нет — только смена обводки, чтобы кнопка отзывалась */
.cabinet-payments .amount-btn:hover { border-color: rgba(255, 184, 0, 0.45); }

.cabinet-payments .amount-btn.selected,
.cabinet-payments .amount-btn[aria-pressed="true"] {
  color: var(--zp-on-gold);
  background: var(--zp-grad-gold-mark);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(255, 140, 0, 0.3);
}

/* Поле «своя сумма» стоит в той же строке и той же высоты, что чипы */
.cabinet-payments .payment-amount-input.form-input {
  flex: 1 1 150px;
  min-width: 0;
  min-height: 0;
  padding: 10px 16px;
  border-radius: var(--zp-r-pill);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--zp-line-chip);
  color: var(--zp-ink);
  font-family: var(--zp-font-mono);
  font-size: 12.5px;
  line-height: 1.35;
  transition: color 200ms var(--zp-ease),
    border-color 200ms var(--zp-ease),
    background 200ms var(--zp-ease),
    box-shadow 200ms var(--zp-ease);
}

/* Стрелки числового поля ломают пилюлю */
.cabinet-payments .payment-amount-input.form-input { -moz-appearance: textfield; appearance: textfield; }
.cabinet-payments .payment-amount-input.form-input::-webkit-outer-spin-button,
.cabinet-payments .payment-amount-input.form-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Золотым горит ровно один элемент строки: либо чип, либо своя сумма
   (класс is-custom ставит скрипт, когда значение не совпало ни с одним пресетом) */
.cabinet-payments .payment-amount-input.form-input.is-custom {
  background: rgba(255, 184, 0, 0.1);
  border-color: rgba(255, 184, 0, 0.6);
  color: var(--zp-gold-light);
}

.cabinet-payments .payment-amount-input.form-input:focus {
  outline: none;
  border-color: rgba(255, 184, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.14);
}

/* Слот подсказки: высота зарезервирована всегда, текст меняет скрипт */
.cabinet-payments .payment-topup__hint {
  margin: 8px 0 0;
  min-height: 1.2em;
  font-family: var(--zp-font-mono);
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--zp-ink-3);
  transition: color 200ms var(--zp-ease);
}

/* Красным — только когда сумма ниже минимума кассы */
.cabinet-payments .payment-topup__hint.is-error { color: var(--zp-err-ink); }


/* ============================================================================
   5. Пополнение баланса: плитки касс
   ============================================================================ */

.cabinet-payments .payment-provider-grid {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  /* auto-fit: список касс переменный — одна, две, восемь или ни одной.
     min(100%,…) не даёт колонке вылезти за экран телефона. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

/* tile() из макета: блок, а не строка — имя и ромб сверху, подпись под ними */
.cabinet-payments .provider-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--zp-r-tile-sm);
  border: 1px solid var(--zp-line-tile);
  background: rgba(255, 255, 255, 0.02);
  color: var(--zp-ink);
  text-align: left;
  transition: transform 220ms var(--zp-ease),
    border-color 220ms var(--zp-ease),
    box-shadow 220ms var(--zp-ease),
    background 220ms var(--zp-ease);
}

.cabinet-payments .provider-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 184, 0, 0.5);
}

.cabinet-payments .provider-card.selected,
.cabinet-payments .provider-card[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255, 184, 0, 0.12), rgba(255, 184, 0, 0.04));
  border-color: rgba(255, 184, 0, 0.55);
  box-shadow: 0 16px 40px rgba(255, 140, 0, 0.14);
}

.cabinet-payments .provider-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.cabinet-payments .provider-card__title {
  min-width: 0;
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Ромб-точка выбора: 7×7, повёрнут на 45°, в активном состоянии светится */
.cabinet-payments .provider-card__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  transform: rotate(45deg);
  background: rgba(246, 240, 228, 0.2);
  transition: background 200ms var(--zp-ease), box-shadow 200ms var(--zp-ease);
}

.cabinet-payments .provider-card.selected .provider-card__dot,
.cabinet-payments .provider-card[aria-pressed="true"] .provider-card__dot {
  background: var(--zp-grad-gold-mark);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.8);
}

/* Подпись под именем кассы. Текста может не быть — тогда её нет вовсе. */
.cabinet-payments .provider-card__note {
  margin-top: 10px;
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--zp-ink-3);
  overflow-wrap: anywhere;
}

/* Касс нет — карточка на всю ширину сетки */
.cabinet-payments .payment-provider-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(16px, 2.2vw, 22px);
  border-radius: var(--zp-r-tile-sm);
  border: 1px dashed var(--zp-line-chip);
  background: rgba(255, 255, 255, 0.015);
}

.cabinet-payments .payment-provider-empty > span {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--zp-r-btn-sm);
  background: var(--zp-warn-bg);
  color: var(--zp-warn);
}

.cabinet-payments .payment-provider-empty strong {
  display: block;
  font-family: var(--zp-font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--zp-ink);
}

.cabinet-payments .payment-provider-empty small {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zp-ink-2);
}


/* ============================================================================
   6. Пополнение баланса: способ внутри кассы и кнопка
   ============================================================================ */

/* Строки в макете нет: её показывает скрипт только у касс с несколькими
   способами. Оформлена как продолжение строки сумм — моно-пилюля. */
.cabinet-payments .payment-method-row { margin-top: 14px; }

.cabinet-payments .payment-method-row .form-label {
  margin-bottom: 8px;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.cabinet-payments .payment-method-row .form-select {
  max-width: 420px;
  min-height: 0;
  padding: 10px 40px 10px 16px;
  border-radius: var(--zp-r-pill);
  background-color: rgba(0, 0, 0, 0.4);
  border-color: var(--zp-line-chip);
  font-family: var(--zp-font-mono);
  font-size: 12.5px;
}

/* Кнопка макета — контурная золотая по содержимому, не залитая на всю ширину */
.cabinet-payments .payment-submit {
  margin-top: 20px;
  width: auto;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--zp-r-input);
  border: 1px solid rgba(255, 184, 0, 0.45);
  background: rgba(255, 184, 0, 0.06);
  color: var(--zp-gold);
  font-weight: 600;
  font-size: 15px;
  transition: transform 200ms var(--zp-ease),
    border-color 200ms var(--zp-ease),
    background 200ms var(--zp-ease),
    color 200ms var(--zp-ease);
}

.cabinet-payments .payment-submit:hover {
  background: rgba(255, 184, 0, 0.14);
  transform: translateY(-2px);
}

/* Кнопка гасится скриптом на время создания платежа — защита от двойной оплаты.
   Состояние обязано читаться: курсор запрещающий, подъёма нет. */
.cabinet-payments .payment-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Сноска под кнопкой — моно-строка того же размера, что у чека в макете */
.cabinet-payments .payment-topup__note {
  margin: 12px 0 0;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--zp-ink-3);
}


/* ============================================================================
   7. История операций
   ============================================================================ */

/* Панель управления историей: вкладки слева, поиск справа.
   В макете её нет, но две истории (сайт/бот) обязаны переключаться —
   оформлены теми же пилюлями chip(), что и суммы. */
.cabinet-payments .table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
}

.cabinet-payments .filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.cabinet-payments .filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 10px 18px;
  border-radius: var(--zp-r-pill);
  border: 1px solid var(--zp-line-chip);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--zp-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--zp-ink-2);
  transition: color 200ms var(--zp-ease),
    border-color 200ms var(--zp-ease),
    background 200ms var(--zp-ease),
    box-shadow 200ms var(--zp-ease);
}

.cabinet-payments .filter-chip:hover { border-color: rgba(255, 184, 0, 0.45); }

.cabinet-payments .filter-chip.active,
.cabinet-payments .filter-chip[aria-selected="true"] {
  color: var(--zp-on-gold);
  background: var(--zp-grad-gold-mark);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(255, 140, 0, 0.3);
}

.cabinet-payments .search-input-wrap {
  position: relative;
  flex: 1 1 200px;
  max-width: 320px;
  min-width: 0;
}

/* Скрипт переключает вкладки атрибутом hidden — он должен побеждать раскладку */
.cabinet-payments .search-input-wrap[hidden] { display: none; }

.cabinet-payments .search-input-wrap .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zp-ink-3);
  pointer-events: none;
}

/* Поиск той же высоты, что чипы */
.cabinet-payments .search-input-wrap .form-input {
  min-height: 0;
  padding: 10px 16px 10px 40px;
  border-radius: var(--zp-r-pill);
  background: rgba(0, 0, 0, 0.4);
  border-color: var(--zp-line-chip);
  font-family: var(--zp-font-mono);
  font-size: 12.5px;
  line-height: 1.35;
}

/* Две истории — сайта и бота — живут в разных вкладках и не смешиваются */
.cabinet-payments .tab-panel { display: none; }
.cabinet-payments .tab-panel.is-active { display: block; margin-top: 14px; }

/* Список операций в макете плоский: ни рамки-коробки, ни фона у шапки.
   Таблицу оставляем (в ней шесть колонок реальных данных), но снимаем коробку. */
.cabinet-payments .table-wrap {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.cabinet-payments .table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cabinet-payments .pay-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

/* Колонки разведены правым отступом: строка начинается вровень с краем секции */
.cabinet-payments .pay-table th {
  padding: 0 20px 10px 0;
  background: none;
  border-bottom: 1px solid var(--zp-line-row);
}

.cabinet-payments .pay-table td {
  padding: 13px 20px 13px 0;
  border-bottom: 1px solid var(--zp-line-row);
  font-family: var(--zp-font-mono);
  font-size: 13px;
  color: var(--zp-ink-2);
  vertical-align: middle;
}

.cabinet-payments .pay-table th:last-child,
.cabinet-payments .pay-table td:last-child { padding-right: 0; }

/* В макете нижняя линия есть у каждой строки, включая последнюю */
.cabinet-payments .pay-table tbody tr:last-child td { border-bottom: 1px solid var(--zp-line-row); }

.cabinet-payments .pay-table .mono { font-size: 13px; }
.cabinet-payments .pay-table .text-muted { color: var(--zp-ink-3); }
.cabinet-payments .pay-table .pay-cell-amount { color: var(--zp-ink); white-space: nowrap; }

/* Зачисление на баланс — зелёным, как плюсовые строки макета.
   Признак берётся из статуса платежа, а не из текста суммы. */
.cabinet-payments .pay-table .pay-cell-amount.is-plus { color: var(--zp-ok-ink); }

.cabinet-payments .pay-table .badge { padding: 4px 10px; }

/* Пустого состояния в макете нет — держим его в габаритах соседей */
.cabinet-payments .payment-history-empty {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--zp-r-tile-sm);
  border: 1px dashed var(--zp-line-chip);
  background: rgba(255, 255, 255, 0.015);
}

.cabinet-payments .payment-history-empty > span {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--zp-r-tile-sm);
  background: rgba(255, 184, 0, 0.1);
  color: var(--zp-gold);
}

.cabinet-payments .payment-history-empty strong {
  display: block;
  font-family: var(--zp-font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.cabinet-payments .payment-history-empty p {
  margin: 7px 0 0;
  max-width: 48ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--zp-ink-2);
}

.cabinet-payments .payment-history-empty__link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--zp-font-mono);
  font-size: 12.5px;
  color: var(--zp-gold);
  transition: color 200ms var(--zp-ease);
}

.cabinet-payments .payment-history-empty__link:hover { color: var(--zp-gold-light); }


/* ============================================================================
   8. Адаптив
   ============================================================================ */

@media (max-width: 900px) {
  .cabinet-payments .provider-card:hover { transform: none; }
}

@media (max-width: 640px) {
  .cabinet-payments .search-input-wrap { flex: 1 1 100%; max-width: none; }
  .cabinet-payments .filter-chips { width: 100%; }
  .cabinet-payments .filter-chip { flex: 1 1 auto; justify-content: center; }
  .cabinet-payments .payment-submit { width: 100%; justify-content: center; }

  /* Таблица истории превращается в карточки: горизонтальный скролл на телефоне
     хуже читается, а data-label есть у каждой ячейки. */
  .cabinet-payments .pay-table { min-width: 0; display: block; }

  .cabinet-payments .pay-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cabinet-payments .pay-table tbody,
  .cabinet-payments .pay-table tr,
  .cabinet-payments .pay-table td { display: block; width: 100%; }

  .cabinet-payments .pay-table tr {
    padding: 12px 14px;
    border: 1px solid var(--zp-line-tile);
    border-radius: var(--zp-r-tile-sm);
    background: rgba(255, 255, 255, 0.02);
  }

  .cabinet-payments .pay-table tr + tr { margin-top: 10px; }

  .cabinet-payments .pay-table td,
  .cabinet-payments .pay-table tbody tr:last-child td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    border: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .cabinet-payments .pay-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-family: var(--zp-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zp-ink-3);
    text-align: left;
  }
}

@media (max-width: 420px) {
  .cabinet-payments .payment-amount-input.form-input { flex: 1 1 100%; }
  .cabinet-payments .payment-topup__balance,
  .cabinet-payments .payment-history__count { flex: 1 1 100%; }
}