/* ==========================================================================
   CUSTOMER SELF-CHECKOUT (/store-by-qr/) - FRESH FLAT DESIGN SYSTEM
   ========================================================================== */

/* 1. Global Setup */
.cpos-customer-page,
body.cpos-customer-page,
body.cpos-customer-page .cpos-public-shell {
	background-color: #ffffff !important;
	background: #ffffff !important;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
	color: #0f172a !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cpos-customer-page h1, 
.cpos-customer-page h2, 
.cpos-customer-page h3, 
.cpos-customer-page h4 {
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
	color: #0f172a !important;
	font-weight: 700 !important;
	margin: 0;
}

/* 2. Public Header */
.cpos-customer-page .cpos-public-header {
	background: #ffffff !important;
	border-bottom: 1px solid #f1f5f9 !important;
	padding: 16px 20px !important;
	box-shadow: none !important;
}

.cpos-customer-page .cpos-public-header-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	max-width: 600px !important;
	margin: 0 auto !important;
}

.cpos-customer-page .cpos-public-header h1 {
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	color: #0f172a !important;
}

.cpos-customer-page .cpos-public-header p {
	font-size: 11px !important;
	color: #64748b !important;
	margin: 2px 0 0 !important;
}

.cpos-customer-page .cpos-public-header a.cpos-button {
	background: #f1f5f9 !important;
	color: #475569 !important;
	border: 1px solid #e2e8f0 !important;
	font-size: 11px !important;
	padding: 6px 14px !important;
	border-radius: 30px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

/* 3. Navigation Tabs Stepper */
.cpos-customer-page #cpos-checkout-tabs-wrapper {
	max-width: 600px !important;
	margin: 24px auto 16px !important;
	padding: 0 16px !important;
	box-sizing: border-box !important;
}

.cpos-customer-page .cpos-checkout-tabs {
	background: #f1f5f9 !important;
	padding: 4px !important;
	border-radius: 12px !important;
	display: flex !important;
	gap: 4px !important;
	border: none !important;
}

.cpos-customer-page .cpos-checkout-tab-btn {
	flex: 1 !important;
	text-align: center !important;
	padding: 8px 12px !important;
	border-radius: 9px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #475569 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
}

.cpos-customer-page .cpos-checkout-tab-btn.is-active {
	background: #ffffff !important;
	color: #4f46e5 !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03) !important;
}

.cpos-customer-page .cpos-checkout-tab-btn span {
	background: #e2e8f0 !important;
	color: #475569 !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 10px !important;
	font-weight: 800 !important;
}

.cpos-customer-page .cpos-checkout-tab-btn.is-active span {
	background: #4f46e5 !important;
	color: #ffffff !important;
}

/* 4. Form Layout & Containers (No card styles) */
.cpos-customer-page .cpos-customer-layout {
	display: grid !important;
	grid-template-columns: 1fr 380px !important;
	gap: 20px !important;
	max-width: 1000px !important;
	margin: 0 auto !important;
}

.cpos-customer-page .cpos-checkout-form-root {
	max-width: 600px !important;
	margin: 0 auto !important;
	padding: 0 16px 120px !important; /* Bottom sticky bar clear */
}

.cpos-customer-page .cpos-panel {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin-bottom: 24px !important;
}

.cpos-customer-page .cpos-panel-heading {
	margin-bottom: 16px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	padding-bottom: 12px !important;
}

.cpos-customer-page .cpos-panel-heading h2 {
	font-size: 18px !important;
	letter-spacing: -0.02em !important;
	color: #0f172a !important;
	font-weight: 800 !important;
}

.cpos-customer-page .cpos-panel-heading p {
	font-size: 12px !important;
	color: #64748b !important;
	margin-top: 4px !important;
}

/* 5. Inputs & Labels */
.cpos-customer-page input:not([type="checkbox"]):not([type="radio"]),
.cpos-customer-page select,
.cpos-customer-page textarea {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	padding: 11px 14px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	color: #0f172a !important;
	transition: all 0.2s ease !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.cpos-customer-page input:not([type="checkbox"]):not([type="radio"]):focus,
.cpos-customer-page select:focus,
.cpos-customer-page textarea:focus {
	border-color: #4f46e5 !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08) !important;
	outline: none !important;
}

/* Explicit native checkbox and radio sizes */
.cpos-customer-page input[type="checkbox"],
.cpos-customer-page input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	accent-color: #4f46e5 !important;
	margin: 0 !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
	box-sizing: border-box !important;
}

/* Standard form labels (vertical) */
.cpos-customer-page label:not(.cpos-product-toggle) {
	font-weight: 700 !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #475569 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

/* Checkbox toggle labels (horizontal inline alignment) */
.cpos-customer-page label.cpos-product-toggle {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	text-transform: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #0f172a !important;
	cursor: pointer !important;
	letter-spacing: normal !important;
	margin-bottom: 8px !important;
}

.cpos-customer-page .cpos-required-star {
	color: #ef4444 !important;
	margin-left: 2px !important;
}

.cpos-customer-page .cpos-field-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
}

