/* =========================================================================
   Forexive Checkout — configurator + payment UI
   Scoped under .forexive-checkout (+ body.forexive-checkout-page for layout).
   ========================================================================= */

/* ---- Page chrome overrides (full-width dark canvas) ------------------- */
body.forexive-checkout-page { background: #06140f; }
body.forexive-checkout-page #pxl-sidebar-area { display: none !important; }
body.forexive-checkout-page #pxl-content-area {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}
body.forexive-checkout-page .container { max-width: 1280px; }
body.forexive-checkout-page .pxl-page-title-wrapper,
body.forexive-checkout-page .pxl-page-title,
body.forexive-checkout-page .pxl-breadcrumbs { display: none !important; }

/* ---- Tokens ---------------------------------------------------------- */
.forexive-checkout {
	--fx-accent: #10b77f;
	--fx-accent2: #0fa06f;
	--fx-grad: linear-gradient(135deg, #0d7c58, #0a553c);
	--fx-btn: linear-gradient(rgba(16, 183, 127, 0.98), rgba(15, 160, 111, 0.88));
	--fx-btn-hover: linear-gradient(rgba(16, 183, 127, 1), rgba(15, 160, 111, 0.96));
	--fx-bg: #0b221b;
	--fx-bg2: #103127;          /* field fill — lifted from near-black for legibility */
	--fx-panel: #0e2a20;
	--fx-card: #0c2419;          /* container surface */
	--fx-raise: #143a2b;         /* raised tiles (payment cards) so they read on the surface */
	--fx-line: rgba(255, 255, 255, 0.09);
	--fx-line-soft: rgba(255, 255, 255, 0.05);  /* softened container edges */
	--fx-line-green: rgba(16, 183, 127, 0.28);  /* soft accent edge */
	--fx-text: #eafff7;
	--fx-muted: rgba(234, 255, 247, 0.6);
	--fx-radius: 16px;

	font-family: "Poppins", system-ui, -apple-system, sans-serif;
	color: var(--fx-text);
	max-width: 1240px;
	margin: 0 auto;
	padding: 44px 4px 60px;     /* push the whole flow clear of the sticky header */
}
.forexive-checkout *,
.forexive-checkout *::before,
.forexive-checkout *::after { box-sizing: border-box; }
.forexive-checkout [hidden] { display: none !important; }

/* ---- Header / stepper ------------------------------------------------ */
.fx-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 8px 0 28px;
}
.fx-back {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 50%;
	border: 1px solid var(--fx-line);
	background: var(--fx-card);
	color: var(--fx-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: 0.2s;
}
.fx-back:hover { background: var(--fx-panel); }
.fx-head__titles { flex: 1 1 auto; }
.fx-h1 { font-size: 28px; font-weight: 700; margin: 0; color: #fff;letter-spacing: initial; }
.fx-sub { margin: 4px 0 0; color: var(--fx-muted); font-size: 14px; }
.fx-steps { display: flex; align-items: center; gap: 8px; }
.fx-steps__dot {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--fx-card);
	border: 1px solid var(--fx-line);
	color: var(--fx-muted);
	font-size: 13px; font-weight: 600;
}
.fx-steps__dot.is-active { background: var(--fx-grad); color: #fff; border-color: transparent; }
.fx-steps__bar { width: 46px; height: 2px; background: var(--fx-line); }

/* ---- Layout ---------------------------------------------------------- */
.fx-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 24px;
	align-items: start;
}
.fx-aside { position: sticky; top: 20px; }

/* ---- Cards / fields -------------------------------------------------- */
.fx-card {
	background: var(--fx-card);
	border: 1px solid var(--fx-line-soft);
	border-radius: var(--fx-radius);
	padding: 26px;
}
.fx-field { margin-bottom: 26px; }
.fx-field:last-child { margin-bottom: 0; }
.fx-field__label {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-muted);
	margin-bottom: 12px;
}

/* ---- Pills (challenge type / model) ---------------------------------- */
.fx-pills { display: flex; flex-wrap: wrap; gap: 10px; }
/* Scoped: the site header's pill bar also uses .fx-pill (unscoped rules in the
   Bricks header template), so reset the header-only props here. */
.forexive-checkout .fx-pill {
	position: relative;
	display: block;
	height: auto;
	max-width: none;
	margin: 0;
	gap: 0;
	align-items: normal;
	justify-content: center;
	text-align: center;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	flex: 1 1 calc(50% - 5px);
	min-width: 130px;
	padding: 13px 16px;
	border-radius: 35px;
	border: 1px solid var(--fx-line);
	background: var(--fx-bg);
	color: var(--fx-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	transition: 0.18s;
}
/* Live hides the Access "2-Step" model (ported from the live site's custom CSS). */
.fx-pills[data-fx-models] > .fx-pill:last-child { display: none !important; }
.forexive-checkout .fx-pill:hover { border-color: rgba(16, 183, 127, 0.5); }
.forexive-checkout .fx-pill.is-active {
	background: var(--fx-grad);
	border-color: transparent;
	color: #fff;
	font-weight: 600;
	box-shadow: 0 10px 26px rgba(16, 183, 127, 0.18);
}

/* ---- Balance grid ---------------------------------------------------- */
.fx-balances {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.fx-balance {
	position: relative;
	padding: 16px 14px;
	border-radius: 12px;
	border: 1px solid var(--fx-line);
	background: var(--fx-bg);
	color: var(--fx-text);
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: 0.18s;
}
.fx-balance:hover { border-color: rgba(16, 183, 127, 0.5); }
.fx-balance.is-active {
	border-color: var(--fx-accent);
	box-shadow: 0 0 0 1px var(--fx-accent) inset, 0 10px 26px rgba(16, 183, 127, 0.12);
}
.fx-balance__size { display: block; font-size: 17px; font-weight: 700; }
.fx-balance__fee { display: block; font-size: 12px; color: var(--fx-muted); margin-top: 4px; }
.fx-balance__check {
	position: absolute; top: 10px; right: 10px;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--fx-accent); color: #04130d;
	font-size: 12px; display: none; place-items: center;
}
.fx-balance.is-active .fx-balance__check { display: grid; }

/* ---- Privilege addons ------------------------------------------------ */
.fx-card--addons { margin-top: 16px; }
.fx-addons {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.fx-addon {
	position: relative;
	display: block;
	padding: 16px 16px 14px;
	border-radius: 12px;
	border: 1px solid var(--fx-line);
	background: var(--fx-bg);
	cursor: pointer;
	transition: 0.18s;
}
.fx-addon:hover { border-color: rgba(16, 183, 127, 0.5); }
.fx-addon.is-active {
	border-color: var(--fx-accent);
	box-shadow: 0 0 0 1px var(--fx-accent) inset, 0 10px 26px rgba(16, 183, 127, 0.12);
}
.fx-addon__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.fx-addon__head {
	display: grid;
	grid-template-columns: 22px 1fr auto;
	gap: 12px;
	align-items: start;
}
.fx-addon__check {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1px solid var(--fx-line);
	background: var(--fx-card);
	color: #04130d;
	font-size: 12px;
	font-weight: 700;
	display: grid;
	place-items: center;
	margin-top: 1px;
}
.fx-addon.is-active .fx-addon__check {
	background: var(--fx-accent);
	border-color: var(--fx-accent);
}
.fx-addon__titles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.fx-addon__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--fx-text);
}
.fx-addon__badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #04130d;
	background: #f5c542;
	padding: 3px 8px;
	border-radius: 999px;
}
.fx-addon__price {
	font-size: 13px;
	font-weight: 600;
	color: var(--fx-accent);
	white-space: nowrap;
}
.fx-addon__desc {
	margin: 10px 0 0 34px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--fx-muted);
}
.fx-summary__lines--addons .fx-line span:first-child {
	color: var(--fx-muted);
}
.fx-line__hint {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fx-accent);
}

