/* ============================================ */
/*  الصق هنا كود CSS الكامل لشاشة البداية       */
/*  (من الرد السابق الخاص بشاشة ملء الشاشة)     */
/* ============================================ */
:root {
    /* ألوان مستوحاة من الصورة */
    --bg-color: #ffffff;         /* خلفية الشاشة بيضاء */
    --shape-blue: #cce7ff;       /* أزرق فاتح جداً */
    --shape-beige: #f0e2d8;      /* بيج فاتح */
    --text-color: #4a5568;       /* لون النص رمادي داكن */
    --dot-color: #e2e8f0;        /* لون النقاط غير النشط */
    --dot-active-color: #b0bdcf; /* لون النقاط النشط */
    --logo-max-width: 150px;     /* العرض الأقصى للشعار (تم التكبير) */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%; /* تأكد من أن html و body يأخذان الارتفاع الكامل */
    overflow: hidden; /* منع ظهور شرائط التمرير بسبب الأشكال */
}

body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--bg-color); /* الخلفية البيضاء الرئيسية */
    direction: rtl; /* الاتجاه العام */
}

.splash-container {
    width: 100%;
    height: 100%;
    position: relative; /* لتحديد موضع الأشكال بالنسبة للحاوية */
    overflow: hidden; /* لإخفاء أجزاء الأشكال الخارجة */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- تصميم الأشكال الخلفية --- */
.splash-background-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* خلف المحتوى */
}

.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6; /* شفافية أكثر نعومة */
}

.shape-1 {
    width: 300px;  /* حجم أكبر قليلاً */
    height: 300px;
    background-color: var(--shape-blue);
    top: -100px; /* تحريك للأعلى */
    left: -120px; /* تحريك لليسار */
}

.shape-2 {
    width: 250px; /* حجم أكبر قليلاً */
    height: 250px;
    background-color: var(--shape-beige);
    top: -80px;  /* تحريك للأعلى */
    right: -100px; /* تحريك لليمين */
    /* يمكنك إضافة دوران إذا أردت */
    /* transform: rotate(-10deg); */
}
/* --- نهاية تصميم الأشكال --- */

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    z-index: 2; /* فوق الأشكال */
}

.logo-container {
    margin-bottom: 30px; /* مسافة أكبر تحت الشعار */
}

#logoImage {
    display: block; /* لمنع مسافات إضافية تحت الصورة */
    max-width: var(--logo-max-width); /* استخدام المتغير للعرض */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    /* يمكنك إضافة حد مؤقت لرؤية المساحة المخصصة للصورة */
    /* border: 1px dashed #ccc; */
}

.splash-text {
    font-size: 1.6rem; /* حجم أكبر للنص */
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: 50px; /* مسافة أكبر قبل النقاط */
}

/* --- تصميم نقاط التحميل --- */
.loading-dots {
    display: flex;
    gap: 12px; /* مسافة أكبر بين النقاط */
}

.dot {
    width: 14px; /* حجم أكبر للنقاط */
    height: 14px;
    background-color: var(--dot-color);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

/* نفس الأنيميشن السابق */
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    background-color: var(--dot-color);
  }
  40% {
    transform: scale(1.0);
    background-color: var(--dot-active-color);
  }
}
/* --- نهاية تصميم نقاط التحميل --- */

/* تعديلات للشاشات الصغيرة (اختياري) */
@media (max-width: 600px) {
    :root {
        --logo-max-width: 130px; /* تصغير الشعار قليلاً للشاشات الصغيرة (تم التكبير) */
    }
    .splash-text {
        font-size: 1.3rem; /* تصغير النص قليلاً */
    }
    .shape-1 { width: 250px; height: 250px; top: -80px; left: -100px; }
    .shape-2 { width: 200px; height: 200px; top: -60px; right: -80px; }
    .dot { width: 12px; height: 12px; }
    .loading-dots { gap: 10px; }
}