/* Прилипшая полоска покупки на ТЕЛЕФОНЕ — вид, общий для магазина и сайта.
   Сайт подключает этот же файл как /tg/buy-bar.css (§0cc). Логика — buy-bar.js.

   Появляется, когда блок покупки уехал вверх за экран: карточка товара на телефоне
   длиной 3–5 экранов, и, пролистав издания со скриншотами, покупатель оставался без
   цены и кнопки. Вид — тот же, что у полоски на страницах кодов (.topup-cart-bar в
   магазине, .psub-cart-sum на сайте), чтобы низ экрана выглядел одинаково везде. */
.buybar {
  position: fixed;
  left: 50%;
  z-index: 900;
  bottom: max(8px, env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 600px);
  /* Сам ряд — только раскладка: оформление несут ДВЕ отдельные плашки внутри
     (сердечко и блок покупки), см. .buybar__fav и .buybar__panel. */
  display: flex;
  align-items: stretch;
  gap: 8px;
  /* Спрятана до нужного момента: уезжает вниз, а не исчезает рывком.
     animation:none — полоска не участвует в каскаде появления страницы (region-reveal
     в магазине, reveal.css на сайте): его transform сдвигал бы её вбок. */
  opacity: 0;
  pointer-events: none;
  animation: none;
  transform: translateX(-50%) translateY(140%);
  transition: transform .24s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .24s ease;
}
.buybar.is-on { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

/* Оформление — на плашках, а не на ряду. Обе выглядят одинаково (фон, рамка, тень),
   поэтому вид у низа экрана цельный, но сердечко читается как отдельное действие. */
.buybar__fav,
.buybar__panel {
  border: 1px solid rgba(93, 231, 255, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0)),
    rgba(13, 19, 36, 0.97);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45), 0 20px 54px rgba(0, 0, 0, 0.3);
}
.buybar__panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
}

/* Сердечко «в избранное» — своя капсула слева, зеркало кнопки на странице (buy-bar.js).
   Тон приглушённый: полоска нужна прежде всего для покупки, сердечко рядом — тихая
   возможность, а не второй призыв. Отмеченное — цветом, как на карточке сайта. */
.buybar__fav {
  flex: 0 0 auto;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93a2c4;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform .1s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.buybar__fav:active { transform: scale(0.92); }
.buybar__fav.is-fav { color: #ff5d7a; }

.buybar__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.buybar__text b { color: #ffffff; font-size: 16px; font-weight: 900; line-height: 1.15; }
/* Подпись длинная («Complete Edition · PS5») — в одну строку с многоточием, иначе
   полоска растёт в высоту и закрывает содержимое. */
.buybar__text span {
  color: #aebcda;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buybar .buybar__btn {
  width: auto;
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
  white-space: nowrap;
}

/* Магазин: полоска встаёт НАД нижним меню (его отступ снизу + высота 56 + зазор).
   Класс .app есть только в магазине — на сайте правило не действует. */
.app .buybar { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 56px + 10px); }

/* Компьютер: на сайте полоски нет — блок покупки и так на виду в правой колонке, а
   «панель, которая ездит за прокруткой», владелец отверг. В магазине интерфейс
   телефонный при любой ширине окна, поэтому там полоска остаётся. */
@media (min-width: 901px) {
  .buybar { display: none; }
  .app .buybar { display: flex; }
}

/* Узкий экран (320px — iPhone с «увеличенным» отображением): подпись и кнопка иначе
   не помещаются в одну строку. */
@media (max-width: 360px) {
  .buybar { gap: 6px; }
  .buybar__panel { padding: 8px 8px 8px 12px; gap: 8px; }
  .buybar__fav { width: 46px; font-size: 20px; }
  .buybar__text b { font-size: 15px; }
  .buybar .buybar__btn { padding: 0 12px; font-size: 14px; }
}