/* ==========================================================================
   QUÁN NHỎ — CSS dùng chung cho cả 3 giao diện
   Tailwind lo phần lớn, file này chỉ bổ sung hiệu ứng & tinh chỉnh nhỏ.
   ========================================================================== */

:root {
  --brand:        #ea580c;   /* cam chủ đạo */
  --brand-dark:   #c2410c;
  --brand-light:  #fff7ed;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior-y: none;
}

/* --- Thanh cuộn mảnh, gọn --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* --- Ẩn thanh cuộn (dùng cho dải danh mục cuộn ngang) --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Hiệu ứng đơn mới nhảy vào màn hình bếp --- */
@keyframes pop-in {
  0%   { opacity: 0; transform: translateY(14px) scale(.96); }
  100% { opacity: 1; transform: translateY(0)    scale(1);   }
}
.animate-pop { animation: pop-in .3s cubic-bezier(.2,.8,.3,1); }

/* --- Nhấp nháy cho đơn đang chờ quá lâu --- */
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, .55); }
  50%      { box-shadow: 0 0 0 12px rgba(234, 88, 12, 0); }
}
.ring-alert { animation: pulse-ring 1.6s infinite; }

/* --- Toast thông báo --- */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast { animation: slide-up .25s ease-out; }

/* --- Nút bấm có phản hồi khi chạm (quan trọng với màn hình cảm ứng) --- */
.btn-press { transition: transform .08s ease, filter .15s ease; }
.btn-press:active { transform: scale(.96); filter: brightness(.95); }

/* --- Khung ảnh món giữ tỉ lệ vuông --- */
.img-square { aspect-ratio: 1 / 1; object-fit: cover; }

/* --- Chỉ hiện khi in hoá đơn --- */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
  .print-area { position: absolute; inset: 0; margin: 0; padding: 0; width: 100%; }
}

/* --- Bảo đảm nội dung không bị che bởi vùng an toàn của iPhone --- */
.safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem); }