/* 22Media Premium Pro v6.30 — mobile masthead + overlap-proof premium drawer */

/* Mobile header outside the drawer: clean three-action newsroom masthead. */
@media (max-width:980px){
  .m22-header-v66 .m22-header-main-v6{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    height:72px!important;
    min-height:72px!important;
    gap:10px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .m22-header-v66 .m22-header-left-action{display:none!important}
  .m22-header-v66 .m22-menu-toggle{
    display:grid!important;place-items:center!important;
    flex:0 0 42px!important;width:42px!important;height:42px!important;
    border-radius:13px!important;background:#f5f8fd!important;border:1px solid #dce6f2!important;
    color:#24405f!important;box-shadow:0 5px 14px rgba(17,48,89,.05)!important
  }
  .m22-header-v66 .m22-brand-horizontal{
    position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
    width:auto!important;max-width:none!important;margin:0!important;z-index:1!important;pointer-events:auto!important
  }
  .m22-header-v66 .m22-brand-square{display:none!important}
  .m22-header-v66 .m22-brand-wordmark{display:flex!important;align-items:center!important;justify-content:center!important}
  .m22-header-v66 .m22-brand-wordmark .m22-logo-image{
    width:190px!important;height:50px!important;max-height:50px!important;object-fit:contain!important;background:transparent!important
  }
  .m22-header-v66 .m22-brand-caption{display:none!important}
  .m22-header-v66 .m22-header-actions-v66{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;
    margin-left:auto!important;min-width:84px!important;z-index:3!important
  }
  .m22-header-v66 .m22-header-actions-v66 .m22-header-compact-link,
  .m22-header-v66 .m22-header-actions-v66 .m22-theme-toggle{display:none!important}
  .m22-header-v66 .m22-header-actions-v66 .m22-search-toggle{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;border-radius:12px!important}
  .m22-header-v66 .m22-header-actions-v66 .m22-account-btn{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .m22-header-v66 .m22-header-actions-v66 .m22-account-btn span{display:none!important}

  /* When the drawer is open, absolutely no duplicate global language/header strip may sit above it. */
  body.m22-menu-open .m22-topbar,
  body.m22-menu-open .m22-topbar-v6,
  body.m22-menu-open .m22-header-main-v6{
    display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important
  }

  /* Drawer is a flex shell: fixed premium masthead + independently scrolling menu body. */
  body .m22-header-v66 .m22-nav-wrap{
    display:flex!important;flex-direction:column!important;
    top:0!important;bottom:0!important;left:0!important;right:auto!important;
    inset:0 auto 0 0!important;
    width:min(402px,calc(100vw - 18px))!important;max-width:402px!important;
    height:100dvh!important;max-height:100dvh!important;
    padding:0!important;overflow:hidden!important;
    border-radius:0 22px 22px 0!important;
    background:linear-gradient(180deg,#ffffff 0%,#f7faff 58%,#f3f7fc 100%)!important;
    box-shadow:28px 0 80px rgba(6,30,68,.28)!important;
    z-index:2147483000!important
  }
  body.m22-lang-ur .m22-header-v66 .m22-nav-wrap{
    left:auto!important;right:0!important;inset:0 0 0 auto!important;
    border-radius:22px 0 0 22px!important;box-shadow:-28px 0 80px rgba(6,30,68,.28)!important
  }

  .m22-header-v66 .m22-mobile-menu-head{
    position:relative!important;top:auto!important;z-index:20!important;flex:0 0 auto!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;align-items:center!important;
    width:100%!important;min-height:0!important;gap:10px!important;
    padding:max(13px,env(safe-area-inset-top)) 13px 13px!important;margin:0!important;
    border:0!important;border-bottom:1px solid #dfe8f3!important;
    background:linear-gradient(145deg,#ffffff 0%,#f6faff 100%)!important;
    box-shadow:0 8px 26px rgba(11,42,82,.07)!important;
    overflow:visible!important
  }
  .m22-header-v66 .m22-mobile-menu-head:before{
    content:""!important;position:absolute!important;left:14px!important;right:14px!important;top:0!important;height:3px!important;
    border-radius:0 0 6px 6px!important;background:linear-gradient(90deg,#0a63df,#1680ff 55%,#20a8d8)!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 44px!important;width:44px!important;height:44px!important;border-radius:13px!important;
    box-shadow:0 7px 18px rgba(9,54,127,.14)!important
  }
  .m22-header-v66 .m22-mobile-menu-copy{display:flex!important;flex-direction:column!important;min-width:0!important;gap:1px!important}
  .m22-header-v66 .m22-mobile-menu-kicker{
    display:flex!important;align-items:center!important;gap:5px!important;margin-bottom:1px!important;
    color:#1670eb!important;font-size:7.4px!important;font-weight:900!important;line-height:1!important;letter-spacing:.11em!important;text-transform:uppercase!important
  }
  .m22-header-v66 .m22-mobile-menu-kicker i{width:5px!important;height:5px!important;border-radius:50%!important;background:#22a767!important;box-shadow:0 0 0 3px rgba(34,167,103,.10)!important}
  .m22-header-v66 .m22-mobile-menu-copy b{font-size:13.4px!important;line-height:1.16!important;font-weight:870!important;color:#162943!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .m22-header-v66 .m22-mobile-menu-copy small{font-size:8.6px!important;line-height:1.22!important;color:#8190a5!important;margin:1px 0 0!important}
  .m22-header-v66 .m22-mobile-menu-close{
    width:40px!important;height:40px!important;justify-self:end!important;border-radius:12px!important;
    background:#edf4fd!important;border:1px solid #d8e4f2!important;color:#29425f!important;box-shadow:none!important
  }

  /* Language control is always a separate row in normal document flow — never overlays quick actions. */
  .m22-header-v66 .m22-drawer-language{
    position:relative!important;inset:auto!important;z-index:2!important;grid-column:1/-1!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) 142px!important;align-items:center!important;
    gap:10px!important;width:100%!important;min-width:0!important;
    margin:8px 0 0!important;padding:8px 8px 8px 10px!important;
    border:1px solid #dce6f2!important;border-radius:13px!important;background:#f2f7fd!important;box-sizing:border-box!important;
    transform:none!important
  }
  .m22-header-v66 .m22-drawer-language>span{
    display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;margin:0!important;
    color:#60728b!important;font-size:9.8px!important;font-weight:820!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
  }
  .m22-header-v66 .m22-drawer-language>span i{color:#176fe8!important;font-size:11px!important}
  .m22-header-v66 .m22-drawer-language>div{
    display:grid!important;grid-template-columns:1fr 1fr!important;min-width:0!important;gap:3px!important;padding:3px!important;
    border-radius:10px!important;background:#e5edf8!important
  }
  .m22-header-v66 .m22-drawer-language a{
    display:grid!important;place-items:center!important;height:31px!important;min-width:0!important;padding:0 5px!important;
    border-radius:8px!important;color:#50627b!important;font-size:10px!important;font-weight:860!important;text-decoration:none!important
  }
  .m22-header-v66 .m22-drawer-language a.is-active{background:#fff!important;color:#075fdc!important;box-shadow:0 3px 10px rgba(18,51,96,.10)!important}

  .m22-header-v66 .m22-nav-inner{
    position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    flex:1 1 auto!important;min-height:0!important;display:block!important;
    width:100%!important;height:auto!important;max-height:none!important;
    margin:0!important;padding:14px 12px calc(20px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    transform:none!important;box-sizing:border-box!important;scrollbar-width:thin!important
  }
  .m22-header-v66 .m22-primary-nav{width:100%!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;
    width:100%!important;margin:0!important;padding:0!important;gap:9px 10px!important
  }
  .m22-header-v66 .m22-nav-list>li{grid-column:1/-1!important;width:100%!important;min-width:0!important;margin: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{
    min-height:49px!important;padding:7px 8px!important;border-radius:14px!important;
    border:1px solid #dbe5f1!important;background:#fff!important;box-shadow:0 4px 12px rgba(18,48,87,.035)!important
  }
  .m22-header-v66 .m22-nav-list>li:nth-child(-n+2)>a{
    min-height:55px!important;border-radius:14px!important;box-shadow:0 5px 14px rgba(18,48,87,.05)!important
  }
  .m22-header-v66 .m22-nav-list>li:nth-child(2)>a{box-shadow:0 9px 20px rgba(9,99,226,.17)!important}

  /* Tools are visibly separated and icon + label remain on one horizontal line. */
  .m22-header-v66 .m22-nav-tools{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;
    width:100%!important;margin:14px 0 0!important;padding:14px 0 0!important;border-top:1px solid #dfe7f1!important
  }
  .m22-header-v66 .m22-nav-tools>a,.m22-header-v66 .m22-nav-tools>button{
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
    width:100%!important;height:46px!important;gap:8px!important;padding:0 12px!important;
    border:1px solid #d9e4f0!important;border-radius:13px!important;background:#fff!important;color:#293d57!important;
    font-size:10.6px!important;font-weight:830!important;line-height:1!important
  }
  .m22-header-v66 .m22-nav-tools i{position:static!important;display:inline-grid!important;place-items:center!important;width:16px!important;height:16px!important;margin:0!important;font-size:12px!important;line-height:1!important;transform:none!important}
  .m22-header-v66 .m22-nav-tool-label{display:inline-block!important;margin:0!important;line-height:1!important;white-space:nowrap!important}

  /* Backdrop always lives below the drawer, above the page. */
  .m22-nav-backdrop{z-index:2147482990!important;background:rgba(2,12,31,.52)!important;backdrop-filter:blur(5px)!important}

  /* Dark mode parity. */
  .m22-dark .m22-header-v66 .m22-mobile-menu-head,[data-theme="dark"] .m22-header-v66 .m22-mobile-menu-head{background:linear-gradient(145deg,#111d30,#0d1728)!important;border-color:#27374d!important}
  .m22-dark .m22-header-v66 .m22-mobile-menu-copy b,[data-theme="dark"] .m22-header-v66 .m22-mobile-menu-copy b{color:#eef4fc!important}
  .m22-dark .m22-header-v66 .m22-drawer-language,[data-theme="dark"] .m22-header-v66 .m22-drawer-language{background:#111d30!important;border-color:#293a51!important}
  .m22-dark .m22-header-v66 .m22-drawer-language>div,[data-theme="dark"] .m22-header-v66 .m22-drawer-language>div{background:#0b1627!important}
  .m22-dark .m22-header-v66 .m22-nav-list>li>a,[data-theme="dark"] .m22-header-v66 .m22-nav-list>li>a,
  .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:#111d2e!important;border-color:#2a3a51!important;color:#e1e9f5!important}
}

@media (max-width:460px){
  .m22-header-v66 .m22-brand-wordmark .m22-logo-image{width:168px!important;height:46px!important}
  .m22-header-v66 .m22-header-actions-v66{min-width:78px!important;gap:4px!important}
  .m22-header-v66 .m22-header-actions-v66 .m22-search-toggle,
  .m22-header-v66 .m22-header-actions-v66 .m22-account-btn{width:38px!important;height:38px!important;min-width:38px!important}
  body .m22-header-v66 .m22-nav-wrap{width:min(394px,calc(100vw - 12px))!important;max-width:none!important}
  .m22-header-v66 .m22-mobile-menu-head{padding-left:11px!important;padding-right:11px!important}
  .m22-header-v66 .m22-drawer-language{grid-template-columns:minmax(0,1fr) 132px!important;gap:7px!important;padding-left:9px!important;padding-right:7px!important}
  .m22-header-v66 .m22-nav-inner{padding-left:11px!important;padding-right:11px!important}
  .m22-header-v66 .m22-nav-list{gap:8px!important}
}

@media (max-width:355px){
  .m22-header-v66 .m22-brand-wordmark .m22-logo-image{width:145px!important}
  .m22-header-v66 .m22-drawer-language{grid-template-columns:1fr!important;gap:7px!important}
  .m22-header-v66 .m22-drawer-language>span{white-space:normal!important}
  .m22-header-v66 .m22-drawer-language>div{width:100%!important}
}