/*
 * JBH Service Payment Workflow — unified frontend UI
 * Version 1.0.8
 *
 * Architecture:
 * 1. Standard mode consumes Blocksy's live palette variables directly.
 * 2. Body[data-ct-color-mode] is the authoritative host-mode signal.
 * 3. Generic html/body signals are fallbacks only when Blocksy's body signal
 *    is absent, preventing stale html.dark/html.light classes from winning.
 * 4. Reverse mode uses the Starter Blocks palette mirrored by PHP and one
 *    unambiguous html[data-jbh-gbt-invert="1"] flag.
 * 5. JavaScript only stamps state/build markers and covers dynamic/non-Blocksy
 *    integrations; Blocksy palette repainting itself is CSS-native.
 */

:root {
	--jbh-gbt-css-build: "20260710-v108-production-email-polish";
	--jbh-gbt-brand-accent: #2A9D8F;
	--jbh-gbt-brand-accent-strong: #1F5F5B;

	--jbh-gbt-dark-surface: #121212;
	--jbh-gbt-dark-card: #1A1A1A;
	--jbh-gbt-dark-card-alt: #161616;
	--jbh-gbt-dark-card-alt: color-mix(in srgb, var(--jbh-gbt-dark-card) 86%, var(--jbh-gbt-dark-surface));
	--jbh-gbt-dark-card-raised: #202020;
	--jbh-gbt-dark-card-raised: color-mix(in srgb, var(--jbh-gbt-dark-card) 92%, white 8%);
	--jbh-gbt-dark-heading: #F0EAD6;
	--jbh-gbt-dark-card-heading: #FFFFFF;
	--jbh-gbt-dark-text: #9CA3AF;
	--jbh-gbt-dark-border: rgba(31, 95, 91, 0.20);
	--jbh-gbt-dark-border-soft: rgba(255, 255, 255, 0.10);
	--jbh-gbt-dark-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
	--jbh-gbt-dark-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.22);

	--jbh-gbt-light-surface: #F9F8F6;
	--jbh-gbt-light-card: #FFFFFF;
	--jbh-gbt-light-card-alt: #F4F1EC;
	--jbh-gbt-light-card-alt: color-mix(in srgb, var(--jbh-gbt-light-card) 78%, var(--jbh-gbt-light-surface));
	--jbh-gbt-light-card-raised: #FFFFFF;
	--jbh-gbt-light-heading: #121212;
	--jbh-gbt-light-card-heading: #121212;
	--jbh-gbt-light-text: #4B5563;
	--jbh-gbt-light-border: rgba(0, 0, 0, 0.12);
	--jbh-gbt-light-border-soft: rgba(15, 23, 42, 0.10);
	--jbh-gbt-light-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
	--jbh-gbt-light-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.09);

	/* Dark is the safe no-signal fallback, matching JBH's default palette. */
	--jbh-gbt-fallback-surface: var(--jbh-gbt-dark-surface);
	--jbh-gbt-fallback-card: var(--jbh-gbt-dark-card);
	--jbh-gbt-fallback-card-alt: var(--jbh-gbt-dark-card-alt);
	--jbh-gbt-fallback-card-raised: var(--jbh-gbt-dark-card-raised);
	--jbh-gbt-fallback-heading: var(--jbh-gbt-dark-heading);
	--jbh-gbt-fallback-card-heading: var(--jbh-gbt-dark-card-heading);
	--jbh-gbt-fallback-text: var(--jbh-gbt-dark-text);
	--jbh-gbt-fallback-border: var(--jbh-gbt-dark-border);
	--jbh-gbt-fallback-border-soft: var(--jbh-gbt-dark-border-soft);
	--jbh-gbt-fallback-shadow: var(--jbh-gbt-dark-shadow);
	--jbh-gbt-fallback-shadow-soft: var(--jbh-gbt-dark-shadow-soft);
	--jbh-gbt-fallback-color-scheme: dark;
}

/* ── Host-mode fallbacks: Blocksy body state always wins ─────────────── */
body[data-ct-color-mode="dark"] {
	--jbh-gbt-fallback-surface: var(--jbh-gbt-dark-surface);
	--jbh-gbt-fallback-card: var(--jbh-gbt-dark-card);
	--jbh-gbt-fallback-card-alt: var(--jbh-gbt-dark-card-alt);
	--jbh-gbt-fallback-card-raised: var(--jbh-gbt-dark-card-raised);
	--jbh-gbt-fallback-heading: var(--jbh-gbt-dark-heading);
	--jbh-gbt-fallback-card-heading: var(--jbh-gbt-dark-card-heading);
	--jbh-gbt-fallback-text: var(--jbh-gbt-dark-text);
	--jbh-gbt-fallback-border: var(--jbh-gbt-dark-border);
	--jbh-gbt-fallback-border-soft: var(--jbh-gbt-dark-border-soft);
	--jbh-gbt-fallback-shadow: var(--jbh-gbt-dark-shadow);
	--jbh-gbt-fallback-shadow-soft: var(--jbh-gbt-dark-shadow-soft);
	--jbh-gbt-fallback-color-scheme: dark;
}

