/* ==========================================================================
   TILLABAZAR.UZ — ULTRA-PREMIUM LIQUID GLASS EDITION (v5.5)
   • Full High-Contrast Light Mode (Kunduzgi Rejim) & Royal Dark Mode (Tungi Rejim)
   • Color-Coded Spinning Conic Bottom Navigation Orbs:
     - Home (Icon Only): Sapphire Blue (#38bdf8)
     - Gold (Tilla): Imperial Gold (#d4af37)
     - Reels (Centerpiece): Luxury Video Orb (No LIVE badge)
     - Silver (Kumush): Sterling Silver (#e2e8f0)
     - Cart/Orders (Icon Only): Ruby Red (#f43f5e)
   ========================================================================== */

:root {
  --gold: #d4af37;
  --gold-light: #f9e8b2;
  --gold-bright: #ffe699;
  --gold-dark: #9e7318;
  --silver: #e2e8f0;
  --obsidian: #050609;
  --obsidian-card: rgba(18, 21, 30, 0.65);
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #050609;
  color: #f8fafc;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  scrollbar-width: none;
  min-height: 100vh;
  transition: background-color 0.45s ease, color 0.35s ease;
}

body.theme-light {
  background-color: #f1f5f9;
  color: #0f172a;
}

::-webkit-scrollbar {
  display: none;
}

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   AMBIENT LIQUID GLASS CAUSTIC MESH BACKGROUND
   ========================================================================== */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 12%, rgba(212, 175, 55, 0.19) 0px, transparent 42%),
    radial-gradient(circle at 86% 20%, rgba(226, 232, 240, 0.11) 0px, transparent 40%),
    radial-gradient(circle at 50% 55%, rgba(212, 175, 55, 0.07) 0px, transparent 55%),
    radial-gradient(circle at 20% 88%, rgba(180, 130, 35, 0.14) 0px, transparent 48%),
    linear-gradient(180deg, #040508 0%, #0a0d14 45%, #06070b 100%);
  transition: background 0.5s ease;
}

body.theme-light .bg-mesh {
  background:
    radial-gradient(circle at 14% 12%, rgba(212, 175, 55, 0.16) 0px, transparent 45%),
    radial-gradient(circle at 86% 22%, rgba(56, 189, 248, 0.14) 0px, transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(212, 175, 55, 0.12) 0px, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
}

/* ==========================================================================
   TRUE REFRACTIVE LIQUID GLASS SURFACES (DARK & LIGHT MODE)
   ========================================================================== */
.liquid-glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.035) 55%,
    rgba(212, 175, 55, 0.04) 100%
  );
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 16px 40px -8px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 0 rgba(212, 175, 55, 0.18);
}

body.theme-light .liquid-glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(248, 250, 252, 0.90) 100%
  );
  border: 1px solid rgba(180, 135, 25, 0.32);
  box-shadow:
    0 10px 28px -6px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 0 #ffffff,
    inset 0 -1px 0 0 rgba(212, 175, 55, 0.18);
  color: #0f172a;
}

.liquid-glass-heavy {
  background: linear-gradient(
    160deg,
    rgba(22, 25, 36, 0.88) 0%,
    rgba(10, 12, 18, 0.95) 100%
  );
  backdrop-filter: blur(36px) saturate(210%);
  -webkit-backdrop-filter: blur(36px) saturate(210%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 28px 70px -10px rgba(0, 0, 0, 0.88),
    0 0 40px -10px rgba(212, 175, 55, 0.18),
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 0 rgba(212, 175, 55, 0.25);
}

body.theme-light .liquid-glass-heavy {
  background: linear-gradient(
    160deg,
    #ffffff 0%,
    #f1f5f9 100%
  );
  border: 1.5px solid rgba(180, 135, 25, 0.42);
  box-shadow:
    0 25px 60px -12px rgba(15, 23, 42, 0.22),
    inset 0 1.5px 0 0 #ffffff;
  color: #0f172a;
}

.liquid-card {
  position: relative;
  background: linear-gradient(
    155deg,
    rgba(32, 36, 50, 0.64) 0%,
    rgba(14, 16, 24, 0.84) 100%
  );
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    0 16px 38px -8px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 0 rgba(212, 175, 55, 0.14);
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.38s ease,
    box-shadow 0.38s ease;
}

.liquid-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.02) 32%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}

