/* Seftam MA — Ads Frontend Styles */

.sfma-ad {
	position: relative;
	display: block;
	margin: 12px auto;
	text-align: center;
	max-width: 100%;
}

.sfma-ad .sfma-ad-media {
	max-width: 100%;
	height: auto;
	display: inline-block;
	border-radius: 6px;
}

.sfma-ad-link { display: inline-block; max-width: 100%; }

/* شريط الإعلانات المتحرك (Ticker) — يظهر أعلى كل صفحات الموقع */
.sfma-ticker-wrap {
	width: 100%;
	overflow: hidden;
	background: #111827;
	color: #fff;
	position: relative;
	z-index: 9998;
	/* الاتجاه يُضبط ديناميكياً عبر [data-direction] أدناه (تلقائي حسب لغة
	   النص، أو يدوي حسب اختيار المسؤول) — بمعزل تماماً عن اتجاه القالب/الصفحة. */
}
/* [data-direction] يتحكم في ترتيب عناصر flex داخل المسار — منفصل عمداً عن
   اتجاه نص كل عنصر (dir على .sfma-ticker-text) حتى تُقرأ الأرقام/الرموز
   داخل كل عنصر بشكل صحيح بغض النظر عن اتجاه حركة الشريط نفسه (المُعرَّف
   في @keyframes sfmaTickerFlowRTL/LTR أدناه). */
.sfma-ticker-wrap[data-direction="rtl"] { direction: rtl; }
.sfma-ticker-wrap[data-direction="ltr"] { direction: ltr; }
.sfma-ticker-inner {
	position: relative;
	padding-inline-start: 36px; /* مساحة لزر الإغلاق */
}
/* 🐛→✅ إصلاح استباقي (Risk Mitigation): كان التلاشي عند الحواف يعتمد على
   mask-image مع عنصر متحرك (transform). هذا المزيج تحديداً معروف عنه
   أخطاء تجميد فعلية (compositing bugs) على بعض متصفحات أندرويد الأقدم
   وشرائح رسومات معيّنة (خصوصاً Mali GPU) — قد تتوقف الطبقة المتحركة عن
   التحديث تماماً بعد أول رسمة، وهي بالضبط نفس الأعراض المُبلَّغ عنها
   ("تتحرك مرة واحدة ثم تختفي نهائياً"). استُبدل بتلاشي بواسطة طبقات
   تدرّج لوني (gradient overlay) عادية فوق المحتوى بدل قصّه (mask) —
   نفس الأثر البصري تقريباً، بلا أي علاقة بخط أنابيب تجميد الرسوميات
   (compositing pipeline)، فلا يوجد خطر تجميد الحركة إطلاقاً بهذا الأسلوب. */