/* ---- Summary panel --------------------------------------------------- */
.fx-aside__panel { position: relative; }
.fx-summary {
	background: var(--fx-panel);
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-radius);
	overflow: hidden;
}
.fx-summary__head { background: var(--fx-grad); padding: 22px 22px 18px; }
.fx-summary__title { margin: 0; font-size: 20px; font-weight: 700; color: #fff; }
.fx-summary__size { margin: 4px 0 14px; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.fx-summary__feerow { display: flex; align-items: center; justify-content: space-between; }
.fx-summary__fee { font-size: 14px; font-weight: 600; color: #fff; }
.fx-details-toggle {
	background: none; border: 0; cursor: pointer;
	color: #eafff7; font-family: inherit; font-size: 13px; font-weight: 500;
	display: inline-flex; align-items: center; gap: 5px;
}
.fx-details-toggle__hide { display: none; }
.fx-details-toggle[aria-expanded="true"] .fx-details-toggle__show { display: none; }
.fx-details-toggle[aria-expanded="true"] .fx-details-toggle__hide { display: inline; }
.fx-details-toggle__chevron { transition: transform 0.2s; }
.fx-details-toggle[aria-expanded="true"] .fx-details-toggle__chevron { transform: rotate(90deg); }

.fx-details { padding: 14px 22px 4px; }
.fx-details__box {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 6px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--fx-line);
}
.fx-details__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.05);
	font-size: 13px;
}
.fx-details__label { color: var(--fx-muted); }
.fx-details__val { color: #fff; font-weight: 600; text-align: right; white-space: nowrap; }

.fx-summary__divider { height: 1px; background: var(--fx-line); margin: 0 22px; }

/* coupon */
.fx-coupon { padding: 18px 22px; }
.fx-coupon__form { display: flex; gap: 8px; }
.fx-coupon__input {
	flex: 1 1 auto;
	background: var(--fx-bg2);
	border: 1px solid var(--fx-line);
	border-radius: 10px;
	padding: 11px 12px;
	color: var(--fx-text);
	font-family: inherit;
	font-size: 13px;
}
.fx-coupon__input::placeholder { color: var(--fx-muted); }
.fx-coupon__apply {
	flex: 0 0 auto;
	border: 1px solid var(--fx-line);
	background: var(--fx-bg);
	color: var(--fx-text);
	border-radius: 10px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: 0.18s;
}
.fx-coupon__apply:hover { background: var(--fx-panel); border-color: var(--fx-accent); }
.fx-coupon__msg { font-size: 12px; margin-top: 8px; min-height: 0; }
.fx-coupon__msg.is-error { color: #ff8a8a; }
.fx-coupon__msg.is-ok { color: var(--fx-accent); }
.fx-coupon__applied { list-style: none; margin: 10px 0 0; padding: 0; }
.fx-coupon__applied li {
	display: flex; align-items: center; justify-content: space-between;
	font-size: 13px; padding: 6px 0;
}
.fx-coupon__remove {
	background: none; border: 0; color: #ff8a8a; cursor: pointer;
	font-family: inherit; font-size: 12px; text-decoration: underline;
}

/* lines */
.fx-summary__lines { padding: 14px 22px; }
.fx-line {
	display: flex; align-items: center; justify-content: space-between;
	font-size: 14px; padding: 6px 0; color: var(--fx-text);
}
.fx-line span:first-child { color: var(--fx-muted); }
.fx-line--discount span { color: var(--fx-accent); }
.fx-line--accent span { color: #fff; font-weight: 700; }
.fx-line--total { font-size: 17px; font-weight: 700; padding-top: 12px; }
.fx-line--total span:first-child { color: var(--fx-text); }
.fx-line--total span:last-child { color: var(--fx-accent); }
.fx-summary__lines--apex .fx-line { font-size: 13px; }

/* continue button */
.fx-btn {
	width: 100%;
	border: 0;
	border-radius: 12px;
	padding: 15px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #04130d;
	background: var(--fx-btn);
	cursor: pointer;
	transition: 0.18s;
}
.fx-btn:hover { background: var(--fx-btn-hover); filter: brightness(1.04); }
/* Summary-panel Continue (Step 1 -> 2) sits inside the padded aside panel. */
.fx-aside .fx-btn--continue { margin: 0 22px 22px; width: calc(100% - 44px); }
/* Step 2 -> 3 Continue sits below the billing card in the main column. */
.fx-screen--billing .fx-btn--continue { margin-top: 22px; }

/* ---- Skeleton (snapshot 6) ------------------------------------------ */
.fx-aside__skeleton {
	background: var(--fx-panel);
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-radius);
	padding: 22px;
}
.fx-sk { border-radius: 8px; background: rgba(255, 255, 255, 0.06); margin-bottom: 12px; position: relative; overflow: hidden; }
.fx-sk--head { height: 70px; }
.fx-sk--line { height: 14px; }
.fx-sk--line.short { width: 55%; }
.fx-sk--block { height: 90px; }
.fx-sk--btn { height: 46px; margin-top: 8px; }
.fx-sk::after {
	content: ""; position: absolute; inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
	animation: fx-shimmer 1.2s infinite;
}
@keyframes fx-shimmer { 100% { transform: translateX(100%); } }

/* =========================================================================
   Screen B — native WooCommerce checkout, restyled
   ========================================================================= */
.forexive-checkout .fx-screen--payment { display: block; }

/* billing fields */
.forexive-checkout #customer_details { width: 100%; }
.forexive-checkout .col2-set { display: block; }
.forexive-checkout .woocommerce-billing-fields > h3,
.forexive-checkout #order_review_heading,
.forexive-checkout .woocommerce-additional-fields > h3 {
	font-size: 16px; color: #fff; margin: 0 0 14px;
}
.forexive-checkout .form-row { margin-bottom: 14px; }
.forexive-checkout .woocommerce-input-wrapper { width: 100%; }
.forexive-checkout label { color: rgba(234, 255, 247, 0.85); font-size: 13px; font-weight: 500; }
.forexive-checkout abbr.required, .forexive-checkout .required { color: var(--fx-accent); border: 0; }
.forexive-checkout input[type="text"],
.forexive-checkout input[type="email"],
.forexive-checkout input[type="tel"],
.forexive-checkout input[type="password"],
.forexive-checkout input[type="number"],
.forexive-checkout textarea,
.forexive-checkout select,
.forexive-checkout .select2-container .select2-selection {
	width: 100%;
	background: var(--fx-bg2) !important;
	border: 1px solid var(--fx-line) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	color: var(--fx-text) !important;
	font-family: inherit !important;
	min-height: 46px;
}
.forexive-checkout .select2-selection__rendered { color: var(--fx-text) !important; line-height: 22px !important; }
.forexive-checkout input::placeholder, .forexive-checkout textarea::placeholder { color: var(--fx-muted); }

/* hide the duplicate native order-review table; we use our own summary */
.forexive-checkout #order_review .shop_table,
.forexive-checkout #order_review_heading { display: none; }

/* payment area */
.fx-payment { margin-top: 20px; }
.fx-gateways::before,
.fx-gateways::after {
	display: none!important;

}
.fx-gateways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.fx-gateways__heading {
	grid-column: 1 / -1;
	text-transform: uppercase; letter-spacing: 0.04em;
	font-size: 12px; font-weight: 600; color: var(--fx-muted);
	margin-top: 6px;
}
.fx-gateway { margin: 0; }
/* Radio is the WooCommerce JS contract, never shown — hidden bulletproof so it
   can't leak as a stray circle on the card's edge. */
.fx-gateway__input {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	opacity: 0; pointer-events: none;
}
.fx-gateway__card {
	display: flex; flex-direction: column; align-items: stretch;
	min-height: 150px;
	border-radius: 14px;
	border: 1px solid var(--fx-line);
	background: linear-gradient(165deg, var(--fx-raise), var(--fx-card));
	cursor: pointer;
	transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
	color: var(--fx-text);
	overflow: hidden;
}
.fx-gateway__card:hover { border-color: rgba(16, 183, 127, 0.55); transform: translateY(-2px); }
.fx-gateway__input:checked + .fx-gateway__card {
	border-color: var(--fx-accent);
	box-shadow: 0 0 0 1px var(--fx-accent) inset, 0 12px 30px rgba(16, 183, 127, 0.14);
}
.fx-gateway__icon {
	flex: 1 1 auto;
	display: grid; place-items: center;
	padding: 26px 18px;
}
.fx-gateway__icon img { max-height: 44px; max-width: 78%; width: auto; height: auto; }
.fx-gateway__title {
	display: block;
	padding: 14px 16px;
	border-top: 1px solid var(--fx-line-soft);
	font-size: 14px; font-weight: 600; text-align: center;
	color: #fff;
}
.fx-gateway__box {
	margin-top: 14px;
	font-size: 13px;
	color: var(--fx-text);
}

/* The chosen gateway's fields box is revealed inline by checkout.js (style.display);
   it renders under the selected card as a full-width panel. */
.fx-gateway.is-selected .fx-gateway__box { margin-top: 14px; }

/* Paystar (Iranian gateway) is only offered when the billing country is Iran.
   The card is always in the DOM so the JS toggle can reveal it without an AJAX
   fragment refresh; hide it by default and show it only for IR. Applies to both
   the main checkout and the order-pay page (both carry .forexive-checkout). */
.forexive-checkout .payment_method_paystar_connect { display: none; }
.forexive-checkout[data-fx-country="IR"] .payment_method_paystar_connect { display: block; }

/* Credit/Debit card (FX Consultants) is hidden for Iran — PayStar + crypto remain. */
.forexive-checkout[data-fx-country="IR"] .payment_method_fxconsult_stripe { display: none; }

/* IRR equivalent line shown below USD total when billing country is Iran. */
.fx-line--irr { color: var(--fx-muted, #6b7280); font-size: 0.92em; }

/* ---- Stripe / gateway fields: strip nested boxes, keep one clean surface ---- */
/* Browsers draw a default border on bare <fieldset> (#wc-stripe-upe-form and the
   save-card fieldset) — that was the doubled-up boxing. Reset them. */
.forexive-checkout fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.forexive-checkout legend { padding: 0; }
/* The chosen gateway's fields render as a self-contained card that matches the
   billing form (full column width, soft green border + radius). !important is
   needed to beat WooCommerce core (#dcd7e2 bg) and the parent theme
   (#order_review #payment .wc_payment_methods div.payment_box { background:#fff })
   which both sit at much higher specificity. */
.forexive-checkout .fx-gateway__box {
	background: var(--fx-card) !important;
	border: 1px solid var(--fx-line-green) !important;
	border-radius: var(--fx-radius) !important;
	padding: 24px !important;
	margin: 0 !important;
	color: var(--fx-text);
}
/* Remove the WooCommerce speech-bubble arrow (::before) on the box. */
.forexive-checkout .fx-gateway__box::before,
.forexive-checkout .fx-gateway__box::after {
	display: none !important;
	content: none !important;
	border: 0 !important;
}
/* Single saved-method option ("Use a new payment method") is redundant — hide it,
   but only when there are no real saved cards (data-count="0"). */
.forexive-checkout .woocommerce-SavedPaymentMethods[data-count="0"] { display: none; }
/* Test-mode hint as a quiet inline line, not a panel. */
.forexive-checkout .wc-stripe-payment-method-instruction {
	background: transparent !important;
	border: 0 !important;
	padding: 0 0 12px !important;
	margin: 0 !important;
	font-size: 12px; color: var(--fx-muted);
}
.forexive-checkout .wc-stripe-upe-element { margin: 0; }
.forexive-checkout .woocommerce-SavedPaymentMethods-saveNew { margin: 14px 0 0; font-size: 13px; }
.forexive-checkout .woocommerce-SavedPaymentMethods-saveNew label { color: var(--fx-muted); }
/* Stripe's Payment Element derives its field styling from this hidden probe input.
   Our dark-green field fill was bleeding into it, giving the (light) card widget
   green inputs. Keep the probe light so Stripe renders standard light fields. */
.forexive-checkout #wc-stripe-hidden-style-input {
	background: #ffffff !important;
	color: #30313d !important;
	border: 1px solid #e6e6e6 !important;
}

.fx-payment .place-order { margin-top: 22px; }
.fx-btn--place {
	width: 100%!important; border: 0!important; border-radius: 12px!important;
	font-family: inherit!important; font-size: 16px!important; font-weight: 700!important;
	background: var(--fx-btn)!important; cursor: pointer!important;
}
.fx-btn--place::before, .fx-btn--place::after {
	display: none!important;
}
.fx-btn--place:hover { filter: brightness(1.04); }
.forexive-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 12px;
	color: var(--fx-muted);
	margin-bottom: 14px;
	line-height: 1.5;
}
.forexive-checkout .woocommerce-privacy-policy-text p { margin: 0 0 14px; }
body.forexive-checkout-page .forexive-checkout .woocommerce-privacy-policy-text a,
body.forexive-checkout-page .forexive-checkout a.woocommerce-privacy-policy-link,
body.forexive-checkout-page .forexive-checkout a.fx-terms__link {
	color: var(--fx-text) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.forexive-checkout-page .forexive-checkout .woocommerce-privacy-policy-text a:hover,
body.forexive-checkout-page .forexive-checkout a.woocommerce-privacy-policy-link:hover,
body.forexive-checkout-page .forexive-checkout a.fx-terms__link:hover {
	color: var(--fx-accent) !important;
}
.forexive-checkout .fx-terms { margin: 0 0 16px; }
.forexive-checkout .fx-terms__label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
	color: var(--fx-muted);
	line-height: 1.5;
}
.forexive-checkout .fx-terms__input {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	border: 1px solid var(--fx-line);
	border-radius: 4px;
	background: var(--fx-bg2);
	cursor: pointer;
	accent-color: var(--fx-accent);
	padding: 0 8px!important;
}
.forexive-checkout .fx-terms__input:checked {
	background: var(--fx-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2304130d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.2l2.6 2.6L10 3.2'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
	border-color: var(--fx-accent);
}
.forexive-checkout .fx-terms__input:focus-visible {
	outline: 2px solid var(--fx-accent);
	outline-offset: 2px;
}
.forexive-checkout .fx-terms__text { font-size: 12px; color: var(--fx-muted); }
.forexive-checkout .fx-terms .required { color: var(--fx-accent); text-decoration: none; border: 0; }
.forexive-checkout .fx-terms.woocommerce-invalid .fx-terms__input {
	border-color: #e85d5d;
}
.forexive-checkout .woocommerce-terms-and-conditions-wrapper > .woocommerce-terms-and-conditions {
	display: none !important;
}

/* WooCommerce notices inside our container */
.forexive-checkout .woocommerce-error,
.forexive-checkout .woocommerce-message,
.forexive-checkout .woocommerce-info {
	background: var(--fx-bg2); border-left: 3px solid var(--fx-accent);
	color: var(--fx-text); list-style: none; padding: 12px 16px; border-radius: 8px;
}

.fx-placeorder { margin-top: 18px; }

/* Small "back" link used by the order-pay page (form-pay.php) to return from the
   payment screen to the billing screen. */
.fx-changemethod {
	background: none; border: 0; color: var(--fx-accent); cursor: pointer;
	font-family: inherit; font-size: 13px; padding: 0; margin: 0 0 20px;
	line-height: 20px;
}

/* ---- Aside payment block (Step 2) ----------------------------------- */
.fx-aside__payment {
	margin-top: 18px;
	background: var(--fx-panel);
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-radius);
	padding: 22px;
}
.fx-aside__payment .fx-payment {
	margin-top: 0;
}
.fx-aside__payment .fx-gateways {
	grid-template-columns: 1fr;
	gap: 12px;
}
.fx-aside__payment .fx-gateway__card {
	min-height: 100px;
}
.fx-aside__payment .fx-gateway__icon {
	padding: 16px 12px;
}
.fx-aside__payment .fx-gateway__icon img {
	max-height: 38px;
}
.fx-aside__payment .fx-gateway__title {
	padding: 10px 14px;
	font-size: 13px;
}
.fx-aside__payment .fx-placeorder {
	margin-top: 16px;
}

/* The persistent summary "Continue" (in the aside) advances Step 1 -> Step 2.
   On step 2 the payment methods + Place order in the aside are active,
   so hide the Continue button there. */
.forexive-checkout[data-step="2"] [data-fx-continue] { display: none; }

/* Hide Stripe express checkout (Google Pay / Apple Pay / Link) + its "— OR —"
   separator. Broad, but scoped to the checkout page and to express/payment-request
   named elements (our own gateway markup is .fx-gateway, never matched here). */
body.forexive-checkout-page [id*="express-checkout"],
body.forexive-checkout-page [class*="express-checkout"],
body.forexive-checkout-page [id*="payment-request"],
body.forexive-checkout-page [class*="payment-request"],
body.forexive-checkout-page [id*="express_checkout"],
body.forexive-checkout-page [class*="express_payment"],
body.forexive-checkout-page .wc-block-checkout__express-payment { display: none !important; }

/* No dim/block overlay when moving between our steps. */
.forexive-checkout .blockUI.blockOverlay,
.forexive-checkout .fx-screen--configure .blockUI { display: none !important; }

/* ---- Override parent-theme checkout layout (floats / narrow sidebar) ---- */
body.forexive-checkout-page .woocommerce-form-coupon-toggle,
body.forexive-checkout-page .woocommerce-form-login-toggle,
body.forexive-checkout-page .checkout_coupon { display: none !important; }

.forexive-checkout .pxl-order-review-right,
.forexive-checkout .pxl-order-review-inner { display: contents !important; }

.forexive-checkout form.checkout { display: block; width: 100%;margin: 0 auto!important; }
.forexive-checkout #customer_details,
.forexive-checkout #customer_details > .col-1,
.forexive-checkout #customer_details > .col-2,
.forexive-checkout .col2-set,
.forexive-checkout #order_review,
.forexive-checkout #payment {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
}

/* Parent theme gives #order_review its own grey bordered + padded box, which
   double-frames our .fx-payment card. Strip it so .fx-payment is the only surface. */
.forexive-checkout #order_review {
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Billing + payment as proper dark cards */
.forexive-checkout .woocommerce-billing-fields,
.forexive-checkout .woocommerce-additional-fields {
	background: var(--fx-card);
	border: 1px solid var(--fx-line-green);
	border-radius: var(--fx-radius);
	padding: 24px;
}
.forexive-checkout .woocommerce-additional-fields { margin-top: 18px; }
/* Order notes are disabled — make sure no empty "Additional information" card is left behind. */
.forexive-checkout .woocommerce-additional-fields:not(:has(.form-row)) { display: none; }
.forexive-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}
.forexive-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.forexive-checkout #billing_email_field,
.forexive-checkout #billing_address_1_field,
.forexive-checkout #billing_address_2_field,
.forexive-checkout #billing_country_field { grid-column: 1 / -1; }

