/*
 * xsnus checkout layout: Qliro in the combined flow. Two columns from desktop width: the Breakdance cart
 * area on the left (.xco-col-cart: cart elements, progress bar, totals, extra fields), Qliro on the right
 * (.xco-col-qliro). Stacked below 900px, cart first. Qliro's iframe is at most ~502px wide.
 */

.xco-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bde-woo-base-big-gaps, 24px); align-items: start; width: 100%; }
@media (min-width: 900px) {
	.xco-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
	.xco-cols > .xco-col-qliro { position: sticky; top: 24px; }
}

/* Qliro's own copy of the order table duplicates the cart column; its extra fields stay (moved into the slot by xco-qliro.js). */
body.xco-qliro #qliro-order-review > *:not(#qliro-one-extra-checkout-fields) { display: none; }
/* Breakdance's checkout element makes form.checkout a flex row: without a width Qliro's wrapper shrinks to ~110px. */
body.xco-qliro #qliro-one-wrapper { display: block; flex: 1 1 100%; width: 100%; min-width: 0; }
body.xco-qliro #qliro-one-iframe-wrapper { width: 100%; margin: 0; }
body.xco-qliro #qliro-one-iframe { max-width: 520px; margin: 0 auto; }

/* The cart totals show no shipping rows (chosen and priced in the Qliro iframe) and no checkout button. */
body.xco-qliro .cart_totals tr.shipping, body.xco-qliro .cart_totals tr.woocommerce-shipping-totals, body.xco-qliro .wc-proceed-to-checkout { display: none; }

/* The tax note goes on its own line under the total. */
.cart_totals .order-total small.includes_tax { display: block; margin-top: .2em; font-weight: 400; }

/* Extra checkout fields in the cart column. */
.xco-extra-slot { --xco-error: #b32d2e; display: block; text-align: left; }
.xco-extra-slot:not(.has-fields):not(.xco-extra-slot--preview) { display: none; }
.xco-extra-slot--preview { padding: 1em; border: 1px dashed currentColor; opacity: .6; text-align: center; }
.xco-extra-slot #qliro-one-extra-checkout-fields .form-row { padding: .6em .8em .7em 1em; border-left: 4px solid transparent; border-radius: 0 var(--xco-radius, 6px) var(--xco-radius, 6px) 0; margin-left: 0; margin-right: 0; }
.xco-extra-slot .form-row.validate-required { border-left-color: var(--xco-error); background: color-mix(in srgb, var(--xco-error) 5%, transparent); }
.xco-extra-slot .form-row.validate-required::before { content: var(--xco-required-text, "Required"); display: block; width: max-content; margin: 0 0 .45em; padding: .12em .6em; border-radius: 999px; background: var(--xco-error); color: #fff; font-size: .72em; font-weight: 700; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase; }
.xco-extra-slot .form-row.validate-required .required { display: none; }
.xco-extra-slot .form-row.validate-required.xco-is-done { border-left-color: transparent; background: transparent; }
.xco-extra-slot .form-row.validate-required.xco-is-done::before { display: none; }