/* ==========================================================================
   VoxPlus — الألوان مأخوذة من StreamVid
   ========================================================================== */

:root {
	--bg: #00031c;
	--surface: #191c33;
	--surface-2: #31344b;
	--primary: #7b61ff;
	--primary-hover: #6c52ee;
	--gradient: linear-gradient(90deg, #7b61ff 0%, #a35bff 100%);
	/* الأزرار مثل StreamVid: بنفسجي #6c52ee مع وهج أزرق في الزاوية وبنفسجي فاتح على الطرف */
	--btn-gradient: linear-gradient(248.28deg, #9e61ff 9.54%, rgba(142, 97, 255, 0) 32.8%), radial-gradient(81.71% 279.87% at -16.57% -92%, #619bff 28.69%, rgba(205, 219, 248, 0) 69.54%), linear-gradient(#6c52ee, #6c52ee);
	--heading: #ffffff;
	--text: #cccdd2;
	--muted: #a1a0a1;
	--border: #292c41;
	--success: #2fbf71;
	--danger: #ff5c6c;

	--font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	--radius: 6px;
	--radius-sm: 6px;
	--container: 100%; /* امتداد كامل مثل StreamVid، والهامش من --gutter */
	--gutter: clamp(16px, 4.86vw, 70px);
	--header-h: 80px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	color-scheme: dark;
}

/* ---------- الأساسيات ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
video,
iframe {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

a:hover {
	color: var(--heading);
}

h1,
h2,
h3 {
	color: var(--heading);
	line-height: 1.25;
	margin: 0;
	font-weight: 700;
}

p {
	margin: 0;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.icon {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
}

/* الأسهم تنقلب حسب اتجاه الصفحة */
[dir="ltr"] .icon-chev-l,
[dir="ltr"] .icon-chev-r {
	transform: scaleX(-1);
}

.muted {
	color: var(--muted);
}

.dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
	display: inline-block;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- الأزرار ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	white-space: nowrap;
	transition: transform 0.2s var(--ease), background 0.2s, box-shadow 0.2s, color 0.2s, opacity 0.2s;
}

.btn:active {
	transform: scale(0.97);
}

.btn-primary {
	background: var(--btn-gradient);
	color: #fff;
}

.btn-primary:hover {
	color: #fff;
	box-shadow: 0 15px 40px -8px rgba(158, 97, 255, 0.5);
	transform: translateY(-3px);
}

.btn-primary:active {
	transform: translateY(-1px) scale(0.98);
}

.btn-ghost {
	background: rgba(255, 255, 255, 0.1);
	color: var(--heading);
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.18);
}

/* زر نصي بدون خلفية (مثل "Watch Later") */
.btn-text {
	background: none;
	color: var(--heading);
	padding-inline: 14px;
}

.btn-text:hover {
	color: var(--primary);
}

.btn-text.is-active {
	color: var(--primary);
}

/* زر مربع بأيقونة فقط (مثل زر + في StreamVid) */
.btn-square {
	width: 52px;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	color: var(--heading);
}

.btn-square:hover {
	background: rgba(255, 255, 255, 0.18);
}

.btn-square.is-active {
	background: rgba(123, 97, 255, 0.3);
}

.btn-square .btn-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.btn-block {
	width: 100%;
}

.btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--heading);
	transition: background 0.2s, opacity 0.2s;
}

.icon-btn:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* ---------- الهيدر ---------- */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	height: var(--header-h);
	background: linear-gradient(to bottom, rgba(0, 3, 28, 0.8), transparent);
	transition: background 0.3s;
}

.site-header.is-scrolled {
	background: rgba(0, 3, 28, 0.94);
	backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 var(--border);
}

.header-inner {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 40px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 9px; /* مقاسات الشعار مثل StreamVid: أيقونة بارتفاع 40 وحروف كبيرة بارتفاع 20 */
	flex-shrink: 0;
	color: var(--heading);
}

.brand:hover {
	color: var(--heading);
}

.brand-mark {
	flex: none;
	width: 37px;
	height: 40px;
}

.brand-logo {
	max-height: 40px;
	width: auto;
}

.brand-text {
	font-size: 28.5px;
	font-weight: 700;
	letter-spacing: -0.3px;
	direction: ltr;
}

.main-nav .menu {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav a {
	font-weight: 600;
	font-size: 15px;
	color: var(--heading);
	position: relative;
	padding-block: 8px;
}

.main-nav a:hover {
	color: var(--primary);
}

.header-tools {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

/* البحث: مربع ظاهر بإطار */
.header-search {
	display: flex;
	align-items: center;
	width: 280px;
	height: 46px;
	padding-inline: 4px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	background: rgba(0, 3, 28, 0.25);
	transition: border-color 0.2s, background 0.2s;
}

.header-search:focus-within {
	border-color: var(--primary);
	background: rgba(0, 3, 28, 0.6);
}

.header-search .icon-btn {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.header-search .icon-btn:hover {
	background: none;
}

.header-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	outline: 0;
	font-size: 14px;
}

.header-search input::placeholder {
	color: var(--text);
}

.header-search input::-webkit-search-cancel-button {
	display: none;
}

/* ---------- البحث الفوري (مثل StreamVid) ---------- */

.header-search {
	position: relative;
}

/* أثناء البحث: دائرة تحميل مكان أيقونة العدسة */
.search-loader {
	position: absolute;
	inset-inline-start: 13px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-top-color: var(--primary);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.header-search.is-loading .search-loader {
	opacity: 1;
	animation: vx-spin 0.7s linear infinite;
}

.header-search.is-loading .js-search-toggle {
	opacity: 0;
}

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

.search-drop {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 60;
	width: max(100%, 320px);
	margin-top: 10px;
	padding: 20px;
	background: rgba(0, 3, 28, 0.4);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 5px;
	box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.header-search.is-searching .search-drop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.search-drop__body {
	max-height: 400px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--surface-2) transparent;
	margin-inline-end: -8px;
	padding-inline-end: 8px;
}

.search-drop__hint {
	margin: 0;
	padding: 0 10px;
	font-size: 13px;
	color: var(--text);
}

.search-group {
	animation: vx-fade-up 0.5s both;
}

.search-group + .search-group {
	margin-top: 6px;
}

@keyframes vx-fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

.search-group__title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 700;
	color: var(--heading);
}

.search-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	border-radius: 5px;
	outline-offset: 3px;
}

.search-item__thumb {
	flex: none;
	width: 65px;
	aspect-ratio: 1;
	border-radius: 5px;
	overflow: hidden;
	background: var(--surface-2);
}

.search-item--person .search-item__thumb {
	border-radius: 50%;
}

.search-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease);
}

.search-item:hover .search-item__thumb img,
.search-item:focus-visible .search-item__thumb img {
	transform: scale(1.08);
}

.search-item__body {
	display: grid;
	gap: 3px;
	min-width: 0;
	font-size: 12px;
	line-height: 16px;
}

.search-item__sub {
	color: var(--primary);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-item__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--heading);
	font-weight: 700;
	transition: color 0.2s;
}

.search-item:hover .search-item__title,
.search-item:focus-visible .search-item__title {
	color: var(--primary);
}

.search-item__meta {
	color: var(--text);
}

.search-item__meta i {
	margin-inline: 5px;
	font-style: normal;
	opacity: 0.6;
}

.search-drop__all {
	display: block;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px dashed rgba(255, 255, 255, 0.12);
	font-size: 13px;
	font-weight: 700;
	color: var(--primary);
	text-align: center;
}

.search-drop__all:hover,
.search-drop__all:focus-visible {
	color: var(--heading);
}

.menu-toggle {
	display: none;
}

.account-menu {
	position: relative;
}

.avatar-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: none;
	color: var(--heading);
	transition: border-color 0.2s, color 0.2s;
}

.avatar-btn:hover,
.avatar-btn[aria-expanded="true"] {
	border-color: var(--primary);
	color: var(--primary);
}

.avatar-btn .icon {
	width: 20px;
	height: 20px;
}

.dropdown {
	position: absolute;
	inset-inline-end: 0;
	top: 100%;
	z-index: 50;
}

/* قائمة الحساب (مثل StreamVid): خلفية شفافة مضببة بإطار بنفسجي، رأس متدرّج، وروابط بأيقونات.
   تفتح بمرور الماوس، أو بالضغط (is-open) للجوال ولوحة المفاتيح. */
.account-dropdown {
	min-width: 240px;
	margin-top: 12px;
	overflow: hidden;
	background: rgba(0, 3, 28, 0.85);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	border: 2px solid #9e61ff;
	border-radius: 10px;
	box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

/* جسر شفاف يغطي الفراغ بين الزر والقائمة (بعرض القائمة)، عشان ما تقفل والماوس نازل لها.
   على العنصر الأب لأن القائمة نفسها تقص اللي يطلع برا حدودها. */
.account-menu.is-open::after {
	content: "";
	position: absolute;
	top: 100%;
	inset-inline-end: 0;
	width: 260px;
	height: 16px;
}

.account-menu.is-open .account-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.dropdown-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px;
	background:
		linear-gradient(248deg, #9e61ff 9.5%, rgba(142, 97, 255, 0) 33%),
		radial-gradient(82% 280% at -17% -92%, #619bff 29%, rgba(205, 219, 248, 0) 70%),
		#6c52ee;
	color: #fff;
}

.dropdown-head .viewer-avatar,
.dropdown-head__icon {
	flex: none;
	width: 36px;
	height: 36px;
	font-size: 16px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
	border-radius: 8px; /* نفس شكل صور ملفات المشاهدين في الموقع */
}

.dropdown-head__icon {
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.15);
}

.dropdown-head__icon .icon {
	width: 20px;
	height: 20px;
}

.dropdown-head__text {
	display: grid;
	min-width: 0;
	line-height: 1.35;
}

.dropdown-head strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff;
	font-size: 16px;
}

.dropdown-head small {
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
}

.dropdown-links {
	display: grid;
	gap: 15px;
	padding: 20px;
	font-size: 14px;
	line-height: 19px;
}

.dropdown-links a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--heading);
	transition: color 0.2s;
}

.dropdown-links a:hover,
.dropdown-links a.is-active {
	color: var(--primary);
}

.dropdown-links .icon {
	flex: none;
	width: 20px;
	height: 20px;
}

/* ---------- الواجهة (Hero) ---------- */

.hero {
	position: relative;
	min-height: clamp(560px, 72vh, 760px);
	display: grid;
	overflow: hidden;
	isolation: isolate;
}

.hero-slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s var(--ease), visibility 0.9s;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* السحب (مثل StreamVid): الشريحة الجارة تظهر جنب الحالية وهي تتحرك */
.js-hero {
	touch-action: pan-y;
}

.hero.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.hero.is-dragging a {
	pointer-events: none;
}

.hero-slide.is-peek {
	opacity: 1;
	visibility: visible;
	transition: none;
	z-index: 1;
}

.hero.no-fade .hero-slide {
	transition: none;
}

.hero img {
	-webkit-user-drag: none;
}

.hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transform: scale(1.05);
	transition: transform 8s linear;
}

.hero-slide.is-active .hero-bg {
	transform: scale(1);
}

/* تظليل من جهة النص ومن الأسفل */
/* نفس تظليل StreamVid: من تحت لين ثلث الارتفاع، ومن جهة النص لين ثلاث أرباع العرض */
.hero-shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(0deg, var(--bg) 0%, rgba(0, 3, 28, 0.7) 15.62%, rgba(0, 3, 28, 0) 31.32%),
		linear-gradient(270deg, var(--bg) 6.03%, rgba(0, 3, 28, 0) 78.64%);
}

[dir="ltr"] .hero-shade {
	background:
		linear-gradient(0deg, var(--bg) 0%, rgba(0, 3, 28, 0.7) 15.62%, rgba(0, 3, 28, 0) 31.32%),
		linear-gradient(90deg, var(--bg) 6.03%, rgba(0, 3, 28, 0) 78.64%);
}

.hero-content {
	padding-top: calc(var(--header-h) + 48px);
	padding-bottom: 96px;
	display: grid;
	gap: 22px;
	justify-items: start;
}

.hero-content > * {
	max-width: 660px;
}

.hero-genres {
	font-size: 15px;
	font-weight: 700;
	color: var(--primary);
	text-transform: uppercase;
	margin-bottom: -6px;
}

.hero-genres a {
	color: var(--primary);
}

.hero-genres a:hover {
	color: var(--heading);
}

.hero-title {
	font-size: clamp(38px, 5.2vw, 68px);
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.15;
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	color: var(--heading);
	font-size: 17px;
}

.sep {
	color: var(--muted);
	font-weight: 700;
}

.hero-text {
	color: var(--text);
	font-size: 17px;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero--single .hero-text {
	-webkit-line-clamp: 5;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.hero-bars {
	display: flex;
	width: min(220px, 40vw);
	height: 2px;
	background: rgba(255, 255, 255, 0.35);
}

.hero-bar {
	flex: 1;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	position: relative;
}

/* منطقة ضغط أكبر من الخط نفسه */
.hero-bar::after {
	content: "";
	position: absolute;
	inset: -10px 0;
}

.hero-bar.is-active {
	background: var(--primary);
}

.hero--single {
	min-height: clamp(560px, 78vh, 800px);
}

/* صفحة المسلسل (مثل StreamVid v3): شريط التريلر بس، بارتفاع 576، والصناديق تطلع فوق آخره بـ 150 */
.hero--banner {
	min-height: 0;
	height: 576px;
}

.hero--banner .hero-controls {
	bottom: 186px; /* فوق الجزء اللي تغطيه الصناديق */
	padding-inline: 32px;
}

/* ---------- الشارات والتقييم ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	background: #7c3aed; /* مثل شارات StreamVid (Sub) */
	direction: ltr;
}

.badge--orange {
	background: #e07100;
}

.badge--dark {
	background: #0a0000;
}

.badge--green {
	background: #16a34a;
}

.badge--trend {
	background: #ea580c;
}

.age {
	/* مثل StreamVid: شريحة شفافة بيضاء جنب المدة (TV-MA، +13…) */
	display: inline-flex;
	align-items: center;
	padding: 0 7px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--heading);
	font-size: 14px;
	font-weight: 500;
	line-height: 23px;
	direction: ltr;
	unicode-bidi: isolate;
}

/* بدون نقطة فاصلة قبلها، وبمسافة 15 مثل الديمو */
.hero-meta .sep:has(+ .age) {
	display: none;
}

.hero-meta .age {
	margin-inline-start: 3px;
}

.rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--heading);
}

.rating .icon {
	color: var(--primary);
	width: 1em;
	height: 1em;
}

/* ---------- الصفوف الأفقية ---------- */

.rows {
	position: relative;
	padding-bottom: 24px;
}

.row {
	margin-block: 0 56px;
}

.row-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.row-title,
.section-title {
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 700;
}

.row-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--heading);
}

.row-more .icon {
	width: 16px;
	height: 16px;
}

.row-more:hover {
	color: var(--primary);
}

.row-more:hover .icon {
	animation: arrow-nudge 1s ease both;
}

@keyframes arrow-nudge {
	0%, 100% { transform: none; opacity: 1; }
	30% { transform: translateX(-6px); opacity: 0; }
	31% { transform: translateX(8px); opacity: 0; }
	60% { transform: none; opacity: 1; }
}

[dir="ltr"] .row-more:hover .icon {
	animation-name: arrow-nudge-ltr;
}

@keyframes arrow-nudge-ltr {
	0%, 100% { transform: none; opacity: 1; }
	30% { transform: translateX(6px); opacity: 0; }
	31% { transform: translateX(-8px); opacity: 0; }
	60% { transform: none; opacity: 1; }
}

.row-viewport {
	position: relative;
}

.row-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(150px, 15.4vw, 222px);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	padding-inline: var(--gutter);
	padding-block: 4px 8px;
	scrollbar-width: none;
}

.row-track::-webkit-scrollbar {
	display: none;
}

/* السحب بالماوس */
@media (hover: hover) and (pointer: fine) {
	.row-track {
		cursor: grab;
	}
}

.row-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

.row-track.is-dragging a,
.row-track.is-dragging img {
	pointer-events: none;
}

.row-track img {
	-webkit-user-drag: none;
	user-select: none;
}

.row--landscape .row-track {
	grid-auto-columns: clamp(240px, 20vw, 290px);
}

.row--person .row-track {
	grid-auto-columns: clamp(110px, 9.5vw, 140px);
	gap: 28px;
	/* مساحة لارتفاع البطاقة عند المرور */
	padding-top: 16px;
	margin-top: -12px;
}

.row-item {
	scroll-snap-align: start;
}

/* أسهم الصف: لسان شفاف على الحافة */
.row-arrow {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 8px;
	width: 48px;
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	color: #fff;
	background: rgba(0, 3, 28, 0.55);
	opacity: 0;
	transition: opacity 0.25s, background 0.2s;
}

.row-prev {
	inset-inline-start: 0;
}

.row-next {
	inset-inline-end: 0;
}

.row-arrow:hover {
	background: rgba(0, 3, 28, 0.8);
}

.row-viewport:hover .row-arrow:not(:disabled) {
	opacity: 1;
}

.row-arrow:disabled {
	pointer-events: none;
}

.row-arrow .icon {
	width: 28px;
	height: 28px;
}

.row--person .row-arrow {
	bottom: 52px;
}

/* ---------- البطاقة ---------- */

.card {
	position: relative;
	min-width: 0;
}

.card-media {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
}

.card--landscape .card-media {
	aspect-ratio: 16 / 10;
}

.card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 3, 28, 0.45);
	opacity: 0;
	transition: opacity 0.3s;
}

.card:hover .card-media img {
	transform: scale(1.05);
}

.card:hover .card-media::after {
	opacity: 1;
}

.card-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 16px;
	text-align: center;
	font-weight: 700;
	color: var(--heading);
	background:
		radial-gradient(circle at 30% 20%, rgba(123, 97, 255, 0.45), transparent 60%),
		linear-gradient(160deg, var(--surface-2), var(--surface));
}

.badges {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 1;
	display: flex;
	gap: 6px;
}

.card-play {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--gradient);
	color: #fff;
	transform: translate(-50%, -50%) scale(0.6);
	opacity: 0;
	transition: transform 0.3s var(--ease), opacity 0.3s;
}

.card-play .icon {
	width: 22px;
	height: 22px;
	margin-inline-start: 3px;
}

[dir="rtl"] .card-play .icon {
	margin-inline-start: 0;
	margin-inline-end: 3px;
}

.card:hover .card-play,
.episode:hover .card-play {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.card-body {
	padding-top: 14px;
	display: grid;
	gap: 6px;
}

.card-title {
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-title a {
	transition: color 0.25s;
}

.card-title a:hover {
	color: var(--primary);
}

.card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
	color: var(--text);
}

.card-facts {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
}

.card-meta .age {
	flex-shrink: 0;
	font-size: 12px;
	padding: 1px 6px;
}

.card-genres {
	font-size: 14px;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* بطاقة الممثل */
.person-card {
	display: grid;
	justify-items: center;
	gap: 4px;
	text-align: center;
	transition: transform 0.35s var(--ease);
}

.person-card:hover {
	transform: translateY(-12px);
}

.person-photo {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--surface);
	border: 2px solid var(--primary); /* إطار بنفسجي مثل الديمو */
	margin-bottom: 8px;
	transition: border-color 0.3s, box-shadow 0.3s;
	position: relative;
}

.person-card:hover .person-photo {
	box-shadow: 0 12px 28px -10px rgba(123, 97, 255, 0.75);
}

.person-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.person-card:hover .person-photo {
	border-color: var(--primary);
}

.placeholder-initial {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 2.2em;
	font-weight: 700;
	color: var(--heading);
	background: linear-gradient(160deg, var(--surface-2), var(--surface));
}

/* اسم الممثل تحت صورته: مثل الديمو (١٦ عريض، سطر واحد) */
.person-name {
	max-width: 100%;
	overflow: hidden;
	color: var(--heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	white-space: nowrap;
	text-overflow: ellipsis;
	unicode-bidi: plaintext; /* الاسم الإنجليزي الطويل ينقص من آخره مو من أوله */
}

.person-role {
	font-size: 13px;
	color: var(--muted);
}

/* ---------- أزرار إضافية ---------- */

.btn-sm {
	min-height: 40px;
	padding: 0 16px;
	font-size: 14px;
	gap: 6px;
}

.btn-sm .icon {
	width: 16px;
	height: 16px;
}

.btn-icon {
	width: 40px;
	padding: 0;
}

.btn-icon .icon {
	width: 18px;
	height: 18px;
}

.btn-chip {
	background: rgba(255, 255, 255, 0.12);
	color: var(--heading);
}

.btn-chip:hover,
.btn-chip.is-active {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.btn-chip.js-watchlist {
	min-height: 40px;
	padding: 0 16px;
	font-size: 14px;
	gap: 6px;
}

.btn-chip .icon {
	width: 16px;
	height: 16px;
}

.btn-white {
	background: #fff;
	color: #00031c;
	min-height: 56px;
	padding: 0 36px;
	font-weight: 700;
}

.btn-white:hover {
	background: #e9e6ff;
	color: #00031c;
}

/* "أضف لقائمتي" كشريط أسفل البوستر */
.btn-bar {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	min-height: 44px;
	border-radius: 0;
	font-size: 14px;
	background: rgba(0, 3, 28, 0.75);
	backdrop-filter: blur(6px);
	color: #fff;
	transform: translateY(100%);
	transition: transform 0.3s var(--ease), background 0.2s;
}

.btn-bar .icon {
	width: 16px;
	height: 16px;
}

.btn-bar:hover {
	background: var(--primary);
}

.btn-bar.is-active {
	background: rgba(123, 97, 255, 0.85);
}

.card--poster:hover .btn-bar,
.btn-bar:focus-visible {
	transform: none;
}

.btn-link {
	min-height: auto;
	padding: 0;
	background: none;
	color: var(--primary);
	font-size: 14px;
	gap: 6px;
}

.btn-link .icon {
	width: 16px;
	height: 16px;
}

.btn-link:hover {
	color: var(--primary);
}

/* ---------- قائمة منسدلة في الهيدر ---------- */

.main-nav .menu > li {
	position: relative;
}

.main-nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.main-nav .menu-item-has-children > a .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.3s;
}

/* مثل StreamVid: الرابط يصير بنفسجي والسهم ينقلب لما تمر عليه */
.main-nav .menu-item-has-children:hover > a,
.main-nav .menu-item-has-children:focus-within > a {
	color: var(--primary);
}

.main-nav .menu-item-has-children:hover > a .icon,
.main-nav .menu-item-has-children:focus-within > a .icon {
	transform: rotate(180deg);
}

/* القائمة المنسدلة (مثل StreamVid): خلفية غامقة شفافة تضبّب اللي وراها، إطار بنفسجي،
   تطلع من تحت بـ 15px وتظهر تدريجياً، وفواصل منقطة بين العناصر */
.main-nav .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: -16px;
	z-index: 5;
	min-width: 240px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
	background: rgba(0, 3, 28, 0.8);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	border: 2px solid var(--primary);
	border-radius: 10px;
	box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(15px);
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

/* جسر عشان القائمة ما تختفي بين الرابط والقائمة */
.main-nav .sub-menu::before {
	content: "";
	position: absolute;
	inset: -16px 0 auto;
	height: 16px;
}

.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

/* فواصل منقطة بين الصفوف (عمودين: الفاصل فوق كل عنصر بعد أول صف) */
.main-nav .sub-menu li:nth-child(n + 3) {
	border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.main-nav .sub-menu a {
	display: block;
	padding: 14px 22px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--heading);
	transition: color 0.3s;
}

.main-nav .sub-menu a .sub-label {
	display: inline-block;
	transition: transform 0.3s;
}

.main-nav .sub-menu a:hover,
.main-nav .sub-menu .current-menu-item > a {
	color: var(--primary);
}

.main-nav .sub-menu a:hover .sub-label,
.main-nav .sub-menu .current-menu-item > a .sub-label {
	transform: translateX(-7px);
}

[dir="ltr"] .main-nav .sub-menu a:hover .sub-label,
[dir="ltr"] .main-nav .sub-menu .current-menu-item > a .sub-label {
	transform: translateX(7px);
}

/* "كل التصنيفات" بعرض القائمة تحت */
.main-nav .sub-menu-all {
	grid-column: 1 / -1;
	border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.main-nav .sub-menu-all a {
	color: var(--primary);
	font-weight: 700;
}

/* ---------- الواجهة: فيديو التريلر والتحكم ---------- */

.hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	background: #000;
}

.hero-media .hero-bg {
	z-index: 1;
	transition: transform 8s linear, opacity 0.8s;
}

/* تريلر الخلفية (الواجهة، نافذة البطاقة، نافذة التفاصيل) */
.trailer-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s;
}

.has-video > .trailer-bg,
.has-video .hero-media > .trailer-bg {
	opacity: 1;
}

/* يوتيوب ما يدعم object-fit، فنكبّره لين يغطي. والتكبير الزيادة (1.2) يطلّع شريط العنوان فوق
   وشعار يوتيوب تحت برا الإطار، عشان ما يبان إن الفيديو من يوتيوب. */
.trailer-bg--yt {
	inset: 50% auto auto 50%;
	width: 177.78%;
	height: 177.78%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%) scale(1.2);
}