/* Billing labels white (parent theme forces #000 at higher specificity). */
.forexive-checkout .woocommerce-billing-fields label { color: #fff !important; }

/* First / Last name each fill their own grid cell -> equal 50%. The parent theme
   sets .form-row-first/last to width:50% + side padding, which inside our grid
   shrinks them; reset that so each is a clean half of the row. */
.forexive-checkout .woocommerce-billing-fields .form-row-first,
.forexive-checkout .woocommerce-billing-fields .form-row-last,
.forexive-checkout #billing_first_name_field,
.forexive-checkout #billing_last_name_field {
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
}
.forexive-checkout .fx-payment {
	background: var(--fx-card);
	border: 1px solid var(--fx-line-soft);
	border-radius: var(--fx-radius);
	padding: 24px;
	margin-top: 18px;
}

/* ---- Trading-account section (sits between billing and payment) -------- */
.forexive-checkout .fx-account {
	background: var(--fx-card);
	border: 1px solid var(--fx-line-green);
	border-radius: var(--fx-radius);
	padding: 24px;
	margin-top: 18px;
}
.forexive-checkout .fx-account__title { font-size: 16px; color: #fff; margin: 0 0 4px; }
.forexive-checkout .fx-account__sub { margin: 0 0 16px; font-size: 13px; color: var(--fx-muted); }

.forexive-checkout .fx-account__switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 20px;
}
.forexive-checkout .fx-account__opt {
	padding: 13px 16px;
	border-radius: 12px;
	border: 1px solid var(--fx-line);
	background: var(--fx-bg);
	color: var(--fx-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: 0.18s;
}
.forexive-checkout .fx-account__opt:hover { border-color: rgba(16, 183, 127, 0.5); }
.forexive-checkout .fx-account__opt.is-active {
	background: var(--fx-grad);
	border-color: transparent;
	color: #fff;
	font-weight: 600;
	box-shadow: 0 10px 26px rgba(16, 183, 127, 0.18);
}

.forexive-checkout .fx-account__field { margin: 0 0 14px; }
.forexive-checkout .fx-account__field:last-child { margin-bottom: 0; }
.forexive-checkout .fx-account__field label {
	display: block;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 8px;
}
.forexive-checkout .fx-account__hint {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--fx-muted);
}
/* Password only applies to the "create new account" choice. */
.forexive-checkout .fx-account[data-fx-account-mode="existing"] [data-fx-account-newonly] { display: none; }

