/*!
 * ============================================================================
 * fmovie  -  complete redesign
 * ============================================================================
 * This single stylesheet supersedes the visual design of style.css. It is loaded
 * after it and re-styles every template: front page, grids, archives, movie and
 * TV singles, the player, comments, forms, sidebar, footer, pagination, 404.
 *
 * It is a restyle, not a rewrite of the markup: no PHP template needed changing
 * beyond the rating badge, so nothing can break structurally.
 *
 * Design language
 *   Reference: https://codepen.io/vincenzopiromalli/pen/EaaKJRw
 *
 *   Colour      near-black base, three-step surface scale, ONE bright accent
 *   Separation  1px hairline borders and lighter fills  -  not heavy shadows
 *   Shape       uniform radius; pills reserved for search
 *   Type        Inter, extrabold headings, uppercase micro-labels
 *   Texture     a subtle grain layer so flat black does not band
 *   Motion      short, eased, and disabled under prefers-reduced-motion
 *
 * Every colour derives from the theme's --primary, so Fmovies → Branding still
 * drives the whole design. See CODEPEN-ANALYSIS.md for the extracted tokens.
 *
 * Contents
 *    1  Tokens                      9  Servers / player controls
 *    2  Reset + foundation         10  Single: info panel
 *    3  Layout primitives          11  TV: seasons / episodes
 *    4  Header + navigation        12  Sidebar + list widgets
 *    5  Cards                      13  Comments + forms
 *    6  Section headings + sliders 14  Footer
 *    7  Toolbars + filters         15  Pagination
 *    8  Watch / player hero        16  Utilities, focus, motion, fallbacks
 * ========================================================================= */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
	/* Surfaces */
	--fm-bg: #050505;
	--fm-surface-1: #0a0a0a;
	--fm-surface-2: #121212;
	--fm-surface-3: #1a1a1a;
	--fm-border: #1f1f1f;
	--fm-border-soft: rgba(255, 255, 255, 0.07);

	/* Accent  -  replaced by --primary from the theme colour picker */
	--fm-accent: #00f0b5;
	--fm-accent-deep: #004d40;
	--fm-accent-2: #00d1ff;

	/* Text ramp (all measured against their real backgrounds) */
	--fm-text: #ffffff;
	--fm-text-2: #a1a8b3;
	--fm-text-3: #7c848f;
	--fm-on-accent: #04120e;

	/* Shape */
	--fm-r-sm: 4px;
	--fm-r: 8px;
	--fm-r-lg: 12px;
	--fm-r-xl: 16px;
	--fm-r-pill: 999px;

	/* The only shadow used, and only where something truly floats */
	--fm-float: 0 12px 32px rgba(0, 0, 0, 0.65);
	--fm-float-sm: 0 4px 14px rgba(0, 0, 0, 0.5);

	/* Spacing rhythm */
	--fm-gap: 16px;
	--fm-gap-lg: 28px;
	--fm-section: 44px;

	/* Type */
	--fm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	/* Motion */
	--fm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--fm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--fm-fast: 140ms;
	--fm-med: 240ms;
	--fm-slow: 420ms;

	--fm-maxw: 1320px;
}

/* The theme colour picker injects --primary; the accent follows it. */
body { --fm-accent: var(--primary, #00f0b5); }

/* ==========================================================================
   2. RESET + FOUNDATION
   ========================================================================== */

/* Kill the old theme's ambient washes  -  the new system does not use them. */
body::before { content: none !important; }

body {
	background-color: var(--fm-bg) !important;
	color: var(--fm-text-2);
	font-family: var(--fm-font);
	font-size: 0.9375rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/*
 * Texture. At #050505 large flat areas band visibly on ordinary panels and read
 * as a void. A ~2.5% noise layer is imperceptible as texture but removes it.
 */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.025;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/*
 * Everything real sits above the grain.
 *
 * BUG FIXED: this rule gave `main`, `.wrapper` and `footer` a z-index, which makes
 * each of them a stacking context. The report dialog is rendered inside main >
 * .wrapper, and Bootstrap positions a modal with `position: fixed; z-index: 1050`.
 * Because an ancestor had a z-index, that 1050 was resolved *inside* the wrapper
 * rather than against the page — and the backdrop, which is appended to <body>,
 * sits at 1040 in the page's own context. The backdrop therefore always painted
 * over the dialog and swallowed every click on it, so Submit could not be pressed
 * at all.
 *
 * Position stays on the wrapper (needed so the grain can be layered behind it),
 * but the z-index is removed from the two elements that contain the modal. With no
 * ancestor stacking context, the modal's own z-index competes where it should and
 * the dialog sits above the backdrop as intended.
 *
 * `#masthead` (sticky) and `#player-wrapper` (needs to sit above the lights-off
 * overlay) keep a z-index — neither contains a modal.
 */
.wrapper, #masthead, main, footer, #player-wrapper { position: relative; }
#masthead, #player-wrapper { z-index: 1; }

h1, h2, h3, h4, h5, h6 {
	color: var(--fm-text);
	font-family: var(--fm-font);
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.22;
	margin: 0 0 0.6rem;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.8rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 0.95rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--fm-text); text-decoration: none; transition: color var(--fm-fast) var(--fm-ease); }
a:hover { color: var(--fm-accent); }

img { max-width: 100%; height: auto; }
img.lazyload, img.lazyloading { background-color: var(--fm-surface-2); }

hr { border: 0; border-top: 1px solid var(--fm-border); margin: 2rem 0; opacity: 1; }
table { border-color: var(--fm-border); color: var(--fm-text-2); }
code, pre, kbd { background: var(--fm-surface-2); border: 1px solid var(--fm-border); border-radius: var(--fm-r-sm); color: var(--fm-accent); }
code { padding: 0.1em 0.4em; }
pre { padding: 1rem; overflow: auto; }

::selection { background: var(--fm-accent-deep); color: #b9fff0; }

blockquote {
	margin: 1.5rem 0;
	padding: 0.85rem 1.15rem;
	border-left: 3px solid var(--fm-accent);
	background: var(--fm-surface-1);
	border-radius: 0 var(--fm-r) var(--fm-r) 0;
	color: var(--fm-text);
}

/* Screen-reader text (core provides this, we ensure it is not overridden). */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.container,
.container-sm,
.container-lg,
.container-xl {
	width: 100%;
	max-width: var(--fm-maxw) !important;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.container.sm { max-width: 980px !important; }

/* Main + sidebar split used on archives and singles. */
.aside-wrapper {
	display: flex;
	align-items: flex-start;
	gap: var(--fm-gap-lg);
	margin-top: var(--fm-gap-lg);
}

.aside-wrapper > .main,
.aside-wrapper > aside.main { flex: 1 1 auto; min-width: 0; }

.aside-wrapper > .sidebar,
.aside-wrapper > aside.sidebar {
	flex: 0 0 320px;
	width: 320px;
	min-width: 0;
}

.top-space { height: var(--fm-section); }

@media (max-width: 1024px) {
	.aside-wrapper { flex-direction: column; gap: var(--fm-gap); }
	.aside-wrapper > .sidebar,
	.aside-wrapper > aside.sidebar { flex: 1 1 auto; width: 100%; }
}

section { margin-bottom: var(--fm-section); }
section:last-child { margin-bottom: 0; }

.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.text-center { text-align: center !important; }
.clearfix::after { content: ""; display: table; clear: both; }

/* --------------------------------------------------------------------------
   SEARCH  -  pill input with an accent focus ring
   Used in the header, the front-page hero and the archive toolbars. The
   reference uses a quiet dark pill that only lights up on focus, so the
   resting state is deliberately low-contrast and the accent is reserved for
   interaction.
   -------------------------------------------------------------------------- */
.search-box { position: relative; }

.search-box .search-toggler {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text-2);
	cursor: pointer;
	transition: all var(--fm-fast) var(--fm-ease);
}
.search-box .search-toggler:hover {
	background: var(--fm-surface-3);
	border-color: var(--fm-accent);
	color: var(--fm-accent);
}

.search-box .search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 4px 4px 4px 6px;
	border-radius: var(--fm-r-pill) !important;
	background: var(--fm-surface-2) !important;
	background-image: none !important;
	border: 1px solid var(--fm-border) !important;
	box-shadow: none !important;
	transition: border-color var(--fm-med) var(--fm-ease), box-shadow var(--fm-med) var(--fm-ease);
}
.search-box .search-wrap:focus-within {
	border-color: var(--fm-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fm-accent) 20%, transparent) !important;
}

.search-box .search-wrap form {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	width: 100%;
	margin: 0;
}

/* The "Filter" link sits inside the pill on the left. */
.search-box .filter-btn,
.search-box .search-wrap form .filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex: 0 0 auto;
	padding: 0.35rem 0.7rem !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: var(--fm-r-pill) !important;
	background: var(--fm-surface-3) !important;
	color: var(--fm-text-2) !important;
	font-size: 0.66rem !important;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.4;
}
.search-box .filter-btn:hover,
.search-box .search-wrap form .filter-btn:hover {
	background: var(--fm-accent-deep) !important;
	color: var(--fm-accent) !important;
}

.search-box .search-wrap form input[type="text"],
.search-box .search-wrap form input[type="search"] {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	padding: 0.4rem 0.5rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--fm-text) !important;
	font-size: 0.82rem !important;
	text-align: center;
}
.search-box .search-wrap form input::placeholder { color: var(--fm-text-3); }

/* Submit button: square accent control on the right of the pill. */
.search-box .search-wrap form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--fm-r) !important;
	background: transparent !important;
	color: var(--fm-text-2) !important;
	cursor: pointer;
	transition: all var(--fm-fast) var(--fm-ease);
}
.search-box .search-wrap form button[type="submit"]:hover {
	background: var(--fm-accent) !important;
	color: var(--fm-on-accent) !important;
}
.search-box .search-wrap form button[type="submit"] i { font-size: 0.9rem; }

/* Live suggestions dropdown */
.search-box .suggestions,
.suggestions {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 1060;
	border-radius: var(--fm-r-lg);
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
	box-shadow: var(--fm-float);
	overflow: hidden;
}
.suggestions:empty { display: none; }
.suggestions a,
.suggestions li {
	display: block;
	padding: 0.55rem 0.85rem;
	color: var(--fm-text-2);
	font-size: 0.82rem;
	border-bottom: 1px solid var(--fm-border-soft);
}
.suggestions a:last-child, .suggestions li:last-child { border-bottom: 0; }
.suggestions a:hover, .suggestions li:hover {
	background: var(--fm-surface-2);
	color: var(--fm-accent);
}

/* ==========================================================================
   4. HEADER + NAVIGATION
   ========================================================================== */


#masthead {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: rgba(5, 5, 5, 0.78) !important;
	background-image: none !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--fm-border-soft);
	padding: 0 !important;
	transition: border-color var(--fm-med) var(--fm-ease);
}

#masthead .container > .wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 64px;
	padding: 0.5rem 0;
}

#masthead .wrapper .start,
#masthead .wrapper .end {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

body.admin-bar #masthead { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar #masthead { top: 46px; } }

/* Burger */
#menu-toggler {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
	border-radius: var(--fm-r);
	background: var(--fm-surface-2);
	color: var(--fm-text-2);
	cursor: pointer;
	transition: background-color var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}
#menu-toggler:hover { background: var(--fm-surface-3); color: var(--fm-accent); }
#menu-toggler i { font-size: 1.3rem !important; line-height: 1; }

