/* Agenda-weer — gedeelde stijlen voor de dag-hero (Concept B) en de weer-kop op de
   afspraak-hover-tooltip (Concept F). Geanimeerde scènes zijn pure CSS (geen libraries,
   geen images). Klassen ge-prefixed met wx- om botsing met agenda-stijlen te voorkomen. */

/* ═══════════ Geanimeerde luchten ═══════════ */
.wx-scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg,#5b8fd6 0%, #9cc2ee 100%); }
.wx-scene.wx-sunny   { background: linear-gradient(180deg,#3d7fd6 0%, #7fb4ec 60%, #cfe6ff 100%); }
.wx-scene.wx-partly  { background: linear-gradient(180deg,#5288cf 0%, #9ec4ef 100%); }
.wx-scene.wx-cloudy  { background: linear-gradient(180deg,#6b7a8f 0%, #97a6ba 100%); }
.wx-scene.wx-fog     { background: linear-gradient(180deg,#8a93a0 0%, #b4bcc7 100%); }
.wx-scene.wx-rain    { background: linear-gradient(180deg,#3f5772 0%, #6c829e 100%); }
.wx-scene.wx-snow    { background: linear-gradient(180deg,#5d7fb0 0%, #9fc0e6 100%); }
.wx-scene.wx-thunder { background: linear-gradient(180deg,#2c3346 0%, #515c75 100%); }

.wx-sun { position: absolute; top: 12px; right: 18px; width: 26px; height: 26px; border-radius: 50%;
          background: radial-gradient(circle,#fff6cf 0%,#ffd451 55%,#ffb52e 100%);
          box-shadow: 0 0 14px 4px rgba(255,206,84,0.7); animation: wx-sun-pulse 3.5s ease-in-out infinite; }
.wx-sun::before { content: ""; position: absolute; inset: -9px; border-radius: 50%;
          background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,214,110,0.5) 8% 12%, transparent 12% 25%, rgba(255,214,110,0.5) 25% 29%, transparent 29% 50%, rgba(255,214,110,0.5) 50% 54%, transparent 54% 75%, rgba(255,214,110,0.5) 75% 79%, transparent 79% 100%);
          animation: wx-spin 14s linear infinite; }
@keyframes wx-sun-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes wx-spin { to { transform: rotate(360deg); } }

.wx-cloud { position: absolute; background: #fff; border-radius: 50px; opacity: 0.92; }
.wx-cloud::before, .wx-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.wx-cloud.wx-c1 { width: 42px; height: 14px; top: 30px; left: -46px; animation: wx-drift 14s linear infinite; }
.wx-cloud.wx-c1::before { width: 18px; height: 18px; top: -9px; left: 7px; }
.wx-cloud.wx-c1::after  { width: 24px; height: 24px; top: -13px; left: 18px; }
.wx-cloud.wx-c2 { width: 30px; height: 11px; top: 13px; left: -40px; opacity: 0.72; animation: wx-drift 20s linear infinite; animation-delay: -7s; }
.wx-cloud.wx-c2::before { width: 13px; height: 13px; top: -7px; left: 5px; }
.wx-cloud.wx-c2::after  { width: 17px; height: 17px; top: -9px; left: 13px; }
.wx-scene.wx-cloudy .wx-cloud, .wx-scene.wx-rain .wx-cloud, .wx-scene.wx-thunder .wx-cloud, .wx-scene.wx-snow .wx-cloud,
.wx-scene.wx-cloudy .wx-cloud::before, .wx-scene.wx-cloudy .wx-cloud::after,
.wx-scene.wx-rain .wx-cloud::before, .wx-scene.wx-rain .wx-cloud::after,
.wx-scene.wx-snow .wx-cloud::before, .wx-scene.wx-snow .wx-cloud::after { background: #e3e8ef; }
.wx-scene.wx-thunder .wx-cloud, .wx-scene.wx-thunder .wx-cloud::before, .wx-scene.wx-thunder .wx-cloud::after { background: #9aa3b6; }
@keyframes wx-drift { from { transform: translateX(0); } to { transform: translateX(360px); } }

.wx-rain-layer, .wx-snow-layer { position: absolute; inset: 0; overflow: hidden; }
.wx-drop { position: absolute; top: -12px; width: 1.5px; height: 11px; border-radius: 2px; background: linear-gradient(transparent,#cfe6ff); animation: wx-fall linear infinite; }
@keyframes wx-fall { from { transform: translateY(-12px); } to { transform: translateY(260px); } }
.wx-flake { position: absolute; top: -10px; color: #fff; line-height: 1; animation: wx-snowfall linear infinite; text-shadow: 0 0 3px rgba(255,255,255,0.6); }
@keyframes wx-snowfall { 0% { transform: translateY(-10px) translateX(0) rotate(0); } 100% { transform: translateY(270px) translateX(16px) rotate(260deg); } }
.wx-fog-band { position: absolute; left: -30%; width: 160%; height: 10px; border-radius: 50px; background: rgba(255,255,255,0.45); filter: blur(3px); animation: wx-fogdrift linear infinite; }
@keyframes wx-fogdrift { 0% { transform: translateX(-12%); } 50% { transform: translateX(12%); } 100% { transform: translateX(-12%); } }
.wx-flash { position: absolute; inset: 0; background: rgba(255,255,255,0.85); opacity: 0; animation: wx-flash 5s steps(1) infinite; }
@keyframes wx-flash { 0%,7%,12%,100% { opacity: 0; } 9% { opacity: 0.7; } 10% { opacity: 0.15; } 11% { opacity: 0.55; } }
.wx-bolt { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-size: 18px; opacity: 0; animation: wx-boltshow 5s steps(1) infinite; }
@keyframes wx-boltshow { 0%,8% { opacity: 0; } 9% { opacity: 1; } 10%,100% { opacity: 0; } }

/* ═══════════ Concept B — dag-hero ═══════════ */
.wx-hero { display: grid; grid-template-columns: 280px 1fr; border: 1px solid rgba(255,255,255,0.08);
           border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.15); }
@media (max-width: 740px) { .wx-hero { grid-template-columns: 1fr; } }
.wx-hero-left { position: relative; min-height: 184px; overflow: hidden; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.wx-hero-top, .wx-hero-big { position: relative; z-index: 2; }
.wx-hero-top .wx-day { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.wx-hero-top .wx-date { font-size: 1.1rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.wx-bigtemp { font-size: 2.9rem; font-weight: 700; color: #fff; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.45); }
.wx-desc { font-size: 0.9rem; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.55); margin-top: 3px; }
.wx-range { font-size: 0.74rem; color: rgba(255,255,255,0.85); text-shadow: 0 1px 2px rgba(0,0,0,0.6); margin-top: 4px; }
.wx-hero-right { padding: 18px; background: rgba(0,0,0,0.18); }
.wx-stats { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.wx-stat .wx-k { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.4); }
.wx-stat .wx-v { font-size: 0.98rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.wx-hours-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.wx-hours { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.wx-hour { flex: 0 0 auto; width: 50px; text-align: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; padding: 8px 4px; }
.wx-hour .wx-hh { font-size: 0.6rem; color: rgba(255,255,255,0.4); font-weight: 600; }
.wx-hour .wx-hi { font-size: 1rem; margin: 3px 0; line-height: 1; }
.wx-hour .wx-ht { font-size: 0.74rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.wx-hour .wx-hp { font-size: 0.54rem; color: #7fc4ff; font-weight: 600; min-height: 0.7em; }
.wx-hour.wx-now { box-shadow: inset 0 0 0 1px rgba(245,166,35,0.5); background: rgba(245,166,35,0.08); }
.wx-ico { line-height: 1; }

/* ═══════════ Week/team-koppen — statische pill rechtsboven (dag-data, vertrekpunt) ═══════════ */
.wx-headpill { position: absolute; top: 5px; right: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 3px;
               padding: 1px 7px 1px 5px; border-radius: 999px; background: rgba(255,255,255,0.06);
               border: 1px solid rgba(255,255,255,0.1); pointer-events: none; }
.wx-headpill span { font-size: 0.66rem; font-weight: 700; color: rgba(255,255,255,0.82); letter-spacing: 0; text-transform: none; }
.wx-headpill .wx-headpill-ico { font-size: 12px; line-height: 1; }

/* ═══════════ Dag-view — altijd-zichtbaar weer-chipje rechts op de kaart ═══════════ */
.wx-aptchip { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
              gap: 1px; min-width: 64px; padding: 8px 10px; border-radius: 10px;
              background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.wx-aptchip-ico { font-size: 20px; line-height: 1; }
.wx-aptchip-t { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.92); line-height: 1.1; }
.wx-aptchip-c { font-size: 0.6rem; color: rgba(255,255,255,0.4); text-align: center; }

/* ═══════════ Concept F — weer-kop op de afspraak-tooltip ═══════════ */
.wx-tt-head { position: relative; height: 74px; overflow: hidden; padding: 9px 14px;
              display: flex; align-items: center; justify-content: space-between;
              border-bottom: 1px solid rgba(255,255,255,0.12); margin: -10px -14px 8px;
              border-radius: 10px 10px 0 0; }
.wx-tt-left { position: relative; z-index: 2; }
.wx-tt-left .wx-c { font-size: 0.7rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); display: flex; align-items: center; gap: 4px; }
.wx-tt-left .wx-d { font-size: 0.64rem; color: rgba(255,255,255,0.88); text-shadow: 0 1px 2px rgba(0,0,0,0.6); margin-top: 2px; }
.wx-tt-left .wx-p { font-size: 0.6rem; color: #bfe3ff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); margin-top: 2px; }
.wx-tt-right { position: relative; z-index: 2; text-align: right; display: flex; align-items: center; gap: 6px; }
.wx-tt-right .wx-ico { font-size: 1.5rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.wx-tt-right .wx-t { font-size: 1.1rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }