#searchButton {
  padding: 1.2vh 2.4vw;
  font-size: 0.9rem;
  background-color: var(--primary-color);
  color: var(--text-color);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  /* START: User Request */
  opacity: 0.85; /* 15% transparent */
  /* END: User Request */
}

/* Force white text for the search button on all themes except light-yellow, across mobile and desktop */
[data-theme]:not([data-theme="light-yellow"]) #searchButton {
  color: #ffffff !important;
}

/* Exception: keep black text for the light-yellow theme */
[data-theme="light-yellow"] #searchButton {
  color: #000000 !important;
}

[data-theme^="light"] #searchButton {
  color: #000000 !important;
  background-color: var(--primary-color) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme^="light"] #searchButton:hover,
[data-theme^="light"] #searchButton:focus,
[data-theme^="light"] #searchButton:active {
  color: #ffffff !important;
}

.sidebar-toggle {
  position: fixed;
  left: 2vw;
  top: 2vh;
  z-index: 1000;
  background: transparent; /* Changed from var(--primary-color) */
  border: none;
  color: var(--text-color);
  padding: 10px; /* Use square padding for a circular/square button */
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Add subtle hover effect for visual feedback since background is transparent */
.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.0); 
}

/* small cat icon styling to match color and sizing */
.cat-head-icon {
    width: 35px; /* was 46px; 25% smaller */
    height: 35px; /* was 46px; 25% smaller */
    object-fit: contain;
    filter: none; /* Always white */
}

/* Override: For all light themes where primary color is light, invert the white icon to dark */
[data-theme^="light"] .sidebar-toggle .cat-head-icon {
    /* remove invert to keep icon white */
    filter: none !important;
}

/* Add filter reset on hover for light themes to match the change to white hover text color */
[data-theme^="light"] .sidebar-toggle:hover .cat-head-icon,
[data-theme^="light"] .sidebar-toggle:active .cat-head-icon {
    filter: none !important; /* Restore to white/light color on hover if button BG darkens */
}

/* NEW: In light themes, replace the white image with a themed-color masked cat icon */
[data-theme^="light"] .sidebar-toggle .cat-head-icon {
    display: none !important; /* hide the white PNG */
}

[data-theme^="light"] .sidebar-toggle::before {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    background-color: var(--primary-color);
    -webkit-mask-image: url("/cat-head2.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("/cat-head2.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* NEW: Force black cat icon specifically for light-yellow theme */
[data-theme="light-yellow"] .sidebar-toggle::before {
    background-color: #000000;
}

/* --- Responsive Adjustments for new icon --- */
@media (max-width: 768px) {
    .sidebar-toggle {
        padding: 6px; /* Reduced padding for smaller mobile button */
        /* Make the entire button roughly 25% smaller on mobile */
        transform: scale(0.75);
        transform-origin: top left;
        /* Reduce font size by 2 points for any text inside the button */
        font-size: calc(1rem - 2pt);
    }
    .cat-head-icon {
        /* Reduce icon size a further ~25% on mobile */
        width: 26px;
        height: 26px;
        /* Ensure white color on mobile too */
        filter: none !important;
    }
    /* NEW: Match masked icon size on mobile light themes */
    [data-theme^="light"] .sidebar-toggle::before {
        width: 26px;
        height: 26px;
    }
}

/* Force white text for the categories (sidebar toggle) button on all themes except light-yellow, across mobile and desktop */
[data-theme]:not([data-theme="light-yellow"]) .sidebar-toggle {
  color: #ffffff !important;
}

/* Exception: keep black text for the light-yellow theme */
[data-theme="light-yellow"] .sidebar-toggle {
  color: #000000 !important;
}

/* Interaction color rules: default interactive color -> dark gray, except light-yellow theme flips on hover */
[data-theme] #searchButton:hover,
[data-theme] #searchButton:focus,
[data-theme] #searchButton:active,
[data-theme] .sidebar-toggle:hover,
[data-theme] .sidebar-toggle:focus,
[data-theme] .sidebar-toggle:active {
  color: #333333 !important; /* Dark gray on hover/click for all themes */
}

/* Override: For all non-light (dark) themes make hover/click text white for search and categories buttons */
[data-theme]:not([data-theme^="light"]) #searchButton:hover,
[data-theme]:not([data-theme^="light"]) #searchButton:focus,
[data-theme]:not([data-theme^="light"]) #searchButton:active,
[data-theme]:not([data-theme^="light"]) .sidebar-toggle:hover,
[data-theme]:not([data-theme^="light"]) .sidebar-toggle:focus,
[data-theme]:not([data-theme^="light"]) .sidebar-toggle:active {
  color: #ffffff !important;
}

/* Light-yellow: default dark gray, hover/click -> white */
[data-theme="light-yellow"] #searchButton,
[data-theme="light-yellow"] .sidebar-toggle {
  color: #333333 !important; /* Default text color for light-yellow theme should be dark gray */
}
[data-theme="light-yellow"] #searchButton:hover,
[data-theme="light-yellow"] #searchButton:focus,
[data-theme="light-yellow"] #searchButton:active,
[data-theme="light-yellow"] .sidebar-toggle:hover,
[data-theme="light-yellow"] .sidebar-toggle:focus,
[data-theme="light-yellow"] .sidebar-toggle:active {
  color: #ffffff !important; /* On hover/click show white for light-yellow theme */
}

.quick-link-btn {
  padding: 1.2vh 2.4vw;
  font-size: 0.9rem;
  background-color: var(--primary-color);
  color: var(--text-color);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  position: relative;
}

/* NEW: Professional reflective glass effect for the 6 top quick-link buttons */
.quick-link-btn {
  /* Keep shape (border-radius, padding) unchanged; enhance visuals only */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.28),
    rgba(255,255,255,0.08) 40%,
    rgba(0,0,0,0.20) 100%
  );
  border-color: rgba(255,255,255,0.3);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35);
  color: var(--text-color);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden; /* clip reflection to button shape */
}

