@media (max-width: 768px) {
  .search-container {
    padding: 0 0;
    width: 100%;
    gap: 10px; /* Add 10px spacing between search input and search button on mobile */
  }

  .container {
    margin-left: 0;
    padding: 2vh calc(2vw + 10px);
    width: 100%;
    max-width: 100%;
  }

  /* Mobile logo size: 200x57px */
  .logo {
    width: 200px;
    height: 75px;
    max-width: none; 
  }

  .modal-content {
    margin: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 10px 10px 30px 10px;
    overflow-y: auto;
    /* Apply 30% reduction to inherited font sizes for mobile modal */
    font-size: 70%; 
  }

  /* Resize color theme ball to 70% on mobile */
  .color-ball {
    width: 35px;
    height: 35px;
  }

  /* Override for click-to-close button in mobile view (4 points smaller) */
  .modal-content .click-to-close-overlay {
      font-size: 0.65rem; /* Approx 4 points smaller than original 0.9rem */
  }

  /* Overrides for absolute REM units within the modal content (1.1rem * 0.7 = 0.77rem) */
  
  /* Buttons and Episode Info */
  .modal-content #playMovieButton,
  .modal-content #previewButton,
  .modal-content #closeTrailerButton,
  .modal-content #homeButton, /* Added Home button for mobile sizing */
  .modal-content .nav-button,
  .modal-content .episode-info,
  .modal-content .media-runtime {
      font-size: 0.77rem; 
  }

  /* Apply 25% reduction to search button and quick links on mobile */
  .quick-link-btn,
  #searchButton {
    padding: 1.125vh 2.25vw;
    font-size: 0.75rem;
  }

  /* Person/Cast links (Original 0.9rem * 0.7 = 0.63rem) */
  .modal-content .person-link,
  .modal-content .cast-link {
      font-size: 0.63rem; 
      /* Adjust padding and margin for smaller links */
      padding: 3px 7px; 
      margin: 3px 4px 3px 0; /* Adjusted vertical margin from 6px to 3px to reduce line spacing */
      border-radius: 7px; /* Explicitly set 7px radius for mobile views */
  }
  
  .video-container {
    margin-top: 2vh;
    width: 100%;
  }

  #seasonEpisodeSelector {
    flex-direction: column;
    width: 100%;
  }

  #seasonSelect,
  #episodeSelect {
    width: 100%;
    margin: 1vh 0;
  }

  /* Apply 35% reduction in font size for category/search result headers on mobile */
  .top-category-header,
  .category-display {
    font-size: 0.78rem; /* 1.2rem * 0.65 = 0.78rem */
    padding: 6px 10px;
  }

  /* Make the search input placeholder text 30% smaller on mobile */
  #searchInput {
    font-size: 0.9rem; /* Increased ~2pt for better legibility on mobile and centered text below */
    text-align: center;
  }
  #searchInput::placeholder {
    font-size: 0.9rem;
    text-align: center;
  }

  /* Ensure movie poster in modal is fixed to 150x225 on mobile and aligned right so text wraps */
  .modal-content .media-poster {
    width: 150px;
    height: 225px;
    float: right; /* align right so text wraps around poster */
    margin: 8px 0 12px 12px; /* top/right/bottom/left — leave space on the left for wrapped text */
  }
  .modal-content .media-poster img {
    width: 150px;
    height: 225px;
    object-fit: cover;
    display: block;
  }
  
  /* NEW: Active Quick Link Indicator sizing for mobile */
  .quick-link-btn.active::after {
      width: 40px;
      height: 35px;
      bottom: -40px; 
  }
}

.mobile-scroll-bar {
    display: none;
    position: fixed;
    width: 75px;
    height: 200px;
    background-color: var(--primary-color);
    opacity: 0.5;
    border-radius: 50px;
    z-index: 998;
    top: 50%;
    right: 20px;
    transform: translateY(calc(-50% + 50px));
    transition: all 0.3s ease-in-out, opacity 0.2s ease;
    cursor: grab;
    user-select: none;
    border: 1px solid var(--primary-color);
}

