/* Экран 2 — курсы города / онлайн. Уникальное; переиспользуемое (.option-card /
   .section-label) — в components.css. */

/* Header: back-кнопка слева + заголовок города */
.page-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
}
.back-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  text-decoration: none;
  border-radius: var(--r-input);
  margin-left: calc(-1 * .5rem); /* визуально на 0, чтобы хитбокс был больше */
}
.back-btn:active { background: rgba(0, 0, 0, .06); }
.page-header-info { flex: 1; min-width: 0; }
.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.3px;
  /* Защита от длинных названий городов на узких экранах (320–360px):
     обрезаем многоточием, чтобы не наезжать на back-btn / page-header-balance. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-subtitle {
  font-size: .8125rem;
  color: #666;
  margin-top: 2px;
}

/* Бонусный баланс юзера в шапке (правая зона). Двухстрочно: «Бонусный»
   тихим лейблом сверху + сумма ниже. Заполняется JS после /api/user. */
.page-header-balance {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  padding-left: .5rem;
}
.page-header-balance__label {
  font-size: .6875rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .3px;
  text-align: right;
}
.page-header-balance__amount {
  font-size: .9375rem;
  font-weight: 700;
  color: #1a8c5a;
  margin-top: 1px;
}
.page-header-balance .nw { white-space: nowrap; }

/* Bonuses-карточка: переиспользует .option-card, дополнительных стилей не нужно. */

/* Channel-toggle для /online: 🏧 «Через банкомат» / 💳 «На счёт».
   Сегментный контрол: два равных таба в общей капсуле. Активный — brand-фон. */
.channel-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #f0f2f5;
  border-radius: 999px;
  margin: 0;   /* отступ сверху даёт .section-label, снизу — следующий .section-label */
}
.channel-toggle__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .5rem .75rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.channel-toggle__tab.is-active {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.channel-toggle__tab:not(.is-active):active { background: rgba(0, 0, 0, .04); }
.channel-toggle__emoji { font-size: .95rem; line-height: 1; }
.channel-toggle__label { line-height: 1; }

/* Rate-cards — главный блок */
.rates-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 1.25rem;
}
.rate-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: 1rem var(--gutter);
  min-height: 64px;
  cursor: pointer;
  font: inherit;
  color: #1a1a1a;
  text-align: left;
  width: 100%;
  transition: transform .12s ease, border-color .12s ease;
}
.rate-card:active {
  transform: scale(.99);
  border-color: var(--brand);
}
/* Контент кнопки выравнен по левому краю (паттерн .option-card),
   шеврон `›` справа через flex-grow ниже. */
.rate-card__content {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.rate-card__cur {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .9375rem;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}
/* Эмодзи валюты — визуальный левый якорь, паритет по размеру с SVG-иконками
   в .option-card («Бонусы и события») и .how-step. */
.rate-card__emoji { font-size: 1.375rem; line-height: 1; }
.rate-card__sep {
  color: #999;
  font-size: 1.125rem;
  line-height: 1;
}
.rate-card__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -.3px;
  white-space: nowrap;
}
.rate-card__range-sep {
  display: inline-block;
  margin: 0 .15em;
  color: #aaa;
  font-weight: 400;
}

/* Empty state — когда у города нет активных пар (например, только online) */
.empty-state {
  background: #fff;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-card);
  padding: 1.25rem var(--gutter);
  text-align: center;
  color: #999;
  font-size: .875rem;
  margin-bottom: 1.25rem;
}

/* Как проходит обмен — единый контейнер, шаги-строки с тонкими разделителями.
   Не «4 кликабельных карточки», а спокойная инструкция (как iOS settings group). */
.how-steps {
  list-style: none;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  margin: 0 0 .5rem;
  padding: 0;
  overflow: hidden;
}
.how-step {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem var(--gutter);
  font-size: .875rem;
  color: #1a1a1a;
  line-height: 1.4;
}
.how-step + .how-step {
  border-top: 1px solid #f0f0f0;
}
.how-icon {
  flex-shrink: 0;
  color: #888;          /* нейтральный — не конкурируем с brand bonuses-card */
  display: block;
}
.how-text { flex: 1; min-width: 0; }

