/* /eszlel – élőben érkező észlelések a jobb hasábban (js/eszlelFriss.js) */

.obsCardContainer {
	--olb-bg: #1e8fdb;
	--olb-text: #ffffff;
	--olb-new: rgba(30, 143, 219, .16);
}

.obsMapInner {
	position: relative;
}

.obsMapSubmit {
	position: absolute;
	top: 10px;
	right: 10px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}

.obsLiveBar {
	position: sticky;
	top: 70px;
	z-index: 90;
	height: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow: visible;
}

@media (prefers-color-scheme: dark) {
	.obsCardContainer {
		--olb-new: rgba(30, 143, 219, .32);
	}
}

body.ikDark .obsCardContainer {
	--olb-new: rgba(30, 143, 219, .32);
}

.obsLiveBar button {
	margin-top: 6px;
	border: 0;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--olb-text);
	background: var(--olb-bg);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.obsLiveBar.visible button {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.obsLiveList .user-weatherReport-card.obsLiveNew {
	animation: fadeIn .2s ease-in, obsLiveNew 6s ease-out;
}

@keyframes obsLiveNew {
	0%, 40% {
		box-shadow: 0 0 0 2px var(--olb-new) inset;
		background-color: var(--olb-new);
	}
	100% {
		box-shadow: 0 0 0 2px transparent inset;
	}
}

@media (prefers-reduced-motion: reduce) {
	.obsLiveBar button {
		transition: none;
	}

	.obsLiveList .user-weatherReport-card.obsLiveNew {
		animation: none;
	}
}