/* ═══════════════════════════════════════════════════════════════════
   Qobiq — yon tasma, yuqori panel, kontent
   ═══════════════════════════════════════════════════════════════════

   BREAKPOINT QOIDASI — butun loyihada faqat shu ikkisi:
     ≥ 900px  — desktop: doimiy yon tasma
     < 900px  — mobil:  burger + suriluvchi panel
   Ikkalasi ANIQ mos kelishi shart (900 / 899.98) — oraliqda ikkala
   menyu ham faol bo'lib qolmasin. Eski CSS'da 17 xil chegara bor edi
   va 1024px sabab noutbukda menyu yo'qolib qolgan.

   ⚠️ Yon tasma HOVER bilan ochilmaydi — bosish bilan ochiladi.
   Hover bilan ochilsa klaviatura va sensor ekranda ishlamaydi.
   ═══════════════════════════════════════════════════════════════════ */

.ap-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--c-page);
}

/* ═══ YON TASMA ═══════════════════════════════════════════════ */

/* ⚠️ `position: sticky`, `fixed` EMAS — bu ataylab.
   `fixed` element oqimdan chiqadi va brauzer uni alohida GPU qatlamiga
   ko'taradi. Ba'zi drayverlarda bunday qatlam surish paytida tushib
   qoladi va tasma KO'ZDAN YO'QOLADI — foydalanuvchi buni "menyu o'chib
   ketdi" deb ko'radi. `will-change` bilan qatlamni "mustahkamlash"
   ham yordam bermadi (aksincha, qatlam yaratishga majbur qiladi).

   `sticky` esa oddiy oqim ichida qoladi: u haqiqiy joy egallaydi
   (`.ap-main` ga `margin-left` kerak emas), alohida qatlam talab
   qilmaydi va surilganda hech qachon yo'qolmaydi.

   Mobil holatda pastda yana `fixed` ga o'tadi — u yerda tasma faqat
   burger bosilganda ko'rinadi va doimiy turmaydi. */
.ap-sb {
  position: sticky;
  top: 0;
  align-self: flex-start;
  z-index: var(--z-drawer);
  flex: none;
  display: flex;
  flex-direction: column;
  width: var(--sb-w);
  /* ⚠️ `vh` zaxirasi SHART. Brauzer `dvh` ni tushunmasa qoida butunlay
     tashlab yuboriladi va balandlik `auto` bo'lib qoladi — yon tasma
     bandlar balandligicha qisqarib, pastida bo'sh joy qolgandek
     ko'rinadi ("menyu yo'qoldi"). CSS qoidalari tartib bo'yicha
     qo'llanadi: `dvh` ni tushunadigan brauzer ikkinchisini oladi. */
  height: 100vh;
  height: 100dvh;
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
  transition: width var(--t-base);
  overflow: hidden;
}

.ap-sb.is-wide { width: var(--sb-w-open); }

.ap-sb__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--topbar-h);
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--c-line-soft);
  flex: none;
}

.ap-sb__mark { width: 34px; height: 34px; border-radius: var(--r-md); flex: none; }

.ap-sb__name {
  font-size: var(--fs-16);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.ap-sb.is-wide .ap-sb__name { opacity: 1; transition-delay: 60ms; }

.ap-sb__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.ap-sb__group {
  /* ⚠️ `flex: none` SHART. `.ap-sb__nav` — flex ustun; busiz joy
     yetmaganda flexbox bandlarni SIQADI (42px → 24px → 21px...) va
     yozuvlar kesilib, tugmalar yo'q bo'lgandek ko'rinadi. Past
     ekranli noutbukda (yoki brauzer masshtabi 125-150% bo'lganda)
     aynan shu sodir bo'lgan. Endi ular o'z balandligini saqlaydi,
     joy yetmasa nav AYLANADI (`overflow-y: auto`). */
  flex: none;
  padding: var(--sp-6) var(--sp-5) var(--sp-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--c-text-3);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.ap-sb.is-wide .ap-sb__group { opacity: 1; }

.ap-sb__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex: none;                 /* siqilmasin — yuqoridagi izohga qarang */
  height: 42px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.ap-sb__link:hover { background: var(--c-surface-3); color: var(--c-text); }

.ap-sb__link.is-active { background: var(--c-gold-soft); color: var(--c-gold-hover); }
.ap-sb__link.is-active::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-4));
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 var(--r-full) var(--r-full) 0;
  background: var(--c-gold);
}

.ap-sb__icon { width: 20px; height: 20px; flex: none; }

