.sbc-fi {
	background: #f0f5f9;
	color: #0e1a2b;
	border: 1px solid #d9dde3;
	border-radius: 6px;
	padding: 16px;
	font-size: 14px;
}

.sbc-fi-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.sbc-fi-toolbar-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #0e1a2b;
	text-transform: uppercase;
}

.sbc-fi-toolbar input[type="search"] {
	flex: 0 1 50ch;
	min-width: 220px;
	max-width: 50ch;
	padding: 8px 12px;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	font-size: 14px;
	background: #ffffff;
	color: #0e1a2b;
}

.sbc-fi-radius-label,
.sbc-fi-scope-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #6b7280;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sbc-fi-radius-label select,
.sbc-fi-scope-label select {
	padding: 6px 8px;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	background: #ffffff;
	color: #0e1a2b;
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.sbc-fi-radius-hint,
.sbc-fi-radius-status {
	margin: 6px 0 0;
	padding: 6px 10px;
	font-size: 12px;
	line-height: 1.4;
	background: #f6f7f9;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	color: #0e1a2b;
}

.sbc-fi-origin-marker {
	background: transparent;
	border: none;
	filter: drop-shadow( 0 2px 3px rgba( 0, 0, 0, 0.3 ) );
}

.sbc-fi-count {
	color: #c1281e;
	font-size: 14px;
	font-weight: 700;
	margin-left: auto;
}

.sbc-fi-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 6px 0 12px;
	padding: 8px 12px;
	background: #f6f7f9;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	font-size: 13px;
}

.sbc-fi-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;
}

.sbc-fi-advanced {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
}

.sbc-fi-advanced-panel {
	flex: 0 1 calc( ( 100% - 10px ) / 2 );
	max-width: calc( ( 100% - 10px ) / 2 );
	min-width: 220px;
	background: #ffffff;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	padding: 6px 10px;
	font-size: 13px;
}

.sbc-fi-advanced-panel summary {
	cursor: pointer;
	font-weight: 600;
	color: #0e1a2b;
	padding: 4px 0;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	list-style: none;
}

/* Hide the browser's default marker in every rendering path. */
.sbc-fi-advanced-panel summary::-webkit-details-marker { display: none; }
.sbc-fi-advanced-panel summary::marker { content: ''; }

.sbc-fi-summary-label {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * Chevron ▼ when closed (indicates "expands downward"), ▲ when open
 * (indicates "click to collapse upward"). Drawn as a CSS border trick.
 */
.sbc-fi-summary-label::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #6b7280;
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.sbc-fi-advanced-panel[open] .sbc-fi-summary-label::before {
	transform: rotate( 180deg );
}

.sbc-fi-panel-clear {
	background: transparent;
	border: none;
	color: #2271b1;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 3px;
}

.sbc-fi-panel-clear:hover {
	background: #ffffff;
	text-decoration: underline;
}

.sbc-fi-advanced-panel[open] {
	background: #eef1f5;
}

.sbc-fi-panel-count {
	color: #2271b1;
	font-weight: 700;
	margin-left: 6px;
}

.sbc-fi-panel-hint {
	color: #6b7280;
	font-size: 12px;
	line-height: 1.4;
	margin: 6px 0 8px;
}

.sbc-fi-state-list {
	max-height: 240px;
	overflow-y: auto;
	background: #ffffff;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	padding: 6px 10px;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 2px 12px;
}

.sbc-fi-setaside-list {
	background: #ffffff;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	padding: 6px 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sbc-fi-capability-list {
	background: #ffffff;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	padding: 8px 12px;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 12px;
}

.sbc-fi-capability-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sbc-fi-capability-group-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
	font-weight: 700;
	margin-bottom: 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid #eef1f5;
}

.sbc-fi-state-item {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 12px;
	line-height: 1.35;
	cursor: pointer;
	word-break: break-word;
}
.sbc-fi-state-item input {
	flex-shrink: 0;
	margin-top: 2px;
}

.sbc-fi-item-disabled {
	color: #9ca3af;
	cursor: not-allowed;
}

.sbc-fi-item-disabled input {
	cursor: not-allowed;
}

