/* ============================================================================
   S2 — Point of sale (till).
   Served as _content/ClientSharedLibrary/css/till.css. Depends on tokens.css.

   SCOPE: presentation only. The till's layout is load-bearing and stays as it
   is — Cart is a fixed right panel above 992px and a transform-driven bottom
   sheet below it, and it publishes --cart-width / --cart-bottom-height from JS
   so SalePage can reserve space. Nothing here touches position, transform,
   z-index or those variables.

   SPECIFICITY: every rule is prefixed with .mp-till (added to the sales page
   wrapper and the cart root) so it outranks the components' own <style> blocks,
   which render after the <head> links and would otherwise win at equal weight.
   That avoids blanket !important and leaves the existing layout CSS intact.

   The till runs at data-density="compact": more products per screen, which is
   what matters behind a counter.
   ========================================================================= */

/* ---- Control bar --------------------------------------------------------- */
.mp-till-controls .controls-scrollbar,
.mp-till .controls-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--mp-line-strong) transparent;
}
.mp-till-controls .controls-scrollbar::-webkit-scrollbar,
.mp-till .controls-scrollbar::-webkit-scrollbar { height: 6px; }
.mp-till-controls .controls-scrollbar::-webkit-scrollbar-thumb,
.mp-till .controls-scrollbar::-webkit-scrollbar-thumb {
  /* was #ff0404 — a hard red bar across the top of the till */
  background-color: var(--mp-line-strong);
  border-radius: var(--mp-radius-pill);
}

/* ---- Category strip ------------------------------------------------------ */
.mp-till .categories-container,
.mp-till .categories-btn-grid {
  /* The strip is `grid-auto-flow: column` with two rows, so its columns are
     sized `auto` and stretch to fill the width — six categories became three
     328px columns holding 104px chips, with the rest as dead space. Sizing the
     columns to their content makes it the compact two-row scrolling strip it
     was meant to be. */
  grid-auto-columns: max-content;
  justify-content: start;
  gap: var(--mp-gap-tight);
  padding-block: var(--mp-space-1);
  scrollbar-width: thin;
  scrollbar-color: var(--mp-line-strong) transparent;
}
.mp-till .categories-container::-webkit-scrollbar,
.mp-till .categories-btn-grid::-webkit-scrollbar { height: 6px; }
.mp-till .categories-container::-webkit-scrollbar-thumb,
.mp-till .categories-btn-grid::-webkit-scrollbar-thumb {
  background-color: var(--mp-line-strong);
  border-radius: var(--mp-radius-pill);
}

/* Category chips.
   Their colour is deliberate and stays: CatagoryCard interpolates the business's
   own brand colour into border/text (.cat-btn) and the selected ring
   (.category-card.selected). Nothing here touches colour — only form.

   text-transform: uppercase + letter-spacing were applied to every category
   name. Uppercase is a no-op in Tamil, Hindi, Bengali, Gujarati, Kannada,
   Malayalam, Marathi and Japanese, and the extra tracking pushes apart matras
   and conjuncts in Indic scripts, which hurts legibility. Dropped for all
   languages so one rule behaves everywhere. */
.mp-till .cat-btn,
.mp-till-controls .cat-btn {
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--mp-radius-pill);
  font-weight: var(--mp-weight-bold);
  padding: var(--mp-space-2) var(--mp-space-4);
  min-height: var(--mp-row-h);
  align-items: center;
}
.mp-till .cat-btn:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

/* Calmer motion: the category strip is scanned, not admired. */
@media (hover: hover) {
  .mp-till .category-card:hover { transform: scale(1.03); box-shadow: var(--mp-shadow); }
  .mp-till .category-card:hover .card-img-top { transform: scale(1.05); }
}
.mp-till .category-card:not(.selected) { box-shadow: var(--mp-shadow-sm); }

/* The selected ring must outrank the rule above — it is the only indicator of
   which category is active, and a flat box-shadow here silently removes it.
   --cat-brand is set inline per category by CatagoryCard. */
.mp-till .category-card.selected {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px var(--mp-surface),
              0 0 0 5px var(--cat-brand, var(--mp-accent)),
              var(--mp-shadow);
}
.mp-till .category-title {
  color: var(--mp-ink-2);
  font-size: var(--mp-text-sm);
  font-weight: var(--mp-weight-medium);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Product tile -------------------------------------------------------- */
/* The tile carries the business's brand colour inline, so anything drawn on
   top of it uses --mp-on-brand rather than a theme token (see S1). */
.mp-till .card-tile {
  border-radius: var(--mp-radius) !important;   /* component sets this !important */
  box-shadow: var(--mp-shadow-sm) !important;
  border: 1px solid var(--mp-line) !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}

@media (hover: hover) {
  .mp-till .card-tile:hover {
    /* was a 5px lift + 1.02 scale with a 32px shadow — too much motion for a
       grid the operator scans at speed */
    transform: translateY(-2px);
    box-shadow: var(--mp-shadow) !important;
  }
}

.mp-till .card-tile:focus-visible,
.mp-till .card-tile:has(:focus-visible) {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

.mp-till .tile-price-badge {
  background: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
  box-shadow: var(--mp-shadow-sm);
  letter-spacing: 0;
}

.mp-till .tile-name-overlay {
  /* Scrim so the name stays legible over any product photo. */
  background: linear-gradient(to top, rgba(9, 12, 17, .88) 0%, rgba(9, 12, 17, .62) 60%, rgba(9, 12, 17, 0) 100%);
}

.mp-till .tile-name {
  color: var(--mp-on-brand);
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-leading-tight);
  letter-spacing: 0;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.mp-till .tile-no-image {
  background: var(--mp-surface-2);
  color: var(--mp-muted);
}

/* ---- Cart panel ---------------------------------------------------------- */
.mp-till.cart-summary,
.mp-till .cart-summary {
  background-color: var(--mp-surface);
  border-top: 1px solid var(--mp-line);
  color: var(--mp-ink);
  font-family: var(--mp-font);
}

.mp-till .cart-summary-body { background-color: var(--mp-surface); }

.mp-till .cart-summary-header,
.mp-till .cart-header {
  border-bottom: 1px solid var(--mp-line);
  color: var(--mp-ink);
}

/* Line items */
.mp-till .cart-item-box {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line) !important;
  border-radius: var(--mp-radius) !important;
  box-shadow: none !important;                  /* component sets shadow-sm */
}
.mp-till .cart-item-box + .cart-item-box { margin-top: var(--mp-gap-tight); }

.mp-till .item-name { color: var(--mp-ink); font-weight: var(--mp-weight-medium); }
.mp-till .item-quantity,
.mp-till .item-total,
.mp-till .table-balance {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--mp-ink);
}