/* FAQ — master-аккордеон. Один внешний <details> прячет три внутренних. */
.faq-master {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  /* Последний блок экрана — без нижнего отступа: гэп до футера @AsianaExchange
     задают только .container (низ) + .footer (верх), как на первом экране
     (home: последний .cities-grid тоже без margin-bottom). */
  margin-bottom: 0;
  overflow: hidden;
}
.faq-master__q {
  list-style: none;
  cursor: pointer;
  padding: .875rem var(--gutter);
  font-size: .875rem;
  font-weight: 500;
  color: #666;          /* тихий блок, не CTA */
  display: flex;
  align-items: center;
  gap: .75rem;
}
.faq-master__q::-webkit-details-marker { display: none; }
.faq-master__icon { flex-shrink: 0; color: #999; display: block; }
.faq-master__label { flex: 1; }
.faq-master__q::after {
  content: '›';
  color: #999;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform .15s ease;
}
.faq-master[open] .faq-master__q::after { transform: rotate(90deg); }
.faq-master__body {
  border-top: 1px solid #f0f0f0;
}

/* Внутренние вопросы внутри master-аккордеона */
.faq-item {
  border: 0;
  background: transparent;
}
.faq-item + .faq-item {
  border-top: 1px solid #f0f0f0;
}
.faq-q {
  list-style: none;
  cursor: pointer;
  padding: .75rem var(--gutter);
  font-size: .875rem;
  font-weight: 500;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  color: #999;
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 400;
}
.faq-item[open] .faq-q::after { content: '–'; }
.faq-a {
  padding: 0 var(--gutter) .75rem;
  font-size: .8125rem;
  color: #666;
  line-height: 1.5;
}

/* Базовые модалки (.modal-overlay/.modal-card/.modal-close/body.modal-open)
   вынесены в глобальный components.css — нужны и на главной (инбокс). */

/* ─────────────────────── Калькулятор ─────────────────────── */
.calc-modal__head {
  text-align: center;
  margin-bottom: 1.25rem;
}
.calc-modal__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 .25rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.calc-modal__arrow { color: #999; font-weight: 400; }
.calc-modal__rate {
  font-size: .8125rem;
  color: #666;
}

.calc-field {
  margin-bottom: .5rem;
}
.calc-field__label {
  display: block;
  font-size: .75rem;
  color: #888;
  margin-bottom: .375rem;
  padding-left: .25rem;
}
.calc-field__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-input);
  padding: .625rem .875rem;
  background: #fafafa;
  transition: border-color .12s ease, background .12s ease;
}
.calc-field__row:focus-within {
  border-color: var(--brand);
  background: #fff;
}
.calc-field__input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
  min-width: 0;
}
.calc-field__cur {
  flex-shrink: 0;
  font-size: .875rem;
  font-weight: 600;
  color: #666;
}

.calc-arrow-row {
  display: flex;
  justify-content: center;
  padding: .25rem 0;
  color: #999;
}

