/* @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap');
 */@font-face {
    font-family: 'Nunito';
    src: url('../vendors/fonts/Nunito-Regular.ttf') format('truetype');
  }
  /* @import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap');
   */@font-face {
    font-family: "Amiri";
    src: url("../vendors/fonts/Amiri-Regular.ttf");
 }
 
 :root{
    --main-color:#407bff;
    --orange:#f39c12;
    --red:#e74c3c;
    --yellow:yellow;
    --black:#444;
    --white:#fff;
    --light-color:#777;
    --light-bg:#f5f5f5;
    --border:.2rem solid var(--black);
    --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
    --gold: rgb(255, 224, 47);
    --hover-light: rgba(107, 138, 199, 0.929);
    --green: #ff2600;
    --blue:#407bff;
 }
 
 *{
    font-family: 'Nunito', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: none;
    
 }

 .toast {
   font-size: 2.2rem; /* Adjust font size */
   width: 300px; /* Set a fixed width or use percentages/vw */
   padding: 15px 15px; /* Adjust padding */
   text-align: center;
}
 
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 /**/
 
 *::selection{
    background-color: var(--main-color);
    color:var(--white);
 }
 
 ::-webkit-scrollbar{
    height: .5rem;
    width: 1rem;
 }
 
 ::-webkit-scrollbar-track{
    background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb{
    background-color: var(--main-color);
 }
 
 html{
    font-size: 62.5%;
    overflow-x: hidden;
 }
 
 body{
    background-color: var(--light-bg);
    overflow-x: hidden;
    direction: ltr;
    /* padding-bottom: 10rem; */
 }
 body.dark-mode {
   --white: #222;
   --black: #fff;
   --light-bg: #333;
   --light-color: #ccc;
   --hover-light: rgba(202, 192, 192, 0.692);
   background: var(--light-bg);
   color: var(--light-color);
}

 
 section{
    padding:2rem;
    max-width: 1200px;
    margin:0 auto;
    overflow-x: hidden;
    margin-top: 8rem;
 }
 
 
 figure{
    padding:2rem;
    max-width: 100%;
    margin:0 auto;
 }
 
 .heading{
    font-size: 4rem;
    color:var(--black);
    margin-bottom: 2rem;
    text-align: center;
    text-transform: uppercase;
 }

 .heading span{
    font-size: 4rem;
    color:var(--red);
    margin-bottom: 2rem;
    text-align: center;
    text-transform: uppercase;
 }
 
 .heading1{
    font-size: 4rem;
    color:var(--black);
    margin-bottom: -15rem;
    text-align: center;
    text-transform: uppercase;
 }
 .heading2 {
    font-size: 2.5rem;
    color:var(--blue);
    margin-bottom: 0rem;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
 }

 .heading2 a{
    font-size: 2.5rem;
    color:var(--blue);
    margin-bottom: 0rem;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
 }


 .main-heading{
    font-size: 2.5rem;
    color:var(--black);
    margin: 2rem 0 0.2rem 30rem;
    text-align: left;
    text-transform: none;
 }

 @media (max-width:1550px){

   .main-heading{
    font-size: 2.5rem;
    color:var(--black);
    margin: 2rem 0 0.2rem 1rem;
    text-align: left;
    text-transform: none;
 }

}
 .no-results-message{
   padding:1.5rem;
   margin: 0rem 8rem 4rem 8rem;
   background-color: var(--white);
   border: var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   color:var(--red);
   border-radius: .5rem;
   font-size: 2rem;
   text-transform: capitalize;
}
 
 .disabled{
    pointer-events: none;
    user-select: none;
    opacity: .5;
 }


 
 .btn,
 .delete-btn,
 .option-btn{
    display: block;
    width: 100%;
    margin-top: 1rem;
    border-radius: .5rem;
    padding:1rem 3rem;
    font-size: 2.3rem;
    text-transform: capitalize;
    color: #fff;
    cursor: pointer;
    text-align: center;
 }
 
 .btn:hover,
 .delete-btn:hover,
 .option-btn:hover{
    background-color: var(--main-color);
 }
 
 .btn{
    background-color: var(--main-color);
 }
 
 .option-btn{
    background-color: var(--orange);
 }
 
 .delete-btn{
    background-color: var(--red);
 }
 
 .flex-btn{
    display: flex;
    gap:1rem;
 }
 
 .message{
    position: sticky;
    top:0;
    max-width: 1200px;
    margin:0 auto;
    background-color: var(--yellow);
    padding:2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:1.5rem;
    z-index: 1100;
 }
 
 .message span{
    font-size: 2rem;
    color:var(--black);
 }
 
 .message i{
    cursor: pointer;
    color:var(--red);
    font-size: 2.5rem;
 }
 
 .message i:hover{
    color:var(--black);
 }
 
 .empty{
    padding:1.5rem;
    background-color: var(--white);
    border: var(--border);
    box-shadow: var(--box-shadow);
    text-align: center;
    color:var(--red);
    border-radius: .5rem;
    font-size: 3rem;
    text-transform: capitalize;
    margin-top: 11rem;
 }
 
 @keyframes fadeIn{
    0%{
       transform: translateY(1rem);
    }
 }





 
/*categoryAll STARTS*/

.categoryAllApp{
   text-align: center;
   align-items: center;
   margin: auto;
   
   width: 100%;
  position: absolute;
  margin-top: -3rem;
}
.categoryAllApp img{
   height: 35rem;
   width: 100%;
   object-fit: contain;
}

.categoryAllApp .add-to-btn{
   display: inline-block;
   width: auto;
   border-radius: 35px;
   padding:2.5rem 2.5rem;
   font-size: 3.0rem;
   text-transform: capitalize;
   color:var(--black);
   cursor: pointer;
   text-align: center;
   background: #00ffe5;
   margin: 3rem;
}
.categoryAllApp p{
   text-align: center;
   align-items: center;
   margin: auto;
   top: 90%;
   left: 10%;
  position: absolute;
  font-size: 30px;
}
/**/



.loader{
   position: fixed;
   top:0; left:0; right:0; bottom: 0;
   z-index: 1000000;
   background-color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
}

.loader img{
   height: 25rem;
}





 .obutton {
   position: fixed;
   z-index: 1200;
   bottom: 50px;
   right: 50px;
   width: 45px;
   height: 45px;
   font-size: 18px;
   outline: none;
   border: none;
   background:  linear-gradient(45deg, #09efff, #2e80e4);
   border-radius: 50%;
   color: var(--black);
   cursor: pointer;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
   opacity: 0;
   transition: opacity 0.5;
}

.obutton.show {
   opacity: 1;
}

@media (max-width:450px){

   .obutton {
      bottom: 15px;
      right: 15px;
   }

}











mark {
   background-color: #00ff1a;
   color:var(--white);
   padding: 0 0.2rem;
   border-radius: 0.2rem;
}

/*  :root {
   --sidebar-bg: #f9f9f9;
   --text-color: #333;
   --bg-color: white;
   --gold: #FFD700;
 }
 
 body.dark {
   --sidebar-bg: #1f2937;
   --text-color: #f3f4f6;
   --bg-color: #111827;
 }
 
 body {
   margin: 0;
   font-family: 'Arial', sans-serif;
   background-color: var(--white);
   color: var(--text-color);
   transition: background-color 0.3s, color 0.3s;
 } */
 
 /* .sidebar {
   width: 250px;
   width: max-content;
   min-width: 200px;
   max-width: 300px;
   background-color: var(--white);
   transition: width 0.3s ease;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   overflow: auto;
   z-index: 200;
 } */
 

 .sidebar {
   position: fixed;
   top: 0;
   left: -100%;
   width: 250px;
   height: 100vh;
   background-color: var(--white);
   transition: left 0.3s ease;
   z-index: 200;
   overflow-y: auto;
   transform: translateX(0);
  transition: transform 0.3s ease;
 }
 
 .sidebar.open {
   left: 0;
   z-index: 1001;
 }

 .sidebar.collapsed {
   width: 60px;
 }
 
 .sidebar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
 }
 .sidebar-header h2{
   font-size: 3rem;
 }
 
 .sidebar-nav {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .sidebar-nav li {
   padding: 0.8rem 1rem;
 }
 
 .sidebar-nav li a {
   display: flex;
   /* align-items: center; */
   text-decoration: none;
   color: var(--text-color);
   font-size: 2.1rem;
   border-radius: 10px;
   padding: 0.2rem;
 }

 .sidebar-nav li a:hover {
   background-color: var(--hover-light);
 }
 
 .sidebar-nav li a i {
   margin-right: 10px;
 }
 
 .has-dropdown > a {
   justify-content: space-between;
   
 }
 
 .dropdown {
   display: none;
   padding-left: 4.0rem;
   list-style: decimal;
   font-size: 1.5rem;
   text-align: center;
 }
 
 .dropdown.open {
   display: block;
 }

/*for counting li fropdown*/
 .dropdown.open li{
   font-size: 2.5rem;
 }

 .sidebar .hr-line{
   font-size: 2rem;
   text-align: center;
   color: var(--black);

 }
 
 .toggle-theme {
   margin-top: auto;
   padding: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 3rem;
 }
 
 /* Toggle Switch */
 .switch {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 20px;

 }
 
 .switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 
 .slider {
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   background-color: #d83636;
   transition: .4s;
   border-radius: 34px;
   
   
 }
 
 .slider:before {
   position: absolute;
   content: "";
   height: 14px;
   width: 14px;
   left: 3px;
   bottom: 3px;
   background-color: white;
   transition: .4s;
   border-radius: 50%;
   font-size: 8rem;
 }
 
 input:checked + .slider {
   background-color: #2196F3;
 }
 
 input:checked + .slider:before {
   transform: translateX(18px);
 }
 
 /* Main header */
 .main-header {
   
      margin-left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      background-color: var(--white);
      position: fixed;
      top: 0;
      z-index: 100;
      width: 100%;

      /* margin-left: 250px; */
   /* margin-left: max-content;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
   background-color: var(--white);
   position: sticky;
   top: 0;
   z-index: 100; */

      

   /* transition: margin-left 0.3s ease; */
 }
 
 .sidebar.collapsed {
   width: 60px;
 }
 
 .sidebar.collapsed + .main-header {
   margin-left: 60px;
 }
 
 .left-header {
   display: flex;
   align-items: center;
 }

 .actions {
   display: flex;
   align-items: center;
   gap: 1rem;
 }
 
 
 .sidebar-toggle {
   font-size: 3rem;
   cursor: pointer;
   margin-right: 1rem;
   
 }
 .welcome{
   text-align: left;
 }
 .hello-text {
   font-size: 3.8rem;
   padding-left: 220px;
 }
 
 .gold {
   color: var(--gold);
   font-weight: bold;
 }
 
 /* Notification */
 .notification-icon {
   position: relative;
   margin-right: 1rem;
   font-size: 3rem;
 }
 
 .notification-icon .badge {
   position: absolute;
   top: -6px;
   right: -10px;
   background: red;
   color: white;
   font-size: 1.3rem;
   padding: 2px 6px;
   border-radius: 50%;
 }

 /*message icon*/

 /* Notification */
 /* .message-icon {
   position: relative;
   margin-right: 1rem;
   font-size: 3rem;
   color: #00ff1a;
 } */
 @keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(255, 0, 43);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(0, 255, 26, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 255, 26, 0);
  }
}

