<!-- Shopping Cart Sidebar (Offcanvas) -->
<div class="offcanvas offcanvas-end border-0 shadow" tabindex="-1" id="cartSidebar" aria-labelledby="cartSidebarLabel">
    <div class="offcanvas-header bg-light border-bottom p-4">
        <h5 class="offcanvas-title fw-bold text-teal" id="cartSidebarLabel">
            <i class="fas fa-shopping-cart me-2"></i> YOUR CART
        </h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    
    <div class="offcanvas-body p-4">
        <!-- Cart Items List -->
        <div class="cart-items-container">
            <!-- Dummy Item 1 -->
            <div class="cart-item d-flex align-items-center mb-4 pb-4 border-bottom">
                <div class="cart-item-img me-3">
                    <img src="./assets/images/course1.png" alt="Product" class="rounded object-fit-cover" style="width: 70px; height: 70px;">
                </div>
                <div class="cart-item-info flex-grow-1">
                    <h6 class="fw-bold mb-1 small">Massage Therapy Foundations</h6>
                    <p class="text-teal fw-bold mb-0 small">$49.00</p>
                    <div class="d-flex align-items-center mt-2">
                        <span class="small text-muted me-3">Qty: 1</span>
                    </div>
                </div>
                <a href="#" class="text-danger small ms-2"><i class="fas fa-trash-alt"></i></a>
            </div>

            <!-- Dummy Item 2 -->
            <div class="cart-item d-flex align-items-center mb-4 pb-4 border-bottom">
                <div class="cart-item-img me-3">
                    <img src="./assets/images/course2.png" alt="Product" class="rounded object-fit-cover" style="width: 70px; height: 70px;">
                </div>
                <div class="cart-item-info flex-grow-1">
                    <h6 class="fw-bold mb-1 small">Somatic Anatomy 101</h6>
                    <p class="text-teal fw-bold mb-0 small">$75.00</p>
                    <div class="d-flex align-items-center mt-2">
                        <span class="small text-muted me-3">Qty: 1</span>
                    </div>
                </div>
                <a href="#" class="text-danger small ms-2"><i class="fas fa-trash-alt"></i></a>
            </div>
        </div>

        <!-- Empty Cart State (Hidden by default) -->
        <div class="text-center py-5 d-none">
            <i class="fas fa-shopping-basket fa-3x text-light mb-3"></i>
            <p class="text-muted">Your cart is empty.</p>
            <a href="#" class="btn btn-dark-teal px-4 mt-2">Start Shopping</a>
        </div>
    </div>

    <!-- Sidebar Footer -->
    <div class="offcanvas-footer p-4 bg-light border-top">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <span class="fw-bold text-muted">Subtotal:</span>
            <span class="fw-bold text-teal fs-5">$124.00</span>
        </div>
        <div class="d-grid gap-2">
            <a href="#" class="btn btn-outline-teal py-3 fw-bold text-uppercase small">View Cart</a>
            <a href="#" class="btn btn-dark-teal py-3 fw-bold text-uppercase small">Checkout Now</a>
        </div>
    </div>
</div>

<style>
.offcanvas-footer {
    position: sticky;
    bottom: 0;
}
.btn-outline-teal {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    transition: all 0.3s;
}
.btn-outline-teal:hover {
    background-color: var(--primary-color);
    color: #fff;
}
</style>