body[data-ct-color-mode="light"] {
	--jbh-gbt-fallback-surface: var(--jbh-gbt-light-surface);
	--jbh-gbt-fallback-card: var(--jbh-gbt-light-card);
	--jbh-gbt-fallback-card-alt: var(--jbh-gbt-light-card-alt);
	--jbh-gbt-fallback-card-raised: var(--jbh-gbt-light-card-raised);
	--jbh-gbt-fallback-heading: var(--jbh-gbt-light-heading);
	--jbh-gbt-fallback-card-heading: var(--jbh-gbt-light-card-heading);
	--jbh-gbt-fallback-text: var(--jbh-gbt-light-text);
	--jbh-gbt-fallback-border: var(--jbh-gbt-light-border);
	--jbh-gbt-fallback-border-soft: var(--jbh-gbt-light-border-soft);
	--jbh-gbt-fallback-shadow: var(--jbh-gbt-light-shadow);
	--jbh-gbt-fallback-shadow-soft: var(--jbh-gbt-light-shadow-soft);
	--jbh-gbt-fallback-color-scheme: light;
}

html[data-theme="dark"] body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]),
html[data-color-mode="dark"] body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]),
html.dark body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]),
body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"])[data-theme="dark"],
body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"])[data-color-mode="dark"],
body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]).dark,
body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]).dark-mode,
body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]).ct-dark-mode {
	--jbh-gbt-fallback-surface: var(--jbh-gbt-dark-surface);
	--jbh-gbt-fallback-card: var(--jbh-gbt-dark-card);
	--jbh-gbt-fallback-card-alt: var(--jbh-gbt-dark-card-alt);
	--jbh-gbt-fallback-card-raised: var(--jbh-gbt-dark-card-raised);
	--jbh-gbt-fallback-heading: var(--jbh-gbt-dark-heading);
	--jbh-gbt-fallback-card-heading: var(--jbh-gbt-dark-card-heading);
	--jbh-gbt-fallback-text: var(--jbh-gbt-dark-text);
	--jbh-gbt-fallback-border: var(--jbh-gbt-dark-border);
	--jbh-gbt-fallback-border-soft: var(--jbh-gbt-dark-border-soft);
	--jbh-gbt-fallback-shadow: var(--jbh-gbt-dark-shadow);
	--jbh-gbt-fallback-shadow-soft: var(--jbh-gbt-dark-shadow-soft);
	--jbh-gbt-fallback-color-scheme: dark;
}

html[data-theme="light"] body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]),
html[data-color-mode="light"] body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]),
html.light body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]),
body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"])[data-theme="light"],
body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"])[data-color-mode="light"],
body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]).light,
body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]).light-mode,
body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]).ct-light-mode {
	--jbh-gbt-fallback-surface: var(--jbh-gbt-light-surface);
	--jbh-gbt-fallback-card: var(--jbh-gbt-light-card);
	--jbh-gbt-fallback-card-alt: var(--jbh-gbt-light-card-alt);
	--jbh-gbt-fallback-card-raised: var(--jbh-gbt-light-card-raised);
	--jbh-gbt-fallback-heading: var(--jbh-gbt-light-heading);
	--jbh-gbt-fallback-card-heading: var(--jbh-gbt-light-card-heading);
	--jbh-gbt-fallback-text: var(--jbh-gbt-light-text);
	--jbh-gbt-fallback-border: var(--jbh-gbt-light-border);
	--jbh-gbt-fallback-border-soft: var(--jbh-gbt-light-border-soft);
	--jbh-gbt-fallback-shadow: var(--jbh-gbt-light-shadow);
	--jbh-gbt-fallback-shadow-soft: var(--jbh-gbt-light-shadow-soft);
	--jbh-gbt-fallback-color-scheme: light;
}

@media (prefers-color-scheme: light) {
	html:not([data-theme]):not([data-color-mode]):not(.dark):not(.light) body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]):not([data-theme]):not([data-color-mode]):not(.dark):not(.light) {
		--jbh-gbt-fallback-surface: var(--jbh-gbt-light-surface);
		--jbh-gbt-fallback-card: var(--jbh-gbt-light-card);
		--jbh-gbt-fallback-card-alt: var(--jbh-gbt-light-card-alt);
		--jbh-gbt-fallback-card-raised: var(--jbh-gbt-light-card-raised);
		--jbh-gbt-fallback-heading: var(--jbh-gbt-light-heading);
		--jbh-gbt-fallback-card-heading: var(--jbh-gbt-light-card-heading);
		--jbh-gbt-fallback-text: var(--jbh-gbt-light-text);
		--jbh-gbt-fallback-border: var(--jbh-gbt-light-border);
		--jbh-gbt-fallback-border-soft: var(--jbh-gbt-light-border-soft);
		--jbh-gbt-fallback-shadow: var(--jbh-gbt-light-shadow);
		--jbh-gbt-fallback-shadow-soft: var(--jbh-gbt-light-shadow-soft);
		--jbh-gbt-fallback-color-scheme: light;
	}
}