.store-icon {
  position: relative;
  margin-right: 1rem;
  font-size: 3rem;
  color: var(--blue);
  cursor: pointer;
  border-radius: 50px;
}

.message-icon {
  position: relative;
  margin-right: 1rem;
  font-size: 3rem;
  color: #00ff1a;
  cursor: pointer;
  border-radius: 50px;
  animation: pulse 2s infinite;
}


.message-dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.dialog-content {
  /* background: white;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); */

  background-color: var(--white);
  margin: 10% auto;
  padding: 20px;
  border: var(--border);
  width: 90%;
  max-width: 600px;
  border-radius: 1rem;
  position: relative;
  font-size: 3rem;
}

.dialog-content textarea {
  width: 100%;
  resize: none;
  padding: 0.5rem;
  border: var(--border);
  border-radius: 10px;
  font-size: 2.5rem;
}

/* .dialog-content button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: #00c851;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
} */

.close-btn {
  position: absolute;
  top: 10px; right: 20px;
  font-size: 4.5rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--red);
}

 
 
 /* Profile */
 .profile-container {
   position: relative;
   cursor: pointer;
   background: #fff;
 }
 
 /* Ring wrapper that holds the profile image and applies the effect */
.ring-wrapper {
   width: 58px;
   height: 58px;
   border-radius: 50%;
   padding: 2px;
   background: conic-gradient(from 0deg, #ff9900, #ff2d55, #8e44ad, #1abc9c);
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   /* animation: spin 2s linear infinite; */
 }


 .flip-card {
   width: 100%;
   height: 100%;
   perspective: 600px;
 }
 
 .flip-inner {
   width: 100%;
   height: 100%;
   position: relative;
   transition: transform 0.8s;
   transform-style: preserve-3d;
 }

 .profile-container:hover .flip-inner {
   transform: rotateY(180deg);
 }

 .profile-img {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   border: 2px solid var(--white); /* Inner separation */
   display: block;
   
   backface-visibility: hidden;
   position: absolute;
  top: 0;
  left: 0;
 }
 
 .badge-icon {
   position: absolute;
   width: 32px;
   height: 32px;
   bottom: -5px;
   right: -7px;
   
 }

 .profile-img.back {
   transform: rotateY(180deg);
 }

 /* Animation */
/* @keyframes spin {
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 } */
 
 /* Dropdown */
 .profile-dropdown {
   position: absolute;
   border-radius: 10px;
   right: 0;
   top: 45px;
   background: var(--white);
   border: 1px solid #ddd;
   display: none;
   flex-direction: column;
   min-width: 150px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   z-index: 1000;
 }
 
 .profile-dropdown.open {
   display: flex;
 }
 
 .profile-dropdown a {
   padding: 10px;
   font-size: 1.8rem;
   text-decoration: none;
   color: var(--text-color);
   transition: background 0.2s;
   text-align: center;
 }
 
 .profile-dropdown a:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }


 .notification-dropdown {
   position: absolute;
   border-radius: 10px;
   right: 0;
   top: 45px;
   background: var(--white);
   border: 1px solid #ddd;
   display: none;
   flex-direction: column;
   min-width: 150px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   z-index: 1000;
 }
 
 .notification-dropdown.open {
   display: flex;
 }
 
 .notification-dropdown a {
   padding: 10px;
   font-size: 1.8rem;
   text-decoration: none;
   color: var(--text-color);
   transition: background 0.2s;
   text-align: center;
 }
 
 .notification-dropdown a:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
 /* Responsive */
 @media (max-width: 768px) {
   .sidebar {
     position: fixed;
     left: -100%;
     transition: left 0.3s;
     transform: translateX(-100%);
   }

   /* .sidebar-toggle {
      position: fixed;
      top: 15px;
      left: 15px;
      z-index: 1001;
      background: var(--white);
      padding: 10px;
      border-radius: 5px;
    } */

    .sidebar-nav li a {
      font-size: 3.0rem;
    }
 
   .sidebar.open {
     left: 0;
     transform: translateX(0);
   }
 
   .main-header {
     margin-left: 0;
   }

   .notification-dropdown a{
       font-size: 2.3rem;
   }

   .profile-dropdown a{
      font-size: 2.3rem;
   }

   .hello-text{
      padding-left: 0px;
      font-size: 3.5rem;
   }
 }
 
 
 /* Theme styles */
/*  :root {
   --sidebar-bg: #f9f9f9;
   --text-color: #333;
   --bg-color: white;
 }
 
 body.dark {
   --sidebar-bg: #1f2937;
   --text-color: #f3f4f6;
   --bg-color: #111827;
 }
 
 body {
   background-color: var(--white);
   color: var(--text-color);
   transition: background-color 0.3s, color 0.3s;
 } */
 
 /* Responsive */
 /* @media (max-width: 768px) {
   .sidebar {
     position: absolute;
     z-index: 200;
     height: 100vh;
   }
 } */
 


 .dashboard-boxes {
  display: grid;
  /* grid-template-columns: 1fr; */
  grid-template-columns: repeat(4, 1fr);
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
  gap: 2rem;
  padding: 2rem;
  margin-top: 20rem;
}

.stat-box {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--box-shadow);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease;
  
}

.stat-box:hover {
  transform: translateY(-5px);
}

.stat-box img {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
}

.stat-box h2 {
  font-size: 3.3rem;
  color: var(--main-color);
}

.stat-box p {
  font-size: 2.6rem;
  color: var(--black);
  margin-bottom: 1rem;
}

.stat-box .btn {
  display: inline-block;
  width: auto;
  padding: 0.8rem 2rem;
  font-size: 2.0rem;
  margin-top: 1rem;
}

/* Two columns on tablets */
@media (max-width: 768px) {
  .dashboard-boxes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Four columns on desktops */
/* @media (min-width: 1524px) {
  .dashboard-boxes {
    grid-template-columns: repeat(4, 1fr);
  }
} */





.calendar-section {
  padding: 2rem;
  margin-bottom: 2.5rem;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--box-shadow);
  border-radius: 1rem;
  margin-top: 2rem;
}

.calendar-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

#year-select{
  border: var(--border);
  border-radius: 15px;
  padding: 4px;
  font-size: 2.4rem;
}

#month-select{
  border: var(--border);
  border-radius: 15px;
  padding: 4px;
  font-size: 2.2rem;
}

.calendar-header select {
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
}

.calendar-grid .day {
  background: var(--light-bg);
  padding: 1rem;
  text-align: center;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 2.0rem;
}

.calendar-grid .day:hover {
  background: var(--main-color);
  color: white;
}

/* Calendar popup modal*/
.modal {
  display: none;
  position: fixed;
  z-index: 300;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
}

.modal-content {
  background-color: var(--white);
  margin: 10% auto;
  padding: 20px;
  border: var(--border);
  width: 90%;
  max-width: 600px;
  border-radius: 1rem;
  position: relative;
  font-size: 3rem;
}

.close-modal {
  position: absolute;
  top: 10px; right: 20px;
  font-size: 3rem;
  cursor: pointer;
  color: var(--red);
}


.day.today {
  background-color: var(--main-color); /* light yellow or any highlight */
  border: 2px solid var(--orange);
  font-weight: bold;
}

.day.has-sales {
  background-color: var(--red); /* light yellow or any highlight */
  border: 2px solid var(--orange);
  font-weight: bold;
}


/* table and container */
/* .dashboard-orders {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  flex-wrap: wrap;
}

.orders-table {
  flex: 1 1 70%;
  background: var(--white);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
}

.orders-table table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.orders-table th,
.orders-table td {
  text-align: left;
  padding: 0.8rem;
  border-bottom: 1px solid #ccc;
}

.orders-table .btn {
  padding: 0.6rem 1.5rem;
  font-size: 1.4rem;
}

.client-contacts {
  flex: 1 1 30%;
  background: var(--white);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
}

.client {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

.client-name {
  font-weight: bold;
  font-size: 1.4rem;
}

.client-phone {
  font-size: 1.3rem;
  color: #666;
}

.call-icon {
  font-size: 1.6rem;
  color: green;
}

@media (max-width: 768px) {
  .orders-table,
  .client-contacts {
    flex: 1 1 100%;
  }

  .client {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
} */














