/* =====================================================================
   OZON — Liquid Glass materiallari
   .glass        — kartalar (asosiy material)
   .glass-thin   — panel/bar/navigatsiya (ingichka, fonni ko'proq ko'rsatadi)
   .glass-thick  — modal, drawer, palitra, menyu (deyarli shaffof emas, o'qish uchun)
   .glass-tint   — crimson tusli: asosiy CTA va faol navigatsiya
   .glass-refract— qo'shimcha: Chromium'da haqiqiy sinish (html.lg-refract)
   Ichki qatlam: ::before = nurli chegara (rim), ::after = ko'rsatkich ortidan
   yuradigan yaltirash (sheen). Shu sabab glass elementlarida ::before/::after
   boshqa maqsadda ishlatilmaydi.
   ===================================================================== */

.glass, .glass-thin, .glass-thick, .glass-tint {
  --g-fill: var(--glass-fill);
  --g-blur: var(--glass-blur);
  --g-sat: var(--glass-sat);
  --g-rim: var(--glass-rim);
  --g-inset: var(--glass-inset);
  --g-shadow: var(--glass-shadow);
  --g-sheen: var(--glass-sheen);
  --g-radius: var(--r-lg);
  position: relative;
  isolation: isolate;
  border-radius: var(--g-radius);
  background: var(--glass-highlight), var(--g-fill);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow: var(--g-inset), var(--glass-edge), var(--g-shadow);
  color: var(--ink);
}

.glass-thin {
  --g-fill: var(--glass-thin-fill);
  --g-blur: 22px;
  --g-sat: 185%;
  --g-shadow: var(--glass-shadow-thin);
}
.glass-thick {
  --g-fill: var(--glass-thick-fill);
  --g-blur: 40px;
  --g-sat: 160%;
  --g-shadow: var(--glass-shadow-thick);
  --g-radius: var(--r-xl);
}
.glass-tint {
  --g-fill: var(--glass-tint-fill);
  --g-rim: var(--glass-rim-tint);
  --g-inset: var(--glass-inset-tint);
  --g-shadow: var(--glass-shadow-tint);
  --g-sheen: var(--glass-sheen-tint);
  --g-blur: 18px;
  --g-sat: 160%;
  color: var(--on-brand);
}
.glass-tint :where(.muted, .eyebrow) { color: rgba(255, 255, 255, .82); }

/* Nurli chegara (gradient rim) — mask-composite usuli */
.glass::before, .glass-thin::before, .glass-thick::before, .glass-tint::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: var(--g-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Ko'rsatkich ortidan yuruvchi yaltirash (JS: --mx/--my, .is-lit) */
.glass::after, .glass-thin::after, .glass-thick::after, .glass-tint::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), var(--g-sheen), transparent 42%);
  opacity: 0;
  transition: opacity var(--dur-4) var(--ease-out);
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.glass-tint::after { mix-blend-mode: screen; }
.is-lit::after { opacity: 1; }
.glass-thin.is-lit::after { opacity: .7; }
html[data-theme="dark"] .is-lit::after { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .is-lit::after { mix-blend-mode: screen; } }

/* Kontent avtomatik ravishda rim va sheen ustida turadi: pseudo-elementlar
   z-index:-1 da, element esa isolation:isolate bilan alohida qatlam. */

/* Interaktiv glass (karta-havola, tugma) */
.glass.is-interactive, a.glass, button.glass {
  transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out);
  will-change: transform;
  cursor: pointer;
}
@media (hover: hover) {
  .glass.is-interactive:hover, a.glass:hover, button.glass:hover {
    --g-fill: var(--glass-fill-hover);
    --g-shadow: var(--glass-shadow-hover);
    transform: translateY(-2px);
  }
}
.glass.is-interactive:active, a.glass:active, button.glass:active { transform: translateY(0) scale(.985); transition-duration: var(--dur-1); }

