.card {
  background-color: #4b4b4b;
  color: white;
  border-radius: 10px;
}

a {
  color: #aad8ff;
}

.product-image {
  max-width: 100%;
  max-height: 200px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .product-image {
    max-width: 250px;
    max-height: 250px;
  }
}

:root {
  --bgURL: url("images/bg.jpeg");
}

body {
  background-image: var(--bgURL);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: white;
  /* optional: improves readability */
}

#table-cart-items tbody tr {
  cursor: pointer;
}

.text-danger {
  color: red !important;
}

.card-body {
  min-width: 0;
  /* Prevent flex children from overflowing */
}

.card-body>.d-flex {
  flex-shrink: 0;
}

#modalImageContainer img {
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  #modalImageContainer img {
    max-width: calc(100vw / 3);
    /* Adjust based on how many images you expect */
  }
}

@media (max-width: 767px) {
  #modalImageContainer {
    flex-direction: column !important;
    align-items: center !important;
  }

  #modalImageContainer img {
    width: 100% !important;
    height: auto;
  }
}

#modalImageContainer a:hover img {
  opacity: 0.9;
  box-shadow: 0 0 5px #00bfff;
}

.highlight-select {
  outline: 4px solid #ffc107 !important;
  box-shadow: 0 0 6px #ffc107;
}