/* 1. تعيين الخط الافتراضي (للإنجليزية وأي لغة أخرى) */ body { font-family: 'Outfit', sans-serif; } /* 2. تعيين الخط الخاص باللغة العربية فقط */ /* هذا السطر يستهدف أي صفحة تبدأ بـ */ html[lang="ar"] body { font-family: 'Tajawal', sans-serif; } /* تحسين إضافي: لضبط اتجاه النصوص تلقائياً */ html[lang="ar"] { direction: rtl; text-align: right; } html[lang="en"] { direction: ltr; text-align: left; } html { scroll-behavior: smooth; overflow-y: scroll; scroll-padding-top: 80px; } .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in.appear { opacity: 1; transform: translateY(0); } /* البطاقات */ .prompt-card { background: white; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; border: 1px solid rgba(0, 0, 0, 0.05); } .dark .prompt-card { background: #1f2937; border-color: rgba(255, 255, 255, 0.1); } .prompt-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .prompt-media img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.3s ease; user-select: none; } .prompt-content { padding: 1.5rem; } .tag { display: inline-block; background: rgba(126, 34, 206, 0.1); color: #7e22ce; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; } .dark .tag { background: rgba(167, 139, 250, 0.2); color: #c4b5fd; } .prompt-text-container { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.5s ease; padding: 0 1rem; } .prompt-text-container.active { max-height: 500px; opacity: 1; padding: 1rem; } .prompt-text { background-color: #f3f4f6; border-radius: 8px; padding: 1rem; font-family: monospace; font-size: 0.875rem; line-height: 1.6; color: #1f2937; border: 1px solid #e5e7eb; white-space: pre-wrap; word-wrap: break-word; } .dark .prompt-text { background-color: #374151; color: #d1d5db; border-color: #4b5563; } /* الفلاتر */ .filter-container { background: #fff; border-radius: 12px; padding: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; } .dark .filter-container { background: #1f2937; } .filter-btn { background-color: #f3f4f6; color: #4b5563; border-radius: 9999px; transition: all 0.2s ease; border: 1px solid transparent; display: inline-block; } .dark .filter-btn { background-color: #374151; color: #d1d5db; } .filter-btn:hover { background-color: #e5e7eb; } .dark .filter-btn:hover { background-color: #4b5563; } .filter-btn.active { background-color: #7e22ce; color: white; font-weight: 600; border-color: #5D5CDE; } /* === MASONRY LAYOUT CONFIGURATION (FIXED) === */ /* تم إصلاح المشكلة هنا باستبدال column-count بـ Flexbox */ .prompts-grid { display: flex; flex-direction: row; gap: 1.5rem; /* المسافة بين الأعمدة */ align-items: flex-start; width: 100%; } .masonry-column { display: flex; flex-direction: column; gap: 1.5rem; /* مسافة بين البطاقات عمودياً */ flex: 1; min-width: 0; } /* Mobile: عمود واحد */ @media (max-width: 767px) { .prompts-grid { flex-direction: column; } .masonry-column { width: 100%; } } @media (min-width: 768px) and (max-width: 1023px) { .prompts-grid { display: flex; gap: 2rem; } .masonry-column { width: 50%; } } @media (max-width: 767px) { .prompts-grid { display: block; } } /* === FIX: إصلاح تداخل الأزرار في هذه الصفحة === */ .prompt-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 1rem !important; } .toggle-prompt-btn { grid-column: span 2 !important; width: 100% !important; margin-bottom: 0 !important; } .copy-prompt-btn, .share-btn { width: 100% !important; flex: none !important; } /* الشارة المميزة والأزرار العائمة */ .premium-badge { position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%); color: #000; font-weight: 800; font-size: 0.75rem; padding: 6px 12px; border-radius: 999px; z-index: 10; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 6px; } .buy-btn { background: linear-gradient(135deg, #7e22ce 0%, #5D5CDE 100%); color: white !important; width: 100%; text-align: center; padding: 12px; border-radius: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; margin-top: 5px; } .floating-coffee-btn { animation: float-wave 4s ease-in-out infinite; } @keyframes float-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .support-text { font-size: 0.8rem; font-weight: 600; color: #374151; text-align: center; margin-bottom: 8px; display: block; } .dark .support-text { color: #e5e7eb; } /* النشرة البريدية و Lightbox */ #newsletter-modal-overlay, #image-lightbox-overlay { display: none; opacity: 0; transition: opacity 0.3s ease-in-out; position: fixed; inset: 0; z-index: 2002; background-color: rgba(0, 0, 0, 0.6); align-items: center; justify-content: center; } #newsletter-modal-overlay.visible, #image-lightbox-overlay.visible { display: flex; opacity: 1; } #newsletter-modal-content { transform: scale(0.95); opacity: 0; transition: all 0.3s ease-in-out; } #newsletter-modal-overlay.visible #newsletter-modal-content { transform: scale(1); opacity: 1; } body.modal-open { overflow: hidden; } /* زر إغلاق اللايت بوكس */ #lightbox-close-btn { position: absolute; top: 1rem; right: 1rem; color: white; font-size: 2.5rem; background: none; border: none; cursor: pointer; }