.cpos-customer-page .cpos-field-grid .is-wide {
	grid-column: span 2 !important;
}

/* Sleek subheadings */
.cpos-customer-page .cpos-sub-heading {
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: #475569 !important;
	margin-top: 24px !important;
	margin-bottom: 12px !important;
	display: block !important;
	border-bottom: 1px solid #f1f5f9 !important;
	padding-bottom: 8px !important;
}

/* 6. Buttons */
.cpos-customer-page .cpos-button {
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 11px 18px !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	color: #0f172a !important;
}

.cpos-customer-page .cpos-button.is-primary {
	background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 4px 10px rgba(79, 70, 229, 0.15) !important;
}

.cpos-customer-page .cpos-button.is-primary:hover:not(:disabled) {
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 14px rgba(79, 70, 229, 0.25) !important;
}

.cpos-customer-page .cpos-button:disabled {
	background: #cbd5e1 !important;
	color: #94a3b8 !important;
	border-color: #cbd5e1 !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

/* 7. Search Input */
.cpos-customer-page .cpos-search {
	position: relative !important;
}


/* 8. Camera Scanner */
.cpos-customer-page .cpos-scanner-box {
	background: #f8fafc !important;
	border: 1px dashed #cbd5e1 !important;
	border-radius: 12px !important;
	padding: 16px !important;
	margin-bottom: 16px !important;
}

.cpos-customer-page #cpos-qr-reader {
	border: none !important;
	background: #090d16 !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}

/* 9. Scanned Items & Lists */
.cpos-customer-page .cpos-cart-row {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 10px 12px !important;
	display: grid !important;
	grid-template-columns: 44px 1fr auto !important;
	gap: 10px !important;
	align-items: center !important;
	box-shadow: none !important;
	margin-bottom: 8px !important;
}

.cpos-customer-page .cpos-cart-row-img {
	width: 36px !important;
	height: 36px !important;
	border-radius: 8px !important;
	background: #e2e8f0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14px !important;
}

.cpos-customer-page .cpos-cart-row-details h4 {
	font-size: 13px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	color: #0f172a !important;
	line-height: 1.3 !important;
}

.cpos-customer-page .cpos-cart-row-details span {
	font-size: 11.5px !important;
	color: #64748b !important;
	font-weight: 500 !important;
}

.cpos-customer-page .cpos-cart-row button.is-small {
	background: #ffffff !important;
	color: #0f172a !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	padding: 4px 8px !important;
	font-size: 11.5px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

.cpos-customer-page .cpos-cart-row button.is-small:hover {
	background: #f1f5f9 !important;
}

.cpos-customer-page .cpos-cart-row strong {
	font-size: 13px !important;
	color: #0f172a !important;
}

.cpos-customer-page .cpos-total {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-weight: 800 !important;
	font-size: 18px !important;
	color: #0f172a !important;
	border-top: 1px solid #f1f5f9 !important;
	padding-top: 14px !important;
	margin-top: 14px !important;
}

/* 10. Accordion */
.cpos-customer-page .cpos-accordion {
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	overflow: hidden;
	margin-top: 10px !important;
}

.cpos-customer-page .cpos-accordion-toggle {
	background: #f8fafc !important;
	border: none !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 12px 14px !important;
	cursor: pointer !important;
	color: #475569 !important;
}

.cpos-customer-page .cpos-accordion-toggle-title {
	font-size: 12px !important;
	font-weight: 700 !important;
}

.cpos-customer-page .cpos-accordion-content {
	background: #ffffff !important;
	border-top: 1px solid #e2e8f0 !important;
	padding: 12px !important;
}

/* 11. Fulfillment/Payment switches */
.cpos-customer-page .cpos-fulfillment-toggle {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 6px !important;
	background: #f1f5f9 !important;
	padding: 4px !important;
	border-radius: 12px !important;
	border: none !important;
	margin-top: 6px !important;
}

.cpos-customer-page .cpos-fulfillment-toggle-btn {
	background: transparent !important;
	border: none !important;
	padding: 8px 12px !important;
	border-radius: 9px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #475569 !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	box-shadow: none !important;
}

.cpos-customer-page .cpos-fulfillment-toggle-btn.is-active {
	background: #ffffff !important;
	color: #4f46e5 !important;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03) !important;
}

/* 12. Alerts & Notices */
.cpos-customer-page .cpos-alert,
.cpos-customer-page .html5-qrcode-element {
	border-radius: 12px !important;
	padding: 12px 14px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin-bottom: 16px !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.cpos-customer-page .cpos-alert.is-warning {
	background: #fffbeb !important;
	border: 1px solid #fef3c7 !important;
	color: #b45309 !important;
}

.cpos-customer-page .cpos-alert.is-error {
	background: #fef2f2 !important;
	border: 1px solid #fee2e2 !important;
	color: #991b1b !important;
}

/* 13. Sticky Action Bar */
.cpos-customer-page .cpos-mobile-sticky-bar {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
	padding: 12px 20px 24px !important;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05) !important;
	z-index: 1000 !important;
}

.cpos-customer-page .cpos-mobile-sticky-bar-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	max-width: 600px !important;
	margin: 0 auto !important;
}

.cpos-customer-page .cpos-mobile-sticky-bar-info {
	display: flex !important;
	flex-direction: column !important;
}

.cpos-customer-page .cpos-mobile-sticky-bar-qty {
	font-size: 10.5px !important;
	font-weight: 800 !important;
	color: #64748b !important;
	text-transform: uppercase !important;
}

.cpos-customer-page .cpos-mobile-sticky-bar-total {
	font-size: 20px !important;
	letter-spacing: -0.03em !important;
	color: #0f172a !important;
	font-weight: 800 !important;
}

/* 14. Responsive Rules */
@media (max-width: 860px) {
	.cpos-customer-page .cpos-customer-layout {
		display: block !important;
		width: 100% !important;
	}

	.cpos-customer-page #cpos-customer-cart {
		display: none !important;
	}
	.cpos-customer-page #cpos-pane-scan,
	.cpos-customer-page #cpos-checkout-left-col .cpos-details-panel {
		padding-bottom: 110px !important;
	}

	.cpos-customer-page .cpos-storefront-intro {
		display: none !important;
	}
	.cpos-customer-page .cpos-public-header {
		padding: 8px 12px !important;
	}
	.cpos-customer-page .cpos-public-header h1 {
		font-size: 14px !important;
	}
	.cpos-customer-page .cpos-public-header p {
		font-size: 10.5px !important;
	}
	.cpos-customer-page .cpos-public-header .cpos-eyebrow {
		display: none !important;
	}

	.cpos-customer-page #cpos-checkout-tabs-wrapper {
		margin: 18px auto 12px !important;
		padding: 0 16px !important;
	}
	.cpos-customer-page .cpos-checkout-tabs {
		padding: 3px !important;
	}
	.cpos-customer-page .cpos-checkout-tab-btn {
		padding: 6px 8px !important;
		font-size: 11.5px !important;
	}

	.cpos-customer-page .cpos-panel {
		padding: 0 !important;
		margin-bottom: 14px !important;
		border-radius: 0 !important;
	}
	.cpos-customer-page .cpos-panel-heading {
		margin-bottom: 10px !important;
	}
	.cpos-customer-page .cpos-panel-heading h2 {
		font-size: 14px !important;
	}
	.cpos-customer-page .cpos-panel-heading p {
		font-size: 10.5px !important;
	}

	.cpos-customer-page .cpos-scanner-box {
		padding: 10px !important;
		margin-bottom: 10px !important;
	}
	.cpos-customer-page .cpos-scanner-box button {
		padding: 6px 12px !important;
		font-size: 11.5px !important;
	}

	.cpos-customer-page .cpos-search input {
		font-size: 12px !important;
	}

	.cpos-customer-page .cpos-field-grid {
		gap: 8px !important;
	}
	.cpos-customer-page .cpos-field-grid label:not(.cpos-product-toggle) {
		font-size: 10.5px !important;
	}
	.cpos-customer-page .cpos-field-grid input:not([type="checkbox"]):not([type="radio"]),
	.cpos-customer-page .cpos-field-grid select,
	.cpos-customer-page .cpos-field-grid textarea {
		padding: 6px 10px !important;
		font-size: 12.5px !important;
		font-family: inherit !important;
	}

	.cpos-customer-page .cpos-cart-row {
		grid-template-columns: 32px 1fr auto !important;
		padding: 6px 8px !important;
		gap: 8px !important;
		border-radius: 8px !important;
	}
	.cpos-customer-page .cpos-cart-row-img {
		width: 28px !important;
		height: 28px !important;
		font-size: 11px !important;
	}
	.cpos-customer-page .cpos-cart-row-details h4 {
		font-size: 12px !important;
	}
	.cpos-customer-page .cpos-cart-row-details span {
		font-size: 10.5px !important;
	}
	.cpos-customer-page .cpos-cart-row button.is-small {
		padding: 2px 4px !important;
		font-size: 10.5px !important;
	}
	.cpos-customer-page .cpos-cart-row strong {
		font-size: 11px !important;
	}
}

@media (min-width: 861px) {
	.cpos-customer-page .cpos-mobile-sticky-bar {
		display: none !important;
	}
	.cpos-customer-page #cpos-mobile-cart-items-container {
		display: none !important;
	}
	.cpos-customer-page #cpos-mobile-checkout-summary {
		display: none !important;
	}
}