/* Sweet POS - Wongnai Style + Enhanced + Premium UX Layer */
* { -webkit-tap-highlight-color: transparent; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* === F1: Shadow Depth System (3-tier) === */
:root {
  --shadow-card: 0 1px 3px rgba(44,22,14,0.06), 0 4px 8px rgba(44,22,14,0.04);
  --shadow-elevated: 0 2px 8px rgba(44,22,14,0.08), 0 8px 24px rgba(44,22,14,0.06);
  --shadow-floating: 0 4px 12px rgba(44,22,14,0.10), 0 16px 48px rgba(44,22,14,0.12);
  --shadow-confirm-glow: 0 0 0 4px rgba(0,177,79,0.15), 0 4px 16px rgba(0,177,79,0.20);
}

/* === F2: Micro-Interactions === */

/* Product card — "push into shelf" on tap */
#pos-products button {
  box-shadow: var(--shadow-card);
  transition: transform 120ms cubic-bezier(0.2, 0, 0.2, 1),
              box-shadow 200ms ease;
}
#pos-products button:active {
  transform: scale(0.96);
  box-shadow: 0 1px 2px rgba(44,22,14,0.04);
}

/* Cart quantity +/- — bounce */
.qty-bounce {
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.qty-bounce:active {
  transform: scale(0.88);
  transition: transform 80ms ease-out;
}

/* Confirm payment button — glow */
.btn-confirm-glow {
  box-shadow: var(--shadow-confirm-glow);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.btn-confirm-glow:active {
  transform: scale(0.97);
  box-shadow: 0 0 0 6px rgba(0,177,79,0.25), 0 2px 8px rgba(0,177,79,0.30);
}

/* Bottom nav tab — subtle scale */
nav button {
  transition: transform 100ms ease;
}
nav button:active {
  transform: scale(0.92);
}

/* Category filter pills — tap feedback */
#pos-categories button {
  transition: transform 100ms ease, background-color 200ms ease;
}
#pos-categories button:active {
  transform: scale(0.94);
}

/* Checkout modal buttons — press feedback */
#checkout-modal button {
  transition: transform 120ms cubic-bezier(0.2, 0, 0.2, 1);
}
#checkout-modal button:active {
  transform: scale(0.97);
}

/* Cart panel overlay — glass effect */
#cart-panel > .absolute.bottom-0 {
  box-shadow: var(--shadow-floating);
}

/* === F4: Entrance Animations === */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#pos-products button {
  animation: cardEnter 300ms cubic-bezier(0.2, 0, 0.2, 1) both;
}
#pos-products button:nth-child(1) { animation-delay: 0ms; }
#pos-products button:nth-child(2) { animation-delay: 50ms; }
#pos-products button:nth-child(3) { animation-delay: 50ms; }
#pos-products button:nth-child(4) { animation-delay: 100ms; }
#pos-products button:nth-child(5) { animation-delay: 100ms; }
#pos-products button:nth-child(6) { animation-delay: 150ms; }

/* Success checkmark pop */
@keyframes successPop {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
.success-pop { animation: successPop 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* === F3: Glass & Blur Effects === */

/* Payment overlay — frosted glass */
.glass-overlay {
  background: rgba(255,248,246,0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

/* Cart summary bar — glass strip */
#cart-panel > .absolute.bottom-0 > .border-t {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(212,195,190,0.30);
}

/* Checkout modal — glass card */
#checkout-modal > .relative {
  background: rgba(255,248,246,0.92);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: var(--shadow-floating);
}

/* Discount modal — glass */
#discount-modal > .relative {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow-elevated);
}

/* Header scroll — glass on scroll */
header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* === F5: Premium Checkout Ceremony === */

/* Payment overlay slide up */
@keyframes overlayUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.checkout-slide-up {
  animation: overlayUp 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Quick amount pills — full round */
.amount-pill {
  border-radius: 9999px;
  padding: 8px 20px;
  font-weight: 600;
  transition: transform 100ms ease, background-color 150ms ease;
}
.amount-pill:active {
  transform: scale(0.93);
}

/* Number count-up animation */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.count-up {
  animation: countUp 400ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Success ceremony — checkmark + text */
@keyframes successCheck {
  0%   { opacity: 0; transform: scale(0) rotate(-45deg); }
  50%  { transform: scale(1.2) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.success-check {
  animation: successCheck 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes successFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.success-fade {
  animation: successFade 300ms ease both;
}
.success-fade-1 { animation-delay: 200ms; }
.success-fade-2 { animation-delay: 400ms; }
.success-fade-3 { animation-delay: 600ms; }

/* === F6: Typography Refinement === */

/* Tabular numbers for money */
.money, .price, .total, [id*="total"], [id*="subtotal"], [id*="cart-sc"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
}

/* Large display total */
.display-total {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Tighter headings */
h1, h2, h3, .heading {
  letter-spacing: -0.01em;
}

/* === F7: Gold Accents === */
:root {
  --gold-accent: #c5a572;
  --gold-light: rgba(197,165,114,0.15);
  --surface-elevated: #fffbf9;
}

.gold-badge {
  background: var(--gold-light);
  color: var(--gold-accent);
  font-weight: 600;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 11px;
}

/* === Reduce Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Animations */
.cart-slide-up { animation: slideUp 0.25s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.25s ease-out; }
#app-content { animation: fadeIn 0.15s ease-in; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Safe area */
body { padding-bottom: env(safe-area-inset-bottom); }
nav { padding-bottom: env(safe-area-inset-bottom); }

/* Toggle switch */
.peer:checked + div { background-color: #00B14F; }
.peer:checked + div::after { transform: translateX(16px); }

/* Kitchen pulse */
@keyframes pulse-bell { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.pulse-bell { animation: pulse-bell 1s ease-in-out infinite; }

/* Status colors */
.status-pending { background-color: #FEF3C7; color: #92400E; }
.status-preparing { background-color: #DBEAFE; color: #1E40AF; }
.status-ready { background-color: #D1FAE5; color: #065F46; }
.status-served { background-color: #F3F4F6; color: #6B7280; }
.status-delivered { background-color: #D1FAE5; color: #065F46; }

/* More menu animation */
.more-slide-up { animation: slideUp 0.2s ease-out; }

/* has-[:checked] polyfill for older browsers */
label:has(input:checked) { border-color: #00B14F !important; background-color: #E8F5E9 !important; }

/* Print receipt */
@media print {
    body > *:not(#receipt-modal) { display: none !important; }
    #receipt-modal { position: static !important; display: block !important; }
    #receipt-modal .absolute.inset-0 { display: none !important; }
    #receipt-modal button { display: none !important; }
    #receipt-content { box-shadow: none !important; max-width: 80mm; margin: 0 auto; }
}

/* QR print popup */
@media print {
    .qr-print-page { page-break-inside: avoid; }
}