/**
 * Velox Mapper Local Maps — Frontend Map Styles
 *
 * @package Velox\Mapper
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ── Container ─────────────────────────────────────────────────── */
.velox-map-container {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
	position: relative;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	/* width is set via inline style from PHP */
}

.velox-map-canvas {
	width: 100%;
	display: block;
	/* height is set via inline style from PHP */
}

/* ── Skin: Light ───────────────────────────────────────────────── */
.velox-skin-light .leaflet-container {
	background: #f0f4f8;
}

/* ── Skin: Dark ────────────────────────────────────────────────── */
.velox-skin-dark .leaflet-container {
	background: #0f172a;
}

.velox-skin-dark .leaflet-control-zoom a,
.velox-skin-dark .leaflet-bar a {
	background-color: #1e293b;
	border-color: #334155;
	color: #94a3b8;
}

.velox-skin-dark .leaflet-control-zoom a:hover,
.velox-skin-dark .leaflet-bar a:hover {
	background-color: #334155;
	color: #e2e8f0;
}

.velox-skin-dark .leaflet-control-attribution {
	background-color: rgba(15, 23, 42, 0.75);
	color: #64748b;
}

.velox-skin-dark .leaflet-control-attribution a {
	color: #94a3b8;
}

/* ── Skin: Satellite ──────────────────────────────────────────── */
.velox-skin-satellite .leaflet-control-attribution {
	background-color: rgba(0, 0, 0, 0.55);
	color: rgba(255, 255, 255, 0.7);
}

.velox-skin-satellite .leaflet-control-attribution a {
	color: rgba(255, 255, 255, 0.85);
}

/* ── Zoom controls ────────────────────────────────────────────── */
.velox-map-container .leaflet-control-zoom {
	border: none !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	overflow: hidden;
}

.velox-map-container .leaflet-control-zoom a {
	border-radius: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	font-size: 16px;
	font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   MATERIAL DESIGN POPUP
   ════════════════════════════════════════════════════════════════ */

/* Strip Leaflet's default padding/border-radius so we own the shape */
.velox-leaflet-popup .leaflet-popup-content-wrapper {
	padding: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 5px 5px -3px rgba(0,0,0,0.20),
		0 8px 10px  1px rgba(0,0,0,0.14),
		0 3px 14px  2px rgba(0,0,0,0.12);
	border: none;
	min-width: 220px;
	max-width: 300px;
}

.velox-leaflet-popup .leaflet-popup-content {
	margin: 0;
	width: auto !important; /* override Leaflet inline width */
}

/* Tip (pointer) */
.velox-leaflet-popup .leaflet-popup-tip-container {
	margin-top: -1px;
}

/* Close button */
.velox-leaflet-popup .leaflet-popup-close-button {
	top: 10px !important;
	right: 10px !important;
	width: 24px !important;
	height: 24px !important;
	font-size: 18px !important;
	line-height: 24px !important;
	border-radius: 50%;
	color: rgba(255,255,255,0.85) !important;
	background: rgba(0,0,0,0.18) !important;
	padding: 0 !important;
	text-align: center;
	transition: background 0.15s;
	z-index: 10;
}

.velox-leaflet-popup .leaflet-popup-close-button:hover {
	background: rgba(0,0,0,0.32) !important;
	color: #fff !important;
}

/* ── Popup shell ──────────────────────────────────────────────── */
.velox-popup {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	background: #fff;
}

/* ── Header accent bar ────────────────────────────────────────── */
.velox-popup-header {
	background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 60%, #3b82f6 100%);
	padding: 14px 16px 12px;
	position: relative;
}

.velox-popup-feature-name {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.01em;
	line-height: 1.3;
	padding-right: 28px; /* room for close btn */
	margin: 0;
}

.velox-popup-feature-type {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255,255,255,0.75);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 3px;
}

/* ── Property rows ────────────────────────────────────────────── */
.velox-popup-body {
	padding: 6px 0 8px;
	background: #fff;
}

.velox-popup-row {
	display: flex;
	align-items: flex-start;
	padding: 6px 16px;
	gap: 10px;
	transition: background 0.1s;
}

