/* --- CATEGORY HEADER & SORTING --- */

.category-header-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2vh;
    min-height: 40px;
}

.top-category-header {
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  padding: 8px 16px;
  color: var(--text-color) !important;
  text-transform: uppercase;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.category-idle-carousel {
  font-family: 'Righteous', sans-serif;
  font-size: 1.2rem;
  padding: 8px 16px;
  color: var(--text-color) !important;
  text-transform: uppercase;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  letter-spacing: 0.12em;
}

/* Letter animations for Hollywood effect */
.category-main-term { display: inline-flex; align-items: baseline; gap: 0.08em; }
.category-letter { display: inline-block; opacity: 0; transform-origin: center; }

/* Sort Ball */
.sort-rating-ball {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary-color); color: var(--text-color);
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; z-index: 500;
    position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
    opacity: 0; pointer-events: none;
}
.sort-rating-ball.visible { opacity: 1; pointer-events: auto; }
.sort-rating-ball::after { content: '▼'; font-size: 0.8em; }
.sort-rating-ball.asc::after { content: '▲'; }

[data-theme^="light"] .sort-rating-ball { color: #000000 !important; }