/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #f8f9fa; /* Light background for better readability */
  color: #333;
}

.page {
  padding: 20px;
}

.page.active {
  display: block;
}

.hidden {
  display: none;
}

/* Buttons */
button {
  margin: 10px;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 8px; /* Rounded corners */
  background-color: #007bff; /* Blue background */
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

button:active {
  background-color: #003f7f; /* Even darker blue on click */
}

/* Order Item Styles */
.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
}

.order-item button {
  padding: 10px 15px;
  font-size: 18px;
  margin: 0 5px;
  border-radius: 8px;
  color: white;
  cursor: pointer;
}

/* Minus Button (Red) */
.order-item button:first-child {
  background-color: #dc3545; /* Red for minus button */
}

.order-item button:first-child:hover {
  background-color: #c82333; /* Darker red on hover */
}

/* Plus Button (Green) */
.order-item button:last-child {
  background-color: #28a745; /* Green for plus button */
}

.order-item button:last-child:hover {
  background-color: #218838; /* Darker green on hover */
}

/* Order Item Text */
.order-item span {
  flex-grow: 1;
  text-align: center;
  font-size: 18px;
}

/* Main Page Buttons (Squared) */
#product-buttons {
  padding-bottom: 80px; /* Add padding to ensure the last button is visible */
}

#product-buttons button {
  width: 100%;
  max-width: 300px;
  height: 80px;
  font-size: 25px;
  font-weight: bold;
  margin: 15px auto;
  display: block;
  border-radius: 8px; /* Slightly rounded corners */
  background-color: #28a745; /* Green for product buttons */
  color: white;
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

#product-buttons button:hover {
  background-color: #218838; /* Darker green on hover */
}

/* Quantity Selection Page (Two Columns) */
#quantity-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Two columns on mobile */
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}

#quantity-options button {
  height: 80px;
  font-size: 20px;
  font-weight: bold;
  background-color: #ffc107; /* Yellow for quantity buttons */
  color: black;
  border-radius: 8px;
}

#quantity-options button:hover {
  background-color: #e0a800; /* Darker yellow on hover */
}

#quantity-options input {
  height: 80px;
  font-size: 20px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 8px;
}

#order-summary div:last-child {
  font-size: 22px;
  font-weight: bold;
  margin-top: 20px;
}

/* Numeric input and submit button container */
#custom-quantity-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  gap: 10px; /* Space between input and button */
}

#custom-quantity-container input {
  width: 60%; /* Input field takes up most of the space */
  height: 60px;
  font-size: 20px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 8px;
}

#custom-quantity-container button {
  width: 30%; /* Button takes up less space */
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  background-color: #28a745; /* Green for submit button */
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#custom-quantity-container button:hover {
  background-color: #218838; /* Darker green on hover */
}

/* Button Row Styling */
.button-row {
  display: flex;
  justify-content: center;
  gap: 15px; /* Space between buttons */
  margin: 15px 0;
}

.button-row:last-child {
  margin-top: 20px; /* Add extra space above the "Betal" button */
}

.button-row button {
  flex: 1; /* Make buttons take equal space */
  max-width: 200px; /* Optional: Limit button width */
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Specific Button Colors */
#delete-order {
  background-color: #dc3545; /* Red for delete */
  color: white;
}

#delete-order:hover {
  background-color: #c82333; /* Darker red on hover */
}

#back-to-products-review {
  background-color: #007bff; /* Blue background */
  color: white;
}

#back-to-products-review:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

#proceed-to-payment {
  background-color: #28a745; /* Green for payment */
  color: white;
}

#proceed-to-payment:hover {
  background-color: #218838; /* Darker green on hover */
}

/* Make the cost display very large */
.large-cost {
  font-size: 5rem; /* Adjust size as needed */
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

.large-box {
  font-size: 3rem; /* Adjust size as needed */
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

  /* Center and maximize the QR code on mobile devices */
#qr-code {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Take full width */
  max-width: 500px; /* Optional: Limit the maximum size */
  margin: 0 auto; /* Center horizontally */
}

#qr-code canvas {
  width: 100%; /* Make the QR code responsive */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure it doesn't overflow */
}

/* Ensure the button stays at the bottom of the screen */
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 80px;
  width: 95%; /* Make the button span the full width */
  padding: 15px; /* Add some padding for better touch experience */
  background-color: #007bff; /* Button background color */
  color: white; /* Button text color */
  font-size: 1.8rem; /* Adjust font size for readability */
  text-align: center;
  border: none; /* Remove default border */
  cursor: pointer; /* Show pointer cursor on hover */
  z-index: 1000; /* Ensure it stays above other elements */
  margin-bottom: 1em;
}

#go-to-review {
  background-color: rgb(168, 114, 250);
}

#logo-container {
  text-align: center;
}

#logo-container .logo {
  max-width: 230px;
  height: auto;
}