/* Reference proportions, real weather values and code-native motion. */
#pogoda{--weather-u:calc(100cqi / 401);align-self:start;display:block;position:relative;padding:14px 10px 11px 11px;min-height:0;border:1px solid #6e8d7133;border-radius:17px;background:linear-gradient(120deg,#17382a,#0c291e);box-shadow:inset 0 1px 0 #e5f1d20a;margin-bottom:0}
#pogoda .weather-heading{display:grid;grid-template-columns:calc(50 * var(--weather-u)) minmax(0,1fr);column-gap:calc(16 * var(--weather-u));grid-template-rows:calc(43 * var(--weather-u)) calc(17 * var(--weather-u));row-gap:0;height:calc(60 * var(--weather-u));min-height:0;margin:0 0 calc(15 * var(--weather-u));align-items:center}
#pogoda .weather-emblem{grid-column:1;grid-row:1 / 3;display:grid;place-items:center;align-self:center;width:calc(50 * var(--weather-u));height:calc(60 * var(--weather-u));margin:0}
#pogoda .weather-emblem svg{width:calc(44 * var(--weather-u));height:calc(48 * var(--weather-u));filter:drop-shadow(0 1px 2px #001f1740)}
#pogoda .weather-heading h2{grid-column:2;grid-row:1;font:400 calc(29 * var(--weather-u))/1.1 Georgia,'Times New Roman',serif;letter-spacing:calc(-1 * var(--weather-u));white-space:nowrap;color:#fbfff3}
#pogoda .weather-heading p{grid-column:2;grid-row:2;align-self:center;font:400 calc(12 * var(--weather-u))/1.4 Manrope,Arial,sans-serif;white-space:nowrap;margin:0;color:#d9e4d5;transform:translateY(calc(-3 * var(--weather-u)));letter-spacing:-.3px}
#pogoda .weather-widget{isolation:isolate;height:calc(175 * var(--weather-u));min-height:0;padding:calc(13 * var(--weather-u)) calc(20 * var(--weather-u));margin:0;position:relative;overflow:hidden;border-radius:calc(12 * var(--weather-u));border:1px solid #c3d6b666;background:radial-gradient(ellipse at 3% 106%,#b6c3929c,transparent 60%),linear-gradient(115deg,#152c30,#314c48);box-shadow:inset 0 1px 0 #f3f8db0b}
#pogoda .weather-widget[data-weather-is-day="0"]{background:radial-gradient(ellipse at 3% 106%,#849f8f50,transparent 60%),linear-gradient(115deg,#142a31,#304b48)}
#pogoda .weather-place,#pogoda .weather-current,#pogoda .weather-widget-footer{position:relative;z-index:1}
#pogoda .weather-place{height:calc(20 * var(--weather-u));font-size:calc(14 * var(--weather-u));line-height:1.4;display:block}
#pogoda .weather-place strong{font-weight:650;letter-spacing:-.3px}
#pogoda .weather-place>span{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}
#pogoda .weather-current{display:block;position:static;height:calc(75 * var(--weather-u));margin:calc(8 * var(--weather-u)) 0 0}
#pogoda .weather-temperature{position:relative;z-index:1;display:flex;gap:calc(16 * var(--weather-u));align-items:flex-start;width:65%;height:calc(76 * var(--weather-u))}
#pogoda [data-weather-icon],#pogoda [data-weather-icon] svg{display:block;width:calc(60 * var(--weather-u));height:calc(64 * var(--weather-u));flex-shrink:0;color:#f9cb2e}
#pogoda [data-weather-icon] svg{overflow:visible;filter:drop-shadow(0 2px 3px #12362f33)}
#pogoda [data-weather-icon] svg.weather-illustration{fill:none;stroke:none}
#pogoda .temperature{font:400 calc(42 * var(--weather-u))/1 Manrope,Arial,sans-serif;letter-spacing:calc(-2 * var(--weather-u));display:flex;align-items:baseline;white-space:nowrap;color:#fffef4}
#pogoda .temp-unit{font-size:calc(29 * var(--weather-u));letter-spacing:-1px}
#pogoda [data-weather-condition]{font-size:calc(12 * var(--weather-u));line-height:1.3;margin:calc(5 * var(--weather-u)) 0 0;max-width:calc(145 * var(--weather-u));color:#fffdf2}
#pogoda .weather-metrics{display:grid;position:absolute;z-index:1;top:calc(20 * var(--weather-u));right:calc(18 * var(--weather-u));width:calc(126 * var(--weather-u));min-width:0;max-width:none;gap:calc(10 * var(--weather-u));margin:0;padding:0;border:0;font-size:calc(12 * var(--weather-u));line-height:1.25}
#pogoda .weather-metrics>div{display:flex;justify-content:space-between;align-items:baseline;gap:calc(8 * var(--weather-u));margin:0}
#pogoda .weather-metrics dt{font-size:inherit;color:#c6d4cc;white-space:nowrap}
#pogoda .weather-metrics dd{font-size:inherit;line-height:inherit;text-align:right;white-space:nowrap;font-weight:550;color:#fbfff7;margin:0}
#pogoda .weather-widget-footer{display:flex;gap:10px;justify-content:space-between;align-items:center;margin:calc(8 * var(--weather-u)) 0 0}
#pogoda .weather-widget-footer>.button{height:calc(35 * var(--weather-u));min-height:0;padding:0 calc(14 * var(--weather-u));gap:calc(12 * var(--weather-u));font-size:calc(11 * var(--weather-u));font-weight:600;border-radius:calc(11 * var(--weather-u));background:linear-gradient(115deg,#294a3b9c,#18362e99);border:1px solid #d9e7bd4d;box-shadow:inset 0 1px 0 #f0f5df0b}
#pogoda .weather-widget-footer>.button svg{width:calc(13 * var(--weather-u));height:calc(13 * var(--weather-u))}
#pogoda .weather-meta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);margin:0}
#pogoda .weather-widget[data-weather-state=error],#pogoda .weather-widget[data-weather-state=stale]{height:auto;min-height:calc(175 * var(--weather-u));padding-bottom:calc(13 * var(--weather-u))}
#pogoda .weather-widget[data-weather-state=error] .weather-meta,#pogoda .weather-widget[data-weather-state=stale] .weather-meta{position:relative;z-index:1;clip:auto;width:auto;height:auto;margin-top:9px;overflow:visible}
#pogoda .weather-widget[data-weather-state=error] .weather-status,#pogoda .weather-widget[data-weather-state=stale] .weather-status{position:static;clip:auto;width:auto;height:auto;white-space:normal;font-size:10px;line-height:1.5}
#pogoda .weather-widget[data-weather-state=error] .weather-time,#pogoda .weather-widget[data-weather-state=stale] .weather-time{font-size:9px;margin-top:4px}
#pogoda .alert-card{display:grid;grid-template-columns:calc(32 * var(--weather-u)) minmax(0,1fr);gap:calc(13 * var(--weather-u));padding:calc(14 * var(--weather-u)) calc(20 * var(--weather-u));height:calc(110 * var(--weather-u));min-height:0;margin:calc(4 * var(--weather-u)) 0 0;align-items:start;border:1px solid #bdcfb855;border-radius:calc(12 * var(--weather-u));box-shadow:inset 0 1px 0 #f0f4e60b}
#pogoda .alert-card:before{background-image:url('/assets/nature-v38/assets/storm-clouds-v3.png');background-position:right center;background-size:cover;filter:none;transform:none}
#pogoda .alert-card:after{background:linear-gradient(90deg,#0b262cde,#142c31a8 43%,#142c3120 88%)}
#pogoda .alert-icon{width:calc(28 * var(--weather-u));height:calc(35 * var(--weather-u));margin:0;display:grid;place-items:center;color:#fff3ef;background:radial-gradient(ellipse,#f0473944,transparent 70%);filter:drop-shadow(0 0 4px #f44738bf)}
#pogoda .alert-icon svg{width:calc(26 * var(--weather-u));height:calc(30 * var(--weather-u));stroke-width:1.65}
#pogoda .alert-content>strong{font-size:calc(14 * var(--weather-u));line-height:1.3;font-weight:650;letter-spacing:-.3px}
#pogoda .alert-content>small{font-size:calc(12 * var(--weather-u));line-height:1.4;margin-top:calc(4 * var(--weather-u));white-space:nowrap;letter-spacing:-.3px}
#pogoda .alert-link{display:inline-flex;align-items:center;gap:calc(10 * var(--weather-u));height:calc(36 * var(--weather-u));min-height:0;margin-top:calc(8 * var(--weather-u));padding:0 calc(13 * var(--weather-u));border:1px solid #d8e5cb55;border-radius:calc(11 * var(--weather-u));font-size:calc(11 * var(--weather-u));font-weight:600;background:linear-gradient(115deg,#435d5b8c,#213d428c);box-shadow:inset 0 1px 0 #f2f7e60c}
#pogoda .alert-link svg{width:calc(13 * var(--weather-u));height:calc(13 * var(--weather-u))}
.weather-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.75}
.weather-atmosphere>svg{width:100%;height:100%;fill:none;stroke:none}
.ambient-cloud{display:none;fill:#bed3cd;opacity:.14}
.ambient-cloud-front{opacity:.11}
[data-weather-kind=cloudy] .ambient-cloud,[data-weather-kind=partly-cloudy] .ambient-cloud,[data-weather-kind=rain] .ambient-cloud,[data-weather-kind=storm] .ambient-cloud,[data-weather-kind=snow] .ambient-cloud{display:block}
.weather-widget:is([data-weather-kind=cloudy],[data-weather-kind=partly-cloudy],[data-weather-kind=rain],[data-weather-kind=storm],[data-weather-kind=snow]) .ambient-cloud-back{animation:weather-sky-drift 12s ease-in-out infinite alternate}
.weather-widget:is([data-weather-kind=cloudy],[data-weather-kind=partly-cloudy],[data-weather-kind=rain],[data-weather-kind=storm],[data-weather-kind=snow]) .ambient-cloud-front{animation:weather-sky-drift 10s ease-in-out -4s infinite alternate-reverse}
.ambient-rain,.ambient-snow,.ambient-stars{display:none}
[data-weather-kind=rain] .ambient-rain,[data-weather-kind=storm] .ambient-rain{display:block;stroke:#d2edf1;stroke-width:.8;opacity:.12}
.weather-widget:is([data-weather-kind=rain],[data-weather-kind=storm]) .ambient-rain>path{animation:weather-ambient-rain 2.2s linear infinite;animation-delay:calc(var(--i) * -.21s)}
[data-weather-kind=snow] .ambient-snow{display:block;fill:#edf5ed;opacity:.24}
[data-weather-kind=snow] .ambient-snow>circle{animation:weather-ambient-snow 7s linear infinite;animation-delay:calc(var(--i) * -.67s)}
[data-weather-is-day="0"] .ambient-stars{display:block;fill:#e0e8cf;opacity:.25;animation:weather-stars 5s ease-in-out infinite alternate}
.wx-rays{animation:weather-rays 16s linear infinite;transform-box:view-box}
.wx-sun{animation:weather-sunlight 2.8s ease-in-out infinite alternate}
.wx-cloud-back{animation:weather-cloud-back 4s ease-in-out infinite alternate}
.wx-cloud-front{animation:weather-cloud-front 3.4s ease-in-out -1.7s infinite alternate}
.wx-rain{animation:weather-drop 1.45s ease-in infinite;animation-delay:calc(var(--i) * -.42s)}
.wx-snow{animation:weather-flake 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
.wx-fog{animation:weather-fog 8s ease-in-out infinite alternate}
.wx-moon{animation:weather-moon 4s ease-in-out infinite alternate}
.wx-star{animation:weather-stars 2.8s ease-in-out infinite alternate}
.wx-lightning{animation:weather-lightning 9s ease-in-out infinite}
@keyframes weather-rays{to{transform:rotate(360deg)}}
@keyframes weather-sunlight{from{opacity:.86;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}
@keyframes weather-cloud-back{from{transform:translate(-5px,1.2px)}to{transform:translate(5px,-1.2px)}}
@keyframes weather-cloud-front{from{transform:translate(4px,-.8px)}to{transform:translate(-5px,1px)}}
@keyframes weather-drop{0%{transform:translate(1px,-2px);opacity:0}20%{opacity:1}80%{opacity:.9}100%{transform:translate(-1px,5px);opacity:0}}
@keyframes weather-flake{0%{transform:translate(-1px,-2px);opacity:.25}35%{opacity:1}100%{transform:translate(1.5px,5px);opacity:.15}}
@keyframes weather-fog{from{transform:translateX(-2px);opacity:.6}to{transform:translateX(2px);opacity:1}}
@keyframes weather-moon{from{transform:translateY(-2px)}to{transform:translateY(2px)}}
@keyframes weather-stars{from{opacity:.25}to{opacity:.85}}
@keyframes weather-lightning{0%,82%,100%{opacity:.45}87%{opacity:1}94%{opacity:.45}}
@keyframes weather-sky-drift{from{transform:translateX(-12px)}to{transform:translateX(12px)}}
@keyframes weather-ambient-rain{from{transform:translate(16px,-5px)}to{transform:translate(-30px,200px)}}
@keyframes weather-ambient-snow{from{transform:translate(-5px,-5px)}to{transform:translate(12px,200px)}}
#weather-widget.is-motion-reduced *,#weather-widget.is-motion-outside *{animation-play-state:paused!important}
@container (max-width:300px){
  #pogoda .weather-widget{height:auto;min-height:200px;padding:12px}
  #pogoda .weather-current{height:auto;margin:8px 0 12px}
  #pogoda .weather-temperature{width:100%;height:65px;gap:12px}
  #pogoda .weather-metrics{position:relative;top:auto;right:auto;grid-template-columns:1fr 1fr;gap:9px 14px;width:auto;margin-top:12px;padding-top:10px;border-top:1px solid #c6d5bc26;font-size:11px}
  #pogoda .weather-metrics>div{display:flex;gap:8px}#pogoda .weather-metrics dt{font-size:10px}
  #pogoda .weather-widget-footer{margin-top:12px}
  #pogoda .weather-widget-footer>.button{font-size:10px;min-height:32px;height:auto;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){#pogoda *,#pogoda *:before,#pogoda *:after{animation:none!important;transition:none!important}}