.liquid-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow:
    0 24px 52px -10px rgba(0, 0, 0, 0.85),
    0 0 28px -4px rgba(212, 175, 55, 0.25),
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 0 rgba(212, 175, 55, 0.35);
}

body.theme-light .liquid-card {
  background: linear-gradient(
    155deg,
    #ffffff 0%,
    #f8fafc 100%
  );
  border: 1px solid rgba(180, 135, 25, 0.30);
  box-shadow:
    0 12px 28px -6px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 0 #ffffff;
  color: #0f172a;
}

body.theme-light .liquid-card:hover {
  border-color: rgba(180, 135, 25, 0.75);
  box-shadow:
    0 20px 42px -8px rgba(180, 135, 25, 0.22),
    inset 0 1px 0 0 #ffffff;
}

/* ==========================================================================
   FULL KUNDUZGI REJIM (LIGHT MODE) HIGH-CONTRAST VISIBILITY RULES
   Ensures all text, labels, inputs, selects, and modals are 100% visible!
   ========================================================================== */
body.theme-light header {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(180, 135, 25, 0.25) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

body.theme-light .liquid-glass:not(.keep-dark-overlay),
body.theme-light .liquid-glass-heavy:not(.keep-dark-overlay),
body.theme-light .liquid-card:not(.keep-dark-overlay) {
  color: #0f172a;
}

body.theme-light .liquid-glass .text-white:not(.keep-white),
body.theme-light .liquid-glass-heavy .text-white:not(.keep-white),
body.theme-light .liquid-card .text-white:not(.keep-white) {
  color: #0f172a !important;
}

body.theme-light .liquid-glass .text-gray-200,
body.theme-light .liquid-glass-heavy .text-gray-200,
body.theme-light .liquid-card .text-gray-200,
body.theme-light .liquid-glass .text-gray-300,
body.theme-light .liquid-glass-heavy .text-gray-300,
body.theme-light .liquid-card .text-gray-300 {
  color: #1e293b !important;
}

body.theme-light .text-gray-400,
body.theme-light .text-gray-500 {
  color: #475569 !important;
}

body.theme-light .liquid-glass .text-\[\#f5e5a3\],
body.theme-light .liquid-glass-heavy .text-\[\#f5e5a3\],
body.theme-light .liquid-card .text-\[\#f5e5a3\],
body.theme-light header .text-\[\#f5e5a3\] {
  color: #7c5305 !important;
}

body.theme-light .liquid-glass .text-\[\#d4af37\],
body.theme-light .liquid-glass-heavy .text-\[\#d4af37\],
body.theme-light .liquid-card .text-\[\#d4af37\] {
  color: #9a6804 !important;
}

body.theme-light .liquid-glass .text-emerald-400,
body.theme-light .liquid-glass-heavy .text-emerald-400,
body.theme-light .liquid-card .text-emerald-400,
body.theme-light .liquid-glass .text-emerald-300,
body.theme-light .liquid-glass-heavy .text-emerald-300 {
  color: #047857 !important;
}

body.theme-light .liquid-glass .text-rose-400,
body.theme-light .liquid-glass-heavy .text-rose-400,
body.theme-light .liquid-card .text-rose-400 {
  color: #be123c !important;
}

body.theme-light .liquid-glass .bg-black\/40,
body.theme-light .liquid-glass-heavy .bg-black\/40,
body.theme-light .liquid-card .bg-black\/40,
body.theme-light .liquid-glass .bg-black\/35,
body.theme-light .liquid-glass-heavy .bg-black\/35,
body.theme-light .liquid-card .bg-black\/35,
body.theme-light .liquid-glass .bg-black\/30,
body.theme-light .liquid-glass-heavy .bg-black\/30,
body.theme-light .liquid-card .bg-black\/30,
body.theme-light .bg-\[\#12141c\],
body.theme-light .bg-\[\#121520\] {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}

body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  color: #0f172a !important;
}

body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color: #64748b !important;
}

body.theme-light .border-white\/10,
body.theme-light .border-white\/15,
body.theme-light .border-white\/20 {
  border-color: rgba(148, 163, 184, 0.38) !important;
}

/* Preserve dark contrast inside Reels video player & image badges even in Light Mode */
body.theme-light .keep-dark-overlay,
body.theme-light .keep-dark-overlay .text-white {
  color: #ffffff !important;
}
body.theme-light .keep-dark-overlay .text-gray-200,
body.theme-light .keep-dark-overlay .text-gray-300 {
  color: #e2e8f0 !important;
}
body.theme-light .keep-dark-overlay .text-\[\#f5e5a3\] {
  color: #f5e5a3 !important;
}
body.theme-light .keep-dark-overlay .text-\[\#d4af37\] {
  color: #d4af37 !important;
}
body.theme-light .keep-dark-overlay .text-emerald-400 {
  color: #34d399 !important;
}

/* ==========================================================================
   LIQUID GOLD BUTTONS
   ========================================================================== */
.btn-liquid-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fbf0c4 0%, #d4af37 42%, #aa7c11 82%, #f6e6a8 100%);
  background-size: 200% 200%;
  color: #080705 !important;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 10px 26px -4px rgba(212, 175, 55, 0.5),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.85),
    inset 0 -1px 1px rgba(0, 0, 0, 0.25);
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-liquid-gold:hover {
  transform: translateY(-1.5px);
  background-position: 100% 50%;
  box-shadow:
    0 16px 34px -4px rgba(212, 175, 55, 0.7),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.95);
}

.btn-liquid-gold:active {
  transform: scale(0.96);
}

/* ==========================================================================
   3D WAVING FLAG LOGOS (SIDE MENU ONLY — UZ, RU, USA)
   ========================================================================== */
@keyframes flag-wave-3d {
  0%, 100% {
    transform: perspective(220px) rotateY(-8deg) rotateZ(-1.5deg) skewY(1.5deg) scale(1);
  }
  25% {
    transform: perspective(220px) rotateY(6deg) rotateZ(1deg) skewY(-2deg) scale(1.03);
  }
  50% {
    transform: perspective(220px) rotateY(10deg) rotateZ(1.5deg) skewY(1.5deg) scale(1);
  }
  75% {
    transform: perspective(220px) rotateY(-5deg) rotateZ(-1deg) skewY(-1.5deg) scale(1.02);
  }
}

@keyframes flag-sheen-wave {
  0% { background-position: -100% 0; }
  50% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.waving-flag-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.waving-flag-btn.flag-active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.32), rgba(212, 175, 55, 0.1));
  border: 1.5px solid #d4af37;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transform: translateY(-2px) scale(1.06);
}

.waving-flag-cloth {
  position: relative;
  width: 34px;
  height: 23px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
  animation: flag-wave-3d 2.6s ease-in-out infinite;
  transform-origin: left center;
}

.waving-flag-cloth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 25%,
    rgba(0, 0, 0, 0.22) 50%,
    rgba(255, 255, 255, 0.25) 75%,
    rgba(0, 0, 0, 0.15) 100%
  );
  background-size: 200% 100%;
  animation: flag-sheen-wave 2.6s ease-in-out infinite;
  pointer-events: none;
}

/* ==========================================================================
   ANIMATED CELESTIAL DAY / NIGHT (KUN / TUN) TOGGLE SWITCH
   ========================================================================== */
.celestial-switch {
  position: relative;
  width: 74px;
  height: 36px;
  border-radius: 9999px;
  padding: 3px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
}

.celestial-switch.is-night {
  background: linear-gradient(135deg, #070b19 0%, #161f3d 55%, #251c38 100%);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.25), inset 0 2px 5px rgba(0, 0, 0, 0.75);
}

.celestial-switch.is-day {
  background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 55%, #fde047 100%);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

.celestial-orb {
  position: relative;
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.45s ease, box-shadow 0.45s ease;
}

.celestial-switch.is-night .celestial-orb {
  transform: translateX(0px) rotate(0deg);
  background: radial-gradient(circle at 35% 30%, #fef9c3 0%, #fde047 45%, #ca8a04 100%);
  box-shadow: 0 0 14px #fde047, inset -3px -2px 4px rgba(0, 0, 0, 0.35);
}

.celestial-switch.is-day .celestial-orb {
  transform: translateX(37px) rotate(180deg);
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fde047 45%, #f59e0b 100%);
  box-shadow: 0 0 18px #f59e0b, 0 0 28px #fde047;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

.star-dot {
  position: absolute;
  background: #ffffff;
  border-radius: 9999px;
  animation: star-twinkle 1.8s ease-in-out infinite;
}

@keyframes cloud-float {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(4px); }
}

.cloud-puff {
  position: absolute;
  animation: cloud-float 3s ease-in-out infinite;
}

/* ==========================================================================
   VISIONOS / IOS 18 LUXURY LIQUID GLASS FLOATING BOTTOM NAVIGATION DOCK
   • Smooth Organic Breathing Aura, Specular Shimmer & Gentle Levitation
   • Zero harsh spinning wheels — ultra-clean in Dark Mode & Light Mode!
   ========================================================================== */
@keyframes dock-ambient-breathe {
  0%, 100% {
    box-shadow:
      0 22px 50px -8px rgba(0, 0, 0, 0.92),
      0 0 28px -6px rgba(212, 175, 55, 0.16),
      inset 0 1px 1px rgba(255, 255, 255, 0.24),
      inset 0 -1px 1px rgba(212, 175, 55, 0.14);
  }
  50% {
    box-shadow:
      0 26px 58px -6px rgba(0, 0, 0, 0.96),
      0 0 36px -4px rgba(212, 175, 55, 0.26),
      inset 0 1px 1.5px rgba(255, 255, 255, 0.34),
      inset 0 -1px 1.5px rgba(212, 175, 55, 0.22);
  }
}

@keyframes nav-icon-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-2.2px) scale(1.04); }
}

@keyframes nav-sheen-glide {
  0% { transform: translateX(-140%) skewX(-25deg); opacity: 0; }
  35% { opacity: 0.55; }
  70% { transform: translateX(180%) skewX(-25deg); opacity: 0; }
  100% { transform: translateX(180%) skewX(-25deg); opacity: 0; }
}

@keyframes reels-jewel-breathe {
  0%, 100% {
    transform: translateY(0px) scale(1);
    box-shadow:
      0 14px 32px -4px rgba(0, 0, 0, 0.85),
      0 0 24px rgba(212, 175, 55, 0.42),
      inset 0 2px 3px rgba(255, 255, 255, 0.45),
      inset 0 -2px 4px rgba(212, 175, 55, 0.35);
  }
  50% {
    transform: translateY(-3.5px) scale(1.035);
    box-shadow:
      0 20px 38px -4px rgba(0, 0, 0, 0.9),
      0 0 34px rgba(212, 175, 55, 0.68),
      0 0 18px rgba(244, 63, 94, 0.32),
      inset 0 2px 4px rgba(255, 255, 255, 0.65),
      inset 0 -2px 5px rgba(212, 175, 55, 0.5);
  }
}

.liquid-nav-dock {
  background: linear-gradient(
    165deg,
    rgba(24, 28, 42, 0.82) 0%,
    rgba(10, 12, 20, 0.92) 60%,
    rgba(16, 18, 28, 0.90) 100%
  );
  backdrop-filter: blur(34px) saturate(210%);
  -webkit-backdrop-filter: blur(34px) saturate(210%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  animation: dock-ambient-breathe 4.5s ease-in-out infinite;
}

body.theme-light .liquid-nav-dock {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(241, 245, 249, 0.92) 100%
  );
  border: 1px solid rgba(180, 135, 25, 0.32);
  box-shadow:
    0 20px 45px rgba(15, 23, 42, 0.14),
    inset 0 1.5px 1px #ffffff;
  animation: none;
}

.liquid-orb {
  position: relative;
  width: 56px;
  height: 54px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.20);
  flex-shrink: 0;
}

