/* style.css — все стили SPA. Чистый CSS без фреймворков (без Bootstrap).
   Тема: тёплый оранжевый акцент, светлый фон, мягкие тени, скруглённые углы.

   Брейкпоинт адаптивности: 1366px.
   - До 1366px ВКЛЮЧИТЕЛЬНО — мобильный вид (нижняя навигация), это покрывает
     телефоны и планшеты, включая iPad Pro 12.9" в ОБЕИХ ориентациях
     (1024px и 1366px по ширине) — тут сознательно предпочитаем мобильный
     вид десктопному, даже несмотря на широкий экран планшета.
   - Начиная с 1367px — десктопный вид (верхняя горизонтальная навигация,
     контент по центру с ограниченной шириной): это уже реально десктопные
     мониторы/ноутбуки, а не планшет. */

/* ---------- Базовые переменные темы ---------- */
:root {
  --color-accent: #f5a623;
  --color-accent-dark: #d98c0f;
  --color-accent-light: #fdf1dc;
  --color-bg: #faf9f7;
  --color-surface: #ffffff;
  --color-text: #2b2b2b;
  --color-text-muted: #8a8a8a;
  --color-border: #ececec;
  --color-danger: #e0503c;
  --color-success: #3fa96a;

  --shadow-soft: 0 2px 10px rgba(30, 20, 0, 0.06), 0 1px 2px rgba(30, 20, 0, 0.04);
  --shadow-lift: 0 8px 24px rgba(30, 20, 0, 0.10);

  /* Четвёртый цвет статуса ("Partial") — остальные три уже есть выше
     (accent — жёлтый/оранжевый, success — зелёный, danger — красный). */
  --color-partial: #7c3aed;
  --color-partial-light: #f2e9fb;

  /* Голубой — для информационных плашек (см. .migration-banner), которые
     не должны выглядеть как ошибка (--color-danger, красный) или как
     подтверждение успеха (--color-success, зелёный) — нейтральное "к сведению". */
  --color-info: #2f6fd1;
  --color-info-light: #eaf3fe;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --bottom-nav-height: 64px;
  /* Было 60px — увеличено вместе с логотипом брендов (.logo-image ниже
     вырос с 24px до 48px — правило общее, применяется и к rublevkalike.ru/.com,
     и к 1millionlikes.me, оба сейчас показывают реальный файл логотипа,
     не текст-заглушку), чтобы вокруг него осталась комфортная вертикальная
     "воздушная" зона (72 - 48 = 24px, по 12px сверху и снизу), а не
     логотип впритык к краям шапки. Раньше это значение было
     ОПАСНО менять — .auth-screen считала свою высоту как
     calc(100vh - var(--topbar-height)), и любое расхождение (например,
     из-за баннера о переходе, вставшего между шапкой и .auth-screen)
     срывало вёрстку экрана логина. Это уже исправлено: .auth-screen
     теперь просто flex: 1 внутри .public-shell (см. .public-shell ниже)
     и сама подстраивается под ЛЮБУЮ фактическую высоту шапки — менять
     --topbar-height теперь безопасно. */
  --topbar-height: 72px;
}

/* ---------- Сброс и база ---------- */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

#app {
  min-height: 100vh;
}

/* ================================================================
   ЭКРАН ЛОГИНА / РЕГИСТРАЦИИ
   ================================================================ */

/* .public-shell — обёртка неавторизованных экранов (логин, восстановление
   пароля): шапка + баннер о переходе на платформу (необязательный) +
   .auth-screen, тем же flex-column приёмом, что и .app-shell для
   залогиненного интерфейса ниже. Раньше вместо этого .auth-screen сама
   считала себе высоту как "100vh минус высота шапки" (min-height:
   calc(100vh - var(--topbar-height))) — расчёт держался на предположении,
   что перед .auth-screen ВСЕГДА стоит только .topbar. Когда баннер о
   переходе на платформу переехал сюда же, между шапкой и .auth-screen
   (см. app.js), это предположение сломалось: реальная высота содержимого
   стала topbar + баннер + calc(100vh - topbar) — то есть БОЛЬШЕ 100vh
   ровно на высоту баннера, откуда лишняя прокрутка и "сдвинутый" вниз
   фон-градиент .auth-screen (это и читалось как несовпадающий/светлее
   фон вокруг баннера). flex: 1 ниже сам разбирается, сколько места
   реально осталось — независимо от того, показан баннер или нет и
   какой он высоты (зависит от языка/переноса строк). */