/* Glassy highlight band across top half */
.quick-link-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 55%;
  top: 0;
  left: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.15)
  );
  opacity: 0.9;
  pointer-events: none;
}

/* Preserve text layering above reflection */
.quick-link-btn > * {
  position: relative;
  z-index: 1;
}

/* Refined hover state: flatter, slightly brighter glass */
.quick-link-btn:hover,
.quick-link-btn:focus {
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transform: translateY(0);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.35),
    rgba(255,255,255,0.12) 40%,
    rgba(0,0,0,0.25) 100%
  );
}

/* Ensure light themes keep proper contrast */
[data-theme^="light"] .quick-link-btn {
  color: #000000 !important;
  border-color: rgba(0,0,0,0.15);
}

/* Removed: .quick-link-btn.active::after indicator */
// .quick-link-btn.active::after {
//   content: '';
//   position: absolute;
//   bottom: -57px;
//   left: 50%;
//   transform: translateX(-50%);
//   width: 60px;
//   height: 52px;
//   background-color: var(--lighter-primary-color);
//   -webkit-mask-image: url("/ss-tr.png");
//   -webkit-mask-repeat: no-repeat;
//   -webkit-mask-position: center;
//   -webkit-mask-size: contain;
//   mask-image: url("/ss-tr.png");
//   mask-repeat: no-repeat;
//   mask-position: center;
//   mask-size: contain;
//   /* remove: background-image, background-size, background-repeat, background-position, filter */
// }

/* New: Hover state removes shadow and flattens the button (Flat state) */
.quick-link-btn:hover,
.quick-link-btn:focus {
    box-shadow: none;
    transform: translateY(0);
}

/* Force white text for the search button on all themes except light-yellow, across mobile and desktop */
[data-theme]:not([data-theme="light-yellow"]) .quick-link-btn {
  color: #ffffff !important;
}

/* Exception: keep black text for the light-yellow theme */
[data-theme="light-yellow"] .quick-link-btn {
  color: #000000 !important;
}

[data-theme^="light"] .quick-link-btn {
  color: #000000 !important;
  background-color: var(--primary-color) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme^="light"] .quick-link-btn:hover,
[data-theme^="light"] .quick-link-btn:focus,
[data-theme^="light"] .quick-link-btn:active {
  color: #ffffff !important;
}

/* Interaction color rules: default interactive color -> dark gray, except light-yellow theme flips on hover */
[data-theme] .quick-link-btn:hover,
[data-theme] .quick-link-btn:focus,
[data-theme] .quick-link-btn:active,
[data-theme] .sidebar-toggle:hover,
[data-theme] .sidebar-toggle:focus,
[data-theme] .sidebar-toggle:active {
  color: #333333 !important; /* Dark gray on hover/click for all themes */
}

/* Override: For all non-light (dark) themes make hover/click text white for search and categories buttons */
[data-theme]:not([data-theme^="light"]) .quick-link-btn:hover,
[data-theme]:not([data-theme^="light"]) .quick-link-btn:focus,
[data-theme]:not([data-theme^="light"]) .quick-link-btn:active,
[data-theme]:not([data-theme^="light"]) .sidebar-toggle:hover,
[data-theme]:not([data-theme^="light"]) .sidebar-toggle:focus,
[data-theme]:not([data-theme^="light"]) .sidebar-toggle:active {
  color: #ffffff !important;
}

/* Light-yellow: default dark gray, hover/click -> white */
[data-theme="light-yellow"] .quick-link-btn,
[data-theme="light-yellow"] .sidebar-toggle {
  color: #333333 !important; /* Default text color for light-yellow theme should be dark gray */
}
[data-theme="light-yellow"] .quick-link-btn:hover,
[data-theme="light-yellow"] .quick-link-btn:focus,
[data-theme="light-yellow"] .quick-link-btn:active,
[data-theme="light-yellow"] .sidebar-toggle:hover,
[data-theme="light-yellow"] .sidebar-toggle:focus,
[data-theme="light-yellow"] .sidebar-toggle:active {
  color: #ffffff !important; /* On hover/click show white for light-yellow theme */
}

.search-container { 
  display: none !important; 
}

.trailer-info-display { text-align: center; } 

.trailer-info-display .trailer-line {
  margin: 0.25rem 0 0 0;
  font-size: 0.95rem;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  align-items: center;
}

