/* ═══════════════════════════════════════════════════════════
   TEROUSD — themes.css
   All colour themes. Import AFTER style.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Theme 1: Dark (default) ────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:         #141414;
  --bg2:        #181818;
  --bg3:        #252525;
  --black:      #000000;
  --white:      #ffffff;
  --t1:         #ffffff;
  --t2:         #b3b3b3;
  --t3:         #808080;
  --border:     rgba(255,255,255,0.14);
  --accent:     #e50914;
  --accent-h:   #f40612;

  --hero-grad:
    linear-gradient(77deg, rgba(0,0,0,.8) 0%, transparent 50%),
    linear-gradient(to top, #141414 0%, transparent 40%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, transparent 15%);
  --backdrop-grad:
    linear-gradient(to right, rgba(14,18,28,.97) 0%, rgba(14,18,28,.82) 55%, rgba(14,18,28,.55) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 40%);
  --player-grad:
    linear-gradient(to bottom, rgba(20,20,20,.5) 0%, rgba(20,20,20,.8) 55%, #141414 100%);

  --skeleton-from: rgba(255,255,255,0.03);
  --skeleton-peak: rgba(255,255,255,0.10);
  --search-bg:     rgba(14,18,28,0.98);
  --search-border: rgba(255,255,255,.1);
  --search-shadow: 0 12px 40px rgba(0,0,0,.7);
  --header-bg-scroll: #141414;
  --footer-bg:     #000000;

  --theme-indicator: "🌑 Dark";
}

/* ── Theme 2: Lime Blush — #D1F985(bg) + #cf5383(font) ─────── */
html[data-theme="lime-blush"], [data-theme="lime-blush"] {
  --bg:         #d1f985;
  --bg2:        #c5ef77;
  --bg3:        #b8e364;
  --black:      #d1f985;
  --white:      #cf5383;
  --t1:         #cf5383;
  --t2:         #cf5383;
  --t3:         #cf5383;
  --border:     rgba(207,83,131,0.35);
  --accent:     #c2006e;
  --accent-h:   #a0005a;

  --hero-grad:
    linear-gradient(77deg, rgba(140,200,50,.88) 0%, transparent 50%),
    linear-gradient(to top, #d1f985 0%, transparent 40%),
    linear-gradient(to bottom, rgba(140,200,50,.7) 0%, transparent 15%);
  --backdrop-grad:
    linear-gradient(to right, rgba(140,200,50,.97) 0%, rgba(140,200,50,.85) 55%, rgba(140,200,50,.6) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 40%);
  --player-grad:
    linear-gradient(to bottom, rgba(209,249,133,.5) 0%, rgba(209,249,133,.8) 55%, #d1f985 100%);

  --skeleton-from: rgba(207,83,131,0.15);
  --skeleton-peak: rgba(207,83,131,0.45);
  --search-bg:     #c5ef77;
  --search-border: rgba(207,83,131,.4);
  --search-shadow: 0 12px 40px rgba(0,0,0,.15);
  --header-bg-scroll: #d1f985;
  --footer-bg:     #b8e364;

  --theme-indicator: "🍋 Lime Blush";
}

[data-theme="lime-blush"] .logo-main,
[data-theme="lime-blush"] .footer-logo { color: #c2006e; }
[data-theme="lime-blush"] .genre-btn.active { background: #c2006e; border-color: #c2006e; color: #cf5383; }
[data-theme="lime-blush"] .server-btn.active { background: #c2006e; border-color: #c2006e; color: #cf5383; }
[data-theme="lime-blush"] .hero-btn-play { background: #c2006e; color: #cf5383; }
[data-theme="lime-blush"] .hero-btn-play:hover { background: #a0005a; }
[data-theme="lime-blush"] .hero-title span { color: #c2006e; }
[data-theme="lime-blush"] .load-more-btn:hover { background: rgba(194,0,110,.12); }
[data-theme="lime-blush"] .tab-btn.active { color: #c2006e; border-bottom-color: #c2006e; }
[data-theme="lime-blush"] .error-code { color: #c2006e; }
[data-theme="lime-blush"] .btn-primary { background: #c2006e; color: #cf5383; }
[data-theme="lime-blush"] .btn-primary:hover { background: #a0005a; }
[data-theme="lime-blush"] .hero-eyebrow { color: #c2006e; }
[data-theme="lime-blush"] .detail-ep-num { color: #c2006e; }
[data-theme="lime-blush"] .detail-ep-card.active { border-color: #c2006e; }
[data-theme="lime-blush"] .detail-server-play-btn.active { background: #c2006e; color: #cf5383; }
[data-theme="lime-blush"] .search-filter-btn.active,
[data-theme="lime-blush"] .search-filter-btn:hover { background: #c2006e; border-color: #c2006e; color: #cf5383; }
[data-theme="lime-blush"] .content-card-badge { color: #c2006e; }
[data-theme="lime-blush"] .detail-imdb-label,
[data-theme="lime-blush"] .detail-imdb-val { color: #c2006e; }
[data-theme="lime-blush"] .nav-link { color: #cf5383; }
[data-theme="lime-blush"] .nav-link.active { color: #c2006e; }
[data-theme="lime-blush"] .three-dot-btn,
[data-theme="lime-blush"] .mobile-search-btn { color: #cf5383; }
[data-theme="lime-blush"] .load-more-btn { color: #cf5383; border-color: rgba(207,83,131,.4); }
[data-theme="lime-blush"] .genre-btn { color: #cf5383; border-color: rgba(207,83,131,.35); }
[data-theme="lime-blush"] .search-input-small { color: #cf5383; background: rgba(207,83,131,.15); }
[data-theme="lime-blush"] .search-input-small::placeholder { color: rgba(207,83,131,.55); }
[data-theme="lime-blush"] .result-title { color: #cf5383; }
[data-theme="lime-blush"] .result-meta { color: #cf5383; }
[data-theme="lime-blush"] .content-card-title { color: #cf5383; }
[data-theme="lime-blush"] .content-card-meta { color: #cf5383; }
[data-theme="lime-blush"] .section-title { color: #cf5383; }
[data-theme="lime-blush"] .detail-overview { color: #cf5383; }
[data-theme="lime-blush"] .hero-subtitle { color: rgba(207,83,131,.85); }
[data-theme="lime-blush"] .hero-title { color: #cf5383; }
[data-theme="lime-blush"] .browse-hero-title { color: #cf5383; }
[data-theme="lime-blush"] .browse-hero-sub { color: #cf5383; }
[data-theme="lime-blush"] .detail-title { color: #cf5383; }
[data-theme="lime-blush"] .detail-tagline { color: #cf5383; }
[data-theme="lime-blush"] .detail-overview-label { color: #cf5383; }
[data-theme="lime-blush"] .detail-info-label { color: #cf5383; }
[data-theme="lime-blush"] .detail-info-value { color: #cf5383; }
[data-theme="lime-blush"] .detail-meta-row { color: #cf5383; }
[data-theme="lime-blush"] .detail-hd-badge { color: #cf5383; border-color: rgba(207,83,131,.5); }
[data-theme="lime-blush"] .details-title { color: #cf5383; }
[data-theme="lime-blush"] .details-overview { color: #cf5383; }
[data-theme="lime-blush"] .details-meta-item { color: #cf5383; }
[data-theme="lime-blush"] .meta-label { color: #cf5383; }
[data-theme="lime-blush"] .episode-name { color: #cf5383; }
[data-theme="lime-blush"] .control-label { color: #cf5383; }
[data-theme="lime-blush"] .control-display { color: #cf5383; }
[data-theme="lime-blush"] .server-label { color: #cf5383; }
[data-theme="lime-blush"] .server-btn { color: #cf5383; border-color: rgba(207,83,131,.3); }
[data-theme="lime-blush"] .tab-btn { color: #cf5383; }
[data-theme="lime-blush"] .clear-history-btn { color: #cf5383; border-color: rgba(207,83,131,.3); }
[data-theme="lime-blush"] .refresh-trending-btn { color: #cf5383; }
[data-theme="lime-blush"] .refresh-trending-btn:hover { color: #cf5383; }
[data-theme="lime-blush"] .error-title { color: #cf5383; }
[data-theme="lime-blush"] .error-sub { color: #cf5383; }
[data-theme="lime-blush"] .footer-section p { color: #cf5383; }
[data-theme="lime-blush"] .search-page-input { color: #cf5383; }
[data-theme="lime-blush"] .search-page-input::placeholder { color: #cf5383; }
[data-theme="lime-blush"] .search-page-status { color: #cf5383; }
[data-theme="lime-blush"] .search-empty-title { color: #cf5383; }
[data-theme="lime-blush"] .search-empty-sub { color: #cf5383; }
[data-theme="lime-blush"] .search-filter-btn { color: #cf5383; border-color: rgba(207,83,131,.3); }
[data-theme="lime-blush"] .mobile-search-input { color: #cf5383; border-color: rgba(207,83,131,.3); }
[data-theme="lime-blush"] .mobile-search-input::placeholder { color: rgba(207,83,131,.55); }
[data-theme="lime-blush"] .mobile-result-title { color: #cf5383; }
[data-theme="lime-blush"] .mobile-result-meta { color: #cf5383; }
[data-theme="lime-blush"] .result-title-small { color: #cf5383; }
[data-theme="lime-blush"] .result-meta-small { color: #cf5383; }
[data-theme="lime-blush"] .detail-ep-name { color: #cf5383; }
[data-theme="lime-blush"] .detail-episodes-title { color: #cf5383; }
[data-theme="lime-blush"] .player-watchlist-btn { color: #cf5383; border-color: rgba(207,83,131,.3); }
[data-theme="lime-blush"] .action-btn { color: #cf5383; border-color: rgba(207,83,131,.3); }
[data-theme="lime-blush"] .search-see-all,
[data-theme="lime-blush"] .mobile-search-see-all { color: #c2006e; }
[data-theme="lime-blush"] .dropdown-item { color: #cf5383; }
[data-theme="lime-blush"] .dropdown-item.active-item { color: #cf5383; }
[data-theme="lime-blush"] .three-dot-dropdown { background: #c5ef77; border-color: rgba(207,83,131,.25); }

/* ── Theme 3: Neon Night — #15160F(bg) + #FFACBC(font) ──────── */
html[data-theme="neon-night"], [data-theme="neon-night"] {
  --bg:         #15160f;
  --bg2:        #1b1d13;
  --bg3:        #24261a;
  --black:      #0e0f09;
  --white:      #ffffff;
  --t1:         #ffacbc;
  --t2:         #d98090;
  --t3:         #9a5a68;
  --border:     rgba(255,172,188,0.14);
  --accent:     #ffacbc;
  --accent-h:   #ff8fa5;

  --red:        #ffacbc;
  --red-h:      #ff8fa5;

  --hero-grad:
    linear-gradient(77deg, rgba(14,15,9,.9) 0%, transparent 50%),
    linear-gradient(to top, #15160f 0%, transparent 40%),
    linear-gradient(to bottom, rgba(14,15,9,.6) 0%, transparent 15%);
  --backdrop-grad:
    linear-gradient(to right, rgba(14,15,9,.97) 0%, rgba(14,15,9,.82) 55%, rgba(14,15,9,.5) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 40%);
  --player-grad:
    linear-gradient(to bottom, rgba(21,22,15,.5) 0%, rgba(21,22,15,.8) 55%, #15160f 100%);

  --skeleton-from: rgba(255,172,188,0.03);
  --skeleton-peak: rgba(255,172,188,0.10);
  --search-bg:     rgba(14,15,9,0.98);
  --search-border: rgba(255,172,188,.14);
  --search-shadow: 0 12px 40px rgba(0,0,0,.85);
  --header-bg-scroll: #15160f;
  --footer-bg:     #0e0f09;

  --theme-indicator: "🌸 Neon Night";
}

[data-theme="neon-night"] .logo-main,
[data-theme="neon-night"] .footer-logo { color: #ffacbc; }
[data-theme="neon-night"] .genre-btn.active { background: #ffacbc; border-color: #ffacbc; color: #0e0f09; }
[data-theme="neon-night"] .server-btn.active { background: #ffacbc; border-color: #ffacbc; color: #0e0f09; }
[data-theme="neon-night"] .hero-btn-play { background: #ffacbc; color: #0e0f09; }
[data-theme="neon-night"] .hero-btn-play:hover { background: #ff8fa5; }
[data-theme="neon-night"] .hero-title span { color: #ffacbc; }
[data-theme="neon-night"] .load-more-btn:hover { background: rgba(255,172,188,.12); }
[data-theme="neon-night"] .tab-btn.active { color: #ffacbc; border-bottom-color: #ffacbc; }
[data-theme="neon-night"] .error-code { color: #ffacbc; }
[data-theme="neon-night"] .btn-primary { background: #ffacbc; color: #0e0f09; }
[data-theme="neon-night"] .btn-primary:hover { background: #ff8fa5; }
[data-theme="neon-night"] .hero-eyebrow { color: #ffacbc; }
[data-theme="neon-night"] .detail-ep-num { color: #ffacbc; }
[data-theme="neon-night"] .detail-ep-card.active { border-color: #ffacbc; }
[data-theme="neon-night"] .detail-server-play-btn.active { background: #ffacbc; color: #0e0f09; }
[data-theme="neon-night"] .search-filter-btn.active,
[data-theme="neon-night"] .search-filter-btn:hover { background: #ffacbc; border-color: #ffacbc; color: #0e0f09; }
[data-theme="neon-night"] .content-card-badge { color: #ffacbc; }
[data-theme="neon-night"] .detail-imdb-label,
[data-theme="neon-night"] .detail-imdb-val { color: #ffacbc; }

/* ── Theme 4: Crimson Rose — #E0A4B0(bg) + #7C0116(font) ────── */
html[data-theme="crimson-rose"], [data-theme="crimson-rose"] {
  --bg:         #e0a4b0;
  --bg2:        #d4909e;
  --bg3:        #c47c8c;
  --black:      #e0a4b0;
  --white:      #3a000a;
  --t1:         #7c0116;
  --t2:         #9a1a2e;
  --t3:         #b84060;
  --border:     rgba(124,1,22,0.25);
  --accent:     #7c0116;
  --accent-h:   #5a0010;

  --hero-grad:
    linear-gradient(77deg, rgba(200,140,155,.88) 0%, transparent 50%),
    linear-gradient(to top, #e0a4b0 0%, transparent 40%),
    linear-gradient(to bottom, rgba(200,140,155,.7) 0%, transparent 15%);
  --backdrop-grad:
    linear-gradient(to right, rgba(200,140,155,.97) 0%, rgba(200,140,155,.85) 55%, rgba(200,140,155,.6) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 40%);
  --player-grad:
    linear-gradient(to bottom, rgba(224,164,176,.5) 0%, rgba(224,164,176,.8) 55%, #e0a4b0 100%);

  --skeleton-from: rgba(124,1,22,0.08);
  --skeleton-peak: rgba(124,1,22,0.22);
  --search-bg:     #d4909e;
  --search-border: rgba(124,1,22,.25);
  --search-shadow: 0 12px 40px rgba(0,0,0,.2);
  --header-bg-scroll: #e0a4b0;
  --footer-bg:     #c47c8c;

  --theme-indicator: "🌹 Crimson Rose";
}

[data-theme="crimson-rose"] .logo-main,
[data-theme="crimson-rose"] .footer-logo { color: #7c0116; }
[data-theme="crimson-rose"] .genre-btn.active { background: #7c0116; border-color: #7c0116; color: #ffe0e5; }
[data-theme="crimson-rose"] .server-btn.active { background: #7c0116; border-color: #7c0116; color: #ffe0e5; }
[data-theme="crimson-rose"] .hero-btn-play { background: #7c0116; color: #ffe0e5; }
[data-theme="crimson-rose"] .hero-btn-play:hover { background: #5a0010; }
[data-theme="crimson-rose"] .hero-title span { color: #7c0116; }
[data-theme="crimson-rose"] .load-more-btn:hover { background: rgba(124,1,22,.15); }
[data-theme="crimson-rose"] .tab-btn.active { color: #7c0116; border-bottom-color: #7c0116; }
[data-theme="crimson-rose"] .error-code { color: #7c0116; }
[data-theme="crimson-rose"] .btn-primary { background: #7c0116; color: #ffe0e5; }
[data-theme="crimson-rose"] .btn-primary:hover { background: #5a0010; }
[data-theme="crimson-rose"] .hero-eyebrow { color: #7c0116; }
[data-theme="crimson-rose"] .detail-ep-num { color: #7c0116; }
[data-theme="crimson-rose"] .detail-ep-card.active { border-color: #7c0116; }
[data-theme="crimson-rose"] .detail-server-play-btn.active { background: #7c0116; color: #ffe0e5; }
[data-theme="crimson-rose"] .search-filter-btn.active,
[data-theme="crimson-rose"] .search-filter-btn:hover { background: #7c0116; border-color: #7c0116; color: #ffe0e5; }
[data-theme="crimson-rose"] .content-card-badge { color: #7c0116; }
[data-theme="crimson-rose"] .detail-imdb-label,
[data-theme="crimson-rose"] .detail-imdb-val { color: #7c0116; }
[data-theme="crimson-rose"] .nav-link { color: #3a000a; }
[data-theme="crimson-rose"] .nav-link.active { color: #7c0116; font-weight: 700; }
[data-theme="crimson-rose"] .three-dot-btn,
[data-theme="crimson-rose"] .mobile-search-btn { color: #3a000a; }
[data-theme="crimson-rose"] .load-more-btn { color: #3a000a; border-color: rgba(58,0,10,.35); }
[data-theme="crimson-rose"] .genre-btn { color: #3a000a; border-color: rgba(58,0,10,.3); }
[data-theme="crimson-rose"] .search-input-small { color: #3a000a; background: rgba(255,255,255,.4); }
[data-theme="crimson-rose"] .search-input-small::placeholder { color: #9a4050; }
[data-theme="crimson-rose"] .result-title { color: #3a000a; }
[data-theme="crimson-rose"] .result-meta { color: #9a4050; }
[data-theme="crimson-rose"] .content-card-title { color: #3a000a; }
[data-theme="crimson-rose"] .content-card-meta { color: #9a4050; }
[data-theme="crimson-rose"] .section-title { color: #3a000a; }
[data-theme="crimson-rose"] .detail-overview { color: #3a000a; }
[data-theme="crimson-rose"] .hero-subtitle { color: rgba(58,0,10,.8); }

/* ═══════════════════════════════════════════════════════════
   DYNAMIC OVERRIDES — apply CSS variables to elements that
   previously had hard-coded colour values in style.css
   ═══════════════════════════════════════════════════════════ */

/* Header background on scroll */
.header.scrolled { background: var(--header-bg-scroll) !important; }

/* Hero gradient */
.hero::after { background: var(--hero-grad); }

/* Backdrop gradient on detail page */
.detail-backdrop::after { background: var(--backdrop-grad); }

/* Player backdrop gradient */
.player-backdrop::after { background: var(--player-grad); }

/* Footer background */
.footer { background: var(--footer-bg); }

/* Search dropdown */
.search-results-container-small {
  background: var(--search-bg);
  border-color: var(--search-border);
  box-shadow: var(--search-shadow);
}

/* Skeleton shimmer updated to use theme vars */
.skeleton-poster,
.skeleton-line,
.skeleton-circle,
.skeleton-block,
.detail-loading-poster,
.detail-loading-h1,
.detail-loading-h1b,
.detail-loading-meta,
.detail-loading-btns,
.detail-loading-line {
  background: linear-gradient(
    105deg,
    var(--skeleton-from) 0%,
    var(--skeleton-from) 30%,
    var(--skeleton-peak) 50%,
    var(--skeleton-from) 70%,
    var(--skeleton-from) 100%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s infinite ease-in-out;
}

/* ── Theme Switcher UI ───────────────────────────────────────── */
.theme-switcher {
  position: relative;
}

.theme-switcher-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--t1);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  opacity: 0.85;
  transition: opacity .2s, background .2s;
  cursor: pointer;
}
.theme-switcher-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.13);
}

.theme-switcher-dropdown {
  display: none;
  position: absolute;
  top: 44px; right: 0;
  min-width: 200px;
  background: var(--search-bg, rgba(14,18,28,0.98));
  border: 1px solid var(--search-border, rgba(255,255,255,.1));
  border-radius: 10px;
  box-shadow: var(--search-shadow);
  z-index: 1300;
  overflow: hidden;
  padding: 6px;
}
.theme-switcher-dropdown.open { display: block; }

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
  font-size: .82rem;
  font-weight: 500;
  color: var(--t2);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.theme-option:hover { background: rgba(255,255,255,.07); color: var(--t1); }
.theme-option.active { background: rgba(255,255,255,.06); color: var(--t1); font-weight: 700; }

.theme-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15);
}

.theme-swatch-dark        { background: linear-gradient(135deg, #141414 50%, #e50914 50%); }
.theme-swatch-lime-blush  { background: linear-gradient(135deg, #d1f985 50%, #cf5383 50%); }
.theme-swatch-neon        { background: linear-gradient(135deg, #15160f 50%, #ffacbc 50%); }
.theme-swatch-crimson     { background: linear-gradient(135deg, #e0a4b0 50%, #7c0116 50%); }

/* Light-bg theme adjustments for switcher UI */
[data-theme="lime-blush"] .theme-switcher-btn {
  background: rgba(207,83,131,0.15);
  border-color: rgba(207,83,131,.3);
  color: #cf5383;
}
[data-theme="crimson-rose"] .theme-switcher-btn {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,.18);
  color: var(--t1);
}
[data-theme="lime-blush"] .theme-option:hover { background: rgba(207,83,131,.12); }
[data-theme="lime-blush"] .theme-option.active { background: rgba(207,83,131,.08); }
[data-theme="crimson-rose"] .theme-option:hover { background: rgba(0,0,0,.07); }
[data-theme="crimson-rose"] .theme-option.active { background: rgba(0,0,0,.05); }