/* FunnelKode checkout layout.
 * Pure CSS on FluentCart's own checkout structure — nothing is moved in the
 * DOM, so FluentCart's summary/coupon/payment JS keeps working:
 *
 *   form[data-fluent-cart-checkout-page-checkout-form]
 *     .fct_checkout_inner            ← the two columns' container
 *       .fct_checkout_form           ← customer / billing / payment / submit
 *       .fct_checkout_summary        ← order summary (data-…-order-summary)
 *
 *   .fk-co--one : summary on top, form below
 *   .fk-co--two : form left, summary right
 */

.fk-co .fct_checkout_inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fk-co-gap, 32px);
	align-items: flex-start;
}

.fk-co .fct_checkout_form,
.fk-co .fct_checkout_summary {
	min-width: 0;
	box-sizing: border-box;
}

/* ── 1 column: summary first ─────────────────────────────────────── */
.fk-co--one .fct_checkout_inner { flex-direction: column; }
.fk-co--one .fct_checkout_form,
.fk-co--one .fct_checkout_summary { flex: 0 0 auto; width: 100%; max-width: 100%; }
.fk-co--one .fct_checkout_summary { order: -1; position: static; }

/* ── 2 columns: form left, summary right ─────────────────────────── */
.fk-co--two .fct_checkout_form    { flex: 1 1 0; }
.fk-co--two .fct_checkout_summary { flex: 0 0 var(--fk-co-summary, 38%); width: var(--fk-co-summary, 38%); }
.fk-co--two.fk-co--sticky .fct_checkout_summary { position: sticky; top: 24px; }

/* Editor skeleton reuses the same classes */
.fk-co .fk-co-page { display: flex; flex-wrap: wrap; gap: var(--fk-co-gap, 32px); align-items: flex-start; }
.fk-co--one .fk-co-page { flex-direction: column; }
.fk-co--one .fk-co-side { order: -1; width: 100%; }
.fk-co--one .fk-co-main { width: 100%; }
.fk-co--two .fk-co-main { flex: 1 1 0; }
.fk-co--two .fk-co-side { flex: 0 0 var(--fk-co-summary, 38%); }
.fk-co .fk-co-page--preview { opacity: .85; }

@media (max-width: 782px) {
	.fk-co .fct_checkout_inner,
	.fk-co .fk-co-page { flex-direction: column; }
	.fk-co .fct_checkout_form,
	.fk-co .fct_checkout_summary,
	.fk-co .fk-co-main,
	.fk-co .fk-co-side { flex: 0 0 auto; width: 100%; max-width: 100%; }
	.fk-co .fct_checkout_summary,
	.fk-co .fk-co-side { order: -1; position: static; }
}