/* 22Media Premium Pro v6.68 — Trending rail arrows + dots on narrow desktop/tablet/mobile */

/*
 * v6.59 already creates the accessible rail controls in JavaScript. Older CSS
 * hid them above 700px, which meant a narrow desktop/tablet layout could still
 * clip Trending Now with no obvious way to move the rail. Keep normal wide
 * desktop unchanged, but turn Trending into a controlled rail whenever space
 * is constrained.
 */
@media (max-width:1100px){
  .m22-trending-strip{
    position:relative!important;
    padding-bottom:46px!important;
  }
  .m22-trending-items{
    display:flex!important;
    min-width:0!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    -webkit-overflow-scrolling:touch;
  }
  .m22-trending-items::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  .m22-trending-items>a{
    flex:0 0 clamp(220px,42vw,310px)!important;
    min-width:220px!important;
    scroll-snap-align:center!important;
    scroll-snap-stop:normal;
  }
  .m22-trending-strip>.m22-rail-nav{
    display:flex!important;
    position:absolute!important;
    z-index:8;
    left:0!important;
    right:0!important;
    bottom:7px!important;
    width:100%!important;
    min-height:34px!important;
    margin:0!important;
    padding:0 12px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    direction:ltr!important;
  }
  .m22-trending-strip>.m22-rail-nav[hidden]{display:none!important}
  .m22-trending-strip .m22-rail-arrow{
    width:31px!important;
    height:31px!important;
    min-width:31px!important;
    border-radius:10px!important;
    border:1px solid #d8e3f2!important;
    background:#fff!important;
    color:#0967ec!important;
    box-shadow:0 6px 16px rgba(12,53,120,.08)!important;
  }
  .m22-trending-strip .m22-rail-arrow:disabled{opacity:.28!important;box-shadow:none!important}
  .m22-trending-strip .m22-rail-dots{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    max-width:170px!important;
    min-height:18px!important;
  }
  .m22-trending-strip .m22-rail-dot{
    width:6px!important;
    height:6px!important;
    min-width:6px!important;
    border:0!important;
    border-radius:999px!important;
    padding:0!important;
    background:#bac8db!important;
    opacity:.9!important;
  }
  .m22-trending-strip .m22-rail-dot.is-active{
    width:19px!important;
    background:#0967ec!important;
    opacity:1!important;
  }
}

@media (max-width:620px){
  .m22-trending-strip{padding-bottom:45px!important}
  .m22-trending-items>a{flex-basis:min(82vw,285px)!important;min-width:min(82vw,285px)!important}
}

body.m22-dark .m22-trending-strip .m22-rail-arrow,
[data-theme="dark"] .m22-trending-strip .m22-rail-arrow{
  background:#151f30!important;
  border-color:#2b3a50!important;
  color:#76aaff!important;
}
body.m22-dark .m22-trending-strip .m22-rail-dot,
[data-theme="dark"] .m22-trending-strip .m22-rail-dot{background:#52647e!important}
body.m22-dark .m22-trending-strip .m22-rail-dot.is-active,
[data-theme="dark"] .m22-trending-strip .m22-rail-dot.is-active{background:#6ea7ff!important}