/* Base styles */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

#map-container {
    width: 100%;
    flex-grow: 1;
    position: relative; /* Added for tooltip positioning */
    height: calc(100% - 50px); /* Account for fixed controls height */
}

svg {
  width: 100%;
  height: 100%;
}

/* Country styles */
.country {
  fill: #e0e0e0;
  stroke: #666;
  stroke-width: 0.5;
  cursor: pointer;
  transition: all 250ms ease-in-out;
}

.country.highlight {
  /* 1. Active country color */
  fill: #FFC400;
}

.country.active {
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}

/* Blinking animation */
@keyframes blink {
  0%, 20%, 40%, 60%, 80%, 100% { 
    /* Active country color */
    fill: #FFC400; 
  }
  10%, 30%, 50%, 70%, 90% { 
    /* 2. Alternate country color */
    fill: #9B59B6; 
  }
}

.country.blinking {
  animation: blink 2s ease-in-out;
}

/* Controls */
#controls {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  z-index: 1000;
  padding: 10px 0; /* Add padding for spacing */
}

@media (max-width: 768px) {
  #controls {
    display: none; /* Hide controls on small screens */
  }
}

#controls button {
  padding: 8px 16px;
  /* 3. Button background */
  background: #9B59B6;
  border: 1px solid rgba(94, 82, 64, 0.2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  transition: all 250ms ease-in-out;
  /* 4. Button font color */
  color: #FFFFFF;
}

#controls button:hover {
  background: #8e44ad;
}

#controls button.active {
  /* 5. Active button background */
  background: #8e44ad;
  color: #FFFFFF;
}

/* Tooltip */
#tooltip {
  position: absolute;
  background: white;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  pointer-events: none;
  z-index: 1001;
  display: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

@media (max-width: 768px) and (orientation: portrait) {
  #map-container {
    height: 25vh; /* Quarter of viewport height on phone portrait */
  }
}