/*
 * BotMaster Funnels: minimal, branded two-column checkout (base layout).
 *
 * Everything here is scoped to body.bmf-minimal-checkout, which is only added when
 * the minimal checkout is active (see Minimal_Checkout::filter_body_class). The
 * standard WooCommerce checkout is therefore left completely untouched when the
 * feature is off.
 *
 * Layout: WooCommerce's classic checkout renders #customer_details (billing fields)
 * and #order_review (order summary + payment + Place order) as siblings inside
 * form.checkout. We turn that form into a two-column grid — fields on the left,
 * order summary + payment on the right — and collapse to one column on mobile.
 *
 * Skinning: every colour, border, radius and shadow is read from a CSS custom
 * property with a sensible default below. A selected checkout template
 * (assets/frontend/checkout-templates.css, body.bmf-tpl-*) only overrides those
 * variables — the markup, fields, grid, order bump and behaviour never change.
 */

body.bmf-minimal-checkout {
	/* Themeable tokens (defaults ≈ the original branded look). */
	--bmf-page-bg: transparent;
	--bmf-ink: #111827;
	--bmf-muted: #6b7280;
	--bmf-accent: #6d28d9;
	--bmf-accent-strong: #5b21b6;

	--bmf-card-bg: #fff;
	--bmf-card-border: rgba(17, 24, 39, .10);
	--bmf-card-radius: 14px;
	--bmf-card-shadow: 0 1px 2px rgba(17, 24, 39, .04);
	--bmf-review-bg: #fff;
	--bmf-review-shadow: 0 8px 28px rgba(17, 24, 39, .07);

	--bmf-input-bg: #fff;
	--bmf-input-ink: #111827;
	--bmf-input-border: rgba(17, 24, 39, .2);
	--bmf-input-radius: 9px;
	--bmf-focus-ring: rgba(109, 40, 217, .18);

	--bmf-total-ink: var(--bmf-accent);

	--bmf-pay-bg: var(--bmf-accent);
	--bmf-pay-bg-hover: var(--bmf-accent-strong);
	--bmf-pay-ink: #fff;
	--bmf-pay-radius: 11px;
	--bmf-pay-shadow: none;
	--bmf-pay-font-size: 1.08em;
	--bmf-pay-padding: 15px 20px;
}

/* ---- Optional page background (templates opt in) -------------------------- */

body.bmf-minimal-checkout {
	background: var(--bmf-page-bg);
	color: var(--bmf-ink);
}

/* ---- Two-column grid ------------------------------------------------------ */
/*
 * WooCommerce's classic checkout (and page-builders such as WPFunnels) give
 * #customer_details and #order_review their own percentage widths + floats to build
 * the default two columns (e.g. .woocommerce-checkout-review-order { width: 48%;
 * float: right }). Those declarations survive into OUR grid: a grid item keeps its
 * `width`, so an inherited 48-50% collapses the summary to a thin sliver inside the
 * right track while the fields fill the left one. We therefore have to neutralise
 * the theme's widths/floats on the grid items (below) - not just place them.
 *
 * The form is also its own size container (container-type: inline-size) so the
 * layout can respond to the width the theme actually gives the checkout, not the
 * viewport: page-builders frequently drop the checkout into a column far narrower
 * than the window, and a viewport media query can never see that there is no room
 * for two columns - the container query further down can.
 */

body.bmf-minimal-checkout form.checkout.woocommerce-checkout {
	display: grid;
	/* A real, generous minimum for the summary column so it can never be squeezed to
	   a sliver; the fields take the flexible remainder. */
	grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr);
	gap: 28px;
	align-items: start;
	/* Use the width the container gives us instead of hard-capping at 980px, so two
	   columns have room in wider theme / page-builder containers. */
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	container-type: inline-size;
	container-name: bmf-checkout;
}

/* Left column spans both grid rows so the right column can stack heading + review.
   The width / float / padding resets undo the theme's default column sizing so the
   fields fill the left track cleanly. */
body.bmf-minimal-checkout #customer_details,
body.bmf-minimal-checkout #customer_details.col2-set {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	float: none !important;
	padding: 0 !important;
	margin: 0;
}

body.bmf-minimal-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;
}

/* The summary column: force it to fill its grid track. Theme / WooCommerce /
   page-builder rules (classically .woocommerce-checkout-review-order { width: 48% })
   would otherwise shrink it to a sliver, so these overrides use !important
   deliberately - this is the core of the width fix. */