/* .dashboard-orders {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
}

.orders-table {
  width: 70%;
  background: var(--white);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
}

.client-contacts {
  width: 30%;
  background: var(--white);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
}


@media (max-width: 768px) {
  .orders-table,
  .client-contacts {
    width: 100%;
  }

  .client {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
} */








/* charts */

/* .dashboard-charts {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
}

.chart-container {
  flex: 1 1 70%;
  background: var(--white);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
}

.small-chart {
  flex: 1 1 30%;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.chart-header select {
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
}

@media (max-width: 768px) {
  .chart-container,
  .small-chart {
    flex: 1 1 100%;
  }
} */


































section.aside-container{
  padding:0.5rem;
}

.aside-container{
    display: grid;
    grid-template-columns: 3.0fr 1.5fr;
    gap:0.5rem;
    background:none;
    overflow-x: hidden;
}

.aside-container .posts-container .post{
    width:90%;
    padding:2rem;
    background: var(--white);
    border:var(--border);
    border-radius: .5rem;
    margin-bottom: 1.5rem;
}

.aside-container .posts-container .post .image{
    height: 40rem;
    width:100%;
    border-radius: .5rem;
    object-fit: cover;
}

.aside-container .posts-container .post .date{
    padding-top: 2rem;
    font-size: 1.5rem;
    color:var(--main-color);
}

.aside-container .posts-container .post .title{
    padding-top: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    font-size: 3.3rem;
    color:var(--black);
    border: var(--border);
    border-radius: 20px;
    text-align: center;
    background: rgb(0,172,238);
  background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
}

.aside-container .posts-container .post .text{
    color:var(--light-color);
    font-size: 1.6rem;
    line-height: 1.7;
    padding:1rem 0;
}

.aside-container .posts-container .links{
    border-top: var(--border);
    margin-top: .5rem;
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
}

.aside-container .posts-container .links .user{
    margin-right: auto;
}

.aside-container .posts-container .links .icon{
    padding-right: 1rem;
}

.aside-container .posts-container .links a{
    font-size: 1.5rem;
    color:var(--light-color);
}

.aside-container .posts-container .links a i{
    padding-right: .2rem;
    color:var(--black);
}

.aside-container .posts-container .links a:hover{
    color:var(--main-color);
}

.aside-container .posts-container .links a:hover i{
    color:var(--main-color);
}





/*chart header for dashboard*/
.chart-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.chart-header select,
.chart-header input[type="date"] {
  padding: 0.6rem 1rem;
  font-size: 1.6rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  background: #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.05);
  transition: border-color 0.2s;
}

.chart-header select:focus,
.chart-header input[type="date"]:focus {
  border-color: var(--main-color);
}

/* Responsive stacking if needed */
@media (max-width: 600px) {
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .chart-header select,
  .chart-header input[type="date"] {
    width: 100%;
  }
}


/*aside container for dashboard*/
.aside-container .sidebar-container .box{
    border:var(--border);
    border-radius: .5rem;
    overflow:hidden;
    background:var(--white);
    margin-bottom: 1.5rem;
    font-size: 0rem;
}

.aside-container .sidebar-container .box .title{
    padding-top:0.5rem;
    margin: 1.5rem;
    font-size: 3.3rem;
    color:var(--black);
    /* background:none; */
    background: rgb(251,33,117);
      background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
    border: var(--border);
    border-radius: 20px;
    text-align: center;
    text-transform: capitalize;
     transition: border-color 0.3s ease-out;
}

.aside-container .sidebar-container .box .title:hover{
    border-color: #3498db;
}

.aside-container .sidebar-container .box .title1{
    padding-top:0.5rem;
    margin: 1.5rem;
    font-size: 3.3rem;
    color:var(--black);
    background:none;
    border: var(--border);
    border-radius: 20px;
    text-align: center;
    text-transform: capitalize;
}

.aside-container .sidebar-container .box .about{
    text-align: center;
    padding:1rem 1.5rem;
   
}

.aside-container .sidebar-container .box .about img{
    height: 15rem;
    width: 15rem;
    border-radius: 50%;
    object-fit: cover;
    margin:1rem 0;
}

.aside-container .sidebar-container .box .about h3{
    color:var(--main-color);
    font-size: 3rem;
}

.aside-container .sidebar-container .box .about p{
    color:var(--black);
    font-size: 2.5rem;
    line-height: 1.0;
    padding:1rem;
}

.aside-container .sidebar-container .box .about a{
    color:var(--black);
    font-size: 2.2rem;
}
.aside-container .sidebar-container .box .about a.btn{
    display: block;
    width: 100%;
    margin-top: 1rem;
    border-radius: .5rem;
    padding:1rem 3rem;
    font-size: 1.7rem;
    text-transform: capitalize;
    color: var(--white);
    cursor: pointer;
    text-align: center;
}

.aside-container .sidebar-container .box .about .follow{
    padding:1rem 0;
}

.aside-container .sidebar-container .box .about .follow a{
    height: 4rem;
    line-height: 4rem;
    width: 4rem;
    border-radius: 50%;
    background:var(--black);
    color:var(--white);
    font-size: 1.7rem;
    margin:0 .1rem;
}

.aside-container .sidebar-container .box .about .follow a:hover{
    background:var(--main-color);
}

.aside-container .sidebar-container .box .category{
    padding:1rem 1.5rem;
}

.aside-container .sidebar-container .box .category .toggle-icon {
   transition: transform 0.3s ease;
   padding-left:3rem;
   color: gold;
}
.aside-container .sidebar-container .box .category.active .toggle-icon {
   transform: rotate(-180deg);
}

.aside-container .sidebar-container .box .category a{
    padding:.4rem 0;
    font-size: 2.1rem;
    color:var(--black);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aside-container .sidebar-container .box .category a span{
    background:var(--light-color);
    color:var(--white);
    border-radius: .5rem;
    padding:.5rem;
}
.aside-container .sidebar-container .box .category a span.head{
    font-size: 2.1rem;
    color:var(--black);
    background:none;
}

.aside-container .sidebar-container .box .category a span.percentage{
    background:var(--main-color);
    color:var(--white);
    border-radius: 50px;
    padding:1rem;
}



.aside-container .sidebar-container .box .category a:hover{
    color:var(--main-color);
}

.aside-container .sidebar-container .box .category a:hover span.head{
    background:none;
    color:var(--main-color);
}

.aside-container .sidebar-container .box .category a:hover span{
    background-color:var(--main-color);
}




.aside-container .sidebar-container .box .p-post{
    padding:1rem 2rem;
}

.aside-container .sidebar-container .box .p-post a{
    padding:1rem 0;
    display: block;
}

.aside-container .sidebar-container .box .p-post a h3{
    color:var(--black);
    font-size: 2rem;
    padding-bottom: 1rem;
}

.aside-container .sidebar-container .box .p-post a span{
    color:var(--light-color);
    font-size: 1.5rem;
}

.aside-container .sidebar-container .box .p-post a span i{
    padding-right: .2rem;
}

.aside-container .sidebar-container .box .p-post a:hover h3{
    color:var(--main-color);
}

.aside-container .sidebar-container .box .tags{
    padding:1rem;
}

.aside-container .sidebar-container .box .tags a{
    display: inline-block;
    padding:1rem 1.5rem;
    font-size: 1.7rem;
    font-weight: bold;
    color:var(--black);
    border-radius: .5rem;
    border:var(--border);
    margin:.5rem;
}

.aside-container .sidebar-container .box .tags a:hover{
    background:var(--black);
    color:var(--white);
}






.order-table-box {
  padding: 2rem;
  background: #fff;
  border: var(--border);
  border-radius: .5rem;
  font-size: 2.5rem;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.order-table th,
.order-table td {
  text-align: center;
  padding: 1rem;
  border-bottom: 1px solid #ddd;
   border: 1px solid var(--black);
}


.client-contact .client {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.client-name {
  font-weight: bold;
  font-size: 1.8rem;
  text-align: left;
  color: var(--black);
}

/* .client-phone {
  font-size: 1.5rem;
  color: var(--light-color);
}

.call-icon {
  font-size: 1.9rem;
  color: green;
} */

/*  */






.chart-box {
  padding: 2rem;
  background: #fff;
  border: var(--border);
  border-radius: .5rem;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.chart-header select {
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
}

canvas {


  max-width: 100%;
  height: auto;
  display: block;
}


/* media queries  */

@media (max-width:991px){

    html{
        font-size: 55%;
    }

    section{
        padding:0rem;
    }    

    .aside-container{
        grid-template-columns: 2fr 1fr;
    }

}


@media (max-width: 768px) {
  .aside-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .chart-box {
    margin-bottom: 2rem;
  }

  .aside-container .posts-container .post {
    width: 100%;
   }


   .aside-container .posts-container .post .image{
        height: 30rem;;
    }
}




@media (max-width:450px){

    html{
        font-size: 50%;
    }
     section{
      padding: 2rem;
     }

     .order-table-box{
      font-size: 2.0rem;
     }
    

    .contact form .inputBox input{
        width:100%;
    }   
    
    
    .aside-container .posts-container .post {
    width: 100%;
   }

}


 
/* .dashboard .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
   grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr;
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.dashboard .box-container .box{
   padding:2rem;
   text-align: center;
   border:var(--border);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   background-color: var(--white);
}

.dashboard .box-container .box h3{
   font-size: 2.7rem;
   color:var(--black);
}

.dashboard .box-container .box h3 span{
   font-size: 2rem;
}

.dashboard .box-container .box p{
   padding:1.3rem;
   border-radius: .5rem;
   background-color: var(--light-bg);
   font-size: 1.7rem;
   color:var(--light-color);
   margin:1rem 0;
} */

 
/*  .header{
    position: sticky;
    top:0; left:0; right:0;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    z-index: 1000;
 }
 
 .header .flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
 }
 
 .header .flex .logo{
    font-size: 2.5rem;
    color:var(--black);
 }
 
 .header .flex .logo span{
    color:var(--main-color);
 }
 
 .header .flex .navbar a{
    margin:0 1rem;
    font-size: 2rem;
    color:var(--black);
 }
 
 .header .flex .navbar a:hover{
    color:var(--main-color);
    text-decoration: underline;
 }
 
 .header .flex .icons div{
    margin-left: 1.7rem;
    font-size: 2.5rem;
    cursor: pointer;
    color:var(--black);
 }
 
 .header .flex .icons div:hover{
    color:var(--main-color);
 }
 
 .header .flex .profile{
    position: absolute;
    top:120%; right:2rem;
    background-color: var(--white);
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    border:var(--border);
    padding:2rem;
    width: 30rem;
    padding-top: 1.2rem;
    display: none;
    animation:fadeIn .2s linear;
 }
 
 .header .flex .profile.active{
    display: inline-block;
 }
 
 .header .flex .profile p{
    text-align: center;
    color:var(--black);
    font-size: 2rem;
    margin-bottom: 1rem;
 }
 
 #menu-btn{
    display: none;
 }
 
 
 
 
 @media (max-width:991px){
 
    html{
       font-size: 55%;
    }
 
 }
 
 @media (max-width:768px){
 
    #menu-btn{
       display: inline-block;
    }
 
    .header .flex .navbar{
       position: absolute;
       top:99%; left:0; right:0;
       border-top: var(--border);
       border-bottom: var(--border);
       background-color: var(--white);
       transition: .2s linear;
       clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
 
    .header .flex .navbar.active{
       clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
 
    .header .flex .navbar a{
       display: block;
       margin:2rem;
    }
 
 }
 
 @media (max-width:450px){
 
    html{
       font-size: 50%;
    }
 
    .heading{
       font-size: 3.5rem;
    } 
 
 } */

/*  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 250px;
    background: var(--white);
    box-shadow: var(--box-shadow);
    z-index: 999;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
}
.sidebar.hidden {
    transform: translateX(-100%);
}
.sidebar .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sidebar .dropdown .dropdown-menu {
    display: none;
    flex-direction: column;
}
.sidebar .dropdown .dropdown-toggle:focus + .dropdown-menu {
    display: flex;
}
.toggle-theme {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
.switch input {
    display: none;
}
.slider {
    position: absolute;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: var(--black);
    transition: .4s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 4px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--main-color);
}
input:checked + .slider:before {
    transform: translateX(26px);
}


.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--white);
    box-shadow: var(--box-shadow);
}
.hello-text {
    font-size: 2rem;
    animation: fadeIn 1s ease-in-out infinite alternate;
}
.hello-text .gold {
    color: gold;
    font-weight: bold;
}
.notification-icon {
    position: relative;
    font-size: 2rem;
}
.notification-icon .badge {
    position: absolute;
    top: -5px; right: -10px;
    background: var(--red);
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 1.2rem;
}
.profile-container {
    position: relative;
    cursor: pointer;
}
.profile-img {
    width: 40px; height: 40px;
    border-radius: 50%;
}
.badge-icon {
    position: absolute;
    bottom: 0; right: 0;
    width: 15px; height: 15px;
}
.profile-dropdown {
    position: absolute;
    top: 120%; right: 0;
    background: var(--white);
    border: var(--border);
    box-shadow: var(--box-shadow);
    display: none;
    flex-direction: column;
}
.profile-dropdown a {
    padding: 1rem;
    color: var(--black);
    text-decoration: none;
}
.profile-dropdown a:hover {
    background: var(--light-bg);
}
.profile-container.active .profile-dropdown {
    display: flex;
}


@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        position: absolute;
    }
    .sidebar.show {
        transform: translateX(0);
    }
} */



 















































.form-container{
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   direction: rtl;
}

/* .form-container form{
   padding:2rem;
   text-align: center;
   box-shadow: var(--box-shadow);
   background-color: var(--white);
   border-radius: .5rem;
   width: 50rem;
   border:var(--border);
}

.form-container form h3{
   text-transform: uppercase;
   color:var(--black);
   margin-bottom: 1rem;
   font-size: 2.5rem;
}

.form-container form p{
   font-size: 1.8rem;
   color:var(--light-color);
   margin-bottom: 1rem;
   border-radius: .5rem;
}

.form-container form p span{
   color:var(--orange);
}

.form-container form .box{
   width: 100%;
   margin:1rem 0;
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
} */

.form-container form{
   /* background:#fff;
   border:var(--border);
   width:40rem;
   padding:2rem;
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   margin:2rem; */

   padding:2rem;
   text-align: center;
   box-shadow: var(--box-shadow);
   background-color: var(--white);
   border-radius: .5rem;
   width: 50rem;
   border:var(--border);

/*    background-color: var(--white);
   padding:2rem;
   border-radius: .5rem;
   border:var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   margin:0 auto;
   max-width: 50rem; */
}

.form-container form h3{
   font-size: 3.5rem;
   text-transform: uppercase;
   color:var(--black);
   text-align: center;
}

.form-container form span{
   display: block;
   font-size: 2.5rem;
   padding-top: 1rem;
   text-align: right;
}

.form-container form span strong.alert{
   color: var(--red);
}

.form-container form .box{
   width: 100%;
   margin:.7rem 0;
   font-size: 1.6rem;
   border:var(--border);
   border-radius: .5rem;
   padding:1rem 1.2rem;
   color:var(--black);
   background-color: var(--light-bg);
   text-transform: none;
   text-align: right;
}





/*Add form autocomplete*/

.form-container form .inputBox #autocomplete {
  position: relative;
  background: var(--white);
  border: 1px solid var(--light-bg);
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 999;
  border-radius: 10px;
}

.form-container form .inputBox #autocomplete .item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 2.5rem;
  border-color: var(--main-color);
}

.form-container form .inputBox #autocomplete .no-match {
  color: #cc0000; /* red */
  font-style: italic;
  padding: 8px 12px;
  background-color: #fef2f2;
  border-top: 1px solid #eee;
}

.form-container form .inputBox #autocomplete .valid-match {
  color: green;
  font-weight: bold;
  background-color: #bfffb9;
  border-top: 1px solid #eee;
}

.form-container form .inputBox #autocomplete .item:hover {
  border-color: var(--light-color);
}
/**/





.form-container form .select{
   width: 100%;
   margin:.7rem 0;
   font-size: 1.6rem;
   border:var(--border);
   border-radius: .5rem;
   padding:1rem 1.2rem;
   color:var(--black);
   background-color: var(--light-bg);
   text-transform: none;
}

.form-container form .option{
   font-size: 1.9rem;
   color:var(--black);
   background-color: var(--light-bg);
}




.phone-input {
   position: relative;
   width: 100%;
   margin:.7rem 0;
   font-size: 1.9rem;
}

.phone-input .prefix {
   position: absolute;
   top: 40%;
   left: 1rem;
   transform: translateY(-50%);
   font-size: 2.3rem;
   color: var(--black);
   pointer-events: none; /* so user can't click it */
   
}

.phone-input input {
   width: 100%;
   padding: 1rem 1.2rem 1rem 8rem; /* left padding to make space for prefix */
   font-size: 2.5rem;
   border: var(--border);
   border-radius: .5rem;
   color: var(--black);
   background-color: var(--light-bg);
   text-transform: none;
   box-sizing: border-box;
   direction: ltr;
   top: 40%;
}

/**/
#togglePassword{
   margin-right: 40rem;
   position: relative;
   bottom: 40px;
   cursor: pointer;
   color: var(--black);
   font-size: 20px;
 }

@media (max-width: 992px) {
   #togglePassword{
  
   bottom: 35px;
 }

 
}

 @media (max-width: 450px) {

   .form-container form{
   padding:1rem;
   text-align: center;
   width: 43rem;

}

   .form-container form #togglePassword{
      margin-left: 2rem;
 }

 
}
/**/

.form-container form .checkbox{
   display:flex;
   align-items: center;
   gap:.5rem;
   padding:1rem 0;
   font-size: 2.3rem;
}

.form-container form .checkbox label{
   font-size: 2.3rem;
   color:var(--black);
   cursor: pointer;
}

.form-container form .btn{
   text-align: center;
   width:100%;
   margin:1.5rem 0;
}

.form-container form p{
   padding-top: .8rem;
   color:var(--light-color);
   font-size: 1.5rem;
}

.login-form-container form p a{
   color:var(--green);
   text-decoration: underline;
}

.header{
   position: sticky;
   top:0; left:0; right:0;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   z-index: 1000;
}

.header .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
}

.header .flex .logo{
   font-size: 2.5rem;
   color:var(--black);
}

.header .flex .logo span{
   color:var(--main-color);
}

.header .flex .navbar a{
   margin:0 1rem;
   font-size: 2rem;
   color:var(--black);
}

.header .flex .navbar a:hover{
   color:var(--main-color);
   text-decoration: underline;
}

.header .flex .icons div{
   margin-left: 1.7rem;
   font-size: 2.5rem;
   cursor: pointer;
   color:var(--black);
}

.header .flex .icons div:hover{
   color:var(--main-color);
}

.header .flex .profile{
   position: absolute;
   top:120%; right:2rem;
   background-color: var(--white);
   border-radius: .5rem;
   box-shadow: var(--box-shadow);
   border:var(--border);
   padding:2rem;
   width: 30rem;
   padding-top: 1.2rem;
   display: none;
   animation:fadeIn .2s linear;
}

.header .flex .profile.active{
   display: inline-block;
}

