/*
 * LIQUID GLASS — uslub qatlami (glass-liquid.js bilan birga ishlaydi)
 * ══════════════════════════════════════════════════════════════
 * React Bits <GlassSurface /> (glass-surface.css) allaqachon
 * shisha sirtining o'zini chizadi. Bu fayl faqat:
 *   1) sirtni "fon qatlami" qilib joylashtiradi (kontent ustida)
 *   2) header va 4 ta bannerning eski fonini shaffof qiladi
 *   3) har bir banner uchun rang tintini beradi
 *
 * Diqqat: barcha qoidalar `html.lg-js` yoki `.liquid-glass-host`
 * bilan CHEGARALANGAN — JS ishlamasa saytning asl dizayni
 * o'zgarishsiz qoladi (graceful degradation).
 * ══════════════════════════════════════════════════════════════
 */

/* ── 1. Shisha sirt qatlami ─────────────────────────────────── */
.liquid-glass__surface {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Shishaning sutday "frost" qatlami — kontrast uchun past */
  --glass-frost: 0.10 !important;
  --glass-saturation: 1.14;
}

/* ── 2. HEADER — barcha ekranlarda liquid glass ─────────────── */
html.lg-js .glass-header {
  /* Asl oq frosted fon o'rniga FAQAT komponent chizadi */
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Header bolalari (logo, nav, actions) shisha ustida turadi */
html.lg-js .glass-header > *:not(.liquid-glass__surface) {
  position: relative;
  z-index: 2;
}

html.lg-js .glass-header .liquid-glass__surface {
  border-radius: 0 !important;
}

/* Pastki yorug' "hairline" — shisha chekkasi hissi */
html.lg-js .glass-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.75) 16%,
      rgba(255, 255, 255, 0.35) 50%,
      rgba(255, 255, 255, 0.75) 84%,
      rgba(255, 255, 255, 0) 100%);
}

html.lg-js body.dark-mode .glass-header::after {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.28) 16%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.28) 84%,
      rgba(255, 255, 255, 0) 100%);
}

/* Header shishasi kontent o'tkazadigan darajada shaffof:
   scroll paytida ostidagi kontent "suyuqlik" bo'lib ko'rinadi. */
html.lg-js .glass-header .liquid-glass__surface {
  --glass-frost: 0.08 !important;
}

html.lg-js body.dark-mode .glass-header .liquid-glass__surface {
  --glass-frost: 0.05 !important;
}

/* ── 3. BANNERLAR (news1, news2, ads-card1, ads-card2) ──────── */
/* Eski frosted fon va border olib tashlanadi — endi shisha
   komponent chizadi (u blur + displacement + rim beradi).

   MUHIM: bu qoidalar `:not(.glass-header)` bilan chegaralangan.
   Header ham `.liquid-glass-host` sinfini oladi, lekin uning
   `position: fixed` (main.css:61) qiymati BUZILMASLIGI kerak —
   aks holda header oqimga tushib, butun sahifa siljib ketadi. */
.liquid-glass-host:not(.glass-header) {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  position: relative;
}

.liquid-glass-host:not(.glass-header) > *:not(.liquid-glass__surface) {
  position: relative;
  z-index: 1;
}

.liquid-glass-host:not(.glass-header) .liquid-glass__surface {
  --glass-frost: 0.13 !important;
}

body.dark-mode .liquid-glass-host:not(.glass-header) .liquid-glass__surface {
  --glass-frost: 0.09 !important;
}

/* Banner ranglari — eski gradient identifikatsiyasi saqlanadi,
   endi u shisha ustidagi yupqa tint sifatida qo'llanadi. */
.liquid-glass__surface[data-tint="indigo"] {
  background-image: linear-gradient(135deg, rgba(79, 70, 229, 0.16), rgba(79, 70, 229, 0.03));
}

.liquid-glass__surface[data-tint="emerald"] {
  background-image: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(34, 197, 94, 0.03));
}

.liquid-glass__surface[data-tint="amber"] {
  background-image: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.05));
}

.liquid-glass__surface[data-tint="sky"] {
  background-image: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0.05));
}

body.dark-mode .liquid-glass__surface[data-tint="indigo"] {
  background-image: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(99, 102, 241, 0.04));
}

body.dark-mode .liquid-glass__surface[data-tint="emerald"] {
  background-image: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.04));
}

body.dark-mode .liquid-glass__surface[data-tint="amber"] {
  background-image: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.04));
}

body.dark-mode .liquid-glass__surface[data-tint="sky"] {
  background-image: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0.04));
}

/* ── 4. Zaxira (fallback) rejimlar ──────────────────────────── */

/* backdrop-filter umuman yo'q brauzer: shisha o'rniga oq parda
   (matn o'qilishi saqlanadi). */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .liquid-glass-host {
    background: rgba(255, 255, 255, 0.88) !important;
  }

  body.dark-mode .liquid-glass-host {
    background: rgba(15, 23, 42, 0.9) !important;
  }
}

/* ── 5. Harakatni kamaytirish ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .liquid-glass__surface {
    transition: none !important;
  }

  .liquid-glass-host {
    transition: none !important;
  }
}