body.bmf-minimal-checkout #order_review,
body.bmf-minimal-checkout #order_review.woocommerce-checkout-review-order,
body.bmf-minimal-checkout .woocommerce-checkout-review-order {
	grid-column: 2;
	grid-row: 2;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	float: none !important;
}

/* Stack billing / additional sub-columns full width inside the left column. */
body.bmf-minimal-checkout #customer_details .col-1,
body.bmf-minimal-checkout #customer_details .col-2 {
	width: 100%;
	max-width: none;
	float: none;
	padding: 0;
}

/* ---- Left column: the customer fields as a clean card --------------------- */

body.bmf-minimal-checkout .woocommerce-billing-fields > h3,
body.bmf-minimal-checkout #order_review_heading {
	font-size: 1.15em;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--bmf-ink);
}

body.bmf-minimal-checkout .woocommerce-billing-fields__field-wrapper {
	background: var(--bmf-card-bg);
	border: 1px solid var(--bmf-card-border);
	border-radius: var(--bmf-card-radius);
	padding: 20px 20px 6px;
	box-shadow: var(--bmf-card-shadow);
}

/* First + Last share one row; phone + email are full width. */
body.bmf-minimal-checkout .woocommerce-billing-fields .form-row {
	margin-bottom: 16px;
}

body.bmf-minimal-checkout .woocommerce-billing-fields .form-row-first {
	width: 48%;
	float: left;
	clear: none;
}

body.bmf-minimal-checkout .woocommerce-billing-fields .form-row-last {
	width: 48%;
	float: right;
	clear: none;
	margin-right: 0;
}

body.bmf-minimal-checkout .woocommerce-billing-fields .form-row-wide {
	width: 100%;
	clear: both;
}

body.bmf-minimal-checkout .woocommerce-billing-fields__field-wrapper::after {
	content: "";
	display: block;
	clear: both;
}

body.bmf-minimal-checkout .woocommerce-billing-fields label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--bmf-ink);
}

body.bmf-minimal-checkout .woocommerce-billing-fields .input-text {
	width: 100%;
	padding: 11px 13px;
	background: var(--bmf-input-bg);
	color: var(--bmf-input-ink);
	border: 1px solid var(--bmf-input-border);
	border-radius: var(--bmf-input-radius);
	box-sizing: border-box;
}

body.bmf-minimal-checkout .woocommerce-billing-fields .input-text::placeholder {
	color: var(--bmf-muted);
	opacity: .8;
}

body.bmf-minimal-checkout .woocommerce-billing-fields .input-text:focus {
	border-color: var(--bmf-accent);
	outline: 2px solid var(--bmf-focus-ring);
	outline-offset: 0;
}

/* Field descriptions read as muted helper text. */
body.bmf-minimal-checkout .woocommerce-billing-fields .description,
body.bmf-minimal-checkout #order_review .bmf-bump__desc {
	color: var(--bmf-muted);
}

/* The shipping and order-notes areas are switched off server side; hide any
   leftover empty headings so the left column reads cleanly. */
body.bmf-minimal-checkout .woocommerce-shipping-fields,
body.bmf-minimal-checkout .woocommerce-additional-fields > h3 {
	display: none;
}

/* The existing-licence-key field (upgrade purchases) sits under the fields, left. */
body.bmf-minimal-checkout .bmf-license-key-field {
	margin-top: 16px;
}

/* ---- Right column: order summary + payment as a branded panel ------------- */

body.bmf-minimal-checkout #order_review {
	background: var(--bmf-review-bg);
	border: 1px solid var(--bmf-card-border);
	border-radius: var(--bmf-card-radius);
	padding: 18px;
	box-shadow: var(--bmf-review-shadow);
	position: sticky;
	top: 24px;
	color: var(--bmf-ink);
}

body.bmf-minimal-checkout #order_review .shop_table {
	margin-bottom: 12px;
}

/* A clear, emphasised total. */
body.bmf-minimal-checkout #order_review .order-total th,
body.bmf-minimal-checkout #order_review .order-total td {
	font-size: 1.18em;
	font-weight: 800;
}

body.bmf-minimal-checkout #order_review .order-total td {
	color: var(--bmf-total-ink);
}

/* A prominent Pay / Place order button. */
body.bmf-minimal-checkout #payment {
	background: transparent;
	border-radius: 12px;
}

