/* =========================================================
   Arab Media RTL — assets/css/style.css
   Lightweight, logical-properties-first, mobile-first CSS.
   ========================================================= */

@font-face {
	font-family: 'Tajawal';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: local('Tajawal');
}

:root {
	--color-primary: #5b3fd6;
	--color-primary-dark: #4630a8;
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-text: #1b1c23;
	--color-muted: #6b6f80;
	--color-border: #e5e7ee;
	--header-h: 64px;
	--radius: 10px;
	--shadow-sm: 0 1px 3px rgba(20, 20, 30, 0.06);
	--transition: 160ms ease;
	--content-max: min(100% - 3rem, 1600px);
}

[data-theme="dark"] {
	--color-primary: #8c7aff;
	--color-primary-dark: #6f5cff;
	--color-bg: #14151b;
	--color-surface: #1d1f28;
	--color-text: #eef0f5;
	--color-muted: #9a9db0;
	--color-border: #2c2e3a;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden; /* guard: no ancestor should ever be able to widen the page horizontally */
	max-width: 100%;
}

body {
	margin: 0;
	max-width: 100%;
	overflow-x: hidden; /* guard against any single long unbroken string (emails, URLs)
	                       forcing the whole document wider than the viewport, which was
	                       shrinking the header/content visually relative to the page */
	font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
	background: var(--color-bg);
	color: var(--color-text);
	line-height: 1.7;
	transition: background var(--transition), color var(--transition);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }

button { font-family: inherit; cursor: pointer; }

.container {
	width: var(--content-max);
	margin-inline: auto;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

/* ---------- Skip link ---------- */
.skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 1rem;
	background: var(--color-primary);
	color: #fff;
	padding: 0.6em 1em;
	border-radius: 6px;
	z-index: 1000;
	transition: inset-block-start var(--transition);
}
.skip-link:focus { inset-block-start: 0.5rem; }

/* =========================================================
   HEADER — hamburger (right) / search (center) / dark mode (left)
   ========================================================= */
.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: var(--color-primary);
	color: #fff;
	block-size: var(--header-h);
	box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .site-header { background: #373738; }

.site-header__inner {
	width: var(--content-max);
	margin-inline: auto;
	height: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
}

/* Right-hand group: hamburger + logo (first in DOM = visually right in RTL) */
.site-header__start {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	background: transparent;
	border: none;
	border-radius: 8px;
	color: #fff;
}
.menu-toggle:hover { background: rgba(255,255,255,0.12); }
.menu-toggle svg { inline-size: 22px; block-size: 22px; }

.site-branding__logo {
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}

/* Center: search */
.site-header__search {
	justify-self: stretch;
	max-inline-size: 480px;
	margin-inline: auto;
	inline-size: 100%;
}

.search-form {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.15);
	border-radius: 999px;
	padding-inline: 0.9rem;
	height: 40px;
}
.search-form:focus-within { background: rgba(255,255,255,0.25); }
.search-form__icon {
	inline-size: 18px;
	block-size: 18px;
	flex: none;
	opacity: 0.85;
}
.search-form__input {
	border: none;
	background: transparent;
	color: #fff;
	inline-size: 100%;
	padding-inline-start: 0.6rem;
	font-size: 0.95rem;
}
.search-form__input::placeholder { color: rgba(255,255,255,0.75); }
.search-form__input:focus { outline: none; }

/* Left: dark mode toggle */
.site-header__end {
	display: flex;
	align-items: center;
}

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: #fff;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12); }
.theme-toggle svg { inline-size: 20px; block-size: 20px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ---------- Off-canvas primary menu (opens from the right in RTL) ---------- */
.primary-menu {
	position: fixed;
	inset-block: 0;
	right: 0; /* Physical right anchor. This theme is RTL-only, so inset-inline-end
	             would resolve to the physical *left* edge under dir="rtl" and break
	             the off-canvas hide/show transform — use a physical value instead. */
	inline-size: min(320px, 85vw);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: -8px 0 24px rgba(0,0,0,0.15);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 220ms ease, visibility 0s linear 220ms;
	z-index: 60;
	overflow-y: auto;
	padding: 1rem;
}
.primary-menu.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 220ms ease, visibility 0s linear 0s;
}

.primary-menu__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 1rem;
}
.primary-menu__close {
	border: none;
	background: transparent;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 8px;
	color: var(--color-text);
}
.primary-menu__close:hover { background: var(--color-bg); }

.primary-menu__list,
.primary-menu__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-menu__list li { border-block-end: 1px solid var(--color-border); }
.primary-menu__list a {
	display: block;
	padding: 0.85rem 0.25rem;
	font-weight: 500;
}
.primary-menu__list a:hover { color: var(--color-primary); }
[data-theme="dark"] .primary-menu__list a:hover { color: #00fdff; }
.primary-menu__list .sub-menu { padding-inline-start: 1rem; }

.menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10,10,15,0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition);
	z-index: 55;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }

/* =========================================================
   MAIN LAYOUT
   ========================================================= */
.site-main {
	width: var(--content-max);
	margin-inline: auto;
	padding-block: 1.5rem 3rem;
	background: #ffffff;
}
[data-theme="dark"] .site-main { background: var(--color-surface); }

.page-title {
	font-size: 20px;
	margin-block: 0 1.25rem;
}

/* =========================================================
   RESPONSIVE CARD GRID
   ========================================================= */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
/* Safety cap: auto-fill guarantees a sensible MINIMUM card width (240px),
   but a 1fr track has no ceiling — if only 1 or 2 columns end up fitting
   at a given resolution, those cards would otherwise stretch to fill all
   the remaining space and look oversized. Capping each card's own
   max-width keeps it at a normal, consistent size no matter how many
   columns the grid decides to lay out at any given screen resolution.
   Scoped to 500px+ only, i.e. widths where 2+ columns can actually form —
   genuine narrow phone screens (a single full-width column) are left
   completely untouched. */
@media (min-width: 500px) {
	.posts-grid .card {
		max-width: 300px;
	}
}

/* Homepage only, desktop/large screens only: force exactly 4 posts per row
   (instead of the auto-fill default, which currently fits ~5). Tablets and
   phones keep the responsive auto-fill behavior above, untouched. Fixing
   the column count to 4 also makes each card — and its thumbnail — larger. */
