/* ==========================================================================
   RoguePopcorn — Netflix-inspired theme (rebuild)
   ========================================================================== */

:root {
	--nf-bg: #0b0b0f;
	--nf-bg-2: #141418;
	--nf-bg-3: #1f1f25;
	--nf-text: #f5f5f7;
	--nf-muted: #a3a3a8;
	--nf-dim: #6e6e73;
	--nf-red: #e50914;
	--nf-red-hover: #f6121d;
	--nf-white: #ffffff;
	--nf-border: rgba(255, 255, 255, 0.08);
	--nf-card-radius: 6px;
	--nf-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.55);
	--nf-shadow-hover: 0 24px 56px rgba(0, 0, 0, 0.7);
	--nf-header-h: 68px;
	--nf-max-w: 1600px;
	--nf-row-gap: 6px;
	--nf-side-pad: 4vw;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--nf-bg);
	color: var(--nf-text);
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }

/* ============================ Header ===================================== */
.nf-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 200;
	height: var(--nf-header-h);
	display: flex;
	align-items: center;
	padding: 0 var(--nf-side-pad);
	background: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,0) 100%);
	transition: background-color .25s ease;
}
.nf-header.is-scrolled {
	background: var(--nf-bg);
	box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.nf-header-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	width: 100%;
	max-width: var(--nf-max-w);
	margin: 0 auto;
}

.nf-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--nf-red);
	font-weight: 900;
	font-size: 26px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	flex-shrink: 0;
}
.nf-brand svg { width: 38px; height: 38px; }
.nf-brand-text { font-family: 'Poppins', sans-serif; font-size: 26px; text-transform: uppercase; display: inline-flex; align-items: baseline; letter-spacing: 1px; }
.nf-brand-rogue { font-weight: 900; color: var(--nf-red); }
.nf-brand-popcorn { font-weight: 200; color: #fff; letter-spacing: 3px; margin-left: 1px; }

.nf-nav {
	display: flex;
	gap: 20px;
	flex: 1;
}
.nf-nav a {
	font-size: 14px;
	color: #e5e5e5;
	font-weight: 400;
	transition: color .2s;
}
.nf-nav a:hover { color: #b3b3b3; }
.nf-nav a.is-active { color: #fff; font-weight: 600; }

.nf-header-right {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

.nf-search {
	position: relative;
	display: flex;
	align-items: center;
}
.nf-search-toggle {
	display: none; /* desktop: hidden, search box always visible */
	background: transparent;
	border: 0;
	padding: 6px;
	color: #fff;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}
.nf-search-toggle svg { width: 22px; height: 22px; }
.nf-search-box {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(0,0,0,.78);
	border: 1px solid rgba(255,255,255,.55);
	padding: 6px 12px;
	width: 320px;
	overflow: hidden;
	transition: width .35s ease, border-color .2s ease, background .2s ease;
	border-radius: 2px;
}
.nf-search-box:focus-within {
	border-color: #fff;
	background: rgba(0,0,0,.92);
}
.nf-search.is-open .nf-search-box { width: 280px; }
.nf-search-box input {
	background: transparent;
	border: 0;
	color: #fff;
	width: 100%;
	font-size: 14px;
	outline: none;
}
.nf-search-box input::placeholder { color: #a3a3a8; }

.nf-account {
	position: relative;
}
.nf-avatar {
	background: transparent;
	border: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	color: #fff;
}
.nf-avatar-img {
	width: 32px; height: 32px;
	border-radius: 4px;
	background: linear-gradient(135deg, #e50914 0%, #b00710 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
}
.nf-avatar-caret {
	width: 10px; height: 10px;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	border-top: 5px solid #fff;
	transition: transform .2s;
}
.nf-account.is-open .nf-avatar-caret { transform: rotate(180deg); }

.nf-account-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 220px;
	background: rgba(0,0,0,.92);
	border: 1px solid rgba(255,255,255,.12);
	padding: 10px 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease;
}
.nf-account.is-open .nf-account-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.nf-account-menu::before {
	content: '';
	position: absolute;
	top: -7px;
	right: 14px;
	width: 14px; height: 14px;
	background: rgba(0,0,0,.92);
	border-left: 1px solid rgba(255,255,255,.12);
	border-top: 1px solid rgba(255,255,255,.12);
	transform: rotate(45deg);
}
.nf-account-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	color: #e5e5e5;
	font-size: 14px;
	transition: background .15s, color .15s;
}
.nf-account-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nf-account-menu .nf-divider {
	border: 0;
	border-top: 1px solid rgba(255,255,255,.12);
	margin: 6px 0;
}
.nf-account-menu .is-danger { color: #ff7782; }

/* mobile nav button */
.nf-burger { display: none; background: transparent; border: 0; color: #fff; padding: 6px; }
.nf-burger svg { width: 24px; height: 24px; }

/* ============================ Hero / Billboard =========================== */
.nf-hero {
	position: relative;
	width: 100%;
	min-height: 78vh;
	margin-top: 0;
	padding: 0 var(--nf-side-pad) 80px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: #fff;
	background: #000;
}
.nf-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 18%;
	opacity: 0;
	transition: opacity .8s ease;
	z-index: 0;
}
.nf-hero-bg.is-active { opacity: 1; }
.nf-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(77deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,0) 70%),
		linear-gradient(180deg, transparent 50%, rgba(0,0,0,.65) 78%, var(--nf-bg) 100%);
	z-index: 1;
	pointer-events: none;
}
.nf-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
	width: 100%;
	padding-top: 140px;
}
.nf-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	background: rgba(229,9,20,.18);
	border: 1px solid rgba(229,9,20,.4);
	color: #ff5b66;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.nf-hero-title {
	font-size: clamp(34px, 5.6vw, 64px);
	font-weight: 900;
	line-height: 1.05;
	margin: 0 0 14px;
	text-shadow: 0 4px 22px rgba(0,0,0,.65);
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.5px;
}
.nf-hero-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	color: #d4d4d8;
	font-size: 14px;
	margin-bottom: 16px;
}
.nf-hero-meta .nf-pill-rating {
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.25);
	color: #fff;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 600;
}
.nf-hero-desc {
	font-size: 16px;
	line-height: 1.55;
	color: #e5e5e5;
	margin: 0 0 22px;
	max-width: 600px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.nf-hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.nf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 24px;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	border: 0;
	transition: transform .15s, background .15s, color .15s;
	cursor: pointer;
	position: relative;
	z-index: 1;
	pointer-events: auto;
	text-decoration: none;
	user-select: none;
}
.nf-btn svg { width: 22px; height: 22px; }
.nf-btn-play { background: #fff; color: #000; }
.nf-btn-play:hover { background: rgba(255,255,255,.85); }
.nf-btn-info {
	background: rgba(109,109,110,.7);
	color: #fff;
}
.nf-btn-info:hover { background: rgba(109,109,110,.45); }
.nf-btn-danger { background: var(--nf-red); color: #fff; }
.nf-btn-danger:hover { background: var(--nf-red-hover); }

.nf-hero-dots {
	position: absolute;
	right: var(--nf-side-pad);
	bottom: 110px;
	z-index: 3;
	display: flex;
	gap: 8px;
}
.nf-hero-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,.35);
	border: 0;
	padding: 0;
	transition: background .2s, transform .2s;
}
.nf-hero-dot.is-active {
	background: var(--nf-red);
	transform: scale(1.3);
}

