/* ============================================================================ صفحة الهبوط -- سرد بالتمرير (Scrollytelling) ============================================================================ يستخدم متغيرات CSS الحقيقية من style.css (--card-bg, --border-color, --text-main, --text-muted, --bg-color, --primary-solid, --primary-rgb...) -- لا يعرّف أي متغيرات ثيم جديدة، ويتبع نفس تبديل الوضع الليلي/النهاري الحقيقي عبر [data-theme="dark"] على (toggleTheme() بـmain.js). ============================================================================ */ /* ================= طبقة الوهج الزجاجي (بكل الصفحة، كل الشاشات) ================= */ /* طلب صاحب المشروع صراحة: نفس تأثير الوهج المستخدم بصفحة الهبوط يطبَّق بكل الموقع، لا صفحة الهبوط فقط -- لذا العنصر يُدرَج مرة وحدة بأعلى body (خارج كل .screen)، position:fixed يخليه ثابت الموضع بالشاشة بغض النظر عن أي شاشة نشطة أو مقدار التمرير. */ .page-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; contain: strict; } .glow { position: absolute; border-radius: 50%; } .glow-a { width: 900px; height: 900px; top: -30%; right: -10%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 68%); } .glow-b { width: 760px; height: 760px; bottom: -30%; left: -10%; background: radial-gradient(circle, color-mix(in srgb, var(--success) 16%, transparent) 0%, transparent 68%); } /* ================= المسار المثبَّت (Scrollytelling) ================= */ .scroll-track { position: relative; z-index: 1; } /* إصلاح حقيقي (بلاغ صاحب المشروع 2026-08-31: صفحة الهبوط "دمار" بالجوال): 100vh على متصفحات الجوال (Safari iOS/Chrome Android) تُحسَب على أساس أطول ارتفاع ممكن (شريط العنوان مخفي بالكامل)، لا الارتفاع المرئي الفعلي وقت التحميل (شريط العنوان لسه ظاهر عادةً) -- فالمرحلة المثبَّتة كانت تطول عن حدود الشاشة المرئية فعلياً، وترتفع/تنزل مع اختفاء/ظهور شريط العنوان أثناء التمرير نفسه (landing-scroll.js يعتمد على window.innerHeight اللحظي بنفس وقت الحساب) -- يسبب قفزات/ارتجاجاً حقيقياً بمشاهد السرد. 100dvh (الارتفاع الديناميكي الفعلي، مدعوم بكل متصفحات الجوال الحديثة) يطابق المرئي دائماً بالضبط؛ يبقى 100vh كـ fallback صريح للمتصفحات القديمة جداً (يُطبَّق فقط لو dvh غير مدعومة). */ .pinned-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform, opacity; pointer-events: none; opacity: 0; } .scene:first-of-type { opacity: 1; } .scene-inner { max-width: 1180px; width: 94%; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .scene:nth-of-type(odd) .scene-inner { direction: ltr; } .scene:nth-of-type(odd) .scene-text, .scene:nth-of-type(odd) .scene-visual { direction: rtl; } .scroll-track h1, .scroll-track h2, .scroll-track h3 { text-wrap: balance; } .scene-num { display: inline-block; font-size: 11.5px; font-weight: 800; color: var(--primary); letter-spacing: .04em; margin-bottom: 14px; background: rgba(var(--primary-rgb), 0.12); border: 1px solid rgba(var(--primary-rgb), 0.35); padding: 3px 11px; border-radius: 7px; } .scene-title { font-size: clamp(28px, 3.8vw, 44px); font-weight: 800; margin-bottom: 16px; line-height: 1.25; color: var(--text-main); } .scene-desc { font-size: 16.5px; line-height: 1.7; color: var(--text-muted); max-width: 42ch; } /* بطاقات المشاهد تستخدم .card الحقيقية (style.css) -- فقط ارتفاع أدنى إضافي هنا عشان تستقر أبعاد المشهد أثناء التمرير، بلا إعادة تعريف أي قاعدة من .card نفسها */ .scroll-track .card { min-height: 220px; } /* -- مشهد Hero -- */ .hero-content { text-align: center; grid-column: 1 / -1; } .hero-eyebrow { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; justify-content: center; } .pill { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--card-bg); border: 1px solid var(--border-color); padding: 5px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; } .hero-content h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 800; max-width: 17ch; margin: 0 auto 16px; color: var(--primary); } .hero-content p { font-size: 16px; color: var(--text-muted); max-width: 46ch; margin: 0 auto 28px; } .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn-cta { background: var(--primary-solid); color: #fff; border: none; padding: 14px 30px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.4); pointer-events: auto; } .btn-cta-big { padding: 17px 46px; font-size: 17px; } /* -- بطاقات فواتير -- */ .bills-scene-visual { position: relative; height: 320px; } .bill-fly { position: absolute; width: 220px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); will-change: transform, opacity; } .bill-fly-top { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 6px; } .bill-fly-top .inv { color: var(--primary); font-weight: 700; background: rgba(var(--primary-rgb),0.1); padding: 2px 7px; border-radius: 5px; } .bill-fly-top .amt { font-weight: 800; color: var(--text-main); } .bill-fly .store { font-size: 13px; font-weight: 700; color: var(--text-main); } /* -- تحليل AI -- */ .ai-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; } .ai-extract-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--border-color); font-size: 15px; } .ai-extract-row:last-child { border-bottom: none; } .ai-extract-row .k { color: var(--text-muted); } .ai-extract-row .v { font-weight: 700; color: var(--text-main); } .scan-beam { position: absolute; right: 6%; left: 6%; height: 2.5px; background: rgba(var(--primary-rgb), .65); box-shadow: 0 0 14px rgba(var(--primary-rgb), .65); border-radius: 50%; } /* -- بريد -- */ .mail-flow { display: flex; flex-direction: column; gap: 10px; } .mail-item { display: flex; align-items: center; gap: 12px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 11px 14px; font-size: 14.5px; color: var(--text-main); } .mail-item .ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(var(--primary-rgb),0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); } /* -- مجلد 3D -- */ .folder-scene-visual { position: relative; height: 460px; perspective: 1400px; display: flex; align-items: center; justify-content: center; } .folder-3d { position: relative; width: 280px; height: 195px; transform-style: preserve-3d; will-change: transform, opacity; } .folder-back { position: absolute; inset: 0; background: linear-gradient(155deg, var(--primary-dark), color-mix(in srgb, var(--primary-dark) 60%, #000)); border-radius: 16px; box-shadow: var(--shadow); } .folder-back::after { content: ''; position: absolute; inset: 3px 3px auto 3px; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent); border-radius: 13px 13px 0 0; } .folder-tab { position: absolute; top: -12px; right: 20px; width: 90px; height: 14px; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 6px 6px 0 0; } .folder-front { position: absolute; bottom: 0; right: 0; left: 0; height: 84%; background: linear-gradient(165deg, rgba(var(--primary-rgb), .65) 0%, var(--primary) 42%, var(--primary-dark) 100%); border-radius: 14px 14px 16px 16px; transform-origin: bottom center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; will-change: transform; box-shadow: 0 -6px 18px rgba(0,0,0,0.18) inset, 0 14px 28px rgba(0,0,0,0.28); } .folder-front .bi { font-size: 26px; } .folder-front .flabel { font-size: 13px; font-weight: 700; } .folder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: absolute; inset: 0; align-content: center; } /* إصلاح حقيقي (بلاغ حي صاحب المشروع 2026-08-31: "حتى صفحة الهبوط اللي تدعي انك خلصتها فيها حاجات تطلع برا الشاشة"): .folder-grid شبكة grid-template-columns:1fr 1fr، لكن عناصر الشبكة (.invoice-mini) بلا min-width:0 صريح -- فمقاس العمود الافتراضي (auto) بشبكة CSS يُحسَب من أكبر محتوى داخلي غير قابل للانكماش (هنا اسم المتجر .im-store بخاصية white-space:nowrap)، بغض النظر عن overflow:hidden/ellipsis عليه. النتيجة المُقاسة حياً بعرض جوال 375px: عمودان بعرض غير متساوٍ (194px و174px بدل 161px لكل واحد) والعمود الأيسر يبدأ عند left:-27px -- خارج حدود الشاشة فعلياً ومقصوص بصمت (يفسّر "585 ﷼" المقطوع بلقطة المستخدم). min-width:0 هو الإصلاح المعياري لهذا العطل المعروف (Grid/Flexbox Blowout) -- يسمح لعنصر الشبكة بالانكماش تحت مقاس محتواه الطبيعي فتشتغل قاعدة text-overflow المعرَّفة أصلاً على .im-store كما هو المفترض. تحقّق حي بعد الإصلاح: كلا العمودين بالضبط 161px، بلا أي إحداثية سالبة. */ .invoice-mini { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 14px; padding: 15px 16px; min-width: 0; will-change: transform, opacity; } .im-header { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; } .im-store-icon { width: 32px; height: 32px; border-radius: 9px; background: rgba(var(--primary-rgb), 0.12); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .im-header-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .im-store { font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main); } .im-inv { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; direction: ltr; text-align: right; } .im-amt { font-size: 18px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; flex-shrink: 0; } .im-divider { display: flex; align-items: center; gap: 8px; margin: 10px 0; } .im-divider::before, .im-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } .im-divider .bi { color: var(--primary); font-size: 13px; opacity: 0.55; } /* بلاغ حي صاحب المشروع (لقطة فعلية بالجوال): قيمة "التاريخ" (يوم+شهر+سنة، أطول نص متوقَّع بهذا الصف) تلتف أحياناً لسطرين على عمود ضيق بلا أي حماية -- .im-row {display:flex} وحدها لا تمنع التفاف النص، فيتراكب السطر الثاني مع تسمية "التاريخ" المجاورة (كلاهما align-items:center بصف بارتفاع تحدَّد بعنصر واحد بس). nowrap+ellipsis (نفس نمط .im-store أعلاه بالضبط) يضمن سطراً واحداً دائماً -- لو النص طويل جداً فعلاً يُقتَطع بثلاث نقاط بدل التفاف يكسر التخطيط. */ .im-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; padding: 4px 0; gap: 8px; } .im-row-label { color: var(--text-muted); flex-shrink: 0; } .im-row-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .im-footer { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); } .warranty-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; } .w-ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); } .w-alert { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); } .w-neutral { background: var(--border-color); color: var(--text-muted); } .paper-stack { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .paper-fly { position: absolute; top: 50%; right: 50%; width: 84px; height: 108px; background: #fbfaf6; border-radius: 4px 4px 0 0; box-shadow: 0 18px 38px rgba(0,0,0,0.34), 0 1px 0 rgba(255,255,255,0.5) inset; padding: 11px 9px 9px; display: flex; flex-direction: column; align-items: center; gap: 5px; opacity: 0; will-change: transform, opacity; clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 84% 94%, 76% 100%, 68% 94%, 60% 100%, 52% 94%, 44% 100%, 36% 94%, 28% 100%, 20% 94%, 12% 100%, 4% 94%, 0 100%); } .paper-fly .pf-store { font-size: 9.5px; font-weight: 800; color: #1a1a1e; text-align: center; } .paper-fly .pf-line { display: block; width: 80%; height: 2px; border-radius: 2px; background: #d3d1c8; } .paper-fly .pf-line.short { width: 55%; margin-bottom: 4px; } .paper-fly .pf-amt { margin-top: auto; font-size: 12px; font-weight: 800; color: #16161a; font-variant-numeric: tabular-nums; } .folder-scan-beam { position: absolute; right: 4%; left: 4%; height: 3.5px; background: rgba(var(--primary-rgb), .65); box-shadow: 0 0 20px rgba(var(--primary-rgb), .65); border-radius: 50%; opacity: 0; z-index: 4; pointer-events: none; } .folder-phrase { position: absolute; top: 8%; right: 50%; transform: translateX(50%); font-size: 13.5px; font-weight: 700; color: var(--primary); background: var(--card-bg); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; white-space: nowrap; z-index: 6; pointer-events: none; } /* -- إقرار ضريبي -- */ .vat-net { color: var(--primary); font-weight: 800 !important; } .vat-export-btn { width: 100%; margin-top: 16px; background: rgba(var(--primary-rgb), 0.1); border: 1.5px dashed var(--primary); color: var(--primary); padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; opacity: 0; transition: opacity .3s ease; } .vat-export-btn.show { opacity: 1; } /* -- تخزين مشفّر -- */ .storage-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 26px 10px 10px; } .storage-shield { font-size: 58px; color: var(--primary); opacity: 0; will-change: transform, opacity; } .storage-facts { width: 100%; margin-top: 6px; } /* -- تحليلات -- */ .kpi-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .kpi-mini { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px; } .kpi-mini .l { font-size: 12px; color: var(--text-muted); } .kpi-mini .v { font-size: 20px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; } .chart-wrap { margin-top: 4px; } .spark-svg { width: 100%; height: 155px; overflow: visible; } .chart-grid { stroke: var(--border-color); stroke-width: 1; } .spark-area { fill: url(#sparkGradient); opacity: 0; transition: opacity .4s ease; } .spark-area.show { opacity: 1; } .spark-path { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .spark-points { opacity: 0; transition: opacity .35s ease; } .spark-points.show { opacity: 1; } .spark-points circle { fill: var(--primary); stroke: var(--card-bg); stroke-width: 2.5; } .chart-months { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 4px; padding: 0 2px; } .top-stores { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-color); } .top-stores-label { font-size: 13.5px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .top-stores-label .bi { color: var(--primary); } .store-row { display: grid; grid-template-columns: 102px 1fr 74px; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 8px; } .store-row span:first-child { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .store-bar-wrap { background: var(--bg-color); border-radius: 999px; height: 6px; overflow: hidden; } /* أصلاً width:0% → X% بأنيميشن transition:width -- خاصية تخطيط (layout) تُجبر المتصفح يعيد حساب التخطيط كل إطار (reflow)، أبطأ أداءً من transform الذي يعالجه الـcompositor مباشرة بلا reflow. البديل: عرض ثابت 100% دائماً + transform:scaleX() من نقطة ارتكاز يمين الشريط (transform-origin:right -- الحافة الثابتة بتخطيط RTL؛ الشريط عنصر وحيد بداخل .store-bar-wrap فيبدأ من حافة البداية باتجاه RTL، أي اليمين، ويكبر يساراً -- نفس السلوك البصري تماماً لـwidth الأصلية، تحقّق حي بمقارنة قبل/بعد). */ .store-bar { display: block; height: 100%; background: linear-gradient(90deg, rgba(var(--primary-rgb), .65), var(--primary)); border-radius: 999px; width: 100%; transform: scaleX(0); transform-origin: right; transition: transform .5s ease; } .store-amt { font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; text-align: left; } .cc-total { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-color); font-size: 13px; font-weight: 800; color: var(--text-main); } .cc-total-amt { color: var(--primary); font-variant-numeric: tabular-nums; } /* -- مؤشر المراحل -- */ .stage-dots { position: absolute; bottom: 34px; right: 50%; transform: translateX(50%); display: flex; gap: 8px; z-index: 5; } .stage-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-color); transition: background .25s, transform .25s; } .stage-dot.active { background: var(--primary); transform: scale(1.5); } /* ================= شريط ختامي (يستبدل قسم الدعوة الختامية القديم) ================= */ .cta-band { position: relative; z-index: 1; padding: 90px 20px 60px; text-align: center; } .cta-band-box { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; background: linear-gradient(160deg, var(--primary), var(--primary-dark)); border-radius: 26px; padding: 52px 34px; color: #fff; box-shadow: 0 30px 70px rgba(var(--primary-rgb), 0.35); } .cta-band-box h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; } .cta-band-box > p { font-size: 15px; opacity: 0.92; margin-bottom: 26px; max-width: 42ch; margin-left: auto; margin-right: auto; } .cta-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; } .cta-trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); padding: 6px 13px; border-radius: 999px; } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; } .cta-band-box button { background: #fff; color: var(--primary); border: none; padding: 14px 32px; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer; } .cta-secondary-link { font-size: 13px; font-weight: 700; color: #fff; opacity: 0.85; text-decoration: underline; cursor: pointer; background: none; border: none; } @media (max-width: 860px) { .scene-inner { grid-template-columns: 1fr; gap: 24px; } .scene:nth-of-type(odd) .scene-inner { direction: rtl; } /* إصلاح حقيقي (بلاغ حي صاحب المشروع 2026-09-01، لقطة فعلية): بطاقة .bill-fly (مشهد "صوّر فاتورتك") تطفو فوق نص الوصف أعلاها. السبب: إحداثيات المحور الرأسي (fromY/toY بـapplyBillsDetail، landing- scroll.js) مصمَّمة لتخطيط سطح مكتب بعمودين جنب بعض (نص يمين، بطاقات يسار -- بلا أي شيء فوق البطاقات يتصادم معه). بعرض جوال .scene-inner ينهار لعمود واحد (السطر فوق) -- يصير النص فوق البطاقات مباشرة بدل جانبها، وإحداثية مثل fromY:140 (أكبر من نصف ارتفاع الحاوية 240px) تدفع البطاقة فعلياً فوق حدود حاويتها الخاصة لتتراكب مع النص أعلاها. نفس أسلوب الاحتواء المستخدم بكل الموقع لعناصر الأنيميشن المتحركة (.pinned-stage{overflow:hidden}) -- يقتصر على الجوال فقط عمداً: على سطح المكتب البطاقات فوق/تحت حاويتها تفيض لفراغ الصفحة الفعلي (لا شيء يتصادم معه فعلياً بتخطيط العمودين)، فلا داعي لمسّه هناك. */ .folder-scene-visual { height: 240px; overflow: hidden; } /* إصلاح حقيقي ثانٍ (بلاغ حي صاحب المشروع 2026-09-01، لقطتان فعليتان بالجوال والحاسوب): overflow:hidden أعلاه يمنع التراكب مع نص الوصف فعلاً، لكنه لا يمنع تراكب البطاقات الثلاث مع بعضها ولا يمنع بطاقة تفيض فوق حدود حاويتها من الظهور مقطوعة (شوهد حياً حرف طائف بلا سياق). applyBillsDetail (landing-scroll.js) صار الآن يوزّع البطاقات الثلاث رأسياً بالتساوي داخل الحاوية (0..containerH، بلا أي إحداثية سالبة تدفعها فوق الحدود إطلاقاً)، فمنع التراكب مع النص صار مضموناً بالتصميم لا بالقص فقط -- height:240px هنا كانت السبب الفعلي بمنع الفصل الرأسي الكافي: بطاقة .bill-fly الأصلية (220px) بارتفاع ~91px فعلياً (قِيس حياً، لا تخميناً) لا تسمح لثلاث بطاقات بحاوية 240px فقط بلا تراكب مهما كان توزيعها. الحل: تصغير البطاقة نفسها بالجوال (عرض وحشو وخط أصغر) + إرجاع ارتفاع الحاوية لنفس قيمة الحاسوب الافتراضية (320px، بإزالة التخصيص هنا) -- مساحة كافية مقاسة حياً لثلاث بطاقات مصغَّرة بفراغ حقيقي بينها. overflow:hidden يبقى كشبكة أمان فقط، لا آلية الاحتواء الأساسية. */ .bills-scene-visual { height: 320px; overflow: hidden; } .bill-fly { width: 168px; padding: 10px 12px; } .bill-fly-top { font-size: 10px; margin-bottom: 4px; } .bill-fly .store { font-size: 11px; } /* إصلاح حقيقي رابع (بلاغ حي صاحب المشروع 2026-09-01، لقطة فعلية بالجوال -- بعد إصلاح تراكب التاريخ: "نفس المشكلة بكروت الضمان، بس اللي قبله ضبط"): نفس نمط عطل .bill-fly بالضبط لكن بمشهد مختلف. قياس مباشر: كل .invoice-mini ارتفاعه الفعلي 264px، والشبكة 2×2 تحتاج 542px (بطاقتين فوق بعض + فراغ)، بينما .folder-scene-visual على الجوال 240px فقط مع overflow:hidden -- align-content:center يوسّط المحتوى فيقص ~150px من الأعلى والأسفل بالتساوي (يفسّر صف الفواتير العلوي المقطوع بلقطة المستخدم). المساحة المتاحة فعلياً تحت نص الوصف بالجوال (قِيست حياً: ~306px) لا تكفي أصلاً لصفين حتى ببطاقات أصغر -- فبدل تصغير 4 بطاقات لدرجة تضر القراءة، نعرض بطاقتين فقط بالجوال (صف واحد) بدل أربع، مع تبسيطهما (حذف صف الضريبة، حشو أقل) ليتسع الصف الواحد براحة داخل المساحة المقاسة. */ .invoice-mini:nth-child(3), .invoice-mini:nth-child(4) { display: none; } .invoice-mini { padding: 12px 14px; } .im-header { margin-bottom: 2px; } .im-divider { margin: 6px 0; } .im-row-tax { display: none; } .im-footer { margin-top: 6px; padding-top: 6px; } .folder-scene-visual { height: 230px; overflow: hidden; } }