/**
 * Package Order wizard (MLM-4323) — 3 visual steps over one checkout form.
 * Palette follows the client-provided mockup (blue/green/red accents).
 */

:root {
	--vxpo-blue: #123b9f;
	--vxpo-blue2: #0c2f84;
	--vxpo-green: #0c5b20;
	--vxpo-red: #c52222;
	--vxpo-border: #d9dee8;
	--vxpo-bg: #f7f9fc;
}

/* ---------------------------------------------------------------------
   Step progress header
   --------------------------------------------------------------------- */

/* The whole wizard — all 3 steps — centered as one column instead of
   sitting flush left with a wall of empty space on the right.
   Two layers need this, not one: the real Checkout page content is
   `.entry-content.alignwide > [data-block-name="woocommerce/classic-shortcode"]
   > form.checkout`. The classic-shortcode wrapper block carries its own
   `max-width` (from the site's global styles content width) but no
   `margin: auto`, so it sits flush against the left edge of the wide
   `.entry-content` column with all the leftover space dumped on the right
   — centering just `form.checkout` inside it doesn't fix that, the
   wrapper itself has to be centered too. */
[data-block-name="woocommerce/classic-shortcode"][data-shortcode="checkout"] {
	margin-left: auto;
	margin-right: auto;
}

form.checkout {
	max-width: 900px;
	margin: 2rem auto;
	/* Bottom breathing room so the wizard's own Back/Next row (and step
	   3's Place Order button) scrolls up clear of TranslatePress's
	   `position: fixed; bottom: 0` language floater instead of ending up
	   underneath it — see the floater comment further down this file for
	   why this is the fix, not moving the floater. */
	padding-bottom: 90px;
}

/* The theme's own global side padding (Twenty Twenty-Four's
   `has-global-padding` class on <main>, from the site's root-padding
   global style) was adding a second layer of side gutter on top of the
   wizard's own — scoped to the checkout page only (body.woocommerce-checkout)
   so every other page keeps the theme's normal side padding. */
body.woocommerce-checkout main.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

.vxpo-steps {
	display: flex;
	gap: 0;
	max-width: 100%;
	margin: 0 auto 2rem;
	list-style: none;
	padding: 0;
}

/* Step 1 (native billing fieldset) and step 3 (native order review +
   payment) get the same card treatment as the step 2 Package Builder
   panel, instead of sitting on bare white page background. */
#customer_details,
#order_review {
	border: 1px solid var(--vxpo-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	padding: 22px 26px;
	margin: 0 0 1.5rem;
}

/* The parent theme's default .shop_table rules don't force full width —
   every WooCommerce table using this class (checkout review, My Account
   orders list, order-received/thank-you summary, etc.) was sitting
   narrower than its container, with wasted white space beside it. */
.woocommerce-page table.shop_table {
	width: 100%;
}

/* Step 3's order-review table was plain/default WooCommerce markup, out of
   step with step 2's styled Package Builder table
   (.vxpo-products-table below) sitting right next to it in the same
   wizard. Same visual language here: gradient header, clean row
   dividers, consistent spacing — the #order_review card around it already
   provides the outer border/radius/shadow (see above), so the table
   itself stays plain-edged, same relationship .vxpo-products-table has
   with its own .vxpo-card wrapper. */
.woocommerce-checkout-review-order-table {
	border-collapse: collapse;
}

.woocommerce-checkout-review-order-table thead th {
	background: linear-gradient(90deg, var(--vxpo-blue), #0d47bd);
	color: #fff;
	padding: 12px 14px;
	font-size: 14px;
	text-align: left;
}

.woocommerce-checkout-review-order-table thead th.product-total {
	text-align: right;
}

.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tbody th,
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout-review-order-table tfoot th {
	border-bottom: 1px solid #e6e9ef;
	padding: 10px 14px;
	vertical-align: middle;
}

.woocommerce-checkout-review-order-table tbody tr:last-child td,
.woocommerce-checkout-review-order-table tbody tr:last-child th {
	border-bottom: 1px solid #e6e9ef;
}

.woocommerce-checkout-review-order-table tfoot th {
	text-align: left;
	font-weight: 500;
	color: #444;
}

.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
	border-bottom: none;
	padding-top: 14px;
	font-size: 18px;
	font-weight: 800;
	color: var(--vxpo-blue2);
}

