/* ============================================================
   feedback-widget.css (v014.11.453)
   De feedbackknop op de website: een zwevende knop rechtsonder en een paneel van 360 px (op de telefoon een
   paneel over de volle breedte onderaan). Staat op elk thema, dus alles zit onder .hhfb met eigen variabelen.

   Sinds v014.11.463 volgt hij het thema van de site: het accent komt uit dezelfde keten als de rest van de gedeelde
   opmaak (portal-shared.css: de portalbasis noemt hem --local-brand, de dorpsthema's --fr-link, lodewijk --accent-2),
   en de donkere stand hangt aan de donkere stand van het thema, niet aan die van het apparaat. Een licht thema krijgt
   dus nooit een donkere knop. In het beheer (voorbeeld) volgt hij de dag- en nachtstand van het beheer.
   ============================================================ */

.hhfb {
  --hhfb-accent: var(--local-brand, var(--fr-link, var(--accent-2, #4f46e5)));
  --hhfb-accent-tekst: #ffffff;
  --hhfb-vlak: #ffffff;
  --hhfb-achter: #f6f6fc;
  --hhfb-tekst: #1b1d24;
  --hhfb-zacht: #5f6577;
  --hhfb-rand: rgba(126, 128, 165, .32);
  --hhfb-rood: #b42318;
  --hhfb-rood-vlak: #fdeceb;
  --hhfb-groen: #16803c;
  --hhfb-groen-vlak: #dcf2e5;
  --hhfb-geel-vlak: #fff9e9;
  --hhfb-geel-rand: #f1e3ba;
  --hhfb-geel-tekst: #8a5a00;
  --hhfb-accent-vlak: color-mix(in srgb, var(--hhfb-accent) 12%, #ffffff);
  --hhfb-accent-diep: color-mix(in srgb, var(--hhfb-accent) 78%, #000000);
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--hhfb-tekst);
}

/* Donker als het thema donker staat: de dorpsthema's en de portalbasis (data-thema="donker"), lodewijk en
   buurtpreventie (data-resolved-theme="dark"), hogerheide (data-theme="nacht"), lodewijkhosting (data-theme="dark"),
   en het voorbeeld in het beheer in de nachtstand. Een donker thema maakt zijn accent licht; daarop leest donkere tekst. */
html[data-thema="donker"] .hhfb:not(.hhfb--voorbeeld),
html[data-resolved-theme="dark"] .hhfb:not(.hhfb--voorbeeld),
html[data-theme="dark"] .hhfb:not(.hhfb--voorbeeld),
html[data-theme="nacht"] .hhfb:not(.hhfb--voorbeeld),
html[data-admin-theme="night"] .hhfb {
  --hhfb-accent: var(--local-brand, var(--fr-link, var(--accent-2, #7c75f5)));
  --hhfb-accent-tekst: #12141c;
  --hhfb-vlak: #1b1e2b;
  --hhfb-achter: #12141c;
  --hhfb-tekst: #eceef6;
  --hhfb-zacht: #a2a7ba;
  --hhfb-rand: rgba(160, 165, 190, .24);
  --hhfb-rood: #f16a6a;
  --hhfb-rood-vlak: rgba(241, 106, 106, .14);
  --hhfb-groen: #4ade80;
  --hhfb-groen-vlak: rgba(74, 222, 128, .14);
  --hhfb-geel-vlak: rgba(229, 179, 78, .12);
  --hhfb-geel-rand: rgba(229, 179, 78, .35);
  --hhfb-geel-tekst: #e5b34e;
  --hhfb-accent-vlak: color-mix(in srgb, var(--hhfb-accent) 18%, transparent);
  --hhfb-accent-diep: color-mix(in srgb, var(--hhfb-accent) 55%, #ffffff);
}

/* Een thema op "automatisch" volgt het apparaat, en dan de knop ook: de dorpsthema's en de portalbasis
   (data-thema="auto"), en lodewijkhosting zonder eigen keuze (daar is donker de standaard). */
@media (prefers-color-scheme: dark) {
  html[data-thema="auto"] .hhfb:not(.hhfb--voorbeeld),
  html:not([data-theme]) body.lh-body .hhfb:not(.hhfb--voorbeeld) {
    --hhfb-accent: var(--local-brand, var(--fr-link, var(--accent-2, #7c75f5)));
    --hhfb-accent-tekst: #12141c;
    --hhfb-vlak: #1b1e2b;
    --hhfb-achter: #12141c;
    --hhfb-tekst: #eceef6;
    --hhfb-zacht: #a2a7ba;
    --hhfb-rand: rgba(160, 165, 190, .24);
    --hhfb-rood: #f16a6a;
    --hhfb-rood-vlak: rgba(241, 106, 106, .14);
    --hhfb-groen: #4ade80;
    --hhfb-groen-vlak: rgba(74, 222, 128, .14);
    --hhfb-geel-vlak: rgba(229, 179, 78, .12);
    --hhfb-geel-rand: rgba(229, 179, 78, .35);
    --hhfb-geel-tekst: #e5b34e;
    --hhfb-accent-vlak: color-mix(in srgb, var(--hhfb-accent) 18%, transparent);
    --hhfb-accent-diep: color-mix(in srgb, var(--hhfb-accent) 55%, #ffffff);
  }
}

.hhfb *,
.hhfb *::before,
.hhfb *::after {
  box-sizing: border-box;
}

.hhfb button,
.hhfb input,
.hhfb textarea {
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.hhfb .hhfb-icoon {
  display: inline-flex;
  flex: none;
  width: 1em;
  height: 1em;
}

.hhfb .hhfb-icoon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.hhfb .hhfb-knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--hhfb-accent);
  color: var(--hhfb-accent-tekst);
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(20, 16, 70, .28);
  cursor: pointer;
}

.hhfb .hhfb-knop:hover {
  background: var(--hhfb-accent-diep);
  color: var(--hhfb-accent-tekst);
}

.hhfb .hhfb-knop .hhfb-icoon {
  font-size: 18px;
}

.hhfb.is-open .hhfb-knop {
  display: none;
}

/* Boven de laatste regel van de voettekst (feedback-widget.js meet --hhfb-til, v014.11.466). */
.hhfb:not(.hhfb--voorbeeld) .hhfb-knop {
  transform: translateY(calc(-1 * var(--hhfb-til, 0px)));
  transition: transform .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hhfb:not(.hhfb--voorbeeld) .hhfb-knop {
    transition: none;
  }
}

.hhfb.is-vastleggen .hhfb-paneel,
.hhfb.is-vastleggen .hhfb-knop {
  visibility: hidden;
}

.hhfb .hhfb-knop:focus-visible,
.hhfb button:focus-visible,
.hhfb input:focus-visible,
.hhfb textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hhfb-accent) 55%, transparent);
  outline-offset: 2px;
}

.hhfb .hhfb-paneel {
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid var(--hhfb-rand);
  border-radius: 16px;
  background: var(--hhfb-vlak);
  box-shadow: 0 24px 60px -12px rgba(11, 16, 32, .35);
}

.hhfb .hhfb-paneel[hidden] {
  display: none;
}

.hhfb .hhfb-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--hhfb-rand);
}

.hhfb .hhfb-titel {
  flex: 1;
  font-size: 15px;
  font-weight: 800;
  outline: none;
}

.hhfb .hhfb-kopknop {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hhfb-rand);
  border-radius: 8px;
  background: var(--hhfb-vlak);
  color: var(--hhfb-zacht);
  cursor: pointer;
}

.hhfb .hhfb-kopknop:hover {
  color: var(--hhfb-accent);
  border-color: var(--hhfb-accent);
  background: var(--hhfb-vlak);
}

.hhfb .hhfb-kopknop[hidden] {
  display: none;
}

.hhfb .hhfb-inhoud {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
}

.hhfb .hhfb-intro {
  margin: 0;
  color: var(--hhfb-zacht);
}

.hhfb .hhfb-keuze {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--hhfb-rand);
  border-radius: 12px;
  background: var(--hhfb-vlak);
  text-align: left;
  cursor: pointer;
}

.hhfb .hhfb-keuze:hover {
  border-color: var(--hhfb-accent);
  background: var(--hhfb-vlak);
}

.hhfb .hhfb-keuze > .hhfb-icoon:first-child {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 11px;
  border-radius: 10px;
}

.hhfb .hhfb-keuze--fout > .hhfb-icoon:first-child {
  background: var(--hhfb-rood-vlak);
  color: var(--hhfb-rood);
}

.hhfb .hhfb-keuze--idee > .hhfb-icoon:first-child {
  background: var(--hhfb-accent-vlak);
  color: var(--hhfb-accent-diep);
}

.hhfb .hhfb-keuze--stem > .hhfb-icoon:first-child {
  background: var(--hhfb-groen-vlak);
  color: var(--hhfb-groen);
}

.hhfb .hhfb-keuze-tekst strong,
.hhfb .hhfb-keuze-tekst small {
  display: block;
}

.hhfb .hhfb-keuze-tekst small {
  color: var(--hhfb-zacht);
  font-size: 13px;
}

.hhfb .hhfb-keuze > .hhfb-icoon:last-child {
  color: var(--hhfb-zacht);
}

.hhfb .hhfb-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.hhfb .hhfb-veld {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.hhfb .hhfb-veld small {
  color: var(--hhfb-zacht);
  font-weight: 500;
}

.hhfb .hhfb-veld input,
.hhfb .hhfb-veld textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--hhfb-rand);
  border-radius: 10px;
  background: var(--hhfb-achter);
  font-size: 16px;
  font-weight: 400;
}

.hhfb .hhfb-veld textarea {
  min-height: 76px;
  resize: vertical;
}

.hhfb .hhfb-vergelijkbaar {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--hhfb-geel-rand);
  border-radius: 10px;
  background: var(--hhfb-geel-vlak);
}

.hhfb .hhfb-vergelijkbaar[hidden] {
  display: none;
}

.hhfb .hhfb-vergelijkbaar-kop {
  color: var(--hhfb-geel-tekst);
  font-size: 13px;
  font-weight: 700;
}

.hhfb .hhfb-vergelijkbaar-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--hhfb-vlak);
  font-size: 14px;
  font-weight: 650;
}