/* Brand */
.site-title,
h1.site-title,
p.site-title {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	line-height: 1 !important;
	text-transform: none !important;
	color: var(--fm-text) !important;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.site-title a,
h1.site-title a,
p.site-title a {
	color: var(--fm-text) !important;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.site-title a:hover { color: var(--fm-accent) !important; }
.site-title:before { content: none !important; }

/* Login / account chip */
header .wrapper .end a,
header .wrapper .end span {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--fm-text-2);
}
header .wrapper .end a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-2);
	border: 1px solid transparent;
	transition: all var(--fm-fast) var(--fm-ease);
}
header .wrapper .end a:hover {
	background: var(--fm-surface-3);
	border-color: var(--fm-border);
	color: var(--fm-text);
}

/* Nav drawer / dropdown */
header .wrapper .start #menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	display: none;
	min-width: 230px;
	max-width: min(92vw, 340px);
	z-index: 1040;
}
header .wrapper .start #menu.open,
header .wrapper .start #menu[style*="block"] { display: block !important; }

header .wrapper .start #menu > ul {
	list-style: none;
	margin: 0 !important;
	padding: 0.5rem !important;
	background: var(--fm-surface-1) !important;
	border: 1px solid var(--fm-border) !important;
	border-radius: var(--fm-r-lg) !important;
	box-shadow: var(--fm-float) !important;
}

header .wrapper .start #menu > ul > li { position: relative; }

header .wrapper .start #menu > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem !important;
	border-radius: var(--fm-r);
	color: var(--fm-text-2) !important;
	font-size: 0.85rem !important;
	font-weight: 600;
	background: none !important;
	transition: background-color var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}
header .wrapper .start #menu > ul > li > a:hover,
header .wrapper .start #menu > ul > li > a:focus {
	background: var(--fm-surface-2) !important;
	color: var(--fm-accent) !important;
}
header .wrapper .start #menu > ul > li.current-menu-item > a {
	background: var(--fm-accent-deep) !important;
	color: var(--fm-accent) !important;
}
header .wrapper .start #menu > ul > li > a:after { content: none !important; }

/*
 * Nested lists.
 *
 * BUG FIXED: this rule carried `display: block !important`, which forced every
 * sub-menu permanently open. It dates from when the panels were plain always-
 * visible lists; they are now a proper <button> disclosure, and that declaration
 * beat the `[hidden]` attribute on specificity — so Genre and Country were both
 * expanded the moment the drawer opened, and the disclosure buttons appeared to
 * do nothing.
 *
 * Visibility is now the `hidden` attribute's job alone. Nothing here may set
 * display, or the same bug returns.
 */
header .wrapper .start #menu > ul > li > ul {
	list-style: none;
	margin: 0.25rem 0 0.4rem !important;
	padding: 0.35rem 0 0.35rem 0.5rem !important;
	background: transparent !important;
	border: 0 !important;
	border-left: 1px solid var(--fm-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	position: static !important;
}
header .wrapper .start #menu > ul > li > ul a {
	display: block;
	padding: 0.35rem 0.6rem !important;
	border-radius: var(--fm-r-sm);
	font-size: 0.8rem !important;
	color: var(--fm-text-3) !important;
	background: none !important;
}
header .wrapper .start #menu > ul > li > ul a:hover {
	background: var(--fm-accent-deep) !important;
	color: var(--fm-accent) !important;
}

/* ==========================================================================
   5. CARDS
   ========================================================================== */
.movies.items,
.filmlist {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(var(--fm-card, 158px), 1fr));
	gap: var(--fm-gap) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
@media (min-width: 1200px) { .movies.items, .filmlist { --fm-card: 150px; } }

/*
 * The original theme lays cards out with float: left and a percentage width
 * (14.2857% for a 7-up row, 16.6667% for 6-up). Those declarations outrank the
 * grid child rules, so each card collapsed to a sliver inside its grid cell.
 * They are reset explicitly here.
 */
.movies.items .item,
.filmlist .item,
.movies.items > .item,
.filmlist.items .item {
	position: relative;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	background: none;
	border: 0;
	padding: 0 !important;
	transition: z-index var(--fm-fast) var(--fm-ease);
}
.movies.items .item:hover { z-index: 10; }

/* Poster */
.movies.items .item .poster {
	position: relative;
	display: block;
	padding-bottom: 148% !important;
	border-radius: var(--fm-r) !important;
	overflow: hidden;
	background-color: var(--fm-surface-2) !important;
	background-image: none !important;
	border: 1px solid var(--fm-border) !important;
	box-shadow: none !important;
	transition: border-color var(--fm-med) var(--fm-ease), transform var(--fm-med) var(--fm-ease);
}

.movies.items .item:hover .poster {
	border-color: var(--fm-accent) !important;
	transform: translateY(-4px);
}

.movies.items .item .poster a {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
}

.movies.items .item .poster a img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--fm-slow) var(--fm-ease-out), opacity var(--fm-med) var(--fm-ease);
}
.movies.items .item:hover .poster a img { transform: scale(1.05); }

/* Hover scrim + play glyph */
.movies.items .item .poster a:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.1) 45%, transparent 70%);
	opacity: 0;
	transition: opacity var(--fm-med) var(--fm-ease);
}
.movies.items .item .poster a:before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	margin: 0 !important;
	transform: translate(-50%, -50%) scale(0.85);
	font-family: bootstrap-icons;
	content: "\f4f2";
	font-size: 2.75rem !important;
	line-height: 1;
	color: #fff !important;
	text-shadow: 0 3px 16px rgba(0, 0, 0, 0.85);
	filter: none !important;
	opacity: 0;
	transition: opacity var(--fm-med) var(--fm-ease), transform var(--fm-med) var(--fm-ease-out);
}
.movies.items .item .poster:hover a:after { opacity: 1; }
.movies.items .item .poster:hover a:before { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Quality chip (top-left) */
.movies.items .item > .quality,
.movies.items .item .quality {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 3px 8px;
	border-radius: var(--fm-r-sm);
	background: rgba(10, 10, 10, 0.86) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--fm-border-soft);
	color: var(--fm-text) !important;
	font-size: 0.6rem !important;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.4;
	box-shadow: none !important;
}

/* Rating badge (top-right) */
.fm-rating {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 7;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 8px;
	border-radius: var(--fm-r-sm);
	background: rgba(10, 10, 10, 0.86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--fm-border-soft);
	color: var(--fm-accent);
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.fm-rating i { font-size: 0.58rem; line-height: 1; }

/* Card meta */
.movies.items .item .meta {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 0.6rem !important;
}

.movies.items .item .meta > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	font-size: 0.7rem;
	color: var(--fm-text-3);
}

.movies.items .item .meta > div > span {
	display: inline-block;
	width: auto !important;
	max-width: 40%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.7rem !important;
	color: var(--fm-text-3);
	font-variant-numeric: tabular-nums;
}
.movies.items .item .meta > div > span:first-child { max-width: none; }
.movies.items .item .meta > div > span:last-child { text-align: right; }

.movies.items .item .meta > div > span.type {
	flex: 0 0 auto;
	padding: 1px 6px !important;
	border: 1px solid var(--fm-border) !important;
	border-radius: var(--fm-r-sm) !important;
	background: var(--fm-surface-2) !important;
	color: var(--fm-text-2) !important;
	font-size: 0.6rem !important;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5;
}
.movies.items .item:hover .meta .type {
	border-color: var(--fm-accent) !important;
	background: var(--fm-accent-deep) !important;
	color: var(--fm-accent) !important;
}

.movies.items .item .meta > a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--fm-text) !important;
	font-size: 0.84rem !important;
	font-weight: 600;
	line-height: 1.35 !important;
	letter-spacing: -0.01em;
	max-height: 2.7em;
	transition: color var(--fm-fast) var(--fm-ease);
}
.movies.items .item:hover .meta > a { color: var(--fm-accent) !important; }

/* Missing artwork */
.movies.items .item .poster a img[src*="noimage"],
.movies.items .item .poster a img[data-src*="noimage"] {
	object-fit: contain;
	padding: 32%;
	opacity: 0.18;
	filter: none;
	transform: none !important;
}
.movies.items .item:hover .poster a img[src*="noimage"],
.movies.items .item:hover .poster a img[data-src*="noimage"] { opacity: 0.3; }

/* Folder / dropdown inside a card */
.movies.items .item .folder { margin-top: 0.35rem; }
.movies.items .item .folder .folder-toggle {
	display: block;
	width: 100%;
	padding: 0.3rem;
	border-radius: var(--fm-r-sm);
	background: var(--fm-surface-2) !important;
	border: 1px solid var(--fm-border);
	color: var(--fm-text-2);
	font-size: 0.7rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}
.movies.items .item .folder .folder-toggle:hover {
	border-color: var(--fm-accent);
	color: var(--fm-accent);
}

/* ==========================================================================
   6. SECTION HEADINGS + SLIDERS
   ========================================================================== */

/*
 * The featured slider reserves a fixed 800px height in the original theme. If
 * the "Slider" category is empty  -  which is the normal state on a fresh install,
 * since the category is auto-created but has no posts  -  the theme still renders
 * the container, producing a huge empty black band above the fold.
 *
 * :has() collapses it only when there is genuinely nothing inside, so a
 * populated slider is untouched and an empty one costs no space at all.
 */
.swiper#featured:not(:has(.swiper-slide)) { display: none !important; }
.filmlist.items:not(:has(.item)),
.tab-content .filmlist:not(:has(.item)),
#trending:not(:has(.item)),
#trending .body:not(:has(.item)) { display: none !important; }

.head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--fm-border);
}

.head .start,
.head .end { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.head .title,
h1.title,
h2.title,
.section-title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--fm-accent) !important;
	font-size: 1.05rem !important;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.head .title i,
h1.title i,
h2.title i { color: var(--fm-accent); font-size: 1rem; }

/* Tabs in a section head */
.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tabs .tab,
.tabs .lol {
	padding: 0.35rem 0.8rem;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-2);
	border: 1px solid transparent;
	color: var(--fm-text-3);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--fm-fast) var(--fm-ease);
}
.tabs .tab:hover,
.tabs .lol:hover { background: var(--fm-surface-3); color: var(--fm-text); }
.tabs .tab.active,
.tabs .lol.active {
	background: var(--fm-accent) !important;
	border-color: var(--fm-accent);
	color: var(--fm-on-accent) !important;
}

/* --------------------------------------------------------------------------
   FEATURED SLIDER
   The original theme hard-codes height: 850px, which is taller than most
   laptops and pushes the grid below the fold. It is now viewport-relative with
   sane bounds. The backdrop comes from a background-image on the slide, and the
   original left-to-right scrim (which made the caption legible over any
   artwork) is kept and re-tinted.
   -------------------------------------------------------------------------- */
.swiper#featured {
	position: relative;
	height: clamp(380px, 56vh, 620px) !important;
	overflow: hidden;
}

.swiper#featured .swiper-slide {
	position: relative;
	height: 100% !important;
	background-size: cover !important;
	background-position: center 22% !important;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Legibility scrim: dark on the left, clear on the right, as the original. */
.swiper#featured .swiper-slide:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(5, 5, 5, 0.96) 0%, rgba(5, 5, 5, 0.82) 38%, rgba(5, 5, 5, 0.25) 68%, transparent 100%),
		linear-gradient(0deg, rgba(5, 5, 5, 0.85) 0%, transparent 55%);
	pointer-events: none;
}

