/* Events Page Specific Styles */
/* * {
  outline: 1px solid red !important;
} */

#events-map {
  min-height: 100vh;
  padding: 2rem 0;
}

.map-container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative; /* Anchor for absolute overlays */
}

/* Japan Map SVG */
#japan-map {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  /* Removed max-width constraint */
}

/* Prefecture Dots */
.prefecture {
  fill: rgba(255, 255, 255, 0.3);
  stroke: var(--accent-color);
  stroke-width: 0.5px; /* Thinner stroke */
  cursor: pointer;
  transition: all 0.3s;
}

.prefecture:hover {
  fill: var(--accent-color);
  filter: drop-shadow(0 0 8px var(--accent-color));
}

/* Visited Prefectures */
.prefecture-visited {
  fill: var(--accent-color);
  animation: pulse 2s infinite;
}

.prefecture-visited:hover {
  fill: var(--accent-secondary);
  filter: drop-shadow(0 0 12px var(--accent-secondary));
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Light Mode Adjustments - Simplified */
/* Removed generic overrides that caused single-color issue in light mode */
/* body.light-mode .prefecture { ... } removed to let region colors apply */

/* Visited state should also use region colors (handled by specific rules) */

/* Map Legend */
.map-legend {
  position: absolute;
  top: 20px; /* Moved to Top-Left */
  left: 20px;
  background: var(--card-bg);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  z-index: 100;
  max-width: 90%; /* Prevent overflow on small screens */
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .map-legend {
    top: 10px;
    left: 10px;
    bottom: auto;
    right: auto;
    padding: 0.8rem;
    font-size: 0.8rem;
  }
}

body.light-mode .map-legend {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-code);
  font-size: 0.85rem;
  color: var(--text-color);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-color);
}

.legend-dot.visited {
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 0 5px var(--accent-color);
  animation: pulse 2s infinite;
}

.legend-dot.wishlist {
  background: #FFD700; /* Gold */
  border-color: #FFD700;
  box-shadow: 0 0 5px #FFD700;
}

body.light-mode .legend-dot.visited {
  background: #ff8c00;
  border-color: #ff8c00;
}

body.light-mode .legend-dot.wishlist {
  background: #FFD700; /* Gold stays same/similar */
  border-color: #DAA520; /* GoldenRod border */
}

/* Events List */
.events-list {
  max-width: 1000px;
  margin: 4rem auto 2rem;
  padding: 0 1rem;
}

.events-list h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--text-color);
  border-left: 5px solid var(--accent-color);
  padding-left: 1rem;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.event-item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-color);
  padding: 1.5rem;
  border-radius: 8px;
  transition: all 0.3s;
  height: 100%;
}