.hhfb .hhfb-ikook {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--hhfb-groen);
  border-radius: 999px;
  background: var(--hhfb-vlak);
  color: var(--hhfb-groen);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.hhfb .hhfb-ikook.is-aan,
.hhfb .hhfb-ikook:hover {
  background: var(--hhfb-groen-vlak);
  color: var(--hhfb-groen);
}

.hhfb .hhfb-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hhfb .hhfb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--hhfb-rand);
  border-radius: 999px;
  background: var(--hhfb-vlak);
  font-size: 13px;
  font-weight: 650;
}

.hhfb .hhfb-chip code {
  overflow: hidden;
  color: inherit;
  max-width: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hhfb .hhfb-chip--pad .hhfb-icoon:last-child {
  color: var(--hhfb-groen);
}

.hhfb .hhfb-chip--knop {
  cursor: pointer;
}

.hhfb .hhfb-chip--knop:hover {
  border-color: var(--hhfb-accent);
  background: var(--hhfb-vlak);
}

.hhfb .hhfb-chip--knop.is-aan {
  border-color: var(--hhfb-groen);
  background: var(--hhfb-groen-vlak);
  color: var(--hhfb-groen);
}

.hhfb .hhfb-schermvoorbeeld img {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--hhfb-rand);
  border-radius: 8px;
}

