/* ===========================================================
   Sanum Accessibility Widget v1.2
   Minimalistische Sanum-stijl: donker, glas-effect en felgroen.
   =========================================================== */

#zwa-root{
  --zwa-accent:#00d85a;
  --zwa-accent-hover:#18e66d;
  --zwa-font:inherit;
  --zwa-panel-bg:rgba(24,27,34,.97);
  --zwa-panel-bg2:rgba(13,15,20,.94);
  --zwa-card:rgba(255,255,255,.055);
  --zwa-card-active:rgba(0,216,90,.09);
  --zwa-border:rgba(255,255,255,.11);
  --zwa-text:#ffffff;
  --zwa-muted:rgba(255,255,255,.63);
  --zwa-switch-off:rgba(255,255,255,.17);
  --zwa-knob:#ffffff;
  --zwa-shadow:0 24px 70px rgba(0,0,0,.42);
  font-family:var(--zwa-font);
}

#zwa-root.zwa-theme-light{
  --zwa-panel-bg:rgba(255,255,255,.98);
  --zwa-panel-bg2:rgba(245,247,248,.98);
  --zwa-card:rgba(20,24,30,.045);
  --zwa-card-active:rgba(0,216,90,.09);
  --zwa-border:rgba(20,24,30,.11);
  --zwa-text:#181b22;
  --zwa-muted:rgba(24,27,34,.62);
  --zwa-switch-off:rgba(24,27,34,.18);
  --zwa-knob:#ffffff;
  --zwa-shadow:0 24px 70px rgba(0,0,0,.18);
}

#zwa-root,
#zwa-root *{box-sizing:border-box;}

/* ---------- Vaste knop links, circa een derde vanaf onderen ---------- */
.zwa-fab{
  position:fixed !important;
  z-index:2147483000;
  width:58px;
  height:58px;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.13);
  color:#fff;
  background:rgba(24,27,34,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 0 0 rgba(0,216,90,.25);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
  isolation:isolate;
}

.zwa-fab::before{
  content:"";
  position:absolute;
  inset:6px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(0,216,90,.18),rgba(0,216,90,.035));
}

.zwa-fab::after{
  content:attr(data-label);
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  width:max-content;
  max-width:220px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(24,27,34,.96);
  color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.26);
  font:700 12px/1.2 var(--zwa-font);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translate(-5px,-50%);
  transition:opacity .18s ease,transform .18s ease;
}

.zwa-fab:hover,
.zwa-fab:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(0,216,90,.62);
  background:rgba(24,27,34,1);
  box-shadow:0 18px 40px rgba(0,0,0,.34),0 0 0 5px rgba(0,216,90,.10);
  outline:none;
}

.zwa-fab:hover::after,
.zwa-fab:focus-visible::after{
  opacity:1;
  transform:translate(0,-50%);
}

.zwa-fab svg{width:30px;height:30px;fill:currentColor;}
.zwa-fab.zwa-round{border-radius:50%;}
.zwa-fab.zwa-square{border-radius:17px;}
.zwa-pos-left-third{left:18px;bottom:33vh;}
.zwa-pos-bottom-left{left:18px;bottom:18px;}
.zwa-pos-bottom-right{right:18px;bottom:18px;}
.zwa-pos-top-left{left:18px;top:18px;}
.zwa-pos-top-right{right:18px;top:18px;}