@media (min-width: 1025px) {
	body.home .posts-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-border);
}
.card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Homepage cards: square (non-curved) thumbnail corners, and a fixed
   323×181 image box on large screens only — phones/tablets keep the
   regular fluid 16:9 box above so the grid stays responsive. */
body.home .card,
body.home .card__media {
	border-radius: 0;
}
@media (min-width: 1025px) {
	/* The generic .posts-grid .card { max-width: 300px } rule further
	   down would otherwise clip/overflow this fixed-size box, so the
	   card itself is widened to match exactly — this keeps the card
	   and its 323×181 image perfectly aligned at any resolution,
	   including 2K/4K, since --content-max already caps the overall
	   grid width and this only fixes each card's own size within it. */
	body.home .posts-grid .card {
		max-width: 323px;
		justify-self: center;
	}
	body.home .card__media {
		aspect-ratio: auto;
		inline-size: 100%;
		block-size: 181px;
	}
}
.card__badge {
	position: absolute;
	inset-block-end: 0.5rem;
	right: 0.5rem; /* physical corner, same reasoning as .primary-menu above */
	background: rgba(0,0,0,0.7);
	color: #fff;
	font-size: 0.75rem;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
}

.card__body {
	padding: 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
}
.card__category {
	font-size: 0.75rem;
	color: var(--color-primary);
	font-weight: 600;
}
.card__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}
.card { position: relative; }
.card__meta {
	margin-block-start: auto;
	font-size: 0.8rem;
	color: var(--color-muted);
}

/* =========================================================
   PAGINATION
   ========================================================= */
.pagination { margin-block-start: 2rem; }
.pagination__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0;
	margin: 0;
	justify-content: center;
}
.pagination__item a,
.pagination__item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 40px;
	min-block-size: 40px;
	padding-inline: 0.5rem;
	border-radius: 8px;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	font-size: 0.9rem;
}
.pagination__item.is-current span {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}
.pagination__item a:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* =========================================================
   SINGLE POST
   ========================================================= */
.single-post {
	max-inline-size: 100%;
}
.single-post__thumb {
	border-radius: var(--radius);
	overflow: hidden;
	margin-block-end: 1.25rem;
	aspect-ratio: 16/9;
}
.single-post__thumb--last {
	margin-block: 2rem 0;
}
.single-post__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Present in HTML for SEO/crawlers, but invisible to sighted visitors (same
   pattern as .screen-reader-text above) — not display:none, so this is not
   cloaking: every visitor and every bot receive identical markup. */
.single-post__thumb--visually-hidden {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.single-post__title { font-size: 1.15rem; margin-block: 1rem 0.5rem; }
.single-post__meta {
	color: var(--color-muted);
	font-size: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-end: 1.5rem;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--color-border);
}
.single-post__meta span {
	overflow-wrap: anywhere; /* long emails/usernames wrap instead of forcing page-wide overflow */
	min-width: 0;
}
.single-post__content { font-size: 1.05rem; max-inline-size: 62em; }
.single-post__content h2,
.single-post__content h3 { margin-block-start: 1.75rem; }
.single-post__content img { border-radius: var(--radius); margin-block: 1rem; }
.single-post__content a { color: var(--color-text); text-decoration: underline; }
[data-theme="dark"] .single-post__content a:hover { color: #00fdff; }

/* =========================================================
   YOU MAY LIKE (related posts) — 4 per row desktop, responsive
   ========================================================= */
.you-may-like { margin-block-start: 2.5rem; }
/* Square (non-curved) thumbnail corners in the related-posts section. */
.you-may-like .card,
.you-may-like .card__media {
	border-radius: 0;
}
/* Titles in this section should read pure black in light mode and pure
   white in dark mode (not the theme's slightly-softer default text
   color), regardless of the shared .card styles used elsewhere. */
.you-may-like .card__title,
.you-may-like .card__title a {
	color: #000;
}
[data-theme="dark"] .you-may-like .card__title,
[data-theme="dark"] .you-may-like .card__title a {
	color: #fff;
}
.you-may-like__title {
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
	margin-block: 0 1.25rem;
}
.you-may-like__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
	.you-may-like__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.you-may-like__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 420px) {
	.you-may-like__grid { gap: 0.75rem; }
}
/* على الهواتف تصبح البطاقة أضيق (عمودين)، فحجم عنوان 1rem الافتراضي
   لا يكفي لعرض عناوين المقالات الطويلة كاملة ضمن سطرين فيظهر مقصوصاً
   بنقاط (...). تصغير الخط هنا وزيادة عدد الأسطر المسموح بها يحل هذا
   لعناوين "قد يعجبك" وأيضاً عناوين مقالات [series_slider]، لأن كليهما
   يستخدمان نفس الكلاس .you-may-like. */
@media (max-width: 768px) {
	.you-may-like .card__title {
		font-size: 0.8rem;
		line-height: 1.35;
		-webkit-line-clamp: 3;
	}
}
@media (max-width: 420px) {
	.you-may-like .card__title {
		font-size: 0.75rem;
	}
}

