/* WordPress theme resets so the Octopus shell can use the full page width. */
body.page .site-main,
body.page .entry-content {
	background: transparent;
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.page .entry-content > *:not(.local-pos-shell) {
	max-width: none !important;
}

body.page .content-area,
body.page .site-content,
body.page .site-main {
	max-width: none !important;
}

body.page .entry-title {
	display: none !important;
}

/* The Octopus portal (panels and login) is a standalone workspace: hide the
   site's own header/nav and footer chrome so it reads as a dedicated app. */
body.page header.elementor-location-header,
body.page footer.site-footer,
body.page #site-footer {
	display: none !important;
}

/* The theme reserves top padding on #content to clear its fixed header;
   with that header hidden, drop the reserved space too. */
body.page #content {
	padding-top: 0 !important;
}

/* Typography shared across screens. */
.local-pos-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--local-pos-accent-strong);
	margin-bottom: 8px;
}

.local-pos-lead {
	margin: 0;
	max-width: 700px;
	color: var(--local-pos-muted);
	font-size: 15px;
	line-height: 1.5;
}

.local-pos-page-title {
	margin: 4px 0 6px;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.local-pos-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.local-pos-section-head h3 {
	margin: 4px 0 0;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.local-pos-subtitle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.local-pos-subtitle-row h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.local-pos-subtitle-row span {
	color: var(--local-pos-muted);
	font-size: 13px;
}

@media (max-width: 720px) {
	.local-pos-subtitle-row {
		gap: 12px;
		align-items: flex-start;
	}
}

/* Shared buttons. */
.local-pos-button {
	border: 0 !important;
	border-radius: var(--local-pos-radius) !important;
	padding: 11px 18px !important;
	background: var(--local-pos-accent-gradient) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: filter 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
	text-decoration: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

.local-pos-button:hover {
	filter: brightness(1.05);
	box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3) !important;
}

.local-pos-button:disabled {
	background: #c4b5fd !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
	opacity: 0.72;
}

.local-pos-secondary-button {
	width: 100%;
	margin-top: 12px;
	background: #ffffff !important;
	color: var(--local-pos-accent-strong) !important;
	box-shadow: none !important;
	border: 1px solid var(--local-pos-border) !important;
}

.local-pos-secondary-button:hover {
	background: var(--local-pos-bg) !important;
}

.local-pos-mini-button {
	border: 1px solid var(--local-pos-border) !important;
	background: #ffffff !important;
	border-radius: var(--local-pos-radius) !important;
	padding: 8px 10px !important;
	cursor: pointer !important;
	color: var(--local-pos-text) !important;
	transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease !important;
}

.local-pos-mini-button:disabled,
.local-pos-mini-button-disabled {
	cursor: not-allowed !important;
	opacity: 0.55 !important;
	filter: saturate(0.78);
	pointer-events: none;
	box-shadow: none !important;
}

/* The theme's own button reset forces display:inline-block, which otherwise
   wins over the shared .is-hidden utility below (it never listed this class
   as one of its selectors), so the "Cambiar" button stayed visible even once
   JS added .is-hidden to it. */
.local-pos-mini-button.is-hidden {
	display: none !important;
}

.local-pos-danger {
	border-color: #fecaca !important;
	color: #b91c1c !important;
}

.local-pos-icon-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: var(--local-pos-radius) !important;
	border: 1px solid var(--local-pos-border) !important;
	background: #fff !important;
	color: var(--local-pos-text) !important;
	font-size: 28px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 0 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	text-decoration: none !important;
}

.local-pos-icon-button:hover {
	background: var(--local-pos-accent-soft) !important;
	border-color: var(--local-pos-accent) !important;
}

/* Shared form/search/checkout controls. */
.local-pos-form,
.local-pos-search,
.local-pos-checkout {
	display: grid;
	gap: 12px;
}

.local-pos-search-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: stretch;
}

@media (max-width: 720px) {
	.local-pos-search-row {
		grid-template-columns: 1fr;
	}
}

.local-pos-form label,
.local-pos-checkout label,
.local-pos-search label {
	font-weight: 600;
	font-size: 14px;
}

.local-pos-form input[type="text"],
.local-pos-form input[type="password"],
.local-pos-form input[type="file"],
.local-pos-form select,
.local-pos-form textarea,
.local-pos-search input[type="search"],
.local-pos-checkout select,
.local-pos-checkout input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--local-pos-border) !important;
	border-radius: var(--local-pos-radius) !important;
	background: #ffffff !important;
	color: var(--local-pos-text) !important;
	font-size: 14px;
	box-shadow: none !important;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.local-pos-form input[type="text"]:focus,