.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td {
	border-bottom: none;
}

#order_review_heading {
	font-size: 20px;
	color: var(--vxpo-blue2);
	margin: 0 0 1rem;
}

.vxpo-steps li {
	flex: 1;
	/* Flex items default to min-width:auto — their own content sets a
	   floor flex:1 can't shrink below, so a long word ("Information")
	   was pushing the row wider than the viewport on narrow phones
	   (caught live while checking mobile, MLM-4323 follow-up) instead of
	   wrapping. min-width:0 removes that floor. */
	min-width: 0;
	overflow-wrap: break-word;
	text-align: center;
	padding: 0.75rem 0.5rem;
	border-bottom: 3px solid var(--vxpo-border);
	color: #667085;
	font-weight: 600;
	font-size: 0.95rem;
}

.vxpo-steps li.is-active {
	border-bottom-color: var(--vxpo-blue);
	color: var(--vxpo-blue2);
}

.vxpo-steps li.is-done {
	border-bottom-color: var(--vxpo-green);
	color: var(--vxpo-green);
}

/* ---------------------------------------------------------------------
   Step navigation buttons
   --------------------------------------------------------------------- */

.vxpo-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	max-width: 720px;
	margin: 1.5rem auto;
}

.vxpo-nav-btn {
	padding: 12px 24px;
	border-radius: 7px;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
}

.vxpo-nav-back {
	background: #fff;
	border: 1px solid var(--vxpo-blue2);
	color: var(--vxpo-blue2);
}

.vxpo-nav-next {
	background: var(--vxpo-blue2);
	border: 1px solid var(--vxpo-blue2);
	color: #fff;
	margin-left: auto;
}

.vxpo-nav-next:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------
   Package Builder panel
   --------------------------------------------------------------------- */

#vxpo-package-builder {
	margin: 0 0 2rem;
}

.vxpo-tiers {
	margin-bottom: 1.5rem;
}

.vxpo-tier-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.vxpo-tier-option {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 2px solid var(--vxpo-border);
	border-radius: 10px;
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.vxpo-tier-option:hover {
	border-color: #a9c0ef;
}

.vxpo-tier-option.is-selected {
	border-color: var(--vxpo-blue);
	background: #f2f6ff;
}

.vxpo-tier-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.vxpo-tier-name {
	font-weight: 700;
	color: var(--vxpo-blue2);
}

.vxpo-tier-price {
	font-size: 20px;
	font-weight: 800;
	color: var(--vxpo-green);
}

.vxpo-card {
	border: 1px solid var(--vxpo-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	padding: 22px 26px;
}

.vxpo-header {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: flex-start;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--vxpo-border);
	margin-bottom: 18px;
}

.vxpo-title {
	font-size: 24px;
	margin: 0 0 6px;
	color: var(--vxpo-blue2);
}

.vxpo-sub {
	font-size: 15px;
	color: #444;
	margin: 0;
}

.vxpo-target {
	text-align: right;
	min-width: 170px;
}

.vxpo-amount {
	font-size: 26px;
	font-weight: 800;
	color: var(--vxpo-blue2);
}

.vxpo-target-label {
	font-size: 13px;
	color: #315199;
	margin-top: 2px;
}

.vxpo-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-bottom: 1px solid #e4e7ec;
	margin-bottom: 12px;
	gap: 8px;
}

.vxpo-stat {
	padding: 0 16px 14px 0;
}

.vxpo-stat .k {
	font-size: 13px;
	color: #444;
	margin-bottom: 6px;
}

.vxpo-stat .v {
	font-size: 20px;
	font-weight: 800;
	color: var(--vxpo-blue2);
}

