/* weather-widget.css — widget meteo animato (SVG+CSS, nessuna libreria)
   Personalizza i colori con le variabili --wx-* (default tema scuro). */
:root{--wx-bg:#1a2230;--wx-card:#2e3c58;--wx-line:#3f5173;--wx-tx:#edf2fa;--wx-mu:#93a6c2}
.wxw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--wx-tx)}
.wxm{display:flex;flex-direction:column;align-items:center;flex:none}
.wxmrow{display:flex;align-items:center;gap:8px}
.wxm .wxsvg{width:56px;height:56px}
.wxt b{font-size:19px}
.wxt span{display:block;color:var(--wx-mu);font-size:11px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wxt a{display:block;font-size:9px;color:var(--wx-mu);text-decoration:none;opacity:.75}
.wxp{display:block;font-size:9px;color:var(--wx-mu);opacity:.75;width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;margin-top:4px;padding:3px 4px;border:1px solid var(--wx-line);border-radius:4px;background:var(--wx-card)}
.fc{display:flex;gap:4px;flex:1;min-width:0;overflow:hidden}
.fc>div{flex:1;min-width:34px;text-align:center;font-size:10px;color:var(--wx-mu)}
.fc .wxsvg{width:28px;height:28px;margin:1px auto}
.fc b{display:block;color:var(--wx-tx);font-size:11px}
.fc i{display:block;font-style:normal;color:#60a5fa;font-size:9px;min-height:11px}
.wxsvg{overflow:hidden;display:block}
.wxsun{fill:#fbbf24}
.wx-rays{stroke:#fbbf24;stroke-width:2.2;stroke-linecap:round;animation:wxspin 26s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes wxspin{to{transform:rotate(360deg)}}
.wx-pulse{animation:wxpulse 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes wxpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.wx-moon{fill:#e2e8f0}
.wx-star{fill:#fff;animation:wxtw 2.8s ease-in-out infinite}
@keyframes wxtw{0%,100%{opacity:.15}50%{opacity:1}}
.wx-cloud{fill:#cbd5e1;animation:wxdrift 6s ease-in-out infinite}
.wx-cloud.dark{fill:#8ea3b8;animation-duration:8.5s;animation-delay:-3s}
@keyframes wxdrift{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.wx-drop{stroke:#60a5fa;stroke-width:2.4;stroke-linecap:round;animation:wxrain 1.15s linear infinite}
@keyframes wxrain{0%{transform:translateY(-5px);opacity:0}18%{opacity:1}80%{opacity:1}100%{transform:translateY(15px);opacity:0}}
.wx-flake{fill:#f1f5f9;animation:wxsnow 2.8s linear infinite}
@keyframes wxsnow{0%{transform:translate(0,-4px);opacity:0}15%{opacity:1}100%{transform:translate(-4px,17px);opacity:.15}}
.wx-bolt{fill:#fde047;animation:wxflash 3.8s linear infinite}
@keyframes wxflash{0%,86%,97%,100%{opacity:0}88%,92%{opacity:1}}
.wx-fog{fill:#cbd5e1;animation:wxfog 5.5s ease-in-out infinite}
@keyframes wxfog{0%,100%{transform:translateX(-5px);opacity:.5}50%{transform:translateX(5px);opacity:.95}}
.wx-gust{stroke:#8ea3b8;stroke-width:2.6;fill:none;stroke-linecap:round;animation:wxwind 2.9s linear infinite}
@keyframes wxwind{0%{transform:translateX(-9px);opacity:0}30%{opacity:1}100%{transform:translateX(11px);opacity:0}}