/* Quantity stepper — unified equal heights for buttons and input */
.mp-till .quantity-control-wrapper {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  vertical-align: middle;
}

.mp-till .qty-btn,
.mp-till .qty-plus,
.mp-till .qty-minus {
  min-width: 30px;
  width: 30px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  margin: 0;
  background: var(--mp-surface-2);
  color: var(--mp-ink);
  border: none;
  border-radius: 0;
  font-weight: var(--mp-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.mp-till .qty-minus {
  border-right: 1px solid var(--mp-line);
}

.mp-till .qty-plus {
  border-left: 1px solid var(--mp-line);
}

.mp-till .qty-btn:hover,
.mp-till .qty-plus:hover,
.mp-till .qty-minus:hover { background: var(--mp-line); }

.mp-till .qty-btn:focus-visible,
.mp-till .qty-plus:focus-visible,
.mp-till .qty-minus:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 1px; }

.mp-till .qty-input,
.mp-till .print-copies-input {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--mp-ink);
  background: var(--mp-surface);
  border: none;
  border-radius: 0;
  width: 42px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 32px;
  vertical-align: middle;
  box-sizing: border-box;
  -moz-appearance: textfield;
}

.mp-till .qty-input::-webkit-outer-spin-button,
.mp-till .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mp-till .qty-input:focus-visible,
.mp-till .print-copies-input:focus-visible {
  outline: none;
  background: var(--mp-surface);
  box-shadow: inset 0 0 0 1px var(--mp-accent);
}

/* Held bills */
.mp-till .held-bill-card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.mp-till .held-bill-card:hover { background: var(--mp-surface-2); }
.mp-till .held-bill-card.selected {
  border-color: var(--mp-accent);
  background: var(--mp-accent-soft);
}
.mp-till .held-bill-header { color: var(--mp-ink); font-weight: var(--mp-weight-bold); }
.mp-till .held-bill-item  { color: var(--mp-ink-2); font-size: var(--mp-text-sm); }
.mp-till .held-bill-footer {
  color: var(--mp-ink);
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--mp-line);
}

/* Payment type chooser */
.mp-till .payment-types .btn,
.mp-till .payment-types label {
  border-radius: var(--mp-radius-sm);
  font-weight: var(--mp-weight-medium);
}
.mp-till .payment-input-container {
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-surface);
}
.mp-till .payment-input-container.focused {
  border-color: var(--mp-accent);
  box-shadow: var(--mp-focus);
}
.mp-till .payment-details {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--mp-ink);
}

/* Customer suggestion dropdown */
.mp-till .suggestion-dropdown {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-lg);
}
.mp-till .suggestion-item { color: var(--mp-ink-2); }
.mp-till .suggestion-item:hover { background: var(--mp-surface-2); color: var(--mp-ink); }
.mp-till .suggestion-name { color: var(--mp-ink); font-weight: var(--mp-weight-medium); }
.mp-till .suggestion-phone,
.mp-till .suggestion-details { color: var(--mp-muted); font-size: var(--mp-text-sm); }
.mp-till .recent-tag {
  background: var(--mp-accent-soft);
  color: var(--mp-accent);
  border-radius: var(--mp-radius-pill);
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-medium);
}

/* The drag handle that resizes the desktop cart */
.mp-till .resize-grip,
.mp-till .resize-handle { background: var(--mp-line); }
.mp-till .resize-handle:hover,
.mp-till .resize-grip:hover { background: var(--mp-accent); }

/* ---- Till popups --------------------------------------------------------- */
.mp-till .popup-overlay,
.mp-till .mobile-popup-overlay { background: rgba(9, 12, 17, .62); }

.mp-till .popup-content,
.mp-till .mobile-popup-content {
  background: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-lg);
}
.mp-till .popup-title { color: var(--mp-ink); font-weight: var(--mp-weight-bold); }
.mp-till .popup-message { color: var(--mp-ink-2); }


/* ============================================================================
   Tile floor — added after testing the live till.

   Product tiles get their width from a Bootstrap column class the C# builds
   from the business's cards-per-row preference (Modules.GetGridClass). That
   preference is emitted identically to every breakpoint — `col-1 col-sm-1
   col-md-1 col-lg-1 col-xl-1` for a 12-per-row setting — so the grid never
   adapts: measured 110x110px at 1600px wide and **37x37px at 1000px**, with the
   product name truncated to a single letter. A 37px touch target on the money
   path is unusable.

   This is a floor, not an override: where the preference already yields a
   usable tile it changes nothing, and where it does not the row wraps instead
   of shrinking. The real fix is for GetGridClass to vary its column count per
   breakpoint — that is C# and belongs to a separate change.
   ========================================================================= */
.mp-till .row > [class*="col-"] { min-width: 92px; }