/* ===================================================================
   TELEFON KO'RINISHI.

   Bu fayl ro'yxatda ENG OXIRIDA turadi — shuning uchun u boshqa
   qatlamlarni xotirjam ustidan yozadi va `!important` kerak emas.

   Bu yerda faqat KICHIK EKRANGA va O'RNATILGAN ILOVAGA tegishli
   qoidalar bo'ladi. Umumiy tartib (yon menyuning surilishi, jadval
   aylanishi, katakchalarning tik joylashishi) o'z komponentlarida
   qolaveradi — u yerda kontekst bilan birga o'qiladi.
   =================================================================== */

/* -------------------------------------------------------------------
   1. "TIRQISHLI" EKRANLAR (notch, yumaloq burchak).

   Telefonda ekranning yuqori va past cheti tizim elementlari bilan
   band. `viewport-fit=cover` bilan sahifa butun ekranni egallaydi,
   ya'ni mazmun o'sha chetlarga kirib ketishi mumkin — pastdagi
   tugmalar barmoq bilan bosilmay qoladi.

   `env(safe-area-inset-*)` — tizim aytadigan xavfsiz masofa. Qo'llab
   -quvvatlamaydigan brauzerda u 0 ga teng, ya'ni hech narsa buzilmaydi.
   ------------------------------------------------------------------- */
.side-nav {
  padding-top: max(var(--sp-5), env(safe-area-inset-top));
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
}
.topbar { padding-top: env(safe-area-inset-top); }
.footer { padding-bottom: max(var(--sp-8), env(safe-area-inset-bottom)); }

/* -------------------------------------------------------------------
   2. BRAUZER PANELI VA BALANDLIK.

   Telefonda `100vh` — manzil qatori YASHIRINGANDAGI balandlik. Panel
   ko'rinib turganda esa sahifa ekranga sig'may, pastki qismi kesilib
   qoladi. `100dvh` ("dynamic") panel bilan birga o'zgaradi.

   `100vh` fallback sifatida oldin yoziladi: eski brauzer ikkinchi
   qatorni tushunmaydi va birinchisida qolib ketadi.
   ------------------------------------------------------------------- */
.shell { min-height: 100vh; min-height: 100dvh; }
.side-nav { height: 100vh; height: 100dvh; }