.event-item:hover {
  border-left-color: var(--accent-secondary);
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

body.light-mode .event-item:hover {
  border-left-color: #ff8c00;
}

.event-location {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

body.light-mode .event-location {
  color: #ff8c00;
}

.event-details h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.event-date {
  font-family: var(--font-code);
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 0.5rem;
}

.event-desc {
  color: #ccc;
  line-height: 1.6;
}

body.light-mode .event-desc {
  color: #555;
}

/* Responsive */
@media (max-width: 768px) {
  .map-container {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
  }
  
  .map-legend {
    position: static; /* Remove absolute positioning */
    order: 2; /* Ensure it comes after map */
    margin-top: 1rem;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: 1px solid var(--border-color);
    flex-direction: row; /* Keep items side-by-side or wrap if needed */
    flex-wrap: wrap; /* Allow wrapping if too narrow */
    justify-content: center;
  }

  .legend-item {
      font-size: 0.8rem;
  }

  /* Reset map order */
  #japan-map {
      order: 1;
  }
    
  .events-list h2 {
    font-size: 1.5rem;
  }
}

/* Region Colors - Japanese Traditional Colors Palette */
:root {
  /* Avoid Neon colors, use Pastel/Traditional */
  --color-hokkaido: #59b9c6; /* Mizu-asagi (Pale Blue-Green) */
  --color-tohoku:   #006e54; /* Moegi (Deep Green) */
  --color-kanto:    #c3d825; /* Wakakusa (Bright Yellow-Green) */
  --color-chubu:    #bbbcde; /* Fuji (Wisteria Purple) */
  --color-kansai:   #b7282e; /* Akane (Madder Red) */
  --color-chugoku:  #bf783a; /* Kohaku (Amber) */
  --color-shikoku:  #726d40; /* Miru (Olive Green) */
  --color-kyushu:   #eebbcb; /* Nadeshiko (Pink) */
  --color-okinawa:  #f2a0a1; /* Kobai (Red Plum) */
}

body.light-mode {
  /* Light Mode Specific Adjustments (Slightly darker/saturated for visibility on white) */
  --color-hokkaido: #2ca9e1; /* Mizu-asagi (Slightly darker) */
  --color-tohoku:   #00552e; /* Moegi (Darker) */
  --color-kanto:    #86c166; /* Wakakusa (Darker/Moegi-like) - Actually #86c166 is Moegi-ish */ 
  /* Let's stick to readable versions on white */
  --color-kanto:    #7b90d2; /* Fuji? No Kanto is Green. */
  --color-kanto:    #69b076; /* Green */
  --color-chubu:    #8b81c3; /* Fuji (Darker Purple) */
  --color-kansai:   #bd1e48; /* Akane (Darker) */
  --color-chugoku:  #9d5b25; /* Kohaku (Darker Brown) */
  --color-shikoku:  #5f5d36; /* Miru (Darker) */
  --color-kyushu:   #e597b2; /* Nadeshiko (Darker Pink) */
  --color-okinawa:  #e95295; /* Kobai (Darker/Saturated) */
}

/* Region Specific Styling for Dots */
/* Supports both .region-id (lowercase) and .region-Id (Capitalized) */

/* Hokkaido */
.prefecture.region-hokkaido, .prefecture.region-Hokkaido { stroke: var(--color-hokkaido); }
.prefecture.region-hokkaido:hover, .prefecture.region-Hokkaido:hover { fill: var(--color-hokkaido); filter: drop-shadow(0 0 8px var(--color-hokkaido)); }

/* Tohoku */
.prefecture.region-tohoku, .prefecture.region-Tohoku { stroke: var(--color-tohoku); }
.prefecture.region-tohoku:hover, .prefecture.region-Tohoku:hover { fill: var(--color-tohoku); filter: drop-shadow(0 0 8px var(--color-tohoku)); }

/* Kanto */
.prefecture.region-kanto, .prefecture.region-Kanto { stroke: var(--color-kanto); }
.prefecture.region-kanto:hover, .prefecture.region-Kanto:hover { fill: var(--color-kanto); filter: drop-shadow(0 0 8px var(--color-kanto)); }

/* Chubu */
.prefecture.region-chubu, .prefecture.region-Chubu { stroke: var(--color-chubu); }
.prefecture.region-chubu:hover, .prefecture.region-Chubu:hover { fill: var(--color-chubu); filter: drop-shadow(0 0 8px var(--color-chubu)); }

/* Kansai */
.prefecture.region-kansai, .prefecture.region-Kansai { stroke: var(--color-kansai); }
.prefecture.region-kansai:hover, .prefecture.region-Kansai:hover { fill: var(--color-kansai); filter: drop-shadow(0 0 8px var(--color-kansai)); }

/* Chugoku */
.prefecture.region-chugoku, .prefecture.region-Chugoku { stroke: var(--color-chugoku); }
.prefecture.region-chugoku:hover, .prefecture.region-Chugoku:hover { fill: var(--color-chugoku); filter: drop-shadow(0 0 8px var(--color-chugoku)); }

/* Shikoku */
.prefecture.region-shikoku, .prefecture.region-Shikoku { stroke: var(--color-shikoku); }
.prefecture.region-shikoku:hover, .prefecture.region-Shikoku:hover { fill: var(--color-shikoku); filter: drop-shadow(0 0 8px var(--color-shikoku)); }

/* Kyushu */
.prefecture.region-kyushu, .prefecture.region-Kyushu { stroke: var(--color-kyushu); }
.prefecture.region-kyushu:hover, .prefecture.region-Kyushu:hover { fill: var(--color-kyushu); filter: drop-shadow(0 0 8px var(--color-kyushu)); }

/* Okinawa */
.prefecture.region-okinawa, .prefecture.region-Okinawa { stroke: var(--color-okinawa); }
.prefecture.region-okinawa:hover, .prefecture.region-Okinawa:hover { fill: var(--color-okinawa); filter: drop-shadow(0 0 8px var(--color-okinawa)); }

/* Bubble Specific Coloring - REMOVED */
/* User requested bubbles to use Theme Color (Accent), while Dots use Region Color */
/* .map-speech-bubble defaults to var(--accent-color) which is Cyan (Dark) / Orange (Light) */

/* Visited Spot Override - Use Region Fill */
/* We want visited spots to be FILLED with their region color */
/* Since they already have specific region classes, we just need to target .spot-visited combined with region class? */
/* Or just generic .spot-visited sets fill to CURRENT stroke color? */
#japan-map .prefecture.spot-visited {
  fill: currentColor; /* Does not work for stroke color inheritance usually */
  /* We need specific rules or rely on generic override if we can't map stroke to fill easily in CSS without var */
}

