/* ===========================
   CowoPOS Premium Cart Drawer
=========================== */
html,
body{
    overflow-x:hidden;
}
body.drawer-open{
    overflow:hidden;
}
#cartDrawerOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.25);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:1040;
}

#cartDrawerOverlay.show{
    opacity:1;
    visibility:visible;
}

#cartDrawer{

    position:fixed;

    top:0;
    right:0;

    width:400px;
    max-width:95vw;

    height:100vh;

    background:#fff;

    display:flex;
    flex-direction:column;

    box-shadow:-8px 0 30px rgba(0,0,0,.20);

    transform:translateX(100%);
    transition:transform .30s ease;

    z-index:1050;
}

#cartDrawer.open{

    transform:translateX(0);

}

#cartDrawer.open{
    right:0;
}

.cartDrawerHeader{

    padding:18px 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #ececec;

    background:#ffffff;

    font-size:18px;

    font-weight:600;
}

#cartDrawerItems{

    flex:1;

    overflow-y:auto;

    padding:15px;
}

.drawerItem{

    display:flex;

    gap:12px;

    margin-bottom:18px;

    padding-bottom:18px;

    border-bottom:1px solid #eee;
}

.drawerItem img{

    width:72px;

    height:72px;

    object-fit:contain;

    border-radius:8px;

    background:#fafafa;

    border:1px solid #ececec;
}

.drawerItemInfo{

    flex:1;
}

.drawerItemName{

    font-weight:600;

    font-size:15px;

    margin-bottom:4px;
}

.drawerPrice{

    color:#0d6efd;

    font-weight:700;

    margin-bottom:10px;
}

.drawerQty{

    display:flex;

    align-items:center;

    gap:8px;
}

.drawerQty button{

    width:30px;

    height:30px;

    border:none;

    border-radius:50%;

    background:#f3f3f3;

    font-weight:bold;
}

.drawerRemove{

    color:#dc3545;

    cursor:pointer;

    font-size:13px;

    margin-top:8px;

    display:inline-block;
}

.cartDrawerFooter{

    border-top:1px solid #ececec;

    padding:20px;

    background:#fff;

    position:sticky;

    bottom:0;
}

#cartDrawerAdded{

    border-radius:0;

    margin:0;
}

@media(max-width:768px){

    #cartDrawer{

        width:100%;

        max-width:100%;

    }

}