.wizard-step-wrapper {
	/* Was 580px before the selection-mode row (Only selected/Select all) was added to
	   list-view steps — bumped by the ~70-80px that row now takes up, so the grid keeps the
	   same visible row count it had before instead of being squeezed to make room for it. */
	height: 660px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px;
	/* Default step-content width cap. Two-column and nested-grid steps override this one
	   variable below instead of every width-capped piece (form, title, alert, action row, tip)
	   needing its own copy of the condition + value edited separately. */
	--wizard-step-max-width: 480px;
}
/* A step whose layout has a two-column row (DevExpress renders those items/groups with a
   dxbl-col-md-6 grid class instead of the full-width dxbl-col-md-12) needs more room than the
   default single-column cap. */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-form-layout.dxbl-fl .dxbl-col-md-6) {
	--wizard-step-max-width: 750px;
}
/* A step with a nested grid (e.g. the New Route Wizard's Schedules picker) fills the whole modal
   instead — a fixed cap left dead margin on both sides that a grid (columns, capacity numbers,
   route names) actually benefits from using, unlike a narrow text form. */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid) {
	--wizard-step-max-width: none;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header {
	border-bottom: 0px solid rgba(var(--midgrey), 0.25) !important;
	height: 0px !important;
	min-height: 0px !important;
	padding: 0px !important;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .dxbl-popup-header-button {
	position: absolute !important;
	right: 20px;
	top: 20px;
	z-index: 5;
	border: 1px solid rgba(var(--midgrey), 0.35);
	border-radius: 50%;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .dxbl-popup-header-button:hover {
	background: var(--site-primary) !important;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .dxbl-popup-header-button:hover .dxbl-image {
	filter: var(--icon-filter-white) !important;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .view-caption-root {
	display:none;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-body .main {
    margin-top: -10px;
}
.dxbl-popup:has(.wizard-welcome) .dxbl-modal-content .dxbl-modal-body .main {
    margin-top: -10px;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-body {
	padding: 0px !important;
	/* The wizard-step-wrapper owns internal scrolling; keep the modal body from
	   adding its own scrollbar when content lands a hair over the fixed height.
	   Must be "clip", not "hidden": "hidden" still leaves this element scrollable via
	   scrollTop/scrollIntoView (just without a visible scrollbar) — a list-view step's grid
	   focusing its first row on load calls scrollIntoView, which bubbles up to this element
	   (the nearest scrollable ancestor above the grid's own viewport) and scrolls it down by
	   ~27px, shifting the whole wizard-heading title upward out from under the popup's fixed
	   close button. "clip" removes it from the scroll chain entirely, so that call has nowhere
	   left to scroll. */
	overflow: clip !important;
}
.wizard-step-wrapper:has(.wizard-welcome){
	border: 0px !important;
}

.wizard-footer-button {
    margin: 0px !important;
	border-top:  1px solid rgba(var(--midgrey), 0.25);
	padding: 0px 20px 10px;
	height: 70px;
}
.wizard-step-wrapper button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled),
.wizard-footer-button  button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled) {
	border-radius: 8px;
}

.wizard-step-wrapper button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled):hover,
.wizard-footer-button  button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled):hover {
    border: 1px solid var(--site-primary) !important;
}
.wizard-step-wrapper button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled),
.wizard-footer-button  button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled) {
    border: 1px solid rgba(var(--midgrey), 0.25) !important;
	box-shadow: 0px 0px 0px rgba(var(--primary), 0.5);
	border-radius: 8px;
}
.wizard-step-wrapper button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover,
.wizard-footer-button  button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover {
    background-color:rgba(var(--primary), 0.15) !important;
}
.wizard-prev-btn::before {
	content:"";
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../../../../IImageService/arrow-left") center center no-repeat !important;
	background-size: cover !important;
	margin-right: 5px;
}
.wizard-finish-btn::before {
	content:"";
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../../../../IImageService/check") center center no-repeat !important;
	background-size: cover !important;
	margin-right: 5px;
	filter: var(--icon-filter-white);
}
.wizard-close-btn::before {
	content:"";
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../../../../IImageService/check") center center no-repeat !important;
	background-size: cover !important;
	margin-right: 5px;
	filter: var(--icon-filter-white);
}
.wizard-next-btn::after {
	content:"";
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../../../../IImageService/arrow-right") center center no-repeat !important;
	background-size: cover !important;
	margin-left: 5px;
}
.dxbl-theme-dark .wizard-footer-button .dxbl-btn::before,
.dxbl-theme-dark .wizard-footer-button .dxbl-btn::after {
	filter: var(--icon-filter-white);
}
/* The prev/next/finish/close icons are a plain background-image, not a currentColor mask, so
   they don't automatically pick up the button's disabled (dimmed) look the way the text does —
   dim them to match when the button itself is disabled (e.g. Next before validation passes). */
.wizard-footer-button button.dxbl-btn.dxbl-disabled::before,
.wizard-footer-button button.dxbl-btn:disabled::before,
.wizard-footer-button button.dxbl-btn.dxbl-disabled::after,
.wizard-footer-button button.dxbl-btn:disabled::after {
	opacity: .5;
}
/* Both form-ui.css (color: var(--site-primary) !important + a focus-ring box-shadow) and
   detail-view.css (opacity: 1 !important) have near-global button:hover rules that don't
   exclude disabled buttons, so hovering a disabled Next/Prev recolors its text AND un-dims it
   back to a fully "active" look. Neutralize both specifically for disabled wizard footer
   buttons so hovering a disabled button looks the same as not hovering it. */
.wizard-footer-button button.dxbl-btn.dxbl-disabled:hover,
.wizard-footer-button button.dxbl-btn:disabled:hover {
	color: inherit !important;
	box-shadow: none !important;
	opacity: .5 !important;
}
.wizard-footer-button button.dxbl-btn.dxbl-disabled:hover::before,
.wizard-footer-button button.dxbl-btn:disabled:hover::before,
.wizard-footer-button button.dxbl-btn.dxbl-disabled:hover::after,
.wizard-footer-button button.dxbl-btn:disabled:hover::after {
	opacity: .5 !important;
}
.wizard-footer-button button.dxbl-btn.dxbl-btn-primary::before,
.wizard-footer-button button.dxbl-btn.dxbl-btn-primary::after {
	filter: var(--icon-filter-white) !important;
}

.dxbl-modal-body:has(.wizard-step-wrapper) {
	padding: 0px 4px;
}
.wizard-step-wrapper dxbl-form-layout.dxbl-fl {
	overflow: visible;
	max-width: var(--wizard-step-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	transition: max-width 0.2s ease-out;
}

/* Two-column detail steps (e.g. New Driver Wizard) render each dxbl-col-md-6 column as its
   own independently-stacked block, so a row that's taller than a plain text input (a
   reference editor with an inline pencil-to-edit link, like Time Zone/Driver Group) throws
   every row below it out of alignment with its counterpart in the other column. Give every
   field row the same minimum height so row N on the left always lines up with row N on the
   right, whatever kind of editor sits in either one. */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-form-layout.dxbl-fl .dxbl-col-md-6) .dxbl-fl-item {
	min-height: 64px;
}

/* The Create Report wizard's Data Source step (ReportWizardDataSourceModel) has a FilterCriteriaOperator
   property using XAF's built-in CriteriaPropertyEditor (.dx-filtereditor). That widget defaults to a tall
   fixed height regardless of how little the criteria tree actually needs, which — stacked under the Data
   Source picker and above the Advanced Mode checkbox — pushes the step's total content past the wizard
   popup's available height and forces the whole step to scroll. Scoped to
   .wizard-step-wrapper.wizard-step-detail so this never reaches the same editor on a plain
   (non-wizard) DetailView elsewhere in the app (e.g. a report definition's own filter). !important is
   required: the widget sets its own height as an inline style, which only a !important rule beats. */
.wizard-step-wrapper.wizard-step-detail .dx-filtereditor {
	height: 160px !important;
}

.wizard-step-wrapper.wizard-step-detail .dx-filtereditor-tree-container {
	overflow-y: auto;
}

.wizard-step-wrapper:has(.wizard-welcome) {
	margin-top: 0px;
	height: 660px;
}
.wizard-heading {
	min-height: 70px;
	margin-top: 0px;
	margin-bottom: 0px !important;
	border-bottom:  1px solid rgba(var(--midgrey), 0.25);
	padding: 15px 20px;
}

.wizard-heading-title {
	gap: 12px;
}

.wizard-heading-icon {
	width: 50px;
	height: 50px;
	padding: 10px;
	border-radius: 50%;
	background-color: rgba(var(--primary), 0.12);
	filter: var(--icon-filter);
}

.wizard-heading-subtitle {
	margin-top: 2px;
}

.wizard-progress {
	min-width: 160px;
	margin-top: 2px;
	/* Clears the popup's own close button, which is absolutely positioned at
	   top:20px/right:20px over this header rather than laid out in the flow. */
	margin-right: 40px;
	padding: 8px 16px;
}

.wizard-progress-label {
	margin-bottom: 2px;
	text-align: left !important;
}

.wizard-progress-track {
	height: 6px;
	width: 100%;
	border-radius: 10px;
	background-color: rgba(var(--midgrey), 0.25);
	overflow: hidden;
}

.wizard-progress-fill {
	height: 100%;
	border-radius: 10px;
	background-color: var(--site-primary);
	transition: width 0.2s ease-out;
}

.wizard-icon {
	display: block;
	width: 110px;
	height: 110px;
	margin-bottom: 16px;
	filter: var(--icon-filter);
}

.wizard-success-icon {
	filter: var(--icon-filter-green);
}

.wizard-step-title {
	margin-bottom: 5px !important;
	text-align: left !important;
	font-size: 1.25rem;
	font-weight: 400 !important;
	transition: max-width 0.2s ease-out;
}

.wizard-step-wrapper.wizard-step-list .wizard-step-title {
	max-width: none !important;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
}

.wizard-summary-text {
	max-width: 520px;
	font-size: 1rem;
	line-height: 1.7;
}

.wizard-summary-text p {
	margin-top: 0;
	margin-bottom: -0.3rem;
}

.wizard-step-description {
	/* Same width-capped box as the title/form column — the icon+text sit inset from that edge
	   by this box's own padding, same as any normal callout box, rather than the box itself
	   being wider. !important throughout: needs to beat Bootstrap's own .alert rule at equal
	   specificity, same as the other Bootstrap .alert overrides in this block. */
	width: 100%;
	max-width: var(--wizard-step-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	background-color: rgba(var(--lightblue), 0.15) !important;
	border-color: rgba(var(--lightblue), 0.3) !important;
	color: currentColor !important;
	border-radius: 10px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	font-size: 0.875rem;
	transition: max-width 0.2s ease-out;
}

.dxbl-theme-dark .wizard-step-description {
	border-color: rgba(var(--lightblue), 0.5) !important;
	color: currentColor !important;
}

/* List-view steps (map/grid) run edge to edge, so the alert spans full width too. Since it now
   runs flush to the wrapper's own outer edges (not a centered column), it needs its own inset
   back for breathing room — unlike the detail-step case, there's no sibling column to align to. */
.wizard-step-wrapper.wizard-step-list .wizard-step-description {
	max-width: none !important;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 16px;
	padding-right: 16px;
}

/* Step-action button row (e.g. "View Map") mirrors the alert's width at every breakpoint
   so its right edge lines up with the alert box instead of the wider outer step wrapper. */
.wizard-step-action-row {
	max-width: var(--wizard-step-max-width);
	transition: max-width 0.2s ease-out;
}
.wizard-step-wrapper.wizard-step-list .wizard-step-action-row {
	max-width: none !important;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The "only selected" vs "select all matching records" choice (e.g. the New Route wizard's
   Customers step) mirrors the alert/step-action-row width at every breakpoint. */
.wizard-selection-mode-row {
	display: flex;
	gap: 12px;
	max-width: var(--wizard-step-max-width);
	margin-bottom: 16px;
	margin-top: -4px;
	transition: max-width 0.2s ease-out;
}
.wizard-step-wrapper.wizard-step-list .wizard-selection-mode-row {
	max-width: none !important;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.wizard-selection-mode-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex: 1 1 0;
	border: 1px solid rgba(var(--midgrey), 0.35);
	border-radius: 10px;
	padding: 5px 7px;
	cursor: pointer;
	font-size: 0.875rem;
}
/* Same blue palette as .wizard-step-description (the alert box above it), so the chosen
   option reads as part of the same "informational" callout family. */
.wizard-selection-mode-card.active {
	border-color: rgba(var(--lightblue), 0.5) !important;
	background-color: rgba(var(--lightblue), 0.15) !important;
}
.wizard-selection-mode-title {
	font-weight: 600;
	color: currentColor;
}
.wizard-selection-mode-card.active .wizard-selection-mode-title {
	color: currentColor;
}

/* A step action (e.g. "View Map") that takes over the step in place draws on top of the
   step's own view as an opaque overlay, rather than hiding/unmounting it — see
   WizardComponent.razor. Keeps the underlying DetailView alive and untouched underneath. */
.wizard-step-replacement-overlay {
	position: absolute;
	inset: 0;
	background: var(--dxbl-body-bg, #1e1e1e);
	z-index: 5;
}

/* The map/grid editor sizes to height:100%, so give its container a real height:
   make the list-view step a flex column and let the view area fill what's left
   under the title + alert. */
.wizard-step-wrapper.wizard-step-list {
	display: flex;
	flex-direction: column;
}
.wizard-step-wrapper.wizard-step-list .wizard-step-view {
	flex: 1 1 auto;
	min-height: 0;
	/* The list/grid editor (e.g. a custom card list) sizes to height:100%, but its actual
	   rendered content can be taller than the flex box's allocated space — without clipping,
	   the overflow bleeds straight past this box and visually sits on top of the tip below it.
	   This only applies to short, non-scrolling lists; real data grids override this below. */
	overflow: hidden;
}

/* A real data grid (e.g. the Customer picker) needs its own internal scrollbar for
   potentially hundreds of rows, so it can't be clipped like the short card-list case above —
   and there isn't room for both a scrollable grid and a tip, so the tip is dropped here to
   give the grid all the available vertical space. */
.wizard-step-wrapper.wizard-step-list:has(dxbl-grid) .wizard-step-view {
	/* The grid gets its own bounded height below so ITS internal viewport scrolls
	   (sticky header + pager), not this box — no need for this box to scroll too. */
	overflow: hidden;
	margin-top: -5px !important;
}
/* XAF's ListView only gets a real (non-auto) height from its own default CSS via
   ancestor selectors like ".main-content > .grid-content" — none of which match here,
   since the wizard hosts the ListView inside .wizard-step-view, not .main-content. Without
   this, the grid renders every row at full natural height, so instead of the grid's own
   body scrolling under a fixed header/pager, the entire grid (header + rows + pager)
   overflows and .wizard-step-wrapper ends up scrolling the whole step as one block. */
.wizard-step-wrapper.wizard-step-list:has(dxbl-grid) .wizard-step-view .main-content {
	height: 100%;
}
.wizard-step-wrapper.wizard-step-list:has(dxbl-grid) .wizard-step-view .grid-content {
	height: 100%;
}
.wizard-step-wrapper.wizard-step-list:has(dxbl-grid) .wizard-step-view dxbl-grid {
	max-height: 100%;
}
.wizard-step-wrapper.wizard-step-list:has(dxbl-grid) .wizard-step-tip {
	display: none;
}
/* DraggableGridListEditor (Create Report wizard's Columns/Sorting steps) wraps its DxGrid in its
   own ".draggable-grid" div rather than XAF's standard ".main-content"/".grid-content" chrome, so
   the height:100% overrides above don't reach it the same way — its default CSS
   (draggable-grid.css) sizes to height:100% of its own immediate parent, which isn't
   guaranteed to have a definite (non-auto) height inside .wizard-step-view. Pinning it via
   position:absolute + inset:0 against .wizard-step-view's own "position:relative" (set inline in
   WizardComponent.razor) sidesteps the percentage-height chain entirely — the same technique
   .wizard-step-replacement-overlay already uses to fill this same box regardless of what sits
   between them. */
.wizard-step-wrapper.wizard-step-list .wizard-step-view .draggable-grid {
	position: absolute;
	inset: 0;
	height: auto;
}

/* A .wizard-step-detail step whose own DetailView contains a nested ListPropertyEditor grid
   (e.g. the New Route Wizard's "Multiple Schedules" step, AvailableScheduleModel's Schedules,
   NewCustomerBusinessHoursModel's BusinessHours) needs the same stretch-to-fill treatment the
   .wizard-step-list:has(dxbl-grid) block above already gives a bare top-level ListView step —
   .wizard-step-detail never got it because nobody had hit the nested-grid case until this one.
   Unlike the list-view case, the tip stays visible here (there's still room for both) instead
   of being hidden — this only grows the grid area to claim the space its own margin-top:auto
   used to leave as a blank gap between the grid and the tip.
   .wizard-step-detail is already display:flex/flex-direction:column (see the "dock the tip"
   rule below); .wizard-step-view just needs to become a growing flex item of that column.
   The .main-content/.grid-content/dxbl-grid chain mirrors the list-view block above verbatim —
   those are DevExpress's own generic grid-list-editor wrapper classes, present whether the
   grid is top-level or nested, so the same height:100% chain reaches a nested grid too.
   Requires gridHeightLock (ui-helper.js) to stay out of this grid's container (it now excludes
   anything inside a wizard/popup) — its own inline pixel height would otherwise beat this.
   dxbl-grid's own max-height is a fixed pixel cap, not a percentage: DxGrid already renders its
   rows inside its own internal dxbl-scroll-viewer, but that viewport only virtualizes/scrolls off
   a real measured height — a percentage tied to a flexed/shrunk ancestor doesn't reliably reach
   it, and content taller than the step (e.g. one "None" row per remaining day of the week on
   NewCustomerBusinessHoursModel's BusinessHours) just gets clipped raw by .wizard-step-view's own
   overflow — its Add-row line and pager past the visible edge, with nothing to scroll to reach
   them. A concrete max-height gives the grid a size it can actually measure against, so its OWN
   scrollbar takes over past that point (whole rows, never a partial one) — overflow-y:auto on
   .wizard-step-view is only the fallback for the rest of the step if the grid's cap plus
   everything after it still doesn't fit. */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid) .wizard-step-view {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid) .wizard-step-view .main-content {
	height: 100%;
}
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid) .wizard-step-view .grid-content {
	height: 100%;
}
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid) .wizard-step-view dxbl-grid {
	max-height: 380px;
}

/* A step with a grid AND another field AFTER it (e.g. the New Route Wizard's Schedules grid
   followed by RouteScheduleModel.DistributionHint) is a different shape from the plain
   grid-only case above (e.g. NewCustomerBusinessHoursModel's BusinessHours) — that trailing
   field needs to render at its own natural height alongside the grid instead of being just
   another (un-styled) block after it. The rendered DOM for the step is .wizard-step-view >
   .detail-view-content with EACH top-level DetailView field as its own sibling
   <dxbl-form-layout> underneath it (not one shared container the .main-content/.grid-content
   chain above could split space within — .main-content never actually appears in this DOM; that
   chain is a no-op here regardless).
   :has(.alert-box-callout, .alert-box-callout-warning) singles out this shape — every trailing
   field this wizard actually renders after a grid is one of the shared AlertBox/WarningBox/
   AmberInfoBox editors (see Base/…/Editors/AlertBox), so its rendered markup is what's checked
   for rather than DOM position. A selector built the "position" way instead — a dxbl-form-layout
   containing the grid, followed by a sibling dxbl-form-layout — needs :has(dxbl-grid) nested
   inside the outer :has()'s own argument to express "containing the grid", and :has() cannot be
   nested inside :has() (an earlier version of this rule tried exactly that; browsers silently
   drop the whole selector as invalid, so it never matched anything at all).
   The grid's own max-height/overflow handling is already covered by the plain-grid block above
   (same selector prefix, so it still applies); this block only adds what's specific to having a
   field after it — flex-column layout with a gap, and both the grid's own form-layout and the
   trailing field's form-layout at their natural height (flex's own initial sizing, no grow/
   shrink) so neither steals the other's space. dxbl-form-layout is a custom element and doesn't
   reliably pick up flex's own cross-axis stretch (align-items:stretch) the way a plain block
   child would, so width:100% is explicit rather than assumed. The grid's own max-height is capped
   lower here (320px vs. the plain-grid case's 380px) — a trailing field needs its own share of
   .wizard-step-view's height too, on top of the 12px gap the flex-column below adds before it. */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid):has(.alert-box-callout, .alert-box-callout-warning) .wizard-step-view dxbl-grid {
	max-height: 302px;
}
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid):has(.alert-box-callout, .alert-box-callout-warning) .wizard-step-view .detail-view-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid):has(.alert-box-callout, .alert-box-callout-warning) .wizard-step-view .detail-view-content > dxbl-form-layout {
	width: 100%;
}
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid):has(.alert-box-callout, .alert-box-callout-warning) .wizard-step-view .detail-view-content > dxbl-form-layout:not(:has(dxbl-grid)) {
	flex: 0 0 auto;
}

