/* تحسين عرض أيقونات التواصل الاجتماعي */

/* تحسين الأيقونات في القائمة الجانبية */
.sidebar-bg {
    --social-icon-size: 3.5rem;
}

/* أيقونات التواصل الاجتماعي المحسّنة */
a[title="تيليجرام"],
a[title="واتساب"],
a[title="إنستجرام"],
a[title="فيسبوك"],
a[title="تيك توك"] {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

a[title="تيليجرام"]:hover,
a[title="واتساب"]:hover,
a[title="إنستجرام"]:hover,
a[title="فيسبوك"]:hover,
a[title="تيك توك"]:hover {
    transform: scale(1.25) translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
    filter: brightness(1.1) !important;
}

/* المؤشر على الأيقونات */
a[title="تيليجرام"]::before,
a[title="واتساب"]::before,
a[title="إنستجرام"]::before,
a[title="فيسبوك"]::before,
a[title="تيك توك"]::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    border: 2px solid currentColor;
}

a[title="تيليجرام"]:hover::before,
a[title="واتساب"]:hover::before,
a[title="إنستجرام"]:hover::before,
a[title="فيسبوك"]:hover::before,
a[title="تيك توك"]:hover::before {
    opacity: 0.3;
}

/* الأيقونات نفسها */
a[title="تيليجرام"] i,
a[title="واتساب"] i,
a[title="إنستجرام"] i,
a[title="فيسبوك"] i,
a[title="تيك توك"] i {
    font-size: 1.5rem !important;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* تأثير بريق على الأيقونات عند التمرير */
@keyframes social-shine {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-45deg);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(100%) rotate(-45deg);
    }
}

a[title="تيليجرام"]::after,
a[title="واتساب"]::after,
a[title="إنستجرام"]::after,
a[title="فيسبوك"]::after,
a[title="تيك توك"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    opacity: 0;
}

a[title="تيليجرام"]:hover::after,
a[title="واتساب"]:hover::after,
a[title="إنستجرام"]:hover::after,
a[title="فيسبوك"]:hover::after,
a[title="تيك توك"]:hover::after {
    animation: social-shine 0.6s ease-in-out;
}

/* تحسينات العنوان وأيقونات التواصل في القائمة الجانبية */
.sidebar-bg h3 {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

/* تحسينات الفجوات بين الأيقونات */
.flex.items-center.justify-center.gap-4 {
    gap: 1.25rem !important;
}

/* تأثير الظل على الأيقونات */
@media (max-width: 1023px) {
    a[title="تيليجرام"],
    a[title="واتساب"],
    a[title="إنستجرام"],
    a[title="فيسبوك"],
    a[title="تيك توك"] {
        box-shadow: 
            0 4px 15px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(var(--primary-rgb), 0.2) !important;
    }
}

/* تحسينات إضافية للأجهزة الضيقة */
@media (max-width: 640px) {
    a[title="تيليجرام"],
    a[title="واتساب"],
    a[title="إنستجرام"],
    a[title="فيسبوك"],
    a[title="تيك توك"] {
        width: 3.25rem !important;
        height: 3.25rem !important;
    }
    
    a[title="تيليجرام"] i,
    a[title="واتساب"] i,
    a[title="إنستجرام"] i,
    a[title="فيسبوك"] i,
    a[title="تيك توك"] i {
        font-size: 1.375rem !important;
    }
}

/* تحسينات للأجهزة العريضة */
@media (min-width: 768px) {
    a[title="تيليجرام"],
    a[title="واتساب"],
    a[title="إنستجرام"],
    a[title="فيسبوك"],
    a[title="تيك توك"] {
        width: 3.75rem !important;
        height: 3.75rem !important;
    }
}