:root {
/* ═══════ ألوان بابل وآشور ═══════ */
/* لازوردي بوابة عشتار + ذهبي نحاسي + رملي حجري + أحمر آجر */
--bg: #0c0c11;
--bg-deep: #050507;
--bg-gradient:
radial-gradient(ellipse at 20% 10%, rgba(30, 92, 168, 0.35) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(196, 100, 42, 0.2) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, #0c0c11 0%, #050507 75%);
--surface: #15151d;
--surface-elevated: #1a1a23;
--surface-hover: #1c1c26;
--border: #2a3a5e;
--border-strong: #3d527d;
/* ذهبي مشغول - لون الذهب الآشوري */
--accent: #e6b547;
--accent-hover: #f5c95e;
--accent-dim: #9e7a2e;
--accent-glow: rgba(230, 181, 71, 0.25);
/* لازورد عشتار العميق */
--lapis: #1e5ca8;
--lapis-deep: #123a6e;
--lapis-bright: #3d7fc9;
--lapis-glow: rgba(30, 92, 168, 0.4);
/* أحمر آجر بابل المحروق */
--brick: #c4642a;
--brick-deep: #8a4318;
/* رملي حجر آشور */
--sand: #d8c58c;
--sand-deep: #a8935c;
/* فيروزي */
--teal: #3a9590;
--text: #f5e8c8;
--text-dim: #c8b888;
--text-faded: #7a6d4a;
--danger: #d45030;
--success: #7ec96e;
--imdb: #f5c518;
--rt: #fa320a;
--mc: #6c3;
--shadow-sm: 0 4px 12px rgba(0,0,0,0.5);
--shadow: 0 20px 60px -20px rgba(6, 6, 8, 0.9);
--shadow-lg: 0 30px 80px -10px rgba(6, 6, 8, 0.95);
--shadow-gold: 0 4px 24px rgba(230, 181, 71, 0.3);
--shadow-lapis: 0 4px 24px rgba(30, 92, 168, 0.4);
/* ✨ نظام التصميم الفخم - Premium Design System ✨ */
/* Elevation Scale - ظلال متدرجة */
--elevation-1: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
--elevation-2: 0 3px 6px rgba(0,0,0,0.35), 0 3px 6px rgba(0,0,0,0.25);
--elevation-3: 0 10px 20px rgba(0,0,0,0.4), 0 6px 6px rgba(0,0,0,0.25);
--elevation-4: 0 14px 28px rgba(0,0,0,0.45), 0 10px 10px rgba(0,0,0,0.3);
--elevation-5: 0 19px 38px rgba(0,0,0,0.5), 0 15px 12px rgba(0,0,0,0.3);
/* Inner Shadows - ظلال داخلية للعمق */
--inset-light: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.2);
--inset-deep: inset 0 2px 4px rgba(0,0,0,0.4), inset 0 -1px 0 rgba(255,255,255,0.05);
--inset-gold: inset 0 1px 0 rgba(255,215,128,0.3), inset 0 -1px 0 rgba(140,90,30,0.5);
/* Glass Effects - زجاج فخم */
--glass-bg: rgba(23, 35, 63, 0.6);
--glass-bg-light: rgba(26, 26, 32, 0.4);
--glass-border: rgba(230, 181, 71, 0.18);
--glass-blur: blur(20px) saturate(180%);
--glass-blur-heavy: blur(32px) saturate(200%);
/* Gradients - تدرجات فخمة */
--gradient-gold: linear-gradient(135deg, #f5c95e 0%, #e6b547 50%, #c89a30 100%);
--gradient-gold-shimmer: linear-gradient(110deg, transparent 30%, rgba(255,215,128,0.3) 50%, transparent 70%);
--gradient-cinema: linear-gradient(135deg, #1e5ca8 0%, #0c0c11 50%, #8a4318 100%);
--gradient-noir: linear-gradient(180deg, rgba(13,13,17,0) 0%, rgba(13,13,17,0.95) 100%);
--gradient-surface: linear-gradient(180deg, rgba(26,26,32,0.6) 0%, rgba(18,18,24,0.6) 100%);
/* Motion Tokens - رموز الحركة */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
/* Spacing Scale - 4pt system */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
/* Radius Scale */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-full: 9999px;
}
/* ═══════════════════════════════════════════════════════════
🎬 CINEMA AURORA - تصميم سينمائي خرافي
يضيف خلفية متحركة + جسيمات + glow ديناميكي
═══════════════════════════════════════════════════════════ */
/* 🌌 خلفية Aurora متحركة - شفقية سينمائية */
body::before {
content: '';
position: fixed;
inset: -10%;
background:
radial-gradient(ellipse 80% 50% at 20% 30%, rgba(230, 181, 71, 0.15) 0%, transparent 50%),
radial-gradient(ellipse 60% 80% at 80% 70%, rgba(30, 92, 168, 0.18) 0%, transparent 50%),
radial-gradient(ellipse 70% 60% at 50% 90%, rgba(196, 100, 42, 0.12) 0%, transparent 50%);
filter: blur(60px);
z-index: -1;
pointer-events: none;
animation: auroraDance 20s ease-in-out infinite;
will-change: transform;
}
@keyframes auroraDance {
0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
25% { transform: translate(5%, -3%) rotate(2deg) scale(1.05); }
50% { transform: translate(-3%, 5%) rotate(-1deg) scale(0.95); }
75% { transform: translate(2%, 3%) rotate(1deg) scale(1.02); }
}
/* 🎬 Noise Texture - حبيبات فيلم سينمائي */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
animation: noiseMove 0.8s steps(8) infinite;
}
@keyframes noiseMove {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-5%, -10%); }
20% { transform: translate(-15%, 5%); }
30% { transform: translate(7%, -25%); }
40% { transform: translate(-5%, 25%); }
50% { transform: translate(-15%, 10%); }
60% { transform: translate(15%, 0); }
70% { transform: translate(0, 15%); }
80% { transform: translate(3%, 35%); }
90% { transform: translate(-10%, 10%); }
}
/* تأكد main فوق الخلفيات */
main, header, .bottom-nav, .sidebar-nav, .surprise-overlay,
.detail-overlay, .modal-backdrop {
position: relative;
z-index: 10;
}
/* ═══════════════════════════════════════════════════════════
🎬 PREMIUM CARD - بطاقات سينمائية فخمة جداً
═══════════════════════════════════════════════════════════ */
.card {
perspective: 1200px;
transform-style: preserve-3d;
}
.card .poster {
transform: translateZ(0);
transition: transform 0.6s var(--ease-out), box-shadow 0.6s ease, filter 0.4s ease;
}
/* 3D Tilt effect - شعور بالعمق */
.card:hover .poster {
transform:
translateY(-12px)
translateZ(20px)
rotateX(4deg)
rotateY(-2deg)
scale(1.03);
box-shadow:
0 30px 60px -10px rgba(0, 0, 0, 0.7),
0 0 0 1.5px var(--accent) inset,
0 0 50px var(--accent-glow),
0 0 100px rgba(230, 181, 71, 0.2);
}
/* Rim Light - إضاءة جانبية ذهبية */
.poster::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(255, 215, 128, 0.15) 0%,
transparent 30%,
transparent 70%,
rgba(255, 215, 128, 0.1) 100%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 2;
mix-blend-mode: overlay;
}
.card:hover .poster::before {
opacity: 1;
}
/* ═══════════════════════════════════════════════════════════
🎬 SECTION HEADERS - عناوين سينمائية فخمة
═══════════════════════════════════════════════════════════ */
.section-header h2 {
position: relative;
font-family: 'Cairo', 'Tajawal', sans-serif;
font-size: clamp(1.4rem, 3vw, 1.8rem);
font-weight: 900;
background: linear-gradient(135deg,
var(--text) 0%,
var(--accent) 50%,
var(--text) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-size: 200% 100%;
animation: titleShimmer 8s ease-in-out infinite;
}
@keyframes titleShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ═══════════════════════════════════════════════════════════
🎬 BUTTONS - أزرار سينمائية بـ glow
═══════════════════════════════════════════════════════════ */
.surprise-btn,
.btn-primary,
.action-btn {
position: relative;
overflow: hidden;
}
/* لمعة تمر فوق الأزرار */
.surprise-btn::after,
.btn-primary::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
transition: left 0.6s ease;
pointer-events: none;
}
.surprise-btn:hover::after,
.btn-primary:hover::after {
left: 100%;
}
/* ═══════════════════════════════════════════════════════════
🎬 SEARCH BOX - بحث زجاجي عميق
═══════════════════════════════════════════════════════════ */
.search-box {
background: rgba(18, 18, 24, 0.45) !important;
backdrop-filter: blur(24px) saturate(180%) !important;
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
border: 1.5px solid rgba(230, 181, 71, 0.25) !important;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.05) inset,
0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}
.search-box:focus-within {
background: rgba(18, 18, 24, 0.6) !important;
border-color: var(--accent) !important;
box-shadow:
0 12px 48px rgba(0, 0, 0, 0.5),
0 0 0 4px var(--accent-glow),
0 0 40px var(--accent-glow),
0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
transform: translateY(-3px);
}
/* ═══════════════════════════════════════════════════════════
🎬 HEADER - شريط علوي زجاجي عميق
═══════════════════════════════════════════════════════════ */
header {
background: rgba(13, 13, 17, 0.3) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
border-bottom: 1px solid rgba(230, 181, 71, 0.15) !important;
}
/* ═══════════════════════════════════════════════════════════
🎬 SETTINGS & MODALS - مودالات زجاجية فخمة
═══════════════════════════════════════════════════════════ */
.settings-overlay {
background: rgba(6, 6, 8, 0.75) !important;
backdrop-filter: blur(40px) saturate(180%) !important;
-webkit-backdrop-filter: blur(40px) saturate(180%) !important;
}
.settings-container {
background: linear-gradient(180deg,
rgba(26, 26, 32, 0.5) 0%,
rgba(18, 18, 24, 0.4) 100%) !important;
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1px solid rgba(230, 181, 71, 0.25) !important;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.7),
0 0 100px var(--accent-glow),
0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}
/* ═══════════════════════════════════════════════════════════
🎬 LOGO - شعار مضيء
═══════════════════════════════════════════════════════════ */
.logo {
position: relative;
}
.logo-icon {
filter: drop-shadow(0 0 20px var(--accent-glow));
animation: logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* ═══════════════════════════════════════════════════════════
🎬 FLOATING PARTICLES - جسيمات ذهبية طايرة
═══════════════════════════════════════════════════════════ */
.cinema-particles {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 3;
overflow: hidden;
}
.cinema-particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--accent);
border-radius: 50%;
opacity: 0;
box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent-glow);
animation: particleFloat 15s linear infinite;
}
@keyframes particleFloat {
0% {
opacity: 0;
transform: translateY(110vh) translateX(0) scale(0);
}
10% {
opacity: 0.6;
transform: translateY(90vh) translateX(20px) scale(1);
}
50% {
opacity: 0.8;
transform: translateY(50vh) translateX(-30px) scale(1.2);
}
90% {
opacity: 0.3;
transform: translateY(10vh) translateX(50px) scale(0.8);
}
100% {
opacity: 0;
transform: translateY(-10vh) translateX(0) scale(0);
}
}
/* ═══════════════════════════════════════════════════════════
🎬 SECTION CONTAINERS - حاويات سينمائية
═══════════════════════════════════════════════════════════ */
.trending-section,
.results-section,
.browse-section {
position: relative;
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: var(--radius-xl);
background: rgba(18, 18, 24, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(230, 181, 71, 0.08);
}
/* خط ذهبي عند الحواف */
.trending-section::before,
.results-section::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(230, 181, 71, 0.3) 50%,
transparent);
}
/* ═══════════════════════════════════════════════════════════
🎬 SCROLL BAR - شريط تمرير سينمائي
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: rgba(13, 13, 17, 0.5);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%);
border-radius: var(--radius-full);
border: 2px solid rgba(13, 13, 17, 0.5);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
}
/* ═══════════════════════════════════════════════════════════
🎬 IMPROVED FORMS - حقول إدخال محسنة
═══════════════════════════════════════════════════════════ */
input[type="text"]:not(.search-input),
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
transition: all var(--duration-base) var(--ease-out);
}
input[type="text"]:not(.search-input):focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
box-shadow: 0 0 0 3px var(--accent-glow), 0 4px 16px rgba(0, 0, 0, 0.3);
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════
🎬 REDUCED MOTION - احترام إعدادات النظام
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ═══════════════════════════════════════════════════════════
🎬 RESPONSIVE FINE-TUNING
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
body::before {
filter: blur(40px); /* أقل blur على الموبايل لأداء أفضل */
}
.trending-section,
.results-section,
.browse-section {
padding: 1rem;
border-radius: var(--radius-lg);
}
}
/* تحسين الـ accent variables للوضوح */
[data-theme="light"] {
/* ═══════ نهار بابلي - رمل وحجر وذهب ═══════ */
--bg: #f2e4bf;
--bg-deep: #e8d8a8;
--bg-gradient:
radial-gradient(ellipse at 20% 10%, rgba(30, 92, 168, 0.1) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(196, 100, 42, 0.1) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, #f7eccf 0%, #e8d8a8 75%);
--surface: #fcf5e2;
--surface-elevated: #faf0d2;
--surface-hover: #f5e8c0;
--border: #c8b07a;
--border-strong: #9e8656;
--accent: #8a5a0c;
--accent-hover: #6e4608;
--accent-dim: #c09856;
--accent-glow: rgba(138, 90, 12, 0.15);
--lapis: #123a6e;
--lapis-deep: #0a2448;
--lapis-bright: #1e5ca8;
--lapis-glow: rgba(18, 58, 110, 0.12);
--brick: #8a4318;
--brick-deep: #6a2d10;
--sand: #8a7540;
--sand-deep: #665530;
--teal: #1e6a65;
--text: #2a1e0d;
--text-dim: #6b5432;
--text-faded: #9a855a;
--danger: #a04020;
--success: #4a7a3a;
--imdb: #9a7510;
--rt: #a02006;
--mc: #4a7a24;
--shadow-sm: 0 4px 12px rgba(138, 90, 12, 0.12);
--shadow: 0 20px 60px -20px rgba(138, 90, 12, 0.25);
--shadow-lg: 0 30px 80px -10px rgba(138, 90, 12, 0.3);
--shadow-gold: 0 4px 24px rgba(138, 90, 12, 0.2);
--shadow-lapis: 0 4px 24px rgba(18, 58, 110, 0.15);
}
/* 🍯 ثيم العسل الدافئ */
[data-theme="honey"] {
--bg: #1f1508;
--bg-deep: #120a03;
--bg-gradient:
radial-gradient(ellipse at 20% 10%, rgba(245, 158, 11, 0.25) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(234, 88, 12, 0.2) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, #2a1d0c 0%, #120a03 75%);
--surface: #2a1d0c;
--surface-elevated: #3a2912;
--surface-hover: #4a3618;
--border: #5a4220;
--border-strong: #7a5a2e;
--accent: #f59e0b;
--accent-hover: #fbbf24;
--accent-dim: #b07308;
--accent-glow: rgba(245, 158, 11, 0.3);
--lapis: #ea580c;
--lapis-deep: #9a3412;
--lapis-bright: #fb923c;
--lapis-glow: rgba(234, 88, 12, 0.4);
--brick: #dc2626;
--brick-deep: #991b1b;
--sand: #fcd34d;
--sand-deep: #b88924;
--teal: #a16207;
--text: #fef3c7;
--text-dim: #d4b36a;
--text-faded: #7a5a2e;
--danger: #ef4444;
--success: #84cc16;
--imdb: #f5c518;
--rt: #fa320a;
--mc: #6c3;
--shadow-sm: 0 4px 12px rgba(0,0,0,0.5);
--shadow: 0 20px 60px -20px rgba(5, 3, 1, 0.9);
--shadow-lg: 0 30px 80px -10px rgba(5, 3, 1, 0.95);
--shadow-gold: 0 4px 24px rgba(245, 158, 11, 0.35);
--shadow-lapis: 0 4px 24px rgba(234, 88, 12, 0.4);
}
/* ❄️ ثيم الشتاء الفاخر */
[data-theme="winter"] {
--bg: #0f172a;
--bg-deep: #020617;
--bg-gradient:
radial-gradient(ellipse at 20% 10%, rgba(96, 165, 250, 0.3) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(148, 163, 184, 0.2) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, #1e293b 0%, #020617 75%);
--surface: #1e293b;
--surface-elevated: #334155;
--surface-hover: #475569;
--border: #334155;
--border-strong: #475569;
--accent: #60a5fa;
--accent-hover: #93c5fd;
--accent-dim: #3b82f6;
--accent-glow: rgba(96, 165, 250, 0.3);
--lapis: #6366f1;
--lapis-deep: #4338ca;
--lapis-bright: #818cf8;
--lapis-glow: rgba(99, 102, 241, 0.4);
--brick: #94a3b8;
--brick-deep: #64748b;
--sand: #cbd5e1;
--sand-deep: #94a3b8;
--teal: #0ea5e9;
--text: #e0e7ff;
--text-dim: #a5b4fc;
--text-faded: #6b7280;
--danger: #f87171;
--success: #34d399;
--imdb: #fbbf24;
--rt: #f87171;
--mc: #a3e635;
--shadow-sm: 0 4px 12px rgba(0,0,0,0.6);
--shadow: 0 20px 60px -20px rgba(2, 6, 23, 0.95);
--shadow-lg: 0 30px 80px -10px rgba(2, 6, 23, 0.98);
--shadow-gold: 0 4px 24px rgba(96, 165, 250, 0.35);
--shadow-lapis: 0 4px 24px rgba(99, 102, 241, 0.4);
}
/* 🌹 ثيم بغداد التراثي */
[data-theme="baghdad"] {
--bg: #051e15;
--bg-deep: #020d09;
--bg-gradient:
radial-gradient(ellipse at 20% 10%, rgba(34, 197, 94, 0.25) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(22, 163, 74, 0.2) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, #0a2818 0%, #020d09 75%);
--surface: #0a2818;
--surface-elevated: #133a25;
--surface-hover: #1a4d30;
--border: #1f5e3a;
--border-strong: #2e7a4e;
--accent: #22c55e;
--accent-hover: #4ade80;
--accent-dim: #15803d;
--accent-glow: rgba(34, 197, 94, 0.3);
--lapis: #0e7490;
--lapis-deep: #164e63;
--lapis-bright: #06b6d4;
--lapis-glow: rgba(14, 116, 144, 0.4);
--brick: #dc2626;
--brick-deep: #991b1b;
--sand: #fde047;
--sand-deep: #ca8a04;
--teal: #14b8a6;
--text: #dcfce7;
--text-dim: #86efac;
--text-faded: #4a7a3a;
--danger: #ef4444;
--success: #84cc16;
--imdb: #eab308;
--rt: #ef4444;
--mc: #84cc16;
--shadow-sm: 0 4px 12px rgba(0,0,0,0.5);
--shadow: 0 20px 60px -20px rgba(2, 13, 9, 0.9);
--shadow-lg: 0 30px 80px -10px rgba(2, 13, 9, 0.95);
--shadow-gold: 0 4px 24px rgba(34, 197, 94, 0.35);
--shadow-lapis: 0 4px 24px rgba(14, 116, 144, 0.4);
}
/* 🎬 ثيم هوليود الكلاسيكي */
[data-theme="hollywood-classic"] {
--bg: #1a0505;
--bg-deep: #0a0202;
--bg-gradient:
radial-gradient(ellipse at 20% 10%, rgba(220, 38, 38, 0.3) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(234, 179, 8, 0.2) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, #250808 0%, #0a0202 75%);
--surface: #250808;
--surface-elevated: #380e0e;
--surface-hover: #4a1313;
--border: #5a1818;
--border-strong: #7a2020;
--accent: #eab308;
--accent-hover: #facc15;
--accent-dim: #a16207;
--accent-glow: rgba(234, 179, 8, 0.35);
--lapis: #dc2626;
--lapis-deep: #991b1b;
--lapis-bright: #ef4444;
--lapis-glow: rgba(220, 38, 38, 0.4);
--brick: #dc2626;
--brick-deep: #991b1b;
--sand: #fde68a;
--sand-deep: #b88924;
--teal: #b91c1c;
--text: #fef2f2;
--text-dim: #fca5a5;
--text-faded: #7f1d1d;
--danger: #ef4444;
--success: #84cc16;
--imdb: #f5c518;
--rt: #fa320a;
--mc: #6c3;
--shadow-sm: 0 4px 12px rgba(0,0,0,0.6);
--shadow: 0 20px 60px -20px rgba(10, 2, 2, 0.95);
--shadow-lg: 0 30px 80px -10px rgba(10, 2, 2, 0.98);
--shadow-gold: 0 4px 24px rgba(234, 179, 8, 0.4);
--shadow-lapis: 0 4px 24px rgba(220, 38, 38, 0.4);
}
/* ✨ ثيم هوليود الحديث */
[data-theme="hollywood-modern"] {
--bg: #0a0a0f;
--bg-deep: #020204;
--bg-gradient:
radial-gradient(ellipse at 20% 10%, rgba(236, 72, 153, 0.25) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(168, 85, 247, 0.2) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, #0f0f1a 0%, #020204 75%);
--surface: #12121c;
--surface-elevated: #1c1c2e;
--surface-hover: #2a2a42;
--border: #2e2e48;
--border-strong: #4a4a6e;
--accent: #ec4899;
--accent-hover: #f472b6;
--accent-dim: #be185d;
--accent-glow: rgba(236, 72, 153, 0.4);
--lapis: #a855f7;
--lapis-deep: #7c3aed;
--lapis-bright: #c084fc;
--lapis-glow: rgba(168, 85, 247, 0.4);
--brick: #06b6d4;
--brick-deep: #0891b2;
--sand: #fbcfe8;
--sand-deep: #ec4899;
--teal: #06b6d4;
--text: #f5f3ff;
--text-dim: #c4b5fd;
--text-faded: #6b7280;
--danger: #f87171;
--success: #4ade80;
--imdb: #fbbf24;
--rt: #f87171;
--mc: #a3e635;
--shadow-sm: 0 4px 12px rgba(0,0,0,0.7);
--shadow: 0 20px 60px -20px rgba(2, 2, 4, 0.98);
--shadow-lg: 0 30px 80px -10px rgba(2, 2, 4, 1);
--shadow-gold: 0 4px 24px rgba(236, 72, 153, 0.45);
--shadow-lapis: 0 4px 24px rgba(168, 85, 247, 0.4);
}
/* 🌊 ثيم البحر */
[data-theme="ocean"] {
--bg: #0c1e2e;
--bg-deep: #050d18;
--bg-gradient:
radial-gradient(ellipse at 20% 10%, rgba(14, 165, 233, 0.3) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(6, 182, 212, 0.2) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, #102838 0%, #050d18 75%);
--surface: #102838;
--surface-elevated: #163549;
--surface-hover: #1e4460;
--border: #245573;
--border-strong: #2e6a8a;
--accent: #0ea5e9;
--accent-hover: #38bdf8;
--accent-dim: #0369a1;
--accent-glow: rgba(14, 165, 233, 0.35);
--lapis: #06b6d4;
--lapis-deep: #0e7490;
--lapis-bright: #22d3ee;
--lapis-glow: rgba(6, 182, 212, 0.4);
--brick: #64748b;
--brick-deep: #475569;
--sand: #cbd5e1;
--sand-deep: #94a3b8;
--teal: #14b8a6;
--text: #e0f2fe;
--text-dim: #7dd3fc;
--text-faded: #475569;
--danger: #ef4444;
--success: #22c55e;
--imdb: #fbbf24;
--rt: #ef4444;
--mc: #84cc16;
--shadow-sm: 0 4px 12px rgba(0,0,0,0.55);
--shadow: 0 20px 60px -20px rgba(5, 13, 24, 0.95);
--shadow-lg: 0 30px 80px -10px rgba(5, 13, 24, 0.98);
--shadow-gold: 0 4px 24px rgba(14, 165, 233, 0.4);
--shadow-lapis: 0 4px 24px rgba(6, 182, 212, 0.4);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
min-height: 100vh;
background: var(--bg-gradient);
color: var(--text);
font-family: 'Tajawal', system-ui, sans-serif;
overflow-x: hidden;
transition: background 0.4s ease, color 0.4s ease;
position: relative;
}
[dir="ltr"] body { font-family: 'DM Sans', system-ui, sans-serif; }
.display-ar { font-family: 'Aref Ruqaa', 'Amiri', 'Tajawal', serif; font-weight: 700; }
.display-ar-kufi { font-family: 'Reem Kufi', 'Tajawal', sans-serif; font-weight: 600; letter-spacing: 0.02em; }
.display-en { font-family: 'Fraunces', serif; letter-spacing: -0.02em; }
/* ═══════════ زخارف التراث العراقي بالخلفية ═══════════ */
body::after {
content: '';
position: fixed; inset: 0; pointer-events: none; z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 120px;
opacity: 0.08;
animation: driftPattern 80s linear infinite;
}
[data-theme="light"] body::after {
opacity: 0.12;
background-image: url("data:image/svg+xml;utf8,");
}
@keyframes driftPattern {
from { background-position: 0 0; }
to { background-position: 120px 120px; }
}
/* ═══════════ طبقة ضبابية/بخار متحركة ═══════════ */
.mist-layer {
position: fixed; inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.mist-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.35;
mix-blend-mode: screen;
}
[data-theme="light"] .mist-blob {
opacity: 0.25;
mix-blend-mode: multiply;
}
.mist-blob.b1 {
width: 500px; height: 500px;
background: var(--lapis);
top: -150px; left: -150px;
animation: float1 20s ease-in-out infinite;
}
.mist-blob.b2 {
width: 400px; height: 400px;
background: var(--accent);
bottom: -100px; right: -100px;
animation: float2 25s ease-in-out infinite;
}
.mist-blob.b3 {
width: 350px; height: 350px;
background: var(--brick);
top: 40%; left: 50%;
animation: float3 30s ease-in-out infinite;
opacity: 0.15;
}
@keyframes float1 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(200px, 150px) scale(1.2); }
}
@keyframes float2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-250px, -100px) scale(0.9); }
}
@keyframes float3 {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
33% { transform: translate(-80%, -30%) scale(1.3); }
66% { transform: translate(-20%, -70%) scale(0.8); }
}
/* ═══════════ جسيمات ذهبية طايرة ═══════════ */
.particles {
position: fixed; inset: 0;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
.particle {
position: absolute;
width: 4px; height: 4px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent-glow);
opacity: 0;
animation: particleRise 15s linear infinite;
}
@keyframes particleRise {
0% {
opacity: 0;
transform: translateY(100vh) scale(0);
}
10% {
opacity: 1;
transform: translateY(90vh) scale(1);
}
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-10vh) scale(0.5);
}
}
/* ═══════════ نظام الجدرايات - انتقال سينمائي ═══════════ */
.babylon-mural {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 3;
overflow: hidden;
}
.babylon-mural.fade-out .mural-scene.active {
opacity: 0.15;
}
/* كل مشهد جدارية */
.mural-scene {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear 0.8s,
transform 1s cubic-bezier(0.16, 1, 0.3, 1);
transform: scale(1.05);
}
.mural-scene.active {
opacity: 1;
visibility: visible;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s,
transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
transform: scale(1);
}
/* ستارة انتقال ذهبية */
.mural-curtain {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
background: linear-gradient(90deg,
transparent 0%,
var(--accent-glow) 45%,
var(--accent) 50%,
var(--accent-glow) 55%,
transparent 100%);
opacity: 0;
transform: translateX(-100%);
}
.mural-curtain.sweeping {
animation: curtainSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes curtainSweep {
0% { transform: translateX(-100%); opacity: 0; }
30% { opacity: 0.8; }
50% { transform: translateX(0); opacity: 1; }
70% { opacity: 0.8; }
100% { transform: translateX(100%); opacity: 0; }
}
[dir="rtl"] .mural-curtain.sweeping {
animation: curtainSweepRTL 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes curtainSweepRTL {
0% { transform: translateX(100%); opacity: 0; }
30% { opacity: 0.8; }
50% { transform: translateX(0); opacity: 1; }
70% { opacity: 0.8; }
100% { transform: translateX(-100%); opacity: 0; }
}
/* أقواس بابلية بالأعلى */
.babylon-arches {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 400px 120px;
background-repeat: repeat-x;
opacity: 0.6;
}
/* ثور مجنح لاماسو - على اليسار */
.lamassu-left,
.assyrian-lion-left,
.baghdad-arch-left,
.sumer-ziggurat-left,
.rose-garden-left {
position: absolute;
top: 22%;
left: -30px;
width: 240px;
height: 280px;
opacity: 0.35;
animation: ornamentFloat 12s ease-in-out infinite;
}
[data-theme="light"] .lamassu-left,
[data-theme="light"] .assyrian-lion-left,
[data-theme="light"] .baghdad-arch-left,
[data-theme="light"] .sumer-ziggurat-left,
[data-theme="light"] .rose-garden-left { opacity: 0.22; }
.lamassu-right,
.assyrian-lion-right,
.baghdad-arch-right,
.sumer-ziggurat-right,
.rose-garden-right {
position: absolute;
top: 22%;
right: -30px;
width: 240px;
height: 280px;
opacity: 0.35;
transform: scaleX(-1);
animation: ornamentFloatRight 12s ease-in-out infinite;
animation-delay: -6s;
}
[data-theme="light"] .lamassu-right,
[data-theme="light"] .assyrian-lion-right,
[data-theme="light"] .baghdad-arch-right,
[data-theme="light"] .sumer-ziggurat-right,
[data-theme="light"] .rose-garden-right { opacity: 0.22; }
@keyframes ornamentFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes ornamentFloatRight {
0%, 100% { transform: scaleX(-1) translateY(0); }
50% { transform: scaleX(-1) translateY(-10px); }
}
@media (max-width: 900px) {
.lamassu-left, .lamassu-right,
.assyrian-lion-left, .assyrian-lion-right,
.baghdad-arch-left, .baghdad-arch-right,
.sumer-ziggurat-left, .sumer-ziggurat-right,
.rose-garden-left, .rose-garden-right {
width: 140px; height: 165px; opacity: 0.18;
}
[data-theme="light"] .lamassu-left,
[data-theme="light"] .lamassu-right,
[data-theme="light"] .assyrian-lion-left,
[data-theme="light"] .assyrian-lion-right,
[data-theme="light"] .baghdad-arch-left,
[data-theme="light"] .baghdad-arch-right,
[data-theme="light"] .sumer-ziggurat-left,
[data-theme="light"] .sumer-ziggurat-right,
[data-theme="light"] .rose-garden-left,
[data-theme="light"] .rose-garden-right { opacity: 0.12; }
}
/* زخارف مسمارية/عربية جانبية */
.cuneiform-band,
.arabic-calligraphy-band {
position: absolute;
top: 45%;
width: 50px;
height: 40%;
opacity: 0.25;
font-size: 1.5rem;
color: var(--accent);
text-align: center;
line-height: 1.8;
letter-spacing: 0.2em;
writing-mode: vertical-rl;
}
.arabic-calligraphy-band {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-weight: 700;
font-size: 1.3rem;
}
.cuneiform-band.left, .arabic-calligraphy-band.left { left: 15px; }
.cuneiform-band.right, .arabic-calligraphy-band.right { right: 15px; }
[data-theme="light"] .cuneiform-band,
[data-theme="light"] .arabic-calligraphy-band { opacity: 0.18; }
@media (max-width: 768px) {
.cuneiform-band, .arabic-calligraphy-band { display: none; }
}
/* فريز تراثي بالأسفل */
.babylon-frieze,
.assyrian-frieze,
.baghdad-frieze {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-repeat: repeat-x;
opacity: 0.55;
}
.babylon-frieze {
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 80px;
}
.assyrian-frieze {
background-image: url("data:image/svg+xml;utf8,");
background-size: 300px 80px;
}
.baghdad-frieze {
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 80px;
}
/* رمز مركزي أعلى - يتغير حسب القسم */
.sun-disc,
.assyrian-crown,
.baghdad-dome,
.sumer-star,
.medina-compass {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 120px;
opacity: 0.22;
}
[data-theme="light"] .sun-disc,
[data-theme="light"] .assyrian-crown,
[data-theme="light"] .baghdad-dome,
[data-theme="light"] .sumer-star,
[data-theme="light"] .medina-compass { opacity: 0.15; }
.sun-disc {
animation: sunRotate 60s linear infinite;
}
@keyframes sunRotate {
from { transform: translateX(-50%) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg); }
}
.assyrian-crown {
animation: crownGlow 4s ease-in-out infinite;
}
@keyframes crownGlow {
0%, 100% { filter: drop-shadow(0 0 8px var(--accent-glow)); }
50% { filter: drop-shadow(0 0 24px var(--accent-glow)); }
}
.baghdad-dome {
animation: domeFloat 6s ease-in-out infinite;
}
@keyframes domeFloat {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-5px); }
}
.sumer-star {
animation: starPulse 3.5s ease-in-out infinite;
}
@keyframes starPulse {
0%, 100% {
transform: translateX(-50%) scale(1);
filter: drop-shadow(0 0 8px var(--accent-glow));
}
50% {
transform: translateX(-50%) scale(1.1);
filter: drop-shadow(0 0 20px var(--accent-glow));
}
}
.medina-compass {
animation: compassRotate 45s linear infinite;
}
@keyframes compassRotate {
from { transform: translateX(-50%) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg); }
}
@media (max-width: 640px) {
.sun-disc, .assyrian-crown, .baghdad-dome,
.sumer-star, .medina-compass {
width: 70px; height: 70px; top: 40px;
}
}
/* فريز سومري وفريز مدينة مدورة */
.sumer-frieze,
.medina-frieze {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-repeat: repeat-x;
opacity: 0.55;
}
.sumer-frieze {
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 80px;
}
.medina-frieze {
background-image: url("data:image/svg+xml;utf8,");
background-size: 300px 80px;
}
/* تأكد من أن طبقات التأثيرات فوق الجدارية */
header, nav.main-nav, main, footer, .detail-overlay, .modal-backdrop, .surprise-overlay {
position: relative;
z-index: 10;
}
/* تأثير حبيبات الفيلم */
body::before {
content: '';
position: fixed; inset: 0; pointer-events: none; z-index: 1;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* الهيدر */
header {
position: relative; z-index: 10;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-bottom: 1px solid var(--glass-border);
padding-top: env(safe-area-inset-top, 0px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
/* 📱 iOS PWA - يحسب safe-area للـ notch/dynamic island */
@supports (padding: max(0px)) {
body {
padding-top: env(safe-area-inset-top, 0px);
}
/* الـ overlays تحترم safe-area */
.friday-overlay,
.discover-overlay,
.stats-overlay,
.kitchens-overlay,
.chat-overlay,
.iq-cinema-overlay,
.games-overlay {
padding-top: env(safe-area-inset-top, 0px);
}
/* أزرار الإغلاق تحترم safe-area */
.iq-cinema-close,
.games-close,
.game-play-close,
.settings-close,
.iq-movie-details-close {
top: calc(16px + env(safe-area-inset-top, 0px)) !important;
}
}
[data-theme="light"] header {
background: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.header-inner {
max-width: 1280px; margin: 0 auto;
padding: 1.25rem 1.5rem;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 0.875rem; }
.logo-icon {
width: 44px; height: 44px;
border-radius: 0.625rem;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
color: var(--bg);
display: flex; align-items: center; justify-content: center;
position: relative;
box-shadow:
var(--shadow-gold),
inset 0 1px 0 rgba(255,255,255,0.25),
0 0 20px var(--accent-glow);
animation: logoIconPulse 3s ease-in-out infinite;
transition: transform 0.4s ease;
overflow: visible;
}
/* ✨ تأثير النبض الذهبي */
@keyframes logoIconPulse {
0%, 100% {
box-shadow:
var(--shadow-gold),
inset 0 1px 0 rgba(255,255,255,0.25),
0 0 20px var(--accent-glow);
}
50% {
box-shadow:
var(--shadow-gold),
inset 0 1px 0 rgba(255,255,255,0.3),
0 0 35px var(--accent-glow),
0 0 50px rgba(212, 165, 116, 0.35);
}
}
/* 🌟 النجمة الداخلية تدور */
.logo-icon svg {
animation: logoStarRotate 15s linear infinite;
}
@keyframes logoStarRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 💫 حلقة ضوئية خارجية تدور */
.logo-icon::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 0.75rem;
background: conic-gradient(
from 0deg,
var(--accent) 0%,
transparent 25%,
var(--lapis) 50%,
transparent 75%,
var(--accent) 100%
);
opacity: 0;
z-index: -2;
animation: logoIconRingRotate 4s linear infinite;
filter: blur(4px);
transition: opacity 0.3s ease;
}
.logo-icon:hover::after {
opacity: 0.8;
}
@keyframes logoIconRingRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 🌠 لما تمر عليه - تتوسع شوي */
.logo:hover .logo-icon {
transform: scale(1.08) rotate(-5deg);
animation-play-state: paused;
box-shadow:
var(--shadow-gold),
inset 0 1px 0 rgba(255,255,255,0.4),
0 0 45px var(--accent-glow),
0 0 80px rgba(212, 165, 116, 0.45);
}
.logo:hover .logo-icon svg {
animation-duration: 3s;
}
.logo-icon::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 0.875rem;
background: linear-gradient(135deg, var(--accent), transparent, var(--lapis));
z-index: -1;
opacity: 0.6;
filter: blur(8px);
animation: logoIconGlowPulse 3s ease-in-out infinite;
}
@keyframes logoIconGlowPulse {
0%, 100% { opacity: 0.4; filter: blur(8px); }
50% { opacity: 0.8; filter: blur(12px); }
}
.logo-text {
font-family: 'Tajawal', 'Amiri', serif;
font-size: clamp(1.35rem, 3.5vw, 1.75rem);
font-weight: 900;
letter-spacing: 0.025em;
color: var(--accent);
position: relative;
display: inline-block;
/* ✨ ظل ناعم واحد + توهج ذهبي خفيف */
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
0 0 20px rgba(212, 165, 116, 0.35);
transition: transform 0.3s ease, text-shadow 0.3s ease;
}
/* ✨ لمسة نجمة صغيرة */
.logo-text::after {
content: '✨';
position: absolute;
top: -4px;
inset-inline-end: -14px;
font-size: 0.7rem;
animation: logoStarTwinkle 3s ease-in-out infinite;
filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.7));
pointer-events: none;
text-shadow: none;
}
@keyframes logoStarTwinkle {
0%, 100% { opacity: 0.5; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
/* لما تمرر عليه */
.logo:hover .logo-text {
transform: scale(1.03);
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.35),
0 0 28px rgba(212, 165, 116, 0.5);
}
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.icon-btn {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 0.5rem;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
font-family: inherit;
}
.icon-btn:hover { background: var(--surface-hover); border-color: var(--accent-dim); }
.icon-btn-sm {
width: 40px; height: 40px;
}
.icon-btn-md {
padding: 0.5rem 0.85rem; font-size: 0.875rem; font-weight: 500;
}
/* الرئيسي */
main {
position: relative; z-index: 10;
max-width: 1280px; margin: 0 auto;
padding: 3rem 1.5rem;
}
/* ✨ Page transition animation */
main.view-transitioning {
animation: viewTransition 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes viewTransition {
0% {
opacity: 0;
transform: translateY(15px) scale(0.995);
filter: blur(3px);
}
50% {
filter: blur(0);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
/* انتقال السكشنات داخل main */
.results-section, .browse-section, .trending-section {
animation: sectionFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sectionFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ═══════════════════════════════════════════════════════════
🎬 HERO CINEMA - شاشة رئيسية فخمة احترافية
═══════════════════════════════════════════════════════════ */
.hero-cinema {
position: relative;
text-align: center;
padding: 3rem 1rem 2rem;
margin-bottom: 3rem !important;
overflow: visible;
}
.hero-orbit-1,
.hero-orbit-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1.5px dashed rgba(230, 181, 71, 0.15);
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
.hero-orbit-1 {
width: 400px; height: 400px;
animation: heroOrbitSpin 30s linear infinite;
}
.hero-orbit-2 {
width: 600px; height: 600px;
border-style: dotted;
border-color: rgba(30, 92, 168, 0.12);
animation: heroOrbitSpin 40s linear infinite reverse;
}
@keyframes heroOrbitSpin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: rgba(230, 181, 71, 0.12);
border: 1.5px solid rgba(230, 181, 71, 0.35);
border-radius: 9999px;
color: var(--accent);
font-size: 0.8rem;
font-weight: 700;
font-family: 'Cinzel', 'Georgia', serif;
letter-spacing: 0.15em;
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: heroBadgeIn 0.8s var(--ease-out) both;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px var(--accent-glow);
}
@keyframes heroBadgeIn {
0% { opacity: 0; transform: translateY(-15px) scale(0.9); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-badge-dot {
width: 8px; height: 8px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 10px var(--accent);
animation: badgeDotPulse 2s ease-in-out infinite;
}
@keyframes badgeDotPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.6; }
}
.hero-cinema h1 {
font-family: 'Cairo', 'Tajawal', sans-serif;
font-weight: 900;
line-height: 1.1;
margin: 0 0 1.25rem 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
letter-spacing: -0.02em;
padding: 0;
background: none;
-webkit-text-fill-color: initial;
color: initial;
}
.hero-cinema h1::after {
display: none;
}
.hero-line-1 {
font-size: clamp(2.5rem, 7vw, 4.5rem);
background: linear-gradient(135deg,
#f5c95e 0%, #ffd76e 50%, #e6b547 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 80px var(--accent-glow);
animation: heroLine1In 1s var(--ease-out) 0.2s both;
}
.hero-line-2 {
font-size: clamp(2rem, 5.5vw, 3.5rem);
color: var(--text);
opacity: 0.95;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
animation: heroLine2In 1s var(--ease-out) 0.5s both;
}
@keyframes heroLine1In {
0% { opacity: 0; transform: translateY(30px); filter: blur(10px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroLine2In {
0% { opacity: 0; transform: translateY(30px); filter: blur(10px); }
100% { opacity: 0.95; transform: translateY(0); filter: blur(0); }
}
.hero-subtitle {
font-family: 'Cairo', 'Tajawal', sans-serif;
font-size: clamp(0.95rem, 2vw, 1.15rem);
color: var(--text-dim);
max-width: 600px;
margin: 0 auto 1rem;
line-height: 1.6;
font-weight: 500;
opacity: 0;
animation: heroSubIn 0.8s var(--ease-out) 0.9s forwards;
}
@keyframes heroSubIn {
0% { opacity: 0; transform: translateY(15px); }
100% { opacity: 0.85; transform: translateY(0); }
}
@media (max-width: 640px) {
.hero-cinema {
padding: 2rem 1rem 1.5rem;
margin-bottom: 2rem !important;
}
.hero-orbit-1 { width: 300px; height: 300px; }
.hero-orbit-2 { width: 420px; height: 420px; }
.hero-badge { font-size: 0.72rem; padding: 0.4rem 1rem; margin-bottom: 1rem; }
.hero-cinema h1 { gap: 0.15rem; }
}
.hero {
text-align: center;
margin-bottom: var(--space-12);
animation: heroIn 1s var(--ease-out) both;
position: relative;
}
@keyframes heroIn {
0% { opacity: 0; transform: translateY(20px); filter: blur(8px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* خلفية مضيئة خفيفة للـ hero */
.hero::before {
content: '';
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 600px;
max-width: 100%;
height: 200px;
background: radial-gradient(
ellipse at center,
var(--accent-glow) 0%,
transparent 70%
);
filter: blur(40px);
pointer-events: none;
z-index: -1;
opacity: 0.6;
animation: heroGlow 4s ease-in-out infinite;
}
@keyframes heroGlow {
0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
50% { opacity: 0.7; transform: translateX(-50%) scale(1.1); }
}
.hero h1 {
font-family: 'Cairo', 'Tajawal', sans-serif;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 900;
line-height: 1.3;
margin-bottom: var(--space-4);
letter-spacing: -0.01em;
background: var(--gradient-gold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 60px var(--accent-glow);
position: relative;
display: inline-block;
padding: var(--space-1) var(--space-2);
}
/* ✨ خط تحتاني ذهبي مضيء */
.hero h1::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--gradient-gold);
border-radius: var(--radius-full);
box-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent-glow);
}
@media (max-width: 640px) {
.hero h1 {
line-height: 1.5;
padding: 0.2rem 0.3rem;
}
}
/* فاصل زخرفي تراثي */
.divider {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 1.5rem auto;
position: relative;
height: auto;
width: auto;
background: transparent;
}
.divider::before,
.divider::after {
content: '';
display: block;
height: 1px;
width: 80px;
background: linear-gradient(90deg, transparent, var(--accent-dim), var(--accent), var(--accent-dim), transparent);
}
.divider-ornament {
width: 20px; height: 20px;
display: inline-block;
position: relative;
}
.divider-ornament::before,
.divider-ornament::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid var(--accent);
transform: rotate(45deg);
}
.divider-ornament::after {
transform: rotate(0deg);
border-color: var(--accent-dim);
}
/* شريط البحث */
.search-form {
max-width: 680px; margin: 0 auto 4rem;
position: relative;
}
.search-form::before {
content: '';
position: absolute;
inset: -12px;
border-radius: 9999px;
background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
filter: blur(20px);
}
.search-form:focus-within::before { opacity: 1; }
.search-box {
position: relative;
display: flex; align-items: center;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1.5px solid var(--glass-border);
border-radius: var(--radius-full);
box-shadow:
var(--elevation-2),
var(--inset-light),
0 0 0 1px rgba(230, 181, 71, 0.05);
transition: all var(--duration-slow) var(--ease-out);
overflow: visible;
}
.search-box:focus-within {
border-color: var(--accent);
box-shadow:
var(--elevation-3),
var(--inset-light),
0 0 0 4px var(--accent-glow),
0 0 24px var(--accent-glow);
transform: translateY(-2px);
}
/* 🔍 اقتراحات البحث */
.search-suggestions {
position: absolute;
top: calc(100% + 0.5rem);
inset-inline-start: 0;
inset-inline-end: 0;
background: var(--surface-elevated);
border: 1.5px solid var(--border);
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.08);
z-index: 100;
max-height: 65vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
animation: suggestionsFadeIn 0.18s ease-out;
}
.search-suggestions.hidden { display: none; }
/* ═══════════════════════════════════════════════════
🎬 Search Overlay - Netflix Style
═══════════════════════════════════════════════════ */
.search-overlay {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 999999;
display: flex;
flex-direction: column;
animation: searchOverlaySlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.search-overlay.hidden {
display: none;
}
/* إخفاء العناصر اللي ممكن تطلع فوق الـ overlay */
body.search-overlay-open .sidebar-nav,
body.search-overlay-open .hamburger-btn,
body.search-overlay-open .bottom-nav,
body.search-overlay-open .surprise-overlay,
body.search-overlay-open header,
body.search-overlay-open .main-header,
body.search-overlay-open .app-header,
body.search-overlay-open .install-banner {
display: none !important;
}
body.search-overlay-open {
overflow: hidden;
}
.search-overlay.closing {
animation: searchOverlaySlideDown 0.25s cubic-bezier(0.4, 0, 1, 1);
}
@keyframes searchOverlaySlideUp {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes searchOverlaySlideDown {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(100%);
}
}
/* الهيدر - السهم + خانة البحث */
.search-overlay-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
padding-top: calc(1rem + env(safe-area-inset-top, 0px));
background: linear-gradient(180deg, var(--surface) 0%, rgba(10, 15, 25, 0.98) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 10;
}
.search-overlay-back {
width: 44px;
height: 44px;
background: transparent;
border: none;
color: var(--text);
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.search-overlay-back:hover {
background: rgba(255, 215, 0, 0.1);
color: var(--accent);
transform: translateX(2px);
}
.search-overlay-back svg {
width: 24px;
height: 24px;
}
[dir="rtl"] .search-overlay-back svg {
transform: scaleX(-1);
}
.search-overlay-input-wrap {
flex: 1;
position: relative;
display: flex;
align-items: center;
background: var(--surface-elevated);
border: 2px solid var(--border);
border-radius: 14px;
padding: 0 0.75rem;
transition: all 0.2s ease;
}
.search-overlay-input-wrap:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.15);
}
.search-overlay-icon {
width: 20px;
height: 20px;
color: var(--text-dim);
flex-shrink: 0;
}
.search-overlay-input-wrap:focus-within .search-overlay-icon {
color: var(--accent);
}
#searchOverlayInput {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--text);
font-size: 1.05rem;
font-weight: 500;
padding: 0.95rem 0.5rem;
font-family: inherit;
direction: rtl;
}
#searchOverlayInput::placeholder {
color: var(--text-dim);
font-weight: 400;
}
.search-overlay-clear {
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.08);
border: none;
color: var(--text);
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.search-overlay-clear:hover {
background: rgba(255, 100, 100, 0.2);
color: #ff6b6b;
}
.search-overlay-clear svg {
width: 16px;
height: 16px;
}
.search-overlay-clear.hidden {
display: none;
}
/* المحتوى */
.search-overlay-content {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 1.25rem 1.25rem 4rem;
padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}
/* عنوان قسم (🔥 رائج / 🕒 آخر بحثاتك / 📊 نتائج) */
.search-section {
margin-bottom: 2.5rem;
}
.search-section-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
color: var(--text);
font-size: 1.15rem;
font-weight: 800;
}
.search-section-title-text {
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-section-title-icon {
font-size: 1.3rem;
}
.search-section-clear-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text-dim);
font-size: 0.8rem;
padding: 0.35rem 0.85rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.search-section-clear-btn:hover {
background: rgba(255, 100, 100, 0.1);
color: #ff6b6b;
border-color: rgba(255, 100, 100, 0.3);
}
/* Grid البوسترات */
.search-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem;
}
.search-card {
cursor: pointer;
transition: transform 0.2s ease;
position: relative;
}
.search-card:hover {
transform: translateY(-4px);
}
.search-card:active {
transform: scale(0.97);
}
.search-card-poster-wrap {
position: relative;
aspect-ratio: 2 / 3;
border-radius: 12px;
overflow: hidden;
background: var(--surface);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.2s ease;
}
.search-card:hover .search-card-poster-wrap {
box-shadow: 0 8px 24px rgba(255, 215, 0, 0.25), 0 0 0 2px var(--accent);
}
.search-card-poster {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.search-card-poster.is-person {
border-radius: 50%;
aspect-ratio: 1;
}
.search-card-person {
aspect-ratio: 1;
border-radius: 50%;
}
.search-card-badge {
position: absolute;
top: 0.5rem;
inset-inline-end: 0.5rem;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--accent);
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.55rem;
border-radius: 6px;
display: flex;
align-items: center;
gap: 0.2rem;
}
.search-card-rank {
position: absolute;
bottom: -0.25rem;
inset-inline-start: -0.5rem;
font-size: 5rem;
font-weight: 900;
line-height: 1;
color: var(--accent);
-webkit-text-stroke: 2px var(--bg);
text-shadow: 3px 0 0 var(--bg);
z-index: 1;
font-family: 'Tajawal', sans-serif;
pointer-events: none;
opacity: 0.95;
}
.search-card-info {
margin-top: 0.55rem;
padding: 0 0.15rem;
}
.search-card-title {
color: var(--text);
font-size: 0.92rem;
font-weight: 700;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 0.2rem;
}
.search-card-meta {
color: var(--text-dim);
font-size: 0.78rem;
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.search-card-meta-item {
display: inline-flex;
align-items: center;
gap: 0.15rem;
}
.search-card-meta-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--text-dim);
opacity: 0.5;
}
/* Loading state */
.search-overlay-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 1rem;
color: var(--text-dim);
gap: 1rem;
}
.search-overlay-loading-spinner {
width: 48px;
height: 48px;
border: 3px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
/* Empty state */
.search-overlay-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 1.5rem;
text-align: center;
color: var(--text-dim);
}
.search-overlay-empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}
.search-overlay-empty-title {
color: var(--text);
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.search-overlay-empty-text {
color: var(--text-dim);
font-size: 0.95rem;
line-height: 1.6;
}
/* Results count */
.search-results-count {
color: var(--text-dim);
font-size: 0.85rem;
font-weight: 500;
margin-inline-start: 0.5rem;
}
/* ═══════════ Filters Bar ═══════════ */
.search-filters {
display: flex;
gap: 0.5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0 0 0.75rem;
margin-bottom: 1.25rem;
scrollbar-width: none;
border-bottom: 1px solid var(--border);
}
.search-filters::-webkit-scrollbar {
display: none;
}
.search-filter-btn {
background: var(--surface-elevated);
border: 1.5px solid var(--border);
color: var(--text-dim);
padding: 0.5rem 1rem;
border-radius: 20px;
cursor: pointer;
font-size: 0.88rem;
font-weight: 600;
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: inherit;
}
.search-filter-btn:hover {
border-color: var(--accent);
color: var(--text);
}
.search-filter-btn.active {
background: var(--accent);
border-color: var(--accent);
color: #000;
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}
.search-filter-count {
background: rgba(0, 0, 0, 0.15);
padding: 0.1rem 0.4rem;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 700;
}
.search-filter-btn.active .search-filter-count {
background: rgba(0, 0, 0, 0.2);
}
/* ═══════════ Keyword Filter Chips ═══════════ */
.keyword-filters-wrap {
padding: 0.5rem 0 0.75rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0.75rem;
}
.keyword-filters-label {
font-size: 0.75rem;
color: var(--text-dim);
margin-bottom: 0.4rem;
font-weight: 600;
}
.keyword-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.keyword-chip {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text-dim);
padding: 0.3rem 0.7rem;
border-radius: 20px;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: all 0.18s ease;
font-family: inherit;
white-space: nowrap;
}
.keyword-chip:hover {
border-color: var(--accent);
color: var(--text);
}
.keyword-chip.active {
background: rgba(255, 215, 0, 0.15);
border-color: var(--accent);
color: var(--accent);
}
.keyword-chip.clear-chip {
background: rgba(255, 100, 100, 0.1);
border-color: rgba(255, 100, 100, 0.3);
color: #ff6b6b;
}
.keyword-chip.rating-chip.active { background: rgba(255, 215, 0, 0.2); }
.keyword-chip.year-chip.active { background: rgba(100, 180, 255, 0.15); border-color: #64b4ff; color: #64b4ff; }
.keyword-chip.word-chip.active { background: rgba(100, 220, 130, 0.15); border-color: #64dc82; color: #64dc82; }
/* ═══════════ Sort dropdown ═══════════ */
.search-sort-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
.search-sort-select {
background: var(--surface-elevated);
border: 1.5px solid var(--border);
color: var(--text);
padding: 0.45rem 0.85rem;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
outline: none;
}
.search-sort-select:hover {
border-color: var(--accent);
}
/* على شاشات أكبر */
@media (min-width: 640px) {
.search-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1.25rem;
}
.search-overlay-header {
padding: 1.25rem 2rem;
}
.search-overlay-content {
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
#searchOverlayInput {
font-size: 1.15rem;
}
}
@media (min-width: 1024px) {
.search-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1.5rem;
}
}
/* 🏷️ Section headers (آخر بحثاتك، رائج) */
.search-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 1rem 0.5rem;
font-size: 0.78rem;
font-weight: 700;
color: var(--accent);
text-transform: none;
letter-spacing: 0.02em;
background: linear-gradient(180deg, rgba(255, 215, 0, 0.04), transparent);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 2;
}
.search-section-clear {
background: transparent;
border: none;
color: var(--text-dim);
font-size: 0.75rem;
cursor: pointer;
padding: 0.2rem 0.5rem;
border-radius: 6px;
transition: all 0.2s ease;
}
.search-section-clear:hover {
background: rgba(255, 100, 100, 0.15);
color: #ff6b6b;
}
/* 🏆 Badge على الـ items (🕒 recent / 🔥 trending) */
.search-suggestion-badge {
position: relative;
margin-inline-start: auto;
flex-shrink: 0;
font-size: 1rem;
opacity: 0.6;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 215, 0, 0.08);
}
.search-suggestion-badge.trending {
background: rgba(255, 100, 50, 0.15);
animation: trendingPulse 2s ease-in-out infinite;
}
@keyframes trendingPulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.1); opacity: 0.9; }
}
/* 📋 زر "شوف كل النتائج" في الأسفل */
.search-suggestion-showall {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.9rem 1rem;
font-weight: 700;
color: var(--accent);
background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.08));
border-top: 1px solid var(--border);
cursor: pointer;
transition: all 0.2s ease;
position: sticky;
bottom: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.search-suggestion-showall:hover {
background: linear-gradient(180deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.15));
color: var(--accent);
}
.search-suggestion-showall-arrow {
margin-inline-start: auto;
transition: transform 0.2s ease;
}
.search-suggestion-showall:hover .search-suggestion-showall-arrow {
transform: translateX(-4px);
}
@keyframes suggestionsFadeIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.search-suggestion-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background 0.2s ease;
}
.search-suggestion-item:last-child { border-bottom: none; }
.search-suggestion-item:hover,
.search-suggestion-item.active {
background: var(--accent-dim);
}
.search-suggestion-poster {
width: 42px;
height: 60px;
object-fit: cover;
border-radius: 6px;
background: var(--surface);
flex-shrink: 0;
}
.search-suggestion-poster.is-person {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.search-suggestion-info {
flex: 1;
min-width: 0;
}
.search-suggestion-title {
font-weight: 700;
color: var(--text);
font-size: 0.92rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-suggestion-meta {
font-size: 0.78rem;
color: var(--text-dim);
margin-top: 0.2rem;
}
.search-suggestion-loading,
.search-suggestion-empty {
padding: 1rem;
text-align: center;
color: var(--text-dim);
font-size: 0.88rem;
}
.search-box::before {
content: '';
position: absolute;
inset: 0;
padding: 1.5px;
border-radius: 9999px;
background: linear-gradient(135deg, var(--accent) 0%, transparent 30%, transparent 70%, var(--lapis) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.search-box:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow);
}
.search-box:focus-within::before { opacity: 1; }
.search-icon {
position: absolute;
inset-inline-start: 1.25rem;
color: var(--text-faded);
pointer-events: none;
}
.search-input {
width: 100%;
padding: 1rem 7rem 1rem 3.25rem;
padding-inline-start: 3.25rem; padding-inline-end: 7rem;
background: transparent;
border: 0; outline: 0;
color: var(--text);
font-size: 1rem;
font-family: 'Cairo', 'Tajawal', inherit;
font-weight: 500;
}
.search-input::placeholder {
color: var(--text-faded);
transition: opacity var(--duration-base) ease;
}
.search-input:focus::placeholder {
opacity: 0.5;
}
.search-btn {
position: absolute;
inset-inline-end: 0.5rem;
padding: 0.625rem 1.25rem;
background: var(--gradient-gold);
color: #0c0c11;
border: 0;
border-radius: var(--radius-full);
cursor: pointer;
font-weight: 700; font-size: 0.875rem;
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px;
transition: all var(--duration-base) var(--ease-spring);
box-shadow: var(--elevation-2), var(--inset-gold);
font-family: 'Cairo', 'Tajawal', inherit;
}
.search-btn:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: var(--elevation-3), var(--inset-gold), 0 0 20px var(--accent-glow);
}
.search-btn:active:not(:disabled) {
transform: scale(0.96);
}
.search-btn:disabled {
background: var(--surface);
color: var(--text-faded);
cursor: not-allowed;
box-shadow: var(--elevation-1);
}
/* حالات العرض */
.state-box {
text-align: center; padding: 5rem 1rem;
animation: fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.state-icon-wrap {
width: 80px; height: 80px; margin: 0 auto 1.5rem;
border-radius: 9999px;
background: var(--surface);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
}
.state-title { font-size: 1.75rem; font-weight: 600; margin-bottom: 0.5rem; }
.state-subtitle { color: var(--text-dim); }
/* التحميل */
.loading-dots { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1rem; }
.loading-dots span {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
animation: dotPulse 1.4s infinite both;
}
.loading-dots span:nth-child(2) { animation-delay: 0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0.32s; }
/* الخطأ */
.error-box {
max-width: 420px; margin: 2rem auto;
padding: 1.5rem;
background: var(--surface);
border: 1px solid var(--danger);
border-radius: 0.75rem;
text-align: center;
color: var(--danger);
}
/* الشبكة */
.results-header {
display: flex; align-items: baseline; gap: 0.75rem;
margin-bottom: 1.5rem;
}
.results-header h2 { font-size: 1.5rem; font-weight: 600; }
.results-count { color: var(--text-faded); font-size: 0.9rem; }
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
/* 🚀 تسريع الـ rendering */
contain: layout style;
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(5, 1fr); } }
/* بطاقة البوستر */
.card {
cursor: pointer;
animation: cardReveal 0.6s var(--ease-spring) both;
transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-base) ease;
animation-delay: calc(var(--card-index, 0) * 40ms);
will-change: transform, opacity;
position: relative;
contain: layout;
}
/* 🚀 تقليل animations على الموبايل لتسريع التطبيق */
@media (max-width: 768px) {
.card {
animation-duration: 0.3s;
transition-duration: 0.15s;
}
@keyframes cardReveal {
0% { opacity: 0; transform: translateY(15px); }
100% { opacity: 1; transform: translateY(0); }
}
}
.card:hover {
transform: translateY(-12px) scale(1.03);
filter: brightness(1.05);
z-index: 5;
}
@keyframes cardReveal {
0% {
opacity: 0;
transform: translateY(40px) scale(0.92);
filter: blur(6px);
}
50% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
.poster {
position: relative;
aspect-ratio: 2/3;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--surface);
border: 1.5px solid var(--border);
box-shadow: var(--elevation-3), 0 0 0 1px rgba(255,255,255,0.04) inset;
margin-bottom: var(--space-3);
transition: all var(--duration-slow) var(--ease-out);
}
/* ✨ Shine effect - لمعة سينمائية تمر عبر البطاقة */
.poster::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 30%,
rgba(255, 255, 255, 0.08) 45%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.08) 55%,
transparent 70%
);
transform: translateX(-100%);
pointer-events: none;
opacity: 0;
transition: transform 1s var(--ease-out), opacity var(--duration-base) ease;
}
.card:hover .poster::after {
transform: translateX(100%);
opacity: 1;
}
/* Glow ذهبي حول البطاقة عند hover */
.card:hover .poster {
border-color: var(--accent);
box-shadow:
var(--elevation-5),
0 0 0 1px var(--accent) inset,
0 0 40px var(--accent-glow),
0 0 80px rgba(230, 181, 71, 0.15);
}
.poster img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.7s var(--ease-out), filter var(--duration-base) ease;
}
.card:hover .poster img {
transform: scale(1.08);
filter: contrast(1.05) saturate(1.1);
}
.badge {
position: absolute; top: 0.75rem;
display: inline-flex; align-items: center; gap: 0.25rem;
padding: 0.25rem 0.625rem;
background: rgba(0,0,0,0.7);
color: #fff;
border-radius: 0.375rem;
font-size: 0.75rem; font-weight: 600;
backdrop-filter: blur(10px);
}
.badge-type { inset-inline-start: 0.75rem; }
.badge-rating { inset-inline-end: 0.75rem; color: var(--accent); }
.poster-overlay {
position: absolute; inset: 0;
display: flex; align-items: flex-end;
padding: 1rem;
background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.card:hover .poster-overlay { opacity: 1; }
.details-btn {
width: 100%;
padding: 0.625rem;
background: var(--accent); color: var(--bg);
border-radius: 0.5rem;
font-size: 0.875rem; font-weight: 600;
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.card-title {
font-size: 0.95rem; font-weight: 600; line-height: 1.3;
margin-bottom: 0.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-year {
display: flex; align-items: center; gap: 0.375rem;
color: var(--text-faded);
font-size: 0.8rem;
}
/* النافذة */
.modal-backdrop {
position: fixed; inset: 0; z-index: 150;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(12px);
display: flex; align-items: center; justify-content: center;
padding: 1rem;
animation: modalBackdropFade 0.3s ease;
}
@keyframes modalBackdropFade {
from {
opacity: 0;
backdrop-filter: blur(0px);
}
to {
opacity: 1;
backdrop-filter: blur(12px);
}
}
.modal {
width: 100%; max-width: 28rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 2rem;
box-shadow: var(--shadow);
animation: modalPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes modalPopIn {
0% {
opacity: 0;
transform: scale(0.85) translateY(20px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.modal-icon {
width: 56px; height: 56px;
border-radius: 0.75rem;
background: var(--accent); color: var(--bg);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1.5rem;
}
.modal h2 {
font-size: 2rem; font-weight: 700;
line-height: 1.1; margin-bottom: 0.5rem;
}
.modal p { color: var(--text-dim); margin-bottom: 1.5rem; font-size: 0.95rem; }
.modal-input {
width: 100%;
padding: 0.75rem 1rem;
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
border-radius: 0.5rem;
font-size: 0.95rem;
font-family: inherit;
margin-bottom: 1rem;
}
.modal-input:focus { outline: none; border-color: var(--accent); }
.modal-btn {
width: 100%;
padding: 0.75rem;
border: 0; border-radius: 0.5rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background 0.3s ease;
}
.modal-btn-primary {
background: var(--accent); color: var(--bg);
}
.modal-btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.modal-btn-primary:disabled { background: var(--border); color: var(--text-faded); cursor: not-allowed; }
.modal-link {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
margin-top: 1rem;
color: var(--accent);
text-decoration: none;
font-size: 0.875rem;
}
.modal-link:hover { color: var(--accent-hover); }
/* الفوتر */
footer {
position: relative; z-index: 10;
margin-top: 5rem; padding: 2rem 1rem;
border-top: 1px solid var(--border);
text-align: center;
color: var(--text-faded);
font-size: 0.85rem;
}
/* ═══════════ تقييمات متعددة ═══════════ */
.ratings-bar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.rating-card {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 0.875rem;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: 0.75rem;
transition: all 0.3s ease;
min-width: 120px;
}
.rating-card:hover {
transform: translateY(-2px);
border-color: var(--border-strong);
box-shadow: var(--shadow-sm);
}
.rating-icon {
width: 36px; height: 36px;
border-radius: 0.5rem;
display: flex; align-items: center; justify-content: center;
font-size: 0.75rem;
font-weight: 900;
flex-shrink: 0;
letter-spacing: -0.02em;
}
.rating-icon.tmdb {
background: linear-gradient(135deg, #01b4e4 0%, #0d253f 100%);
color: #90cea1;
}
.rating-icon.imdb {
background: var(--imdb);
color: #000;
}
.rating-icon.rt {
background: var(--rt);
color: #fff;
}
.rating-icon.mc {
background: var(--mc);
color: #fff;
}
.rating-info {
display: flex; flex-direction: column;
gap: 0.125rem;
}
.rating-source {
font-size: 0.7rem;
color: var(--text-faded);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rating-value {
font-size: 1rem;
font-weight: 700;
color: var(--text);
line-height: 1;
}
/* ═══════════ أزرار البحث عن الفيلم ═══════════ */
.watch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.875rem;
}
.watch-btn {
display: flex; align-items: center; gap: 0.875rem;
padding: 0.875rem 1rem;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: 0.75rem;
color: var(--text);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
position: relative;
overflow: hidden;
}
.watch-btn::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--platform-color, var(--accent-glow)) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.watch-btn:hover {
transform: translateY(-3px);
border-color: var(--platform-color, var(--accent));
box-shadow: var(--shadow-sm);
}
.watch-btn:hover::before { opacity: 0.15; }
.watch-btn-logo {
width: 40px; height: 40px;
border-radius: 0.5rem;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
background: var(--platform-color);
color: #fff;
font-weight: 700;
overflow: hidden;
position: relative;
}
.watch-btn-logo svg { width: 22px; height: 22px; }
.watch-btn-info {
flex: 1; min-width: 0;
position: relative;
}
.watch-btn-name {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
line-height: 1.2;
margin-bottom: 0.125rem;
}
.watch-btn-hint {
font-size: 0.75rem;
color: var(--text-faded);
}
.watch-btn-arrow {
color: var(--text-faded);
transition: transform 0.3s ease, color 0.3s ease;
flex-shrink: 0;
position: relative;
}
.watch-btn:hover .watch-btn-arrow {
color: var(--platform-color);
transform: translateX(4px);
}
[dir="rtl"] .watch-btn:hover .watch-btn-arrow {
transform: translateX(-4px);
}
/* ═══════════ قسم الرائج في الصفحة الرئيسية ═══════════ */
.trending-section {
margin-top: 2rem;
animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
.section-header {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
position: relative;
animation: sectionHeaderIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.section-header::after {
content: '';
position: absolute;
bottom: -1px;
inset-inline-start: 0;
width: 40px;
height: 2px;
background: linear-gradient(90deg, var(--accent), transparent);
animation: sectionHeaderLine 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes sectionHeaderIn {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
[dir="rtl"] .section-header {
animation-name: sectionHeaderInRtl;
}
@keyframes sectionHeaderInRtl {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes sectionHeaderLine {
from { width: 0; }
to { width: 40px; }
}
.section-header h2 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text);
}
.section-header-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
background: var(--accent);
color: var(--bg);
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.trending-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.trending-tab {
padding: 0.5rem 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9999px;
color: var(--text-dim);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-family: inherit;
}
.trending-tab:hover {
background: var(--surface-hover);
color: var(--text);
}
.trending-tab.active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
font-weight: 600;
}
/* 🔄 زر تحديث الترند */
.trending-refresh-btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 50%;
color: var(--text-dim);
cursor: pointer;
transition: all 0.3s ease;
margin-inline-start: auto;
}
.trending-refresh-btn:hover {
background: var(--surface-hover);
color: var(--accent);
border-color: var(--accent);
transform: rotate(45deg);
}
.trending-refresh-btn.rotating svg {
animation: refreshSpin 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes refreshSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* تحسين البطاقات */
.poster {
position: relative;
aspect-ratio: 2/3;
border-radius: 0.875rem;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
margin-bottom: 0.75rem;
transition: box-shadow 0.5s ease, border-color 0.3s ease;
}
.card:hover .poster {
box-shadow: var(--shadow-lg);
border-color: var(--accent-dim);
}
/* ═══════════ شريط التنقل الرئيسي ═══════════ */
.main-nav {
position: sticky;
top: 0;
z-index: 20;
background: color-mix(in srgb, var(--bg) 92%, transparent);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.main-nav-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
gap: 0.25rem;
overflow-x: auto;
padding: 0 1rem;
scrollbar-width: none;
}
.main-nav-inner::-webkit-scrollbar { display: none; }
.nav-tab {
padding: 0.875rem 1.25rem;
background: transparent;
border: 0;
color: var(--text-dim);
cursor: pointer;
position: relative;
white-space: nowrap;
font-weight: 500;
font-size: 0.95rem;
font-family: inherit;
transition: color 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active {
color: var(--accent);
font-weight: 600;
}
.nav-tab.active::after {
content: '';
position: absolute;
bottom: -1px;
inset-inline-start: 0.75rem;
inset-inline-end: 0.75rem;
height: 2px;
background: var(--accent);
border-radius: 2px 2px 0 0;
}
.nav-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 0.375rem;
background: var(--accent);
color: var(--bg);
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
}
.nav-tab:not(.active) .nav-tab-count {
background: var(--surface-hover);
color: var(--text-dim);
}
/* ═══════════ زر فاجئني ═══════════ */
.surprise-btn {
padding: 0.5rem 0.85rem;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border: 0;
border-radius: 0.5rem;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.surprise-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--accent-glow);
}
.surprise-btn:active { transform: translateY(0); }
.surprise-btn.spinning svg {
animation: diceRoll 0.6s ease;
}
@keyframes diceRoll {
0% { transform: rotate(0deg); }
50% { transform: rotate(360deg) scale(1.3); }
100% { transform: rotate(720deg); }
}
/* ═══════════ تصفح الأنواع ═══════════ */
.genre-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.75rem;
margin-bottom: 2rem;
}
.genre-card {
padding: 1rem 1.25rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.75rem;
cursor: pointer;
font-family: inherit;
color: var(--text);
font-weight: 600;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.75rem;
transition: all 0.3s ease;
text-align: start;
position: relative;
overflow: hidden;
}
.genre-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--accent-glow), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.genre-card:hover {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: var(--shadow-sm);
}
.genre-card:hover::before { opacity: 1; }
.genre-card.active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
}
.genre-card-icon {
width: 32px; height: 32px;
border-radius: 0.5rem;
background: var(--accent-glow);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
flex-shrink: 0;
}
.genre-card.active .genre-card-icon {
background: rgba(255,255,255,0.25);
}
/* ═══════════ زر القلب على البطاقات ═══════════ */
.fav-btn {
position: absolute;
bottom: 0.75rem;
inset-inline-end: 0.75rem;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
transition: all 0.3s ease;
z-index: 2;
opacity: 0;
}
.card:hover .fav-btn,
.fav-btn.active {
opacity: 1;
}
.fav-btn:hover {
transform: scale(1.15);
background: rgba(0,0,0,0.9);
}
.fav-btn.active {
background: linear-gradient(135deg, #ff4466 0%, #ff6b8a 100%);
color: #fff;
border-color: transparent;
animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popIn {
0% { transform: scale(0.5); }
60% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* زر مفضلة كبير بصفحة التفاصيل */
.detail-action-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
margin-top: 0.75rem;
}
.detail-fav-btn,
.detail-watched-btn,
.detail-remind-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: var(--surface-elevated);
border: 1px solid var(--border);
color: var(--text);
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.detail-fav-btn:hover {
border-color: #ff6b8a;
color: #ff6b8a;
}
.detail-fav-btn.active {
background: linear-gradient(135deg, #ff4466 0%, #ff6b8a 100%);
color: #fff;
border-color: transparent;
}
.detail-watched-btn:hover {
border-color: var(--success);
color: var(--success);
}
.detail-watched-btn.watched {
background: linear-gradient(135deg, var(--success) 0%, #5aa84a 100%);
color: #fff;
border-color: transparent;
}
.detail-watched-btn.watched:hover {
background: linear-gradient(135deg, #5aa84a 0%, #4a983a 100%);
}
/* 🔔 زر التذكير */
.detail-remind-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.detail-remind-btn.active {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-color: transparent;
}
.detail-remind-btn.active:hover {
filter: brightness(1.1);
}
/* ═══════════ 🔔 قسم التذكيرات ═══════════ */
.reminders-section {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1.5rem;
}
.reminders-empty {
text-align: center;
padding: 4rem 1rem;
color: var(--text-dim);
}
.reminders-empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.reminders-empty h3 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
color: var(--accent);
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.reminders-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
.reminder-card {
display: flex;
gap: 0.875rem;
padding: 0.875rem;
background: var(--surface-elevated);
border: 1.5px solid var(--border);
border-radius: 1rem;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
}
.reminder-card:hover {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: var(--shadow-gold);
}
.reminder-card-poster {
width: 80px;
height: 120px;
flex-shrink: 0;
border-radius: 0.625rem;
overflow: hidden;
background: var(--bg);
}
.reminder-card-poster img {
width: 100%;
height: 100%;
object-fit: cover;
}
.reminder-card-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.375rem;
min-width: 0;
}
.reminder-card-title {
font-weight: 700;
color: var(--text);
font-size: 0.95rem;
line-height: 1.3;
}
.reminder-card-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: var(--accent-dim);
color: var(--accent);
padding: 0.125rem 0.5rem;
border-radius: 9999px;
font-size: 0.72rem;
font-weight: 700;
width: fit-content;
}
.reminder-card-badge.ready {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.reminder-card-date {
font-size: 0.82rem;
color: var(--text-dim);
}
.reminder-card-countdown {
font-size: 0.78rem;
color: var(--accent);
font-weight: 600;
}
.reminder-card-remove {
position: absolute;
top: 0.5rem;
inset-inline-end: 0.5rem;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
}
.reminder-card:hover .reminder-card-remove {
opacity: 1;
}
.reminder-card-remove:hover {
background: #e74c3c;
}
.reminder-card-remove svg { width: 14px; height: 14px; }
/* شارة على الأيقونة في الشريط الجانبي */
.sidebar-nav-tab .reminder-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: #ef4444;
color: #fff;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
margin-inline-start: auto;
}
/* إشعار TOAST للتذكيرات الجديدة */
.reminder-toast {
position: fixed;
top: 80px;
inset-inline-end: 1rem;
max-width: 360px;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
padding: 1rem 1.25rem;
border-radius: 1rem;
box-shadow: var(--shadow-lg), 0 10px 30px var(--accent-glow);
z-index: 1000;
display: flex;
gap: 0.75rem;
align-items: center;
cursor: pointer;
opacity: 0;
transform: translateX(calc(100% + 2rem));
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[dir="rtl"] .reminder-toast {
transform: translateX(calc(-100% - 2rem));
}
.reminder-toast.visible {
opacity: 1;
transform: translateX(0);
}
.reminder-toast-icon {
font-size: 1.75rem;
flex-shrink: 0;
}
.reminder-toast-title {
font-weight: 700;
font-size: 0.92rem;
margin-bottom: 0.125rem;
}
.reminder-toast-body {
font-size: 0.82rem;
opacity: 0.9;
}
/* رأس التصفح */
.browse-header {
margin-bottom: 1.5rem;
}
.browse-header h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
margin-bottom: 0.5rem;
}
.browse-header p {
color: var(--text-dim);
}
/* ═══════════ نافذة دوّرلي (فاجئني) ═══════════ */
.surprise-overlay {
position: fixed; inset: 0; z-index: 110;
background: radial-gradient(ellipse at center, rgba(17, 23, 41, 0.92) 0%, rgba(6, 8, 15, 0.98) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex; align-items: flex-start; justify-content: center;
padding: 1rem;
animation: fadeIn 0.3s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.surprise-container {
width: 100%;
max-width: 920px;
background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 1.5px solid var(--border-strong);
border-radius: 1.5rem;
padding: 3rem 2rem;
position: relative;
box-shadow: var(--shadow-lg), 0 0 100px var(--accent-glow);
animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
margin-top: 2rem;
margin-bottom: 2rem;
}
/* زخرفة تراثية حول النافذة */
.surprise-container::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 1.5rem;
padding: 2px;
background: linear-gradient(135deg, var(--accent) 0%, var(--lapis) 50%, var(--brick) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.4;
pointer-events: none;
}
.surprise-close {
position: fixed;
top: calc(1rem + env(safe-area-inset-top, 0px));
inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.95);
border: 2px solid rgba(255, 255, 255, 0.4);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s ease;
z-index: 999;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.surprise-close svg {
width: 24px;
height: 24px;
}
.surprise-close:hover, .surprise-close:active {
background: var(--danger);
transform: scale(1.1);
}
/* على الموبايل، كبّر زر الإغلاق أكثر */
@media (max-width: 640px) {
.surprise-close {
width: 48px;
height: 48px;
top: calc(0.75rem + env(safe-area-inset-top, 0px));
inset-inline-end: calc(0.75rem + env(safe-area-inset-right, 0px));
}
.surprise-close svg {
width: 24px;
height: 24px;
}
.surprise-container {
padding: 2rem 1rem;
margin-top: calc(3.5rem + env(safe-area-inset-top, 0px));
}
}
.surprise-header {
text-align: center;
margin-bottom: 2.5rem;
}
.surprise-icon {
width: 72px; height: 72px;
margin: 0 auto 1.25rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
color: var(--bg);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 32px var(--accent-glow), inset 0 2px 0 rgba(255,255,255,0.2);
animation: pulseGlow 2.5s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 8px 32px var(--accent-glow), inset 0 2px 0 rgba(255,255,255,0.2); }
50% { box-shadow: 0 8px 48px var(--accent-glow), 0 0 80px var(--accent-glow), inset 0 2px 0 rgba(255,255,255,0.2); }
}
.icon-lg { width: 2rem; height: 2rem; }
.surprise-header h2 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.surprise-header p {
color: var(--text-dim);
font-size: 1rem;
}
/* خيارات المرحلة الأولى */
.surprise-choices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
max-width: 600px;
margin: 0 auto;
}
@media (max-width: 520px) {
.surprise-choices { grid-template-columns: 1fr; }
}
.surprise-choice {
padding: 2rem 1.5rem;
background: var(--surface);
border: 2px solid var(--border);
border-radius: 1rem;
color: var(--text);
cursor: pointer;
font-family: inherit;
text-align: center;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.surprise-choice::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
.surprise-choice:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: var(--shadow-gold);
}
.surprise-choice:hover::before { opacity: 1; }
.surprise-choice-icon {
font-size: 3rem;
margin-bottom: 0.75rem;
position: relative;
filter: drop-shadow(0 4px 12px var(--accent-glow));
}
.surprise-choice-name {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--accent);
position: relative;
}
.surprise-choice-hint {
font-size: 0.9rem;
color: var(--text-dim);
position: relative;
}
/* شبكة الاقتراحات */
.surprise-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-bottom: 2rem;
}
@media (max-width: 640px) {
.surprise-grid { grid-template-columns: 1fr; gap: 1rem; }
}
.surprise-pick {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
overflow: hidden;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
animation: pickFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pickFadeIn {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.surprise-pick:hover {
transform: translateY(-6px);
border-color: var(--accent);
box-shadow: var(--shadow-lg), 0 0 40px var(--accent-glow);
}
.surprise-pick-poster {
width: 100%;
aspect-ratio: 2/3;
overflow: hidden;
position: relative;
background: var(--surface-hover);
}
.surprise-pick-poster img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.surprise-pick:hover .surprise-pick-poster img {
transform: scale(1.08);
}
.surprise-pick-rating {
position: absolute;
top: 0.75rem;
inset-inline-end: 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(10px);
color: var(--accent);
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 700;
}
.surprise-pick-body {
padding: 1rem;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.surprise-pick-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.surprise-pick-meta {
display: flex;
gap: 0.5rem;
color: var(--text-faded);
font-size: 0.8rem;
}
.surprise-pick-overview {
color: var(--text-dim);
font-size: 0.85rem;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.surprise-pick-cta {
margin-top: auto;
padding: 0.625rem;
background: var(--accent);
color: var(--bg);
border-radius: 0.5rem;
text-align: center;
font-weight: 600;
font-size: 0.9rem;
display: flex; align-items: center; justify-content: center; gap: 0.375rem;
}
/* أزرار الإجراءات */
.surprise-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.surprise-action-btn {
padding: 0.75rem 1.5rem;
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
border: 1.5px solid var(--border);
}
.surprise-action-btn.primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-color: transparent;
}
.surprise-action-btn.primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-gold);
}
.surprise-action-btn.secondary {
background: var(--surface);
color: var(--text);
}
.surprise-action-btn.secondary:hover {
border-color: var(--accent);
color: var(--accent);
}
.surprise-loading {
padding: 4rem 1rem;
text-align: center;
}
/* ═══════════ زر فتح يوتيوب + جرّب تريلر ثاني ═══════════ */
.trailer-controls {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.75rem;
}
.trailer-btn {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.375rem;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
text-decoration: none;
transition: all 0.3s ease;
}
.trailer-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.trailer-btn.youtube {
background: #ff0000;
color: #fff;
border-color: transparent;
}
.trailer-btn.youtube:hover {
background: #cc0000;
color: #fff;
}
/* ═══════════ بوستر التريلر الجديد (صورة + زر بلاي كبير) ═══════════ */
.trailer-poster {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: 0.875rem;
overflow: hidden;
background: var(--surface) center/cover no-repeat;
border: 1px solid var(--border);
transition: opacity 0.3s ease, transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
box-shadow: var(--shadow);
}
.trailer-poster:hover {
transform: scale(1.01);
box-shadow: var(--shadow-lg), 0 0 40px var(--accent-glow);
border-color: var(--accent-dim);
}
.trailer-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(13, 13, 17, 0.35) 0%, rgba(13, 13, 17, 0.8) 100%),
linear-gradient(180deg, rgba(13, 13, 17, 0.15) 0%, rgba(13, 13, 17, 0.55) 100%);
transition: background 0.3s ease;
}
.trailer-poster:hover .trailer-overlay {
background:
radial-gradient(ellipse at center, rgba(13, 13, 17, 0.2) 0%, rgba(13, 13, 17, 0.7) 100%);
}
.trailer-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1.5rem;
text-align: center;
}
.trailer-play-big {
position: relative;
display: inline-block;
text-decoration: none;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
filter: drop-shadow(0 4px 24px rgba(230, 181, 71, 0.55));
background: transparent;
border: none;
padding: 0;
font-family: inherit;
}
.trailer-play-big:hover { transform: scale(1.12); }
.trailer-play-big:active { transform: scale(0.95); }
.trailer-play-ring {
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid var(--accent);
opacity: 0.55;
animation: pulseRing 2.2s ease-out infinite;
pointer-events: none;
}
@keyframes pulseRing {
0% { transform: scale(1); opacity: 0.55; }
100% { transform: scale(1.45); opacity: 0; }
}
.trailer-play-label {
color: #fff;
font-size: 1.125rem;
font-weight: 700;
text-shadow: 0 2px 12px rgba(0,0,0,0.75);
letter-spacing: 0.02em;
font-family: 'Aref Ruqaa', 'Amiri', serif;
margin: 0;
}
.trailer-main-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--accent);
color: var(--bg);
border-radius: 9999px;
font-weight: 700;
font-family: inherit;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: var(--shadow-gold);
}
.trailer-main-btn:hover {
background: var(--accent-hover);
transform: translateY(-2px);
}
.trailer-icon-wrap {
width: 72px; height: 72px;
border-radius: 50%;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: center;
color: var(--accent);
margin-bottom: 0.5rem;
}
.trailer-icon-wrap.dim { opacity: 0.8; }
.trailer-no-text {
color: #fff;
font-size: 1rem;
font-weight: 600;
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
margin: 0;
}
.trailer-poster .trailer-controls {
margin-top: 0.25rem;
justify-content: center;
}
@media (hover: none) {
.trailer-play-ring { animation: pulseRing 2.2s ease-out infinite; }
}
/* ═══════════ 🖱️ مؤشر الماوس التراثي ═══════════ */
body.custom-cursor {
cursor: url("data:image/svg+xml;utf8,") 24 21, auto;
}
body.custom-cursor a,
body.custom-cursor button,
body.custom-cursor .card,
body.custom-cursor [role="button"],
body.custom-cursor input,
body.custom-cursor .clickable {
cursor: url("data:image/svg+xml;utf8,") 27 24, pointer;
}
/* الأثر الذهبي خلف المؤشر - خفيف وسريع */
.cursor-trail {
position: fixed;
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
opacity: 0;
transform: translate(-50%, -50%);
box-shadow: 0 0 8px var(--accent);
animation: trailFade 0.5s ease-out forwards;
}
@keyframes trailFade {
0% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}
@keyframes trailFade {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
30% {
opacity: 0.9;
transform: translate(-50%, -50%) scale(0.85);
}
70% {
opacity: 0.4;
transform: translate(-50%, -50%) scale(0.5);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.2);
}
}
/* ═══════════ 🌊 موجات نهر دجلة ═══════════ */
.tigris-waves {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 160px;
pointer-events: none;
z-index: 2;
overflow: hidden;
opacity: 0.4;
}
[data-theme="light"] .tigris-waves { opacity: 0.3; }
.tigris-wave {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat-x;
background-size: 1200px 100%;
}
.tigris-wave.w1 {
background-image: url("data:image/svg+xml;utf8,");
animation: waveFlow 18s linear infinite;
}
.tigris-wave.w2 {
background-image: url("data:image/svg+xml;utf8,");
animation: waveFlow 24s linear infinite reverse;
bottom: -10px;
}
.tigris-wave.w3 {
background-image: url("data:image/svg+xml;utf8,");
animation: waveFlow 30s linear infinite;
bottom: -20px;
}
@keyframes waveFlow {
from { transform: translateX(0); }
to { transform: translateX(-600px); }
}
/* ═══════════ 𒀀𒁀 حروف مسمارية طائرة ═══════════ */
.cuneiform-floating {
position: fixed; inset: 0;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
.cuneiform-letter {
position: absolute;
font-size: 1.5rem;
color: var(--accent);
opacity: 0;
text-shadow: 0 0 8px var(--accent-glow);
animation: cuneiformDrift 25s linear infinite;
}
@keyframes cuneiformDrift {
0% {
opacity: 0;
transform: translateY(100vh) rotate(0deg);
}
10% { opacity: 0.35; }
90% { opacity: 0.35; }
100% {
opacity: 0;
transform: translateY(-10vh) rotate(20deg);
}
}
[data-theme="light"] .cuneiform-letter {
opacity: 0.25;
text-shadow: 0 0 8px rgba(138, 90, 12, 0.3);
}
/* ═══════════════════════════════════════════════════════════
🎬 SPLASH SCREEN - شاشة ترحيب سينمائية فخمة جديدة
═══════════════════════════════════════════════════════════ */
.welcome-splash {
position: fixed; inset: 0;
background: #050918;
z-index: 99999;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
overflow: hidden;
}
@keyframes splashFadeOut {
0% { opacity: 1; }
100% { opacity: 0; transform: scale(1.1); pointer-events: none; visibility: hidden; }
}
/* خلفية شبكية تتحرك (perspective) */
.splash-bg-grid {
position: absolute; inset: -50%;
background-image:
linear-gradient(rgba(230, 181, 71, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(230, 181, 71, 0.07) 1px, transparent 1px);
background-size: 60px 60px;
transform: perspective(500px) rotateX(60deg) translateY(0);
animation: splashGridMove 20s linear infinite;
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
@keyframes splashGridMove {
0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
100% { transform: perspective(500px) rotateX(60deg) translateY(60px); }
}
/* Aurora متحركة */
.splash-bg-aurora {
position: absolute; inset: -20%;
background:
radial-gradient(circle at 30% 40%, rgba(230, 181, 71, 0.35) 0%, transparent 40%),
radial-gradient(circle at 70% 60%, rgba(30, 92, 168, 0.35) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(196, 100, 42, 0.25) 0%, transparent 50%);
filter: blur(80px);
animation: splashAuroraSpin 15s ease-in-out infinite;
}
@keyframes splashAuroraSpin {
0%, 100% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
}
/* حلقات نور دائرية */
.splash-rings {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100vmin; height: 100vmin;
pointer-events: none;
}
.splash-ring {
position: absolute; top: 50%; left: 50%;
border: 1.5px solid rgba(230, 181, 71, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.splash-ring-1 { animation: splashRingExpand 3s ease-out infinite; }
.splash-ring-2 { animation: splashRingExpand 3s ease-out infinite 0.7s; }
.splash-ring-3 { animation: splashRingExpand 3s ease-out infinite 1.4s; }
@keyframes splashRingExpand {
0% {
width: 100px; height: 100px;
opacity: 0.8;
border-width: 2px;
}
100% {
width: 700px; height: 700px;
opacity: 0;
border-width: 0.5px;
}
}
/* جسيمات */
.splash-particles-new {
position: absolute; inset: 0;
pointer-events: none;
z-index: 5;
}
.splash-particles-new .particle {
position: absolute;
width: 4px; height: 4px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(230, 181, 71, 0.5);
opacity: 0;
animation: splashParticleFloat 4s ease-out infinite;
}
@keyframes splashParticleFloat {
0% {
opacity: 0;
transform: translateY(50px) scale(0);
}
20% {
opacity: 1;
transform: translateY(30px) scale(1);
}
100% {
opacity: 0;
transform: translateY(-200px) scale(0.3);
}
}
/* شريط فيلم سينمائي */
.splash-film-strip {
position: absolute;
left: 0; right: 0;
height: 36px;
background:
repeating-linear-gradient(
90deg,
transparent 0,
transparent 16px,
rgba(230, 181, 71, 0.4) 16px,
rgba(230, 181, 71, 0.4) 28px,
transparent 28px,
transparent 44px
),
linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
border-top: 1px solid rgba(230, 181, 71, 0.3);
border-bottom: 1px solid rgba(230, 181, 71, 0.3);
z-index: 8;
}
.splash-film-top {
top: 0;
transform: translateY(-100%);
animation: splashFilmDown 0.8s var(--ease-spring) 0.3s forwards;
}
.splash-film-bottom {
bottom: 0;
transform: translateY(100%);
animation: splashFilmUp 0.8s var(--ease-spring) 0.3s forwards;
}
@keyframes splashFilmDown { to { transform: translateY(0); } }
@keyframes splashFilmUp { to { transform: translateY(0); } }
/* المحتوى */
.splash-content {
position: relative;
z-index: 10;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 2rem;
padding: 0 1rem;
}
.splash-star-wrap {
position: relative;
width: 140px; height: 140px;
display: flex; align-items: center; justify-content: center;
}
.splash-star-glow {
position: absolute; inset: -30px;
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
filter: blur(20px);
animation: splashStarGlow 2s ease-in-out infinite;
}
@keyframes splashStarGlow {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.splash-star-orbit {
position: absolute; inset: 0;
border: 1.5px dashed rgba(230, 181, 71, 0.4);
border-radius: 50%;
}
.splash-orbit-1 { animation: splashOrbit 6s linear infinite; }
.splash-orbit-2 {
inset: 20px;
border-style: dotted;
animation: splashOrbit 4s linear infinite reverse;
}
@keyframes splashOrbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.splash-star-main {
position: relative;
width: 80px; height: 80px;
z-index: 5;
animation: splashStarEntry 1.2s var(--ease-spring) both, splashStarBeat 3s ease-in-out infinite 1.2s;
}
@keyframes splashStarEntry {
0% {
opacity: 0;
transform: scale(0.3) rotate(-180deg);
filter: blur(10px);
}
100% {
opacity: 1;
transform: scale(1) rotate(0);
filter: blur(0);
}
}
@keyframes splashStarBeat {
0%, 100% { transform: scale(1) rotate(0); }
50% { transform: scale(1.08) rotate(8deg); }
}
.splash-star-main svg {
width: 100%; height: 100%;
filter: drop-shadow(0 0 20px var(--accent));
}
/* العنوان */
.splash-title-wrap {
display: flex; flex-direction: column;
align-items: center; gap: 0.5rem;
text-align: center;
}
.splash-title-new {
font-family: 'Cairo', 'Tajawal', sans-serif;
font-size: clamp(3rem, 8vw, 5rem);
font-weight: 900;
line-height: 1;
margin: 0;
background: linear-gradient(135deg,
#f5c95e 0%,
#e6b547 30%,
#ffd76e 50%,
#e6b547 70%,
#c89a30 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 60px var(--accent-glow);
letter-spacing: -0.02em;
animation: splashTitleEntry 1.2s var(--ease-out) 0.4s both, splashTitleShimmer 4s ease-in-out infinite 1.6s;
}
@keyframes splashTitleEntry {
0% {
opacity: 0;
transform: translateY(30px) scale(0.9);
filter: blur(15px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes splashTitleShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.splash-line {
width: 80px; height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
border-radius: 999px;
box-shadow: 0 0 12px var(--accent);
animation: splashLineEntry 0.8s var(--ease-spring) 0.8s both;
}
@keyframes splashLineEntry {
0% { opacity: 0; transform: scaleX(0); }
100% { opacity: 1; transform: scaleX(1); }
}
.splash-subtitle-new {
font-family: 'Cinzel', 'Georgia', serif;
font-size: clamp(0.9rem, 2vw, 1.1rem);
font-weight: 600;
color: var(--accent);
letter-spacing: 0.4em;
margin: 0;
opacity: 0;
animation: splashSubtitle 0.8s var(--ease-out) 1s forwards;
}
.splash-tagline {
font-family: 'Cairo', 'Tajawal', sans-serif;
font-size: clamp(0.85rem, 2vw, 1rem);
color: var(--text-dim);
margin: 0.5rem 0 0 0;
opacity: 0;
animation: splashSubtitle 0.8s var(--ease-out) 1.4s forwards;
}
@keyframes splashSubtitle {
0% { opacity: 0; transform: translateY(15px); }
100% { opacity: 0.85; transform: translateY(0); }
}
/* شريط التحميل */
.splash-loader {
width: 200px; height: 3px;
background: rgba(230, 181, 71, 0.15);
border-radius: 999px;
overflow: hidden;
margin-top: 1rem;
opacity: 0;
animation: splashSubtitle 0.6s var(--ease-out) 1.6s forwards;
}
.splash-loader-bar {
height: 100%;
background: linear-gradient(90deg, transparent, var(--accent), #fff, var(--accent), transparent);
background-size: 200% 100%;
animation: splashLoaderShine 1.5s ease-in-out infinite;
box-shadow: 0 0 12px var(--accent);
}
@keyframes splashLoaderShine {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (max-width: 640px) {
.splash-star-wrap { width: 110px; height: 110px; }
.splash-star-main { width: 64px; height: 64px; }
.splash-ring-1 { /* ringExpand handles size */ }
.splash-loader { width: 160px; }
}
/* ═══════════ شاشة الترحيب القديمة - مخفية ═══════════ */
.splash-bg-grid,
.splash-bg-aurora,
.splash-rings,
.splash-film-strip,
.splash-star-wrap,
.splash-title-wrap,
.splash-loader,
.splash-content {
display: none !important;
}
/* ═══════════ 🎬 شاشة الترحيب الأصلية ═══════════ */
.welcome-splash {
position: fixed; inset: 0;
z-index: 9999;
background: radial-gradient(circle at center, #0c0c11 0%, #050507 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: splashFadeOutOld 0.8s ease-in 3s forwards;
}
@keyframes splashFadeOutOld {
to { opacity: 0; visibility: hidden; }
}
.splash-star-container {
position: relative;
width: 200px;
height: 200px;
margin-bottom: 2rem;
display: block !important;
}
.splash-particles {
position: absolute; inset: 0;
}
.splash-particle {
position: absolute;
width: 4px; height: 4px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent);
top: 50%;
left: 50%;
opacity: 0;
animation: particleConverge 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes particleConverge {
0% {
opacity: 0;
transform: translate(var(--x), var(--y)) scale(0);
}
30% {
opacity: 1;
transform: translate(var(--x), var(--y)) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.5);
}
}
.splash-star {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0;
animation: starAppear 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.3s forwards;
}
@keyframes starAppear {
0% {
opacity: 0;
transform: scale(0.3) rotate(-180deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
.splash-star svg {
width: 160px; height: 160px;
filter: drop-shadow(0 0 24px var(--accent-glow)) drop-shadow(0 0 48px var(--accent-glow));
}
.splash-title {
font-family: 'Tajawal', 'Amiri', serif;
font-size: clamp(2.25rem, 7vw, 3rem);
font-weight: 900;
color: var(--accent);
opacity: 0;
animation: titleRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2s forwards;
letter-spacing: 0.03em;
margin-bottom: 0.5rem;
/* ✨ ظل ناعم + توهج */
text-shadow:
0 3px 12px rgba(0, 0, 0, 0.4),
0 0 40px rgba(212, 165, 116, 0.45);
}
@keyframes titleRise {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.splash-subtitle {
color: var(--text-dim);
font-size: 1rem;
letter-spacing: 0.15em;
opacity: 0;
animation: titleRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.3s forwards;
}
/* ═══════════ ⚙️ زر الإعدادات ونافذتها ═══════════ */
.settings-overlay {
position: fixed; inset: 0;
z-index: 120;
background: radial-gradient(ellipse at center, rgba(17, 23, 41, 0.92) 0%, rgba(6, 8, 15, 0.98) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: fadeIn 0.3s ease;
overflow-y: auto;
}
.settings-container {
width: 100%;
max-width: 680px;
background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 1.5px solid var(--border-strong);
border-radius: 1.25rem;
padding: 2.5rem 2rem;
position: relative;
box-shadow: var(--shadow-lg), 0 0 100px var(--accent-glow);
animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ✨ على الموبايل - fullscreen ومع scroll صحيح */
@media (max-width: 640px) {
.settings-overlay {
padding: 0;
align-items: flex-start;
justify-content: stretch;
background: var(--bg);
overflow: hidden; /* الحاوية هي اللي تعمل scroll */
}
.settings-container {
max-width: 100%;
width: 100%;
min-height: 100vh;
max-height: 100vh;
height: 100vh;
border-radius: 0;
border: none;
padding: 4rem 1rem 6rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: none;
display: flex;
flex-direction: column;
}
/* بحث padding بين الأقسام */
.settings-group {
margin-bottom: 1.5rem !important;
}
/* الثيمات grid - يتكيف مع الشاشة الصغيرة */
.themes-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.6rem !important;
}
/* العنوان يبقى ظاهر */
.settings-header {
margin-bottom: 1.25rem !important;
}
}
.settings-close {
position: fixed;
top: calc(1rem + env(safe-area-inset-top, 0px));
inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
width: 48px; height: 48px;
border-radius: 50%;
background: var(--accent);
border: 2px solid var(--bg);
color: var(--bg);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s ease;
z-index: 130;
box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 20px var(--accent-glow);
}
.settings-close svg {
width: 20px; height: 20px;
stroke-width: 2.5;
}
.settings-close:hover {
background: var(--bg);
color: var(--accent);
border-color: var(--accent);
transform: rotate(90deg);
}
.settings-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.settings-header h2 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 2rem;
color: var(--accent);
margin-bottom: 0.5rem;
}
.settings-header p {
color: var(--text-dim);
font-size: 0.9rem;
}
.settings-group {
margin-bottom: 1.75rem;
}
/* 🎨 شبكة الثيمات */
.themes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
@media (max-width: 640px) {
.themes-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.55rem;
}
}
@media (max-width: 360px) {
.themes-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.45rem;
}
}
.theme-card {
background: var(--surface);
border: 2px solid var(--border);
border-radius: 12px;
padding: 0.6rem;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
@media (max-width: 640px) {
.theme-card {
padding: 0.5rem;
border-radius: 10px;
}
}
/* ⭐ شارة الافتراضي */
.theme-default-badge {
position: absolute;
top: 4px;
inset-inline-start: 4px;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: #000;
font-size: 0.58rem;
font-weight: 800;
padding: 0.15rem 0.4rem;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
z-index: 2;
pointer-events: none;
}
@media (max-width: 640px) {
.theme-default-badge {
font-size: 0.52rem;
padding: 0.1rem 0.3rem;
}
}
.theme-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.theme-card.active {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-glow), 0 6px 20px rgba(0, 0, 0, 0.4);
}
.theme-card.active::after {
content: '✓';
position: absolute;
top: 6px;
inset-inline-end: 8px;
background: var(--accent);
color: #000;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 0.85rem;
}
.theme-preview {
width: 100%;
aspect-ratio: 16/10;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
margin-bottom: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.theme-preview-dot {
width: 14px;
height: 14px;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.theme-card-name {
text-align: center;
font-size: 0.78rem;
font-weight: 600;
color: var(--text);
}
.theme-card-custom {
background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%);
border-style: dashed;
}
.reset-theme-btn {
width: 100%;
margin-top: 0.85rem;
padding: 0.75rem;
background: transparent;
border: 1.5px dashed var(--border-strong);
border-radius: 10px;
color: var(--text-dim);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all 0.2s ease;
}
.reset-theme-btn:hover {
border-color: var(--accent);
border-style: solid;
color: var(--accent);
background: var(--surface);
}
.theme-preview-custom {
background: linear-gradient(135deg,
rgba(236, 72, 153, 0.2) 0%,
rgba(168, 85, 247, 0.2) 33%,
rgba(59, 130, 246, 0.2) 66%,
rgba(34, 197, 94, 0.2) 100%);
}
.theme-preview-custom-icon {
font-size: 1.8rem;
}
/* 🎛️ Modal الثيم المخصص */
.custom-theme-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.custom-theme-modal.hidden {
display: none;
}
.custom-theme-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
}
.custom-theme-container {
position: relative;
background: var(--surface);
border: 2px solid var(--accent);
border-radius: 20px;
max-width: 560px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 1.5rem;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.custom-theme-close {
position: absolute;
top: 1rem;
inset-inline-end: 1rem;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-hover);
border: 1px solid var(--border);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.custom-theme-close:hover {
background: var(--danger);
border-color: var(--danger);
color: #fff;
}
.custom-theme-header {
text-align: center;
margin-bottom: 1.5rem;
padding-inline-end: 2rem;
}
.custom-theme-header h2 {
font-size: 1.4rem;
color: var(--accent);
margin-bottom: 0.3rem;
}
.custom-theme-header p {
color: var(--text-dim);
font-size: 0.85rem;
}
.custom-theme-preview {
background: var(--cp-bg, #0a0a14);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
margin-bottom: 1.25rem;
transition: all 0.3s ease;
}
.custom-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.custom-preview-logo {
font-family: 'Tajawal', serif;
font-weight: 900;
font-size: 1.1rem;
color: var(--cp-accent, #d4a574);
}
.custom-preview-btn {
background: var(--cp-accent, #d4a574);
color: #000;
padding: 0.4rem 1rem;
border-radius: 8px;
font-weight: 700;
font-size: 0.8rem;
}
.custom-preview-card {
background: var(--cp-surface, #1a1a2e);
border-radius: 10px;
padding: 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.custom-preview-card-title {
color: var(--cp-text, #ffffff);
font-weight: 700;
margin-bottom: 0.3rem;
font-size: 0.9rem;
}
.custom-preview-card-text {
color: var(--cp-text, #ffffff);
opacity: 0.7;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
.custom-preview-accent {
display: inline-block;
background: var(--cp-accent, #d4a574);
color: #000;
padding: 0.2rem 0.6rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
}
.custom-theme-controls {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
margin-bottom: 1.25rem;
}
@media (max-width: 500px) {
.custom-theme-controls {
grid-template-columns: 1fr;
}
}
.color-control {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.75rem;
}
.color-control label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.5rem;
}
.color-input-wrap {
display: flex;
align-items: center;
gap: 0.6rem;
}
.color-input-wrap input[type="color"] {
width: 42px;
height: 42px;
border: 2px solid var(--border);
border-radius: 8px;
cursor: pointer;
padding: 0;
background: transparent;
}
.color-value {
font-family: monospace;
font-size: 0.82rem;
color: var(--text-dim);
background: var(--bg);
padding: 0.35rem 0.55rem;
border-radius: 6px;
flex: 1;
text-align: center;
}
.custom-theme-presets {
margin-bottom: 1.25rem;
}
.custom-theme-presets-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.5rem;
}
.custom-presets-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.custom-preset {
padding: 0.55rem;
border: 1.5px solid transparent;
border-radius: 8px;
color: #fff;
font-weight: 700;
cursor: pointer;
font-size: 0.78rem;
transition: all 0.2s ease;
font-family: inherit;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.custom-preset:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
border-color: #fff;
}
.custom-theme-actions {
display: flex;
gap: 0.75rem;
}
.custom-theme-btn {
flex: 1;
padding: 0.75rem;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
font-size: 0.9rem;
border: none;
transition: all 0.2s ease;
font-family: inherit;
}
.custom-theme-btn-primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: #000;
}
.custom-theme-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px var(--accent-glow);
}
.custom-theme-btn-secondary {
background: var(--surface-hover);
color: var(--text);
border: 1px solid var(--border);
}
.custom-theme-btn-secondary:hover {
background: var(--border);
}
/* دعم الثيم المخصص - يطبق ألوان user على :root */
[data-theme="custom"] {
/* القيم ستُعدّل بواسطة JavaScript */
}
.settings-group-title {
font-weight: 700;
color: var(--text);
font-size: 0.95rem;
margin-bottom: 0.875rem;
display: flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed var(--border);
}
.settings-group-title::before {
content: '';
width: 3px; height: 14px;
background: var(--accent);
border-radius: 2px;
}
.settings-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
}
.settings-item:last-child { border-bottom: none; }
.settings-item-label {
flex: 1;
color: var(--text);
font-weight: 500;
font-size: 0.95rem;
}
.settings-item-desc {
color: var(--text-faded);
font-size: 0.8rem;
margin-top: 0.125rem;
}
/* سويتش */
.toggle-switch {
position: relative;
width: 48px;
height: 26px;
background: var(--surface-hover);
border: 1px solid var(--border);
border-radius: 9999px;
cursor: pointer;
flex-shrink: 0;
transition: all 0.3s ease;
}
.toggle-switch::after {
content: '';
position: absolute;
top: 2px;
inset-inline-start: 2px;
width: 20px; height: 20px;
background: var(--text-dim);
border-radius: 50%;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.toggle-switch.active {
background: var(--accent);
border-color: var(--accent);
}
.toggle-switch.active::after {
inset-inline-start: 24px;
background: #fff;
}
[dir="rtl"] .toggle-switch.active::after {
inset-inline-start: 24px;
}
/* زر خطر */
.settings-danger-btn {
padding: 0.625rem 1.25rem;
background: transparent;
border: 1px solid var(--danger);
color: var(--danger);
border-radius: 0.5rem;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.settings-danger-btn:hover {
background: var(--danger);
color: #fff;
}
/* ═══════════ 🎚️ شريط الفلاتر ═══════════ */
.filter-bar {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 1.5rem;
padding: 0.625rem 0.875rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.75rem;
flex-wrap: wrap;
}
.filter-bar-label {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--text-dim);
font-size: 0.85rem;
font-weight: 600;
padding-inline-end: 0.625rem;
border-inline-end: 1px solid var(--border);
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.875rem;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: 9999px;
color: var(--text-dim);
font-family: inherit;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-chip:hover {
border-color: var(--accent-dim);
color: var(--text);
}
.filter-chip.active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
font-weight: 600;
}
.filter-chip svg {
width: 14px; height: 14px;
}
/* ═══════════ 🔍 البحث المتقدم ═══════════ */
.advanced-search-btn {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--surface-elevated);
border: 1px solid var(--border);
color: var(--accent);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}
.advanced-search-btn:hover {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
transform: rotate(90deg);
}
/* تحسين شريط البحث ليسع الزر */
.search-row {
display: flex;
align-items: center;
gap: 0.625rem;
max-width: 680px;
margin: 0 auto 4rem;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-row .search-form {
flex: 1;
margin: 0;
}
/* ═══════════ 🎯 فلتر نوع البحث ═══════════ */
.search-type-filter {
position: relative;
flex-shrink: 0;
}
.search-type-btn {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 1.5px solid var(--border);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
transition: all 0.25s ease;
box-shadow: var(--shadow);
}
.search-type-btn:hover {
border-color: var(--accent);
color: var(--accent);
transform: scale(1.05);
}
.search-type-btn.active {
border-color: var(--accent);
background: var(--accent-dim);
}
.search-type-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
inset-inline-end: 0;
background: var(--surface-elevated);
border: 1.5px solid var(--border);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
z-index: 60;
min-width: 150px;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: all 0.25s ease;
overflow: hidden;
}
.search-type-filter.open .search-type-dropdown {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.search-type-option {
width: 100%;
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.75rem 1rem;
background: transparent;
border: none;
color: var(--text);
cursor: pointer;
font-family: inherit;
font-size: 0.92rem;
font-weight: 500;
text-align: start;
transition: background 0.2s ease;
}
.search-type-option:hover {
background: var(--accent-dim);
}
.search-type-option.active {
background: var(--accent-dim);
color: var(--accent);
font-weight: 700;
}
.search-type-option span:first-child {
font-size: 1.2rem;
}
/* على الموبايل */
@media (max-width: 640px) {
.search-type-btn {
width: 40px;
height: 40px;
font-size: 1rem;
}
.search-type-dropdown {
min-width: 130px;
}
.search-type-option {
padding: 0.65rem 0.85rem;
font-size: 0.88rem;
}
}
/* نافذة البحث المتقدم */
.advanced-overlay {
position: fixed; inset: 0;
z-index: 125;
background: radial-gradient(ellipse at center, rgba(17, 23, 41, 0.92) 0%, rgba(6, 8, 15, 0.98) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 3rem 1rem 1rem;
animation: fadeIn 0.3s ease;
overflow-y: auto;
}
.advanced-container {
width: 100%;
max-width: 680px;
background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 1.5px solid var(--border-strong);
border-radius: 1.25rem;
padding: 2rem;
position: relative;
box-shadow: var(--shadow-lg), 0 0 100px var(--accent-glow);
animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.advanced-close {
position: absolute;
top: 1rem;
inset-inline-end: 1rem;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s ease;
}
.advanced-close:hover {
background: var(--accent); color: var(--bg);
transform: rotate(90deg);
}
.advanced-header {
text-align: center;
margin-bottom: 1.75rem;
}
.advanced-header h2 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.75rem;
color: var(--accent);
margin-bottom: 0.375rem;
}
.advanced-header p {
color: var(--text-dim);
font-size: 0.9rem;
}
.adv-field {
margin-bottom: 1.25rem;
}
.adv-field-label {
display: block;
font-weight: 600;
color: var(--text);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
/* نوع الوسائط - تبويبات */
.adv-type-tabs {
display: flex;
gap: 0.5rem;
}
.adv-type-tab {
flex: 1;
padding: 0.625rem;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-dim);
border-radius: 0.5rem;
cursor: pointer;
font-family: inherit;
font-weight: 500;
transition: all 0.3s ease;
}
.adv-type-tab:hover {
border-color: var(--accent-dim);
color: var(--text);
}
.adv-type-tab.active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
font-weight: 600;
}
/* الأنواع (تصنيفات) */
.adv-genres-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
max-height: 180px;
overflow-y: auto;
padding: 0.5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.5rem;
}
.adv-genre-chip {
padding: 0.375rem 0.75rem;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: 9999px;
color: var(--text-dim);
font-family: inherit;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s ease;
}
.adv-genre-chip:hover {
border-color: var(--accent-dim);
color: var(--text);
}
.adv-genre-chip.selected {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
font-weight: 600;
}
/* السنوات (من - إلى) */
.adv-year-range {
display: flex;
gap: 0.75rem;
align-items: center;
}
.adv-year-range select {
flex: 1;
padding: 0.625rem;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.9rem;
cursor: pointer;
}
.adv-year-range select:focus {
outline: none;
border-color: var(--accent);
}
.adv-year-sep {
color: var(--text-faded);
font-size: 0.85rem;
}
/* التقييم الأدنى (شريط) */
.adv-rating-slider {
display: flex;
align-items: center;
gap: 0.875rem;
}
.adv-rating-slider input[type="range"] {
flex: 1;
height: 6px;
border-radius: 3px;
background: var(--surface-hover);
outline: none;
-webkit-appearance: none;
appearance: none;
}
.adv-rating-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgba(0,0,0,0.3);
}
.adv-rating-slider input[type="range"]::-moz-range-thumb {
width: 20px; height: 20px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
border: 2px solid var(--bg);
}
.adv-rating-value {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--accent);
font-weight: 700;
font-size: 0.95rem;
min-width: 50px;
}
/* اللغة */
.adv-lang-select {
width: 100%;
padding: 0.625rem;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.9rem;
cursor: pointer;
}
.adv-lang-select:focus {
outline: none;
border-color: var(--accent);
}
/* أزرار التطبيق */
.adv-actions {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
}
.adv-btn {
flex: 1;
padding: 0.875rem;
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 700;
font-size: 0.95rem;
border: 1.5px solid var(--border);
transition: all 0.3s ease;
}
.adv-btn.primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-color: transparent;
box-shadow: var(--shadow-gold);
}
.adv-btn.primary:hover {
transform: translateY(-2px);
}
.adv-btn.secondary {
background: var(--surface);
color: var(--text);
}
.adv-btn.secondary:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ═══════════ 📜 تاريخ المشاهدة ═══════════ */
.history-section {
margin-top: 1.5rem;
}
.history-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
.history-header h3 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.35rem;
color: var(--accent);
}
.history-clear-btn {
padding: 0.375rem 0.875rem;
background: transparent;
border: 1px solid var(--border);
color: var(--text-faded);
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-size: 0.8rem;
transition: all 0.3s ease;
}
.history-clear-btn:hover {
border-color: var(--danger);
color: var(--danger);
}
/* ═══════════ 🌍 حسب الدولة ═══════════ */
.genre-mode-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
padding: 0.375rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9999px;
width: fit-content;
margin-inline: auto;
}
.genre-mode-tab {
padding: 0.55rem 1.5rem;
background: transparent;
border: none;
color: var(--text-dim);
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.genre-mode-tab:hover { color: var(--text); }
.genre-mode-tab.active {
background: var(--accent);
color: var(--bg);
box-shadow: var(--shadow-gold);
}
.country-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.875rem;
}
.country-card {
padding: 1rem 0.75rem;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: 0.875rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
font-family: inherit;
color: var(--text);
}
.country-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: var(--shadow-gold);
}
.country-card.active {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-color: var(--accent);
font-weight: 700;
}
.country-flag {
font-size: 2.25rem;
line-height: 1;
}
.country-name {
font-size: 0.9rem;
font-weight: 600;
}
/* شبكة تصنيفات الدولة (بعد اختيار دولة) */
.country-genre-picker {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.country-genre-picker .genre-card {
padding: 1.2rem 0.75rem;
}
.country-genre-picker .genre-card.active-all {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-color: var(--accent);
font-weight: 700;
}
/* ═══════════ ✓ زر سجل التصفح اليدوي ═══════════ */
.watched-btn-card {
position: absolute;
top: 0.625rem;
inset-inline-start: 0.625rem;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(13, 13, 17, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1.5px solid rgba(230, 181, 71, 0.4);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 3;
}
.watched-btn-card:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
transform: scale(1.1);
}
.watched-btn-card.watched {
background: var(--success);
border-color: var(--success);
color: #fff;
}
.watched-btn-card.watched:hover {
background: #5aa84a;
}
/* ═══════════ 🎭 صفحة الممثل ═══════════ */
.person-overlay {
position: fixed; inset: 0;
z-index: 110;
background: radial-gradient(ellipse at center, rgba(17, 23, 41, 0.95) 0%, rgba(6, 8, 15, 0.99) 100%);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
overflow-y: auto;
animation: fadeIn 0.3s ease;
}
.person-overlay.hidden { display: none; }
.person-content {
max-width: 1100px;
margin: 0 auto;
padding: 4rem 1.5rem 3rem;
animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.person-close {
position: fixed;
top: 1rem;
inset-inline-end: 1rem;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--surface);
border: 1.5px solid var(--border-strong);
color: var(--text);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 10;
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.person-close:hover {
background: var(--accent); color: var(--bg);
transform: rotate(90deg);
}
.person-hero {
display: grid;
grid-template-columns: 240px 1fr;
gap: 2rem;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) {
.person-hero {
grid-template-columns: 1fr;
text-align: center;
}
.person-photo { margin: 0 auto; }
}
.person-photo {
width: 240px;
height: 340px;
border-radius: 1rem;
overflow: hidden;
background: var(--surface);
border: 2px solid var(--border);
box-shadow: var(--shadow-lg), 0 0 30px var(--accent-glow);
}
.person-photo img {
width: 100%; height: 100%; object-fit: cover;
display: block;
}
.person-photo .no-photo {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--surface) 0%, var(--surface-hover) 100%);
color: var(--text-faded);
font-size: 4rem;
}
.person-name {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: clamp(2rem, 4vw, 3rem);
color: var(--accent);
margin-bottom: 0.5rem;
font-weight: 700;
}
.person-role {
color: var(--text-dim);
font-size: 1.05rem;
margin-bottom: 1.5rem;
}
.person-meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.25rem;
color: var(--text-dim);
font-size: 0.9rem;
}
.person-meta-item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.person-meta-item svg {
width: 16px; height: 16px;
color: var(--accent);
}
.person-bio {
color: var(--text);
line-height: 1.8;
font-size: 0.95rem;
max-height: 240px;
overflow-y: auto;
padding-inline-end: 0.5rem;
}
.person-bio::-webkit-scrollbar { width: 6px; }
.person-bio::-webkit-scrollbar-track { background: transparent; }
.person-bio::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.person-filmography h3 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.5rem;
color: var(--accent);
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* الممثلين بالتفاصيل - قابلين للنقر */
.cast-card.clickable {
cursor: pointer;
transition: transform 0.3s ease;
}
.cast-card.clickable:hover {
transform: translateY(-4px);
}
/* ═══════════ 📱 قسم شاهد (تيك توك) ═══════════ */
.watch-container {
position: fixed;
inset: 0;
top: 64px; /* أسفل الهيدر */
background: #000;
overflow-y: scroll;
scroll-snap-type: y mandatory;
z-index: 50;
display: none;
}
.watch-container.active {
display: block;
}
/* زر الخروج من قسم شاهد */
.watch-exit-btn {
position: fixed;
top: 80px;
inset-inline-end: 1rem;
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(13, 13, 17, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 2px solid var(--accent);
color: #fff;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
z-index: 100;
box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 20px var(--accent-glow);
transition: all 0.3s ease;
}
.watch-container.active ~ .watch-exit-btn,
.watch-exit-btn.visible {
display: flex;
}
.watch-exit-btn:hover {
background: var(--accent);
color: var(--bg);
transform: scale(1.1) rotate(90deg);
}
.watch-exit-btn svg {
width: 24px; height: 24px;
}
.watch-container::-webkit-scrollbar { display: none; }
.watch-container { scrollbar-width: none; }
.watch-item {
position: relative;
width: 100%;
height: calc(100vh - 64px);
scroll-snap-align: start;
scroll-snap-stop: always;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.watch-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: brightness(0.35) blur(8px);
transform: scale(1.05);
}
/* 🎬 حاوية الفيديو - تظهر إما البوستر + زر، أو iframe */
.watch-video-container {
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
width: min(90%, 640px);
aspect-ratio: 16/9;
border-radius: 16px;
overflow: hidden;
background: #000;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 60px rgba(212, 165, 116, 0.2);
z-index: 5;
cursor: pointer;
}
.watch-video-placeholder {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.watch-poster-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.65);
}
.watch-play-big {
position: relative;
z-index: 2;
width: 72px;
height: 72px;
filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.7));
animation: watchPlayPulse 2s ease-in-out infinite;
transition: transform 0.3s ease;
}
.watch-video-container:hover .watch-play-big {
transform: scale(1.15);
}
@keyframes watchPlayPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.watch-tap-hint {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.75);
color: var(--accent);
padding: 0.45rem 0.95rem;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
backdrop-filter: blur(8px);
z-index: 3;
}
.watch-video-container iframe {
width: 100%;
height: 100%;
border: 0;
background: #000;
}
@media (max-width: 640px) {
.watch-video-container {
top: 3%;
width: 95%;
}
.watch-play-big {
width: 60px;
height: 60px;
}
.watch-tap-hint {
font-size: 0.75rem;
padding: 0.35rem 0.75rem;
}
}
/* اخفي watch-poster-center و watch-play-circle القديمة */
.watch-poster-center, .watch-play-circle { display: none !important; }
.watch-overlay-gradient {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.85) 100%),
radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.5) 100%);
}
/* زخارف تراثية بالجوانب */
.watch-ornament {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 300px;
opacity: 0.35;
pointer-events: none;
}
.watch-ornament.left { left: 0; }
.watch-ornament.right { right: 0; transform: translateY(-50%) scaleX(-1); }
@media (max-width: 640px) {
.watch-ornament { width: 40px; height: 200px; opacity: 0.25; }
}
.watch-content {
position: relative;
z-index: 5;
width: 100%;
max-width: 500px;
padding: 2rem 1.5rem;
text-align: center;
color: #fff;
}
/* بوستر مركزي (بدل الصورة ملء الشاشة) */
.watch-poster-center {
width: 200px;
aspect-ratio: 2/3;
border-radius: 1rem;
overflow: hidden;
margin: 0 auto 1.25rem;
box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 3px var(--accent), 0 0 40px var(--accent-glow);
background: var(--surface);
}
.watch-poster-center img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.watch-play-circle {
display: inline-block;
position: relative;
margin-bottom: 1.5rem;
cursor: pointer;
filter: drop-shadow(0 0 30px rgba(230, 181, 71, 0.6));
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.watch-play-circle:hover {
transform: scale(1.12);
}
.watch-play-circle svg {
width: 100px; height: 100px;
}
.watch-play-ring {
position: absolute;
inset: -10px;
border-radius: 50%;
border: 2px solid var(--accent);
opacity: 0.5;
animation: pulseRing 2s ease-out infinite;
pointer-events: none;
}
.watch-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 0 4px 16px rgba(0,0,0,0.9);
color: #fff;
}
.watch-meta {
display: inline-flex;
align-items: center;
gap: 1rem;
font-size: 0.95rem;
color: var(--accent);
margin-bottom: 1rem;
text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
.watch-meta-item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.watch-meta-item svg {
width: 16px; height: 16px;
}
.watch-overview {
color: rgba(255,255,255,0.9);
line-height: 1.6;
font-size: 0.9rem;
max-width: 420px;
margin: 0 auto 1.5rem;
text-shadow: 0 2px 8px rgba(0,0,0,0.9);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.watch-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.watch-action-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.3);
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
text-decoration: none;
}
.watch-action-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
transform: translateY(-2px);
}
.watch-action-btn.primary {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
.watch-scroll-hint {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.6);
font-size: 0.85rem;
animation: bounceDown 2s ease-in-out infinite;
}
@keyframes bounceDown {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
50% { transform: translateX(-50%) translateY(-10px); opacity: 1; }
}
.watch-loading {
position: fixed;
inset: 0;
top: 64px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
z-index: 51;
}
/* حاوي الفيديو الداخلي */
.watch-video-wrap {
position: absolute;
inset: 0;
z-index: 4;
background: #000;
display: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.watch-video-wrap.playing {
display: block;
opacity: 1;
}
.watch-video-wrap iframe {
width: 100%;
height: 100%;
border: 0;
}
/* زر الإغلاق بعد التشغيل */
.watch-stop-btn {
position: absolute;
top: 16px;
inset-inline-end: 16px;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1.5px solid var(--accent);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: all 0.3s ease;
}
.watch-stop-btn:hover {
background: var(--accent);
color: var(--bg);
transform: rotate(90deg);
}
/* ═══════════ 🎲 قسم "خلي فلمك عليَّ" ═══════════ */
.discover-overlay {
position: fixed;
inset: 0;
top: 64px;
background: var(--bg);
background-image: var(--bg-gradient);
overflow-y: auto;
z-index: 50;
display: none;
}
.discover-overlay.active { display: block; }
/* شاشة البداية */
.discover-start {
min-height: calc(100vh - 64px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem;
text-align: center;
gap: 2rem;
}
.discover-start-icon {
font-size: 5rem;
animation: floatDice 3s ease-in-out infinite;
filter: drop-shadow(0 8px 24px var(--accent-glow));
}
@keyframes floatDice {
0%, 100% { transform: translateY(0) rotate(-5deg); }
50% { transform: translateY(-15px) rotate(5deg); }
}
.discover-start-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--accent);
font-weight: 700;
text-shadow: 0 2px 20px var(--accent-glow);
}
.discover-start-subtitle {
color: var(--text-dim);
font-size: 1.1rem;
max-width: 500px;
}
.discover-start-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-top: 1rem;
}
.discover-start-btn {
padding: 1rem 2rem;
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 700;
font-size: 1.05rem;
border: 2px solid var(--border-strong);
background: var(--surface-elevated);
color: var(--text);
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.625rem;
}
.discover-start-btn:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-3px);
box-shadow: var(--shadow-gold);
}
.discover-start-btn.primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-color: transparent;
box-shadow: var(--shadow-gold);
}
.discover-start-btn.primary:hover {
background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
color: var(--bg);
}
/* شاشة البحث */
.discover-search {
min-height: calc(100vh - 64px);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem;
gap: 1.5rem;
}
.discover-search.active { display: flex; }
.discover-search-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: clamp(1.5rem, 4vw, 2.25rem);
color: var(--accent);
text-align: center;
}
.discover-search-form {
width: 100%;
max-width: 600px;
display: flex;
gap: 0.625rem;
}
.discover-search-input {
flex: 1;
padding: 1rem 1.25rem;
border-radius: 9999px;
border: 2px solid var(--border-strong);
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
}
.discover-search-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-glow);
}
.discover-search-submit {
padding: 0 1.5rem;
border-radius: 9999px;
border: none;
background: var(--accent);
color: var(--bg);
cursor: pointer;
font-family: inherit;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s ease;
min-width: 100px;
}
.discover-search-submit:hover {
background: var(--accent-hover);
transform: translateY(-2px);
}
/* شاشة العرض - العمل الحالي */
.discover-show {
display: none;
min-height: calc(100vh - 64px);
padding: 1.5rem;
position: relative;
}
.discover-show.active { display: block; }
.discover-layout {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.5rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
min-height: calc(100vh - 180px);
}
@media (max-width: 820px) {
.discover-layout {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* زر التحكم الجانبي */
.discover-side-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.625rem;
padding: 2rem 1rem;
min-width: 130px;
height: 280px;
border-radius: 1.25rem;
border: 2px solid var(--border-strong);
background: var(--surface-elevated);
color: var(--text);
cursor: pointer;
font-family: inherit;
font-weight: 700;
font-size: 0.95rem;
transition: all 0.3s ease;
text-align: center;
}
.discover-side-btn:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-4px);
box-shadow: var(--shadow-gold);
}
.discover-side-btn.next {
background: linear-gradient(135deg, var(--accent-dim) 0%, var(--surface-elevated) 100%);
}
.discover-side-btn.next:hover {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
}
.discover-side-btn svg {
width: 48px; height: 48px;
color: var(--accent);
transition: all 0.3s ease;
}
.discover-side-btn.next:hover svg,
.discover-side-btn:hover svg {
color: var(--bg);
}
.discover-side-btn:not(.next):hover svg { color: var(--accent); }
.discover-side-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
@media (max-width: 820px) {
.discover-side-btn {
height: auto;
min-width: unset;
width: 100%;
flex-direction: row;
padding: 1rem;
}
.discover-side-btn svg { width: 32px; height: 32px; }
}
/* البطاقة المركزية للعمل */
.discover-card {
background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 2px solid var(--border-strong);
border-radius: 1.5rem;
padding: 1.5rem;
box-shadow: var(--shadow-lg), 0 0 60px var(--accent-glow);
max-width: 780px;
margin: 0 auto;
animation: discoverCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes discoverCardIn {
0% { opacity: 0; transform: translateY(30px) scale(0.95); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.discover-card-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 1.5rem;
}
@media (max-width: 640px) {
.discover-card-layout {
grid-template-columns: 1fr;
text-align: center;
}
}
.discover-card-poster {
width: 220px;
aspect-ratio: 2/3;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
background: var(--surface);
margin: 0 auto;
}
.discover-card-poster img {
width: 100%; height: 100%;
object-fit: cover;
}
.discover-card-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--accent);
font-weight: 700;
margin-bottom: 0.5rem;
line-height: 1.2;
}
.discover-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
margin-bottom: 1rem;
color: var(--text-dim);
}
@media (max-width: 640px) {
.discover-card-meta { justify-content: center; }
}
.discover-card-meta-item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.95rem;
}
.discover-card-meta-item svg {
width: 16px; height: 16px;
color: var(--accent);
}
.discover-card-overview {
color: var(--text);
line-height: 1.8;
font-size: 0.95rem;
max-height: 180px;
overflow-y: auto;
padding-inline-end: 0.5rem;
}
.discover-card-actions {
display: flex;
gap: 0.75rem;
margin-top: 1.25rem;
flex-wrap: wrap;
}
.discover-card-btn {
padding: 0.75rem 1.5rem;
border-radius: 9999px;
border: 1.5px solid var(--border-strong);
background: var(--surface);
color: var(--text);
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.discover-card-btn.primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-color: transparent;
}
.discover-card-btn:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
}
.discover-card-btn.primary:hover {
background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
color: var(--bg);
}
/* العداد التنازلي */
.discover-timer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: 1.5rem;
color: var(--text-dim);
font-size: 0.95rem;
}
.discover-timer-circle {
position: relative;
width: 56px; height: 56px;
}
.discover-timer-circle svg {
width: 100%; height: 100%;
transform: rotate(-90deg);
}
.discover-timer-circle .timer-bg-ring {
fill: none;
stroke: var(--border);
stroke-width: 4;
}
.discover-timer-circle .timer-progress {
fill: none;
stroke: var(--accent);
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 157;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear;
}
.discover-timer-number {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
font-weight: 700;
font-size: 1.1rem;
}
.discover-timer.paused .timer-progress { stroke: var(--text-faded); }
.discover-timer.paused .discover-timer-number { color: var(--text-faded); }
/* زر خروج قسم اكتشف */
.discover-exit-btn {
position: fixed;
top: 80px;
inset-inline-end: 1rem;
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(13, 13, 17, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 2px solid var(--accent);
color: #fff;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
z-index: 100;
box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 20px var(--accent-glow);
transition: all 0.3s ease;
}
.discover-exit-btn.visible { display: flex; }
.discover-exit-btn:hover {
background: var(--accent);
color: var(--bg);
transform: scale(1.1) rotate(90deg);
}
.discover-exit-btn svg { width: 24px; height: 24px; }
/* ═══════════ ⭐ التقييم الشخصي ═══════════ */
.personal-rating-section {
background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 1.5px solid var(--border);
border-radius: 1rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1rem;
}
.personal-rating-header {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 0.875rem;
color: var(--accent);
font-weight: 700;
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.1rem;
}
.stars-input {
display: inline-flex;
gap: 0.5rem;
direction: ltr;
}
.star-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 0.25rem;
transition: all 0.2s ease;
color: var(--text-faded);
}
.star-btn:hover,
.star-btn.hover,
.star-btn.filled {
color: var(--accent);
transform: scale(1.15);
}
.star-btn svg {
width: 32px; height: 32px;
transition: fill 0.2s ease;
}
.star-btn.filled svg,
.star-btn.hover svg {
fill: var(--accent);
}
.stars-label {
display: inline-block;
margin-inline-start: 0.875rem;
color: var(--text-dim);
font-weight: 600;
font-size: 0.9rem;
vertical-align: middle;
}
.star-clear-btn {
background: transparent;
border: none;
color: var(--text-faded);
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
padding: 0.25rem 0.5rem;
margin-inline-start: 0.5rem;
transition: color 0.2s ease;
}
.star-clear-btn:hover { color: var(--danger); }
/* ═══════════ 📝 الملاحظات ═══════════ */
.personal-notes-section {
background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 1.5px solid var(--border);
border-radius: 1rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1rem;
}
/* 😊 أزرار التقييم السريع */
.quick-sentiment {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
margin: 0.75rem 0;
}
.sentiment-btn {
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--text-dim);
padding: 0.35rem 0.8rem;
border-radius: 20px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.sentiment-btn:hover {
border-color: var(--accent);
color: var(--text);
transform: translateY(-1px);
}
.sentiment-btn.active {
background: rgba(255, 215, 0, 0.15);
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}
.sentiment-btn:nth-child(1).active { background: rgba(255, 100, 50, 0.15); border-color: #ff6432; color: #ff6432; }
.sentiment-btn:nth-child(2).active { background: rgba(100, 200, 100, 0.15); border-color: #64c864; color: #64c864; }
.sentiment-btn:nth-child(3).active { background: rgba(200, 200, 100, 0.15); border-color: #c8c864; color: #c8c864; }
.sentiment-btn:nth-child(4).active { background: rgba(200, 100, 100, 0.15); border-color: #c86464; color: #c86464; }
.notes-textarea {
width: 100%;
min-height: 80px;
padding: 0.75rem;
background: var(--bg);
border: 1.5px solid var(--border);
border-radius: 0.625rem;
color: var(--text);
font-family: inherit;
font-size: 0.95rem;
resize: vertical;
line-height: 1.6;
outline: none;
transition: border-color 0.3s ease;
}
.notes-textarea:focus {
border-color: var(--accent);
}
.notes-textarea::placeholder {
color: var(--text-faded);
}
.notes-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
justify-content: flex-end;
}
.notes-save-btn {
padding: 0.5rem 1rem;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.notes-save-btn:hover {
background: var(--accent-hover);
transform: translateY(-2px);
}
.notes-saved-hint {
color: var(--success);
font-size: 0.85rem;
font-weight: 600;
align-self: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.notes-saved-hint.show { opacity: 1; }
/* ═══════════ 📊 صفحة الإحصائيات ═══════════ */
.stats-overlay {
position: fixed; inset: 0;
top: 64px;
background: var(--bg);
background-image: var(--bg-gradient);
overflow-y: auto;
z-index: 50;
display: none;
padding: 2rem 1.5rem;
}
.stats-overlay.active { display: block; }
.stats-container {
max-width: 1100px;
margin: 0 auto;
}
.stats-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.stats-header h1 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--accent);
margin-bottom: 0.5rem;
}
.stats-header p {
color: var(--text-dim);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.stat-card {
background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 1.5px solid var(--border);
border-radius: 1rem;
padding: 1.5rem;
text-align: center;
transition: all 0.3s ease;
}
.stat-card:hover {
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: var(--shadow-gold);
}
.stat-card-icon {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.stat-card-value {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 2.5rem;
color: var(--accent);
font-weight: 700;
line-height: 1;
margin-bottom: 0.375rem;
}
.stat-card-label {
color: var(--text-dim);
font-size: 0.9rem;
font-weight: 600;
}
.stats-section {
margin-bottom: 2rem;
}
.stats-section-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.4rem;
color: var(--accent);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed var(--border);
}
.stats-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.stats-list-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.625rem;
}
.stats-list-label {
color: var(--text);
font-weight: 500;
flex: 1;
}
.stats-list-bar {
position: relative;
flex: 2;
height: 12px;
background: var(--surface-hover);
border-radius: 6px;
overflow: hidden;
}
.stats-list-bar-fill {
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
background: linear-gradient(90deg, var(--accent-dim) 0%, var(--accent) 100%);
border-radius: 6px;
transition: width 0.6s ease;
}
.stats-list-count {
color: var(--accent);
font-weight: 700;
min-width: 30px;
text-align: center;
}
/* زر الخروج من الإحصائيات */
.stats-exit-btn {
position: fixed;
top: 80px;
inset-inline-end: 1rem;
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(13, 13, 17, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 2px solid var(--accent);
color: #fff;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
z-index: 100;
box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 20px var(--accent-glow);
transition: all 0.3s ease;
}
.stats-exit-btn.visible { display: flex; }
.stats-exit-btn:hover {
background: var(--accent);
color: var(--bg);
transform: scale(1.1) rotate(90deg);
}
.stats-exit-btn svg { width: 24px; height: 24px; }
/* ═══════════ 💾 نسخة احتياطية ═══════════ */
.backup-btn {
padding: 0.625rem 1rem;
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
border-radius: 0.5rem;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.backup-btn:hover {
background: var(--accent);
color: var(--bg);
}
/* ═══════════ 🌟 فلم اليوم ═══════════ */
.movie-of-day-section {
margin: 1.5rem 0 2.5rem;
padding: 0 1.5rem;
}
.movie-of-day-container {
position: relative;
background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 2px solid var(--accent);
border-radius: 1.5rem;
overflow: hidden;
box-shadow: var(--shadow-lg), 0 0 60px var(--accent-glow);
max-width: 1100px;
margin: 0 auto;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.movie-of-day-container:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg), 0 0 80px var(--accent-glow);
}
.movie-of-day-backdrop {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: brightness(0.35) blur(4px);
transform: scale(1.1);
z-index: 0;
}
.movie-of-day-content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 180px 1fr;
gap: 1.5rem;
padding: 1.75rem;
color: #fff;
}
@media (max-width: 640px) {
.movie-of-day-content {
grid-template-columns: 1fr;
text-align: center;
}
}
.movie-of-day-poster {
width: 180px;
aspect-ratio: 2/3;
border-radius: 0.875rem;
overflow: hidden;
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
margin: 0 auto;
}
.movie-of-day-poster img {
width: 100%; height: 100%;
object-fit: cover;
}
.movie-of-day-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.875rem;
background: var(--accent);
color: var(--bg);
border-radius: 9999px;
font-weight: 700;
font-size: 0.85rem;
margin-bottom: 0.75rem;
font-family: 'Aref Ruqaa', 'Amiri', serif;
}
.movie-of-day-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 0.5rem;
text-shadow: 0 4px 12px rgba(0,0,0,0.9);
color: #fff;
}
.movie-of-day-meta {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
margin-bottom: 1rem;
color: var(--accent);
}
@media (max-width: 640px) {
.movie-of-day-meta { justify-content: center; }
}
.movie-of-day-overview {
color: rgba(255,255,255,0.92);
line-height: 1.7;
font-size: 0.95rem;
max-height: 120px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
/* 💡 قسم المعلومة الشيقة */
.movie-of-day-fact {
position: relative;
z-index: 2;
margin: 0 1.5rem 1.5rem;
padding: 1.125rem 1.25rem;
background: linear-gradient(135deg, rgba(212, 165, 116, 0.12) 0%, rgba(184, 134, 11, 0.08) 100%);
border: 1.5px solid var(--accent);
border-radius: 1rem;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: default;
}
.motd-fact-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.625rem;
}
.motd-fact-icon {
font-size: 1.25rem;
animation: motdFactGlow 2s ease-in-out infinite;
}
@keyframes motdFactGlow {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.85; }
}
.motd-fact-label {
font-weight: 700;
color: var(--accent);
font-size: 0.95rem;
}
.motd-fact-body {
min-height: 2.5rem;
}
.motd-fact-text {
color: rgba(255, 255, 255, 0.95);
font-size: 0.92rem;
line-height: 1.7;
margin: 0;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
animation: motdFactFadeIn 0.5s ease;
}
@keyframes motdFactFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.motd-fact-loading {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-dim);
font-size: 0.88rem;
}
.motd-fact-dots {
display: inline-flex;
gap: 3px;
}
.motd-fact-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
animation: motdDotPulse 1.4s ease-in-out infinite;
}
.motd-fact-dots span:nth-child(2) { animation-delay: 0.2s; }
.motd-fact-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes motdDotPulse {
0%, 60%, 100% { transform: scale(0.7); opacity: 0.4; }
30% { transform: scale(1.1); opacity: 1; }
}
@media (max-width: 640px) {
.movie-of-day-fact {
margin: 0 1rem 1rem;
padding: 0.875rem 1rem;
}
.motd-fact-text { font-size: 0.86rem; }
}
/* ═══════════ 🎭 قسم يوم الجمعة ═══════════ */
.friday-overlay {
position: fixed; inset: 0;
top: 64px;
background: var(--bg);
background-image: var(--bg-gradient);
overflow-y: auto;
z-index: 50;
display: none;
padding: 2rem 1.5rem;
}
.friday-overlay.active { display: block; }
.friday-container {
max-width: 1200px;
margin: 0 auto;
}
.friday-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.friday-header-icon {
font-size: 4rem;
margin-bottom: 0.5rem;
}
.friday-header h1 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--accent);
margin-bottom: 0.5rem;
}
.friday-header p {
color: var(--text-dim);
font-size: 1.05rem;
}
.friday-collections {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
margin-bottom: 2rem;
}
.friday-card {
position: relative;
background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 2px solid var(--border);
border-radius: 1.25rem;
padding: 2rem 1.5rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
overflow: hidden;
}
.friday-card:hover {
border-color: var(--accent);
transform: translateY(-6px);
box-shadow: var(--shadow-lg), 0 20px 40px var(--accent-glow);
}
.friday-card-icon {
font-size: 3.5rem;
margin-bottom: 1rem;
display: block;
}
.friday-card-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.4rem;
color: var(--accent);
margin-bottom: 0.5rem;
font-weight: 700;
}
.friday-card-desc {
color: var(--text-dim);
font-size: 0.92rem;
line-height: 1.6;
}
.friday-results {
margin-top: 2rem;
}
.friday-back-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
.friday-back-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
/* زر خروج عام (لـ يوم الجمعة وغيرها) */
.friday-exit-btn {
position: fixed;
top: 80px;
inset-inline-end: 1rem;
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(13, 13, 17, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 2px solid var(--accent);
color: #fff;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
z-index: 100;
box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 20px var(--accent-glow);
transition: all 0.3s ease;
}
.friday-exit-btn.visible { display: flex; }
.friday-exit-btn:hover {
background: var(--accent);
color: var(--bg);
transform: scale(1.1) rotate(90deg);
}
.friday-exit-btn svg { width: 24px; height: 24px; }
/* ═══════════ 🍳 مطابخ المزاج (زر ثالث بـ اقتراح فيلم) ═══════════ */
.kitchens-overlay {
position: fixed;
inset: 0;
top: 64px;
background: var(--bg);
background-image: var(--bg-gradient);
overflow-y: auto;
z-index: 60;
display: none;
padding: 2rem 1.5rem;
}
.kitchens-overlay.active { display: block; }
.kitchens-container {
max-width: 1100px;
margin: 0 auto;
}
.kitchens-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.kitchens-header h1 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: clamp(1.8rem, 4vw, 2.5rem);
color: var(--accent);
margin-bottom: 0.5rem;
}
.kitchens-header p {
color: var(--text-dim);
}
.kitchens-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.25rem;
}
.kitchen-card {
background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 2px solid var(--border);
border-radius: 1.25rem;
padding: 1.75rem 1.25rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.kitchen-card:hover {
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: var(--shadow-gold);
}
.kitchen-card-icon {
font-size: 3rem;
margin-bottom: 0.75rem;
display: block;
}
.kitchen-card-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.2rem;
color: var(--accent);
margin-bottom: 0.375rem;
font-weight: 700;
}
.kitchen-card-desc {
color: var(--text-dim);
font-size: 0.88rem;
line-height: 1.5;
}
/* ═══════════ 📱 PWA - زر التثبيت + بانر ═══════════ */
.install-banner {
position: fixed;
bottom: 1rem;
inset-inline-start: 1rem;
inset-inline-end: 1rem;
max-width: 420px;
margin: 0 auto;
padding: 0.875rem 1rem;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-radius: 1rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 40px var(--accent-glow);
z-index: 200;
display: none;
align-items: center;
gap: 0.625rem;
animation: slideUpBanner 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.install-banner.visible { display: flex; }
@keyframes slideUpBanner {
0% { transform: translateY(120%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.install-banner-icon { font-size: 1.75rem; flex-shrink: 0; }
.install-banner-info {
flex: 1;
min-width: 0;
}
.install-banner-text {
font-size: 0.9rem;
font-weight: 700;
line-height: 1.3;
}
.install-banner-subtext {
font-size: 0.72rem;
font-weight: 500;
line-height: 1.3;
opacity: 0.8;
margin-top: 0.15rem;
}
.install-banner-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.install-banner-btn {
padding: 0.5rem 0.875rem;
border-radius: 9999px;
font-family: inherit;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
border: none;
transition: all 0.2s ease;
}
.install-banner-btn.primary {
background: var(--bg);
color: var(--accent);
}
.install-banner-btn.secondary {
background: transparent;
color: var(--bg);
border: 1px solid var(--bg);
}
.install-banner-btn:hover { transform: scale(1.05); }
/* نافذة تعليمات iOS */
.ios-install-modal {
position: fixed;
inset: 0;
background: rgba(6, 8, 15, 0.9);
backdrop-filter: blur(10px);
z-index: 300;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
.ios-install-modal.active { display: flex; }
.ios-install-content {
background: var(--surface-elevated);
border: 2px solid var(--accent);
border-radius: 1.25rem;
padding: 1.5rem;
max-width: 440px;
width: 100%;
text-align: center;
position: relative;
box-shadow: var(--shadow-lg), 0 0 60px var(--accent-glow);
max-height: 90vh;
overflow-y: auto;
}
.ios-install-content h2 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.4rem;
color: var(--accent);
margin-bottom: 1rem;
}
.ios-install-steps {
text-align: start;
margin: 1rem 0;
}
.ios-install-step {
display: flex;
gap: 0.75rem;
margin-bottom: 0.875rem;
padding: 0.875rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.625rem;
align-items: center;
}
.ios-install-step-num {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--accent);
color: var(--bg);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
font-family: 'Aref Ruqaa', 'Amiri', serif;
}
.ios-install-step-text {
flex: 1;
color: var(--text);
font-size: 0.92rem;
line-height: 1.5;
}
.ios-install-close {
padding: 0.625rem 1.5rem;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 700;
margin-top: 0.75rem;
}
/* ═══════════ 🧠 ذاكرتي السينمائية - Heatmap ═══════════ */
.memory-section {
margin-bottom: 2.5rem;
}
.memory-heatmap {
background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 1.5px solid var(--border);
border-radius: 1rem;
padding: 1.5rem;
overflow-x: auto;
}
.heatmap-grid {
display: grid;
grid-template-columns: repeat(53, minmax(12px, 14px));
gap: 3px;
direction: ltr;
}
.heatmap-day {
aspect-ratio: 1;
border-radius: 3px;
background: var(--surface-hover);
transition: transform 0.2s ease;
cursor: pointer;
position: relative;
}
.heatmap-day[data-count="1"] { background: rgba(230, 181, 71, 0.3); }
.heatmap-day[data-count="2"] { background: rgba(230, 181, 71, 0.5); }
.heatmap-day[data-count="3"] { background: rgba(230, 181, 71, 0.7); }
.heatmap-day[data-count="4"] { background: rgba(230, 181, 71, 0.9); }
.heatmap-day[data-count="5"] { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.heatmap-day:hover {
transform: scale(1.4);
z-index: 2;
}
.heatmap-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--bg);
color: var(--text);
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
border: 1px solid var(--accent);
margin-bottom: 4px;
}
.heatmap-day:hover .heatmap-tooltip { opacity: 1; }
.heatmap-legend {
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: flex-end;
margin-top: 0.75rem;
color: var(--text-dim);
font-size: 0.8rem;
}
.heatmap-legend-cell {
width: 12px; height: 12px;
border-radius: 3px;
}
.memory-timeline {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1rem;
}
.timeline-item {
display: flex;
gap: 1rem;
padding: 0.875rem 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.625rem;
align-items: center;
transition: all 0.2s ease;
}
.timeline-item:hover {
border-color: var(--accent);
transform: translateX(-4px);
}
.timeline-date {
min-width: 60px;
text-align: center;
color: var(--accent);
font-weight: 700;
font-family: 'Aref Ruqaa', 'Amiri', serif;
}
.timeline-date-day {
font-size: 1.5rem;
line-height: 1;
}
.timeline-date-month {
font-size: 0.75rem;
color: var(--text-dim);
margin-top: 0.25rem;
}
.timeline-poster {
width: 50px;
height: 75px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}
.timeline-poster img {
width: 100%; height: 100%;
object-fit: cover;
}
.timeline-info {
flex: 1;
min-width: 0;
}
.timeline-title {
font-weight: 600;
color: var(--text);
margin-bottom: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.timeline-action {
font-size: 0.85rem;
color: var(--text-dim);
}
/* ═══════════ 🎯 نموذج "ساعدني في الاختيار" المحسّن ═══════════ */
.discover-form-v2 {
width: 100%;
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.form-row {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.form-row-label {
color: var(--accent);
font-weight: 700;
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.05rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pills-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pill-btn {
padding: 0.625rem 1.25rem;
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--text);
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.pill-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.pill-btn.active {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-color: transparent;
box-shadow: var(--shadow-gold);
}
/* ═══════════ 🎤 البحث الصوتي ═══════════ */
.voice-btn {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
margin-inline-start: 0.375rem;
}
.voice-btn:hover {
border-color: var(--accent);
background: var(--accent);
color: var(--bg);
}
.voice-btn.recording {
background: #ff4466;
border-color: #ff4466;
color: #fff;
animation: pulseRecord 1.2s ease-in-out infinite;
}
@keyframes pulseRecord {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 102, 0.6); }
50% { box-shadow: 0 0 0 12px rgba(255, 68, 102, 0); }
}
.voice-btn svg { width: 20px; height: 20px; }
.voice-hint {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: var(--bg);
padding: 1rem 1.5rem;
border-radius: 9999px;
font-weight: 700;
box-shadow: var(--shadow-gold);
z-index: 300;
display: none;
align-items: center;
gap: 0.625rem;
min-width: 240px;
max-width: 90vw;
justify-content: center;
text-align: center;
}
.voice-hint.visible {
display: flex;
animation: slideUpBanner 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* عدّاد التحضير */
.voice-countdown {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 3rem;
font-weight: 900;
line-height: 1;
animation: countPulse 1s ease-in-out;
}
@keyframes countPulse {
0% { transform: scale(0.5); opacity: 0; }
50% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* شريط النص المنطوق (التحويل الحي) */
.voice-transcript-bar {
position: fixed;
bottom: 6rem;
inset-inline-start: 1rem;
inset-inline-end: 1rem;
max-width: 600px;
margin: 0 auto;
padding: 1rem 1.25rem;
background: var(--surface-elevated);
border: 2px solid var(--accent);
border-radius: 1rem;
color: var(--text);
font-size: 1.15rem;
font-weight: 600;
text-align: center;
box-shadow: var(--shadow-lg), 0 0 30px var(--accent-glow);
z-index: 299;
display: none;
min-height: 60px;
align-items: center;
justify-content: center;
}
.voice-transcript-bar.visible {
display: flex;
animation: slideUpBanner 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.voice-transcript-text {
color: var(--accent);
margin-inline-start: 0.5rem;
}
.voice-transcript-placeholder {
color: var(--text-dim);
font-style: italic;
}
/* ═══════════ 🎚️ شريط تمرير السنوات ═══════════ */
.year-range-wrap {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 0.875rem;
padding: 1rem 1.25rem;
}
.year-range-labels {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.875rem;
}
.year-range-value {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--accent);
background: var(--surface-elevated);
padding: 0.25rem 0.875rem;
border-radius: 9999px;
border: 1px solid var(--accent);
}
.year-range-sliders {
position: relative;
height: 36px;
padding: 0 0.5rem;
}
.year-range-track {
position: absolute;
top: 50%;
left: 0.5rem;
right: 0.5rem;
height: 6px;
background: var(--surface-hover);
border-radius: 3px;
transform: translateY(-50%);
}
.year-range-track-fill {
position: absolute;
top: 0;
bottom: 0;
background: linear-gradient(90deg, var(--accent-dim) 0%, var(--accent) 100%);
border-radius: 3px;
}
.year-range-slider {
position: absolute;
top: 0;
width: 100%;
height: 36px;
-webkit-appearance: none;
appearance: none;
background: transparent;
pointer-events: none;
z-index: 2;
}
.year-range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
border: 3px solid var(--bg);
cursor: pointer;
pointer-events: auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 12px var(--accent-glow);
}
.year-range-slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
border: 3px solid var(--bg);
cursor: pointer;
pointer-events: auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 12px var(--accent-glow);
}
/* ═══════════ 🎯 الشريط الجانبي العمودي (استبدال الأفقي) ═══════════ */
.sidebar-nav {
position: fixed;
top: 64px;
inset-inline-start: 0;
bottom: 0;
width: 240px;
background: transparent;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
overflow-y: auto;
overflow-x: hidden;
z-index: 90;
padding: 1rem 0.75rem 4rem;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-webkit-overflow-scrolling: touch;
}
/* على الموبايل، السايدبار يكون له خلفية (لأنه popup) */
@media (max-width: 900px) {
.sidebar-nav {
background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-inline-end: 1.5px solid var(--border);
top: calc(60px + env(safe-area-inset-top, 0px));
padding: 0.85rem 0.75rem calc(6rem + env(safe-area-inset-bottom, 0px));
width: 250px;
max-width: 85vw;
}
}
/* على الشاشات الصغيرة جداً */
@media (max-width: 420px) {
.sidebar-nav {
top: calc(58px + env(safe-area-inset-top, 0px));
padding: 0.75rem 0.6rem calc(7rem + env(safe-area-inset-bottom, 0px));
}
.sidebar-nav-tab {
padding: 0.7rem 0.85rem !important;
font-size: 0.88rem !important;
margin-bottom: 0.25rem !important;
}
}
.sidebar-nav-tab {
width: 100%;
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.875rem 1rem;
background: transparent;
border: 1.5px solid transparent;
color: var(--text);
border-radius: 0.625rem;
cursor: pointer;
font-family: inherit;
font-weight: 500;
font-size: 0.95rem;
margin-bottom: 0.375rem;
text-align: start;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
/* ✨ تأثير سحب ذهبي عند hover */
.sidebar-nav-tab::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.1), transparent);
transform: translateX(-100%);
transition: transform 0.5s ease;
pointer-events: none;
}
[dir="rtl"] .sidebar-nav-tab::before {
transform: translateX(100%);
}
.sidebar-nav-tab:hover::before {
transform: translateX(0);
}
.sidebar-nav-tab:hover {
background: var(--surface);
border-color: var(--border);
transform: translateX(2px);
}
[dir="rtl"] .sidebar-nav-tab:hover {
transform: translateX(-2px);
}
.sidebar-nav-tab.active {
background: linear-gradient(135deg, var(--accent-dim) 0%, rgba(230, 181, 71, 0.15) 100%);
border-color: var(--accent);
color: var(--accent);
font-weight: 700;
box-shadow: 0 4px 15px var(--accent-glow);
}
.sidebar-nav-tab.active svg {
animation: navIconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes navIconBounce {
0% { transform: scale(1); }
50% { transform: scale(1.25) rotate(-5deg); }
100% { transform: scale(1) rotate(0); }
}
.sidebar-nav-tab svg {
width: 22px;
height: 22px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
/* زر الهامبرغر */
.hamburger-btn {
display: none;
width: 44px;
height: 44px;
border-radius: 0.625rem;
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--text);
cursor: pointer;
align-items: center;
justify-content: center;
margin-inline-end: 0.75rem;
transition: all 0.2s ease;
}
.hamburger-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.hamburger-btn svg {
width: 22px;
height: 22px;
}
/* 🔒 قفل الـ Scroll (يشتغل على iOS + كل الأجهزة) */
body.scroll-locked {
position: fixed;
width: 100%;
overflow: hidden;
touch-action: none;
-webkit-overflow-scrolling: auto;
}
/* 🚫 الهيدر والشاشة الرئيسية تختفي تماماً لما overlay مفتوح */
body.scroll-locked main,
body.scroll-locked header,
body.scroll-locked .app-header {
opacity: 0;
pointer-events: none;
user-select: none;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s 0.3s;
}
/* 🎯 إخفاء الهيدر في كل الأقسام ماعدا الرئيسية */
body.header-hidden header {
display: none !important;
}
/* الـ overlays تغطي كامل الشاشة لما الهيدر مخفي */
body.header-hidden .discover-overlay,
body.header-hidden .friday-overlay,
body.header-hidden .stats-overlay,
body.header-hidden .kitchens-overlay,
body.header-hidden .chat-overlay,
body.header-hidden .iq-cinema-overlay,
body.header-hidden .games-overlay {
top: 0 !important;
}
/* ✅ الشريط الجانبي دايماً شغال (للتنقل بين الأقسام) */
body.scroll-locked .sidebar {
opacity: 1 !important;
pointer-events: auto !important;
filter: none !important;
}
/* تعديل body لتناسب الشريط الجانبي */
body {
padding-inline-start: 240px;
}
/* تأكيد: لما body مقفل، نحافظ على padding */
body.scroll-locked {
padding-inline-start: 240px;
}
@media (max-width: 900px) {
body.scroll-locked {
padding-inline-start: 0;
}
}
/* إخفاء الشريط القديم الأفقي */
.nav-tabs {
display: none !important;
}
/* overlay خلفي للموبايل */
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
top: 64px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 89;
opacity: 0;
transition: opacity 0.3s ease;
}
.sidebar-backdrop.visible {
display: block;
opacity: 1;
}
/* استجابة الموبايل */
@media (max-width: 900px) {
body {
padding-inline-start: 0;
}
.hamburger-btn {
display: flex;
}
/* اترك مساحة في الهيدر للهامبرغر */
.header-inner {
padding-inline-start: 4rem !important;
}
.sidebar-nav {
transform: translateX(var(--sidebar-hide, -100%));
box-shadow: 10px 0 30px rgba(0,0,0,0.5);
}
.sidebar-nav.open {
transform: translateX(0);
}
[dir="rtl"] .sidebar-nav {
--sidebar-hide: 100%;
}
/* ✨ إخفاء أزرار الهيدر لما السايدبار يفتح (الموبايل فقط) */
body.sidebar-open .header-actions {
opacity: 0;
pointer-events: none;
transform: scale(0.9);
transition: opacity 0.25s ease, transform 0.25s ease;
}
body:not(.sidebar-open) .header-actions {
opacity: 1;
pointer-events: auto;
transform: scale(1);
transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}
}
/* تعديل باقي الـ overlays ليبدؤوا من أسفل الشريط */
@media (min-width: 901px) {
.discover-overlay,
.friday-overlay,
.stats-overlay,
.kitchens-overlay {
inset-inline-start: 240px !important;
}
}
/* ═══════════ 📄 التنقل بين الصفحات (Pagination) ═══════════ */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
flex-wrap: wrap;
margin: 2rem auto 1rem;
padding: 1rem;
}
.pagination-btn {
min-width: 40px;
height: 40px;
padding: 0 0.75rem;
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--text);
border-radius: 0.5rem;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
}
.pagination-btn:hover:not(:disabled):not(.active) {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
}
.pagination-btn.active {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-color: transparent;
box-shadow: var(--shadow-gold);
cursor: default;
}
.pagination-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.pagination-btn svg {
width: 18px;
height: 18px;
}
.pagination-ellipsis {
min-width: 30px;
text-align: center;
color: var(--text-dim);
user-select: none;
}
.pagination-info {
width: 100%;
text-align: center;
color: var(--text-dim);
font-size: 0.85rem;
margin-top: 0.5rem;
}
/* ═══════════ 📷 البحث بالصورة - النافذة ═══════════ */
.image-search-modal {
position: fixed;
inset: 0;
background: rgba(6, 8, 15, 0.92);
backdrop-filter: blur(12px);
z-index: 300;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
.image-search-modal.active { display: flex; }
.image-search-content {
background: var(--surface-elevated);
border: 2px solid var(--accent);
border-radius: 1.25rem;
padding: 1.5rem;
max-width: 500px;
width: 100%;
box-shadow: var(--shadow-lg), 0 0 60px var(--accent-glow);
max-height: 90vh;
overflow-y: auto;
}
.image-search-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.35rem;
color: var(--accent);
margin-bottom: 1rem;
text-align: center;
}
.image-search-preview {
width: 100%;
max-height: 280px;
object-fit: contain;
border-radius: 0.75rem;
margin-bottom: 1rem;
display: block;
background: var(--bg);
}
.image-search-status {
text-align: center;
color: var(--text-dim);
margin-bottom: 1rem;
font-size: 0.95rem;
min-height: 1.5rem;
}
.image-search-status.loading {
color: var(--accent);
}
.image-search-keywords {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.25rem;
justify-content: center;
}
.image-search-keyword {
padding: 0.375rem 0.875rem;
background: linear-gradient(135deg, var(--accent-dim) 0%, rgba(230, 181, 71, 0.2) 100%);
border: 1px solid var(--accent);
color: var(--accent);
border-radius: 9999px;
font-size: 0.85rem;
font-weight: 600;
}
.image-search-buttons {
display: flex;
gap: 0.625rem;
justify-content: center;
}
.image-search-btn {
padding: 0.625rem 1.25rem;
border-radius: 9999px;
font-family: inherit;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
border: none;
transition: all 0.2s ease;
}
.image-search-btn.primary {
background: var(--accent);
color: var(--bg);
}
.image-search-btn.secondary {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}
.image-search-btn:hover {
transform: translateY(-2px);
}
.image-search-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.image-search-progress {
width: 100%;
height: 6px;
background: var(--surface-hover);
border-radius: 3px;
overflow: hidden;
margin: 0.5rem 0;
display: none;
}
.image-search-progress.visible { display: block; }
.image-search-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent-dim) 0%, var(--accent) 100%);
border-radius: 3px;
transition: width 0.4s ease;
animation: pulseBar 1.5s ease-in-out infinite;
}
@keyframes pulseBar {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
/* ═══════════ 🤖 نتائج Gemini ═══════════ */
/* عند وضع Gemini، نخفي الـ layout العادي (كارد + أزرار جانبية) */
.discover-show.gemini-mode .discover-layout {
display: none;
}
.discover-show.gemini-mode #geminiResultsWrap {
display: block;
}
#geminiResultsWrap {
display: none;
min-height: calc(100vh - 180px);
}
.gemini-results-wrap {
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
}
.gemini-results-header {
text-align: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px dashed var(--border);
}
.gemini-results-header h2 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.5rem;
color: var(--accent);
margin-bottom: 0.5rem;
}
.gemini-results-header p {
color: var(--text-dim);
font-size: 0.95rem;
}
.gemini-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
.gemini-card {
background: var(--gradient-surface);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1.5px solid var(--glass-border);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: all var(--duration-base) var(--ease-spring);
display: flex;
flex-direction: column;
animation: cardReveal 0.55s var(--ease-spring) both;
box-shadow: var(--elevation-2);
position: relative;
}
/* Stagger للبطاقات داخل gemini-grid */
.gemini-grid > .gemini-card:nth-child(1) { animation-delay: 0.05s; }
.gemini-grid > .gemini-card:nth-child(2) { animation-delay: 0.10s; }
.gemini-grid > .gemini-card:nth-child(3) { animation-delay: 0.15s; }
.gemini-grid > .gemini-card:nth-child(4) { animation-delay: 0.20s; }
.gemini-grid > .gemini-card:nth-child(5) { animation-delay: 0.25s; }
.gemini-grid > .gemini-card:nth-child(6) { animation-delay: 0.30s; }
.gemini-grid > .gemini-card:nth-child(7) { animation-delay: 0.35s; }
.gemini-grid > .gemini-card:nth-child(8) { animation-delay: 0.40s; }
.gemini-card:hover {
transform: translateY(-8px) scale(1.03);
border-color: var(--accent);
box-shadow:
var(--elevation-5),
0 0 30px var(--accent-glow),
0 0 0 1px var(--accent) inset;
}
.gemini-card-poster {
width: 100%;
aspect-ratio: 2/3;
background: var(--bg);
overflow: hidden;
position: relative;
}
.gemini-card-poster img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.gemini-card:hover .gemini-card-poster img {
transform: scale(1.05);
}
.gemini-card-rating {
position: absolute;
top: 0.625rem;
inset-inline-end: 0.625rem;
background: rgba(13, 13, 17, 0.85);
backdrop-filter: blur(8px);
color: var(--accent);
padding: 0.25rem 0.625rem;
border-radius: 9999px;
font-weight: 700;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.gemini-card-body {
padding: 0.875rem 1rem 1.125rem;
display: flex;
flex-direction: column;
flex: 1;
gap: 0.5rem;
}
.gemini-card-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.gemini-card-year {
color: var(--text-dim);
font-size: 0.85rem;
font-weight: 600;
}
.gemini-card-reason {
margin-top: 0.25rem;
padding: 0.75rem 0.875rem;
background: linear-gradient(135deg, var(--accent-dim) 0%, rgba(230, 181, 71, 0.1) 100%);
border-inline-start: 3px solid var(--accent);
border-radius: 0.5rem;
color: var(--accent);
font-size: 0.88rem;
line-height: 1.55;
font-weight: 500;
font-style: italic;
}
.gemini-card-reason::before {
content: '💭 ';
font-style: normal;
}
/* رسالة التفكير */
.gemini-thinking {
text-align: center;
padding: 3rem 1rem;
}
.gemini-thinking-icon {
font-size: 3rem;
margin-bottom: 1rem;
animation: thinkingBounce 1.5s ease-in-out infinite;
}
@keyframes thinkingBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.gemini-thinking-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.3rem;
color: var(--accent);
margin-bottom: 0.5rem;
}
.gemini-thinking-sub {
color: var(--text-dim);
font-size: 0.95rem;
}
.gemini-thinking-dots {
display: inline-block;
animation: thinkingDots 1.5s infinite;
}
@keyframes thinkingDots {
0%, 20% { content: '.'; }
40% { content: '..'; }
60%, 100% { content: '...'; }
}
/* زر رجوع للبحث */
.gemini-back-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
font-weight: 600;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
.gemini-back-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ═══════════ 💬 قسم الدردشة ═══════════ */
.chat-overlay {
position: fixed;
inset: 0;
top: 64px;
background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
z-index: 85;
display: none;
flex-direction: column;
}
.chat-overlay.active { display: flex; }
@media (min-width: 901px) {
.chat-overlay { inset-inline-start: 240px; }
}
/* على الموبايل - chat يأخذ الشاشة كاملة (مع مكان للـ bottom nav) */
@media (max-width: 768px) {
.chat-overlay {
top: 0;
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
z-index: 95; /* فوق الـ bottom nav */
}
.chat-overlay.active ~ .bottom-nav,
body:has(.chat-overlay.active) .bottom-nav {
display: none !important;
}
.chat-messages {
padding: 1rem 0.75rem !important;
padding-bottom: 1rem !important;
}
}
.chat-header {
padding: 1rem 1.25rem;
border-bottom: 1.5px solid var(--border);
background: var(--surface-elevated);
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.chat-header-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
box-shadow: var(--shadow-gold);
}
.chat-header-title {
flex: 1;
}
.chat-header-title h2 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.1rem;
color: var(--accent);
margin: 0;
}
.chat-header-title p {
margin: 0;
font-size: 0.8rem;
color: var(--text-dim);
}
.chat-header-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--border);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.chat-header-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.chat-header-btn svg { width: 20px; height: 20px; }
/* 🚪 زر الخروج العائم - للأقسام */
.chat-exit-btn {
position: absolute;
top: 78px;
inset-inline-end: 16px;
z-index: 10;
display: none;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 0.85rem;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.2);
border-radius: 9999px;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.2s ease;
animation: chatExitFadeIn 0.3s ease;
}
.chat-exit-btn.visible {
display: inline-flex;
}
.chat-exit-btn:hover {
transform: scale(1.05);
box-shadow: 0 6px 18px rgba(220, 38, 38, 0.5);
}
.chat-exit-btn:active {
transform: scale(0.95);
}
@keyframes chatExitFadeIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
.chat-exit-btn {
top: 72px;
inset-inline-end: 12px;
padding: 0.45rem 0.75rem;
font-size: 0.78rem;
}
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
/* رسالة المستخدم (يمين في RTL) */
.chat-msg {
display: flex;
gap: 0.625rem;
animation: msgSlideIn 0.3s ease-out;
}
@keyframes msgSlideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-msg.user {
justify-content: flex-end;
}
.chat-msg.ai {
justify-content: flex-start;
}
.chat-msg-bubble {
max-width: 75%;
padding: 0.875rem 1.125rem;
border-radius: 1.25rem;
line-height: 1.6;
font-size: 0.95rem;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
}
/* على الموبايل، عرض أكبر للـ bubble */
@media (max-width: 768px) {
.chat-msg-bubble {
max-width: 85%;
font-size: 0.92rem;
}
}
.chat-msg.user .chat-msg-bubble {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-bottom-right-radius: 0.375rem;
font-weight: 500;
}
[dir="rtl"] .chat-msg.user .chat-msg-bubble {
border-bottom-right-radius: 1.25rem;
border-bottom-left-radius: 0.375rem;
}
.chat-msg.ai .chat-msg-bubble {
background: var(--surface-elevated);
border: 1.5px solid var(--border);
color: var(--text);
border-bottom-left-radius: 0.375rem;
}
[dir="rtl"] .chat-msg.ai .chat-msg-bubble {
border-bottom-left-radius: 1.25rem;
border-bottom-right-radius: 0.375rem;
}
.chat-msg-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-elevated);
border: 1.5px solid var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
/* مؤشر "يكتب..." */
.chat-typing {
display: flex;
gap: 4px;
padding: 0.75rem 1rem;
background: var(--surface-elevated);
border: 1.5px solid var(--border);
border-radius: 1.25rem;
border-bottom-left-radius: 0.375rem;
width: fit-content;
}
.chat-typing span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
animation: typingBounce 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
30% { transform: translateY(-8px); opacity: 1; }
}
/* شاشة الترحيب */
.chat-welcome {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 1.5rem 0.75rem 2rem;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.chat-welcome-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.chat-welcome h3 {
font-family: 'Aref Ruqaa', 'Amiri', serif;
color: var(--accent);
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.chat-welcome p {
color: var(--text-dim);
margin-bottom: 1.5rem;
}
.chat-quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.75rem;
max-width: 700px;
width: 100%;
margin-top: 1rem;
}
/* 📱 على الموبايل - عمودان جنب بعض (مو بالطول) */
@media (max-width: 768px) {
.chat-welcome {
padding: 1.25rem 0.5rem 1.5rem;
min-height: auto;
}
.chat-welcome-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}
.chat-welcome h3 {
font-size: 1.25rem;
margin-bottom: 0.35rem;
}
.chat-welcome p {
font-size: 0.85rem;
margin-bottom: 1rem;
}
.chat-quick-actions {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.5rem !important;
max-width: 100% !important;
padding: 0 !important;
margin-top: 0.5rem !important;
}
.chat-quick-btn {
padding: 0.85rem 0.5rem !important;
min-height: 100px;
gap: 0.35rem !important;
}
.chat-quick-icon {
font-size: 1.55rem !important;
}
.chat-quick-label {
font-size: 0.78rem !important;
line-height: 1.2;
}
.chat-quick-desc {
font-size: 0.68rem !important;
line-height: 1.3;
}
/* chat-messages: scroll عمودي + يستوعب كل المحتوى */
.chat-messages {
padding: 0.75rem 0.5rem !important;
padding-bottom: 1rem !important;
gap: 0.5rem !important;
}
}
/* شاشات صغيرة جداً (أصغر من 360px) - الأزرار أصغر بس عمودان */
@media (max-width: 360px) {
.chat-quick-actions {
gap: 0.4rem !important;
}
.chat-quick-btn {
padding: 0.65rem 0.35rem !important;
min-height: 90px;
}
.chat-quick-label {
font-size: 0.72rem !important;
}
.chat-quick-desc {
font-size: 0.62rem !important;
}
}
.chat-quick-btn {
padding: 1rem;
border: 1.5px solid var(--border);
background: var(--surface-elevated);
border-radius: 1rem;
cursor: pointer;
text-align: center;
font-family: inherit;
color: var(--text);
transition: all 0.25s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.chat-quick-btn:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow-gold);
}
.chat-quick-icon { font-size: 2rem; }
.chat-quick-label {
font-weight: 600;
color: var(--accent);
}
.chat-quick-desc {
font-size: 0.78rem;
color: var(--text-dim);
line-height: 1.4;
}
/* شريط الإدخال */
.chat-input-wrap {
padding: 0.875rem 1rem;
border-top: 1.5px solid var(--border);
background: var(--surface-elevated);
flex-shrink: 0;
}
.chat-input-inner {
display: flex;
align-items: flex-end;
gap: 0.625rem;
max-width: 900px;
margin: 0 auto;
background: var(--bg);
border: 1.5px solid var(--border);
border-radius: 1.5rem;
padding: 0.375rem 0.5rem 0.375rem 0.875rem;
transition: border-color 0.2s ease;
}
[dir="rtl"] .chat-input-inner {
padding: 0.375rem 0.875rem 0.375rem 0.5rem;
}
.chat-input-inner:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.chat-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--text);
font-family: inherit;
font-size: 0.95rem;
padding: 0.625rem 0;
resize: none;
max-height: 120px;
line-height: 1.5;
}
.chat-input::placeholder { color: var(--text-dim); }
.chat-send-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
border: none;
color: var(--bg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.chat-send-btn:hover:not(:disabled) {
transform: scale(1.1);
}
.chat-send-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.chat-send-btn svg { width: 20px; height: 20px; }
/* تنسيق الرد (bold, lists) */
.chat-msg-bubble strong { color: var(--accent); }
.chat-msg.user .chat-msg-bubble strong { color: inherit; text-decoration: underline; }
.chat-msg-bubble ul { margin: 0.5rem 0; padding-inline-start: 1.25rem; }
.chat-msg-bubble li { margin-bottom: 0.375rem; }
/* رابط فلم قابل للنقر داخل الدردشة */
.chat-movie-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
background: var(--accent-dim);
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 0.5rem;
cursor: pointer;
font-weight: 600;
font-size: 0.92em;
margin: 0 0.125rem;
transition: all 0.2s ease;
}
.chat-movie-link:hover {
background: var(--accent);
color: var(--bg);
transform: translateY(-1px);
box-shadow: var(--shadow-gold);
}
/* ═══════════ 📰 قسم أخبار السينما ═══════════ */
.news-section {
margin: 2.5rem auto 1.5rem;
max-width: 1400px;
padding: 0 1rem;
position: relative;
}
.news-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
padding-inline-start: 0.25rem;
}
.news-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.5rem;
color: var(--accent);
display: flex;
align-items: center;
gap: 0.625rem;
margin: 0;
}
.news-controls {
display: flex;
gap: 0.5rem;
}
.news-nav-btn {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--surface-elevated);
border: 1.5px solid var(--border);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
}
.news-nav-btn:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
transform: scale(1.1);
}
.news-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.news-nav-btn svg { width: 22px; height: 22px; }
.news-carousel-wrap {
position: relative;
overflow: hidden;
border-radius: 1rem;
}
.news-carousel {
display: flex;
gap: 1rem;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
padding: 0.25rem;
}
.news-card {
flex: 0 0 320px;
background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 1.5px solid var(--border);
border-radius: 1rem;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.news-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: var(--shadow-lg), 0 10px 30px var(--accent-glow);
}
.news-card-image {
width: 100%;
height: 180px;
position: relative;
background: var(--bg);
overflow: hidden;
}
.news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-card:hover .news-card-image img {
transform: scale(1.08);
}
.news-card-image-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 3rem;
background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
}
.news-card-badge {
position: absolute;
top: 0.625rem;
inset-inline-start: 0.625rem;
background: rgba(13, 13, 17, 0.9);
backdrop-filter: blur(8px);
color: var(--accent);
padding: 0.25rem 0.625rem;
border-radius: 9999px;
font-size: 0.72rem;
font-weight: 700;
border: 1px solid var(--accent);
}
.news-card-body {
padding: 1rem 1.125rem 1.125rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.news-card-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
line-height: 1.35;
}
.news-card-summary {
color: var(--text-dim);
font-size: 0.85rem;
line-height: 1.55;
flex: 1;
}
.news-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.5rem;
border-top: 1px dashed var(--border);
margin-top: 0.25rem;
}
.news-card-category {
font-size: 0.75rem;
color: var(--accent);
font-weight: 600;
}
.news-card-source {
font-size: 0.72rem;
color: var(--text-dim);
display: flex;
align-items: center;
gap: 0.25rem;
}
/* حالة التحميل */
.news-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
color: var(--text-dim);
}
/* الموبايل */
@media (max-width: 640px) {
.news-card { flex: 0 0 280px; }
.news-title { font-size: 1.25rem; }
.news-card-image { height: 150px; }
}
/* ═══════════ صفحة التفاصيل ═══════════ */
.detail-overlay {
position: fixed; inset: 0; z-index: 100;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(0px);
overflow-y: auto;
animation: detailOverlayIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes detailOverlayIn {
0% {
opacity: 0;
backdrop-filter: blur(0px);
}
100% {
opacity: 1;
backdrop-filter: blur(16px);
}
}
.detail-container {
max-width: 1100px; margin: 0 auto;
background: var(--bg);
min-height: 100vh;
position: relative;
animation: detailPanelIn 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ═══════════════════════════════════════════════════
📱 Bottom Sheet Style - على الموبايل فقط
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
.detail-overlay {
animation: bottomSheetOverlayIn 0.3s ease forwards;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
@keyframes bottomSheetOverlayIn {
0% {
background: rgba(0,0,0,0);
backdrop-filter: blur(0px);
}
100% {
background: rgba(0,0,0,0.65);
backdrop-filter: blur(8px);
}
}
.detail-overlay.closing {
animation: bottomSheetOverlayOut 0.25s ease forwards;
}
@keyframes bottomSheetOverlayOut {
0% {
background: rgba(0,0,0,0.65);
backdrop-filter: blur(8px);
}
100% {
background: rgba(0,0,0,0);
backdrop-filter: blur(0px);
}
}
.detail-container {
max-width: 100%;
width: 100%;
min-height: 92vh;
max-height: 92vh;
border-radius: 24px 24px 0 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
animation: bottomSheetSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
}
@keyframes bottomSheetSlideUp {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
.detail-overlay.closing .detail-container {
animation: bottomSheetSlideDown 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes bottomSheetSlideDown {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
/* مقبض السحب (drag handle) في الأعلى */
.detail-container::before {
content: '';
position: sticky;
top: 0;
left: 50%;
transform: translateX(-50%);
display: block;
width: 40px;
height: 5px;
background: var(--text-dim);
opacity: 0.4;
border-radius: 10px;
margin: 0.7rem auto 0;
z-index: 100;
}
/* تأثير السحب */
.detail-container.dragging {
transition: none !important;
animation: none !important;
}
}
@keyframes detailPanelIn {
0% {
opacity: 0;
transform: translateY(40px) scale(0.97);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (min-width: 768px) {
.detail-container {
margin: 2rem auto;
min-height: calc(100vh - 4rem);
border-radius: 1.25rem;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
}
.detail-close {
position: fixed;
top: calc(1.25rem + env(safe-area-inset-top, 0px));
inset-inline-end: calc(1.25rem + env(safe-area-inset-right, 0px));
z-index: 10;
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.95);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.4);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.detail-close:hover {
background: var(--danger); color: #fff;
transform: scale(1.1);
}
/* backdrop image */
.detail-backdrop {
position: relative;
width: 100%;
aspect-ratio: 16/9;
max-height: 500px;
background: var(--surface);
overflow: hidden;
}
.detail-backdrop img {
width: 100%; height: 100%; object-fit: cover;
}
.backdrop-fade {
position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 0%, transparent 40%, var(--bg) 100%);
}
/* hero section */
.detail-hero {
position: relative;
padding: 0 1.5rem 2rem;
margin-top: -100px;
z-index: 5;
display: flex;
gap: 1.5rem;
flex-direction: column;
}
@media (min-width: 640px) {
.detail-hero {
flex-direction: row;
align-items: flex-end;
padding: 0 2.5rem 2.5rem;
margin-top: -160px;
gap: 2rem;
}
}
.detail-poster {
flex-shrink: 0;
width: 160px;
aspect-ratio: 2/3;
border-radius: 0.75rem;
overflow: hidden;
background: var(--surface);
border: 2px solid var(--border);
box-shadow: var(--shadow);
}
@media (min-width: 640px) {
.detail-poster { width: 220px; }
}
.detail-poster img { width: 100%; height: 100%; object-fit: cover; }
.detail-info { flex: 1; padding-top: 1rem; }
.detail-title {
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 0.5rem;
color: var(--text);
}
.detail-tagline {
color: var(--text-dim);
font-style: italic;
margin-bottom: 1rem;
font-size: 1rem;
}
.detail-meta-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
align-items: center;
margin-bottom: 1rem;
color: var(--text-dim);
font-size: 0.9rem;
}
.meta-item {
display: inline-flex; align-items: center; gap: 0.375rem;
}
.meta-rating { color: var(--accent); font-weight: 700; }
.genre-pills {
display: flex; flex-wrap: wrap; gap: 0.5rem;
margin-top: 0.5rem;
}
.genre-pill {
padding: 0.3rem 0.75rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9999px;
font-size: 0.8rem;
color: var(--text-dim);
}
/* detail sections */
.detail-sections {
padding: 1rem 1.5rem 3rem;
}
@media (min-width: 640px) {
.detail-sections { padding: 1rem 2.5rem 3rem; }
}
.detail-section {
margin-bottom: 2.5rem;
}
.section-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text);
display: flex; align-items: center; gap: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.section-title::before {
content: '';
display: inline-block;
width: 3px; height: 18px;
background: var(--accent);
border-radius: 2px;
}
.overview-text {
color: var(--text-dim);
line-height: 1.8;
font-size: 1rem;
}
/* trailer */
.trailer-wrap {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: 0.75rem;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border);
}
.trailer-wrap iframe {
width: 100%; height: 100%; border: 0;
}
.no-trailer {
width: 100%; aspect-ratio: 16/9;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.75rem;
display: flex;
flex-direction: column;
align-items: center; justify-content: center;
color: var(--text-faded);
gap: 0.75rem;
}
/* cast */
.cast-scroll {
display: flex;
gap: 1rem;
overflow-x: auto;
padding-bottom: 0.75rem;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: var(--accent-dim) transparent;
}
.cast-scroll::-webkit-scrollbar { height: 6px; }
.cast-scroll::-webkit-scrollbar-track { background: transparent; }
.cast-scroll::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; }
.cast-card {
flex-shrink: 0;
width: 130px;
scroll-snap-align: start;
text-align: center;
}
.cast-photo {
width: 130px; height: 130px;
border-radius: 50%;
overflow: hidden;
background: var(--surface);
border: 2px solid var(--border);
margin-bottom: 0.75rem;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.cast-card:hover .cast-photo {
transform: scale(1.05);
border-color: var(--accent);
}
.cast-photo img { width: 100%; height: 100%; object-fit: cover; }
.cast-photo-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: var(--surface-hover);
color: var(--text-faded);
}
.cast-name {
font-size: 0.9rem; font-weight: 600;
color: var(--text);
margin-bottom: 0.25rem;
line-height: 1.3;
}
.cast-character {
font-size: 0.8rem;
color: var(--text-faded);
line-height: 1.3;
}
/* ═══════════ 🎫 قسم السينما العراقية ═══════════ */
.iq-cinema-overlay {
position: fixed;
inset: 0;
top: 64px;
background: var(--bg);
z-index: 85;
overflow-y: auto;
display: none;
}
.iq-cinema-overlay.active {
display: block;
animation: overlaySlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes overlaySlideIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media (min-width: 901px) {
.iq-cinema-overlay { inset-inline-start: 240px; }
}
.iq-cinema-hero {
background: linear-gradient(135deg, #8B0000 0%, #CD2E3A 50%, #D4A574 100%);
padding: 2.5rem 1.5rem;
position: relative;
overflow: hidden;
}
.iq-cinema-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(0,0,0,0.2) 0%, transparent 50%);
pointer-events: none;
}
.iq-cinema-hero-content {
position: relative;
max-width: 1200px;
margin: 0 auto;
text-align: center;
color: #fff;
}
.iq-cinema-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
margin: 0 0 0.5rem;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.iq-cinema-subtitle {
font-size: 1rem;
opacity: 0.95;
margin: 0;
}
.iq-cinema-flag {
font-size: 2.5rem;
margin-bottom: 0.5rem;
display: block;
}
.iq-cinema-body {
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem;
}
/* تبويبات المدن */
.iq-cities-tabs {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
scrollbar-width: thin;
}
.iq-city-tab {
flex-shrink: 0;
padding: 0.625rem 1.25rem;
background: var(--surface-elevated);
border: 1.5px solid var(--border);
border-radius: 9999px;
color: var(--text-dim);
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.25s ease;
display: flex;
align-items: center;
gap: 0.375rem;
}
.iq-city-tab:hover {
border-color: var(--accent);
color: var(--text);
}
.iq-city-tab.active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
}
/* بطاقات دور السينما */
.iq-cinemas-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.iq-cinema-card {
background: var(--surface-elevated);
border: 1.5px solid var(--border);
border-radius: 1rem;
padding: 1.25rem;
transition: all 0.25s ease;
}
.iq-cinema-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: var(--shadow-gold);
}
.iq-cinema-card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.875rem;
}
.iq-cinema-card-icon {
width: 48px;
height: 48px;
border-radius: 0.75rem;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.iq-cinema-card-name {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--accent);
margin: 0 0 0.125rem;
}
.iq-cinema-card-city {
font-size: 0.82rem;
color: var(--text-dim);
display: flex;
align-items: center;
gap: 0.25rem;
}
.iq-cinema-card-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;
}
.iq-cinema-info-row {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--text);
line-height: 1.4;
}
.iq-cinema-info-icon {
font-size: 1rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
.iq-cinema-card-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.iq-cinema-action-btn {
flex: 1;
min-width: 100px;
padding: 0.5rem 0.75rem;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: 0.625rem;
cursor: pointer;
font-family: inherit;
font-weight: 600;
font-size: 0.82rem;
text-decoration: none;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
transition: all 0.25s ease;
}
.iq-cinema-action-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.iq-cinema-action-btn.primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--bg);
border-color: transparent;
}
.iq-cinema-action-btn.primary:hover {
filter: brightness(1.1);
color: var(--bg);
}
/* عنوان الأقسام */
.iq-section-title {
font-family: 'Aref Ruqaa', 'Amiri', serif;
font-size: 1.35rem;
color: var(--accent);
margin: 2rem 0 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* 🖼️ صورة السينما */
.iq-cinema-image {
margin: -1.25rem -1.25rem 1rem;
height: 140px;
overflow: hidden;
background: var(--surface);
border-radius: 1rem 1rem 0 0;
}
.iq-cinema-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.iq-cinema-card:hover .iq-cinema-image img {
transform: scale(1.05);
}
/* 🎞️ أفلام السينما العراقية */
.iq-now-showing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.iq-now-showing-card {
display: block;
background: var(--surface-elevated);
border: 1.5px solid var(--border);
border-radius: 0.75rem;
overflow: hidden;
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none;
color: inherit;
}
.iq-now-showing-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(212, 165, 116, 0.2);
}
.iq-now-showing-poster {
position: relative;
aspect-ratio: 2/3;
overflow: hidden;
background: var(--surface);
}
.iq-now-showing-poster img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.iq-now-showing-card:hover .iq-now-showing-poster img {
transform: scale(1.08);
}
.iq-now-showing-trailer {
position: absolute;
top: 0.5rem;
inset-inline-end: 0.5rem;
background: rgba(255, 0, 0, 0.9);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.iq-now-showing-body {
padding: 0.75rem 0.85rem;
}
.iq-now-showing-title {
font-weight: 700;
font-size: 0.9rem;
color: var(--text);
margin-bottom: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 2.4em;
}
.iq-now-showing-duration {
font-size: 0.78rem;
color: var(--text-dim);
}
/* 📌 ملاحظة التحديث */
.iq-update-notice {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(230, 181, 71, 0.08);
border: 1px solid rgba(230, 181, 71, 0.25);
border-radius: 10px;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
font-size: 0.85rem;
color: var(--text-dim);
flex-wrap: wrap;
}
.iq-see-all-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, var(--accent) 0%, rgba(184, 134, 11, 1) 100%);
color: #000;
border-radius: 9999px;
text-decoration: none;
font-weight: 700;
font-size: 0.9rem;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(212, 165, 116, 0.35);
}
.iq-see-all-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(212, 165, 116, 0.5);
}
/* الأفلام المعروضة حالياً */
.iq-movies-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.iq-movie-card {
background: var(--surface-elevated);
border: 1.5px solid var(--border);
border-radius: 0.875rem;
overflow: hidden;
cursor: pointer;
transition: all 0.25s ease;
}
.iq-movie-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: var(--shadow-gold);
}
.iq-movie-card-poster {
width: 100%;
aspect-ratio: 2/3;
background: var(--bg);
position: relative;
overflow: hidden;
}
.iq-movie-card-poster img {
width: 100%;
height: 100%;
object-fit: cover;
}
.iq-movie-card-badge {
position: absolute;
top: 0.5rem;
inset-inline-start: 0.5rem;
background: rgba(205, 46, 58, 0.95);
color: #fff;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
}
.iq-movie-card-body {
padding: 0.625rem 0.75rem;
}
.iq-movie-card-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
margin-bottom: 0.25rem;
}
.iq-movie-card-meta {
font-size: 0.75rem;
color: var(--text-dim);
}
/* معلومة الأسعار */
.iq-price-info {
background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(205, 46, 58, 0.08) 100%);
border: 1.5px solid var(--border);
border-radius: 1rem;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
display: flex;
gap: 0.875rem;
align-items: flex-start;
}
.iq-price-info-icon {
font-size: 1.75rem;
flex-shrink: 0;
}
.iq-price-info-text {
flex: 1;
font-size: 0.88rem;
color: var(--text);
line-height: 1.5;
}
.iq-price-info-text strong {
color: var(--accent);
}
/* حالة التحميل */
.iq-loading {
text-align: center;
padding: 3rem 1rem;
color: var(--accent);
}
.iq-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--text-dim);
}
.iq-empty-icon {
font-size: 3rem;
margin-bottom: 0.75rem;
}
/* زر الإغلاق */
.iq-cinema-close {
position: fixed;
top: 76px;
inset-inline-end: 1rem;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--surface-elevated);
border: 1.5px solid var(--border);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 90;
transition: all 0.25s ease;
}
.iq-cinema-close:hover {
border-color: var(--accent);
color: var(--accent);
transform: rotate(90deg);
}
/* ═══════════ 📍 قسم "وين ألكاه؟" ═══════════ */
.where-to-watch {
margin: 1.5rem 0;
background: linear-gradient(135deg, rgba(212, 165, 116, 0.10) 0%, rgba(184, 134, 11, 0.06) 100%);
border: 1.5px solid var(--accent);
border-radius: 1.25rem;
padding: 1.25rem;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(212, 165, 116, 0.15);
}
.where-to-watch::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(212, 165, 116, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.where-to-watch-header {
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.where-to-watch-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.2rem;
font-weight: 700;
color: var(--accent);
margin: 0;
}
.where-to-watch-title-icon {
font-size: 1.4rem;
}
.where-region-selector {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
position: relative;
z-index: 1;
scrollbar-width: thin;
}
.where-region-selector::-webkit-scrollbar { height: 4px; }
.where-region-selector::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
.where-region-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.9rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 9999px;
color: var(--text);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.where-region-btn:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.where-region-btn.active {
background: linear-gradient(135deg, var(--accent) 0%, rgba(184, 134, 11, 1) 100%);
border-color: var(--accent);
color: #000;
box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);
}
.where-region-flag {
font-size: 1.1rem;
}
.where-groups {
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
z-index: 1;
}
.where-group {
background: rgba(0, 0, 0, 0.2);
border-radius: 0.75rem;
padding: 0.875rem 1rem;
}
.where-group-title {
font-weight: 700;
color: var(--accent);
margin-bottom: 0.625rem;
font-size: 0.9rem;
}
.where-providers {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.where-provider {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.625rem;
padding: 0.4rem 0.75rem;
font-size: 0.82rem;
transition: all 0.2s ease;
}
.where-provider:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.where-provider img {
width: 28px;
height: 28px;
border-radius: 0.3rem;
object-fit: contain;
background: #fff;
}
.where-provider-fallback {
width: 28px;
height: 28px;
border-radius: 0.3rem;
background: var(--accent);
color: #000;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
}
.where-provider-name {
color: var(--text);
font-weight: 500;
}
.where-no-results {
padding: 1.5rem;
text-align: center;
color: var(--text-dim);
position: relative;
z-index: 1;
}
.where-no-results-icon {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.where-no-results-hint {
font-size: 0.82rem;
margin-top: 0.5rem;
opacity: 0.75;
}
@media (max-width: 640px) {
.where-to-watch { padding: 1rem; }
.where-to-watch-title { font-size: 1.05rem; }
.where-region-btn { font-size: 0.78rem; padding: 0.4rem 0.75rem; }
.where-provider { font-size: 0.75rem; }
.where-provider img, .where-provider-fallback { width: 24px; height: 24px; }
}
/* 🔮 فلاتر الفترة الزمنية لقسم "قادم قريباً" */
.upcoming-period-filters {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
padding: 0.5rem 0;
margin-bottom: 1rem;
}
.upcoming-period-tab {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.6rem 1.1rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 9999px;
color: var(--text);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
font-family: inherit;
}
.upcoming-period-tab:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.upcoming-period-tab.active {
background: linear-gradient(135deg, var(--accent) 0%, rgba(184, 134, 11, 1) 100%);
border-color: var(--accent);
color: #000;
box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);
}
@media (max-width: 640px) {
.upcoming-period-tab {
padding: 0.5rem 0.85rem;
font-size: 0.82rem;
}
}
/* ═══════════ 🎬 مكتبة الفيديوهات ═══════════ */
.video-lib-count {
font-size: 0.75rem;
color: var(--text-dim);
font-weight: 400;
margin-inline-start: 0.5rem;
}
.video-lib-tabs {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
scrollbar-width: thin;
}
.video-lib-tabs::-webkit-scrollbar { height: 4px; }
.video-lib-tabs::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
.video-lib-tab {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 1rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 9999px;
color: var(--text);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
font-family: inherit;
}
.video-lib-tab:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.video-lib-tab.active {
background: linear-gradient(135deg, var(--accent) 0%, rgba(184, 134, 11, 1) 100%);
border-color: var(--accent);
color: #000;
box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);
}
.video-lib-tab-count {
background: rgba(0, 0, 0, 0.25);
color: inherit;
padding: 0.1rem 0.45rem;
border-radius: 9999px;
font-size: 0.72rem;
font-weight: 700;
}
.video-lib-tab.active .video-lib-tab-count {
background: rgba(0, 0, 0, 0.3);
}
.video-lib-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.video-lib-card {
background: var(--surface-elevated);
border: 1.5px solid var(--border);
border-radius: 0.75rem;
overflow: hidden;
cursor: pointer;
transition: all 0.25s ease;
}
.video-lib-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(212, 165, 116, 0.25);
}
.video-lib-thumb {
position: relative;
aspect-ratio: 16/9;
background: var(--surface);
overflow: hidden;
}
.video-lib-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.video-lib-card:hover .video-lib-thumb img {
transform: scale(1.05);
}
.video-lib-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
color: #fff;
opacity: 0;
transition: opacity 0.2s ease;
}
.video-lib-card:hover .video-lib-play {
opacity: 1;
}
.video-lib-play svg {
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
transition: transform 0.2s ease;
}
.video-lib-card:hover .video-lib-play svg {
transform: scale(1.15);
}
.video-lib-info {
padding: 0.75rem 0.85rem;
}
.video-lib-title {
font-weight: 600;
font-size: 0.88rem;
color: var(--text);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.46em;
}
.video-lib-date {
font-size: 0.75rem;
color: var(--text-dim);
margin-top: 0.35rem;
}
.video-lib-empty {
grid-column: 1/-1;
text-align: center;
padding: 2rem;
color: var(--text-dim);
}
@media (max-width: 640px) {
.video-lib-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.75rem;
}
.video-lib-title { font-size: 0.8rem; }
}
/* ═══════════ 🎥 مشغل الفيديو Modal ═══════════ */
.video-player-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
.video-player-modal.active {
display: flex;
animation: videoModalFadeIn 0.3s ease;
}
@keyframes videoModalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.video-player-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
}
.video-player-container {
position: relative;
width: 100%;
max-width: 1200px;
max-height: 90vh;
background: var(--bg);
border: 1.5px solid var(--accent);
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 80px rgba(212, 165, 116, 0.25);
animation: videoModalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes videoModalSlideUp {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.video-player-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.25rem;
background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
border-bottom: 1px solid var(--border);
}
.video-player-title {
font-size: 1rem;
font-weight: 700;
color: var(--accent);
flex: 1;
margin-inline-end: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.video-player-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.video-player-yt-btn {
background: rgba(255, 0, 0, 0.15);
border: 1px solid rgba(255, 0, 0, 0.3);
color: #ff0000;
cursor: pointer;
padding: 0.4rem 0.6rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.2s ease;
}
.video-player-yt-btn:hover {
background: rgba(255, 0, 0, 0.25);
transform: scale(1.05);
}
.video-player-close {
background: transparent;
border: none;
color: var(--text);
cursor: pointer;
padding: 0.4rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.video-player-close:hover {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
transform: scale(1.1);
}
.video-player-frame-wrap {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
overflow: hidden;
}
/* حاوية مشغل YouTube API */
.video-player-frame-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.video-player-frame-container iframe,
.video-player-frame-container > div {
width: 100% !important;
height: 100% !important;
border: none;
}
/* ⏳ شاشة التحميل */
.video-player-loading {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #000;
color: #fff;
gap: 1rem;
}
.video-player-spinner {
width: 48px;
height: 48px;
border: 3px solid rgba(212, 165, 116, 0.2);
border-top-color: var(--accent);
border-radius: 50%;
animation: vpSpin 0.8s linear infinite;
}
@keyframes vpSpin {
to { transform: rotate(360deg); }
}
.video-player-loading-text {
color: var(--accent);
font-size: 0.95rem;
font-weight: 600;
}
/* ⚠️ شاشة الخطأ */
.video-player-error {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #000;
color: #fff;
padding: 2rem;
text-align: center;
gap: 0.75rem;
}
.video-player-error-icon {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}
.video-player-error-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent);
}
.video-player-error-msg {
color: var(--text-dim);
font-size: 0.9rem;
max-width: 400px;
line-height: 1.6;
margin-bottom: 1rem;
}
.video-player-error-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
color: #fff;
border-radius: 9999px;
text-decoration: none;
font-weight: 700;
font-size: 0.9rem;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(255, 0, 0, 0.4);
}
.video-player-error-btn:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 6px 18px rgba(255, 0, 0, 0.5);
}
.video-player-retry-btn {
margin-top: 0.75rem;
padding: 0.5rem 1.2rem;
background: transparent;
border: 1.5px solid var(--border);
color: var(--text);
border-radius: 9999px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
font-family: inherit;
transition: all 0.2s ease;
}
.video-player-retry-btn:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-1px);
}
/* 💡 بطاقة النصيحة */
.video-player-tip {
margin-top: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.9rem 1.1rem;
background: linear-gradient(135deg, rgba(212, 165, 116, 0.12) 0%, rgba(212, 165, 116, 0.04) 100%);
border: 1px solid rgba(212, 165, 116, 0.3);
border-radius: 0.75rem;
max-width: 450px;
text-align: start;
}
.video-player-tip-icon {
font-size: 1.4rem;
flex-shrink: 0;
}
.video-player-tip-text {
color: rgba(255, 255, 255, 0.85);
font-size: 0.82rem;
line-height: 1.6;
}
.video-player-tip-text strong {
color: var(--accent);
font-weight: 700;
}
.video-player-tip-text b {
color: #fff;
background: rgba(255, 255, 255, 0.1);
padding: 0.1rem 0.4rem;
border-radius: 0.3rem;
font-weight: 600;
}
@media (max-width: 640px) {
.video-player-modal {
padding: 0;
align-items: flex-start !important;
padding-top: env(safe-area-inset-top, 0px);
}
.video-player-container {
max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
border-radius: 0 0 1rem 1rem;
margin-top: 0;
margin-bottom: auto;
width: 100%;
}
.video-player-header {
padding: 0.85rem 1rem;
padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
position: sticky;
top: 0;
z-index: 10;
background: var(--bg);
}
.video-player-title { font-size: 0.88rem; }
.video-player-close {
width: 44px !important;
height: 44px !important;
background: rgba(239, 68, 68, 0.95) !important;
border: 2px solid rgba(255, 255, 255, 0.4) !important;
border-radius: 50% !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.video-player-close svg {
width: 24px !important;
height: 24px !important;
}
.video-player-error { padding: 1.5rem; }
.video-player-error-icon { font-size: 3rem; }
.video-player-error-title { font-size: 1.05rem; }
}
/* watch providers (القديم - للتوافق) */
.providers-group {
margin-bottom: 1.5rem;
}
.providers-group:last-child { margin-bottom: 0; }
.providers-label {
font-size: 0.85rem;
color: var(--text-faded);
margin-bottom: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.providers-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.provider-item {
display: flex; align-items: center; gap: 0.625rem;
padding: 0.5rem 0.75rem 0.5rem 0.5rem;
padding-inline-start: 0.5rem;
padding-inline-end: 0.875rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.625rem;
transition: all 0.3s ease;
}
.provider-item:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.provider-logo {
width: 36px; height: 36px;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.provider-logo img { width: 100%; height: 100%; object-fit: cover; }
.provider-name {
font-size: 0.85rem;
font-weight: 500;
color: var(--text);
}
.no-providers {
padding: 1.5rem;
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 0.75rem;
color: var(--text-faded);
text-align: center;
font-size: 0.9rem;
}
/* loading detail */
.detail-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: 1rem;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* ✨ Ripple effect للأزرار */
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-wave {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: rippleAnim 0.6s ease-out;
background: rgba(255, 255, 255, 0.35);
pointer-events: none;
}
@keyframes rippleAnim {
to {
transform: scale(4);
opacity: 0;
}
}
/* ✨ Scroll reveal للعناصر */
.reveal-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal-on-scroll.revealed {
opacity: 1;
transform: translateY(0);
}
/* ✨ Skeleton loaders - للتحميل السلس */
.skeleton {
background: linear-gradient(
90deg,
var(--surface) 0%,
var(--surface-elevated) 50%,
var(--surface) 100%
);
background-size: 200% 100%;
animation: skeletonShimmer 1.5s ease-in-out infinite;
border-radius: 0.5rem;
}
@keyframes skeletonShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-poster {
aspect-ratio: 2/3;
border-radius: 0.75rem;
margin-bottom: 0.75rem;
}
.skeleton-line {
height: 14px;
margin-bottom: 0.5rem;
}
.skeleton-line:last-child {
width: 70%;
}
/* ✨ Smooth image loading */
img {
transition: opacity 0.3s ease;
}
img[loading="lazy"]:not(.loaded) {
opacity: 0;
}
img[loading="lazy"].loaded {
opacity: 1;
}
/* ✨ تحسين hover على الأزرار */
button:not(:disabled),
.btn-primary,
.modal-btn,
.action-btn {
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s ease,
background 0.2s ease;
}
button:not(:disabled):active,
.btn-primary:active,
.modal-btn:active,
.action-btn:active {
transform: scale(0.96);
}
/* الأنيميشن */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes dotPulse {
0%, 80%, 100% { opacity: 0.2; transform: scale(0.9); }
40% { opacity: 1; transform: scale(1.1); }
}
.hidden { display: none !important; }
/* 🎞️ نافذة تفاصيل فلم من سينما العراق */
.iq-movie-details-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(12px);
overflow-y: auto;
display: none;
}
.iq-movie-details-overlay.active {
display: block;
animation: fadeIn 0.3s ease;
}
.iq-movie-details-close {
position: fixed;
top: 16px;
inset-inline-end: 16px;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.95);
border: 2px solid rgba(255, 255, 255, 0.4);
color: #fff;
cursor: pointer;
z-index: 210;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.iq-movie-details-container {
max-width: 800px;
margin: 0 auto;
padding: 5rem 1rem 3rem;
}
.iq-movie-details-hero {
text-align: center;
margin-bottom: 2rem;
}
.iq-movie-details-poster {
max-width: 300px;
width: 100%;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 165, 116, 0.2);
}
.iq-movie-details-body {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 20px;
padding: 2rem 1.5rem;
}
.iq-movie-details-title {
font-family: 'Cairo', sans-serif;
font-size: clamp(1.4rem, 4vw, 2rem);
font-weight: 900;
color: var(--accent);
text-align: center;
margin-bottom: 1rem;
}
.iq-movie-details-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-bottom: 2rem;
}
.iq-movie-details-meta > span {
padding: 0.45rem 0.85rem;
background: var(--surface-elevated);
border-radius: 999px;
font-size: 0.88rem;
color: var(--text);
}
.iq-movie-details-badge {
background: linear-gradient(135deg, #D4A574, #8B0000) !important;
color: #fff !important;
font-weight: 700;
}
.iq-movie-details-section {
margin-bottom: 1.5rem;
}
.iq-movie-details-section h3 {
font-size: 1.1rem;
font-weight: 800;
color: var(--accent);
margin-bottom: 0.75rem;
padding-bottom: 0.4rem;
border-bottom: 1px dashed var(--border);
}
.iq-movie-trailer-wrap {
width: 100%;
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
background: #000;
}
.iq-trailer-placeholder {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
overflow: hidden;
}
.iq-trailer-poster-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
.iq-trailer-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72px;
height: 72px;
z-index: 2;
filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.7));
animation: watchPlayPulse 2s ease-in-out infinite;
}
.iq-trailer-hint {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.75);
color: var(--accent);
padding: 0.45rem 0.95rem;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
z-index: 3;
}
.iq-movie-details-info {
background: var(--surface-elevated);
border-radius: 12px;
padding: 1rem;
line-height: 1.9;
}
.iq-movie-details-info p {
margin-bottom: 0.5rem;
color: var(--text);
}
.iq-movie-details-info p:last-child {
margin-bottom: 0;
}
.iq-movie-details-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.iq-movie-action-btn {
width: 100%;
padding: 0.95rem;
border: none;
border-radius: 12px;
font-weight: 800;
font-size: 0.95rem;
cursor: pointer;
font-family: inherit;
transition: all 0.25s ease;
text-align: center;
text-decoration: none;
display: block;
}
.iq-action-search {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: #000;
}
.iq-action-search:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px var(--accent-glow);
}
.iq-action-external {
background: var(--surface-elevated);
color: var(--text);
border: 1.5px solid var(--border);
}
.iq-action-external:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ═══════════ 🎮 قسم الألعاب ═══════════ */
.games-overlay {
position: fixed;
inset: 0;
top: 64px;
background: var(--bg);
z-index: 85;
overflow-y: auto;
display: none;
}
.games-overlay.active {
display: block;
animation: overlaySlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 901px) {
.games-overlay { inset-inline-start: 240px; }
}
.games-close {
position: fixed;
top: 80px;
inset-inline-end: 16px;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.95);
border: 2px solid rgba(255, 255, 255, 0.4);
color: #fff;
cursor: pointer;
z-index: 100;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(12px);
transition: all 0.25s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.games-close:hover {
background: var(--danger);
transform: scale(1.1);
}
@media (max-width: 640px) {
.games-close {
top: 70px;
inset-inline-end: 12px;
width: 42px;
height: 42px;
box-shadow: 0 4px 18px rgba(239, 68, 68, 0.5), 0 0 0 3px rgba(0, 0, 0, 0.3);
}
}
.games-hero {
background: linear-gradient(135deg,
rgba(168, 85, 247, 0.4) 0%,
rgba(236, 72, 153, 0.3) 50%,
var(--accent-dim) 100%);
padding: 3rem 1.5rem 2.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.games-hero::before {
content: '🎮';
position: absolute;
font-size: 12rem;
opacity: 0.08;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.games-hero-content { position: relative; z-index: 1; }
.games-emoji {
display: inline-block;
font-size: 3.5rem;
margin-bottom: 0.5rem;
animation: gameEmojiFloat 3s ease-in-out infinite;
filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}
@keyframes gameEmojiFloat {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-8px) rotate(3deg); }
}
.games-title {
font-family: 'Cairo', 'Tajawal', sans-serif;
font-size: clamp(1.8rem, 5vw, 2.8rem);
font-weight: 900;
color: #fff;
margin-bottom: 0.4rem;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.games-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}
.games-body {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
.games-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
.game-card {
background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
border: 1.5px solid var(--border);
border-radius: 20px;
padding: 1.5rem;
text-align: center;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
animation: gameCardIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes gameCardIn {
0% {
opacity: 0;
transform: translateY(30px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Stagger delays لبطاقات الألعاب */
.games-grid > .game-card:nth-child(1) { animation-delay: 0.05s; }
.games-grid > .game-card:nth-child(2) { animation-delay: 0.15s; }
.games-grid > .game-card:nth-child(3) { animation-delay: 0.25s; }
.games-grid > .game-card:nth-child(4) { animation-delay: 0.35s; }
.games-grid > .game-card:nth-child(5) { animation-delay: 0.45s; }
.games-grid > .game-card:nth-child(6) { animation-delay: 0.55s; }
.games-grid > .game-card:nth-child(7) { animation-delay: 0.65s; }
.game-card:hover {
transform: translateY(-6px) scale(1.02);
border-color: var(--accent);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 30px var(--accent-glow);
}
.game-card-horror:hover {
border-color: #a855f7;
box-shadow: 0 12px 30px rgba(168, 85, 247, 0.3);
}
.game-card-haunted:hover {
border-color: #dc2626;
box-shadow: 0 12px 30px rgba(220, 38, 38, 0.3);
}
.game-card-soon {
opacity: 0.7;
border-style: dashed;
cursor: default;
}
.game-card-soon:hover {
transform: none;
border-color: var(--border);
box-shadow: none;
}
.game-card-icon-wrap {
position: relative;
display: inline-block;
margin-bottom: 1rem;
}
.game-card-icon {
font-size: 4rem;
position: relative;
z-index: 1;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
transition: transform 0.3s ease;
}
.game-card:hover .game-card-icon {
transform: scale(1.15) rotate(5deg);
}
.game-card-glow {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 120px; height: 120px;
background: radial-gradient(circle, var(--accent-glow), transparent);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.game-card:hover .game-card-glow {
opacity: 1;
}
.game-card-title {
font-family: 'Cairo', 'Tajawal', sans-serif;
font-size: 1.4rem;
font-weight: 800;
color: var(--accent);
margin-bottom: 0.5rem;
}
.game-card-desc {
color: var(--text-dim);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.25rem;
}
.game-card-stats {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 1.25rem;
padding: 0.85rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 12px;
border: 1px solid var(--border);
}
.game-stat {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
}
.game-stat-icon { font-size: 1rem; }
.game-stat-value {
font-weight: 800;
color: var(--accent);
font-size: 1rem;
}
.game-stat-label { color: var(--text-dim); font-size: 0.78rem; }
.game-card-btn {
width: 100%;
padding: 0.85rem;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: #000;
font-weight: 800;
font-size: 1rem;
font-family: inherit;
cursor: pointer;
transition: all 0.25s ease;
}
.game-card-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--accent-glow);
}
.game-card-horror .game-card-btn {
background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
color: #fff;
}
.game-card-haunted .game-card-btn {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
color: #fff;
}
.game-card-coming {
padding: 0.85rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 12px;
border: 1px dashed var(--border);
}
.coming-items {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.82rem;
color: var(--text-dim);
}
/* ═══════════ 🎯 واجهة الألعاب (Play Overlay) ═══════════ */
.game-play-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 200;
overflow-y: auto;
display: none;
backdrop-filter: blur(8px);
}
.game-play-overlay.active { display: block; }
.game-play-close {
position: fixed;
top: 16px;
inset-inline-end: 16px;
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.95);
border: 2px solid rgba(255, 255, 255, 0.4);
color: #fff;
cursor: pointer;
z-index: 210;
display: flex; align-items: center; justify-content: center;
transition: all 0.25s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
}
.game-play-close:hover {
background: var(--danger);
transform: scale(1.1);
}
/* ✨ على الموبايل - نفس المكان لكن أظهر */
@media (max-width: 640px) {
.game-play-close {
top: 14px;
inset-inline-end: 14px;
width: 44px;
height: 44px;
background: rgba(239, 68, 68, 0.98);
border: 2.5px solid #fff;
box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5), 0 0 0 3px rgba(0, 0, 0, 0.4);
}
.game-play-close svg {
width: 26px !important;
height: 26px !important;
}
.game-play-container {
padding: 4.5rem 0.85rem 2rem !important;
}
}
.game-play-container {
max-width: 720px;
margin: 0 auto;
padding: 4rem 1rem 2rem;
}
.game-play-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
background: linear-gradient(135deg, var(--accent-dim), var(--accent));
color: #000;
border-radius: 16px;
margin-bottom: 1.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.game-play-header h2 {
font-size: 1.3rem;
font-weight: 900;
font-family: 'Cairo', sans-serif;
}
.game-play-stats {
display: flex;
gap: 1rem;
font-weight: 800;
font-size: 0.95rem;
}
.game-play-body {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 20px;
padding: 1.5rem;
}
/* 🎯 خمن الفلم */
.gm-poster-wrap {
position: relative;
aspect-ratio: 2/3;
max-width: 240px;
margin: 0 auto 1.5rem;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
background: #000;
}
.gm-poster-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.6s ease;
}
.gm-poster-blur {
position: absolute;
inset: 0;
backdrop-filter: blur(var(--gm-blur, 22px));
-webkit-backdrop-filter: blur(var(--gm-blur, 22px));
z-index: 2;
pointer-events: none;
transition: backdrop-filter 0.6s ease;
}
.gm-hint-counter {
position: absolute;
top: 10px;
inset-inline-end: 10px;
background: rgba(0, 0, 0, 0.75);
color: var(--accent);
padding: 0.35rem 0.7rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
z-index: 3;
backdrop-filter: blur(10px);
}
.gm-hints {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.gm-hint {
padding: 0.75rem 1rem;
background: var(--surface-elevated);
border-inline-start: 3px solid var(--accent);
border-radius: 8px;
font-size: 0.9rem;
color: var(--text);
animation: gmHintAppear 0.4s ease;
}
@keyframes gmHintAppear {
from { opacity: 0; transform: translateX(-15px); }
to { opacity: 1; transform: translateX(0); }
}
.gm-hint-icon {
display: inline-block;
margin-inline-end: 0.4rem;
}
.gm-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1rem;
}
.gm-hint-btn {
width: 100%;
padding: 0.7rem;
margin-bottom: 1rem;
background: rgba(245, 158, 11, 0.15);
border: 1.5px dashed #f59e0b;
border-radius: 10px;
color: #fde68a;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.88rem;
}
.gm-hint-btn:hover {
background: rgba(245, 158, 11, 0.25);
border-style: solid;
}
.gm-hint-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 480px) {
.gm-options { grid-template-columns: 1fr; }
}
.gm-option {
padding: 1rem;
background: var(--surface-elevated);
border: 2px solid var(--border);
border-radius: 12px;
color: var(--text);
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
text-align: center;
transition: all 0.25s ease;
font-family: inherit;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.gm-option:hover {
border-color: var(--accent);
background: var(--surface-hover);
transform: translateY(-2px);
}
.gm-option.correct {
background: rgba(34, 197, 94, 0.2);
border-color: #22c55e;
color: #4ade80;
}
.gm-option.wrong {
background: rgba(239, 68, 68, 0.2);
border-color: #ef4444;
color: #f87171;
}
.gm-option:disabled {
cursor: not-allowed;
pointer-events: none;
}
.gm-result {
text-align: center;
padding: 1.5rem 1rem;
background: linear-gradient(135deg, var(--surface-elevated), var(--surface));
border: 2px solid var(--accent);
border-radius: 16px;
animation: gmResultAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gmResultAppear {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.gm-result-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}
.gm-result-title {
font-size: 1.5rem;
font-weight: 900;
margin-bottom: 0.5rem;
font-family: 'Cairo', sans-serif;
}
.gm-result-desc {
color: var(--text-dim);
font-size: 0.95rem;
margin-bottom: 1.25rem;
line-height: 1.6;
}
.gm-next-btn {
padding: 0.85rem 2rem;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: #000;
font-weight: 800;
font-size: 1rem;
cursor: pointer;
font-family: inherit;
transition: all 0.25s ease;
}
.gm-next-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px var(--accent-glow);
}
/* 👻 ليلة الرعب */
.horror-overlay {
background: #000 !important;
}
.horror-container {
min-height: 100vh;
max-width: 700px;
margin: 0 auto;
padding: 3.5rem 1.25rem 2rem;
position: relative;
}
.horror-scene {
background: linear-gradient(180deg, rgba(30, 15, 40, 0.7), rgba(10, 5, 20, 0.95));
border: 1px solid rgba(168, 85, 247, 0.3);
border-radius: 16px;
padding: 1.75rem 1.5rem;
color: #e9d5ff;
box-shadow: 0 0 40px rgba(168, 85, 247, 0.2);
animation: horrorSceneAppear 0.6s ease;
}
@keyframes horrorSceneAppear {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.horror-title {
font-family: 'Cairo', sans-serif;
font-size: 1.5rem;
font-weight: 900;
color: #d8b4fe;
text-align: center;
margin-bottom: 1.25rem;
text-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
letter-spacing: 0.03em;
}
.horror-image {
width: 100%;
max-height: 220px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 1rem;
filter: brightness(0.7) contrast(1.2) saturate(0.8);
}
.horror-emoji {
text-align: center;
font-size: 5rem;
margin: 1rem 0;
filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.7));
animation: horrorFloat 3s ease-in-out infinite;
}
@keyframes horrorFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.horror-story {
font-family: 'Tajawal', sans-serif;
font-size: 1.05rem;
line-height: 1.85;
color: #e9d5ff;
margin-bottom: 1.5rem;
white-space: pre-wrap;
}
.horror-choices {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.horror-choice {
padding: 1rem 1.25rem;
background: rgba(88, 28, 135, 0.35);
border: 1.5px solid rgba(168, 85, 247, 0.4);
border-radius: 12px;
color: #f3e8ff;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
text-align: start;
transition: all 0.25s ease;
font-family: inherit;
}
.horror-choice:hover {
background: rgba(126, 34, 206, 0.5);
border-color: #a855f7;
transform: translateX(-4px);
box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
}
.horror-ending {
text-align: center;
padding: 1.5rem;
background: rgba(88, 28, 135, 0.4);
border: 2px solid #a855f7;
border-radius: 16px;
margin-top: 1rem;
}
.horror-ending-title {
font-family: 'Cairo', sans-serif;
font-size: 1.8rem;
font-weight: 900;
color: #e9d5ff;
margin-bottom: 0.75rem;
}
.horror-ending-desc {
color: #d8b4fe;
line-height: 1.7;
margin-bottom: 1.5rem;
font-size: 1rem;
}
.horror-restart-btn {
padding: 0.85rem 2rem;
background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
border: none;
border-radius: 12px;
color: #fff;
font-weight: 800;
cursor: pointer;
font-family: inherit;
font-size: 1rem;
transition: all 0.25s ease;
}
.horror-restart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(168, 85, 247, 0.5);
}
/* 🏚️ منزل الأشباح */
.haunted-overlay {
background: radial-gradient(ellipse at center, #1a0505 0%, #000 80%) !important;
}
.haunted-container {
min-height: 100vh;
max-width: 720px;
margin: 0 auto;
padding: 3.5rem 1.25rem 2rem;
}
.haunted-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.85rem 1rem;
background: rgba(0, 0, 0, 0.75);
border: 1px solid rgba(220, 38, 38, 0.3);
border-radius: 12px;
margin-bottom: 1.25rem;
color: #fecaca;
flex-wrap: wrap;
gap: 0.5rem;
}
.haunted-stat {
font-size: 0.88rem;
font-weight: 700;
}
.haunted-scene {
background: linear-gradient(180deg, rgba(40, 10, 10, 0.8), rgba(20, 0, 0, 0.95));
border: 1px solid rgba(220, 38, 38, 0.3);
border-radius: 16px;
padding: 1.75rem 1.5rem;
color: #fecaca;
box-shadow: 0 0 40px rgba(220, 38, 38, 0.15);
animation: hauntedSceneAppear 0.5s ease;
}
@keyframes hauntedSceneAppear {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.haunted-room-title {
font-family: 'Cairo', sans-serif;
font-size: 1.5rem;
font-weight: 900;
color: #fca5a5;
text-align: center;
margin-bottom: 1rem;
text-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
}
.haunted-room-emoji {
text-align: center;
font-size: 5rem;
margin: 1rem 0;
filter: drop-shadow(0 0 20px rgba(220, 38, 38, 0.5));
}
.haunted-story {
font-size: 1rem;
line-height: 1.85;
color: #fecaca;
margin-bottom: 1.5rem;
white-space: pre-wrap;
}
.haunted-riddle {
background: rgba(0, 0, 0, 0.4);
border: 1px dashed #dc2626;
border-radius: 12px;
padding: 1.25rem;
margin-bottom: 1.25rem;
}
.haunted-riddle-title {
color: #fca5a5;
font-weight: 800;
margin-bottom: 0.6rem;
font-size: 1rem;
}
.haunted-riddle-text {
color: #fecaca;
font-size: 0.98rem;
line-height: 1.7;
margin-bottom: 1rem;
}
.haunted-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
@media (max-width: 480px) {
.haunted-options { grid-template-columns: 1fr; }
}
.haunted-option {
padding: 0.85rem;
background: rgba(127, 29, 29, 0.3);
border: 1.5px solid rgba(220, 38, 38, 0.4);
border-radius: 10px;
color: #fecaca;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
}
.haunted-option:hover {
background: rgba(185, 28, 28, 0.5);
border-color: #ef4444;
transform: translateY(-2px);
}
.haunted-option.correct {
background: rgba(34, 197, 94, 0.3);
border-color: #22c55e;
color: #86efac;
}
.haunted-option.wrong {
background: rgba(239, 68, 68, 0.4);
border-color: #ef4444;
color: #fecaca;
}
.haunted-feedback {
padding: 1rem;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
margin-top: 1rem;
color: #fecaca;
font-size: 0.92rem;
line-height: 1.6;
}
.haunted-next-btn {
width: 100%;
padding: 0.85rem;
margin-top: 1rem;
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
border: none;
border-radius: 12px;
color: #fff;
font-weight: 800;
font-size: 1rem;
cursor: pointer;
font-family: inherit;
}
.haunted-next-btn:hover {
background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}
.haunted-jumpscare {
position: fixed;
inset: 0;
background: #000;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
font-size: 10rem;
animation: jumpScareFlash 0.6s ease;
pointer-events: none;
}
@keyframes jumpScareFlash {
0% { opacity: 0; transform: scale(0.3); }
40% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0; transform: scale(1); }
}
/* 👻 Jump Scare حقيقي مع صورة */
.real-jumpscare {
position: fixed;
inset: 0;
z-index: 99999;
pointer-events: none;
animation: realJumpscareShake 0.15s ease-in-out 5;
}
.real-jumpscare-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
animation: realJumpscareFadeOut 1.5s ease forwards;
}
.real-jumpscare-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: contrast(1.5) brightness(0.6) saturate(2) hue-rotate(-10deg);
animation: realJumpscareImage 1.5s ease;
}
.real-jumpscare-emoji {
position: absolute;
font-size: 15rem;
z-index: 2;
filter: drop-shadow(0 0 40px #ff0000);
animation: realJumpscareEmoji 0.5s ease-out;
text-shadow: 0 0 60px #ff0000;
}
.real-jumpscare-flash {
position: absolute;
inset: 0;
background: #fff;
mix-blend-mode: difference;
animation: realJumpscareFlash 0.2s ease 0s 3;
z-index: 3;
}
@keyframes realJumpscareImage {
0% { transform: scale(1.4); opacity: 0; }
30% { transform: scale(1.05); opacity: 1; }
70% { transform: scale(1); opacity: 1; }
100% { opacity: 0; }
}
@keyframes realJumpscareEmoji {
0% { transform: scale(0.5) rotate(-15deg); opacity: 0; }
40% { transform: scale(1.3) rotate(5deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes realJumpscareFlash {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
@keyframes realJumpscareShake {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(-8px, 4px); }
50% { transform: translate(8px, -4px); }
75% { transform: translate(-4px, -8px); }
}
@keyframes realJumpscareFadeOut {
0%, 80% { opacity: 1; }
100% { opacity: 0; }
}
/* أيقونات SVG */
.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-xs { width: 0.75rem; height: 0.75rem; }
/* ═══════════════════════════════════════════════════
👁️ عداد الزوار - Visitor Counter
═══════════════════════════════════════════════════ */
.visitor-counter {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, rgba(255, 215, 0, 0.02) 100%);
border: 1px solid var(--border);
border-radius: 14px;
padding: 0.55rem 1rem;
margin-top: 0.85rem;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.visitor-counter:hover {
border-color: var(--accent);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}
.visitor-counter-stat {
display: flex;
align-items: center;
gap: 0.4rem;
}
.visitor-counter-icon {
font-size: 1rem;
line-height: 1;
}
.visitor-counter-label {
color: var(--text-dim);
font-size: 0.78rem;
font-weight: 500;
}
.visitor-counter-value {
color: var(--accent);
font-size: 0.92rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
min-width: 28px;
transition: all 0.3s ease;
}
.visitor-counter-value.loading {
opacity: 0.4;
animation: counterPulse 1.5s ease-in-out infinite;
}
.visitor-counter-value.updated {
animation: counterPop 0.5s ease;
}
@keyframes counterPulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
@keyframes counterPop {
0% { transform: scale(1); }
50% { transform: scale(1.15); color: #fff; }
100% { transform: scale(1); }
}
.visitor-counter-divider {
width: 1px;
height: 20px;
background: var(--border);
}
/* على الموبايل - أصغر */
@media (max-width: 480px) {
.visitor-counter {
gap: 0.5rem;
padding: 0.5rem 0.75rem;
}
.visitor-counter-label {
font-size: 0.72rem;
}
.visitor-counter-value {
font-size: 0.85rem;
}
}
/* ═══════════════════════════════════════════════════
📱 Mobile Touch Targets - Apple HIG 44px minimum
═══════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
/* أزرار - كلها 44×44 على الأقل */
button:not(.search-filter-btn):not(.theme-option):not(.search-type-option):not(.search-section-clear-btn) {
min-height: 44px;
min-width: 44px;
}
/* الأزرار الصغيرة في المحتوى */
.icon-btn,
.nav-tab,
.trending-tab {
min-height: 44px !important;
min-width: 44px !important;
padding: 0.65rem 1rem;
}
/* خانات الإدخال - أكبر */
input[type="text"],
input[type="search"],
input[type="email"],
textarea,
select {
font-size: 16px !important; /* يمنع iOS من zoom تلقائياً */
min-height: 44px;
}
/* البطاقات - مسافات أوسع */
.card {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:active {
transform: scale(0.96);
}
/* بطاقات البحث feedback */
.search-card:active .search-card-poster-wrap {
transform: scale(0.96);
transition: transform 0.1s ease;
}
/* روابط أكبر */
a, .clickable {
min-height: 32px;
display: inline-flex;
align-items: center;
}
/* Scrolling أنعم */
* {
-webkit-tap-highlight-color: transparent;
}
/* hover effects تختفي على الموبايل (مزعجة) */
.card:hover,
.search-card:hover {
transform: none;
}
/* تكبير أيقونات النافيجيشن */
.sidebar-nav-tab svg {
width: 24px;
height: 24px;
}
}
/* تحسين سرعة الـ animations */
@media (prefers-reduced-motion: no-preference) {
.card,
.search-card,
button {
will-change: transform;
}
}
/* احترم لو المستخدم عطّل animations */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* تحسين Safe Area للموبايل (notch)
مهم: محصور بالموبايل فقط — على الديسكتوب RTL كان padding-right
يلغي مساحة السايدبار (padding-inline-start: 240px) */
@supports (padding: max(0px)) {
@media (max-width: 900px) {
body {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
}
}
/* 🚫 منع Zoom على الموبايل - تجربة Native App */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* touch-action فقط على الموبايل */
@media (max-width: 768px) {
html {
touch-action: pan-x pan-y;
}
}
body {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
/* على الموبايل فقط: منع select لتجربة native */
@media (max-width: 768px) {
body {
-webkit-user-select: none;
user-select: none;
overscroll-behavior: contain;
}
}
/* على الكمبيوتر: السماح بالـ select الطبيعي */
@media (min-width: 769px) {
body {
-webkit-user-select: auto;
user-select: auto;
}
}
/* اسمح بتحديد النص في input/textarea/contenteditable
+ محتوى الأفلام (عناوين، قصص، تفاصيل) — المستخدم لازم يكدر ينسخ اسم فلم */
input, textarea, [contenteditable="true"], .selectable,
.detail-content, .detail-content *,
.card-title, .hero-subtitle, .movie-of-day-overview,
.chat-msg, .chat-msg *,
.news-card-title, .news-card-desc {
-webkit-user-select: text;
user-select: text;
}
/* صور ما تنحدّد */
img {
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
/* ═══════════════════════════════════════════════════
🔄 Pull to Refresh Indicator
═══════════════════════════════════════════════════ */
.ptr-indicator {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-100%);
z-index: 9999;
background: var(--surface-elevated);
border: 1.5px solid var(--border);
border-radius: 50px;
padding: 0.6rem 1.2rem;
display: flex;
align-items: center;
gap: 0.65rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 215, 0, 0.1);
color: var(--accent);
font-size: 0.88rem;
font-weight: 600;
margin-top: calc(0.75rem + env(safe-area-inset-top, 0px));
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
will-change: transform, opacity;
}
.ptr-indicator.visible {
opacity: 1;
}
.ptr-indicator.refreshing {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.ptr-indicator.refreshing .ptr-arrow {
display: none;
}
.ptr-indicator.refreshing .ptr-circle {
animation: ptrSpin 0.8s linear infinite;
}
.ptr-indicator:not(.refreshing) .ptr-circle {
display: none;
}
.ptr-spinner {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.ptr-circle {
width: 22px;
height: 22px;
stroke-dasharray: 80;
stroke-dashoffset: 60;
stroke-linecap: round;
}
.ptr-arrow {
width: 22px;
height: 22px;
transition: transform 0.2s ease;
}
.ptr-indicator.ready .ptr-arrow {
transform: rotate(180deg);
}
@keyframes ptrSpin {
to { transform: rotate(360deg); }
}
/* ═══════════════════════════════════════════════════
📱 Bottom Navigation Bar - Mobile only
═══════════════════════════════════════════════════ */
.bottom-nav {
display: none;
}
@media (max-width: 768px) {
/* اخفي sidebar على الموبايل */
.sidebar-nav {
display: none !important;
}
/* اخفي الـ hamburger */
.hamburger-btn {
display: none !important;
}
/* Bottom Nav يظهر */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
align-items: stretch;
background: rgba(10, 15, 25, 0.92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid var(--border);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
padding: 0.4rem 0.25rem;
padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
z-index: 90;
animation: bottomNavSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bottomNavSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.bottom-nav-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
background: transparent;
border: none;
color: var(--text-dim);
padding: 0.5rem 0.25rem;
cursor: pointer;
font-family: inherit;
font-size: 0.7rem;
font-weight: 600;
transition: color 0.2s ease, transform 0.15s ease;
position: relative;
min-height: 56px;
-webkit-tap-highlight-color: transparent;
}
.bottom-nav-btn svg {
width: 24px;
height: 24px;
transition: all 0.2s ease;
stroke-width: 2;
}
.bottom-nav-btn span:not(.bottom-nav-badge) {
font-size: 0.68rem;
line-height: 1;
transition: all 0.2s ease;
}
.bottom-nav-btn:active {
transform: scale(0.92);
}
.bottom-nav-btn:active svg {
transform: scale(1.1);
}
.bottom-nav-btn.active {
color: var(--accent);
}
.bottom-nav-btn.active svg {
stroke-width: 2.3;
filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.3));
}
.bottom-nav-btn.active::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 3px;
background: var(--accent);
border-radius: 0 0 6px 6px;
box-shadow: 0 0 8px var(--accent);
}
.bottom-nav-badge {
position: absolute;
top: 0.25rem;
inset-inline-end: calc(50% - 18px);
background: #ff4757;
color: white;
font-size: 0.62rem;
font-weight: 800;
padding: 0.1rem 0.35rem;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
animation: badgePop 0.3s ease;
}
.bottom-nav-badge.hidden { display: none; }
@keyframes badgePop {
0% { transform: scale(0); }
80% { transform: scale(1.2); }
100% { transform: scale(1); }
}
body:not(.search-overlay-open) main,
body:not(.search-overlay-open) #content {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
body.search-overlay-open .bottom-nav,
body.detail-open .bottom-nav {
display: none !important;
}
.install-banner {
bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 0.5rem) !important;
}
}
/* ═══════════════════════════════════════════════════
📋 More Menu Sheet
═══════════════════════════════════════════════════ */
.more-menu-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9000;
display: none;
align-items: flex-end;
justify-content: center;
animation: fadeIn 0.2s ease;
}
.more-menu-overlay.visible {
display: flex;
}
.more-menu-sheet {
background: var(--bg);
border-radius: 24px 24px 0 0;
width: 100%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
padding: 1.5rem 1rem;
padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
animation: bottomSheetSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
}
.more-menu-overlay.closing .more-menu-sheet {
animation: bottomSheetSlideDown 0.25s cubic-bezier(0.4, 0, 1, 1);
}
.more-menu-sheet::before {
content: '';
display: block;
width: 40px;
height: 5px;
background: var(--text-dim);
opacity: 0.4;
border-radius: 10px;
margin: 0 auto 1.25rem;
}
.more-menu-title {
text-align: center;
color: var(--accent);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1rem;
}
.more-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.65rem;
}
.more-menu-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1rem 0.5rem;
cursor: pointer;
color: var(--text);
font-family: inherit;
font-size: 0.78rem;
font-weight: 600;
transition: all 0.2s ease;
min-height: 92px;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
.more-menu-item:active {
transform: scale(0.94);
background: rgba(255, 215, 0, 0.1);
border-color: var(--accent);
}
.more-menu-item-icon {
font-size: 1.6rem;
}
.more-menu-close {
width: 100%;
margin-top: 1rem;
padding: 0.85rem;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text);
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.more-menu-close:active {
background: var(--accent);
color: var(--bg);
}
/* ═══ مخفي: ألعاب وأخبار ═══ */
.games-overlay, #gamesOverlay { display: none !important; }
#newsSection { display: none !important; }
[data-view="games"], [data-more-view="games"] { display: none !important; }
/* ============ دورلي • أسود/ذهبي (يفرض على أي ثيم) ============ */
:root, html[data-theme]{
--bg:#070709; --bg-deep:#040405;
--bg-gradient:
radial-gradient(1200px 720px at 80% -12%, rgba(233,196,106,.10) 0%, transparent 55%),
radial-gradient(900px 600px at -5% 105%, rgba(28,24,14,.5) 0%, transparent 60%),
linear-gradient(180deg,#0a0a0e 0%, #050507 100%);
--surface:#101016; --surface-elevated:#15151d; --surface-hover:#1c1c26;
--border:#23232c; --border-strong:#393944;
--accent:#e9c46a; --accent-hover:#f3d98b; --accent-dim:#b8860b; --accent-glow:rgba(233,196,106,.28);
--lapis:#2f2f3a; --lapis-deep:#13131b; --lapis-bright:#42424c; --lapis-glow:rgba(233,196,106,.16);
--brick:#caa24a; --brick-deep:#8a6a1f; --sand:#e6d39a; --sand-deep:#b9a463;
--text:#f4f2ec; --text-dim:#cbc8bf; --text-faded:#7c796f;
}
body{ background:var(--bg-gradient) fixed, var(--bg); }
/* ---- إخفاء أزرار الهيدر المنقولة ---- */
#themeBtn, #langBtn, #surpriseBtn, #settingsBtn{display:none!important}
/* ---- اللوغو الجديد + الهيدر: لوغو أكبر بدون كلمة ---- */
.logo-text{display:none!important}
.logo .logo-icon{width:54px!important;height:54px!important;border-radius:15px!important;
background:radial-gradient(circle at 35% 30%, #1b1810, #08080b)!important;
border:1px solid rgba(233,196,106,.32)!important;
box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 0 16px rgba(233,196,106,.08)!important}
.brand-logo-img{width:42px;height:42px;object-fit:contain;display:block;
filter:drop-shadow(0 0 8px rgba(233,196,106,.45))}
/* ---- الشريط الجانبي (أسود نقي + لمسة ذهبية) ---- */
.sidebar-nav{background:linear-gradient(180deg,#0c0c11 0%, #060608 100%)!important;
border-color:var(--border)!important}
.sidebar-nav-tab{border-radius:13px!important;color:var(--text-dim)!important;transition:.2s}
.sidebar-nav-tab:hover{background:rgba(255,255,255,.04)!important;color:var(--text)!important}
.sidebar-nav-tab.active{
background:linear-gradient(135deg,#f6e3a1,#e9c46a 50%,#c99a3a)!important;color:#1a1407!important;
box-shadow:0 8px 22px rgba(233,196,106,.28)!important}
.sidebar-nav-tab.active svg{stroke:#1a1407!important;color:#1a1407!important}
/* عناصر مُضافة (فاجئني/إعدادات) بنفس مظهر التبويبات */
.dly-nav{display:flex;align-items:center;gap:13px;width:100%;padding:12px 14px;border-radius:13px;
color:var(--text-dim);font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;
background:none;font-family:inherit;text-align:start;transition:.2s}
.dly-nav:hover{background:rgba(233,196,106,.08);color:var(--accent);border-color:rgba(233,196,106,.25)}
.dly-nav svg{width:22px;height:22px;flex:0 0 22px;stroke-width:2}
.dly-nav-sep{height:1px;background:var(--border);margin:8px 10px}
/* مجموعات السايدبار */
.dly-navgroup{margin-bottom:4px}
.dly-navgroup-h{font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--text-faded);
padding:14px 16px 6px;opacity:.65}
.dly-navgroup .sidebar-nav-tab, .dly-navgroup .dly-nav{margin-bottom:2px}
/* ---- الهيدر ---- */
.dly-headnav{display:flex;align-items:center;gap:4px;margin:0 auto}
.dly-headnav a{padding:8px 16px;border-radius:11px;color:var(--text-dim);font-family:'Cairo',sans-serif;
font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:.2s}
.dly-headnav a:hover{color:var(--accent);background:rgba(233,196,106,.08)}
@media(max-width:900px){ .dly-headnav{display:none} }
/* شريط البحث داخل الهيدر (سطح المكتب) */
header, .header-inner{overflow:visible!important}
.header-inner{gap:18px}
.search-row.in-header{flex:1 1 auto;max-width:620px;margin:0 auto!important;padding:0!important;display:flex;align-items:center;gap:8px}
.search-row.in-header .search-form{flex:1;min-width:0}
.search-row.in-header .search-box{box-shadow:0 0 0 1.5px rgba(233,196,106,.35), 0 8px 22px rgba(0,0,0,.4)!important}
header{background:linear-gradient(180deg,rgba(7,7,9,.92),rgba(7,7,9,.5) 70%,transparent)!important;
backdrop-filter:blur(10px);border:none!important}
/* ============ شريط البحث المتوهّج ============ */
.search-box{background:rgba(14,14,19,.85)!important;
border:1.5px solid rgba(233,196,106,.4)!important;border-radius:18px!important;
box-shadow:0 0 0 4px rgba(233,196,106,.06), 0 16px 40px rgba(0,0,0,.5), inset 0 0 26px rgba(233,196,106,.04)!important;
backdrop-filter:blur(10px);transition:.25s}
.search-box:focus-within{border-color:var(--accent)!important;
box-shadow:0 0 0 5px rgba(233,196,106,.12), 0 22px 48px rgba(0,0,0,.55)!important}
.search-input{color:var(--text)!important}
.search-icon{color:var(--accent)!important}
.search-btn{background:linear-gradient(135deg,#f6e3a1,#e9c46a 50%,#c99a3a)!important;color:#1a1407!important;border:none!important}
.voice-btn, .advanced-search-btn, .search-type-btn{
background:rgba(255,255,255,.04)!important;border:1px solid var(--border)!important;color:var(--text-dim)!important;
border-radius:13px!important;transition:.2s}
.voice-btn:hover, .advanced-search-btn:hover, .search-type-btn:hover{
color:var(--accent)!important;border-color:rgba(233,196,106,.5)!important;background:rgba(233,196,106,.07)!important}
#imageSearchBtn{background:linear-gradient(135deg,#f6e3a1,#e9c46a 50%,#c99a3a)!important;color:#1a1407!important;border:none!important}
#imageSearchBtn svg{stroke:#1a1407!important}
/* ============ الهيرو المتحرّك (المختارات) ============ */
.hero.hero-cinema{position:relative!important;overflow:hidden!important;border-radius:26px!important;
border:1px solid var(--border)!important;box-shadow:0 18px 50px rgba(0,0,0,.55)!important;isolation:isolate}
.hero-backdrops{position:absolute;inset:0;z-index:-3;background:linear-gradient(120deg,#1a160c,#0a0a0d)}
.hero-bd{position:absolute;inset:0;background-size:cover;background-position:center;
opacity:0;transition:opacity 1.1s ease;transform:scale(1.05);filter:saturate(1.05)}
.hero-bd.on{opacity:.6;animation:dlyKB 9s ease-out forwards}
@keyframes dlyKB{from{transform:scale(1.05)}to{transform:scale(1.14)}}
.hero.hero-cinema::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
background:linear-gradient(90deg,rgba(7,7,9,.92) 6%,rgba(7,7,9,.6) 45%,rgba(7,7,9,.22) 80%),
linear-gradient(0deg,rgba(7,7,9,.92),transparent 60%)}
.hero-badge{background:rgba(233,196,106,.1)!important;border:1px solid rgba(233,196,106,.35)!important;color:#f3d98b!important}
/* ============ الكروت ============ */
.card .poster{border:1px solid var(--border)!important;box-shadow:0 10px 26px rgba(0,0,0,.45)!important;border-radius:16px!important}
.card:hover .poster{border-color:rgba(233,196,106,.45)!important}
/* ============ البار السفلي ============ */
.bottom-nav, #bottomNav{background:linear-gradient(180deg,rgba(15,15,21,.96),rgba(7,7,9,.99))!important;
border-top:1px solid var(--border)!important;backdrop-filter:blur(12px)}
/* ============ الدردشة: زر رجوع واحد ============ */
#chatCloseBtn, #chatExitBtn{display:none!important}
.dly-chat-back{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:11px;
background:rgba(233,196,106,.1);border:1px solid rgba(233,196,106,.3);color:var(--accent);
font-family:'Cairo',sans-serif;font-weight:700;font-size:14px;cursor:pointer;margin-inline-end:8px;transition:.2s}
.dly-chat-back:hover{background:rgba(233,196,106,.18)}
.dly-chat-back svg{width:18px;height:18px;stroke-width:2.2}
/* قائمة المحادثات */
.dly-chatlist{padding:22px;max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.dly-chatlist-h{font-family:'Cairo',sans-serif;font-weight:800;font-size:20px;color:var(--accent);margin-bottom:4px}
.dly-newchat{padding:14px;border:none;border-radius:14px;cursor:pointer;margin-bottom:8px;
background:linear-gradient(135deg,#f6e3a1,#e9c46a 50%,#c99a3a);color:#1a1407;font-family:'Cairo',sans-serif;font-weight:800;font-size:15px}
.dly-newchat:hover{filter:brightness(1.05)}
.dly-chatlist-empty{text-align:center;color:var(--text-faded);padding:36px 0}
.dly-conv{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;
background:var(--surface-elevated);border:1px solid var(--border);cursor:pointer;transition:.2s}
.dly-conv:hover{border-color:rgba(233,196,106,.4);transform:translateY(-1px)}
.dly-conv-info{flex:1;min-width:0}
.dly-conv-title{font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dly-conv-time{font-size:12px;color:var(--text-faded);margin-top:3px}
.dly-conv-del{background:none;border:none;cursor:pointer;font-size:16px;opacity:.55;transition:.2s}
.dly-conv-del:hover{opacity:1}
/* ============ نافذة الحساب (دخول / إنشاء) ============ */
.dly-auth-overlay{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
background:rgba(0,0,0,.72);backdrop-filter:blur(6px);padding:20px;font-family:'Tajawal',sans-serif}
.dly-auth-overlay.on{display:flex}
.dly-auth{position:relative;width:100%;max-width:430px;background:linear-gradient(180deg,#13131a,#0a0a0e);
border:1px solid var(--border);border-radius:22px;padding:30px 26px 26px;box-shadow:0 30px 80px rgba(0,0,0,.65)}
.dly-auth-x{position:absolute;top:14px;inset-inline-start:14px;width:36px;height:36px;border-radius:10px;
border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text-dim);cursor:pointer;font-size:20px;line-height:1}
.dly-auth-x:hover{color:var(--accent)}
.dly-auth-logo{width:66px;height:66px;margin:0 auto 12px;display:block;filter:drop-shadow(0 0 16px rgba(233,196,106,.5))}
.dly-auth h3{text-align:center;font-family:'Cairo',sans-serif;font-weight:800;font-size:23px;margin:0 0 4px;
background:linear-gradient(135deg,#f8eec0,#e9c46a 50%,#c99a3a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dly-auth .dly-auth-sub{text-align:center;color:var(--text-faded);font-size:13px;margin-bottom:18px}
.dly-auth-tabs{display:flex;gap:8px;background:rgba(255,255,255,.04);border-radius:13px;padding:5px;margin-bottom:18px}
.dly-auth-tab{flex:1;padding:10px;border:none;border-radius:10px;background:none;color:var(--text-dim);
font-family:'Cairo',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:.2s}
.dly-auth-tab.on{background:linear-gradient(135deg,#f6e3a1,#e9c46a 50%,#c99a3a);color:#1a1407}
.dly-field{margin-bottom:12px}
.dly-field label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px;font-weight:600}
.dly-field input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border);
background:var(--surface-elevated);color:var(--text);font-family:'Tajawal',sans-serif;font-size:15px;outline:none;transition:.2s}
.dly-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(233,196,106,.12)}
.dly-auth-submit{width:100%;padding:14px;border:none;border-radius:13px;cursor:pointer;margin-top:6px;
background:linear-gradient(135deg,#f6e3a1,#e9c46a 50%,#c99a3a);color:#1a1407;font-family:'Cairo',sans-serif;font-weight:800;font-size:16px;transition:.2s}
.dly-auth-submit:hover{transform:translateY(-1px)}
.dly-auth-msg{text-align:center;font-size:13px;margin-top:12px;min-height:18px}
.dly-auth-msg.err{color:#ff8585}.dly-auth-msg.ok{color:#74e6a4}
.dly-auth-forgot{display:block;width:100%;text-align:center;color:var(--accent);font-size:13px;margin-top:12px;cursor:pointer;background:none;border:none;font-family:'Tajawal',sans-serif}
.dly-nav.dly-account{color:#1a1407;background:linear-gradient(135deg,#f6e3a1,#e9c46a 50%,#c99a3a)}
.dly-nav.dly-account:hover{filter:brightness(1.05);background:linear-gradient(135deg,#f6e3a1,#e9c46a 50%,#c99a3a)}
/* ============ صف اللغة بالإعدادات ============ */
.dly-set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 16px;border-radius:14px;background:var(--surface-elevated);border:1px solid var(--border);margin-bottom:10px}
.dly-set-row .lbl{font-weight:700;color:var(--text)}
.dly-set-row .lbl small{display:block;color:var(--text-faded);font-weight:500;font-size:12px;margin-top:2px}
.dly-lang-btn{padding:9px 16px;border-radius:11px;border:none;cursor:pointer;font-family:'Cairo',sans-serif;font-weight:700;
background:linear-gradient(135deg,#f6e3a1,#e9c46a 50%,#c99a3a);color:#1a1407}
/* ============ شاشة الترحيب الفخمة ============ */
.welcome-splash{background:radial-gradient(1000px 700px at 50% 35%, #14110a 0%, #040405 70%)!important}
.splash-logo-img{width:210px;height:210px;object-fit:contain;
filter:drop-shadow(0 0 50px rgba(233,196,106,.55)) drop-shadow(0 0 16px rgba(233,196,106,.85));
animation:dlySplashLogo 3.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes dlySplashLogo{
0%{opacity:0;transform:scale(.55) rotate(-12deg)}
45%{opacity:1;transform:scale(1.08) rotate(2deg)}
70%{transform:scale(.98) rotate(0)}
100%{opacity:1;transform:scale(1) rotate(0)}}
.splash-tagline{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:30px;
animation:dlyFadeUp 1s ease .9s both}
.splash-tagline .st-1{font-family:'Cairo',sans-serif;font-weight:700;font-size:19px;color:#f3d98b;letter-spacing:.4px}
.splash-tagline .st-2{font-family:'Cairo',sans-serif;font-weight:600;font-size:13.5px;color:rgba(233,196,106,.6);letter-spacing:4px}
.splash-title{font-family:'Cairo',sans-serif!important;font-weight:800!important;letter-spacing:1px!important;margin-top:20px!important;
background:linear-gradient(135deg,#f8eec0,#e9c46a 50%,#c99a3a)!important;
-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;
animation:dlyFadeUp 1s ease 1.5s both}
@keyframes dlyFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.splash-title::after{content:"";display:block;width:0;height:2px;margin:16px auto 0;
background:linear-gradient(90deg,transparent,#e9c46a,transparent);animation:dlySplashLine 2.6s ease 1.9s forwards}
@keyframes dlySplashLine{to{width:220px}}
@media (max-width:768px){ .splash-logo-img{width:150px;height:150px} .splash-tagline .st-1{font-size:16px} }
/* ============ أداء: تخفيف الثقل ============ */
.splash-bg-aurora{filter:blur(60px)!important;animation-duration:25s!important}
.settings-overlay,.settings-container,.chat-overlay{backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
@media (max-width:768px){
#cinemaParticles,.cinema-particles,#particles,.particles,.mist-layer,#babylonMural,.babylon-mural,
#cuneiformFloating,.cuneiform-floating,#tigrisWaves,.tigris-waves,.hero-orbit-1,.hero-orbit-2{display:none!important}
header,.search-box,.bottom-nav,#bottomNav,.settings-overlay,.settings-container,.chat-overlay,.top-pill,.sidebar-nav{
backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
header{background:rgba(7,7,9,.97)!important}
.hero-bd.on{animation:none!important}
}
@media (max-width:560px){
.search-row{flex-wrap:wrap!important;gap:8px!important;justify-content:center!important;padding-inline:10px!important}
.search-form{flex:1 1 100%!important;order:-1!important}
}
/* ============ (9) صقل الكروت ============ */
.card{transition:transform .25s ease, filter .25s ease!important;will-change:transform!important}
.card:hover{transform:translateY(-5px) scale(1.02)!important}
.card .poster{aspect-ratio:2/3!important;border-radius:18px!important;overflow:hidden!important;
border:1px solid var(--border)!important;box-shadow:0 8px 22px rgba(0,0,0,.45)!important}
.card .poster img{border-radius:18px!important}
.card:hover .poster{border-color:rgba(233,196,106,.5)!important;
box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(233,196,106,.22)!important}
.card-title{color:var(--text)!important;font-weight:700!important}
.badge-rating{background:rgba(7,7,9,.82)!important;color:#f3d98b!important;border:1px solid rgba(233,196,106,.3)!important}
.badge-type{background:rgba(7,7,9,.8)!important;color:var(--text-dim)!important;border:1px solid var(--border)!important}
.fav-btn{background:rgba(7,7,9,.7)!important}
.fav-btn.active{color:#ff5a6e!important}
.details-btn{background:linear-gradient(135deg,#f6e3a1,#e9c46a 50%,#c99a3a)!important;color:#1a1407!important;border:none!important;font-weight:800}
@media(max-width:768px){ .card:hover{transform:none!important} .card:hover .poster{box-shadow:0 8px 22px rgba(0,0,0,.45)!important} }
/* ============ (10) صقل نافذة التفاصيل ============ */
.detail-container{background:linear-gradient(180deg,#0d0d12,#070709)!important;border:1px solid var(--border)!important}
.detail-title{color:var(--text)!important}
.detail-poster{border-radius:16px!important;border:1px solid var(--border)!important;box-shadow:0 12px 30px rgba(0,0,0,.5)!important}
.detail-close{background:rgba(7,7,9,.7)!important;border:1px solid var(--border)!important;color:var(--text)!important;backdrop-filter:blur(6px)}
.detail-close:hover{color:var(--accent)!important;border-color:rgba(233,196,106,.4)!important}
/* ============ Footer دورلي ============ */
.dly-footer{max-width:1180px;margin:46px auto 0;padding:30px 22px 20px;border-top:1px solid var(--border);font-family:'Tajawal',sans-serif;color:var(--text-dim)}
.dly-footer-top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.dly-footer-brand{max-width:360px}
.dly-footer-brand h4{font-family:'Cairo',sans-serif;font-weight:800;font-size:20px;margin:0 0 8px;
background:linear-gradient(135deg,#f8eec0,#e9c46a 50%,#c99a3a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dly-footer-brand p{font-size:13.5px;line-height:1.8;color:var(--text-faded);margin:0 0 12px}
.dly-footer-social{display:flex;gap:10px;flex-wrap:wrap}
.dly-footer-social a{display:inline-flex;align-items:center;padding:8px 14px;border-radius:10px;background:var(--surface-elevated);border:1px solid var(--border);color:var(--text-dim);text-decoration:none;font-size:13px;font-weight:600;transition:.2s}
.dly-footer-social a:hover{color:var(--accent);border-color:rgba(233,196,106,.4)}
.dly-footer-links{display:flex;flex-direction:column;gap:9px}
.dly-footer-links a{color:var(--text-dim);text-decoration:none;font-size:14px;cursor:pointer;transition:.2s}
.dly-footer-links a:hover{color:var(--accent)}
.dly-footer-legal{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-faded);line-height:1.9;text-align:center}
.dly-footer-legal a{color:var(--accent);text-decoration:none}
@media(max-width:768px){ .dly-footer{margin-bottom:96px} .dly-footer-top{flex-direction:column;gap:20px} }
/* ============ (12) احترام تقليل الحركة ============ */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ============ (20) إمكانية الوصول: focus واضح للكيبورد ============ */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.sidebar-nav-tab:focus-visible, .dly-nav:focus-visible, .more-menu-item:focus-visible, .bottom-nav-btn:focus-visible{
outline:2px solid var(--accent)!important; outline-offset:2px!important; border-radius:10px}
@keyframes directorSpin { to { transform: rotate(360deg); } }
/* ============ بوابة الاختيار بشاشة الترحيب ============ */
.splash-choices{
display:flex;flex-direction:column;gap:12px;margin-top:34px;width:min(430px,88vw);
opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.welcome-splash.choices-on .splash-choices{opacity:1;transform:none;pointer-events:auto}
.splash-choice{
display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;
background:rgba(233,196,106,.08);border:1.5px solid rgba(233,196,106,.35);color:#f3d98b;
text-decoration:none;font-family:'Cairo',sans-serif;cursor:pointer;text-align:start;width:100%;
transition:transform .2s ease,background .2s ease,border-color .2s ease}
.splash-choice:hover,.splash-choice:focus-visible{
background:rgba(233,196,106,.16);border-color:rgba(233,196,106,.7);transform:translateY(-2px)}
.splash-choice .sc-icon{font-size:26px;flex-shrink:0;line-height:1}
.splash-choice .sc-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.splash-choice .sc-text strong{font-size:16px;font-weight:800;color:#f6e3a6}
.splash-choice .sc-text small{font-size:12.5px;color:rgba(233,196,106,.65);line-height:1.55}
.splash-choice.primary{
background:linear-gradient(135deg,rgba(233,196,106,.22),rgba(233,196,106,.09));
border-color:rgba(233,196,106,.8);box-shadow:0 6px 24px rgba(233,196,106,.14)}
.splash-choice.mini{padding:10px 18px}
.splash-choice.mini .sc-icon{font-size:20px}
.splash-choice.mini .sc-text strong{font-size:14px}
.splash-choice.mini .sc-text small{font-size:11.5px}
@media (max-width:768px){
.splash-choices{margin-top:24px;gap:10px}
.splash-choice .sc-text strong{font-size:15px}
.splash-choice .sc-text small{font-size:12px}
}
@media (max-height:700px){
.splash-choices{margin-top:16px;gap:8px}
.splash-choice{padding:10px 16px}
}