/**
 * SPRINTER Dealer Locator Styles
 * White background, light colors, bilingual labels
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
  --sprinter-primary: #ec430f;
  --sprinter-secondary: #f2f2f2;
  --sprinter-bg: #ffffff;
  --sprinter-dark: #171717;
  --sprinter-text: #252525;
  --sprinter-gray: #666666;
  --sprinter-light-gray: #e0e0e0;
  
  /* Light region colors */
  --region-americas-light: rgba(74, 144, 217, 0.25);
  --region-europe-light: rgba(52, 152, 219, 0.25);
  --region-asia-light: rgba(46, 204, 113, 0.25);
  --region-china-light: rgba(155, 89, 182, 0.25);
  --region-russia-light: rgba(241, 196, 15, 0.25);
  --region-australia-light: rgba(230, 126, 34, 0.25);
  --region-africa-light: rgba(231, 76, 60, 0.25);
  
  /* Solid colors for legend */
  --region-americas-solid: #4A90D9;
  --region-europe-solid: #3498db;
  --region-asia-solid: #2ecc71;
  --region-china-solid: #9b59b6;
  --region-russia-solid: #f1c40f;
  --region-australia-solid: #e67e22;
  --region-africa-solid: #e74c3c;
}

/* ========================================
   Map Container
   ======================================== */
.sprinter-map-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: var(--sprinter-bg);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.sprinter-map-container {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sprinter-bg);
  border: 1px solid var(--sprinter-light-gray);
}

.sprinter-map-container svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--sprinter-bg);
}

/* ========================================
   Map Legend - Below Map
   ======================================== */
.sprinter-map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  padding: 18px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid var(--sprinter-light-gray);
}

.sprinter-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sprinter-legend-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.sprinter-legend-dot {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.sprinter-legend-dot.americas { background: var(--region-americas-solid); }
.sprinter-legend-dot.europe { background: var(--region-europe-solid); }
.sprinter-legend-dot.asia { background: var(--region-asia-solid); }
.sprinter-legend-dot.china { background: var(--region-china-solid); }
.sprinter-legend-dot.russia { background: var(--region-russia-solid); }
.sprinter-legend-dot.australia { background: var(--region-australia-solid); }
.sprinter-legend-dot.africa { background: var(--region-africa-solid); }

.sprinter-legend-label {
  color: var(--sprinter-text);
  font-size: 13px;
  font-weight: 500;
}

/* ========================================
   Region Styling (Light)
   ======================================== */
.sprinter-map-region {
  cursor: pointer;
  transition: opacity 0.3s, fill 0.3s;
}

.sprinter-map-region:hover {
  fill: #e1d9d9;
  filter: brightness(0.9);
  opacity: 1;
}

.sprinter-map-region.americas { fill: var(--region-americas-light); stroke: var(--region-americas-solid); stroke-width: 1.5; }
.sprinter-map-region.europe { fill: var(--region-europe-light); stroke: var(--region-europe-solid); stroke-width: 1.5; }
.sprinter-map-region.asia { fill: var(--region-asia-light); stroke: var(--region-asia-solid); stroke-width: 1.5; }
.sprinter-map-region.china { fill: var(--region-china-light); stroke: var(--region-china-solid); stroke-width: 1.5; }
.sprinter-map-region.russia { fill: var(--region-russia-light); stroke: var(--region-russia-solid); stroke-width: 1.5; }
.sprinter-map-region.australia { fill: var(--region-australia-light); stroke: var(--region-australia-solid); stroke-width: 1.5; }
.sprinter-map-region.africa { fill: var(--region-africa-light); stroke: var(--region-africa-solid); stroke-width: 1.5; }

/* ========================================
   Region Labels - Clickable
   ======================================== */
.sprinter-region-label {
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  font-family: Arial, sans-serif;
}

.sprinter-region-label:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.sprinter-region-label .en {
  font-size: 14px;
  font-weight: bold;
  fill: #333;
}

.sprinter-region-label .zh {
  font-size: 11px;
  fill: #666;
}

/* ========================================
   Marker Styling
   ======================================== */
.sprinter-marker-group {
  cursor: pointer;
  transition: transform 0.2s;
}

.sprinter-marker-group:hover {
  transform: scale(1.2);
}

.sprinter-marker-bg {
  fill: var(--sprinter-primary);
  stroke: white;
  stroke-width: 2;
}

.sprinter-marker-bg.hq {
  fill: var(--sprinter-primary);
}

.sprinter-marker-bg.branch {
  fill: #f39c12;
}

.sprinter-marker-label {
  font-family: Arial, sans-serif;
  font-size: 10px;
  fill: #333;
  font-weight: bold;
}

/* ========================================
   Dealer Results
   ======================================== */
#sprinter-dealer-results,
#sprinter-lookup-result {
  margin-top: 25px;
  padding: 25px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid var(--sprinter-light-gray);
}