.hero-media .trailer-bg--yt {
	width: max(100%, 177.78vh);
	height: max(100%, 56.25vw);
}

/* زر الصوت (السماعة) */
.speaker {
	position: relative;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(0, 3, 28, 0.35);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.speaker:hover {
	background: var(--primary);
	border-color: var(--primary);
}

.speaker .icon {
	width: 18px;
	height: 18px;
}

.speaker .icon-volume,
.speaker.is-muted .icon-muted {
	display: block;
}

.speaker .icon-muted,
.speaker.is-muted .icon-volume {
	display: none;
}

.speaker--sm {
	position: absolute;
	z-index: 3;
	bottom: 10px;
	inset-inline-end: 10px;
	width: 32px;
	height: 32px;
}

.hero-slide.has-video .hero-bg {
	opacity: 0;
}

.hero-controls {
	position: absolute;
	inset-inline: 0;
	bottom: 36px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	pointer-events: none;
}

.hero-controls > * {
	pointer-events: auto;
}

.hero-progress {
	position: static;
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--heading);
	font-size: 16px;
}

/* لسان التنقل على حافة الواجهة */
.hero-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 30px;
	height: 76px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(6px);
	color: #fff;
	transform: translateY(-50%);
	transition: background 0.2s, width 0.2s;
}

.hero-arrow:hover {
	background: var(--primary);
	width: 36px;
}

.hero-arrow--prev {
	inset-inline-start: 0;
	border-start-end-radius: 6px;
	border-end-end-radius: 6px;
}

.hero-arrow--next {
	inset-inline-end: 0;
	border-start-start-radius: 6px;
	border-end-start-radius: 6px;
}

.hero-arrow .icon {
	width: 18px;
	height: 18px;
}

/* ---------- مقاسات الصفوف ---------- */

.row--landscape .row-track {
	grid-auto-columns: clamp(240px, 20vw, 288px);
	gap: 10px;
}

.row--landscape-lg .row-track {
	grid-auto-columns: clamp(260px, 21.6vw, 310px);
	gap: 20px;
}

.row--poster .row-track {
	grid-auto-columns: clamp(170px, 20vw, 288px);
	gap: 10px;
}

.row--flip .row-track {
	grid-auto-columns: clamp(150px, 14.3vw, 206px);
	gap: 15px;
}

.card--poster .card-media {
	aspect-ratio: 488 / 680;
}

.card--flip .card-media,
.card--flip .flip {
	aspect-ratio: 288 / 400;
}

.card--landscape .card-media {
	aspect-ratio: 630 / 400;
}

.card-media-link {
	position: absolute;
	inset: 0;
}

.card-sub {
	font-size: 14px;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	overflow: hidden;
}

.card-sub a,
.card-genres a {
	color: var(--text);
}

.card-sub a:hover,
.card-genres a:hover {
	color: #fff;
}

/* زر التشغيل في وسط البوستر: أيقونة دائرية بدون خلفية */
.card--poster .card-play {
	width: 64px;
	height: 64px;
	background: none;
}

.card--poster .card-play .icon {
	width: 64px;
	height: 64px;
	margin: 0;
	stroke-width: 1.4;
}

.card--landscape .card-play {
	display: none;
}

/* ---------- البطاقة المنقلبة ---------- */

.flip {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.6s var(--ease);
}

.card--flip:hover .flip,
.card--flip:focus-within .flip {
	transform: rotateY(180deg);
}

.flip-front,
.flip-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	border-radius: var(--radius);
	overflow: hidden;
}

.flip-back {
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 18px;
	background: var(--surface);
	border: 1px solid var(--border);
}

.flip-title {
	font-size: 17px;
	font-weight: 700;
}

.flip-text {
	flex: 1;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text);
	overflow: hidden;
}

.card--flip > .card-title {
	margin-top: 12px;
}

/* ---------- نافذة البطاقة العريضة ---------- */

.card-pop {
	position: absolute;
	z-index: 40;
	border-radius: 8px;
	overflow: hidden;
	background: var(--surface);
	box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.85);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.2s, transform 0.25s var(--ease);
}

.card-pop.is-open {
	opacity: 1;
	transform: none;
}

.pop-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.pop-media img,
.pop-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}



.pop-body {
	display: grid;
	gap: 8px;
	padding: 16px 18px 18px;
}

.pop-title {
	font-size: 18px;
	font-weight: 700;
}

.pop-meta,
.pop-genres {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	font-size: 14px;
	color: var(--text);
}

.pop-genres a {
	color: var(--text);
}

.pop-genres a:hover {
	color: #fff;
}

.pop-meta .age {
	font-size: 12px;
	padding: 1px 6px;
}

.pop-actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 6px;
}

/* ---------- البانر المميز مع قائمة التريلرات ---------- */

.spotlight {
	position: relative;
	isolation: isolate;
	margin-bottom: 72px;
	padding-block: 90px;
	overflow: hidden;
}

.spotlight-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	opacity: 0;
	transition: opacity 0.6s;
}

.spotlight-bg.is-active {
	opacity: 1;
}

.spotlight::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, var(--bg) 0%, rgba(0, 3, 28, 0.35) 25%, rgba(0, 3, 28, 0.35) 75%, var(--bg) 100%),
		linear-gradient(to left, rgba(0, 3, 28, 0.85), rgba(0, 3, 28, 0.2) 70%);
}

[dir="ltr"] .spotlight::before {
	background:
		linear-gradient(to bottom, var(--bg) 0%, rgba(0, 3, 28, 0.35) 25%, rgba(0, 3, 28, 0.35) 75%, var(--bg) 100%),
		linear-gradient(to right, rgba(0, 3, 28, 0.85), rgba(0, 3, 28, 0.2) 70%);
}

.spotlight-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
}

.spotlight-content {
	display: grid;
	gap: 22px;
	justify-items: start;
}

.spotlight-title {
	font-size: clamp(34px, 3.9vw, 56px);
	font-weight: 700;
}

.spotlight-text {
	font-size: 17px;
	color: var(--text);
	max-width: 590px;
}

.playlist {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 120px;
	aspect-ratio: 635 / 338;
	gap: 0;
	background: rgba(0, 3, 28, 0.85);
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}

.playlist-screen {
	position: relative;
	min-height: 0;
	background: #000;
}

.playlist-main {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
}

.playlist-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.playlist-label {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	background: rgba(0, 3, 28, 0.3);
	transition: background 0.2s;
}

.playlist-main:hover .playlist-label {
	background: rgba(0, 3, 28, 0.5);
}

.playlist-label .icon {
	width: 40px;
	height: 40px;
}

.playlist-embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.playlist-side {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 6px 10px;
	min-height: 0;
}

.playlist-arrow {
	display: grid;
	place-items: center;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
}

.playlist-arrow .icon {
	width: 16px;
	height: 16px;
}

.playlist-thumbs {
	flex: 1;
	display: grid;
	align-content: start;
	gap: 10px;
	overflow-y: auto;
	scrollbar-width: none;
	min-height: 0;
	max-height: 100%;
}

.playlist-thumbs::-webkit-scrollbar {
	display: none;
}

.playlist-thumb {
	aspect-ratio: 16 / 10;
	padding: 0;
	border: 2px solid transparent;
	background: none;
	opacity: 0.7;
	transition: opacity 0.2s, border-color 0.2s;
}

.playlist-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.playlist-thumb:hover {
	opacity: 1;
}

.playlist-thumb.is-active {
	opacity: 1;
	border-color: var(--primary);
}

/* ---------- شبكة المسلسلات ---------- */

.bento-section {
	margin-bottom: 72px;
}

.text-tabs {
	display: flex;
	gap: 26px;
}

.text-tab {
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--heading);
	font-size: 15px;
	font-weight: 600;
}

.text-tab:hover,
.text-tab.is-active {
	color: var(--primary);
}

.bento {
	display: grid;
	grid-template-columns: 2.24fr repeat(var(--small, 3), 1fr);
	grid-auto-rows: clamp(150px, 13.9vw, 200px);
	gap: 20px;
}

.bento--compact {
	grid-template-columns: 2fr repeat(var(--small), 1fr);
	grid-auto-rows: clamp(200px, 20vw, 300px);
}

.bento--compact .bento-item--big {
	grid-row: auto;
}

.bento-item {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 20px 30px;
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
	background: var(--surface);
}

.bento-item--big {
	grid-row: span 2;
}

.bento-item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.5s var(--ease);
}

.bento-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(0, 3, 28, 0.9), rgba(0, 3, 28, 0.05) 60%);
}

.bento-item:hover img {
	transform: scale(1.1);
}

.bento-info {
	display: grid;
	gap: 2px;
}

.bento-title {
	color: var(--heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.bento-meta {
	color: var(--text);
	font-size: 14px;
}

/* ---------- البانرات الإعلانية ---------- */

.promo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 32px;
	border-radius: 2px;
}

.promo-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.promo-text {
	flex: 1;
	display: grid;
	gap: 10px;
	text-align: center;
	justify-items: center;
}

.promo-kicker {
	letter-spacing: 6px;
	font-size: 20px;
	color: var(--heading);
}

.promo-title {
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 600;
	letter-spacing: 10px;
}

.promo-sub {
	font-size: 17px;
	color: var(--heading);
}

/* wide: صورة كاملة بارتفاع 240 */
.promo--wide {
	min-height: 240px;
	padding: 32px 20px;
}

.promo--wide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to left, rgba(0, 3, 28, 0.15), rgba(0, 3, 28, 0.55));
}

.promo--wide .btn-white {
	position: absolute;
	inset-inline-end: 20px;
	top: 50%;
	transform: translateY(-50%);
}

/* card: صندوق داكن بصورة جانبية */
.promo--card {
	min-height: 210px;
	padding: 24px 32px;
	background: linear-gradient(90deg, #1d1650, #191c33 60%);
}

.promo--card .promo-bg {
	opacity: 0.35;
}

.promo-logo {
	width: 180px;
	height: 160px;
	object-fit: contain;
	flex-shrink: 0;
}

.promo--card .promo-title {
	letter-spacing: 0;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
}

/* ---------- الفوتر ---------- */

.site-footer {
	margin-top: 32px;
	padding-top: 56px;
	background: #161934;
}

.footer-top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.4fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 48px;
}

.footer-brand {
	display: grid;
	align-content: start;
	gap: 14px;
}

.footer-label {
	margin-top: 8px;
	font-size: 14px;
	color: var(--muted);
}

.socials {
	display: flex;
	gap: 10px;
}

.socials a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	transition: background 0.2s;
}

.socials a:hover {
	background: var(--primary);
}

.socials .icon {
	width: 17px;
	height: 17px;
}

.app-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.app-badge {
	display: grid;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	background: #000;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	direction: ltr;
	text-align: left;
}

.app-badge small {
	font-size: 10px;
	font-weight: 400;
}

.footer-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 18px;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	font-size: 14px;
}

.footer-col ul.two-cols {
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
}

.footer-col a {
	color: var(--muted);
}

.footer-col a:hover {
	color: #fff;
}

.footer-bottom {
	padding-block: 22px;
	border-top: 1px solid var(--border);
	font-size: 13px;
	color: var(--muted);
}

/* ---------- الشبكة والصفحات ---------- */

.page {
	padding-top: calc(var(--header-h) + 40px);
	padding-bottom: 64px;
	min-height: 70vh;
}

.page-head {
	margin-bottom: 28px;
	display: grid;
	gap: 8px;
}

.page-title {
	font-size: clamp(28px, 3.5vw, 40px);
}

.page-subtitle {
	color: var(--muted);
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(170px, 42vw), 1fr));
	gap: 28px 18px;
}

.grid--people {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chip {
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--border);
	font-size: 14px;
	font-weight: 500;
	transition: background 0.2s, border-color 0.2s;
}

.chip:hover {
	border-color: var(--primary);
}

.chip.is-active {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.filter-form {
	display: flex;
	gap: 8px;
}

select,
.field input,
.form-inline input {
	min-height: 46px;
	padding: 0 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--heading);
	outline: 0;
	transition: border-color 0.2s, box-shadow 0.2s;
}

select {
	padding-inline-end: 36px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a0a1' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 18px;
	background-position: left 12px center;
}

[dir="ltr"] select {
	background-position: right 12px center;
}

.field input:focus,
.form-inline input:focus,
select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.25);
}

.empty {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 64px 16px;
	text-align: center;
	color: var(--muted);
	background: var(--surface);
	border-radius: var(--radius);
	border: 1px dashed var(--border);
}

.empty .icon {
	width: 40px;
	height: 40px;
	color: var(--primary);
}

.empty--big {
	border: 0;
	background: none;
	padding-top: 10vh;
}

.big-number {
	font-size: clamp(80px, 14vw, 160px);
	font-weight: 700;
	line-height: 1;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pagination {
	margin-top: 48px;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 8px;
	border-radius: 50%;
	background: var(--surface);
	font-weight: 600;
}

.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
	background: var(--primary);
	color: #fff;
}

.search-big {
	position: relative;
	max-width: 560px;
	margin-top: 8px;
}

.search-big .icon {
	position: absolute;
	inset-inline-start: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
}

.search-big input {
	width: 100%;
	min-height: 52px;
	padding-inline: 48px 16px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	outline: 0;
}

.search-big input:focus {
	border-color: var(--primary);
}

/* ---------- تفاصيل العمل ---------- */

.details {
	padding-bottom: 32px;
}

.section {
	margin-bottom: 48px;
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.section > .section-title {
	margin-bottom: 16px;
}

.prose {
	max-width: 820px;
	font-size: 16px;
}

.prose p + p {
	margin-top: 1em;
}

/* المواسم والحلقات */
.tab-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.tab {
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	font-weight: 600;
	transition: background 0.2s, color 0.2s;
}

.tab:hover {
	color: var(--heading);
}

.tab.is-active {
	background: var(--surface-2);
	color: var(--heading);
}

.tab-list--pills .tab.is-active {
	background: var(--primary);
	color: #fff;
}

.tab .count {
	display: inline-block;
	min-width: 22px;
	padding: 0 6px;
	margin-inline-start: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 12px;
}

.episode-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 20px;
}

.episode {
	display: grid;
	gap: 10px;
	padding: 8px;
	border-radius: var(--radius);
	transition: background 0.2s;
}

.episode:hover {
	background: var(--surface);
}

.episode.is-current {
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--primary);
}

.episode-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--surface-2);
}

.episode-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.episode-duration {
	position: absolute;
	bottom: 8px;
	inset-inline-end: 8px;
	padding: 1px 8px;
	border-radius: 4px;
	background: rgba(0, 3, 28, 0.8);
	font-size: 12px;
	color: var(--heading);
}

.episode-info {
	display: grid;
	padding-inline: 4px;
}

.episode-number {
	font-size: 13px;
	color: var(--primary);
	font-weight: 600;
}

.episode-title {
	color: var(--heading);
	font-weight: 600;
}

/* ---------- المشاهدة ---------- */

.player {
	position: relative;
	/* دائماً بشكل الفيديو (16:9) عشان يعبّيه بالكامل */
	width: min(100%, 1600px);
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	background: #000;
}

.player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.player-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 12px;
	color: var(--muted);
}

.player-empty .icon {
	width: 48px;
	height: 48px;
}

.watch-kicker {
	color: var(--primary);
	font-weight: 600;
	font-size: 14px;
}

/* Video.js 10: نفس ألوان الموقع، ويملأ مساحة المشغّل */
.player video-player {
	--media-accent-color: var(--primary);
	--media-accent-text-color: #fff;
	--media-font-family: var(--font);
	--media-border-radius: 0;
}

.player video-player[hidden] {
	display: none !important;
}

.player video-skin {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ---------- الممثل ---------- */

.person-head {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 48px;
}

.person-photo--lg {
	font-size: 2em;
	margin: 0;
}

/* ---------- حسابي ---------- */

.tabs > .tab-list {
	margin-bottom: 28px;
	padding: 4px;
	background: var(--surface);
	border-radius: 999px;
	width: fit-content;
}

.panel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	gap: 20px;
}

.panel {
	padding: 28px;
	background: var(--surface);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	display: grid;
	gap: 16px;
	align-content: start;
}

.panel-title {
	font-size: 18px;
}

.sub-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--success);
}

.sub-status::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 4px rgba(47, 191, 113, 0.2);
}

.facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0;
}

.facts div {
	padding: 14px 16px;
	background: var(--surface-2);
	border-radius: var(--radius-sm);
}

.facts dt {
	font-size: 13px;
	color: var(--muted);
}

.facts dd {
	margin: 2px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--heading);
}

/* ---------- النماذج ---------- */

.form {
	display: grid;
	gap: 18px;
}

.field {
	display: grid;
	gap: 6px;
}

.field > span {
	font-size: 14px;
	font-weight: 500;
	color: var(--heading);
}

.field small {
	color: var(--muted);
	font-size: 12px;
}

.field input,
.form-inline input {
	width: 100%;
}

.code-input {
	letter-spacing: 2px;
	font-weight: 600;
	text-align: center;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.form-row a {
	color: var(--primary);
}

.check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.check input {
	accent-color: var(--primary);
	width: 16px;
	height: 16px;
}

.form-inline {
	display: flex;
	gap: 10px;
}

.form-inline .btn {
	border-radius: var(--radius-sm);
	min-height: 46px;
}

.notice {
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	border: 1px solid;
}

.notice-error {
	color: #ffb3bb;
	background: rgba(255, 92, 108, 0.1);
	border-color: rgba(255, 92, 108, 0.3);
}

.notice-success {
	color: #9be8bd;
	background: rgba(47, 191, 113, 0.1);
	border-color: rgba(47, 191, 113, 0.3);
}

.flash {
	margin-bottom: 24px;
}

/* ---------- شاشة الدخول والتسجيل (مثل StreamVid): فيديو في الخلفية ونافذة بيضاء ---------- */

.is-auth-screen .site-main {
	min-height: 100vh;
}

.auth {
	position: relative;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 30px 10px;
	overflow: hidden;
	isolation: isolate;
	background: #00031c;
}

/* الفيديو يغطي الشاشة، وفوقه طبقة غامقة ٦٠٪ */
.auth-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.auth-bg video,
.auth-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* أغلب التريلرات والحلقات مصوّرة بمقاس سينمائي والأسود مرسوم داخل الملف:
   نكبّر الفيديو شوي عشان الأشرطة السوداء فوق وتحت تطلع برا الشاشة (الخلفية للجو بس، فقص الأطراف ما يضر) */
.auth-bg video,
.auth-bg__yt {
	scale: 1.36;
}

.auth-bg img {
	position: absolute;
	inset: 0;
}

/* يوتيوب: يغطي الشاشة بنسبة 16:9 مهما كان شكلها */
.auth-bg__yt {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100vw, 177.78vh);
	height: max(100vh, 56.25vw);
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.auth::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 3, 28, 0.6);
}

/* النافذة البيضاء: ٥٥٦ عرض، زوايا ١٠، مثل الديمو */
.auth-box {
	position: relative;
	width: min(556px, 100%);
	padding: 38px 70px 45px;
	border-radius: 10px;
	background: #fff;
	color: #333549;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	text-align: center;
}

.auth-close {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	width: 51px;
	height: 66px;
	color: #6b6e80;
	transition: color 0.2s;
}

.auth-close:hover {
	color: #00031c;
}

.auth-close .icon {
	width: 26px;
	height: 26px;
}