.mobile-scroll-bar.scrolling {
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.mobile-scroll-bar:active {
    cursor: grabbing;
}

@media (max-width: 768px) {
    .mobile-scroll-bar {
        display: block;
    }
}

/* Positioning for mobile fingerslider (homepage) */
@media (max-width: 768px) {
  /* Common vertical position */
  .mobile-scroll-bar {
    top: 75%;
  }
  /* Left */
  [data-fingerslider-pos="left"] .mobile-scroll-bar {
    left: 20px;
    right: auto;
    transform: translateY(-50%);
  }
  /* Center */
  [data-fingerslider-pos="center"] .mobile-scroll-bar {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }
  /* Right */
  [data-fingerslider-pos="right"] .mobile-scroll-bar {
    right: 20px;
    left: auto;
    transform: translateY(-50%);
  }
}

/* NEW: Opaque state when dragging */
.mobile-scroll-bar.active-drag {
    opacity: 1;
}

/* NEW: Carets at each end */
.mobile-scroll-bar::before,
.mobile-scroll-bar::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    transition: all 0.3s ease;
}

.mobile-scroll-bar::before {
    /* Top caret (pointing up) */
    top: 20px;
    border-bottom: 15px solid var(--text-color);
}

.mobile-scroll-bar::after {
    /* Bottom caret (pointing down) */
    bottom: 20px;
    border-top: 15px solid var(--text-color);
}

/* NEW: Mobile 2-column grid layout via settings */
@media (max-width: 480px) {
    body[data-mobile-grid="2-col"] .media-grid,
    body[data-mobile-grid="2-col"] .similar-media-grid {
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
    }
}

@media (max-width: 800px) {
  .modal-content .trailer-info-display { font-size: calc(0.95rem - 0.25rem); } /* reduce ~4pt */
  .modal-content .trailer-info-display p,
  .modal-content .trailer-info-display p strong { font-size: inherit; }
}

@media (max-width: 600px) {
  .genre-item {
    font-size: calc(1rem - 4px);
    /* NEW: make buttons ~10px narrower overall by reducing horizontal padding */
    padding: 0.5vh 0.4vh;
  }

  .genre-header {
    font-size: calc(0.9rem - 4px);
    padding: 0.5vh 1.5vh;
  }
}

@media (max-width: 480px) {
  .genre-list {
    grid-template-columns: repeat(3, 1fr); /* three categories per line on mobile */
    width: 100%;
    gap: 1vh 1vw; /* Adjusted gap for mobile */
  }

  .sidebar {
    width: 100%;
    padding-left: 15px;
    padding-right: 8px;
  }

  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    gap: 2vw;
  }

  .similar-media-grid {
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    gap: 2vw;
  }

  .logo {
    width: 200px;
    height: 75px;
    max-width: none;
  }

  #searchInput {
    flex-grow: 0.75; /* Makes the search input about 25% smaller relative to the previous 100% flex-grow */
  }

  /* NEW: Mobile - reduce media title by 8pt */
  .media-item .media-title {
    font-size: calc(0.9rem - 8pt);
  }

  /* NEW: Mobile - adjust year/rating badge font-size based on Movies per Row */
  [data-mobile-movies-per-row="5"] .media-year-badge,
  [data-mobile-movies-per-row="5"] .media-rating-badge {
    font-size: calc(0.8rem - 2pt);
    padding: 3px 5px; /* Reduce padding by 1px */
  }
  [data-mobile-movies-per-row="6"] .media-year-badge,
  [data-mobile-movies-per-row="6"] .media-rating-badge {
    font-size: calc(0.8rem - 2pt);
  }
  [data-mobile-movies-per-row="7"] .media-year-badge,
  [data-mobile-movies-per-row="7"] .media-rating-badge {
    font-size: calc(0.8rem - 4pt);
  }
}
/* NEW: Enforce Movies per Row from settings (overrides previous mobile grid columns) */
@media (max-width: 768px) {
  .media-grid,
  .similar-media-grid {
    grid-template-columns: repeat(var(--mobile-movies-per-row, 3), 1fr) !important;
  }
 
  /* NEW: Mobile Grid Layout Specific Badge Adjustments for 6 columns */
  /* Both badges are centered, year starts hidden (opacity 0) */
  [data-mobile-movies-per-row="6"] .media-year-badge {
      right: auto; 
      left: 50%;
      transform: translateX(-50%);
      opacity: 0; /* Hidden by default, controlled by JS */
      transition: opacity 1s ease;
  }
  [data-mobile-movies-per-row="6"] .media-rating-badge {
      right: auto; 
      left: 50%;
      transform: translateX(-50%);
      opacity: 1; /* Visible by default, controlled by JS */
      transition: opacity 1s ease;
  }
}

