/* =========================================================
   SportPredict AI Pro — Animated Weather Icons
   Save as: /assets/weather-icons.css
========================================================= */

.sp-weather-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 12px;
    border-radius:999px;
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.02em;
    line-height:1;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.075);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    white-space:nowrap;
}

.sp-weather-badge-sm{
    padding:6px 9px;
    gap:7px;
    font-size:11px;
}

.sp-weather-icon{
    width:26px;
    height:26px;
    display:inline-grid;
    place-items:center;
    position:relative;
    flex:0 0 26px;
}

.sp-weather-badge-sm .sp-weather-icon{
    width:22px;
    height:22px;
    flex-basis:22px;
}

.sp-weather-sunny{
    background:linear-gradient(135deg, rgba(245,158,11,.22), rgba(250,204,21,.08));
    border-color:rgba(250,204,21,.30);
}

.sp-weather-rainy{
    background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(14,165,233,.08));
    border-color:rgba(96,165,250,.30);
}

.sp-weather-cloudy{
    background:linear-gradient(135deg, rgba(148,163,184,.22), rgba(203,213,225,.08));
    border-color:rgba(203,213,225,.25);
}

.sp-weather-windy{
    background:linear-gradient(135deg, rgba(45,212,191,.20), rgba(125,211,252,.08));
    border-color:rgba(94,234,212,.28);
}

.sp-weather-stormy{
    background:linear-gradient(135deg, rgba(168,85,247,.22), rgba(59,130,246,.08));
    border-color:rgba(192,132,252,.30);
}

.sp-weather-unknown{
    background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}

/* Sunny */
.spw-sun{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#facc15;
    box-shadow:0 0 0 4px rgba(250,204,21,.20), 0 0 18px rgba(250,204,21,.75);
    position:relative;
    animation:spwPulseSun 1.8s ease-in-out infinite;
}

.spw-sun i{
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:2px dashed rgba(250,204,21,.62);
    animation:spwSpin 6s linear infinite;
}

/* Cloud */
.spw-cloud{
    width:25px;
    height:15px;
    border-radius:999px;
    background:#cbd5e1;
    position:relative;
    box-shadow:0 6px 14px rgba(148,163,184,.18);
    animation:spwFloat 2.3s ease-in-out infinite;
}

.spw-cloud i{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#e2e8f0;
    left:4px;
    top:-6px;
}

.spw-cloud:after{
    content:"";
    position:absolute;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#cbd5e1;
    right:3px;
    top:-8px;
}

/* Rain */
.spw-rain b,
.spw-rain em{
    position:absolute;
    width:2px;
    height:8px;
    border-radius:999px;
    background:#60a5fa;
    bottom:-10px;
    animation:spwRain .75s linear infinite;
}

.spw-rain b{left:7px;}
.spw-rain em{right:7px;animation-delay:.22s;}

/* Wind */
.spw-wind{
    width:26px;
    height:18px;
    position:relative;
}

.spw-wind i,
.spw-wind b,
.spw-wind em{
    position:absolute;
    left:2px;
    height:3px;
    border-radius:999px;
    background:#5eead4;
    box-shadow:0 0 12px rgba(94,234,212,.65);
    animation:spwWind 1.1s ease-in-out infinite;
}

.spw-wind i{top:2px;width:22px;}
.spw-wind b{top:8px;width:16px;animation-delay:.13s;}
.spw-wind em{top:14px;width:20px;animation-delay:.25s;}

/* Storm */
.spw-storm b{
    position:absolute;
    width:8px;
    height:15px;
    left:9px;
    bottom:-15px;
    background:#facc15;
    clip-path:polygon(45% 0,100% 0,58% 42%,100% 42%,28% 100%,48% 54%,0 54%);
    animation:spwFlash .85s ease-in-out infinite;
}

.spw-storm em{
    position:absolute;
    inset:-4px;
    border-radius:18px;
    box-shadow:0 0 18px rgba(168,85,247,.55);
    animation:spwStormGlow 1.2s ease-in-out infinite;
}

.spw-unknown{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    font-size:13px;
    font-weight:900;
}

/* Animations */
@keyframes spwPulseSun{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.13);}
}

@keyframes spwSpin{
    to{transform:rotate(360deg);}
}

@keyframes spwFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-3px);}
}

@keyframes spwRain{
    0%{opacity:0;transform:translateY(-3px);}
    40%{opacity:1;}
    100%{opacity:0;transform:translateY(7px);}
}

@keyframes spwWind{
    0%,100%{transform:translateX(0);opacity:.75;}
    50%{transform:translateX(5px);opacity:1;}
}

@keyframes spwFlash{
    0%,100%{opacity:.25;transform:scale(.95);}
    50%{opacity:1;transform:scale(1.1);}
}

@keyframes spwStormGlow{
    0%,100%{opacity:.25;}
    50%{opacity:.85;}
}