/* SUMMER EFFECT CSS */

body.seasonal-summer .card,
body.seasonal-summer .total-box,
body.seasonal-summer .mini-stat-card,
body.seasonal-summer .settings-card-group,
body.seasonal-summer .saving-goal-card,
body.seasonal-summer #savings-carousel > div,
body.seasonal-summer #loans-list > div,
body.seasonal-summer #chart-container,
body.seasonal-summer #chart-screen .card {
    overflow: visible !important;
    position: relative !important;
    z-index: 1;
}

body.seasonal-summer .settings-card-group .settings-row:first-child {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
body.seasonal-summer .settings-card-group .settings-row:last-child {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

body.seasonal-summer .card::after,
body.seasonal-summer .total-box::after,
body.seasonal-summer .mini-stat-card::after,
body.seasonal-summer .saving-goal-card::after,
body.seasonal-summer #loans-list > div::after,
body.seasonal-summer #chart-container::after,
body.seasonal-summer #chart-screen .card::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 220, 100, 0.15) 0%,
        rgba(255, 180, 50, 0.05) 30%,
        transparent 50%,
        rgba(255, 200, 80, 0.05) 70%,
        rgba(255, 220, 100, 0.1) 100%
    );
    z-index: -1;
    pointer-events: none;
    opacity: 0.9;
    mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
    mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
    -webkit-mask-composite: xor;
}

body.seasonal-summer .card::before,
body.seasonal-summer .total-box::before,
body.seasonal-summer .mini-stat-card::before,
body.seasonal-summer .saving-goal-card::before,
body.seasonal-summer #loans-list > div::before,
body.seasonal-summer #chart-container::before,
body.seasonal-summer #chart-screen .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255, 236, 153, 0.08) 0%,
        rgba(255, 213, 79, 0.03) 40%,
        transparent 70%
    );
    z-index: 0;
    pointer-events: none;
}

body.seasonal-summer .settings-card-group .settings-row:first-child::after,
body.seasonal-summer .settings-card-group .settings-row:first-child::before {
    border-radius: 20px 20px 0 0;
}

body.seasonal-summer .summer-sun-particle {
    position: fixed;
    bottom: -3vh;
    width: var(--particle-size);
    height: var(--particle-size);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff9c4, #fbbf24);
    pointer-events: none;
    z-index: 9996;
    opacity: 0;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.35);
    animation: summer-float-up var(--particle-duration) cubic-bezier(0.35, 0.0, 0.45, 1) forwards;
}

@keyframes summer-float-up {
    0% {
        transform: translateY(0) translateX(0) scale(0.1);
        opacity: 0;
    }
    15% {
        opacity: var(--particle-opacity);
    }
    85% {
        opacity: var(--particle-opacity);
    }
    100% {
        transform: translateY(-120vh) translateX(var(--particle-drift)) scale(0.8);
        opacity: 0;
    }
}