/* 11.6.0-solomax.61: right-to-left copy of support-launcher.css, generated with rtlcss. Do not edit by hand; edit support-launcher.css and regenerate. */
/* Solomaxhub support launcher (theme 11.6.0-solomax.53; placement reworked in 11.6.0-solomax.56 and 11.6.0-solomax.57.1):
 * see assets/js/support-launcher.js. Storefront and customer portal. */
.sx-support {
	position: fixed;
	left: calc(16px + env(safe-area-inset-left, 0px)); /* 11.6.0-solomax.56: clear of the notch and rounded corners */
	bottom: var(--sx-support-bottom, calc(16px + env(safe-area-inset-bottom, 0px)));
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	transition: bottom .2s ease;
}
@media (min-width: 769px) { .sx-support { left: calc(24px + env(safe-area-inset-left, 0px)); bottom: var(--sx-support-bottom, calc(24px + env(safe-area-inset-bottom, 0px))); } }

.sx-support__launcher {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #FD7702;
	color: #1C1410;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 12px 28px rgba(194, 65, 12, .35), 0 3px 8px rgba(28, 20, 16, .16);
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
@media (min-width: 769px) { .sx-support__launcher { width: auto; padding: 0 18px 0 22px; height: 52px; } }
.sx-support__launcher:hover { background: #E86A00; }
.sx-support__launcher:active { transform: scale(.96); }
.sx-support__launcher:focus-visible { outline: 3px solid #1C1410; outline-offset: 3px; }
.sx-support__launcher svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 769px) { .sx-support__launcher svg { width: 22px; height: 22px; } }
.sx-support__label { display: none; }
@media (min-width: 769px) { .sx-support__label { display: inline; } }
.sx-support__close-ico { display: none; }
.sx-support.is-open .sx-support__open-ico { display: none; }
.sx-support.is-open .sx-support__close-ico { display: block; }

.sx-support__panel {
	width: min(360px, calc(100vw - 32px));
	max-height: min(560px, calc(100vh - var(--sx-support-bottom, 16px) - 140px));
	max-height: min(560px, calc(100dvh - var(--sx-support-bottom, 16px) - 140px)); /* 11.6.0-solomax.56: never under the sticky header */
	overflow: auto;
	padding: 18px;
	border: 1px solid #F0DCC8;
	border-radius: 18px;
	background: #FFFFFF;
	color: #1C1410;
	box-shadow: 0 24px 60px rgba(28, 20, 16, .22), 0 4px 12px rgba(28, 20, 16, .08);
	animation: sx-support-in .18s ease-out;
}
.sx-support__panel[hidden] { display: none; }
@keyframes sx-support-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.sx-support__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sx-support__head strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.sx-support__head p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #5B4F46; }
.sx-support__close { flex: 0 0 auto; width: 40px; height: 40px; margin: -6px 0 0 -6px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #5B4F46; cursor: pointer; }
.sx-support__close:hover { background: #F5EDE5; color: #1C1410; }
.sx-support__close:focus-visible { outline: 3px solid #C2410C; outline-offset: 1px; }
.sx-support__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sx-support__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-support__item { display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 12px; min-height: 60px; padding: 9px 12px; border: 1px solid #F0DCC8; border-radius: 14px; background: #FFFBF6; color: #1C1410; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.sx-support__item:hover { border-color: #FD7702; background: #FFF4EA; }
.sx-support__item:focus-visible { outline: 3px solid #C2410C; outline-offset: 2px; }
.sx-support__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #FFE9D6; color: #C2410C; }
.sx-support__item--wa .sx-support__icon { background: #DCFCE7; color: #15803D; }
.sx-support__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sx-support__text { min-width: 0; display: grid; gap: 2px; }
.sx-support__text b { font-size: 15px; font-weight: 700; }
.sx-support__text small { font-size: 13px; color: #5B4F46; overflow-wrap: anywhere; }
.sx-support__chev { width: 18px; height: 18px; fill: none; stroke: #8A7B70; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sx-support__help { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #F0E4D8; font-size: 13.5px; }
.sx-support__help span { width: 100%; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6B5E54; }
.sx-support__help a { display: inline-flex; align-items: center; min-height: 36px; color: #C2410C; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Dark theme (storefront toggle and panel toggle). */
html[data-sx-theme="dark"] .sx-support__panel, body[data-ux-theme="dark"] .sx-support__panel { background: #1F1916; color: #F3EDE6; border-color: rgba(255, 236, 220, .16); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
html[data-sx-theme="dark"] .sx-support__head p, body[data-ux-theme="dark"] .sx-support__head p,
html[data-sx-theme="dark"] .sx-support__text small, body[data-ux-theme="dark"] .sx-support__text small { color: #C9BCB1; }
html[data-sx-theme="dark"] .sx-support__item, body[data-ux-theme="dark"] .sx-support__item { background: #261F1A; border-color: rgba(255, 236, 220, .14); color: #F3EDE6; }
html[data-sx-theme="dark"] .sx-support__item:hover, body[data-ux-theme="dark"] .sx-support__item:hover { border-color: #FD7702; background: #2E241E; }
html[data-sx-theme="dark"] .sx-support__icon, body[data-ux-theme="dark"] .sx-support__icon { background: rgba(253, 119, 2, .16); color: #FF9A4D; }
html[data-sx-theme="dark"] .sx-support__item--wa .sx-support__icon, body[data-ux-theme="dark"] .sx-support__item--wa .sx-support__icon { background: rgba(34, 197, 94, .16); color: #4ADE80; }
html[data-sx-theme="dark"] .sx-support__close, body[data-ux-theme="dark"] .sx-support__close { color: #D8CEC4; }
html[data-sx-theme="dark"] .sx-support__close:hover, body[data-ux-theme="dark"] .sx-support__close:hover { background: #2E241E; color: #FFFFFF; }
html[data-sx-theme="dark"] .sx-support__help, body[data-ux-theme="dark"] .sx-support__help { border-top-color: rgba(255, 236, 220, .12); }
html[data-sx-theme="dark"] .sx-support__help span, body[data-ux-theme="dark"] .sx-support__help span { color: #B3A69A; }
html[data-sx-theme="dark"] .sx-support__help a, body[data-ux-theme="dark"] .sx-support__help a { color: #FF9A4D; }
html[data-sx-theme="dark"] .sx-support__launcher:focus-visible, body[data-ux-theme="dark"] .sx-support__launcher:focus-visible { outline-color: #FFFFFF; }

/* The older WhatsApp-only float is replaced by the launcher (its WhatsApp option uses the same link). */
html.sx-support-ready .sx-wa-float { display: none !important; }
/* Desktop: the signed-in balance pill moves to the lower left so it never sits under the launcher. */
@media (min-width: 901px) { html.sx-support-ready body .acp-sf-fab { left: auto !important; right: 24px !important; } }

@media (prefers-reduced-motion: reduce) { .sx-support, .sx-support__launcher, .sx-support__panel { transition: none; animation: none; } }
@media print { .sx-support { display: none !important; } }

/* ==================================================================
 * F-003 (11.6.0-solomax.56, owner decisions of 26 Sep 2026): the support button never covers the page, and never
 * sits over (or brighter than) the purchase dialog.
 * ================================================================== */

/* PANEL-SUPPORT-NEUTRAL (replaces the .53 PANEL-SUPPORT-GREEN): WhatsApp green promised a WhatsApp chat that exists
 * only when a WhatsApp number is saved. In the customer portal the button is neutral, like the round header buttons
 * (ink on white, about 17:1); the storefront's floating button keeps brand orange. */
html body.acp-ux .sx-support__launcher { background: #FFFFFF; color: #1C1410; border: 1.5px solid #FFD2A8; box-shadow: 0 10px 24px rgba(28, 20, 16, .16); }
html body.acp-ux .sx-support__launcher:hover { background: #FFF1E6; border-color: #FD7702; }
html body.acp-ux .sx-support__launcher:focus-visible { outline: 3px solid #C2410C; outline-offset: 3px; }
html body.acp-ux[data-ux-theme="dark"] .sx-support__launcher { background: #1F1916; color: #F3EDE6; border-color: rgba(253, 119, 2, .38); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
html body.acp-ux[data-ux-theme="dark"] .sx-support__launcher:hover { background: #2A211C; border-color: #FF9A4D; }
html body.acp-ux[data-ux-theme="dark"] .sx-support__launcher:focus-visible { outline-color: #FF9A4D; }

/* SUPPORT-DOCKED (11.6.0-solomax.56) is removed in 11.6.0-solomax.57.1: the storefront's Support button no longer sits
 * in the page header; it floats at the lower right on every page (SUPPORT-BUBBLE below). */

/* SUPPORT-WA: the green comes back only with a real WhatsApp link (the script adds .sx-support--wa); it wins over the
 * neutral, docked and dark styles above. Ink on #25D366 is about 9:1. */
html body .sx-support.sx-support--wa .sx-support__launcher { background: #25D366; border-color: #25D366; color: #1C1410; }
html body .sx-support.sx-support--wa .sx-support__launcher:hover { background: #1EBE5A; border-color: #1EBE5A; }

/* FLOAT-LAYERS: while a dialog, a menu, the install steps or the on-screen keyboard own the screen, the floating
 * helpers step aside. visibility (not display) also takes them out of the Tab order, and scroll-nav.js skips hidden
 * ones. The z-index stays 90 on purpose: under every backdrop (8990, 9400, 9999, the install sheet). */
html body.ux-modal-open .sx-support, html body.ux-modal-open .sx-scrollnav,
html body.ux-nav-open .sx-support, html body.ux-nav-open .sx-scrollnav,
html body.nav-drawer-open .sx-support, html body.nav-drawer-open .sx-scrollnav,
html.sx-pwa-lock .sx-support, html.sx-pwa-lock .sx-scrollnav,
html.sx-typing .sx-support, html.sx-typing .sx-scrollnav { visibility: hidden !important; }
/* The sign-in pages' top-right button (RC-10, panel-fixes.css) scrolls with the page, so it stays while typing. */
@media (max-width: 560px) { html.sx-typing body.acp-ux--auth .sx-support { visibility: visible !important; } }

/* SUPPORT-SHORT: on short screens (460px tall or less: a phone held sideways, 200% zoom) the floating button is a
 * compact 44px circle. */
@media (max-height: 460px) {
	.sx-support .sx-support__launcher { width: 44px; height: 44px; padding: 0; }
	.sx-support .sx-support__launcher svg { width: 22px; height: 22px; }
	.sx-support .sx-support__label { display: none; }
}

/* SUPPORT-DOCK-ROOM (the header room kept free until the button docked) is removed in 11.6.0-solomax.57.1 with the
 * docking, so the header buttons keep one place from the first paint. */

/* STOREFRONT-BALANCE (11.6.0-solomax.56, F-003): the signed-in balance pill no longer floats over the page. The script
 * puts it in the header before the account button when there is room (.sx-fab--docked); otherwise it stays hidden, as
 * it already was below 901px. The theme's pill colours and the hidden-balance mask still apply. (Its class name
 * sx-fab--docked is the pill's own; it has nothing to do with the removed SUPPORT-DOCKED.) */
html body a.acp-sf-fab:not(.sx-fab--docked) { display: none !important; }
html body .nt-header-actions > a.acp-sf-fab.sx-fab--docked {
	position: relative !important;
	inset: auto !important;
	inset-inline-end: auto !important;
	z-index: auto !important;
	flex: 0 0 auto;
	width: auto !important;
	min-width: 0 !important;
	height: 40px !important;
	padding: 0 14px !important;
	gap: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
html body .nt-header-actions > a.acp-sf-fab.sx-fab--docked svg { display: none !important; }
html body .nt-header-actions > a.acp-sf-fab.sx-fab--docked > span { display: grid; gap: 1px; line-height: 1.1; text-align: right; white-space: nowrap; }
html body .nt-header-actions > a.acp-sf-fab.sx-fab--docked small { font-size: 9px; letter-spacing: .1em; }
html body .nt-header-actions > a.acp-sf-fab.sx-fab--docked strong { font-size: 14px; }
html body .nt-header-actions > a.acp-sf-fab.sx-fab--docked:focus-visible { outline: 2px solid #C2410C; outline-offset: 2px; }
html[data-sx-theme="dark"] body .nt-header-actions > a.acp-sf-fab.sx-fab--docked:focus-visible { outline-color: #FF9A4D; }

/* SUPPORT-COLOURS (owner's choice, 26 Sep 2026; replaces the neutral colours above): the customer portal's floating
 * button is WhatsApp green as in .53-.55, in light and dark alike; since 11.6.0-solomax.57.1 the storefront's floating
 * bubble is the same green button (it was brand orange in the header). Ink icon: about 9:1 on #25D366. */
html body:not(.acp-ux) .sx-support .sx-support__launcher,
html[data-sx-theme="dark"] body:not(.acp-ux) .sx-support .sx-support__launcher,
html body.acp-ux .sx-support .sx-support__launcher,
html body.acp-ux[data-ux-theme="dark"] .sx-support .sx-support__launcher { background: #25D366; border-color: #25D366; color: #1C1410; box-shadow: 0 10px 24px rgba(18, 140, 126, .28); }
html body:not(.acp-ux) .sx-support .sx-support__launcher:hover,
html[data-sx-theme="dark"] body:not(.acp-ux) .sx-support .sx-support__launcher:hover,
html body.acp-ux .sx-support .sx-support__launcher:hover,
html body.acp-ux[data-ux-theme="dark"] .sx-support .sx-support__launcher:hover { background: #1EBE5A; border-color: #1EBE5A; }
html body .sx-support .sx-support__launcher:focus-visible { outline: 3px solid #1C1410; outline-offset: 3px; }
html[data-sx-theme="dark"] body .sx-support .sx-support__launcher:focus-visible,
html body[data-ux-theme="dark"] .sx-support .sx-support__launcher:focus-visible { outline-color: #FFFFFF; }

/* SUPPORT-BUBBLE (11.6.0-solomax.57.1, owner's request of 26 Sep 2026, "like the competitor's store"): on every storefront
 * page and at every width the Support button is the portal's round 48px green button (icon only; its accessible name
 * stays "Get help from support"; the same "Need help?" card opens above it), floating at the lower right, 16px from
 * the edges on phones and 24px from 769px (the .sx-support defaults above), lifted by the script above the product buy
 * bar or the analytics choice. The up/down scroll button sits at the lower left in the same band (scroll-nav.css). It
 * steps aside while a dialog, the menu, the install steps or the keyboard are open (FLOAT-LAYERS above, and solomax.css
 * for the search dialog), and is a 44px circle on short screens. */
html body:not(.acp-ux) .sx-support__launcher { width: 48px; height: 48px; padding: 0; gap: 0; box-shadow: 0 10px 24px rgba(18, 140, 126, .28); }
html body:not(.acp-ux) .sx-support__launcher svg { width: 22px; height: 22px; }
html body:not(.acp-ux) .sx-support__label { display: none; }
@media (max-height: 460px) { html body:not(.acp-ux) .sx-support__launcher { width: 44px; height: 44px; } }
html[data-sx-theme="dark"] body:not(.acp-ux) .sx-support__launcher { box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }

/* 11.6.0-solomax.57.1 review: on phones and tablets the floating bubble sat over the end of the footer's last line
 * ("Built for Nigerian creators, students and businesses."); wider screens already reserve this room. */
@media (max-width: 768px) { html body.nt-v6:not(.single-product) .nt-footer-bottom { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; } }

/* SUPPORT-DOCK (11.6.0-solomax.61, owner, 28 Sep 2026): on a product page on a phone the green button sits inside the
 * sticky price bar, beside "Sign in to buy" / "Buy now" (support-launcher.js), so it never covers a button; the floating
 * bubble is hidden while the bar shows. Same green, same icon, same "Need help?" card (opening above the bar). */
.sx-buybar-help { flex: 0 0 auto; width: 44px; height: 44px; min-height: 44px; margin: 0; margin-inline-start: auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #25D366; background: #25D366; color: #1C1410; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sx-buybar-help:hover { background: #1EBE5A; border-color: #1EBE5A; }
.sx-buybar-help:focus-visible { outline: 3px solid #1C1410; outline-offset: 2px; }
html[data-sx-theme="dark"] .sx-buybar-help:focus-visible { outline-color: #FFFFFF; }
.sx-buybar-help svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body .acp-sf-buybar .sx-buybar-help + .acp-sf-buybar__btn { margin-inline-start: 10px; }
html body .sx-support.sx-support--docked .sx-support__launcher { display: none !important; }

/* .61: with the support button in the bar, the price never shrinks; a long buy label ("Se connecter pour acheter")
 * wraps to two lines inside its button instead. */
html body .acp-sf-buybar { gap: 10px !important; }
html body .acp-sf-buybar .acp-sf-buybar__info { flex: 0 0 auto; }
html body .acp-sf-buybar .acp-sf-buybar__btn { flex: 0 1 auto; min-width: 0; padding: 6px 16px !important; white-space: normal; text-align: center; line-height: 1.15; }