/* ── Reverse mode: one explicit effective-palette override ──────────── */
html[data-jbh-gbt-invert="1"] body[data-ct-color-mode="dark"],
html[data-jbh-gbt-invert="1"][data-jbh-gbt-host-mode="dark"] body {
	--jbh-gbt-effective-surface: var(--jbh-gbt-light-surface);
	--jbh-gbt-effective-card: var(--jbh-gbt-light-card);
	--jbh-gbt-effective-card-alt: var(--jbh-gbt-light-card-alt);
	--jbh-gbt-effective-card-raised: var(--jbh-gbt-light-card-raised);
	--jbh-gbt-effective-heading: var(--jbh-gbt-light-heading);
	--jbh-gbt-effective-card-heading: var(--jbh-gbt-light-card-heading);
	--jbh-gbt-effective-text: var(--jbh-gbt-light-text);
	--jbh-gbt-effective-border: var(--jbh-gbt-light-border);
	--jbh-gbt-effective-border-soft: var(--jbh-gbt-light-border-soft);
	--jbh-gbt-effective-shadow: var(--jbh-gbt-light-shadow);
	--jbh-gbt-effective-shadow-soft: var(--jbh-gbt-light-shadow-soft);
	--jbh-gbt-effective-color-scheme: light;
}

html[data-jbh-gbt-invert="1"] body[data-ct-color-mode="light"],
html[data-jbh-gbt-invert="1"][data-jbh-gbt-host-mode="light"] body {
	--jbh-gbt-effective-surface: var(--jbh-gbt-dark-surface);
	--jbh-gbt-effective-card: var(--jbh-gbt-dark-card);
	--jbh-gbt-effective-card-alt: var(--jbh-gbt-dark-card-alt);
	--jbh-gbt-effective-card-raised: var(--jbh-gbt-dark-card-raised);
	--jbh-gbt-effective-heading: var(--jbh-gbt-dark-heading);
	--jbh-gbt-effective-card-heading: var(--jbh-gbt-dark-card-heading);
	--jbh-gbt-effective-text: var(--jbh-gbt-dark-text);
	--jbh-gbt-effective-border: var(--jbh-gbt-dark-border);
	--jbh-gbt-effective-border-soft: var(--jbh-gbt-dark-border-soft);
	--jbh-gbt-effective-shadow: var(--jbh-gbt-dark-shadow);
	--jbh-gbt-effective-shadow-soft: var(--jbh-gbt-dark-shadow-soft);
	--jbh-gbt-effective-color-scheme: dark;
}

/* Generic reverse-mode fallback is deliberately disabled when Blocksy has
 * supplied body[data-ct-color-mode], preserving body-signal priority. */
html[data-jbh-gbt-invert="1"][data-theme="dark"] body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]),
html[data-jbh-gbt-invert="1"][data-color-mode="dark"] body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]),
html[data-jbh-gbt-invert="1"].dark body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]) {
	--jbh-gbt-effective-surface: var(--jbh-gbt-light-surface);
	--jbh-gbt-effective-card: var(--jbh-gbt-light-card);
	--jbh-gbt-effective-card-alt: var(--jbh-gbt-light-card-alt);
	--jbh-gbt-effective-card-raised: var(--jbh-gbt-light-card-raised);
	--jbh-gbt-effective-heading: var(--jbh-gbt-light-heading);
	--jbh-gbt-effective-card-heading: var(--jbh-gbt-light-card-heading);
	--jbh-gbt-effective-text: var(--jbh-gbt-light-text);
	--jbh-gbt-effective-border: var(--jbh-gbt-light-border);
	--jbh-gbt-effective-border-soft: var(--jbh-gbt-light-border-soft);
	--jbh-gbt-effective-shadow: var(--jbh-gbt-light-shadow);
	--jbh-gbt-effective-shadow-soft: var(--jbh-gbt-light-shadow-soft);
	--jbh-gbt-effective-color-scheme: light;
}

html[data-jbh-gbt-invert="1"][data-theme="light"] body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]),
html[data-jbh-gbt-invert="1"][data-color-mode="light"] body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]),
html[data-jbh-gbt-invert="1"].light body:not([data-ct-color-mode="dark"]):not([data-ct-color-mode="light"]) {
	--jbh-gbt-effective-surface: var(--jbh-gbt-dark-surface);
	--jbh-gbt-effective-card: var(--jbh-gbt-dark-card);
	--jbh-gbt-effective-card-alt: var(--jbh-gbt-dark-card-alt);
	--jbh-gbt-effective-card-raised: var(--jbh-gbt-dark-card-raised);
	--jbh-gbt-effective-heading: var(--jbh-gbt-dark-heading);
	--jbh-gbt-effective-card-heading: var(--jbh-gbt-dark-card-heading);
	--jbh-gbt-effective-text: var(--jbh-gbt-dark-text);
	--jbh-gbt-effective-border: var(--jbh-gbt-dark-border);
	--jbh-gbt-effective-border-soft: var(--jbh-gbt-dark-border-soft);
	--jbh-gbt-effective-shadow: var(--jbh-gbt-dark-shadow);
	--jbh-gbt-effective-shadow-soft: var(--jbh-gbt-dark-shadow-soft);
	--jbh-gbt-effective-color-scheme: dark;
}