@media (min-width: 769px) {
  .media-grid,
  .similar-media-grid {
      grid-template-columns: repeat(2, 1fr);
  }

  /* NEW: Hide slideshow bio buttons on desktop when Biography Button setting is OFF */
  :root[data-show-bio-btn-desktop="false"] .bio-button {
      display: none !important;
  }
}

/* NEW: Hide slideshow bio buttons on mobile when Biography Button setting is OFF */
@media (max-width: 768px) {
  :root[data-show-bio-btn-mobile="false"] .bio-button {
      display: none !important;
  }
}

@media (min-width: 800px) {
  .modal-content {
    width: 62.5%;
  }
}

/* Desktop override for person image preview height (min-width 769px) */
@media (min-width: 769px) {
  .person-image-preview {
    height: 300px;
  }
  /* NEW: Desktop border radius for person links */
  .modal-content .person-link,
  .modal-content .cast-link {
      border-radius: 5px; 
  }
}

@media (min-width: 769px) {
    /* NEW: Desktop Media Grid Column Override based on Settings (data-homepage-cols) */
    [data-homepage-cols="2"] .media-grid,
    [data-homepage-cols="2"] .similar-media-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    [data-homepage-cols="3"] .media-grid,
    [data-homepage-cols="3"] .similar-media-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    [data-homepage-cols="4"] .media-grid,
    [data-homepage-cols="4"] .similar-media-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    [data-homepage-cols="5"] .media-grid,
    [data-homepage-cols="5"] .similar-media-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    [data-homepage-cols="6"] .media-grid,
    [data-homepage-cols="6"] .similar-media-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    [data-homepage-cols="7"] .media-grid,
    [data-homepage-cols="7"] .similar-media-grid {
        grid-template-columns: repeat(7, 1fr);
    }
    [data-homepage-cols="8"] .media-grid,
    [data-homepage-cols="8"] .similar-media-grid {
        grid-template-columns: repeat(8, 1fr);
    }
    [data-homepage-cols="9"] .media-grid,
    [data-homepage-cols="9"] .similar-media-grid {
        grid-template-columns: repeat(9, 1fr);
    }
    [data-homepage-cols="10"] .media-grid,
    [data-homepage-cols="10"] .similar-media-grid {
        grid-template-columns: repeat(10, 1fr);
    }
    
    /* NEW: Desktop category header refinements (matching requested style) */
    .top-category-header .category-main-term,
    .category-display .category-main-term {
        font-family: "Abril Fatface", cursive;
        letter-spacing: 0.12em;
        text-shadow:
          1px 1px 0 rgba(0, 0, 0, 0.6),
          2px 2px 4px rgba(0, 0, 0, 0.7);
        font-size: 1.5rem; /* Requested larger font size for desktop */
    }
}

/* NEW: Mobile category header refinements */
@media (max-width: 768px) {
  /* Hide the CAT prefix label on mobile */
  .top-category-header .category-prefix,
  .category-display .category-prefix {
    display: none;
  }

  /* Make the selected category text larger, 3D-ish, and adjust padding/spacing */
  .top-category-header,
  .category-display {
    font-size: 1.2rem;           /* Increase size (approx +6pt over reduced mobile size) */
    padding-top: 0;              /* Remove 10px-ish from top */
    padding-bottom: 0;           /* Remove 10px-ish from bottom */
  }

  .top-category-header .category-main-term,
  .category-display .category-main-term {
    font-family: "Abril Fatface", cursive;
    letter-spacing: 0.12em;      /* Add letter spacing between letters */
    text-shadow:
      1px 1px 0 rgba(0, 0, 0, 0.6),
      2px 2px 4px rgba(0, 0, 0, 0.7);  /* Simple 3D-ish effect */
  }
}

/* NEW: Light theme override for category title text shadows (homepage & front-page buttons) */
[data-theme^="light"] .top-category-header .category-main-term,
[data-theme^="light"] .category-display .category-main-term {
  text-shadow:
    1px 1px 0 rgba(200, 200, 200, 0.7),
    2px 2px 4px rgba(200, 200, 200, 0.9);
}