.header .flex .profile p{
   text-align: center;
   color:var(--black);
   font-size: 2rem;
   margin-bottom: 1rem;
}

#menu-btn{
   display: none;
}

.dashboard .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.dashboard .box-container .box{
   padding:2rem;
   text-align: center;
   border:var(--border);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   background-color: var(--white);
}

.dashboard .box-container .box h3{
   font-size: 2.7rem;
   color:var(--black);
}

.dashboard .box-container .box h3 span{
   font-size: 2rem;
}

.dashboard .box-container .box p{
   padding:1.3rem;
   border-radius: .5rem;
   background-color: var(--light-bg);
   font-size: 1.7rem;
   color:var(--light-color);
   margin:1rem 0;
}



.add-products, .show-products{
      direction:rtl;
      /* margin-top: 10rem; */
    }

.add-products form{
   max-width: 70rem;
   margin: 0 auto;   
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border:var(--border);
   border-radius: .5rem;
   padding:2rem;
}

.add-products form .flex{
   display: flex;
   gap:1.5rem;
   flex-wrap: wrap;
}

.add-products form .flex .inputBox{
   flex:1 1 25rem;
}


.add-products form .flex .inputBox .ingredient-group{
   border: var(--border);
   border-radius: 10px;
   padding: 5px;
   margin: 5px;
}

.add-products form .flex #autocomplete {
  position: relative;
  background: var(--white);
  border: 1px solid var(--light-bg);
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 999;
  border-radius: 10px;
}

.add-products form .flex #autocomplete .item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 2.5rem;
  border-color: var(--main-color);
}

.add-products form .flex #autocomplete .no-match {
  color: #cc0000; /* red */
  font-style: italic;
  padding: 8px 12px;
  background-color: #fef2f2;
  border-top: 1px solid #eee;
}

.add-products form .flex #autocomplete .valid-match {
  color: green;
  font-weight: bold;
}

.add-products form .flex #autocomplete .item:hover {
  border-color: var(--light-color);
}
/**/

.add-products form .flex .select{
   margin-bottom: 1.2rem;
   width: 100%;
   background-color: var(--light-bg);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
   border:var(--border);
   margin-top: 1.5rem;
}


.add-products form .flex .select option{
   margin-bottom: 1.2rem;
   width: 100%;
   background-color: var(--light-bg);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
   border:var(--border);
   margin-top: 1.5rem;
}

.add-products form span{
   font-size:2.3rem;
   color:var(--black);
}

.add-products form .sub-span{
   font-size:2.3rem;
   color:var(--black);
   text-decoration: underline;
}

.add-products form span .requiring{
   font-size:2.3rem;
   color:var(--red);
}

.add-products form .box{
   font-size: 2.3em;
   background-color: var(--light-bg);
   color: var(--black);
   border-radius: .5rem;
   padding:1.4rem;
   width: 100%;
   margin-top: 1.5rem;
   text-align: right;
}

.add-products form textarea{
   height: 10.4rem;
   resize: none;
}

.show-products .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 33rem);
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}


.show-products input{
   width: 100%;
   border:var(--border);
   border-radius: 30px;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   padding:1.4rem;
   font-size: 2.8rem;
   color:var(--black);
   margin-bottom: 1rem;
}

.show-products .box-container .box{
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border:var(--border);
   padding:2rem;
}




.show-products .box-container .box.selectable {
  cursor: pointer;
  transition: background 0.3s ease;
}
.show-products .box-container .box.selectable.selected {
  background-color: #d4edda;
  border: 2px solid #28a745;
}



.show-products .box-container .box img{
   width: 100%;
   height: 20rem;
   object-fit: contain;
   margin-bottom: 1.5rem;
}

.show-products .box-container .box .name{
   font-size: 2.2rem;
   color:var(--black);
}

.show-products .box-container .box .price{
   font-size: 2.4rem;
   color:var(--main-color);
   margin:.5rem 0;
}

.show-products .box-container .box .price-input{
   font-size: 2.4rem;
   color:var(--main-color);
   margin:.5rem 0;
   border: var(--border);
   border-radius: 10px;
   width: 50%;
   text-align: center;
}
.show-products .box-container .box .details{
   font-size: 1.5rem;
   color:var(--light-color);
   line-height: 2;
}

/*updated on 16/2/2023*/
.search-form{
   direction: rtl;
}

.search-form form{
   display: flex;
   gap:1rem;
}

.search-form form input{
   width: 100%;
   border:var(--border);
   border-radius: 30px;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   padding:1.4rem;
   font-size: 2.8rem;
   color:var(--black);
}


.search-form form button{
   font-size: 2.5rem;
   height: 5.5rem;
   line-height: 5.5rem;
   background-color: var(--main-color);
   cursor: pointer;
   color:var(--white);
   border-radius: .5rem;
   width: 6rem;
   text-align: center;
}

.search-form form button:hover{
   background-color: var(--black);
}


.search-form form input.search-box-menu{
   width: 100%;
   border:var(--border);
   border-radius: 30px;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   padding:1.4rem;
   font-size: 2.8rem;
   color:var(--black);
}



.search-form #autocomplete {
  position: relative;
  background: var(--white);
  border: 1px solid var(--light-bg);
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 999;
  border-radius: 10px;
}

.search-form #autocomplete .item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 2.5rem;
}

.search-form #autocomplete .item:hover {
  background: var(--main-color);
}


/*add days and hours*/

.add-days form{
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border:var(--border);
   border-radius: .5rem;
   padding:1rem;
}

.add-days form .flex {
  display: flex;
  align-items: center;     /* vertical alignment */
  gap: 1.5rem;             /* space between items */
  padding: 0.8rem 0;
  border-bottom: 1px solid #eee;

  justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.add-days form .flex label {
  font-size: 3.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 10rem; /* keep day names aligned */
}



/* Inline label + input together */
.add-days form .flex .time-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 2.4rem;
  color: var(--black);
  font-weight: bold;
}

.add-days form .flex input[type="time"] {
  flex: 1;                 /* time inputs grow equally */
  min-width: 12rem;        /* prevent shrinking too small */
  padding: 0.4rem;
  font-size: 2.5rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #f9f9f9;
}

.add-days form .flex:last-child {
  border-bottom: none;
}


/**/























/*menu page for user*/


.menu-section {
  width: 100%;
  padding: 2rem;
  background: var(--light-bg);
}

.menu-header {
  display: grid;
  grid-template-columns: 80px 80px 1fr 100px 120px;
  gap: 1rem;
  padding: 1rem 1.5rem;
  font-weight: bold;
  background: #f8f8f8;
  border: var(--border);
  border-radius: .5rem;
  font-size: 2.3rem;
  color: var(--black);
  text-align: center;
  margin-bottom: 1.1rem;
}

.menu-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: var(--border);
}

.menu-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr 100px 120px;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #fff;
  border: var(--border);
  border-radius: .5rem;
  font-size: 2.3rem;
  color: var(--black);
  text-align: center;
}

.menu-image-label {
  text-align: center;
}

.menu-row span {
  min-width: 60px;
  white-space: nowrap;
}

.menu-id {
  color: var(--main-color);
  font-weight: bold;
}

.menu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  text-decoration: underline;
  display: inline-block;
 width: 200px;
}


.menu-name.expanded {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  text-decoration: none;
}

.menu-name .toggle-text {
  color: var(--main-color);
  margin-left: 0.3rem;
  font-weight: 500;
  text-decoration: underline;
}

.menu-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: .5rem;
}

@media (max-width: 768px) {
  .menu-header {
    display: none;
  }

  .menu-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    text-align:right;
  }

  .menu-image {
    margin-right: 1rem;
  }

  .menu-row span {
    flex: 1 1 40%;
  }
}







/* existing styles preserved */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.pagination button {
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
  cursor: pointer;
  border: 1px solid #ccc;
  background: white;
  border-radius: 0.3rem;
}
.pagination button.active {
  background: var(--main-color);
  color: white;
}

/**/

/* menu list with images menu3*/

/* .menu-section1 {
  width: 100%;
  padding: 2rem;
  background: var(--light-bg);
} */

.menu-section1 .category {
    padding: 20px;
    font-size: 3.0rem;
    border-radius: 20px;
    width: 100%;
    margin-top: 100px;
    
}

.menu-section1 .category h2 {
    background: #282828;
    color: #30ff4c;
    padding: 5px;
    border-radius: 5px;
}

.menu-section1 .menu-item {
    display: flex;
    align-items: center;
    background: #303030;
    color: #fff;
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
     border-radius: 20px;
}

.menu-section1 .menu-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    position: relative;
}

.menu-section1 .menu-item .info {
    padding: 10px;
    flex: 1;
}

.menu-section1 .menu-item h3 {
    margin: 0;
    font-size: 3.0rem;
}

.menu-section1 .menu-item p {
    color: #ffffff;
    margin: 5px 0 0;
    font-size: 2.4rem;
}


/* @media (max-width: 600px) {
    .menu-section1 .menu-item {
        flex-direction: column;
        text-align: center;
    }
    .menu-section1 .menu-item img {
        width: 100%;
    }
} */

/* Popup */

.popup-img {
  position: relative;
}
.popup {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    color: black;
    text-align: center;
    max-width: 400px;
}

.popup-content img {
    width: 100%;
    border-radius: 10px;
}

.close-btn1 {
   position: absolute;
  top: 10px; right: 20px;
  font-size: 6.5rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--red);
}






/* menu list with images of slider Dashboard Admin*/

