/* =====================================
   RESTAURANT POS MAIN STYLE
===================================== */


:root{

    --primary:#198754;
    --dark:#212529;
    --light-bg:#f5f7fb;
    --card-radius:16px;

}



/* BODY */

body{

    background:var(--light-bg);
    font-family:"Segoe UI",Arial,sans-serif;

}






/* NAVBAR */

.navbar{

    min-height:60px;

}






/* CARDS */

.card{

    border:none;
    border-radius:var(--card-radius);
    overflow:hidden;

}


.card-header{

    font-weight:600;
    font-size:18px;

}







/* MENU AREA */

#menuList{

    width:100%;

}




#categoryButtons button{

    border-radius:25px;

}






/* CATEGORY TITLE */

#menuList h4{

    font-weight:700;
    border-bottom:2px solid #198754;
    padding-bottom:8px;

}







/* MENU CARD */

.menu-card{


    background:white;

    border-radius:15px;

    padding:15px;

    height:100%;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 3px 10px rgba(0,0,0,.08);


}



.menu-card:hover{


    transform:translateY(-4px);

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


}




.menu-card h5{


    font-weight:700;

    margin-bottom:8px;


}




.menu-price{


    color:#198754;

    font-size:20px;

    font-weight:bold;

    margin-bottom:10px;


}







/* CART */

#cartBody tr{


    vertical-align:middle;


}





/* TOTAL */


#grandTotal{


    color:#198754;

    font-weight:bold;


}






/* BUTTONS */


.btn{


    border-radius:10px;


}


.btn-lg{


    padding:12px;


}








/* MODALS */


.modal-content{


    border-radius:20px;


}









/* RECEIPT */

.receipt{


    width:700px;

    margin:auto;

    background:white;

    padding:25px;

    font-family:Arial,sans-serif;


}



.receipt h2,
.receipt h3{


    text-align:center;


}






.receipt-line{


    display:flex;

    justify-content:space-between;


}









/* KOT */


.kot{


    width:300px;

    font-family:monospace;

}









/* LOADING */

.loading{


    text-align:center;

    padding:30px;


}



.spinner{


    width:40px;

    height:40px;

    border:5px solid #ddd;

    border-top-color:#198754;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;


}



@keyframes spin{


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}









/* SCROLLBAR */


::-webkit-scrollbar{


    width:8px;


}



::-webkit-scrollbar-track{


    background:#eee;


}



::-webkit-scrollbar-thumb{


    background:#198754;

    border-radius:10px;


}









/* TABLET */

@media(max-width:992px){


    .menu-card{

        padding:12px;

    }


}









/* MOBILE */

@media(max-width:576px){



.navbar-brand{


    font-size:16px;


}




.menu-card h5{


    font-size:15px;


}



.menu-price{


    font-size:17px;


}




table{


    font-size:13px;


}




.btn{


    font-size:14px;


}



.receipt{


    width:100%;

    padding:15px;


}



}