.sprinter-results-title {
  color: var(--sprinter-text);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sprinter-primary);
}

.sprinter-region-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.sprinter-region-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: white;
}

.sprinter-region-badge.americas { background: var(--region-americas-solid); }
.sprinter-region-badge.europe { background: var(--region-europe-solid); }
.sprinter-region-badge.asia { background: var(--region-asia-solid); }
.sprinter-region-badge.china { background: var(--region-china-solid); }
.sprinter-region-badge.russia { background: var(--region-russia-solid); }
.sprinter-region-badge.australia { background: var(--region-australia-solid); }
.sprinter-region-badge.africa { background: var(--region-africa-solid); }

/* ========================================
   Dealer Cards
   ======================================== */
.sprinter-dealer-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.sprinter-dealer-card {
  padding: 18px;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--sprinter-light-gray);
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sprinter-dealer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--sprinter-primary);
}

.sprinter-dealer-name {
  color: var(--sprinter-text);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.sprinter-dealer-country {
  display: inline-block;
  padding: 3px 10px;
  background: #f0f0f0;
  border-radius: 12px;
  font-size: 11px;
  color: var(--sprinter-gray);
  margin-bottom: 10px;
}

.sprinter-dealer-info {
  font-size: 13px;
  color: var(--sprinter-gray);
  line-height: 1.5;
}

.sprinter-dealer-info p {
  margin: 4px 0;
}

.sprinter-dealer-info a {
  color: var(--sprinter-primary);
  text-decoration: none;
}

.sprinter-dealer-info a:hover {
  text-decoration: underline;
}

/* ========================================
   Branch/HQ Info
   ======================================== */
.sprinter-branch-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 18px;
  background: linear-gradient(135deg, rgba(236, 67, 15, 0.08), rgba(243, 156, 18, 0.08));
  border-radius: 8px;
  border-left: 4px solid var(--sprinter-primary);
  margin-bottom: 15px;
}

.sprinter-branch-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
}

.sprinter-branch-icon.hq { background: var(--sprinter-primary); }
.sprinter-branch-icon.branch { background: #f39c12; }

.sprinter-branch-details h4 {
  color: var(--sprinter-text);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.sprinter-branch-details p {
  color: var(--sprinter-gray);
  font-size: 12px;
  margin: 0;
}

/* ========================================
   Country Selector
   ======================================== */
.sprinter-country-selector-wrapper {
  max-width: 600px;
  margin: 30px auto;
  padding: 25px;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--sprinter-light-gray);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.sprinter-country-select {
  width: 100%;
  padding: 14px 18px;
  background: white;
  border: 2px solid var(--sprinter-light-gray);
  border-radius: 8px;
  color: var(--sprinter-text);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.3s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.sprinter-country-select:hover,
.sprinter-country-select:focus {
  border-color: var(--sprinter-primary);
  outline: none;
}

.sprinter-country-select option {
  background: white;
  color: var(--sprinter-text);
  padding: 10px;
}

/* ========================================
   Buttons
   ======================================== */
.sprinter-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.sprinter-btn-primary {
  background: var(--sprinter-primary);
  color: white;
}

.sprinter-btn-primary:hover {
  color: #f2f2f2;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(236, 67, 15, 0.35);
}

.sprinter-submit-wrapper {
  text-align: center;
  margin-top: 18px;
}

/* ========================================
   Loading & States
   ======================================== */
.sprinter-loading {
  text-align: center;
  padding: 40px;
  color: var(--sprinter-gray);
}

.sprinter-loading::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #f0f0f0;
  border-top-color: var(--sprinter-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 15px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.sprinter-no-results {
  text-align: center;
  padding: 40px;
  color: var(--sprinter-gray);
  font-size: 14px;
}

.sprinter-instructions {
  text-align: center;
  color: var(--sprinter-gray);
  font-size: 13px;
  margin: 15px 0;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
  .sprinter-map-legend {
    gap: 10px;
  }
  
  .sprinter-legend-item {
    padding: 6px 12px;
  }
  
  .sprinter-dealer-list {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Utility
   ======================================== */
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.hidden { display: none; }

/* ========================================
   Dealer Detail Modal

/* ========================================
   Dealer Marker Hover Effects
   ======================================== */
.sprinter-dealer-marker {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.sprinter-dealer-marker:hover {
  opacity: 0.8;
}

.sprinter-dealer-marker:hover text {
  fill: #FFD700;
}

.sprinter-dealer-marker:hover circle {
  stroke: #FFD700;
  stroke-width: 1;
}