/* ============================================================
   glass.css — MOSP.uz «shaffof / matoviy shisha» (glassmorphism) qatlami
   style.css dan KEYIN yuklanadi. Oq (kunduz) va qora (tungi) rejimni to'liq
   qo'llab-quvvatlaydi. Faqat ko'rinishni bezaydi — mavjud tuzilmani buzmaydi.
   ============================================================ */

/* ---------- Shisha tokenlari (kunduzgi) ---------- */
:root{
  --glass-bg:      rgba(255,255,255,.62);
  --glass-bg-strong: rgba(255,255,255,.80);
  --glass-brd:     rgba(255,255,255,.70);
  --glass-brd-soft:rgba(21,40,46,.10);
  --glass-blur:    16px;
  --glass-shadow:  0 8px 32px rgba(16,40,46,.12), inset 0 1px 0 rgba(255,255,255,.55);
  --glass-shadow-lg: 0 18px 50px rgba(16,40,46,.18), inset 0 1px 0 rgba(255,255,255,.6);
  /* Header — OQ matoviy shisha */
  --glass-head:    rgba(255,255,255,.72);
  --glass-head-brd:rgba(21,40,46,.10);
  --glass-head-ink:#15282e;               /* header matni — quyuq */
  --glass-head-muted:rgba(21,40,46,.60);
  --glass-pill:    rgba(21,40,46,.06);     /* header tabletka foni */
  --glass-pill-brd:rgba(21,40,46,.12);
  --glass-pill-on: var(--teal);
  --glass-pill-on-ink:#ffffff;
  --aura-1: rgba(43,182,201,.10);
  --aura-2: rgba(245,158,11,.07);
}
/* ---------- Shisha tokenlari (tungi) ---------- */
:root[data-theme="dark"]{
  --glass-bg:      rgba(22,36,42,.55);
  --glass-bg-strong: rgba(22,36,42,.76);
  --glass-brd:     rgba(255,255,255,.12);
  --glass-brd-soft:rgba(255,255,255,.08);
  --glass-shadow:  0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --glass-shadow-lg: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  /* Header — quyuq matoviy shisha */
  --glass-head:    rgba(14,24,29,.78);
  --glass-head-brd:rgba(255,255,255,.10);
  --glass-head-ink:#e9f1f3;
  --glass-head-muted:rgba(233,241,243,.65);
  --glass-pill:    rgba(255,255,255,.08);
  --glass-pill-brd:rgba(255,255,255,.14);
  --glass-pill-on: var(--teal);
  --glass-pill-on-ink:#06222a;
  --aura-1: rgba(43,182,201,.08);
  --aura-2: rgba(245,176,53,.05);
}

/* ---------- Fon «aurora» — juda yumshoq, tepada seam bermaydi ---------- */
body{ position:relative; background:var(--bg); }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 40% at 8% 0%, var(--aura-1), transparent 70%),
    radial-gradient(45% 38% at 95% 2%, var(--aura-2), transparent 70%);
  background-attachment:fixed;
}

/* ============ HEADER (OQ / matoviy) ============ */
.site-head{
  background:var(--glass-head) !important;
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  backdrop-filter:saturate(140%) blur(18px);
  border-bottom:1px solid var(--glass-head-brd);
  box-shadow:0 4px 22px rgba(16,40,46,.10);
}
/* Header matni/logotipi — rejimga mos rang */
.site-head .brand, .site-head .brand-name, .site-head .brand-mark{ color:var(--glass-head-ink) !important; }
.site-head .brand-mark{ filter:none; }
/* Qidiruv qutisi — ozgina ramka bilan ajralib tursin */
.site-head .search{ border:1px solid var(--glass-head-brd); }

