/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}


/* ==========================================================================
   Trawa Romero — Interactive Cartography Engine (Leaflet Edition)
   Signature Theme: charcoal, muted rose, warm paper and bronze.
   ========================================================================== */

:root {
  --tr-map-ink: #100d10;
  --tr-map-forest: #221a20;
  --tr-map-forest-mid: #30222b;
  --tr-map-lime: #e6a1bf;
  --tr-map-lime-hover: #f3bfd5;
  --tr-map-lime-glow: rgba(230, 161, 191, 0.4);
  --tr-map-sage: #bcb1b7;
  --tr-map-cream: #F6F2E8;
  --tr-map-bronze: #B88B5A;
  --tr-map-panel: rgba(26, 20, 25, 0.88);
  --tr-map-panel-border: rgba(188, 177, 183, 0.25);
  --tr-map-panel-shadow: 0 20px 48px rgba(12, 9, 12, 0.65), 0 0 0 1px rgba(230, 161, 191, 0.12);
}

.tr-map-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 20px 0 0;
  color: var(--tr-map-cream);
  font-family: var(--font-sans, "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  box-sizing: border-box;
}

.tr-map-root * {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Top Control Bar: Search Combobox + City Shortcuts + Stats HUD
   -------------------------------------------------------------------------- */
.tr-map-control-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.tr-map-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tr-map-search-wrap {
  position: relative;
  flex: 1 1 320px;
  max-width: 480px;
}

.tr-map-search-combobox {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--tr-map-panel-border);
  border-radius: 14px;
  background: rgba(16, 13, 16, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tr-map-search-combobox:focus-within {
  border-color: var(--tr-map-lime);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(230, 161, 191, 0.3);
}

.tr-map-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tr-map-sage);
  margin-right: 10px;
  pointer-events: none;
}

.tr-map-search-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.tr-map-search-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--tr-map-cream);
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  outline: none;
  padding: 10px 0;
}

.tr-map-search-input::placeholder {
  color: rgba(188, 177, 183, 0.55);
}

.tr-map-search-clear {
  border: 0;
  background: rgba(188, 177, 183, 0.15);
  color: var(--tr-map-sage);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.tr-map-search-clear:hover {
  background: var(--tr-map-lime);
  color: var(--tr-map-ink);
}

/* Autocomplete Dropdown */
.tr-map-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(24, 18, 23, 0.96);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(230, 161, 191, 0.25);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  z-index: 1050;
  padding: 6px;
  display: none;
}

.tr-map-search-dropdown.is-open {
  display: block;
}

.tr-map-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tr-map-cream);
  transition: background 0.12s ease;
}

.tr-map-search-item:hover,
.tr-map-search-item.is-focused {
  background: rgba(230, 161, 191, 0.15);
  color: var(--tr-map-lime);
}

.tr-map-search-item-meta {
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: var(--tr-map-sage);
}

/* HUD Info Pill */
.tr-map-hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(26, 20, 25, 0.7);
  border: 1px solid var(--tr-map-panel-border);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--tr-map-sage);
  letter-spacing: 0.04em;
}

.tr-map-hud-pill strong {
  color: var(--tr-map-lime);
  font-weight: 700;
}

