/**
 * Horizontal swipe / scroll rows — mobile-friendly tab strips
 */

.scroll-row-viewport,
.filter-tabs-inner,
.service-tabs-viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.scroll-row-viewport::before,
.scroll-row-viewport::after,
.filter-tabs-inner::before,
.filter-tabs-inner::after,
.service-tabs-viewport::before,
.service-tabs-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.scroll-row-viewport::before,
.filter-tabs-inner::before,
.service-tabs-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--site-header-bg, var(--site-bg)), transparent);
}

.scroll-row-viewport::after,
.filter-tabs-inner::after,
.service-tabs-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--site-header-bg, var(--site-bg)), transparent);
}

.scroll-row-viewport.is-scrollable:not(.is-scroll-start)::before,
.filter-tabs-inner.is-scrollable:not(.is-scroll-start)::before,
.service-tabs-viewport.is-scrollable:not(.is-scroll-start)::before {
  opacity: 1;
}

.scroll-row-viewport.is-scrollable:not(.is-scroll-end)::after,
.filter-tabs-inner.is-scrollable:not(.is-scroll-end)::after,
.service-tabs-viewport.is-scrollable:not(.is-scroll-end)::after {
  opacity: 1;
}

.tabs-row,
.blog-filters,
.service-tabs-row,
.portal-settings-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 1rem;
  scrollbar-width: none;
}

.tabs-row::-webkit-scrollbar,
.blog-filters::-webkit-scrollbar,
.service-tabs-row::-webkit-scrollbar,
.portal-settings-tabs::-webkit-scrollbar {
  display: none;
}

.tabs-row > *,
.blog-filters > *,
.service-tabs-row > *,
.portal-settings-tabs > * {
  flex: 0 0 auto;
  scroll-snap-align: center;
}

@media (max-width: 960px) {
  .filter-tabs .filter-tabs-inner.container-custom {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  .filter-tabs .tabs-row {
    padding-inline: 1rem;
    scroll-padding-inline: 1rem;
    justify-content: flex-start;
  }

  .showcase-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    justify-content: flex-start !important;
    padding-inline: 0.75rem;
    scroll-padding-inline: 0.75rem;
    width: 100%;
    max-width: 100%;
    scrollbar-width: none;
  }

  .showcase-tabs::-webkit-scrollbar {
    display: none;
  }

  .showcase-tabs > .showcase-tab {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .blog-filters {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    margin-inline: -0.25rem;
    padding-inline: 0.75rem;
    scroll-padding-inline: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .blog-filters .filter-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (min-width: 961px) {
  .tabs-row,
  .service-tabs-row {
    scrollbar-width: thin;
  }

  .tabs-row::-webkit-scrollbar,
  .service-tabs-row::-webkit-scrollbar {
    display: block;
    height: 4px;
  }
}