:root {
  --breakpoint-0: 576px;
  --breakpoint-1: 768px;
  --breakpoint-2: 992px;
  --breakpoint-3: 1200px;
  --fontsize-0: 12px;
  --fontsize-1: 14px;
  --fontsize-2: 18px;
  --fontsize-3: 20px;
  --fontsize-4: 24px;
  --fontsize-5: 32px;
  --fontsize-6: 48px;
  --fontsize-7: 64px;
  --color-primary-0: #62aae9;
  --color-primary-1: #428bca;
  --color-primary-2: #1e70b7;
  --color-secondary-0: #fb9678;
  --color-secondary-1: #f7766c;
  --color-secondary-2: #ff2020;
  --color-accent-0: #721d81;
  --color-accent-1: #9c27b0;
  --color-accent-2: #5a1564;
  --color-success-0: #7cc47f;
  --color-success-1: #4caf50;
  --color-success-2: #38803b;
  --color-warning-0: #ffb445;
  --color-warning-1: #ff9800;
  --color-warning-2: #ba6f00;
  --color-error-0: #f7766c;
  --color-error-1: #f44336;
  --color-error-2: #b23128;
  --color-light-0: #fff;
  --color-light-1: #edf1f5;
  --color-light-2: #ddd;
  --color-light-3: #b8b8b8;
  --color-dark-0: #8c8c8c;
  --color-dark-1: #666;
  --color-dark-2: #4f5467;
  --color-dark-3: #000;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 5px;
  --space-3: 16px;
  --space-4: 32px;
  --space-5: 64px;
  --space-6: 128px;
  --space-7: 256px;
  --content-width: 1180px;
  --sidebar-width: 220px;
  --navbar-height: 60px;
  --input-height: 38px;
}
* {
  box-sizing: border-box;
}
*:focus {
  outline: none;
}
html,
body,
#root {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--color-light-1);
  color: var(--color-dark-2);
  font-family: "Noto Sans TC", Helvetica, "LiHei Pro", "微軟正黑體", sans-serif;
}
#root {
  padding: 0 var(--space-4);
}
button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  color: var(--color-dark-1);
  background-color: transparent;
  border: none;
  font-size: var(--fontsize-2);
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}
button:disabled {
  cursor: not-allowed;
}
button .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fontsize-4);
  line-height: 1;
}
button .icon-right {
  margin-left: auto;
}
button.primary {
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-primary-1);
  color: var(--color-light-0);
  border-radius: 5px;
}
button.primary:hover {
  background-color: var(--color-primary-0);
}
button.link {
  color: var(--color-primary-1);
}
button.link:hover {
  color: var(--color-primary-2);
}
a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-dark-1);
  background-color: transparent;
  border: none;
  font-size: var(--fontsize-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
}
a.disabled {
  color: var(--color-light-3);
  cursor: not-allowed;
}
a.primary {
  color: var(--color-primary-1);
}
a.primary:hover {
  color: var(--color-primary-2);
}
a .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fontsize-4);
  line-height: 1;
}
a .icon-right {
  margin-left: auto;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) calc(var(--space-1) + var(--space-2));
  gap: var(--space-2);
  background-color: var(--color-light-0);
  color: var(--color-dark-1);
  border: 1px solid var(--color-light-2);
  border-radius: 15px;
  text-align: center;
  white-space: nowrap;
}
.chip .text {
  flex: 1;
  line-height: 1;
}
.chip .action {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chip .action.left {
  margin-left: -var(--space-2);
}
.chip .action.right {
  margin-right: -var(--space-2);
}
.chip .indicator {
  display: inline-block;
  height: 0.8em;
  width: 0.8em;
  margin-right: var(--space-2);
  border-radius: 50%;
}
.empty-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: var(--space-6);
  color: var(--color-dark-0);
}
.empty-placeholder svg {
  font-size: var(--fontsize-5);
}
.dialog-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background-color: var(--color-dark-3);
  transform: scale(0);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.dialog-overlay.open {
  transform: scale(1);
  opacity: 0.5;
}
.dialog-overlay.open + .dialog {
  transform: translateY(0vh);
  opacity: 1;
}
.dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2001;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(110vh);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.dialog .dialog__container {
  min-width: 300px;
  background-color: var(--color-light-0);
  border-radius: 5px;
}
.dialog .dialog__container .dialog__header {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  height: var(--navbar-height);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: var(--color-dark-2);
  color: var(--color-light-0);
  font-size: var(--fontsize-3);
}
.dialog .dialog__container .dialog__header .dialog__header__icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog .dialog__container .dialog__header .dialog__header__title {
  margin: 0;
  font-size: var(--fontsize-3);
  font-weight: normal;
}
.dialog .dialog__container .dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 100px;
  max-height: calc(100vh - 2 * var(--navbar-height));
  height: calc(100% - 2 * var(--navbar-height));
  padding: var(--space-3);
  overflow-y: auto;
}
.dialog .dialog__container .dialog__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--navbar-height);
  border-top: 1px solid var(--color-light-3);
}
.dialog .dialog__container .dialog__footer button {
  border-radius: 0;
}
.dialog .dialog__container .dialog__footer .cancel,
.dialog .dialog__container .dialog__footer .confirm {
  flex: 1;
  height: 100%;
}
.dialog .dialog__container .dialog__footer .cancel {
  border-right: 1px solid var(--color-light-2);
}
@media screen and (max-width: 480px) {
  .dialog__container {
    width: 100%;
  }
}
.drawer-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-dark-3);
  transform: scale(0);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.drawer-overlay.open {
  transform: scale(1);
  opacity: 0.5;
}
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.drawer .drawer__container {
  height: 100%;
  background-color: var(--color-light-0);
}
.drawer .drawer__container .drawer__header {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3);
  height: var(--navbar-height);
  margin: 0;
  padding: var(--space-3);
  background-color: var(--color-dark-2);
  color: var(--color-light-0);
  font-size: var(--fontsize-3);
}
.drawer .drawer__container .drawer__header .icon {
  color: var(--color-light-0);
  margin-left: auto;
}
.drawer .drawer__container .drawer__header .title {
  margin: 0;
  font-size: var(--fontsize-3);
  font-weight: normal;
}
.drawer .drawer__container .drawer__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  overflow-y: auto;
}
.drawer .drawer__container .drawer__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--navbar-height);
  border-top: 1px solid var(--color-light-3);
}
.drawer .drawer__container .drawer__footer .cancel,
.drawer .drawer__container .drawer__footer .confirm {
  flex: 1;
  height: 100%;
}
.drawer .drawer__container .drawer__footer .cancel {
  border-right: 1px solid var(--color-light-2);
}
@media screen and (max-width: 480px) {
  .drawer .container {
    width: 100%;
  }
}
.address {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.address > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.address > div .elevator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}
@media screen and (max-width: 480px) {
  .street-wrap {
    flex-direction: column;
  }
  .street-wrap .elevator {
    width: 100%;
    justify-content: space-between;
  }
}
.notification {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 10000;
  width: 30%;
  margin-left: -15%;
  margin-top: var(--space-3);
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-3);
}
.notification .item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-3);
  background-color: var(--color-light-0);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.125);
  animation: slide 0.2s linear;
}
.notification .item.error {
  color: var(--color-error-1);
  border: 5px solid var(--color-error-1);
}
.notification .item.error .close {
  color: var(--color-error-1);
}
.notification .item.error .close:hover {
  color: var(--color-error-0);
}
.notification .item.success {
  color: var(--color-success-1);
  border: 5px solid var(--color-success-1);
}
.notification .item.success .close {
  color: var(--color-success-1);
}
.notification .item.success .close:hover {
  color: var(--color-success-0);
}
.notification .item.warning {
  color: var(--color-warning-1);
  border: 5px solid var(--color-warning-1);
}
.notification .item.warning .close {
  color: var(--color-warning-1);
}
.notification .item.warning .close:hover {
  color: var(--color-warning-0);
}
.notification .item .message {
  flex: 1;
  flex-wrap: wrap;
}
.notification .item .close {
  padding: var(--space-1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
@keyframes slide {
  from {
    transform: translate(0, -32px);
    opacity: 0;
  }
  to {
    transform: translate(0);
    opacity: 1;
  }
}
@media screen and (max-width: 576px) {
  .notification {
    width: 80%;
    margin-left: -40%;
  }
}
.loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  height: 4px;
  width: 100%;
  transition: visibility 0s linear 500ms, opacity 500ms;
}
.loader .bar {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgba(200, 200, 200, 0.4);
  overflow: hidden;
}
.loader .progress {
  position: absolute;
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: var(--color-accent-1);
  animation: loading 2s linear infinite;
}
@keyframes loading {
  from {
    left: -200px;
    width: 30%;
  }
  50% {
    width: 30%;
  }
  70% {
    width: 70%;
  }
  80% {
    left: 50%;
  }
  95% {
    left: 120%;
  }
  to {
    left: 100%;
  }
}
.grid {
  display: grid;
  width: 100%;
}
.section-title {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--color-dark-1);
  font-weight: normal;
}
.section-subtitle {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-dark-1);
  font-weight: normal;
}
.section {
  display: flex;
  flex-direction: column;
  margin-top: var(--marginTop);
  margin-bottom: var(--marginBottom);
  margin-left: var(--marginLeft);
  margin-right: var(--marginRight);
  gap: var(--space-3);
  background-color: var(--color-light-0);
  border: 1px solid var(--color-light-2);
  border-radius: 5px;
}
.tooltip {
  position: relative;
  width: 100%;
}
.tooltip .tooltip__text {
  position: absolute;
  bottom: 125%;
  left: 50%;
  z-index: 1;
  width: 300px;
  padding: 5px 0;
  margin-left: -60px;
  background-color: #555;
  color: #fff;
  border-radius: 6px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .tooltip__text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltip__text {
  visibility: visible;
  opacity: 1;
}
.page-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-3);
  gap: var(--space-3);
}
.page-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  background-color: var(--color-light-1);
}
.page-container a {
  padding: var(--space-3);
  border: 5px solid var(--color-primary-1);
  border-radius: 10px;
  background-color: var(--color-light-0);
  font-size: var(--fontsize-5);
}
.page-container a.disabled {
  border-color: var(--color-light-3);
  color: var(--color-light-3);
}
.page-container a .icon {
  font-size: var(--fontsize-6);
}
.content {
  display: flex;
  flex-direction: column;
  margin-top: var(--marginTop);
  margin-bottom: var(--marginBottom);
  margin-left: var(--marginLeft);
  margin-right: var(--marginRight);
  gap: var(--space-3);
  background-color: var(--color-light-0);
  border: 1px solid var(--color-light-2);
  border-radius: 5px;
}
.toolbar {
  margin: var(--space-4) 0;
}
.toolbar h1,
.toolbar h2 {
  margin: 0;
}
.toolbar .toolbar__action {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-3) 0;
}
.toolbar .toolbar__action button.primary {
  padding: var(--space-2) var(--space-3);
  padding-left: calc(var(--space-2) + var(--space-1));
  font-size: var(--fontsize-1);
}
.footer {
  height: var(--navbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  margin: var(--space-5) 0 var(--space-3);
  overflow: hidden;
  background-color: var(--color-light-0);
  border-radius: 5px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
}
.footer > a,
.footer > button {
  border-left: 1px solid var(--color-light-0);
}
.footer .back {
  border-left: 0;
}
.footer .home,
.footer .back,
.footer .next {
  flex: 1;
  height: 100%;
}
.footer .next {
  background-color: var(--color-primary-1);
  color: var(--color-light-0);
}
.footer .next:hover {
  color: var(--color-light-0);
  background-color: var(--color-primary-0);
}
.footer .next:disabled {
  color: var(--color-dark-0);
  background-color: var(--color-light-2);
}
.login-container {
  width: 60%;
  max-width: 450px;
  margin: 0 auto;
}
.login {
  padding: var(--space-3);
}
.product-detail {
  padding: var(--space-3);
}
.product-list {
  margin-top: var(--space-3);
  padding: var(--space-3) 0;
  gap: 0;
}
.product-list .item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  line-height: 1;
}
.product-list .item:nth-child(even) {
  background-color: var(--color-light-1);
}
.product-list .item h1 {
  padding: 0 var(--space-3);
  margin: 0;
  margin-right: auto;
  font-weight: normal;
  font-size: var(--fontsize-3);
}
.product-list .item .option {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--color-dark-0);
}
.product-list .item .option span {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: var(--space-2) var(--space-3);
  border-left: 1px solid var(--color-light-2);
}
.product-list .item .option span:first-child {
  border-left: none;
}
.product-list .item .quantity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-width: var(--space-6);
  padding: var(--space-3);
  border-left: 1px solid var(--color-light-3);
}
.product-list .item .quantity .label {
  font-size: var(--fontsize-0);
  color: var(--color-dark-0);
}
.product-list .item .quantity .value {
  font-size: var(--fontsize-4);
  font-weight: bold;
  color: var(--color-accent-1);
}
.product-list .item .action {
  padding: var(--space-3);
  border-left: 1px solid var(--color-light-3);
}
.customer-detail {
  padding: var(--space-3);
}
.signature {
  color: var(--color-dark-1);
}
.signature .content {
  position: relative;
  padding: var(--space-3);
}
.signature ol {
  padding-left: var(--space-3);
}
.signature li {
  padding: var(--space-1) 0;
  color: var(--color-dark-1);
}
.signature table {
  border: 1px solid var(--color-light-3);
  border-collapse: collapse;
  color: var(--color-dark-1);
}
.signature th {
  padding: var(--space-2);
  border: 1px solid var(--color-light-2);
  font-weight: normal;
}
.signature td {
  padding: var(--space-2);
  border: 1px solid var(--color-light-2);
}
.signature canvas {
  width: 100%;
  height: 500px;
}
.signature .clear {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: var(--space-2);
  border: 6px solid var(--color-dark-0);
  border-radius: 50%;
}
.order-qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-6);
}
@media screen and (max-width: 480px) {
  :root {
    --navbar-height: 56px;
    --content-width: 100%;
  }
  #root {
    padding: 0 var(--space-3);
  }
  .login-container {
    width: 100%;
  }
}