/* ────────────────────────────────────────────────────────────────────
   custom_scroll_x.css — fixed-оверлей X, расположен под контентом
   Публичный вызов: data-custom-scroll-x / .custom-scroll-x
   ──────────────────────────────────────────────────────────────────── */

:root{
  --cs-x-height: 8px;
  --cs-x-radius: 9999px;
  --cs-x-z-inner: 60;
  --cs-x-dot-size: 8px;

  --cs-x-thumb:       rgba(148,163,184,.72);
  --cs-x-thumb-hover: rgba(59,130,246,.87);

  --cs-x-dot-alpha: 60%;
  --cs-x-dot-color:       color-mix(in srgb, var(--cs-x-thumb) 60%, transparent);
  --cs-x-dot-color-hover: color-mix(in srgb, var(--cs-x-thumb-hover) 60%, transparent);

  --cs-x-thumb-shadow: 0 0 0 1px rgba(15,23,42,.08) inset;
}

html.dark{
  --cs-x-thumb:       rgba(148,163,184,.65);
  --cs-x-thumb-hover: rgba(191,219,254,.95);
  --cs-x-thumb-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}

.cs-x-container,
.custom-scroll-x{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-width: 0;

  scroll-behavior: auto !important;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cs-x-container::-webkit-scrollbar,
.custom-scroll-x::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.cs-x-scrollbar{
  position: fixed;
  height: var(--cs-x-height);
  z-index: var(--cs-x-z-inner, 100);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: auto;
}
.cs-x-scrollbar.cs-x--on{ opacity: 1; }

.cs-x-scrollbar-inner{
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
  padding-inline: 2px;
}

.cs-x-arrow{
  pointer-events: none;
  width: var(--cs-x-dot-size);
  height: var(--cs-x-dot-size);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cs-x-dot-color);
  font-size: 0;
  line-height: 0;
  transform: translateZ(0);
}
.cs-x-scrollbar:hover .cs-x-arrow,
.cs-x-scrollbar.cs-x--dragging .cs-x-arrow{
  background: var(--cs-x-dot-color-hover);
}

.cs-x-track{
  height: var(--cs-x-height);
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.cs-x-thumb{
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--cs-x-radius);
  background: var(--cs-x-thumb);
  min-width: 28px;
  transform: translateX(0);
  touch-action: none;
  cursor: default;
  will-change: transform;
  pointer-events: auto;
  box-shadow: var(--cs-x-thumb-shadow);
}
.cs-x-thumb:hover{ background: var(--cs-x-thumb-hover); }
.cs-x-scrollbar.cs-x--dragging .cs-x-thumb{ background: var(--cs-x-thumb-hover); }

.cs-x-scrollbar.cs-x--gone{
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cs-x-scrollbar.cs-x--hidden{
  opacity: 0 !important;
}