/*
 * تنسيقات عامة للجسم والخطوط
 */
html, body { /* تم تعديل هذا الجزء لضمان أن HTML و Body يشغلان كامل الارتفاع بمرونة */
    height: 100%; /* جعل HTML و Body يشغلان كامل ارتفاع النافذة */
    margin: 0; /* إزالة الهامش الافتراضي */
    font-family: 'Cairo', 'Noto Naskh Arabic', sans-serif; /* استخدام خطوط عربية أنيقة */
    text-align: center; /* توسيط جميع النصوص */
    direction: rtl; /* اتجاه النص من اليمين لليسار للعربية */
}

body {
    display: flex; /* استخدام Flexbox لتوسيط المحتوى */
    justify-content: center; /* توسيط أفقي */
    align-items: center; /* توسيط عمودي */
    background: linear-gradient(135deg, #0a0a2a, #2a0a3a); /* خلفية داكنة متدرجة */
    color: #f0f0f0; /* لون النص الرئيسي فاتح */
    overflow: hidden; /* إخفاء أي محتوى يتجاوز حدود الحدود بشكل عام للحفاظ على تأثير الخلفية */
}

/*
 * حاوية رئيسية لتوسيط ودمج العناصر البصرية الخلفية
 */
.main-wrapper {
    position: relative; /* لتحديد موقع العناصر المطلقة بداخله */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-grow: 1; /* السماح للحاوية بالنمو لملء المساحة المتاحة عمودياً */
    padding: 20px;
    overflow-y: auto; /* السماح بالتمرير العمودي إذا تجاوز المحتوى الارتفاع المتاح */
    /* تأثيرات خلفية إضافية (نقاط مضيئة متحركة) */
    background: radial-gradient(circle at top left, rgba(60, 100, 255, 0.2) 0%, transparent 40%),
                radial-gradient(circle at bottom right, rgba(255, 60, 180, 0.2) 0%, transparent 40%);
    background-size: 200% 200%;
    animation: backgroundMove 15s ease infinite alternate; /* حركة بطيئة للخلفية */
}

/* حركة خلفية الـ wrapper */
@keyframes backgroundMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/*
 * صندوق المحتوى الرئيسي بتصميم "زجاجي" عصري
 */
.content-panel {
    background: rgba(255, 255, 255, 0.08); /* خلفية شفافة جداً */
    backdrop-filter: blur(10px); /* تأثير التمويه الزجاجي */
    -webkit-backdrop-filter: blur(10px); /* دعم متصفحات الويب كيت */
    border: 1px solid rgba(255, 255, 255, 0.18); /* حدود شفافة خفيفة */
    border-radius: 20px; /* حواف دائرية أكثر */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* ظل عميق */
    padding: 30px 30px; /* تم تقليل المسافة الداخلية لجعله أصغر */
    max-width: 550px; /* تم تقليل أقصى عرض لجعل الصندوق أصغر */
    width: 100%;
    animation: slideInUp 1.2s ease-out forwards; /* تأثير ظهور من الأسفل */
    transform: translateY(20px); /* ابدأ قليلاً من الأسفل */
    opacity: 0; /* ابدأ بشفافية كاملة */
    display: flex; /* استخدام فليكس بوكس لترتيب العناصر داخله */
    flex-direction: column; /* ترتيب العناصر عمودياً */
    justify-content: center; /* توسيط العناصر عمودياً */
    align-items: center; /* توسيط العناصر أفقياً */
}

/* حركة ظهور الصندوق */
@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * تنسيقات العنوان الرئيسي "انتظرونا قريباً جداً..."
 */
h1 {
    font-family: 'Noto Naskh Arabic', serif; /* استخدام خط مختلف للعناوين لمزيد من التميز */
    font-size: 3.2em; /* تم تقليل حجم الخط لجعل العنوان أصغر */
    color: #8aff8a; /* لون أخضر فاتح نيون لجذب الانتباه */
    text-shadow: 0 0 15px rgba(138, 255, 138, 0.7); /* ظل متوهج */
    margin-bottom: 20px; /* تم تقليل المسافة السفلية هنا */
    letter-spacing: 1.5px; /* تباعد الحروف لمظهر أفضل */
}

/*
 * تنسيقات رسائل التوضيح
 */
.update-message, .alternative-message, .closing-note {
    font-size: 1.1em; /* تم تقليل حجم الخط */
    line-height: 1.6;
    margin-bottom: 15px; /* تم تقليل المسافة السفلية هنا */
    color: #e0e0e0; /* لون نص رمادي فاتح */
}

.update-message strong {
    color: #ffe07a; /* لون ذهبي للكلمات المهمة */
}

/*
 * تنسيقات عامة للأزرار (الروابط)
 */
.action-btn {
    display: block; /* جعل الزر يأخذ سطر كامل */
    width: fit-content; /* عرض الزر يتناسب مع محتواه */
    margin: 0 auto 15px auto; /* تم تقليل المسافة السفلية هنا */
    padding: 14px 28px; /* تم تقليل المسافة الداخلية العمودية هنا */
    border-radius: 50px; /* حواف دائرية جداً */
    text-decoration: none; /* إزالة الخط السفلي */
    font-weight: bold;
    font-size: 1.15em; /* تم تقليل حجم الخط قليلاً */
    transition: all 0.4s ease; /* حركة سلسة عند التفاعل */
    position: relative; /* لتأثير الظل المتوهج */
    overflow: hidden; /* لإخفاء أي عناصر تخرج عن حدود الزر */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); /* ظل للزر */
    background-origin: border-box; /* لضمان أن التدرج اللوني يبدأ من حافة الحدود */
    background-clip: padding-box;
    cursor: pointer; /* لإظهار مؤشر اليد عند المرور على الأزرار */
    border: none; /* إزالة الحدود الافتراضية للأزرار */
}

