/* Custom star colors */
.star-filled {
  color: #ffd700; /* Gold color */
}

.star-unfilled {
  color: #6c757d; /* Gray color */
}




/* Container styles: enable horizontal scroll with snap and smooth behavior */
#product-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  padding: 10px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  white-space: nowrap;
  box-sizing: border-box;
  overflow-x: auto; /* Enable scrolling */
  -webkit-overflow-scrolling: touch;
  /* Remove overflow-x: visible; which prevents scrolling and may hide content */
}

/* Make images visible and scaled properly */
.d-flex img {
  max-width: 100%;
  height: auto;
  display: block; /* Ensures images are visible and block-level */
  background-color: 0; /* Your original style */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide scrollbar for aesthetics */
#product-container::-webkit-scrollbar {
  display: none;
}

/* Style for individual product items with snap alignment */
#product-container .d-flex {
  flex-shrink: 0 !important;
  width: 300px !important;
  scroll-snap-align: start;
  display: flex !important;
}

/* Auto-scrolling animation */
@keyframes scroll-left-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

#product-container.auto-scroll {
  animation: scroll-left-right 60s linear infinite;
}

/* Pause auto-scroll on hover */
#product-container:hover.auto-scroll {
  animation-play-state: paused;
}

/* Optional: disable snap and smooth scroll on hover for manual control */
#product-container:hover {
  scroll-behavior: auto;
  scroll-snap-type: none;
}