/* =========================================================================
   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; }
.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; }
.fx-pill {
	flex: 1 1 calc(50% - 5px);
	min-width: 130px;
	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;
}
.fx-pill:hover { border-color: rgba(16, 183, 127, 0.5); }
.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; }

/* ---- 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); }
.fx-btn--continue { margin: 0 22px 22px; width: calc(100% - 44px); }
.forexive-checkout[data-step="2"] .fx-btn--continue { display: none; }

/* ---- 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);
}

/* Details view: show ONLY the chosen method's fields (hide the headings, the
   other cards, and the chosen card's label box — just the payment fields remain). */
.fx-screen--payment[data-fx-paystate="details"] .fx-gateways__heading,
.fx-screen--payment[data-fx-paystate="details"] .fx-gateway:not(.is-selected) { display: none; }
.fx-screen--payment[data-fx-paystate="details"] .fx-gateway.is-selected { display: block; grid-column: 1 / -1; }
.fx-screen--payment[data-fx-paystate="details"] .fx-gateway.is-selected .fx-gateway__card { display: none; }
.fx-screen--payment[data-fx-paystate="details"] .fx-gateway.is-selected .fx-gateway__box {
	display: block !important;
	margin-top: 0;
}
/* The payment_box is now the card, so #payment is just a full-width passthrough
   (no second surface) — making the box exactly as wide as the billing card. */
.forexive-checkout[data-fx-paystate="details"] .fx-payment {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

/* ---- 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; }

/* 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;
}

/* ---- Step 2 progressive disclosure: method cards -> reveal form -------- */
.fx-screen--payment[data-fx-paystate="method"] #customer_details,
.fx-screen--payment[data-fx-paystate="method"] .fx-placeorder,
.fx-screen--payment[data-fx-paystate="method"] .fx-changemethod { display: none; }
.fx-screen--payment[data-fx-paystate="method"] .fx-gateway__box { display: none !important; }
.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;
}
.fx-placeorder { margin-top: 18px; }

/* ---- Step 2: line the summary panel up with the left-column content ------
   The grid starts both columns at the same Y, but in the "method" view the left
   column leads with the payment-cards box and in "details" view with a small
   "change method" link above the billing card. Nudge the panel so its top edge
   meets the first real block on the left in each state. */
.forexive-checkout[data-step="2"][data-fx-paystate="method"] .fx-payment { margin-top: 0; }
.forexive-checkout[data-step="2"][data-fx-paystate="details"] .fx-aside { margin-top: 40px; }

/* 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%; }
.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;
}
/* Hidden on the method-cards view; appears with billing once a method is chosen
   (mirrors the #customer_details rule in the progressive-disclosure block). */
.fx-screen--payment[data-fx-paystate="method"] .fx-account { display: none; }

.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; }

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