.velox-popup-row:hover {
	background: #f8fafc;
}

.velox-popup-key {
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	min-width: 90px;
	flex-shrink: 0;
	padding-top: 2px;
	line-height: 1.5;
}

.velox-popup-val {
	font-size: 13px;
	font-weight: 400;
	color: #1e293b;
	line-height: 1.5;
	word-break: break-word;
}

/* Numeric values get a subtle chip treatment */
.velox-popup-val--numeric {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	color: #1d4ed8;
}

/* Divider between rows */
.velox-popup-row + .velox-popup-row {
	border-top: 1px solid rgba(0,0,0,0.045);
}

/* ── Skin: Dark popup ─────────────────────────────────────────── */
.velox-skin-dark .velox-popup {
	background: #1e293b;
}

.velox-skin-dark .velox-popup-header {
	background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
}

.velox-skin-dark .velox-leaflet-popup .leaflet-popup-content-wrapper {
	box-shadow:
		0 5px 5px -3px rgba(0,0,0,0.4),
		0 8px 10px  1px rgba(0,0,0,0.3),
		0 3px 14px  2px rgba(0,0,0,0.25);
}

.velox-skin-dark .velox-leaflet-popup .leaflet-popup-tip {
	background: #1e293b;
}

.velox-skin-dark .velox-popup-body {
	background: #1e293b;
}

.velox-skin-dark .velox-popup-key {
	color: #64748b;
}

.velox-skin-dark .velox-popup-val {
	color: #e2e8f0;
}

.velox-skin-dark .velox-popup-val--numeric {
	color: #60a5fa;
}

.velox-skin-dark .velox-popup-row:hover {
	background: rgba(255,255,255,0.04);
}

.velox-skin-dark .velox-popup-row + .velox-popup-row {
	border-color: rgba(255,255,255,0.06);
}

/* ── Skin: Satellite popup ────────────────────────────────────── */
.velox-skin-satellite .velox-popup-header {
	background: linear-gradient(135deg, #1c1917 0%, #292524 60%, #44403c 100%);
}

.velox-skin-satellite .velox-popup-feature-type {
	color: rgba(251, 191, 36, 0.8);
}

.velox-skin-satellite .velox-popup {
	background: #1c1917;
}

.velox-skin-satellite .velox-popup-body {
	background: #1c1917;
}

.velox-skin-satellite .velox-popup-key {
	color: #78716c;
}

.velox-skin-satellite .velox-popup-val {
	color: #e7e5e4;
}

.velox-skin-satellite .velox-popup-val--numeric {
	color: #fbbf24;
}

.velox-skin-satellite .velox-popup-row:hover {
	background: rgba(255,255,255,0.04);
}

.velox-skin-satellite .velox-popup-row + .velox-popup-row {
	border-color: rgba(255,255,255,0.07);
}

.velox-skin-satellite .velox-leaflet-popup .leaflet-popup-tip {
	background: #1c1917;
}

/* ── Error display (admin-only) ───────────────────────────────── */
.velox-error {
	padding: 12px 16px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #991b1b;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.velox-map-container {
		border-radius: 8px;
	}

	.velox-leaflet-popup .leaflet-popup-content-wrapper {
		min-width: 180px;
		max-width: 260px;
	}
}

/* ── Legend Control ───────────────────────────────────────────── */
.velox-legend {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 10px;
	padding: 10px 13px;
	min-width: 130px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.14);
}

.velox-legend--light {
	background: rgba(255,255,255,0.94);
	border: 1px solid rgba(0,0,0,0.08);
	color: #1e293b;
}

.velox-legend--dark {
	background: rgba(15,23,42,0.88);
	border: 1px solid rgba(255,255,255,0.1);
	color: #e2e8f0;
}

.velox-legend--satellite {
	background: rgba(0,0,0,0.65);
	border: 1px solid rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.9);
}

.velox-legend-title {
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 7px;
	opacity: 0.7;
}

.velox-legend-item {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 4px;
}

.velox-legend-item:last-child { margin-bottom: 0; }

.velox-legend-swatch {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex-shrink: 0;
	display: inline-block;
	border: 1px solid rgba(0,0,0,0.15);
}

