/*
 * Source-first reminder for this file:
 * - 元サイトの施工実績スライダーで見えるドットナビを WordPress 側でも安定して再現する。
 * - Themify の旧 tf_carousel_bullet 系と、現在補完で使う tf_swiper-pagination-bullet 系の両方へ同じ見た目を当てる。
 * - PC では全ドットを自然表示し、モバイルでは JS 側の 16 個窓制御と矛盾しない寸法を保つ。
 */

.tf_carousel_bullets,
.tf_swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  line-height: 1;
  font-size: 0;
}

.tf_carousel_bullets .tf_carousel_bullet,
.tf_swiper-pagination .tf_swiper-pagination-bullet {
  display: inline-block !important;
  flex: 0 0 auto;
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  min-height: 7px !important;
  margin: 0;
  border-radius: 999px;
  border: 0;
  background: #6f6f6f;
  opacity: 1;
  box-shadow: none;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.tf_carousel_bullets .tf_carousel_bullet.selected,
.tf_carousel_bullets .tf_carousel_bullet-active,
.tf_swiper-pagination .tf_swiper-pagination-bullet-active {
  background: #ea5b2a;
  transform: none;
}

.post-slider-home .tf_swiper-pagination-clip {
  display: block;
  margin: 18px auto 0;
}

.post-slider-home .tf_swiper-pagination {
  margin-top: 18px;
  min-height: 14px;
  transition: transform .25s ease;
}

@media (max-width: 680px) {
  .tf_carousel_bullets,
  .tf_swiper-pagination {
    gap: 5px;
  }

  .tf_carousel_bullets .tf_carousel_bullet,
  .tf_swiper-pagination .tf_swiper-pagination-bullet {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    min-height: 5px !important;
  }

  .post-slider-home .tf_swiper-pagination-clip {
    max-width: calc(100vw - 80px);
    overflow: hidden;
    margin-top: 14px;
  }

  .post-slider-home .tf_swiper-pagination {
    margin-top: 0;
    min-height: 10px;
    flex-wrap: nowrap;
    width: max-content;
  }

  .tf_swiper-pagination-clip {
  margin: 0 auto !important;
}

  .tf_swiper-pagination.swiper-pagination.tf_swiper-pagination-clickable.tf_swiper-pagination-bullets {
  margin-top: 0 !important;
  }

}