/**
 * 輪播共用樣式
 * dots、GPU 加速、cursor、wrapper shadow padding
 * @package mytheme
 */

/* ========================================
   分頁點
   ======================================== */

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 27px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #0b2341;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 0;
}

.slider-dot.active {
  background-color: #20285e;
}

/* ========================================
   GPU 加速 + 觸控行為
   ======================================== */

.product-carousel__slider,
.reviews-slider,
.case-studies-slider,
.extended-reading-slider {
  will-change: transform;
  touch-action: pan-y;
}

/* ========================================
   電腦版輪播拖曳視覺回饋
   ======================================== */
@media (min-width: 769px) {
  /* 拖曳游標 */
  [data-slider]:not([data-single-page]),
  .product-carousel__slider,
  .reviews-slider,
  .case-studies-slider,
  .extended-reading-slider {
    cursor: grab;
  }

  [data-slider]:not([data-single-page]).is-dragging,
  .product-carousel__slider.is-dragging,
  .reviews-slider.is-dragging,
  .case-studies-slider.is-dragging,
  .extended-reading-slider.is-dragging {
    cursor: grabbing;
    user-select: none;
  }
}

/* ========================================
   手機版
   ======================================== */

@media (max-width: 480px) {
  .slider-dots {
    margin-top: 12px;
    gap: 9px;
  }

  .slider-dot {
    border: 1px solid #0b2341;
    width: 4px;
    height: 4px;
  }
}