/*
  Copyright (c) [2024] [Ariff Azman]
  This code is proprietary and confidential.
  Unauthorized use, reproduction, or distribution of this code, including the use of any part of it for commercial purposes, is strictly prohibited.
  For permissions or inquiries, please contact [ariff.azman@pm.me].
*/

/* Define CSS variables for light and dark modes */
:root {
  --background-color-dark: #222;
  --background-color-light: #e6e6e6;
  --container-background-dark: #333;
  --container-background-image-dark: linear-gradient(to bottom left, #363431, #111111);
  --container-background-light: #f8f0e3;
  --container-background-image-light: linear-gradient(to bottom left, #f8f0e3, #fff);
  --text-color-dark: #ddd;
  --text-color-light: #000;
  --button-bg-dark: #28a745;
  --button-bg-light: #28a745;
  --burger-detail-border-dark: #ddd;
  --burger-detail-border-light: #000;
  --checkbox-checkmark-dark: #fff;
  --checkbox-checkmark-light: #808080;
  --checkbox-checked-dark: #28a745;
  --checkbox-checked-light: #28a745;
  --checkbox-disabled-dark: #a72833;
  --checkbox-disabled-light: #a72828;
  --button-hover-bg-dark: #218838;
  --button-hover-bg-light: #218838;
  --scrollbar-thumb-dark: #888;
  --scrollbar-thumb-light: #888;
  --scrollbar-track-dark: #f1f1f1;
  --scrollbar-track-light: #f1f1f1;
}

/* Base styling for both themes */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--background-color-dark);
  color: var(--text-color-dark);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
  background-color: var(--container-background-dark);
  background-image: var(--container-background-image-dark);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  max-width: 600px;
  width: 100%;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
  font-size: 14px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.inline-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.inline-group label {
  display: inline-block;
  flex: 0 0 auto;
  margin-right: 5px;
  margin-bottom: 0;
}

.inline-group input[type="text"] {
  display: inline-block;
  width: 22%;
  margin-right: 10px;
  margin-bottom: 0;
}

.form-group select,
.form-group input[type="number"],
.form-group input[type="checkbox"] {
  margin-top: 10px;
  margin-right: 10px;
}

.quantity-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.quantity-controls button {
  width: 30px;
  height: 30px;
  font-size: 20px;
  text-align: center;
  line-height: 0;
  background-color: var(--button-bg-dark);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.quantity-controls button:disabled {
  background-color: #444;
  cursor: not-allowed;
}

.quantity-controls span {
  margin: 0 10px;
  font-size: 16px;
}

input[type="checkbox"] {
  transform: scale(1.25);
}

.checkbox-group label {
  display: inline-block;
}

/* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  padding: 0 20px;
  margin: 15px 0;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: var(--checkbox-checkmark-dark);
}

.checkbox-container:hover input ~ .checkmark {
  background-color: #999999;
}

.checkbox-container input:disabled ~ .checkmark {
  background-color: var(--checkbox-disabled-dark);
}

.checkbox-container input:checked ~ .checkmark {
  background-color: var(--checkbox-checked-dark);
}

/* Ensure the container can scroll */
#burger-details {
  max-height: 500px;
  overflow-y: auto; /* Enable vertical scrolling */
  padding: 10px;
}

/* Styling for better visibility */
.burger-details {
  font-size: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--burger-detail-border-dark);
  padding: 10px;
  border-radius: 5px;
}

/* WebKit browsers (Chrome, Safari) */
#burger-details::-webkit-scrollbar {
  width: 12px;
}

#burger-details::-webkit-scrollbar-track {
  background: var(--scrollbar-track-dark);
  border-radius: 10px;
}

#burger-details::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-dark);
  border-radius: 10px;
}

#burger-details::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.button-group {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.button-group button {
  width: 48%;
  padding: 10px;
  background-color: var(--button-bg-dark);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.button-group button:hover {
  background-color: var(--button-hover-bg-dark);
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.button-container button {
  flex-grow: 1;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

.button-container button:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

.button-container button:not(:disabled):hover {
  background-color: var(--button-hover-bg-dark);
}

.label-button-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.remove-button {
  background: none;
  border: none;
  color: red;
  font-size: 14px;
  cursor: pointer;
  margin-left: 10px;
}

.remove-button:hover {
  color: darkred;
}

.form-group select {
  font-size: 14px;
  padding: 10px;
}

.total-price {
  text-align: right;
  font-size: 24px;
  font-weight: bold;
  color: var(--text-color-dark);
  padding: 10px 20px;
}

.delivery-price {
  text-align: right;
  font-size: 18px;
  color: #999999;
  padding: 10px 20px;
}

.highlight {
  font-weight: bold;
  font-size: 20px;
}

.submit-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(18, 148, 87);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  display: none;
}

.error-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(148, 18, 46);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  display: none;
}

* {
  box-sizing: border-box;
}

/* Slideshow container */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.slides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.numbertext {
  text-align: right;
  font-size: 10px;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
}

.modal-content {
  margin: auto;
  display: inline-block;
  background-color: var(--container-background-dark);
  padding: 10px;
  border-radius: 10px;
  position: relative;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: var(--text-color-dark);
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
}

#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--background-color-dark);
  z-index: 9999;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s ease infinite;
}

.modal-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s ease infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#invalid-reason {
  color: red;
  font-size: small;
  font-style: italic;
  text-align: right;
}

/* Light Mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: var(--background-color-light);
    color: var(--text-color-light);
  }

  .container {
    background-color: var(--container-background-light);
    background-image: var(--container-background-image-light);
  }

  .form-group input[type="submit"] {
    background-color: var(--button-bg-light);
  }

  .form-group input[type="submit"]:hover {
    background-color: var(--button-hover-bg-light);
  }

  .quantityControls button {
    background-color: var(--button-bg-light);
  }

  .burger-details {
    border: 1px solid var(--burger-detail-border-light);
  }

  .button-group button {
    background-color: var(--button-bg-light);
  }

  .button-group button:hover {
    background-color: var(--button-hover-bg-light);
  }

  .total-price {
    color: var(--text-color-light);
  }

  .checkmark {
    background-color: var(--checkbox-checkmark-light);
  }

  .checkbox-container input:disabled ~ .checkmark {
    background-color: var(--checkbox-disabled-light);
  }

  .checkbox-container input:checked ~ .checkmark {
    background-color: var(--checkbox-checked-light);
  }

  #burger-details::-webkit-scrollbar-track {
    background: var(--scrollbar-track-light);
  }

  #burger-details::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-light);
  }

  .modal-content {
    background-color: var(--container-background-light);
  }

  .close {
    color: var(--text-color-light);
  }

  #loading {
    background-color: var(--background-color-light);
  }
}