.local-pos-form input[type="password"]:focus,
.local-pos-form select:focus,
.local-pos-form textarea:focus,
.local-pos-search input[type="search"]:focus,
.local-pos-checkout select:focus,
.local-pos-checkout input[type="text"]:focus {
	outline: none !important;
	border-color: var(--local-pos-accent) !important;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
}

.local-pos-form select,
.local-pos-checkout select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%) !important;
	background-position: calc(100% - 26px) calc(50% - 3px), calc(100% - 18px) calc(50% - 3px) !important;
	background-size: 8px 8px, 8px 8px !important;
	background-repeat: no-repeat !important;
	padding-right: 52px !important;
}

.local-pos-form textarea {
	resize: vertical;
	min-height: 96px;
}

.local-pos-form input[type="file"] {
	padding: 12px !important;
	background: var(--local-pos-bg) !important;
}

.local-pos-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 400;
}

.local-pos-checkbox-strong {
	font-weight: 700;
}

/* Shared chips. */
.local-pos-chip-bar {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0 10px;
}

.local-pos-chip {
	border: 1px solid var(--local-pos-border) !important;
	background: #ffffff !important;
	color: var(--local-pos-text) !important;
	border-radius: var(--local-pos-radius-full) !important;
	padding: 8px 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

.local-pos-chip.is-active {
	background: var(--local-pos-accent) !important;
	border-color: var(--local-pos-accent) !important;
	color: #ffffff !important;
}

.local-pos-chip-compact {
	padding: 8px 12px !important;
	font-size: 12px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-weight: 600 !important;
}

.local-pos-chip-check {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	display: inline-grid;
	place-items: center;
	background: var(--local-pos-border);
	color: transparent;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
	flex-shrink: 0;
}

.local-pos-chip-compact.is-active {
	background: var(--local-pos-accent-soft) !important;
	border-color: var(--local-pos-accent) !important;
	color: var(--local-pos-accent-strong) !important;
	box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.12);
}

.local-pos-chip-compact.is-active .local-pos-chip-check {
	background: var(--local-pos-accent-strong);
	color: #ffffff;
	transform: scale(1);
}

.local-pos-chip-compact.is-active .local-pos-chip-check::before {
	content: "✓";
}

.local-pos-chip-compact:not(.is-active) .local-pos-chip-check::before {
	content: "";
}

/* Shared notices and status text. */
.local-pos-notice {
	padding: 12px 14px;
	border-radius: var(--local-pos-radius-md);
	margin-top: 14px;
}

.local-pos-notice-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

/* Floating toast notifications: transient, dismissible, stacked top-right. */
.local-pos-toast-region {
	position: fixed;
	top: 96px;
	right: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: none;
}

.local-pos-toast {
	--local-pos-toast-accent: var(--local-pos-accent);
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 340px;
	max-width: 88vw;
	padding: 18px 34px 20px 18px;
	overflow: hidden;
	border-radius: var(--local-pos-radius-lg);
	box-shadow: var(--local-pos-shadow-md);
	background: var(--local-pos-surface);
	font-family: var(--local-pos-font-sans);
	transform: translateX(calc(100% + 24px));
	animation: local-pos-toast-in 0.45s cubic-bezier(0.32, 0.72, 0.24, 1.24) forwards;
}

.local-pos-toast.is-leaving {
	animation: local-pos-toast-out 0.22s ease-in forwards;
}

.local-pos-toast-error {
	--local-pos-toast-accent: #ef4444;
}

.local-pos-toast-warning {
	--local-pos-toast-accent: #f59e0b;
}

.local-pos-toast-success {
	--local-pos-toast-accent: var(--local-pos-success);
}

.local-pos-toast-info {
	--local-pos-toast-accent: var(--local-pos-accent);
}

.local-pos-toast-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--local-pos-toast-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.local-pos-toast-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding-top: 2px;
}

.local-pos-toast-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--local-pos-text);
}

.local-pos-toast-text {
	font-size: 13px;
	line-height: 1.45;
	color: var(--local-pos-muted);
}

.local-pos-toast-close {
	all: unset !important;
	position: absolute !important;
	top: 10px !important;
	right: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: var(--local-pos-radius-sm) !important;
	font-size: 15px !important;
	line-height: 1 !important;
	color: var(--local-pos-muted) !important;
	opacity: 0.65 !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

.local-pos-toast-close:hover {
	opacity: 1 !important;
	background: var(--local-pos-bg) !important;
}

.local-pos-toast-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--local-pos-toast-accent);
	transform: scaleX(1);
	transform-origin: left;
	transition: transform linear;
}

.local-pos-toast-progress.is-active {
	transform: scaleX(0);
}

@keyframes local-pos-toast-in {
	from {
		transform: translateX(calc(100% + 24px));
	}

	to {
		transform: translateX(0);
	}
}