/* الأيقونة بس (بدون اسم الموقع) */
.auth-brand {
	display: inline-flex;
	justify-content: center;
	margin-bottom: 10px;
}

.auth-brand .brand-text {
	display: none;
}

.auth-brand .brand-mark,
.auth-brand .brand-logo {
	width: 38px;
	height: 40px;
}

.auth-title {
	margin: 0 0 10px;
	font-size: 21.33px;
	font-weight: 700;
	line-height: 1.15;
	color: #00031c;
}

.auth-subtitle {
	margin: 0 0 18px;
	font-size: 14px;
	color: #6b6e80;
}

.auth-box .form {
	display: grid;
	gap: 12px;
	margin-top: 18px;
	text-align: start;
}

/* الحقول: الاسم داخل الحقل، ويطلع فوق لما تكتب (مثل الديمو) */
.auth-box .field {
	position: relative;
	display: block;
	margin: 0;
}

.auth-box .field > span {
	position: absolute;
	top: 12px;
	inset-inline-start: 25px;
	font-size: 16px;
	line-height: 24px;
	color: #333549;
	pointer-events: none;
	transition: top 0.15s, font-size 0.15s, color 0.15s;
}

.auth-box .field input {
	width: 100%;
	height: 48px;
	min-height: 0;
	padding: 15px 25px 0;
	border: 1px solid rgba(0, 3, 28, 0.1);
	border-radius: 10px;
	font-size: 16px;
	color: #333549;
	background: transparent;
	box-shadow: none;
	transition: border-color 0.2s;
}

[dir="rtl"] .auth-box .field input[dir="ltr"] {
	text-align: right;
}

.auth-box .field input:focus {
	border-color: #7b61ff;
	outline: 0;
}

.auth-box .field input:focus + small,
.auth-box .field:focus-within > span,
.auth-box .field:has(input:not(:placeholder-shown)) > span {
	top: 4px;
	font-size: 11px;
	line-height: 14px;
	color: #7b61ff;
}

/* خانة الكود: فيها شكل الكود كمثال، فاسمها دايماً فوق */
.auth-box .field:has(.code-input) > span {
	top: 4px;
	font-size: 11px;
	line-height: 14px;
}

.auth-box .field input::placeholder {
	color: #a4a6b3;
}

.auth-box .field small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #6b6e80;
}

/* زر إظهار كلمة المرور */
.auth-box .field--password input {
	padding-inline-end: 50px;
}

.pw-toggle {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	color: #6b6e80;
	background: none;
	cursor: pointer;
}

.pw-toggle:hover {
	color: #00031c;
}

.pw-toggle .icon {
	width: 18px;
	height: 18px;
}

.auth-box .form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	color: #333549;
}

.auth-box .form-row .check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #333549;
}

.auth-box .form-row .check input {
	width: 16px;
	height: 16px;
	accent-color: #6c52ee;
}

.auth-box .form-row a {
	color: #7b61ff;
}

.auth-box .form-row a:hover {
	color: #6c52ee;
}

.auth-box .btn-primary {
	height: 50px;
	min-height: 0;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
}

.auth-switch {
	margin: 20px 0 0;
	font-size: 14px;
	color: #6b6e80;
}

.auth-switch a {
	color: #7b61ff;
	font-weight: 600;
}

/* الرسائل داخل النافذة البيضاء */
.auth-box .notice {
	margin: 0 0 6px;
	padding: 10px 14px;
	border: 0;
	border-radius: 8px;
	font-size: 14px;
	text-align: start;
}

.auth-box .notice-error {
	color: #b42330;
	background: #fdecee;
}

.auth-box .notice-success {
	color: #116b3c;
	background: #e7f7ee;
}

@media (max-width: 560px) {
	.auth-box {
		padding: 34px 22px 30px;
	}
}

/* ---------- النوافذ والتنبيهات ---------- */

.modal {
	width: min(1100px, 94vw);
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: #000;
	overflow: visible;
}

.modal::backdrop {
	background: rgba(0, 3, 28, 0.85);
	backdrop-filter: blur(6px);
}

.modal-body {
	aspect-ratio: 16 / 9;
}

.modal-body iframe,
.modal-body video {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--radius);
}

.modal-close {
	position: absolute;
	top: -48px;
	inset-inline-end: 0;
	background: rgba(255, 255, 255, 0.1);
}

.toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--heading);
	font-weight: 500;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ---------- الجوال ---------- */

@media (max-width: 960px) {
	:root {
		--header-h: 64px;
	}

	.menu-toggle {
		display: inline-grid;
	}

	.header-inner {
		gap: 8px;
	}

	.main-nav {
		position: fixed;
		inset: var(--header-h) 0 0;
		padding: 24px var(--gutter);
		background: rgba(0, 3, 28, 0.98);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s var(--ease), visibility 0.3s;
	}

	[dir="ltr"] .main-nav {
		transform: translateX(-100%);
	}

	.menu-open .main-nav {
		transform: none;
		visibility: visible;
	}

	.menu-open {
		overflow: hidden;
	}

	.main-nav .menu {
		flex-direction: column;
		gap: 4px;
	}

	.main-nav a {
		display: block;
		padding: 12px 0;
		font-size: 18px;
	}

	.main-nav .current-menu-item > a::after {
		display: none;
	}

	/* البحث على الجوال: أيقونة، وتفتح مربع فوق الهيدر */
	.header-search {
		width: auto;
		height: auto;
		padding: 0;
		border: 0;
		background: none;
	}

	.header-search input {
		display: none;
	}

	/* الجوال: القائمة تحت مربع البحث المفتوح بعرضه */
	.header-search:not(.is-open) .search-drop {
		display: none;
	}

	.header-search.is-open .search-drop {
		width: auto;
		inset-inline: -1px;
		background: rgba(0, 3, 28, 0.85);
	}

	.header-search.is-loading .search-loader {
		inset-inline-start: 11px;
	}

	.header-search.is-open {
		position: absolute;
		inset-inline: 12px;
		top: 10px;
		height: 44px;
		padding-inline: 4px 12px;
		border: 1px solid var(--primary);
		background: var(--surface);
		z-index: 2;
	}

	.header-search.is-open input {
		display: block;
	}

	.header-tools {
		gap: 6px;
	}

	/* الجوال: 90% من مقاس الشعار مثل StreamVid (ارتفاع 36) */
	.brand {
		gap: 8px;
	}

	.brand-text {
		font-size: 25.6px;
	}

	.brand-mark {
		width: 33.3px;
		height: 36px;
	}

	.spotlight {
		padding-block: 48px;
	}

	.spotlight-inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.bento {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 150px;
		gap: 12px;
	}

	.bento-item--big {
		grid-column: 1 / -1;
		grid-row: span 1;
		min-height: 220px;
	}

	.bento-item {
		padding: 14px 16px;
	}

	.bento-title {
		font-size: 15px;
	}

	.hero-controls {
		bottom: 22px;
	}

	.hero-arrow {
		display: none;
	}

	.main-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		margin: 0 0 8px;
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0 12px;
	}

	.playlist {
		grid-template-columns: 1fr;
		aspect-ratio: auto;
	}

	.playlist-screen {
		aspect-ratio: 16 / 9;
	}

	.playlist-side {
		flex-direction: row;
		align-items: center;
		padding: 8px;
	}

	.playlist-arrow {
		display: none;
	}

	.playlist-thumbs {
		grid-auto-flow: column;
		grid-auto-columns: 96px;
		overflow-x: auto;
	}

	.promo {
		flex-direction: column;
		text-align: center;
	}

	.promo--wide .btn-white {
		position: static;
		transform: none;
	}

	.promo-title {
		letter-spacing: 4px;
	}

	.text-tabs {
		gap: 16px;
		overflow-x: auto;
		max-width: 60vw;
	}

	.row-head {
		flex-wrap: wrap;
	}

	.footer-top {
		grid-template-columns: 1fr 1fr;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}

	.hero {
		min-height: 82vh;
	}

	.hero-slide {
		align-items: flex-end;
	}

	.hero-content {
		padding-bottom: 72px;
		gap: 16px;
	}

	.hero-meta,
	.hero-text {
		font-size: 15px;
	}

	.hero-text {
		-webkit-line-clamp: 2;
	}

	.hero-actions .btn {
		min-height: 46px;
		padding: 0 20px;
		font-size: 15px;
	}

	.hero-actions .btn-square {
		width: 46px;
		padding: 0;
	}

	.row-arrow {
		display: none;
	}

	.person-head {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.person-photo--lg {
		width: 160px;
	}

	.watch-nav {
		width: 100%;
	}

	.watch-nav .btn {
		flex: 1;
	}
}

@media (max-width: 480px) {
	.hero-actions {
		width: 100%;
	}

	.hero-actions .btn-primary {
		flex: 1 1 100%;
	}

	.hero-actions .btn-text {
		flex: 1;
	}

	.form-inline {
		flex-direction: column;
	}

	.facts {
		grid-template-columns: 1fr;
	}

	.tabs > .tab-list {
		width: 100%;
	}

	.tabs > .tab-list .tab {
		flex: 1;
		padding-inline: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------- السيرفرات تحت المشغّل ---------- */

.servers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-block: 16px 0;
}

.servers-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-inline-end: 8px;
	color: var(--muted);
	font-size: 14px;
}

.server {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	color: var(--heading);
	font-weight: 600;
	font-size: 14px;
	transition: border-color 0.2s, background 0.2s;
}

.server:hover {
	border-color: var(--primary);
}

.server.is-active {
	background: var(--primary);
	border-color: var(--primary);
}

.server-q,
.server-lang {
	padding: 0 6px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.15);
	font-size: 11px;
	direction: ltr;
}

.player .js-player-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* العد التنازلي للحلقة التالية */
.next-overlay {
	position: absolute;
	z-index: 5;
	bottom: 70px;
	inset-inline-end: 24px;
	display: grid;
	gap: 10px;
	padding: 16px 18px;
	border-radius: 10px;
	background: rgba(0, 3, 28, 0.88);
	backdrop-filter: blur(8px);
	color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.next-overlay div {
	display: flex;
	gap: 8px;
}

/* ---------- القصة والمعلومات ---------- */

.about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	align-items: start;
}

.about-story .section-title {
	margin-bottom: 16px;
}

.about-facts {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 6px 20px;
	border-radius: 10px;
	background: var(--surface);
	border: 1px solid var(--border);
}

.about-facts > div {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
}

.about-facts > div:last-child {
	border-bottom: 0;
}

.about-facts dt {
	color: var(--muted);
}

.about-facts dd {
	margin: 0;
	color: var(--heading);
}

.about-facts a {
	color: var(--heading);
}

.about-facts a:hover {
	color: var(--primary);
}

@media (max-width: 960px) {
	.about {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.hero-logo {
	display: block;
	max-width: min(440px, 80vw);
	max-height: 150px;
	width: auto;
	height: auto;
	filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

/* ---------- نافذة التريلر: حركة الفتح والإغلاق ---------- */

.modal[open] {
	animation: modal-in 0.36s var(--ease);
}

.modal[open]::backdrop {
	animation: fade-in 0.36s ease;
}

.modal.is-closing {
	animation: modal-out 0.28s ease forwards;
}

.modal.is-closing::backdrop {
	animation: fade-out 0.28s ease forwards;
}

@keyframes modal-in {
	from { opacity: 0; transform: scale(0.85); }
	to { opacity: 1; transform: none; }
}

@keyframes modal-out {
	to { opacity: 0; transform: scale(0.9); }
}

@keyframes fade-in {
	from { opacity: 0; }
}

@keyframes fade-out {
	to { opacity: 0; }
}

/* ---------- نافذة التفاصيل السريعة ---------- */

.qv-open {
	overflow: hidden;
}

.qv-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	overflow-y: auto;
	padding: 40px 16px;
	background: rgba(0, 3, 28, 0.82);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.3s;
}

.qv-overlay.is-open {
	opacity: 1;
}

.qv {
	position: relative;
	width: min(900px, 100%);
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
	background: var(--surface);
	box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9);
	transform: translateY(24px) scale(0.97);
	transition: transform 0.35s var(--ease);
}

.qv-overlay.is-open .qv {
	transform: none;
}

.qv-close {
	position: absolute;
	z-index: 5;
	top: 14px;
	inset-inline-end: 14px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 3, 28, 0.7);
	color: #fff;
}

.qv-close:hover {
	background: var(--primary);
}

.qv-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	isolation: isolate;
	background: #000;
}

.qv-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: opacity 0.6s;
}

.qv-media.has-video .qv-bg {
	opacity: 0;
}

.qv-media .trailer-bg {
	z-index: -2;
}

.qv-shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, var(--surface) 0%, rgba(25, 28, 51, 0.4) 35%, transparent 65%);
}

.qv-head {
	position: absolute;
	inset: auto 0 0;
	display: grid;
	gap: 16px;
	justify-items: start;
	padding: 0 36px 28px;
}

.qv-title {
	font-size: clamp(26px, 4vw, 40px);
}

.qv-logo {
	max-width: min(320px, 60vw);
	max-height: 110px;
	width: auto;
}

.qv-media .speaker {
	position: absolute;
	bottom: 32px;
	inset-inline-end: 32px;
}

.qv-body {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 32px;
	padding: 8px 36px 28px;
}

.qv-main {
	display: grid;
	gap: 14px;
	align-content: start;
}

.qv-main .hero-meta {
	font-size: 15px;
}

.qv-text {
	color: var(--text);
	line-height: 1.75;
}

.qv-facts {
	margin: 0;
	display: grid;
	gap: 10px;
	align-content: start;
	font-size: 14px;
}

.qv-facts div {
	line-height: 1.6;
}

.qv-facts dt {
	display: inline;
	color: var(--muted);
}

.qv-facts dd {
	display: inline;
	margin: 0 4px 0 0;
}

.qv-facts a {
	color: var(--heading);
}

.qv-facts a:hover {
	color: var(--primary);
}

.qv-section {
	padding: 0 36px 28px;
}

.qv-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
}

.qv-section-head h3 {
	font-size: 19px;
}

.qv-episodes {
	display: grid;
	gap: 4px;
}

.qv-episode {
	display: grid;
	grid-template-columns: 28px 150px 1fr;
	align-items: center;
	gap: 16px;
	padding: 12px;
	border-radius: 8px;
	border-bottom: 1px solid var(--border);
}

.qv-episode:hover {
	background: var(--surface-2);
}

.qv-ep-num {
	font-size: 20px;
	font-weight: 700;
	color: var(--muted);
	text-align: center;
}

.qv-ep-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: var(--surface-2);
}

.qv-ep-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.qv-episode:hover .card-play {
	transform: translate(-50%, -50%) scale(0.8);
	opacity: 1;
}

.qv-ep-info {
	display: grid;
	gap: 2px;
}

.qv-ep-info strong {
	color: var(--heading);
}

.qv-ep-info small {
	color: var(--muted);
}

.qv-cast {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 18px;
}

.qv-foot {
	display: flex;
	justify-content: center;
	padding: 0 36px 28px;
}

.js-quickview.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

@media (max-width: 720px) {
	.qv-overlay {
		padding: 0;
	}

	.qv {
		border-radius: 0;
		min-height: 100%;
	}

	.qv-head,
	.qv-body,
	.qv-section,
	.qv-foot {
		padding-inline: 18px;
	}

	.qv-body {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.qv-episode {
		grid-template-columns: 22px 110px 1fr;
		gap: 10px;
		padding: 10px 4px;
	}
}

/* ---------- صفحة الملف الشخصي (مثل /author/ في StreamVid) ---------- */

.profile-head {
	padding-top: var(--header-h);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.profile-head-inner {
	display: flex;
	align-items: center;
	gap: 20px 24px;
	flex-wrap: wrap;
	padding: 56px clamp(16px, 3.6vw, 57px) 60px;
}

.profile-plan {
	margin-top: 4px;
	color: var(--text);
	font-size: 14px;
}

/* زر "تمديد الاشتراك" جنب الاسم (مثل Upgrade Premium) */
.btn-upgrade {
	min-height: 44px;
	padding: 0 20px;
	margin-inline-start: 36px;
	font-size: 15px;
}

.upgrade-crown {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #f5b800;
	color: #fff;
}

.upgrade-crown .icon {
	width: 13px;
	height: 13px;
}

.profile-avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--gradient);
	box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary);
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
}

.profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-avatar--lg {
	width: 110px;
	height: 110px;
	font-size: 40px;
}

.profile-name {
	font-size: 22px;
}

.profile-email {
	color: var(--muted);
	font-size: 14px;
	text-align: start;
}

.profile-body {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	padding: 40px clamp(16px, 1.4vw, 20px) 72px;
	min-height: 60vh;
}

.profile-nav {
	position: sticky;
	top: calc(var(--header-h) + 20px);
	padding: 20px 16px;
	border-radius: 10px;
	background: var(--surface);
}

.profile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.profile-nav li {
	border-bottom: 1px solid var(--border);
}

.profile-nav li:last-child {
	border-bottom: 0;
}

.profile-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block: 4px;
	padding: 11px 14px;
	border-radius: 8px;
	color: var(--heading);
	font-size: 15px;
	transition: color 0.25s, background 0.25s;
}

/* مثل StreamVid: النص والأيقونة يتلوّنون بنفسجي بدون خلفية */
.profile-nav a:hover {
	color: var(--primary);
}

.profile-nav a.is-active,
.profile-nav a.is-active:hover {
	background: var(--gradient);
	color: #fff;
}

.profile-nav .icon {
	width: 18px;
	height: 18px;
}

.profile-title {
	font-size: 24px;
	margin-bottom: 24px;
}

.profile-content .grid {
	grid-template-columns: repeat(auto-fill, minmax(min(170px, 42vw), 1fr));
}

.history-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

/* الأجهزة (مثل Devices Manager في StreamVid) */
.devices-usage {
	padding: 24px;
	margin-bottom: 40px;
	border-radius: 10px;
	background: var(--surface);
}

.devices-usage__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 20px;
}

.devices-usage__title .icon {
	width: 24px;
	height: 24px;
	color: var(--primary);
}

.devices-usage__facts {
	display: grid;
	gap: 4px;
	margin: 0 0 18px;
	font-size: 14px;
}

.devices-usage__facts div {
	display: flex;
	gap: 6px;
}

.devices-usage__facts dt {
	color: var(--heading);
	font-weight: 700;
}

.devices-usage__facts dd {
	margin: 0;
	color: var(--text);
}

.devices-usage__bar {
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	overflow: hidden;
}

.devices-usage__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--gradient);
	transition: width 0.4s var(--ease);
}

.devices-usage__bar.is-full span {
	background: linear-gradient(90deg, #ff7a1a, var(--danger));
}

.devices-usage__note {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--muted);
}

.devices-usage__note .sep,
.device-meta .sep {
	opacity: 0.6;
	margin-inline: 2px;
}

.devices-heading {
	margin: 0 0 16px;
	font-size: 20px;
}

.devices-heading--bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 40px;
}

.devices-heading--bar h3 {
	margin: 0;
	font-size: 20px;
}

.devices-heading--bar .btn-outline {
	color: var(--primary);
	box-shadow: inset 0 0 0 1px var(--primary);
}

.devices-heading--bar .btn-outline:hover {
	background: var(--primary);
	color: #fff;
}

.devices {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.device {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 10px;
	background: var(--surface);
	border: 2px solid transparent;
}

.device.is-current {
	background: transparent;
	border-color: var(--primary);
}

.device-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--surface-2);
	color: var(--primary);
}

.device.is-current .device-icon {
	background: rgba(123, 97, 255, 0.15);
}

.device-icon .icon {
	width: 24px;
	height: 24px;
}

.device-info {
	flex: 1;
	min-width: 0;
}

.device-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.device-name strong {
	color: var(--heading);
	font-size: 16px;
}

.device-meta {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--muted);
}

.device form .btn {
	min-height: 44px;
	padding: 0 22px;
}

.devices-empty {
	padding: 24px;
	border-radius: 10px;
	background: var(--surface);
	text-align: center;
}

@media (max-width: 640px) {
	.device {
		flex-wrap: wrap;
	}

	.device form {
		width: 100%;
	}

	.device form .btn {
		width: 100%;
	}
}

/* ملفي */
.panel--wide {
	grid-column: 1 / -1;
}

.avatar-edit {
	display: flex;
	align-items: center;
	gap: 24px;
}

.avatar-form {
	display: grid;
	gap: 8px;
	justify-items: start;
}

.avatar-pick {
	cursor: pointer;
}

.small {
	font-size: 12px;
}

.sub-status.is-expired {
	color: var(--danger);
}

.sub-status.is-expired::before {
	box-shadow: 0 0 0 4px rgba(255, 92, 108, 0.2);
}

.sub-history-title {
	margin: 36px 0 14px;
}

.table-wrap {
	overflow-x: auto;
	border-radius: 10px;
	background: var(--surface);
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.table th,
.table td {
	padding: 14px 18px;
	text-align: start;
	border-bottom: 1px solid var(--border);
}

.table th {
	color: var(--muted);
	font-weight: 500;
}

.table tr:last-child td {
	border-bottom: 0;
}

.table code {
	color: var(--heading);
	letter-spacing: 1px;
}

/* صورة المستخدم في الهيدر */
.avatar-btn.has-photo {
	padding: 0;
	overflow: hidden;
}

.avatar-btn.has-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

@media (max-width: 960px) {
	.btn-upgrade {
		margin-inline-start: 0;
	}

	.profile-body {
		grid-template-columns: 1fr;
		gap: 20px;
		padding-top: 24px;
	}

	.profile-nav {
		position: static;
		padding: 8px;
		overflow-x: auto;
	}

	.profile-nav ul {
		display: flex;
		gap: 4px;
	}

	.profile-nav li {
		border: 0;
		flex-shrink: 0;
	}

	.profile-nav a {
		margin: 0;
		white-space: nowrap;
	}

	.device {
		flex-wrap: wrap;
	}
}

/* ---------- قائمتي (مثل My Watchlist في StreamVid) ---------- */

/* تبويبات كبسولات */
.pill-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.pill-tab {
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--surface);
	color: var(--heading);
	font-size: 16px;
	font-weight: 500;
	transition: background 0.25s, color 0.25s;
}

.pill-tab:hover {
	background: var(--primary);
	color: #fff;
}

.pill-tab.is-active {
	background: var(--primary);
	color: #fff;
}

