/**
 * Enhancements: animations (cart, toast, modal), focus states, desktop polish
 */

/* ---- Hidden on desktop; shown in responsive.css ---- */
.mobile-menu-btn, .sidebar-scrim, .pos-mobile-cartbar, .pos-mobile-back { display: none; }

/* ---- Global polish ---- */
:focus-visible { outline: 2px solid #1e88e5; outline-offset: 1px; }
button, .btn { touch-action: manipulation; }
.btn { transition: transform .08s ease, filter .12s ease, box-shadow .12s ease; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.kpi-value, .product-card-price, .grand-total-amount, .cart-item-price-col, .qty-value { font-variant-numeric: tabular-nums; }
.table thead th, table thead th { position: sticky; top: 0; z-index: 2; }
input, select, textarea { font-size: max(14px, 1em); }

/* ---- Product cards ---- */
.product-card { transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.16); border-color: var(--color-primary); }
.product-card.card-tap { animation: cardTap .22s ease; }
@keyframes cardTap { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }

/* ---- Fly-to-cart ghost ---- */
.fly-ghost {
  position: fixed; z-index: 3000; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #81c784, #2e7d32);
  box-shadow: 0 4px 12px rgba(46,125,50,.5);
  pointer-events: none;
  transition: transform .5s cubic-bezier(.5,-0.2,.7,1), opacity .5s ease;
}

/* ---- Cart animations ---- */
.cart-item-row.fx-add { animation: cartRowIn .32s cubic-bezier(.2,.9,.3,1.2); }
.cart-item-row.fx-bump { animation: cartRowFlash .45s ease; }
.cart-item-row.fx-remove { animation: cartRowOut .19s ease-in forwards; overflow: hidden; }
.qty-value.qty-pop { animation: qtyPop .3s ease; display: inline-block; }
.grand-total-amount.total-bump { animation: totalBump .35s ease; display: inline-block; }
.pos-btn-pay.pay-ready:not(:disabled) { animation: payPulse 2.2s ease-in-out infinite; }
@keyframes cartRowIn { from { opacity: 0; transform: translateX(26px); background: #c8e6c9; } to { opacity: 1; transform: none; } }
@keyframes cartRowFlash { 0% { background: #fff9c4; } 100% { background: transparent; } }
@keyframes cartRowOut { to { opacity: 0; transform: translateX(-40px); max-height: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes qtyPop { 0% { transform: scale(1); } 50% { transform: scale(1.5); color: var(--color-primary); } 100% { transform: scale(1); } }
@keyframes totalBump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes payPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,125,50,.45); } 50% { box-shadow: 0 0 0 7px rgba(46,125,50,0); } }

/* ---- Toasts ---- */
.toast-container { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { cursor: pointer; }
.toast .toast-icon { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.toast .toast-icon svg { width: 100%; height: 100%; fill: currentColor; }
.toast.leaving { opacity: 0; transform: translateX(30px); transition: all .22s ease; }
.toast-success .toast-icon { animation: toastCheck .4s ease; }
.toast-error { animation: slideInRight .2s ease, toastShake .4s .2s ease; }
@keyframes toastCheck { 0% { transform: scale(0) rotate(-45deg); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes toastShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---- Modals ---- */
.modal-window { animation: popIn .18s cubic-bezier(.2,.9,.3,1.1); }

/* ---- Route transition ---- */
.app-stage > * { animation: stageIn .18s ease-out; }
@keyframes stageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Desktop refinements ---- */
@media (min-width: 1200px) {
  .product-grid-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 14px; }
  .module-body { padding: 18px; }
  .cart-item-row { padding: 10px 14px; }
}
@media (min-width: 1600px) {
  .pos-catalog-area { flex: 62; }
  .pos-checkout-area { flex: 38; min-width: 440px; }
  .product-grid-container { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}