/**
 * Instant Checkout popup styles — shared base: tokens, components and WooCommerce neutralisation
 * (structure lives in layout-<slug>.css). Scoped under .wcf-icp-overlay so restyling the checkout
 * never leaks onto the product page; classes/IDs checkout.js and gateways depend on are styled,
 * never renamed. Logical properties throughout so `grunt rtlcss` has nothing to mirror wrongly.
 */

.wcf-icp-overlay {
	--wcf-icp-primary: #0084d6;
	--wcf-icp-heading: #1e1e1e;
	--wcf-icp-text: #4a4a4a;
	--wcf-icp-bg: #fff;
	--wcf-icp-rail-bg: #f6f7f9;
	--wcf-icp-font-size: 15px;

	--wcf-icp-border: #e4e7eb;
	--wcf-icp-border-strong: #d3d8de;
	--wcf-icp-muted: #5b636c;
	--wcf-icp-error: #c0392b;
	--wcf-icp-done: #0d6b4a;
	--wcf-icp-done-tint: #e7f4ec;
	--wcf-icp-radius: 4px;
	--wcf-icp-radius-md: 8px;

	position: fixed;
	inset: 0;

	block-size: 100dvh;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;

	/* Keeps the flow pane's scroll from chaining out to the page behind once it reaches either end. */
	overscroll-behavior: contain;
	background: rgba( 15, 17, 21, 0.55 );
	backdrop-filter: blur( 3px );
	font-size: var( --wcf-icp-font-size );
	line-height: 1.5;
	color: var( --wcf-icp-text );
}

/* Force border-box: core block themes (Twenty Twenty-Five) don't set it globally, so the dialog stays dimensionally identical across themes. */

.wcf-icp-overlay,
.wcf-icp-overlay *,
.wcf-icp-overlay *::before,
.wcf-icp-overlay *::after {
	box-sizing: border-box;
}

body.wcf-icp-open {
	overflow: hidden;
}

.wcf-icp-overlay .wcf-icp-icon {
	inline-size: 13px;
	block-size: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Summary card */

.wcf-icp-overlay .wcf-icp-card {
	padding: 16px;
	border: 1px solid var( --wcf-icp-border );
	border-radius: var( --wcf-icp-radius-md );
	background: #fff;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.06 );
}

.wcf-icp-overlay .wcf-icp-card-label {
	margin-block-end: 14px;
	font-size: 0.73em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wcf-icp-muted );
}

.wcf-icp-overlay .wcf-icp-card-coupon {
	margin-block-start: 12px;
	padding: 14px 16px;
}

/* Type scale set once here; setting em on descendants too would compound (0.83 x 0.83) and shrink the coupon link. */

.wcf-icp-overlay .wcf-icp-card-coupon {
	font-size: 0.83em;
}

/* Strip notice chrome (border, tint, icon) from both the classic .woocommerce-info and block themes' .wc-block-components-notice-banner. */

.wcf-icp-overlay .wcf-icp-card-coupon form,
.wcf-icp-overlay .wcf-icp-card-coupon p,
.wcf-icp-overlay .wcf-icp-card-coupon .woocommerce-info,
.wcf-icp-overlay .wcf-icp-card-coupon .wc-block-components-notice-banner,
.wcf-icp-overlay .wcf-icp-card-coupon .woocommerce-form-coupon-toggle {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: inherit;
	color: var( --wcf-icp-text );
}

/* CartFlows hides WooCommerce's coupon toggle on checkout steps; the popup relocates the review table, so the toggle is the coupon UI here and must be shown again. */

.wcf-icp-overlay .wcf-icp-card-coupon .woocommerce-form-coupon-toggle,
.wcf-icp-overlay .wcf-icp-card-coupon .woocommerce-form-coupon-toggle .woocommerce-info {
	display: block;
	visibility: visible;
	opacity: 1;
}

.wcf-icp-overlay .wcf-icp-card-coupon .woocommerce-info,
.wcf-icp-overlay .wcf-icp-card-coupon .wc-block-components-notice-banner {
	min-block-size: 0;
	/* WooCommerce Blocks sets this notice banner's padding to 16px !important, so the "Have a coupon?"
	   toggle reads as a fat banner on block themes; !important is the only way to strip it back to a line. */
	padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	border: 0;
	background: none;
	line-height: 1.5;
	box-shadow: none;
}

.wcf-icp-overlay .wcf-icp-card-coupon .woocommerce-info::before,
.wcf-icp-overlay .wcf-icp-card-coupon .wc-block-components-notice-banner > svg {
	display: none;
}

.wcf-icp-overlay .wcf-icp-card-coupon a {
	color: var( --wcf-icp-primary-ink );
	font-weight: 700;
	text-decoration: none;
}

/* Storefront paints .woocommerce-info links white on hover — invisible on this white card. */
.wcf-icp-overlay .wcf-icp-card-coupon a:hover {
	color: var( --wcf-icp-primary-ink );
	text-decoration: underline;
}

/* WooCommerce floats the coupon form as two columns that can't fit the 280px rail; stack full-width instead. */

.wcf-icp-overlay .wcf-icp-card-coupon .form-row {
	inline-size: 100%;
	max-inline-size: none;
	margin: 0 0 8px;
	padding: 0;
	float: none;
	clear: none;
}

/* Width classes named explicitly to beat WooCommerce's three-class `.woocommerce form .form-row-first` (47%). */

.wcf-icp-overlay .wcf-icp-card-coupon .form-row.form-row-first,
.wcf-icp-overlay .wcf-icp-card-coupon .form-row.form-row-last,
.wcf-icp-overlay .wcf-icp-card-coupon .form-row.form-row-wide {
	inline-size: 100%;
	float: none;
}

.wcf-icp-overlay .wcf-icp-card-coupon .form-row:last-child {
	margin-block-end: 0;
}

/* WooCommerce's inline CSS sizes form.checkout_coupon to 50% via the body class; reclaim full width here. */
.wcf-icp-overlay .wcf-icp-card-coupon form.checkout_coupon {
	inline-size: 100%;
	margin-block-start: 12px;
}

.wcf-icp-overlay .wcf-icp-card-coupon input[type="text"] {
	inline-size: 100%;
	min-block-size: 38px;
	padding: 8px 11px;
	border: 1.5px solid var( --wcf-icp-border-strong );
	border-radius: var( --wcf-icp-radius );
	font-size: 1em;
}

/* The coupon field lives outside #wcf-embed-checkout-form, so it misses the id-scoped field sizing and
   WooCommerce's block-theme stylesheet inflates it larger than the other fields; match them back here.
   Specificity is raised past `.woocommerce-page form .form-row input.input-text` to win on block themes. */

.wcf-icp-overlay .wcf-icp-card-coupon form.checkout_coupon .form-row input[type="text"] {
	min-block-size: 44px;
	padding: 11px 13px;
}

.wcf-icp-overlay .wcf-icp-card-coupon button {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	/* Match the coupon field's height (44px) so the button lines up with it, whether stacked (Two Pane)
	   or sitting beside it (QuickBuy); the theme otherwise shrinks button padding and leaves it squat. */
	min-block-size: 44px;
	padding: 9px 12px;
	border: 1.5px solid var( --wcf-icp-border-strong );
	border-radius: var( --wcf-icp-radius );
	background: var( --wcf-icp-bg );
	color: var( --wcf-icp-heading );
	font-size: 0.83em;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease;
}

/* Two Pane stacks the coupon field and button; give the button air so it isn't joined to the field.
   QuickBuy lays them out on one row, so this margin is scoped to Two Pane to keep them aligned there. */