.velox-legend-label {
	font-size: 12px;
	white-space: nowrap;
}

/* ── Loading Spinner ──────────────────────────────────────────── */
.velox-spinner-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(248,250,252,0.7);
	z-index: 500;
	border-radius: 12px;
}

.velox-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #e2e8f0;
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: velox-spin 0.7s linear infinite;
}

@keyframes velox-spin {
	to { transform: rotate(360deg); }
}

/* ── Fetch error ──────────────────────────────────────────────── */
.velox-map-fetch-error {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	font-size: 12px;
	padding: 8px 14px;
	border-radius: 8px;
	z-index: 500;
	white-space: nowrap;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Feature Search Control ────────────────────────────────────── */
.velox-search {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	position: relative;
	width: 220px;
}

.velox-search-input {
	width: 100%;
	padding: 8px 12px 8px 34px;
	font-size: 13px;
	border: none;
	border-radius: 8px;
	outline: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 10px center;
	appearance: none;
	-webkit-appearance: none;
}

.velox-search-input::placeholder { opacity: 0.6; }

.velox-search--light .velox-search-input {
	background-color: rgba(255,255,255,0.95);
	color: #1e293b;
	box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.velox-search--dark .velox-search-input {
	background-color: rgba(15,23,42,0.92);
	color: #e2e8f0;
	box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.velox-search--satellite .velox-search-input {
	background-color: rgba(0,0,0,0.72);
	color: #e7e5e4;
	box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.velox-search-results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	border-radius: 8px;
	overflow: hidden;
	list-style: none;
	padding: 4px 0;
	margin: 0;
	z-index: 1000;
	max-height: 220px;
	overflow-y: auto;
}

.velox-search--light .velox-search-results {
	background: #fff;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.velox-search--dark .velox-search-results {
	background: #1e293b;
	box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.velox-search--satellite .velox-search-results {
	background: #1c1917;
	box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.velox-search-item {
	padding: 8px 14px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.1s;
	line-height: 1.4;
}

.velox-search--light .velox-search-item { color: #1e293b; }
.velox-search--light .velox-search-item:hover { background: #eff6ff; color: #1d4ed8; }

.velox-search--dark .velox-search-item { color: #e2e8f0; }
.velox-search--dark .velox-search-item:hover { background: rgba(255,255,255,0.07); }

.velox-search--satellite .velox-search-item { color: #e7e5e4; }
.velox-search--satellite .velox-search-item:hover { background: rgba(255,255,255,0.08); }

.velox-search-empty {
	padding: 8px 14px;
	font-size: 12px;
	font-style: italic;
	opacity: 0.55;
}

.velox-search--light .velox-search-empty { color: #475569; }
.velox-search--dark  .velox-search-empty { color: #94a3b8; }
.velox-search--satellite .velox-search-empty { color: #a8a29e; }

@media ( max-width: 480px ) {
	.velox-search { width: 160px; }
}

/* ── Layer Toggle Control ──────────────────────────────────────── */
.velox-layer-toggle {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	border-radius: 10px;
	padding: 8px 10px;
	min-width: 140px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.14);
}

.velox-layer-toggle--light {
	background: rgba(255,255,255,0.95);
	border: 1px solid rgba(0,0,0,0.08);
	color: #1e293b;
}

.velox-layer-toggle--dark {
	background: rgba(15,23,42,0.9);
	border: 1px solid rgba(255,255,255,0.1);
	color: #e2e8f0;
}

.velox-layer-toggle--satellite {
	background: rgba(0,0,0,0.68);
	border: 1px solid rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.9);
}

.velox-layer-toggle-title {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.55;
	margin-bottom: 6px;
}

.velox-layer-toggle-row {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	cursor: pointer;
	padding: 3px 0;
	line-height: 1.4;
}

.velox-layer-toggle-row input[type="checkbox"] {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: #2563eb;
}

.velox-layer-toggle-swatch {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	flex-shrink: 0;
	border: 1px solid rgba(0,0,0,0.15);
}

.velox-layer-toggle-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 110px;
}