/* new theme------------------------------------------------------------------ start */
/* 
    --*-bg background
    --*-br border 
    --*-tx text
    --*-hv hover

    --m-modal-*   menu-modal
*/
:root{
    --red:red;    --black:black;    --white:white;    --blue:blue;    --yellow:yellow;    --green:green;    --orange:orange;
}
.light-mode {
    --laybody-bg: rgba(182, 146, 102, 0.66);
    --laybody-tx: #502c12 ;
    --laybody-br: green;

    --background: red;
    --layhead-bg: rgba(182, 146, 102, 0.01);/* Must be fully trans parent to avoid corner */
    /* --tocheck-layhead-tx:green;
    --tocheck-layhead-br:blue; */

    --navbar-bg: #f1cb8d99;
    --navbar-tx: #3E2723 ;
    --navbar-br: var(--navbar-tx);

    --navbrand-bg: rgba(10, 10, 10, 0.25);
    --navbrand-tx: var(--navbar-tx);
    --navbrand-hv: #f0eadb;
    --navbrand-br: var(--navbar-tx);

    --nav-link-bg: #b69266;
    --nav-link-tx: var(--navbar-tx);
    --nav-link-br: var(--navbar-tx);
    
    --laycontent-bg: var(--navbar-bg);
    --laycontent-tx: var(--navbar-tx);
    --laycontent-br: var(--navbar-tx);

    --layfooter-bg: var(--navbar-bg);
    --layfooter-tx: var(--navbar-tx) ;
    --layfooter-br: var(--navbar-tx);
    --layfooter-a: var(--navbar-tx);

    --cat-btn-bg: var(--nav-link-bg);
    --cat-btn-br: var(--navbar-tx);
    --cat-btn-tx: var(--navbar-tx);

    --cart-div-bg: var(--navbar-bg);
    --cart-div-br: var(--navbar-tx);
    --cart-div-tx: var(--navbar-tx);
    --cart-div-hv: #d19119;

    --card-bg: var(--navbar-bg);
    --card-br: var(--navbar-tx);
    --card-tx: var(--navbar-tx);

    --card-btn-bg: var(--nav-link-bg);
    --card-btn-br: var(--navbar-tx);
    --card-btn-tx: var(--navbar-tx);

    /* menu modal contain meal options -------- start */
    --m-modal-bg: var(--nav-link-bg);
    --m-modal-br: var(--nav-link-br);
    --m-modal-tx: var(--nav-link-tx) ;

    --m-modal-btn-bg: var(--nav-link-bg) ;
    --m-modal-btn-br: var(--nav-link-br);
    --m-modal-btn-tx: var(--nav-link-tx);

    --m-modal-cont-bg: var(--navbar-bg) ;
    --m-modal-cont-br: var(--navbar-br);
    --m-modal-cont-tx: var(--navbar-br); 

    --m-modal-head-bg: var(--m-modal-bg) ;
    --m-modal-head-br: var(--m-modal-br) ;
    --m-modal-head-tx: var(--m-modal-tx) ;

    --m-modal-body-bg: var(--m-modal-bg)  ;
    --m-modal-body-br: var(--m-modal-br) ;
    --m-modal-body-tx: var(--m-modal-tx) ;

    --m-modal-foot-bg: var(--m-modal-bg) ;
    --m-modal-foot-br: var(--m-modal-br) ;
    --m-modal-foot-tx: var(--m-modal-tx) ;

    /* menu modal contain meal options -------- end */
    --container-bg: var(--navbar-tx);



    --act-btn-insert: #00875A;
    --act-btn-update: #FFA500;
    --act-btn-delete: #D32F2F;
    --act-btn-info: #1976D2;
    --pagination-bg: #252525;
    --menu-head: #282828;
    --menu-name: #EEEEEE;
    --menu-description: #B3B3B3;
    --price-btn: #00C853;
    --table-bg: #1F1F1F;
    --cart-bg: #242424;


}