.sbc-fi-coming-soon {
	font-size: 10px;
	color: #6b7280;
	font-style: italic;
	margin-left: 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sbc-fi-legend-pin {
	display: inline-block;
	width: 14px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	vertical-align: middle;
	margin-right: 2px;
}

/*
 * Uniform teardrop icons for the legend — same shape as the map pins so
 * the color coding is unambiguous, but same size across all three tiers
 * so the legend reads as a color key rather than a size demo. The pins
 * on the actual map still differ in size to convey the size hierarchy.
 */
.sbc-fi-legend-pin-large {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 32"><path d="M12 0C5.4 0 0 5.4 0 12c0 8.4 12 20 12 20s12-11.6 12-20C24 5.4 18.6 0 12 0z" fill="%23c1281e" stroke="%23ffffff" stroke-width="2"/><circle cx="12" cy="12" r="4.5" fill="%23ffffff" opacity="0.9"/></svg>');
}
.sbc-fi-legend-pin-medium {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 32"><path d="M12 0C5.4 0 0 5.4 0 12c0 8.4 12 20 12 20s12-11.6 12-20C24 5.4 18.6 0 12 0z" fill="%232271b1" stroke="%23ffffff" stroke-width="2"/><circle cx="12" cy="12" r="4.5" fill="%23ffffff" opacity="0.9"/></svg>');
}
.sbc-fi-legend-pin-small {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 32"><path d="M12 0C5.4 0 0 5.4 0 12c0 8.4 12 20 12 20s12-11.6 12-20C24 5.4 18.6 0 12 0z" fill="%233d8b3d" stroke="%23ffffff" stroke-width="2"/><circle cx="12" cy="12" r="4.5" fill="%23ffffff" opacity="0.9"/></svg>');
}

/* Map fills its spanned grid area (rows 3-4); the definite row heights
 * govern total size, so no min-height here — it would force overflow. */
.sbc-fi-cell-list {
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.sbc-fi-cell-list .sbc-fi-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

@media (max-width: 900px) {
	.sbc-fi-cell-map {
		min-height: 380px;
		height: 380px;
	}
	.sbc-fi-cell-list .sbc-fi-list {
		flex: none;
		max-height: 320px;
	}
	.sbc-fi-advanced-panel {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

.sbc-fi-layout {
	display: none; /* legacy — retained selector for backward compat, unused as of v3.14 */
}

.sbc-fi-map {
	width: 100%;
	height: 100%;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	background: #f6f7f9;
	/* v3.14.5 — Leaflet handles pinch-to-zoom internally; declare touch-action
	 * pan-x pan-y so the browser doesn't intercept multi-touch and reset. */
	touch-action: pan-x pan-y;
}
.sbc-fi-map .leaflet-container {
	touch-action: none;
}

.sbc-fi-list {
	overflow-y: auto;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	background: #ffffff;
	padding: 4px;
}

.sbc-fi-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 4px;
	cursor: pointer;
	border-bottom: 1px solid #eef1f5;
}

.sbc-fi-item:last-child {
	border-bottom: none;
}

.sbc-fi-item:hover {
	background: #f6f7f9;
}

.sbc-fi-item-swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-top: 5px;
	flex-shrink: 0;
	border: 1px solid #ffffff;
	box-shadow: 0 0 0 1px #d9dde3;
}

.sbc-fi-item-body {
	flex: 1;
	min-width: 0;
}

.sbc-fi-item-org {
	font-weight: 600;
	color: #0e1a2b;
	line-height: 1.3;
}

.sbc-fi-item-loc {
	color: #6b7280;
	font-size: 12px;
	margin-top: 2px;
}

.sbc-fi-empty,
.sbc-fi-empty-list {
	color: #6b7280;
	padding: 20px;
	text-align: center;
	font-style: italic;
}

.leaflet-popup-content strong {
	color: #0e1a2b;
}

.sbc-fi-cluster {
	background: transparent;
	border: none;
}

.sbc-fi-cluster-inner {
	color: #ffffff;
	font-weight: 600;
	text-align: center;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	font-size: 13px;
}

.sbc-fi-reset-control {
	margin-top: 6px;
}

.sbc-fi-reset-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: #0e1a2b;
	background: #ffffff;
}

.sbc-fi-reset-link:hover {
	background: #f6f7f9;
	color: #2271b1;
}

.sbc-fi-legend-control {
	background: rgba( 255, 255, 255, 0.95 );
	padding: 8px 12px;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.15 );
	font-size: 12px;
	color: #0e1a2b;
	line-height: 1.5;
	margin-right: 10px;
	margin-bottom: 10px;
}

.sbc-fi-legend-row {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.sbc-fi-legend-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.15 );
	flex-shrink: 0;
}

.sbc-fi-pin {
	background: transparent;
	border: none;
	filter: drop-shadow( 0 2px 3px rgba( 0, 0, 0, 0.25 ) );
	transition: transform 0.15s ease;
	cursor: pointer;
}

.sbc-fi-pin:hover {
	transform: translateY( -2px ) scale( 1.08 );
	filter: drop-shadow( 0 4px 6px rgba( 0, 0, 0, 0.35 ) );
	z-index: 1000 !important;
}

.sbc-fi-tooltip {
	background: #0e1a2b;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.2 );
}

.sbc-fi-tooltip:before {
	border-top-color: #0e1a2b;
}

.sbc-fi-drawer-overlay {
	position: fixed;
	inset: 0;
	background: transparent;
	pointer-events: none;
	z-index: 9998;
}

.sbc-fi-drawer-overlay.visible {
	pointer-events: auto;
}

.sbc-fi-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 420px;
	max-width: 95vw;
	background: #ffffff;
	color: #0e1a2b;
	box-shadow: -4px 0 12px rgba( 0, 0, 0, 0.15 );
	transform: translateX( 100% );
	transition: transform 0.25s ease, width 0.3s ease;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.sbc-fi-drawer.expanded {
	width: 1300px;
	/* v3.13 — 95vw so expanded is never narrower than compact on any
	 * viewport, especially mobile where the difference produced a visible
	 * shrink rather than an actual expansion. */
	max-width: 95vw;
}

.sbc-fi-drawer.open {
	transform: translateX( 0 );
}

.sbc-fi-drawer-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 4px;
	z-index: 2;
}

.sbc-fi-drawer-close:hover {
	background: #f6f7f9;
	color: #0e1a2b;
}

.sbc-fi-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 44px 24px 24px;
	box-sizing: border-box;
}

