/* Treatment Builder – Frontend (matches index.html template) */
:root {
	--tb-bg: #f8f7fc;
	--tb-surface: #ffffff;
	--tb-text: #2d2a38;
	--tb-text-muted: #5c5966;
	--tb-accent: #6366f1;
	--tb-accent-hover: #4f46e5;
	--tb-border: #e4e2ec;
	--tb-radius: 12px;
	--tb-shadow: 0 4px 24px rgba(45, 42, 56, 0.08);
	--tb-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	/* Template llvc variables */
	--llvcBaseBackground: #f5f4f9;
	--llvcHeader: #231e2e;
	--llvcBodyText: #555555;
	--llvcPrimary: #5a56f9;
	--llvcSecondaryButtons: #838788;
	--llvcNavbarBackground: #fff;
	--llvcNavbarLink: #000000;
	--llvcNavbarLinkHover: #5a56f9;
	--llvcShadow: rgba(0, 0, 0, 0.24);
}

.tb-wrap,
.llvc {
	font-family: var(--tb-font);
	color: var(--tb-text);
	background: linear-gradient(135deg, #f5f4f9 0%, #eef0f7 50%, #f8f7fc 100%);
	min-height: 100vh;
	padding-bottom: 2rem;
}

/* Nav – llvc-navbar (template) */
.llvc-navbar,
.tb-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0rem;
	background: var(--llvcNavbarBackground, var(--tb-surface));
	box-shadow: 0 1px 3px var(--llvcShadow);
	position: sticky;
	top: 0;
	z-index: 100;
}
.llvc-navbar__flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px;
}
.llvc-navbar__back {
	padding: 10px 0px 10px 0px !important;	
}
.llvc-navbar__spacer-col { flex: 1; }
.llvc-navbar__logo-link { display: inline-flex; align-items: center; }
.llvc-navbar__logo { max-height: 40px; width: auto; }
.llvc-navbar__back,
.tb-nav-back,
.llvc-navbar__exit,
.tb-nav-exit {
	background: none;
	border: none;
	font-size: 0.9375rem;
	color: var(--llvcNavbarLink, var(--tb-text-muted));
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.llvc-navbar__back:hover,
.tb-nav-back:hover,
.llvc-navbar__exit:hover,
.tb-nav-exit:hover { color: var(--llvcNavbarLinkHover, var(--tb-accent)); }
.llvc-navbar .icon { width: 20px; height: 20px; fill: currentColor; }
.tb-nav-spacer { flex: 1; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* Desktop: equal horizontal spacing for Back and Exit in navbar; left column not flex so Back sits closer to edge */
@media (min-width: 768px) {
	.llvc-navbar .llvc-navbar__flex.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.llvc-navbar .llvc-navbar__spacer-col:first-child {
		flex: 0 0 auto;
		display: flex;
		justify-content: flex-start;
	}
	.llvc-navbar .llvc-navbar__exit-col {
		flex: 0 0 auto;
		display: flex;
		justify-content: flex-end;
	}
}

/* Steps */
.tb-step,
.llvc__step { display: none; padding: 1rem 1rem 2rem; }
.tb-step.is-active,
.llvc__step.is-active { display: block; }

/* Intro – llvc__intro (template) */
.llvc__intro .llvc__columns,
.tb-intro-layout {
	display: grid;
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	.llvc__intro .llvc__columns,
	.tb-intro-layout { grid-template-columns: 1fr 1fr; align-items: center; }
}
.llvc__start-column { display: flex; align-items: center; justify-content: center; }
.llvc__start,
.llvc__start-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	background: linear-gradient(135deg, var(--llvcPrimary, var(--tb-accent)) 0%, #8b5cf6 100%);
	border-radius: var(--tb-radius);
	padding: 2rem;
	color: #fff;
	border: none;
	cursor: pointer;
	min-height: 280px;
	width: 100%;
	max-width: 340px;
}
.llvc__start-icon-wrapper .icon { width: 48px; height: 48px; fill: currentColor; }
.llvc__start-text { font-weight: 600; font-size: 1.125rem; }
.llvc__mobile-start { margin-top: 1rem; }
@media (min-width: 1024px) {
	.llvc__mobile-start { display: none; }
}
@media (max-width: 1023px) {
	.llvc__start-column { display: none; }
}
.tb-heading { font-size: 1.5rem; font-weight: 700; color: var(--tb-text); margin: 0 0 1rem; }
.tb-heading--lg { font-size: 1.75rem; }
.tb-intro-privacy { color: var(--tb-text-muted); margin-bottom: 1.5rem; }
.tb-intro-steps {
	margin: 0 0 1.5rem;
	padding-left: 1.5rem;
	color: var(--tb-text);
	line-height: 1.6;
}
.tb-intro-steps li { margin-bottom: 0.5rem; }
.tb-intro-visual {
	/* background: linear-gradient(135deg, var(--tb-accent) 0%, #8b5cf6 100%); */
	border-radius: var(--tb-radius);
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tb-intro-cta { text-align: center; }
.tb-start-alt {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.2);
	border: 2px solid rgba(255,255,255,0.8);
	color: #fff;
	padding: 1.25rem 2rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	backdrop-filter: blur(8px);
}
.tb-start-alt:hover { background: rgba(255,255,255,0.3); }
.tb-start-icon {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 0.75rem;
	border: 3px solid #fff;
	border-radius: 50%;
	position: relative;
}
.tb-start-icon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 0;
	height: 0;
	border-left: 10px solid #fff;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	margin-left: 2px;
}

/* Buttons */
.tb-btn {
	display: inline-block;
	padding: 0.875rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.tb-btn--primary { background: var(--tb-accent); color: #fff; }
.tb-btn--primary:hover { background: var(--tb-accent-hover); }
.tb-btn--primary:disabled { opacity: 0.6; cursor: not-allowed; }
.tb-btn--secondary { background: var(--tb-border); color: var(--tb-text); text-decoration: none; }
.tb-btn--secondary:hover { background: #d4d2de; }

/* Segment step (Gender / View) */
.tb-step-segment .tb-segment-inner {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
}
.tb-segment-desc {
	color: var(--tb-text-muted);
	margin-bottom: 1.5rem;
}
.tb-segment-options {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}
.tb-segment-group {
	text-align: left;
}
.tb-segment-label {
	display: block;
	font-weight: 600;
	color: var(--tb-text);
	margin-bottom: 0.5rem;
}
.tb-segment-btns {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.tb-segment-btn {
	padding: 0.75rem 1.25rem;
	font-size: 1rem;
	font-weight: 500;
	border: 2px solid var(--tb-border);
	background: var(--tb-surface);
	color: var(--tb-text);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.tb-segment-btn:hover {
	border-color: var(--tb-accent);
	background: rgba(99, 102, 241, 0.06);
}
.tb-segment-btn.is-selected {
	border-color: var(--tb-accent);
	background: var(--tb-accent);
	color: #fff;
}
.tb-segment-continue {
	margin-top: 0.5rem;
}

/* Selection step – full-width, vibrant (reference: treatment-builder.com) */
.llvc__screen.llvc__concerns .llvc__container { max-width: none; width: 100%; margin: 0; padding: 0 1rem; }
.tb-selection-layout,
.llvc__columns.tb-llvc--concerns {
	display: grid;
	gap: 0;
	max-width: none;
	width: 100%;
	margin: 0;
	min-height: 70vh;
}
/* Two columns: body fills space, Your Selections sidebar right */
@media (min-width: 1024px) {
	.tb-selection-layout,
	.llvc__columns.tb-llvc--concerns {
		grid-template-columns: 1fr minmax(320px, 400px);
		gap: 1rem;
		padding: 0 1.5rem;
	}
	.tb-body-column {
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	.tb-body-rotate-row {
		width: 100%;
		max-width: min(800px, 100%);
		margin-left: auto;
		margin-right: auto;
	}
	.tb-body-bottom {
		width: 100%;
		max-width: min(800px, 100%);
		margin-left: auto;
		margin-right: auto;
	}
}
.tb-selections-sidebar {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
@media (min-width: 1024px) {
	.tb-selections-sidebar {
		padding: 1.25rem 0 1.25rem 1.5rem;
		border-left: 1px solid var(--tb-border, #e5e7eb);
	}
}
/* Drawer: only clicked body part's concerns (checkboxes), slide-over */
.tb-concerns-drawer.llvc__concerns-column {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 450px;
	background: var(--tb-bg, #fff);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
	z-index: 1000;
	overflow-y: auto;
	transition: transform 0.3s ease;
	transform: translateX(100%);
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
}
.llvc__screen.llvc__concerns.tb-concerns-drawer-open .tb-concerns-drawer.llvc__concerns-column {
	transform: translateX(0);
}
.tb-concerns-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	position: relative;
}
.tb-concerns-drawer-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--tb-text);
}
.tb-concerns-drawer-close-btn {
	width: 2.25rem !important;
	height: 2.25rem !important;
	padding: 0;
	font-size: 1.5rem !important;
	line-height: 1 !important;
	color: var(--tb-text-muted) !important;
	background: transparent !important;
	border: 1px solid #e4e2ec;
	border-radius: 100px !important;
	cursor: pointer !important;
	transition: color 0.2s, background 0.2s !important;
}
.tb-concerns-drawer-close-btn:hover {
	color: var(--tb-text);
	background: var(--tb-border);
}
.tb-concerns-drawer .tb-concerns-by-area { margin-top: 0; }
.tb-concerns-drawer-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55) !important;
	z-index: 999;
	cursor: pointer;
	border: none;
	padding: 0;
}
.llvc__screen.llvc__concerns.tb-concerns-drawer-open .tb-concerns-drawer-backdrop {
	display: block;
}
.tb-concerns-header.llvc__concerns__heading-row {
	position: relative;
}
.tb-concerns-header .tb-clear-all { margin-left: auto; }
.llvc__concerns-column .llvc__heading--concerns { margin: 0 0 0.5rem; font-size: 1rem; }
.llvc__form-content { max-width: 520px; margin: 0 auto; }
.tb-body-column { }
.tb-heading--sm { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tb-text-muted); margin-bottom: 0.75rem; }
/* How to Use: trigger (link + icon) and popover */
.tb-howto-wrap { position: relative; margin-bottom: 1rem; }
.tb-howto-trigger-text {
	font-size: 0.875rem;
    font-weight: 400;
}
.tb-nav-back {
	background-color: transparent !important;
	color: #000000 !important;
}
.tb-howto-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0;
	font-size: 0.9375rem;
	color: #5c5966 !important;
	background: transparent !important;
	border: none;
	text-decoration: underline;
	cursor: pointer;
	transition: color 0.2s;
}
.tb-howto-trigger:hover { color: var(--tb-text); }
.tb-howto-trigger-icon { flex-shrink: 0; stroke: currentColor; }
.tb-howto-popover {
	position: absolute;
	left: 0;
	bottom: 100%;
	margin-bottom: 8px;
	z-index: 100;
	min-width: 280px;
	max-width: 360px;
}
.tb-howto-popover[aria-hidden="true"],
.tb-howto-popover[hidden] { display: none !important; }
.tb-howto-popover-inner {
	background: var(--tb-bg, #fff);
	background-color: #f4f4f5;
	border: 1px solid var(--tb-border, #e5e7eb);
	border-radius: 12px 12px 0 0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	position: relative;
	padding-bottom: 12px;
}
.tb-howto-popover-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem 0;
}
.tb-howto-popover-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--tb-text);
}
.tb-howto-popover-close {
	width: 1.75rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0px !important;
	font-size: 1.25rem;
	line-height: 1;
	color: #000000 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	transition: opacity 0.2s !important;
}
.tb-howto-popover-close:hover { opacity: 0.9 !important; }
.tb-howto-popover-hr {
	border: none;
	border-top: 1px solid var(--tb-border, #e5e7eb);
	margin: 0.75rem 1.25rem 1rem;
}
.tb-howto-popover-list {
	list-style: none;
	margin: 0;
	padding: 0 1.25rem 0;
	font-size: 0.9375rem;
	color: var(--tb-text);
	line-height: 1.6;
}
.tb-howto-popover-list li { margin-bottom: 0.6rem; }
.tb-howto-popover-list li:last-child { margin-bottom: 0; }
.tb-howto-popover-list strong { margin-right: 0.35rem; }
.tb-howto-popover-tail {
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #f4f4f5;
	filter: drop-shadow(0 1px 0 var(--tb-border, #e5e7eb));
}
.tb-howto-list { margin: 0 0 1rem; padding-left: 1.25rem; font-size: 0.9375rem; color: var(--tb-text-muted); }

/* Reference body diagram: full body + face views with toggle */
/* Rotate row: left arrow | body | right arrow */
.tb-body-rotate-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.tb-body-rotate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	flex-shrink: 0;
	color: var(--tb-text-muted);
	background: var(--tb-surface, #f8f7fc);
	border: 2px solid var(--tb-border, #e5e7eb);
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.tb-body-rotate-btn:hover {
	color: var(--tb-accent);
	border-color: var(--tb-accent);
	background: rgba(99, 102, 241, 0.08);
}
.tb-body-rotate-btn .icon { stroke: currentColor; }
.tb-body-rotate-row .tb-llvc-body-wrap { margin: 0; flex: 1 1 auto; max-width: none; min-width: 0; }
/* Body bottom: How to Use + Switch + View Back/Front – same placement for female and male */
.tb-body-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.25rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tb-border, #e4e2ec);
	width: 100%;
	flex-shrink: 0;
}
.tb-body-bottom .tb-howto-wrap { margin-bottom: 0; }
.tb-body-bottom .tb-howto-trigger,
.tb-body-bottom .tb-gender-switch,
.tb-body-bottom .body-concerns-view-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}
#tb-builder .tb-llvc-body-wrap {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0 auto 1.25rem;
	flex: 1;
	min-height: min(400px, 45vh);
	display: flex;
	align-items: center;
	justify-content: center;
}
#tb-builder .tb-llvc-body-wrap .tb-llvc-body-outline-svg {
	position: absolute;
	width: 0;
	height: 0;
}
#tb-builder .tb-llvc-body-wrap .llvc__body {
	display: block;
	position: relative;
}
/* Gender: only one body (female or male) visible at a time */
#tb-builder .tb-llvc-body-wrap .llvc__body--female,
#tb-builder .tb-llvc-body-wrap .llvc__body--male {
	display: none;
}
#tb-builder .tb-llvc-body-wrap .llvc__body--female.is-active,
#tb-builder .tb-llvc-body-wrap .llvc__body--male.is-active {
	display: block;
}
/* Gender switch: grey underlined link with icon (in body bottom) */
#tb-builder .tb-body-bottom .tb-gender-switch,
#tb-builder .tb-llvc-body-wrap .tb-gender-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--tb-text-muted, #6b7280);
	background: none;
	border: none;
	text-decoration: underline;
	cursor: pointer;
	transition: color 0.2s;
}
#tb-builder .tb-body-bottom .tb-gender-switch:hover,
#tb-builder .tb-llvc-body-wrap .tb-gender-switch:hover {
	color: var(--tb-text, #374151);
}
#tb-builder .tb-body-bottom .tb-gender-switch .tb-gender-switch-icon,
#tb-builder .tb-llvc-body-wrap .tb-gender-switch .tb-gender-switch-icon {
	flex-shrink: 0;
	stroke: currentColor;
}
/* Only one view visible at a time */
#tb-builder .tb-llvc-body-wrap .llvc__body__front,
#tb-builder .tb-llvc-body-wrap .llvc__body__back,
#tb-builder .tb-llvc-body-wrap .llvc__body__face {
	display: none;
	position: relative;
}
#tb-builder .tb-llvc-body-wrap .llvc__body__front.is-active,
#tb-builder .tb-llvc-body-wrap .llvc__body__back.is-active,
#tb-builder .tb-llvc-body-wrap .llvc__body__face.is-active {
	display: block;
}
/* Full body SVG: fill available space (reference: prominent, vibrant) */
#tb-builder .tb-llvc-body-wrap .llvc__body__front > svg {
	width: 100%;
	height: auto;
	display: block;
	max-height: min(580px, 65vh);
}
#tb-builder .tb-llvc-body-wrap .llvc__body__front > svg .body-stroke {
	fill: url(#tb-llvc-body-outline-gradient);
}
#tb-builder .tb-llvc-body-wrap .llvc__body__front > svg .body-fill,
#tb-builder .tb-llvc-body-wrap .llvc__body__front > svg path:not(.body-stroke) {
	fill: var(--tb-surface, #f8f7fc);
}
/* Back body view */
#tb-builder .tb-llvc-body-wrap .llvc__body__back > svg {
	width: 100%;
	height: auto;
	display: block;
	max-height: min(580px, 65vh);
}
#tb-builder .tb-llvc-body-wrap .llvc__body__back > svg .body-stroke {
	fill: url(#tb-llvc-body-outline-gradient);
}
#tb-builder .tb-llvc-body-wrap .llvc__body__back > svg .body-fill,
#tb-builder .tb-llvc-body-wrap .llvc__body__back > svg path:not(.body-stroke) {
	fill: var(--tb-surface, #f8f7fc);
}
/* Face view */
#tb-builder .tb-llvc-body-wrap .llvc__body__face > svg {
	width: 100%;
	height: auto;
	display: block;
	max-height: min(500px, 60vh);
}
#tb-builder .tb-llvc-body-wrap .llvc__body__face > svg .body-stroke {
	fill: url(#tb-llvc-body-outline-gradient);
}
#tb-builder .tb-llvc-body-wrap .llvc__body__face > svg .body-fill,
#tb-builder .tb-llvc-body-wrap .llvc__body__face > svg path:not(.body-stroke) {
	fill: var(--tb-surface, #f8f7fc);
}
/* Face toggle: "View Face Concerns" – visible when body view is active */
#tb-builder .tb-llvc-body-wrap .llvc__face-toggle--main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tb-accent);
	background: var(--tb-surface);
	border: 2px solid var(--tb-border);
	border-radius: 8px;
	cursor: pointer;
	z-index: 10;
	transition: border-color 0.2s, background 0.2s;
}
#tb-builder .tb-llvc-body-wrap .llvc__face-toggle--main .llvc__face-toggle-text {
	white-space: nowrap;
}
#tb-builder .tb-llvc-body-wrap .llvc__face-toggle--main:hover {
	border-color: var(--tb-accent);
	background: rgba(99, 102, 241, 0.08);
}
#tb-builder .tb-llvc-body-wrap .llvc__body.is-showing-face .llvc__face-toggle--main {
	display: none;
}
/* Sparkle button on face area (full body view): click to open face concerns */
#tb-builder .tb-llvc-body-wrap .tb-face-hotspot {
	position: absolute;
	top: 3%;
	left: 51%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid var(--tb-accent, #5a56f9);
	border-radius: 50%;
	color: var(--tb-accent, #5a56f9);
	cursor: pointer;
	z-index: 8;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-shadow: 0 2px 8px rgba(90, 86, 249, 0.25);
}
#tb-builder .tb-llvc-body-wrap .tb-face-hotspot:hover {
	transform: translate(-50%, -50%) scale(1.1);
	box-shadow: 0 4px 14px rgba(90, 86, 249, 0.35);
	background: #fff;
}
#tb-builder .tb-llvc-body-wrap .tb-face-hotspot .tb-sparkle-icon {
	animation: tb-sparkle-pulse 2s ease-in-out infinite;
}
@keyframes tb-sparkle-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.85; transform: scale(1.05); }
}
#tb-builder .tb-llvc-body-wrap .llvc__body.is-showing-face .tb-face-hotspot {
	display: none;
}
/* Back to full body – visible only when face view is active */
#tb-builder .tb-llvc-body-wrap .llvc__face-toggle--back {
	display: none;
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tb-accent);
	background: var(--tb-surface);
	border: 2px solid var(--tb-border);
	border-radius: 8px;
	cursor: pointer;
	width: 100%;
	transition: border-color 0.2s, background 0.2s;
}
#tb-builder .tb-llvc-body-wrap .llvc__face-toggle--back:hover {
	border-color: var(--tb-accent);
	background: rgba(99, 102, 241, 0.08);
}
#tb-builder .tb-llvc-body-wrap .llvc__body.is-showing-face .llvc__face-toggle--back {
	display: block;
}
/* Front / Back body flip button */
#tb-builder .tb-llvc-body-wrap .tb-body-flip,
#tb-builder .tb-llvc-body-wrap .llvc__turn.llvc__turn-female {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tb-accent);
	background: var(--tb-surface);
	border: 2px solid var(--tb-border);
	border-radius: 8px;
	cursor: pointer;
	width: 100%;
	transition: border-color 0.2s, background 0.2s;
}
#tb-builder .tb-llvc-body-wrap .tb-body-flip:hover,
#tb-builder .tb-llvc-body-wrap .llvc__turn.llvc__turn-female:hover {
	border-color: var(--tb-accent);
	background: rgba(99, 102, 241, 0.08);
}
#tb-builder .tb-llvc-body-wrap .llvc__body.is-showing-face .tb-body-flip,
#tb-builder .tb-llvc-body-wrap .llvc__body.is-showing-face .llvc__turn.llvc__turn-female {
	display: none;
}
/* Concern areas: circles positioned over the diagram (reference .llvc__concern-area) */
#tb-builder .tb-llvc-body-wrap .llvc__concern-area {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 24px;
	width: 24px;
	transform: translate(-50%, -50%);
	text-align: center;
	border-radius: 50%;
	z-index: 5;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