.wcf-icp-overlay.wcf-icp-layout-two-pane .wcf-icp-card-coupon button {
	margin-block-start: 8px;
}

/* Block themes give a wp-element-button (WooCommerce's Apply coupon) a taller min-height than the
   coupon field and the Power Coupons button; hold it to the same 44px so the coupon row stays even. */

.wcf-icp-overlay .wcf-icp-card-coupon button.wp-element-button {
	min-block-size: 44px;
}

/* Apply is a neutral outline button, not a second CTA competing with Continue; hover only shades the
   ground. Stated on hover too because themes like Astra otherwise repaint WooCommerce buttons their accent. */
.wcf-icp-overlay .wcf-icp-card.wcf-icp-card-coupon button:hover {
	border-color: var( --wcf-icp-border-strong );
	background: var( --wcf-icp-rail-bg );
	color: var( --wcf-icp-heading );
}

/* Summary label is a lighter grey than the rail body copy. */

.wcf-icp-overlay .wcf-icp-card-label {
	color: var( --wcf-icp-muted );
}

/* Hide the funnel checkout's own headings and column wrappers; the popup supplies its own heading and has relocated everything meaningful into a step pane or the rail. */

.wcf-icp-overlay .wcf-icp-body h3:not( #ship-to-different-address ),
.wcf-icp-overlay .wcf-icp-body #order_review_heading,
.wcf-icp-overlay .wcf-icp-body #customer_details,
.wcf-icp-overlay .wcf-icp-body .col2-set,
.wcf-icp-overlay .wcf-icp-body .wcf-col2-set,
.wcf-icp-overlay .wcf-icp-body #order_review,
.wcf-icp-overlay .wcf-icp-body .woocommerce-checkout-review-order,
.wcf-icp-overlay .wcf-icp-body .wcf-order-wrap,
.wcf-icp-overlay .wcf-icp-body .wcf-collapsed-order-review-section {
	display: none;
}

.wcf-icp-overlay .wcf-icp-body #wc-stripe-express-checkout-element,
.wcf-icp-overlay .wcf-icp-body #wc-stripe-express-checkout-button-separator,
.wcf-icp-overlay .wcf-icp-body #wcpay-express-checkout-element,
.wcf-icp-overlay .wcf-icp-body #wcpay-express-checkout-button-separator {
	display: none !important; /* stylelint-disable-line declaration-no-important */
}

/* Step panes stay visible (the hide rule above matches former ancestors); grid defined further down. */

.wcf-icp-overlay .wcf-icp-body .wcf-icp-step {
	display: grid;
}

/* Restore the field label CartFlows' skin hides; id-scoped selector to beat CartFlows' own id-scoped rules. */

.wcf-icp-overlay #wcf-embed-checkout-form .form-row > label:not( .checkbox ) {
	position: static;
	inset: auto;
	display: block;

	/* Clear CartFlows' padding/em-margin so the label aligns to the input's border, not its text. */
	margin: 0 0 6px;
	padding: 0;
	inline-size: auto;
	opacity: 1;
	font-size: 0.8em;
	font-weight: 700;
	color: var( --wcf-icp-heading );
	transform: none;
	pointer-events: auto;
}

.wcf-icp-overlay .wcf-icp-sub:empty {
	display: none;
}

