/* WP ClaudeMaps – frontend styles */

/* -------------------------------------------------------------------------
 * Map container
 * ------------------------------------------------------------------------- */
.wpcm-map-wrap {
	display:    block;
	position:   relative;
	overflow:   hidden;
	border-radius: 10px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .14), 0 1px 4px rgba(0, 0, 0, .08);
	margin: 1.5em 0;
}

.wpcm-map {
	width:  100%;
	height: 100%;
	z-index: 0;
}

/* -------------------------------------------------------------------------
 * Marker wrapper – Leaflet divIcon container
 * Leaflet adds overflow:hidden by default; we must clear it so the SVG
 * shadow is not clipped.
 * ------------------------------------------------------------------------- */
.wpcm-marker-wrap {
	background: none   !important;
	border:     none   !important;
	overflow:   visible !important;
}

.wpcm-marker-wrap svg {
	display:    block;
	filter:     drop-shadow( 0 3px 6px rgba(0, 0, 0, .30) );
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1),
	            filter    .18s ease;
}

.wpcm-marker-wrap:hover svg {
	transform: translateY(-3px) scale(1.1);
	filter:    drop-shadow( 0 6px 10px rgba(0, 0, 0, .35) );
}

/* -------------------------------------------------------------------------
 * Location label — permanent Leaflet tooltip (.wpcm-label)
 * Modern pill design with entrance animation
 * ------------------------------------------------------------------------- */
.leaflet-tooltip.wpcm-label {
	/* shape */
	background:    #ffffff;
	border:        none;
	border-radius: 999px;

	/* depth */
	box-shadow:
		0 2px 10px rgba(0, 0, 0, .14),
		0 0   0 1px rgba(0, 0, 0, .07);

	/* typography */
	color:          #0f172a;
	font-family:    inherit;
	font-size:      .6875rem;     /* ≈ 11px */
	font-weight:    700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space:    nowrap;

	/* spacing */
	padding: 4px 11px;

	/* no pointer events needed */
	pointer-events: none;

	/* entrance pop */
	animation: wpcmLabelPop .28s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* Remove Leaflet's built-in arrow and border */
.leaflet-tooltip.wpcm-label::before {
	display: none;
}

@keyframes wpcmLabelPop {
	from {
		opacity:   0;
		transform: scale(.7) translateY(6px);
	}
	to {
		opacity:   1;
		transform: scale(1) translateY(0);
	}
}

/* -------------------------------------------------------------------------
 * Scale bar — subtle override to match the plugin's visual style
 * ------------------------------------------------------------------------- */
.leaflet-control-scale-line {
	border-color:    rgba(0, 0, 0, .35) !important;
	border-top:      none !important;
	background:      rgba(255, 255, 255, .82);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size:       .6875rem;
	font-weight:     600;
	color:           #1e293b;
	padding:         1px 5px 2px;
	border-radius:   0 0 4px 4px;
	box-shadow:      0 1px 4px rgba(0, 0, 0, .12);
}

/* -------------------------------------------------------------------------
 * Error message (shown to editors only)
 * ------------------------------------------------------------------------- */
.wpcm-error {
	padding:       .6em 1em;
	border-left:   4px solid #d63638;
	background:    #fff8f8;
	color:         #d63638;
	font-size:     .875rem;
	border-radius: 0 4px 4px 0;
	margin:        1em 0;
}