.sbc-fi-drawer-logo-wrap {
	text-align: center;
	margin: 0 0 16px;
}

.sbc-fi-drawer-logo {
	display: inline-block;
	width: 100px;
	height: 100px;
	object-fit: contain;
	border: 1px solid #eef1f5;
	border-radius: 8px;
	padding: 6px;
	background: #ffffff;
}

.sbc-fi-drawer-tier {
	display: inline-block;
	color: #ffffff;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 12px;
}

.sbc-fi-drawer-org {
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 6px;
	color: #0e1a2b;
}

.sbc-fi-drawer-loc {
	color: #6b7280;
	font-size: 14px;
	margin: 0 0 16px;
	line-height: 1.4;
}

.sbc-fi-drawer-contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 0;
	border-top: 1px solid #eef1f5;
	border-bottom: 1px solid #eef1f5;
	margin-bottom: 16px;
}

.sbc-fi-drawer-link {
	color: #2271b1;
	text-decoration: none;
	font-size: 14px;
}

.sbc-fi-drawer-link:hover {
	text-decoration: underline;
}

.sbc-fi-drawer-section {
	margin-bottom: 20px;
}

.sbc-fi-drawer-section-title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
	font-weight: 700;
	margin: 0 0 8px;
}

.sbc-fi-drawer-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 0;
	font-size: 14px;
	border-bottom: 1px solid #eef1f5;
}

.sbc-fi-drawer-row:last-child {
	border-bottom: none;
}

.sbc-fi-drawer-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b7280;
	font-weight: 600;
}

.sbc-fi-drawer-value {
	color: #0e1a2b;
	line-height: 1.4;
}

