/* Office map page (page-map.php). Kept visually consistent with the rest
   of the site's styling by using the theme's own design tokens
   (style.css's :root custom properties) instead of separate hardcoded
   colors -- updated 2026-09-15 to match the sitewide redesign, which
   moved those tokens' actual values (this file previously hardcoded a
   green #2e7d32 / gray #ddd,#eee,#fafafa palette that predated and did
   not match the redesigned masthead/footer/cards). The theme's style.css
   defines these custom properties and is always enqueued alongside this
   file, so they resolve correctly here despite living in a different
   stylesheet. */

.musaned-map-page {
	display: flex;
	flex-direction: column;
}

/* Shared overlay design tokens -- the search box (top-center), filters
   (top-right), and mode toggle (bottom-center) each evolved their styling
   separately across earlier passes. These give the three floating boxes a
   single consistent radius/shadow language instead of three near-but-not-
   quite-matching ones. Scoped to .musaned-map-wrap rather than :root since
   these are map-overlay-specific, not sitewide tokens. */
.musaned-map-wrap {
	--map-overlay-radius: 10px;
	--map-overlay-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	--map-overlay-gap: 8px;
}

/* Full-bleed wrapper for the map itself + its two overlays (search on top,
   filter toggle on bottom). Only this wrapper (and #musaned-map inside it)
   goes edge-to-edge -- the .container.vb block above it (toggle + title,
   see page-map.php) stays a normal contained-width block, matching the
   rest of the site. `position: relative` here is what the overlays
   position themselves against. Width is 100vw (not 100%) specifically to
   escape the theme's own .container max-width cap that its ancestors sit
   inside -- see the left/right recentering trick right below. */
.musaned-map-wrap {
	position: relative;
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end: calc(50% - 50vw);
}

/* Height budget: sitewide masthead (#site-header, .musaned-masthead) is a
   fixed ~72px, plus the contained .container.vb block above (toggle pills
   + title + divider + its own .vb padding) -- unlike the old layout, the
   map-mode filter toggle is now an overlay INSIDE #musaned-map's own box
   rather than a separate flow element, so it no longer needs to be
   subtracted here. 220px covered both before; now only the masthead +
   .container.vb needs covering, so the map can claim noticeably more of
   the viewport. Kept as a calc() rather than a hardcoded vh so the map
   always fills exactly what's left below the page chrome, no more/less. */
#musaned-map {
	width: 100%;
	max-width: 100%;
	/* The title now drops down from the site header (collapsed by default), so the map gets the space the
	   title card used to take: masthead + hanging tab + view toggle are about 150px. */
	height: calc(100vh - 150px);
	min-height: 420px;
	border-radius: 0;
}

@media (max-width: 576px) {
	#musaned-map {
		height: calc(100vh - 170px);
		min-height: 360px;
	}
}

/* -- Bottom overlay: verified/accurate/all filter pills -------------- */

.musaned-map-toggle {
	position: absolute;
	inset-inline: 0;
	bottom: 30px; /* clears the tile attribution line at the very bottom */
	z-index: 500; /* above Leaflet's own panes (max ~650 for controls, tiles/markers are lower) but below Leaflet's popup/control z-indexes */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 16px;
	background: transparent;
	pointer-events: none; /* clicks pass through the transparent bar to the map underneath... */
}

.musaned-map-toggle__btn,
.musaned-map-toggle__count,
.musaned-map-toggle__select {
	pointer-events: auto; /* ...except on the actual pills/selects/count themselves. */
}

