/* SpOki chip-rail arrows. v1 2026-08-26.
   Gives the legacy category chip strips (nav.spoki-cat__tabs) the same left/right
   controls the quick-choice strips use. Paired with spoki-chiprail.js, which builds
   the wrapper and the buttons, so no template renders any of this markup.
   Rollback: delete this file + spoki-chiprail.js + the enqueue block in functions.php. */

.spoki-chiprail{position:relative;display:flex;align-items:center;gap:6px}
.spoki-chiprail > .spoki-cat__tabs{flex:1 1 auto;min-width:0}

/* A teal progress track AND arrows on one strip reads as duplication, so the arrows
   take over as the single affordance. spoki-hscroll.js can leave its track either
   inside or after the wrapper depending on which script ran first, so cover both. */
.spoki-chiprail > .spoki-hscroll-progress,
.spoki-chiprail + .spoki-hscroll-progress{display:none !important}

.spoki-chiprail__arrow{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid #d8dde3;background:#fff;color:#2c3340;font-size:20px;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease}
.spoki-chiprail__arrow:hover:not([disabled]){background:#f2f5f7;border-color:#b9c2cb}
.spoki-chiprail__arrow[disabled]{opacity:.3;cursor:default}
.spoki-chiprail__arrow[hidden]{display:none}
.spoki-chiprail__arrow:focus-visible{outline:2px solid #0e7d7d;outline-offset:2px}

/* Phones: two 38px buttons standing beside the row eat 88px of a 375px screen and
   leave room for two chips. So the arrows float ON the row instead of pushing it, the
   row keeps its full width, a disabled arrow is not drawn at all (nothing shifts,
   because the buttons are absolute), and a mask fades only the side that still has
   chips. Identical treatment to the quick-choice strips in spoki-quick-choices.php. */
@media (max-width:767px){
  .spoki-chiprail{display:block}
  .spoki-chiprail > .spoki-cat__tabs{scroll-padding-left:44px;scroll-padding-right:44px}
  .spoki-chiprail__arrow{position:absolute;top:calc(50% - 3px);transform:translateY(-50%);z-index:3;width:34px;height:34px;font-size:18px;border-color:#e2e7ec;box-shadow:0 2px 8px rgba(20,28,38,.16)}
  .spoki-chiprail__arrow--prev{left:0}
  .spoki-chiprail__arrow--next{right:0}
  .spoki-chiprail__arrow[disabled]{display:none}
  .spoki-chiprail.has-prev > .spoki-cat__tabs{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 46px);mask-image:linear-gradient(to right,transparent 0,#000 46px)}
  .spoki-chiprail.has-next > .spoki-cat__tabs{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 46px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 46px),transparent 100%)}
  .spoki-chiprail.has-prev.has-next > .spoki-cat__tabs{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%)}
}