* { margin: 0; padding: 0; box-sizing: border-box; }

/* AGGRESSIVE FIX: Ensure full-size display within the embedding container */
html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0 !important; 
    padding: 0 !important;
    min-height: 100vh;
}

body { 
    font-family: Arial, sans-serif; 
    background: #111; 
    color: #fff;
    transition: background 0.3s, color 0.3s; /* Add transition for smooth theme change */
}

/* New styles for Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95); /* Nearly black, transparent background */
    z-index: 20; /* Higher than other elements (like modals at z-index 15) */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    opacity: 1; /* Start visible */
    transition: opacity 0.5s ease-out, background 0.3s; /* Smooth fade-out and theme change */
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    transition: color 0.3s;
}

.loading-spinner {
    font-size: 3rem; /* Large spinner */
    color: #ffaa00; /* Neon yellow/orange from the logo */
    margin-bottom: 15px;
    filter: drop-shadow(0 0 5px rgba(255, 170, 0, 0.5)); /* Subtle glow */
    transition: color 0.3s, filter 0.3s;
}

.loading-message {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/* --- UPDATED NAVBAR STYLES FOR FADING/TRANSPARENCY AND ALIGNMENT --- */
.navbar {
  display: block; /* top-row handles flex layout */
  padding: 0 20px; /* Padding for the sides of the whole bar */
  /* FADING BACKGROUND: Opaque dark at the top, fading to transparent at the bottom edge */
  background: linear-gradient(to bottom, rgba(17, 17, 17, 0.95) 0%, rgba(17, 17, 17, 0.7) 50%, rgba(17, 17, 17, 0) 100%);
  position: sticky; 
  top: 0;
  z-index: 10;
  transition: background 0.3s, border-bottom 0.3s;
}

/* Style for the main row (Logo, Categories, Search) */
.navbar .top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0; /* Vertical padding */
    gap: 20px; /* Spacing between sections */
}

/* New Container for alignment */
.navbar .logo-container {
    display: flex;
    align-items: center;
    gap: 1px; /* Spacing between icon and text */
}

/* Style for the Icon */
.logo-icon {
    font-size: 1.8rem; /* Slightly larger than text */
    color: #ffaa00; /* Bright orange for the icon */
    filter: drop-shadow(0 0 5px rgba(255, 170, 0, 0.8)); /* Neon glow for icon */
    transition: color 0.3s, filter 0.3s;
}

/* New Logo Text Styling */
.navbar .logo-text { 
    font-size: 1.5rem; /* Larger font size */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* Neon Gradient Text Fill */
    background: linear-gradient(90deg, #ff0077, #ffaa00); /* Pink to Orange Gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback for older browsers */

    /* Enhanced Neon Glow */
    text-shadow: 
        0 0 5px rgba(255, 0, 119, 0.5), /* Pink inner glow */
        0 0 10px rgba(255, 170, 0, 0.3); /* Orange outer glow */
    
    cursor: pointer;
    transition: text-shadow 0.3s;
}

/* Apply text color to the link wrapping the logo for consistency */
.navbar .top-row a { 
    text-decoration: none; 
}

.nav-links { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex-shrink: 0; /* Prevent search/toggle from shrinking */
}

.search-bar {
  padding: 5px; border-radius: 5px; border: none;
  width: 150px; /* Keep search bar size small on desktop */
  transition: background 0.3s, color 0.3s;
}

/* NEW: Container for Categories (middle section) */
.navbar .main-nav-links {
    display: flex;
    flex-grow: 1; /* Allows it to take up the available middle space */
    justify-content: center; /* Center the links within this space */
    gap: 15px;
    flex-wrap: wrap; /* Added for responsiveness */
}

/* NEW: Style for transparent category buttons */
.navbar .main-nav-links a {
    padding: 5px 10px;
    text-decoration: none;
    color: #fff;
    background-color: transparent; /* Category background transparent */
    border-radius: 20px;
    font-size: 0.9rem;
    transition: background-color 0.2s, transform 0.2s, color 0.2s, border 0.2s; 
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border for visibility */
    flex-shrink: 0;
}

/* *** HOVER EFFECT *** */
.navbar .main-nav-links a:hover {
    background-color: rgba(255, 51, 51, 0.9); /* Highlight color: Bright Red */
    color: #fff;
    transform: scale(1.05); /* Slightly bigger on hover */
    cursor: pointer;
    border-color: rgba(255, 51, 51, 0.9);
}
/* *********************** */

.banner {
/* 🖥 Desktop: taller, more cinematic hero section */
height: 75vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center 30%;
display: flex;
align-items: flex-end; /* keep text near bottom */
padding: 40px 30px; /* more breathing room */
margin-bottom: 30px;
position: relative;
transition: background-image 1s ease-in-out, height 0.3s ease;

/* subtle gradient overlay for readability */
background-blend-mode: overlay;
}

/* 📱 Mobile/tablet optimization */
@media (max-width: 768px) {
.banner {
  height: 45vh;
  padding: 20px;
  margin-bottom: 20px;
}
}

        
/* Overlay for smoother transition/readability */
.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fading background for the banner content area */
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0.2) 50%, rgba(17, 17, 17, 1) 100%);
}

