/* إعادة تعيين الأنماط الأساسية */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* خلفية متدرجة جذابة */
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    text-align: center;
}

/* الرأسية (Header) */
.app-header {
    background-color: #4CAF50; /* لون أخضر داكن */
    color: white;
    padding: 10px 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

.app-header h1 {
    font-size: 2.5em;
    font-weight: 700;
    letter-spacing: 1px;
}

/* شبكة القراء (Grid for Readers) */
.readers-grid {
    display: flex;
    flex-wrap: wrap; /* للسماح للأزرار بالانتقال لسطر جديد */
    justify-content: center; /* لتوسيط الأزرار */
    gap: 25px; /* المسافة الأفقية بين الأزرار */
    /* *** التعديل هنا: زيادة المسافة الرأسية بين الصفوف *** */
    row-gap: 150px; /* زيادة المسافة بين الصفوف للسماح للقائمة المنسدلة بالظهور */
    max-width: 1200px; /* لتحديد عرض أقصى للشبكة */
    width: 100%;
}

/* بطاقة القارئ (Reader Card) - للحاوية الخارجية للزر والقائمة المنسدلة */
.reader-card {
    position: relative; /* مهم لوضع القائمة المنسدلة */
    /* *** التعديل هنا: تحديد عرض ثابت لجميع البطاقات *** */
    width: 250px; /* عرض ثابت لكل بطاقة */
    /* *** إضافة خاصية ارتفاع ثابت لضمان نفس الحجم الابتدائي *** */
    height: 65px; /* ارتفاع افتراضي للبطاقة (يساوي ارتفاع الزر) */
    perspective: 1000px; /* لتأثير ثلاثي الأبعاد بسيط */
    display: flex; /* لجعل الزر يملأ البطاقة */
    justify-content: center;
    align-items: center;
}

/* زر القارئ (Reader Button) */
.reader-button {
    background-color: #007BFF; /* أزرق جذاب */
    color: white;
    border: none;
    padding: 18px 25px;
    font-size: 1.3em;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    width: 100%; /* *** التعديل هنا: اجعل الزر يملأ عرض البطاقة *** */
    height: 100%; /* *** التعديل هنا: اجعل الزر يملأ ارتفاع البطاقة *** */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.reader-button:hover {
    background-color: #0056b3; /* أزرق أغمق عند التمرير */
    transform: translateY(-5px) scale(1.02); /* تأثير رفع وتكبير بسيط */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.reader-button:active {
    transform: translateY(-2px) scale(0.98);
}

/* القائمة المنسدلة (Dropdown Content) */
.dropdown-content {
    display: none; /* مخفية افتراضياً */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10; /* *** التعديل هنا: زيادة الـ z-index لضمان الظهور فوق كل شيء *** */
    border-radius: 8px;
    overflow: hidden; /* لضمان عدم ظهور الزوايا الحادة */
    top: 100%; /* تظهر أسفل الزر */
    left: 0;
    margin-top: 10px; /* مسافة بين الزر والقائمة */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: right; /* محاذاة النص لليمين */
    font-size: 1.1em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-content a:hover {
    background-color: #e2e6ea;
    color: #007BFF;
}

/* إظهار القائمة المنسدلة عند التمرير أو النقر */
.reader-card.active .dropdown-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* استجابة التصميم لأحجام الشاشات المختلفة */
@media (max-width: 768px) {
    .app-header h1 {
        font-size: 2em;
    }
    .reader-button {
        font-size: 1.1em;
        padding: 15px 20px;
    }
    .reader-card {
        width: 45%; /* عمودين في الشاشات الأصغر */
        height: 60px; /* تعديل الارتفاع بناءً على حجم الخط */
    }
}

@media (max-width: 480px) {
    .app-header {
        padding: 15px 20px;
    }
    .app-header h1 {
        font-size: 1.8em;
    }
    .reader-card {
        width: 90%; /* عمود واحد في الشاشات الصغيرة جداً */
        height: 55px; /* تعديل الارتفاع بناءً على حجم الخط */
    }
}

/* (الكود السابق لـ style.css يبقى كما هو) */

/* القسم الجديد لتعليمات التنزيل */
.download-instructions {
    background-color: #e0f2f7; /* لون أزرق فاتح مريح */
    color: #004d40; /* لون نص أخضر داكن */
    padding: 25px 35px;
    margin-top: 60px; /* مسافة من شبكة القراء */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    width: 100%;
    font-size: 1.15em;
    line-height: 1.6;
    text-align: center; /* توسيط النص */
    border: 1px solid #b2ebf2; /* حدود خفيفة */
}

.download-instructions p {
    margin: 0; /* إزالة الهامش الافتراضي للفقرة */
    font-weight: 400;
}

.download-instructions p strong {
    font-weight: 700; /* جعل النص المهم أكثر سمكاً */
    color: #00796b; /* لون أغمق للنص المهم */
}

/* (بقية كود style.css كما هو، بما في ذلك Media Queries) */