/**
 * Business Directory - Map Marker Styles
 * Heart pins for the "Love" brand network
 *
 * @package BusinessDirectory
 * @since 1.0.0
 */

/* ==========================================================================
	HEART MARKER PINS
	========================================================================== */

.bd-heart-icon {
	background: transparent !important;
	border: none !important;
}

.bd-heart-marker {
	width: 32px;
	height: 32px;
	color: #0F2A43;
	filter: drop-shadow(0 2px 4px rgba(15, 42, 67, 0.3));
	transition: all 0.2s ease;
	cursor: pointer;
}

.bd-heart-marker svg {
	width: 100%;
	height: 100%;
}

/* Hover state - teal glow */
.bd-heart-marker:hover {
	color: #2CB1BC;
	transform: scale(1.15);
	filter: drop-shadow(0 4px 8px rgba(44, 177, 188, 0.4));
}

/* Active/clicked state */
.leaflet-marker-icon:active .bd-heart-marker {
	transform: scale(0.95);
}

/* ==========================================================================
	CLUSTER MARKERS
	========================================================================== */

.bd-cluster-icon {
	background: transparent !important;
	border: none !important;
}

.bd-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0F2A43 0%, #133453 100%);
	border: 3px solid #2CB1BC;
	border-radius: 50%;
	color: white;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 700;
	box-shadow: 0 3px 10px rgba(15, 42, 67, 0.3);
	transition: all 0.2s ease;
	cursor: pointer;
}

.bd-cluster:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 16px rgba(44, 177, 188, 0.4);
	border-color: #239AA3;
}

/* Size variants */
.bd-cluster-small {
	width: 36px;
	height: 36px;
	font-size: 13px;
}

.bd-cluster-medium {
	width: 44px;
	height: 44px;
	font-size: 14px;
}

.bd-cluster-large {
	width: 52px;
	height: 52px;
	font-size: 15px;
}

/* Cluster span (number) */
.bd-cluster span {
	line-height: 1;
}

/* ==========================================================================
	USER LOCATION MARKER
	========================================================================== */

.bd-user-marker {
	background: none;
	border: none;
}

.bd-user-pin {
	width: 18px;
	height: 18px;
	background: #2CB1BC;
	border: 3px solid white;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(15, 42, 67, 0.3);
	animation: bd-pulse 2s infinite;
}

@keyframes bd-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(44, 177, 188, 0.6);
	}
	50% {
		box-shadow: 0 0 0 12px rgba(44, 177, 188, 0);
	}
}

/* ==========================================================================
	BUTTON LINK STYLE (utility)
	========================================================================== */

.bd-btn-link {
	background: none;
	border: none;
	color: #2CB1BC;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	margin-left: 8px;
	transition: color 0.2s ease;
}

.bd-btn-link:hover {
	color: #239AA3;
}

/* ==========================================================================
	MAP STYLE SWITCHER
	========================================================================== */

.bd-style-switcher {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(15, 42, 67, 0.15);
	overflow: hidden;
	transition: all 0.2s ease;
}

.bd-style-current {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 6px;
	font-size: 16px;
	color: #0F2A43;
	cursor: pointer;
	transition: all 0.2s ease;
}

.bd-style-current:hover {
	background: #f8fafc;
	border-color: #2CB1BC;
	color: #2CB1BC;
}

.bd-style-switcher.open .bd-style-current {
	border-color: #2CB1BC;
	color: #2CB1BC;
}

.bd-style-dropdown {
	display: none;
	border-top: 1px solid #e2e8f0;
	min-width: 130px;
}

.bd-style-switcher.open .bd-style-dropdown {
	display: block;
}

.bd-style-option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	background: white;
	border: none;
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #0F2A43;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: left;
}

.bd-style-option i {
	width: 16px;
	text-align: center;
	color: #64748b;
}

.bd-style-option:hover {
	background: #f1f5f9;
	color: #0F2A43;
}

.bd-style-option:hover i {
	color: #2CB1BC;
}

.bd-style-option.active {
	background: #0F2A43;
	color: white;
}

.bd-style-option.active i {
	color: #2CB1BC;
}

.bd-style-option.active:hover {
	background: #133453;
	color: white;
}

/* ==========================================================================
	OVERRIDE DEFAULT LEAFLET CLUSTER STYLES
	========================================================================== */

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
	background: transparent !important;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
	background: transparent !important;
}

/* ==========================================================================
	NUMBERED LIST MARKERS (Phase 2) - Heart Style
	========================================================================== */

.bd-list-marker {
	background: transparent !important;
	border: none !important;
}

.bd-numbered-heart {
	position: relative;
	width: 36px;
	height: 36px;
	filter: drop-shadow(0 2px 4px rgba(15, 42, 67, 0.3));
	transition: all 0.2s ease;
	cursor: pointer;
}

.bd-numbered-heart svg {
	width: 100%;
	height: 100%;
	color: #0F2A43;
}

.bd-numbered-heart .bd-marker-number {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	color: white;
	font-weight: 700;
	font-size: 12px;
	font-family: 'Inter', system-ui, sans-serif;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hover state - teal like homepage hearts */
.bd-numbered-heart:hover {
	transform: scale(1.15);
	filter: drop-shadow(0 4px 8px rgba(44, 177, 188, 0.4));
}

.bd-numbered-heart:hover svg {
	color: #2CB1BC;
}

/* Active/Selected state */
.bd-list-marker.active .bd-numbered-heart svg {
	color: #2CB1BC;
}

.bd-list-marker.active .bd-numbered-heart {
	filter: drop-shadow(0 4px 8px rgba(44, 177, 188, 0.4));
}

/* Popup styles for list map */
.bd-list-popup .leaflet-popup-content-wrapper {
	padding: 0 !important;
	border-radius: 10px !important;
	overflow: hidden !important;
}

.bd-list-popup .leaflet-popup-content {
	margin: 0 !important;
	width: 220px !important;
}

.bd-list-popup .leaflet-popup-tip {
	background: white !important;
}