/* ============================================================
   AKSIO — FAQAT KOMPYUTER (PC) UCHUN STIL FAYLI
   Bu fayl index.php da quyidagicha ulanadi va FAQAT ekran kengligi
   900px dan katta bo'lganda brauzer tomonidan yuklanadi:

   <link rel="stylesheet" href="assets/css/style-desktop.css" media="(min-width: 900px)">

   Mobil telefonlarda bu fayl umuman yuklanmaydi — shuning uchun
   mobil va kompyuter dizaynlari bir-biriga hech qanday ta'sir
   qilmaydi va ular alohida-alohida tahrirlanadi.
   ============================================================ */

:root { --app-max-width: 720px; }

body {
  display: flex;
  justify-content: center;
  background: var(--card-bg2);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(15,157,114,0.10), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(22,179,131,0.10), transparent 40%);
  background-attachment: fixed;
}
[data-theme="dark"] body { background: #050505; }

#app {
  max-width: var(--app-max-width);
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  box-shadow: 0 0 60px rgba(0,0,0,0.15);
  position: relative;
  /* Katalog/Savat/Sevimli/Profil menyusini haqiqiy sahifa tepasiga chiqarish uchun —
     u HTML'da pastda joylashgan, shuning uchun flex + order bilan vizual ravishda
     header'dan keyin, boshqa hamma narsadan OLDIN ko'rsatamiz. */
  display: flex;
  flex-direction: column;
}
#app > .header { order: -2; }
#app > .bottom-nav { order: -1; }

.header { border-radius: 0; position: sticky; top: 0; }

.sheet-panel, #splashScreen {
  position: fixed;
  width: 100%;
  max-width: var(--app-max-width);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.sheet-panel { border-radius: 24px 24px 0 0; }
.overlay { max-width: none; }
.success-content, .login-box { max-width: 420px; }

/* Kompyuterda pastki (mobil-uslub) navigatsiya paneli o'rniga —
   sarlavha ostida oddiy gorizontal menyu sifatida ko'rsatiladi,
   shunda sayt mobil ilova emas, haqiqiy veb-sayt kabi ko'rinadi. */
.bottom-nav {
  position: sticky;
  top: 64px;
  bottom: auto; left: auto; right: auto;
  width: 100%;
  max-width: none;
  transform: none;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  border-top: none;
  border-bottom: 1px solid var(--border);
  z-index: 9;
}
.bottom-nav .nav-item {
  flex-direction: row;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
}
.bottom-nav .nav-item i { font-size: 15px; }
.bottom-nav .nav-item:hover { background: var(--card-bg2); color: var(--primary); }
.bottom-nav .nav-item.active { background: var(--card-bg2); transform: none; }
.bottom-nav .nav-item.active i { transform: none; }

.products-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 20px; }

/* Sichqoncha bilan bosilganda tugmalarga hover effekt */
.btn-primary:hover, .add-btn:hover, .cat-btn:hover { opacity: 0.92; cursor: pointer; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover img { transform: scale(1.05); }
.nav-item, .cat-btn, .product-card, .btn-primary, .btn-outline-primary, .icon-btn { cursor: pointer; }

/* Kunlik banner — kompyuterda kattaroq (GIF/rasm yaxshi ko'rinishi uchun) */
.daily-banner { padding: 20px 26px; border-radius: 22px; gap: 20px; margin: 18px 20px 6px; }
.daily-banner img { width: 84px; height: 84px; border-radius: 18px; }
.daily-banner-text b { font-size: 19px; }
.daily-banner-text span { font-size: 14px; }

/* ---- Kichik noutbuk / planshet gorizontal (1024px+) ---- */
@media (min-width: 1024px) {
  :root { --app-max-width: 900px; }
  .products-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Katta monitor (1280px+) ---- */
@media (min-width: 1280px) {
  :root { --app-max-width: 1120px; }
  .products-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; }
}

/* ---- Keng ekran / 4K monitor (1600px+) ---- */
@media (min-width: 1600px) {
  :root { --app-max-width: 1320px; }
  .products-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   AKSIO DESKTOP FULL-WIDTH EXPERIENCE
   900px+ ekranlar: ilova-konteyneri emas, to'liq veb-sayt.
   Mobil CSS'ga ta'sir qilmaydi.
   ============================================================ */
@media (min-width: 900px) {
  html, body { min-width: 900px; }
  body {
    display: block;
    padding: 0;
    background: var(--bg);
    background-image:
      radial-gradient(circle at 8% 0%, rgba(15,157,114,.08), transparent 34%),
      radial-gradient(circle at 92% 0%, rgba(22,179,131,.07), transparent 34%);
  }

  #app {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
    padding-top: 76px;
    display: flex;
    flex-direction: column;
  }

  #app > .header { order: -2; }
  #app > .bottom-nav { order: -1; }

  .header {
    height: 76px;
    padding: 0 clamp(28px, 4vw, 64px);
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(16,42,35,.06);
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
  }
  [data-theme="dark"] .header { background: rgba(14,21,18,.96); }
  .brand-logo-img { width: 138px !important; max-height: 46px; object-fit: contain; }
  .header-actions { gap: 12px; }
  .header-actions .icon-btn { width: 44px; height: 44px; border-radius: 14px; }

  .bottom-nav {
    position: sticky;
    top: 76px;
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 8px clamp(24px, 4vw, 64px);
    justify-content: center;
    gap: 8px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 3px 16px rgba(16,42,35,.04);
    z-index: 80;
  }
  [data-theme="dark"] .bottom-nav { background: rgba(14,21,18,.94); }
  .bottom-nav .nav-item {
    min-width: 112px;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
  }
  .bottom-nav .nav-item i { font-size: 16px; }
  .bottom-nav .nav-item.active { color: var(--primary); background: rgba(15,157,114,.09); }

  /* Home kontenti: markaziy desktop layout */
  .home-admin-banner-slot,
  .stories-section,
  .home-perks,
  .search-bar,
  .section-title-row,
  .categories,
  #products,
  .recent-viewed-section {
    width: min(100% - 64px, 1480px);
    margin-left: auto;
    margin-right: auto;
  }

  .home-admin-banner-slot { margin-top: 24px; }
  .stories-section { margin-top: 18px; }
  .stories-rail { justify-content: flex-start; gap: 18px; overflow-x: auto; padding: 4px 2px 12px; }
  .search-bar { margin-top: 18px; margin-bottom: 18px; }
  .section-title-row { margin-top: 22px; }
  .categories { padding: 4px 0 8px; gap: 12px; }
  .cat-btn { min-width: 116px; min-height: 74px; }

  .products-grid {
    width: min(100% - 64px, 1480px);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }
  .product-card { min-width: 0; border-radius: 20px; }
  .product-card .product-image-wrap { min-height: 220px; }

  .daily-banner {
    width: min(100% - 64px, 1480px);
    margin: 22px auto 8px;
  }

  /* Desktop modallar/panellar */
  .overlay { z-index: 900; }
  .sheet-panel {
    z-index: 901; /* MUHIM: overlay(900)dan baland bo'lishi shart, aks holda
                     qorong'i fon panel kontentini butunlay yopib qo'yadi. */
    width: min(96vw, 1180px);
    max-width: 1180px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 26px;
    max-height: 92vh;
    margin: auto;
  }
  .sheet-panel.full-sheet,
  #catalogPanel,
  #cartPanel,
  #profilePanel { width: min(96vw, 1280px); max-width: 1280px; }
  #detailPanel { width: min(90vw, 640px); max-width: 640px; }
  .sheet-header { padding: 18px 24px; }

  /* Story desktop: telefon o'lchamidagi viewer, lekin markazda */
  .story-viewer-card { width: min(92vw, 460px); max-width: 460px; }

  /* Pastki 90px mobil spacer desktopda kerak emas */
  #app > div[style*="height:90px"] { height: 28px !important; }
}

@media (min-width: 1200px) {
  .products-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .product-card .product-image-wrap { min-height: 230px; }
}

/* ============================================================
   AKSIO STOREFRONT — PREMIUM DESKTOP POLISH
   Faqat 900px+ ekranlar uchun: panel sarlavhalari, yuqori menyu,
   profil kartasi, buyurtmalar, mahsulot galereyasi va yuklanish
   ekrani zumrad + oltin urg'u bilan jilolanadi. Mobil ko'rinishga
   mutlaqo tegilmaydi.
   ============================================================ */
@media (min-width: 900px) {
  :root{
    --pg-emerald-900:#052e24; --pg-emerald-800:#07422f; --pg-emerald-700:#0a5c41;
    --pg-emerald-600:#0e8862; --pg-emerald-500:#12a874; --pg-emerald-400:#22c98f;
    --pg-gold-500:#c9a227; --pg-gold-400:#e0bf4f;
  }

  /* ---------- Splash / yuklanish ekrani: kattaroq, nurlanuvchi logo ---------- */
  #splashScreen{
    background:
      radial-gradient(circle at 50% 40%, rgba(34,201,143,0.10), transparent 55%),
      var(--bg);
  }
  #splashLogo{ width:220px; filter: drop-shadow(0 10px 28px rgba(10,92,65,0.22)); }
  .splash-spinner{ width:40px; height:40px; border-top-color: var(--pg-gold-500); }

  /* ---------- Panel sarlavhalari (Mahsulot, Profil, Savat, Buyurtmalar...) ---------- */
  .sheet-header{
    background: linear-gradient(120deg, rgba(10,92,65,0.05), rgba(34,201,143,0.03));
    border-bottom: 1px solid var(--border);
    border-radius: 26px 26px 0 0;
  }
  .sheet-header h2{ font-weight: 800; letter-spacing: .1px; }
  .close-btn{
    box-shadow: 0 3px 10px rgba(10,92,65,0.10);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .close-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10,92,65,0.18); }
  .sheet-panel{ box-shadow: 0 30px 70px rgba(5,30,20,0.28), 0 0 0 1px rgba(224,191,79,0.10); }

  /* ---------- Yuqori menyu (Bosh sahifa / Katalog / Sevimli / Savat / Profil) ---------- */
  .bottom-nav .nav-item.active{
    background: linear-gradient(120deg, rgba(10,92,65,0.10), rgba(34,201,143,0.10));
    color: var(--pg-emerald-700);
    box-shadow: inset 0 0 0 1px rgba(10,92,65,0.14);
  }
  .bottom-nav .nav-item:hover{ background: rgba(15,157,114,0.07); }
  .bottom-nav .nav-item .cart-badge, .bottom-nav .nav-item .badge-dot{
    background: linear-gradient(120deg, var(--pg-emerald-600), var(--pg-emerald-400));
  }

  /* ---------- Profil karta: chuqurroq zumrad + oltin nur ---------- */
  .aksio-profile-hero{
    background: linear-gradient(135deg, var(--pg-emerald-800), var(--pg-emerald-500) 120%) !important;
    box-shadow: 0 14px 34px rgba(6,46,36,0.20);
  }
  .aksio-club-chip{
    background: linear-gradient(120deg, var(--pg-gold-500), var(--pg-gold-400)) !important;
    color: #3a2c05 !important; border: none !important;
  }
  .aksio-bonus-card{
    box-shadow: 0 6px 18px rgba(10,92,65,0.08);
    transition: box-shadow .18s ease, transform .18s ease;
  }
  .aksio-bonus-card:hover{ box-shadow: 0 10px 24px rgba(10,92,65,0.14); transform: translateY(-1px); }
  .aksio-bonus-card .bonus-icon{
    background: linear-gradient(120deg, var(--pg-emerald-600), var(--pg-emerald-400)) !important;
  }

  /* ---------- Buyurtmalar / manzillar kartalari ---------- */
  .order-card{
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(10,92,65,0.06);
    transition: box-shadow .18s ease, transform .18s ease;
  }
  .order-card:hover{ box-shadow: 0 10px 26px rgba(10,92,65,0.12); transform: translateY(-2px); }
  .order-status-badge{ font-weight: 700; letter-spacing: .2px; }
  .order-filter-btn.active{
    background: linear-gradient(120deg, var(--pg-emerald-700), var(--pg-emerald-400)) !important;
    box-shadow: 0 6px 16px rgba(10,92,65,0.22);
  }

  /* ---------- Mahsulot rasm galereyasi / lightbox ---------- */
  .detail-gallery{
    border-radius: 24px;
    box-shadow: 0 10px 34px rgba(10,92,65,0.08), inset 0 0 0 1px rgba(10,92,65,0.05);
    max-height: 420px;
  }
  .detail-gallery img{ height: 420px; max-height: 420px; width: auto; max-width: 100%; margin: 0 auto; }

  /* ---------- Savatga qo'shish / sotib olish tugmalari ---------- */
  .add-btn, .btn-primary{
    background: linear-gradient(120deg, var(--pg-emerald-700), var(--pg-emerald-400)) !important;
    box-shadow: 0 6px 18px rgba(10,92,65,0.24);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .add-btn:hover, .btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(10,92,65,0.32);
  }
  .product-card{ transition: transform .2s ease, box-shadow .2s ease; }
  .product-card:hover{ box-shadow: 0 16px 34px rgba(10,92,65,0.14); }

  /* ---------- Umumiy fokus/tanlash urg'usi ---------- */
  ::selection{ background: rgba(34,201,143,0.25); }
}

