/* Universal accessibility widget — works on any page */
.a11y-toggle{
  position:fixed; bottom:18px; left:18px; z-index:99998;
  width:52px; height:52px; border:none; cursor:pointer; padding:0;
  border-radius:50%;
  background:linear-gradient(135deg,#0036ff,#0093ff);
  color:#fff; box-shadow:0 6px 22px rgba(0,54,255,.4), 0 2px 6px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
  font-family:"Heebo",sans-serif;
}
.a11y-toggle:hover{ transform:scale(1.06); box-shadow:0 10px 30px rgba(0,54,255,.5); }
.a11y-toggle:focus-visible{ outline:3px solid #ffd60a; outline-offset:3px; }
.a11y-toggle svg{ width:26px; height:26px; }

.a11y-panel{
  position:fixed; bottom:82px; left:18px; z-index:99999;
  width:296px; max-width:calc(100vw - 36px);
  background:#fff; color:#141414;
  border-radius:18px; padding:18px 18px 14px;
  box-shadow:0 24px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  transform:translateY(12px) scale(.96); opacity:0; pointer-events:none;
  transition:transform .18s ease, opacity .18s ease;
  font-family:"Heebo",sans-serif; direction:rtl; text-align:right;
}
.a11y-panel.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.a11y-panel h4{
  font-family:"Rubik","Heebo",sans-serif; font-weight:700; font-size:16px;
  margin:0 0 12px; color:#141414;
}
.a11y-row{ display:flex; gap:8px; margin-bottom:10px; }
.a11y-btn{
  flex:1; padding:10px 8px; border:1px solid #e5e7eb; background:#f7f8fa;
  border-radius:10px; font-family:"Heebo",sans-serif; font-weight:600; font-size:14px;
  color:#141414; cursor:pointer; transition:all .12s ease;
}
.a11y-btn:hover{ background:#e1ecff; border-color:#0036ff; color:#0036ff; }
.a11y-btn.active{ background:#0036ff; border-color:#0036ff; color:#fff; }
.a11y-btn-wide{ width:100%; text-align:right; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.a11y-btn-wide .state{ font-size:12px; color:#656565; font-weight:500; }
.a11y-btn-wide.active .state{ color:#cfe0ff; }
.a11y-foot{
  margin-top:8px; padding-top:12px; border-top:1px solid #e5e7eb;
  font-size:12.5px; color:#656565; line-height:1.5;
}
.a11y-foot a{ color:#0036ff !important; text-decoration:none; font-weight:600; }
.a11y-foot a:hover{ text-decoration:underline; }

/* ── Modes applied via body classes (universal) ── */
body.a11y-contrast{ filter:invert(1) hue-rotate(180deg); background:#fff !important; }
body.a11y-contrast img,
body.a11y-contrast video,
body.a11y-contrast iframe,
body.a11y-contrast .a11y-toggle,
body.a11y-contrast .a11y-panel{
  filter:invert(1) hue-rotate(180deg);
}

body.a11y-links a:not(.a11y-btn):not(.a11y-toggle){
  text-decoration:underline !important;
  text-decoration-thickness:2px !important;
  text-underline-offset:3px !important;
}

body.a11y-cursor, body.a11y-cursor *{
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M8 4 L8 38 L18 30 L25 42 L31 39 L24 27 L37 27 Z" fill="black" stroke="white" stroke-width="2"/></svg>') 4 4, auto !important;
}

body.a11y-noanim *,
body.a11y-noanim *::before,
body.a11y-noanim *::after{
  animation-duration:0.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001ms !important;
  scroll-behavior:auto !important;
}

@media (max-width: 720px){
  .a11y-toggle{ bottom:14px; left:14px; width:48px; height:48px; }
  .a11y-toggle svg{ width:22px; height:22px; }
  .a11y-panel{ bottom:72px; left:14px; }
}