/* Blauw Wit Ballenjacht */
.bw-bal{position:absolute;z-index:50;width:36px;height:36px;margin:0!important;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;cursor:pointer;transform:translate(-50%,-50%);animation:bw-bal-wiebel 4s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.bw-bal img{display:block;width:36px;height:36px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));pointer-events:none}
.bw-bal:hover,.bw-bal:focus-visible{transform:translate(-50%,-50%) scale(1.15);outline:none}
.bw-bal:focus-visible img{filter:drop-shadow(0 0 0 3px #fff) drop-shadow(0 0 4px #006eaa)}
.bw-bal.is-gevonden,.bw-bal.is-stuiter.is-gevonden{animation:bw-bal-weg .65s cubic-bezier(.22,1,.36,1) forwards}
.bw-bal-toon{outline:3px dashed #ee9e1e!important;outline-offset:4px}
.bw-bal-nr{position:absolute;top:-10px;right:-12px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;font:700 12px/20px Barlow,Arial,sans-serif;color:#fff;background:#ee9e1e}
@keyframes bw-bal-wiebel{0%,86%,100%{transform:translate(-50%,-50%) rotate(0)}90%{transform:translate(-50%,-58%) rotate(-12deg)}94%{transform:translate(-50%,-50%) rotate(8deg)}}
/* Stuiteren zodra een bal in beeld komt (daarna weer wiebelen) */
.bw-bal.is-stuiter{animation:bw-bal-stuiter 1.3s cubic-bezier(.22,1,.36,1) 1,bw-bal-wiebel 4s ease-in-out 1.3s infinite}
@keyframes bw-bal-stuiter{
	0%{transform:translate(-50%,-50%) translateY(-90px) scale(1,1)}
	28%{transform:translate(-50%,-50%) translateY(0) scale(1.18,.82);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
	44%{transform:translate(-50%,-50%) translateY(-36px) scale(.95,1.05);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
	60%{transform:translate(-50%,-50%) translateY(0) scale(1.1,.9)}
	72%{transform:translate(-50%,-50%) translateY(-12px) scale(1,1)}
	84%{transform:translate(-50%,-50%) translateY(0) scale(1.04,.96)}
	100%{transform:translate(-50%,-50%) translateY(0) scale(1,1)}
}
@keyframes bw-bal-weg{to{transform:translate(-50%,-160%) scale(1.6);opacity:0}}

.bw-bj-teller{box-sizing:border-box;position:fixed;left:16px;bottom:18px;z-index:9997;display:inline-flex;align-items:center;gap:8px;margin:0!important;padding:8px 14px 8px 8px;border:0;border-radius:999px;font:700 14px/1 Barlow,Arial,sans-serif;letter-spacing:.02em;color:#003d71!important;background:#fff!important;box-shadow:0 8px 24px rgba(0,61,113,.22)!important;text-transform:none!important;cursor:pointer}
.bw-bj-teller img{width:24px;height:24px}
body .bw-bj-teller,body .bw-bj-teller:hover,body .bw-bj-teller:focus{color:#003d71!important;background:#fff!important;text-transform:none!important;letter-spacing:.02em!important}
body .bw-bj-paneel .bw-bj-sluit{color:#003d71!important;background:#eff6fa!important}
body .bw-bal,body .bw-bal:hover,body .bw-bal:focus{background:none!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
.bw-bj-teller .bw-bj-telling{padding:4px 8px;border-radius:999px;color:#fff!important;background:#006eaa}
.bw-bj-teller.is-compleet .bw-bj-telling{background:#ee9e1e}
.bw-bj-teller:hover{box-shadow:0 10px 28px rgba(0,61,113,.3)}

.bw-bj-toast{position:fixed;left:50%;bottom:80px;z-index:9999;display:flex;align-items:center;gap:12px;max-width:min(420px,calc(100% - 32px));padding:12px 16px;border-radius:12px;font:500 15px/1.4 Barlow,Arial,sans-serif;color:#fff;background:#003d71;box-shadow:0 20px 44px rgba(20,32,43,.25);opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.bw-bj-toast.is-zichtbaar{opacity:1;transform:translate(-50%,0)}
.bw-bj-toast img{flex:0 0 auto;background:#fff;border-radius:50%}
.bw-bj-letter{display:inline-block;min-width:26px;padding:0 6px;border-radius:6px;font-weight:800;text-align:center;color:#003d71;background:#fff}

.bw-bj-paneel{box-sizing:border-box;width:min(520px,calc(100% - 24px));max-height:calc(100% - 24px);padding:28px 28px 22px;border:0;border-radius:16px;font:400 16px/1.55 Barlow,Arial,sans-serif;color:#24323d;background:#fff;box-shadow:0 20px 44px rgba(20,32,43,.25);overflow:auto}
.bw-bj-paneel::backdrop{background:rgba(0,61,113,.55)}
.bw-bj-paneel h2{margin:4px 0 10px;font:700 24px/1.2 Barlow,Arial,sans-serif;color:#003d71}
.bw-bj-paneel p{margin:0 0 12px}
.bw-bj-kicker{font:700 12px/1 Barlow,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#006eaa}
.bw-bj-klein{font-size:14px;color:#5b6b78}
.bw-bj-paneel .bw-bj-sluit{position:absolute;top:12px;right:12px;width:36px;height:36px;margin:0!important;padding:0;border:0;border-radius:50%;font-size:24px;line-height:36px;color:#003d71;background:#eff6fa;box-shadow:none;cursor:pointer}
.bw-bj-vakken{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 18px}
.bw-bj-vak{display:inline-flex;width:34px;height:40px;align-items:center;justify-content:center;border:2px dashed #bfdbea;border-radius:6px;font:800 20px/1 Barlow,Arial,sans-serif;color:#003d71;background:#eff6fa}
.bw-bj-vak.is-vol{border-style:solid;border-color:#006eaa;background:#fff}
.bw-bj-veld{margin:0 0 12px}
.bw-bj-veld label{display:block;margin:0 0 4px;font-weight:600;font-size:14px;color:#003d71}
.bw-bj-paneel .bw-bj-veld input{display:block;width:100%!important;max-width:none!important;box-sizing:border-box;height:44px;margin:0!important;padding:0 12px;border:1px solid #cdd8e1;border-radius:6px;font:inherit;color:#14202b;background:#fff;box-shadow:none}
.bw-bj-paneel .bw-bj-veld input:focus{border-color:#006eaa;outline:2px solid rgba(0,110,170,.2)}
#bw-bj-antwoord{text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.bw-bj-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.bw-bj-check{display:flex;gap:8px;align-items:flex-start;margin:4px 0 16px;font-size:14px;font-weight:400;line-height:1.4}
.bw-bj-check input{flex:0 0 auto;width:auto!important;height:auto!important;margin:3px 0 0!important}
.bw-bj-paneel .bw-bj-verstuur{display:block;width:100%!important;box-sizing:border-box;margin:0!important;padding:14px 20px;border:0;border-radius:6px;font:700 15px/1 Barlow,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#006eaa;box-shadow:none;cursor:pointer}
.bw-bj-paneel .bw-bj-verstuur:hover{background:#003d71}
.bw-bj-paneel .bw-bj-verstuur:disabled{opacity:.6;cursor:wait}
.bw-bj-uitkomst{margin:12px 0 0!important;font-size:14px}
.bw-bj-uitkomst.is-goed{color:#1a7f37;font-weight:600}
.bw-bj-uitkomst.is-fout{color:#b32d2e;font-weight:600}

@media (max-width:767px){
	.bw-bj-teller{left:12px;bottom:14px;padding:7px 12px 7px 7px;font-size:13px}
	.bw-bj-teller .bw-bj-naam{display:none}
	.bw-bj-paneel{padding:24px 18px 18px}
	.bw-bj-vak{width:28px;height:34px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){
	.bw-bal,.bw-bal.is-stuiter{animation:none}
	.bw-bal.is-gevonden,.bw-bal.is-stuiter.is-gevonden{animation:none;opacity:0}
	.bw-bj-toast{transition:none}
}