/* Header ichidagi «tabletka» tugmalar — matoviy shisha */
.lang-switch,
.cur-switch,
.head-tools .btn-ghost,
.theme-btn,
.fav-nav,
.msg-btn,
.user-btn,
.country-switch>summary{
  background:var(--glass-pill) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid var(--glass-pill-brd) !important;
  color:var(--glass-head-ink) !important;
  box-shadow:none;
  transition:transform .14s ease, background .18s ease, box-shadow .18s ease;
}
.head-tools .btn-ghost .shops-label,
.head-tools .btn-ghost,
.user-btn .user-name,
.user-btn .caret{ color:var(--glass-head-ink) !important; }
.lang-switch a, .cur-switch a{ color:var(--glass-head-muted) !important; }
.lang-switch a.on, .cur-switch a.on{ background:var(--glass-pill-on) !important; color:var(--glass-pill-on-ink) !important; }
.head-tools .btn-ghost:hover,
.theme-btn:hover,
.fav-nav:hover,
.msg-btn:hover,
.user-btn:hover,
.country-switch>summary:hover{
  background:rgba(43,182,201,.14) !important;
  transform:translateY(-1px);
}
/* «E'lon joylash» tugmasi — ajralib tursin (amber) */
.head-tools .btn-accent.btn-post{
  background:linear-gradient(135deg, #f7b733, #d97f06) !important;
  color:#3b2600 !important; border:1px solid rgba(217,127,6,.4) !important;
  box-shadow:0 6px 18px rgba(217,127,6,.30);
}
.head-tools .btn-accent.btn-post .post-label,
.head-tools .btn-accent.btn-post .plus{ color:#3b2600 !important; }
/* Reklama tugmasi (btn-adv) ham header tabletkasi ko'rinishida */
.head-tools .head-adv{ background:var(--glass-pill) !important; color:var(--glass-head-ink) !important;
  border:1px solid var(--glass-pill-brd) !important; }
.head-tools .head-adv .shops-label{ color:var(--glass-head-ink) !important; }

/* ============ TIL DROPDOWN ============ */
.lang-dd{ position:relative; }
.lang-dd>summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  padding:8px 11px; border-radius:10px; font-weight:800; font-size:.86rem; white-space:nowrap;
  background:var(--glass-pill) !important; border:1px solid var(--glass-pill-brd) !important;
  color:var(--glass-head-ink) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .14s ease, background .18s ease;
}
.lang-dd>summary::-webkit-details-marker{ display:none; }
.lang-dd>summary:hover{ background:rgba(43,182,201,.14) !important; transform:translateY(-1px); }
.lang-dd[open]>summary{ background:rgba(43,182,201,.16) !important; }
.lang-dd .cs-caret{ opacity:.75; font-size:.8em; }
.lang-menu{ width:min(220px,74vw); }

/* ============ VALYUTA DROPDOWN ============ */
.cur-dd{ position:relative; }
.cur-dd>summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  padding:8px 11px; border-radius:10px; font-weight:800; font-size:.9rem; white-space:nowrap;
  background:var(--glass-pill) !important; border:1px solid var(--glass-pill-brd) !important;
  color:var(--glass-head-ink) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .14s ease, background .18s ease;
}
.cur-dd>summary::-webkit-details-marker{ display:none; }
.cur-dd>summary:hover{ background:rgba(43,182,201,.14) !important; transform:translateY(-1px); }
.cur-dd[open]>summary{ background:rgba(43,182,201,.16) !important; }
.cur-dd .cs-caret{ opacity:.75; font-size:.8em; }
.cur-menu{ width:min(220px,74vw); }
.cur-menu .cs-item .cs-cur{ min-width:2.4em; font-weight:800; color:var(--teal); }

/* ============ DAVLAT ALMASHTIRGICH ============ */
.country-switch{ position:relative; }
.country-switch>summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:10px; font-weight:800; font-size:.86rem; white-space:nowrap;
}
.country-switch>summary::-webkit-details-marker{ display:none; }
.country-switch .cs-flag{ font-size:1.05rem; line-height:1; }
.country-switch .cs-name{ max-width:9ch; overflow:hidden; text-overflow:ellipsis; }
.country-switch .cs-caret{ opacity:.8; font-size:.8em; }
.country-switch[open]>summary{ background:rgba(43,182,201,.16) !important; }
.cs-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:70;
  width:min(280px, 78vw); max-height:60vh; overflow-y:auto;
  padding:8px; border-radius:16px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:saturate(170%) blur(var(--glass-blur));
  backdrop-filter:saturate(170%) blur(var(--glass-blur));
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow-lg);
  animation:glassPop .16s ease;
}
.cs-menu-title{ font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); padding:6px 10px 8px; }
.cs-item{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px;
  color:var(--ink); font-weight:700; font-size:.92rem; text-decoration:none;
  transition:background .14s ease;
}
.cs-item .cs-flag{ font-size:1.15rem; }
.cs-item:hover{ background:rgba(43,182,201,.14); }
.cs-item.on{ background:rgba(43,182,201,.20); }
.cs-item .cs-check{ margin-left:auto; color:var(--teal); font-weight:900; }

@keyframes glassPop{ from{ opacity:0; transform:translateY(-6px) scale(.98);} to{ opacity:1; transform:none; } }

/* ============ FOYDALANUVCHI MENYUSI (dropdown) ============ */
.user-drop{
  background:var(--glass-bg-strong) !important;
  -webkit-backdrop-filter:saturate(170%) blur(var(--glass-blur));
  backdrop-filter:saturate(170%) blur(var(--glass-blur));
  border:1px solid var(--glass-brd) !important;
  box-shadow:var(--glass-shadow-lg) !important;
  border-radius:16px !important;
}
.user-drop a{ border-radius:10px; transition:background .14s ease; }
.user-drop a:hover{ background:rgba(43,182,201,.14) !important; }