.swiper#featured .swiper-slide > .container {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: flex-end;
	/*
	 * The original theme gives .container a large top padding, which made it
	 * taller than the slide and pushed the caption out through the top edge.
	 * Reset here, with the space applied at the bottom instead.
	 */
	padding-top: 1rem !important;
	padding-bottom: 3rem !important;
}

.slide-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 620px;
	width: 100%;
}

/* Caption is no longer absolutely positioned  -  it flows in the wrapper. */
.slide-wrapper .info {
	position: static !important;
	left: auto; right: auto; bottom: auto;
	padding: 0 !important;
	background: none !important;
}

.slide-wrapper .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.slide-wrapper .actions .start { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.slide-wrapper .image,
.slide-wrapper > img { border-radius: var(--fm-r-lg); overflow: hidden; }

@media (max-width: 767px) {
	.swiper#featured { height: clamp(320px, 48vh, 460px) !important; }
	.swiper#featured .swiper-slide > .container { padding-bottom: 2rem; }
	.slide-wrapper { max-width: 100%; }
	.slide-wrapper .info .description { display: none; }
}

.slide-wrapper .info {
	position: static;
	padding: 0;
	background: none;
}
.slide-wrapper .info .name,
.slide-wrapper .info h2 {
	color: #fff;
	font-size: clamp(1.2rem, 1rem + 1.4vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0 0 0.4rem;
}
.slide-wrapper .info .description { color: var(--fm-text-2); max-width: 56ch; font-size: 0.88rem; }

.slide-wrapper .info .meta { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.6rem; }
.slide-wrapper .info .meta .quality {
	padding: 2px 8px;
	border-radius: var(--fm-r-sm);
	background: rgba(10,10,10,0.86);
	border: 1px solid var(--fm-border-soft);
	color: var(--fm-text);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.slide-wrapper .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }

.swiper-button-prev,
.swiper-button-next {
	width: 40px !important;
	height: 40px !important;
	margin-top: 0 !important;
	border-radius: var(--fm-r-pill);
	background: rgba(10, 10, 10, 0.8) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--fm-border-soft);
	color: #fff !important;
	transition: background-color var(--fm-fast) var(--fm-ease), transform var(--fm-fast) var(--fm-ease);
}
.swiper-button-prev:hover,
.swiper-button-next:hover { background: var(--fm-accent) !important; color: var(--fm-on-accent) !important; transform: scale(1.08); }
.swiper-button-prev:after,
.swiper-button-next:after { font-size: 0.9rem !important; font-weight: 800; }

.swiper-scrollbar { background: var(--fm-surface-2) !important; border-radius: var(--fm-r-pill); height: 4px !important; }
.swiper-scrollbar-drag { background: var(--fm-accent) !important; border-radius: var(--fm-r-pill); }

.swiper-pagination-bullet { background: #fff !important; opacity: 0.28 !important; }
.swiper-pagination-bullet-active {
	opacity: 1 !important;
	width: 22px !important;
	border-radius: var(--fm-r-pill) !important;
	background: var(--fm-accent) !important;
}

/* Trending strip */
#trending { margin-bottom: var(--fm-section); }
#trending .head {
	justify-content: center;
	border-bottom: 0;
	margin-bottom: 1.5rem;
	padding-bottom: 0;
}
#trending .head h2 {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--fm-accent);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Ad / banner blocks */
.banner,
[class*="banner-"] {
	border-radius: var(--fm-r-lg);
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
	padding: 1rem;
	margin-bottom: var(--fm-gap-lg);
	text-align: center;
	overflow: hidden;
}
.banner img { border-radius: var(--fm-r); }

/* ==========================================================================
   7. TOOLBARS + FILTERS
   ========================================================================== */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	padding: 0.85rem;
	border-radius: var(--fm-r-lg);
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
	margin-bottom: var(--fm-gap-lg);
}

.filters .dropdown { position: relative; }

.filters .btn,
.filters .dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	border-radius: var(--fm-r) !important;
	background: var(--fm-surface-2) !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	color: var(--fm-text-2) !important;
	font-size: 0.68rem !important;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: all var(--fm-fast) var(--fm-ease);
}
.filters .btn:hover,
.filters .dropdown-toggle:hover,
.filters .show > .dropdown-toggle {
	background: var(--fm-surface-3) !important;
	border-color: var(--fm-border) !important;
	color: var(--fm-text) !important;
}

.filters .btn-primary,
.content-filters .btn-primary {
	background: var(--fm-accent) !important;
	border-color: var(--fm-accent) !important;
	color: var(--fm-on-accent) !important;
}
.filters .btn-primary:hover { filter: brightness(1.1); color: var(--fm-on-accent) !important; }

/* Dropdown panels */
.dropdown-menu {
	min-width: 190px;
	padding: 0.4rem !important;
	border-radius: var(--fm-r-lg) !important;
	background: var(--fm-surface-1) !important;
	border: 1px solid var(--fm-border) !important;
	box-shadow: var(--fm-float) !important;
	z-index: 1050;
}
.dropdown-menu.genres.c4 { columns: 2; column-gap: 0.25rem; }
@media (min-width: 768px) { .dropdown-menu.genres.c4 { columns: 3; min-width: 420px; } }

.dropdown-item {
	padding: 0.45rem 0.7rem !important;
	border-radius: var(--fm-r-sm) !important;
	color: var(--fm-text-2) !important;
	font-size: 0.8rem !important;
	transition: background-color var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
	background: var(--fm-accent-deep) !important;
	color: var(--fm-accent) !important;
}

/* ==========================================================================
   8. WATCH / PLAYER HERO
   ========================================================================== */
#player-wrapper {
	position: relative;
	padding: 0 !important;
	margin-bottom: var(--fm-gap-lg);
	overflow: hidden;
}

/* Backdrop image behind a heavy scrim, blended into the page background. */
#player-wrapper .player-bg {
	position: absolute;
	inset: 0;
	background-size: cover !important;
	background-position: center 20% !important;
	background-repeat: no-repeat;
	opacity: 0.4;
	filter: saturate(1.05);
	z-index: 0;
}
#player-wrapper .player-bg:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.86) 55%, var(--fm-bg) 100%);
}
#player-wrapper .player-bg:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 60% at 50% 30%, transparent 0%, rgba(5,5,5,0.7) 100%);
	z-index: 1;
}

#player-wrapper .container { position: relative; z-index: 2; padding-top: 1.5rem; padding-bottom: 1.5rem; }

.player-main {
	border-radius: var(--fm-r-lg);
	overflow: hidden;
	background: #000;
	border: 1px solid var(--fm-border);
}

#player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

#player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Big play button */
#player .btn-watchnow,
#play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.8) 100%);
	transition: opacity var(--fm-med) var(--fm-ease);
}
#player .btn-watchnow i,
#play i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: var(--fm-r-pill);
	background: var(--fm-accent);
	color: var(--fm-on-accent);
	font-size: 2.4rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
	transition: transform var(--fm-med) var(--fm-ease-out), box-shadow var(--fm-med) var(--fm-ease);
}
#player .btn-watchnow:hover i,
#play:hover i {
	transform: scale(1.07);
	box-shadow: 0 14px 52px rgba(0, 0, 0, 0.7);
}

#player-wrapper.playing .btn-watchnow,
#player-wrapper.playing #play { opacity: 0; pointer-events: none; }

/* Controls row under the player */
#controls { margin-top: 1rem; }
#controls .c-items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
#controls .item,
#controls .c-items > .item,
#controls .c-items > a,
#controls .c-items > span,
#controls .c-items > div {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem !important;
	border-radius: var(--fm-r-pill) !important;
	background: rgba(18, 18, 18, 0.82) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--fm-border-soft) !important;
	color: var(--fm-text-2) !important;
	font-size: 0.72rem !important;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: all var(--fm-fast) var(--fm-ease);
}
#controls .item:hover,
#controls .c-items > .item:hover,
#controls .c-items > a:hover {
	background: var(--fm-surface-3) !important;
	border-color: var(--fm-border) !important;
	color: var(--fm-text) !important;
}
#controls .item.active,
#controls .item.light.active {
	background: var(--fm-accent) !important;
	border-color: var(--fm-accent) !important;
	color: var(--fm-on-accent) !important;
}
#controls .item i { font-size: 0.85rem; }
#controls .item.views { cursor: default; opacity: 0.85; }

/* ==========================================================================
   9. SERVERS / SEASONS STRIP
   ========================================================================== */
#servers { margin: 0 0 var(--fm-gap-lg); }
#servers .sv-desc {
	color: var(--fm-text-3);
	font-size: 0.78rem;
	text-align: center;
	margin: 0 0 0.75rem;
}
#servers ul.servers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
#servers ul.servers li.server {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 1rem;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text-2);
	font-size: 0.74rem;
	font-weight: 700;
	cursor: pointer;
	transition: all var(--fm-fast) var(--fm-ease);
}
#servers ul.servers li.server:hover { background: var(--fm-surface-3); color: var(--fm-text); }
#servers ul.servers li.server.active {
	background: var(--fm-accent);
	border-color: var(--fm-accent);
	color: var(--fm-on-accent);
}
#servers ul.servers li.server i { font-size: 0.8rem; }

/* TV seasons dropdown */
#seasons { position: relative; display: inline-block; }
#seasons .dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text);
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
}
#seasons .dropdown-toggle:empty:before { content: "Select season"; color: var(--fm-text-3); }
#seasons .dropdown-toggle:hover { background: var(--fm-surface-3); border-color: var(--fm-accent); }

/* ==========================================================================
   10. SINGLE: INFO PANEL
   ========================================================================== */
#w-info {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--fm-gap-lg);
	align-items: start;
	padding: var(--fm-gap-lg);
	border-radius: var(--fm-r-lg);
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
}

#w-info .poster {
	border-radius: var(--fm-r);
	overflow: hidden;
	border: 1px solid var(--fm-border);
	background: var(--fm-surface-2);
}
#w-info .poster img { display: block; width: 100%; height: auto; }

#w-info .info { min-width: 0; }

#w-info h1.name,
#w-info .name {
	margin: 0 0 0.75rem;
	color: var(--fm-text);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

#w-info .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-bottom: 1rem;
}
#w-info .meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text-2);
	font-size: 0.7rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
#w-info .meta span.quality {
	background: var(--fm-accent-deep);
	border-color: transparent;
	color: var(--fm-accent);
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
#w-info .meta span.rating {
	background: transparent;
	border-color: var(--fm-border);
	color: var(--fm-text-3);
}
#w-info .meta span i { font-size: 0.7rem; color: var(--fm-accent); }

#w-info .description {
	color: var(--fm-text-2);
	font-size: 0.9rem;
	line-height: 1.7;
	margin-bottom: 1.25rem;
}
#w-info .description b.tagline { display: block; color: var(--fm-accent); font-weight: 700; margin-bottom: 0.4rem; }

/* Detail table */
#w-info .detail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.5rem 1.5rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--fm-border);
}
#w-info .detail > * {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	font-size: 0.82rem;
	color: var(--fm-text-2);
	padding: 0.2rem 0;
}
#w-info .detail b,
#w-info .detail span.searchby {
	flex: 0 0 auto;
	color: var(--fm-text-3);
	font-weight: 600;
	min-width: 74px;
}
#w-info .detail a { color: var(--fm-text); }
#w-info .detail a:hover { color: var(--fm-accent); }

