/**
 * Moth Heatmap Styling Variables
 * CSS variables for theme customization
 */

:root {
  /* Heatmap Colors - From frontend.css */
  --moth-heatmap-low-color: #4ecdc4;
  --moth-heatmap-medium-color: #ffd93d;
  --moth-heatmap-high-color: #ff6b6b;
  
  /* Map Boundaries - From frontend.css */
  --moth-heatmap-boundary-stroke-color: #668839;
  --moth-heatmap-boundary-fill-color: #f0f8e8;
  --moth-heatmap-boundary-hover-color: #8fbc47;
  
  /* Interface Theme - From frontend.css */
  --moth-heatmap-primary-color: #668839;
  --moth-heatmap-secondary-color: #8fbc47;
  --moth-heatmap-accent-color: #a8d060;
  
  /* Map Markers - From frontend.css */
  --moth-heatmap-marker-color: #668839;
  --moth-heatmap-marker-color-opacity: 1; /* New variable for marker color opacity (0-1) */
  --moth-heatmap-marker-border-color: #333333;
  --moth-heatmap-marker-border-opacity: 1; /* New variable for marker border opacity (0-1) */
  --moth-heatmap-marker-size: 20px; /* New variable for marker size */
  
  /* Heatmap Appearance */
  --moth-heatmap-opacity: 0.8;
  --moth-heatmap-radius: 20px;
  --moth-heatmap-blur: 15px;
  
  /* Map Styling */
  --moth-heatmap-boundary-width: 2px;
  --moth-heatmap-corner-radius: 8px;
  
  /* Animation & Effects */
  --moth-heatmap-enable-animations: 1;
  --moth-heatmap-enable-hover-effects: 1;
  --moth-heatmap-enable-transitions: 1;
}

/* Apply variables to elements */
.moth-heatmap-container {
  /* Apply corner radius to container elements */
  --border-radius: var(--moth-heatmap-corner-radius);
}

/* Apply to controls section */
.moth-heatmap-controls {
  border-radius: var(--moth-heatmap-corner-radius);
}

/* Apply to buttons */
.moth-heatmap-update-btn {
  background: linear-gradient(135deg, var(--moth-heatmap-primary-color) 0%, var(--moth-heatmap-secondary-color) 100%);
  border-radius: var(--moth-heatmap-corner-radius);
}

.moth-heatmap-reset-btn {
  border-radius: var(--moth-heatmap-corner-radius);
}

/* Apply to legend */
.moth-heatmap-legend {
  border-radius: var(--moth-heatmap-corner-radius);
}

.legend-color.low {
  background-color: var(--moth-heatmap-low-color);
}

.legend-color.medium {
  background-color: var(--moth-heatmap-medium-color);
}

.legend-color.high {
  background-color: var(--moth-heatmap-high-color);
}

/* Apply to legend gradient - Match frontend.css line 928 */
.legend-gradient {
  background: linear-gradient(to right,
    var(--moth-heatmap-low-color) 0%,
    var(--moth-heatmap-medium-color) 50%,
    var(--moth-heatmap-high-color) 100%);
  border-radius: calc(var(--moth-heatmap-corner-radius) / 2);
}

/* Apply to county boundaries */
.preview-boundary {
  border-color: var(--moth-heatmap-boundary-stroke-color);
  background-color: var(--moth-heatmap-boundary-fill-color, rgba(240, 248, 232, 0.3));
  border-width: var(--moth-heatmap-boundary-width);
  border-radius: var(--moth-heatmap-corner-radius);
}

.preview-boundary:hover {
  background-color: var(--moth-heatmap-boundary-hover-color, rgba(143, 188, 71, 0.2));
}

/* Apply to heatmap points */
.preview-heatpoint {
  opacity: var(--moth-heatmap-opacity);
  width: var(--moth-heatmap-radius);
  height: var(--moth-heatmap-radius);
  filter: blur(var(--moth-heatmap-blur));
}

.preview-heatpoint.high {
  background: radial-gradient(circle, var(--moth-heatmap-high-color) 0%, rgba(255, 107, 107, 0.3) 70%);
}

.preview-heatpoint.medium {
  background: radial-gradient(circle, var(--moth-heatmap-medium-color) 0%, rgba(255, 217, 61, 0.3) 70%);
}

.preview-heatpoint.low {
  background: radial-gradient(circle, var(--moth-heatmap-low-color) 0%, rgba(78, 205, 196, 0.3) 70%);
}

/* Animation controls */
.animations-enabled .preview-heatpoint {
  animation: pulse 2s infinite;
}

/* Transitions */
.moth-heatmap-container [data-enable-transitions="1"] .preview-boundary,
.moth-heatmap-container [data-enable-transitions="1"] .preview-heatpoint {
  transition: all 0.3s ease;
}

.moth-heatmap-container [data-enable-transitions="0"] .preview-boundary,
.moth-heatmap-container [data-enable-transitions="0"] .preview-heatpoint {
  transition: none;
}

/* Hover effects */
.moth-heatmap-container [data-enable-hover-effects="0"] .preview-boundary:hover {
  background-color: var(--moth-heatmap-boundary-fill-color, rgba(240, 248, 232, 0.3));
  border-color: var(--moth-heatmap-boundary-stroke-color);
}