/* City shortcuts chips */
.tr-map-city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tr-map-chip {
  appearance: none;
  border: 1px solid rgba(188, 177, 183, 0.22);
  background: rgba(34, 26, 32, 0.45);
  color: var(--tr-map-cream);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.tr-map-chip:hover {
  background: rgba(34, 26, 32, 0.9);
  border-color: rgba(230, 161, 191, 0.4);
  color: var(--tr-map-lime);
  transform: translateY(-1px);
}

.tr-map-chip.is-active {
  background: var(--tr-map-lime);
  border-color: var(--tr-map-lime);
  color: var(--tr-map-ink);
  font-weight: 750;
  box-shadow: 0 4px 16px var(--tr-map-lime-glow);
}

.tr-map-chip-badge {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.tr-map-chip.is-active .tr-map-chip-badge {
  background: rgba(16, 13, 16, 0.25);
  color: var(--tr-map-ink);
}

/* --------------------------------------------------------------------------
   Stage Grid: Map Viewport + Interactive Pharmacy Drawer/Sidebar
   -------------------------------------------------------------------------- */
.tr-map-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 0;
  width: 100%;
  min-height: 600px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--tr-map-panel-border);
  background: var(--tr-map-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

@media (max-width: 1024px) {
  .tr-map-stage {
    grid-template-columns: 1fr;
    min-height: 520px;
  }
}

/* Map Canvas Container */
.tr-map-canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 580px;
  background: var(--tr-map-ink);
  overflow: hidden;
}

#trPharmacyLeafletMap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--tr-map-ink);
  font-family: inherit;
}

/* Night cartography affects tiles only; pharmacy pins and labels retain their colours. */
.tr-map-canvas-container .leaflet-tile-pane {
  filter: grayscale(1) invert(1) brightness(1.12) contrast(.82);
}

/* Subtle editorial vignette overlay */
.tr-map-canvas-container::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 80px rgba(16, 13, 16, 0.8), inset 0 0 20px rgba(16, 13, 16, 0.95);
  pointer-events: none;
  z-index: 400;
}

/* Floating HUD on map */
.tr-map-viewport-hud {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.tr-map-hud-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(16, 13, 16, 0.88);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(188, 177, 183, 0.25);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tr-map-sage);
}

.tr-map-hud-tag strong {
  color: var(--tr-map-lime);
}

/* Floating Controls (Zoom & Recenter) */
.tr-map-quick-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tr-map-icon-btn {
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--tr-map-panel-border);
  background: rgba(26, 20, 25, 0.9);
  backdrop-filter: blur(16px);
  color: var(--tr-map-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: all 0.16s ease;
}

.tr-map-icon-btn:hover {
  background: var(--tr-map-lime);
  border-color: var(--tr-map-lime);
  color: var(--tr-map-ink);
  transform: scale(1.05);
}

.tr-map-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   Custom HTML Markers (Electric Lime Pulse Beacon)
   -------------------------------------------------------------------------- */
.tr-geo-pin-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tr-geo-pin {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--tr-map-ink);
  border: 1.5px solid var(--tr-map-lime);
  border-radius: 999px;
  color: var(--tr-map-lime);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px var(--tr-map-lime-glow);
  transform-origin: center bottom;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tr-geo-pin-icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.tr-geo-pin-beacon {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tr-map-lime);
  opacity: 0.25;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: trBeaconPulse 2.4s infinite ease-out;
}

@keyframes trBeaconPulse {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.15; }
  100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
}

.tr-geo-pin:hover,
.tr-geo-pin.is-active {
  background: var(--tr-map-lime);
  color: var(--tr-map-ink);
  border-color: #fff;
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 24px rgba(230, 161, 191, 0.9);
  z-index: 1000;
}

.tr-geo-pin.is-active .tr-geo-pin-beacon {
  background: #fff;
  animation-duration: 1.2s;
}

/* --------------------------------------------------------------------------
   Leaflet Custom Popup Styling
   -------------------------------------------------------------------------- */
.leaflet-popup-content-wrapper {
  background: rgba(26, 20, 25, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(230, 161, 191, 0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 20px rgba(230, 161, 191, 0.15) !important;
  color: var(--tr-map-cream) !important;
  padding: 4px !important;
}

.leaflet-popup-content {
  margin: 12px 14px !important;
  line-height: 1.4 !important;
  font-family: var(--font-sans, system-ui, sans-serif) !important;
}

.leaflet-popup-tip-container {
  display: none !important;
}

.leaflet-container a.leaflet-popup-close-button {
  color: var(--tr-map-sage) !important;
  top: 10px !important;
  right: 12px !important;
  font-size: 18px !important;
  padding: 4px !important;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--tr-map-lime) !important;
}

.tr-popup-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 240px;
  max-width: 310px;
}

