/* Custom styles goes here */
.food-card {
  width: 100%;
  aspect-ratio: 1 / 1; /* Maintains square shape */
  border-radius: 12px;
  overflow: hidden; /* allow text outside image */
  border: 2px solid transparent;
  cursor: pointer;
  background-color: #f8f9fa; /* Optional: helps frame images with transparency */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

  .food-card.selected {
    border-color: #198754;
    box-shadow: 0 0 10px rgba(25, 135, 84, 0.5);
  }

.food-img {
  /*width: 100%;*/
  height: 100%;
  object-fit: contain; /* Shows full image without cropping */
  display: block;
}

.food-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 10; /* Make sure it’s above the image */
}

/* BELOW IS FOR THE CASH REGISTER POS*/

.calculator .btn {
  font-size: 1.5rem;
  padding: 10px 0;
  height: 65px; /* makes them tall */
  width: 100%; /* fills column width */
  text-align: center;
  border-color: #fff;
}

.display {
  font-size: 2rem;
  height: 70px;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  padding: 10px;
  text-align: right;
  border-radius: .25rem;
}

.circle-checkred {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #ff0000; /* Bright red */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  animation: pop 0.4s ease-out;
}

.circle-checkred i {
  font-size: 60px;
  color: white;
}


.circle-check {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #28a745;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  animation: pop 0.4s ease-out;
}

  .circle-check i {
    font-size: 60px;
    color: white;
  }

@keyframes pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.phone-input {
  font-size: 2.0rem;
  letter-spacing: 2px;
}

#modalmodifierselect {
  height: 3.5rem; /* Increases overall height */
  font-size: 1.99rem; /* Keeps font large */
  padding: 0.5rem 1rem; /* Adjusts internal spacing */
}



.dark-style body {
  background-color: black !important;
  color: #00aaff !important; /* optional text color */
}

.dark-style .layout-wide {
  background-color: black !important;
}

.dark-style .customizer-hide {
  background-color: black !important;
}

.dark-style .container {
  background-color: black !important;
}

.dark-style .container-fluid {
  background-color: black !important;
}

.dark-style .bg-lightest {
  background-color: black !important;
}

.dark-style .card {
  background-color: black !important;
  box-shadow: 0 0 0.75rem rgba(0, 114, 181, 0.5) !important; /* Blue shadow */
  border: none !important; /* Optional: remove border for a cleaner look */
}

.dark-style .d-flex {
  background-color: black !important;
}

.dark-style .food-card.selected {
  border-color: #0072b5;
  box-shadow: 0 0 10px rgba(25, 135, 84, 0.5);
}

.dark-style .form-control {
  display: block;
  width: 100%;
  padding: 0.8555rem 1rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.375;
  color: #d5d1ea;
  appearance: none;
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid #0072b5;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

  /* Dark theme input focus styles */
  .dark-style .form-control:focus {
    border-color: #0072b5 !important; /* Blue border on focus */
    box-shadow: 0 1px 0 0 #00aaff !important; /* Optional: underline effect */
    outline: none !important;
  }

/* Override border and label color when focused in dark mode */
.dark-style .form-floating-outline .form-control:focus {
  border-color: #0072b5 !important;
  box-shadow: 0 1px 0 0 #00aaff !important;
}

/* Override the floating label color on focus */
.dark-style .form-floating-outline .form-control:focus ~ label {
  color: #0072b5 !important;
}

.dark-style .input-group {
  border-color: #0072b5 !important;
}

/* Button inside input group, in dark mode */
.dark-style .input-group .btn {
  border-color: #0072b5 !important; /* Matching border */
  color: #ffffff !important; /* White text */
}

/* Optional: button hover in dark mode */
.dark-style .input-group .btn:hover {
  border-color: #0072b5 !important;
  background-color: #000000;
  color: #ffffff !important;
}

.dark-style .form-control:focus,
.dark-style .input-group:focus-within .form-control {
  border-color: #0072b5 !important;
  
}

.dark-style .btn.btn-outline-secondary {
  color: #ffffff !important;
  border-color: #0072b5 !important;
  background-color: transparent !important;
}


/* Prevent purple on hover/focus/active */
.dark-style .btn.btn-outline-secondary:hover,
.dark-style .btn.btn-outline-secondary:focus,
.dark-style .btn.btn-outline-secondary:active {
  color: #fff !important;
  background-color: #0072b5 !important;
  border-color: #0072b5 !important;
  box-shadow: none !important;
}

/* Force active state to be blue for both secondary and outline-secondary */
.dark-style .btn.btn-secondary.active,
.dark-style .btn.btn-outline-secondary.active {
  background-color: #0072b5 !important;
  border-color: #0072b5 !important;
  color: #fff !important;
  box-shadow: none !important;
}


/* UNCHECKED: Black background */
.dark-style .switch-input + .switch-toggle-slider {
  background-color: #000 !important;
  border-color: #444 !important; /* Optional: subtle border */
}

/* CHECKED: Blue background */
.dark-style .switch-input:checked + .switch-toggle-slider {
  background-color: #0072b5 !important;
  border-color: #0072b5 !important;
}

/* Focus: Blue glow */
.dark-style .switch-input:focus + .switch-toggle-slider {
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 181, 0.3) !important;
}

/* For dark mode only */
.dark-style .btn.btn-info {
  background-color: #0072b5 !important;
  border-color: #0072b5 !important;
  color: #fff !important;
}