/*
 * تأثير الخلفية المتوهجة عند المرور على الأزرار
 */
.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #ff00c3, #00d4ff, #ff00c3); /* تدرج لوني جذاب */
    z-index: -1; /* وضعه خلف النص */
    border-radius: 50px;
    filter: blur(10px); /* تمويه لتأثير الوهج */
    opacity: 0;
    transition: opacity 0.4s ease;
}

.action-btn:hover::before {
    opacity: 1; /* إظهار الوهج عند المرور */
}

/*
 * تنسيقات الزر الرئيسي للموقع الجديد
 */
.main-site-btn {
    background: linear-gradient(45deg, #1abc9c, #2ecc71); /* تدرج أخضر مزرق */
    color: #fff;
    border: 2px solid transparent; /* حدود شفافة لتأثير الوهج */
}

.main-site-btn:hover {
    transform: translateY(-5px) scale(1.03); /* رفع وتكبير بسيط */
    box-shadow: 0 10px 30px rgba(46, 204, 113, 0.4); /* ظل أخضر متوهج */
}

.main-site-btn .link-url {
    display: block; /* جعل الرابط في سطر منفصل */
    font-size: 0.8em; /* تم تقليل حجم الخط هنا */
    opacity: 0.8;
    margin-top: 3px; /* تم تقليل المسافة هنا */
    font-family: 'Cairo', sans-serif; /* التأكد من استخدام خط القاهرة للرابط */
}

/*
 * تنسيقات الزر الثانوي للمكتبة الرياضية
 */
.sport-library-btn {
    background: linear-gradient(45deg, #3498db, #8e44ad); /* تدرج أزرق بنفسجي */
    color: #fff;
    border: 2px solid transparent;
}

.sport-library-btn:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4); /* ظل أزرق متوهج */
}

/*
 * تنسيقات الزر الجديد لتوليد الرسالة الملهمة
 */
.generate-message-btn {
    background: linear-gradient(45deg, #f39c12, #e74c3c); /* تدرج برتقالي إلى أحمر */
    color: #fff;
    border: 2px solid transparent;
    margin-top: 20px; /* تم تقليل المسافة العلوية هنا */
}

.generate-message-btn:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 30px rgba(243, 156, 18, 0.4);
}

/*
 * تنسيقات مؤشر التحميل
 */
.loading-indicator {
    margin-top: 10px; /* تم تقليل المسافة العلوية هنا */
    font-size: 1em; /* تم تقليل حجم الخط هنا */
    color: #ffe07a;
    animation: pulse 1.5s infinite; /* تأثير نبض */
}

.loading-indicator.hidden {
    display: none; /* إخفاء مؤشر التحميل افتراضياً */
}

