/* ==========================================================
    Base Icon Styles & Containers
    ========================================================== */
 .weather-item-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 10rem;
 }
 
 .weather-item-container h2 {
     margin-top: 1rem;
     margin-bottom: 1rem;
     font-size: 0.9rem;
     text-transform: uppercase;
     text-align: center;
     color: #e0e7eb;
     word-wrap: break-word;
     min-height: 3em;
     letter-spacing: 0.05em;
 }
 
 .icon-base {
     position: relative;
     width: 5rem;
     height: 5rem;
     margin-bottom: 0.5rem;
     overflow: hidden;
     transform: translateZ(0);
 }
 
 /* ==========================================================
    Sun & Moon Elements
    ========================================================== */
 /* --- SUN (Day) --- */
 .sunny:before,
 .partly_cloudy__sun:before,
 .mostly_clear__sun:before {
     content: "";
     position: absolute;
     height: 80%;
     width: 80%;
     top: 10%;
     left: 10%;
     border-radius: 50%;
     z-index: 2;
     background: linear-gradient(135deg, #FFD700, #FFA500);
     /* Removed: box-shadow */
 }
 
 .sunny:after,
 .partly_cloudy__sun:after,
 .mostly_clear__sun:after {
     content: "";
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
     border-radius: 50%;
     z-index: 1;
     background-color: transparent; /* Initially transparent */
     will-change: opacity, transform;
     /* שינוי: הגברת תדירות ההבזקים */
     animation: subtleFadeInScaleDown 1.5s ease-in-out infinite alternate;
 }
 
 /* --- MOON (Night) --- */
 .moon {
     position: absolute;
     height: 70%;
     width: 70%;
     top: 15%;
     left: 15%;
     border-radius: 50%;
     background-color: #f0f4f7;
     box-shadow: inset 0 0 15px rgba(0,0,0,0.15); /* Removed outer shadow */
     z-index: 2;
     animation: moonRise 8s ease-in-out infinite alternate;
 }
 
 .moon:before { /* crater 1 */
     content: '';
     position: absolute;
     width: 20%; height: 20%;
     background-color: #d8e0e6;
     border-radius: 50%;
     top: 20%; left: 25%;
     opacity: 0.8;
 }
 .moon:after { /* crater 2 */
     content: '';
     position: absolute;
     width: 15%; height: 15%;
     background-color: #e0e7eb;
     border-radius: 50%;
     top: 50%; left: 60%;
     opacity: 0.7;
 }
 
 .moon_behind_cloud { /* Moon for cloudy night icons */
     position: absolute;
     height: 60%;
     width: 60%;
     top: 10%;
     left: 10%;
     border-radius: 50%;
     background-color: #e0e7eb;
     z-index: 1; /* Behind the cloud */
     opacity: 0.7;
     animation: moonFadeGlow 6s ease-in-out infinite alternate;
 }
 
 /* --- STARS (Night) --- */
 .stars_container {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: 1;
     perspective: 100px;
 }
 .star {
     position: absolute;
     color: #fff;
     text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 2px rgba(255,255,255,0.5);
     animation: starTwinkle 1.5s ease-in-out infinite alternate;
     transform: translateZ(var(--star-z, 0px));
 }
 
 /* ==========================================================
    Cloud Elements
    ========================================================= */
 .cloud_container {
     position: absolute;
     height: 100%;
     width: 100%;
     z-index: 2;
 }
 
 .cloud_element {
     position: absolute;
     border-radius: 50%;
     transform: translateZ(0);
     /* Removed: box-shadow */
 }
 
 /* Day Clouds */
 .cloud_type_day1, .cloud_type_day2 {
     background: linear-gradient(135deg, #f0f4f7, #e0e7eb);
 }
 .cloud_type_day1 { height: 60%; width: 70%; top: 10%; right: 30%; border-bottom-right-radius: 0; z-index: 1; }
 .cloud_type_day2 { height: 40%; width: 40%; top: 30%; right: 0%; border-bottom-left-radius: 0; z-index: 2; }
 
 /* Night Clouds */
 .cloud_type_night1, .cloud_type_night2 {
     background: linear-gradient(135deg, #607d8b, #455a64);
     /* Removed: box-shadow */
 }
 .cloud_type_night1 { height: 60%; width: 70%; top: 10%; right: 30%; border-bottom-right-radius: 0; z-index: 1; }
 .cloud_type_night2 { height: 40%; width: 40%; top: 30%; right: 0%; border-bottom-left-radius: 0; z-index: 2; }
 
 /* Rain Clouds (Darker) */
 .cloud_type_rain1, .cloud_type_rain2 {
     background: linear-gradient(135deg, #78909c, #546e7a);
     /* Removed: box-shadow */
 }
 .cloud_type_rain1 { height: 60%; width: 70%; top: 10%; right: 30%; border-bottom-right-radius: 0; z-index: 1; }
 .cloud_type_rain2 { height: 40%; width: 40%; top: 30%; right: 0%; border-bottom-left-radius: 0; z-index: 2; }
 
 /* Rain Night Clouds */
 .cloud_type_rain_night1, .cloud_type_rain_night2 {
     background: linear-gradient(135deg, #5b717c, #40505a);
     /* Removed: box-shadow */
 }
 .cloud_type_rain_night1 { height: 60%; width: 70%; top: 10%; right: 30%; border-bottom-right-radius: 0; z-index: 1; }
 .cloud_type_rain_night2 { height: 40%; width: 40%; top: 30%; right: 0%; border-bottom-left-radius: 0; z-index: 2; }
 
 /* Thunder Clouds (Darkest) */
 .cloud_type_thunder1, .cloud_type_thunder2 {
     background: linear-gradient(135deg, #424e52, #2f3638);
     box-shadow: 0 5px 20px rgba(0,0,0,0.4); /* Kept inner shadow */
 }
 .cloud_type_thunder_night1, .cloud_type_thunder_night2 {
     background: linear-gradient(135deg, #2e3a47, #1e2832);
     box-shadow: 0 5px 25px rgba(0,0,0,0.5); /* Kept inner shadow */
 }
 
 /* Apply thunder animation to thunder clouds */
 .cloud_type_thunder1, .cloud_type_thunder2,
 .cloud_type_thunder_night1, .cloud_type_thunder_night2 {
     animation: thunderFlash 7s linear infinite;
 }
 
 /* Ensure specific cloud positioning is still applied */
 .cloud_type_thunder1 { height: 60%; width: 70%; top: 10%; right: 30%; border-bottom-right-radius: 0; z-index: 1; }
 .cloud_type_thunder2 { height: 40%; width: 40%; top: 30%; right: 0%; border-bottom-left-radius: 0; z-index: 2; }
 .cloud_type_thunder_night1 { height: 60%; width: 70%; top: 10%; right: 30%; border-bottom-right-radius: 0; z-index: 1; }
 .cloud_type_thunder_night2 { height: 40%; width: 40%; top: 30%; right: 0%; border-bottom-left-radius: 0; z-index: 2; }
 
 
 /* Snow Clouds (Light, but distinct from day clouds) */
 .cloud_type_snow1, .cloud_type_snow2 {
     background: linear-gradient(135deg, #cfd8dc, #b0bec5);
     /* Removed: box-shadow */
 }
 .cloud_type_snow_night1, .cloud_type_snow_night2 {
     background: linear-gradient(135deg, #90a4ae, #78909c);
     /* Removed: box-shadow */
 }
 
 /* Ensure specific cloud positioning is still applied for snow clouds */
 .cloud_type_snow1 { height: 60%; width: 70%; top: 10%; right: 30%; border-bottom-right-radius: 0; z-index: 1; }
 .cloud_type_snow2 { height: 40%; width: 40%; top: 30%; right: 0%; border-bottom-left-radius: 0; z-index: 2; }
 .cloud_type_snow_night1 { height: 60%; width: 70%; top: 10%; right: 30%; border-bottom-right-radius: 0; z-index: 1; }
 .cloud_type_snow_night2 { height: 40%; width: 40%; top: 30%; right: 0%; border-bottom-left-radius: 0; z-index: 2; }
 
 
 /* Drifting clouds for mostly_clear and partly_cloudy */
 .drifting_cloud_container {
     position: absolute;
     z-index: 2;
     will-change: transform;
     animation: driftCloud 18s ease-in-out infinite alternate;
     transform: translateZ(0);
 }
 
 .mostly_clear__cloud_container_1 {
     width: 60%; height: 60%; top: 30%;
 }
 
 .partly_cloudy__cloud_container_1 {
     width: 45%; height: 45%; top: 20%; left: 5%;
     animation-duration: 22s;
 }
 .partly_cloudy__cloud_container_2 {
     width: 40%; height: 40%; top: 45%; left: 40%;
     animation-duration: 25s;
     animation-delay: -7s;
 }
 
 /* ==========================================================
    Precipitation Elements
    ========================================================== */
 .precipitation_container {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 60%;
     z-index: 3;
 }
 
 /* --- RAIN DROPS & DRIZZLE --- */
 .rain_drop {
     position: absolute;
     background: linear-gradient(to bottom, transparent 0%, #64b5f6 50%, #2196f3 100%);
     will-change: opacity, transform;
     border-radius: 0.15rem;
     animation: rainFall 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     transform: translateZ(0);
 }
 .rain_drop.drizzle_light { width: 0.1rem; height: 0.6rem; }
 .rain_drop.drizzle_normal { width: 0.12rem; height: 0.8rem; }
 .rain_drop.drizzle_heavy { width: 0.14rem; height: 1rem; }
 .rain_drop.light { width: 0.18rem; height: 1rem; }
 .rain_drop.normal { width: 0.22rem; height: 1.2rem; }
 .rain_drop.heavy { width: 0.26rem; height: 1.5rem; }
 
 
 /* --- SNOW FLAKES (WITH CLOUD) --- */
 .snow_flake_with_cloud {
     position: absolute;
     color: #f0f4f7;
     text-shadow: 0 0 5px rgba(240, 244, 247, 0.8), 0 0 2px rgba(240, 244, 247, 0.5);
     will-change: opacity, transform;
     animation: snowfallGentle 8s linear infinite;
     transform: translateZ(0);
 }
 .snow_flake_with_cloud:before {
     content: '❅';
 }
 .snow_flake_with_cloud.light { font-size: 0.7rem; }
 .snow_flake_with_cloud.normal { font-size: 0.9rem; }
 .snow_flake_with_cloud.heavy { font-size: 1.1rem; }
 
 
 /* --- HEAVY SNOW (NO CLOUD) --- */
 .heavy_snow_no_cloud_container .snow_flake_star {
     position: absolute;
     color: #ffffff;
     text-shadow: 0 0 10px rgba(255,255,255,0.9), 0 0 4px rgba(255,255,255,0.7);
     will-change: opacity, transform;
     animation: heavySnowSwirl 12s ease-in-out infinite;
     transform: translateZ(0);
 }
 .heavy_snow_no_cloud_container .snow_flake_star:before {
     content: '❄';
 }
 
 /* --- HAIL --- */
 .hail_stone {
     position: absolute;
     background: linear-gradient(135deg, #e0e7eb, #c0c7cb);
     border: 1px solid #90a4ae;
     border-radius: 50%;
     animation: hailFall 0.4s cubic-bezier(0.5, 0, 0.9, 0.5) infinite;
     transform: translateZ(0);
 }
 .hail_stone.light { width: 0.4rem; height: 0.4rem; }
 .hail_stone.heavy { width: 0.6rem; height: 0.6rem; animation-duration: 0.25s; }
 
 /* --- FOG --- */
 .foggy_container {
     position: absolute; width: 100%; height: 80%; top: 20%;
     overflow: hidden;
 }
 .fog_cloud_element {
     position: absolute;
     background: linear-gradient(135deg, #d3dce0, #b0bec5);
     border-radius: 2.5rem; opacity: 0.7;
     animation: driftFog 28s ease-in-out infinite alternate;
     transform: translateZ(0);
 }
 .fog_cloud_1 { width: 90%; height: 70%; top: 5%; left: -30%; animation-duration: 28s; }
 .fog_cloud_2 { width: 80%; height: 60%; top: 30%; left: -40%; animation-duration: 33s; animation-delay: -15s; }
 .fog_cloud_3 {
     width: 85%; height: 65%; top: 15%; left: -35%; opacity: 0.6;
     animation-duration: 30s; animation-delay: -10s;
 }
 
 /* Placeholder */
 .placeholder-icon {
     display: flex; justify-content: center; align-items: center;
     font-size: 1.2rem; font-weight: bold; color: #9aa7af;
     border: 2px dashed #9aa7af; border-radius: 10px;
     text-align: center; line-height: 1.2; padding: 0.5rem;
     background-color: rgba(255,255,255,0.05);
 }
 
 /* ==========================================================
    Animations (Refined)
    ========================================================== */
 @keyframes fadeIn {
     0% { opacity: 0; }
     100% { opacity: 1; }
 }
 
 /* Removed sunPulse and rotateSun */
 
 @keyframes driftCloud {
     0% { transform: translateX(-20%) translateY(0%) translateZ(0); }
     50% { transform: translateX(20%) translateY(5%) translateZ(0); }
     100% { transform: translateX(-20%) translateY(0%) translateZ(0); }
 }
 
 @keyframes rainFall {
     0% { transform: translateY(-50%) skewY(0deg) translateZ(0); opacity: 0; }
     10% { opacity: 1; transform: translateY(-20%) skewY(-5deg) translateZ(0); }
     90% { opacity: 1; }
     100% { transform: translateY(120%) skewY(-10deg) translateZ(0); opacity: 0; }
 }
 @keyframes hailFall {
     0% { transform: translateY(-50%) scale(0.8) translateZ(0); opacity: 0; }
     20% { opacity: 1; transform: translateY(-10%) scale(1) translateZ(0); }
     100% { transform: translateY(120%) scale(0.8) translateZ(0); opacity: 0; }
 }
 
 @keyframes snowfallGentle {
     0% { transform: translateY(-30%) translateX(0px) rotate(0deg) scale(0.8) translateZ(0); opacity: 0; }
     15% { opacity: 1; transform: translateY(-15%) translateX(var(--sway-x1, -8px)) rotate(45deg) scale(1) translateZ(0); }
     40% { transform: translateY(15%) translateX(var(--sway-x2, 8px)) rotate(150deg) scale(0.9) translateZ(0); }
     60% { transform: translateY(45%) translateX(var(--sway-x3, -10px)) rotate(280deg) scale(1.1) translateZ(0); }
     85% { opacity: 1; transform: translateY(75%) translateX(calc(var(--sway-x1, 5px) / 2)) rotate(400deg) scale(0.95) translateZ(0); }
     100% { transform: translateY(120%) translateX(calc(var(--sway-x2, -12px) / 2)) rotate(500deg) scale(0.8) translateZ(0); opacity: 0; }
 }
 
 @keyframes heavySnowSwirl {
     0% { transform: translateY(-25vh) translateX(var(--swirl-start-x, 0px)) scale(0.7) rotate(0deg) translateZ(0); opacity: 0; }
     15% { opacity: 1; transform: translateY(-15vh) translateX(var(--swirl-mid1-x, 8px)) scale(1.1) rotate(150deg) translateZ(0); }
     50% { transform: translateY(0vh) translateX(var(--swirl-mid2-x, -8px)) scale(0.9) rotate(380deg) translateZ(0); }
     85% { opacity: 1; transform: translateY(18vh) translateX(var(--swirl-mid3-x, 10px)) scale(1.2) rotate(600deg) translateZ(0); }
     100% { transform: translateY(30vh) translateX(var(--swirl-end-x, -12px)) scale(0.7) rotate(750deg) translateZ(0); opacity: 0; }
 }
 
 @keyframes thunderFlash {
     0% { box-shadow: 0 0 15px rgba(0,0,0,.2); }
     45% { box-shadow: 0 0 15px rgba(0,0,0,.2); }
     48% { box-shadow: 0 0 40px #add8e6, 0 0 20px #87ceeb, 0 0 10px #e0f2f7; }
     50% { box-shadow: 0 0 15px rgba(0,0,0,.2); }
     52% { box-shadow: 0 0 60px #add8e6, 0 0 30px #87ceeb, 0 0 15px #e0f2f7; }
     55% { box-shadow: 0 0 15px rgba(0,0,0,.2); }
     57% { box-shadow: 0 0 35px #add8e6, 0 0 15px #87ceeb; }
     60% { box-shadow: 0 0 15px rgba(0,0,0,.2); }
     100% { box-shadow: 0 0 15px rgba(0,0,0,.2); }
 }
 
 @keyframes driftFog {
     0% { transform: translateX(-30%) translateY(-5%) translateZ(0); }
     50% { transform: translateX(30%) translateY(5%) translateZ(0); }
     100% { transform: translateX(-30%) translateY(-5%) translateZ(0); }
 }
 
 /* Night specific animations */
 @keyframes starTwinkle {
     0%, 100% { opacity: 0.6; transform: scale(0.9) translateZ(0); }
     50% { opacity: 1; transform: scale(1.2) translateZ(0); }
 }
 
 @keyframes moonRise {
     0%, 100% { transform: scale(1) translateY(0); }
     50% { transform: scale(1.03) translateY(-5%); }
 }
 
 @keyframes moonFadeGlow {
     0%, 100% { opacity: 0.7; box-shadow: 0 0 10px rgba(240, 244, 247, 0.3); }
     50% { opacity: 0.9; box-shadow: 0 0 20px rgba(240, 244, 247, 0.6); }
 }
 
 @keyframes subtleFadeInScaleDown {
     0%, 80% { opacity: 0; transform: scale(1); background-color: transparent; }
     90% { opacity: 0.15; transform: scale(1.05); background-color: #fff; } /* Very faint, quick flash */
     100% { opacity: 0; transform: scale(1); background-color: transparent; }
 }