.musaned-map-toggle__btn {
	font-family: "blfont", sans-serif;
	border: 1px solid var(--border-color-dark, #ddd);
	background: #fff;
	color: var(--secondary-color-dark, #333);
	border-radius: var(--border-radius, 999px);
	padding: 6px 16px;
	font-size: 0.9rem;
	cursor: pointer;
	box-shadow: var(--map-overlay-shadow);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.musaned-map-toggle__btn:hover {
	border-color: var(--border-color-dark, #999);
}

.musaned-map-toggle__btn.is-active {
	background: #1A1A1A;
	border-color: #1A1A1A;
	color: #fff;
}

.musaned-map-toggle__count:empty {
	display: none; /* no empty white pill next to the mode buttons while the count is not known yet */
}

.musaned-map-toggle__count {
	font-size: 0.85rem;
	color: var(--secondary-color-dark, #333);
	background: #fff;
	border-radius: var(--border-radius, 999px);
	padding: 6px 12px;
	box-shadow: var(--map-overlay-shadow);
	margin-inline-start: 4px;
}

@media (max-width: 576px) {
	.musaned-map-toggle {
		bottom: 30px;
		gap: 6px;
	}
	.musaned-map-toggle__btn {
		font-size: 0.8rem;
		padding: 5px 12px;
	}
}

/* -- Top-right overlay: region/city filters, stacked -------------------- */

.musaned-map-filters {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 500;
	/* 6 filters (region/city/nationality/occupation/religion/recruitment) --
	   a 2-column grid keeps this from becoming one tall column that eats
	   into the map. Real visual polish is a later design pass; this is
	   just a functional baseline so 6 filters don't look broken today. */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
}

.musaned-map-filters__select {
	pointer-events: auto;
	font-family: "blfont", sans-serif;
	font-size: 0.85rem;
	border: 1px solid var(--border-color-dark, #ddd);
	background: #fff;
	color: var(--secondary-color-dark, #333);
	border-radius: var(--border-radius, 999px);
	padding: 5px 12px;
	box-shadow: var(--map-overlay-shadow);
	width: 140px;
	max-width: 100%;
}

.musaned-map-filters__select:disabled {
	opacity: 0.5;
}

@media (max-width: 767px) {
	/* Phones and small tablets (owner, 2026-09-20): the map shows only the search box at the top and the
	   mode pills at the bottom; the six region / city / nationality / occupation / religion / recruitment
	   filters are hidden here (they stay on tablets and desktops). */
	.musaned-map-filters {
		display: none;
	}
}

@media (max-width: 767px) {
	.musaned-map-filters {
		/* Phones and small tablets: the search box spans the full width, so the filters go BELOW it
		   (58px = its 8px top offset + 42px height + a gap), two columns, with the same 12px side
		   margin as the search box. The zoom and key buttons are moved under this block (see the
		   Leaflet corner rule below), so nothing overlaps. */
		top: 58px;
		right: 12px;
		left: 12px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}
	.musaned-map-filters__select {
		font-size: 0.8rem;
		width: 100%;
		height: 36px;
		padding: 4px 10px;
	}
}

@media (max-width: 576px) {
	.musaned-map-filters__select {
		font-size: 0.75rem;
	}
}

/* -- Top overlay: office search box ----------------------------------- */

.musaned-map-search {
	position: absolute;
	inset-inline: 0;
	top: 14px;
	z-index: 500;
	display: flex;
	justify-content: center;
	padding: 0 16px;
	background: transparent; /* wrapper itself is transparent -- only the input/dropdown below are opaque */
	pointer-events: none;
}

.musaned-map-search__input {
	/* Matches the homepage's #search-input exactly (page-listing.php's
	   .search-wrapper input, style.css) -- same box/typography so the two
	   search fields read as one consistent design, just in an overlay
	   here instead of the filter bar. */
	pointer-events: auto;
	width: 100%;
	/* Wider on big screens, but never under the 420px it always had: the two-column filter block sits in the
	   top corner, so the box stops growing before it would touch it (640px = that block plus margins, both sides). */
	max-width: clamp(420px, calc(100vw - 640px), 620px);
	font-family: "blfont", sans-serif;
	font-size: 16px;
	padding: 8px 16px;
	height: 42px;
	border: 1px solid var(--border-color-dark, #afafaf);
	border-radius: 4px;
	background: #fff;
	color: #000;
	box-shadow: var(--map-overlay-shadow);
	text-align: right;
}

.musaned-map-search__input:focus {
	outline: none;
	border-color: var(--primary-color, #2e7d32);
}

.musaned-map-search__results {
	pointer-events: auto;
	position: absolute;
	top: calc(100% + 6px);
	width: 100%;
	max-width: clamp(420px, calc(100vw - 640px), 620px); /* same as the input above it */
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--border-color, #eee);
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	max-height: 260px;
	overflow-y: auto;
}

.musaned-map-search__results[hidden] {
	display: none;
}

.musaned-map-search__result {
	padding: 8px 16px;
	font-size: 0.85rem;
	color: var(--secondary-color-dark, #333);
	cursor: pointer;
	text-align: right;
}

.musaned-map-search__result:hover,
.musaned-map-search__result.is-active {
	background: var(--light-color, #fafafa);
}

.musaned-map-search__empty {
	padding: 8px 16px;
	font-size: 0.85rem;
	color: var(--border-color-dark, #999);
}

.musaned-map-search__result-title {
	display: block;
}

.musaned-map-search__result-loc {
	display: block;
	font-size: 0.75rem;
	color: var(--border-color-dark, #999);
}

/* Message shown when the current filter combination matches zero pins --
   appended into #musaned-map itself, same pattern as .musaned-map-error. */
.musaned-map-empty {
	position: absolute;
	inset-inline: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 400;
	text-align: center;
	margin: 0 auto;
	max-width: 320px;
	background: #fff;
	border-radius: var(--border-radius, 8px);
	padding: 14px 20px;
	box-shadow: var(--map-overlay-shadow);
	color: var(--secondary-color-dark, #333);
	font-size: 0.9rem;
}

@media (max-width: 767px) {
	.musaned-map-search {
		top: 8px;
		padding: 0 12px;
	}
	.musaned-map-search__input,
	.musaned-map-search__results {
		max-width: none; /* the desktop 420px minimum was wider than a phone */
	}
	.musaned-map-search__input {
		font-size: 0.85rem;
		padding: 8px 14px;
	}
}

/* Leaflet's own corner (zoom +/- and the key button) sat on top of the search box and the filters on
   phones. map.js measures where the filter block ends and stores it in --map-stack-bottom on the wrapper;
   the corner is pushed below it. 140px is the fallback if the script has not run yet. */
@media (max-width: 767px) {
	.musaned-map-wrap .leaflet-top.leaflet-left {
		margin-top: var(--map-stack-bottom, 140px);
	}
}

/* Office pin: teardrop SVG (drawn in map.js pinIcon()). Flat, with one soft edge so it stays readable on the
   map tiles. Selected = larger with the Registry Blue outline. */
.musaned-map-pin__svg {
	display: block;
	overflow: visible;
	filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
	transform-origin: 50% 100%;
	transition: transform 0.15s ease;
}

.musaned-map-pin.is-selected .musaned-map-pin__svg {
	transform: scale(1.25);
}

.musaned-map-pin.is-selected .musaned-map-pin__body {
	stroke: #59A7C4;
	stroke-width: 3;
	stroke-dasharray: none;
}

@media (prefers-reduced-motion: reduce) {
	.musaned-map-pin__svg {
		transition: none;
	}
}

/* Cluster: white circle, ink border, count. */
.musaned-map-cluster {
	background: transparent;
}

.musaned-map-cluster span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	background: #fff;
	border: 2px solid #1A1A1A;
	border-radius: 50%;
	color: #1A1A1A;
	font-family: "blfont", sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.musaned-map-cluster:hover span {
	background: #EEEEEE;
}

/* Musaned Ads: Pins -- sponsored third-party pins, drawn in map.js adPinSvg(). Deliberately a different SHAPE
   (rounded square + "AD" label), not just a new colour, so it can never be mistaken for an office marker at a glance --
   non-negotiable given this site's core value is verification trust, and Google Maps' own convention of always
   labeling sponsored pins as such. */

.musaned-map-popup__ad-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	color: #6b7280;
	margin-bottom: 4px;
}

/* Office card (popup). Flat and quiet like the rest of the site: hairlines, ink text, one dark main button.
   Buttons use !important because the theme forces every <button> dark and Leaflet/theme links override text colour. */
/* The spacing lives on the wrapper as padding. As margins on Leaflet's content element they collapsed through the
   wrapper, which left no room under the buttons. */
.leaflet-container .leaflet-popup-content-wrapper {
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(26, 26, 26, 0.22);
	padding: 20px 24px 24px;
}

.leaflet-container .leaflet-popup-content {
	margin: 0;
}

.musaned-map-popup {
	text-align: right;
	direction: rtl;
	min-width: 240px;
	font-family: "blfont", sans-serif;
	color: #1A1A1A;
}

/* Header (sponsored cards only; office cards use the top bar below). */
.musaned-map-popup--ad .musaned-map-popup__header {
	padding-right: 28px; /* keeps the sponsored card's first line clear of Leaflet's close button */
}

.musaned-map-popup h3 {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.45;
	color: #1A1A1A;
}

.musaned-map-popup__header-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.musaned-map-popup__rating {
	font-size: 0.9rem;
	font-weight: 600;
	color: #1A1A1A;
}

.musaned-map-popup__star {
	color: #DA9A09;
}

.musaned-map-popup__rating-count {
	color: #757575;
	font-weight: 400;
}

/* Tier badge: neutral pill with a dot in the same colour as the pin on the map. */
.musaned-map-popup__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	padding: 2px 10px;
	border: 1px solid #D4D4D4;
	border-radius: 999px;
	background: #FAFAFA;
	color: #1A1A1A;
}

.musaned-map-popup__badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #909090;
}

.musaned-map-popup__badge--gold::before {
	background: #DDAC00;
}

.musaned-map-popup__badge--black::before,
.musaned-map-popup__badge--fixed::before,
.musaned-map-popup__badge[class*="badge--absolute"]::before {
	background: #292929;
}

/* Meta: location and the approximate-location note, quieter than the header. */
.musaned-map-popup__meta {
	margin: 10px 0 12px;
}

.musaned-map-popup__loc {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 0.85rem;
	color: #404040;
}

.musaned-map-popup__loc svg {
	flex: none;
	width: 15px;
	height: 15px;
	color: #757575;
}

.musaned-map-popup__approx-note {
	margin: 8px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: #6b4e00;
	background: #FFF8E1;
	border-radius: 4px;
	padding: 6px 8px;
}

.musaned-map-popup__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid #D4D4D4;
}

.musaned-map-popup__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Every action is a white outlined button; only "view profile" is dark. */
body .musaned-map-popup .musaned-map-popup__btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 12px;
	font-family: "blfont", sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 4px;
	background: #fff !important;
	color: #1A1A1A !important;
	border: 1px solid #AFAFAF !important;
	transition: background-color 0.15s ease;
}

body .musaned-map-popup .musaned-map-popup__btn:hover {
	background: #EEEEEE !important;
}

body .musaned-map-popup .musaned-map-popup__btn:focus-visible {
	outline: 2px solid #59A7C4;
	outline-offset: 2px;
}

body .musaned-map-popup .musaned-map-popup__btn svg {
	flex: none;
	width: 16px;
	height: 16px;
}

body .musaned-map-popup .musaned-map-popup__btn--profile {
	flex: none;
	width: 100%;
	background: #1A1A1A !important;
	color: #fff !important;
	border-color: #1A1A1A !important;
}

body .musaned-map-popup .musaned-map-popup__btn--profile:hover {
	background: #404040 !important;
}


.musaned-map-popup__share-menu {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border: 1px solid var(--border-color, #eee);
	border-radius: 4px;
	overflow: hidden;
}

.musaned-map-popup__share-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	font-size: 0.8rem;
	color: var(--secondary-color-dark, #333);
	text-decoration: none;
}

.musaned-map-popup__share-link:hover {
	background: var(--light-color, #fafafa);
}

.musaned-map-popup__share-link svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.musaned-map-error {
	text-align: center;
	color: #b00020;
	padding: 20px;
}

/* -- Map key (top-left, under the zoom buttons) ------------------------- */

.musaned-map-legend {
	background: #fff;
	border-radius: var(--map-overlay-radius, 10px);
	box-shadow: var(--map-overlay-shadow);
	border: 0;
	font-family: "blfont", sans-serif;
	color: #1A1A1A;
	max-width: 190px;
	min-width: 34px;
}

.musaned-map-legend__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: var(--map-overlay-radius, 10px);
	background: transparent;
	padding: 0;
	cursor: pointer;
	color: inherit;
}

.musaned-map-legend__toggle:hover {
	background: #EEEEEE;
}

.musaned-map-legend__list {
	list-style: none;
	margin: 0;
	padding: 2px 12px 10px;
	border-top: 1px solid #D4D4D4;
}

.musaned-map-legend__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 6px;
	font-size: 0.8rem;
}

.musaned-map-legend__list .musaned-map-pin__svg {
	width: 18px;
	height: 23px;
	flex: none;
	filter: none;
}

.musaned-map-legend__list .musaned-map-pin__svg--ad {
	height: 18px;
}

/* -- Corner buttons: verify office (start corner) and advertise (end corner) ------ */

.musaned-map-cta {
	position: absolute;
	bottom: 34px; /* clears the tile attribution line */
	z-index: 500;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	font-family: "blfont", sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #1A1A1A;
	background: #fff;
	border: 1px solid #AFAFAF;
	border-radius: 4px;
	box-shadow: var(--map-overlay-shadow);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.musaned-map-cta:hover,
.musaned-map-cta:focus-visible {
	background: #EEEEEE;
	color: #1A1A1A;
}

.musaned-map-cta--verify {
	inset-inline-start: 14px;
}

.musaned-map-cta--advertise {
	inset-inline-end: 14px;
}

@media (max-width: 576px) {
	.musaned-map-cta {
		bottom: 78px; /* sits above the mode-toggle row instead of beside it */
		padding: 6px 12px;
		font-size: 0.8rem;
	}
	.musaned-map-cta--verify {
		inset-inline-start: 8px;
	}
	.musaned-map-cta--advertise {
		inset-inline-end: 8px;
	}
}

/* -- Spacing on the map page only -------------------------------------- */

/* The map runs edge to edge, so the footer sits flush against it (the theme's 3rem gap is for text pages). */
body.page-template-page-map .musaned-footer {
	margin-top: 0;
}

/* Breathing room between the title/toggle block and the map. */
.musaned-map-page .container.vb {
	margin-bottom: 1rem;
}

/* -- Beat the theme's global button reset ------------------------------- */
/* style.css forces every <button> to a dark background with !important. These map buttons set their own look, so
   they need a more specific !important rule to win. Only the active mode pill is dark. */
body .musaned-map-toggle .musaned-map-toggle__btn {
	background: #fff !important;
	color: #1A1A1A !important;
	border: 1px solid var(--border-color-dark, #AFAFAF) !important;
}

body .musaned-map-toggle .musaned-map-toggle__btn.is-active {
	background: #1A1A1A !important;
	color: #fff !important;
	border-color: #1A1A1A !important;
}

body .musaned-map-legend .musaned-map-legend__toggle {
	background: transparent !important;
	color: #1A1A1A !important;
	border: 0 !important;
	margin-right: auto;
}

body .musaned-map-legend .musaned-map-legend__toggle:hover {
	background: #EEEEEE !important;
}

/* -- Office card: top bar (share | office ID | close) and one info row ------------ */

.musaned-map-popup {
	position: relative;
}

/* direction:ltr fixes the order to share (left), ID (middle), close (right) in Arabic and English alike. */
.musaned-map-popup__bar {
	direction: ltr;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 28px;
	margin-bottom: 12px;
}

.musaned-map-popup__id {
	flex: 1;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #757575;
}

/* Room for Leaflet's own close button, which is drawn over this corner. */
.musaned-map-popup__bar-end {
	flex: none;
	width: 24px;
}

.leaflet-container .leaflet-popup a.leaflet-popup-close-button {
	top: 22px;
	right: 24px;
	width: 24px;
	height: 24px;
	font-size: 20px;
	line-height: 24px;
	color: #404040;
}

body .musaned-map-popup .musaned-map-popup__share-toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0 !important;
	border-radius: 4px;
	background: transparent !important;
	color: #404040 !important;
	cursor: pointer;
}

body .musaned-map-popup .musaned-map-popup__share-toggle:hover {
	background: #EEEEEE !important;
}

body .musaned-map-popup .musaned-map-popup__share-toggle:focus-visible {
	outline: 2px solid #59A7C4;
	outline-offset: 2px;
}

.musaned-map-popup__share-toggle svg {
	width: 16px;
	height: 16px;
}

.musaned-map-popup h3 {
	margin: 0;
	/* Office name: smaller so the card takes less room (owner, 2026-09-20). !important because the theme sets
	   every h3 to 1.5rem !important, which is why this used to show at 24px whatever value was written here. */
	font-size: .95rem !important;
	line-height: 1.4;
}

/* Rating, tier and location share one row and wrap only when the name column is too narrow. */
.musaned-map-popup__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	margin: 8px 0 12px;
}

.musaned-map-popup__info .musaned-map-popup__loc {
	display: inline-flex;
}

.musaned-map-popup__info + .musaned-map-popup__approx-note {
	margin: -6px 0 16px;
}

/* Share menu drops down from the share button (top-left of the card). */
.musaned-map-popup__share-menu {
	position: absolute;
	top: 32px;
	left: 0;
	z-index: 5;
	min-width: 150px;
	margin: 0;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Directions sits under WhatsApp and phone, full width like "view profile" but outlined. */
body .musaned-map-popup .musaned-map-popup__btn--directions {
	flex: none;
	width: 100%;
}


/* -- Sponsored pin card: small image beside the name, category chip, description, website button ---------- */
.musaned-map-popup--ad {
	width: 272px;
	min-width: 0;
}

/* "Ad" as a small outlined pill in the middle of the top bar (the inner span, so the bar cell can still stretch). */
.musaned-map-popup--ad .musaned-map-popup__ad-tag {
	display: flex;
	justify-content: center;
}

.musaned-map-popup--ad .musaned-map-popup__ad-tag span {
	padding: 1px 10px;
	border: 1px solid #AFAFAF;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #6b7280;
}

/* Image and title on one row: the image is the first child, so in the right-to-left card it sits on the right. */
.musaned-map-popup__ad-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.musaned-map-popup__ad-image {
	flex: none;
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid #E4E4E4;
	background: #F5F5F5;
}

.musaned-map-popup__ad-titles {
	flex: 1;
	min-width: 0;
}

.musaned-map-popup--ad h3 {
	font-size: 1.05rem !important;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.musaned-map-popup__ad-category {
	display: inline-block;
	margin: 6px 0 0;
	padding: 1px 10px;
	border: 1px solid #D4D4D4;
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1.6;
	color: #757575;
}

.musaned-map-popup__ad-desc {
	margin: 14px 0 0;
	font-size: 0.9rem;
	line-height: 1.75;
	color: #404040;
	overflow-wrap: anywhere;
}

.musaned-map-popup--ad .musaned-map-popup__actions {
	margin-top: 16px;
	padding-top: 14px;
	gap: 8px;
}

/* The pale dotted ring some browsers draw on a clicked link: keep only the keyboard focus ring. */
body .musaned-map-popup a:focus:not(:focus-visible) {
	outline: none;
}

/* -- Office / ad card as a bottom sheet (phones, up to 767px; map.js sheetMode()) -------------------------------
   Same card HTML as the popup, in a panel that slides up from the bottom of the map. The pin stays visible above it.
   Hidden on wider screens, which keep the Leaflet popup. z-index 900: above the pills and pins, below Leaflet's own
   corner controls (1000), so the map attribution stays readable in the sheet's bottom padding. */
.musaned-map-sheet {
	display: none;
}

@media (max-width: 767px) {
	.musaned-map-sheet {
		display: block;
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		z-index: 900;
		box-sizing: border-box;
		max-height: 85%;
		padding: 0 20px 30px; /* the bottom room keeps the map attribution clear of the buttons */
		background: #fff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -6px 24px rgba(26, 26, 26, 0.22);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
		touch-action: none; /* dragging the sheet must not scroll the page (map.js closes it on a swipe down) */
	}

	.musaned-map-sheet.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.25s ease;
	}

	.musaned-map-sheet.is-dragging {
		transition: none;
	}

	.musaned-map-sheet__grip {
		display: flex;
		justify-content: center;
		padding: 10px 0 8px;
	}

	.musaned-map-sheet__grip span {
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: #d4d4d4;
	}

	.musaned-map-sheet__body {
		max-width: 460px;
		margin: 0 auto;
	}

	/* The card's own top bar keeps its share | ID | close layout; the close button sits where Leaflet's used to. */
	.musaned-map-sheet .musaned-map-popup {
		min-width: 0;
	}

	/* The theme forces every <button> silver (type=button, specificity 0,2,0): doubled class to win. */
	body .musaned-map-sheet .musaned-map-sheet__close.musaned-map-sheet__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		margin: 0 -2px 0 0;
		padding: 0;
		border: 0 !important;
		border-radius: 4px;
		background: transparent !important;
		color: #404040 !important;
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	/* While a card is open the bottom pills and the corner buttons step out of the way. */
	.musaned-map-wrap.has-sheet .musaned-map-toggle,
	.musaned-map-wrap.has-sheet .musaned-map-cta {
		visibility: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.musaned-map-sheet {
		transition: none;
	}
}

/* -- Desktop side drawer (1024px and up, map.js panelMode()) ---------------------------------------------------------
   Clicking a pin slides the office card in over the right edge of the map; the map itself stays full width and
   nothing takes room while no pin is selected. Physical right on purpose: the search box and pills are centred and stay put,
   the filters are top-right (they are covered while the drawer is open) and Leaflet's zoom / key sit top-left.
   z-index 850: above the pills and pins, below Leaflet's corner controls (1000), so the map attribution stays
   readable at the bottom of the drawer. */
.musaned-map-stage {
	position: relative;
	min-width: 0;
}

.musaned-map-panel {
	display: none;
}

@media (min-width: 1024px) {
	.musaned-map-wrap.has-panel .musaned-map-panel {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 340px; /* keep equal to DRAWER_WIDTH in map.js */
		z-index: 850;
		box-sizing: border-box;
		background: #fff;
		box-shadow: -6px 0 24px rgba(26, 26, 26, 0.18);
		transform: translateX(105%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.musaned-map-wrap.has-panel .musaned-map-panel.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.25s ease;
	}

	/* The drawer only slides over the map: the search box and the mode pills stay where they are, and if they
	   reach under the drawer's edge they stay on top of it. */
	.musaned-map-wrap.has-drawer .musaned-map-search,
	.musaned-map-wrap.has-drawer .musaned-map-toggle {
		z-index: 900;
	}
}

.musaned-map-panel__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	font-family: "blfont", sans-serif;
	color: #1A1A1A;
}

.musaned-map-panel__card {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 24px 24px 32px; /* the bottom room keeps the map attribution clear */
}

.musaned-map-panel .musaned-map-popup {
	min-width: 0;
}

/* The theme forces every <button> silver (type=button, specificity 0,2,0): doubled class to win. */
body .musaned-map-panel .musaned-map-panel__close.musaned-map-panel__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 -2px 0 0;
	padding: 0;
	border: 0 !important;
	border-radius: 4px;
	background: transparent !important;
	color: #404040 !important;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

body .musaned-map-panel .musaned-map-panel__close.musaned-map-panel__close:hover {
	background: #EEEEEE !important;
}

@media (prefers-reduced-motion: reduce) {
	.musaned-map-wrap.has-panel .musaned-map-panel {
		transition: none;
	}
}

/* Office name row: the logo next to the name (map.js popupHtml()). 48px; an office without a logo gets the same
   empty bordered shape as the homepage cards (.image_placeholder), so the names always line up. */
.musaned-map-popup__name {
	display: flex;
	align-items: center;
	gap: 12px;
}

.musaned-map-popup__name h3 {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.musaned-map-popup__logo {
	display: block;
	flex: none;
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--border-color-dark, #ddd);
	border-radius: 8px;
	padding: 3px;
	box-sizing: border-box;
}

.musaned-map-popup__logo.is-empty {
	padding: 0;
	background: var(--background-color, #f3f3f3);
}

/* -- Mapped ads: up to three promoted offices under the card in the desktop drawer (Musaned Verified > Mapped) -------------------
   Sits at the bottom of the drawer. The bottom padding keeps the map attribution clear. */
.musaned-map-mapped {
	flex: none;
	padding: 18px 24px 32px;
	background: var(--light-color, #fafafa);
	border-top: 1px solid var(--border-color, #eaeaea);
	font-family: "blfont", sans-serif;
}

.musaned-map-mapped__tag {
	display: inline-block;
	margin-bottom: 10px;
	padding: 1px 8px;
	border: 1px solid var(--border-color-dark, #ddd);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
	color: #6b7280;
	background: #fff;
}

.musaned-map-mapped__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.musaned-map-mapped__row + .musaned-map-mapped__row {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-color, #eaeaea);
}

.musaned-map-mapped__link {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.musaned-map-mapped__link:hover .musaned-map-mapped__name {
	text-decoration: underline;
}

.musaned-map-mapped__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.musaned-map-mapped__name {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	color: #1A1A1A;
	overflow-wrap: anywhere;
}

.musaned-map-mapped__desc {
	font-size: 0.78rem;
	line-height: 1.5;
	color: #757575;
}

.musaned-map-mapped__wa {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--border-color-dark, #ddd);
	border-radius: 8px;
	background: #fff;
	color: #1A1A1A;
}

.musaned-map-mapped__wa svg {
	width: 20px;
	height: 20px;
}

.musaned-map-mapped__wa .musaned-map-popup__ico {
	width: 18px;
	height: 18px;
}

/* -- The map page always fits the screen (owner, 2026-09-20) --------------------------------------------------------
   No scrolling up or down: the page is one full-height column (masthead, title tab, view toggle, map, footer bar) and
   the map takes whatever height is left, so nothing here hard-codes a height any more. 100dvh follows the phone's
   browser bars. Only on screens at least 560px tall (a phone held sideways keeps the normal scrolling page with the
   old fixed map heights above). The title drop-down opens OVER the map instead of pushing it down, and the footer
   drop-up (style.css) already opens over it. */
@media (min-height: 560px) {
	body.page-template-page-map {
		display: flex;
		flex-direction: column;
		height: 100vh;
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); /* the admin bar, when a logged-in admin sees it */
		overflow: hidden;
	}

	body.page-template-page-map > .musaned-masthead,
	body.page-template-page-map > .musaned-drop,
	body.page-template-page-map > .musaned-footer {
		flex: none;
	}

	body.page-template-page-map > .musaned-map-page {
		flex: 1 1 0;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	body.page-template-page-map .musaned-map-page .container.vb {
		flex: none;
		margin-bottom: 0.5rem;
	}

	body.page-template-page-map .musaned-map-page #view-toggle {
		margin-bottom: 0.5rem;
	}

	body.page-template-page-map .musaned-map-wrap {
		flex: 1 1 0;
		min-height: 0;
	}

	body.page-template-page-map .musaned-map-stage,
	body.page-template-page-map #musaned-map {
		height: 100%;
		min-height: 0;
	}

	/* The title drop-down: open over the map, not in the flow. Its tab (a child of the panel) hangs from the panel's
	   bottom edge, so it follows the panel down; the wrapper keeps 1.6rem of room for the closed tab. */
	body.page-template-page-map .musaned-drop {
		height: 0;
		z-index: 1040; /* above the map's controls (1000) and the office sheet / drawer, below Bootstrap's modals (1050+) */
	}

	body.page-template-page-map .musaned-drop__panel {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
}