.trailer-info-display .trailer-length {
  font-weight: 600;
  color: var(--primary-color);
}

.sort-rating-ball {
    /* position: absolute; */ 
    left: calc(100% + 20px);
    /* removed: right: -20px; */
    top: 50%;
    transform: translate(-50%, -50%);
}

/* START: Update Category Display Interaction Styles */
/* Ensure result-count looks clickable */
.category-prefix .result-count { cursor: pointer; text-decoration: underline; }
/* New: Category main term is no longer a slideshow trigger. */

.slideshow-trigger-button {
    background-color: var(--primary-color);
    color: #ffffff !important;
    border: none; /* remove border */
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    
    margin-left: 15px; /* Requested 15 pixels of spacing between the term and the button */
    flex-shrink: 0;
}

.slideshow-trigger-button:hover {
    background-color: var(--lighter-primary-color);
    box-shadow: 0 0 10px var(--lighter-primary-color);
    transform: scale(1.05);
}

.slideshow-trigger-button svg {
    stroke: #ffffff !important;
    fill: none;
}

[data-theme^="light"] .slideshow-trigger-button {
    color: #ffffff !important;
}

[data-theme^="light"] .slideshow-trigger-button:hover {
    background-color: var(--primary-color);
    color: #000000 !important;
    box-shadow: 0 0 10px var(--primary-color);
}
/* END: Update Category Display Interaction Styles */


/* --- GENRE ITEM COLORS (from base.css overrides) --- */

.genre-item {
  font-size: 1rem;
  /* Subtract ~3px from previous padding on all sides for a slightly smaller button */
  padding: calc(1.2vh - 3px) calc(1.5vh - 3px);
  margin: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--primary-color); /* CHANGED: match hover background */
  border-radius: 16px; /* More rounded to support glass pill look */
  text-align: center;
  font-weight: 500;
  border: 1px solid var(--primary-color); /* CHANGED: match hover border */
  position: relative;          /* Needed for glass reflection overlay */
  overflow: hidden;            /* Clip reflection to button shape */
  
  /* Center text horizontally and vertically */
  display: flex;
  align-items: center;
  justify-content: center;

  /* CHANGED: apply hover visual by default */
  color: var(--text-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Flying clone of a genre button that animates from sidebar to category header */
.genre-fly-clone {
  z-index: 6000;
  pointer-events: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
}

.genre-item:hover {
  /* CHANGED: keep same look but slightly stronger hover feedback */
  background: var(--primary-color);
  color: var(--text-color) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
  border-color: var(--primary-color);
}

/* Glass reflection over the top half to suggest a rounded 3D glass surface */
.genre-item::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 50%; /* top half */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.1)
  );
  border-radius: inherit;
  opacity: 0.75;
  pointer-events: none;
}

.genre-header {
  font-size: 1.1rem; /* UPDATED: Slightly larger */
  font-weight: 800; /* UPDATED: Bolder */
  padding: 2vh 0 1.5vh 0; /* UPDATED: More vertical padding */
  margin: 2vh 0 1vh 0; /* UPDATED: Better section separation */
  text-align: left;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 1.5px; /* NEW: Better spacing between letters */
  border-bottom: 2px solid var(--primary-color); /* NEW: Underline for emphasis */
  grid-column: 1 / -1;
}

/* First header should have less top margin */
.genre-header:first-of-type {
  margin-top: 0;
}

[data-theme^="light"] .genre-item {
  color: #6ab7ff;
}

[data-theme="light-green"] .genre-item {
  color: #86df8a;
}

[data-theme="light-purple"] .genre-item {
  color: #bd94c7;
}

[data-theme="light-orange"] .genre-item {
  color: #ffcc80;
}

[data-theme="light-red"] .genre-item {
  color: #ff8a80;
}

[data-theme="light-teal"] .genre-item {
  color: #80cbc4;
}

[data-theme="light-brown"] .genre-item {
  color: #a1887f;
}

[data-theme="light-gray"] .genre-item {
  color: #bdbdbd;
}

[data-theme="light-pink"] .genre-item {
  color: #f48fb1;
}

[data-theme="light-yellow"] .genre-item {
  color: #fff176;
}

/* Ensure genre headers contrast correctly */
[data-theme="dark"] .genre-header,
[data-theme="blue"] .genre-header,
[data-theme="green"] .genre-header,
[data-theme="purple"] .genre-header,
[data-theme="orange"] .genre-header,
[data-theme="red"] .genre-header,
[data-theme="teal"] .genre-header,
[data-theme="brown"] .genre-header,
[data-theme="gray"] .genre-header {
  color: #ffffff !important;
}

[data-theme^="light"] .genre-header {
  color: #ffffff !important;
}

.show-more-button {
  margin: 10px auto 20px auto;
  display: none;
  padding: 10px 18px;
  font-size: 1rem;
  background-color: var(--primary-color);
  color: #ffffff !important;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.2s ease;
  font-weight: 700;
}
.show-more-button:hover { opacity: 0.85; transform: scale(1.03); }
[data-theme^="light"] .show-more-button { color: #ffffff !important; }