.liquid-orb::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
  animation: nav-sheen-glide 5.5s ease-in-out infinite;
  pointer-events: none;
}

body.theme-light .liquid-orb {
  background: linear-gradient(
    145deg,
    #ffffff 0%,
    #f1f5f9 100%
  );
  border: 1px solid rgba(203, 213, 225, 0.85);
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.08),
    inset 0 1.5px 2px #ffffff;
}

.liquid-orb .nav-float-icon {
  animation: nav-icon-float 3.2s ease-in-out infinite;
}

/* 1. SAPPHIRE BLUE CRYSTAL (Bosh menyu / Home) */
.liquid-orb.orb-color-blue {
  background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.45) 80%);
  border-color: rgba(56, 189, 248, 0.32);
}
.liquid-orb.orb-active-blue {
  transform: translateY(-5px) scale(1.06);
  background: radial-gradient(circle at 50% 15%, rgba(56, 189, 248, 0.36), rgba(14, 165, 233, 0.14) 85%);
  border-color: rgba(125, 211, 252, 0.85);
  box-shadow:
    0 12px 26px -4px rgba(14, 165, 233, 0.48),
    0 0 18px rgba(56, 189, 248, 0.35),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.55);
}

/* 2. IMPERIAL GOLD CRYSTAL (Tilla) */
.liquid-orb.orb-color-gold {
  background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.20), rgba(20, 18, 12, 0.45) 80%);
  border-color: rgba(212, 175, 55, 0.35);
}
.liquid-orb.orb-active-gold {
  transform: translateY(-5px) scale(1.06);
  background: radial-gradient(circle at 50% 15%, rgba(212, 175, 55, 0.38), rgba(180, 130, 25, 0.16) 85%);
  border-color: rgba(249, 232, 178, 0.9);
  box-shadow:
    0 12px 26px -4px rgba(212, 175, 55, 0.50),
    0 0 18px rgba(212, 175, 55, 0.38),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.55);
}

