@import '_content/GroceryPOS.Web.Shared/GroceryPOS.Web.Shared.03brwv1vr5.bundle.scp.css';

/* /Components/Pages/Selling.razor.rz.scp.css */
/* Cashier Sell screen (scoped to Selling.razor). Colours, radii and type come from the shared design tokens
   (pos-foundation.css); this file only lays out the register: the current sale on the left, the catalogue on
   the right — replaced by the cash payment panel once the sale is created. No page scroll on a 1024×768 or
   larger screen: only the line list and the product grid scroll. */

.sell[b-t3lzc19026] {
    --sell-action: var(--pos-success);
    --sell-action-hover: var(--pos-success-strong);
    --sell-shell-header: 3.25rem;   /* .cashier-shell__header height (app.css) */
    --sell-gap: 0.5rem;

    display: flex;
    flex-direction: column;
    gap: var(--sell-gap);
    height: calc(100dvh - var(--sell-shell-header) - 2 * var(--sell-gap));
    min-height: 34rem;
}

.sell-num[b-t3lzc19026] { font-variant-numeric: tabular-nums; }

/* ---- shared controls ---------------------------------------------------------------------------- */
.sell-btn[b-t3lzc19026] {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: 2.75rem; padding: 0 0.9rem;
    background: var(--pos-surface); color: var(--pos-text);
    border: 1px solid var(--pos-border-strong); border-radius: var(--pos-radius-sm);
    font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.sell-btn:hover:not(:disabled)[b-t3lzc19026] { background: var(--pos-surface-alt); color: var(--pos-text); }
.sell-btn:disabled[b-t3lzc19026] { opacity: 0.45; cursor: not-allowed; }
.sell-btn--sm[b-t3lzc19026] { height: 2.25rem; padding: 0 0.75rem; }
.sell-btn--danger[b-t3lzc19026] { color: var(--pos-danger); border-color: var(--pos-danger-border); }
.sell-btn--danger:hover:not(:disabled)[b-t3lzc19026] { background: var(--pos-danger-soft); color: var(--pos-danger); }
.sell-btn--danger-solid[b-t3lzc19026] { color: #fff; background: var(--pos-danger); border-color: var(--pos-danger); }
.sell-btn--danger-solid:hover:not(:disabled)[b-t3lzc19026] { background: var(--pos-danger-hover); color: #fff; }

.sell-link[b-t3lzc19026] { padding: 0.25rem 0; border: 0; background: none; color: var(--pos-accent-hover); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.sell-link:hover[b-t3lzc19026] { text-decoration: underline; color: var(--pos-accent-hover); }

.sell-dot[b-t3lzc19026] { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--pos-success); box-shadow: 0 0 0 3px var(--pos-success-soft); }

.sell-key[b-t3lzc19026], .sell-action[data-shortcut][b-t3lzc19026]::after {
    display: inline-block; padding: 0.05rem 0.4rem; border-radius: 4px;
    font: 600 0.7rem/1.4 var(--pos-font); color: var(--pos-text-muted);
    background: var(--pos-surface-alt); border: 1px solid var(--pos-border-strong); border-bottom-width: 2px;
}

/* The main action of each step: Checkout, Complete cash sale, New sale. */
.sell-action[b-t3lzc19026] {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex: none;
    width: 100%; height: 3.75rem; margin-top: 0.6rem;
    border: 0; border-radius: var(--pos-radius-sm);
    background: var(--sell-action); color: #fff; font-size: 1.25rem; font-weight: 700; cursor: pointer;
}
.sell-action:hover:not(:disabled)[b-t3lzc19026] { background: var(--sell-action-hover); }
.sell-action:focus-visible[b-t3lzc19026] { outline: 3px solid var(--pos-accent-border); outline-offset: 2px; }
.sell-action:disabled[b-t3lzc19026] { background: var(--pos-border); color: var(--pos-text-muted); cursor: not-allowed; }
.sell-action[data-shortcut][b-t3lzc19026]::after { content: attr(data-shortcut); color: #fff; background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.35); }
.sell-action:disabled[b-t3lzc19026]::after { display: none; }

.sell-alert[b-t3lzc19026] {
    margin-top: 0.5rem; padding: 0.45rem 0.65rem; font-size: 0.85rem;
    color: var(--pos-danger); background: var(--pos-danger-soft); border: 1px solid var(--pos-danger-border); border-radius: var(--pos-radius-sm);
}
.sell-alert--block[b-t3lzc19026] { margin: 0.75rem; }

/* ---- register status ---------------------------------------------------------------------------- */
.sell-status[b-t3lzc19026] {
    flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem;
    min-height: 2.25rem; padding: 0.25rem 0.75rem;
    background: var(--pos-surface); border: 1px solid var(--pos-border); border-radius: var(--pos-radius-sm);
    font-size: 0.85rem;
}
.sell-status__state[b-t3lzc19026] { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--pos-success-strong); }
.sell-status__state.is-paused[b-t3lzc19026] { color: var(--pos-warning-strong); }
.sell-status__state.is-paused .sell-dot[b-t3lzc19026] { background: var(--pos-warning); box-shadow: 0 0 0 3px var(--pos-warning-soft); }
.sell-status__label[b-t3lzc19026] { color: var(--pos-text-muted); }
.sell-status__actions[b-t3lzc19026] { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }

.sell-paused[b-t3lzc19026] {
    flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    color: var(--pos-warning-strong); background: var(--pos-warning-soft); border: 1px solid var(--pos-warning-border);
    border-radius: var(--pos-radius-sm); font-weight: 600;
}
.sell-paused .sell-btn[b-t3lzc19026] { margin-left: auto; }

/* ---- workspace ---------------------------------------------------------------------------------- */
.sell-work[b-t3lzc19026] {
    position: relative; flex: 1; min-height: 0;
    display: grid; grid-template-columns: min(54%, 48.75rem) minmax(0, 1fr); gap: var(--sell-gap);
}
.sell-panel[b-t3lzc19026] {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: var(--pos-surface); border: 1px solid var(--pos-border); border-radius: var(--pos-radius-sm);
}

/* ---- scan box ----------------------------------------------------------------------------------- */
.sell-scan[b-t3lzc19026] { flex: none; padding: 0.5rem 0.5rem 0; }
.sell-scanbox[b-t3lzc19026] {
    display: flex; align-items: center; gap: 0.6rem; height: 3.25rem; margin: 0; padding: 0 0.5rem 0 0.75rem;
    background: var(--pos-surface); border: 2px solid var(--pos-border-strong); border-radius: var(--pos-radius-sm); cursor: text;
}
.sell-scanbox:focus-within[b-t3lzc19026] { border-color: var(--pos-accent); box-shadow: 0 0 0 3px var(--pos-accent-soft); }
.sell-scanbox.is-lost[b-t3lzc19026] { border-color: var(--pos-warning); background: var(--pos-warning-soft); }
.sell-scanbox.is-off[b-t3lzc19026] { background: var(--pos-surface-alt); }
.sell-scanbox__icon[b-t3lzc19026] { flex: none; color: var(--pos-text-faint); }
.sell-scanbox__input[b-t3lzc19026] { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 1.15rem; color: var(--pos-text); }
.sell-scanbox__input[b-t3lzc19026]::placeholder { color: var(--pos-text-faint); }
/* The box around these inputs shows focus; the inputs themselves never draw a second ring. */
.sell-scanbox__input:focus[b-t3lzc19026], .sell-scanbox__input:focus-visible[b-t3lzc19026],
.sell-cash__field input:focus[b-t3lzc19026], .sell-cash__field input:focus-visible[b-t3lzc19026] { outline: 0; box-shadow: none; }
.sell-scanbox__clear[b-t3lzc19026] { flex: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--pos-radius-sm); background: var(--pos-surface-alt); color: var(--pos-text-muted); font-size: 1.2rem; cursor: pointer; }
.sell-scan-state[b-t3lzc19026] { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; font-weight: 600; color: var(--pos-text-muted); white-space: nowrap; }
.sell-scan-state .sell-dot[b-t3lzc19026] { box-shadow: none; }
.sell-scan-resume[b-t3lzc19026] {
    flex: none; height: 2.25rem; padding: 0 0.65rem; border: 1px solid var(--pos-warning); border-radius: var(--pos-radius-sm);
    background: var(--pos-surface); color: var(--pos-warning-strong); font-size: 0.78rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.sell-mult[b-t3lzc19026] { flex: none; padding: 0.1rem 0.5rem; border-radius: 4px; background: var(--pos-text); color: #fff; font-weight: 800; }

/* One fixed-height message line: scan results never move the layout. */
.sell-feedback[b-t3lzc19026] {
    display: flex; align-items: center; gap: 0.45rem; height: 1.75rem; padding: 0 0.25rem;
    font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sell-feedback[b-t3lzc19026]::before {
    flex: none; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%;
    font-size: 0.68rem; font-weight: 800; color: #fff;
}
.sell-feedback.is-ok[b-t3lzc19026] { color: var(--pos-success); }
.sell-feedback.is-ok[b-t3lzc19026]::before { content: "✓"; background: var(--pos-success); }
.sell-feedback.is-error[b-t3lzc19026] { color: var(--pos-danger); }
.sell-feedback.is-error[b-t3lzc19026]::before { content: "!"; background: var(--pos-danger); }
.sell-feedback.is-warning[b-t3lzc19026] { color: var(--pos-warning-strong); }
.sell-feedback.is-warning[b-t3lzc19026]::before { content: "!"; background: var(--pos-warning); }
.sell-feedback.is-info[b-t3lzc19026] { color: var(--pos-text); font-weight: 600; }
.sell-feedback.is-idle[b-t3lzc19026] { color: var(--pos-text-faint); }

/* ---- current sale ------------------------------------------------------------------------------- */
.sell-sale-head[b-t3lzc19026] { flex: none; display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.25rem 0.5rem 0.25rem 0.75rem; border-top: 1px solid var(--pos-border); }
.sell-sale-head__title[b-t3lzc19026] { margin: 0; font-size: 1rem; font-weight: 700; white-space: nowrap; }
.sell-sale-head__count[b-t3lzc19026] { font-size: 0.82rem; color: var(--pos-text-muted); white-space: nowrap; }
.sell-sale-head__tools[b-t3lzc19026] { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.sell-confirm[b-t3lzc19026] { font-weight: 600; color: var(--pos-danger); white-space: nowrap; }
.sell-lock[b-t3lzc19026] { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--pos-text-muted); white-space: nowrap; }
.sell-products-toggle[b-t3lzc19026] { display: none; }

.sell-cols[b-t3lzc19026], .sell-line__row[b-t3lzc19026] {
    display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) 5.1rem 6rem; column-gap: 0.6rem; padding: 0 0.75rem;
}
.sell-cols[b-t3lzc19026] {
    flex: none; align-items: center; height: 1.75rem; font-size: 0.75rem; color: var(--pos-text-muted);
    background: var(--pos-surface-alt); border-top: 1px solid var(--pos-border); border-bottom: 1px solid var(--pos-border);
}
.sell-num[b-t3lzc19026], .sell-cols .sell-num[b-t3lzc19026] { text-align: right; }

/* column-reverse keeps the list scrolled to its end, so the newest line is always in view. */
.sell-lines[b-t3lzc19026] { flex: 1; min-height: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; overflow-y: auto; overscroll-behavior: contain; }
.sell-lines__list[b-t3lzc19026] { margin: 0; padding: 0; list-style: none; }
.sell-lines__empty[b-t3lzc19026] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 1.5rem; text-align: center; color: var(--pos-text-muted); }
.sell-lines__empty strong[b-t3lzc19026] { font-size: 1rem; color: var(--pos-text); }
.sell-lines__empty svg[b-t3lzc19026] { color: var(--pos-border-strong); margin-bottom: 0.4rem; }

.sell-line[b-t3lzc19026] { border-bottom: 1px solid var(--pos-border); }
.sell-line__row[b-t3lzc19026] { align-items: center; min-height: 2.9rem; padding-top: 0.25rem; padding-bottom: 0.25rem; cursor: pointer; }
[data-checkout-phase="reviewing"] .sell-line__row[b-t3lzc19026],
[data-checkout-phase="complete"] .sell-line__row[b-t3lzc19026] { cursor: default; }
.sell-line__qty[b-t3lzc19026] {
    justify-self: start; width: 2.5rem; height: 1.9rem; line-height: 1.8rem; text-align: center;
    font-size: 1rem; font-weight: 800; border: 1px solid var(--pos-border); border-radius: 4px; background: var(--pos-surface-alt);
}
.sell-line__name[b-t3lzc19026] { min-width: 0; display: flex; flex-direction: column; }
.sell-line__title[b-t3lzc19026] { font-size: 0.95rem; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.sell-line__warn[b-t3lzc19026] { font-size: 0.75rem; font-weight: 600; color: var(--pos-danger); }
.sell-line__price[b-t3lzc19026] { color: var(--pos-text-muted); }
.sell-line__total[b-t3lzc19026] { font-size: 1rem; font-weight: 800; }
.sell-line.is-selected[b-t3lzc19026] { background: var(--pos-accent-soft); box-shadow: inset 3px 0 0 var(--pos-accent); }
.sell-line.is-short .sell-line__qty[b-t3lzc19026] { color: var(--pos-danger); border-color: var(--pos-danger-border); background: var(--pos-danger-soft); }
.sell-line.is-new[b-t3lzc19026] { animation: sell-line-new-b-t3lzc19026 900ms ease-out; }
@keyframes sell-line-new-b-t3lzc19026 { from { background-color: var(--pos-accent-border); } }

.sell-line__edit[b-t3lzc19026] { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0.75rem 0.5rem; }
.sell-line__meta[b-t3lzc19026] { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; font-size: 0.75rem; color: var(--pos-text-muted); }
.sell-stepper[b-t3lzc19026] { display: inline-flex; flex: none; overflow: hidden; background: var(--pos-surface); border: 1px solid var(--pos-border-strong); border-radius: var(--pos-radius-sm); }
.sell-stepper button[b-t3lzc19026] { width: 3rem; height: 2.75rem; border: 0; background: none; font-size: 1.35rem; font-weight: 600; color: var(--pos-text); cursor: pointer; }
.sell-stepper button:hover:not(:disabled)[b-t3lzc19026] { background: var(--pos-surface-alt); }
.sell-stepper button:disabled[b-t3lzc19026] { color: var(--pos-border-strong); cursor: not-allowed; }
.sell-stepper__input[b-t3lzc19026] {
    width: 4rem; height: 2.75rem; border: 0; border-left: 1px solid var(--pos-border); border-right: 1px solid var(--pos-border);
    text-align: center; font-size: 1.1rem; font-weight: 800; outline: 0; font-variant-numeric: tabular-nums;
}
.sell-stepper__input:focus[b-t3lzc19026] { box-shadow: inset 0 0 0 2px var(--pos-accent); }
.sell-line__edit .sell-btn[b-t3lzc19026] { height: 2.75rem; }

.sell-foot[b-t3lzc19026] { flex: none; padding: 0.5rem 0.75rem 0.75rem; border-top: 1px solid var(--pos-border); }
.sell-totals[b-t3lzc19026] { margin: 0; }
.sell-totals > div[b-t3lzc19026] { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; color: var(--pos-text-muted); }
.sell-totals dt[b-t3lzc19026] { font-weight: 400; }
.sell-totals dd[b-t3lzc19026] { margin: 0; font-variant-numeric: tabular-nums; }
.sell-totals .sell-totals__grand[b-t3lzc19026] { align-items: center; color: var(--pos-text); }
.sell-totals__grand dt[b-t3lzc19026] { font-size: 0.95rem; font-weight: 700; }
.sell-totals__grand dt small[b-t3lzc19026] { font-size: 0.8rem; font-weight: 400; color: var(--pos-text-muted); }
.sell-totals__grand dd[b-t3lzc19026] { font-size: 2.1rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }

/* ---- catalogue ---------------------------------------------------------------------------------- */
.sell-cats[b-t3lzc19026] {
    flex: none; display: flex; gap: 0.4rem; padding: 0.4rem; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: thin; border-bottom: 1px solid var(--pos-border);
}
.sell-cat[b-t3lzc19026] {
    flex: none; height: 2.5rem; padding: 0 0.9rem; border: 1px solid var(--pos-border); border-radius: var(--pos-radius-sm);
    background: var(--pos-surface); color: var(--pos-text-muted); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.sell-cat:hover[b-t3lzc19026] { border-color: var(--pos-border-strong); color: var(--pos-text); }
.sell-cat.is-active[b-t3lzc19026] { background: var(--pos-accent); border-color: var(--pos-accent); color: var(--pos-accent-text); }

.sell-search-summary[b-t3lzc19026] { flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0.65rem; font-size: 0.82rem; color: var(--pos-text-muted); border-bottom: 1px solid var(--pos-border); }
.sell-tiles__empty[b-t3lzc19026] { padding: 1.75rem 0.75rem; text-align: center; color: var(--pos-text-muted); }

.sell-tiles[b-t3lzc19026] {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: 0.4rem; align-content: start;
}
.sell-tile[b-t3lzc19026] {
    position: relative; display: flex; flex-direction: column; min-height: 8.4rem; padding: 0; overflow: hidden; text-align: left;
    background: var(--pos-surface); color: var(--pos-text); border: 1px solid var(--pos-border); border-radius: var(--pos-radius-sm); cursor: pointer;
}
.sell-tile:hover:not(:disabled)[b-t3lzc19026] { border-color: var(--pos-accent); }
.sell-tile:active:not(:disabled)[b-t3lzc19026] { transform: scale(0.98); }
.sell-tile:focus-visible[b-t3lzc19026] { outline: 3px solid var(--pos-accent-border); outline-offset: 1px; }
.sell-tile:disabled[b-t3lzc19026] { cursor: not-allowed; }
.sell-tile.is-in-cart[b-t3lzc19026] { border-color: var(--pos-accent-border); box-shadow: inset 0 0 0 1px var(--pos-accent-border); }
.sell-tile.is-added[b-t3lzc19026] { animation: sell-tile-added-b-t3lzc19026 260ms ease-out; }
@keyframes sell-tile-added-b-t3lzc19026 { 40% { transform: scale(0.96); border-color: var(--pos-accent); } }
.sell-tile__media[b-t3lzc19026] { flex: none; display: flex; align-items: center; justify-content: center; height: 4rem; overflow: hidden; background: var(--pos-surface-alt); }
.sell-tile__img[b-t3lzc19026] { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; padding: 0.25rem; }
.sell-tile__name[b-t3lzc19026] {
    padding: 0.35rem 0.5rem 0; font-size: 0.84rem; font-weight: 600; line-height: 1.2;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.sell-tile__price[b-t3lzc19026] { margin-top: auto; padding: 0.1rem 0.5rem 0.45rem; font-size: 1rem; font-weight: 800; text-align: left; }
.sell-tile:disabled .sell-tile__media[b-t3lzc19026],
.sell-tile:disabled .sell-tile__name[b-t3lzc19026],
.sell-tile:disabled .sell-tile__price[b-t3lzc19026] { opacity: 0.45; filter: grayscale(0.85); }
.sell-tile__tag[b-t3lzc19026] {
    position: absolute; top: 0.25rem; right: 0.25rem; padding: 0.05rem 0.4rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700;
    color: var(--pos-warning-strong); background: var(--pos-warning-soft); border: 1px solid var(--pos-warning-border);
}
.sell-tile__tag.is-out[b-t3lzc19026] { color: var(--pos-danger); background: var(--pos-danger-soft); border-color: var(--pos-danger-border); }
.sell-tile__count[b-t3lzc19026] {
    position: absolute; top: 0.25rem; left: 0.25rem; display: grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem;
    border-radius: 0.75rem; background: var(--pos-text); color: #fff; font-size: 0.75rem; font-weight: 800;
}

/* ---- payment ------------------------------------------------------------------------------------ */
.sell-pay[b-t3lzc19026] { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; min-height: 0; padding: 0.6rem 0.75rem 0.75rem; overflow-y: auto; }
.sell-pay__head[b-t3lzc19026] { display: flex; align-items: center; gap: 0.5rem; }
.sell-pay__head h2[b-t3lzc19026] { margin: 0; font-size: 1rem; font-weight: 700; }
.sell-chip[b-t3lzc19026] { padding: 0.05rem 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--pos-text-muted); border: 1px solid var(--pos-border); border-radius: 4px; }
.sell-pay__due[b-t3lzc19026] {
    display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.75rem;
    background: var(--pos-surface-alt); border: 1px solid var(--pos-border); border-radius: var(--pos-radius-sm);
}
.sell-pay__due span[b-t3lzc19026] { font-weight: 700; color: var(--pos-text-muted); }
.sell-pay__due strong[b-t3lzc19026] { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.01em; }
.sell-cash[b-t3lzc19026] { display: block; margin: 0; }
.sell-cash__label[b-t3lzc19026] { display: block; margin-bottom: 0.2rem; font-size: 0.82rem; font-weight: 600; color: var(--pos-text-muted); }
.sell-cash__field[b-t3lzc19026] {
    display: flex; align-items: center; height: 3.6rem;
    background: var(--pos-surface); border: 2px solid var(--pos-border-strong); border-radius: var(--pos-radius-sm);
}
.sell-cash__field:focus-within[b-t3lzc19026] { border-color: var(--pos-accent); box-shadow: 0 0 0 3px var(--pos-accent-soft); }
.sell-cash__symbol[b-t3lzc19026] { padding: 0 0.25rem 0 0.85rem; font-size: 1.35rem; color: var(--pos-text-faint); }
.sell-cash__field input[b-t3lzc19026] { flex: 1; min-width: 0; height: 100%; padding: 0 0.85rem; border: 0; outline: 0; background: none; text-align: right; font-size: 2rem; font-weight: 800; color: var(--pos-text); }
.sell-cash__problem[b-t3lzc19026] { margin-top: -0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--pos-danger); }

.sell-tenders[b-t3lzc19026] { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 0.4rem; }
.sell-tender[b-t3lzc19026] {
    height: 3rem; padding: 0 0.35rem; text-align: center; white-space: nowrap;
    background: var(--pos-surface); color: var(--pos-text); border: 1px solid var(--pos-border-strong); border-radius: var(--pos-radius-sm);
    font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.sell-tender:hover:not(:disabled)[b-t3lzc19026] { background: var(--pos-surface-alt); }
.sell-tender:disabled[b-t3lzc19026] { opacity: 0.45; cursor: not-allowed; }
.sell-tender--exact[b-t3lzc19026] { color: var(--pos-accent-text); background: var(--pos-accent-soft); border-color: var(--pos-accent-border); }

.sell-keypad[b-t3lzc19026] {
    flex: 0 1 auto; min-height: 0; display: grid; gap: 0.4rem;
    grid-template-columns: repeat(3, 1fr) 1.15fr; grid-template-rows: repeat(4, minmax(2.6rem, 4.1rem));
    grid-template-areas:
        "k7 k8 k9 back"
        "k4 k5 k6 back"
        "k1 k2 k3 clear"
        "k0 k00 kdot clear";
}
.sell-keypad__key[b-t3lzc19026] {
    border: 1px solid var(--pos-border); border-radius: var(--pos-radius-sm); background: var(--pos-surface-alt); color: var(--pos-text);
    font-size: 1.35rem; font-weight: 600; cursor: pointer;
}
.sell-keypad__key:hover:not(:disabled)[b-t3lzc19026] { background: var(--pos-border); }
.sell-keypad__key:disabled[b-t3lzc19026] { opacity: 0.45; cursor: not-allowed; }
.sell-keypad__key[data-cash-key="7"][b-t3lzc19026] { grid-area: k7; }
.sell-keypad__key[data-cash-key="8"][b-t3lzc19026] { grid-area: k8; }
.sell-keypad__key[data-cash-key="9"][b-t3lzc19026] { grid-area: k9; }
.sell-keypad__key[data-cash-key="4"][b-t3lzc19026] { grid-area: k4; }
.sell-keypad__key[data-cash-key="5"][b-t3lzc19026] { grid-area: k5; }
.sell-keypad__key[data-cash-key="6"][b-t3lzc19026] { grid-area: k6; }
.sell-keypad__key[data-cash-key="1"][b-t3lzc19026] { grid-area: k1; }
.sell-keypad__key[data-cash-key="2"][b-t3lzc19026] { grid-area: k2; }
.sell-keypad__key[data-cash-key="3"][b-t3lzc19026] { grid-area: k3; }
.sell-keypad__key[data-cash-key="0"][b-t3lzc19026] { grid-area: k0; }
.sell-keypad__key[data-cash-key="00"][b-t3lzc19026] { grid-area: k00; }
.sell-keypad__key[data-cash-key="."][b-t3lzc19026] { grid-area: kdot; }
.sell-keypad__key--back[b-t3lzc19026] { grid-area: back; }
.sell-keypad__key--clear[b-t3lzc19026] { grid-area: clear; font-size: 0.95rem; font-weight: 700; color: var(--pos-text-muted); }

.sell-change[b-t3lzc19026] {
    display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; min-height: 3.6rem; padding: 0.3rem 0.75rem;
    border: 1px solid var(--pos-border); border-radius: var(--pos-radius-sm);
}
.sell-change span[b-t3lzc19026] { font-weight: 700; color: var(--pos-text-muted); }
.sell-change strong[b-t3lzc19026] { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--pos-text-faint); }
.sell-change.is-ready[b-t3lzc19026] { background: var(--pos-accent-soft); border-color: var(--pos-accent-border); }
.sell-change.is-ready span[b-t3lzc19026],
.sell-change.is-ready strong[b-t3lzc19026] { color: var(--pos-accent-text); }
.sell-pay .sell-action[b-t3lzc19026] { margin-top: auto; }

/* ---- payment complete --------------------------------------------------------------------------- */
.sell-done[b-t3lzc19026] { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; padding: 0.85rem 0.75rem 0.75rem; overflow-y: auto; }
.sell-done__head[b-t3lzc19026] { display: flex; align-items: center; gap: 0.75rem; }
.sell-done__head h2[b-t3lzc19026] { margin: 0; font-size: 1.1rem; font-weight: 700; }
.sell-done__head span[b-t3lzc19026] { font-size: 0.82rem; color: var(--pos-text-muted); }
.sell-done__check[b-t3lzc19026] { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--pos-accent); color: var(--pos-accent-text); }
.sell-done__change[b-t3lzc19026] { padding: 0.75rem 1rem; color: var(--pos-accent-text); background: var(--pos-accent-soft); border: 1px solid var(--pos-accent-border); border-radius: var(--pos-radius-sm); }
.sell-done__change span[b-t3lzc19026] { font-weight: 700; }
.sell-done__change strong[b-t3lzc19026] { display: block; font-size: 3.25rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.sell-done__amounts[b-t3lzc19026] { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.75rem; margin: 0; }
.sell-done__amounts dt[b-t3lzc19026] { font-weight: 400; color: var(--pos-text-muted); }
.sell-done__amounts dd[b-t3lzc19026] { margin: 0; font-weight: 700; text-align: right; }
.sell-done__receipt[b-t3lzc19026] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: auto; }
.sell-done__receipt .sell-btn[b-t3lzc19026] { height: 3rem; }
.sell-done .sell-action[b-t3lzc19026] { margin-top: 0; }

/* ---- narrower screens --------------------------------------------------------------------------- */
/* Below 900px (a portrait tablet) two columns are too narrow for the line list and the tiles, so the products
   slide over the sale on demand ("Products"), and the payment panel slides over it once the sale exists. */
@media (max-width: 899.98px) {
    .sell-work[b-t3lzc19026] { grid-template-columns: minmax(0, 1fr); }
    .sell-side[b-t3lzc19026] {
        display: none; position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(36rem, calc(100% - 3rem));
        box-shadow: -8px 0 32px rgba(20, 32, 46, 0.22);
    }
    .sell-work.is-products-open .sell-side[b-t3lzc19026],
    .sell-work.is-paying .sell-side[b-t3lzc19026] { display: flex; }
    .sell-products-toggle[b-t3lzc19026] { display: inline-flex; }
}

@media (max-width: 639.98px) {
    .sell-scan-state[b-t3lzc19026], .sell-key[b-t3lzc19026] { display: none; }
    .sell-cols[b-t3lzc19026], .sell-line__row[b-t3lzc19026] { grid-template-columns: 2.75rem minmax(0, 1fr) 5.5rem; }
    .sell-cols > :nth-child(3)[b-t3lzc19026], .sell-line__price[b-t3lzc19026] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sell-line.is-new[b-t3lzc19026], .sell-tile.is-added[b-t3lzc19026] { animation: none; }
    .sell-tile:active:not(:disabled)[b-t3lzc19026] { transform: none; }
}