/* Shortcode/menu-trigger */
.zwa-open-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:#181b22;
  color:#fff;
  font-family:var(--zwa-font);
  font-size:13px;
  font-weight:750;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.20);
  transition:.2s ease;
}
.zwa-open-trigger:hover,.zwa-open-trigger:focus-visible{background:#20242c;color:#00d85a;border-color:rgba(0,216,90,.55);outline:none;}
.zwa-open-trigger .zwa-trigger-ico{
  width:18px;height:18px;background:currentColor;display:inline-block;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4' r='2.2'/%3E%3Cpath d='M12 7c-3 0-5 1.5-5 4h2.2v7h5.6v-7H17c0-2.5-2-4-5-4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4' r='2.2'/%3E%3Cpath d='M12 7c-3 0-5 1.5-5 4h2.2v7h5.6v-7H17c0-2.5-2-4-5-4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Overlay en paneel ---------- */
.zwa-overlay{
  position:fixed;
  inset:0;
  z-index:2147483001;
  display:block;
  visibility:hidden;
  opacity:0;
  background:rgba(3,5,8,.52);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  transition:opacity .22s ease,visibility .22s ease;
}
.zwa-overlay.is-open{visibility:visible;opacity:1;}

.zwa-panel{
  position:fixed;
  z-index:2147483002;
  top:16px;
  bottom:16px;
  left:16px;
  width:420px;
  max-width:calc(100vw - 32px);
  height:auto;
  overflow:hidden;
  border:1px solid var(--zwa-border);
  border-radius:24px;
  background:var(--zwa-panel-bg);
  color:var(--zwa-text);
  box-shadow:var(--zwa-shadow);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  font-family:var(--zwa-font);
  font-size:15px;
  line-height:1.45;
  display:flex;
  flex-direction:column;
  transform:translateX(calc(-100% - 36px));
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  -webkit-font-smoothing:antialiased;
}
.zwa-panel.zwa-from-right{left:auto;right:16px;transform:translateX(calc(100% + 36px));}
.zwa-overlay.is-open .zwa-panel{transform:translateX(0);}

.zwa-head{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 17px;
  border-bottom:1px solid var(--zwa-border);
  background:var(--zwa-panel-bg2);
}
.zwa-head::before{
  content:"";
  position:absolute;
  left:18px;
  bottom:-1px;
  width:52px;
  height:2px;
  border-radius:999px;
  background:var(--zwa-accent);
  box-shadow:0 0 16px rgba(0,216,90,.7);
}
.zwa-head h2{margin:0;color:var(--zwa-text);font:800 18px/1.25 var(--zwa-font);letter-spacing:-.01em;}
.zwa-close{
  flex:0 0 auto;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--zwa-border);
  border-radius:50%;
  background:rgba(255,255,255,.055);
  color:var(--zwa-text);
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}
.zwa-close:hover,.zwa-close:focus-visible{background:rgba(255,255,255,.11);color:var(--zwa-accent);border-color:rgba(0,216,90,.45);outline:none;}

.zwa-body{overflow-y:auto;overscroll-behavior:contain;padding:18px;flex:1 1 auto;scrollbar-width:thin;scrollbar-color:rgba(0,216,90,.55) transparent;}
.zwa-body::-webkit-scrollbar{width:7px;}
.zwa-body::-webkit-scrollbar-thumb{background:rgba(0,216,90,.42);border-radius:999px;}
.zwa-section-title{margin:2px 0 17px;color:var(--zwa-muted);font-size:13px;font-weight:600;line-height:1.45;text-align:left;}
.zwa-sub-title{margin:25px 0 12px;color:var(--zwa-muted);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;}

/* Profielen */
.zwa-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:9px;
  padding:12px;
  border:1px solid var(--zwa-border);
  border-radius:16px;
  background:var(--zwa-card);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.zwa-item:hover{border-color:rgba(255,255,255,.20);transform:translateY(-1px);}
.zwa-item.is-active{border-color:rgba(0,216,90,.52);background:var(--zwa-card-active);}
.zwa-ico{
  width:42px;height:42px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.055);
  border:1px solid var(--zwa-border);
}
.zwa-item.is-active .zwa-ico{color:var(--zwa-accent);background:rgba(0,216,90,.10);border-color:rgba(0,216,90,.26);}
.zwa-ico svg{width:21px;height:21px;fill:currentColor;}
.zwa-item-txt{min-width:0;}
.zwa-item-txt strong{display:block;color:var(--zwa-text);font-size:13.5px;font-weight:750;line-height:1.25;}
.zwa-item-txt span{display:block;margin-top:3px;color:var(--zwa-muted);font-size:11.5px;line-height:1.35;}

