/**
 * VisionaryCue Commerce Pro - counter POS terminal and thermal receipt.
 *
 * One machine: the order on the terminal's own screen, the payment key on the
 * bezel below it, the paper feeding from the slot at its foot.
 *
 * It is drawn in the site's own palette rather than a dark plastic of its own.
 * Every colour, radius and shadow here resolves to a design token, so the till
 * takes the admin colours the rest of the shop uses and sits in the page
 * instead of on top of it. Two earlier passes ran their own charcoal-and-green
 * theme and read as a prop dropped into somebody else's website.
 *
 * The paper is a real element, not an image: monospace, at a receipt's own
 * measure, torn with a zigzag mask. Every figure on it stays selectable,
 * translatable and readable to a screen reader.
 */

.vc-pos {
	--vc-pos-tint: color-mix(in srgb, var(--vc-primary) 8%, var(--vc-surface));
	--vc-pos-tint-strong: color-mix(in srgb, var(--vc-primary) 14%, var(--vc-surface));
	--vc-pos-paper: #fffdf8;
	--vc-pos-paper-ink: #3b2c21;
	--vc-pos-paper-dim: #9a8b7d;
	--vc-pos-width: min(100%, 520px);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vc-space-3);
	width: 100%;
	color: var(--vc-text);
}

.vc-pos__heading.vc-pos__heading {
	margin: 0 0 4px;
	font-weight: var(--vc-heading-weight);
	text-align: center;
}

/* --------------------------------------------------------------- Terminal --- */

.vc-pos__terminal {
	position: relative;
	width: var(--vc-pos-width);
	padding: 14px 14px 28px;
	border: 1px solid var(--vc-border);
	border-radius: calc(var(--vc-card-radius) + 12px) calc(var(--vc-card-radius) + 12px) var(--vc-card-radius) var(--vc-card-radius);
	background: var(--vc-surface);
	box-shadow: 0 18px 44px rgba(16, 24, 40, 0.1);
}

.vc-pos__bezel {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-card-radius);
	background: var(--vc-background);
	overflow: hidden;
}

/* Status strip along the top of the screen. */
.vc-pos__topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 15px;
	background: var(--vc-pos-tint);
	border-bottom: 1px solid var(--vc-border);
	color: var(--vc-primary);
	font-size: 0.74em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vc-pos__lamps { display: flex; gap: 5px; flex: none; }

.vc-pos__lamp {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--vc-muted) 40%, transparent);
}

.vc-pos__lamp--power { background: var(--vc-success); }

.vc-pos.is-printing .vc-pos__lamp--data {
	background: var(--vc-primary);
	animation: vc-pos-blink 0.22s steps(1) 6;
}

@keyframes vc-pos-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0.2; }
}

.vc-pos__brand-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vc-pos__clock {
	flex: none;
	color: var(--vc-muted);
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- Screen --- */

.vc-pos__screen {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 210px;
	padding: 10px;
}

.vc-pos.is-printing .vc-pos__screen { animation: vc-pos-wake 0.5s var(--vc-ease); }

@keyframes vc-pos-wake {
	0%, 100% { opacity: 1; }
	30% { opacity: 0.55; }
}

.vc-pos__order { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 8px; }

.vc-pos__order-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 2px 4px;
	color: var(--vc-muted);
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vc-pos__order-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 auto;
	padding: 44px 20px;
	border: 1px dashed var(--vc-border);
	border-radius: var(--vc-radius);
	background: var(--vc-surface);
	text-align: center;
}

.vc-pos__order-empty-title {
	color: var(--vc-muted);
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.22em;
}

.vc-pos__order-empty-note { color: var(--vc-muted); font-size: 0.86em; }

/* No inner scroll: a scrollbox nested in the page is a trap on a phone, and the
   till reads better growing with the order than hiding half of it. */
.vc-pos__order-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

/* Two rows at every width. The name gets the full line and the stepper gets
   its own, so nothing has to be squeezed and no breakpoint has to rearrange
   the row — an earlier five-column version broke up before it ran out of
   space and shrank the stepper below a usable size to fit. */
.vc-pos__order-item {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name price"
		"thumb qty   bin";
	align-items: center;
	column-gap: 12px;
	row-gap: 8px;
	padding: 11px 12px;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius);
	background: var(--vc-surface);
}

.vc-pos__order-item.is-busy { opacity: 0.5; pointer-events: none; }