@media (min-width: 1600px) {
  .products-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px; }
  .product-card .product-image-wrap { min-height: 250px; }
}

/* ============================================================
   HOME ADMIN BANNER — DESKTOP FIX
   style.css ichida mobil uchun yozilgan qoidalar (margin:0,
   aspect-ratio 2.45/1, max-height 150px, hammasi !important bilan)
   media-query bilan cheklanmagan edi, shu sabab 900px+ ekranlarda
   ham ishlab, konteynerni juda keng va juda past qilib qo'yardi.
   Natijada object-fit:cover rasmni son marta kattalashtirib, faqat
   o'rtadagi tor chiziqni ko'rsatar, matn/ikonkalar bir-birining
   ustiga chiqib, "Kategoriyalar" bo'limi bilan chegara ham
   mos kelmasdi (chap-o'ng margin nolga tushib qolgani uchun).
   Bu yerda faqat 900px+ uchun to'g'irlanadi — mobil ko'rinish
   tegilmaydi.
   ============================================================ */
@media (min-width: 900px) {
  .home-admin-banner-slot {
    margin: 24px auto 8px !important;
  }
  .home-admin-banner-slot .daily-banner-wrap {
    margin: 0 !important;
  }
  .home-admin-banner-slot .daily-banner-track .daily-banner {
    aspect-ratio: 3.6 / 1 !important;
    max-height: 340px !important;
    min-height: 200px !important;
  }
  .home-admin-banner-slot .banner-image-actions {
    left: 28px !important;
    bottom: 24px !important;
  }
  .home-admin-banner-slot .daily-banner.image-only .banner-image-actions .banner-cta {
    min-height: 46px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }
  .home-admin-banner-slot .banner-cta span {
    max-width: 260px !important;
    font-size: 14px !important;
  }
}
@media (min-width: 1280px) {
  .home-admin-banner-slot .daily-banner-track .daily-banner { max-height: 380px !important; }
}
@media (min-width: 1600px) {
  .home-admin-banner-slot .daily-banner-track .daily-banner { max-height: 420px !important; }
}

@media (min-width:900px){.profile-pinned-section{width:min(100% - 64px,1480px);margin:22px auto 16px}.profile-pinned-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}