/**
 * PythonTutor Map Widget - Minimal CSS
 * Embeddable world map visualization for real-time traffic
 */

/* Container */
.pythontutor-map-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

/* SVG Map */
.pythontutor-map {
  display: block;
}

/* Country paths */
.pythontutor-map .country {
  /* fill and stroke properties controlled by JS via .style() */
  /* See _defaults in map-widget.js for default values */
  transition: opacity 0.2s ease;
}

.pythontutor-map .country:hover {
  opacity: 0.8;
}

/* Plotted point labels */
.pythontutor-map .plotted-point-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
  pointer-events: none;
}

/* Ripple effects */
.pythontutor-map .plotted-point-ripple {
  pointer-events: none;
}

/* Replay dot CSS animations (performance optimization) */
@keyframes replay-dot-entrance {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: var(--replay-opacity, 1);
    transform: scale(1);
  }
}

@keyframes replay-dot-exit {
  from {
    opacity: var(--replay-opacity, 1);
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}

.pythontutor-map .replay-dot {
  transform-origin: center;
  transform-box: fill-box;
}

.pythontutor-map .replay-dot-css-anim {
  will-change: opacity, transform;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeQuadOut */
  animation-fill-mode: forwards;
}

/* Control buttons container */
.pythontutor-map-controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Base button style */
.pythontutor-map-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.pythontutor-map-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Live mode button */
.pythontutor-map-btn-live {
  background-color: #28a745;
  color: white;
}

.pythontutor-map-btn-live:hover:not(:disabled) {
  background-color: #218838;
}

.pythontutor-map-btn-live.active {
  background-color: #dc3545;
}

.pythontutor-map-btn-live.active:hover:not(:disabled) {
  background-color: #c82333;
}

/* 24-hour replay button */
.pythontutor-map-btn-replay {
  background-color: #9932cc;
  color: white;
}

.pythontutor-map-btn-replay:hover:not(:disabled) {
  background-color: #7a28a3;
}

.pythontutor-map-btn-replay.active {
  background-color: #dc3545;
}

.pythontutor-map-btn-replay.active:hover:not(:disabled) {
  background-color: #c82333;
}

/* All-time visitors (choropleth) button */
.pythontutor-map-btn-choropleth {
  background-color: #0066cc;
  color: white;
}

.pythontutor-map-btn-choropleth:hover:not(:disabled) {
  background-color: #0052a3;
}

.pythontutor-map-btn-choropleth.active {
  background-color: #dc3545;
}

.pythontutor-map-btn-choropleth.active:hover:not(:disabled) {
  background-color: #c82333;
}

/* Status indicator - SVG text element, styled via JS */