/* ============ KARTALAR (e'lon, magazin, kabinet) ============ */
.card,
.arow,
.shop-card,
.cab-card,
.spec, .desc, .seller-box, .login-card, .admin-bar,
.stat, .plan-card, .offer-box{
  background:var(--glass-bg) !important;
  -webkit-backdrop-filter:saturate(150%) blur(var(--glass-blur));
  backdrop-filter:saturate(150%) blur(var(--glass-blur));
  border:1px solid var(--glass-brd) !important;
  box-shadow:var(--glass-shadow) !important;
}
.card:hover,
.shop-card:hover{ transform:translateY(-4px); box-shadow:var(--glass-shadow-lg) !important; }
.cab-card:hover{ transform:translateY(-3px); box-shadow:var(--glass-shadow-lg) !important; }
.arow:hover{ box-shadow:var(--glass-shadow-lg) !important; }

/* Karta ichidagi rasm bloklari toza qolsin (blur faqat panelga) */
.card-img, .arow-img, .shop-cover, .gallery-main, .noimg{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* Kabinet plitkalari — biroz jonliroq */
.cab-card{ transition:transform .16s ease, box-shadow .16s ease; }
.cab-card .cab-ic{ filter:drop-shadow(0 3px 6px rgba(16,40,46,.18)); }

/* ============ FORMALAR (e'lon joylash, magazin) ============ */
.field input, .field select, .field textarea,
.ad-form input, .ad-form select, .ad-form textarea{
  background:var(--glass-bg-strong) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--glass-brd-soft) !important;
  color:var(--ink) !important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus,
.ad-form input:focus, .ad-form select:focus, .ad-form textarea:focus{
  border-color:var(--teal) !important;
  box-shadow:0 0 0 3px rgba(43,182,201,.22) !important;
  background:var(--glass-bg-strong) !important;
}

/* ============ TAB / CHIP / PILL ============ */
.tab, .group-tab, .kind-pill, .chip, .size-chip, .pill{
  background:var(--glass-bg) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--glass-brd) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
:root[data-theme="dark"] .tab,
:root[data-theme="dark"] .group-tab,
:root[data-theme="dark"] .kind-pill,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .size-chip,
:root[data-theme="dark"] .pill{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.tab.active, .group-tab.on, .kind-pill.on, .size-chip.on, .chip.active{
  background:linear-gradient(135deg, rgba(14,122,138,.95), rgba(10,93,105,.95)) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 6px 16px rgba(14,122,138,.30) !important;
}
.tab.active *, .group-tab.on *, .kind-pill.on *{ color:#fff !important; }

/* ============ CHAT (xabarlar) ============ */
.convo-row{
  background:var(--glass-bg) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--glass-brd) !important;
  border-radius:14px !important; margin-bottom:8px;
  box-shadow:var(--glass-shadow) !important;
}
.convo-row:hover{ box-shadow:var(--glass-shadow-lg) !important; }
.chat-head, .chat-rulebar, .chat-send{
  background:var(--glass-bg-strong) !important;
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--glass-brd) !important;
}
.bubble{
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(16,40,46,.10) !important;
}
.bubble.them{
  background:var(--glass-bg-strong) !important;
  border:1px solid var(--glass-brd) !important; color:var(--ink) !important;
}
.bubble.me{
  background:linear-gradient(135deg, rgba(14,122,138,.92), rgba(10,93,105,.94)) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.18) !important;
}
.bubble.me *{ color:#fff !important; }

/* ============ MOBIL PASTKI PANEL ============ */
.tabbar{
  background:var(--glass-bg-strong) !important;
  -webkit-backdrop-filter:saturate(170%) blur(18px); backdrop-filter:saturate(170%) blur(18px);
  border-top:1px solid var(--glass-brd) !important;
  box-shadow:0 -8px 30px rgba(16,40,46,.14) !important;
}

/* ============ ADMIN: davlat analitikasi + davlat kanallari ============ */
.country-analytics{ width:100%; border-collapse:separate; border-spacing:0; border-radius:14px; overflow:hidden;
  background:var(--glass-bg) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--glass-brd); box-shadow:var(--glass-shadow); }
.country-analytics th, .country-analytics td{ padding:10px 12px; text-align:center; border-bottom:1px solid var(--glass-brd-soft); }
.country-analytics th:first-child, .country-analytics td:first-child{ text-align:left; }
.country-analytics thead th{ background:rgba(14,122,138,.14); font-weight:800; font-size:.86rem; }
.country-analytics tbody tr:hover{ background:rgba(43,182,201,.10); }

.country-tg-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:10px; }
.country-tg{
  background:var(--glass-bg) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--glass-brd); border-radius:14px; padding:8px 12px; box-shadow:var(--glass-shadow);
}
.country-tg>summary{ cursor:pointer; font-size:.95rem; padding:4px 0; list-style:none; }
.country-tg>summary::-webkit-details-marker{ display:none; }
.country-tg[open]>summary{ margin-bottom:8px; border-bottom:1px solid var(--glass-brd-soft); padding-bottom:8px; }
.country-tg-body .field{ margin-bottom:8px; }
.country-tg-body .field:last-child{ margin-bottom:2px; }

