/* 11.6.0-solomax.62: right-to-left copy of panel-fixes.css, generated with rtlcss. Do not edit by hand; edit panel-fixes.css and regenerate. */
/* Solomaxhub: customer panel touch-ups (loaded via the plugin's acp_panel_head hook). */
.ux-search button {
	background: #FD7702 !important;
	border-radius: 999px !important;
	color: #1C1410 !important; /* brand ink: white on #FD7702 is only 2.7:1 */
}

.ux-search button:hover { background: #E86A00 !important; }

.ux-logo__mark {
	background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%) !important;
	color: #FFFFFF !important;
}

.ux-logo img { max-height: 34px; width: auto; }

/* Language pill in the panel: light, like the storefront */
.acp-world summary {
	background: #FFFFFF !important;
	color: #1C1410 !important;
	border: 1.5px solid #FFD2A8 !important;
	box-shadow: 0 6px 20px rgba(28, 20, 16, 0.12) !important;
	font-weight: 700;
}

.acp-world-menu {
	background: #FFFFFF !important;
	color: #1C1410 !important;
	border: 1.5px solid #FFD2A8 !important;
}

.acp-world input {
	background: #FFFFFF !important;
	color: #1C1410 !important;
	border: 1.5px solid rgba(28, 20, 16, 0.18) !important;
}