/* .category-slider-container-dashboard {
    position: fixed;
    top: 0;
    left: 5rem;
    width: 100%;
    background: #818181;
    color: #fff;
    z-index: 1000;
    padding: 5px 0;
    border-bottom: 2px solid #222;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 90px;
    transition: margin-top 0.3s ease;
    height: 8.5rem;

}

.category-slider-spacer-dash {
    height: 60px; 
}

.category-slider-dash {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.category-slider-dash::-webkit-scrollbar {
    display: none;
}

.category-tab-dash a {
    background: #222;
    color: white;
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
    font-size: 2.5rem;
}

.category-tab-dash a:hover {
    background: #444;
}

.cat-arrow-dash {
    background: #333;
    color: white;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 50%;
    z-index: 2;
}

.cat-arrow-dash:hover {
    background: #555;
}

   @media (max-width: 600px) {
  .category-slider-container-dashboard {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #818181;
    color: #fff;
    z-index: 1000;
    padding: 5px 0;
    border-bottom: 2px solid #222;
    display: flex;
    align-items: center;
    margin-top: 90px;
    transition: margin-top 0.3s ease;
    height: 8.5rem;
  }

  .category-slider-container-dashboard.scrolled {
    margin-top: 70px;
  }
} */

/* @media (max-width: 600px) {
    .category-slider-container-dashboard {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #111;
    z-index: 1000;
    padding: 5px 0;
    border-bottom: 2px solid #222;
    display: flex;
    align-items: center;
    margin-top: 0px;
}
    
   } */




/* menu list with images of slider Dashboard Admin*/




.category-slider-container-d1 {
    display: flex;
    align-items: center;
    position: sticky; /* Keeps it in place relative to its parent */
    top: 8.5rem; /* Sticks to the top of the page */
    background: var(--light-bg); /* Matches page background */
    z-index: 400; /* Stays above other content */
    padding: 10px 0;
    margin-top: 30px;
    border: 2px solid  var(--light-color);
    justify-content: center;
    border-radius: 5px;
    height: 7.5rem;
    margin-bottom: 0rem;
}

.category-slider-spacer-d1 {
    height: 10px; /* Same height as slider container */
}

.category-slider-d1 {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}

.category-slider::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Chrome/Safari */
}

.category-tab-dash {
    background: var(--blue);
    color: white;
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
    font-size: 2rem;
}

.category-tab-dash a {
    color: white;

}

.category-tab-dash:hover {
    background: #444;
}

.cat-arrow-dash {
    background: none;
    color: black;
    border: none;
    font-size: 3.0rem;
    cursor: pointer;
    padding: 2px 2px;
    border-radius: 50%;
    z-index: 2;
}

.cat-arrow-dash:hover {
    background: none;
}



@media (max-width: 751px) {
    .category-slider-container-d1 {
    position: fixed;
    left: 0;
    width: 100%;
    margin-top: 5.0px;
    z-index: 2;
   }

   .cat-arrow-dash.right{
    display: none;
}


    
}
@media (max-width: 450px) {
    .category-slider-container-d1 {
    position: fixed;
    margin-top: 8.0px;
   }
   


    
}










.category-slider-container {
    display: flex;
    align-items: center;
    position: sticky; /* Keeps it in place relative to its parent */
    top: 0; /* Sticks to the top of the page */
    background: #111; /* Matches page background */
    z-index: 1000; /* Stays above other content */
    padding: 10px 0;
    margin-top: 20px;
    border-bottom: 2px solid #222;
    justify-content: center;
    border-radius: 5px;
}

.category-slider-spacer {
    height: 60px; /* Same height as slider container */
}

.category-slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}

.category-slider::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Chrome/Safari */
}

.category-tab {
    background: #222;
    color: white;
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
    font-size: 2rem;
}

.category-tab:hover {
    background: #444;
}

.cat-arrow {
    background: #333;
    color: white;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 50%;
    z-index: 2;
}

.cat-arrow:hover {
    background: #555;
}



@media (max-width: 600px) {
    .category-slider-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #111;
    z-index: 1000;
    padding: 10px 0;
    border-bottom: 2px solid #222;
    display: flex;
    align-items: center;
}
    
   }
/* menu list with images menu3*/















/* #save-all {
  display: block;
  width: fit-content;
  margin: 1rem auto 2rem;
  padding: 10px 20px;
  font-size: 1.6rem;
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
} */

/**/
.update-product{
   direction: rtl;
}

.update-product form{
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border:var(--border);
   padding:2rem;
   max-width: 50rem;
   margin:0 auto;
}

.update-product form .image-container{
   margin-bottom: 2rem;
}

.update-product form .image-container .main-image img{
   height: 20rem;
   width: 100%;
   object-fit: contain;
}

.update-product form .image-container .sub-image{
   display: flex;
   gap:1rem;
   justify-content: center;
   margin:1rem 0;
}

.update-product form .image-container .sub-image img{
   height: 5rem;
   width: 7rem;
   object-fit: contain;
   padding:.5rem;
   border:var(--border);
   cursor: pointer;
   transition: .2s linear;
}

.update-product form .image-container .sub-image img:hover{
   transform: scale(1.1);
}

.update-product form .box{
   width: 100%;
   border-radius: .5rem;
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
   background-color: var(--light-bg);
   margin:1rem 0;
}

.update-product form .select{
   width: 100%;
   border-radius: .5rem;
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
   background-color: var(--light-bg);
   margin:1rem 0;
}

.update-product form span{
   font-size: 2.1rem;
   color:var(--black);
}

.update-product form textarea{
   height: 15rem;
   resize: none;
}

.update-product form .requiring{
   color:var(--red);
}


.categoryAll .add-to-btn{
   display: inline-block;
   width: auto;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 3.5rem;
   text-transform: capitalize;
   color:var(--white);
   cursor: pointer;
   text-align: center;
   background: var(--main-color);
   margin: 3rem;
}
/**/   


.category-box {
   border: var(--border);
   margin-bottom: 1rem;
   border-radius: 1rem;
   overflow: hidden;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
}

.category-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: var(--light-color);
   color: var(--white);
   padding: 1.5rem 2rem;
   font-size: 2.2rem;
   cursor: pointer;
}

.category-header h3 {
   margin: 0;
}

.toggle-icon {
   transition: transform 0.3s ease;
}

.category-box.active .toggle-icon {
   transform: rotate(180deg);
}




