/**
 * Two Pane layout — structure only. A fixed order-summary rail beside a stepped flow pane; every
 * component is styled by instant-checkout-base.css. Loaded after the base, before theme compat.
 * Logical properties throughout so `grunt rtlcss` has nothing to mirror wrongly.
 */

/* ---------- dialog ---------- */

.wcf-icp-overlay .wcf-icp-dialog {
	display: flex;
	inline-size: 900px;
	max-inline-size: 100%;
	min-block-size: 560px;

	/* A long address step must scroll inside the dialog rather than stretch it down the page. */
	max-block-size: 88vh;
	max-block-size: 88dvh;
	margin: auto;
	background: var( --wcf-icp-bg );
	border-radius: 12px;
	box-shadow: 0 30px 80px -12px rgba( 16, 24, 40, 0.35 ), 0 4px 12px rgba( 16, 24, 40, 0.08 );
	overflow: hidden;
	animation: wcf-icp-pop 0.2s cubic-bezier( 0.2, 0.8, 0.3, 1 );
	text-align: start;
}

@keyframes wcf-icp-pop {
	from {
		opacity: 0;
		transform: scale( 0.97 ) translateY( 10px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wcf-icp-overlay .wcf-icp-dialog {
		animation: none;
	}
}

/* ---------- summary rail ---------- */

/* The rail is first in the template, so the tab sequence follows the screen in both layouts and no
   reordering is needed: left of the flow side-by-side, above it stacked. */

.wcf-icp-overlay .wcf-icp-rail {
	display: flex;
	flex: 0 0 320px;
	flex-direction: column;
	inline-size: 320px;
	padding: 0 24px 28px;
	background: var( --wcf-icp-rail-bg );
	border-inline-end: 1px solid var( --wcf-icp-border );
	min-block-size: 0;
	overflow-y: auto;
}

/* ---------- rail summary ----------
 * Wide enough for the rail, the summary is simply the rail: the disclosure is gone and the panel
 * hands its children straight back to the column, so the cards space themselves as they always did.
 */

.wcf-icp-overlay .wcf-icp-rail .wcf-icp-total-toggle {
	display: none;
}

.wcf-icp-overlay .wcf-icp-rail .wcf-icp-total-panel {
	display: contents;
}

.wcf-icp-overlay .wcf-icp-store {
	display: flex;
	align-items: center;
	gap: 10px;
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
	margin-block-end: 24px;
	margin-inline: -24px;
	padding: 28px 24px 12px;
	background: var( --wcf-icp-rail-bg );
}

.wcf-icp-overlay .wcf-icp-store-mark {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var( --wcf-icp-radius );
	background: var( --wcf-icp-heading );
	color: #fff;
	font-size: 0.93em;
	font-weight: 900;
	font-style: italic;
	line-height: 1;
}

/* A logo stands in for the whole identity: it stacks above the trust line and the store name is dropped,
   since the logo already carries it and side-by-side leaves the text wrapping in the 280px rail. */

.wcf-icp-overlay .wcf-icp-store-has-logo {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.wcf-icp-overlay .wcf-icp-store-has-logo .wcf-icp-store-name {
	display: none;
}

/* Carrying a logo, the mark is no longer a lettered tile: no background, and it sizes to the image. */

.wcf-icp-overlay .wcf-icp-store-mark-logo {
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	background: none;
}

.wcf-icp-overlay .wcf-icp-store-mark-logo img {
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	max-block-size: 40px;
	object-fit: contain;
}

.wcf-icp-overlay .wcf-icp-store-name {
	display: block;
	font-size: 0.97em;
	font-weight: 700;
	line-height: 1.3;
	color: var( --wcf-icp-heading );
}

.wcf-icp-overlay .wcf-icp-store-tag {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-block-start: 2px;
	font-size: 0.73em;
	color: var( --wcf-icp-muted );
}

/* ---------- flow pane ---------- */

.wcf-icp-overlay .wcf-icp-flow {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-inline-size: 0;
	padding: 28px 36px 30px;
	overflow-y: auto;
}

/* A theme/Woo id-scoped rule zeroes the row margin; re-add the 10px gap between payment options with #payment in the selector to win — matches the QuickBuy layout. */

.wcf-icp-overlay .wcf-icp-body #payment li.wc_payment_method {
	margin-block-end: 10px;
}

/* Step pills */

.wcf-icp-overlay .wcf-icp-steps {
	display: flex;
	align-items: center;
	margin-block-end: 26px;
}

.wcf-icp-overlay .wcf-icp-pills {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcf-icp-overlay .wcf-icp-pills li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcf-icp-overlay .wcf-icp-connector {
	inline-size: 24px;
	block-size: 1.5px;
	margin: 0 2px;
	background: var( --wcf-icp-border-strong );
}

/* Pill-shaped here; QuickBuy redraws the same button as a full-width tab. */

.wcf-icp-overlay .wcf-icp-pills .wcf-icp-pill-button {
	padding: 7px 10px 7px 7px;
	border-radius: 20px;
}

.wcf-icp-overlay .wcf-icp-pills .wcf-icp-pill-button:not( :disabled ):hover,
.wcf-icp-overlay .wcf-icp-pills .wcf-icp-pill.is-active .wcf-icp-pill-button {
	background: var( --wcf-icp-rail-bg );
}

.wcf-icp-overlay .wcf-icp-pills .wcf-icp-pill.is-active .wcf-icp-pill-button {
	color: var( --wcf-icp-primary-ink );
}

/* Heading */

.wcf-icp-overlay .wcf-icp-heading {
	margin: 0 0 6px;
	padding: 0;
	font-size: 1.4em;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var( --wcf-icp-heading );
}

.wcf-icp-overlay .wcf-icp-sub {
	margin: 0 0 26px;
	font-size: 0.9em;
	color: var( --wcf-icp-muted );
}

/* Contact pulls named fields out of the billing block, orphaning a half-width field's pair; stack the step so every row spans the pane regardless of width class. */
.wcf-icp-overlay .wcf-icp-step[data-step="contact"] > .form-row {
	grid-column: 1 / -1;
}

/* ---------- responsive ---------- */

@media ( max-width: 720px ) {
	.wcf-icp-overlay {
		padding: 0;
	}

	/* The dialog itself scrolls here, so the stacked rail scrolls away and leaves the form the full screen.
	   Without a scroller on this side of the breakpoint the base's `overflow: hidden` clipped everything
	   below the fold away unreachably, since the flow pane is only bounded by the desktop row layout. */

	.wcf-icp-overlay .wcf-icp-dialog {
		flex-direction: column;
		min-block-size: 0;
		max-block-size: 100%;
		border-radius: 0;
		overflow-y: auto;
	}

	/* The rail is first in the DOM, so the summary stacks above the form; its divider moves to the trailing edge to match. */

	.wcf-icp-overlay .wcf-icp-rail {
		flex: none;
		inline-size: 100%;
		padding: 20px 20px 16px;
		border-inline-end: 0;
		border-block-end: 1px solid var( --wcf-icp-border );
		overflow: visible;
	}

	/* The summary stood between the shopper and the first field, so on a phone the rail keeps its
	   identity row and a tappable total, and everything else moves behind the disclosure. */

	.wcf-icp-overlay .wcf-icp-rail .wcf-icp-total-toggle {
		display: flex;
		padding-inline: 0;
	}

	.wcf-icp-overlay .wcf-icp-rail .wcf-icp-total-panel {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 14px 0 0;
	}

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

	/* The identity row gives up some of its breathing space; the bar is what has to be reachable. The rail
	   is not the scroller here, so the desktop pin is undone — stuck to the dialog it would cover the form. */

	.wcf-icp-overlay .wcf-icp-store {
		position: static;
		margin: 0 0 10px;
		padding: 0;
	}

	.wcf-icp-overlay .wcf-icp-rail {
		padding-block-end: 8px;
	}

	/* Pinned so it sits with the summary, not stranded in the pills row below; the overlay's backdrop-filter is the containing block. */

	.wcf-icp-overlay .wcf-icp-close {
		position: fixed;
		inset-block-start: 12px;
		inset-inline-end: 12px;
		z-index: 2;
		background: var( --wcf-icp-bg );
	}

	/* The dialog is the scroller now; a second one here would trap the form in a short inner window. */

	.wcf-icp-overlay .wcf-icp-flow {
		padding: 22px 20px 26px;
		overflow: visible;
	}

	/* Paired fields stack rather than sharing a cramped row. */

	.wcf-icp-overlay .wcf-icp-body .wcf-icp-step {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* Every direct child, not just the pair: the base sheet's `span 6` would otherwise conjure five
	   implicit columns in this single-track grid and shrink each field to a sixth of the pane. */

	.wcf-icp-overlay .wcf-icp-body .wcf-icp-step > *,
	.wcf-icp-overlay .wcf-icp-body .wcf-icp-step > .form-row-first,
	.wcf-icp-overlay .wcf-icp-body .wcf-icp-step > .form-row-last {
		grid-column: 1 / -1;
	}

	/* buildSteps() moves billing rows out individually, so the reset above catches them, but shipping and
	   additional fields move as a block and keep the wrapper's own grid — their pairs stayed side by side on
	   a phone while billing stacked. Ungated: one field per row is the intent here either way. */

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

	.wcf-icp-overlay .wcf-icp-body .wcf-icp-step .shipping_address > *,
	.wcf-icp-overlay .wcf-icp-body .wcf-icp-step .woocommerce-shipping-fields__field-wrapper > *,
	.wcf-icp-overlay .wcf-icp-body .wcf-icp-step .woocommerce-additional-fields__field-wrapper > * {
		grid-column: 1 / -1;
	}

	/* The width rules in the base sheet are themselves gated, so they out-specify the reset above; these
	   have to name the same classes to beat them and hand the pane back to one field per row. */

	.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-body .wcf-icp-step .wcf-column-33,
	.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-body .wcf-icp-step .wcf-column-50,
	.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-body .wcf-icp-step .wcf-column-100,
	.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-body .wcf-icp-step .form-row-first,
	.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-body .wcf-icp-step .form-row-first[class*="wcf-column-33"],
	.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-body .wcf-icp-step .form-row-first[class*="wcf-column-100"],
	.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-body .wcf-icp-step .form-row-last,
	.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-body .wcf-icp-step .form-row-last[class*="wcf-column-33"],
	.wcf-icp-overlay.wcf-icp-fields-custom .wcf-icp-body .wcf-icp-step .form-row-last[class*="wcf-column-100"] {
		grid-column: 1 / -1;
	}

	/* The pill labels are dropped on narrow screens; the numbered badges carry the progress. */

	.wcf-icp-overlay .wcf-icp-pill:not( .is-active ) .wcf-icp-pill-label {
		display: none;
	}
}

/* Inactive panes are clipped by the base; their measured width depends on this layout's flow padding (72px = 2 x 36px). */

.wcf-icp-overlay .wcf-icp-step:not( .is-active ) {
	inline-size: calc( 100% - 72px );
}