body.bmf-minimal-checkout #place_order {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: var(--bmf-pay-padding);
	font-size: var(--bmf-pay-font-size);
	font-weight: 700;
	line-height: 1.2;
	border: 0;
	border-radius: var(--bmf-pay-radius);
	background: var(--bmf-pay-bg);
	color: var(--bmf-pay-ink);
	box-shadow: var(--bmf-pay-shadow);
	cursor: pointer;
	transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}

body.bmf-minimal-checkout #place_order:hover,
body.bmf-minimal-checkout #place_order:focus {
	background: var(--bmf-pay-bg-hover);
}

body.bmf-minimal-checkout #place_order:active {
	transform: translateY(1px);
}

/* The order bump already renders inside #order_review (right column), just above
   payment; give it a touch of breathing room in this layout. */
body.bmf-minimal-checkout #order_review .bmf-bump {
	margin: 4px 0 16px;
}

/* ---- Summary table + payment: keep content readable, never per-word wrap ---- */
/*
 * Themes / page-builders sometimes force min-widths on the review table or let the
 * payment description inherit odd wrapping. Keep the table fluid and text wrapping
 * normally so nothing prints one word per line inside the summary column.
 */
body.bmf-minimal-checkout #order_review .shop_table,
body.bmf-minimal-checkout #order_review table.woocommerce-checkout-review-order-table {
	width: 100%;
	table-layout: auto;
}

body.bmf-minimal-checkout #order_review .shop_table th,
body.bmf-minimal-checkout #order_review .shop_table td,
body.bmf-minimal-checkout #order_review table.woocommerce-checkout-review-order-table th,
body.bmf-minimal-checkout #order_review table.woocommerce-checkout-review-order-table td {
	min-width: 0 !important;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* The price / amount column stays on one line. */
body.bmf-minimal-checkout #order_review .shop_table th:last-child,
body.bmf-minimal-checkout #order_review .shop_table td:last-child {
	white-space: nowrap;
}

/* Payment method labels + descriptions wrap as normal prose (never one word per
   line); the Pay button already fills the column width (see #place_order above). */
body.bmf-minimal-checkout #payment label,
body.bmf-minimal-checkout #payment .wc_payment_method label,
body.bmf-minimal-checkout #payment .payment_box,
body.bmf-minimal-checkout #payment .payment_box p,
body.bmf-minimal-checkout #payment .payment-note {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Some themes / page-builders wrap the section headings in their own chrome (grey
   bars, borders, extra padding). Reset it so the headings read as part of our skin
   and can wrap normally instead of being crammed. */
body.bmf-minimal-checkout #order_review_heading,
body.bmf-minimal-checkout .woocommerce-billing-fields > h3 {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	white-space: normal;
}

/* ---- Fallback to a single column when there is not room for two ------------ */
/*
 * Two independent triggers, because the checkout gets squeezed two different ways:
 *   - a viewport media query catches genuinely small screens (phones / tablets);
 *   - a container query catches a normal-width window whose checkout was dropped
 *     into a narrow page-builder column - the case a media query cannot see.
 * Either way we fall back to a clean single column (fields, then the full-width
 * summary + Pay) instead of cramming. The media query is the reliable baseline; the
 * container query is a progressive enhancement on top of it.
 */

@media (max-width: 900px) {
	body.bmf-minimal-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 20px;
	}

	body.bmf-minimal-checkout #customer_details,
	body.bmf-minimal-checkout #customer_details.col2-set {
		grid-column: 1 / -1 !important;
		grid-row: 1 !important;
	}

	body.bmf-minimal-checkout #order_review_heading {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
	}

	body.bmf-minimal-checkout #order_review,
	body.bmf-minimal-checkout .woocommerce-checkout-review-order {
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
		position: static;
	}
}

/* Container-aware fallback: when the checkout's own container is narrower than a
   comfortable two-column (~900px) but the viewport is not, stack anyway. The form
   is the size container, so its children span both tracks (1 / -1 = full width)
   rather than the container trying to restyle its own template. */
@container bmf-checkout (max-width: 900px) {
	body.bmf-minimal-checkout #customer_details,
	body.bmf-minimal-checkout #customer_details.col2-set {
		grid-column: 1 / -1 !important;
		grid-row: 1 !important;
	}

	body.bmf-minimal-checkout #order_review_heading {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
	}

	body.bmf-minimal-checkout #order_review,
	body.bmf-minimal-checkout .woocommerce-checkout-review-order {
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
		position: static;
	}
}