/* Rating box */
#w-info .rating-box {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	float: right;
	margin: 0 0 0.75rem 1rem;
	padding: 0.6rem 0.9rem;
	border-radius: var(--fm-r);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
}
#w-info .rating-box .stars { color: var(--fm-accent); letter-spacing: 1px; }
#w-info .rating-box .score { font-size: 0.7rem; color: var(--fm-text-3); }
#w-info .rating-box .score b { color: var(--fm-accent); font-size: 0.95rem; }

@media (max-width: 860px) {
	#w-info { grid-template-columns: 1fr; padding: var(--fm-gap); }
	#w-info .poster { max-width: 220px; }
	#w-info .rating-box { float: none; margin: 0 0 0.75rem; width: fit-content; }
}

/* Watch page wrapper */
.watch-page { padding-top: var(--fm-gap-lg); }
.info-ep { margin-top: var(--fm-gap-lg); }

/* ==========================================================================
   11. TV: SEASONS / EPISODES PANEL
   ========================================================================== */
#episodes,
#folders {
	border-radius: var(--fm-r-lg);
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
	overflow: hidden;
}

#episodes .head,
#folders .head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--fm-border);
	background: var(--fm-surface-2);
}

#episodes .body > ul,
#folders .body > ul {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	max-height: 340px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#episodes .body > ul > li a,
#folders .body > ul > li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.55rem 0.75rem;
	border-radius: var(--fm-r);
	color: var(--fm-text-2);
	font-size: 0.8rem;
	transition: background-color var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}
#episodes .body > ul > li:nth-child(odd) a,
#folders .body > ul > li:nth-child(odd) a { background: var(--fm-surface-2); }
#episodes .body > ul > li a:hover,
#folders .body > ul > li a:hover,
#episodes .body > ul > li.active a,
#episodes .body > ul > li > a.active,
#folders .body > ul > li.active a,
#folders .body > ul > li > a.active {
	background: var(--fm-accent-deep) !important;
	color: var(--fm-accent) !important;
}

/*
 * The active row in the movie-files / episodes list: the original theme set the
 * row background to the brand colour and the label to near-black. The row is now
 * a dark surface, so the label has to be light  -  otherwise it measures 1.02:1.
 * Covers both the anchor itself and any span inside it.
 */
#episodes .body > ul > li.active a span,
#episodes .body > ul > li > a.active span,
#episodes .body > ul > li.active a,
#episodes .body > ul > li > a.active,
#folders .body > ul > li.active a span,
#folders .body > ul > li > a.active span,
#folders .body > ul > li.active a,
#folders .body > ul > li > a.active {
	color: #eafff9 !important;
	font-weight: 700;
}

/* The row buttons (the small "Download" controls) on a dark surface. */
#episodes .body > ul > li .btn,
#episodes .body > ul > li a.btn,
#folders .body > ul > li .btn {
	background: var(--fm-surface-3) !important;
	border: 1px solid var(--fm-border) !important;
	color: var(--fm-text-2) !important;
	border-radius: var(--fm-r-sm) !important;
	padding: 0.2rem 0.6rem !important;
	font-size: 0.68rem !important;
	font-weight: 700;
}
#episodes .body > ul > li .btn:hover,
#episodes .body > ul > li a.btn:hover,
#folders .body > ul > li .btn:hover {
	background: var(--fm-accent) !important;
	border-color: var(--fm-accent) !important;
	color: var(--fm-on-accent) !important;
}

#episodes .foot,
#folders .foot {
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--fm-border);
	background: var(--fm-surface-2);
	color: var(--fm-text-3);
	font-size: 0.72rem;
}

/* Thin scrollbar inside panels */
#episodes .body > ul::-webkit-scrollbar,
#folders .body > ul::-webkit-scrollbar { width: 6px; }
#episodes .body > ul::-webkit-scrollbar-thumb,
#folders .body > ul::-webkit-scrollbar-thumb { background: var(--fm-accent-deep); border-radius: var(--fm-r-pill); }

/* ==========================================================================
   12. SIDEBAR + LIST WIDGETS
   ========================================================================== */
.sidebar section,
.sidebar .widget {
	border-radius: var(--fm-r-lg);
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
	padding: 1rem;
	margin-bottom: var(--fm-gap);
}

.sidebar .head {
	margin-bottom: 0.85rem;
	padding-bottom: 0.6rem;
}

.sidebar .head .title,
.sidebar .widget-title {
	font-size: 0.78rem !important;
	color: var(--fm-text) !important;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin: 0 !important;
}

/* Compact list rows (Recently updated, Top 10, etc.) */
.scaff.items,
.top9.items,
.head-popup.items {
	display: flex !important;
	flex-direction: column;
	gap: 4px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.scaff.items .item,
.top9.items .item,
.head-popup.items .item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem;
	margin: 0 !important;
	border-radius: var(--fm-r);
	background: transparent;
	border: 1px solid transparent;
	transition: background-color var(--fm-fast) var(--fm-ease), border-color var(--fm-fast) var(--fm-ease);
}
.scaff.items .item:hover,
.top9.items .item:hover,
.head-popup.items .item:hover {
	background: var(--fm-surface-2);
	border-color: var(--fm-border);
}

.scaff.items .item .poster,
.top9.items .item .poster,
.head-popup.items .item .poster {
	position: relative;
	flex: 0 0 auto;
	width: 46px !important;
	height: 66px;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--fm-r-sm) !important;
	overflow: hidden;
	border: 1px solid var(--fm-border) !important;
	background: var(--fm-surface-2);
}
.scaff.items .item .poster img,
.top9.items .item .poster img,
.head-popup.items .item .poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scaff.items .item .meta,
.top9.items .item .meta,
.head-popup.items .item .meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
	margin: 0 !important;
}
.scaff.items .item .meta > a,
.top9.items .item .meta > a,
.head-popup.items .item .meta > a {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--fm-text);
	font-size: 0.8rem;
	font-weight: 600;
}
.scaff.items .item:hover .meta > a,
.top9.items .item:hover .meta > a,
.head-popup.items .item:hover .meta > a { color: var(--fm-accent); }

.scaff.items .item .meta > div,
.top9.items .item .meta > div,
.head-popup.items .item .meta > div {
	display: flex;
	gap: 0.35rem;
	align-items: center;
	font-size: 0.68rem;
	color: var(--fm-text-3);
	font-variant-numeric: tabular-nums;
}
.scaff.items .item .meta > div > span.type,
.top9.items .item .meta > div > span.type {
	display: none;
}

/* Widgets (WP core widgets in the sidebar) */
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--fm-border-soft);
	font-size: 0.82rem;
}
.widget ul li:last-child { border-bottom: 0; }
.widget ul li a { color: var(--fm-text-2); }
.widget ul li a:hover { color: var(--fm-accent); }
.widget select,
.widget input[type="text"],
.widget input[type="search"] {
	width: 100%;
	padding: 0.5rem 0.7rem;
	border-radius: var(--fm-r);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text);
	font-size: 0.82rem;
}

/* ==========================================================================
   13. COMMENTS + FORMS
   ========================================================================== */
.comments-area,
#comments {
	margin-top: var(--fm-gap-lg);
	padding: var(--fm-gap-lg);
	border-radius: var(--fm-r-lg);
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
}

.comments-title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem !important;
	color: var(--fm-text) !important;
	font-size: 1rem !important;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.title-line { display: block; height: 1px; background: var(--fm-border); margin-bottom: 1.25rem; }

.comment-list { list-style: none; margin: 0; padding: 0; }

.comment-wrap,
.comment-body {
	padding: 1rem 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--fm-border-soft) !important;
}

.comment-img { float: left; margin: 0 0.85rem 0 0 !important; }
.comment-img img {
	width: 44px !important;
	height: 44px !important;
	border-radius: var(--fm-r-pill) !important;
	border: 1px solid var(--fm-border);
	object-fit: cover;
}

.comment-author,
.comment-author a {
	margin: 0 !important;
	color: var(--fm-text) !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	text-align: left !important;
}
.comment-date {
	display: block;
	color: var(--fm-text-3) !important;
	font-size: 0.7rem !important;
	font-weight: 400 !important;
	margin-bottom: 0.4rem;
}
.comment-body p { color: var(--fm-text-2); font-size: 0.85rem; margin: 0 0 0.5rem; }
.comment-reply a,
.comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.65rem;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text-3);
	font-size: 0.7rem;
	font-weight: 700;
}
.comment-reply a:hover { background: var(--fm-accent-deep); border-color: transparent; color: var(--fm-accent); }

.comment-respond,
#respond {
	margin-top: var(--fm-gap-lg);
	padding: var(--fm-gap-lg);
	border-radius: var(--fm-r-lg);
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
}
.comment-reply-title {
	margin: 0 0 1rem !important;
	color: var(--fm-text) !important;
	font-size: 1rem !important;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border-radius: var(--fm-r);
	background: var(--fm-surface-2) !important;
	border: 1px solid var(--fm-border) !important;
	color: var(--fm-text) !important;
	font-family: var(--fm-font);
	font-size: 0.85rem;
	line-height: 1.5;
	transition: border-color var(--fm-med) var(--fm-ease), box-shadow var(--fm-med) var(--fm-ease);
	appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--fm-text-3); }

input:focus,
select:focus,
textarea:focus {
	border-color: var(--fm-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fm-accent) 22%, transparent) !important;
	outline: none !important;
}

textarea { min-height: 140px; resize: vertical; }
select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c848f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 16px;
	padding-right: 2.2rem;
}

label { display: block; margin-bottom: 0.35rem; color: var(--fm-text-2); font-size: 0.78rem; font-weight: 600; }
.form-group, .comment-form p { margin-bottom: 1rem; }
.comment-form-author, .comment-form-email { display: inline-block; width: 49.5%; vertical-align: top; }
@media (max-width: 600px) { .comment-form-author, .comment-form-email { width: 100%; } }

/* Checkbox / radio */
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--fm-accent); }
.form-check-label { color: var(--fm-text-2); font-size: 0.82rem; }

/* ==========================================================================
   14. BUTTONS
   ========================================================================== */
.btn,
.button,
button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 1.1rem;
	border-radius: var(--fm-r);
	border: 1px solid transparent;
	font-family: var(--fm-font);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--fm-fast) var(--fm-ease),
	            border-color var(--fm-fast) var(--fm-ease),
	            color var(--fm-fast) var(--fm-ease),
	            filter var(--fm-fast) var(--fm-ease);
}

/* Primary: solid accent with dark text, as in the reference */
.btn-primary,
.button-primary,
input[type="submit"],
button[type="submit"] {
	background: var(--fm-accent) !important;
	background-image: none !important;
	border-color: var(--fm-accent) !important;
	color: var(--fm-on-accent) !important;
	box-shadow: none !important;
}
.btn-primary:hover,
.button-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	filter: brightness(1.1);
	color: var(--fm-on-accent) !important;
	transform: none;
}

.btn-secondary,
.button-secondary {
	background: var(--fm-surface-2) !important;
	background-image: none !important;
	border-color: var(--fm-border) !important;
	color: var(--fm-text-2) !important;
}
.btn-secondary:hover { background: var(--fm-surface-3) !important; color: var(--fm-text) !important; }

.btn-link {
	background: none !important;
	border: 0;
	color: var(--fm-accent) !important;
	padding: 0.3rem 0.2rem;
}
.btn-link:hover { text-decoration: underline; }

.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.72rem; }
.btn-lg { padding: 0.8rem 1.6rem; font-size: 0.9rem; }
.w-100 { width: 100%; }

/* ==========================================================================
   15. PAGINATION
   ========================================================================== */