/* Affiliate Discount amount — a real, always-applied discount (MLM-4323
   #28242), styled like a discount (red, matching the client's own
   reference mockup) rather than like the other, neutral stat figures. */
.vxpo-stat .v.vxpo-discount {
	color: #c0392b;
}

/* Same red, for the Affiliate Discount fee's amount wherever it shows up
   as a cart/checkout fee row (step 3 order review, cart page, etc.) — see
   vxpo_style_negative_fee_red() in inc/package-order-checkout.php. Client
   feedback: green wasn't reading clearly as "a discount" on their screen. */
.vxpo-discount-fee,
.vxpo-discount-fee .woocommerce-Price-amount {
	color: #c0392b;
}

/* The row's own LABEL ("Affiliate Discount (25%)"), not just the amount —
   WooCommerce core's review-order.php prints `$fee->name` directly with no
   filter to hook (unlike the amount, which goes through
   wc_cart_totals_fee_html() -> the woocommerce_cart_totals_fee_html
   filter vxpo_style_negative_fee_red() already uses). :has() lets this
   stay pure CSS instead of having to override that whole core template
   just to add a class to one <tr> — reaches "up" from the amount span
   this fee row is already known to contain to color its <th> too. */
.woocommerce-checkout-review-order-table tr.fee:has(.vxpo-discount-fee) th {
	color: #c0392b;
}

/* Small caption under "Affiliate Price (After Discount)" showing the
   numeric ±tolerance band that value needs to land in. */
.vxpo-range-note {
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
}

.vxpo-est-total {
	font-size: 14px;
	color: #444;
	margin: 0 0 14px;
}

.vxpo-progress-wrap {
	margin: 10px 0 18px;
}