.post-taxonomy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 1.5rem;
}
.post-taxonomy a {
	font-size: 0.8rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
}
.post-taxonomy a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-block: 2rem;
}
.post-nav__item {
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	transition: border-color var(--transition);
}
.post-nav__item:hover { border-color: var(--color-primary); }
.post-nav__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	height: 100%;
	color: inherit;
}
.post-nav__thumb {
	flex: none;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--color-border);
}
.post-nav__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.post-nav__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-inline-size: 0;
}
.post-nav__label { font-size: 0.75rem; color: var(--color-muted); }
.post-nav__title {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.post-nav__link:hover .post-nav__title { color: var(--color-primary); }

/* =========================================================
   SIDEBAR
   ========================================================= */
.content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
/* Default (and .sidebar-left): main content first (renders on the right
   in RTL), sidebar second (renders on the left). */
.content-layout.has-sidebar,
.content-layout.has-sidebar.sidebar-left {
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
}
/* .sidebar-right: swap the column widths and pull the sidebar into the
   first (right-hand, in RTL) track via order, so it visually sits on
   the right while the main content moves to the left. */
.content-layout.has-sidebar.sidebar-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
}
.content-layout.has-sidebar.sidebar-right > .widget-area {
	order: -1;
}
@media (max-width: 860px) {
	.content-layout.has-sidebar,
	.content-layout.has-sidebar.sidebar-left,
	.content-layout.has-sidebar.sidebar-right {
		grid-template-columns: minmax(0, 1fr);
	}
	.content-layout.has-sidebar.sidebar-right > .widget-area {
		order: 0;
	}
	/* Below 860px the sidebar stacks and stretches to the full width of
	   the page (which can still be quite wide — e.g. an 800px-wide
	   window/screen). Without a cap, .popular-posts (still a 2-column
	   grid) inflates its cards to that full width and looks oversized.
	   Capping the grid at roughly its normal desktop sidebar size keeps
	   card dimensions consistent at any resolution in this range. Real
	   phone widths are already narrower than this cap, so this rule has
	   no visible effect there and mobile is left untouched. */
	.popular-posts {
		max-width: 460px;
		margin-inline: auto;
	}
}
.widget { margin-block-end: 1.5rem; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.widget-title { margin-block-start: 0; font-size: 1rem; }

/* ---------- Popular Posts (article-page sidebar) ---------- */
.popular-posts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.9rem;
}
.popular-card { display: flex; flex-direction: column; }
.popular-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0;
	background: var(--color-border);
}
.popular-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}
.popular-card__media:hover img { transform: scale(1.04); }
/* Fixed 199×112 thumbnail box on large screens only — phones/tablets
   keep the fluid 4:3 box above so the sidebar stays responsive. */