.wcf-icp-overlay .wcf-icp-close {
	margin-inline-start: auto;
	flex: none;

	/* Flex-centered so the icon cannot ride the theme's button line-height off centre. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 1px solid var( --wcf-icp-border );
	border-radius: 50%;
	background: none;
	color: var( --wcf-icp-muted );
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.wcf-icp-overlay .wcf-icp-close:hover,
.wcf-icp-overlay .wcf-icp-close:focus {
	background: var( --wcf-icp-rail-bg );
	color: var( --wcf-icp-heading );
}

.wcf-icp-overlay .wcf-icp-notices {
	margin-block-end: 16px;
}

.wcf-icp-overlay .wcf-icp-notices:empty {
	display: none;
}

.wcf-icp-overlay .wcf-icp-notice {
	padding: 11px 14px;
	border: 1px solid #f3c9c4;
	border-radius: var( --wcf-icp-radius );
	background: #fdecea;
	font-size: 0.87em;
	color: #8c2c21;
}

/* ---------- steps ----------
 * Inactive steps are clipped, not display:none: checkout.js reads has_full_address from
 * `.address-field.validate-required:visible`, so hiding them would stop shipping/tax calculation.
 * Clipping keeps them measurable to jQuery; `inert` keeps them out of the tab order.
 */

.wcf-icp-overlay .wcf-icp-step:not( .is-active ) {
	position: absolute;
	inset-block-start: 0;

	/* Off-screen at full width, not collapsed to 1px, so fields stay measurable at their real size. */
	inset-inline-start: -9999px;
}

.wcf-icp-overlay .wcf-icp-body {
	position: relative;
	flex: 1 1 auto;

	/* The clip edge sat on the fields' own edges and cut their 3px focus ring; a 4px gutter the margin cancels out leaves the layout where it was. */
	padding-inline: 4px;
	margin-inline: -4px;

	/* Clip the off-screen steps' height, which would otherwise add a phantom scrollbar. */
	overflow: hidden;
	overflow: clip;
}

/* Inline variation dropdowns replace the Quick View modal a variable bump would otherwise open. */

.wcf-icp-overlay .wcf-icp-bump-variations {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-block-start: 10px;
}

.wcf-icp-overlay .wcf-icp-bump-variation-row {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	font-size: 0.75em;
	font-weight: 700;
	color: var( --wcf-icp-heading );
}

.wcf-icp-overlay .wcf-icp-bump-attr {
	min-inline-size: 130px;
	padding: 7px 9px;
	border: 1px solid var( --wcf-icp-border );
	border-radius: var( --wcf-icp-radius-md );
	background-color: var( --wcf-icp-bg );
	font-size: 1em;
	font-weight: 500;
	color: var( --wcf-icp-heading );
}

/* A variable bump's checkbox stays disabled until a variation is picked. */

.wcf-icp-overlay .wcf-icp-step .wcf-bump-order-cb:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* ---------- order summary ----------
 * Restyle Woo's order-review shop_table into the summary's own rows, wherever a layout mounts it. Laid out with flex/grid rather
   than table cells: the table's two fixed columns cramped the product name and wrapped long shipping
   labels. `table.shop_table` in the selectors to beat Woo's and the themes' own class-scoped rules. */

.wcf-icp-overlay .wcf-icp-summary table,
.wcf-icp-overlay .wcf-icp-summary table.shop_table {
	inline-size: 100%;

	/* The rows are flex, so the table sizes itself to their min-content and would push the card open. */
	max-inline-size: 100%;
	table-layout: fixed;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-size: 1em;
}

/* Hide the "Product / Subtotal" table chrome. */

.wcf-icp-overlay .wcf-icp-summary thead {
	display: none;
}

.wcf-icp-overlay .wcf-icp-summary table th,
.wcf-icp-overlay .wcf-icp-summary table td,
.wcf-icp-overlay .wcf-icp-summary table.shop_table th,
.wcf-icp-overlay .wcf-icp-summary table.shop_table td {
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.93em;
	font-weight: 400;
	line-height: 1.45;
	text-align: start;
	vertical-align: top;
	color: var( --wcf-icp-text );
}

/* ---------- item rows ----------
 * The row is the grid, and the cells dissolve into it, so the name can run the full width while the
 * quantity and the line price share the line beneath it. Placing every part explicitly also keeps the
 * bare &nbsp; the template prints after the name from taking a cell and pushing the quantity down.
 */

.wcf-icp-overlay .wcf-icp-summary tbody,
.wcf-icp-overlay .wcf-icp-summary table.shop_table tbody {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wcf-icp-overlay .wcf-icp-summary tbody tr {
	display: grid;
	grid-template-columns: 40px minmax( 0, 1fr ) auto;
	grid-template-rows: auto auto;
	gap: 0 12px;
	align-items: start;

	/* The template's stray &nbsp; opens a row of its own unless both the row's strut and the cell's text are zeroed. */
	line-height: 0;
}

.wcf-icp-overlay .wcf-icp-summary tbody td.product-name,
.wcf-icp-overlay .wcf-icp-summary table.shop_table tbody td.product-name,
.wcf-icp-overlay .wcf-icp-summary .wcf-icp-item {
	display: contents;

	/* The other half of the reset above; every real child restates its own line-height below. */
	line-height: 0;
}

.wcf-icp-overlay .wcf-icp-summary .wcf-icp-item-thumb {
	display: flex;
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border: 0.5px solid var( --wcf-icp-border );
	border-radius: 6px;
	background: var( --wcf-icp-bg );
	overflow: hidden;
}

/* A line with no image would otherwise leave a 40px hole where the name should start. */

.wcf-icp-overlay .wcf-icp-summary .wcf-icp-item-thumb:empty {
	display: none;
}

.wcf-icp-overlay .wcf-icp-summary .wcf-icp-item-thumb img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	margin: 0;
	object-fit: cover;
}

.wcf-icp-overlay .wcf-icp-summary .wcf-icp-item-name {
	grid-column: 2 / -1;
	grid-row: 1;

	/* The cell already carries the summary's size; naming it again compounded the name down to 13px. */
	font-size: 1em;
	font-weight: 600;
	line-height: 1.35;
	color: var( --wcf-icp-heading );
}

.wcf-icp-overlay .wcf-icp-summary tbody .product-quantity {
	display: block;
	grid-column: 2;
	grid-row: 2;
	margin: 4px 0 0;
	font-size: 0.93em;
	font-weight: 400;
	line-height: 1.45;
	color: var( --wcf-icp-muted );
}

/* Item meta gets a row sized by its own content: starving it was what made a variation overlap the
   line below. Two tracks so each attribute reads as "Name: value" on one line. */

.wcf-icp-overlay .wcf-icp-summary tbody .variation {
	display: grid;
	grid-column: 2 / -1;
	grid-row: 3;
	grid-template-columns: max-content minmax( 0, 1fr );
	gap: 0 5px;
	margin: 4px 0 0;
	font-size: 0.87em;
	line-height: 1.45;
	color: var( --wcf-icp-muted );
}

.wcf-icp-overlay .wcf-icp-summary tbody .variation dt,
.wcf-icp-overlay .wcf-icp-summary tbody .variation dd {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	color: inherit;
}

.wcf-icp-overlay .wcf-icp-summary tbody .variation dd p {
	margin: 0;
	padding: 0;
}

.wcf-icp-overlay .wcf-icp-summary tbody td.product-total {
	grid-column: 3;
	grid-row: 2;
	margin: 4px 0 0;
	font-size: 0.93em;
	font-weight: 600;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
	text-align: end;
	color: var( --wcf-icp-heading );
}

/* A discounted line names what it would have cost; the struck figure stays quiet beside the one charged. */

.wcf-icp-overlay .wcf-icp-summary tbody td.product-total del {
	margin-inline-end: 6px;
	font-size: 0.87em;
	font-weight: 400;
	color: var( --wcf-icp-muted );
	text-decoration: line-through;
}

/* Themes underline or shade an ins; here it is only the price being charged. */

.wcf-icp-overlay .wcf-icp-summary tbody td.product-total ins {
	background: none;
	font-weight: inherit;
	text-decoration: none;
	color: inherit;
}

/* ---------- totals ---------- */

.wcf-icp-overlay .wcf-icp-summary tfoot,
.wcf-icp-overlay .wcf-icp-summary table.shop_table tfoot {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-block-start: 16px;
	padding-block-start: 16px;
	border-block-start: 1px solid var( --wcf-icp-border );
}

.wcf-icp-overlay .wcf-icp-summary tfoot tr,
.wcf-icp-overlay .wcf-icp-summary table.shop_table tfoot tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

/* The label takes the slack so every amount lands on the same trailing edge. */

.wcf-icp-overlay .wcf-icp-summary tfoot th {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-weight: 400;
	color: var( --wcf-icp-muted );
}

.wcf-icp-overlay .wcf-icp-summary tfoot td {
	flex: none;
	text-align: end;
}

.wcf-icp-overlay .wcf-icp-summary tfoot tr.order-total,
.wcf-icp-overlay .wcf-icp-summary tfoot tr:last-child {
	margin-block-start: 4px;
	padding-block-start: 14px;
	border-block-start: 1px solid var( --wcf-icp-border );
}

.wcf-icp-overlay .wcf-icp-summary tfoot tr.order-total th,
.wcf-icp-overlay .wcf-icp-summary tfoot tr:last-child th {
	font-weight: 600;
	color: var( --wcf-icp-heading );
}

.wcf-icp-overlay .wcf-icp-summary tfoot tr.order-total td,
.wcf-icp-overlay .wcf-icp-summary tfoot tr:last-child td {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --wcf-icp-heading );
}

.wcf-icp-overlay .wcf-icp-summary tfoot tr.order-total .woocommerce-Price-amount,
.wcf-icp-overlay .wcf-icp-summary tfoot tr:last-child .woocommerce-Price-amount {
	font-weight: inherit;
	color: inherit;
}

/* Amounts never split across lines, but the cell around them must wrap or long totals overflow the card. */

.wcf-icp-overlay .wcf-icp-summary .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Woo renders shipping as a list and leaves its reset to woocommerce.css; themes that dequeue it
   (Bricks) leave the UA indent, misaligning the rate. Asserted here rather than per theme. */

.wcf-icp-overlay .wcf-icp-summary .woocommerce-shipping-methods,
.wcf-icp-overlay .wcf-icp-summary #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcf-icp-overlay .wcf-icp-summary .woocommerce-shipping-methods li,
.wcf-icp-overlay .wcf-icp-summary #shipping_method li {
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
}

.wcf-icp-overlay .wcf-icp-summary .woocommerce-shipping-methods li:last-child,
.wcf-icp-overlay .wcf-icp-summary #shipping_method li:last-child {
	margin-block-end: 0;
}

/* Radio and label sit side by side so a long name wraps beside the radio; the doubled id outranks a theme's hanging indent. */

.wcf-icp-overlay .wcf-icp-summary #shipping_method#shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding-inline-start: 0;
	text-indent: 0;
}

.wcf-icp-overlay .wcf-icp-summary #shipping_method input.shipping_method {
	flex: none;

	/* Centres the 13px radio on the label's first line rather than its baseline. */
	margin: 3.5px 0 0;
}

/* The rate label carries its own amount, so wrap it inside the row instead of widening it. */

.wcf-icp-overlay .wcf-icp-summary .woocommerce-shipping-methods label {
	flex: 1 1 0;
	min-inline-size: 0;
	margin: 0;
	font-weight: 400;
	overflow-wrap: anywhere;
}

/* Rate names and the no-options notice are prose, so the row stacks: label above, full width below it. The pending row stays inline like the tax one. */

