/* =======================
   THUMBNAIL SLIDER PREMIUM
======================= */
.thumbnail-slider-premium {
  width: 100%;                 /* full container width */
  max-width: 100%;             /* ensures full width */
  margin: 40px auto;
  font-family: sans-serif;
  box-sizing: border-box;
}

/* =======================
   MAIN IMAGE
======================= */
.main-image-wrapper {
  position: relative;
  width: 100%;
  height: 1280px;              /* locked height for large screens */
  overflow: hidden;
}

.main-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* cover container while keeping aspect ratio */
  display: block;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

/* =======================
   MAIN IMAGE ARROWS
======================= */
.main-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  font-size: 32px;
  padding: 12px 16px;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
  transition: background 0.3s;
}

.main-arrow:hover { background: rgba(0,0,0,0.7); }
.main-arrow.left { left: 15px; }
.main-arrow.right { right: 15px; }

/* =======================
   THUMBNAILS
======================= */
.thumbnail-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 20px;
}

.thumbnails {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  width: 100%;
}

.thumbnails::-webkit-scrollbar { height: 8px; }
.thumbnails::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.3); border-radius: 4px; }

.thumbnails img {
  flex: 0 0 auto;
  width: 140px;
  height: 90px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.7;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.thumbnails img:hover,
.thumbnails img.active { opacity: 1; transform: scale(1.05); }

/* =======================
   THUMBNAIL ARROWS
======================= */
.thumb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.3);
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 6px 10px;
  cursor: pointer;
  z-index: 2;
  display: none;
  border-radius: 50%;
  transition: background 0.3s;
}

.thumb-arrow:hover { background: rgba(0,0,0,0.6); }
.thumb-arrow.left { left: 5px; }
.thumb-arrow.right { right: 5px; }

/* =======================
   RESPONSIVE
======================= */
@media (max-width: 1920px) { .main-image-wrapper { height: 1280px; } }
@media (max-width: 1600px) { .main-image-wrapper { height: 1080px; } }
@media (max-width: 1280px) { .main-image-wrapper { height: 720px; } .thumbnails img { width: 110px; height: 70px; } }
@media (max-width: 768px)  { .main-image-wrapper { height: 480px; } .thumbnails img { width: 90px; height: 60px; } .main-arrow { font-size: 26px; padding: 8px 12px; } }
@media (max-width: 480px)  { .main-image-wrapper { height: 320px; } .thumbnails img { width: 60px; height: 40px; } .main-arrow { font-size: 22px; padding: 6px 10px; } .thumb-arrow { font-size: 18px; padding: 5px 8px; } }