/**
 * QuickBuy layout — structure only. A single narrow phone column (header, progress bar, order strip,
 * flow); components come from 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;
	flex-direction: column;
	inline-size: 100%;
	max-inline-size: 460px;

	/* A long details step scrolls inside the flow pane rather than stretching the dialog. */
	max-block-size: 88vh;
	max-block-size: 88dvh;
	margin: auto;
	background: var( --wcf-icp-bg );
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba( 58, 58, 58, 0.18 );
	overflow: hidden;
	animation: wcf-icp-rise 0.22s cubic-bezier( 0.2, 0.8, 0.3, 1 );
	text-align: start;
}

@keyframes wcf-icp-rise {
	from {
		opacity: 0;
		transform: translateY( 18px );
	}

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

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

/* ---------- header ---------- */

.wcf-icp-overlay .wcf-icp-header {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
}

.wcf-icp-overlay .wcf-icp-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	min-inline-size: 0;
	font-size: 1.07em;
	font-weight: 800;
	color: var( --wcf-icp-heading );
}

.wcf-icp-overlay .wcf-icp-brand-dot {
	flex: none;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var( --wcf-icp-primary );
}

/* The logo already names the store, so the text is dropped rather than repeated beside it. */

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

.wcf-icp-overlay .wcf-icp-brand-logo {
	display: flex;
	flex: none;
	align-items: center;
}

.wcf-icp-overlay .wcf-icp-brand-logo img {
	inline-size: auto;
	max-inline-size: 110px;
	block-size: auto;
	max-block-size: 28px;
	object-fit: contain;
}

.wcf-icp-overlay .wcf-icp-brand-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wcf-icp-overlay .wcf-icp-close {
	margin-inline-start: 0;
	inline-size: 30px;
	block-size: 30px;
	border: 0;
	background: var( --wcf-icp-rail-bg );
}

/* ---------- progress ----------
 * Same .wcf-icp-pill nodes the script toggles, drawn as a row of tabs rather than a meter: the rule
 * over each segment says the step has been reached, so a full last segment never claims a placed order.
 * Header and row are the only pinned rows, so the sheet's edge sits under the pair rather than under the header.
 */

.wcf-icp-overlay .wcf-icp-progress {
	display: flex;
	flex: none;
	align-items: stretch;
	margin: 0;
	padding: 0;
	border-block-end: 1px solid var( --wcf-icp-border );
	list-style: none;
}

.wcf-icp-overlay .wcf-icp-progress .wcf-icp-pill {
	display: flex;
	flex: 1 1 0;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
}

.wcf-icp-overlay .wcf-icp-progress .wcf-icp-pill-button {
	justify-content: center;
	inline-size: 100%;
	gap: 6px;
	padding: 10px 12px;
	border: 0;
	border-block-start: 2px solid var( --wcf-icp-border );
	border-radius: 0;
}

.wcf-icp-overlay .wcf-icp-progress .wcf-icp-pill.is-active .wcf-icp-pill-button,
.wcf-icp-overlay .wcf-icp-progress .wcf-icp-pill.is-done .wcf-icp-pill-button {
	border-block-start-color: var( --wcf-icp-primary );
	background: none;
}

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

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

/* The label can outrun a narrow segment, and a step name is no use once it is cut in half. */

.wcf-icp-overlay .wcf-icp-progress .wcf-icp-pill-label {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------- order strip ---------- */

/* ---------- pinned total ----------
 * Pinned under the header here, so the bar carries the dividing edge and the rail's ground.
 * Everything else about the component is shared; see instant-checkout-base.css.
 */

.wcf-icp-overlay .wcf-icp-total {
	flex: none;
	border-block-end: 1px solid var( --wcf-icp-border );
	background: var( --wcf-icp-rail-bg );
}

/* ---------- coupon slot ---------- */

.wcf-icp-overlay .wcf-icp-card-coupon {
	flex: none;
	margin: 0;
	padding-block-start: 14px;
	border-block-start: 1px solid var( --wcf-icp-border );
}

.wcf-icp-overlay .wcf-icp-card-coupon form.checkout_coupon {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.wcf-icp-overlay .wcf-icp-card-coupon .form-row {
	margin: 0;
}

/* Base sizes both rows to 100% for the stacked rail; on one flex row it must be auto or the field collapses. */
.wcf-icp-overlay .wcf-icp-card-coupon .form-row.form-row-first {
	flex: 1 1 auto;
	inline-size: auto;
	min-inline-size: 0;
}

.wcf-icp-overlay .wcf-icp-card-coupon .form-row.form-row-last {
	flex: 0 0 auto;
	inline-size: auto;
}

.wcf-icp-overlay .wcf-icp-card-coupon form.checkout_coupon .clear {
	display: none;
}

/* Match the address fields' padding/font; the tighter base input aliases its border to a dotted look at some zoom levels. */
.wcf-icp-overlay .wcf-icp-card-coupon input[type="text"] {
	min-block-size: 44px;
	padding: 11px 13px;
	font-size: 1.13em;
}

/* Coupon field sits outside .wcf-icp-body (the base focus ring's scope), so Astra's `!important` focus border wins; `!important` here only to beat it. */
.wcf-icp-overlay .wcf-icp-card-coupon input[type="text"]:focus {
	border: 1.5px solid var( --wcf-icp-primary ) !important;
	box-shadow: 0 0 0 3px rgba( 0, 132, 214, 0.15 );
	outline: 0;
}

/* Outline, compact and inline so it reads as an Apply action, not a full-width second CTA. */
.wcf-icp-overlay .wcf-icp-card-coupon button {
	inline-size: auto;
	min-block-size: 44px;
	padding: 0 20px;
	border: 1.5px solid var( --wcf-icp-border-strong );
	border-radius: 10px;
	background: var( --wcf-icp-bg );
	color: var( --wcf-icp-heading );
	font-size: 1.05em;
	font-weight: 700;
	white-space: nowrap;
	transition: background 0.15s ease;
}

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

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

/* The heading is the mockup's small eyebrow label ("Step 1 of 2 — …"). */

.wcf-icp-overlay .wcf-icp-heading {
	margin: 0 0 14px;
	padding: 0;
	font-size: 0.77em;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var( --wcf-icp-muted );
}

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

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

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

/* ---------- payment methods ----------
 * White cards, selected one tinted with the Accent Background Color; description in a neutral grey box so it stays grey.
 */

/* A theme/Woo id-scoped rule zeroes the row margin; re-add the 10px gap with #payment in the selector to win. */
.wcf-icp-overlay .wcf-icp-body #payment li.wc_payment_method {
	margin-block-end: 10px;
}

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method > label {
	border-radius: 12px;
	background: #fff;
}

.wcf-icp-overlay .wcf-icp-body li.wc_payment_method > input:checked + label {
	background: var( --wcf-icp-rail-bg );
}

.wcf-icp-overlay .wcf-icp-body #payment div.payment_box {
	background: #f3f4f6;
	color: var( --wcf-icp-muted );
}