.tr-popup-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tr-map-lime);
}

.tr-popup-title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.tr-popup-address {
  font-size: 12px;
  color: var(--tr-map-sage);
  margin: 0;
}

.tr-popup-strains-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.tr-popup-strain-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(34, 26, 32, 0.8);
  border: 1px solid rgba(188, 177, 183, 0.2);
  font-size: 12px;
  color: var(--tr-map-cream);
}

.tr-popup-strain-pill strong {
  color: var(--tr-map-lime);
  font-family: var(--font-mono, monospace);
}

.tr-popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.tr-popup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: all 0.15s ease;
}

.tr-popup-btn-primary {
  background: var(--tr-map-lime);
  color: var(--tr-map-ink);
}

.tr-popup-btn-primary:hover {
  background: var(--tr-map-lime-hover);
  box-shadow: 0 4px 12px var(--tr-map-lime-glow);
}

.tr-popup-btn-secondary {
  background: rgba(188, 177, 183, 0.16);
  color: var(--tr-map-cream);
  border: 1px solid rgba(188, 177, 183, 0.25);
}

.tr-popup-btn-secondary:hover {
  background: rgba(188, 177, 183, 0.28);
  color: var(--tr-map-lime);
}

/* --------------------------------------------------------------------------
   Interactive Pharmacy Sidebar (Right Panel)
   -------------------------------------------------------------------------- */
.tr-map-sidebar {
  display: flex;
  flex-direction: column;
  background: rgba(26, 20, 25, 0.94);
  backdrop-filter: blur(24px);
  border-left: 1px solid var(--tr-map-panel-border);
  height: 100%;
  max-height: 600px;
  overflow: hidden;
}

.tr-map-sidebar-head {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(188, 177, 183, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(16, 13, 16, 0.5);
}

.tr-map-sidebar-title {
  margin: 0;
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 18px;
  color: var(--tr-map-cream);
}

.tr-map-sidebar-count {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--tr-map-lime);
  background: rgba(230, 161, 191, 0.12);
  padding: 3px 8px;
  border-radius: 999px;
}

.tr-map-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-map-pharm-card {
  padding: 14px;
  border-radius: 12px;
  background: rgba(34, 26, 32, 0.4);
  border: 1px solid rgba(188, 177, 183, 0.18);
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.tr-map-pharm-card:hover {
  background: rgba(34, 26, 32, 0.85);
  border-color: rgba(230, 161, 191, 0.4);
  transform: translateX(-2px);
}

.tr-map-pharm-card.is-active {
  background: rgba(34, 26, 32, 0.95);
  border-color: var(--tr-map-lime);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--tr-map-lime);
}

.tr-map-pharm-name {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.tr-map-pharm-addr {
  font-size: 12px;
  color: var(--tr-map-sage);
  margin: 0 0 8px;
}

.tr-map-pharm-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}

.tr-map-pharm-lowest {
  color: var(--tr-map-lime);
  font-weight: 700;
}

.tr-map-pharm-count {
  color: rgba(246, 242, 232, 0.6);
}

/* Footer of sidebar: direct phone & directions */
.tr-map-sidebar-detail {
  padding: 14px 18px;
  border-top: 1px solid rgba(188, 177, 183, 0.2);
  background: rgba(16, 13, 16, 0.65);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-map-sidebar-actions {
  display: flex;
  gap: 8px;
}

.tr-map-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: all 0.15s ease;
}

.tr-map-action-btn-primary {
  background: var(--tr-map-lime);
  color: var(--tr-map-ink);
}

.tr-map-action-btn-primary:hover {
  background: var(--tr-map-lime-hover);
  box-shadow: 0 4px 16px var(--tr-map-lime-glow);
}