.categoryAll .box-container {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: (minmax(16rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
   gap: 1.5rem;
}
   
.categoryAll .box-container .box {
   padding: 2rem;
   margin: 1rem;
   border: 0.1rem solid var(--black);
   text-align: center;
   background-color: var(--white);
   border-radius: .9rem;
}
   
.categoryAll .box-container .box:hover {
   background: var(--light-bg);
}
   
   
.categoryAll .box-container .box img {
   height: 30rem;
   width: 100%;
   margin-bottom: 1rem;
}
   
.categoryAll .box-container .box h3 {
   font-size: 3.8rem;
   color: var(--black);
   text-align: center;
   cursor: pointer;
}

.categoryAll .box-container .box h3.item-name{
   font-size: 3.3rem;
   color: var(--black);
   text-align: center;
   cursor: pointer;
}

.categoryAll .box-container .box h3.item-price{
   font-size: 3.1rem;
   color: var(--blue);
   text-align: center;
   cursor: pointer;
   text-decoration: underline;
}
   
.categoryAll .box-container .box:hover h3 {
   color: var(--main-color);
}


.categoryAll .search-bar {
   width: 100%;
   padding: 1rem 2rem;
   font-size: 1.6rem;
   margin-bottom: 2rem;
   border-radius: 0.8rem;
   border: var(--border);
   outline: none;
   transition: 0.3s ease;
}

.categoryAll .search-bar:focus {
   border-color: var(--main-color);
   box-shadow: 0 0 0 0.2rem rgba(13, 221, 13, 0.25);
}

.categoryAll .item-count {
   font-size: 2.5rem;
   font-weight: normal;
   color: var(--white);
   margin-left: 0.3rem;
   font-weight: bold;
}

.categoryAll .category-box {
   transition: all 0.3s ease;
}

.categoryAll .box-container .box {
   transition: transform 0.3s ease;
}

.categoryAll .box-container .box:hover {
   transform: scale(1.03);
}
/**/

/*updated on 16/2/2023*/
.search-form_on-off{
   width: 100%;
}

.search-form_on-off form{
   display: flex;
   gap:1rem;
   justify-content: space-around;
   align-items: center;
}

.search-form_on-off form input{
   width: 100%;
   border:var(--border);
   border-radius: .5rem;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
}


.search-form_on-off .filter-bar {
   display: flex;
   flex-wrap: wrap;
   gap: 1.2rem;
   background-color: var(--white);
   padding: 1.5rem 2rem;
   border-radius: 1rem;
   border: var(--border);
   box-shadow: var(--box-shadow);
   margin-bottom: 2rem;
   align-items: center;
   justify-content: space-between;
}

.search-form_on-off .filter-bar label{
   font-size: 2.3rem;
   font-weight: bold;
}

.search-form_on-off  .filter-bar input,
.search-form_on-off  .filter-bar select {
   flex: 1 1 22rem;
   padding: 1rem 1.5rem;
   font-size: 2.2rem;
   border: var(--border);
   border-radius: 0.8rem;
   background-color: var(--light-bg);
   color: var(--black);
   transition: 0.2s ease;
}

.search-form_on-off  .filter-bar input:focus,
.search-form_on-off  .filter-bar select:focus {
   border-color: var(--main-color);
   box-shadow: 0 0 0 0.2rem rgba(13, 221, 13, 0.15);
}

.search-form_on-off  .filter-bar .btn{
      flex: 1 1 22rem;
}

@media (max-width: 768px) {
   .search-form_on-off  .filter-bar {
      flex-direction: column;
      align-items: stretch;
   }

   .search-form_on-off  .filter-bar {
      flex-wrap: wrap;
   }

   .search-form_on-off  .filter-bar input,
   .search-form_on-off  .filter-bar select {
      flex: 1 1 100%;
   }

   .search-form_on-off  .filter-bar .btn{
         flex: 1 1 100%;
   }
}
/**/




.orders .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 33rem);
   gap:1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.orders .box-container .box{
   padding:2rem;
   padding-top: 1rem;
   border-radius: .5rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
}

.orders .box-container .box p{
   line-height: 1.5;
   font-size: 2rem;
   color:var(--light-color);
   margin:1rem 0;
}

.orders .box-container .box p span{
   color:var(--main-color);
}

.orders .box-container .box p .tot-pro{
   color:var(--black);
}

.orders .box-container .select{
   margin-bottom: .5rem;
   width: 100%;
   background-color: var(--light-bg);
   padding:1rem;
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
   border:var(--border);
}










.aside-container-plcaed .posts-container .post{
    width:100%;
    padding:2rem;
    background: var(--white);
    border:var(--border);
    border-radius: .5rem;
    /* margin-bottom: 1.5rem; */
    margin-bottom: 8rem; /*margin from bottom-nav*/
}

.order-table-box-placed {
  padding: 2rem;
  background: #fff;
  border: var(--border);
  border-radius: .5rem;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.order-table-placed {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.order-table-placed th,
.order-table-placed td {
  text-align: center;
  padding: 0.5rem;
  border-bottom: 1px solid #ddd;
  border: 1px solid var(--black);
}

@media (max-width: 768px) {
  .order-table-placed th,
  .order-table-placed td {
    font-size: 2rem;
  }

}

@media (max-width: 345px) {
  .order-table-placed th,
  .order-table-placed td {
    font-size: 1.5rem;
  }

}

.accounts{
   direction: rtl;
}

.accounts .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 33rem);
   gap:1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.accounts .box-container .box{
   padding:2rem;
   padding-top: .5rem;
   border-radius: .5rem;
   text-align: center;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
}

.accounts .box-container .box p{
   font-size: 2rem;
   color:var(--light-color);
   margin: 1rem 0;
}

.accounts .box-container .box p span{
   color:var(--main-color);
}

.contacts .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 33rem);
   gap:1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.contacts .box-container .box{
   padding:2rem;
   padding-top: 1rem;
   border-radius: .5rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
}

.contacts .box-container .box p{
   line-height: 1.5;
   font-size: 2rem;
   color:var(--light-color);
   margin:1rem 0;
}

.contacts .box-container .box p span{
   color:var(--main-color);
}


/**/

.daily-container{
   padding:0 20px;
   margin:0 auto;
   max-width: 1200px;
   padding-bottom: 70px;
}


.daily-container .img img{
   /* margin-top: 1.0rem;
   height: 15rem;
   width: 100%;
   object-fit: contain;
   margin-bottom: 1rem; */
   display: block; /* Ensure the image is treated as a block element */
   margin: 1rem auto; /* Center the image horizontally */
   height: 15rem; /* Fixed height */
   max-width: 80%; /* Limit the width to 80% of the container */
   object-fit: contain; /* Maintain aspect ratio */
   margin-bottom: 1rem;
}

.daily-container .items-table{
   padding:20px 0;
}

.daily-container .items-table table{
   width: 100%;
   text-align: center;
   border:var(--border);
   border-radius: 5px;
   box-shadow: var(--box-shadow);
   background-color: var(--white);
}

.daily-container .items-table thead{
   background-color: var(--black);
}

.daily-container .items-table table thead th{
   padding:10px;
   color:var(--white);
   text-transform: capitalize;
   font-size: 20px;
}

.daily-container .items-table table .table-bottom{
   background-color: var(--light-bg);
}

.daily-container .items-table table tr td{
   padding:10px;
   font-size: 20px;
   color:var(--black);
   border: 1px solid var(--black);
}

.daily-container .items-table table td.link{
   text-decoration: underline;
   color:#407bff;
   cursor: pointer;
   border: 1px solid var(--black);
}

.daily-container .items-table table tr td:nth-child(1){
   padding:0;
}

.daily-container .items-table table tr td input[type="number"]{
   width: 120px;
   border:var(--border);
   padding:12px 14px;
   font-size: 20px;
   color:var(--black);
   border-radius: .5rem;
}

.daily-container .items-table .cart-btn{
   margin-top: 10px;
   text-align: center;
}

.daily-container .items-table .disabled{
   pointer-events: none;
   background-color: var(--red);
   opacity: .5;
   user-select: none;
}

.daily-container .filter-container {
   display: flex;
   align-items: center;
   gap: 10px; /* Adjust the gap as needed */
   margin-bottom: 15px; /* Adjust the margin as needed */
   margin-top: 20px; /* Adjust the margin as needed */
}


.filter-container label{
   padding: 10px; /* Adjust the padding as needed */
   margin: 0; /* Remove any default margins */
   font-size: 2.0rem; /* You can change this later as needed */

   position: relative;
   border-radius: .5rem;
   overflow: hidden;
}



.filter-container input,
.filter-container select {
   padding: 10px; /* Adjust the padding as needed */
   margin: 0; /* Remove any default margins */
   font-size: 2.0rem; /* You can change this later as needed */

   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border:var(--border);
   overflow: hidden;
}

.filter-container button {
   padding: 10px; /* Adjust the padding as needed */
   margin: 0; /* Remove any default margins */
   font-size: 2.0rem; /* You can change this later as needed */
   cursor: pointer;
   width: 15%;
}







.statistics-container label{
   padding: 10px; /* Adjust the padding as needed */
   margin: 0; /* Remove any default margins */
   font-size: 2.0rem; /* You can change this later as needed */

   position: relative;
   border-radius: .5rem;
   overflow: hidden;
}



.statistics-container input,
.statistics-container select {
   padding: 10px; /* Adjust the padding as needed */
   margin: 0; /* Remove any default margins */
   font-size: 2.0rem; /* You can change this later as needed */

   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border:var(--border);
   overflow: hidden;
}



/*3/2/2023*/

.products .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 33rem);
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.products .box-container .box{
   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border:var(--border);
   padding:2rem;
   overflow: hidden;
}
/**/
.products .box-container .box.hide {
   display: none;
 }
 
 .products .box-container .box.active {
   -webkit-animation: fadeUp .4s linear;
           animation: fadeUp .4s linear;
 }
/**/
.products .box-container .box img{
   height: 20rem;
   width: 100%;
   object-fit: contain;
   margin-bottom: 1rem;
}

.products .box-container .box .fa-heart,
.products .box-container .box .fa-eye{
   position: absolute;
   top:1rem;
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.2rem;
   font-size: 2rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;
   text-align: center;
   color:var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.products .box-container .box .fa-heart{
   right: -6rem;
}

.products .box-container .box .fa-eye{
   left: -6rem;
}

.products .box-container .box .fa-heart:hover,
.products .box-container .box .fa-eye:hover{
   background-color: var(--black);
   color:var(--white);
}

.products .box-container .box:hover .fa-heart{
   right:1rem;
}

.products .box-container .box:hover .fa-eye{
   left:1rem;
}

/*27/1/2023 update for qty name*/
.products .box-container .box .flex1{
   display: flex;
   align-items: center;
   gap:1rem;
}

.products .box-container .box .flex1 .qty1{
   width: 7rem;
   padding:1rem;
   padding-left: 8.5rem;/*new on 3/2/2023*/
   font-size: 1.8rem;
   color:var(--black);
   
}

.products .box-container .box .flex1 .name{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}
/*27/1/2023 update for qty name*/

.products .box-container .box .name{
   font-size: 2rem;
   color:var(--black);
}

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

.products .box-container .box .flex .qty{
   width: 7rem;/*7rem base*/
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
   text-align: center;
}


/*added on 3/22/2023 // plus and minus for quantity | qty-group-box */

.products .box-container .box .flex .qty-box {
   display: flex;
   align-items: center;
   gap:1rem;
   flex-wrap: wrap;
}


.products .box-container .box .flex .qty-box .fa-minus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.5rem;
   color:var(--white);
   cursor: pointer;
   padding: 5px 5px;
}

.products .box-container .box .flex .fa-minus:hover{
   background-color: var(--black);
}

.products .box-container .box .flex .qty-box .fa-plus{
   height: 3.5rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 3.5rem;
   font-size: 2.5rem;
   color:var(--white);
   cursor: pointer;
   padding: 5px 5px;
}

.products .box-container .box .flex .fa-plus:hover{
   background-color: var(--black);
}

/* .products .box-container .box .flex .qty{
   width: 7rem;/*7rem base
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
} */

.products .box-container .box .flex .price{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}


/*27/1/2023 update for qty name*/
.products .box-container .box .flex1{
   display: flex;
   align-items: center;
   gap:1rem;
}

.products .box-container .box .flex1 .qty1{
   width: 7rem;
   padding:1rem;
   /* padding-left: 8.5rem; *//*new on 3/2/2023*/
   font-size: 1.8rem;
   color:var(--black);
   
}

.products .box-container .box .flex1 .name{
   font-size: 2rem;
   color:var(--black);
   font-weight: bold;
   margin-left: auto;
}
/*27/1/2023 update for qty name*/

.products .box-container .box .flex .sale-price{
   font-size: 2.3rem;
   color:var(--red);
   margin-left: auto;
}

.products .box-container .box .flex .sale-price del{
   font-size: 2rem;
   color:var(--black);
   margin-left: auto;
   text-decoration: line-through;
   
}


@media (max-width:1200px){
   .daily-container .items-table{
      overflow-x: scroll;
   }

   .daily-container .items-table table{
      width: 1200px;
   }
}


/**/


.shopping-cart{
   padding:0px 0;
   direction: rtl;
}

.shopping-cart .box-input{
   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: 20px;
   border:var(--border);
   padding:2rem;
   overflow: hidden;
   width: 25%;
   font-size: 2rem;
   height: 2.5rem;
   text-align: center;
   color: var(--black);
   /* margin-bottom: 1.2rem; */
}



