/**
 * Weather Icons CSS
 * Simple weather icon styles using emoji/unicode
 */

.wi {
    display: inline-block;
    font-size: 2rem;
    line-height: 1;
}

.wi-large {
    font-size: 4rem;
}

.wi-small {
    font-size: 1.5rem;
}

/* Weather condition icons (using emoji) */
.wi-clear-day::before { content: "☀️"; }
.wi-clear-night::before { content: "🌙"; }
.wi-cloudy::before { content: "☁️"; }
.wi-partly-cloudy-day::before { content: "⛅"; }
.wi-partly-cloudy-night::before { content: "🌙☁️"; }
.wi-rain::before { content: "🌧️"; }
.wi-snow::before { content: "🌨️"; }
.wi-sleet::before { content: "🌨️"; }
.wi-wind::before { content: "💨"; }
.wi-fog::before { content: "🌫️"; }
.wi-thunderstorm::before { content: "⛈️"; }
.wi-tornado::before { content: "🌪️"; }
.wi-hurricane::before { content: "🌀"; }

/* Additional icons */
.wi-sunrise::before { content: "🌅"; }
.wi-sunset::before { content: "🌇"; }
.wi-moon::before { content: "🌙"; }
.wi-stars::before { content: "✨"; }
.wi-umbrella::before { content: "☂️"; }
.wi-thermometer::before { content: "🌡️"; }
.wi-humidity::before { content: "💧"; }
.wi-wind-direction::before { content: "🧭"; }
.wi-barometer::before { content: "📊"; }

/* Animated icons */
.wi-animated {
    animation: weather-pulse 2s ease-in-out infinite;
}

@keyframes weather-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Weather condition backgrounds */
.weather-bg-clear {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.weather-bg-cloudy {
    background: linear-gradient(135deg, #757F9A 0%, #D7DDE8 100%);
}

.weather-bg-rain {
    background: linear-gradient(135deg, #4B79A1 0%, #283E51 100%);
}

.weather-bg-snow {
    background: linear-gradient(135deg, #E0EAFC 0%, #CFDEF3 100%);
}

.weather-bg-storm {
    background: linear-gradient(135deg, #2C3E50 0%, #4CA1AF 100%);
}