.ap-sb__text {
  opacity: 0;
  transition: opacity var(--t-fast);
}
.ap-sb.is-wide .ap-sb__text { opacity: 1; transition-delay: 60ms; }

/* Yig'ilgan holatda nom o'rniga qalqib chiquvchi izoh */
.ap-sb:not(.is-wide) .ap-sb__link::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + var(--sp-3));
  top: 50%;
  transform: translateY(-50%);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--c-dark-panel);
  color: var(--c-dark-text);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  box-shadow: var(--sh-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: var(--z-dropdown);
}
.ap-sb:not(.is-wide) .ap-sb__link:hover::after,
.ap-sb:not(.is-wide) .ap-sb__link:focus-visible::after { opacity: 1; }

.ap-sb__foot {
  flex: none;
  padding: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
}

/* Ochish/yopish tugmasi */
.ap-sb__toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  height: 38px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  color: var(--c-text-3);
  transition: background var(--t-fast), color var(--t-fast);
}
.ap-sb__toggle:hover { background: var(--c-surface-3); color: var(--c-text); }
.ap-sb__toggle svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-base); }
.ap-sb.is-wide .ap-sb__toggle svg { transform: rotate(180deg); }

/* ═══ ASOSIY USTUN ════════════════════════════════════════════ */

.ap-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* `margin-left` YO'Q: tasma endi `sticky` va oqimda haqiqiy joy
     egallaydi. Ilgari `fixed` bo'lgani uchun sun'iy chekka kerak edi
     va u tasma eni bilan qo'lda moslanardi — ikkisi bir-biridan
     ajralib qolsa kontent tasma ostiga tushib ketardi. */
}

/* ═══ YUQORI PANEL ════════════════════════════════════════════ */

.ap-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--topbar-h);
  padding: 0 var(--sp-7);
  /* ⚠️ `backdrop-filter` ATAYLAB ISHLATILMAYDI.
     Yopishqoq (`sticky`) elementda blur qatlami GPU'da alohida
     kompozit qatlam yaratadi va yonidagi `position: fixed` yon tasma
     surish paytida YO'QOLIB QOLADI (Chrome va Safari'dagi ma'lum
     chizish nuqsoni). Foydalanuvchi buni "menyu yo'q bo'ldi" deb
     ko'radi. Shaffof blur o'rniga to'liq shaffof bo'lmagan fon —
     ko'rinishda deyarli farqi yo'q, ishonchliligi esa boshqacha. */
  background: var(--c-page);
  border-bottom: 1px solid var(--c-line);
}

.ap-topbar__title { flex: 1; min-width: 0; }
.ap-topbar__h { font-size: var(--fs-16); font-weight: var(--fw-semi); letter-spacing: var(--ls-normal); }
.ap-topbar__sub { font-size: var(--fs-12); color: var(--c-text-3); margin-top: -1px; }

.ap-burger { display: none; }

/* Balans tabletkasi */
.ap-balance {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 36px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  background: var(--c-surface);
  font-size: var(--fs-13);
  white-space: nowrap;
}
.ap-balance__label { color: var(--c-text-3); }
.ap-balance__value { font-family: var(--font-num); font-weight: var(--fw-medium); }

/* ═══ FOYDALANUVCHI MENYUSI ═══════════════════════════════════ */

.ap-usermenu { position: relative; }

.ap-usermenu__btn {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 40px;
  padding: 0 var(--sp-3) 0 var(--sp-3);
  border-radius: var(--r-full);
  transition: background var(--t-fast);
}
.ap-usermenu__btn:hover { background: var(--c-surface-3); }

.ap-usermenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-3));
  z-index: var(--z-dropdown);
  width: 250px;
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.ap-usermenu.is-open .ap-usermenu__panel { opacity: 1; visibility: visible; transform: none; }

.ap-usermenu__head {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--c-line-soft);
  margin-bottom: var(--sp-4);
}
.ap-usermenu__name { font-weight: var(--fw-semi); }
.ap-usermenu__meta { font-size: var(--fs-12); color: var(--c-text-3); margin-top: var(--sp-1); }

.ap-usermenu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: 38px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-size: var(--fs-13);
  width: 100%;
  transition: background var(--t-fast), color var(--t-fast);
}
.ap-usermenu__item:hover { background: var(--c-surface-3); color: var(--c-text); }
.ap-usermenu__item svg { width: 17px; height: 17px; flex: none; }
.ap-usermenu__item--danger { color: var(--c-err); }
.ap-usermenu__item--danger:hover { background: var(--c-err-bg); color: var(--c-err-strong); }

/* ═══ KONTENT ═════════════════════════════════════════════════ */

