/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #ffffff;
  color: #333;
  padding: 0px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

/* Map Container */
#map-container {
  position: relative;
  max-width: 895px; /* Adjust as needed */
  margin: 0 auto;
}

/* Main Map Image */
#map-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Clickable Regions */
.region {
  position: absolute;
  text-decoration: none;
  width: 18px;
  height: 18px;
  /* (Optional) Uncomment to see region boundaries during testing */
  /* border: 1px solid red; */
}

/* Example Region Positions (Adjust these values to match your map) */
.region-1 {
  top: 416px;
  left: 262px;
}

.region-2 {
  top: 316px;
  left: 300px;
}

/* island camp */
.region-3 {
  top: 308px;
  left: 635px;
  width: 40px;
  height: 40px;
}


/* Tooltip Styling */
.tooltip {
  display: none;           /* Hidden by default */
  position: absolute;
  bottom: 100%;            /* Position tooltip directly above the region */
  left: 50%;               /* Center horizontally */
  transform: translateX(-50%);
  margin-bottom: 11px;     /* Gap between region and tooltip */
  width: 142px;            /* Tooltip width set to 143px */
  background: #fff;
  border: 1px solid #fff;
  padding: 3px;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Tooltip Down-Pointing Triangle Without Extra Border */
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;               /* Place it at the bottom of the tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  /* Only one border color set to the tooltip background color */
  border-color: #fff transparent transparent transparent;
}

.tooltip img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0px;
}

.tooltip p {
  margin: 0;
  font-size: 14px;
  color: #333;
}

/* Show Tooltip on Hover */
.region:hover .tooltip {
  display: block;
}