* { margin: 0; padding: 0; box-sizing: border-box; font-feature-settings: "tnum"; } body { font-family: var(--font-ar); background: var(--color-bg); color: var(--color-text); min-height: 100vh; padding: 20px; font-variant-numeric: tabular-nums lining-nums; font-size: 16px; line-height: 1.5; } /* قصّة الزاوية على .container تُرسم بتدرّج لوني، لا بـ clip-path. السبب: .container يحتضن #edit-item-modal و#create-list-modal وهما position:fixed. أي clip-path على الأب يقصّ الأحفاد الثابتة إلى صندوق الأب — فيظل الغطاء يشغل 1280x720 في التخطيط لكنه لا يُرسَم إلا داخل الحاوية، وتظهر القصّة على الغطاء نفسه. التدرّج يعطي الشكل ذاته بلا إنشاء منطقة قصّ. (نقل النافذتين لتصبحا ابنتَي صحيح بذاته لسياق التكديس، لكن هذا التنسيق لم يعد يعتمد عليه.) */ .container { max-width: 1200px; margin: 0 auto; background: linear-gradient(225deg, transparent 0 var(--cut-md), var(--color-surface) var(--cut-md)); border-radius: 0; padding: 30px; box-shadow: none; border: 0; } html:lang(en) .container { background: linear-gradient(135deg, transparent 0 var(--cut-md), var(--color-surface) var(--cut-md)); } header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #f0f0f0; } header h1 { color: #333; font-size: 2.5em; margin-bottom: 10px; line-height: 1.3; } .subtitle { color: #666; font-size: 1.1em; line-height: 1.5; } .header-content { display: flex; justify-content: space-between; align-items: center; } .auth-section { max-width: 500px; margin: 0 auto; } .auth-tabs { display: flex; gap: 10px; margin-bottom: 20px; } .tab-btn { flex: 1; padding: 12px; min-height: 44px; border: none; background: var(--color-surface); color: var(--color-text-body); cursor: pointer; border-radius: 8px; font-size: 1em; transition: all 0.3s; } .tab-btn:hover { background: var(--color-surface-sunk); } .tab-btn:active { background: var(--color-border); transform: scale(0.98); } .tab-btn.active { background: var(--color-primary); color: var(--color-text-on-dark); } .tab-btn.active:hover { background: var(--color-primary-800); } .auth-form { display: none; background: var(--color-surface); padding: 30px; border-radius: 0; } .auth-form.active { display: block; } .auth-form h2 { margin-bottom: 20px; color: var(--color-text); font-size: 24px; line-height: 1.3; } .auth-form input { width: 100%; padding: 12px; min-height: 44px; margin-bottom: 15px; border: 2px solid var(--color-border); border-radius: 0; font-size: 16px; line-height: 1.5; } .auth-form input:focus { outline: none; border-color: var(--color-primary); } .btn { padding: 12px 24px; min-height: 44px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 16px; line-height: 1.5; font-family: var(--font-ar); font-weight: var(--fw-medium); transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; } .btn-primary { background: var(--color-action); color: var(--color-text-on-spark); border-radius: 0; clip-path: var(--corner-cut-sm); } /* العرض الكامل خاص بأزرار النماذج وحدها. كان مطبَّقاً على .btn-primary عموماً، فامتدّ إلى سياقات لا تريده: زر البطل في landing صار 1320px، وزر shared صار 1260px، وزر «نسخ» خنق حقل الرابط (1031px مقابل 235px). السياق هو ما يقرّر العرض، لا اسم الصنف. */ form .btn-primary { width: 100%; } .btn-primary:hover { background: var(--color-action-hover); transform: none; } .btn-primary:active { background: var(--color-action-press); transform: translateY(0); } .btn-secondary { background: var(--color-surface-sunk); color: var(--color-primary); } .btn-secondary:hover { background: #e0e0e0; transform: translateY(-2px); } .btn-secondary:active { background: #d0d0d0; transform: translateY(0); } .btn-success { background: var(--color-success); color: white; } .btn-success:hover { background: #38a169; transform: translateY(-2px); } .btn-success:active { background: #2f855a; transform: translateY(0); } .btn-danger { background: var(--color-error); color: white; } .btn-danger:hover { background: #e53e3e; transform: translateY(-2px); } .btn-danger:active { background: #c53030; transform: translateY(0); } :focus-visible { outline: none; box-shadow: var(--focus-ring); } .message { margin-top: 20px; padding: 12px; border-radius: 8px; text-align: center; display: none; font-size: 15px; line-height: 1.5; } .message.success { background: var(--color-success-bg); color: var(--color-success); display: block; } .message.error { background: var(--color-error-bg); color: var(--color-error); display: block; } /* أقسام لا تحتضن عناصر position:fixed → clip-path آمن هنا. */ .wishlist-header { background: var(--color-bg); padding: 20px; border: 1px solid var(--color-border); border-radius: 0; margin-bottom: 20px; clip-path: var(--corner-cut); } .wishlist-actions { display: flex; gap: 10px; margin-top: 15px; } .wishlist-actions button { flex: 1; min-height: 44px; } /* نفس منطق .wishlist-header للقصّة الآمنة (لا أحفاد position:fixed). */ .edit-section { background: var(--color-bg); padding: 20px; border: 1px solid var(--color-border); border-radius: 0; margin-bottom: 20px; clip-path: var(--corner-cut); } .edit-section h3 { margin-bottom: 15px; font-size: 20px; line-height: 1.3; } .edit-section input, .edit-section textarea { width: 100%; padding: 12px; min-height: 44px; margin-bottom: 10px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; line-height: 1.5; } .edit-section form { display: flex; flex-direction: column; gap: 10px; } .edit-section button { width: auto; min-height: 44px; } .share-section { background: var(--color-primary-50); padding: 20px; border-radius: 12px; margin-bottom: 20px; border: 2px solid var(--color-primary-100); } .share-link-container { display: flex; gap: 10px; margin: 15px 0; } .share-link-container input { flex: 1; padding: 12px; min-height: 44px; border: 2px solid #48bb78; border-radius: 8px; background: white; font-size: 16px; } .help-text { color: var(--color-text-muted); font-size: 14px; line-height: 1.5; margin-top: 10px; } /* نفس منطق .wishlist-header للقصّة الآمنة (لا أحفاد position:fixed). */ .add-item-section { background: var(--color-bg); padding: 20px; border: 1px solid var(--color-border); border-radius: 0; margin-bottom: 20px; clip-path: var(--corner-cut); } .add-item-section h3 { margin-bottom: 15px; font-size: 20px; line-height: 1.3; } .add-item-section input, .add-item-section textarea { width: 100%; padding: 12px; min-height: 44px; margin-bottom: 10px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; line-height: 1.5; } .items-section { margin-top: 30px; } .items-section h2, .items-section h3 { margin-bottom: 20px; font-size: 22px; line-height: 1.3; } .items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .item-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; padding: 15px; transition: all 0.3s; clip-path: var(--corner-cut); } .item-card:hover { transform: none; border-color: var(--color-border-strong); box-shadow: none; } /* حجز فردي = العنصر مغلق فعلاً، لا أحد غيره يستطيع فعل شيء به. هدية جماعية ما زالت تقبل مشاركين جدداً — لو حملت النمط نفسه لبدت مُنجَزة فيتجاهلها من يريد المساهمة، رغم أن زر «انضم للمشاركة» يعمل بالفعل. */ .item-card.reserved-solo { border-color: var(--color-action); background: var(--color-spark-50); } .item-card.reserved-shared { border-color: var(--color-primary); background: var(--color-primary-50); } .item-image { width: 100%; height: 200px; object-fit: cover; border-radius: 0; margin-bottom: 10px; background: var(--color-surface-sunk); clip-path: var(--corner-cut); } .item-title { font-size: var(--fs-5); font-weight: var(--fw-semibold); margin-bottom: 8px; color: var(--color-text); line-height: var(--lh-5); } .item-description { color: var(--color-text-body); margin-bottom: 10px; font-size: var(--fs-2); line-height: var(--lh-2); } .item-price { font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: 10px; font-size: 16px; } .item-link { display: inline-block; color: var(--color-primary); text-decoration: none; margin-bottom: 10px; font-size: 14px; min-height: 44px; line-height: 44px; padding: 0 8px; } .item-link:hover { text-decoration: underline; } .item-link:active { color: #4457c2; } .item-reserved { padding: 8px; border-radius: 6px; text-align: center; margin-bottom: 10px; font-size: 15px; line-height: 1.5; } /* النص بـ spark-700 (6.47:1 على spark-50) — الشرارة نفسها تعطي 4.29:1 فوق تظليلها وتسقط في AA. الشرارة تبقى للأيقونة والحد. */ .item-reserved.solo { background: none; color: var(--color-action-text); text-align: start; font-weight: var(--fw-semibold); padding: 0; } .item-reserved.solo svg { color: var(--color-action); } .item-reserved.shared { background: none; color: var(--color-primary); text-align: start; font-weight: var(--fw-semibold); padding: 0; } .item-actions { display: flex; gap: 8px; margin-top: 10px; } .item-actions button { flex: 1; padding: 8px; min-height: 44px; font-size: 15px; } /* محايد لا تحذيري — حقل إدخال اسم عادي لا خطأً ولا تنبيهاً. المرجع البصري (Gjafa Screens.dc.html) يوثّق الإطار البرتقالي التحذيري صراحةً كمثال «ما كان»، والبديل «ما صار» سطح عادي بلا حدّ ملوَّن. */ .friend-name-section { background: var(--color-surface); padding: 20px; border-radius: 12px; margin-bottom: 20px; border: 2px solid var(--color-border); } .friend-name-section input { width: 100%; max-width: 400px; padding: 12px; min-height: 44px; margin-top: 10px; border: 2px solid var(--color-border); border-radius: 8px; font-size: 16px; } .social-share-buttons { display: flex; gap: 10px; margin: 15px 0; flex-wrap: wrap; justify-content: center; } .btn-share { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; min-height: 44px; border: none; border-radius: 25px; cursor: pointer; font-size: 15px; font-weight: 500; color: white; transition: all 0.3s ease; } .btn-share:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .btn-share:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } /* أخضر واتساب الرسمي #25D366 يعطي 1.98:1 مع الأبيض ويسقط في AA. #0F7A40 يعطي 5.41:1 ويظل يُقرأ واتساب. */ .btn-whatsapp { background: #0F7A40; color: #FFFFFF; } .btn-whatsapp:hover { background: #128C7E; } .btn-whatsapp:active { background: #075E54; } .btn-twitter { background: #1DA1F2; } .btn-twitter:hover { background: #0d8ed9; } .btn-twitter:active { background: #0a7bc2; } .btn-telegram { background: #0088cc; } .btn-telegram:hover { background: #006699; } .btn-telegram:active { background: #005580; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(42,18,38,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; } /* النوافذ المنبثقة: بلا clip-path على أي جدّ لها. */ .modal-content { background: var(--color-surface); padding: 30px; border-radius: 0; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 10px 40px rgba(42,18,38,.35); clip-path: var(--corner-cut); } /* ── خصائص منطقية · RTL هي الحالة الأساسية ─────────────────── */ .modal-close { position: absolute; top: 15px; left: auto; inset-inline-start: 15px; font-size: 28px; cursor: pointer; color: #666; transition: color 0.3s; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .modal-close:hover { color: #333; } .modal-close:active { color: #000; } .modal-content h3 { margin-bottom: 20px; color: #333; text-align: center; font-size: 22px; line-height: 1.3; } .modal-content input, .modal-content textarea { width: 100%; padding: 12px; min-height: 44px; margin-bottom: 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; line-height: 1.5; } .modal-content input:focus, .modal-content textarea:focus { outline: none; border-color: #4c5fd5; } .modal-actions { display: flex; gap: 10px; margin-top: 10px; } .modal-actions .btn { flex: 1; min-height: 44px; } .btn-edit { background: var(--color-surface-sunk); color: var(--color-text-body); } .btn-edit:hover { background: var(--color-border); transform: translateY(-2px); } .btn-edit:active { background: var(--color-border-strong); transform: translateY(0); } .link-input-container { position: relative; display: flex; align-items: center; gap: 10px; } .link-input-container input { flex: 1; margin-bottom: 0; min-height: 44px; } .spinner { width: 20px; height: 20px; border: 3px solid #e0e0e0; border-top-color: #4c5fd5; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .image-preview-container { display: flex; align-items: center; gap: 10px; padding: 10px; background: #f0f0f0; border-radius: 8px; margin-bottom: 10px; } .image-preview-container img { width: 80px; height: 80px; object-fit: contain; border-radius: 8px; border: 2px solid #4c5fd5; background: #fff; } .btn-clear-preview { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: none; background: #f56565; color: white; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.3s; } .btn-clear-preview:hover { background: #e53e3e; } .btn-clear-preview:active { background: #c53030; } /* أضيفت أثناء ترحيل my-wishlist.html — الحزمة لا تعرّفها. خاصية منطقية: الفجوة تبقى بين الأيقونة والنص بصرف النظر عن RTL/LTR. */ .gj-icon { vertical-align: -3px; margin-inline-end: 6px; flex-shrink: 0; } /* ======================================== RESPONSIVE BREAKPOINTS SYSTEM 360px - Smallest screens (Galaxy S8, iPhone SE) 480px - Medium phones 768px - Tablets 1024px - Large tablets 1440px - Large screens ======================================== */ /* Large screens (1440px and above) */ @media (min-width: 1440px) { .container { max-width: 1400px; padding: 40px; } header h1 { font-size: 2.8em; } .items-grid { grid-template-columns: repeat(4, 1fr); gap: 25px; } .item-title { font-size: 22px; } .items-section h2, .items-section h3 { font-size: 26px; } } /* Large tablets (1024px - 1439px) */ @media (min-width: 1024px) and (max-width: 1439px) { .container { max-width: 1000px; padding: 35px; } .items-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } header h1 { font-size: 2.4em; } .items-section h2, .items-section h3 { font-size: 24px; } } /* Tablets (768px - 1023px) */ @media (max-width: 1023px) and (min-width: 768px) { body { padding: 15px; } .container { padding: 25px; border-radius: 18px; } header h1 { font-size: 2.2em; } .items-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .header-content { flex-direction: column; gap: 15px; } .item-title { font-size: 19px; } .items-section h2, .items-section h3 { font-size: 22px; } } /* Medium phones (480px - 767px) */ @media (max-width: 767px) and (min-width: 480px) { body { padding: 12px; font-size: 15px; } .container { padding: 20px; border-radius: 15px; } header { margin-bottom: 25px; padding-bottom: 18px; } header h1 { font-size: 1.9em; } .subtitle { font-size: 1em; } .items-grid { grid-template-columns: 1fr; gap: 16px; } .header-content { flex-direction: column; gap: 15px; } .wishlist-actions { flex-direction: column; } .social-share-buttons { flex-direction: column; } .btn-share { justify-content: center; padding: 14px 24px; min-height: 48px; } .modal-content { width: 95%; padding: 22px; } .auth-form { padding: 22px; } .share-link-container { flex-direction: column; } .item-actions { flex-direction: column; } .item-actions button { width: 100%; min-height: 48px; } .item-title { font-size: 18px; } .item-description { font-size: 14px; } .items-section h2, .items-section h3 { font-size: 20px; } .edit-section h3, .add-item-section h3 { font-size: 18px; } .btn { min-height: 48px; padding: 14px 22px; } .tab-btn { min-height: 48px; padding: 14px 12px; } } /* Small phones (360px - 479px) */ @media (max-width: 479px) and (min-width: 360px) { body { padding: 10px; font-size: 15px; } .container { padding: 16px; border-radius: 14px; } header { margin-bottom: 20px; padding-bottom: 15px; } header h1 { font-size: 1.7em; margin-bottom: 8px; } .subtitle { font-size: 0.95em; } .auth-section { max-width: 100%; } .auth-tabs { gap: 8px; } .tab-btn { padding: 14px 10px; min-height: 48px; font-size: 0.95em; } .auth-form { padding: 18px; border-radius: 12px; } .auth-form h2 { font-size: 22px; margin-bottom: 15px; } .auth-form input { padding: 14px; min-height: 48px; font-size: 16px; margin-bottom: 12px; } .btn { padding: 14px 20px; min-height: 48px; font-size: 16px; } .wishlist-header { padding: 16px; } .edit-section, .add-item-section, .share-section { padding: 16px; } .edit-section h3, .add-item-section h3 { font-size: 18px; margin-bottom: 12px; } .items-section h2, .items-section h3 { font-size: 20px; margin-bottom: 15px; } .items-grid { grid-template-columns: 1fr; gap: 14px; } .item-card { padding: 14px; } .item-image { height: 180px; } .item-title { font-size: 18px; } .item-description { font-size: 14px; } .item-actions button { min-height: 48px; } .friend-name-section { padding: 16px; } .friend-name-section input { max-width: 100%; min-height: 48px; } .social-share-buttons { gap: 8px; flex-direction: column; } .btn-share { padding: 14px 20px; min-height: 48px; font-size: 15px; border-radius: 22px; justify-content: center; } .modal-content { width: 95%; padding: 18px; border-radius: 14px; } .modal-content h3 { font-size: 20px; margin-bottom: 15px; } .modal-close { top: 12px; left: 12px; font-size: 24px; } .modal-actions { flex-direction: column; gap: 8px; } .message { padding: 12px; font-size: 14px; } .share-link-container { flex-direction: column; } .wishlist-actions { flex-direction: column; } .item-actions { flex-direction: column; } .item-actions button { width: 100%; } .header-content { flex-direction: column; gap: 12px; } } /* Smallest screens (below 360px) */ @media (max-width: 359px) { body { padding: 8px; font-size: 14px; } .container { padding: 12px; border-radius: 12px; } header { margin-bottom: 16px; padding-bottom: 12px; } header h1 { font-size: 1.5em; margin-bottom: 6px; } .subtitle { font-size: 0.9em; } .auth-section { max-width: 100%; } .auth-tabs { gap: 6px; } .tab-btn { padding: 12px 8px; min-height: 48px; font-size: 0.9em; } .auth-form { padding: 14px; border-radius: 10px; } .auth-form h2 { font-size: 20px; margin-bottom: 12px; } .auth-form input { padding: 12px; min-height: 48px; font-size: 16px; margin-bottom: 10px; } .btn { padding: 12px 16px; min-height: 48px; font-size: 15px; } .wishlist-header { padding: 12px; } .edit-section, .add-item-section, .share-section { padding: 12px; } .edit-section h3, .add-item-section h3 { font-size: 17px; margin-bottom: 10px; } .items-section h2, .items-section h3 { font-size: 18px; margin-bottom: 12px; } .items-grid { grid-template-columns: 1fr; gap: 12px; } .item-card { padding: 12px; } .item-image { height: 160px; } .item-title { font-size: 17px; } .item-description { font-size: 13px; } .item-actions button { min-height: 48px; font-size: 14px; } .friend-name-section { padding: 12px; } .friend-name-section input { max-width: 100%; min-height: 48px; } .social-share-buttons { gap: 6px; flex-direction: column; } .btn-share { padding: 12px 16px; min-height: 48px; font-size: 14px; border-radius: 20px; justify-content: center; } .modal-content { width: 98%; padding: 14px; border-radius: 12px; } .modal-content h3 { font-size: 18px; margin-bottom: 12px; } .modal-close { top: 10px; left: 10px; font-size: 22px; } .modal-actions { flex-direction: column; gap: 6px; } .message { padding: 10px; font-size: 13px; } .share-link-container { flex-direction: column; } .wishlist-actions { flex-direction: column; } .item-actions { flex-direction: column; } .item-actions button { width: 100%; } .header-content { flex-direction: column; gap: 10px; } .help-text { font-size: 13px; } } /* ═══ لقطات المنتج (plans/036 · Gjafa Product Shots.dc.html) ═══════ ثلاثة أعمدة على سطح المكتب تنهار إلى عمود واحد تحت 600px. اللقطات بمقاس جوال 390×620، وaspect-ratio يحجز مساحتها قبل التحميل فلا يقفز التخطيط — CLS الصفحة 0.0009 وهو أفضل ما فيها. */ .gj-screens { max-width: 1100px; margin-inline: auto; padding-block: var(--sp-7); } .gj-screens h2 { font-size: var(--fs-5); line-height: var(--lh-5); color: var(--color-text); text-align: center; margin-block-end: var(--sp-6); } .gj-screens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .gj-screens-grid figure { margin: 0; text-align: center; } .gj-screens-grid img { width: 100%; height: auto; aspect-ratio: 390 / 620; border: 1px solid var(--color-border); display: block; } .gj-screens-grid figcaption { margin-block-start: var(--sp-3); font-size: var(--fs-3); font-weight: 500; color: var(--color-text-body); } @media (max-width: 600px) { .gj-screens-grid { grid-template-columns: 1fr; } } /* عنوان فرعي تحت البطل — يحمل موضوع الصفحة دون أن يزاحم السطر الإبداعي */ .gj-hero-sub { font-size: var(--fs-4); font-weight: 500; line-height: var(--lh-4); color: var(--color-primary-100); margin-block: var(--sp-3) var(--sp-4); } /* قسم «كيف يعمل» المدموج: اللقطات ثم الخطوات في إطار واحد */ .gj-how { max-width: 1100px; margin-inline: auto; padding-block: var(--sp-7); } .gj-how .gj-screens-grid { margin-block-end: var(--sp-7); } /* أسئلة سريعة داخل «كيف يعمل» */ .gj-faq-section { max-width: 1100px; margin-inline: auto; padding-block: var(--sp-6); } .gj-faq { max-width: 68ch; margin-inline: auto; } .gj-faq h3 { font-size: var(--fs-4); color: var(--color-text); margin-block-end: var(--sp-4); } .gj-faq-item { margin-block-end: var(--sp-4); } .gj-faq-item strong { display: block; color: var(--color-text); margin-block-end: var(--sp-1); } .gj-faq-item p { margin: 0; line-height: var(--lh-3); color: var(--color-text-body); } /* «كيف يعمل» · صفّان: النماذج ثم الخطوات. كان أربعة صفوف (خطوة + نموذج بارتفاع شاشة لكل واحد) فبلغ القسم 2.52 شاشة، وانكمش عمود النصّ إلى ~110px أي 13 محرفاً في السطر — والمقروء للعربية 45–75. الصفّان يجعلانه شاشة واحدة تقريباً. */ .gj-how-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); /* أضيق من الحاوية عمداً: النماذج بنسبة 390/620 فارتفاعها = 1.59×عرضها، وكل 100px عرض تشتري 159px ارتفاعاً للقسم. تضييقها إلى 760px يعيد ~160px، وهي ما يُبقي القسم ≤1.3 شاشة بعد أن صارت الخطوات عمودين. */ max-width: 760px; margin-inline: auto; margin-block-end: var(--sp-7); } .gj-how-shot { margin: 0; text-align: center; } .gj-how-shot img { width: 100%; height: auto; aspect-ratio: 390 / 620; border: 1px solid var(--color-border); display: block; } .gj-how-shot figcaption { margin-block-start: var(--sp-3); font-size: var(--fs-3); font-weight: 600; color: var(--color-text); } /* عمودان لا أربعة: أربعة أعمدة في حاوية 1100px تعطي 195px نصّاً صافياً = 23 محرفاً في السطر، والمقروء 45–75. العمودان يعطيان 446px = 45. */ .gj-how .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } /* حشوة أضيق داخل هذا القسم: .step يرث padding: 30px من النمط القديم، فيأكل 60px من عمود عرضه 245 — أي أن ثلث العمود هامش. */ .gj-how .step { padding: var(--sp-4); } @media (max-width: 900px) { /* عرض صريح لا max-width مع margin auto: هامش auto على عنصر شبكة يُلغي التمدّد، فينكمش الشكل إلى عرض تسميته حتى تصل الصورة — فتُحسب aspect-ratio على عرض خاطئ ولا تحجز المساحة (CLS 0.25). */ .gj-how-shots { grid-template-columns: 1fr; } .gj-how-shot { width: min(340px, 100%); margin-inline: auto; } } @media (max-width: 460px) { .gj-how .steps { grid-template-columns: 1fr; } } /* أسئلة سريعة داخل «كيف يعمل» */ .gj-faq { margin-block-start: var(--sp-7); max-width: 68ch; margin-inline: auto; } .gj-faq h3 { font-size: var(--fs-4); color: var(--color-text); margin-block-end: var(--sp-4); } .gj-faq-item { margin-block-end: var(--sp-4); } .gj-faq-item strong { display: block; color: var(--color-text); margin-block-end: var(--sp-1); } .gj-faq-item p { margin: 0; line-height: var(--lh-3); color: var(--color-text-body); } /* «كيف يعمل»: كل لقطة بجانب خطوتها — البرهان والشرح في سطر واحد. كانا صفّين منفصلين (ثلاث لقطات ثم أربع خطوات)، فكان الربط بينهما على القارئ. الأولى تحمل خطوتين لأن الإنشاء والإضافة يحدثان في الشاشة نفسها. تنهار إلى عمود واحد تحت 780px. */ .gj-how-row { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-6); align-items: center; margin-block-end: var(--sp-7); } .gj-how-row:last-of-type { margin-block-end: 0; } .gj-how-shot { margin: 0; text-align: center; } .gj-how-shot img { width: 100%; height: auto; aspect-ratio: 390 / 620; border: 1px solid var(--color-border); display: block; } .gj-how-shot figcaption { margin-block-start: var(--sp-3); font-size: var(--fs-3); font-weight: 500; color: var(--color-text-body); } .gj-how-row .steps { display: grid; gap: var(--sp-5); } @media (max-width: 780px) { .gj-how-row { grid-template-columns: 1fr; gap: var(--sp-5); } /* عرض صريح لا max-width مع margin auto: هامش auto على عنصر شبكة يُلغي التمدّد (stretch)، فينكمش الشكل إلى عرض محتواه — أي عرض التسمية وحدها (81px) — حتى تصل الصورة فتفرض عرضها الحقيقي. عندها تُحسب aspect-ratio على عرض خاطئ فلا تحجز المساحة، فتقفز الصفحة عند التحميل: CLS بلغ 0.25 مقابل خط أساس 0.0026 (قيس 2026-08-09). العرض الصريح يجعل الحجز صحيحاً قبل التحميل. */ .gj-how-shot { width: min(320px, 100%); margin-inline: auto; } } /* تلوين الإكمال التلقائي من المتصفح (سفاري وكروم) يفرض خلفية ليمونية على الحقل المملوء — لون من المتصفح لا من اللوحة، ويكسر الهوية في أول حقل يلمسه الزائر. الظلّ الداخلي بعرض 100px يغطّيه، وهو الحيلة الوحيدة التي تعمل: `background` نفسها لا تُقبل في هذه الحالة. واللون من الرمز لا خاماً: حارس الألوان أمسك القيمة الخام عند أول محاولة — ويمسكها داخل التعليقات أيضاً، وهو صحيح لأن ذكرها يدعو إلى نسخها. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--color-text); box-shadow: 0 0 0 100px var(--color-bg) inset; caret-color: var(--color-text); }