/* =========================================================================
   Design system — shared components
   Used identically by customer POS, staff fulfilment and admin.
   ========================================================================= */

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: 0 var(--s4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: var(--text-md);
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
    color var(--t-fast), box-shadow var(--t-fast);
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.btn--primary {
  background: var(--ink);
  color: #fff;
}
.btn--primary:hover:not(:disabled) {
  background: var(--ink-80);
}

.btn--ticket {
  background: var(--ticket);
  color: var(--ink);
}
.btn--ticket:hover:not(:disabled) {
  background: var(--ticket-deep);
}

.btn--secondary {
  background: var(--surface);
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--surface-sunk);
  border-color: var(--ink-40);
}

.btn--ghost {
  color: var(--ink-80);
}
.btn--ghost:hover:not(:disabled) {
  background: rgba(14, 31, 25, 0.06);
}

.btn--danger {
  background: var(--surface);
  border-color: var(--alert);
  color: var(--alert);
}
.btn--danger:hover:not(:disabled) {
  background: var(--alert-tint);
}

.btn--sm {
  min-height: 34px;
  padding: 0 var(--s3);
  font-size: var(--text-sm);
}
.btn--lg {
  min-height: 52px;
  padding: 0 var(--s6);
  font-size: var(--text-lg);
}
.btn--block {
  width: 100%;
}

/* -------------------------------------------------------------- fields --- */
.field {
  display: block;
  margin-bottom: var(--s4);
}
.field__label {
  display: block;
  margin-bottom: var(--s2);
  font-variation-settings: "wdth" 104, "wght" 600;
  font-size: var(--text-sm);
  color: var(--ink-80);
}
.field__req {
  color: var(--alert);
  margin-left: 2px;
}
.field__hint {
  margin-top: var(--s2);
  font-size: var(--text-xs);
  color: var(--ink-60);
}
.field__error {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--alert);
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 10px var(--s3);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  font-size: var(--text-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.5;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--ink-40);
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--ink-40);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(14, 31, 25, 0.12);
}
.input[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--alert);
  background: var(--alert-tint);
}
.input:disabled,
.select:disabled {
  background: var(--surface-sunk);
  color: var(--ink-40);
}

.select {
  appearance: none;
  padding-right: var(--s8);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-60) 50%),
    linear-gradient(135deg, var(--ink-60) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field-row {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .field-row--2 {
    grid-template-columns: 1fr 1fr;
  }
  .field-row--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* checkbox / radio ------------------------------------------------------- */
.check {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3);
  min-height: var(--tap);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.check:hover {
  border-color: var(--ink-40);
}
.check--on {
  border-color: var(--ink);
  background: var(--bottle-tint);
}
.check--plain {
  border: 0;
  background: none;
  padding: var(--s2) 0;
}
.check--plain:hover {
  border-color: transparent;
}
.check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--ink);
  flex: none;
}
.check__body {
  font-size: var(--text-md);
  line-height: 1.4;
}
.check__note {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--ink-60);
}

/* toggle ----------------------------------------------------------------- */
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--tap);
  cursor: pointer;
}
.toggle__track {
  flex: none;
  width: 44px;
  height: 26px;
  padding: 3px;
  border-radius: 13px;
  background: var(--rule-strong);
  transition: background var(--t-fast);
}
.toggle__knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-raise);
  transition: transform var(--t-med);
}
.toggle input:checked + .toggle__track {
  background: var(--bottle);
}
.toggle input:checked + .toggle__track .toggle__knob {
  transform: translateX(18px);
}
.toggle input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}
.toggle__label {
  font-size: var(--text-md);
  font-weight: 600;
}
.toggle__note {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--ink-60);
  margin-top: 1px;
}

/* --------------------------------------------------------------- cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--rule);
}
.card__title {
  font-size: var(--text-lg);
  font-variation-settings: "wdth" 104, "wght" 700;
}
.card__body {
  padding: var(--s5);
}
.card__body--flush {
  padding: 0;
}

/* -------------------------------------------------------------- ticket --- *
   THE signature element: the bottle-shop shelf ticket.
   Hard corners, punched hole, ink on yellow. Used wherever money is saved.   */
