/* Bovenin: er staat een nieuwe versie klaar (static/pwa.js). */
.pwa-update{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:50%;z-index:130;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;width:min(560px,calc(100vw - 24px));padding:8px 8px 8px 12px;
  border:3px solid #1a1a22;border-radius:18px;background:#fffdf7;color:#1a1a22;box-shadow:4px 4px 0 #000;
  font:700 .92rem/1.3 "Nunito",ui-rounded,system-ui,sans-serif;animation:pwa-in .35s cubic-bezier(.2,.9,.25,1) both}
.pwa-update img{flex:none;width:34px;height:auto}
.pwa-update span{flex:1;min-width:0}
.pwa-update b{font-weight:900}
.pwa-update-nu{flex:none;min-height:40px;padding:0 16px;border:2px solid #1a1a22;border-radius:999px;background:#43a852;color:#1a1a22;
  font:900 .9rem "Nunito",ui-rounded,system-ui,sans-serif;cursor:pointer}
.pwa-update-nu:disabled{opacity:.6;cursor:wait}
.pwa-update-weg{flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#efeee7;color:#1a1a22;font-weight:900;cursor:pointer}
.pwa-update button:focus-visible{outline:2px solid #e8408f;outline-offset:2px}
@keyframes pwa-in{from{opacity:0;transform:translate(-50%,-16px)}}
@media (prefers-reduced-motion:reduce){.pwa-update{animation:none}}

/* Meldingen in Instellingen (components/Nav.tsx, [data-push]) */
.nav-push{margin-top:4px;padding-top:4px;border-top:1px solid rgb(255 255 255 / .1)}
.nav-push .nav-setting-copy small{color:#A9A7B8;font-size:.8rem;font-weight:600}
.nav-push .nav-push-sub{min-height:44px;margin-top:4px;padding-left:12px}
.nav-push-icoon{width:30px;height:30px;flex:none;box-sizing:border-box;padding:4px;border-radius:10px;background:#2a2a34}
.nav-push-uitleg{margin:12px 0 0;color:#C9C6D6;font-size:.88rem}

/* "Mogen we je kwaken?" (vraagKwaken in pwa.js): donkere variant van de bottom sheet uit nav.css, met de
   kikker en de wiebelende bel uit de meldingen-assets en een paarse cirkel achter de knoppen. */
.kwaak-sheet{overflow:hidden;isolation:isolate;padding-top:28px;text-align:center;background:#1a1a22;color:#fff;
  font-family:"Montserrat","Nunito",system-ui,sans-serif;border:1px solid #2c2c36}
.kwaak-sheet::before{content:"";position:absolute;z-index:-1;left:-40%;bottom:-55%;width:120%;aspect-ratio:1;border-radius:50%;background:rgb(155 93 229 / .35)}
.kwaak-vonken{position:absolute;inset:0 0 auto;width:100%;height:260px;z-index:-1}
.kwaak-art{position:relative;width:200px;height:190px;margin:0 auto 10px}
.kwaak-kikker{position:absolute;left:-20px;top:20px;width:170px;height:170px}
.kwaak-bel{position:absolute;right:-40px;top:0;width:130px;height:130px;transform-origin:50% 20%;animation:kwaak-wiebel 1.8s ease-in-out infinite}
.kwaak-badge{position:absolute;right:-22px;top:14px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;
  background:#e8408f;border:2px solid #1a1a22;color:#1a1a22;font-size:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.kwaak-sheet h2{margin:0;font:900 clamp(1.9rem,8vw,2.25rem)/1.02 "Montserrat",sans-serif;letter-spacing:-.02em}
.kwaak-sheet p{margin:12px auto 0;max-width:330px;color:#c9c9d2;font-size:1rem;font-weight:600;line-height:1.45}
.kwaak-knoppen{display:grid;gap:12px;margin-top:26px}
.kwaak-knoppen button{height:56px;border-radius:28px;font:900 1.05rem "Montserrat",sans-serif;cursor:pointer}
.kwaak-ja{border:2px solid #e8408f;background:#e8408f;color:#1a1a22}
.kwaak-ja:hover{background:#f0559d}
.kwaak-later{border:2px solid #5a5a66;background:transparent;color:#fff}
.kwaak-sheet button:focus-visible{outline:3px solid #c7d86b;outline-offset:3px}
@keyframes kwaak-wiebel{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}20%{transform:rotate(-14deg)}30%{transform:rotate(10deg)}40%{transform:rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.kwaak-bel{animation:none}}