/* ==========================================================================
   M4Movies — "HDHUB" dark cinematic theme (v17)
   Original stylesheet. Everything is scoped under body.hdh so the classic
   look stays intact wherever the class is absent, and the admin panel is
   never affected (it does not use body.hdh).
   Brand: M4Movies red #e50914. Palette: near-black cinematic.
   v11: quality pill moved top-left, episode ribbon (S01 EP05) bottom-right,
   hover play overlay, View All link in section headings.
   v12: card meta text line removed (badges/chips only), chips capped at 5
   with quality-language balance, details page meta-pills row replaced by a
   cinematic hero badge cluster (quality + language + season).
   v13: meta-pills row RESTORED on the details page as a LIQUID GLASS bar,
   led by the big 4K DV HDR / FHD / BD badge; glass pills inside.
   v14: hero no longer slides over the category buttons (they were getting
   hidden on content pages); quality badge moved to the END of the glass
   bar; PC gap between header and search bar; EonMovies-style black shadow
   on the hero top + under the category bar.
   ========================================================================== */

body.hdh {
  --hdh-bg: #0b0b0e;
  --hdh-bg-soft: #101014;
  --hdh-panel: #141419;
  --hdh-card: #16161d;
  --hdh-card-2: #1c1c24;
  --hdh-border: #232329;
  --hdh-border-soft: rgba(255, 255, 255, 0.07);
  --hdh-text: #eceaf1;
  --hdh-dim: #a7a7b3;
  --hdh-faint: #6e6e7a;
  --hdh-red: #e50914;
  --hdh-red-deep: #b00610;
  --hdh-gold: #f6c945;
  /* Reused by the inline <style> blocks (download accordions, watch page)
     that read var(--border)/var(--panel)/var(--text) with fallbacks. */
  --border: #232329;
  --panel: #141419;
  --card: #16161d;
  --text: #eceaf1;
  --red: #e50914;

  background: var(--hdh-bg);
  color: var(--hdh-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Subtle cinematic vignette over the whole page */
body.hdh::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(229, 9, 20, 0.06), transparent 60%),
    radial-gradient(900px 600px at 85% 110%, rgba(80, 60, 180, 0.05), transparent 60%);
}
body.hdh > * { position: relative; z-index: 1; }
/* v16: live search suggestions were painting UNDER the category bar.
   `body.hdh > *` puts every top-level section in its own z-index:1 stacking
   context, so the dropdown's z-index:1055 could never escape the search
   section (the later-in-DOM category bar always won). Lift the whole search
   section above its siblings — still far below the sticky navbar and modals. */
body.hdh .global-search-wrap { z-index: 60; }

/* v22: no underlined links anywhere in the theme UI. Bootstrap underlines
   links by default and individual components kept missing the reset —
   genre pills (fixed in v21) and the header banner's .banner-text link
   both showed underlined text. One global rule ends the whack-a-mole. */
body.hdh a { text-decoration: none; }

/* ------------------------------------------------------------------ header */
body.hdh #mainNavbar {
  background: rgba(11, 11, 14, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* v19: no border/shadow — flat EonMovies-style header, no divider lines. */
}
body.hdh #mainNavbar .navbar-brand img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(229, 9, 20, 0.35));
}
body.hdh .nav-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, var(--hdh-red), var(--hdh-red-deep));
  color: #fff !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.hdh .nav-home-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.55);
  color: #fff !important;
}
body.hdh .navbar-toggler { border-color: var(--hdh-border); }

