/**
 * 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-form { display: flex; flex-direction: column; gap: 12px; }
.fcx-b2b-form label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 12.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-b2b-form .fcx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* 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: 12.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-btn.fcx-btn--navy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--fcx-navy, #22407a);
	color: #fff;
	border: none;
	border-radius: var(--fcx-radius-sm, 4px);
	padding: 12px 22px;
	font: 700 14px/1 var(--fcx-body-font);
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.fcx-btn.fcx-btn--navy:hover { background: var(--fcx-navy-deep, #16264a); transform: translateY(-1px); }

.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;
	gap: 16px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.fcx-b2b-dash__head h2 { font-family: var(--fcx-heading-font); margin: 0 0 4px; color: var(--fcx-ink); }
.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;
}
.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-size: 13.5px; }
.fcx-b2b-table th,
.fcx-b2b-table td {
	text-align: left;
	padding: 9px 8px;
	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); }

.fcx-b2b-card {
	position: relative;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(20, 34, 64, .04), 0 14px 34px rgba(20, 34, 64, .07);
	overflow: hidden;
}
.fcx-b2b-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--fcx-navy, #22407a) 0%, #4a7fd6 55%, #f0a93e 100%);
}
.fcx-b2b-card h3 { font-weight: 800; letter-spacing: -.01em; }

.fcx-b2b-portal .fcx-b2b-card { padding: 34px 30px; }
.fcx-b2b-portal .fcx-b2b-card h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }

.fcx-btn.fcx-btn--navy {
	background: linear-gradient(135deg, #2f5fb0 0%, var(--fcx-navy, #22407a) 60%, var(--fcx-navy-deep, #16264a) 100%);
	box-shadow: 0 6px 16px rgba(22, 38, 74, .28);
	border-radius: 999px;
	padding: 13px 26px;
	font-size: 13.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.fcx-btn.fcx-btn--navy:hover {
	background: linear-gradient(135deg, #3a6ec2 0%, #2a4d8c 60%, #16264a 100%);
	box-shadow: 0 10px 22px rgba(22, 38, 74, .34);
	transform: translateY(-2px);
}

/* Dashboard header becomes a navy gradient identity banner. */
.fcx-b2b-dash__head {
	background: linear-gradient(135deg, #17284f 0%, #1c3a72 55%, #234c92 100%);
	border-radius: 18px;
	padding: 28px 30px;
	box-shadow: 0 14px 34px rgba(16, 28, 56, .22);
	position: relative;
	overflow: hidden;
}
.fcx-b2b-dash__head::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 88% -10%, rgba(255, 217, 143, .18) 0%, transparent 55%);
	pointer-events: none;
}
.fcx-b2b-dash__head h2 { color: #fff; font-size: 24px; font-weight: 800; }
.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-logout {
	color: #fff;
	border-color: rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .08);
}
.fcx-b2b-logout:hover { background: rgba(255, 255, 255, .18); }

.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: 12px;
	flex: 1 1 auto;
	margin-bottom: 0;
}
.fcx-b2b-fit__field {
	display: flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, #1c3a72 0%, #22407a 100%);
	border: 1.5px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	padding: 10px 12px;
	flex: 1 1 170px;
	min-width: 150px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fcx-b2b-fit__field:focus-within { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.fcx-b2b-fit__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
}
.fcx-b2b-fit__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.fcx-b2b-fit__label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .68); }
.fcx-b2b-fit__body select,
.fcx-b2b-fit__body input {
	border: none;
	padding: 0;
	font-size: 13.5px;
	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, .55); }
