/* Weather app specific styles */

/* Chart containers */
.chart-container {
  position: relative;
  height: 300px;
  width: 100%;
}

/* Custom ApexCharts styling */
.apexcharts-tooltip {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.apexcharts-tooltip-title {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  color: #374151 !important;
  font-weight: 600 !important;
}

.apexcharts-grid-borders line {
  stroke: #f3f4f6 !important;
}

/* Comfort legend styling */
.comfort-legend {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  font-size: 0.75rem;
}

@media (min-width: 640px) {
  .comfort-legend {
    grid-template-columns: repeat(4, 1fr);
  }
}

.comfort-legend .flex {
  display: flex;
  align-items: center;
  space: 0.5rem;
}

/* Weather card specific styles */
.weather-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.weather-card:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* Hourly forecast specific styling */
#hourlyForecast .grid {
  display: grid;
  gap: 1rem;
}

#hourlyForecast .grid.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  #hourlyForecast .grid.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  #hourlyForecast .grid.grid-cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  #hourlyForecast .grid.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 640px) {
  #hourlyForecast .grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Hour card styling */
.hour-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  transition: all 0.3s ease;
  transform: scale(1);
  min-height: 200px;
}

.hour-card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hour-card .group:hover {
  transform: scale(1.05);
}

/* Contact section highlighting */
.contact-highlight:target {
  background-color: #f0f9ff;
  border-radius: 0.5rem;
  padding: 1rem;
  transition: background-color 0.3s ease;
}

/* Weather specific gradients */
.temp-gradient-hot {
  background: linear-gradient(135deg, #ff6b6b, #ffa726);
}

.temp-gradient-warm {
  background: linear-gradient(135deg, #ffa726, #ffeb3b);
}

.temp-gradient-cool {
  background: linear-gradient(135deg, #42a5f5, #26c6da);
}

.temp-gradient-cold {
  background: linear-gradient(135deg, #5c6bc0, #3f51b5);
}

/* Hurricane risk specific styling */
#hurricaneRiskSection .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Weather icon specific styling */
.wx-icon {
  width: 3rem;
  height: 3rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.wx-icon-large {
  width: 5rem;
  height: 5rem;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
}

/* Responsive adjustments for weather app */
@media (max-width: 768px) {
  .chart-container {
    height: 250px;
  }

  #map {
    height: 200px;
  }

  .hour-card {
    min-height: 160px;
  }
}

/* Loading indicator styling */
#loadingIndicator {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loadingIndicator .relative {
  position: relative;
}

#loadingIndicator .animate-spin {
  animation: spin 1s linear infinite;
}

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