/* 3. PLATINUM SILVER CRYSTAL (Kumush) */
.liquid-orb.orb-color-silver {
  background: radial-gradient(circle at 50% 0%, rgba(226, 232, 240, 0.20), rgba(18, 22, 32, 0.45) 80%);
  border-color: rgba(226, 232, 240, 0.32);
}
.liquid-orb.orb-active-silver {
  transform: translateY(-5px) scale(1.06);
  background: radial-gradient(circle at 50% 15%, rgba(241, 245, 249, 0.36), rgba(148, 163, 184, 0.16) 85%);
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 12px 26px -4px rgba(148, 163, 184, 0.45),
    0 0 18px rgba(226, 232, 240, 0.38),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.65);
}

/* 4. RUBY CRIMSON CRYSTAL (Savat / Buyurtmalar) */
.liquid-orb.orb-color-red {
  background: radial-gradient(circle at 50% 0%, rgba(244, 63, 94, 0.20), rgba(28, 14, 20, 0.45) 80%);
  border-color: rgba(244, 63, 94, 0.35);
}
.liquid-orb.orb-active-red {
  transform: translateY(-5px) scale(1.06);
  background: radial-gradient(circle at 50% 15%, rgba(244, 63, 94, 0.38), rgba(225, 29, 72, 0.16) 85%);
  border-color: rgba(253, 164, 175, 0.9);
  box-shadow:
    0 12px 26px -4px rgba(244, 63, 94, 0.50),
    0 0 18px rgba(244, 63, 94, 0.38),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.55);
}

