/* ===================================================================== افلام سوا - Dark Cinematic Neon Theme (RTL) ===================================================================== الخلفية الداكنة هي العُرف السائد في مواقع الأفلام (نتفليكس، IMDb): تُبرز ألوان البوسترات وتريح العين أثناء التصفح الليلي الطويل. كل الألوان معرّفة كمتغيرات هنا — لتغيير هوية الموقع بالكامل يكفي تعديل هذا البلوك وحده. ===================================================================== */ /* --------------------------------------------------------------------- لوحتا الألوان: الوضع الداكن هو الافتراضي، والفاتح يُفعَّل بإضافة data-theme="light" على عنصر من زر التبديل في الشريط العلوي. كل لون في الموقع يُشتق من هنا — لا تكتب لونًا مباشرًا في أي قاعدة أدناه، وإلا اختفى في أحد الوضعين. --------------------------------------------------------------------- */ :root, [data-theme="dark"] { --bg-body: #1a1a24; --bg-surface: #242432; --bg-surface-2: #2f2f40; --bg-glass: rgba(26, 26, 36, 0.82); --text-main: #f1f0f8; --text-muted: #aeabc4; --text-body: #d3d0e2; /* نص الفقرات الطويلة: أهدأ من العناوين وأوضح من الثانوي */ /* Neon accent trio */ --neon-pink: #ff2bd6; --neon-violet: #8b5cf6; --neon-cyan: #22e0ff; --accent: #a78bfa; --accent-hover: #c4b5fd; --gradient-neon: linear-gradient(90deg, var(--neon-pink), var(--neon-violet) 55%, var(--neon-cyan)); --border-color: #3a3a4e; --radius: 16px; --radius-sm: 10px; --glow-soft: 0 0 0 1px rgba(139, 92, 246, 0.14), 0 10px 30px rgba(0, 0, 0, 0.5); --glow-strong: 0 0 20px rgba(139, 92, 246, 0.45), 0 0 46px rgba(34, 224, 255, 0.20); --shadow-card: 0 6px 22px rgba(0, 0, 0, 0.4); /* قيم تختلف جذريًا بين الوضعين */ --footer-deep: #15151d; /* نهاية تدرّج التذييل */ --bottom-bar: rgba(0, 0, 0, 0.28); /* شريط الحقوق */ --logo-glow: rgba(255, 255, 255, 0.22); /* هالة الشعار */ --search-clear: invert(1) opacity(0.55); /* أيقونة مسح حقل البحث */ --body-glow-1: rgba(255, 43, 214, 0.13); --body-glow-2: rgba(34, 224, 255, 0.11); --body-glow-3: rgba(139, 92, 246, 0.12); --hero-glow-1: rgba(255, 43, 214, 0.18); --hero-glow-2: rgba(34, 224, 255, 0.16); --foot-glow-1: rgba(139, 92, 246, 0.16); --foot-glow-2: rgba(255, 43, 214, 0.09); --foot-glow-3: rgba(34, 224, 255, 0.09); --skeleton-base: #2b2b3a; --skeleton-shine: #3a3a4e; } [data-theme="light"] { --bg-body: #eef0f7; --bg-surface: #ffffff; --bg-surface-2: #f6f7fc; --bg-glass: rgba(255, 255, 255, 0.80); --text-main: #16141f; --text-muted: #5f5f75; --text-body: #3c3a4a; /* البنفسجي الفاتح يختفي على الأبيض، فنعمّقه في هذا الوضع */ --neon-violet: #7c3aed; --accent: #6d28d9; --accent-hover: #5b21b6; --border-color: #e2e3ef; --glow-soft: 0 0 0 1px rgba(124, 58, 237, 0.10), 0 8px 24px rgba(124, 58, 237, 0.10); --glow-strong: 0 0 18px rgba(124, 58, 237, 0.28), 0 0 40px rgba(34, 224, 255, 0.16); --shadow-card: 0 4px 16px rgba(20, 18, 31, 0.10); --footer-deep: #e7e9f2; --bottom-bar: rgba(0, 0, 0, 0.04); --logo-glow: rgba(0, 0, 0, 0.14); --search-clear: none; --body-glow-1: rgba(255, 43, 214, 0.07); --body-glow-2: rgba(34, 224, 255, 0.07); --body-glow-3: rgba(139, 92, 246, 0.07); /* نخفّف التوهّجات في الوضع الفاتح: نفس الشدّة فوق الأبيض تبدو متسخة */ --hero-glow-1: rgba(255, 43, 214, 0.09); --hero-glow-2: rgba(34, 224, 255, 0.09); --foot-glow-1: rgba(139, 92, 246, 0.09); --foot-glow-2: rgba(255, 43, 214, 0.05); --foot-glow-3: rgba(34, 224, 255, 0.05); --skeleton-base: #e3e5ee; --skeleton-shine: #f2f3f8; } /* تنعيم الانتقال بين الوضعين بدل الوميض المفاجئ */ body, .site-header, .site-footer, .movie-card, .category-card, .admin-card, .form-control, .form-select, .page-note, .contact-info { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } @media (prefers-reduced-motion: reduce) { body, .site-header, .site-footer, .movie-card, .category-card, .form-control, .form-select { transition: none; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; background-color: var(--bg-body); background-image: radial-gradient(700px circle at 8% -5%, var(--body-glow-1), transparent 62%), radial-gradient(700px circle at 95% 0%, var(--body-glow-2), transparent 58%), radial-gradient(950px circle at 50% 110%, var(--body-glow-3), transparent 62%); background-attachment: fixed; color: var(--text-main); line-height: 1.7; } a { text-decoration: none; color: inherit; transition: color .2s ease; } a:hover { color: var(--accent); } /* كلاس .text-muted في بوتستراب مصمَّم للخلفيات الفاتحة: لونه rgba(33,37,41,.75) أي رمادي داكن. فوق خلفيتنا السوداء تصبح نسبة التباين 1.18:1 والنص يختفي عمليًا (الحد الأدنى المقبول 4.5:1). نتجاوزه بلون فاتح مناسب للداكن. هذا الملف يخص الواجهة فقط، ولوحة التحكم الفاتحة لا تتأثر به. */ .text-muted { color: var(--text-muted) !important; } img { max-width: 100%; display: block; } ::selection { background: var(--neon-violet); color: #fff; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-body); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--neon-pink), var(--neon-cyan)); border-radius: 10px; } /* ---------------- إتاحة الوصول (Accessibility) ---------------- */ /* مؤشر تركيز موحّد لكل عنصر تفاعلي عند التنقل بلوحة المفاتيح. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--neon-violet); outline-offset: 2px; border-radius: 6px; } /* الرأس لاصق (sticky)، فنمنعه من حجب العنصر الذي وصله التركيز عند التمرير. */ :target, #main-content, .movie-card a:focus-visible { scroll-margin-top: 90px; } #main-content:focus { outline: none; } .skip-link { position: absolute; top: 8px; right: 8px; z-index: 2000; padding: 10px 18px; background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--neon-violet); border-radius: var(--radius-sm); font-weight: 700; box-shadow: var(--glow-soft); transform: translateY(-160%); transition: transform .2s ease; } .skip-link:focus { transform: translateY(0); color: var(--text-main); } /* النص المتدرّج يعتمد على background-clip؛ في وضع التباين العالي بويندوز يسقط هذا التأثير ويختفي النص، فنُعيد لونًا صلبًا. */ @media (forced-colors: active) { .brand-name, .hero-section h1, .category-card i, .footer-logo-ar { background: none !important; -webkit-text-fill-color: CanvasText !important; color: CanvasText !important; animation: none !important; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid Highlight; } } /* ---------------- Header ---------------- */ .site-header { background: var(--bg-glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; } .navbar-brand { display: inline-flex; align-items: center; gap: 10px; } /* شريط الفيلم في الشعار رماديّ داكن (تباينه 1.74:1 على خلفيتنا السوداء)، فيذوب في الخلفية. هالة خفيفة حوله تفصله عنها دون المساس بألوان العلامة. */ .brand-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 6px var(--logo-glow)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); } .brand-name { font-weight: 800; font-size: 1.5rem; background: var(--gradient-neon); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: neon-shift 6s ease-in-out infinite; } @media (max-width: 575.98px) { .brand-logo { width: 32px; height: 32px; } .brand-name { font-size: 1.2rem; } } @keyframes neon-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .navbar .nav-link { color: var(--text-main) !important; font-weight: 600; padding: 0.5rem 1rem !important; position: relative; } .navbar .nav-link:hover { color: var(--accent) !important; } .navbar-toggler { border-color: var(--border-color); } .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25); } .search-form { min-width: 280px; } .search-form .form-control { background: var(--bg-surface-2); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 999px 0 0 999px; } .search-form .form-control:focus { background: var(--bg-surface-2); color: var(--text-main); border-color: var(--neon-violet); /* تغيير لون الحد وحده ليس مؤشر تركيز كافيًا (WCAG 2.2 - Focus Appearance)، لذا نُبقي حلقة تركيز واضحة بدل إلغائها. */ box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.30); } .search-form .btn { background: var(--gradient-neon); background-size: 200% auto; color: #fff; border: none; border-radius: 0 999px 999px 0; transition: background-position .3s ease, box-shadow .3s ease; } .search-form .btn:hover { background-position: right center; box-shadow: var(--glow-strong); } .dropdown-menu { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--glow-soft); } .dropdown-item { color: var(--text-main); border-radius: 8px; } .dropdown-item:hover, .dropdown-item:focus { background: linear-gradient(90deg, rgba(124,58,237,.10), rgba(0,229,255,.10)); color: var(--accent); } /* ---------------- Hero ---------------- */ .hero-section { position: relative; overflow: hidden; padding: 90px 0; border-bottom: 1px solid var(--border-color); background: radial-gradient(520px circle at 20% 20%, var(--hero-glow-1), transparent 62%), radial-gradient(520px circle at 80% 30%, var(--hero-glow-2), transparent 62%), var(--bg-surface); } /* خلفية الواجهة تُرفع من لوحة التحكم وتُمرَّر عبر متغيّر CSS من الصفحة. نرسمها في طبقة ::before مستقلة حتى نتحكم في تعتيمها دون التأثير على النص. */ .hero-section.has-bg { padding: 120px 0; background: var(--bg-surface); } .hero-section.has-bg::before { content: ''; position: absolute; inset: 0; background-image: var(--hero-bg); background-size: cover; background-position: center; } /* الخلفية تظهر بألوانها الكاملة دون أي تعتيم فوقها. بدل تغطية الصورة كلها بطبقة داكنة، نحمي وضوح النص بظلّ حول حروفه فقط — فيبقى مقروءًا دون أن تفقد الصورة نصاعتها. */ .hero-section .container { position: relative; z-index: 2; } /* العنوان نصّه متدرّج اللون (background-clip)، و text-shadow يظهر من خلال الحروف الشفافة فيبدو متسخًا — لذا نستخدم drop-shadow على العنصر نفسه فيرسم الظل حول شكل الحرف من الخارج. */ .hero-section.has-bg h1 { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 18px rgba(0, 0, 0, 0.55)); } .hero-section.has-bg .lead { color: #f1eff9; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.6); } .hero-section h1 { font-weight: 800; font-size: 2.6rem; background: var(--gradient-neon); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-section .lead { color: var(--text-muted); margin-bottom: 2rem; font-size: 1.1rem; } .hero-search { display: flex; max-width: 560px; gap: 0; } .hero-search .form-control { background: var(--bg-surface-2); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 999px 0 0 999px; padding: 0.9rem 1.2rem; } .hero-search .form-control:focus { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.30); border-color: var(--neon-violet); } .hero-search .btn { border-radius: 0 999px 999px 0; } /* ---------------- Section Titles ---------------- */ .section-title { margin-bottom: 1.75rem; } .section-title h2 { font-size: 1.55rem; font-weight: 800; display: inline-flex; align-items: center; gap: 10px; padding-right: 14px; border-right: 4px solid transparent; border-image: var(--gradient-neon) 1; } /* ---------------- Movie Card ---------------- */ .movie-card { background: var(--bg-surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-color); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; height: 100%; box-shadow: var(--shadow-card); } .movie-card:hover { transform: translateY(-6px); box-shadow: var(--glow-strong); border-color: var(--neon-violet); } .movie-poster-link { position: relative; display: block; overflow: hidden; } .movie-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; transition: transform .35s ease; } .movie-card:hover .movie-poster { transform: scale(1.06); } .movie-rating { position: absolute; top: 8px; left: 8px; background: rgba(20, 18, 31, 0.75); color: #ffd166; backdrop-filter: blur(4px); padding: 3px 9px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; } .movie-badge-featured { position: absolute; top: 8px; right: 8px; background: var(--gradient-neon); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; box-shadow: 0 0 12px rgba(124, 58, 237, 0.55); } .movie-card-body { padding: 14px; } .movie-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .movie-title a:hover { color: var(--neon-violet); } .movie-meta { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.8rem; } /* ---------------- Movie Detail Page ---------------- */ .movie-detail-poster { border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--glow-soft); } .movie-info-badges .badge { font-size: 0.85rem; padding: 8px 14px; margin-left: 6px; margin-bottom: 6px; border-radius: 999px; font-weight: 600; } .movie-description { color: var(--text-body); font-size: 1.02rem; } /* ---------------- Trailer ---------------- */ /* بدون حد أقصى للعرض يمتد إطار التريلر ليملأ الحاوية كاملة (نحو 1140 بكسل) فيبدو ضخمًا بشكل غير متناسق مع باقي عناصر الصفحة. */ .trailer-wrap { max-width: 760px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-color); box-shadow: var(--glow-soft); background: #000; } .trailer-wrap iframe { border: 0; display: block; } @media (max-width: 575.98px) { .trailer-wrap { max-width: 100%; } } /* ---------------- Static Pages (سياسة الخصوصية / الشروط / اتصل بنا) ---------------- */ /* سطر طويل جدًا يُتعب العين؛ 75ch هو المدى المريح للقراءة المتواصلة. */ .page-content { max-width: 75ch; margin: 0 auto; } .page-content h3 { font-size: 1.2rem; font-weight: 800; margin: 2.2rem 0 0.9rem; padding-right: 12px; border-right: 4px solid transparent; border-image: var(--gradient-neon) 1; } .page-content p, .page-content li { color: var(--text-body); } .page-content ul { padding-right: 1.2rem; } .page-content li { margin-bottom: 8px; } .page-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .page-content a:hover { color: var(--neon-cyan); } .page-updated { display: inline-block; background: var(--bg-surface-2); border: 1px solid var(--border-color); border-radius: 999px; padding: 4px 16px; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1.5rem; } .page-note { background: var(--bg-surface); border: 1px solid var(--border-color); border-right: 5px solid var(--neon-violet); border-radius: var(--radius-sm); padding: 16px 20px; margin: 1rem 0 1.5rem; } /* ---------------- Contact ---------------- */ .contact-info { display: flex; flex-wrap: wrap; gap: 24px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px 22px; margin: 1.5rem 0; } .contact-info span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .contact-info i { color: var(--neon-violet); } .contact-form { margin-top: 1.5rem; } .contact-form .form-label { font-weight: 600; margin-bottom: 6px; } .contact-form .req { color: var(--neon-pink); } /* حقل فخّ الروبوتات: يجب أن يختفي بصريًا دون استخدام display:none، لأن بعض الروبوتات تتجاهل الحقول المخفية بهذه الطريقة. */ .hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------------- Category Card ---------------- */ /* لكل قسم لونان يصلان من PHP عبر --cat-from و --cat-to، فتختلف كل بطاقة عن جارتها بدل ثمانية مربّعات رمادية متطابقة لا تميّزها العين. */ .category-card { position: relative; display: block; min-height: 168px; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border-color); background: var(--bg-surface); box-shadow: var(--shadow-card); text-align: center; isolation: isolate; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .category-card:hover { transform: translateY(-6px); border-color: var(--cat-from, var(--neon-violet)); box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 26px -6px var(--cat-from, var(--neon-violet)); } /* بوسترات القسم كخلفية: مموّهة وخافتة حتى لا تنافس النص فوقها */ .category-posters { position: absolute; inset: 0; display: flex; z-index: -2; } .category-posters img { flex: 1 1 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(1.1); transform: scale(1.06); transition: transform .5s ease; } .category-card:hover .category-posters img { transform: scale(1.12); } /* طبقة اللون: تمنح القسم هويته وتضمن قراءة النص فوق أي بوستر */ .category-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, color-mix(in srgb, var(--cat-from) 88%, transparent), color-mix(in srgb, var(--cat-to) 72%, transparent)), linear-gradient(to top, rgba(0,0,0,.55), transparent 65%); transition: opacity .28s ease; } /* الأقسام الفارغة بلا بوسترات: نخفّف اللون فتبدو هادئة لا صارخة */ .category-card.is-empty .category-veil { opacity: .55; } .category-body { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 168px; padding: 26px 14px; } .category-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(4px); color: #fff; font-size: 1.35rem; transition: transform .28s ease, background .28s ease; } .category-card:hover .category-icon { transform: scale(1.1) rotate(-8deg); background: rgba(255, 255, 255, .26); } /* النص أبيض دائمًا هنا لأنه يقع فوق طبقة لونية داكنة في الوضعين */ .category-card h3 { font-size: 1.1rem; font-weight: 800; margin: 0; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .55); } .category-count { font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } /* سهم يظهر عند المرور ليؤكد أن البطاقة قابلة للنقر */ .category-go { position: absolute; bottom: 12px; inset-inline-start: 14px; color: #fff; font-size: .85rem; opacity: 0; transform: translateX(8px); transition: opacity .28s ease, transform .28s ease; } .category-card:hover .category-go { opacity: .95; transform: none; } /* color-mix غير مدعوم في المتصفحات الأقدم، فنوفّر تدرّجًا بديلًا بسيطًا */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .category-veil { background: linear-gradient(145deg, var(--cat-from), var(--cat-to)); opacity: .85; } } @media (prefers-reduced-motion: reduce) { .category-card:hover { transform: none; } .category-card:hover .category-icon { transform: none; } .category-card:hover .category-posters img { transform: scale(1.06); } .category-go { transition: opacity .01s linear; transform: none; } } /* ---------------- Pagination ---------------- */ .pagination .page-link { background: var(--bg-surface); border-color: var(--border-color); color: var(--text-main); border-radius: 8px !important; margin: 0 3px; /* هدف لمس لا يقل عن 44×44 (Apple HIG / Material) بدل ارتفاع بوتستراب ~38px. */ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .pagination .page-item.active .page-link { background: var(--gradient-neon); border-color: transparent; color: #fff; box-shadow: 0 0 14px rgba(124, 58, 237, 0.45); } .pagination .page-item.disabled .page-link { background: var(--bg-surface-2); color: var(--text-muted); } .pagination .page-link:hover { color: var(--neon-violet); z-index: 1; } /* ---------------- Footer ---------------- */ /* اخترنا تدرّجًا لونيًا بدل صورة خلفية: التذييل يقع أسفل شبكة البوسترات مباشرة، وأي صورة هناك تزاحمها بصريًا وتضيف وزنًا للصفحة بلا مقابل. التدرّج يبقى حادًا على أي دقة شاشة، ولا يتعارض مع ألوان أي بوستر فوقه. */ .site-footer { position: relative; margin-top: 70px; padding: 60px 0 0; border-top: 1px solid var(--border-color); background: radial-gradient(900px circle at 50% 0%, var(--foot-glow-1), transparent 62%), radial-gradient(600px circle at 12% 30%, var(--foot-glow-2), transparent 60%), radial-gradient(600px circle at 88% 30%, var(--foot-glow-3), transparent 60%), linear-gradient(to bottom, var(--bg-surface), var(--footer-deep)); } /* خط نيون رفيع يفصل التذييل عمّا فوقه بوضوح */ .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-neon); } .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .footer-logo-img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 7px var(--logo-glow)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); } .footer-logo-text { display: flex; flex-direction: column; line-height: 1.25; } .footer-logo-ar { font-weight: 800; font-size: 1.35rem; background: var(--gradient-neon); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* الاسم اللاتيني سطر ثانوي: حجم أصغر وتباعد حروف يجعله يقرأ كتوقيع للعلامة لا كعنوان منافس للاسم العربي. */ .footer-logo-en { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); } @media (max-width: 767.98px) { .footer-logo { justify-content: center; } } .footer-about { color: var(--text-muted); font-size: 0.92rem; max-width: 42ch; line-height: 1.9; } /* عناوين الأعمدة: خط مائل صغير تحتها يعطي بنية واضحة بدل عناوين سابحة */ .site-footer h6 { font-size: 0.95rem; font-weight: 800; color: var(--text-main); margin-bottom: 18px; padding-bottom: 10px; position: relative; } .site-footer h6::after { content: ''; position: absolute; bottom: 0; right: 0; width: 38px; height: 3px; border-radius: 3px; background: var(--gradient-neon); } .footer-links li { margin-bottom: 10px; } .footer-links a { color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; transition: color .2s ease, transform .2s ease; } /* نقطة صغيرة تتلوّن عند المرور — إشارة بصرية أوضح من تغيّر لون النص وحده */ .footer-links a::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--border-color); transition: background .2s ease; } .footer-links a:hover { color: var(--accent); transform: translateX(-4px); } .footer-links a:hover::before { background: var(--neon-pink); } /* شريط الحقوق: لوح داكن منفصل يُنهي الصفحة بحدّ واضح */ .footer-bottom { margin-top: 45px; padding: 18px 0; border-top: 1px solid var(--border-color); background: var(--bottom-bar); } .footer-bottom p { margin: 0; color: var(--text-muted); font-size: 0.88rem; } @media (max-width: 767.98px) { .site-footer { padding-top: 40px; margin-top: 45px; text-align: center; } .site-footer h6::after { right: 50%; transform: translateX(50%); } .footer-about { margin-inline: auto; } .footer-links a { justify-content: center; } .social-links { justify-content: center; } } /* ---------------- أيقونات التواصل الاجتماعي ---------------- */ .social-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; } .social-link { width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.05rem; border-radius: 50%; color: var(--text-main); background: var(--bg-surface-2); border: 1px solid var(--border-color); transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } /* لون كل منصّة يصل من PHP عبر --social-color، فتتلوّن الأيقونة بهويتها عند المرور بدل لون موحّد لا يميّز شيئًا. */ .social-link:hover, .social-link:focus-visible { color: #fff; background: var(--social-color); border-color: var(--social-color); transform: translateY(-3px); box-shadow: 0 8px 20px -6px var(--social-color); } /* في صفحة اتصل بنا تأتي الأيقونات تحت بيانات التواصل مباشرة */ .page-content .social-links { margin-bottom: 1.5rem; } @media (prefers-reduced-motion: reduce) { .social-link { transition: none; } .social-link:hover, .social-link:focus-visible { transform: none; } } /* ---------------- Buttons ---------------- */ .btn { border-radius: 10px; font-weight: 600; } .btn-danger { background: var(--gradient-neon); background-size: 200% auto; border: none; transition: background-position .3s ease, box-shadow .3s ease, transform .2s ease; } .btn-danger:hover { background-position: right center; box-shadow: var(--glow-strong); transform: translateY(-1px); } .btn-outline-danger { color: var(--neon-violet); border-color: var(--neon-violet); } .btn-outline-danger:hover { background: var(--gradient-neon); border-color: transparent; color: #fff; box-shadow: var(--glow-strong); } .btn-outline-light { color: var(--text-main); border-color: var(--border-color); } .btn-outline-light:hover { background: var(--bg-surface-2); color: var(--text-main); border-color: var(--neon-cyan); box-shadow: 0 0 14px rgba(0,229,255,.3); } .btn-outline-secondary { color: var(--text-muted); border-color: var(--border-color); } .btn-outline-secondary:hover { background: var(--bg-surface-2); color: var(--text-main); border-color: var(--neon-pink); box-shadow: 0 0 14px rgba(255,43,214,.25); } /* ---------------- Badges (Bootstrap overrides) ---------------- */ .badge.bg-secondary { background-color: var(--bg-surface-2) !important; color: var(--text-main) !important; border: 1px solid var(--border-color); } .badge.bg-dark { background: linear-gradient(90deg, var(--neon-violet), var(--neon-cyan)) !important; color: #fff !important; } .badge.bg-danger { background: var(--gradient-neon) !important; border: none; } /* ---------------- Alerts ---------------- */ .alert { border-radius: var(--radius-sm); border: 1px solid var(--border-color); } /* تنبيهات بوتستراب مصممة لخلفية فاتحة؛ نعيد صياغتها كطبقات شفافة ملوّنة حتى تبقى مقروءة على الخلفية الداكنة. */ .alert-success { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.40); color: #86efac; } .alert-danger { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.40); color: #fca5a5; } .alert-warning { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.40); color: #fcd34d; } .alert-info { background: rgba(34, 224, 255, 0.12); border-color: rgba(34, 224, 255, 0.35); color: #7dd3fc; } /* ألوان نصوص التنبيهات أعلاه فاتحة لتناسب الداكن؛ على الأبيض تصبح غير مقروءة، فنعمّقها في الوضع الفاتح. */ [data-theme="light"] .alert-success { color: #14532d; } [data-theme="light"] .alert-danger { color: #991b1b; } [data-theme="light"] .alert-warning { color: #6b3f10; } [data-theme="light"] .alert-info { color: #075985; } /* ---------------- Theme toggle ---------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; /* 44×44 هو الحد الأدنى لهدف اللمس المريح */ width: 44px; height: 44px; margin-inline-start: 10px; border: 1px solid var(--border-color); border-radius: 50%; background: var(--bg-surface-2); color: var(--text-main); font-size: 1rem; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .theme-toggle:hover { border-color: var(--neon-violet); color: var(--accent); transform: rotate(-18deg); } /* تُعرض أيقونة واحدة فقط: القمر في الوضع الفاتح (للانتقال للداكن) والعكس */ .theme-toggle .icon-to-dark { display: none; } .theme-toggle .icon-to-light { display: inline-block; } [data-theme="light"] .theme-toggle .icon-to-dark { display: inline-block; } [data-theme="light"] .theme-toggle .icon-to-light { display: none; } @media (max-width: 991.98px) { .theme-toggle { margin: 12px 0 0; } } /* ---------------- Form controls on dark ---------------- */ .form-control, .form-select { background-color: var(--bg-surface-2); border-color: var(--border-color); color: var(--text-main); } .form-control::placeholder { color: var(--text-muted); opacity: 1; } .form-control:focus, .form-select:focus { background-color: var(--bg-surface-2); color: var(--text-main); border-color: var(--neon-violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.30); } /* أيقونة مسح حقل البحث تُرسم سوداء افتراضيًا فتختفي على الخلفية الداكنة. */ .form-control[type="search"]::-webkit-search-cancel-button { filter: var(--search-clear); } /* ---------------- Hero Slider (الأفلام المميزة) ---------------- */ .hero-slider { border-bottom: 1px solid var(--border-color); background: var(--bg-surface); } .hero-slide { position: relative; min-height: 540px; display: flex; align-items: center; overflow: hidden; } .hero-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center 35%; } /* عند وجود لقطة عريضة للفيلم: تُعرض واضحة كما هي، ويتكفّل التدرّج أدناه بإبقاء النص مقروءًا فوقها. */ .hero-slide.has-backdrop .hero-slide-bg { opacity: 1; } /* بديل عند غياب اللقطة: البوستر الرأسي مكبّرًا ومموّهًا — لا يصلح عرضه واضحًا لأن نسبته 2:3 لا تملأ مساحة عريضة دون تشويه. */ .hero-slide.no-backdrop .hero-slide-bg { filter: blur(22px) saturate(130%); transform: scale(1.2); opacity: 0.5; } /* تدرّج داكن يثقل الجهة التي يقع فيها النص (يسار الشريحة، لأن البوستر يحتل اليمين في وضع RTL) لضمان تباين كافٍ مهما كانت صورة الخلفية فاتحة. ملاحظة: زوايا تدرّجات CSS لا تنعكس مع dir="rtl"، فـ 90deg يعني "نحو اليمين" دائمًا. */ .hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,17,0.97) 6%, rgba(10,10,17,0.80) 42%, rgba(10,10,17,0.40) 78%, rgba(10,10,17,0.25) 100%), linear-gradient(to top, rgba(10,10,17,0.75), transparent 45%); } .hero-slide-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 34px; padding: 46px 0; } /* البوستر ملفوف داخل رابط، والرابط هو العنصر المرن الفعلي — فبدون تثبيته هنا يتقلّص هو ومعه الصورة على الشاشات المتوسطة رغم عرضها المحدد. */ .hero-slide-inner > a { flex-shrink: 0; display: block; line-height: 0; } .hero-slide-poster { width: 290px; flex-shrink: 0; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.7); } .hero-slide-content { min-width: 0; } .hero-slide-tag { display: inline-block; background: var(--gradient-neon); color: #fff; padding: 4px 14px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; margin-bottom: 12px; box-shadow: 0 0 14px rgba(139, 92, 246, 0.55); } .hero-slide-title { font-size: 2.3rem; font-weight: 800; line-height: 1.25; margin-bottom: 10px; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); } .hero-slide-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .hero-slide-meta span { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: #f0eefb; } .hero-slide-meta .is-rating { color: #ffd166; } .hero-slide-desc { color: #cdcadf; margin-bottom: 20px; max-width: 620px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* أزرار التنقّل: بوتستراب يعكس اتجاهها تلقائيًا في وضع RTL. */ .hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { width: 7%; opacity: 0; transition: opacity .25s ease; } .hero-slider:hover .carousel-control-prev, .hero-slider:hover .carousel-control-next { opacity: 0.85; } .hero-slider .carousel-control-prev:focus-visible, .hero-slider .carousel-control-next:focus-visible { opacity: 1; } .hero-slider .carousel-control-prev-icon, .hero-slider .carousel-control-next-icon { width: 46px; height: 46px; background-color: rgba(10, 10, 17, 0.65); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background-size: 46% 46%; } .hero-slider .carousel-indicators { margin-bottom: 14px; } .hero-slider .carousel-indicators [data-bs-target] { width: 28px; height: 4px; border-radius: 999px; background-color: rgba(255, 255, 255, 0.40); border: 0; } .hero-slider .carousel-indicators .active { background: var(--gradient-neon); } /* على الأجهزة اللوحية نصغّر البوستر بدل إخفائه، حتى لا يزاحم النص. */ @media (max-width: 991.98px) { .hero-slide { min-height: 450px; } .hero-slide-poster { width: 210px; } .hero-slide-inner { gap: 24px; } .hero-slide-title { font-size: 1.9rem; } } @media (max-width: 767.98px) { .hero-slide { min-height: 340px; } .hero-slide-poster { display: none; } .hero-slide-title { font-size: 1.5rem; } .hero-slide-desc { -webkit-line-clamp: 2; line-clamp: 2; font-size: 0.92rem; } .hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { display: none; } } /* ---------------- Poster Hover Overlay ---------------- */ .movie-poster-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(to top, rgba(10,10,17,0.94), rgba(10,10,17,0.25) 55%, rgba(10,10,17,0.05)); opacity: 0; transition: opacity .28s ease; } .movie-card:hover .movie-poster-overlay, .movie-poster-link:focus-visible .movie-poster-overlay { opacity: 1; } .movie-poster-play { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--gradient-neon); color: #fff; font-size: 1.15rem; box-shadow: 0 0 22px rgba(139, 92, 246, 0.75); transform: scale(0.75); transition: transform .28s ease; } .movie-card:hover .movie-poster-play { transform: scale(1); } .movie-poster-overlay span { color: #fff; font-weight: 700; font-size: 0.9rem; } /* على الأجهزة اللمسية لا يوجد hover إطلاقًا، والبطاقة تحتوي أصلًا على زر "التفاصيل" الظاهر دائمًا — فإظهار الطبقة هناك تكرار بصري بلا فائدة. */ @media (hover: none) { .movie-poster-overlay { display: none; } } /* ===================================================================== التأثيرات الحركية ===================================================================== قاعدتان لا نخرج عنهما: 1) نحرّك transform و opacity فقط — وحدهما يعملان على كرت الشاشة. تحريك width أو top أو box-shadow يجبر المتصفح على إعادة حساب التخطيط في كل إطار، فيتقطّع العرض على الهواتف المتوسطة. 2) كل تأثير مشروط بـ .js ومُعطَّل عند prefers-reduced-motion. ===================================================================== */ /* ---------------- 1) هيكل وهمي للبوستر أثناء التحميل ---------------- */ .js .movie-poster-link::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--skeleton-base) 25%, var(--skeleton-shine) 45%, var(--skeleton-base) 65%); background-size: 280% 100%; animation: skeleton-shimmer 1.5s linear infinite; } .js .movie-poster { opacity: 0; transition: opacity .45s ease; } .js .movie-poster-link.is-loaded .movie-poster { opacity: 1; } /* نوقف اللمعة بعد وصول الصورة، وإلا بقيت تدور خلفها بلا فائدة */ .js .movie-poster-link.is-loaded::before { animation: none; opacity: 0; } @keyframes skeleton-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } } /* ---------------- 2) ظهور البطاقات مع التمرير ---------------- */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } .js .reveal.is-visible { opacity: 1; transform: none; } /* ---------------- 3) زر العودة للأعلى ---------------- */ .back-to-top { position: fixed; inset-inline-start: 22px; /* يسار في RTL — بعيدًا عن إبهام اليد اليمنى */ bottom: 22px; z-index: 1040; width: 48px; height: 48px; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--gradient-neon); background-size: 200% auto; color: #fff; font-size: 1rem; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(14px) scale(0.85); pointer-events: none; transition: opacity .3s ease, transform .3s ease, background-position .3s ease; } .back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .back-to-top:hover { background-position: right center; transform: translateY(-3px); } @media (max-width: 575.98px) { .back-to-top { inset-inline-start: 14px; bottom: 14px; width: 44px; height: 44px; } } /* ---------------- 4) حالة الانتظار على زر الإرسال ---------------- */ .btn.is-sending { opacity: .75; cursor: progress; } .btn.is-sending .spinner { display: inline-block; width: 1em; height: 1em; margin-inline-end: 6px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; vertical-align: -2px; animation: btn-spin .7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* ---------------- احترام تقليل الحركة ---------------- */ /* من فعّل هذا الخيار في نظامه قد يصاب بدوار من الحركة، فنُلغيها كلها مع إبقاء المحتوى ظاهرًا ووظيفيًا بالكامل. */ @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .js .movie-poster { opacity: 1; transition: none; } .js .movie-poster-link::before { animation: none; opacity: 0; } .back-to-top { transition: opacity .01s linear; } .back-to-top:hover { transform: none; } .btn.is-sending .spinner { animation: none; } } /* ===================================================================== صفوف الأقسام الأفقية ===================================================================== */ .cat-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* لون القسم يصل من PHP، فيتلوّن خط العنوان بهويته بدل تدرّج موحّد */ .cat-row-section .section-title h2 { border-image: linear-gradient(var(--cat-from), var(--cat-to)) 1; } .cat-row-section .section-title h2 i { color: var(--cat-from); } .cat-row-all { font-size: .88rem; font-weight: 700; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease, gap .2s ease; } /* البديل ضروري: هذا الرابط يُستخدم أيضًا خارج صفوف الأقسام (الصفحة الرئيسية وصفحة القسم) حيث لا وجود لـ --cat-from، وبلا بديل يصبح اللون غير صالح فلا يتغيّر شيء عند مرور الفأرة. */ .cat-row-all:hover { color: var(--cat-from, var(--accent-hover)); gap: 11px; } .cat-row { position: relative; } .cat-row-track { display: flex; gap: 16px; overflow-x: auto; /* ضروري لا تجميلي: بطاقة الفيلم تحتوي عناصر .visually-hidden لقارئات الشاشة، وبوتستراب يجعلها position:absolute. بلا position هنا يصبح الحاوي المرجعي لها .cat-row (وهو relative)، فلا يقصّها overflow الخاص بهذا الشريط، فتمتد نصوص البطاقات المخفية خارج الشاشة وتُظهر شريط تمرير أفقي أسفل الصفحة كلها. */ position: relative; /* التقاط البطاقة عند حافة الشريط بدل التوقف في منتصفها */ scroll-snap-type: x proximity; scroll-padding-inline-start: 4px; padding: 4px 2px 14px; /* شريط التمرير الأصلي يشوّه الصف؛ التنقّل بالأزرار والسحب واللمس */ scrollbar-width: none; -ms-overflow-style: none; } .cat-row-track::-webkit-scrollbar { display: none; } .cat-row-track:focus-visible { outline: 3px solid var(--neon-violet); outline-offset: 4px; border-radius: 8px; } /** * عرض بطاقة الصف الأفقي. * كان ثابتًا عند 178 بكسل تقليدًا لنتفليكس، فظهرت البطاقة نفسها بحجمين * مختلفين في الصفحة الواحدة: 261 بكسل في الشبكات و178 في الصفوف (فرق 47%). * الآن يُحسب العرض من عدد الأعمدة نفسه الذي تستخدمه الشبكة في كل مقاس، * فيتطابق الحجمان. ونطرح --row-peek ليظهر طرف البطاقة التالية فيعرف * الزائر أن الشريط قابل للتمرير دون الحاجة إلى أي تلميح آخر. */ .cat-row-item { flex: 0 0 auto; --row-cols: 2; /* يطابق col-6 في الشبكة */ --row-peek: 20px; width: calc((100% - var(--row-cols) * 16px - var(--row-peek)) / var(--row-cols)); scroll-snap-align: start; } @media (min-width: 768px) { .cat-row-item { --row-cols: 3; --row-peek: 40px; } /* col-md-4 */ } @media (min-width: 992px) { .cat-row-item { --row-cols: 4; --row-peek: 44px; } /* col-lg-3 */ } /* أزرار التنقّل: تظهر على الأجهزة ذات الفأرة فقط — على اللمس السحب أطبع */ .row-nav { position: absolute; top: calc(50% - 20px); transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 50%; background: var(--bg-surface); color: var(--text-main); cursor: pointer; opacity: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); transition: opacity .25s ease, background .25s ease, color .25s ease; } .row-prev { inset-inline-end: -8px; } .row-next { inset-inline-start: -8px; } .cat-row:hover .row-nav { opacity: 1; } .row-nav:hover { background: var(--cat-from); color: #fff; border-color: transparent; } .row-nav:focus-visible { opacity: 1; } .row-nav[disabled] { opacity: 0 !important; pointer-events: none; } @media (hover: none) { .row-nav { display: none; } .cat-row-track { scroll-snap-type: x mandatory; } } /* ===================================================================== انتقال متحوّل بين الصفحات (View Transitions) ===================================================================== المتصفحات الداعمة تعرض انتقالًا ناعمًا بدل وميض التحميل الأبيض، وغير الداعمة تتنقّل بشكلها المعتاد دون أن ينكسر شيء — لا حاجة لأي بديل برمجي. ===================================================================== */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; } /* البوستر المنقور يتمدّد ليصبح بوستر صفحة الفيلم بدل أن يختفي ويظهر */ .vt-poster { view-transition-name: active-poster; } ::view-transition-group(active-poster) { animation-duration: .38s; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ---------------- Responsive ---------------- */ @media (max-width: 991px) { .search-form { min-width: 100%; margin-top: 12px; } .hero-section { padding: 60px 0; } .hero-section h1 { font-size: 1.9rem; } /* background-attachment: fixed يجبر المتصفح على إعادة رسم التدرجات مع كل إطار أثناء التمرير على الجوال (وسلوكه غير موثوق على iOS Safari). */ body { background-attachment: scroll; } } @media (prefers-reduced-motion: reduce) { .navbar-brand { animation: none; } * { scroll-behavior: auto !important; } /* الانتقال التلقائي للسلايدر حركة غير مطلوبة من المستخدم، ويُعطَّل هنا. (تعطيل التشغيل التلقائي نفسه يتم من main.js). */ .carousel-item, .carousel-fade .carousel-item { transition: none !important; } .movie-card, .movie-poster, .movie-poster-play, .movie-poster-overlay { transition: none !important; } .movie-card:hover { transform: none; } .movie-card:hover .movie-poster { transform: none; } } /* --------------------------------------------------------------------- شريط الفلترة في صفحة تصفّح الأفلام (browse.php) --------------------------------------------------------------------- */ .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 18px; margin-bottom: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-card); } .filter-field { display: flex; flex-direction: column; gap: 6px; /* يكبر ليملأ الشريط على الشاشات الكبيرة وينكمش قبل أن يفيض على الصغيرة */ flex: 1 1 190px; min-width: 0; } .filter-field label { font-size: .82rem; font-weight: 700; color: var(--text-muted); } .filter-bar .form-select { min-width: 0; } .filter-apply { flex: 0 0 auto; } /* ---- سطر الملخّص وشرائح الفلاتر المفعّلة ---- */ .browse-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1.5rem; color: var(--text-muted); font-weight: 600; } .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; } .filter-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; font-size: .85rem; font-weight: 700; line-height: 1.6; border-radius: 999px; text-decoration: none; color: var(--text-main); background: var(--bg-surface-2); border: 1px solid var(--border-color); transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .filter-chip i { font-size: .78rem; opacity: .7; } .filter-chip:hover { color: var(--accent-hover); border-color: var(--neon-violet); background: var(--bg-surface); } .filter-chip:hover i { opacity: 1; } .filter-chip.is-clear { background: transparent; color: var(--text-muted); border-style: dashed; } .filter-chip.is-clear:hover { color: var(--accent-hover); } @media (max-width: 575.98px) { .filter-bar { padding: 14px; gap: 10px; } /* عمود واحد على الجوال: ثلاث قوائم متجاورة تصبح غير قابلة للاستخدام */ .filter-field { flex: 1 1 100%; } .filter-apply { width: 100%; } } @media (prefers-reduced-motion: reduce) { .filter-chip { transition: none; } }