.ticket {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 3px var(--s2) 3px 16px;
  background: var(--ticket);
  color: var(--ink);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
}
.ticket::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(14, 31, 25, 0.18);
}
.ticket--onshelf::before {
  background: var(--shelf);
}
.ticket--lg {
  padding: var(--s2) var(--s3) var(--s2) 22px;
  font-size: var(--text-sm);
}
.ticket--lg::before {
  left: 8px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
}
.ticket--quiet {
  background: var(--ticket-tint);
  border: 1px solid var(--ticket-deep);
}

/* torn edge — closes a receipt or collection slip */
.perf {
  height: 10px;
  background-color: var(--surface);
  background-image: radial-gradient(
    circle at 6px 10px,
    var(--shelf) 5px,
    transparent 5.5px
  );
  background-size: 12px 10px;
  background-repeat: repeat-x;
  border: 1px solid var(--rule);
  border-top: 0;
  border-bottom: 0;
}

/* --------------------------------------------------------------- badges -- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--s2);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  font-size: var(--text-2xs);
  font-variation-settings: "wdth" 104, "wght" 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-80);
}
.badge--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.badge--green {
  background: var(--bottle-tint);
  border-color: #bcd3c8;
  color: var(--bottle);
}
.badge--ticket {
  background: var(--ticket-tint);
  border-color: var(--ticket-deep);
  color: #6b4c00;
}
.badge--alert {
  background: var(--alert-tint);
  border-color: #e8b6b1;
  color: var(--alert);
}
.badge--info {
  background: var(--info-tint);
  border-color: #bcd2df;
  color: var(--info);
}
.badge--muted {
  color: var(--ink-40);
}

/* status dot for order lifecycle */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}
.dot--pulse {
  box-shadow: 0 0 0 0 currentColor;
  animation: dotpulse 2.2s infinite;
}
@keyframes dotpulse {
  70% {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot--pulse {
    animation: none;
  }
}

/* --------------------------------------------------------------- money --- */
.price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
}
.price__now {
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.price__now--deal {
  color: #8a5a00;
}
.price__was {
  font-size: var(--text-sm);
  color: var(--ink-40);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.price--lg .price__now {
  font-size: var(--text-2xl);
}
.price--lg .price__was {
  font-size: var(--text-md);
}

/* ---------------------------------------------------------------- tabs --- */
.tabs {
  display: flex;
  gap: var(--s1);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
}
.tab {
  position: relative;
  min-height: var(--tap);
  padding: 0 var(--s4);
  border: 0;
  background: none;
  color: var(--ink-60);
  font-variation-settings: "wdth" 104, "wght" 600;
  font-size: var(--text-md);
  white-space: nowrap;
}
.tab:hover {
  color: var(--ink);
}
.tab--on {
  color: var(--ink);
}
.tab--on::after {
  content: "";
  position: absolute;
  left: var(--s3);
  right: var(--s3);
  bottom: -1px;
  height: 3px;
  background: var(--ink);
}
.tab__count {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-40);
}
.tab--on .tab__count {
  color: var(--ink);
}

/* segmented control ------------------------------------------------------ */
.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.seg__btn {
  min-height: 34px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: 3px;
  background: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-60);
}
.seg__btn--on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-raise);
}

/* --------------------------------------------------------------- chips --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding: 0 var(--s3);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-80);
}
.chip--on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: -4px;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 31, 25, 0.08);
  font-size: var(--text-sm);
  line-height: 1;
}

/* -------------------------------------------------------------- tables --- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}
.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--s3);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--rule-strong);
  text-align: left;
  font-variation-settings: "wdth" 106, "wght" 700;
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  white-space: nowrap;
}
.table td {
  padding: var(--s3);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
/* Codes, timestamps and figures stay on one line — the wrapper scrolls
   sideways rather than letting a cell break mid-value. */
.table td .mono,
.table td.mono,
.table td.tiny,
.table td.num {
  white-space: nowrap;
}
.table tbody tr:hover {
  background: var(--surface-sunk);
}
.table tbody tr.is-clickable {
  cursor: pointer;
}
.table .num,
.table .right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table__strong {
  font-weight: 700;
}
.table__sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-60);
}
.table tfoot td {
  background: var(--surface-sunk);
  font-weight: 700;
  border-top: 1px solid var(--rule-strong);
}

