/* Mobile filters arrows navigation (Safari-friendly)
   Targets .stories (categories strip). Adds arrows only when overflow exists. */

.stories-nav{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stories-nav .stories{
  flex: 1 1 auto;
}

/* Arrow buttons */
.stories-arrow{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.stories-arrow[disabled]{
  opacity: .45;
  box-shadow: none;
}

html[data-theme="dark"] .stories-arrow,
body.dark .stories-arrow,
body.dark-mode .stories-arrow,
body.theme-dark .stories-arrow{
  background: #111;
  border-color: rgba(255,255,255,.18);
  color: #fff;
}

/* Only enforce non-wrapping + horizontal scrolling on small screens.
   On wider screens, let the strip render normally and arrows stay hidden. */
@media (max-width: 768px){
  .stories-nav .stories{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    touch-action: pan-x;
    scrollbar-width: none; /* Firefox */
    padding-right: 6px;
  }
  .stories-nav .stories::-webkit-scrollbar{ display:none; }
  .stories-nav .stories > *{ flex: 0 0 auto; }
}