.sbc-fi-drawer-scrollbox {
	background: #f6f7f9;
	border: 1px solid #d9dde3;
	border-radius: 4px;
	padding: 10px 12px;
	overflow-y: auto;
	font-size: 13px;
	line-height: 1.5;
	color: #0e1a2b;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.sbc-fi-drawer-scrollbox-sm { max-height: 80px; }
.sbc-fi-drawer-scrollbox-md { max-height: 110px; }
.sbc-fi-drawer-scrollbox-lg { max-height: 140px; }

.sbc-fi-drawer-socials {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sbc-fi-drawer-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #ffffff;
	border: 1px solid #d9dde3;
	border-radius: 50%;
	color: var( --brand, #6b7280 );
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sbc-fi-drawer-social:hover {
	background: var( --brand, #2271b1 );
	border-color: var( --brand, #2271b1 );
	color: #ffffff;
	transform: translateY( -1px );
	text-decoration: none;
}

.sbc-fi-drawer-social svg {
	display: block;
}

/* -------------------------------------------------------------------------
 * v1.23 additions — pill states, credentials table, contact form
 * ---------------------------------------------------------------------- */

/* Pill states.
 *   green   — Validated (SBA-certified set-aside; NICET/ETA verified live)
 *   yellow  — Self Cert (SAM self-attestation)
 *   gray    — Unvalidated (claimed but not verified)
 *   red     — Lapsed (was verified, past expiration)
 */
.sbc-fi-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.sbc-fi-pill-green {
	background: #d4edda;
	color: #155724;
	border: 1px solid #a8d8b5;
}
.sbc-fi-pill-yellow {
	background: #fff4c4;
	color: #6b4f00;
	border: 1px solid #e8d075;
}
.sbc-fi-pill-gray {
	background: #e9ecef;
	color: #495057;
	border: 1px solid #c9ced3;
}
.sbc-fi-pill-red {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f0a1a8;
}
.sbc-fi-pill em {
	font-style: normal;
	font-weight: 400;
	opacity: 0.75;
	margin-left: 4px;
}
.sbc-fi-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Set-aside subhead in the filter panel. */
.sbc-fi-setaside-subhead {
	font-weight: 600;
	font-size: 12px;
	color: #4a5568;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 8px 0 4px 0;
	padding-bottom: 2px;
	border-bottom: 1px solid #e2e8f0;
}
.sbc-fi-setaside-subhead:first-child {
	margin-top: 0;
}

/* Credentials table. */
.sbc-fi-cred-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.sbc-fi-cred-table th,
.sbc-fi-cred-table td {
	padding: 6px 8px;
	text-align: left;
	border-bottom: 1px solid #eef2f7;
	vertical-align: top;
}
.sbc-fi-cred-table thead th {
	background: #f7fafc;
	font-weight: 600;
	border-bottom: 2px solid #cbd5e0;
}
.sbc-fi-cred-table tbody tr:hover {
	background: #f9fafb;
}

/* Contact form. */
.sbc-fi-contact-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 100%;
}
.sbc-fi-contact-form label {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	font-weight: 600;
	color: #2d3748;
	gap: 4px;
}
.sbc-fi-contact-form input[type="text"],
.sbc-fi-contact-form input[type="email"],
.sbc-fi-contact-form input[type="tel"],
.sbc-fi-contact-form textarea {
	font: inherit;
	padding: 8px 10px;
	border: 1px solid #cbd5e0;
	border-radius: 4px;
	background: #ffffff;
	color: #1a202c;
	font-weight: 400;
	box-sizing: border-box;
	width: 100%;
}
.sbc-fi-contact-form textarea {
	resize: vertical;
	min-height: 90px;
}
.sbc-fi-contact-form input:focus,
.sbc-fi-contact-form textarea:focus {
	outline: 2px solid #3182ce;
	outline-offset: -1px;
	border-color: #3182ce;
}
.sbc-fi-contact-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.sbc-fi-contact-submit {
	background: #2c5282;
	color: #ffffff;
	border: none;
	padding: 8px 18px;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
}
.sbc-fi-contact-submit:hover:not(:disabled) {
	background: #2a4c7a;
}
.sbc-fi-contact-submit:disabled {
	background: #a0aec0;
	cursor: not-allowed;
}
.sbc-fi-contact-status {
	font-size: 12px;
	color: #4a5568;
}
.sbc-fi-contact-status.ok {
	color: #22543d;
}
.sbc-fi-contact-status.err {
	color: #822727;
}

/* Small/large drawer split — details hidden by default, revealed on expand. */
.sbc-fi-drawer-details {
	display: none;
}
.sbc-fi-drawer.expanded .sbc-fi-drawer-details {
	display: block;
}

/* Expand toggle button. */
.sbc-fi-drawer-expand-row {
	display: flex;
	justify-content: center;
	padding: 12px 0 4px 0;
}
.sbc-fi-expand-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f7fafc;
	color: #2c5282;
	border: 1px solid #cbd5e0;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.sbc-fi-expand-toggle:hover {
	background: #e6effc;
	border-color: #a3bffa;
}
.sbc-fi-expand-icon {
	font-size: 15px;
	line-height: 1;
	transform: rotate( 0deg );
	transition: transform 0.2s;
}
.sbc-fi-expand-toggle[data-expanded="1"] .sbc-fi-expand-icon {
	transform: rotate( 180deg );
}

/* Credential badges in summary. */
.sbc-fi-cred-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.sbc-fi-cred-badge {
	display: inline-block;
	background: #d4edda;
	color: #155724;
	border: 1px solid #a8d8b5;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}
.sbc-fi-cred-badges-hint {
	color: #718096;
	font-size: 11px;
	font-style: italic;
	margin-left: 4px;
}

/* When expanded, give the details section a two-column layout on wide
 * viewports so credentials and contact form sit side-by-side. When the
 * details section has only one child (e.g. contact form only), it spans
 * the full width instead of leaving an empty column. */
@media ( min-width: 900px ) {
	.sbc-fi-drawer.expanded .sbc-fi-drawer-details {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
	.sbc-fi-drawer.expanded .sbc-fi-drawer-details .sbc-fi-drawer-section {
		margin: 0;
	}
	/* Credential table can span both columns if it's a big list. */
	.sbc-fi-drawer.expanded .sbc-fi-drawer-details .sbc-fi-drawer-section:has( .sbc-fi-cred-table ) {
		grid-column: 1 / -1;
	}
	/* Sole child spans full width — no empty second column. */
	.sbc-fi-drawer.expanded .sbc-fi-drawer-details .sbc-fi-drawer-section:only-child {
		grid-column: 1 / -1;
	}
	/* Contact form goes two-column internally in the wide drawer:
	 * name/email/phone stack in the left column, message fills the right,
	 * captcha + submit span the bottom. Kills the stretched-single-column
	 * look and roughly halves the form's height. */
	.sbc-fi-drawer.expanded .sbc-fi-contact-form {
		display: grid;
		grid-template-columns: minmax( 260px, 380px ) 1fr;
		grid-auto-rows: min-content;
		gap: 10px 20px;
		align-items: start;
	}
	.sbc-fi-drawer.expanded .sbc-fi-contact-form label:nth-of-type(1),
	.sbc-fi-drawer.expanded .sbc-fi-contact-form label:nth-of-type(2),
	.sbc-fi-drawer.expanded .sbc-fi-contact-form label:nth-of-type(3) {
		grid-column: 1;
	}
	.sbc-fi-drawer.expanded .sbc-fi-contact-form label:nth-of-type(4) {
		/* Message spans rows alongside the three stacked inputs. */
		grid-column: 2;
		grid-row: 1 / span 3;
		height: 100%;
	}
	.sbc-fi-drawer.expanded .sbc-fi-contact-form label:nth-of-type(4) textarea {
		height: 100%;
		min-height: 160px;
	}
	.sbc-fi-drawer.expanded .sbc-fi-contact-form .g-recaptcha,
	.sbc-fi-drawer.expanded .sbc-fi-contact-form > p {
		grid-column: 1 / -1;
	}
	.sbc-fi-drawer.expanded .sbc-fi-contact-form .sbc-fi-contact-actions {
		grid-column: 1 / -1;
	}
}

/* Expanded-mode layout refinements: the summary block keeps a readable
 * column width instead of stretching thin across 1300px, and the toggle
 * stays centered under it. */
@media ( min-width: 900px ) {
	.sbc-fi-drawer.expanded .sbc-fi-drawer-body > *:not( .sbc-fi-drawer-details ):not( .sbc-fi-drawer-expand-row ):not( .sbc-fi-drawer-cols ) {
		max-width: 760px;
	}
	.sbc-fi-drawer.expanded .sbc-fi-drawer-expand-row {
		max-width: 760px;
		justify-content: flex-start;
	}
	/* v3.11 — the two-column wrapper takes full drawer width and splits
	 * the middle sections into left/right at 50/50. Contact form still
	 * sits below at full width via the details block. Compact drawer
	 * (below 900px, or drawer not .expanded) falls back to normal single-
	 * column flow via the default block display.
	 * v3.11.1 — vertical hairline between columns via border on the right
	 * column, symmetric 20px horizontal padding on both columns, and a
	 * horizontal hairline above the contact form (indented 40px from
	 * drawer edges) as a section break. */
	.sbc-fi-drawer.expanded .sbc-fi-drawer-cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}
	.sbc-fi-drawer.expanded .sbc-fi-drawer-col {
		min-width: 0;
		padding: 0 20px;
	}
	.sbc-fi-drawer.expanded .sbc-fi-drawer-col-right {
		border-left: 1px solid #d9dde3;
	}
	.sbc-fi-drawer.expanded .sbc-fi-drawer-details {
		border-top: 1px solid #d9dde3;
		margin: 24px 40px 0;
		padding-top: 24px;
	}
}

/* Consolidated Certifications section — subgroups with small labels. */
.sbc-fi-cert-group {
	margin-bottom: 10px;
}
.sbc-fi-cert-group:last-child {
	margin-bottom: 0;
}
.sbc-fi-cert-group-label {
	font-size: 11px;
	font-weight: 600;
	color: #718096;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

/* Success modal — center screen with dimmed backdrop, dismissible via
 * button, Escape, or backdrop click. */
.sbc-fi-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 14, 26, 43, 0.55 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
}
.sbc-fi-modal {
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.28 );
	padding: 32px 36px;
	max-width: 440px;
	width: calc( 100% - 40px );
	text-align: center;
	box-sizing: border-box;
}
.sbc-fi-modal-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 14px auto;
	border-radius: 50%;
	background: #d4edda;
	color: #155724;
	font-size: 28px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sbc-fi-modal h3 {
	margin: 0 0 10px 0;
	font-size: 20px;
	color: #0e1a2b;
}
.sbc-fi-modal p {
	margin: 0 0 22px 0;
	font-size: 14px;
	line-height: 1.55;
	color: #4a5568;
}
.sbc-fi-modal-dismiss {
	background: #2c5282;
	color: #ffffff;
	border: none;
	padding: 10px 28px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.sbc-fi-modal-dismiss:hover {
	background: #2a4c7a;
}

/* In-button spinner during send. */
.sbc-fi-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: sbc-fi-spin 0.7s linear infinite;
	vertical-align: -1px;
	margin-right: 6px;
}
@keyframes sbc-fi-spin {
	to { transform: rotate( 360deg ); }
}

/* Modal diagnostic — reps list with KC pill. */
.sbc-fi-modal-diag {
	text-align: left;
	background: #f7fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 10px 14px;
	margin: 0 0 20px 0;
	max-height: 240px;
	overflow-y: auto;
}
.sbc-fi-modal-diag-title {
	font-size: 12px;
	font-weight: 600;
	color: #4a5568;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}
.sbc-fi-modal-reps {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
	color: #2d3748;
}
.sbc-fi-modal-reps li {
	padding: 3px 0;
	border-bottom: 1px solid #edf2f7;
}
.sbc-fi-modal-reps li:last-child {
	border-bottom: none;
}
.sbc-fi-modal-kc {
	display: inline-block;
	background: #38a169;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 3px;
	letter-spacing: 0.05em;
	margin-left: 4px;
	vertical-align: 1px;
}
.sbc-fi-modal-repemail {
	color: #718096;
	font-size: 12px;
	margin-left: 4px;
}
.sbc-fi-modal-repemail-missing {
	color: #c1281e;
	font-style: italic;
}
.sbc-fi-modal-reps-none {
	color: #718096;
	font-style: italic;
	margin: 0;
	font-size: 13px;
}

/* Widen the modal so rep lists breathe. */
.sbc-fi-modal {
	max-width: 560px;
}

/* v3.0 — Certifications section note */
.sbc-fi-selfreport-note {
	font-size: 11px;
	color: #6b7280;
	font-style: italic;
	margin-top: 4px;
}
.sbc-fi-pill-selfreport {
	cursor: help;
}

/* v3.2 — Sort control bar above the list */
.sbc-fi-list-wrap {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
}
.sbc-fi-sort-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 10px;
	background: #f7fafc;
	border-bottom: 1px solid #e2e8f0;
}
.sbc-fi-sort-label {
	font-size: 12px;
	font-weight: 600;
	color: #4a5568;
	margin-right: 4px;
}
.sbc-fi-sort-btn {
	font-size: 12px;
	padding: 4px 10px;
	border: 1px solid #cbd5e0;
	border-radius: 4px;
	background: #fff;
	color: #2d3748;
	cursor: pointer;
	transition: all 0.15s;
}
.sbc-fi-sort-btn:hover {
	background: #edf2f7;
	border-color: #a0aec0;
}
.sbc-fi-sort-btn.is-active {
	background: #2b6cb0;
	border-color: #2b6cb0;
	color: #fff;
	font-weight: 600;
}
.sbc-fi-distance-input {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 10px;
	background: #edf6ff;
	border-bottom: 1px solid #bee3f8;
}
.sbc-fi-distance-label {
	font-size: 12px;
	color: #2c5282;
	font-weight: 600;
}
.sbc-fi-distance-input input[type="text"] {
	flex: 1;
	min-width: 140px;
	font-size: 13px;
	padding: 5px 8px;
	border: 1px solid #90cdf4;
	border-radius: 4px;
}
.sbc-fi-distance-go,
.sbc-fi-distance-cancel {
	font-size: 12px;
	padding: 5px 12px;
	border: 1px solid #cbd5e0;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}
.sbc-fi-distance-go {
	background: #2b6cb0;
	border-color: #2b6cb0;
	color: #fff;
}
.sbc-fi-distance-status {
	width: 100%;
	font-size: 11px;
	color: #4a5568;
	font-style: italic;
	margin-top: 2px;
}

/* v3.6 — Sidebar list item completeness pill */
.sbc-fi-item-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}
.sbc-fi-item-meta .sbc-fi-item-loc {
	margin-top: 0; /* override the standalone rule now that it lives inside .sbc-fi-item-meta */
}
.sbc-fi-item-score {
	display: inline-block;
	font-size: 11px;
	line-height: 1;
	padding: 3px 8px;
	border: 1px solid #0d9488; /* SBC teal */
	border-radius: 999px;
	color: #0d9488;
	background: transparent;
	white-space: nowrap;
}

/* v3.7 — Filter panels expand as overlays over the map (not push-down).
 * The summary bar stays in-flow; opening a panel positions the panel's
 * non-summary contents absolutely so they float over the map area
 * without displacing the sidebar.
 * v3.8.5 — Leaflet's internal z-indexes (panes 200-700, controls 1000)
 * are trapped inside the map container via an isolated stacking context
 * (position + z-index: 0 on .sbc-fi-map). Panels then only need a small
 * z-index to float above the map, and the site theme's nav dropdowns
 * (typically far higher) are never fought. */
.sbc-fi-map {
	position: relative;
	z-index: 0; /* creates stacking context — traps all Leaflet layers */
	isolation: isolate;
}
.sbc-fi-advanced {
	position: relative;
	z-index: 2;
}
.sbc-fi-advanced-panel {
	position: relative;
}
.sbc-fi-advanced-panel[open] > *:not(summary) {
	position: absolute;
	top: 100%;
	left: -1px;
	right: -1px;
	z-index: 3;
	background: #ffffff;
	border: 1px solid #d9dde3;
	border-top: none;
	border-radius: 0 0 4px 4px;
	padding: 8px 10px 12px;
	box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.12 );
	max-height: 60vh;
	overflow-y: auto;
}


/* v3.10 — Empty state for Capabilities and Certifications drawer boxes */
.sbc-fi-empty-box {
	color: #9ca3af;
	font-size: 12px;
	font-style: italic;
	padding: 4px 0;
}

/* v3.10.1 — Bullet lists in Certifications/Capabilities drawer boxes */
.sbc-fi-value-list {
	list-style: disc;
	padding-left: 20px;
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.5;
}
.sbc-fi-value-list li {
	margin: 2px 0;
}

/* v3.11.2 — Contact section title as a teal pill call-to-action */
.sbc-fi-contact-title {
	display: inline-block;
	background: #0d9488;
	color: #ffffff;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: 0.02em;
	margin: 0 0 12px;
}

/* v3.12.3 — Paired pills row in drawer header. Tier pill and Contact
 * button share identical dimensions (padding, font-size, border-radius,
 * text-transform) so they read as a matched pair. Row is left-aligned. */
.sbc-fi-drawer-pills {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}
.sbc-fi-drawer-pills .sbc-fi-drawer-tier,
.sbc-fi-drawer-pills .sbc-fi-contact-open {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	border: none;
	line-height: 1.4;
	cursor: default;
	margin: 0;
}
.sbc-fi-drawer-pills .sbc-fi-contact-open {
	background: #1d6680;
	cursor: pointer;
	transition: background 0.15s ease;
}
.sbc-fi-drawer-pills .sbc-fi-contact-open:hover {
	background: #164e63;
}
.sbc-fi-drawer-pills .sbc-fi-contact-open:focus-visible {
	outline: 3px solid rgba( 29, 102, 128, 0.35 );
	outline-offset: 2px;
}
/* Left-align the expand toggle (was centered in some layouts). */
.sbc-fi-drawer-expand-row {
	justify-content: flex-start;
}

/* Contact modal — overlay + card. Reuses the same z-index band as the
 * success modal (100000) so it stacks over the drawer (9999) and everything
 * else. */
.sbc-fi-contact-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 14, 26, 43, 0.55 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100001;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
}
.sbc-fi-contact-modal {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.35 );
	width: 800px;
	max-width: 100%;
	padding: 28px 32px;
	position: relative;
	box-sizing: border-box;
}
.sbc-fi-contact-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 4px;
}
.sbc-fi-contact-modal-close:hover {
	background: #f6f7f9;
	color: #0e1a2b;
}
.sbc-fi-contact-modal-title {
	margin: 0 32px 20px 0;
	font-size: 20px;
	color: #0e1a2b;
	line-height: 1.3;
}
.sbc-fi-contact-modal-body {
	font-size: 14px;
}
/* Two-column layout inside the modal for wide viewports — same treatment
 * as the previous in-drawer contact form. */