.watchlist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); /* 4 بالصف وتعبّي العرض مثل StreamVid */
	gap: 24px 20px;
}

.wl-item {
	position: relative;
	transition: opacity 0.3s, transform 0.3s;
}

.wl-item.is-removing {
	opacity: 0;
	transform: scale(0.94);
}

/* زر ✕ الأبيض في زاوية البطاقة */
.wl-remove {
	position: absolute;
	z-index: 3;
	top: 10px;
	inset-inline-end: 10px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #fff;
	color: #00031c;
	transition: background 0.2s, color 0.2s;
}

.wl-remove:hover {
	background: var(--danger);
	color: #fff;
}

.wl-remove:disabled {
	opacity: 0.5;
}

.wl-remove .icon {
	width: 16px;
	height: 16px;
	stroke-width: 2.4;
}

.wl-empty {
	padding: 40px 0;
}

.watchlist .card-title {
	font-size: 17px;
}

/* السجل: نفس شبكة قائمتي + شريط التقدم تحت الصورة */
.history-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.pill-tab .count {
	display: inline-block;
	min-width: 22px;
	margin-inline-start: 4px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 12px;
	line-height: 20px;
}

.hist-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
}

.hist-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.hist-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 3, 28, 0.45);
	opacity: 0;
	transition: opacity 0.3s;
}

.hist-media:hover img {
	transform: scale(1.05);
}

.hist-media:hover::after {
	opacity: 1;
}

.hist-media:hover .card-play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.hist-progress {
	position: absolute;
	z-index: 1;
	inset-inline: 0;
	bottom: 0;
	height: 5px;
	background: rgba(40, 43, 53, 0.9);
}

.hist-progress span {
	display: block;
	height: 100%;
	border-radius: 0 3px 3px 0;
	background: var(--gradient);
}

[dir="rtl"] .hist-progress span {
	border-radius: 3px 0 0 3px;
}

.hist-progress.is-done span {
	background: var(--success);
}

.hist-body {
	display: grid;
	gap: 2px;
	padding-top: 14px;
}

.hist-kicker {
	font-size: 13px;
	font-weight: 600;
	color: var(--primary);
}

.hist-kicker:hover {
	color: var(--heading);
}

.hist-meta {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
}

.hist-meta .sep {
	opacity: 0.6;
}

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

.load-more .btn {
	min-width: 140px;
}


/* ---------- ملفات المشاهدين: "مين يشاهد؟" ---------- */

.viewer-avatar {
	position: relative;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--from, #7b61ff), var(--to, #a35bff));
	color: #fff;
	font-weight: 700;
	line-height: 1;
	overflow: hidden;
}

.viewer-avatar--sm {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	font-size: 16px;
}

.viewer-avatar--md {
	width: 80px;
	height: 80px;
	font-size: 34px;
}

.viewer-avatar--lg {
	width: clamp(110px, 12vw, 150px);
	height: clamp(110px, 12vw, 150px);
	font-size: clamp(44px, 5vw, 62px);
	border-radius: 14px;
}

.viewer-avatar--xl {
	width: 130px;
	height: 130px;
	font-size: 56px;
	border-radius: 14px;
}

.viewer-avatar--add {
	background: transparent;
	border: 2px dashed rgba(255, 255, 255, 0.3);
	color: var(--muted);
}

.viewer-avatar--add .icon {
	width: 40%;
	height: 40%;
}

.viewer-kids {
	position: absolute;
	inset: auto 0 0;
	padding: 2px 0;
	background: rgba(0, 3, 28, 0.55);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
}

.viewer-avatar--sm .viewer-kids {
	display: none;
}

.who {
	min-height: 100vh;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 32px;
	padding: 100px 16px 60px;
	position: relative;
	isolation: isolate;
}

.who::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(123, 97, 255, 0.22), transparent 70%), var(--bg);
}

.who-brand {
	position: absolute;
	top: 28px;
	inset-inline-start: clamp(16px, 4.86vw, 70px);
}

.who-title {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 600;
	text-align: center;
}

.who-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(16px, 2.6vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.who-list form {
	margin: 0;
}

.who-item {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	cursor: pointer;
}

.who-item .viewer-avatar {
	outline: 3px solid transparent;
	outline-offset: 3px;
	transition: outline-color 0.2s, transform 0.25s var(--ease);
}

.who-item:hover .viewer-avatar,
.who-item:focus-visible .viewer-avatar {
	outline-color: #fff;
	transform: scale(1.04);
}

.who-item:hover .who-name {
	color: #fff;
}

.who-name {
	font-size: 17px;
	transition: color 0.2s;
	max-width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.who-lock {
	color: var(--muted);
	margin-top: -8px;
}

.who-lock .icon {
	width: 16px;
	height: 16px;
}

.who-item.is-manage .viewer-avatar {
	filter: brightness(0.45);
}

.who-item.is-manage .viewer-initial {
	opacity: 0;
}

.who-edit-icon {
	position: absolute;
	top: clamp(40px, 4.5vw, 56px);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 2px solid #fff;
	border-radius: 50%;
	color: #fff;
}

.who-edit-icon .icon {
	width: 18px;
	height: 18px;
}

.who-manage {
	min-width: 180px;
	text-transform: none;
}

.who-home {
	margin-top: -8px;
}

/* نموذج الإضافة والتعديل */
.who-panel {
	width: min(560px, 100%);
	display: grid;
	gap: 22px;
}

.who-panel .who-title {
	text-align: start;
	font-size: clamp(26px, 3vw, 36px);
}

.who-form {
	padding: 28px;
	border-radius: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
}

.who-edit-head {
	display: flex;
	align-items: center;
	gap: 20px;
}

.who-name-field {
	flex: 1;
}

/* صورة الملف: المعاينة وتحتها زر الاختيار */
.who-photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

@media (max-width: 560px) {
	.who-edit-head {
		flex-direction: column;
		align-items: stretch;
	}
}

.who-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.who-form legend {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--heading);
}

.swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.swatch {
	position: relative;
}

.swatch input,
.who-toggle input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.swatch span {
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--from), var(--to));
	outline: 2px solid transparent;
	outline-offset: 3px;
	cursor: pointer;
	transition: outline-color 0.2s;
}

.swatch input:checked + span,
.swatch input:focus-visible + span {
	outline-color: #fff;
}

.who-toggle {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--surface-2);
	cursor: pointer;
}

.who-toggle small {
	display: block;
	color: var(--muted);
	font-size: 13px;
}

.who-switch {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 24px;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.2);
	transition: background 0.2s;
}

.who-switch::after {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s;
}

.who-toggle input:checked + .who-switch {
	background: var(--primary);
}

.who-toggle input:checked + .who-switch::after {
	transform: translateX(-20px);
}

[dir="ltr"] .who-toggle input:checked + .who-switch::after {
	transform: translateX(20px);
}

.who-toggle input:focus-visible + .who-switch {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.pin-input {
	letter-spacing: 12px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
}

.pin-input::placeholder {
	letter-spacing: normal;
	font-size: 14px;
	font-weight: 400;
}

.who-actions {
	display: flex;
	gap: 10px;
}

.btn-danger-link {
	color: var(--danger);
}

.btn-danger-link:hover {
	color: #ff8a96;
}

/* رمز القفل */
.pin-overlay {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(0, 3, 28, 0.85);
	backdrop-filter: blur(8px);
	animation: fade-in 0.25s both;
}

.pin-box {
	position: relative;
	width: min(380px, 100%);
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 36px 28px 28px;
	border-radius: 16px;
	background: var(--surface);
	text-align: center;
	animation: modal-in 0.3s var(--ease);
}

.pin-box h2 {
	font-size: 20px;
}

.pin-input--big {
	width: 200px;
	min-height: 60px;
	font-size: 28px;
	letter-spacing: 18px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: #fff;
	outline: 0;
}

.pin-input--big:focus {
	border-color: var(--primary);
}

/* التبديل من قائمة الحساب */
.avatar-btn--viewer {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 50%;
	padding: 0;
}

/* صور الملفات في الهيدر وقائمته: دائرية */
.account-menu .viewer-avatar {
	border-radius: 50%;
}

/* صورة الحساب فوق الحرف */
.viewer-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.viewer-avatar.has-photo .viewer-initial {
	visibility: hidden;
}

.avatar-btn--viewer .viewer-avatar {
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.2s;
}

.avatar-btn--viewer:hover .viewer-avatar,
.avatar-btn--viewer[aria-expanded="true"] .viewer-avatar {
	outline-color: var(--primary);
}

.dropdown-viewers {
	display: grid;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(158, 97, 255, 0.35);
	font-size: 14px;
}

.dropdown-viewers:empty {
	display: none;
}

.dropdown-viewers form {
	margin: 0;
}

.dropdown-viewer,
.dropdown-viewers > a {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--heading);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: color 0.2s;
}

.dropdown-viewer:hover,
.dropdown-viewers > a:hover {
	color: var(--primary);
}

.dropdown-viewers > a .icon {
	flex: none;
	width: 20px;
	height: 20px;
}

.dropdown-viewer .viewer-avatar--sm {
	width: 26px;
	height: 26px;
	font-size: 12px;
}

.dropdown-viewer > .icon {
	width: 14px;
	height: 14px;
	margin-inline-start: auto;
	color: var(--muted);
}


/* ---------- صفحة التصنيفات (مثل /genres/ في StreamVid) ---------- */

.genres-page {
	padding: calc(var(--header-h) + 40px) var(--gutter) 80px;
}

.genres-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 48px;
}

.genres-intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.breadcrumbs {
	display: flex;
	gap: 6px;
	font-size: 14px;
	color: var(--text);
}

.breadcrumbs a {
	color: var(--heading);
}

.breadcrumbs a:hover {
	color: var(--primary);
}

.genres-title {
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1.1;
}

.genres-lead {
	font-size: 16px;
	color: var(--text);
}

.genres-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* أدوات التبديل المقسّمة */
.segment {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
	background: var(--surface);
}

.segment a {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 18px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
	transition: color 0.2s, background 0.2s;
}

.segment a:hover {
	color: var(--heading);
}

.segment a[aria-current] {
	color: #fff;
	background: var(--primary);
}

.segment--sort a[aria-current] {
	color: var(--heading);
	background: var(--surface-2);
}

.genres-section-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 20px;
}

.genres-section-head h2 {
	font-size: 24px;
}

.genres-section-head span {
	font-size: 14px;
	color: var(--muted);
}

/* البطاقات */
.genre-tiles {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 24px;
}

.genre-tile {
	--genre-ink: #fff;
	position: relative;
	display: block;
	height: 140px;
	overflow: hidden;
	isolation: isolate;
	border-radius: 12px;
	color: var(--genre-ink);
	background: var(--genre-color);
	transition: transform 0.25s ease;
}

.genre-tile.is-light {
	--genre-ink: #00031c;
}

/* تأثير المرور: البطاقة ترتفع، والبوسترات تميل أكثر وترتفع */
.genre-tile:hover {
	color: var(--genre-ink);
	transform: translateY(-3px);
}

.genre-tile:focus-visible {
	outline: 2px solid var(--heading);
	outline-offset: 3px;
}

.genre-tile__disc {
	position: absolute;
	z-index: 0;
	inset-inline-end: -28px;
	bottom: -52px;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: var(--genre-color2);
}

.genre-tile__posters {
	position: absolute;
	z-index: 1;
	inset: 0;
}

.genre-tile__poster {
	position: absolute;
	width: 60px;
	height: 86px;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
	transition: transform 0.3s ease;
}

.genre-tile__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.genre-tile__poster:nth-child(1) {
	inset-inline-end: 62px;
	bottom: -22px;
	transform: rotate(-9deg);
}

.genre-tile__poster:nth-child(2) {
	inset-inline-end: 14px;
	bottom: -10px;
	transform: rotate(8deg);
}

/* في العربي البطاقة معكوسة، فالميلان ينعكس */
[dir="rtl"] .genre-tile__poster:nth-child(1) {
	transform: rotate(9deg);
}

[dir="rtl"] .genre-tile__poster:nth-child(2) {
	transform: rotate(-8deg);
}

.genre-tile:hover .genre-tile__poster:nth-child(1) {
	transform: rotate(-12deg) translateY(-6px);
}

.genre-tile:hover .genre-tile__poster:nth-child(2) {
	transform: rotate(11deg) translateY(-6px);
}

[dir="rtl"] .genre-tile:hover .genre-tile__poster:nth-child(1) {
	transform: rotate(12deg) translateY(-6px);
}

[dir="rtl"] .genre-tile:hover .genre-tile__poster:nth-child(2) {
	transform: rotate(-11deg) translateY(-6px);
}

.genre-tile__body {
	position: absolute;
	z-index: 2;
	top: 14px;
	inset-inline: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.genre-tile__name {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
}

.genre-tile__count {
	font-size: 13px;
	font-weight: 500;
}

@media (max-width: 1380px) {
	.genre-tiles {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.genre-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.genres-page {
		padding-top: calc(var(--header-h) + 16px);
		padding-bottom: 48px;
	}

	.genres-head {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-bottom: 28px;
	}

	.genres-controls {
		flex-direction: column;
		gap: 10px;
	}

	.segment a {
		padding: 0 10px;
		font-size: 13px;
	}

	.genre-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.genre-tile {
		height: 112px;
	}

	.genre-tile__name {
		font-size: 17px;
	}

	.genre-tile__count {
		font-size: 12px;
	}

	.genre-tile__body {
		top: 12px;
		inset-inline: 14px;
		gap: 2px;
	}

	.genre-tile__disc {
		inset-inline-end: -24px;
		bottom: -42px;
		width: 104px;
		height: 104px;
	}

	.genre-tile__poster {
		width: 46px;
		height: 66px;
		border-radius: 5px;
	}

	.genre-tile__poster:nth-child(1) {
		inset-inline-end: 50px;
		bottom: -18px;
	}

	.genre-tile__poster:nth-child(2) {
		inset-inline-end: 10px;
		bottom: -8px;
	}
}

/* ---------- شاشة المشاهدة (مثل صفحة الحلقة في StreamVid) ---------- */

.watch-page {
	/* نفس مقاسات StreamVid: هامش ٣٢ وأقصى عرض ١٦٧٠ */
	max-width: calc(1670px + 64px);
	margin-inline: auto;
	padding: calc(var(--header-h) + 8px) 32px 72px;
}

.watch-head {
	margin-bottom: 16px;
}

.watch-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 700;
	color: var(--heading);
}

.watch-back .icon {
	width: 20px;
	height: 20px;
	transition: transform 0.2s var(--ease);
}

.watch-back:hover .icon {
	transform: translateX(4px);
}

[dir="ltr"] .watch-back:hover .icon {
	transform: translateX(-4px);
}

/* إطار المشغّل + شريط الأدوات */
.watch-stage {
	position: relative;
	/* بعرض الصفحة كامل والمشغّل 16:9 بدون حد للارتفاع، مثل StreamVid (١٣٧٦×٧٧٤ على شاشة ١٤٤٠) */
	overflow: hidden;
	border-radius: 12px;
	background: var(--surface);
}

.watch-stage .player {
	width: 100%;
	max-width: none;
}

.watch-stage .servers {
	padding: 12px 16px 0;
}

.watch-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
}

.watch-tools__group {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.btn-tool {
	min-height: 40px;
	padding: 0 14px;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--heading);
	background: transparent;
	border-radius: 8px;
}

.btn-tool .icon {
	width: 18px;
	height: 18px;
}

.btn-tool:hover,
.btn-tool.is-active,
.btn-tool[aria-pressed="true"] {
	color: var(--heading);
	background: rgba(255, 255, 255, 0.05);
}

.btn-tool.is-active .icon {
	color: var(--primary);
}

.btn-tool--icon {
	width: 40px;
	padding: 0;
}

.btn-tool--icon .icon {
	width: 22px;
	height: 22px;
}

.js-lights[aria-pressed="true"] {
	color: #ffd34d;
}

/* إطفاء الأنوار: كل شي يتعتّم إلا المشغّل */
.lights-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 0, 0, 0.92);
	animation: fade-in 0.3s ease both;
}

body.is-lights-off .watch-stage {
	z-index: 91;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* المعلومات + العمود الجانبي */
.watch-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px 40px;
	margin-top: 28px;
}

.watch-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 24px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--border);
}

.watch-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.watch-card__poster {
	flex-shrink: 0;
	width: 92px;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: var(--surface);
}

.watch-card__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease);
}

.watch-card__poster:hover img {
	transform: scale(1.08);
}

.watch-card__body {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.watch-card__title {
	font-size: 26px;
	line-height: 1.2;
}

.watch-card__episode {
	color: var(--primary);
	font-size: 14px;
	font-weight: 600;
}

.watch-tags,
.watch-genres {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.watch-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--heading);
}

.watch-tag .icon {
	width: 12px;
	height: 12px;
}

.watch-tag--rating {
	color: #f5c518;
	border-color: #f5c518;
}

.watch-tag--age {
	color: #000;
	background: #fff;
	border-color: #fff;
}

.watch-genres a {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--heading);
	background: var(--surface-2);
	transition: background 0.2s, color 0.2s;
}

.watch-genres a:hover {
	color: #fff;
	background: var(--primary);
}

.watch-desc__text {
	color: var(--text);
	line-height: 1.75;
}

.watch-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 14px;
	color: var(--primary);
	font-weight: 500;
}

.watch-more .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.2s var(--ease);
}

.watch-more:hover {
	color: #a996ff;
}

.watch-more:hover .icon {
	transform: translateX(-4px);
}

[dir="ltr"] .watch-more .icon {
	transform: scaleX(-1);
}

/* اختيار الموسم والحلقة */
.ep-picker {
	padding-top: 24px;
}

.ep-picker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.ep-picker__season {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--heading);
	cursor: pointer;
}

.ep-picker__season .icon {
	width: 20px;
	height: 20px;
	pointer-events: none;
}

.ep-picker__season .icon-chev-d {
	width: 18px;
	height: 18px;
	transition: transform 0.2s;
}

.ep-picker__season:hover .icon-chev-d {
	transform: translateY(2px);
}

.ep-picker__season select {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	color: inherit;
	background: transparent;
	cursor: pointer;
}

.ep-picker__season select option {
	color: var(--heading);
	background: var(--surface);
}

.ep-picker__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--heading);
	cursor: pointer;
}

.ep-picker__toggle input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.ep-picker__toggle input:checked + .who-switch {
	background: var(--primary);
}

.ep-picker__toggle input:checked + .who-switch::after {
	transform: translateX(-20px);
}

[dir="ltr"] .ep-picker__toggle input:checked + .who-switch::after {
	transform: translateX(20px);
}

.ep-picker__toggle input:focus-visible + .who-switch {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.ep-picker__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 8px;
}

.ep-picker__list[hidden] {
	display: none;
}

/* بطاقات الحلقات بصورة وشريط تقدّم (مثل StreamVid). "طيّ" يرجّعها أزرار صغيرة. */
.ep-picker:not(.is-collapsed) .ep-picker__list {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 26px 20px;
}

.ep-btn__media {
	display: none;
}

.ep-picker:not(.is-collapsed) .ep-btn {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	height: auto;
	padding: 0;
	background: none;
}

.ep-picker:not(.is-collapsed) .ep-btn:hover,
.ep-picker:not(.is-collapsed) .ep-btn.is-current {
	background: none;
	transform: none;
}

.ep-picker:not(.is-collapsed) .ep-btn__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: var(--surface);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.ep-btn__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.ep-picker:not(.is-collapsed) .ep-btn:hover .ep-btn__media {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px rgba(123, 97, 255, 0.55), 0 18px 36px -14px rgba(123, 97, 255, 0.65);
}

.ep-picker:not(.is-collapsed) .ep-btn:hover .ep-btn__media img {
	transform: scale(1.05);
}

.ep-picker:not(.is-collapsed) .ep-btn.is-current .ep-btn__media {
	box-shadow: 0 0 0 2px var(--primary);
}

.ep-btn__now {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 3, 28, 0.5);
}

.ep-btn__now .icon {
	width: 30px;
	height: 30px;
}

.ep-btn__progress {
	position: absolute;
	inset: auto 0 0;
	height: 5px;
	direction: ltr; /* يمتلي من اليسار مثل شريط الوقت في المشغّل */
	background: rgba(255, 255, 255, 0.18);
}

.ep-btn__progress span {
	display: block;
	height: 100%;
	border-radius: 0 3px 3px 0;
	background: var(--btn-gradient);
}

.ep-btn__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ep-picker:not(.is-collapsed) .ep-btn__label {
	font-size: 15px;
	font-weight: 700;
}

.ep-picker:not(.is-collapsed) .ep-btn__label .icon {
	display: none;
}

.ep-picker:not(.is-collapsed) .ep-btn.is-current .ep-btn__label,
.ep-picker:not(.is-collapsed) .ep-btn:hover .ep-btn__label {
	color: var(--primary);
}

.ep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 12px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--heading);
	background: var(--surface);
	transition: background 0.2s, color 0.2s, transform 0.2s var(--ease);
}

.ep-btn .icon {
	width: 12px;
	height: 12px;
}

.ep-btn:hover {
	color: #fff;
	background: var(--surface-2);
	transform: translateY(-2px);
}

.ep-btn.is-current,
.ep-btn.is-current:hover {
	color: #fff;
	background: var(--primary);
	transform: none;
}

/* قد يعجبك أيضاً */
.watch-aside {
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

.watch-aside__title {
	margin-bottom: 18px;
	font-size: 20px;
}

.mini-list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mini-item {
	display: flex;
	gap: 12px;
	align-items: center;
	overflow: hidden;
	border-radius: 6px;
	background: var(--surface);
	color: var(--heading);
	transition: background 0.2s;
}

.mini-item:hover {
	color: var(--heading);
	background: var(--surface-2);
}

.mini-item__poster {
	position: relative;
	flex-shrink: 0;
	width: 60px;
	aspect-ratio: 60 / 86;
	overflow: hidden;
	background: var(--surface-2);
}

.mini-item__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease);
}

.mini-item:hover .mini-item__poster img {
	transform: scale(1.1);
}

.mini-item__badges {
	position: absolute;
	top: 4px;
	inset-inline-start: 4px;
	display: grid;
	gap: 3px;
	justify-items: start;
}

.mini-item__badges .badge {
	padding: 1px 4px;
	font-size: 9px;
}

