.greatchilemap {
	break-inside: avoid;
}

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

.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;
}