@media (min-width: 1025px) {
	.popular-card__media {
		aspect-ratio: auto;
		inline-size: 199px;
		block-size: 112px;
	}
}
.popular-card__badge {
	position: absolute;
	inset-block-end: 0.4rem;
	right: 0.4rem; /* physical corner, same reasoning as .card__badge above */
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 0.7rem;
	line-height: 1;
	padding: 0.3rem 0.45rem;
	border-radius: 3px;
	white-space: nowrap;
}
.popular-card__title {
	margin-block: 0.55rem 0;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.popular-card__title a { color: var(--color-text); }
.popular-card__title a:hover { color: var(--color-primary); }
@media (max-width: 380px) {
	.popular-posts { gap: 0.6rem; }
	.popular-card__title { font-size: 0.8rem; }
}

/* =========================================================
   COMMENTS
   ========================================================= */
.comments-area { margin-block-start: 2.5rem; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-body {
	padding: 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	margin-block-end: 1rem;
	background: var(--color-surface);
	overflow-wrap: anywhere; /* long emails/URLs in comments must wrap, not overflow the page */
	min-width: 0;
}
.comment-form input,
.comment-form textarea {
	inline-size: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: var(--color-bg);
	color: var(--color-text);
	margin-block-end: 0.75rem;
	font-family: inherit;
}
.comment-form button,
.btn {
	background: var(--color-primary);
	color: #fff;
	border: none;
	padding: 0.7rem 1.4rem;
	border-radius: 8px;
	font-weight: 600;
	transition: background var(--transition);
}
.comment-form button:hover,
.btn:hover { background: var(--color-primary-dark); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
	background: var(--color-surface);
	border-block-start: 1px solid var(--color-border);
	margin-block-start: 3rem;
}
.site-footer .site-footer__bottom {
	border-block-start: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	width: var(--content-max);
	margin-inline: auto;
	padding-block: 1.25rem;
	font-size: 0.85rem;
	color: var(--color-muted);
}

/* يمين الشريط: الصفحات الثابتة */
.site-footer .footer-bottom__pages { order: 1; }
.site-footer .footer-bottom__pages ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.25rem;
	margin: 0;
	padding: 0;
}
.site-footer .footer-bottom__pages li { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-bottom__pages a {
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--transition);
}
.site-footer .footer-bottom__pages a:hover,
.site-footer .footer-bottom__pages a:focus-visible {
	color: var(--color-primary);
}

/* المنتصف: حقوق القالب */
.site-footer .footer-bottom__copy {
	text-align: center;
	flex: 1 1 auto;
	order: 2;
	margin: 0;
}

/* يسار الشريط: أيقونات التواصل الاجتماعي */
.site-footer .footer-bottom__social {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	order: 3;
}
.site-footer .footer-bottom__social li {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 0;
}
.site-footer .footer-bottom__social a {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	color: var(--color-muted);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	line-height: 0;
	transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}
.site-footer .footer-bottom__social svg {
	display: block;
	inline-size: 18px;
	block-size: 18px;
	flex-shrink: 0;
}
.site-footer .footer-bottom__social a:hover,
.site-footer .footer-bottom__social a:focus-visible {
	color: #fff;
	background: var(--color-primary);
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	.site-footer .site-footer__bottom {
		flex-direction: column;
		text-align: center;
	}
	.site-footer .footer-bottom__pages ul {
		justify-content: center;
	}
	.site-footer .footer-bottom__pages,
	.site-footer .footer-bottom__copy,
	.site-footer .footer-bottom__social {
		order: initial;
	}
}

/* =========================================================
   404
   ========================================================= */
.error-404 {
	text-align: center;
	padding-block: 3rem;
}
.error-404__code {
	font-size: clamp(3rem, 5vw + 1rem, 6rem);
	font-weight: 800;
	color: var(--color-primary);
	margin: 0;
}

/* =========================================================
   SEARCH PAGE
   ========================================================= */
.search-empty-box {
	text-align: center;
	padding-block: 2rem;
	color: #000000 !important;
}

[data-theme="dark"] .search-empty-box {
  color: #ffffff !important;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */
@media (max-width: 640px) {
	.post-nav { grid-template-columns: 1fr; }
}

/* Mobile-only "below header" search box (see .header-search-mobile in
   header.php). Hidden by default — only switched on for small phones
   below, so tablets and larger screens are completely untouched and
   keep the search box inside the header exactly as before. */
.header-search-mobile { display: none; }

/* Small phones (iPhone 4/SE/6/7/8 and similar): the logo can take up so much
   space in the top row that the search box shrinks down to just its icon.
   Fix: remove the search box from inside the header entirely on phones,
   and show it instead in its own full-width bar directly underneath the
   header — same size, same look, just moved below. Tablets and larger
   screens are untouched (search box stays inside the header as before). */
@media (max-width: 480px) {
	.site-header__search { display: none; }

	.header-search-mobile {
		display: block;
		background: var(--color-primary);
		padding: 0.6rem 1rem;
	}
	[data-theme="dark"] .header-search-mobile { background: #373738; }

	.header-search-mobile .search-form {
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.18);
		border: 1px solid rgba(255, 255, 255, 0.35);
		block-size: 42px;
	}
}

@media (min-width: 1600px) {
	:root { --content-max: min(100% - 4rem, 1500px); }
}

/* ==========================================
   عنوان المقال المدمج داخل بطاقة الفيلم (h1 منقول
   عبر main.js إلى داخل .cine-info-section فوق التقييم)
   ========================================== */
.cine-info-section .single-post__title.cine-embedded-title {
	margin: 0 0 12px 0;
	padding: 0;
	color: var(--cine-text-primary, #1a1a1a) !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: clamp(18px, 1.4vw + 12px, 22px);
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: -0.5px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .cine-info-section .single-post__title.cine-embedded-title {
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

@media (max-width: 600px) {
	.cine-info-section .single-post__title.cine-embedded-title {
		font-size: clamp(16px, 4.5vw, 22px);
	}
}

/* ==========================================
   متغيرات الألوان (Light / Dark)
========================================== */

:root {
  --cine-card-bg: #ffffff;
  --cine-card-bg-alt: #f6f7f9;
  --cine-card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.12);

  --cine-text-primary: #1a1a1a;
  --cine-text-secondary: #2b2b2b;
  --cine-text-muted: #6e6e6e;

  --cine-border-color: rgba(0, 0, 0, 0.08);

  --cine-star-color: #f5a623;
  --cine-combat-bg: #eef0ff;
  --cine-combat-text: #3d47c9;
  --cine-combat-border: rgba(83, 103, 255, 0.3);

  --cine-badge-scary: #d10000;
  --cine-badge-drama: #0088a0;

  --cine-accent-orange: #e07b00;
  --cine-accent-orange-text: #e07b00;
  --cine-cast-badge-bg: #e67e22;

  --cine-link-color: #1a1a1a;
  --cine-nav-bg: #ffffff;
  --cine-nav-text: #1a1a1a;

  --cine-neon-border: #17a300;
  --cine-neon-glow: rgba(255, 0, 0, 0.15);
}

[data-theme="dark"] {
  --cine-card-bg: #000000;
  --cine-card-bg-alt: #080808;
  --cine-card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);

  --cine-text-primary: #ffffff;
  --cine-text-secondary: #cccccc;
  --cine-text-muted: #bdbdbd;

  --cine-border-color: rgba(255, 255, 255, 0.08);

  --cine-star-color: #f5a623;
  --cine-combat-bg: rgba(83, 103, 255, 0.15);
  --cine-combat-text: #ffffff;
  --cine-combat-border: rgba(83, 103, 255, 0.3);

  --cine-badge-scary: #ff0000;
  --cine-badge-drama: #00fdff;

  --cine-accent-orange: #f39c12;
  --cine-accent-orange-text: #f39c12;
  --cine-cast-badge-bg: #e67e22;

  --cine-link-color: #ffffff;
  --cine-nav-bg: #000000;
  --cine-nav-text: #ffffff;

  --cine-neon-border: #17de05;
  --cine-neon-glow: #ff0000;
}

/* ==========================================
   حل إجبار اللون الأسود وتجاهل إضافات الكروم
========================================== */

[data-theme="dark"] .cine-wide-card,
[data-theme="dark"] .cine-info-section,
[data-theme="dark"] .cine-poster-column,
[data-theme="dark"] .movie-info-container,
[data-theme="dark"] .info-card,
[data-theme="dark"] .cast-card {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
  color-scheme: dark !important;
  filter: none !important;
}

[data-theme="dark"] .description-card-v2 {
  background: linear-gradient(135deg, #080808 0%, #000000 100%) !important;
  color-scheme: dark !important;
  filter: none !important;
}

/* ==========================================
   الحاوية الرئيسية وبطاقة الفيلم (Wide Card)
========================================== */
.cine-wide-card {
  direction: rtl;
  text-align: right;
  background-color: var(--cine-card-bg) !important;
  color: var(--cine-text-primary) !important;
  border-radius: 20px;
  width: 100%;
  max-width: 100%;
  box-shadow: var(--cine-card-shadow);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 25px auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* إلغاء التمدد الرأسي المحفّز للفراغ */
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--cine-border-color);
}

.cine-wide-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #5367ff 0%, #ff3333 100%);
  opacity: 0.8;
  transition: width 0.3s ease;
}

.cine-wide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.2);
  border-color: rgba(83, 103, 255, 0.3);
}

.cine-wide-card:hover::before {
  width: 6px;
}

/* ==========================================
   تنظيم قسم البيانات الداخلي (Info Section)
========================================== */
.cine-info-section {
  flex: 2 1 320px;
  min-width: 260px;
  padding: 16px 24px; /* ضغط المسافات الداخلية للقضاء على الارتفاع الزائد */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--cine-card-bg) !important;
  box-sizing: border-box;
}

.cine-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px; /* تقليل الهوامش بين العناصر */
}

.cine-story-align {
  display: block;
  margin-bottom: 0;
}