.hhfb .hhfb-schermvoorbeeld[hidden] {
  display: none;
}

.hhfb .hhfb-honing {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hhfb .hhfb-verstuur {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--hhfb-accent);
  color: var(--hhfb-accent-tekst);
  font-weight: 700;
  cursor: pointer;
}

.hhfb .hhfb-verstuur:hover {
  background: var(--hhfb-accent-diep);
  color: var(--hhfb-accent-tekst);
}

.hhfb .hhfb-verstuur:disabled {
  background: var(--hhfb-achter);
  color: var(--hhfb-zacht);
  cursor: not-allowed;
}

.hhfb .hhfb-verstuur--licht {
  border: 1px solid var(--hhfb-rand);
  background: var(--hhfb-vlak);
  color: var(--hhfb-tekst);
}

.hhfb .hhfb-verstuur--licht:hover {
  border-color: var(--hhfb-accent);
  background: var(--hhfb-vlak);
  color: var(--hhfb-accent-diep);
}

.hhfb .hhfb-fout {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--hhfb-rood-vlak);
  color: var(--hhfb-rood);
  font-size: 14px;
  font-weight: 650;
}

.hhfb .hhfb-fout[hidden] {
  display: none;
}

.hhfb .hhfb-bedankt {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 0;
  text-align: center;
}

.hhfb .hhfb-bedankt > .hhfb-icoon {
  width: 52px;
  height: 52px;
  padding: 14px;
  border-radius: 50%;
  background: var(--hhfb-groen-vlak);
  color: var(--hhfb-groen);
}

.hhfb .hhfb-bedankt strong {
  font-size: 17px;
}

.hhfb .hhfb-bedankt p {
  margin: 0;
  color: var(--hhfb-zacht);
}

