/* =====================================================
   Edzorb Law · Carousel controls
   Arrow buttons and dots shared by every carousel
   (toppers, six reasons, ...). Load before section CSS.
   ===================================================== */

/* ---------- Arrow buttons ---------- */
.carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.carousel-btn img {
  width: 18px;
  height: 18px;
}

.carousel-prev {
  left: -60px;
}

.carousel-next {
  right: -60px;
}

/* ---------- Dots under the carousel ---------- */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--line-strong);
  cursor: pointer;
  transition: width .25s, background .25s;
}

.carousel-dot.is-active {
  width: 22px;
  background: var(--navy);
}

/* ---------- Tablet and desktop: bigger arrows, half outside the track ---------- */
@media (min-width: 601px) {
  .carousel-btn {
    width: 40px;
    height: 40px;
    margin-top: -26px;
  }

  .carousel-prev {
    left: 4
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    px;
  }

  .carousel-next {
    right: 4px;
  }
}

/* ---------- Phone: swipe instead of arrows ----------
   The arrows sit outside the track and made the page scroll sideways. */
@media (max-width: 600px) {
  .carousel-btn {
    display: none;
  }
}


/* Toppers section: Laurel leaves amber color */
.results .laurel {
  filter: brightness(0) saturate(100%)
          invert(65%) sepia(98%)
          saturate(1200%) hue-rotate(2deg)
          brightness(102%) contrast(101%);
}