@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Public+Sans:wght@400;500;700&display=swap');
@import url('http://fonts.cdnfonts.com/css/cursed-timer-ulil');
*,*::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

button,a,input{
  font-family:inherit;
}
.cntnr{
    display: flex;
    max-width:  100vw;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    padding-block: 2em;
    justify-content: center;
    background-color:rgb(49, 19, 49);
    position: relative;
}
.fast-foodApp{
    color: rgb(15, 13, 36);
    width: 30%;
    overflow-x: hidden;
    max-height: 550px;
    overflow-y:scroll;
    background-color: white;
    border-radius: 20px;
    position: relative;
}

/* styling the header  section */
.header{
    background-image: url('images/headerImage.webp');
    background-position: 2em;
    padding:5px;
    color: white;
    align-self: flex-start;
    width: 100%;
    border-top-right-radius:12px ;
    border-top-left-radius:12px ;
    background-size: cover;
}
.header > p{
    font-size: 11px;
    max-width: 160px;
    border-bottom: 2px solid yellow;
    color: rgb(239, 241, 100);
}
.menu{
    color: rgb(23, 6, 39);
    margin-block: 1rem;
    font-size: 11px;
    padding-left: 5px;
    position: relative;
}
.menu img{
    width: 100%;
    width: 60px;
    border-radius: 5px;
    object-fit: contain;
}

/* the plus button styling */
.add-orderbtn{
    padding: .190rem .55rem;
    border-radius: 100%;
    position: relative;
    right: -80%;
    top: -70px;
    color: rgb(56, 46, 46);
    margin: .7rem 1rem ;
    font-weight: 700;
    display: block;
    background: transparent;
    transition: .4s;
    border: 2px solid rgb(53, 53, 3);
    cursor: pointer;
}

.add-orderbtn:hover{
    background-color: rgb(236, 236, 55);
    cursor: pointer;
}

.fast-foodContents{
    border-bottom: 2px solid rgb(226, 223, 223);
}
.fast-foodContents:last-child{
    border-bottom: none;
}
.fast-foodContents:first-child{
    border-top: 2px solid rgb(226, 223, 223);
}

.items-details{
    display: inline-flex;
    justify-content: space-between;
    margin-top:.5rem;
}
.items-desc{
    margin-inline: 6px;
    word-wrap: break-word;
    max-width: 140px;
}
.items-desc span{
    font-weight: 700;
    font-size: 16px;
}

/* your order section styling */
.your-order{
    display: flex;
    justify-content: space-between;
    padding-inline: 1rem;
}
.total{
    border-top: 1px solid grey;
    margin: 5px;
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    color: rgb(250, 64, 17);
}
.remove-item{
    margin-left: 2em;
    width: 40%;
   cursor: pointer;
}
.complete-order{
    margin-block: 1em;
    width:  100%;
    visibility: hidden;
    text-align: center;
}
.complete-btn{
    border: none;
    cursor: pointer;
    background-color: rgb(238, 81, 9);
    border-radius: 10px;
    padding: .5rem 2rem;
}

.modal{
    position: absolute;
    max-width: 90%;
    margin-inline:auto !important;
    left:0;
    right:0;
    top:22%;
    visibility: hidden;
    text-align: center;
    background: rgb(245, 245, 245);
    padding: 2em 0em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.418);
    margin:0 .5em;
}

.modal h2{
    margin-bottom: 1rem;
}
.modal input{
    padding-block: .3rem;
    width: 70%;
    margin:  .2rem;
}
input[type="submit"]{
    background-color:  rgb(238, 81, 9);
    width: 80%;
    margin-top: 1rem;
    border-radius: 5px;
    padding: .3rem .5rem;
    cursor:pointer;
    text-align: center;
}
.checked-out{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    border-radius: 20px;
    padding:1em;
    max-width:90%;
    position:absolute;
    top:20%;
    left:0;
    right:0;
    margin:auto;
    background-color:orangered;
}
.checked-out img{
    width: 70%;
}