/*
 * Connect-Us Plugin Styles
 * هذا الملف يحتوي على التنسيقات الخاصة بزر التواصل العائم والنافذة المنبثقة.
 */

/* ------------------------------------------- */
/* تنسيقات الزر العائم (Floating Button) */
/* ------------------------------------------- */
.cu-floating-button {
    position: fixed; /* يجعل الزر ثابتًا في مكانه على الشاشة حتى عند التمرير */
    cursor: pointer; /* يغير مؤشر الماوس إلى يد عند المرور فوق الزر للإشارة إلى أنه قابل للنقر */
    z-index: 9999;   /* يضمن أن الزر يظهر فوق معظم عناصر الصفحة الأخرى */
    transition: transform 0.3s ease-in-out; /* يضيف حركة سلسة عند التحويم على الزر (تكبير/تصغير) */
}

.cu-floating-button:hover {
    transform: scale(2.05); /* يكبر الزر بنسبة 5% عند التحويم عليه لإضافة تأثير بصري */
}
/* ------------------------------------------- */
/* تنسيقات الغيمة (Tooltip - النص الظاهر فوق الزر) */
/* ------------------------------------------- */
.cu-tooltip {
    /* تم حذف `display: none;` هنا لجعل الغيمة ظاهرة دائمًا */
    position: absolute; /* يضع الغيمة بشكل مطلق بالنسبة للعنصر الأب (الزر العائم) */
    padding: 8px 12px; /* مسافة داخلية (حشوة) حول النص داخل الغيمة */
    border-radius: 6px; /* تقويس زوايا الغيمة */
    white-space: nowrap; /* يمنع النص من الالتفاف إلى سطر جديد */
    /* لتوسيط الغيمة فوق الزر */
    transform: translateX(-35%); /* يحرك الغيمة 50% من عرضها الخاص إلى اليسار لتوسيطها */
    bottom: calc(100% + 15px); /* يضع الغيمة فوق الأيقونة بمسافة 15 بكسل (100% تعني ارتفاع العنصر الأب) */
    left: 0%; /* يضع نقطة بداية الغيمة في منتصف العنصر الأب أفقياً */
    /* تم حذف `transition: opacity 0.3s ease-in-out;` هنا بما أنها ظاهرة دائمًا */
    pointer-events: none; /* يضمن أن النقرات تمر عبر الغيمة إلى الأيقونة الموجودة أسفلها */
}


/* ------------------------------------------- */
/* تنسيقات نافذة المودال المنبثقة (Modal Overlay) */
/* ------------------------------------------- */
.cu-modal-overlay {
    display: none; /* مخفية بشكل افتراضي، تظهر عن طريق JavaScript عند النقر على الزر */
    position: fixed; /* يجعل النافذة ثابتة فوق كل شيء */
    top: 0;          /* تبدأ من أعلى الشاشة */
    left: 0;         /* تبدأ من يسار الشاشة */
    width: 100%;     /* عرض كامل الشاشة */
    height: 100%;    /* ارتفاع كامل الشاشة */
    background-color: rgba(0, 0, 0, 0.9); /* خلفية سوداء شفافة تغطي الصفحة بالكامل */
    z-index: 10000;  /* يضمن أنها تظهر فوق كل شيء آخر (أعلى من الزر العائم) */
    justify-content: center; /* توسيط محتوى المودال أفقياً (يعمل مع display: flex) */
    align-items: center;     /* توسيط محتوى المودال عمودياً (يعمل مع display: flex) */
}

/* ------------------------------------------- */
/* تنسيقات محتوى المودال (النافذة البيضاء التي تحتوي على الخيارات) */
/* ------------------------------------------- */
.cu-modal-content {
    background-color: #fff; /* لون خلفية محتوى المودال (أبيض) */
    padding: 25px;   /* مسافة داخلية (حشوة) حول المحتوى */
    border-radius: 10px; /* تقويس زوايا محتوى المودال */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* ظل حول محتوى المودال لإبرازه */
    position: relative; /* ضروري لتحديد موضع زر الإغلاق بداخله */
    max-width: 350px; /* **عرض أقصى لمحتوى المودال (الكونتينر)، هذا يجعله ليس عريضًا جدًا** */
    width: 90%;      /* عرض محتوى المودال، سيأخذ 90% من المساحة المتاحة ولكن لن يتجاوز الـ max-width */
    text-align: center; /* توسيط النص والصور داخل المودال */
}

.cu-modal-header {
    color: #333; /* لون نص العنوان في المودال */
    margin-top: 0;   /* إزالة الهامش العلوي الافتراضي للعنوان */
    margin-bottom: 20px; /* مسافة سفلية بعد العنوان */
    font-size: 1.2em; /* حجم خط العنوان */
}

/* ------------------------------------------- */
/* تنسيقات زر الإغلاق داخل المودال */
/* ------------------------------------------- */
.cu-close-button {
    position: absolute; /* يوضع بشكل مطلق بالنسبة لـ .cu-modal-content */
    top: 10px;      /* المسافة من أعلى محتوى المودال */
    right: 10px;    /* المسافة من يمين محتوى المودال */
    background: none; /* إزالة خلفية الزر */
    border: none;   /* إزالة حدود الزر */
    cursor: pointer; /* يغير مؤشر الماوس إلى يد */
    padding: 5px;   /* مسافة داخلية للزر */
}

.cu-close-button .cu-close-icon {
    width: 30px;  /* عرض أيقونة الإغلاق */
    height: 30px; /* ارتفاع أيقونة الإغلاق */
}

/* ------------------------------------------- */
/* تنسيقات حاوية خيارات التواصل الاجتماعي */
/* ------------------------------------------- */
.cu-social-options {
    display: flex;   /* يستخدم Flexbox لتنظيم الأزرار */
    flex-wrap: wrap; /* يسمح للأزرار بالانتقال إلى سطر جديد إذا لم يكن هناك مساحة كافية */
    justify-content: center; /* توسيط الأزرار أفقياً داخل الحاوية */
    gap: var(--cu-social-button-spacing, 15px); /* تم تصحيح اسم المتغير */
    margin-top: 20px; /* مسافة علوية من العنوان */
}

.cu-social-link {
    display: flex;          /* يستخدم Flexbox لكل رابط على حدة */
    flex-direction: column; /* يرتب الأيقونة والنص (إذا وجد) عمودياً */
    align-items: center;    /* توسيط الأيقونة والنص أفقياً داخل الرابط */
    text-decoration: none;  /* إزالة الخط السفلي من الروابط */
    color: #333;            /* لون النص داخل الرابط (إذا وجد نص) */
    font-size: 0.9em;       /* حجم خط النص داخل الرابط */
    transition: transform 0.2s ease-in-out; /* حركة سلسة عند التحويم على رابط التواصل */
}

.cu-social-link:hover {
    transform: translateY(-10px); /* يرفع رابط التواصل قليلاً عند التحويم عليه */
	transform: scale(2.05); /* يكبر الزر بنسبة 5% عند التحويم عليه لإضافة تأثير بصري */
}

.cu-social-link img {
    width: 50px;  /* عرض أيقونات التواصل الاجتماعي */
    height: 50px; /* ارتفاع أيقونات التواصل الاجتماعي */
    border-radius: 50%; /* يجعل أيقونات التواصل دائرية */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* ظل خفيف لأيقونات التواصل */
    margin-bottom: 5px; /* مسافة سفلية تحت الصورة (إذا كان هناك نص أسفلها) */
}