/* Icon styles and simple animations */
.ccb-widget { --ccb-icon-color: #ffcc00; }

/* Sun */
.ccb-weather.sun .ccb-icon {
    background: radial-gradient(circle at 40% 35%, var(--ccb-icon-color) 30%, transparent 31%);
    border-radius:50%;
    box-shadow: 0 0 8px rgba(255,204,0,0.3);
    animation: ccb-sun 6s linear infinite;
}
@keyframes ccb-sun {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Cloud */
.ccb-weather.cloud .ccb-icon {
    background: linear-gradient(#ffffff, #e6e6e6);
    border-radius:12px;
    box-shadow: 0 3px 0 rgba(0,0,0,0.05);
    position: relative;
}
.ccb-weather.cloud .ccb-icon:before,
.ccb-weather.cloud .ccb-icon:after {
    content: '';
    position:absolute;
    background: linear-gradient(#ffffff,#e6e6e6);
    border-radius:50%;
}
.ccb-weather.cloud .ccb-icon:before { width:26px;height:26px; left:-8px; top:-6px; }
.ccb-weather.cloud .ccb-icon:after { width:18px;height:18px; right:-6px; top:-2px; }
.ccb-weather.cloud .ccb-icon { animation: ccb-cloud 4s linear infinite; }
@keyframes ccb-cloud { 0%{ transform: translateY(0);}50%{ transform: translateY(-3px);}100%{ transform: translateY(0);} }

/* Rain */
.ccb-weather.rain .ccb-icon {
    background: linear-gradient(#cfdff7,#a7c2e8);
    border-radius:8px;
    position:relative;
    overflow:visible;
}
.ccb-weather.rain .ccb-icon:after {
    content:'';
    position:absolute;
    left:12px; bottom:-6px;
    width:2px; height:8px;
    background:linear-gradient(var(--ccb-icon-color), #0066cc);
    animation: ccb-rain 0.6s linear infinite;
}
@keyframes ccb-rain { 0%{ transform: translateY(0);}100%{ transform: translateY(6px); opacity:0;} }