/* Weather Badge Component */
.weather-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.weather-badge-empty {
  background: #f9f9f9;
}

.weather-badge-container {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.weather-icon {
  font-size: 1.25rem;
}

.weather-temps {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.weather-temp-high {
  font-weight: 600;
  color: #333;
}

.weather-temp-divider {
  color: #999;
  font-size: 0.875rem;
}

.weather-temp-low {
  color: #666;
  font-size: 0.875rem;
}

.weather-temp-empty {
  color: #999;
  font-size: 0.875rem;
}

.weather-precipitation {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.weather-precipitation-icon {
  font-size: 0.875rem;
}

.weather-precipitation-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #2563eb;
}

.weather-wind {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.weather-wind-direction {
  color: #666;
  font-size: 0.875rem;
}

.weather-wind-speed {
  color: #666;
  font-size: 0.875rem;
}

.weather-no-data {
  color: #999;
  font-size: 0.875rem;
}

/* Weather Details */
.weather-details {
  margin-top: 1rem;
}

.weather-details dl {
  display: grid;
  gap: 0.5rem;
}

.weather-details dt {
  font-size: 0.875rem;
  font-weight: 500;
  color: #666;
}

.weather-details dd {
  font-size: 0.875rem;
  color: #333;
  margin: 0 0 0.5rem 0;
}

/* Weather Status Messages */
.weather-unavailable {
  text-align: center;
  padding: 2rem 0;
  color: #999;
}

.weather-error {
  text-align: center;
  padding: 2rem 0;
  color: #dc2626;
}