/* ============================ Rows ======================================= */
.nf-rows {
	position: relative;
	margin-top: -110px;
	padding: 0 0 64px;
	z-index: 5;
}
.nf-row {
	margin-bottom: 36px;
	padding: 0 var(--nf-side-pad);
}
.nf-row-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}
.nf-row-title {
	font-size: 22px;
	font-weight: 700;
	color: #e5e5e5;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.nf-row-title::after {
	content: '\203A';
	color: transparent;
	font-size: 22px;
	margin-left: 6px;
	transition: color .2s, transform .2s;
}
.nf-row:hover .nf-row-title::after { color: #54b9c5; transform: translateX(3px); }
.nf-row-link {
	color: #54b9c5;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	transition: opacity .2s;
}
.nf-row:hover .nf-row-link { opacity: 1; }

.nf-row-track-wrap {
	position: relative;
	margin: -38px 0 -200px;
}
.nf-row-track {
	display: flex;
	gap: var(--nf-row-gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding: 50px 0 210px;
	scrollbar-width: none;
}
.nf-row-track::-webkit-scrollbar { display: none; }

.nf-row-arrow {
	position: absolute;
	top: 50px;
	bottom: 210px;
	width: 50px;
	background: rgba(20,20,20,.6);
	border: 0;
	color: #fff;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s, background .2s;
	cursor: pointer;
}
.nf-row-arrow svg { width: 36px; height: 36px; }
.nf-row-arrow:hover { background: rgba(20,20,20,.85); }
.nf-row:hover .nf-row-arrow { opacity: 1; }
.nf-row-arrow.prev { left: 0; }
.nf-row-arrow.next { right: 0; }
.nf-row-arrow:disabled { opacity: 0 !important; pointer-events: none; }

/* ============================ Card ======================================= */
.nf-card {
	flex: 0 0 calc((100% - 5 * var(--nf-row-gap)) / 6);
	min-width: calc((100% - 5 * var(--nf-row-gap)) / 6);
	scroll-snap-align: start;
	position: relative;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), z-index 0s linear .35s;
	cursor: pointer;
	border-radius: var(--nf-card-radius);
	overflow: visible;
}
.nf-card-poster {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--nf-bg-3);
	border-radius: var(--nf-card-radius);
	overflow: hidden;
}
.nf-card-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.nf-card-rank {
	position: absolute;
	bottom: 6px;
	left: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: rgba(0,0,0,.7);
	padding: 2px 8px;
	border-radius: 4px;
}
.nf-card-quality {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--nf-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.nf-card-lang {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(0,0,0,.7);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 3px;
	text-transform: uppercase;
}
.nf-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.85) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 10px 12px;
	opacity: 0;
	transition: opacity .25s ease;
}
.nf-card:hover .nf-card-overlay { opacity: 1; }
.nf-card-mini-title {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Hover preview pop-out (desktop) */
.nf-card-preview {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--nf-bg-2);
	border-radius: var(--nf-card-radius);
	box-shadow: var(--nf-shadow-hover);
	opacity: 0;
	pointer-events: none;
	transform-origin: center center;
	transform: scale(1);
	transition: opacity .15s ease;
	z-index: 5;
	overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
	.nf-row-track:hover .nf-card { transform: translateX(0); }
	.nf-card:hover {
		z-index: 30;
		transition-delay: 0s, 0s;
	}
	.nf-card:hover .nf-card-preview {
		opacity: 1;
		pointer-events: auto;
		transform: scale(1.35);
		transition: opacity .25s ease .35s, transform .35s ease .35s;
	}
	.nf-card:hover ~ .nf-card { transform: translateX(9%); }
	.nf-card:hover { transform: translateX(0); }
	/* When a card before is hovered, push current to right; before-hovered cards push to left */
	.nf-row-track .nf-card:has(~ .nf-card:hover) { transform: translateX(-9%); }

	/* First/last edge handling */
	.nf-card:first-child:hover .nf-card-preview { transform: scale(1.35) translateX(13%); }
	.nf-card:last-child:hover .nf-card-preview { transform: scale(1.35) translateX(-13%); }
}

.nf-card-preview-poster {
	width: 100%;
	aspect-ratio: 16/9;
	background: #000;
	overflow: hidden;
}
.nf-card-preview-poster img { width: 100%; height: 100%; object-fit: cover; }