/* Because .prefecture.region-X sets 'stroke', we can use that variable for fill if we repeat the selector or add a generic rule using style attribute? */
/* For now, let's explicitly add fill rules for visited status per region */
.prefecture.region-hokkaido.spot-visited, .prefecture.region-Hokkaido.spot-visited { fill: var(--color-hokkaido); }
.prefecture.region-tohoku.spot-visited,   .prefecture.region-Tohoku.spot-visited   { fill: var(--color-tohoku); }
.prefecture.region-kanto.spot-visited,    .prefecture.region-Kanto.spot-visited    { fill: var(--color-kanto); }
.prefecture.region-chubu.spot-visited,    .prefecture.region-Chubu.spot-visited    { fill: var(--color-chubu); }
.prefecture.region-kansai.spot-visited,   .prefecture.region-Kansai.spot-visited   { fill: var(--color-kansai); }
.prefecture.region-chugoku.spot-visited,  .prefecture.region-Chugoku.spot-visited  { fill: var(--color-chugoku); }
.prefecture.region-shikoku.spot-visited,  .prefecture.region-Shikoku.spot-visited  { fill: var(--color-shikoku); }
.prefecture.region-kyushu.spot-visited,   .prefecture.region-Kyushu.spot-visited   { fill: var(--color-kyushu); }
.prefecture.region-okinawa.spot-visited,  .prefecture.region-Okinawa.spot-visited  { fill: var(--color-okinawa); }

/* Spot Coloring (Specific Municipality/Location) - Overrides Region Colors */
#japan-map .prefecture.spot-visited {
  fill: var(--accent-color);
  fill-opacity: 1;
  stroke: var(--accent-color);
  filter: drop-shadow(0 0 8px var(--accent-color));
  animation: pulse 2s infinite; /* Pulsate to highlight visited spots */
}

#japan-map .prefecture.spot-wishlist {
  fill: #ffd700; /* Gold */
  fill-opacity: 1;
  stroke: #ffbd00;
  filter: drop-shadow(0 0 8px #ffd700);
}



body.light-mode #japan-map .prefecture.spot-visited {
  fill: #ff8c00;
  stroke: #ff8c00;
  filter: drop-shadow(0 0 8px #ff8c00);
}

/* Modal */
.modal {
  display: none; 
  position: fixed; 
  z-index: 2000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.6); 
  backdrop-filter: blur(5px);
}

.modal-content {
  background-color: var(--card-bg);
  margin: 10% auto; 
  padding: 2rem;
  border: 1px solid var(--border-color);
  width: 90%;
  max-width: 500px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.close-modal {
  color: #aaa;
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
  color: var(--accent-color);
  text-decoration: none;
  cursor: pointer;
}

#modal-body h3 {
  margin-top: 0;
  color: var(--accent-color);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

#modal-body img {
  width: 100%;
  border-radius: 8px;
  margin-top: 1rem;
  border: 1px solid var(--border-color);
}

/* Cluster Selection */
.cluster-option {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}
.cluster-option:last-child {
  border-bottom: none;
}
.cluster-option:hover {
  background: rgba(255, 255, 255, 0.05); /* Light hover in dark mode */
  color: var(--accent-color);
}
body.light-mode .cluster-option:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Hide Reset Button when Modal is open? No, z-index handles it. */

.map-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  z-index: 500; /* Ensure it stays above map elements */
}

#reset-zoom {
  background: var(--card-bg);
  border: 1px solid var(--accent-color);
  color: var(--text-color);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-code);
  font-size: 0.9rem;
  transition: all 0.3s;
}

#reset-zoom:hover {
  background: var(--accent-color);
  color: #000;
}

.map-hint {
  font-size: 0.8rem;
  color: var(--accent-color);
  opacity: 0.7;
}

/* Map Tooltip */
.map-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: var(--font-code);
  pointer-events: none;
  z-index: 1000;
  border: 1px solid var(--accent-color);
  display: none;
  text-transform: capitalize;
}

body.light-mode .map-tooltip {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  border-color: #ff8c00;
}

/* Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Grid Animation */
.stagger-grid .event-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  /* transition-delay is set inline in JS */
}