.cine-title-label {
  color: var(--cine-text-primary) !important;
  font-size: 17px;
  font-weight: 700;
  padding: 0px 10px;
  border-radius: 8px;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.cine-story-align .cine-title-label {
  float: right;
  margin-left: 10px;
  margin-bottom: 0;
  padding: 2px 10px;
  line-height: 1.4;
}

.cine-row-secondary .cine-title-label {
  color: var(--cine-text-primary) !important;
}

/* التقييم الاحترافي بالأسلوب السينمائي */
.cine-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 12px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cine-rating-pill:hover {
  transform: scale(1.06);
}

.cine-star-icon {
  color: var(--cine-star-color);
  font-size: 24px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.cine-rate-num {
  color: var(--cine-text-primary) !important;
  font-size: 16px;
  letter-spacing: 0.3px;
}

/* العنوان الرئيسي */
.cine-main-title {
  color: var(--cine-text-primary) !important;
  font-size: 19px;
  font-weight: 800;
  margin: 2px 0 8px 0;
  line-height: 2;
  letter-spacing: -0.4px;
}

/* مجموعة الشارات */
.cine-tags-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cine-badge {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 16.5px;
  font-weight: 700;
  transition: all 0.25s ease;
  letter-spacing: -0.2px;
}

.cine-badge:hover {
  transform: translateY(-2px);
}

.cine-badge-scary {
  color: var(--cine-badge-scary);
}

.cine-year-badge {
  background-color: var(--cine-combat-bg);
  color: var(--cine-combat-text);
  border: 1px solid var(--cine-combat-border);
}

.cine-badge-drama {
  color: var(--cine-badge-drama);
}

/* القصة والفقرة */
.cine-story-paragraph {
  color: var(--cine-text-secondary) !important;
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0;
  font-weight: 450;
  text-align: justify;
}

[data-theme="dark"] .cine-story-paragraph {
  color: #ffffff !important;
}

.cine-story-align::after {
  content: "";
  display: table;
  clear: both;
}

/* التجاوب الذكي للهواتف والشاشات الصغيرة */
@media (max-width: 768px) {
  .cine-story-align .cine-title-label {
    float: none;
    display: inline-block;
    margin-left: 0;
    margin-bottom: 8px;
    padding: 6px 10px;
    line-height: 1.4;
  }

  .cine-story-paragraph {
    display: block;
    width: 100%;
    text-align: justify;
    margin-top: 0;
  }
}

/* ==========================================
   قسم البوستر والتريلر (Poster Section)
========================================== */
.movie-poster-section {
  width: 100%;
  height: 320px;         /* الارتفاع المطلوب */
  max-height: 320px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.movie-poster-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.poster-shadow {
  position: absolute;
  inset: 0;
  transition: box-shadow 0.4s ease;
}

.trailer-overlay {
  display: contents;
}

.trailer-overlay h2 {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0;
  color: #ffffff !important;
  font-size: 18px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  font-weight: 700;
  text-align: center;
  z-index: 5;
  pointer-events: none;
}

.play-button-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 0 20px rgba(83, 103, 255, 0.8);
  z-index: 6;
  pointer-events: auto;
}

.play-button-middle::after {
  content: "▶";
  color: #ffffff !important;
  font-size: 30px;
  margin-left: 5px;
}

.movie-poster-section:hover .play-button-middle {
  transform: translate(-50%, -50%) scale(1.1);
  background: #ff3333;
  box-shadow: 0 0 20px rgba(255, 51, 51, 0.8);
}

/* ==========================================
   نافذة التريلر المنبثقة (Trailer Modal)
========================================== */
.trailer-modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  z-index: 999999;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 900px;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #ffffff !important;
  font-size: 32px;
  cursor: pointer;
  transition: .2s;
  z-index: 10;
}

.close-modal:hover {
  background: rgba(255, 255, 255, .2);
  color: #ff3333 !important;
  transform: scale(1.1);
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================
   تنسيقات زر المشاهدة والتحميل
========================================== */
.center-btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.custom-watch-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  text-decoration: none;
  background: linear-gradient(180deg, #e50914 0%, #b20710 100%);
  border: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.35);
  padding: 0;
  overflow: hidden;
  max-width: 340px;
  width: 100%;
  transition: all 0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.custom-watch-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #f40612 0%, #c40712 100%);
  box-shadow: 0 8px 18px rgba(229, 9, 20, 0.5);
}

.custom-watch-btn .btn-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 8px 12px;
  text-align: center;
  box-sizing: border-box;
}