.nf-card-preview-body {
	padding: 12px 14px 14px;
}
.nf-card-preview-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.nf-mini-btn {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,.5);
	background: rgba(42,42,42,.6);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s, background .15s, color .15s;
}
.nf-mini-btn svg { width: 16px; height: 16px; }
.nf-mini-btn:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.nf-mini-btn.is-play {
	background: #fff;
	color: #000;
	border-color: #fff;
}
.nf-mini-btn.is-play:hover { background: rgba(255,255,255,.85); }
.nf-mini-btn.is-active { background: #fff; color: #000; border-color: #fff; }

.nf-card-preview-title {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nf-card-preview-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	color: #b3b3b3;
	margin-bottom: 6px;
}
.nf-card-preview-meta .match { color: #46d369; font-weight: 700; }
.nf-card-preview-meta .pill {
	border: 1px solid rgba(255,255,255,.3);
	padding: 1px 6px;
	font-size: 11px;
	color: #d4d4d8;
}
.nf-card-preview-genres {
	font-size: 12px;
	color: #d4d4d8;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.nf-card-preview-genres span:not(:last-child)::after {
	content: '\2022';
	margin-left: 4px;
	color: #6e6e73;
}

/* ============================ Status / Empty ============================= */
/* ============================ Status / Empty ============================= */
.nf-status {
	padding: 18px var(--nf-side-pad);
	color: var(--nf-muted);
	text-align: center;
	font-size: 14px;
}
.nf-status.error { color: #ff7782; }

/* Premium Soft-Red Glow Spinner */
.nf-spinner {
	display: inline-block;
	width: 18px; height: 18px;
	border: 2px.5 solid rgba(229, 9, 20, 0.15);
	border: 2.5px solid rgba(229, 9, 20, 0.15);
	border-top-color: var(--nf-red, #e50914);
	border-radius: 50%;
	animation: nf-spin .7s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	margin-right: 10px;
	vertical-align: middle;
	box-shadow: 0 0 12px rgba(229, 9, 20, 0.25);
}
@keyframes nf-spin { to { transform: rotate(360deg); } }

/* Animated Shimmer Text */
.nf-loading-text {
	background: linear-gradient(90deg, #a3a3a8 0%, #ffffff 50%, #a3a3a8 100%);
	background-size: 200% auto;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	animation: text-shimmer 2s linear infinite;
	display: inline-flex;
	align-items: center;
	font-weight: 500;
}
@keyframes text-shimmer {
	to { background-position: 200% center; }
}

/* Core Shimmer Swipe Effect */
@keyframes shimmer-swipe {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Premium Skeleton Layouts */
.skeleton-text {
	color: transparent !important;
	background: #18181b !important;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}
.skeleton-text::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(229, 9, 20, 0.08) 50%, transparent 100%);
	background-size: 200% 100%;
	animation: shimmer-swipe 1.5s infinite linear;
}
.skeleton-text.skeleton-title {
	min-width: 250px;
	width: fit-content;
	display: block;
}
.skeleton-text.skeleton-desc {
	min-width: 80%;
	width: fit-content;
	display: block;
}

/* Card Skeletons */
.skeleton-row {
	margin-bottom: 30px;
	padding: 0 var(--nf-side-pad);
}
.skeleton-row-title {
	width: 160px;
	height: 18px;
	background: #18181b;
	border-radius: 4px;
	margin-bottom: 16px;
	position: relative;
	overflow: hidden;
}
.skeleton-row-title::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(229, 9, 20, 0.08) 50%, transparent 100%);
	background-size: 200% 100%;
	animation: shimmer-swipe 1.5s infinite linear;
}
.skeleton-row-track {
	display: flex;
	gap: var(--nf-row-gap, 8px);
	overflow: hidden;
}
.skeleton-card {
	aspect-ratio: 16 / 9;
	background: #18181b !important;
	border-radius: var(--nf-card-radius, 6px);
	position: relative;
	overflow: hidden;
	box-shadow: none !important;
	border: none !important;
}
.skeleton-card::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(229, 9, 20, 0.08) 50%, transparent 100%);
	background-size: 200% 100%;
	animation: shimmer-swipe 1.5s infinite linear;
}

/* ============================ Footer ===================================== */
.nf-footer {
	padding: 50px var(--nf-side-pad) 30px;
	color: #757575;
	font-size: 13px;
	max-width: var(--nf-max-w);
	margin: 0 auto;
}
.nf-footer a { color: #b3b3b3; }
.nf-footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px 20px;
	margin: 18px 0 28px;
}
.nf-footer-grid a:hover { text-decoration: underline; }
.nf-footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	border-top: 1px solid #222;
	padding-top: 18px;
}

/* ============================ Detail page ================================ */
.nf-detail {
	padding-top: 0;
}
.nf-detail-hero {
	position: relative;
	min-height: 90vh;
	padding: 130px var(--nf-side-pad) 60px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	color: #fff;
}
.nf-detail-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.nf-detail-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(77deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.2) 100%),
		linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 90%, var(--nf-bg) 100%);
	z-index: 1;
}
.nf-detail-hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1080px;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 36px;
	align-items: end;
}
.nf-detail-poster-thumb {
	width: 100%;
	aspect-ratio: 2/3;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(0,0,0,.6);
	background: #000;
}
.nf-detail-poster-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nf-detail-info h1 {
	font-size: clamp(32px, 4.4vw, 56px);
	font-weight: 900;
	font-family: 'Montserrat', sans-serif;
	margin: 0 0 8px;
	letter-spacing: 0.5px;
}
.nf-detail-original {
	color: #b3b3b3;
	font-size: 16px;
	margin-bottom: 16px;
}
.nf-detail-meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 14px;
	margin-bottom: 18px;
	color: #d4d4d8;
}
.nf-detail-meta-row .pill {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 600;
}
.nf-detail-meta-row .match { color: #46d369; font-weight: 700; font-size: 14px; }

.nf-detail-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.nf-detail-desc {
	color: #e5e5e5;
	font-size: 15px;
	line-height: 1.6;
	max-width: 720px;
	margin-bottom: 18px;
}
.nf-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.nf-detail-tag {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12);
	color: #d4d4d8;
	padding: 4px 10px;
	font-size: 12px;
	border-radius: 999px;
}

.nf-detail-body {
	padding: 30px var(--nf-side-pad) 60px;
	max-width: var(--nf-max-w);
	margin: 0 auto;
}
.nf-detail-section {
	margin-bottom: 40px;
}
.nf-detail-section-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.nf-detail-section-title::before {
	content: '';
	width: 4px;
	height: 22px;
	background: var(--nf-red);
	display: inline-block;
}

/* Player */
.nf-player-stage {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 24px;
	aspect-ratio: 16/9;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,.7);
}
.nf-player-stage video,
.nf-player-stage iframe {
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}
.nf-player-stage video[hidden],
.nf-player-stage iframe[hidden] { display: none; }

.nf-player-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #6e6e73;
	font-size: 14px;
	text-align: center;
	padding: 0 20px;
}

/* Source/server tabs */
.nf-server-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.nf-server-tab {
	background: var(--nf-bg-3);
	color: #d4d4d8;
	border: 1px solid var(--nf-border);
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 4px;
	transition: background .15s, color .15s, border-color .15s;
}
.nf-server-tab:hover { background: rgba(255,255,255,.08); color: #fff; }
.nf-server-tab.is-active {
	background: var(--nf-red);
	color: #fff;
	border-color: var(--nf-red);
}

.nf-episode-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 8px;
}
.nf-episode-btn {
	background: var(--nf-bg-3);
	color: #e5e5e5;
	border: 1px solid var(--nf-border);
	padding: 10px 6px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 4px;
	transition: all .15s;
	position: relative;
	overflow: hidden;
}
.nf-episode-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.nf-episode-btn.is-watched {
	background: rgba(60,60,68,.55);
	color: #6e6e73;
	border-color: rgba(255,255,255,.04);
	position: relative;
}
.nf-episode-btn.is-watched::after {
	content: '';
	position: absolute;
	top: 4px; right: 4px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: #6e6e73;
	background-image: linear-gradient(135deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
}
.nf-episode-btn.is-watched:hover { color: #d4d4d8; background: rgba(80,80,88,.7); }
.nf-episode-btn.is-inprogress {
	border-color: var(--nf-red);
	color: #f5f5f7;
}
.nf-episode-btn.is-inprogress::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--nf-red);
}
.nf-episode-btn.is-active {
	background: var(--nf-red);
	border-color: var(--nf-red);
	color: #fff;
}
.nf-episode-btn.is-active::after { display: none; }

/* Detail meta grid */
.nf-detail-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px 24px;
	background: rgba(20,20,20,.55);
	border: 1px solid var(--nf-border);
	border-radius: 8px;
	padding: 20px 22px;
}
.nf-detail-meta-grid .nf-meta-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.nf-detail-meta-grid dt {
	color: #6e6e73;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 4px;
}
.nf-detail-meta-grid dd {
	color: #e5e5e5;
	font-size: 14px;
	margin: 0;
	word-wrap: break-word;
}

