.navigation-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    background-color: #f8f8f8;
    padding: 10px 0;
    border-top: 1px solid #eee;
    /* قسمت جدید برای ثابت کردن نوار ناوبری */
    position: fixed; /* نوار ناوبری رو ثابت می‌کنه */
    bottom: 0; /* اون رو در بالای صفحه قرار میده */
    left: 0; /* اون رو به سمت چپ صفحه می‌چسبونه */
    z-index: 1000; /* اطمینان حاصل می‌کنه که بالای بقیه محتوا نمایش داده بشه */
}



.nav-item:hover {
    color: #007bff;
}

.nav-item {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    padding: 5px 10px;
    transition: color 0.3s ease;
    display: flex;
    flex-direction: column; /* آیکون و متن رو به صورت ستونی قرار میده */
    align-items: center; /* آیکون و متن رو در مرکز تراز میکنه */
}

    .nav-item i {
        margin-bottom: 5px; /* فاصله بین آیکون و متن */
        font-size: 24px; /* اندازه آیکون رو بزرگتر میکنه */
    }

.cart-icon-wrapper {
    position: relative; /* برای اینکه بتونیم span رو نسبت به این div موقعیت بدیم */
    display: inline-block; /* یا block، بستگی به نیاز داره */
}

.cart-link {
    position: relative; /* برای موقعیت‌دهی badge */
    display: inline-flex; /* برای اینکه هم آیکون و هم عدد کنار هم قرار بگیرن */
    align-items: center; /* وسط‌چین کردن عمودی */
    text-decoration: none;
    color: #333; /* یا هر رنگی که دلتون می‌خواد */
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .cart-link:hover {
        background-color: #f0f0f0;
    }

.cart-icon {
    font-size: 2em; /* اندازه بزرگتر برای آیکون */
}

.nav-item .menu3 {
    position: absolute; /* موقعیت‌دهی دقیق */
    top: -1px; /* فاصله از بالای آیکون */
    right: 35px; /* فاصله از سمت راست آیکون */
    background-color: #d9534f; /* رنگ پس‌زمینه قرمز */
    color: white; /* رنگ متن سفید */
    border-radius: 50%; /* گرد کردن برای حالت دایره‌ای */
    padding: 4px 8px; /* فضای داخلی */
    font-size: 0.75em; /* اندازه فونت کوچکتر */
    line-height: 1; /* برای اینکه عدد در وسط قرار بگیره */
    min-width: 20px; /* حداقل عرض برای داشتن شکل دایره‌ای */
    text-align: center; /* وسط‌چین کردن عدد */
    font-weight: bold;
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* سایه کوچیک */
}
/* استایل‌های کلی کانتینر سبد خرید */
.cart-items-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* فاصله بین ردیف‌های سبد خرید */
    margin-bottom: 20px;
}

/* استایل برای هر ردیف (آیتم) در سبد خرید */
.cart-item-row {
    display: flex;
    flex-wrap: wrap; /* اجازه ندهد آیتم‌ها از هم جدا شوند */
    align-items: center; /* هم‌ترازی عمودی */
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
}