.wcf-icp-overlay .wcf-icp-summary tfoot tr.shipping:not( .wcf-icp-pending-row ),
.wcf-icp-overlay .wcf-icp-summary tfoot tr.woocommerce-shipping-totals:not( .wcf-icp-pending-row ) {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

.wcf-icp-overlay .wcf-icp-summary tfoot tr.shipping:not( .wcf-icp-pending-row ) td,
.wcf-icp-overlay .wcf-icp-summary tfoot tr.woocommerce-shipping-totals:not( .wcf-icp-pending-row ) td {
	min-inline-size: 0;
	text-align: start;
	overflow-wrap: anywhere;
}

/* ---------- coupons ----------
 * A coupon the shopper typed is the one line in the summary that is good news, so it is the one line
 * that carries a colour. Its code moves out of the label's sentence into a tag, and the tag carries
 * the control that takes it off again. Coupons a plugin applied by itself are left exactly as that
 * plugin renders them, remove control and all.
 */

/* The label and its tag share one line, and the tag gives up width first: a long code otherwise wrapped
   to three lines and pushed the amount away from the figures above it. No other rule sets `display` on
   these cells, so this applies whatever the layout sheets say about the rest of the row. */

.wcf-icp-overlay .woocommerce-checkout-review-order-table tfoot tr.cart-discount th {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-inline-size: 0;
}

.wcf-icp-overlay .wcf-icp-coupon-code {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	min-inline-size: 0;
	max-inline-size: 140px;
	padding: 1px 5px 1px 7px;
	border-radius: 4px;
	background: var( --wcf-icp-done-tint );
	color: var( --wcf-icp-done );
	font-size: 0.92em;
	font-weight: 600;
}

/* Only the code gives way, so the control beside it is never the part that gets clipped. */

.wcf-icp-overlay .wcf-icp-coupon-code-text {
	min-inline-size: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* The badge clips a long code, so hovering it, or reaching its remove control by keyboard, spells the
   code out. It wraps rather than runs wide: the rail it sits in clips on both axes. */

.wcf-icp-overlay .wcf-icp-coupon-code::after {
	content: attr( data-code );
	position: absolute;
	inset-block-end: calc( 100% + 6px );
	inset-inline-start: 0;
	z-index: 2;
	inline-size: max-content;
	max-inline-size: 190px;
	padding: 5px 8px;
	border-radius: var( --wcf-icp-radius );
	background: var( --wcf-icp-heading );
	color: var( --wcf-icp-bg );
	font-size: 0.85em;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: anywhere;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.wcf-icp-overlay .wcf-icp-coupon-code:hover::after,
.wcf-icp-overlay .wcf-icp-coupon-code:focus-within::after {
	visibility: visible;
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.wcf-icp-overlay .wcf-icp-coupon-code::after {
		transition: none;
	}
}

.wcf-icp-overlay .wcf-icp-coupon-remove {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 16px;
	block-size: 16px;
	border-radius: 3px;
	color: inherit;
	font-size: 1.15em;
	line-height: 1;
	text-decoration: none;
	opacity: 0.75;
}

.wcf-icp-overlay .wcf-icp-coupon-remove:hover,
.wcf-icp-overlay .wcf-icp-coupon-remove:focus-visible {
	background: rgba( 13, 107, 74, 0.14 );
	color: inherit;
	opacity: 1;
	text-decoration: none;
}

/* Only what the shopper entered is coloured: an auto-applied promotion keeps the presentation the
   plugin that applied it chose, including its own remove control. */

.wcf-icp-overlay .wcf-icp-discount {
	color: var( --wcf-icp-done );
	font-weight: 500;
}

/* WooCommerce announces applying and removing a coupon in a band above the form, which repeats what
   the summary already shows and shifts the fields down. Hidden rather than suppressed server-side:
   checkout.js gates the whole refresh on that response being non-empty, so muting it in PHP leaves
   the coupon removed but the totals stale. Errors are a different class and still show. */

.wcf-icp-overlay .woocommerce-message {
	display: none;
}

/* ---------- collapsed summary ----------
 * One component in two homes: pinned under QuickBuy's header, and the rail's own head on a narrow
 * Two Pane, where the summary would otherwise stand between the shopper and the first field.
 */

.wcf-icp-overlay .wcf-icp-total-toggle {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	inline-size: 100%;
	min-block-size: 44px;
	margin: 0;
	padding: 10px 22px;
	border: 0;
	background: none;
	text-align: start;
	cursor: pointer;
}

.wcf-icp-overlay .wcf-icp-total-lead {
	display: flex;
	gap: 8px;
	min-inline-size: 0;
	align-items: center;
}

.wcf-icp-overlay .wcf-icp-total-amount {
	color: var( --wcf-icp-heading );
	font-size: 1em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wcf-icp-overlay .wcf-icp-total-count {
	flex: none;
	padding: 2px 8px;
	border-radius: 100px;
	background: var( --wcf-icp-border );
	color: var( --wcf-icp-muted );
	font-size: 0.77em;
	font-weight: 600;
}

.wcf-icp-overlay .wcf-icp-total-more {
	display: flex;
	flex: none;
	gap: 4px;
	align-items: center;
	color: var( --wcf-icp-primary-ink );
	font-size: 0.8em;
	font-weight: 600;
}

.wcf-icp-overlay .wcf-icp-total-chevron {
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

.wcf-icp-overlay .wcf-icp-total-toggle[aria-expanded="true"] .wcf-icp-total-chevron {
	transform: rotate( 180deg );
}

/* A class-level display beats the browser's own [hidden] rule, so the collapsed panel has to say so. */

.wcf-icp-overlay .wcf-icp-total-panel[hidden] {
	display: none;
}

.wcf-icp-overlay .wcf-icp-total-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px 22px 16px;
	border-block-start: 1px solid var( --wcf-icp-border );
}

.wcf-icp-overlay .wcf-icp-total-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block-start: 14px;
	border-block-start: 1px solid var( --wcf-icp-border );
	font-size: 0.93em;
}

.wcf-icp-overlay .wcf-icp-total-row {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	color: var( --wcf-icp-text );
}

.wcf-icp-overlay .wcf-icp-total-row span:last-child {
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.wcf-icp-overlay .wcf-icp-total-row.is-pending span:last-child {
	color: var( --wcf-icp-muted );
	font-style: italic;
}

/* ---------- step navigation ---------- */

/* One stepper in two shapes: pills in Two Pane, a row of tabs in QuickBuy. The number is decorative
 * beside its label, so it is hidden from assistive tech and the position is announced separately.
 */

.wcf-icp-overlay .screen-reader-text,
.wcf-icp-overlay .wcf-icp-sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.wcf-icp-overlay .wcf-icp-pill-button {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	border: 0;
	background: none;
	font-size: 0.87em;
	font-weight: 700;
	color: var( --wcf-icp-muted );
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wcf-icp-overlay .wcf-icp-pill-button:disabled,
.wcf-icp-overlay .wcf-icp-pill.is-active .wcf-icp-pill-button {
	cursor: default;
}

.wcf-icp-overlay .wcf-icp-pill-num {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background: var( --wcf-icp-border );
	font-size: 0.92em;
	font-weight: 700;
	color: var( --wcf-icp-muted );
	transition: background 0.15s ease, color 0.15s ease;
}

.wcf-icp-overlay .wcf-icp-pill.is-active .wcf-icp-pill-num {
	background: var( --wcf-icp-primary-cta );
	color: var( --wcf-icp-on-primary );
}

.wcf-icp-overlay .wcf-icp-pill.is-done .wcf-icp-pill-button {
	color: var( --wcf-icp-heading );
}

/* Green rather than the heading's near-black, so a finished step reads as finished and not merely past. */

.wcf-icp-overlay .wcf-icp-pill.is-done .wcf-icp-pill-num {
	background: var( --wcf-icp-done );
	color: #fff;
	font-size: 0;
}

.wcf-icp-overlay .wcf-icp-pill.is-done .wcf-icp-pill-num::after {
	content: "";
	inline-size: 5px;
	block-size: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate( 45deg ) translate( -1px, -1px );
}

/* Re-centre button labels: themes like Bricks normalise `button { text-align: inherit }`, flushing them left. */

.wcf-icp-overlay .wcf-icp-pill-button,
.wcf-icp-overlay .wcf-icp-next,
.wcf-icp-overlay .wcf-icp-back,
.wcf-icp-overlay .wcf-icp-close,
.wcf-icp-overlay .wcf-icp-body #place_order {
	text-align: center;
}

.wcf-icp-overlay .wcf-icp-nav {
	display: flex;
	gap: 10px;
	margin-block-start: auto;
	padding-block-start: 16px;
}

.wcf-icp-overlay .wcf-icp-next {
	flex: 1 1 auto;
	padding: 14px 18px;
	border: 0;
	border-radius: var( --wcf-icp-radius );
	background: var( --wcf-icp-primary-cta );
	color: var( --wcf-icp-on-primary );
	font-size: 0.97em;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.wcf-icp-overlay .wcf-icp-next:hover {
	filter: brightness( 1.35 );
}

.wcf-icp-overlay .wcf-icp-back {
	flex: none;
	min-block-size: 44px;
	padding: 13px 18px;
	border: 1.5px solid var( --wcf-icp-border-strong );
	border-radius: var( --wcf-icp-radius );
	background: none;
	font-size: 0.9em;
	font-weight: 700;
	color: var( --wcf-icp-heading );
	cursor: pointer;
	transition: background 0.15s ease;
}

.wcf-icp-overlay .wcf-icp-back:hover {
	background: var( --wcf-icp-rail-bg );
}

/* `display: flex` above beats [hidden]'s display:none, so hide the nav bar explicitly on the payment step. */

.wcf-icp-overlay .wcf-icp-nav[hidden] {
	display: none;
}

/* Payment step: Back (narrow) and #place_order share one row; id selectors beat WooCommerce's #place_order width. Padding matches the .wcf-icp-nav gap the other steps use. */

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-actions {
	display: flex;
	gap: 10px;
	align-items: stretch;
	padding-block-start: 16px;
}

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-actions .wcf-icp-back {
	flex: 0 0 auto;
}

/* Where PayPal stands in for Place Order it can stack PayPal, Venmo and Pay Later; stretch would match Back to the whole stack. */

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-actions:has( > #place_order[style*="none"] ) .wcf-icp-back {
	max-block-size: 48px;
}

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-actions #place_order {
	flex: 1 1 auto;
	inline-size: auto;
	min-block-size: 44px;
}

/* PayPal Payments' buttons stand in for #place_order, so they take its share of the row. */

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-actions :is( .ppc-button-wrapper, #ppc-button-ppcp-applepay, #ppc-button-ppcp-googlepay, #ppc-button-ppcp-applepay-v6, #ppc-button-ppcp-googlepay-v6, #ppc-button-ppcp-card-button-gateway-v6 ) {
	flex: 1 1 auto;
	min-inline-size: 0;
	margin: 0;
}

/* Locked while a totals refresh is in flight, as WooCommerce greys out the payment block it no longer sits in. pointer-events also stops clicks reaching PayPal's iframe. */

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-actions.wcf-icp-is-refreshing {
	opacity: 0.6;
	pointer-events: none;
}

/* PayPal's card-fields button, moved into the row after Place Order; PayPal shows it inline in place of Place Order. */

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-actions #ppcp-hosted-fields {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-actions #ppcp-hosted-fields > #place_order {
	inline-size: 100%;
	min-block-size: 44px;
	margin: 0;
}

/* Hidden or not yet drawn, a container would still split the row: PayPal hides a button inline but keeps its wrapper (one per PayPal method, e.g. the card button), and prints Apple Pay / Google Pay containers empty when they are off. */

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-actions .ppc-button-wrapper:not( :has( [id^="ppc-button-"]:not( :empty, [style*="none"] ) ) ),
.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-actions :is( #ppc-button-ppcp-applepay, #ppc-button-ppcp-googlepay, #ppc-button-ppcp-applepay-v6, #ppc-button-ppcp-googlepay-v6, #ppc-button-ppcp-card-button-gateway-v6 ):empty {
	display: none;
}

/* WooCommerce's small-screen sheet sets `#payment #place_order { margin-bottom: 1em }` — two IDs, so it outranks the rules above and stretched Back past Place order. Normally the pay row sits outside #payment and this never matches; it stays for wirePayRow()'s fallback, which builds the row inside #payment when the payment step has no payment block of its own. */

.wcf-icp-overlay .wcf-icp-body #payment #place_order {
	margin: 0;
}

/* ---------- the WooCommerce checkout inside the dialog ---------- */

.wcf-icp-overlay .wcf-icp-body h3 {
	margin: 0 0 12px;
	padding: 0;
	font-size: 1.07em;
	font-weight: 800;
	color: var( --wcf-icp-heading );
}

/* The ship-to toggle is a checkbox WooCommerce wraps in an h3, not a real heading. */
.wcf-icp-overlay .wcf-icp-body h3#ship-to-different-address {
	margin: 4px 0 16px;
	font-size: 1em;
	font-weight: 600;
}

.wcf-icp-overlay .wcf-icp-body h3#ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.wcf-icp-overlay .wcf-icp-body #order_review_heading {
	display: none;
}

