:root {
  --fn-scrollbar-size: 4px;
  --fn-scrollbar-thumb: rgba(255, 138, 0, 0.42);
  --fn-scrollbar-thumb-hover: rgba(255, 154, 46, 0.68);
  --fn-scrollbar-track: rgba(255, 255, 255, 0.04);
}

/*
  Horizontal swipe rails (chip rows, card carousels).
  Prefer adding .fn-h-scroll; set gap/padding/snap in the component.
*/
.fn-h-scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}

.fn-h-scroll::-webkit-scrollbar {
  display: none;
}

.fn-h-scroll > * {
  flex: 0 0 auto;
}

/* Desktop prev/next for horizontal rails (hidden below 960px). */
.fn-h-scroll-shell {
  position: relative;
  min-width: 0;
}

.fn-h-scroll-btn {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  border-radius: var(--fn-radius-control, 6px);
  border: 1px solid var(--fn-border, #252930);
  background: var(--fn-card, #16181d);
  color: var(--fn-text, #f2f2f4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.fn-h-scroll-btn .fn-icon,
.fn-h-scroll-btn [data-fn-icon] {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

.fn-h-scroll-btn-prev {
  left: 6px;
}

.fn-h-scroll-btn-next {
  right: 6px;
}

.fn-h-scroll-btn:hover:not(:disabled) {
  border-color: var(--fn-accent, #ff8a00);
  color: var(--fn-accent, #ff8a00);
}

.fn-h-scroll-btn:disabled,
.fn-h-scroll-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.fn-h-scroll-btn:focus-visible {
  outline: 2px solid var(--fn-accent, #ff8a00);
  outline-offset: 2px;
}

@media (min-width: 960px) {
  .fn-h-scroll-btn:not([hidden]) {
    display: inline-flex;
  }
}

/* Reusable utility — add .fn-scroll to any new scroll container. */
.fn-scroll,
.tour-lists-dock,
.venue-tour-list-sheet-items,
.search-suggestions,
.account-venue-list-rich,
.account-nav-scroll,
.account-user-panel,
#account-info-modal,
.venue-reviews-dock-body,
.venue-reviews-dock-photos,
.venue-reviews-photo-thumbs,
.regional-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--fn-scrollbar-thumb) transparent;
}

.fn-scroll::-webkit-scrollbar,
.tour-lists-dock::-webkit-scrollbar,
.venue-tour-list-sheet-items::-webkit-scrollbar,
.search-suggestions::-webkit-scrollbar,
.account-venue-list-rich::-webkit-scrollbar,
.account-nav-scroll::-webkit-scrollbar,
.account-user-panel::-webkit-scrollbar,
#account-info-modal::-webkit-scrollbar,
.venue-reviews-dock-body::-webkit-scrollbar,
.venue-reviews-dock-photos::-webkit-scrollbar,
.venue-reviews-photo-thumbs::-webkit-scrollbar,
.regional-table-wrap::-webkit-scrollbar {
  width: var(--fn-scrollbar-size);
  height: var(--fn-scrollbar-size);
}

.fn-scroll::-webkit-scrollbar-track,
.tour-lists-dock::-webkit-scrollbar-track,
.venue-tour-list-sheet-items::-webkit-scrollbar-track,
.search-suggestions::-webkit-scrollbar-track,
.account-venue-list-rich::-webkit-scrollbar-track,
.account-nav-scroll::-webkit-scrollbar-track,
.account-user-panel::-webkit-scrollbar-track,
#account-info-modal::-webkit-scrollbar-track,
.venue-reviews-dock-body::-webkit-scrollbar-track,
.venue-reviews-dock-photos::-webkit-scrollbar-track,
.venue-reviews-photo-thumbs::-webkit-scrollbar-track,
.regional-table-wrap::-webkit-scrollbar-track {
  margin: 0.12rem 0;
  background: var(--fn-scrollbar-track);
  border-radius: 999px;
}

.fn-scroll::-webkit-scrollbar-thumb,
.tour-lists-dock::-webkit-scrollbar-thumb,
.venue-tour-list-sheet-items::-webkit-scrollbar-thumb,
.search-suggestions::-webkit-scrollbar-thumb,
.account-venue-list-rich::-webkit-scrollbar-thumb,
.account-nav-scroll::-webkit-scrollbar-thumb,
.account-user-panel::-webkit-scrollbar-thumb,
#account-info-modal::-webkit-scrollbar-thumb,
.venue-reviews-dock-body::-webkit-scrollbar-thumb,
.venue-reviews-dock-photos::-webkit-scrollbar-thumb,
.venue-reviews-photo-thumbs::-webkit-scrollbar-thumb,
.regional-table-wrap::-webkit-scrollbar-thumb {
  background: var(--fn-scrollbar-thumb);
  border-radius: 999px;
}

.fn-scroll::-webkit-scrollbar-thumb:hover,
.tour-lists-dock::-webkit-scrollbar-thumb:hover,
.venue-tour-list-sheet-items::-webkit-scrollbar-thumb:hover,
.search-suggestions::-webkit-scrollbar-thumb:hover,
.account-venue-list-rich::-webkit-scrollbar-thumb:hover,
.account-nav-scroll::-webkit-scrollbar-thumb:hover,
.account-user-panel::-webkit-scrollbar-thumb:hover,
#account-info-modal::-webkit-scrollbar-thumb:hover,
.venue-reviews-dock-body::-webkit-scrollbar-thumb:hover,
.venue-reviews-dock-photos::-webkit-scrollbar-thumb:hover,
.venue-reviews-photo-thumbs::-webkit-scrollbar-thumb:hover,
.regional-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--fn-scrollbar-thumb-hover);
}