/* ================= FLOAT BUTTON ================= */
#a11y-btn{
  position:fixed;bottom:20px;right:20px;
  width:56px;height:56px;border-radius:50%;
  background:#2563eb;border:none;cursor:pointer;
  z-index:99999;display:flex;align-items:center;justify-content:center;
}
#a11y-btn img{width:45px;height:45px}

/* ================= PANEL ================= */
#a11y-panel{
  position:fixed;bottom:90px;right:20px;
  width:360px;background:#f3f4f6;border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  display:none;overflow:hidden;z-index:99999;
}

/* HEADER */
#a11y-header{
  background:#2563eb;color:#fff;
  padding:14px;font-size:14px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
}
#a11y-close{background:none;border:none;color:#fff;font-size:18px;cursor:pointer}

/* BODY */
#a11y-body{padding:14px}

/* GRID */
.uw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

/* CARD */
.uw-item{
  background:#fff;border-radius:14px;
  padding:16px 10px;text-align:center;
  cursor:pointer;border:none;
}
.uw-item svg{width:26px;height:26px;margin-bottom:6px;stroke:#000}
.uw-name{font-size:13px;font-weight:600}

/* STEPS */
.uw-steps{display:flex;justify-content:center;gap:4px;margin-top:6px}
.uw-dot{width:6px;height:6px;border-radius:50%;background:#d1d5db}
.uw-dot.active{background:#2563eb}

/* RESET */
#a11y-reset{
  margin-top:14px;width:100%;padding:12px;
  border-radius:12px;background:#2563eb;
  color:#fff;border:none;font-size:13px;cursor:pointer;
}

/* ================= PAGE EFFECTS ================= */

/* CONTRAST */
#page.a11y-contrast-1{filter:invert(1) hue-rotate(180deg)}
#page.a11y-contrast-2{background:#000!important;color:#fff!important}
#page.a11y-contrast-3{background:#fff!important;color:#000!important}

/* TEXT SIZE */
#page.a11y-text-1{font-size:110%!important}
#page.a11y-text-2{font-size:125%!important}
#page.a11y-text-3{font-size:140%!important}

/* TEXT SPACING */
#page.a11y-space-1 *{letter-spacing:.05em!important}
#page.a11y-space-2 *{letter-spacing:.12em!important}
#page.a11y-space-3 *{letter-spacing:.2em!important}

/* LINE HEIGHT ✅ NEW */
#page.a11y-line-1 *{line-height:1.6!important}
#page.a11y-line-2 *{line-height:1.9!important}
#page.a11y-line-3 *{line-height:2.2!important}

/* LINKS */
#page.a11y-links a{background:yellow!important;color:#000!important}

/* HIDE IMAGES */
#page.a11y-hideimg img{display:none!important}

/* PAUSE */
#page.a11y-pause *{animation:none!important;transition:none!important}

/* JUSTIFY */
#page.a11y-justify p{text-align:justify!important}

/* ================= DYSLEXIA FRIENDLY (MOODLE SAFE) ================= */

/* ONLY main readable content */
#page.a11y-dyslexia #region-main,
#page.a11y-dyslexia #region-main *,
#page.a11y-dyslexia .region-main-content,
#page.a11y-dyslexia .region-main-content *,
#page.a11y-dyslexia .course-content,
#page.a11y-dyslexia .course-content * {
  font-family: UDF, serif !important;
}

/* EXCLUDE navigation, header, blocks, icons */
#page.a11y-dyslexia header,
#page.a11y-dyslexia nav,
#page.a11y-dyslexia .navbar,
#page.a11y-dyslexia .navigation,
#page.a11y-dyslexia .block,
#page.a11y-dyslexia .block *,
#page.a11y-dyslexia svg,
#page.a11y-dyslexia svg *,
#page.a11y-dyslexia i,
#page.a11y-dyslexia .icon,
#page.a11y-dyslexia .fa {
  font-family: inherit !important;
}


/* TOOLTIPS ✅ NEW */
#page.a11y-tooltips a,
#page.a11y-tooltips button{
  position:relative;
}
#page.a11y-tooltips a:hover::after,
#page.a11y-tooltips button:hover::after{
  content:attr(aria-label);
  position:absolute;
  bottom:120%;left:50%;transform:translateX(-50%);
  background:#000;color:#fff;
  padding:4px 6px;font-size:11px;
  border-radius:4px;white-space:nowrap;
  z-index:99999;
}

/* SATURATION ✅ NEW */
#page.a11y-sat-1{filter:saturate(0.5)}
#page.a11y-sat-2{filter:grayscale(1)}
#page.a11y-sat-3{filter:saturate(1.5)}

/* ================= CURSOR ================= */
#a11y-big-cursor{
  position:fixed;width:36px;height:36px;
  border:3px solid #2563eb;border-radius:50%;
  pointer-events:none;z-index:99998;
  display:none;transform:translate(-50%,-50%);
}
#a11y-mask{
  position:fixed;width:100%;height:140px;
  background:rgba(0,0,0,.55);
  pointer-events:none;z-index:99997;display:none;
}
#a11y-guide{
  position:fixed;height:8px;background:#2563eb;
  box-shadow:0 0 6px rgba(0,0,0,.4);
  left:0;right:0;pointer-events:none;
  z-index:99997;display:none;
}
/* ===== MAKE PANEL BODY SCROLLABLE ===== */
#a11y-body{
  padding:14px;
  max-height:70vh;          /* 👈 important */
  overflow-y:auto;          /* 👈 slider */
}

/* optional – clean scrollbar */
#a11y-body::-webkit-scrollbar{
  width:10px;
}
#a11y-body::-webkit-scrollbar-thumb{
  background:#036dc3;
  border-radius:6px;
}
#a11y-body::-webkit-scrollbar-track{
  background:transparent;
}