/* ========== THUMBNAIL SCROLL & CUSTOM SCROLLBAR ========== */
/* Horizontale thumbnails + eigen scrollbar-handle onder de rij */

.thumbnail-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  max-width: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-width: none; /* Firefox: native scrollbar verbergen */
}

/* Chrome/Edge/Safari: native scrollbar verbergen */
.thumbnail-scroll::-webkit-scrollbar {
  display: none;
}

/* Rij met thumbnails onder de grote foto */
.thumbs {
  display: inline-flex;
  gap: 6px;
}

/* Losse thumbnail */
.thumb {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0.7;
  cursor: pointer;
  transition: 0.3s;
}

/* Hover-effect op thumbnail */
.thumb:hover {
  opacity: 1;
}

/* Actieve thumbnail markeren */
.thumb.active {
  border: 3px solid #0077b6;
  opacity: 1;
}

/* Custom balk onder de thumbnails (track + handle) */
.thumbbar {
  margin-top: 6px;
}

.thumbbar-track {
  position: relative;
  height: 8px;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

/* Sleepbare handle, JS past breedte/positie aan */
.thumbbar-handle {
  position: absolute;
  top: 0;
  left: 0;
  height: 8px;
  width: 40px; /* wordt overschreven door JS */
  background: #bdbdbd;
  border-radius: 8px;
  cursor: grab;
  transition: background 0.15s;
}

.thumbbar-handle:active {
  cursor: grabbing;
  background: #9e9e9e;
}

/* Tijdens drag geen smooth scroll-animatie */
.thumbnail-scroll.dragging-scroll {
  scroll-behavior: auto !important;
}