body.theme-light .liquid-orb.orb-color-blue {
  background: linear-gradient(145deg, #ffffff 0%, #e0f2fe 100%);
  border-color: rgba(14, 165, 233, 0.4);
}
body.theme-light .liquid-orb.orb-color-gold {
  background: linear-gradient(145deg, #ffffff 0%, #fef3c7 100%);
  border-color: rgba(212, 175, 55, 0.5);
}
body.theme-light .liquid-orb.orb-color-silver {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  border-color: rgba(100, 116, 139, 0.4);
}
body.theme-light .liquid-orb.orb-color-red {
  background: linear-gradient(145deg, #ffffff 0%, #ffe4e6 100%);
  border-color: rgba(244, 63, 94, 0.4);
}

/* CENTERPIECE ELEVATED REELS JEWEL BUTTON (BETWEEN TILLA & KUMUSH) */
.liquid-orb-reels {
  position: relative;
  width: 66px;
  height: 66px;
  margin-top: -20px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  background: linear-gradient(
    145deg,
    rgba(42, 34, 24, 0.95) 0%,
    rgba(18, 16, 24, 0.98) 60%,
    rgba(38, 20, 30, 0.95) 100%
  );
  border: 1.5px solid rgba(212, 175, 55, 0.78);
  animation: reels-jewel-breathe 3.2s ease-in-out infinite;
}

.liquid-orb-reels::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 244, 200, 0.26),
    transparent
  );
  animation: nav-sheen-glide 4.2s ease-in-out infinite;
  pointer-events: none;
}

.liquid-orb-reels:hover {
  transform: translateY(-5px) scale(1.07);
  border-color: #fde68a;
}

.liquid-orb-reels:active {
  transform: scale(0.94);
}

.liquid-orb-reels.orb-reels-active {
  transform: translateY(-6px) scale(1.09);
  border-color: #ffffff;
  box-shadow:
    0 20px 44px rgba(212, 175, 55, 0.75),
    0 0 25px rgba(244, 63, 94, 0.5),
    inset 0 2px 5px rgba(255, 255, 255, 0.8);
}

.reels-cinema-icon {
  animation: nav-icon-float 2.6s ease-in-out infinite;
}

