/* --- Slide Cart Drawer Styles --- */

/* কার্ট ড্রয়ারের প্রাথমিক অবস্থা */
#cart-drawer {
    position: fixed; /* স্ক্রিনের এক জায়গায় স্থির থাকবে */
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 400px;
    background-color: white;
    z-index: 2001;
    transform: translateX(100%); /* ডিফল্টভাবে ডানে লুকিয়ে থাকবে */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* স্মুথ এনিমেশন */
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

/* যখন কার্ট ওপেন হবে (JS এই ক্লাসটি যোগ করবে) */
#cart-drawer.open {
    transform: translateX(0); /* স্ক্রিনের ভেতরে চলে আসবে */
}

/* কার্ট ওভারলে (পেছনের কালো ঝাপসা ভাব) */
#cart-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none; /* ডিফল্টভাবে বন্ধ থাকবে */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ওভারলে দেখানোর জন্য ক্লাস */
#cart-overlay.show {
    display: block !important;
    opacity: 1 !important;
}

/* স্ক্রলবার কাস্টমাইজেশন (কার্টের ভেতরের আইটেম লিস্টের জন্য) */
#cart-items-container::-webkit-scrollbar {
    width: 5px;
}

#cart-items-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#cart-items-container::-webkit-scrollbar-thumb {
    background: #10b981; /* Sobuj Kabbo থিম কালার[cite: 1] */
    border-radius: 10px;
}

/* কার্ট বাটনে ক্লিক করার সময় ছোট একটি ইফেক্ট */
.cart-btn:active {
    transform: scale(0.9); /* ক্লিক করলে একটু দেবে যাবে[cite: 1] */
}

/* --- রেসপন্সিভ ফিক্স (মিডিয়া কুয়েরি) --- */
@media (max-width: 480px) {
    #cart-drawer {
        max-width: 100%; /* মোবাইলে পুরো স্ক্রিন জুড়ে কার্ট দেখাবে[cite: 1] */
        border-radius: 0;
    }
}