/* Solomaxhub: customer panel touch-ups (loaded via the plugin's acp_panel_head hook). */
.ux-search button {
	background: #FD7702 !important;
	border-radius: 999px !important;
	color: #FFFFFF !important;
}

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

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

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

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

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

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

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

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

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

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

html body.acp-ux .ux-btn--primary,
html body.acp-ux .ux-home-search button {
	background: #FD7702 !important;
	border-color: #FD7702 !important;
	color: #FFFFFF !important;
	font-weight: 800;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	body.acp-ux .ux-top .ux-burger { order: 20; margin-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 #FFD2A8 !important;
	}

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

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

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

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

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

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

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

	/* Bottom tab bar */
	.sx-tabbar {
		position: fixed;
		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 #F3E2D2;
		box-shadow: 0 14px 36px rgba(28, 20, 16, 0.16);
		backdrop-filter: blur(12px);
	}

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

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

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

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

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

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

/* Language chevron (panel) */
.acp-world summary { display: inline-flex !important; align-items: center; gap: 8px; }
.acp-world .sx-chev {
	width: 8px; height: 8px;
	border-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: #F3EDE6 !important; }
body.acp-ux .ux-burger span { border-radius: 2px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html body.acp-ux[data-ux-theme="dark"] .ux-order__pending {
	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: #FFC08A !important;
	box-shadow: 0 14px 30px rgba(253, 119, 2, 0.14) !important;
}

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

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

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

body.acp-ux .ux-service__foot > b .ux-was,
body.acp-ux .ux-service__foot > b .ux-was .acp-price {
	font-size: 0.85rem !important;
	color: #9A8E84 !important;
	text-decoration: line-through;
	margin-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: #FF9A4D !important; }

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

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

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

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

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

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

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

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

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

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