.navigation,
.pagination-wrap { margin-top: var(--fm-gap-lg); display: flex; justify-content: center; }

ul.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.pagination .page-item { list-style: none; }

.pagination .page-link,
.navigation .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.7rem;
	border-radius: var(--fm-r) !important;
	background: var(--fm-surface-2) !important;
	border: 1px solid transparent !important;
	color: var(--fm-text-2) !important;
	font-size: 0.75rem !important;
	font-weight: 800;
	letter-spacing: 0.04em;
	margin: 0 !important;
	transition: all var(--fm-fast) var(--fm-ease);
}
.pagination .page-link:hover,
.navigation .page-link:hover {
	background: var(--fm-surface-3) !important;
	border-color: var(--fm-border) !important;
	color: var(--fm-text) !important;
}
.pagination .page-item.active .page-link,
.navigation .page-item.active .page-link {
	background: var(--fm-accent) !important;
	border-color: var(--fm-accent) !important;
	color: var(--fm-on-accent) !important;
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
footer,
#colophon {
	margin-top: 4rem;
	padding: 3rem 0 2rem !important;
	background: var(--fm-surface-1) !important;
	background-image: none !important;
	border-top: 1px solid var(--fm-border);
	color: var(--fm-text-2);
}

footer .container > .wrapper,
footer .wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-gap-lg);
	justify-content: space-between;
}

footer .start, footer .end { min-width: 0; }
footer .title,
footer h3, footer h4 {
	color: var(--fm-text) !important;
	font-size: 0.78rem !important;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-bottom: 0.85rem;
}

footer a { color: var(--fm-text-2) !important; font-size: 0.82rem; }
footer a:hover { color: var(--fm-accent) !important; }

footer ul { list-style: none; margin: 0; padding: 0; }
footer ul li { padding: 0.25rem 0; }

footer .logo_txt,
footer .logo_txt a,
footer .logo_txt span {
	color: var(--fm-text) !important;
	background: none !important;
	text-transform: none !important;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	padding: 0 !important;
}

footer .social,
footer .social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text-2) !important;
	transition: all var(--fm-fast) var(--fm-ease);
}
footer .social a:hover { background: var(--fm-accent); border-color: var(--fm-accent); color: var(--fm-on-accent) !important; }

footer .copy,
footer .copyright {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fm-border);
	color: var(--fm-text-3) !important;
	font-size: 0.75rem;
	text-align: center;
}

/* ==========================================================================
   17. SEARCH PAGE / ARCHIVE TITLE / 404 / MISC PAGES
   ========================================================================== */
/* Search + archive result counts */
.result_page,
.total,
.sv-desc {
	color: var(--fm-text-3) !important;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

/* Home / front-page hero */
.i-wrapper {
	max-width: 720px;
	margin: 0 auto;
	padding: 2rem 0 1rem;
	text-align: center;
}
.i-head { margin-bottom: 1.5rem; }

.i-head .logo,
h1.logo {
	display: inline-block !important;
	margin: 0 0 1rem !important;
	text-align: center !important;
}
.i-head .logo a {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.2rem !important;
	height: auto !important;
	border-radius: var(--fm-r-lg) !important;
	background: var(--fm-surface-1) !important;
	border: 1px solid var(--fm-border) !important;
	color: var(--fm-text) !important;
	font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.035em !important;
	line-height: 1.1 !important;
	text-transform: none !important;
}
.i-head .logo a:hover { color: var(--fm-accent) !important; }
.i-head .logo a:before { content: none !important; }

.i-head .slogan,
.i-head h2.slogan {
	margin: 0 !important;
	color: var(--fm-text-2) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}
.i-head h2.slogan { text-transform: none; }

.i-article { max-width: 760px; margin: 2rem auto 0; text-align: left; }
.i-article h3,
.i-article .heading {
	margin-bottom: 1rem;
	color: var(--fm-text) !important;
	font-size: 1.15rem !important;
	font-weight: 800;
}
.i-article p { color: var(--fm-text-2); font-size: 0.9rem; line-height: 1.75; }

/* 404 */
.error-404,
.page-404,
section.error-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 4rem 1rem;
	min-height: 50vh;
}
.error-404 img, section.error-404 img { max-width: 340px; margin-bottom: 1.5rem; opacity: 0.9; }
.error-404 h1, section.error-404 h1,
.error-404 .title, section.error-404 .title {
	color: var(--fm-accent) !important;
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
	font-weight: 800;
	margin-bottom: 0.75rem;
}
.error-404 p { color: var(--fm-text-3); max-width: 46ch; }

/* FAQ accordions */
.accordion .card,
.accordion .collapse,
.faq .card {
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-r-lg) !important;
	margin-bottom: 0.6rem;
	overflow: hidden;
}
.accordion .card-header,
.faq .card-header {
	background: var(--fm-surface-2);
	border-bottom: 1px solid var(--fm-border);
	padding: 0;
}
.accordion .btn-link,
.faq .btn-link {
	display: block;
	width: 100%;
	padding: 0.9rem 1.1rem;
	color: var(--fm-text) !important;
	font-size: 0.88rem;
	font-weight: 700;
	text-align: left;
	text-decoration: none !important;
}
.accordion .card-body,
.faq .card-body { padding: 1.1rem; color: var(--fm-text-2); font-size: 0.86rem; }

/* ==========================================================================
   18. UTILITIES, FOCUS, MOTION, FALLBACKS
   ========================================================================== */

/* Focus: visible for keyboards, invisible for mice. */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--fm-accent);
	outline-offset: 2px;
	border-radius: var(--fm-r-sm);
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #0f766e transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #0f766e; border-radius: var(--fm-r-pill); }
::-webkit-scrollbar-thumb:hover { background-color: var(--fm-accent); }

/* Tooltip preview card */
.tooltipster-base .tooltipster-box {
	background: var(--fm-surface-1) !important;
	border: 1px solid var(--fm-border) !important;
	border-radius: var(--fm-r-lg) !important;
	box-shadow: var(--fm-float) !important;
}
.tooltipster-base .tooltipster-content { padding: 0 !important; color: var(--fm-text-2); font-size: 0.82rem; line-height: 1.6; }
.tooltip_templates .info { padding: 0.9rem 1rem; }
.tooltip_templates .info .name { color: var(--fm-text); font-size: 1rem; font-weight: 800; }
.tooltip_templates .info a { color: var(--fm-text); font-weight: 700; }
.tooltip_templates .info .vote,
.tooltip_templates .info .rating { color: var(--fm-accent); font-weight: 700; }
.tooltip_templates .info .quality {
	display: inline-block;
	padding: 1px 7px;
	border-radius: var(--fm-r-sm);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Modals */
.modal-content {
	background: var(--fm-surface-1) !important;
	border: 1px solid var(--fm-border) !important;
	border-radius: var(--fm-r-lg) !important;
	box-shadow: var(--fm-float) !important;
	color: var(--fm-text-2);
}
.modal-header, .modal-footer { border-color: var(--fm-border) !important; }
.modal-title { color: var(--fm-text); font-weight: 800; }
.modal-backdrop.show { opacity: 0.75; background: #000; }

/* Overlay used by the player */
#overlay { background: rgba(5, 5, 5, 0.9); }

/* Misc small text contrast (all verified ≥ 4.5:1) */
.text-muted { color: var(--fm-text-2) !important; }
small, .small { color: var(--fm-text-3); }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.movies.items .item:hover .poster,
	.movies.items .item:hover .poster a img { transform: none; }
}

/* Fallbacks for engines without color-mix() */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(0, 240, 181, 0.25) !important; }
	.movies.items .item:hover .poster { border-color: var(--fm-accent) !important; }
	.swiper-pagination-bullet-active { background: var(--fm-accent) !important; }
}


/* ==========================================================================
   19. SEARCH OVERLAY + DISCLOSURE MENU  (markup added by fmovie-ui.js)
   ==========================================================================
   The header search collapses to an icon; opening it reveals this overlay. It is
   a real dialog: focus moves to the field on open, Escape closes it, and the
   closed state is aria-hidden so it stays out of the accessibility tree.
   ========================================================================== */

.search-box--icon { display: flex; align-items: center; }

/* Icon buttons: menu toggler, search toggler. */
.fm-icon-btn,
.search-toggler {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--fm-r) !important;
	background: var(--fm-surface-2) !important;
	border: 1px solid var(--fm-border) !important;
	color: var(--fm-text-2) !important;
	cursor: pointer;
	transition: background-color var(--fm-fast) var(--fm-ease),
	            border-color var(--fm-fast) var(--fm-ease),
	            color var(--fm-fast) var(--fm-ease);
}
.fm-icon-btn:hover,
.search-toggler:hover {
	background: var(--fm-surface-3) !important;
	border-color: var(--fm-accent) !important;
	color: var(--fm-accent) !important;
}
.fm-icon-btn i, .search-toggler i { font-size: 1.15rem; line-height: 1; }

/*
 * Background scroll.
 *
 * BUG FIXED: `html.fm-menu-open { overflow: hidden }` made the page jump.
 *
 * Setting overflow:hidden on the root removes the document's scrollable height, so
 * the browser clamps the scroll position to 0. Measured on a 390x844 phone after
 * scrolling to 1200px: opening the menu sent scrollY 1200 -> 0 and the whole page
 * snapped to the top. That is the "header drops down / page shifts" that was
 * reported — the header itself never moved, the page under it did.
 *
 * Locking the scroll is not needed here anyway. The drawer is a dropdown anchored
 * to a sticky header, not a full-screen surface: the toggle stays on screen while
 * it is open, so it can always be closed, and it closes on Escape and on an
 * outside click too. Removing the lock removes the jump entirely.
 *
 * Scrolling inside the drawer is contained by the drawer itself (see #menu > ul),
 * so reaching its end does not start scrolling the page behind it.
 *
 * The search overlay is genuinely full-screen, so it keeps a locked page — but it
 * is excluded from the buggy rule as well, because the same clamping would drag
 * the page to the top behind it. It scrolls its own content instead.
 */

/* The drawer is a dropdown: the page scrolls normally behind it. */
#menu > ul {
	overscroll-behavior: contain;
}

/* Behind the full-screen search overlay, the page is held still with a
   position-based lock applied by fmovie-ui.js, which keeps the scroll offset
   instead of resetting it. */
html.fm-search-locked body {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow-y: scroll;
}

/* -- overlay ------------------------------------------------------------- */
.fm-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1090;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 20px 20px;
	background: rgba(5, 5, 5, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--fm-med) var(--fm-ease), visibility var(--fm-med);
}
.fm-search-overlay.fm-search-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.fm-search-panel {
	position: relative;
	width: 100%;
	max-width: 680px;
	transform: translateY(-12px);
	transition: transform var(--fm-med) var(--fm-ease-out);
}
.fm-search-overlay.fm-search-open .fm-search-panel { transform: translateY(0); }

.fm-search-panel form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 8px 8px 8px 18px;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
	box-shadow: var(--fm-float);
}
.fm-search-panel form:focus-within {
	border-color: var(--fm-accent);
	box-shadow: var(--fm-float), 0 0 0 3px color-mix(in srgb, var(--fm-accent) 22%, transparent);
}
.fm-search-panel input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--fm-text) !important;
	font-size: 1rem !important;
	text-align: left;
}
.fm-search-panel input::placeholder { color: var(--fm-text-3); }
.fm-search-panel button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--fm-r-pill) !important;
	background: var(--fm-accent) !important;
	color: var(--fm-on-accent) !important;
	cursor: pointer;
}
.fm-search-panel button[type="submit"]:hover { filter: brightness(1.1); }

