.leaflet-container {
	height: 600px;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
}
/* Was scoped to "#map" -- but the map container's real id is always
   "map-{widget_id}" (maps.php's $unique_id, hip-custom-map-new-clean.js's
   mapId fallback), never literally "map" on any site, so this rule never
   actually matched anywhere -- .location-card's image/heading/address had
   no flush-edge reset and overflowed the rounded popup box.
   Scoped two ways so this never touches a Classic popup: the wrapper class
   (hip-popup-layout-custom, added by maps.php only when the widget's own
   hip_map_popup_layout setting is "custom") plus the per-pin popup class
   (hip-popup-custom-template, added by hip-custom-map-new-clean.js only for
   pins that actually rendered from that template -- a "custom" widget can
   still have individual pins fall back to a plain Classic-style link when
   their linked Location has no popup content). Classic popups -- the
   default on all 200+ live sites today -- never get either class, so their
   original Leaflet margin (13px 24px 13px 20px) stays byte-for-byte what
   it's always been. */
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .leaflet-popup-content,
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .leaflet-popup-content p{
	margin: 0;
}
/* leaflet.css (vendor, unmodified) sets a base 1px padding on every popup's
   .leaflet-popup-content-wrapper -- fine for Leaflet's own default popup
   look, but on the Custom Popup Template it leaves a stray 1px gap around
   the card's own Padding/Background/Border style controls. Scoped the same
   two ways as the margin-reset rule above, so Classic popups -- the default
   on all 200+ live sites -- keep that 1px exactly as it's always been. */
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .leaflet-popup-content-wrapper{
	padding: 0;
}
.hip-map-info{
	display: none;
}


.leaflet-popup-tip-container {
	width: 27px;
	height: 27px;
	margin-left: -13px;
}
.leaflet-popup-tip {
	transform: unset;
	margin: 0;
	background: transparent !important;
	border-left: 13.5px solid transparent;
	border-top: 22px solid #000;
	border-right: 12.5px solid transparent;
	border-bottom: 12px solid transparent;
	padding: 0;
	box-shadow: unset;
}

/* updated by AR - 29.8.22 */
#map .leaflet-top,
#map .leaflet-bottom {
	z-index: 998;
}
/* Tile attribution kept visible (Nathan Hill, 8/28) but shrunk down.
   !important because 200+ sites each bring their own theme/page-builder
   CSS that can enqueue after this and win on specificity alone. */
.leaflet-control-attribution {
	font-size: 9px !important;
	line-height: 1.3 !important;
	padding: 0 4px !important;
}
.leaflet-control-attribution a {
	font-size: 9px !important;
	line-height: 1.3 !important;
}
/* Was "#map.leaflet-container" -- but the map div's real id is always
   "map-{widget_id}" (maps.php's $unique_id), never literally "map" on any
   site, so this selector never actually matched anything and the toggle
   had no visual effect no matter what. .hip-custom-map is present on every
   instance (Leaflet appends leaflet-container to the same element at
   runtime), so this now actually reaches the button. .hip-hide-close-btn
   itself is only added to .hip-map-wrapper (an ancestor) when a site owner
   explicitly picks "Hide" -- see render() -- so this stays a no-op on every
   widget still on the default "Show". */
.hip-hide-close-btn .hip-custom-map.leaflet-container a.leaflet-popup-close-button {
	display: none;
}
/* Custom Popup Template CTA -- see maps.php's hip_map_popup_template
   default ({{cta_text}} inside .appointment-button). Was unstyled plain
   text before; these rules give it a real button look everywhere the
   default class name is used. --hip-appointment-btn-bg/-color are
   redeclarable on .location-card (or any ancestor) so a site can apply its
   own brand color without editing this file.
   Scoped the same two ways as the margin/padding resets above (lines 22-33)
   -- .hip-popup-layout-custom (widget has Custom Template enabled) plus
   .hip-popup-custom-template (this specific pin actually rendered from it)
   -- so ".location-card" used anywhere else on a site (a different widget,
   a hand-built page section, another plugin) never picks up this CSS. */
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .location-card .appointment-button {
	--hip-appointment-btn-bg: #1a5276;
	--hip-appointment-btn-color: #fff;
	display: inline-block;
	margin-top: 8px;
	padding: 8px 20px;
	background: var(--hip-appointment-btn-bg);
	color: var(--hip-appointment-btn-color);
	border-radius: 4px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .location-card .appointment-button .btn-txt-cls {
	color: inherit;
}
/* {{phone_link}} (maps.php) is the first real <a> ever placed inside
   .location-info li -- without this it would show the browser's default
   blue/underlined link style instead of matching the existing Text Color /
   Icon Color style controls, which target the li itself, not an anchor. */
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .location-card .location-info li a {
	color: inherit;
	text-decoration: none;
}
/* Browser/theme default <ul> spacing + bullet varies per site -- reset it
   here so every site starts from the same clean zero baseline before the
   List Padding / List Margin Style-tab controls (maps.php, targets this same
   selector) apply their own {{WRAPPER}}-scoped, higher-specificity values on
   top of it. */
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .location-card .location-info {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Icon + address/phone text were plain inline content -- fine on one line,
   but once the text wraps to a second line (a long address, or a narrow
   card), the wrapped line has no icon in front of it so it centers/aligns
   on a different width than line 1, making the icon look like it drifts
   away from the text under it. Flex pins the icon as its own column so
   every wrapped line shares the same text box width and lines up under
   line 1 instead of under the icon. */
/* align-items is set by the "Icon Vertical Align" control (maps.php,
   default 'baseline') instead of hardcoded here -- Elementor always emits
   that control's CSS (even at its default value), so this stays the only
   source of truth and there's no specificity fight to win against it. */
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .location-card .location-info li {
	display: flex;
}
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .location-card .location-info li i {
	flex-shrink: 0;
	/* Matches Astra's own global "a" transition (0.2s linear) so the icon's
	   hover color-change (li:has(a:hover) i, maps.php) fades in step with
	   the link text instead of snapping instantly -- the icon itself isn't
	   an <a>, so it never inherited that theme rule on its own. */
	transition: color 0.2s linear;
}
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .location-card .location-info li .btn-text {
	min-width: 0;
}
/* Popup card has no default width/height for its image -- the Style tab's
   Height/Width controls only emit CSS once a site owner sets a value there
   (see maps.php's hip_map_popup_image_height/-width/-align), so an
   untouched widget has nothing stopping a large source image from
   rendering at native pixel size and overflowing the card. This is a
   fallback only: {{WRAPPER}}-scoped control CSS is more specific and
   still wins wherever a site has actually configured Height/Width. */
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .location-card .location-image {
	max-width: 100%;
	height: auto;
}
/* {{image}} (maps.php's default template) is wrapped in a <p> for markup
   validity -- browsers give <p> a default top/bottom margin (usually 1em),
   which would otherwise show as a stray gap above the image even though
   nothing in this plugin's CSS or Style tab asks for one. .location-card's
   overflow:hidden (set by the Border Radius control) creates a new block
   formatting context, which stops that margin from collapsing through to
   the card's own edge -- so without this reset the gap is real, not just a
   rendering quirk. */
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .location-card > p:first-child {
	margin: 0;
}
.hip-custom-map.hip-popup-layout-custom .leaflet-popup.hip-popup-custom-template .location-card .appointment-button:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}