* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: "Inter", system-ui, sans-serif;
}
.star-filled {
  color: #f59e0b;
}
.star-empty {
  color: rgba(255, 255, 255, 0.2);
}

/* Horizontal scroll styling */
.overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.3) transparent;
}

.overflow-x-auto::-webkit-scrollbar {
  height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
  background: transparent;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.3);
  border-radius: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.5);
}

/* Hide sidebar scrollbar */
#sidebar-nav nav {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

#sidebar-nav nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Hide search modal scrollbar */
#search-modal-content {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

#search-modal-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* CSS Logic: Show the slide that matches the parent's data-active-slide */
#featured-carousel[data-active-slide="0"] .hero-slide[data-index="0"],
#featured-carousel[data-active-slide="1"] .hero-slide[data-index="1"],
#featured-carousel[data-active-slide="2"] .hero-slide[data-index="2"],
#featured-carousel[data-active-slide="3"] .hero-slide[data-index="3"],
#featured-carousel[data-active-slide="4"] .hero-slide[data-index="4"] {
  opacity: 1;
  pointer-events: auto;
}

/* Dot Active State */
#featured-carousel[data-active-slide="0"] .hero-dot[data-index="0"],
#featured-carousel[data-active-slide="1"] .hero-dot[data-index="1"],
#featured-carousel[data-active-slide="2"] .hero-dot[data-index="2"] {
  background-color: white;
  width: 2rem; /* Matches your 'w-8' */
}

.hero-slide {
  opacity: 0;
  pointer-events: none; /* This prevents clicking hidden slides */
  transition: opacity 0.7s ease-in-out;
}

/* Only the active slide allows clicks */
#featured-carousel[data-active-slide="0"] .hero-slide[data-index="0"],
#featured-carousel[data-active-slide="1"] .hero-slide[data-index="1"],
#featured-carousel[data-active-slide="2"] .hero-slide[data-index="2"] {
  opacity: 1;
  pointer-events: auto; /* This enables the button */
}

/* Base state for slides */
.hero-slide {
  z-index: 0;
}
/* Active state for slides */
.active-slide {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}