.stagger-grid.visible .event-item {
  opacity: 1;
  transform: translateY(0);
}

/* Event Type Badge (Matches .tag style) */
.type-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-family: var(--font-code);
  display: inline-block;
  margin-bottom: 0.8rem;
}

body.light-mode .type-badge {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}

/* Zoom Annotations */
.label-line {
  stroke: var(--accent-color);
  stroke-width: 1;
  opacity: 0.7;
  pointer-events: none;
}

.label-text {
  fill: var(--text-color); /* White/Default */
  font-family: var(--font-code);
  font-weight: 500;
  cursor: pointer;
  text-shadow: 0 0 3px var(--bg-color), 0 0 3px var(--bg-color); /* Halo for readability */
  transition: fill 0.2s;
}

#zoom-labels .label-text {
  font-size: 9px;
}

/* Regional Overrides */
/* Regional Overrides - Uncomment and adjust. Use !important or ID for specificity if needed. */
/* #zoom-labels .label-text.region-Hokkaido { font-size: 12px; } */
/* #zoom-labels .label-text.region-Tohoku { font-size: 10px; } */
/* #zoom-labels .label-text.region-Kanto { font-size: 10px; } */
#zoom-labels .label-text.region-Chubu { font-size: 3px; }
#zoom-labels .label-text.region-Kansai { font-size: 3px; }
/* #zoom-labels .label-text.region-Chugoku { font-size: 10px; } */
/* #zoom-labels .label-text.region-Shikoku { font-size: 10px; } */
#zoom-labels .label-text.region-Kyushu { font-size: 5px; }
#zoom-labels .label-text.region-Okinawa { font-size: 12px; }

#overview-labels .label-text {
  font-size: 10px;
}

.label-text:hover {
  fill: var(--accent-color); /* Color on Hover */
  font-weight: 700;
}

body.light-mode .label-line {
  stroke: #ff8c00;
}

body.light-mode .label-text {
  fill: #333;
  text-shadow: 0 0 3px rgba(255,255,255,0.8), 0 0 3px rgba(255,255,255,0.8);
  font-weight: 600;
}

body.light-mode .label-text:hover {
  fill: #ff8c00;
}

/* Restored CSS Speech Bubble (Rabbit Style) */
.map-speech-bubble {
  position: absolute;
  /* Centering logic within the foreignObject (which is centered on point) */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Default center */
  
  /* Visual Style (Matches Rabbit) */
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark */
  color: #ffffff;
  border: 2px solid var(--accent-color);
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  font-family: var(--font-code);
  font-size: 0.95rem;
  min-width: max-content;
  max-width: 250px;
  text-align: center;
  white-space: nowrap;
  
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Add subtle shadow for depth */
}

/* Hover Effect */
.map-speech-bubble:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%) scale(1.05); /* Grow slightly from center */
  box-shadow: 0 0 15px var(--accent-color);
  z-index: 100;
}

/* Arrow Base */
.map-speech-bubble::after {
  content: '';
  position: absolute;
  border: 8px solid transparent;
  pointer-events: none;
  
  /* Custom Tail Transforms */
  /* We use transform-origin to ensure it skews from the base attached to the bubble */
  transform-origin: center;
  transition: transform 0.3s;
}

/* Custom Tail Sizing Support */
/* Note: Border triangles use border-width to control size. */
/* default is 8px. */
/* We can use calcs if vars are present. fallback to 8px. */
/* Actually, simpler to just apply transforms for skew. */

/* Tail Bottom (Default) -> Arrow Points Down */
.map-speech-bubble.tail-bottom {
  transform: translate(-50%, -100%); /* Shift up so bottom is at anchor */
  margin-top: -10px; /* Offset for tail */
}
.map-speech-bubble.tail-bottom::after {
  top: 100%;
  left: 50%;
  margin-left: -8px; 
  /* Support Custom Width/Height if needed, but Skew is priority */
  /* Skew X for horizontal slant */
  transform: skewX(var(--fo-tail-skew, 0deg));
  transform-origin: top center;
  border-top-color: var(--accent-color);
  
  /* If custom height is set, we need to adjust border-width */
  /* border-width: [top] [right] [bottom] [left] */
  /* For bottom tail, only top border is visible color. Height = border-top-width. Width = left+right. */
  border-width: var(--fo-tail-height, 8px) var(--fo-tail-half-width, 8px) 0 var(--fo-tail-half-width, 8px);
  margin-left: calc(var(--fo-tail-half-width, 8px) * -1);
}