/* ------------------------------------------------------------- global search */
body.hdh .global-search-wrap {
  background: #0b0b0e;
  /* v19: flat, no divider line (EonMovies look). */
  padding: 14px 0;
}
/* v14: on PC the search bar looked glued to the header — breathing room. */
@media (min-width: 992px) {
  body.hdh .global-search-wrap { padding-top: 22px; }
}
body.hdh .search-input-container { position: relative; }
body.hdh .search-bar,
body.hdh input.search-bar {
  background: #17171d;
  border: 1px solid #2a2a33;
  color: var(--hdh-text);
  border-radius: 12px;
  padding: 10px 40px 10px 16px;
  font-size: 0.92rem;
}
body.hdh .search-bar::placeholder { color: var(--hdh-faint); }
body.hdh .search-bar:focus {
  background: #1b1b23;
  border-color: var(--hdh-red);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.18);
  color: #fff;
  outline: none;
}
body.hdh .search-clear-btn { color: var(--hdh-faint); }
body.hdh .search-clear-btn:hover { color: #fff; }
body.hdh .global-search-wrap .btn-danger {
  background: linear-gradient(180deg, var(--hdh-red), var(--hdh-red-deep));
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);
}
body.hdh .search-dropdown {
  background: #17171d;
  border: 1px solid #2a2a33;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
body.hdh .wl-search-btn {
  background: #17171d;
  border: 1px solid #2a2a33;
  color: var(--hdh-dim);
  border-radius: 12px;
  width: 44px;
  height: 44px;
}
body.hdh .wl-search-btn:hover { color: var(--hdh-red); border-color: var(--hdh-red); }

/* ------------------------------------------------------------ category bar */
body.hdh .global-cat-bar {
  background: #0b0b0e;
  /* v19: no divider line under the category bar (EonMovies look). */
  padding: 10px 0 12px;
}
body.hdh .catButton {
  background: #15151b;
  border: 1px solid #26262e;
  color: var(--hdh-dim);
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 7px 16px;
  transition: all 0.15s ease;
}
body.hdh .catButton:hover {
  color: #fff;
  border-color: var(--hdh-red);
  background: #1d1214;
  transform: translateY(-1px);
}
body.hdh #joinTelegramBtn {
  background: linear-gradient(180deg, #1f6fb5, #175a94);
  border-color: transparent;
  color: #fff;
}
body.hdh #joinTelegramBtn:hover { background: linear-gradient(180deg, #2580cc, #1f6fb5); color: #fff; }

/* genre modal */
body.hdh .modal-content {
  background: #141419;
  border: 1px solid #2a2a33;
  border-radius: 16px;
  color: var(--hdh-text);
}
body.hdh .modal-header { border-bottom: 1px solid var(--hdh-border); }
body.hdh .genre-pick {
  background: #1b1b23;
  border: 1px solid #2c2c35;
  color: var(--hdh-dim);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  text-decoration: none;
}
body.hdh .genre-pick:hover { color: #fff; border-color: var(--hdh-red); }

/* ------------------------------------------------------- section headings */
body.hdh .section-heading {
  background: linear-gradient(90deg, #15151b, #101014);
  border: 1px solid var(--hdh-border);
  border-left: 4px solid var(--hdh-red);
  border-radius: 12px;
  padding: 12px 18px;
  margin: 18px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.hdh .m4m-viewall {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hdh-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
body.hdh .m4m-viewall:hover { color: #fff; }
body.hdh .m4m-viewall i { color: var(--hdh-red); }
body.hdh .section-heading::before {
  background: linear-gradient(90deg, rgba(229, 9, 20, 0.14), transparent);
}
body.hdh .section-heading-text {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.95rem;
  font-weight: 800;
}
body.hdh .section-heading-icon { color: var(--hdh-red); }
body.hdh .section-count {
  background: #1d1d25;
  border: 1px solid #2c2c35;
  color: var(--hdh-dim);
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 3px 10px;
}

/* ------------------------------------------------------------------ cards */
body.hdh .movie-card {
  background: var(--hdh-card);
  border: 1px solid var(--hdh-border-soft);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
body.hdh .movie-card:hover {
  transform: translateY(-5px);
  border-color: rgba(229, 9, 20, 0.55);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(229, 9, 20, 0.25),
    0 8px 28px rgba(229, 9, 20, 0.12);
}
body.hdh .movie-card .image-container {
  position: relative;
  overflow: hidden;
  background: #0e0e12;
}
body.hdh .movie-card img { border-radius: 0; }
body.hdh .movie-card .lazy-image { aspect-ratio: 2 / 3; object-fit: cover; }

/* type badge stays top-right */
body.hdh .movie-type-badge {
  top: 8px;
  right: 8px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
body.hdh .movie-badge-movie { background: rgba(229, 9, 20, 0.92); }
body.hdh .movie-badge-series { background: rgba(109, 88, 246, 0.92); }

/* quality pill — top-left over the poster */
body.hdh .m4m-qbadge {
  position: absolute;
  z-index: 2;
  left: 8px;
  top: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 7px;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  white-space: nowrap;
}
body.hdh .m4m-qbadge.qb-4k {
  background: linear-gradient(135deg, #ffe27a, var(--hdh-gold) 55%, #d99a12);
  color: #231a02;
  text-shadow: none;
}
body.hdh .m4m-qbadge.qb-fhd {
  background: linear-gradient(135deg, #4f9cf7, #2456d6);
  color: #fff;
}
body.hdh .m4m-qbadge.qb-bd {
  background: linear-gradient(135deg, #a78bfa, #6d28d9);
  color: #fff;
}
body.hdh .m4m-qbadge.qb-x {
  background: rgba(20, 20, 26, 0.92);
  color: var(--hdh-dim);
  border: 1px solid #2c2c35;
}

/* episode ribbon — bottom-right over the poster (series: "S01 EP05") */
body.hdh .m4m-ep-ribbon {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 7px;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.95), rgba(150, 4, 12, 0.95));
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* hover play overlay — cinematic "press play" feel */
body.hdh .m4m-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
body.hdh .movie-card:hover .m4m-play { opacity: 1; }
body.hdh .m4m-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--hdh-red), var(--hdh-red-deep));
  color: #fff;
  font-size: 16px;
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.5);
  transform: scale(0.85);
  transition: transform 0.22s ease;
}
body.hdh .m4m-play-btn i { margin-left: 2px; }
body.hdh .movie-card:hover .m4m-play-btn { transform: scale(1); }

/* big badge next to the details-page title */
body.hdh .m4m-title-badge { margin: 2px 0 10px; }
body.hdh .m4m-qbadge-lg {
  position: static;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 9px;
  pointer-events: auto;
}

/* v13: LIQUID GLASS badge bar on the details page — the full meta row
   (year, type, quality, qualities, languages, director, runtime, rating)
   led by the big 4K DV HDR / FHD / BD badge, all floating on glass. */
body.hdh .m4m-hero-badges.m4m-liquid {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 12px 0 18px;
  padding: 14px 16px;
  border-radius: 20px;
  max-width: 720px;
  /* liquid glass: layered translucency + blur + specular edge light */
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0.07) 70%, rgba(255, 255, 255, 0.02) 100%),
    rgba(16, 16, 22, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 2px rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25);
}
/* soft light streak across the glass */
body.hdh .m4m-hero-badges.m4m-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, 0.10), transparent 55%);
}
/* glass pills inside the liquid bar */
body.hdh .m4m-liquid .meta-pill {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 0.78rem;
  color: #d7d7e0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.30);
  max-width: none;
}
body.hdh .m4m-liquid .meta-pill i { margin-right: 6px; opacity: 0.85; }
body.hdh .m4m-liquid .meta-pill.hot { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.38); color: #fca5a5; }
body.hdh .m4m-liquid .meta-pill.lang { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.38); color: #fcd34d; }
body.hdh .m4m-liquid .meta-pill.q-pill { background: rgba(29, 78, 216, 0.18); border-color: rgba(29, 78, 216, 0.45); color: #93c5fd; }
body.hdh .m4m-liquid .meta-pill.ss-ongoing { background: rgba(249, 115, 22, 0.16); border-color: rgba(249, 115, 22, 0.45); color: #fdba74; font-weight: 700; }
body.hdh .m4m-liquid .meta-pill.ss-completed { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.45); color: #86efac; font-weight: 700; }
/* the big quality badge sits on the glass with extra lift */
body.hdh .m4m-liquid .m4m-qbadge-lg {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
@media (max-width: 575px) {
  body.hdh .m4m-hero-badges.m4m-liquid { padding: 11px 12px; gap: 7px; margin: 10px 0 14px; border-radius: 16px; }
  body.hdh .m4m-liquid .meta-pill { font-size: 0.72rem; padding: 5px 10px; }
}

/* card text */
body.hdh .card-info { padding: 10px 10px 8px; }
body.hdh .card-title {
  color: var(--hdh-text);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
}
body.hdh .movie-card:hover .card-title { color: #fff; }
body.hdh .card-meta {
  color: var(--hdh-faint);
  font-size: 0.74rem;
  margin-top: 3px;
  font-weight: 600;
}

/* tag chips row */
body.hdh .m4m-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
body.hdh .m4m-chip {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #c9c9d4;
  background: #202028;
  border: 1px solid #2e2e38;
  border-radius: 6px;
  padding: 2px 7px;
  line-height: 1.5;
  white-space: nowrap;
}
body.hdh .m4m-chips-page { margin: 4px 0 12px; }
body.hdh .m4m-chips-page .m4m-chip {
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 8px;
}

body.hdh .wl-btn { background: rgba(10, 10, 14, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); }
/* v11: quality pill moved to top-left, so the watchlist button drops to bottom-left */
body.hdh .wl-btn {
  top: auto;
  bottom: 8px;
  left: 8px;
  right: auto;
}
body.hdh .wl-btn.wl-saved { color: var(--hdh-red); }

/* -------------------------------------------------------------- pagination */
body.hdh .home-pagination .page-link {
  background: #141419;
  border: 1px solid #26262e;
  color: var(--hdh-dim);
  border-radius: 8px;
  margin: 0 3px;
  font-weight: 600;
}
body.hdh .home-pagination .page-link:hover { color: #fff; border-color: var(--hdh-red); background: #1d1214; }
body.hdh .home-pagination .page-item.active .page-link {
  background: linear-gradient(180deg, var(--hdh-red), var(--hdh-red-deep));
  border-color: transparent;
  color: #fff;
}
body.hdh .home-pagination .page-item.disabled .page-link { background: #101014; color: #4a4a55; }

/* ------------------------------------------------------------ footer */
body.hdh .footer {
  background: #08080b;
  border-top: 1px solid var(--hdh-border);
  color: var(--hdh-faint);
  padding: 22px 0;
  margin-top: 34px;
}
body.hdh .footer p { margin: 0; font-size: 0.82rem; }

/* banners */
body.hdh .domain-banner {
  background: linear-gradient(90deg, #1d1214, #141419);
  border: 1px solid rgba(229, 9, 20, 0.35);
  color: var(--hdh-text);
}
body.hdh .domain-banner .banner-text { color: var(--hdh-text); }
body.hdh .domain-banner button { color: var(--hdh-faint); }

/* ---------------------------------------------------------- details page */
body.hdh .hero-backdrop { background-color: #060608; }
/* v14: the -65px pull-up slid the hero over the category buttons and hid
   them on content pages — the backdrop now starts below the header, and the
   EonMovies-style black shadow gives the cinematic top transition instead. */
body.hdh .hero-backdrop { margin-top: 0; }
body.hdh .hero-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.42) 16%, rgba(11, 11, 14, 0.06) 36%, rgba(11, 11, 14, 0.88) 78%, var(--hdh-bg) 100%);
}
/* black shadow under the category bar, like EonMovies */
body.hdh .global-cat-bar::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
}
body.hdh .movie-poster {
  border: 1px solid #2c2c35;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(229, 9, 20, 0.15);
}
body.hdh .movie-title-text {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
body.hdh .meta-pill {
  background: rgba(20, 20, 26, 0.85);
  border: 1px solid #2b2b34;
  color: var(--hdh-dim);
  backdrop-filter: blur(4px);
}
body.hdh .meta-pill.hot {
  background: linear-gradient(135deg, rgba(246, 201, 69, 0.16), rgba(246, 201, 69, 0.05));
  border-color: rgba(246, 201, 69, 0.45);
  color: var(--hdh-gold);
}
body.hdh .meta-pill i { color: var(--hdh-red); }
body.hdh .meta-pill.hot i { color: var(--hdh-gold); }
body.hdh .genre-pill {
  background: #1a1a21;
  border: 1px solid #2c2c35;
  color: var(--hdh-dim);
  /* v21: pills are links — Bootstrap underlines links by default, and this
     rule never reset it, so genre text showed underlined. */
  text-decoration: none;
}
body.hdh .genre-pill:hover { color: #fff; border-color: var(--hdh-red); background: #211318; }
body.hdh .share-trigger-btn {
  background: #1a1a21;
  border: 1px solid #2c2c35;
  color: var(--hdh-dim);
}
body.hdh .share-trigger-btn:hover { color: #fff; border-color: var(--hdh-red); }
body.hdh .wl-page-btn {
  background: #1a1a21;
  border: 1px solid #2c2c35;
  color: var(--hdh-dim);
}
body.hdh .wl-page-btn:hover { color: var(--hdh-red); border-color: var(--hdh-red); }

/* download accordions pick up the dark vars automatically; polish the rows */
body.hdh .dl-accordion { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35); }
/* v19: "Episode Wise" is a grouping header inside the download box, not a
   separate card — drop its own border/shadow/margin so the section stops
   looking double-boxed (the double strip at the bottom of the box). */
body.hdh .dl-episode-accordion { border: none; background: transparent; box-shadow: none; margin-bottom: 0; }
body.hdh .dl-episode-accordion > .dl-accordion-body { border-top: none; padding-bottom: 2px; }
body.hdh .dl-ep-accordion:last-child { margin-bottom: 0; }
body.hdh .dl-row { border-bottom: 1px solid #1d1d24; }
body.hdh .dl-accordion-count { background: #1d1d25; border-color: #2c2c35; color: var(--hdh-dim); }

/* ---------------------------------------------------------- download gate */
body.hdh .download-page { background: transparent; }
body.hdh .download-card {
  background: var(--hdh-panel);
  border: 1px solid var(--hdh-border);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}
body.hdh .download-card-title { color: #fff; }
body.hdh .download-card-sub { color: var(--hdh-faint); }
body.hdh .download-card-count { background: #1d1d25; border: 1px solid #2c2c35; color: var(--hdh-dim); }
body.hdh .download-quality-row {
  background: #17171d;
  border: 1px solid #26262e;
  border-radius: 12px;
}
body.hdh .download-quality-row:hover { border-color: rgba(229, 9, 20, 0.5); }
body.hdh .download-quality-name { color: var(--hdh-text); }
body.hdh .download-quality-meta { color: var(--hdh-faint); }
body.hdh .download-quality-btn {
  background: linear-gradient(180deg, var(--hdh-red), var(--hdh-red-deep));
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);
}
body.hdh .download-quality-btn:hover { color: #fff; transform: translateY(-1px); }
body.hdh .dl-timer-box {
  background: #17171d;
  border: 1px solid #2c2c35;
  border-radius: 14px;
}
body.hdh .dl-format-select {
  background-color: #17171d;
  border: 1px solid #2c2c35;
  color: var(--hdh-text);
  border-radius: 10px;
}
body.hdh .dl-format-select:focus { border-color: var(--hdh-red); outline: none; }
body.hdh .dl-format-chip { background: #1d1d25; border: 1px solid #2c2c35; color: var(--hdh-dim); }
body.hdh .dl-count-track { background: #1d1d25; }
body.hdh .dl-count-fill { background: linear-gradient(90deg, var(--hdh-red), #ff5a5a); }
body.hdh .dl-count-num, body.hdh .dl-count-label { color: var(--hdh-dim); }
body.hdh .dl-empty-format { color: var(--hdh-faint); }

/* ------------------------------------------------------- episode quality */
body.hdh .episode-quality-card {
  background: var(--hdh-panel);
  border: 1px solid var(--hdh-border);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}
body.hdh .episode-quality-name { color: #fff; }
body.hdh .episode-quality-subtitle { color: var(--hdh-faint); }
body.hdh .episode-quality-row {
  background: #17171d;
  border: 1px solid #26262e;
  border-radius: 12px;
}
body.hdh .episode-quality-row:hover { border-color: rgba(229, 9, 20, 0.5); }
body.hdh .dl-btn {
  background: linear-gradient(180deg, var(--hdh-red), var(--hdh-red-deep));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);
}
body.hdh .dl-btn:hover { color: #fff; }
body.hdh .dl-count-badge, body.hdh .dl-size-chip {
  background: #1d1d25;
  border: 1px solid #2c2c35;
  color: var(--hdh-dim);
}
body.hdh .episode-back-link { color: var(--hdh-dim); }
body.hdh .episode-back-link:hover { color: #fff; }

/* --------------------------------------------------------------- watch */
body.hdh .watch-page { background: transparent; }
/* The animated backdrop (watch-bg / orbs / particles / player glow) is left
   exactly as authored in watch.php — only surrounding chrome is themed. */
body.hdh .watch-format-bar { background: rgba(20, 20, 26, 0.8); border: 1px solid #26262e; }
body.hdh .watch-format-select { background-color: #1b1b23; border-color: #2c2c35; color: var(--hdh-text); }
body.hdh .watch-server-btn { background: #17171d; border-color: #26262e; color: var(--hdh-dim); }
body.hdh .watch-server-btn:hover { color: #fff; border-color: var(--hdh-red); }
body.hdh .watch-server-btn.active {
  background: linear-gradient(180deg, var(--hdh-red), var(--hdh-red-deep));
  border-color: transparent;
  color: #fff;
}
body.hdh .watch-ep-btn { background: #17171d; border: 1px solid #26262e; color: var(--hdh-dim); }
body.hdh .watch-ep-btn:hover { color: #fff; border-color: var(--hdh-red); }
body.hdh .watch-ep-btn.now {
  background: linear-gradient(180deg, var(--hdh-red), var(--hdh-red-deep));
  border-color: transparent;
  color: #fff;
}
body.hdh .watch-chip { background: #1d1d25; border: 1px solid #2c2c35; color: var(--hdh-dim); }
/* v16: chip text (e.g. cast "Pyeon Seong-geun") was breaking mid-word onto a
   second line inside the pill on mobile. Keep each pill unbreakable so pills
   wrap as whole units instead. */
/* v16.1: the chip row was then visually sticking to the genre pills row
   below it — bottom margin on each chip guarantees breathing room. */
body.hdh .watch-chip { display: inline-block; white-space: nowrap; margin: 0 6px 8px 0; }
body.hdh .watch-nav-btn { background: #17171d; border: 1px solid #26262e; color: var(--hdh-dim); }
body.hdh .watch-nav-btn:hover { color: #fff; border-color: var(--hdh-red); }
body.hdh .watch-about { background: rgba(20, 20, 26, 0.8); border: 1px solid #26262e; }
body.hdh .watch-open-btn {
  background: linear-gradient(180deg, var(--hdh-red), var(--hdh-red-deep));
  border: none;
  color: #fff;
}

/* ---------------------------------------------------------- search page */
body.hdh .filter-bar .form-select,
body.hdh .filter-bar .form-control {
  background-color: #17171d;
  border: 1px solid #2c2c35;
  color: var(--hdh-text);
  border-radius: 10px;
}
body.hdh .filter-bar .form-select:focus { border-color: var(--hdh-red); box-shadow: none; }
body.hdh .filter-label { color: var(--hdh-faint); }
body.hdh .search-live-empty {
  background: #141419;
  border: 1px dashed #2c2c35;
  color: var(--hdh-faint);
  border-radius: 14px;
}

/* generic links + buttons */
body.hdh a { color: #ff6b6b; }
body.hdh a:hover { color: #ff8585; }
body.hdh .movie-card a, body.hdh .movie-card a:hover { color: inherit; }
body.hdh .btn-danger {
  background: linear-gradient(180deg, var(--hdh-red), var(--hdh-red-deep));
  border: none;
}
body.hdh .btn-outline-secondary { border-color: #2c2c35; color: var(--hdh-dim); }
body.hdh .btn-outline-secondary:hover { border-color: var(--hdh-red); color: #fff; background: #1d1214; }

/* ------------------------------------------------------- notice popup */
/* The M4MOVIES NOTICE popup keeps its own design and its exact button order
   (domain → GET THE APP → QR); only the backdrop is deepened for the theme. */
body.hdh .m4m-domain-popup::backdrop { background: rgba(4, 4, 7, 0.82); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 575px) {
  body.hdh .m4m-chip { font-size: 8.5px; padding: 2px 6px; }
  body.hdh .card-title { font-size: 0.8rem; }
  body.hdh .section-heading { margin: 14px 0 10px; padding: 10px 14px; }
  body.hdh .section-heading-text { font-size: 0.85rem; letter-spacing: 1px; }
  body.hdh #mainNavbar .navbar-brand img { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  body.hdh .movie-card,
  body.hdh .movie-card .lazy-image,
  body.hdh .m4m-play,
  body.hdh .m4m-play-btn,
  body.hdh .nav-home-btn,
  body.hdh .catButton { transition: none; }
  body.hdh::before { display: none; }
}