@media (max-width: 940px) {
  /* -----------------------------------------------------------------
     3. YUQORI PANEL — YOPISHIB TURADI.

     Telefonda sahifa uzun bo'ladi va pastga tushgan odam menyuga
     qaytish uchun tepaga scroll qilishi kerak edi. Endi gamburger
     doim ko'z oldida.
     ----------------------------------------------------------------- */
  .topbar {
    position: sticky; top: 0; z-index: calc(var(--z-sidebar) - 2);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  /* -----------------------------------------------------------------
     4. KLAVIATURA OCHILGANDA EKRAN "SAKRAMASIN".

     iOS Safari 16 px dan KICHIK matnli maydonga bosilganda sahifani
     avtomatik kattalashtiradi va foydalanuvchi qo'lda qaytarishi
     kerak bo'ladi. 16 px — o'sha chegara.
     ----------------------------------------------------------------- */
  .input, .select, .textarea { font-size: 16px; }

  /* -----------------------------------------------------------------
     5. BARMOQ O'LCHAMI.

     Sichqoncha uchun 34 px yetarli, barmoq uchun emas: yonma-yon
     turgan mayda tugmalar noto'g'ri bosiladi.

     Oddiy `.btn` bu yerda QAYTA YOZILMAYDI — `--ctl-h` allaqachon
     44 px va u kompyuterda ham, telefonda ham o'shanday qoladi.
     Ilgari shu yerda `padding: 12px 20px; min-height: 44px` turardi
     va ikkisi bir-biriga zid edi: ichki bo'shliq balandlikni 46 px ga
     chiqarib, min-height ishlamay qolardi.

     Kichik va ikonkali tugmalar esa 34 px dan to'liq o'lchamga
     ko'tariladi: barmoq uchun 34 px kichik. */
  .btn-sm { min-height: var(--ctl-h); }
  .icon-btn { width: var(--ctl-h); height: var(--ctl-h); }

  /* Kartochkadagi tugmalar tor ekranda yonma-yon siqilib qolardi. */
  .row-2 > .btn, .row-3 > .btn { flex: 1; }

  /* Sarlavhalar telefonda biroz kichrayadi — aks holda uzun nom
     ekranga sig'may, uch qatorga bo'linib ketardi.

     `h1.display` ilgari shu yerda ham, faylning quyi qismida ham
     belgilangan edi. Ikkalasi bir xil kenglik chegarasida (560 px)
     turgani uchun KEYINGISI ustun chiqardi va bu yerdagisi hech
     qachon ishlamasdi — ya'ni sarlavha `--fs-2xl` emas, quyidagi
     qiymatda chizilardi. Takroriy qator olib tashlandi. */
  .display.h2 { font-size: var(--fs-xl); }

  /* Modal — pastdan chiqadigan varaq ko'rinishida (`_modal.css` da
     560 px uchun allaqachon shunday). Ichidagi tugmalar tik tursin. */
  .modal .row-2 { flex-direction: column-reverse; align-items: stretch; }
  .modal .row-2 > .btn { width: 100%; }

  /* Jadval kartochkalari va panel ichi torroq chetga o'tadi. */
  .panel { padding: var(--sp-4); }
  .dash-content { padding: var(--sp-4) var(--sp-3) var(--sp-12); }

  /* Uzun matnli ustunlar telefonda jadvalni cho'zib yubormasin —
     `.table-wrap` aylantiradi, lekin kamroq aylantirish qulayroq. */
  .table th, .table td { padding: var(--sp-3); }
}

/* -------------------------------------------------------------------
   5a. TELEFONDA YON MENYU YO'Q — HAMMASI PASTDA.

   Kompyuterda chap menyu doim ko'rinib turadi va bu to'g'ri: joy bor,
   sichqoncha bilan yetish oson.

   Telefonda esa u SURILUVCHI panel edi va har bir o'tish uch harakatga
   aylanardi: barmoqni ekranning tepa-chap burchagiga cho'zib gamburgerni
   bosish → menyu chiqishini kutish → bandni bosish. Telefonni bir qo'lda
   ushlagan odam uchun tepa-chap burchak — eng noqulay nuqta.

   Ustiga, pastki menyu allaqachon bor edi va yon menyudagi bandlarning
   ko'pini TAKRORLARDI. Ya'ni bir xil bo'limga ikki xil yo'l bor edi va
   qaysi biri "asosiy" ekani bilinmasdi.

   Endi telefonda yon menyu ham, gamburger ham UMUMAN yo'q. Uning
   o'rniga:
     · asosiy bo'limlar   → pastki menyu (`.tabbar`)
     · egasining paneli   → profil sahifasidagi kartochka
   Ya'ni har bir bo'limga aynan BITTA yo'l qoladi.

   Qoida `.shell.has-tabbar` bilan CHEGARALANGAN — u faqat ommaviy
   sahifalarda bo'ladi. Boshqaruv panelida (`layouts/dashboard.html`)
   pastki menyu yo'q va u yerda yon menyu telefonda ham kerak, aks
   holda panelning bo'limlariga umuman o'tib bo'lmasdi.
   ------------------------------------------------------------------- */
@media (max-width: 940px) {
  .shell.has-tabbar .side-nav,
  .shell.has-tabbar .nav-scrim,
  .shell.has-tabbar .topbar-burger { display: none; }

  /* Gamburger ketgach brend chap chetga suriladi — yonida bo'sh
     joy qolmasin. */
  .shell.has-tabbar .topbar { padding-left: var(--sp-4); }

  /* -----------------------------------------------------------------
     YUQORI PANELDA PROFIL VA "KIRISH" TUGMALARI YO'Q.

     Ikkalasi ham pastki menyuda turibdi va u yerga barmoq bilan yetish
     osonroq. Yuqorida ular faqat joy egallardi: 390 px li ekranda
     brend, qo'ng'iroq, til, tema va profil — beshta element bir qatorga
     tiqilib qolardi.

     Mehmondagi holat ayniqsa isrof edi: "Kirish" va "Ro'yxatdan o'tish"
     ikkita katta tugma bo'lib turardi, holbuki ikkalasi ham AYNAN BIR
     manzilga olib boradi (`userHtml`) va pastki menyuda "Kirish" allaqachon bor.

     Boshqaruv panelida (`layouts/dashboard.html`) bu qoida ishlamaydi —
     u yerda pastki menyu yo'q va profil havolasi faqat shu yerda.
     ----------------------------------------------------------------- */
  .shell.has-tabbar .topbar-user,
  .shell.has-tabbar #topbar-right > .btn { display: none; }

  /* TEMA YO'Q — u profil sozlamalariga ko'chdi.

     Yuqori panel telefonda eng tor joy: to'rtta boshqaruv (qo'ng'iroq,
     til, tema, foydalanuvchi) sarlavhaga joy qoldirmasdi.

     TIL esa QOLADI, qo'ng'iroq yonida. U temadan farq qiladi: temani
     odam bir marta tanlab, boshqa tegmaydi, tilni esa sahifa ochilishi
     bilan almashtirishi kerak bo'lishi mumkin — sozlamalar ichiga
     yashirilsa, matnni tushunmagan odam uni topa olmasdi. */
  .shell.has-tabbar .topbar [data-theme-toggle] { display: none; }

  /* Qolgan boshqaruvlar kichrayadi: qo'ng'iroq, til va tema.
     34 px barmoq uchun hali qulay, lekin qatorda joy ochiladi. */
  .topbar { min-height: var(--topbar-h); }
  .topbar-right { gap: 6px; }
  /* Izoh 34 px deydi, kod esa 32 px yozardi — endi ikkalasi bitta
     tokendan (`--ctl-h-sm`). Uchala boshqaruv bir xil balandlikda
     bo'lgani uchun panel qatori tekis chiziqda turadi. */
  .topbar .icon-btn,
  .topbar .notif-trigger { width: var(--ctl-h-sm); height: var(--ctl-h-sm); font-size: var(--fs-sm); }
  .topbar .lang-trigger { height: var(--ctl-h-sm); padding: 0 var(--sp-2) 0 6px; }
  .topbar .notif-dot { min-width: 15px; height: 15px; font-size: var(--fs-2xs); }

  /* -----------------------------------------------------------------
     OCHILUVCHI OYNALAR EKRANDAN CHIQIB KETMASIN.

     Bildirishnoma ro'yxati qo'ng'iroqqa nisbatan joylashardi
     (`position: absolute; right: -60px`) va kengligi 360 px edi.
     Telefonda qo'ng'iroq panelning o'rtasida turadi, ya'ni ro'yxatning
     chap yarmi ekrandan tashqarida qolardi — foydalanuvchi xabarning
     boshini umuman ko'rmasdi.

     Yechim: telefonda u qo'ng'iroqqa emas, EKRANGA nisbatan
     joylashadi va ikki chetdan bir xil masofa qoldiradi. Shunda
     kengligi qanday bo'lishidan qat'i nazar to'liq ko'rinadi.
     ----------------------------------------------------------------- */
  .notif-panel {
    position: fixed;
    top: calc(var(--topbar-h) + env(safe-area-inset-top) + 6px);
    left: var(--sp-3); right: var(--sp-3);
    width: auto;
  }
  .notif-body { max-height: min(58vh, 400px); }
  .notif-head { padding: var(--sp-2) var(--sp-3); }
  .notif-row { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .notif-row .ic { width: 26px; height: 26px; font-size: var(--fs-xs); }

  /* Til ro'yxati ham torroq — uch band uchun 186 px ortiqcha edi. */
  .lang-dropdown { min-width: 150px; }
  .lang-dropdown button { padding: var(--sp-2); }
}

/* -------------------------------------------------------------------
   5b. RASMLAR TELEFONGA MOSLANADI.

   Muammo: kartochka to'ri kompyuterda 3-4 ustun bo'ladi va har bir
   rasm ~270 px keladi. Telefonda esa to'r bitta ustunga tushadi va
   AYNAN O'SHA nisbat (16/10) ekran kengligiga cho'ziladi — 360 px li
   telefonda rasm 225 px balandlikka chiqadi. Natijada bitta ekranga
   bittayarim kartochka sig'adi va ro'yxatni ko'rish uchun uzoq
   aylantirish kerak bo'ladi.

   Yechim: nisbat KENGROQ (16/9) qilinadi va balandlikka yuqori chegara
   qo'yiladi. Kartochkaning o'zi, ranglari, tartibi — hammasi o'sha-o'sha
   qoladi, faqat rasm past bo'ladi va ekranga ikki-uch kartochka sig'adi.

   `object-fit: cover` allaqachon o'z komponentida turibdi, ya'ni rasm
   cho'zilib buzilmaydi — faqat yuqori va pastidan qirqiladi.
   ------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* To'r ikki ustunga tushgani uchun (5c-bo'lim) rasm ham ikki barobar
     tor bo'ladi — balandligini ham shunga yarasha pasaytiramiz, aks
     holda kartochka cho'zilib, ikki ustunning foydasi yo'qolardi. */
  .card-media    { aspect-ratio: 4 / 3; max-height: 108px; }
  .card-media-sm { aspect-ratio: 4 / 3; max-height: 100px; }

  /* Detal sahifasidagi galereya — sahifaning eng katta rasmi.
     Telefonda u ekranning yarmini egallab, sarlavha va tugmalar
     pastda ko'rinmay qolardi. */
  .detail-gallery .stage { aspect-ratio: 3 / 2; max-height: 240px; }
  .detail-gallery .thumb { width: 56px; }

  /* Menyu to'ri: bitta ustun o'rniga ikkita — taom rasmlari shunda
     ikki barobar kichrayadi va bir ekranda to'rttasi ko'rinadi. */
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .menu-item img { aspect-ratio: 1 / 1; }

  /* Bron oynasidagi taom qatori va joy profilidagi kichik surat. */
  .pick-row .thumb { width: 48px; height: 48px; }
  .biz-profile-head img { width: 46px; height: 46px; }
}

/* -------------------------------------------------------------------
   5c. TELEFONDA HAMMASI IXCHAM.

   Telefon ekrani kompyuternikidan uch barobar tor, lekin sayt undan
   BIR XIL o'lchamlarni meros olardi: bir kartochka butun ekranni
   egallardi, profil sarlavhasi ekranning yarmiga cho'zilardi va
   ro'yxatni ko'rish uchun uzoq aylantirish kerak bo'lardi.

   Bu bo'lim shuni tuzatadi. Yondashuv oddiy: bir ekranga IMKON QADAR
   KO'P ma'lumot sig'sin, lekin hech narsa o'qib bo'lmaydigan darajada
   kichraymasin. Amalda bu:

     · katalog     — bir qatorda ikkita kartochka, ya'ni bir ekranda
                     to'rttasi ko'rinadi (ilgari bittayarim edi)
     · profil      — rasm chapda, ma'lumot o'ngda (ilgari ustma-ust
                     turib, ekranning yarmini egallardi)
     · bo'shliqlar — bir pog'ona kichrayadi

   Chegara 560 px: undan kengroq (planshet, aylantirilgan telefon)
   ekranda joy yetarli va u yerda hech narsa o'zgarmaydi.
   ------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* ---------------- MATN SHKALASI ----------------
     Butun shkala bir pog'ona pastga tushadi. Har bir sarlavhani
     alohida kichraytirgandan ko'ra shu to'g'ri: nisbatlar saqlanadi
     va kelajakda qo'shiladigan yangi matn ham avtomatik moslashadi.

     `--fs-base` 15 → 14 px. Undan pastga tushmaymiz: 13 px li asosiy
     matn telefonda charchatadi.

     Matnli MAYDONLAR bundan mustasno — ular quyida 16 px da qoladi,
     aks holda iOS bosilganda sahifani kattalashtirib yuboradi. */
  :root {
    --fs-2xs: 9.5px;
    --fs-xs: 11px;   --fs-sm: 12.5px; --fs-base: 14px;
    --fs-md: 15.5px; --fs-lg: 18px;   --fs-xl: 22px;  --fs-2xl: 27px;
  }

  /* ---------------- umumiy zichlik ---------------- */
  .section { padding-block: var(--sp-6); }
  .container { padding-inline: var(--sp-3); }
  .panel { padding: var(--sp-3); }
  .grid { gap: var(--sp-3); }

  h1.display { font-size: var(--fs-xl); }
  .display.h3 { font-size: var(--fs-md); }
  .lede { font-size: var(--fs-sm); }
  .catalog-head { margin-bottom: var(--sp-4); }

  /* ---------------- BOSH SAHIFA SARLAVHASI ----------------
     Telefonda bu blok ekranning yarmidan ko'pini egallardi: ustma-ust
     turgan "eyebrow", katta sarlavha, ikki qatorli tavsif, tur
     tugmalari, ikki qatorga o'ralgan qidiruv va statistika.

     Tavsif telefonda yashiriladi: "Joyni oldindan band qiling,
     navbatda turmang" degan sarlavhadan keyin u yangi hech narsa
     qo'shmaydi, faqat ikki qator joy oladi. Kompyuterda qoladi —
     u yerda joy bor.

     ("Toshkent · restoran va to'yxonalar" yozuvi esa butunlay olib
     tashlandi: platforma bitta shahar bilan chegaralanmaydi.) */
  .home-head { padding: var(--sp-4) 0 var(--sp-3); gap: var(--sp-3); }
  .home-head .lede { display: none; }
  .home-head h1 { font-size: var(--fs-xl); }

  /* QIDIRUV VA TUR TUGMALARI TELEFONDA YO'Q.

     Pastki menyuda "Restoran" va "To'yxona" allaqachon turibdi va
     ularning har biri o'z qidiruvi bilan ochiladi. Bosh sahifadagi
     ikkinchi nusxa ekranning eng qimmatli qismini — birinchi
     ekranni — egallab, taomlar tasmasini pastga surib yuborardi.
     Kompyuterda esa pastki menyu yo'q, shuning uchun u yerda qoladi. */
  .home-tabs,
  .home-search { display: none; }

  /* QIDIRUV — BITTA QATORDA.
     `flex-wrap: wrap` tufayli uchta element ikki qatorga bo'linib
     ketardi. Endi o'ralmaydi: maydon qolgan joyni egallaydi
     (`flex: 1` + `min-width: 0` — usiz u o'z mazmuniga qarab
     kengayib, tugmalarni siqib chiqarardi), "Yaqinimda" esa faqat
     nishonchaga qisqaradi. Uning matni ekran o'quvchisi uchun
     `data-i18n-label` da qoladi. */
  .home-search { flex-wrap: nowrap; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--radius-m); }
  /* Qatordagi uchala element BIR XIL balandlikda: maydon, "Yaqinimda"
     chipi va "Qidirish" tugmasi. Ilgari ular 42 / 42 / 38 px edi. */
  .home-search .search { flex: 1; min-width: 0; min-height: var(--ctl-h-sm); }
  .home-search .btn,
  .home-search .chip { min-height: var(--ctl-h-sm); padding: 0 var(--sp-3); white-space: nowrap; }
  .home-search #near-me { padding: 0 var(--sp-3); }
  .home-search #near-me span { display: none; }

  /* Bo'lim sarlavhalari ham bir pog'ona pastga. */
  .section-title { margin-bottom: var(--sp-3); }
  .section-sm { padding-block: var(--sp-5); }

  /* ---------------- TAOMLAR TASMASI ----------------
     Telefonda kartochka kichrayadi — ekranga ikkitadan ko'proq taom
     sig'adi va tasma "oqayotgani" ko'rinib turadi. Bitta katta
     kartochka bilan u tasmaga emas, sekin almashadigan bitta rasmga
     o'xshab qolardi. */
  .menu-marquee { gap: var(--sp-2); }
  .mm-track { gap: var(--sp-2); }
  .dish-tile .body { padding: var(--sp-1) var(--sp-2) var(--sp-2); }
  .dish-tile .name { font-size: var(--fs-xs); }
  .dish-tile .place { font-size: var(--fs-2xs); }
  .dish-tile .price { font-size: var(--fs-xs); margin-top: 1px; }

  /* ---------------- katalog filtrlari: IKKI QATORGA ----------------
     Oshxona turlari (Barchasi, Milliy taomlar, Yevropa oshxonasi,
     Fusion, Sharqona, Fast food, Boshqa) va "Yaqinimda" — jami
     sakkizta chip. 44 px balandlikda va 13,5 px yozuv bilan ular
     390 px li ekranda UCH qatorga yoyilib, qidiruvdan keyin yana
     yarim ekranni egallardi.

     Chip bir pog'ona kichrayadi (30 px, 12 px yozuv) va endi ikki
     qatorga sig'adi. Bronlar filtridagi chiplar bilan aynan bir xil
     o'lchamda — ikkala ekranda bir xil ritm. */
  .filter-bar { gap: 6px; }

  /* Qidiruv maydoni o'z qatorini oladi, chiplar esa ostidan boshlanadi. */
  .filter-bar .search { flex: 1 0 100%; }

  /* `display: contents` — oshxona chiplari o'z konteyneridan "chiqib",
     `.filter-bar` ning bevosita bandlariga aylanadi.

     Nega kerak: "Yaqinimda" chipi alohida konteynerdan tashqarida
     turardi va shuning uchun oshxona chiplari bilan BIR qatorni
     bo'lisha olmasdi — u har doim yangi, uchinchi qatorga tushardi.
     Endi hammasi bitta oqimda o'raladi va ikki qatorga joylashadi:
     birinchi qatorda oshxona turlari, ikkinchisida qolganlari va
     "Yaqinimda".

     (Uzunroq tarjimada — masalan ruschada — uchinchi qator paydo
     bo'lishi mumkin; chiplar o'ralishi shuni hal qiladi.) */
  #cuisine-chips { display: contents; }

  .filter-bar .chip {
    min-height: 30px;
    padding: 0 10px;
    font-size: var(--fs-2xs);
    border-width: 1px;
  }

  /* ---------------- katalog: BIR QATORDA IKKITA ----------------
     `.grid-auto` ning o'zi `minmax(270px, 1fr)` — 390 px li ekranda
     bu majburan bitta ustun beradi. Telefonda uni aniq ikkitaga
     qotiramiz va `minmax(0, ...)` bilan yozamiz: `auto` bo'lsa uzun
     nom ustunni kengaytirib, to'rni buzib yuborardi. */
  .grid-auto,
  .grid-auto-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

  .biz-card .card-body { padding: var(--sp-3); gap: 2px; }
  .biz-card .name {
    font-size: var(--fs-sm); line-height: 1.25;
    /* Uzun nom ("Marvarid Steak House") ikki qatorda kesiladi —
       shunda qo'shni kartochkalar bir xil balandlikda qoladi. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .biz-card .meta { font-size: var(--fs-xs); gap: var(--sp-1); flex-wrap: nowrap; overflow: hidden; }
  .biz-card .meta > span { white-space: nowrap; }

  /* Manzil qatori tor ustunda deyarli butunlay kesilardi va faqat
     joy egallardi. Tuman `.meta` da baribir turibdi, aniq manzil esa
     xarita nishonchasi ortida. */
  .biz-card .card-body .addr { display: none; }

  .biz-card .foot { margin-top: var(--sp-1); gap: var(--sp-1); flex-wrap: wrap; }
  .biz-card .foot .rating { font-size: var(--fs-xs); gap: 1px; }
  .biz-card .foot .tag,
  .biz-card .foot .rank-tag { font-size: var(--fs-2xs); padding: 2px var(--sp-2); }
  /* Ikki ustunda "350 kishigacha · 15 000 000 so'm dan" bitta qatorga
     sig'maydi va uch nuqta bilan kesilardi — aynan NARX ko'rinmay
     qolardi. Shuning uchun telefonda u o'raladi. */
  .biz-card .facts {
    font-size: var(--fs-2xs); margin-top: var(--sp-1); line-height: 1.35;
    white-space: normal; overflow: visible; text-overflow: clip;
  }

  /* Rasm ustidagi uchala nishon bir xil chetda va bir xil bo'shliqda —
     ilgari 6 px va 7 px aralash yozilgan edi. */
  .biz-card-media .rating-badge { top: var(--sp-2); right: var(--sp-2); padding: 2px var(--sp-2); font-size: var(--fs-2xs); }
  .biz-card-media .distance-badge { bottom: var(--sp-2); left: var(--sp-2); padding: 2px var(--sp-2); font-size: var(--fs-2xs); }
  .biz-card-media .map-pin { top: var(--sp-2); right: var(--sp-2); width: 24px; height: 24px; }
  .biz-card-media .map-pin svg { width: 12px; height: 12px; }

  /* Depozit nishoni tor ustunda ikki qatorga bo'linib ketmasin.
     (Tugmalarni tenglashtirish `_detail.css` da — u kompyuterda ham
     kerak, faqat telefonga tegishli emas.) */
  .card-body .seal { font-size: var(--fs-2xs); padding: 2px var(--sp-2); }

  /* Bo'limlar qatori — tugmalar allaqachon sig'adi, lekin `overflow-x`
     tufayli ostida bo'sh aylantirgich chizig'i chiqib turardi. */
  .tabs { scrollbar-width: none; margin-bottom: var(--sp-4); }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: var(--sp-3); }

  /* ---------------- profil ----------------
     Profil sahifasining telefon ko'rinishi endi o'z faylida
     (`pages/_profile.css`, eng oxiridagi `@media` bloki): muqova,
     ma'lumot kataklari va bo'limlar tasmasi bitta joyda tursin.

     Ilgari bu yerda ~70 qator qoida bor edi — eski, ustunli tartib
     uchun yozilgan (`.profile-cover`, `.profile-head`, `.info-row`,
     `#profile-menu`). Ular endi mavjud bo'lmagan sinflarga ishora
     qilardi, ya'ni hech narsaga ta'sir qilmay turardi. */

  /* ---------------- statistika kartochkalari ----------------
     `_layout.css` telefonda `.grid-3` va `.grid-4` ni BITTA ustunga
     tushiradi. Bu matnli blok uchun to'g'ri, lekin ichida bitta raqam
     turgan kartochka uchun isrof: to'rtta ko'rsatkich to'rtta butun
     kenglikdagi blokka aylanib, ekranni to'liq egallardi va ular
     ostidagi ro'yxatga yetib borish uchun uzoq aylantirish kerak edi.

     Raqamga esa kenglik kerak emas — ikki ustun yetarli va to'rtala
     ko'rsatkich bir qarashda ko'rinadi. */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: var(--sp-3); gap: var(--sp-1); }
  .stat-card .label { font-size: var(--fs-2xs); letter-spacing: .04em; line-height: 1.25; }
  .stat-card .value { font-size: var(--fs-xl); }

  /* Bosh sahifadagi uchta ko'rsatkich — bir qatorda uchtasi.
     `auto-fit, minmax(130px, ...)` telefonda ikkitani sig'dirib,
     uchinchisini yolg'iz qatorga tushirardi va yonida bo'sh joy
     qolardi. Uchta raqamga 390 px yetarli. */
  .home-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  /* `.stat-card` bilan AYNAN bir xil o'lchamlar. Ilgari bu ikki
     kartochka telefonda 21/8.5 va 22/9.5 px edi — bir sahifada
     yonma-yon turganda farq ko'zga tashlanardi. */
  .home-stat { padding: var(--sp-3); }
  .home-stat .value { font-size: var(--fs-xl); }
  .home-stat .label { font-size: var(--fs-2xs); letter-spacing: .03em; }

  /* Sahifa sarlavhasi — tugma pastga tushib, butun kenglikni olsin. */
  .page-head { gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .page-head .btn { width: 100%; }

  /* Ramka sarlavhasi — qator bo'lib qoladi, lekin O'RALADI.
     Yonma-yon sig'maydigan filtr tugmalari o'z-o'zidan pastki qatorga
     tushadi ("Mening bronlarim" nomi ilgari har bir so'zi alohida
     qatorga bo'linib ketardi).

     Ustunga aylantirish esa noto'g'ri edi: sarlavha yonidagi YAKKA
     tugmalar — masalan "Shaxsiy ma'lumotlar"dagi qalamcha — pastga
     tushib, chap chetda yolg'iz qolib ketardi. */
  .panel-head { flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }

  /* ---------------- qisqa yo'l kartochkalari ---------------- */
  .shortcut-card { padding: var(--sp-3); gap: var(--sp-1); }
  .shortcut-card .ic { font-size: var(--fs-lg); }
  .shortcut-card b { font-size: var(--fs-sm); }
  .shortcut-card .go { top: var(--sp-3); right: var(--sp-3); }
  .shortcut-panel::after { top: var(--sp-3); right: var(--sp-8); }
  .sign-out { padding: var(--sp-3); gap: var(--sp-3); }

  /* ---------------- bronlar filtri: BITTA QATORDA ----------------
     To'rtta chip (Barchasi / Kutilmoqda / Tasdiqlangan / Yakunlangan)
     44 px balandlikda va 13,5 px yozuv bilan 390 px ga sig'masdi —
     "Yakunlangan" ikkinchi qatorga tushib, sarlavha bilan ro'yxat
     orasi ikki barobar uzayardi.

     Endi chiplar bir pog'ona kichrayadi va qator O'RALMAYDI. Tarjima
     uzunroq bo'lsa (ruscha "Подтверждённые") qator surilib ketadi,
     lekin baribir bitta qator bo'lib qoladi. */
  #booking-filters {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #booking-filters::-webkit-scrollbar { display: none; }
  #booking-filters .chip {
    min-height: 30px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-2xs);
    border-width: 1px;
  }

  /* ---------------- ro'yxat qatorlari (bronlar) ----------------
     Ilgari har bir bron ikki-uch qatorli katta blok edi va ekranga
     ikkitasi zo'rg'a sig'ardi. */
  .list-row { padding: var(--sp-3) 0; gap: var(--sp-2); }
  .list-row .stack { min-width: 0 !important; }
  .list-row b { font-size: var(--fs-sm); }
  .list-row .small { font-size: var(--fs-xs); }
  .list-row .xs { font-size: var(--fs-2xs); }
  .list-row-actions { gap: 6px; }

  /* Mijoz kartochkasi (egasining bronlar ekrani) — rasm kichrayadi. */
  .customer-card { gap: var(--sp-2); }
  .customer-card .cust-photo { width: 34px; height: 34px; }

  /* ---------------- poyloq (footer) ----------------
     TELEFONDA POYLOQ UMUMAN YO'Q.

     Ilgari sahifa oxirida brend yozuvi, "Platforma" va "Aloqa"
     ustunlari hamda huquqlar qatori turardi — telefonda bu yarim
     ekranlik blok edi va uning ostida yana pastki menyu ham bor edi.

     Poyloqning ikkita vazifasi bor edi, ikkalasi ham boshqa joyda
     bajariladi:
       · yo'l ko'rsatish  → pastki menyu (har doim ko'rinib turadi);
       · aloqa ma'lumoti  → profildagi sozlamalar oynasi.

     Kompyuterda esa qoladi: u yerda pastki menyu yo'q va sahifa
     qayerda tugaganini poyloq bildiradi. */
  .footer { display: none; }

  /* ---------------- pastki menyu ----------------
     52 px dan 48 px ga — barmoq uchun hali ham qulay, lekin ekranda
     to'rt piksel ko'proq mazmun qoladi. */
  /* Bandlar BESHTA — 390 px li ekranda har biriga ~78 px. Bu yozuvni
     ham, nishonchani ham qulay o'lchamda saqlashga yetadi: pastki
     menyu eng ko'p bosiladigan joy, uni maydalash noto'g'ri bo'lardi. */
  :root { --tabbar-h: 52px; }
  .tabbar-item { padding: 6px 2px 5px; gap: var(--sp-1); }
  .tabbar-item .ic { font-size: var(--fs-lg); }
  .tabbar-item .lb { font-size: var(--fs-2xs); }
}