.public-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.auth-screen {
  flex: 1;
  /* Без min-height: 0 flex-элемент по умолчанию не может сжаться меньше
     содержимого (min-height: auto) — с центрированной карточкой это не
     страшно на практике, но обнуляем явно, чтобы flex считал доступное
     место корректно в любом случае. */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Было "circle at 15% 15%" — центр глубоко в верхнем левом углу
     ПОЛНОШИРИННОГО (проверено: .auth-screen растянут ровно на 100% ширины
     экрана, никакого сужения/сдвига контейнера нет) блока. На узких
     экранах разница малозаметна, но на широких десктопных мониторах
     (2000px+) такая точка приходится всего в 300-400px от левого края —
     то есть заметно ЛЕВЕЕ центрированной карточки входа, а вся правая
     часть экрана (где на самом деле light card) остаётся почти чистым
     --color-bg (#faf9f7 — этот цвет ПОЧТИ белый, поэтому и читается как
     "фон отсутствует"). Симметрии тут никогда не было — она и не могла
     появиться при фиксированной точке привязки в процентах от одного угла:
     чем шире экран, тем сильнее видимый перекос в сторону этого угла.
     center вместо 15% 15% — гарантирует одинаковое расстояние до обеих
     боковых границ НЕЗАВИСИМО от ширины экрана (симметрия по построению,
     а не только "на глаз" при какой-то конкретной ширине), и совпадает
     с точкой, где и так центрируется сама карточка входа (justify-content:
     center выше) — тёплое пятно оказывается точно за карточкой. */
  background:
    radial-gradient(circle at center, var(--color-accent-light), transparent 45%),
    var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 32px 28px;
}

/* Собственного логотипа внутри .auth-card больше нет — он теперь виден
   в постоянной шапке (.topbar) над этим экраном, см. .auth-screen выше
   и renderPublicTopbarHtml() в app.js; дублировать его внутри карточки
   было бы избыточно (два логотипа подряд). */
.auth-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