.shopping-cart table{
   width: 100%;
   text-align: center;
   border:var(--border);
   border-radius: 5px;
   box-shadow: var(--box-shadow);
   background-color: var(--white);
}

.shopping-cart table thead{
   background-color: var(--black);
}

.shopping-cart table thead th{
   padding:10px;
   color:var(--white);
   text-transform: capitalize;
   font-size: 20px;
}

.shopping-cart table .table-bottom{
   background-color: var(--light-bg);
}

.shopping-cart table tr td{
   padding:10px;
   font-size: 2.5rem;
   color:var(--black);
   border: 1px solid var(--black);
}

.shopping-cart table tr td:nth-child(1){
   padding:0;
   width: 30%;
}

.shopping-cart table tr td input[type="number"]{
   width: 80px;
   border:var(--border);
   padding:12px 14px;
   font-size: 20px;
   color:var(--black);
}


.shopping-cart table tr td .quantity{
   border: var(--border);
   border-radius: 20px;
   padding: 0.5rem 1rem 0.5rem 1rem;
   font-size: 3rem;
}


.shopping-cart .cart-btn{
   margin-top: 10px;
   text-align: center;
}

.shopping-cart .disabled{
   pointer-events: none;
   background-color: var(--red);
   opacity: .5;
   user-select: none;
}

.removeItem{
   display: inline-block;
   width: 60%;
   margin-top: 1rem;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 2.2rem;
   text-transform: capitalize;
   color:#fff;
   background-color: var(--main-color);
   cursor: pointer;
   text-align: center;
}

.submit-btn{
   display: inline-block;
   width: 100%;
   margin-top: 1rem;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size:3.5rem;
   text-transform: capitalize;
   color:#fff;
   background-color: var(--main-color);
   cursor: pointer;
   text-align: center;
}
.decrementItem{
   height: 4.0rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 4.0rem;
   font-size: 2.8rem;
   color:#fff;
   cursor: pointer;
   align-items: center;
}

.incrementItem{
   height: 4.0rem;
   border-radius: .5rem;
   background-color: var(--main-color);
   width: 4.0rem;
   font-size: 2.58rem;
   color:#fff;
   cursor: var(--black);
}
.quantity{
   font-weight: bold;
   font-size: 2.5rem;
}




@media (max-width:640px){
   .shopping-cart .box-input{
   
   width: 40%;

}
}
/**/










.chart-container {
   display: flex;
   justify-content: space-around;
   align-items: center;
   gap: 20px; /* Adjust the gap as needed */
   margin: 20px 0; /* Adjust the margin as needed */
}

.chart-container canvas {
   flex: 1; /* Make both charts take up equal space */
   max-width: 50%; /* Adjust the max-width as needed */
   height: 100px; /* Increase height for better visibility */
}


















/**/
.drop {
   position: relative;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
 .drop.open {
   z-index: 100;
 }
 .drop.open .drop-screen {
   z-index: 100;
   display: block;
 }
 .drop.open .drop-options {
   z-index: 200;
   max-height: 200px;
 }
 .drop.open .drop-display {
   z-index: 200;
   border-color: var(--main-color);
 }
 .drop select {
   display: none;
 }
 .drop .drop-screen {
   position: fixed;
   width: 100%;
   height: 100%;
   background: #000;
   top: 0px;
   left: 0px;
   opacity: 0;
   display: none;
   z-index: 1;
 }
 
 .drop .drop-display {
   position: relative;
   padding: 0px 20px 5px 5px;
   border: 4px solid #444;
   width: 100%;
   background: #FFF;
   z-index: 1;
   margin: 0px;
   font-size: 16px;
   min-height: 58px;
 }
 .drop .drop-display:hover:after {
   opacity: 0.75;
 }
 .drop .drop-display:after {
   font-family: 'Material Icons';
   content: "\e5c6";
   position: absolute;
   right: 10px;
   top: 12px;
   font-size: 24px;
   color: #444;
 }
 .drop .drop-display .item {
   position: relative;
   display: inline-block;
   border: 2px solid #333;
   margin: 5px 5px -4px 0px;
   padding: 0px 25px 0px 10px;
   overflow: hidden;
   height: 40px;
   line-height: 36px;
 }
 .drop .drop-display .item .btnclose {
   color: var(--black);
   position: absolute;
   font-size: 16px;
   right: 5px;
   top: 10px;
   cursor: pointer;
 }
 .drop .drop-display .item .btnclose:hover {
   opacity: 0.75;
 }
 .drop .drop-display .item.remove {
   -webkit-animation: removeSelected 0.2s, hide 1s infinite;
           animation: removeSelected 0.2s, hide 1s infinite;
   -webkit-animation-delay: 0s, 0.2s;
           animation-delay: 0s, 0.2s;
 }
 .drop .drop-display .item.add {
   -webkit-animation: addSelected 0.2s;
           animation: addSelected 0.2s;
 }
 .drop .drop-display .item.hide {
   display: none;
 }
 .drop .drop-options {
   background: var(--light-color);
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
   position: absolute;
   width: 100%;
   max-height: 0px;
   overflow-y: auto;
   transition: all 0.25s linear;
   z-index: 1;
 }
 .drop .drop-options a {
   display: block;
   height: 40px;
   line-height: 40px;
   padding: 0px 20px;
   color: white;
   position: relative;
   max-height: 40px;
   transition: all 1s;
   overflow: hidden;
   font-size: 2rem;
 }
 .drop .drop-options a:hover {
   background: var(--main-color);
   cursor: pointer;
 }
 .drop .drop-options a.remove {
   -webkit-animation: removeOption 0.2s;
           animation: removeOption 0.2s;
   max-height: 0px;
 }
 .drop .drop-options a.add {
   -webkit-animation: addOption 0.2s;
           animation: addOption 0.2s;
 }
 .drop .drop-options a.hide {
   display: none;
 }
 
 @-webkit-keyframes pop {
   from {
     -webkit-transform: scale(0);
             transform: scale(0);
   }
   to {
     -webkit-transform: scale(1);
             transform: scale(1);
   }
 }
 
 @keyframes pop {
   from {
     -webkit-transform: scale(0);
             transform: scale(0);
   }
   to {
     -webkit-transform: scale(1);
             transform: scale(1);
   }
 }
 @-webkit-keyframes removeOption {
   from {
     max-height: 40px;
   }
   to {
     max-height: 0px;
   }
 }
 @keyframes removeOption {
   from {
     max-height: 40px;
   }
   to {
     max-height: 0px;
   }
 }
 @-webkit-keyframes addOption {
   from {
     max-height: 0px;
   }
   to {
     max-height: 40px;
   }
 }
 @keyframes addOption {
   from {
     max-height: 0px;
   }
   to {
     max-height: 40px;
   }
 }
 @-webkit-keyframes removeSelected {
   from {
     -webkit-transform: scale(1);
             transform: scale(1);
   }
   to {
     -webkit-transform: scale(0);
             transform: scale(0);
   }
 }
 @keyframes removeSelected {
   from {
     -webkit-transform: scale(1);
             transform: scale(1);
   }
   to {
     -webkit-transform: scale(0);
             transform: scale(0);
   }
 }
 @-webkit-keyframes addSelected {
   from {
     -webkit-transform: scale(0);
             transform: scale(0);
   }
   to {
     -webkit-transform: scale(1);
             transform: scale(1);
   }
 }
 @keyframes addSelected {
   from {
     -webkit-transform: scale(0);
             transform: scale(0);
   }
   to {
     -webkit-transform: scale(1);
             transform: scale(1);
   }
 }
 @-webkit-keyframes hide {
   from, to {
     max-height: 0px;
     max-width: 0px;
     padding: 0px;
     margin: 0px;
     border-width: 0px;
   }
 }
 @keyframes hide {
   from, to {
     max-height: 0px;
     max-width: 0px;
     padding: 0px;
     margin: 0px;
     border-width: 0px;
   }
 }
/**/
































@media (max-width:1200px){
   .shopping-cart{
      overflow-x: scroll;
   }

   .shopping-cart table{
      width: 1200px;
   }
}



@media (max-width:991px){

   html{
      font-size: 55%;
   }

}

@media (max-width:768px){

   .products .box-container { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }

   .categoryAll .box-container { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }

   .categoryAll .box-container .box img{
      height: 13rem;
      width: 100%;
      object-fit:fill;
      margin-bottom: 1rem;
   }
   
   #menu-btn{
      display: inline-block;
   }

   .header .flex .navbar{
      position: absolute;
      top:99%; left:0; right:0;
      border-top: var(--border);
      border-bottom: var(--border);
      background-color: var(--white);
      transition: .2s linear;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }

   .header .flex .navbar.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
   }

   .header .flex .navbar a{
      display: block;
      margin:2rem;
   }

}

@media (max-width:450px){

   html{
      font-size: 50%;
   }

   .heading{
      font-size: 3.5rem;
   }

   .flex-btn{
      flex-flow: column;
      gap:0;
   }

   .add-products form textarea{
      height:15rem;
   }   

   .show-products .box-container{
      /* grid-template-columns: 1fr; */
      grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr;
   }

   .orders .box-container{
      grid-template-columns: 1fr;
   }

   .accounts .box-container{
      grid-template-columns: 1fr;
      /* grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; */
   }

   .contacts .box-container{
      grid-template-columns: 1fr;
   }

   #togglePassword{
      margin-right: 37rem;
      bottom: 33px;
   
    }

}

@media (max-width: 600px) {
    .categoryAll .box-container {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        /* padding-right: 3rem */

;
    }
}

@media (max-width: 400px) {
    .categoryAll .box-container {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 1fr;
        /* padding-right: 3rem */

;
    }
}