/*
 * The close control is a sibling of the form, so it participates in the panel's
 * normal flow instead of being absolutely positioned over the results list. The
 * previous absolute placement sat exactly where the suggestions render, hiding
 * them behind the button.
 */
.fm-search-panel { display: flex; flex-direction: column; gap: 10px; }

.fm-search-close {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text-2);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	order: 3;
	transition: background-color var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}
.fm-search-close:hover { background: var(--fm-surface-3); color: var(--fm-text); }

/*
 * Label the close control with a word, not just "ESC".
 *
 * The button is the only way out of the overlay on a touch device — there is no
 * keyboard — so labelling it with a keyboard key told phone users nothing. It now
 * reads "Close" everywhere, and adds the key hint only where a keyboard exists.
 */
.fm-search-close::after { content: "Close"; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
	.fm-search-close::after { content: "Close · ESC"; }
}

/* Suggestions flow directly under the field. */
.fm-search-panel .suggestions {
	position: static;
	order: 2;
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-r-lg);
	box-shadow: var(--fm-float);
	max-height: 46vh;
	overflow-y: auto;
}
.fm-search-panel .suggestions:empty { display: none; }

/* -- disclosure menu ----------------------------------------------------- */
.fm-submenu-toggle {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 0.6rem 0.75rem !important;
	border: 0 !important;
	border-radius: var(--fm-r) !important;
	background: none !important;
	color: var(--fm-text-2) !important;
	font-size: 0.85rem !important;
	font-weight: 600;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}
.fm-submenu-toggle:hover { background: var(--fm-surface-2) !important; color: var(--fm-accent) !important; }
.fm-submenu-toggle i { font-size: 0.7rem; transition: transform var(--fm-med) var(--fm-ease); }
.fm-submenu-toggle[aria-expanded="true"] { color: var(--fm-accent) !important; }
.fm-submenu-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

#menu .fm-submenu { list-style: none; margin: 0.25rem 0 0.4rem !important; padding: 0 0 0 0.5rem !important; border-left: 1px solid var(--fm-border); }
#menu .fm-submenu a {
	display: block;
	padding: 0.35rem 0.6rem !important;
	border-radius: var(--fm-r-sm);
	font-size: 0.8rem !important;
	color: var(--fm-text-3) !important;
}
#menu .fm-submenu a:hover { background: var(--fm-accent-deep) !important; color: var(--fm-accent) !important; }

/* The two mega-menus hold long lists; cap them and scroll. */
#menu-genre, #menu-country { max-height: 46vh; overflow-y: auto; }

/* Menu rows in the drawer. */
#menu > ul > li > a {
	display: block;
	padding: 0.6rem 0.75rem !important;
	border-radius: var(--fm-r);
	color: var(--fm-text-2) !important;
	font-size: 0.85rem !important;
	font-weight: 600;
}
#menu > ul > li > a:hover { background: var(--fm-surface-2) !important; color: var(--fm-accent) !important; }
/* ==========================================================================
   20. [hidden] — AUTHORITATIVE
   ==========================================================================
   Declared LAST, with high specificity, because several rules in this file set
   display with !important (the icon buttons, the search wrap, the menu). A plain
   [hidden] rule earlier in the cascade is silently overridden by them, which is
   exactly how the theme's original search toggle ended up doing nothing when
   clicked: the element it was meant to hide was never actually hidden.
   ========================================================================== */
[hidden],
[hidden].fm-icon-btn,
[hidden].search-toggler,
[hidden].search-wrap,
[hidden]#menu {
	display: none !important;
}
/* ==========================================================================
   21. MENU DRAWER — hierarchy + polish
   ==========================================================================
   The drawer mixes three kinds of row: a top-level page link, a disclosure button,
   and the links inside a disclosure panel. Without a visible difference the eye
   cannot tell a heading from a destination, and the genre panel's items looked
   like siblings of "Movies" and "TV Series". These rules separate the three.
   ========================================================================== */

/*
 * These selectors deliberately mirror the base theme's own
 * `header .wrapper .start #menu ...` prefix. The theme sets its menu rules at
 * that specificity, so a bare `#menu > ul > li > a` loses and the row inherits
 * the theme's centred layout — which is why "Home" appeared centred while
 * everything beneath it was left-aligned.
 */
header .wrapper .start #menu {
	min-width: 300px;
	max-width: min(94vw, 440px);
	left: 0;
	text-align: left !important;
}

header .wrapper .start #menu > ul {
	padding: 0.6rem !important;
	max-height: min(78vh, 720px);
	overflow-y: auto;
	overscroll-behavior: contain;
	text-align: left !important;
}

header .wrapper .start #menu > ul > li { text-align: left !important; }

/* Top-level destinations: the brightest rows in the drawer. */
header .wrapper .start #menu > ul > li > a {
	display: block !important;
	width: 100%;
	text-align: left !important;
	padding: 0.6rem 0.75rem !important;
	margin: 1px 0 !important;
	color: var(--fm-text) !important;
	font-size: 0.86rem !important;
	font-weight: 650 !important;
	letter-spacing: -0.005em;
}
header .wrapper .start #menu > ul > li > a:before { content: none !important; }

/* Disclosure buttons: a section control, not a destination. */
header .wrapper .start #menu .fm-submenu-toggle {
	display: flex !important;
	width: 100%;
	margin: 1px 0 !important;
	text-align: left !important;
	color: var(--fm-text-2) !important;
}

/* Panel links: smallest and dimmest, indented under their section. */
header .wrapper .start #menu .fm-submenu {
	margin: 2px 0 8px !important;
	padding: 2px 0 2px 0.65rem !important;
	text-align: left !important;
}

header .wrapper .start #menu .fm-submenu a {
	display: block;
	padding: 0.4rem 0.6rem !important;
	font-size: 0.79rem !important;
	line-height: 1.35;
	text-align: left !important;
	color: var(--fm-text-3) !important;
	white-space: normal;
}

/*
 * The genre list is long, so it is split into two columns. `columns` does not
 * work inside a flex/scroll container reliably, so the panel keeps its natural
 * block layout and only the list itself is columnised.
 */
header .wrapper .start #menu #menu-genre {
	columns: 2;
	column-gap: 0.75rem;
	max-height: 40vh;
	overflow-y: auto;
}
header .wrapper .start #menu #menu-genre li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

/* Country names can be long; keep each on one line. */
header .wrapper .start #menu #menu-country a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Scrollbars inside the drawer. */
header .wrapper .start #menu > ul::-webkit-scrollbar,
header .wrapper .start #menu .fm-submenu::-webkit-scrollbar { width: 6px; }
header .wrapper .start #menu > ul::-webkit-scrollbar-thumb,
header .wrapper .start #menu .fm-submenu::-webkit-scrollbar-thumb { background: #0f766e; border-radius: var(--fm-r-pill); }

/* Narrow screens: single column, full width. */
@media (max-width: 560px) {
	header .wrapper .start #menu { min-width: 0; width: min(94vw, 340px); }
	#menu-genre { columns: 1; }
}

/* ==========================================================================
   22. NO-SIDEBAR LAYOUT
   ==========================================================================
   "Recently Updated" now renders only on movie/TV pages. On listing pages the
   sidebar is skipped, so the reserved 320px column has to be given back to the
   grid rather than left as an empty gutter.
   ========================================================================== */
.aside-wrapper.no-sidebar > .main,
.aside-wrapper.no-sidebar > aside.main {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
}

/* With the full width available, the card grid can run denser. */
.aside-wrapper.no-sidebar .movies.items,
.aside-wrapper.no-sidebar .filmlist {
	--fm-card: 152px;
}

@media (min-width: 1500px) {
	.aside-wrapper.no-sidebar .movies.items,
	.aside-wrapper.no-sidebar .filmlist {
		--fm-card: 168px;
	}
}

/* ==========================================================================
   23. RECENTLY UPDATED CARDS
   ==========================================================================
   Previously a flex row with a 46px poster and a bare text name, which read as a
   list of links. Now a real card: poster with a rating badge and a Movie/TV chip,
   a two-line clamped title, and a compact meta row.
   ========================================================================== */
.fm-ru-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fm-ru-card {
	display: flex;
	align-items: stretch;
	gap: 0.7rem;
	padding: 0.5rem;
	border-radius: var(--fm-r);
	background: transparent;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color var(--fm-fast) var(--fm-ease),
	            border-color var(--fm-fast) var(--fm-ease),
	            transform var(--fm-fast) var(--fm-ease);
}

.fm-ru-card:hover,
.fm-ru-card:focus-visible {
	background: var(--fm-surface-2);
	border-color: var(--fm-border);
	transform: translateX(2px);
}

/* Poster */
.fm-ru-poster {
	position: relative;
	flex: 0 0 auto;
	width: 56px;
	align-self: flex-start;
	aspect-ratio: 2 / 3;
	border-radius: var(--fm-r-sm);
	overflow: hidden;
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
}

.fm-ru-poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--fm-slow) var(--fm-ease-out);
}

.fm-ru-card:hover .fm-ru-poster img { transform: scale(1.06); }

/* Rating badge on the poster */
.fm-ru-rating {
	position: absolute;
	right: 3px;
	bottom: 3px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 1px 4px;
	border-radius: 3px;
	background: rgba(10, 10, 10, 0.9);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--fm-accent);
	font-size: 0.56rem;
	font-weight: 800;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.fm-ru-rating i { font-size: 0.48rem; }

/* Movie / TV chip on the poster */
.fm-ru-type {
	position: absolute;
	left: 3px;
	top: 3px;
	z-index: 2;
	padding: 1px 4px;
	border-radius: 3px;
	background: rgba(10, 10, 10, 0.86);
	color: #fff;
	font-size: 0.5rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.5;
}

/* Body */
.fm-ru-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}

.fm-ru-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--fm-text);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	transition: color var(--fm-fast) var(--fm-ease);
}

.fm-ru-card:hover .fm-ru-title { color: var(--fm-accent); }

.fm-ru-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	color: var(--fm-text-3);
	font-size: 0.68rem;
	font-variant-numeric: tabular-nums;
}

/* The sidebar panel that holds the list */
.fm-recently-updated .head { margin-bottom: 0.75rem; padding-bottom: 0.6rem; }
.fm-recently-updated .head .title { font-size: 0.78rem !important; letter-spacing: 0.08em; }

/* ==========================================================================
   24. FOOTER
   ========================================================================== */
.site-footer { margin-top: 4rem; }

.fm-footer-top {
	display: grid;
	grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, 1fr));
	gap: 2rem 1.5rem;
	padding-bottom: 2.25rem;
}

@media (max-width: 900px) {
	.fm-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
	.fm-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
	.fm-footer-top { grid-template-columns: 1fr; }
}

