/* Экран «Бар» — из макета «Клуб - Бар». Числа те же, без округлений.

   Отдельным файлом, а не разделом в screens.css: экраны переносятся
   параллельно, и общий файл был бы одной точкой столкновения на несколько рук.
   Классы с собственным префиксом `ba`, общее берётся из base.css (`cs-*`) и
   anim.css.

   СВОИХ КЕЙФРЕЙМОВ ЗДЕСЬ НЕТ, И ЭТО ПРОВЕРЕНО ЧИСЛАМИ. Макет просит `rowIn`
   .45s и `popIn` .3s на кривой (.22,.9,.28,1) — в anim.css лежат ровно они:
   rowIn это translateY(14px), popIn это translateY(12px) scale(.94), кривая
   вынесена в `--ease`. Выезд шторки — `csSheetUp` из shell.css: у нас лист
   появляется вместе с разметкой, и переключать `transform`, как в макете,
   нечего.

   ЦВЕТ. Литералы вина (rgba(232,83,107,…)) из макета здесь не стоят: клуб
   красится темой, и у «Льда» кромка выбранной плитки обязана быть голубой.
   Доли от акцента считает `color-mix` — тем же приёмом, каким в tokens.css
   считается `--accDeep`. */

/* ── шапка ────────────────────────────────────────────────────────────────
   Поля у этого экрана 18px, а не 20px общесайтовых, и трекинг заголовка на
   десятую плотнее (-.6px против -.5px у `.cs-h2`).

   Строки «кухня до 03:00» рядом с заголовком НЕТ: часов кухни у клуба не
   заведено — есть часы всего зала, а кухня закрывается раньше почти всегда
   (см. шапку src/screens/site/bar.js). */
.csHead.ba { padding-left: 18px; padding-right: 18px; }
.csHead.ba .cs-h2 { letter-spacing: -.6px; }

/* Сумка со значком. Сама кнопка — общая `.cs-round.sq` (36×36, радиус 12,
   белая десятина, значок 18px): числа макета совпали до единицы. */
.baBag { position: relative; }
.baBagN {
  position: absolute; right: -4px; top: -4px;
  display: flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--acc); color: var(--accInk);
  font-size: 10.5px;
  animation: popIn .3s var(--ease);
}

/* ── страница ─────────────────────────────────────────────────────────────
   Низ — макетные 140px, только отсчитанные не от края экрана, а от ПОДНЯТОЙ
   плашки заказа: в макете она стоит на месте нижней навигации (bottom:14px),
   а у нас там общий таббар (см. `.baCart`). Прибавка — ровно его высота с
   отступом, поэтому воздух между последней строкой и плашкой остался
   макетным. */
.baPage {
  padding: 74px 18px calc(140px + var(--nav-inset) + var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ── плитки разделов ────────────────────────────────────────────────────── */
.baCats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.baCat {
  position: relative;
  height: 104px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
  padding: 13px;
  text-align: left;
  background: linear-gradient(180deg, var(--tile), var(--tileHi));
  border: 1px solid var(--line);
}
.baCat.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, transparent), var(--tileHi));
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
}
/* Значок вылезает за угол и подрезается рамкой плитки — это фон, а не иконка. */
.baCatArt { position: absolute; right: -16px; bottom: -16px; opacity: .5; }
.baCatArt i { font-size: 66px; color: rgba(255, 255, 255, .12); }
.baCat.on .baCatArt i { color: color-mix(in srgb, var(--acc) 50%, transparent); }
.baCatName {
  position: relative;
  display: block;
  font-family: var(--f-head);
  font-size: 15px; font-weight: 800; letter-spacing: -.3px;
  color: #fff;
}
.baCatN { position: absolute; left: 13px; bottom: 12px; font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .6); }

/* ── подпись раздела и вход в историю ───────────────────────────────────── */
.baCap { display: flex; align-items: baseline; gap: 9px; margin-top: 20px; }
.baCapBtn { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--acc); }

/* ── строки меню ──────────────────────────────────────────────────────────
   Проявление включает класс `dev`, который вешает рендер ПОСЛЕ записи
   разметки, — и только на первом рендере за визит. В разметке его нет
   нарочно: список переписывается на каждое касание «+», и стой анимация в
   строке, всё меню съезжало бы заново от добавленной колы. */
.baList { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.baRow {
  display: flex; align-items: center; gap: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--tile), var(--tileHi));
  border: 1px solid var(--line);
  padding: 12px 13px;
}
.baRow.dev { animation: rowIn .45s var(--ease) both; }
/* Позиция уже в заказе: кромка окрашивается акцентом. */
.baRow.in { border-color: color-mix(in srgb, var(--acc) 45%, transparent); }

.baIco {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
}
.baIco i { font-size: 21px; color: var(--acc); }

.baText { flex: 1; min-width: 0; }
.baName { display: block; font-size: 13.5px; font-weight: 800; color: #fff; }
.baSub { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.baPrice { font-size: 13px; color: #fff; white-space: nowrap; }

.baAdd {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 11px;
  background: var(--acc); color: var(--accInk);
}
.baAdd i { font-size: 17px; }

/* «− N +». Один блок на меню и на шторку заказа — как у дизайнера. */
.baQty { display: flex; align-items: center; gap: 7px; flex: none; }
.baQtyBtn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1); color: #fff;
}
.baQtyBtn.go { background: var(--acc); color: var(--accInk); }
.baQtyBtn i { font-size: 15px; }
.baQtyV { font-size: 13px; color: #fff; }

/* ── плашка набранного заказа ─────────────────────────────────────────────
   В макете она стоит на месте нижней навигации (bottom:14px) — там экран один
   и общей навигации у него нет. У нас таббар общий и живёт именно там, поэтому
   плашка поднята РОВНО на его высоту с отступом: те же макетные 14px, только
   от таббара, а не от края экрана.

   Выезд снизу — переход, а не кейфрейм: состояние переключает класс `on`,
   который вешает рендер. В разметке его нет — иначе гнездо переписывало бы
   плашку на ровном месте и обрывало выезд на полпути. */
.baCart {
  position: fixed;
  left: 14px; right: 14px;
  bottom: calc(14px + var(--nav-inset) + var(--nav-h) + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
  transition: opacity .3s ease, transform .35s var(--ease);
}
.baCart.on { opacity: 1; transform: none; pointer-events: auto; }
.baCartBtn {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  border-radius: 20px;
  background: var(--acc);
  padding: 14px 16px;
  text-align: left;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .5);
}
.baCartIco {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 12px;
  background: rgba(0, 0, 0, .2); color: var(--accInk);
}
.baCartIco i { font-size: 19px; }
.baCartText { flex: 1; min-width: 0; }
.baCartName { display: block; font-size: 14px; font-weight: 800; color: var(--accInk); }
.baCartSub { display: block; margin-top: 2px; font-size: 11px; color: var(--accInk); opacity: .8; }
.baCartSum { font-size: 16px; color: var(--accInk); }

/* ── шторка ───────────────────────────────────────────────────────────────
   Одна на заказ и на историю: в макете это один лист на 80% высоты, меняется
   только начинка. Подложка темнее и размыта сильнее общесайтовой — так в
   макете: заказ это решение, и то, что за ним, должно уйти дальше. */
.baBack {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .3s ease both;
}
.baSheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80%;
  display: flex; flex-direction: column;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--line);
  animation: csSheetUp .4s var(--ease) both;
}
.baSheetHead { flex: none; padding: 14px 20px 12px; background: linear-gradient(180deg, var(--bg2), var(--bg)); }
.baSheetHead .fd-sheet-grip { margin: 0 auto 14px; }
.baSheetTitle { display: flex; align-items: baseline; gap: 9px; }
.baSheetSub { margin-left: auto; font-size: 11.5px; font-weight: 400; color: rgba(255, 255, 255, .55); }
.baSheetBody {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 20px 20px;
}

