/* =============================================================================
   SLICK SLIDER — reusable slider components
   Applied: course listing, testimonials, sneak-peek (used on multiple pages)
   Key selectors: .cs-slider-course-lists | .cs-testimonials-slider
                  #cs-slider-testimonial-section
   ============================================================================= */

/* ---- Course listing slider arrows ---- */
.cs-slider-course-lists {
  & button.slick-arrow {
    display: flex;
    width: var(--Spacing-9, 3.5rem);
    height: var(--Spacing-9, 3.5rem);
    padding: var(--Spacing-0, 0.65625rem);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 1.75rem;
    background: linear-gradient(180deg, #fff 0%, #c7d4ff 79.5%);
  }
  & button.slick-prev {
    rotate: 180deg;
    position: absolute;
    z-index: 49;
    top: 50%;
    transform: translate(50%, 50%);
  }
  & button.slick-next {
    position: absolute;
    z-index: 49;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
}

/* ---- Testimonials slider dots ---- */
.cs-testimonials-slider {
  & .slick-dots {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    padding: 1rem 0;
    list-style-type: none;

    li {
      margin: 0 0.25rem;
    }
    & button {
      display: block;
      width: 1rem;
      height: 1rem;
      padding: 0;
      border: none;
      border-radius: 100%;
      background-color: #e7e9f2;
      text-indent: -9999px;
    }
    li.slick-active button {
      background-color: #0f217d;
    }
  }
}

/* ---- Testimonials section prev/next arrows ---- */
#cs-slider-testimonial-section .cs-testimonial-next {
  background-color: #fff;
  position: absolute;
  padding: 5px;
  left: 60%;
  bottom: 1rem;
}
#cs-slider-testimonial-section .cs-testimonial-prev {
  background-color: #fff;
  position: absolute;
  padding: 5px;
  right: 60%;
  bottom: 1rem;
}
#cs-slider-testimonial-section .slick-dots {
  margin-top: 2rem;
}

/* ---- Scrollbar thin helper ---- */
.tw-scrollbar-thin {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}