.mini-item__body {
	display: grid;
	gap: 4px;
	min-width: 0;
	padding-block: 8px;
	padding-inline-end: 12px;
}

.mini-item__title {
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: color 0.2s;
}

.mini-item:hover .mini-item__title {
	color: var(--primary);
}

.mini-item__meta {
	font-size: 13px;
	color: var(--text);
}

.mini-item__genres {
	font-size: 13px;
	color: var(--primary);
}

@media (max-width: 1100px) {
	.watch-layout,
	.watch-summary {
		grid-template-columns: minmax(0, 1fr);
	}

	.mini-list {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
}

@media (max-width: 767px) {
	.watch-page {
		padding-inline: 0;
	}

	.watch-head,
	.watch-layout {
		padding-inline: 16px;
	}

	.watch-back {
		font-size: 17px;
	}

	.watch-stage {
		border-radius: 0;
	}

	.watch-tools {
		flex-wrap: nowrap;
		padding: 8px;
	}

	.watch-tools__group {
		flex-wrap: nowrap;
		min-width: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.watch-tools__group::-webkit-scrollbar {
		display: none;
	}

	.btn-tool {
		padding: 0 10px;
	}

	.btn-tool span {
		font-size: 13px;
	}

	.watch-card__title {
		font-size: 22px;
	}

	.ep-picker__list {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	}

	.ep-picker:not(.is-collapsed) .ep-picker__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 12px;
	}
}

/* ---------- زر الرجوع لفوق ---------- */

.to-top {
	position: fixed;
	bottom: 30px;
	inset-inline-end: 30px;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: var(--gradient);
	box-shadow: 0 10px 30px -10px rgba(123, 97, 255, 0.8);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.to-top:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px -8px rgba(158, 97, 255, 0.7);
}

.to-top .icon {
	width: 20px;
	height: 20px;
}

.to-top:hover .icon {
	animation: arrow-up-bounce 1s ease both;
}

@keyframes arrow-up-bounce {
	0%, 100% { transform: none; }
	30% { transform: translateY(-5px); opacity: 0; }
	31% { transform: translateY(8px); opacity: 0; }
	60% { transform: none; opacity: 1; }
}

body.is-lights-off .to-top {
	display: none;
}

@media (max-width: 767px) {
	.to-top {
		bottom: 20px;
		inset-inline-end: 16px;
		width: 44px;
		height: 44px;
	}
}

/* ---------- تصفّح (/browse/) ---------- */

.browse-page {
	padding: calc(var(--header-h) + 32px) var(--gutter) 80px;
}

.browse-head {
	margin-bottom: 24px;
}

.browse-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 26px;
}

.browse-title .icon {
	width: 24px;
	height: 24px;
}

.browse-filters__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	margin-inline-start: -10px;
	border-radius: 8px;
	font-weight: 600;
	color: var(--heading);
	cursor: pointer;
	list-style: none;
	transition: background 0.2s, color 0.2s;
}

.browse-filters__toggle::-webkit-details-marker {
	display: none;
}

.browse-filters__toggle:hover,
.browse-filters[open] .browse-filters__toggle {
	color: var(--primary);
}

.browse-filters__toggle .icon {
	width: 18px;
	height: 18px;
}

.browse-filters__count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	font-size: 12px;
	color: #fff;
	background: var(--primary);
}

.browse-filters__panel {
	display: grid;
	grid-template-columns: auto repeat(3, minmax(160px, 220px)) auto;
	align-items: end;
	gap: 16px;
	margin-top: 12px;
	padding: 20px;
	border-radius: 12px;
	background: var(--surface);
	animation: fade-in 0.25s ease both;
}

.browse-field {
	display: grid;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.browse-field > span,
.browse-field > legend {
	padding: 0;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}

.browse-field select {
	width: 100%;
}

.browse-field .segment {
	background: var(--bg);
}

.segment__opt {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.segment__opt input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.segment__opt span {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
	transition: color 0.2s, background 0.2s;
}

.segment__opt:hover span {
	color: var(--heading);
}

.segment__opt input:checked + span {
	color: #fff;
	background: var(--primary);
}

.segment__opt input:focus-visible + span {
	outline: 2px solid var(--heading);
	outline-offset: 2px;
}

.browse-actions {
	display: flex;
	gap: 8px;
}

.browse-actions .btn {
	min-height: 46px;
	padding: 0 22px;
}

.browse-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 32px 18px;
}

.browse-grid .card-body {
	text-align: center;
}

.browse-grid .card-meta {
	display: none;
}

.browse-grid .card-genres {
	justify-content: center;
}

.browse-pagination .nav-links {
	justify-content: center;
}

@media (max-width: 1380px) {
	.browse-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 1100px) {
	.browse-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.browse-filters__panel {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.browse-filters__panel .browse-field:first-child,
	.browse-actions {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.browse-page {
		padding-inline: 16px;
	}

	.browse-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 12px;
	}

	.browse-filters__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}

	.browse-field .segment {
		display: flex;
	}

	.segment__opt {
		flex: 1;
	}

	.segment__opt span {
		justify-content: center;
		width: 100%;
	}

	.browse-actions .btn {
		flex: 1;
	}
}

/* ---------- الصفحات الثابتة (الأسئلة الشائعة، الخصوصية، الشروط) ---------- */

.page-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: calc(var(--header-h) + 56px) var(--gutter) 64px;
	text-align: center;
}

.page-hero__bg {
	position: absolute;
	inset: -20px;
	z-index: -1;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 6px;
	opacity: 0.35;
	filter: grayscale(0.3);
	transform: rotate(-4deg) scale(1.1);
}

.page-hero__bg img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 4px;
}

.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(0, 3, 28, 0.55), rgba(0, 3, 28, 0.85) 70%, var(--bg)),
		radial-gradient(ellipse at center, rgba(0, 3, 28, 0.2), rgba(0, 3, 28, 0.85));
}

.page-hero__inner {
	position: relative;
	max-width: 760px;
	margin-inline: auto;
}

.page-hero__title {
	font-size: clamp(34px, 4.4vw, 60px);
	line-height: 1.15;
	color: var(--heading);
}

.page-hero__lead {
	margin-top: 14px;
	font-size: 17px;
	color: var(--text);
}

.page-body {
	max-width: 900px;
	margin-inline: auto;
	padding: 24px var(--gutter) 80px;
}

.page-content {
	max-width: none;
	line-height: 1.85;
}

.page-content h2 {
	margin: 40px 0 18px;
	font-size: 22px;
}

.page-content h2:first-child {
	margin-top: 0;
}

.page-content ul,
.page-content ol {
	padding-inline-start: 22px;
}

.page-content a {
	color: var(--primary);
}

.page-body--faq .page-content h2 {
	text-align: center;
}

/* الأسئلة: مكوّن "التفاصيل" في المحرر يصير سؤال ينفتح وينسكر بعلامة + و − */
.page-content details {
	margin-bottom: 18px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--surface);
	transition: border-color 0.2s;
}

.page-content details:hover,
.page-content details[open] {
	border-color: rgba(123, 97, 255, 0.35);
}

.page-content summary {
	position: relative;
	padding: 18px 20px;
	padding-inline-end: 56px;
	font-size: 16px;
	font-weight: 600;
	color: var(--heading);
	cursor: pointer;
	list-style: none;
}

.page-content summary::-webkit-details-marker {
	display: none;
}

.page-content summary::before,
.page-content summary::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: 22px;
	width: 14px;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.3s var(--ease), opacity 0.3s;
}

.page-content summary::after {
	transform: rotate(90deg);
}

.page-content details[open] summary::after {
	transform: rotate(0deg);
	opacity: 0;
}

.page-content summary:hover {
	color: var(--primary);
}

.page-content details > :not(summary) {
	margin: 0;
	padding: 0 20px 18px;
	color: var(--text);
}

.page-content details[open] > :not(summary) {
	animation: faq-in 0.3s var(--ease) both;
}

@keyframes faq-in {
	from { opacity: 0; transform: translateY(-6px); }
}

.page-cta {
	display: grid;
	justify-items: center;
	gap: 22px;
	margin-top: 48px;
	text-align: center;
	color: var(--text);
}

.page-cta p {
	max-width: 420px;
	font-size: 16px;
}

/* ---------- تواصل معنا ---------- */

.page-hero--contact {
	padding-bottom: 72px;
	text-align: start;
}

.page-hero--contact .page-hero__inner {
	max-width: none;
}

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 48px 80px;
	align-items: start;
}

.contact-intro .prose {
	margin-top: 22px;
	color: var(--text);
}

.contact-faq {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	font-weight: 600;
	color: var(--heading);
}

.contact-faq .icon {
	width: 20px;
	height: 20px;
	color: var(--primary);
}

.contact-faq:hover {
	color: var(--primary);
}

.contact-form .field input,
.contact-form textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(6px);
}

.contact-form textarea {
	resize: vertical;
	min-height: 140px;
}

.contact-form input[readonly] {
	color: var(--muted);
}

.contact-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.contact-actions {
	display: flex;
	justify-content: flex-end;
}

.btn-outline {
	color: var(--heading);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--heading);
}

.btn-outline:hover {
	color: #fff;
	background: var(--primary);
	box-shadow: 0 15px 40px -8px rgba(158, 97, 255, 0.5);
	transform: translateY(-3px);
}

.contact-sent {
	display: grid;
	justify-items: center;
	gap: 12px;
	padding: 40px 24px;
	border-radius: 12px;
	text-align: center;
	background: rgba(25, 28, 51, 0.85);
	backdrop-filter: blur(8px);
	animation: fade-in 0.3s ease both;
}

.contact-sent__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: #fff;
	background: var(--success);
}

.contact-sent__icon .icon {
	width: 28px;
	height: 28px;
}

@media (max-width: 900px) {
	.contact-grid,
	.contact-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 404 ---------- */

.nf {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100vh;
	overflow: hidden;
	padding: calc(var(--header-h) + 40px) 16px 80px;
	text-align: center;
}

.nf-film {
	position: absolute;
	inset: 12% 0 auto;
	width: 100%;
	height: 70%;
	opacity: 0.9;
	pointer-events: none;
}

.nf-film__strip {
	fill: none;
	stroke: #12152c;
	stroke-width: 120;
}

.nf-film__holes {
	fill: none;
	stroke: var(--bg);
	stroke-width: 14;
	stroke-dasharray: 18 24;
	animation: nf-roll 6s linear infinite;
}

@keyframes nf-roll {
	to { stroke-dashoffset: -420; }
}

.nf-inner {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 12px;
}

.nf-code {
	font-size: clamp(120px, 18vw, 240px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -4px;
	direction: ltr;
	color: transparent;
	background: var(--nf-image, var(--gradient)) center / cover, var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	filter: saturate(1.3) contrast(1.1);
	animation: nf-pan 18s ease-in-out infinite alternate;
}

@keyframes nf-pan {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}

.nf-title {
	margin-top: 12px;
	font-size: clamp(22px, 2.6vw, 32px);
}

.nf-lead {
	margin-bottom: 18px;
	color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
	.nf-film__holes,
	.nf-code {
		animation: none;
	}
}

/* ---------- روابط أسفل الفوتر ---------- */

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}

.footer-legal a {
	color: var(--muted);
	transition: color 0.2s;
}

.footer-legal a:hover {
	color: var(--primary);
}

/* ---------- ظهور الأقسام عند التمرير (مثل fadeInRight في StreamVid) ---------- */

/* الأقسام قبل ظهورها مزاحة ٤٠ للجنب: نقصّها داخل المحتوى عشان الصفحة ما تتمرر بالعرض (بعض متصفحات الجوال تتجاهل overflow على body).
   clip ما يسوي منطقة تمرير، فالعمود الجانبي اللاصق يشتغل عادي. */
.site-main {
	overflow-x: clip;
}

.reveal {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.8s ease, transform 0.8s var(--ease);
}

[dir="rtl"] .reveal {
	transform: translateX(-40px);
}

.reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	[dir="rtl"] .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   الصفحة التعريفية للزائر (inc/landing.php + views/landing.php)
   ========================================================================== */

.hp-field {
	position: absolute !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.btn-lg {
	min-height: 56px;
	padding: 0 34px;
	font-size: 17px;
}

.btn-lg .icon {
	width: 18px;
	height: 18px;
}

.btn-outline-primary {
	color: var(--heading);
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--primary);
}

.btn-outline-primary:hover {
	color: #fff;
	background: var(--primary);
	box-shadow: 0 15px 40px -8px rgba(158, 97, 255, 0.5);
	transform: translateY(-3px);
}

/* الهيدر */
.guest-nav {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}

.guest-nav.is-scrolled,
body:not(.is-landing) .guest-nav {
	background: rgba(0, 3, 28, 0.78);
	box-shadow: 0 1px 0 rgba(123, 97, 255, 0.18);
	backdrop-filter: blur(14px);
}

.guest-nav__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	height: var(--header-h);
	padding-inline: var(--gutter);
}

.guest-nav__links {
	display: flex;
	gap: 28px;
	margin-inline-start: 16px;
}

.guest-nav__links a {
	font-weight: 500;
	color: var(--text);
	transition: color 0.2s;
}

.guest-nav__links a:hover {
	color: var(--primary);
}

.guest-nav__actions {
	display: flex;
	gap: 10px;
	margin-inline-start: auto;
}

/* الواجهة */
.lp-hero {
	position: relative;
	display: grid;
	justify-items: center;
	overflow: hidden;
	isolation: isolate;
	padding: calc(var(--header-h) + 72px) var(--gutter) 40px;
	text-align: center;
}

.lp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 50% 40% at 50% 8%, rgba(123, 97, 255, 0.35), transparent 70%),
		radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0, 3, 28, 0.55), var(--bg) 85%),
		linear-gradient(to bottom, rgba(0, 3, 28, 0.6), var(--bg) 92%);
}

/* جدار البوسترات: أعمدة مائلة تتحرك ببطء */
.lp-wall {
	position: absolute;
	inset: -10% -10% auto;
	z-index: -2;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	height: 120%;
	max-height: 1500px;
	opacity: 0.32;
	transform: rotate(-8deg);
	mask-image: linear-gradient(to bottom, #000 40%, transparent 90%);
}

.lp-wall__col {
	display: grid;
	gap: 16px;
	align-content: start;
	animation: lp-scroll var(--speed, 50s) linear infinite;
}

.lp-wall__col:nth-child(even) {
	animation-direction: reverse;
}

.lp-wall img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 10px;
}

@keyframes lp-scroll {
	to { transform: translateY(-50%); }
}

.lp-hero__inner {
	display: grid;
	justify-items: center;
	max-width: 820px;
}

.lp-hero__inner > * {
	animation: lp-up 0.7s var(--ease) both;
}

.lp-hero__inner > :nth-child(2) { animation-delay: 0.1s; }
.lp-hero__inner > :nth-child(3) { animation-delay: 0.2s; }
.lp-hero__inner > :nth-child(4) { animation-delay: 0.3s; }
.lp-hero__inner > :nth-child(5) { animation-delay: 0.4s; }

@keyframes lp-up {
	from { opacity: 0; transform: translateY(30px); }
}

.lp-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
	padding: 7px 18px;
	border: 1px solid rgba(123, 97, 255, 0.4);
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	color: #c9bdff;
	background: rgba(123, 97, 255, 0.12);
	backdrop-filter: blur(8px);
}

.lp-tag__dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--primary);
}

.lp-tag__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--primary);
	animation: lp-ping 1.6s ease-out infinite;
}

@keyframes lp-ping {
	to { transform: scale(3); opacity: 0; }
}

.lp-title {
	display: grid;
	gap: 4px;
	margin-bottom: 22px;
	font-size: clamp(38px, 6.4vw, 76px);
	font-weight: 700;
	line-height: 1.2;
}

.lp-accent {
	background: linear-gradient(90deg, #7b61ff, #c06bff, #7b61ff);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: lp-shine 6s linear infinite;
}

@keyframes lp-shine {
	to { background-position: -200% 0; }
}

.lp-lead {
	max-width: 580px;
	margin-bottom: 36px;
	font-size: 18px;
	color: var(--text);
}

.lp-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.lp-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 44px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.lp-stats li {
	display: grid;
	gap: 2px;
}

.lp-stats strong {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--heading);
	font-variant-numeric: tabular-nums;
}

.lp-stats span {
	font-size: 14px;
	color: var(--muted);
}

/* مجسّم الموقع: مايل ويعتدل مع النزول */
.lp-mockup-wrap {
	width: 100%;
	max-width: 900px;
	margin-top: 56px;
	perspective: 1400px;
	animation: lp-up 0.9s 0.5s var(--ease) both;
}

.lp-mockup {
	--tilt: 22deg;
	overflow: hidden;
	border: 1px solid rgba(123, 97, 255, 0.35);
	border-radius: 16px;
	background: var(--surface);
	box-shadow: 0 40px 120px -30px rgba(123, 97, 255, 0.55), 0 0 0 8px rgba(255, 255, 255, 0.03);
	transform: rotateX(var(--tilt));
	transform-origin: 50% 0;
	transition: transform 0.15s linear;
}

.lp-mockup__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 12px 16px;
	background: #12142a;
	border-bottom: 1px solid var(--border);
	direction: ltr;
}

.lp-mockup__bar .dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.dot--r { background: #ff5f57; }
.dot--y { background: #ffbd2e; }
.dot--g { background: #28c840; }

.lp-mockup__url {
	flex: 1;
	max-width: 320px;
	margin-inline: auto;
	padding: 4px 14px;
	border-radius: 6px;
	font-size: 12px;
	color: var(--muted);
	background: rgba(255, 255, 255, 0.05);
	text-align: center;
}

.lp-mockup__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	padding: 18px;
}

.lp-mock-card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	border-radius: 8px;
	background: var(--surface-2);
}

.lp-mock-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-mock-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 3, 28, 0.85), transparent 55%);
}

.lp-mock-card.is-featured {
	box-shadow: 0 0 0 2px var(--primary), 0 12px 30px -8px rgba(123, 97, 255, 0.7);
}

.lp-mock-card .badge {
	position: absolute;
	top: 8px;
	inset-inline-start: 8px;
	z-index: 1;
	font-size: 10px;
	padding: 2px 6px;
}

.lp-mock-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #fff;
	background: rgba(123, 97, 255, 0.9);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.6);
	transition: opacity 0.3s, transform 0.3s var(--ease);
}

.lp-mock-card.is-featured .lp-mock-card__play {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.lp-mock-card__play .icon {
	width: 14px;
	height: 14px;
}

.lp-mock-card__title {
	position: absolute;
	inset: auto 8px 8px;
	z-index: 1;
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: start;
}

/* الأقسام */
.lp-section {
	max-width: 1180px;
	margin-inline: auto;
	padding: 110px var(--gutter);
}

.lp-section--tight {
	padding-top: 40px;
}

.lp-section--narrow {
	max-width: 860px;
}

.lp-label {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--primary);
	text-align: center;
}

.lp-heading {
	margin-bottom: 56px;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.3;
	text-align: center;
}

.lp-heading::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 22px auto 0;
	border-radius: 3px;
	background: var(--gradient);
}

/* المميزات: بطاقات فيها توهج يتبع الماوس */
.lp-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.lp-feature {
	--x: 50%;
	--y: 0%;
	position: relative;
	overflow: hidden;
	padding: 32px 28px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--surface);
	transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}

.lp-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(320px circle at var(--x) var(--y), rgba(123, 97, 255, 0.22), transparent 60%);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}

.lp-feature:hover {
	border-color: rgba(123, 97, 255, 0.5);
	box-shadow: 0 20px 50px -20px rgba(123, 97, 255, 0.5);
	transform: translateY(-6px);
}

.lp-feature:hover::before {
	opacity: 1;
}

.lp-feature__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
	border-radius: 14px;
	color: #fff;
	background: var(--gradient);
	box-shadow: 0 10px 24px -8px rgba(123, 97, 255, 0.8);
	transition: transform 0.4s var(--ease);
}

.lp-feature:hover .lp-feature__icon {
	transform: rotate(-8deg) scale(1.08);
}

.lp-feature__icon .icon {
	width: 24px;
	height: 24px;
}

.lp-feature h3 {
	position: relative;
	margin-bottom: 8px;
	font-size: 19px;
}

.lp-feature p {
	position: relative;
	font-size: 15px;
	color: var(--text);
}

/* الخطوات */
.lp-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.lp-steps::before {
	content: "";
	position: absolute;
	top: 40px;
	inset-inline: 16.6%;
	height: 2px;
	background: repeating-linear-gradient(90deg, rgba(123, 97, 255, 0.6) 0 8px, transparent 8px 16px);
}

.lp-step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 8px;
}

.lp-step__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	margin-bottom: 12px;
	border: 1px solid rgba(123, 97, 255, 0.45);
	border-radius: 50%;
	color: var(--primary);
	background: var(--bg);
	box-shadow: 0 0 0 8px var(--bg), inset 0 0 30px rgba(123, 97, 255, 0.25);
	transition: transform 0.3s var(--ease), color 0.3s, background 0.3s;
}

.lp-step:hover .lp-step__icon {
	color: #fff;
	background: var(--primary);
	transform: translateY(-6px);
}

.lp-step__icon .icon {
	width: 30px;
	height: 30px;
}

.lp-step__num {
	position: absolute;
	top: -4px;
	inset-inline-end: -4px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: var(--gradient);
}

.lp-step h3 {
	font-size: 19px;
}

.lp-step p {
	max-width: 260px;
	color: var(--text);
}

/* الباقات */
.lp-plans {
	background:
		radial-gradient(ellipse 60% 50% at 50% 0%, rgba(123, 97, 255, 0.18), transparent 70%),
		#0a0d26;
}

.lp-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.lp-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 34px 26px 26px;
	border: 1px solid var(--border);
	border-radius: 18px;
	text-align: center;
	background: var(--surface);
	transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}

.lp-plan:hover {
	border-color: rgba(123, 97, 255, 0.5);
	transform: translateY(-6px);
}

.lp-plan.is-popular {
	border-color: transparent;
	background:
		linear-gradient(var(--surface), var(--surface)) padding-box,
		linear-gradient(160deg, #7b61ff, #c06bff 50%, rgba(123, 97, 255, 0.2)) border-box;
	border: 1.5px solid transparent;
	box-shadow: 0 30px 70px -30px rgba(123, 97, 255, 0.8);
	transform: scale(1.04);
}

.lp-plan.is-popular:hover {
	transform: scale(1.04) translateY(-6px);
}

.lp-plan__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--gradient);
	transform: translateX(-50%);
	white-space: nowrap;
}