/* Блок «применённые бонусы» — заменяет «условия», когда есть бонусы. */
.calc-bonuses {
  margin: .75rem 0 0;
  padding: .75rem var(--gutter);
  background: rgba(0, 200, 100, .06);
  border: 1px solid rgba(0, 200, 100, .25);
  border-radius: var(--r-input);
}
.calc-bonuses__head {
  font-size: .75rem;
  font-weight: 700;
  color: #1a8c5a;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .5rem;
}
.calc-bonuses__list {
  list-style: none;
  margin: 0 0 .625rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.calc-bonus-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8125rem;
  color: #1a1a1a;
  line-height: 1.35;
}
.calc-bonus-item__icon {
  flex-shrink: 0;
  color: #1a8c5a;
  margin-top: 1px;
  line-height: 0;
}
.calc-bonus-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.calc-bonus-item__label { color: #1a1a1a; font-weight: 600; line-height: 1.25; }
.calc-bonus-item__sub { color: #888; font-size: .6875rem; line-height: 1.2; }
.calc-bonus-item__amount {
  font-weight: 700;
  color: #1a8c5a;
  white-space: nowrap;
}
/* Строка-вычет (доставка) — нейтральный серый, не зелёный как бонусы. */
.calc-bonus-item--fee .calc-bonus-item__icon { color: #888; }
.calc-bonus-item--fee .calc-bonus-item__amount { color: #444; }
.calc-bonuses__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(0, 200, 100, .25);
  font-size: .8125rem;
  color: #444;
}
.calc-bonuses__total-amount {
  font-size: 1rem;
  font-weight: 700;
  color: #0f5c3a;
}
.calc-bonuses__balance {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed rgba(0, 200, 100, .3);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .75rem;
  color: #666;
  line-height: 1.4;
}
.calc-bonuses__balance b { color: #1a1a1a; }
.calc-bonuses__balance .nw { white-space: nowrap; }

/* ─ Pending-скелетон «Считаем выгоду…» ─
 * Контейнер `.calc-bonuses` (зелёный фон) переиспользуется, но head и список
 * подменяются на нейтральные серые варианты — не хотим намекать на наличие
 * бонусов до того как сервер их подтвердит. Точка-пульсар рядом с лейблом +
 * полоски-плейсхолдеры внутри — недвусмысленный сигнал «идёт расчёт».
 */
.calc-bonuses__head--pending {
  color: #6a6a6a;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.calc-pending-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #9a9a9a;
  display: inline-block;
  animation: calc-pending-pulse 1s ease-in-out infinite;
}
@keyframes calc-pending-pulse {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.calc-bonuses__list--skeleton { gap: .5rem; }
.calc-bonus-item--skeleton {
  align-items: center;
  gap: .5rem;
}
.calc-bonus-item__skeleton-bar,
.calc-bonus-item__skeleton-amount {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, .06) 0%,
    rgba(0, 0, 0, .12) 50%,
    rgba(0, 0, 0, .06) 100%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: calc-skeleton-shimmer 1.4s ease-in-out infinite;
}
.calc-bonus-item__skeleton-bar    { flex: 1; height: .875rem; }
.calc-bonus-item__skeleton-amount { width: 4.5rem; height: .875rem; }
@keyframes calc-skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Блок «условия» — мин. сумма, доставка, бонусы. Тихий, информативный. */
.calc-conditions {
  list-style: none;
  margin: .75rem 0 0;
  padding: .75rem var(--gutter);
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.calc-conditions li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8125rem;
  color: #666;
  line-height: 1.4;
}
.calc-conditions li b { color: #1a1a1a; font-weight: 600; }
.calc-cond__icon {
  flex-shrink: 0;
  color: #888;
  margin-top: 1px;
  line-height: 0;
}

/* Inline-подсказка под полем «Отдаёте». Минимум визуала: одна строка,
   без бэкграунда — это «совет рядом с инпутом», не отдельный блок. */
.calc-hint-inline {
  margin-top: .375rem;
  padding-left: .25rem;
  font-size: .75rem;
  line-height: 1.35;
  color: #1a8c5a;          /* зелёный — выгода */
  font-weight: 500;
}
.calc-hint-inline b { font-weight: 700; color: #0f5c3a; }
.calc-hint-inline .nw, .calc-hint-inline b { white-space: nowrap; }

.calc-hint__badge {
  display: inline-block;
  margin-left: .15rem;
  padding: 1px 6px;
  background: #1a8c5a;
  color: #fff;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .3px;
  vertical-align: 1px;
}

/* Вариант warning — когда сумма ниже min_order. */
.calc-hint-inline--warning {
  color: #a55400;
}
.calc-hint-inline--warning b { color: #6b3500; }
.calc-hint-inline--warning .calc-hint__badge { background: #a55400; }
.calc-error {
  margin-top: .5rem;
  padding: .625rem .75rem;
  background: rgba(220, 60, 60, .08);
  color: #b32d2d;
  border-radius: var(--r-input);
  font-size: .8125rem;
  line-height: 1.4;
}
.calc-modal__submit {
  margin-top: 1rem;
}

/* ─────────────────────── Inline-корзина (между rates и how-steps) ───────── */
.cart-inline {
  margin: 1rem 0;
  padding: 1rem var(--gutter);
  background: #fff;
  border: 1.5px solid var(--brand);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.cart-inline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.cart-inline__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.cart-inline__count {
  flex: 1;
  font-size: .75rem;
  color: #888;
}
.cart-inline__clear {
  background: transparent;
  border: 0;
  color: #999;
  padding: .25rem;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}
.cart-inline__clear:active { background: rgba(0, 0, 0, .06); color: #a55400; }
.cart-inline__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cart-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .75rem;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
}
.cart-item__main { flex: 1; min-width: 0; }
.cart-item__pair {
  font-size: .875rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.cart-item__amounts {
  font-size: .75rem;
  color: #666;
  line-height: 1.4;
}
.cart-item__amounts b { color: #1a1a1a; font-weight: 700; white-space: nowrap; }
.cart-item__rate { color: #999; }
.cart-item__remove {
  background: transparent;
  border: 0;
  color: #999;
  padding: .375rem;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}
.cart-item__remove:active { background: rgba(0, 0, 0, .06); }

.cart-inline__field { display: block; }
.cart-inline__label {
  display: block;
  font-size: .75rem;
  color: #888;
  margin-bottom: .375rem;
  padding-left: .25rem;
}
.cart-inline__input {
  width: 100%;
  padding: .75rem .875rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-input);
  background: #fafafa;
  font-size: .9375rem;
  color: #1a1a1a;
  outline: 0;
  transition: border-color .12s ease, background .12s ease;
}
.cart-inline__input:focus { border-color: var(--brand); background: #fff; }

/* Подсказка под полем «Контакт»: info (подставлен Telegram) / warning (нет
   username — нужно оставить контакт или написать первым). */
.cart-inline__contact-hint {
  margin-top: .375rem;
  padding: .5rem .625rem;
  border-radius: var(--r-input);
  font-size: .75rem;
  line-height: 1.35;
  color: #5a6a72;
  background: rgba(0, 0, 0, .03);
  border: 1px solid var(--border);
}
.cart-inline__contact-hint--warning {
  color: #6b3500;
  background: rgba(255, 170, 40, .12);
  border-color: rgba(165, 84, 0, .3);
  font-weight: 600;
}

/* Кнопки «Моя гео» / «Выбрать на карте» под полем «Место встречи». */
.cart-inline__place-actions {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}
.place-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .5rem .625rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  color: #444;
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
  min-height: 36px;
}
.place-btn:active { background: #fafafa; border-color: var(--brand); color: var(--brand); }
.place-btn svg { flex-shrink: 0; color: var(--brand); }

.cart-inline__place-status {
  margin-top: .375rem;
  padding-left: .25rem;
  font-size: .75rem;
  color: #1a8c5a;
  line-height: 1.4;
}
.cart-inline__place-status.is-error { color: #a55400; }

/* ─────────────────────── Map-picker модалка ─────────────────────── */
.map-modal {
  display: flex;
  flex-direction: column;
  padding: 1rem var(--gutter);
  gap: .75rem;
  max-width: 540px;
  width: 100%;
  height: 80vh;
  max-height: 720px;
}
.map-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0; /* close-btn справа собственный */
}
.map-modal__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.map-modal__hint {
  font-size: .75rem;
  color: #666;
  padding-left: .25rem;
}
.map-modal__map {
  flex: 1;
  min-height: 280px;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--border);
}
.map-modal .modal-close {
  position: static;     /* против absolute из .modal-close */
}
.map-modal__submit { margin-top: auto; }

.cart-inline__error {
  padding: .625rem .75rem;
  background: rgba(220, 60, 60, .08);
  color: #b32d2d;
  border-radius: var(--r-input);
  font-size: .8125rem;
  line-height: 1.4;
}

/* Блок «Применены бонусы» внутри cart-inline (мини-версия .calc-bonuses). */
.cart-bonuses {
  padding: .625rem .75rem;
  background: rgba(0, 200, 100, .06);
  border: 1px solid rgba(0, 200, 100, .25);
  border-radius: var(--r-input);
}
.cart-bonuses__head {
  font-size: .6875rem;
  font-weight: 700;
  color: #1a8c5a;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: .375rem;
}
.cart-bonuses__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.cart-bonus-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: #1a1a1a;
  line-height: 1.35;
}
.cart-bonus-item__icon { flex-shrink: 0; color: #1a8c5a; line-height: 0; margin-top: 1px; }
.cart-bonus-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cart-bonus-item__label { color: #1a1a1a; font-weight: 600; line-height: 1.25; }
.cart-bonus-item__sub { color: #888; font-size: .6875rem; line-height: 1.2; }
.cart-bonus-item__amount {
  font-weight: 700;
  color: #1a8c5a;
  white-space: nowrap;
}

/* Доставка — удержание (−). Нейтральный серый блок, не зелёный «бонусный». */
.cart-fees {
  padding: .625rem .75rem;
  background: rgba(0, 0, 0, .03);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
}
.cart-fees__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-fee-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: #1a1a1a;
  line-height: 1.35;
}
.cart-fee-item__icon { flex-shrink: 0; color: #888; line-height: 0; margin-top: 1px; }
.cart-fee-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cart-fee-item__label { color: #1a1a1a; font-weight: 600; line-height: 1.25; }
.cart-fee-item__sub { color: #888; font-size: .6875rem; line-height: 1.2; }
.cart-fee-item__amount {
  font-weight: 700;
  color: #444;
  white-space: nowrap;
}

.cart-inline__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  font-size: .875rem;
}
.cart-inline__total-label { color: #666; }
.cart-inline__total-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a8c5a;
}
.cart-inline__submit { margin-top: .25rem; }

/* ─────────────────────── Success-модалка ─────────────────────── */
/* Layout: фиксированный header (icon+title+sub) — body скроллится — sticky footer
   с actions. Перебиваем `.modal-card` overflow/padding, чтобы скролл был
   только в `__body`. Иначе на маленьких экранах кнопка «Понятно» обрезалась. */
.modal-card.success-modal {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.success-modal__head {
  padding: 1.25rem 1.25rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: center;
}
.success-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.success-modal__foot {
  padding: .75rem 1.25rem 1rem;
  border-top: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}
.success-modal__icon {
  margin: 0 auto;
  display: block;
  line-height: 0;
}
.success-modal__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  text-align: center;
}
.success-modal__sub {
  font-size: .875rem;
  color: #666;
  line-height: 1.45;
  margin: 0;
  text-align: center;
}

/* `.success-warning` — общий warning-callout, переехал в components.css
   (используется и в /orders для активных RUB-заявок). */

.success-orders {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.success-order {
  padding: .625rem .75rem;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
}
.success-order__pair {
  font-size: .875rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.success-order__no {
  font-size: .75rem;
  color: #888;
  font-weight: 500;
}
.success-order__amounts {
  font-size: .75rem;
  color: #666;
  line-height: 1.4;
}
.success-order__amounts b { color: #1a1a1a; font-weight: 700; white-space: nowrap; }
.success-order__rate { color: #999; }

/* Блок «Применены бонусы» в success-модалке. */
.success-bonuses {
  padding: .625rem .75rem;
  background: rgba(0, 200, 100, .06);
  border: 1px solid rgba(0, 200, 100, .25);
  border-radius: var(--r-input);
}
.success-bonuses__head {
  font-size: .6875rem;
  font-weight: 700;
  color: #1a8c5a;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: .375rem;
}
.success-bonuses__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.success-bonus-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: #1a1a1a;
  line-height: 1.35;
}
.success-bonus-item__icon { flex-shrink: 0; color: #1a8c5a; line-height: 0; margin-top: 1px; }
.success-bonus-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.success-bonus-item__label { color: #1a1a1a; font-weight: 600; line-height: 1.25; }
.success-bonus-item__sub { color: #888; font-size: .6875rem; line-height: 1.2; }
.success-bonus-item__amount {
  font-weight: 700;
  color: #1a8c5a;
  white-space: nowrap;
}

/* Доставка в success — нейтральная строка-удержание (как .cart-fees). */
.success-fees {
  padding: .625rem .75rem;
  background: rgba(0, 0, 0, .03);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
}
.success-fees__list { list-style: none; margin: 0; padding: 0; }
.success-fee-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: #1a1a1a;
  line-height: 1.35;
}
.success-fee-item__icon { flex-shrink: 0; color: #888; line-height: 0; margin-top: 1px; }
.success-fee-item__text { flex: 1; min-width: 0; }
.success-fee-item__label { color: #1a1a1a; font-weight: 600; }
.success-fee-item__amount { font-weight: 700; color: #444; white-space: nowrap; }

.success-rows {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.success-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  font-size: .8125rem;
  color: #666;
}
.success-row b {
  color: #1a1a1a;
  font-weight: 700;
  text-align: right;
}

.success-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.success-copy {
  border: 1px solid var(--border);
  background: #fff;
  color: #1a1a1a;
}
.success-copy:active { background: #fafafa; }

/* ─── Оператор-калькулятор (модер оформляет за клиента) ───
   Компактно под телефон: без доп-скролла. Только токены. */
.op-calc__head { text-align: center; margin-bottom: var(--space-3); }
.op-calc__title { font-size: 1.0625rem; font-weight: 600; color: var(--text); margin: 0; }
.op-calc__pairline { font-size: .8125rem; color: var(--muted); margin-top: .125rem; }
.op-calc__client { margin-bottom: var(--space-2); }
.op-calc__hint { font-size: .75rem; margin-top: .375rem; padding-left: .25rem; color: var(--muted); }
/* give/receive — вертикально, одно поле над другим (без большой стрелки-строки). */
.op-calc__pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.op-calc__cell { display: block; }
.op-calc__cell-lbl {
  display: block;
  font-size: .75rem;
  color: #888;
  margin-bottom: .375rem;
  padding-left: .25rem;
}
/* Ряд чипов: курс-вручную + баланс. Тап-таргеты, pill-форма. */
.op-calc__ctrls { display: flex; gap: var(--space-2); margin: var(--space-2) 0; }
.op-calc__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--muted);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: .5rem .75rem;
  background: #fafafa;
  cursor: pointer;
  min-height: 36px;
}
.op-calc__chip:active { background: #f0f0f0; }
.op-calc__chip--check input { margin: 0; width: 1rem; height: 1rem; }
.op-calc__override { margin-bottom: var(--space-2); }
/* Компактный результат: рамка-success, 3 строки. */
.op-calc__result {
  border: 1.5px solid var(--success-border);
  background: var(--success-soft);
  border-radius: var(--r-card);
  padding: var(--space-3);
  margin: var(--space-2) 0;
}
.op-calc__result-rate { font-size: .8125rem; color: var(--muted); }
.op-calc__result-bonus { font-size: .8125rem; color: var(--success-ink); margin-top: .25rem; }
.op-calc__result-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-2);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--success-ink);
}
/* Действия — две кнопки в ряд (без стопки на всю высоту). */
.op-calc__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.op-calc__actions .btn { margin: 0; }
.calc-error.op-calc__ok { color: var(--success-ink); }