/* ============ backdrop-filter yo'q brauzerlar uchun zaxira (o'qilishi kafolatlansin) ============ */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root{ --glass-bg:rgba(255,255,255,.94); --glass-bg-strong:#fff; --glass-pill:rgba(255,255,255,.24); }
  :root[data-theme="dark"]{ --glass-bg:#16242a; --glass-bg-strong:#1a2b31; --glass-pill:rgba(255,255,255,.14); }
  body::before{ opacity:.6; }
}

/* ============ QIDIRUV: OVOZLI QIDIRUV (mikrofon) tugmasi ============
   style.css'dagi umumiy tugma qoidalaridan ta'sirlanib, oq va qora rejimda
   turlicha (masalan qora rejimda deyarli ko'rinmas) chiqib qolishi mumkin edi.
   Endi ikkala rejimda ham AYNAN BIR XIL: amber doira, ichida qora mikrofon belgisi. */
.site-head .search .mic-btn, .search .mic-btn{
  background:linear-gradient(135deg,#f7b733,#d97f06) !important;
  border:1px solid rgba(217,127,6,.45) !important;
  color:#2a1a00 !important;
  box-shadow:0 2px 8px rgba(217,127,6,.30) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  opacity:1 !important;
}
:root[data-theme="dark"] .site-head .search .mic-btn,
:root[data-theme="dark"] .search .mic-btn{
  background:linear-gradient(135deg,#f7b733,#d97f06) !important;
  border:1px solid rgba(217,127,6,.45) !important;
  color:#2a1a00 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.35) !important;
}
.site-head .search .mic-btn svg, .search .mic-btn svg{ color:#2a1a00 !important; stroke:#2a1a00 !important; }
.site-head .search .mic-btn:hover, .search .mic-btn:hover{ filter:brightness(1.06); }
.site-head .search .mic-btn.listening, .search .mic-btn.listening{
  background:linear-gradient(135deg,#ef4444,#b91c1c) !important;
  border-color:rgba(185,28,28,.5) !important; color:#fff !important;
}
.site-head .search .mic-btn.listening svg, .search .mic-btn.listening svg{ color:#fff !important; stroke:#fff !important; }

/* ============ CHIP — tanlov tugmalari (Salon holati, Qo'shimcha xususiyatlar va h.k.) ============
   Oq va qora rejimda ham aniq ko'rinadi: tanlanmagan — chegarali, tanlangan — teal to'ldirilgan.
   (Avval oq karta ustida oq chegara/fon chiqib, tugmalar ko'rinmay qolardi;
    tanlangan tugmada esa oq matn oq fonda yo'qolardi.) */
.chip{
  background:rgba(255,255,255,.96) !important;
  border:1.5px solid rgba(21,40,46,.24) !important;
  box-shadow:0 1px 2px rgba(16,40,46,.06) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.chip, .chip span{ color:#15282e !important; }
.chip:hover{ border-color:rgba(14,122,138,.65) !important; }
:root[data-theme="dark"] .chip{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.26) !important;
  box-shadow:none !important;
}
:root[data-theme="dark"] .chip, :root[data-theme="dark"] .chip span{ color:#e9f1f3 !important; }
:root[data-theme="dark"] .chip:hover{ border-color:rgba(43,182,201,.75) !important; }
/* tanlangan */
:root:root .chip.on, :root:root .chip.active{
  background:linear-gradient(135deg,#0e7a8a,#0a5d69) !important;
  border-color:transparent !important;
  box-shadow:0 4px 12px rgba(14,122,138,.32) !important;
}
:root:root .chip.on, :root:root .chip.on span, :root:root .chip.active, :root:root .chip.active span{ color:#fff !important; }
/* zaxira: JS ishlamasa ham belgilangan chip to'lib tursin (:has qo'llab-quvvatlanadigan brauzerlarda) */
:root:root .chip:has(input:checked){
  background:linear-gradient(135deg,#0e7a8a,#0a5d69) !important;
  border-color:transparent !important;
  box-shadow:0 4px 12px rgba(14,122,138,.32) !important;
}
:root:root .chip:has(input:checked), :root:root .chip:has(input:checked) span{ color:#fff !important; }

/* ============ Harakatni kamaytirish (foydalanuvchi sozlamasi) ============ */
@media (prefers-reduced-motion: reduce){
  .card, .shop-card, .cab-card, .arow, .cs-menu{ transition:none !important; animation:none !important; }
  .card:hover, .shop-card:hover, .cab-card:hover{ transform:none; }
}