/* Tail Top -> Arrow Points Up */
.map-speech-bubble.tail-top {
  transform: translate(-50%, 0%); /* Shift down so top is at anchor */
  margin-top: 10px;
}
.map-speech-bubble.tail-top::after {
  bottom: 100%;
  left: 50%;
  /* Skew X for horizontal slant */
  transform: skewX(var(--fo-tail-skew, 0deg));
  transform-origin: bottom center;
  border-bottom-color: var(--accent-color);
  
  border-width: 0 var(--fo-tail-half-width, 8px) var(--fo-tail-height, 8px) var(--fo-tail-half-width, 8px);
  margin-left: calc(var(--fo-tail-half-width, 8px) * -1);
}

/* Tail Left -> Arrow Points Left */
.map-speech-bubble.tail-left {
  transform: translate(0%, -50%); /* Shift right so left is at anchor */
  margin-left: 10px;
}
.map-speech-bubble.tail-left::after {
  right: 100%;
  top: 50%;
  /* Skew Y for vertical slant */
  transform: skewY(var(--fo-tail-skew, 0deg));
  transform-origin: center right;
  border-right-color: var(--accent-color);
  
  border-width: var(--fo-tail-half-width, 8px) var(--fo-tail-height, 8px) var(--fo-tail-half-width, 8px) 0;
  margin-top: calc(var(--fo-tail-half-width, 8px) * -1);
}

/* Tail Right -> Arrow Points Right */
.map-speech-bubble.tail-right {
  transform: translate(-100%, -50%); /* Shift left so right is at anchor */
  margin-left: -10px;
}
.map-speech-bubble.tail-right::after {
  left: 100%;
  top: 50%;
  /* Skew Y for vertical slant */
  transform: skewY(var(--fo-tail-skew, 0deg));
  transform-origin: center left;
  border-left-color: var(--accent-color);
  
  border-width: var(--fo-tail-half-width, 8px) 0 var(--fo-tail-half-width, 8px) var(--fo-tail-height, 8px);
  margin-top: calc(var(--fo-tail-half-width, 8px) * -1);
}

.map-speech-bubble {
  --bubble-color: var(--accent-color); /* Default */
  border-color: var(--bubble-color);
}

/* Now apply var to arrows */
.map-speech-bubble.tail-bottom::after { border-top-color: var(--bubble-color); }
.map-speech-bubble.tail-top::after    { border-bottom-color: var(--bubble-color); }
.map-speech-bubble.tail-left::after   { border-right-color: var(--bubble-color); }
.map-speech-bubble.tail-right::after  { border-left-color: var(--bubble-color); }

/* Hover Glow uses same color */
.map-speech-bubble:hover {
  box-shadow: 0 0 15px var(--bubble-color);
}

/* Visited Status */
.map-speech-bubble.spot-visited {
  background: var(--bubble-color); /* Fill with color */
  color: #000; /* Contrast text? Or white with shadow? */
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  /* Make semi-transparent fill to keep map visible? */
  background: color-mix(in srgb, var(--bubble-color), transparent 20%);
}

.map-speech-bubble.spot-wishlist {
  /* Removed gold override to use region color */
  border-style: solid;
}

/* Map Pin Icon Styling (Vector) */
svg.map-pin-svg {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  fill: rgba(255, 255, 255, 0.3); /* Unvisited default: semi-transparent white like original dots */
  stroke: var(--accent-color);
  stroke-width: 1px;
}

svg.map-pin-svg:hover {
  fill: var(--accent-color);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

svg.map-pin-svg.prefecture-visited {
  fill: var(--accent-color); /* Visited: Solid accent color */
  stroke: none; /* Or keep stroke if preferred, but usually fill is enough */
  animation: pulse 2s infinite; 
}

/* Ensure selected/active pins pop out more */
svg.map-pin-svg.spot-visited {
  fill: var(--accent-color);
  fill-opacity: 1;
  stroke: var(--accent-color);
  filter: drop-shadow(0 0 8px var(--accent-color));
  animation: pulse 2s infinite;
}

/* Pulse Animation (ensure it works on SVG opacity or transform if needed, 
   but existing 'pulse' uses opacity which is fine for the whole SVG) */

/* Light Mode Specifics */
body.light-mode svg.map-pin-svg {
  stroke: #ff8c00;
  fill: rgba(0, 0, 0, 0.1); /* Darker unvisited in light mode? Or just transparent */
}

body.light-mode svg.map-pin-svg.prefecture-visited {
  fill: #ff8c00;
}