/* ---- Checkout error popup (Place order failures on step 3) ----------- */
.fx-error-popup {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.fx-error-popup[hidden] { display: none !important; }
.fx-error-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 19, 13, 0.72);
}
.fx-error-popup__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 400px;
	max-height: min(85vh, 520px);
	overflow: auto;
	background: var(--fx-panel);
	border: 1px solid var(--fx-line-green);
	border-radius: var(--fx-radius);
	padding: 22px 22px 18px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.fx-error-popup__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.fx-error-popup__title {
	margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
}
.fx-error-popup__x {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 1px solid var(--fx-line);
	border-radius: 50%;
	background: var(--fx-card);
	color: var(--fx-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: 0.18s;
}
.fx-error-popup__x:hover { background: var(--fx-bg2); }
.fx-error-popup__list {
	margin: 0 0 18px;
	padding: 0 0 0 18px;
	color: var(--fx-text);
	font-size: 14px;
	line-height: 1.5;
}
.fx-error-popup__list li { margin-bottom: 8px; }
.fx-error-popup__list li:last-child { margin-bottom: 0; }
.fx-error-popup__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fx-error-popup .fx-btn--secondary {
	background: transparent;
	border: 1px solid var(--fx-line);
	color: var(--fx-text);
}
.fx-error-popup .fx-btn--secondary:hover {
	background: var(--fx-bg2);
	filter: none;
}

/* ---- Bricks compatibility ------------------------------------------- *
   This UI was designed on the nexros theme. Reproduce the base rules it
   relied on (Bricks' normalize sets button line-height 1.15 / no transform,
   and input line-height 40px). :where() keeps the button base at element
   specificity so every component rule above still wins; the input rule
   matches nexros' input[type=...] specificity on purpose. */
:where(.forexive-checkout) button {
	padding: 1px 6px;
	font-size: 13.3333px;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;
}
/* The Bricks header's `.fx-btn.fx-btn` rule resets the transform. */
.forexive-checkout .fx-btn.fx-btn { text-transform: uppercase; }
.forexive-checkout :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"]) {
	height: 46px;
	font-size: 16px;
	line-height: 1.2;
}