.wcf-icp-overlay .wcf-icp-body .col2-set,
.wcf-icp-overlay .wcf-icp-body .wcf-col2-set {
	display: block;
	inline-size: 100%;
}

.wcf-icp-overlay .wcf-icp-body .col-1,
.wcf-icp-overlay .wcf-icp-body .col-2,
.wcf-icp-overlay .wcf-icp-body .wcf-col-1,
.wcf-icp-overlay .wcf-icp-body .wcf-col-2 {
	inline-size: 100%;
	float: none;
	padding: 0;
}

/* Field grid. Applied to every container that directly holds rows (grid only lays out direct children);
   shipping rows stay in .shipping_address so Woo's ship-to toggle keeps working.
 *
 * Six tracks, because the Field Editor offers 33%, 50% and 100% widths (emitted as wcf-column-33/50/100
 * by Cartflows_Checkout_Fields) and 6 divides by both 2 and 3. Rows claim a *span*, never a fixed column:
 * pinning form-row-first to column 1 and form-row-last to column 2 meant reordering a full-width field
 * between that pair pushed the second half to the next row and left the cell beside it empty. */

.wcf-icp-overlay .wcf-icp-step,
.wcf-icp-overlay .wcf-icp-step .shipping_address,
.wcf-icp-overlay .wcf-icp-step .woocommerce-billing-fields__field-wrapper,
.wcf-icp-overlay .wcf-icp-step .woocommerce-shipping-fields__field-wrapper,
.wcf-icp-overlay .wcf-icp-step .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );

	/* 20px, not the 12px a plain row gap would need: gives a paired field's focus ring room to clear its neighbour. */
	gap: 0 20px;
	align-content: start;
}

