/* Оформление витрины.

   ЦВЕТА БЕРЁМ У ТЕЛЕГРАМА. Он передаёт странице цвета той темы, которую человек
   выбрал у себя, — светлую или тёмную. Свои цвета выглядели бы чужой заплатой
   внутри приложения, а на тёмной теме ещё и слепили бы. Запасные значения после
   var() нужны на случай, если витрину открыли не из телеграма. */

:root {
  --fon: var(--tg-theme-bg-color, #ffffff);
  --fon-plitki: var(--tg-theme-secondary-bg-color, #f4f4f7);
  --tekst: var(--tg-theme-text-color, #000000);
  --tusklyy: var(--tg-theme-hint-color, #8a8a8e);
  --svyaz: var(--tg-theme-link-color, #2f80ed);
  --knopka: var(--tg-theme-button-color, #2f80ed);
  --na-knopke: var(--tg-theme-button-text-color, #ffffff);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  padding: 0 12px 24px;
  background: var(--fon);
  color: var(--tekst);
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Верх: режимы и поиск ───────────────────────────────────────────────────
   Липнет к верху экрана: список длинный, и переключатель, уехавший вверх при
   прокрутке, приходилось бы искать, возвращаясь в начало. */
.verh {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0 8px;
  background: var(--fon);
}

.perekluchatel {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.rezhim {
  flex: 1;
  /* 44 пиксела — та высота, в которую палец попадает не глядя. Ниже начинаются
     промахи по соседней кнопке, и человек винит в этом себя. */
  min-height: 44px;
  border: none;
  border-radius: 10px;
  background: var(--fon-plitki);
  color: var(--tusklyy);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.rezhim.vybran {
  background: var(--knopka);
  color: var(--na-knopke);
}

.poisk {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: var(--fon-plitki);
  color: var(--tekst);
  font-size: 16px;   /* Мельче 16 — и телефон сам увеличивает страницу при вводе. */
}

.poisk::placeholder { color: var(--tusklyy); }

/* ── Фильтры ────────────────────────────────────────────────────────────────
   Ниже ростом и мельче шрифтом, чем вкладки: это уточнение к списку, а не выбор
   раздела. Одинаковый вид сбивал бы — человек не понимал бы, что главнее. */
.filtry {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.filtr {
  flex: 1;
  min-height: 36px;
  border: none;
  border-radius: 9px;
  background: var(--fon-plitki);
  color: var(--tusklyy);
  font-size: 13px;
  cursor: pointer;
}

.filtr.vybran {
  background: var(--knopka);
  color: var(--na-knopke);
  font-weight: 600;
}

/* ── Плитка тендера ────────────────────────────────────────────────────────── */
.plitka {
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--fon-plitki);
}

/* Взятое в работу видно с одного взгляда: полоса слева. Не цветом всей плитки —
   на тёмной теме заливка съедает текст. */
.plitka.vzyata {
  border-left: 4px solid var(--knopka);
  padding-left: 10px;
}

.shapka {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.nomer {
  font-size: 13px;
  color: var(--tusklyy);
  /* Номер длинный, в строку не влезает целиком — рвём как есть, лишь бы был
     виден весь: по нему ищут закупку на площадке. */
  word-break: break-all;
}

/* Значок «этого вы ещё не видели». Заменил собой целую вкладку «Новые»: там
   новизна была единственным путём к тендеру и сгорала от одного взгляда, здесь
   она лишь подсказка — гаснет, а тендер остаётся на месте. */
.novyy {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--knopka);
  color: var(--na-knopke);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* Кнопка-корзина: узкая, в общий ряд не растягивается. Стоит последней и не
   красится в цвет действия — убрать тендер можно и промахом, а яркая кнопка
   притягивает палец. */
.knopka.korzina {
  flex: 0 0 52px;
  background: transparent;
  border: 1.5px solid var(--tusklyy);
  color: var(--tusklyy);
  font-size: 18px;
}

.ploshchadka {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--tusklyy);
  white-space: nowrap;
}

.predmet {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
}

.dengi {
  margin-bottom: 4px;
  font-size: 15px;
}

/* Аванс — то, ради чего весь бот. Выделен намеренно: глаз должен цепляться
   именно за него. */
.avans {
  font-weight: 700;
  color: var(--knopka);
}

.srok {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--tusklyy);
}

.srok.proshel {
  color: #e05b4b;
  font-weight: 600;
}

.knopki {
  display: flex;
  gap: 8px;
}

.knopka {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.knopka.glavnaya {
  background: var(--knopka);
  color: var(--na-knopke);
}

.knopka.vtoraya {
  background: transparent;
  border: 1.5px solid var(--knopka);
  color: var(--knopka);
}

/* Кнопка в работе у того, кто не ведёт список: видно, что тендер занят, но
   нажать нельзя. Гасим её, а не прячем — исчезнувшая кнопка читается как сбой. */
.knopka.zanyata {
  background: transparent;
  border: 1.5px solid var(--tusklyy);
  color: var(--tusklyy);
  cursor: default;
}

.knopka:disabled { opacity: .5; }

/* ── Строка состояния ──────────────────────────────────────────────────────── */
.skazat {
  padding: 28px 8px;
  text-align: center;
  font-size: 15px;
  color: var(--tusklyy);
}

.skazat:empty { display: none; }