/* High-Quality Weather Animation Backgrounds */
 .weather-bg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     overflow: hidden;
     transition: all 1s ease-in-out;
 }

 /* Enhanced Sunny Animation */
 .sunny-bg {
     background:
         radial-gradient(circle at 20% 20%, rgba(255, 223, 0, 0.3) 0%, transparent 50%),
         radial-gradient(circle at 80% 30%, rgba(255, 165, 0, 0.2) 0%, transparent 50%),
         radial-gradient(circle at 40% 70%, rgba(255, 140, 0, 0.1) 0%, transparent 50%),
         linear-gradient(135deg, #FFE066 0%, #FF9A56 20%, #FFD700 40%, #FFA500 60%, #FF8C00 80%, #FF6347 100%);
     background-size: 800% 800%, 600% 600%, 400% 400%, 300% 300%;
     animation: sunnyGradient 15s ease infinite, sunnyRadial 20s ease infinite;
 }

 /* Partly Cloudy Animation */
 .partly-cloudy-bg {
     background:
         radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
         radial-gradient(circle at 70% 20%, rgba(135, 206, 235, 0.3) 0%, transparent 50%),
         linear-gradient(135deg, #87CEEB 0%, #B0E0E6 20%, #F0F8FF 40%, #E6E6FA 60%, #D3D3D3 80%, #B8B8B8 100%);
     background-size: 500% 500%, 400% 400%, 300% 300%;
     animation: partlyCloudyGradient 12s ease infinite, cloudyRadial 18s ease infinite;
 }

 /* Light Rain Animation */
 .light-rain-bg {
     background:
         radial-gradient(circle at 25% 25%, rgba(70, 130, 180, 0.4) 0%, transparent 60%),
         radial-gradient(circle at 75% 60%, rgba(47, 79, 79, 0.3) 0%, transparent 50%),
         linear-gradient(135deg, #708090 0%, #778899 15%, #696969 30%, #2F4F4F 50%, #4682B4 70%, #5F9EA0 85%, #6495ED 100%);
     background-size: 600% 600%, 500% 500%, 400% 400%;
     animation: lightRainGradient 10s ease infinite, rainRadial 14s ease infinite;
 }

 /* Heavy Rain Animation */
 .heavy-rain-bg {
     background:
         radial-gradient(circle at 40% 30%, rgba(25, 25, 112, 0.5) 0%, transparent 70%),
         radial-gradient(circle at 60% 70%, rgba(47, 79, 79, 0.4) 0%, transparent 60%),
         linear-gradient(135deg, #2F4F4F 0%, #36454F 15%, #1C1C1C 30%, #191970 45%, #000080 60%, #483D8B 75%, #2E2E2E 100%);
     background-size: 700% 700%, 600% 600%, 500% 500%;
     animation: heavyRainGradient 8s ease infinite, stormRadial 12s ease infinite;
 }

 /* Light Snow Animation */
 .light-snow-bg {
     background:
         radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.6) 0%, transparent 70%),
         radial-gradient(circle at 65% 20%, rgba(230, 230, 250, 0.4) 0%, transparent 60%),
         linear-gradient(135deg, #F8F8FF 0%, #F0F8FF 20%, #E6E6FA 35%, #D3D3D3 50%, #C0C0C0 65%, #B0C4DE 80%, #E0E0E0 100%);
     background-size: 500% 500%, 400% 400%, 300% 300%;
     animation: lightSnowGradient 14s ease infinite, snowRadial 18s ease infinite;
 }

 /* Heavy Snow Animation */
 .heavy-snow-bg {
     background:
         radial-gradient(circle at 20% 50%, rgba(220, 220, 220, 0.5) 0%, transparent 70%),
         radial-gradient(circle at 80% 30%, rgba(169, 169, 169, 0.4) 0%, transparent 60%),
         linear-gradient(135deg, #DCDCDC 0%, #C0C0C0 18%, #A9A9A9 35%, #808080 50%, #696969 65%, #778899 80%, #B0B0B0 100%);
     background-size: 600% 600%, 500% 500%, 400% 400%;
     animation: heavySnowGradient 10s ease infinite, heavySnowRadial 16s ease infinite;
 }

 /* Mist Animation */
 .mist-bg {
     background:
         radial-gradient(circle at 30% 60%, rgba(245, 245, 245, 0.7) 0%, transparent 80%),
         radial-gradient(circle at 70% 40%, rgba(224, 224, 224, 0.5) 0%, transparent 70%),
         radial-gradient(circle at 50% 20%, rgba(211, 211, 211, 0.3) 0%, transparent 60%),
         linear-gradient(135deg, #F5F5F5 0%, #E0E0E0 20%, #D3D3D3 40%, #C0C0C0 60%, #A9A9A9 80%, #DCDCDC 100%);
     background-size: 800% 800%, 600% 600%, 400% 400%, 300% 300%;
     animation: mistGradient 18s ease infinite, mistRadial 25s ease infinite;
 }

 .sun-rays {
     position: absolute;
     top: 8%;
     right: 12%;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 223, 0, 0.4) 0%, rgba(255, 165, 0, 0.3) 30%, rgba(255, 140, 0, 0.2) 60%, transparent 100%);
     animation: sunGlow 8s ease-in-out infinite;
 }

 .sun-rays::before {
     content: '';
     position: absolute;
     top: -50px;
     left: -50px;
     right: -50px;
     bottom: -50px;
     background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 50%, transparent 100%);
     border-radius: 50%;
     animation: sunGlow 12s ease-in-out infinite reverse;
 }

 @keyframes sunnyGradient {

     0%,
     100% {
         background-position: 0% 50%, 0% 0%, 0% 100%, 0% 50%;
     }

     25% {
         background-position: 25% 25%, 25% 25%, 25% 75%, 25% 25%;
     }

     50% {
         background-position: 100% 50%, 50% 50%, 50% 50%, 100% 50%;
     }

     75% {
         background-position: 75% 75%, 75% 75%, 75% 25%, 75% 75%;
     }
 }

 @keyframes sunnyRadial {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.8;
     }

     50% {
         transform: scale(1.05);
         opacity: 1;
     }
 }

 @keyframes partlyCloudyGradient {

     0%,
     100% {
         background-position: 0% 50%, 0% 0%, 0% 50%;
     }

     33% {
         background-position: 50% 25%, 33% 33%, 50% 25%;
     }

     66% {
         background-position: 100% 75%, 66% 66%, 100% 75%;
     }
 }

 @keyframes cloudyRadial {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.7;
     }

     50% {
         transform: scale(1.03);
         opacity: 0.9;
     }
 }

 @keyframes lightRainGradient {

     0%,
     100% {
         background-position: 0% 50%, 0% 0%, 0% 50%;
     }

     50% {
         background-position: 100% 50%, 50% 50%, 100% 50%;
     }
 }

 @keyframes rainRadial {

     0%,
     100% {
         transform: scale(1) translateY(0px);
         opacity: 0.8;
     }

     50% {
         transform: scale(1.02) translateY(-5px);
         opacity: 1;
     }
 }

 @keyframes heavyRainGradient {

     0%,
     100% {
         background-position: 0% 50%, 0% 0%, 0% 50%;
     }

     25% {
         background-position: 25% 25%, 25% 25%, 25% 25%;
     }

     50% {
         background-position: 100% 50%, 50% 50%, 100% 50%;
     }

     75% {
         background-position: 75% 75%, 75% 75%, 75% 75%;
     }
 }

 @keyframes stormRadial {

     0%,
     100% {
         transform: scale(1) translateY(0px);
         opacity: 0.9;
     }

     25% {
         transform: scale(1.02) translateY(-3px);
         opacity: 1;
     }

     50% {
         transform: scale(1.04) translateY(-8px);
         opacity: 0.95;
     }

     75% {
         transform: scale(1.01) translateY(-4px);
         opacity: 1;
     }
 }

 @keyframes lightSnowGradient {

     0%,
     100% {
         background-position: 0% 50%, 0% 0%, 0% 50%;
     }

     50% {
         background-position: 100% 50%, 50% 50%, 100% 50%;
     }
 }

 @keyframes snowRadial {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.8;
     }

     50% {
         transform: scale(1.03);
         opacity: 1;
     }
 }

 @keyframes heavySnowGradient {

     0%,
     100% {
         background-position: 0% 50%, 0% 0%, 0% 50%;
     }

     33% {
         background-position: 33% 33%, 33% 33%, 33% 33%;
     }

     66% {
         background-position: 66% 66%, 66% 66%, 66% 66%;
     }
 }

 @keyframes heavySnowRadial {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.9;
     }

     33% {
         transform: scale(1.04);
         opacity: 1;
     }

     66% {
         transform: scale(1.02);
         opacity: 0.95;
     }
 }

 @keyframes mistGradient {

     0%,
     100% {
         background-position: 0% 50%, 0% 0%, 0% 100%, 0% 50%;
     }

     25% {
         background-position: 25% 25%, 25% 25%, 25% 75%, 25% 25%;
     }

     50% {
         background-position: 100% 50%, 50% 50%, 50% 50%, 100% 50%;
     }

     75% {
         background-position: 75% 75%, 75% 75%, 75% 25%, 75% 75%;
     }
 }

 @keyframes mistRadial {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.6;
     }

     50% {
         transform: scale(1.08);
         opacity: 0.8;
     }
 }

 @keyframes sunGlow {

     0%,
     100% {
         opacity: 0.8;
         transform: scale(1);
     }

     50% {
         opacity: 1;
         transform: scale(1.05);
     }
 }

 /* Enhanced Rain Animation */
 .rain-bg {
     background: linear-gradient(135deg, #4a5568 0%, #2d3748 25%, #1a202c 50%, #2b6cb0 75%, #3182ce 100%);
     background-size: 400% 400%;
     animation: stormyGradient 8s ease infinite;
 }

 .rain-drop {
     position: absolute;
     background: linear-gradient(180deg, rgba(174, 194, 224, 0) 0%, rgba(174, 194, 224, 0.9) 30%, rgba(255, 255, 255, 0.95) 70%, rgba(174, 194, 224, 0.8) 100%);
     width: 2px;
     height: 30px;
     border-radius: 0 0 50% 50%;
     animation: rainFall linear infinite;
     box-shadow: 0 0 8px rgba(174, 194, 224, 0.6), 0 0 15px rgba(255, 255, 255, 0.3);
 }

 .rain-drop::before {
     content: '';
     position: absolute;
     top: -3px;
     left: 50%;
     transform: translateX(-50%);
     width: 4px;
     height: 4px;
     background: rgba(255, 255, 255, 0.8);
     border-radius: 50%;
     box-shadow: 0 0 4px rgba(174, 194, 224, 0.8);
 }

 @keyframes rainFall {
     0% {
         transform: translateY(-100vh) translateX(0px) rotate(10deg);
         opacity: 0;
     }

     5% {
         opacity: 1;
     }

     95% {
         opacity: 1;
     }

     100% {
         transform: translateY(100vh) translateX(30px) rotate(10deg);
         opacity: 0;
     }
 }

 @keyframes stormyGradient {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 /* Enhanced Snow Animation */
 .snow-bg {
     background: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 25%, #cbd5e0 50%, #a0aec0 75%, #718096 100%);
     background-size: 400% 400%;
     animation: snowyGradient 12s ease infinite;
 }

 .snowflake {
     position: absolute;
     color: rgba(255, 255, 255, 0.95);
     text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 25px rgba(174, 194, 224, 0.7), 0 0 35px rgba(255, 255, 255, 0.5);
     animation: snowDrift linear infinite;
     font-size: 1.4rem;
     filter: blur(0.5px);
 }

 .snowflake::before {
     content: '❄';
     position: absolute;
     animation: snowFloat 3s ease-in-out infinite;
 }

 .snowflake:nth-child(even)::before {
     content: '❅';
 }

 .snowflake:nth-child(3n)::before {
     content: '❆';
 }

 @keyframes snowDrift {
     0% {
         transform: translateY(-100vh) translateX(0px) scale(0.8);
         opacity: 0;
     }

     10% {
         opacity: 1;
         transform: translateY(-80vh) translateX(10px) scale(1);
     }

     90% {
         opacity: 1;
         transform: translateY(80vh) translateX(80px) scale(0.9);
     }

     100% {
         transform: translateY(100vh) translateX(120px) scale(0.7);
         opacity: 0;
     }
 }

 @keyframes snowFloat {

     0%,
     100% {
         transform: translateX(0px) scale(1);
     }

     25% {
         transform: translateX(5px) scale(1.1);
     }

     50% {
         transform: translateX(-3px) scale(0.9);
     }

     75% {
         transform: translateX(8px) scale(1.05);
     }
 }

 @keyframes snowyGradient {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 /* Enhanced Cloudy Animation */
 .cloudy-bg {
     background: linear-gradient(135deg, #C9D6FF 0%, #E2E2E2 25%, #B8B8B8 50%, #D4D4D4 75%, #F0F0F0 100%);
     background-size: 400% 400%;
     animation: cloudyGradient 12s ease infinite;
 }

 .cloud {
     position: absolute;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(240, 240, 240, 0.8) 100%);
     border-radius: 100px;
     animation: cloudFloat 20s ease-in-out infinite;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(4px);
 }

 .cloud::before {
     content: '';
     position: absolute;
     top: -20px;
     left: 20px;
     width: 60%;
     height: 60%;
     background: inherit;
     border-radius: 50%;
 }

 .cloud::after {
     content: '';
     position: absolute;
     top: -10px;
     right: 20px;
     width: 40%;
     height: 40%;
     background: inherit;
     border-radius: 50%;
 }

 @keyframes cloudFloat {

     0%,
     100% {
         transform: translateX(-50px) translateY(0px);
         opacity: 0.7;
     }

     25% {
         transform: translateX(20px) translateY(-10px);
         opacity: 0.9;
     }

     50% {
         transform: translateX(50px) translateY(0px);
         opacity: 1;
     }

     75% {
         transform: translateX(10px) translateY(10px);
         opacity: 0.8;
     }
 }

 @keyframes cloudyGradient {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 /* Enhanced Thunderstorm Animation */
 .storm-bg {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #1a1a2e 100%);
     background-size: 400% 400%;
     animation: stormGradient 4s ease infinite, lightning 6s infinite;
 }

 .lightning-bolt {
     position: absolute;
     width: 4px;
     height: 200px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(135, 206, 250, 0.8) 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%);
     animation: lightningStrike 3s infinite;
     box-shadow: 0 0 20px rgba(135, 206, 250, 0.8), 0 0 40px rgba(255, 255, 255, 0.6);
     opacity: 0;
 }

 @keyframes stormGradient {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 @keyframes lightning {

     0%,
     85%,
     100% {
         box-shadow: none;
     }

     90%,
     95% {
         box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.1);
     }
 }

 @keyframes lightningStrike {

     0%,
     85%,
     100% {
         opacity: 0;
     }

     90% {
         opacity: 1;
         transform: scaleY(1) scaleX(1);
     }

     92% {
         opacity: 0.8;
         transform: scaleY(1.1) scaleX(1.5);
     }

     95% {
         opacity: 1;
         transform: scaleY(1) scaleX(1);
     }

     97% {
         opacity: 0;
     }
 }

 /* Intelligent glass morphism based on background */
 .glass {
     backdrop-filter: blur(20px);
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 }

 .glass-light {
     background: rgba(0, 0, 0, 0.8);
     border: 2px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }

 .glass-dark {
     background: rgba(255, 255, 255, 0.95);
     border: 2px solid rgba(0, 0, 0, 0.2);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 }

 /* Intelligent text contrast without shadows */
 .text-contrast {
     color: #ffffff;
     font-weight: 700;
 }

 .text-contrast-light {
     color: #f1f5f9;
     font-weight: 600;
 }

 .text-dark {
     color: #0f172a;
     font-weight: 700;
 }

 .text-dark-light {
     color: #1e293b;
     font-weight: 600;
 }

 /* Forecast specific text classes */
 .forecast-text-primary {
     color: #ffffff;
     font-weight: 700;
 }

 .forecast-text-secondary {
     /*color: #0f172a;*/
     color: #918d8d;
     font-weight: 600;
 }

 .forecast-text-primary-dark {
     color: #0f172a;
     font-weight: 700;
 }

 .forecast-text-secondary-dark {
     color: #334155;
     font-weight: 600;
 }

 /* Search suggestions dropdown */
 .suggestions-dropdown {
     position: absolute;
     bottom: 100%;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.95);
     backdrop-filter: blur(25px);
     border: 2px solid rgba(255, 255, 255, 0.4);
     border-radius: 16px;
     max-height: 250px;
     overflow-y: auto;
     z-index: 3000;
     margin-bottom: 8px;
     box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
     transform: translateY(5px);
     opacity: 0;
     animation: suggestionSlideUp 0.3s ease forwards;
 }

 @keyframes suggestionSlideUp {
     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 .suggestion-item {
     padding: 10px 16px;
     cursor: pointer;
     border-bottom: 1px solid rgba(255, 255, 255, 0.15);
     transition: all 0.3s ease;
     color: #ffffff;
     font-weight: 600;
     font-size: 0.9rem;
 }

 .suggestion-item:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: translateX(4px);
 }

 .suggestion-item:last-child {
     border-bottom: none;
 }

 .suggestion-item .location-name {
     font-weight: 700;
     color: #ffffff;
 }

 .suggestion-item .location-details {
     font-size: 0.8rem;
     color: #cbd5e0;
     margin-top: 2px;
 }

 /* Enhanced error message styling */
 .error-container {
     background: rgba(220, 38, 38, 0.95);
     border: 2px solid rgba(255, 255, 255, 0.5);
     box-shadow: 0 8px 32px rgba(220, 38, 38, 0.5);
     backdrop-filter: blur(20px);
 }

 .error-container-light {
     background: rgba(220, 38, 38, 0.95);
     border: 2px solid rgba(255, 255, 255, 0.6);
     box-shadow: 0 8px 32px rgba(220, 38, 38, 0.5);
     backdrop-filter: blur(20px);
 }

 .error-text {
     color: #ffffff;
     font-weight: 700;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }

 .error-text-light {
     color: #ffffff;
     font-weight: 600;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }

 /* Loading container styling */
 .loading-container {
     background: rgba(59, 130, 246, 0.95);
     border: 2px solid rgba(255, 255, 255, 0.5);
     box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
     backdrop-filter: blur(20px);
 }

 .loading-text {
     color: #ffffff;
     font-weight: 700;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }

 .loading-text-light {
     color: #e0f2fe;
     font-weight: 600;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 /* Enhanced smooth transitions */
 * {
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Weather data container animations with stagger */
 #currentWeather,
 #forecast,
 #hourlyForecast {
     opacity: 0;
     transform: translateY(30px) scale(0.95);
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }

 #currentWeather.show,
 #forecast.show,
 #hourlyForecast.show {
     opacity: 1;
     transform: translateY(0) scale(1);
 }

 /* Smooth location switching */
 .weather-transition {
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .weather-transition.active {
     opacity: 1;
     transform: translateY(0);
 }

 /* Staggered animation for forecast cards */
 .forecast-card {
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.4s ease-in-out;
 }

 .forecast-card.animate {
     opacity: 1;
     transform: translateY(0);
 }

 .loading-spinner {
     border: 3px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     border-top: 3px solid white;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }