/* 22Media Premium Pro v6.59 — premium swipe controls for Trending + Weather */

@media (max-width:700px){
  .m22-trending-items,
  .m22-weather-grid{
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth;
    scroll-padding-inline:1px;
  }

  .m22-rail-nav{
    position:relative;
    z-index:4;
    width:100%;
    min-height:38px;
    margin:9px 0 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    direction:ltr;
    user-select:none;
  }
  .m22-rail-nav[hidden]{display:none!important}
  .m22-rail-arrow{
    appearance:none;
    -webkit-appearance:none;
    width:34px;
    height:34px;
    min-width:34px;
    padding:0;
    margin:0;
    border:1px solid rgba(12,66,170,.14);
    border-radius:11px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.94);
    color:#075ee8;
    box-shadow:0 7px 18px rgba(9,55,145,.09);
    font-size:11px;
    line-height:1;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .m22-rail-arrow:active{transform:scale(.94)}
  .m22-rail-arrow:disabled{opacity:.34;box-shadow:none;cursor:default}
  .m22-rail-dots{
    max-width:160px;
    min-height:20px;
    padding:0 2px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    overflow:hidden;
  }
  .m22-rail-dot{
    appearance:none;
    -webkit-appearance:none;
    width:6px;
    height:6px;
    min-width:6px;
    padding:0;
    margin:0;
    border:0;
    border-radius:999px;
    background:#b8c7dc;
    opacity:.82;
    cursor:pointer;
    transition:width .2s ease, background .2s ease, opacity .2s ease, transform .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .m22-rail-dot.is-active{
    width:19px;
    background:#0967ec;
    opacity:1;
  }
  .m22-rail-dot:active{transform:scale(.86)}

  /* Trending controls stay compact and visually attached to the news rail. */
  .m22-trending-strip .m22-rail-nav{
    margin-top:7px;
    padding-top:2px;
  }

  /* Weather uses an inverted control treatment so it belongs to the blue panel. */
  .m22-weather-center .m22-rail-nav{
    margin:10px 0 1px;
  }
  .m22-weather-center .m22-rail-arrow{
    border-color:rgba(255,255,255,.20);
    background:rgba(255,255,255,.10);
    color:#fff;
    box-shadow:none;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .m22-weather-center .m22-rail-arrow:disabled{opacity:.30}
  .m22-weather-center .m22-rail-dot{background:rgba(255,255,255,.38)}
  .m22-weather-center .m22-rail-dot.is-active{background:#fff}
  .m22-weather-center .m22-weather-credit{margin-top:5px!important}

  /* Keep swipe behavior natural in Urdu while controls remain predictable. */
  body.m22-lang-ur .m22-trending-items a,
  body.m22-lang-ur .m22-weather-grid article{direction:rtl;text-align:right}
}

@media (min-width:701px){
  .m22-rail-nav{display:none!important}
}

body.m22-dark .m22-trending-strip .m22-rail-arrow,
[data-theme="dark"] .m22-trending-strip .m22-rail-arrow{
  background:#151f30;
  border-color:#2b3a50;
  color:#68a4ff;
  box-shadow:none;
}
body.m22-dark .m22-trending-strip .m22-rail-dot,
[data-theme="dark"] .m22-trending-strip .m22-rail-dot{background:#52647e}
body.m22-dark .m22-trending-strip .m22-rail-dot.is-active,
[data-theme="dark"] .m22-trending-strip .m22-rail-dot.is-active{background:#5d9cff}

@media (prefers-reduced-motion:reduce){
  .m22-trending-items,.m22-weather-grid{scroll-behavior:auto!important}
  .m22-rail-arrow,.m22-rail-dot{transition:none!important}
}