body {
    margin:auto;
    padding:0px;
    width:600px;
    height:1161px;
    position:relative;
} 

header{
    width:600px;
    height:167px;
}

.header-img{
    width:600px;
    height:167px;
}


/* price section */

.price-section{
    font-family: "Smythe", system-ui;
    width:508px;
    height:319px;
    display:none;
    margin:30px 0px 0px 46px;
    padding:0px;
}

#price-list{
    font-family: "Smythe", system-ui;
    border-bottom:2px solid #393333;
    width:508px;
    margin:0px 20px 0px 0px;
    padding:0px;
    /* background:blue; */
}


.item-price-section{
    list-style-type:none;
    margin:0px 0px 10px 0px;
    width:508px;
    display:flex;
    padding:2px;
}


.added-item-name{
    color:#000000;
    font-size:28px;
    margin:0px;
    padding:0px;
}

#added-items-heading{
    text-align:center;
    font-size:28px;
    font-family: "Smythe", system-ui;
    margin-bottom:30px;
}

.remove-btn{
    border:0;
    background:none;
    font-family: Verdana, Geneva, sans-serif;
    font-size:12px;
    padding:0px;
    height:20px;
    margin:8px 0px 0px 8px; 
    color:#BBBBBB;
}

.added-item-price{
    font-family: "Smythe", system-ui;
    color:#000000;
    font-size:20px;
    margin:8px 5px 0px auto;
}

.item-count{
    margin:12px 0px 0px 50px;
    font-size:10px;
    font-family: Verdana, Geneva, sans-serif;
    color:#BBBBBB;
}

#complete-order{
    width:508px;
    height:60px;
    border:0;
    border-radius:3px;
    background:#16DB99;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    color:white;
    font-size:16px;
    margin-top:50px;
}

.total-price-container{
    display:flex;
    margin:10px 0px;
    color:#0E0E0E;
}

#total-price-header{
    margin:0px 0px 0px 0px;
    font-family: "Smythe", system-ui;
    font-size:28px;
}

#total-price{
    margin:8px 0px 0px auto;
    font-size:20px;
}

/* item section */

.item-add-section{
    display:flex;
    gap:20px;
    width:508px;
    height:140px;
    margin-top:50px;
    border-bottom:2px solid #D2D2D2;
}

#items-list{
    list-style-type:none;
    margin:50px 0px 0px 46px;
    padding:0px;
    font-family: "Smythe", system-ui;
}

.item-emoji{
    width:70px;
    height:89px;
    margin:0px;;
}

.item-details{
    margin:0px;
}

.item-name{
    margin:0px;
    font-weight: regular;
    color:#000000;
    font-size:28px;
}

.item-ingredients{
    margin:10px 0px;
    color:#8B8B8B;
    font-size:16px;
}

.item-price{
    margin:0px;
    font-size:20px;
    color:#000000;
}

.item-add-button{
    border:2px solid #D2D2D2;;
    background:0;
    border-radius:50%;
    font-size:32px;
    text-align:center;
    font-weight:lighter;
    font-family: "Inter", sans-serif;
    margin:0px  0px 0px auto;
    height:45px;
    width:45px;
}

/* card modal */


#card-details-modal{
    /* margin:38px 0px; */
    display:none;
    flex-direction:column;
    position:absolute;
    top:292px;
    left:38px;
    width:524px;
    height:542.24px;
    background:white;
    /* border:1px solid red; */
    border-radius:5px;
    box-shadow:0px 0px 100px black;
}

.card-details-form{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    font-family: Verdana, Geneva, sans-serif;
    margin-left:0px;
}

.form-input{
    margin:20px 20px;
    padding:20px;
    width:400px;
    height:auto;
    font-size: 20px; 
    color:#757575;
    border-radius:4px;
}

.card-details-form h1{
    font-size:24px;
    margin:40px 0px 40px 0px; 
} 

#pay-btn{
    padding:25px 210px;
    background:#16DB99;
    border-radius:5px;
    border:0;
    margin-top:10px;
    font-size:20px;
    color:white;
    font-family: Verdana, Geneva, sans-serif;
}

#message-container{
    display:none;
    width:504px;
    height:120px;
    margin:30px 0px 0px 46px;
    align-items:center;
    justify-content:center;
    background:#ECFDF5;
    color:#065F46;
    font-size:32px;
    font-family: "Smythe", system-ui;

}