.lp-plan__badge .icon {
	width: 14px;
	height: 14px;
}

.lp-plan__name {
	font-size: 17px;
	font-weight: 600;
	color: var(--heading);
}

.lp-plan__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}

.lp-plan__price strong {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lp-plan__price span {
	font-size: 15px;
	color: var(--muted);
}

.lp-plan__note {
	font-size: 14px;
	color: var(--muted);
}

.lp-plan__list {
	display: grid;
	gap: 10px;
	margin: 20px 0 24px;
	padding: 20px 0 0;
	border-top: 1px solid var(--border);
	list-style: none;
	text-align: start;
	font-size: 14px;
	color: var(--text);
}

.lp-plan__list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lp-plan__list .icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--primary);
}

.lp-plan .btn {
	margin-top: auto;
}

.lp-plans__hint {
	margin-top: 36px;
	text-align: center;
	color: var(--text);
}

.lp-plans__hint a {
	font-weight: 600;
	color: var(--primary);
}

/* الأسئلة */
.lp-faq {
	max-width: none;
}

.lp-faq__more {
	margin-top: 24px;
	text-align: center;
}

.lp-faq__more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--primary);
}

.lp-faq__more .icon {
	width: 16px;
	height: 16px;
}

/* التطبيق */
.lp-app {
	display: grid;
	justify-items: center;
	gap: 16px;
	padding-top: 40px;
	text-align: center;
}

.lp-app__text {
	font-size: 18px;
	color: var(--text);
}

/* الدعوة الأخيرة */
.lp-final {
	padding: 0 var(--gutter) 110px;
}

.lp-final__box {
	position: relative;
	overflow: hidden;
	max-width: 1180px;
	margin-inline: auto;
	padding: 64px 32px;
	border-radius: 24px;
	text-align: center;
	background: linear-gradient(120deg, #5b3fe0, #7b61ff 45%, #b25bff);
	box-shadow: 0 40px 100px -40px rgba(123, 97, 255, 0.9);
}

.lp-final__box::before {
	content: "";
	position: absolute;
	inset: -50%;
	background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.18), transparent 30%);
	animation: lp-spin 9s linear infinite;
}

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

.lp-final__box > * {
	position: relative;
}

.lp-final h2 {
	margin-bottom: 10px;
	font-size: clamp(28px, 3.4vw, 42px);
	color: #fff;
}

.lp-final p {
	margin-bottom: 28px;
	font-size: 17px;
	color: rgba(255, 255, 255, 0.85);
}

/* فوتر الزائر */
.guest-footer {
	background: #161934;
}

.guest-footer__inner {
	display: grid;
	justify-items: center;
	gap: 22px;
	padding: 48px var(--gutter) 32px;
	text-align: center;
}

.guest-footer__copy {
	font-size: 13px;
	color: var(--muted);
}

/* الصفحات الثابتة للزائر تبدأ تحت الهيدر */
.is-guest .page-hero {
	padding-top: calc(var(--header-h) + 56px);
}

@media (max-width: 1024px) {
	.guest-nav__links {
		display: none;
	}

	.lp-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-mockup__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.lp-mock-card:nth-child(n + 5) {
		display: none;
	}
}

@media (max-width: 767px) {
	.guest-nav__inner {
		gap: 12px;
		padding-inline: 16px;
	}

	.guest-nav__cta {
		display: none;
	}

	.lp-hero {
		padding: calc(var(--header-h) + 40px) 16px 24px;
	}

	.lp-wall {
		grid-template-columns: repeat(3, 1fr);
	}

	.lp-wall__col:nth-child(n + 4) {
		display: none;
	}

	.lp-lead {
		font-size: 16px;
	}

	.lp-actions .btn {
		flex: 1 1 100%;
	}

	.lp-stats {
		gap: 12px 28px;
	}

	.lp-stats strong {
		font-size: 24px;
	}

	.lp-mockup__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		padding: 10px;
	}

	.lp-mock-card:nth-child(n + 4) {
		display: none;
	}

	.lp-section {
		padding: 72px 16px;
	}

	.lp-heading {
		margin-bottom: 36px;
	}

	.lp-features,
	.lp-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-steps {
		gap: 36px;
	}

	.lp-steps::before {
		display: none;
	}

	.lp-plans__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.lp-plan {
		padding: 28px 14px 16px;
	}

	.lp-plan.is-popular,
	.lp-plan.is-popular:hover {
		transform: none;
	}

	.lp-plan__price strong {
		font-size: 34px;
	}

	.lp-plan__list {
		display: none;
	}

	.lp-final {
		padding: 0 16px 72px;
	}

	.lp-final__box {
		padding: 44px 20px;
		border-radius: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-wall__col,
	.lp-accent,
	.lp-tag__dot::after,
	.lp-final__box::before {
		animation: none;
	}

	.lp-mockup {
		--tilt: 0deg;
	}
}

/* ==========================================================================
   صفحة المسلسل — تصميم StreamVid v3 بهوية VoxPlus (تحت الواجهة)
   ========================================================================== */

.show-v3 {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 329px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	margin-top: -150px; /* يطلع فوق آخر شريط التريلر مثل الديمو */
	margin-bottom: 72px;
}

.container.show-v3 {
	max-width: none;
	padding-inline: 32px;
}

.show-card {
	background: rgba(25, 28, 51, 0.45);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 30px;
}

.show-side {
	display: grid;
	gap: 20px;
}

/* البطاقة الجانبية */
.show-poster {
	width: 200px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 20px;
	box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
}

.show-title {
	font-size: 28px;
	margin-bottom: 14px;
}

.show-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border: 1px solid #434343;
	border-radius: 5px;
	font-size: 12px;
	line-height: 20px;
	font-weight: 500;
	color: var(--heading);
}

.chip--imdb {
	border-color: #f5c518;
}

.chip--imdb b {
	color: #f5c518;
	font-weight: 600;
}

.chip--age {
	background: #fff;
	border-color: #fff;
	color: var(--bg);
	font-weight: 700;
}

.show-chips .badge {
	font-size: 12px;
	line-height: 20px;
	padding: 1px 9px;
	border-radius: 5px;
}

.show-genres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.show-genres a {
	padding: 2px 10px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 12px;
	line-height: 20px;
	font-weight: 700;
	color: var(--heading);
	transition: background 0.2s;
}

.show-genres a:hover {
	background: var(--primary);
}

.show-story {
	font-size: 15px;
	color: var(--text);
}

.show-makers {
	display: grid;
	gap: 8px;
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--border);
	font-size: 14px;
}

.show-makers div {
	display: flex;
	gap: 8px;
}

.show-makers dt {
	color: var(--muted);
	min-width: 56px;
}

.show-makers dd {
	margin: 0;
	color: var(--heading);
}

.show-makers a:hover {
	color: var(--primary);
}

/* الأكثر مشاهدة هذا الأسبوع */
.show-top {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--border);
}

.show-top__title {
	font-size: 20px;
	margin-bottom: 8px;
}

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

.top-item {
	display: grid;
	grid-template-columns: 48px 50px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
}

.top-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.top-num {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: transparent;
	-webkit-text-stroke: 1px var(--heading);
	font-family: system-ui, sans-serif;
}

.top-item.is-current .top-num {
	-webkit-text-stroke-color: var(--primary);
}

.top-thumb {
	display: block;
	aspect-ratio: 5 / 7;
	border-radius: 4px;
	overflow: hidden;
	background: var(--surface-2);
}

.top-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.top-body {
	display: grid;
	min-width: 0;
	font-size: 13px;
	line-height: 1.5;
}

.top-year,
.top-genres {
	color: var(--muted);
}

.top-name {
	color: var(--heading);
	font-weight: 700;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top-name:hover {
	color: var(--primary);
}

/* العمود الرئيسي: شاهد الآن + الأدوات */
.show-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-bottom: 30px;
}

.btn-play-lg {
	min-height: 50px;
	padding: 0 32px;
	gap: 10px;
	font-size: 16px;
	border-radius: 8px;
}

.btn-play-lg .icon {
	width: 24px;
	height: 24px;
}

.show-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.show-tools .btn-tool {
	flex-direction: column;
	gap: 4px;
	min-width: 80px;
	min-height: 0;
	padding: 8px 10px;
	font-size: 13px;
}

.show-tools .btn-tool .icon {
	order: -1; /* الأيقونة فوق النص (زر قائمتي يكتب النص أول) */
	width: 20px;
	height: 20px;
}

/* التبويبات */
.show-tabs__nav {
	display: flex;
	gap: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
	scrollbar-width: none;
}

.show-tabs__nav::-webkit-scrollbar {
	display: none;
}

.show-tab {
	position: relative;
	flex: none;
	padding: 0 0 10px;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.2s;
}

.show-tab::after {
	content: "";
	position: absolute;
	bottom: -1px;
	inset-inline-start: 0;
	width: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--gradient);
	transition: width 0.3s var(--ease);
}

.show-tab:hover,
.show-tab.is-active {
	color: var(--heading);
}

.show-tab.is-active::after {
	width: 100%;
}

.show-subtitle {
	font-size: 18px;
	margin: 0 0 16px;
}

.show-subtitle:not(:first-child) {
	margin-top: 32px;
}

/* شريط المواسم */
.seasons-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.season-select {
	position: relative;
}

.season-select__toggle,
.season-select__single {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--heading);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}

.season-select__single {
	cursor: default;
}

.season-select__toggle .icon,
.season-select__single .icon {
	width: 20px;
	height: 20px;
}

.season-select__toggle .icon:last-child {
	width: 16px;
	height: 16px;
	transition: transform 0.3s var(--ease);
}

.season-select.is-open .season-select__toggle .icon:last-child {
	transform: rotate(180deg);
}

.season-select__menu {
	position: absolute;
	z-index: 5;
	top: 100%;
	inset-inline-start: 0;
	min-width: 220px;
	max-height: 280px;
	margin: 6px 0 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.7);
}

.season-select__menu button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--heading);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.season-select__menu button small {
	color: var(--muted);
	font-size: 12px;
}

.season-select__menu button:hover,
.season-select__menu button.is-active {
	background: var(--surface-2);
}

.season-select__menu button.is-active {
	color: var(--primary);
}

/* مفتاح "عرض مختصر" */
.toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--heading);
	cursor: pointer;
}

.toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.toggle-switch {
	position: relative;
	width: 45px;
	height: 24px;
	border-radius: 999px;
	background: var(--surface-2);
	transition: background 0.25s;
}

.toggle-switch::before {
	content: "";
	position: absolute;
	top: 2px;
	inset-inline-start: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
	transition: inset-inline-start 0.25s var(--ease);
}

.toggle input:checked + .toggle-switch {
	background: var(--gradient);
}

.toggle input:checked + .toggle-switch::before {
	inset-inline-start: 23px;
}

.toggle input:focus-visible + .toggle-switch {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* بطاقات الحلقات */
.ep-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	gap: 24px 20px;
}

.ep-card {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.ep-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	overflow: hidden;
	background: var(--surface-2);
}

.ep-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.ep-card:hover .ep-card__media img {
	transform: scale(1.06);
}

.ep-card:hover .card-play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.ep-card__time {
	position: absolute;
	bottom: 8px;
	inset-inline-start: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(0, 3, 28, 0.6);
	font-size: 12px;
	color: #fff;
}

.ep-card__time .icon {
	width: 13px;
	height: 13px;
}

.ep-card__body {
	display: grid;
	gap: 2px;
}

.ep-card__num {
	font-size: 12px;
	font-weight: 700;
	color: var(--primary);
}

.ep-card__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ep-card:hover .ep-card__title {
	color: var(--primary);
}

.ep-card__text {
	display: none;
	font-size: 13px;
	color: var(--muted);
}

/* العرض المختصر: صف لكل حلقة (صورة صغيرة + النص) */
.ep-card__pill {
	display: none;
}

/* العرض المختصر (مثل Collapse في StreamVid): أزرار صغيرة "الحلقة 1" بدون صور، 6 بالصف */
.is-compact .ep-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
	gap: 9.6px;
}

.is-compact .ep-card__media,
.is-compact .ep-card__body {
	display: none;
}

.is-compact .ep-card__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 10px;
	border-radius: 10px;
	background: var(--surface);
	color: var(--heading);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s;
}

.is-compact .ep-card__pill .icon {
	width: 12px;
	height: 12px;
}

.is-compact .ep-card:hover .ep-card__pill,
.is-compact .ep-card:focus-visible .ep-card__pill {
	background: var(--surface-2);
	color: var(--primary);
}

/* شبكات التبويبات الأخرى */
.show-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
	gap: 24px 20px;
}

.show-grid--people {
	grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
}

.show-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 12px;
}

.show-gallery img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}

@media (max-width: 1100px) {
	.show-v3 {
		grid-template-columns: minmax(0, 1fr);
		margin-top: -80px;
	}

	.hero--banner {
		min-height: 0; /* تغلب min-height: 82vh حق واجهة الجوال */
		height: clamp(300px, 52vw, 576px);
	}

	.hero--banner .hero-controls {
		bottom: 100px;
	}

	.show-info {
		display: grid;
		grid-template-columns: 160px minmax(0, 1fr);
		column-gap: 24px;
		align-items: start;
	}

	.show-poster {
		grid-row: span 6;
		width: 100%;
	}

	.show-top {
		display: none;
	}
}

@media (max-width: 640px) {
	.show-card {
		padding: 20px;
		border-radius: 14px;
	}

	.container.show-v3 {
		padding-inline: 16px;
		margin-top: -40px;
	}

	.hero--banner .hero-controls {
		bottom: 56px;
		padding-inline: 16px;
	}

	.show-info {
		display: block;
		text-align: center;
	}

	.show-poster {
		width: 150px;
		margin-inline: auto;
	}

	.show-chips,
	.show-genres {
		justify-content: center;
	}

	.show-story,
	.show-makers {
		text-align: start;
	}

	.show-controls {
		flex-direction: column;
		align-items: stretch;
	}

	.show-tools {
		justify-content: center;
	}

	.show-tabs__nav {
		gap: 20px;
	}

	.is-compact .ep-card {
		grid-template-columns: 120px minmax(0, 1fr);
	}
}

/* ---------- الأسماء الإنجليزية في الصفحة العربية ----------
   لما ينقص الاسم (…)، الإنجليزي كان ينقص من بدايته ("…an: Brand New Day").
   plaintext يخلي اتجاه السطر من النص نفسه، فينقص من آخره ("Spider-Man: Brand…")، والعربي ما يتأثر. */
[dir="rtl"] :is(.card-title, .mini-item__title, .lp-mock-card__title, .dropdown-head strong, .search-item__sub, .ep-card__title, .ep-card__text, .show-story p, .person-bio__text p, .top-name) {
	unicode-bidi: plaintext;
	text-align: right;
}

[dir="rtl"] .who-name {
	unicode-bidi: plaintext; /* في الوسط أصلاً */
}

/* ---------- صفحة التصنيف الواحد (مثل /genres/drama/ في StreamVid) ---------- */

.genre-page {
	--genre-surface: var(--genre-color, var(--surface));
	--genre-fill: var(--genre-color, var(--primary));
	--genre-accent: var(--genre-color2, var(--primary));
	--genre-ink: #fff;
	padding: calc(var(--header-h) + 4px) 32px 80px;
}

.genre-page.is-light {
	--genre-ink: var(--bg);
}

/* الواجهة */
.genre-hero {
	position: relative;
	display: flex;
	min-height: 400px;
	margin: 0 0 32px;
	overflow: hidden;
	isolation: isolate;
	border-radius: 20px;
	color: var(--genre-ink);
	background: var(--genre-surface);
}

.genre-hero__disc {
	position: absolute;
	z-index: 0;
	top: 40px;
	inset-inline-end: 90px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: var(--genre-accent);
}

.genre-hero--plain .genre-hero__disc {
	top: auto;
	bottom: -220px;
	inset-inline-end: -120px;
	width: 460px;
	height: 460px;
}

.genre-hero__fan {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	width: 540px;
}

.genre-hero__poster {
	position: absolute;
	top: 96px;
	width: 180px;
	aspect-ratio: 488 / 680;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}

.genre-hero__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.genre-hero__poster:nth-child(1) {
	z-index: 1;
	top: 64px;
	inset-inline-end: 170px;
	width: 200px;
}

/* الثاني بعيد عن الطرف ومايل للداخل، والثالث على الطرف ومايل للخارج (معكوس في العربي) */
.genre-hero__poster:nth-child(2) {
	inset-inline-end: 330px;
	transform: rotate(-10deg);
}

.genre-hero__poster:nth-child(3) {
	inset-inline-end: 30px;
	transform: rotate(10deg);
}

[dir="rtl"] .genre-hero__poster:nth-child(2) {
	transform: rotate(10deg);
}

[dir="rtl"] .genre-hero__poster:nth-child(3) {
	transform: rotate(-10deg);
}

.genre-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	width: 560px;
	max-width: 100%;
	padding: 36px 56px 40px;
}

.genre-hero__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.genre-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding-inline: 12px 16px;
	border-radius: 18px;
	font-size: 14px;
	font-weight: 700;
	color: var(--genre-ink);
	background: color-mix(in srgb, var(--genre-ink) 16%, transparent);
	transition: background 0.2s;
}

.genre-hero__back:hover {
	color: var(--genre-ink);
	background: color-mix(in srgb, var(--genre-ink) 26%, transparent);
}

.genre-hero__back .icon {
	width: 16px;
	height: 16px;
}

.genre-hero .breadcrumbs,
.genre-hero .breadcrumbs a {
	color: var(--genre-ink);
}

.genre-hero .breadcrumbs a:hover {
	opacity: 0.8;
}

.genre-hero__heading {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.genre-hero__title {
	margin: 0;
	font-size: 88px;
	line-height: 1.05;
	color: inherit;
	unicode-bidi: plaintext;
}

[dir="rtl"] .genre-hero__title {
	text-align: right;
}

.genre-hero__rule {
	display: block;
	width: 64px;
	height: 5px;
	border-radius: 3px;
	background: var(--genre-accent);
}

.genre-page.is-light .genre-hero__rule {
	background: var(--genre-ink);
}

.genre-hero__desc {
	max-width: 430px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
}

.genre-hero__desc p {
	margin: 0;
}

.genre-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 36px;
	margin: 0;
}

.genre-hero__stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
}

.genre-hero__stat dt {
	font-size: 13px;
	font-weight: 700;
}

.genre-hero__stat dd {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
}

/* الأدوات: النوع، العدد، الترتيب، الفلاتر */
.genre-browse {
	position: relative;
}

.genre-browse.is-loading .genre-grid {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s;
}

.genre-filters {
	position: relative;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
}

.genre-filters.is-sheet-open {
	z-index: 100000;
}

.genre-filters__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.genre-types {
	display: flex;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.genre-type {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding-inline: 18px 8px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--heading);
	background: var(--surface);
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s;
}

.genre-type input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.genre-type:hover {
	background: var(--surface-2);
}

.genre-type:has(input:focus-visible) {
	outline: 2px solid var(--heading);
	outline-offset: 2px;
}

.genre-type.is-active {
	color: var(--genre-ink);
	background: var(--genre-fill);
}

.genre-type.is-disabled {
	color: var(--muted);
	background: var(--surface);
	cursor: not-allowed;
	opacity: 0.6;
}

.genre-type__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border-radius: 7px;
	font-size: 13px;
	color: var(--text);
	background: var(--surface-2);
}

.genre-type.is-active .genre-type__count {
	color: inherit;
	background: color-mix(in srgb, var(--genre-ink) 20%, transparent);
}

.genre-filters__tools {
	display: flex;
	align-items: center;
	gap: 16px;
}

.genre-filters__result {
	font-size: 14px;
	color: var(--text);
	white-space: nowrap;
}

.genre-filters__groups {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.genre-filters__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-inline-end: 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--heading);
}

.genre-filters__label .icon {
	width: 18px;
	height: 18px;
}

.genre-sheet {
	display: contents;
}

.genre-sheet__body {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.genre-sheet__head,
.genre-sheet__foot,
.genre-sheet__backdrop,
.genre-filters__open {
	display: none;
}

.genre-dropdown {
	position: relative;
}

.genre-dropdown__toggle,
.genre-filters__open {
	align-items: center;
	gap: 8px;
	height: 44px;
	padding-inline: 16px 14px;
	border: 1px solid var(--surface);
	border-radius: 10px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--heading);
	background: var(--surface);
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.genre-dropdown__toggle {
	display: inline-flex;
}

.genre-dropdown__toggle:hover,
.genre-filters__open:hover,
.genre-dropdown.is-open > .genre-dropdown__toggle {
	border-color: var(--surface-2);
	background: var(--surface-2);
}

.genre-dropdown__toggle .icon,
.genre-filters__open .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.2s;
}

.genre-dropdown.is-open > .genre-dropdown__toggle .icon-chev-d {
	transform: rotate(180deg);
}

.genre-dropdown__toggle.has-value {
	border-color: var(--genre-fill);
}

.genre-dropdown__hint {
	font-weight: 500;
	color: var(--text);
}

.genre-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	font-size: 12px;
	font-weight: 700;
	color: var(--genre-ink);
	background: var(--genre-fill);
}

.genre-dropdown__panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 8px);
	inset-inline-start: 0;
	display: none;
	flex-direction: column;
	gap: 2px;
	width: 300px;
	max-height: 380px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
}

.genre-dropdown.is-open > .genre-dropdown__panel {
	display: flex;
}

.genre-dropdown--sort .genre-dropdown__panel {
	inset-inline: auto 0;
	width: 220px;
}

.genre-dropdown__legend {
	display: none;
}

.genre-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--heading);
	cursor: pointer;
}

.genre-option input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--genre-fill);
}

.genre-option:hover {
	background: var(--surface-2);
}

.genre-option:has(input:checked) {
	background: color-mix(in srgb, var(--genre-fill) 16%, transparent);
}

.genre-option__label {
	flex-grow: 1;
	text-align: start;
}

.genre-option__count {
	font-size: 13px;
	color: var(--muted);
}

.genre-option--radio input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.genre-option--radio .icon {
	display: none;
	width: 16px;
	height: 16px;
}

.genre-option--radio:has(input:checked) .icon {
	display: inline-block;
}