.acp-world-options a,
.acp-world-options button,
.acp-world-options span { color: #1C1410 !important; }

.acp-world-options button:hover,
.acp-world-options button[aria-pressed="true"] {
	background: #FFF1E6 !important;
	color: #C2410C !important;
}

/* Keep the panel's own dark mode dark: only apply the light pill in light mode */
[data-ux-theme="dark"] .acp-world summary,
[data-ux-theme="dark"] .acp-world-menu {
	background: #1F1916 !important;
	color: #F3EDE6 !important;
	border-color: rgba(255, 236, 220, 0.16) !important;
}

/* Same orange as the storefront (the panel otherwise darkens it) */
:root {
	--ux-primary: #FD7702;
	--ux-primary-hover: #E86A00;
	--ux-primary-soft: #FFF1E6;
	--ux-accent: #FD7702;
	--ux-accent-2: #FF9A1F;
	--acp-brand: #FD7702;
	--acp-brand-2: #E86A00;
	--acp-brand-3: #FF9A1F;
	--sf-accent: #FD7702;
	--sf-accent-2: #E86A00;
}

html body.acp-ux .ux-btn--primary,
html body.acp-ux .ux-home-search button {
	background: #FD7702 !important;
	border-color: #FD7702 !important;
	color: #1C1410 !important; /* brand ink: 6.7:1 on #FD7702 (white was 2.7:1) */
	font-weight: 800;
}

html body.acp-ux .ux-btn--primary:hover,
html body.acp-ux .ux-home-search button:hover {
	background: #E86A00 !important;
	border-color: #E86A00 !important;
}

/* ==================================================================
 * Same brand as the storefront: warm background, Inter, orange edges
 * ================================================================== */
html body.acp-ux:not([data-ux-theme="dark"]) {
	background-color: #FAF7F2 !important;
	background-image: radial-gradient(rgba(194, 65, 12, 0.07) 1px, transparent 1.3px) !important;
	background-size: 24px 24px !important;
}

body.acp-ux,
body.acp-ux button,
body.acp-ux input,
body.acp-ux select,
body.acp-ux textarea {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

body.acp-ux:not([data-ux-theme="dark"]) .ux-card,
body.acp-ux:not([data-ux-theme="dark"]) .ux-sidebar,
body.acp-ux:not([data-ux-theme="dark"]) .ux-panel {
	border-color: #FFE0C2 !important;
}

/* The "Online" pill means nothing to buyers */
body.acp-ux .ux-connection,
body.acp-ux .ux-status-pill,
body.acp-ux [data-ux-online] { display: none !important; }

/* ==================================================================
 * Add funds
 * ================================================================== */
.ux-funds-simple-head h1 {
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
}

.ux-funds-balance-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 14px !important;
	border-radius: 999px !important;
	background: #FFF1E6 !important;
	border: 1px solid #FFD2A8 !important;
}

.ux-funds-balance-chip span {
	font-size: 0.72rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6B5E54 !important;
}

.ux-funds-balance-chip strong { font-size: 1.05rem !important; color: #1C1410 !important; }

.sx-step {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-left: 8px;
	border-radius: 50%;
	background: #FD7702;
	color: #FFFFFF;
	font-size: 0.85rem;
	font-weight: 800;
	vertical-align: 2px;
}

.ux-funding-choices h2,
.ux-funding-payment h2 {
	font-size: 1.1rem !important;
	font-weight: 800 !important;
	margin-bottom: 14px !important;
}

/* Payment method cards */
.ux-funding-methods {
	display: grid !important;
	gap: 10px !important;
}

.ux-funding-method {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 14px !important;
	border-radius: 16px !important;
	background: #FFFFFF !important;
	border: 1.5px solid #EDE3DA !important;
	text-decoration: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ux-funding-method:hover { border-color: #FFC08A !important; transform: translateY(-1px); }

.ux-funding-method.is-active {
	border-color: #FD7702 !important;
	background: #FFF8F1 !important;
	box-shadow: 0 0 0 3px rgba(253, 119, 2, 0.14) !important;
}

.ux-funding-method__icon {
	display: grid !important;
	place-items: center !important;
	flex: 0 0 44px;
	width: 44px !important;
	height: 44px !important;
	border-radius: 12px !important;
	background: #FFF1E6 !important;
	color: #FD7702 !important;
}

.ux-funding-method.is-active .ux-funding-method__icon {
	background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%) !important;
	color: #FFFFFF !important;
}

.ux-funding-method__copy strong { font-weight: 800 !important; color: #1C1410 !important; }
.ux-funding-method__copy small { color: #6B5E54 !important; }

/* Amount: one big naira field */
.sx-topup__amount {
	display: flex !important;
	align-items: center;
	gap: 6px;
	height: 72px;
	padding: 0 20px;
	border-radius: 18px;
	background: #FFFFFF;
	border: 2px solid #EDE3DA;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sx-topup__amount:focus-within {
	border-color: #FD7702;
	box-shadow: 0 0 0 4px rgba(253, 119, 2, 0.14);
}

.sx-topup__amount b {
	font-size: 2rem;
	font-weight: 800;
	color: #FD7702;
}

.sx-topup__amount input {
	flex: 1;
	min-width: 0;
	height: 100% !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	font-size: 2rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
	color: #1C1410 !important;
	-moz-appearance: textfield;
}

.sx-topup__amount input::-webkit-outer-spin-button,
.sx-topup__amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sx-topup__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 18px;
}

.sx-topup__chips button {
	padding: 8px 14px;
	border-radius: 999px;
	background: #FFFFFF;
	border: 1.5px solid #FFD2A8;
	color: #1C1410;
	font-weight: 800;
	font-size: 0.92rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

.sx-topup__chips button:hover { border-color: #FD7702; }

.sx-topup__chips button.is-active {
	background: #FD7702;
	border-color: #FD7702;
	color: #FFFFFF;
}

.sx-topup__summary {
	border-radius: 16px !important;
	background: #FFF8F1 !important;
	border: 1px solid #FFE0C2 !important;
	padding: 6px 16px !important;
}

.sx-topup__summary > div {
	display: flex !important;
	justify-content: space-between !important;
	padding: 10px 0 !important;
	border-bottom: 1px dashed #FFD9B5 !important;
	font-size: 0.95rem;
}

.sx-topup__summary > div:last-child { border-bottom: 0 !important; }

.sx-topup__summary .is-total span { font-weight: 800; color: #1C1410; }

.sx-topup__summary .is-total strong {
	font-size: 1.3rem !important;
	color: #FD7702 !important;
}

.sx-topup__pay {
	height: 56px !important;
	margin-top: 16px !important;
	border-radius: 999px !important;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	box-shadow: 0 12px 26px rgba(253, 119, 2, 0.3) !important;
}

.sx-topup__pay:disabled { opacity: 0.55; box-shadow: none !important; cursor: not-allowed; }

.sx-topup__trust {
	display: grid;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.86rem;
	color: #6B5E54;
}

.sx-topup__trust li { display: flex; align-items: center; gap: 8px; }
.sx-topup__trust svg { color: #16A34A; flex-shrink: 0; }

/* Dark mode for the new Add funds pieces */
[data-ux-theme="dark"] .ux-funding-method,
[data-ux-theme="dark"] .sx-topup__amount,
[data-ux-theme="dark"] .sx-topup__chips button { background: #1F1916 !important; border-color: rgba(255, 236, 220, 0.14) !important; color: #F3EDE6 !important; }
[data-ux-theme="dark"] .sx-topup__amount input { color: #F3EDE6 !important; }
[data-ux-theme="dark"] .sx-topup__summary { background: #2A1E16 !important; border-color: rgba(253, 119, 2, 0.28) !important; }
[data-ux-theme="dark"] .ux-funding-method__copy strong,
[data-ux-theme="dark"] .sx-topup__summary .is-total span { color: #F3EDE6 !important; }
[data-ux-theme="dark"] .ux-funds-balance-chip { background: #2A1E16 !important; border-color: rgba(253, 119, 2, 0.28) !important; }
[data-ux-theme="dark"] .ux-funds-balance-chip strong { color: #F3EDE6 !important; }

/* ==================================================================
 * Phones: no floating language pill over the content; tidy head
 * ================================================================== */
@media (max-width: 900px) {
	.ux-funds-simple-head__actions { display: flex !important; flex-wrap: wrap; gap: 8px; }
	.sx-topup__amount { height: 64px; }
	.sx-topup__amount b,
	.sx-topup__amount input { font-size: 1.7rem !important; }
}

/* Payment method column: warm, not grey */
body.acp-ux:not([data-ux-theme="dark"]) .ux-funding-choices {
	background: #FFF8F1 !important;
	border-radius: 16px !important;
}

/* ==================================================================
 * Softer, warmer text (less glare) and textured surfaces
 * ================================================================== */
body.acp-ux:not([data-ux-theme="dark"]) {
	color: #3F352E !important;
	--ux-text: #2B211B;
	--ux-muted: #6B5E54;
	--ux-border: #F1E4D8;
}

body.acp-ux:not([data-ux-theme="dark"]) h1,
body.acp-ux:not([data-ux-theme="dark"]) h2,
body.acp-ux:not([data-ux-theme="dark"]) h3,
body.acp-ux:not([data-ux-theme="dark"]) strong {
	color: #2B211B !important;
}

body.acp-ux:not([data-ux-theme="dark"]) .ux-card,
body.acp-ux:not([data-ux-theme="dark"]) .ux-funding-main,
body.acp-ux:not([data-ux-theme="dark"]) section.ux-card {
	background-color: #FFFCF8 !important;
	background-image:
		radial-gradient(80% 60% at 100% 0%, rgba(253, 119, 2, 0.05), transparent 70%),
		radial-gradient(rgba(194, 65, 12, 0.045) 1px, transparent 1.3px) !important;
	background-size: 100% 100%, 20px 20px !important;
	border: 1px solid #F3E2D2 !important;
	box-shadow: 0 8px 24px rgba(120, 60, 20, 0.05) !important;
}

/* Top bar */
body.acp-ux:not([data-ux-theme="dark"]) .ux-topbar,
body.acp-ux:not([data-ux-theme="dark"]) header.ux-top {
	background: rgba(255, 252, 248, 0.92) !important;
	border-bottom: 1px solid #F3E2D2 !important;
	backdrop-filter: blur(10px);
}

/* ==================================================================
 * Sidebar: profile card + app-style menu
 * ================================================================== */
body.acp-ux:not([data-ux-theme="dark"]) .ux-side {
	background-color: #FFFAF4 !important;
	background-image: radial-gradient(rgba(194, 65, 12, 0.05) 1px, transparent 1.3px) !important;
	background-size: 20px 20px !important;
	border: 1px solid #F3E2D2 !important;
	border-radius: 20px !important;
	box-shadow: 0 8px 24px rgba(120, 60, 20, 0.05) !important;
	padding: 14px !important;
}

.ux-sideprofile {
	margin-bottom: 14px !important;
	padding: 14px !important;
	border-radius: 16px !important;
	background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%) !important;
	border: 0 !important;
	box-shadow: 0 10px 22px rgba(253, 119, 2, 0.25);
}

.ux-sideprofile__head {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.ux-sideprofile__avatar {
	flex: 0 0 46px;
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	overflow: hidden;
	display: grid !important;
	place-items: center !important;
	background: rgba(255, 255, 255, 0.25) !important;
	border: 2px solid rgba(255, 255, 255, 0.8) !important;
	color: #FFFFFF !important;
	font-weight: 800;
	font-size: 1.1rem;
}

.ux-sideprofile__avatar img { width: 100%; height: 100%; object-fit: cover; }

.ux-sideprofile strong {
	display: block;
	color: #FFFFFF !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ux-sideprofile a {
	display: inline-block;
	margin-top: 2px;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	color: #FFFFFF !important;
	font-size: 0.75rem !important;
	font-weight: 700;
	text-decoration: none !important;
}

.ux-nav-label {
	display: block;
	margin: 6px 8px 8px !important;
	font-size: 0.7rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9A8E84 !important;
}

body.acp-ux .ux-side > a {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 2px 0 !important;
	padding: 8px 10px !important;
	border-radius: 12px !important;
	border: 0 !important;
	color: #3F352E !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}

body.acp-ux .ux-side > a::before { display: none !important; }

.sx-nav-ico {
	display: grid;
	place-items: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #FFF1E6;
	color: #FD7702;
}

.sx-nav-ico svg { width: 19px !important; height: 19px !important; }

body.acp-ux .ux-side > a:hover { background: #FFF4EA !important; }

body.acp-ux .ux-side > a.is-active {
	background: #FFFFFF !important;
	color: #C2410C !important;
	box-shadow: 0 4px 14px rgba(253, 119, 2, 0.14), inset -3px 0 0 #FD7702 !important;
}

body.acp-ux .ux-side > a.is-active .sx-nav-ico {
	background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%);
	color: #FFFFFF;
}

body.acp-ux .ux-side > a.ux-side__break,
body.acp-ux .ux-side > a.ux-side__store { margin-top: 12px !important; }

body.acp-ux .ux-side > a.ux-side__out,
body.acp-ux .ux-side > a.ux-side__out .sx-nav-ico { color: #B91C1C !important; }
body.acp-ux .ux-side > a.ux-side__out .sx-nav-ico { background: #FEF2F2; }

/* Dark mode versions */
body.acp-ux[data-ux-theme="dark"] .ux-side,
[data-ux-theme="dark"] .ux-side { background: #1F1916 !important; border-color: rgba(255, 236, 220, 0.10) !important; }
body.acp-ux[data-ux-theme="dark"] .ux-side > a { color: #D8CEC4 !important; }
[data-ux-theme="dark"] .sx-nav-ico { background: rgba(253, 119, 2, 0.14); }
body.acp-ux[data-ux-theme="dark"] .ux-side > a.is-active { background: #2A221D !important; color: #FF9A4D !important; }
body.acp-ux[data-ux-theme="dark"] .ux-side > a:hover { background: #2A221D !important; }

.ux-sideprofile__head > div {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	min-width: 0;
}

/* Wallet balance box on Home: warm instead of grey */
body.acp-ux:not([data-ux-theme="dark"]) .ux-wallet,
body.acp-ux:not([data-ux-theme="dark"]) .ux-home-wallet,
body.acp-ux:not([data-ux-theme="dark"]) [class*="wallet-card"],
body.acp-ux:not([data-ux-theme="dark"]) [class*="balance-card"] {
	background: linear-gradient(-160deg, #FFFFFF 0%, #FFF1E6 100%) !important;
	border: 1px solid #FFD2A8 !important;
}

html body.acp-ux .ux-sideprofile strong { color: #FFFFFF !important; }

html body.acp-ux .ux-sideprofile a {
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.6 !important;
	padding: 1px 10px !important;
}

body.acp-ux:not([data-ux-theme="dark"]) .ux-home-start {
	background-color: #FFFCF8 !important;
	background-image:
		radial-gradient(70% 90% at 0% 0%, rgba(253, 119, 2, 0.07), transparent 70%),
		radial-gradient(rgba(194, 65, 12, 0.045) 1px, transparent 1.3px) !important;
	background-size: 100% 100%, 20px 20px !important;
	border: 1px solid #F3E2D2 !important;
}

body.acp-ux:not([data-ux-theme="dark"]) input[type="search"],
body.acp-ux:not([data-ux-theme="dark"]) input[type="text"],
body.acp-ux:not([data-ux-theme="dark"]) input[type="email"],
body.acp-ux:not([data-ux-theme="dark"]) select,
body.acp-ux:not([data-ux-theme="dark"]) textarea {
	background-color: #FFFFFF !important;
	border-color: #EADBCD !important;
	border-radius: 12px !important;
}

body.acp-ux:not([data-ux-theme="dark"]) input:focus,
body.acp-ux:not([data-ux-theme="dark"]) select:focus,
body.acp-ux:not([data-ux-theme="dark"]) textarea:focus {
	border-color: #FD7702 !important;
	box-shadow: 0 0 0 4px rgba(253, 119, 2, 0.12) !important;
	outline: none !important;
}

/* ==================================================================
 * DARK MODE (customer area) - same warm night as the storefront
 * ================================================================== */
body.acp-ux[data-ux-theme="dark"] {
	background-color: #16120F !important;
	background-image: radial-gradient(rgba(255, 154, 31, 0.07) 1px, transparent 1.3px) !important;
	background-size: 24px 24px !important;
	color: #D8CEC4 !important;
	--ux-text: #F3EDE6;
	--ux-muted: #B3A69A;
	--ux-line: rgba(255, 236, 220, 0.10);
	--ux-border: rgba(255, 236, 220, 0.10);
}

body.acp-ux[data-ux-theme="dark"] h1,
body.acp-ux[data-ux-theme="dark"] h2,
body.acp-ux[data-ux-theme="dark"] h3,
body.acp-ux[data-ux-theme="dark"] strong { color: #F3EDE6 !important; }

body.acp-ux[data-ux-theme="dark"] p,
body.acp-ux[data-ux-theme="dark"] small,
body.acp-ux[data-ux-theme="dark"] .ux-muted { color: #B3A69A !important; }

body.acp-ux[data-ux-theme="dark"] .ux-top {
	background: rgba(22, 18, 15, 0.92) !important;
	border-bottom: 1px solid rgba(255, 236, 220, 0.10) !important;
	backdrop-filter: blur(10px);
}

body.acp-ux[data-ux-theme="dark"] .ux-card,
body.acp-ux[data-ux-theme="dark"] .ux-home-start,
body.acp-ux[data-ux-theme="dark"] .ux-funding-main,
body.acp-ux[data-ux-theme="dark"] section.ux-card {
	background-color: #1F1916 !important;
	background-image:
		radial-gradient(80% 60% at 100% 0%, rgba(253, 119, 2, 0.07), transparent 70%),
		radial-gradient(rgba(255, 154, 31, 0.05) 1px, transparent 1.3px) !important;
	background-size: 100% 100%, 20px 20px !important;
	border: 1px solid rgba(255, 236, 220, 0.10) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-home-wallet {
	background: linear-gradient(-160deg, #2A1E16 0%, #3A2415 100%) !important;
	border: 1px solid rgba(253, 119, 2, 0.30) !important;
	color: #F3EDE6 !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-side {
	background-color: #1F1916 !important;
	background-image: radial-gradient(rgba(255, 154, 31, 0.05) 1px, transparent 1.3px) !important;
	border: 1px solid rgba(255, 236, 220, 0.10) !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-side > a { color: #D8CEC4 !important; }
body.acp-ux[data-ux-theme="dark"] .ux-side > a:hover { background: #2A221D !important; }
body.acp-ux[data-ux-theme="dark"] .ux-side > a.is-active {
	background: #2A221D !important;
	color: #FF9A4D !important;
	box-shadow: inset -3px 0 0 #FD7702 !important;
}
body.acp-ux[data-ux-theme="dark"] .sx-nav-ico { background: rgba(253, 119, 2, 0.14); color: #FF9A4D; }
body.acp-ux[data-ux-theme="dark"] .ux-side > a.is-active .sx-nav-ico { color: #FFFFFF; }
body.acp-ux[data-ux-theme="dark"] .ux-nav-label { color: #9C8F83 !important; }

body.acp-ux[data-ux-theme="dark"] input,
body.acp-ux[data-ux-theme="dark"] select,
body.acp-ux[data-ux-theme="dark"] textarea {
	background-color: #2A221D !important;
	border-color: rgba(255, 236, 220, 0.14) !important;
	color: #F3EDE6 !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-btn--ghost,
body.acp-ux[data-ux-theme="dark"] .ux-theme,
body.acp-ux[data-ux-theme="dark"] .ux-balance,
body.acp-ux[data-ux-theme="dark"] .ux-accountpill,
body.acp-ux[data-ux-theme="dark"] .ux-burger {
	background: #1F1916 !important;
	border-color: rgba(255, 236, 220, 0.14) !important;
	color: #F3EDE6 !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-funding-choices { background: #2A1E16 !important; border-radius: 16px !important; }

/* Logo is plain white in dark mode, like the storefront */
body.acp-ux[data-ux-theme="dark"] .ux-logo img { filter: brightness(0) invert(1) !important; }
body.acp-ux[data-ux-theme="dark"] .ux-logo,
body.acp-ux[data-ux-theme="dark"] .ux-logo span:not(.ux-logo__mark) { color: #FFFFFF !important; }

/* Store is a first-class destination in the customer panel. Keep it in the
 * top bar as well as the drawer so a phone user can always leave the panel. */
body.acp-ux .ux-top__store {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	padding: 0 11px;
	border: 1px solid #FFD2A8;
	border-radius: 10px;
	color: #C2410C;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}
body.acp-ux .ux-top__store svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.acp-ux .ux-top__store:hover,
body.acp-ux .ux-top__store:focus-visible { color: #A9320A; border-color: #FD7702; outline: 3px solid rgba(253,119,2,.22); outline-offset: 2px; }
body.acp-ux[data-ux-theme="dark"] .ux-top__store { color: #FF9A4D; border-color: rgba(253,119,2,.42); }

/* The drawer remains useful, but identity and balance are visible before it is
 * opened on phones. */
.ux-mobile-profile { display: none; }

/* Semantic order stepper: the markup is an ordered list, while these rules
 * retain the compact visual treatment of the previous strip. */
body.acp-ux .ux-order__steps { list-style: none; }
body.acp-ux .ux-order__steps > li {
	position: relative;
	display: grid;
	grid-template-rows: 10px auto;
	gap: 5px;
	align-items: start;
	min-width: 0;
	color: var(--ux-muted);
	font-size: 9px;
	font-weight: 600;
	line-height: 1.25;
}
body.acp-ux .ux-order__steps > li:nth-child(2) { justify-items: center; text-align: center; }
body.acp-ux .ux-order__steps > li:nth-child(3) { justify-items: end; text-align: left; }
body.acp-ux .ux-order__steps > li:not(:last-child)::after { content: ""; position: absolute; right: 9px; top: 4px; width: calc(100% - 5px); height: 1px; background: var(--ux-line-strong); }
body.acp-ux .ux-order__steps > li > i { grid-row: 1; }

@media (max-width: 899.98px) {
	body.acp-ux .ux-mobile-profile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: min(calc(100% - 20px), var(--ux-max));
		margin: 10px auto 0;
		padding: 10px 12px;
		border: 1px solid #FFE0C2;
		border-radius: 14px;
		background: #FFFCF8;
	}
	body.acp-ux[data-ux-theme="dark"] .ux-mobile-profile { border-color: rgba(255,236,220,.14); background: #1F1916; }
	body.acp-ux .ux-mobile-profile__identity { display: flex; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; }
	body.acp-ux .ux-mobile-profile__avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; overflow: hidden; border-radius: 50%; background: #FD7702; color: #fff; font-weight: 800; }
	body.acp-ux .ux-mobile-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
	body.acp-ux .ux-mobile-profile__name { display: grid; min-width: 0; }
	body.acp-ux .ux-mobile-profile__name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	body.acp-ux .ux-mobile-profile__name small,
	body.acp-ux .ux-mobile-profile__balance small { color: var(--ux-muted); font-size: 11px; }
	body.acp-ux .ux-mobile-profile__balance { display: grid; flex: 0 0 auto; text-align: left; color: inherit; text-decoration: none; }
	body.acp-ux .ux-mobile-profile__balance strong { color: #C2410C; font-size: 15px; }
	body.acp-ux[data-ux-theme="dark"] .ux-mobile-profile__balance strong { color: #FF9A4D; }
	body.acp-ux .ux-order__steps > li { font-size: 10px; }
}

@media (max-width: 480px) {
	body.acp-ux .ux-top__store { min-width: 42px; width: 42px; padding: 0; }
	body.acp-ux .ux-top__store span { display: none; }
	body.acp-ux .ux-top__store svg { width: 19px; height: 19px; }
	body.acp-ux .ux-mobile-profile { width: calc(100% - 16px); }
}

@media (max-width: 560px) {
	body.acp-ux .ux-order__steps { grid-template-columns: 1fr !important; gap: 10px; }
	body.acp-ux .ux-order__steps > li,
	body.acp-ux .ux-order__steps > li:nth-child(2),
	body.acp-ux .ux-order__steps > li:nth-child(3) { display: flex; align-items: center; justify-items: start; gap: 8px; text-align: right; }
	body.acp-ux .ux-order__steps > li:not(:last-child)::after { display: none; }
}

/* Rows inside lists (recent orders, popular) */
body.acp-ux[data-ux-theme="dark"] .ux-list > *,
body.acp-ux[data-ux-theme="dark"] [class*="ux-row"] { border-color: rgba(255, 236, 220, 0.08) !important; }

/* ==================================================================
 * PHONES: premium app layout
 *  - menu button on the right, menu slides in from the right
 *  - bottom tab bar with a raised "Add money" button
 * ================================================================== */
.sx-tabbar { display: none; }

@media (max-width: 899.98px) {
	/* Top bar: logo left, controls right, menu button last */
	body.acp-ux .ux-top {
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		padding: 10px 14px !important;
		min-height: 60px !important;
		background: rgba(255, 252, 248, 0.94) !important;
		border-bottom: 1px solid #F3E2D2 !important;
		backdrop-filter: blur(10px);
	}

	body.acp-ux .ux-top .ux-burger { order: 20; margin-right: 4px !important; }
	body.acp-ux .ux-top .ux-logo { order: 1; }
	body.acp-ux .ux-top .ux-top__page { display: none !important; }
	body.acp-ux .ux-top .ux-top__spacer { order: 2; flex: 1; }
	body.acp-ux .ux-top .ux-theme { order: 10; }
	body.acp-ux .ux-top .ux-balance { order: 5; }
	body.acp-ux .ux-top .ux-accountpill,
	body.acp-ux .ux-top .ux-fx { display: none !important; }

	body.acp-ux .ux-top .ux-logo img { max-height: 30px !important; width: auto !important; }

	body.acp-ux .ux-burger,
	body.acp-ux .ux-theme {
		width: 42px !important;
		height: 42px !important;
		padding: 0 !important;
		border-radius: 50% !important;
		display: inline-grid !important;
		place-items: center !important;
		background: #FFFFFF !important;
		border: 1.5px solid #FFD2A8 !important;
	}

	body.acp-ux .ux-theme [data-ux-theme-label] { display: none !important; }

	body.acp-ux .ux-balance {
		height: 42px !important;
		padding: 0 12px !important;
		border-radius: 999px !important;
		background: #FFF1E6 !important;
		border: 1px solid #FFD2A8 !important;
	}

	/* Side menu slides in from the RIGHT */
	body.acp-ux .ux-side {
		right: auto !important;
		left: 0 !important;
		transform: translateX(-105%) !important;
		border-radius: 0 22px 22px 0 !important;
		box-shadow: 20px 0 50px rgba(28, 20, 16, 0.18) !important;
		padding: 76px 14px 110px !important;
	}

	body.acp-ux.ux-nav-open .ux-side { transform: none !important; }

	/* Page content: comfortable spacing, room for the tab bar */
	body.acp-ux .ux-main,
	body.acp-ux main#uxMain {
		padding: 14px 14px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
	}

	body.acp-ux .ux-card,
	body.acp-ux .ux-home-start {
		border-radius: 20px !important;
		padding: 18px !important;
		margin-bottom: 14px !important;
	}

	body.acp-ux .ux-home-start h1,
	body.acp-ux .ux-funds-simple-head h1 { font-size: 1.6rem !important; }

	/* Bottom tab bar */
	.sx-tabbar {
		position: fixed;
		right: 10px;
		left: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		z-index: 8990;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-items: end;
		padding: 8px 6px;
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.96);
		border: 1px solid #F3E2D2;
		box-shadow: 0 14px 36px rgba(28, 20, 16, 0.16);
		backdrop-filter: blur(12px);
	}

	/* 11.6.0-solomax.56: while the menu is open the tab bar sits under the dimming layer (same level before, so it
	 * stayed bright on top); a tap on it now closes the menu like any tap outside it. */
	body.acp-ux.ux-nav-open .sx-tabbar { z-index: 8989; }

	.sx-tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 4px 0;
		color: #8A7D72;
		font-size: 0.68rem;
		font-weight: 700;
		text-decoration: none !important;
	}

	.sx-tabbar__ico {
		display: grid;
		place-items: center;
		width: 40px;
		height: 32px;
		border-radius: 12px;
		transition: background 0.2s ease, color 0.2s ease;
	}

	.sx-tabbar__item.is-active { color: #C2410C; }
	.sx-tabbar__item.is-active .sx-tabbar__ico { background: #FFF1E6; color: #FD7702; }

	/* Raised centre button */
	.sx-tabbar__item--main .sx-tabbar__ico {
		width: 54px;
		height: 54px;
		margin-top: -26px;
		border-radius: 50%;
		background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%) !important;
		color: #FFFFFF !important;
		box-shadow: 0 10px 22px rgba(253, 119, 2, 0.4), 0 0 0 5px #FFFFFF;
	}

	.sx-tabbar__item--main { color: #C2410C; }

	/* Dark mode for the phone pieces */
	body.acp-ux[data-ux-theme="dark"] .ux-top { background: rgba(22, 18, 15, 0.94) !important; }
	body.acp-ux[data-ux-theme="dark"] .ux-balance { background: #2A1E16 !important; border-color: rgba(253, 119, 2, 0.3) !important; }
	body.acp-ux[data-ux-theme="dark"] .sx-tabbar { background: rgba(31, 25, 22, 0.96); border-color: rgba(255, 236, 220, 0.10); }
	body.acp-ux[data-ux-theme="dark"] .sx-tabbar__item { color: #9C8F83; }
	body.acp-ux[data-ux-theme="dark"] .sx-tabbar__item.is-active { color: #FF9A4D; }
	body.acp-ux[data-ux-theme="dark"] .sx-tabbar__item.is-active .sx-tabbar__ico { background: rgba(253, 119, 2, 0.16); color: #FF9A4D; }
	body.acp-ux[data-ux-theme="dark"] .sx-tabbar__item--main .sx-tabbar__ico { box-shadow: 0 10px 22px rgba(253, 119, 2, 0.4), 0 0 0 5px #1F1916; }
	body.acp-ux[data-ux-theme="dark"] .ux-side { box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5) !important; }
}

/* Language chevron (panel) */
.acp-world summary { display: inline-flex !important; align-items: center; gap: 8px; }
.acp-world .sx-chev {
	width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-top: 2px solid currentColor;
	transform: translateY(2px) rotate(-45deg);
	transition: transform 0.2s ease;
}
.acp-world-picker[open] .sx-chev { transform: translateY(-2px) rotate(-225deg); }

/* On phones the language picker sits at the bottom of the side menu */
@media (max-width: 899.98px) {
	body.acp-ux .sx-side-lang .acp-world {
		display: block !important;
		position: static !important;
		margin-top: 12px;
	}
	body.acp-ux .sx-side-lang .acp-world summary { width: 100%; justify-content: space-between; border-radius: 14px !important; }
	body.acp-ux .sx-side-lang .acp-world .sx-chev { transform: translateY(-2px) rotate(-225deg); }
	body.acp-ux .sx-side-lang .acp-world-picker[open] .sx-chev { transform: translateY(2px) rotate(-45deg); }
	body.acp-ux .sx-side-lang .acp-world-menu { position: static !important; width: auto !important; margin-top: 8px; box-shadow: none !important; }
	body.acp-ux > .acp-world { display: none !important; }
}

body.acp-ux[data-ux-theme="dark"] .ux-side > a.ux-side__out .sx-nav-ico { background: rgba(220, 38, 38, 0.16) !important; color: #FCA5A5 !important; }
body.acp-ux[data-ux-theme="dark"] .ux-side > a.ux-side__out { color: #FCA5A5 !important; }

@media (max-width: 899.98px) {
	/* The menu opens under the top bar, so the menu button stays visible to close it */
	body.acp-ux .ux-side {
		top: 60px !important;
		height: calc(100dvh - 60px) !important;
		padding: 14px 14px 120px !important;
		border-radius: 0 22px 0 0 !important;
	}
	body.acp-ux .ux-scrim { top: 60px !important; }
}

body.acp-ux[data-ux-theme="dark"] .ux-burger span { background: #F3EDE6 !important; }
body.acp-ux .ux-burger span { border-radius: 2px; }

/* Add money: the amount field and summary rows follow light/dark mode.
   (The plugin paints its own white rows and navy inputs; these win.) */
html body.acp-ux .sx-topup__amount input[type="number"],
html body.acp-ux[data-ux-theme="dark"] .sx-topup__amount input[type="number"] {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body.acp-ux .sx-topup__summary > div,
html body.acp-ux .sx-topup__summary > div.is-total {
	background: transparent !important;
	background-color: transparent !important;
	border-right: 0 !important;
	border-left: 0 !important;
	border-top: 0 !important;
}

html body.acp-ux[data-ux-theme="dark"] .sx-topup__amount {
	background: #1F1916 !important;
	border-color: rgba(255, 236, 220, 0.16) !important;
}

html body.acp-ux[data-ux-theme="dark"] .sx-topup__amount:focus-within {
	border-color: #FD7702 !important;
	box-shadow: 0 0 0 4px rgba(253, 119, 2, 0.18) !important;
}

html body.acp-ux[data-ux-theme="dark"] .sx-topup__amount input { color: #F3EDE6 !important; }

html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary {
	background: #2A1E16 !important;
	border-color: rgba(253, 119, 2, 0.28) !important;
}

html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary > div {
	border-bottom-color: rgba(253, 119, 2, 0.22) !important;
	color: #D8CEC4 !important;
}

html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary > div span { color: #B3A69A !important; }
html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary > div strong { color: #F3EDE6 !important; }
html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary .is-total span { color: #F3EDE6 !important; }
html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary .is-total strong { color: #FF9A4D !important; }

html body.acp-ux[data-ux-theme="dark"] .sx-topup__chips button:not(.is-active) {
	background: #1F1916 !important;
	border-color: rgba(253, 119, 2, 0.3) !important;
	color: #F3EDE6 !important;
}

html body.acp-ux[data-ux-theme="dark"] .sx-topup__trust { color: #B3A69A !important; }

html body.acp-ux:not([data-ux-theme="dark"]) .sx-topup__summary .is-total strong { color: #FD7702 !important; }

/* Language menu in dark mode: dark panel, light readable options */
html body.acp-ux[data-ux-theme="dark"] .acp-world summary,
html body.acp-ux[data-ux-theme="dark"] .acp-world-menu {
	background: #1F1916 !important;
	border-color: rgba(253, 119, 2, 0.3) !important;
	color: #F3EDE6 !important;
}

html body.acp-ux[data-ux-theme="dark"] .acp-world-menu,
html body.acp-ux[data-ux-theme="dark"] .acp-world-menu label,
html body.acp-ux[data-ux-theme="dark"] .acp-world-menu p,
html body.acp-ux[data-ux-theme="dark"] .acp-world small,
html body.acp-ux[data-ux-theme="dark"] .acp-world-menu > a {
	color: #D8CEC4 !important;
}

html body.acp-ux[data-ux-theme="dark"] .acp-world input {
	background: #2A221D !important;
	border-color: rgba(255, 236, 220, 0.18) !important;
	color: #F3EDE6 !important;
}

html body.acp-ux[data-ux-theme="dark"] .acp-world input::placeholder { color: #9C8F83 !important; }

html body.acp-ux[data-ux-theme="dark"] .acp-world-options a,
html body.acp-ux[data-ux-theme="dark"] .acp-world-options button,
html body.acp-ux[data-ux-theme="dark"] .acp-world-options span {
	color: #F3EDE6 !important;
	background: transparent !important;
}

html body.acp-ux[data-ux-theme="dark"] .acp-world-options a:hover,
html body.acp-ux[data-ux-theme="dark"] .acp-world-options button:hover,
html body.acp-ux[data-ux-theme="dark"] .acp-world-options button[aria-pressed="true"],
html body.acp-ux[data-ux-theme="dark"] .acp-world-options button[aria-pressed="true"] span {
	background: rgba(253, 119, 2, 0.16) !important;
	color: #FF9A4D !important;
}

/* ==================================================================
 * Tab-by-tab polish
 * ================================================================== */

/* Wallet pill in the top bar: wallet icon, amount, orange + */
body.acp-ux .ux-balance {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	height: 44px !important;
	padding: 0 8px 0 6px !important;
	border-radius: 999px !important;
	background: #FFF1E6 !important;
	border: 1px solid #FFD2A8 !important;
	text-decoration: none !important;
}

.sx-bal-ico {
	display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: #FFFFFF; color: #FD7702;
}

.sx-bal-copy { display: flex; flex-direction: column; line-height: 1.1; }
.sx-bal-copy small { font-size: 0.62rem !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9A8E84 !important; }
.sx-bal-copy strong { font-size: 0.95rem !important; font-weight: 800 !important; }

body.acp-ux .ux-balance i.sx-bal-add {
	display: grid !important; place-items: center !important;
	width: 30px !important; height: 30px !important; border-radius: 50% !important;
	background: #FD7702 !important; color: #FFFFFF !important;
	font-style: normal;
}

body.acp-ux[data-ux-theme="dark"] .ux-balance { background: #2A1E16 !important; border-color: rgba(253, 119, 2, 0.3) !important; }
body.acp-ux[data-ux-theme="dark"] .sx-bal-ico { background: #1F1916; }

/* "Show all" picker header */
.ux-servicepicker__icon {
	display: grid !important; place-items: center !important;
	width: 42px !important; height: 42px !important; border-radius: 12px !important;
	background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%) !important;
	color: #FFFFFF !important;
}

.ux-servicepicker__hint {
	display: inline-flex !important; align-items: center !important; gap: 6px !important;
	padding: 6px 12px !important; border-radius: 999px !important;
	background: #FFF1E6 !important; border: 1px solid #FFD2A8 !important;
	color: #C2410C !important; font-weight: 800 !important; font-size: 0.8rem !important;
}

.ux-servicepicker__chev { display: inline-grid; transition: transform 0.2s ease; }
.ux-servicepicker[open] .ux-servicepicker__chev { transform: rotate(-180deg); }

body.acp-ux[data-ux-theme="dark"] .ux-servicepicker__hint { background: rgba(253, 119, 2, 0.14) !important; border-color: rgba(253, 119, 2, 0.3) !important; color: #FF9A4D !important; }

/* "All" chip: same size and style as the brand tiles */
.sx-allchip {
	display: grid !important; place-items: center !important;
	width: 100%; height: 100%;
	border-radius: inherit;
	background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%);
	color: #FFFFFF;
}

/* Step badge "1" */
.ux-orderworkspace__step {
	display: grid !important; place-items: center !important;
	width: 34px !important; height: 34px !important; border-radius: 50% !important;
	background: #FD7702 !important; color: #FFFFFF !important;
	font-weight: 800 !important; font-size: 0.95rem !important;
}

/* Steps strip on Buy a product */
body.acp-ux:not([data-ux-theme="dark"]) .ux-steps > *,
body.acp-ux:not([data-ux-theme="dark"]) [class*="ux-neworder"] [class*="steps"] > * {
	background: #FFF8F1 !important;
	border-color: #FFE0C2 !important;
}

/* Search box: one rounded field with an orange "Search" button */
body.acp-ux .ux-search {
	display: flex !important; align-items: center !important;
	gap: 6px !important;
	padding: 5px 16px 5px 5px !important;
	border-radius: 999px !important;
	background: #FFFFFF !important;
	border: 1.5px solid #EADBCD !important;
}

body.acp-ux .ux-search:focus-within { border-color: #FD7702 !important; box-shadow: 0 0 0 4px rgba(253, 119, 2, 0.12) !important; }

body.acp-ux .ux-search input[type="search"] {
	flex: 1; min-width: 0;
	border: 0 !important; background: transparent !important; box-shadow: none !important;
	height: 42px !important; padding: 0 !important;
}

body.acp-ux .ux-search button {
	display: inline-flex !important; align-items: center !important; gap: 6px !important;
	width: auto !important; height: 42px !important;
	padding: 0 16px !important; border-radius: 999px !important;
	font-weight: 800 !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-search { background: #1F1916 !important; border-color: rgba(255, 236, 220, 0.16) !important; }

@media (max-width: 480px) { .sx-search-label { display: none; } body.acp-ux .ux-search button { padding: 0 12px !important; } }

/* Right-hand summary card: warm stat tiles */
body.acp-ux:not([data-ux-theme="dark"]) .ux-stat,
body.acp-ux:not([data-ux-theme="dark"]) [class*="ux-mini-stat"],
body.acp-ux:not([data-ux-theme="dark"]) [class*="ux-kpi"] {
	background: #FFF8F1 !important;
	border: 1px solid #FFE0C2 !important;
	border-radius: 14px !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-stat { background: #2A221D !important; border-color: rgba(255, 236, 220, 0.10) !important; }

/* Wallet history: the balance tile in brand orange instead of navy */
body.acp-ux .ux-stat.ux-stat--accent {
	background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%) !important;
	border: 0 !important;
	box-shadow: 0 12px 26px rgba(253, 119, 2, 0.25) !important;
}

body.acp-ux .ux-stat.ux-stat--accent span,
body.acp-ux .ux-stat.ux-stat--accent strong,
body.acp-ux .ux-stat.ux-stat--accent small { color: #FFFFFF !important; }

/* "Before you order": check marks instead of dots */
body.acp-ux .ux-checklist { list-style: none !important; padding: 0 !important; }
body.acp-ux .ux-checklist li { position: relative; padding-right: 28px !important; }
body.acp-ux .ux-checklist li::before {
	content: "" !important;
	position: absolute; right: 0; top: 3px;
	width: 18px; height: 18px; border-radius: 50%;
	background: #FFF1E6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FD7702' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat !important;
	border: 0 !important;
}

/* Friendly empty states */
.sx-empty {
	display: flex !important; flex-direction: column !important; align-items: center !important;
	gap: 8px !important; text-align: center; padding: 26px 16px !important;
}

.sx-empty__ico {
	display: grid; place-items: center;
	width: 60px; height: 60px; border-radius: 18px;
	background: #FFF1E6; color: #FD7702;
	margin-bottom: 4px;
}

.sx-empty strong { font-size: 1.05rem; }
.sx-empty p { max-width: 42ch; margin: 0 !important; }

body.acp-ux[data-ux-theme="dark"] .sx-empty__ico { background: rgba(253, 119, 2, 0.14); }

/* Checkboxes and radios in brand orange */
body.acp-ux input[type="checkbox"],
body.acp-ux input[type="radio"] { accent-color: #FD7702; width: 18px; height: 18px; }

/* Order status chips: softer and rounder */
body.acp-ux [class*="ux-badge"],
body.acp-ux [class*="ux-status"] { border-radius: 999px !important; font-weight: 700 !important; }

/* ==================================================================
 * All customer-area surfaces: warm + textured (light), warm night (dark)
 * ================================================================== */
body.acp-ux:not([data-ux-theme="dark"]) .ux-panelhero__main,
body.acp-ux:not([data-ux-theme="dark"]) .ux-panelhero__side,
body.acp-ux:not([data-ux-theme="dark"]) .ux-sidecard,
body.acp-ux:not([data-ux-theme="dark"]) .ux-overviewcard,
body.acp-ux:not([data-ux-theme="dark"]) .ux-orderworkspace,
body.acp-ux:not([data-ux-theme="dark"]) .ux-order,
body.acp-ux:not([data-ux-theme="dark"]) .ux-service,
body.acp-ux:not([data-ux-theme="dark"]) .ux-statcard,
body.acp-ux:not([data-ux-theme="dark"]) .ux-dashmetric,
body.acp-ux:not([data-ux-theme="dark"]) .ux-productbuy,
body.acp-ux:not([data-ux-theme="dark"]) .ux-productinfo,
body.acp-ux:not([data-ux-theme="dark"]) .ux-paybox,
body.acp-ux:not([data-ux-theme="dark"]) .ux-servicepicker,
body.acp-ux:not([data-ux-theme="dark"]) .ux-buyform,
body.acp-ux:not([data-ux-theme="dark"]) .ux-refcompact,
body.acp-ux:not([data-ux-theme="dark"]) .ux-msg,
body.acp-ux:not([data-ux-theme="dark"]) .ux-funding-help,
body.acp-ux:not([data-ux-theme="dark"]) .ux-funding-history,
body.acp-ux:not([data-ux-theme="dark"]) .ux-brandrail,
body.acp-ux:not([data-ux-theme="dark"]) .ux-hello--simple,
body.acp-ux:not([data-ux-theme="dark"]) .ux-typeahead,
body.acp-ux:not([data-ux-theme="dark"]) .ux-modal__box,
body.acp-ux:not([data-ux-theme="dark"]) .ux-coupon {
	background-color: #FFFCF8 !important;
	background-image:
		radial-gradient(80% 60% at 100% 0%, rgba(253, 119, 2, 0.05), transparent 70%),
		radial-gradient(rgba(194, 65, 12, 0.045) 1px, transparent 1.3px) !important;
	background-size: 100% 100%, 20px 20px !important;
	border-color: #F3E2D2 !important;
}
body.acp-ux:not([data-ux-theme="dark"]) .ux-overviewcard__stats > div,
body.acp-ux:not([data-ux-theme="dark"]) .ux-productfacts > div,
body.acp-ux:not([data-ux-theme="dark"]) .ux-order__steps,
body.acp-ux:not([data-ux-theme="dark"]) .ux-order__body,
body.acp-ux:not([data-ux-theme="dark"]) .ux-home-empty,
body.acp-ux:not([data-ux-theme="dark"]) .ux-home-active,
body.acp-ux:not([data-ux-theme="dark"]) .ux-refsteps article,
body.acp-ux:not([data-ux-theme="dark"]) .ux-funding-account,
body.acp-ux:not([data-ux-theme="dark"]) .ux-chips a,
body.acp-ux:not([data-ux-theme="dark"]) .ux-quick a,
body.acp-ux:not([data-ux-theme="dark"]) .ux-quickpicks a,
body.acp-ux:not([data-ux-theme="dark"]) .ux-modal__facts > div,
body.acp-ux:not([data-ux-theme="dark"]) .ux-dashactionlist > a > span,
body.acp-ux:not([data-ux-theme="dark"]) .ux-paydetail,
body.acp-ux:not([data-ux-theme="dark"]) .ux-orderquote,
body.acp-ux:not([data-ux-theme="dark"]) .ux-shortfall,
body.acp-ux:not([data-ux-theme="dark"]) .ux-catalogfilters__meta,
body.acp-ux:not([data-ux-theme="dark"]) .ux-servicepicker__search,
body.acp-ux:not([data-ux-theme="dark"]) .ux-panelhero__steps > *,
body.acp-ux:not([data-ux-theme="dark"]) .ux-panelhero__stats > *,
body.acp-ux:not([data-ux-theme="dark"]) .ux-stat {
	background: #FFF8F1 !important;
	border-color: #FFE0C2 !important;
}
body.acp-ux[data-ux-theme="dark"] .ux-panelhero__main,
body.acp-ux[data-ux-theme="dark"] .ux-panelhero__side,
body.acp-ux[data-ux-theme="dark"] .ux-sidecard,
body.acp-ux[data-ux-theme="dark"] .ux-overviewcard,
body.acp-ux[data-ux-theme="dark"] .ux-orderworkspace,
body.acp-ux[data-ux-theme="dark"] .ux-order,
body.acp-ux[data-ux-theme="dark"] .ux-service,
body.acp-ux[data-ux-theme="dark"] .ux-statcard,
body.acp-ux[data-ux-theme="dark"] .ux-dashmetric,
body.acp-ux[data-ux-theme="dark"] .ux-productbuy,
body.acp-ux[data-ux-theme="dark"] .ux-productinfo,
body.acp-ux[data-ux-theme="dark"] .ux-paybox,
body.acp-ux[data-ux-theme="dark"] .ux-servicepicker,
body.acp-ux[data-ux-theme="dark"] .ux-buyform,
body.acp-ux[data-ux-theme="dark"] .ux-refcompact,
body.acp-ux[data-ux-theme="dark"] .ux-msg,
body.acp-ux[data-ux-theme="dark"] .ux-funding-help,
body.acp-ux[data-ux-theme="dark"] .ux-funding-history,
body.acp-ux[data-ux-theme="dark"] .ux-brandrail,
body.acp-ux[data-ux-theme="dark"] .ux-hello--simple,
body.acp-ux[data-ux-theme="dark"] .ux-typeahead,
body.acp-ux[data-ux-theme="dark"] .ux-modal__box,
body.acp-ux[data-ux-theme="dark"] .ux-coupon {
	background-color: #1F1916 !important;
	background-image:
		radial-gradient(80% 60% at 100% 0%, rgba(253, 119, 2, 0.07), transparent 70%),
		radial-gradient(rgba(255, 154, 31, 0.05) 1px, transparent 1.3px) !important;
	background-size: 100% 100%, 20px 20px !important;
	border-color: rgba(255, 236, 220, 0.10) !important;
	color: #D8CEC4 !important;
}
body.acp-ux[data-ux-theme="dark"] .ux-overviewcard__stats > div,
body.acp-ux[data-ux-theme="dark"] .ux-productfacts > div,
body.acp-ux[data-ux-theme="dark"] .ux-order__steps,
body.acp-ux[data-ux-theme="dark"] .ux-order__body,
body.acp-ux[data-ux-theme="dark"] .ux-home-empty,
body.acp-ux[data-ux-theme="dark"] .ux-home-active,
body.acp-ux[data-ux-theme="dark"] .ux-refsteps article,
body.acp-ux[data-ux-theme="dark"] .ux-funding-account,
body.acp-ux[data-ux-theme="dark"] .ux-chips a,
body.acp-ux[data-ux-theme="dark"] .ux-quick a,
body.acp-ux[data-ux-theme="dark"] .ux-quickpicks a,
body.acp-ux[data-ux-theme="dark"] .ux-modal__facts > div,
body.acp-ux[data-ux-theme="dark"] .ux-dashactionlist > a > span,
body.acp-ux[data-ux-theme="dark"] .ux-paydetail,
body.acp-ux[data-ux-theme="dark"] .ux-orderquote,
body.acp-ux[data-ux-theme="dark"] .ux-shortfall,
body.acp-ux[data-ux-theme="dark"] .ux-catalogfilters__meta,
body.acp-ux[data-ux-theme="dark"] .ux-servicepicker__search,
body.acp-ux[data-ux-theme="dark"] .ux-panelhero__steps > *,
body.acp-ux[data-ux-theme="dark"] .ux-panelhero__stats > *,
body.acp-ux[data-ux-theme="dark"] .ux-stat {
	background: #2A221D !important;
	border-color: rgba(255, 236, 220, 0.10) !important;
	color: #D8CEC4 !important;
}

/* Keep the orange wallet tile orange in both modes */
body.acp-ux .ux-stat.ux-stat--accent,
body.acp-ux[data-ux-theme="dark"] .ux-stat.ux-stat--accent {
	background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%) !important;
	border: 0 !important;
}

/* Brand chips row ("All", ChatGPT, Codex...) */
body.acp-ux .ux-brandrail__item.is-active > span,
body.acp-ux .ux-brandrail__item[aria-pressed="true"] > span {
	box-shadow: 0 0 0 2px #FD7702, 0 6px 14px rgba(253, 119, 2, 0.25) !important;
	border-color: transparent !important;
}

/* Warm version of the customer area dark mode (generated from the plugin's own dark rules). */
html body.acp-ux[data-ux-theme="dark"] .ux-top{background:rgba(22, 18, 15, 0.97) !important}
html body.acp-ux[data-ux-theme="dark"] .ux-dashhero{background:linear-gradient(-135deg,#16120F 0%,#1F1916 58%,#292016 100%) !important}
html body.acp-ux[data-ux-theme="dark"] .ux-delivery pre,html body.acp-ux[data-ux-theme="dark"] .ux-delivery .acp-stockgroup pre{background:#16120F !important}
/* Warm dark palette for every panel component that uses the plugin's colour variables */
html body.acp-ux[data-ux-theme="dark"] {
	--ux-bg: #16120F;
	--ux-card: #1F1916;
	--ux-soft: #2A221D;
	--ux-soft-2: #33291F;
	--ux-text: #F3EDE6;
	--ux-text-2: #D8CEC4;
	--ux-muted: #B3A69A;
	--ux-faint: #9C8F83;
	--ux-line: rgba(255, 236, 220, 0.10);
	--ux-line-strong: rgba(255, 236, 220, 0.18);
	--ux-primary: #FD7702;
	--ux-primary-hover: #FF8A1F;
	--ux-primary-soft: rgba(253, 119, 2, 0.16);
	--ux-good-soft: rgba(22, 163, 74, 0.16);
	--ux-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	--ux-shadow-raised: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* Login / sign-up screen in dark mode */
html body.acp-ux[data-ux-theme="dark"] .ux-auth,
html body.acp-ux[data-ux-theme="dark"] .ux-auth__form { background: #1F1916 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-auth input,
html body.acp-ux[data-ux-theme="dark"] .ux-auth button:not(.ux-btn--primary) { background: #2A221D !important; border-color: rgba(255, 236, 220, 0.16) !important; color: #F3EDE6 !important; }

/* Form fields everywhere in dark mode (beats the plugin's navy inputs) */
html body.acp-ux[data-ux-theme="dark"] .ux-form input,
html body.acp-ux[data-ux-theme="dark"] .ux-form select,
html body.acp-ux[data-ux-theme="dark"] .ux-form textarea,
html body.acp-ux[data-ux-theme="dark"] select,
html body.acp-ux[data-ux-theme="dark"] textarea,
html body.acp-ux[data-ux-theme="dark"] .ux-smartservice__toggle,
html body.acp-ux[data-ux-theme="dark"] .ux-smartservice__menu,
html body.acp-ux[data-ux-theme="dark"] .ux-smartservice__search {
	background-color: #2A221D !important;
	border-color: rgba(255, 236, 220, 0.16) !important;
	color: #F3EDE6 !important;
}

html body.acp-ux[data-ux-theme="dark"] .ux-search input[type="search"] { background: transparent !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-connection { display: none !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-servicepicker__summary,
html body.acp-ux[data-ux-theme="dark"] .ux-servicepicker__panel,
html body.acp-ux[data-ux-theme="dark"] .ux-ordertoolbar,
html body.acp-ux[data-ux-theme="dark"] .ux-order summary,
html body.acp-ux[data-ux-theme="dark"] label.ux-check,
html body.acp-ux[data-ux-theme="dark"] .ux-facts li { background: #1F1916 !important; border-color: rgba(255, 236, 220, 0.10) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__id,
html body.acp-ux[data-ux-theme="dark"] .ux-service__img,
html body.acp-ux[data-ux-theme="dark"] .ux-thumbfall { background: #2A221D !important; }
html body.acp-ux[data-ux-theme="dark"] .sx-allchip { background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%) !important; }

/* VR-04: this used to colour EVERY status pill green in dark mode (Action needed, Restocking...).
 * It now applies to the live/on-track pill only; the other states have their own dark tints below. */
html body.acp-ux[data-ux-theme="dark"] .ux-order__pending.is-live {
	background: rgba(22, 163, 74, 0.16) !important;
	border-color: rgba(34, 197, 94, 0.35) !important;
	color: #86EFAC !important;
}

/* ==================================================================
 * Logo, numbers and legibility (all screens, tuned for phones)
 * ================================================================== */
.sx-panel-logo { display: block; height: 34px !important; width: auto !important; max-width: none !important; }
.sx-panel-logo--dark { display: none; }
body.acp-ux[data-ux-theme="dark"] .sx-panel-logo--light { display: none !important; }
body.acp-ux[data-ux-theme="dark"] .sx-panel-logo--dark { display: block !important; }
body.acp-ux[data-ux-theme="dark"] .ux-logo img.sx-panel-logo { filter: none !important; }
body.acp-ux .ux-logo { display: inline-flex !important; align-items: center !important; }

/* Stat tiles (Wallet history, Orders, overview cards): big bold figures */
body.acp-ux .ux-stats {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 12px !important;
}

body.acp-ux .ux-stat {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	padding: 16px 18px !important;
	border-radius: 18px !important;
}

body.acp-ux .ux-stat > span {
	font-size: 0.74rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	opacity: 0.85;
}

body.acp-ux .ux-stat > strong {
	font-size: 1.7rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.15 !important;
	white-space: nowrap;
}

body.acp-ux .ux-stat > small { font-size: 0.82rem !important; font-weight: 600; opacity: 0.85; }

body.acp-ux .ux-stat.ux-stat--accent > strong { font-size: 2.1rem !important; }

/* Order stat cards */
body.acp-ux .ux-statcard strong,
body.acp-ux .ux-overviewcard__stats strong,
body.acp-ux .ux-dashmetric strong { font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: -0.02em; }

body.acp-ux .ux-statcard span,
body.acp-ux .ux-overviewcard__stats span { font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.08em; }

/* Home wallet card figure */
body.acp-ux .ux-home-wallet strong { font-size: 2.2rem !important; font-weight: 800 !important; letter-spacing: -0.02em; }

@media (max-width: 899.98px) {
	body.acp-ux { font-size: 15px !important; }

	/* Wallet history: balance is the hero, the two totals sit side by side */
	body.acp-ux .ux-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	body.acp-ux .ux-stats .ux-stat--accent { grid-column: 1 / -1; padding: 20px !important; }
	body.acp-ux .ux-stat.ux-stat--accent > strong { font-size: 2.4rem !important; }
	body.acp-ux .ux-stat > strong { font-size: 1.45rem !important; }

	/* Order stat cards: two per row, readable */
	body.acp-ux .ux-statcards,
	body.acp-ux [class*="ux-statgrid"] {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
		overflow: visible !important;
	}

	/* Top bar: bigger logo, wallet pill that always fits */
	.sx-panel-logo { height: 30px !important; }

	body.acp-ux .ux-top .ux-balance {
		gap: 6px !important;
		height: 42px !important;
		padding: 0 12px 0 4px !important;
		max-width: 60vw;
	}

	body.acp-ux .ux-top .sx-bal-ico { display: none !important; }
	body.acp-ux .ux-top .sx-bal-copy { min-width: 0; }
	body.acp-ux .ux-top .sx-bal-copy small { font-size: 0.58rem !important; }
	body.acp-ux .ux-top .sx-bal-copy strong {
		font-size: 0.98rem !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	body.acp-ux .ux-top .ux-balance i.sx-bal-add { width: 32px !important; height: 32px !important; flex-shrink: 0; }

	/* Page headings and section titles: clear hierarchy */
	body.acp-ux .ux-pagehead h1,
	body.acp-ux .ux-funds-simple-head h1,
	body.acp-ux .ux-panelhero h1 { font-size: 1.75rem !important; font-weight: 800 !important; letter-spacing: -0.02em; }
	body.acp-ux .ux-pagehead p { font-size: 0.95rem !important; }
	body.acp-ux .ux-card h2,
	body.acp-ux .ux-card h3 { font-size: 1.1rem !important; font-weight: 800 !important; }

	/* Small labels never below 12px */
	body.acp-ux small,
	body.acp-ux .ux-muted { font-size: max(0.78rem, 12px) !important; }
}

@media (max-width: 380px) {
	body.acp-ux .ux-stat.ux-stat--accent > strong { font-size: 2rem !important; }
	body.acp-ux .ux-stat > strong { font-size: 1.25rem !important; }
}

/* Prices inside stat tiles inherit the big size (the plugin shrinks them to 10px) */
body.acp-ux .ux-stat strong .acp-price,
body.acp-ux .ux-statcard strong .acp-price,
body.acp-ux .ux-home-wallet strong .acp-price,
body.acp-ux .ux-overviewcard__stats strong .acp-price,
body.acp-ux .ux-balance strong .acp-price,
body.acp-ux .ux-funds-balance-chip strong .acp-price {
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

/* Only one logo at a time */
html body.acp-ux .ux-logo img.sx-panel-logo--dark { display: none !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-logo img.sx-panel-logo--dark { display: block !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-logo img.sx-panel-logo--light { display: none !important; }

@media (max-width: 899.98px) {
	body.acp-ux .ux-orderstats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-flow: row !important;
		overflow: visible !important;
		gap: 10px !important;
	}
	body.acp-ux .ux-orderstats > * { min-width: 0 !important; }
	body.acp-ux .ux-orderstats > *:first-child { grid-column: 1 / -1; }
}

/* ==================================================================
 * Buy a product: simpler finding, clearer cards
 * ================================================================== */

/* The page name next to the logo ("Home") added nothing - the menu shows where you are */
body.acp-ux .ux-top .ux-top__page { display: none !important; }

/* Hide the old step-by-step dropdowns; search, brand tiles and the product grid do the job */
body.acp-ux .ux-orderworkspace .ux-stock-filter,
body.acp-ux .ux-orderworkspace .ux-cascade-stack { display: none !important; }

body.acp-ux .ux-orderworkspace { padding: 20px !important; }
body.acp-ux .ux-orderworkspace .ux-search { margin-top: 14px !important; }

/* Right-hand overview card: stats as clean rows, never squashed */
body.acp-ux .ux-overviewcard__stats {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 8px !important;
}

body.acp-ux .ux-overviewcard__stats > div {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	border-radius: 14px !important;
}

body.acp-ux .ux-overviewcard__stats > div span,
body.acp-ux .ux-overviewcard__stats > div small {
	font-size: 0.74rem !important;
	letter-spacing: 0.06em !important;
	white-space: nowrap;
}

body.acp-ux .ux-overviewcard__stats > div strong {
	font-size: 1.25rem !important;
	white-space: nowrap;
}

/* Product cards: big, bold prices and a clear Buy now button */
body.acp-ux .ux-service--card {
	border-radius: 18px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.acp-ux .ux-service--card:hover {
	transform: translateY(-3px);
	border-color: #FFC08A !important;
	box-shadow: 0 14px 30px rgba(253, 119, 2, 0.14) !important;
}

body.acp-ux .ux-service__titleline strong { font-size: 1rem !important; font-weight: 800 !important; line-height: 1.35; }

body.acp-ux .ux-service__foot {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	flex-wrap: wrap;
}

body.acp-ux .ux-service__foot > b,
body.acp-ux .ux-service__foot > b .acp-price {
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
	color: #FD7702 !important;
}

body.acp-ux .ux-service__foot > b .ux-was,
body.acp-ux .ux-service__foot > b .ux-was .acp-price {
	font-size: 0.85rem !important;
	color: #9A8E84 !important;
	text-decoration: line-through;
	margin-left: 6px;
}

body.acp-ux .ux-service__foot .ux-btn {
	height: 42px !important;
	padding: 0 18px !important;
	border-radius: 999px !important;
	font-weight: 800 !important;
	font-size: 0.92rem !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-service__foot > b,
body.acp-ux[data-ux-theme="dark"] .ux-service__foot > b .acp-price { color: #FF9A4D !important; }

/* ==================================================================
 * "Buy in 3 easy steps" - big, clear stepper
 * ================================================================== */
.sx-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 20px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: none;
}

/* Dashed line joining the circles */
.sx-steps::before {
	content: "";
	position: absolute;
	top: 30px;
	right: 16%;
	left: 16%;
	border-top: 2px dashed #FFC08A;
	z-index: 0;
}

.sx-steps__item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}

.sx-steps__num {
	position: relative;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(-135deg, #FF9A1F 0%, #FD7702 55%, #EA580C 100%);
	color: #FFFFFF;
	box-shadow: 0 10px 22px rgba(253, 119, 2, 0.3), 0 0 0 6px #FFF4EA;
}

.sx-steps__num svg { width: 26px; height: 26px; }

.sx-steps__num b {
	position: absolute;
	top: -4px;
	left: -4px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #FFFFFF;
	color: #C2410C;
	font-size: 0.8rem;
	font-weight: 800;
	box-shadow: 0 2px 6px rgba(28, 20, 16, 0.15);
}

.sx-steps__text strong {
	display: block;
	font-size: 1.02rem !important;
	font-weight: 800 !important;
	color: #2B211B;
	line-height: 1.3;
}

.sx-steps__text small {
	display: block;
	margin-top: 2px;
	font-size: 0.84rem !important;
	color: #6B5E54 !important;
	line-height: 1.4;
}

body.acp-ux[data-ux-theme="dark"] .sx-steps__num { box-shadow: 0 10px 22px rgba(253, 119, 2, 0.3), 0 0 0 6px #2A1E16; }
body.acp-ux[data-ux-theme="dark"] .sx-steps__num b { background: #1F1916; color: #FF9A4D; }
body.acp-ux[data-ux-theme="dark"] .sx-steps__text strong { color: #F3EDE6 !important; }
body.acp-ux[data-ux-theme="dark"] .sx-steps__text small { color: #B3A69A !important; }
body.acp-ux[data-ux-theme="dark"] .sx-steps::before { border-top-color: rgba(253, 119, 2, 0.4); }

/* Phones: a vertical timeline, circles on the left */
@media (max-width: 640px) {
	.sx-steps { grid-template-columns: 1fr; gap: 16px; }
	.sx-steps::before { top: 30px; bottom: 30px; right: 29px; left: auto; border-top: 0; border-right: 2px dashed #FFC08A; }
	body.acp-ux[data-ux-theme="dark"] .sx-steps::before { border-right-color: rgba(253, 119, 2, 0.4); }
	.sx-steps__item { flex-direction: row; text-align: right; gap: 14px; }
	.sx-steps__num { flex: 0 0 60px; }
}

/* ==================================================================
 * 11.6.0-solomax.53 — visual review fixes (2026-09-24)
 * ================================================================== */

/* VR-PANEL-TOPBAR (P1): on phones the top bar (Store + logo + wallet + theme + menu) was wider
 * than the screen, so the menu button sat partly or fully off-screen and the drawer (Support,
 * Back to store, Sign out) could not be opened. The wallet balance is already shown in the
 * identity card directly under the top bar, so the top bar keeps: Store (with its visible label),
 * logo, theme switch and menu. Touch targets are 44px. */
@media (max-width: 560px) {
	html body.acp-ux .ux-top { gap: 6px !important; padding: 8px 10px !important; }
	html body.acp-ux .ux-top .ux-balance { display: none !important; }
	html body.acp-ux .ux-top .ux-logo { order: 1; flex: 0 1 auto; min-width: 0; }
	html body.acp-ux .ux-top .ux-logo img,
	html body.acp-ux .ux-top .ux-logo img.sx-panel-logo { height: 24px !important; max-height: 24px !important; width: auto !important; max-width: 100% !important; object-fit: contain; object-position: right center; }
	html body.acp-ux .ux-top .ux-top__store { order: 0; flex: 0 0 auto; width: auto; min-width: 0; min-height: 44px; padding: 0 10px; gap: 5px; }
	html body.acp-ux .ux-top .ux-top__store span { display: inline; font-size: 12.5px; }
	html body.acp-ux .ux-top .ux-top__store svg { width: 17px; height: 17px; }
	html body.acp-ux .ux-top .ux-burger,
	html body.acp-ux .ux-top .ux-theme { width: 44px !important; height: 44px !important; flex: 0 0 44px; margin-right: 0 !important; }
}

/* VR-PANEL-DRAWER-SHADOW: the closed side menu waits just past the right edge; its shadow must
 * not bleed into the page while it is closed. */
@media (max-width: 899.98px) {
	html body.acp-ux:not(.ux-nav-open) .ux-side { box-shadow: none !important; }
}

/* VR-PANEL-FONT: panel headings and form fields used the bundle's --ux-font (Manrope), which never
 * loads (blocked by the panel CSP), so they fell back to a system font while body text was Inter. */
html body.acp-ux { --ux-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
html body.acp-ux .ux-form :where(input, select, textarea), html body.acp-ux .acp-impersonation-bar button { font-family: var(--ux-font) !important; }

/* VR-TRACKER: order progress <ol>. The plugin's 24px dots sat in a 10px grid row and covered 9-10px
 * labels; alignment rules assumed three columns while provider orders have four stages; 561-900px
 * wrapped the stages 2+2; the current-step label (#ff8a00) was ~2.2:1 on the light card. One layout
 * now serves 1, 3 and 4 stages: a vertical list on phones, dot-to-dot connectors on wider screens. */
html body.acp-ux .ux-order__steps {
	display: grid !important;
	grid-template-columns: repeat(var(--ux-steps, 4), minmax(0, 1fr)) !important;
	gap: 0 !important;
	margin: 0 0 12px !important;
	padding: 16px 10px 14px !important;
	list-style: none !important;
	overflow: visible !important;
}
html body.acp-ux .ux-order__steps > li,
html body.acp-ux .ux-order__steps > li:nth-child(2),
html body.acp-ux .ux-order__steps > li:nth-child(3) {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	min-width: 0 !important;
	padding: 0 6px !important;
	text-align: center !important;
	color: #6B5E54 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}
html body.acp-ux .ux-order__steps > li > i { flex: 0 0 auto; width: 24px !important; height: 24px !important; margin: 0 !important; }
html body.acp-ux .ux-order__steps > li > b { display: block; color: inherit !important; font-weight: inherit; overflow-wrap: anywhere; }
html body.acp-ux .ux-order__steps > li:not(:last-child)::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 11px !important;
	right: calc(50% + 16px) !important;
	left: auto !important;
	width: calc(100% - 32px) !important;
	height: 2px !important;
	border-radius: 2px;
	transform: none !important;
	background: #E4D5C7 !important;
	animation: none !important;
	z-index: 0 !important;
}
html body.acp-ux .ux-order__steps > li.is-done { color: #1C1410 !important; }
html body.acp-ux .ux-order__steps > li.is-done:not(:last-child)::after { background: #16A34A !important; }
html body.acp-ux .ux-order__steps > li.is-current { color: #C2410C !important; font-weight: 800 !important; }
html body.acp-ux .ux-order__steps > li.is-current:not(:last-child)::after { background: linear-gradient(-90deg, #FD7702, #FFE0C2) !important; }
html body.acp-ux .ux-order__steps > li.is-failed { color: #B42318 !important; font-weight: 800 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__steps > li { color: #B3A69A !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__steps > li.is-done { color: #F3EDE6 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__steps > li.is-current { color: #FF9A4D !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__steps > li.is-failed { color: #FDA29B !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__steps > li:not(:last-child)::after { background: rgba(255, 236, 220, 0.16) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__steps > li.is-done:not(:last-child)::after { background: #22C55E !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__steps > li.is-current:not(:last-child)::after { background: linear-gradient(-90deg, #FF9A4D, rgba(255, 154, 77, 0.2)) !important; }
/* A single stage (awaiting payment) reads as one status line, not a lone centred dot. */
html body.acp-ux .ux-order__steps[style*="--ux-steps:1"] { grid-template-columns: 1fr !important; }
html body.acp-ux .ux-order__steps[style*="--ux-steps:1"] > li { flex-direction: row !important; justify-content: flex-start !important; gap: 12px !important; text-align: right !important; }
@media (max-width: 560px) {
	html body.acp-ux .ux-order__steps { grid-template-columns: 1fr !important; row-gap: 14px !important; padding: 14px !important; }
	html body.acp-ux .ux-order__steps > li,
	html body.acp-ux .ux-order__steps > li:nth-child(2),
	html body.acp-ux .ux-order__steps > li:nth-child(3) { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 0 !important; text-align: right !important; font-size: 14px !important; }
	html body.acp-ux .ux-order__steps > li:not(:last-child)::after { display: block !important; top: calc(50% + 14px) !important; right: 11px !important; width: 2px !important; height: calc(100% - 14px) !important; }
	html body.acp-ux .ux-order__steps > li.is-current:not(:last-child)::after { background: linear-gradient(-180deg, #FD7702, #FFE0C2) !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-order__steps > li.is-current:not(:last-child)::after { background: linear-gradient(-180deg, #FF9A4D, rgba(255, 154, 77, 0.2)) !important; }
}
@media (prefers-reduced-motion: reduce) {
	html body.acp-ux .ux-order__steps .is-current i,
	html body.acp-ux .ux-order__pending::before,
	html body.acp-ux .ux-inlinepill::before,
	html body.acp-ux .ux-inlinepill--live::after { animation: none !important; }
}

/* VR-THEME-SYNC: the page background behind the dark panel was the bundle's navy #10151d. */
html[data-ux-initial-theme="dark"] { background: #16120F !important; }
html[data-ux-initial-theme="light"] { background: #FAF7F2 !important; }

/* VR-AUTH (sign in / create account): the hero is always dark, but the light-mode heading rule
 * turned its headline dark-on-navy (unreadable); on phones the form sat ~180px below the hero because
 * the grid row stretched to the screen height and centred it; the page was plain white; field
 * outlines were below 3:1. The hero now uses the brand warm dark in both themes. */
html body.acp-ux.acp-ux--auth:not([data-ux-theme="dark"]) { background-color: #FAF7F2 !important; background-image: radial-gradient(rgba(194, 65, 12, 0.07) 1px, transparent 1.3px) !important; background-size: 22px 22px !important; }
html body.acp-ux--auth .ux-auth__panel { background: linear-gradient(-150deg, #2A1B12 0%, #16120F 58%, #3A2112 100%) !important; }
html body.acp-ux--auth .ux-auth__panel h1 { color: #FFFFFF !important; }
html body.acp-ux--auth .ux-auth__panel > p, html body.acp-ux--auth .ux-auth__points li { color: #E7DDD4 !important; }
html body.acp-ux--auth .ux-auth__eyebrow { color: #FF9A4D !important; }
html body.acp-ux--auth .ux-auth__logo { display: block; height: 32px; width: auto; }
html body.acp-ux--auth .ux-auth__store { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 8px; color: #C2410C; font-weight: 700; font-size: 14px; text-decoration: none; }
html body.acp-ux--auth[data-ux-theme="dark"] .ux-auth__store { color: #FF9A4D; }
html body.acp-ux--auth .ux-auth__store:hover, html body.acp-ux--auth .ux-auth__store:focus-visible { text-decoration: underline; }
html body.acp-ux--auth:not([data-ux-theme="dark"]) .ux-auth input:not([type="checkbox"]) { border-color: #9C8C7F !important; }
@media (max-width: 900px) {
	html body.acp-ux--auth .ux-auth { align-content: start !important; }
	html body.acp-ux--auth .ux-auth__form { justify-content: flex-start !important; }
}

/* VR-PANEL-CONTRAST: measured by axe in the BEFORE run. Text on the brand-orange fill uses brand ink
 * (6.7:1); small orange text uses #C2410C (light) / #FF9A4D (dark); muted text passes 4.5:1. */
html body.acp-ux .ux-btn--primary *, html body.acp-ux .ux-btn--primary.ux-order__view, html body.acp-ux .ux-btn--primary.ux-order__view *,
html body.acp-ux .ux-sideprofile strong, html body.acp-ux .ux-sideprofile a, html body.acp-ux .ux-stat--accent,
html body.acp-ux .ux-stat--accent *, html body.acp-ux .sx-steps__num, html body.acp-ux .ux-orderworkspace__step,
html body.acp-ux .sx-allchip.is-active, html body.acp-ux .sx-topup__chips button.is-active,
html body.acp-ux .ux-mobile-profile__avatar { color: #1C1410 !important; -webkit-text-fill-color: #1C1410 !important; }
html body.acp-ux .ux-sideprofile a { text-decoration: underline; text-underline-offset: 2px; }
html body.acp-ux:not([data-ux-theme="dark"]) .ux-tag--info { color: #C2410C !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-tag--info { color: #FF9A4D !important; }
html body.acp-ux:not([data-ux-theme="dark"]) .sx-bal-copy small { color: #6B5E54 !important; }
html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary span,
html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary small { color: #B3A69A !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-provider-input,
html body.acp-ux[data-ux-theme="dark"] .ux-provider-input * { color: #F3D9C4 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__pending.is-attention { color: #FDA29B !important; background: rgba(217, 45, 32, 0.14) !important; border-color: rgba(253, 162, 155, 0.35) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__pending.is-caution { color: #FEC84B !important; background: rgba(247, 144, 9, 0.12) !important; border-color: rgba(254, 200, 75, 0.35) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__pending.is-live { color: #6CE9A6 !important; background: rgba(18, 183, 106, 0.12) !important; border-color: rgba(108, 233, 166, 0.3) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__pending.is-calm { color: #84CAFF !important; background: rgba(46, 144, 250, 0.12) !important; border-color: rgba(132, 202, 255, 0.3) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-inlinepill--warn { color: #FEC84B !important; background: rgba(247, 144, 9, 0.12) !important; border-color: rgba(254, 200, 75, 0.35) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-pager a { background: #2A221D !important; border-color: rgba(255, 236, 220, 0.16) !important; color: #F3EDE6 !important; }

/* ==========================================================================
 * VR-PANEL-2 (patch.2 panel review): dark-mode leftovers, pager, chip sizes,
 * mobile "View details" label, money contrast, method selection, staff tables.
 * ========================================================================== */
/* Status chips and order meta: readable sizes; small orange text uses the accessible tone. */
html body.acp-ux .ux-tag, html body.acp-ux .ux-order__pending, html body.acp-ux .ux-inlinepill { font-size: 12.5px !important; line-height: 1.3 !important; }
html body.acp-ux .ux-order__name small, html body.acp-ux .ux-order__meta, html body.acp-ux .sx-bal-copy small { font-size: 13px !important; }
html body.acp-ux:not([data-ux-theme="dark"]) .ux-tag--warn, html body.acp-ux:not([data-ux-theme="dark"]) .ux-order__pending.is-caution { color: #B54708 !important; }
html body.acp-ux:not([data-ux-theme="dark"]) .ux-order__name small, html body.acp-ux:not([data-ux-theme="dark"]) .ux-order__meta { color: #6B5E54 !important; }

/* Dark mode: no light-theme chips, dividers or tiles inside dark cards. */
html body.acp-ux[data-ux-theme="dark"] .ux-inlinepill--live { color: #6CE9A6 !important; background: rgba(18, 183, 106, 0.12) !important; border-color: rgba(108, 233, 166, 0.3) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-inlinepill--info, html body.acp-ux[data-ux-theme="dark"] .ux-inlinepill--calm { color: #84CAFF !important; background: rgba(46, 144, 250, 0.12) !important; border-color: rgba(132, 202, 255, 0.3) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-inlinepill--ok { color: #6CE9A6 !important; background: rgba(18, 183, 106, 0.12) !important; border-color: rgba(108, 233, 166, 0.3) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-table tr, html body.acp-ux[data-ux-theme="dark"] .ux-table td, html body.acp-ux[data-ux-theme="dark"] .ux-table__total td { border-color: rgba(255, 236, 220, 0.12) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-funding-method__icon { background: #2A221D !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-provider-input, html body.acp-ux[data-ux-theme="dark"] .ux-provider-input strong, html body.acp-ux[data-ux-theme="dark"] .ux-provider-input small, html body.acp-ux[data-ux-theme="dark"] .ux-provider-input label { color: #F3D9C4 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-smm-steps > *, html body.acp-ux[data-ux-theme="dark"] .ux-smm-step { background: #1F1916 !important; color: #E7DDD4 !important; border-color: rgba(255, 236, 220, 0.12) !important; }

/* Pager: readable, 44px targets, brand current page in both themes. */
html body.acp-ux .ux-pager a, html body.acp-ux .ux-pager span { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 14px !important; }
html body.acp-ux .ux-pager a.is-current, html body.acp-ux .ux-pager .is-current, html body.acp-ux[data-ux-theme="dark"] .ux-pager a.is-current { background: #FD7702 !important; border-color: #FD7702 !important; color: #1C1410 !important; -webkit-text-fill-color: #1C1410 !important; font-weight: 800 !important; }

/* Phones: the details toggle keeps its words ("View details") next to the eye icon. */
@media (max-width: 760px) {
	html body.acp-ux .ux-order__view > span { display: inline !important; }
	html body.acp-ux .ux-order__view { gap: 8px; }
}

/* Money you are about to pay: accessible orange on light surfaces. */
html body.acp-ux:not([data-ux-theme="dark"]) .is-total strong, html body.acp-ux:not([data-ux-theme="dark"]) [data-ux-topup-total] { color: #C2410C !important; -webkit-text-fill-color: #C2410C !important; }
html body.acp-ux .is-total span, html body.acp-ux .sx-topup__summary span { font-size: 13.5px !important; }

/* Payment method picker: the chosen method shows a tick, not colour alone. */
html body.acp-ux .ux-funding-method { position: relative; }
html body.acp-ux .ux-funding-method.is-active::after { content: ""; position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 50%; background: #FD7702 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1410' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center / 13px no-repeat; }

/* Desktop: the floating language pill sits at the end of the page on the left, clear of the support button. */
@media (min-width: 769px) {
	html body.acp-ux { position: relative; }
	html body.acp-ux > .acp-world { position: absolute !important; top: auto !important; bottom: 18px !important; right: 24px !important; left: auto !important; inset-inline-start: 24px !important; inset-inline-end: auto !important; }
}
/* The outline "View details" (shown when the status pill would only repeat the tag) reads in both themes. */
html body.acp-ux .ux-btn--ghost.ux-order__view, html body.acp-ux .ux-btn--ghost.ux-order__view * { color: #1C1410 !important; -webkit-text-fill-color: #1C1410 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-btn--ghost.ux-order__view { background: transparent !important; border-color: rgba(255, 236, 220, .34) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-btn--ghost.ux-order__view, html body.acp-ux[data-ux-theme="dark"] .ux-btn--ghost.ux-order__view * { color: #F3EDE6 !important; -webkit-text-fill-color: #F3EDE6 !important; }

/* DROPDOWNS (customer panel): native selects share one modern style: own caret, room for it, brand hover/focus,
 * readable options in dark mode. Multi-line selects and custom widgets are left alone. */
html body.acp-ux select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1.5 1.5L6 6l4.5-4.5' fill='none' stroke='%236B5E54' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; background-repeat: no-repeat !important; background-position: left 14px center !important; background-size: 12px 8px !important; padding-left: 42px !important; min-height: 44px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
html body.acp-ux select:not([multiple]):not([size]):hover { border-color: rgba(194, 65, 12, .55) !important; }
html body.acp-ux select:not([multiple]):not([size]):focus-visible { outline: none !important; border-color: #C2410C !important; box-shadow: 0 0 0 4px rgba(194, 65, 12, .18) !important; }
html body.acp-ux select option { color: #1C1410; background: #FFFFFF; }
html body.acp-ux[data-ux-theme="dark"] select:not([multiple]):not([size]) { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1.5 1.5L6 6l4.5-4.5' fill='none' stroke='%23D8CEC4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; color-scheme: dark; }
html body.acp-ux[data-ux-theme="dark"] select:not([multiple]):not([size]):focus-visible { border-color: #FF9A4D !important; box-shadow: 0 0 0 4px rgba(255, 154, 77, .2) !important; }
html body.acp-ux[data-ux-theme="dark"] select option { color: #F3EDE6; background: #1F1916; }

/* PANEL-TOPSEARCH (11.6.0-solomax.53, with AI Pro Control patch.2): product search in the panel top bar. */
html body.acp-ux .ux-top .ux-topsearch { position: relative; display: flex; align-items: center; flex: 1 1 300px; max-width: 460px; min-width: 0; margin: 0 4px 0 6px; }
html body.acp-ux .ux-top .ux-topsearch input { width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 16px 0 50px; border: 1.5px solid #FFD2A8; border-radius: 999px; background: #FFFFFF; color: #1C1410; font: 500 14.5px/1.2 Inter, system-ui, sans-serif; -webkit-appearance: none; appearance: none; box-shadow: 0 1px 2px rgba(28, 20, 16, .05); }
html body.acp-ux .ux-top .ux-topsearch input::placeholder { color: #7A6B60; opacity: 1; }
html body.acp-ux .ux-top .ux-topsearch input::-webkit-search-cancel-button { display: none; }
html body.acp-ux .ux-top .ux-topsearch input:focus { outline: none; border-color: #FD7702; box-shadow: 0 0 0 4px rgba(253, 119, 2, .18); }
html body.acp-ux .ux-top .ux-topsearch button { display: grid; place-items: center; margin: 0; padding: 0; border: 0; cursor: pointer; }
html body.acp-ux .ux-top .ux-topsearch button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
html body.acp-ux .ux-top .ux-topsearch__go { position: absolute; top: 50%; left: 4px; width: 36px; height: 36px; transform: translateY(-50%); border-radius: 50% !important; background: #FD7702 !important; color: #1C1410 !important; }
html body.acp-ux .ux-top .ux-topsearch__go:focus-visible, html body.acp-ux .ux-top .ux-topsearch__close:focus-visible { outline: 2px solid #C2410C; outline-offset: 2px; }
html body.acp-ux .ux-top .ux-topsearch__close[hidden] { display: none !important; }
/* Below 900px the panel uses its slide-out menu, and the search sits at the top of that menu (PANEL-SIDESEARCH). */
@media (max-width: 899.98px) { html body.acp-ux .ux-top .ux-topsearch { display: none !important; } }
/* The 36px search button gets a 44px touch area. */
html body.acp-ux .ux-top .ux-topsearch__go::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
html body.acp-ux[data-ux-theme="dark"] .ux-top .ux-topsearch input { background: #1F1916; border-color: rgba(253, 119, 2, .38); color: #F3EDE6; box-shadow: none; }
html body.acp-ux[data-ux-theme="dark"] .ux-top .ux-topsearch input::placeholder { color: #B3A69A; }
html body.acp-ux[data-ux-theme="dark"] .ux-top .ux-topsearch input:focus { border-color: #FF9A4D; box-shadow: 0 0 0 4px rgba(255, 154, 77, .2); }
html body.acp-ux[data-ux-theme="dark"] .ux-top .ux-topsearch__go:focus-visible { outline-color: #FF9A4D; }

/* PANEL-SIDESEARCH (11.6.0-solomax.53, owner request): wherever the panel uses its slide-out menu (below 900px)
 * search moves from the top bar into the menu. */
html body.acp-ux .ux-side .ux-sidesearch { display: none; }
@media (max-width: 899.98px) {
	html body.acp-ux .ux-top .ux-topsearch { display: none !important; }
	html body.acp-ux .ux-side .ux-sidesearch { position: relative; display: flex; align-items: center; margin: 4px 0 14px; }
	html body.acp-ux .ux-side .ux-sidesearch input { width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 16px 0 52px; border: 1.5px solid #FFD2A8; border-radius: 999px; background: #FFFFFF; color: #1C1410; font: 500 15px/1.2 Inter, system-ui, sans-serif; -webkit-appearance: none; appearance: none; }
	html body.acp-ux .ux-side .ux-sidesearch input::placeholder { color: #7A6B60; opacity: 1; }
	html body.acp-ux .ux-side .ux-sidesearch input:focus { outline: none; border-color: #FD7702; box-shadow: 0 0 0 4px rgba(253, 119, 2, .18); }
	html body.acp-ux .ux-side .ux-sidesearch button { position: absolute; top: 50%; left: 2px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #FD7702; color: #1C1410; transform: translateY(-50%); cursor: pointer; }
	html body.acp-ux .ux-side .ux-sidesearch button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
	html body.acp-ux .ux-side .ux-sidesearch button:focus-visible { outline: 2px solid #C2410C; outline-offset: 2px; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side .ux-sidesearch input { background: #1F1916; border-color: rgba(253, 119, 2, .38); color: #F3EDE6; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side .ux-sidesearch input::placeholder { color: #B3A69A; }
}

/* PANEL-RC-CONTRAST (11.6.0-solomax.53): colour-contrast failures axe found on the release-candidate matrix. */
/* RC-02 buttons inside the dark provider-input box keep brand ink on orange (a blanket rule made them pale). */
html body.acp-ux[data-ux-theme="dark"] .ux-provider-input .ux-btn--primary,
html body.acp-ux[data-ux-theme="dark"] .ux-provider-input .ux-btn--primary * { color: #1C1410 !important; -webkit-text-fill-color: #1C1410 !important; }
/* RC-07 Payment history stat labels. */
html body.acp-ux:not([data-ux-theme="dark"]) .ux-stat > span, html body.acp-ux:not([data-ux-theme="dark"]) .ux-stat > small { color: #6B5E54 !important; opacity: 1 !important; } /* opacity .85 took it to 4.24:1 */
/* RC-08 dark picture-fallback letters on the Buy page. */
html body.acp-ux[data-ux-theme="dark"] .ux-thumbfall b { color: #F0C9A8 !important; }

/* PANEL-AUTH-RC (11.6.0-solomax.53): sign-in and sign-up follow-ups from the release-candidate review. */
@media (max-width: 560px) {
	/* RC-10 the support button sits at the top right of the dark hero on phones (it covered "Sign in"); it scrolls
	 * away with the hero and its menu opens downward. */
	html body.acp-ux.acp-ux--auth .sx-support { position: absolute !important; top: 24px !important; left: 24px !important; bottom: auto !important; flex-direction: column-reverse !important; }
	html body.acp-ux.acp-ux--auth .sx-support__launcher { width: 44px !important; height: 44px !important; }
	/* RC-11 the warm page shows around the form, and there is no empty screen-height tail. */
	html body.acp-ux.acp-ux--auth .ux-auth { min-height: 0 !important; padding-bottom: 32px !important; background: transparent !important; }
	html body.acp-ux.acp-ux--auth .ux-auth__form { min-height: 0 !important; background: transparent !important; }
	html body.acp-ux.acp-ux--auth .ux-auth__panel { border-radius: 18px !important; }
}
/* RC-12 warm, visible secondary button; warm password eye; a 20px remember-me box; the kicker stays orange in dark. */
html body.acp-ux.acp-ux--auth:not([data-ux-theme="dark"]) .ux-authswitch .ux-btn--ghost { color: #1C1410 !important; border-color: #9C8C7F !important; background: #FFFFFF !important; }
html body.acp-ux.acp-ux--auth:not([data-ux-theme="dark"]) .ux-pwtoggle { color: #6B5E54 !important; }
html body.acp-ux.acp-ux--auth .ux-auth__form input[type="checkbox"] { width: 20px !important; height: 20px !important; accent-color: #C2410C; }
html body.acp-ux.acp-ux--auth[data-ux-theme="dark"] .ux-auth__formhead small { color: #FF9A4D !important; }

/* PANEL-RC-2 (11.6.0-solomax.53): customer-panel follow-ups from the release-candidate review. */
/* RC-19 the product name in the dark sign-in / sign-up hero card (a light-mode strong colour made it dark). */
html body.acp-ux.acp-ux--auth .ux-auth__panel strong, html body.acp-ux.acp-ux--auth .ux-authtarget strong { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
/* RC-23 the "3 easy steps" number badges: white disc, ink number, both themes. */
html body.acp-ux .sx-steps__num > b { background: #FFFFFF !important; color: #1C1410 !important; -webkit-text-fill-color: #1C1410 !important; }
/* RC-24 sign-up: username and email each get the full row, so the email field is never cut. */
html body.acp-ux.acp-ux--auth .ux-auth__form--register .ux-formgrid, html body.acp-ux.acp-ux--auth .ux-authform .ux-formgrid { grid-template-columns: minmax(0, 1fr) !important; }
/* RC-25 visible focus on the menu links in dark mode. */
html body.acp-ux[data-ux-theme="dark"] .ux-side a:focus-visible, html body.acp-ux[data-ux-theme="dark"] .ux-side button:focus-visible { outline: 2px solid #FF9A4D !important; outline-offset: 2px; }
/* RC-26 phones: the panel has a bottom tab bar and the support button; the scroll arrows are left out there. */
@media (max-width: 899.98px) { html body.acp-ux .sx-scrollnav { display: none !important; } }
/* RC-12b dark order-card status note */
html body.acp-ux[data-ux-theme="dark"] .ux-order__statusnote { color: #B3A69A; }

/* PANEL-RC-3 (11.6.0-solomax.53): last release-candidate follow-ups. */
/* RC-41 dark ink for glyphs on brand orange. */
html body.acp-ux .sx-tabbar__item--main .sx-tabbar__ico, html body.acp-ux .sx-tabbar__item--main .sx-tabbar__ico *,
html body.acp-ux .is-active > .sx-nav-ico, html body.acp-ux [aria-current] > .sx-nav-ico, html body.acp-ux .is-active > .sx-nav-ico *, html body.acp-ux [aria-current] > .sx-nav-ico *,
html body.acp-ux .sx-step { color: #1C1410 !important; -webkit-text-fill-color: #1C1410 !important; stroke: currentColor; }
/* RC-42 phones: 44px order-card buttons. */
@media (max-width: 560px) { html body.acp-ux .ux-order .ux-btn--sm { min-height: 44px; } }

/* PANEL-PHONE-1 (11.6.0-solomax.54): owner phone reports of 26 September 2026. */
/* PP-01 Add money: the pay button grows with its label (it was a fixed 56px, so a label that wrapped to two or three
   lines spilled out of the pill). */
html body.acp-ux .sx-topup__pay { height: auto !important; min-height: 56px; padding: 12px 22px !important; line-height: 1.3 !important; white-space: normal !important; text-align: center; overflow-wrap: anywhere; text-wrap: balance; }
/* PP-02 product page: the "Your order" card's single grid column is never wider than the card. With the coupon box
   open, the code field and Apply button set the column's minimum width (about 350px), which pushed the price, the
   balance, stock, quantity and the notes past the card's right edge on phones up to 412px wide. */
html body.acp-ux .ux-productbuy { grid-template-columns: minmax(0, 1fr); }
html body.acp-ux .ux-productbuy > *, html body.acp-ux .ux-buyform > * { min-width: 0; }
html body.acp-ux .ux-coupon__form input { width: 0; min-width: 0; }
html body.acp-ux .ux-coupon__form .ux-btn { flex: 0 0 auto; }
/* PP-02b a total that now wraps ("… Add ₦X to your wallet") starts at the left, like a total on one line, and does
   not leave one word alone on its last line. */
html body.acp-ux .ux-productbuy .ux-orderquote strong { text-align: right; text-wrap: pretty; }
/* PP-01b the 56px minimum also beats the plugin's 46px rule for form buttons (a one-line label gave a 48px pill). */
html body.acp-ux .ux-funding-form .sx-topup__pay { min-height: 56px !important; }
/* PP-02c long words cannot widen the card either: an applied coupon's message and a plan's old and new price wrap
   inside it. */
html body.acp-ux .ux-coupon__text { min-width: 0; overflow-wrap: anywhere; }
html body.acp-ux .ux-plans { grid-template-columns: minmax(0, 1fr) !important; }
html body.acp-ux .ux-plan strong, html body.acp-ux .ux-plan b { min-width: 0; overflow-wrap: anywhere; }
/* PP-03 dark mode: the selected quick amount on Add money keeps its orange fill (it was dark ink on a dark fill,
   1.5:1, so the chosen amount could not be seen). The ink stays #1C1410 (6.8:1 on #FD7702). */
html body.acp-ux[data-ux-theme="dark"] .sx-topup__chips button.is-active { background: #FD7702 !important; border-color: #FD7702 !important; }

/* ==================================================================
 * F-003 (11.6.0-solomax.56, owner decisions of 26 Sep 2026): floating controls and the "Confirm your order" dialog.
 * Support button colour, header docking and the step-aside rules are in support-launcher.css; the page behind the
 * dialog made inert, focus kept in it and the email line breaks are in panel.js.
 * ================================================================== */
/* PANEL-SUPPORT-FLOAT (owner's choice, 26 Sep 2026): in the customer portal the Support button floats at the lower
 * right as before, now a small round icon (48px, icon only; its accessible name stays "Get help from support"). On
 * phones support-launcher.js lifts it 12px above the full-width tab bar. It steps aside while the purchase dialog, the
 * menu or the keyboard is open (support-launcher.css, FLOAT-LAYERS). Not on the sign-in pages (RC-10). */
html body.acp-ux:not(.acp-ux--auth) .sx-support { left: calc(12px + env(safe-area-inset-left, 0px)); }
html body.acp-ux:not(.acp-ux--auth) .sx-support__launcher { width: 48px; height: 48px; padding: 0; gap: 0; }
html body.acp-ux:not(.acp-ux--auth) .sx-support__launcher svg { width: 22px; height: 22px; }
html body.acp-ux:not(.acp-ux--auth) .sx-support__label { display: none; }
@media (min-width: 900px) { html body.acp-ux:not(.acp-ux--auth) .sx-support { left: calc(24px + env(safe-area-inset-left, 0px)); } }
/* PANEL-SUPPORT-PEEK (11.6.0-solomax.57, owner's choice of 26 Sep 2026): the portal's round Support button never rests
 * over the page. While the page scrolls, and once it is still whenever text, an icon, a field or a button-sized control
 * lies under the round button, support-launcher.js adds .sx-support--tuck: the button slides right and shows as a 30px
 * green tab at the screen edge (the same button: same name, a 30x48 target, the icon fully visible). It comes back
 * round over a clear spot. Keyboard focus always shows it round, with its focus ring. Transform only, so nothing else
 * on the page moves. The reduced-motion rule repeats this selector (support-launcher.css:106 is weaker and would lose);
 * :active keeps the tab in place when pressed (support-launcher.css:39 would scale it back). */
html body.acp-ux:not(.acp-ux--auth) .sx-support { --sx-peek: 30px; } /* 48px button + 12px from the edge - 30px shown */
@media (min-width: 900px) { html body.acp-ux:not(.acp-ux--auth) .sx-support { --sx-peek: 42px; } } /* 24px from the edge there */
html body.acp-ux:not(.acp-ux--auth) .sx-support__launcher { transition: transform .22s cubic-bezier(.2, .8, .2, 1), padding .22s ease, background-color .15s ease; }
html body.acp-ux:not(.acp-ux--auth) .sx-support--tuck .sx-support__launcher,
html body.acp-ux:not(.acp-ux--auth) .sx-support--tuck .sx-support__launcher:active { transform: translateX(calc(-1 * var(--sx-peek))); justify-content: flex-start; padding-right: 5px; } /* 11.6.0-solomax.62.1: Arabic slides left */
html body.acp-ux:not(.acp-ux--auth) .sx-support--tuck .sx-support__launcher:focus-visible { transform: none; justify-content: center; padding-right: 0; }
@media (prefers-reduced-motion: reduce) { html body.acp-ux:not(.acp-ux--auth) .sx-support__launcher { transition: none; } }
/* At 320-359px the Home quick-action labels wrap before they reach the right-hand 30px strip the tab uses. */
@media (max-width: 359.98px) { html body.acp-ux .ux-dash-quick__label { max-width: 64px; } }
/* The Buy page's "61 in stock · 61 total" count sat flush with the page edge, 4-12px into the strip the tab uses
 * (hit test 26 Sep 2026, 768 and 1024px); it now ends in line with the product cards' content. */
html body.acp-ux:not(.acp-ux--auth) .ux-related-head > span { margin-left: 18px; }
/* Room at the end of every portal page for the button above the tab bar, so the last button on a page can always be
 * scrolled clear of it (short screens keep their own padding: PANEL-SHORT). */
@media (max-width: 899.98px) and (min-height: 461px) {
	html body.acp-ux:not(.acp-ux--auth) .ux-main,
	html body.acp-ux:not(.acp-ux--auth) main#uxMain { padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* 11.6.0-solomax.56 review: below 360px (or with enlarged phone text) the tab bar labels may wrap, so the bar never grows
 * past its box. */
@media (max-width: 359.98px) {
	html body.acp-ux:not(.acp-ux--auth) .sx-tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	html body.acp-ux:not(.acp-ux--auth) .sx-tabbar__label { overflow-wrap: anywhere; }
}
/* PANEL-TYPING (keyboard): support-launcher.js sets html.sx-typing on touch screens while a text field has focus; the
 * tab bar steps aside so it cannot ride up above the keyboard over the field (Buy email, Add money amount, ticket
 * reply). The page padding does not change while typing, so nothing jumps. scroll-padding-bottom keeps a field that
 * gets focus from ending up under the fixed bars (WCAG 2.4.11). */
@media (max-width: 899.98px) {
	html.sx-typing body.acp-ux .sx-tabbar { visibility: hidden; }
	html { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) { html { scroll-padding-bottom: 88px; } }
/* PANEL-SHORT: 460px of height or less in the phone layout (a phone held sideways, a laptop at 200% zoom): the fixed
 * bars would take a third of the screen or more. The menu has every tab-bar destination and Support, so the tab bar
 * and the Support button step aside; at 320px of height or less the top bar also scrolls away with the page. */
@media (max-width: 899.98px) and (max-height: 460px) {
	html body.acp-ux .sx-tabbar { display: none !important; }
	html body.acp-ux .ux-main, html body.acp-ux main#uxMain { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
	html body.acp-ux:not(.acp-ux--auth) .sx-support { display: none; }
	html body.acp-ux .ux-side { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
	html { scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 899.98px) and (max-height: 320px) {
	html body.acp-ux .ux-top { position: relative !important; }
	html { scroll-padding-top: 8px; }
}
/* PANEL-BUY-EMAIL: in "Confirm your order" the delivery email gets its own full-width line under its label, and
 * panel.js lets it wrap only before "@" or a dot (it broke as "...@example.tes" / "t" in the 62% right-hand column).
 * The other rows keep their right-hand column and the hidden-balance mask. */
html body.acp-ux .ux-modal__facts > [data-ux-buyemail-row]:not([hidden]) { flex-direction: column; align-items: flex-start; gap: 4px; }
html body.acp-ux .ux-modal__facts [data-ux-buyemail] { max-width: 100%; text-align: right; overflow-wrap: anywhere; word-break: normal; hyphens: none; }

/* My orders review buttons (11.6.0-solomax.56, inc/sx-reviews.php): outline icon, one line where it fits. */
body.acp-ux .ux-order__actions .sx-review-btn,
body.acp-ux .ux-order__actions .sx-review-done { display: inline-flex; align-items: center; gap: 6px; }
body.acp-ux .ux-order__actions .sx-review-btn svg,
body.acp-ux .ux-order__actions .sx-review-done svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
body.acp-ux .ux-order__actions .sx-review-done { cursor: default; }

/* ===== GOOGLE SIGN-IN + PICTURES (11.6.0-solomax.60, AI Pro Control patch 8) ===== */
/* GSI-BUTTON (11.6.0-solomax.60, patch 8 T2): "Continue with Google" keeps Google's own colours and font in both themes; the portal forces Inter and repaints controls, so they are pinned. */
html body.acp-ux a.ux-gsi__btn { background-color: #FFFFFF !important; border: 1px solid #747775 !important; color: #1F1F1F !important; font-family: "Google Sans", Roboto, Arial, sans-serif !important; text-decoration: none !important; }
html body.acp-ux[data-ux-theme="dark"] a.ux-gsi__btn { background-color: #131314 !important; border-color: #8E918F !important; color: #E3E3E3 !important; }
/* GSI-FONT (11.6.0-solomax.60): the portal's font reset puts --ux-font (Inter) on every span with !important; the button's text inherits Google's font instead. */
html body.acp-ux a.ux-gsi__btn * { font-family: inherit !important; }
/* GSI-BUTTON-STATE (11.6.0-solomax.60): hover and press use Google's 8% / 12% overlay as a background image, so the pinned colour above stays underneath. */
html body.acp-ux a.ux-gsi__btn:hover { background-image: linear-gradient(rgba(48, 48, 48, .08), rgba(48, 48, 48, .08)) !important; }
html body.acp-ux a.ux-gsi__btn:active, html body.acp-ux a.ux-gsi__btn:focus-visible { background-image: linear-gradient(rgba(48, 48, 48, .12), rgba(48, 48, 48, .12)) !important; }
html body.acp-ux[data-ux-theme="dark"] a.ux-gsi__btn:hover { background-image: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)) !important; }
html body.acp-ux[data-ux-theme="dark"] a.ux-gsi__btn:active, html body.acp-ux[data-ux-theme="dark"] a.ux-gsi__btn:focus-visible { background-image: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) !important; }
/* GSI-COPY (11.6.0-solomax.60): the dark sign-in page gives every button a 1.3:1 edge; "Copy link" keeps the #2A221D fill with a visible edge (5.6:1), a hover and the dark focus ring. */
html body.acp-ux[data-ux-theme="dark"] .ux-gsi button.ux-gsi__copy:not(.ux-btn--primary) { background: #2A221D !important; border-color: #9C8F83 !important; color: #F3EDE6 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-gsi button.ux-gsi__copy:not(.ux-btn--primary):hover { background: #33291F !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-gsi button.ux-gsi__copy:focus-visible { outline: 2px solid #FF9A4D !important; outline-offset: 2px; }
/* GSI-TEXT (11.6.0-solomax.60): "or use email" and the Terms line; dark mode greys every p/small, so both themes are pinned: #6B5E54 (6.2:1) / #B3A69A (7.5:1), links #C2410C / #FF9A4D underlined. */
html body.acp-ux:not([data-ux-theme="dark"]) .ux-gsi { --ux-line: #EADBCD; }
html body.acp-ux .ux-gsi__or, html body.acp-ux .ux-gsi__or span, html body.acp-ux .ux-gsi__legal { color: #6B5E54 !important; }
html body.acp-ux .ux-gsi__or::before, html body.acp-ux .ux-gsi__or::after { border-color: var(--ux-line) !important; }
html body.acp-ux .ux-gsi__legal a { color: #C2410C !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 2px; }
html body.acp-ux[data-ux-theme="dark"] .ux-gsi__or, html body.acp-ux[data-ux-theme="dark"] .ux-gsi__or span, html body.acp-ux[data-ux-theme="dark"] .ux-gsi__legal { color: #B3A69A !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-gsi__legal a { color: #FF9A4D !important; }
/* GSI-PROFILE (11.6.0-solomax.60): #uxSignin gets the card surface from the section.ux-card rules above; inside it the plugin's cool-grey light surfaces and lines take the warm card values. */
html body.acp-ux:not([data-ux-theme="dark"]) #uxSignin { --ux-soft: #FFF8F1; --ux-soft-2: #FFF1E6; --ux-line: #F3E2D2; --ux-line-strong: #EADBCD; }
html body.acp-ux #uxSignin img[src*="/acp-avatars/"] { border-radius: 50%; object-fit: cover; }
/* AVATAR-INITIALS (11.6.0-solomax.60): initials are brand ink #1C1410 everywhere in the portal (6.7:1 on brand orange #FD7702; white there was 2.7:1). */
html body.acp-ux .acp-initials { color: #1C1410 !important; -webkit-text-fill-color: #1C1410 !important; }
/* AVATAR-SIDECARD (11.6.0-solomax.60): on the orange profile card (orange in both themes) the circle is light #FFF1E6 with ink letters (16:1); an orange circle has no edge on orange. */
html body.acp-ux .ux-sideprofile__avatar { background: #FFF1E6 !important; color: #1C1410 !important; -webkit-text-fill-color: #1C1410 !important; }
/* AVATAR-PILL-ROW (11.6.0-solomax.60): top-bar pill and phone row: brand orange with ink (6.7:1), like the storefront header badge; sizes pinned so inline sizes cannot grow them. */
html body.acp-ux .ux-accountpill__avatar, html body.acp-ux .ux-mobile-profile__avatar { background: #FD7702 !important; color: #1C1410 !important; -webkit-text-fill-color: #1C1410 !important; }
html body.acp-ux .ux-accountpill__avatar { width: 28px !important; height: 28px !important; font-size: 12px !important; }
html body.acp-ux .ux-mobile-profile__avatar { width: 38px !important; height: 38px !important; font-size: 14px !important; }
/* AVATAR-FILL (11.6.0-solomax.60): a nested initials element takes its circle's colours and size, and a saved picture fills the circle. */
html body.acp-ux .ux-sideprofile__avatar .acp-initials, html body.acp-ux .ux-accountpill__avatar .acp-initials, html body.acp-ux .ux-mobile-profile__avatar .acp-initials { display: grid !important; place-items: center; width: 100% !important; height: 100% !important; margin: 0 !important; border: 0 !important; border-radius: 50%; background: transparent !important; font: inherit !important; }
html body.acp-ux .ux-sideprofile__avatar img, html body.acp-ux .ux-accountpill__avatar img, html body.acp-ux .ux-mobile-profile__avatar img { display: block; width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover !important; }
/* DEALS-OPTIN (11.6.0-solomax.60, owner decision 28 Sep): the sign-up "Email me daily deals" row sits on the form, not in a dark band (the theme paints every dark label.ux-check). */
html body.acp-ux.acp-ux--auth[data-ux-theme="dark"] label.ux-check.ux-dealsoptin { background: transparent !important; border-color: transparent !important; padding: 0 !important; }
/* AUTH-SUPPORT-WIDE (11.6.0-solomax.60, support-button hit test): on the two-column sign-in and sign-up pages (861px and wider) the fixed
 * bottom-right button sat on the sign-up form's Password field (that form scrolls inside its column). It now sits at the top right of the
 * dark hero panel, as on phones (RC-10): a 44px circle that scrolls with the page, its menu opening downward. The position follows the card
 * (signup-premium.css): left edge max(28px, (100% - 1080px) / 2), width min(1080px, 100% - 56px), hero column 46% of it. */
@media (min-width: 861px) {
	html body.acp-ux.acp-ux--auth .sx-support { position: absolute !important; top: 52px !important; bottom: auto !important; right: auto !important; left: calc(100% - max(28px, (100% - 1080px) / 2) - min(1080px, 100% - 56px) * .46 + 24px) !important; flex-direction: column-reverse !important; align-items: flex-end !important; }
	html body.acp-ux.acp-ux--auth .sx-support__launcher { width: 44px !important; height: 44px !important; padding: 0 !important; gap: 0 !important; }
	html body.acp-ux.acp-ux--auth .sx-support__label { display: none !important; }
}

/* =====================================================================
 * PANEL-PREFS (patch.10 / 11.6.0-solomax.62, owner 29 Sep 2026): "Language & currency" at the top of the portal menu,
 * the same row and sheet as the store's menu (solomax.css "11.6.0-solomax.61 - Language & currency" and dark.css).
 * Markup: AI Pro Control views/panel/lang-switch.php. Up to 899px the portal menu is a drawer: two pills side by side
 * and a bottom sheet with a backdrop. From 900px the menu is a narrow column: the pills stack, and the sheet opens as a
 * panel beside the button (placed by the partial's script). Logical properties, so the generated -rtl.css mirrors it;
 * codes and symbols carry dir="ltr" in the markup (rtlcss would flip a CSS direction).
 * ===================================================================== */
html body.acp-ux .ux-prefs { margin: 0 0 12px; }
html body.acp-ux .ux-prefs .ux-prefs__label { margin: 2px 8px 8px !important; }
html body.acp-ux .ux-prefs .sx-prefs-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html body.acp-ux .ux-prefs.is-single .sx-prefs-pills { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
	html body.acp-ux .ux-prefs { margin-bottom: 8px; }
	html body.acp-ux .ux-prefs .ux-prefs__label { letter-spacing: 0.04em; } /* patch.10: one line in the narrow desktop column */
	html body.acp-ux .ux-prefs .sx-prefs-pills { grid-template-columns: minmax(0, 1fr); }
}
html body.acp-ux .sx-prefs-pill {
	display: flex; align-items: center; gap: 6px; box-sizing: border-box; width: 100%; min-width: 0; height: 46px; margin: 0;
	padding-block: 0; padding-inline: 10px 8px; border-radius: 999px; border: 1.5px solid #FFD2A8; background: #FFFFFF;
	color: #1C1410; font: inherit; font-size: 0.9rem; font-weight: 800; line-height: 1.2; text-align: start; text-transform: none;
	letter-spacing: 0; cursor: pointer; box-shadow: none; transition: border-color .15s ease, background-color .15s ease;
}
html body.acp-ux .sx-prefs-pill .sx-prefs-ico { flex: 0 0 auto; color: #C2410C; }
html body.acp-ux .sx-prefs-pill .sx-prefs-ico--chev { margin-inline-start: auto; color: #8F8174; }
html body.acp-ux .sx-prefs-pill__text { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html body.acp-ux .sx-prefs-pill:hover, html body.acp-ux .sx-prefs-pill[aria-expanded="true"] { border-color: #FD7702; background: #FFF8F1; }
html body.acp-ux .sx-prefs-pill:focus-visible { outline: 2px solid #C2410C; outline-offset: 2px; }
@media (min-width: 900px) {
	html body.acp-ux .sx-prefs-pill { gap: 8px; height: 44px; padding-inline: 12px 10px; }
}

/* The sheet. Up to 899px: a bottom sheet above the open menu, with a dimmed backdrop and its own scroll. */
html body.acp-ux .sx-prefs-sheet[hidden] { display: none !important; }
html body.acp-ux .sx-prefs-sheet { position: fixed; inset: 0; z-index: 9600; font-size: 16px; line-height: 1.4; text-align: start; color: #1C1410; }
html body.acp-ux .sx-prefs-sheet__backdrop { position: absolute; inset: 0; background: rgba(28, 20, 16, 0.5); animation: ux-prefs-fade .18s ease-out; }
html body.acp-ux .sx-prefs-sheet__panel {
	position: absolute; inset-inline: 0; bottom: 0; box-sizing: border-box; display: flex; flex-direction: column;
	max-height: 80vh; max-height: 80dvh; padding-block: 8px calc(16px + env(safe-area-inset-bottom, 0px)); padding-inline: 18px;
	border-radius: 22px 22px 0 0; background: #FFFBF7; box-shadow: 0 -18px 50px rgba(28, 20, 16, 0.22); outline: none;
	animation: ux-prefs-up .22s cubic-bezier(.2, .8, .2, 1);
}
html body.acp-ux .sx-prefs-sheet__handle { display: block; flex: 0 0 auto; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: #E6D5C5; }
html body.acp-ux .sx-prefs-sheet__head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding-block: 2px 12px; }
html body.acp-ux .sx-prefs-sheet .sx-prefs-sheet__title { margin: 0; padding: 0; font-family: inherit; font-size: 1.05rem; font-weight: 800; line-height: 1.3; letter-spacing: 0; text-transform: none; }
html body.acp-ux .sx-prefs-sheet__close {
	position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0;
	border-radius: 50%; border: 1px solid #FFD2A8; background: #FFF7EF; color: #1C1410; cursor: pointer; box-shadow: none;
}
html body.acp-ux .sx-prefs-sheet__close::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
html body.acp-ux .sx-prefs-sheet__close:focus-visible { outline: 2px solid #C2410C; outline-offset: 2px; }
html body.acp-ux .sx-prefs-tabs { display: grid; flex: 0 0 auto; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 999px; background: #F6EBE0; }
html body.acp-ux .sx-prefs-tab {
	min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #6B5E54;
	font: inherit; font-size: 0.92rem; font-weight: 800; line-height: 1.2; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none;
}
html body.acp-ux .sx-prefs-tab[aria-selected="true"] { background: #FFFFFF; color: #1C1410; box-shadow: 0 2px 8px rgba(28, 20, 16, 0.1); }
html body.acp-ux .sx-prefs-tab:focus-visible { outline: 2px solid #C2410C; outline-offset: 1px; }
html body.acp-ux .sx-prefs-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-inline: -4px; padding: 2px 4px; }
html body.acp-ux .sx-prefs-sheet .sx-prefs-list { list-style: none; margin: 0; padding: 4px; border-radius: 16px; background: #FFFFFF; border: 1px solid #FFE0C2; }
html body.acp-ux .sx-prefs-sheet .sx-prefs-list li { margin: 0; padding: 0; list-style: none; }
html body.acp-ux .sx-prefs-sheet .sx-prefs-list li + li { border-top: 1px solid #FFF0E3; }
html body.acp-ux .sx-prefs-opt {
	display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 7px 10px;
	border: 0; border-radius: 12px; background: transparent; color: #1C1410; font: inherit; font-size: 0.95rem; font-weight: 400; line-height: 1.3;
	text-align: start; text-decoration: none; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none;
}
html body.acp-ux .sx-prefs-opt__sym {
	display: grid; place-items: center; flex: 0 0 auto; min-width: 44px; height: 32px; padding-inline: 6px; box-sizing: border-box; border-radius: 10px;
	background: #FFF1E6; color: #C2410C; font-size: 0.85rem; font-weight: 800; white-space: nowrap;
}
/* Symbols, codes and language names keep their own reading order inside the other language (dir set in the markup). */
html body.acp-ux .sx-prefs-opt__sym, html body.acp-ux [data-acp-cur-sym], html body.acp-ux [data-acp-cur-code], html body.acp-ux .sx-prefs-opt__text strong { unicode-bidi: isolate; }
/* The symbols with the phone's own font (in Inter "₦" and friends live in an extra font file), as in the store. */
html body.acp-ux .sx-prefs-opt__sym, html body.acp-ux [data-acp-cur-sym] { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; }
html body.acp-ux .sx-prefs-opt__text { flex: 1 1 auto; min-width: 0; }
html body.acp-ux .sx-prefs-opt__text strong { font-weight: 800; }
html body.acp-ux .sx-prefs-opt__text span { color: #6B5E54; font-weight: 600; }
html body.acp-ux .sx-prefs-opt .sx-prefs-ico--tick { flex: 0 0 auto; color: #C2410C; visibility: hidden; }
html body.acp-ux .sx-prefs-opt[aria-pressed="true"] { background: #FFF4EA; }
html body.acp-ux .sx-prefs-opt[aria-pressed="true"] .sx-prefs-ico--tick { visibility: visible; }
html body.acp-ux .sx-prefs-opt:hover { background: #FFF8F1; }
html body.acp-ux .sx-prefs-opt:focus-visible { outline: 2px solid #C2410C; outline-offset: -2px; }
html body.acp-ux .sx-prefs-sheet .sx-prefs-note { margin: 12px 4px 0; font-size: 0.85rem; line-height: 1.45; color: #1C1410; }
html body.acp-ux .sx-prefs-sheet .sx-prefs-note strong { font-weight: 800; }
html body.acp-ux .sx-prefs-sheet .sx-prefs-note--small { margin-top: 4px; font-size: 0.78rem; color: #6B5E54; }
/* patch.10: in the portal the currency notes come before the list. */
html body.acp-ux .sx-prefs-sheet .sx-prefs-note--lead { margin: 0 4px 4px; }
html body.acp-ux .sx-prefs-sheet .sx-prefs-note--lead + .sx-prefs-list { margin-top: 10px; }
@media (max-width: 899.98px) {
	html.acp-prefs-open, html.acp-prefs-open body { overflow: hidden !important; }
}
/* From 900px: a panel beside the button that opened it, no backdrop; clicks outside it reach the page (and close it). */
@media (min-width: 900px) {
	html body.acp-ux .sx-prefs-sheet { pointer-events: none; }
	html body.acp-ux .sx-prefs-sheet__backdrop { display: none; }
	html body.acp-ux .sx-prefs-sheet__panel {
		position: fixed; top: 76px; bottom: auto; inset-inline: auto 24px; width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 92px);
		padding: 14px 16px 16px; border-radius: 18px; border: 1.5px solid #FFD2A8; box-shadow: 0 18px 44px rgba(28, 20, 16, 0.18);
		pointer-events: auto; animation-name: ux-prefs-drop; animation-duration: .16s;
	}
	html body.acp-ux .sx-prefs-sheet__handle { display: none; }
}
@keyframes ux-prefs-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ux-prefs-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes ux-prefs-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	html body.acp-ux .sx-prefs-sheet__panel, html body.acp-ux .sx-prefs-sheet__backdrop { animation: none; }
	html body.acp-ux .sx-prefs-pill { transition: none; }
}
/* Dark (the portal's Night mode; the same colours as the store's dark.css). */
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-pill { background: #1F1916; border-color: rgba(253, 119, 2, 0.38); color: #F3EDE6; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-pill .sx-prefs-ico { color: #FF9A4D; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-pill .sx-prefs-ico--chev { color: #8F8174; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-pill:hover, html body.acp-ux[data-ux-theme="dark"] .sx-prefs-pill[aria-expanded="true"] { border-color: #FF9A4D; background: #2A211C; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-pill:focus-visible { outline-color: #FF9A4D; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet { color: #F3EDE6; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet__backdrop { background: rgba(0, 0, 0, 0.62); }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet__panel { background: #1A1512; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5); }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet__handle { background: #4A3C33; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet__close { background: #2A211C; border-color: rgba(253, 119, 2, 0.38); color: #F3EDE6; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet__close:focus-visible, html body.acp-ux[data-ux-theme="dark"] .sx-prefs-tab:focus-visible, html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt:focus-visible { outline-color: #FF9A4D; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-tabs { background: #120E0C; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-tab { color: #B3A69A; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-tab[aria-selected="true"] { background: #2A211C; color: #F3EDE6; box-shadow: none; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet .sx-prefs-list { background: #1F1916; border-color: rgba(255, 236, 220, 0.12); }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet .sx-prefs-list li + li { border-top-color: rgba(255, 236, 220, 0.08); }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt { color: #F3EDE6; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt__sym { background: #342216; color: #FF9A4D; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt__text span { color: #B3A69A; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt .sx-prefs-ico--tick { color: #FF9A4D; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt[aria-pressed="true"] { background: #2A1D14; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt:hover { background: #2A211C; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet .sx-prefs-note { color: #F3EDE6 !important; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet .sx-prefs-note--small { color: #B3A69A !important; }
@media (min-width: 900px) {
	html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet__panel { border-color: rgba(253, 119, 2, 0.28); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); }
}
/* 11.6.0-solomax.62.1 (owner, 29 Sep 2026, real phone): on phones the edge tab of the Support/WhatsApp button stays in the
 * side margin (18px shown: 48px button + 12px from the edge - 42px), so it never lies over a tile or a button; a smaller
 * icon keeps it fully visible. The computer layout (24px from the edge) keeps its 30px tab. Layout only. */
@media (max-width: 899.98px) {
	html body.acp-ux:not(.acp-ux--auth) .sx-support { --sx-peek: 42px; }
	html body.acp-ux:not(.acp-ux--auth) .sx-support--tuck .sx-support__launcher,
	html body.acp-ux:not(.acp-ux--auth) .sx-support--tuck .sx-support__launcher:active { padding-right: 2px; }
	html body.acp-ux:not(.acp-ux--auth) .sx-support--tuck .sx-support__launcher svg { width: 14px; height: 14px; }
}