/* =====================================================================
   ARNOLDIO — OSM Animated Map
   Leaflet + Overpass POI explorer, theme-aware (dark/light)
===================================================================== */

/* ── Wrapper ─────────────────────────────────────────────────────── */

.az-osm-wrap {
	position:      relative;
	width:         100%;
	border-radius: var(--radius, 18px);
	overflow:      hidden;
	background:    var(--surface-1);
	box-shadow:    var(--shadow);
	container-type: inline-size;
}

/* ── Map canvas ──────────────────────────────────────────────────── */

.az-osm-map {
	width:  100%;
	height: 520px;
	z-index: 1;
}

@media (max-width: 640px) {
	.az-osm-map { height: 360px; }
}

/* Leaflet tile layer inherits dark/light via CartoDB tiles selected in JS */

/* ── Origin marker ───────────────────────────────────────────────── */

.az-osm-origin {
	position:       relative;
	width:  48px;
	height: 48px;
	display:        flex;
	align-items:    center;
	justify-content:center;
}

.az-osm-origin__dot {
	display:       block;
	width:  14px;
	height: 14px;
	border-radius: 50%;
	background:    var(--primary, #60a5fa);
	box-shadow:    0 0 0 3px var(--bg, #0d1b2a), 0 0 12px var(--primary, #60a5fa);
	z-index: 2;
}

.az-osm-origin__ring {
	position:      absolute;
	inset:         0;
	border-radius: 50%;
	border:        2px solid var(--primary, #60a5fa);
	opacity:       0;
}

.az-osm-origin__ring.is-pulse {
	animation: az-osm-ring-pulse 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes az-osm-ring-pulse {
	0%   { transform: scale(0.3); opacity: 0.9; }
	100% { transform: scale(1.8); opacity: 0; }
}

/* ── POI markers ─────────────────────────────────────────────────── */

.az-osm-marker {
	width:          36px;
	height:         36px;
	border-radius:  50% 50% 50% 4px;
	background:     var(--mc, #60a5fa);
	display:        flex;
	align-items:    center;
	justify-content:center;
	box-shadow:     0 4px 12px color-mix(in oklab, var(--mc, #60a5fa) 60%, transparent);
	cursor:         pointer;
	transform:      scale(0) translateY(8px);
	opacity:        0;
	transition:     transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	                opacity   0.25s ease,
	                filter    0.2s ease,
	                box-shadow 0.2s ease;
	will-change:    transform, opacity;
}

.az-osm-marker--enter {
	/* class added immediately after mount, transition starts */
}

.az-osm-marker--visible {
	transform: scale(1) translateY(0);
	opacity:   1;
}

.az-osm-marker__icon {
	font-size:   1rem;
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

/* Hover */
.leaflet-marker-icon:hover .az-osm-marker {
	transform:  scale(1.2) translateY(-2px);
	box-shadow: 0 8px 20px color-mix(in oklab, var(--mc, #60a5fa) 70%, transparent);
}

/* Rynek start marker — slightly larger, gold glow */
.az-osm-marker--rynek {
	width:  42px;
	height: 42px;
	box-shadow: 0 0 0 3px rgba(251,191,36,.35), 0 4px 16px rgba(251,191,36,.45);
}

/* Fade out after fly-to completes */
.az-osm-marker--fade-out {
	opacity:    0 !important;
	transform:  scale(0.5) translateY(6px) !important;
	transition: opacity 0.5s ease, transform 0.5s ease !important;
	pointer-events: none;
}

/* Filter states */
.az-osm-marker--dimmed {
	opacity: 0.18;
	filter:  grayscale(1);
}

.az-osm-marker--highlight {
	transform: scale(1.15) translateY(-2px) !important;
	box-shadow: 0 8px 24px color-mix(in oklab, var(--mc, #60a5fa) 80%, transparent) !important;
}

/* ── Popups ──────────────────────────────────────────────────────── */

.leaflet-popup-content-wrapper.az-osm-popup,
.leaflet-popup-content-wrapper.az-osm-popup--origin {
	background:    var(--surface-1, #1a2233);
	color:         var(--text, #e8f4ff);
	border:        1px solid var(--border-muted, rgba(255,255,255,0.08));
	border-radius: var(--radius-sm, 14px);
	box-shadow:    var(--shadow);
	padding:       0;
}

.leaflet-popup-tip {
	background: var(--surface-1, #1a2233) !important;
}

.az-osm-popup .leaflet-popup-content,
.az-osm-popup--origin .leaflet-popup-content {
	margin: 0;
	min-width: 160px;
}

.az-osm-popup__inner {
	display:        flex;
	flex-direction: column;
	gap:            4px;
	padding:        14px 16px;
}

.az-osm-popup__cat {
	font-size:      0.75rem;
	font-weight:    600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color:          var(--mc, var(--primary));
	opacity:        0.9;
}

.az-osm-popup__name {
	font-size:   0.95rem;
	font-weight: 700;
	line-height: 1.35;
	color:       var(--text);
}

.az-osm-popup__addr {
	font-size: 0.82rem;
	color:     var(--text-muted);
}

.az-osm-popup__nav {
	margin-top:      6px;
	font-size:       0.82rem;
	font-weight:     600;
	color:           var(--primary);
	text-decoration: none;
}

.az-osm-popup__nav:hover {
	text-decoration: underline;
}

/* Close button */
.leaflet-popup-close-button {
	color: var(--text-muted) !important;
	font-size: 1.1rem !important;
	top:   8px !important;
	right: 8px !important;
}

/* ── Legend panel ────────────────────────────────────────────────── */

.az-osm-legend {
	position:       absolute;
	top:            14px;
	right:          14px;
	z-index:        900;
	background:     var(--surface-1, #12202e);
	border:         1px solid var(--border-muted, rgba(255,255,255,0.07));
	border-radius:  var(--radius-sm, 14px);
	box-shadow:     var(--shadow-sm);
	padding:        10px 12px 8px;
	min-width:      148px;
	max-height:     420px;
	overflow-y:     auto;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (max-width: 500px) {
	.az-osm-legend {
		top: auto;
		bottom: 44px;
		right:  8px;
		max-height: 200px;
		min-width:  130px;
	}
}

.az-osm-legend__title {
	font-size:      0.7rem;
	font-weight:    700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color:          var(--text-muted);
	margin-bottom:  8px;
}

.az-osm-legend__list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        2px;
}

.az-osm-legend__item {
	display:        flex;
	align-items:    center;
	gap:            7px;
	padding:        5px 6px;
	border-radius:  8px;
	cursor:         pointer;
	transition:     background 0.15s, opacity 0.15s;
	user-select:    none;
}

.az-osm-legend__item:hover {
	background: var(--highlight, rgba(255,255,255,0.05));
}

.az-osm-legend__item.is-active {
	background: color-mix(in oklab, var(--mc, var(--primary)) 15%, transparent);
}

.az-osm-legend__item--empty {
	opacity: 0.35;
}

.az-osm-legend__ic {
	font-size:    1rem;
	line-height:  1;
	flex-shrink:  0;
}

.az-osm-legend__lbl {
	font-size:   0.78rem;
	font-weight: 500;
	color:       var(--text);
	flex:        1;
	white-space: nowrap;
}

.az-osm-legend__cnt {
	font-size:   0.72rem;
	font-weight: 700;
	color:       var(--mc, var(--primary));
	min-width:   16px;
	text-align:  right;
	transition:  transform 0.15s;
}

.az-osm-legend__cnt.is-bump {
	animation: az-osm-bump 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes az-osm-bump {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.6); }
	100% { transform: scale(1); }
}

/* ── Loader ──────────────────────────────────────────────────────── */

.az-osm-loader {
	position:        absolute;
	bottom:          14px;
	left:            50%;
	transform:       translateX(-50%);
	z-index:         1000;
	display:         flex;
	gap:             6px;
	align-items:     center;
	background:      var(--surface-1, #12202e);
	border:          1px solid var(--border-muted, rgba(255,255,255,0.07));
	border-radius:   99px;
	padding:         8px 14px;
	box-shadow:      var(--shadow-sm);
}

.az-osm-loader__dot {
	display:       block;
	width:  8px;
	height: 8px;
	border-radius: 50%;
	background:    var(--primary, #60a5fa);
	animation:     az-osm-bounce 1s ease-in-out infinite;
}

.az-osm-loader__dot:nth-child(2) { animation-delay: 0.15s; }
.az-osm-loader__dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes az-osm-bounce {
	0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
	40%           { transform: scale(1.2); opacity: 1;   }
}

/* ── Attribution strip ───────────────────────────────────────────── */

.az-osm-attribution {
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	z-index:    900;
	background: var(--overlay, rgba(10,20,30,0.72));
	color:      var(--text-muted);
	font-size:  0.68rem;
	padding:    4px 10px;
	text-align: right;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.az-osm-attribution a {
	color:           var(--primary);
	text-decoration: none;
}

.az-osm-attribution a:hover { text-decoration: underline; }

/* ── Scrollbar (legend) ──────────────────────────────────────────── */

.az-osm-legend::-webkit-scrollbar {
	width: 4px;
}
.az-osm-legend::-webkit-scrollbar-track {
	background: transparent;
}
.az-osm-legend::-webkit-scrollbar-thumb {
	background:    var(--border-muted);
	border-radius: 4px;
}

/* ── Leaflet overrides ───────────────────────────────────────────── */

.leaflet-control-zoom {
	border: none !important;
	box-shadow: var(--shadow-sm) !important;
}

.leaflet-control-zoom a {
	background:    var(--surface-1, #12202e) !important;
	color:         var(--text, #e8f4ff) !important;
	border:        1px solid var(--border-muted, rgba(255,255,255,0.1)) !important;
	border-radius: var(--radius-sm, 14px) !important;
	width:  32px !important;
	height: 32px !important;
	line-height: 30px !important;
	font-size: 1.1rem !important;
	margin-bottom: 3px;
	transition: background 0.15s;
}

.leaflet-control-zoom a:hover {
	background: var(--highlight, rgba(255,255,255,0.06)) !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.az-osm-marker,
	.az-osm-origin__ring,
	.az-osm-loader__dot,
	.az-osm-legend__cnt {
		animation: none !important;
		transition: none !important;
	}

	.az-osm-marker {
		transform: scale(1) translateY(0);
		opacity:   1;
	}

	.az-osm-marker--fade-out {
		display: none !important;
	}
}