.genre-option--radio:has(input:focus-visible) {
	outline: 2px solid var(--heading);
	outline-offset: -2px;
}

/* الفلاتر المختارة */
.genre-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.genre-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding-inline: 14px 10px;
	border: 1px solid var(--genre-fill);
	border-radius: 18px;
	font-size: 13px;
	font-weight: 700;
	color: var(--heading);
	background: color-mix(in srgb, var(--genre-fill) 20%, transparent);
}

.genre-chip:hover {
	color: var(--heading);
	background: color-mix(in srgb, var(--genre-fill) 35%, transparent);
}

.genre-chip .icon {
	width: 14px;
	height: 14px;
}

.genre-chips__clear {
	padding: 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	text-decoration: underline;
}

.genre-chips__clear:hover {
	color: var(--heading);
}

.genre-filters__submit {
	align-self: flex-start;
	height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-weight: 700;
	color: var(--genre-ink);
	background: var(--genre-fill);
}

/* الشبكة */
.genre-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 32px 24px;
}

.card--centered .card-body {
	text-align: center;
}

.card--centered .card-title {
	font-size: 16px;
}

/* الاسم في الوسط مثل التصنيفات (يغلب قاعدة محاذاة العناوين الإنجليزية لليمين) */
[dir="rtl"] .card--centered .card-title {
	text-align: center;
}

.genre-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 80px 0;
	text-align: center;
}

.genre-empty h2 {
	font-size: 20px;
}

.genre-empty p {
	color: var(--text);
}

.genre-empty__reset {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 22px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--genre-ink);
	background: var(--genre-fill);
}

.genre-empty__reset:hover {
	color: var(--genre-ink);
}

.genre-more {
	margin-top: 64px;
}

.genre-more__title {
	margin: 0 0 20px;
	font-size: 24px;
}

body.genre-sheet-lock {
	overflow: hidden;
}

@media (max-width: 1380px) {
	.genre-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.genre-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.genre-hero__content {
		width: 58%;
		padding: 32px 40px;
	}

	.genre-hero__title {
		font-size: 64px;
	}

	.genre-hero--fan .genre-hero__fan {
		inset-inline-end: -120px;
	}

	.genre-filters__bar {
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {
	.genre-page {
		padding: calc(var(--header-h) + 4px) 16px 48px;
	}

	.genre-hero {
		flex-direction: column;
		min-height: 0;
		margin: 0 0 16px;
		border-radius: 16px;
	}

	.genre-hero__disc,
	.genre-hero--fan .genre-hero__disc {
		top: 10px;
		bottom: auto;
		inset-inline-end: calc(50% - 95px);
		width: 190px;
		height: 190px;
	}

	.genre-hero--plain .genre-hero__disc {
		top: -80px;
		inset-inline-end: -60px;
	}

	.genre-hero__fan,
	.genre-hero--fan .genre-hero__fan {
		position: relative;
		inset-inline-end: auto;
		width: 100%;
		height: 196px;
	}

	.genre-hero__poster {
		top: 40px;
		width: 96px;
	}

	.genre-hero__poster:nth-child(1) {
		top: 20px;
		inset-inline-end: calc(50% - 55px);
		width: 110px;
	}

	.genre-hero__poster:nth-child(2) {
		inset-inline-end: calc(50% + 30px);
	}

	.genre-hero__poster:nth-child(3) {
		inset-inline-end: calc(50% - 126px);
	}

	.genre-hero__content {
		width: auto;
		gap: 12px;
		padding: 0 20px 22px;
	}

	.genre-hero--plain .genre-hero__content {
		padding-top: 22px;
	}

	.genre-hero .breadcrumbs {
		font-size: 12px;
	}

	.genre-hero__back {
		height: 40px;
		font-size: 13px;
	}

	.genre-hero__heading {
		gap: 12px;
	}

	.genre-hero__title {
		font-size: 48px;
	}

	.genre-hero__rule {
		width: 48px;
		height: 4px;
	}

	.genre-hero__desc {
		font-size: 15px;
		line-height: 1.5;
	}

	.genre-hero__stats {
		gap: 8px 28px;
	}

	.genre-hero__stat dt {
		font-size: 12px;
	}

	.genre-hero__stat dd {
		font-size: 22px;
	}

	.genre-filters {
		gap: 12px;
		margin-bottom: 20px;
		padding-bottom: 16px;
	}

	.genre-filters__bar {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 12px;
	}

	.genre-types {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.genre-types::-webkit-scrollbar {
		display: none;
	}

	.genre-type {
		flex-shrink: 0;
		height: 40px;
		padding-inline: 14px 6px;
		font-size: 14px;
	}

	.genre-type__count {
		min-width: 24px;
		height: 24px;
		font-size: 12px;
	}

	.genre-filters__tools {
		gap: 8px;
	}

	.genre-filters__result {
		flex-grow: 1;
		font-size: 13px;
	}

	.genre-dropdown--sort .genre-dropdown__hint {
		display: none;
	}

	.genre-dropdown__toggle,
	.genre-filters__open {
		padding: 0 12px;
		font-size: 13px;
	}

	.genre-filters__open {
		display: inline-flex;
	}

	.genre-filters__label {
		display: none;
	}

	.genre-filters__groups {
		display: block;
	}

	/* الفلاتر في لوحة تطلع من تحت */
	.genre-sheet {
		position: fixed;
		z-index: 2;
		inset: auto 0 0;
		display: flex;
		flex-direction: column;
		max-height: 88vh;
		border-radius: 20px 20px 0 0;
		background: var(--surface);
		box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	.genre-sheet__backdrop {
		position: fixed;
		z-index: 1;
		inset: 0;
		display: block;
		background: rgba(0, 3, 28, 0.72);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}

	.genre-filters.is-sheet-open .genre-sheet {
		transform: none;
		visibility: visible;
		transition: transform 0.3s ease;
	}

	.genre-filters.is-sheet-open .genre-sheet__backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease;
	}

	.genre-sheet__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: 12px 4px;
		padding-inline: 20px 8px;
	}

	.genre-sheet__title {
		font-size: 20px;
	}

	.genre-sheet__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		color: var(--heading);
		background: none;
		cursor: pointer;
	}

	.genre-sheet__body {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 22px;
		padding: 8px 20px 20px;
		overflow-y: auto;
	}

	.genre-sheet .genre-dropdown__toggle {
		display: none;
	}

	.genre-sheet .genre-dropdown__panel {
		position: static;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		width: auto;
		max-height: none;
		padding: 0;
		overflow: visible;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.genre-sheet .genre-dropdown__legend {
		display: block;
		width: 100%;
		margin: 0 0 10px;
		padding: 0;
		font-size: 14px;
		font-weight: 700;
		color: var(--heading);
	}

	.genre-sheet .genre-option {
		gap: 6px;
		min-height: 0;
		height: 38px;
		padding: 0 14px;
		border: 1px solid var(--surface-2);
		border-radius: 19px;
		font-size: 13px;
		font-weight: 700;
	}

	.genre-sheet .genre-option input {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	.genre-sheet .genre-option:hover {
		background: none;
	}

	.genre-sheet .genre-option:has(input:checked) {
		border-color: var(--genre-fill);
		color: var(--genre-ink);
		background: var(--genre-fill);
	}

	.genre-sheet .genre-option:has(input:checked) .genre-option__count {
		color: inherit;
	}

	.genre-sheet .genre-option:has(input:focus-visible) {
		outline: 2px solid var(--heading);
		outline-offset: 2px;
	}

	.genre-sheet .genre-option__label {
		flex-grow: 0;
	}

	.genre-sheet__foot {
		display: flex;
		gap: 10px;
		padding: 12px 20px 20px;
		border-top: 1px solid var(--border);
	}

	.genre-sheet__reset,
	.genre-sheet__apply {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 50px;
		border-radius: 12px;
		font: inherit;
		font-size: 15px;
		font-weight: 700;
	}

	.genre-sheet__reset {
		flex: 1;
		color: var(--heading);
		background: var(--surface-2);
	}

	.genre-sheet__apply {
		flex: 2;
		border: 0;
		color: var(--genre-ink);
		background: var(--genre-fill);
		cursor: pointer;
	}

	.genre-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px 10px;
	}

	.genre-more {
		margin-top: 40px;
	}

	.genre-more__title {
		font-size: 20px;
	}
}

/* ---------- كل الأفلام / كل المسلسلات: ترتيب StreamVid (عمود فلاتر + شبكة) بهوية VoxPlus ---------- */

.archive-page {
	--genre-fill: var(--primary);
	--genre-ink: #fff;
	--page-pad: 32px;
	padding: 0 var(--page-pad) 80px;
}

/* الواجهة القصيرة: خلفية أكثر عمل مشاهدة باهتة ومغبّشة، وعليها تدرج ثيمنا */
.archive-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	margin: 0 calc(var(--page-pad) * -1) 40px;
	padding: calc(var(--header-h) + 32px) var(--page-pad) 36px;
	overflow: hidden;
	isolation: isolate;
}

.archive-hero__bg {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	opacity: 0.4;
	filter: blur(3px) saturate(1.2);
	transform: scale(1.06);
}

.archive-hero::before,
.archive-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}

/* التوهج البنفسجي فوق بس، عشان ما ينقطع عند نهاية الواجهة */
.archive-hero::before {
	background:
		radial-gradient(60% 140% at 100% 0%, rgba(123, 97, 255, 0.38), transparent 70%),
		radial-gradient(45% 110% at 0% 0%, rgba(163, 91, 255, 0.16), transparent 70%),
		linear-gradient(to bottom, rgba(0, 3, 28, 0.35), rgba(0, 3, 28, 0.55));
}

/* آخر طبقة: أسفل الواجهة يذوب في لون الصفحة على كامل العرض، بدون أي خط */
.archive-hero::after {
	background: linear-gradient(to bottom, transparent 45%, rgba(0, 3, 28, 0.7) 75%, var(--bg) 100%);
}

.archive-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.archive-hero .breadcrumbs {
	font-size: 15px;
}

.archive-title {
	margin: 0;
	font-size: 56px;
	line-height: 1.1;
}

.archive-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 10px 0 0;
}

.archive-stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
	padding-inline: 0 24px;
	margin-inline-end: 24px;
	border-inline-end: 1px solid rgba(255, 255, 255, 0.15);
}

.archive-stat:last-child {
	margin-inline-end: 0;
	border: 0;
}

.archive-stat dt {
	font-size: 13px;
	color: var(--text);
}

.archive-stat dd {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--heading);
}

.archive-browse {
	display: grid;
	/* مثل الديمو: العمود خُمس العرض وأربعة في الصف، ومن ١٥٠١ سدس العرض وخمسة في الصف */
	grid-template-columns: calc(20% - 16px) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.archive-browse.is-loading .archive-grid {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s;
}

/* الصناديق الشفافة (نفس صناديق صفحة المسلسل) */
.side-card {
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: rgba(25, 28, 51, 0.45);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

/* العمود الجانبي: يلحقك وأنت تنزل */
.archive-side {
	position: sticky;
	top: calc(var(--header-h) + 16px);
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--header-h) - 32px);
}

.archive-side__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--surface-2) transparent;
}

.archive-side__head,
.archive-side__foot,
.archive-backdrop,
.archive-filters-open {
	display: none;
}

.side-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.side-card__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--heading);
}

.side-card__title .icon {
	width: 18px;
	height: 18px;
	color: var(--primary);
}

.side-card__reset {
	font-size: 13px;
	color: var(--text);
	text-decoration: underline;
}

.side-card__reset:hover {
	color: var(--heading);
}

/* كل قسم ينطوي وينفتح */
.side-group {
	padding: 14px 0;
	border-top: 1px solid var(--border);
}

.side-group:last-of-type {
	padding-bottom: 0;
}

.side-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--heading);
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.side-title::-webkit-details-marker {
	display: none;
}

.side-title > span:first-child {
	flex-grow: 1;
}

.side-title .icon {
	width: 16px;
	height: 16px;
	color: var(--muted);
	transition: transform 0.2s;
}

.side-group:not([open]) .side-title .icon {
	transform: rotate(90deg);
}

[dir="rtl"] .side-group:not([open]) .side-title .icon {
	transform: rotate(-90deg);
}

.side-title:hover .icon {
	color: var(--heading);
}

.side-checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.side-check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 24px;
	font-size: 14px;
	color: var(--heading);
	cursor: pointer;
}

.side-check input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.06);
	appearance: none;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.side-check input:checked {
	border-color: transparent;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat, var(--btn-gradient);
}

.side-check input:focus-visible {
	outline: 2px solid var(--heading);
	outline-offset: 2px;
}

.side-check:hover .side-check__label {
	color: var(--primary);
}

.side-check__label {
	flex-grow: 1;
	text-align: start;
	transition: color 0.2s;
}

.side-check__count {
	min-width: 22px;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 12px;
	text-align: center;
	color: var(--muted);
	background: rgba(255, 255, 255, 0.06);
}

/* أزرار مدوّرة: التصنيفات بألوانها، والفئات العمرية والسنوات بتدرج ثيمنا */
.side-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.side-pill {
	position: relative;
	cursor: pointer;
}

.side-pill input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.side-pill > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 13px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--heading);
	background: rgba(255, 255, 255, 0.05);
	transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.side-pill small {
	font-size: 11px;
	color: var(--muted);
}

.side-pill:hover > span {
	border-color: rgba(255, 255, 255, 0.25);
	transform: translateY(-1px);
}

.side-pill--genre > span::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pill);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pill) 25%, transparent);
}

.side-pill input:checked + span {
	border-color: transparent;
	color: #fff;
	background: var(--btn-gradient);
}

.side-pill--genre input:checked + span {
	color: var(--pill-ink);
	background: var(--pill);
}

.side-pill--genre input:checked + span::before {
	background: currentColor;
	box-shadow: none;
}

.side-pill input:checked + span small {
	color: inherit;
	opacity: 0.8;
}

.side-pill input:focus-visible + span {
	outline: 2px solid var(--heading);
	outline-offset: 2px;
}

.side-top .side-card__title {
	margin-bottom: 4px;
}

.side-top .top-genres {
	color: var(--primary);
}

/* شريط الأدوات في صندوق واحد */
.archive-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	margin-bottom: 28px;
	padding-block: 10px;
	padding-inline: 18px 10px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: rgba(25, 28, 51, 0.45);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.archive-bar__start,
.archive-bar__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.archive-result {
	font-size: 14px;
	color: var(--text);
}

.archive-result b {
	color: var(--heading);
}

.archive-bar .genre-dropdown__toggle,
.archive-bar .genre-filters__open {
	height: 40px;
	border-color: transparent;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
}

.archive-bar .genre-dropdown__toggle:hover,
.archive-bar .genre-dropdown.is-open > .genre-dropdown__toggle {
	background: rgba(255, 255, 255, 0.12);
}

.archive-bar .genre-dropdown__toggle.has-value {
	border-color: var(--primary);
}

.genre-option--link .icon {
	display: none;
	width: 16px;
	height: 16px;
}

.genre-option--link.is-current .icon {
	display: inline-block;
}

.genre-option--link.is-current {
	background: color-mix(in srgb, var(--genre-fill) 16%, transparent);
}

.archive-chips {
	margin: -12px 0 28px;
}

/* الشبكة والبطاقات */
.archive-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 20px;
}

/* زوايا الصور مثل الديمو: ١٠ في صفحة الأفلام والمسلسلات، ٥ في صفحة التصنيف */
.archive-grid .card-media {
	border-radius: 10px;
}

.genre-grid .card-media {
	border-radius: 5px;
}

.card--centered .card-media {
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.card--centered:hover .card-media {
	transform: translateY(-6px);
	box-shadow: 0 0 0 1px rgba(123, 97, 255, 0.55), 0 20px 40px -14px rgba(123, 97, 255, 0.65);
}

.card--centered .card-title a {
	transition: color 0.2s;
}

.card--centered:hover .card-title a {
	color: var(--primary);
}

.card-age {
	position: absolute;
	z-index: 1;
	top: 12px;
	inset-inline-end: 12px;
	padding: 0 7px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 5px;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	color: #fff;
	background: rgba(0, 3, 28, 0.65);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	unicode-bidi: isolate;
}

.archive-main .pagination {
	margin-top: 40px;
}

.archive-main .genre-empty {
	padding: 56px 24px;
}

.genre-empty__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	color: var(--primary);
	background: rgba(123, 97, 255, 0.14);
}

.genre-empty__icon .icon {
	width: 28px;
	height: 28px;
}

.archive-main .genre-empty__reset {
	background: var(--btn-gradient);
}

/* نقاط التحول نفسها في الديمو: الهامش ٧٠ من ١٥٠٠، وخمسة في الصف من ١٥٠١ */
@media (min-width: 1500px) {
	.genre-page {
		padding-inline: 70px;
	}

	.archive-page {
		--page-pad: 70px;
	}
}

@media (min-width: 1501px) {
	.archive-browse {
		grid-template-columns: calc(16.6667% - 16.667px) minmax(0, 1fr);
	}

	.archive-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* الجوال والتابلت: العمود يصير لوحة تفتح بزر "الفلاتر" */
@media (max-width: 1024px) {
	.archive-browse {
		display: block;
	}

	.archive-filters-open {
		display: inline-flex;
	}

	.archive-side {
		position: fixed;
		z-index: 100001;
		inset: auto 0 0;
		top: auto;
		max-height: 88vh;
		border-radius: 20px 20px 0 0;
		background: var(--surface);
		box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	.archive-backdrop {
		position: fixed;
		z-index: 100000;
		inset: 0;
		display: block;
		background: rgba(0, 3, 28, 0.72);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}

	.archive-browse.is-sheet-open .archive-side {
		transform: none;
		visibility: visible;
		transition: transform 0.3s ease;
	}

	.archive-browse.is-sheet-open .archive-backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease;
	}

	.archive-side__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: 12px 4px;
		padding-inline: 20px 8px;
	}

	.archive-side__title {
		font-size: 20px;
	}

	.archive-side__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		color: var(--heading);
		background: none;
		cursor: pointer;
	}

	.archive-side__body {
		padding: 0 20px 20px;
	}

	.archive-side .side-card {
		padding: 0;
		border: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.archive-side .side-card__head,
	.archive-side .side-top {
		display: none;
	}

	.archive-side .side-group:first-of-type {
		border-top: 0;
	}

	.archive-side__foot {
		display: flex;
		gap: 10px;
		padding: 12px 20px 20px;
		border-top: 1px solid var(--border);
	}

	.archive-side__foot .genre-sheet__reset,
	.archive-side__foot .genre-sheet__apply {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 50px;
		border-radius: 12px;
		font: inherit;
		font-size: 15px;
		font-weight: 700;
	}

	.archive-side__foot .genre-sheet__reset {
		flex: 1;
		color: var(--heading);
		background: var(--surface-2);
	}

	.archive-side__foot .genre-sheet__apply {
		flex: 2;
		border: 0;
		color: #fff;
		background: var(--btn-gradient);
		cursor: pointer;
	}
}

@media (max-width: 767px) {
	.archive-page {
		--page-pad: 16px;
		padding-bottom: 48px;
	}

	.archive-hero {
		min-height: 240px;
		margin-bottom: 24px;
		padding-top: calc(var(--header-h) + 20px);
		padding-bottom: 24px;
	}

	.archive-title {
		font-size: 38px;
	}

	.archive-hero .breadcrumbs {
		font-size: 13px;
	}

	.archive-stat {
		padding-inline-end: 16px;
		margin-inline-end: 16px;
	}

	.archive-stat dd {
		font-size: 20px;
	}

	.archive-bar {
		flex-direction: column;
		align-items: stretch;
		padding: 10px;
	}

	.archive-bar__start {
		justify-content: space-between;
	}

	.archive-bar__tools .genre-dropdown--sort .genre-dropdown__hint {
		display: none;
	}

	.archive-bar__tools .genre-dropdown__panel {
		width: 240px;
	}

	.archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 12px;
	}

}

/* ---------- الممثلين وطاقم العمل: ترتيب StreamVid بهوية صفحة الأفلام ---------- */

/* خلفية الواجهة صورة النجوم: أوضح شوي من صور الأعمال، والوجوه في النص */
.archive-hero--people .archive-hero__bg {
	object-position: center 22%;
	opacity: 0.55;
	filter: blur(1px) saturate(1.1);
	transform: scale(1.02);
}

/* أبرز الأسماء: صور دائرية بإطار بتدرج ثيمنا */
.people-stars {
	margin-bottom: 44px;
}

.people-stars__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 22px;
}

.people-stars__title::before {
	content: "";
	width: 4px;
	height: 22px;
	border-radius: 2px;
	background: var(--gradient);
}

.people-stars__track {
	grid-auto-columns: 172px;
	gap: 28px;
	padding-inline: 4px;
	padding-block: 6px 10px;
	scroll-padding-inline: 4px;
}

.people-stars .row-arrow {
	bottom: 60px;
	border-radius: 12px;
}

.star {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	color: var(--heading);
}

.star__ring {
	display: block;
	width: 164px;
	height: 164px;
	margin-bottom: 10px;
	padding: 3px;
	border-radius: 50%;
	background: var(--btn-gradient);
	transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

.star__photo {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: 4px solid var(--bg);
	border-radius: 50%;
	background: var(--surface);
}

.star__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.star__rank {
	position: absolute;
	top: 6px;
	inset-inline-start: 6px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 3px solid var(--bg);
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--btn-gradient);
}

.star__name {
	max-width: 100%;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: color 0.2s;
}

.star__meta,
.pcard__meta {
	font-size: 13px;
	color: var(--muted);
}

.star:hover .star__ring {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -12px rgba(123, 97, 255, 0.7);
}

.star:hover .star__photo img {
	transform: scale(1.08);
}

.star:hover .star__name {
	color: var(--primary);
}

/* البحث بالاسم داخل صندوق الفلاتر */
.side-search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	margin: 8px 0 14px;
	padding-inline: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	transition: border-color 0.2s, background 0.2s;
}

.side-search:focus-within {
	border-color: var(--primary);
	background: rgba(123, 97, 255, 0.08);
}

.side-search .icon {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	color: var(--muted);
}

.side-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 14px;
	color: var(--heading);
	background: none;
	outline: 0;
}

.side-subtitle {
	display: block;
	margin: 14px 0 -4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
}

