/* SEO Indexator block: title + tabs slider + pills slider */
/* Секция: обрезка только по горизонтали, по вертикали не режем */
.seo-indexator {
  padding: 2rem 0 2.5rem;
  background: #fff;
  overflow-x: hidden;
  overflow-y: visible;
}

.seo-indexator__container {
  width: 100%;
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 1200px) {
  .seo-indexator__container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
  }
}

@media (min-width: 1400px) {
  .seo-indexator__container {
    max-width: 100%;
  }
}

.seo-indexator__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  line-height: 1.25;
  color: #212121;
  text-align: left;
}

/* Tabs wrap: полоса табов + viewport (маска) + стрелки поверх */
.seo-indexator__tabs-wrap {
  position: relative;
  margin-bottom: 1.25rem;
  min-width: 0;
  background: #2f3032;
  border-radius: 0;
}

/* Viewport: контент не вылезает за стрелки, обрезка только внутри */
.seo-indexator__viewport {
  width: 100%;
  position: relative;
  z-index: 1;
}

.seo-indexator__viewport--tabs {
  overflow: hidden;
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}

.seo-indexator__viewport--pills {
  overflow-x: hidden;
  overflow-y: visible;
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}

/* Шторки (edge): сплошная маска под стрелками, контент не просвечивает */
.seo-indexator__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 4;
  pointer-events: none;
}

.seo-indexator__tabs-wrap .seo-indexator__edge--left {
  left: 0;
  background: #2f3032;
}

.seo-indexator__tabs-wrap .seo-indexator__edge--right {
  right: 0;
  background: #2f3032;
}

.seo-indexator__pills-outer .seo-indexator__edge--left {
  left: 0;
  background: #fff;
}

.seo-indexator__pills-outer .seo-indexator__edge--right {
  right: 0;
  background: #fff;
}

/* 1) Полностью отключить дефолтные стрелки Swiper (остаётся только наш SVG) */
.seo-indexator .swiper-button-next::after,
.seo-indexator .swiper-button-prev::after,
.seo-indexator .swiper-button-next::before,
.seo-indexator .swiper-button-prev::before {
  content: none !important;
}

.seo-indexator .swiper-button-prev,
.seo-indexator .swiper-button-next {
  display: flex !important;
  background-image: none !important;
}

/* Scrollbar в блоке не показываем: только стрелки и свайп */
.seo-indexator .swiper-scrollbar {
  display: none !important;
}

/* Кнопки стрелок: поверх viewport и edge, не съедают высоту */
.seo-indexator .seo-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  right: auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #fff;
  margin: 0;
  padding: 0;
  z-index: 5;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.seo-indexator .seo-arrow-btn .seo-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.seo-indexator .seo-arrow-btn.swiper-button-disabled {
  opacity: 0.4 !important;
  cursor: default;
}

/* 5) Hover: слегка подсветить */
.seo-indexator .seo-arrow-btn:hover:not(.swiper-button-disabled) {
  transform: translateY(-50%) scale(1.03);
}

.seo-indexator .seo-tabs-prev {
  left: 12px;
}

.seo-indexator .seo-tabs-next {
  right: 12px;
}

/* Только верхние кнопки (табы): белый фон, чёрная иконка */
.seo-indexator__tabs-wrap .seo-tabs-prev,
.seo-indexator__tabs-wrap .seo-tabs-next {
  background: #ffffff;
  color: #000000;
}

.seo-indexator .seo-pills-prev {
  left: 12px;
}

.seo-indexator .seo-pills-next {
  right: 12px;
}

/* Нижние кнопки (pills): без фона, чёрные стрелки */
.seo-indexator__pills-outer .seo-pills-prev,
.seo-indexator__pills-outer .seo-pills-next {
  background: transparent;
  color: #000000;
}

/* Swiper внутри viewport: без боковых паддингов, без scrollbar (только overflow hidden/visible, не auto) */
.seo-indexator .seo-indexator__tabs.swiper-container,
.seo-indexator .seo-indexator__pills.swiper-container {
  position: relative;
  z-index: 1;
}

.seo-indexator__tabs.swiper-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.seo-indexator__tabs .swiper-wrapper {
  display: flex;
  align-items: center;
}

.seo-indexator__tabs .swiper-slide {
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seo-indexator__tab-wrap {
  height: auto;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Кнопка таба: текст по центру, перенос на 2+ строк */
.seo-indexator__tab {
  display: block;
  width: 100%;
  height: auto;
  padding: 16px 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
  transition: color 0.25s ease, background 0.25s ease, background-clip 0.25s ease;
  box-sizing: border-box;
}

/* Ховер таба — тот же градиент, что и у активного */
.seo-indexator__tab:hover {
  background: linear-gradient(to right, #f7ab47 0%, #ffd030 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Активный таб — градиентный текст */
.seo-indexator__tab.is-active {
  background: linear-gradient(to right, #f7ab47 0%, #ffd030 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Panels: без фиксированной высоты и без обрезки по низу */
.seo-indexator__panels {
  position: relative;
  min-width: 0;
}

.seo-indexator__panel {
  display: none;
  min-width: 0;
}

.seo-indexator__panel.is-active {
  display: block;
  overflow: visible;
}

.seo-indexator__panel[hidden] {
  display: none !important;
}

/* Pills outer: вертикальные отступы чтобы тени/скругления не резались */
.seo-indexator__pills-outer {
  position: relative;
  overflow: visible;
  min-width: 0;
  padding: 12px 0 16px;
}

/* 3) SVG: стрелка вниз → prev влево (+90deg), next вправо (-90deg) */
.seo-indexator .seo-tabs-prev svg,
.seo-indexator .seo-pills-prev svg {
  transform: rotate(90deg);
  display: block;
}

.seo-indexator .seo-tabs-next svg,
.seo-indexator .seo-pills-next svg {
  transform: rotate(-90deg);
  display: block;
}

.seo-indexator .seo-arrow-btn svg {
  display: block;
  transition: transform 0.2s ease;
}

/* Pills swiper: обрезка только по горизонтали, по вертикали — не режем */
.seo-indexator__pills.swiper-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.seo-indexator__pills .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.seo-indexator__pills .swiper-slide {
  min-width: 0;
  height: auto;
  box-sizing: border-box;
  display: flex;
  overflow: visible;
}

.seo-indexator__pill-wrap {
  min-width: 0;
  width: 100%;
  height: auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
}

/* Pills: равная высота в ряду, текст по центру, без обрезки */
.seo-indexator__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 14px 18px;
  margin: 0.25rem 0.125rem 0.25rem 0;
  font-size: 0.875rem;
  line-height: 1.25;
  color: #212121;
  background: #f0f0f0;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: background 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
}

.seo-indexator__pill:hover {
  background: #e0e0e0;
  color: #000;
}

/* Адаптив: viewport, edge и стрелки — планшет (<=768px), кнопка 32px */
@media (max-width: 768px) {
  .seo-indexator__viewport--tabs,
  .seo-indexator__viewport--pills {
    padding-left: 44px;
    padding-right: 44px;
  }
  .seo-indexator__edge {
    width: 44px;
  }
  .seo-indexator .seo-arrow-btn {
    width: 32px;
    height: 32px;
  }
  .seo-indexator .seo-arrow-btn svg {
    width: 12px;
    height: 9px;
  }
  .seo-indexator .seo-tabs-prev,
  .seo-indexator .seo-pills-prev {
    left: 8px;
  }
  .seo-indexator .seo-tabs-next,
  .seo-indexator .seo-pills-next {
    right: 8px;
  }
}