@keyframes local-pos-toast-out {
	from {
		opacity: 1;
		transform: translateX(0);
	}

	to {
		opacity: 0;
		transform: translateX(16px);
	}
}

.local-pos-search-status {
	margin-top: 14px;
	font-size: 14px;
	color: var(--local-pos-muted);
}

/* Confirm dialog: replaces window.confirm() for risky-but-overridable
   actions (ex: logging out with an open register) with our own styling. */
.local-pos-confirm-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.local-pos-confirm-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.58);
	backdrop-filter: blur(8px);
}

.local-pos-confirm-dialog {
	position: relative;
	z-index: 1;
	width: min(420px, 100%);
	padding: 28px;
	border-radius: var(--local-pos-radius-lg);
	background: var(--local-pos-surface);
	box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
	animation: local-pos-confirm-in 0.18s ease-out;
}

.local-pos-confirm-title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--local-pos-text);
}

.local-pos-confirm-message {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--local-pos-muted);
}

.local-pos-confirm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 22px;
}

.local-pos-confirm-actions .local-pos-secondary-button {
	width: auto;
	margin-top: 0;
}

.local-pos-confirm-button-danger {
	background: linear-gradient(135deg, #f87171, #dc2626) !important;
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

.local-pos-confirm-button-danger:hover {
	box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3) !important;
}

@keyframes local-pos-confirm-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Shared list/card components: used by sales history, register/audit lists,
   and cash audit entries. */
.local-pos-history-block {
	margin-top: 24px;
}

.local-pos-history-list {
	display: grid;
	gap: 12px;
}

.local-pos-history-item {
	display: grid;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--local-pos-border);
	border-radius: var(--local-pos-radius-lg);
	background: #ffffff;
	box-shadow: var(--local-pos-shadow);
}

.local-pos-history-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.local-pos-history-meta {
	font-size: 14px;
	color: var(--local-pos-muted);
}

.local-pos-history-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Shared empty-state card look. */
.local-pos-empty {
	padding: 16px;
	border: 1px solid var(--local-pos-border);
	border-radius: var(--local-pos-radius-lg);
	background: #ffffff;
}

.local-pos-empty-compact {
	padding: 10px 12px;
	font-size: 14px;
}

/* Shared product price display: used by sales results, featured products,
   and inventory cards. */
.local-pos-price-stack {
	display: grid;
	gap: 2px;
}

.local-pos-price-compare {
	font-size: 13px;
	color: var(--local-pos-muted);
	text-decoration: line-through;
}

.local-pos-price-current {
	font-size: 18px;
	line-height: 1.1;
}

/* Shared stock health pill: color encodes state so stock scans at a
   glance. Used by the inventory ledger and the sales product tiles. */
.local-pos-stock-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 11px;
	border-radius: var(--local-pos-radius-full);
	border: 1px solid transparent;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.local-pos-stock-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.local-pos-stock-pill.is-ok {
	background: var(--local-pos-success-soft);
	color: var(--local-pos-success-ink);
}

.local-pos-stock-pill.is-low {
	background: var(--local-pos-warn-soft);
	color: var(--local-pos-warn-ink);
}

.local-pos-stock-pill.is-out {
	background: var(--local-pos-danger-soft);
	color: var(--local-pos-danger-ink);
}

.local-pos-stock-pill.is-untracked {
	background: #ffffff;
	color: var(--local-pos-muted);
	border: 1px dashed var(--local-pos-border);
	font-weight: 600;
}

.local-pos-stock-pill.is-untracked::before {
	display: none;
}

/* Shared status badge: order lifecycle states in sales history. */
.local-pos-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--local-pos-radius-full);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--local-pos-bg);
	color: var(--local-pos-muted);
}

.local-pos-status-badge.is-success {
	background: var(--local-pos-success-soft);
	color: var(--local-pos-success-ink);
}

.local-pos-status-badge.is-warn {
	background: var(--local-pos-warn-soft);
	color: var(--local-pos-warn-ink);
}

.local-pos-status-badge.is-danger {
	background: var(--local-pos-danger-soft);
	color: var(--local-pos-danger-ink);
}

.local-pos-placeholder-view {
	display: grid;
	gap: 16px;
}

/* Cross-cutting visibility utility used by several view containers. */
.local-pos-placeholder-view.is-hidden,
.local-pos-topbar.is-hidden,
.local-pos-hero.is-hidden,
.local-pos-dashboard.is-hidden,
.local-pos-panel.is-hidden,
.local-pos-featured-block.is-hidden,
.local-pos-results-block.is-hidden,
.local-pos-active-local-chip.is-hidden,
[data-local-pos-view].is-hidden {
	display: none;
}