.zwa-switch{display:flex;align-items:center;gap:6px;color:var(--zwa-muted);font-size:10px;white-space:nowrap;}
.zwa-toggle{
  position:relative;
  width:43px;height:23px;padding:0;border:0;border-radius:999px;
  background:var(--zwa-switch-off);cursor:pointer;transition:background .18s ease,box-shadow .18s ease;
}
.zwa-toggle::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--zwa-knob);box-shadow:0 2px 5px rgba(0,0,0,.30);transition:left .18s ease;}
.zwa-toggle[aria-pressed="true"]{background:var(--zwa-accent);box-shadow:0 0 0 3px rgba(0,216,90,.11);}
.zwa-toggle[aria-pressed="true"]::after{left:23px;}
.zwa-toggle:focus-visible{outline:2px solid var(--zwa-accent);outline-offset:2px;}

/* Stappen */
.zwa-steppers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.zwa-stepper{padding:14px 12px;border:1px solid var(--zwa-border);border-radius:16px;background:var(--zwa-card);text-align:center;}
.zwa-stepper .lbl{display:block;margin-bottom:12px;color:var(--zwa-text);font-size:12.5px;font-weight:700;}
.zwa-stepper-ctrls{display:flex;align-items:center;justify-content:center;gap:9px;}
.zwa-round-btn{
  width:34px;height:34px;padding:0;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--zwa-border);border-radius:50%;
  background:rgba(255,255,255,.055);color:var(--zwa-text);
  font-size:19px;line-height:1;cursor:pointer;transition:.2s ease;
}
.zwa-round-btn:hover,.zwa-round-btn:focus-visible{background:var(--zwa-accent);color:#07170d;border-color:var(--zwa-accent);outline:none;}
.zwa-track{position:relative;min-width:24px;height:5px;flex:1 1 auto;border-radius:999px;background:rgba(255,255,255,.12);}
.zwa-track i{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:var(--zwa-accent);box-shadow:0 0 12px rgba(0,216,90,.5);transform:translate(-50%,-50%);transition:left .15s ease;}
.zwa-stepper .reset{display:block;width:100%;margin-top:11px;padding:0;border:0;background:none;color:var(--zwa-muted);font:600 10.5px/1.2 var(--zwa-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.zwa-stepper .reset:hover{color:var(--zwa-accent);}

/* Tegels */
.zwa-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.zwa-tile{
  min-height:96px;
  padding:15px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--zwa-border);border-radius:16px;
  background:var(--zwa-card);color:var(--zwa-text);
  font-family:var(--zwa-font);text-align:center;cursor:pointer;transition:.2s ease;
}
.zwa-tile:hover,.zwa-tile:focus-visible{border-color:rgba(0,216,90,.45);transform:translateY(-1px);outline:none;}
.zwa-tile.is-active{border-color:rgba(0,216,90,.58);background:var(--zwa-card-active);color:var(--zwa-accent);}
.zwa-tile svg{width:23px;height:23px;fill:currentColor;}
.zwa-tile span{display:block;color:inherit;font-size:12px;font-weight:650;line-height:1.25;}

.zwa-reset-all{
  width:100%;margin-top:22px;padding:13px 16px;
  border:1px solid rgba(0,216,90,.42);border-radius:999px;
  background:rgba(0,216,90,.09);color:var(--zwa-accent);
  font:750 13px/1 var(--zwa-font);cursor:pointer;transition:.2s ease;
}
.zwa-reset-all:hover,.zwa-reset-all:focus-visible{background:var(--zwa-accent);color:#07170d;border-color:var(--zwa-accent);outline:none;}

@media (max-width:600px){
  .zwa-fab::after{display:none;}
  .zwa-pos-left-third{left:12px;bottom:28vh;}
  .zwa-panel,.zwa-panel.zwa-from-right{
    top:8px;right:8px;bottom:8px;left:8px;
    width:auto !important;max-width:none;
    border-radius:20px;
    transform:translateY(calc(100% + 18px));
  }
  .zwa-overlay.is-open .zwa-panel{transform:translateY(0);}
}

@media (max-width:400px){
  .zwa-item{grid-template-columns:42px minmax(0,1fr);}
  .zwa-switch{grid-column:1 / -1;justify-content:flex-end;margin-top:2px;}
  .zwa-steppers,.zwa-tiles{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .zwa-fab,.zwa-fab::after,.zwa-overlay,.zwa-panel,.zwa-item,.zwa-tile,.zwa-toggle,.zwa-toggle::after{transition:none !important;}
}

/* ===========================================================
   PAGE-LEVEL EFFECTS (classes on <html>)
   =========================================================== */
html.zwa-spacing body :where(p,li,a,span,h1,h2,h3,h4,h5,h6,div,td,th,dd,dt,label,button,blockquote,figcaption){
  line-height:var(--zwa-line, inherit) !important;
  letter-spacing:var(--zwa-letter, inherit) !important;
  word-spacing:var(--zwa-word, inherit) !important;
}

html.zwa-bw{filter:grayscale(1) contrast(1.15);}

/* full high-contrast – exclude the widget UI itself */
html.zwa-contrast body *:not(#zwa-root):not(#zwa-root *){
  background-color:#000 !important;color:#fff !important;border-color:#fff !important;
}
html.zwa-contrast a:not(#zwa-root *){color:#ffe14d !important;}

html.zwa-hide-img img,
html.zwa-hide-img picture,
html.zwa-hide-img svg:not(#zwa-root svg),
html.zwa-hide-img video{visibility:hidden !important;}
html.zwa-hide-img *:not(#zwa-root):not(#zwa-root *){background-image:none !important;}

html.zwa-readable body :where(p,li,a,span,h1,h2,h3,h4,h5,h6,div,td,th,label,button,input,textarea):not(#zwa-root *){
  font-family:Verdana,Tahoma,Arial,sans-serif !important;
}

html.zwa-noanim *,html.zwa-noanim *::before,html.zwa-noanim *::after{
  animation:none !important;transition:none !important;scroll-behavior:auto !important;
}

html.zwa-cursor,html.zwa-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5 2l14 11-6 1 3 7-3 1-3-7-5 4z'/%3E%3C/svg%3E") 4 2, auto !important;
}

html.zwa-hl-links a:not(#zwa-root *){outline:2px solid var(--zwa-accent) !important;text-decoration:underline !important;}
html.zwa-hl-titles :is(h1,h2,h3,h4):not(#zwa-root *){outline:2px dashed var(--zwa-accent) !important;outline-offset:2px;}

html.zwa-kb *:focus{outline:3px solid #00d85a !important;outline-offset:2px !important;}
.zwa-skip{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:2147483005;background:#000;color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;}
.zwa-skip:not(:focus){position:absolute;left:-9999px;}

/* reading mask */
.zwa-mask{position:fixed;inset:0;z-index:2147482000;pointer-events:none;display:none;}
.zwa-mask.is-on{display:block;}
.zwa-mask .bar{position:absolute;left:0;right:0;background:rgba(0,0,0,.72);}
.zwa-mask .top{top:0;}
.zwa-mask .bottom{bottom:0;}

/* text magnifier bar */
.zwa-mag{
  position:fixed;left:0;right:0;top:0;z-index:2147482500;display:none;
  background:#111;color:#fff;font-size:26px;line-height:1.3;padding:16px 22px;
  box-shadow:0 6px 20px rgba(0,0,0,.4);pointer-events:none;font-family:var(--zwa-font);
}
.zwa-mag.is-on{display:block;}

body.zwa-menu-open{overflow:hidden;}