.fm-footer-brand .logo img { max-height: 44px; width: auto; }
.fm-footer-brand .logo_txt { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.fm-footer-brand .logo_txt a { color: var(--fm-text) !important; }
.fm-footer-brand .logo_txt a:hover { color: var(--fm-accent) !important; }

.fm-footer-tagline {
	margin: 0.6rem 0 0;
	color: var(--fm-text-3);
	font-size: 0.82rem;
	line-height: 1.6;
	max-width: 38ch;
}

.fm-footer-widgets { margin-top: 1rem; }
.fm-footer-widgets .widget { margin-bottom: 0.75rem; }
.fm-footer-widgets .widget-title {
	color: var(--fm-text) !important;
	font-size: 0.72rem !important;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.fm-footer-heading {
	margin: 0 0 0.85rem !important;
	color: var(--fm-text) !important;
	font-size: 0.72rem !important;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fm-footer-col ul { list-style: none; margin: 0; padding: 0; }
.fm-footer-col li { padding: 0.22rem 0; }
.fm-footer-col a {
	display: inline-block;
	color: var(--fm-text-2) !important;
	font-size: 0.83rem;
	transition: color var(--fm-fast) var(--fm-ease), transform var(--fm-fast) var(--fm-ease);
}
.fm-footer-col a:hover { color: var(--fm-accent) !important; transform: translateX(3px); }

.fm-footer-social { display: flex; gap: 0.4rem; margin-top: 1rem; flex-wrap: wrap; }
.fm-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--fm-r-pill);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text-2) !important;
	transform: none !important;
}
.fm-footer-social a:hover {
	background: var(--fm-accent);
	border-color: var(--fm-accent);
	color: var(--fm-on-accent) !important;
}

.fm-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fm-border);
}

.fm-footer-disclaimer,
.fm-footer-copyright {
	margin: 0;
	color: var(--fm-text-3);
	font-size: 0.74rem;
	line-height: 1.6;
}

.fm-footer-disclaimer { flex: 1 1 340px; }
.fm-footer-copyright { flex: 0 0 auto; }

/* ==========================================================================
   25. ADVERT SLOTS
   ========================================================================== */
.fm-ad {
	margin: 1.5rem 0;
	text-align: center;
	overflow: hidden;
}
.fm-ad img,
.fm-ad iframe { max-width: 100%; }
.fm-ad ins { display: block; }

.fm-ad--fallback {
	border-radius: var(--fm-r-lg);
	border: 1px dashed var(--fm-border);
	background: var(--fm-surface-1);
}
.fm-ad--fallback a,
.fm-ad--fallback > span {
	display: block;
	padding: 1.5rem 1rem;
	color: var(--fm-text-3);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.fm-ad--fallback a:hover { color: var(--fm-accent); background: var(--fm-surface-2); }

.site-footer .fm-ad { margin: 0 0 1.5rem; }

/* ==========================================================================
   26. MOBILE HEADER — search icon
   ==========================================================================
   On a phone the header only showed the menu button and the logo; the search
   control was hidden by the old stylesheet, so a mobile visitor had no way to
   search from the header at all. The icon is now kept on every page and the
   inline field collapses into it below 900px.
   ========================================================================== */
@media (max-width: 900px) {
	#masthead .container > .wrapper {
		gap: 0.5rem;
		min-height: 58px;
	}

	#masthead .wrapper .start,
	#masthead .wrapper .end { gap: 0.5rem; }

	/*
	 * BUG FIXED: there were TWO search buttons on a phone.
	 *
	 * This block used to force the header form's own toggler visible, while the
	 * dedicated mobile button (.fm-search-mobile) was also being shown — so a
	 * mobile visitor saw two search icons side by side.
	 *
	 * The header form's toggler is now hidden here and the dedicated button is the
	 * only one. That is the correct split: the dedicated button is always present
	 * and does not depend on the inline form existing.
	 */
	#masthead .step .search-toggler,
	#masthead .step .search-wrap {
		display: none !important;
	}

	#masthead .site-title { font-size: 1rem !important; }

	header .wrapper .end a { padding: 0.4rem 0.6rem; font-size: 0.72rem; }
	header .wrapper .end a span { display: none; }
}

@media (max-width: 420px) {
	#masthead .site-title { font-size: 0.92rem !important; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* ==========================================================================
   27. MOBILE SEARCH BUTTON
   ==========================================================================
   Visible only where the inline field is hidden. The header's own toggler is
   hidden together with the field it controls, so this separate button is what
   keeps search reachable on a phone.
   ========================================================================== */
.fm-search-mobile { display: none !important; }

@media (max-width: 900px) {
	.fm-search-mobile { display: inline-flex !important; }
}

/* Above the breakpoint the inline field is present, so the extra button would be
   a duplicate control in the tab order. */
@media (min-width: 901px) {
	.fm-search-mobile { display: none !important; }
}

/* ==========================================================================
   28. DESKTOP HEADER — search fills the spare space
   ==========================================================================
   The header is a flex row: menu + brand on the left, search in the middle, the
   account chip on the right. The brand is fixed width and the chip is small, so
   the row left a large empty gap between the brand and the search box.
   Letting the search grow absorbs that gap, which pushes it toward the right edge
   and makes the bar look intentional at any width.
   ========================================================================== */
@media (min-width: 901px) {
	/*
	 * NOTE: no `margin-left: auto` here.
	 *
	 * The first version of this rule added `margin-left: auto` to .step, which
	 * reserved all the free space for the margin — so flex-grow had nothing left
	 * to distribute and the search stayed at a fixed 550px in the middle of the
	 * bar with a large gap before it. The margin and flex-grow were fighting, and
	 * the margin won. Removing it lets the search genuinely grow into the space.
	 */
	/*
	 * max-width is overridden deliberately.
	 *
	 * style.css sets `header .wrapper .step { max-width: 550px }`, which capped the
	 * search however much the flex row grew — so it stayed 550px wide in the
	 * middle of the bar no matter what flex-grow was set to. That cap is what
	 * created the empty gap; it has to be lifted for the space to be used.
	 */
	#masthead .wrapper .step,
	header .wrapper .step {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none !important;
		display: flex;
		justify-content: flex-end;
	}

	#masthead .step .search-box { width: 100%; display: flex; justify-content: flex-end; }

	#masthead .step .search-wrap {
		flex: 1 1 auto;
		max-width: 760px;
		margin: 0 0 0 auto;
	}

	/* Pin the account chip to the far right and stop it shrinking. */
	#masthead .wrapper .end {
		flex: 0 0 auto;
		margin-left: 0.75rem;
	}
}


/* ==========================================================================
   29. DOWNLOAD BUTTONS  (under the Files panel on movie / TV pages)
   ==========================================================================
   Two buttons, labelled and linked from Fmovies -> Advertising. They sit in the
   sidebar directly under the file list, which is where a mirror or referral
   download link belongs.
   ========================================================================== */
.fm-downloads {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.fm-dl-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	border-radius: var(--fm-r);
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text-2) !important;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color var(--fm-fast) var(--fm-ease),
	            border-color var(--fm-fast) var(--fm-ease),
	            color var(--fm-fast) var(--fm-ease),
	            transform var(--fm-fast) var(--fm-ease);
}

a.fm-dl-btn:hover,
a.fm-dl-btn:focus-visible {
	background: var(--fm-surface-3);
	border-color: var(--fm-accent);
	color: var(--fm-text) !important;
	transform: translateY(-1px);
}

/* The first button is the primary action. */
.fm-dl-btn--primary {
	background: var(--fm-accent) !important;
	border-color: var(--fm-accent) !important;
	color: var(--fm-on-accent) !important;
}

a.fm-dl-btn--primary:hover,
a.fm-dl-btn--primary:focus-visible {
	filter: brightness(1.1);
	color: var(--fm-on-accent) !important;
}

.fm-dl-btn i { font-size: 1rem; }

/* A label with no link is not clickable, so it must not look like a link. */
span.fm-dl-btn { cursor: default; opacity: 0.75; }
span.fm-dl-btn--primary { opacity: 0.9; }

/* ==========================================================================
   30. "YOU MAY ALSO LIKE" — full-width card row
   ==========================================================================
   Moved out of the 320px sidebar (where it was a text list) and rebuilt as a
   poster-card grid. The cards come from the shared loop template, so they match
   every other grid on the site.
   ========================================================================== */
.fm-related-row { margin-top: var(--fm-gap-lg); }

.fm-related .body { margin-top: 1.25rem; }

/* A related set is browsed, not read, so cap the columns and let it wrap. */
.fm-related .movies.items {
	--fm-card: 158px;
}

@media (max-width: 640px) {
	.fm-related .movies.items { --fm-card: 132px; }
}

/* ==========================================================================
   31. LIGHTS-OFF MODE — re-layered
   ==========================================================================
   The theme's own rule is `#overlay.active { z-index: 100; background: rgba(0,0,0,.98) }`.

   Two defects followed from that:

     1. The sticky header is z-index 1030, so it stayed ABOVE the overlay — lit,
        and covering the controls underneath it. "Report" sits directly below the
        player, which is where the header lands once the page can scroll, so the
        header's own search field swallowed the click. That is why Light and
        Report both appeared broken.
     2. The player only stayed visible because a `.watch` rule gave it a higher
        z-index; on templates without that rule the player was hidden behind the
        overlay.

   fmovie-ui.js mirrors the state onto <html> as `.fm-lights-off`, which is the
   single hook used below to re-layer the page properly:

        overlay  1035   above the header (1030), so the whole viewport dims
       player   1040   above the overlay, so the video stays watchable
      controls  1045   above the overlay, so every control stays clickable

   Bootstrap's own modal is 1050, so the Report dialog still opens above all of it.
   ========================================================================== */
html.fm-lights-off #overlay.active {
	z-index: 1035;
	background: rgba(0, 0, 0, 0.97);
}

html.fm-lights-off {
	background: #000;
}

html.fm-lights-off #player-wrapper {
	position: relative;
	z-index: 1040;
	background: #000;
}

html.fm-lights-off #controls {
	position: relative;
	z-index: 1045;
}

/* The dimmed page must not scroll behind the overlay. */
html.fm-lights-off body {
	background: #000;
}

/*
 * Hide the header entirely in lights-off.
 *
 * Raising the overlay above the header dims everything below it, but the header
 * itself is a sticky element with a backdrop-filter, which creates its own
 * stacking context — so it stayed bright and clickable on top of the dimmed page.
 * Fading it out is both simpler and the behaviour a viewer expects from a
 * "lights off" button: chrome disappears, the video stays.
 */
html.fm-lights-off #masthead {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--fm-med) var(--fm-ease);
}

/* Restore it instantly when lights come back on. */
#masthead {
	transition: opacity var(--fm-med) var(--fm-ease);
}

/* Show which mode the control is in. */
#controls .item.light[aria-pressed="true"] {
	background: var(--fm-accent) !important;
	border-color: var(--fm-accent) !important;
	color: var(--fm-on-accent) !important;
}

/* ==========================================================================
   32. REPORT DIALOG
   ==========================================================================
   The modal is Bootstrap 4, so it needs the backdrop to be above the overlay
   when lights-off is on, and the dialog itself above both.
   ========================================================================== */
html.fm-lights-off .modal-backdrop { z-index: 1048; }
html.fm-lights-off .modal { z-index: 1050; }

