/* ===== Màu, chữ, kích thước dùng chung ===== */
:root {
  --color-backdrop: #e6eee8;
  --color-surface: #ffffff;
  --color-plate: #f1f4f1;
  --color-ink: #1d2620;
  --color-ink-soft: #66726a;
  --color-herb: #2e7d4f;
  --color-herb-dark: #276b44;
  --color-herb-tint: #eaf3ed;
  --color-lantern: #ffb000;
  --color-chili: #d33a26;
  --color-line: rgba(29, 38, 32, 0.08);

  --font-body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-photo: 1.25rem;
  --app-max-width: 440px; /* bề ngang iPhone Pro Max khi cầm dọc */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Thuộc tính hidden luôn thắng, kể cả khi lớp CSS đã đặt display */
[hidden] {
  display: none !important;
}

/* Phần tử chỉ nhận tiêu điểm bằng mã (để trình đọc màn hình đọc trang mới), không cần viền */
[tabindex="-1"]:focus {
  outline: none;
}

html {
  /* Cỡ chữ gốc tăng đều từ 14px (màn 320px như iPhone 3) tới 16px (màn 440px như iPhone Pro Max).
     Mọi kích thước bên dưới tính bằng rem nên co giãn theo màn hình. */
  font-size: clamp(14px, calc(14px + (100vw - 320px) / 60), 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; /* để .app tự canh giữa bằng margin: auto */
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--app-max-width);
  min-height: 100vh;
  min-height: 100dvh;
  margin: auto; /* luôn nằm giữa màn hình theo chiều ngang */
  background: var(--color-surface);
}

/* Trang đang hiện kéo dài hết chiều cao khung, để thanh nút của trang con nằm sát đáy */
.app > * {
  flex: 1 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== Thanh tiêu đề ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(29, 38, 32, 0.06);
}

.topbar--start {
  justify-content: flex-start;
  gap: 0.25rem;
}

.topbar__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.topbar--start .topbar__title {
  font-size: 1.125rem;
}

/* Tiêu đề, bên dưới là tên bàn lấy theo mã bàn trong link */
.topbar__heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar__table {
  margin: 0;
  color: var(--color-herb);
  font-size: 0.8125rem;
  font-weight: 600;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.icon-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
}

.icon-button:focus-visible {
  outline: 3px solid var(--color-herb);
  outline-offset: 2px;
}

/* Nút viền nhỏ, dùng cho "Món đã chọn" và các nút trên trang Admin (kể cả thẻ a, label) */
.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1.5px solid var(--color-herb);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-herb);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pill-button:focus-visible {
  outline: 3px solid var(--color-herb);
  outline-offset: 2px;
}

/* ===== Nút giỏ hàng: tối khi trống, sáng lên khi có món ===== */
.cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-plate);
  color: var(--color-ink-soft);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.cart:focus-visible {
  outline: 3px solid var(--color-herb);
  outline-offset: 3px;
}

.cart__icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart.is-filled {
  background: var(--color-lantern);
  color: var(--color-ink);
  box-shadow:
    0 0 0 0.25rem rgba(255, 176, 0, 0.2),
    0 0.375rem 1.25rem rgba(255, 176, 0, 0.5);
}

/* Chạy lại mỗi lần thêm món: giỏ phồng lên và rực sáng rồi dịu lại */
.cart.is-bumping {
  animation: cart-bump 0.5s ease-out;
}

@keyframes cart-bump {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.18);
    box-shadow:
      0 0 0 0.5rem rgba(255, 176, 0, 0.25),
      0 0 2rem 0.25rem rgba(255, 176, 0, 0.7);
  }
  100% {
    transform: scale(1);
  }
}

.cart__count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 999px;
  background: var(--color-chili);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.25rem;
  text-align: center;
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* Chữ "+N" bay lên cạnh giỏ; script.js gỡ nó khi hiệu ứng kết thúc */
.cart__plus {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + 0.375rem);
  display: flex;
  align-items: center;
  color: var(--color-chili);
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  animation: plus-one 0.9s ease-out forwards;
}

@keyframes plus-one {
  0% {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-1.25rem) scale(1);
  }
}

/* ===== Danh sách món ===== */
.menu {
  padding: 0.25rem 1rem 1.5rem;
}

.menu__hint {
  margin: 0.5rem 0 1rem;
  color: var(--color-ink-soft);
  font-size: 0.875rem;
}

.menu__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* mỗi món chiếm 2 cột nên một hàng có 2 món */
  gap: 1.25rem 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item {
  grid-column: span 2;
}

/* Món lẻ cuối cùng nằm giữa hàng thay vì lệch sang trái */
.menu__item:last-child:nth-child(odd) {
  grid-column: 2 / span 2;
}

.dish {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-photo);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dish:focus-visible {
  outline: 3px solid var(--color-herb);
  outline-offset: 4px;
}

.dish__photo {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--color-plate);
}