.custom-watch-btn .btn-main-title,
.custom-watch-btn span.btn-main-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.custom-watch-btn .btn-sub-title,
.custom-watch-btn span.btn-sub-title {
  color: #f0f0f0 !important;
  -webkit-text-fill-color: #f0f0f0 !important;
  font-size: 11.5px;
  font-weight: 400;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  opacity: 0.9;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.custom-watch-btn .btn-icon-section {
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  align-self: stretch;
  box-sizing: border-box;
}

.custom-watch-btn .play-arrow {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #ffffff;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4));
  transition: transform 0.2s ease;
}

.custom-watch-btn:hover .play-arrow {
  transform: scale(1.1);
}

/* العمود المجمع لضبط عرض البوستر والحد التام للفراغات */
.cine-poster-column {
  flex: 0 0 300px;
  max-width: 300px;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  background-color: var(--cine-card-bg) !important;
}

.cine-poster-column .movie-poster-section {
  width: 100%;
  position: relative !important;
  margin-bottom: 0 !important;
}

.cine-poster-column .center-btn-wrapper {
  position: relative !important;
  z-index: 2 !important;
  clear: both !important;
  margin-top: 0 !important;
  width: 100% !important;
}

.cine-poster-column .custom-watch-btn {
  width: 100% !important;
  max-width: 100% !important;
}

#tab1.tab-content {
  padding: 0px 0;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================
   قائمة الممثلين (Cast)
========================================== */
.cast-container {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.neon-capsule {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  border-radius: 50px;
  background: var(--cine-card-bg-alt) !important;
  border: 1.5px solid var(--cine-neon-border);
  box-sizing: border-box;
  box-shadow: 0 0 4px var(--cine-neon-glow), 0 0 8px var(--cine-neon-glow), inset 0 0 6px rgba(0, 243, 255, 0.3);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

[data-theme="dark"] .neon-capsule {
  background: #080808 !important;
  color-scheme: dark !important;
}

.actor-name {
  color: var(--cine-text-primary) !important;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}

.neon-capsule:hover {
  transform: translateY(-3px);
  border-color: #ffd700;
  box-shadow:
    0 0 10px #ffae00,
    0 0 20px #ffd700,
    inset 0 0 10px rgba(255, 215, 0, 0.6);
}

/* ==========================================
   عناصر معزولة داخل مكونات السينما فقط
========================================== */
.cine-wide-card a,
.movie-info-container a {
  outline: none;
  text-decoration: none;
  transition: .2s all ease;
  color: var(--cine-link-color) !important;
}

.cine-wide-card h1,
.cine-wide-card h2,
.cine-wide-card h3,
.movie-info-container h1,
.movie-info-container h2,
.movie-info-container h3 {
  color: var(--cine-text-primary) !important;
}

/* ==========================================
   بطاقات معلومات الفيلم (Story / Cast Cards)
========================================== */
.movie-info-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  direction: rtl;
  text-align: right;
  color: var(--cine-text-secondary) !important;
}

.info-card {
  background-color: var(--cine-card-bg-alt) !important;
  border-radius: 8px;
  padding: 12px 18px;
  position: relative;
  box-sizing: border-box;
  border: 1px solid var(--cine-border-color);
}

.card-content {
  font-size: 17px;
  line-height: 2.6;
  color: var(--cine-text-secondary) !important;
  text-align: right;
}

[data-theme="dark"] .card-content {
  color: #ffffff !important;
}

.story-card .card-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.story-card .card-title h2 {
  color: var(--cine-accent-orange) !important;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.story-card .card-title .icon {
  font-size: 18px;
}

.story-card .card-title .line {
  display: inline-block;
  height: 4px;
  width: 50px;
  background-color: var(--cine-accent-orange);
  border-radius: 2px;
  flex-shrink: 0;
}

.description-card-v2 {
  background: linear-gradient(135deg, var(--cine-card-bg-alt) 0%, var(--cine-card-bg) 100%) !important;
  border: 1px solid var(--cine-accent-orange);
  padding: 12px 18px;
}

.description-card-v2 .card-header-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.description-card-v2 .header-icon {
  font-size: 15px;
}

.description-card-v2 .header-text {
  color: var(--cine-accent-orange-text) !important;
  font-weight: bold;
  font-size: 15px;
}

.cast-card {
  background-color: var(--cine-card-bg-alt) !important;
  padding: 12px 18px;
}

.cast-card .cast-badge {
  display: inline-block;
  background-color: var(--cine-cast-badge-bg);
  color: #ffffff !important;
  font-weight: bold;
  font-size: 13px;
  padding: 2px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.cast-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cast-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 16px;
  line-height: 2.6;
  color: var(--cine-text-secondary) !important;
}

.cast-role {
  color: var(--cine-accent-orange-text) !important;
  font-weight: bold;
  white-space: nowrap;
}

.cast-name {
  color: var(--cine-text-secondary) !important;
  display: inline;
}

[data-theme="dark"] .cast-name {
  color: #ffffff !important;
}

/* التجاوب مع الشاشات الصغيرة */
@media (max-width: 900px) {
  .cine-wide-card {
    flex-direction: column;
    margin: 10px auto;
    border-radius: 16px;
  }

  .movie-poster-section {
    flex: 0 0 auto;
    max-width: 100%;
    height: 300px;
  }

  .poster-shadow {
    box-shadow: inset 0 60px 80px var(--cine-card-bg);
  }

  .cine-info-section {
    padding: 16px;
  }

  .cine-poster-column {
    flex: 0 0 auto;
    max-width: 100%;
  }
}


/* === play css == */

.embeding {
  /* -- Palette -------------------------------------------------------- */
  --color-bg: #0b0d12;
  --color-surface: #12151c;
  --color-border: rgb(255 255 255 / 8%);

  /* الألوان المطلوبة */
  --color-blue-normal: #3949ab;
  --color-blue-active: #5b3fd6;

  --color-green-start: #2fac54;
  --color-green-end: #1f8a3f;

  --color-text: #f5f7fa;
  --color-text-muted: rgb(245 247 250 / 65%);

  --focus-ring: #6fb1ff;

  /* -- Layout ----------------------------------------------------------- */
  --player-max-width: 1700px;
  --player-gap-block: clamp(0.75rem, 2vw, 1.25rem);
  --edge-padding: 0;

  /* -- Radii & shadows ---------------------------------------------------*/
  --radius-md: 6px; 
  --radius-lg: 16px;

  --shadow-player:
    0 20px 60px -15px rgb(0 0 0 / 65%),
    0 4px 12px rgb(0 0 0 / 40%);
  --shadow-btn: none;
  --shadow-btn-hover: 0 10px 22px -8px rgb(0 0 0 / 55%);

  /* -- Motion ------------------------------------------------------------*/
  --transition-fast: 150ms ease;
  --transition-med: 250ms cubic-bezier(0.22, 0.61, 0.36, 1);

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

  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-med: 0ms;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

.container-fluid,
.button-container {
  box-sizing: border-box;
}

.container-fluid *,
.button-container * {
  box-sizing: border-box;
}

.container-fluid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   Shared centering wrapper
   ========================================================================== */

.container-fluid {
  width: 100%;
  max-width: var(--player-max-width);
  margin-inline: auto;
  padding-inline: var(--edge-padding);
  font-family: var(--font-base);
  color: var(--color-text);
}

.button-container {
  width: 100%;
  max-width: var(--player-max-width);
  margin-inline: auto;
  margin-block-start: var(--player-gap-block);
  padding-inline: var(--edge-padding);
  font-family: var(--font-base);
}

/* ==========================================================================
   Embedding wrapper
   ========================================================================== */

.embeding {
  display: inherit;
  flex-direction: column;
  gap: var(--player-gap-block);
  inline-size: 100%;
}

/* ==========================================================================
   Server List (الأزرار العلوية للشاشات الكبيرة)
   ========================================================================== */

#serversList {
  --server-gap: 10px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  gap: var(--server-gap);
  inline-size: 100%;
  
  /*  */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#serversList li {
  flex: 0 1 calc((100% - (3 - 1) * var(--server-gap)) / 3); 
  max-width: 115px; 
  min-width: 85px;  
  
  /* */
  list-style: none !important;
  list-style-type: none !important;
}

/* التنسيق الافتراضي للزر غير النشط */
#serversList li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  inline-size: 100%;
  block-size: 2.5rem; 
  padding-inline: 0.5rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
      background: #454448; 
  color: var(--color-text) !important;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem); 
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--shadow-btn);
  transition: all 0.25s ease;
}