.banner-content {
    position: relative; /* Ensure content is above the overlay */
    z-index: 2;
    padding-bottom: 20px;
}

/* --- NEW STYLING FOR BANNER TITLE --- */
.banner-content h1 {
  font-size: 3rem; 
  margin-bottom: 15px;
  /* Attractive Neon Text Effect */
  color: #fff;
  text-shadow: 
      0 0 7px #ff0077, /* Pink glow */
      0 0 10px #ffaa00; /* Orange outer glow */
  line-height: 1.1;
  transition: text-shadow 0.3s, font-size 0.3s;
}
/* ------------------------------------- */

/* --- NEW STYLING FOR BANNER METADATA (Date & Rating) --- */
.banner-metadata {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px; /* Space between metadata and overview */
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.banner-detail {
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
    border-radius: 4px;
    white-space: nowrap;
}

.banner-metadata .separator {
    background: transparent;
    padding: 0;
    margin: 0 -5px;
}

.banner-metadata .stars {
    color: gold;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 8px;
}
/* -------------------------------------------------------- */

.banner-content p {
    max-width: 600px;
    font-size: 1rem;
    color: #ccc;
    line-height: 1.4;
}

/* --- NEW BANNER ACTION BUTTON STYLES --- */
.banner-actions {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.action-btn {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

.play-btn {
    background-color: #ff3333; /* Bright Red */
    color: white;
}

.play-btn:hover {
    background-color: #ff0000;
    transform: scale(1.05);
}

.details-btn {
    background-color: #444;
    color: white;
}

.details-btn:hover {
    background-color: #666;
    transform: scale(1.05);
}
/* ----------------------------------------- */


/* Row styling adjusted for arrow padding */
.row {
  margin: 20px 0; /* Only margin top/bottom */
  padding: 0 20px; /* Add horizontal padding for content/arrows */
}

.row h2 {
  margin-bottom: 10px;
  padding-left: 0; /* Ensure H2 alignment */
}

/* Wrapper for positioning arrows */
.list-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.list {
  display: flex;
  overflow-x: scroll; /* Keep scroll functionality */
  -ms-overflow-style: none; /* IE and Edge - Hide scrollbar */
  scrollbar-width: none; /* Firefox - Hide scrollbar */
  scroll-behavior: smooth; /* Smooth scrolling */
  width: 100%;
  padding: 10px 0;
}

/* WebKit browsers (Chrome, Safari) - Hide scrollbar */
.list::-webkit-scrollbar {
    display: none;
}


/* Custom Arrow Styling */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: none;
    padding: 15px 10px;
    cursor: pointer;
    z-index: 5;
    font-size: 20px;
    border-radius: 5px;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0.8;
    /* Hide the arrows on small screens for better touch scrolling */
    display: none; 
}

.scroll-arrow:hover {
    background: rgba(255, 0, 0, 1);
    opacity: 1;
}

.scroll-arrow.left {
    left: 0;
}

.scroll-arrow.right {
    right: 0;
}

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.modal-content {
  background: #222;
  padding: 20px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  text-align: center;
  border-radius: 10px;
  transition: background 0.3s, color 0.3s;
}

/* Custom scrollbar styling for the modal content */
.modal-content::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
}

.modal-content::-webkit-scrollbar-track {
  background: #222; /* Dark background to match modal */
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: #555; /* Subtle dark gray thumb */
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: #777; /* Slightly lighter on hover */
}

.close {
  position: absolute;
  top: 10px; right: 20px;
  cursor: pointer;
  font-size: 24px;
}

/* Styles for the main Video Modal body */
.modal-body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.modal-body img {
  width: 30%;
  border-radius: 5px;
}

.modal-text {
  flex: 1;
  text-align: left;
}

.modal img {
  width: 25%;
  border-radius: 5px;
}

.stars { color: gold; }


.server-selector {
  margin: 15px 0;
  text-align: left;
}

/* Styles for new TV selectors */
#tv-controls-section label,
.server-selector label {
    font-weight: bold;
    margin-right: 5px;
}

#tv-controls-section select,
.server-selector select {
    padding: 5px 8px;
    border-radius: 5px;
    border: 1px solid #555;
    background-color: #333;
    color: white;
    transition: background 0.3s, border 0.3s, color 0.3s;
}

/* --- NEW RESPONSIVE VIDEO STYLES --- */

/* Main Video Player Wrapper (Standard 16:9) */
#modal-video-wrapper {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
}