/* ==========================================================================
   FULL-SCREEN VERTICAL REELS SHOWCASE & CINEMATIC MOTION
   ========================================================================== */
@keyframes reel-ken-burns {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.14) translate(-1.5%, -1.5%); }
  100% { transform: scale(1) translate(0, 0); }
}

.reel-cinematic-img {
  animation: reel-ken-burns 11s ease-in-out infinite;
  will-change: transform;
}

@keyframes eq-bar {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

.eq-bar-1 { animation: eq-bar 0.6s ease-in-out infinite; }
.eq-bar-2 { animation: eq-bar 0.45s ease-in-out infinite 0.15s; }
.eq-bar-3 { animation: eq-bar 0.7s ease-in-out infinite 0.3s; }

@keyframes heart-burst {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(1.35) rotate(10deg); opacity: 1; }
  80% { transform: translate(-50%, -65%) scale(1.1) rotate(0deg); opacity: 0.9; }
  100% { transform: translate(-50%, -85%) scale(0.8); opacity: 0; }
}

.reel-heart-pop {
  position: absolute;
  left: 50%;
  top: 45%;
  pointer-events: none;
  z-index: 60;
  animation: heart-burst 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   TILLABAZAR "GOLD EDITION" WIDE ROYAL BRAND STAGE, FALLING SKY STARS & GOLD DUST
   ("yuqoridagi TillaBazar yozuvi... sal yonga qarab kengaytirib ko'rinarli qib yanayam animatsion effekt qoshib chiroyli gold edition rangda atrofida turli tilla zarlar yogilib turganday... orqasida tilla yulduzlar osmondan tushganday animatsiyasi bolsin")
   ========================================================================== */
@keyframes gold-edition-sweep {
  0% {
    background-position: 0% 50%;
    filter: drop-shadow(0 2px 10px rgba(255, 204, 51, 0.45));
  }
  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 3px 18px rgba(255, 223, 100, 0.88));
  }
  100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 2px 10px rgba(255, 204, 51, 0.45));
  }
}

@keyframes sky-star-fall {
  0% {
    transform: translateY(-16px) translateX(0px) scale(0.45) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.92;
  }
  100% {
    transform: translateY(54px) translateX(6px) scale(1.1) rotate(180deg);
    opacity: 0;
  }
}

@keyframes gold-zar-fall {
  0% {
    transform: translateY(-12px) translateX(-3px) scale(0.6);
    opacity: 0;
  }
  25% {
    opacity: 0.95;
  }
  75% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(52px) translateX(4px) scale(0.95);
    opacity: 0;
  }
}

.gold-edition-stage {
  position: relative;
  overflow: hidden;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(25, 20, 8, 0.88) 0%,
    rgba(48, 35, 10, 0.52) 50%,
    rgba(20, 16, 6, 0.88) 100%
  );
  border: 1.5px solid rgba(255, 215, 90, 0.52);
  box-shadow:
    0 8px 28px -6px rgba(212, 175, 55, 0.42),
    inset 0 1px 0 0 rgba(255, 245, 200, 0.45),
    inset 0 -1px 0 0 rgba(212, 175, 55, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gold-edition-stage:hover {
  transform: translateY(-1px) scale(1.01);
  border-color: rgba(255, 226, 115, 0.88);
  box-shadow:
    0 12px 34px -4px rgba(255, 204, 51, 0.58),
    inset 0 1px 0 0 rgba(255, 250, 220, 0.65);
}

body.theme-light .gold-edition-stage {
  background: linear-gradient(
    135deg,
    rgba(24, 19, 8, 0.95) 0%,
    rgba(52, 38, 10, 0.90) 52%,
    rgba(24, 19, 8, 0.95) 100%
  );
  border: 1.5px solid rgba(212, 175, 55, 0.75);
  box-shadow:
    0 8px 24px -4px rgba(180, 135, 25, 0.38),
    inset 0 1px 0 0 rgba(255, 240, 180, 0.5);
}

/* Horizontally Expanded 3D Metallic "TILLABAZAR" Title */
.gold-edition-title {
  display: inline-block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transform: scaleX(1.12);
  transform-origin: left center;
  background: linear-gradient(
    110deg,
    #bd8c2a 0%,
    #ffe694 18%,
    #ffffff 32%,
    #ffd700 48%,
    #c69214 64%,
    #fff6cc 80%,
    #ffd700 92%,
    #b58016 100%
  );
  background-size: 280% 280%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-edition-sweep 3.8s ease-in-out infinite;
}

/* "✦ GOLD EDITION ✦" Sub-ribbon Badge */
.gold-edition-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1.5px 8px;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.28) 0%, rgba(255, 223, 100, 0.45) 50%, rgba(212, 175, 55, 0.28) 100%);
  border: 1px solid rgba(255, 224, 112, 0.65);
  color: #fff3b8 !important;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