.dark-mode  {
    --laybody-bg: rgba(53, 53, 53, 0.99);
    --laybody-tx:blue;
    --laybody-br:blue;

    --background: red;
    --layhead-bg: rgba(53, 53, 53, 0.01);/* Must be fully trans parent to avoid corner */
    /* --layhead-tx:green;
    --layhead-br:blue; */

    --navbar-bg: #0a0a0acc;
    --navbar-tx: #F5B400;
    --navbar-br: var(--navbar-tx);

    --navbrand-bg: #0a0a0a40;
    --navbrand-tx: var(--navbar-tx);
    --navbrand-hv: #f0eadb;
    --navbrand-br: var(--navbar-tx);

    --nav-link-bg: #0a0a0a40;
    --nav-link-tx: var(--navbar-tx);
    --nav-link-br: var(--navbar-tx);
    
    --laycontent-bg: var(--navbar-bg);
    --laycontent-tx: var(--navbar-tx);
    --laycontent-br: var(--navbar-tx);

    --layfooter-bg: var(--navbar-bg);
    --layfooter-tx: var(--navbar-tx);
    --layfooter-br: var(--navbar-tx);
    --layfooter-a: var(--navbar-tx);

    --cat-btn-bg: var(--nav-link-bg);
    --cat-btn-br: var(--navbar-tx);
    --cat-btn-tx: var(--navbar-tx);

    --cart-div-bg: var(--navbar-bg);
    --cart-div-br: var(--navbar-tx);
    --cart-div-tx: var(--navbar-tx);
    --cart-div-hv: #cac3c3c4;

    --card-bg: var(--navbar-bg);
    --card-br: var(--navbar-tx);
    --card-tx: var(--navbar-tx);

    --card-btn-bg: var(--nav-link-bg);
    --card-btn-br: var(--navbar-tx);
    --card-btn-tx: var(--navbar-tx);

    /* menu modal contain meal options -------- start */
    --m-modal-bg: var(--nav-link-bg);
    --m-modal-br: var(--nav-link-br);
    --m-modal-tx: var(--nav-link-tx) ;

    --m-modal-btn-bg: var(--nav-link-bg) ;
    --m-modal-btn-br: var(--nav-link-br);
    --m-modal-btn-tx: var(--nav-link-tx);

    --m-modal-cont-bg: var(--navbar-bg) ;
    --m-modal-cont-br: var(--navbar-br);
    --m-modal-cont-tx: var(--navbar-br); 

    --m-modal-head-bg: var(--m-modal-bg) ;
    --m-modal-head-br: var(--m-modal-br) ;
    --m-modal-head-tx: var(--m-modal-tx) ;

    --m-modal-body-bg: var(--m-modal-bg)  ;
    --m-modal-body-br: var(--m-modal-br) ;
    --m-modal-body-tx: var(--m-modal-tx) ;

    --m-modal-foot-bg: var(--m-modal-bg) ;
    --m-modal-foot-br: var(--m-modal-br) ;
    --m-modal-foot-tx: var(--m-modal-tx) ;

    /* menu modal contain meal options -------- end */

    --container-bg: var(--navbar-tx);
    --card-bg: #222222;
    --cat-btn: #444444;

    
    --act-btn-insert: #00875A;
    --act-btn-update: #FFA500;
    --act-btn-delete: #D32F2F;
    --act-btn-info: #1976D2;
    --pagination-bg: #252525;
    --menu-head: #282828;
    --menu-name: #EEEEEE;
    --menu-description: #B3B3B3;
    --price-btn: #00C853;
    --table-bg: #1F1F1F;
    --cart-bg: #242424;
}




/*-------------------- for menu*/
.menuImage{
    border-radius: 15px;
}
.menu-card-item {
    display: block;
    ul {
        padding: 0;
    }
    img {
        width: 100px;
        min-width: 100px;
    }
}

.hide-on-mobile {
    display: block;
}

.hide-on-desktop {
    display: none;
}

.header-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media(max-width: 767px) {
    .hide-on-mobile {
        display: none;
    }

    .hide-on-desktop {
        display: block;
    }

    .menu-card-item {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
    }
}
/*-------------------- for menu end*/

