/* --- CAROUSEL CORE --- */
.feature-carousel {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 60px;
  /* Removed the opacity:0 here so it relies on the wrapper's observer */
}

/* --- WRAPPER (Targeted by your JS Observer) --- */
.carousel-wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.carousel-wrapper.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- HORIZONTAL SCROLL TRACK --- */
.carousel-container {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; 
  scrollbar-width: none; 
  scroll-snap-type: x mandatory; /* Kept your logic */
}

.carousel-container::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: flex;
  gap: 20px;
  padding: 10px 6px;
}

/* --- SLIDES --- */
.carousel-slide {
  flex: 0 0 100%;
  max-width: 100%;
  margin-right: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- IMAGE (White update) --- */
.carousel-slide img {
  width: 100%;
  aspect-ratio: 4 / 3;      
  object-fit: contain;      
  background-color: #ffffff; /* Swapped from #f5f5f5 */
  border: 2px solid #ffffff;
  border-bottom: 4px solid #e5e5e5;
  border-radius: 12px;
  transition: transform .35s ease, box-shadow 0.35s ease;
  box-shadow: 0 4px 12px rgba(25, 34, 49, 0.05); /* Modern soft shadow */
}

.carousel-slide img:active {
  transform: scale(0.97);
}

/* --- TEXT --- */
.carousel-slide p {
  font-size: 18px;
  font-weight: 500;
  color: #192231;
  font-family: 'Inter', sans-serif;
  margin-top: 12px;
  max-width: 90%;
}

/* --- DOTS (Gold Update) --- */
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 10px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  background: rgba(25, 34, 49, 0.2); /* Lighter slate */
  border-radius: 50%;
  transition: all 0.25s ease;
}

.carousel-dot.active {
  background: #cfaa6e; /* Your Trophy Gold */
  transform: scale(1.4);
}

@media (max-width: 600px) {
  .carousel-slide p {
      font-size: 16px;
  }
}

/* --- FIXED CAROUSEL ICON BADGES (Raised Circular Style) --- */
.carousel-text-icon {
  /* Alignment (KEEP) */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;

  border-radius: 50%;

  /* New raised look */
  background: #ffffff;
  color: #5fa8ff; /* default icon color */

  border: 1.5px solid rgba(95,168,255,0.35);
  border-bottom: 3px solid #5fa8ff;

  box-shadow: none;

  /* Positioning and reset (KEEP) */
  margin-right: 12px;
  vertical-align: middle;
  flex-shrink: 0;
  font-style: normal !important;
  line-height: 1 !important;

  font-size: 0.95rem;
  cursor: default;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.1s ease;

  -webkit-tap-highlight-color: transparent;
}


/* Font Awesome generated content fix (KEEP) */
.carousel-text-icon::before {
  display: inline-block !important;
  vertical-align: middle !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}


/* Optional hover (if interactive) */
.carousel-text-icon:hover {
  background: #5fa8ff;
  color: #ffffff;
}


/* Pressed state */
.carousel-text-icon:active {
  background: #4a92e6;
  color: #ffffff;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}

/* ============================================================
   Icon-specific raised border colors
============================================================ */

.icon-trends {
  border-bottom-color: #3b6cff;
  border-color: rgba(59,108,255,0.35);
}

.icon-genres {
  border-bottom-color: #c05621;
  border-color: rgba(192,86,33,0.35);
}

.icon-table {
  border-bottom-color: #2d8f9c;
  border-color: rgba(45,143,156,0.35);
}

.icon-goal {
  border-bottom-color: #e0455f;
  border-color: rgba(224,69,95,0.35);
}

.icon-add {
  border-bottom-color: #3aa0e6;
  border-color: rgba(58,160,230,0.35);
}

.icon-list {
  border-bottom-color: #7c4fd6;
  border-color: rgba(124,79,214,0.35);
}

.icon-recommendations {
  border-bottom-color: #0fa89a;
  border-color: rgba(15,168,154,0.35);
}

.icon-timer {
  border-bottom-color: #cfa21b;
  border-color: rgba(207,162,27,0.35);
}

.icon-streak {
  border-bottom-color: #ff6a00;
  border-color: rgba(255,106,0,0.35);
}

.icon-profile {
  border-bottom-color: #1e63ff;
  border-color: rgba(30,99,255,0.35);
}

.icon-achievements {
  border-bottom-color: #2f8f83;
  border-color: rgba(47,143,131,0.35);
}

.icon-leaderboard {
  border-bottom-color: #d94b9c;
  border-color: rgba(217,75,156,0.35);
}

.icon-yearly {
  border-bottom-color: #5454d9;
  border-color: rgba(84,84,217,0.35);
}

/* ============================================================
   Icon-specific hover & active colors
============================================================ */

.icon-trends:hover { background: #3b6cff; color: #ffffff; }
.icon-trends:active { background: #315be0; }

.icon-genres:hover { background: #c05621; color: #ffffff; }
.icon-genres:active { background: #a6471b; }

.icon-table:hover { background: #2d8f9c; color: #ffffff; }
.icon-table:active { background: #247580; }

.icon-goal:hover { background: #e0455f; color: #ffffff; }
.icon-goal:active { background: #c63b52; }

.icon-add:hover { background: #3aa0e6; color: #ffffff; }
.icon-add:active { background: #318ac7; }

.icon-list:hover { background: #7c4fd6; color: #ffffff; }
.icon-list:active { background: #6943b8; }

.icon-recommendations:hover { background: #0fa89a; color: #ffffff; }
.icon-recommendations:active { background: #0c8f83; }

.icon-timer:hover { background: #cfa21b; color: #ffffff; }
.icon-timer:active { background: #b08a16; }

.icon-streak:hover { background: #ff6a00; color: #ffffff; }
.icon-streak:active { background: #e05c00; }

.icon-profile:hover { background: #1e63ff; color: #ffffff; }
.icon-profile:active { background: #184fd0; }

.icon-achievements:hover { background: #2f8f83; color: #ffffff; }
.icon-achievements:active { background: #26746a; }

.icon-leaderboard:hover { background: #d94b9c; color: #ffffff; }
.icon-leaderboard:active { background: #b93f86; }

.icon-yearly:hover { background: #5454d9; color: #ffffff; }
.icon-yearly:active { background: #4747b8; }

/* Specific Colors - PRESERVED */
.icon-trends { color: #3b6cff; }
.icon-genres { color: #c05621; }
.icon-table { color: #2d8f9c; }
.icon-goal { color: #e0455f;  }
.icon-add { color: #3aa0e6; }
.icon-list { color: #7c4fd6; }
.icon-recommendations { color: #0fa89a; }
.icon-timer { color: #cfa21b; }
.icon-streak { color: #ff6a00; } 
.icon-profile { color: #1e63ff; }
.icon-achievements { color: #2f8f83; }
.icon-leaderboard { color: #d94b9c; }
.icon-yearly { color: #5454d9; }

/* Responsive Icon Sizing */
@media (max-width: 768px) {
  .carousel-text-icon {
      width: 34px !important;
      height: 34px !important;
      margin-right: 8px;
  }
  .carousel-text-icon::before {
      font-size: 15px !important;
  }
}