/* Juda tor ekran (≤ 380 px): rasmlar yana bir pog'ona pasayadi. */
@media (max-width: 380px) {
  .card-media    { max-height: 92px; }
  .card-media-sm { max-height: 86px; }
  .detail-gallery .stage { max-height: 205px; }
  .profile-identity h1 { font-size: 17px; }
  .profile-stat .label { font-size: 8px; }
}

/* -------------------------------------------------------------------
   6. O'RNATILGAN ILOVA REJIMI.

   Ilova bosh ekrandan ochilganda brauzerning "orqaga" tugmasi yo'q.
   Shuning uchun matnni tasodifan belgilab qo'yish va ikki marta
   bosganda kattalashish bezovta qiladi — ular o'chiriladi.
   Matnli maydonlarga bu tegmaydi.
   ------------------------------------------------------------------- */
@media (display-mode: standalone) {
  body { -webkit-user-select: none; user-select: none; }
  .input, .textarea, .select, p, h1, h2, h3, .table {
    -webkit-user-select: text; user-select: text;
  }
}

/* -------------------------------------------------------------------
   7. "ILOVANI O'RNATING" TASMASI.

   Pastda turadi: yuqorida bo'lsa sarlavhani bosib qolardi. Faqat
   Android brauzeri o'rnatish mumkinligini aytganda paydo bo'ladi
   (`js/core/pwa.js`), bir marta yopilsa boshqa chiqmaydi.
   ------------------------------------------------------------------- */