/* ---------- actions ---------- */

.wcf-icp-overlay .wcf-icp-next,
.wcf-icp-overlay .wcf-icp-back,
.wcf-icp-overlay .wcf-icp-body #place_order {
	border-radius: 10px;
}

/* Back button: left arrow and neutral grey hover, not the base's summary tint (which colours once a merchant sets an Order Summary colour). */
.wcf-icp-overlay .wcf-icp-back::before {
	content: "\2190";
	margin-inline-end: 6px;
	font-size: 1.1em;
}

/* The arrow glyph is not a logical property and won't mirror on its own (no rtlcss pass); flip it in RTL. */
[dir="rtl"] .wcf-icp-overlay .wcf-icp-back::before {
	content: "\2192";
}

.wcf-icp-overlay .wcf-icp-back:hover {
	background: #f3f4f6;
}

.wcf-icp-overlay .wcf-icp-lock {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 14px 0 0;
	padding: 0;
	font-size: 0.77em;
	font-weight: 600;
	color: var( --wcf-icp-muted );
}

/* ---------- field pairing ----------
 * Step 1 carries contact and the whole address, so the address block is what makes it long. Town/City
 * and State share a row, as Woo already pairs first and last name. The postcode keeps a row of its own:
 * it is the field that carries a format hint and the one most likely to be showing an error under it.
 * Skipped when the Field Editor is on, where the merchant's own widths win, and below 481px where
 * every row is full width.
 */

@media ( min-width: 481px ) {
	.wcf-icp-overlay.wcf-icp-layout-quickbuy:not( .wcf-icp-fields-custom ) .wcf-icp-step #billing_city_field,
	.wcf-icp-overlay.wcf-icp-layout-quickbuy:not( .wcf-icp-fields-custom ) .wcf-icp-step #billing_state_field,
	.wcf-icp-overlay.wcf-icp-layout-quickbuy:not( .wcf-icp-fields-custom ) .wcf-icp-step #shipping_city_field,
	.wcf-icp-overlay.wcf-icp-layout-quickbuy:not( .wcf-icp-fields-custom ) .wcf-icp-step #shipping_state_field {
		grid-column: span 3;
	}

	/* Woo hides whichever of the pair a country does not use, so the survivor takes the whole row rather than half of one. */

	.wcf-icp-overlay.wcf-icp-layout-quickbuy:not( .wcf-icp-fields-custom ) .wcf-icp-step:has( #billing_state_field[style*="none"] ) #billing_city_field,
	.wcf-icp-overlay.wcf-icp-layout-quickbuy:not( .wcf-icp-fields-custom ) .wcf-icp-step:has( #billing_city_field[style*="none"] ) #billing_state_field,
	.wcf-icp-overlay.wcf-icp-layout-quickbuy:not( .wcf-icp-fields-custom ) .wcf-icp-step:has( #shipping_state_field[style*="none"] ) #shipping_city_field,
	.wcf-icp-overlay.wcf-icp-layout-quickbuy:not( .wcf-icp-fields-custom ) .wcf-icp-step:has( #shipping_city_field[style*="none"] ) #shipping_state_field {
		grid-column: span 6;
	}
}

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

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

	.wcf-icp-overlay .wcf-icp-dialog {
		max-inline-size: none;
		block-size: 100%;
		max-block-size: 100%;
		border-radius: 0;
	}
}

@media ( max-width: 390px ) {
	/* Fix Back/Place Order to the viewport (sticky can't escape the tight place-order row); scoped to the active step, else fixed positioning ignores the inactive pane's off-screen clip. */

	.wcf-icp-overlay .wcf-icp-step.is-active .wcf-icp-pay-actions {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 1;
		margin: 0;
		padding: 12px 22px;
		background: var( --wcf-icp-bg );
		border-block-start: 1px solid var( --wcf-icp-border );
		box-shadow: 0 -6px 16px rgba( 0, 0, 0, 0.06 );
	}

	/* Room at the end of the flow so nothing scrolls to a stop under the fixed row. */

	.wcf-icp-overlay .wcf-icp-flow:has( .wcf-icp-step.is-active .wcf-icp-pay-actions ) {
		padding-block-end: 96px;
	}
}

@media ( max-width: 480px ) {
	/* Paired fields stack rather than sharing a cramped row. 480px, not 360: every common phone is
	   375-430px wide, so a 360px gate never fired on one and left pairs at ~167px each. */

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