/*
 * CITS POS — Terminal shell layout (v0.6.2 dense).
 *
 * Layout: cart on the LEFT (retail-POS muscle memory), catalog on the RIGHT,
 * sticky action bar across the bottom. Mobile-first. Breakpoints reviewed at
 * 360 / 768 / 1024 / 1440px per Protocol #1.
 *
 * Component-internal styles ship inside each <cits-*> shadow root (see
 * assets/pos/components/*.js); this file owns: full-screen body reset,
 * gate states, header toolbar, layout grid, catalog toolbar, product grid
 * container, pagination, sticky action bar, dialog, live region.
 */

/* -------------------------------------------------------------------------
 * Full-screen body wrapper (POSShell-rendered HTML doc).
 * ------------------------------------------------------------------------- */

.cits-pos-body {
	margin: 0;
	padding: 0;
	background: #f4f6f8;
	color: #0f172a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	min-height: 100vh;
	overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
	.cits-pos-body {
		background: #0f172a;
		color: #f1f5f9;
	}
}

/* Reset under the shell root so theme parents (when not full-screen) can't bleed in. */
.cits-pos-shell {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: var(--cits-fg);
	background: var(--cits-bg);
	font-family: var(--cits-font-sans);
	font-size: var(--cits-fs-base);
	line-height: 1.5;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}
.cits-pos-shell *,
.cits-pos-shell *::before,
.cits-pos-shell *::after {
	box-sizing: inherit;
}

.cits-pos-shell :focus {
	outline: none;
}
.cits-pos-shell :focus-visible {
	box-shadow: var(--cits-focus-ring);
	border-radius: var(--cits-radius-sm);
}

/* -------------------------------------------------------------------------
 * Gate states (login / no-access)
 * ------------------------------------------------------------------------- */

.cits-pos-gate {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cits-space-6) var(--cits-space-4);
}