/* -------------------------------------------------------------- modals --- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(14, 31, 25, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade var(--t-fast) both;
}
@media (min-width: 720px) {
  .overlay {
    align-items: center;
    padding: var(--s6);
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}

.modal {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-overlay);
  animation: rise var(--t-med) both;
}
.modal--wide {
  max-width: 720px;
}
@media (min-width: 720px) {
  .modal {
    border-radius: var(--r-lg);
  }
}
@keyframes rise {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
}
.modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.modal__title {
  font-size: var(--text-lg);
  font-variation-settings: "wdth" 104, "wght" 700;
}
.modal__body {
  padding: var(--s5);
}
.modal__foot {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--rule);
}
.modal__foot .btn {
  flex: 1;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink-60);
}
.icon-btn:hover {
  background: rgba(14, 31, 25, 0.07);
  color: var(--ink);
}

/* ------------------------------------------------------------- drawers --- */
.drawer {
  position: fixed;
  z-index: 95;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
  animation: slidein var(--t-med) both;
}
@keyframes slidein {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--rule);
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s5);
}
.drawer__foot {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--rule);
  background: var(--surface);
}

/* --------------------------------------------------------- empty/state --- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s12) var(--s5);
  text-align: center;
  color: var(--ink-60);
}
.empty__mark {
  width: 40px;
  height: 40px;
  color: var(--ink-25);
}
.empty__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
}
.empty__text {
  max-width: 34ch;
  font-size: var(--text-md);
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-sunk) 0%,
    #e9ece8 50%,
    var(--surface-sunk) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

/* --------------------------------------------------------------- notes --- */
.note {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--surface-sunk);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-80);
}
.note--info {
  background: var(--info-tint);
  border-color: #bcd2df;
}
.note--warn {
  background: var(--ticket-tint);
  border-color: var(--ticket-deep);
}
.note--alert {
  background: var(--alert-tint);
  border-color: #e8b6b1;
  color: var(--alert);
}
.note__mark {
  flex: none;
  margin-top: 1px;
}
.note strong {
  font-variation-settings: "wdth" 104, "wght" 700;
}

/* prototype marker — used wherever a real integration is mocked */
.mock-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--s2);
  border: 1px dashed var(--ink-40);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    rgba(14, 31, 25, 0.035) 5px,
    rgba(14, 31, 25, 0.035) 10px
  );
}

/* -------------------------------------------------------------- toasts --- */
.toaster {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: calc(var(--s16) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: max-content;
  max-width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-overlay);
  animation: toastin var(--t-med) both;
}
.toast__mark {
  color: var(--ticket);
  flex: none;
}
@keyframes toastin {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
}

/* ------------------------------------------------------------- stepper --- */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--s2);
  overflow-x: auto;
  padding: var(--s3) 0;
}
.step {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--text-xs);
  color: var(--ink-40);
  white-space: nowrap;
}
.step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
}
.step--done {
  color: var(--bottle);
}
.step--done .step__no {
  background: var(--bottle);
  border-color: var(--bottle);
  color: #fff;
}
.step--on {
  color: var(--ink);
  font-weight: 700;
}
.step--on .step__no {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.step__bar {
  width: 14px;
  height: 1px;
  background: var(--rule-strong);
  flex: none;
}

/* -------------------------------------------------------- misc helpers --- */
.stack {
  display: flex;
  flex-direction: column;
}
.stack > * + * {
  margin-top: var(--s4);
}
.stack--tight > * + * {
  margin-top: var(--s2);
}
.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.row--between {
  justify-content: space-between;
}
.row--wrap {
  flex-wrap: wrap;
}
.spacer {
  flex: 1;
}
.muted {
  color: var(--ink-60);
}
.tiny {
  font-size: var(--text-xs);
}
.right {
  text-align: right;
}
.divider {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: var(--s4) 0;
}
.flip {
  transform: rotate(180deg);
}

/* inline icon + text links (QR entry, small footnotes) */
.qr-entry__alt a,
.stack--tight li,
.tiny svg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: -2px;
}