#modal-video-wrapper iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
}

.search-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 15;
  transition: background 0.3s;
}

.search-modal input {
  width: 300px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-bottom: 20px;
  transition: background 0.3s, color 0.3s;
}

.search-modal .results {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.search-modal img {
  width: 120px;
  border-radius: 5px;
  cursor: pointer;
}

.search-modal .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
}

/* Custom scrollbar styling for search results */
.search-modal .results::-webkit-scrollbar {
  width: 8px; 
}

.search-modal .results::-webkit-scrollbar-track {
  background: #111; 
  border-radius: 10px;
}

.search-modal .results::-webkit-scrollbar-thumb {
  background: #444; 
  border-radius: 10px;
}

.search-modal .results::-webkit-scrollbar-thumb:hover {
  background: #666; 
}

/* --- DETAILS MODAL STYLES (UPDATED) --- */
.details-content {
    max-width: 900px;
}

/* NEW: Attractive Title Style */
#details-modal-title {
    font-size: 2.5rem; 
    font-weight: 800;
    background: linear-gradient(90deg, #ff3333, #ffaa00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 10px rgba(255, 51, 51, 0.5), 0 0 20px rgba(255, 170, 0, 0.3);
    margin-bottom: 25px !important;
    transition: all 0.3s;
}

/* Layout changed to single column flow */
.details-body {
    display: block; /* Change from block flow */
    gap: 30px;
    text-align: left;
    margin-top: 10px;
}

.details-left {
    /* Now the main container, flow is block inside here */
    display: flex; 
    flex-direction: column; 
    gap: 20px;
}

/* Container for poster and plot/details to allow them side-by-side */
.poster-and-plot {
    display: flex;
    gap: 20px;
    /* *** ADJUSTMENT HERE: Align items to the bottom/end *** */
    align-items: flex-end; 
}

/* Poster Size Update */
.details-poster {
    width: 250px; /* Larger fixed width for the poster (Increased from 180px) */
    height: auto;
    border-radius: 8px;
    display: block;
    flex-shrink: 0; /* Prevent poster from shrinking */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

/* NEW: Container for the plot summary and key details column */
#plot-and-details-column {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between plot and key details */
    flex-grow: 1; /* Allow this column to take up remaining space */
}