.dish__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dish__add {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(29, 38, 32, 0.2);
  fill: none;
  stroke: var(--color-herb);
  stroke-width: 3;
  stroke-linecap: round;
}

.dish__name {
  margin-top: 0.625rem;
  font-size: 1rem;
  font-weight: 600;
}

/* Giá nằm ngay bên dưới món */
.dish__price {
  margin-top: 0.125rem;
  color: var(--color-herb);
  font-size: 1rem;
  font-weight: 800;
}

/* ===== Màn chặn: link không có mã bàn đúng thì chỉ hiện lời nhắc quét mã QR ở bàn ===== */
.gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.gate__icon {
  width: 4.5rem;
  height: 4.5rem;
  padding: 1rem;
  border-radius: 1.25rem;
  background: var(--color-plate);
  fill: none;
  stroke: var(--color-herb);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.gate__title {
  margin: 0.75rem 0 0;
  font-size: 1.375rem;
  font-weight: 800;
}

.gate__text {
  max-width: 22rem;
  margin: 0;
  color: var(--color-ink-soft);
}

/* ===== Khung chung của trang con (chọn món, giỏ hàng, món đã chọn) ===== */
.subpage {
  display: flex;
  flex-direction: column;
  animation: screen-in 0.25s ease-out;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateX(1.5rem);
  }
}

.subpage__body {
  flex: 1;
  padding: 0.25rem 1rem 1.5rem;
}

/* Thanh nút dưới cùng, luôn dính đáy màn hình khi cuộn */
.subpage__bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-line);
}

.stepper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-plate);
}

.stepper__button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
}

.stepper__button .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.5;
}

.stepper__button:disabled {
  opacity: 0.35;
  cursor: default;
}

.stepper__button:focus-visible {
  outline: 3px solid var(--color-herb);
  outline-offset: 2px;
}

.stepper__value {
  min-width: 1.75rem;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

.order-button {
  flex: 1;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-herb);
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.order-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.order-button:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

/* Nút hai dòng: tên nút ở trên, tổng tiền ở dưới */
.order-button--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding-block: 0.625rem;
}

.order-button__note {
  font-size: 0.875rem;
  font-weight: 600;
}

/* ===== Trang chọn món ===== */
.confirm__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-photo);
  background: var(--color-plate);
}

.confirm__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0.75rem;
}

.confirm__name {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
}

.confirm__price {
  margin: 0;
  color: var(--color-herb);
  font-size: 1.125rem;
  font-weight: 800;
  white-space: nowrap;
}

.options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.options__legend {
  padding: 0;
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
}

.option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  border-bottom: 1px solid var(--color-line);
  cursor: pointer;
}

.option:last-child {
  border-bottom: 0;
}

.option__input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-herb);
  cursor: pointer;
}

.option__text {
  flex: 1;
}

/* Giá của phần thêm có tính tiền, ví dụ "+5.000 ₫" */
.option__price {
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Ô ghi chú thêm cho món, không bắt buộc */
.note-field {
  display: grid;
  gap: 0.375rem;
  margin-top: 1rem;
}

.note-field__label {
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
}

.note-field__input {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(29, 38, 32, 0.2);
  border-radius: 0.75rem;
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  font-size: max(16px, 1rem); /* chữ dưới 16px thì iPhone tự phóng to trang khi bấm vào ô */
  line-height: 1.4;
  resize: vertical;
}

.note-field__input:focus {
  border-color: var(--color-herb);
  outline: 2px solid var(--color-herb);
  outline-offset: 0;
}

/* ===== Dòng món: dùng chung cho giỏ hàng và trang món đã chọn ===== */
.dish-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dish-line {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-line);
}

.dish-line:last-child {
  border-bottom: 0;
}

.dish-line__image {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 0.875rem;
  object-fit: cover;
  background: var(--color-plate);
}

.dish-line__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.dish-line__name {
  margin: 0;
  font-weight: 600;
}

.dish-line__options {
  margin: 0.125rem 0 0;
  color: var(--color-ink-soft);
  font-size: 0.875rem;
}