#tb-builder .tb-llvc-body-wrap .llvc__concern-area .llvc__concern-area__circle {
	height: 20px;
	width: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tb-surface, #fff);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
	border: none;
	color: var(--tb-accent, #6366f1);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	padding: 0;
}
#tb-builder .tb-llvc-body-wrap .llvc__concern-area .llvc__concern-area__circle:hover {
	background: var(--tb-accent, #6366f1);
	color: #fff;
}
#tb-builder .tb-llvc-body-wrap .llvc__concern-area .llvc__concern-area__circle .icon.icon-llvc-add {
	height: 10px;
	width: 10px;
}
#tb-builder .tb-llvc-body-wrap .llvc__concern-area .llvc__concern-area__title {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) translateY(12px);
	visibility: hidden;
	opacity: 0;
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--tb-accent);
	line-height: 1.4;
	pointer-events: none;
	transition: visibility 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
	z-index: 1;
	white-space: nowrap;
}
#tb-builder .tb-llvc-body-wrap .llvc__concern-area:hover .llvc__concern-area__title,
#tb-builder .tb-llvc-body-wrap .llvc__concern-area.show-tooltip .llvc__concern-area__title {
	visibility: visible;
	opacity: 1;
	transform: translateX(-50%);
}
#tb-builder .tb-llvc-body-wrap .llvc__concern-area:hover .llvc__concern-area__circle,
#tb-builder .tb-llvc-body-wrap .llvc__concern-area.show-tooltip .llvc__concern-area__circle {
	background: var(--tb-accent, #6366f1);
	color: #fff;
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tb-body-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tb-body-btn {
	background: var(--tb-surface);
	border: 2px solid var(--tb-border);
	padding: 0.625rem 1rem;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--tb-text);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.tb-body-btn:hover { border-color: var(--tb-accent); background: rgba(99, 102, 241, 0.06); }
.tb-concerns-column {
	background: var(--tb-surface);
	border-radius: 0px;
	padding: 1.5rem;
	box-shadow: var(--tb-shadow);
	border: 1px solid var(--tb-border);
}
.tb-concerns-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}
.tb-concerns-title { font-weight: 600; }
.tb-clear-all {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: none;
	font-size: 0.875rem;
	color: var(--tb-text-muted);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}