/* ── Blocksy / theme token bridge, scoped to workflow surfaces ─────── */
:where(
	body.jbh-gbt-checkout-ui,
	body.jbh-gbt-order-ui,
	.jbh-gbt-block-content,
	.jbh-gbt-service-block-content,
	.jbh-gbt-service-chooser,
	.jbh-gbt-checkout-card,
	.jbh-gbt-panel,
	.jbh-dhmad-popup-panel,
	.jbh-gbt-radio-option,
	.jbh-gbt-radio-accordion-content
) {
	--jbh-gbt-surface: var(--jbh-gbt-effective-surface, var(--theme-palette-color-7, var(--jco-bg, var(--jbh-gbt-fallback-surface))));
	--jbh-gbt-card: var(--jbh-gbt-effective-card, var(--theme-palette-color-6, var(--jco-card, var(--jbh-gbt-fallback-card))));
	--jbh-gbt-card-alt: var(--jbh-gbt-effective-card-alt, var(--theme-palette-color-8, var(--jco-bg, var(--jbh-gbt-fallback-card-alt))));
	--jbh-gbt-card-raised: var(--jbh-gbt-effective-card-raised, var(--theme-palette-color-6, var(--jco-card, var(--jbh-gbt-fallback-card-raised))));
	--jbh-gbt-heading: var(--jbh-gbt-effective-heading, var(--theme-palette-color-4, var(--jco-heading, var(--jbh-gbt-fallback-heading))));
	--jbh-gbt-card-heading: var(--jbh-gbt-effective-card-heading, var(--theme-palette-color-4, var(--jco-heading, var(--jbh-gbt-fallback-card-heading))));
	--jbh-gbt-text: var(--jbh-gbt-effective-text, var(--theme-palette-color-3, var(--jco-text, var(--jbh-gbt-fallback-text))));
	--jbh-gbt-muted: var(--jbh-gbt-effective-text, var(--theme-palette-color-3, var(--jco-muted, var(--jbh-gbt-fallback-text))));
	--jbh-gbt-border: var(--jbh-gbt-effective-border, var(--theme-palette-color-5, var(--jco-border, var(--jbh-gbt-fallback-border))));
	--jbh-gbt-border-soft: var(--jbh-gbt-effective-border-soft, var(--theme-palette-color-5, var(--jco-border, var(--jbh-gbt-fallback-border-soft))));
	--jbh-gbt-accent: var(--theme-palette-color-1, var(--jco-accent, var(--jbh-gbt-brand-accent)));
	--jbh-gbt-accent-strong: var(--theme-palette-color-2, var(--jbh-gbt-brand-accent-strong));
	--jbh-gbt-shadow: var(--jbh-gbt-effective-shadow, var(--jbh-gbt-fallback-shadow));
	--jbh-gbt-shadow-soft: var(--jbh-gbt-effective-shadow-soft, var(--jbh-gbt-fallback-shadow-soft));
	--jbh-gbt-shadow-accent: 0 16px 38px rgba(42, 157, 143, 0.18);
	--jbh-gbt-shadow-accent: 0 16px 38px color-mix(in srgb, var(--jbh-gbt-accent) 20%, transparent);
	--jbh-gbt-success: #22c55e;
	--jbh-gbt-warning: #f59e0b;
	--jbh-gbt-danger: #ef4444;
	--jbh-gbt-badge-bg: rgba(42, 157, 143, 0.15);
	--jbh-gbt-badge-bg: color-mix(in srgb, var(--jbh-gbt-accent) 15%, transparent);
	--jbh-gbt-badge-text: var(--jbh-gbt-accent);
	--jbh-gbt-note-bg: rgba(245, 158, 11, 0.12);
	--jbh-gbt-note-border: rgba(245, 158, 11, 0.36);
	color-scheme: var(--jbh-gbt-effective-color-scheme, var(--jbh-gbt-fallback-color-scheme));
}

/* ── Checkout Blocks payment-method label alignment ───────────────── */
.wc-block-components-radio-control__option .jbh-gbt-block-label,
.wc-block-components-radio-control__option.jbh-gbt-radio-option .jbh-gbt-block-label {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	margin-inline-start: 0.55rem;
	line-height: 1.35;
	font-weight: 800;
	color: var(--jbh-gbt-heading, inherit);
}

.wc-block-components-radio-control__option .jbh-gbt-block-label .wc-block-components-payment-method-label,
.wc-block-components-radio-control__option .jbh-gbt-block-label-text {
	white-space: normal;
	overflow-wrap: anywhere;
}

.wc-block-components-radio-control__option.jbh-gbt-radio-option .wc-block-components-radio-control__option-layout,
.wc-block-components-radio-control__option.jbh-gbt-radio-option .wc-block-components-radio-control__label-group {
	min-width: 0;
}

@supports selector(:has(*)) {
	.wc-block-components-radio-control__option:has(.jbh-gbt-block-label) .wc-block-components-radio-control__option-layout {
		min-width: 0;
	}
}

/* ── Checkout chooser ─────────────────────────────────────────────── */
body .jbh-gbt-service-chooser {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 18px !important;
	width: 100%;
	margin: 18px 0;
	box-sizing: border-box;
}

body .jbh-gbt-service-chooser--count-1 {
	grid-template-columns: minmax(0, 1fr) !important;
}