/* Ichki "inset" plitka — glass ichidagi kichik blok (blur'siz, arzon) */
.glass-inset {
  background: var(--glass-inner-fill);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .5);
}
html[data-theme="dark"] .glass-inset { box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .04); }

/* Qattiqroq dumaloqlik variantlari */
.g-r-md { --g-radius: var(--r-md); }
.g-r-xl { --g-radius: var(--r-xl); }
.g-r-2xl { --g-radius: var(--r-2xl); }
.g-r-pill { --g-radius: var(--r-pill); }

/* ---------------------------------------------------------------------
   Haqiqiy sinish — faqat Chromium (main.js html.lg-refract qo'shadi).
   Kichik blur + SVG displacement: orqadagi kontent "suyuq shisha"dan
   o'tgandek egiladi. Safari/Firefox — oddiy blur (yuqoridagi qoidalar).
   --------------------------------------------------------------------- */
html.lg-refract .glass-refract {
  -webkit-backdrop-filter: url(#lg-refract) blur(var(--g-refract-blur, 6px)) saturate(var(--g-sat)) brightness(var(--g-refract-bright, 1.04));
  backdrop-filter: url(#lg-refract) blur(var(--g-refract-blur, 6px)) saturate(var(--g-sat)) brightness(var(--g-refract-bright, 1.04));
}
html.lg-refract .glass-refract.glass-thin { --g-refract-blur: 12px; }
html.lg-refract .glass-refract.glass-thick { --g-refract-blur: 16px; --g-refract-bright: 1.02; }
html.lg-refract .glass-refract.refract-clear { --g-refract-blur: 1.5px; }
html.lg-refract .glass-refract.refract-liquid {
  -webkit-backdrop-filter: url(#lg-refract-liquid) blur(var(--g-refract-blur, 8px)) saturate(var(--g-sat));
  backdrop-filter: url(#lg-refract-liquid) blur(var(--g-refract-blur, 8px)) saturate(var(--g-sat));
}

/* ---------------------------------------------------------------------
   Shaffoflikni kamaytirish / backdrop-filter yo'q / foydalanuvchi "solid"
   tanlagan → to'liq qattiq sirt, yetarli kontrast. (boot-theme.js qo'yadi)
   --------------------------------------------------------------------- */
html.glass-solid .glass,
html.glass-solid .glass-thin,
html.glass-solid .glass-thick {
  --g-fill: linear-gradient(var(--surface-solid), var(--surface-solid));
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--surface-solid);
  box-shadow: 0 0 0 1px var(--line-2), var(--g-shadow);
}
html.glass-solid .glass-thin { background: var(--surface-solid-2); }
html.glass-solid .glass-tint {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--brand);
}
html.glass-solid .glass::before, html.glass-solid .glass-thin::before, html.glass-solid .glass-thick::before { display: none; }
html.glass-solid .glass::after, html.glass-solid .glass-thin::after, html.glass-solid .glass-thick::after, html.glass-solid .glass-tint::after { display: none; }
html.glass-solid .scene-blob { opacity: .55; }
html.glass-solid .glass-inset { background: var(--surface-solid-2); }

@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-thin, .glass-thick {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--surface-solid);
    box-shadow: 0 0 0 1px var(--line-2), var(--g-shadow);
  }
  .glass-tint { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--brand); }
  .glass::after, .glass-thin::after, .glass-thick::after, .glass-tint::after { display: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-thin, .glass-thick { background: var(--surface-solid); }
}

/* Majburiy ranglar (Windows High Contrast) */
@media (forced-colors: active) {
  .glass, .glass-thin, .glass-thick, .glass-tint { border: 1px solid CanvasText; background: Canvas; }
  .glass::before, .glass-thin::before, .glass-thick::before, .glass-tint::before,
  .glass::after, .glass-thin::after, .glass-thick::after, .glass-tint::after { display: none; }
}

/* Mobil qurilmada blur yengilroq (unumdorlik) */
@media (max-width: 899px) and (pointer: coarse) {
  .glass { --g-blur: 18px; }
  .glass-thin { --g-blur: 18px; }
}