/* ملف التنسيق الخاص بمطعم حرفي */

body {
    font-family: 'Cairo', sans-serif;
    background-color: #ffffff;
}

/* تنسيق الهيدر */
.navbar {
    border-bottom: 3px solid #dc3545; /* الأحمر */
    background-color: #fff !important;
}

.navbar-brand {
    font-weight: bold;
    font-size: 24px;
    color: #0056b3 !important; /* الأزرق */
}
/* تنسيقات أيقونات التواصل داخل القائمة المنسدلة */
/* تنسيقات أيقونات التواصل داخل القائمة المنسدلة لضمان ظهورها */
.social-icon-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background-color: #f8f9fa !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

/* الألوان الرسمية للأيقونات بالتوافق مع FontAwesome 6 */
.social-icon-link.whatsapp i { color: #25D366 !important; }
.social-icon-link.instagram i { color: #E1306C !important; }
.social-icon-link.tiktok i { color: #000000 !important; }
.social-icon-link.facebook i { color: #1877F2 !important; }

/* تأثير التكبير عند تمرير الماوس */
.social-icon-link:hover {
    transform: scale(1.1);
}

/* إخفاء السهم الافتراضي الصغير من البوتستراب */
.dropdown-toggle::after {
    display: none !important;
}
/* تأثير بسيط عند تمرير الماوس فوق الشعارات الجديدة */
.social-svg-link {
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}
.social-svg-link:hover {
    transform: scale(1.2); /* تكبير الشعار قليلاً عند تمرير الماوس */
}

/* إخفاء السهم الافتراضي للبوتستراب */
.dropdown-toggle::after {
    display: none !important;
}
/* القسم الترحيبي */
.welcome-section {
    background-color: #ffffff;
    padding: 40px 0;
    text-align: center;
}

.welcome-text {
    color: #0056b3; 
    font-weight: 700;
    margin-bottom: 10px;
}

.sub-text {
    color: #dc3545; 
    font-size: 1.2rem;
}

/* السلة العائمة */
.floating-cart {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #dc3545;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    cursor: pointer;
    transition: transform 0.3s;
}

.floating-cart:hover {
    transform: scale(1.1);
    background-color: #0056b3;
}

.cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #0056b3;
    color: white;
    border-radius: 50%;
    padding: 2px 7px;
    font-size: 12px;
}
/* تنسيق صور العروض */
.carousel-item img {
    height: 300px; /* يمكنك تعديل الارتفاع حسب الرغبة */
    object-fit: cover; /* لضمان عدم تمدد الصورة بشكل سيء */
    border-radius: 15px;
}
/* شريط الأقسام */
.category-bar {
    top: 70px; /* لكي يظهر تحت الهيدر مباشرة */
    z-index: 999;
}
html {
    scroll-padding-top: 120px; /* قم بتعديل الـ 100 بكسل بحسب ارتفاع النيفبار عندك */
    scroll-behavior: smooth;   /* لضمان أن يكون النزول انسيابياً وليس قفزاً مفاجئاً */
}

/* لجعل الأقسام قابلة للسحب الأفقي في الجوال بدون ظهور شريط التمرير */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.btn-outline-warning {
    color: #dc3545;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    white-space: nowrap;
}

/* تنسيق بطاقة الصنف */
.item-card {
    transition: transform 0.2s ease;
    cursor: pointer;
}

.item-card:hover {
    transform: translateY(-5px);
}

.section-title {
    color: #0056b3;
    font-weight: bold;
    padding-right: 10px;
    border-right: 5px solid #dc3545; /* خط أحمر جانبي للأناقة */
}

.btn-primary {
    background-color: #0056b3;
    border: none;
}

.btn-outline-primary {
    color: #0056b3;
    border-color: #0056b3;
}
/* تنسيق السحب الأفقي للأصناف */
.horizontal-scroll {
    display: flex;
    flex-wrap: nowrap; /* يمنع نزول العناصر لسطر جديد */
    overflow-x: auto; /* يسمح بالتمرير الأفقي */
    -webkit-overflow-scrolling: touch; /* يجعل السحب سلساً في الآيفون */
}

/* إخفاء شريط التمرير ليبقى الشكل نظيفاً */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* إضافة مسافة بسيطة بين البطاقات */
.horizontal-scroll .col-8 {
    padding-left: 10px;
    padding-right: 10px;
}
/* تحسين شكل السلايدر على الجوال */
@media (max-width: 768px) {
    .carousel-item img {
        height: 200px;
    }
    .welcome-text {
        font-size: 1.5rem;
    }
}

.navbar-brand img {
    transition: transform 0.3s;
}

.navbar-brand img:hover {
    transform: scale(1.05);
}

/* تأثيرات روابط الفوتر */
.footer-link {
    transition: all 0.2s ease-in-out;
}
.footer-link:hover {
    color: #dc3545 !important; /* يتحول للون الأحمر عند تمرير الماوس */
    padding-right: 5px; /* إزاحة خفيفة جهة اليمين لتعطي لمسة حركة ذكية */
}