.tb-clear-all .icon-llvc-trash { flex-shrink: 0; }
.tb-clear-all:hover { color: var(--tb-accent); }
.tb-concerns-empty,
.tb-concerns-hint { color: var(--tb-text-muted); font-size: 0.9375rem; margin: 0 0 0.25rem; }
.tb-selections-summary { margin-top: 0.5rem; }
.tb-selections-summary:empty { display: none; }
.tb-selections-group { margin-bottom: 1.25rem; }
.tb-selections-group:last-child { margin-bottom: 0; }
.tb-selections-group-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--tb-text);
	margin: 0 0 0.5rem;
}
.tb-selections-group-hr {
	border: none;
	border-top: 1px solid var(--tb-border);
	margin: 0 0 0.75rem;
}
.tb-selections-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 10px;
}
.tb-selection-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.6rem;
	background: var(--tb-bg);
	border: 1px solid var(--tb-border);
	border-radius: 999px;
	font-size: 0.875rem;
	color: var(--tb-text);
}
.tb-selection-pill-text { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-selection-pill-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--tb-text-muted);
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
	flex-shrink: 0;
}
.tb-selection-pill-remove:hover {
	color: var(--tb-text);
	background: rgba(0, 0, 0, 0.06);
}
.tb-concerns-by-area { margin-top: 1rem; }
/* Only the open body part's concerns are visible at a time */
.tb-concern-area-block { margin-bottom: 1.25rem; }
.tb-concern-area-block:not(.is-open) { display: none; }
.tb-concern-area-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; }
.tb-concern-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tb-concern-list label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--tb-bg);
	border: 1px solid var(--tb-border);
	border-radius: 999px;
	font-size: 0.875rem;
	cursor: pointer;
}
.tb-concern-list input:checked + label,
.tb-concern-list label:hover { border-color: var(--tb-accent); background: rgba(99, 102, 241, 0.08); }
.tb-concerns-actions { margin-top: 1.5rem; }
/* Hide Finish Consultation and Select More Concerns when there are no selections */
.tb-selections-sidebar .tb-concerns-actions { display: none; }
.tb-selections-sidebar.tb-has-selections .tb-concerns-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.tb-mobile-sheet-handle { display: none; }
.tb-select-more-concerns { display: none; }
.tb-selections-sidebar.tb-has-selections .tb-select-more-concerns { display: inline-block; }
.tb-concerns-drawer-back { display: none; }
.tb-concerns-drawer-footer { display: none; }