/* ── строка заказа ──────────────────────────────────────────────────────── */
.baCRow {
  display: flex; align-items: center; gap: 12px;
  border-radius: 16px;
  background: var(--tile);
  border: 1px solid var(--line);
  padding: 11px 13px;
}
.baCIco {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 13px;
  background: rgba(255, 255, 255, .07);
}
.baCIco i { font-size: 18px; color: var(--acc); }
.baCName { display: block; font-size: 13px; font-weight: 800; color: #fff; }
.baCSub { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 400; color: rgba(255, 255, 255, .55); }
/* Ширина суммы фиксирована: иначе столбец итогов пляшет от длины числа. */
.baCSum { width: 66px; flex: none; text-align: right; font-size: 13px; color: #fff; }

.baEmpty { text-align: center; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .5); padding: 24px 0; }

/* ── строка истории ─────────────────────────────────────────────────────── */
.baHRow {
  border-radius: 16px;
  background: var(--tile);
  border: 1px solid var(--line);
  padding: 12px 13px;
}
.baHTop { display: flex; align-items: center; gap: 10px; }
.baHSt {
  border-radius: 14px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 800;
  color: rgba(255, 255, 255, .62);
  border: 1px solid var(--line);
}
/* Зелёным помечается только «принесли»: остальные три исхода — не успех.
   Цвет состояния темой НЕ красится (tokens.css): «готово» зелёное в любом
   клубе, и перекрась его — оно перестанет значить что-либо, кроме «акцент». */
.baHSt.ok { color: var(--ok); border-color: rgba(99, 214, 159, .4); }
.baHDate { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .55); }
.baHSum { margin-left: auto; font-size: 13px; color: #fff; }
.baHWhat { margin-top: 8px; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.baHAgain {
  margin-top: 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line);
  color: #fff;
  padding: 7px 12px;
  font-size: 12px; font-weight: 800;
}

/* ── подвал шторки заказа ─────────────────────────────────────────────────
   Кнопка «Отправить на бар» — общая `.cs-btn.lg`: радиус 16, поле 15, 14.5px
   восьмисотым по акценту с чернилами по нему. Числа макета совпали целиком.

   Безопасная зона к нижнему полю прибавлена сверх макета: на телефоне с
   домашней полосой кнопка иначе уезжает под неё. */
.baFoot {
  flex: none;
  padding: 14px 20px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.baTotal { display: flex; align-items: baseline; gap: 9px; }
.baTotalK { font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, .7); }
.baTotalV { margin-left: auto; font-size: 19px; color: #fff; }
.baFoot .cs-btn { margin-top: 12px; }

/* Приподнять под курсором — только там, где курсор есть: на телефоне hover
   залипает после тапа. Сдвиг тот же, что у плиток бонусов. */
@media (hover: hover) {
  .baCat:hover { transform: translateY(-4px); }
}

/* ── широкий экран ────────────────────────────────────────────────────────
   Правило то же, что во всём сайте (styles/site/desktop.css): содержимое,
   плашка и шторка встают колонкой по центру, а не растягиваются на всю
   ширину. Живёт здесь, потому что вся остальная одежда экрана тоже здесь. */
@media (min-width: 768px) {
  .baPage { max-width: var(--cs-col); margin-left: auto; margin-right: auto; padding-top: 10px; }
  .baSheet {
    left: 50%; right: auto;
    width: var(--cs-col);
    transform: translateX(-50%);
  }
  /* Плашка едет тем же переходом, но из центра колонки: сдвиг по горизонтали
     приходится дописывать в оба состояния — transform один на обе оси. */
  .baCart {
    left: 50%; right: auto;
    width: var(--cs-col);
    transform: translateX(-50%) translateY(120%);
  }
  .baCart.on { transform: translateX(-50%); }
}