/* Falling Golden Sky Stars Behind Text */
.gold-sky-star {
  position: absolute;
  top: -10px;
  pointer-events: none;
  color: #ffe57f;
  text-shadow: 0 0 8px #ffd700, 0 0 14px rgba(255, 215, 0, 0.95);
  z-index: 1;
  animation: sky-star-fall var(--star-dur, 3.2s) linear infinite;
  animation-delay: var(--star-delay, 0s);
  font-size: var(--star-size, 10px);
}

/* Raining Fine Gold Dust ("Tilla zarlar") Around the Logo */
.gold-zar-particle {
  position: absolute;
  top: -8px;
  width: var(--zar-size, 3px);
  height: var(--zar-size, 3px);
  border-radius: 9999px;
  background: radial-gradient(circle, #ffffff 0%, #ffe066 45%, #d4af37 100%);
  box-shadow: 0 0 6px #ffd700, 0 0 10px rgba(255, 215, 0, 0.9);
  pointer-events: none;
  z-index: 1;
  animation: gold-zar-fall var(--zar-dur, 2.5s) ease-in infinite;
  animation-delay: var(--zar-delay, 0s);
}

.premium-gold-dust {
  background: linear-gradient(
    135deg,
    #b9935a 0%,
    #e7c996 22%,
    #fff1c5 48%,
    #ffffff 60%,
    #f9e4b7 74%,
    #d4af37 90%,
    #b9935a 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-edition-sweep 5s ease-in-out infinite;
}

body.theme-light .premium-gold-dust {
  background: linear-gradient(
    135deg,
    #785109 0%,
    #b4831e 28%,
    #d4af37 52%,
    #855806 78%,
    #5c3b02 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes slide-up {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up {
  animation: slide-up 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in {
  animation: fade-in 0.25s ease-out;
}

@keyframes fly-to-cart {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.85));
  }
  35% {
    transform: translate(var(--mid-x), var(--mid-y)) scale(1.22) rotate(35deg);
    opacity: 0.95;
    filter: drop-shadow(0 0 25px rgba(212, 175, 55, 1));
  }
  100% {
    transform: translate(var(--dest-x), var(--dest-y)) scale(0.15) rotate(240deg);
    opacity: 0.1;
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0));
  }
}

.fly-item {
  position: fixed;
  animation: fly-to-cart 0.9s cubic-bezier(0.25, 1, 0.25, 1) forwards;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
}

@keyframes cart-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.32) rotate(-8deg); }
  60% { transform: scale(1.32) rotate(8deg); }
  80% { transform: scale(0.95) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.animate-cart-pop {
  animation: cart-pop 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-conic {
  animation: spin-slow 2.6s linear infinite;
}

.detail-image-container {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.detail-image-container.zoomed img {
  transform: scale(2.15);
  cursor: zoom-out;
}
.detail-image-container img {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.leaflet-container {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-radius: 22px;
  z-index: 10;
}

@keyframes radar-pulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.step-active-dot {
  animation: radar-pulse 2s infinite;
}

@keyframes shimmer-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.shimmer-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shimmer-sweep 2.4s infinite;
}

/* ==========================================================================
   PRODUCT CARD CORNER RIBBONS ("Rasm chetida belbog'day ko'rinib tursin")
   ========================================================================== */
.product-corner-ribbon {
  position: absolute;
  top: 16px;
  left: -34px;
  width: 132px;
  padding: 4px 0;
  transform: rotate(-45deg);
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 15;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.product-corner-ribbon.ribbon-discount {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 50%, #f59e0b 100%);
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.product-corner-ribbon.ribbon-new {
  background: linear-gradient(135deg, #10b981 0%, #059669 55%, #d4af37 100%);
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   ANTI-COPY & INTELLECTUAL PROPERTY PROTECTION (LM7 GROUP • 2026)
   ========================================================================== */
body,
body *:not(input):not(textarea):not(select) {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

img,
video,
a {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}