/* Vreme Widget v1.1 — CSS */

.vw-box {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #fff;
    border-radius: 16px;
    padding: 20px;
    max-width: 380px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

/* Fundaluri dinamice */
.vw-clear  { background: linear-gradient(135deg,#1a3a5c,#2d6a9f,#4a9fd4); }
.vw-night  { background: linear-gradient(135deg,#0d1b3e,#1a2a6c,#2d3a8c); }
.vw-partly { background: linear-gradient(135deg,#2c4a6e,#4a7298,#6a9fc0); }
.vw-cloudy { background: linear-gradient(135deg,#4a5568,#6b7280,#9ca3af); }
.vw-rain   { background: linear-gradient(135deg,#2d3748,#4a5568,#6b7280); }
.vw-storm  { background: linear-gradient(135deg,#1a202c,#2d3748,#4a5568); }
.vw-snow   { background: linear-gradient(135deg,#b8d4f0,#d0e8ff,#e8f4ff); color:#2c4a6e; }
.vw-fog    { background: linear-gradient(135deg,#6b7280,#9ca3af,#d1d5db); }

.vw-snow .vw-foot a { color:#2c4a6e; }

/* Eroare */
.vw-err {
    background:#fff3cd; color:#856404;
    border:1px solid #ffc107; border-radius:8px;
    padding:12px 16px; font-size:14px;
}

/* Alerta */
.vw-alert {
    background: rgba(220,38,38,.85);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    animation: vw-pulse-border 1.5s ease-in-out infinite;
}
@keyframes vw-pulse-border {
    0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
    50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* Banner IP detect */
.vw-geo {
    background: rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.3);
    border-radius:8px;
    padding:7px 12px;
    font-size:12px;
    text-align:center;
    margin-bottom:12px;
    opacity:1;
    transition:opacity .5s ease;
    animation: vw-slide .4s ease;
}
@keyframes vw-slide { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* Header */
.vw-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.vw-city { font-size:15px; font-weight:600; }
.vw-head-r { display:flex; align-items:center; gap:8px; }
.vw-upd { font-size:11px; opacity:.7; }

/* Buton refresh */
.vw-btn-refresh {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background .2s;
}
.vw-btn-refresh:hover { background: rgba(255,255,255,.28); }
.vw-btn-refresh:disabled { opacity:.5; cursor:not-allowed; }

/* Loading overlay */
.vw-loading {
    position:absolute; inset:0;
    background:rgba(0,0,0,.35);
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    z-index:10;
}
.vw-spin {
    width:36px; height:36px;
    border:3px solid rgba(255,255,255,.3);
    border-top-color:#fff;
    border-radius:50%;
    animation: vw-rotate .8s linear infinite;
}
@keyframes vw-rotate { to { transform:rotate(360deg); } }

/* Main temp */
.vw-main { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.vw-ico-wrap svg { filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.vw-temp   { font-size:52px; font-weight:700; line-height:1; letter-spacing:-2px; }
.vw-desc   { font-size:15px; opacity:.9; margin:4px 0 2px; text-transform:capitalize; }
.vw-feels  { font-size:12px; opacity:.7; }

/* Grid detalii */
.vw-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    background:rgba(255,255,255,.1); border-radius:12px;
    padding:12px; margin-bottom:18px; backdrop-filter:blur(4px);
}
.vw-cell { display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }
.vw-ei   { font-size:18px; }
.vw-ev   { font-size:13px; font-weight:600; }
.vw-el   { font-size:10px; opacity:.75; text-transform:uppercase; letter-spacing:.5px; }

/* Prognoza */
.vw-fc-title { font-size:12px; text-transform:uppercase; letter-spacing:1px; opacity:.8; margin-bottom:10px; font-weight:600; }
.vw-fc-row   { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
.vw-fc-day   {
    flex:1; min-width:62px;
    background:rgba(255,255,255,.12); border-radius:10px;
    padding:8px 4px; text-align:center;
    transition:background .2s;
}
.vw-fc-day:hover  { background:rgba(255,255,255,.22); }
.vw-fc-date  { font-size:10px; opacity:.8; margin-bottom:4px; line-height:1.2; }
.vw-fc-ico   { display:flex; justify-content:center; margin:2px 0; }
.vw-fc-desc  { font-size:9px; opacity:.75; margin:3px 0; line-height:1.2; min-height:20px; }
.vw-fc-temps { display:flex; justify-content:center; gap:4px; font-size:11px; font-weight:600; }
.vw-mx { color:#FFD700; }
.vw-mn { opacity:.7; }

/* Toast */
.vw-toast {
    position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,.65); color:#fff;
    font-size:12px; font-weight:500;
    padding:6px 14px; border-radius:20px;
    white-space:nowrap; opacity:0; transition:opacity .3s ease;
    z-index:20; pointer-events:none;
}

/* Footer */
.vw-foot { margin-top:14px; font-size:10px; opacity:.5; text-align:right; }
.vw-foot a { color:#fff; text-decoration:none; }
.vw-foot a:hover { opacity:1; }

/* ---- ANIMATII ICONITE ---- */

/* Soare */
@keyframes vw-spin-r { from { transform:rotate(0); } to { transform:rotate(360deg); } }
.vw-sun .vw-rays { transform-origin:32px 32px; animation:vw-spin-r 8s linear infinite; }

/* Luna */
@keyframes vw-twinkle { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.vw-moon .vw-star:nth-child(2) { animation:vw-twinkle 2s ease-in-out infinite; }
.vw-moon .vw-star:nth-child(3) { animation:vw-twinkle 2.5s ease-in-out infinite .5s; }
.vw-moon .vw-star:nth-child(4) { animation:vw-twinkle 3s ease-in-out infinite 1s; }
.vw-moon .vw-star:nth-child(5) { animation:vw-twinkle 2.2s ease-in-out infinite .3s; }
@keyframes vw-glow { 0%,100% { filter:drop-shadow(0 0 4px #f0c040); } 50% { filter:drop-shadow(0 0 10px #f0c040); } }
.vw-moon-shape { animation:vw-glow 3s ease-in-out infinite; }

/* Nor */
@keyframes vw-drift { 0%,100% { transform:translateX(0); } 50% { transform:translateX(4px); } }
.vw-drift { animation:vw-drift 4s ease-in-out infinite; }

/* Ploaie */
@keyframes vw-drop { 0% { transform:translateY(0); opacity:1; } 80% { transform:translateY(10px); opacity:.5; } 100% { transform:translateY(0); opacity:1; } }
.vw-d1 { animation:vw-drop 1.2s ease-in infinite; }
.vw-d2 { animation:vw-drop 1.2s ease-in infinite .4s; }
.vw-d3 { animation:vw-drop 1.2s ease-in infinite .8s; }

/* Fulger */
@keyframes vw-flash { 0%,90%,100% { opacity:1; } 95% { opacity:0; } }
.vw-bolt { animation:vw-flash 2s ease-in-out infinite; }

/* Zapada */
@keyframes vw-fall { 0% { transform:translateY(0) rotate(0); opacity:1; } 100% { transform:translateY(12px) rotate(180deg); opacity:0; } }
.vw-f1 { animation:vw-fall 1.8s ease-in infinite; }
.vw-f2 { animation:vw-fall 2s ease-in infinite .6s; }
.vw-f3 { animation:vw-fall 1.6s ease-in infinite 1.2s; }

/* Ceata */
@keyframes vw-fade-fog { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.vw-fog-ico .vw-fl1 { animation:vw-fade-fog 2s ease-in-out infinite; }
.vw-fog-ico .vw-fl2 { animation:vw-fade-fog 2s ease-in-out infinite .5s; }
.vw-fog-ico .vw-fl3 { animation:vw-fade-fog 2s ease-in-out infinite 1s; }

/* Rotire iconica refresh */
@keyframes vw-spin-btn { to { transform:rotate(360deg); } }
.vw-ri.vw-spinning { animation:vw-spin-btn .7s linear infinite; }

/* Responsive */
@media (max-width:400px) {
    .vw-box  { padding:16px; border-radius:12px; }
    .vw-temp { font-size:44px; }
    .vw-grid { grid-template-columns:repeat(2,1fr); }
}