/* The two enabled workflows remain a true two-card row on desktop instead
 * of depending on auto-fit heuristics inside WooCommerce's narrow column. */
body .jbh-gbt-service-chooser--count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body .jbh-gbt-service-chooser--count-2 > .jbh-gbt-workflow-card {
	align-self: stretch;
	height: auto !important;
	min-height: 238px;
}

body .jbh-gbt-workflow-card {
	position: relative;
	display: flex !important;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
	padding: 20px !important;
	border: 1px solid var(--jbh-gbt-border) !important;
	border-radius: 18px !important;
	background: var(--jbh-gbt-card) !important;
	color: var(--jbh-gbt-text) !important;
	box-shadow: var(--jbh-gbt-shadow-soft);
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.15s ease-out, color 0.15s ease-out;
}

body .jbh-gbt-workflow-card:hover,
body .jbh-gbt-workflow-card:focus-within,
body .jbh-gbt-workflow-card.is-selected {
	border-color: var(--jbh-gbt-accent) !important;
	box-shadow: var(--jbh-gbt-shadow-accent);
	transform: translateY(-2px);
}

@supports selector(:has(*)) {
	body .jbh-gbt-workflow-card:has(input[type="radio"]:checked) {
		border-color: var(--jbh-gbt-accent) !important;
		box-shadow: var(--jbh-gbt-shadow-accent);
		transform: translateY(-2px);
	}
}

body .jbh-gbt-workflow-card input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--jbh-gbt-accent);
}

body .jbh-gbt-workflow-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	height: 100%;
}

body .jbh-gbt-workflow-topline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--jbh-gbt-heading) !important;
}

body .jbh-gbt-workflow-topline strong,
body .jbh-gbt-workflow-card strong {
	color: var(--jbh-gbt-card-heading) !important;
	font-weight: 850;
	line-height: 1.35;
}

body .jbh-gbt-workflow-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border: 1px solid rgba(42, 157, 143, 0.28);
	border-color: color-mix(in srgb, var(--jbh-gbt-accent) 28%, transparent);
	border-radius: 999px;
	background: var(--jbh-gbt-badge-bg);
	color: var(--jbh-gbt-badge-text) !important;
	font-size: 11px;
	font-weight: 850;
	line-height: 1.25;
}

body .jbh-gbt-workflow-description {
	display: block;
	color: var(--jbh-gbt-text) !important;
	font-size: 14px;
	line-height: 1.68;
	overflow-wrap: anywhere;
}

body .jbh-gbt-workflow-card ul,
body .jbh-gbt-checkout-card ul {
	margin: 13px 0 0;
	padding-inline-start: 1.15rem;
	color: var(--jbh-gbt-muted) !important;
	font-size: 13px;
	line-height: 1.65;
}

body .jbh-gbt-workflow-card li + li,
body .jbh-gbt-checkout-card li + li {
	margin-top: 5px;
}

body .jbh-gbt-account-hint {
	display: block;
	margin: auto 0 0;
	padding: 11px 13px;
	border: 1px solid var(--jbh-gbt-note-border);
	border-radius: 12px;
	background: var(--jbh-gbt-note-bg);
	color: var(--jbh-gbt-heading) !important;
	font-size: 13px;
	line-height: 1.5;
}

body .jbh-gbt-account-hint[hidden] {
	display: none !important;
}

/* Legacy standalone gateway cards remain fully themed. */
body .jbh-gbt-checkout-card,
body .jbh-upwork-checkout-card,
body .jbh-dhmad-checkout-card {
	padding: 18px;
	border: 1px solid var(--jbh-gbt-border-soft);
	border-radius: 16px;
	background: var(--jbh-gbt-card-alt);
	color: var(--jbh-gbt-text);
	box-shadow: var(--jbh-gbt-shadow-soft);
}

/* ── Order/account panels ─────────────────────────────────────────── */
body .jbh-gbt-panel,
body .jbh-dhmad-panel,
body .jbh-dhmad-popup-panel {
	container-type: inline-size;
	container-name: jbh-gbt-panel;
	width: 100%;
	margin: 22px 0;
	padding: 28px !important;
	border: 1px solid var(--jbh-gbt-border) !important;
	border-radius: 22px !important;
	background: var(--jbh-gbt-card) !important;
	color: var(--jbh-gbt-text) !important;
	box-shadow: var(--jbh-gbt-shadow);
	box-sizing: border-box;
	overflow: clip;
	isolation: isolate;
}

body .jbh-gbt-header,
body .jbh-dhmad-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 20px;
}

