/* ═══════════════════════════════════════
   Scan-widget rechtsonder

   Lagen op deze site: gewone inhoud tot 90, mobiel menu 199, navbalk 200,
   cookiebanner daarboven (die zet Complianz zelf). Het widget staat op 150.
   Daarmee ligt hij over de inhoud heen, maar dekken het mobiele menu en de
   cookiebanner hem netjes af zodra die opengaan.

   Het formulier binnenin komt uit template-parts/scan-form.php en wordt dus
   ook door assets/scan.css en assets/v3-scan.css opgemaakt. Die twee gaan uit
   van een brede kaart. Onderaan dit bestand staan de correcties die daarvoor
   nodig zijn in een kolom van 370px. Wie daar iets wijzigt: eerst kijken of
   het niet ook de scan op de homepagina raakt (dat kan niet, alles hier zit
   achter .gw).
═══════════════════════════════════════ */

.gw {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  font-family: var(--v3-font);
}
.gw[hidden] { display: none; }

/* ── Bubbel ────────────────────────────────────────────────────────────── */
.gw-bubbel {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 19px 13px 16px; border: 0; border-radius: var(--v3-r-pill);
  background: var(--v3-grad); color: #02101f;
  font: 700 var(--v3-fs-klein) / 1 var(--v3-font);
  cursor: pointer; box-shadow: 0 10px 30px rgba(2, 12, 27, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform var(--v3-ease), box-shadow var(--v3-ease);
}
.gw-bubbel:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(2, 12, 27, .62), 0 0 0 1px rgba(255, 255, 255, .14); }
.gw-bubbel:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: 3px; }
.gw-bubbel-icoon { display: inline-flex; }
.gw-bubbel-icoon svg { width: 18px; height: 18px; display: block; }
/* Het kruisje verschijnt pas als het paneel openstaat. */
.gw-icoon-dicht { display: none; }
.gw[data-open="ja"] .gw-icoon-open  { display: none; }
.gw[data-open="ja"] .gw-icoon-dicht { display: inline-flex; }
.gw[data-open="ja"] .gw-bubbel-label { display: none; }
.gw[data-open="ja"] .gw-bubbel { padding: 13px; }

/* ── Wenk ──────────────────────────────────────────────────────────────── */
/* Verschijnt eenmalig per sessie. Geen automatisch openklappend paneel:
   dat is precies het gedrag waar mensen chatwidgets om haten. */
.gw-wenk {
  display: flex; align-items: stretch;
  max-width: 260px; border-radius: 14px; overflow: hidden;
  background: var(--v3-card); border: 1px solid var(--v3-border-md);
  box-shadow: 0 10px 30px rgba(2, 12, 27, .5);
  animation: gw-in .28s var(--v3-ease) both;
}
.gw-wenk[hidden] { display: none; }
.gw-wenk-tekst {
  flex: 1; padding: 12px 6px 12px 15px; border: 0; background: none;
  font: 600 var(--v3-fs-klein) / 1.4 var(--v3-font); color: var(--v3-text-1);
  text-align: left; cursor: pointer;
}
.gw-wenk-tekst:hover { color: var(--v3-cyan); }
.gw-wenk-weg {
  padding: 0 12px; border: 0; border-left: 1px solid var(--v3-border);
  background: none; color: var(--v3-text-3); cursor: pointer;
  display: flex; align-items: center;
}
.gw-wenk-weg:hover { color: var(--v3-text-1); }
.gw-wenk-tekst:focus-visible,
.gw-wenk-weg:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: -2px; }

/* ── Paneel ────────────────────────────────────────────────────────────── */
.gw-paneel {
  width: 370px; max-height: min(78vh, 640px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--v3-section); border: 1px solid var(--v3-border-md);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(2, 12, 27, .7), 0 0 0 1px rgba(255, 255, 255, .04);
  animation: gw-in .22s var(--v3-ease) both;
}
.gw-paneel[hidden] { display: none; }

@keyframes gw-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.gw-kop {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 17px 16px 15px 20px; border-bottom: 1px solid var(--v3-border);
  background: rgba(0, 0, 0, .16);
}
.gw-kop-titel { font: 700 var(--v3-fs-kop) / 1.2 var(--v3-font); color: var(--v3-text-1); letter-spacing: -.015em; }
.gw-kop-sub   { margin-top: 3px; font: 400 var(--v3-fs-label) / 1.4 var(--v3-font); color: var(--v3-text-3); }
.gw-sluit {
  flex-shrink: 0; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--v3-border-md); border-radius: 9px;
  background: none; color: var(--v3-text-2); cursor: pointer;
  transition: color var(--v3-ease), border-color var(--v3-ease);
}
.gw-sluit:hover { color: var(--v3-text-1); border-color: var(--v3-border-strong, rgba(255,255,255,.22)); }
.gw-sluit:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: 2px; }

.gw-body { padding: 18px 20px 4px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.gw-intro {
  margin: 0 0 15px;
  font: 400 var(--v3-fs-klein) / 1.55 var(--v3-font); color: var(--v3-text-2);
  text-wrap: pretty;
}

.gw-voet {
  padding: 13px 20px; border-top: 1px solid var(--v3-border);
  font: 400 var(--v3-fs-label) / 1 var(--v3-font); color: var(--v3-text-3);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gw-voet a { color: var(--v3-text-2); text-decoration: none; }
.gw-voet a:hover { color: var(--v3-cyan); }

/* ── Het scanformulier binnen een smalle kolom ─────────────────────────── */
/* scan.css en v3-scan.css gaan uit van een brede kaart met eigen achtergrond
   en rand. Binnen het paneel is die kaart de kolom zelf, dus die laag moet
   eraf. Alles hieronder zit achter .gw en raakt de scan op de homepagina
   en /ai-scan/ dus niet. */
.gw .geo-scan,
.gw .scan-tool-card {
  background: none; border: 0; border-radius: 0;
  padding: 0; margin: 0; box-shadow: none; max-width: none;
}
.gw .scan-form-grid-compact { display: block; }
.gw .scan-field { margin-bottom: 12px; }
.gw .scan-field label { font-size: var(--v3-fs-label); }
.gw .scan-input { width: 100%; }
.gw .scan-start-btn { width: 100%; }
.gw .scan-disclaimer { font-size: var(--v3-fs-label); margin-top: 10px; }

/* Laadstappen zijn met vier regels te veel voor dit formaat. */
.gw .scan-stappen { gap: 7px; }
.gw .scan-stap { font-size: var(--v3-fs-label); }
.gw .scan-loading-titel { font-size: var(--v3-fs-kop); }

/* Uitslag: alles één kolom, en de score wat kleiner. */
.gw .gs-results { padding-bottom: 14px; }
.gw .scan-cta-rij { flex-direction: column; align-items: stretch; gap: 9px; }
.gw .scan-cta-rij a,
.gw .scan-cta-rij button { width: 100%; text-align: center; justify-content: center; }

/* ── Mobiel ────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .gw { right: 14px; bottom: 14px; left: 14px; align-items: flex-end; }
  .gw-paneel {
    width: 100%; max-height: min(80vh, 560px);
  }
  .gw-wenk { max-width: 100%; }
  /* Alleen het icoon, anders neemt de bubbel een derde van het scherm. */
  .gw-bubbel-label { display: none; }
  .gw-bubbel { padding: 14px; }
}

/* ── Bewegingsvoorkeur ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gw-paneel, .gw-wenk { animation: none; }
  .gw-bubbel { transition: none; }
  .gw-bubbel:hover { transform: none; }
}