/* Solomaxhub: customer panel touch-ups (loaded via the plugin's acp_panel_head hook). */
.ux-search button {
	background: #65a30d !important;
	border-radius: 999px !important;
	color: #171c10 !important; /* brand ink: white on #65a30d is only 2.7:1 */
}

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

.ux-logo__mark {
	background: linear-gradient(135deg, #77be0f 0%, #65a30d 55%, #65a30d 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: #171c10 !important;
	border: 1.5px solid #a8f041 !important;
	box-shadow: 0 6px 20px rgba(23, 28, 16, 0.12) !important;
	font-weight: 700;
}

.acp-world-menu {
	background: #FFFFFF !important;
	color: #171c10 !important;
	border: 1.5px solid #a8f041 !important;
}

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

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

.acp-world-options button:hover,
.acp-world-options button[aria-pressed="true"] {
	background: #f4fde8 !important;
	color: #56890b !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: #1b1f16 !important;
	color: #eef3e6 !important;
	border-color: rgba(240, 252, 223, 0.16) !important;
}

/* Same orange as the storefront (the panel otherwise darkens it) */
:root {
	--ux-primary: #65a30d;
	--ux-primary-hover: #609b0d;
	--ux-primary-soft: #f4fde8;
	--ux-accent: #65a30d;
	--ux-accent-2: #77be0f;
	--acp-brand: #65a30d;
	--acp-brand-2: #609b0d;
	--acp-brand-3: #77be0f;
	--sf-accent: #65a30d;
	--sf-accent-2: #609b0d;
}

html body.acp-ux .ux-btn--primary,
html body.acp-ux .ux-home-search button {
	background: #65a30d !important;
	border-color: #65a30d !important;
	color: #171c10 !important; /* brand ink: 6.7:1 on #65a30d (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: #609b0d !important;
	border-color: #609b0d !important;
}

/* ==================================================================
 * Same brand as the storefront: warm background, Inter, orange edges
 * ================================================================== */
html body.acp-ux:not([data-ux-theme="dark"]) {
	background-color: #f7faf2 !important;
	background-image: radial-gradient(rgba(86, 137, 11, 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: #e5fac7 !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: #f4fde8 !important;
	border: 1px solid #a8f041 !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: #171c10 !important; }

.sx-step {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-right: 8px;
	border-radius: 50%;
	background: #65a30d;
	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 #e5edda !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: #9fee2d !important; transform: translateY(-1px); }

.ux-funding-method.is-active {
	border-color: #65a30d !important;
	background: #f9fef2 !important;
	box-shadow: 0 0 0 3px rgba(101,163,13, 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: #f4fde8 !important;
	color: #65a30d !important;
}

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

.ux-funding-method__copy strong { font-weight: 800 !important; color: #171c10 !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 #e5edda;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sx-topup__amount:focus-within {
	border-color: #65a30d;
	box-shadow: 0 0 0 4px rgba(101,163,13, 0.14);
}

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

.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: #171c10 !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 #a8f041;
	color: #171c10;
	font-weight: 800;
	font-size: 0.92rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

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

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

.sx-topup__summary {
	border-radius: 16px !important;
	background: #f9fef2 !important;
	border: 1px solid #e5fac7 !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 #e0f9bb !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: #171c10; }

.sx-topup__summary .is-total strong {
	font-size: 1.3rem !important;
	color: #65a30d !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(101,163,13, 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: #1b1f16 !important; border-color: rgba(240, 252, 223, 0.14) !important; color: #eef3e6 !important; }
[data-ux-theme="dark"] .sx-topup__amount input { color: #eef3e6 !important; }
[data-ux-theme="dark"] .sx-topup__summary { background: #222a16 !important; border-color: rgba(101,163,13, 0.28) !important; }
[data-ux-theme="dark"] .ux-funding-method__copy strong,
[data-ux-theme="dark"] .sx-topup__summary .is-total span { color: #eef3e6 !important; }
[data-ux-theme="dark"] .ux-funds-balance-chip { background: #222a16 !important; border-color: rgba(101,163,13, 0.28) !important; }
[data-ux-theme="dark"] .ux-funds-balance-chip strong { color: #eef3e6 !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: #f9fef2 !important;
	border-radius: 16px !important;
}

/* ==================================================================
 * Softer, warmer text (less glare) and textured surfaces
 * ================================================================== */
body.acp-ux:not([data-ux-theme="dark"]) {
	color: #383f2e !important;
	--ux-text: #242b1b;
	--ux-muted: #6B5E54;
	--ux-border: #e7f1d8;
}

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: #242b1b !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: #fcfef9 !important;
	background-image:
		radial-gradient(80% 60% at 100% 0%, rgba(101,163,13, 0.05), transparent 70%),
		radial-gradient(rgba(86, 137, 11, 0.045) 1px, transparent 1.3px) !important;
	background-size: 100% 100%, 20px 20px !important;
	border: 1px solid #e5f3d2 !important;
	box-shadow: 0 8px 24px rgba(63, 96, 16, 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(252, 254, 249, 0.92) !important;
	border-bottom: 1px solid #e5f3d2 !important;
	backdrop-filter: blur(10px);
}

/* ==================================================================
 * Sidebar: profile card + app-style menu
 * ================================================================== */
body.acp-ux:not([data-ux-theme="dark"]) .ux-side {
	background-color: #fafef5 !important;
	background-image: radial-gradient(rgba(86, 137, 11, 0.05) 1px, transparent 1.3px) !important;
	background-size: 20px 20px !important;
	border: 1px solid #e5f3d2 !important;
	border-radius: 20px !important;
	box-shadow: 0 8px 24px rgba(63, 96, 16, 0.05) !important;
	padding: 14px !important;
}

.ux-sideprofile {
	margin-bottom: 14px !important;
	padding: 14px !important;
	border-radius: 16px !important;
	background: linear-gradient(135deg, #77be0f 0%, #65a30d 55%, #65a30d 100%) !important;
	border: 0 !important;
	box-shadow: 0 10px 22px rgba(101,163,13, 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: #383f2e !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: #f4fde8;
	color: #65a30d;
}

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

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

body.acp-ux .ux-side > a.is-active {
	background: #FFFFFF !important;
	color: #56890b !important;
	box-shadow: 0 4px 14px rgba(101,163,13, 0.14), inset 3px 0 0 #65a30d !important;
}

body.acp-ux .ux-side > a.is-active .sx-nav-ico {
	background: linear-gradient(135deg, #77be0f 0%, #65a30d 55%, #65a30d 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: #1b1f16 !important; border-color: rgba(240, 252, 223, 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(101,163,13, 0.14); }
body.acp-ux[data-ux-theme="dark"] .ux-side > a.is-active { background: #252a1d !important; color: #65a30d !important; }
body.acp-ux[data-ux-theme="dark"] .ux-side > a:hover { background: #252a1d !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%, #f4fde8 100%) !important;
	border: 1px solid #a8f041 !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: #fcfef9 !important;
	background-image:
		radial-gradient(70% 90% at 0% 0%, rgba(101,163,13, 0.07), transparent 70%),
		radial-gradient(rgba(86, 137, 11, 0.045) 1px, transparent 1.3px) !important;
	background-size: 100% 100%, 20px 20px !important;
	border: 1px solid #e5f3d2 !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: #deeacd !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: #65a30d !important;
	box-shadow: 0 0 0 4px rgba(101,163,13, 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: #13160f !important;
	background-image: radial-gradient(rgba(119, 190, 15, 0.07) 1px, transparent 1.3px) !important;
	background-size: 24px 24px !important;
	color: #D8CEC4 !important;
	--ux-text: #eef3e6;
	--ux-muted: #B3A69A;
	--ux-line: rgba(240, 252, 223, 0.10);
	--ux-border: rgba(240, 252, 223, 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: #eef3e6 !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(19, 22, 15, 0.92) !important;
	border-bottom: 1px solid rgba(240, 252, 223, 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: #1b1f16 !important;
	background-image:
		radial-gradient(80% 60% at 100% 0%, rgba(101,163,13, 0.07), transparent 70%),
		radial-gradient(rgba(119, 190, 15, 0.05) 1px, transparent 1.3px) !important;
	background-size: 100% 100%, 20px 20px !important;
	border: 1px solid rgba(240, 252, 223, 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, #222a16 0%, #2b3a15 100%) !important;
	border: 1px solid rgba(101,163,13, 0.30) !important;
	color: #eef3e6 !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-side {
	background-color: #1b1f16 !important;
	background-image: radial-gradient(rgba(119, 190, 15, 0.05) 1px, transparent 1.3px) !important;
	border: 1px solid rgba(240, 252, 223, 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: #252a1d !important; }
body.acp-ux[data-ux-theme="dark"] .ux-side > a.is-active {
	background: #252a1d !important;
	color: #65a30d !important;
	box-shadow: inset 3px 0 0 #65a30d !important;
}
body.acp-ux[data-ux-theme="dark"] .sx-nav-ico { background: rgba(101,163,13, 0.14); color: #65a30d; }
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: #252a1d !important;
	border-color: rgba(240, 252, 223, 0.14) !important;
	color: #eef3e6 !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: #1b1f16 !important;
	border-color: rgba(240, 252, 223, 0.14) !important;
	color: #eef3e6 !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-funding-choices { background: #222a16 !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 #a8f041;
	border-radius: 10px;
	color: #56890b;
	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: #4a770a; border-color: #65a30d; outline: 3px solid rgba(101,163,13,.22); outline-offset: 2px; }
body.acp-ux[data-ux-theme="dark"] .ux-top__store { color: #65a30d; border-color: rgba(101,163,13,.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: right; }
body.acp-ux .ux-order__steps > li:not(:last-child)::after { content: ""; position: absolute; left: 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 #e5fac7;
		border-radius: 14px;
		background: #fcfef9;
	}
	body.acp-ux[data-ux-theme="dark"] .ux-mobile-profile { border-color: rgba(240,252,223,.14); background: #1b1f16; }
	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: #65a30d; 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: right; color: inherit; text-decoration: none; }
	body.acp-ux .ux-mobile-profile__balance strong { color: #56890b; font-size: 15px; }
	body.acp-ux[data-ux-theme="dark"] .ux-mobile-profile__balance strong { color: #65a30d; }
	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: left; }
	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(240, 252, 223, 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(252, 254, 249, 0.94) !important;
		border-bottom: 1px solid #e5f3d2 !important;
		backdrop-filter: blur(10px);
	}

	body.acp-ux .ux-top .ux-burger { order: 20; margin-left: 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 #a8f041 !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: #f4fde8 !important;
		border: 1px solid #a8f041 !important;
	}

	/* Side menu slides in from the RIGHT */
	body.acp-ux .ux-side {
		left: auto !important;
		right: 0 !important;
		transform: translateX(105%) !important;
		border-radius: 22px 0 0 22px !important;
		box-shadow: -20px 0 50px rgba(23, 28, 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;
		left: 10px;
		right: 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 #e5f3d2;
		box-shadow: 0 14px 36px rgba(23, 28, 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: #56890b; }
	.sx-tabbar__item.is-active .sx-tabbar__ico { background: #f4fde8; color: #65a30d; }

	/* Raised centre button */
	.sx-tabbar__item--main .sx-tabbar__ico {
		width: 54px;
		height: 54px;
		margin-top: -26px;
		border-radius: 50%;
		background: linear-gradient(135deg, #77be0f 0%, #65a30d 55%, #65a30d 100%) !important;
		color: #FFFFFF !important;
		box-shadow: 0 10px 22px rgba(101,163,13, 0.4), 0 0 0 5px #FFFFFF;
	}

	.sx-tabbar__item--main { color: #56890b; }

	/* Dark mode for the phone pieces */
	body.acp-ux[data-ux-theme="dark"] .ux-top { background: rgba(19, 22, 15, 0.94) !important; }
	body.acp-ux[data-ux-theme="dark"] .ux-balance { background: #222a16 !important; border-color: rgba(101,163,13, 0.3) !important; }
	body.acp-ux[data-ux-theme="dark"] .sx-tabbar { background: rgba(27, 31, 22, 0.96); border-color: rgba(240, 252, 223, 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: #65a30d; }
	body.acp-ux[data-ux-theme="dark"] .sx-tabbar__item.is-active .sx-tabbar__ico { background: rgba(101,163,13, 0.16); color: #65a30d; }
	body.acp-ux[data-ux-theme="dark"] .sx-tabbar__item--main .sx-tabbar__ico { box-shadow: 0 10px 22px rgba(101,163,13, 0.4), 0 0 0 5px #1b1f16; }
	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-left: 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: 22px 0 0 0 !important;
	}
	body.acp-ux .ux-scrim { top: 60px !important; }
}

body.acp-ux[data-ux-theme="dark"] .ux-burger span { background: #eef3e6 !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-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
}

html body.acp-ux[data-ux-theme="dark"] .sx-topup__amount {
	background: #1b1f16 !important;
	border-color: rgba(240, 252, 223, 0.16) !important;
}

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

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

html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary {
	background: #222a16 !important;
	border-color: rgba(101,163,13, 0.28) !important;
}

html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary > div {
	border-bottom-color: rgba(101,163,13, 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: #eef3e6 !important; }
html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary .is-total span { color: #eef3e6 !important; }
html body.acp-ux[data-ux-theme="dark"] .sx-topup__summary .is-total strong { color: #65a30d !important; }

html body.acp-ux[data-ux-theme="dark"] .sx-topup__chips button:not(.is-active) {
	background: #1b1f16 !important;
	border-color: rgba(101,163,13, 0.3) !important;
	color: #eef3e6 !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: #65a30d !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: #1b1f16 !important;
	border-color: rgba(101,163,13, 0.3) !important;
	color: #eef3e6 !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: #252a1d !important;
	border-color: rgba(240, 252, 223, 0.18) !important;
	color: #eef3e6 !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: #eef3e6 !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(101,163,13, 0.16) !important;
	color: #65a30d !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 6px 0 8px !important;
	border-radius: 999px !important;
	background: #f4fde8 !important;
	border: 1px solid #a8f041 !important;
	text-decoration: none !important;
}

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

.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: #65a30d !important; color: #FFFFFF !important;
	font-style: normal;
}

body.acp-ux[data-ux-theme="dark"] .ux-balance { background: #222a16 !important; border-color: rgba(101,163,13, 0.3) !important; }
body.acp-ux[data-ux-theme="dark"] .sx-bal-ico { background: #1b1f16; }

/* "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, #77be0f 0%, #65a30d 55%, #65a30d 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: #f4fde8 !important; border: 1px solid #a8f041 !important;
	color: #56890b !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(101,163,13, 0.14) !important; border-color: rgba(101,163,13, 0.3) !important; color: #65a30d !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, #77be0f 0%, #65a30d 55%, #65a30d 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: #65a30d !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: #f9fef2 !important;
	border-color: #e5fac7 !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 5px 5px 16px !important;
	border-radius: 999px !important;
	background: #FFFFFF !important;
	border: 1.5px solid #deeacd !important;
}

body.acp-ux .ux-search:focus-within { border-color: #65a30d !important; box-shadow: 0 0 0 4px rgba(101,163,13, 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: #1b1f16 !important; border-color: rgba(240, 252, 223, 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: #f9fef2 !important;
	border: 1px solid #e5fac7 !important;
	border-radius: 14px !important;
}

body.acp-ux[data-ux-theme="dark"] .ux-stat { background: #252a1d !important; border-color: rgba(240, 252, 223, 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, #77be0f 0%, #65a30d 55%, #65a30d 100%) !important;
	border: 0 !important;
	box-shadow: 0 12px 26px rgba(101,163,13, 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-left: 28px !important; }
body.acp-ux .ux-checklist li::before {
	content: "" !important;
	position: absolute; left: 0; top: 3px;
	width: 18px; height: 18px; border-radius: 50%;
	background: #f4fde8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365a30d' 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: #f4fde8; color: #65a30d;
	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(101,163,13, 0.14); }

/* Checkboxes and radios in brand orange */
body.acp-ux input[type="checkbox"],
body.acp-ux input[type="radio"] { accent-color: #65a30d; 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: #fcfef9 !important;
	background-image:
		radial-gradient(80% 60% at 100% 0%, rgba(101,163,13, 0.05), transparent 70%),
		radial-gradient(rgba(86, 137, 11, 0.045) 1px, transparent 1.3px) !important;
	background-size: 100% 100%, 20px 20px !important;
	border-color: #e5f3d2 !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: #f9fef2 !important;
	border-color: #e5fac7 !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: #1b1f16 !important;
	background-image:
		radial-gradient(80% 60% at 100% 0%, rgba(101,163,13, 0.07), transparent 70%),
		radial-gradient(rgba(119, 190, 15, 0.05) 1px, transparent 1.3px) !important;
	background-size: 100% 100%, 20px 20px !important;
	border-color: rgba(240, 252, 223, 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: #252a1d !important;
	border-color: rgba(240, 252, 223, 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, #77be0f 0%, #65a30d 55%, #65a30d 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 #65a30d, 0 6px 14px rgba(101,163,13, 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(19, 22, 15, 0.97) !important}
html body.acp-ux[data-ux-theme="dark"] .ux-dashhero{background:linear-gradient(135deg,#13160f 0%,#1b1f16 58%,#212916 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:#13160f !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: #13160f;
	--ux-card: #1b1f16;
	--ux-soft: #252a1d;
	--ux-soft-2: #2b331f;
	--ux-text: #eef3e6;
	--ux-text-2: #D8CEC4;
	--ux-muted: #B3A69A;
	--ux-faint: #9C8F83;
	--ux-line: rgba(240, 252, 223, 0.10);
	--ux-line-strong: rgba(240, 252, 223, 0.18);
	--ux-primary: #65a30d;
	--ux-primary-hover: #77be0f;
	--ux-primary-soft: rgba(101,163,13, 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: #1b1f16 !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: #252a1d !important; border-color: rgba(240, 252, 223, 0.16) !important; color: #eef3e6 !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: #252a1d !important;
	border-color: rgba(240, 252, 223, 0.16) !important;
	color: #eef3e6 !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: #1b1f16 !important; border-color: rgba(240, 252, 223, 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: #252a1d !important; }
html body.acp-ux[data-ux-theme="dark"] .sx-allchip { background: linear-gradient(135deg, #77be0f 0%, #65a30d 55%, #65a30d 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 4px 0 12px !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: #9fee2d !important;
	box-shadow: 0 14px 30px rgba(101,163,13, 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: #65a30d !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-right: 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: #65a30d !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;
	left: 16%;
	right: 16%;
	border-top: 2px dashed #9fee2d;
	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, #77be0f 0%, #65a30d 55%, #65a30d 100%);
	color: #FFFFFF;
	box-shadow: 0 10px 22px rgba(101,163,13, 0.3), 0 0 0 6px #f6fdec;
}

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

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

.sx-steps__text strong {
	display: block;
	font-size: 1.02rem !important;
	font-weight: 800 !important;
	color: #242b1b;
	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(101,163,13, 0.3), 0 0 0 6px #222a16; }
body.acp-ux[data-ux-theme="dark"] .sx-steps__num b { background: #1b1f16; color: #65a30d; }
body.acp-ux[data-ux-theme="dark"] .sx-steps__text strong { color: #eef3e6 !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(101,163,13, 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; left: 29px; right: auto; border-top: 0; border-left: 2px dashed #9fee2d; }
	body.acp-ux[data-ux-theme="dark"] .sx-steps::before { border-left-color: rgba(101,163,13, 0.4); }
	.sx-steps__item { flex-direction: row; text-align: left; 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: left 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-left: 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 (#65a30d) 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;
	left: calc(50% + 16px) !important;
	right: auto !important;
	width: calc(100% - 32px) !important;
	height: 2px !important;
	border-radius: 2px;
	transform: none !important;
	background: #a0bd76 !important;
	animation: none !important;
	z-index: 0 !important;
}
html body.acp-ux .ux-order__steps > li.is-done { color: #171c10 !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: #56890b !important; font-weight: 800 !important; }
html body.acp-ux .ux-order__steps > li.is-current:not(:last-child)::after { background: linear-gradient(90deg, #65a30d, #e5fac7) !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: #eef3e6 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-order__steps > li.is-current { color: #65a30d !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(240, 252, 223, 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, #65a30d, rgba(138, 221, 18, 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: left !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: left !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; left: 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, #65a30d, #e5fac7) !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-order__steps > li.is-current:not(:last-child)::after { background: linear-gradient(180deg, #65a30d, rgba(138, 221, 18, 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: #13160f !important; }
html[data-ux-initial-theme="light"] { background: #f7faf2 !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: #f7faf2 !important; background-image: radial-gradient(rgba(86, 137, 11, 0.07) 1px, transparent 1.3px) !important; background-size: 22px 22px !important; }
html body.acp-ux--auth .ux-auth__panel { background: linear-gradient(150deg, #202a12 0%, #13160f 58%, #2a3a12 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: #65a30d !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: #56890b; font-weight: 700; font-size: 14px; text-decoration: none; }
html body.acp-ux--auth[data-ux-theme="dark"] .ux-auth__store { color: #65a30d; }
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 #56890b (light) / #65a30d (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: #171c10 !important; -webkit-text-fill-color: #171c10 !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: #56890b !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-tag--info { color: #65a30d !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: #e0f3c4 !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(106, 170, 14, 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(106, 170, 14, 0.12) !important; border-color: rgba(254, 200, 75, 0.35) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-pager a { background: #252a1d !important; border-color: rgba(240, 252, 223, 0.16) !important; color: #eef3e6 !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: #4e7e0a !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(240, 252, 223, 0.12) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-funding-method__icon { background: #252a1d !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: #e0f3c4 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-smm-steps > *, html body.acp-ux[data-ux-theme="dark"] .ux-smm-step { background: #1b1f16 !important; color: #E7DDD4 !important; border-color: rgba(240, 252, 223, 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: #65a30d !important; border-color: #65a30d !important; color: #171c10 !important; -webkit-text-fill-color: #171c10 !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: #56890b !important; -webkit-text-fill-color: #56890b !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; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: #65a30d url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171c10' 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; left: 24px !important; right: 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: #171c10 !important; -webkit-text-fill-color: #171c10 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-btn--ghost.ux-order__view { background: transparent !important; border-color: rgba(240, 252, 223, .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: #eef3e6 !important; -webkit-text-fill-color: #eef3e6 !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: right 14px center !important; background-size: 12px 8px !important; padding-right: 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(86, 137, 11, .55) !important; }
html body.acp-ux select:not([multiple]):not([size]):focus-visible { outline: none !important; border-color: #56890b !important; box-shadow: 0 0 0 4px rgba(86, 137, 11, .18) !important; }
html body.acp-ux select option { color: #171c10; 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: #65a30d !important; box-shadow: 0 0 0 4px rgba(138, 221, 18, .2) !important; }
html body.acp-ux[data-ux-theme="dark"] select option { color: #eef3e6; background: #1b1f16; }

/* 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 6px 0 4px; }
html body.acp-ux .ux-top .ux-topsearch input { width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 50px 0 16px; border: 1.5px solid #a8f041; border-radius: 999px; background: #FFFFFF; color: #171c10; font: 500 14.5px/1.2 Inter, system-ui, sans-serif; -webkit-appearance: none; appearance: none; box-shadow: 0 1px 2px rgba(23, 28, 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: #65a30d; box-shadow: 0 0 0 4px rgba(101,163,13, .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%; right: 4px; width: 36px; height: 36px; transform: translateY(-50%); border-radius: 50% !important; background: #65a30d !important; color: #171c10 !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 #56890b; 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: #1b1f16; border-color: rgba(101,163,13, .38); color: #eef3e6; 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: #65a30d; box-shadow: 0 0 0 4px rgba(138, 221, 18, .2); }
html body.acp-ux[data-ux-theme="dark"] .ux-top .ux-topsearch__go:focus-visible { outline-color: #65a30d; }

/* 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 52px 0 16px; border: 1.5px solid #a8f041; border-radius: 999px; background: #FFFFFF; color: #171c10; 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: #65a30d; box-shadow: 0 0 0 4px rgba(101,163,13, .18); }
	html body.acp-ux .ux-side .ux-sidesearch button { position: absolute; top: 50%; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #65a30d; color: #171c10; 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 #56890b; outline-offset: 2px; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side .ux-sidesearch input { background: #1b1f16; border-color: rgba(101,163,13, .38); color: #eef3e6; }
	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: #171c10 !important; -webkit-text-fill-color: #171c10 !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: #a1df47 !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; right: 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: #171c10 !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: #56890b; }
html body.acp-ux.acp-ux--auth[data-ux-theme="dark"] .ux-auth__formhead small { color: #65a30d !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: #171c10 !important; -webkit-text-fill-color: #171c10 !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 #65a30d !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: #171c10 !important; -webkit-text-fill-color: #171c10 !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: left; 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 #171c10 (6.8:1 on #65a30d). */
html body.acp-ux[data-ux-theme="dark"] .sx-topup__chips button.is-active { background: #65a30d !important; border-color: #65a30d !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 { right: calc(12px + env(safe-area-inset-right, 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 { right: calc(24px + env(safe-area-inset-right, 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(var(--sx-peek)) /*rtl:translateX(calc(-1 * var(--sx-peek)))*/; justify-content: flex-start; padding-left: 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-left: 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-right: 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: left; 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 #252a1d 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: #252a1d !important; border-color: #9C8F83 !important; color: #eef3e6 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-gsi button.ux-gsi__copy:not(.ux-btn--primary):hover { background: #2b331f !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-gsi button.ux-gsi__copy:focus-visible { outline: 2px solid #65a30d !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 #56890b / #65a30d underlined. */
html body.acp-ux:not([data-ux-theme="dark"]) .ux-gsi { --ux-line: #deeacd; }
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: #56890b !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: #65a30d !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: #f9fef2; --ux-soft-2: #f4fde8; --ux-line: #e5f3d2; --ux-line-strong: #deeacd; }
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 #171c10 everywhere in the portal (6.7:1 on brand orange #65a30d; white there was 2.7:1). */
html body.acp-ux .acp-initials { color: #171c10 !important; -webkit-text-fill-color: #171c10 !important; }
/* AVATAR-SIDECARD (11.6.0-solomax.60): on the orange profile card (orange in both themes) the circle is light #f4fde8 with ink letters (16:1); an orange circle has no edge on orange. */
html body.acp-ux .ux-sideprofile__avatar { background: #f4fde8 !important; color: #171c10 !important; -webkit-text-fill-color: #171c10 !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: #65a30d !important; color: #171c10 !important; -webkit-text-fill-color: #171c10 !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; left: auto !important; right: 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 #a8f041; background: #FFFFFF;
	color: #171c10; 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: #56890b; }
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: #65a30d; background: #f9fef2; }
html body.acp-ux .sx-prefs-pill:focus-visible { outline: 2px solid #56890b; 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: #171c10; }
html body.acp-ux .sx-prefs-sheet__backdrop { position: absolute; inset: 0; background: rgba(23, 28, 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: #fcfef8; box-shadow: 0 -18px 50px rgba(23, 28, 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: #a1c271; }
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 #a8f041; background: #f8fef0; color: #171c10; 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 #56890b; 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: #edf6e0; }
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: #171c10; box-shadow: 0 2px 8px rgba(23, 28, 16, 0.1); }
html body.acp-ux .sx-prefs-tab:focus-visible { outline: 2px solid #56890b; 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 #e5fac7; }
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 #f3fde5; }
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: #171c10; 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: #f4fde8; color: #56890b; 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: #56890b; visibility: hidden; }
html body.acp-ux .sx-prefs-opt[aria-pressed="true"] { background: #f6fdec; }
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: #f9fef2; }
html body.acp-ux .sx-prefs-opt:focus-visible { outline: 2px solid #56890b; 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: #171c10; }
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 #a8f041; box-shadow: 0 18px 44px rgba(23, 28, 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: #1b1f16; border-color: rgba(101,163,13, 0.38); color: #eef3e6; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-pill .sx-prefs-ico { color: #65a30d; }
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: #65a30d; background: #242a1c; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-pill:focus-visible { outline-color: #65a30d; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet { color: #eef3e6; }
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: #171a12; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5); }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet__handle { background: #414a33; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet__close { background: #242a1c; border-color: rgba(101,163,13, 0.38); color: #eef3e6; }
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: #65a30d; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-tabs { background: #10120c; }
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: #242a1c; color: #eef3e6; box-shadow: none; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet .sx-prefs-list { background: #1b1f16; border-color: rgba(240, 252, 223, 0.12); }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet .sx-prefs-list li + li { border-top-color: rgba(240, 252, 223, 0.08); }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt { color: #eef3e6; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt__sym { background: #283416; color: #65a30d; }
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: #65a30d; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt[aria-pressed="true"] { background: #212a14; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-opt:hover { background: #242a1c; }
html body.acp-ux[data-ux-theme="dark"] .sx-prefs-sheet .sx-prefs-note { color: #eef3e6 !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(101,163,13, 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-left: 2px; }
	html body.acp-ux:not(.acp-ux--auth) .sx-support--tuck .sx-support__launcher svg { width: 14px; height: 14px; }
}

/* 11.6.0-solomax.63.4: faint portal text made readable (kept from .64): colours only, for the items below AA contrast. */
body.acp-ux:not([data-ux-theme="dark"]) .ux-nav-label { color: #6B5E54 !important; }
html body.acp-ux:not([data-ux-theme="dark"]) .ux-funding-costs.sx-topup__summary .is-total strong,
html body.acp-ux:not([data-ux-theme="dark"]) .ux-funding-costs .is-total strong { color: #53860b !important; }
html body.acp-ux:not([data-ux-theme="dark"]) .ux-service--card .ux-service__foot > b,
html body.acp-ux:not([data-ux-theme="dark"]) .ux-service--card .ux-service__foot > b .acp-price { color: #53860b !important; }
body.acp-ux:not([data-ux-theme="dark"]) .ux-pos,
body.acp-ux:not([data-ux-theme="dark"]) .ux-pos .acp-price { color: #166534 !important; }
body.acp-ux[data-ux-theme="dark"] .ux-service-email > span { color: #98ed1d !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-coupon__form .ux-btn--sm { color: #FFFFFF !important; }

/* 11.6.0-solomax.63.17 (owner: "the orange circle is not supposed to be ... looking like an oval"): the portal's search
 * button is a true 36 x 36 circle; a general button rule made it taller than wide. */
html body.acp-ux .ux-top .ux-topsearch__go { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 !important; aspect-ratio: 1 / 1; display: inline-grid !important; place-items: center; line-height: 1 !important; flex: none !important; box-sizing: border-box !important; }
html body.acp-ux .ux-top .ux-topsearch__go svg { width: 18px !important; height: 18px !important; }

/* =====================================================================
 * 11.6.0-solomax.63.19 (owner, 2 Oct 2026: "Is this payment page not too long for a page? Is this how my competitors
 * would do it?"): Add money fits on one phone screen. Nothing is smaller or lighter (the .64 lesson): the page loses
 * what it said twice — the box inside the box, the three-line product note, three rows of quick amounts, the fee box
 * the next page repeats, and the empty "Recent top-ups" (plugin patch.13.13 removes the last two lines' words).
 * Logical properties: the same block serves Arabic pages.
 * ===================================================================== */

/* The product this top-up is for: one line, "Back to product" beside it */
.sx-funding-for {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 12px;
	margin: 0;
	padding: 10px 16px;
	border-radius: 16px;
	background: #f9fef2;
	border: 1px solid #e5fac7;
}
/* first line: "Adding money for" and "Back to product"; second line: the whole product name (two lines at most) */
.sx-funding-for p { display: contents; }
.sx-funding-for p span { grid-column: 1; grid-row: 1; min-width: 0; font-size: 0.86rem; line-height: 1.4; color: #6B5E54; }
.sx-funding-for p strong { grid-column: 1 / -1; grid-row: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; font-size: 0.98rem; line-height: 1.35; font-weight: 800; color: #171c10; overflow-wrap: anywhere; }
.sx-funding-for a { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; min-height: 36px; font-size: 0.9rem; font-weight: 700; color: #56890b; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* The chosen way of paying shows a tick, like the payment page */
.ux-funding-method { position: relative; }
.ux-funding-method__copy { min-width: 0; }
.ux-funding-method.is-active::after {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-inline-start: auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2365a30d' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the one-row quick amounts must never widen the page: every box around them may shrink */
.ux-funding-simple, .ux-funding-main, .ux-funding-layout, .ux-funding-layout > *, .ux-funding-form, .ux-funding-form > *, .sx-funding-for { min-width: 0; max-width: 100%; }
/* Quick amounts: one row (it scrolls sideways when the screen is narrow) */
.sx-topup__chips {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	margin: 0 !important; /* the form already spaces its parts (16px) */
	padding: 2px 2px 4px;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.sx-topup__chips::-webkit-scrollbar { display: none; }
.sx-topup__chips button { flex: none; scroll-snap-align: start; }

/* The fee and what you pay, one line */
.sx-topup__summary.sx-topup__line {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0 !important;
	padding: 12px 16px !important;
	border-radius: 16px !important;
	background: #f9fef2 !important;
	border: 1px solid #e5fac7 !important;
	font-size: 0.95rem;
	line-height: 1.4;
	color: #6B5E54;
}
.sx-topup__line[hidden] { display: none !important; }
.sx-topup__line b { font-weight: 700; color: #171c10; white-space: nowrap; }
.sx-topup__youpay { font-weight: 800; color: #171c10; white-space: nowrap; }
.sx-topup__youpay strong { font-size: 1.3rem !important; color: #65a30d !important; }

/* Under the button: the provider and the limits side by side */
.sx-topup__trust { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px 16px !important; }
.sx-topup__trust li.sx-topup__trust-bank { flex-basis: 100%; justify-content: center; text-align: center; }

@media (max-width: 640px) {
	/* the wallet card above already says it; when "Recent top-ups" is shown, its Wallet history link replaces this button */
	.ux-funds-simple-head p,
	.ux-funds-simple-head--recent .ux-funds-simple-head__actions { display: none !important; }
	/* otherwise it stays, as a plain link under the title (same text size, no button row) */
	.ux-funds-simple-head__actions { margin-top: -6px !important; }
	.ux-funds-simple-head__actions .ux-btn { min-height: 36px !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: #56890b !important; font-weight: 700 !important; text-decoration: underline; text-underline-offset: 3px; }
	[data-ux-theme="dark"] .ux-funds-simple-head__actions .ux-btn { color: #65a30d !important; }
	.ux-funds-simple-head { padding-bottom: 0 !important; }
	/* one box, not a box in a box: the methods and the amount get the card's full width */
	.ux-funding-main { padding: 18px 16px !important; }
	.ux-funding-layout { gap: 22px !important; }
	html body.acp-ux .ux-funding-main .ux-funding-choices,
	html body.acp-ux .ux-funding-main .ux-funding-payment { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
	.ux-funding-choices h2,
	.ux-funding-payment h2 { margin-bottom: 12px !important; }
	.ux-funding-method { padding: 12px !important; }
	.sx-topup__pay { margin-top: 0 !important; }
	.sx-topup__trust { margin-top: 0 !important; }
}

/* Dark */
[data-ux-theme="dark"] .sx-funding-for,
[data-ux-theme="dark"] .sx-topup__summary.sx-topup__line { background: #222a16 !important; border-color: rgba(101,163,13, 0.28) !important; }
[data-ux-theme="dark"] .sx-funding-for p,
[data-ux-theme="dark"] .sx-topup__summary.sx-topup__line { color: #D8CEC4; }
[data-ux-theme="dark"] .sx-funding-for p strong,
[data-ux-theme="dark"] .sx-topup__line b,
[data-ux-theme="dark"] .sx-topup__youpay { color: #eef3e6; }
[data-ux-theme="dark"] .sx-funding-for a { color: #65a30d; }
[data-ux-theme="dark"] .sx-funding-for p span { color: #B3A69A; }

/* =====================================================================
 * 11.6.0-solomax.63.19 (owner, 2 Oct 2026: "Same with this sign-in page as well. It's just long for nothing."): on a
 * phone the sign-in and sign-up pages open on the form. The dark band keeps the logo and, when you came to buy, the
 * product; its slogan and sentence, and the sign-in form's "Welcome back" and helper line, are for larger screens
 * (the slogan stays for screen readers). Sign-up keeps its "Fields marked * are required" line. Text sizes unchanged.
 * ===================================================================== */
@media (max-width: 640px) {
	html body.acp-ux--auth .ux-auth__panel { min-height: 0 !important; padding-top: 64px !important; padding-bottom: 18px !important; } /* the logo sits 18px from the top (absolute, 32px tall) */
	html body.acp-ux--auth .ux-auth__eyebrow,
	html body.acp-ux--auth .ux-auth__panel > p,
	html body.acp-ux--auth .ux-auth__points,
	html body.acp-ux--auth .ux-auth__formhead small,
	html body.acp-ux--auth .ux-auth--login .ux-auth__formhead p { display: none !important; }
	html body.acp-ux--auth .ux-auth__panel h1 { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
	html body.acp-ux--auth .ux-auth__panel .ux-authtarget { margin-bottom: 0 !important; }
	html body.acp-ux--auth .ux-auth__form { padding-top: 16px !important; }
	html body.acp-ux--auth .ux-auth__formhead { margin-bottom: 6px !important; }
}

/* =====================================================================
 * 11.6.0-solomax.63.23 (owner, 2 Oct 2026: '"How much do you want to add?" is not being formatted properly. Also,
 * correct every other thing that's not formatted properly'): the Add money page lines up.
 * - Step headings: the number sits beside the words, and a second line starts under the words, not under the number;
 *   the lines are balanced (no lone "add?").
 * - No lone last word in the page title, the payment methods' small lines or the Pay button.
 * - Phones: the fee and "You pay" as two rows with their amounts lined up on the right; the two notes under the
 *   button one under the other, both centred; the quick amounts as three equal buttons that always fit (never one cut
 *   in half at the edge; any amount can still be typed).
 * Text sizes unchanged. Logical properties only: the same block serves Arabic pages.
 * ===================================================================== */
html body.acp-ux .ux-funding-choices h2,
html body.acp-ux .ux-funding-payment h2 { display: flex !important; align-items: flex-start; gap: 10px; line-height: 26px !important; text-wrap: balance; }
html body.acp-ux .ux-funding-choices h2 .sx-step,
html body.acp-ux .ux-funding-payment h2 .sx-step { flex: none; margin: 0 !important; vertical-align: 0; }
html body.acp-ux .ux-funds-simple-head h1,
html body.acp-ux .sx-topup__pay { text-wrap: balance; }
html body.acp-ux .ux-funding-method__copy small { text-wrap: pretty; } /* no lone last word, and no line starting with its dot */
html body.acp-ux .ux-funding-history { max-width: none !important; } /* the top-ups list lines up with the box above it (it stopped at 980px) */

@media (max-width: 640px) {
	html body.acp-ux .sx-topup__summary.sx-topup__line:not([hidden]) { display: grid !important; grid-template-columns: minmax(0, 1fr); justify-content: stretch !important; gap: 6px !important; }
	html body.acp-ux .sx-topup__line .sx-topup__fee,
	html body.acp-ux .sx-topup__line .sx-topup__youpay { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
	html body.acp-ux .sx-topup__trust { flex-direction: column; align-items: center; gap: 6px !important; text-align: center; }
	html body.acp-ux .sx-topup__trust li { display: block !important; text-align: center; text-wrap: balance; }
	html body.acp-ux .sx-topup__trust li svg { display: inline-block; vertical-align: -3px; margin-inline-end: 6px; }
	html body.acp-ux .sx-topup__chips { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; overflow: visible; padding: 0 !important; }
	html body.acp-ux .sx-topup__chips button { width: 100%; min-width: 0; padding-inline: 4px !important; }
	html body.acp-ux .sx-topup__chips button:nth-child(n+4) { display: none !important; }
}

/* =====================================================================
 * 11.6.0-solomax.63.25 (owner, 2 Oct 2026: "I'm not seeing what is in that white box"): in the "Customer view" bar the
 * portal's general rule "buttons take their parent's text colour" made "Return to Control" white on its white button,
 * and the headings rule turned "Customer view" dark brown on the orange bar. Light and dark mode alike.
 * ===================================================================== */
html body.acp-ux .acp-impersonation-bar,
html body.acp-ux .acp-impersonation-bar strong,
html body.acp-ux .acp-impersonation-bar span { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html body.acp-ux .acp-impersonation-bar button { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #171c10 !important; -webkit-text-fill-color: #171c10 !important; }
html body.acp-ux .acp-impersonation-bar button:hover,
html body.acp-ux .acp-impersonation-bar button:focus-visible { background: #f4fde8 !important; }
html body.acp-ux .acp-impersonation-bar button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* .63.40.58 (owner, 17 Oct 2026): phone menu is a floating card, the page behind it blurs,
 * and the top Store button is a round icon so it no longer fights the logo. */
@media (max-width: 899.98px) {
	html body.acp-ux .ux-scrim { top: 0 !important; z-index: 8990 !important; background: rgba(23, 28, 16, .26) !important; -webkit-backdrop-filter: blur(9px) saturate(1.15); backdrop-filter: blur(9px) saturate(1.15); transition: opacity .3s ease, visibility .3s ease !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-scrim { background: rgba(0, 0, 0, .46) !important; }
	html body.acp-ux.ux-nav-open .ux-top { position: relative; z-index: 8995; }
	html body.acp-ux .ux-side {
		top: 70px !important; right: 10px !important; left: auto !important; bottom: auto !important; scrollbar-width: none;
		width: min(320px, calc(100vw - 20px)) !important;
		height: auto !important; max-height: calc(100dvh - 82px - env(safe-area-inset-bottom, 0px)) !important;
		padding: 10px 10px 12px !important; overflow-y: auto; overscroll-behavior: contain;
		border: 1px solid rgba(101,163,13, .18) !important; border-radius: 24px !important;
		background: rgba(252, 254, 248, .98) !important;
		box-shadow: 0 30px 70px -22px rgba(56, 90, 8, .42), 0 2px 10px rgba(23, 28, 16, .06) !important;
		transform: translateY(-8px) scale(.96) !important; transform-origin: top right;
		opacity: 0; visibility: hidden;
		transition: transform .36s cubic-bezier(.2, .9, .25, 1), opacity .22s ease, visibility .36s !important;
	}
	html body.acp-ux.ux-nav-open .ux-side { transform: none !important; opacity: 1; visibility: visible; }
	html body.acp-ux .ux-side::-webkit-scrollbar { display: none; }
	html body.acp-ux:not(.ux-nav-open) .ux-side { box-shadow: none !important; }
	html body.acp-ux .ux-side > a {
		position: relative; min-height: 52px; margin: 2px 0 !important; padding: 7px 12px 7px 8px !important;
		border-radius: 16px !important; font-size: 15px !important; font-weight: 700 !important; color: #272e1d !important;
		-webkit-tap-highlight-color: transparent;
	}
	html body.acp-ux .ux-side > a:active { background: #effcdd !important; transform: scale(.985); }
	html body.acp-ux .ux-side > a::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-left: auto; border-top: 2px solid #91b957; border-right: 2px solid #91b957; border-radius: 1px; transform: rotate(45deg); }
	html body.acp-ux .ux-side > a:has(.sxe-navbadge)::after { margin-left: 10px; }
	html body.acp-ux .ux-side > a.is-active::after { border-color: #65a30d; }
	html body.acp-ux .ux-side .sx-nav-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(150deg, #f6fdec 0%, #e9fbd0 100%); box-shadow: inset 0 0 0 1px rgba(101,163,13, .16); }
	html body.acp-ux .ux-side > a.ux-side__break,
	html body.acp-ux .ux-side > a.ux-side__store { margin-top: 15px !important; }
	html body.acp-ux .ux-side > a.ux-side__break::before,
	html body.acp-ux .ux-side > a.ux-side__store::before { content: ""; display: block !important; position: absolute; left: 14px; right: 14px; top: -9px; height: 1px; background: #e1f0cc; }
	html body.acp-ux .ux-side > a.ux-side__out { margin-top: 8px !important; background: #FEF3F2 !important; box-shadow: inset 0 0 0 1px #FBD5D1; }
	html body.acp-ux .ux-side > a.ux-side__out::after { display: none; }
	html body.acp-ux .ux-side > a.ux-side__out .sx-nav-ico { background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #FBD5D1; }
	html body.acp-ux.ux-nav-open .ux-side > * { animation: sxNavIn .42s cubic-bezier(.2, .9, .25, 1) both; }
	html body.acp-ux.ux-nav-open .ux-side > :nth-child(2) { animation-delay: .02s; } html body.acp-ux.ux-nav-open .ux-side > :nth-child(3) { animation-delay: .04s; }
	html body.acp-ux.ux-nav-open .ux-side > :nth-child(4) { animation-delay: .06s; } html body.acp-ux.ux-nav-open .ux-side > :nth-child(5) { animation-delay: .08s; }
	html body.acp-ux.ux-nav-open .ux-side > :nth-child(6) { animation-delay: .1s; } html body.acp-ux.ux-nav-open .ux-side > :nth-child(7) { animation-delay: .12s; }
	html body.acp-ux.ux-nav-open .ux-side > :nth-child(8) { animation-delay: .14s; } html body.acp-ux.ux-nav-open .ux-side > :nth-child(n+9) { animation-delay: .16s; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side { background: rgba(26, 30, 20, .98) !important; border-color: rgba(101,163,13, .22) !important; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7) !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side > a { color: #e5edda !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side > a:active { background: #232a18 !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side > a::after { border-color: #6B5646; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side .sx-nav-ico { background: linear-gradient(150deg, #29331a 0%, #212a14 100%); box-shadow: inset 0 0 0 1px rgba(101,163,13, .22); color: #83d211; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side > a.ux-side__break::before,
	html body.acp-ux[data-ux-theme="dark"] .ux-side > a.ux-side__store::before { background: rgba(240, 252, 223, .10); }
	html body.acp-ux[data-ux-theme="dark"] .ux-side > a.ux-side__out { background: rgba(220, 38, 38, .12) !important; box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .25); }
	html body.acp-ux[data-ux-theme="dark"] .ux-side > a.ux-side__out .sx-nav-ico { background: rgba(220, 38, 38, .18) !important; box-shadow: none; }
}
@keyframes sxNavIn { from { opacity: 0; transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) { html body.acp-ux .ux-side, html body.acp-ux.ux-nav-open .ux-side > * { transition: none !important; animation: none !important; } }
@media (max-width: 560px) {
	html body.acp-ux .ux-top .ux-top__store { width: 44px !important; min-width: 44px !important; height: 44px; padding: 0 !important; border-radius: 50% !important; border: 1px solid #a8f041; background: #f9fef2; }
	html body.acp-ux .ux-top .ux-top__store span { display: none !important; }
	html body.acp-ux .ux-top .ux-top__store svg { width: 20px !important; height: 20px !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-top .ux-top__store { background: #1d2414; border-color: rgba(101,163,13, .42); }
}

/* .63.40.59 (owner, 17 Oct 2026): search magnifiers were drawn at 15px inside 48px buttons and looked lost. */
html body.acp-ux .ux-search button svg { width: 21px !important; height: 21px !important; flex: 0 0 auto; stroke-width: 2.5 !important; }
html body.acp-ux .ux-top .ux-topsearch button svg,
html body.acp-ux .ux-top .ux-topsearch__go svg,
html body.acp-ux .ux-side .ux-sidesearch button svg { width: 20px !important; height: 20px !important; stroke-width: 2.5 !important; }
@media (max-width: 480px) {
	html body.acp-ux .ux-search button { width: 48px !important; min-width: 48px !important; height: 48px !important; padding: 0 !important; justify-content: center !important; border-radius: 50% !important; }
}

/* .63.40.59 (owner, 17 Oct 2026): Buy page on phones — brand row lines up with the cards, Find a product box tidied.
 * .63.40.61: the page-wide gutter change was reverted (owner: only fix what was asked; product cards stay as they were).
 * Before: page 22px, profile card 16px, brand row shifted 10px left (32px gap on its right),
 * and the Find a product box lost another 21px inside. */
@media (max-width: 560px) {
	html body.acp-ux .ux-brandrail { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }
	html body.acp-ux .ux-orderworkspace { padding: 16px !important; }
	html body.acp-ux .ux-orderworkspace__head { display: grid !important; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 6px; align-items: center; padding-left: 0 !important; padding-right: 0 !important; }
	html body.acp-ux .ux-orderworkspace__head > div { display: contents; }
	html body.acp-ux .ux-orderworkspace__step { width: 34px !important; height: 34px !important; min-width: 34px !important; margin: 0 !important; font-size: 15px !important; }
	html body.acp-ux .ux-orderworkspace__head strong { grid-column: 2; margin: 0 !important; }
	html body.acp-ux .ux-orderworkspace__head small { grid-column: 1 / -1; margin: 0 !important; }
	html body.acp-ux .ux-orderworkspace .ux-search { margin-top: 4px !important; }
}

/* .63.40.62 (owner, 17 Oct 2026): tidy product cards on the Buy page, desktop and phone.
 * One grid per card: icon + name + stock on top, a delivery chip, the description across the card (2 lines),
 * then price and button on one bottom row lined up with the card edge. Cards in a row end at the same height. */
html body.acp-ux .ux-servicegrid--big { align-items: stretch !important; }
html body.acp-ux .ux-servicegrid--big .ux-service--card {
	display: grid !important; grid-template-columns: 56px minmax(0, 1fr) !important; grid-template-rows: auto auto 1fr auto !important;
	column-gap: 14px !important; row-gap: 8px !important; align-items: start !important;
	height: 100%; min-height: 0 !important; box-sizing: border-box; padding: 18px 18px 16px !important;
	border: 1px solid #e5f1d3 !important; border-radius: 20px !important; background: #FFFFFF !important;
	box-shadow: 0 1px 2px rgba(23, 28, 16, .04), 0 10px 24px -18px rgba(56, 90, 8, .28) !important;
}
html body.acp-ux .ux-servicegrid--big .ux-service--card:hover { transform: translateY(-2px); border-color: #9fee2d !important; box-shadow: 0 16px 32px -18px rgba(101,163,13, .35) !important; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__img { grid-column: 1; grid-row: 1 / 3; width: 56px !important; height: 56px !important; margin: 0 !important; border-radius: 14px !important; align-self: start; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__img img,
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-thumbfall { width: 56px !important; height: 56px !important; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__body { display: contents !important; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__titleline { grid-column: 2; grid-row: 1; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; min-width: 0; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__titleline strong { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px !important; line-height: 1.3 !important; font-weight: 800 !important; color: #171c10 !important; letter-spacing: -.01em; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__availability { flex: 0 0 auto; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__chips { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
html body.acp-ux .ux-service__chip { display: inline-flex !important; align-items: center; gap: 5px; max-width: 100%; padding: 4px 10px 4px 8px; border-radius: 999px; background: #f4fde8; color: #476f0d !important; font-size: 12px !important; font-weight: 700; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.acp-ux .ux-service__chip svg { flex: 0 0 auto; }
html body.acp-ux .ux-service__chip--brand { background: #f0f4ea; color: #5B4E45 !important; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__description { grid-column: 1 / -1; grid-row: 3; margin: 4px 0 0 !important; font-size: 13.5px !important; line-height: 1.55 !important; color: #6B5E54 !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; overflow: hidden; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot { grid-column: 1 / -1; grid-row: 4; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 6px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px dashed #e1f0cc !important; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot > b { font-size: 22px !important; line-height: 1.1; white-space: nowrap; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot .ux-btn,
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot form { width: auto !important; margin: 0 !important; flex: 0 1 auto; min-width: 0; }
html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot .ux-btn { min-height: 44px; height: auto !important; padding: 10px 20px !important; white-space: nowrap; justify-content: center; }
html body.acp-ux[data-ux-theme="dark"] .ux-servicegrid--big .ux-service--card { background: #1b1f16 !important; border-color: rgba(240, 252, 223, .10) !important; box-shadow: none !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-servicegrid--big .ux-service--card .ux-service__titleline strong { color: #eff5e6 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-servicegrid--big .ux-service--card .ux-service__description { color: #CBBFB4 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-servicegrid--big .ux-service--card .ux-service__foot { border-top-color: rgba(240, 252, 223, .12) !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-service__chip { background: rgba(101,163,13, .14); color: #95ec18 !important; }
html body.acp-ux[data-ux-theme="dark"] .ux-service__chip--brand { background: rgba(255, 255, 255, .07); color: #D8CEC4 !important; }
@media (max-width: 560px) {
	html body.acp-ux .ux-servicegrid--big .ux-service--card { grid-template-columns: 48px minmax(0, 1fr) !important; column-gap: 12px !important; padding: 14px 14px 12px !important; border-radius: 18px !important; }
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__img,
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__img img,
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-thumbfall { width: 48px !important; height: 48px !important; border-radius: 12px !important; }
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__titleline strong { font-size: 15px !important; }
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__description { font-size: 13px !important; }
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot > b { font-size: 20px !important; }
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot .ux-btn { padding: 10px 16px !important; font-size: 14px !important; }
}
@media (max-width: 560px) { /* phones: price on its own line, a full-width button (long "Top up … to buy" labels never squeeze) */
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot { flex-wrap: wrap !important; row-gap: 12px !important; }
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot .ux-btn,
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot form { flex: 1 1 100%; }
	html body.acp-ux .ux-servicegrid--big .ux-service--card .ux-service__foot form .ux-btn { width: 100% !important; }
}

/* .63.40.63 (owner, 17 Oct 2026): side menu tidy, desktop and phone. Labels never wrap under the NEW pill,
 * compact rows, the profile card and the language/currency boxes stay inside the menu. */
html body.acp-ux .ux-side > a > span:not(.sx-nav-ico) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.acp-ux .ux-side .sx-nav-new { height: 18px !important; padding: 0 5px !important; margin-left: auto !important; font-size: 9px !important; letter-spacing: .02em !important; flex: 0 0 auto; }
html body.acp-ux .ux-side .sxe-navbadge { flex: 0 0 auto; }
@media (min-width: 900px) {
	html body.acp-ux .ux-shell { grid-template-columns: 244px minmax(0, 1fr) !important; }
	html body.acp-ux .ux-side { width: 244px !important; padding: 14px 10px 16px !important; border: 1px solid #e5f1d3 !important; border-radius: 22px !important; background: #fcfff9 !important; box-shadow: 0 1px 2px rgba(23, 28, 16, .04), 0 12px 30px -22px rgba(56, 90, 8, .35) !important; }
	html body.acp-ux .ux-side { grid-template-columns: minmax(0, 1fr) !important; }
	html body.acp-ux .ux-side > * { width: auto !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
	html body.acp-ux .ux-side .ux-sideprofile { margin: 0 0 14px !important; }
	html body.acp-ux .ux-side .ux-nav-label { display: block; margin: 16px 10px 6px !important; font-size: 10.5px !important; letter-spacing: .12em; color: #9A8E84 !important; }
	html body.acp-ux .ux-side > a { min-height: 42px !important; margin: 1px 0 !important; padding: 5px 6px 5px 6px !important; gap: 8px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 650 !important; color: #323b25 !important; }
	html body.acp-ux .ux-side > a .sx-nav-ico { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; border-radius: 10px !important; }
	html body.acp-ux .ux-side > a .sx-nav-ico svg { width: 17px !important; height: 17px !important; }
	html body.acp-ux .ux-side > a:hover { background: #f6fdec !important; }
	html body.acp-ux .ux-side > a.is-active { background: #FFFFFF !important; color: #56890b !important; box-shadow: 0 4px 14px -4px rgba(101,163,13, .25), inset 3px 0 0 #65a30d !important; }
	html body.acp-ux .ux-side > a.ux-side__break,
	html body.acp-ux .ux-side > a.ux-side__store { margin-top: 12px !important; }
	html body.acp-ux .ux-side .ux-prefs,
	html body.acp-ux .ux-side .sx-prefs-row { margin: 0 !important; }
	html body.acp-ux .ux-side .sx-prefs-pill { width: 100% !important; box-sizing: border-box; min-height: 40px !important; height: 40px !important; margin: 0 0 8px !important; padding: 0 12px !important; border-radius: 12px !important; border: 1px solid #e1f0cc !important; background: #FFFFFF !important; font-size: 14px !important; font-weight: 650 !important; box-shadow: none !important; }
	html body.acp-ux .ux-side .sx-prefs-pill:hover { border-color: #9fee2d !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side { background: #1a1e14 !important; border-color: rgba(240, 252, 223, .10) !important; box-shadow: none !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side > a { color: #E8DED5 !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side > a:hover { background: #232a18 !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side > a.is-active { background: #232a18 !important; color: #83d211 !important; }
	html body.acp-ux[data-ux-theme="dark"] .ux-side .sx-prefs-pill { background: #1f2417 !important; border-color: rgba(240, 252, 223, .14) !important; }
}

/* .63.40.65 (owner, 17 Oct 2026): the "Preparing" / "Ready within…" dot on an order blinks with a soft ring,
 * so the buyer feels the work is going on. Warning pills (Action needed) stay still. */
html body.acp-ux .ux-inlinepill--info::before,
html body.acp-ux .ux-inlinepill--live::before,
html body.acp-ux .ux-inlinepill--ok:not(.is-done)::before { animation: sxWorkDot 2s ease-out infinite !important; }
/* .63.40.67 (owner): the same radiating pulse as the homepage live dot (sx-pulse: 2s, 7px ring), in the pill's blue. */
@keyframes sxWorkDot {
	0%   { box-shadow: 0 0 0 0 rgba(23, 92, 211, 0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(23, 92, 211, 0); }
	100% { box-shadow: 0 0 0 0 rgba(23, 92, 211, 0); }
}
@media (prefers-reduced-motion: reduce) {
	html body.acp-ux .ux-inlinepill--info::before,
	html body.acp-ux .ux-inlinepill--live::before,
	html body.acp-ux .ux-inlinepill--ok::before { animation: none !important; }
}