/* Full width is the default: anything without a width class, and every non-row child, spans the pane. */

.wcf-icp-overlay .wcf-icp-step > *,
.wcf-icp-overlay .wcf-icp-step .shipping_address > *,
.wcf-icp-overlay .wcf-icp-step .woocommerce-billing-fields__field-wrapper > *,
.wcf-icp-overlay .wcf-icp-step .woocommerce-shipping-fields__field-wrapper > *,
.wcf-icp-overlay .wcf-icp-step .woocommerce-additional-fields__field-wrapper > * {
	grid-column: span 6;
}

/* The Field Editor's widths, and only when the merchant has that editor switched on — the class is
 * gated by Cartflows_Pro_Instant_Checkout_Ajax::open(). CartFlows tags billing_address_1/_2 and
 * city/state/postcode with wcf-column-* of its own accord even with the editor off, so honouring the
 * classes unconditionally would silently re-lay-out every existing popup on upgrade. */

.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-step .wcf-column-33 {
	grid-column: span 2;
}

.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-step .wcf-column-50 {
	grid-column: span 3;
}

.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-step .wcf-column-100 {
	grid-column: span 6;
}

/* Woo's own pairing carries the half-widths, and is all there is to go on with the editor off. */

.wcf-icp-overlay .wcf-icp-step .form-row-first,
.wcf-icp-overlay .wcf-icp-step .form-row-last {
	grid-column: span 3;
}

/* With the editor on, an explicit width beats the pairing: a field the merchant set to 100% must not
   stay half width just because Woo happens to tag it as one of a pair. */

.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-step .form-row-first[class*="wcf-column-100"],
.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-step .form-row-last[class*="wcf-column-100"] {
	grid-column: span 6;
}

.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-step .form-row-first[class*="wcf-column-33"],
.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-step .form-row-last[class*="wcf-column-33"] {
	grid-column: span 2;
}

/* Nested wrappers span the full pane width so their inner grid matches the pane's. */

.wcf-icp-overlay .wcf-icp-step .woocommerce-shipping-fields,
.wcf-icp-overlay .wcf-icp-step .woocommerce-additional-fields,
.wcf-icp-overlay .wcf-icp-step .shipping_address {
	grid-column: 1 / -1;
}

/* Reset Woo/CartFlows' 47% float sizing on paired rows so the grid alone controls width. */

.wcf-icp-overlay .wcf-icp-step .form-row {
	inline-size: auto;
	max-inline-size: none;
	float: none;
	clear: none;
}

.wcf-icp-overlay .wcf-icp-body .form-row {
	margin: 0 0 14px;
	padding: 0;
}

/* Field-row labels only; a blanket rule would break inline gateway payment-box labels (saved cards etc.). */

.wcf-icp-overlay .wcf-icp-body .form-row > label {
	display: block;
	margin-block-end: 6px;
	font-size: 0.8em;
	font-weight: 700;
	color: var( --wcf-icp-heading );
}

/* Gateways own the markup inside their payment box. Hand it back untouched. */

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box label {
	display: inline;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box input[type="radio"],
.wcf-icp-overlay .wcf-icp-body #payment div.payment_box input[type="checkbox"] {
	position: static;
	inline-size: auto;
	min-block-size: 0;
	block-size: auto;
	margin-inline-end: 6px;
	padding: 0;
	opacity: 1;
	vertical-align: middle;
}

.wcf-icp-overlay .wcf-icp-body .form-row .required {
	color: var( --wcf-icp-error );
	text-decoration: none;
}

/* Id-scoped to beat CartFlows' own id-scoped field rules (em-derived padding that varies per theme). */

.wcf-icp-overlay #wcf-embed-checkout-form .form-row input[type="text"],
.wcf-icp-overlay #wcf-embed-checkout-form .form-row input[type="email"],
.wcf-icp-overlay #wcf-embed-checkout-form .form-row input[type="tel"],
.wcf-icp-overlay #wcf-embed-checkout-form .form-row input[type="number"],
.wcf-icp-overlay #wcf-embed-checkout-form .form-row input[type="password"],
.wcf-icp-overlay #wcf-embed-checkout-form .form-row input[type="date"],
.wcf-icp-overlay #wcf-embed-checkout-form .form-row input[type="time"],
.wcf-icp-overlay #wcf-embed-checkout-form .form-row input[type="datetime-local"],
.wcf-icp-overlay #wcf-embed-checkout-form .form-row textarea,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row select {
	padding: 11px 13px;
}