.vxpo-progress-line {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vxpo-bar {
	height: 14px;
	background: #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	flex: 1;
}

.vxpo-bar > div {
	height: 100%;
	background: var(--vxpo-green);
	width: 0%;
	transition: 0.2s;
}

.vxpo-status {
	font-size: 14px;
	margin-top: 10px;
	font-weight: 600;
	color: #243b2f;
}

.vxpo-status[data-status="below"],
.vxpo-status[data-status="empty"] {
	color: #7a5b00;
}

.vxpo-status[data-status="above"] {
	color: var(--vxpo-red);
}

.vxpo-status[data-status="ok"] {
	color: var(--vxpo-green);
}

.vxpo-table-wrap {
	overflow-x: auto;
}

.vxpo-products-table {
	width: 100%;
	border-collapse: collapse;
}

.vxpo-products-table thead th {
	background: linear-gradient(90deg, var(--vxpo-blue), #0d47bd);
	color: #fff;
	padding: 12px 10px;
	font-size: 14px;
	text-align: center;
}

.vxpo-products-table thead th:first-child {
	text-align: left;
	padding-left: 16px;
}

.vxpo-products-table tbody td {
	border-bottom: 1px solid #e6e9ef;
	padding: 10px 8px;
	vertical-align: middle;
}

.vxpo-product-cell {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vxpo-product-cell img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 5px;
	flex: 0 0 auto;
}

.vxpo-name {
	color: var(--vxpo-blue2);
	font-weight: 600;
	font-size: 14px;
}

.vxpo-money {
	text-align: center;
	color: #174b1f;
	font-weight: 700;
}

/* Inline "Retail Price: " / "Retail Total: " labels — only meaningful once
   the mobile layout below hides <thead> (a real, translatable label, not
   CSS `content:` — TranslatePress translates HTML text nodes, not
   stylesheet-generated text, so it has to be markup). Hidden by default;
   shown only at the same breakpoint that hides the header row. */
.vxpo-mobile-label {
	display: none;
}

.vxpo-qty {
	text-align: center;
}

.vxpo-stepper {
	display: inline-flex;
	border: 1px solid #d8dee9;
	border-radius: 5px;
	overflow: hidden;
}

.vxpo-stepper button {
	width: 34px;
	height: 34px;
	border: 0;
	background: #fff;
	color: #0d47bd;
	font-size: 18px;
	cursor: pointer;
}

.vxpo-stepper input {
	width: 44px;
	border: 0;
	border-left: 1px solid #d8dee9;
	border-right: 1px solid #d8dee9;
	text-align: center;
	font-size: 15px;
	outline: none;
}

.vxpo-clear {
	margin: 14px 0 0;
	padding: 9px 16px;
	border: 1px solid #cfd8ea;
	border-radius: 6px;
	background: #eef4ff;
	color: var(--vxpo-blue2);
	font-weight: 700;
	cursor: pointer;
}

/* ---------------------------------------------------------------------
   Not relevant to the fixed-price package flow
   --------------------------------------------------------------------- */

.woocommerce-form-coupon-toggle,
.checkout_coupon {
	display: none !important;
}

/* ---------------------------------------------------------------------
   Order review (step 3) — package identity + Retail/Affiliate rows
   (see vxpo_render_package_header_row_in_review() /
   vxpo_render_retail_affiliate_rows_in_review() in
   inc/package-order-checkout.php)
   --------------------------------------------------------------------- */

.woocommerce-checkout-review-order-table .vxpo-review-package-row th {
	background: var(--vxpo-bg);
	font-weight: 700;
	text-align: left;
}

.woocommerce-checkout-review-order-table .vxpo-review-products-selected-row th,
.woocommerce-checkout-review-order-table .vxpo-review-retail-row th,
.woocommerce-checkout-review-order-table .vxpo-review-affiliate-row th {
	font-weight: 400;
	color: #666;
}

/* These 3 rows live in <tbody> (see the hooks above), unlike the native
   Subtotal/Fees/Total rows in <tfoot> that are already right-aligned —
   without this they sat left-aligned, out of step with every other value
   in the table. */
.woocommerce-checkout-review-order-table .vxpo-review-products-selected-row td,
.woocommerce-checkout-review-order-table .vxpo-review-retail-row td,
.woocommerce-checkout-review-order-table .vxpo-review-affiliate-row td {
	text-align: right;
}

.woocommerce-checkout-review-order-table .vxpo-review-affiliate-row td {
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   Terms & Conditions agreement checkbox (step 3)
   --------------------------------------------------------------------- */

.vxpo-agree-row {
	margin: 18px 0;
	padding: 14px 16px;
	background: var(--vxpo-bg);
	border: 1px solid var(--vxpo-border);
	border-radius: 8px;
}

.vxpo-agree-row label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}

.vxpo-agree-row input[type="checkbox"] {
	margin-top: 2px;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

#place_order:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 680px) {
	.vxpo-stats {
		grid-template-columns: 1fr 1fr;
	}
	.vxpo-header {
		flex-direction: column;
	}
	.vxpo-target {
		text-align: left;
	}
	/* Was `min-width: 620px` (force horizontal scroll to reach Qty/Total),
	   confirmed by the client's own phone screenshot (Jira MLM-4323
	   #28445) to be a genuinely bad experience: "либо смотришь товар,
	   либо сдвигаешь вправо и выбираешь сколько добавить" — you can see
	   the product OR reach the quantity stepper, never both. Restructured
	   into stacked cards instead — no horizontal scroll at any width.
	   The table/thead/tbody/tr/td elements keep their real tags (screen
	   readers, semantics) — only their CSS display changes. */
	.vxpo-table-wrap {
		overflow-x: visible;
	}

	.vxpo-products-table {
		display: block;
		width: 100%;
	}

	.vxpo-products-table thead {
		display: none;
	}

	.vxpo-products-table tbody {
		display: block;
	}

	.vxpo-products-table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #e6e9ef;
	}

	.vxpo-products-table td {
		border-bottom: none;
		padding: 4px 0;
	}

	.vxpo-product-cell {
		flex: 0 0 100%;
		width: 100%;
		margin-bottom: 8px;
	}

	.vxpo-product-cell .vxpo-name {
		/* Long translated names (e.g. Chinese product titles, seen
		   overflowing on the client's device) wrap instead of pushing the
		   row wider than the screen. */
		overflow-wrap: break-word;
		min-width: 0;
	}

	.vxpo-money {
		flex: 1 1 auto;
		text-align: left;
	}

	.vxpo-qty {
		flex: 0 0 auto;
		margin-left: auto;
	}

	.vxpo-row-total {
		flex: 0 0 100%;
		text-align: right;
		margin-top: 6px;
	}

	.vxpo-mobile-label {
		display: inline;
		color: #667085;
		font-weight: 400;
		margin-right: 4px;
	}

	/* Step 3 order-review table — unlike .vxpo-products-table above
	   (wrapped in .vxpo-table-wrap { overflow-x: auto; }), WooCommerce's
	   own review-order.php has no such wrapper. Its 2-column layout
	   doesn't hard-overflow the way the step-2 product table would (no
	   min-width/white-space:nowrap forcing it), but on a narrow screen the
	   longer row labels this file adds ("Affiliate Price (After
	   Discount)") crowd a phone-width cell — tightening padding/font-size
	   here instead of letting every row grow tall from wrapped text. The
	   overflow-x:auto is a safety net either way: if a future addition
	   (or a translated label, e.g. the Chinese ones elsewhere on this
	   page, running long) ever does force real overflow, it scrolls
	   inside the table instead of stretching the whole page horizontally. */
	.woocommerce-checkout-review-order-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Restore normal table rendering one level down — the outer element's
	   own display:table was just overridden to display:block above (only
	   way to make overflow-x:auto apply to a <table>), so without this the
	   rows/cells inside would lose their table layout entirely. Min-width
	   left unset deliberately: with it, the table stays exactly the
	   card's width when everything fits (the common case), and only
	   actually scrolls if some row's content genuinely doesn't. */
	.woocommerce-checkout-review-order-table thead,
	.woocommerce-checkout-review-order-table tbody,
	.woocommerce-checkout-review-order-table tfoot,
	.woocommerce-checkout-review-order-table tr {
		display: table;
		width: 100%;
	}

	.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout-review-order-table td {
		padding: 8px 10px;
		font-size: 13px;
	}

	.woocommerce-checkout-review-order-table tr.order-total th,
	.woocommerce-checkout-review-order-table tr.order-total td {
		font-size: 16px;
	}
}

/* Caught live while checking mobile rendering (MLM-4323 follow-up): at
   phone widths the 2-column stat grid set above still isn't wide enough
   for "Remaining to Reach" — label + value overflowed their cell and
   forced the whole page to scroll horizontally. Single column below this
   narrower breakpoint so every stat gets the full row width. Placed AFTER
   the 680px block on purpose — same selector, equal specificity, source
   order decides the winner where both conditions are true. */
@media (max-width: 420px) {
	.vxpo-stats {
		grid-template-columns: 1fr;
	}
	.vxpo-steps li {
		font-size: 0.75rem;
		padding: 0.6rem 0.25rem;
	}
}

/* NOTE: the checkout page doesn't actually render the site's normal
 * "header" template part (the one with [vxpo_header_cart]) at all — it's
 * one of the pages WooCommerce Blocks gives its own dedicated header part
 * for ("checkout-header", wp_template_part post 63), which had its own,
 * separate native `woocommerce/cart-link` block in it (pointless and
 * confusing to link back into checkout from checkout itself, per client
 * feedback). Removed directly from that template part's content instead
 * of a CSS rule here, which would have targeted the wrong markup entirely
 * (confirmed live: .vxpo-header-cart never appears in checkout's DOM).
 */

/* TranslatePress's floating language switcher (MLM-4323 #28445 (4),
 * client's own iPhone screenshot: "выбор языка наезжает на кнопку Next").
 * Left at its normal `position: fixed; bottom: 0` — NOT moved (an earlier
 * version of this pushed the floater itself up; reverted). Fixed instead
 * with form.checkout's own padding-bottom, up near the top of this file —
 * the wizard's Back/Next row (and step 3's Place Order button) scrolls up
 * clear of the floater, which just stays exactly where it always is.
 */