/**
 * FCX B2B Portal — registration, login and customer dashboard.
 *
 * Loaded only on the page that carries the [fcx_b2b_*] shortcodes, so it
 * never adds weight to the rest of the site. Reuses the theme's existing
 * design tokens (--fcx-navy, --fcx-ink, --fcx-radius, etc.) so the portal
 * matches the rest of FCX World Group without a separate colour system.
 */

.fcx-b2b-portal {
	display: grid;
	grid-template-columns: 0.85fr 1.35fr;
	gap: 24px;
	align-items: start;
	/* max-width/padding intentionally NOT set here — a later rule in
	   this same file (search "break-out") sets max-width:100vw
	   !important on .fcx-b2b-portal and controls the actual content
	   width via a calc()-based padding instead, for a full-bleed
	   layout that escapes the theme's normal content container. Setting
	   competing values here would be dead, misleading code — confirmed
	   by testing: an earlier max-width:1080px declaration here had zero
	   effect because of that later !important rule. That later rule's
	   980px reference is the actual number to change if the desired
	   content width changes again. */
}
@media (max-width: 760px) {
	.fcx-b2b-portal { grid-template-columns: 1fr; }
}

.fcx-b2b-card {
	background: #fff;
	border: 1px solid var(--fcx-border, #e2e5ea);
	border-radius: var(--fcx-radius-lg, 12px);
	padding: 28px 26px;
	box-shadow: 0 2px 18px rgba(20, 24, 31, .05);
}
.fcx-b2b-card h2,
.fcx-b2b-card h3 {
	font-family: var(--fcx-heading-font);
	color: var(--fcx-ink);
	margin: 0 0 6px;
}
.fcx-b2b-card h3 { font-size: 17px; }
.fcx-b2b-sub { color: var(--fcx-subtle, #8a90a0); font-size: 14px; margin: 0 0 18px; }

.fcx-b2b-notice {
	background: #eef3fb;
	border: 1px solid #cfdcf2;
	color: var(--fcx-navy-deep, #16264a);
	border-radius: var(--fcx-radius-sm, 4px);
	padding: 12px 14px;
	font-size: 14px;
	margin: 0 0 18px;
}
.fcx-b2b-notice--ok { background: #ecf8f0; border-color: #c9ecd4; color: #1c6b3a; }
.fcx-b2b-notice--error { background: #fdecec; border-color: #f3c8c8; color: #a4262c; }
.fcx-b2b-notice--success { background: #e7f8ee; border-color: #b8ecce; color: #1c6b3a; }
.fcx-b2b-notice--warn { background: #fff8e6; border-color: #ffe9a8; color: #8a6414; }

.fcx-b2b-form { display: flex; flex-direction: column; gap: 12px; }
.fcx-b2b-form label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--fcx-ink-soft, #3a4150);
	position: relative;
}
.fcx-b2b-form label span { color: #c0392b; margin-left: 2px; }
/* Icon sizing for this form's labels is handled entirely via inline
   attributes on the SVG tag itself (see fcx_b2b_form_icon(), inc/b2b.php)
   rather than CSS — the previous approach here relied on external
   selectors that a real screenshot showed rendering icons at massive,
   uncontrolled size. Removed rather than left as dead/misleading rules. */
.fcx-b2b-form input[type="text"],
.fcx-b2b-form input[type="email"],
.fcx-b2b-form input[type="url"],
.fcx-b2b-form input[type="password"],
.fcx-b2b-form input[type="number"],
.fcx-b2b-form select,
.fcx-b2b-form textarea {
	font: 400 13.5px/1.4 var(--fcx-body-font);
	color: var(--fcx-ink);
	border: 1px solid #d7dbe3;
	border-radius: var(--fcx-radius-sm, 4px);
	padding: 7px 10px;
	background: #fff;
}
.fcx-b2b-form input:focus,
.fcx-b2b-form select:focus,
.fcx-b2b-form textarea:focus {
	outline: none;
	border-color: var(--fcx-navy, #22407a);
	box-shadow: 0 0 0 3px rgba(34, 64, 122, .12);
}
.fcx-b2b-form--review {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
}
.fcx-b2b-form--review label { display: flex; flex-direction: column; gap: 6px; }
.fcx-b2b-review-actions {
	grid-column: 1 / -1;
	display: flex;
	gap: 12px;
	margin-top: 6px;
}
@media (max-width: 640px) {
	.fcx-b2b-form--review { grid-template-columns: 1fr; }
}
/* .fcx-hp honeypot styling removed — the honeypot field it targeted
   was removed entirely from the registration form after the live debug
   trace proved it blocked a real human applicant. See inc/b2b.php,
   fcx_b2b_handle_register(), for the full explanation. */

/* Multi-section registration form: grouped headings + responsive 2-col grid. */
.fcx-b2b-form--register { gap: 0; }
.fcx-b2b-form__section {
	margin: 26px 0 14px;
	padding-top: 18px;
	border-top: 1px solid #eef0f3;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--fcx-navy, #22407a);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.fcx-b2b-form__section:first-of-type { margin-top: 6px; padding-top: 0; border-top: none; }
.fcx-b2b-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 14px;
}
.fcx-b2b-form__grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.fcx-b2b-form__full { grid-column: 1 / -1; }
@media (max-width: 560px) {
	.fcx-b2b-form__grid,
	.fcx-b2b-form__grid--3col { grid-template-columns: 1fr; }
}
@media (min-width: 561px) and (max-width: 820px) {
	.fcx-b2b-form__grid--3col { grid-template-columns: 1fr 1fr; }
}

.fcx-b2b-form__inline-check {
	flex-direction: row !important;
	align-items: center;
	gap: 8px !important;
	font-weight: 600;
	font-size: 11.5px;
	text-transform: none;
	letter-spacing: normal;
	color: var(--fcx-ink-soft, #3a4150) !important;
}
.fcx-b2b-form__inline-check input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
.fcx-b2b-form__consent {
	margin-top: 8px;
	padding: 14px 16px;
	background: #f7f8fa;
	border-radius: 10px;
	line-height: 1.5;
}

/* Dashboard "communication preferences" callout inside Company Details. */
.fcx-b2b-consent-block {
	margin: 6px 0 4px;
	padding: 14px 16px;
	background: #f7f8fa;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fcx-b2b-consent-block__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--fcx-navy, #22407a);
}
.fcx-b2b-consent-block__note { margin: 2px 0 0; font-size: 12px; color: var(--fcx-subtle, #8a90a0); font-weight: 500; }

.fcx-b2b-forgot { font-size: 13px; color: var(--fcx-navy); text-align: right; }

/* -------------------------------------------------------------- dashboard */

.fcx-b2b-dash { max-width: var(--fcx-container, 1360px); margin: 0 auto; padding: 48px var(--fcx-gutter, 20px) 80px; }
.fcx-b2b-dash__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 16px;
	margin-bottom: 22px;
}
.fcx-b2b-dash__head h2 { font-family: var(--fcx-heading-font); margin: 0 0 4px; }
.fcx-b2b-dash__meta { color: var(--fcx-subtle, #8a90a0); font-size: 14px; margin: 0 0 8px; }
.fcx-b2b-logout {
	font-size: 13px;
	font-weight: 700;
	color: var(--fcx-navy);
	border: 1px solid #d7dbe3;
	border-radius: 999px;
	padding: 8px 16px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}
.fcx-b2b-logout:hover { background: var(--fcx-paper, #f7f8fa); }

.fcx-b2b-status {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	background: #eef1f5;
	color: #55606f;
}
.fcx-b2b-status--approved,
.fcx-b2b-status--paid,
.fcx-b2b-status--completed { background: #e5f6ea; color: #1c6b3a; }
.fcx-b2b-status--pending,
.fcx-b2b-status--unpaid { background: #fef3e0; color: #93650a; }
.fcx-b2b-status--rejected,
.fcx-b2b-status--suspended,
.fcx-b2b-status--cancelled { background: #fdecec; color: #a4262c; }

.fcx-b2b-dash__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
.fcx-b2b-dash__grid .fcx-b2b-card--wide { grid-column: 1 / -1; }
@media (max-width: 860px) {
	.fcx-b2b-dash__grid { grid-template-columns: 1fr; }
}

.fcx-b2b-table { width: 100%; border-collapse: collapse; font-family: var(--fcx-body-font, 'Inter', system-ui, sans-serif) !important; font-size: 11.5px !important; line-height: 1.4 !important; color: var(--fcx-ink, #14181f); }
.fcx-b2b-table th,
.fcx-b2b-table td {
	text-align: left;
	padding: 7px 8px;
	vertical-align: middle;
	border-bottom: 1px solid #eef0f3;
}
.fcx-b2b-table th { color: var(--fcx-subtle, #8a90a0); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.fcx-b2b-empty { color: var(--fcx-subtle, #8a90a0); font-size: 14px; }

.fcx-b2b-bank-details {
	background: var(--fcx-paper, #f7f8fa);
	border: 1px solid #e2e5ea;
	border-radius: var(--fcx-radius, 8px);
	padding: 18px 20px;
	margin-top: 16px;
}
.fcx-b2b-bank-details h3 { margin: 0 0 8px; font-family: var(--fcx-heading-font); }
.fcx-b2b-bank-details ul { margin: 8px 0 0; padding-left: 18px; }

/* -------------------------------------------------------------- premium polish */

.fcx-b2b-portal,
.fcx-b2b-dash { font-family: var(--fcx-body-font); }

/* Part 2B — compacted from the previous, more decorative "landing
   page" proportions (34px/30px card padding, 22px card headings, pill-
   shaped uppercase CTA buttons, a large gradient header banner) down
   to professional B2B SaaS density, per the explicit "avoid landing-
   page style sections / oversized CTA buttons" requirement. These
   four rules affect the most screens across the whole portal, so
   fixing them here has the broadest, highest-value impact. */
.fcx-b2b-portal .fcx-b2b-card { padding: 20px 22px; }
.fcx-b2b-portal .fcx-b2b-card h2 { font-size: 16px; font-weight: 700; letter-spacing: normal; }

/* Compact, consistent button sizing across the whole B2B portal —
   confirmed the site-wide .fcx-btn base (style.css, built for the
   public marketing site's large CTA buttons: 15px/28px padding,
   14px text) was still being inherited almost everywhere in this
   portal, since only one narrow selector
   (.fcx-b2b-cart-proforma .fcx-btn--outline) previously compacted it.
   Scoped to .fcx-b2b-portal specifically so the public site's own
   marketing buttons are completely unaffected. */
.fcx-b2b-portal .fcx-btn {
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
}
.fcx-b2b-portal .fcx-btn--outline {
	padding: 8px 16px;
	font-size: 13px;
}

.fcx-btn.fcx-btn--navy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--fcx-navy, #22407a);
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background .15s ease;
}
.fcx-btn.fcx-btn--navy:hover {
	background: #1a3260;
	/* Explicit, not relying on inheritance from the base rule above —
	 * per the explicit "hover must NEVER turn the text blue/black/
	 * dark" requirement. The base rule already sets color: #fff, and
	 * this file's own dependency on style.css (see the wp_enqueue_style
	 * call in inc/b2b.php) means this rule should already win any
	 * cascade ambiguity — but declaring color explicitly here removes
	 * that ambiguity entirely rather than relying on it.
	 */
	color: #fff;
}
.fcx-btn.fcx-btn--navy:hover svg,
.fcx-btn.fcx-btn--navy:focus svg,
.fcx-btn.fcx-btn--navy:active svg {
	color: #fff;
}
.fcx-btn.fcx-btn--navy:focus,
.fcx-btn.fcx-btn--navy:active {
	background: #1a3260;
	color: #fff;
}

/* Dashboard header — compacted from a decorative gradient "identity
   banner" (28px/30px padding, 24px heading, radial gradient overlay)
   to a normal, professional application header bar. */
.fcx-b2b-dash__head {
	background: var(--fcx-navy, #22407a);
	border-radius: 8px;
	padding: 16px 20px;
	position: relative;
	overflow: hidden;
}
/* Subtle automotive visual treatment inside the blue header — a small
   vehicle icon crossing a thin line once every ~14s. Absolutely
   positioned so it can never overlap the header's own text/buttons
   (z-index below the header's actual content, and the header's own
   padding keeps the content clear of this strip regardless). */
.fcx-b2b-dash__motion {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 30px;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.fcx-b2b-dash__motion-track {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 4px;
	height: 1px;
	background: rgba(255, 255, 255, 0.20);
}
/* Larger and more visible than the previous 16px glyph, but still a
   background treatment: it lives in this bottom strip only, sits below
   the header content in z-order, and the header's own padding keeps
   the company name, status badge and Log out clear of it. */
.fcx-b2b-dash__motion-car {
	position: absolute;
	bottom: 3px;
	left: -70px;
	display: block;
	color: rgba(255, 255, 255, 0.42);
	animation: fcx-dash-motion 18s linear infinite;
}
.fcx-b2b-dash__motion-car svg { display: block; }
@keyframes fcx-dash-motion {
	0% { transform: translateX(0); opacity: 0; }
	6% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateX(calc(100vw + 70px)); opacity: 0; }
}
/* Accessibility: no motion at all for users who ask for none — the
   silhouette is decorative, so it is removed rather than parked. */
@media (prefers-reduced-motion: reduce) {
	.fcx-b2b-dash__motion { display: none; }
}
/* Mobile safe: the header is much tighter, so the strip is dropped
   rather than allowed to crowd the content. */
@media (max-width: 640px) {
	.fcx-b2b-dash__motion { display: none; }
}
.fcx-b2b-dash__head::after {
	content: none;
}
/* Every piece of normal text inside this navy header must be white or
   an appropriate light tone. The company name specifically was still
   rendering black, because the surrounding theme's own heading colour
   won over the header's inherited colour. Scoped strictly to
   .fcx-b2b-dash__head (never a global selector), and deliberately
   NOT applied to .fcx-b2b-status--* badges, which keep their own
   readable tinted colours defined just below. */
.fcx-b2b-dash__head,
.fcx-b2b-dash__head h1,
.fcx-b2b-dash__head h2,
.fcx-b2b-dash__head h3,
.fcx-b2b-dash__head p,
.fcx-b2b-dash__head span:not([class*="fcx-b2b-status"]),
.fcx-b2b-dash__head strong,
.fcx-b2b-dash__head a { color: #fff; }
.fcx-b2b-dash__head svg { color: #fff; }
.fcx-b2b-dash__head > div { position: relative; z-index: 1; }
/* Belt-and-suspenders fix for the reported "still centered" defect —
   even though justify-content: space-between on the parent (this
   file's earlier fix) already produces the correct left/right
   positioning for exactly two normal-flow children (the company-info
   div and the Logout link; the pickup animation is position: absolute
   and out of flow), these two rules make that same result impossible
   to lose regardless of any other rule this project's cascade might
   apply to .fcx-b2b-dash__head that this audit did not find — a
   margin-right: auto on the LEFT item and margin-left: auto on the
   RIGHT item is a standard, independently-reliable way to pin flex
   children to opposite ends that does not depend on justify-content
   at all. Scoped narrowly (a specific child selector, not a class
   this could accidentally style elsewhere) so it cannot affect
   anything outside this exact header.
   Company-info div: the one plain, un-classed <div> direct child. */
.fcx-b2b-dash__head > div:not(.fcx-b2b-dash__motion) {
	margin-right: auto;
	text-align: left;
}
.fcx-b2b-dash__head > .fcx-b2b-logout {
	margin-left: auto;
}
.fcx-b2b-dash__head h2 { color: #fff !important; font-size: 17px; font-weight: 700; }
.fcx-b2b-dash__meta { color: rgba(255, 255, 255, .78); }
.fcx-b2b-dash__head .fcx-b2b-status { background: rgba(255, 255, 255, .14); color: #fff; }
.fcx-b2b-dash__head .fcx-b2b-status--approved { background: rgba(87, 214, 140, .22); color: #a9f0c4; }
.fcx-b2b-dash__head .fcx-b2b-status--pending { background: rgba(255, 191, 90, .22); color: #ffd48f; }
.fcx-b2b-dash__head .fcx-b2b-status--rejected,
.fcx-b2b-dash__head .fcx-b2b-status--suspended { background: rgba(255, 110, 110, .2); color: #ffb3b3; }
.fcx-b2b-dash__head .fcx-b2b-logout {
	color: #fff;
	border-color: rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .08);
}
.fcx-b2b-dash__head .fcx-b2b-logout:hover {
	background: rgba(255, 255, 255, .18);
	/* Explicit, not left to inherit — matches the same defensive
	 * pattern already applied to .fcx-btn.fcx-btn--navy:hover. */
	color: #fff;
}

@media (max-width: 560px) {
	.fcx-b2b-dash__head { flex-wrap: wrap; }
}

.fcx-b2b-status { font-weight: 800; }

/* -------------------------------------------------------------- products table */

.fcx-b2b-card--products { grid-column: 1 / -1; order: -1; }
.fcx-b2b-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.fcx-b2b-card__head h3 { margin: 0; }
.fcx-b2b-search {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1.5px solid #e2e5ea;
	border-radius: 999px;
	overflow: hidden;
	background: #f7f8fa;
}
.fcx-b2b-search input {
	border: none;
	background: transparent;
	padding: 9px 6px 9px 16px;
	font-size: 13.5px;
	min-width: 200px;
	outline: none;
}
.fcx-b2b-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: none;
	background: var(--fcx-navy, #22407a);
	color: #fff;
	cursor: pointer;
}
.fcx-b2b-search button svg { color: #fff !important; }

/* -------------------------------------------------------------- product filter bar
   White filter cards with blue/dark-blue icons — deliberately NOT the
   large dark-navy "Find Your Perfect Fit" treatment used on the public
   shop page (.fcx-fit in style.css); same taxonomy fields/icons/labels,
   different, lighter visual weight suited to sitting inside the
   dashboard rather than as a hero panel. */

.fcx-b2b-fit { margin-bottom: 20px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.fcx-b2b-fit__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 1 1 auto;
	margin-bottom: 0;
}
.fcx-b2b-fit__field {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--fcx-navy, #22407a);
	border: 1px solid var(--fcx-navy, #22407a);
	border-radius: 8px;
	padding: 8px 10px;
	flex: 1 1 170px;
	min-width: 150px;
	transition: background .15s ease;
}
.fcx-b2b-fit__field:focus-within { background: #1a3260; }
.fcx-b2b-fit__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
}
.fcx-b2b-fit__body { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.fcx-b2b-fit__label { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.fcx-b2b-fit__body select,
.fcx-b2b-fit__body input {
	border: none;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: transparent;
	width: 100%;
}
.fcx-b2b-fit__body select option { color: var(--fcx-ink, #16264a); }
.fcx-b2b-fit__body input::placeholder { color: rgba(255, 255, 255, .6); }
.fcx-b2b-fit__body select:focus,
.fcx-b2b-fit__body input:focus { outline: none; }
.fcx-b2b-fit__actions { display: flex; align-items: center; gap: 14px; }
.fcx-b2b-fit__submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--fcx-navy, #22407a);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.fcx-b2b-fit__submit svg { color: #fff !important; }
.fcx-b2b-fit__submit:hover { background: #1a3260; }
.fcx-b2b-fit__reset { font-size: 11.5px; font-weight: 600; color: var(--fcx-navy, #22407a); text-decoration: underline; }
.fcx-b2b-fit__reset:hover { opacity: .75; }
@media (max-width: 640px) {
	.fcx-b2b-fit { flex-direction: column; align-items: stretch; }
	.fcx-b2b-fit__field { flex: 1 1 100%; }
	.fcx-b2b-fit__actions { justify-content: stretch; }
	.fcx-b2b-fit__submit { flex: 1 1 auto; justify-content: center; }
}

.fcx-b2b-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid #eef0f3; }
.fcx-b2b-table--products { font-size: 11.5px; }
.fcx-b2b-table--products th,
.fcx-b2b-table--products td {
	border-right: 1px solid #eef0f3;
}
.fcx-b2b-table--products th:last-child,
.fcx-b2b-table--products td:last-child {
	border-right: none;
}
.fcx-b2b-table--products thead th {
	background: var(--fcx-navy, #22407a);
	color: #fff;
	position: sticky;
	top: 0;
}
.fcx-b2b-table--products tbody tr:hover { background: #fafbfd; }
.fcx-b2b-table--products td { vertical-align: middle; }

.fcx-b2b-td-product { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.fcx-b2b-thumb {
	display: inline-flex;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 7px;
	overflow: hidden;
	background: #f2f4f8;
	border: 1px solid #eef0f3;
}
.fcx-b2b-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcx-b2b-pname { font-weight: 700; font-size: 11.5px; color: var(--fcx-navy, #22407a); text-decoration: none; }
.fcx-b2b-pname:hover { color: var(--fcx-navy); text-decoration: underline; }
.fcx-b2b-td-sku { color: var(--fcx-navy, #22407a); font-size: 11.5px; font-weight: 600; }
.fcx-b2b-td-price { white-space: nowrap; }
.fcx-b2b-td-brand { font-weight: 600; color: var(--fcx-navy, #22407a); font-size: 11.5px; white-space: nowrap; }
.fcx-b2b-td-compat { color: var(--fcx-navy, #22407a); font-size: 11.5px; max-width: 220px; }
.fcx-b2b-stock {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}
.fcx-b2b-stock--in { background: #e7f8ee; color: #1c6b3a; }
.fcx-b2b-stock--low { background: #fff3e0; color: #b98a1f; }
.fcx-b2b-stock--out { background: #fdecec; color: #a4262c; }
.fcx-b2b-stock--backorder { background: #eef0f3; color: #5a6478; }

.fcx-b2b-price-now { font-weight: 800; color: var(--fcx-navy-deep, #16264a); }
.fcx-b2b-price-was { display: block; font-size: 11.5px; color: #9aa2b1; text-decoration: line-through; }
.fcx-b2b-price-quote { font-size: 11.5px; font-weight: 600; color: var(--fcx-navy, #22407a); }
.fcx-b2b-discount-pill {
	display: inline-block;
	background: linear-gradient(135deg, #ffd98f 0%, #f0a93e 100%);
	color: #1c284a;
	font-weight: 800;
	font-size: 11.5px;
	padding: 3px 9px;
	border-radius: 999px;
}
.fcx-b2b-muted { color: #b4bac6; }

.fcx-b2b-addform { display: flex; align-items: center; gap: 6px; }
.fcx-b2b-addform input[type="number"] {
	width: 58px;
	padding: 7px 6px;
	border: 1px solid #d7dbe3;
	border-radius: 6px;
	font-size: 13px;
	text-align: center;
}
.fcx-b2b-addform button {
	background: var(--fcx-navy, #22407a);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease;
}
.fcx-b2b-addform button:hover { background: var(--fcx-navy-deep, #16264a); }

.fcx-b2b-stepper { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.fcx-b2b-stepper input[type="number"] {
	width: 44px;
	border-radius: 0;
	border-left: none;
	border-right: none;
	-moz-appearance: textfield;
}
.fcx-b2b-stepper input[type="number"]::-webkit-outer-spin-button,
.fcx-b2b-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fcx-b2b-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 30px;
	flex: 0 0 26px;
	border: 1px solid #d7dbe3;
	background: #f7f8fa;
	color: var(--fcx-navy, #22407a);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
.fcx-b2b-stepper__btn--minus { border-radius: 6px 0 0 6px; }
.fcx-b2b-stepper__btn--plus { border-radius: 0 6px 6px 0; }
.fcx-b2b-stepper__btn:hover { background: #eef0f3; }
.fcx-b2b-stepper__add {
	background: var(--fcx-navy, #22407a);
	color: #fff !important;
	border: none;
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease;
}
.fcx-b2b-stepper__add:hover { background: var(--fcx-navy-deep, #16264a); }

.fcx-b2b-locked {
	font-size: 12px;
	font-weight: 700;
	color: #b98a1f;
	background: #fef3e0;
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.fcx-b2b-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.fcx-b2b-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid var(--fcx-navy, #22407a);
	background: #fff;
	color: var(--fcx-navy, #22407a);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	transition: background .15s ease, color .15s ease;
}
.fcx-b2b-pagination a.is-active { background: var(--fcx-navy, #22407a); border-color: var(--fcx-navy); color: #fff; }
.fcx-b2b-pagination a:hover:not(.is-active) { background: var(--fcx-navy, #22407a); color: #fff; }

@media (max-width: 480px) {
	.fcx-b2b-pagination { gap: 4px; }
	.fcx-b2b-pagination a { width: 30px; height: 30px; font-size: 12px; }
}

.fcx-b2b-order-bar {
	position: sticky;
	bottom: 0;
	margin: 20px -1px -1px;
	padding: 14px 20px;
	background: #fff;
	border-top: 1px solid #eef0f3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-radius: 0 0 10px 10px;
	z-index: 5;
}
.fcx-b2b-order-bar__hint { font-size: 11.5px; color: var(--fcx-subtle, #8a90a0); font-weight: 600; }
.fcx-b2b-order-bar .fcx-btn--navy {
	padding: 8px 16px;
	font-size: 13px;
}
@media (max-width: 640px) {
	.fcx-b2b-order-bar { flex-direction: column; align-items: stretch; text-align: center; }
}

/* -------------------------------------------------------------- payment methods */

.fcx-b2b-card--payment .fcx-b2b-paylist,
.fcx-b2b-card--payment .fcx-b2b-bankbox { max-width: 480px; }
.fcx-b2b-paylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fcx-b2b-paylist li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #eef0f3;
	border-radius: 10px;
	font-size: 11.5px;
}
.fcx-b2b-paylist__dot { width: 9px; height: 9px; border-radius: 50%; background: #c6ccd7; flex: 0 0 9px; }
.fcx-b2b-paylist li.is-enabled .fcx-b2b-paylist__dot { background: #34c37a; box-shadow: 0 0 0 3px rgba(52, 195, 122, .18); }
.fcx-b2b-paylist__name { font-weight: 700; color: var(--fcx-navy, #22407a); flex: 1 1 auto; }
.fcx-b2b-paylist__status { font-size: 11.5px; color: var(--fcx-subtle, #8a90a0); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.fcx-b2b-paylist li.is-enabled .fcx-b2b-paylist__status { color: #1c6b3a; }

.fcx-b2b-bankbox {
	margin-top: 16px;
	padding: 16px 18px;
	background: linear-gradient(135deg, #f7f9fd 0%, #eef3fb 100%);
	border: 1px solid #d9e4f5;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.fcx-b2b-bankbox__label { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fcx-navy); margin-bottom: 4px; }
.fcx-b2b-bankbox__line { font-size: 11.5px; color: var(--fcx-navy, #22407a); }

@media (max-width: 900px) {
	/*
	 * Genuine stacked-card layout for the products table — not just on
	 * phones but through tablet widths too, to satisfy "must fit the
	 * screen with no horizontal scrolling" across more than just the
	 * narrowest devices. Standard "responsive table" CSS technique: hide
	 * the header row, turn each <tr> into a bordered card, and use each
	 * <td>'s data-label attribute (set in PHP — see
	 * fcx_b2b_render_products_table_unsafe()) to print its column name
	 * inline via ::before, so every value is still clearly labelled
	 * without the table's header row.
	 */
	.fcx-b2b-table-wrap { overflow-x: visible; border: none; }
	.fcx-b2b-table--products thead { display: none; }
	.fcx-b2b-table--products,
	.fcx-b2b-table--products tbody,
	.fcx-b2b-table--products tr,
	.fcx-b2b-table--products td { display: block; width: 100%; }
	.fcx-b2b-table--products tr {
		margin-bottom: 14px;
		padding: 14px;
		border: 1px solid #eef0f3;
		border-radius: 12px;
		background: #fff;
	}
	.fcx-b2b-table--products tr:hover { background: #fff; }
	.fcx-b2b-table--products td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 7px 0;
		border-bottom: 1px solid #f2f4f8;
		text-align: right;
	}
	.fcx-b2b-table--products td:last-child { border-bottom: none; }
	.fcx-b2b-table--products td[data-label]::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--fcx-subtle, #8a90a0);
		text-align: left;
	}
	.fcx-b2b-table--products td.fcx-b2b-td-product {
		justify-content: flex-start;
		text-align: left;
		padding-bottom: 12px;
		margin-bottom: 4px;
		border-bottom: 1px solid #eef0f3;
	}
	.fcx-b2b-table--products td.fcx-b2b-td-product::before { display: none; }
	.fcx-b2b-table--products .fcx-b2b-stepper { justify-content: flex-end; }
	.fcx-b2b-td-product { min-width: 0; }
	.fcx-b2b-search input { min-width: 120px; }
}

/* -------------------------------------------------------------- order confirmation */

.fcx-b2b-confirm {
	max-width: 640px;
	margin: 40px auto;
	padding: 28px 24px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(20, 34, 64, .06);
	text-align: center;
}
.fcx-b2b-confirm__badge {
	width: 40px;
	height: 40px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: #1c8f52;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fcx-b2b-confirm h2 { font-size: 17px; font-weight: 700; color: var(--fcx-navy-deep, #16264a); margin: 0 0 16px; }
.fcx-b2b-confirm__table { width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 26px; }
.fcx-b2b-confirm__table th,
.fcx-b2b-confirm__table td { padding: 9px 0; vertical-align: middle; border-bottom: 1px solid #eef0f3; font-family: var(--fcx-body-font, 'Inter', system-ui, sans-serif) !important; font-size: 11.5px !important; line-height: 1.4 !important; }
.fcx-b2b-confirm__table th { color: var(--fcx-subtle, #8a90a0); font-weight: 600; width: 40%; }
.fcx-b2b-confirm__table td { color: var(--fcx-navy, #22407a) !important; font-weight: 600; }
.fcx-b2b-confirm .fcx-btn { margin: 6px; }

/* -------------------------------------------------------------- my orders */

.fcx-b2b-orders-table .fcx-b2b-doc-links { display: flex; gap: 6px; flex-wrap: wrap; }
.fcx-b2b-doc-links a {
	font-size: 11.5px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 999px;
	background: #eef2f9;
	color: var(--fcx-navy);
	text-decoration: none;
	white-space: nowrap;
}
.fcx-b2b-doc-links a:hover { background: var(--fcx-navy); color: #fff; }


.fcx-b2b-cart-proforma { margin: 12px 0; }
.fcx-b2b-cart-proforma .fcx-btn--outline { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 13px; }

/* -------------------------------------------------------------- inline admin diagnostic
   Deliberately styled to look like a developer/debug tool, not part of the
   normal customer-facing design — visible only to administrators
   (current_user_can('manage_woocommerce')), never to a B2B customer. */

.fcx-b2b-admin-diag {
	max-width: var(--fcx-container, 1360px);
	margin: 16px auto 0;
	padding: 16px 20px;
	background: #fffbea;
	border: 2px dashed #f0b429;
	border-radius: 10px;
	font-family: monospace;
	font-size: 11.5px;
	color: #4a3b0a;
}
.fcx-b2b-admin-diag strong { display: block; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.fcx-b2b-admin-diag ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fcx-b2b-admin-diag li span { font-weight: 700; }
.fcx-b2b-admin-diag a { color: #22407a; font-weight: 700; }

/* -------------------------------------------------------------- My Order / My Payment */

.fcx-b2b-my-order-table .fcx-b2b-thumb { width: 44px; height: 44px; }
.fcx-b2b-order-totals {
	max-width: 360px;
	margin: 18px 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fcx-b2b-order-totals > div { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--fcx-navy, #22407a); font-weight: 600; }
.fcx-b2b-order-totals__grand {
	padding-top: 10px;
	margin-top: 4px;
	border-top: 2px solid var(--fcx-navy, #22407a);
	font-size: 16px !important;
	font-weight: 800;
	color: var(--fcx-navy-deep, #16264a) !important;
}
.fcx-b2b-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 22px;
}
@media (max-width: 640px) {
	.fcx-b2b-order-totals { max-width: none; }
	.fcx-b2b-order-actions { justify-content: stretch; }
	.fcx-b2b-order-actions .fcx-btn { flex: 1 1 auto; text-align: center; }
}

/* Phase 3 — order timeline and success-screen styling */
.fcx-b2b-card--success { border: 1px solid #1c6b3a; background: #f2faf5; }
.fcx-b2b-card--success h3 { color: #1c6b3a; }
/* Order progress stepper — visually connected steps (dot + label,
   connected by a line), replacing the previous disconnected pill
   badges. Same markup/data loop (fcx_b2b_render_order_detail(),
   inc/fcx-orders.php) — this is a CSS rebuild only, no logic change.
   Completed = green check, current = FCX blue, future = light grey. */
.fcx-b2b-order-timeline {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 0;
	margin: 16px 0 24px;
	padding-bottom: 4px;
}
.fcx-b2b-order-timeline__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1 1 0;
	min-width: 76px;
	position: relative;
	padding: 0 4px;
}
.fcx-b2b-order-timeline__step::before {
	content: "";
	position: absolute;
	top: 11px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: #e2e5ea;
	z-index: 0;
}
.fcx-b2b-order-timeline__step:first-child::before { content: none; }
.fcx-b2b-order-timeline__step--done::before,
.fcx-b2b-order-timeline__step--current::before { background: var(--fcx-navy, #22407a); }
.fcx-b2b-order-timeline__dot {
	position: relative;
	z-index: 1;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #e2e5ea;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.fcx-b2b-order-timeline__step--done .fcx-b2b-order-timeline__dot { background: #1c8f52; }
.fcx-b2b-order-timeline__step--current .fcx-b2b-order-timeline__dot {
	background: var(--fcx-navy, #22407a);
	box-shadow: 0 0 0 3px rgba(34, 64, 122, .18);
}
.fcx-b2b-order-timeline__label {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--fcx-subtle, #8a90a0);
	text-align: center;
	line-height: 1.25;
}
.fcx-b2b-order-timeline__step--done .fcx-b2b-order-timeline__label { color: #1c8f52; }
.fcx-b2b-order-timeline__step--current .fcx-b2b-order-timeline__label { color: var(--fcx-navy, #22407a); font-weight: 700; }

@media (max-width: 700px) {
	.fcx-b2b-order-timeline__step { min-width: 64px; }
	.fcx-b2b-order-timeline__label { font-size: 9.5px; }
}

/* B2B Register wizard — 4 steps shown one at a time, per the explicit
   "do not create a very long scrolling page" requirement. */
.fcx-b2b-form__grid--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
	.fcx-b2b-form__grid--2col { grid-template-columns: 1fr; }
}
.fcx-b2b-form__section--tight { margin: 4px 0 12px; padding-top: 0; border-top: none; }
.fcx-b2b-form__section--tight:first-child { margin-top: 0; }

.fcx-wizard__steps {
	display: flex;
	gap: 6px;
	margin-bottom: 18px;
}
.fcx-wizard__step {
	flex: 1;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--fcx-subtle, #9096a3);
	padding-bottom: 8px;
	border-bottom: 3px solid #e7e9ee;
	transition: color .15s, border-color .15s;
}
.fcx-wizard__step.is-active { color: var(--fcx-navy, #22407a); border-color: var(--fcx-navy, #22407a); }
.fcx-wizard__step.is-done { color: #1c6b3a; border-color: #8fd0a8; }
.fcx-wizard__step svg { vertical-align: -2px; margin-right: 2px; }

.fcx-wizard__panel { display: none; }
.fcx-wizard__panel.is-active { display: block; }

.fcx-wizard__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #eef0f3;
}

.fcx-wizard__review { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.fcx-wizard__review-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid #f1f2f5;
	font-family: var(--fcx-body-font, 'Inter', system-ui, sans-serif);
	font-size: 11.5px;
	line-height: 1.4;
}
.fcx-wizard__review-row span { color: var(--fcx-subtle, #9096a3); }
.fcx-wizard__review-row strong { color: var(--fcx-navy, #22407a); font-weight: 600; text-align: right; }

@media (max-width: 560px) {
	.fcx-wizard__step { font-size: 9.5px; }
}

/* B2B Portal main navigation — Products / My Order / Orders / Documents /
   Messages / Account (fcx_b2b_dashboard_shortcode_unsafe(),
   inc/b2b.php). Modern, compact tab bar consistent with the existing
   FCX navy/blue/white palette and card system already used throughout
   this portal — not a separate visual language. */
.fcx-b2b-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 18px 0 22px;
	border-bottom: 1px solid #e5e9f2;
	padding-bottom: 0;
}
.fcx-b2b-nav__item {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fcx-navy, #22407a);
	text-decoration: none;
	border-radius: 6px;
	transition: color .15s ease, background .15s ease;
}
.fcx-b2b-nav__item:hover,
.fcx-b2b-nav__item.is-active {
	color: #fff !important;
	background: var(--fcx-navy, #22407a);
}
.fcx-b2b-nav__icon {
	display: inline-flex;
	margin-right: 6px;
	opacity: .8;
	color: inherit;
}
.fcx-b2b-nav__item:hover .fcx-b2b-nav__icon,
.fcx-b2b-nav__item.is-active .fcx-b2b-nav__icon {
	opacity: 1;
	color: #fff !important;
}
.fcx-b2b-nav__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	margin-left: 5px;
	border-radius: 8px;
	background: #d64545;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 700px) {
	.fcx-b2b-nav {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.fcx-b2b-nav__item {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* Review screen + Edit Company Details modal + Confirm Order
   acknowledgement — STEP 3 (fcx_b2b_render_review_proforma(),
   fcx_b2b_render_my_payment_cta(), inc/b2b.php). Same navy/blue/white
   card system already established, not a new visual language. */
.fcx-b2b-review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.fcx-b2b-review__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 20px;
}
.fcx-b2b-review__grid h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #6b7280;
	margin: 0 0 6px;
}
.fcx-b2b-review__total {
	margin-top: 10px;
	text-align: right;
}
@media (max-width: 780px) {
	.fcx-b2b-review__grid { grid-template-columns: 1fr; }
}

.fcx-b2b-ack {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
	margin: 14px 0;
	max-width: 560px;
}
.fcx-b2b-ack input[type="checkbox"] {
	margin-top: 3px;
	flex: 0 0 auto;
}

.fcx-b2b-modal {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .55);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.fcx-b2b-modal__panel {
	background: #fff;
	border-radius: 10px;
	max-width: 620px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	padding: 24px;
	box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.fcx-b2b-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.fcx-b2b-modal__close {
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
}
.fcx-b2b-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #eef0f3;
}

@media (max-width: 560px) {
	.fcx-b2b-modal__panel { padding: 18px; }
}

/* Order-linked message thread — Phase 3 (fcx_b2b_render_order_detail(),
   inc/fcx-orders.php). Same navy/blue/white card system, compact
   message bubbles rather than a wp-admin-style list. */
.fcx-b2b-thread {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 380px;
	overflow-y: auto;
	padding: 4px 2px;
	margin-bottom: 14px;
}
.fcx-b2b-thread__bubble {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 10px;
	background: #f3f5f9;
}
.fcx-b2b-thread__bubble--fcx {
	align-self: flex-start;
	background: #eef2fb;
}
.fcx-b2b-thread__bubble--customer {
	align-self: flex-end;
	background: #e9f7ef;
}
.fcx-b2b-thread__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 11.5px;
}
.fcx-b2b-thread__bubble p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
}
.fcx-b2b-thread__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fcx-b2b-thread__form {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.fcx-b2b-thread__form textarea {
	flex: 1;
	min-height: 44px;
}

@media (max-width: 700px) {
	.fcx-b2b-thread__bubble { max-width: 92%; }
	.fcx-b2b-thread__form { flex-direction: column; }
}

/* Customer-facing Shipment section — Phase 4
   (fcx_b2b_render_order_detail(), inc/fcx-orders.php). Compact
   information rows, same card system, no new visual language. */
.fcx-b2b-shipment p {
	margin: 0 0 8px;
	font-family: var(--fcx-body-font, 'Inter', system-ui, sans-serif) !important;
	font-size: 11.5px !important;
	line-height: 1.4 !important;
	color: var(--fcx-navy, #22407a);
}
.fcx-b2b-shipment p:last-child { margin-bottom: 0; }

/* PART 1 — Basic UI structural cleanup. Scoped to .fcx-b2b-dash only —
   the base .fcx-btn class (style.css) is shared with the public
   marketing site and must not change there; these overrides apply
   exclusively inside the B2B customer portal. */
.fcx-b2b-dash .fcx-btn {
	padding: 9px 18px;
	font-size: 13px;
}
.fcx-b2b-dash h2,
.fcx-b2b-dash h3 {
	font-size: 16px;
	margin: 0 0 10px;
}
.fcx-b2b-dash .fcx-app__card,
.fcx-b2b-dash .fcx-b2b-card {
	padding: 16px 18px;
}

/* "Ready to Order?" — rebuilt as a compact confirmation panel per the
   explicit requirement: short title, concise text, View Proforma,
   acknowledgement, Confirm Order — no oversized CTA treatment. */
#fcx-b2b-ready-to-order {
	max-width: 560px;
}
#fcx-b2b-ready-to-order h3 {
	font-size: 15px;
	margin-bottom: 6px;
}
#fcx-b2b-ready-to-order > p {
	font-size: 11.5px;
	color: var(--fcx-ink-3, #6b7280);
	margin: 0 0 12px;
	line-height: 1.4;
}
.fcx-b2b-proforma-gate {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fcx-b2b-proforma-gate .fcx-btn {
	align-self: flex-start;
}

@media (max-width: 600px) {
	.fcx-b2b-proforma-gate .fcx-btn {
		align-self: stretch;
	}
}

/* Active Order — compact top summary + jump-nav + Preparation section
   (fcx_b2b_render_order_detail(), inc/fcx-orders.php). Same compact
   card system already in use; no new visual language. */
.fcx-b2b-order-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 12px 14px;
	margin: 12px 0;
	background: #f7f8fa;
	border-radius: 8px;
}
.fcx-b2b-order-summary__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fcx-b2b-order-summary__label {
	font-size: 11px;
	color: var(--fcx-subtle, #8a90a0);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.fcx-b2b-order-summary__value {
	font-family: var(--fcx-body-font, 'Inter', system-ui, sans-serif) !important;
	font-size: 11.5px !important;
	line-height: 1.4 !important;
	font-weight: 600;
	color: var(--fcx-navy, #22407a);
}
.fcx-b2b-order-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 18px;
	border-bottom: 1px solid #eef0f3;
	padding-bottom: 10px;
}
.fcx-b2b-order-jump a {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--fcx-navy, #22407a);
	text-decoration: none;
	padding: 5px 10px;
	border-radius: 6px;
}
.fcx-b2b-order-jump a:hover { background: #f2f4f8; }
.fcx-b2b-prep-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 18px;
}
.fcx-b2b-prep-row__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
}

@media (max-width: 700px) {
	.fcx-b2b-order-summary { gap: 12px; }
	.fcx-b2b-order-jump { overflow-x: auto; flex-wrap: nowrap; }
}

/* Floating FCX Assistant — small, fixed-position widget
   (fcx_b2b_render_assistant_widget(), inc/b2b.php). Deliberately
   compact, not a giant icon or a separate WhatsApp-style button. */
.fcx-b2b-assistant-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--fcx-navy, #22407a);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(20, 34, 64, .25);
	z-index: 999;
}
.fcx-b2b-assistant-fab:hover { background: #1a3260; }
.fcx-b2b-assistant__faq {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}
.fcx-b2b-assistant__item {
	border: 1px solid #eef0f3;
	border-radius: 8px;
	padding: 8px 12px;
}
.fcx-b2b-assistant__item summary {
	font-size: 13px;
	font-weight: 600;
	color: var(--fcx-navy, #22407a);
	cursor: pointer;
}
.fcx-b2b-assistant__item p {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--fcx-ink);
}

@media (max-width: 560px) {
	.fcx-b2b-assistant-fab { right: 14px; bottom: 14px; }
}

/* Login/Register — centered, max-width container so these panels don't
   stretch across the full screen (fcx_b2b_login_shortcode(),
   fcx_b2b_register_shortcode(), inc/b2b.php). Register's 4-step wizard
   needs more room than the simple Login form, so the wrapper itself
   uses the wider of the two — Login's card simply doesn't fill it,
   which still reads as centered and balanced, not stretched. */
.fcx-b2b-auth-wrap {
	max-width: 470px;
	margin: 24px auto;
	padding: 0 12px;
}
/* The Login card no longer sits centred inside a much wider wrapper.
   That combination — a 560px wrapper holding a 440px centred card —
   was the real cause of the large gap when Login and Register are
   placed as two SEPARATE shortcodes in adjacent page-builder columns
   (rather than via [fcx_b2b_auth]): each card was padded away from the
   other by its own wrapper's spare width. Register still gets the room
   its two-column fields need via its own wrapper modifier below —
   a real class set in the markup rather than a :has() selector, so
   this works in every browser. */
.fcx-b2b-auth-wrap .fcx-b2b-card:not(.fcx-b2b-card--register) {
	max-width: none;
	margin: 0;
}
.fcx-b2b-auth-wrap--register { max-width: 560px; }
.fcx-b2b-auth-wrap--login { max-width: 400px; }
/* Two auth wrappers rendered as immediate siblings (both shortcodes
   dropped into one column) are pulled together into a single centred
   authentication group instead of stacking far apart. */
.fcx-b2b-auth-wrap + .fcx-b2b-auth-wrap {
	margin-top: 12px;
}

@media (max-width: 560px) {
	.fcx-b2b-auth-wrap { margin: 20px auto; }
}

/* [fcx_b2b_auth] combined Login+Register — one balanced, centered
   access area with the two cards close together, per the explicit
   "too far apart" fix (fcx_b2b_combined_auth_shortcode(), inc/b2b.php).
   Each column's own .fcx-b2b-auth-wrap keeps its existing max-width
   logic — this only controls the gap and overall centering between
   the two, not each card's internal layout. */
.fcx-b2b-auth-combined {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 14px;
	max-width: 880px;
	margin: 24px auto;
	padding: 0 16px;
}
/* Login is deliberately the narrower of the two (it only has two
   fields) and Register the wider (two-column fields), but they now sit
   directly beside each other as one centred group rather than one at
   each edge. */
.fcx-b2b-auth-combined__col {
	flex: 0 1 auto;
	max-width: 100%;
}
.fcx-b2b-auth-combined__col:first-child { flex: 0 1 340px; }
.fcx-b2b-auth-combined__col:last-child { flex: 0 1 500px; }
.fcx-b2b-auth-combined__col .fcx-b2b-auth-wrap {
	margin: 0;
	max-width: none;
	padding: 0;
}

@media (max-width: 820px) {
	.fcx-b2b-auth-combined { gap: 16px; margin: 20px auto; }
}
@media (max-width: 560px) {
	.fcx-b2b-auth-combined { flex-direction: column; align-items: stretch; }
	.fcx-b2b-auth-combined__col { max-width: none; }
}

/* Floating My Order panel — compact, fixed-position, right side,
   opposite the assistant widget (fcx_b2b_render_floating_cart(),
   inc/b2b.php). FCX blue header (white icon/text), compact item list,
   navy CTA — not a giant panel. */
.fcx-b2b-cart-panel {
	position: fixed;
	right: 20px;
	bottom: 74px;
	width: 240px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(20, 34, 64, .18);
	overflow: hidden;
	z-index: 998;
}
.fcx-b2b-cart-panel__head {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--fcx-navy, #22407a);
	color: #fff;
	padding: 8px 12px;
	font-size: 11.5px;
	font-weight: 700;
}
.fcx-b2b-cart-panel__count {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: #fff;
	color: var(--fcx-navy, #22407a);
	font-size: 11px;
	font-weight: 700;
}
.fcx-b2b-cart-panel__items {
	max-height: 160px;
	overflow-y: auto;
	padding: 6px 12px;
}
.fcx-b2b-cart-panel__row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 0;
	border-bottom: 1px solid #f0f1f4;
	font-size: 11.5px;
}
.fcx-b2b-cart-panel__row:last-child { border-bottom: none; }
.fcx-b2b-cart-panel__name { color: var(--fcx-navy, #22407a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcx-b2b-cart-panel__price { color: var(--fcx-navy, #22407a); font-weight: 600; white-space: nowrap; }
.fcx-b2b-cart-panel__cta {
	display: block;
	text-align: center;
	margin: 8px 12px 12px;
	padding: 8px 12px;
	font-size: 13px;
}

@media (max-width: 560px) {
	.fcx-b2b-cart-panel { right: 14px; bottom: 66px; width: 210px; }
}

/* Current / Action / Next — Phase 1 Item 2's compact contextual header
   (fcx_b2b_render_order_detail(), inc/fcx-orders.php). */
.fcx-b2b-current-action-next {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 10px 14px;
	margin: 8px 0 16px;
	background: #eef4fb;
	border-left: 3px solid var(--fcx-navy, #22407a);
	border-radius: 6px;
}
.fcx-b2b-current-action-next > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 160px;
}

/* Compact Payment summary — Phase 1 Item 3
   (fcx_b2b_render_order_detail(), inc/fcx-orders.php). Detail moved
   into modals; this stays a small, glanceable summary. */
.fcx-b2b-pay-compact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 12px 14px;
	background: #f7f8fa;
	border-radius: 8px;
	margin-bottom: 18px;
}
.fcx-b2b-pay-compact__due {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fcx-b2b-pay-compact__amount {
	font-size: 18px;
	font-weight: 700;
	color: var(--fcx-navy, #22407a);
}
.fcx-b2b-pay-compact__actions {
	display: flex;
	gap: 8px;
	margin-left: auto;
}
.fcx-b2b-pay-compact__note {
	flex: 1 1 100%;
	margin: 0;
}

@media (max-width: 560px) {
	.fcx-b2b-pay-compact__actions { margin-left: 0; width: 100%; }
}

/* Compact Order Note indicator + Add Note button — replacing the
   previously permanently-visible notes textarea
   (fcx_b2b_render_review_proforma(), inc/b2b.php). */
.fcx-b2b-notes-compact {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0;
}
.fcx-b2b-notes-compact__indicator {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	color: var(--fcx-subtle, #8a90a0);
}

/* Timeline head — small "Check Latest Status" link next to the
   progress stepper (fcx_b2b_render_order_detail(), inc/fcx-orders.php).
   Compact — this is a link, not a large call-to-action. */
.fcx-b2b-timeline-head {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 4px;
}
.fcx-b2b-refresh-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	font-size: 12px;
	animation: fcx-refresh-pulse 2.6s ease-in-out infinite;
}
.fcx-b2b-refresh-status__icon {
	display: inline-flex;
	color: #f0b429;
	animation: fcx-refresh-rotate 3.2s linear infinite;
}
@keyframes fcx-refresh-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes fcx-refresh-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(19, 78, 74, 0.4); }
	50% { box-shadow: 0 0 0 5px rgba(19, 78, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.fcx-b2b-refresh-status { animation: none; }
	.fcx-b2b-refresh-status__icon { animation: none; }
}

/* Compact "already confirmed" line — Final Order Review, replacing a
   duplicated full company/address block already shown on the previous
   step (fcx_b2b_render_final_order_review(), inc/b2b.php). */
.fcx-b2b-confirmed-line {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #1c6b3a;
	margin: 0 0 14px;
}

/* My Order empty-state modal — small, centered, two clear actions
   (fcx_b2b_render_my_order(), inc/b2b.php). */
.fcx-b2b-modal__panel--compact {
	max-width: 380px;
	text-align: center;
}
.fcx-b2b-modal__actions--stacked {
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}
.fcx-b2b-modal__actions--stacked .fcx-btn {
	width: 100%;
}

/* Floating Support/Message button — replaces the previously
   permanently-visible Messages section (fcx_b2b_render_order_detail(),
   inc/fcx-orders.php). Fixed, small, bottom-corner. */
.fcx-b2b-support-fab {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 400;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--fcx-navy, #22407a);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(20, 30, 60, 0.28);
	cursor: pointer;
}
.fcx-b2b-support-fab:hover {
	background: var(--fcx-navy-dark, #1a3260);
}

@media (max-width: 560px) {
	.fcx-b2b-support-fab { left: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* Merged Payment + Preparation compact summary grid — replaces the
   previous single "Balance Due" line with a small grid of the six
   key values, still followed by the same compact action buttons
   (fcx_b2b_render_order_detail(), inc/fcx-orders.php). */
.fcx-b2b-pay-compact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px 16px;
	width: 100%;
	margin-bottom: 10px;
}

/* Payment/Preparation/Shipment side-by-side compact cards — per the
   explicit "must become compact responsive cards side-by-side"
   requirement (fcx_b2b_render_order_detail(), inc/fcx-orders.php).
   Wraps whichever of the three sections are actually shown (Payment
   is always present; Preparation/Shipment appear only once their
   stage is genuinely reached) — the row simply has fewer children
   early in an order's life, not empty placeholder slots. */
.fcx-b2b-cards-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: stretch;
	margin: 0 0 18px;
}
.fcx-b2b-mini-card {
	flex: 1 1 280px;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--fcx-line, #eef0f3);
	border-radius: 10px;
	padding: 14px 16px;
}
.fcx-b2b-mini-card h4 {
	margin: 0 0 10px;
	font-size: 14px;
}
.fcx-b2b-mini-card .fcx-b2b-pay-compact,
.fcx-b2b-mini-card .fcx-b2b-prep-row,
.fcx-b2b-mini-card .fcx-b2b-order-actions {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}

@media (max-width: 640px) {
	.fcx-b2b-cards-row { flex-direction: column; }
	.fcx-b2b-mini-card { min-width: 0; }
}


/* Order-centric Shipping Documents — one compact expandable row per
   Order, replacing the previous flat mixed document list
   (fcx_b2b_combined_dashboard_shortcode(), inc/b2b.php). Native
   <details>/<summary> — stays on the same page, no JS needed. */
.fcx-b2b-doc-orders {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fcx-b2b-doc-order {
	border: 1px solid var(--fcx-line-soft, #eef0f3);
	border-radius: 8px;
	overflow: hidden;
}
.fcx-b2b-doc-order summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	cursor: pointer;
	list-style: none;
}
.fcx-b2b-doc-order summary::-webkit-details-marker { display: none; }
.fcx-b2b-doc-order__no {
	font-weight: 700;
	color: var(--fcx-navy, #22407a);
	min-width: 110px;
}
.fcx-b2b-doc-order summary .sub {
	flex: 1;
}
.fcx-b2b-doc-order__view {
	font-size: 12px;
	font-weight: 600;
	color: var(--fcx-navy, #22407a);
	text-decoration: underline;
}
.fcx-b2b-doc-order__panel {
	padding: 4px 16px 14px;
	border-top: 1px solid var(--fcx-line-soft, #eef0f3);
}
.fcx-b2b-doc-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fcx-b2b-doc-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}
.fcx-b2b-doc-list li span {
	flex: 1;
}

@media (max-width: 640px) {
	.fcx-b2b-doc-order summary { flex-wrap: wrap; gap: 6px; }
	.fcx-b2b-doc-order__no { min-width: 0; }
}

/* ---------------------------------------------------------------
   B2B Shipping Documents — compact modal presentation.
   Replaces the previous <details> panel that expanded a large area
   underneath the order row. Reuses the portal's existing
   .fcx-b2b-modal shell so this is the same modal component already
   used elsewhere in the portal, not a second one.
   --------------------------------------------------------------- */
.fcx-b2b-modal { display: none; }

.fcx-btn.fcx-btn--sm {
	padding: 6px 12px;
	font-size: 12px;
	gap: 6px;
}
.fcx-b2b-modal__head h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	color: var(--fcx-navy, #22407a);
}

.fcx-b2b-doc-list li {
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--fcx-line-soft, #eef0f3);
	gap: 12px;
}
.fcx-b2b-doc-list li:last-child { border-bottom: none; }
.fcx-b2b-doc-list__name {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1;
	line-height: 1.35;
}
.fcx-b2b-doc-list__name svg { color: var(--fcx-navy, #22407a); flex: none; }
.fcx-b2b-doc-list__name .sub { font-size: 12px; color: #7a8698; font-weight: 400; }
.fcx-b2b-doc-list__actions {
	display: flex;
	gap: 6px;
	flex: none;
}
/* A very compact "not available yet" line rather than a large empty
   panel, per the explicit requirement. */
.fcx-b2b-doc-none {
	margin: 8px 0;
	font-size: 13px;
	color: #7a8698;
}

@media (max-width: 560px) {
	.fcx-b2b-doc-list li { flex-wrap: wrap; }
	.fcx-b2b-doc-list__actions { width: 100%; }
}

/* Product Details modal — reuses the SAME .fcx-b2b-modal shell every
   other B2B modal already uses, per the "one shared modal system"
   requirement (fcx_b2b_render_product_details_modal_content(),
   inc/fcx-cart.php). */
.fcx-b2b-pd-trigger {
	cursor: pointer;
}
.fcx-b2b-pd {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.fcx-b2b-pd__gallery {
	flex: 0 0 160px;
	max-width: 160px;
}
.fcx-b2b-pd__gallery img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}
.fcx-b2b-pd__mainimg {
	margin-bottom: 8px;
}
.fcx-b2b-pd__mainimg img {
	width: 100%;
	max-height: 220px;
	object-fit: contain;
	border-radius: 8px;
	background: #f7f8fa;
}
.fcx-b2b-pd__thumbs {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.fcx-b2b-pd__thumbs img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
}
.fcx-b2b-pd__thumb-btn {
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	background: none;
	cursor: pointer;
	line-height: 0;
}
.fcx-b2b-pd__thumb-btn.is-active,
.fcx-b2b-pd__thumb-btn:hover {
	border-color: var(--fcx-navy, #22407a);
}
.fcx-b2b-pd__info {
	flex: 1 1 240px;
	min-width: 220px;
}
.fcx-b2b-pd__info p {
	margin: 0 0 8px;
	font-family: var(--fcx-body-font, 'Inter', system-ui, sans-serif);
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--fcx-navy, #22407a);
}
.fcx-b2b-pd__desc {
	color: var(--fcx-subtle, #6b7280);
	font-size: 11.5px;
}

@media (max-width: 480px) {
	.fcx-b2b-pd { flex-direction: column; }
	.fcx-b2b-pd__gallery { max-width: 100%; }
}

/* NOTE: the .fcx-b2b-payment-required-notice block that used to live
   here (and its own separate .fcx-btn--navy override rules) was
   removed entirely — confirmed dead CSS, since that notice's markup
   itself was removed from inc/fcx-orders.php in an earlier round as
   the confirmed duplicate "Payment Required" panel. Leaving those
   rules in place risked confusing future debugging of button states,
   even though they never matched any live element. */

/* My Order quantity stepper — [ − ] [ qty ] [ + ] plus a separate clean
   Remove control, replacing a raw number input with a loose "×"
   underneath it (fcx_b2b_render_my_order(), inc/b2b.php). */
.fcx-b2b-myorder-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--fcx-navy, #22407a);
	border-radius: 6px;
	overflow: hidden;
}
.fcx-b2b-myorder-qty__step {
	background: #fff;
	border: none;
	color: var(--fcx-navy, #22407a);
	width: 33px;
	height: 33px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
}
.fcx-b2b-myorder-qty__step:hover {
	background: var(--fcx-navy, #22407a);
	color: #fff;
}
.fcx-b2b-myorder-qty__input {
	width: 42px;
	height: 33px;
	border: none;
	border-left: 1px solid var(--fcx-navy, #22407a);
	border-right: 1px solid var(--fcx-navy, #22407a);
	text-align: center;
	font-family: var(--fcx-body-font, 'Inter', system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--fcx-navy, #22407a);
	-moz-appearance: textfield;
}
.fcx-b2b-myorder-qty__input::-webkit-outer-spin-button,
.fcx-b2b-myorder-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.fcx-b2b-myorder-qty__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	width: 26px;
	height: 26px;
	background: #fff;
	border: 1px solid #e2555a;
	border-radius: 6px;
	color: #e2555a;
	cursor: pointer;
}
.fcx-b2b-myorder-qty__remove:hover {
	background: #e2555a;
	color: #fff;
}

/* Unified My Order action row — Edit Company Details, Add Note,
   Payment Details, Proforma Invoice, Download Excel all together in
   one row, per the explicit "one compact action area, no duplicated
   actions" requirement (fcx_b2b_render_my_order_unified(),
   inc/b2b.php). */
.fcx-b2b-myorder-actionrow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
	padding-top: 16px;
	border-top: 1px solid var(--fcx-line-soft, #eef0f3);
}

@media (max-width: 640px) {
	.fcx-b2b-myorder-actionrow { gap: 6px; }
	.fcx-b2b-myorder-actionrow .fcx-btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
}

/* Payment modal summary — order/payment facts shown inside the
   Upload Receipt / Pay Balance modal, per the explicit "show real
   Order/Proforma, Total, Required, Verified, Remaining, Terms,
   Currency, Bank Information" requirement
   (fcx_b2b_render_order_detail(), inc/fcx-orders.php). */
.fcx-b2b-pay-modal-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
	background: var(--fcx-paper, #f7f8fa);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 12px;
}
.fcx-b2b-pay-modal-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 11.5px;
}
.fcx-b2b-pay-modal-summary__row span {
	color: var(--fcx-subtle, #8a90a0);
}
.fcx-b2b-pay-modal-bank {
	background: #fff;
	border: 1px solid var(--fcx-line-soft, #eef0f3);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 14px;
	font-size: 11.5px;
}
.fcx-b2b-pay-modal-bank p {
	margin: 4px 0 0;
	line-height: 1.6;
}

/* Compact Action/Next-Step column — Orders table (fcx_b2b_render_my_orders())
   and the View page's status banner both use these same classes, so
   the two states always look visually related, matching the fact
   that they already share the same fcx_orders_get_action_state()
   calculation. */
.fcx-b2b-action-state {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}
.fcx-b2b-action-state__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fcx-ink, #14181f);
}
.fcx-b2b-action-state__detail {
	font-size: 11px;
	color: var(--fcx-subtle, #8a90a0);
}
.fcx-b2b-action-state .fcx-btn {
	margin-top: 4px;
}
.fcx-b2b-status-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	background: var(--fcx-navy, #22407a);
	border-radius: 10px;
	padding: 16px 20px;
	margin-bottom: 20px;
}
.fcx-b2b-status-banner__label {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}
.fcx-b2b-status-banner__detail {
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	margin-top: 2px;
}
.fcx-b2b-status-banner .fcx-btn--navy {
	background: #fff;
	color: var(--fcx-navy, #22407a);
}
.fcx-b2b-status-banner .fcx-btn--navy:hover {
	background: var(--fcx-navy-dark, #1a3260);
	color: #fff;
}

/* ===================================================================
   GLOBAL, CENTRAL, DEFINITIVE fix for the repeatedly-reported "navy
   button text/icon turns dark on hover" defect. Every individual
   button class investigated across many rounds (.fcx-btn--navy,
   .fcx-btn--outline on hover, .fcx-btn--line, .fcx-b2b-logout,
   .fcx-b2b-refresh-status, the new Action/Pay/Cancel buttons) was
   traced and found to already declare white text correctly on its
   own — yet the live screenshots kept disagreeing with that static
   analysis. Rather than keep chasing single classes one at a time,
   this is the one, final, maximally-specific rule: it uses an
   attribute selector on class (higher specificity than a plain class
   selector) combined with !important, so it wins regardless of
   selector order, load order, or any narrower rule elsewhere in
   either stylesheet that this and prior audits may have missed.
   Deliberately placed at the very end of this file so nothing loaded
   after it in the normal cascade can still override it by source
   order alone. */
a.fcx-btn[class*="fcx-btn--navy"],
button.fcx-btn[class*="fcx-btn--navy"],
a.fcx-btn[class*="fcx-btn--navy"]:hover,
button.fcx-btn[class*="fcx-btn--navy"]:hover,
a.fcx-btn[class*="fcx-btn--navy"]:focus,
button.fcx-btn[class*="fcx-btn--navy"]:focus,
a.fcx-btn[class*="fcx-btn--navy"]:active,
button.fcx-btn[class*="fcx-btn--navy"]:active {
	color: #fff !important;
}
a.fcx-btn[class*="fcx-btn--navy"] svg,
button.fcx-btn[class*="fcx-btn--navy"] svg,
a.fcx-btn[class*="fcx-btn--navy"]:hover svg,
button.fcx-btn[class*="fcx-btn--navy"]:hover svg,
a.fcx-btn[class*="fcx-btn--navy"]:focus svg,
button.fcx-btn[class*="fcx-btn--navy"]:focus svg,
a.fcx-btn[class*="fcx-btn--navy"]:active svg,
button.fcx-btn[class*="fcx-btn--navy"]:active svg {
	color: #fff !important;
	fill: currentColor;
}
/* .fcx-b2b-logout inside the navy dashboard header — same treatment,
   since it is functionally a primary navy-context action even though
   it doesn't use the .fcx-btn--navy class name itself. */
.fcx-b2b-dash__head .fcx-b2b-logout,
.fcx-b2b-dash__head .fcx-b2b-logout:hover,
.fcx-b2b-dash__head .fcx-b2b-logout:focus,
.fcx-b2b-dash__head .fcx-b2b-logout:active {
	color: #fff !important;
}
/* EXCLUSION: .fcx-b2b-status-banner's own .fcx-btn--navy is a
   deliberate, intentional INVERSION (white background, navy text —
   see that rule's own definition earlier in this file) so the button
   stays visible against the banner's own navy background. Without
   this override, the blanket rule immediately above — which matches
   on the class NAME "fcx-btn--navy" regardless of context — would
   force this specific button's text to white too, producing invisible
   white-on-white text. Placed after the blanket rule and given equal
   !important weight so source order decides in its favor. */
.fcx-b2b-status-banner a.fcx-btn[class*="fcx-btn--navy"],
.fcx-b2b-status-banner button.fcx-btn[class*="fcx-btn--navy"],
.fcx-b2b-status-banner a.fcx-btn[class*="fcx-btn--navy"]:hover,
.fcx-b2b-status-banner button.fcx-btn[class*="fcx-btn--navy"]:hover,
.fcx-b2b-status-banner a.fcx-btn[class*="fcx-btn--navy"]:focus,
.fcx-b2b-status-banner button.fcx-btn[class*="fcx-btn--navy"]:focus,
.fcx-b2b-status-banner a.fcx-btn[class*="fcx-btn--navy"]:active,
.fcx-b2b-status-banner button.fcx-btn[class*="fcx-btn--navy"]:active {
	color: var(--fcx-navy, #22407a) !important;
}

/* ===================================================================
   ONE compact professional action card — consolidates the status
   banner, Cancel action, and Proforma/Stage/Total/Paid/Remaining
   summary that previously sat as three separate pieces
   (fcx_b2b_render_order_detail(), inc/fcx-orders.php). */
.fcx-b2b-action-card {
	position: relative;
	overflow: hidden;
	background: var(--fcx-navy, #22407a);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 16px;
}
/* Restrained animated darker-blue highlight moving through the card —
   a soft diagonal sheen, not a border or a spinner, so it reads as a
   quiet ambient detail rather than something demanding attention (the
   Pay/Upload Receipt button's own gold pulse above already owns that
   job). Purely decorative — ::before, no layout impact, safely
   disabled under prefers-reduced-motion. */
.fcx-b2b-action-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(15, 28, 56, .35) 45%, transparent 60%);
	background-size: 220% 220%;
	animation: fcx-action-card-sheen 7s ease-in-out infinite;
	pointer-events: none;
}
@keyframes fcx-action-card-sheen {
	0%   { background-position: 120% 0%; }
	50%  { background-position: -20% 100%; }
	100% { background-position: 120% 0%; }
}
@media (prefers-reduced-motion: reduce) {
	.fcx-b2b-action-card::before { animation: none; }
}
.fcx-b2b-action-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}
/* Compact summary row, restyled for its new home inside the navy
   card — muted labels, strong readable values, per the explicit
   requirement. Same markup/classes as before, only the surrounding
   context (light card -> navy card) changed, so colors are inverted
   here specifically. */
.fcx-b2b-action-card .fcx-b2b-order-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 10px 18px;
	/* Genuine fix for the confirmed "internal white summary panel"
	 * defect — the base .fcx-b2b-order-summary rule's own
	 * background/padding/margin were never overridden here, so its
	 * light #f7f8fa background was still visibly sitting inside this
	 * navy card the whole time. Explicitly neutralized below. */
	background: none;
	padding: 0;
	margin: 12px 0 0;
}
.fcx-b2b-action-card .fcx-b2b-order-summary__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fcx-b2b-action-card .fcx-b2b-order-summary__label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .6);
}
.fcx-b2b-action-card .fcx-b2b-order-summary__value {
	font-size: 11.5px !important;
	font-weight: 700;
	color: #fff !important;
}
/* Remaining balance visually emphasized only when money is actually
   due — per the explicit "Remaining visually emphasized when money
   is due" requirement. Never applied merely because the column
   exists; the PHP side only adds this modifier class when
   $pay_summary['remaining_balance'] > 0. */
.fcx-b2b-action-card .fcx-b2b-order-summary__item--due .fcx-b2b-order-summary__value {
	color: #ffd166;
}
.fcx-b2b-action-card__secondary {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	text-align: right;
}
/* Small, secondary link-style Cancel action — deliberately NOT styled
   as a prominent button, per the explicit "small secondary action,
   not a large random button" requirement. */
.fcx-b2b-cancel-link {
	background: none;
	border: none;
	color: rgba(255, 255, 255, .65);
	font-size: 12px;
	cursor: pointer;
	padding: 2px 0;
}
.fcx-b2b-cancel-link:hover {
	color: #fff;
}
/* Genuine fix for the confirmed "unstyled Request Cancellation"
   defect — this button had zero CSS at all (plain browser-default
   styling) despite sitting inside the same navy action card as the
   Cancel Order link above, which IS styled. Same treatment applied
   here for visual consistency between the two mutually-exclusive
   secondary actions. */
.fcx-b2b-request-cancel-link {
	background: none;
	border: none;
	color: rgba(255, 255, 255, .65);
	font-size: 12px;
	cursor: pointer;
	padding: 2px 0;
}
.fcx-b2b-request-cancel-link:hover {
	color: #fff;
}

/* Generic, compact form-element styling shared by every
   .fcx-b2b-modal form — genuine fix for the confirmed "unstyled"
   defect: label/input/textarea inside these modals (Upload Receipt,
   Cancel Order, Request Cancellation) had NO dedicated CSS at all,
   rendering as plain, inconsistent browser-default form controls. */
.fcx-b2b-modal form label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--fcx-ink, #14181f);
	margin: 10px 0 4px;
}
.fcx-b2b-modal form input[type="text"],
.fcx-b2b-modal form input[type="email"],
.fcx-b2b-modal form input[type="number"],
.fcx-b2b-modal form input[type="file"],
.fcx-b2b-modal form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--fcx-line-soft, #eef0f3);
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
}
.fcx-b2b-modal form textarea {
	resize: vertical;
	min-height: 56px;
}

/* ===================================================================
   Pay/Upload Receipt attention effect — per the explicit "subtle
   professional attention animation ONLY when customer action is
   required" requirement. A restrained pulsing ring in a muted green
   travels around the button's own border; the button itself never
   turns green — background and text stay the standard navy/white
   .fcx-btn--navy at all times (this class adds ONLY the ::after ring,
   never touches background/color). Only applied by PHP when
   $action_state['action_type'] is genuinely 'pay_first' or
   'pay_balance' — the exact same states that already mean Upload
   Receipt is open in the modal below; once payment_status moves to
   'first_payment_submitted' or 'final_payment_submitted' (Payment/
   Balance Verification Pending), fcx_orders_get_action_state() no
   longer returns 'pay_first'/'pay_balance', so this class is no longer
   even output — the animation stops because the markup asking for it
   is gone, not because of any separate JS timer or state check. */
.fcx-b2b-cta-attention {
	position: relative;
}
.fcx-b2b-cta-attention::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 9px;
	border: 2px solid #92400e;
	opacity: 0;
	pointer-events: none;
	animation: fcx-cta-pulse 2.2s ease-in-out infinite;
}
@keyframes fcx-cta-pulse {
	0%   { opacity: 0; transform: scale(1); }
	40%  { opacity: .6; transform: scale(1.06); }
	80%  { opacity: 0; transform: scale(1.12); }
	100% { opacity: 0; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
	.fcx-b2b-cta-attention::after {
		animation: none;
		opacity: .35;
	}
}
/* Superseded: this used to be a gold-icon-only accent (button stayed
   navy). Now redundant — the whole button carries its own green
   color via the class-specific override further below in this file
   (the more specific rule targeting `.fcx-b2b-cta-attention svg`
   wins), but this base declaration is kept as a safe fallback and
   updated to white so it's never accidentally gold-on-green. */
.fcx-b2b-cta-attention__icon {
	display: inline-flex;
	color: #fff;
	vertical-align: middle;
}

/* ===================================================================
   Same maximally-specific, !important-backed, end-of-file catch-all
   treatment already applied to .fcx-btn--navy, now also for
   .fcx-btn--outline — per the explicit "outline: white background +
   navy text/icon; hover: navy background + WHITE text AND icon"
   requirement. Placed last so nothing loaded after it can override it
   by source order, and using an attribute selector for higher
   specificity than any plain class selector elsewhere. */
a.fcx-btn[class*="fcx-btn--outline"],
button.fcx-btn[class*="fcx-btn--outline"] {
	background: #fff !important;
	color: var(--fcx-navy, #22407a) !important;
}
a.fcx-btn[class*="fcx-btn--outline"]:hover,
button.fcx-btn[class*="fcx-btn--outline"]:hover,
a.fcx-btn[class*="fcx-btn--outline"]:focus,
button.fcx-btn[class*="fcx-btn--outline"]:focus,
a.fcx-btn[class*="fcx-btn--outline"]:active,
button.fcx-btn[class*="fcx-btn--outline"]:active {
	background: var(--fcx-navy, #22407a) !important;
	color: #fff !important;
}
a.fcx-btn[class*="fcx-btn--outline"] svg,
button.fcx-btn[class*="fcx-btn--outline"] svg {
	color: var(--fcx-navy, #22407a) !important;
	fill: currentColor;
}
a.fcx-btn[class*="fcx-btn--outline"]:hover svg,
button.fcx-btn[class*="fcx-btn--outline"]:hover svg,
a.fcx-btn[class*="fcx-btn--outline"]:focus svg,
button.fcx-btn[class*="fcx-btn--outline"]:focus svg,
a.fcx-btn[class*="fcx-btn--outline"]:active svg,
button.fcx-btn[class*="fcx-btn--outline"]:active svg {
	color: #fff !important;
	fill: currentColor;
}
/* Visited-link state — explicitly named in this round's requirement
   ("never show dark text in hover/focus/active/visited states") —
   browsers apply :visited only to <a>, and only to color (never
   background), but that alone is enough for a default user-agent
   visited-link purple to slip through without this. */
a.fcx-btn[class*="fcx-btn--navy"]:visited {
	color: #fff !important;
}
a.fcx-btn[class*="fcx-btn--outline"]:visited {
	color: var(--fcx-navy, #22407a) !important;
}

/* Dedicated narrow Action column for the Orders table's trash-can /
   Request Cancellation icon — per the explicit "add a narrow ACTION
   column with the proper trash/cancellation icon" requirement,
   separated from the "Action / Next Step" column's own primary
   button so the two don't crowd each other. */
.fcx-b2b-th--narrow,
.fcx-b2b-td--narrow {
	width: 36px;
	text-align: center;
}
.fcx-b2b-icon-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	background: none;
	border: 1px solid var(--fcx-line-soft, #eef0f3);
	border-radius: 6px;
	color: var(--fcx-navy, #22407a);
	cursor: pointer;
	text-decoration: none;
}
.fcx-b2b-icon-action:hover {
	background: var(--fcx-navy, #22407a);
	color: #fff;
}

/* Compact gold-accent status chip — genuine redesign of the previous
   "Advance Payment Verified" notice, which was a large, low-contrast
   gray <p>. Not full-width, high-contrast text, per the explicit
   requirement. Payment figures inside are unchanged — presentation
   only. */
.fcx-b2b-status-chip {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 11.5px;
	max-width: fit-content;
}
.fcx-b2b-status-chip--gold {
	background: #fdf3dc;
	border: 1px solid #c9911a;
	color: #5c4108;
}
.fcx-b2b-status-chip strong {
	color: #5c4108;
	font-size: 13px;
}

/* ===================================================================
   Pay/Upload Receipt — distinct GOLD/AMBER "payment required" CTA.
   Refresh Status — distinct TEAL/GREEN "refresh" CTA. Per this
   round's explicit "do NOT use the same color as Refresh Status"
   requirement, superseding the previous round's shared-green
   approach — these are now two genuinely different colors again.
   Placed at the very end of the file, using !important, specifically
   so this wins over the earlier .fcx-btn--navy catch-all rules above
   (which are themselves !important) for these two specific buttons
   only — every OTHER navy button in the project is completely
   unaffected. */
a.fcx-btn.fcx-b2b-cta-attention,
button.fcx-btn.fcx-b2b-cta-attention {
	background: #d97706 !important;
	border: 1px solid #92400e !important;
	color: #fff !important;
}
a.fcx-btn.fcx-b2b-cta-attention:hover,
button.fcx-btn.fcx-b2b-cta-attention:hover,
a.fcx-btn.fcx-b2b-cta-attention:focus,
button.fcx-btn.fcx-b2b-cta-attention:focus,
a.fcx-btn.fcx-b2b-cta-attention:active,
button.fcx-btn.fcx-b2b-cta-attention:active {
	background: #b45309 !important;
	color: #fff !important;
}
a.fcx-btn.fcx-b2b-refresh-status,
button.fcx-btn.fcx-b2b-refresh-status {
	background: #0f766e !important;
	border: 1px solid #134e4a !important;
	color: #fff !important;
}
a.fcx-btn.fcx-b2b-refresh-status:hover,
button.fcx-btn.fcx-b2b-refresh-status:hover,
a.fcx-btn.fcx-b2b-refresh-status:focus,
button.fcx-btn.fcx-b2b-refresh-status:focus,
a.fcx-btn.fcx-b2b-refresh-status:active,
button.fcx-btn.fcx-b2b-refresh-status:active {
	background: #115e59 !important;
	color: #fff !important;
}
a.fcx-btn.fcx-b2b-refresh-status svg,
button.fcx-btn.fcx-b2b-refresh-status svg,
a.fcx-btn.fcx-b2b-cta-attention svg,
button.fcx-btn.fcx-b2b-cta-attention svg {
	color: #fff !important;
}
/* The icon-specific accent classes from earlier rounds are now
   redundant — the whole button already carries its own solid color,
   so an icon in that same color would be invisible. Explicitly
   restored to white here, since the more specific `svg` rule
   immediately above wins by class-count specificity, not source
   order alone, but this makes it unambiguous regardless. */
.fcx-b2b-refresh-status__icon,
.fcx-b2b-cta-attention__icon {
	color: #fff !important;
}
/* The pulse-ring/rotation animations from earlier rounds remain, now
   as a slightly darker gold ring against the gold background —
   "darker gold border… subtle animated darker-gold ring/highlight"
   per the explicit requirement. */

/* ===================================================================
   ABSOLUTE FINAL, tag-agnostic fallback for customer B2B button
   states — genuinely the last rule in the file. Every earlier
   catch-all in this file prefixes its selector with a.fcx-btn / 
   button.fcx-btn; this one deliberately omits the tag entirely
   (.fcx-btn--outline / .fcx-btn--navy alone) so it also matches any
   element type this project might render a button-styled control as
   (a <span> made clickable via JS, a <div> with role="button", etc.)
   that the tag-prefixed rules above would silently miss. Uses
   !important and sits last in the file, so nothing above it —
   including this file's own earlier, tag-prefixed catch-alls — can
   be the reason a button still renders wrong.

   Descendants use `color: inherit !important` rather than a second,
   separately-hardcoded color value — this way a label/icon wrapper
   always matches whatever the outer button element's own explicit
   color is set to just below, and can never drift out of sync with
   it. `-webkit-text-fill-color: currentColor !important` is added
   specifically because some browsers' autofill/appearance styling can
   set this property independently of `color`, silently making text
   invisible even when `color` itself is correct — forcing it back to
   `currentColor` (which itself resolves to whatever `color` computes
   to) closes that gap without hardcoding a second color value here
   either. */
.fcx-btn--outline,
.fcx-btn--outline * {
	background: #fff !important;
	color: var(--fcx-navy, #22407a) !important;
	border-color: var(--fcx-navy, #22407a) !important;
	-webkit-text-fill-color: currentColor !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.fcx-btn--outline * {
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
}
.fcx-btn--outline:hover,
.fcx-btn--outline:hover *,
.fcx-btn--outline:focus,
.fcx-btn--outline:focus *,
.fcx-btn--outline:active,
.fcx-btn--outline:active * {
	background: var(--fcx-navy, #22407a) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.fcx-btn--outline:hover *,
.fcx-btn--outline:focus *,
.fcx-btn--outline:active * {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	opacity: 1 !important;
	visibility: visible !important;
}
/* Restores the actual navy BACKGROUND on the button element itself in
   the hover/focus/active state above — the wildcard `*` selector just
   above this would otherwise also force every descendant's own
   background to navy, which is wrong for a plain <span> label/icon
   wrapper with no background of its own; only the outer button
   element should carry the navy fill. */
button.fcx-btn--outline:hover,
a.fcx-btn--outline:hover,
button.fcx-btn--outline:focus,
a.fcx-btn--outline:focus,
button.fcx-btn--outline:active,
a.fcx-btn--outline:active {
	background: var(--fcx-navy, #22407a) !important;
}
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status),
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) * {
	background: var(--fcx-navy, #22407a) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) * {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):hover,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):hover *,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):focus,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):focus *,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):active,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):active *,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):visited,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):visited * {
	background: var(--fcx-navy-deep, #16264a) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):hover *,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):focus *,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):active *,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status):visited * {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	opacity: 1 !important;
	visibility: visible !important;
}
/* Explicitly force every relevant tag type — per this round's
   explicit list — to inherit the parent's currentColor, since the
   live result proved plain `color: inherit` on `*` alone was
   insufficient for some of these specific tags. */
.fcx-btn--outline span, .fcx-btn--outline strong, .fcx-btn--outline small, .fcx-btn--outline label, .fcx-btn--outline i,
.fcx-btn--outline:hover span, .fcx-btn--outline:hover strong, .fcx-btn--outline:hover small, .fcx-btn--outline:hover label, .fcx-btn--outline:hover i,
.fcx-btn--outline:focus span, .fcx-btn--outline:focus strong, .fcx-btn--outline:focus small, .fcx-btn--outline:focus label, .fcx-btn--outline:focus i,
.fcx-btn--outline:active span, .fcx-btn--outline:active strong, .fcx-btn--outline:active small, .fcx-btn--outline:active label, .fcx-btn--outline:active i,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) span,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) strong,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) small,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) label,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) i {
	color: currentColor !important;
	-webkit-text-fill-color: currentColor !important;
}
.fcx-btn--outline svg, .fcx-btn--outline svg path, .fcx-btn--outline svg use,
.fcx-btn--outline:hover svg, .fcx-btn--outline:hover svg path, .fcx-btn--outline:hover svg use,
.fcx-btn--outline:focus svg, .fcx-btn--outline:focus svg path, .fcx-btn--outline:focus svg use,
.fcx-btn--outline:active svg, .fcx-btn--outline:active svg path, .fcx-btn--outline:active svg use,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) svg,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) svg path,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) svg use {
	fill: currentColor !important;
	stroke: currentColor !important;
	color: currentColor !important;
}
/* Explicit WHITE — not currentColor/inherit — specifically for the
   hover/focus/active state, per this round's repeated, explicit
   instruction that inheritance-based approaches alone proved
   insufficient on the live site. */
.fcx-btn--outline:hover span, .fcx-btn--outline:hover strong, .fcx-btn--outline:hover small, .fcx-btn--outline:hover label, .fcx-btn--outline:hover i,
.fcx-btn--outline:hover svg, .fcx-btn--outline:hover svg path, .fcx-btn--outline:hover svg use,
.fcx-btn--outline:focus span, .fcx-btn--outline:focus strong, .fcx-btn--outline:focus small, .fcx-btn--outline:focus label, .fcx-btn--outline:focus i,
.fcx-btn--outline:focus svg, .fcx-btn--outline:focus svg path, .fcx-btn--outline:focus svg use,
.fcx-btn--outline:active span, .fcx-btn--outline:active strong, .fcx-btn--outline:active small, .fcx-btn--outline:active label, .fcx-btn--outline:active i,
.fcx-btn--outline:active svg, .fcx-btn--outline:active svg path, .fcx-btn--outline:active svg use,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) span,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) strong,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) small,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) label,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) i,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) svg,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) svg path,
.fcx-btn--navy:not(.fcx-b2b-cta-attention):not(.fcx-b2b-refresh-status) svg use {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	fill: #fff !important;
	stroke: #fff !important;
	opacity: 1 !important;
	visibility: visible !important;
}