/* ====== Mapa Webinaru — style ====== */

/* ---------- Formularz ---------- */
.mw-form-card {
	max-width: 420px;
	margin: 0 auto;
	padding: 28px 26px;
	border-radius: 18px;
	background: #0b1220;
	color: #e6edf6;
	box-shadow: 0 18px 50px rgba(8, 16, 32, .35);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mw-form-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
}
.mw-form-desc {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.5;
	color: #9fb0c5;
}
.mw-field { margin-bottom: 14px; }
.mw-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #7d8ea6;
}
.mw-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 16px;
	color: #e6edf6;
	background: #131c2e;
	border: 1px solid #24314a;
	border-radius: 12px;
	transition: border-color .15s, box-shadow .15s;
}
.mw-field input::placeholder { color: #5b6b84; }
.mw-field input:focus {
	outline: none;
	border-color: #38bdf8;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, .25);
}
.mw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.mw-submit {
	width: 100%;
	margin-top: 6px;
	padding: 13px 16px;
	font-size: 16px;
	font-weight: 600;
	color: #04121f;
	background: linear-gradient(180deg, #56c8fb, #0ea5e9);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: transform .08s, filter .15s;
}
.mw-submit:hover { filter: brightness(1.05); }
.mw-submit:active { transform: translateY(1px); }
.mw-submit:disabled { opacity: .6; cursor: default; }

.mw-message { min-height: 20px; margin: 12px 0 0; font-size: 14px; }
.mw-message--error   { color: #fb7185; }
.mw-message--info    { color: #9fb0c5; }
.mw-message--success { color: #4ade80; }

/* ---------- Mapa ---------- */
.mw-map-wrap { position: relative; }
.mw-map { width: 100%; border-radius: 14px; overflow: hidden; }
.mw-map-wrap:not(.mw-obs) .mw-map {
	box-shadow: 0 10px 40px rgba(8, 16, 32, .18);
	background: #0b1220;
}

/* Nakładka OBS: przezroczyste tło zamiast domyślnego szarego Leafletu */
.mw-obs .leaflet-container { background: transparent !important; }
.mw-obs .mw-map { border-radius: 0; box-shadow: none; }
.mw-obs-body { background: transparent; }

/* Licznik uczestników */
.mw-counter {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 500;
	padding: 7px 14px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #e6f6ff;
	background: rgba(8, 18, 34, .72);
	border: 1px solid rgba(56, 189, 248, .4);
	border-radius: 999px;
	backdrop-filter: blur(6px);
}
.mw-counter-num { color: #56c8fb; font-weight: 800; }

/* ---------- Pinezka ---------- */
.mw-pin-icon { background: none; border: none; }
.mw-pin { position: relative; width: 14px; height: 14px; }

.mw-pin-dot {
	position: absolute;
	top: 0; left: 0;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #aee9ff, #38bdf8 55%, #0284c7);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 14px 3px rgba(56, 189, 248, .8);
}

/* Imię nad kropką */
.mw-pin-name {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 9px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	color: #04121f;
	background: #aee9ff;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(2, 132, 199, .45);
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}
.mw-pin-name::after {
	content: "";
	position: absolute;
	top: 100%; left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #aee9ff;
}

/* Stan: nowy uczestnik — wskakuje, pulsuje, pokazuje imię */
.mw-pin--new { animation: mw-drop .55s cubic-bezier(.22,1.2,.36,1) both; }
.mw-pin--new .mw-pin-dot::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(56, 189, 248, .55);
	animation: mw-pulse 1.6s ease-out 3;
}
.mw-pin--new .mw-pin-name { opacity: 1; }

/* Stan: „osiadła" — zostaje świecąca kropka, imię znika */
.mw-pin--settled .mw-pin-name { opacity: 0; }

/* Tryb: imiona zawsze widoczne */
.mw-pin--labels-always .mw-pin-name { opacity: 1; }

@keyframes mw-drop {
	0%   { transform: translateY(-26px) scale(.4); opacity: 0; }
	60%  { transform: translateY(0) scale(1.15); opacity: 1; }
	100% { transform: translateY(0) scale(1); }
}
@keyframes mw-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(56, 189, 248, .6); }
	100% { box-shadow: 0 0 0 22px rgba(56, 189, 248, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.mw-pin--new { animation: none; }
	.mw-pin--new .mw-pin-dot::before { animation: none; }
}