body .jbh-gbt-eyebrow,
body .jbh-dhmad-small {
	margin: 0 0 6px;
	color: var(--jbh-gbt-accent) !important;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

body .jbh-gbt-header h2,
body .jbh-dhmad-head h2,
body .jbh-dhmad-panel h2,
body .jbh-upwork-panel h2 {
	margin: 0 0 9px;
	color: var(--jbh-gbt-heading) !important;
	font-weight: 850;
	line-height: 1.2;
}

body .jbh-gbt-panel p,
body .jbh-dhmad-panel p,
body .jbh-upwork-panel p {
	color: var(--jbh-gbt-text) !important;
	line-height: 1.75;
}

body .jbh-gbt-status,
body .jbh-dhmad-status {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 6px 11px;
	border: 1px solid var(--jbh-gbt-border-soft);
	border-radius: 999px;
	background: var(--jbh-gbt-card-alt);
	color: var(--jbh-gbt-heading) !important;
	font-size: 12px;
	font-weight: 850;
	line-height: 1.3;
	text-align: center;
}

/* ── Upwork detail grid ──────────────────────────────────────────── */
body .jbh-gbt-grid,
body .jbh-gbt-details-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	align-items: stretch;
	gap: 18px !important;
	width: 100%;
	margin: 22px 0 !important;
}

body .jbh-gbt-field,
body .jbh-gbt-scope-card,
body .jbh-gbt-studio-summary,
body .jbh-gbt-currency-note,
body .jbh-gbt-copy-all-wrap,
body .jbh-dhmad-actions {
	min-width: 0;
	padding: 18px !important;
	border: 1px solid var(--jbh-gbt-border-soft) !important;
	border-radius: 16px !important;
	background: var(--jbh-gbt-card-alt) !important;
	color: var(--jbh-gbt-text) !important;
	box-sizing: border-box;
}

body .jbh-upwork-panel .jbh-gbt-details-grid > .jbh-gbt-field {
	display: flex !important;
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
	min-height: 154px;
}

body .jbh-upwork-panel .jbh-gbt-details-grid > .jbh-gbt-field:nth-child(-n + 6) {
	min-height: 164px;
}

body .jbh-gbt-label {
	display: block;
	margin: 0;
	color: var(--jbh-gbt-muted) !important;
	font-size: 12px;
	font-weight: 850;
	letter-spacing: 0.045em;
	line-height: 1.35;
	text-transform: uppercase;
}

body .jbh-gbt-field strong,
body .jbh-gbt-field code,
body .jbh-gbt-mono,
body .jbh-gbt-scope-text,
body .jbh-gbt-studio-summary li {
	display: block;
	max-width: 100%;
	color: var(--jbh-gbt-heading) !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.68;
	overflow-wrap: anywhere;
	word-break: normal;
	white-space: normal;
}

body .jbh-gbt-mono,
body .jbh-gbt-field code,
body .jbh-dhmad-panel code,
body .jbh-gbt-copy-all-wrap textarea {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body .jbh-gbt-field.has-copy .jbh-gbt-copy {
	align-self: flex-start;
	margin-top: auto;
}

/* ── Scope, notes, copy block and help ───────────────────────────── */
body .jbh-gbt-scope-card,
body .jbh-gbt-studio-summary,
body .jbh-gbt-currency-note,
body .jbh-gbt-copy-all-wrap {
	margin-top: 20px;
}

body .jbh-gbt-studio-summary ul {
	margin: 10px 0 0;
	padding-inline-start: 1.1rem;
}

body .jbh-gbt-details-collapse summary {
	cursor: pointer;
	color: var(--jbh-gbt-heading) !important;
	font-weight: 850;
	line-height: 1.45;
}

body .jbh-gbt-details-collapse[open] summary {
	margin-bottom: 12px;
}

body .jbh-gbt-scope-text,
body .jbh-gbt-currency-note p,
body .jbh-gbt-disclaimer {
	color: var(--jbh-gbt-text) !important;
	line-height: 1.75;
	overflow-wrap: anywhere;
}

body .jbh-gbt-copy-all-wrap {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	align-items: stretch;
	gap: 18px !important;
	padding: 22px !important;
}

body .jbh-gbt-copy-all-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
}

body .jbh-gbt-copy-all-heading .jbh-gbt-label {
	margin: 0;
}

body .jbh-gbt-copy-all-hint {
	color: var(--jbh-gbt-muted) !important;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.5;
}

body .jbh-gbt-copy-all-wrap textarea,
body textarea[id^="jbh-upwork-copy-all-"] {
	display: block !important;
	width: 100% !important;
	min-width: 0;
	min-height: clamp(300px, 38vh, 460px) !important;
	height: auto !important;
	max-height: 620px;
	padding: 22px !important;
	border: 1px solid var(--jbh-gbt-border) !important;
	border-radius: 16px !important;
	background: var(--jbh-gbt-card) !important;
	color: var(--jbh-gbt-heading) !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.8 !important;
	white-space: pre-wrap !important;
	overflow-wrap: anywhere !important;
	resize: vertical;
	box-sizing: border-box;
}

@supports (field-sizing: content) {
	body .jbh-gbt-copy-all-wrap textarea,
	body textarea[id^="jbh-upwork-copy-all-"] {
		field-sizing: content;
	}
}

body .jbh-gbt-copy-all-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	min-width: 0;
	margin-top: 2px;
}

body .jbh-gbt-copy-all {
	min-width: 190px;
	margin: 0 !important;
}

body .jbh-gbt-copy-all-wrap textarea:focus {
	outline: 2px solid var(--jbh-gbt-accent);
	outline-offset: 2px;
}

body .jbh-gbt-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

body .jbh-gbt-disclaimer {
	margin: 18px 0 0;
	font-size: 13px;
}