.ap-content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-7) var(--sp-12);
}

.ap-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}
.ap-page-head__text { min-width: 0; }
.ap-page-head__desc { margin-top: var(--sp-3); color: var(--c-text-2); font-size: var(--fs-13); }
.ap-page-head__acts { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* Bo'limlar orasidagi bo'shliq — har sahifada bir xil */
.ap-stack { display: flex; flex-direction: column; gap: var(--sp-7); }
.ap-stack--lg { gap: var(--sp-9); }

/* Ikki ustunli joylashuv (asosiy + yon) */
.ap-duo { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* ═══ MOBIL ═══════════════════════════════════════════════════ */

@media (max-width: 899.98px) {
  /* Mobilda tasma — suriluvchi panel. Ekrandan TASHQARIDA turadi va
     faqat burger bosilganda kiradi (`is-open`, JS qo'yadi).
     ⚠️ `is-wide` bu yerda hech qanday kuchga ega emas — u desktop
     holati. Ilgari bitta sinf ishlatilgani uchun cookie'dagi
     "yozilgan" holati mobilda panelni ochiq qoldirardi. */
  .ap-sb {
    /* Mobilda — suriluvchi panel, shuning uchun `fixed` va oqimdan
       tashqarida. U doimiy turmaydi: burger bosilganda kiradi,
       havola bosilganda chiqadi — qatlam uzoq yashamaydi. */
    position: fixed;
    inset: 0 auto 0 0;
    height: auto;
    width: var(--sb-w-open);
    transform: translateX(-100%);
    transition: transform var(--t-base);
    box-shadow: var(--sh-xl);
  }
  .ap-sb.is-wide { width: var(--sb-w-open); }
  .ap-sb.is-open { transform: none; }

  /* Mobilda matnlar har doim ko'rinadi */
  .ap-sb__name,
  .ap-sb__text,
  .ap-sb__group { opacity: 1; }
  .ap-sb__link::after { display: none; }
  .ap-sb__foot { display: none; }

  .ap-main { margin-left: 0; }

  .ap-burger {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-left: calc(-1 * var(--sp-3));
    border-radius: var(--r-md);
    color: var(--c-text-2);
    transition: background var(--t-fast);
  }
  .ap-burger:hover { background: var(--c-surface-3); }
  .ap-burger svg { width: 20px; height: 20px; }

  .ap-topbar { padding: 0 var(--sp-6); }
  .ap-content { padding: var(--sp-7) var(--sp-6) var(--sp-11); }
  .ap-balance__label { display: none; }
  .ap-duo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 559.98px) {
  .ap-content { padding: var(--sp-6) var(--sp-5) var(--sp-10); }
  .ap-topbar { padding: 0 var(--sp-5); }
  .ap-page-head__acts { width: 100%; }
  .ap-page-head__acts .ap-btn { flex: 1; }
}

/* ═══ MEHMON SAHIFALARI (login, checkout, xato) ═══════════════ */

.ap-guest {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-page);
}

.ap-guest__body {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--sp-8) var(--sp-6);
}

.ap-guest__box { width: min(420px, 100%); }


/* ═══ PAST EKRAN ══════════════════════════════════════════════
   Noutbukda brauzer masshtabi 125-150% bo'lsa, 768px ekran CSS'da
   ~500px ga tushadi. Yon tasmadagi 7 band + 2 guruh sarlavhasi
   sig'maydi va ro'yxat aylanadigan bo'lib qoladi — foydalanuvchi
   pastdagi bandlarni umuman ko'rmaydi.

   Yechim: balandlik kamayganda tasma IXCHAMLASHADI. Aylantirish
   zaxira sifatida qoladi (juda past ekranlar uchun), lekin odatiy
   noutbukda hamma band bir ko'rinishda turadi. */

@media (min-width: 900px) and (max-height: 720px) {
  .ap-sb__link   { height: 36px; }
  .ap-sb__group  { padding: var(--sp-4) var(--sp-5) var(--sp-2); }
  .ap-sb__nav    { padding: var(--sp-3) var(--sp-4); gap: 0; }
  .ap-sb__head   { height: 52px; }
}

@media (min-width: 900px) and (max-height: 600px) {
  /* Bu balandlikda yig'ish tugmasi ham joy yeydi — u eng kam
     kerakli element, chunki tasma standart holda ochiq turadi. */
  .ap-sb__foot   { display: none; }
  .ap-sb__link   { height: 32px; font-size: var(--fs-13); }
  .ap-sb__group  { padding: var(--sp-3) var(--sp-5) var(--sp-1); font-size: var(--fs-11); }
}