.vc-pos__order-thumb {
	grid-area: thumb;
	display: block;
	width: 52px;
	aspect-ratio: 1;
	border-radius: calc(var(--vc-radius) - 4px);
	overflow: hidden;
	background: var(--vc-background);
}

.vc-pos__order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vc-pos__order-body { grid-area: name; display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.vc-pos__order-name {
	color: var(--vc-text);
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.vc-pos__order-name:hover { color: var(--vc-primary); }

.vc-pos__order-unit { color: var(--vc-muted); font-size: 0.76em; }

/* The stepper and the bin carry the cart's own attributes, so they behave the
   way the drawer's do. The stepper keeps the shared component's own size too —
   shrinking it here squeezed the digit and put the buttons below a usable tap
   target, which is what a row of its own was made for. */
.vc-pos__order-qty.vc-pos__order-qty { grid-area: qty; flex: none; justify-self: start; }

.vc-pos__order-price {
	grid-area: price;
	justify-self: end;
	font-size: 0.95em;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.vc-pos__order-remove {
	grid-area: bin;
	justify-self: end;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--vc-border);
	border-radius: 50%;
	background: var(--vc-surface);
	color: var(--vc-muted);
	cursor: pointer;
	transition: color var(--vc-transition) var(--vc-ease),
		border-color var(--vc-transition) var(--vc-ease),
		background var(--vc-transition) var(--vc-ease);
}

.vc-pos__order-remove:hover {
	color: var(--vc-on-primary, #fff);
	border-color: var(--vc-error);
	background: var(--vc-error);
}

/* Totals */

.vc-pos__order-totals {
	margin: 0;
	padding: 11px 13px;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius);
	background: var(--vc-surface);
}

.vc-pos__order-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 2px 0;
	color: var(--vc-muted);
	font-size: 0.86em;
}

.vc-pos__order-row dt,
.vc-pos__order-row dd { margin: 0; font-variant-numeric: tabular-nums; }

.vc-pos__order-row--grand {
	margin-top: 7px;
	padding-top: 9px;
	border-top: 1px solid var(--vc-border);
	color: var(--vc-text);
	font-size: 1.14em;
	font-weight: 700;
}

.vc-pos__order-row--grand dd { color: var(--vc-primary); }

/* --------------------------------------------------------------- Controls --- */

.vc-pos__controls {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 15px 4px 2px;
}

.vc-pos__keys {
	display: grid;
	grid-template-columns: repeat(3, 20px);
	gap: 6px;
}

.vc-pos__key {
	height: 13px;
	border-radius: 4px;
	background: var(--vc-background);
	box-shadow: inset 0 0 0 1px var(--vc-border);
}

/* The payment key, shaped like the site's own buttons. */
.vc-pos__pay {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 0 22px;
	border-radius: var(--vc-radius-pill, 999px);
	background: var(--vc-primary);
	color: var(--vc-on-primary, #fff);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--vc-primary) 30%, transparent);
	transition: transform var(--vc-transition) var(--vc-ease),
		background var(--vc-transition) var(--vc-ease);
}

.vc-pos__pay:hover {
	transform: translateY(-2px);
	background: var(--vc-primary-dark, var(--vc-primary));
	color: var(--vc-on-primary, #fff);
}

.vc-pos__pay:active { transform: translateY(1px); }

.vc-pos__pay-label { letter-spacing: 0.03em; }
.vc-pos__pay-total { font-variant-numeric: tabular-nums; font-size: 1.05em; }

/* The mouth the paper comes out of. */
.vc-pos__slot {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	width: 60%;
	height: 5px;
	border-radius: 3px;
	background: var(--vc-background);
	box-shadow: inset 0 1px 3px rgba(16, 24, 40, 0.28);
}

/* ------------------------------------------------------------------ Paper --- */

.vc-pos__feed {
	width: calc(var(--vc-pos-width) * 0.62);
	margin-top: -8px;
	overflow: hidden;
}

.vc-pos__paper {
	position: relative;
	background: var(--vc-pos-paper);
	color: var(--vc-pos-paper-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.55;
	box-shadow: 0 12px 26px rgba(16, 24, 40, 0.12);

	/* Torn edge along the bottom. */
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(-45deg, transparent 6px, #000 0) bottom left / 12px 12px repeat-x,
		linear-gradient(45deg, transparent 6px, #000 0) bottom left / 12px 12px repeat-x;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(-45deg, transparent 6px, #000 0) bottom left / 12px 12px repeat-x,
		linear-gradient(45deg, transparent 6px, #000 0) bottom left / 12px 12px repeat-x;
	padding-bottom: 12px;
}

.vc-pos__paper-inner { padding: 16px 16px 4px; }

/* Feed the paper out rather than popping it in. */
.vc-pos.is-printing .vc-pos__paper { animation: vc-pos-feed 0.75s var(--vc-ease); }

@keyframes vc-pos-feed {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

.vc-pos__brand { text-align: center; }

.vc-pos__store.vc-pos__store {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vc-pos__address.vc-pos__address,
.vc-pos__meta.vc-pos__meta {
	margin: 2px 0 0;
	font-size: 0.85em;
	color: var(--vc-pos-paper-dim);
}

.vc-pos__rule {
	margin: 10px 0;
	border-top: 1px dashed color-mix(in srgb, var(--vc-pos-paper-ink) 32%, transparent);
}

.vc-pos__lines { margin: 0; padding: 0; list-style: none; }

.vc-pos__line {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 8px;
	padding: 3px 0;
}

.vc-pos__line-name { grid-column: 1; overflow-wrap: anywhere; }

.vc-pos__line-calc {
	grid-column: 1;
	grid-row: 2;
	color: var(--vc-pos-paper-dim);
	font-size: 0.88em;
}

.vc-pos__line-amount {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vc-pos__totals { margin: 0; }

.vc-pos__total-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 2px 0;
}

.vc-pos__total-row dt,
.vc-pos__total-row dd { margin: 0; font-variant-numeric: tabular-nums; }

.vc-pos__total-row--grand {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid color-mix(in srgb, var(--vc-pos-paper-ink) 42%, transparent);
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.vc-pos__coupons {
	margin: 8px 0 0;
	font-size: 0.85em;
	color: var(--vc-pos-paper-dim);
	text-align: center;
}

.vc-pos__footer { margin: 0; text-align: center; font-size: 0.9em; }

/* A drawn barcode: cheaper than an image and it never 404s. */
.vc-pos__barcode {
	display: block;
	height: 34px;
	margin: 10px 0 4px;
	background-image: repeating-linear-gradient(
		90deg,
		var(--vc-pos-paper-ink) 0 2px,
		transparent 2px 4px,
		var(--vc-pos-paper-ink) 4px 5px,
		transparent 5px 9px,
		var(--vc-pos-paper-ink) 9px 12px,
		transparent 12px 14px
	);
}

.vc-pos__void {
	margin: 18px 0 0;
	text-align: center;
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--vc-pos-paper-dim);
}

.vc-pos__void-note {
	margin: 4px 0 18px;
	text-align: center;
	font-size: 0.85em;
	color: var(--vc-pos-paper-dim);
}

.vc-pos__reprint {
	padding: 7px 16px;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-pill, 999px);
	background: var(--vc-surface);
	color: var(--vc-muted);
	font: inherit;
	font-size: 0.82em;
	cursor: pointer;
	transition: color var(--vc-transition) var(--vc-ease),
		border-color var(--vc-transition) var(--vc-ease);
}

.vc-pos__reprint:hover { color: var(--vc-primary); border-color: var(--vc-primary); }

/* ------------------------------------------------------------ Breakpoints --- */

@media (prefers-reduced-motion: reduce) {
	.vc-pos.is-printing .vc-pos__paper,
	.vc-pos.is-printing .vc-pos__screen,
	.vc-pos.is-printing .vc-pos__lamp--data {
		animation: none;
	}
}

/* The terminal is capped at 520px, so it only ever has to adapt below that —
   above it the machine is a fixed size and the page just has more room around
   it. The row layout does not change here; only the trim comes off. */
@media (max-width: 520px) {
	.vc-pos__terminal { padding: 10px 10px 24px; }
	.vc-pos__screen { padding: 8px; min-height: 0; }
	.vc-pos__order-item { column-gap: 10px; padding: 10px; }
	.vc-pos__order-thumb { width: 46px; }
	.vc-pos__controls { grid-template-columns: 1fr; padding-top: 12px; }
	.vc-pos__keys { display: none; }
	.vc-pos__feed { width: 84%; }
}

@media (max-width: 360px) {
	/* The thumbnail is the first thing worth losing: the name, the stepper and
	   the price all still have to fit. */
	.vc-pos__order-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "qty bin"; }
	.vc-pos__order-thumb { display: none; }
}