/* 22Media Premium Pro v6.26 — navigation geometry reset
   Desktop: compact icon/text rhythm with no collision.
   Mobile: true top-anchored premium drawer with deterministic alignment.
*/

/* ---------- DESKTOP PRIMARY NAV ---------- */
@media (min-width:981px){
  .m22-header-v66 .m22-nav-inner{
    height:54px!important;
    gap:8px!important;
    align-items:center!important;
  }
  .m22-header-v66 .m22-primary-nav{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .m22-header-v66 .m22-nav-list{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    min-width:0!important;
  }
  .m22-header-v66 .m22-nav-list>li{
    flex:0 0 auto!important;
    min-width:0!important;
  }
  .m22-header-v66 .m22-nav-list>li>a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    min-height:38px!important;
    padding:7px 6px!important;
    border-radius:10px!important;
    font-size:11.25px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:-.018em!important;
    white-space:nowrap!important;
    position:relative!important;
  }
  /* old pseudo icon/underline rules are no longer allowed to occupy nav space */
  .m22-header-v66 .m22-nav-list>li>a:before{
    content:none!important;
    display:none!important;
  }
  .m22-header-v66 .m22-nav-list .m22-menu-icon{
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 16px!important;
    width:16px!important;
    height:16px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#52637c!important;
    font-size:10px!important;
    box-shadow:none!important;
  }
  .m22-header-v66 .m22-nav-list .m22-menu-label{
    display:inline-block!important;
    min-width:0!important;
    white-space:nowrap!important;
  }
  .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{
    content:'\f107'!important;
    display:inline-block!important;
    flex:0 0 auto!important;
    width:auto!important;
    height:auto!important;
    margin:0 0 0 2px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#8795a9!important;
    font:900 8px/1 "Font Awesome 6 Free"!important;
  }
  .m22-header-v66 .m22-nav-list>li:nth-child(2)>a .m22-menu-icon,
  .m22-header-v66 .m22-nav-list>li:nth-child(2)>a:after{color:currentColor!important}
  .m22-header-v66 .m22-nav-tools{
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    gap:3px!important;
    margin-left:6px!important;
    padding-left:8px!important;
    border-left:1px solid #e4eaf3!important;
  }
  .m22-header-v66 .m22-nav-tools>a,
  .m22-header-v66 .m22-nav-tools>button{
    flex:0 0 34px!important;
    width:34px!important;
    height:34px!important;
  }
  .m22-header-v66 .m22-nav-tool-label{display:none!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li>a{font-size:12.5px!important;letter-spacing:0!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{margin:0 2px 0 0!important}
}

/* On normal laptop widths, text wins over decorative category icons. */
@media (min-width:981px) and (max-width:1480px){
  .m22-header-v66 .m22-nav-list .m22-menu-icon{display:none!important}
  .m22-header-v66 .m22-nav-list>li>a{padding-left:6px!important;padding-right:6px!important;font-size:10.8px!important;gap:2px!important}
  .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{margin-left:1px!important}
}

/* ---------- MOBILE DRAWER ---------- */
@media (max-width:980px){
  .m22-header-v66 .m22-nav-wrap{
    position:fixed!important;
    inset:0 auto 0 0!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    width:min(404px,92vw)!important;
    max-width:404px!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    border:0!important;
    border-radius:0 22px 22px 0!important;
    background:#f7f9fd!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    transform:translateX(-105%)!important;
    transition:transform .25s cubic-bezier(.2,.75,.2,1)!important;
    box-shadow:28px 0 80px rgba(4,22,58,.30)!important;
    z-index:10030!important;
    scrollbar-width:thin;
  }
  .m22-header-v66 .m22-nav-wrap.is-open{transform:translateX(0)!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-wrap{
    left:auto!important;right:0!important;
    inset:0 0 0 auto!important;
    transform:translateX(105%)!important;
    border-radius:22px 0 0 22px!important;
    box-shadow:-28px 0 80px rgba(4,22,58,.30)!important;
  }
  body.m22-lang-ur .m22-header-v66 .m22-nav-wrap.is-open{transform:translateX(0)!important}

  /* The drawer now owns its full top area; no duplicated/half-visible header strip. */
  .m22-header-v66 .m22-mobile-menu-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 40px!important;
    align-items:center!important;
    gap:10px!important;
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    width:100%!important;
    min-height:0!important;
    padding:12px 12px 11px!important;
    margin:0!important;
    border-bottom:1px solid #e1e8f2!important;
    background:rgba(255,255,255,.985)!important;
    backdrop-filter:blur(18px)!important;
    box-shadow:0 8px 24px rgba(14,43,84,.06)!important;
  }
  .m22-header-v66 .m22-mobile-menu-brand{
    display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;width:100%!important;
  }
  .m22-header-v66 .m22-mobile-menu-brand .m22-square-logo{
    flex:0 0 40px!important;width:40px!important;height:40px!important;border-radius:11px!important;
  }
  .m22-header-v66 .m22-mobile-menu-copy{display:block!important;min-width:0!important;flex:1 1 auto!important}
  .m22-header-v66 .m22-mobile-menu-copy b{display:block!important;font-size:13px!important;line-height:1.15!important;font-weight:850!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .m22-header-v66 .m22-mobile-menu-copy small{display:block!important;margin-top:2px!important;font-size:8.8px!important;line-height:1.25!important;color:#7b8ca5!important}
  .m22-header-v66 .m22-mobile-menu-close{
    width:38px!important;height:38px!important;justify-self:end!important;border-radius:11px!important;background:#f2f6fb!important;border:1px solid #dce5f0!important;color:#31435d!important;
  }
  .m22-header-v66 .m22-drawer-language{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 138px!important;
    align-items:center!important;
    gap:9px!important;
    width:100%!important;
    margin:2px 0 0!important;
    padding:7px 8px 7px 10px!important;
    border:1px solid #e0e8f3!important;
    border-radius:12px!important;
    background:#f5f8fc!important;
  }
  .m22-header-v66 .m22-drawer-language>span{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;font-size:10px!important;font-weight:800!important;color:#63748d!important;white-space:nowrap!important}
  .m22-header-v66 .m22-drawer-language>div{display:grid!important;grid-template-columns:1fr 1fr!important;gap:3px!important;padding:3px!important;border-radius:10px!important;background:#eaf0f8!important}
  .m22-header-v66 .m22-drawer-language a{display:grid!important;place-items:center!important;height:30px!important;min-width:0!important;padding:0 6px!important;border-radius:8px!important;font-size:10px!important;font-weight:850!important;color:#53657e!important}
  .m22-header-v66 .m22-drawer-language a.is-active{background:#fff!important;color:#075fdc!important;box-shadow:0 3px 10px rgba(21,54,100,.09)!important}

  .m22-header-v66 .m22-nav-inner{
    display:block!important;width:100%!important;height:auto!important;margin:0!important;
    padding:10px 12px calc(88px + env(safe-area-inset-bottom))!important;
  }
  .m22-header-v66 .m22-mobile-menu-section-title{display:none!important}
  .m22-header-v66 .m22-primary-nav{display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important}
  .m22-header-v66 .m22-nav-list{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;width:100%!important;margin:0!important;padding:0!important;
  }
  .m22-header-v66 .m22-nav-list>li{grid-column:1/-1!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important}
  .m22-header-v66 .m22-nav-list>li:nth-child(1),.m22-header-v66 .m22-nav-list>li:nth-child(2){grid-column:auto!important}
  .m22-header-v66 .m22-nav-list>li>a{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 30px!important;
    align-items:center!important;
    column-gap:8px!important;
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:6px 8px!important;
    border:1px solid #dce5f0!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#263950!important;
    font-size:12.7px!important;
    font-weight:800!important;
    line-height:1.2!important;
    text-align:left!important;
    box-shadow:0 2px 7px rgba(19,47,87,.025)!important;
    overflow:hidden!important;
  }
  .m22-header-v66 .m22-nav-list>li>a:before{content:none!important;display:none!important}
  .m22-header-v66 .m22-nav-list .m22-menu-icon{
    grid-column:1!important;
    display:grid!important;place-items:center!important;
    width:32px!important;height:32px!important;min-width:32px!important;
    margin:0!important;padding:0!important;
    border-radius:9px!important;background:#edf4fd!important;color:#2772df!important;font-size:12px!important;
  }
  .m22-header-v66 .m22-nav-list .m22-menu-label{
    grid-column:2!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-align:left!important;
  }
  .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{
    grid-column:3!important;
    content:'\f078'!important;
    display:grid!important;place-items:center!important;
    width:28px!important;height:28px!important;margin:0!important;
    border-radius:8px!important;background:#f2f6fa!important;color:#6c7e97!important;
    font:900 8px/1 "Font Awesome 6 Free"!important;
  }
  .m22-header-v66 .m22-nav-list>li:not(.menu-item-has-children)>a:after{content:''!important;display:block!important;width:28px!important;height:1px!important;background:transparent!important}
  .m22-header-v66 .m22-nav-list>li:nth-child(-n+2)>a{
    grid-template-columns:auto auto!important;
    justify-content:center!important;
    min-height:54px!important;
    gap:7px!important;
    text-align:center!important;
  }
  .m22-header-v66 .m22-nav-list>li:nth-child(-n+2) .m22-menu-icon{grid-column:auto!important;width:30px!important;height:30px!important;min-width:30px!important}
  .m22-header-v66 .m22-nav-list>li:nth-child(-n+2) .m22-menu-label{grid-column:auto!important;flex:none!important;text-align:center!important}
  .m22-header-v66 .m22-nav-list>li:nth-child(-n+2)>a:after{display:none!important}
  .m22-header-v66 .m22-nav-list>li:nth-child(2)>a{background:linear-gradient(135deg,#0862df,#1479f8)!important;border-color:#0869e9!important;color:#fff!important;box-shadow:0 8px 18px rgba(9,99,226,.15)!important}
  .m22-header-v66 .m22-nav-list>li:nth-child(2) .m22-menu-icon{background:rgba(255,255,255,.15)!important;color:#fff!important}
  .m22-header-v66 .m22-nav-list>li>a[href*="/live"]{color:#e32643!important}
  .m22-header-v66 .m22-nav-list>li>a[href*="/live"] .m22-menu-icon{background:#fff0f3!important;color:#e32643!important}

  .m22-header-v66 .m22-nav-list .sub-menu{position:static!important;display:none!important;width:calc(100% - 10px)!important;min-width:0!important;max-width:none!important;margin:5px 5px 1px!important;padding:5px!important;border:1px solid #dde7f2!important;border-radius:11px!important;background:#f0f5fb!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;transform:none!important}
  .m22-header-v66 .m22-nav-list li.is-open>.sub-menu{display:grid!important;grid-template-columns:1fr!important}
  .m22-header-v66 .m22-nav-list .sub-menu:before{display:none!important}
  .m22-header-v66 .m22-nav-list .sub-menu a{display:flex!important;align-items:center!important;width:100%!important;min-height:38px!important;padding:7px 9px!important;border-radius:8px!important;font-size:11.5px!important;white-space:normal!important}

  .m22-header-v66 .m22-nav-tools{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;width:100%!important;margin:12px 0 0!important;padding:12px 0 0!important;border:0!important;border-top:1px solid #e1e8f1!important}
  .m22-header-v66 .m22-nav-tools>a,.m22-header-v66 .m22-nav-tools>button{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;width:100%!important;height:44px!important;border:1px solid #dbe5ef!important;border-radius:12px!important;background:#fff!important;color:#283a52!important;font-size:10.5px!important;font-weight:800!important}
  .m22-header-v66 .m22-nav-tool-label{display:inline!important}

  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li>a{direction:rtl!important;grid-template-columns:30px minmax(0,1fr) 34px!important;text-align:right!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-list .m22-menu-icon{grid-column:3!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-list .m22-menu-label{grid-column:2!important;text-align:right!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{grid-column:1!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li:not(.menu-item-has-children)>a:after{grid-column:1!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li:nth-child(-n+2)>a{grid-template-columns:auto auto!important;direction:rtl!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li:nth-child(-n+2) .m22-menu-icon,
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li:nth-child(-n+2) .m22-menu-label{grid-column:auto!important}

  body.m22-menu-open .m22-topbar-v6{visibility:hidden!important;pointer-events:none!important}
  body.m22-menu-open .m22-mobile-dock{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  .m22-nav-backdrop{z-index:10020!important;background:rgba(3,13,34,.5)!important;backdrop-filter:blur(4px)!important}

  .m22-dark .m22-header-v66 .m22-nav-wrap,[data-theme="dark"] .m22-header-v66 .m22-nav-wrap{background:#0c1423!important}
  .m22-dark .m22-header-v66 .m22-mobile-menu-head,[data-theme="dark"] .m22-header-v66 .m22-mobile-menu-head{background:rgba(13,22,38,.985)!important;border-color:#25344b!important}
  .m22-dark .m22-header-v66 .m22-mobile-menu-copy b,[data-theme="dark"] .m22-header-v66 .m22-mobile-menu-copy b{color:#edf4ff!important}
  .m22-dark .m22-header-v66 .m22-mobile-menu-close,[data-theme="dark"] .m22-header-v66 .m22-mobile-menu-close{background:#142034!important;border-color:#293951!important;color:#e0e9f7!important}
  .m22-dark .m22-header-v66 .m22-drawer-language,[data-theme="dark"] .m22-header-v66 .m22-drawer-language{background:#101b2d!important;border-color:#273750!important}
  .m22-dark .m22-header-v66 .m22-drawer-language>div,[data-theme="dark"] .m22-header-v66 .m22-drawer-language>div{background:#0b1525!important}
  .m22-dark .m22-header-v66 .m22-drawer-language a.is-active,[data-theme="dark"] .m22-header-v66 .m22-drawer-language a.is-active{background:#1b2a41!important;color:#8cbaff!important;box-shadow:none!important}
  .m22-dark .m22-header-v66 .m22-nav-list>li>a,[data-theme="dark"] .m22-header-v66 .m22-nav-list>li>a{background:#111c2d!important;border-color:#26364d!important;color:#e0e9f6!important;box-shadow:none!important}
  .m22-dark .m22-header-v66 .m22-nav-list .m22-menu-icon,[data-theme="dark"] .m22-header-v66 .m22-nav-list .m22-menu-icon{background:#172743!important;color:#8bb9ff!important}
  .m22-dark .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after,[data-theme="dark"] .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{background:#172337!important;color:#a4b4ca!important}
  .m22-dark .m22-header-v66 .m22-nav-list .sub-menu,[data-theme="dark"] .m22-header-v66 .m22-nav-list .sub-menu{background:#111c2c!important;border-color:#28374c!important}
  .m22-dark .m22-header-v66 .m22-nav-tools>a,.m22-dark .m22-header-v66 .m22-nav-tools>button,[data-theme="dark"] .m22-header-v66 .m22-nav-tools>a,[data-theme="dark"] .m22-header-v66 .m22-nav-tools>button{background:#111c2d!important;border-color:#293a51!important;color:#dfe8f5!important}
}

@media(max-width:430px){
  .m22-header-v66 .m22-nav-wrap{width:calc(100vw - 18px)!important;max-width:394px!important;border-radius:0 19px 19px 0!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-wrap{border-radius:19px 0 0 19px!important}
  .m22-header-v66 .m22-mobile-menu-head{padding:10px!important}
  .m22-header-v66 .m22-drawer-language{grid-template-columns:minmax(0,1fr) 126px!important}
  .m22-header-v66 .m22-nav-inner{padding-left:10px!important;padding-right:10px!important}
  .m22-header-v66 .m22-nav-list>li>a{min-height:47px!important;font-size:12.3px!important;padding:6px 7px!important;grid-template-columns:32px minmax(0,1fr) 28px!important}
  .m22-header-v66 .m22-nav-list .m22-menu-icon{width:30px!important;height:30px!important;min-width:30px!important}
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li>a{grid-template-columns:28px minmax(0,1fr) 32px!important}
}