/* 
 * ملف الأنماط (CSS) الإضافية
 * نستخدم Tailwind CSS للأساسيات وهذا الملف للتخصيصات المتقدمة
 */

/* إزالة التأثير الافتراضي عند النقر على الهواتف */
body {
    -webkit-tap-highlight-color: transparent; 
}

/* إخفاء شريط التمرير مع الحفاظ على إمكانية التمرير (للقوائم الأفقية) */
.hide-scroll::-webkit-scrollbar {
    display: none;
}
.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* تصميم شريط التمرير المخصص لقائمة الحلقات */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 4px;
}

/* إخفاء الواجهات بشكل كامل */
.hidden-view {
    display: none !important;
}

/* دعم الحافة السفلية للآيفون (Safe Area) */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 10px);
}

/* 
 * محاكاة حجم الهاتف المحمول عند العرض على شاشات الكمبيوتر
 * لتجربة مستخدم أفضل أثناء التطوير
 */
@media (min-width: 480px) {
    #mobile-container {
        height: 90vh;
        border-radius: 20px;
        margin-top: 5vh;
        border: 4px solid #27272a;
    }
}