.greatchilemap {
	break-inside: avoid;
}

.leaflet-popup-content {
	width:auto !important;
}

/* Nearby-list-style popup that opens to the RIGHT of the marker.
 * ajax-map.js (gcPlacePopupRight) shifts the whole popup right + vertically
 * centers it via Leaflet's offset; here we replace the default downward tip
 * with a left-pointing one and dress the card like templates/teaser/compact.php. */
.gc-map-popup .leaflet-popup-content {
	width: 250px !important;
	margin: 10px 12px;
}
.gc-map-popup .leaflet-popup-content-wrapper {
	position: relative;                 /* anchor the ::before tip to the CARD, not the marker-positioned .leaflet-popup */
	border-radius: 0.375rem;            /* matches Bootstrap .rounded cards */
	padding: 2px;
}
.gc-map-popup .gc-map-popup-item h6 {
	line-height: 1.25;
}
/* Hide Leaflet's bottom tip and draw a left-pointing one on the card edge,
 * vertically centered, so it points back at the marker on the left. */
.gc-map-popup .leaflet-popup-tip-container {
	display: none;
}
.gc-map-popup .leaflet-popup-content-wrapper::before {
	content: "";
	position: absolute;
	left: -18px;                        /* base flush with the card's left edge, point reaching toward the marker */
	top: 50%;
	transform: translateY(-50%);
	border: 9px solid transparent;
	border-right-color: #fff;
	filter: drop-shadow(-2px 0 2px rgba(0,0,0,0.15));
}

.leaflet-top, .leaflet-bottom {
    z-index: 999;
}

.leaflet-div-icon {
	background: transparent;
	border: none;
}

.marker-pin {
	width: 30px;
	height: 30px;
	border-radius: 50% 50% 50% 0;
	background: #c30b82;
	position: absolute;
	transform: rotate(-45deg);
	left: 50%;
	top: 50%;
	margin: -15px 0 0 -15px;
	z-index: 1;
	transition: box-shadow 0.15s ease-out;
}

/* List ↔ map cross-highlight: gcSetHighlight() in ajax-map.js toggles
 * the `.gc-highlighted` class on both the map layer and every page
 * element with a matching data-gc-place. Direction-symmetric — the
 * same class drives the visual on either side. */

/* Map side: the marker pin gets a white halo + raised z-index so it
 * pops above neighbors without changing color or shape. */
.leaflet-marker-icon.gc-highlighted {
	z-index: 1000 !important;
}
.leaflet-marker-icon.gc-highlighted .marker-pin {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 4px 12px 2px rgba(0, 0, 0, 0.35);
}

/* List / itinerary side: brand-tinted left bar via inset shadow plus
 * a soft body tint. Inset shadows stack fine over Bootstrap's
 * .bg-transparent, so no !important needed. The transition smooths
 * both the desktop hover and the touch flash.
 *
 * data-gc-fav drives the same effect for the favourites offcanvas
 * (itinerary-favorites.js) — same visual, separate registry because
 * favourites are cross-blog and post_ids collide across the network. */
[data-gc-place], [data-gc-fav] {
	transition: box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}
[data-gc-place].gc-highlighted, [data-gc-fav].gc-highlighted {
	box-shadow: inset 4px 0 0 #2d7ab8;
	background-color: rgba(45, 122, 184, 0.06);
}

.small-div-icon .marker-pin {
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
}

.marker-pin::after {
	content: '';
	width: 24px;
	height: 24px;
	margin: 3px 0 0 3px;
	background: #fff;
	position: absolute;
	border-radius: 50%;
}
.small-div-icon .marker-pin::after {
	width: 14px;
	height: 14px;
}

/* Center the FontAwesome icon on the pin's white circle.
 *
 * The pin's center sits at (50% parent-width, 50% parent-height) for
 * every iconSize Leaflet hands us — both the 30×42 default markers and
 * the 20×32 .small-div-icon variant. So the icon just needs to sit at
 * the same spot. translate(-50%, -50%) self-centers based on the
 * <i>'s own box, which lets one rule handle every size.
 *
 * line-height: 1 is required: the default ~1.5 inflates the inline box
 * and pushes the glyph below the element's geometric center, which is
 * what produced the visible misalignment with the white circle.
 *
 * Only the font-size differs per size so the glyph fits its circle. */
.leaflet-div-icon i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    font-size: 16px;
    z-index: 2;
}

.small-div-icon i {
    font-size: 12px;
}

.CTLOC_map {
  height: 400px;
}