.auth-tabs {
  display: flex;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-tab.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.field input,
.field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 15px;
  color: var(--color-text);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.field input[readonly] {
  color: var(--color-text-muted);
  cursor: default;
}

.field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.btn-primary {
  width: 100%;
  padding: 13px 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn-primary:hover {
  background: var(--color-accent-dark);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-error {
  background: #fdecea;
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.auth-error.visible {
  display: block;
}

.auth-success {
  background: #e9f8ee;
  color: var(--color-success);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.auth-success.visible {
  display: block;
}

.auth-forgot-link {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}

.auth-forgot-link a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.auth-forgot-link a:hover {
  color: var(--color-accent-dark);
}

/* ================================================================
   ЗАЛОГИНЕННЫЙ ИНТЕРФЕЙС: шапка + контент + нижняя навигация
   ================================================================ */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Шапка ---- */
.topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* Кликабелен (ведёт на главную, см. navigate('/') в app.js) — курсор
     явно намекает на это, иначе выглядел бы как обычный статичный текст. */
  cursor: pointer;
}

.logo span {
  color: var(--color-accent);
}

/* Логотип-картинка (когда для домена задан logoUrl в getSiteLocale()) —
   заменяет текстовый .logo, но должен вписываться в ту же строку шапки
   по высоте. Было 24px, увеличено вдвое до 48px (см. --topbar-height
   выше — шапка подросла вместе с логотипом). width не задаём — img без
   явной ширины сохраняет исходные пропорции файла сама, растягивать
   через width: auto тут не нужно, это и есть поведение по умолчанию. */
.logo-image {
  height: 48px;
  display: block;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.balance-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  /* Кликабельна (ведёт на /balance, см. navigate('/balance') в app.js). */
  cursor: pointer;
}

.balance-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-logout {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-logout:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ---- Бургер-меню (кнопка + выпадающий список в шапке) ---- */
.burger-menu {
  position: relative;
}

.btn-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 999px;
  cursor: pointer;
}

.btn-burger svg {
  width: 18px;
  height: 18px;
}

.btn-burger:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.burger-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 6px;
  flex-direction: column;
  /* Выше топбара/контента (topbar сам не задаёт z-index больше 10) —
     выпадающее меню не должно оказаться под чем-то на странице. */
  z-index: 20;
}

/* БАГ, который тут был: "display: flex;" стоял прямо в .burger-dropdown
   безусловно — он побеждал встроенный браузерный [hidden] { display: none }
   (та же специфичность 0,1,0, но правило автора идёт позже в каскаде),
   поэтому меню визуально было развёрнуто ВСЕГДА, что бы ни делал JS с
   атрибутом hidden. Правильно — включать flex ТОЛЬКО когда hidden снят:
   тогда при hidden браузер сам скрывает элемент через display:none,
   а без hidden срабатывает именно этот display:flex. */
.burger-dropdown:not([hidden]) {
  display: flex;
}

.burger-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.burger-item:hover {
  background: var(--color-bg);
}

/* ---- Десктопное горизонтальное меню (замена бургера на широких экранах) ----
   Тот же список пунктов (см. getMenuItemsHtml() в app.js), просто как
   обычные текстовые ссылки в ряд вместо выпадашки — скрыто по умолчанию,
   включается в медиа-запросе для десктопа ниже (там же прячется бургер). */
.topbar-nav {
  display: none;
  align-items: center;
  gap: 20px;
}

.topbar-nav-item {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.topbar-nav-item:hover,
.topbar-nav-item.active {
  color: var(--color-accent-dark);
}

/* ---- Контентная область ---- */
.app-content {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* Нижний паддинг контента должен ровно совпадать с полной высотой
     .app-nav (bottom-nav-height + 20px базового запаса + safe-area),
     иначе последние строки контента прячутся под панелью либо остаётся
     лишний пустой хвост. Числа должны быть теми же, что и в .app-nav ниже. */
  padding: 20px 16px calc(var(--bottom-nav-height) + 20px + env(safe-area-inset-bottom) + 24px);
}

/* ---- Навигация: по умолчанию (мобильный вид) — фиксированная снизу ---- */
.app-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* ИСПРАВЛЕНИЕ (проблема 4): раньше здесь был min-height + меньший
     safe-area-паддинг (12px) — этого на практике не хватило на iPad:
     показания браузера по safe-area-inset-bottom там занижены/нулевые
     в части сценариев (домашний индикатор, полноэкранный Safari), из-за
     чего нижние пункты меню всё равно частично перекрывались системной
     зоной. Теперь высота панели задаётся ЯВНО и детерминированно:
     фиксированная высота "иконки+подписи" (--bottom-nav-height) плюс
     ЩЕДРЫЙ базовый отступ 20px (было 12px) поверх системной зоны, плюс
     сама safe-area (когда браузер её всё же сообщает). height (а не
     min-height) + padding-bottom с той же safe-area-частью гарантируют,
     что кликабельные .nav-item (внутри содержимого коробки, без учёта
     padding) всегда остаются строго НАД нижним краем экрана минимум на
     20px, независимо от того, вернул браузер safe-area-inset-bottom
     корректно или нет. */
  height: calc(var(--bottom-nav-height) + 20px + env(safe-area-inset-bottom));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  background: var(--color-surface);
  box-shadow: 0 -2px 10px rgba(30, 20, 0, 0.06);
  display: flex;
  z-index: 10;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.nav-item svg {
  width: 22px;
  height: 22px;
}

.nav-item.active {
  color: var(--color-accent);
}

/* ---- Карточки-заглушки для view'ов ---- */
.page-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 32px 24px;
  text-align: center;
}

.page-card .page-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: var(--color-accent);
}

.page-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.page-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.balance-hero {
  background: linear-gradient(135deg, var(--color-accent) 0%, #f7b94e 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-lift);
}

.balance-hero .label {
  font-size: 13px;
  opacity: 0.85;
  font-weight: 600;
}

.balance-hero .value {
  font-size: 34px;
  font-weight: 800;
  margin-top: 4px;
}

/* ================================================================
   ФОРМА СОЗДАНИЯ ЗАКАЗА (вкладка "Заказать")
   ================================================================ */

.order-form-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px 20px;
}

.order-description,
.method-description {
  background: var(--color-accent-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.order-description strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent-dark);
  margin-bottom: 4px;
}

.order-description p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

.method-description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

/* Глобально ссылки наследуют цвет текста и без подчёркивания (см. базовый
   `a` в начале файла) — внутри блока с описанием способа оплаты это сделало
   бы кликабельную ссылку неотличимой от обычного текста, поэтому здесь
   явно возвращаем акцентный цвет и подчёркивание. */
.order-description a,
.method-description a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* ================================================================
   СПОСОБЫ ПОПОЛНЕНИЯ (вкладка "Баланс")
   ================================================================ */

.balance-methods-card h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

/* .payment-method-row оборачивает .payment-method-item ВМЕСТЕ с идущим
   сразу за ним .payment-method-form-slot (см. balance.js) — форма/
   инструкция выбранного способа теперь рисуется СРАЗУ под своей
   карточкой, а не одним общим блоком под всем списком (см. позиционирование
   в задаче). Разделитель между способами поэтому висит на .payment-method-row
   целиком, а не на .payment-method-item — иначе с появившимся между двумя
   карточками слотом-соседом сработал бы смежный селектор "+" и разделитель
   пропал бы после выбора любого способа, кроме последнего. */
.payment-method-row + .payment-method-row {
  border-top: 1px solid var(--color-border);
}

.payment-method-item {
  padding: 14px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

/* Слот появляется в потоке СРАЗУ под своей карточкой — просто пустой div,
   пока способ не выбран (см. :not(:empty) ниже); отступ снизу и тот же
   горизонтальный bleed, что у .payment-method-item, добавляем только
   когда там реально что-то показано, чтобы не плодить пустые зазоры
   между невыбранными карточками. */
.payment-method-form-slot:not(:empty) {
  margin: 0 -10px 14px;
}

.payment-method-item.selected {
  background: var(--color-accent-light);
}

.payment-method-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}

/* ---- История платежей: карточки, отступ между ними такой же, как у
   заказов (order-card сам по себе уже даёт margin-bottom) ---- */
.balance-history h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

.order-banner {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  display: none;
}

.order-banner.visible {
  display: block;
}

.order-banner-success {
  background: #e9f8ee;
  color: var(--color-success);
}

.order-banner-error {
  background: #fdecea;
  color: var(--color-danger);
}

/* ---- Баннер о переходе на новую платформу ----
   Общий для всего приложения (рисуется в app.js под шапкой — см.
   renderMigrationBannerHtml()), поэтому виден на ЛЮБОМ экране, включая
   логин, а не только внутри одной вкладки. Заметная, но НЕ блокирующая
   инфо-плашка: обычный блок в потоке страницы (не модалка, не
   position:fixed поверх контента) — пользователь может продолжать
   пользоваться сайтом, просто прокрутив мимо неё. Голубой фон
   (--color-info-light), а не красный/жёлтый-тревожный — это не ошибка.
   margin (а не padding у родителя) — банер лежит НЕПОСРЕДСТВЕННО в
   #app, у которого своего отступа нет (в отличие от .app-content/
   .auth-screen), поэтому отступ от краёв экрана задаём тут же. */
.migration-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-info-light);
  /* Тонкая рамка — --color-info-light (#eaf3fe) сам по себе очень светлый
     и близок по яркости к --color-bg (#faf9f7) страницы, из-за чего без
     явной границы баннер визуально не читался как отдельный блок, а
     смешивался с фоном ("будто фон сдвинулся/стал светлее" — ровно так
     это и описали). Рамка даёт чёткую границу независимо от того,
     насколько близки оттенки фона баннера и страницы. */
  border: 1px solid rgba(47, 111, 209, 0.25);
  color: var(--color-info);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.migration-banner p {
  margin: 0;
}

/* ИСПРАВЛЕНИЕ (проблема 2): раньше кнопка была прозрачной и стояла сразу
   после текста в той же строке — визуально читалась как продолжение
   фразы, а не как кнопка. Теперь: (1) своя строка снизу (flex-direction:
   column у родителя + align-self: flex-end — кнопка справа, отдельно от
   текста), (2) непрозрачный белый фон с рамкой в цвет баннера — чёткий
   контраст с голубым фоном самого баннера, (3) увеличенный padding
   (8px 18px вместо 4px 10px) и жирный шрифт — читается как настоящая
   кнопка, а не как ссылка или часть текста. */
.migration-banner-close {
  align-self: flex-end;
  border: 1.5px solid var(--color-info);
  background: var(--color-surface);
  color: var(--color-info);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.migration-banner-close:hover {
  background: var(--color-info);
  color: #fff;
}

/* ================================================================
   СПИСОК ЗАКАЗОВ (вкладка "Заказы")
   ================================================================ */

.orders-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.status-filter-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Активный фильтр — тёмный фон, как в референсе (не акцентный оранжевый:
   тут это выбор одного варианта из списка, а не призыв к действию). */
.status-filter-btn.active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}

.orders-search-field {
  margin-bottom: 16px;
}

.order-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 6px 18px;
  margin-bottom: 14px;
}

