/**
 * Kessine: reserve the express-payment area's height on the cart and checkout.
 *
 * The block renders empty server-side, then React fills it and PayPal injects an
 * iframe into it. Measured on the cart it went 108px -> 48px late in the load,
 * which moved everything under it. Reserving the settled height keeps the page
 * still. 48px is the height the PayPal button actually settles at in the
 * cart-block context (the PayPal plugin normalises it to 48 for cart/checkout
 * blocks), plus the separator rule above it.
 */

.wp-block-woocommerce-cart-express-payment-block,
.wp-block-woocommerce-checkout-express-payment-block {
	min-height: 48px;
	contain: layout;
}

/* Post-hydration React replaces the server container above with this one, so
   the reserved height has to be declared on both to cover the whole load. */
.wc-block-cart__payment-options,
.wc-block-checkout__payment-options {
	min-height: 48px;
	/* Flex so the separator can be reordered below. */
	display: flex;
	flex-direction: column;
}

/* The separator reads "Or", meaning "or use the express button". With express
   now BELOW Proceed to Checkout it has to sit above the express button rather
   than under it, otherwise it dangles between PayPal and the card note and
   appears to separate the wrong two things. */
.wc-block-components-express-payment-continue-rule {
	order: -1;
	min-height: 20px;
}

/* An express area that ends up with nothing in it should take no space at all
   rather than leaving a 48px gap. :empty only matches when React rendered
   nothing into it. */
.wp-block-woocommerce-cart-express-payment-block:empty,
.wp-block-woocommerce-checkout-express-payment-block:empty {
	min-height: 0;
}