/* * Wolf IPTV — Foundation CSS Bundle (always loaded; auto-generated from core/ partials) * * AUTO-GENERATED FILE — DO NOT EDIT DIRECTLY * Source files in: assets/css/core/ * Build script: dashboard/scripts/build-css.php * Generated: 2026-06-02 09:34:44 */ /* ═══ FROM: _variables.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/_variables.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf — Design Tokens (M0.3.A — 2026-05-30) * ═══════════════════════════════════════════════════════════════════════════ * * مرجع واحد لكل الـ tokens في المشروع. مستخرج من التصميم الجديد بالكامل. * * هيكل الـ tokens (الترتيب مقصود): * 1. Brand colors * 2. Semantic colors (success/warn/danger/info/gold) * 3. Typography stacks (font-family) * 4. Spacing scale (4-96px) * 5. Radii scale (6-28px + pill) * 6. Z-index layers * 7. Layout (nav-h, container-max) * 8. Section spacing * 9. Breakpoints (M0.1) * 10. Wolf variant (dark) — surfaces, borders, text, shadows, hero mesh * 11. Wolf variant — semantic tints * 12. Transitions * * Naming convention (M0.3): مختصر — --brand, --bg, --text (مش prefixed) * السبب: متّسق مع التصاميم + معايير صناعية (Tailwind, shadcn). * * Loaded by: wolf-foundation.css bundle (always loaded — first in build order) * Dependencies: NONE * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ══════════════════════════════════════════════════════════════ 1. BRAND ══════════════════════════════════════════════════════════════ */ --brand: #8960C7; --brand-soft: #A78BDB; --brand-deep: #6B47A8; --brand-darker: #553586; /* ══════════════════════════════════════════════════════════════ 2. SEMANTIC COLORS ══════════════════════════════════════════════════════════════ */ --success: #16A34A; --warn: #D97706; --danger: #DC2626; --info: #2563EB; --gold: #F5B642; /* ══════════════════════════════════════════════════════════════ 3. TYPOGRAPHY STACKS (الخطوط نفسها معرّفة في /assets/css/fonts.css — self-hosted) ══════════════════════════════════════════════════════════════ */ --font-display: 'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif; --font-body: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace; /* ══════════════════════════════════════════════════════════════ 4. SPACING SCALE (4px-based) Naming: sp-N حيث N هو القيمة بالـ 4px units sp-1 = 4px, sp-2 = 8px, sp-3 = 12px, sp-4 = 16px ... ══════════════════════════════════════════════════════════════ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ══════════════════════════════════════════════════════════════ 5. RADII SCALE ══════════════════════════════════════════════════════════════ */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; /* ══════════════════════════════════════════════════════════════ 6. Z-INDEX LAYERS Naming: z-{role} — مرجع واحد لكل الـ stacking ══════════════════════════════════════════════════════════════ */ --z-nav: 100; --z-dropdown: 200; --z-fab: 400; /* floating action buttons (WhatsApp) */ --z-modal: 500; --z-toast: 700; --z-toolbar: 999; --z-system: 9000; /* critical system overlays */ /* ══════════════════════════════════════════════════════════════ 7. LAYOUT ══════════════════════════════════════════════════════════════ */ --nav-h: 76px; --nav-h-sm: 64px; --container-max: 1280px; /* ══════════════════════════════════════════════════════════════ 8. SECTION SPACING ══════════════════════════════════════════════════════════════ */ --section-py: var(--sp-20); /* 80px desktop */ --section-py-sm: var(--sp-16); /* 64px mobile */ --section-head-mb: var(--sp-12); /* 48px */ /* ══════════════════════════════════════════════════════════════ 9. BREAKPOINTS (M0.1) Scale موحّد للـ responsive (mobile-first). ⚠️ القيم الحرفية في @media — الـ CSS مبيسمحش بـ var() جوه media query. المرجع الكامل: Documentation/BREAKPOINTS.md ══════════════════════════════════════════════════════════════ */ --bp-sm: 480px; --bp-md: 640px; --bp-lg: 768px; --bp-xl: 1024px; --bp-2xl: 1280px; /* ══════════════════════════════════════════════════════════════ 10. WOLF VARIANT (Dark, Cinematic) السطح + الـ border + الـ text + الـ shadows + الـ hero mesh ══════════════════════════════════════════════════════════════ */ /* Surfaces (ascending elevation) */ --bg: #0B0B14; --bg-elev: #11111C; --surface: #14141F; --surface-2: #1C1C2B; --surface-3: #25253A; /* Borders (subtle → strong → brand) */ --border: rgba(255, 255, 255, 0.06); --border-soft: rgba(255, 255, 255, 0.04); --border-strong: rgba(255, 255, 255, 0.12); --border-brand: rgba(137, 96, 199, 0.32); /* Text hierarchy */ --text: #F5F5FA; --text-soft: #A8A8BD; --text-muted: #7B7B92; --text-faint: #4A4A5F; /* Brand tints (low-opacity overlays) */ --brand-tint: rgba(137, 96, 199, 0.14); --brand-faint: rgba(137, 96, 199, 0.06); --brand-glow: rgba(137, 96, 199, 0.35); /* Shadows (depth scale) */ --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.30); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50); --shadow-brand: 0 8px 24px rgba(137, 96, 199, 0.30); /* Navbar specific */ --nav-bg: rgba(17, 17, 28, 0.65); --nav-bg-scroll: rgba(11, 11, 20, 0.85); --nav-blur: blur(20px) saturate(180%); /* Hero mesh gradients (decorative) */ --hero-mesh: radial-gradient(ellipse 80% 60% at 85% 0%, rgba(137, 96, 199, 0.22), transparent 60%), radial-gradient(ellipse 60% 40% at 15% 50%, rgba(167, 139, 219, 0.12), transparent 65%), radial-gradient(ellipse 50% 60% at 50% 100%, rgba(107, 71, 168, 0.18), transparent 70%); --hero-grid: rgba(137, 96, 199, 0.05); /* ══════════════════════════════════════════════════════════════ 11. SEMANTIC TINTS (Wolf variant) ══════════════════════════════════════════════════════════════ */ --success-tint: rgba(22, 163, 74, 0.15); --warn-tint: rgba(217, 119, 6, 0.15); --danger-tint: rgba(220, 38, 38, 0.15); --info-tint: rgba(37, 99, 235, 0.15); --gold-tint: rgba(245, 182, 66, 0.12); /* ══════════════════════════════════════════════════════════════ 12. TRANSITIONS ══════════════════════════════════════════════════════════════ */ --t-fast: 0.15s ease; --t-base: 0.25s ease; --t-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* ═══ FROM: _legacy-aliases.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/_legacy-aliases.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf — Legacy Token Aliases (M0.3.A — 2026-05-30) * ═══════════════════════════════════════════════════════════════════════════ * * ⚠️ DEPRECATED — TEMPORARY MIGRATION BRIDGE ⚠️ * * الملف ده موجود **مؤقتًا** عشان الـ CSS الـ legacy (wolf-home.css, * wolf-blog.css, wolf-misc.css, إلخ) يفضل شغّال بصريًا أثناء الـ migration. * * كل alias هنا بيـ map token قديم (--wolf-*) للجديد المختصر (--brand, --bg). * الـ legacy CSS بيستخدم الأسماء القديمة → بيـ resolve للقيم الجديدة تلقائي. * * Lifecycle: * • M0.3.A → الملف اتعمل (دلوقتي) * • M2-M4 → الصفحات بتتـ migrate تدريجيًا للـ tokens الجديدة * • M6 → الملف ده يتحذف بالكامل (آخر cleanup) * * ⚠️ ممنوع استخدام الـ aliases دي في أي كود **جديد**. الكود الجديد يستخدم * الـ tokens المختصرة مباشرة من _variables.css. * * Loaded after _variables.css (لأنه بيعتمد على الـ tokens الجديدة). * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ══════════════════════════════════════════════════════════════ BRAND aliases ══════════════════════════════════════════════════════════════ */ --wolf-primary: var(--brand); /* @deprecated → --brand */ --wolf-primary-dark: var(--brand-deep); /* @deprecated → --brand-deep */ --wolf-primary-light: var(--brand-soft); /* @deprecated → --brand-soft */ --wolf-primary-glow: var(--brand-glow); /* @deprecated → --brand-glow */ /* Old non-prefixed accent (used in wolf-home.css, wolf-blog.css) */ --accent: var(--brand); /* @deprecated → --brand */ --accent-glow: var(--brand-glow); /* @deprecated → --brand-glow */ /* ══════════════════════════════════════════════════════════════ SURFACE aliases ══════════════════════════════════════════════════════════════ */ --wolf-bg: var(--bg); /* @deprecated → --bg */ --wolf-bg-alt: var(--bg-elev); /* @deprecated → --bg-elev */ --wolf-surface: var(--surface); /* @deprecated → --surface */ --wolf-surface2: var(--surface-2); /* @deprecated → --surface-2 */ /* Non-prefixed surface aliases (used in subscription_details, checkout) */ --surface2: var(--surface-2); /* @deprecated → --surface-2 */ --bg-elev_legacy: var(--bg-elev); /* placeholder — not actually used */ /* ══════════════════════════════════════════════════════════════ BORDER aliases ══════════════════════════════════════════════════════════════ */ --wolf-border: var(--border); /* @deprecated → --border */ --wolf-border2: var(--border-soft); /* @deprecated → --border-soft */ --wolf-border-strong: var(--border-strong); /* @deprecated → --border-strong */ --border2: var(--border-soft); /* @deprecated → --border-soft */ /* ══════════════════════════════════════════════════════════════ TEXT aliases ══════════════════════════════════════════════════════════════ */ --wolf-text: var(--text); /* @deprecated → --text */ --wolf-sub: var(--text-soft); /* @deprecated → --text-soft */ --wolf-muted: var(--text-muted); /* @deprecated → --text-muted */ --muted: var(--text-muted); /* @deprecated → --text-muted */ --sub: var(--text-soft); /* @deprecated → --text-soft */ /* ══════════════════════════════════════════════════════════════ SEMANTIC aliases ══════════════════════════════════════════════════════════════ */ --wolf-red: var(--danger); /* @deprecated → --danger */ --wolf-green: var(--success); /* @deprecated → --success */ --wolf-gold: var(--gold); /* same name kept */ --wolf-blue: var(--info); /* @deprecated → --info */ --red: var(--danger); /* @deprecated → --danger */ --green: var(--success); /* @deprecated → --success */ --blue: var(--info); /* @deprecated → --info */ --red-hover: #e01535; /* @deprecated — kept literal */ --red-glow: rgba(220, 38, 38, 0.15); /* @deprecated → use --danger-tint */ --blue-glow: rgba(37, 99, 235, 0.12); /* @deprecated → use --info-tint */ --green-glow: rgba(22, 163, 74, 0.12); /* @deprecated → use --success-tint */ --whatsapp: #57AE4D; /* @deprecated — kept literal (specific color) */ /* ══════════════════════════════════════════════════════════════ RADIUS aliases الـ scale القديم كان مختلف — نـ map للأقرب ══════════════════════════════════════════════════════════════ */ --wolf-radius: var(--r-lg); /* @deprecated → --r-lg (was 16px ~14px) */ --wolf-radius-sm: var(--r-md); /* @deprecated → --r-md (was 10px) */ --wolf-radius-md: var(--r-md); /* @deprecated → --r-md (was 12px ~10px) */ --wolf-radius-lg: var(--r-xl); /* @deprecated → --r-xl (was 18px ~20px) */ --wolf-radius-xs: var(--r-xs); /* @deprecated → --r-xs */ --wolf-radius-pill: var(--r-pill); /* @deprecated → --r-pill */ /* ══════════════════════════════════════════════════════════════ SHADOW aliases ══════════════════════════════════════════════════════════════ */ --wolf-shadow-sm: var(--shadow-sm); /* @deprecated → --shadow-sm */ --wolf-shadow-md: var(--shadow-md); /* @deprecated → --shadow-md */ --wolf-shadow-lg: var(--shadow-lg); /* @deprecated → --shadow-lg */ --wolf-shadow-glow: var(--shadow-brand); /* @deprecated → --shadow-brand */ /* ══════════════════════════════════════════════════════════════ TRANSITION aliases ══════════════════════════════════════════════════════════════ */ --wolf-transition-fast: var(--t-fast); /* @deprecated → --t-fast */ --wolf-transition-base: var(--t-base); /* @deprecated → --t-base */ --wolf-transition-smooth: var(--t-smooth); /* @deprecated → --t-smooth */ /* ══════════════════════════════════════════════════════════════ SPACING aliases الـ scale القديم: xs=8 sm=16 md=24 lg=32 xl=48 2xl=64 3xl=96 ══════════════════════════════════════════════════════════════ */ --wolf-space-xs: var(--sp-2); /* @deprecated → --sp-2 (8px) */ --wolf-space-sm: var(--sp-4); /* @deprecated → --sp-4 (16px) */ --wolf-space-md: var(--sp-6); /* @deprecated → --sp-6 (24px) */ --wolf-space-lg: var(--sp-8); /* @deprecated → --sp-8 (32px) */ --wolf-space-xl: var(--sp-12); /* @deprecated → --sp-12 (48px) */ --wolf-space-2xl: var(--sp-16); /* @deprecated → --sp-16 (64px) */ --wolf-space-3xl: var(--sp-24); /* @deprecated → --sp-24 (96px) */ /* ══════════════════════════════════════════════════════════════ LAYOUT aliases ══════════════════════════════════════════════════════════════ */ --wolf-container-max: var(--container-max); /* @deprecated */ --wolf-container-narrow: 800px; /* @deprecated — kept literal */ --wolf-section-padding-y: var(--section-py); /* @deprecated → --section-py */ --wolf-section-padding-x: var(--sp-4); /* @deprecated → --sp-4 */ --wolf-hero-min-height: 600px; /* @deprecated — kept literal */ --wolf-hero-padding-y: var(--sp-24); /* @deprecated → --sp-24 */ /* ══════════════════════════════════════════════════════════════ TYPOGRAPHY aliases ══════════════════════════════════════════════════════════════ */ --wolf-font-body: var(--font-body); /* @deprecated → --font-body */ --wolf-font-hero: clamp(2.2rem, 5vw, 3.8rem); /* @deprecated — kept literal */ --wolf-font-h2: clamp(1.6rem, 3vw, 2.2rem); /* @deprecated — kept literal */ --wolf-font-h3: 1.5rem; /* @deprecated — kept literal */ --wolf-font-md: 1rem; /* @deprecated — kept literal */ --wolf-font-sm: 0.875rem; /* @deprecated — kept literal */ --wolf-font-xs: 0.75rem; /* @deprecated — kept literal */ --wolf-line-tight: 1.2; /* @deprecated — kept literal */ --wolf-line-base: 1.65; /* @deprecated — adjusted to new base */ --wolf-line-loose: 1.9; /* @deprecated — kept literal */ --wolf-weight-bold: 700; /* @deprecated — kept literal */ --wolf-weight-black: 900; /* @deprecated — kept literal */ } /* ══════════════════════════════════════════════════════════════════════ LEGACY Z-INDEX aliases — الـ scale القديم (M5.8) كان مختلف ══════════════════════════════════════════════════════════════════════ */ :root { /* Page structure */ --z-sticky: 100; --z-sidebar-overlay: 150; --z-sidebar: 200; --z-sidebar-toggle: 300; /* Navigation (mapped to new system) */ --z-nav-dropdown: calc(var(--z-nav) + 10); --z-nav-drawer: calc(var(--z-nav) + 20); /* Modals + Notifications (kept distinct from new --z-modal) */ --z-modal-backdrop: var(--z-modal); --z-confirm: calc(var(--z-toast) + 10); --z-debug: var(--z-system); --z-system-toast: calc(var(--z-system) + 100); } /* ══════════════════════════════════════════════════════════════════════ LEGACY ACCENT CLASSES (subscription_details, checkout) الـ class بتغير قيمة --accent مؤقتًا لـ context-specific colors ══════════════════════════════════════════════════════════════════════ */ .accent-red { --accent: var(--danger); --accent-glow: rgba(220, 38, 38, 0.12); } .accent-blue { --accent: var(--info); --accent-glow: rgba(37, 99, 235, 0.12); } /* ═══ FROM: _base.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/_base.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf — Reset + Base + Typography (M0.3.A — 2026-05-30) * ═══════════════════════════════════════════════════════════════════════════ * * Modern reset + typography baseline. مستخرج من التصميم الجديد. * Loaded after _variables.css في الـ bundle. * * ⚠️ مفيش utility classes هنا — دي في _utilities.css * ⚠️ مفيش component classes هنا — دي في navbar.css/footer.css/إلخ * ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ RESET — Modern minimal reset ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* ══════════════════════════════════════════════════════════════════════ HTML + BODY — Base typography + smooth scroll ══════════════════════════════════════════════════════════════════════ */ html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); } body { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } /* ══════════════════════════════════════════════════════════════════════ TYPOGRAPHY — Headings + links كل الـ headings بـ display font (Cairo) + black weight + tight tracking ══════════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 900; line-height: 1.2; letter-spacing: -0.5px; } a { color: inherit; text-decoration: none; } /* ══════════════════════════════════════════════════════════════════════ FORM ELEMENTS — Inherit font + reset native styles ══════════════════════════════════════════════════════════════════════ */ button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } /* ══════════════════════════════════════════════════════════════════════ MEDIA — Block-level by default, responsive ══════════════════════════════════════════════════════════════════════ */ img, svg { display: block; max-width: 100%; } img { height: auto; } /* ══════════════════════════════════════════════════════════════════════ LISTS — Remove default bullets (utility classes restore where needed) ══════════════════════════════════════════════════════════════════════ */ ul, ol { list-style: none; } /* ══════════════════════════════════════════════════════════════════════ SELECTION — Brand-colored text selection ══════════════════════════════════════════════════════════════════════ */ ::selection { background: var(--brand); color: #fff; } /* ══════════════════════════════════════════════════════════════════════ FOCUS — Accessible visible focus ring (WCAG 2.1) فقط لو الـ user بيـ navigate بالـ keyboard (مش mouse) ══════════════════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════════════ REDUCED MOTION — احترام إعدادات الـ accessibility ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══ FROM: _utilities.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/_utilities.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf — Utility Classes + Buttons (M0.3.A — 2026-05-30) * ═══════════════════════════════════════════════════════════════════════════ * * الـ utility classes العامة + الـ buttons الأساسية. * * Loaded after _base.css في الـ bundle. * * ⚠️ الـ buttons المتخصصة (.btn-submit, .btn-trial, إلخ) في component CSS * المعنية بكل صفحة — هنا الـ generic .btn فقط. * ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ CONTAINER — Centered wrapper مع max-width ══════════════════════════════════════════════════════════════════════ */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-5); } /* ══════════════════════════════════════════════════════════════════════ ICON — Default SVG icon styling كل svg.icon بـ stroke-based (مش fill) — مرن مع currentColor ══════════════════════════════════════════════════════════════════════ */ .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════════ SR-ONLY — Screen reader only (accessibility) النص ظاهر للـ screen readers بس مخفي بصريًا ══════════════════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ══════════════════════════════════════════════════════════════════════ BUTTON BASE — .btn inline-flex + gap + pill radius + bold weight ══════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 16px 26px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 800; font-family: inherit; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; border: 1px solid transparent; } .btn .icon { width: 18px; height: 18px; } /* ══════════════════════════════════════════════════════════════════════ BUTTON VARIANTS ══════════════════════════════════════════════════════════════════════ */ /* .btn--primary — gradient + glow + shimmer hover */ .btn--primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.20); position: relative; overflow: hidden; } .btn--primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.18), transparent); transform: translateX(-100%); transition: transform 0.5s ease; } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(137, 96, 199, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.20); } .btn--primary:hover::before { transform: translateX(100%); } /* .btn--ghost — outlined على dark surface */ .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand-soft); } /* ═══ FROM: navbar.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/navbar.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf — Navbar (M0.3.B — 2026-05-30) * ═══════════════════════════════════════════════════════════════════════════ * * Rewrite كامل بالـ design system الجديد: * • Floating pill nav (rounded, blurred, scroll-shrink) * • BEM-style classes (.nav__*) * • Indicator bar تتحرك تحت الـ active link * • Notification dropdown + user dropdown (animated) * • Mobile drawer (slide-in من اليمين) * * Breakpoints (M0.1): * • bp-xl (1024px): desktop links → mobile drawer * • bp-sm (480px): smaller bell/burger sizes * * ⚠️ ملاحظة: شيلنا الـ tier 1100px (intermediate) — وحّدنا على 1024px فقط. * الـ tier القديم كان "shrink everything to fit"؛ بدلًا من ده، الـ nav * الجديدة تكفي بـ tier واحد (desktop full وإلا mobile drawer). * * Loaded by: wolf-foundation.css bundle (always loaded) * Dependencies: _variables.css, _base.css, _utilities.css * ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ NAV WRAP — Floating container (fixed top, transparent pointer-events) ══════════════════════════════════════════════════════════════════════ */ .nav-wrap { position: fixed; top: var(--sp-4); right: 0; left: 0; z-index: var(--z-nav); padding: 0 var(--sp-5); pointer-events: none; /* عشان الـ wrap ميـ blockش clicks; الـ nav بيـ enable pointer events */ transition: top 0.3s ease; } .nav-wrap.is-scrolled { top: var(--sp-3); /* shrink لما الـ user يـ scroll */ } /* ══════════════════════════════════════════════════════════════════════ NAV — The pill itself ══════════════════════════════════════════════════════════════════════ */ .nav { pointer-events: auto; max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; gap: var(--sp-4); padding: 8px var(--sp-4) 8px 8px; background: var(--nav-bg); backdrop-filter: var(--nav-blur); -webkit-backdrop-filter: var(--nav-blur); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--shadow-md); transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-wrap.is-scrolled .nav { background: var(--nav-bg-scroll); padding-top: 6px; padding-bottom: 6px; } /* ══════════════════════════════════════════════════════════════════════ NAV BRAND — Logo + name ══════════════════════════════════════════════════════════════════════ */ .nav__brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } .nav__brand-logo { width: 40px; height: 40px; border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; } .nav__brand-logo svg { width: 100%; height: 100%; display: block; } /* Fallback mark (icon-only) — used if logo image fails to load */ .nav__brand-mark { width: 36px; height: 36px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav__brand-mark .icon { width: 19px; height: 19px; color: #fff; stroke-width: 2.4; } .nav__brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1; } .nav__brand-name { font-family: var(--font-display); font-size: 15.5px; font-weight: 900; color: var(--text); letter-spacing: -0.2px; } .nav__brand-name span { color: var(--brand-soft); } .nav__brand-tag { font-size: 10.5px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.3px; } /* ══════════════════════════════════════════════════════════════════════ NAV LINKS — Center, with sliding indicator ══════════════════════════════════════════════════════════════════════ */ .nav__links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; position: relative; } .nav__link { position: relative; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--text-soft); border-radius: var(--r-pill); transition: color 0.2s ease; z-index: 1; white-space: nowrap; } .nav__link:hover { color: var(--text); } .nav__link.is-active { color: #fff; } /* The indicator pill that slides under the active link */ .nav__indicator { position: absolute; top: 50%; transform: translateY(-50%); height: 32px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); border-radius: var(--r-pill); box-shadow: 0 4px 12px rgba(137, 96, 199, 0.30); z-index: 0; opacity: 0; /* hidden لحد ما JS يـ position يومه */ transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } .nav__indicator.is-ready { opacity: 1; } /* ══════════════════════════════════════════════════════════════════════ NAV ACTIONS — Bell + Login/User ══════════════════════════════════════════════════════════════════════ */ .nav__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } /* ── Notification Bell ────────────────────────────── */ .nav__bell-wrap { position: relative; } .nav__bell { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-soft); transition: all 0.2s ease; } .nav__bell:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); } .nav__bell .icon { width: 16px; height: 16px; } .nav__bell-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-elev); } /* ── Login Button (guest) ──────────────────────────── */ .nav__login { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 10px 18px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; font-size: 13px; font-weight: 800; border: none; cursor: pointer; transition: all 0.2s ease; box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.20); } .nav__login:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(137, 96, 199, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .nav__login:active { transform: translateY(0); } .nav__login .icon { width: 14px; height: 14px; } /* ── User Button (authenticated) ───────────────────── */ .nav__user-wrap { position: relative; } .nav__user { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 10px 4px 4px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); transition: all 0.2s ease; cursor: pointer; } .nav__user:hover { background: var(--surface-3); border-color: var(--border-strong); } .nav__user-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav__user-name { font-size: 12.5px; font-weight: 700; color: var(--text); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav__user .icon { width: 12px; height: 12px; color: var(--text-muted); } /* ── Burger Button (mobile only) ───────────────────── */ .nav__burger { display: none; /* hidden by default, shown via mobile @media */ width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); align-items: center; justify-content: center; color: var(--text); flex-shrink: 0; } .nav__burger .icon { width: 16px; height: 16px; } /* ══════════════════════════════════════════════════════════════════════ AUTH STATE TOGGLE data-auth="guest" + data-show="auth" → hidden data-auth="auth" + data-show="guest" → hidden ══════════════════════════════════════════════════════════════════════ */ [data-auth="guest"] [data-show="auth"], [data-auth="auth"] [data-show="guest"] { display: none !important; } /* ══════════════════════════════════════════════════════════════════════ NOTIFICATION DROPDOWN ══════════════════════════════════════════════════════════════════════ */ .notif-dropdown { position: absolute; top: calc(100% + 12px); left: 0; width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s ease; overflow: hidden; z-index: var(--z-dropdown); } .notif-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .notif-dropdown__head { padding: var(--sp-4); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); } .notif-dropdown__title { font-size: 14px; font-weight: 800; color: var(--text); } .notif-dropdown__clear { font-size: 12px; color: var(--brand-soft); font-weight: 700; } .notif-list { max-height: 320px; overflow-y: auto; } .notif-item { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-soft); display: flex; gap: var(--sp-3); align-items: flex-start; transition: background 0.2s ease; } .notif-item:hover { background: var(--surface-2); } .notif-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-top: 6px; flex-shrink: 0; } .notif-item.is-read .notif-item__dot { background: var(--text-faint); } .notif-item__body { flex: 1; min-width: 0; } .notif-item__title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .notif-item__msg { font-size: 12px; color: var(--text-soft); line-height: 1.5; } .notif-item__time { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); } .notif-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-muted); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .notif-empty .icon { width: 28px; height: 28px; color: var(--text-faint); } .notif-dropdown__foot { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); background: var(--bg-elev); font-size: 12.5px; font-weight: 700; color: var(--brand-soft); transition: background 0.2s ease; } .notif-dropdown__foot:hover { background: var(--surface-2); } .notif-dropdown__foot .icon { width: 14px; height: 14px; transform: rotate(180deg); /* RTL: pointer faces forward */ } /* ══════════════════════════════════════════════════════════════════════ USER DROPDOWN ══════════════════════════════════════════════════════════════════════ */ .user-dropdown { position: absolute; top: calc(100% + 12px); left: 0; width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s ease; overflow: hidden; z-index: var(--z-dropdown); } .user-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .user-dropdown__head { padding: var(--sp-4); border-bottom: 1px solid var(--border); } .user-dropdown__name { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 2px; } .user-dropdown__phone { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); direction: ltr; text-align: right; margin-top: 2px; } .user-dropdown__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: var(--text-soft); font-size: 13px; font-weight: 700; transition: background 0.2s ease, color 0.2s ease; } .user-dropdown__item:hover { background: var(--surface-2); color: var(--text); } .user-dropdown__item .icon { width: 16px; height: 16px; color: var(--brand-soft); } .user-dropdown__item.is-danger { color: var(--danger); } .user-dropdown__item.is-danger:hover { background: var(--danger-tint); color: var(--danger); } .user-dropdown__item.is-danger .icon { color: var(--danger); } .user-dropdown__divider { height: 1px; background: var(--border); margin: var(--sp-1) 0; } /* ══════════════════════════════════════════════════════════════════════ RESPONSIVE — Mobile drawer ══════════════════════════════════════════════════════════════════════ */ /* ── Mobile layout: ≤1024px (bp-xl) ─── */ @media (max-width: 1024px) { .nav__links { display: none; } .nav__indicator { display: none; } .nav__brand-tag { display: none; } /* RTL mobile order: brand right, actions center, burger far-left In RTL flex: lower order = right side, higher order = left side. */ .nav__brand { order: 1; padding: 0 var(--sp-1); } .nav__actions { order: 2; margin-right: auto; } .nav__burger { order: 3; display: flex; } .nav { padding: 6px 8px; gap: var(--sp-2); } .nav__login { padding: 8px 14px; font-size: 12px; } .nav__bell { width: 36px; height: 36px; } .nav-wrap { top: var(--sp-3); padding: 0 var(--sp-3); } } /* ── Small phones: ≤480px (bp-sm) ─── */ @media (max-width: 480px) { .nav__brand-name { font-size: 14px; } .nav__brand-logo { width: 36px; height: 36px; } .nav__brand-mark { width: 32px; height: 32px; } .nav__brand-mark .icon { width: 17px; height: 17px; } .nav__login { padding: 7px 12px; font-size: 11.5px; } .nav__login .icon { width: 13px; height: 13px; } .nav__bell { width: 34px; height: 34px; } .nav__bell .icon { width: 14px; height: 14px; } .nav__burger { width: 34px; height: 34px; } .nav__burger .icon { width: 14px; height: 14px; } .nav__user-name { display: none; } .nav__user { padding: 4px; } .nav__user-avatar { width: 26px; height: 26px; font-size: 11px; } .nav__user .icon { display: none; } .nav__actions { gap: 6px; } .nav { gap: 6px; padding: 5px 6px; } .notif-dropdown { width: calc(100vw - var(--sp-6)); right: auto; left: 0; } .user-dropdown { width: calc(100vw - var(--sp-6)); right: auto; left: 0; } } /* ══════════════════════════════════════════════════════════════════════ NAV DRAWER — Mobile slide-in menu (≤1024px) ══════════════════════════════════════════════════════════════════════ */ .nav-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; z-index: 300; } .nav-drawer-overlay.is-open { opacity: 1; visibility: visible; } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; max-width: 85vw; background: var(--bg-elev); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 350; display: flex; flex-direction: column; } .nav-drawer.is-open { transform: translateX(0); } .nav-drawer__head { padding: var(--sp-5); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); } .nav-drawer__brand { display: flex; align-items: center; gap: var(--sp-3); } .nav-drawer__close { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-soft); cursor: pointer; border: none; } .nav-drawer__close:hover { background: var(--surface-3); color: var(--text); } .nav-drawer__links { padding: var(--sp-4); flex: 1; overflow-y: auto; } .nav-drawer__link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); color: var(--text-soft); font-size: 14.5px; font-weight: 700; margin-bottom: var(--sp-1); transition: all 0.15s ease; } .nav-drawer__link:hover, .nav-drawer__link.is-active { background: var(--brand-faint); color: var(--text); } .nav-drawer__link .icon { width: 18px; height: 18px; color: var(--brand-soft); } /* ═══ FROM: footer.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/footer.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf — Footer (M0.3.B.2 refinement — 2026-05-30) * ═══════════════════════════════════════════════════════════════════════════ * * Minimal single-row footer with payment trust signals: * • Top row: Brand + legal links + social icons (.ftr-min) * • Bottom row: Copyright + payment icons (.ftr-bottom) * * M0.3.B.2 changes: * 1. .ftr-brand__mark بقى placeholder فاضي للـ SVG اللي هييجي M0.4 * (احتفظنا بالـ dimensions عشان متعمل layout shift) * 2. الـ payment icons انتقلت من .ftr-bottom (مكدّسة مع copy) إلى * صف منفصل أنيق: .ftr-bottom__copy + .ftr-bottom__pays بـ space-between * * Loaded by: wolf-foundation.css bundle * ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ FTR — Footer container ══════════════════════════════════════════════════════════════════════ */ .ftr { background: var(--bg-elev); border-top: 1px solid var(--border); color: var(--text); position: relative; padding: var(--sp-6) 0 0; } .ftr__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-5); } /* ══════════════════════════════════════════════════════════════════════ FTR BRAND ══════════════════════════════════════════════════════════════════════ */ .ftr-brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; font-family: var(--font-display); } /* Mark = placeholder for SVG i-wolf-mark (M0.4). Empty for now. Dimensions kept to avoid layout shift when the SVG is added. */ .ftr-brand__mark { width: 40px; height: 40px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); display: grid; place-items: center; color: #fff; flex-shrink: 0; box-shadow: 0 4px 12px var(--brand-glow); } .ftr-brand__mark svg { width: 22px; height: 22px; } .ftr-brand__text { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; color: var(--text); } .ftr-brand__text span { color: var(--brand-soft); } /* ══════════════════════════════════════════════════════════════════════ FTR LINKS (legal + nav) ══════════════════════════════════════════════════════════════════════ */ .ftr-link { color: var(--text-soft); text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.2s ease; } .ftr-link:hover { color: var(--brand-soft); } .ftr-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-xs); } .ftr-sep { color: var(--text-muted); margin: 0 4px; font-weight: 700; opacity: 0.5; } /* ══════════════════════════════════════════════════════════════════════ FTR SOCIAL ICONS ══════════════════════════════════════════════════════════════════════ */ .ftr-soc { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); display: inline-grid; place-items: center; color: var(--text-soft); text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .ftr-soc:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-3px); } .ftr-soc:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .ftr-soc svg { width: 18px; height: 18px; } /* ══════════════════════════════════════════════════════════════════════ FTR MIN — Top row: Brand + legal + social Mobile: stacked centered | Desktop (≥768px): row, space-between ══════════════════════════════════════════════════════════════════════ */ .ftr-min { display: flex; flex-direction: column; gap: var(--sp-5); align-items: center; text-align: center; padding-bottom: var(--sp-5); } .ftr-min__legal { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; } .ftr-min__socs { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; } @media (min-width: 768px) { .ftr-min { flex-direction: row; justify-content: space-between; text-align: start; } .ftr-min__legal { flex: 1; justify-content: center; } } /* ══════════════════════════════════════════════════════════════════════ FTR BOTTOM — Copyright + payment icons Mobile: stacked centered | Desktop (≥768px): row, space-between ══════════════════════════════════════════════════════════════════════ */ .ftr-bottom { border-top: 1px solid var(--border); padding: var(--sp-4) 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; } .ftr-bottom__copy { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; } .ftr-bottom__copy strong { color: var(--text-soft); font-weight: 700; } .ftr-bottom__pays { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; justify-content: center; } .ftr-pay { width: 38px; height: 26px; border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-soft); transition: border-color 0.2s ease, color 0.2s ease; } .ftr-pay:hover { border-color: var(--border-strong); color: var(--text); } .ftr-pay svg { width: 22px; height: 16px; } /* Desktop layout: copy on one side, pays on the other */ @media (min-width: 768px) { .ftr-bottom { flex-direction: row; justify-content: space-between; text-align: start; } } /* ══════════════════════════════════════════════════════════════════════ REDUCED MOTION ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .ftr-soc, .ftr-link, .ftr-pay { transition: none !important; } .ftr-soc:hover { transform: none !important; } } /* ═══ FROM: whatsapp-float.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/whatsapp-float.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf — Floating WhatsApp Button (M0.3.B — 2026-05-30) * ═══════════════════════════════════════════════════════════════════════════ * * Story-style floating WhatsApp button: * • Larger icon (34px) * • Lighter, more subtle box-shadow * • Animated online indicator (pulse) * * ⚠️ الـ class names اتغيرت من .wolf-whatsapp إلى .fwa * مطابقة للتصميم الجديد + متّسقة مع باقي naming (.nav, .ftr). * * Loaded by: wolf-foundation.css bundle * ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ FWA — Floating WhatsApp wrapper ══════════════════════════════════════════════════════════════════════ */ .fwa { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: var(--z-fab); } @media (max-width: 480px) { .fwa { bottom: var(--sp-4); right: var(--sp-4); } } /* ══════════════════════════════════════════════════════════════════════ FWA BUTTON — Circular WhatsApp button ══════════════════════════════════════════════════════════════════════ */ .fwa-btn { position: relative; width: 64px; height: 64px; border-radius: 50%; background: #25D366; /* WhatsApp brand green */ color: #fff; display: grid; place-items: center; text-decoration: none; /* Lighter, more subtle shadow */ box-shadow: 0 4px 12px rgba(37, 211, 102, 0.22), 0 8px 22px rgba(37, 211, 102, 0.14); transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; border: 0; cursor: pointer; font-family: inherit; overflow: visible; } .fwa-btn:hover { background: #1FB855; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(37, 211, 102, 0.30), 0 14px 32px rgba(37, 211, 102, 0.18); } .fwa-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } /* ══════════════════════════════════════════════════════════════════════ FWA ICON — 34px (larger than typical 28px) ══════════════════════════════════════════════════════════════════════ */ .fwa-btn__icon { width: 34px; height: 34px; fill: currentColor; } /* ══════════════════════════════════════════════════════════════════════ FWA ONLINE INDICATOR — Pulse dot on the button ══════════════════════════════════════════════════════════════════════ */ .fwa-btn__online { position: absolute; bottom: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: #4CD964; border: 2.5px solid var(--bg); box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.55); animation: fwa-online-pulse 2s ease-out infinite; } @keyframes fwa-online-pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(76, 217, 100, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 217, 100, 0); } } /* ══════════════════════════════════════════════════════════════════════ REDUCED MOTION ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .fwa-btn { transition: none !important; } .fwa-btn:hover { transform: none !important; } .fwa-btn__online { animation: none !important; } } /* ═══ FROM: buttons.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/buttons.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf Core — Buttons & Section Headers * ═══════════════════════════════════════════════════════════════════════════ * Day 14 Phase 2 — Extracted from wolf-core.css (COMPONENTS) * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Primary & Ghost Buttons ──────────────────────────────── */ /* ── Primary & Ghost Buttons ────────────────────────── */ .btn-wolf-primary { display:inline-flex; align-items:center; gap:10px; padding:14px 32px; border-radius:12px; background:var(--wolf-primary); color:#fff; font-family:'Tajawal'; font-size:16px; font-weight:700; text-decoration:none; border:none; cursor:pointer; transition:all 0.25s; } .btn-wolf-primary:hover { background:var(--wolf-primary-dark); transform:translateY(-2px); box-shadow:0 8px 30px var(--wolf-primary-glow); color:#fff; } .btn-wolf-ghost { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:12px; border:1px solid var(--wolf-border); background:transparent; color:var(--wolf-sub); font-family:'Tajawal'; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer; transition:all 0.2s; } .btn-wolf-ghost:hover { border-color:var(--wolf-primary); color:var(--wolf-primary); } /* ── Section Headers ──────────────────────────────────────── */ /* ── Section Headers ────────────────────────────────── */ .wolf-section { padding:90px 0; } .wolf-section-alt { background:linear-gradient(180deg, var(--wolf-surface) 0%, rgba(124,77,255,0.03) 50%, var(--wolf-surface) 100%); } .section-header { text-align:center !important; margin-bottom:50px; direction:rtl; } .section-tag { display:inline-block; background:var(--wolf-primary-glow); color:var(--wolf-primary-light); font-size:12px; font-weight:900; padding:5px 16px; border-radius:50px; margin-bottom:14px; letter-spacing:1px; } .section-title { font-size:clamp(1.6rem, 3vw, 2.4rem); font-weight:900; margin-bottom:12px; text-align:center !important; } .section-desc { font-size:15px; color:var(--wolf-sub); max-width:500px; margin:0 auto; text-align:center !important; } /* ── Copy Button ──────────────────────────────────────────── */ /* ── Copy Button ────────────────────────────────────── */ .copy-btn { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; font-family: 'Tajawal', sans-serif; font-weight: 700; transition: background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .copy-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .copy-btn.copied { background: var(--green); border-color: var(--green); color: #fff; } /* ── Back Button ──────────────────────────────────────────── */ /* ── Back Button ────────────────────────────────────── */ /* ── Section Label ────────────────────────────────────────── */ /* ── Section Label (shared: checkout, referrals) ────── */ .section-label { font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; margin-top:32px; display:flex; align-items:center; gap:8px; } .section-label::after { content:''; flex:1; height:1px; background:var(--border); } /* ── Back Link ────────────────────────────────────────────── */ /* ── Back Link ──────────────────────────────────────── */ .back-link { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); text-decoration: none; } .back-link:hover { color: var(--text); } /* ═══ FROM: modal-forms.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/modal-forms.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf — Modals + Forms (M0.3.C v2 — 2026-05-30) * ═══════════════════════════════════════════════════════════════════════════ * * Architectural rewrite — مطابق للتصميم 100%: * • Pattern: .modal-overlay > .modal > [.modal-view] * • شيلنا كل الـ Bootstrap modal compat — استخدمنا modal manager جديد * • صفر bridges لـ legacy IDs — clean slate * * Components شاملة: * • Overlay + Modal card (centered, scale animation) * • Multi-view stepper (.modal-view.is-active) * • Head: close + back + progress + icon + title + sub * • Body: form-group + form-label + form-error * • Inputs: .input-wrap + .input + variants (--name/phone/password) * • Country selector + flag * • Password strength meter (.pw-strength) * • OTP inputs (6 separate digits) * • OTP info + countdown + resend * • Checkboxes (custom styled) * • btn-submit (gradient + loading spinner) * • Modal footer (switch links) * • WhatsApp hint box * * Modal manager API (assets/js/lib/modal.js): * HTML: * JS: modal.open('authModal') / modal.close('authModal') * modal.switchView('authModal', 'login') * * Loaded by: wolf-foundation.css bundle * ═══════════════════════════════════════════════════════════════════════════ */ /* Body scroll lock when any modal open */ body.has-open-modal { overflow: hidden; } .modal-overlay { position: fixed; inset: 0; background: rgba(5,5,11,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: var(--z-modal); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); overflow-y: auto; } .modal-overlay.is-open { opacity: 1; visibility: visible; } .modal { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; max-height: calc(100vh - var(--sp-8)); display: flex; flex-direction: column; transform: scale(0.95) translateY(20px); opacity: 0; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; overflow: hidden; } .modal-overlay.is-open .modal { transform: scale(1) translateY(0); opacity: 1; } /* Multi-view containers */ .modal-view { display: none; flex-direction: column; max-height: 100%; } .modal-view.is-active { display: flex; } /* Header */ .modal__head { padding: var(--sp-6) var(--sp-6) var(--sp-2); position: relative; text-align: center; } .modal__close { position: absolute; top: var(--sp-4); left: var(--sp-4); width: 32px; height: 32px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .modal__close:hover { background: var(--surface-3); color: var(--text); } .modal__close .icon { width: 14px; height: 14px; } .modal__back { position: absolute; top: var(--sp-4); right: var(--sp-4); display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; color: var(--text-soft); border-radius: var(--r-md); transition: all 0.15s ease; } .modal__back:hover { background: var(--surface-2); color: var(--text); } .modal__back .icon { width: 13px; height: 13px; } /* Progress segments (multi-step) */ .modal__progress { display: flex; gap: 5px; margin: 0 auto var(--sp-5); max-width: 160px; padding-top: var(--sp-4); } .modal__progress-seg { flex: 1; height: 3px; border-radius: 2px; background: var(--border); transition: background 0.3s ease; } .modal__progress-seg.is-done { background: var(--brand); } .modal__progress-seg.is-active { background: var(--brand); box-shadow: 0 0 8px var(--brand-glow); } /* Icon */ .modal__icon { width: 52px; height: 52px; margin: 0 auto var(--sp-4); border-radius: var(--r-lg); background: var(--brand-tint); border: 1px solid var(--border-brand); display: flex; align-items: center; justify-content: center; color: var(--brand-soft); } .modal__icon .icon { width: 22px; height: 22px; stroke-width: 2.2; } .modal__title { font-size: 22px; font-weight: 900; color: var(--text); margin-bottom: 6px; letter-spacing: -0.4px; line-height: 1.25; } .modal__sub { font-size: 13px; color: var(--text-soft); line-height: 1.6; max-width: 320px; margin: 0 auto; } .modal__sub strong { color: var(--text); font-weight: 800; } .modal__sub-phone { display: inline-block; direction: ltr; font-family: var(--font-mono); font-weight: 800; color: var(--text); margin-top: 4px; } /* Body */ .modal__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); overflow-y: auto; flex: 1; } /* Form */ .form-group { margin-bottom: var(--sp-4); } .form-label { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: 12px; font-weight: 700; color: var(--text-soft); margin-bottom: 7px; } .form-label-hint { font-size: 10.5px; color: var(--text-muted); font-weight: 500; } .input-wrap { position: relative; height: 46px; display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; overflow: hidden; } .input-wrap:focus-within { border-color: var(--brand); background: var(--brand-faint); box-shadow: 0 0 0 3px var(--brand-glow); } .input-wrap.has-error { border-color: var(--danger); background: var(--danger-tint); } .input-wrap.has-error:focus-within { box-shadow: 0 0 0 3px rgba(220,38,38,0.20); } .input { flex: 1; background: none; border: none; outline: none; padding: 0 var(--sp-4); font-size: 14px; font-weight: 600; color: var(--text); min-width: 0; } .input::placeholder { color: var(--text-muted); font-weight: 500; } /* Name input (RTL) */ .input--name { padding-right: var(--sp-4); padding-left: 42px; text-align: right; } .input-wrap--name .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .input-wrap--name .input-icon .icon { width: 16px; height: 16px; } .input-wrap--name:focus-within .input-icon { color: var(--brand-soft); } /* Phone input In RTL: DOM order = input first → country second Visual: input on the right, country selector on the LEFT No flex-direction tricks needed — the natural RTL flow handles it. */ .input--phone { direction: ltr; text-align: left; font-family: var(--font-mono); font-size: 14.5px; letter-spacing: 0.4px; padding: 0 var(--sp-4); } .input--phone::placeholder { letter-spacing: 0.4px; font-family: var(--font-mono); } .country-selector { display: flex; align-items: center; gap: 7px; padding: 0 12px; border-right: 1px solid var(--border); background: var(--brand-faint); cursor: pointer; direction: ltr; transition: background 0.2s ease; flex-shrink: 0; } .country-selector:hover { background: var(--brand-tint); } .country-selector .chev { width: 10px; height: 10px; color: var(--text-muted); stroke-width: 2.2; } .country-selector .code { font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: var(--text); letter-spacing: 0.3px; } /* Flag — Saudi Arabia (CSS-painted, professional) */ .flag { width: 22px; height: 16px; border-radius: 2px; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.30); flex-shrink: 0; } .flag--sa { background: #006C35; } .flag--sa::before { /* Saudi calligraphy approximation — a stylized line */ content: ''; position: absolute; top: 36%; left: 18%; right: 18%; height: 1.5px; background: #fff; box-shadow: 0 2.5px 0 #fff; border-radius: 1px; } .flag--sa::after { /* Saudi sword approximation */ content: ''; position: absolute; bottom: 18%; left: 22%; right: 22%; height: 1.5px; background: #fff; border-radius: 1px; } /* Password input The input is LTR text but the wrap stays in natural RTL. The eye toggle is absolutely positioned on the visual LEFT. */ .input--password { direction: ltr; text-align: left; font-family: var(--font-mono); font-size: 16px; letter-spacing: 3px; padding: 0 var(--sp-4); padding-left: 42px; } .input--password::placeholder { letter-spacing: 0; font-family: var(--font-body); font-size: 14px; } .input-toggle-pw { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: none; transition: all 0.15s ease; cursor: pointer; } .input-toggle-pw:hover { background: var(--surface-2); color: var(--text); } .input-toggle-pw .icon { width: 16px; height: 16px; stroke-width: 2; } /* Password strength */ .pw-strength { margin-top: 8px; display: flex; align-items: center; gap: var(--sp-2); } .pw-strength__bars { display: flex; gap: 3px; flex: 1; } .pw-strength__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--border); transition: background 0.25s ease; } .pw-strength.lv-1 .pw-strength__bar:nth-child(-n+1) { background: var(--danger); } .pw-strength.lv-2 .pw-strength__bar:nth-child(-n+2) { background: var(--warn); } .pw-strength.lv-3 .pw-strength__bar:nth-child(-n+3) { background: var(--success); } .pw-strength.lv-4 .pw-strength__bar { background: var(--success); } .pw-strength__label { font-size: 10.5px; font-weight: 800; min-width: 48px; text-align: left; color: var(--text-muted); font-family: var(--font-body); } .pw-strength.lv-1 .pw-strength__label { color: var(--danger); } .pw-strength.lv-2 .pw-strength__label { color: var(--warn); } .pw-strength.lv-3 .pw-strength__label, .pw-strength.lv-4 .pw-strength__label { color: var(--success); } /* Error message */ .form-error { display: none; align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--danger); } .form-error.is-shown { display: flex; } .form-error .icon { width: 12px; height: 12px; } /* Forgot link row */ .form-helper-row { display: flex; justify-content: flex-end; margin-top: -4px; margin-bottom: var(--sp-4); } .forgot-link { font-size: 12px; font-weight: 700; color: var(--brand-soft); padding: 4px 0; } .forgot-link:hover { text-decoration: underline; } /* Checkbox */ .checkbox-wrap { display: flex; align-items: flex-start; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-5); cursor: pointer; user-select: none; } .checkbox { position: relative; width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); flex-shrink: 0; margin-top: 1px; transition: all 0.15s ease; cursor: pointer; appearance: none; -webkit-appearance: none; } .checkbox:checked { background: var(--brand); border-color: var(--brand); } .checkbox:checked::after { content: ''; position: absolute; top: 1px; left: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .checkbox-label { font-size: 12px; color: var(--text-soft); line-height: 1.65; } .checkbox-label a { color: var(--brand-soft); font-weight: 700; text-decoration: none; } .checkbox-label a:hover { text-decoration: underline; } /* Submit button */ .btn-submit { width: 100%; height: 48px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; border: none; border-radius: var(--r-md); font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; position: relative; overflow: hidden; } .btn-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(137,96,199,0.40), inset 0 1px 0 rgba(255,255,255,0.18); } .btn-submit:active { transform: translateY(0); } .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-submit .icon { width: 16px; height: 16px; } .btn-submit.is-loading { color: transparent; pointer-events: none; } .btn-submit.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* WhatsApp accent variant — used on forgot-password "send code via WhatsApp" button. Slightly stronger WA-green border accent + bigger icon for clarity. */ .btn-submit--wa { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); position: relative; } .btn-submit--wa .icon { width: 18px; height: 18px; fill: #25D366; stroke: none; background: rgba(255,255,255,0.95); border-radius: 50%; padding: 3px; } .btn-submit--wa:hover .icon { background: #fff; } /* Footer */ .modal__foot { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border); background: var(--surface); text-align: center; font-size: 12.5px; color: var(--text-soft); } .modal__foot a { color: var(--brand-soft); font-weight: 800; margin-right: 5px; } .modal__foot a:hover { text-decoration: underline; } /* OTP entry */ .otp-row { display: flex; gap: var(--sp-2); direction: ltr; justify-content: center; margin: var(--sp-3) 0 var(--sp-4); } .otp-input { width: 42px; height: 52px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: 22px; font-weight: 900; text-align: center; transition: all 0.2s ease; outline: none; } .otp-input:hover { border-color: var(--border-strong); } .otp-input:focus { border-color: var(--brand); background: var(--brand-faint); box-shadow: 0 0 0 3px var(--brand-glow); } .otp-input.is-filled { border-color: var(--brand-soft); background: var(--brand-faint); } .otp-input.has-error { border-color: var(--danger); background: var(--danger-tint); } /* OTP timer info */ .otp-info { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--brand-faint); border: 1px dashed var(--border-brand); border-radius: var(--r-md); margin-bottom: var(--sp-4); } .otp-info__left { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-soft); font-weight: 700; } .otp-info__left .icon { width: 13px; height: 13px; color: var(--brand-soft); } .otp-info__time { font-family: var(--font-mono); font-size: 13px; font-weight: 900; color: var(--brand-soft); } .otp-info.is-expired { background: var(--danger-tint); border-color: var(--danger); } .otp-info.is-expired .otp-info__left .icon, .otp-info.is-expired .otp-info__time { color: var(--danger); } /* Resend row */ .resend-row { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-top: var(--sp-3); } .resend-row .countdown { color: var(--brand-soft); font-family: var(--font-mono); font-weight: 800; } .resend-row a, .resend-link { color: var(--brand-soft); font-weight: 800; cursor: pointer; } .resend-link:hover { text-decoration: underline; } .resend-link:disabled { color: var(--text-muted); cursor: not-allowed; pointer-events: none; } /* Modal responsive */ @media (max-width: 480px) { .modal { max-width: 100%; border-radius: var(--r-lg); max-height: calc(100vh - var(--sp-4)); } .modal__head { padding: var(--sp-5) var(--sp-5) 0; } .modal__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); } .modal__title { font-size: 20px; } .otp-input { width: 38px; height: 48px; font-size: 18px; } } /* ═══════════════════════════════════════════════════════════════════════ Wolf-specific Additions (extensions على الـ design system) ─────────────────────────────────────────────────────────────────────── الـ classes دي مش في الـ design CSS الأصلي بس مطلوبة لـ Wolf: • input-wrap--password — variant للـ inputs اللي فيها eye toggle • btn-modal-back — زر "رجوع" في الـ OTP views • otp-countdown — countdown timer single-element (auth.js يـ populate) • whatsapp-hint — info box في الـ OTP views • icon-brand — utility class للأيقونات الـ branded (color: brand) ═══════════════════════════════════════════════════════════════════════ */ /* ── input-wrap--password — same shape as base input-wrap ─── */ /* الـ input-wrap الـ base كافي للـ password — مفيش variant-specific styling إلا padding-left للـ eye toggle button. الـ .input-toggle-pw هي اللي بتعمل الـ positioning تلقائيًا (position: absolute). الـ class موجود في الـ HTML للـ password toggle JS يلاقيه عبر .closest(). */ /* ── btn-modal-back — "رجوع" button في الـ OTP views ─── */ .btn-modal-back { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 12px 20px; margin-top: var(--sp-3); border-radius: var(--r-pill); background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 700; font-family: inherit; border: 1px solid var(--border); cursor: pointer; transition: all 0.2s ease; } .btn-modal-back:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .btn-modal-back .icon { width: 14px; height: 14px; } /* ── otp-countdown — countdown timer (single element, populated by auth.js) ─── */ .otp-countdown { text-align: center; margin: var(--sp-3) 0; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-soft); padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); direction: ltr; } .otp-countdown.is-expired { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); } /* ── whatsapp-hint — info box في OTP views ─── */ .whatsapp-hint { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: rgba(37, 211, 102, 0.10); border: 1px solid rgba(37, 211, 102, 0.30); border-radius: var(--r-md); color: #25D366; font-size: 12.5px; font-weight: 700; margin: var(--sp-3) 0; text-align: center; justify-content: center; } .whatsapp-hint .icon { width: 16px; height: 16px; flex-shrink: 0; } /* ── icon-brand — utility: keeps original brand color of branded icons ─── */ .icon-brand { color: inherit; /* parent ينقل الـ color */ } /* ═══ FROM: cards-utilities.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/cards-utilities.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf Core — Cards, Toast, Dividers, Spinners * ═══════════════════════════════════════════════════════════════════════════ * Day 14 Phase 2 — Extracted from wolf-core.css * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Toast ────────────────────────────────────────────────── */ /* ── Toast ──────────────────────────────────────────── */ .toast-success { background:#065f46; color:#6ee7b7; } .toast-error { background:#7f1d1d; color:#fca5a5; } /* ── Data Card ────────────────────────────────────────────── */ /* ── Data Card (shared: details + checkout) ─────────── */ .data-card { background: var(--surface); border: 1px solid var(--border2); border-radius: 22px; overflow: hidden; margin-bottom: 20px; animation: fadeUp 0.5s 0.1s ease both; } .data-card-header { padding: 16px 24px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 8px; } .data-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; } .data-item:last-child { border-bottom: none; } .data-label { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 130px; } .data-value { font-family: 'Courier New', monospace; font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; flex: 1; word-break: break-all; } /* ── Divider ──────────────────────────────────────────────── */ /* ── Divider ────────────────────────────────────────── */ .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 13px; font-weight: 700; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Spinner ──────────────────────────────────────────────── */ /* ── Spinner ────────────────────────────────────────── */ .spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:none; } /* ═══ FROM: iti-overrides.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/iti-overrides.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf Core — intl-tel-input v28 customizations * ═══════════════════════════════════════════════════════════════════════════ * Day 14 Phase 2 — Extracted from wolf-core.css (Sections 5, 6, 7) * Source lines: 364-478 * * Loaded by: wolf-foundation.css bundle (always loaded) * * Why is this in the always-loaded foundation? * ──────────────────────────────────────────── * The signup modal in auth_modal.php uses a phone input (intl-tel-input * library). Since auth_modal.php is included on every public page, the * phone input + its styling needs to be available everywhere too. * * Splitting this into a conditional bundle would just add HTTP overhead * without any real savings — the bundle would load on every page anyway. * * Three logical sub-sections: * 1. Vendor color overrides — Wolf surfaces, borders, text colors for * the country dropdown * 2. Phone input padding — reserves space for flag + dial code on the * left side of the input field * 3. RTL fix — keeps scrollbar on the correct side in the country list * * Dependencies: _variables.css + intlTelInput.min.css (vendor base) * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Vendor overrides ─────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════════════════════════════ 8. VENDOR OVERRIDES — intl-tel-input v28.0.4 ────────────────────────────────────────────────────────────────────────────── مكتبة intl-tel-input v28.0.4 — phone input + country dropdown. الـ migration من v17 → v28 (2026-05-03): ──────────────────────────────────────── - v17 كان scattered styles بـ hardcoded colors (محتاجين override كل property) - v28 بـ CSS variables → بنـ override الـ variables بس وكل حاجة بتطبق تلقائياً - v28 بـ يـ handle responsive built-in (useFullscreenPopup على mobile) فمش محتاجين media queries ⚠️ Breaking changes من v17: - الـ class .iti--separate-dial-code اتشال (مفيش modifier class تاني) - الـ class .iti__flag-container اترنّمت لـ .iti__country-container - الـ class .iti__selected-flag اترنّمت لـ .iti__selected-country - الـ library دلوقتي بـ يحسب paddingLeft تلقائياً بـ JS → ميـ نـ override ـش الـ padding على الـ input يدوياً! Wolf customizations: 1. Flag images path → webp files من الـ vendor folder 2. Wolf dark theme via CSS variables 3. Match form inputs (text color, transparent background) ══════════════════════════════════════════════════════════════════════════════ */ .iti { /* ── Flag asset paths (v28) ───────────────────────────────────────────── */ --iti-path-flags-1x: url('/assets/vendor/intl-tel-input/img/flags.webp'); --iti-path-flags-2x: url('/assets/vendor/intl-tel-input/img/flags@2x.webp'); /* ── Wolf theme tokens ────────────────────────────────────────────────── */ --iti-border-color: var(--wolf-border); --iti-dropdown-bg: var(--wolf-surface); --iti-icon-color: var(--wolf-sub); --iti-hover-color: var(--wolf-surface2); /* ── Layout ───────────────────────────────────────────────────────────── */ width: 100%; display: block; } /* ── Phone input — direction LTR (الأرقام دايماً LTR) ─────────────────────── */ .iti input.iti__tel-input { direction: ltr; } /* ── Phone input padding (Section 6) ──────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════════ Phone input padding — مساحة للـ flag + dial code على الشمال ────────────────────────────────────────────────────────────────────────────── الـ library v28 بـ يحسب inline padding-left ديناميكياً عبر JS، لكن الـ shorthand `padding: 12px 16px` على .form-control-custom بـ يـ shadow الـ inline value في بعض الـ rendering paths (specifically لما الـ form-control shorthand بـ يـ apply أولاً قبل الـ JS init). الحل: rule بـ specificity أعلى من .form-control-custom (0,1,0). .iti .iti__tel-input → specificity (0,2,0) = wins. 92px = static value يكفي للـ flag (~28px) + dial code (~38px) + padding-arrow (7px + spacers). الـ value ده يطابق الـ JS calculation على Wolf's font-size (15px) + Tajawal font. لو الـ JS احتاج يحسب value مختلفة (ex: locale change)، الـ inline style بـ يفوز بـ specificity (1,0,0,0) > (0,2,0). ══════════════════════════════════════════════════════════════════════════════ */ .iti .iti__tel-input { padding-left: 92px; } /* ── Selected country area — transparent للـ Wolf form inputs ────────────── */ .iti__selected-country, .iti__selected-country-primary { background: transparent; } /* ── Dropdown text color (v28 default uses dark text — Wolf needs light) ──── */ .iti__country-list, .iti__country, .iti__country-name, .iti__selected-dial-code, .iti__search-input { color: var(--wolf-text); } /* ── Search input background (لو countrySearch enabled في المستقبل) ──────── */ .iti__search-input { background: var(--wolf-bg); border-color: var(--wolf-border); } /* ── Highlighted country (keyboard navigation / hover) ───────────────────── */ .iti__country.iti__highlight { background: var(--wolf-surface2); } /* ── RTL fix (Section 7) ──────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════════ RTL Fix — الـ scrollbar position ────────────────────────────────────────────────────────────────────────────── الـ library بـ يـ detect ويحط dir="rtl" على الـ dropdown-content container. الـ country-list بـ يـ inherit direction:rtl → الـ scrollbar بـ يظهر على اليسار (default RTL behavior). الحل: force direction:ltr على الـ country-list نفسها → scrollbar على اليمين. ـ items داخلها text-align يفضل right للـ Arabic readability. ـ specificity هنا (0,1,1) أعلى من أي vendor rule (0,0,1) فمش محتاجين !important. ══════════════════════════════════════════════════════════════════════════════ */ .iti .iti__country-list { direction: ltr; /* scrollbar على اليمين */ text-align: right; /* النصوص right-aligned للـ Arabic */ } /* ═══ FROM: animations.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/animations.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf Core — Animations (keyframes) * ═══════════════════════════════════════════════════════════════════════════ * Day 14 Phase 2 — Extracted from wolf-core.css * Source lines: 479-493 * ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════════ 9. ANIMATIONS ══════════════════════════════════════════════════════════════════════════════ */ @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} } @keyframes waPulse { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(1.5);opacity:0} } @keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} } @keyframes spin { to { transform:rotate(360deg); } } @keyframes fadeDown { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } /* ═══ FROM: responsive.css ═══ */ /* * PROJECT: Wolf IPTV * FILE: wolf_iptv/assets/css/core/responsive.css * * ═══════════════════════════════════════════════════════════════════════════ * Wolf — Responsive (core helpers only) * ═══════════════════════════════════════════════════════════════════════════ * * M0.3.B (2026-05-30): نظفنا كل الـ legacy nav/footer responsive styles. * الـ navbar.css و footer.css الجديدة بقالهم own responsive rules. * * حاليًا هذا الملف فاضي — احتفظنا بيه في الـ bundle عشان نضيف فيه * helpers مستقبلية لو احتجنا. * * ⚠️ ممنوع نضيف هنا CSS مرتبط بـ component معيّن — هذا place للـ * utility responsive helpers فقط (مثلاً .hide-mobile, .show-desktop). * ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ RESPONSIVE UTILITY CLASSES (future-proofed slot) ══════════════════════════════════════════════════════════════════════ */ /* Hide on small screens (≤640px / bp-md) */ @media (max-width: 640px) { .hide-mobile { display: none !important; } } /* Hide on desktop (>1024px / above bp-xl) */ @media (min-width: 1025px) { .hide-desktop { display: none !important; } }