/* =========================================================================
   RobIQ Mapa — front-end
   Autor: Patryk Klimczak
   ========================================================================= */
@property --rqk-ang {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.rqm-wrap {
	--rqm-navy: #050d28;
	--rqm-navy2: #0a1f4d;
	--rqm-gold: #ffce1f;
	--rqm-blue: #3b6cff;
	--rqm-cyan: #7fd4ff;
	--rqm-ink: #e8eeff;
	--rqm-mut: #9fb0d6;

	position: relative;
	display: grid;
	gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
	color: var(--rqm-ink);
	font-family: inherit;
}

/* ---- Panel sterowania ---- */
.rqm-panel {
	position: relative;
	padding: 22px 22px 18px;
	border-radius: 18px;
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(59, 108, 255, .18), transparent 55%),
		linear-gradient(160deg, var(--rqm-navy2), var(--rqm-navy));
	overflow: hidden;
	isolation: isolate;
}
.rqm-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: conic-gradient(from var(--rqk-ang),
		var(--rqm-gold), var(--rqm-blue), var(--rqm-cyan), var(--rqm-gold));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: rqm-spin 6s linear infinite;
	pointer-events: none;
	opacity: .9;
}
@keyframes rqm-spin { to { --rqk-ang: 360deg; } }

.rqm-head { margin-bottom: 16px; }
.rqm-title {
	margin: 0 0 4px;
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 800;
	letter-spacing: .2px;
	color: #fff;
}
.rqm-sub { margin: 0; color: var(--rqm-mut); font-size: 14px; }

.rqm-controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.rqm-field {
	position: relative;
	flex: 1 1 260px;
	display: flex;
	align-items: center;
}
.rqm-pin {
	position: absolute;
	left: 14px;
	width: 18px;
	height: 18px;
	fill: var(--rqm-cyan);
	opacity: .8;
	pointer-events: none;
}
.rqm-input {
	width: 100%;
	padding: 13px 14px 13px 42px;
	border-radius: 12px;
	border: 1px solid rgba(127, 212, 255, .25);
	background: rgba(5, 13, 40, .55);
	color: #fff;
	font-size: 15px;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.rqm-input::placeholder { color: rgba(159, 176, 214, .7); }
.rqm-input:focus {
	border-color: var(--rqm-gold);
	box-shadow: 0 0 0 3px rgba(255, 206, 31, .18);
}

.rqm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 20px;
	border: 0;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	color: var(--rqm-navy);
	background: linear-gradient(135deg, var(--rqm-gold), #ffe06b);
	box-shadow: 0 6px 20px rgba(255, 206, 31, .25);
	transition: transform .15s, box-shadow .2s, filter .2s;
}
.rqm-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(255, 206, 31, .35); }
.rqm-btn:active { transform: translateY(0); }
.rqm-btn[disabled] { opacity: .6; cursor: progress; filter: saturate(.6); }

.rqm-geoloc {
	flex: 0 0 auto;
	padding: 13px;
	background: rgba(127, 212, 255, .12);
	color: var(--rqm-cyan);
	box-shadow: none;
	border: 1px solid rgba(127, 212, 255, .3);
}
.rqm-geoloc:hover { background: rgba(127, 212, 255, .2); box-shadow: 0 0 18px rgba(127, 212, 255, .25); }
.rqm-geoloc svg { width: 20px; height: 20px; fill: currentColor; }

/* ---- Wynik / dystans ---- */
.rqm-result {
	margin-top: 14px;
	display: none;
}
.rqm-result.is-on { display: block; animation: rqm-fade .4s ease; }
@keyframes rqm-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.rqm-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.rqm-stat {
	flex: 1 1 140px;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(5, 13, 40, .5);
	border: 1px solid rgba(59, 108, 255, .25);
}
.rqm-stat .k { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--rqm-mut); }
.rqm-stat .v {
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
	margin-top: 4px;
}
.rqm-stat .v small { font-size: 14px; font-weight: 600; color: var(--rqm-cyan); }
.rqm-stat.gold .v { color: var(--rqm-gold); text-shadow: 0 0 18px rgba(255, 206, 31, .35); }

.rqm-from {
	margin-top: 10px;
	font-size: 13px;
	color: var(--rqm-mut);
}
.rqm-from b { color: var(--rqm-ink); font-weight: 700; }

.rqm-note {
	margin-top: 8px;
	font-size: 12px;
	color: var(--rqm-cyan);
	opacity: .85;
}
.rqm-error {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(255, 80, 80, .12);
	border: 1px solid rgba(255, 80, 80, .35);
	color: #ffc2c2;
	font-size: 14px;
	display: none;
}
.rqm-error.is-on { display: block; }

/* ---- Mapa ---- */
.rqm-map {
	width: 100%;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(127, 212, 255, .18);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	background: var(--rqm-navy);
}
.rqm-map .leaflet-container { background: var(--rqm-navy); font-family: inherit; }
.rqm-map.rqm-tiles-dark .leaflet-tile {
	filter: invert(1) hue-rotate(190deg) brightness(.92) contrast(.9) saturate(.75);
}
.rqm-map .leaflet-control-attribution {
	background: rgba(5, 13, 40, .7);
	color: var(--rqm-mut);
}
.rqm-map .leaflet-control-attribution a { color: var(--rqm-cyan); }
.rqm-map .leaflet-bar a {
	background: var(--rqm-navy2);
	color: var(--rqm-cyan);
	border-bottom-color: rgba(127, 212, 255, .2);
}
.rqm-map .leaflet-bar a:hover { background: #11295e; }

/* znacznik celu (gold) */
.rqm-marker {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--rqm-gold);
	box-shadow: 0 0 0 4px rgba(255, 206, 31, .25), 0 0 22px rgba(255, 206, 31, .65);
	position: relative;
}
.rqm-marker::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid var(--rqm-gold);
	animation: rqm-ping 1.8s ease-out infinite;
}
@keyframes rqm-ping {
	0% { transform: scale(.6); opacity: .9; }
	100% { transform: scale(2.1); opacity: 0; }
}
/* znacznik użytkownika (cyan) */
.rqm-marker.user { background: var(--rqm-cyan); box-shadow: 0 0 0 4px rgba(127, 212, 255, .25), 0 0 22px rgba(127, 212, 255, .65); }
.rqm-marker.user::after { border-color: var(--rqm-cyan); }

/* trasa */
.rqm-route-glow { filter: drop-shadow(0 0 6px var(--rqm-cyan)) drop-shadow(0 0 12px var(--rqm-blue)); }
.rqm-route-main { filter: drop-shadow(0 0 4px var(--rqm-gold)); }

.leaflet-popup-content-wrapper {
	background: var(--rqm-navy2);
	color: #fff;
	border-radius: 12px;
	border: 1px solid rgba(255, 206, 31, .35);
}
.leaflet-popup-tip { background: var(--rqm-navy2); }
.leaflet-popup-content { font-size: 14px; }
.leaflet-popup-content b { color: var(--rqm-gold); }

@media (max-width: 560px) {
	.rqm-controls { flex-direction: column; }
	.rqm-go { width: 100%; }
	.rqm-geoloc { width: 100%; }
}