/* ============================ Search & Catalog =========================== */
.nf-page {
	padding: calc(var(--nf-header-h) + 30px) var(--nf-side-pad) 80px;
	max-width: var(--nf-max-w);
	margin: 0 auto;
}
.nf-page-title {
	font-size: clamp(26px, 3.4vw, 36px);
	font-weight: 800;
	margin: 0 0 6px;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.5px;
}
.nf-page-sub {
	color: var(--nf-muted);
	font-size: 14px;
	margin: 0 0 22px;
	max-width: 720px;
}

/* Compact hero banner for sub pages */
.nf-subhero {
	position: relative;
	padding: calc(var(--nf-header-h) + 50px) var(--nf-side-pad) 50px;
	background:
		linear-gradient(180deg, rgba(11,11,15,.4) 0%, rgba(11,11,15,.85) 70%, var(--nf-bg) 100%),
		radial-gradient(circle at 20% 30%, rgba(229,9,20,.35), transparent 55%),
		radial-gradient(circle at 80% 70%, rgba(82,113,255,.25), transparent 60%),
		#0b0b0f;
	overflow: hidden;
	margin-bottom: 24px;
}
.nf-subhero-inner {
	position: relative;
	z-index: 2;
	max-width: var(--nf-max-w);
	margin: 0 auto;
}
.nf-subhero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	background: rgba(229,9,20,.18);
	border: 1px solid rgba(229,9,20,.4);
	color: #ff5b66;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.nf-subhero-title {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(34px, 4.4vw, 54px);
	font-weight: 900;
	letter-spacing: 0.5px;
	margin: 0 0 10px;
	color: #fff;
}
.nf-subhero-desc {
	color: #d4d4d8;
	font-size: 15px;
	max-width: 720px;
	margin: 0;
}
.nf-page-flat {
	padding: 0 var(--nf-side-pad) 80px;
	max-width: var(--nf-max-w);
	margin: 0 auto;
}

.nf-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}
.nf-filter-bar select,
.nf-filter-bar input {
	background: var(--nf-bg-2);
	border: 1px solid var(--nf-border);
	color: #fff;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 13px;
	outline: none;
	min-width: 140px;
}

