/* Card Component Styles */
.card {
  border: 1px solid #dee2e6; /* Light gray border for the card */
  border-radius: 0.375rem; /* Rounded corners for the card */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.card-body {
  padding: 1rem; /* Padding inside the card body */
}

/* Product Title */
.product-title {
  font-size: 1rem; /* Font size for the product title */
  color: #343a40; /* Dark gray color for text */
  margin-bottom: 0.5rem; /* Space below the title */
  cursor: pointer; /* Cursor changes to pointer to indicate clickable */
}

/* Product Price */
.product-price {
  font-size: 1.5rem; /* Larger font size for product price */
  color: #dc3545; /* Red color for price */
  font-weight: bold; /* Bold text for emphasis */
  margin-bottom: 0.5rem; /* Space below the price */
}

/* Product Rating */
.product-rating {
  font-size: 1.2rem; /* Font size for product rating */
  color: #ffc107; /* Yellow color for stars or rating */
  margin-bottom: 0.5rem; /* Space below the rating */
}

/* Product Reviews */
.product-reviews {
  font-size: 1rem; /* Font size for product reviews */
  color: #6c757d; /* Gray color for reviews */
  margin-bottom: 1rem; /* Space below the reviews */
}

/* Card Footer */
.card-footer {
  background-color: #f8f9fa; /* Light background color for footer */
  border-top: 1px solid #dee2e6; /* Light gray border at the top */
  padding: 0.5rem; /* Padding inside the card footer */
}

/* Button Hover Effect */
.btn-danger:hover {
  background-color: #c82333; /* Darker red background on hover */
  border-color: #bd2130; /* Darker border color on hover */
}

/* Product Details Image */
.product-details-image {
  width: 100%; /* Full width image */
  height: auto; /* Auto height to maintain aspect ratio */
  max-height: 275px; /* Maximum height to control image size */
  object-fit: contain; /* Maintain aspect ratio, fit within container */
  border-radius: 5px; /* Rounded corners for the image */
  border: 1px solid #ddd; /* Light border around the image */
}

/* Search Input Styles */
.search-input {
  width: 200px; /* Default width of the search input */
  transition: width 0.4s ease-in-out, border-color 0.4s; /* Smooth transition for width and border color */
  border: 1px solid #ced4da; /* Light gray border */
}

.search-input:focus {
  width: 300px; /* Increased width on focus */
  border-color: #dc3545; /* Red border color on focus */
  box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); /* Subtle shadow on focus */
}

/* Quantity Input */
.quantity-input {
  width: 50px; /* Fixed width for quantity input */
  text-align: center; /* Center text inside input */
}

/* Quantity Buttons */
.quantity-btn {
  width: 30px; /* Fixed width for quantity buttons */
  height: 30px; /* Fixed height for quantity buttons */
}

/* Toast Notification Container */
.toast-container {
  position: fixed; /* Fixed position at the bottom */
  bottom: 1rem; /* 1rem from the bottom */
  right: 1rem; /* 1rem from the right */
  padding: 1rem; /* Padding around the toast notifications */
  z-index: 1050; /* Ensure it's above other elements */
}

/* Modal Body Paragraphs */
.modal-body p {
  margin-bottom: 0.5rem; /* Space below paragraphs */
}

/* Modal Footer */
.modal-footer {
  justify-content: end; /* Align footer contents to the end (right) */
}

/* Footer Styles */
footer {
  background-color: #343a40; /* Dark background color for footer */
  color: #fff; /* White text color */
  padding: 2rem 0; /* Padding for top and bottom */
  border-top: 1px solid #454d55; /* Dark border at the top */
}

footer .container {
  max-width: 1200px; /* Maximum width for the footer container */
  margin: 0 auto; /* Center align the container */
}

footer h5 {
  margin-bottom: 1rem; /* Space below the heading */
  font-size: 1.5rem; /* Font size for footer headings */
  color: #e9ecef; /* Light gray color for text */
  font-weight: 600; /* Semi-bold text */
}

footer p {
  margin-bottom: 1rem; /* Space below paragraphs */
  color: #ced4da; /* Light gray color for text */
}

footer .list-unstyled li {
  margin-bottom: 0.5rem; /* Space below list items */
}

footer .list-unstyled a {
  color: #e9ecef; /* Light gray color for links */
  text-decoration: none; /* Remove underline from links */
  transition: color 0.3s; /* Smooth color transition */
}

footer .list-unstyled a:hover {
  color: #dc3545; /* Red color on hover */
  text-decoration: underline; /* Underline on hover */
}

/* Social Icons */
footer .social-icons a {
  color: #e9ecef; /* Light gray color for social icons */
  margin: 0 0.5rem; /* Spacing between social icons */
  font-size: 1.5rem; /* Font size for icons */
  transition: color 0.3s; /* Smooth color transition */
}

footer .social-icons a:hover {
  color: #dc3545; /* Red color on hover */
}

/* Global Styles */
body {
  font-family: Arial, sans-serif; /* Default font for the page */
  color: #333; /* Dark gray text color */
  line-height: 1.6; /* Line height for readability */
}

.container {
  max-width: 1200px; /* Maximum width for containers */
}

h5 {
  color: #dc3545; /* Red color for headings */
}
.dark-mode {
  background-color: #121212;
  color: white;
}

.dark-mode .card {
  background-color: #1e1e1e;
  color: white;
}

.dark-mode .navbar {
  background-color: #222 !important;
}