@media ( min-width: 720px ) {
	.sbc-fi-contact-modal-body .sbc-fi-contact-form {
		display: grid;
		grid-template-columns: minmax( 260px, 380px ) 1fr;
		grid-auto-rows: min-content;
		gap: 10px 20px;
		align-items: start;
	}
	.sbc-fi-contact-modal-body .sbc-fi-contact-form label:nth-of-type(1),
	.sbc-fi-contact-modal-body .sbc-fi-contact-form label:nth-of-type(2),
	.sbc-fi-contact-modal-body .sbc-fi-contact-form label:nth-of-type(3) {
		grid-column: 1;
	}
	.sbc-fi-contact-modal-body .sbc-fi-contact-form label:nth-of-type(4) {
		grid-column: 2;
		grid-row: 1 / span 3;
		height: 100%;
	}
	.sbc-fi-contact-modal-body .sbc-fi-contact-form label:nth-of-type(4) textarea {
		height: 100%;
		min-height: 160px;
	}
	.sbc-fi-contact-modal-body .sbc-fi-contact-form .g-recaptcha,
	.sbc-fi-contact-modal-body .sbc-fi-contact-form > p {
		grid-column: 1 / -1;
	}
}

/* Hide the empty details block that used to hold the in-drawer form.
 * v3.12 keeps the DOM element for CSS compatibility but it's always empty
 * so no border-top or spacing should render. */