/* Billing card: live renders it through the nexros + WooCommerce form styles
   (which outrank the rules above there), reproduced here. */
.forexive-checkout #customer_details { padding: 0 9px 0 15px; }
@media (max-width: 1200px) {
	.forexive-checkout #customer_details { padding-right: 15px; }
}
.forexive-checkout #customer_details .woocommerce-billing-fields {
	margin-bottom: 36px;
	border: 1px solid #ebebeb;
	padding: 38px 32px;
}
.forexive-checkout #customer_details .woocommerce-billing-fields > h3 {
	font-size: 18px;
	line-height: 1.13333;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: capitalize;
	margin: 0 0 12px;
}
.forexive-checkout #customer_details .form-row { padding: 0 0 15px; margin: 0 0 6px; }
.forexive-checkout #customer_details .form-row:last-child { padding-bottom: 0; margin-bottom: 0; }
.forexive-checkout #customer_details label {
	display: block;
	font-size: 16px;
	line-height: 2;
	text-transform: capitalize;
	margin: 0 0 8px;
}
.forexive-checkout #customer_details .required { color: #a00; font-weight: 700; text-decoration: none; }
.forexive-checkout #customer_details #billing_country_field label,
.forexive-checkout #customer_details #billing_address_1_field label { display: none !important; }
.forexive-checkout #customer_details .woocommerce-input-wrapper { display: block; width: 100%; }
.forexive-checkout #customer_details .form-row .input-text { display: block; height: auto; line-height: 24px; }
.forexive-checkout #customer_details .form-row select {
	display: block;
	height: 46px;
	line-height: normal;
	font-size: 16px;
	appearance: none;
	-webkit-appearance: none;
}
/* Bricks' WooCommerce CSS gives the (empty) shipping block a 60px top margin;
   live's col-2 is a 1px box with no margin. */