/* Ghi chú khách nhập cho món; giữ nguyên chỗ xuống dòng khách gõ */
.dish-line__note {
  margin: 0.125rem 0 0;
  color: var(--color-ink);
  font-size: 0.875rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Món khách đã sửa (trang khách và các trang quản lý): nội dung trước gạch ngang chữ xám, nội dung sau nằm cạnh,
   chữ màu thường trên nền xanh nhạt */
.change-before {
  color: var(--color-ink-soft);
  font-weight: 400;
  text-decoration: line-through;
}

.change-after {
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  background: #d6f0dd;
  color: var(--color-ink);
  -webkit-box-decoration-break: clone; /* chữ dài xuống dòng thì dòng nào cũng đủ nền, đủ bo góc */
  box-decoration-break: clone;
}

/* Trang món đã chọn: món khách đã sửa, "Đã sửa lúc 16:55" */
.dish-line__edited {
  margin: 0.125rem 0 0;
  color: var(--color-ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
}

.dish-line__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Trang món đã chọn: nút "Sửa" của món bếp chưa "Hoàn thành", nằm dưới giá, canh phải */
.dish-line__edit {
  align-self: flex-end;
  margin-top: 0.375rem;
}

/* Đơn giá × số lượng, chỉ có ở trang món đã chọn */
.dish-line__unit {
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  white-space: nowrap;
}

.dish-line__total {
  color: var(--color-herb);
  font-weight: 800;
  white-space: nowrap;
}

.dish-line .stepper__button {
  width: 2.25rem;
  height: 2.25rem;
}

.dish-line .icon--trash {
  display: none;
}

/* Còn 1 phần: nút − đổi thành thùng rác, bấm là bỏ món khỏi giỏ */
.dish-line.is-single .icon--minus {
  display: none;
}

.dish-line.is-single .icon--trash {
  display: block;
}

.dish-line.is-single [data-action="decrease"] {
  color: var(--color-chili);
}

/* ===== Trang giỏ hàng: trạng thái trống và đã gửi đơn ===== */
.cart-empty,
.cart-done {
  padding: 3rem 1rem;
  text-align: center;
}

.cart-empty {
  margin: 0;
  color: var(--color-ink-soft);
}

.cart-done__icon {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.875rem;
  border-radius: 50%;
  background: var(--color-herb);
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-done__title {
  margin: 1rem 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 800;
}

.cart-done__total {
  margin: 0;
  color: var(--color-ink-soft);
}

.cart-notice {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  background: #fbeceb;
  color: #b42d1c; /* đỏ đậm hơn màu ớt để chữ trên nền hồng vẫn đủ tương phản */
  font-size: 0.9375rem;
  font-weight: 600;
}

.cart-done__button {
  margin-top: 1.25rem;
}

/* ===== Trang món đã chọn: phần "Chưa gửi quán" (món trong giỏ, gửi được ngay) và phần "Đã gửi quán" ===== */
.sent-group {
  margin-top: 0.75rem;
}

/* Phần chưa gửi có nền xám nhạt để khác hẳn phần đã gửi */
.sent-group--pending {
  padding: 0.75rem 0.875rem 0.875rem;
  border-radius: 1rem;
  background: var(--color-plate);
}

.sent-group__title {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  font-weight: 800;
}

.sent-group--pending .dish-line {
  border-bottom-color: rgba(29, 38, 32, 0.12);
}

.sent-group__submit {
  width: 100%;
  margin-top: 0.5rem;
}

.sent-group__empty {
  margin: 0.5rem 0 0;
  color: var(--color-ink-soft);
}

.sent-notice {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--color-herb-tint);
  color: var(--color-herb-dark);
  font-size: 0.9375rem;
  font-weight: 600;
}

.sent-notice.is-error {
  background: #fbeceb;
  color: #b42d1c;
}

/* ===== Trang món đã chọn: thanh tổng thanh toán ===== */
.subpage__bar--summary {
  justify-content: space-between;
  min-height: 4.5rem;
}

.summary__label {
  color: var(--color-ink-soft);
  font-weight: 600;
}

.summary__amount {
  color: var(--color-herb);
  font-size: 1.375rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (hover: hover) {
  .dish:hover .dish__image {
    transform: scale(1.05);
  }

  .icon-button:hover,
  .stepper__button:not(:disabled):hover {
    background: rgba(29, 38, 32, 0.06);
  }

  .pill-button:hover {
    background: var(--color-herb-tint);
  }

  .cart:not(.is-filled):hover {
    background: #e4e9e4;
  }

  .cart.is-filled:hover {
    background: #f5a700;
  }

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

/* ===== Màn hình lớn (máy tính, máy tính bảng): khung điện thoại nằm giữa màn hình ===== */
@media (min-width: 600px) and (min-height: 600px) {
  body {
    padding: 2rem;
    background: var(--color-backdrop);
  }

  .app {
    /* Cao như một màn điện thoại nhưng không vượt quá màn hình, để margin: auto canh giữa cả chiều dọc
       và khung không co giãn khi chuyển trang */
    min-height: min(60rem, calc(100vh - 4rem));
    min-height: min(60rem, calc(100dvh - 4rem));
    border-radius: 2rem;
    box-shadow: 0 1.5rem 3.75rem rgba(29, 38, 32, 0.16);
    overflow: clip; /* bo góc cả thanh tiêu đề mà position: sticky vẫn chạy */
  }
}

/* ===== Người dùng tắt hiệu ứng chuyển động trong hệ điều hành ===== */
@media (prefers-reduced-motion: reduce) {
  .cart,
  .dish__image {
    transition: none;
  }

  .cart.is-bumping,
  .subpage {
    animation: none;
  }

  /* Vẫn hiện "+N" nhưng chỉ mờ dần, không bay */
  .cart__plus {
    animation-name: plus-one-fade;
  }

  .dish:hover .dish__image {
    transform: none;
  }
}

@keyframes plus-one-fade {
  0%,
  100% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}