/* استایل برای هر سلول (نام، قیمت، تعداد و...) */
.cart-item-cell {
    flex: 1; /* اجازه می‌دهد سلول‌ها فضا را به اشتراک بگذارند */
    min-width: 120px; /* حداقل عرض برای هر سلول */
    padding: 5px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    /* استایل برای لیبل (مثلاً "نام محصول") */
    .cart-item-cell .item-label {
        font-size: 0.85em;
        color: #777;
        margin-bottom: 5px;
        font-weight: bold;
    }

    /* استایل برای مقدار (مثلاً نام محصول یا قیمت) */
    .cart-item-cell .item-value {
        font-size: 1em;
        font-weight: 500;
        color: #333;
    }

    /* تنظیمات خاص برای سلول تعداد */
    .cart-item-cell.quantity-cell .item-value {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px; /* فاصله بین کنترل تعداد و دکمه آپدیت */
        width: 100%; /* اجازه می‌دهد کنترل تعداد عرض کامل را بگیرد */
    }

    /* استایل برای دکمه آپدیت تعداد */
    .cart-item-cell.quantity-cell .update-cart-btn {
        width: 80%; /* عرض دکمه آپدیت */
        margin-top: 5px;
    }

    /* تنظیمات خاص برای سلول عملیات */
    .cart-item-cell.actions-cell .item-value {
        font-size: 1.2em; /* کمی بزرگتر برای آیکون سطل */
    }

        .cart-item-cell.actions-cell .item-value .btn {
            line-height: 1; /* برای اینکه دکمه خیلی بلند نشود */
        }

/* استایل کنترل تعداد */
.quantity-control {
    gap: 5px; /* فاصله بین دکمه ها و اینپوت */
    width: fit-content; /* عرض به اندازه محتوا */
}

    .quantity-control input.cart-quantity-input {
        width: 50px !important; /* عرض اینپوت تعداد */
        height: 38px; /* ارتفاع مشابه دکمه ها */
        padding: 0 8px !important; /* padding داخلی */
        box-sizing: border-box; /* مهم برای محاسبه عرض */
        border: 1px solid #ced4da; /* حاشیه */
    }

    .quantity-control .quantity-btn {
        width: 38px; /* اندازه دکمه ها */
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0; /* padding صفر */
        line-height: 1; /* برای ارتفاع */
        border-color: #ced4da; /* رنگ حاشیه */
        color: #495057;
    }

        .quantity-control .quantity-btn:hover {
            background-color: #e9ecef;
        }


/* --- Responsive Styles for Cart --- */
/* وقتی صفحه نمایش کوچکتر از 768 پیکسل است */
@media (max-width: 767px) {
    .cart-item-row {
        flex-direction: column; /* آیتم‌ها یکی زیر دیگری */
        align-items: stretch; /* عرض کامل */
        padding: 15px;
    }

    .cart-item-cell {
        min-width: 100%; /* هر سلول عرض کامل را بگیرد */
        margin-bottom: 10px; /* فاصله بین سلول‌ها */
        padding: 0 5px; /* padding کمتر */
        align-items: stretch; /* سلول‌ها عرض کامل را بگیرند */
        border-bottom: 1px solid #eee; /* جداکننده بین سلول‌ها */
    }

        .cart-item-cell:last-child {
            border-bottom: none; /* آخرین سلول جداکننده ندارد */
        }

        .cart-item-cell .item-label {
            text-align: center; /* لیبل وسط‌چین شود */
        }

        .cart-item-cell .item-value {
            text-align: center; /* مقدار هم وسط‌چین شود */
            font-size: 1.05em; /* کمی بزرگتر برای خوانایی */
        }

        .cart-item-cell.quantity-cell .item-value {
            flex-direction: row; /* کنترل تعداد در موبایل افقی باشد */
            justify-content: center; /* وسط‌چین */
            gap: 10px;
        }

        .cart-item-cell.quantity-cell .update-cart-btn {
            width: auto; /* عرض اتوماتیک برای دکمه آپدیت */
            padding: 8px 15px; /* padding بیشتر */
            margin-top: 0; /* حذف فاصله بالا */
        }

    .quantity-control {
        width: fit-content; /* اندازه طبیعی */
    }

    .cart-item-cell.actions-cell .item-value {
        font-size: 1.1em; /* اندازه دکمه حذف */
    }

    .d-flex.justify-content-between.mt-4 {
        flex-direction: column; /* دکمه‌ها در موبایل زیر هم */
        gap: 15px;
    }

    .btn.btn-lg {
        width: 100%; /* دکمه‌ها عرض کامل */
    }

    .nav-item {
        font-size: 8px;
    }

        .nav-item i {
            margin-bottom: 3px; /* فاصله بین آیکون و متن */
            font-size: 12px; /* اندازه آیکون رو بزرگتر میکنه */
        }

    .cart-icon {
        font-size: 1.9em; /* اندازه بزرگتر برای آیکون */
    }

    .nav-item span {
        margin-bottom: 3px; /* فاصله بین آیکون و متن */
        font-size: 12px; /* اندازه آیکون رو بزرگتر میکنه */
    }

    .navigation-container-sabad button.sabadkhared {
        padding: 8px 10px;
        font-size: 16px; /* یا هر اندازه فونتی که برای این قسمت می‌خواهید */
    }
    .navigation-container .itemname{
        font-size:12px;
    }
}

    .navigation-container-sabad {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        background-color: #f8f8f8;
        padding: 10px 0;
        border-top: 1px solid #eee;
        /* قسمت جدید برای ثابت کردن نوار ناوبری */
        position: fixed; /* نوار ناوبری رو ثابت می‌کنه */
        bottom: 0; /* اون رو در بالای صفحه قرار میده */
        left: 0; /* اون رو به سمت چپ صفحه می‌چسبونه */
        z-index: 1000; /* اطمینان حاصل می‌کنه که بالای بقیه محتوا نمایش داده بشه */
    }






    .nav-item span {
        margin-bottom: 5px; /* فاصله بین آیکون و متن */
        font-size: 24px; /* اندازه آیکون رو بزرگتر میکنه */
    }

    .nav-item.sabadkhared {
        background-color: red;
        color: white;
        /* این دو خط جدید را اضافه کنید تا استایل‌های کلی span را لغو کند */
        font-size: 24px; /* یا هر اندازه فونتی که برای این قسمت می‌خواهید */
        padding: 5px 30px; /* یا هر پدینگی که برای این قسمت می‌خواهید */
        border-radius: 5px;
    }

    .navigation-container-sabad p.khareadprice span.price-dc {
        text-decoration: line-through;
        color: #b3b3b3;
        font-size: 0.9em; /* اندازه کوچکتر برای قیمت اصلی */
        margin-right: 5px;
    }

    .navigation-container-sabad p.khareadprice span.price-sale {
        color: #82ae46;
        font-weight: bold; /* برای برجسته‌تر شدن */
        font-size: 1.2em;
    }

    span.statusprice {
        font-size: 14px;
        padding: 3px;
        background-color: red;
        color: white;
        border-radius: 5px;
    }

    p.lead {
        height: 200px;
    }

    .cart-icon-wrapper {
        position: relative; /* برای اینکه بتونیم span رو نسبت به این div موقعیت بدیم */
        display: inline-block; /* یا block، بستگی به نیاز داره */
    }

    .cart-link {
        position: relative; /* برای موقعیت‌دهی badge */
        display: inline-flex; /* برای اینکه هم آیکون و هم عدد کنار هم قرار بگیرن */
        align-items: center; /* وسط‌چین کردن عمودی */
        text-decoration: none;
        color: #333; /* یا هر رنگی که دلتون می‌خواد */
        padding: 5px 10px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

        .cart-link:hover {
            background-color: #f0f0f0;
        }

    .cart-icon {
        font-size: 2em; /* اندازه بزرگتر برای آیکون */
    }

    .cart-item-count-badge {
        position: absolute; /* موقعیت‌دهی دقیق */
        top: -8px; /* فاصله از بالای آیکون */
        right: -8px; /* فاصله از سمت راست آیکون */
        background-color: #d9534f; /* رنگ پس‌زمینه قرمز */
        color: white; /* رنگ متن سفید */
        border-radius: 50%; /* گرد کردن برای حالت دایره‌ای */
        padding: 4px 8px; /* فضای داخلی */
        font-size: 0.75em; /* اندازه فونت کوچکتر */
        line-height: 1; /* برای اینکه عدد در وسط قرار بگیره */
        min-width: 20px; /* حداقل عرض برای داشتن شکل دایره‌ای */
        text-align: center; /* وسط‌چین کردن عدد */
        font-weight: bold;
        box-shadow: 0 0 5px rgba(0,0,0,0.2); /* سایه کوچیک */
    }

    .search-container {
        padding: 20px;
        margin-top: 5px;
        border-radius: 20px;
    }

        .search-container input {
            position: relative;
            border-radius: 20px;
        }

        .search-container button {
            position: absolute;
            left: 20px;
        }

    .form-control::placeholder {
        color: #6c757d;
    }
    /* استایل برای بهبود ظاهر دکمه جستجو و آیکون */
    .btn-outline-success {
        color: #28a745;
        border-color: #28a745;
    }

        .btn-outline-success:hover {
            color: #fff;
            background-color: #28a745;
            border-color: #28a745;
        }