/* =========================================================
   XOVOS TTB — HEADER SOCIALS + LANGUAGE PORTAL FIX
   2026-09-06
   - Header markazida 4 ta ijtimoiy tarmoq tugmasi
   - Til menyusi body portal orqali ochiladi: hech qachon kesilmaydi
   ========================================================= */

.topbar,
.topbar .container,
.topbar .topbar-inner,
.topbar .contact-items,
.topbar .weather-lang-inline,
.topbar .lang-wrap{
  overflow:visible!important;
}

.topbar .topbar-inner{
  position:relative!important;
}

/* Header markazidagi ijtimoiy tarmoqlar */
.xovos-top-socials{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important;
  position:relative!important;
  z-index:9500!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  width:max-content!important;
  max-width:100%!important;
  padding:8px 10px!important;
  border:1px solid rgba(29,93,137,.12)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 12px 30px rgba(14,46,76,.12)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}

.xovos-top-socials-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.xovos-top-social-link{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:13px!important;
  border:1px solid rgba(15,23,42,.08)!important;
  background:#fff!important;
  box-shadow:0 7px 17px rgba(15,23,42,.09)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
  text-decoration:none!important;
  color:inherit!important;
}
.xovos-top-social-link:hover,
.xovos-top-social-link:focus-visible{
  transform:translateY(-2px)!important;
  box-shadow:0 12px 23px rgba(15,23,42,.15)!important;
  border-color:rgba(31,111,171,.24)!important;
  outline:none!important;
}
.xovos-top-social-link svg{
  width:25px!important;
  height:25px!important;
  display:block!important;
}
.xovos-social-telegram{color:#229ED9!important;background:#f5fbff!important}
.xovos-social-instagram{color:#c13584!important;background:#fff8fc!important}
.xovos-social-whatsapp{color:#18a957!important;background:#f5fff9!important}
.xovos-social-youtube{color:#ff0000!important;background:#fff7f7!important}

/* Eski til menyusi ko‘rinmaydi: yangi portal body ichida chiziladi. */
body.xovos-lang-portal-ready #langMenu,
body.xovos-lang-portal-ready .lang-wrap > .lang-menu{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Ekran chegarasidan mustaqil til menyusi */
.xovos-language-portal{
  position:fixed!important;
  left:12px;
  top:12px;
  z-index:2147483600!important;
  width:176px!important;
  padding:7px!important;
  display:none;
  gap:4px!important;
  border-radius:15px!important;
  border:1px solid rgba(15,23,42,.12)!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 24px 60px rgba(15,23,42,.24)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  backdrop-filter:blur(14px)!important;
  transform-origin:top center!important;
}
.xovos-language-portal.is-open{
  display:grid!important;
  animation:xovosLangIn .16s ease both!important;
}
@keyframes xovosLangIn{
  from{opacity:0;transform:translateY(-5px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.xovos-language-portal button{
  width:100%!important;
  min-height:44px!important;
  border:0!important;
  border-radius:10px!important;
  padding:7px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  background:transparent!important;
  color:#15324d!important;
  font:800 15px/1.1 Inter,system-ui,sans-serif!important;
  cursor:pointer!important;
  text-align:left!important;
}
.xovos-language-portal button:hover,
.xovos-language-portal button:focus-visible{
  background:#eef7ff!important;
  outline:none!important;
}
.xovos-language-portal button.active{
  background:linear-gradient(135deg,#216da3,#2694bd)!important;
  color:#fff!important;
}
.xovos-language-portal .xlp-code{
  font-size:16px!important;
  min-width:28px!important;
}
.xovos-language-portal .xlp-name{
  opacity:.78!important;
  font-size:11px!important;
  font-weight:700!important;
  text-align:right!important;
}

/* Til tugmasi har doim to‘liq ko‘rinadi */
#langBtn,
.lang-btn{
  position:relative!important;
  z-index:9600!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}

/* Tablet: ijtimoiy tarmoqlar ixcham */
@media (min-width:981px) and (max-width:1320px){
  .xovos-top-socials{gap:5px!important;padding:6px!important;border-radius:15px!important}
  .xovos-top-social-link{width:34px!important;height:34px!important;min-width:34px!important;border-radius:10px!important}
  .xovos-top-social-link svg{width:20px!important;height:20px!important}
}

/* Mobil: header ichida logodan keyin alohida markaziy qator */
@media (max-width:980px){
  .topbar .topbar-inner{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    align-items:center!important;
    gap:9px 12px!important;
    height:auto!important;
    min-height:0!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
  }
  .topbar .topbar-inner>.brand,
  .topbar .topbar-inner>.brand-link{
    flex:1 1 100%!important;
    width:100%!important;
  }
  .xovos-top-socials{
    order:8!important;
    flex:0 0 auto!important;
    margin:2px auto 0!important;
    padding:6px 8px!important;
    gap:7px!important;
  }
  .xovos-top-social-link{width:38px!important;height:38px!important;min-width:38px!important}
  .xovos-top-social-link svg{width:22px!important;height:22px!important}
}

@media (max-width:480px){
  .xovos-top-socials{gap:5px!important;padding:5px 6px!important;border-radius:14px!important}
  .xovos-top-social-link{width:35px!important;height:35px!important;min-width:35px!important;border-radius:10px!important}
  .xovos-top-social-link svg{width:20px!important;height:20px!important}
  .xovos-language-portal{width:164px!important}
}

@media (prefers-reduced-motion:reduce){
  .xovos-top-social-link,.xovos-language-portal{animation:none!important;transition:none!important}
}

@media print{
  .xovos-top-socials,.xovos-language-portal{display:none!important}
}

/* =========================================================
   XOVOS TTB — ADMIN HEADER LAYOUT CONTROLLER FINAL
   2026-09-07
   Banner va ijtimoiy tarmoqlar endi bir katakda ustma-ust tushmaydi.
   Header joylashuvi siteData.headerLayout orqali Admin Localdan boshqariladi.
   ========================================================= */

.topbar{
  --hl-max-width:1480px;
  --hl-gap:18px;
  --hl-brand-x:0px;--hl-brand-y:0px;--hl-logo-size:64px;
  --hl-banner-x:0px;--hl-banner-y:0px;--hl-banner-width:180px;--hl-banner-height:84px;
  --hl-social-x:0px;--hl-social-y:0px;--hl-social-size:42px;--hl-social-gap:9px;
  --hl-contact-x:0px;--hl-contact-y:0px;
  --hl-weather-x:0px;--hl-weather-y:0px;
  --hl-lang-x:0px;--hl-lang-y:0px;
}

.xovos-header-center{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  overflow:visible!important;
  position:relative!important;
  z-index:20!important;
}

@media (min-width:1041px){
  body .topbar .container.topbar-inner,
  body .topbar.topbar-banner-active .container.topbar-inner,
  body .topbar.banner-mode-strip .container.topbar-inner,
  body .topbar.banner-mode-background .container.topbar-inner{
    display:grid!important;
    grid-template-columns:minmax(245px,1fr) auto minmax(500px,1.35fr)!important;
    align-items:center!important;
    gap:var(--hl-gap)!important;
    width:min(calc(100% - 28px),var(--hl-max-width))!important;
    max-width:var(--hl-max-width)!important;
    min-height:126px!important;
    height:auto!important;
    padding:12px 0!important;
    overflow:visible!important;
  }

  body .topbar .container.topbar-inner > .brand,
  body .topbar .container.topbar-inner > .brand-link{
    grid-column:1!important;
    grid-row:1!important;
    transform:translate3d(var(--hl-brand-x),var(--hl-brand-y),0)!important;
    will-change:transform!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body .topbar .brand .logo,
  body .topbar #logoImg{
    width:var(--hl-logo-size)!important;
    height:var(--hl-logo-size)!important;
    min-width:var(--hl-logo-size)!important;
    max-width:var(--hl-logo-size)!important;
    object-fit:contain!important;
  }

  body .topbar .container.topbar-inner > .xovos-header-center{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:center!important;
  }
  body .topbar .xovos-header-center > #topbarPromo,
  body .topbar .xovos-header-center > .topbar-promo{
    position:relative!important;
    inset:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 var(--hl-banner-width)!important;
    width:var(--hl-banner-width)!important;
    min-width:var(--hl-banner-width)!important;
    max-width:var(--hl-banner-width)!important;
    height:var(--hl-banner-height)!important;
    min-height:var(--hl-banner-height)!important;
    max-height:var(--hl-banner-height)!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    transform:translate3d(var(--hl-banner-x),var(--hl-banner-y),0)!important;
    z-index:21!important;
  }
  body .topbar .xovos-header-center > .topbar-promo.hidden{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body .topbar .xovos-header-center > .topbar-promo img,
  body .topbar .xovos-header-center > #topbarPromo img,
  body .topbar .xovos-header-center #topbarPromoImg{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
  }

  body .topbar .xovos-header-center > .xovos-top-socials{
    grid-column:auto!important;
    grid-row:auto!important;
    position:relative!important;
    flex:0 0 auto!important;
    gap:var(--hl-social-gap)!important;
    transform:translate3d(var(--hl-social-x),var(--hl-social-y),0)!important;
    z-index:22!important;
  }
  body .topbar .xovos-top-social-link{
    width:var(--hl-social-size)!important;
    height:var(--hl-social-size)!important;
    min-width:var(--hl-social-size)!important;
    max-width:var(--hl-social-size)!important;
  }
  body .topbar .xovos-top-social-link svg{
    width:calc(var(--hl-social-size) * .60)!important;
    height:calc(var(--hl-social-size) * .60)!important;
  }

  body .topbar .container.topbar-inner > .contact-items{
    grid-column:3!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    min-width:0!important;
    margin:0!important;
    transform:translate3d(var(--hl-contact-x),var(--hl-contact-y),0)!important;
    overflow:visible!important;
  }
  body .topbar .contact-items > .contact-card{
    flex:0 1 auto!important;
    min-width:0!important;
    transform:none!important;
  }
  body .topbar .weather-lang-inline{
    flex:0 0 auto!important;
    overflow:visible!important;
  }
  body .topbar #weatherWidget,
  body .topbar .top-weather{
    transform:translate3d(var(--hl-weather-x),var(--hl-weather-y),0)!important;
    will-change:transform!important;
  }
  body .topbar .lang-wrap{
    transform:translate3d(var(--hl-lang-x),var(--hl-lang-y),0)!important;
    will-change:transform!important;
  }
}

/* O‘rta ekranlarda markaziy blok bir oz ixchamlanadi, lekin ustma-ust tushmaydi. */
@media (min-width:1041px) and (max-width:1320px){
  body .topbar .container.topbar-inner,
  body .topbar.topbar-banner-active .container.topbar-inner,
  body .topbar.banner-mode-strip .container.topbar-inner,
  body .topbar.banner-mode-background .container.topbar-inner{
    grid-template-columns:minmax(220px,.88fr) auto minmax(455px,1.35fr)!important;
    gap:min(var(--hl-gap),10px)!important;
    width:min(calc(100% - 20px),var(--hl-max-width))!important;
  }
  .xovos-header-center{gap:7px!important}
  body .topbar .xovos-header-center > #topbarPromo,
  body .topbar .xovos-header-center > .topbar-promo{
    flex-basis:min(var(--hl-banner-width),120px)!important;
    width:min(var(--hl-banner-width),120px)!important;
    min-width:min(var(--hl-banner-width),120px)!important;
    max-width:min(var(--hl-banner-width),120px)!important;
    height:min(var(--hl-banner-height),68px)!important;
    min-height:min(var(--hl-banner-height),68px)!important;
    max-height:min(var(--hl-banner-height),68px)!important;
  }
  body .topbar .xovos-top-social-link{
    width:min(var(--hl-social-size),34px)!important;
    height:min(var(--hl-social-size),34px)!important;
    min-width:min(var(--hl-social-size),34px)!important;
    max-width:min(var(--hl-social-size),34px)!important;
  }
  body .topbar .xovos-top-socials{gap:min(var(--hl-social-gap),5px)!important;padding:6px!important}
}

/* Mobil va planshetda Admin desktop offsetlari o‘chadi — ekran buzilmaydi. */
@media (max-width:1040px){
  .topbar .topbar-inner{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:center!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .topbar .topbar-inner > .brand,
  .topbar .topbar-inner > .brand-link{
    order:1!important;
    flex:1 1 100%!important;
    transform:none!important;
  }
  .topbar .xovos-header-center{
    order:2!important;
    flex:1 1 100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:8px!important;
  }
  .topbar .xovos-header-center > #topbarPromo,
  .topbar .xovos-header-center > .topbar-promo{
    transform:none!important;
    max-width:min(44vw,180px)!important;
  }
  .topbar .xovos-header-center > .topbar-promo.hidden{display:none!important}
  .topbar .xovos-top-socials{transform:none!important;margin:0!important}
  .topbar .contact-items{
    order:3!important;
    flex:1 1 100%!important;
    transform:none!important;
    justify-content:center!important;
  }
  .topbar #weatherWidget,.topbar .top-weather,.topbar .lang-wrap{transform:none!important}
}