/* ===================================================================
   ILOVA.CSS — Capacitor ilova qobig'i uslubi (B13, 5-A)
   FAQAT <html class="ilova"> bo'lganda (haqiqiy ilova ichida) ta'sir
   qiladi. Oddiy brauzerda bu qoidalar HECH NARSAGA tegmaydi.
   Arxitektor §5-A/§6: soxta status-bar chizilmaydi, safe-area-inset.
=================================================================== */

/* 1) Pastki tab bar ilovada DOIM ko'rinadi (planshetda ham — ilova
      telefon rejimida ishlaydi). Brauzerda esa faqat <768px da. */
.ilova .mobil-panel {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF;
  border-top: 1px solid #EAE7E7;
}

.ilova .mobil-panel a {
  min-width: 0;
  min-height: 44px;
  color: #6A6A6C;
}

.ilova .mobil-panel a.faol { color: #C4000F; }
.ilova .mobil-panel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* 2) YUQORI safe-area: Android WebView kontentni status-bar OSTIGA joylaydi
   (o'zi inset qiladi), shuning uchun header'ga qo'shimcha padding-top
   BERMAYMIZ — aks holda tepada ortiqcha bo'sh joy paydo bo'ladi (ega
   ko'rsatgan xato). Agar keyin edge-to-edge rejim yoqilsa, StatusBar
   plagini bilan alohida boshqariladi. */

/* 3) Sahifa oxiri tab bar ostida qolib ketmasin — pastki bo'sh joy */
.ilova body,
.ilova .sayt-footer {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* 4) Ilovada telefon raqami/qo'ng'iroq tugmasi header'da ortiqcha —
      pastki panel va mahsulot tugmalari bor. Ixchamlik uchun yashiramiz. */
.ilova .header-telefon { display: none; }

/* 5) Matn tanlash/uzun bosishdagi ko'k belgi ilovada g'aliz ko'rinadi
      (nav/tugmalarda). Kontent matni tanlanadi, boshqaruv yo'q. */
.ilova .mobil-panel,
.ilova .sayt-header,
.ilova .qidiruv-qatori {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 6) Native sahifa o'tishida oq miltillashni kamaytiradi. */
.ilova { background: #FFFFFF; }
.ilova body { opacity: 1; transition: opacity 110ms ease; }
.ilova.ilova-ketmoqda body { opacity: .72; }

/* 7) Sayt uchun kerak, lekin ilovada ortiqcha bo'lgan yuqori/pastki karkas. */
.ilova .xizmat-qatori,
.ilova .kategoriya-qatori,
.ilova .sayt-footer { display: none; }

/* 8) iOS avtomatik zoom bermasligi uchun native forma maydonlari 16px+. */
.ilova input,
.ilova select,
.ilova textarea { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .ilova body { transition: none; }
}