/* Styling for the relocated Key Details box */
.details-metadata-box {
    padding: 15px;
    background: #333;
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    /* Removed large margin-top since it's now in the column flow */
    text-align: left;
}

.details-metadata-box h3 {
    color: #ffaa00;
    margin-bottom: 15px;
    font-size: 1.2rem;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
}

.details-metadata-box p {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.details-metadata-box strong {
    color: #fff;
}

/* REMOVED: Old .details-right styles */
/* -------------------------------- */


/* --- LIGHT MODE STYLES --- */

body.light-mode {
    background: #f0f0f0; 
    color: #333;
}

/* Light mode navbar with fading white background */
body.light-mode .navbar {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
    border-bottom: none; /* Remove border since it's now transparent/fading */
}

/* Light mode category buttons */
body.light-mode .navbar .main-nav-links a {
    background-color: transparent;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

body.light-mode .navbar .main-nav-links a.vivamax-18 {
     background-color: #f00000; /* Bright red for visibility */
     color: white; /* Ensure text is white for contrast */
     box-shadow: none;
     border-color: #f00000;
}

body.light-mode .navbar .main-nav-links a:hover {
    background-color: rgba(255, 51, 51, 0.9); /* Highlight color: Bright Red */
    color: white; /* Ensure text is white */
    transform: scale(1.05); 
    cursor: pointer;
    border-color: rgba(255, 51, 51, 0.9);
}

body.light-mode .navbar .logo-icon {
    color: #333; /* Icon switches to dark */
    filter: none;
}

/* Keep gradient but adjust shadow for light background */
body.light-mode .navbar .logo-text {
    text-shadow: 
        0 0 3px rgba(255, 0, 119, 0.1),
        0 0 6px rgba(255, 170, 0, 0.1); 
}

body.light-mode .banner-content h1 {
    color: #333;
    text-shadow: 
        0 0 3px rgba(255, 0, 119, 0.2), 
        0 0 5px rgba(255, 170, 0, 0.1); 
}

/* Light mode title update */
body.light-mode #details-modal-title {
    color: #333;
    -webkit-text-fill-color: initial;
    background: none;
    text-shadow: none;
}

/* Light Mode banner metadata */
body.light-mode .banner-metadata {
    color: #333;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

body.light-mode .banner-detail {
    background: rgba(255, 255, 255, 0.7);
}

body.light-mode .banner-metadata .stars {
    background: rgba(255, 255, 255, 0.7);
}
/* --------------------------- */


body.light-mode .search-bar {
    background: #eee;
    color: #333;
}

body.light-mode #theme-toggle {
    color: #333 !important; /* Dark icon in light mode */
    filter: none;
}

body.light-mode .modal-content,
body.light-mode .details-metadata-box { /* Targeted the new class */
    background: #fff;
    color: #333;
}

body.light-mode .details-metadata-box {
    background: #eee;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

body.light-mode .details-metadata-box h3 {
    color: #ff3333;
    border-bottom: 1px solid #ddd;
}

body.light-mode .details-metadata-box strong {
    color: #333;
}

body.light-mode #tv-controls-section select,
body.light-mode .server-selector select {
    border: 1px solid #ccc;
    background-color: #eee;
    color: #333;
}

body.light-mode .search-modal {
    background: rgba(240, 240, 240, 0.9);
}

body.light-mode .close {
    color: #ff3333 !important; 
}

body.light-mode .loading-overlay {
     background: rgba(255, 255, 255, 0.95);
}

body.light-mode .loading-content {
    color: #333;
}

body.light-mode .loading-spinner {
    color: #333;
    filter: none;
}

body.light-mode .footer {
    background: #eee;
    color: #555;
}

body.light-mode .footer-disclaimer {
    color: #999;
    border-bottom: 1px solid #ccc;
}

/* MOBILE DISPLAY START */
@media (min-width: 768px) {
    /* Show arrows on larger screens */
    .scroll-arrow {
        display: block; 
    }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 10px;
  }
  
  .navbar .top-row {
    flex-direction: column; /* Stack vertically */
    gap: 10px; /* Space between logo, categories, and search */
    align-items: center;
    padding: 10px 0; /* Add vertical padding */
  }
  
  .navbar .logo-container {
      margin-bottom: 5px;
  }

  .navbar .main-nav-links {
      flex-grow: 0; /* Don't force growth */
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px; /* Smaller gap on mobile */
  }
  
  .navbar .main-nav-links a {
      font-size: 0.75rem; /* Smaller font on mobile */
      padding: 5px 8px;
  }
  
  /* Adjust search and toggle to be in one row */
  .nav-links {
      width: 100%;
      justify-content: space-between;
      align-items: center;
      margin-top: 5px;
  }
  
  .search-bar {
      flex-grow: 1;
      margin-right: 10px;
  }

  .banner {
      height: 40vh; /* Slightly taller for mobile */
  }
    
  .banner-content h1 {
    font-size: 2.2rem;
  }
    
  .banner-content p {
    font-size: 0.9rem; /* Keep summary visible but smaller */
    max-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .banner-actions {
      flex-direction: column;
      gap: 8px;
  }
  
  .action-btn {
      width: 100%;
      justify-content: center;
  }

  .modal-body {
    flex-direction: column;
    align-items: center;
  }

  .modal-body img {
    width: 40%;
  }

  .modal-text {
    text-align: center;
  }
  
  .details-body {
      flex-direction: column;
      gap: 20px;
  }
  
  /* IMPORTANT: Mobile responsiveness for details modal */
  .poster-and-plot {
    flex-direction: column; /* Stack poster and plot/details vertically on mobile */
    align-items: center; /* Center them */
    text-align: center;
  }

  .details-poster {
      max-width: 180px; /* Adjusted size for mobile screens */
      margin: 0 auto; /* Center poster on mobile */
  }
  
  /* Ensure column content stacks on mobile */
  #plot-and-details-column {
      width: 100%;
  }

  .list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .list img {
    width: 120px;
  }

  .search-modal input {
    margin-top: 50px;
    width: 90%;
  }

  .search-modal .results {
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
  }
}

@media (max-width: 480px) {
    .row {
        padding: 0 10px; /* Reduce row padding on smallest screens */
    }
  .banner h1 {
    font-size: 1.6rem;
    padding: 5px;
  }
    
  .banner-metadata {
      font-size: 0.8rem;
  }

  .row h2 {
    font-size: 18px;
  }

  .modal-content {
    width: 95%;
    padding: 15px;
  }

  .modal-body img {
    width: 40%;
  }

  .search-modal .close {
    font-size: 24px;
    top: 10px;
    right: 20px;
  }
  
  #details-modal-title {
    font-size: 2rem;
    text-align: center;
  }
}
/* MOBILE DISPLAY END */