.wcf-icp-overlay .wcf-icp-body input[type="text"],
.wcf-icp-overlay .wcf-icp-body input[type="email"],
.wcf-icp-overlay .wcf-icp-body input[type="tel"],
.wcf-icp-overlay .wcf-icp-body input[type="number"]:not( .wcf-order-bump-quantity-updater ),
.wcf-icp-overlay .wcf-icp-body input[type="password"],
.wcf-icp-overlay .wcf-icp-body input[type="date"],
.wcf-icp-overlay .wcf-icp-body input[type="time"],
.wcf-icp-overlay .wcf-icp-body input[type="datetime-local"],
.wcf-icp-overlay .wcf-icp-body textarea,
.wcf-icp-overlay .wcf-icp-body select,
.wcf-icp-overlay .wcf-icp-body .select2-container .select2-selection {
	inline-size: 100%;
	min-block-size: 44px;
	padding: 10px 13px;
	border: 1.5px solid var( --wcf-icp-border-strong );
	border-radius: var( --wcf-icp-radius );
	background-color: #fff;
	box-shadow: none;
	font-size: 0.94em;
	color: var( --wcf-icp-heading );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.wcf-icp-open .select2-container--open,
body.wcf-icp-open .pac-container {
	z-index: 1000001;
}

body.wcf-icp-open .payments-sdk-contingency-handler,
body.wcf-icp-open .woopay-otp-iframe-wrapper,
body.wcf-icp-open .woopay-otp-iframe,
body.wcf-icp-open .woopay-login-session-iframe {
	z-index: 1000001 !important; /* stylelint-disable-line declaration-no-important */
}

.wcf-icp-overlay .wcf-icp-body input:focus,
.wcf-icp-overlay .wcf-icp-body textarea:focus,
.wcf-icp-overlay .wcf-icp-body select:focus,
.wcf-icp-overlay .wcf-icp-body .select2-container--focus .select2-selection {
	border-color: var( --wcf-icp-primary );
	box-shadow: 0 0 0 3px rgba( 0, 132, 214, 0.15 );
	outline: 0;
}

/* Paints above a paired field's own box, so the ring can never be the one underneath at the shared column edge. */

.wcf-icp-overlay .wcf-icp-body input:not( [type="checkbox"], [type="radio"], [type="hidden"] ):focus,
.wcf-icp-overlay .wcf-icp-body textarea:focus,
.wcf-icp-overlay .wcf-icp-body select:focus,
.wcf-icp-overlay .wcf-icp-body .select2-container--focus .select2-selection {
	position: relative;
	z-index: 1;
}

/* The product page forces every checkout input to 40px; hold the bump quantity field to its +/- button height. */

.wcf-icp-overlay .wcf-embed-checkout-form .wcf-bump-order-wrap .wcf-order-bump-quantity-updater {
	block-size: 30px;
}

/* Id-scoped like the field rules above: the active theme ships its own invalid red at a higher
 * specificity, so an unscoped rule left two different reds on screen depending on the field. */

.wcf-icp-overlay #wcf-embed-checkout-form .form-row.woocommerce-invalid input.input-text,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.woocommerce-invalid select,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.woocommerce-invalid textarea,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-invalid input.input-text,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-invalid select,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-invalid textarea,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-has-error input.input-text,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-has-error select,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-has-error textarea,
.wcf-icp-overlay .wcf-icp-body input.field-required {
	border-color: var( --wcf-icp-error );
}

/* Suppress WooCommerce's green .woocommerce-validated border (no validated state in this design); .form-row qualifier beats Woo's own rule. Focus pair keeps the ring blue. */

.wcf-icp-overlay .wcf-icp-body .form-row.woocommerce-validated input.input-text,
.wcf-icp-overlay .wcf-icp-body .form-row.woocommerce-validated select {
	border-color: var( --wcf-icp-border-strong );
}

.wcf-icp-overlay .wcf-icp-body .form-row.woocommerce-validated input.input-text:focus,
.wcf-icp-overlay .wcf-icp-body .form-row.woocommerce-validated select:focus {
	border-color: var( --wcf-icp-primary );
}

/* One message element for both paths. Woo prints its own copy at submit and deletes it again on the next
 * blur, so its text is copied into this one and the original is left out of the layout entirely. */

.wcf-icp-overlay .wcf-icp-body .checkout-inline-error-message {
	display: none;
}

.wcf-icp-overlay .wcf-icp-body .wcf-icp-field-error {
	margin: 6px 0 0;
	color: var( --wcf-icp-error );
	font-size: 0.86em;
	line-height: 1.4;
}

/* The coupon field is its own form outside the step panes, and checkout.js marks it in its own way:
 * `has-error` on the input and a sibling notice rather than a row class. Same treatment, different hooks.
 * Typed out past the layouts' own coupon rules, which would otherwise win on source order. */

.wcf-icp-overlay .wcf-icp-card-coupon .coupon-error-notice {
	display: block;
	margin: 6px 0 0;
	color: var( --wcf-icp-error );
	font-size: 0.95em;
	line-height: 1.4;
}

.wcf-icp-overlay .wcf-icp-card-coupon input[type="text"].has-error {
	border-color: var( --wcf-icp-error );
}

/* The layout's own focus border is `!important`, to beat Astra's; a rejected code has to outrank both. */

.wcf-icp-overlay .wcf-icp-card-coupon input[type="text"].has-error:focus {
	border-color: var( --wcf-icp-error ) !important; /* stylelint-disable-line declaration-no-important */
	box-shadow: 0 0 0 3px rgba( 192, 57, 43, 0.15 );
}

/* The label carries the error too, so the whole row reads as one failed unit rather than a red box. */

.wcf-icp-overlay #wcf-embed-checkout-form .form-row.woocommerce-invalid > label:not( .checkbox ),
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-invalid > label:not( .checkbox ),
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-has-error > label:not( .checkbox ),
.wcf-icp-overlay .wcf-icp-body .form-row.woocommerce-invalid label,
.wcf-icp-overlay .wcf-icp-body .form-row.wcf-icp-invalid label {
	color: var( --wcf-icp-error );
}

/* Focus is moved to the rejected field, so the plain focus ring would paint over the only mark saying it
 * is wrong. Keep the red edge and tint the ring to match; alpha is literal, as the primary ring above is. */

.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-invalid input.input-text:focus,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-invalid select:focus,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-invalid textarea:focus,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.woocommerce-invalid input.input-text:focus,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.woocommerce-invalid select:focus,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.woocommerce-invalid textarea:focus,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-has-error input.input-text:focus,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-has-error select:focus,
.wcf-icp-overlay #wcf-embed-checkout-form .form-row.wcf-icp-has-error textarea:focus {
	border-color: var( --wcf-icp-error );
	box-shadow: 0 0 0 3px rgba( 192, 57, 43, 0.15 );
}

/* Payment method list — restyled, never re-marked-up, so gateway scripts keep their hooks. */

/* No top margin: margins can't collapse across the grid/overflow-clip boundary, leaving a void; .wcf-icp-sub sets the gap. */

.wcf-icp-overlay .wcf-icp-body .woocommerce-checkout-payment {
	margin-block-start: 0;
	padding: 0;
	border-radius: 0;
	background: none;
}

/* #payment in the selector to beat Woo's id-scoped `#payment ul.payment_methods { padding: 15px }`. */

.wcf-icp-overlay .wcf-icp-body #payment ul.payment_methods,
.wcf-icp-overlay .wcf-icp-body #payment ul.wc_payment_methods {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	list-style: none;
}

.wcf-icp-overlay .wcf-icp-body #payment,
.wcf-icp-overlay .wcf-icp-body #payment .place-order {
	padding: 0;
	border-radius: 0;
	background: none;
}

/* Bricks makes .place-order a column flex container, stretching the Back/Place Order row; restore default. */

.wcf-icp-overlay .wcf-icp-body #payment .place-order {
	display: block;
}

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method {
	position: relative;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

/* Radio visually hidden but still focusable/announced, so the label can be drawn as a selectable card. */

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method > input[type="radio"] {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	opacity: 0;
}

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border: 1.5px solid var( --wcf-icp-border-strong );
	border-radius: var( --wcf-icp-radius );
	font-size: 0.9em;
	font-weight: 600;
	color: var( --wcf-icp-heading );
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method > label::before {
	content: "";
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	border: 1.5px solid var( --wcf-icp-border-strong );
	border-radius: 50%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Re-assert display:flex with #payment: CartFlows' Bricks compat sheet sets inline-block on unchecked-method labels via an id-scoped selector, collapsing them. */

.wcf-icp-overlay .wcf-icp-body #payment li.wc_payment_method > input[type="radio"] + label {
	display: flex;
}

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method > label:hover {
	border-color: var( --wcf-icp-primary );
}

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method > input:checked + label {
	border-color: var( --wcf-icp-primary );
	background: rgba( 0, 132, 214, 0.05 );
}

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method > input:checked + label::before {
	border-color: var( --wcf-icp-primary );
	border-width: 5px;
}

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method > input:focus-visible + label {
	box-shadow: 0 0 0 3px rgba( 0, 132, 214, 0.25 );
}

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method > label img {
	max-block-size: 22px;
	inline-size: auto;
	margin: 0;
}

/* #payment in the selector to beat Woo's id-scoped payment-box rules (grey background, pointer triangle). */

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box {
	margin: 8px 0 0;
	padding: 13px 16px;
	border-radius: var( --wcf-icp-radius );
	background: var( --wcf-icp-rail-bg );
	font-size: 0.87em;
	color: var( --wcf-icp-text );
}

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box::before,
.wcf-icp-overlay .wcf-icp-body #payment div.payment_box::after {
	display: none;
}

/* ---------- inside a gateway's payment box ----------
 * Normalise container spacing only (gateways size for a full-width column, e.g. Stripe's 30px
 * fieldset padding); everything the gateway renders inside, iframes included, is left alone.
 */

/* Match every fieldset by element, not just classed ones — Stripe's "save payment method" checkbox uses an unclassed one. */

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Save-card row: control and text on one baseline, with space above the fieldset no longer supplies. */

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box .woocommerce-SavedPaymentMethods-saveNew {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
}

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
	margin: 0;
	flex: none;
}

/* Notices and helper text follow the dialog's own rhythm rather than em-derived theme margins. */

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box > p {
	margin: 0 0 12px;
}

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box > p:last-child,
.wcf-icp-overlay .wcf-icp-body #payment div.payment_box > *:last-child {
	margin-block-end: 0;
}

