@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Playfair+Display:wght@600&display=swap');  
  
* { box-sizing: border-box; }  
  
/* ===== متغيرات الوضع الفاتح ===== */
:root {  
 --primary: #111111;
 --secondary: #333333;
 --accent: #888888;
 --bg-body: #f5f5f5;
 --text-main: #222222;
 --text-light: #666666;
 --white: #ffffff;
 --card-bg: #ffffff;
 --nav-bg: rgba(255,255,255,0.96);
 --border-color: #e2e8f0;
 --input-bg: #fafafa;
 --footer-bg: #ffffff;
 --dropdown-bg: #ffffff;
 --user-card-bg: #f8fafc;
 --shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
}  

/* ===== متغيرات الوضع الداكن ===== */
[data-theme="dark"] {
 --primary: #f1f5f9;
 --secondary: #cbd5e1;
 --accent: #94a3b8;
 --bg-body: #0d0d0d;
 --text-main: #e2e8f0;
 --text-light: #94a3b8;
 --white: #1a1a1a;
 --card-bg: #1a1a1a;
 --nav-bg: rgba(10,10,10,0.97);
 --border-color: #2e2e2e;
 --input-bg: #0d0d0d;
 --footer-bg: #1a1a1a;
 --dropdown-bg: #1a1a1a;
 --user-card-bg: #111111;
 --shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
}