/* Optional: hover/focus/active */
.dark-style .btn.btn-info:hover,
.dark-style .btn.btn-info:focus,
.dark-style .btn.btn-info:active {
  background-color: #005c99 !important; /* slightly darker on hover */
  border-color: #005c99 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Dropdown menu background and border */
.dark-style .dropdown-menu {
  background-color: #000 !important;
  border-color: #0072b5 !important;
}

/* Dropdown items (normal state) */
.dark-style .dropdown-menu .dropdown-item {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Dropdown items on hover or focus */
.dark-style .dropdown-menu .dropdown-item:hover,
.dark-style .dropdown-menu .dropdown-item:focus,
.dark-style .dropdown-menu .dropdown-item.active {
  background-color: #0072b5 !important;
  color: #ffffff !important;
}

/* Dropdown menu background and border */
.dark-style .modal-content {
  background-color: #000 !important;
}

/* Default button text color (not hovered, not active) */
.dark-style .btn-outline-primary {
  color: #ffffff !important; /* white text */
  border-color: #0072b5 !important; /* keep border blue */
  background-color: transparent !important;
}

/* Hover, focus, active, and .active states */
.dark-style .btn-outline-primary:hover,
.dark-style .btn-outline-primary:focus,
.dark-style .btn-outline-primary:active,
.dark-style .btn-outline-primary.active {
  background-color: #0072b5 !important;
  border-color: #0072b5 !important;
  color: #ffffff !important; /* white text */
  box-shadow: none !important;
}

.dark-style .menu-inner {
  background-color: #000 !important;
}

.dark-style .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(270deg, #0072B5 0%, #00488C 100%);
  color: #fff !important; /* Ensures text is readable on dark blue */
}

.dark-style .menu .app-brand.demo {
  background-color: #000 !important;
}

.dark-style .badge.bg-primary {
  background-color: #0072B5 !important; /* Your custom blue */
  color: #fff !important; /* Ensure text is readable */
}

.dark-style .bg-navbar-theme {
    background-color: #000000 !important; /* Black background */
    box-shadow: 0 4px 12px rgba(0, 114, 181, 0.4); /* Blue shadow */
    color: #fff;
}

/* 🔹 Base input style */
.dark-style .bg-navbar-theme input[type="text"],
.dark-style .bg-navbar-theme input[type="search"],
.dark-style .bg-navbar-theme input[type="search"]:focus,
.dark-style .bg-navbar-theme input[type="text"]:focus {
  background-color: #000000 !important; /* Black background */
  color: #ffffff !important; /* White text */
  border: 1px solid #0072B5; /* Optional: subtle blue border */
  box-shadow: 0 4px 12px rgba(0, 114, 181, 0.4); /* Blue shadow */
  outline: none;
}

/* 🔹 WebKit autofill (Chrome, Safari, Edge) */
.dark-style .bg-navbar-theme input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #000000 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* 🔹 Firefox autofill */
.dark-style .bg-navbar-theme input:-moz-autofill {
  box-shadow: 0 0 0 1000px #000000 inset !important;
  color: #ffffff !important;
}

.dark-style .bg-navbar-theme .dropdown-menu {
  background-color: #0072B5 !important;
  color: #ffffff !important;
  border: none;
}

.dark-style .bg-navbar-theme .dropdown-item {
  background-color: transparent;
  color: #ffffff !important;
}

.dark-style .bg-navbar-theme .dropdown-item:hover,
.dark-style .bg-navbar-theme .dropdown-item:focus {
  background-color: #005a91 !important; /* darker blue on hover */
  color: #ffffff !important;
}

.dark-style .btn.btn-primary {
  background-color: #00488C !important;
  border-color: #00488C !important;
  color: #ffffff !important;
}

.dark-style .btn.btn-primary:hover,
.dark-style .btn.btn-primary:focus {
  background-color: #0072B5 !important;
  border-color: #0072B5 !important;
  color: #ffffff !important;
}

.dark-style .bg-menu-theme .menu-inner-shadow {
  background: linear-gradient( #00488C 5%, /* Deep blue at the top */
  rgba(0, 72, 140, 0.75) 45%, /* Mid blue with opacity */
  rgba(0, 114, 181, 0.2) 80%, /* Lighter blue with opacity */
  transparent ) !important;
}

/* Always blue border in dark mode */
.dark-style .form-select {
  border: 1px solid #0072B5;
}

/* On focus, enhance the effect */
.dark-style .form-select:focus {
  border: 1px solid #0072B5; /* Blue border */
  box-shadow: 0 4px 12px rgba(0, 114, 181, 0.4); /* Blue glow */
  outline: 0;
}

.dark-style .form-select:focus {
  border: 1px solid #0072B5 !important; /* Blue border */
  box-shadow: 0 0 0 0.25rem rgba(0, 114, 181, 0.25) !important; /* Blue glow */
  outline: none !important;
}



.dark-style html:not([dir=rtl]) .border-end {
  border-right: 1px solid #0072B5 !important; /* your blue */
}

.dark-style .label-dark {
  background-color: #000;
  color: #fff;
  padding: 0 0.25rem;
}

.dark-style .form-check-input:checked {
  background-color: #0072B5;
  border-color: #0072B5;
}

.dark-style .toast {
  background-color: #ffffff;
  color: #000000;
  --bs-toast-header-bg: #000000;
}

.dark-style .bg-label-success {
  background-color: #343a45 !important;
  color: #0072B5 !important;
}

.dark-style .blinking {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}