/* Feedbackwidget voor de testversie. Alles onder .bfr-, losgekoppeld van de paginastijl. */
.bfr, .bfr * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: normal; text-transform: none; }
.bfr-launch { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; display: inline-flex; align-items: center; gap: 10px; background: #0F3D24; color: #fff; border: 0; border-radius: 999px; padding: 14px 20px 14px 16px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.45), 0 0 0 2px rgba(255,255,255,0.9); }
.bfr-launch:hover { background: #135030; }
.bfr-launch svg { width: 20px; height: 20px; }
.bfr-launch b { background: #7CD14A; color: #0B2A18; border-radius: 999px; min-width: 24px; height: 24px; display: inline-grid; place-items: center; font-size: 13px; padding: 0 7px; }
.bfr-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; z-index: 2147483001; background: #fff; color: #17201B; box-shadow: -20px 0 50px -20px rgba(0,0,0,0.4); display: flex; flex-direction: column; transform: translateX(105%); transition: transform 280ms ease; }
.bfr-panel.open { transform: none; }
.bfr-head { padding: 18px 20px 14px; border-bottom: 1px solid #E3E8E4; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: #F4F7F4; }
.bfr-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: #0F3D24; }
.bfr-head p { margin: 4px 0 0; font-size: 13px; color: #3E4A43; line-height: 1.45; }
.bfr-x { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #17201B; padding: 0 4px; }
.bfr-body { padding: 16px 20px 20px; overflow: auto; flex: 1; }
.bfr-lbl { display: block; font-size: 13px; font-weight: 700; color: #17201B; margin: 0 0 6px; }
.bfr-in, .bfr-ta { width: 100%; border: 1px solid #C9D3CC; border-radius: 10px; padding: 11px 12px; font-size: 15px; color: #17201B; background: #fff; }
.bfr-in:focus, .bfr-ta:focus { outline: 2px solid #2E7D32; outline-offset: 1px; border-color: #2E7D32; }
.bfr-ta { min-height: 92px; resize: vertical; line-height: 1.45; }
.bfr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.bfr-btn.pri { background: #1D5E2E; color: #fff; }
.bfr-btn.pri:hover { background: #174C25; }
.bfr-btn.sec { background: #EAF0EB; color: #17201B; }
.bfr-btn:disabled { opacity: 0.6; cursor: default; }
.bfr-row { display: flex; gap: 8px; margin-top: 10px; }
.bfr-row .bfr-btn { flex: 1; }
.bfr-pick { width: 100%; margin: 14px 0 6px; padding: 14px 16px; font-size: 15px; }
.bfr-hint { font-size: 13px; color: #3E4A43; line-height: 1.45; margin: 0 0 14px; }
.bfr-sep { height: 1px; background: #E3E8E4; margin: 18px 0; }
.bfr-tabs { display: flex; gap: 6px; margin-bottom: 12px; align-items: center; }
.bfr-tabs button { border: 1px solid #C9D3CC; background: #fff; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; color: #17201B; }
.bfr-tabs button[aria-pressed="true"] { background: #17201B; color: #fff; border-color: #17201B; }
.bfr-tabs label { margin-left: auto; font-size: 13px; color: #3E4A43; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bfr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bfr-item { border: 1px solid #E3E8E4; border-radius: 12px; padding: 12px 14px; cursor: pointer; background: #fff; }
.bfr-item:hover, .bfr-item.hl { border-color: #2E7D32; box-shadow: 0 0 0 2px rgba(46,125,50,0.15); }
.bfr-item.done { background: #F6F8F6; }
.bfr-item.done .bfr-txt { color: #4A5650; text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.25); }
.bfr-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3E4A43; }
.bfr-meta b { color: #17201B; }
.bfr-num { width: 24px; height: 24px; border-radius: 50%; background: #1D5E2E; color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.bfr-num.gen { background: #5B6660; }
.bfr-txt { font-size: 14px; line-height: 1.5; margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; color: #17201B; }
.bfr-acts { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; }
.bfr-acts label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: #17201B; }
.bfr-acts button { border: 0; background: none; color: #A11D1D; font-size: 13px; cursor: pointer; padding: 0; font-weight: 600; }
.bfr-empty { font-size: 14px; color: #3E4A43; text-align: center; padding: 20px 0; }
.bfr-foot { padding: 12px 20px; border-top: 1px solid #E3E8E4; font-size: 13px; }
.bfr-foot a { color: #1D5E2E; font-weight: 700; }
.bfr-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 2147482000; }
.bfr-pin { position: absolute; width: 30px; height: 30px; margin: -30px 0 0 -4px; border-radius: 50% 50% 50% 4px; background: #1D5E2E; color: #fff; border: 2px solid #fff; font: 800 13px/26px -apple-system, Arial, sans-serif; text-align: center; cursor: pointer; box-shadow: 0 6px 16px -4px rgba(0,0,0,0.5); transition: transform 150ms ease; padding: 0; }
.bfr-pin:hover, .bfr-pin.hl { transform: scale(1.18); background: #0F3D24; }
.bfr-pin.done { background: #7A857F; }
.bfr-hidepins .bfr-pin { display: none; }
.bfr-picking, .bfr-picking * { cursor: crosshair !important; }
.bfr-banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2147483002; background: #17201B; color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5); display: none; max-width: calc(100vw - 32px); text-align: center; }
.bfr-picking .bfr-banner { display: block; }
.bfr-hover { position: absolute; pointer-events: none; outline: 2px dashed #2E7D32; outline-offset: 2px; background: rgba(46,125,50,0.06); z-index: 2147481999; border-radius: 6px; display: none; }
.bfr-picking .bfr-hover { display: block; }
.bfr-pop { position: fixed; z-index: 2147483003; width: 320px; max-width: calc(100vw - 24px); background: #fff; color: #17201B; border-radius: 14px; padding: 14px; box-shadow: 0 24px 60px -16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.06); display: none; }
.bfr-pop.open { display: block; }
.bfr-pop h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.bfr-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #17201B; color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 14px; z-index: 2147483004; opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.bfr-toast.on { opacity: 1; }
@media (max-width: 560px) {
  .bfr-panel { width: 100vw; top: auto; height: 82vh; border-radius: 18px 18px 0 0; transform: translateY(105%); }
  .bfr-launch { right: 14px; bottom: 14px; padding: 12px 16px 12px 14px; }
}