@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;900&display=swap");

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box !important;
  list-style: none;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  color-scheme: normal;
}

/* :root {
  --bulma-primary-h: 240deg;
  --bulma-primary-l: 64%;
  --bulma-info-h: 204deg;
  --bulma-info-s: 70%;
  --bulma-info-l: 53%;
  --bulma-success-h: 145deg;
  --bulma-success-s: 63%;
  --bulma-success-l: 42%;
  --bulma-warning-h: 48deg;
  --bulma-warning-s: 89%;
  --bulma-warning-l: 50%;
  --bulma-danger-h: 6deg;
  --bulma-danger-s: 78%;
  --bulma-danger-l: 57%;
  --bulma-scheme-h: 157;
  --bulma-scheme-s: 30%;
} */

:root {
  --bulma-primary-h: 240deg;
  --bulma-primary-l: 64%;
  --bulma-info-h: 204deg;
  --bulma-info-s: 70%;
  --bulma-info-l: 53%;
  --bulma-success-h: 123deg;
  --bulma-success-s: 41%;
  --bulma-success-l: 45%;
  --bulma-warning-h: 45deg;
  --bulma-danger-h: 4deg;
  --bulma-danger-s: 90%;
  --bulma-danger-l: 58%;
  --bulma-scheme-h: 157;
  --bulma-scheme-s: 30%;
}

.button.is-danger,
.button.is-warning,
.button.is-primary,
.button.is-info,
.button.is-success {
  color: #fff !important;
}

.tag.is-danger,
/* .tag.is-warning, */
.tag.is-primary,
.tag.is-info,
.tag.is-success {
  color: #fff !important;
}

/* scrollbar customincation  */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.screen-box {
  overflow: hidden !important;
  height: 100vh;
  width: 100vw;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(19px);
  -ms-transform: translateX(19px);
  transform: translateX(19px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

.height-fit-content {
  height: fit-content;
}

.height-fit-content-important {
  height: fit-content !important  ;
}

.div-min-height-70vh {
  height: 70vh;
}
.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.max-width-max-content {
  max-width: max-content;
}

.my-box {
  border-radius: 6px;
  padding: 1rem;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px,
    rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.field > .label {
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-left: 5px !important;
  margin-bottom: 3px !important;
  color: #555;
}

.accordion {
  /* background-color: #eee; */
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  font-weight: 600;
  transition: 0.4s;
  border-bottom: 1px solid #ccc;
  margin-top: 20px;
}

.accordion.active,
.accordion:hover {
  background-color: #ebebeb;
}

.accordion-panel {
  display: none;
  background-color: white;
  overflow: hidden;
  padding-top: 20px;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

.tag:has(.tag-qr-badge) {
  padding-right: 0px;
}

.tag.is-settled {
  background-color: #9b59b6;
  color: white;
}

.tag.is-placed {
  background-color: #3498db;
  color: white;
}

.tag.is-preparing {
  background-color: #e67e22;
  color: white;
}

.tag.is-cancelled {
  background-color: #e74c3c;
  color: white;
}

.tag.is-running {
  background-color: #1e8449;
  color: white;
}

.tag.is-food_ready {
  background-color: #2ecc71;
  color: white;
}

.tag.is-out_for_delivery {
  background-color: #f1c40f;
  color: white;
}

.tag.is-picked {
  background-color: #e74c3c;
  color: white;
}

.tag.is-served {
  background-color: #8e44ad;
  color: white;
}

.tag.is-pickup {
  background-color: #af7ac5;
  color: white;
}

.tag.is-delivery {
  background-color: #f39c12;
  color: white;
}

.tag.is-cash {
  background-color: #2ecc71; /* Green */
  color: white;
}

.tag.is-upi {
  background-color: #3498db; /* Blue */
  color: white;
}

.tag.is-debit_card {
  background-color: #9b59b6; /* Purple */
  color: white;
}

.tag.is-credit_card {
  background-color: #e74c3c; /* Red */
  color: white;
}

.tag.is-net_banking {
  background-color: #f1c40f; /* Yellow */
  color: white;
}

.tag.is-other {
  background-color: #95a5a6; /* Gray */
  color: white;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: white;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

input[type="checkbox"]:hover {
  border-color: #3b82f6;
}

input[type="checkbox"]:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.875rem;
  font-weight: bold;
}