/* ============================================
   Carousel Dots — reusable dot navigation
   Apply to any carousel with .fq-dots or .img-dots
   ============================================ */

/* Container */
.fq-dots,
.img-dots {
  display: flex;
  gap: .8rem;
  align-items: flex-end;
}

.fq-dots { margin-top: 2rem; }
.img-dots { margin-top: .5rem; }
.img-dots.right { justify-content: flex-end; }

/* Dot button */
.fq-dots button,
.img-dots button {
  position: relative;
  width: 26px;
  height: 2px;
  background: var(--hair);
  transition: background .4s, width .3s, height .3s;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Invisible hit area for easier clicking */
.fq-dots button::before,
.img-dots button::before {
  content: '';
  position: absolute;
  inset: -10px -5px;
  z-index: 1;
}

/* Hover expand */
.fq-dots button:hover,
.img-dots button:hover {
  width: 36px;
  height: 4px;
}

/* Active state */
.fq-dots button.on,
.img-dots button.on {
  background: var(--maroon);
}