/* 99-feedback.css — het ronde knopje rechtsonder en zijn paneel (inc/tb-feedback.php, 2026-10-12).
 *
 * Boven de pagina (z-index 90), onder de mobiele lade en de fotolightbox (100000): die dekken hem af.
 * `[hidden]` staat er expliciet, met meer gewicht dan de display-regels: `hidden` alleen verliest van
 * `display:flex` (hidden-attribuut-valkuil). Elke <button> krijgt 48 px hoogte uit 20-components.css; hier
 * dus overal een eigen maat. */

.tb-fb{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:90;
  font-family:var(--tb-sans);
}

.tb-fb .tb-fb-knop{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;min-height:0;padding:0;margin:0;
  border:0;border-radius:var(--tb-r-pill);
  background:var(--tb-action);color:#fff;
  box-shadow:var(--tb-lift);cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.tb-fb .tb-fb-knop:hover{background:var(--tb-action-hover);transform:translateY(-1px);}
.tb-fb .tb-fb-knop:focus-visible{outline:3px solid var(--tb-accent-line);outline-offset:3px;}
.tb-fb.is-open .tb-fb-knop{background:var(--tb-ink);}

/* ---------------------------------------------------------------- paneel */

.tb-fb-paneel{
  position:absolute;right:0;bottom:64px;
  width:360px;max-height:calc(100vh - 120px);overflow:auto;
  padding:20px 20px 18px;
  background:var(--tb-surface);color:var(--tb-body);
  border:1px solid var(--tb-line);border-radius:var(--tb-r-card);
  box-shadow:var(--tb-lift);
}
.tb-fb .tb-fb-paneel[hidden],
.tb-fb .tb-fb-formulier[hidden],
.tb-fb .tb-fb-bedankt[hidden]{display:none;}

.tb-fb-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.tb-fb .tb-fb-titel{margin:0;font:600 19px/1.25 var(--tb-serif);color:var(--tb-ink);}
.tb-fb .tb-fb-dicht{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;min-height:0;padding:0;margin:-4px -6px 0 0;
  border:0;border-radius:var(--tb-r-pill);background:transparent;color:var(--tb-muted);cursor:pointer;
}
.tb-fb .tb-fb-dicht:hover{background:var(--tb-tint);color:var(--tb-ink);}

.tb-fb-formulier{display:flex;flex-direction:column;}
.tb-fb .tb-fb-label{display:block;margin:0 0 6px;padding:0;font:600 14px/1.3 var(--tb-sans);color:var(--tb-ink);}
.tb-fb-optie{font-weight:400;color:var(--tb-soft);}

.tb-fb-soorten{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;border:0;min-width:0;}
.tb-fb-soort{position:relative;cursor:pointer;}
.tb-fb-soort input{position:absolute;opacity:0;width:1px;height:1px;}
.tb-fb-soort span{
  display:inline-block;padding:7px 12px;
  border:1px solid var(--tb-border);border-radius:var(--tb-r-pill);
  font:500 13.5px/1.2 var(--tb-sans);color:var(--tb-body);background:var(--tb-surface);
}
.tb-fb-soort:hover span{border-color:var(--tb-border-strong);}
.tb-fb-soort input:checked + span{border-color:var(--tb-ink);background:var(--tb-ink);color:#fff;}
.tb-fb-soort input:focus-visible + span{outline:3px solid var(--tb-accent-line);outline-offset:2px;}

.tb-fb textarea,
.tb-fb input[type="email"]{
  width:100%;box-sizing:border-box;margin:0 0 14px;padding:10px 12px;
  border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);
  background:var(--tb-surface);color:var(--tb-ink);font:400 16px/1.45 var(--tb-sans);
}
.tb-fb textarea{height:auto;min-height:104px;resize:vertical;}
.tb-fb input[type="email"]{height:var(--tb-h-ctrl-sm);}
.tb-fb textarea::placeholder{color:var(--tb-soft);}

/* Honingpot: buiten beeld, niet `display:none` (sommige bots slaan verborgen velden over). */
.tb-fb-website{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.tb-fb-controle:not(:empty){margin:0 0 10px;min-height:65px;}
.tb-fb .tb-fb-status{margin:0 0 10px;font-size:14px;line-height:1.4;color:var(--tb-muted);}
.tb-fb .tb-fb-status:empty{display:none;}
.tb-fb .tb-fb-status.is-fout{color:var(--tb-bad-ink);}

.tb-fb .tb-fb-verstuur,
.tb-fb .tb-fb-nog{
  width:100%;height:var(--tb-h-ctrl);min-height:0;margin:0;padding:0 18px;
  border:0;border-radius:var(--tb-r-ctrl);cursor:pointer;
  font:700 14.5px/1 var(--tb-sans);
}
.tb-fb .tb-fb-verstuur{background:var(--tb-action);color:#fff;}
.tb-fb .tb-fb-verstuur:hover{background:var(--tb-action-hover);}
.tb-fb .tb-fb-verstuur:disabled{opacity:.6;cursor:default;}

.tb-fb .tb-fb-bedankt-kop{margin:0 0 6px;font:600 17px/1.3 var(--tb-serif);color:var(--tb-ink);}
.tb-fb .tb-fb-bedankt-tekst{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--tb-body);}
.tb-fb .tb-fb-nog{background:var(--tb-surface);color:var(--tb-ink);border:1px solid var(--tb-border);}
.tb-fb .tb-fb-nog:hover{border-color:var(--tb-border-strong);}

/* --------------------------------------------------------------- telefoon */

@media (max-width:600px){
  .tb-fb{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));}
  .tb-fb .tb-fb-knop{width:48px;height:48px;}
  /* Een vel over de volle breedte, met 16 px aan elke kant. */
  .tb-fb-paneel{
    position:fixed;left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));
    width:auto;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);
  }
}

@media print{ .tb-fb{display:none;} }
@media (prefers-reduced-motion:reduce){ .tb-fb .tb-fb-knop{transition:none;} }