.nf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
	align-items: start;
}
/* Reuse nf-card style inside grid layout */
.nf-grid .nf-card {
	flex: unset;
	min-width: 0;
	width: 100%;
}
.nf-grid .nf-card .nf-card-preview { display: none; }
.nf-grid .nf-card { transition: transform .25s ease; }
.nf-grid .nf-card:hover { transform: translateY(-4px); }
.nf-grid .nf-card:hover ~ .nf-card,
.nf-grid .nf-card:has(~ .nf-card:hover) { transform: none; }
.nf-grid .nf-card:hover .nf-card-poster img { transform: scale(1.05); }
.nf-grid .nf-card-poster img { transition: transform .35s ease; }
.nf-grid-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 0 2px;
	font-size: 12px;
	color: #b3b3b3;
}
.nf-grid-meta .name {
	color: #e5e5e5;
	font-weight: 600;
	font-size: 14px;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nf-grid-meta .year { color: #6e6e73; flex-shrink: 0; }

.nf-load-more {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

/* Mobile sidebar */
.nf-mobile-drawer {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: 78%;
	max-width: 320px;
	background: #0b0b0f;
	border-right: 1px solid var(--nf-border);
	z-index: 300;
	transform: translateX(-100%);
	transition: transform .3s ease;
	padding: 70px 20px 30px;
	overflow-y: auto;
}
.nf-mobile-drawer.is-open { transform: translateX(0); }
.nf-mobile-drawer a {
	display: block;
	padding: 12px 4px;
	color: #e5e5e5;
	font-size: 15px;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.nf-mobile-drawer .is-danger { color: #ff7782; }

.nf-mobile-mask {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.6);
	z-index: 250;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.nf-mobile-mask.is-open { opacity: 1; pointer-events: auto; }

/* ============================ Responsive ================================= */
@media (max-width: 1280px) {
	.nf-card {
		flex: 0 0 calc((100% - 4 * var(--nf-row-gap)) / 5);
		min-width: calc((100% - 4 * var(--nf-row-gap)) / 5);
	}
}
@media (max-width: 1024px) {
	.nf-card {
		flex: 0 0 calc((100% - 3 * var(--nf-row-gap)) / 4);
		min-width: calc((100% - 3 * var(--nf-row-gap)) / 4);
	}
	.nf-detail-hero-content {
		grid-template-columns: 180px 1fr;
		gap: 24px;
	}
}
@media (max-width: 820px) {
	:root { --nf-side-pad: 14px; }
	.nf-nav { display: none; }
	.nf-burger { display: inline-flex; }
	.nf-header-inner { gap: 12px; }
	.nf-header-right { gap: 10px; }
	.nf-brand { font-size: 20px; gap: 6px; }
	.nf-brand svg { width: 30px; height: 30px; }
	.nf-brand-text { font-size: 22px; }
	.nf-avatar-img { width: 28px; height: 28px; font-size: 13px; }
	.nf-avatar-caret { display: none; }
	/* Mobile: collapse search to icon, expand on toggle */
	.nf-search-toggle { display: inline-flex; }
	.nf-search-box {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		width: 0;
		padding: 0;
		border-color: transparent;
		background: rgba(0,0,0,.92);
	}
	.nf-search.is-open .nf-search-box {
		width: min(72vw, 320px);
		padding: 8px 12px;
		border-color: rgba(255,255,255,.6);
	}
	/* Account dropdown: stay inside viewport */
	.nf-account-menu {
		position: fixed;
		top: calc(var(--nf-header-h) + 6px);
		right: 12px;
		left: auto;
		min-width: 220px;
		max-width: calc(100vw - 24px);
	}
	.nf-account-menu::before { right: 12px; }
	.nf-card {
		flex: 0 0 calc((100% - 2 * var(--nf-row-gap)) / 3);
		min-width: calc((100% - 2 * var(--nf-row-gap)) / 3);
	}
	.nf-row-arrow { display: none; }
	.nf-card:hover .nf-card-preview { transform: scale(1) !important; }
	.nf-hero { min-height: 70vh; padding-bottom: 40px; }
	.nf-hero-inner { padding-top: 110px; }
	.nf-hero-dots { bottom: 50px; }
	.nf-detail-hero { min-height: 80vh; padding-top: 100px; }
	.nf-detail-hero-content {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.nf-detail-poster-thumb { max-width: 180px; }
	.nf-rows { margin-top: -60px; }
	.nf-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.nf-brand-text { display: none; }
	.nf-header-inner { gap: 8px; }
	.nf-header-right { gap: 6px; }
	.nf-card {
		flex: 0 0 calc((100% - 1 * var(--nf-row-gap)) / 2);
		min-width: calc((100% - 1 * var(--nf-row-gap)) / 2);
	}
	.nf-search.is-open .nf-search-box { width: min(82vw, 320px); }
	.nf-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.nf-page-title { font-size: 24px; }
	.nf-subhero-title { font-size: clamp(22px, 6vw, 30px); }
	.account-tabs { gap: 0; }
	.account-tab { padding: 10px 12px; font-size: 13px; }
	.profile-card { padding: 18px; }
}

/* selection */
::selection { background: var(--nf-red); color: #fff; }

/* ===========================================================
 *  Netflix-style custom video player
 * =========================================================== */
.nf-vplayer {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 24px;
	aspect-ratio: 16/9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0,0,0,.85), 0 0 40px rgba(0, 0, 0, 0.5);
	outline: none;
	user-select: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: all 0.3s ease;
}
.nf-vplayer video,
.nf-vplayer iframe {
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
	display: block;
}
.nf-vplayer video[hidden],
.nf-vplayer iframe[hidden] { display: none; }
.nf-vplayer.is-fullscreen { max-width: 100vw; border-radius: 0; border: none; aspect-ratio: auto; height: 100vh; }
.nf-vplayer.is-cursor-hidden { cursor: none; }
.nf-vplayer.is-cursor-hidden .nf-vplayer-controls,
.nf-vplayer.is-cursor-hidden .nf-vplayer-center { opacity: 0; pointer-events: none; }

.nf-vplayer-empty {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: #6e6e73; font-size: 14px; padding: 0 20px; text-align: center;
	background: #0b0b0f;
	z-index: 2;
}
.nf-player-empty-brand {
	display: grid;
	gap: 14px;
	justify-items: center;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.nf-player-empty-logo {
	font-family: 'Poppins', sans-serif;
	font-size: clamp(28px, 4vw, 42px);
	letter-spacing: 2px;
	line-height: 1;
}
.nf-player-empty-logo .nf-brand-rogue {
	text-shadow: 0 0 18px rgba(229, 9, 20, 0.4);
}
.nf-player-empty-logo .nf-brand-popcorn {
	letter-spacing: 4px;
	margin-left: 3px;
}
.nf-player-empty-copy {
	color: #d4d4d8;
	font-size: 14px;
	letter-spacing: 0.2px;
}

/* Loading spinner inside player */
.nf-vplayer-loader {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	pointer-events: none; z-index: 5;
	background: rgba(0,0,0,0.3);
	backdrop-filter: blur(4px);
}
.nf-vplayer-spinner {
	width: 50px; height: 50px;
	border: 3px solid rgba(229, 9, 20, 0.15);
	border-top-color: var(--nf-red, #e50914);
	border-radius: 50%;
	animation: nfSpin 0.75s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	box-shadow: 0 0 15px rgba(229, 9, 20, 0.2);
}
@keyframes nfSpin { to { transform: rotate(360deg); } }

/* Center Play Overlay (Glossy Liquid Glass Sphere/Lens) */
.nf-vplayer-center {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	width: 72px; height: 72px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
	backdrop-filter: blur(12px);
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	border-top: 1.5px solid rgba(255, 255, 255, 0.5); /* spec top highlight */
	border-left: 1.5px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	z-index: 6;
	box-shadow: inset 0 10px 15px rgba(255, 255, 255, 0.15), inset 0 -10px 15px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.6);
}
.nf-vplayer-center svg { 
	width: 32px; height: 32px; 
	margin-left: 3px;
	transition: transform 0.3s ease;
}
.nf-vplayer-center:hover { 
	background: linear-gradient(135deg, rgba(229, 9, 20, 0.35) 0%, rgba(229, 9, 20, 0.1) 100%);
	border-color: rgba(229, 9, 20, 0.5);
	border-top-color: rgba(229, 9, 20, 0.8);
	transform: translate(-50%,-50%) scale(1.08); 
	box-shadow: inset 0 10px 15px rgba(255, 255, 255, 0.2), inset 0 -10px 15px rgba(0, 0, 0, 0.5), 0 0 35px rgba(229, 9, 20, 0.5);
}
.nf-vplayer-center:hover svg {
	transform: scale(1.1);
}
.nf-vplayer:not(.is-paused) .nf-vplayer-center { opacity: 0; pointer-events: none; }

/* Toast for keyboard feedback (Glossy gel capsule) */
.nf-vplayer-toast {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	background: linear-gradient(135deg, rgba(229, 9, 20, 0.15) 0%, rgba(229, 9, 20, 0.05) 100%);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(229, 9, 20, 0.4);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	padding: 12px 24px;
	border-radius: 30px;
	font-size: 14px; font-weight: 600;
	pointer-events: none;
	z-index: 7;
	box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.1), 0 10px 25px rgba(0, 0, 0, 0.4);
	animation: nfToast .8s ease-out forwards;
	letter-spacing: 0.5px;
}
@keyframes nfToast {
	0%   { opacity: 0; transform: translate(-50%,-50%) scale(.85); }
	20%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
	100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
}

/* Float Controls Bar & Dark overlay gradient */
.nf-vplayer-controls {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: space-between;
	background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 65%, rgba(0,0,0,.75) 100%);
	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 4;
}
.nf-vplayer-top {
	padding: 20px 24px;
	color: #fff;
	transition: transform 0.3s ease;
}
.nf-vplayer-title {
	font-size: 16px;
	font-weight: 700;
	text-shadow: 0 2px 10px rgba(0,0,0,.8);
	max-width: 80%;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	letter-spacing: 0.3px;
}

/* Bottom Bar - Completely Transparent Background wrapper */
.nf-vplayer-bottom {
	padding: 12px 0;
	margin: 14px 24px;
	display: flex; flex-direction: column; gap: 12px;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
	box-shadow: none !important;
	transition: all 0.3s ease;
}
/* Fullscreen adaptation for the floating bar */
.nf-vplayer.is-fullscreen .nf-vplayer-bottom {
	margin: 20px 32px;
}

/* Timeline progress (Liquid Tube Track) */
.nf-vplayer-progress {
	position: relative;
	height: 14px;
	display: flex; align-items: center;
	cursor: pointer;
}
.nf-vplayer-progress-track {
	position: relative;
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	transition: height .2s ease;
	box-sizing: border-box;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}
.nf-vplayer-progress:hover .nf-vplayer-progress-track,
.nf-vplayer-progress.is-dragging .nf-vplayer-progress-track { 
	height: 6px; 
}
.nf-vplayer-buffered {
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 0%;
	background: rgba(255,255,255,.2);
	border-radius: 10px;
}
.nf-vplayer-played {
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 0%;
	background: linear-gradient(90deg, #e50914 0%, #ff3b47 100%);
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(229, 9, 20, 0.6);
}
.nf-vplayer-thumb {
	position: absolute;
	left: 0%;
	top: 50%;
	width: 10px; height: 10px;
	transform: translate(-50%, -50%) scale(0);
	background: #fff;
	border: 2px solid var(--nf-red, #e50914);
	border-radius: 50%;
	transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 0 8px var(--nf-red, #e50914);
}
.nf-vplayer-progress:hover .nf-vplayer-thumb,
.nf-vplayer-progress.is-dragging .nf-vplayer-thumb { 
	transform: translate(-50%, -50%) scale(1.15); 
}
.nf-vplayer-preview-time {
	position: absolute;
	bottom: 22px;
	background: rgba(11, 11, 15, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 11px; font-weight: 600;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	transform: translateX(-50%);
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.nf-vplayer-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
}
.nf-vplayer-row-left,
.nf-vplayer-row-right {
	display: flex; align-items: center; gap: 8px;
}

/* Control Buttons (Glossy Liquid Gel Droplets) */
.nf-vplayer-btn {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	color: #e4e4e7;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.12), 0 4px 8px rgba(0,0,0,0.3);
}
.nf-vplayer-btn:hover { 
	background: linear-gradient(135deg, rgba(229, 9, 20, 0.2) 0%, rgba(229, 9, 20, 0.05) 100%);
	border-color: rgba(229, 9, 20, 0.5);
	border-top-color: rgba(229, 9, 20, 0.7);
	color: #fff;
	transform: translateY(-1px) scale(1.06); 
	box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 0 15px rgba(229, 9, 20, 0.35);
}
.nf-vplayer-btn svg { 
	width: 18px; height: 18px; 
	pointer-events: none; 
	transition: transform 0.2s ease;
}
.nf-vplayer-btn:hover svg {
	transform: scale(1.05);
}

/* Rate Button styled identically */
#vpRateBtn { 
	width: auto; 
	min-width: 44px; 
	padding: 0 12px; 
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}
#vpRateBtn:hover {
	background: linear-gradient(135deg, rgba(229, 9, 20, 0.2) 0%, rgba(229, 9, 20, 0.05) 100%) !important;
	border-color: rgba(229, 9, 20, 0.5) !important;
}

/* Play/pause icon swap */
.nf-vplayer .ic-pause { display: none; }
.nf-vplayer:not(.is-paused) .ic-play { display: none; }
.nf-vplayer:not(.is-paused) .ic-pause { display: inline-block; }
/* Mute swap */
.nf-vplayer .ic-vol-off { display: none; }
.nf-vplayer.is-muted .ic-vol-on { display: none; }
.nf-vplayer.is-muted .ic-vol-off { display: inline-block; }
/* Fullscreen swap */
.nf-vplayer .ic-fs-off { display: none; }
.nf-vplayer.is-fullscreen .ic-fs-on { display: none; }
.nf-vplayer.is-fullscreen .ic-fs-off { display: inline-block; }

.nf-vplayer-vol {
	display: inline-flex; align-items: center; gap: 4px;
}
.nf-vplayer-volrange {
	-webkit-appearance: none; appearance: none;
	width: 0; height: 5px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	outline: none;
	transition: width .25s ease;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.nf-vplayer-vol:hover .nf-vplayer-volrange,
.nf-vplayer-vol:focus-within .nf-vplayer-volrange { width: 80px; margin-left: 6px; }
.nf-vplayer-volrange::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 10px; height: 10px;
	background: #fff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: -100px 0 0 100px var(--nf-red, #e50914);
}
.nf-vplayer-volrange::-moz-range-thumb {
	width: 10px; height: 10px; background: #fff; border: 0; border-radius: 50%; cursor: pointer;
}

.nf-vplayer-time {
	color: #a1a1aa;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	margin-left: 8px;
	white-space: nowrap;
	font-weight: 500;
}

.nf-vplayer-menu { position: relative; }
#vpQualityBtn,
#vpSubtitleBtn {
	width: auto;
	padding: 0 12px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}
#vpQualityBtn:hover,
#vpSubtitleBtn:hover {
	background: linear-gradient(135deg, rgba(229, 9, 20, 0.2) 0%, rgba(229, 9, 20, 0.05) 100%) !important;
	border-color: rgba(229, 9, 20, 0.5) !important;
}

/* Dropdown menus as shiny liquid glass drop capsules */
.nf-vplayer-pop {
	position: absolute;
	right: 0; bottom: 48px;
	background: linear-gradient(135deg, rgba(15, 15, 20, 0.85) 0%, rgba(10, 10, 12, 0.75) 100%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	padding: 6px;
	min-width: 150px;
	display: flex; flex-direction: column; gap: 3px;
	box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.08), 0 15px 40px rgba(0,0,0,0.75);
	z-index: 8;
	transform-origin: bottom right;
	animation: popScale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes popScale {
	from { transform: scale(0.9); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
.nf-vplayer-pop button {
	background: transparent;
	border: 0;
	color: #d4d4d8;
	text-align: left;
	padding: 8px 14px;
	font-size: 13px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s ease;
	font-weight: 500;
}
.nf-vplayer-pop button:hover { 
	background: rgba(229, 9, 20, 0.12); 
	color: var(--nf-red, #e50914); 
}
.nf-vplayer-pop button.is-active { 
	color: var(--nf-red, #e50914) !important; 
	background: rgba(229, 9, 20, 0.06);
	font-weight: 700; 
}

.nf-report-box {
margin-top: 18px;
padding: 18px;
background: rgba(20,20,20,.55);
border: 1px solid var(--nf-border);
border-radius: 8px;
}

.nf-report-sub {
margin: 0 0 14px;
color: #a3a3a8;
font-size: 13px;
}

.nf-report-form {
display: flex;
flex-direction: column;
gap: 12px;
}

.nf-report-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 12px;
}

.nf-report-grid select,
.nf-report-grid textarea {
width: 100%;
background: rgba(0,0,0,.45);
border: 1px solid var(--nf-border);
border-radius: 6px;
color: #f5f5f7;
padding: 10px 12px;
font-family: inherit;
font-size: 14px;
outline: none;
}

.nf-report-grid select:focus,
.nf-report-grid textarea:focus {
border-color: var(--nf-red);
background: rgba(0,0,0,.62);
}

.nf-report-grid textarea {
resize: vertical;
min-height: 84px;
}

.nf-report-context {
color: #a3a3a8;
font-size: 12px;
}

.nf-report-actions {
display: flex;
justify-content: flex-start;
}

.nf-report-status {
min-height: 20px;
font-size: 13px;
color: #a3a3a8;
}

.nf-report-status.is-success {
color: #46d369;
}

.nf-report-status.is-error {
color: #ff7782;
}

@media (max-width: 760px) {
.nf-report-grid {
grid-template-columns: 1fr;
}
}

.nf-vplayer-help {
display: flex; flex-wrap: wrap; gap: 6px 14px;
align-items: center;
color: #6e6e73; font-size: 12px;
margin-top: 14px;
padding: 10px 14px;
background: rgba(20,20,20,.5);
border: 1px solid var(--nf-border);
border-radius: 6px;
}
.nf-vplayer-help kbd {
display: inline-block;
background: #2a2a2e;
color: #e5e5e5;
border: 1px solid #444;
border-bottom-width: 2px;
border-radius: 3px;
padding: 1px 6px;
font-size: 11px;
font-family: inherit;
margin: 0 2px;
}

/* ===========================================================
 *  Comments
 * =========================================================== */
.nf-comments-section { margin-top: 32px; }
.nf-comments-count {
	display: inline-block;
	margin-left: 6px;
	font-size: 14px;
	color: #6e6e73;
	font-weight: 500;
	vertical-align: middle;
}

.nf-comments-form {
	display: flex;
	gap: 14px;
	background: rgba(20,20,20,.55);
	border: 1px solid var(--nf-border);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 18px;
}
.nf-comments-avatar {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e50914, #b00710);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
}
.nf-comments-form-body { flex: 1; min-width: 0; }
.nf-comments-form-body textarea {
	width: 100%;
	background: rgba(0,0,0,.4);
	border: 1px solid var(--nf-border);
	border-radius: 6px;
	color: #f5f5f7;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	min-height: 70px;
	outline: none;
	transition: border-color .15s, background .15s;
}
.nf-comments-form-body textarea:focus { border-color: var(--nf-red); background: rgba(0,0,0,.6); }
.nf-comments-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	gap: 12px;
	flex-wrap: wrap;
}
.nf-comments-tip { color: #6e6e73; font-size: 12px; }
.nf-comments-tip strong { color: #d4d4d8; font-weight: 600; }
.nf-comments-actions { display: flex; gap: 8px; }

.nf-comments-sort { display: flex; gap: 6px; margin-bottom: 12px; }
.nf-comments-sort button {
	background: transparent;
	border: 0;
	color: #6e6e73;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	transition: background .12s, color .12s;
}
.nf-comments-sort button:hover { color: #fff; background: rgba(255,255,255,.06); }
.nf-comments-sort button.is-active { color: #fff; background: rgba(255,255,255,.1); }

.nf-comments-status {
	margin-bottom: 14px;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.45;
	border: 1px solid var(--nf-border);
	background: rgba(20,20,20,.5);
	color: #d4d4d8;
}
.nf-comments-status.is-success { border-color: rgba(70,211,105,.35); color: #dafbe4; }
.nf-comments-status.is-error { border-color: rgba(229,9,20,.35); color: #ffd1d5; }
.nf-comments-status.is-info { border-color: rgba(84,185,197,.32); color: #d4eef2; }

.nf-comments-list { display: flex; flex-direction: column; gap: 14px; }
.nf-comment {
	display: flex;
	gap: 12px;
	padding: 14px;
	background: rgba(20,20,20,.4);
	border: 1px solid var(--nf-border);
	border-radius: 8px;
	transition: background .15s;
}
.nf-comment:hover { background: rgba(20,20,20,.6); }
.nf-comment.is-reply { background: rgba(14,14,14,.48); }
.nf-comment.is-hidden { opacity: .82; }
.nf-comment-body { flex: 1; min-width: 0; }
.nf-comment-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}
.nf-comment-name { font-weight: 700; color: #f5f5f7; font-size: 14px; }
.nf-comment-time { font-size: 12px; color: #6e6e73; }
.nf-comment-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	color: #d4d4d8;
	font-size: 11px;
	font-weight: 700;
}
.nf-comment-reply-to { color: #9fb6ff; font-size: 12px; margin-bottom: 6px; }
.nf-comment-text {
	color: #d4d4d8;
	font-size: 14px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.nf-comment-hidden-text { color: #8c8c8c; font-style: italic; }
.nf-comment-actions { margin-top: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.nf-comment-actions button {
	background: transparent;
	border: 0;
	color: #6e6e73;
	font-size: 12px;
	padding: 4px 8px;
	cursor: pointer;
	border-radius: 3px;
	transition: background .12s, color .12s;
}
.nf-comment-actions button:hover { color: #fff; background: rgba(255,255,255,.08); }
.nf-comment-actions button.is-danger:hover { color: #ffb4bc; background: rgba(229,9,20,.12); }
.nf-comment-actions button.is-warn:hover { color: #ffd66e; background: rgba(245,197,24,.12); }
.nf-comment-children {
	margin-top: 12px;
	padding-left: 18px;
	border-left: 1px solid rgba(255,255,255,.08);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nf-comments-empty {
	text-align: center;
	padding: 32px 16px;
	color: #6e6e73;
	font-size: 14px;
	background: rgba(20,20,20,.3);
	border: 1px dashed var(--nf-border);
	border-radius: 8px;
}

@media (max-width: 600px) {
.nf-vplayer-top { padding: 10px 14px; }
.nf-vplayer-bottom { padding: 8px 14px 12px; }
.nf-vplayer-btn { width: 34px; height: 34px; }
.nf-vplayer-btn svg { width: 19px; height: 19px; }
.nf-vplayer-time { font-size: 12px; }
.nf-vplayer-vol .nf-vplayer-volrange { display: none; }
.nf-vplayer-help { font-size: 11px; }
.nf-vplayer-center { width: 64px; height: 64px; }
.nf-vplayer-center svg { width: 30px; height: 30px; }
.nf-comments-form { flex-direction: column; }
}
.nf-episode-search {
	margin-bottom: 12px;
}
.nf-episode-search input {
	width: min(100%, 360px);
	background: var(--nf-bg-2);
	border: 1px solid var(--nf-border);
	color: #fff;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
	outline: none;
}
.nf-episode-search input:focus {
	border-color: rgba(255,255,255,.32);
}
.nf-episode-search-empty {
	margin-top: 10px;
	color: #9ca3af;
	font-size: 13px;
}

.nf-search-history {
	display: grid;
	gap: 10px;
	margin: -6px 0 18px;
	padding: 14px 16px;
	background: rgba(255,255,255,.03);
	border: 1px solid var(--nf-border);
	border-radius: 10px;
}
.nf-search-history-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: #d4d4d8;
}
.nf-search-history-head button {
	background: transparent;
	border: 0;
	color: #9ca3af;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 0;
}
.nf-search-history-head button:hover {
	color: #fff;
}
.nf-search-history-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.nf-history-chip {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	color: #f4f4f5;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	transition: background .15s, border-color .15s, transform .15s;
}
.nf-history-chip:hover {
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.18);
	transform: translateY(-1px);
}
.nf-rating-section { margin-top: 28px; }
.nf-rating-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 18px 20px;
	background: rgba(20,20,20,.58);
	border: 1px solid var(--nf-border);
	border-radius: 10px;
}
.nf-rating-stars {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.nf-rating-star {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.04);
	color: #9ca3af;
	font-size: 24px;
	font-weight: 700;
	transition: transform .15s, background .15s, color .15s, border-color .15s;
}
.nf-rating-star:hover {
	transform: translateY(-1px);
	color: #fff1b8;
	border-color: rgba(245, 197, 24, .55);
	background: rgba(245, 197, 24, .12);
}
.nf-rating-star.is-active,
.nf-rating-star.is-filled {
	color: #f5c518;
	border-color: rgba(245, 197, 24, .6);
	background: rgba(245, 197, 24, .14);
}
.nf-rating-meta {
	display: grid;
	gap: 6px;
	min-width: 220px;
}
.nf-rating-summary {
	color: #f5c518;
	font-size: 14px;
	font-weight: 700;
}
.nf-rating-average {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: #fff;
}
.nf-rating-average strong {
	font-size: 32px;
	line-height: 1;
}
.nf-rating-average span,
.nf-rating-count,
.nf-rating-user {
	color: #a3a3a8;
	font-size: 13px;
}
@media (max-width: 540px) {
	.nf-rating-star {
		width: 42px;
		height: 42px;
		font-size: 21px;
	}
}
.nf-search-suggest {
	margin: -6px 0 18px;
	background: rgba(12,12,16,.94);
	border: 1px solid var(--nf-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.nf-search-suggest-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9ca3af;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.nf-search-suggest-list {
	display: grid;
}
.nf-search-suggest-item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid rgba(255,255,255,.04);
}
.nf-search-suggest-item:first-child { border-top: 0; }
.nf-search-suggest-item:hover { background: rgba(255,255,255,.05); }
.nf-search-suggest-thumb {
	width: 56px;
	height: 74px;
	border-radius: 8px;
	object-fit: cover;
	background: #18181b;
}
.nf-search-suggest-thumb-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #71717a;
	font-size: 11px;
}
.nf-search-suggest-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}
.nf-search-suggest-title {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nf-search-suggest-meta {
	color: #9ca3af;
	font-size: 12px;
}
.nf-search-suggest-tag {
	color: #f5c518;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.nf-search-suggest-empty {
	padding: 18px 16px;
	color: #9ca3af;
	font-size: 13px;
}
@media (max-width: 540px) {
	.nf-search-suggest-item {
		grid-template-columns: 48px 1fr;
	}
	.nf-search-suggest-thumb {
		width: 48px;
		height: 64px;
	}
	.nf-search-suggest-tag {
		display: none;
	}
}
.nf-vplayer-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
	transform: none !important;
}
.nf-vplayer-btn:disabled:hover {
	background: transparent;
}
.nf-vplayer-menu .nf-vplayer-btn span {
	display: inline-block;
	max-width: 72px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 760px) {
	.nf-vplayer {
		margin-bottom: 18px;
		border-radius: 10px;
	}
	.nf-vplayer-bottom {
		margin: 10px 16px !important;
	}
	.nf-vplayer-title {
		max-width: 100%;
		font-size: 14px;
	}
	.nf-vplayer-vol,
	.nf-vplayer-volrange {
		display: none !important; /* Hide volume controls on touch screens */
	}
	.nf-vplayer-row {
		flex-direction: row !important; /* Keep a clean single row */
		justify-content: space-between !important;
		align-items: center !important;
		gap: 4px !important;
	}
	.nf-vplayer-row-left,
	.nf-vplayer-row-right {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		flex-wrap: nowrap !important; /* Prevent vertical wrapping */
		gap: 6px !important;
	}
	.nf-vplayer-row-right {
		justify-content: flex-end !important;
	}
	#vpRateBtn,
	#vpQualityBtn,
	#vpSubtitleBtn {
		min-width: 52px;
		padding: 0 8px;
	}
	.nf-vplayer-pop {
		right: 0;
		left: auto;
		min-width: 140px;
	}
	.nf-vplayer-help {
		justify-content: center;
	}
}

@media (max-width: 560px) {
	#vpPip {
		display: none !important; /* Hide PiP on mobile phones */
	}
	.nf-vplayer-bottom {
		padding: 6px 0 !important;
		margin: 6px 12px !important;
	}
	.nf-vplayer-row-left,
	.nf-vplayer-row-right {
		gap: 4px !important;
	}
	.nf-vplayer-btn {
		width: 32px;
		height: 32px;
	}
	#vpRateBtn,
	#vpQualityBtn,
	#vpSubtitleBtn {
		width: auto;
		min-width: 38px !important;
		padding: 0 4px !important;
		font-size: 11px;
	}
	.nf-vplayer-time {
		font-size: 11px !important;
		margin-left: 2px !important;
	}
	.nf-vplayer-pop {
		bottom: 40px !important;
		min-width: 130px !important;
	}
	.nf-vplayer-pop button {
		padding: 6px 10px !important;
		font-size: 12px !important;
	}
	/* Responsive Intro Loader */
	.nf-player-intro-logo {
		font-size: 24px !important;
		letter-spacing: 1.5px !important;
		margin-bottom: 16px !important;
	}
	.nf-player-intro-loader {
		width: 160px !important;
	}
}

/* ============================ Player Intro Overlay ======================= */
.nf-player-intro {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #000;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.nf-player-intro:not([hidden]) {
	display: flex;
}
.nf-player-intro.is-active {
	opacity: 1;
	pointer-events: all;
}
.nf-player-intro-content {
	text-align: center;
	width: 100%;
	max-width: 400px;
	padding: 20px;
}
.nf-player-intro-logo {
	font-size: 32px;
	letter-spacing: 2px;
	margin-bottom: 24px;
	animation: intro-zoom 3s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}
.nf-player-intro-logo .nf-brand-rogue {
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	color: var(--nf-red, #e50914);
	text-shadow: 0 0 15px rgba(229, 9, 20, 0.4);
}
.nf-player-intro-logo .nf-brand-popcorn {
	font-family: 'Poppins', sans-serif;
	font-weight: 200;
	color: #fff;
	letter-spacing: 4px;
	margin-left: 2px;
}
.nf-player-intro-loader {
	width: 220px;
	height: 3px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	margin: 0 auto;
	overflow: hidden;
	box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.nf-player-intro-bar {
	height: 100%;
	width: 0;
	background: var(--nf-red, #e50914);
	border-radius: 10px;
	box-shadow: 0 0 8px var(--nf-red, #e50914);
	animation: intro-loading-bar 2.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes intro-zoom {
	0% {
		transform: scale(0.85);
		filter: blur(6px);
		opacity: 0;
	}
	15% {
		transform: scale(1);
		filter: blur(0);
		opacity: 1;
	}
	85% {
		transform: scale(1.06);
		opacity: 1;
	}
	100% {
		transform: scale(1.12);
		filter: blur(2px);
		opacity: 0;
	}
}

@keyframes intro-loading-bar {
	0% { width: 0%; }
	100% { width: 100%; }
}