/* @rozgor-part 1/10 — ASOS: mavzu o'zgaruvchilari, ilova tartibi, tepa panel, til tanlagich, filtr/saralash
   BO'LINDI (5d-blok): ilgari bitta `style.css` (3058 qator) edi. TARTIB MUHIM —
   keyingi qoida oldingisini bosadi, shuning uchun public/index.html dagi <link>
   teglari AYNAN shu raqamlar tartibida turishi SHART. */
/* Ro'zg'or Mini App — mobil-birinchi, Telegram temasiga moslashadi */

:root {
  --tg-bg: #ffffff;
  --tg-text: #111111;
  --tg-hint: #8a8a8e;
  --tg-link: #2481cc;
  --tg-button: #2481cc;
  --tg-button-text: #ffffff;
  --tg-secondary-bg: #f2f2f7;
  --danger: #e5484d;
  --warn: #d98a00;
  --warn-bg: rgba(217, 138, 0, 0.12);
  /* Olingan (bought) mahsulot rangi — chiziqsiz, YASHIL (0010 D-qism). Yorug' va
     qorong'i (Telegram dark) mavzuda ham o'qilishi uchun o'rta-yorqin yashil. */
  --done: #2ea85c;
  --radius: 14px;
  /* Pastki menyu (tabbar) balandligi — safe-area'SIZ. Qotirilgan "Mahsulot
     qo'shish" qatori, xato yozuvi va ro'yxatning pastki to'ldirmasi shu qiymatga
     tayanadi, shuning uchun BITTA joyda turadi (o'zgartirsangiz — hammasi mos
     siljiydi). 55px tugma + 1px yuqori chegara = 56px. */
  --tabbar-h: 56px;
}

/* Qorong'i mavzuda yashilni biroz yorqinroq qilamiz (o'qilishi uchun). Telegram
   temasi JS orqali kelsa ham, OS darajasidagi dark ko'pincha mos keladi — yashil
   baribir yashil, zarar yo'q. */
@media (prefers-color-scheme: dark) {
  :root {
    --done: #40c66c;
  }
}

* {
  box-sizing: border-box;
}

/* `hidden` atributi DOIM yashirsin — author `display:flex/grid` UA qoidasidan
   ustun turadi, shuning uchun `!important` bilan majburlaymiz (yangi ro'yxat
   formasi, filtr paneli, oila ekrani va h.k. shu bilan to'g'ri yashiriladi). */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

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

/* Ilova USTUNLI (flex column) tartibda va viewport balandligiga QOTIRILGAN:
   tepa blok (topbar) + suriluvchi ro'yxat (main). Ilgari `min-height: 100vh` edi
   va butun SAHIFA surilardi — sarlavha, "Jami" va qidiruv tepaga chiqib ko'rinmay
   ketardi. Endi sahifaning o'zi surilmaydi (`overflow: hidden`), skroll faqat
   `.main` ichida.
   Nega `position: sticky` EMAS: Telegram Mini App'da (ayniqsa iOS) sticky element
   TG'ning o'z suriluvchi qatlami bilan urishib "sakraydi"/joyida qolmaydi; flex
   ustun + `overflow-y:auto` esa oddiy tartib qoidasi — brauzer xususiyatiga
   tayanmaydi va hamma joyda bir xil ishlaydi.
   `100dvh` — mobil brauzerlarda manzil qatori yig'ilganda `100vh` haqiqiy
   ko'rinishdan KATTA bo'lib qoladi; `dvh` uni to'g'ri o'lchaydi. Eski brauzer
   `dvh` ni tushunmasa — yuqoridagi `100vh` qatori kuchda qoladi. */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  max-width: 640px;
  margin: 0 auto;
  /* SUZUVCHI (floating) boshqaruvning tayanchi (0035): `.fbar-*` qatorlari
     `position: absolute` bilan AYNAN shu qutiga nisbatan joylashadi. `fixed`
     BO'LMAYDI — u keng ekranda 640px chegaradan chiqib ketardi.
     `relative` `position: fixed` bolalarga (add-bar · tabbar · notice) TEGMAYDI:
     ular uchun konteyner blok faqat transform/filter bilan o'zgaradi. */
  position: relative;
  /* Suzuvchi holatga o'tish vaqti va egri chizig'i — BITTA joyda (bolalarga
     meros bo'lib o'tadi). Owner "sakramasin, suzib o'tsin" dedi. */
  --fdur: 340ms;
  --fease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Yopishgan tepa blok — sarlavha + pul chizig'i ("Jami") + qidiruv/filtr.
   `flex: none` -> hech qachon siqilmaydi va surilmaydi. Pastdagi nozik chiziq
   ro'yxat qayerdan boshlanishini ko'rsatadi. */
