/* BALYK04 V105 desktop header repair.
   Desktop and mobile header layouts are isolated. Search is not in header. */
.app-header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  background:rgba(239,248,255,.92)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgba(255,255,255,.78)!important;
}
.app-header .brand,
.app-header .desktop-nav,
.app-header .header-tools,
.app-header .mobile-menu-shell{box-sizing:border-box!important;}
.app-header .brand{z-index:3!important;text-decoration:none!important;}
.app-header .brand-logo{object-fit:contain!important;}
.app-header .header-tools{z-index:3!important;}
.desktop-only-menu{display:flex!important;}
.mobile-only-menu{display:none!important;}

@media (min-width:769px){
  .app-header.topbar,
  body .topbar.app-header{
    display:grid!important;
    grid-template-columns:minmax(150px,245px) minmax(0,1fr) auto!important;
    grid-template-areas:"brand nav tools"!important;
    align-items:center!important;
    column-gap:14px!important;
    row-gap:0!important;
    min-height:82px!important;
    height:82px!important;
    padding:0 34px!important;
    flex-wrap:nowrap!important;
  }
  .app-header .brand{
    grid-area:brand!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-width:0!important;
    width:100%!important;
    max-width:245px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  .app-header .brand img,
  .app-header .brand-logo{
    width:58px!important;
    height:58px!important;
    flex:0 0 58px!important;
  }
  .app-header .brand>span{
    min-width:0!important;
    overflow:hidden!important;
    display:block!important;
  }
  .app-header .brand b{
    display:block!important;
    font-size:30px!important;
    line-height:.92!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .app-header .brand small{
    display:block!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .app-header .desktop-nav{
    grid-area:nav!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
  }
  .app-header .desktop-nav-track{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
    white-space:nowrap!important;
    margin:0!important;
    padding:0!important;
  }
  .app-header .desktop-nav-entry,
  .app-header .desktop-more,
  .app-header .nav-group{
    flex:0 0 auto!important;
    min-width:0!important;
    width:auto!important;
    position:relative!important;
  }
  .app-header .desktop-nav-entry.is-hidden-by-fit{display:none!important;}
  .app-header .desktop-more[hidden]{display:none!important;}
  .app-header .desktop-more:not([hidden]){display:block!important;}
  .app-header .nav-link{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    max-width:none!important;
    white-space:nowrap!important;
    font-size:14px!important;
    line-height:1!important;
    padding:10px 12px!important;
    border-radius:14px!important;
    text-transform:uppercase!important;
    font-weight:900!important;
    border:1px solid transparent!important;
    background:transparent!important;
    color:#0b315f!important;
  }
  .app-header .nav-link:hover,
  .app-header .nav-group:hover>.nav-link,
  .app-header .nav-group.is-open>.nav-link{
    color:#1689ff!important;
    background:rgba(255,255,255,.62)!important;
    border-color:rgba(220,236,251,.95)!important;
  }
  .app-header .header-tools{
    grid-area:tools!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    min-width:max-content!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
  }
  .app-header .header-tools .pill{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
  .app-header .mobile-menu-shell,
  .app-header .mobile-only-menu,
  .app-header .mobile-menu-toggle,
  .app-header .menu-toggle{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .app-header .dropdown{
    position:absolute!important;
    top:100%!important;
    left:0!important;
    min-width:220px!important;
    max-width:min(320px,calc(100vw - 24px))!important;
    max-height:calc(100vh - 105px)!important;
    overflow:auto!important;
    background:#fff!important;
    border:1px solid rgba(15,23,42,.10)!important;
    border-radius:16px!important;
    box-shadow:0 18px 50px rgba(15,23,42,.16)!important;
    padding:8px!important;
    z-index:5000!important;
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translate3d(0,0,0)!important;
    will-change:opacity!important;
    transition:opacity .08s linear!important;
  }

  /* V104: dropdown is pinned to top:100% with no air gap.
     Hidden state uses visibility/opacity instead of display:none, so the panel does not visually jump when the cursor moves from the menu item to the list. */
  .app-header .nav-group:hover>.dropdown,
  .app-header .nav-group.is-open>.dropdown,
  .app-header .nav-group:focus-within>.dropdown{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .app-header .dropdown a{
    display:block!important;
    padding:10px 12px!important;
    border-radius:10px!important;
    color:#0f172a!important;
    text-decoration:none!important;
    white-space:normal!important;
    line-height:1.22!important;
    text-transform:none!important;
    font-size:14px!important;
    font-weight:800!important;
  }
  .app-header .dropdown a:hover{background:#eef6ff!important;color:#126fc8!important;}
  .app-header .dropdown-more{right:0!important;left:auto!important;}
  .app-header .dropdown-more .more-subitem{padding-left:24px!important;font-size:13px!important;color:#475569!important;}
}

@media (min-width:769px) and (max-width:1100px){
  .app-header.topbar,
  body .topbar.app-header{
    grid-template-columns:minmax(118px,190px) minmax(0,1fr) auto!important;
    column-gap:8px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .app-header .brand img,
  .app-header .brand-logo{width:44px!important;height:44px!important;flex-basis:44px!important;}
  .app-header .brand b{font-size:22px!important;}
  .app-header .brand small{display:none!important;}
  .app-header .nav-link{font-size:12px!important;padding:9px 8px!important;}
  .app-header .header-tools{gap:5px!important;}
  .app-header .header-tools .pill{font-size:12px!important;padding:7px 8px!important;}
}



/* BALYK04 V105: stable no-gap desktop dropdown.
   Dropdown position is calculated from the real button rectangle by desktop-menu.js.
   This removes the distance between the hovered button and the dropdown at medium/narrow desktop widths. */
@media (min-width:769px){
  .app-header .desktop-nav-entry,
  .app-header .desktop-more,
  .app-header .nav-group{
    align-self:stretch!important;
    display:flex!important;
    align-items:center!important;
  }
  .app-header .nav-group > .nav-link,
  .app-header .desktop-more > .nav-link{
    position:relative!important;
  }
  .app-header .dropdown{
    position:fixed!important;
    top:var(--dropdown-top, 82px)!important;
    left:var(--dropdown-left, 12px)!important;
    right:auto!important;
    margin-top:0!important;
    transform:none!important;
  }
  .app-header .dropdown-more{
    left:var(--dropdown-left, 12px)!important;
    right:auto!important;
  }
  .app-header .dropdown::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:-18px!important;
    height:18px!important;
    display:block!important;
    background:transparent!important;
    pointer-events:auto!important;
  }
}

@media (max-width:768px){
  .app-header.topbar,
  body .topbar.app-header{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    min-height:62px!important;
    height:auto!important;
    padding:8px 10px!important;
    gap:8px!important;
    overflow:visible!important;
  }
  .desktop-only-menu{display:none!important;}
  .mobile-only-menu{display:block!important;margin-left:auto!important;}
  .app-header .desktop-nav{display:none!important;}
  .app-header .header-tools{display:none!important;}
  .app-header .brand{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;max-width:calc(100vw - 128px)!important;overflow:hidden!important;}
  .app-header .brand img,.app-header .brand-logo{width:42px!important;height:42px!important;flex:0 0 42px!important;}
  .app-header .brand b{font-size:20px!important;white-space:nowrap!important;}
  .app-header .brand small{display:none!important;}
}
body.mobile-menu-open{overflow:hidden;}
.mobile-menu-toggle{border:0;border-radius:999px;background:#0f5c80;color:#fff;font-weight:800;padding:10px 14px;box-shadow:0 10px 24px rgba(15,92,128,.20);white-space:nowrap;}
.mobile-menu-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:2100;}
.mobile-menu-panel{position:fixed;top:0;right:0;width:min(88vw,360px);height:100vh;background:#fff;box-shadow:-18px 0 45px rgba(15,23,42,.18);z-index:2200;transform:translateX(104%);transition:transform .22s ease;display:flex;flex-direction:column;box-sizing:border-box;padding:14px;overflow:auto;}
.mobile-menu-panel.is-open{transform:translateX(0);}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.mobile-menu-head b{font-size:18px;color:#0f172a;}
.mobile-menu-close{width:38px;height:38px;border:0;border-radius:999px;background:#eef6ff;font-size:26px;line-height:1;color:#0f5c80;}
.mobile-menu-lang,.mobile-menu-account{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;border-bottom:1px solid rgba(15,23,42,.08);}
.mobile-menu-account{border-bottom:0;border-top:1px solid rgba(15,23,42,.08);margin-top:10px;}
.mobile-menu-list{display:flex;flex-direction:column;gap:4px;padding:8px 0;}
.mobile-menu-link{display:block;text-decoration:none;color:#0f172a;font-weight:800;padding:12px 10px;border-radius:12px;background:#f8fbff;}
.mobile-submenu{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 12px;}
.mobile-submenu a{display:block;text-decoration:none;color:#475569;padding:9px 10px;border-radius:10px;}
.mobile-submenu a:hover,.mobile-menu-link:hover{background:#eef6ff;}

/* BALYK04 V108 — header/menu Kazakh font fix */
.app-header, .app-header *,
.mobile-menu-panel, .mobile-menu-panel *,
.mobile-menu-backdrop, .desktop-nav, .desktop-nav *,
.nav, .nav *, .dropdown, .dropdown *{
  font-family: var(--font-main, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "DejaVu Sans", Arial, Helvetica, sans-serif) !important;
  font-synthesis: none !important;
  text-rendering: auto !important;
  letter-spacing: normal !important;
}
.mobile-menu-link,
.mobile-menu-sub a,
.mobile-menu-toggle,
.mobile-menu-head,
.app-header .nav-link,
.app-header .dropdown a{
  line-height: 1.28 !important;
  font-weight: 800 !important;
}