/* هذا هو بداية محتوى ملف styles.css - الكود كما أرسلته أنت */


body {
    font-family: 'Tajawal', sans-serif;
    background: #f5f5f5;
    color: #333;
    margin: 0;
    padding: 20px; /* بادينغ خارجي للجسم */
}

.container {
    /* تم تحديد عرض أقصى معقول للشاشات الكبيرة والمتوسطة */
    /* يمكنك تغيير 800px إلى قيمة أكبر أو أصغر حسب تفضيلك لراحة القراءة */
    max-width: 800px;
    margin: 0 auto; /* توسيط الحاوية في منتصف الصفحة */
    background: white;
    border-radius: 15px;
    padding: 25px; /* بادينغ داخلي افتراضي للحاوية */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.deceased-profile {
    text-align: center;
    margin-bottom: 25px;
}

/* أنماط قسم التسبيح */
.tasbeeh-section {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 20px; /* بادينغ افتراضي */
    margin-bottom: 25px;
    border: 2px dashed #2c786c;
    text-align: center;
}

.tasbeeh-title {
    color: #2c786c;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.deceased-photo {
    width: 180px;
    height: 180px;
    border: 8px solid #2c786c;
    padding: 6px;
    object-fit: cover;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.deceased-photo:hover {
    transform: scale(1.05);
}

.deceased-name {
    color: #2c786c;
    font-size: 1.8rem;
    margin-top: 10px;
}

.dua-box {
    display: none;
    padding: 20px; /* بادينغ افتراضي */
    margin-bottom: 20px;
    border-radius: 10px;
    background: #f9f9f9;
    border: 1px solid #eee;
}

.dua-box.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

.dua-text {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 1.8rem; /* حجم مناسب للقراءة */
    line-height: 2; /* مسافة بين الأسطر */
    text-align: center;
    margin-bottom: 20px;
    color: #444;
}

.counter-container {
    text-align: center;
    position: relative;
    margin-top: 20px;
}

.counter {
    font-size: 2rem;
    font-weight: bold;
    color: #2c786c;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.donate-container {
    text-align: center;
    margin: 25px 0;
}

.current-count {
    color: #e74c3c;
    font-size: 1.8rem;
}

.separator {
    color: #777;
}

.max-count {
    color: #2c786c;
    font-size: 2.2rem;
}

.count-btn {
    background: #2c786c;
    color: white;
    border: none;
    padding: 18px 35px;
    border-radius: 30px;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
    box-shadow: 0 5px 15px rgba(44, 120, 108, 0.3);

    outline: none; /* هذه الخصائص الأصلية كانت هنا */
    box-shadow: none;
}

.count-btn:hover {
    background: #1e5a4e;
    transform: translateY(-2px);
}

.reset-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex; /* تم تغيير من block في بعض الأماكن إلى flex ليتناسب مع الأيقونة والنص */
    align-items: center;
    gap: 8px;
    margin: 30px auto;
}

.reset-btn:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

.donate-btn {
    background: #f39c12;
    color: white;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.donate-btn:hover {
    background: #e67e22;
    transform: translateY(-2px);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* أنماط قسم المشاركة */
.sharing-section {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 20px; /* بادينغ افتراضي */
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.sharing-message {
    text-align: center;
    margin-bottom: 25px;
}

.sharing-message i {
    color: #2c786c;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.sharing-message p {
    color: #444;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

.sharing-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.share-btn {
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
}

.share-btn i {
    font-size: 1.2rem;
}

.facebook { background: #1877f2; }
.whatsapp { background: #25d366; }
.copy-link { background: #2c786c; }

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* للجوال */
@media (max-width: 480px) {
    .share-btn {
        width: 100%;
        justify-content: center;
    }
}


/* تصميم قسم الآية والحديث وقسم الفاتحة */
.quran-section {
    background: #f8f9fa; /* أو #fff لقسم الفاتحة */
    border-radius: 15px;
    margin: 25px 0;
    padding: 25px; /* بادينغ افتراضي */
    text-align: center;
    border: 2px solid #2c786c33;
}
/* تحديد أكثر دقة لقسم الفاتحة إذا كان يحتاج بادينغ مختلف افتراضياً */
.memorial-section > .quran-section {
    background: #fff; /* خلفية بيضاء كما في كودك الأصلي */
    padding: 30px; /* بادينغ أكبر كما في كودك الأصلي */
    border: none; /* قد لا تحتاج حدود هنا */
}

.memorial-content {
    text-align: center; /* هذا السطر يوسط المحتوى الموجود بداخله */
}


.quran-text {
    font-family: 'Amiri', serif; /* يمكنك استبدال الخط حسب الرغبة */
    font-size: 2rem;
    color: #2c786c;
    line-height: 1.8;
    margin-bottom: 15px;
}

.hadith-text {
    display: block;
    font-size: 1.2rem;
    color: #444;
    margin-top: 20px;
    line-height: 1.6;
    font-style: italic;
}

/* لتحسين العرض على الجوال */
@media (max-width: 480px) {
    .quran-text {
        font-size: 1.6rem;
    }

    .hadith-text {
        font-size: 1rem;
    }
}


/* تصميم عداد الزوار */
.visitor-counter {
    background: linear-gradient(135deg, #2c786c, #1e5a4e);
    color: white;
    padding: 20px;
    border-radius: 15px;
    margin: 25px auto;
    max-width: 320px; /* يبقى بنفس العرض الأقصى ليبدو كبطاقة مميزة */
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border: 2px solid #ffffff33;
}

.counter-icon {
    background: #ffffff20;
    padding: 15px;
    border-radius: 50%;
    line-height: 0;
}

.counter-icon i {
    font-size: 1.8rem;
}

.counter-content {
    text-align: right;
}

.count-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

.count-text {
    font-size: 1rem;
    opacity: 0.9;
}

@media (max-width: 480px) {
    .visitor-counter {
        padding: 15px;
        gap: 12px;
    }

    .count-number {
        font-size: 1.8rem;
    }
}


/* تصميم قسم سورة الفاتحة التذكاري */
.memorial-section {
    margin: 40px 0;
    text-align: center;
}

.photo-wrapper {
    width: 250px;
    height: 250px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #2c786c;
    box-shadow: 0 10px 30px rgba(44,120,108,0.2);
}

.memorial-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.memorial-photo:hover {
    transform: scale(1.05);
}

.play-button {
    background: #2c786c;
    transition: all 0.3s, transform 0.2s;
    color: white;
    padding: 15px 45px;
    border: none;
    border-radius: 30px;
    font-size: 1.4rem;
    cursor: pointer;
    margin-top: 20px;
    gap: 12px;
    display: inline-flex; /* للحفاظ على الأيقونة والنص في سطر واحد */
    align-items: center; /* محاذاة عمودية */
    justify-content: center; /* محاذاة أفقية */

     display: block; /* جعله عنصراً كتلية */
     margin: 20px auto; /* توسيط أفقي */
}

.play-button.playing {
    background: #1e5a4e;
    box-shadow: 0 5px 15px rgba(30, 90, 78, 0.3);
}

.play-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(44,120,108,0.3);
    transform: translateY(-2px);
}

.play-button i {

     font-size: 1.6rem; /* تكبير الأيقونة */
    margin-left: 0;
}

.surah-title {
    color: #2c786c;
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 15px;
}

.basmala {
    font-family: 'Amiri', serif;
    font-size: 2.5rem;
    color: #2c786c;
    text-align: center;
    margin-bottom: 30px;
}

.verses {
    font-family: 'Amiri', serif;
    font-size: 1.8rem;
    line-height: 2.5;
    color: #333;
}

@media (max-width: 768px) {
    .verse {
        flex-direction: column;
        align-items: flex-end;
    }

    .verse-number {
        margin: 10px 0 0;
    }
}

/* تصميم جديد مع وضوح النص */
.tribute-section {
    padding: 40px 20px;
    background: #f5f5f5;
}

.tribute-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.tribute-image {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    height: 400px; /* ارتفاع ثابت */
}

.tribute-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* تغطية المساحة دون تشويه */
    object-position: center; /* تركيز على وسط الصورة */
}

.tribute-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
}

.tribute-title {
    color: #2c786c;
    font-size: 2.2rem;
    margin-bottom: 20px;
    position: relative;
}

.tribute-title::after {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    background: #2c786c;
    margin: 15px auto;
}

.tribute-message {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.8;
}

.tribute-dua {
    font-family: 'Amiri', serif;
    font-size: 1.4rem;
    color: #444;
    line-height: 2.2;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border-right: 4px solid #2c786c;
}

@media (min-width: 768px) {
    .tribute-container {
        flex-direction: row;
        align-items: center;
    }

    .tribute-image {
        flex: 1;
    }

    .tribute-card {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .tribute-image {
        height: 300px;
    }
}



.surah-container {
    background: #f8f5ee;
    border-radius: 15px;
    padding: 30px;
    margin: 40px auto;
    max-width: 900px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

.surah-header {
    text-align: center;
    margin-bottom: 30px;
    color: #2c786c;
    border-bottom: 2px dashed #2c786c;
    padding-bottom: 15px;
}

.quran-pages {
    position: relative;
    min-height: 600px;
}

.quran-page {
    display: none;
    animation: fadeIn 0.5s ease;
}

.quran-page.active {
    display: block;
}

.quran-image {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.page-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0 10px; /* إضافة بادينغ جانبي للأزرار ورقم الصفحة */
}

.page-btn {
    background: #2c786c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex; /* للحفاظ على الأيقونة والنص في سطر واحد */
    align-items: center;
    gap: 5px; /* مسافة بين الأيقونة والنص */
}

.page-btn:hover {
    background: #1e5a4e;
}

.page-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.page-number {
    font-family: 'Amiri', serif;
    font-size: 1.2rem;
    color: #555;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 480px) {
    .count-btn {
        font-size: 1.2rem;
        padding: 15px 25px;
    }

    .deceased-photo {
        width: 140px;
        height: 140px;
    }
}

/* أنماط قسم المشاركة */
@media (max-width: 480px) {
    .share-btn {
        width: 100%;
        justify-content: center;
    }
}


/* لتحسين العرض على الجوال */
@media (max-width: 480px) {
    .quran-text {
        font-size: 1.6rem;
    }

    .hadith-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .visitor-counter {
        padding: 15px;
        gap: 12px;
    }

    .count-number {
        font-size: 1.8rem;
    }
}

/* ========== استعلام ميديا مجمع للشاشات الصغيرة (480 بكسل وأقل) ========== */
/* هنا نجمع جميع الأنماط التي كانت مكررة ونضيف التعديلات المطلوبة */
@media (max-width: 480px) {
    body {
         padding: 10px; /* تقليل البادينغ الخارجي جداً على الشاشات الصغيرة جداً */
    }

    .container {
        /* إبقاء العرض الأقصى 800px (أو ما اخترته) ليعمل بشكل طبيعي على الشاشات الأكبر من 480px */
        /* max-width: 800px; */ /* لا تغير هذا هنا، تم تعيينه في القاعدة العامة */
        padding: 15px 10px; /* تقليل البادينغ الداخلي للحاوية الرئيسية على الموبايل */
        /* 15px علوي/سفلي، 10px جانبي */
    }

    /* تقليل حجم الصور الشخصية قليلاً */
    .deceased-photo {
        width: 140px;
        height: 140px;
        padding: 4px; /* تقليل بادينغ الصورة */
        border-width: 6px; /* تقليل سمك الإطار */
    }
     .deceased-name {
         font-size: 1.6rem; /* تصغير اسم المتوفى قليلاً */
     }


    /* تقليل البادينغ الداخلي لجميع العناصر التي تحتوي على نصوص طويلة أو محتوى هام */
    .tasbeeh-section,
    .dua-box,
    .sharing-section,
    .quran-section, /* يشمل قسم الآية وقسم الفاتحة */
    .tribute-card,
    .surah-container {
        padding: 15px 10px; /* 15 بكسل علوي وسفلي، 10 بكسل جانبي */
    }

    /* تعديل حجم الخطوط الرئيسية للقراءة على الموبايل */
     .dua-text {
        font-size: 1.5rem; /* تصغير الخط قليلاً ليلائم الأسطر الأقصر */
        line-height: 1.8; /* تقليل مسافة الأسطر قليلاً */
     }
    .quran-text { /* آية "إنا لله وإنا إليه راجعون" */
        font-size: 1.6rem; /* تصغير الخط قليلاً */
        line-height: 1.6;
    }
    .hadith-text { /* نص الحديث */
        font-size: 0.9rem; /* تصغير أكثر قليلاً */
        line-height: 1.5;
    }
     .verses { /* نص سورة الفاتحة */
         font-size: 1.5rem; /* تصغير الخط قليلاً */
         line-height: 2; /* مسافة معقولة بين الأسطر */
     }
     .basmala {
         font-size: 2rem; /* تصغير البسملة */
     }
     .tribute-message { /* رسالة "لا تحرمه الدعاء..." */
         font-size: 1.2rem; /* تصغير الخط */
         line-height: 1.6;
     }
     .tribute-dua { /* دعاء النعي */
         font-size: 1.1rem; /* تصغير الخط */
         line-height: 1.8;
         padding: 15px 10px; /* تقليل بادينغ الدعاء أيضاً */
     }
      .tribute-title {
          font-size: 1.8rem; /* تصغير عنوان النعي */
      }
     .sharing-message p {
         font-size: 1rem; /* تصغير نص المشاركة */
     }


    /* تعديل حجم أزرار العداد والمشاركة */
    .count-btn {
        font-size: 1.2rem;
        padding: 15px 25px;
        min-width: 180px; /* تقليل الحد الأدنى للعرض قليلاً */
    }
     .share-btn {
        width: 100%;
        justify-content: center;
         font-size: 0.9rem; /* تصغير خط أزرار المشاركة */
         padding: 10px 20px;
     }
     .donate-btn {
         font-size: 1.1rem; /* تصغير خط زر التصدق */
         padding: 10px 20px;
     }

    /* تعديل عرض عداد الزوار */
    .visitor-counter {
        padding: 15px;
        gap: 12px;
         max-width: 280px; /* تقليل العرض الأقصى لعداد الزوار */
    }
    .count-number {
        font-size: 1.8rem;
    }
     .count-text {
         font-size: 0.9rem;
     }

    /* تعديل أزرار تقليب سورة يس */
     .page-controls {
         padding: 0 5px; /* تقليل بادينغ أزرار تقليب سورة يس */
     }
     .page-btn {
         font-size: 0.9rem; /* تصغير خط أزرار التقليب */
         padding: 8px 15px;
     }
      .page-number {
          font-size: 1rem; /* تصغير رقم الصفحة */
      }

     /* ارتفاع أقل لصورة النعي على الموبايل */
     .tribute-image {
        height: 250px;
     }


}

/* استعلام ميديا خاص للشاشات بين 481 بكسل و 767 بكسل (غير الموبايل الصغير ولكن ليس التابلت الكبير/الديسكتوب) */
/* قد تحتاج لتعديل هذه القيم بناءً على تجربتك */
@media (min-width: 481px) and (max-width: 767px) {
     .container {
         padding: 20px; /* بادينغ أقل قليلاً من الديسكتوب */
         max-width: 100%; /* السماح للحاوية بأخذ العرض الكامل في هذا النطاق (مع البادينغ) */
     }
     /* قد تحتاج أيضاً لتعديل بادينغ العناصر الداخلية إذا كانت لا تزال ضيقة في هذا النطاق */
     /*
     .tasbeeh-section,
     .dua-box,
     .sharing-section,
     .quran-section,
     .tribute-card,
     .surah-container {
         padding: 20px 15px;
     }
     */
     /* قد تحتاج أيضاً لتعديل أحجام الخطوط قليلاً في هذا النطاق إذا لزم الأمر */
}

/* ========== أنماط قسم الدعاء الشامل الجديد ========== */
.comprehensive-dua-section {
    background: #f8f9fa; /* خلفية فاتحة مثل باقي الأقسام */
    border-radius: 15px;
    padding: 25px; /* بادينغ داخلي */
    margin: 25px auto; /* هامش علوي وسفلي وتوسيط */
    /* max-width: 800px; */ /* أضف هذا السطر إذا كنت قد حذفت .container وتريد تحديد عرض أقصى لهذا القسم */
    /* وإلا، علّق عليه أو احذفه إذا كانت الحاوية .container موجودة */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* إضافة ظل */
    text-align: center; /* توسيط المحتوى */
}

.comprehensive-dua-section .section-title {
    color: #2c786c; /* لون مميز للعنوان */
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.comprehensive-dua-section .dua-text-comprehensive {
    font-family: 'Noto Naskh Arabic', serif; /* خط عربي مناسب للدعاء */
    font-size: 1.6rem; /* حجم خط مناسب للقراءة */
    line-height: 2; /* مسافة بين الأسطر لراحة القراءة */
    color: #444; /* لون نص معقول */
    text-align: justify; /* محاذاة النص لليمين واليسار إذا كان طويلاً */
    text-align-last: center; /* توسيط السطر الأخير في النص المحاذى */
    margin: 0; /* إزالة أي هامش افتراضي */
}

/* تعديلات للموبايل داخل استعلام الميديا (max-width: 480px) */
/* ابحث عن استعلام الميديا @media (max-width: 480px) { ... } الموجود لديك */
/* وأضف القواعد التالية بداخله */
@media (max-width: 480px) {
    /* ... الأنماط الأخرى الموجودة بالفعل في استعلام الميديا ... */

    .comprehensive-dua-section {
        padding: 15px 10px; /* بادينغ أقل على الموبايل (علوي/سفلي 15، جانبي 10) */
        margin: 15px auto; /* هامش أقل (علوي/سفلي 15، جانبي تلقائي للتوسيط) */
        /* max-width: none; */ /* أضف هذا السطر إذا كنت قد حذفت .container وتريد أن يأخذ العرض المتاح على الموبايل */
    }

    .comprehensive-dua-section .section-title {
        font-size: 1.4rem; /* تصغير حجم العنوان قليلاً */
    }

    .comprehensive-dua-section .dua-text-comprehensive {
        font-size: 1.3rem; /* تصغير حجم الخط قليلاً */
        line-height: 1.8;
        text-align: right; /* غالباً لا تحتاج justify على الأسطر القصيرة جداً في الموبايل */
         text-align-last: right; /* لضمان محاذاة السطر الأخير لليمين */
    }

    /* ... بقية أنماط استعلام الميديا الموجودة لديك ... */
}

/* **قاعدة لتعميم إزالة إطار التركيز والظل من جميع الأزرار والعناصر التفاعلية عند النقر أو التركيز** */
/* تم نقل هذه القاعدة إلى هنا لتصحيح التنسيق */
button:focus,
button:active,
.play-button:focus,
.play-button:active,
.share-btn:focus,
.share-btn:active,
.reset-btn:focus,
.reset-btn:active,
.page-btn:focus,
.page-btn:active,
.donate-btn:focus, /* إذا كان زر التصدق رابطاً */
.donate-btn:active, /* إذا كان زر التصدق رابطاً */
a:focus, /* للروابط عامة */
a:active { /* للروابط عامة */
    outline: none; /* إزالة الإطار الأزرق الافتراضي */
    box-shadow: none; /* إزالة أي ظل افتراضي قد يظهر عند التركيز */
}

/* يمكنك أيضاً استهداف عناصر الإدخال إذا كانت تظهر عليها المشكلة */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: none;
}

/* **نهاية القاعدة المؤكدة** */

/* هذا هو نهاية محتوى ملف styles.css */



/* **أنماط زر تبديل الثيم** */
#theme-toggle-button {
    position: fixed; /* يجعل الزر ثابتاً في الشاشة */
    top: 20px; /* مسافة من الأعلى */
    left: 20px; /* مسافة من اليسار (لتجنب التداخل مع الهامش الأيمن في RTL) */
    z-index: 1000; /* يضمن ظهور الزر فوق المحتوى الآخر */
    background: #2c786c; /* لون خلفية افتراضي (يمكن تغييره) */
    color: white; /* لون الأيقونة/النص */
    border: none;
    border-radius: 50%; /* زر دائري */
    width: 40px; /* عرض الزر */
    height: 40px; /* ارتفاع الزر */
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: background 0.3s ease, color 0.3s ease; /* انتقال سلس للألوان */
    display: flex; /* لتوسيط الأيقونة داخل الزر */
    justify-content: center;
    align-items: center;
}

#theme-toggle-button:hover {
    background: #1e5a4e; /* لون عند التحليق */
}

/* تعديل لون الزر في الثيم الظلامي */
body.dark-theme #theme-toggle-button {
    background: #4a4a4a; /* خلفية داكنة للزر في الثيم الظلامي */
    color: #eeeeee; /* لون فاتح للأيقونة في الثيم الظلامي */
}

body.dark-theme #theme-toggle-button:hover {
    background: #555; /* خلفية أغمق قليلاً عند التحليق في الثيم الظلامي */
}

/* **تأكد من وجود قواعد الثيم الظلامي العامة هنا أو في مكان آخر في الملف** */
/* تبدأ بـ body.dark-theme { ... } */