/* =========================================
   إعدادات عامة واحترافية لتجربة كالتطبيقات
   ========================================= */
html {
    scroll-behavior: smooth;
}

/* منع ظهور لون التحديد الافتراضي عند النقر في الجوال */
* { 
    -webkit-tap-highlight-color: transparent; 
}

/* منع المستخدم من سحب الصور (Drag) ليعطي إحساس التطبيق */
img {
    -webkit-user-drag: none;
    user-select: none;
}

/* تخصيص لون تحديد النص ليتناسب مع هوية المطعم (اللون الأحمر) */
::selection {
    background-color: #dc2626;
    color: #ffffff;
}

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

/* شريط تمرير احترافي ونحيف للصفحة ككل */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* لون فضي فاتح للوضع النهاري */
    border-radius: 10px;
    transition: background-color 0.3s ease;
}
/* تخصيص شريط التمرير للوضع الليلي */
.dark ::-webkit-scrollbar-thumb {
    background-color: #3f3f46; /* لون رمادي داكن */
}
/* تأثير عند مرور الماوس على شريط التمرير */
::-webkit-scrollbar-thumb:hover {
    background-color: #ef4444; /* يتحول للأحمر */
}

/* =========================================
   التأثيرات الحركية (Animations)
   ========================================= */
/* ظهور ناعم وانسيابي للعناصر */
.fade-in { 
    animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
}
@keyframes fadeIn { 
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

/* تكبير مرن (Pop/Bounce) للنوافذ المنبثقة (Modals) */
.zoom-in { 
    animation: zoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
}
@keyframes zoomIn { 
    from { 
        opacity: 0; 
        transform: scale(0.92); 
    } 
    to { 
        opacity: 1; 
        transform: scale(1); 
    } 
}