/* 22Media Premium Pro v6.20 — mobile drawer icon alignment & symmetry
   Keeps section icons beside their labels instead of floating in the visual center.
*/
@media (max-width:980px){
  /* Every standard navigation row uses a strict 3-column newsroom layout:
     icon | label | optional chevron. This prevents pseudo-icons from drifting
     to the center when the row width changes. */
  .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:10px!important;
    justify-content:stretch!important;
    min-height:54px!important;
    padding:8px 10px!important;
    text-align:left!important;
    overflow:hidden!important;
  }
  .m22-header-v66 .m22-nav-list>li>a:before{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    margin:0!important;
  }
  .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    width:30px!important;
    height:30px!important;
    margin:0!important;
  }
  /* Plain rows still reserve the chevron column so all labels start/end on
     identical vertical guides. */
  .m22-header-v66 .m22-nav-list>li:not(.menu-item-has-children)>a:after{
    grid-column:3!important;
    grid-row:1!important;
  }

  /* English: icon and label begin at the left edge; chevron is pinned right. */
  body.m22-lang-en .m22-header-v66 .m22-nav-list>li>a{
    direction:ltr!important;
    text-align:left!important;
  }

  /* Urdu mirrors the exact geometry: chevron left, label + icon right. */
  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>li>a:before{
    grid-column:3!important;
    justify-self:end!important;
  }
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li.menu-item-has-children>a:after{
    grid-column:1!important;
    justify-self:start!important;
  }

  /* The first two quick actions remain equal cards, but icon + label now form
     one centered horizontal group — never stacked or overlapping. */
  .m22-header-v66 .m22-nav-list>li:nth-child(1)>a,
  .m22-header-v66 .m22-nav-list>li:nth-child(2)>a{
    grid-template-columns:30px auto!important;
    justify-content:center!important;
    column-gap:8px!important;
    min-height:58px!important;
    padding:9px 10px!important;
    text-align:left!important;
    white-space:nowrap!important;
  }
  .m22-header-v66 .m22-nav-list>li:nth-child(1)>a:before,
  .m22-header-v66 .m22-nav-list>li:nth-child(2)>a:before{
    grid-column:1!important;
    justify-self:center!important;
    width:30px!important;
    height:30px!important;
  }
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li:nth-child(1)>a,
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li:nth-child(2)>a{
    direction:rtl!important;
    grid-template-columns:auto 30px!important;
    text-align:right!important;
  }
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li:nth-child(1)>a:before,
  body.m22-lang-ur .m22-header-v66 .m22-nav-list>li:nth-child(2)>a:before{
    grid-column:2!important;
  }

  /* Live is visually distinct but keeps the same alignment as every row. */
  .m22-header-v66 .m22-nav-list>li:nth-child(12)>a{
    color:#e5233f!important;
  }
  .m22-header-v66 .m22-nav-list>li:nth-child(12)>a:before{
    background:#fff1f3!important;
    color:#e5233f!important;
  }

  /* Slightly stronger spacing rhythm gives all cards the same optical height. */
  .m22-header-v66 .m22-nav-list{gap:7px!important}
  .m22-header-v66 .m22-nav-list>li>a{border-radius:13px!important}

  @media(max-width:430px){
    .m22-header-v66 .m22-nav-list>li>a{
      grid-template-columns:32px minmax(0,1fr) 29px!important;
      column-gap:9px!important;
      min-height:51px!important;
      padding:7px 9px!important;
      font-size:12.75px!important;
    }
    body.m22-lang-ur .m22-header-v66 .m22-nav-list>li>a{
      grid-template-columns:29px minmax(0,1fr) 32px!important;
    }
    .m22-header-v66 .m22-nav-list>li:nth-child(1)>a,
    .m22-header-v66 .m22-nav-list>li:nth-child(2)>a{
      grid-template-columns:28px auto!important;
      min-height:56px!important;
      column-gap:7px!important;
    }
    body.m22-lang-ur .m22-header-v66 .m22-nav-list>li:nth-child(1)>a,
    body.m22-lang-ur .m22-header-v66 .m22-nav-list>li:nth-child(2)>a{
      grid-template-columns:auto 28px!important;
    }
  }
}