/*
 * BotMaster Funnels: checkout templates (visual skins).
 *
 * Each template is a body class (bmf-tpl-dark / -bright / -professional / -modern /
 * -minimal / -gradient) added alongside bmf-minimal-checkout ONLY when the minimal
 * checkout is active and that template is selected (see Checkout_Settings and
 * Minimal_Checkout::filter_body_class). A template only re-points the CSS custom
 * properties defined in checkout.css (plus a few purely-decorative extras) — the
 * markup, the four fields, the two-column grid, the order bump and every behaviour
 * are identical across templates, and the standard WooCommerce checkout is never
 * touched.
 *
 * Selectors combine both body classes (body.bmf-minimal-checkout.bmf-tpl-*) so a
 * template always wins over the base defaults regardless of stylesheet order.
 */

/* ============================================================ Dark ==========
 * Deep navy / near-black canvas, light text, vivid blue accent with a subtle
 * glow, green-tinted total. Echoes the BotMaster app's navy → blue.
 */
body.bmf-minimal-checkout.bmf-tpl-dark {
	--bmf-page-bg: radial-gradient(1200px 600px at 15% -10%, #14233f 0%, rgba(20, 35, 63, 0) 60%), linear-gradient(160deg, #0b1220 0%, #0a1526 100%);
	--bmf-ink: #e8eefb;
	--bmf-muted: #93a4c0;
	--bmf-accent: #3b82f6;
	--bmf-accent-strong: #2563eb;

	--bmf-card-bg: #111d33;
	--bmf-card-border: rgba(96, 130, 200, .28);
	--bmf-card-radius: 16px;
	--bmf-card-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(2, 8, 20, .55);
	--bmf-review-bg: #0f1a2e;
	--bmf-review-shadow: 0 0 0 1px rgba(59, 130, 246, .18), 0 18px 44px rgba(2, 8, 20, .6);

	--bmf-input-bg: #0c1526;
	--bmf-input-ink: #eef3fd;
	--bmf-input-border: rgba(120, 150, 210, .3);
	--bmf-input-radius: 10px;
	--bmf-focus-ring: rgba(59, 130, 246, .35);

	--bmf-total-ink: #34d399;

	--bmf-pay-bg: linear-gradient(180deg, #4f8bff 0%, #2563eb 100%);
	--bmf-pay-bg-hover: linear-gradient(180deg, #5f97ff 0%, #2f6ef2 100%);
	--bmf-pay-ink: #fff;
	--bmf-pay-radius: 12px;
	--bmf-pay-shadow: 0 10px 24px rgba(37, 99, 235, .45), 0 0 0 1px rgba(96, 150, 255, .35) inset;
}

/* ========================================================== Bright ==========
 * Clean, airy light theme: white cards on a very light canvas, soft shadows,
 * friendly blue accent, generous rounding.
 */
body.bmf-minimal-checkout.bmf-tpl-bright {
	--bmf-page-bg: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
	--bmf-ink: #0f172a;
	--bmf-muted: #64748b;
	--bmf-accent: #2563eb;
	--bmf-accent-strong: #1d4ed8;

	--bmf-card-bg: #ffffff;
	--bmf-card-border: rgba(15, 23, 42, .07);
	--bmf-card-radius: 18px;
	--bmf-card-shadow: 0 10px 30px rgba(37, 99, 235, .08);
	--bmf-review-bg: #ffffff;
	--bmf-review-shadow: 0 16px 40px rgba(37, 99, 235, .12);

	--bmf-input-bg: #f8fafc;
	--bmf-input-ink: #0f172a;
	--bmf-input-border: rgba(15, 23, 42, .14);
	--bmf-input-radius: 12px;
	--bmf-focus-ring: rgba(37, 99, 235, .2);

	--bmf-total-ink: #2563eb;

	--bmf-pay-bg: #2563eb;
	--bmf-pay-bg-hover: #1d4ed8;
	--bmf-pay-ink: #fff;
	--bmf-pay-radius: 14px;
	--bmf-pay-shadow: 0 10px 22px rgba(37, 99, 235, .28);
}

/* ==================================================== Professional ==========
 * Corporate, restrained: muted greys and slate blue, thin square-ish borders,
 * minimal shadow, an understated solid Pay button.
 */
body.bmf-minimal-checkout.bmf-tpl-professional {
	--bmf-page-bg: #eef1f4;
	--bmf-ink: #1f2933;
	--bmf-muted: #5b6b7b;
	--bmf-accent: #334e68;
	--bmf-accent-strong: #243b52;

	--bmf-card-bg: #ffffff;
	--bmf-card-border: #d3dce6;
	--bmf-card-radius: 8px;
	--bmf-card-shadow: 0 1px 2px rgba(31, 41, 51, .05);
	--bmf-review-bg: #ffffff;
	--bmf-review-shadow: 0 2px 6px rgba(31, 41, 51, .07);

	--bmf-input-bg: #ffffff;
	--bmf-input-ink: #1f2933;
	--bmf-input-border: #c4cdd8;
	--bmf-input-radius: 6px;
	--bmf-focus-ring: rgba(51, 78, 104, .2);

	--bmf-total-ink: #243b52;

	--bmf-pay-bg: #334e68;
	--bmf-pay-bg-hover: #243b52;
	--bmf-pay-ink: #fff;
	--bmf-pay-radius: 6px;
	--bmf-pay-shadow: none;
	--bmf-pay-font-size: 1em;
	--bmf-pay-padding: 13px 20px;
}

/* ========================================================== Modern ==========
 * Bold and rounded with a tasteful indigo → violet gradient. Large, prominent
 * gradient Pay button; a gradient accent strip across the top of the summary.
 */
body.bmf-minimal-checkout.bmf-tpl-modern {
	--bmf-page-bg: linear-gradient(180deg, #f4f4ff 0%, #eef0fb 100%);
	--bmf-ink: #1e1b4b;
	--bmf-muted: #6b6996;
	--bmf-accent: #6d28d9;
	--bmf-accent-strong: #5b21b6;

	--bmf-card-bg: #ffffff;
	--bmf-card-border: rgba(99, 102, 241, .16);
	--bmf-card-radius: 22px;
	--bmf-card-shadow: 0 14px 36px rgba(99, 102, 241, .14);
	--bmf-review-bg: #ffffff;
	--bmf-review-shadow: 0 22px 50px rgba(124, 58, 237, .2);

	--bmf-input-bg: #faf8ff;
	--bmf-input-ink: #1e1b4b;
	--bmf-input-border: rgba(99, 102, 241, .28);
	--bmf-input-radius: 14px;
	--bmf-focus-ring: rgba(124, 58, 237, .22);

	--bmf-total-ink: #7c3aed;

	--bmf-pay-bg: linear-gradient(135deg, #6366f1 0%, #a855f7 55%, #ec4899 100%);
	--bmf-pay-bg-hover: linear-gradient(135deg, #5457e6 0%, #9a3ff0 55%, #e23a8c 100%);
	--bmf-pay-ink: #fff;
	--bmf-pay-radius: 16px;
	--bmf-pay-shadow: 0 14px 30px rgba(168, 85, 247, .4);
	--bmf-pay-font-size: 1.18em;
	--bmf-pay-padding: 18px 22px;
}

/* Gradient accent strip along the top of the summary card. Painted as a layered
   background (not a positioned pseudo-element) so it survives the mobile layout
   where the card is not a positioning context. */
body.bmf-minimal-checkout.bmf-tpl-modern #order_review {
	background:
		linear-gradient(135deg, #6366f1 0%, #a855f7 55%, #ec4899 100%) top left / 100% 6px no-repeat,
		var(--bmf-review-bg);
}

/* ========================================================= Minimal ==========
 * Ultra-clean and borderless: no card chrome, hairline field underlines, lots of
 * whitespace, monochrome ink with a solid black Pay button.
 */
body.bmf-minimal-checkout.bmf-tpl-minimal {
	--bmf-page-bg: #ffffff;
	--bmf-ink: #111111;
	--bmf-muted: #8a8a8a;
	--bmf-accent: #111111;
	--bmf-accent-strong: #000000;

	--bmf-card-bg: transparent;
	--bmf-card-border: transparent;
	--bmf-card-radius: 0;
	--bmf-card-shadow: none;
	--bmf-review-bg: transparent;
	--bmf-review-shadow: none;

	--bmf-input-bg: transparent;
	--bmf-input-ink: #111111;
	--bmf-input-border: #e2e2e2;
	--bmf-input-radius: 0;
	--bmf-focus-ring: transparent;

	--bmf-total-ink: #111111;

	--bmf-pay-bg: #111111;
	--bmf-pay-bg-hover: #000000;
	--bmf-pay-ink: #fff;
	--bmf-pay-radius: 6px;
	--bmf-pay-shadow: none;
}

/* Airy field wrapper with no card chrome. */
body.bmf-minimal-checkout.bmf-tpl-minimal .woocommerce-billing-fields__field-wrapper {
	padding: 4px 0 0;
}
body.bmf-minimal-checkout.bmf-tpl-minimal #order_review {
	padding: 4px 0 0;
	border: 0;
}
/* Hairline underline inputs instead of boxes. */
body.bmf-minimal-checkout.bmf-tpl-minimal .woocommerce-billing-fields .input-text {
	border-width: 0 0 1px;
	padding-left: 0;
	padding-right: 0;
}
body.bmf-minimal-checkout.bmf-tpl-minimal .woocommerce-billing-fields .input-text:focus {
	outline: 0;
	border-bottom-color: #111111;
}

/* ======================================================== Gradient ==========
 * Soft, colourful gradient canvas with glassy gradient panels and a matching
 * gradient Pay button.
 */
body.bmf-minimal-checkout.bmf-tpl-gradient {
	--bmf-page-bg: linear-gradient(135deg, #fdf2ff 0%, #eef2ff 45%, #ecfeff 100%);
	--bmf-ink: #3b2f4f;
	--bmf-muted: #7c718c;
	--bmf-accent: #a855f7;
	--bmf-accent-strong: #9333ea;

	--bmf-card-bg: rgba(255, 255, 255, .72);
	--bmf-card-border: rgba(168, 85, 247, .22);
	--bmf-card-radius: 20px;
	--bmf-card-shadow: 0 12px 34px rgba(168, 85, 247, .16);
	--bmf-review-bg: rgba(255, 255, 255, .72);
	--bmf-review-shadow: 0 18px 44px rgba(236, 72, 153, .18);

	--bmf-input-bg: rgba(255, 255, 255, .85);
	--bmf-input-ink: #3b2f4f;
	--bmf-input-border: rgba(168, 85, 247, .28);
	--bmf-input-radius: 12px;
	--bmf-focus-ring: rgba(236, 72, 153, .25);

	--bmf-total-ink: #c026d3;

	--bmf-pay-bg: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #6366f1 100%);
	--bmf-pay-bg-hover: linear-gradient(135deg, #e23a8c 0%, #9a3ff0 50%, #5457e6 100%);
	--bmf-pay-ink: #fff;
	--bmf-pay-radius: 16px;
	--bmf-pay-shadow: 0 14px 32px rgba(192, 38, 211, .34);
}

/* Frosted panels read better with a blur where supported. */
body.bmf-minimal-checkout.bmf-tpl-gradient .woocommerce-billing-fields__field-wrapper,
body.bmf-minimal-checkout.bmf-tpl-gradient #order_review {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/* Gradient accent strip along the top of the summary card (layered background). */
body.bmf-minimal-checkout.bmf-tpl-gradient #order_review {
	background:
		linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #6366f1 100%) top left / 100% 6px no-repeat,
		var(--bmf-review-bg);
}

/* ================================================ Order-bump accent =========
 * The order bump (order-bump.css) sets its own purple accent locally. Re-point
 * it per template so the bump reads as part of the same skin. These selectors are
 * more specific than .bmf-bump, so they win; the bump's markup and behaviour are
 * unchanged, and the standard checkout (no template class) keeps the original.
 */
body.bmf-minimal-checkout.bmf-tpl-dark #order_review .bmf-bump {
	--bmf-accent: #3b82f6;
	--bmf-border: rgba(59, 130, 246, .55);
	--bmf-soft: rgba(59, 130, 246, .12);
}
body.bmf-minimal-checkout.bmf-tpl-bright #order_review .bmf-bump {
	--bmf-accent: #2563eb;
	--bmf-border: rgba(37, 99, 235, .5);
	--bmf-soft: rgba(37, 99, 235, .07);
}
body.bmf-minimal-checkout.bmf-tpl-professional #order_review .bmf-bump {
	--bmf-accent: #334e68;
	--bmf-border: rgba(51, 78, 104, .45);
	--bmf-soft: rgba(51, 78, 104, .06);
}
body.bmf-minimal-checkout.bmf-tpl-modern #order_review .bmf-bump {
	--bmf-accent: #7c3aed;
	--bmf-border: rgba(124, 58, 237, .5);
	--bmf-soft: rgba(124, 58, 237, .07);
}
body.bmf-minimal-checkout.bmf-tpl-minimal #order_review .bmf-bump {
	--bmf-accent: #111111;
	--bmf-border: rgba(17, 17, 17, .35);
	--bmf-soft: rgba(17, 17, 17, .03);
}
body.bmf-minimal-checkout.bmf-tpl-gradient #order_review .bmf-bump {
	--bmf-accent: #c026d3;
	--bmf-border: rgba(192, 38, 211, .45);
	--bmf-soft: rgba(192, 38, 211, .07);
}