@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

/*
 * تنسيقات النص الختامي
 */
.closing-note {
    font-size: 1em; /* تم تقليل حجم الخط هنا */
    margin-top: 20px; /* تم تقليل المسافة العلوية هنا */
    color: #b0b0b0; /* لون رمادي أفتح */
}

/*
 * تنسيقات نافذة المودال (المنبثقة)
 */
.modal {
    display: flex; /* استخدام فليكس بوكس لتوسيط المحتوى داخل المودال */
    justify-content: center;
    align-items: center;
    position: fixed; /* تثبيت المودال في viewport */
    z-index: 1000; /* جعله فوق كل العناصر الأخرى */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* السماح بالتمرير إذا كان المحتوى كبيراً */
    background-color: rgba(0, 0, 0, 0.7); /* خلفية سوداء شبه شفافة */
    backdrop-filter: blur(5px); /* تأثير تمويه خفيف للخلفية */
    -webkit-backdrop-filter: blur(5px);
    animation: fadeInModal 0.3s ease-out; /* ظهور سلس للمودال */
}

.modal.hidden {
    display: none; /* إخفاء المودال افتراضياً */
}

.modal-content {
    background: linear-gradient(135deg, #333d4e, #1a202c); /* تدرج داكن لصندوق المودال */
    margin: 8% auto; /* تم تقليل المسافة العلوية لجعله أعلى قليلاً */
    padding: 25px; /* تم تقليل المسافة الداخلية للمودال */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    width: 80%; /* عرض الصندوق */
    max-width: 450px; /* أقصى عرض تم تقليله */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); /* ظل عميق */
    position: relative;
    animation: zoomIn 0.3s ease-out; /* تأثير تكبير عند الظهور */
}

/* حركة ظهور المودال */
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* حركة تكبير محتوى المودال */
@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-content p {
    color: #e0e0e0; /* لون نص فاتح للرسالة */
    font-size: 1em; /* تم تقليل حجم الخط */
    line-height: 1.5; /* تم تقليل تباعد الأسطر */
    margin-bottom: 15px; /* تم تقليل المسافة السفلية */
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px; /* تم تعديل الموضع */
    right: 20px; /* تم تعديل الموضع */
    font-size: 26px; /* تم تقليل حجم الخط */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: #f00; /* لون أحمر عند التحويم */
    text-decoration: none;
}

.modal-close-btn {
    background-color: #f44336; /* زر إغلاق أحمر */
    color: white;
    padding: 8px 16px; /* تم تقليل الحجم */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em; /* تم تقليل حجم الخط */
    transition: background-color 0.3s ease;
}

.modal-close-btn:hover {
    background-color: #da190b;
}

/*
 * التجاوبية: ضبط الأحجام على الشاشات الأصغر
 */
@media (max-width: 768px) {
    .content-panel {
        padding: 25px 20px; /* تم تقليل المسافة الداخلية هنا */
        max-width: 450px; /* تم تقليل أقصى عرض */
    }
    h1 {
        font-size: 2.2em; /* تصغير حجم العنوان */
        letter-spacing: 1px;
    }
    .update-message, .alternative-message, .closing-note {
        font-size: 0.95em;
    }
    .action-btn {
        padding: 10px 20px; /* تم تقليل حجم الأزرار هنا */
        font-size: 1em;
    }
    .main-site-btn .link-url {
        font-size: 0.7em; /* تصغير خط الرابط في الأجهزة الصغيرة */
    }
    .modal-content {
        width: 90%; /* زيادة عرض المودال على الشاشات الصغيرة */
        margin: 5% auto; /* تقليل المسافة العلوية */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.6em; /* تصغير حجم العنوان أكثر للهواتف الصغيرة */
    }
    .content-panel {
        padding: 20px 10px; /* تم تقليل المسافة الداخلية هنا */
    }
    .update-message, .alternative-message, .closing-note {
        font-size: 0.85em;
    }
    .action-btn {
        font-size: 0.85em;
        padding: 8px 15px; /* تم تقليل حجم الأزرار هنا */
    }
    .modal-content {
        padding: 15px;
        margin: 3% auto; /* تقليل المسافة العلوية أكثر */
    }
    .close-button {
        font-size: 22px; /* تصغير حجم زر الإغلاق */
    }
}