.forexive-checkout #customer_details .woocommerce-shipping-fields { margin: 0; }
.forexive-checkout #customer_details > .col-2 { min-height: 1px; }
/* Trading-account labels pick up the same 16px form-label size on live (live
   also paints them #000, which is unreadable; they stay white here). */
.forexive-checkout .fx-account__field label { font-size: 16px; line-height: 1.4; text-transform: capitalize; }
.forexive-checkout .fx-account__field .required { font-size: 16px; }

/* Checkout errors are shown in the fx-error-popup; hide WooCommerce's inline
   notice like live's Additional CSS does (scoped to checkout here). */
body.woocommerce-checkout #brx-content .woocommerce-error:not(.fx-error-popup *) { display: none !important; }

/* Page spacing: the Bricks header overlays the content, so rebuild the live
   page wrapper offset (100/90/70/50px) plus the 128px header clearance. */
body.forexive-checkout-page .forexive-checkout {
	margin-top: 100px;
	margin-bottom: 100px;
	padding-top: 128px;
}
@media (max-width: 1200px) {
	body.forexive-checkout-page .forexive-checkout { margin-top: 90px; margin-bottom: 90px; }
}
@media (max-width: 1024px) {
	body.forexive-checkout-page .forexive-checkout { margin-top: 70px; margin-bottom: 70px; }
}
@media (max-width: 767px) {
	body.forexive-checkout-page .forexive-checkout { margin-top: 50px; margin-bottom: 50px; }
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 980px) {
	.fx-layout { grid-template-columns: 1fr; }
	.fx-aside { position: static; order: -1; }
	.forexive-checkout[data-step="2"] .fx-aside { order: 1; }
	.forexive-checkout[data-step="2"] .fx-main { order: 0; }
	.fx-gateways { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.fx-balances { grid-template-columns: repeat(2, 1fr); }
	.forexive-checkout .fx-pill { flex: 1 1 calc(50% - 5px); }
	.fx-h1 { font-size: 22px; }
	.forexive-checkout .fx-account__switch { grid-template-columns: 1fr; }

	.fx-error-popup {
		align-items: flex-end;
		padding: 0;
	}
	.fx-error-popup__dialog {
		max-width: none;
		width: 100%;
		border-radius: var(--fx-radius) var(--fx-radius) 0 0;
		padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
	}
}

/* ---- Order-pay (phase payment) --------------------------------------- *
   The pay page reuses the branded shell but with a simpler two-screen flow
   (billing on screen 1, payment on screen 2) driven by orderpay.js. It does
   NOT use the main checkout's [data-fx-paystate] progressive-disclosure, so
   these rules keep both screens/gateways behaving correctly on their own. */
.forexive-orderpay .fx-orderpay-screen { display: block; }
.forexive-orderpay .fx-orderpay-screen[hidden] { display: none; }

/* Stack the method cards full-width so each selected gateway's box (e.g. the
   NOWPayments blurb) reveals cleanly beneath it. */
.forexive-orderpay .fx-gateways { grid-template-columns: 1fr; }
.forexive-orderpay .fx-gateway__box { display: none; }
.forexive-orderpay .fx-gateway__input:checked ~ .fx-gateway__box { display: block; }

/* Billing "Continue" button sits under the billing card on screen 1. */
.forexive-orderpay .fx-orderpay-billing .fx-btn--continue { margin-top: 22px; }

.forexive-checkout .fx-summary__phase {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--fx-accent, #10b77f);
}

.elementor-element-1fcde02 .elementor-icon-list-items
{
    list-style: none!important;
}
.elementor-element-1fcde02 .elementor-icon-list-items svg
{
    width: 14px!important;
    height: 14px!important;
}