/* Responsive for Smaller Screens */
@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;           /* Make table elements display as blocks */
    }

    thead {                    /* Hide the table header on small screens */
        display: none;
    }
    tr {                       /* Add margin between rows */
        margin-bottom: 1rem;
    }

    td {                       /* Add before content for each column */
        text-align: right;
        padding-left: 50%;
        position: relative;
        border: 1px solid #ddd; 
    }
    td:before {                /* Custom labels for each cell */
        content: attr(data-label);
        position: absolute;
        left: 0;
        padding-left: 15px;
        font-weight: bold;
        text-align: left;
        width: 50%;
    }


}
/* Responsive for Smaller Screens end */
/* Table Styling */
/* .tab-all for tables of few columns 2-4 */
.tab-sm {
    width: 100%;               /* Ensure the table takes the full width of its container */
    border-collapse: collapse;  /* Remove default spacing between cells */
    margin: 0;
}

.tab-sm thead th {
    /* color: #fff;               Header text color */
    text-align: left;           /* Align header text to the left */
    padding: 12px;             /* Add padding to header cells */
}

.tab-sm tbody td {
    padding: 10px;             /* Add padding to body cells */
    /* border: 1px solid #ddd;    Add border around body cells */
    word-wrap: break-word; /* Prevent text overflow */
}
.tab-sm tbody tr:hover {
    border:solid 2px;
}
/* .tab-sm for tables of few columns 2-4 End */

/* layout default elements */
/* #lay-header{
    top: 0;
    border:solid 2px;
    border-radius:15px;
} */

/* Make the content container grow to fill the space */
/* layout default elements end*/
.mydiv { border:solid 2px; border-radius: 10px; padding:5px; margin:5px; }
.tbl { 
    border:solid 2px ; border-radius: 10px; padding:2px ;
}
.tbl tr:first-child th:first-child {
    /* border: 2px solid green; */
    border-top-left-radius: 10px;
}
.tbl tr:first-child th:last-child {
    /* border: 2px solid green; */
    border-top-right-radius: 10px;
}
.tbl tr:last-child td:first-child {
    /* border: 2px solid red; */
    border-bottom-left-radius: 10px;
}
.tbl tr:last-child td:last-child {
    /* border: 2px solid red; */
    border-bottom-right-radius: 10px;
}
.tbl { 
    border:solid 2px ; border-radius: 10px; padding:2px ;
    border-spacing: 0;
    border-collapse: collapse;
}      

.div-page nav p  { border:solid 2px ; border-radius: 10px; padding:5px ; border-spacing: 2px;} 
.div-tab { border:solid 2px ; border-radius: 10px; padding:2px ; border-spacing: 2px;} 
.cart-btn { border:solid 2px ; border-radius: 10px; padding:5px ; border-spacing: 2px;} 
.act-btn{ border:solid 2px ; border-radius: 10px; padding:5px ; border-spacing: 2px;}
/* new theme------------------------------------------------------------------ end */
/* layout body ------------------------------------------------------------------------------ start */
#lay-body{
    background-color:var( --laybody-bg) ;color:var( --laybody-tx) ; border-color: var(--laybody-br);
}
/* layout body ------------------------------------------------------------------------------ end */
/* layout wrapper contain header ------------------------------------------------------------------------------ start */
#lay-wrapper{
    position:relative;
    top: 0;
}
/* Flex container to make sure the footer is at the bottom */
.lay-wrapper {
    display: flex;
    flex-direction: column;
}
/* layout wrapper contain header ------------------------------------------------------------------------------ end */


/* layout header ------------------------------------------------------------------------------ start */
#lay-header{
    background-color:var( --layhead-bg) ;color:var( --layhead-tx) ; border-color: var(--layhead-br);
}
/* layout header ------------------------------------------------------------------------------ end */
/* layout navbar ------------------------------------------------------------------------------ start */

#lay-navbar {
    top: 0;    border:solid 2px;    border-radius:15px;
    background-color:var( --navbar-bg) ;color:var( --navbar-tx) ; border-color: var(--navbar-br);
}
#lay-navbar .navbar-brand{
    border:solid 3px ; border-radius: 10px; padding:12px;margin:5px; min-width:100px;background-color:var( --navbrand-bg) ;color:var( --navbrand-tx) ; border-color: var(--navbrand-br);
}
#lay-navbar .navbar-brand:hover{
    background-color:var( --navbar-bg) ;color:var( --navbrand-hv) ; border-color: var(--navbar-br);
}
.navbar-nav ,.nav-link {
    display: flex;
    align-items: center; /* Centers text vertically */
    justify-content: center; /* Centers text horizontally */
    height: 80%; /* Ensure it takes full height of parent */
    text-align: center; /* Ensures proper text alignment */
    padding: 8px 12px; /* Adjust padding for better spacing */
}
    
