.product-image {
   object-fit: cover;
   /* Memastikan gambar terpotong sesuai proporsi */
   width: 100%;
   /* Gambar memenuhi lebar elemen */
   height: 200px;
   /* Tetapkan tinggi konsisten */
   display: block;
   /* Hindari celah akibat gambar inline */
}

.card-product {
   /* Atur tinggi minimum card */
   display: flex;
   flex-direction: column;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   box-sizing: content-box;
   /* Pastikan elemen dalam card tersusun secara vertikal */
}

.card-body-product {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   flex-basis: 30%;
}

.product-title {
   font-weight: bold;
   font-size: 24px;
   flex-grow: 1;
   flex-basis: 30%;
}

.card-text-product {
   font-weight: bolder;
   font-size: 20px;
   height: fit-content;
}

.card-footer-product {
   flex-grow: 1;
   height: fit-content;
   display: flex;
   flex-basis: 15%;
   flex-direction: column;
}

.qty-change {
   border: none;
   text-decoration: none;
   text-align: center;
   padding: auto;
   box-shadow: none;
   outline: none;
}

.top-selling,
.recent-transaction {
   height: 100%;
}

#scanner-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   /* Batasi ukuran maksimal */
   height: auto;
   padding: 10px;
   overflow: hidden;
   /* Pastikan elemen tidak keluar dari container */
}

#scanner-container video {
   max-width: 100%;
   /* Pastikan video tidak lebih lebar dari container */
   height: auto;
   border-radius: 8px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

#scanner-container .html5-qrcode-element {
   width: 100%;
   max-width: 100%;
}

#scanner-container select {
   width: 100%;
   margin-top: 10px;
}

#scanner-container button {
   margin-top: 10px;
   width: 100%;
   /* Pastikan tombol tidak lebih lebar dari container */
   max-width: 70px;
   /* Atur ukuran maksimal tombol */
   padding: 8px 12px;
   font-size: 14px;
   font-weight: bold;
   border-radius: 6px;
   background-color: #dc3545;
   color: white;
   border: none;
   cursor: pointer;
   transition: 0.3s;
}

#scanner-container button:hover {
   background-color: #c82333;
}


@media (max-width: 576px) {
   .card-product {
      height: auto;
   }

   .product-image {
      height: 150px;
   }

   .product-title {
      font-size: 18px;
   }

   .card-body-product {
      flex-grow: 1;
      flex-basis: 30%;
   }

   .card-text-product {
      font-size: 16px;
   }

   .card-footer-product {
      flex-grow: 1;
      flex-basis: 10%;
      font-size: 14px;
   }
}