.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.order-row:last-child {
  border-bottom: none;
}

.order-label {
  flex: none;
  font-size: 13px;
  color: var(--color-text-muted);
}

.order-value {
  font-weight: 700;
  font-size: 14px;
  text-align: right;
  /* Ссылки заказа могут быть длинными и без пробелов — не должны вылезать
     за карточку на узких мобильных экранах. */
  word-break: break-all;
}

.order-value-refund {
  color: var(--color-success);
}

/* Дочерние заказы bundle — визуально "вложены" под родителя: отступ +
   цветной бордер слева, более лёгкая тень, чтобы карточка читалась как
   часть родительской покупки, а не как самостоятельный заказ. */
.order-children {
  margin-left: 20px;
}

.order-card-child {
  padding-left: 14px;
  border-left: 3px solid var(--color-accent);
  box-shadow: none;
  background: var(--color-bg);
}

/* Едва заметный оттенок фона всей карточки по статусу — см. normalizeOrderStatus
   в orders.js. Идёт ПОСЛЕ .order-card/.order-card-child в файле, чтобы
   переопределять их фон при той же специфичности селектора. */
.order-card-tint-completed {
  background: #e9f8ee;
}

.order-card-tint-canceled {
  background: #fdecea;
}

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill-green {
  background: #e9f8ee;
  color: var(--color-success);
}

