/* 26 January 2025 - AY Reddy */
    
#productContainer {
  /*padding: 8px; */
}

.category-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}
/* Item Card Styles */
.item-card {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  justify-content: flex-start;
  align-items: flex-start;
  background: #fff;
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
}

/* Item Image Section */
.item-image {
  position: relative;
  width: 100%;
   /* Adjust the height for the banner image */
  overflow: hidden; /* Prevent image overflow */
}

.item-image img {
  width: 100%; /* Make the image full cover */
  height: 100%; /* Make the image fully cover the div */
  object-fit: cover; /* Ensure the image fills the div while maintaining aspect ratio */
  border-radius: 8px;
}

/* Item Details Section */
.item-details {
  padding: 12px;
  width: 100%; /* Take full width under the image */
  margin-top: 12px; /* Space between the image and description */
}

.item-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 8px;
  color: #333;
}

.item-price {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 4px;
  color: #4caf50;
}

.item-rating {
  position: absolute;
  font-size: 12px;
  right: 25px;
  color: #999;
}

.item-description {
  font-size: 12px;
  color: #666;
}

/* Add Button for Cart */
.add-btn {
  position: absolute;
  bottom: 10px;
  right: 10px; /* Position the button at the top-right corner */
  width: 80px;
  padding: 6px 0;
  background-color: #db0f18;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.add-btn:hover {
  background-color: #f9ba12;
}

/* Quantity Controls for Cart */
.quantity-controls {
  position: absolute;
  bottom: 10px;
  right: 10px; /* Position the quantity controls at the bottom-right corner */
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.minus-btn,
.plus-btn {
  background: #db0f18;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 10%;
  cursor: pointer;
}

.minus-btn:hover,
.plus-btn:hover {
  background-color: #f9ba12;
}

.quantity {
  font-size: 14px;
  font-weight: bold;
  margin: 0 8px;
  color: #333;
}

        /* Custom styling for the search bar and toggle switch */
        .search-bar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 600px;
            margin: 6px auto;
        }

        .search-input-group {
            width: 80%;
            position: relative;
        }

        .search-input-group input {
            width: 100%;
            padding-left: 35px; /* Space for the search icon */
            padding-right: 10px;
            border-radius: 25px;
            border: 2px solid #ddd;
            font-size: 16px;
        }

        .search-icon {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
            color: #999;
        }

        /* Styling for the Veg Mode toggle */
        .veg-mode-toggle {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 8px;
        }
 /* Veg Mode Toggle */
.veg-toggle {
    display: flex;
    align-items: center;
    font-size: 12px;
    gap: 5px;
    height: 20px;
}

.veg-toggle input {
    display: none;
}

.veg-slider {
    width: 30px;
    height: 16px;
    background-color: #ccc;
    border-radius: 20px;
    position: relative;
    transition: background-color 0.3s;
}

.veg-slider:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.3s;
}

.veg-toggle input:checked + .veg-slider {
    background-color: #4caf50;
}

.veg-toggle input:checked + .veg-slider:before {
    transform: translateX(14px);
}

.veg-text {
    font-size: 12px;
    color: #666;
}
/* OLD  */

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #dddd;
  }
  
  th, td {
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even){background-color: #f2f2f2}

  #product td, #product th {
    border: 1px solid #ddd;
   
  }

  #product th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4eb0db;
    color: white;
  }