.topbar {
  flex: none;
  background: var(--tg-bg);
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

/* Sarlavha qatori — dropdown (keng) + "👥" (o'ngda). Sarlavha matni olib
   tashlangani uchun tepa bo'shliq ixchamlashtirildi (notch uchun safe-area).
   Telegram Mini App'da bu qator TG'ning o'z sarlavhasi (orqaga/⋮/yig'ish) ostiga
   tushib qolmasligi uchun tepa to'ldirma TG kontent xavfsiz zonasini ham hisobga
   oladi: --tg-content-safe-top (app.js safeAreaInset.top + contentSafeAreaInset.top
   dan hisoblaydi). env(safe-area-inset-top) — brauzer/notch uchun zaxira; ikkalasidan
   KATTAsi olinadi (0017 F-qism). */
.header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(8px + max(env(safe-area-inset-top), var(--tg-content-safe-top, 0px)))
    12px 8px;
}

/* --- Til tanlagich (Sozlamalar bo'limida, AKKORDEON) ----------------------
   Ilgari sarlavha qatorida "🌐 UZ" tugmasi + qalqib chiqadigan menyu edi. Endi
   "⚙️ Sozlamalar" -> "🌐 Til" qatori: bosilsa 4 til AYNAN shu yerda (qator
   ostida) ochiladi — mahsulot varag'idagi "Turi" akkordeoni naqshi.
   Tugmaning o'zi `.set-row` (boshqa sozlama qatorlari bilan bir xil). */
.lang-dd {
  position: relative;
}

/* Akkordeon ro'yxati — qator OSTIDA, oqim ichida (qalqib chiqmaydi) */
.lang-dd-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 10px;
  background: rgba(128, 128, 128, 0.07);
  border-top: 1px solid rgba(128, 128, 128, 0.15);
}

.lang-dd-menu[hidden] {
  display: none;
}

/* Ilovadagi YAGONA suriluvchi qism — mahsulotlar ro'yxati.
   `min-height: 0` — flex bolasining standart `min-height:auto` qiymati uni
   kontent balandligiga cho'zib, `overflow-y` ni ishlamay qo'yadi; shu bois SHART.
   `overscroll-behavior: contain` — ro'yxat oxiriga yetganda skroll "ortga
   o'tib" butun sahifani/Telegram oynasini tortib ketmasin.
   Pastdagi 96px — qotirilgan "Mahsulot qo'shish" qatori (add-bar) ortida oxirgi
   mahsulot qolib ketmasligi uchun; unga PASTKI MENYU balandligi (--tabbar-h) va
   qurilmaning pastki xavfsiz zonasi qo'shiladi. */
.main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 12px calc(96px + var(--tabbar-h) + env(safe-area-inset-bottom));
}

/* "🍲 Ovqat" va "⚙️ Sozlamalar" bo'limlari — ro'yxat (.main) o'rniga chiziladi
   (bir vaqtda faqat bittasi ko'rinadi). O'zi suriladi. Tepa to'ldirma .header
   bilan bir xil qoidada: Telegram chrome'i (orqaga/⋮) ostiga tushmasin. */
.tab-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(14px + max(env(safe-area-inset-top), var(--tg-content-safe-top, 0px))) 14px
    calc(24px + var(--tabbar-h) + env(safe-area-inset-bottom));
}

/* --- Filtr / saralash boshqaruvlari --------------------------------------- */

/* Endi topbar ichida (main'ning 12px yon to'ldirmasidan tashqarida) — yon
   to'ldirmani o'zi beradi. */
.controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 8px;
}