.status-pill-yellow {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.status-pill-purple {
  background: var(--color-partial-light);
  color: var(--color-partial);
}

.status-pill-red {
  background: #fdecea;
  color: var(--color-danger);
}

/* ================================================================
   ПЛАВАЮЩИЕ КНОПКИ СВЯЗИ (Telegram/WhatsApp) — видны всегда, на любом
   экране (логин, восстановление пароля, основное приложение), поверх
   всего остального. Живут вне #app в index.html, JS их не трогает.
   ================================================================ */
.contact-buttons {
  position: fixed;
  right: 16px;
  /* На мобильном/планшете (до 1366px включительно) нижняя навигация
     фиксирована внизу экрана — поднимаем кнопки выше неё, с запасом,
     чтобы не перекрывать её пункты. На десктопе (см. медиа-запрос ниже)
     такой навигации уже нет, там достаточно обычного отступа от края. */
  bottom: calc(var(--bottom-nav-height) + 16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Выше шапки/навигации (у них z-index: 10) — это простые ссылки, а не
     модальное окно, поэтому конфликтовать с интерактивными элементами
     страницы (полями форм, кнопками) им не с чего. */
  z-index: 50;
}

.contact-button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-lift);
  transition: transform 0.15s ease;
}

.contact-button:hover {
  transform: scale(1.06);
}

.contact-button svg {
  width: 26px;
  height: 26px;
}

.contact-button-telegram {
  background: #0088cc;
}

.contact-button-whatsapp {
  background: #25d366;
}

/* ================================================================
   ДЕСКТОП: шире 1366px — верхняя горизонтальная навигация,
   контент по центру с ограниченной максимальной шириной.
   ВАЖНО: min-width: 1367px, поэтому 1024px и 1366px (iPad Pro
   в обеих ориентациях) остаются в мобильном виде, как и требуется.
   ================================================================ */
@media (min-width: 1367px) {
  /* Без фиксированной нижней панели контенту больше не нужен запас снизу. */
  .app-content {
    padding: 32px 24px 40px;
  }

  /* На десктопе баннер выравниваем по той же сетке, что и .app-content
     (max-width 1100px по центру), а не тянем во всю ширину экрана. */
  .migration-banner {
    max-width: 1100px;
    margin: 24px auto 0;
  }

  /* Нижней фиксированной навигации на десктопе уже нет (см. .app-nav
     ниже) — кнопкам связи незачем подниматься так высоко над краем. */
  .contact-buttons {
    bottom: 24px;
  }

  /* ИСПРАВЛЕНИЕ (проблема 3): раньше на десктопе .app-nav просто менял
     раскладку (с "прижат снизу" на "горизонтальный ряд под шапкой") и
     оставался единственной навигацией. Теперь у нас есть отдельное
     десктопное меню в шапке — .topbar-nav (текстовые пункты, включая
     "Поддержка", которой в .app-nav никогда не было — это не роут).
     Держать оба сразу избыточно и сбивает с толку, поэтому на десктопе
     .app-nav скрывается целиком, а .topbar-nav занимает его место. */
  .app-nav {
    display: none;
  }

  /* Бургер — мобильный/планшетный элемент управления, на десктопе все
     4 пункта и так видны текстом в шапке, кнопка-гамбургер не нужна. */
  .burger-menu {
    display: none;
  }

  /* А вот и сам десктопный текстовый ряд — по умолчанию (см. правило
     .topbar-nav вне медиа-запроса) display: none, здесь включаем. */
  .topbar-nav {
    display: flex;
  }

  .nav-item {
    flex: none;
    flex-direction: row;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
  }

  .nav-item svg {
    width: 18px;
    height: 18px;
  }

  .nav-item.active {
    background: var(--color-accent);
    color: #fff;
  }
}