/* حسب الحرف: مربعات فيها الحرف وعدده */
.side-letters {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-top: 12px;
}

.side-letter {
	position: relative;
	cursor: pointer;
}

.side-letter input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.side-letter span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 50px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.side-letter b {
	font-size: 15px;
	line-height: 1.2;
	color: var(--heading);
}

.side-letter small {
	font-size: 11px;
	color: var(--muted);
}

.side-letter:hover span {
	border-color: rgba(255, 255, 255, 0.25);
	transform: translateY(-1px);
}

.side-letter input:checked + span {
	border-color: transparent;
	background: var(--btn-gradient);
}

.side-letter input:checked + span small {
	color: #fff;
	opacity: 0.85;
}

.side-letter input:focus-visible + span {
	outline: 2px solid var(--heading);
	outline-offset: 2px;
}

/* بطاقة الشخص في الشبكة */
.pcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	color: var(--heading);
}

.pcard__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--surface);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.pcard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 3, 28, 0.55), transparent 45%);
	opacity: 0;
	transition: opacity 0.35s;
}

.pcard__name {
	max-width: 100%;
	overflow: hidden;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: color 0.2s;
}

.pcard:hover .pcard__media {
	transform: translateY(-6px);
	box-shadow: 0 0 0 1px rgba(123, 97, 255, 0.55), 0 20px 40px -14px rgba(123, 97, 255, 0.65);
}

.pcard:hover .pcard__media img {
	transform: scale(1.05);
}

.pcard:hover .pcard__media::after {
	opacity: 1;
}

.pcard:hover .pcard__name {
	color: var(--primary);
}

@media (max-width: 767px) {
	.people-stars {
		margin-bottom: 28px;
	}

	.people-stars__title {
		font-size: 19px;
	}

	.people-stars__track {
		grid-auto-columns: 124px;
		gap: 16px;
	}

	.star__ring {
		width: 118px;
		height: 118px;
	}

	.star__rank {
		top: 2px;
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.star__name {
		font-size: 14px;
	}

	.people-stars .row-arrow {
		display: none;
	}
}

@media (max-width: 1024px) {
	.archive-side .side-letters {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ---------- صفحة الممثل: ترتيب StreamVid بصناديق صفحة المسلسل ---------- */

/* الواجهة: صورة عريضة من أشهر أعماله، باهتة ومغبّشة، والصناديق تطلع فوق آخرها */
.person-hero {
	position: relative;
	height: 420px;
	overflow: hidden;
	isolation: isolate;
}

.person-hero__bg {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	opacity: 0.45;
	filter: blur(4px) saturate(1.2);
	transform: scale(1.06);
}

.person-hero::before,
.person-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
}

.person-hero::before {
	background:
		radial-gradient(55% 120% at 100% 0%, rgba(123, 97, 255, 0.4), transparent 70%),
		radial-gradient(45% 110% at 0% 0%, rgba(163, 91, 255, 0.16), transparent 70%);
}

.person-hero::after {
	background: linear-gradient(to bottom, rgba(0, 3, 28, 0.3) 0%, rgba(0, 3, 28, 0.6) 55%, var(--bg) 100%);
}

/* العمود الجانبي */
.person-side {
	padding: 24px;
}

.person-portrait {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 14px;
	background: var(--surface);
	box-shadow: 0 0 0 1px rgba(123, 97, 255, 0.35), 0 24px 48px -18px rgba(123, 97, 255, 0.55);
}

.person-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.person-socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.person-social {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: var(--heading);
	background: rgba(255, 255, 255, 0.05);
	transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.person-social .icon {
	width: 17px;
	height: 17px;
}

.person-social:hover {
	border-color: transparent;
	color: #fff;
	background: var(--btn-gradient);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -8px rgba(123, 97, 255, 0.7);
}

.person-social--imdb:hover {
	color: #000;
	background: #f5c518;
	box-shadow: 0 10px 22px -8px rgba(245, 197, 24, 0.6);
}

.person-side__title {
	margin: 24px 0 4px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
	font-size: 19px;
}

.person-info {
	display: grid;
	margin: 0;
}

.person-info > div {
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.person-info > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.person-info dt {
	margin-bottom: 3px;
	font-size: 13px;
	font-weight: 700;
	color: var(--heading);
}

.person-info dd {
	margin: 0;
	font-size: 14px;
	color: var(--text);
}

.person-aka {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px !important;
}

.person-aka span {
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 12px;
	background: rgba(255, 255, 255, 0.06);
}

/* العمود الرئيسي */
.person-main {
	display: flex;
	flex-direction: column;
	gap: 34px;
	min-width: 0;
}

.person-heading {
	margin: 0 0 14px;
	font-size: 44px;
	line-height: 1.1;
	unicode-bidi: plaintext;
}

[dir="rtl"] .person-heading {
	text-align: right;
}

.chip--accent {
	border-color: transparent;
	color: #fff;
	background: var(--btn-gradient);
}

.person-titlebar .show-chips {
	margin: 0;
}

.person-section__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 20px;
}

.person-section__title::before {
	content: "";
	width: 4px;
	height: 20px;
	border-radius: 2px;
	background: var(--gradient);
}

.person-bio__text {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.8;
	color: var(--text);
	unicode-bidi: plaintext;
}

.person-bio__text p {
	margin: 0 0 12px;
}

.person-bio.is-open .person-bio__text {
	display: block;
}

.person-bio__more {
	margin-top: 10px;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--primary);
	background: none;
	cursor: pointer;
}

.person-bio__more:hover {
	text-decoration: underline;
}

/* اشتهر بـ: صف بطاقات */
.person-known__track {
	grid-auto-columns: clamp(150px, 13vw, 200px);
	gap: 18px;
	padding-inline: 2px;
	padding-block: 8px 4px;
	scroll-padding-inline: 2px;
}

.person-known .row-arrow {
	bottom: 70px;
	border-radius: 12px;
}

/* كل الأعمال */
.person-credits__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.person-credits__head .person-section__title {
	margin: 0;
}

.person-filter {
	display: flex;
	gap: 6px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
}

.person-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	background: none;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}

.person-filter__btn span {
	min-width: 20px;
	padding: 0 6px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 20px;
	background: rgba(255, 255, 255, 0.08);
}

.person-filter__btn:hover {
	color: var(--heading);
}

.person-filter__btn.is-active {
	color: #fff;
	background: var(--btn-gradient);
}

.person-filter__btn.is-active span {
	background: rgba(255, 255, 255, 0.2);
}

.credit-list {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 16px;
	list-style: none;
}

.credit {
	position: relative;
	display: grid;
	grid-template-columns: 64px 46px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--border);
	background: rgba(25, 28, 51, 0.35);
	transition: background 0.2s;
}

.credit:last-child {
	border-bottom: 0;
}

.credit::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: var(--gradient);
	opacity: 0;
	transition: opacity 0.2s;
}

.credit:hover {
	background: rgba(123, 97, 255, 0.1);
}

.credit:hover::before {
	opacity: 1;
}

.credit[hidden] {
	display: none;
}

.credit__year {
	font-size: 15px;
	font-weight: 700;
	color: var(--muted);
}

.credit__thumb {
	display: block;
	width: 46px;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: var(--surface);
}

.credit__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.credit__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.credit__title {
	overflow: hidden;
	font-size: 16px;
	font-weight: 700;
	color: var(--heading);
	white-space: nowrap;
	text-overflow: ellipsis;
	unicode-bidi: plaintext;
	text-align: right;
}

.credit__title:hover {
	color: var(--primary);
}

.credit__role {
	font-size: 13px;
	color: var(--text);
}

.credit__type {
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	color: var(--text);
	background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1100px) {
	.person-hero {
		height: clamp(260px, 38vw, 420px);
	}
}

@media (max-width: 767px) {
	.person-heading {
		font-size: 32px;
	}

	.person-portrait {
		max-width: 220px;
		margin-inline: auto;
	}

	.person-main {
		gap: 26px;
	}

	.person-known__track {
		grid-auto-columns: 136px;
		gap: 12px;
	}

	.person-known .row-arrow {
		display: none;
	}

	.credit {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		gap: 12px;
		padding: 10px 14px;
	}

	.credit__year {
		display: none;
	}

	.credit__thumb {
		width: 40px;
	}
}

/* ---------- تصفّح (/browse/) بلمسات VoxPlus: نفس الترتيب، مع واجهة وصناديق شفافة وتوهج ---------- */

.browse-page {
	--page-pad: var(--gutter);
	padding: 0 var(--page-pad) 80px;
}

.browse-head.archive-hero {
	min-height: 300px;
	margin-bottom: 32px;
}

/* خلفية جدار البوسترات: الصورة نفسها غامقة وواضحة، فنخليها بدون تغبيش تقريباً */
.archive-hero--browse .archive-hero__bg {
	object-position: center 35%;
	opacity: 0.75;
	filter: blur(0.5px) saturate(1.1);
	transform: scale(1.02);
}

.browse-head .archive-hero__inner {
	width: 100%;
}

.browse-title {
	gap: 14px;
	margin: 0;
	font-size: 48px;
	line-height: 1.1;
}

.browse-title__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 15px;
	color: #fff;
	background: var(--btn-gradient);
	box-shadow: 0 14px 30px -10px rgba(123, 97, 255, 0.7);
}

.browse-title .browse-title__icon .icon {
	width: 24px;
	height: 24px;
}

.browse-filters {
	margin-top: 22px;
}

/* زر الفلاتر: حبة شفافة */
.browse-filters__toggle {
	height: 42px;
	margin-inline-start: 0;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(25, 28, 51, 0.55);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.browse-filters__toggle:hover,
.browse-filters[open] .browse-filters__toggle {
	border-color: var(--primary);
	color: var(--heading);
	background: rgba(123, 97, 255, 0.18);
}

.browse-filters__toggle .icon {
	color: var(--primary);
}

.browse-filters__count {
	background: var(--btn-gradient);
}

/* لوحة الفلاتر: صندوق شفاف */
.browse-filters__panel {
	border: 1px solid var(--border);
	border-radius: 18px;
	background: rgba(25, 28, 51, 0.55);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.browse-field .segment {
	background: rgba(0, 3, 28, 0.5);
}

.segment__opt input:checked + span {
	background: var(--btn-gradient);
	box-shadow: 0 8px 18px -8px rgba(123, 97, 255, 0.8);
}

.browse-field select {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.06);
	transition: border-color 0.2s, background-color 0.2s;
}

.browse-field select:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.browse-field select:focus {
	border-color: var(--primary);
	outline: 0;
}

.browse-actions .btn-primary {
	box-shadow: 0 10px 24px -10px rgba(123, 97, 255, 0.8);
}

/* البطاقات: الاسم في الوسط، وارتفاع وتوهج عند المرور */
[dir="rtl"] .browse-grid .card-title {
	text-align: center;
}

.browse-grid .card-media {
	border-radius: 10px;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.browse-grid .card:hover .card-media {
	transform: translateY(-6px);
	box-shadow: 0 0 0 1px rgba(123, 97, 255, 0.55), 0 20px 40px -14px rgba(123, 97, 255, 0.65);
}

.browse-grid .card-title a {
	transition: color 0.2s;
}

.browse-grid .card:hover .card-title a {
	color: var(--primary);
}

.browse-empty {
	padding: 56px 24px;
}

.browse-empty .genre-empty__reset,
.browse-empty .genre-empty__reset:hover {
	color: #fff;
	background: var(--btn-gradient);
}

/* ترقيم الصفحات في كل الموقع: الصفحة الحالية بتدرج ثيمنا */
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
	background: var(--btn-gradient);
	box-shadow: 0 10px 22px -10px rgba(123, 97, 255, 0.8);
}

@media (max-width: 767px) {
	.browse-head.archive-hero {
		min-height: 220px;
		margin-bottom: 24px;
	}

	.browse-title {
		font-size: 34px;
	}

	.browse-title__icon {
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}
}

/* ---------- أحدث الإضافات (/latest/): نفس هوية صفحة التصفّح ---------- */

.latest-section {
	margin-bottom: 48px;
}

.latest-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 22px;
}

.latest-head .latest-title {
	margin: 0;
}

.latest-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 22px;
}

.latest-title::before {
	content: "";
	width: 4px;
	height: 22px;
	border-radius: 2px;
	background: var(--gradient);
}

.latest-types {
	background: rgba(25, 28, 51, 0.55);
	border: 1px solid var(--border);
}

.latest-types a[aria-current] {
	background: var(--btn-gradient);
	box-shadow: 0 8px 18px -8px rgba(123, 97, 255, 0.8);
}

.latest-episodes {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.latest-episodes .ep-card__num {
	color: var(--primary);
}

.latest-episodes .ep-card__media {
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.latest-episodes .ep-card:hover .ep-card__media {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px rgba(123, 97, 255, 0.55), 0 18px 36px -14px rgba(123, 97, 255, 0.65);
}

@media (max-width: 767px) {
	.latest-title {
		font-size: 19px;
	}

	.latest-section {
		margin-bottom: 36px;
	}

	.latest-episodes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 12px;
	}
}

/* صور الملفات دائرية في كل مكان: الهيدر، "مين يشاهد؟"، إدارة الملفات، وتعديل الملف */
.viewer-avatar,
.viewer-avatar--sm,
.viewer-avatar--lg,
.viewer-avatar--xl,
.viewer-avatar--add {
	border-radius: 50%;
}

/* شارة "أطفال" داخل الدائرة: أقرب للنص عشان ما تنقص من أطرافها */
.viewer-avatar .viewer-kids {
	padding-bottom: 8%;
}

/* الصور الرمزية الجاهزة: الكرة تعبّي الدائرة، بدون خلفية اللون وراها */
.viewer-avatar.is-preset {
	background: transparent;
}

.viewer-avatar.is-preset .viewer-photo {
	transform: scale(1.1);
}

/* اختيار الصورة الرمزية في إضافة الملف وتعديله */
.avatar-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.avatar-choice {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.2s var(--ease);
}

.avatar-choice input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.avatar-choice img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	transform: scale(1.1);
	pointer-events: none;
}

.avatar-choice::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 3px solid transparent;
	border-radius: 50%;
	transition: border-color 0.2s, box-shadow 0.2s;
	pointer-events: none;
}

.avatar-choice:hover {
	transform: translateY(-2px);
}

.avatar-choice:has(input:checked)::after {
	border-color: var(--primary);
	box-shadow: 0 10px 24px -8px rgba(123, 97, 255, 0.8);
}

.avatar-choice:has(input:focus-visible)::after {
	border-color: #fff;
}

@media (max-width: 560px) {
	.avatar-choice {
		width: 52px;
		height: 52px;
	}
}

/* دائرة رفع الصورة جنب الصور الخمس */
.avatar-upload {
	display: grid;
	place-items: center;
	border: 2px dashed rgba(255, 255, 255, 0.3);
	color: var(--muted);
	background: center / cover no-repeat;
	transition: transform 0.2s var(--ease), border-color 0.2s, color 0.2s;
}

.avatar-upload:hover {
	border-color: var(--primary);
	color: var(--heading);
}

.avatar-upload input {
	z-index: 1;
}

/* الأيقونة في نص الدائرة بالضبط (بدون مسافة السطر تحتها) */
.avatar-upload__icon {
	display: grid;
	place-items: center;
	line-height: 0;
}

.avatar-upload__icon .icon {
	display: block;
	width: 22px;
	height: 22px;
}

.avatar-upload.is-active {
	border: 0;
}

.avatar-upload.is-active .avatar-upload__icon {
	display: none;
}

.avatar-upload.is-active::after {
	border-color: var(--primary);
	box-shadow: 0 10px 24px -8px rgba(123, 97, 255, 0.8);
}

.avatar-hint {
	display: block;
	margin-top: 10px;
	font-size: 12px;
}

/* صورة الملف في الهيدر: أكبر (٤٤ قريب من ارتفاع البحث، و٣٨ على الجوال) */
.avatar-btn--viewer .viewer-avatar--sm {
	width: 44px;
	height: 44px;
	font-size: 18px;
}

@media (max-width: 767px) {
	.avatar-btn--viewer .viewer-avatar--sm {
		width: 38px;
		height: 38px;
	}
}

/* ---------- المشغّل: أزرار ١٠ ثواني، ورسالة "جدّد اشتراكك" (الإعدادات ← VoxPlus ← المشغّل) ---------- */

/* ترجيع وتقديم ١٥ ثانية: يمين ويسار وسط الفيديو (الترجيع يسار والتقديم يمين، مثل شريط الوقت)، وتظهر مع شريط التحكم */
.player-seek {
	direction: ltr;
	position: absolute;
	z-index: 3;
	inset: 50% 0 auto;
	display: flex;
	justify-content: center;
	/* حول زر التشغيل اللي في الوسط */
	gap: clamp(150px, 20vw, 260px);
	transform: translateY(-50%);
	pointer-events: none;
}

.player-seek__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(14px) saturate(1.6);
	backdrop-filter: blur(14px) saturate(1.6);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	pointer-events: auto;
	/* الزجاج يتدرّج بنفسه بدل الشفافية، عشان التغبيش ما يطلع فجأة (نفس شريط التحكم) */
	transition: background-color 0.25s, backdrop-filter 0.25s, -webkit-backdrop-filter 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}

.player-seek__btn svg,
.player-seek__btn span {
	transition: opacity 0.25s;
}

.player-seek:not(.is-visible) .player-seek__btn {
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	background-color: rgba(255, 255, 255, 0);
	-webkit-backdrop-filter: blur(0) saturate(1);
	backdrop-filter: blur(0) saturate(1);
	box-shadow: none;
}

.player-seek:not(.is-visible) .player-seek__btn svg,
.player-seek:not(.is-visible) .player-seek__btn span {
	opacity: 0;
}

.player-seek__btn svg {
	width: 40px;
	height: 40px;
}

.player-seek__btn span {
	position: absolute;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	direction: ltr;
}

.player-seek__btn:hover {
	background: var(--btn-gradient);
	transform: scale(1.06);
}

.player-seek__btn.is-pulse {
	animation: seek-pulse 0.35s ease;
}

@keyframes seek-pulse {
	50% { transform: scale(0.88); }
}

/* رسالة "جدّد اشتراكك" مكان المشغّل، وخلفها التريلر صامت */
.player-locked {
	overflow: hidden;
	isolation: isolate;
}

.player-locked__poster,
.player-locked__trailer {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.player-locked__trailer {
	z-index: -1;
	pointer-events: none;
}

/* يوتيوب: أكبر من الإطار شوي عشان ما تبان أزراره وأطرافه */
iframe.player-locked__trailer {
	inset: -12% -6%;
	width: 112%;
	height: 124%;
}

.player-locked::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(0, 3, 28, 0.55), rgba(0, 3, 28, 0.88));
}

.player-locked__box {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
}

.player-locked__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	color: #fff;
	background: var(--btn-gradient);
	box-shadow: 0 14px 34px -10px rgba(123, 97, 255, 0.8);
}

.player-locked__icon .icon {
	width: 28px;
	height: 28px;
}

.player-locked__title {
	margin: 4px 0 0;
	font-size: clamp(22px, 3vw, 32px);
}

.player-locked__text {
	max-width: 420px;
	margin: 0;
	color: var(--text);
}

.player-locked__btn {
	margin-top: 8px;
	min-width: 200px;
}

@media (max-width: 767px) {
	.player-seek {
		gap: 120px;
	}

	.player-seek__btn {
		width: 52px;
		height: 52px;
	}

	.player-seek__btn svg {
		width: 32px;
		height: 32px;
	}

	.player-locked__icon {
		width: 50px;
		height: 50px;
	}

	.player-locked__text {
		font-size: 13px;
	}
}

/* قائمة الحساب: تنبيه الاشتراك المنتهي */
.dropdown-head .dropdown-expired {
	color: #ffd2d6;
	font-weight: 600;
}

/* ---------- قائمة الحلقات داخل المشغّل (مثل StreamVid) ---------- */
.ep-panel {
	position: absolute;
	z-index: 5;
	/* يمين المشغّل، وفوق شريط التحكم (عنوان الحلقة يختفي وقت ما تكون مفتوحة) */
	top: 12px;
	bottom: 64px;
	right: 12px;
	display: flex;
	flex-direction: column;
	width: min(380px, calc(100% - 24px));
	overflow: hidden;
	border-radius: 14px;
	color: #fff;
	background: rgba(25, 28, 51, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
	animation: ep-panel-in 0.25s var(--ease);
}

.ep-panel[hidden] {
	display: none;
}

@keyframes ep-panel-in {
	from { opacity: 0; transform: translateX(16px); }
}

[dir="rtl"] .ep-panel {
	animation-name: ep-panel-in-rtl;
}

@keyframes ep-panel-in-rtl {
	from { opacity: 0; transform: translateX(16px); }
}

.ep-panel__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 14px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ep-panel__title {
	flex-grow: 1;
	font-size: 16px;
}

.ep-panel__season select {
	height: 34px;
	min-height: 0;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.06);
}

.ep-panel__season-name {
	font-size: 13px;
	color: var(--text);
}

.ep-panel__close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	color: #fff;
	background: none;
	cursor: pointer;
}

.ep-panel__close:hover {
	background: rgba(255, 255, 255, 0.1);
}

.ep-panel__close .icon {
	width: 18px;
	height: 18px;
}

.ep-panel__list {
	flex: 1;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.ep-panel__list[hidden] {
	display: none;
}

.ep-panel__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 10px;
	color: #fff;
	transition: background 0.2s;
}

.ep-panel__item:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
}

.ep-panel__item.is-current {
	background: rgba(123, 97, 255, 0.22);
}

.ep-panel__thumb {
	position: relative;
	flex-shrink: 0;
	width: 72px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: var(--surface);
}

.ep-panel__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ep-panel__now {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 3, 28, 0.55);
}

.ep-panel__now .icon {
	width: 18px;
	height: 18px;
}

.ep-panel__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ep-panel__num {
	font-size: 12px;
	color: var(--muted);
}

.ep-panel__name {
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	unicode-bidi: plaintext;
	text-align: start;
}

.ep-panel__item.is-current .ep-panel__name,
.ep-panel__item.is-current .ep-panel__num {
	color: #c9b6ff;
}

@media (max-width: 767px) {
	.ep-panel {
		top: 8px;
		bottom: 52px;
		right: 8px;
		width: calc(100% - 16px);
	}

	.ep-panel__thumb {
		width: 60px;
	}
}