/* ==========================================================================
   Luniea Smart Estimate - Frontend Styles
   ========================================================================== */

:root {
	--lse-primary: #6366f1;
	/* Indigo matching screenshot */
	--lse-primary-hover: #4f46e5;
	--lse-secondary: #8b5cf6;
	--lse-surface: #FCFCFC;
	--lse-bg: #f8fafc;
	--lse-border: #e2e8f0;
	--lse-text: #0f172a;
	--lse-text-muted: #64748b;
	--lse-radius: 12px;
	/* Softer radius matching screenshot */
	--lse-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--lse-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Design settings hooks (overridable per estimator from the dashboard).
	   These MUST match Design_Settings::get_sections()'s own 'default' value
	   for the matching key exactly. A brand-new, never-customized estimator
	   renders with $style empty, so build_vars_from_style() emits NOTHING
	   onto .lse-wrapper for any of these — every consuming rule's own inline
	   var(--x, <fallback>) never even gets a chance to run, because :root
	   unconditionally DEFINES the variable here first (a CSS var's fallback
	   only applies when the var is undefined, not merely "set to something
	   the admin didn't choose"). A stale value here silently overrides every
	   correct inline fallback elsewhere in this file, which is exactly what
	   left brand-new estimators shipping a cramped 22px H1 instead of the
	   intended 36px — this block IS the real default for an unconfigured
	   estimator, not just a legacy safety net. */
	--lse-container-width: 960px;
	--lse-fs-heading: 36px;
	--lse-fs-body: 16px;
	--lse-fs-label: 15px;
	--lse-fs-input: 16px;
	--lse-fs-button: 16px;
	--lse-btn-padding: 12px 24px;
	--lse-btn-margin: 0;
	--lse-btn-radius: 8px;
	--lse-btn-bg: var(--lse-primary);
	--lse-btn-bg-hover: var(--lse-primary-hover);
	--lse-btn-bg-active: var(--lse-primary-hover);
	--lse-btn-text: #ffffff;
	--lse-card-bg: var(--lse-surface);
	--lse-card-border: var(--lse-border);
	--lse-card-selected: #eef2ff;
	--lse-spacing-section: 32px;
	--lse-spacing-field: 16px;
}

/* --lse-spacing-field has no admin-exposed setting of its own (it's this
   file's own internal fallback for options-grid gap, field-block spacing,
   etc. — see each consumer's own var() chain) — so it's safe to taper by
   default per device here with no risk of ever fighting a customization an
   admin actually made (there's nothing to fight; ANY explicit override,
   whether the shared value above or a real admin-set --lse-options-grid-gap
   etc., is a MORE SPECIFIC rule than :root and still wins at every width). */
@media (max-width: 1024px) {
	:root { --lse-spacing-field: 12px; }
}
@media (max-width: 767px) {
	:root { --lse-spacing-field: 8px; }
}

[data-lse-theme="dark"] {
	--lse-surface: #1e293b;
	--lse-bg: #0f172a;
	--lse-border: #334155;
	--lse-text: #f8fafc;
	--lse-text-muted: #94a3b8;
}

.iti {
	width: 100%;
	display: block;
}

.lse-wrapper {
	font-family: var(--lse-font);
	color: var(--lse-text);
	background: transparent;
	/* Remove background so it blends with theme */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0;
	padding: 0;
	/* clip, not hidden — overflow-x:hidden silently computes overflow-y to
	   "auto", turning .lse-wrapper into its own scroll container, which
	   breaks .lse-header/.lse-chat-header's position:sticky (sticky then
	   sticks to the TOP OF THIS BOX's own internal scroll, not the real
	   page scroll) — exactly the same bug already fixed for ≤1024px below
	   (see that block's own comment), just never applied to the base/
	   desktop rule itself, so the header was only ever actually sticky on
	   tablet/mobile, never on desktop. clip still blocks the horizontal
	   overflow this rule exists for (the header/footer's own -50vw
	   pseudo-element borders) without creating a scroll container. On
	   older engines that lack `clip` (Safari < 16) this line is dropped;
	   body{overflow-x:hidden} just below still guards horizontal scroll
	   globally, so nothing regresses. */
	overflow-x: clip;
}

body {
	overflow-x: hidden;
}

/* Smart responsive padding for mobile */
@media (max-width: 767px) {
	.lse-wrapper {
		--lse-header-padding: 16px 20px !important;
		--lse-content-padding: 24px 20px !important;
		--lse-footer-padding: 16px 20px !important;
	}
}

/* --------------------------------------------------------------------------
   Container & Layout
   -------------------------------------------------------------------------- */
.lse-estimator-container {
	max-width: var(--lse-container-width);
	margin: var(--lse-container-margin, 0 auto);
	width: 100%;
	background: var(--lse-surface);
	/* Layered background-image: a color overlay (as a flat-to-itself
	   gradient, so a plain picked color can sit in an image-layer list),
	   the admin's custom gradient, and an optional image URL — each
	   defaults to `none` so leaving any of them blank doesn't affect the
	   others. Later layers paint on top, so overlay-over-image works. */
	background-image:
		linear-gradient(var(--lse-bg-overlay-color, transparent), var(--lse-bg-overlay-color, transparent)),
		var(--lse-bg-gradient, none),
		url(var(--lse-bg-image, ''));
	background-size: cover;
	background-position: center;
	border-radius: var(--lse-container-radius, 16px);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* dvh (dynamic viewport height) accounts for the mobile browser
	   address bar collapsing/expanding, so the sticky header/footer stay
	   pinned to the true visible edges on phones/tablets. */
	min-height: 100dvh;
}

/* --------------------------------------------------------------------------
   Header & Progress
   -------------------------------------------------------------------------- */
.lse-header {
	padding: var(--lse-header-padding, 24px 32px 24px 32px);
	background: var(--lse-header-bg, var(--lse-surface));
	border-top: 1px solid var(--lse-header-border, var(--lse-border));
	border-bottom: 1px solid var(--lse-header-border, var(--lse-border));
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 100;
}

.lse-header::before,
.lse-header::after,
.lse-footer-nav::before,
.lse-footer-nav::after {
	content: '';
	position: absolute;
	left: -50vw;
	right: -50vw;
	height: 1px;
	background: var(--lse-header-border, var(--lse-border));
	pointer-events: none;
}

.lse-header::before,
.lse-footer-nav::before {
	top: -1px;
}

.lse-header::after,
.lse-footer-nav::after {
	bottom: -1px;
}

.lse-header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--lse-header-margin, 24px);
	width: 100%;
}

