/* ---------- Item ---------- */

.cart-item{
    display:flex;
    gap:12px;
    padding:15px 0;
    border-bottom:1px solid #eee;
}

.item-number{
    width:30px;
    height:30px;
    flex-shrink:0;

    background:#dc3545;
    color:#fff;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:14px;
    font-weight:600;
}

.cart-info{
    flex:1;
}

.cart-name{
    font-size:17px;
    font-weight:600;
    line-height:1.4;
    margin-bottom:5px;
    width:250px;
    text-align:left
}

.cart-bottom{
    display:flex;
    align-items:center;
    gap:12px;
}

/* ---------- Quantity ---------- */

.quantity-box{
    display:flex;
    align-items:center;

    border:1px solid #ddd;
    border-radius:8px;
    overflow:hidden;
}

.quantity-box button{

    width:34px;
    height:34px;

    border:none;
    background:#f8f9fa;

    font-size:18px;
    cursor:pointer;
    transition:.2s;
}

.quantity-box button:hover{
    background:#198754;
    color:#fff;
}

.quantity-box span{

    width:38px;
    text-align:center;
    font-weight:bold;
}

/* ---------- Price ---------- */

.cart-price{

    margin-left:auto;

    font-size:16px;
    font-weight:700;
    color:#dc3545;

    white-space:nowrap;
}

/* ---------- Delete ---------- */

.btn-remove{

    width:36px;
    height:36px;

    border:none;
    border-radius:8px;

    background:#dc3545;
    color:#fff;

    transition:.2s;
}

.btn-remove:hover{

    background:#bb2d3b;
}

.cart-footer{

    margin-top:15px;
    border-top:2px solid #eee;
    padding-top:18px;
}

.cart-footer strong{

    font-size:18px;
}

.cart-footer strong:last-child{

    color:#dc3545;
    font-size:22px;
}

.cart-footer .btn{

    height:48px;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
}

@media(max-width:576px){

.cart-bottom{

    flex-wrap:wrap;
}

.cart-price{

    width:100%;
    text-align:right;
}

.quantity-box{

    order:1;
}

.btn-remove{

    order:2;
}

}

.step-panel{
    transition: all .3s ease;
}
.cart-footer{
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 10;
}

.item-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#dc3545;
    color:white;
    font-size:12px;
    margin-right:8px;
}

    /* .cart-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    border-radius: 50px;
} */
.cart-toast{
    position:fixed;
    top:20px;
    right:20px;
    background:#198754;
    color:white;
    padding:12px 20px;
    border-radius:8px;
    opacity:0;
    transition:.3s;
    z-index:9999;
}

.cart-toast.show{
    opacity:1;
}

.offcanvas-title{
    font-size: 24px;
    font-weight: 700;
    color: #222;
    border-left: 4px solid #198754;
    padding-left: 12px;
}
.offcanvas-title{
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left;
}