.sbc-fi-drawer.expanded .sbc-fi-drawer-details:empty {
	border-top: none;
	margin: 0;
	padding: 0;
}

/* v3.12.1 — Cancel button next to Send message in the contact form */
.sbc-fi-contact-cancel {
	background: #ffffff;
	color: #4a5568;
	border: 1px solid #cbd5e0;
	padding: 8px 18px;
	border-radius: 6px;
	font-size: 14px;
	cursor: pointer;
	margin-right: 8px;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.sbc-fi-contact-cancel:hover {
	background: #f6f7f9;
	border-color: #a0aec0;
}
.sbc-fi-contact-cancel:focus-visible {
	outline: 3px solid rgba( 45, 55, 72, 0.2 );
	outline-offset: 2px;
}

/* v3.13 — Compact drawer is a scannable summary card at any viewport size.
 * Hide the detail sections (About, In-Building Services, Products & Services,
 * Coverage, Certifications, Capabilities, Social) when the drawer is NOT
 * expanded. Header block, contact links row, and expand toggle stay visible.
 * The two-column wrapper contains all the hideable sections in one node. */
.sbc-fi-drawer:not(.expanded) .sbc-fi-drawer-cols {
	display: none;
}

/* v3.13.1 — Teal edge bar on left of drawer, full height, with white
 * chevron ">" centered. Entire bar is clickable to close the drawer.
 * Works in both compact and expanded states. */
.sbc-fi-drawer-edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 100%;
	background: #1d6680;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background 0.15s ease;
}
.sbc-fi-drawer-edge:hover {
	background: #164e63;
}
.sbc-fi-drawer-edge:focus-visible {
	outline: 3px solid rgba( 255, 255, 255, 0.6 );
	outline-offset: -4px;
}
.sbc-fi-drawer-edge span {
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
}
.sbc-fi-drawer-edge-chev {
	width: 20px;   /* full bar width */
	height: 44px;  /* taller than wide — clearly a directional indicator */
	display: block;
}
/* Push drawer body right by the bar's width so content doesn't sit
 * beneath it. */