.lse-brand-logo-link {
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.lse-brand-logo {
	max-width: var(--lse-header-logo-size, 160px);
	max-height: 48px;
	height: auto;
	object-fit: contain;
}

.lse-brand-name {
	font-weight: var(--lse-header-brand-fw, 700);
	font-size: var(--lse-header-brand-fs, 18px);
	color: var(--lse-header-brand-color, #0f172a);
	letter-spacing: -0.02em;
}

.lse-step-indicator {
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	text-align: right;
	font-size: var(--lse-header-step-fs, 14px);
	font-weight: var(--lse-header-step-fw, 500);
	line-height: var(--lse-header-step-lh, 1.4);
	color: var(--lse-header-step-color, var(--lse-text-muted));
}

.lse-progress-track {
	height: var(--lse-progress-height, 5px);
	background: var(--lse-progress-track, var(--lse-bg));
	width: 100%;
	margin: var(--lse-progress-margin, 0);
	border-radius: var(--lse-progress-radius, var(--lse-progress-height, 5px));
	border: var(--lse-progress-border-width, 1px) solid var(--lse-progress-border-color, var(--lse-border));
	overflow: hidden;
}

.lse-progress-fill {
	height: 100%;
	background: var(--lse-progress-fill, var(--lse-primary));
	transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: var(--lse-progress-radius, var(--lse-progress-height, 5px));
}

/* --------------------------------------------------------------------------
   Content Area
   -------------------------------------------------------------------------- */
.lse-content-area {
    padding: var(--lse-content-padding, 48px 32px);
    flex: 1 0 auto;
    min-height: auto;
    height: auto;
    overflow: visible;
}

.lse-inline-children-body .lse-option-card,
.lse-inline-children-body .lse-card-content {
    border-radius: 12px !important;
    overflow: hidden;
}

.lse-inline-children-body .lse-option-card input:checked + .lse-card-content,
.lse-inline-children-body .lse-option-card:hover .lse-card-content {
    border-radius: 12px !important;
}

/* Step Wizard only (never Chat Flow, which accumulates every step on screen
   at once — see #lse-chat-form's own, unrelated layout). A short step (e.g.
   a 2x3 icon grid) previously sat pinned to the TOP of a tall viewport,
   leaving a large dead block of empty space below it before the footer —
   unbalanced on any screen taller than the step's own content. `margin:
   auto 0` on a flex column's child centers it ONLY when there's genuine
   extra space; a step tall enough to fill/overflow the content area
   collapses that auto margin back to 0 and behaves exactly as before
   (top-aligned, scrollable) — this never fights the existing overflow-y:
   auto scrolling for a long step like the contact-info one. */
#lse-estimator-form {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

#lse-estimator-form > .lse-step {
	margin: auto 0;
}

.lse-step-header {
	margin-bottom: 32px;
}

/* !important on every customizable property here — many themes/page
   builders ship their own equal-or-higher-precedence element-selector
   heading rules that load after this stylesheet and would otherwise
   silently win, making the Step Heading settings in Design & Style
   Settings appear to do nothing. */
.lse-step-header h1 {
	margin: 0 0 12px 0 !important;
	font-size: var(--lse-fs-heading, 36px) !important;
	font-weight: var(--lse-fs-heading-fw, 700) !important;
	line-height: var(--lse-fs-heading-lh, 1.2) !important;
	color: var(--lse-step-title-color, var(--lse-text)) !important;
	letter-spacing: var(--lse-letter-spacing, -0.02em) !important;
	text-transform: var(--lse-text-transform, none) !important;
	text-align: var(--lse-heading-align, left) !important;
	font-family: var(--lse-font) !important;
}

.lse-step-header p {
	margin: 0 !important;
	color: var(--lse-step-desc-color, var(--lse-text-muted)) !important;
	font-size: var(--lse-fs-body, 16px) !important;
	line-height: var(--lse-body-lh, 1.6) !important;
	text-align: var(--lse-subheading-align, left) !important;
	font-family: var(--lse-font) !important;
}

.lse-section-title {
	display: block;
	font-weight: var(--lse-fs-label-fw, 500);
	text-align: var(--lse-label-align, left);
	margin: 0 0 var(--lse-label-margin, 8px) 0;
	color: var(--lse-text);
}

/* <label> case: a single field's own label — Field Labels typography. */
label.lse-section-title {
	font-size: var(--lse-fs-label, 15px);
	font-weight: var(--lse-fs-label-fw, 500);
	line-height: var(--lse-fs-label-lh, 1.5);
	color: var(--lse-label-color, var(--lse-text));
}

/* <h2> case: section title */
h2.lse-section-title {
	font-size: var(--lse-fs-h2, 28px);
	font-weight: var(--lse-fs-h2-fw, 700);
	line-height: var(--lse-fs-h2-lh, 1.3);
	color: var(--lse-color-h2, var(--lse-text));
}

/* <h3> case: a multi-option question's title — Question Title typography. */
h3.lse-section-title {
	font-size: var(--lse-fs-h3, 22px);
	font-weight: var(--lse-fs-h3-fw, 600);
	line-height: var(--lse-fs-h3-lh, 1.4);
	color: var(--lse-question-title-color, var(--lse-text));
}

/* <h4> case: group title */
h4.lse-group-title {
	font-size: var(--lse-fs-h4, 18px);
	font-weight: var(--lse-fs-h4-fw, 600);
	color: var(--lse-text);
	margin: 0 0 12px 0;
}

.lse-required-mark {
	color: var(--lse-required-mark-color, #ef4444);
	margin-left: var(--lse-required-mark-spacing, 4px);
}

.lse-field-helper {
	font-size: var(--lse-fs-helper, 14px);
	color: var(--lse-helper-color, var(--lse-text-muted));
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */
.lse-options-grid {
	display: grid;
	align-items: stretch;
	/* Dedicated var (not --lse-spacing-field directly) so a per-grid
	   override never bleeds into unrelated field-to-field spacing that
	   also reads --lse-spacing-field elsewhere within the same subtree. */
	gap: var(--lse-options-grid-gap, var(--lse-spacing-field));
}

/* Hero Form "Grid Columns" auto-stretch: when the total option count
   doesn't divide evenly by the configured column count, step-db-custom.php
   renders the leftover trailing options into this SIBLING flex row
   (instead of leaving short/empty grid cells) so they evenly share the
   full row width — e.g. 3 columns with 4 total options: 3 in the normal
   grid above, 1 here spanning 100%; 3 columns with 5 total: 3 above, the
   remaining 2 here each taking 50%. Same gap as the grid it follows, so
   spacing looks identical to a normal row. Plain flexbox (not a grid
   trick) is what makes this work for ANY remainder count, not just one
   leftover item — CSS Grid's auto-fit/auto-fill only collapses tracks
   that are unused across the WHOLE grid, not per-row, so it can't stretch
   a short trailing row on its own once earlier rows have already used
   every column. Hero-only (see step-db-custom.php's $lse_hero_mode gate);
   the main Wizard/Chat forms' per-field grid_columns is untouched. */
.lse-options-grid-stretch-row {
	display: flex;
	align-items: stretch;
	gap: var(--lse-options-grid-gap, var(--lse-spacing-field));
	margin-top: var(--lse-options-grid-gap, var(--lse-spacing-field));
}

.lse-options-grid-stretch-row > .lse-option-card {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
}

/* minmax(0, 1fr), not a bare 1fr — a plain `1fr` track still reserves at
   least its content's min-content width by default, so a longer option
   label (or more columns) can force the whole grid — and everything
   outside it, since nothing upstream clips intrinsic sizing — wider than
   its container. Clamping the minimum to 0 lets the track actually shrink
   and wrap text instead. */
.lse-grid-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.lse-grid-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lse-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lse-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lse-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lse-grid-1 {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {

	.lse-grid-6,
	.lse-grid-5,
	.lse-grid-4,
	.lse-grid-3 {
		/* minmax(0, 1fr), not a bare 1fr (== minmax(auto, 1fr)) — without
		   this, a column's own "automatic minimum size" is based on the
		   widest CONTENT inside it (e.g. a long What's Included bullet with
		   no natural break point), which can force that column — and the
		   whole grid/page — wider than the viewport instead of letting the
		   card's own text wrap. Same fix as the desktop .lse-grid-N rules
		   above; this breakpoint had fallen out of sync with them. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lse-grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Mobile Card Carousel (Card Group "Enable Mobile Horizontal Scroll").
	   Native scroll + CSS Scroll Snap, no slider library — desktop keeps the
	   normal grid above this breakpoint. Higher selector specificity than
	   the .lse-grid-N rules above (two classes vs. one) wins regardless of
	   source order. */
	.lse-options-grid.lse-mobile-carousel {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
		padding-bottom: 4px;
	}

	.lse-options-grid.lse-mobile-carousel>.lse-option-card {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}

	/* Full Width Cards on Mobile (Card Group). Same specificity trick as
	   .lse-mobile-carousel above — two classes beats the single-class
	   .lse-grid-N rules regardless of source order, forcing one card per
	   row no matter how many columns the desktop grid_columns setting uses. */
	.lse-options-grid.lse-mobile-full-width {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 500px) {

	.lse-grid-6,
	.lse-grid-5,
	.lse-grid-4,
	.lse-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.lse-grid-2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.lse-options-grid.lse-mobile-full-width {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.lse-option-card {
	display: flex;
	flex-direction: column;
	cursor: pointer;
	position: relative;
	/* Lets the shared hover/focus box-shadow below (moved here from
	   .lse-card-content so it wraps the WHOLE card, including an expanded
	   What's Included slot) render with rounded corners instead of a plain
	   rectangle — purely a shadow-shape hint since this element has no
	   visible background/border of its own. */
	border-radius: var(--lse-radius);
	transition: transform var(--lse-transition-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--lse-transition-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
	/* .lse-options-grid's `display:grid` already stretches every card to the
	   tallest row by default (grid's own align-items:stretch), but that only
	   grows THIS element's box — a block child's height still just tracks
	   its own content unless told to fill it, so a two-line label (e.g.
	   "Medical / Dental / Med Spa") made its own card taller while every
	   one-line-label sibling in the same row stayed shorter, uneven side by
	   side. */
	height: 100%;
	/* A grid item's "automatic minimum width" defaults to its content's own
	   min-content size (not 0) — without this override, one long unbroken
	   word/line anywhere inside a card (a What's Included bullet, a long
	   option label) could refuse to shrink to the column's actual width,
	   widening the card past its grid-column and, in turn, the row/page.
	   minmax(0, 1fr) on the track (see .lse-grid-N rules) only fixes half
	   of this — the ITEM placed in that track also needs permission to
	   shrink below its content's natural width so text wraps instead. */
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.lse-option-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* "Number Input" option (see step-db-custom.php's $lse_opt_is_number branch)
   — the real radio/checkbox above stays invisible via the blanket rule above
   (it's just the selection carrier), but this SEPARATE, visibly-styled
   number field needs to override that same descendant selector back to a
   normal, usable input. */
.lse-option-card input.lse-card-number-input {
	position: static;
	opacity: 1;
	pointer-events: auto;
	box-sizing: border-box;
	width: 64px;
	flex: 0 0 auto;
	text-align: center;
	border: 1px solid var(--lse-card-border);
	border-radius: var(--lse-radius);
	padding: 6px 8px;
	font: inherit;
	font-size: 0.9em;
	color: inherit;
	background: var(--lse-card-bg, #fff);
}

/* Deliberately does NOT set its own flex-direction/height — every card
   style (default grid, List, Segmented, Collapsible Pills — see their own
   .lse-card-content overrides further down this file) already gives
   .lse-card-content a row layout matched to its sibling cards' natural
   height. Forcing a stacked column here fought those rules' specificity
   inconsistently per style and made this one card taller than its
   siblings. Just flow inline instead, same row every other card uses. */
.lse-card-content-number {
	justify-content: space-between;
	gap: 8px;
}

.lse-card-content-number .lse-card-label {
	flex: 1 1 auto;
	min-width: 0;
}

.lse-card-number-input-wrap {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 6px;
}

/* Matches the surrounding option label's own font instead of default
   unstyled span text, so "Pages" doesn't stand out as a mismatched badge
   next to the other pills' plain text. */
.lse-card-content-number .lse-unit-label {
	font-size: var(--lse-fs-option, 16px);
	color: var(--lse-option-title-color, var(--lse-text));
	white-space: nowrap;
}

.lse-card-content {
	border: 1px solid var(--lse-card-border);
	border-radius: var(--lse-radius);
	padding: var(--lse-card-padding, 24px 16px);
	margin: var(--lse-card-margin, 0);
	display: flex;
	align-items: center;
	transition: all var(--lse-transition-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
	background: var(--lse-card-bg);
	/* Same layered composition .lse-estimator-container uses for the page
	   background (overlay, then gradient, then image — each defaults to a
	   no-op so leaving any of them blank doesn't affect the others). */
	background-image:
		linear-gradient(var(--lse-card-bg-overlay-color, transparent), var(--lse-card-bg-overlay-color, transparent)),
		var(--lse-card-bg-gradient, none),
		url(var(--lse-card-bg-image, ''));
	background-size: cover;
	background-position: center;
	opacity: calc(var(--lse-card-bg-opacity, 100) / 100);
	box-shadow: var(--lse-card-shadow, none);
	height: 100%;
	flex: 1 1 auto;
	box-sizing: border-box;
}

/* Hover state: beautiful soft purple border and subtle shadow.
   Falls back to the card's own opaque background (not a near-0-alpha tint)
   — a translucent fallback here lets whatever sits behind the card (e.g. a
   dark page background) bleed through and wash out the label/description
   text; border-color/box-shadow/lift already carry the hover feedback.

   box-shadow + lift live on .lse-option-card itself (the shared <label>
   wrapping .lse-card-content AND .lse-whats-included-slot as siblings —
   see step-db-custom.php) rather than on .lse-card-content alone, so a
   card with an expanded What's Included list lifts/glows as ONE complete
   shape instead of just its top portion. :focus-within mirrors :hover for
   keyboard users, matching the WI group's own focusin/focusout handling
   in frontend.js/chat.js. border-color/background stay local to each
   sibling box (see the matching .lse-whats-included-slot rule below) since
   each still draws its own segment of the card's border. */
.lse-option-card:hover,
.lse-option-card:focus-within {
	box-shadow: var(--lse-card-hover-shadow, 0 8px 20px rgba(99, 102, 241, 0.08));
	transform: translateY(calc(-1 * var(--lse-card-hover-lift, 2px)));
}
.lse-option-card:hover .lse-card-content,
.lse-option-card:focus-within .lse-card-content {
	border-color: var(--lse-card-hover-border, #a5b4fc);
	background: var(--lse-card-hover-bg, var(--lse-card-bg));
}

/* Icon scale transition on card hover */
.lse-option-card:hover .lse-card-content .lse-card-icon {
	transform: scale(1.08);
}

/* Change icon color/background slightly on hover if not checked */
/* Every input:(not-)checked selector targeting .lse-card-content in this
   file uses "~" (general sibling), not "+" (adjacent sibling). An option
   with badge_text set renders .lse-card-badge-wrap between <input> and
   .lse-card-content (see step-db-custom.php) — with "+", which requires
   .lse-card-content to be the immediate next sibling, that single extra div
   silently broke selected/hover styling (icon color, card border/background,
   label color, checkbox indicator, segmented pill state) for ANY option that
   also had a badge, with no error, just no effect. "~" matches regardless of
   what else sits in between. */
.lse-option-card input:not(:checked)~.lse-card-content:hover .lse-card-icon {
	color: var(--lse-card-icon-hover-color, var(--lse-primary));
	background: var(--lse-card-icon-hover-bg, var(--lse-card-icon-bg, #f1f5f9));
}

.lse-option-card input:checked~.lse-card-content {
	border-color: var(--lse-primary);
	/* --lse-card-selected-bg (an explicit "Selected Background" override)
	   takes priority when set; otherwise falls back to the existing
	   --lse-card-selected tint, unchanged for anyone already relying on
	   it — purely additive, not a behavior change. */
	background: var(--lse-card-selected-bg, var(--lse-card-selected));
	box-shadow: 0 0 0 1px var(--lse-primary);
}

.lse-option-card input:checked~.lse-card-content .lse-card-label {
	color: var(--lse-card-selected-text, inherit);
}

/* ---------- "Expand Child Questions Inside Option" ----------
   An option flagged expand_children_inline (Form Builder → option's
   Advanced tab) gets a .lse-inline-children-slot as the LAST child of its
   own .lse-option-card (see step-db-custom.php) — the option card itself
   IS the expanded container, not a separate box underneath it. Gated on
   the native :checked state via a general sibling selector, same pattern
   .lse-card-content's own selected styling already uses just above,
   rather than a JS-toggled class — reacts instantly and can never drift
   out of sync with the actual selection. The embedded child question(s)
   inside this slot are each their own unchanged [data-condition-field]
   block (see the rule further down this file) — their own max-height
   reveal already fires the moment this option's input becomes :checked
   (that's the exact same condition their "Show Only If" already
   evaluates), so this slot only needs to stop clipping/hiding them; it
   doesn't independently manage their content's own visibility. */
.lse-option-card-expandable {
	/* .lse-option-card's height:100% (for equal-height grid rows) would
	   otherwise clip an expanded slot's content to the row's pre-expansion
	   height — auto lets THIS card (and, by CSS Grid's own row-sizing, its
	   row) grow to fit the newly revealed questions instead. */
	height: auto;
}
.lse-option-card-expandable .lse-card-content {
	height: auto;
}
.lse-inline-children-slot {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.4s ease;
}
.lse-option-card input:checked ~ .lse-inline-children-slot {
	/* Generous ceiling — same reasoning as [data-condition-field]'s own
	   900px cap just below in this file: never the slot's real final
	   height, just an upper bound the transition animates toward, large
	   enough for a full nested question journey (Strategy Areas → its own
	   embedded follow-ups → a quantity field, etc.). */
	max-height: 2400px;
	opacity: 1;
	margin-top: 16px;
}
.lse-inline-children-divider {
	height: 1px;
	background: var(--lse-card-border);
	margin-bottom: 16px;
}
.lse-inline-children-body {
	display: flex;
	flex-direction: column;
	gap: var(--lse-field-spacing, 16px);
	/* The embedded questions keep their own normal (block/card-grid)
	   layout entirely — this only stacks separate QUESTIONS vertically,
	   same as the plain step body already does between fields. */
	text-align: left;
}
.lse-inline-children-body .lse-section-title {
	margin-top: 0;
}
/* .lse-inline-children-body's own flex `gap` is the sole source of spacing
   between embedded questions — same reasoning/pattern as the existing
   .lse-collapse-body-inner>.lse-field-block rule just above in this file
   (both nest a field-block one level deeper than its normal .lse-step
   position), so a field's own default margin-bottom doesn't ALSO stack
   on top of the gap and roughly double it. */
.lse-inline-children-body > .lse-field-block,
/* A device-restricted child (its trigger's "Expand Child Questions"
   Desktop/Tablet/Mobile checkboxes aren't all checked) is one level
   deeper — wrapped in .lse-embed-child-wrap so frontend.js/chat.js can
   find and move it back to its own normal position on an excluded
   viewport (see step-db-custom.php). Same margin fix, just reaching one
   level further in for that case. */
.lse-inline-children-body > .lse-embed-child-wrap > .lse-field-block {
	margin-bottom: 0 !important;
}
@media (max-width: 782px) {
	.lse-inline-children-body {
		gap: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lse-inline-children-slot {
		transition: none;
	}
}

/* ---------- "Expand Child Questions" — Floating Overlay variant ----------
   Edit Option → Advanced Settings → Display Style: Floating Overlay. Same
   embedded-question content as the Inline variant above (.lse-inline-
   children-body, unchanged either way), but rendered inside a native
   <dialog> shown via .showModal() (initFloatingChildPickers() in
   frontend.js/chat.js) instead of a plain position:fixed div. A <dialog>
   shown modally renders in the browser's top layer, which is positioned
   relative to the viewport unconditionally — immune to whatever transform/
   filter/perspective/contain/will-change an ancestor (theme wrapper, page
   builder container, sticky-header script, etc.) might set. A plain
   position:fixed div nested deep in the options grid is NOT immune to
   that, and on a real page with such an ancestor rendered as a small box
   trapped inside its own option card instead of a full-viewport overlay.
   .lse-inline-children-slot itself becomes a non-rendered wrapper here —
   display:contents drops it out of the box model entirely, so it can't
   inherit the Inline variant's max-height/opacity/margin-top transition
   rules above (which target the same base class) either. */
.lse-inline-children-slot.lse-floating-mode {
	display: contents;
}

.lse-floating-picker-dialog {
	position: fixed;
	inset: 0;
	margin: auto;
	border: none;
	padding: 0;
	max-width: 600px;
	width: calc(100% - 40px);
	max-height: 85vh;
	border-radius: var(--lse-radius, 12px);
	background: var(--lse-card-bg, #ffffff);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

.lse-floating-picker-dialog::backdrop {
	background: rgba(15, 23, 42, 0.55);
}

.lse-floating-picker-panel {
	max-height: 85vh;
	overflow-y: auto;
	padding: 24px;
	box-sizing: border-box;
	text-align: left;
}

/* The panel's own shadow/rounded corners already separate it from the
   backdrop — the plain divider line the Inline variant relies on (to
   separate the embedded content from the option card above it) would be a
   redundant stray line at the panel's own top edge here. */
.lse-floating-mode .lse-inline-children-divider {
	display: none;
}

.lse-floating-picker-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--lse-card-border);
}

/* Cancel/Done deliberately do NOT carry the real .lse-btn/.lse-btn-back/
   .lse-btn-next CLASSES — those are wired up elsewhere in frontend.js/
   chat.js via plain document.querySelectorAll('.lse-btn-next' / '.lse-btn-
   back') (bindEvents(), updateUI(), the footer's step-navigation/disabled-
   state logic), which assume there is exactly ONE such pair on the page:
   the real step footer's. Reusing those classes here previously made
   Cancel ALSO trigger navigate(-1) (back a step) on click, and both
   buttons ALSO got forced show/hide + relabeled by the same step-footer
   logic that manages the real Back/Next buttons — a real, confirmed bug,
   not a hypothetical.
   Instead, these two rules replicate .lse-btn/.lse-btn-back/.lse-btn-next's
   OWN declarations directly, against the SAME CSS custom properties, so
   the visual result still matches whatever the admin has configured for
   button color/radius/padding/hover/disabled state — just without the
   class names any other JS keys off of. */
.lse-floating-picker-cancel,
.lse-floating-picker-done {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: var(--lse-btn-padding) !important;
	border-radius: var(--lse-btn-radius) !important;
	font-size: var(--lse-fs-button) !important;
	font-weight: var(--lse-fs-button-fw, 600) !important;
	line-height: var(--lse-fs-button-lh, 1.2) !important;
	cursor: pointer;
	transition: all var(--lse-transition-duration, 0.2s);
	font-family: inherit;
}

.lse-floating-picker-cancel {
	background: transparent !important;
	color: var(--lse-btn-back-text, #475569) !important;
	border: 1px solid var(--lse-btn-back-border, #cbd5e1) !important;
}

.lse-floating-picker-cancel:hover {
	background: var(--lse-btn-back-bg-hover, var(--lse-bg)) !important;
	color: var(--lse-btn-back-text-hover, #0f172a) !important;
	border-color: var(--lse-btn-back-border-hover, #94a3b8) !important;
}

.lse-floating-picker-done {
	background: var(--lse-btn-bg) !important;
	color: var(--lse-btn-text) !important;
	border: 1px solid var(--lse-btn-border, transparent) !important;
	box-shadow: var(--lse-btn-shadow, none) !important;
}

.lse-floating-picker-done:hover {
	background: var(--lse-btn-bg-hover) !important;
}

.lse-floating-picker-done:disabled {
	background: var(--lse-btn-bg-disabled, #a5b4fc) !important;
	color: var(--lse-btn-text-disabled, #ffffff) !important;
	border-color: var(--lse-btn-border-disabled, transparent) !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
}

/* The embedded child question's own options already show a checked state
   baked right into the pill (e.g. Collapsible Pill Picker's "✓ Label" via
   .lse-card-label::before) — the plain round .lse-checkbox-indicator bubble
   most other card styles also render is redundant on top of that here,
   showing up as a second stray checkmark circle overlapping the pill's own
   edge. Scoped to just this dialog so every OTHER option elsewhere (which
   may rely on that indicator being its ONLY checked-state cue) is unaffected. */
.lse-floating-picker-dialog .lse-checkbox-indicator {
	display: none;
}

/* Disabled until at least one embedded question has an answer (see
   initFloatingChildPickers()'s updateFloatingPickerDoneState()) — the
   .lse-btn-next base class this button also carries already has its own
   real, admin-configurable disabled state (`--lse-btn-bg-disabled` etc.,
   !important, so it wins here same as everywhere else), nothing extra to
   add. */

/* Corner summary badge — "N of Total" + a pencil/edit icon, shown on the
   option card itself once it's checked, so the answered-count from inside
   the dialog stays visible without reopening it. Kept as a sibling of the
   input WITHIN the label (unlike the dialog itself, deliberately moved
   outside — see step-db-custom.php), so the plain :checked ~ visibility
   toggle below still applies; clicking it re-opens the same dialog for
   editing (initFloatingChildPickers() in frontend.js/chat.js). */
.lse-floating-picker-summary {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	align-items: center;
	gap: 6px;
	background: var(--lse-card-bg, #ffffff);
	border: 1px solid var(--lse-card-border);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--lse-text);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	z-index: 2;
}

.lse-option-card input:checked ~ .lse-floating-picker-summary {
	display: flex;
}

/* Shares the same top-right corner as the promo .lse-card-badge-wrap
   ("Most Popular" etc.) — drop below it instead of overlapping, on the
   rare option that has both a badge_text AND embedded floating children. */
.lse-card-badge-wrap ~ .lse-floating-picker-summary {
	top: 40px;
}

.lse-floating-picker-summary-edit {
	display: inline-flex;
	color: var(--lse-primary, #6366f1);
}

.lse-floating-picker-summary-edit svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 640px) {
	.lse-floating-picker-dialog {
		width: calc(100% - 24px);
		max-height: 90vh;
	}
	.lse-floating-picker-panel {
		max-height: 90vh;
	}
}

/* ---------- "What's Included" — GROUP comparison expansion ----------
    Distinct from the tooltip (.lse-card-info-btn/.lse-tooltip-content
    just above): a structured feature list revealed by growing option
    cards, not a popup. This is a GROUP experience, not a per-card one —
    hovering/focusing ANY option with What's Included in a question's
    option group expands EVERY eligible option in that SAME group
    together, so the visitor can compare them side by side (see the
    .lse-wi-group-active rules below). The trigger is JS (initialized
    once in frontend.js/chat.js — mouseenter/mouseleave + focusin/focusout
    on desktop), toggling ONE class on the shared .lse-options-grid
    ancestor; the actual expand/collapse ANIMATION stays pure CSS
    (max-height/opacity transition), and .lse-options-grid-top-align
    (below) doubles as the "this grid has at least one What's Included
    option" marker both CSS and JS key off of.

    Mobile (max-width: 782px): What's Included is always expanded
    via the rule below — no IntersectionObserver or viewport detection. */
/* display:flex column here (the label itself, not its children) is what
   lets a WHATS-INCLUDED card absorb equal-height grid stretch gracefully:
   when this card is shorter than a taller sibling in the same row (its
   own list has fewer items, or a sibling's is expanded and this one
   isn't), grid still stretches this LABEL to match — but as a flex
   column, .lse-whats-included-slot (flex:1 below) is what grows to fill
   that extra height, not .lse-card-content (flex:0 0 auto — the icon and
   label never shift), and the slot's own content is vertically centered
   within whatever extra room it ends up with (see below) so the leftover
   space reads as intentional breathing room instead of a dead zone stuck
   at the bottom. */
.lse-option-card-whats-included {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.lse-option-card-whats-included .lse-card-content {
	height: auto;
	flex: 0 0 auto;
	justify-content: flex-start;
}
/* .lse-options-grid-top-align is added to an .lse-options-grid whenever at
   least one of its options has a real What's Included list (see
   step-db-custom.php) — it's kept purely as the selector JS uses to find
   which grids need group hover/focus/viewport wiring (setupWhatsIncluded
   Group() in frontend.js/chat.js). It intentionally carries NO CSS of its
   own anymore: an earlier version used it to turn off this grid's normal
   equal-height stretch (`align-items: start`) so an expanding card
   wouldn't drag its siblings up to match — but that meant EVERY card in
   the group, not just the expanding one, permanently lost equal-height
   the moment What's Included was configured on any option, in every
   state (idle, hovered, AND selected) — a badge ribbon or a longer
   description alone was enough to make the row look uneven even with
   nothing expanded. Equal-height stretch (the plugin's default for every
   other option grid) now applies here unconditionally too — the
   trade-off is that when a card's What's Included list does expand, its
   siblings stretch to match its new height too (extra blank space at
   their bottom) instead of staying compact next to it. */

.lse-whats-included-slot {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	max-width: 100%;
	box-sizing: border-box;
	/* flex:1 (only meaningful once .lse-option-card-whats-included, the
	   label, is a flex column — see its own rule above) is what lets this
	   slot claim any extra height equal-height grid stretch gives the
	   card beyond its own natural content, instead of that extra height
	   silently going to .lse-card-content (which is pinned to flex:0 0
	   auto) or overflowing the label. justify-content:flex-start (the
	   default, stated explicitly here) keeps the checklist itself top-
	   aligned right under the divider — an earlier version centered it
	   vertically within the extra space instead, but that visibly
	   detached the divider from the description above it on any card
	   shorter than its stretched siblings, which read worse than just
	   leaving the leftover space at the bottom. */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1 1 auto;
	transition: max-height 0.3s ease-in-out, opacity 0.28s ease-in-out, margin-top 0.3s ease-in-out, padding 0.3s ease-in-out;
	/* .lse-card-content (a SIBLING, not a parent) carries the card's own
	   visible border/background/radius — this slot mirrors just enough of
	   that (matching side/bottom border + background + bottom radius,
	   left/right padding matching .lse-card-content's own) that the two
	   boxes read as ONE continuous card frame instead of a bordered card
	   with unrelated content floating below it. Only applied while this
	   option actually has something to expand (.lse-option-card-whats-included/
	   -expandable) — every other option's card is completely unaffected. */
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
	border-radius: 0 0 var(--lse-radius) var(--lse-radius);
}
/* Mobile (max-width: 782px): What's Included is always
    expanded — no IntersectionObserver, no viewport detection,
    no auto-expand/collapse while scrolling. This is purely
    informational and must not select options, change pricing,
    trigger validation, or fire answer events. */
@media (max-width: 782px) {
	.lse-option-card-whats-included .lse-whats-included-slot {
		max-height: 900px;
		opacity: 1;
		margin-top: -1px;
		padding: 16px var(--lse-card-padding-x, 18px) 16px;
		border-top: 1px solid var(--lse-card-border);
		border-left: 1px solid var(--lse-card-border);
		border-right: 1px solid var(--lse-card-border);
		border-bottom: 1px solid var(--lse-card-border);
		background: var(--lse-card-bg);
	}
	.lse-option-card-whats-included .lse-card-content {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.lse-option-card-whats-included input:checked ~ .lse-whats-included-slot {
		border-color: var(--lse-primary);
		background: var(--lse-card-selected-bg, var(--lse-card-selected));
		box-shadow: 0 0 0 1px var(--lse-primary);
	}
}
/* GROUP-level trigger: .lse-wi-group-active is toggled on the whole
    .lse-options-grid (not any individual card) by JS — mouseenter/
    mouseleave + focusin/focusout on desktop (see initWhatsIncludedGroups()
    in frontend.js/chat.js). Because the trigger lives on a COMMON ANCESTOR
    rather than each card's own :hover, every eligible card inside that
    grid expands/collapses together as one coordinated region, and moving
    the pointer between sibling cards (even across the grid gap, which
    belongs to no card) never registers as "left the group" — the
    pointer only truly leaves once it exits the grid's own box, which is
    exactly what mouseenter/mouseleave (non-bubbling) on the grid element
    itself already guarantees with zero risk of the flicker a pure
    per-card :hover would have at every gap crossing. */
/* .lse-wi-card-active was the per-card mobile expansion class
    used by the now-removed IntersectionObserver logic. It is
    retained in the selectors below for backward compatibility
    with any saved HTML that still carries the class, but is
    no longer toggled by JS. */
.lse-options-grid.lse-wi-group-active .lse-option-card-whats-included .lse-whats-included-slot,
.lse-option-card-whats-included.lse-wi-card-active .lse-whats-included-slot {
	/* Generous ceiling, same reasoning as the other expandable slots in
	   this file — never the real final height, just an upper bound the
	   transition animates toward. */
	max-height: 900px;
	opacity: 1;
	margin-top: -1px; /* sits flush against .lse-card-content's own bottom border creating a clean divider line */
	padding: 16px var(--lse-card-padding-x, 18px) 16px;
	border-top: 1px solid var(--lse-card-border);
	border-left: 1px solid var(--lse-card-border);
	border-right: 1px solid var(--lse-card-border);
	border-bottom: 1px solid var(--lse-card-border);
	background: var(--lse-card-bg);
}
/* Squares off .lse-card-content's bottom corners exactly while its own
   slot is expanded, so the rounded corners move down to the slot's
   bottom edge instead of appearing twice (once mid-card). Border-color-
   only additive rule — .lse-card-content's OWN border declaration
   (width/style/every other property) is untouched. */
.lse-options-grid.lse-wi-group-active .lse-option-card-whats-included .lse-card-content,
.lse-option-card-whats-included.lse-wi-card-active .lse-card-content {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
/* Unified hover/selected border+background across the WHOLE card — mirrors
   .lse-card-content's own hover (line ~559) and :checked (line ~577) rules
   onto this slot too, so an expanded What's Included card reads as one
   continuously-highlighted shape instead of a highlighted top half sitting
   above a plain-bordered bottom half. Nested inside the same
   .lse-options-grid.lse-wi-group-active ancestor chain as the base
   border-color/background rule just above (4 class-selectors deep) so
   these win on specificity regardless of source order, not just by luck of
   appearing later in the file. */
.lse-options-grid.lse-wi-group-active .lse-option-card:hover .lse-whats-included-slot,
.lse-options-grid.lse-wi-group-active .lse-option-card:focus-within .lse-whats-included-slot {
	border-color: var(--lse-card-hover-border, #a5b4fc);
	background: var(--lse-card-hover-bg, var(--lse-card-bg));
}
.lse-options-grid.lse-wi-group-active .lse-option-card-whats-included input:checked ~ .lse-whats-included-slot,
.lse-option-card-whats-included.lse-wi-card-active input:checked ~ .lse-whats-included-slot {
	border-color: var(--lse-primary);
	background: var(--lse-card-selected-bg, var(--lse-card-selected));
	/* Same 1px accent ring .lse-card-content's own :checked rule draws
	   (line ~584) — since both boxes share the same border-color/radius
	   here and sit flush together, two matching rings read as one
	   continuous ring around the full expanded card. */
	box-shadow: 0 0 0 1px var(--lse-primary);
}
/* An option can have BOTH What's Included AND "Expand Child Questions
   Inside Option" configured (see .lse-option-card-expandable above) — once
   THIS option is selected, its own child question(s) should appear IN
   PLACE OF its What's Included list, not stacked below/alongside it. Force
   this card's own .lse-whats-included-slot back to collapsed the moment
   its input becomes :checked, freeing up the exact same visual spot for
   .lse-inline-children-slot's own (unrelated, untouched) input:checked
   reveal rule above. Scoped to only options that actually have BOTH
   classes (i.e. genuinely have children to show instead) — an option with
   only What's Included is completely unaffected, and OTHER sibling cards'
   hover/focus group-compare expansion (desktop) or default mobile
   expansion is untouched since this only ever matches THIS option's own
   :checked input via the sibling combinator. Specificity here (4 classes +
   1 element) already beats both the desktop .lse-wi-group-active rule and
   the mobile always-expanded rule above without needing !important. */
.lse-option-card-whats-included.lse-option-card-expandable input:checked ~ .lse-whats-included-slot {
	max-height: 0;
	opacity: 0;
}
/* Restores .lse-card-content's normal full-rounded bottom corners in this
   same replaced state — matching how an "Expand Child Questions" option
   with no What's Included already looks (its card-content is never
   squared off), since the child slot below carries no seamless-border
   effect of its own to continue into. */
.lse-option-card-whats-included.lse-option-card-expandable input:checked ~ .lse-card-content {
	border-bottom-left-radius: var(--lse-radius);
	border-bottom-right-radius: var(--lse-radius);
}
.lse-whats-included-body {
	padding-bottom: 4px;
	text-align: left;
	min-width: 0;
	max-width: 100%;
}
.lse-whats-included-heading {
	font-size: 13px;
	font-weight: 650;
	color: var(--lse-text-secondary, #64748b);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 11px;
	overflow-wrap: break-word;
}
.lse-whats-included-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
	max-width: 100%;
}
.lse-whats-included-list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 450;
	line-height: 1.45;
	color: var(--lse-text, #334155);
	min-width: 0;
	max-width: 100%;
}
.lse-whats-included-check {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 1;
	/* Inherits the What's Included accent color rather than any
	   hard-coded value — covers both the plain "✓" fallback text and a
	   custom SVG icon (Icon_Library::render() output), which paints with
	   currentColor same as every other option-card icon in this file. */
	color: var(--lse-primary);
	margin-top: 0.15em;
}
/* A custom per-item icon (see step-db-custom.php's
   Icon_Library::render($lse_wi_item['icon'])) carries its own intrinsic
   SVG size — scaled down to the same compact indicator size as the
   default checkmark so a custom icon never dwarfs the bullet text next
   to it or forces the row taller than plain items. */
.lse-whats-included-check svg {
	width: 100%;
	height: 100%;
}
.lse-whats-included-text {
	flex: 1;
	/* Long item text wraps under itself, not under the checkmark. */
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}
@media (max-width: 782px) {
	.lse-whats-included-body {
		padding-bottom: 18px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lse-whats-included-slot {
		transition: none;
	}
	.lse-option-card {
		transition: none;
	}
}

/* Radio Icon Cards (Step 1) & Checkbox Icon Cards (Step 3) */
.lse-radio-card .lse-card-content,
.lse-checkbox-icon-card .lse-card-content {
	flex-direction: column;
	justify-content: flex-start;
	align-items: var(--lse-card-icon-align-items, center);
	/* --lse-card-text-align is a dedicated, independently-controllable
	   var — --lse-card-icon-align stays as the fallback so existing saved
	   designs (which only ever set that one) render identically. */
	text-align: var(--lse-card-text-align, var(--lse-card-icon-align, center));
	padding: var(--lse-card-padding, 24px 16px);
}

/* Grey squircle background for icons in Step 1 and Step 3 */
.lse-radio-card .lse-card-icon,
.lse-checkbox-icon-card .lse-card-icon {
	width: var(--lse-card-icon-size, 44px);
	height: var(--lse-card-icon-size, 44px);
	background: var(--lse-card-icon-bg, #f1f5f9);
	border: 1px solid var(--lse-card-icon-border, transparent);
	border-radius: var(--lse-card-icon-radius, 12px);
	/* Squircle rounded corners matching screenshot */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
	margin-bottom: 16px;
	/* Left/right default to "auto" (centered, unchanged from before this
	   pair existed) — Icon Horizontal Alignment (Left/Center/Right)
	   overrides these via --lse-card-icon-margin-left/-right (translated
	   from the plain word by Shortcode::build_vars_from_style(), same
	   auto-margin technique as Back/Next Button Position). Deliberately
	   NOT align-items: an item with a fixed width AND auto left/right
	   margins always centers itself regardless of the flex container's
	   align-items, which is exactly why that property could never move
	   this icon left/right on its own. */
	margin-left: var(--lse-card-icon-margin-left, auto);
	margin-right: var(--lse-card-icon-margin-right, auto);
	color: var(--lse-card-icon-color, #334155);
	transition: all 0.2s ease;
}

/* Icon_Library::render() hardcodes each glyph's own <svg width="24" height="24">,
   so without this the icon stays pinned at 24px regardless of the box size
   above. Defaults to scaling proportionally with the box (60%), but
   --lse-card-icon-glyph-size lets the glyph itself be sized independently
   of the box — e.g. a big box with a small icon, or vice versa. */
.lse-radio-card .lse-card-icon svg,
.lse-checkbox-icon-card .lse-card-icon svg {
	width: var(--lse-card-icon-glyph-size, 60%);
	height: var(--lse-card-icon-glyph-size, 60%);
}

/* Bare mode (see .lse-icon-bare above) has no visible box to justify the
   glyph sitting at only 60% of it — without a background/border to fill,
   that reserved 40% just reads as unexplained empty space around the icon.
   Filling the whole box here removes that gap; --lse-card-icon-size (Icon
   Box Size) is still the one control for the icon's overall footprint. */
.lse-radio-card .lse-card-icon.lse-icon-bare svg,
.lse-checkbox-icon-card .lse-card-icon.lse-icon-bare svg {
	width: 100%;
	height: 100%;
}

/* Icon container selection behavior - maintains squircle shape */
.lse-option-card input:checked~.lse-card-content .lse-card-icon {
	background: var(--lse-primary) !important;
	color: #ffffff !important;
}

/* "Remove Icon Box" (Visual Design Builder → Options → Icon Container) —
   strips the background/border/radius chrome so only the bare glyph shows.
   Width/height are deliberately left alone: Icon_Library::render()'s <svg>
   is sized as a % of THIS element (see --lse-card-icon-glyph-size below),
   so collapsing the box's own dimensions would collapse the glyph with it —
   the box stays as an invisible, correctly-sized centering container. */
.lse-card-icon.lse-icon-bare {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}
.lse-option-card input:not(:checked)~.lse-card-content:hover .lse-card-icon.lse-icon-bare {
	background: transparent !important;
}
.lse-option-card input:checked~.lse-card-content .lse-card-icon.lse-icon-bare {
	background: transparent !important;
	color: var(--lse-primary) !important;
}

/* Position relative on content to support absolute badge positioning */
.lse-option-card .lse-card-content {
	position: relative;
}

/* Add checkmark badge on selected multi-selection icon cards only */
.lse-checkbox-icon-card input:checked~.lse-card-content::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 18px;
	height: 18px;
	background-color: var(--lse-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 10px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lse-card-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.lse-has-info-btn .lse-card-text {
	padding-right: calc(var(--lse-tooltip-btn-size, 18px) + 8px);
}

/* The padding-right above makes room for the absolutely-positioned info
   button next to a LEFT-aligned label (the plain list-style checkbox card).
   Radio/checkbox icon cards center their text instead, so that same
   right-only padding just drags the centered label/description off-center
   to the left — the info button already sits clear of them in the card's
   top-right corner, so no reserved space is needed here. */
.lse-radio-card.lse-has-info-btn .lse-card-text,
.lse-checkbox-icon-card.lse-has-info-btn .lse-card-text {
	padding-right: 0;
}

.lse-card-label {
	/* Design_Settings' fs_option_fw default is 600 (Option Title Weight) —
	   this fallback read 400, so a brand-new, never-customized estimator's
	   card titles rendered at body-text weight instead of a bold label,
	   same class of stale-fallback bug Phase 2 fixed for :root. */
	font-weight: var(--lse-fs-option-fw, 600);
	font-size: var(--lse-fs-option, 16px);
	line-height: var(--lse-fs-option-lh, 1.5);
	color: var(--lse-option-title-color, var(--lse-text));
}

.lse-card-description {
	font-weight: 400;
	font-size: var(--lse-fs-option-desc, var(--lse-fs-body, 13px));
	line-height: var(--lse-fs-option-desc-lh, var(--lse-body-lh, 1.4));
	color: var(--lse-option-desc-color, var(--lse-text-muted));
}

.lse-card-price-wrap {
	display: block;
}

.lse-card-price {
	font-size: var(--lse-fs-option-price, 14px);
	font-weight: var(--lse-fs-option-price-fw, 600);
	color: var(--lse-option-price-color, var(--lse-primary));
}

/* Corner ribbon badge (e.g. "Popular", "Best Value") — .lse-option-card is
   already `position:relative` (see its base rule), so this just pins to the
   card's own corner without needing any change there. */
.lse-card-badge-wrap {
	position: absolute;
	top: var(--lse-card-badge-offset, 10px);
	right: var(--lse-card-badge-offset, 10px);
	z-index: 2;
}

.lse-card-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--lse-card-badge-radius, 999px);
	font-size: var(--lse-fs-card-badge, 11px);
	font-weight: var(--lse-fs-card-badge-fw, 700);
	white-space: nowrap;
	background: var(--lse-card-badge-bg, #6366f1);
	color: var(--lse-card-badge-text, #ffffff);
}

/* Header/"notch" badge style (Edit Option → Badge Style) — an alternative
   to the corner ribbon above: a small pill-shaped tag notched into the
   TOP-CENTER of the card, instead of a small corner tag or a full-width
   bar. Earlier versions of this both had real bugs: a normal-flow
   full-width bar added its own height ON TOP OF a full normal-height card
   (forcing equal-height stretch to grow every sibling in the row too —
   see [[project_whats_included_equal_height_bug]]); an absolute
   full-width overlay fixed that but covered the card's own top-left icon
   and top-right info button ("!" tooltip, .lse-card-info-btn); floating
   it OUTSIDE the card entirely (bottom:100%) cleared both of those but
   then got clipped/warped by an ancestor's overflow on the real site,
   and visually reads as detached from the card rather than "in" it.
   Centered + narrow (width:auto, not full-width) INSIDE the card's own
   top padding is what actually keeps it clear of the icon/info button
   regardless of Icon Horizontal Alignment (they're at the far left/right;
   this sits in the middle) without needing to leave the card's box at
   all — .lse-card-content's padding-top (bumped below) reserves just
   enough room below it. */
.lse-card-badge-wrap.lse-badge-style-header {
	position: absolute;
	top: 10px;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: auto;
	z-index: 2;
}

.lse-card-badge-wrap.lse-badge-style-header .lse-card-badge {
	display: inline-flex;
	width: auto;
	white-space: nowrap;
	box-sizing: border-box;
	text-align: center;
	padding: 5px 16px;
	border-radius: var(--lse-card-badge-radius, 999px);
	/* "Matching background of current feel" — the theme's own primary/
	   secondary brand colors (already set by Global Colors/Brand Settings),
	   not a fixed hardcoded color, so this always matches whatever palette
	   the estimator is using. */
	background: var(--lse-card-badge-header-bg, linear-gradient(135deg, var(--lse-primary, #6366f1), var(--lse-secondary, #8b5cf6)));
	color: var(--lse-card-badge-text, #ffffff);
	font-size: var(--lse-fs-card-badge, 11px);
	font-weight: var(--lse-fs-card-badge-fw, 700);
	letter-spacing: 0.3px;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* A shine sweep that periodically crosses the header bar (sweeps once,
   then pauses, rather than scrolling nonstop) — a common, subtle way to
   draw the eye to a "Recommended"-style header without being distracting.
   Skipped entirely for reduced-motion users. */
.lse-card-badge-wrap.lse-badge-style-header .lse-card-badge::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-20deg);
	animation: lse-badge-header-shine 3.2s ease-in-out infinite;
}

@keyframes lse-badge-header-shine {
	0% { left: -60%; }
	35% { left: 130%; }
	100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
	.lse-card-badge-wrap.lse-badge-style-header .lse-card-badge::after {
		animation: none;
		display: none;
	}
}

/* No compensating top padding on .lse-card-content: the notch badge is
   centered (icon and info button sit at the far left/right, per their own
   rules elsewhere) so their horizontal zones never actually overlap even
   though they occupy roughly the same vertical range near the top of the
   card — confirmed against the real rendered layout. An earlier version
   added padding-top here on the (incorrect) assumption they needed
   vertical separation too, which just pushed this card's own icon/label
   lower than its siblings' for no visible benefit. */


.lse-step-description {
	font-weight: 400;
	font-size: var(--lse-fs-body, 13px);
	line-height: var(--lse-body-lh, 1.5);
	color: var(--lse-text-muted);
	margin: 6px 0 0;
}

/* --------------------------------------------------------------------------
   Info Banner (element_type: info_banner)
   -------------------------------------------------------------------------- */
.lse-info-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	/* Solid, same surface color every other card on the page already uses
	   (--lse-card-bg) — not a translucent tint over the page background.
	   .lse-wrapper is deliberately transparent ("blend with theme", see
	   above) so a host page can be anything from white to near-black; a
	   translucent tint is invisible on a dark host and looks unpredictable
	   on a custom one, while --lse-card-bg is guaranteed legible since
	   every option/card element already relies on it. */
	background: var(--lse-banner-bg, var(--lse-card-bg, #fff));
	border: 1px solid var(--lse-banner-border, var(--lse-border, #e2e8f0));
	border-radius: var(--lse-banner-radius, var(--lse-radius, 10px));
}

.lse-info-banner-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	/* Tied to --lse-primary (always defined, unlike the never-set
	   --lse-card-icon-bg) so this reliably reads as a "highlighted" icon
	   chip regardless of theme, instead of a hardcoded light literal that
	   only worked by coincidence on a white background. */
	background: rgba(99, 102, 241, 0.14);
	background: var(--lse-banner-icon-bg, color-mix(in srgb, var(--lse-primary, #6366f1) 14%, transparent));
	color: var(--lse-banner-icon-color, var(--lse-primary));
}

.lse-info-banner-icon svg {
	width: 20px;
	height: 20px;
}

.lse-info-banner-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lse-info-banner-title {
	font-weight: 600;
	font-size: var(--lse-fs-label, 14px);
	color: var(--lse-banner-title-color, var(--lse-text));
}

.lse-info-banner-desc {
	font-size: var(--lse-fs-body, 13px);
	color: var(--lse-banner-desc-color, var(--lse-text-muted));
	line-height: 1.4;
}

/* Every property below is !important — this is a <button>, and many
   themes/page builders ship a global `button { background; border; color;
   box-shadow; }` rule that otherwise wins (same reasoning documented on
   .lse-est-bd-header above — that's the exact bug this matches: a host
   theme's own button color overriding this one instead of the plugin's
   own --lse-primary). */
.lse-info-banner-action {
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font: inherit !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	color: var(--lse-banner-action-color, var(--lse-primary)) !important;
	cursor: pointer;
	white-space: nowrap;
}

.lse-info-banner-action::after {
	content: "\2192";
	display: inline-block;
	transition: transform 0.15s ease;
}

.lse-info-banner-action:hover {
	opacity: 0.8;
	color: var(--lse-banner-action-hover-color, var(--lse-banner-action-color, var(--lse-primary))) !important;
}

.lse-info-banner-action:not(.is-open):hover::after {
	transform: translateX(2px);
}

/* Open state: point the arrow up instead of right (e.g. "Compare all
   packages side by side →" becomes "Hide comparison ˄"). */
.lse-info-banner-action.is-open::after {
	transform: rotate(-90deg);
}

@media (max-width: 500px) {
	.lse-info-banner {
		flex-wrap: wrap;
	}

	.lse-info-banner-action {
		margin-left: 54px;
		flex-basis: 100%;
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   Divider with Text (element_type: divider)
   -------------------------------------------------------------------------- */
.lse-doc-divider-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 24px 0;
}

.lse-doc-divider-line {
	flex-grow: 1;
	height: 1px;
	background-color: var(--lse-border, #cbd5e1);
}

.lse-doc-divider-text {
	font-weight: 700;
	color: var(--lse-text-muted, #64748b);
	font-size: var(--lse-fs-body, 13px);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.lse-doc-divider-text img.lse-element-image {
	height: 22px;
	width: 22px;
	object-fit: cover;
	border-radius: 4px;
	vertical-align: middle;
}

.lse-doc-divider-text .lse-element-icon {
	display: inline-flex;
	align-items: center;
}

/* --------------------------------------------------------------------------
   Collapse mechanism — shared by two producers:
   1. Expand / Collapse Section (element_type: expand_collapse), which wraps
      one other element via wrapped_key.
   2. Any field's own "Hidden by Default" flag, which wraps that SAME
      field's own title+content directly (no separate wrapper element),
      rendered inline inside its own .lse-field-block (see
      step-db-custom.php's $el_hidden_default).
   Both render an identical .lse-collapse > .lse-collapse-body >
   .lse-collapse-body-inner structure and are opened/closed by the exact
   same generic data-lse-collapse-key toggle (initInfoBannerToggle() in
   frontend.js) — same grid-template-rows collapse technique as the Success
   Screen's breakdown accordion (see .lse-est-bd-body further down), proven
   smooth, no-JS-measurement expand/collapse, just toggled by a class.
   -------------------------------------------------------------------------- */
.lse-collapse-body {
	display: grid;
	grid-template-rows: 0fr;
	min-height: 0;
	transition: grid-template-rows 0.3s ease;
}

.lse-collapse-body-inner {
	overflow: hidden;
	min-height: 0;
}

.lse-collapse.lse-collapse-open .lse-collapse-body {
	grid-template-rows: 1fr;
}

/* This field-block has no visible content of its own when closed — normal
   per-field spacing (margin-bottom, from the step's field-spacing setting)
   would otherwise stack on top of the PREVIOUS field's own margin with
   nothing visible in between, leaving a large empty gap. The wrapped
   content (when open) or the next field (when closed) already provides
   its own spacing, so this wrapper needs none of its own. */
.lse-field-block-collapse-host {
	margin-bottom: 0 !important;
}

/* The wrapped element keeps its own complete markup (including its own
   .lse-field-block) unchanged — but nested one level inside the collapse,
   its bottom margin would push it away from the collapse's own edge
   instead of sitting flush inside the card-like content it wraps. */
.lse-collapse-body-inner>.lse-field-block {
	margin-bottom: 0;
}

.lse-collapse[data-animation="fade"] .lse-collapse-body-inner {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.lse-collapse[data-animation="fade"].lse-collapse-open .lse-collapse-body-inner {
	opacity: 1;
	transition-delay: 0.05s;
}

/* --------------------------------------------------------------------------
   Comparison Table (element_type: comparison_table)
   Premium SaaS pricing-table look (Stripe/Linear/Vercel-style): a soft
   white card, generous row spacing, subtle single-line separators instead
   of a heavy grid, row hover, an optional highlighted column, and styled
   badge cells. Only the table itself scrolls horizontally on narrow
   screens — the page never does (same overflow-safety intent as
   .lse-options-grid's minmax(0,1fr) tracks above) — with the Features
   column pinned via `position: sticky` so it stays visible while swiping
   through package columns.
   -------------------------------------------------------------------------- */
.lse-comparison-wrap {
	max-width: 100%;
	overflow: hidden;
	background: var(--lse-comparison-wrap-bg, var(--lse-card-bg, #fff));
	border: 1px solid var(--lse-comparison-wrap-border, var(--lse-border, #e5e7eb));
	border-radius: var(--lse-comparison-wrap-radius, 18px);
	box-shadow: var(--lse-comparison-wrap-shadow, 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06));
	padding: 32px;
	animation: lse-comparison-fadein 250ms ease;
}

@keyframes lse-comparison-fadein {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lse-comparison-wrap {
		animation: none;
	}
}

.lse-comparison-title {
	font-weight: 700;
	font-size: var(--lse-fs-heading, 18px);
	color: var(--lse-text);
	margin-bottom: 20px;
}

.lse-comparison-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

.lse-comparison-mobile {
	display: none;
}

.lse-comparison-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: var(--lse-fs-body, 14px);
}

.lse-comparison-table th,
.lse-comparison-table td {
	padding: 20px;
	text-align: center;
	border-bottom: 1px solid var(--lse-border, #e5e7eb);
	white-space: nowrap;
	vertical-align: middle;
}

.lse-comparison-table th:not(:first-child),
.lse-comparison-table td:not(:first-child) {
	border-left: 1px solid var(--lse-border, #e5e7eb);
}

.lse-comparison-table tbody tr:last-child th,
.lse-comparison-table tbody tr:last-child td {
	border-bottom: none;
}

.lse-comparison-table thead th {
	font-weight: 700;
	color: var(--lse-text);
	vertical-align: top;
	padding-bottom: 20px;
	background: var(--lse-comparison-header-bg, transparent);
}

.lse-comparison-col-title {
	display: block;
	font-size: var(--lse-fs-label, 15px);
}

.lse-comparison-col-subtitle {
	display: block;
	margin-top: 4px;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
	color: var(--lse-text-muted);
}

.lse-comparison-th-content {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-align: left;
}

.lse-comparison-th-text {
	display: flex;
	flex-direction: column;
}

.lse-comparison-row-header-content {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lse-comparison-col-icon,
.lse-comparison-row-icon {
	display: inline-flex;
	color: var(--lse-primary);
	flex-shrink: 0;
}

.lse-comparison-col-icon svg,
.lse-comparison-row-icon svg {
	width: 24px;
	height: 24px;
}

/* Features column — wider, left-aligned, and pinned via sticky positioning
   so it stays on screen while the rest of the table scrolls horizontally
   on narrow viewports (.lse-comparison-scroll is the actual scrolling
   ancestor sticky needs). Own explicit background (matching whichever
   context it's in) so scrolled-under content doesn't show through it. */
.lse-comparison-table .lse-comparison-feature-col {
	text-align: left;
	min-width: 220px;
	font-weight: 600;
	color: var(--lse-text);
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--lse-card-bg, #fff);
}

.lse-comparison-table thead th.lse-comparison-feature-col {
	z-index: 2;
}

.lse-comparison-table tbody tr {
	transition: background-color 0.15s ease;
}

.lse-comparison-table tbody tr:hover,
.lse-comparison-table tbody tr:hover .lse-comparison-feature-col {
	background: var(--lse-comparison-row-hover-bg, var(--lse-bg, #f8fafc));
}

/* Highlighted column ("Highlight this column" in the builder) — soft
   tinted background derived from the theme's own primary color, same
   color-mix() technique used for the Info Banner icon chip. */
.lse-comparison-table [data-highlight="1"] {
	background: rgba(99, 102, 241, 0.05);
	background: color-mix(in srgb, var(--lse-primary, #6366f1) 5%, transparent);
}

.lse-comparison-table thead th[data-highlight="1"] {
	border-radius: 12px 12px 0 0;
}

.lse-comparison-check {
	display: inline-flex;
	color: var(--lse-success-accent, #10b981);
	font-weight: 700;
	font-size: 16px;
}

.lse-comparison-cross {
	display: inline-flex;
	color: var(--lse-comparison-cross-color, var(--lse-danger, #f43f5e));
	font-weight: 700;
	font-size: 16px;
}

.lse-comparison-dash {
	color: var(--lse-text-muted);
}

.lse-comparison-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	background: var(--lse-bg, #f1f5f9);
	color: var(--lse-text-muted);
}

.lse-comparison-badge-advanced {
	background: rgba(99, 102, 241, 0.12);
	background: color-mix(in srgb, var(--lse-primary, #6366f1) 12%, transparent);
	color: var(--lse-primary);
}

.lse-comparison-badge-premium {
	background: rgba(245, 158, 11, 0.14);
	color: #b45309;
}

@media (max-width: 900px) {
	.lse-comparison-wrap {
		padding: 24px;
	}

	.lse-comparison-table th,
	.lse-comparison-table td {
		padding: 16px;
	}
}

@media (max-width: 640px) {
	.lse-comparison-wrap {
		padding: 18px;
		border-radius: 14px;
	}

	.lse-comparison-scroll {
		display: none;
	}

	.lse-comparison-mobile {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.lse-comparison-mobile-card {
		background: var(--lse-card-bg, #ffffff);
		border: 1px solid var(--lse-border, #e2e8f0);
		border-radius: var(--lse-card-radius, 12px);
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.lse-comparison-mobile-card[data-highlight="1"] {
		border-color: var(--lse-primary, #6366f1);
		box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
	}

	.lse-comparison-mobile-card-header {
		padding: 20px;
		background: var(--lse-bg, #f8fafc);
		border-bottom: 1px solid var(--lse-border, #e2e8f0);
		text-align: center;
	}

	.lse-comparison-mobile-card[data-highlight="1"] .lse-comparison-mobile-card-header {
		background: rgba(99, 102, 241, 0.05);
	}

	.lse-comparison-mobile-card-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 12px;
		background: var(--lse-primary, #6366f1);
		color: #fff;
		margin-bottom: 12px;
	}

	.lse-comparison-mobile-card-icon svg {
		width: 24px;
		height: 24px;
	}

	.lse-comparison-mobile-card-title-wrap {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.lse-comparison-mobile-card-title {
		font-size: 18px;
		font-weight: 700;
		color: var(--lse-text, #1e293b);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lse-comparison-mobile-card-subtitle {
		font-size: 13px;
		color: var(--lse-text-muted, #64748b);
	}

	.lse-comparison-mobile-features {
		padding: 12px 20px;
	}

	.lse-comparison-mobile-feature {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid var(--lse-border, #f1f5f9);
	}

	.lse-comparison-mobile-feature:last-child {
		border-bottom: none;
	}

	.lse-comparison-mobile-feature-label {
		font-size: 14px;
		font-weight: 500;
		color: var(--lse-text-muted, #475569);
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.lse-comparison-mobile-feature-icon {
		display: inline-flex;
		color: var(--lse-primary, #6366f1);
	}

	.lse-comparison-mobile-feature-icon svg {
		width: 16px;
		height: 16px;
	}

	.lse-comparison-mobile-feature-val {
		font-size: 14px;
		font-weight: 600;
		color: var(--lse-text, #1e293b);
	}
}

/* --------------------------------------------------------------------------
   Card Group — "List" card layout (opt-in via Card Layout: List). Shows a
   real radio/checkbox indicator and lays icon+title out in a left-aligned
   row with the description below, instead of the default centered/hidden-
   indicator look. Fully scoped under .lse-card-list-{desktop|tablet|mobile}
   so the default .lse-radio-card/.lse-checkbox-card appearance used
   elsewhere is untouched.

   Split into 3 device-scoped copies (rather than one unconditional
   .lse-card-style-list block) because the List layout can be limited to
   just some breakpoints via the field's own "Card Layout" device
   checkboxes (Display & Layout tab) — step-db-custom.php only ever adds
   the modifier class for a device the admin actually checked, so a device
   left unchecked simply never matches any of these 3 selectors and the
   card silently falls back to its normal Centered look there instead. Same
   breakpoints as the plugin's existing Device Visibility utilities
   (desktop: min-width 901px, tablet: 641–900px, mobile: max-width 640px).
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
	.lse-options-grid.lse-card-list-desktop .lse-card-content {
		flex-direction: row;
		align-items: flex-start;
		/* In a row layout, align-items only controls vertical position — the
		   property that actually shifts the icon+text BLOCK left/center/right
		   within a wider card is justify-content (the row's main axis). Reuses
		   Icon Card Content Alignment's raw stored value directly: unlike
		   align-items, justify-content DOES accept the literal words "left"/
		   "right" (CSS Box Alignment Level 3), so no server/JS translation is
		   needed for this half of the same setting. */
		justify-content: var(--lse-card-icon-align, flex-start);
		/* --lse-card-text-align is independently controllable from the block
		   position above — falls back to the legacy combined behavior
		   (following --lse-card-icon-align) when unset, so existing saved
		   designs render identically. */
		text-align: var(--lse-card-text-align, var(--lse-card-icon-align, left));
		gap: 14px;
	}

	.lse-options-grid.lse-card-list-desktop .lse-checkbox-indicator {
		margin: 2px 0 0;
		flex-shrink: 0;
	}

	.lse-options-grid.lse-card-list-desktop .lse-card-icon {
		margin: 0;
		flex-shrink: 0;
	}

	.lse-options-grid.lse-card-list-desktop .lse-card-text {
		align-items: flex-start;
	}

	.lse-options-grid.lse-card-list-desktop .lse-card-label {
		font-size: var(--lse-fs-option, 16px);
	}
}

@media (min-width: 641px) and (max-width: 900px) {
	.lse-options-grid.lse-card-list-tablet .lse-card-content {
		flex-direction: row;
		align-items: flex-start;
		justify-content: var(--lse-card-icon-align, flex-start);
		text-align: var(--lse-card-text-align, var(--lse-card-icon-align, left));
		gap: 14px;
	}

	.lse-options-grid.lse-card-list-tablet .lse-checkbox-indicator {
		margin: 2px 0 0;
		flex-shrink: 0;
	}

	.lse-options-grid.lse-card-list-tablet .lse-card-icon {
		margin: 0;
		flex-shrink: 0;
	}

	.lse-options-grid.lse-card-list-tablet .lse-card-text {
		align-items: flex-start;
	}

	.lse-options-grid.lse-card-list-tablet .lse-card-label {
		font-size: var(--lse-fs-option, 16px);
	}
}

@media (max-width: 640px) {
	.lse-options-grid.lse-card-list-mobile .lse-card-content {
		flex-direction: row;
		align-items: flex-start;
		justify-content: var(--lse-card-icon-align, flex-start);
		text-align: var(--lse-card-text-align, var(--lse-card-icon-align, left));
		gap: 14px;
	}

	.lse-options-grid.lse-card-list-mobile .lse-checkbox-indicator {
		margin: 2px 0 0;
		flex-shrink: 0;
	}

	.lse-options-grid.lse-card-list-mobile .lse-card-icon {
		margin: 0;
		flex-shrink: 0;
	}

	.lse-options-grid.lse-card-list-mobile .lse-card-text {
		align-items: flex-start;
	}

	.lse-options-grid.lse-card-list-mobile .lse-card-label {
		font-size: var(--lse-fs-option, 16px);
	}
}

/* --------------------------------------------------------------------------
   Card Group — "Segmented / Pill Toggle" layout (opt-in via Card Layout:
   Segmented). Turns the options grid into a single compact rounded bar
   (e.g. "No Support / Monthly Check-in / Ongoing Advisory") instead of full
   cards — icon, description and price are hidden since a pill has no room
   for them; selection is shown by the pill's own background/text color, not
   a border. Same device-scoping mechanism as List above (see
   step-db-custom.php's $card_style_devices) — each breakpoint below is a
   fully self-contained copy, exactly like List's 3 blocks, so a device left
   unchecked simply never matches and the field keeps its normal Centered
   look there instead. */
@media (min-width: 901px) {
	.lse-options-grid.lse-card-segmented-desktop {
		display: inline-flex;
		flex-wrap: wrap;
		max-width: 100%;
		background: var(--lse-segmented-bg, #f1f5f9);
		border-radius: var(--lse-segmented-radius, 999px);
		padding: 4px;
		gap: 2px;
	}
	.lse-options-grid.lse-card-segmented-desktop > .lse-option-card {
		height: auto;
		flex: 0 0 auto;
	}
	.lse-options-grid.lse-card-segmented-desktop > .lse-option-card:hover,
	.lse-options-grid.lse-card-segmented-desktop > .lse-option-card:focus-within {
		box-shadow: none;
		transform: none;
	}
	.lse-options-grid.lse-card-segmented-desktop .lse-card-content {
		border: none;
		background: transparent;
		box-shadow: none;
		padding: 8px 18px;
		border-radius: var(--lse-segmented-radius, 999px);
		flex-direction: row;
		justify-content: center;
	}
	.lse-options-grid.lse-card-segmented-desktop .lse-card-icon,
	.lse-options-grid.lse-card-segmented-desktop .lse-checkbox-indicator,
	.lse-options-grid.lse-card-segmented-desktop .lse-card-description,
	.lse-options-grid.lse-card-segmented-desktop .lse-card-price-wrap {
		display: none !important;
	}
	.lse-options-grid.lse-card-segmented-desktop .lse-card-label {
		font-size: var(--lse-fs-option, 14px);
		font-weight: 500;
		color: var(--lse-segmented-text, #64748b);
	}
	.lse-options-grid.lse-card-segmented-desktop .lse-option-card input:checked~.lse-card-content {
		background: var(--lse-segmented-active-bg, #ffffff) !important;
		border: none !important;
		box-shadow: var(--lse-segmented-active-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
	}
	.lse-options-grid.lse-card-segmented-desktop .lse-option-card input:checked~.lse-card-content .lse-card-label {
		color: var(--lse-segmented-active-text, #0f172a);
		font-weight: 600;
	}
}

@media (min-width: 641px) and (max-width: 900px) {
	.lse-options-grid.lse-card-segmented-tablet {
		display: inline-flex;
		flex-wrap: wrap;
		max-width: 100%;
		background: var(--lse-segmented-bg, #f1f5f9);
		border-radius: var(--lse-segmented-radius, 999px);
		padding: 4px;
		gap: 2px;
	}
	.lse-options-grid.lse-card-segmented-tablet > .lse-option-card {
		height: auto;
		flex: 0 0 auto;
	}
	.lse-options-grid.lse-card-segmented-tablet > .lse-option-card:hover,
	.lse-options-grid.lse-card-segmented-tablet > .lse-option-card:focus-within {
		box-shadow: none;
		transform: none;
	}
	.lse-options-grid.lse-card-segmented-tablet .lse-card-content {
		border: none;
		background: transparent;
		box-shadow: none;
		padding: 8px 18px;
		border-radius: var(--lse-segmented-radius, 999px);
		flex-direction: row;
		justify-content: center;
	}
	.lse-options-grid.lse-card-segmented-tablet .lse-card-icon,
	.lse-options-grid.lse-card-segmented-tablet .lse-checkbox-indicator,
	.lse-options-grid.lse-card-segmented-tablet .lse-card-description,
	.lse-options-grid.lse-card-segmented-tablet .lse-card-price-wrap {
		display: none !important;
	}
	.lse-options-grid.lse-card-segmented-tablet .lse-card-label {
		font-size: var(--lse-fs-option, 14px);
		font-weight: 500;
		color: var(--lse-segmented-text, #64748b);
	}
	.lse-options-grid.lse-card-segmented-tablet .lse-option-card input:checked~.lse-card-content {
		background: var(--lse-segmented-active-bg, #ffffff) !important;
		border: none !important;
		box-shadow: var(--lse-segmented-active-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
	}
	.lse-options-grid.lse-card-segmented-tablet .lse-option-card input:checked~.lse-card-content .lse-card-label {
		color: var(--lse-segmented-active-text, #0f172a);
		font-weight: 600;
	}
}

@media (max-width: 640px) {
	.lse-options-grid.lse-card-segmented-mobile {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: var(--lse-segmented-bg, #f1f5f9);
		border-radius: var(--lse-segmented-radius, 999px);
		padding: 4px;
		gap: 2px;
	}
	.lse-options-grid.lse-card-segmented-mobile > .lse-option-card {
		height: auto;
		flex: 1 1 auto;
	}
	.lse-options-grid.lse-card-segmented-mobile > .lse-option-card:hover,
	.lse-options-grid.lse-card-segmented-mobile > .lse-option-card:focus-within {
		box-shadow: none;
		transform: none;
	}
	.lse-options-grid.lse-card-segmented-mobile .lse-card-content {
		border: none;
		background: transparent;
		box-shadow: none;
		padding: 8px 12px;
		border-radius: var(--lse-segmented-radius, 999px);
		flex-direction: row;
		justify-content: center;
	}
	.lse-options-grid.lse-card-segmented-mobile .lse-card-icon,
	.lse-options-grid.lse-card-segmented-mobile .lse-checkbox-indicator,
	.lse-options-grid.lse-card-segmented-mobile .lse-card-description,
	.lse-options-grid.lse-card-segmented-mobile .lse-card-price-wrap {
		display: none !important;
	}
	.lse-options-grid.lse-card-segmented-mobile .lse-card-label {
		font-size: var(--lse-fs-option, 14px);
		font-weight: 500;
		color: var(--lse-segmented-text, #64748b);
	}
	.lse-options-grid.lse-card-segmented-mobile .lse-option-card input:checked~.lse-card-content {
		background: var(--lse-segmented-active-bg, #ffffff) !important;
		border: none !important;
		box-shadow: var(--lse-segmented-active-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
	}
	.lse-options-grid.lse-card-segmented-mobile .lse-option-card input:checked~.lse-card-content .lse-card-label {
		color: var(--lse-segmented-active-text, #0f172a);
		font-weight: 600;
	}
}

/* --------------------------------------------------------------------------
   Card Group — "Collapsible Pill Picker" layout (opt-in via Card Layout:
   Collapsible Pill Picker). Replaces the field's plain <h3> title (see
   step-db-custom.php's title-render condition) with a clickable header
   showing the field's own icon/title, a live "N of M" selection count, and
   an expand/collapse chevron, wrapping the whole options area. Options
   still render through the normal .lse-options-grid/.lse-option-card, just
   restyled as individual pills (own border/background each — unlike
   Segmented's single shared bar) via the same device-scoping mechanism
   List/Segmented use. The live count + expand/collapse click handling live
   in frontend.js/chat.js (initCollapsiblePickers()).
   -------------------------------------------------------------------------- */
.lse-collapsible-picker {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	border: 1px solid var(--lse-card-border) !important;
	border-radius: var(--lse-radius, 12px) !important;
	background: var(--lse-card-bg) !important;
	box-shadow: none !important;
	/* Clips the header button's own square corners (border-radius:0,
	   see below) to this container's rounded shape — without this, the
	   header's sharp top corners would poke out past the rounded outer
	   border at the top-left/top-right. */
	overflow: hidden;
}

/* Every property here is !important, not just the structural ones — a
   theme's own global `button` skin (most themes style EVERY <button> as a
   colored CTA: solid background-color, centered text, its own border/
   radius/box-shadow) was still winning for background/text-align/border
   even after the first round of hardening only covered display/width/flex,
   producing a solid-colored, center-aligned bar instead of this plain,
   left-aligned header. Locking down literally every visual property here
   is the only way to guarantee this never inherits a theme's button
   appearance, regardless of that theme's own specificity/!important usage. */
.lse-collapsible-picker-header {
	all: unset !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-direction: row !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 14px 16px !important;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	font-size: var(--lse-fs-h3, 16px) !important;
	line-height: normal !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: inherit !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: background-color 0.15s ease !important;
}

.lse-collapsible-picker-header:hover,
.lse-collapsible-picker-header:focus-visible {
	background: var(--lse-card-hover-bg, var(--lse-card-bg)) !important;
}

.lse-collapsible-picker-icon {
	flex-shrink: 0 !important;
	width: 20px;
	height: 20px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: var(--lse-primary, #6366f1);
}

.lse-collapsible-picker-icon svg,
.lse-collapsible-picker-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.lse-collapsible-picker-title {
	flex: 1 1 auto !important;
	min-width: 0;
	display: block !important;
	font-weight: 600;
	font-size: var(--lse-fs-h3, 16px);
	color: var(--lse-question-title-color, var(--lse-text));
}

.lse-collapsible-picker-count {
	flex-shrink: 0 !important;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--lse-text-muted);
	background: var(--lse-card-icon-bg, #f1f5f9);
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.lse-collapsible-picker-chevron {
	flex-shrink: 0 !important;
	display: inline-block;
	transition: transform 0.2s ease;
}

.lse-collapsible-picker-header[aria-expanded="false"] .lse-collapsible-picker-chevron {
	transform: rotate(-90deg);
}

.lse-collapsible-picker-body {
	max-height: 3000px;
	opacity: 1;
	overflow: hidden;
	border-top: 1px solid var(--lse-card-border);
	padding: 16px;
	transition: max-height 0.3s ease-in-out, opacity 0.25s ease-in-out, padding 0.3s ease-in-out, border-color 0.2s ease-in-out;
}

.lse-collapsible-picker-header[aria-expanded="false"] + .lse-collapsible-picker-body {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-top-color: transparent;
}

@media (min-width: 901px) {
	.lse-options-grid.lse-card-collapsepills-desktop {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	.lse-options-grid.lse-card-collapsepills-desktop > .lse-option-card {
		height: auto;
		flex: 0 0 auto;
	}
	.lse-options-grid.lse-card-collapsepills-desktop > .lse-option-card:hover,
	.lse-options-grid.lse-card-collapsepills-desktop > .lse-option-card:focus-within {
		box-shadow: none;
		transform: none;
	}
	.lse-options-grid.lse-card-collapsepills-desktop .lse-card-content {
		border: 1px solid var(--lse-card-border);
		background: var(--lse-card-bg);
		box-shadow: none;
		padding: 8px 16px;
		border-radius: 999px;
		flex-direction: row;
		justify-content: center;
	}
	.lse-options-grid.lse-card-collapsepills-desktop .lse-option-card input:not(:checked)~.lse-card-content:hover {
		border-color: var(--lse-card-hover-border, #a5b4fc);
	}
	.lse-options-grid.lse-card-collapsepills-desktop .lse-card-icon,
	.lse-options-grid.lse-card-collapsepills-desktop .lse-checkbox-indicator,
	.lse-options-grid.lse-card-collapsepills-desktop .lse-card-description,
	.lse-options-grid.lse-card-collapsepills-desktop .lse-card-price-wrap,
	/* This pill already gets its own "✓ " baked into the label text (see
	   the input:checked ~ .lse-card-label::before rule below) — the round
	   .lse-checkbox-icon-card corner badge is a SECOND, redundant checkmark
	   that only ever shows up here because collapsepills hides the icon
	   ITSELF (.lse-card-icon above) but never hid this separate badge,
	   overlapping/truncating the pill's own text. */
	.lse-options-grid.lse-card-collapsepills-desktop .lse-checkbox-icon-card input:checked~.lse-card-content::after {
		display: none !important;
	}
	.lse-options-grid.lse-card-collapsepills-desktop .lse-card-label {
		font-size: 13px;
		font-weight: 500;
		color: var(--lse-text-muted);
	}
	/* A Number Input option's own visible <input> otherwise adds enough
	   height (padding + border) to make just THIS pill grow taller than its
	   plain-text siblings — flex-wrap pills each size independently to
	   their own content, they don't share a row height. Shrunk to fit the
	   same compact line the pill's own label text already sits on. */
	.lse-options-grid.lse-card-collapsepills-desktop .lse-card-number-input {
		width: 38px;
		padding: 1px 4px;
		font-size: 12px;
		border-radius: 6px;
	}
	.lse-options-grid.lse-card-collapsepills-desktop .lse-unit-label {
		font-size: 13px;
		font-weight: 500;
		color: var(--lse-text-muted);
	}
	.lse-options-grid.lse-card-collapsepills-desktop .lse-option-card input:checked~.lse-card-content {
		background: var(--lse-primary) !important;
		border-color: var(--lse-primary) !important;
	}
	.lse-options-grid.lse-card-collapsepills-desktop .lse-option-card input:checked~.lse-card-content .lse-card-label,
	.lse-options-grid.lse-card-collapsepills-desktop .lse-option-card input:checked~.lse-card-content .lse-unit-label {
		color: #ffffff;
		font-weight: 600;
	}
	/* Checkbox (multi-select) only — a radio (single-select) question's
	   filled/highlighted pill already makes "this is the one answer"
	   unambiguous on its own; the "✓ " prefix is redundant clutter there. */
	.lse-options-grid.lse-card-collapsepills-desktop .lse-option-card input[type="checkbox"]:checked~.lse-card-content .lse-card-label::before {
		content: '✓ ';
	}
}

@media (min-width: 641px) and (max-width: 900px) {
	.lse-options-grid.lse-card-collapsepills-tablet {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	.lse-options-grid.lse-card-collapsepills-tablet > .lse-option-card {
		height: auto;
		flex: 0 0 auto;
	}
	.lse-options-grid.lse-card-collapsepills-tablet > .lse-option-card:hover,
	.lse-options-grid.lse-card-collapsepills-tablet > .lse-option-card:focus-within {
		box-shadow: none;
		transform: none;
	}
	.lse-options-grid.lse-card-collapsepills-tablet .lse-card-content {
		border: 1px solid var(--lse-card-border);
		background: var(--lse-card-bg);
		box-shadow: none;
		padding: 8px 16px;
		border-radius: 999px;
		flex-direction: row;
		justify-content: center;
	}
	.lse-options-grid.lse-card-collapsepills-tablet .lse-option-card input:not(:checked)~.lse-card-content:hover {
		border-color: var(--lse-card-hover-border, #a5b4fc);
	}
	.lse-options-grid.lse-card-collapsepills-tablet .lse-card-icon,
	.lse-options-grid.lse-card-collapsepills-tablet .lse-checkbox-indicator,
	.lse-options-grid.lse-card-collapsepills-tablet .lse-card-description,
	.lse-options-grid.lse-card-collapsepills-tablet .lse-card-price-wrap,
	.lse-options-grid.lse-card-collapsepills-tablet .lse-checkbox-icon-card input:checked~.lse-card-content::after {
		display: none !important;
	}
	.lse-options-grid.lse-card-collapsepills-tablet .lse-card-label {
		font-size: 13px;
		font-weight: 500;
		color: var(--lse-text-muted);
	}
	.lse-options-grid.lse-card-collapsepills-tablet .lse-card-number-input {
		width: 38px;
		padding: 1px 4px;
		font-size: 12px;
		border-radius: 6px;
	}
	.lse-options-grid.lse-card-collapsepills-tablet .lse-unit-label {
		font-size: 13px;
		font-weight: 500;
		color: var(--lse-text-muted);
	}
	.lse-options-grid.lse-card-collapsepills-tablet .lse-option-card input:checked~.lse-card-content {
		background: var(--lse-primary) !important;
		border-color: var(--lse-primary) !important;
	}
	.lse-options-grid.lse-card-collapsepills-tablet .lse-option-card input:checked~.lse-card-content .lse-card-label,
	.lse-options-grid.lse-card-collapsepills-tablet .lse-option-card input:checked~.lse-card-content .lse-unit-label {
		color: #ffffff;
		font-weight: 600;
	}
	.lse-options-grid.lse-card-collapsepills-tablet .lse-option-card input[type="checkbox"]:checked~.lse-card-content .lse-card-label::before {
		content: '✓ ';
	}
}

@media (max-width: 640px) {
	.lse-options-grid.lse-card-collapsepills-mobile {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.lse-options-grid.lse-card-collapsepills-mobile > .lse-option-card {
		height: auto;
		flex: 0 0 auto;
	}
	.lse-options-grid.lse-card-collapsepills-mobile > .lse-option-card:hover,
	.lse-options-grid.lse-card-collapsepills-mobile > .lse-option-card:focus-within {
		box-shadow: none;
		transform: none;
	}
	.lse-options-grid.lse-card-collapsepills-mobile .lse-card-content {
		border: 1px solid var(--lse-card-border);
		background: var(--lse-card-bg);
		box-shadow: none;
		padding: 7px 14px;
		border-radius: 999px;
		flex-direction: row;
		justify-content: center;
	}
	.lse-options-grid.lse-card-collapsepills-mobile .lse-card-icon,
	.lse-options-grid.lse-card-collapsepills-mobile .lse-checkbox-indicator,
	.lse-options-grid.lse-card-collapsepills-mobile .lse-card-description,
	.lse-options-grid.lse-card-collapsepills-mobile .lse-card-price-wrap,
	.lse-options-grid.lse-card-collapsepills-mobile .lse-checkbox-icon-card input:checked~.lse-card-content::after {
		display: none !important;
	}
	.lse-options-grid.lse-card-collapsepills-mobile .lse-card-label {
		font-size: 13px;
		font-weight: 500;
		color: var(--lse-text-muted);
	}
	.lse-options-grid.lse-card-collapsepills-mobile .lse-card-number-input {
		width: 38px;
		padding: 1px 4px;
		font-size: 12px;
		border-radius: 6px;
	}
	.lse-options-grid.lse-card-collapsepills-mobile .lse-unit-label {
		font-size: 13px;
		font-weight: 500;
		color: var(--lse-text-muted);
	}
	.lse-options-grid.lse-card-collapsepills-mobile .lse-option-card input:checked~.lse-card-content {
		background: var(--lse-primary) !important;
		border-color: var(--lse-primary) !important;
	}
	.lse-options-grid.lse-card-collapsepills-mobile .lse-option-card input:checked~.lse-card-content .lse-card-label,
	.lse-options-grid.lse-card-collapsepills-mobile .lse-option-card input:checked~.lse-card-content .lse-unit-label {
		color: #ffffff;
		font-weight: 600;
	}
	.lse-options-grid.lse-card-collapsepills-mobile .lse-option-card input[type="checkbox"]:checked~.lse-card-content .lse-card-label::before {
		content: '✓ ';
	}
}

/* Checkbox List Cards (Step 2 & dynamic features) */
.lse-checkbox-card .lse-card-content {
	justify-content: flex-start;
	height: 100%;
	flex: 1 1 auto;
}

/* Circular checkboxes! */
.lse-checkbox-indicator {
	width: var(--lse-checkbox-size, 20px);
	height: var(--lse-checkbox-size, 20px);
	border: 1px solid var(--lse-checkbox-border, #cbd5e1);
	background: var(--lse-checkbox-bg, #fff);
	border-radius: 50%;
	margin-right: 16px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	flex-shrink: 0;
	background: #fff;
}

.lse-option-card input:checked~.lse-card-content .lse-checkbox-indicator {
	background: var(--lse-checkbox-checked-bg, var(--lse-accent, var(--lse-primary)));
	border-color: var(--lse-accent, var(--lse-primary));
}

/* The actual checkmark */
.lse-option-card input:checked~.lse-card-content .lse-checkbox-indicator::after {
	content: "";
	width: 4px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	margin-top: -2px;
}

/* Subtext for pricing */
.lse-card-subtext {
	display: block;
	font-size: 13px;
	color: var(--lse-text-muted);
	margin-top: 6px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Footer Nav
   -------------------------------------------------------------------------- */
.lse-footer-nav {
	padding: var(--lse-footer-padding, 24px 32px);
	border-top: 1px solid var(--lse-border);
	border-bottom: 1px solid var(--lse-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--lse-surface);
	position: sticky;
	position: -webkit-sticky;
	bottom: 0;
	z-index: 100;
}

/* Visual Design Builder container wrappers around the Back/Next buttons —
   `display:contents` means the wrapper generates no box of its own, so the
   button inside still behaves as a direct flex child of .lse-footer-nav for
   every existing rule (margin-auto positioning, the final-step collapse
   animation, frontend.js's style.display toggles) with zero change to
   current behavior. Only becomes a real box once an admin actually styles
   it via the Advanced tab (their own explicit `display` value overrides
   this default, same as any CSS override normally would). */
.lse-btn-back-wrap,
.lse-btn-next-wrap {
	display: contents;
}

.lse-footer-actions {
	display: none;
	gap: 12px;
	justify-content: var(--lse-btn-align, center);
	flex-wrap: wrap;
	width: 100%;
}

/* Success Screen calendar: the provider's embed is mounted only after the
   visitor opens the CTA, never as a second inline card below the button. */
.lse-success-calendar-popup {
	width: min(1100px, calc(100vw - 32px));
	height: min(800px, calc(100vh - 32px));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: transparent;
	overflow: visible;
	box-shadow: none;
}

.lse-success-calendar-popup::backdrop {
	background: rgba(15, 23, 42, 0.68);
	backdrop-filter: blur(3px);
}

.lse-success-calendar-popup-panel {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(15, 23, 42, 0.35);
}

.lse-success-calendar-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.78);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.lse-success-calendar-popup-body {
	width: 100%;
	height: 100%;
	overflow: auto;
	background: #fff;
}

.lse-success-calendar-popup-body > * {
	max-width: 100%;
}

.lse-success-calendar-popup-body iframe {
	display: block;
	width: 100%;
	min-height: 640px;
	border: 0;
}

/* On the success screen only "Book a Free Strategy Session" / "Download
   PDF" (.lse-footer-actions) should show — Back/Next never should. .lse-btn
   below forces `display: inline-flex !important` on every button sharing
   that class (needed so theme resets can't hide/reshape them elsewhere),
   which also silently wins over updateUI()'s plain (non-!important) inline
   `style.display = 'none'`, so Back/"Send My Estimate" stayed visible on
   top of the success actions. A class selector beats that on specificity
   even between two !important rules, so this reliably wins instead. */
.lse-footer-nav.lse-success-active .lse-btn-back,
.lse-footer-nav.lse-success-active .lse-btn-next {
	display: none !important;
}

/* !important throughout this file's button/pill rules — many themes ship a
   global `[type=button], button { background; border; border-radius;
   color; }` reset (equal-or-tied specificity to a single class selector)
   that otherwise wins depending on stylesheet load order, silently
   overriding every Design & Style Settings color/shape choice. */
.lse-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: var(--lse-btn-content-align, center) !important;
	gap: 8px !important;
	padding: var(--lse-btn-padding) !important;
	margin: var(--lse-btn-margin) !important;
	width: var(--lse-btn-width, auto);
	height: var(--lse-btn-height, auto);
	border-radius: var(--lse-btn-radius) !important;
	font-size: var(--lse-fs-button) !important;
	font-weight: var(--lse-fs-button-fw, 600) !important;
	line-height: var(--lse-fs-button-lh, 1.2) !important;
	cursor: pointer;
	border: none !important;
	transition: all var(--lse-transition-duration, 0.2s);
}

.lse-btn-next {
	background: var(--lse-btn-bg) !important;
	color: var(--lse-btn-text) !important;
	/* Border Color defaults to transparent, same visual result as the
	   previous hardcoded `border:none` when left unset, but now lets the
	   admin's Border Color setting actually take effect when configured. */
	border: 1px solid var(--lse-btn-border, transparent) !important;
	box-shadow: var(--lse-btn-shadow, none) !important;
	/* !important: .lse-btn above sets `margin: var(--lse-btn-margin) !important`
	   (a shorthand, default 0) which otherwise silently cancels this
	   longhand and leaves Next sitting at the flex start whenever Back is
	   hidden (step 1, and the success screen before .lse-success-active
	   hides Next too) instead of pinned to the right. Default fallbacks
	   (auto/0) exactly reproduce the previous hardcoded "always pinned
	   right" behavior; Next Button Position overrides them. */
	margin-left: var(--lse-btn-next-margin-left, auto) !important;
	margin-right: var(--lse-btn-next-margin-right, 0) !important;
}

.lse-btn-next:hover {
	background: var(--lse-btn-bg-hover) !important;
	transform: translateY(calc(-1 * var(--lse-btn-hover-lift, 2px)));
	box-shadow: var(--lse-btn-hover-shadow, 0 4px 12px rgba(99, 102, 241, 0.4)) !important;
}

.lse-btn-next:active {
	background: var(--lse-btn-bg-active) !important;
}

.lse-btn-back {
	background: transparent !important;
	color: var(--lse-btn-back-text, #475569) !important;
	border: 1px solid var(--lse-btn-back-border, #cbd5e1) !important;
	/* Default fallbacks (0/0) reproduce the previous behavior — no margin
	   trick, sitting at the flex row's natural start (left) — Back Button
	   Position overrides them. Same !important reasoning as .lse-btn-next
	   above (.lse-btn's shorthand margin would otherwise cancel these). */
	margin-left: var(--lse-btn-back-margin-left, 0) !important;
	margin-right: var(--lse-btn-back-margin-right, 0) !important;
}

.lse-btn-back:hover {
	background: var(--lse-btn-back-bg-hover, var(--lse-bg)) !important;
	color: var(--lse-btn-back-text-hover, #0f172a) !important;
	border-color: var(--lse-btn-back-border-hover, #94a3b8) !important;
	transform: translateY(-2px);
}

/* On the last real step (Next button reads "Send My Estimate"), Back
   animates away and the submit button re-centers in the footer instead of
   sitting pinned to the right — see the .lse-footer-final toggle in
   updateUI() (frontend.js). max-width caps the collapse animation's start
   size; comfortably above any realistic Back button label. */
.lse-btn-back {
	max-width: 240px;
	transition: opacity .25s ease, max-width .35s ease, margin .35s ease, padding .35s ease, border-width .35s ease, transform .3s ease;
}

.lse-footer-nav.lse-footer-final {
	justify-content: center;
}

.lse-footer-nav.lse-footer-final .lse-btn-back {
	opacity: 0 !important;
	max-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-width: 0 !important;
	overflow: hidden;
	pointer-events: none;
	transform: translateX(-16px);
}

.lse-footer-nav.lse-footer-final .lse-btn-next {
	margin-left: 0 !important;
	margin-right: 0 !important;
	animation: lse-final-btn-pop .4s ease;
}

@keyframes lse-final-btn-pop {
	0% {
		transform: scale(.94);
	}

	60% {
		transform: scale(1.04);
	}

	100% {
		transform: scale(1);
	}
}

.lse-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Next button disabled look and hover override */
.lse-btn-next:disabled,
.lse-btn-next.disabled {
	background: var(--lse-btn-bg-disabled, #a5b4fc) !important;
	color: var(--lse-btn-text-disabled, #ffffff) !important;
	border-color: var(--lse-btn-border-disabled, transparent) !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
}

.lse-btn-next:disabled:hover,
.lse-btn-next.disabled:hover {
	background: var(--lse-btn-bg-disabled, #a5b4fc) !important;
	color: var(--lse-btn-text-disabled, #ffffff) !important;
}

/* Loading spinner shown on the final step's Next/Submit button while the
   server calculates the estimate, saves the lead, generates the PDF, and
   sends emails — visible feedback that something is happening during that
   whole round trip, not just an inert disabled button. */
.lse-btn-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
	animation: lse-spin 0.7s linear infinite;
}

@keyframes lse-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Contact Form Overrides */
.lse-form-group {
	margin-bottom: 24px;
}

.lse-form-group.lse-mt-section {
	margin-top: 2rem;
}

.lse-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: var(--lse-fs-label-fw, 600);
	font-size: var(--lse-fs-label);
	color: var(--lse-text);
}

/* Default gap between one question and the next (e.g. "What do you need?"
   then "How many pages?" stacked below it) — a field-block/subq-question-
   block previously had NO margin at all unless the admin set a per-field
   "Spacing" value in Form Builder, so multi-question steps/Sub-Steps
   rendered with the questions crammed together. This is just the fallback:
   a per-field inline margin-bottom (set in Form Builder) still wins via
   CSS specificity, and the grid-child override two rules down zeroes it
   back out when the grid's own `gap` already provides the spacing. */
.lse-field-block,
.lse-subq-question-block {
	margin-bottom: var(--lse-question-spacing, 32px);
}

.lse-options-grid>.lse-field-block,
.lse-options-grid>.lse-subq-question-block {
	margin-bottom: 0;
}

/* ---------- "Show Only If" conditional field reveal ----------
   evaluateFieldConditions() (frontend.js/chat.js) toggles this element's
   own inline display:none whenever the referenced field/option elsewhere
   in the form stops/starts matching — previously an instant, jarring
   show/hide with no transition at all. max-height (not the
   .lse-collapse-body/-body-inner grid-template-rows technique used
   elsewhere in this file) because a conditional field-block, unlike that
   mechanism, has no single dedicated inner wrapper of its own — several
   different element types (a plain input, an options grid, a full field
   group) can each be the block's own direct children, and max-height
   collapses the whole box's rendered height regardless of how many
   children it has or what they are. The ceiling (900px) only needs to
   exceed the tallest realistic conditional field (a multi-row option
   grid); it's never the field's actual final height, just the upper
   bound the transition animates toward/from.
   JS still ALSO sets style.display — required-field validation
   (fieldsAreValid()/validateStep()) reads it directly to decide whether a
   hidden field's own `required` should block submission, and switching
   that entirely over to this class would need every one of those
   call sites updated too. So `.lse-cond-hidden` only drives the visual
   transition; the underlying display:none still lands (see
   setConditionBlockVisible() in both JS files), just deferred until
   AFTER the hide transition finishes instead of instantly. */
[data-condition-field] {
	overflow: hidden;
	max-height: 900px;
	opacity: 1;
	transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.35s ease;
}

[data-condition-field].lse-cond-hidden {
	max-height: 0;
	opacity: 0;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-condition-field] {
		transition: none;
	}
}

/* Form Builder field/question spacing overrides: when a field-block or
   subq-question carries an explicit inline margin-bottom (from the admin's
   "Spacing" setting), OR sits inside a grid (which supplies its own `gap`
   between fields), the inner form-group/options-grid's own default margin
   is zeroed so there's exactly one source of the gap instead of it
   stacking with the grid gap / inline spacing and roughly doubling. Plain
   single-column steps with no explicit spacing keep the form-group's
   default margin as their only (and original) source of gap. */
.lse-field-block[style*="margin-bottom"]>.lse-form-group:last-child,
.lse-field-block[style*="margin-bottom"]>.lse-options-grid:last-child,
.lse-subq-question-block[style*="margin-bottom"]>.lse-form-group:last-child,
.lse-subq-question-block[style*="margin-bottom"]>.lse-options-grid:last-child,
.lse-options-grid>.lse-field-block>.lse-form-group:last-child,
.lse-options-grid>.lse-field-block>.lse-options-grid:last-child,
.lse-options-grid>.lse-subq-question-block>.lse-form-group:last-child,
.lse-options-grid>.lse-subq-question-block>.lse-options-grid:last-child {
	margin-bottom: 0 !important;
}

/* Form Builder field types: Phone (intl-tel-input) + Address (suggestions) */
.lse-phone-group .iti {
	width: 100%;
}

.lse-address-group {
	position: relative;
}

.lse-address-suggestions {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--lse-surface, #fff);
	border: 1px solid var(--lse-border, #e2e8f0);
	border-radius: 8px;
	margin-top: 4px;
	max-height: 220px;
	overflow-y: auto;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.lse-address-suggestions.show {
	display: block;
}

.lse-address-suggestion {
	padding: 10px 14px;
	font-size: 14px;
	color: var(--lse-text, #0f172a);
	cursor: pointer;
	border-bottom: 1px solid var(--lse-border, #f1f5f9);
}

.lse-address-suggestion:last-child {
	border-bottom: none;
}

.lse-address-suggestion:hover {
	background: var(--lse-bg, #f8fafc);
}

.lse-form-control {
	width: 100% !important;
	padding: var(--lse-input-padding, 16px 16px);
	border: 1px solid var(--lse-input-border, var(--lse-border)) !important;
	border-radius: var(--lse-input-radius, var(--lse-radius)) !important;
	font-family: inherit;
	background: var(--lse-input-bg, var(--lse-surface)) !important;
	color: var(--lse-text) !important;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box !important;
	font-size: var(--lse-fs-input) !important;
	line-height: var(--lse-fs-input-lh, 1.5) !important;
	outline: none !important;
	box-shadow: none !important;
}

.lse-form-control:focus {
	outline: none !important;
	border-color: var(--lse-input-focus, var(--lse-primary)) !important;
	background: var(--lse-input-focus-bg, var(--lse-input-bg, var(--lse-surface))) !important;
	box-shadow: 0 0 0 3px var(--lse-focus-ring, rgba(99, 102, 241, 0.15)) !important;
}

.lse-form-control::placeholder {
	color: var(--lse-input-placeholder, var(--lse-text-muted));
	font-size: var(--lse-fs-placeholder, 15px);
	line-height: var(--lse-fs-placeholder-lh, 1.5);
}

/* Page transitions: directional slide and fade-in */
.lse-step {
	will-change: transform, opacity;
	padding: var(--lse-step-padding, 0);
}

.lse-step.lse-slide-in-right {
	animation: lseSlideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lse-step.lse-slide-in-left {
	animation: lseSlideInLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lseSlideInRight {
	0% {
		opacity: 0;
		transform: translate3d(24px, 0, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes lseSlideInLeft {
	0% {
		opacity: 0;
		transform: translate3d(-24px, 0, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Modern Range Slider Styling */
.lse-slider-container {
	margin: 32px 0 40px 0;
	padding: 0 12px;
}

.lse-slider-value-display {
	text-align: center;
	margin-bottom: 20px;
}

.lse-slider-number {
	font-size: 38px;
	font-weight: 800;
	color: var(--lse-primary);
	display: inline-block;
	line-height: 1;
	margin-right: 6px;
	letter-spacing: -0.04em;
}

.lse-slider-text {
	font-size: 16px;
	font-weight: 600;
	color: var(--lse-text-muted);
}

.lse-slider-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: #e2e8f0;
	outline: none;
	margin: 12px 0;
	transition: background 0.2s;
	display: block;
}

.lse-slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--lse-primary);
	cursor: pointer;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
	transition: transform 0.1s, background-color 0.2s;
}

.lse-slider-input::-webkit-slider-thumb:hover {
	transform: scale(1.15);
	background: #4f46e5;
}

.lse-slider-input::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--lse-primary);
	cursor: pointer;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
	transition: transform 0.1s, background-color 0.2s;
}

.lse-slider-input::-moz-range-thumb:hover {
	transform: scale(1.15);
	background: #4f46e5;
}

.lse-slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 600;
	color: var(--lse-text-muted);
	padding-top: 8px;
}

/* Custom validation error bubble in bottom right */
.lse-validation-error-bubble {
	position: absolute;
	bottom: 96px;
	/* Positioned above the footer */
	right: 32px;
	background: var(--lse-error-bubble-bg, #ffffff);
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 8px 16px -8px rgba(0, 0, 0, 0.08);
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 999;
	pointer-events: none;
	/* Let clicks pass through */
	animation: lseErrorSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lse-error-icon-circle {
	width: 20px;
	height: 20px;
	background: var(--lse-error-bubble-icon, var(--lse-error, #0f172a));
	/* Charcoal / dark slate circle by default */
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	flex-shrink: 0;
	font-family: var(--lse-font);
}

.lse-error-bubble-text {
	font-size: 14px;
	font-weight: 500;
	color: var(--lse-error-bubble-text, #0f172a);
	font-family: var(--lse-font);
}

@keyframes lseErrorSlideUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Mobile adjustments for the error bubble */
@media (max-width: 768px) {
	.lse-validation-error-bubble {
		right: 16px;
		left: 16px;
		bottom: 90px;
		justify-content: center;
	}
}

/* Modern Select dropdown styling overrides */
select.lse-form-control {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 16px !important;
	padding-right: 40px !important;
	/* Space for custom arrow */
	cursor: pointer !important;
}

.lse-btn-book {
	background: var(--lse-primary) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 14px 28px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	border-radius: var(--lse-radius) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.15) !important;
	transition: opacity 0.2s !important;
	cursor: pointer !important;
}

.lse-btn-book:hover {
	opacity: 0.95 !important;
}

.lse-btn-download {
	background: #ffffff !important;
	color: #334155 !important;
	border: 1px solid #cbd5e1 !important;
	padding: 14px 28px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	border-radius: var(--lse-radius) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	transition: background-color 0.2s !important;
	cursor: pointer !important;
}

.lse-btn-download:hover {
	background: #f8fafc !important;
}

/* Admin live price panel */
.lse-admin-price-panel {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 99999;
	width: min(360px, calc(100vw - 36px));
	max-height: min(620px, calc(100vh - 36px));
	overflow: auto;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
	color: #0f172a;
	font-family: var(--lse-font);
}

.lse-app-head {
	padding: 14px 16px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.lse-app-head strong {
	font-size: 14px;
	font-weight: 800;
}

.lse-app-head span {
	font-size: 12px;
	color: #64748b;
}

.lse-app-totals {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-bottom: 1px solid #e2e8f0;
}

.lse-app-totals div {
	padding: 12px;
	border-right: 1px solid #e2e8f0;
}

.lse-app-totals div:last-child {
	border-right: 0;
}

.lse-app-totals span {
	display: block;
	font-size: 11px;
	color: #64748b;
	margin-bottom: 4px;
}

.lse-app-totals strong {
	display: block;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.25;
	word-break: break-word;
}

.lse-app-breakdown {
	padding: 12px 14px 14px;
}

.lse-app-empty {
	font-size: 13px;
	color: #64748b;
	padding: 8px 2px;
}

.lse-app-service+.lse-app-service {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e2e8f0;
}

.lse-app-service h4 {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	color: #0f172a;
	text-transform: capitalize;
}

.lse-app-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: 12px;
	border-top: 1px solid #f1f5f9;
}

.lse-app-row:first-of-type {
	border-top: 0;
}

.lse-app-row span {
	color: #334155;
}

.lse-app-row strong {
	color: #0f172a;
	font-weight: 800;
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 700px) {
	.lse-admin-price-panel {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		max-height: 48vh;
	}
}

/* PDF re-download toast — shown when the visitor clicks "Download PDF" again
   after the local copy has already been sent/deleted (see downloadPDF() in
   frontend.js). */
.lse-pdf-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%) translateY(16px);
	background: var(--lse-text, #0f172a);
	color: #fff;
	padding: 12px 20px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
	z-index: 100000;
	max-width: calc(100vw - 32px);
	text-align: center;
}

.lse-pdf-toast.lse-pdf-toast-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Admin Pricing Inspector Pill */
#lse-admin-pricing-pill {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 380px;
	background-color: #ffffff;
	color: #0f172a;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
	z-index: 1000;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	max-height: 48px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Grows with however many breakdown groups are in it, up to the viewport
   height (minus the same 24px clearance kept on the bottom) — a short
   estimate stays compact instead of leaving empty space, a long one fills
   the screen instead of clipping, and only the details list below scrolls
   once the pill itself has hit that cap. Same look/position, just no
   longer hard-capped at a fixed 600px regardless of content. */
#lse-admin-pricing-pill:hover,
#lse-admin-pricing-pill.lse-admin-pill-pinned {
	max-height: calc(100vh - 48px);
}

.lse-admin-pill-header {
	padding: 12px 16px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid #e2e8f0;
	background-color: #f8fafc;
	color: #0f172a;
	flex-shrink: 0;
}

/* Pin button — sits at the right edge of the header, staying visible even
   while the pill is collapsed (unlike the rest of the content, which is
   clipped by the header's own 48px max-height until hover/pin expands it),
   so it's always reachable without first having to hover to reveal it. */
.lse-admin-pill-pin-btn {
	margin-left: auto;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 4px;
	border-radius: 6px;
	opacity: .45;
	filter: grayscale(1);
	transition: opacity .15s ease, filter .15s ease, background-color .15s ease;
}

.lse-admin-pill-pin-btn:hover {
	opacity: .8;
	background-color: rgba(15, 23, 42, .06);
}

.lse-admin-pill-pin-btn[aria-pressed="true"] {
	opacity: 1;
	filter: none;
	background-color: rgba(79, 70, 229, .12);
}

.lse-admin-pill-content {
	padding: 16px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

#lse-admin-pill-details {
	margin-bottom: 16px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#lse-admin-pill-details .item-group {
	background: #ffffff;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

#lse-admin-pill-details .item-group-header {
	font-weight: 700;
	color: #475569;
	margin-bottom: 8px;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.05em;
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 6px;
}

#lse-admin-pill-details .item-detail {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
}

#lse-admin-pill-details .item-detail:not(:last-child) {
	border-bottom: 1px dashed #f1f5f9;
}

#lse-admin-pill-details .item-name {
	color: #334155;
	font-size: 12px;
}

#lse-admin-pill-details .item-price {
	font-weight: 600;
	color: #10b981;
}

.lse-admin-pill-totals {
	border-top: 1px solid #e2e8f0;
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-shrink: 0;
}

.lse-admin-pill-totals div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.lse-admin-pill-totals div span:first-child {
	font-weight: 600;
	color: #475569;
}

.lse-admin-pill-totals div span:last-child {
	font-weight: 800;
	color: #0f172a;
	font-size: 15px;
}

#luniea-smart-estimate-app .lse-btn.lse-btn-primary {
	background: var(--lse-primary) !important;
	color: #fff !important;
	border: 1px solid var(--lse-primary) !important;
}

#luniea-smart-estimate-app .lse-btn.lse-btn-primary:hover {
	background: var(--lse-primary-hover) !important;
	border-color: var(--lse-primary-hover) !important;
	color: #fff !important;
}

#luniea-smart-estimate-app .lse-btn.lse-btn-secondary {
	background: #fff !important;
	color: #475569 !important;
	border: 1px solid #cbd5e1 !important;
}

#luniea-smart-estimate-app .lse-btn.lse-btn-secondary:hover {
	background: var(--lse-bg) !important;
	color: #0f172a !important;
	border-color: #94a3b8 !important;
}

/* --------------------------------------------------------------------------
   Scroll Indicator
   -------------------------------------------------------------------------- */
.lse-scroll-indicator {
	position: fixed;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 150;
	background: var(--lse-primary);
	color: #fff;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	animation: lse-bounce 2s infinite;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	cursor: pointer;
}

.lse-scroll-indicator.lse-show {
	opacity: 1;
	visibility: visible;
}

@keyframes lse-bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateX(-50%) translateY(0);
	}

	40% {
		transform: translateX(-50%) translateY(-10px);
	}

	60% {
		transform: translateX(-50%) translateY(-5px);
	}
}

/* --------------------------------------------------------------------------
   Service Pills (step header)
   -------------------------------------------------------------------------- */
.lse-service-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

/* Base pill — works for both <button> and <span> */
.lse-service-pill {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: var(--lse-pill-padding, 8px 18px) !important;
	border-radius: var(--lse-pill-radius, 999px) !important;
	font-size: var(--lse-pill-fs, 13px) !important;
	font-weight: var(--lse-pill-fw, 500) !important;
	font-family: var(--lse-font, inherit) !important;
	line-height: var(--lse-pill-lh, 1.4) !important;
	background: var(--lse-pill-bg, #f1f5f9) !important;
	color: var(--lse-pill-text, #64748b) !important;
	border: 1px solid var(--lse-pill-border, transparent) !important;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
	/* button reset */
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
}

.lse-service-pill:hover {
	background: var(--lse-pill-hover-bg, #e2e8f0) !important;
	color: var(--lse-pill-hover-text, #334155) !important;
	border-color: var(--lse-pill-hover-border, transparent) !important;
}

.lse-service-pill:focus-visible {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
	border-color: var(--lse-primary, #6366f1) !important;
}

.lse-service-pill.active {
	background: var(--lse-pill-active-bg, var(--lse-primary, #6366f1)) !important;
	color: var(--lse-pill-active-text, #fff) !important;
	border-color: var(--lse-pill-active-bg, var(--lse-primary, #6366f1)) !important;
	font-weight: var(--lse-pill-active-fw, 700) !important;
}

.lse-service-pill.active:hover {
	background: var(--lse-pill-active-bg-hover, var(--lse-primary-hover, #4f46e5)) !important;
	border-color: var(--lse-pill-active-bg-hover, var(--lse-primary-hover, #4f46e5)) !important;
	color: var(--lse-pill-active-text, #fff) !important;
}

.lse-global-pills {
	display: flex;
	align-items: center;
	gap: var(--lse-pill-gap, 8px);
	margin-bottom: 24px;
	padding: 0;
	flex-wrap: wrap;
	transition: all 0.3s ease;
}

.lse-service-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--lse-pill-height, 32px);
	border-radius: var(--lse-pill-radius, 16px);
	font-size: var(--lse-pill-fs, 13px);
	font-weight: var(--lse-pill-fw, 600);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.lse-service-pill.is-completed {
	background: var(--lse-pill-active-bg, var(--lse-primary, #6366f1));
	color: var(--lse-pill-active-text, #fff);
	max-width: var(--lse-pill-height, 32px);
	padding: 0;
	border: 1px solid var(--lse-pill-active-border, var(--lse-pill-active-bg, var(--lse-primary, #6366f1)));
	justify-content: flex-start;
	cursor: pointer;
}

.lse-service-pill.is-upcoming {
	background: var(--lse-pill-bg, #fff);
	color: var(--lse-pill-text, var(--lse-text-light, #94a3b8));
	max-width: var(--lse-pill-height, 32px);
	padding: 0;
	border: 1px solid var(--lse-pill-border, #e2e8f0);
	justify-content: flex-start;
	cursor: pointer;
}

.lse-service-pill.is-completed:hover,
.lse-service-pill.is-upcoming:hover {
	max-width: 300px;
	padding-right: 16px;
}

.lse-service-pill.is-current.lse-progress-pill {
	position: relative;
	background: var(--lse-pill-bg, #f1f5f9);
	color: var(--lse-pill-text, #64748b);
	padding: 0 var(--lse-pill-padding, 16px);
	border: 1px solid var(--lse-pill-active-bg, var(--lse-primary, #6366f1));
	max-width: 300px;
}

.lse-service-pill.lse-progress-pill .lse-pill-fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0%;
	background: var(--lse-pill-active-bg, var(--lse-primary, #6366f1));
	border-radius: inherit;
	z-index: 0;
}

.lse-service-pill.lse-progress-pill::after {
	content: attr(data-pill-label);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lse-pill-active-text, #fff);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	clip-path: inset(0 calc(100% - var(--pill-fill-pct, 0%)) 0 0);
	transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.lse-service-pill .lse-pill-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--lse-pill-height, 32px) !important;
	height: var(--lse-pill-height, 32px) !important;
	flex-shrink: 0 !important;
	transition: opacity 0.15s ease;
	color: inherit !important;
	font-size: var(--lse-pill-icon-fs, 14px) !important;
	font-weight: var(--lse-pill-icon-fw, 700) !important;
	line-height: 1 !important;
	position: relative !important;
	z-index: 2 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	text-indent: 0 !important;
	transform: none !important;
	visibility: visible !important;
	background: transparent !important;
}

.lse-service-pill .lse-pill-icon svg {
	width: var(--lse-pill-icon-glyph-size, 14px) !important;
	height: var(--lse-pill-icon-glyph-size, 14px) !important;
	display: block !important;
	visibility: visible !important;
	stroke: currentColor !important;
}

.lse-service-pill.is-current .lse-pill-icon {
	display: none !important;
}

.lse-service-pill .lse-pill-label {
	display: inline-block;
	opacity: 0;
	margin-left: 0;
	max-width: 0;
	overflow: hidden;
	transition: opacity 0.3s ease, max-width 0.3s ease, margin 0.3s ease;
	white-space: nowrap;
}

.lse-service-pill.is-current .lse-pill-label {
	opacity: 1;
	max-width: 300px;
	margin-left: 0;
}

.lse-service-pill.is-completed:hover .lse-pill-label {
	opacity: 1;
	max-width: 300px;
	margin-left: 4px;
}

/* For upcoming, show full text and hide the letter icon on hover */
.lse-service-pill.is-upcoming:hover .lse-pill-icon {
	width: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

.lse-service-pill.is-upcoming:hover .lse-pill-label {
	opacity: 1;
	max-width: 300px;
	margin-left: 0; /* Remove margin since icon is hidden */
}

/* Step section label — "{Section} - " prefix before "Step X of Y", set by
   refreshProgressUI() in frontend.js from the active step's own
   data-step-section-label (blank/no-op for any step with no Section
   assigned, matching this element's original always-empty state). Comes
   BEFORE .lse-step-text in the markup now (was after) — the " - "
   separator is baked directly into the text content JS sets here, not a
   margin/pseudo-element, so no spacing is needed on this element itself. */
.lse-step-category {
	display: inline;
	white-space: nowrap;
	color: var(--lse-text-muted, #94a3b8);
	font-size: 0.85em;
	font-weight: 500;
}

.lse-honeypot-field {
	display: none;
}

.lse-industry-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.lse-loading-text {
	color: #64748b;
}

.lse-inline-checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	margin-top: 6px;
}

.lse-mb-16 {
	margin-bottom: 16px;
}

.lse-mb-section {
	margin-bottom: 2rem;
}

.lse-review-value-services {
	font-size: 15px;
}

.lse-review-value-goals {
	font-size: 14px;
	color: var(--lse-text-2);
}

/* ============================================
   ESTIMATE DISPLAY (Success Screen)
   ============================================ */
.lse-estimate-display {
	max-width: var(--lse-success-width, 800px);
	margin: 0 auto;
	padding: 20px 0;
}

.lse-est-header {
	text-align: left;
	margin-bottom: 32px;
}

.lse-est-check-icon {
	color: var(--lse-success-accent, #10b981);
	margin-bottom: 16px;
}

.lse-est-heading {
	font-size: var(--lse-success-heading-fs, 22px);
	font-weight: var(--lse-success-heading-fw, 700);
	line-height: var(--lse-success-heading-lh, 1.3);
	color: var(--lse-text, #0f172a);
	text-align: left;
	margin: 0 0 8px 0;
}

.lse-est-subheading {
	color: var(--lse-text-muted, #64748b);
	font-size: var(--lse-success-subheading-fs, 14px);
	text-align: left;
	margin: 0;
}

.lse-estimate-id-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 6px 12px;
	border: 1px solid var(--lse-border, #dbe3ee);
	border-radius: 999px;
	background: var(--lse-surface-muted, #f8fafc);
	color: var(--lse-text-muted, #64748b);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

.lse-estimate-id-pill span {
	color: var(--lse-text, #0f172a);
	font-weight: 700;
}

.lse-est-card {
	background: var(--lse-surface, #fff);
	border-radius: var(--lse-success-card-radius, 16px);
	padding: 32px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--lse-border, #e2e8f0);
	margin-bottom: 24px;
}

.lse-est-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lse-text-muted, #64748b);
	margin-bottom: 4px;
}

.lse-est-subtitle {
	font-size: 15px;
	color: var(--lse-text-muted, #475569);
	margin-bottom: 24px;
}

.lse-est-section {
	margin-bottom: 24px;
}

.lse-est-section-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lse-text-muted, #64748b);
	margin-bottom: 12px;
	padding-bottom: 8px;
}

.lse-est-section-title-bordered {
	border-bottom: 1px solid var(--lse-border, #e2e8f0);
}

.lse-est-section-title-top-bordered {
	border-top: 1px solid var(--lse-border, #e2e8f0);
	padding-top: 16px;
}

/* No border/background of its own — it's rendered INSIDE the same bordered
   #f8fafc card as Contact Details (see render_group_block() in
   class-template-sections.php), so giving it a second border here would
   reproduce the exact nested-double-border bug already fixed once. */
.lse-est-breakdown-list {
	border-radius: 8px;
	overflow: hidden;
}

/* "Complete Estimate Breakdown" / "ESTIMATE SUMMARY" block headers —
   previously hardcoded inline style="..." in success.php, which silently
   overrode any CSS/variable customization here. */
.lse-est-block-title {
	/* Estimate headings often include the generated estimate ID. They must not
	   inherit an oversized global H2 setting and overwhelm the breakdown. */
	font-size: clamp(22px, 2.2vw, 32px);
	font-weight: var(--lse-fs-h2-fw, 700);
	line-height: 1.15;
	color: var(--lse-text, #0f172a);
	margin: 0 0 14px 0;
	border-bottom: 1.5px solid var(--lse-border, #f1f5f9);
	padding-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lse-est-totals {
	background: var(--lse-bg, #f8fafc);
	border-radius: 12px;
	padding: 20px;
	border: 1px solid var(--lse-border, #e2e8f0);
	margin-bottom: 14px;
}

.lse-est-totals-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

/* The monthly-investment row (when the project-total row above it is also
   shown) gets a dashed divider — matches the two-row layout in success.php.
   The project-total row is hidden (not removed) via JS when there's no
   one-time pricing, so JS also explicitly zeroes this divider back out via
   an inline style in that case — a legitimate runtime-conditional use of
   inline style (CSS :last-child can't see past a hidden sibling), not a
   static override fight like the ones fixed elsewhere on this page. */
.lse-est-totals-row:last-child {
	margin-bottom: 0;
	padding-top: 12px;
	border-top: 1px dashed var(--lse-border, #e2e8f0);
}

.lse-est-totals-label {
	font-weight: 600;
	color: var(--lse-text, #334155);
}

.lse-est-totals-value {
	font-weight: 700;
	color: var(--lse-text, #0f172a);
	font-size: 16px;
}

.lse-est-recommendation {
	font-size: 12px;
	color: var(--lse-text-muted, #475569);
	line-height: var(--lse-body-lh, 1.5);
}

.lse-est-disclaimer {
	font-size: 11px;
	color: var(--lse-text-muted, #94a3b8);
	text-align: center;
	margin-top: 16px;
	line-height: var(--lse-body-lh, 1.4);
	font-style: italic;
}

.lse-est-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.lse-no-underline {
	text-decoration: none;
}

.lse-icon-mr {
	margin-right: 4px;
}

.lse-est-lead-id {
	color: var(--lse-primary, #4f46e5);
	margin-left: 8px;
}

.lse-est-client-name {
	font-weight: 600;
}

.lse-mb-section-sm {
	margin-bottom: 24px;
}

.lse-mt-section-sm {
	margin-top: 20px;
}

.lse-mt-10 {
	margin-top: 10px;
}

.lse-est-total-highlight {
	color: var(--lse-success-accent, #10b981);
	font-size: 20px;
}

.lse-est-recommendation-box {
	background: var(--lse-bg, #f8fafc);
	border-radius: 12px;
	padding: 20px;
	border: 1px solid var(--lse-border, #e2e8f0);
	margin-bottom: 24px;
}

/* Estimate breakdown accordion on the Success Screen — server-rendered
   (see Ajax_Handler::render_success_html()) directly into the same
   #f8fafc card as Contact Details, so group headers/bodies stay
   transparent (blend into that card) rather than drawing their own
   background, and .lse-est-bd-body uses a grid-template-rows transition
   (not display:none/block) for a smooth, no-JS-measurement expand/collapse
   animation — .lse-est-bd-group.lse-est-bd-open is toggled by the
   delegated click handler in frontend.js. */
.lse-est-bd-group {
	border-bottom: 1px solid var(--lse-border, #e2e8f0);
}

.lse-est-bd-group:last-child {
	border-bottom: none;
}

/* Every property below is !important — this is a <button>, and many
   themes/page builders ship a global `button { background; border;
   box-shadow; border-radius; }` rule that otherwise wins (turning this
   horizontal accordion row into what looks like a small pill/CTA button,
   sized to its content instead of stretching full width). */
.lse-est-bd-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 12px 4px !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	font: inherit !important;
	text-align: left !important;
	color: inherit !important;
	cursor: pointer;
	user-select: none;
	border-radius: 6px !important;
	transition: background 0.15s;
	background: var(--lse-success-bd-header-bg, transparent) !important;
}

.lse-est-bd-header:hover,
.lse-est-bd-group.lse-est-bd-open .lse-est-bd-header {
	background: var(--lse-success-bd-header-hover-bg, rgba(15, 23, 42, 0.04)) !important;
}

.lse-est-bd-title {
	font-weight: 600 !important;
	font-size: 14px !important;
	color: var(--lse-text, #0f172a) !important;
	background: none !important;
}

.lse-est-bd-header-right {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-shrink: 0;
}

.lse-est-bd-header-price {
	font-weight: 600 !important;
	font-size: 13px !important;
	color: var(--lse-text, #0f172a) !important;
	background: none !important;
	white-space: nowrap;
	transition: color 0.15s;
}

.lse-est-bd-toggle {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	margin-right: 2px;
	background: none !important;
	border-right: 2px solid var(--lse-success-bd-toggle-color, var(--lse-text-muted, #94a3b8)) !important;
	border-bottom: 2px solid var(--lse-success-bd-toggle-color, var(--lse-text-muted, #94a3b8)) !important;
	border-top: 0 !important;
	border-left: 0 !important;
	transform: rotate(-45deg);
	transition: transform 0.25s ease;
}

.lse-est-bd-group.lse-est-bd-open .lse-est-bd-toggle {
	transform: rotate(45deg);
}

.lse-est-bd-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease;
}

.lse-est-bd-body-inner {
	overflow: hidden;
	min-height: 0;
	padding: 0 4px 14px 4px;
}

.lse-est-bd-group.lse-est-bd-open .lse-est-bd-body {
	grid-template-rows: 1fr;
}

.lse-est-bd-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid var(--lse-border, #f1f5f9);
}

.lse-est-bd-row-label {
	font-size: 13px;
	color: var(--lse-text-muted, #475569);
}

.lse-est-bd-row-value {
	font-weight: 600;
	font-size: 13px;
	color: var(--lse-text, #0f172a);
	white-space: nowrap;
}

.lse-est-bd-total-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 10px 0 0 0;
	border-top: 1px solid var(--lse-border, #e2e8f0);
	margin-top: 6px;
}

.lse-est-bd-total-label {
	font-weight: 700;
	font-size: 13px;
	color: var(--lse-text, #0f172a);
}

.lse-est-bd-total-value {
	font-weight: 700;
	font-size: 13px;
	color: var(--lse-text, #0f172a);
	text-align: right;
}

/* "Show complete itemized breakdown" OFF — a flat, non-expandable row per
   service (just its name + price range). Same outer .lse-est-bd-group for
   the shared row-divider border, but no <button>/chevron/hover state since
   there's nothing to expand. */
.lse-est-bd-flat-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 4px;
}

.lse-est-bd-total-sub {
	font-size: 11px;
	color: var(--lse-text-muted, #64748b);
	font-weight: normal;
	margin-top: 2px;
}

/* ESTIMATE SUMMARY box on the Success Screen / emails — these class names
   (.lse-doc-summary-*) come from the admin's saved "Estimate Summary
   Totals" block text (Template_Sections' default_text), which otherwise
   has no styling at all on the live success screen (its own <style>
   block is email/PDF-only) and no border/background reset against theme
   defaults — matches the same #f8fafc card used by Contact Details and
   Estimate Breakdown so all three sections look consistent. */
.lse-doc-summary-box {
	background: var(--lse-bg, #f8fafc) !important;
	border: 1px solid var(--lse-border, #e2e8f0) !important;
	border-radius: 12px !important;
	padding: 20px !important;
	margin-bottom: 24px !important;
}

.lse-doc-summary-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--lse-text-muted, #64748b) !important;
	text-transform: uppercase !important;
	margin: 0 0 12px !important;
}

.lse-doc-summary-inner {
	width: 100%;
	border-collapse: collapse;
}

.lse-doc-summary-inner td {
	border: none !important;
	background: transparent !important;
	padding: 8px 0 !important;
	font-size: 14px;
	color: var(--lse-text, #0f172a);
}

.lse-doc-total-row td {
	border-bottom: 1px solid var(--lse-border, #e2e8f0) !important;
}

.lse-doc-total-row:last-child td {
	border-bottom: none !important;
}

.lse-doc-total-row td.right {
	text-align: right;
	font-weight: 700;
}

/* Pill error state — red border/text for incomplete service steps */
.lse-service-pill.lse-pill-error {
	border-color: #fca5a5 !important;
	color: #b91c1c !important;
	background: #fff1f1 !important;
}

.lse-service-pill.lse-pill-error::after {
	content: ' ✕';
	font-size: 11px;
	opacity: 0.8;
}

.lse-service-pill.lse-pill-error:hover {
	background: #fee2e2 !important;
	border-color: #f87171 !important;
}

/* ── Form Builder: custom step icons/images (elements + options) ── */
.lse-element-icon {
	font-size: var(--lse-question-icon-size, 18px);
	margin-right: 4px;
	vertical-align: middle;
}

/* Icon_Library::render() hardcodes each glyph's own <svg width="24"
   height="24"> (see the matching note on .lse-radio-card .lse-card-icon svg
   above) — font-size on the wrapping span above has no effect on an SVG
   with its own explicit width/height attributes, so without this the
   question-title icon always rendered at a fixed 24px regardless of
   --lse-question-icon-size. CSS width/height on the <svg> itself wins over
   its own attributes. */
.lse-element-icon svg {
	width: var(--lse-question-icon-size, 18px);
	height: var(--lse-question-icon-size, 18px);
}

.lse-element-image {
	height: var(--lse-question-icon-size, 22px);
	width: var(--lse-question-icon-size, 22px);
	object-fit: cover;
	border-radius: 4px;
	vertical-align: middle;
	margin-right: 6px;
}

.lse-option-icon {
	font-size: 22px;
	display: block;
	margin-bottom: 6px;
}

.lse-option-image {
	height: 40px;
	width: 40px;
	object-fit: var(--lse-card-image-fit, cover);
	border-radius: var(--lse-card-image-radius, 12px);
	margin-bottom: 6px;
}

/* Highlight missing required fields */
.lse-option-card.lse-field-error,
input.lse-field-error,
textarea.lse-field-error,
select.lse-field-error {
	border-color: var(--lse-error, #ef4444) !important;
	box-shadow: 0 0 0 1px var(--lse-error, #ef4444) !important;
}

.lse-option-card:has(.lse-card-number-input.lse-field-error) .lse-card-content {
	border-color: var(--lse-error, #ef4444) !important;
	background: color-mix(in srgb, var(--lse-error, #ef4444) 5%, var(--lse-card-bg, #fff)) !important;
}

.lse-card-number-input.lse-field-error {
	border-color: var(--lse-error, #ef4444) !important;
	box-shadow: 0 0 0 1px var(--lse-error, #ef4444) !important;
}

.lse-option-card .lse-field-error-msg {
	grid-column: 1 / -1;
	margin: 8px 0 0;
}

/* Inline format-validation message (email/url/name/phone/address) — shown
   below the field once the visitor blurs it with an invalid value; see
   initFieldValidation()/showFieldError() in frontend.js. */
.lse-field-error-msg {
	margin-top: 6px;
	font-size: var(--lse-fs-error, 14px);
	font-weight: var(--lse-fs-error-fw, 500);
	line-height: var(--lse-fs-error-lh, 1.5);
	color: var(--lse-error, #ef4444);
	display: flex;
	align-items: center;
	gap: 5px;
}

.lse-field-error-msg::before {
	content: '⚠';
	font-size: 11px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Mobile / Tablet responsive overrides (main estimator form)

   Single source of truth for this component's small-screen layout — if you
   need to adjust mobile/tablet spacing, do it here, not in a new @media
   block elsewhere (this file used to have THREE separate, overlapping
   max-width:768px-ish blocks fighting each other, which is exactly the bug
   class this comment exists to prevent from creeping back in).

   Header/footer never scroll here by design, but NOT via position:sticky
   in a fixed-height "app shell" (that pattern breaks the moment this
   shortcode is embedded mid-page under a theme's own header — the shell's
   own 100vh box no longer lines up with the real viewport, so the "pinned"
   footer gets pushed off-screen). Instead the base (non-media) rules
   already do the right thing — .lse-wrapper/.lse-estimator-container use
   min-height (the page is free to grow and scroll normally), and
   .lse-header/.lse-footer-nav are position:sticky against that normal
   page scroll — so this block only needs to tune spacing/typography, not
   re-architect the layout.
   -------------------------------------------------------------------------- */

/* Tablet responsive overrides — Elementor-style CASCADING breakpoint
   (max-width:1024px, not an exclusive 768–1024px range): these rules also
   apply on phones unless the Mobile block below (which is declared AFTER
   this one on purpose — CSS gives the later rule precedence for equal
   specificity, and this is how Tablet-only values still cascade down to
   Mobile per Shortcode::build_design_css_responsive()'s server-side
   resolution) overrides the same property. Keep this block BEFORE the
   Mobile block always — reordering these two silently inverts the cascade. */
@media (max-width: 1024px) {

	.lse-wrapper,
	.lse-estimator-container {
		/* Same reasoning as the mobile block: clip prevents horizontal
		   scroll without creating a scroll container that would break the
		   sticky header/footer. */
		overflow-x: clip;
	}

	.lse-wrapper {
		font-family: var(--lse-font-tablet, var(--lse-font));
		color: var(--lse-text-tablet, var(--lse-text));
	}

	.lse-step-header h1 {
		font-weight: var(--lse-fs-heading-fw-tablet, var(--lse-fs-heading-fw, 700)) !important;
		line-height: var(--lse-fs-heading-lh-tablet, var(--lse-fs-heading-lh, 1.2)) !important;
		letter-spacing: var(--lse-letter-spacing-tablet, var(--lse-letter-spacing, -0.02em)) !important;
		text-transform: var(--lse-text-transform-tablet, var(--lse-text-transform, none)) !important;
		text-align: var(--lse-heading-align-tablet, var(--lse-heading-align, left)) !important;
	}

	.lse-step-header p {
		color: var(--lse-text-muted-tablet, var(--lse-text-muted)) !important;
		line-height: var(--lse-body-lh-tablet, var(--lse-body-lh, 1.5)) !important;
		text-align: var(--lse-subheading-align-tablet, var(--lse-subheading-align, left)) !important;
	}

	.lse-section-title {
		font-size: var(--lse-fs-label-tablet, var(--lse-fs-label, 15px));
		font-weight: var(--lse-fs-label-fw-tablet, var(--lse-fs-label-fw, 600));
		text-align: var(--lse-label-align-tablet, var(--lse-label-align, left));
	}

	/* h3 case (a multi-option question's own title) needs its OWN responsive
	   rule — the plain .lse-section-title one just above reads the Field
	   Labels vars (--lse-fs-label...), never --lse-fs-h3, so without this,
	   Question Title's Font Size/Weight/Line Height controls would look like
	   they do nothing on Tablet/Mobile (the higher-specificity Desktop h3
	   rule in the base stylesheet would keep winning at every width). */
	h3.lse-section-title {
		font-size: var(--lse-fs-h3-tablet, var(--lse-fs-h3, 22px));
		font-weight: var(--lse-fs-h3-fw-tablet, var(--lse-fs-h3-fw, 600));
		line-height: var(--lse-fs-h3-lh-tablet, var(--lse-fs-h3-lh, 1.4));
	}

	.lse-btn {
		font-size: var(--lse-fs-button-tablet, var(--lse-fs-button)) !important;
		font-weight: var(--lse-fs-button-fw-tablet, var(--lse-fs-button-fw, 600)) !important;
		justify-content: var(--lse-btn-content-align-tablet, var(--lse-btn-content-align, center)) !important;
	}

	.lse-footer-actions {
		justify-content: var(--lse-btn-align-tablet, var(--lse-btn-align, center));
	}

	.lse-options-grid {
		gap: var(--lse-options-grid-gap-tablet, var(--lse-options-grid-gap, var(--lse-spacing-field-tablet, var(--lse-spacing-field))));
	}

	.lse-field-block,
	.lse-subq-question-block {
		margin-bottom: var(--lse-question-spacing-tablet, var(--lse-question-spacing, 24px));
	}

	.lse-step {
		padding: var(--lse-step-padding-tablet, var(--lse-step-padding, 0));
	}

	.lse-btn {
		padding: var(--lse-btn-padding-tablet, var(--lse-btn-padding)) !important;
		margin: var(--lse-btn-margin-tablet, var(--lse-btn-margin)) !important;
		width: var(--lse-btn-width-tablet, var(--lse-btn-width, auto));
		height: var(--lse-btn-height-tablet, var(--lse-btn-height, auto));
		border-radius: var(--lse-btn-radius-tablet, var(--lse-btn-radius)) !important;
	}

	/* Back/Next Button Position (margin-left/right) — MUST come after the
	   `.lse-btn { margin: ... }` shorthand rule just above: same specificity
	   (single class each), so source order breaks the tie, and a shorthand
	   `margin` declares all four sides — placed earlier, it silently
	   cancelled these two longhands, which is exactly why Button Alignment
	   never took effect on Tablet/Mobile even though it worked at Desktop
	   (where this same reordering was already correct — see .lse-btn-next's
	   own docblock comment near the Desktop rule). */
	.lse-btn-back {
		margin-left: var(--lse-btn-back-margin-left-tablet, var(--lse-btn-back-margin-left, 0)) !important;
		margin-right: var(--lse-btn-back-margin-right-tablet, var(--lse-btn-back-margin-right, 0)) !important;
	}

	.lse-btn-next {
		margin-left: var(--lse-btn-next-margin-left-tablet, var(--lse-btn-next-margin-left, auto)) !important;
		margin-right: var(--lse-btn-next-margin-right-tablet, var(--lse-btn-next-margin-right, 0)) !important;
	}

	.lse-btn-next {
		background: var(--lse-btn-bg-tablet, var(--lse-btn-bg)) !important;
		color: var(--lse-btn-text-tablet, var(--lse-btn-text)) !important;
		border-color: var(--lse-btn-border-tablet, var(--lse-btn-border, transparent)) !important;
		box-shadow: var(--lse-btn-shadow-tablet, var(--lse-btn-shadow, none)) !important;
	}

	.lse-btn-next:hover {
		background: var(--lse-btn-bg-hover-tablet, var(--lse-btn-bg-hover)) !important;
	}

	.lse-btn-next:active {
		background: var(--lse-btn-bg-active-tablet, var(--lse-btn-bg-active)) !important;
	}

	.lse-btn-back {
		color: var(--lse-btn-back-text-tablet, var(--lse-btn-back-text, #475569)) !important;
		border-color: var(--lse-btn-back-border-tablet, var(--lse-btn-back-border, #cbd5e1)) !important;
	}

	.lse-btn-back:hover {
		background: var(--lse-btn-back-bg-hover-tablet, var(--lse-btn-back-bg-hover, var(--lse-bg))) !important;
		color: var(--lse-btn-back-text-hover-tablet, var(--lse-btn-back-text-hover, #0f172a)) !important;
		border-color: var(--lse-btn-back-border-hover-tablet, var(--lse-btn-back-border-hover, #94a3b8)) !important;
	}

	.lse-form-control {
		padding: var(--lse-input-padding-tablet, var(--lse-input-padding, 16px 16px));
		border-color: var(--lse-input-border-tablet, var(--lse-input-border, var(--lse-border))) !important;
		border-radius: var(--lse-input-radius-tablet, var(--lse-input-radius, var(--lse-radius))) !important;
		background: var(--lse-input-bg-tablet, var(--lse-input-bg, var(--lse-surface))) !important;
	}

	.lse-form-control:focus {
		border-color: var(--lse-input-focus-tablet, var(--lse-input-focus, var(--lse-primary))) !important;
		background: var(--lse-input-focus-bg-tablet, var(--lse-input-focus-bg, var(--lse-input-bg, var(--lse-surface)))) !important;
	}

	.lse-form-control::placeholder {
		color: var(--lse-input-placeholder-tablet, var(--lse-input-placeholder, var(--lse-text-muted)));
		font-size: var(--lse-fs-placeholder-tablet, var(--lse-fs-placeholder, 15px));
		line-height: var(--lse-fs-placeholder-lh-tablet, var(--lse-fs-placeholder-lh, 1.5));
	}

	.lse-checkbox-indicator {
		width: var(--lse-checkbox-size-tablet, var(--lse-checkbox-size, 20px));
		height: var(--lse-checkbox-size-tablet, var(--lse-checkbox-size, 20px));
		border-color: var(--lse-checkbox-border-tablet, var(--lse-checkbox-border, #cbd5e1));
		background: var(--lse-checkbox-bg-tablet, var(--lse-checkbox-bg, #fff));
	}

	.lse-option-card input:checked~.lse-card-content .lse-checkbox-indicator {
		background: var(--lse-checkbox-checked-bg-tablet, var(--lse-checkbox-checked-bg, var(--lse-accent, var(--lse-primary))));
	}

	.lse-card-content {
		margin: var(--lse-card-margin-tablet, var(--lse-card-margin, 0));
		border-color: var(--lse-card-border-tablet, var(--lse-card-border));
	}

	.lse-option-card:hover .lse-card-content {
		border-color: var(--lse-card-hover-border-tablet, var(--lse-card-hover-border, #a5b4fc));
		background: var(--lse-card-hover-bg-tablet, var(--lse-card-hover-bg, rgba(99, 102, 241, 0.01)));
	}

	.lse-option-card input:checked~.lse-card-content {
		background: var(--lse-card-selected-bg-tablet, var(--lse-card-selected-bg, var(--lse-card-selected)));
	}

	.lse-radio-card .lse-card-icon,
	.lse-checkbox-icon-card .lse-card-icon {
		width: var(--lse-card-icon-size-tablet, var(--lse-card-icon-size, 44px));
		height: var(--lse-card-icon-size-tablet, var(--lse-card-icon-size, 44px));
		background: var(--lse-card-icon-bg-tablet, var(--lse-card-icon-bg, #f1f5f9));
		border-radius: var(--lse-card-icon-radius-tablet, var(--lse-card-icon-radius, 12px));
		color: var(--lse-card-icon-color-tablet, var(--lse-card-icon-color, #334155));
	}

	.lse-radio-card .lse-card-content,
	.lse-checkbox-icon-card .lse-card-content {
		align-items: var(--lse-card-icon-align-items-tablet, var(--lse-card-icon-align-items, center));
		text-align: var(--lse-card-text-align-tablet, var(--lse-card-text-align, var(--lse-card-icon-align-tablet, var(--lse-card-icon-align, center))));
	}

	.lse-options-grid.lse-card-list-tablet .lse-card-content {
		justify-content: var(--lse-card-icon-align-tablet, var(--lse-card-icon-align, flex-start));
		text-align: var(--lse-card-text-align-tablet, var(--lse-card-text-align, var(--lse-card-icon-align-tablet, var(--lse-card-icon-align, left))));
	}

	.lse-service-pill {
		padding: var(--lse-pill-padding-tablet, var(--lse-pill-padding, 8px 18px)) !important;
		border-radius: var(--lse-pill-radius-tablet, var(--lse-pill-radius, 999px)) !important;
		font-size: var(--lse-pill-fs-tablet, var(--lse-pill-fs, 13px)) !important;
		font-weight: var(--lse-pill-fw-tablet, var(--lse-pill-fw, 500)) !important;
		background: var(--lse-pill-bg-tablet, var(--lse-pill-bg, #f1f5f9)) !important;
		color: var(--lse-pill-text-tablet, var(--lse-pill-text, #64748b)) !important;
		border-color: var(--lse-pill-border-tablet, var(--lse-pill-border, transparent)) !important;
	}

	.lse-header {
		background: var(--lse-header-bg-tablet, var(--lse-header-bg, var(--lse-surface)));
		border-top-color: var(--lse-header-border-tablet, var(--lse-header-border, var(--lse-border)));
		border-bottom-color: var(--lse-header-border-tablet, var(--lse-header-border, var(--lse-border)));
	}

	.lse-header-top {
		margin-bottom: var(--lse-header-margin-tablet, var(--lse-header-margin, 24px));
	}

	.lse-brand-name {
		font-weight: var(--lse-header-brand-fw-tablet, var(--lse-header-brand-fw, 700));
		font-size: var(--lse-header-brand-fs-tablet, var(--lse-header-brand-fs, 18px));
		color: var(--lse-header-brand-color-tablet, var(--lse-header-brand-color, #0f172a));
	}

	.lse-step-indicator {
		font-size: var(--lse-header-step-fs-tablet, var(--lse-header-step-fs, 12px));
		font-weight: var(--lse-header-step-fw-tablet, var(--lse-header-step-fw, 500));
		line-height: var(--lse-header-step-lh-tablet, var(--lse-header-step-lh, 1.4));
	}

	.lse-brand-logo {
		max-height: var(--lse-header-logo-size-tablet, var(--lse-header-logo-size, 32px));
	}

	.lse-progress-track {
		height: var(--lse-progress-height-tablet, var(--lse-progress-height, 5px));
		background: var(--lse-progress-track-tablet, var(--lse-progress-track, var(--lse-bg)));
		border-radius: var(--lse-progress-radius-tablet, var(--lse-progress-radius, var(--lse-progress-height, 5px)));
		margin: var(--lse-progress-margin-tablet, var(--lse-progress-margin, 0));
		border-width: var(--lse-progress-border-width-tablet, var(--lse-progress-border-width, 1px));
		border-color: var(--lse-progress-border-color-tablet, var(--lse-progress-border-color, var(--lse-border)));
	}

	.lse-progress-fill {
		background: var(--lse-progress-fill-tablet, var(--lse-progress-fill, var(--lse-primary)));
		border-radius: var(--lse-progress-radius-tablet, var(--lse-progress-radius, var(--lse-progress-height, 5px)));
	}

	.lse-est-check-icon,
	.lse-est-total-highlight {
		color: var(--lse-success-accent-tablet, var(--lse-success-accent, #10b981));
	}

	.lse-est-heading {
		font-size: var(--lse-success-heading-fs-tablet, var(--lse-success-heading-fs, 22px));
		font-weight: var(--lse-success-heading-fw-tablet, var(--lse-success-heading-fw, 700));
		line-height: var(--lse-success-heading-lh-tablet, var(--lse-success-heading-lh, 1.3));
		text-align: left;
	}

	.lse-est-subheading {
		font-size: var(--lse-success-subheading-fs-tablet, var(--lse-success-subheading-fs, 14px));
		text-align: left;
	}

	.lse-est-card {
		border-radius: var(--lse-success-card-radius-tablet, var(--lse-success-card-radius, 16px));
	}

	.lse-estimator-container {
		max-width: var(--lse-container-width-tablet, var(--lse-container-width));
		margin: var(--lse-container-margin-tablet, var(--lse-container-margin, 0 auto));
		background-color: var(--lse-surface-tablet, var(--lse-surface));
		background-image:
			linear-gradient(var(--lse-bg-overlay-color-tablet, var(--lse-bg-overlay-color, transparent)), var(--lse-bg-overlay-color-tablet, var(--lse-bg-overlay-color, transparent))),
			var(--lse-bg-gradient-tablet, var(--lse-bg-gradient, none)),
			url(var(--lse-bg-image-tablet, var(--lse-bg-image, '')));
	}

	.lse-option-card input:checked + .lse-card-content .lse-checkbox-indicator {
		background: var(--lse-accent-tablet, var(--lse-accent, var(--lse-primary)));
		border-color: var(--lse-accent-tablet, var(--lse-accent, var(--lse-primary)));
	}

	.lse-estimator-container {
		max-width: 92% !important;
		border-radius: var(--lse-container-radius-tablet, var(--lse-container-radius, 16px)) !important;
		min-height: 100vh;
		min-height: 100dvh;
	}

	.lse-step-header h1 {
		font-size: var(--lse-fs-heading-tablet, var(--lse-fs-heading, 22px)) !important;
	}

	.lse-wrapper {
		font-size: var(--lse-fs-body-tablet, var(--lse-fs-body, 16px));
	}

	.lse-content-area {
		padding: var(--lse-content-padding-tablet, 28px 24px) !important;
	}

	.lse-header {
		padding: var(--lse-header-padding-tablet, 20px 24px) !important;
	}

	.lse-footer-nav {
		padding: var(--lse-footer-padding-tablet, 20px 24px) !important;
	}

	.lse-option-card {
		padding: var(--lse-card-padding-tablet, 0) !important;
	}

	.lse-card-content {
		/* Card Corner Radius's real css_var is --lse-radius (see
		   Design_Settings' card_radius => '--lse-radius' mapping) — so its
		   Tablet override is stored/generated as --lse-radius-tablet, NOT
		   --lse-card-radius-tablet (a var name nothing ever sets). This read
		   the wrong name and always silently fell back to the Desktop value
		   regardless of any Tablet override an admin saved. */
		border-radius: var(--lse-radius-tablet, var(--lse-radius)) !important;
		box-shadow: var(--lse-card-shadow-tablet, var(--lse-card-shadow, none)) !important;
	}

	.lse-form-input,
	.lse-form-select,
	.lse-form-control {
		font-size: 16px !important;
	}
}

/* Mobile responsive overrides — max-width:767px, declared AFTER Tablet
   above so it always wins on phones for any property both blocks touch
   (source-order cascade, both at equal specificity). */
@media (max-width: 767px) {

	/* Defense in depth alongside body{overflow-x:hidden} above (which
	   clips the header/footer full-bleed decoration disabled further
	   below) — a second, narrower safety net directly on the two
	   elements that actually hold the estimator's layout, in case
	   anything else on the page ever overrides overflow-x on body. */
	.lse-wrapper,
	.lse-estimator-container {
		/* clip (not hidden) — overflow-x:hidden silently computes
		   overflow-y to "auto", turning these into scroll containers,
		   which makes the sticky footer pin to the container bottom
		   instead of the viewport (i.e. sticky "stops working" on
		   phones). overflow:clip prevents the horizontal scroll WITHOUT
		   creating a scroll container, so sticky keeps working. On older
		   engines that lack `clip` (Safari < 16) this line is dropped,
		   but body{overflow-x:hidden} above still guards horizontal
		   scroll, so nothing regresses. */
		overflow-x: clip;
	}

	.lse-wrapper {
		font-family: var(--lse-font-mobile, var(--lse-font));
		color: var(--lse-text-mobile, var(--lse-text));
	}

	.lse-step-header h1 {
		font-weight: var(--lse-fs-heading-fw-mobile, var(--lse-fs-heading-fw, 700)) !important;
		line-height: var(--lse-fs-heading-lh-mobile, var(--lse-fs-heading-lh, 1.2)) !important;
		letter-spacing: var(--lse-letter-spacing-mobile, var(--lse-letter-spacing, -0.02em)) !important;
		text-transform: var(--lse-text-transform-mobile, var(--lse-text-transform, none)) !important;
		text-align: var(--lse-heading-align-mobile, var(--lse-heading-align, left)) !important;
	}

	.lse-step-header p {
		color: var(--lse-text-muted-mobile, var(--lse-text-muted)) !important;
		line-height: var(--lse-body-lh-mobile, var(--lse-body-lh, 1.5)) !important;
		text-align: var(--lse-subheading-align-mobile, var(--lse-subheading-align, left)) !important;
	}

	.lse-section-title {
		font-size: var(--lse-fs-label-mobile, var(--lse-fs-label, 15px));
		font-weight: var(--lse-fs-label-fw-mobile, var(--lse-fs-label-fw, 600));
		text-align: var(--lse-label-align-mobile, var(--lse-label-align, left));
	}

	/* h3 case — see the matching comment in the Tablet block above. */
	h3.lse-section-title {
		font-size: var(--lse-fs-h3-mobile, var(--lse-fs-h3, 22px));
		font-weight: var(--lse-fs-h3-fw-mobile, var(--lse-fs-h3-fw, 600));
		line-height: var(--lse-fs-h3-lh-mobile, var(--lse-fs-h3-lh, 1.4));
	}

	.lse-btn {
		font-size: var(--lse-fs-button-mobile, var(--lse-fs-button)) !important;
		font-weight: var(--lse-fs-button-fw-mobile, var(--lse-fs-button-fw, 600)) !important;
		justify-content: var(--lse-btn-content-align-mobile, var(--lse-btn-content-align, center)) !important;
	}

	.lse-field-block,
	.lse-subq-question-block {
		margin-bottom: var(--lse-question-spacing-mobile, var(--lse-question-spacing, 20px));
	}

	.lse-step {
		padding: var(--lse-step-padding-mobile, var(--lse-step-padding, 0));
	}

	.lse-btn {
		padding: var(--lse-btn-padding-mobile, var(--lse-btn-padding)) !important;
		margin: var(--lse-btn-margin-mobile, var(--lse-btn-margin)) !important;
		width: var(--lse-btn-width-mobile, var(--lse-btn-width, auto));
		height: var(--lse-btn-height-mobile, var(--lse-btn-height, auto));
		border-radius: var(--lse-btn-radius-mobile, var(--lse-btn-radius)) !important;
	}

	/* Back/Next Button Position (margin-left/right) — MUST come after the
	   `.lse-btn { margin: ... }` shorthand rule just above (see the matching
	   comment in the Tablet block above for why source order matters here). */
	.lse-btn-back {
		margin-left: var(--lse-btn-back-margin-left-mobile, var(--lse-btn-back-margin-left, 0)) !important;
		margin-right: var(--lse-btn-back-margin-right-mobile, var(--lse-btn-back-margin-right, 0)) !important;
	}

	.lse-btn-next {
		margin-left: var(--lse-btn-next-margin-left-mobile, var(--lse-btn-next-margin-left, auto)) !important;
		margin-right: var(--lse-btn-next-margin-right-mobile, var(--lse-btn-next-margin-right, 0)) !important;
	}

	.lse-btn-next {
		background: var(--lse-btn-bg-mobile, var(--lse-btn-bg)) !important;
		color: var(--lse-btn-text-mobile, var(--lse-btn-text)) !important;
		border-color: var(--lse-btn-border-mobile, var(--lse-btn-border, transparent)) !important;
		box-shadow: var(--lse-btn-shadow-mobile, var(--lse-btn-shadow, none)) !important;
	}

	.lse-btn-next:hover {
		background: var(--lse-btn-bg-hover-mobile, var(--lse-btn-bg-hover)) !important;
	}

	.lse-btn-next:active {
		background: var(--lse-btn-bg-active-mobile, var(--lse-btn-bg-active)) !important;
	}

	.lse-btn-back {
		color: var(--lse-btn-back-text-mobile, var(--lse-btn-back-text, #475569)) !important;
		border-color: var(--lse-btn-back-border-mobile, var(--lse-btn-back-border, #cbd5e1)) !important;
	}

	.lse-btn-back:hover {
		background: var(--lse-btn-back-bg-hover-mobile, var(--lse-btn-back-bg-hover, var(--lse-bg))) !important;
		color: var(--lse-btn-back-text-hover-mobile, var(--lse-btn-back-text-hover, #0f172a)) !important;
		border-color: var(--lse-btn-back-border-hover-mobile, var(--lse-btn-back-border-hover, #94a3b8)) !important;
	}

	.lse-form-control {
		padding: var(--lse-input-padding-mobile, var(--lse-input-padding, 12px 16px));
		border-color: var(--lse-input-border-mobile, var(--lse-input-border, var(--lse-border))) !important;
		border-radius: var(--lse-input-radius-mobile, var(--lse-input-radius, var(--lse-radius))) !important;
		background: var(--lse-input-bg-mobile, var(--lse-input-bg, var(--lse-surface))) !important;
	}

	.lse-form-control:focus {
		border-color: var(--lse-input-focus-mobile, var(--lse-input-focus, var(--lse-primary))) !important;
		background: var(--lse-input-focus-bg-mobile, var(--lse-input-focus-bg, var(--lse-input-bg, var(--lse-surface)))) !important;
	}

	.lse-form-control::placeholder {
		color: var(--lse-input-placeholder-mobile, var(--lse-input-placeholder, var(--lse-text-muted)));
		font-size: var(--lse-fs-placeholder-mobile, var(--lse-fs-placeholder, 15px));
		line-height: var(--lse-fs-placeholder-lh-mobile, var(--lse-fs-placeholder-lh, 1.5));
	}

	.lse-checkbox-indicator {
		width: var(--lse-checkbox-size-mobile, var(--lse-checkbox-size, 20px));
		height: var(--lse-checkbox-size-mobile, var(--lse-checkbox-size, 20px));
		border-color: var(--lse-checkbox-border-mobile, var(--lse-checkbox-border, #cbd5e1));
		background: var(--lse-checkbox-bg-mobile, var(--lse-checkbox-bg, #fff));
	}

	.lse-option-card input:checked~.lse-card-content .lse-checkbox-indicator {
		background: var(--lse-checkbox-checked-bg-mobile, var(--lse-checkbox-checked-bg, var(--lse-accent, var(--lse-primary))));
	}

	.lse-card-content {
		margin: var(--lse-card-margin-mobile, var(--lse-card-margin, 0));
		border-color: var(--lse-card-border-mobile, var(--lse-card-border));
	}

	.lse-option-card:hover .lse-card-content {
		border-color: var(--lse-card-hover-border-mobile, var(--lse-card-hover-border, #a5b4fc));
		background: var(--lse-card-hover-bg-mobile, var(--lse-card-hover-bg, rgba(99, 102, 241, 0.01)));
	}

	.lse-option-card input:checked~.lse-card-content {
		background: var(--lse-card-selected-bg-mobile, var(--lse-card-selected-bg, var(--lse-card-selected)));
	}

	.lse-radio-card .lse-card-icon,
	.lse-checkbox-icon-card .lse-card-icon {
		width: var(--lse-card-icon-size-mobile, var(--lse-card-icon-size, 44px));
		height: var(--lse-card-icon-size-mobile, var(--lse-card-icon-size, 44px));
		background: var(--lse-card-icon-bg-mobile, var(--lse-card-icon-bg, #f1f5f9));
		border-radius: var(--lse-card-icon-radius-mobile, var(--lse-card-icon-radius, 12px));
		color: var(--lse-card-icon-color-mobile, var(--lse-card-icon-color, #334155));
	}

	.lse-radio-card .lse-card-content,
	.lse-checkbox-icon-card .lse-card-content {
		align-items: var(--lse-card-icon-align-items-mobile, var(--lse-card-icon-align-items, center));
		text-align: var(--lse-card-text-align-mobile, var(--lse-card-text-align, var(--lse-card-icon-align-mobile, var(--lse-card-icon-align, center))));
	}

	.lse-options-grid.lse-card-list-mobile .lse-card-content {
		justify-content: var(--lse-card-icon-align-mobile, var(--lse-card-icon-align, flex-start));
		text-align: var(--lse-card-text-align-mobile, var(--lse-card-text-align, var(--lse-card-icon-align-mobile, var(--lse-card-icon-align, left))));
	}

	.lse-service-pill {
		padding: var(--lse-pill-padding-mobile, var(--lse-pill-padding, 8px 18px)) !important;
		border-radius: var(--lse-pill-radius-mobile, var(--lse-pill-radius, 999px)) !important;
		font-size: var(--lse-pill-fs-mobile, var(--lse-pill-fs, 13px)) !important;
		font-weight: var(--lse-pill-fw-mobile, var(--lse-pill-fw, 500)) !important;
		background: var(--lse-pill-bg-mobile, var(--lse-pill-bg, #f1f5f9)) !important;
		color: var(--lse-pill-text-mobile, var(--lse-pill-text, #64748b)) !important;
		border-color: var(--lse-pill-border-mobile, var(--lse-pill-border, transparent)) !important;
	}

	.lse-header {
		background: var(--lse-header-bg-mobile, var(--lse-header-bg, var(--lse-surface)));
		border-top-color: var(--lse-header-border-mobile, var(--lse-header-border, var(--lse-border)));
		border-bottom-color: var(--lse-header-border-mobile, var(--lse-header-border, var(--lse-border)));
	}

	.lse-brand-name {
		font-weight: var(--lse-header-brand-fw-mobile, var(--lse-header-brand-fw, 700));
		font-size: var(--lse-header-brand-fs-mobile, var(--lse-header-brand-fs, 18px));
		color: var(--lse-header-brand-color-mobile, var(--lse-header-brand-color, #0f172a));
	}

	.lse-step-indicator {
		font-size: var(--lse-header-step-fs-mobile, var(--lse-header-step-fs, 12px));
		font-weight: var(--lse-header-step-fw-mobile, var(--lse-header-step-fw, 500));
		line-height: var(--lse-header-step-lh-mobile, var(--lse-header-step-lh, 1.4));
	}

	.lse-brand-logo {
		max-height: var(--lse-header-logo-size-mobile, var(--lse-header-logo-size, 32px));
	}

	.lse-option-card input:checked + .lse-card-content .lse-checkbox-indicator {
		background: var(--lse-accent-mobile, var(--lse-accent, var(--lse-primary)));
		border-color: var(--lse-accent-mobile, var(--lse-accent, var(--lse-primary)));
	}

	.lse-estimator-container {
		border-radius: var(--lse-container-radius-mobile, 0) !important;
		max-width: var(--lse-container-width-mobile, 100%);
		margin: var(--lse-container-margin-mobile, var(--lse-container-margin, 0 auto));
		background-color: var(--lse-surface-mobile, var(--lse-surface));
		background-image:
			linear-gradient(var(--lse-bg-overlay-color-mobile, var(--lse-bg-overlay-color, transparent)), var(--lse-bg-overlay-color-mobile, var(--lse-bg-overlay-color, transparent))),
			var(--lse-bg-gradient-mobile, var(--lse-bg-gradient, none)),
			url(var(--lse-bg-image-mobile, var(--lse-bg-image, '')));
		/* Match the base rule's dynamic viewport height so the header
		   pins to the top and the footer pins to the bottom of the
		   actual visible area on phones (accounts for the address bar).
		   100vh first as the fallback for engines without dvh support. */
		min-height: 100vh;
		min-height: 100dvh;
	}

	.lse-content-area {
		padding: var(--lse-content-padding-mobile, 20px 16px) !important;
	}

	.lse-header {
		padding: var(--lse-header-padding-mobile, 16px) !important;
	}

	.lse-step-header h1 {
		font-size: var(--lse-fs-heading-mobile, var(--lse-fs-heading, 22px)) !important;
	}

	.lse-wrapper {
		font-size: var(--lse-fs-body-mobile, var(--lse-fs-body, 16px));
	}

	.lse-header-top {
		margin-bottom: var(--lse-header-margin-mobile, var(--lse-header-margin, 12px)) !important;
	}

	/* Let the (potentially long) category text wrap and stay left-aligned
	   on narrow screens instead of forcing a single no-wrap line that
	   would overflow. */
	.lse-step-category {
		white-space: normal !important;
		display: inline !important;
	}

	.lse-progress-track {
		height: var(--lse-progress-height-mobile, var(--lse-progress-height, 5px));
		background: var(--lse-progress-track-mobile, var(--lse-progress-track, var(--lse-bg)));
		border-radius: var(--lse-progress-radius-mobile, var(--lse-progress-radius, var(--lse-progress-height, 5px)));
		border-width: var(--lse-progress-border-width-mobile, var(--lse-progress-border-width, 1px));
		border-color: var(--lse-progress-border-color-mobile, var(--lse-progress-border-color, var(--lse-border)));
	}

	.lse-progress-fill {
		background: var(--lse-progress-fill-mobile, var(--lse-progress-fill, var(--lse-primary)));
		border-radius: var(--lse-progress-radius-mobile, var(--lse-progress-radius, var(--lse-progress-height, 5px)));
	}

	.lse-est-check-icon,
	.lse-est-total-highlight {
		color: var(--lse-success-accent-mobile, var(--lse-success-accent, #10b981));
	}

	.lse-est-heading {
		font-size: var(--lse-success-heading-fs-mobile, var(--lse-success-heading-fs, 22px));
		font-weight: var(--lse-success-heading-fw-mobile, var(--lse-success-heading-fw, 700));
		line-height: var(--lse-success-heading-lh-mobile, var(--lse-success-heading-lh, 1.3));
		text-align: left;
	}

	.lse-est-subheading {
		font-size: var(--lse-success-subheading-fs-mobile, var(--lse-success-subheading-fs, 14px));
		text-align: left;
	}

	.lse-est-card {
		border-radius: var(--lse-success-card-radius-mobile, var(--lse-success-card-radius, 16px));
	}

	.lse-footer-nav {
		padding: var(--lse-footer-padding-mobile, 16px) !important;
	}

	.lse-footer-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.lse-footer-actions .lse-btn {
		width: 100%;
	}

	/* Card grid: only the SPACING shrinks here — column count is left to
	   the count-aware .lse-grid-* rules above (a 4/5/6-option question
	   already drops to 2 columns at 900px; a 2-option one drops to 1).
	   Forcing every grid to a single column regardless of option count
	   used to make even a simple Yes/No question take up the full screen
	   height, which is exactly what made the whole form "feel long". */
	.lse-options-grid {
		gap: var(--lse-options-grid-gap-mobile, var(--lse-options-grid-gap, var(--lse-spacing-field-mobile, var(--lse-spacing-field, 8px)))) !important;
	}

	.lse-option-card {
		padding: var(--lse-card-padding-mobile, 12px) !important;
	}

	.lse-card-content {
		/* Same fix as the Tablet block above — real var is --lse-radius. */
		border-radius: var(--lse-radius-mobile, var(--lse-radius)) !important;
		box-shadow: var(--lse-card-shadow-mobile, var(--lse-card-shadow, none)) !important;
	}

	.lse-card-label {
		font-size: var(--lse-fs-option-mobile, var(--lse-fs-option, 16px)) !important;
	}

	.lse-card-description {
		font-size: var(--lse-fs-option-desc-mobile, var(--lse-fs-option-desc, 12px)) !important;
	}

	/* Fix form fields on mobile */
	.lse-field-block {
		margin-bottom: 20px !important;
	}

	.lse-form-group label {
		font-size: 13px !important;
	}

	.lse-form-input,
	.lse-form-select,
	.lse-form-control {
		/* 16px, not smaller — iOS Safari auto-zooms the whole page on
		   focus for any input under 16px, which then has to be manually
		   pinch-zoomed back out; this is the standard fix. */
		font-size: 16px !important;
		padding: 10px 12px !important;
	}

	/* intl-tel-input (the Phone field's flag/country-code widget) sets its
	   own left padding as an INLINE style on the <input>, measured from the
	   actual rendered width of the flag + "+91"-style dial code, so there's
	   always exactly enough room before the digits start. The blanket
	   `padding: 10px 12px !important` above overrides that inline style too
	   — a stylesheet !important rule always beats an inline style,
	   regardless of selector specificity — collapsing the reserved space
	   and making the flag/dial-code sit on top of the typed number,
	   reproduced only on mobile because this rule only applies in this
	   media query. There's no CSS way to say "defer to whatever the inline
	   style says", so this uses a fixed value generous enough to clear the
	   widest real dial codes (e.g. "+998") with room to spare — slightly
	   more gap than strictly needed for short ones like "+1", but that's
	   harmless, unlike the overlap it replaces. */
	.iti input.lse-form-control,
	.iti input.lse-form-input {
		padding-top: 10px !important;
		padding-right: 12px !important;
		padding-bottom: 10px !important;
		padding-left: 90px !important;
	}

	/* Fix buttons on mobile */
	.lse-btn {
		padding: 12px 20px !important;
		font-size: 14px !important;
	}

	/* Fix step header on mobile */
	.lse-step-header {
		padding: 0 0 16px !important;
	}

	.lse-step-header h1 {
		font-size: 20px !important;
	}

	/* Fix sub-step questions on mobile */
	.lse-subq-question-block {
		margin-bottom: 20px !important;
	}

	/* The header/footer full-bleed divider line (see .lse-header::before
	   etc. above) intentionally extends past the CARD's edges using
	   negative vw-based offsets — a purely decorative trick for when the
	   card is centered and narrower than the page (desktop). On mobile
	   the card already IS the full viewport width (border-radius:0
	   above), so the line has nothing to bleed past, and a vw-based
	   negative offset is exactly the kind of rule that can add a few
	   phantom pixels of horizontal scroll depending on the browser's
	   scrollbar-width handling. Simplest fix: it isn't needed here, so
	   don't render it — the header/footer's own 1px border already draws
	   the same line at the correct (now full) width. */
	.lse-header::before,
	.lse-header::after,
	.lse-footer-nav::before,
	.lse-footer-nav::after {
		content: none;
	}

}

/* Admin-only live pricing pill — separate breakpoint from the phone-only
   block above (768px, roughly the "content-area container gets narrower
   than the pill's own bottom-right corner spot" threshold — confirmed live
   at 768px/tablet AND 375px/phone, not just phone) since .lse-footer-nav
   (`position: sticky; bottom: 0`) and the pill (`position: fixed; bottom:
   24px`) land in the same bottom strip on any viewport narrower than
   roughly 1024px, and the pill's z-index (1000) sits above the footer
   nav's (100) — confirmed live that collapsed pill silently ate every
   click meant for the Back/Next buttons underneath it. Anchoring to the
   top instead sidesteps the footer nav's height entirely (which varies
   with custom --lse-footer-padding-mobile/-tablet) rather than guessing a
   bottom clearance value — the hover-expand growth (max-height, see the
   base rule above) already grows downward, which reads naturally from a
   top position too. Also caps width so it never sits off the right edge
   of a narrow phone. */
@media (max-width: 1024px) {
	#lse-admin-pricing-pill {
		left: 12px;
		right: 12px;
		width: auto;
		/* 58px = WP core's own responsive admin toolbar height (46px at
		   its <=782px "mobile" size, 32px above that) + 12px margin — this
		   pill is admin-only, so whoever sees it is a logged-in admin who
		   very likely has that toolbar showing on top of the page too.
		   Confirmed live: without this offset, #wpadminbar (z-index 99999)
		   sits on top of the pill and makes it unclickable. */
		top: 58px;
		bottom: auto;
	}
}

/* Device Visibility Utilities */
.lse-device-desktop-only,
.lse-device-mobile-tablet-only,
.lse-device-mobile-only {
	display: block;
}

@media (max-width: 900px) {
	.lse-device-desktop-only {
		display: none !important;
	}
}

@media (min-width: 901px) {
	.lse-device-mobile-tablet-only {
		display: none !important;
	}

	.lse-device-mobile-only {
		display: none !important;
	}
}

@media (min-width: 641px) and (max-width: 900px) {
	.lse-device-mobile-only {
		display: none !important;
	}
}

/* Option Card Info Tooltip */
.lse-card-info-btn {
	position: absolute;
	top: var(--lse-tooltip-btn-top, 16px);
	right: var(--lse-tooltip-btn-right, 16px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lse-tooltip-btn-size, 18px);
	height: var(--lse-tooltip-btn-size, 18px);
	border-radius: 50%;
	background: var(--lse-tooltip-btn-bg, var(--lse-primary, #6366f1));
	color: var(--lse-tooltip-btn-color, #ffffff);
	border: 1px solid var(--lse-tooltip-btn-border, transparent);
	font-size: calc(var(--lse-tooltip-btn-size, 18px) * 0.6);
	font-weight: bold;
	cursor: help;
	flex-shrink: 0;
	z-index: 5;
	transition: all 0.2s ease;
}

/* When a CORNER ribbon badge (.lse-card-badge-wrap, e.g. "Popular") is ALSO
   present on the same card, both it and this button default to the same
   top-right corner (badge relative to .lse-option-card, button relative to
   .lse-card-content — which itself starts flush with the card's own top-left,
   so the two offsets land almost exactly on top of each other). Drop the
   button below the badge instead of letting them overlap. Tied to the
   badge's own offset variable so raising --lse-card-badge-offset shifts
   this down to match instead of re-overlapping. Deliberately excludes
   .lse-badge-style-header (the full-width header banner variant below) —
   that one sits ABOVE .lse-card-content entirely, never sharing the corner,
   so this shift would just push the tooltip button down for no reason. */
.lse-option-card:has(.lse-card-badge-wrap:not(.lse-badge-style-header)) .lse-card-info-btn {
	top: calc(var(--lse-card-badge-offset, 10px) + 26px);
}

.lse-card-info-btn:hover,
.lse-card-info-btn:focus {
	background: var(--lse-tooltip-btn-hover-bg, var(--lse-primary, #6366f1));
	color: var(--lse-tooltip-btn-hover-color, #ffffff);
	border-color: var(--lse-tooltip-btn-hover-border, var(--lse-tooltip-btn-border, transparent));
}

.lse-card-info-btn svg {
	width: 1em;
	height: 1em;
	pointer-events: none;
}

.lse-tooltip-content {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	/* CSS-only safety net (works even before JS positioning runs, e.g. the
	   very first paint) — never wider than the configured width, but also
	   never wider than the viewport itself minus a safe margin on each
	   side. positionTooltip() (frontend.js/chat.js) additionally shifts
	   this horizontally via --lse-tooltip-shift-x once it can measure the
	   actual collision against the estimator's real position, and flips
	   above via .lse-tooltip-flip-up when there's more room there. */
	width: var(--lse-tooltip-width, 240px);
	max-width: min(var(--lse-tooltip-width, 240px), calc(100vw - 20px));
	box-sizing: border-box;
	overflow-wrap: break-word;
	background: var(--lse-tooltip-bg, #1e293b);
	color: var(--lse-tooltip-color, #f8fafc);
	border: 1px solid var(--lse-tooltip-border, transparent);
	padding: 12px 16px;
	border-radius: var(--lse-tooltip-radius, 8px);
	font-size: var(--lse-tooltip-font-size, 13px);
	font-weight: 400;
	line-height: 1.5;
	box-shadow: var(--lse-tooltip-shadow, 0 10px 25px rgba(0, 0, 0, 0.2));
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px) translateX(var(--lse-tooltip-shift-x, 0px));
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	z-index: 100;
	pointer-events: none;
	text-align: left;
}

/* Flips the tooltip to open ABOVE the info button instead of below —
   toggled by positionTooltip() only when there's genuinely more room
   above than below AND the tooltip wouldn't fit below within the
   viewport's bottom safe margin. The arrow (::before, further down)
   flips to match. */
.lse-card-info-btn.lse-tooltip-flip-up .lse-tooltip-content {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: 8px;
}

@media (hover: hover) {

	.lse-card-info-btn:hover .lse-tooltip-content,
	.lse-card-info-btn:focus .lse-tooltip-content {
		opacity: 1;
		visibility: visible;
		transform: translateY(0) translateX(var(--lse-tooltip-shift-x, 0px));
		pointer-events: auto;
	}
}

.lse-card-info-btn.lse-tooltip-open .lse-tooltip-content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) translateX(var(--lse-tooltip-shift-x, 0px));
	pointer-events: auto;
	/* allow clicking inside when open */
}

.lse-option-card:hover,
.lse-option-card:focus-within,
.lse-option-card:has(.lse-tooltip-open) {
	z-index: 50;
	/* ensure card with open tooltip stays on top of subsequent sibling elements */
}

/* The real radio/checkbox <input> this card's <label> wraps is visually
   hidden (opacity:0 — see .lse-option-card input above), so its native
   focus ring is hidden too: a keyboard user tabbing through option cards
   previously had NO visible indication of which card was focused, only
   the invisible z-index bump above. :focus-visible (not :focus) so a mouse
   click still shows the existing selected/hover treatment only, matching
   how sighted mouse users already expect this component to look. */
.lse-option-card input:focus-visible+.lse-card-content {
	outline: 2px solid var(--lse-primary, #6366f1);
	outline-offset: 2px;
}

.lse-tooltip-close {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: inherit;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	z-index: 10;
}

.lse-tooltip-close:hover {
	background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
	.lse-tooltip-content {
		padding-right: 32px;
		/* make room for close button */
	}

	.lse-tooltip-close {
		display: flex;
	}
}

.lse-tooltip-content::before {
	content: '';
	position: absolute;
	top: -6px;
	right: 6px;
	border-width: 0 6px 6px 6px;
	border-style: solid;
	border-color: transparent transparent var(--lse-tooltip-bg, #1e293b) transparent;
	/* The arrow must keep pointing at the info button even when
	   positionTooltip() has shifted the tooltip BODY sideways to stay
	   inside the viewport — countering that same shift here (inverse
	   sign) keeps the arrow visually anchored near the button instead of
	   sliding away from it along with the rest of the tooltip. */
	transform: translateX(calc(-1 * var(--lse-tooltip-shift-x, 0px)));
}

/* Flipped (opens above the button) — arrow moves to the tooltip's own
   bottom edge and points down instead of up. */
.lse-card-info-btn.lse-tooltip-flip-up .lse-tooltip-content::before {
	top: auto;
	bottom: -6px;
	border-width: 6px 6px 0 6px;
	border-color: var(--lse-tooltip-bg, #1e293b) transparent transparent transparent;
}

/* Tooltip List Styles */
.lse-tooltip-style-bullets ul {
	list-style: disc;
	padding-left: 16px !important;
}

.lse-tooltip-style-checks ul {
	list-style: none;
	padding-left: 0 !important;
}

.lse-tooltip-style-checks li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 4px;
}

.lse-tooltip-style-checks li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #10b981;
	font-weight: bold;
}
/* Element Descriptions */
.lse-element-description {
	margin-top: 8px;
	margin-bottom: 12px;
	font-size: var(--lse-fs-question-desc, 0.875rem);
	font-weight: var(--lse-fs-question-desc-fw, 400);
	color: var(--lse-question-desc-color, #64748b);
	line-height: var(--lse-fs-question-desc-lh, 1.4);
	text-align: var(--lse-question-desc-align, left);
}

/* ============================================================================
   Submission loading overlay — "Estimate Assembly" full-viewport experience
   shown between clicking Send My Estimate and the response resolving.
   Created once (see lseBuildSubmitOverlay() in frontend.js/chat.js) and
   appended directly to <body>, deliberately OUTSIDE .lse-wrapper — it needs
   to sit above literally everything (theme header/footer included) via a
   very high z-index, not just this plugin's own chrome. The underlying
   wizard/chat DOM is never hidden or removed; this is purely an opaque
   visual layer stacked on top of it (see that same JS file's submit
   handler for why: the real submission — pricing calc, lead save, PDF,
   email — keeps running under here completely unchanged).
   ============================================================================ */
.lse-submit-overlay {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100dvh;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f8fc;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.lse-submit-overlay.lse-submit-overlay-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.lse-submit-overlay-inner {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 32px 24px;
	text-align: center;
	box-sizing: border-box;
}

/* ---------- Orbit / logo / document / envelope / success / error visual —
   one stacked set of absolutely-positioned layers inside a fixed-size
   circle, crossfaded via opacity as .lse-submit-overlay's own
   data-stage attribute changes (loading -> document -> envelope, then
   -> success OR error). Pure CSS reacting to one attribute — the JS
   controller never touches these elements' styles directly. ---------- */
.lse-submit-visual {
	position: relative;
	width: 180px;
	height: 180px;
	margin: 0 auto 36px;
}

.lse-submit-orbit-glow {
	position: absolute;
	inset: 30px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--lse-primary, #6366f1) 35%, transparent) 0%, transparent 70%);
	opacity: 0.5;
	animation: lseSubmitPulseGlow 2.6s ease-in-out infinite;
}

@keyframes lseSubmitPulseGlow {
	0%, 100% { opacity: 0.35; transform: scale(1); }
	50%      { opacity: 0.6;  transform: scale(1.08); }
}

.lse-submit-orbit {
	position: absolute;
	inset: 0;
	animation: lseSubmitOrbitSpin 10s linear infinite;
}

.lse-submit-overlay[data-stage="loading"] .lse-submit-orbit { opacity: 1; }
.lse-submit-overlay:not([data-stage="loading"]) .lse-submit-orbit { opacity: 0; }

@keyframes lseSubmitOrbitSpin {
	to { transform: rotate(360deg); }
}

.lse-submit-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lse-primary, #6366f1);
	opacity: 0.75;
}

.lse-submit-dot:nth-child(1) { transform: rotate(0deg)   translateX(88px); }
.lse-submit-dot:nth-child(2) { transform: rotate(60deg)  translateX(88px); opacity: 0.6; }
.lse-submit-dot:nth-child(3) { transform: rotate(120deg) translateX(88px); opacity: 0.45; }
.lse-submit-dot:nth-child(4) { transform: rotate(180deg) translateX(88px); opacity: 0.3; }
.lse-submit-dot:nth-child(5) { transform: rotate(240deg) translateX(88px); opacity: 0.45; }
.lse-submit-dot:nth-child(6) { transform: rotate(300deg) translateX(88px); opacity: 0.6; }

.lse-submit-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}

.lse-submit-icon-logo img {
  width: 140px;
  max-width: 140px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
}

.lse-submit-wordmark {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--lse-primary, #6366f1);
}

.lse-submit-overlay[data-stage="loading"] .lse-submit-icon-logo,
.lse-submit-overlay[data-stage="document"] .lse-submit-icon-logo,
.lse-submit-overlay[data-stage="envelope"] .lse-submit-icon-logo {
	opacity: 1;
	transform: scale(1);
}

/* Document/envelope stages shrink the logo up out of the way rather than
   hiding it outright — "the orbit can subtly transform", not vanish and
   get replaced by something unrelated. */
.lse-submit-overlay[data-stage="document"] .lse-submit-icon-logo,
.lse-submit-overlay[data-stage="envelope"] .lse-submit-icon-logo {
	transform: translateY(-46px) scale(0.6);
}

.lse-submit-doc-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 92px;
	height: 68px;
	background: #fff;
	border: 1px solid #e4e4f0;
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(99, 102, 241, 0.12);
	transform: translateY(28px);
}

.lse-submit-doc-card span:first-child {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #94a3b8;
}

.lse-submit-doc-check {
	color: #10b981;
	font-size: 18px;
	font-weight: 700;
}

.lse-submit-overlay[data-stage="document"] .lse-submit-icon-doc {
	opacity: 1;
	transform: scale(1);
}

.lse-submit-icon-envelope {
	font-size: 42px;
	transform: translateY(28px) scale(0.9);
}

.lse-submit-overlay[data-stage="envelope"] .lse-submit-icon-envelope {
	opacity: 1;
	transform: translateY(28px) scale(1);
}

.lse-submit-success-svg {
	width: 84px;
	height: 84px;
}

.lse-submit-success-circle {
	stroke: #10b981;
	stroke-width: 3;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
}

.lse-submit-success-check {
	stroke: #10b981;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
}

.lse-submit-overlay[data-stage="success"] .lse-submit-icon-success {
	opacity: 1;
	transform: scale(1);
}

.lse-submit-overlay[data-stage="success"] .lse-submit-success-circle {
	animation: lseSubmitDrawCircle 0.5s ease forwards;
}

.lse-submit-overlay[data-stage="success"] .lse-submit-success-check {
	animation: lseSubmitDrawCheck 0.35s ease 0.4s forwards;
}

@keyframes lseSubmitDrawCircle {
	to { stroke-dashoffset: 0; }
}

@keyframes lseSubmitDrawCheck {
	to { stroke-dashoffset: 0; }
}

.lse-submit-icon-error {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fef2f2;
	color: #ef4444;
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
}

.lse-submit-overlay[data-stage="error"] .lse-submit-icon-error {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.lse-submit-orbit,
	.lse-submit-orbit-glow { animation: none; }
}

/* ---------- Copy ---------- */
.lse-submit-heading {
	margin: 0 0 10px;
	font-size: 30px;
	font-weight: 700;
	color: var(--lse-text, #0f172a);
	line-height: 1.25;
}

.lse-submit-desc {
	margin: 0 0 26px;
	font-size: 15px;
	color: #64748b;
	line-height: 1.6;
}

.lse-submit-status-wrap {
	min-height: 24px;
	margin-bottom: 14px;
}

.lse-submit-status {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--lse-primary, #6366f1);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.lse-submit-status.lse-submit-status-fading {
	opacity: 0;
	transform: translateY(4px);
}

.lse-submit-dots-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 30px;
}

/* Success/error repurpose .lse-submit-desc for their own message (set via
   JS) rather than hiding it — only the "still in progress" indicators
   (status line, dots, "don't close this window" note) go away once
   there's an actual outcome to show. */
.lse-submit-overlay[data-stage="success"] .lse-submit-status-wrap,
.lse-submit-overlay[data-stage="success"] .lse-submit-dots-row,
.lse-submit-overlay[data-stage="success"] .lse-submit-note,
.lse-submit-overlay[data-stage="error"] .lse-submit-status-wrap,
.lse-submit-overlay[data-stage="error"] .lse-submit-dots-row,
.lse-submit-overlay[data-stage="error"] .lse-submit-note {
	display: none;
}

.lse-submit-dots-row span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #cbd5e1;
	animation: lseSubmitDotBlink 1.4s ease-in-out infinite;
}

.lse-submit-dots-row span:nth-child(2) { animation-delay: 0.2s; }
.lse-submit-dots-row span:nth-child(3) { animation-delay: 0.4s; }

@keyframes lseSubmitDotBlink {
	0%, 80%, 100% { opacity: 0.3; }
	40% { opacity: 1; }
}

.lse-submit-note {
	margin: 0;
	font-size: 13px;
	color: #94a3b8;
}

.lse-submit-email {
	display: none;
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--lse-text, #0f172a);
}

/* Only ever shown in the success stage — the element is created once and
   reused across a resubmission within the same page load (e.g. via "Edit
   answers"), so without this it would otherwise stay visible (showing the
   PREVIOUS submission's email) through the next loading/error cycle. */
.lse-submit-overlay[data-stage="success"] .lse-submit-email {
	display: block;
}

.lse-submit-error-actions {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.lse-submit-overlay[data-stage="error"] .lse-submit-error-actions {
	display: flex;
}

.lse-submit-retry-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--lse-primary, #6366f1);
	color: #fff;
	border: none;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 32px;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.lse-submit-retry-btn:hover {
	background: var(--lse-primary-hover, #4f46e5);
	transform: translateY(-1px);
}

.lse-submit-return-btn {
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 500;
	color: #64748b;
	cursor: pointer;
	text-decoration: underline;
	padding: 4px;
}

.lse-submit-return-btn:hover {
	color: var(--lse-text, #0f172a);
}

@media (max-width: 767px) {
	.lse-submit-overlay-inner {
		padding: 24px 20px;
	}
	.lse-submit-visual {
		width: 150px;
		height: 150px;
		margin-bottom: 28px;
	}
	.lse-submit-dot:nth-child(1) { transform: rotate(0deg)   translateX(72px); }
	.lse-submit-dot:nth-child(2) { transform: rotate(60deg)  translateX(72px); }
	.lse-submit-dot:nth-child(3) { transform: rotate(120deg) translateX(72px); }
	.lse-submit-dot:nth-child(4) { transform: rotate(180deg) translateX(72px); }
	.lse-submit-dot:nth-child(5) { transform: rotate(240deg) translateX(72px); }
	.lse-submit-dot:nth-child(6) { transform: rotate(300deg) translateX(72px); }
	.lse-submit-heading {
		font-size: 25px;
	}
	.lse-submit-desc {
		font-size: 14px;
	}
	.lse-submit-status {
		font-size: 15px;
	}
}

/* Responsive adjustments for element descriptions */
@media (max-width: 768px) {
	.lse-element-description {
		margin-top: 6px;
		margin-bottom: 10px;
		font-size: 0.813rem;
	}
}

/* Success Screen nested What's Included list */
.lse-bc-item-label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}
.lse-bc-item-main {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.lse-bc-included-list {
	list-style: none;
	margin: 4px 0 2px 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.lse-bc-included-item {
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--lse-text-muted, #64748b);
	margin: 0;
	padding: 0;
}
.lse-bc-included-dash {
	flex: 0 0 auto;
	color: #94a3b8;
	font-size: 13px;
	line-height: 1;
}
.lse-bc-included-text {
	flex: 1 1 auto;
	overflow-wrap: break-word;
}