.install-bar {
  position: fixed; z-index: var(--z-toast, 90);
  left: var(--sp-4); right: var(--sp-4);
  bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-lg);
  animation: install-rise .28s ease-out;
}
@keyframes install-rise {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.install-bar .install-icon {
  width: 44px; height: 44px; border-radius: var(--radius-s); flex-shrink: 0;
  background: var(--surface-2);
}
.install-bar .install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.install-bar .install-text b { font-size: var(--fs-sm); }
.install-bar .install-text span { font-size: var(--fs-xs); color: var(--ink-soft); }

@media (max-width: 560px) {
  /* Tor ekranda tavsif matni tugmalarni siqib qo'yardi. */
  .install-bar .install-text span { display: none; }
}

/* Kompyuterda tasma CHAP MENYUNI bosib qolmasin.

   U `position: fixed` bo'lgani uchun butun ekran kengligini oladi va
   yon menyuning eng pastidagi bandni ("Taklif yuborish") yopib turardi:
   havola bor, lekin uni ko'rib bo'lmasdi.

   Chegara 940 px — yon menyu aynan shundan kengroq ekranda ko'rinadi. */
@media (min-width: 941px) {
  .install-bar { left: calc(var(--sidebar-width) + var(--sp-4)); }
}

/* -------------------------------------------------------------------
   8. OFLAYN SAHIFA.
   ------------------------------------------------------------------- */
.offline-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: var(--sp-6);
  background: var(--ground);
}
.offline-card {
  max-width: 420px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow);
}
.offline-icon { font-size: 46px; }