/* إضافة الأيقونة المثلثة جهة اليمين (قبل الكلمة) للسيرفر غير النشط */
#serversList li a::before {
  content: "▶" !important;
  font-size: 15px !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
  color: #ffffff !important;
  display: inline-block !important;
  margin-inline-end: 4px !important;
  font-family: sans-serif !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* تأثير الـ Hover عند تمرير الماوس */
#serversList li:hover a {
  box-shadow: var(--shadow-btn-hover);
  filter: brightness(1.12); 
}

#serversList li:active a {
  filter: brightness(0.95);
}

/* ==========================================================================
   Active Server State (حالة الزر النشط)
   ========================================================================== */

#serversList li.active a {
  background: var(--color-blue-active) !important; 
  box-shadow: var(--shadow-btn-hover);
  border-color: rgba(255, 255, 255, 0.45); 
}

/* تعديل أيقونة الزر النشط لتصبح علامة إيقاف مؤقت */
#serversList li.active a::before {
  content: "❚❚" !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  color: #ffffff !important;
  display: inline-block !important;
  margin-inline-end: 4px !important;
  font-family: sans-serif !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Accessible focus styling */
#serversList li a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Video Player (iframe)
   ========================================================================== */

.embeding {
  position: relative;
}

#srcFrame {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
  max-inline-size: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  background-color: #000;
  box-shadow: var(--shadow-player);
  overflow: hidden;
}

@supports not (aspect-ratio: 16 / 9) {
  .embeding {
    position: relative;
    inline-size: 100%;
    padding-block-end: 56.25%;
    height: 0;
  }

  #srcFrame {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }
}

/* ==========================================================================
   Download Buttons
   ========================================================================== */

.button-container {
  --download-gap: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  gap: var(--download-gap);
}

.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 104px;
  max-width: 100%; 
  block-size: 2.75rem;
  padding-inline: 0.5rem;
  border-radius: 5px;
background: #1f8751;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-btn);
  transition: all 0.3s ease;
}

.download-btn:hover {
  box-shadow: var(--shadow-btn-hover);
  filter: brightness(1.08);
}

.download-btn:active {
  filter: brightness(0.92);
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

@media (min-width: 1600px) {
  #serversList li {
    max-width: 130px;
  }
  #serversList li a {
    block-size: 2.85rem;
  }
  .download-btn {
    max-width: 130px;
    block-size: 3rem;
  }
}

[dir="rtl"] .container-fluid,
[dir="rtl"] .button-container {
  direction: rtl;
}

/* التعديل الخاص بالهواتف والتابلت */
@media (max-width: 768px) {
  #serversList {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px 0px !important;
    width: 100% !important;
  }

  #serversList li {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  
  #serversList li a {
    width: 100% !important; 
    block-size: 2.4rem !important;
    padding-inline: 4px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  .download-btn {
    max-width: 50% !important; 
    height: 42px !important;    
  }

  /* 
     تعديل جوهري للتابلت: 
     بدلًا من فرض عرض 100vw وهامش سالب لجميع الأجهزة تحت 768px،
     سنترك التابلت (أكبر من 480px) يتبع عرض الحاوية الطبيعي ونلغي تمدده لكي لا يتخرب أبعاده عند التحميل الأول.
  */
  .embeding {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #srcFrame {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border-radius: var(--radius-lg) !important; /* نحافظ على الحواف الدائرية الأنيقة للتابلت */
  }

  /* --------------------------------------------------------------------
     تأثير الهواتف الذكية فقط (أصغر من 480px):
     هنا فقط نطبق تمدد الحواف الكاملة (Edge-to-Edge) ونسبة 1:1 في الوضع الرأسي للهاتف.
     -------------------------------------------------------------------- */
  @media (max-width: 480px) {
    .embeding {
      width: 100vw !important;
      max-width: 100vw !important;
      left: 50% !important;
      right: 50% !important;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
    }

    #srcFrame {
      border-radius: 0 !important;
    }

    @media (orientation: portrait) {
      #srcFrame {
        aspect-ratio: 1 / 1 !important;
      }
      @supports not (aspect-ratio: 1 / 1) {
        .embeding {
          padding-block-end: 100% !important;
        }
      }
    }
  }
}

/* TV + Large Screens */
@media (min-width: 1600px) {
  #srcFrame {
    width: 100%;
    max-height: 75vh;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }
}

@media (min-width: 2500px) {
  #srcFrame {
    max-height: 80vh;
  }
}

/* الشاشات الصغيرة (1024x768 إلى 1279x864 تقريباً) */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 864px) {
    #srcFrame {
        max-width: 760px !important;
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 auto;
        display: block;
    }
}