.sbc-fi-drawer-body {
	padding-left: 36px; /* 20 bar + 16 breathing room */
}

/* v3.13.5 — On mobile, revert filter panels from overlay to push-down flow.
 * Overlays were the right desktop choice (panels sit side-by-side above the
 * map+sidebar; expanding must not shift the layout). On mobile everything
 * stacks vertically, so an overlay that extends 60vh past the panel summary
 * bar can cover the map, the sidebar, or the site footer entirely. Regular
 * flow gives the panel a natural place to sit and pushes the rest down. */
@media (max-width: 720px) {
	.sbc-fi-advanced-panel[open] > *:not(summary) {
		position: static;
		box-shadow: none;
		border-top: 1px solid #d9dde3;
		border-radius: 0 0 4px 4px;
		max-height: none;
	}
}

/* v3.14 — Widget uses a 4-row × 2-column grid with named areas.
 *   Row 1 left: FILTERS toolbar         | Row 1-2 right: header (spans 2)
 *   Row 2 left: filter panels           |
 *   Row 3 left: map (spans rows 3-4)    | Row 3 right: sort bar + count
 *                                       | Row 4 right: sidebar list
 * Below 900px the grid collapses to a single column; DOM order dictates the
 * mobile stack: header → FILTERS → panels → sort bar → list → map.
 * Header hides the logo on mobile (site nav already carries SBC branding). */
.sbc-fi {
	display: grid;
	grid-template-columns: 2fr 1fr;
	/* Row 4 must be DEFINITE. In an auto-height container a 1fr row
	 * resolves to max-content, so the un-scrolled 68-item list was sizing
	 * the row (and the map spanning rows 3-4) to thousands of pixels. */
	grid-template-rows: auto auto auto 560px;
	grid-template-areas:
		"filters header"
		"panels  header"
		"map     sortbar"
		"map     list";
	column-gap: 16px;
	row-gap: 12px;
}
.sbc-fi-cell-header  { grid-area: header;  }
.sbc-fi-cell-filters { grid-area: filters; }
.sbc-fi-cell-panels  { grid-area: panels;  }
.sbc-fi-cell-map     { grid-area: map;     }
.sbc-fi-cell-sortbar { grid-area: sortbar; }
.sbc-fi-cell-list    { grid-area: list;    }