.hhfb .hhfb-noot {
  color: var(--hhfb-zacht);
  font-size: 12px;
}

.hhfb .hhfb-tabs {
  display: flex;
  gap: 6px;
}

.hhfb .hhfb-tab {
  min-height: 34px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--hhfb-rand);
  border-radius: 999px;
  background: var(--hhfb-vlak);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.hhfb .hhfb-tab:hover {
  border-color: var(--hhfb-accent);
  background: var(--hhfb-vlak);
}

.hhfb .hhfb-tab.is-aan {
  border-color: var(--hhfb-accent);
  background: var(--hhfb-accent);
  color: var(--hhfb-accent-tekst);
}

.hhfb .hhfb-bord {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hhfb .hhfb-bordrij {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hhfb-rand);
}

.hhfb .hhfb-bordrij:last-child {
  border-bottom: 0;
}

.hhfb .hhfb-leeg {
  padding: 12px 0;
  color: var(--hhfb-zacht);
}

.hhfb .hhfb-stemmer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hhfb .hhfb-stemknop {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hhfb-rand);
  border-radius: 7px;
  background: var(--hhfb-vlak);
  color: var(--hhfb-zacht);
  cursor: pointer;
}

.hhfb .hhfb-stemknop:hover {
  border-color: var(--hhfb-accent);
  background: var(--hhfb-vlak);
  color: var(--hhfb-accent);
}

.hhfb .hhfb-stemknop--op.is-aan {
  border-color: var(--hhfb-groen);
  background: var(--hhfb-groen);
  color: #ffffff;
}

.hhfb .hhfb-stemknop--neer.is-aan {
  border-color: var(--hhfb-rood);
  background: var(--hhfb-rood);
  color: #ffffff;
}

.hhfb .hhfb-score {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.hhfb .hhfb-bordtekst {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hhfb .hhfb-bordtekst strong {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.hhfb .hhfb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hhfb .hhfb-pil {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--hhfb-achter);
  color: var(--hhfb-zacht);
  font-size: 12px;
  font-weight: 700;
}

.hhfb .hhfb-pil--fout {
  background: var(--hhfb-rood-vlak);
  color: var(--hhfb-rood);
}

.hhfb .hhfb-pil--idee,
.hhfb .hhfb-pil--status-nieuw {
  background: var(--hhfb-accent-vlak);
  color: var(--hhfb-accent-diep);
}

.hhfb .hhfb-pil--status-gepland {
  background: var(--hhfb-geel-vlak);
  color: var(--hhfb-geel-tekst);
}

.hhfb .hhfb-pil--status-opgelost {
  background: var(--hhfb-groen-vlak);
  color: var(--hhfb-groen);
}

.hhfb .hhfb-antwoord {
  color: var(--hhfb-zacht);
  font-size: 13px;
}

.hhfb .hhfb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Het voorbeeld in het beheer: binnen het kader, niet zwevend boven de pagina. */
.hhfb.hhfb--voorbeeld {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 1;
}

.hhfb.hhfb--voorbeeld .hhfb-paneel {
  width: 100%;
  max-width: 360px;
  max-height: 520px;
  box-shadow: none;
}

/* Staat er een vaste balk onderaan (de onderbalk van een thema op de telefoon), dan staat de knop erboven. */
.hhfb.hhfb--boven-balk:not(.is-open) {
  bottom: calc(84px + var(--veilige-onderrand, env(safe-area-inset-bottom, 0px)));
}

/* Telefoon: het paneel onderaan over de volle breedte. */
@media (max-width: 600px) {
  .hhfb:not(.hhfb--voorbeeld) {
    right: 12px;
    bottom: 12px;
    bottom: calc(12px + var(--veilige-onderrand, env(safe-area-inset-bottom, 0px)));
  }

  .hhfb:not(.hhfb--voorbeeld).is-open {
    right: 0;
    bottom: 0;
    left: 0;
  }

  .hhfb:not(.hhfb--voorbeeld) .hhfb-paneel {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    padding-bottom: var(--veilige-onderrand, env(safe-area-inset-bottom, 0px));
  }

  .hhfb:not(.hhfb--voorbeeld) .hhfb-knop .hhfb-icoon + span {
    display: none;
  }

  .hhfb:not(.hhfb--voorbeeld) .hhfb-knop {
    width: 52px;
    min-height: 52px;
    justify-content: center;
    padding: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hhfb .hhfb-paneel {
    animation: hhfb-in .18s ease-out;
  }
}

@keyframes hhfb-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}