/*Main Movies*/
.visible {display: block !important;}
.unvisible {display:none !important;}
.tag_movies_cover_bg .tag_cover_sec_bg img {top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.tag_movies_cover_bg .tag_cover_bg_grad {background: linear-gradient(rgba(240, 242, 245, 0.8), var(--body-bg) 100%);}
.tag_movies_headr {position: relative;z-index: 1;padding: 150px 0 10px;}
.tag_movies_headr h1 {font-family: "TT Commons", Roboto, sans-serif;font-size: 42px;letter-spacing: -0.5px;margin: 20px 0 10px;text-transform: capitalize;}
.movies-search {width: 100%;max-width: 420px;margin: auto;position: relative;}
.movies-search input {box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);border-radius: 8px;color: #202124;display: block;padding: 0 45px;width: 100%;border: 0;font-size: 15px;line-height: 48px;transition: all 0.15s;}
.movies-search input:focus {box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 2px 6px 2px rgba(60, 64, 67, .15);}
.movies-search svg {position: absolute;top: 50%;transform: translateY(-50%);left: 10px;pointer-events: none;}
.movies-search input:focus+svg {color: var(--main);}
.movies-search .search-result {position: absolute;right: 0;left: 0;z-index: 1000;display: none;width: 100%;padding: 6px;text-align: initial;list-style: none;background-color: #fff;box-shadow: 0 6px 12px rgba(0,0,0,.175);border-radius: 8px;}
.movies-search .search-result li {padding: 8px 10px;margin-right: unset;overflow: hidden;}
.movies-search .search-result li a {width: 100%;text-decoration: none;display: block;}
.movies-search .search-result li:hover {background-color: #444;}
.movies-search .search-result li:hover > a {color: #fff;}
.movies-top-breadcrumb {background-color: white;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);margin: 10px auto 30px;}
.movies-top-breadcrumb > li.active > a {background-color: var(--main);color: var(--main-color);box-shadow: none;}
.movies-top-breadcrumb > li.active > a:hover {color: var(--main-color);}
.wow_movie_filters {position: fixed;left: 0;top: 80px;bottom: 0;width: 350px;background-color: white;z-index: 950;overflow-y: auto;}
.wow_movie_filters .tag_sidebar_section > a {border-radius: 6px;font-weight: normal;padding: 8px 14px;text-transform: capitalize;margin: 5px;width: auto;text-align: initial;border: 1px solid #cbcbcb;}
.movies-film-wrapper {position: relative;margin-bottom: 30px;}
.movies-film-wrapper a {display: block;position: relative;}
.movies-film-wrapper a:after {content: '';position: absolute;top: 10px;right: 10px;bottom: 10px;left: 10px;border-radius: 10px;overflow: hidden;z-index: -1;background: #fff;transition: all 0.3s ease 0.1s;opacity: 0;visibility: hidden;}
.movies-film-wrapper a:hover::after {opacity: 1;visibility: visible;top: -10px;right: -10px;bottom: -10px;left: -10px;-webkit-transition-delay: 0s;transition-delay: 0s;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);}
.movies-film-wrapper .avatar {position: relative;height: 0;padding: 0;padding-bottom: 144.1%;background-color: white;}
.movies-film-wrapper .avatar img, .mve_thmb img {width: 100%;height: 100%;position: absolute;top: 0;right: 0;bottom: 0;left: 0;object-fit: cover;}
.movies-film-wrapper h3 {font-size: 16px;margin: 10px 0px 3px;color: #222;line-height: normal;}
.movies-film-wrapper p {text-transform: capitalize;margin: 0;color: rgba(0, 0, 0, 0.6);}
body.tag_header_top_p .wow_movie_filters {top: 56px;width: 249px;}

/*Movie rows (Trending / New / Recommended / Genre)*/
.movie-row {margin: 0 0 28px;}
.movie-row-head {justify-content: space-between;margin: 0 0 12px;}
.movie-row-title, .movies-browse-all-title {font-size: 19px;font-weight: 700;margin: 0;line-height: normal;}
.movie-row-seeall {font-size: 13px;font-weight: 600;color: var(--main);text-decoration: none;white-space: nowrap;}
.movie-row-seeall:hover {text-decoration: underline;}
.movie-row-scroll {display: flex;gap: 14px;overflow-x: auto;overflow-y: hidden;padding: 2px 2px 10px;scroll-snap-type: x proximity;-webkit-overflow-scrolling: touch;scrollbar-width: thin;}
.movie-row-scroll::-webkit-scrollbar {height: 6px;}
.movie-row-scroll::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.15);border-radius: 10px;}
.movie-row-item {flex: 0 0 auto;width: 150px;scroll-snap-align: start;}
.movie-row-item .movies-film-wrapper {margin-bottom: 0;}
.movies-browse-all-title {margin: 30px 0 15px;}
.movie-card-rating {position: absolute;top: 8px;right: 8px;z-index: 2;background: rgba(0,0,0,0.75);color: #ffc107;font-size: 11px;font-weight: 700;line-height: 1;padding: 4px 7px;border-radius: 5px;display: flex;align-items: center;gap: 3px;}
.movie-card-new {position: absolute;top: 8px;left: 8px;z-index: 2;background: #51C23C;color: #fff;font-size: 10px;font-weight: 700;letter-spacing: 0.03em;line-height: 1;padding: 4px 7px;border-radius: 5px;}
.movie-card-meta {font-size: 12px;}
@media (min-width: 600px) {
.movie-row-item {width: 170px;}
}
@media (min-width: 992px) {
.movie-row-item {width: 190px;}
.movie-row-title {font-size: 21px;}
}

/*Watch Movies*/
.tag_watch_movie_fluid {padding: 0 90px;width: 100%;margin: auto;}
.tag_watch_movie {width: 100%;height: 100vh;margin: -30px 0 0;position: relative;}
/* 2026-10-29: client flagged a real /movies/watch/ page ("The Prophecy") as
   looking like a flat, unintentional red tint across the whole background.
   Root cause: this blurred full-bleed backdrop is the movie's own cover art
   blown up and blurred, with only a single rgba(0,0,0,0.8) wash on top -- for
   any cover with warm/red tones (common per-movie color grading across this
   catalog) 20% of that color bleeds through uniformly behind the whole page,
   reading as an accidental overlay rather than the tasteful legibility
   gradient the detail panel actually needs. Desaturating + darkening the
   backdrop itself (not just the gradient on top) fixes this for every movie,
   not just this one -- same fix family as the saturate/brightness filter
   movies.phtml's own hero banner already applies to its cover art (see
   .ci-movie-hero .tag_cover_sec_bg img above), just never carried over to
   this page's blurred ambient backdrop. */
.tag_watch_movie_bg_img {position: absolute;top: -20px;right: -20px;bottom: -20px;left: -20px;width: calc(100% + 40px);height: calc(100% + 40px);filter: blur(15px) saturate(0.5) brightness(0.48);}
.tag_watch_movie_bg_grad {position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(180deg, rgba(7,8,12,0.55) 0%, rgba(7,8,12,0.88) 100%);}
.tag_watch_movie_scroll {overflow-y: auto;position: relative;height: 100%;}
.tag_watch_movie_center {align-items: normal;-webkit-flex-direction: column;flex-direction: column;min-height: calc(100vh - 100px);}
.tag_watch_movie_center:after, .tag_watch_movie_center:before {-webkit-box-flex: 1;box-flex: 1;-webkit-flex-grow: 1;flex-grow: 1;content: '';display: block;height: 60px;}
.tag_watch_movie_row {margin: 0 -60px;position: relative;z-index: 9;}
.tag_watch_movie_row > div {padding: 0 30px;}
.tag_watch_movie_row .avatar {min-width: 400px;}
.mve_thmb_prnt {width: 279px;margin: auto;}
.mve_thmb {position: relative;width: 100%;height: 0;padding-bottom: 144.1%;border-radius: 14px;overflow: hidden;box-shadow: 0 24px 60px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.06);}
.mve_thmb .badge {position: absolute;left: 10px;top: 10px;background: rgba(0, 0, 0, 0.7);color: #fff;font-size: 12px;line-height: 1;padding: 4px 8px;border-radius: 5px;z-index: 5;}
.mve_thmb .badge svg {margin-top: -3px;}
.tag_wm_hdr {color: rgba(255, 255, 255, 0.8);text-transform: uppercase;letter-spacing: 0.5px;font-weight: 500;}
.tag_wm_title {font-family: "TT Commons", Roboto, sans-serif;font-size: 70px;margin: 0;color: white;font-weight: 600;}
.about-film {font-size: 16px;color: rgba(255, 255, 255, 0.8);overflow: hidden;transition: all 0.15s;margin: 0;}
.about-film+.hash {display: inline-block;color: white;margin: 0;}
.tag_wm_details {margin: 10px 0 0;}
.tag_wm_details li {display: table-row;}
.tag_wm_details li span {display: table-cell;vertical-align: top;}
.tag_wm_details li span:first-child {color: rgba(255, 255, 255, 0.7);text-transform: uppercase;font-weight: 500;padding: 7px 20px 0 0;white-space: nowrap;}
.tag_wm_details li span:last-child {color: rgba(255, 255, 255, 0.9);padding-top: 7px;}
.tag_wm_foot {margin: 40px -10px 0;}
.tag_wm_play {min-width: 150px;color: white;background-color: var(--main);margin: 0 10px;line-height: 40px;}
.tag_wm_play:hover {color: white;}
.tag_wm_rate {position: relative;margin: 0 10px;min-width: 110px;}
.tag_wm_rate p {color: white;margin: 2px 0 8px;}
.tag_wm_rate p svg {margin-top: -2px;}
.tag_wm_rate .bar {background: rgba(255, 255, 255, 0.2);height: 3px;width: 100%;max-width: 110px;position: absolute;}
.tag_wm_rate .bar_innr {height: 3px;background: #bf9000;width: 0;}
.tag_wm_widget_title, .related-movies-carousel .movies-film-wrapper h3 {color: #fff;z-index: 9;position: relative;}
.related-movies-carousel .movies-film-wrapper a:after {z-index: auto;background: #000;}
.related-movies-carousel .movies-film-wrapper .avatar {z-index: 9;}
.related-movies-carousel .movies-film-wrapper p {color: rgba(255, 255, 255, 0.6);z-index: 9;position: relative;}
.movies-com-wrapper .movies-comlist-container .movies-comment-item .movies-comment-item-body h5 a {color: #fff;}
.movies-com-wrapper .movies-comlist-container .movies-comment-item .movies-comment-item-body p {margin: 0 0 5px;color: rgba(255, 255, 255, 0.8);}
.movies-com-wrapper .wo_blogcomm_combo textarea {background: rgba(255, 255, 255, 0.18);color: #fff;}
body.tag_header_top_p .tag_watch_movie {height: calc(100vh - 56px);}

/*Watch player*/
.tag_em_resp_mv, .watch_player_movie {height: 100%;width: 100%;}
.tag_em_resp_mv .tag_vid_plyr, .watch_player_movie iframe {max-width: 100%;display: block;height: 100%;max-height: 100vh;margin: auto;vertical-align: middle;position: relative;}
.watch_player_movie iframe {width: 100%;max-width: 100vw;}
.tag_em_resp_mv .tag_vid_plyr .plyr {height: inherit;}

/*Inline movie player (plays within the page's info-card area, not a fullscreen takeover)*/
.tag_wm_inline_player {width: 100%;max-width: 980px;margin: 0 auto;position: relative;z-index: 9;border-radius: 14px;overflow: hidden;background: #000;box-shadow: 0 30px 70px -20px rgba(0,0,0,0.85);}
.tag_wm_inline_player .tag_em_resp_mv, .tag_wm_inline_player .watch_player_movie {position: relative;width: 100%;height: 0;padding-bottom: 56.25%;max-height: none;}
.tag_wm_inline_player .tag_em_resp_mv .tag_vid_plyr, .tag_wm_inline_player .watch_player_movie iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;max-width: 100%;max-height: none;}
.tag_wm_inline_player .tag_em_resp_mv .tag_vid_plyr .plyr {height: 100%;}
@media (max-width: 768px) {
.tag_wm_inline_player {max-width: 100%;border-radius: 0;}
}





@media (min-width:1351px) {
body:not(.tag_header_top_p) .wow_movie_filters {background-color: var(--header-background);}
body:not(.tag_header_top_p) .wow_movie_filters .tag_sidebar_section > a {border-color: currentColor;}
body.tag_header_top_p .wow_movie_filters .tag_sidebar_head,  body.tag_header_top_p .wow_movie_filters .tag_sidebar_section > a {color: #252525;}
}

@media (max-width:1500px) {
body.tag_header_top_p .wow_movie_filters {top: auto;width: 100%;position: relative;margin-bottom: 30px;box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);border-radius: 10px;}
}

@media (max-width:1450px) {
.tag_watch_movie_row .avatar {min-width: 350px;}
}

@media (max-width:1350px) {
.wow_movie_filters {top: 60px;width: 250px;}
.tag_watch_movie, .tag_movies_cover_bg {margin: 0;}
.tag_watch_movie {height: calc(100vh - 60px);}
.mve_thmb_prnt {width: 200px;}
.tag_watch_movie_row .avatar {min-width: 250px;}
}

@media (max-width:1150px) {
.wow_movie_filters {top: auto;position: relative;width: 100%;margin-bottom: 30px;box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);border-radius: 10px;}
}

@media (max-width: 768px) {
.tag_watch_movie_row .avatar {display: none;}
.tag_watch_movie {height: calc(100vh - 105px);}
.tag_watch_movie_center {min-height: calc(100vh - 200px);}
.tag_watch_movie_row {margin: 0;}
.tag_watch_movie_row > div {padding: 0;}
.tag_watch_movie_fluid {padding: 0 15px;}
}

@media (max-width: 520px) {
.tag_watch_movie {height: calc(100vh - 97px);}
}

/* ============================================================
   CelebIsland Netflix-style Movies Redesign (2026-10-27)
   Client feedback on a real /movies screenshot: light theme, a
   350px fixed Genre/Country checkbox sidebar, small plain-grid
   poster cards. This section adds a real dynamic hero banner, a
   dark cinematic theme, bigger carousel cards with a real
   hover-zoom + desktop scroll arrows, and a compact two-pill
   dropdown filter bar -- same Wo_GetMovies()/Wo_SeoLink() data and
   links as before, presentation only.

   --mv-* below are pinned copies of this project's real
   "Obsidian & Emerald" tokens (stylesheet/ci/tokens.css). Pinned,
   not inherited via var(--ci-ink) etc. directly, because tokens.css
   flips those to the light "Ivory and Emerald" palette under
   :root[data-theme="light"] -- this page stays cinematic/dark
   regardless of the visitor's own site theme, same precedent as
   the existing always-dark watch.phtml player just below in this
   file. --mv-green/--mv-on-green alias the real brand tokens
   directly since brand green itself never changes between themes.
   ============================================================ */
.ci-movies-page {
	--mv-ink: #07080C;
	--mv-panel: #0B0D12;
	--mv-surface: #0F1117;
	--mv-surface-2: #151821;
	--mv-chip: #1d212a;
	--mv-line: #454d63;
	--mv-line-soft: #33394a;
	--mv-bone: #F7F7F3;
	--mv-text-2: #c3c7d0;
	--mv-text-3: #a3a8b4;
	--mv-text-4: #8a909c;
	--mv-warn: #f0b44c;
	--mv-green: var(--ci-green, #51C23C);
	--mv-green-hover: var(--ci-green-hover, #7ee06a);
	--mv-on-green: var(--ci-on-green, #07080C);
	--mv-ease: var(--ci-ease, cubic-bezier(.2,.7,.2,1));
	--mv-dur: var(--ci-dur, 180ms);
	--mv-r-sm: var(--ci-r-sm, 8px);
	--mv-r-md: var(--ci-r-md, 12px);
	--mv-r-lg: var(--ci-r-lg, 18px);
	--mv-r-pill: var(--ci-r-pill, 999px);
	--mv-font-display: var(--ci-font-display, "Fraunces", Georgia, serif);
	background: var(--mv-ink);
	color: var(--mv-bone);
}
.ci-movies-page a {color: inherit;}

/* ---- Hero banner ---- */
.ci-movie-hero {height: auto;min-height: 82vh;padding: 0;margin: 0;background: var(--mv-ink);overflow: hidden;}
/* No explicit height here on purpose: .ci-movie-hero's own height is "auto"
   (driven by its real text content, which can run taller than min-height on
   small screens with a long synopsis). Pairing that with an explicit
   height:100% here fights the top/right/bottom/left:0 stretch -- percentage
   heights don't resolve reliably against an auto-height containing block, so
   the backdrop stopped growing with the hero and the row below showed
   through. Offsets alone (already the base .tag_cover_sec_bg technique used
   site-wide) stretch correctly with no percentage-height ambiguity. */
.ci-movie-hero .tag_cover_sec_bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
/* .ci-movies-page prefix added purely for extra CSS specificity: the
   conditional night-mode dark.css stylesheet (loaded after this file when
   the "mode=night" cookie is set) carries its own same-specificity
   .tag_movies_cover_bg .tag_cover_bg_grad rule, which would otherwise win
   the cascade by load order and silently drop this hero's intended
   gradient/filter back to the old generic cover treatment. */
.ci-movies-page .ci-movie-hero .tag_cover_sec_bg img {filter: saturate(1.05) brightness(0.72);object-position: center 22%;}
.ci-movies-page .ci-movie-hero .tag_cover_bg_grad {background: linear-gradient(180deg, rgba(7,8,12,0.15) 0%, rgba(7,8,12,0.35) 40%, var(--mv-ink) 96%), linear-gradient(90deg, rgba(7,8,12,0.95) 0%, rgba(7,8,12,0.65) 32%, rgba(7,8,12,0.1) 68%);}
.ci-movie-hero-vignette {position: absolute;top: 0;right: 0;bottom: 0;left: 0;box-shadow: inset 0 0 160px 40px rgba(7,8,12,0.55);pointer-events: none;}
.ci-movie-hero > .container {position: relative;z-index: 2;padding-top: 180px;padding-bottom: 60px;min-height: 82vh;display: flex;align-items: flex-end;}
.ci-movie-hero-content {max-width: 620px;text-align: left;padding-bottom: 10px;}
.ci-movie-hero-eyebrow {display: inline-flex;align-items: center;gap: 6px;font-size: 12px;font-weight: 700;letter-spacing: .06em;text-transform: uppercase;color: var(--mv-green);margin-bottom: 14px;}
.ci-movie-hero-title {font-family: var(--mv-font-display);font-size: 54px;line-height: 1.05;font-weight: 700;color: var(--mv-bone);margin: 0 0 16px;text-transform: none;text-shadow: 0 4px 24px rgba(0,0,0,0.5);}
.ci-movie-hero-meta {display: flex;flex-wrap: wrap;align-items: center;gap: 10px;margin-bottom: 16px;}
.ci-movie-hero-rating {display: inline-flex;align-items: center;gap: 4px;color: var(--mv-warn);font-weight: 700;font-size: 14px;}
.ci-movie-hero-chip {font-size: 13px;font-weight: 600;color: var(--mv-text-2);padding: 3px 10px;border: 1px solid var(--mv-line);border-radius: var(--mv-r-pill);}
.ci-movie-hero-chip-hd {color: var(--mv-bone);border-color: var(--mv-green);}
.ci-movie-hero-desc {font-size: 16px;line-height: 1.5;color: var(--mv-text-2);margin: 0 0 24px;max-width: 560px;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.ci-movie-hero-actions {display: flex;flex-wrap: wrap;gap: 14px;margin-bottom: 26px;}
.ci-movie-hero-btn {display: inline-flex;align-items: center;gap: 8px;padding: 13px 26px;border-radius: var(--mv-r-sm);font-size: 15px;font-weight: 700;text-decoration: none;transition: transform var(--mv-dur) var(--mv-ease), background var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease);}
.ci-movie-hero-btn:hover {text-decoration: none;transform: translateY(-1px);}
.ci-movie-hero-btn-play {background: var(--mv-green);color: var(--mv-on-green);}
.ci-movie-hero-btn-play:hover {background: var(--mv-green-hover);color: var(--mv-on-green);box-shadow: 0 10px 30px -8px rgba(81,194,60,0.55);}
.ci-movie-hero-btn-info {background: rgba(255,255,255,0.08);color: var(--mv-bone);border: 1px solid var(--mv-line);backdrop-filter: blur(6px);}
.ci-movie-hero-btn-info:hover {background: rgba(255,255,255,0.16);color: var(--mv-bone);}
.ci-movie-hero-search {max-width: 340px;margin: 0;}
.ci-movie-hero-search input {background: rgba(15,17,23,0.75);color: var(--mv-bone);border: 1px solid var(--mv-line);box-shadow: none;}
.ci-movie-hero-search input::placeholder {color: var(--mv-text-4);}
.ci-movie-hero-search svg {color: var(--mv-text-4);}
.ci-movie-hero-search input:focus+svg {color: var(--mv-green);}
.ci-movie-hero-search .search-result {background: var(--mv-surface-2);border: 1px solid var(--mv-line);}
.ci-movie-hero-search .search-result li:hover {background: var(--mv-chip);}
.ci-movie-hero .btn_goback {z-index: 3;}
@media (max-width: 991px) {
.ci-movie-hero {min-height: 72vh;}
.ci-movie-hero > .container {min-height: 72vh;padding-top: 110px;padding-bottom: 36px;}
.ci-movie-hero-title {font-size: 32px;}
.ci-movie-hero-desc {font-size: 14px;-webkit-line-clamp: 3;}
.ci-movie-hero-btn {padding: 11px 20px;font-size: 14px;}
.ci-movie-hero-search {max-width: 100%;}
}
@media (max-width: 520px) {
.ci-movie-hero {min-height: 62vh;}
.ci-movie-hero > .container {min-height: 62vh;padding-top: 86px;padding-bottom: 24px;}
.ci-movie-hero-content {max-width: 100%;}
.ci-movie-hero-title {font-size: 26px;margin-bottom: 10px;}
.ci-movie-hero-eyebrow {margin-bottom: 8px;}
.ci-movie-hero-meta {margin-bottom: 10px;}
.ci-movie-hero-desc {font-size: 13px;-webkit-line-clamp: 2;margin-bottom: 16px;}
.ci-movie-hero-actions {margin-bottom: 18px;gap: 10px;}
}

/* ---- Compact filter bar (replaces the old 350px fixed sidebar) ---- */
.ci-movie-filters-bar {position: static;width: 100%;background: none;overflow: visible;display: flex;flex-wrap: wrap;align-items: center;gap: 10px;margin-bottom: 26px;}
.ci-movie-filter-dd {position: relative;}
.ci-movie-filter-dd summary {list-style: none;cursor: pointer;}
.ci-movie-filter-dd summary::-webkit-details-marker {display: none;}
.ci-movie-filter-trigger {display: inline-flex;align-items: center;gap: 7px;padding: 9px 16px;border-radius: var(--mv-r-pill);background: var(--mv-surface);border: 1px solid var(--mv-line);color: var(--mv-bone);font-size: 13px;font-weight: 700;text-transform: capitalize;transition: background var(--mv-dur) var(--mv-ease), border-color var(--mv-dur) var(--mv-ease);}
.ci-movie-filter-dd:hover .ci-movie-filter-trigger, .ci-movie-filter-dd[open] .ci-movie-filter-trigger {background: var(--mv-surface-2);border-color: var(--mv-green);}
.ci-movie-filter-chevron {transition: transform var(--mv-dur) var(--mv-ease);}
.ci-movie-filter-dd[open] .ci-movie-filter-chevron {transform: rotate(180deg);}
.ci-movie-filter-panel {position: absolute;top: calc(100% + 8px);left: 0;z-index: 60;display: flex;flex-wrap: wrap;gap: 8px;width: min(480px, 90vw);max-height: 320px;overflow-y: auto;padding: 14px;background: var(--mv-surface);border: 1px solid var(--mv-line);border-radius: var(--mv-r-md);box-shadow: 0 24px 60px -20px rgba(0,0,0,0.75);}
.ci-movie-filter-chip {padding: 7px 14px;border-radius: var(--mv-r-pill);background: var(--mv-chip);color: var(--mv-text-2);font-size: 13px;font-weight: 600;text-decoration: none;text-transform: capitalize;transition: background var(--mv-dur) var(--mv-ease), color var(--mv-dur) var(--mv-ease);}
.ci-movie-filter-chip:hover {background: var(--mv-green);color: var(--mv-on-green);text-decoration: none;}
.ci-movie-filter-chip.active {background: var(--mv-green);color: var(--mv-on-green);}
.ci-movie-filter-active {display: inline-flex;align-items: center;gap: 8px;padding: 8px 8px 8px 14px;border-radius: var(--mv-r-pill);background: var(--mv-green-soft, rgba(81,194,60,0.14));color: var(--mv-bone);font-size: 13px;font-weight: 600;text-transform: capitalize;}
.ci-movie-filter-clear {display: inline-flex;align-items: center;justify-content: center;width: 20px;height: 20px;border-radius: 50%;background: rgba(255,255,255,0.12);color: var(--mv-bone);text-decoration: none;font-size: 15px;line-height: 1;}
.ci-movie-filter-clear:hover {background: rgba(255,255,255,0.24);color: var(--mv-bone);text-decoration: none;}
@media (max-width: 600px) {
.ci-movie-filter-panel {width: 92vw;}
}

/* ---- Dark card chrome + real hover-zoom (also benefits the related-movies
   carousel on the watch page, which already renders this same component
   dark via its own .related-movies-carousel overrides below) ---- */
.movies-film-wrapper a:after {display: none;}
.movies-film-wrapper {transition: transform var(--mv-dur, 180ms) var(--mv-ease, cubic-bezier(.2,.7,.2,1));}
.movies-film-wrapper .avatar {border-radius: var(--mv-r-md, 12px);overflow: hidden;box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;background-color: var(--mv-surface, #0F1117);}
.movies-film-wrapper .avatar img {transition: transform 420ms var(--mv-ease, cubic-bezier(.2,.7,.2,1));}
.movie-card-hover-play {position: absolute;top: 50%;left: 50%;width: 44px;height: 44px;margin: -22px 0 0 -22px;border-radius: 50%;background: rgba(7,8,12,0.55);color: #fff;display: flex;align-items: center;justify-content: center;opacity: 0;transform: scale(.7);transition: opacity var(--mv-dur, 180ms) var(--mv-ease), transform var(--mv-dur, 180ms) var(--mv-ease);backdrop-filter: blur(2px);z-index: 2;}
@media (hover: hover) {
.movies-film-wrapper a:hover {transform: translateY(-6px) scale(1.035);z-index: 5;}
.movies-film-wrapper a:hover .avatar {box-shadow: 0 30px 70px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(81,194,60,0.35);}
.movies-film-wrapper a:hover .avatar img {transform: scale(1.08);}
.movies-film-wrapper a:hover .movie-card-hover-play {opacity: 1;transform: scale(1);}
}
.ci-movies-page .movie-row-title, .ci-movies-page .movies-browse-all-title {color: var(--mv-bone);}
.ci-movies-page .movies-film-wrapper h3 {color: var(--mv-bone);}
.ci-movies-page .movies-film-wrapper p {color: var(--mv-text-3);}
.ci-movies-page .movies-top-breadcrumb {background: var(--mv-surface);box-shadow: none;border: 1px solid var(--mv-line);}
.ci-movies-page .movies-top-breadcrumb > li > a {color: var(--mv-text-2);}
.ci-movies-page .movies-top-breadcrumb > li.active > a {background: var(--mv-green);color: var(--mv-on-green);}
.ci-movies-page .btn-default {background: var(--mv-surface);color: var(--mv-bone);border: 1px solid var(--mv-line);}
.ci-movies-page .btn-default:hover {background: var(--mv-surface-2);color: var(--mv-bone);}
.ci-movies-page .empty_state {color: var(--mv-text-3);}

/* ---- Bigger carousel cards + desktop scroll arrows ---- */
.movie-row-viewport {position: relative;}
.movie-row-item {width: 168px;}
.movie-row-arrow {display: none;}
@media (min-width: 992px) {
.movie-row-item {width: 215px;}
.movie-row-scroll {scroll-behavior: smooth;padding: 4px 4px 14px;}
.movie-row-arrow {display: flex;align-items: center;justify-content: center;position: absolute;top: 0;bottom: 14px;width: 44px;z-index: 10;background: linear-gradient(90deg, var(--mv-ink) 0%, rgba(7,8,12,0.75) 60%, transparent 100%);color: var(--mv-bone);border: 0;cursor: pointer;opacity: 0;transition: opacity var(--mv-dur, 180ms) var(--mv-ease, cubic-bezier(.2,.7,.2,1));}
.movie-row-arrow-prev {left: 0;}
.movie-row-arrow-next {right: 0;background: linear-gradient(270deg, var(--mv-ink) 0%, rgba(7,8,12,0.75) 60%, transparent 100%);}
.movie-row-viewport:hover .movie-row-arrow {opacity: 1;}
.movie-row-arrow:hover {color: var(--mv-green);}
}
@media (min-width: 1400px) {
.movie-row-item {width: 236px;}
}