#lay-navbar .navbar-nav .nav-link , #theme-toggle {
    border:solid 3px ; border-radius: 10px; padding:2px;margin:5px;
    /* min-width:80px;min-height:50px;  */
    background-color:var( --nav-link-bg) ; color:var( --nav-link-tx) ; border-color: var(--nav-link-br)
}
#lay-navbar .navbar-nav .nav-link:hover{
    opacity: 0.8;
}
#lay-navbar .nav-a1 .nav-link , #theme-toggle {
    min-width:80px;min-height:50px; 
}
#lay-navbar .nav-a2 .nav-link , #theme-toggle {
    min-width:80px;min-height:50px; 
}
#lay-navbar .nav-a2 #theme-toggle {
    padding: 8px 15px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 15px;
}
#lay-navbar .nav-a2 #theme-toggle:hover {
    opacity: 0.8;
}
#lay-navbar .nav-a3 .nav-link , #theme-toggle {
    min-width:130px;min-height:50px; 
}

/* layout navbar  ------------------------------------------------------------------------------ end */

/* layout content  ------------------------------------------------------------------------------ start */
.lay-content {
    flex: 1;
    min-height: 70vh;
}
 #lay-content{
    border:solid 2px;
    border-radius:15px; 
    background-color: var(--laycontent-bg) ; border-color: var(--laycontent-br);color: var(--laycontent-tx); 
}
/* layout content  ------------------------------------------------------------------------------ end */
/* layout footer  ------------------------------------------------------------------------------ start */
#lay-footer {
    position:relative;  
    bottom: 0;
    /* clear: both;  */
    font-size: 16px;           /* General font size for footer content */
    border:solid 2px;
    border-radius:15px;
} 
#lay-footer {padding:3px; background-color: var(--layfooter-bg) ; border-color: var(--layfooter-br);color: var(--layfooter-color); }
#lay-footer * { padding:2px; color: var(--layfooter-a); }
 
/* #lay-footer a { padding:2px;background-color: var(--layfooter-bg) ; border-color: var(--red);color: var(--layfooter-a); } */
/* #lay-footer .container { padding:2px;background-color: var(--layfooter-bg) ; border-color: var(--red);color: var(--layfooter-a); } */
/* layout footer  ------------------------------------------------------------------------------ end */
/* home page  ------------------------------------------------------------------------------ start */

#lay-content .cat-btn { 
    border:solid 3px ; border-radius: 10px; padding:2px;margin:5px;
    background-color: var(--cat-btn-bg) ; border-color: var(--cat-btn-br);color: var(--cat-btn-tx); 
}
#lay-content #menu .card { 
    border:solid 4px ; border-radius: 20px 1px 30px 2px; padding:4px;margin:5px;
    background-color: var(--card-bg) ; border-color: var(--card-br);color: var(--card-tx);
}

#lay-content #menu .card .cart-btn { 
    border:solid 3px ; border-radius: 10px; padding:4px;margin:2px;
    background-color: var(--card-btn-bg) ; border-color: var(--card-btn-br);color: var(--card-btn-tx);
}

/* home page  ------------------------------------------------------------------------------ end */

/* .dark-mode #homeCarousel .carousel-control-prev-icon,
.dark-mode #homeCarousel .carousel-control-next-icon, */
.dark-mode #home .carousel-control-prev-icon,
.dark-mode #home .carousel-control-next-icon {
    filter: brightness(0) saturate(100%) invert(73%) sepia(30%) saturate(5928%) hue-rotate(9deg) brightness(108%) contrast(101%);
}

