/* Rectangular container of the map */
#mapcon {
	width: 1024px;
	height: 512px;
	border: 1px solid black;
	margin-left:auto;
	margin-right:auto;
}

#map {
	width:1024px;
	height:512px;
}

/* Map background color — matches ocean color of the tiles */
.leaflet-container { background: #96dbf2; }

/* Hide Leaflet attribution badge */
.leaflet-control-attribution { display: none; }

/* Coordinate display (bottom-right corner) */
.coord-display {
	background: rgba(255,255,255,0.7);
	padding: 2px 5px;
	font-size: 11px;
	font-family: monospace;
}

/* Custom popup container */
#customPopup {
	position: absolute;
	z-index: 1000;
	display: none; /* hidden by default, shown on marker click */
	pointer-events:auto;
	width: fit-content;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
	will-change: transform; /* for smoother movement */
	transition: left 0.05s ease, top 0.05s ease; /* smooth repositioning */
}

/* Popup content box */
.popup-box {
	background: white;
	border-radius: 6px;
	padding: 10px 20px 10px 10px;
	font-size: 11px;
	line-height: 1.6;
	position: relative;
	width: fit-content;
	box-sizing: border-box;
	text-align: left;
	white-space: nowrap;
}

/* Popup close button */
.popup-close {
	position: absolute;
	top: 4px;
	right: 6px;
	cursor: pointer;
	font-size: 14px;
	color: #555;
	font-weight: bold;
	background: none;
	border: none;
	padding: 0;
	line-height: 1;
}
.popup-close:hover { color: #000; }

/* Popup tip (the triangle pointer) */
/* Base styles shared by both tip directions */
.popup-tip {
	position: absolute;
	width: 0;
	height: 0;
}

/* Tip pointing UP, used when popup opens BELOW the marker */
.tip-up {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid white;
	top: -9px;  /* flush against top edge of popup box */
}

/* Tip pointing DOWN, used when popup opens ABOVE the marker */
.tip-down {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid white;
	bottom: -9px;  /* flush against bottom edge of popup box */
}

.coord-display {
	background: rgba(255,255,255,0.7);
	padding: 2px 5px;
	font-size: 11px;
	font-family: monospace;
	cursor: pointer;
}
.coord-display:hover {
	background: rgba(255,255,255,0.9);
}