/**
 * HSM - iOS 26 Liquid Glass style (web)
 * Specular highlight, chuqurlik, gradient qirralar, suyuqlik animatsiyalari
 */

:root {
  --lg-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --lg-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --lg-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lg-duration: 0.32s;
  --lg-duration-fast: 0.2s;
  --lg-duration-hover: 0.4s;
  --lg-highlight: rgba(255, 255, 255, 0.65);
  --lg-highlight-edge: rgba(255, 255, 255, 0.4);
  --lg-border-top: rgba(255, 255, 255, 0.55);
  --lg-border-side: rgba(255, 255, 255, 0.2);
  --lg-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.04);
  --lg-shadow-mid: 0 8px 32px rgba(0, 0, 0, 0.06);
  --lg-shadow-deep: 0 16px 48px rgba(0, 0, 0, 0.08);
  --lg-shadow-hover: 0 20px 56px rgba(0, 0, 0, 0.1);
}

/* --- Asosiy liquid-glass: chuqurlik + specular + gradient qirra --- */
.liquid-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-radius: 24px;
  /* Gradient qirra effekti: yuqori yorug', pastki qorong'u (box-shadow orqali) */
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    var(--lg-shadow-mid),
    var(--lg-shadow-deep),
    inset 0 1px 0 0 var(--lg-highlight),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.2);
  transition: box-shadow var(--lg-duration) var(--lg-ease-smooth),
    background var(--lg-duration) var(--lg-ease-smooth),
    transform var(--lg-duration-hover) var(--lg-ease-smooth),
    backdrop-filter var(--lg-duration) var(--lg-ease-smooth);
}

.liquid-glass:hover {
  background: rgba(255, 255, 255, 0.35);
  box-shadow:
    var(--lg-shadow-deep),
    var(--lg-shadow-hover),
    inset 0 1px 0 0 var(--lg-highlight-edge),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.18),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.25),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* Specular highlight — yuqori chapda nur (Apple Liquid Glass) */
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.12) 40%,
    transparent 65%
  );
  box-shadow: inset 0 0 48px -12px rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 0;
}

.liquid-glass > * {
  position: relative;
  z-index: 1;
}

.btn-liquid-glass,
.liquid-glass-btn,
a.btn-liquid-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform var(--lg-duration) var(--lg-ease-smooth),
    box-shadow var(--lg-duration) var(--lg-ease-smooth),
    background var(--lg-duration) var(--lg-ease-smooth);
  cursor: pointer;
  text-decoration: none;
  color: #1a1a1a;
}

a.btn-liquid-glass:hover,
.btn-liquid-glass:hover,
.liquid-glass-btn:hover {
  background: rgba(255, 255, 255, 0.48);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: #1a1a1a;
  transform: translateY(-1px);
}

.btn-liquid-glass:active,
.liquid-glass-btn:active,
a.btn-liquid-glass:active {
  transform: scale(0.97) translateY(0);
  transition-duration: 0.1s;
}

.btn-liquid-glass:focus-visible,
.liquid-glass-btn:focus-visible,
a.btn-liquid-glass:focus-visible {
  outline: 2px solid rgba(0, 122, 255, 0.6);
  outline-offset: 2px;
}

.liquid-glass-card {
  position: relative;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    var(--lg-shadow-mid),
    var(--lg-shadow-deep),
    inset 0 1px 0 0 var(--lg-highlight),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transition: box-shadow var(--lg-duration) var(--lg-ease-smooth),
    background var(--lg-duration) var(--lg-ease-smooth),
    transform var(--lg-duration-hover) var(--lg-ease-smooth),
    backdrop-filter var(--lg-duration) var(--lg-ease-smooth);
}

/* Suyuqlik effekti — hover da yengil "ko'tarilish" va yorug'lik */
.liquid-glass-card:hover {
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    var(--lg-shadow-deep),
    var(--lg-shadow-hover),
    inset 0 1px 0 0 var(--lg-highlight-edge),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}

.liquid-glass-card:active {
  transform: scale(0.99) translateY(0);
  transition-duration: 0.12s;
}

.liquid-glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 50%
  );
  box-shadow: inset 0 0 40px -10px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 0;
}

