/*==================================================
FLOATING CART BAR
==================================================*/

.cartBar{

    position:fixed;

    left:16px;

    right:16px;

    bottom:16px;

    height:72px;

    background:var(--primary);

    color:#fff;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    box-shadow:
        0 18px 40px rgba(0,0,0,.25);

    z-index:250;

    animation:cartPop .25s ease;

}

#cartItems{

    font-size:14px;

    opacity:.9;

}

#cartTotal{

    font-size:22px;

    font-weight:700;

    margin-top:4px;

}

#openCart{

    background:#fff;

    color:var(--primary);

    padding:12px 18px;

    border-radius:14px;

    font-weight:700;

    font-size:15px;

    transition:.2s;

}

#openCart:hover{

    transform:translateY(-2px);

}

#openCart:active{

    transform:scale(.96);

}

@keyframes cartPop{

    from{

        transform:translateY(100px);

        opacity:0;

    }

    to{

        transform:none;

        opacity:1;

    }

}


/*==================================================
DRAWER
==================================================*/

.drawer{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:88vh;

    background:var(--bg);

    border-radius:28px 28px 0 0;

    box-shadow:
        0 -10px 40px rgba(0,0,0,.25);

    transform:translateY(105%);

    transition:.35s ease;

    z-index:500;

    display:flex;

    flex-direction:column;

}

.drawer.open{

    transform:translateY(0);

}

.drawerHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

    border-bottom:1px solid var(--border);

}

.drawerHeader h2{

    font-size:22px;

}

.drawerHeader button{

    width:40px;

    height:40px;

    border-radius:50%;

    background:var(--surface);

    color:var(--text);

    font-size:22px;

}


/*==================================================
CART LIST
==================================================*/

.cartList{

    flex:1;

    overflow-y:auto;

    padding:18px;

}

.cartItem{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 0;

    border-bottom:1px solid var(--border);

}

.cartThumb{

    width:72px;

    height:72px;

    border-radius:16px;

    object-fit:cover;

    flex-shrink:0;

}

.cartInfo{

    flex:1;

}

.cartInfo h4{

    margin-bottom:6px;

    font-size:16px;

}

.cartInfo p{

    color:var(--text-light);

    font-size:14px;

}


/*==================================================
SUMMARY
==================================================*/

.summary{

    padding:20px;

    border-top:1px solid var(--border);

    background:var(--surface);

}

.summary div{

    display:flex;

    justify-content:space-between;

    margin:10px 0;

}

.summary hr{

    margin:16px 0;

    border:none;

    border-top:1px solid var(--border);

}

.grand{

    font-size:22px;

    font-weight:700;

}

#checkoutBtn{

    margin-top:18px;

    width:100%;

    height:54px;

    background:var(--primary);

    color:#fff;

    border-radius:16px;

    font-size:17px;

    font-weight:700;

    transition:.2s;

}

#checkoutBtn:hover{

    background:var(--primary-dark);

}

#checkoutBtn:active{

    transform:scale(.98);

}


/*==================================================
OVERLAY
==================================================*/

.overlay{

    position:fixed;

    inset:0;

    background:var(--bg);

    z-index:9999;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:30px;

}

.overlay img{

    width:220px;

    max-width:80%;

    margin-bottom:24px;

    border-radius:20px;

}

.overlay h1{

    font-size:32px;

    margin-bottom:16px;

}

.overlay p{

    max-width:420px;

    color:var(--text-light);

    line-height:1.7;

    font-size:17px;

}


/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#bdbdbd;

    border-radius:999px;

}

body.dark ::-webkit-scrollbar-thumb{

    background:#555;

}


/*==================================================
DESKTOP DRAWER
==================================================*/

@media(min-width:900px){

    .drawer{

        width:520px;

        left:auto;

    }

}


/*==================================================
LARGE DESKTOP
==================================================*/

@media(min-width:1400px){

    body{

        max-width:1450px;

        margin:auto;

    }

}






.deliveryCart{
    margin-bottom:12px;
}

.deliveryCart label{
    font-size:13px;
    color:var(--text-light);
    display:block;
    margin-bottom:6px;
}

.deliveryCart select{
    width:100%;
    height:48px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
    padding:0 12px;
}