/* Hotel weather card (native/lib/WeatherRenderer.php). Pure CSS: the scene follows the real condition; every animation stops under prefers-reduced-motion
   and leaves a calm static picture. Text/background pairs are chosen for contrast (dark text on light skies, white on dark ones; >= 4.5:1). */
.wx{--wx-fg:#14243b;--wx-soft:#33465f;--wx-a:#cfe9ff;--wx-b:#fff1cc;position:relative;overflow:hidden;border-radius:20px;color:var(--wx-fg);background:linear-gradient(160deg,var(--wx-a),var(--wx-b));border:1px solid rgba(20,36,59,.12);box-shadow:0 10px 30px rgba(38,44,63,.12);isolation:isolate;min-height:190px}
.wx-body{position:relative;z-index:2;padding:22px 24px 20px;max-width:640px}
.wx-eyebrow{margin:0 0 6px;font:600 12px/1.3 Poppins,Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--wx-soft)}
.wx-place{letter-spacing:.6px}
.wx-main{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.wx-temp{font:700 64px/1 Poppins,Inter,sans-serif;letter-spacing:-2px}
.wx-temp sup{font-size:24px;letter-spacing:0;margin-inline-start:2px;vertical-align:top;position:relative;top:8px}
.wx-cond{font:600 20px/1.2 Poppins,Inter,sans-serif}
.wx-facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0 0;padding:0}
.wx-facts div{min-width:72px}
.wx-facts dt{font:600 11px/1.3 Inter,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:var(--wx-soft)}
.wx-facts dd{margin:2px 0 0;font:600 16px/1.3 Inter,sans-serif}
.wx-meta{margin:14px 0 0;font:500 12px/1.5 Inter,sans-serif;color:var(--wx-soft)}
.wx-live{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--wx-fg);color:var(--wx-a);font-weight:700;letter-spacing:.6px;text-transform:uppercase;font-size:10.5px;margin-inline-end:4px}
.wx-link{display:inline-block;margin-top:10px;font:600 14px/1 Poppins,Inter,sans-serif;color:var(--wx-fg);text-decoration:underline;text-underline-offset:3px;min-height:24px}
.wx-link:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}
/* skies */
.wx-sunny{--wx-a:#bfe3ff;--wx-b:#fff0c2}
.wx-partly{--wx-a:#c9e3f7;--wx-b:#f4ead2}
.wx-cloudy,.wx-windy{--wx-a:#dbe3ec;--wx-b:#c5cfdb}
.wx-fog{--wx-a:#e3e8ee;--wx-b:#cfd6de}
.wx-snow{--wx-a:#e9f1fa;--wx-b:#cfdcec}
.wx-rain{--wx-fg:#fff;--wx-soft:#d9e4f0;--wx-a:#2b3f55;--wx-b:#4b647c;border-color:rgba(255,255,255,.12)}
.wx-storm{--wx-fg:#fff;--wx-soft:#d6dbe8;--wx-a:#1d2538;--wx-b:#3a4560;border-color:rgba(255,255,255,.12)}
.wx-night,.wx-partly-night,.wx-cloudy-night,.wx-windy-night{--wx-fg:#fff;--wx-soft:#cfd8ea;--wx-a:#101a33;--wx-b:#2a3f66;border-color:rgba(255,255,255,.12)}
.wx-rain .wx-live,.wx-storm .wx-live,.wx-night .wx-live,.wx-partly-night .wx-live,.wx-cloudy-night .wx-live,.wx-windy-night .wx-live{background:#fff;color:#14243b}
/* the scene sits behind the text, at the far side of the card */
.wx-scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.wx-sun{position:absolute;top:-34px;inset-inline-end:-34px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,#ffe27a 0 38%,rgba(255,214,90,.55) 52%,rgba(255,214,90,0) 70%);animation:wx-glow 6s ease-in-out infinite}
.wx-sun i{position:absolute;inset:-26px;border-radius:50%;background:repeating-conic-gradient(rgba(255,214,90,.35) 0 6deg,transparent 6deg 24deg);-webkit-mask:radial-gradient(circle,transparent 46%,#000 47%,transparent 72%);mask:radial-gradient(circle,transparent 46%,#000 47%,transparent 72%);animation:wx-spin 90s linear infinite}
.wx-moon{position:absolute;top:22px;inset-inline-end:28px;width:64px;height:64px;border-radius:50%;background:#f3efe0;box-shadow:inset -14px -4px 0 0 #101a33,0 0 28px rgba(243,239,224,.35);background:radial-gradient(circle at 36% 38%,#fffbe8,#e9e2c8);-webkit-mask:radial-gradient(circle at 70% 40%,transparent 0 46%,#000 47%);mask:radial-gradient(circle at 70% 40%,transparent 0 46%,#000 47%)}
.wx-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.8;animation:wx-twinkle 4s ease-in-out infinite}
.wx-stars i:nth-child(1){top:18%;inset-inline-end:42%}.wx-stars i:nth-child(2){top:34%;inset-inline-end:26%;animation-delay:.8s}.wx-stars i:nth-child(3){top:12%;inset-inline-end:14%;animation-delay:1.6s}
.wx-stars i:nth-child(4){top:48%;inset-inline-end:36%;animation-delay:2.2s}.wx-stars i:nth-child(5){top:26%;inset-inline-end:56%;animation-delay:2.9s}.wx-stars i:nth-child(6){top:58%;inset-inline-end:12%;animation-delay:1.2s}
.wx-cloud{position:absolute;width:120px;height:38px;border-radius:40px;background:rgba(255,255,255,.78);filter:drop-shadow(0 6px 10px rgba(20,36,59,.10));animation:wx-drift 38s linear infinite}
.wx-cloud::before,.wx-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.wx-cloud::before{width:54px;height:54px;top:-24px;inset-inline-start:18px}.wx-cloud::after{width:42px;height:42px;top:-16px;inset-inline-start:58px}
.wx-c1{top:26px;inset-inline-end:60px}.wx-c2{top:92px;inset-inline-end:-10px;transform:scale(.8);animation-duration:52s;animation-delay:-14s;opacity:.85}.wx-c3{top:60px;inset-inline-end:150px;transform:scale(1.2);animation-duration:64s;animation-delay:-30s;opacity:.7}
.wx-rain .wx-cloud,.wx-storm .wx-cloud,.wx-night .wx-cloud,.wx-cloudy-night .wx-cloud,.wx-partly-night .wx-cloud,.wx-windy-night .wx-cloud{background:rgba(140,160,185,.55)}
.wx-rain i,.wx-snow i{position:absolute}
.wx-rain>i{top:-12%;width:2px;height:18px;border-radius:2px;background:linear-gradient(rgba(190,215,240,0),rgba(190,215,240,.9));animation:wx-fall 1.1s linear infinite}
.wx-rain>i:nth-child(odd){animation-duration:.9s}
.wx-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:wx-flash 9s ease-in-out infinite}
.wx-snow>i{top:-8%;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9;animation:wx-snowfall 7s linear infinite}
.wx-fog>i{position:absolute;inset-inline:-20%;height:34px;border-radius:30px;background:rgba(255,255,255,.55);filter:blur(8px);animation:wx-fogdrift 14s ease-in-out infinite alternate}
.wx-fog>i:nth-child(1){top:30%}.wx-fog>i:nth-child(2){top:52%;animation-delay:-5s}.wx-fog>i:nth-child(3){top:72%;animation-delay:-9s}
.wx-wind>i{position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));animation:wx-gust 3.4s ease-in-out infinite}
.wx-wind>i:nth-child(1){top:38%;width:110px;inset-inline-end:30px}.wx-wind>i:nth-child(2){top:56%;width:150px;inset-inline-end:70px;animation-delay:-1.1s}.wx-wind>i:nth-child(3){top:74%;width:90px;inset-inline-end:10px;animation-delay:-2.2s}
/* raindrops and snowflakes spread across the card */
.wx-rain>i:nth-child(1),.wx-snow>i:nth-child(1){left:6%;animation-delay:-.1s}.wx-rain>i:nth-child(2),.wx-snow>i:nth-child(2){left:14%;animation-delay:-.7s}.wx-rain>i:nth-child(3),.wx-snow>i:nth-child(3){left:23%;animation-delay:-.3s}
.wx-rain>i:nth-child(4),.wx-snow>i:nth-child(4){left:31%;animation-delay:-.9s}.wx-rain>i:nth-child(5),.wx-snow>i:nth-child(5){left:40%;animation-delay:-.5s}.wx-rain>i:nth-child(6),.wx-snow>i:nth-child(6){left:48%;animation-delay:-.2s}
.wx-rain>i:nth-child(7),.wx-snow>i:nth-child(7){left:57%;animation-delay:-.8s}.wx-rain>i:nth-child(8),.wx-snow>i:nth-child(8){left:65%;animation-delay:-.4s}.wx-rain>i:nth-child(9),.wx-snow>i:nth-child(9){left:73%;animation-delay:-1s}
.wx-rain>i:nth-child(10),.wx-snow>i:nth-child(10){left:81%;animation-delay:-.6s}.wx-rain>i:nth-child(11),.wx-snow>i:nth-child(11){left:88%;animation-delay:-.15s}.wx-rain>i:nth-child(12),.wx-snow>i:nth-child(12){left:94%;animation-delay:-.55s}
.wx-rain>i:nth-child(13){left:36%;animation-delay:-.35s}.wx-rain>i:nth-child(14){left:69%;animation-delay:-.75s}
@keyframes wx-glow{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.06);opacity:1}}
@keyframes wx-spin{to{transform:rotate(360deg)}}
@keyframes wx-twinkle{0%,100%{opacity:.25}50%{opacity:.95}}
@keyframes wx-drift{from{transform:translateX(0)}to{transform:translateX(-340px)}}
@keyframes wx-fall{to{transform:translateY(260px)}}
@keyframes wx-snowfall{0%{transform:translate(0,0)}50%{transform:translate(14px,120px)}100%{transform:translate(-6px,250px)}}
@keyframes wx-flash{0%,92%,100%{opacity:0}93%{opacity:.16}94.5%{opacity:0}96%{opacity:.1}97.5%{opacity:0}}
@keyframes wx-fogdrift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
@keyframes wx-gust{0%{transform:translateX(30px);opacity:0}30%{opacity:1}100%{transform:translateX(-70px);opacity:0}}
/* compact variant (the guest homepage) */
.wx-compact{min-height:0}
.wx-compact .wx-body{padding:16px 20px}
.wx-compact .wx-temp{font-size:44px}.wx-compact .wx-temp sup{font-size:17px;top:5px}.wx-compact .wx-cond{font-size:17px}
.wx-compact .wx-facts{margin-top:8px}.wx-compact .wx-meta{margin-top:8px}
/* the next days */
.wx-outlook{margin-top:18px}
.wx-outlook h3{font:600 14px/1.3 Poppins,Inter,sans-serif;margin:0 0 8px}
.wx-outlook ul{list-style:none;margin:0;padding:0;border:1px solid var(--line,#e2ecee);border-radius:14px;overflow:hidden;background:#fff}
.wx-outlook li{display:grid;grid-template-columns:1.2fr 1fr auto;gap:10px;padding:12px 16px;border-top:1px solid var(--line,#e2ecee);align-items:center}
.wx-outlook li:first-child{border-top:0}
.wx-od{font-weight:600}.wx-oc{color:#4a5b70}.wx-ot{text-align:end;white-space:nowrap}
@media (max-width:520px){
  .wx-body{padding:18px 18px 16px}.wx-temp{font-size:54px}.wx-compact .wx-temp{font-size:40px}
  .wx-sun{width:140px;height:140px;top:-30px;inset-inline-end:-30px}.wx-moon{width:48px;height:48px;top:16px;inset-inline-end:18px}
  .wx-outlook li{grid-template-columns:1fr auto}.wx-oc{grid-column:1/-1;order:3}
}
/* reduced motion: everything stands still, the picture stays */
@media (prefers-reduced-motion:reduce){
  .wx *,.wx *::before,.wx *::after{animation:none!important;transition:none!important}
  .wx-rain>i{top:34%}.wx-rain>i:nth-child(even){top:58%}.wx-snow>i{top:30%}.wx-snow>i:nth-child(even){top:62%}.wx-flash{display:none}
}