/* SNOW EFFECT CSS */

/* 1. RESTING SNOW ON CARDS - LIGHTER & DRIPPING */
body.seasonal-winter .card,
body.seasonal-winter .total-box,
body.seasonal-winter .mini-stat-card,
body.seasonal-winter .settings-card-group,
body.seasonal-winter .saving-goal-card,
body.seasonal-winter #savings-carousel > div,
body.seasonal-winter #loans-list > div,
body.seasonal-winter #chart-container,
body.seasonal-winter #chart-screen .card {
    overflow: visible !important;
    position: relative !important;
    background-color: var(--card-bg) !important; /* Forza background per coprire eventuale neve dietro */
    z-index: 1; /* Base z-index */
}


/* Gestione bordi arrotondati settings group */
body.seasonal-winter .settings-card-group .settings-row:first-child {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
body.seasonal-winter .settings-card-group .settings-row:last-child {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

body.seasonal-winter .card::after, 
body.seasonal-winter .total-box::after, 
body.seasonal-winter .mini-stat-card::after,
body.seasonal-winter .saving-goal-card::after,
body.seasonal-winter #loans-list > div::after,
body.seasonal-winter #chart-container::after,
body.seasonal-winter #chart-screen .card::after {
    content: '';
    position: absolute;
    top: -4px; 
    left: 0;
    right: 0;
    height: 12px; /* Altezza ridotta per effetto "lighter" */
    
    /* 
       TEXTURE & SHAPE:
       1. Noise texture (simula cristalli) - Molto leggera
       2. Mounds (colate) - Più piccole e sottili
    */
    background-image: 
        /* Texture Brillante - Opacità ridotta */
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 4px),
        /* Montagnole Bianche - Ancorate in ALTO (at 50% 0%) - Più piccole */
        radial-gradient(10px 10px at 50% 0%, #ffffff 50%, #ffffff 90%, transparent 95%),
        radial-gradient(12px 12px at 50% 0%, #ffffff 50%, #ffffff 90%, transparent 95%),
        radial-gradient(8px 9px at 50% 0%, #ffffff 50%, #ffffff 90%, transparent 95%),
        radial-gradient(14px 11px at 50% 0%, #ffffff 50%, #ffffff 90%, transparent 95%);
    
    background-repeat: repeat-x;
    background-size: 
        20px 12px, 
        20px 12px, 
        26px 12px, 
        16px 12px,
        32px 12px;
        
    background-position: 
        0 0, 
        0 top,
        12px top,
        -4px top,
        20px top;
        
    z-index: 9999; 
    pointer-events: none;
    opacity: 0.95; /* Leggermente meno "solido" */
    
    /* GOOEY FILTER + OMBRA SOFFICE */
    filter: url(#snow-goo) drop-shadow(0px 1px 1px rgba(0, 40, 80, 0.1));
}

/* Fix specifico per Settings Group (Header) */
body.seasonal-winter .settings-card-group .settings-row:first-child::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 10px;
    
    background-image: 
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 4px),
        radial-gradient(8px 8px at 50% 0%, #ffffff 50%, #ffffff 90%, transparent 95%),
        radial-gradient(10px 10px at 50% 0%, #ffffff 50%, #ffffff 90%, transparent 95%);
        
    background-repeat: repeat-x;
    background-size: 
        15px 10px,
        18px 10px, 
        24px 10px;
        
    background-position: 
        0 0,
        0 top,
        8px top;
        
    z-index: 9999;
    pointer-events: none;
    opacity: 0.95;
    
    filter: url(#snow-goo) drop-shadow(0px 1px 1px rgba(0, 40, 80, 0.1));
}


/* 2. FALLING SNOWFLAKES */
body.seasonal-winter .snowflake {
    position: fixed;
    top: -20px;
    color: #FFF;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px rgba(255,255,255,0.8);
    z-index: 9999; /* Sopra tutto */
    pointer-events: none;
    animation-name: fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes fall {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) translateX(20px) rotate(360deg);
        opacity: 0.3;
    }
}