/* Qidiruv + filtr tugmasi bitta qatorda (qidiruv kengayadi, tugma o'ngda). */
.controls-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.controls-top .search-wrap {
  flex: 1;
  min-width: 0;
}

/* Filtr/saralash tugmasi (sliders belgisi) — chiplar shu tugma ortida. */
.filter-toggle {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: var(--radius);
  background: var(--tg-secondary-bg);
  color: var(--tg-text);
  cursor: pointer;
}

.filter-toggle:active {
  opacity: 0.75;
}

/* Panel ochiq holatda — tugma urg'ulanadi. */
.filter-toggle.active {
  background: var(--tg-button);
  color: var(--tg-button-text);
}

/* Faol filtr bor bo'lsa — kichik nuqta belgisi (panel yopiq bo'lsa ham bilinadi). */
.filter-toggle.has-active::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tg-button);
  border: 2px solid var(--tg-bg);
}

.filter-toggle.active.has-active::after {
  background: var(--tg-button-text);
  border-color: var(--tg-button);
}

/* Faol filtr chiplari — qidiruv ostida, o'ralaman (wrap). */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Faol filtr chipi = ko'k chip + "✕" (bosilsa shu filtr olib tashlanadi). */
.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.active-filter-x {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.9;
}

/* Filtr paneli — ichida saralash/filtr/"Kim qo'shgan" chiplari; ochilganda pastga
   kengayadi. Panel endi YOPISHGAN tepa blok ichida: juda uzun bo'lib ketsa ro'yxatga
   joy qolmasdi, shu bois balandligi cheklangan va o'zi suriladi. */
.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(128, 128, 128, 0.18);
  border-radius: var(--radius);
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  font-size: 15px;
  opacity: 0.7;
  pointer-events: none;
}

/* MUHIM (iOS): har qanday <input>/<select> ning font-size'i 16px DAN KICHIK bo'lsa,
   Safari maydonga bosilganda butun sahifani ZUMLAB yuboradi (va qaytarmaydi).
   Shu bois quyidagi maydonlarning hammasi 16px; ko'zga KICHIK ko'rinishi kerak
   bo'lganlarida vizual o'lcham `transform: scale()` bilan qisqartiriladi
   (scale zumlash qoidasiga ta'sir qilmaydi — u faqat KO'RINISHNI o'zgartiradi). */
.search-input {
  flex: 1;
  width: 100%;
  padding: 10px 36px;
  border: none;
  border-radius: var(--radius);
  background: var(--tg-secondary-bg);
  color: var(--tg-text);
  font-family: inherit;
  font-size: 16px;
  outline: none;
}

.search-input::placeholder {
  color: var(--tg-hint);
}

/* Ko'rinadigan doira 26px (o'zgarmadi), lekin BOSILADIGAN maydon 44x44 — ::before
   ko'rinmas qatlami (item-check naqshi). Kichik "✕" ga tegib bo'lmayotgan edi. */
.search-clear {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tg-hint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.search-clear::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
}

.search-clear:active {
  background: rgba(128, 128, 128, 0.18);
}

.ctrl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Filtr panelidagi NOMLANGAN bo'lim ("Kim qo'shgan"). Ilgari a'zo chiplari
   qidiruv TEPASIDA alohida qator edi — uch a'zoda siqilib ketardi va yopishgan
   tepadan joy yerdi. Endi panel ichida, o'z sarlavhasi bilan. */
.ctrl-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ctrl-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-hint);
}

.chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--tg-secondary-bg);
  color: var(--tg-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.chip:active {
  opacity: 0.75;
}

.chip.active {
  background: var(--tg-button);
  color: var(--tg-button-text);
}

/* Kategoriya tanlagichi — chip ko'rinishida (native select) */
/* font-size 16px — iOS zumlashiga qarshi: <select> ham fokusda 16px dan kichik
   bo'lsa sahifani kattartiradi. Balandligi qo'shni chiplar bilan bir xil qolishi
   uchun to'ldirma kamaytirildi. */
.cat-select {
  max-width: 46%;
  padding: 4px 24px 4px 10px;
  font-size: 16px;
  text-overflow: ellipsis;
}