/* Saved payment methods: even rows, and the control aligned with its text. */

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box ul.woocommerce-SavedPaymentMethods {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box ul.woocommerce-SavedPaymentMethods li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box ul.woocommerce-SavedPaymentMethods li:last-child {
	margin-block-end: 0;
}

/* The gap above handles the spacing, so the theme's negative offset is dropped. */

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box .woocommerce-SavedPaymentMethods-tokenInput {
	margin: 0;
	flex: none;
}

/* Place order — the primary colour, matching the Continue buttons. Filled CTAs never take the heading colour, which is for text. */

.wcf-icp-overlay .wcf-icp-body #place_order {
	inline-size: 100%;
	margin: 0;
	padding: 14px 18px;
	border: 0;
	border-radius: var( --wcf-icp-radius );
	background: var( --wcf-icp-primary-cta );
	color: var( --wcf-icp-on-primary );
	font-size: 0.97em;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	transition: filter 0.15s ease;
}

/* Brightening only reads on the filled button; on the grey it washed the whole shape out to white. */

.wcf-icp-overlay .wcf-icp-body #place_order:hover:not( :disabled ) {
	filter: brightness( 1.35 );
}

/* The label inherits white from the enabled rule, which is unreadable once the button greys out. */

.wcf-icp-overlay .wcf-icp-body #place_order:disabled {
	background: #eceff2;
	color: var( --wcf-icp-muted );

	/* Inset so the switched-off button still reads as a button against the pane, without shifting it. */
	box-shadow: inset 0 0 0 1px var( --wcf-icp-border-strong );
	cursor: not-allowed;
}

/* Waiting, not refused: it keeps the paid-for colour so it never reads as the no-gateway state above. */

.wcf-icp-overlay .wcf-icp-body #place_order.wcf-icp-is-placing:disabled {
	background: var( --wcf-icp-primary-cta );
	color: var( --wcf-icp-on-primary );

	/* Themes fade a disabled button to half; this one is working, not refused. */
	opacity: 1;

	/* The refused button's outline would read as a second border on this filled one. */
	box-shadow: none;

	/* WooCommerce veils the whole form at 0.6 while it submits; the pressed control stays legible. */
	position: relative;
	z-index: 1001;
	cursor: progress;
}

.wcf-icp-overlay .wcf-icp-body #place_order.wcf-icp-is-placing::before {
	content: "";
	display: inline-block;
	inline-size: 14px;
	block-size: 14px;
	margin-inline-end: 8px;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	vertical-align: -2px;
	/* Shares the Buy Now button's keyframes, defined with that spinner further down. */
	animation: wcf-icp-spin 0.7s linear infinite;
}

/* Woo centres its own spinner on the whole form, landing it mid-step; the button now carries this. */

.wcf-icp-overlay form.checkout.processing > .blockUI.blockOverlay::before {
	display: none;
}

/* Without motion the ring still says "busy"; it simply does not turn. */

@media ( prefers-reduced-motion: reduce ) {
	.wcf-icp-overlay .wcf-icp-body #place_order.wcf-icp-is-placing::before {
		animation: none;
	}
}

/* A total no address has resolved yet: named, not a figure, so it never reads as a price. */

/* Not scoped to .wcf-icp-body: two-pane moves the summary table out to the rail. */

.wcf-icp-overlay .wcf-icp-pending {
	color: var( --wcf-icp-text );
	font-size: 0.92em;
	font-weight: 400;
	font-style: italic;
}

/* No gateway is a blocker, not information: WooCommerce styles its own notice as neutral info. */
/* Two markup variants ship: the li carries the class itself, or wraps a div that does. */

.wcf-icp-overlay .wcf-icp-body #payment ul.wc_payment_methods > li.woocommerce-info,
.wcf-icp-overlay .wcf-icp-body #payment ul.wc_payment_methods > li > .woocommerce-info {
	display: block;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid #f3c9c4;
	border-inline-start-width: 3px;
	border-radius: var( --wcf-icp-radius );
	background: #fdecea;
	font-size: 0.9em;
	line-height: 1.45;
	color: #8c2c21;
}

.wcf-icp-overlay .wcf-icp-body #payment ul.wc_payment_methods > li.woocommerce-info::before,
.wcf-icp-overlay .wcf-icp-body #payment ul.wc_payment_methods > li > .woocommerce-info::before {
	display: none;
}

.wcf-icp-overlay .wcf-icp-body #payment ul.wc_payment_methods > li:has( > .woocommerce-info ) {
	padding: 0;
	background: none;
}

/* The note explains one button, not the row: Back sits at the start, so it tracks the button's edge. */

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-blocked {
	margin: 10px 0 0;
	padding: 0;
	font-size: 0.85em;
	line-height: 1.5;
	text-align: end;
	color: var( --wcf-icp-error );
}

.wcf-icp-overlay .wcf-icp-body .wcf-icp-pay-blocked span {
	display: block;
	color: var( --wcf-icp-muted );
}

/* The notice carries a heading, what happened, and what to do; each earns its own line. */

.wcf-icp-overlay .wcf-icp-body #payment .wcf-icp-nopay-title {
	display: block;
	margin-block-end: 4px;
	font-weight: 700;
}

.wcf-icp-overlay .wcf-icp-body #payment .wcf-icp-nopay-title ~ span {
	display: block;
}

.wcf-icp-overlay .wcf-icp-body #payment .wcf-icp-nopay-title ~ span + span {
	margin-block-start: 8px;
}

/* ---------- Buy Now button spinner ---------- */

.wcf-icp-buy-now {
	position: relative;
}

form.cart button.wcf-icp-buy-now {
	margin-inline-start: 10px !important; /* stylelint-disable-line declaration-no-important */
}

/* Block themes grid the add-to-cart form and pin .single_add_to_cart_button (inherited for parity) to column 2; move ours to column 3 so both fit one row. */
.wp-block-woocommerce-add-to-cart-form form.cart > button.wcf-icp-buy-now,
.wp-block-woocommerce-add-to-cart-form .variations_button > button.wcf-icp-buy-now {
	grid-column: 3;
	grid-row: 1;
	justify-self: start;
}

/* Hug the add-to-cart button only when ours shares the row (Woo's `auto` column 2 would strand column 3); degrades to a wider gap without :has(). */
.wp-block-woocommerce-add-to-cart-form form.cart:has( > button.wcf-icp-buy-now ),
.wp-block-woocommerce-add-to-cart-form .variations_button:has( > button.wcf-icp-buy-now ) {
	grid-template-columns: min-content max-content auto;
}

.wcf-icp-buy-now .wcf-icp-spinner {
	display: none;
	inline-size: 15px;
	block-size: 15px;
	margin-inline-start: 9px;
	border: 2px solid rgba( 255, 255, 255, 0.35 );
	border-block-start-color: #fff;
	border-radius: 50%;
	vertical-align: middle;
	animation: wcf-icp-spin 0.6s linear infinite;
}

.wcf-icp-buy-now.wcf-icp-loading .wcf-icp-spinner {
	display: inline-block;
}

@keyframes wcf-icp-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* ---------- product-page notice ---------- */

.wcf-icp-notice-inline {
	grid-column: 1 / -1;
	clear: both;
	display: block;
	margin-block-start: 10px;
	padding: 9px 12px;
	border: 1px solid #f3c9c4;
	border-radius: 4px;
	background: #fdecea;
	font-size: 0.9em;
	line-height: 1.45;
	color: #8c2c21;
}