.tr-map-action-btn-secondary {
  background: rgba(188, 177, 183, 0.15);
  color: var(--tr-map-cream);
  border: 1px solid rgba(188, 177, 183, 0.25);
}

.tr-map-action-btn-secondary:hover {
  background: rgba(188, 177, 183, 0.25);
  color: var(--tr-map-lime);
}

/* Clean attribution */
.leaflet-control-attribution {
  background: rgba(16, 13, 16, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--tr-map-sage) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 12px !important;
  padding: 3px 8px !important;
  border-radius: 6px 0 0 0 !important;
}

.leaflet-control-attribution a {
  color: var(--tr-map-lime) !important;
  text-decoration: none !important;
}

/* Native button semantics preserve the existing map card treatment. */
.tr-map-pharm-card,.tr-map-search-item { width:100%; text-align:left; font:inherit; color:inherit; }
.tr-map-pharm-card:focus-visible,.tr-map-search-item:focus-visible { outline:2px solid #e6a1bf; outline-offset:-3px; }

/* Cards keep their intrinsic height inside the scrolling list. */
.tr-map-root { min-width: 0; }
.tr-map-root button, .tr-map-root a { letter-spacing: normal; text-transform: none; }
.tr-map-sidebar { min-width: 0; height: 600px; backdrop-filter: none; }
.tr-map-sidebar-head, .tr-map-sidebar-detail { flex: 0 0 auto; }
.tr-map-sidebar-list { min-height: 0; scrollbar-width: thin; scrollbar-color: #806170 transparent; overscroll-behavior: contain; }
.tr-map-root .tr-map-pharm-card {
  display: block; flex: 0 0 auto; height: auto; min-height: min-content;
  width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere;
  padding: 16px; text-align: left; line-height: 1.5;
}
.tr-map-root .tr-map-pharm-card:hover { transform: none; }
.tr-map-pharm-name { line-height: 1.25; margin-bottom: 8px; }
.tr-map-pharm-addr, .tr-map-pharm-date { line-height: 1.5; letter-spacing: normal; overflow-wrap: anywhere; }
.tr-map-pharm-date { margin: 8px 0 12px; color: var(--tr-map-sage); font-size: 12px; }
.tr-map-pharm-price-row { flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.tr-map-pharm-lowest { white-space: nowrap; }
.tr-map-pharm-count { font-size: 12px; }
.tr-map-sidebar-detail:empty { display: none; }
.tr-map-action-btn { min-height: 44px; white-space: normal; line-height: 1.4; }
.tr-map-hud-pill { flex-wrap: wrap; gap: 4px 10px; border-radius: 12px; max-width: 100%; }
.tr-map-icon-btn { width: 44px; height: 44px; }
.tr-map-search-clear { min-width: 44px; min-height: 44px; }
.tr-map-search-item { gap: 12px; white-space: normal; }
.tr-map-search-item-meta { flex-shrink: 0; }
.tr-map-canvas-container::after { box-shadow: inset 0 0 40px rgba(16,13,16,.25); }
.tr-map-quick-controls { bottom: 40px; }
.tr-map-root .leaflet-control-attribution { max-width: 100%; font-size: 12px !important; }
.tr-map-tile-status { position: absolute; left: 12px; right: 12px; top: 62px; z-index: 600; padding: 12px; border: 1px solid var(--tr-map-panel-border); border-radius: 10px; background: #221a20; color: #f6f2e8; font-size: 13px; }
.tr-map-tile-status[hidden] { display: none; }
.tr-map-tile-retry { margin-left: 8px; min-height: 44px; padding: 8px 12px; color: #100d10; background: #e6a1bf; border: 0; border-radius: 6px; cursor: pointer; }
@media (max-width: 1024px) {
  .tr-map-stage { grid-template-columns: minmax(0,1fr); }
  .tr-map-canvas-container { height: 440px; min-height: 440px; }
  .tr-map-sidebar { height: 480px; max-height: 480px; border-left: 0; border-top: 1px solid var(--tr-map-panel-border); }
}
@media (max-width: 560px) {
  .tr-map-canvas-container { height: 360px; min-height: 360px; }
  .tr-map-sidebar { height: 430px; }
  .tr-map-search-wrap { flex-basis: 100%; max-width: none; }
  .tr-map-stage { border-radius: 12px; }
  .tr-popup-card { min-width: 180px; max-width: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-map-root *, .tr-map-root *::before, .tr-map-root *::after { animation: none !important; transition: none !important; }
}

/* Semantic markup patch: Preserve block display for span elements acting as blocks */
.tr-map-root .tr-map-pharm-card span.tr-map-pharm-name,
.tr-map-root .tr-map-pharm-card span.tr-map-pharm-addr,
.tr-map-root .tr-map-pharm-card span.tr-map-pharm-date {
  display: block;
}
.tr-map-root .tr-map-pharm-card span.tr-map-pharm-price-row {
  display: flex;
}

/* All dataset cities are available in one native, keyboard-accessible picker. */
.tr-map-root .tr-map-city-picker { display: grid; gap: 5px; flex: 1 1 200px; min-width: 0; max-width: 300px; }
.tr-map-root .tr-map-city-picker label { color: var(--tr-map-sage); font-size: 12px; line-height: 1.4; }
.tr-map-root .tr-map-city-select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid var(--tr-map-panel-border); border-radius: 14px; background: #100d10; color: var(--tr-map-cream); color-scheme: dark; font: inherit; font-size: 16px; letter-spacing: normal; cursor: pointer; }
.tr-map-root .tr-map-city-select:focus-visible { outline: 2px solid var(--tr-map-lime); outline-offset: 3px; }
@media (max-width: 560px) {
  .tr-map-root .tr-map-city-picker { flex-basis: 100%; max-width: none; }
}

/* Charcoal cartography with the same rose controls as the site. */
.tr-map-canvas-container::after { box-shadow: none; }
.tr-map-root .tr-map-viewport-hud { right: 16px; max-width: 460px; }
.tr-map-root .tr-map-hud-tag { font-family: inherit; letter-spacing: normal; text-transform: none; line-height: 1.5; }
.tr-map-root .tr-map-sidebar-head { gap: 12px; }
.tr-map-root .tr-map-sidebar-title { min-width: 0; overflow-wrap: anywhere; }
.tr-map-root .tr-map-search-dropdown { max-width: 100%; overscroll-behavior: contain; }
.tr-map-root .tr-map-search-item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tr-map-root .tr-map-search-item strong,
.tr-map-root .tr-map-search-item .tr-map-search-description { display: block; }
.tr-map-root .tr-map-search-description { font-size: 13px; color: var(--tr-map-sage); }

/* Selected pharmacy stays readable beside its real map marker. */
.tr-map-root .tr-map-bar-row { display: grid; grid-template-columns: minmax(220px,1.3fr) minmax(170px,.8fr) minmax(220px,1fr); align-items: end; gap: 12px; }
.tr-map-root .tr-map-hud-pill { grid-column: 1 / -1; justify-self: start; padding: 6px 10px; }
.tr-map-root .tr-map-search-wrap { min-width: 0; width: auto; }
.tr-map-root .tr-map-city-picker { width: auto; min-width: 0; }
.tr-map-root .tr-map-sidebar { height: 660px; max-height: 660px; }
.tr-map-root .tr-map-canvas-container { height: 660px; }
.tr-map-root .tr-map-sidebar-list { flex: 1 1 42%; }
.tr-map-root .tr-map-sidebar-detail { flex: 0 1 52%; min-height: 0; overflow-y: auto; padding: 16px; border-top: 1px solid var(--tr-map-panel-border); }
.tr-map-root .tr-map-selected-heading { display: grid; gap: 5px; line-height: 1.4; }
.tr-map-root .tr-map-selected-heading strong { font-size: 16px; color: #f4eee7; }
.tr-map-root .tr-map-selected-heading span,.tr-map-root .tr-map-detail-date { color: #c0b0ba; font-size: 12px; line-height: 1.5; margin: 5px 0 10px; letter-spacing: normal; }
.tr-map-root .tr-map-strains-title { font-family: inherit; font-weight: 600; font-size: 12px; line-height: 1.4; margin: 10px 0 6px; }
.tr-map-root .tr-map-strain-list { list-style: none; padding: 0; margin: 0 0 12px; }
.tr-map-root .tr-map-strain-list li { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 9px 0; border-bottom: 1px solid #3c3038; font-size: 13px; line-height: 1.4; }
.tr-map-root .tr-map-strain-list small { display: block; color: #bdadb7; font-size: 12px; }
.tr-map-root .tr-map-strain-list b { white-space: nowrap; color: #e6a1bf; font-size: 12px; }
.tr-map-root .leaflet-popup-content { color: #f4eee7; min-width: 180px; }
.tr-map-root .leaflet-popup-content p { margin: 6px 0; }
.tr-map-root .leaflet-popup-content ul { padding-left: 16px; }
@media (max-width: 760px) {
  .tr-map-root .tr-map-bar-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tr-map-root .tr-map-search-wrap,.tr-map-root .tr-map-strain-picker { grid-column: 1 / -1; }
  .tr-map-root .tr-map-canvas-container { height: 400px; min-height: 400px; }
  .tr-map-root .tr-map-sidebar { height: 620px; max-height: 620px; }
}

/* Search is one dark control, including native search and keyboard-focus states. */
body .tr-map-root .tr-map-pharmacy-phone {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 0;
  color: #f1b5ce;
  font: 600 14px/1.4 var(--font-sans, "Hanken Grotesk", sans-serif);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body .tr-map-root .tr-map-search-combobox {
  min-height: 48px;
  padding: 0 4px 0 12px;
  border-radius: 12px;
  background: #19151a;
  box-shadow: none;
}
body .tr-map-root .tr-map-search-combobox:focus-within {
  border-color: #e6a1bf;
  box-shadow: 0 0 0 1px #e6a1bf;
}
body .tr-map-root .tr-map-search-input,
body .tr-map-root .tr-map-search-input:focus,
body .tr-map-root .tr-map-search-input:focus-visible {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f4eee7;
  font: 400 16px/1.5 var(--font-sans, "Hanken Grotesk", sans-serif);
  letter-spacing: normal;
  outline: none !important;
  box-shadow: none !important;
}
body .tr-map-root .tr-map-search-input::-webkit-search-cancel-button,
body .tr-map-root .tr-map-search-input::-webkit-search-decoration {
  appearance: none;
  -webkit-appearance: none;
  display: none;
}
body .tr-map-root .tr-map-search-input::placeholder { color: #aa9da7; opacity: 1; }
body .tr-map-root .tr-map-search-clear {
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0 0 0 6px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #c4b7c0;
  font-size: 20px;
  box-shadow: none;
}
body .tr-map-root .tr-map-search-clear:hover { background: #34252f; color: #f4eee7; }
body .tr-map-root .tr-map-search-dropdown {
  padding: 5px;
  max-height: min(340px, 55vh);
  border: 1px solid #58414f;
  border-radius: 12px;
  background: #19151a;
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: #806170 #19151a;
}
body .tr-map-root .tr-map-search-dropdown .tr-map-search-item {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: auto;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f4eee7;
  font: 400 14px/1.45 var(--font-sans, "Hanken Grotesk", sans-serif);
  text-align: left;
  box-shadow: none;
  transform: none;
}
body .tr-map-root .tr-map-search-item + .tr-map-search-item { margin-top: 2px; }
body .tr-map-root .tr-map-search-item strong { color: inherit; font-size: 14px; font-weight: 600; line-height: 1.45; }
body .tr-map-root .tr-map-search-description { margin-top: 3px; color: #bcb1b7; font-size: 12px; line-height: 1.45; }
body .tr-map-root .tr-map-search-dropdown .tr-map-search-item:hover,
body .tr-map-root .tr-map-search-dropdown .tr-map-search-item:focus-visible {
  background: #34252f;
  color: #f6c4da;
  outline: 1px solid #9a637d !important;
  outline-offset: -1px !important;
  box-shadow: none !important;
}

/* v28: legible night streets, pharmacy pins and two independent sidebar panels. */
body .tr-map-root #trPharmacyLeafletMap { background: #20262a; }
body .tr-map-root .tr-map-pharmacy-marker {
  width: 42px !important;
  height: 60px !important;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 5px 5px #080307a8);
}
body .tr-map-root .tr-map-pharmacy-marker .tr-map-emblem-pin {
  position: relative;
  display: block;
  width: 42px;
  height: 60px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font: inherit;
  transition: filter .16s ease, transform .16s ease;
}
body .tr-map-root .tr-map-pharmacy-emblem {
  display: block;
  width: 40px;
  height: 60px;
  margin: 0 auto;
  object-fit: contain;
}
body .tr-map-root .tr-map-pharmacy-marker.is-selected .tr-map-emblem-pin {
  background: transparent;
  color: inherit;
  box-shadow: none;
  transform: translateY(-2px) scale(1.09);
  filter: drop-shadow(0 0 7px #df7e9ebd) drop-shadow(0 0 2px #ffd67e);
}
body .tr-map-root .tr-map-pharmacy-marker.is-selected .tr-map-pin-selected {
  position: absolute;
  top: 1px;
  right: 0;
  display: block;
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  border: 1px solid #42192d;
  border-radius: 50%;
  background: #ffd67e;
  box-shadow: 0 0 0 1px #ffd67e80;
  transform: none;
}
body .tr-map-root #trPharmacyLeafletMap .leaflet-marker-icon:focus-visible {
  outline: 3px solid #ffd67e !important;
  outline-offset: 4px;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
  body .tr-map-root .tr-map-emblem-pin { transition: none; }
}

body .tr-map-root .tr-map-sidebar {
  display: grid;
  grid-template-rows: minmax(220px, .8fr) minmax(280px, 1.2fr);
  gap: 10px;
  padding: 10px;
  border-left: 0;
  background: #0d1013;
}
body .tr-map-root .tr-map-pharmacy-browser,
body .tr-map-root .tr-map-selected-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #384047;
  border-radius: 12px;
  background: #13191e;
}
body .tr-map-root .tr-map-pharmacy-browser { grid-template-rows: auto auto minmax(0, 1fr); }
body .tr-map-root .tr-map-selected-panel {
  grid-template-rows: auto minmax(0, 1fr);
  border-color: #827663;
  background: #211e1a;
}
body .tr-map-root .tr-map-sidebar-head,
body .tr-map-root .tr-map-selected-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid #384047;
  background: #1b232a;
}
body .tr-map-root .tr-map-selected-panel-head {
  border-bottom-color: #665b4c;
  background: #342e25;
}
body .tr-map-root .tr-map-sidebar-title,
body .tr-map-root .tr-map-selected-panel-head h3 {
  margin: 0;
  color: #f2eee6;
  font: 600 14px/1.4 var(--font-sans, "Hanken Grotesk", sans-serif) !important;
  letter-spacing: normal;
  text-transform: none;
}
body .tr-map-root .tr-map-sidebar-count {
  padding: 2px 8px;
  color: #d7dfd1;
  background: #49313e;
  font: 600 13px/1.4 var(--font-sans, "Hanken Grotesk", sans-serif);
}
body .tr-map-root .tr-map-scroll-hint {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  color: #bec8cf;
  font: 400 12px/1.45 var(--font-sans, "Hanken Grotesk", sans-serif);
  letter-spacing: normal;
}
body .tr-map-root .tr-map-scroll-hint > span { color: #ede2c9; }
body .tr-map-root .tr-map-sidebar-list,
body .tr-map-root .tr-map-sidebar-detail {
  min-height: 0;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #9aa7ae #11171b;
}
body .tr-map-root .tr-map-sidebar-list {
  gap: 8px;
  padding: 4px 6px 10px 10px;
}
body .tr-map-root .tr-map-sidebar-detail {
  padding: 12px 10px 14px 12px;
  border-top: 0;
  scrollbar-color: #b8a486 #171612;
}
body .tr-map-root .tr-map-sidebar-list::-webkit-scrollbar,
body .tr-map-root .tr-map-sidebar-detail::-webkit-scrollbar { width: 10px; }
body .tr-map-root .tr-map-sidebar-list::-webkit-scrollbar-track { background: #11171b; }
body .tr-map-root .tr-map-sidebar-detail::-webkit-scrollbar-track { background: #171612; }
body .tr-map-root .tr-map-sidebar-list::-webkit-scrollbar-thumb {
  border: 2px solid #11171b;
  border-radius: 8px;
  background: #9aa7ae;
}
body .tr-map-root .tr-map-sidebar-detail::-webkit-scrollbar-thumb {
  border: 2px solid #171612;
  border-radius: 8px;
  background: #b8a486;
}
body .tr-map-root .tr-map-pharm-card {
  padding: 12px;
  border-color: #37424a;
  border-radius: 9px;
  background: #181f25;
  box-shadow: none;
}
body .tr-map-root .tr-map-pharm-card:hover { background: #222d34; }
body .tr-map-root .tr-map-pharm-card.is-active {
  border-color: #d7c49f;
  background: #2c2c25;
  box-shadow: inset 3px 0 #d7c49f;
}
body .tr-map-root .tr-map-pharm-name {
  margin-bottom: 5px;
  font: 600 14px/1.4 var(--font-sans, "Hanken Grotesk", sans-serif) !important;
}
body .tr-map-root .tr-map-pharm-date { margin: 5px 0 8px; }
body .tr-map-root .tr-map-pharm-price-row { font-family: var(--font-sans, "Hanken Grotesk", sans-serif); }
body .tr-map-root .tr-map-pharm-lowest { color: #e6dac2; }
body .tr-map-root .tr-map-selected-heading strong { font-size: 17px; line-height: 1.35; }
body .tr-map-root .tr-map-strains-title {
  margin-top: 14px;
  color: #eee5d5;
  font: 600 13px/1.45 var(--font-sans, "Hanken Grotesk", sans-serif) !important;
  letter-spacing: normal;
  text-transform: none;
}
body .tr-map-root .tr-map-strains-title > span { color: #c9bda9; }
body .tr-map-root .tr-map-detail-scroll-hint { padding: 0 0 5px; color: #c9bda9; }
body .tr-map-root .tr-map-strain-list li { border-bottom-color: #494135; }
body .tr-map-root .tr-map-strain-list b { color: #ead8b7; }
body .tr-map-root .tr-map-strain-list li > span { min-width: 0; overflow-wrap: anywhere; }
body .tr-map-root .tr-map-sidebar-list:focus-visible,
body .tr-map-root .tr-map-sidebar-detail:focus-visible {
  outline: 2px solid #d7c49f !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}
@media (max-width: 760px) {
  body .tr-map-root .tr-map-sidebar { grid-template-rows: minmax(220px, .8fr) minmax(280px, 1.2fr); }
}

/* Package totals in the selected pharmacy panel; map layout is unchanged. */
.tr-map-package-totals { padding: 0 0 12px; }
.tr-map-package-totals p { margin: 8px 0; }
.tr-map-package-totals span, .tr-map-package-totals strong { display: block; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.tr-map-package-totals strong { color: var(--text-primary, inherit); }