/* ── Buttons and controls ────────────────────────────────────────── */
body .jbh-gbt-copy,
body .jbh-gbt-copy-all,
body .jbh-dhmad-btn,
body .jbh-dhmad-open,
body .jbh-gbt-help a,
body .jbh-gbt-panel .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 14px !important;
	border: 1px solid var(--jbh-gbt-border) !important;
	border-radius: 999px !important;
	background: var(--jbh-gbt-card) !important;
	color: var(--jbh-gbt-heading) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	font-size: 12px;
	font-weight: 850 !important;
	line-height: 1.25;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body .jbh-gbt-copy:hover,
body .jbh-gbt-copy-all:hover,
body .jbh-dhmad-btn:hover,
body .jbh-dhmad-open:hover,
body .jbh-gbt-help a:hover,
body .jbh-gbt-panel .button:hover {
	border-color: var(--jbh-gbt-accent) !important;
	color: var(--jbh-gbt-heading) !important;
	transform: translateY(-1px);
	box-shadow: var(--jbh-gbt-shadow-soft);
}

body .jbh-gbt-primary,
body .jbh-dhmad-btn.jbh-primary,
body .jbh-dhmad-open,
body .jbh-gbt-panel .button.alt {
	border-color: var(--jbh-gbt-accent) !important;
	background: var(--jbh-gbt-accent) !important;
	color: #FFFFFF !important;
}

body .jbh-gbt-primary:hover,
body .jbh-dhmad-btn.jbh-primary:hover,
body .jbh-dhmad-open:hover,
body .jbh-gbt-panel .button.alt:hover {
	border-color: var(--jbh-gbt-accent-strong) !important;
	background: var(--jbh-gbt-accent-strong) !important;
	color: #FFFFFF !important;
}

body .jbh-gbt-workflow-card:focus-within,
body .jbh-gbt-copy:focus-visible,
body .jbh-gbt-copy-all:focus-visible,
body .jbh-dhmad-btn:focus-visible,
body .jbh-dhmad-open:focus-visible,
body .jbh-gbt-help a:focus-visible,
body .jbh-gbt-panel .button:focus-visible {
	outline: 2px solid var(--jbh-gbt-accent);
	outline-offset: 3px;
}

body .jbh-gbt-panel input,
body .jbh-gbt-panel textarea,
body .jbh-gbt-panel select {
	background-color: var(--jbh-gbt-card);
	border-color: var(--jbh-gbt-border);
	color: var(--jbh-gbt-heading);
}

/* ── Numbered Upwork progress cards ─────────────────────────────── */
body .jbh-gbt-steps,
body .jbh-gbt-steps.jbh-gbt-steps-six {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	counter-reset: jbh-gbt-step;
	gap: 14px !important;
	width: 100%;
	margin: 24px 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body .jbh-gbt-steps > li {
	counter-increment: jbh-gbt-step;
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	min-height: 112px;
	padding: 16px 14px 16px 54px !important;
	border: 1px solid var(--jbh-gbt-border-soft) !important;
	border-radius: 16px !important;
	background: var(--jbh-gbt-card-alt) !important;
	color: var(--jbh-gbt-text) !important;
	box-shadow: none;
	box-sizing: border-box;
}

body .jbh-gbt-steps > li::before {
	content: counter(jbh-gbt-step);
	position: absolute;
	top: 16px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--jbh-gbt-border);
	border-radius: 999px;
	background: var(--jbh-gbt-card);
	color: var(--jbh-gbt-heading);
	font-size: 12px;
	font-weight: 900;
}

body .jbh-gbt-steps > li.is-done,
body .jbh-gbt-steps > li[data-step-state="done"] {
	border-color: rgba(34, 197, 94, 0.45) !important;
	background: rgba(34, 197, 94, 0.12) !important;
}

body .jbh-gbt-steps > li.is-done::before,
body .jbh-gbt-steps > li[data-step-state="done"]::before {
	content: "✓";
	border-color: rgba(34, 197, 94, 0.52);
	background: rgba(34, 197, 94, 0.18);
}

body .jbh-gbt-steps > li.is-current,
body .jbh-gbt-steps > li[data-step-state="current"] {
	border-color: var(--jbh-gbt-accent) !important;
	background: var(--jbh-gbt-badge-bg) !important;
	box-shadow: var(--jbh-gbt-shadow-accent);
}

body .jbh-gbt-step-label {
	display: block;
	color: var(--jbh-gbt-heading) !important;
	font-size: 13px;
	font-weight: 850;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

body .jbh-gbt-step-state {
	display: inline-flex;
	width: fit-content;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.10);
	background: color-mix(in srgb, var(--jbh-gbt-card) 70%, transparent);
	color: var(--jbh-gbt-muted) !important;
	font-size: 10px;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
}

body .jbh-gbt-steps > li.is-current .jbh-gbt-step-state,
body .jbh-gbt-steps > li[data-step-state="current"] .jbh-gbt-step-state {
	color: var(--jbh-gbt-accent) !important;
}

body .jbh-gbt-steps > li.is-done .jbh-gbt-step-state,
body .jbh-gbt-steps > li[data-step-state="done"] .jbh-gbt-step-state {
	color: var(--jbh-gbt-success) !important;
}

