/* UXO Lao Province Map - frontend styles */

.uxo-lao-map { position: relative; padding: 32px 0; }

.uxo-lao-map__pill {
	display: inline-block;
	background: #ee2a3a;
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	padding: 8px 28px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(238,42,58,.35);
	margin: 0 auto 24px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.uxo-lao-map__layout {
	display: grid;
	grid-template-columns: minmax(280px, 1.4fr) minmax(280px, 1fr);
	gap: 32px;
	align-items: start;
}
@media (max-width: 900px) {
	.uxo-lao-map__layout { grid-template-columns: 1fr; }
}

.uxo-lao-map__map-wrap {
	position: relative;
	padding-top: 28px; /* room for the caption pinned at the top */
}
.uxo-lao-map__svg {
	width: 100%; height: auto; max-height: 720px;
	display: block;
	font-family: inherit;
}

.uxo-lao-map__caption {
	position: absolute; top: 0; left: 0;
	color: #ee2a3a; font-style: italic; font-weight: 600;
	margin: 0;
	font-size: 0.95rem;
}

/* Inactive provinces (light gray fill) */
.uxo-lao-map__inactive path {
	fill: #f1f1f1;
	stroke: #cfcfcf;
	stroke-width: 1;
}

/* Active 9 provinces (red, clickable) */
.uxo-lao-map__active path {
	fill: #ee2a3a;
	stroke: #ffffff;
	stroke-width: 1.5;
	cursor: pointer;
	transition: fill 0.15s, transform 0.15s;
}
.uxo-lao-map__active a { cursor: pointer; outline: none; }
.uxo-lao-map__active a:hover path,
.uxo-lao-map__active a:focus path,
.uxo-lao-map__active path:hover {
	fill: #c01d2c;
}
.uxo-lao-map__active a:focus {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

/* Numbered markers */
.uxo-lao-map__markers a,
.uxo-lao-map__markers [data-marker] { cursor: pointer; }
.uxo-lao-map__marker-bg {
	fill: #ee2a3a;
	stroke: #ffffff;
	stroke-width: 2.5;
	transition: fill 0.15s;
}
.uxo-lao-map__markers a:hover .uxo-lao-map__marker-bg,
.uxo-lao-map__markers a:focus .uxo-lao-map__marker-bg,
.uxo-lao-map__markers [data-marker]:hover .uxo-lao-map__marker-bg {
	fill: #8e1320;
}
.uxo-lao-map__marker-num {
	fill: #ffffff;
	font-weight: 700;
	font-size: 14px;
	font-family: inherit;
	pointer-events: none;
}

/* Hover label — anchored to province centroid, with arrow that points
   directly at the province. Flips above/below depending on which half of
   the map the province sits in. */
.uxo-lao-map__tooltip {
	position: absolute;
	pointer-events: none;
	background: #1a1a1a;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0,0,0,.18);
	white-space: nowrap;
	opacity: 0;
	z-index: 50;
	transform: translate(-50%, calc(-100% - 6px));
	transition: opacity 0.12s, transform 0.12s;
	left: 0; top: 0;
}
.uxo-lao-map__tooltip.is-shown { opacity: 1; }

/* Default (above) arrow */
.uxo-lao-map__tooltip::after {
	content: "";
	position: absolute;
	top: 100%; left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: #1a1a1a;
}

/* Below variant for provinces in the upper half of the map */
.uxo-lao-map__tooltip.uxo-lao-map__tooltip--below {
	transform: translate(-50%, 6px);
}
.uxo-lao-map__tooltip.uxo-lao-map__tooltip--below::after {
	top: auto; bottom: 100%;
	border: 6px solid transparent;
	border-top-color: transparent;
	border-bottom-color: #1a1a1a;
}

/* Sidebar */
.uxo-lao-map__sidebar {
	border: 2px solid #4a4ed8;
	border-radius: 8px;
	padding: 20px;
	background: #fff;
}
.uxo-lao-map__sidebar-title {
	color: #ee2a3a;
	font-style: italic;
	font-weight: 700;
	margin: 0 0 16px;
	font-size: 1rem;
}
.uxo-lao-map__tasks { list-style: none; padding: 0; margin: 0; }
.uxo-lao-map__tasks li { margin: 14px 0; }
.uxo-lao-map__tasks a {
	display: flex; align-items: center; gap: 12px;
	color: #ee2a3a;
	text-decoration: underline;
	font-weight: 500;
}
.uxo-lao-map__tasks a:hover { color: #8e1320; }
.uxo-lao-map__task-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	background: #1a1a1a; color: #fff;
	border-radius: 50%;
	font-size: 14px;
	flex-shrink: 0;
	text-decoration: none;
}