.liquid-glass-card > * {
  position: relative;
  z-index: 1;
}

/* --- Til tanlash dropdown (asosiy sahifa — yorug‘ fon uchun) --- */
.liquid-glass-page .language-switcher .dropdown-toggle,
.liquid-glass-page .language-switcher .btn {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--lg-border) !important;
  border-radius: 14px;
  color: #1a1a1a !important;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: transform var(--lg-duration-fast) var(--lg-ease),
    box-shadow var(--lg-duration) var(--lg-ease),
    background var(--lg-duration) var(--lg-ease);
}

.liquid-glass-page .language-switcher .dropdown-toggle:active,
.liquid-glass-page .language-switcher .btn:active {
  transform: scale(0.98);
}

.liquid-glass-page .language-switcher .dropdown-menu {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  min-width: 120px;
  overflow: hidden;
  transition: opacity var(--lg-duration) var(--lg-ease);
}

.liquid-glass-page .language-switcher .dropdown-item {
  border-radius: 8px;
  margin: 2px 8px;
  padding: 8px 12px;
  transition: background var(--lg-duration-fast) var(--lg-ease);
}

.liquid-glass-page .language-switcher .dropdown-item:hover,
.liquid-glass-page .language-switcher .dropdown-item:focus {
  background: rgba(0, 0, 0, 0.06);
}

.liquid-glass-page .language-switcher .dropdown-item.active {
  background: rgba(0, 122, 255, 0.12);
  color: #007aff;
}

[data-theme="dark"] .liquid-glass,
.theme-dark .liquid-glass {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .btn-liquid-glass,
[data-theme="dark"] .liquid-glass-btn,
.theme-dark .btn-liquid-glass,
.theme-dark .liquid-glass-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .liquid-glass-card,
.theme-dark .liquid-glass-card {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.15);
}

/* --- Suyuqlik animatsiyalari: sahifa yuklanganda --- */
@keyframes lg-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lg-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.liquid-glass-card {
  animation: lg-fade-in 0.5s var(--lg-ease-smooth) backwards;
}

.body-content .col:nth-child(1) .liquid-glass-card { animation-delay: 0.06s; }
.body-content .col:nth-child(2) .liquid-glass-card { animation-delay: 0.14s; }
.body-content .col:nth-child(3) .liquid-glass-card { animation-delay: 0.22s; }
.body-content .col:nth-child(4) .liquid-glass-card { animation-delay: 0.3s; }
.body-content .col:nth-child(5) .liquid-glass-card { animation-delay: 0.38s; }
.body-content .col:nth-child(6) .liquid-glass-card { animation-delay: 0.46s; }

.liquid-glass-hero {
  animation: lg-scale-in 0.6s var(--lg-ease-smooth) backwards;
  border-radius: 24px;
}

.liquid-glass-card .text-body,
.liquid-glass-card p {
  color: rgba(26, 26, 46, 0.88);
}

[data-theme="dark"] .liquid-glass-card .text-body,
[data-theme="dark"] .liquid-glass-card p,
[data-theme="dark"] .liquid-glass-card .text-dark {
  color: rgba(230, 230, 245, 0.9);
}

[data-theme="dark"] .liquid-glass-hero .text-dark,
[data-theme="dark"] .liquid-glass-hero h1,
[data-theme="dark"] .liquid-glass-hero p {
  color: rgba(240, 240, 252, 0.95) !important;
}

[data-theme="dark"] .liquid-glass-hero .btn-liquid-glass {
  color: #1a1a2e !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

/* Accessibility: kam harakat so'rovida animatsiyalarni qisqartirish */
@media (prefers-reduced-motion: reduce) {
  .liquid-glass,
  .liquid-glass-card,
  .btn-liquid-glass,
  .liquid-glass-btn,
  a.btn-liquid-glass {
    transition-duration: 0.01ms;
  }
  .liquid-glass-card,
  .liquid-glass-hero {
    animation: none;
  }
  .liquid-glass:hover {
    transform: none;
  }
  .liquid-glass-card:hover {
    transform: none;
  }
  .liquid-glass-card:active {
    transform: none;
  }
  .btn-liquid-glass:active,
  .liquid-glass-btn:active,
  a.btn-liquid-glass:active {
    transform: none;
  }
}