/**
 * Targeted theme fixes.
 *
 * Kept separate from the theme's bundled stylesheets so each change is obvious
 * and easy to revert. Moves to the child theme with everything else.
 */

/*
 * Checkout: there used to be a duplicate "place order" block for small screens,
 * which meant two id="place_order", two terms checkboxes and two checkout nonces
 * in the DOM below 991px. The duplicate has been removed from
 * woocommerce/checkout/form-checkout.php.
 *
 * The single remaining block lives in the order-review column, which is the first
 * child of the checkout row. On small screens the columns stack, so without this
 * the order button would sit above the billing and shipping fields. Reordering the
 * flex children puts the review - and therefore the button - back at the end of
 * the form, which is where the removed block used to place it.
 */
@media (max-width: 991px) {
	.woocommerce-checkout form.checkout > .row {
		display: flex;
		flex-direction: column;
	}

	.woocommerce-checkout form.checkout > .row > .order-review {
		order: 99;
	}
}

/*
 * Ultimate Addons replacement buttons render as a single <a> rather than the
 * plugin's invalid <button> inside an <a>. These rules give the link the block
 * behaviour the button element used to provide.
 */
a.ubtn-link.ubtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
	overflow: hidden;
}

a.ubtn-link.ubtn:hover,
a.ubtn-link.ubtn:focus {
	text-decoration: none;
}

a.ubtn-link.ubtn .ubtn-data.ubtn-text {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   Cart: align "Proceed to Checkout" with the PayPal / Venmo buttons

   The column is 300px wide and the PayPal and Venmo buttons fill it, but the
   theme rendered the checkout button as a 224px inline-block with a stray 7px
   left margin, so it sat narrower and pushed off to one side. Padding was also
   asymmetric (19px left / 39px right) with no icon to justify it - there is no
   ::before or ::after on the element - so the label was off-centre too.
   ---------------------------------------------------------------------- */

.wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 10px;
	padding-left: 19px;
	padding-right: 19px;
	text-align: center;
}

/* The "Pay in 4" message sat flush against the button above it. */
.wc-proceed-to-checkout .ppcp-messages {
	margin-bottom: 10px;
}

/* PayPal renders its buttons in a wrapper that carried no spacing of its own. */
.wc-proceed-to-checkout #ppc-button-wrapper,
.wc-proceed-to-checkout .ppc-button-wrapper {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   Checkout: separate the page's own Refund Policy from the Place Order button

   .refund-terms is part of the Checkout page content, printed straight after
   the checkout form with margin-top: 0, so the heading butted against the
   button - measured gap was exactly 0px.
   ---------------------------------------------------------------------- */

.refund-terms {
	margin-top: 40px;
}

@media (max-width: 767px) {
	.refund-terms {
		margin-top: 28px;
	}
}