/**
 * IgLou Address Qualification — front-end styles.
 *
 * THEME VARIABLES: the color / corner-radius / font values below are driven by
 * CSS custom properties so the "Style" admin screen can override them per active theme. Every
 * property uses `var(--iglou-qual-*, <default>)` where the default MUST equal the matching
 * built-in default in Theme\Fields (keep them in lockstep) — so with no active-theme overrides
 * (or if the inline <style> is ever stripped) the widget renders the built-in default look.
 * The active theme injects a `.iglou-qual { --...: ...; }`
 * block via wp_add_inline_style (see Theme\Css + Frontend\Controller); the built-in "default"
 * theme injects nothing because it equals these fallbacks. Layout (padding, flex, sizes) and a
 * few incidental greys/shadows are intentionally NOT themeable.
 */

.iglou-qual {
	/* One place to change the widget font. To use a specific theme font, set this to that
	 * family (e.g. "Poppins", sans-serif). We force a font rather than inherit because the
	 * widget's container may impose an unwanted one (e.g. monospace). */
	--iglou-qual-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
		Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;

	/* Reserved height for a field's label area. Set to two lines so a label that wraps (e.g.
	 * "Apartment, suite, unit (optional)") occupies the same space as a one-line label and all
	 * inputs in a row start on the same line. */
	--iglou-qual-label-h: 2.5em;

	max-width: 820px;
	margin: 0 auto;
	font-family: var(--iglou-qual-font);
	/* Typography base. font-size defaults to `inherit` (the page/theme size, as
	 * before); inner sizes are `em` so a base size scales the widget. color/line-height/spacing
	 * default to the theme's values. */
	font-size: var(--iglou-qual-font-size, inherit);
	line-height: var(--iglou-qual-line-height, 1.5);
	letter-spacing: var(--iglou-qual-letter-spacing, normal);
	color: var(--iglou-qual-text, inherit);
	/* Never let a long token (address, email, plan line) push panel content past its box on a
	 * narrow phone. Cascades to all panel text. */
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Apply the font directly to the widget's text + form elements. The `.iglou-qual <el>`
 * selectors out-specify a theme's bare element rules (e.g. `h2{}`, `input{}`), which an
 * inherited value would not override. */
.iglou-qual h1, .iglou-qual h2, .iglou-qual h3, .iglou-qual h4, .iglou-qual h5, .iglou-qual h6,
.iglou-qual p, .iglou-qual label, .iglou-qual a, .iglou-qual li, .iglou-qual span,
.iglou-qual div, .iglou-qual strong, .iglou-qual em, .iglou-qual b, .iglou-qual i,
.iglou-qual ul, .iglou-qual ol, .iglou-qual td, .iglou-qual th, .iglou-qual blockquote,
.iglou-qual input, .iglou-qual select, .iglou-qual textarea, .iglou-qual button {
	font-family: var(--iglou-qual-font);
}

/* Form controls: never let the effective size drop under 16px — iOS zooms the whole viewport
 * on focusing any control smaller than that, and the page's base size is out of our control.
 * Buttons don't trigger the zoom and follow --iglou-qual-button-size instead. */
.iglou-qual input,
.iglou-qual select,
.iglou-qual textarea {
	font-size: max(16px, 1em);
}

.iglou-qual button {
	font-size: 1em;
}

/* Honor the hidden attribute even on elements we give a display value (spinner, result,
 * error). Without this, `.iglou-qual-progress { display:flex }` overrides [hidden] and the
 * spinner shows permanently. */
.iglou-qual [hidden] {
	display: none !important;
}

.iglou-qual-heading {
	margin: 0 0 .25em;
	font-weight: var(--iglou-qual-heading-weight, 700);
}

.iglou-qual-subheading {
	margin: 0 0 1.25em;
	color: #5a6472;
}

/* Affiliate/referral badge (injected by qual.js when a referral code is trapped). Incidental,
   not themeable — echoes the old green-bordered chip. */
.iglou-qual-affiliate-badge {
	display: inline-block;
	margin: 0 0 1.25em;
	padding: 1px 5px;
	border: 1px solid #2ecc40;
	border-radius: 6px;
	font-size: .7em;
	line-height: 1.4;
	color: #5a6472;
	vertical-align: middle;
}

.iglou-qual-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

.iglou-qual-field {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
}

/* Street address dominates the row; unit is medium; ZIP is small. */
.iglou-qual-field-street {
	flex: 3 1 320px;
}

.iglou-qual-field-unit {
	flex: 1 1 160px;
}

.iglou-qual-field-zip {
	flex: 0 1 130px;
	max-width: 150px;
}

.iglou-qual-field label {
	font-weight: var(--iglou-qual-label-weight, 600);
	margin-bottom: .25rem;
}

/* Reserve a uniform, two-line-tall label area for every field label (but not the business
 * checkbox's own label) so a label that wraps doesn't push its input below its neighbors'.
 * With equal label heights the inputs all start on the same line. line-height is pinned so
 * exactly two lines fit the reserved height. */
.iglou-qual-field > label:not(.iglou-qual-business-label) {
	display: block;
	min-height: var(--iglou-qual-label-h);
	line-height: 1.25;
}

.iglou-qual-req {
	color: var(--iglou-qual-danger, #c0392b);
}

/* Shared text-control look: one rule for every text input, textarea, and the unit-picker
 * controls (address form + inquiry form both use it — keep them identical). */
.iglou-qual-field input[type="text"],
.iglou-qual-field input[type="email"],
.iglou-qual-field input[type="tel"],
.iglou-qual-field textarea,
.iglou-qual-combobox input,
.iglou-qual-unit-input,
.iglou-qual-unit-select {
	width: 100%;
	box-sizing: border-box;
	padding: .6rem .75rem;
	border: 1px solid var(--iglou-qual-border, #b6c0cb);
	border-radius: var(--iglou-qual-radius, 8px);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Focus: the border takes the theme's primary (so custom themes stay coherent) plus a soft
 * ring. The ring tint is incidental, non-themeable. */
.iglou-qual-field input[type="text"]:focus,
.iglou-qual-field input[type="email"]:focus,
.iglou-qual-field input[type="tel"]:focus,
.iglou-qual-field textarea:focus,
.iglou-qual-combobox input:focus,
.iglou-qual-unit-input:focus,
.iglou-qual-unit-select:focus {
	outline: none;
	border-color: var(--iglou-qual-primary, #2570c4);
	box-shadow: 0 0 0 3px rgba(37, 112, 196, .15);
}

/* The street field's combobox wrapper must fill the column so its input does too. */
.iglou-qual-combobox {
	width: 100%;
}

.iglou-qual-help {
	margin: .35rem 0 0;
	font-size: var(--iglou-qual-help-size, .85em);
	color: #6b7280;
}

/* Make the business checkbox prominent and sit it to the RIGHT of the email input,
 * top-aligned with that input rather than dropping to the bottom of the column. The top
 * margin equals the reserved label height (+ its bottom margin) so the box lines up with
 * the email field's input, which begins just below its label. */
.iglou-qual-field-business {
	justify-content: flex-start;
}

.iglou-qual-business-label {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: .5rem;
	margin-top: calc(var(--iglou-qual-label-h) + .25rem);
	padding: .55rem .7rem;
	border: 2px solid var(--iglou-qual-primary, #2570c4);
	border-radius: var(--iglou-qual-radius-lg, 12px);
	background: var(--iglou-qual-surface, #f3f8fd);
	cursor: pointer;
}

.iglou-qual-business-label input {
	width: 1.1rem;
	height: 1.1rem;
}

.iglou-qual-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: .5rem;
}

/* Error message (validation / submission problems). Shown in the status region below the form
 * (in place of the spinner) and styled to grab attention: bold, red, on a tinted band. Uses
 * flex centering so the text is vertically centered within the band regardless of line count. */
.iglou-qual-error {
	display: flex;
	align-items: center;
	margin: .25rem 0 0;
	padding: .85rem 1rem;
	color: var(--iglou-qual-danger-dark, #b3261e);
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.4;
	background: var(--iglou-qual-danger-bg, #fdecea);
	border: 1px solid var(--iglou-qual-danger-border, #f5c2bd);
	border-left: 4px solid var(--iglou-qual-danger, #c0392b);
	border-radius: var(--iglou-qual-radius, 8px);
}

/* Progress: spinner + elapsed counter (hard requirement). */
.iglou-qual-progress {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.5rem 0;
}

.iglou-qual-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--iglou-qual-spinner-track, #d4e4f5);
	border-top-color: var(--iglou-qual-primary, #2570c4);
	border-radius: 50%;
	animation: iglou-qual-spin 0.9s linear infinite;
	display: inline-block;
}

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

@media (prefers-reduced-motion: reduce) {
	.iglou-qual-spinner {
		animation-duration: 2.4s;
	}

	/* Kill the hover/focus transitions for motion-sensitive visitors. !important so this
	 * low-specificity universal rule beats the specific rules that set the transitions. */
	.iglou-qual *,
	.iglou-qual *::before,
	.iglou-qual *::after {
		transition-duration: .01ms !important;
	}
}

/* Result panels. */
.iglou-qual-result-inner {
	position: relative;
}

/* Corner pill marker for a synthetic test-address result (API.md isTest). Tracks the brand
   color with a blue fallback so it stands out against the white panel. */
.iglou-qual-testflag {
	position: absolute;
	top: .5em;
	right: .5em;
	font-size: .7em;
	line-height: 1;
	padding: .3em .6em;
	border-radius: 999px;
	background: var(--iglou-qual-primary, #2570c4);
	color: var(--iglou-qual-on-primary, #fff);
	letter-spacing: .02em;
	pointer-events: none;
}

.iglou-qual-panel {
	/* The result panel is a solid card (default white) sitting on the page/widget background, so a
	   grey page shows around it while the panel interior — promo, title, address box, body, buttons —
	   stays white. The fill is themeable (Style > Surfaces & borders > "Panel background"). A
	   per-panel background image, when set, goes on the .iglou-qual-body box only (see below), NOT
	   across the whole card. */
	background-color: var(--iglou-qual-panel-bg, #ffffff);
	border-radius: var(--iglou-qual-radius-lg, 12px);
	padding: 1.25rem 1rem;
}

.iglou-qual-title {
	color: var(--iglou-qual-heading-color, #1e3a5a);
	font-weight: var(--iglou-qual-heading-weight, 700);
	margin: 0 0 .75rem;
	/* Match the 1rem horizontal inset of the address box + body so the title lines up with the
	 * "Check another address" link and the panel copy, rather than jamming the left edge. */
	padding: 0 1rem;
}

.iglou-qual-address-box {
	border: 1px solid var(--iglou-qual-border-box, #d5dce3);
	border-radius: var(--iglou-qual-radius-lg, 12px);
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
	/* Resting elevation (incidental, non-themeable): the shadow carries the box's edge so the
	 * hairline border can stay light. */
	box-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
}

/* The echoed address lines (not the links row below them) — bump the size so it reads comfortably
 * on both mobile and desktop. */
.iglou-qual-address-box > div:not(.iglou-qual-address-links) {
	font-size: 1.15em;
}

.iglou-qual-edit {
	display: inline-block;
	margin-top: .35rem;
}

/* Sizing only — the look (padding, border, radius) comes from the shared text-control rule. */
.iglou-qual-unit-input,
.iglou-qual-unit-select {
	/* Grow to fill the row but never force it wider than a narrow (~320px) viewport. */
	flex: 1 1 240px;
	min-width: 0;
	max-width: 100%;
}

.iglou-qual-unit-entry {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: 0 1rem;
	margin-bottom: 1rem;
}

.iglou-qual-unit-label {
	display: block;
	margin: .5rem 0 .35rem;
	padding: 0 1rem;
	font-weight: 600;
}

.iglou-qual-body {
	margin: 1rem 0;
	padding: 0 1rem;
	font-size: var(--iglou-qual-body-size, 1.05em);
	/* A panel's optional background image (global or per-entry) sits on this body content box only —
	   behind the speed-panel content, not the promo, title, or address box. PanelResolver::bgStyle
	   emits background-image here (+ cover sizing when "fill" is on); these are the watermark defaults
	   (contain, left-center) used when fill is off. Status panels never get a background image. */
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

/* Unit-required body: stand out as the primary next-step instruction (status panels have no bg
   image, so this callout is the visual anchor). Shares the light surface + primary bar language of
   banners/promos but slightly softer so it does not compete with a speed-panel promo. */
.iglou-qual-unit_required .iglou-qual-body {
	border-left: 4px solid var(--iglou-qual-primary, #2570c4);
	background: var(--iglou-qual-surface, #f3f8fd);
	padding: .85rem 1.1rem;
	border-radius: var(--iglou-qual-radius, 8px);
	color: var(--iglou-qual-heading-color, #1e3a5a);
	font-weight: 600;
	line-height: 1.45;
}

/* Panel bodies hold admin-authored HTML that can carry media or a fixed-width element wider than a
 * narrow phone. Keep it inside the panel box rather than letting it bleed past the right edge. */
.iglou-qual-body img,
.iglou-qual-body svg,
.iglou-qual-body video,
.iglou-qual-body iframe {
	max-width: 100%;
	height: auto;
}

.iglou-qual-body table {
	max-width: 100%;
	display: block;
	overflow-x: auto; /* a genuinely wide table scrolls within the panel instead of breaking it */
}

/* Panel bodies commonly lay two columns side-by-side with an inline `min-width: 300px` on each
 * flex child (a desktop two-up that wraps to stack). On a narrow phone the panel's content box is
 * < 300px, so a single column's fixed min-width pushes its text past the box's right edge. Below a
 * phone breakpoint, force any inline-min-width child to full width: it drops the fixed floor and
 * makes the columns stack one-per-row instead of overflowing. Overrides the inline style (hence
 * !important) without touching each panel's saved HTML. */
@media (max-width: 600px) {
	.iglou-qual-body [style*="min-width"] {
		min-width: 100% !important;
	}

	/* Address-box links ("Edit Address" / "Check another address" / "Check another unit" / audience
	 * toggle) are tiny, slash-separated inline text on desktop — too small and too close to tap
	 * reliably on a phone. On mobile, render them as full-width outline ("ghost") buttons: a >=44px
	 * tap target (Apple HIG / WCAG 2.5.5), the secondary sibling of the filled Order button, filling
	 * in on press. Drop the "/" separators. Desktop is unchanged. */
	.iglou-qual-address-links {
		display: flex;
		flex-direction: column;
		gap: .5rem;
		/* Separate the button stack from the address above it with space + a divider line. */
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--iglou-qual-border-box, #d5dce3);
	}

	.iglou-qual-address-links a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin-top: 0; /* override .iglou-qual-edit's inline-block top margin */
		padding: .5rem 1rem;
		border: 1px solid var(--iglou-qual-primary, #2570c4);
		border-radius: var(--iglou-qual-radius, 8px);
		color: var(--iglou-qual-primary, #2570c4);
		text-align: center;
		text-decoration: none;
		transition: background-color .15s ease, color .15s ease;
	}

	/* Fill only while pressed (:active) or on keyboard focus (:focus-visible). Plain :hover/:focus
	 * would stick blue after a tap on iOS, since focus/hover linger until the next tap elsewhere. */
	.iglou-qual-address-links a:active,
	.iglou-qual-address-links a:focus-visible {
		background: var(--iglou-qual-primary, #2570c4);
		color: var(--iglou-qual-on-primary, #ffffff);
	}

	.iglou-qual-address-links .iglou-qual-sep {
		display: none;
	}

	/* Primary action buttons — the result panel's Order/inquiry buttons, the form's submit, the
	 * inquiry Send — get the same >=44px full-width stacked treatment as the address links:
	 * filled primaries above outline links reads as a clear hierarchy on a phone. */
	.iglou-qual-actions,
	.iglou-qual-actions-result {
		flex-direction: column;
		align-items: stretch;
	}

	.iglou-qual-actions .iglou-qual-btn,
	.iglou-qual-actions-result .iglou-qual-btn,
	.iglou-qual-unit-entry .iglou-qual-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		min-height: 44px;
	}

	/* The inquiry Cancel link sits centered under the full-width Send, at tap height. */
	.iglou-qual-linkbtn {
		min-height: 44px;
		align-self: center;
	}

	/* Unit picker: the select/input and the "Check this unit" button each take a full row. */
	.iglou-qual-unit-entry {
		flex-direction: column;
		align-items: stretch;
	}

	.iglou-qual-unit-select,
	.iglou-qual-unit-input {
		flex: none;
		width: 100%;
	}

	/* Comfortable touch targets (Apple HIG / WCAG 2.5.5). */
	.iglou-qual-field input[type="text"],
	.iglou-qual-field input[type="email"],
	.iglou-qual-field input[type="tel"],
	.iglou-qual-combobox input,
	.iglou-qual-unit-input,
	.iglou-qual-unit-select {
		min-height: 44px;
	}

	/* The business checkbox takes its own full row. Without the forced wrap it keeps the
	 * desktop alignment margin (which lines it up beside the email input) even after the row
	 * wraps anyway, leaving a dead gap above it. */
	.iglou-qual-field-business {
		flex-basis: 100%;
	}

	.iglou-qual-business-label {
		margin-top: 0;
	}
}

.iglou-qual-tiers p {
	margin: .25rem 0;
}

.iglou-qual-address-links {
	margin-top: .35rem;
}

.iglou-qual-sep {
	color: #999;
	margin: 0 .25rem;
}

/* Result action buttons. */
.iglou-qual-actions-result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: 1.25rem;
	/* Match the 1rem horizontal inset of the title/body/address so the buttons line up too. */
	padding: 0 1rem;
}

/* Every button in the widget shares one style (the "Check my address" button): same fill, size,
 * and shape, whether it is a <button> or an <a class="iglou-qual-btn">. The primary/secondary
 * classes are kept for markup stability but render identically for a consistent look. */
.iglou-qual-btn,
.iglou-qual-btn-primary,
.iglou-qual-btn-secondary {
	display: inline-block;
	background: var(--iglou-qual-primary, #2570c4);
	color: var(--iglou-qual-on-primary, #ffffff);
	border: 0;
	border-radius: var(--iglou-qual-radius, 8px);
	padding: .7rem 1.4rem;
	font-size: var(--iglou-qual-button-size, 1em);
	font-weight: var(--iglou-qual-button-weight, normal);
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	/* Left-justified at natural width (deliberate, since 0.9.18). The mobile full-width buttons
	 * center their label anyway via the flex centering in the 600px block below. */
	text-align: left;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Darken on hover/press/keyboard focus — NOT plain :focus, which sticks after a tap on iOS
 * (same reasoning as the mobile address links). */
.iglou-qual-btn:hover,
.iglou-qual-btn:focus-visible,
.iglou-qual-btn:active {
	background: var(--iglou-qual-primary-dark, #1f5fa8);
	color: var(--iglou-qual-on-primary, #ffffff);
}

/* Visible keyboard-focus ring on every interactive element that doesn't get the input ring. */
.iglou-qual-btn:focus-visible,
.iglou-qual-linkbtn:focus-visible,
.iglou-qual a:focus-visible {
	outline: 2px solid var(--iglou-qual-primary, #2570c4);
	outline-offset: 2px;
}

.iglou-qual-btn[disabled] {
	opacity: .6;
	cursor: default;
}

/* A plain text link rendered from a <button> (e.g. the inquiry Cancel): no fill, just a link. */
.iglou-qual-linkbtn {
	background: transparent;
	border: 0;
	padding: 0 .25rem;
	color: var(--iglou-qual-primary, #2570c4);
	font-size: 1em;
	cursor: pointer;
}

.iglou-qual-linkbtn:hover,
.iglou-qual-linkbtn:focus {
	text-decoration: underline;
}

/* Native inline inquiry form (replaces the Formidable Question form). Takes the result panel's
 * place (which in turn replaced the address form), so the page never grows taller. */
.iglou-qual-inquiry {
	margin-top: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--iglou-qual-border-box, #d5dce3);
	border-radius: var(--iglou-qual-radius-lg, 12px);
	background: var(--iglou-qual-surface-soft, #f9fbfd);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
}

.iglou-qual-inquiry-heading {
	margin: 0 0 1rem;
	color: var(--iglou-qual-heading-color, #1e3a5a);
	font-weight: var(--iglou-qual-heading-weight, 700);
}

/* Inquiry fields: consistent label spacing and equal-width inputs (the address form's two-line
 * reserved label height and text/email-only input rules don't apply cleanly here). */
.iglou-qual-inquiry .iglou-qual-field {
	margin-bottom: 0;
}

/* Space between each stacked field (address checked, message) and the next field's label so the
 * title isn't crammed against the box above it. Row fields keep the row's own bottom margin. */
.iglou-qual-inquiry-fields > .iglou-qual-field {
	margin-bottom: 1.25rem;
}

.iglou-qual-inquiry .iglou-qual-field > label {
	display: block;
	min-height: 0;
	margin-bottom: .4rem;
	line-height: 1.3;
	font-weight: var(--iglou-qual-label-weight, 600);
}

.iglou-qual-inquiry .iglou-qual-row {
	margin-bottom: 1rem;
}

/* Responsive name/email/phone row: each field grows to share the width, but a min-width floor makes
 * it wrap onto its own line when the container gets too narrow (container-based, no viewport
 * breakpoint) instead of shrinking into an unusable sliver. flex-basis must be non-zero or the row
 * never wraps. */
.iglou-qual-inquiry .iglou-qual-row > .iglou-qual-field {
	flex: 1 1 12rem;
	min-width: 10rem;
}

/* Inquiry inputs/textarea share the widget-wide text-control rule above. */

/* The read-only "address checked" field is informational, not an input to edit. */
.iglou-qual-inquiry input[readonly] {
	background: var(--iglou-qual-surface-readonly, #eef2f6);
	color: #444;
	cursor: default;
}

.iglou-qual-inquiry-msg {
	margin: .75rem 0 0;
	font-weight: 600;
}

.iglou-qual-inquiry-msg.is-ok {
	color: var(--iglou-qual-success, #157347);
}

.iglou-qual-inquiry-msg.is-error {
	color: var(--iglou-qual-danger-dark, #b3261e);
}

.iglou-qual-inquiry-again {
	margin: .5rem 0 0;
}

/* Banner tags attached above/below the base panel. */
.iglou-qual-banner {
	border-left: 4px solid var(--iglou-qual-primary, #2570c4);
	background: var(--iglou-qual-surface, #f3f8fd);
	padding: .75rem 1rem;
	margin: .75rem 0;
	border-radius: var(--iglou-qual-radius, 8px);
}

.iglou-qual-banner-title {
	margin: 0 0 .25rem;
}

/* Per-speed-panel promotion, rendered above the panel title. Shares the light-blue fill + blue left
   border of the banner tags (same theme vars), but stands out more — a bold navy title, a styled
   (not bare-inherited) body, a heavier bar and extra spacing — so the offer reads as the callout it
   is. A separate per-panel field, distinct from the plainer keyword banner. */
.iglou-qual-promo {
	border-left: 5px solid var(--iglou-qual-primary, #2570c4);
	background: var(--iglou-qual-surface, #f3f8fd);
	padding: .85rem 1.1rem;
	margin: 0 0 1.25rem;
	border-radius: var(--iglou-qual-radius, 8px);
}

.iglou-qual-promo-title {
	font-weight: 700;
	color: var(--iglou-qual-heading-color, #1e3a5a);
	margin: 0 0 .2rem;
}

.iglou-qual-promo-body {
	color: var(--iglou-qual-heading-color, #1e3a5a);
	line-height: 1.45;
}

/* Address autocomplete combobox. */
.iglou-qual-combobox {
	position: relative;
}

.iglou-qual-suggestions {
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	top: 100%;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--iglou-qual-border, #b6c0cb);
	border-radius: var(--iglou-qual-radius, 8px);
	box-shadow: 0 8px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
	max-height: 280px;
	overflow-y: auto;
}

.iglou-qual-suggestion {
	padding: .55rem .75rem;
	cursor: pointer;
	font-size: .95em;
	transition: background-color .15s ease;
}

.iglou-qual-suggestion[aria-selected="true"],
.iglou-qual-suggestion:hover {
	background: var(--iglou-qual-surface-highlight, #eaf2fb);
}

.iglou-qual-suggestion-units {
	color: var(--iglou-qual-primary, #2570c4);
	font-weight: 600;
}