/* ============================================================================
   Shared /map page layout. All rules are scoped under .bia-map so per-site
   stylesheets (css/{DomainKey}.css) can override for custom branding — same
   strategy as default-directory.css / .bia-directory.
   ============================================================================ */

.bia-map {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	height: 100vh;
	position: relative;
}

.bia-map .map-header {
	height: 0; /* sites can give this height + branding in their own css */
}

.bia-map #map {
	position: absolute;
	inset: 0;
}

/* ---- floating info panel ---- */
.bia-map .map-panel {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	width: 270px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .16);
	padding: 14px 16px;
}

.bia-map .map-panel-logo {
	max-height: 48px;
	max-width: 200px;
	display: block;
	margin-bottom: 8px;
}

.bia-map .map-panel h1 {
	font-size: 17px;
	margin: 0 0 8px;
}

.bia-map .map-legend,
.bia-map .map-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	padding: 3px 0;
}

.bia-map .map-toggle {
	cursor: pointer;
}

.bia-map .map-toggle b {
	margin-left: auto;
}

.bia-map .map-swatch {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	display: inline-block;
}

.bia-map .map-swatch-boundary {
	background: rgba(232, 84, 63, .33);
	border: 1px solid #e8543f;
}

.bia-map .map-swatch-business {
	background: #1c9e6a;
}

.bia-map .map-swatch-poi {
	background: #d96570; /* Google's default POI pin tone */
}

.bia-map .map-swatch-unregistered {
	background: #e0912f; /* admin view: businesses without a registered user account */
}

/* ---- admin-only panel section (rendered only for site admins) ---- */
.bia-map .map-admin {
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px solid #e5e5e5;
}

.bia-map .map-admin-title {
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #999;
	padding: 2px 0 3px;
}

.bia-map .map-links {
	margin-top: 8px;
	font-size: 13px;
}

.bia-map .map-attribution {
	margin-top: 8px;
	font-size: 11px;
	color: #888;
}

/* ---- marker info windows ---- */
.bia-map-info b {
	color: #e8543f;
}

.bia-map-info-logo {
	max-height: 40px;
	max-width: 120px;
	margin-bottom: 4px;
}

/* ---- no-boundary fallback ---- */
.bia-map .map-unavailable {
	max-width: 480px;
	margin: 12vh auto 0;
	text-align: center;
	padding: 32px 24px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .10);
}

.bia-map .map-unavailable-logo {
	max-height: 64px;
	max-width: 240px;
	margin-bottom: 12px;
}

.bia-map .map-unavailable h1 {
	font-size: 20px;
	margin: 0 0 10px;
}

/* ---- Collapsible panel -------------------------------------------------
   The panel is 270px wide over the top-left of the map, which on a small
   screen covers most of it. The toggle collapses it to just the button and
   remembers the choice per visitor. Default is expanded on desktop, so an
   existing site looks the same apart from the new button, and collapsed on
   narrow screens where the panel is most in the way. */

.bia-map .map-panel {
    transition: width .18s ease, padding .18s ease;
}

.bia-map .map-panel-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background: #fff;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bia-map .map-panel-toggle:hover {
    background: #f4f4f4;
    color: #222;
}

.bia-map .map-panel-toggle:focus-visible {
    outline: 2px solid #033655;
    outline-offset: 1px;
}

.bia-map .map-panel-toggle svg {
    transition: transform .18s ease;
}

/* keep the panel text clear of the button */
.bia-map .map-panel-body {
    padding-right: 26px;
}

.bia-map .map-panel.is-collapsed {
    width: auto;
    padding: 8px;
}

.bia-map .map-panel.is-collapsed .map-panel-body {
    display: none;
}

.bia-map .map-panel.is-collapsed .map-panel-toggle {
    position: static;
}

.bia-map .map-panel.is-collapsed .map-panel-toggle svg {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .bia-map .map-panel,
    .bia-map .map-panel-toggle svg {
        transition: none;
    }
}