@media (min-width: 1200px) and (max-width: 1300px) {
    #srcFrame {
        max-width: 850px !important;
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

@media (min-width: 1440px) and (max-width: 1920px) {
    #srcFrame {
        max-width: 1000px !important;
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

@media (max-width: 800px) and (max-height: 600px) {
    #srcFrame {
        max-width: 576px !important;
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* ==========================================
   متغيرات الألوان للتبويبات (Light / Dark)
========================================== */

:root {
  --tabs-main-bg: #ffffff;
  --tabs-border-color: #e2dfeb;
  --tabs-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.12);

  --btn-inactive-bg: #f6f7f9;
  --btn-inactive-text: #2b2b2b;
  --btn-inactive-border: rgba(83, 103, 255, 0.2);

  --btn-active-text: #ffffff;
  --btn-active-border: #3949ab;
  --btn-active-bg-custom: #3949ab; 

  --text-main-color: #2b2b2b;
  --epic-title-color: #1a1a1a;
  --neon-dot-color: #5367ff;
}

[data-theme="dark"] {
  --tabs-main-bg: #000000;
  --tabs-border-color: rgba(255, 255, 255, 0.08);
  --tabs-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);

  --btn-inactive-bg: #080808;
  --btn-inactive-text: #cccccc;
  --btn-inactive-border: rgba(83, 103, 255, 0.3);

  --btn-active-text: #ffffff;
  --btn-active-border: #6f82ff;
  --btn-active-bg-custom: #3949ab; 

  --text-main-color: #ffffff;
  --epic-title-color: #ffffff;
  --neon-dot-color: #5367ff;
}

/* ==========================================
   حل إجبار اللون الأسود وتجاوز المتصفح
========================================== */

[data-theme="dark"] .movie-tabs {
  background-color: #000000 !important;
  background: #000000 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color-scheme: dark !important;
  filter: none !important;
}

[data-theme="dark"] .tab-buttons .tab-link:not(.active) {
  background-color: #080808 !important;
  background: #080808 !important;
  color: #cccccc !important;
  color-scheme: dark !important;
}

[data-theme="dark"] .cinema-epic-title,
[data-theme="dark"] .tab-content {
  color: #ffffff !important;
}

/* ==========================================
   الحاوية الرئيسية لقسم التبويبات
========================================== */

.movie-tabs {
  direction: rtl;
  text-align: right;
  width: 100%;
  margin: 30px 0;
  background-color: var(--tabs-main-bg) !important;
  border: 1px solid var(--tabs-border-color);
  padding: 25px;
  border-radius: 16px;
  box-shadow: var(--tabs-shadow);
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  padding-bottom: 12px;
  overflow: visible;
}

.tab-buttons .tab-link {
  padding: 12px 26px;
  background-color: var(--btn-inactive-bg);
  border: 2px solid var(--btn-inactive-border);
  color: var(--btn-inactive-text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-buttons .tab-link:hover {
  background: rgba(212, 160, 23, 0.12) !important;
  color: #d4a017 !important;
  border-color: #c59b27 !important;
  box-shadow: 0 0 12px rgba(197, 155, 39, 0.4);
}

.tab-buttons .tab-link.active {
  position: relative;
  overflow: visible;
  background: var(--btn-active-bg-custom) !important;
  background-color: var(--btn-active-bg-custom) !important;
  color: var(--btn-active-text) !important;
  border: 2px solid var(--btn-active-border) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(57, 73, 171, 0.4);
}

.tab-buttons .tab-link.active::before {
  content: "";
  position: absolute;
  inset: -6px;
  background: var(--btn-active-bg-custom);
  border-radius: 12px;
  filter: blur(8px);
  opacity: 0.2;
  z-index: -1;
  animation: glowAura 2s infinite alternate;
}

@keyframes glowAura {
  from {
    opacity: 0.15;
    transform: scale(1);
  }
  to {
    opacity: 0.3;
    transform: scale(1.04);
  }
}

.cinema-epic-title {
  color: var(--epic-title-color) !important;
  font-size: 19px;
  font-weight: 800;
  margin: 10px 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.neon-dot {
  width: 7px;
  height: 7px;
  background-color: var(--neon-dot-color);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px var(--neon-dot-color);
}

.tab-content {
  display: none;
  padding: 10px 5px;
  background: transparent !important;
  color: var(--text-main-color) !important;
  position: relative;
  font-size: 15.5px;
  line-height: 1.9;
  font-weight: 500;
  transition: color 0.3s ease;
}

.tab-content.active {
  display: block;
  animation: fadeInCinema 0.4s ease-in-out;
}

@keyframes fadeInCinema {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .movie-tabs {
    padding: 15px;
    margin: 20px 0;
  }

  .tab-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-bottom: 10px;
    overflow: visible !important;
  }

  .tab-buttons .tab-link {
    flex: 1 1 auto;
    text-align: center;
    padding: 8px 14px;
    font-size: 13.5px;
    flex-shrink: 0;
  }
  
  .tab-buttons::-webkit-scrollbar {
    height: 8px;
  }
  
  .tab-buttons::-webkit-scrollbar-thumb {
    background: #5367ff;
    border-radius: 10px;
  }

  .tab-content {
    padding: 10px 5px;
    font-size: 14.5px;
  }
}

/* ==========================================
   CAST CONTAINER & CAPSULES FIX
========================================== */

.cast-container {
  display: flex !important;
  flex-wrap: wrap !important;
  row-gap: 16px !important;
  column-gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  direction: rtl !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 8px 0 !important;
  overflow: hidden !important;
}

.neon-capsule {
  position: relative;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  padding: 6px 14px !important;
  margin-bottom: 4px !important;
  border-radius: 50px;
  background: var(--cine-card-bg-alt, #f6f7f9);
  border: 1.5px solid var(--cine-neon-border, #17a300);
  box-sizing: border-box !important;
  box-shadow: 0 0 4px var(--cine-neon-glow, rgba(255, 0, 0, 0.15)), 0 0 8px var(--cine-neon-glow, rgba(255, 0, 0, 0.15)), inset 0 0 6px rgba(0, 243, 255, 0.3);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  backdrop-filter: blur(4px);
  flex: 0 1 auto !important;
  max-width: 100% !important;
}

.actor-name {
  color: var(--cine-text-primary, #1a1a1a);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}

.neon-capsule:hover {
  transform: translateY(-3px);
  border-color: #ffd700 !important;
  box-shadow: 
    0 0 10px #ffae00,
    0 0 20px #ffd700,
    inset 0 0 10px rgba(255, 215, 0, 0.6) !important;
}

.neon-capsule:hover .actor-name {
  text-shadow: none;
}

[data-theme="dark"] .neon-capsule {
  background: #080808 !important;
  border-color: #17de05 !important;
  box-shadow: 0 0 4px #ff0000, 0 0 8px #ff0000, inset 0 0 6px rgba(0, 243, 255, 0.3) !important;
}

[data-theme="dark"] .actor-name {
  color: #ffffff !important;
}

@media (max-width: 600px) {
  .cast-container {
    row-gap: 12px !important;
    column-gap: 8px !important;
  }

  .neon-capsule {
    padding: 6px 10px !important;
    margin-bottom: 2px !important;
  }

  .actor-name {
    font-size: 12px;
  }
}

/* ==========================================
   [series_slider category="..."] — يعرض مشاركات
   قسم معيّن داخل محتوى المقال، بنفس شكل وتجاوب
   شبكة قسم "قد يعجبك" (.you-may-like) تماماً.
   ========================================== */
.series-slider.you-may-like { margin-block-start: 1.5rem; }