.elementor-859 .elementor-element.elementor-element-033d98a{--display:flex;--padding-top:2rem;--padding-bottom:2rem;--padding-left:0.5rem;--padding-right:0.5rem;}.elementor-859 .elementor-element.elementor-element-033d98a.e-con{--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){.elementor-859 .elementor-element.elementor-element-033d98a{--padding-top:2rem;--padding-bottom:2rem;--padding-left:1rem;--padding-right:1rem;}}@media(min-width:768px){.elementor-859 .elementor-element.elementor-element-033d98a{--width:111.906%;}}/* Start custom CSS for shortcode, class: .elementor-element-3486cbe *//* ---  استایل کلی برای نگهدارنده منو --- */
.food-tabs {
    background-color: #f8f9fa; /* رنگ پس‌زمینه روشن برای کل نوار */
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6; /* یک خط جداکننده ظریف در پایین */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-family: 'Vazirmatn', sans-serif; /* استفاده از یک فونت فارسی زیبا (در صورت وجود) */
    direction: rtl; /* راست‌چین کردن محتوا */
    overflow-x: auto; /* امکان اسکرول افقی در موبایل */
    white-space: nowrap; /* جلوگیری از شکستن آیتم‌ها به خط بعدی */
}

/* --- استایل لیست اصلی (ul) --- */
.food-tabs .tabs-list {
    list-style: none; /* حذف نقاط کنار لیست */
    margin: 0;
    padding: 0;
    display: flex; /* چیدمان افقی آیتم‌ها */
    justify-content: center; /* وسط‌چین کردن آیتم‌ها در مرکز نوار */
    align-items: center;
}

/* --- استایل هر آیتم منو (li) --- */
.food-tabs .tab-item {
    padding: 12px 25px; /* فاصله داخلی برای هر آیتم */
    margin: 0 5px; /* فاصله خارجی بین آیتم‌ها */
    cursor: pointer; /* تغییر نشانگر موس به حالت دست */
    color: #495057; /* رنگ متن */
    font-size: 16px; /* اندازه فونت */
    font-weight: 500; /* ضخامت فونت */
    border-radius: 8px; /* گرد کردن گوشه‌ها */
    transition: all 0.3s ease; /* انیمیشن نرم برای تغییرات */
    border-bottom: 3px solid transparent; /* یک خط زیرین نامرئی برای افکت */
}

/* --- افکت هاور (رفتن موس روی آیتم) --- */
.food-tabs .tab-item:hover {
    background-color: #e9ecef; /* تغییر رنگ پس‌زمینه در حالت هاور */
    color: #007bff; /* تغییر رنگ متن در حالت هاور */
}

/* --- استایل برای آیتم فعال (مثلا با افزودن کلاس .active با جاوااسکریپت) --- */
.food-tabs .tab-item.active {
    color: #007bff; /* رنگ متن برای آیتم فعال */
    font-weight: 700; /* ضخیم‌تر شدن فونت */
    border-bottom-color: #007bff; /* نمایش خط زیرین رنگی */
    background-color: #e0e9f5; /* یک پس‌زمینه ملایم برای تمایز بیشتر */
}

/* --- طراحی واکنش‌گرا برای موبایل --- */
@media (max-width: 768px) {
    .food-tabs .tabs-list {
        justify-content: flex-start; /* شروع چیدمان از سمت راست */
        padding: 0 10px; /* ایجاد کمی فاصله از لبه‌های صفحه */
    }

    .food-tabs .tab-item {
        font-size: 14px;
        padding: 10px 15px;
    }
}
.food-card {
    position: relative;
}

.discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ff0000;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    z-index: 1;
}
/* استایل کلی برای بخش قیمت */
.food-price-container {
    margin-top: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* استایل برای زمانی که تخفیف وجود دارد */
.original-price-line {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.original-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    text-decoration-color: #ff4757;
    text-decoration-thickness: 2px;
    position: relative;
}

.final-price {
    font-size: 18px;
    font-weight: bold;
    color: #4F0D55;
    display: flex;
    align-items: center;
}
/* استایل برای زمانی که تخفیف وجود ندارد */
.regular-price-line {
    font-size: 18px;
    font-weight: bold;
    color: #4F0D55;
}


.discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #4F0D55;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    z-index: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

<script> 

   document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.tab-item');

    // آیتم اول را به صورت پیش‌فرض فعال کن
    if (tabs.length > 0) {
        tabs[0].classList.add('active');
    }

    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // حذف کلاس active از تمام تب‌ها
            tabs.forEach(item => item.classList.remove('active'));

            // افزودن کلاس active به تب کلیک شده
            this.classList.add('active');

            // اینجا می‌توانید کدی برای نمایش محتوای مربوط به تب بنویسید
            // const target = this.getAttribute('data-target');
            // console.log('Show content for:', target);
        });
    });
});
</script>/* End custom CSS */
/* Start custom CSS */.elementor-859 .elementor-element.elementor-element-033d98a {
    --display: flex;
    --padding-top: 2rem;
    --padding-bottom: 2rem;
    --padding-left: 1rem;
    --padding-right: 1rem;
}/* End custom CSS */