/* Same fix, but for a step-action's replacement content (e.g. "View Map" on a DetailView
   step) — .wizard-step-wrapper has a fixed height regardless of step type, and .wizard-step-view
   otherwise only sizes to the (shorter) underlying form's natural height, leaving the overlay's
   own background showing as a gap below the map. Stretch it to fill what's actually available. */
.wizard-step-wrapper:has(.wizard-step-replacement-overlay) {
	display: flex;
	flex-direction: column;
}
.wizard-step-wrapper:has(.wizard-step-replacement-overlay) .wizard-step-view {
	flex: 1 1 auto;
	min-height: 0;
	/* The underlying form (DynamicWizardView) is a normal-flow child, not absolutely
	   positioned, so when this box is shorter than the form's full natural content height
	   (several fields), the form overflows past the bottom edge — right past where the
	   overlay's own inset:0 coverage ends. Clip it so nothing leaks out below the map. */
	overflow: hidden;
}

.wizard-step-description strong {
	color: #1f6fb2;
}

.wizard-alert-icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	margin-top: -1px;
	filter: var(--icon-filter-blue);
}

.wizard-step-tip {
	/* Same width-capped box as the title/form/alert column, with its own inset padding below. */
	width: 100%;
	max-width: var(--wizard-step-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	background-color: rgba(var(--midgrey), 0.1);
	border-radius: 10px;
	font-size: 14px;
	transition: max-width 0.2s ease-out;
}

/* Dock the tip to the bottom of the step regardless of how short the content above it is,
   instead of floating right under it with dead space before the footer. */
.wizard-step-wrapper.wizard-step-detail {
	display: flex;
	flex-direction: column;
}
.wizard-step-wrapper.wizard-step-detail .wizard-step-tip,
.wizard-step-wrapper.wizard-step-list .wizard-step-tip {
	margin-top: auto;
}

.wizard-step-wrapper.wizard-step-list .wizard-step-tip {
	max-width: none !important;
	width: 100%;
	margin-top: 10px !important;
	margin-bottom: -10px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 10px !important;
}

.wizard-tip-icon {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	margin-top: 1px;
	filter: var(--icon-filter);
}

.summary-card {
    background: var(--bs-body-bg);
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid rgba(var(--midgrey),0.25);
}

.summary-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    padding: 10px 0;
    border-bottom: 1px solid rgba(var(--midgrey),0.25);
}

    .summary-row:last-child {
        border-bottom: none;
    }

.summary-label {
    font-weight: 600;
    color: currentColor;
    font-size: 13px;
}

.summary-value {
    color: currentColor;
    font-size: 14px;
}

.summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.summary-badge {
    background: var(--bs-body-bg);
    color: currentColor;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
	border: 1px solid rgba(var(--midgrey),0.25);
}

.summary-empty {
    color: #888;
    font-style: italic;
}
@media (max-width: 1250px) and (max-height: 900px) {
.dxbl-popup:has(.wizard-step-wrapper) {
	height: 720px !important;
}
.wizard-step-wrapper:has(.wizard-welcome),
.wizard-step-wrapper {
  margin-top: 0px;
  height: 580px;
}
}