/* .light-mode #homeCarousel .carousel-control-prev-icon,
.light-mode #homeCarousel .carousel-control-next-icon, */
.light-mode #home .carousel-control-prev-icon,
.light-mode #home .carousel-control-next-icon  {
    filter: brightness(0) saturate(100%) invert(14%) sepia(29%) saturate(735%) hue-rotate(322deg) brightness(93%) contrast(91%);
}
/* #home .carousel-caption { color:var(--navbar-tx);} */
#home .carousel-caption  {  background-color: var(--card-bg) ; color:var(--card-tx);}
#home .carousel-item .review-txt { color:var(--laycontent-tx);}
/* menu page  ------------------------------------------------------------------------------ start */
#lay-content .cat-btn { 
    border:solid 3px ; border-radius: 10px; padding:2px;margin:5px;
    background-color: var(--cat-btn-bg) ; border-color: var(--cat-btn-br);color: var(--cat-btn-tx); 
}
#lay-content #menu .card { 
    border:solid 4px ; border-radius: 20px 1px 30px 2px; padding:4px;margin:5px;
    background-color: var(--card-bg) ; border-color: var(--card-br);color: var(--card-tx);
}

#lay-content #menu .card .cart-btn { 
    border:solid 2px ; border-radius: 10px; padding:4px;margin:2px;
    background-color: var(--card-btn-bg) ; border-color: var(--card-btn-br);color: var(--card-btn-tx);
}
#lay-content #menu .cart-div { 
    max-width:100px;max-height:60px;
    border:solid 1px ; border-radius: 10px; padding:4px;margin:2px;
    background-color: var(--cart-div-bg) ; border-color: var(--cart-div-br);color: var(--cart-div-tx);
}
#lay-content #menu .cart-div .cart-link{ 
 
  color: var(--cart-div-tx);
}
#lay-content #menu .cart-div:hover { 
    background-color: var(--cart-div-hv) ; border-color: var(--cart-div-bg);color: var(--cart-div-tx);
}


.modal-content{
    background-color: var(--m-modal-cont-bg) ; border-color: var(--m-modal-cont-br);color: var(--m-modal-cont-tx); 
}
.modal-header {
    background-color: var(--m-modal-head-bg) ; border-color: var(--m-modal-head-br);color: var(--m-modal-head-tx);
}
.modal-header .btn-close {
    background-color:white;
    /* background-color: var(--m-modal-body-bg) ; border-color: var(--m-modal-body-br);color: var(--m-modal-head-tx); */
}
.modal-body  {
    background-color: var(--m-modal-body-bg) ; border-color: var(--m-modal-body-br);color: var(--m-modal-body-tx);
}

.modal-footer{
    background-color: var(--m-modal-foot-bg) ; border-color: var(--m-modal-foot-br);color: var(--m-modal-foot-tx);
}
.modal-footer .btn{
    border-right: solid  4px;
    border-bottom: solid 4px;
    font-weight: bold;
    background-color: var(--m-modal-btn-bg) ; border-color: var(--m-modal-btn-br);color: var(--m-modal-btn-tx);
}

.modal-footer .resetOptions{
    border-right: solid  4px;
    border-bottom: solid 4px;
}

/* menu page  ------------------------------------------------------------------------------ end */

/* about page  ------------------------------------------------------------------------------ Start */
#lay-content #about .card { 
    border:solid 4px ; border-radius: 20px 1px 30px 2px; padding:4px;margin:5px;
    background-color: var(--card-bg) ; border-color: var(--card-br);color: var(--card-tx);
}
/* about page  ------------------------------------------------------------------------------ end */




/* ------  end of tunining css ---------------------------------- */
 .div-tab , .div-page nav p a {background-color:  var(--bg-1)   ; border-color: var(--br-1);color: var(--color-1); }
 

 #lay-content .tbl           { border-color: var(--br-9);color: var(--color-b); }
 #lay-content .act-btn       { background-color: var(--bg-9) ; border-color: var(--br-10);color: var(--color-9); }
 #lay-content .sect-btn      { background-color: var(--bg-10) ; border-color: var(--br-11);color: var(--color-10); }
 #lay-content .cart-btn      { background-color: var(--bg-11) ; border-color: var(--br-12);color: var(--color-11); }
 .modal-content              { background-color: var(--bg-12) ; border-color: var(--br-13);color: var(--color-12); }
 #lay-content  .menu-card    { background-color: var(--bg-13) ; border-color: var(--br-14);color: var(--color-13); }
 #lay-content  .menu-card a  { background-color: var(--bg-14) ; border-color: var(--br-15);color: var(--color-14); }
 
 




/* ------------------------------------------------ old style */