.sfma-ticker-inner::before,
.sfma-ticker-inner::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	width: 40px;
	z-index: 1;
	pointer-events: none;
}
.sfma-ticker-inner::before { inset-inline-start: 0; background: linear-gradient(to right, #111827, transparent); }
.sfma-ticker-inner::after  { inset-inline-end: 0;   background: linear-gradient(to left,  #111827, transparent); }
.sfma-ticker-track {
	display: flex;
	white-space: nowrap;
	width: max-content;
	/* اتجاه الحركة الفعلي يُحدَّد حصراً بإشارة translateX داخل كل keyframe
	   (سالب = يمين→شمال، موجب = شمال→يمين)، لا باسم الـ keyframe نفسه ولا
	   بخاصية CSS direction — راجع @keyframes sfmaTickerFlowRTL/LTR أدناه
	   للتعريف الفعلي الحالي (مُحدَّث حسب تفضيل صريح من العميل، انظر
	   CHANGELOG v1.16.1). الافتراضي هنا (بلا data-direction) = نفس سلوك
	   sfmaTickerFlowRTL. */
	animation: sfmaTickerFlowRTL var(--sfma-ticker-duration, 30s) linear infinite;
	will-change: transform;
}
.sfma-ticker-wrap[data-direction="rtl"] .sfma-ticker-track { animation-name: sfmaTickerFlowRTL; }
.sfma-ticker-wrap[data-direction="ltr"] .sfma-ticker-track { animation-name: sfmaTickerFlowLTR; }
.sfma-ticker-wrap:hover .sfma-ticker-track,
.sfma-ticker-wrap.sfma-ticker-touch-paused .sfma-ticker-track { animation-play-state: paused; }
.sfma-ticker-item {
	display: inline-flex;
	align-items: center;
	padding: .55em 1.7em;
	font-size: 13px;
	font-weight: 600;
	border-inline-end: 1px solid rgba(255,255,255,.15);
}
/* حجم/شدة الشريط (صغير/متوسط/كبير) — "متوسط" مطابق تماماً للمظهر الافتراضي
   القديم، فلا تتأثر الإعلانات المُنشأة قبل هذا التحديث بأي شكل. الحشو بوحدة
   em عمداً حتى يتمدد تلقائياً مع حجم الخط بلا الحاجة لضبطه يدوياً. */
.sfma-ticker-size-sm .sfma-ticker-item { font-size: 12px; }
.sfma-ticker-size-md .sfma-ticker-item { font-size: 13px; }
.sfma-ticker-size-lg .sfma-ticker-item { font-size: 17px; }
.sfma-ticker-item .sfma-ad-link { color: inherit; text-decoration: none; }
.sfma-ticker-close {
	position: absolute;
	inset-inline-start: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,.15);
	color: #fff;
	border: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	z-index: 2;
}
/* تفضيل صريح من المسؤول: الحركة تعاكس اتجاه القراءة عمداً، لا تطابقه —
   العربي يدخل من الشمال ويخرج من اليمين (translateX موجب فيزيائياً). */
@keyframes sfmaTickerFlowRTL {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); } /* المحتوى مكرر مرتين لضمان تمرير سلس بلا فجوة */
}
/* الإنجليزي يدخل من اليمين ويخرج من الشمال (translateX سالب فيزيائياً) —
   عكس الحركة تماماً عن sfmaTickerFlowRTL، وبنفس المبدأ: يعاكس اتجاه
   القراءة الإنجليزي عمداً بناءً على تفضيل صريح من المسؤول. */
@keyframes sfmaTickerFlowLTR {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* احترام تفضيل المستخدم بتقليل الحركة (حساسية الحركة/الدوار) — يوقف الحركة
   تماماً بدل مجرد إبطائها. مهم: التوقف عند translateX(0) وحده كان يترك
   النص "مقطوعاً" عند حافة الحاوية بلا أي طريقة عملية لقراءة الباقي لزائر
   عادي (overflow-x:auto يحتاج سحباً يدوياً ما حدش بيعمله فعلياً) — لذلك
   نُلغي القص تماماً هنا ونسمح للعناصر بالالتفاف على أكثر من سطر، مع إخفاء
   النسخة المكرَّرة بصرياً (aria-hidden، المستخدَمة أصلاً لتمرير الحركة
   السلس) حتى لا يظهر نفس الإعلان مكرراً على الشاشة وقت تعطيل الحركة. */
@media (prefers-reduced-motion: reduce) {
	.sfma-ticker-track { animation: none; flex-wrap: wrap; width: 100%; }
	.sfma-ticker-track [aria-hidden="true"] { display: none; }
	.sfma-ticker-inner { overflow: visible; }
	/* تلاشي الحواف (gradient overlay) مالوش داعي على نص ثابت ملفوف بالكامل —
	   بيبقى ظاهر بوضوح تام بلا أي حاجة للتلاشي عند حواف مربّع لم يعد يتحرك. */
	.sfma-ticker-inner::before,
	.sfma-ticker-inner::after { display: none; }
}
@media (max-width: 782px) {
	.sfma-ticker-size-sm .sfma-ticker-item { font-size: 11px; }
	.sfma-ticker-size-md .sfma-ticker-item { font-size: 12px; }
	.sfma-ticker-size-lg .sfma-ticker-item { font-size: 14px; }
}

.sfma-ad-close {
	position: absolute;
	top: -10px;
	left: -10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #111827;
	color: #fff;
	border: 2px solid #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* شريط ثابت أسفل الشاشة */
.sfma-ad-sticky {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	margin: 0;
	background: #fff;
	box-shadow: 0 -2px 10px rgba(0,0,0,.15);
	padding: 6px 10px;
}

/* نافذة منبثقة (تُستخدم مع منطقة popup_entry) */
.sfma-ad[data-zone="popup_entry"] {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100000;
	background: #fff;
	padding: 16px;
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(0,0,0,.3);
	display: none; /* يُفعَّل عبر JS بعد التحقق من سقف التكرار */
}
.sfma-ad[data-zone="popup_entry"].sfma-ad-visible { display: block; }

.sfma-ad-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 99999;
	display: none;
}
.sfma-ad-backdrop.sfma-ad-visible { display: block; }

/* أنماط التحريك (Animation Presets) — تعتمد على متغيرات CSS قابلة للتخصيص
   لكل إعلان (المدة + المسافة/النسبة)، مع قيم احتياطية (fallback) مطابقة
   تماماً للمظهر الافتراضي القديم — فالإعلانات القديمة لا تتأثر بصرياً. */
@keyframes sfmaFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfmaSlideUp  { from { opacity: 0; transform: translateY(var(--sfma-anim-distance, 24px)); } to { opacity: 1; transform: translateY(0); } }
@keyframes sfmaSlideDown{ from { opacity: 0; transform: translateY(calc(var(--sfma-anim-distance, 24px) * -1)); } to { opacity: 1; transform: translateY(0); } }
@keyframes sfmaZoom     { from { opacity: 0; transform: scale(var(--sfma-anim-scale, .85)); } to { opacity: 1; transform: scale(1); } }
@keyframes sfmaBounce   { 0%{transform:translateY(0);} 30%{transform:translateY(calc(var(--sfma-anim-lift, 10px) * -1));} 60%{transform:translateY(0);} 80%{transform:translateY(calc(var(--sfma-anim-lift, 10px) * -0.4));} 100%{transform:translateY(0);} }
@keyframes sfmaPulse    { 0%,100%{transform:scale(1);} 50%{transform:scale(var(--sfma-anim-scale, 1.04));} }

.sfma-anim-fade      { animation: sfmaFadeIn var(--sfma-anim-duration, .5s) ease both; }
.sfma-anim-slide-up  { animation: sfmaSlideUp var(--sfma-anim-duration, .5s) ease both; }
.sfma-anim-slide-down{ animation: sfmaSlideDown var(--sfma-anim-duration, .5s) ease both; }
.sfma-anim-zoom      { animation: sfmaZoom var(--sfma-anim-duration, .4s) ease both; }
.sfma-anim-bounce     { animation: sfmaBounce var(--sfma-anim-duration, 1.4s) ease-in-out infinite; }
.sfma-anim-pulse      { animation: sfmaPulse var(--sfma-anim-duration, 1.8s) ease-in-out infinite; }

/* حجم/شدة الحركة (صغيرة/متوسطة/كبيرة) — "متوسطة" = القيم الافتراضية القديمة
   تماماً بالحرف، فلا يتغيّر مظهر أي إعلان موجود مسبقاً بدون تدخّل يدوي. */
.sfma-anim-size-sm { --sfma-anim-distance: 12px; --sfma-anim-scale: .93; --sfma-anim-lift: 6px; }
.sfma-anim-size-md { --sfma-anim-distance: 24px; --sfma-anim-scale: .85; --sfma-anim-lift: 10px; }
.sfma-anim-size-lg { --sfma-anim-distance: 44px; --sfma-anim-scale: .72; --sfma-anim-lift: 18px; }
/* النبض (Pulse) يكبر عن 1 وليس صوب 1، فنسبته تُعامَل عكسياً (١ + الفارق) */
.sfma-anim-pulse.sfma-anim-size-sm { --sfma-anim-scale: 1.02; }
.sfma-anim-pulse.sfma-anim-size-md { --sfma-anim-scale: 1.04; }
.sfma-anim-pulse.sfma-anim-size-lg { --sfma-anim-scale: 1.09; }

@media (max-width: 782px) {
	.sfma-ad[data-zone="popup_entry"] { width: 92%; max-width: 360px; }
}