/* Form step */
.tb-form-inner { max-width: 420px; margin: 0 auto; }
.tb-form-desc { color: var(--tb-text-muted); margin-bottom: 1.5rem; }
.tb-form-row { margin-bottom: 1rem; }
.tb-form-row label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; }
.tb-form-row input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--tb-border);
	border-radius: 8px;
	font-size: 1rem;
}
.tb-form-row input:focus { outline: none; border-color: var(--tb-accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.tb-form button[type="submit"] { margin-top: 0.5rem; width: 100%; }

/* Results page – full width, clean layout (screenshot) */
.tb-results-page {
	min-height: 100vh;
	background: #f8f8f8;
	display: flex;
	flex-direction: column;
}
.tb-results-header {
	background: #eeeeee;
	width: 100%;
	flex-shrink: 0;
}
.tb-results-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.tb-results-logo img { max-height: 40px; width: auto; display: block; }
.tb-results-logo-placeholder { min-width: 1px; }
.tb-results-back {
	background: none !important;
	border: none;
	font-size: 0.9375rem !important;
	color: #333 !important;
	cursor: pointer;
	text-decoration: underline;
	padding: 0 !important;
	margin-right: auto;
	font-weight: 400;
}
.tb-results-back:hover { color: var(--tb-accent, #6a5acd); }
.tb-results-exit {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9375rem;
	color: #333;
	text-decoration: none;
}
.tb-results-exit:hover { color: var(--tb-accent, #6a5acd); }
.tb-results-exit-arrow { font-size: 1.1em; }

.tb-results-main {
	flex: 1;
	width: 100%;
}
.tb-results-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	border-radius: 0;
	padding: 2.5rem 2rem 3rem;
}

.tb-results-intro {
	position: relative;
	text-align: center;
	max-width: 640px;
	margin: 0 auto 3rem;
	padding: 0 0.5rem;
}
.tb-results-print {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: none;
	font-size: 0.875rem;
	color: #888;
	cursor: pointer;
	padding: 0;
}
.tb-results-print:hover { color: #333; }
.tb-results-print-icon { flex-shrink: 0; }
.tb-results-subtitle {
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #888;
	margin: 0 0 0.5rem;
}
.tb-results-title {
	font-size: 2rem;
	font-weight: 700;
	color: #333;
	margin: 0 0 0.75rem;
}
.tb-results-desc {
	font-size: 1rem;
	color: #444;
	margin: 0 0 0.5rem;
	line-height: 1.5;
}
.tb-results-intro .tb-highlight { color: var(--tb-accent, #6a5acd); font-weight: 700; }

.tb-results-concern {
	margin-bottom: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid #e8e8e8;
}
.tb-results-concern:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.tb-results-concern-inner {
	display: grid;
	gap: 2rem;
	align-items: start;
	min-width: 0;
}
@media (min-width: 900px) {
	.tb-results-concern-inner { grid-template-columns: 240px 1fr; }
}
.tb-results-sidebar-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #333;
	margin: 0 0 0.5rem;
}
.tb-results-sidebar-desc {
	font-size: 0.9375rem;
	color: #444;
	margin: 0 0 0.35rem;
	line-height: 1.4;
}
.tb-results-body-part-link { margin-top: 0.5rem; }
.tb-results-body-part-link .tb-highlight {
	color: var(--tb-accent, #6a5acd);
	font-weight: 600;
}

/* Results carousel */
.tb-results-carousel-wrap {
	position: relative;
	overflow: visible;
	padding: 0 52px;
	min-width: 0;
}
.tb-results-carousel-wrap .tb-carousel {
	overflow: hidden;
	/* Inset clip so card borders aren’t cut on scroll (left/bottom) */
	padding: 0 0 2px 2px;
	box-sizing: border-box;
}
.tb-carousel-prev,
.tb-carousel-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 100% !important;
	background: #fff !important;
	background-color: #fff !important;
	border: 1px solid #e0e0e0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
	cursor: pointer;
	z-index: 20;
	transition: border-color 0.2s, color 0.2s, background 0.2s, opacity 0.2s;
	padding: 15px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
	color: #000 !important;
	font-family: inherit;
	pointer-events: auto;
}
.tb-carousel-prev.is-disabled,
.tb-carousel-next.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}
.tb-carousel-prev { left: 4px; }
.tb-carousel-next { right: 4px; }
.tb-carousel-prev::before,
.tb-carousel-next::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-style: solid;
	border-color: currentColor;
	border-width: 2px 2px 0 0;
}
.tb-carousel-prev::before {
	margin-left: 4px;
	transform: rotate(-135deg);
}
.tb-carousel-next::before {
	margin-right: 4px;
	transform: rotate(45deg);
}
.tb-carousel-track {
	display: flex;
	gap: 1.25rem;
	transition: transform 0.3s ease;
	will-change: transform;
}
.tb-card-wrapper {
	flex: 0 0 300px;
	min-width: 0;
}
@media (min-width: 900px) {
	.tb-card-wrapper { flex: 0 0 320px; }
}

/* Tablet: results carousel arrows visible and touch-friendly */
@media (max-width: 1023px) {
	.tb-results-carousel-wrap {
		padding: 0 48px;
		overflow: visible;
		min-width: 0;
	}
	.tb-carousel-prev,
	.tb-carousel-next {
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
		z-index: 20;
		background: #fff !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
	}
	.tb-carousel-prev { left: 4px; right: auto; }
	.tb-carousel-next { left: auto; right: 4px; }
	.tb-carousel-prev::before,
	.tb-carousel-next::before { width: 9px; height: 9px; }
}

/* Result cards – reference style (tag, serif title, solid Learn More button) */
.tb-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 1.5rem 1.75rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s, border-color 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	box-sizing: border-box;
}
.tb-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	border-color: #d0d0d0;
}
.tb-card-tag {
	display: inline-block;
	margin-bottom: 0.5rem;
	display: inline-block;
    font-size: 14px;
    color: #888;
    margin-bottom: 0.5rem;
    width: fit-content;
    font-family: inherit;
    border: 2px solid #edf2f7;
    padding: 5px;
    border-radius: 100px;
    line-height: 20px;
    background-color: #f5f4f9;
}
.tb-card-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.375rem;
	font-weight: 700;
	color: #222;
	margin: 0 0 0.75rem;
	line-height: 1.3;
}
.tb-card-excerpt {
	font-size: 0.9375rem;
	color: #444;
	line-height: 1.55;
	flex: 1;
	margin-bottom: 1.25rem;
}
.tb-card-excerpt p { margin: 0 0 0.5rem; }
.tb-card-learn-more {
	display: inline-block;
	background-color: transparent !important;
    padding: 0px !important;
    color: #444141 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
	border: none !important;
	cursor: pointer;
	align-self: flex-start;
	text-decoration: underline;
	transition: color 0.2s;
}
.tb-card-learn-more:hover {
	background: transparent !important;
	color: var(--tb-accent-hover, #5a4abd) !important;
}
.tb-results-wrap { padding-bottom: 4rem; }
.tb-results-sidebar .tb-heading { margin-bottom: 0.5rem; }
.tb-results-sidebar p { margin: 0 0 0.25rem; font-size: 0.9375rem; color: #888; }
.tb-body-part-link { margin-top: 0.5rem; }
.tb-highlight { color: var(--tb-accent, #6a5acd); }

@media print {
	.tb-results-header,
	.tb-results-print,
	.tb-results-back,
	.tb-carousel-prev,
	.tb-carousel-next,
	.tb-card-learn-more,
	.tb-detail-panel { display: none !important; }
	.tb-results-page { background: #fff; }
	.tb-results-container { box-shadow: none; }
	.tb-carousel-track { transform: none !important; }
}

/* Detail panel (reference: ~2/3 width, gray header, teal Back, centered title, horizontal treats, process cards with icons) */
.tb-detail-panel {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: stretch;
	pointer-events: none;
	visibility: hidden;
}
.tb-detail-panel[hidden] { display: none; }
.tb-detail-panel.is-open {
	pointer-events: auto;
	visibility: visible;
}
.tb-detail-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.4s;
}
.tb-detail-panel.is-open .tb-detail-overlay { opacity: 1; }
.tb-detail-content {
	position: relative;
	width: 100%;
	max-width: min(980px, 100vw);
	margin-left: auto;
	background: var(--tb-bg);
	box-shadow: -8px 0 32px rgba(0,0,0,0.15);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.4s ease;
}
.tb-detail-panel.is-open .tb-detail-content { transform: translateX(0); }
.tb-detail-panel.is-closing .tb-detail-content { transform: translateX(100%); }
.tb-detail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1.5rem;
	background: #fff;
	border-bottom: 1px solid #d0d0d0;
	position: sticky;
	top: 0;
	z-index: 1;
}
.tb-detail-back {
	background: transparent !important;
	color: #333 !important;
	border: none;
	padding: 0.5rem 1rem;
	font-size: 14px !important;
	font-weight: 400 !important;
	cursor: pointer;
	flex-shrink: 0;
	text-decoration: underline !important;
}
.tb-detail-back:hover { background: #0f766e; color: #fff; }
.tb-detail-title {
	font-size: 1.125rem !important;
	font-weight: 500 !important;
	margin: 0;
	text-align: center;
	flex: 1;
}
.tb-detail-body { 
	padding: 48px;
	margin-left: 50px;
    margin-right: 50px;
    margin-top: 30px;
	background: #fff;
}
.tb-detail-body-title {
	font-family: var(--tb-font-serif, Georgia, serif);
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 1rem;
	line-height: 1.3;
}
.tb-detail-description { margin-bottom: 1.25rem; line-height: 1.6; color: #374151; }
.tb-detail-concern-badge { margin-bottom: 1.25rem; }
.tb-detail-concern-badge .tb-highlight { color: var(--tb-accent); font-weight: 600; }
.tb-detail-treats h3,
.tb-detail-process h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem; }
.tb-detail-treats-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.75rem;
}
.tb-detail-treats-list li {
	padding: 0;
	border: none;
	font-size: 0.9375rem;
}
.tb-detail-treats-list li:not(:last-child)::after {
	content: ', ';
	margin-left: -0.25rem;
}
.tb-detail-process-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.tb-process-item {
	background: #f3f4f6;
	border: none;
	border-radius: 8px;
	padding: 1rem;
	min-width: 30%;
	display: flex;
	flex-direction: column;
	align-items: start;
	text-align: left;
}
.tb-process-icon {
	width: 25px;
	height: 25px;
	min-width: 30px;
	min-height: 30px;
	border: 1px solid #606148;
	border-radius: 50%;
	color: #606148;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.5rem;
	flex-shrink: 0;
}
.tb-process-icon svg {
	width: 16px;
	height: 16px;
	display: block;
}
.tb-process-icon svg,
.tb-process-icon svg path,
.tb-process-icon svg circle,
.tb-process-icon svg line {
	stroke: currentColor;
	fill: none;
}
.tb-process-icon svg[fill] path { fill: currentColor; }
.tb-process-label { display: block; font-size: 0.75rem; color: var(--tb-text-muted); margin-bottom: 0.25rem; padding-top: 35%; }
.tb-process-value { font-weight: 600; font-size: 0.9375rem; }
.tb-detail-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tb-detail-contact-fallback { color: var(--tb-text-muted); font-size: 0.9375rem; }
body.tb-panel-open { overflow: hidden; }

.tb-error { color: #b91c1c; padding: 1rem; }
.body-concerns-view-toggle {
	background-color: transparent !important;
	color:#5c5966 !important;
	font-size: 0.875rem !important;
    font-weight: 400 !important;
}

.body-concerns-view-toggle svg {
	vertical-align: middle;
}

/* ========== Mobile (max 767px): layout, spacing, touch targets ========== */
@media (max-width: 767px) {
	.tb-wrap,
	.llvc { min-height: 50vh; padding-bottom: 0rem; overflow-x: hidden; }
	.llvc-navbar__back.tb-nav-back {
		padding: 0px;
	}
	/* Nav */
	.llvc-navbar,
	.tb-nav { padding: 0rem; }
	.llvc-navbar__logo { max-height: 32px; }
	.llvc-navbar__back,
	.tb-nav-back,
	.llvc-navbar__exit,
	.tb-nav-exit { font-size: 0.875rem; min-height: 44px; padding: 0.35rem 0; }
	.container { padding: 0 1rem; }

	/* Steps */
	.tb-step,
	.llvc__step { padding: 1.25rem 1rem; }

	/* Intro */
	.tb-heading { font-size: 1.25rem; }
	.tb-heading--lg { font-size: 1.375rem; }
	.llvc__intro .llvc__columns,
	.tb-intro-layout { gap: 1.25rem; }
	.llvc__mobile-start { text-align: center; margin-top: 10%; }
	.tb-intro-steps { padding-left: 1.25rem; margin-bottom: 1rem; }
	.tb-intro-visual { min-height: 200px; display: none; }

	/* Segment step */
	.tb-step-segment .tb-segment-inner { max-width: 100%; }
	.tb-segment-options { gap: 1rem; }
	.tb-segment-btn { padding: 0.875rem 1rem; width: 100%; min-height: 48px; }

	/* Selection: body full width; Your Selections as bottom sheet */
	.llvc__screen.llvc__concerns .llvc__container { padding: 0; }
	.tb-selection-layout,
	.llvc__columns.tb-llvc--concerns { gap: 0; grid-template-columns: 1fr; }
	.tb-body-column {
		display: flex;
		flex-direction: column;
		padding: 0 0.5rem 1rem;
		min-height: min(420px, 58vh);
	}
	.tb-body-rotate-row {
		width: 100%;
		flex: 1;
		min-height: min(340px, 45vh);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		margin-bottom: 0.5rem;
	}
	#tb-builder {
		min-height: 0vh;
	}
	
	.tb-mobile-selections-wrap {
		position: fixed;
		bottom: 0px;
		left: 0;
		right: 0;
		z-index: 500;
		background: #fff !important;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
		max-height: 70vh;
		display: flex;
		flex-direction: column;
		transition: max-height 0.3s ease;
		min-height: 250px;
		max-height: 250px;
	}
	/* Collapsed: small bar overlaying the body/skeleton; no min-height to avoid flex conflict */
	.tb-mobile-selections-wrap.tb-selections-sheet-collapsed {
		max-height: 100px;
		min-height: 355px;
		overflow-y: scroll;
	}
	.tb-mobile-sheet-handle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 44px;
		padding: 12px;
		background: transparent !important;
		border: none;
		cursor: pointer;
		flex-shrink: 0;
		color: #000 !important;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
	.tb-mobile-selections-wrap.tb-selections-sheet-collapsed .tb-mobile-sheet-handle {
		padding: 6px 12px;
	}
	.tb-sheet-chevron { display: block; transition: transform 0.2s; }
	.tb-mobile-selections-wrap.tb-selections-sheet-collapsed .tb-sheet-chevron { transform: rotate(180deg); }
	/* Sidebar scrolls when sheet is expanded; handle does not shrink */
	.tb-selections-sidebar {
		padding: 0 1.25rem 1.5rem;
		padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		flex: 1;
		min-height: 0;
	}
	/* When sheet is collapsed, reduce body padding so sheet overlays the skeleton */
	.tb-selection-layout.tb-sheet-collapsed .tb-body-column,
	.llvc__columns.tb-llvc--concerns.tb-sheet-collapsed .tb-body-column {
		padding-bottom: 72px;
	}
	.tb-concerns-header.llvc__concerns__heading-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1rem;
		flex-wrap: nowrap;
	}
	.tb-clear-all.llvc__concerns__clear {
		background: transparent;
		color: #5c5966;
	}
	.tb-concerns-title { font-size: 1.125rem; font-weight: 700; color: #2d2a38; }
	.tb-clear-all { font-size: 0.875rem; color: #5c5966; }
	.tb-concerns-panel { margin-bottom: 1rem; }
	.tb-concerns-empty, .tb-concerns-hint { font-size: 0.9375rem; color: #5c5966; }
	.tb-selections-sidebar .tb-concerns-actions { display: none; }
	.tb-selections-sidebar.tb-has-selections .tb-concerns-actions {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		margin-top: 1rem;
	}
	.tb-finish-consultation { width: 100%; min-height: 48px; }
	.tb-selections-sidebar.tb-has-selections .tb-select-more-concerns {
		display: block;
		width: 100%;
		min-height: 48px;
		background: #fff;
		border: 1px solid var(--tb-border);
		color: var(--tb-text);
		border-radius: 8px;
		font-weight: 500;
	}
	.tb-select-more-concerns:hover { background: #f3f4f6; }
	.tb-selections-group-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; }
	.tb-selections-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 10px; }
	.tb-selection-pill {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		padding: 0.5rem 0.75rem;
		background: #fff;
		border: 1px solid #e4e2ec;
		border-radius: 999px;
		font-size: 0.875rem;
		color: var(--tb-text);
	}
	#tb-builder .tb-selection-pill-remove,
	#tb-builder button.tb-selection-pill-remove {
		width: 20px !important;
		height: 20px !important;
		min-width: 20px !important;
		min-height: 20px !important;
		font-size: 1rem !important;
		line-height: 1 !important;
		color: #5c5966 !important;
		background: transparent !important;
		border: 1px solid #e4e2ec !important;
		padding: 0 !important;
		border-radius: 50% !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.tb-body-rotate-row { flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; }
	.tb-body-rotate-btn { width: 44px; height: 44px; flex-shrink: 0; }
	.tb-body-rotate-row .tb-llvc-body-wrap,
	#tb-builder .tb-llvc-body-wrap {
		max-width: 100%;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		flex: 1 1 auto;
		min-width: 0;
		min-height: min(360px, 48vh);
	}
	/* Body part circle positions: mobile-only overrides (desktop keeps inline styles) */
	/* Mobile body positions: only when body has tb-viewport-mobile (set by JS); desktop keeps inline styles */
	body.tb-viewport-mobile #tb-builder .tb-llvc-body-wrap .llvc__concern-area[data-body-part="chest"] { top: 23% !important; left: 25% !important; }
	body.tb-viewport-mobile #tb-builder .tb-llvc-body-wrap .llvc__concern-area[data-body-part="arms"] { top: 24% !important; left: 90% !important; }
	body.tb-viewport-mobile #tb-builder .tb-llvc-body-wrap .llvc__concern-area[data-body-part="flanks"] { top: 32% !important; left: 25% !important; }
	body.tb-viewport-mobile #tb-builder .tb-llvc-body-wrap .llvc__concern-area[data-body-part="intimate"] { top: 44% !important; left: 30% !important; }
	.tb-body-bottom {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.5rem 1rem;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--tb-border, #e4e2ec);
	}

	/* Concerns drawer: full screen on mobile (no partial slide, no green background visible) */
	.tb-concerns-drawer.llvc__concerns-column {
		position: fixed;
		inset: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		min-height: 100vh;
		min-height: 100dvh;
		max-height: none;
		margin: 0;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		box-shadow: none;
		border-radius: 0;
		background: #f8f8f8;
		padding: 0;
		display: flex;
		flex-direction: column;
		z-index: 1000;
		overflow: hidden;
	}
	.llvc__screen.llvc__concerns.tb-concerns-drawer-open .tb-concerns-drawer.llvc__concerns-column { transform: translateY(0); }
	.llvc__screen.llvc__concerns.tb-concerns-drawer-open .tb-concerns-drawer-backdrop {
		background: transparent;
	}
	.tb-concerns-drawer-header {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
		padding: 1rem 1.25rem 0.75rem;
		padding-top: max(1rem, env(safe-area-inset-top));
		background: #f8f8f8;
		border-bottom: 1px solid #e8e8e8;
	}
	.tb-concerns-drawer-back {
		display: block;
		order: 1;
		width: 100%;
		background: transparent !important;
		border: none;
		padding: 0px !important;
		font-size: 0.9375rem !important;
		color: #5c5966 !important;
		text-decoration: underline;
		cursor: pointer;
		text-align: left;
		margin-bottom: 0.25rem;
	}
	.tb-concerns-drawer-title {
		order: 2;
		width: 100%;
		font-size: 1.5rem;
		font-weight: 700;
		color: #2d2a38;
		margin: 0;
	}
	.tb-concerns-drawer-close-btn {
		display: none;
	}
	#tb-concerns-by-area {
		flex: 1;
		overflow-y: auto;
		padding: 1rem 1.25rem;
	}
	.tb-concern-area-block.is-open .tb-concern-area-title { display: none; }
	.tb-concern-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	.tb-concern-list li {
		margin: 0;
		padding: 0;
	}
	.tb-concern-list label {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 1rem 1.25rem;
		background: #fff;
		border: 1px solid #e4e2ec;
		border-radius: 100px;
		font-size: 1rem;
		color: #2d2a38;
		cursor: pointer;
		margin: 0;
	}
	.tb-concern-list input[type="checkbox"] {
		width: 22px;
		height: 22px;
		min-width: 22px;
		border-radius: 50%;
		accent-color: var(--tb-accent);
	}
	.tb-concerns-drawer-footer {
		display: block;
		padding: 1rem 1.25rem;
		padding-bottom: max(1rem, env(safe-area-inset-bottom));
		background: #f8f8f8;
		border-top: 1px solid #e8e8e8;
	}
	.tb-add-to-plan-btn {
		width: 100%;
		min-height: 52px;
		font-size: 1rem;
		font-weight: 600;
		background: #2d2a38 !important;
		color: #fff !important;
		border: none;
		border-radius: 10px;
	}
	.tb-add-to-plan-btn:hover { background: #1f1d28 !important; color: #fff !important; }
	.tb-selection-pill-text { max-width: 140px; }

	/* Form step */
	.tb-form-inner { padding: 0 0.5rem; }
	.tb-form-row input { padding: 0.875rem 1rem; }
	.tb-form button[type="submit"] { min-height: 48px; }

	/* Results page */
	.tb-results-header-inner { padding: 0.75rem 1rem; flex-wrap: wrap; }
	.tb-results-logo img { max-height: 32px; }
	.tb-results-back,
	.tb-results-exit { font-size: 0.875rem; min-height: 44px; }
	.tb-results-container { padding: 1.25rem 1rem 2rem; }
	.tb-results-intro { margin-bottom: 2rem; padding: 0; }
	.tb-results-print { position: static; margin-bottom: 0.5rem; }
	.tb-results-subtitle { font-size: 0.7rem; }
	.tb-results-title { font-size: 1.5rem; }
	.tb-results-desc { font-size: 0.9375rem; }
	.tb-results-concern { margin-bottom: 2rem; padding-bottom: 2rem; }
	.tb-results-concern-inner { gap: 1.25rem; }
	.tb-results-sidebar-title { font-size: 1.125rem; }

	/* Carousel: ensure arrows always visible, touch-friendly */
	.tb-results-carousel-wrap {
		padding: 0 44px;
		min-width: 0;
		overflow: visible;
	}
	.tb-carousel-prev,
	.tb-carousel-next {
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
		padding: 10px !important;
		z-index: 20;
		background: #fff !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
	}
	.tb-carousel-prev { left: 2px; right: auto; }
	.tb-carousel-next { left: auto; right: 2px; }
	.tb-carousel-prev::before,
	.tb-carousel-next::before { width: 8px; height: 8px; }
	.tb-carousel-track { gap: 0.875rem; }
	.tb-card-wrapper { flex: 0 0 min(280px, 85vw); }
	.tb-card { padding: 1.25rem 1rem; margin-left: 15px; }
	.tb-card-tag { font-size: 12px; padding: 4px 8px; }
	.tb-card-title { font-size: 1.2rem; }
	.tb-card-excerpt { font-size: 0.875rem; margin-bottom: 1rem; }
	.tb-card-learn-more { font-size: 13px !important; }

	/* Detail panel: full width, reduced padding */
	.tb-detail-content { max-width: 100%; width: 100%; }
	.tb-detail-header { padding: 0.625rem 1rem; }
	.tb-detail-back,
	.tb-detail-title { font-size: 0.9375rem !important; }
	.tb-detail-body { padding: 48px; margin-left: 0px; margin-right: 0px; margin-top: 0px; }
	.tb-detail-body-title { font-size: 1.375rem; }
	.tb-detail-process-grid { gap: 0.75rem; }
	.tb-process-item { min-width: calc(100% - 0.375rem); }
	.tb-process-label { padding-top: 50px; }

	/* How-to popover: fit on small screens */
	.tb-howto-popover { max-width: calc(100vw - 2rem); min-width: 260px; }
	.tb-howto-popover-inner { padding: 0.75rem 1rem 0.75rem; }

	/* Body diagram: cap width so it doesn’t dominate on tiny screens */
	#tb-builder .tb-llvc-body-wrap .llvc__body__front > svg,
	#tb-builder .tb-llvc-body-wrap .llvc__body__back > svg,
	#tb-builder .tb-llvc-body-wrap .llvc__body__face > svg {
		max-height: min(560px, 72vh);
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	#tb-builder .tb-llvc-body-wrap .llvc__face-toggle--main,
	#tb-builder .tb-llvc-body-wrap .tb-body-flip,
	#tb-builder .tb-llvc-body-wrap .llvc__turn.llvc__turn-female { min-height: 44px; padding: 0.5rem 0.875rem; }

	/* Results intro: stack print link above title cleanly */
	.tb-results-intro { display: flex; flex-direction: column; align-items: center; }
	.tb-results-print { order: -1; }
}