.sbc-fi-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding: 4px 8px;
	height: 100%;
}
.sbc-fi-header-logo {
	display: block;
	height: 80px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	flex-shrink: 0;
}
.sbc-fi-header-title {
	color: #1d6680;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-align: right;
	line-height: 1.05;
}
@media ( max-width: 900px ) {
	.sbc-fi {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas: none;
	}
	.sbc-fi-cell-header,
	.sbc-fi-cell-filters,
	.sbc-fi-cell-panels,
	.sbc-fi-cell-sortbar,
	.sbc-fi-cell-list,
	.sbc-fi-cell-map {
		grid-area: auto;
	}
	.sbc-fi-header {
		justify-content: center;
	}
	.sbc-fi-header-logo {
		display: none;
	}
	.sbc-fi-header-title {
		font-size: 20px;
		text-align: center;
	}
}

/* v3.16.3 — inline info icons on FILTERS / RADIUS / SCOPE labels.
 * Small (60% of label font) superscript-positioned ⓘ. No cursor change
 * so the pointer stays consistent across the row. */
.sbc-fi-info-icon {
	display: inline-block;
	margin-left: 2px;
	font-size: 60%;
	line-height: 1;
	color: #6b7280;
	vertical-align: super;
	text-transform: none;
	letter-spacing: normal;
	font-weight: normal;
	position: relative;
}
.sbc-fi-info-icon:hover,
.sbc-fi-info-icon:focus {
	color: #1d6680;
	outline: none;
}

/* v3.16.4 — attribute-driven tooltip: any element carrying data-tip gets
 * a dark navy bubble above it on hover/focus. Used by the info icons on
 * FILTERS/RADIUS/SCOPE and by the Completeness sort button. */
[data-tip] {
	position: relative;
}
[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% );
	background: #0e1a2b;
	color: #ffffff;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	white-space: normal;
	width: 260px;
	max-width: 80vw;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.2 );
}
[data-tip]::before {
	content: '';
	position: absolute;
	bottom: calc( 100% + 2px );
	left: 50%;
	transform: translateX( -50% );
	border: 6px solid transparent;
	border-top-color: #0e1a2b;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 1000;
}
[data-tip]:hover::after,
[data-tip]:focus::after,
[data-tip].tip-open::after,
[data-tip]:hover::before,
[data-tip]:focus::before,
[data-tip].tip-open::before {
	opacity: 1;
}

/* v3.16.6 — no tooltip on Completeness sort button on mobile. Tap on
 * mobile triggers :focus, which was showing the tooltip on single press.
 * Long-press wasn't reliable enough either. On mobile the button label
 * is sufficient — the "Completeness" text is self-explanatory. */
@media (max-width: 900px) {
	.sbc-fi-sort-btn[data-tip]::after,
	.sbc-fi-sort-btn[data-tip]::before {
		display: none !important;
	}
}

/* Map layer toggle row above the map */
.sbc-fi-map-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 8px 12px;
	background: #f5f7f8;
	border-bottom: 1px solid #e0e0e0;
	font-size: 13px;
}
.sbc-fi-layer-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: #333;
	user-select: none;
}
.sbc-fi-layer-toggle input {
	margin: 0;
}
.sbc-fi-layer-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
}
.sbc-fi-layer-swatch-contractors { background: #b1263a; }
.sbc-fi-layer-swatch-seminars    { background: #2a8f9f; }

/* Seminar pin icon — subtle drop shadow so it doesn't fade into map tiles */
.sbc-fi-seminar-icon {
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Seminar pin popup */
.sbc-fi-seminar-popup {
	font-size: 13px;
	line-height: 1.4;
}
.sbc-fi-seminar-popup ul {
	margin: 6px 0;
	padding-left: 18px;
	list-style: disc;
}
.sbc-fi-seminar-popup li {
	margin: 2px 0;
}
.sbc-fi-seminar-count {
	color: #666;
	font-size: 12px;
}
.sbc-fi-seminar-link {
	display: inline-block;
	margin-top: 6px;
	color: #2a8f9f;
	font-weight: 600;
	text-decoration: none;
}
.sbc-fi-seminar-link:hover {
	text-decoration: underline;
}

/* "Layers:" label ahead of the toggle checkboxes */
.sbc-fi-map-toggles-label {
	font-weight: 700;
	font-size: 13px;
	color: #333;
	letter-spacing: 0.02em;
}

/* Seminar pin tooltip */
.leaflet-tooltip.sbc-fi-seminar-tip,
.sbc-fi-seminar-icon + .leaflet-tooltip {
	font-size: 12px;
	line-height: 1.4;
}

/* Layers control on the map (Leaflet control, top-right) */
.sbc-fi-layers-control {
	background: #fff;
	padding: 10px 14px;
	border-radius: 6px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25);
	font-size: 13px;
	line-height: 1.7;
	min-width: 190px;
}
.sbc-fi-layers-control .sbc-fi-layers-title {
	font-weight: 700;
	margin-bottom: 4px;
	color: #333;
}
.sbc-fi-layers-control .sbc-fi-layer-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: #333;
	user-select: none;
	white-space: nowrap;
}