/* Dynamic Weather Card - styles are scoped with a dwc- prefix to avoid
   conflicts with your theme's CSS. */

.dwc-weather-widget{
  --dwc-ink-950:#0A1626;
  --dwc-ink-900:#0F1F35;
  --dwc-ink-800:#152944;
  --dwc-cyan-400:#4FD1C5;
  --dwc-cyan-300:#7EE8DD;
  --dwc-amber-400:#FFB454;
  --dwc-violet-400:#8B7EF0;
  --dwc-text-hi:#F3F7FB;
  --dwc-text-lo:#9FB1C9;
  --dwc-glass-border:rgba(255,255,255,0.10);
  --dwc-glass-fill:rgba(255,255,255,0.045);
  --dwc-font-display:'Space Grotesk',system-ui,sans-serif;
  --dwc-font-body:'Inter',system-ui,sans-serif;
  --dwc-font-mono:'JetBrains Mono',ui-monospace,monospace;

  position:relative;
  display:block;
  width:100%;
  max-width:360px;
  margin:0 auto;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--dwc-glass-border);
  box-shadow:0 20px 50px -18px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.02) inset;
  color:var(--dwc-text-hi);
  font-family:var(--dwc-font-body);
  box-sizing:border-box;
  animation:dwcCardIn .7s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes dwcCardIn{
  0%{opacity:0; transform:translateY(16px) scale(.98);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
.dwc-weather-widget *{ box-sizing:border-box; }

.dwc-widget-title{
  position:relative; z-index:1;
  font-family:var(--dwc-font-display);
  font-size:15px;
  padding:14px 20px 0;
  margin:0;
}

.dwc-bg-layer{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg,var(--dwc-ink-950),var(--dwc-ink-900) 55%,var(--dwc-ink-800));
  transition:background 1s ease;
}
.dwc-bg-layer::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 78% 8%, rgba(79,209,197,0.20), transparent 55%),
             radial-gradient(circle at 10% 95%, rgba(139,126,240,0.16), transparent 50%);
  pointer-events:none;
}
.dwc-bg-clear-day .dwc-bg-layer{background:linear-gradient(160deg,#0E2A4A,#173B63 55%,#265584);}
.dwc-bg-clear-night .dwc-bg-layer{background:linear-gradient(160deg,#050B18,#0B1728 55%,#111F38);}
.dwc-bg-cloudy .dwc-bg-layer{background:linear-gradient(160deg,#101823,#1B2635 55%,#293A4E);}
.dwc-bg-rain .dwc-bg-layer{background:linear-gradient(160deg,#0A1420,#12202F 55%,#1C3243);}
.dwc-bg-storm .dwc-bg-layer{background:linear-gradient(160deg,#0B0E1C,#171A2E 55%,#242145);}
.dwc-bg-snow .dwc-bg-layer{background:linear-gradient(160deg,#101825,#1B2733 55%,#2C3D48);}
.dwc-bg-fog .dwc-bg-layer{background:linear-gradient(160deg,#12161C,#1D222A 55%,#2B313A);}

.dwc-sky-decor{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.dwc-decor-cloud{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%);
  filter:blur(6px);
}
.dwc-decor-1{width:140px; height:56px; top:8%; animation:dwcDrift1 46s linear infinite;}
.dwc-decor-2{width:100px; height:40px; top:32%; animation:dwcDrift2 62s linear infinite; opacity:.7;}
.dwc-decor-3{width:170px; height:64px; top:58%; animation:dwcDrift3 78s linear infinite; opacity:.5;}
@keyframes dwcDrift1{0%{transform:translateX(-40%);} 100%{transform:translateX(340%);}}
@keyframes dwcDrift2{0%{transform:translateX(-30%);} 100%{transform:translateX(380%);}}
@keyframes dwcDrift3{0%{transform:translateX(-50%);} 100%{transform:translateX(320%);}}

.dwc-particle-layer{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.dwc-p-rain{position:absolute; top:-20px; width:1.5px; height:14px; background:linear-gradient(to bottom, transparent, rgba(126,232,221,0.55)); animation-name:dwcRainFall; animation-timing-function:linear; animation-iteration-count:infinite;}
@keyframes dwcRainFall{0%{transform:translateY(0);opacity:0;} 10%{opacity:1;} 100%{transform:translateY(420px);opacity:0.2;}}
.dwc-p-snow{position:absolute; top:-10px; width:4px; height:4px; border-radius:50%; background:rgba(234,243,255,0.8); animation-name:dwcSnowFall; animation-timing-function:linear; animation-iteration-count:infinite;}
@keyframes dwcSnowFall{0%{transform:translate(0,0);opacity:0;} 10%{opacity:.9;} 100%{transform:translate(18px,420px);opacity:0.15;}}

.dwc-inner{position:relative; z-index:1; padding:18px 20px 18px;}

.dwc-header-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.dwc-eyebrow{font-family:var(--dwc-font-mono); font-size:10px; letter-spacing:2px; color:var(--dwc-cyan-300); display:flex; align-items:center; gap:6px;}
.dwc-eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--dwc-cyan-300); box-shadow:0 0 8px var(--dwc-cyan-300); animation:dwcLivePulse 1.8s ease-in-out infinite;}
@keyframes dwcLivePulse{0%,100%{opacity:1} 50%{opacity:0.35}}

.dwc-header-actions{display:flex; align-items:center; gap:8px;}
.dwc-refresh-btn{width:26px; height:26px; border-radius:50%; background:var(--dwc-glass-fill); border:1px solid var(--dwc-glass-border); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.dwc-refresh-btn svg{transition:transform .3s ease;}
.dwc-refresh-btn.dwc-spinning svg{animation:dwcSpin .9s linear infinite;}
@keyframes dwcSpin{from{transform:rotate(0)} to{transform:rotate(360deg)}}

.dwc-unit-toggle{background:var(--dwc-glass-fill); border:1px solid var(--dwc-glass-border); border-radius:20px; display:flex; cursor:pointer; font-family:var(--dwc-font-mono); font-size:11px; overflow:hidden;}
.dwc-unit-toggle .dwc-unit{padding:4px 9px; color:var(--dwc-text-lo); transition:all .25s ease;}
.dwc-unit-toggle .dwc-unit.dwc-active{background:var(--dwc-cyan-400); color:#04211E; font-weight:700;}

.dwc-greeting{font-family:var(--dwc-font-mono); font-size:10.5px; color:var(--dwc-text-lo); letter-spacing:.5px; margin-bottom:6px;}

.dwc-location-row{display:flex; align-items:center; gap:6px; font-family:var(--dwc-font-display); font-size:16px; font-weight:600; margin-bottom:2px;}
.dwc-location-row svg{flex-shrink:0;}
.dwc-retry-btn{margin-left:4px; font-family:var(--dwc-font-mono); font-size:10px; padding:3px 9px; background:var(--dwc-cyan-400); color:#04211E; border:none; border-radius:12px; cursor:pointer; font-weight:700;}
.dwc-retry-btn.dwc-hidden{display:none;}

.dwc-updated-row{font-family:var(--dwc-font-mono); font-size:9.5px; color:var(--dwc-text-lo); margin-bottom:8px; display:flex; align-items:center; gap:5px;}
.dwc-clock-row{font-family:var(--dwc-font-mono); font-size:11px; color:var(--dwc-text-lo); margin-bottom:14px; letter-spacing:1px;}

.dwc-main-display{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.dwc-icon-stage{width:76px; height:76px; position:relative; flex-shrink:0;}
.dwc-icon-stage svg{position:absolute; inset:0; width:100%; height:100%; display:none;}
.dwc-icon-stage.dwc-show-clear-day .dwc-icon-clear-day{display:block;}
.dwc-icon-stage.dwc-show-clear-night .dwc-icon-clear-night{display:block;}
.dwc-icon-stage.dwc-show-cloudy .dwc-icon-cloudy{display:block;}
.dwc-icon-stage.dwc-show-rain .dwc-icon-rain{display:block;}
.dwc-icon-stage.dwc-show-storm .dwc-icon-storm{display:block;}
.dwc-icon-stage.dwc-show-snow .dwc-icon-snow{display:block;}
.dwc-icon-stage.dwc-show-fog .dwc-icon-fog{display:block;}

.dwc-sun-core{animation:dwcSunPulse 3.2s ease-in-out infinite; transform-origin:center;}
@keyframes dwcSunPulse{0%,100%{transform:scale(1); filter:drop-shadow(0 0 6px rgba(255,180,84,.55));} 50%{transform:scale(1.08); filter:drop-shadow(0 0 14px rgba(255,180,84,.9));}}
.dwc-sun-rays{animation:dwcRayRotate 18s linear infinite; transform-origin:center;}
@keyframes dwcRayRotate{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.dwc-moon-glow{animation:dwcMoonGlow 3.6s ease-in-out infinite;}
@keyframes dwcMoonGlow{0%,100%{filter:drop-shadow(0 0 5px rgba(200,215,255,.5));} 50%{filter:drop-shadow(0 0 12px rgba(200,215,255,.85));}}
.dwc-star{animation:dwcTwinkle 2.4s ease-in-out infinite;}
.dwc-star.dwc-s2{animation-delay:.6s;} .dwc-star.dwc-s3{animation-delay:1.2s;}
@keyframes dwcTwinkle{0%,100%{opacity:.25} 50%{opacity:1}}
.dwc-cloud-body{animation:dwcCloudFloat 4s ease-in-out infinite; filter:drop-shadow(0 5px 7px rgba(5,15,30,.35));}
@keyframes dwcCloudFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
.dwc-drop{animation:dwcDropFall 1.1s linear infinite;}
.dwc-drop.dwc-d2{animation-delay:.35s;} .dwc-drop.dwc-d3{animation-delay:.7s;}
@keyframes dwcDropFall{0%{transform:translateY(-3px); opacity:0} 25%{opacity:1} 100%{transform:translateY(14px); opacity:0}}
.dwc-bolt{animation:dwcFlash 2.6s ease-in-out infinite; filter:drop-shadow(0 0 5px rgba(255,209,102,.85));}
@keyframes dwcFlash{0%,88%,100%{opacity:0} 90%,95%{opacity:1}}
.dwc-flake{animation:dwcSnowSpin 2.4s linear infinite;}
.dwc-flake.dwc-f2{animation-delay:.6s;} .dwc-flake.dwc-f3{animation-delay:1.2s;}
@keyframes dwcSnowSpin{0%{transform:translate(0,-3px) rotate(0)} 100%{transform:translate(4px,15px) rotate(90deg); opacity:0}}
.dwc-fog-bar{animation:dwcFogDrift 3.6s ease-in-out infinite; filter:blur(0.4px);}
.dwc-fog-bar.dwc-f2{animation-delay:.5s;} .dwc-fog-bar.dwc-f3{animation-delay:1s;}
@keyframes dwcFogDrift{0%{transform:translateX(-5px); opacity:.5} 50%{transform:translateX(5px); opacity:.9} 100%{transform:translateX(-5px); opacity:.5}}

.dwc-temp-block{text-align:right;}
.dwc-temp-value{font-family:var(--dwc-font-mono); font-size:44px; font-weight:700; line-height:1; letter-spacing:-1px;}
.dwc-temp-unit-label{font-family:var(--dwc-font-mono); font-size:16px; color:var(--dwc-text-lo); vertical-align:top; position:relative; top:4px;}
.dwc-condition-text{font-size:13.5px; color:var(--dwc-text-lo); margin-bottom:14px;}

.dwc-arc-wrap{margin-bottom:14px;}
.dwc-arc-svg{width:100%; height:44px; display:block;}
.dwc-arc-path{fill:none; stroke:rgba(255,255,255,0.15); stroke-width:1.5; stroke-dasharray:2 4;}
.dwc-arc-dot{fill:var(--dwc-amber-400); filter:drop-shadow(0 0 6px rgba(255,180,84,.8));}
.dwc-arc-dot.dwc-is-night{fill:#8FA2C8; filter:drop-shadow(0 0 6px rgba(143,162,200,.7));}
.dwc-arc-times{display:flex; justify-content:space-between; font-family:var(--dwc-font-mono); font-size:10px; color:var(--dwc-text-lo); margin-top:2px;}
.dwc-arc-times span{display:flex; align-items:center; gap:3px;}

.dwc-stats-grid{display:flex; flex-wrap:wrap; gap:10px 0; padding:12px 0; margin-bottom:12px; border-top:1px solid var(--dwc-glass-border); border-bottom:1px solid var(--dwc-glass-border);}
.dwc-stat{flex:0 0 33.33%; display:flex; flex-direction:column; align-items:center; gap:3px; font-family:var(--dwc-font-mono); font-size:12px; color:var(--dwc-text-hi);}
.dwc-stat svg{opacity:.85;}
.dwc-stat label{font-family:var(--dwc-font-body); font-size:9px; color:var(--dwc-text-lo); letter-spacing:.4px; text-transform:uppercase;}
.dwc-compass{position:relative; width:16px; height:16px; border:1px solid rgba(255,255,255,0.25); border-radius:50%;}
.dwc-compass .dwc-arrow{position:absolute; top:50%; left:50%; width:1.5px; height:7px; background:var(--dwc-violet-400); transform-origin:bottom center; transform:translate(-50%,-100%) rotate(0deg);}
.dwc-aqi-badge{padding:1px 7px; border-radius:8px; font-weight:700; font-size:11px;}

.dwc-trend-wrap{margin-bottom:14px;}
.dwc-trend-label{font-family:var(--dwc-font-mono); font-size:10px; letter-spacing:2px; color:var(--dwc-text-lo); display:block; margin-bottom:6px;}
.dwc-trend-svg{width:100%; height:52px; display:block; overflow:visible;}
.dwc-trend-line{fill:none; stroke:var(--dwc-cyan-400); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(79,209,197,.6));}
.dwc-trend-area{fill:url(#dwcTrendFill); stroke:none;}

.dwc-tabs{display:flex; gap:6px; margin-bottom:10px;}
.dwc-tab-btn{font-family:var(--dwc-font-mono); font-size:10.5px; letter-spacing:1px; padding:5px 11px; border-radius:14px; background:var(--dwc-glass-fill); border:1px solid var(--dwc-glass-border); color:var(--dwc-text-lo); cursor:pointer; transition:all .2s ease;}
.dwc-tab-btn.dwc-active{background:var(--dwc-cyan-400); color:#04211E; font-weight:700; border-color:transparent;}

.dwc-forecast-scroll{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; scrollbar-width:thin; scrollbar-color:var(--dwc-cyan-400) transparent;}
.dwc-forecast-scroll::-webkit-scrollbar{height:4px;}
.dwc-forecast-scroll::-webkit-scrollbar-thumb{background:var(--dwc-cyan-400); border-radius:4px;}
.dwc-forecast-scroll::-webkit-scrollbar-track{background:transparent;}
.dwc-day-card{scroll-snap-align:start; flex:0 0 58px; background:var(--dwc-glass-fill); border:1px solid var(--dwc-glass-border); border-radius:14px; padding:10px 0 8px; display:flex; flex-direction:column; align-items:center; gap:6px; transition:transform .2s ease, background .2s ease;}
.dwc-day-card:hover{transform:translateY(-3px); background:rgba(255,255,255,0.08);}
.dwc-day-card .dwc-dname{font-family:var(--dwc-font-mono); font-size:10px; color:var(--dwc-text-lo); letter-spacing:.5px;}
.dwc-day-card svg{width:30px; height:30px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.dwc-day-card .dwc-dmax{font-family:var(--dwc-font-mono); font-size:12.5px; font-weight:700;}
.dwc-day-card .dwc-dmin{font-family:var(--dwc-font-mono); font-size:10.5px; color:var(--dwc-text-lo);}
.dwc-forecast-error{font-size:12px; color:var(--dwc-text-lo);}

.dwc-skeleton{background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.18), rgba(255,255,255,.05)); background-size:200% 100%; animation:dwcShimmer 1.4s infinite; border-radius:6px; color:transparent !important; border-color:transparent !important;}
@keyframes dwcShimmer{0%{background-position:200% 0} 100%{background-position:-200% 0}}

@media (prefers-reduced-motion: reduce){
  .dwc-weather-widget *{animation:none !important; transition:none !important;}
}