.cits-pos-gate__card {
	width: 100%;
	max-width: 420px;
	padding: var(--cits-space-8) var(--cits-space-6);
	background: var(--cits-bg-card, #fff);
	color: var(--cits-fg, #0f172a);
	border-radius: var(--cits-radius-lg, 14px);
	box-shadow: var(--cits-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.1));
	text-align: center;
	font-family: var(--cits-font-sans, system-ui, sans-serif);
}

.cits-pos-gate__card--quiet {
	background: var(--cits-bg-muted, #f1f5f9);
}

.cits-pos-gate__title {
	margin: 0 0 var(--cits-space-3);
	font-size: var(--cits-fs-2xl, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.cits-pos-gate__lede {
	margin: 0 0 var(--cits-space-6);
	color: var(--cits-fg-muted, #475569);
	font-size: var(--cits-fs-sm, 0.875rem);
	line-height: 1.5;
}

.cits-pos-gate__hint {
	margin: var(--cits-space-4) 0 0;
	color: var(--cits-fg-subtle, #94a3b8);
	font-size: var(--cits-fs-xs, 0.75rem);
}

.cits-pos-gate__hint a {
	color: var(--cits-accent, #0ea5e9);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

.cits-pos-gate__actions {
	margin-top: var(--cits-space-6);
}

.cits-pos-gate__button {
	display: inline-flex;
	align-items: center;
	gap: var(--cits-space-2);
	padding: var(--cits-space-2) var(--cits-space-4);
	background: transparent;
	color: var(--cits-accent, #0ea5e9);
	border: 1px solid var(--cits-border, #e2e8f0);
	border-radius: var(--cits-radius-md, 10px);
	text-decoration: none;
	font-size: var(--cits-fs-sm, 0.875rem);
	font-weight: 500;
	transition: background var(--cits-duration-fast) var(--cits-ease);
}

.cits-pos-gate__button:hover {
	background: var(--cits-accent-soft, rgba(14, 165, 233, 0.12));
}

.cits-pos-gate .login-form-username label,
.cits-pos-gate .login-form-password label {
	display: block;
	text-align: left;
	margin-bottom: var(--cits-space-1);
	font-size: var(--cits-fs-sm, 0.875rem);
	color: var(--cits-fg-muted, #475569);
}

.cits-pos-gate .login-form-username input[type="text"],
.cits-pos-gate .login-form-username input[type="email"],
.cits-pos-gate .login-form-password input[type="password"] {
	width: 100%;
	padding: var(--cits-space-2) var(--cits-space-3);
	border: 1px solid var(--cits-border-strong, #cbd5e1);
	border-radius: var(--cits-radius-md, 10px);
	font: inherit;
	margin-bottom: var(--cits-space-3);
	background: var(--cits-bg-card, #fff);
	color: var(--cits-fg, #0f172a);
}

.cits-pos-gate .login-submit input[type="submit"] {
	width: 100%;
	padding: var(--cits-space-3) var(--cits-space-4);
	background: var(--cits-accent, #0ea5e9);
	color: var(--cits-fg-on-accent, #fff);
	border: 0;
	border-radius: var(--cits-radius-md, 10px);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--cits-duration-fast) var(--cits-ease);
}

.cits-pos-gate .login-submit input[type="submit"]:hover {
	background: var(--cits-accent-hover, #0284c7);
}

.cits-pos-gate .login-remember {
	text-align: left;
	margin-bottom: var(--cits-space-3);
	font-size: var(--cits-fs-sm, 0.875rem);
	color: var(--cits-fg-muted, #475569);
}

/* -------------------------------------------------------------------------
 * Terminal header — brand, toolbar, header tools
 * ------------------------------------------------------------------------- */

.cits-pos-shell__header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--cits-space-3);
	align-items: center;
	padding: var(--cits-space-2) var(--cits-space-3);
	background: var(--cits-bg-elevated);
	border-bottom: 1px solid var(--cits-border);
	box-shadow: var(--cits-shadow-sm);
	position: sticky;
	top: 0;
	z-index: 10;
}

@media (max-width: 1023px) {
	.cits-pos-shell__header {
		grid-template-columns: 1fr auto;
	}
	.cits-pos-shell__toolbar {
		grid-column: 1 / -1;
		order: 3;
	}
}

.cits-pos-shell__brand {
	display: flex;
	align-items: center;
	gap: var(--cits-space-2);
	font-weight: 600;
	font-size: var(--cits-fs-sm);
	letter-spacing: -0.01em;
	color: var(--cits-fg);
}

.cits-pos-shell__brand-mark {
	width: 30px;
	height: 30px;
	border-radius: var(--cits-radius-sm);
	background: var(--cits-accent);
	color: var(--cits-fg-on-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--cits-fs-sm);
}

.cits-pos-shell__brand-name {
	display: none;
}

@media (min-width: 768px) {
	.cits-pos-shell__brand-name {
		display: inline;
	}
}

.cits-pos-shell__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cits-success);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--cits-success) 25%, transparent);
}

.cits-pos-shell__status-dot[data-status="offline"] {
	background: var(--cits-danger);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--cits-danger) 25%, transparent);
}

.cits-pos-shell__toolbar {
	display: flex;
	align-items: center;
	gap: var(--cits-space-2);
	flex-wrap: wrap;
}

.cits-pos-shell__pill-button {
	font: inherit;
	font-size: var(--cits-fs-xs);
	font-weight: 500;
	padding: 0.4rem 0.85rem;
	background: var(--cits-bg-card);
	color: var(--cits-fg-muted);
	border: 1px solid var(--cits-border);
	border-radius: var(--cits-radius-md);
	cursor: pointer;
	transition: background var(--cits-duration-fast), color var(--cits-duration-fast);
	white-space: nowrap;
}

.cits-pos-shell__pill-button:hover {
	background: var(--cits-accent-soft);
	color: var(--cits-accent);
	border-color: var(--cits-accent);
}

.cits-pos-shell__field {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.cits-pos-shell__field select {
	font: inherit;
	font-size: var(--cits-fs-xs);
	padding: 0.4rem 1.75rem 0.4rem 0.6rem;
	background: var(--cits-bg-card);
	color: var(--cits-fg);
	border: 1px solid var(--cits-border);
	border-radius: var(--cits-radius-md);
	cursor: pointer;
	min-width: 140px;
	max-width: 220px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--cits-fg-muted) 50%),
					  linear-gradient(135deg, var(--cits-fg-muted) 50%, transparent 50%);
	background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	transition: border-color var(--cits-duration-fast), box-shadow var(--cits-duration-fast);
}

.cits-pos-shell__field select:hover {
	border-color: var(--cits-border-strong);
}

.cits-pos-shell__field select:focus {
	outline: none;
	border-color: var(--cits-accent);
	box-shadow: 0 0 0 3px var(--cits-accent-soft);
}

.cits-pos-shell__field--warehouse select {
	font-weight: 500;
}

.cits-pos-shell__field--customer select {
	background-color: var(--cits-bg-muted);
}

.cits-pos-shell__customer-trigger {
	font: inherit;
	font-size: var(--cits-fs-xs);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	background: var(--cits-bg-muted);
	color: var(--cits-fg);
	border: 1px solid var(--cits-border);
	border-radius: var(--cits-radius-md);
	cursor: pointer;
	max-width: 240px;
	transition: border-color var(--cits-duration-fast), background var(--cits-duration-fast);
}

.cits-pos-shell__customer-trigger:hover {
	border-color: var(--cits-accent);
	background: var(--cits-accent-soft);
}

.cits-pos-shell__customer-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 140px;
	font-weight: 500;
}

.cits-pos-shell__customer-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1rem 0.45rem;
	background: rgba(245, 158, 11, 0.2);
	color: #b45309;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.cits-pos-shell__customer-badge:hover {
	background: rgba(245, 158, 11, 0.32);
}

.cits-pos-shell__pill-button[data-action="toggle-shift"][data-state="open"] {
	background: rgba(34, 197, 94, 0.15);
	color: #15803d;
	border-color: rgba(34, 197, 94, 0.5);
	font-weight: 600;
}

.cits-pos-shell__header-tools {
	display: flex;
	align-items: center;
	gap: var(--cits-space-1);
}

.cits-pos-shell__icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: transparent;
	color: var(--cits-fg-muted);
	border: 1px solid var(--cits-border);
	border-radius: var(--cits-radius-md);
	cursor: pointer;
	font-size: 1rem;
	transition: background var(--cits-duration-fast), color var(--cits-duration-fast);
}

.cits-pos-shell__icon-button:hover {
	background: var(--cits-bg-muted);
	color: var(--cits-fg);
}

.cits-pos-shell__icon-button--solid {
	background: var(--cits-accent);
	color: var(--cits-fg-on-accent);
	border-color: var(--cits-accent);
}

.cits-pos-shell__icon-button--solid:hover {
	background: var(--cits-accent-hover);
	color: var(--cits-fg-on-accent);
}

.cits-pos-shell__user {
	font-size: var(--cits-fs-xs);
	color: var(--cits-fg-muted);
	padding: 0 var(--cits-space-2);
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: none;
}

@media (min-width: 1024px) {
	.cits-pos-shell__user {
		display: inline-block;
	}
}

/* -------------------------------------------------------------------------
 * Phase 10.E.6 — POS avatar dropdown.
 * Mirrors the admin shell topbar (avatar circle button + click-to-open menu
 * with display name + email + Edit profile + Sign out). Anchored to the
 * top-right of the header tools cluster.
 * ------------------------------------------------------------------------- */

.cits-pos-shell__profile {
	position: relative;
	display: inline-block;
}

.cits-pos-shell__avatar-button {
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	padding: 2px;
	border-radius: 999px;
	cursor: pointer;
	line-height: 0;
	transition: border-color var(--cits-duration-fast), box-shadow var(--cits-duration-fast);
}
.cits-pos-shell__avatar-button:hover,
.cits-pos-shell__avatar-button:focus-visible,
.cits-pos-shell__profile.is-open .cits-pos-shell__avatar-button {
	outline: none;
	border-color: var(--cits-accent);
	box-shadow: 0 0 0 3px var(--cits-accent-soft, rgba(115, 103, 240, 0.18));
}

.cits-pos-shell__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: linear-gradient(135deg, #a78bfa, #7367f0);
	color: #fff;
	font: 600 12px/1 system-ui, -apple-system, sans-serif;
	letter-spacing: 0.04em;
	overflow: hidden;
	text-transform: uppercase;
}
.cits-pos-shell__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cits-pos-shell__profile-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	background: var(--cits-bg-elevated, #fff);
	border: 1px solid var(--cits-border, #e2e8f0);
	border-radius: var(--cits-radius-md, 10px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
	padding: 6px;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cits-pos-shell__profile-menu[hidden] { display: none !important; }

.cits-pos-shell__profile-head {
	padding: 10px 12px;
	border-bottom: 1px solid var(--cits-border, #f1f5f9);
	margin-bottom: 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.cits-pos-shell__profile-head strong {
	font: 600 13px/1.2 system-ui, sans-serif;
	color: var(--cits-fg, #0f172a);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cits-pos-shell__profile-head small {
	font: 500 11.5px/1.3 system-ui, sans-serif;
	color: var(--cits-fg-subtle, #94a3b8);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cits-pos-shell__profile-menu a {
	display: block;
	padding: 9px 12px;
	font: 500 13px/1.2 system-ui, sans-serif;
	color: var(--cits-fg-muted, #475569);
	text-decoration: none;
	border-radius: 6px;
	transition: background var(--cits-duration-fast);
}
.cits-pos-shell__profile-menu a:hover,
.cits-pos-shell__profile-menu a:focus-visible {
	background: var(--cits-bg-muted, #f1f5f9);
	color: var(--cits-fg, #0f172a);
	outline: none;
}

/* -------------------------------------------------------------------------
 * Phase 10.E.6 — Scan-ready indicator.
 * Lives in the catalog toolbar next to the search bar. JS toggles
 * `data-state` based on the hidden barcode scanner's focus events.
 * ------------------------------------------------------------------------- */

.cits-pos-shell__scan-ready {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 11px;
	border-radius: 999px;
	font: 600 11.5px/1 system-ui, -apple-system, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	border: 1px solid var(--cits-border, #e2e8f0);
	background: var(--cits-bg-card, #fff);
	color: var(--cits-fg-muted, #475569);
	transition: background var(--cits-duration-fast), color var(--cits-duration-fast), border-color var(--cits-duration-fast);
	white-space: nowrap;
}
.cits-pos-shell__scan-ready:hover {
	background: var(--cits-bg-muted, #f1f5f9);
	border-color: var(--cits-border, #cbd5e1);
}
.cits-pos-shell__scan-ready-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cits-fg-subtle, #94a3b8);
	transition: background var(--cits-duration-fast), box-shadow var(--cits-duration-fast);
}
.cits-pos-shell__scan-ready[data-state="active"] {
	background: rgba(22, 163, 74, 0.08);
	border-color: rgba(22, 163, 74, 0.35);
	color: #166534;
}
.cits-pos-shell__scan-ready[data-state="active"] .cits-pos-shell__scan-ready-dot {
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	animation: cits-pos-scan-pulse 1.8s infinite;
}
@keyframes cits-pos-scan-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
	60%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.cits-pos-shell__scan-ready[data-state="active"] .cits-pos-shell__scan-ready-dot { animation: none; }
}
@media (max-width: 640px) {
	.cits-pos-shell__scan-ready-label { display: none; }
	.cits-pos-shell__scan-ready { padding: 6px; }
}

/* -------------------------------------------------------------------------
 * Main layout — cart LEFT, catalog RIGHT (≥1024px). Stacked below.
 * ------------------------------------------------------------------------- */

.cits-pos-shell__main {
	display: grid;
	grid-template-columns: 1fr;
	flex: 1;
	min-height: 0;
}

@media (min-width: 1024px) {
	.cits-pos-shell__main {
		grid-template-columns: 380px minmax(0, 1fr);
	}
}

@media (min-width: 1440px) {
	.cits-pos-shell__main {
		grid-template-columns: 440px minmax(0, 1fr);
	}
}

.cits-pos-shell__cart-pane {
	background: var(--cits-bg-elevated);
	border-bottom: 1px solid var(--cits-border);
	min-height: 200px;
	display: flex;
	min-width: 0;
}

@media (min-width: 1024px) {
	.cits-pos-shell__cart-pane {
		border-bottom: 0;
		border-right: 1px solid var(--cits-border);
	}
}

.cits-pos-shell__cart-pane cits-cart {
	flex: 1;
	min-height: 0;
	width: 100%;
}

.cits-pos-shell__catalog {
	display: flex;
	flex-direction: column;
	gap: var(--cits-space-3);
	padding: var(--cits-space-3) var(--cits-space-4);
	min-width: 0;
}

.cits-pos-shell__catalog-toolbar {
	display: flex;
	gap: var(--cits-space-2);
	align-items: center;
}

.cits-pos-shell__catalog-toolbar cits-search-bar {
	flex: 1;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * Catalog grid — bigger cards
 * ------------------------------------------------------------------------- */

.cits-pos-shell__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--cits-space-3);
}

@media (min-width: 768px) {
	.cits-pos-shell__grid {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	}
}

@media (min-width: 1440px) {
	.cits-pos-shell__grid {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}
}

.cits-pos-shell__empty {
	padding: var(--cits-space-8) var(--cits-space-4);
	text-align: center;
	color: var(--cits-fg-subtle);
	border: 1px dashed var(--cits-border-strong);
	border-radius: var(--cits-radius-md);
}

/* -------------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------------- */

.cits-pos-shell__pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cits-space-2);
	padding: var(--cits-space-3) 0 var(--cits-space-1);
	font-size: var(--cits-fs-xs);
	color: var(--cits-fg-subtle);
}

/* Phase 10.E.6 — author `display: flex` above was beating the user-agent
   `[hidden] { display: none }` rule, so renderPagination()'s
   `paginationEl.hidden = true` had no visual effect when there's only one
   page. Explicit override resolves that. */
.cits-pos-shell__pagination[hidden] {
	display: none !important;
}

.cits-pos-shell__pagination-label strong {
	color: var(--cits-fg);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin: 0 2px;
}

.cits-pos-shell__pagination-controls {
	display: inline-flex;
	gap: var(--cits-space-1);
}

.cits-pos-shell__pagination-controls button {
	font: inherit;
	font-size: var(--cits-fs-sm);
	min-width: 34px;
	height: 34px;
	padding: 0 0.6rem;
	background: var(--cits-bg-card);
	color: var(--cits-fg-muted);
	border: 1px solid var(--cits-border);
	border-radius: var(--cits-radius-md);
	cursor: pointer;
	transition: background var(--cits-duration-fast), color var(--cits-duration-fast);
}

.cits-pos-shell__pagination-controls button:hover:not(:disabled) {
	background: var(--cits-bg-muted);
	color: var(--cits-fg);
}

.cits-pos-shell__pagination-controls button.is-active {
	background: var(--cits-accent);
	color: var(--cits-fg-on-accent);
	border-color: var(--cits-accent);
}

.cits-pos-shell__pagination-controls button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Sticky bottom action bar
 * ------------------------------------------------------------------------- */

.cits-pos-shell__actions {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--cits-space-3);
	align-items: stretch;
	padding: var(--cits-space-2) var(--cits-space-3);
	background: var(--cits-bg-elevated);
	border-top: 1px solid var(--cits-border);
	box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.05);
	position: sticky;
	bottom: 0;
	z-index: 5;
}

@media (max-width: 767px) {
	.cits-pos-shell__actions {
		grid-template-columns: 1fr;
		gap: var(--cits-space-2);
	}
	.cits-pos-shell__action-status {
		justify-content: center;
	}
	.cits-pos-shell__action-buttons {
		justify-content: center;
		flex-wrap: wrap;
	}
}

.cits-pos-shell__action-status {
	display: inline-flex;
	align-items: center;
	gap: var(--cits-space-2);
	font-size: var(--cits-fs-xs);
	color: var(--cits-fg-muted);
	padding: 0 var(--cits-space-2);
	white-space: nowrap;
}

.cits-pos-shell__action-buttons {
	display: flex;
	gap: var(--cits-space-1);
	align-items: center;
	justify-content: center;
}

.cits-pos-shell__action-buttons button {
	font: inherit;
	font-size: var(--cits-fs-xs);
	font-weight: 500;
	padding: 0.45rem 0.85rem;
	background: transparent;
	color: var(--cits-fg-muted);
	border: 1px solid var(--cits-border);
	border-radius: var(--cits-radius-md);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: background var(--cits-duration-fast), color var(--cits-duration-fast);
	letter-spacing: 0.02em;
}

.cits-pos-shell__action-buttons button:hover:not(:disabled) {
	background: var(--cits-bg-muted);
	color: var(--cits-fg);
}

.cits-pos-shell__action-buttons button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.cits-pos-shell__pay-now {
	display: inline-flex;
	align-items: stretch;
	gap: var(--cits-space-2);
	min-width: 280px;
}

.cits-pos-shell__pay-now-meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	padding: 0.3rem 0.8rem;
	background: var(--cits-bg-muted);
	border-radius: var(--cits-radius-md);
	min-width: 130px;
}

.cits-pos-shell__pay-now-meta small {
	font-size: 0.6rem;
	color: var(--cits-fg-subtle);
	letter-spacing: 0.06em;
	font-weight: 600;
}

.cits-pos-shell__pay-now-meta strong {
	font-size: var(--cits-fs-base);
	font-weight: 700;
	color: var(--cits-accent);
	font-variant-numeric: tabular-nums;
}

.cits-pos-shell__pay-now-button {
	font: inherit;
	font-size: var(--cits-fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.6rem 1.4rem;
	background: linear-gradient(135deg, var(--cits-accent) 0%, var(--cits-accent-hover) 100%);
	color: var(--cits-fg-on-accent);
	border: 0;
	border-radius: var(--cits-radius-md);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: transform var(--cits-duration-fast), box-shadow var(--cits-duration-fast), opacity var(--cits-duration-fast);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--cits-accent) 30%, transparent);
}

.cits-pos-shell__pay-now-button:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--cits-accent) 40%, transparent);
}

.cits-pos-shell__pay-now-button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * Always-on barcode capture input
 * ------------------------------------------------------------------------- */

.cits-pos-shell__barcode-input {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

/* Toast / status region (aria-live announcements) */
.cits-pos-shell__live {
	position: fixed;
	left: 50%;
	bottom: calc(var(--cits-space-10) + 60px);
	transform: translateX(-50%);
	background: var(--cits-fg);
	color: var(--cits-bg);
	padding: var(--cits-space-2) var(--cits-space-4);
	border-radius: var(--cits-radius-pill);
	font-size: var(--cits-fs-sm);
	box-shadow: var(--cits-shadow-lg);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--cits-duration-base) var(--cits-ease);
	z-index: 1000;
}

.cits-pos-shell__live[data-visible="1"] {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Help dialog (? keyboard shortcut)
 * ------------------------------------------------------------------------- */

.cits-pos-shell__dialog {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: 480px;
	width: 90vw;
	color: var(--cits-fg);
}

.cits-pos-shell__dialog::backdrop {
	background: var(--cits-bg-overlay);
	backdrop-filter: blur(2px);
}

.cits-pos-shell__dialog-card {
	background: var(--cits-bg-elevated);
	border-radius: var(--cits-radius-lg);
	box-shadow: var(--cits-shadow-lg);
	padding: var(--cits-space-6);
}

.cits-pos-shell__dialog-title {
	margin: 0 0 var(--cits-space-4);
	font-size: var(--cits-fs-xl);
	font-weight: 600;
}

.cits-pos-shell__dialog-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cits-space-2);
}

.cits-pos-shell__dialog-list li {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: var(--cits-space-3);
	align-items: center;
	font-size: var(--cits-fs-sm);
}

.cits-pos-shell__kbd {
	display: inline-block;
	padding: 2px 8px;
	background: var(--cits-bg-muted);
	border: 1px solid var(--cits-border);
	border-radius: var(--cits-radius-sm);
	font-family: var(--cits-font-mono);
	font-size: var(--cits-fs-xs);
	color: var(--cits-fg);
	text-align: center;
	min-width: 32px;
}

.cits-pos-shell__dialog-close {
	margin-top: var(--cits-space-4);
	padding: var(--cits-space-2) var(--cits-space-4);
	background: var(--cits-accent);
	color: var(--cits-fg-on-accent);
	border: 0;
	border-radius: var(--cits-radius-md);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Screen-reader-only helper
 * ------------------------------------------------------------------------- */
.cits-pos-shell .cits-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}