.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: #fff;
	color: var(--fcx-navy, #22407a);
	border: none;
	border-radius: 999px;
	padding: 11px 24px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.fcx-b2b-fit__submit svg { color: var(--fcx-navy, #22407a) !important; }
.fcx-b2b-fit__submit:hover { background: #eef2f9; transform: translateY(-1px); }
.fcx-b2b-fit__reset { font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: underline; }
.fcx-b2b-fit__reset:hover { opacity: .85; }
@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: 13.5px; }
.fcx-b2b-table--products thead th {
	background: #f7f8fa;
	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: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 8px;
	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; color: var(--fcx-ink); text-decoration: none; }
.fcx-b2b-pname:hover { color: var(--fcx-navy); text-decoration: underline; }
.fcx-b2b-td-sku { color: var(--fcx-subtle, #8a90a0); font-family: var(--fcx-mono-font, monospace); font-size: 12.5px; }
.fcx-b2b-td-price { white-space: nowrap; }
.fcx-b2b-td-brand { font-weight: 600; color: var(--fcx-ink); white-space: nowrap; }
.fcx-b2b-td-compat { color: var(--fcx-subtle, #8a90a0); font-size: 12.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: 12.5px; font-weight: 600; color: var(--fcx-subtle, #8a90a0); }
.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: 12.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: 12.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: 1px solid #e2e5ea;
	color: var(--fcx-ink);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
}
.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) { border-color: var(--fcx-navy); color: var(--fcx-navy); }

.fcx-b2b-order-bar {
	position: sticky;
	bottom: 0;
	margin: 20px -1px -1px;
	padding: 16px 20px;
	background: #fff;
	border-top: 2px solid #eef0f3;
	box-shadow: 0 -6px 18px rgba(20, 34, 64, .08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-radius: 0 0 16px 16px;
	z-index: 5;
}
.fcx-b2b-order-bar__hint { font-size: 13px; color: var(--fcx-subtle, #8a90a0); font-weight: 600; }
.fcx-b2b-order-bar .fcx-btn--navy {
	padding: 13px 30px;
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: 999px;
}
@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: 13.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-ink); 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: 13.5px; color: var(--fcx-ink); }

@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: 40px 36px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 2px 8px rgba(20, 34, 64, .04), 0 14px 34px rgba(20, 34, 64, .08);
	text-align: center;
}
.fcx-b2b-confirm__badge {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: linear-gradient(135deg, #34c37a 0%, #1c8f52 100%);
	color: #fff;
	font-size: 28px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(28, 143, 82, .3);
}
.fcx-b2b-confirm h2 { font-size: 22px; font-weight: 800; letter-spacing: .02em; color: var(--fcx-navy-deep, #16264a); margin: 0 0 22px; }
.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; border-bottom: 1px solid #eef0f3; font-size: 13.5px; }
.fcx-b2b-confirm__table th { color: var(--fcx-subtle, #8a90a0); font-weight: 600; width: 40%; }
.fcx-b2b-confirm__table td { color: var(--fcx-ink); 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; }

/* -------------------------------------------------------------- portal nav */

.fcx-b2b-header {
	background: #fff;
	border-bottom: 1px solid #eef0f3;
	position: sticky;
	top: 0;
	z-index: 60;
}
.fcx-b2b-header__inner {
	max-width: var(--fcx-container, 1360px);
	margin: 0 auto;
	padding: 0 20px;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.fcx-b2b-header__brand { display: inline-flex; align-items: center; }
.fcx-b2b-header__brand img { max-height: 34px; width: auto; display: block; }
.fcx-b2b-header__actions { display: flex; align-items: center; gap: 8px; }
.fcx-b2b-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f2f4f8;
	color: var(--fcx-navy, #22407a);
	transition: background .15s ease, color .15s ease;
}
.fcx-b2b-header__icon:hover { background: var(--fcx-navy, #22407a); color: #fff; }
.fcx-b2b-header__divider { width: 1px; height: 24px; background: #e2e5ea; margin: 0 6px; }
.fcx-b2b-header__account,
.fcx-b2b-header__logout {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.fcx-b2b-header__account { background: #f2f4f8; color: var(--fcx-navy, #22407a); }
.fcx-b2b-header__account:hover { background: var(--fcx-navy, #22407a); color: #fff; }
.fcx-b2b-header__logout { background: var(--fcx-navy, #22407a); color: #fff; }
.fcx-b2b-header__logout:hover { background: #e05c5c; }
.fcx-b2b-header__label { font-size: 12px; font-weight: 700; color: var(--fcx-subtle, #8a90a0); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 640px) {
	.fcx-b2b-header__account span,
	.fcx-b2b-header__logout span { display: none; }
	.fcx-b2b-header__account,
	.fcx-b2b-header__logout { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; }
}

/* ==========================================================================
   Defensive full-width safety net for the B2B Portal page.
   ==========================================================================
   Blocksy (the parent theme) has its own per-page "Content Area" setting
   (Normal / Narrow / Sidebar Left / Sidebar Right), stored as page meta and
   normally set via a panel in the block editor. A page created
   programmatically (like the B2B Portal page — see fcx_b2b_ensure_page())
   never has that meta set, so it can silently inherit whichever sidebar
   layout is the *site-wide Blocksy default* — commonly a right sidebar —
   which is the classic cause of a narrow left content column with a large
   empty area on the right.

   The first pass at this (targeting likely Blocksy class/ID names like
   #main, .content-area, .widget-area) only works if those guesses are
   right. This version is stronger because it doesn't need to guess at
   all: it's the standard margin-only "full-bleed break-out" technique —
   `width: 100vw` plus `margin-left/right: calc(50% - 50vw)` pulls each
   B2B element out to the full viewport width regardless of what any
   ancestor container, grid, or sidebar layout is doing, as long as that
   ancestor is itself horizontally centred (the normal case for a boxed
   WordPress layout) — the maths work out so the element's edges land
   exactly at the viewport's edges no matter how wide the ancestor is.
   Deliberately margin-only rather than the more common `left/right` +
   `position: relative` variant of this trick, because these particular
   elements already rely on `position: sticky` (and `position: static` at
   the mobile breakpoint) — `left`/`right` only affect positioned
   elements and would either conflict with or be silently ignored
   depending on which position value is active, whereas plain margins
   apply the same way regardless. Each element then re-applies its own
   normal gutters/max-width via padding (for the header/nav bars, their
   already-existing `__inner` child still does this) so the actual
   content reads as a comfortable centred column, not edge-to-edge.
   ========================================================================== */

body:has(.fcx-b2b-portal),
body:has(.fcx-b2b-dash) {
	overflow-x: hidden;
}

.fcx-b2b-header,
.fcx-b2b-portal-nav {
	/* Margin-only break-out — deliberately does NOT use left/right, which
	   only apply to positioned elements and would conflict with (or be
	   silently ignored by) the position: sticky/static declared elsewhere
	   for these two elements at different breakpoints. This calc() form
	   works identically regardless of position value: as long as the
	   narrow ancestor we're escaping is itself horizontally centred in
	   the viewport (the normal case for a boxed WordPress layout), the
	   element's left edge lands exactly at the viewport's left edge,
	   whatever that ancestor's width actually is — no guessing needed. */
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
}
.fcx-b2b-portal,
.fcx-b2b-dash {
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
}

/* .fcx-b2b-header and .fcx-b2b-portal-nav are full-bleed bars whose own
   __inner child already re-centres its content (max-width + margin:0
   auto, defined earlier) — that still works correctly once the bar
   itself is genuinely full width, no change needed there. .fcx-b2b-portal
   and .fcx-b2b-dash combine "bar" and "content" in one element, so their
   own gutters need to be re-applied directly via padding instead. */
.fcx-b2b-portal { padding: 40px max(20px, calc(50vw - 1200px / 2)) 70px; }
.fcx-b2b-dash { padding: 48px max(20px, calc(50vw - var(--fcx-container, 1360px) / 2)) 80px; }
@media (max-width: 760px) {
	.fcx-b2b-portal { padding: 32px 16px 60px; }
}

/* Also force the immediate ancestor chain to not clip the break-out —
   harmless no-ops if these class/ID guesses don't match this particular
   Blocksy configuration, since the break-out above already does the real
   work; this only prevents an ancestor with overflow:hidden from cropping
   it, which the break-out technique alone can't fully guard against. */
body:has(.fcx-b2b-portal) #main,
body:has(.fcx-b2b-portal) #primary,
body:has(.fcx-b2b-portal) .site-main,
body:has(.fcx-b2b-portal) .content-area,
body:has(.fcx-b2b-portal) #content,
body:has(.fcx-b2b-portal) .fcx-entry-content,
body:has(.fcx-b2b-dash) #main,
body:has(.fcx-b2b-dash) #primary,
body:has(.fcx-b2b-dash) .site-main,
body:has(.fcx-b2b-dash) .content-area,
body:has(.fcx-b2b-dash) #content,
body:has(.fcx-b2b-dash) .fcx-entry-content {
	overflow: visible !important;
	width: 100% !important;
	max-width: none !important;
	flex: 1 1 100% !important;
	float: none !important;
}
body:has(.fcx-b2b-portal) #secondary,
body:has(.fcx-b2b-portal) .widget-area,
body:has(.fcx-b2b-portal) aside[class*="sidebar"],
body:has(.fcx-b2b-dash) #secondary,
body:has(.fcx-b2b-dash) .widget-area,
body:has(.fcx-b2b-dash) aside[class*="sidebar"] {
	display: none !important;
	width: 0 !important;
}

.fcx-b2b-portal-nav {
	background: linear-gradient(135deg, #17284f 0%, #1c3a72 100%);
	position: sticky;
	top: 60px;
	z-index: 50;
	box-shadow: 0 4px 14px rgba(16, 28, 56, .18);
}
.fcx-b2b-portal-nav__inner {
	max-width: var(--fcx-container, 1360px);
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	min-height: 56px;
}
.fcx-b2b-portal-nav__brand {
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.fcx-b2b-portal-nav__links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fcx-b2b-portal-nav__links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.fcx-b2b-portal-nav__links a svg { flex: 0 0 auto; color: #fff; }
.fcx-b2b-portal-nav__links a:hover,
.fcx-b2b-portal-nav__links a.is-active {
	background: #3a76d8;
	color: #fff;
	box-shadow: 0 2px 10px rgba(58, 118, 216, .45);
}
.fcx-b2b-portal-nav__logout { background: rgba(255, 255, 255, .08); }
.fcx-b2b-portal-nav__logout:hover { background: #e05c5c !important; }
.fcx-b2b-portal-nav__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #ffb020;
	color: #1c284a;
	font-size: 10.5px;
	font-weight: 800;
}
@media (max-width: 760px) {
	.fcx-b2b-portal-nav { position: static; }
	.fcx-b2b-portal-nav__brand { display: none; }
	.fcx-b2b-portal-nav__inner { justify-content: center; padding: 10px 12px; }
	.fcx-b2b-portal-nav__links { justify-content: center; width: 100%; }
	.fcx-b2b-portal-nav__links a { padding: 7px 10px; font-size: 12px; }
}

.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: 12.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: 13.5px; color: var(--fcx-subtle, #8a90a0); }
.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; }
.fcx-b2b-order-timeline { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 20px; }
.fcx-b2b-order-timeline__step { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; background: #f0f1f4; color: #6b7280; }
.fcx-b2b-order-timeline__step--done { background: #e7f8ee; color: #1c6b3a; }
.fcx-b2b-order-timeline__step--current { background: var(--fcx-navy, #22407a); color: #fff; font-weight: 600; }
.fcx-b2b-order-timeline__dot { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.35); font-size: 10px; }
.fcx-b2b-order-timeline__step--done .fcx-b2b-order-timeline__dot { background: #1c6b3a; color: #fff; }

/* 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__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-size: 13px;
}
.fcx-wizard__review-row span { color: var(--fcx-subtle, #9096a3); }
.fcx-wizard__review-row strong { color: var(--fcx-ink); font-weight: 600; text-align: right; }

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