body {  
 font-family: 'Tajawal', sans-serif;  
 background-color: var(--bg-body);  
 color: var(--text-main);  
 margin: 0;  
 direction: rtl;  
 line-height: 1.8;
 transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== حركة الألوان ===== */
@keyframes headerGradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== الهيدر ===== */
header {  
 background: linear-gradient(-45deg, #000000, #1a1a1a, #3a3a3a, #111111);  
 background-size: 400% 400%;
 animation: headerGradientMove 12s ease infinite;
 color: #ffffff;  
 padding: 80px 20px;  
 text-align: center;  
 position: relative;  
 overflow: hidden;  
}

[data-theme="dark"] header {
 background: linear-gradient(-45deg, #000000, #0d0d0d, #1a1a1a, #000000);
 background-size: 400% 400%;
 animation: headerGradientMove 12s ease infinite;
}
  
header h1 {  
 font-size: clamp(1.8rem, 5vw, 3rem);
 margin: 0;  
 font-weight: 800;  
 letter-spacing: -1px;
 color: #ffffff;
}  
  
header p {  
 color: #94a3b8;  
 font-size: clamp(0.95rem, 2.5vw, 1.2rem);
 max-width: 600px;  
 margin: 20px auto 0;  
}  

.back-btn {  
 position: absolute; top: 30px; right: 30px;
 color: #ffffff; text-decoration: none;
 background: rgba(255,255,255,0.1);
 padding: 10px 20px; border-radius: 30px;
 backdrop-filter: blur(5px); transition: all 0.3s ease;
 z-index: 100; /* لضمان ظهوره فوق العناصر الأخرى */
}  
.back-btn:hover { background: var(--accent); }  
  
.container {  
 max-width: 1200px;  
 margin: -50px auto 50px;  
 padding: 0 20px;  
 position: relative;  
 z-index: 10;  
}  

/* ===== الشبكة والبطاقات (للصفحة الرئيسية) ===== */
.grid {  
 display: flex; flex-wrap: wrap;
 justify-content: center; gap: 20px;
}  

.card {  
 background: var(--card-bg);
 border-radius: 20px; padding: 30px;
 box-shadow: var(--shadow);  
 transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;  
 border: 1px solid var(--border-color);
 display: flex; flex-direction: column;
 justify-content: space-between;  
 flex: 0 0 calc(33.333% - 20px); min-width: 280px;   
}  
  
.card:hover {  
 transform: translateY(-10px);  
 box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2);  
 border-color: var(--accent);  
}  
  
.card h3 { color: var(--primary); font-size: 1.5rem; margin: 0 0 5px; }  
  
.en-title {  
 font-family: 'Playfair Display', serif;  
 color: var(--accent); font-size: 1rem;  
 display: block; margin-bottom: 20px;  
}

.btn {  
 display: block; text-align: center;  
 background: linear-gradient(-45deg, #111111, #333333, #555555, #111111);  
 background-size: 300% 300%;
 color: #ffffff !important;  
 padding: 15px; border-radius: 12px;  
 text-decoration: none; font-weight: bold;  
 margin-top: 20px; transition: all 0.4s ease;  
}

[data-theme="dark"] .btn {
 background: linear-gradient(-45deg, #1a1a1a, #2a2a2a, #404040, #1a1a1a);
 background-size: 300% 300%;
}

.btn:hover { 
 animation: headerGradientMove 3s ease infinite;
 box-shadow: 0 10px 20px rgba(0,0,0,0.3);
 color: #ffffff !important; 
 transform: translateY(-3px);
}  

/* ===== زر الوضع الداكن ===== */
.nav-toggle-btn {
 display: flex; align-items: center; justify-content: center;
 width: 38px; height: 38px;
 border-radius: 10px;
 border: 1.5px solid var(--border-color);
 background: var(--user-card-bg);
 color: var(--text-main);
 cursor: pointer;
 transition: all 0.25s ease;
 font-size: 1.1rem;
 flex-shrink: 0;
 padding: 0;
}
.nav-toggle-btn:hover {
 background: var(--primary); color: var(--bg-body);
 border-color: var(--primary); transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ===== صفحات التفاصيل (المقالات/الكتب) - التنسيق الأساسي للدسكتوب ===== */  
.book-detail {  
 background: var(--card-bg);
 border-radius: 20px; 
 padding: 60px; /* مساحة واسعة ومريحة للشاشات الكبيرة */ 
 box-shadow: var(--shadow);
 border: 1px solid var(--border-color);
}  

/* تنسيق النصوص داخل صفحة التفاصيل لتبدو احترافية */
.book-detail h1, .book-detail h2 {
 color: var(--primary);
 font-weight: 800;
 margin-bottom: 20px;
 line-height: 1.4;
}
.book-detail h1 { font-size: 2.2rem; }
.book-detail h2 { font-size: 1.8rem; margin-top: 40px; border-right: 4px solid var(--primary); padding-right: 15px; }

.book-detail h3 {
 color: var(--secondary);
 font-size: 1.4rem;
 font-weight: 700;
 margin-top: 30px;
 margin-bottom: 15px;
}

.book-detail p {
 font-size: 1.1rem;
 color: var(--text-main);
 margin-bottom: 20px;
 line-height: 1.9;
 text-align: justify; /* لترتيب حواف النص */
}

/* تنسيق صندوق الاقتباسات أو الملاحظات */
.book-detail .quote-box, .book-detail blockquote {
 background: var(--user-card-bg);
 padding: 25px;
 border-radius: 12px;
 border-right: 4px solid var(--accent);
 margin: 30px 0;
 font-style: italic;
 color: var(--text-light);
 font-size: 1.1rem;
 line-height: 1.8;
}

/* تنسيق القوائم والمحتويات */
.book-detail ul {
 padding-right: 25px;
 margin-bottom: 30px;
}
.book-detail li {
 font-size: 1.1rem;
 margin-bottom: 12px;
 color: var(--text-main);
}
  
.drive-btn {  
 display: flex; align-items: center; justify-content: center;  
 background: linear-gradient(45deg, var(--secondary), var(--accent));  
 color: #ffffff; padding: 20px; border-radius: 15px;  
 text-decoration: none; font-weight: 800; font-size: 1.2rem;  
 margin-top: 40px; box-shadow: 0 10px 20px rgba(0,0,0,0.2);  
 transition: transform 0.2s;  
}  
.drive-btn:hover { transform: scale(1.02); }  

/* ===== استجابة الشاشات المحسّنة (Responsive) ===== */

/* شاشات 4K/كبيرة جداً: 1600px+ */
@media (min-width: 1600px) {
 .container { max-width: 1500px; }
 .card { flex: 0 0 calc(25% - 20px); }
}

/* ديسكتوب كبير: 1200px–1599px */
@media (min-width: 1200px) and (max-width: 1599px) {
 .card { flex: 0 0 calc(33.333% - 20px); }
}

/* ديسكتوب عادي: 992px–1199px */
@media (min-width: 992px) and (max-width: 1199px) {  
 .card { flex: 0 0 calc(33.333% - 20px); }
}

/* آيباد أفقي / تابلت كبير: 768px–991px */
@media (min-width: 768px) and (max-width: 991px) {
 .card { flex: 0 0 calc(50% - 15px); min-width: 0; }
 header { padding: 60px 20px; }
 .container { margin-top: -35px; }
 /* تصغير هوامش صفحة التفاصيل للآيباد */
 .book-detail { padding: 40px; }
 .book-detail p, .book-detail li { font-size: 1.05rem; }
}

/* آيباد عمودي / تابلت صغير: 600px–767px */
@media (min-width: 600px) and (max-width: 767px) {
 .card { flex: 0 0 calc(50% - 12px); min-width: 0; border-radius: 16px; padding: 22px; }
 header { padding: 50px 18px; }
 header h1 { font-size: 2rem; }
 .container { margin-top: -28px; }
 
 /* تعديلات صفحة التفاصيل */
 .book-detail { padding: 30px 25px; border-radius: 16px; }
 .book-detail h1 { font-size: 1.8rem; }
 .book-detail h2 { font-size: 1.5rem; margin-top: 30px; }
 .book-detail h3 { font-size: 1.25rem; }
 .book-detail p, .book-detail li, .book-detail .quote-box { font-size: 1rem; }
 .drive-btn { padding: 18px; font-size: 1.1rem; }
}

/* موبايل (الحد الفاصل لمعظم الهواتف): أقل من 599px */
@media (max-width: 599px) {
 .card { flex: 0 0 100%; min-width: 0; border-radius: 14px; padding: 20px; }
 .card h3 { font-size: 1.3rem; }

 /* ===== تعديلات جوهرية للهيدر على الجوال ===== */
 header {
     padding: 40px 15px 60px; /* زيادة الهامش السفلي لاحتواء الزر */
     display: flex; /* استخدام فليكس لترتيب العناصر عمودياً */
     flex-direction: column;
     align-items: center;
     gap: 15px; /* مسافة مريحة بين العناصر */
 }
 header h1 {
     font-size: 1.7rem;
     letter-spacing: -0.5px;
     order: 1; /* العنوان أولاً */
 }
 header p {
     font-size: 0.9rem;
     order: 2; /* الوصف ثانياً */
     margin-top: 0;
 }
 
 /* ===== تعديل زر العودة على الجوال لتجنب التداخل ===== */
 .back-btn {
     position: static; /* إلغاء التثبيت المطلق */
     margin: 0 auto; /* تمركزه وسط الصفحة */
     order: 3; /* يظهر بعد الوصف */
     padding: 8px 15px;
     font-size: 0.9rem;
     width: auto; /* لضمان عدم امتداده بعرض الصفحة */
     display: inline-block; /* ليتجاوب مع centering */
 }
 .container {
     margin-top: -30px; /* تعديل الهامش السلبي */
     padding: 0 15px;
 }
 
 /* ===== الحل الجذري لمشكلة صفحة التفاصيل على الجوال ===== */
 .book-detail { 
     padding: 20px 15px; /* تقليل الهوامش الداخلية لعدم ضغط النص */
     border-radius: 14px; 
 }
 .book-detail h1 { font-size: 1.5rem; margin-bottom: 15px; }
 .book-detail h2 { font-size: 1.3rem; margin-top: 25px; border-right-width: 3px; padding-right: 10px; }
 .book-detail h3 { font-size: 1.15rem; margin-top: 20px; }
 .book-detail p { 
     font-size: 1rem; /* تكبير الخط ليكون مقروءاً على الجوال */
     line-height: 1.8; 
     text-align: right; /* إلغاء الضبط (justify) على الجوال لتجنب الفراغات الغريبة */
 }
 .book-detail ul { padding-right: 20px; }
 .book-detail li { font-size: 0.95rem; }
 .book-detail .quote-box, .book-detail blockquote { 
     padding: 15px; 
     font-size: 0.95rem; 
     margin: 20px 0; 
 }
 .book-detail img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
 .drive-btn { padding: 15px; font-size: 1.05rem; margin-top: 25px; }
}

/* موبايل صغير جداً: أقل من 400px */
@media (max-width: 399px) {
 .book-detail { padding: 15px 12px; }
 header h1 { font-size: 1.5rem; }
}

/* ===== وضع داكن للأقسام (بقية موقعك) ===== */
[data-theme="dark"] .search-input { background: var(--input-bg) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .search-input:focus { border-color: var(--accent) !important; }
[data-theme="dark"] .social-section, [data-theme="dark"] .testimonial-card { background: var(--card-bg) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .testimonial-text { color: var(--text-light); }
[data-theme="dark"] .user-details h4, [data-theme="dark"] .testimonials-section h2 { color: var(--primary); }
[data-theme="dark"] .user-details span { color: var(--accent); }
[data-theme="dark"] .stars { color: #fbbf24; }
[data-theme="dark"] .main-nav { background: var(--nav-bg) !important; border-bottom-color: var(--border-color) !important; }
[data-theme="dark"] .nav-logo { color: var(--primary) !important; }
[data-theme="dark"] .nav-links a { color: var(--text-light) !important; }
[data-theme="dark"] .nav-links a:hover { background: #222222 !important; color: var(--primary) !important; }
[data-theme="dark"] .nav-links a.active { background: var(--primary) !important; color: var(--bg-body) !important; }
[data-theme="dark"] .nav-user-card { background: var(--user-card-bg) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .nav-user-name, [data-theme="dark"] .dropdown-user-fullname, [data-theme="dark"] .login-title { color: var(--primary) !important; }
[data-theme="dark"] .nav-user-email, [data-theme="dark"] .dropdown-user-email, [data-theme="dark"] .login-divider { color: var(--accent) !important; }
[data-theme="dark"] .nav-user-dropdown { background: var(--dropdown-bg) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .dropdown-user-header { border-bottom-color: var(--border-color) !important; }
[data-theme="dark"] .login-right { background: #1a1a1a !important; }
[data-theme="dark"] .login-input { background: var(--input-bg) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .login-input:focus { border-color: var(--accent) !important; }
[data-theme="dark"] .login-input::placeholder { color: #444444 !important; }
[data-theme="dark"] .login-field-label, [data-theme="dark"] .login-greeting, [data-theme="dark"] .login-signup-link, [data-theme="dark"] footer a { color: var(--text-light) !important; }
[data-theme="dark"] .login-greeting span, [data-theme="dark"] .login-signup-link a { color: var(--primary) !important; }
[data-theme="dark"] .login-main-btn { background: #333333 !important; }
[data-theme="dark"] .login-divider::before, [data-theme="dark"] .login-divider::after { background: var(--border-color) !important; }

/* الفوتر */
footer {  
 text-align: center; padding: 40px;  
 color: var(--text-light); font-size: 0.9rem;  
 border-top: 1px solid var(--border-color);
 background: var(--footer-bg);
 margin-top: 50px;
 transition: background-color 0.3s ease;
}

/* ===== أزرار وإحصائيات الهيدر الجديد ===== */
.hero-label {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.15);
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    background: #ffffff;
    color: #000000;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
}

.btn-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.btn-hero-secondary {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s;
    font-family: inherit;
}

.btn-hero-secondary:hover {
    background: rgba(255,255,255,0.2);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.hero-stat { text-align: center; }
.hero-stat-num {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
}
.hero-stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}

/* ===== استكشف المزيد (Explore) ===== */
.khanjar-explore-container { max-width: 420px; margin: 0 auto; position: relative; }
.khanjar-explore-btn {
  width: 100%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  padding: 12px 20px; border-radius: 12px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background 0.2s, color 0.2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.khanjar-explore-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.explore-content-box {
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 20px; margin-top: 10px;
  box-shadow: var(--shadow); text-align: right;
}
.explore-welcome { font-size: 0.875rem; color: var(--text-light); margin-bottom: 14px; line-height: 1.6; }
.explore-buttons-wrapper { display: flex; flex-direction: column; gap: 8px; }
.explore-action-btn {
  text-decoration: none; background: var(--user-card-bg); color: var(--text-main);
  padding: 11px 14px; border-radius: 8px;
  font-weight: 600; font-size: 0.875rem; border: 1px solid var(--border-color);
  transition: background 0.15s, border-color 0.15s;
}
.explore-action-btn:hover { background: var(--primary); color: var(--bg-body); border-color: var(--primary); }

/* ===== مجتمعاتنا (Community) ===== */
.social-section { background: var(--user-card-bg); padding: 60px 0; border-top: 1px solid var(--border-color); }
.community-section { padding: 40px 20px; text-align: center; max-width: 1000px; margin: 0 auto; }
.community-section h2 {
  font-family: inherit; font-size: 1.75rem; font-weight: 800;
  letter-spacing: -0.5px; color: var(--text-main); margin-bottom: 12px;
}
.community-section > p {
  font-size: 0.95rem; color: var(--text-light);
  max-width: 500px; margin: 0 auto 40px; line-height: 1.7;
}
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.social-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 12px;
  text-decoration: none; font-weight: 600; font-size: 0.875rem;
  transition: transform 0.15s, box-shadow 0.15s; color: #fff !important;
}
.social-link:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.social-link.instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.social-link.threads { background: #1a1a1a; }
.social-link.telegram { background: #229ED9; }
.social-link.youtube { background: #FF0000; }
.social-link.whatsapp { background: #25D366; }
.social-link.pinterest { background: #E60023; }
.social-link.x { background: #000; }
.social-link.blogger { background: #f57d00; }
/* ============================================================== */
/* == تعطيل وضع القائمة وإخفاء الأزرار في الهواتف والآيباد معاً == */
/* ============================================================== */

/* يطبق على أي جهاز حجم شاشته 1024 بكسل أو أقل (هواتف + آيباد وتابلت) */
@media (max-width: 1024px) {
    /* إخفاء أزرار تبديل العرض (شبكة / قائمة) تماماً في الهواتف والآيباد */
    .view-toggle-bar {
        display: none !important;
    }
}

/* تنسيق ذكي منفصل للهواتف فقط (أقل من 768 بكسل) */
@media (max-width: 768px) {
    /* لجعل الكتب تظهر عمودياً (كتاب تحت كتاب) بشكل متناسق في الهواتف */
    #booksGrid {
        display: flex !important;
        flex-direction: column !important;
    }
}