/* --- MOBILE FIXES FOR BANNER AND MODAL --- */
@media (max-width: 768px) {
  .banner {
    height: auto;
    min-height: 50vh;
    background-size: cover;
    background-position: center top;
    padding: 30px 15px;
  }
  .banner-content h1 {
    font-size: 1.8rem;
    line-height: 1.2;
  }
  .banner-content p {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .modal-content {
    width: 95%;
    max-height: 85vh;
    padding: 15px;
  }
  .modal-body {
    flex-direction: column;
    align-items: center;
  }
  .modal-body img {
    width: 60%;
    height: auto;
    margin-bottom: 15px;
  }
  .modal-text {
    text-align: center;
  }
}
/* --- END MOBILE FIXES --- */

.footer {
  background: #222;
  color: #ccc;
  padding: 20px;
  text-align: center;
  margin-top: 40px;
  transition: background 0.3s, color 0.3s;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-disclaimer {
    font-size: 0.8rem; /* Smaller, secondary text */
    color: #777; /* Dimmer color */
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
    transition: color 0.3s, border-bottom 0.3s;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-links a {
  color: red;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #fff;
}

/* Styling for the TMDB logo attribution */
.tmdb-attribution {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 5px 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .footer-content {
    font-size: 14px;
  }

  .footer-links {
    flex-direction: row;
    gap: 8px;
  }
  
  /* Allow categories to wrap */
  .navbar .main-nav-links a {
    flex: 1 1 auto; /* Allows items to grow/shrink based on content */
    min-width: unset;
    text-align: center;
  }
}
    

.list .card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  margin: 5px auto 0;
  text-align: center;
  height: 2.4em; /* equalize all cards */
}

.banner {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.banner.loaded {
  opacity: 1;
}

/* ===========================
   LumoStream Gradient Glow Loader
   =========================== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0b0b0b;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loading-logo {
  height: 80px;
  width: auto;
  animation: glowPulse 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 90, 0, 0.8));
}

@keyframes glowPulse {
  0% {
    filter: drop-shadow(0 0 6px rgba(255, 90, 0, 0.8))
            drop-shadow(0 0 10px rgba(255, 0, 100, 0.6));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 0, 100, 1))
            drop-shadow(0 0 35px rgba(180, 0, 255, 0.9))
            drop-shadow(0 0 50px rgba(255, 140, 0, 0.6));
    transform: scale(1.1);
  }
  100% {
    filter: drop-shadow(0 0 6px rgba(255, 90, 0, 0.8))
            drop-shadow(0 0 10px rgba(255, 0, 100, 0.6));
    transform: scale(1);
  }
}

.loading-message {
  margin-top: 15px;
  color: #ccc;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.5px;
  text-align: center;
  opacity: 0.85;
}

/* Optional smooth fade-out when hidden */
.loading-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}


/* ===============================
   LumoStream Hover & Glow Effects (Navigation/Logo Glows ONLY)
   =============================== */

/* Glow effect for logo (PRESERVED) */
.logo-container:hover .logo-icon {
  color: #ffa64d;
  text-shadow: 0 0 10px rgba(255, 77, 0, 0.7);
  transition: all 0.3s ease;
}

/* Glow for buttons or links (PRESERVED) */
a:hover, button:hover {
  color: #ffa64d !important;
  text-shadow: 0 0 10px rgba(255, 77, 0, 0.7);
  transition: all 0.3s ease;
}

/* DELETED: .movie-card:hover, .poster:hover - Removes main movie poster glow */
/* DELETED: .card:hover - Removes subtle glow from generic cards */

/* style.css - CORRECTED CSS TO PASTE */

/* 1. Define the Poster Card Wrapper (The element that will ZOOM) */
.list .poster-card { 
    width: 150px;
    height: auto; /* Ensure height adjusts to content */
    margin-right: 10px;
    cursor: pointer;
    border-radius: 5px;
    
    /* CRITICAL FIX: Stops the card from shrinking and enables scrolling */
    flex-shrink: 0; 
    
    /* Required for positioning the HD badge inside */
    position: relative; 
    display: block; 
    
    /* Apply the zoom properties to the WRAPPER */
    transform-origin: center center !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
    transform: scale(1.0); /* Base state */
    z-index: 1; /* Default state */
}

/* =================================================================
   ✅ FINAL AGGRESSIVE FIX: One Rule Set to Guarantee 1.08 Scale
      (This replaces all previous .poster-card related CSS)
   ================================================================= */

/* 1. Base Poster Card Wrapper Style (Must have position: relative and flex-shrink: 0) */
.list .poster-card { 
    width: 150px;
    height: auto;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 5px;
    
    /* CRITICAL: Allows scrolling and prevents shrinking */
    flex-shrink: 0; 
    
    /* CRITICAL: Allows badge positioning */
    position: relative; 
    display: block; 
    
    /* Apply base zoom/transition settings */
    transform-origin: center center !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
    transform: scale(1.0); 
    z-index: 1; 
}

/* 2. Poster Card Hover (The only place the zoom is set) */
.list .poster-card:hover {
    /* 👇 Guaranteed 8% zoom */
    transform: scale(1.08) !important; 
    
    /* Retain the glow effect */
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(255, 51, 51, 0.8)); 
    z-index: 5 !important;
}

/* 3. Image Styling (Must ensure the image itself does not scale) */
.list .poster-card img {
    width: 100%; 
    height: auto;
    border-radius: 5px;
    
    /* CRITICAL: Ensure no self-scaling from any old rules */
    transform: none !important;
    transition: none !important;
    filter: none !important;
}

/* 4. HD Badge Styling (Remains the same) */
.hd-badge {
    position: absolute;
    top: 5px; 
    right: 5px; 
    background-color: #ff3333; 
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 10; 
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* style.css - NEW CSS FOR RATING BADGE */
.rating-badge {
    position: absolute;
    top: 5px;
    left: 5px; /* Positions it on the top-left */
    background-color: #38bdf8; /* Bright Blue */
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 10;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Hanzo Memorial Icon Style (White Cat) --- */

/* Base style for the dark theme */
.hanzo-memorial-icon {
    font-size: 1.2rem; /* Subtle size */
    color: #ffffff; /* Hanzo's white fur */
    margin-right: 15px; /* Spacing before the theme toggle */
    transition: all 0.3s;
    cursor: default; /* Not a clickable element */
    
    /* The Glow Effect: Two layers for depth */
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7)) /* Bright center */
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)); /* Wider, softer halo */
}