.modal-dialog .wprc-content { border-radius: var(--fm-r-lg); overflow: hidden; }
.modal-dialog .wprc-message.title {
	color: var(--fm-text);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.modal-dialog .wprc-form .name { color: var(--fm-text); font-weight: 700; margin-bottom: 0.15rem; }
.modal-dialog .wprc-form .episode { display: block; font-size: 0.75rem; margin-bottom: 1rem; }
.modal-dialog .wprc-form label { color: var(--fm-text-2); }
.modal-dialog .loader { text-align: center; padding: 0.5rem 0; }

/* ==========================================================================
   33. SINGLE-PAGE POSTER
   ==========================================================================
   The poster box is a fixed 2:3 frame. What goes inside it was not controlled,
   so three things went wrong:

     1. `object-fit` was the default `fill`, which stretches the artwork to the
        frame. A 500x750 source in a 258x387 box survives that, but anything with
        a slightly different ratio is distorted.
     2. When a title has no poster the theme substitutes `noimage.webp`, which is
        700x1019 — close to 2:3 but not equal — so `fill` stretched it and the
        placeholder's own bottom edge showed through as a bright hairline across
        the artwork.
     3. The placeholder is a light image on a dark page, so it dominated a card
        that is supposed to be about the film.

   The frame is now fixed at 2:3, real artwork covers it, and the placeholder is
   contained and dimmed so it reads as "no artwork" instead of as a broken image.
   ========================================================================== */
#w-info .poster {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: var(--fm-r);
	border: 1px solid var(--fm-border);
	background: var(--fm-surface-2);
}

#w-info .poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* The "no artwork" state: contained, dimmed, with a quiet glyph behind it. */
#w-info .poster img[src*="noimage"],
#w-info .poster img[data-src*="noimage"] {
	object-fit: contain;
	padding: 18%;
	opacity: 0.22;
	filter: grayscale(1);
	background:
		radial-gradient(70% 55% at 50% 42%, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
		var(--fm-surface-2);
}

#w-info .poster img[src*="noimage"]::after,
#w-info .poster img[data-src*="noimage"]::after { content: none; }

/* ==========================================================================
   34. INFO METADATA ROWS  (year / country / stars / genre / director)
   ==========================================================================
   These were a plain label-and-value grid with no separation, so long values
   (the whole cast, several genres) ran into the next column and the block read
   as an undifferentiated wall of text.
   ========================================================================== */
#w-info .detail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0;
	margin-top: 0.5rem;
	padding-top: 0;
	border-top: 0;
}

#w-info .detail > * {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--fm-border-soft);
	font-size: 0.82rem;
	line-height: 1.5;
	min-width: 0;
}

/*
 * Drop the rule under the final row. Using :last-child only removes one, which
 * leaves a stray line in the other columns of a 2- or 3-column grid, so the
 * bottom two are cleared as well.
 */
#w-info .detail > *:last-child,
#w-info .detail > *:nth-last-child(2) { border-bottom: 0; }

/*
 * The real markup is  <div><div>Label:</div><span>value</span></div>  — the label
 * is a bare <div> and the value a bare <span>, with no classes. Earlier selectors
 * here looked for <b> / .searchby, which this theme never emits, so they matched
 * nothing and the labels stayed unstyled. These match what is actually rendered.
 */
#w-info .detail > * > div:first-child,
#w-info .detail b,
#w-info .detail span.searchby {
	flex: 0 0 96px;
	min-width: 96px;
	color: var(--fm-text-3);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.6;
}

/* Values wrap instead of overflowing into the neighbouring column. */
#w-info .detail > * > span,
#w-info .detail a {
	min-width: 0;
	overflow-wrap: anywhere;
}

#w-info .detail a {
	color: var(--fm-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--fm-fast) var(--fm-ease), border-color var(--fm-fast) var(--fm-ease);
}

#w-info .detail a:hover {
	color: var(--fm-accent);
	border-bottom-color: var(--fm-accent);
}

/* Comma-separated values (genres, cast) read better as separate chips. */
#w-info .detail a + a { margin-left: 0.15rem; }

@media (max-width: 700px) {
	#w-info .detail { grid-template-columns: 1fr; }
	#w-info .detail b,
	#w-info .detail span.searchby { flex-basis: 78px; min-width: 78px; }
}


/* ==========================================================================
   35. HEADER MENU — redesigned
   ==========================================================================
   The drawer was a plain list of same-weight rows: a destination link, a
   disclosure button and a panel link all looked alike, and the panel links were
   indented only by a hairline. Rows were also tightly packed, so on a touch
   screen the tap targets ran together.

   Changes:
     - a section label for the drawer itself
     - clearly separated groups, with a rule between them
     - every row is a full-width 44px touch target (the WCAG 2.5.5 minimum)
     - disclosure buttons carry a chevron and a distinct resting colour
     - panel links are dimmer and smaller, so the hierarchy is obvious
     - the active row gets the accent fill
   ========================================================================== */

/* The toggler reads as the primary control it is. */
#menu-toggler {
	width: 42px !important;
	height: 42px !important;
	background: var(--fm-surface-2);
	border: 1px solid var(--fm-border);
	color: var(--fm-text);
}

#menu-toggler:hover,
#menu-toggler:focus-visible {
	background: var(--fm-accent);
	border-color: var(--fm-accent);
	color: var(--fm-on-accent);
}

#menu-toggler[aria-expanded="true"] {
	background: var(--fm-accent);
	border-color: var(--fm-accent);
	color: var(--fm-on-accent);
}

header .wrapper .start #menu {
	min-width: 300px;
	max-width: min(94vw, 420px);
	padding: 0 !important;
	border-radius: var(--fm-r-lg);
	background: var(--fm-surface-1);
	border: 1px solid var(--fm-border);
	box-shadow: var(--fm-float);
	overflow: hidden;
}

/* Drawer header. */
header .wrapper .start #menu::before {
	content: "Menu";
	display: block;
	padding: 0.85rem 1rem 0.7rem;
	color: var(--fm-text-3);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--fm-border);
	background: var(--fm-surface-2);
}

header .wrapper .start #menu > ul {
	padding: 0.4rem !important;
	max-height: min(74vh, 680px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

header .wrapper .start #menu > ul > li { margin: 0; }

/* Destinations: full-width, comfortable tap targets. */
header .wrapper .start #menu > ul > li > a {
	display: flex !important;
	align-items: center;
	min-height: 44px;
	padding: 0.65rem 0.85rem !important;
	margin: 1px 0 !important;
	border-radius: var(--fm-r);
	color: var(--fm-text) !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	letter-spacing: -0.005em;
	transition: background-color var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}

header .wrapper .start #menu > ul > li > a:hover,
header .wrapper .start #menu > ul > li > a:focus-visible {
	background: var(--fm-surface-2) !important;
	color: var(--fm-accent) !important;
}

/* The current page. */
header .wrapper .start #menu > ul > li.current-menu-item > a,
header .wrapper .start #menu > ul > li > a[aria-current="page"] {
	background: var(--fm-accent-deep) !important;
	color: var(--fm-accent) !important;
}

/* A rule between the plain links and the mega-menus. */
header .wrapper .start #menu > ul > li.menu-item-has-children {
	margin-top: 0.35rem;
	padding-top: 0.35rem;
	border-top: 1px solid var(--fm-border);
}

header .wrapper .start #menu > ul > li.menu-item-has-children:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Disclosure buttons: same size as a link, but visibly a section control. */
header .wrapper .start #menu .fm-submenu-toggle {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 0.85rem !important;
	margin: 1px 0 !important;
	border: 0 !important;
	border-radius: var(--fm-r) !important;
	background: transparent !important;
	color: var(--fm-text-2) !important;
	font-size: 0.78rem !important;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}

header .wrapper .start #menu .fm-submenu-toggle:hover,
header .wrapper .start #menu .fm-submenu-toggle:focus-visible {
	background: var(--fm-surface-2) !important;
	color: var(--fm-text) !important;
}

header .wrapper .start #menu .fm-submenu-toggle[aria-expanded="true"] {
	color: var(--fm-accent) !important;
}

header .wrapper .start #menu .fm-submenu-toggle i {
	font-size: 0.72rem;
	transition: transform var(--fm-med) var(--fm-ease);
}

header .wrapper .start #menu .fm-submenu-toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

/* Panel links: dimmer, smaller, indented — clearly one level down. */
header .wrapper .start #menu .fm-submenu {
	margin: 0 0 0.35rem !important;
	padding: 0.15rem 0 0.15rem 0.5rem !important;
	border: 0 !important;
	border-left: 2px solid var(--fm-border) !important;
	border-radius: 0 !important;
}

header .wrapper .start #menu .fm-submenu a {
	display: block;
	min-height: 38px;
	padding: 0.5rem 0.7rem !important;
	border-radius: var(--fm-r-sm);
	color: var(--fm-text-3) !important;
	font-size: 0.8rem !important;
	font-weight: 500;
	line-height: 1.4;
	transition: background-color var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}

header .wrapper .start #menu .fm-submenu a:hover,
header .wrapper .start #menu .fm-submenu a:focus-visible {
	background: var(--fm-accent-deep) !important;
	color: var(--fm-accent) !important;
}

/* The genre list is long: two columns, and never taller than the drawer. */
header .wrapper .start #menu #menu-genre {
	columns: 2;
	column-gap: 0.6rem;
	max-height: 38vh;
	overflow-y: auto;
}

header .wrapper .start #menu #menu-country a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Keep the drawer inside the viewport on a phone. */
@media (max-width: 560px) {
	header .wrapper .start #menu {
		min-width: 0;
		width: calc(100vw - 32px);
		max-width: none;
		left: -6px;
	}
	header .wrapper .start #menu #menu-genre { columns: 1; }
}

/* --------------------------------------------------------------------------
 * Disclosure panels: the open and closed states.
 *
 * WHY THIS NEEDED FIXING
 *
 * style.css hides these panels with an ID-based selector:
 *
 *     header .wrapper .start #menu > ul > li > ul { display: none; ... }
 *
 * fmovie-ui.js opens one by setting `hidden = false` and adding
 * `.fm-submenu-open` — but NO RULE ANYWHERE EVER MADE THAT CLASS VISIBLE. The
 * theme's own nested-list rule is the only declaration in play, it says
 * `display: none`, and it wins on specificity (two ids and a class against a
 * single class), so opening a panel set aria-expanded to "true", cleared
 * `hidden`, and changed nothing on screen. The panel measured 0px tall while
 * reporting itself as open, which is exactly what the check caught.
 *
 * Historically this class did not need a rule: the old mega-menu opened on
 * `li:hover`, so the panel was revealed by a pseudo-class and the class was only
 * a marker. Moving to a click/keyboard disclosure broke that assumption.
 *
 * Both states are now declared at the theme's own specificity, so they are
 * decided here rather than by whichever selector happens to be more specific.
 * The closed rules also repeat the [hidden] guarantee, because several menu
 * rules set display and a panel must never be openable by anything except its
 * own toggle.
 * ------------------------------------------------------------------------ */
[hidden].fm-submenu,
#menu .fm-submenu[hidden],
header .wrapper .start #menu .fm-submenu[hidden],
header .wrapper .start #menu > ul > li > ul[hidden] {
	display: none !important;
}

/* Open state. Matches the theme's selector shape so specificity is a tie and the
   later declaration (this file loads after style.css) wins. */
header .wrapper .start #menu > ul > li > ul.fm-submenu-open,
header .wrapper .start #menu .fm-submenu.fm-submenu-open,
#menu .fm-submenu-open {
	display: block !important;
}


/* ==========================================================================
   36. LAZY PANELS  (tabbed card rows)
   ==========================================================================
   Only the first panel of each tabbed section is in the page; the rest arrive on
   first click. See inc/panels.php for why.
   ========================================================================== */
.fm-panel-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
}

.fm-spinner {
	width: 26px;
	height: 26px;
	border: 2px solid var(--fm-border);
	border-top-color: var(--fm-accent);
	border-radius: 50%;
	animation: fm-spin 0.7s linear infinite;
}

@keyframes fm-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.fm-spinner { animation-duration: 2s; }
}

.fm-panel-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--fm-text-3);
	font-size: 0.85rem;
}