/* ── Container-responsive layouts ───────────────────────────────── */
@container jbh-gbt-panel (min-width: 560px) {
	body .jbh-upwork-panel .jbh-gbt-details-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	body .jbh-gbt-steps,
	body .jbh-gbt-steps.jbh-gbt-steps-six {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@container jbh-gbt-panel (min-width: 700px) {
	body .jbh-upwork-panel .jbh-gbt-details-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@container jbh-gbt-panel (min-width: 840px) {
	body .jbh-gbt-steps,
	body .jbh-gbt-steps.jbh-gbt-steps-six {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	body .jbh-gbt-steps > li {
		justify-content: flex-start;
		align-items: center;
		min-height: 132px;
		padding: 50px 10px 14px !important;
		text-align: center;
	}
	body .jbh-gbt-steps > li::before {
		top: 14px;
		left: 50%;
		transform: translateX(-50%);
	}
	body .jbh-gbt-step-state {
		width: auto;
		max-width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (min-width: 900px) {
		body .jbh-upwork-panel .jbh-gbt-details-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		}
		body .jbh-gbt-steps,
		body .jbh-gbt-steps.jbh-gbt-steps-six {
			grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
			gap: 10px !important;
		}
		body .jbh-gbt-steps > li {
			justify-content: flex-start;
			align-items: center;
			min-height: 132px;
			padding: 50px 10px 14px !important;
			text-align: center;
		}
		body .jbh-gbt-steps > li::before {
			top: 14px;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	@media (min-width: 861px) and (max-width: 899px) {
		body .jbh-upwork-panel .jbh-gbt-details-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		}
		body .jbh-gbt-steps,
		body .jbh-gbt-steps.jbh-gbt-steps-six {
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		}
	}
	@media (min-width: 641px) and (max-width: 860px) {
		body .jbh-gbt-steps,
		body .jbh-gbt-steps.jbh-gbt-steps-six {
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		}
	}
}

/* ── Responsive polish ───────────────────────────────────────────── */
@media (max-width: 700px) {
	body .jbh-gbt-service-chooser {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	body .jbh-gbt-service-chooser--count-2 > .jbh-gbt-workflow-card {
		min-height: 0;
	}
	body .jbh-gbt-panel,
	body .jbh-dhmad-panel,
	body .jbh-dhmad-popup-panel {
		padding: 18px !important;
		border-radius: 18px !important;
	}
	body .jbh-gbt-header,
	body .jbh-dhmad-head {
		flex-direction: column;
	}
	body .jbh-gbt-status,
	body .jbh-dhmad-status {
		align-self: flex-start;
	}
	body .jbh-upwork-panel .jbh-gbt-details-grid > .jbh-gbt-field,
	body .jbh-upwork-panel .jbh-gbt-details-grid > .jbh-gbt-field:nth-child(-n + 6) {
		min-height: 0;
	}
	body .jbh-gbt-copy-all-wrap textarea,
	body textarea[id^="jbh-upwork-copy-all-"] {
		min-height: 340px !important;
		font-size: 13px !important;
	}
	body .jbh-gbt-copy-all-actions {
		display: block;
	}
	body .jbh-gbt-copy-all,
	body .jbh-gbt-help a,
	body .jbh-gbt-panel .button {
		width: 100%;
	}
}

@media (max-width: 420px) {
	body .jbh-gbt-workflow-card {
		padding: 16px !important;
	}
	body .jbh-gbt-panel,
	body .jbh-dhmad-panel,
	body .jbh-dhmad-popup-panel {
		padding: 15px !important;
	}
	body .jbh-gbt-field,
	body .jbh-gbt-scope-card,
	body .jbh-gbt-studio-summary,
	body .jbh-gbt-currency-note,
	body .jbh-gbt-copy-all-wrap {
		padding: 15px !important;
	}
}

/* ── Mode transition and accessibility ──────────────────────────── */
html[data-jbh-gbt-flipping="1"] :where(
	.jbh-gbt-workflow-card,
	.jbh-gbt-panel,
	.jbh-gbt-field,
	.jbh-gbt-steps > li,
	.jbh-gbt-copy-all-wrap,
	.jbh-gbt-copy-all-wrap textarea,
	.jbh-gbt-scope-card,
	.jbh-gbt-studio-summary,
	.jbh-gbt-currency-note,
	.jbh-gbt-status,
	.jbh-dhmad-status
) {
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
	body .jbh-gbt-workflow-card,
	body .jbh-gbt-workflow-card *,
	body .jbh-gbt-copy,
	body .jbh-gbt-copy-all,
	body .jbh-dhmad-btn,
	body .jbh-dhmad-open,
	body .jbh-gbt-panel .button,
	body .jbh-gbt-help a {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
	body .jbh-gbt-workflow-card:hover,
	body .jbh-gbt-workflow-card:focus-within,
	body .jbh-gbt-workflow-card.is-selected {
		transform: none;
	}
	@supports selector(:has(*)) {
		body .jbh-gbt-workflow-card:has(input[type="radio"]:checked) {
			transform: none;
		}
	}
}