/* Malpais POS — styles pelengkap Tailwind CDN */

html, body { height: 100%; }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }

/* scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* hide number spinners */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spin { -moz-appearance: textfield; }

/* category chips */
.chip {
  flex-shrink: 0; padding: .55rem 1rem; border-radius: 9999px; font-size: .85rem; font-weight: 700;
  background: #fff; color: #075a3c; border: 1.5px solid #cfe3d9; transition: all .15s;
}
.chip:hover { background: #e3f1ea; }
.chip.active { background: #075a3c; color: #fff; border-color: #075a3c; }

/* product card */
.product {
  display: flex; flex-direction: column; text-align: left; background: #fff; border-radius: 1.25rem;
  padding: .9rem; border: 1.5px solid transparent; box-shadow: 0 1px 3px rgba(4,64,42,.08);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.product:hover { border-color: #0d7a53; box-shadow: 0 6px 16px rgba(4,64,42,.14); }
.product:active { transform: scale(.97); }
.product .thumb {
  display: flex; align-items: center; justify-content: center; height: 4.5rem; border-radius: 1rem;
  background: #e3f1ea; font-size: 2.4rem; margin-bottom: .6rem;
}

/* segmented controls */
.seg { color: #475569; transition: all .15s; }
.seg.active { background: #075a3c; color: #fff; box-shadow: 0 2px 6px rgba(7,90,60,.3); }
.seg-pay { border-color: #e2e8f0; color: #475569; transition: all .15s; }
.seg-pay.active { border-color: #075a3c; background: #e3f1ea; color: #075a3c; }

/* qty buttons */
.qty-btn {
  width: 1.9rem; height: 1.9rem; border-radius: .6rem; background: #e3f1ea; color: #075a3c;
  font-weight: 800; line-height: 1; transition: background .15s;
}
.qty-btn:hover { background: #cfe3d9; }

/* modal */
.modal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(4,64,42,.55); backdrop-filter: blur(2px);
}
.modal.hidden { display: none; }
.modal-card {
  width: 100%; background: #fff; border-radius: 1.5rem; padding: 1.25rem;
  box-shadow: 0 25px 50px rgba(0,0,0,.25); animation: pop .18s ease-out;
}
@keyframes pop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* toast */
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* mobile cart drawer */
#cart-panel.open { display: flex; animation: slideUp .2s ease-out; }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* receipt */
.receipt { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; color: #111; }
.receipt .row { display: flex; justify-content: space-between; gap: .5rem; }
.receipt hr { border: 0; border-top: 1px dashed #94a3b8; margin: .5rem 0; }

/* print: hanya nota */
@media print {
  body * { visibility: hidden; }
  #receipt, #receipt * { visibility: visible; }
  #receipt { position: absolute; left: 0; top: 0; width: 80mm; max-height: none !important; border: 0; padding: 4mm; }
}