/* Adapt for Light Mode for visibility */
body.light-mode .hanzo-memorial-icon {
    color: #666666; /* Subtle dark grey on a light background */
    filter: none; /* Remove the heavy glow in light mode */
}


/* === 🌟 Unified Glow Animation (Perfect Balance: Logo Pulse + Text Glow) === */

/* 🔹 Logo Glow + Pulse Animation */
@keyframes unifiedPulse {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 90, 0, 0.7))
            drop-shadow(0 0 8px rgba(255, 0, 100, 0.5));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(255, 0, 100, 0.9))
            drop-shadow(0 0 18px rgba(180, 0, 255, 0.6))
            drop-shadow(0 0 25px rgba(255, 140, 0, 0.4));
    transform: scale(1.06); /* noticeable pulse */
  }
  100% {
    filter: drop-shadow(0 0 5px rgba(255, 90, 0, 0.7))
            drop-shadow(0 0 8px rgba(255, 0, 100, 0.5));
    transform: scale(1);
  }
}

/* 🔹 Text Glow Animation (Soft Pulse with Color Depth) */
@keyframes textPulseSoft {
  0% {
    text-shadow: 
      0 0 4px rgba(255, 0, 102, 0.3),
      0 0 8px rgba(255, 0, 255, 0.2),
      0 0 12px rgba(255, 120, 255, 0.1);
    transform: scale(1);
  }
  50% {
    text-shadow: 
      0 0 6px rgba(255, 0, 102, 0.5),
      0 0 12px rgba(255, 0, 255, 0.35),
      0 0 18px rgba(255, 120, 255, 0.25);
    transform: scale(1.012);
  }
  100% {
    text-shadow: 
      0 0 4px rgba(255, 0, 102, 0.3),
      0 0 8px rgba(255, 0, 255, 0.2),
      0 0 12px rgba(255, 120, 255, 0.1);
    transform: scale(1);
  }
}

/* 🔹 Logo Styling */
.logo-container img {
  height: 30px;
  width: auto;
  vertical-align: middle;
  animation: unifiedPulse 3.6s infinite ease-in-out;
  transition: all 0.3s ease;
}

/* 🔹 Text Styling */
.logo-text {
  margin-left: 6px;
  font-weight: 600;
  font-size: 1.1rem;
  background: linear-gradient(45deg, #ff6600, #ff0099, #9c27ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
  animation: textPulseSoft 3.6s infinite ease-in-out;
}

/* Lazy-load fade-in effect */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img.is-loaded {
  opacity: 1;
}