/* ============================================================
   S.H Paint — Accessibility Widget
   Compliant with Israeli Regulation 35 / WCAG 2.0 AA
   ============================================================ */

:root{
  --a11y-bg:#fff;
  --a11y-ink:#1a1a1a;
  --a11y-ink-2:#555;
  --a11y-line:#cbb578;
  --a11y-gold:#a87f24;
  --a11y-gold-2:#d4b878;
  --a11y-tile-1:#f8f3e3;       /* tile top */
  --a11y-tile-2:#ede0b8;       /* tile bottom */
  --a11y-tile-h1:#f0e2b0;      /* hover top */
  --a11y-tile-h2:#dcc788;      /* hover bottom */
  --a11y-active:#8f6c1a;
  --a11y-active-1:#ecd591;     /* active top */
  --a11y-active-2:#c9a149;     /* active bottom */
}

/* ============ FLOATING BUTTON ============ */
.a11y-fab{
  position:fixed !important;
  bottom:28px;
  right:28px;
  z-index:9998;
  width:54px;height:54px;
  border-radius:50%;
  background:var(--a11y-gold,#b8902d);
  color:#fff;
  border:2px solid #fff;
  box-shadow:0 6px 20px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease;
  padding:0;
}
.a11y-fab:hover,.a11y-fab:focus-visible{
  background:#9a7820;
  transform:scale(1.08);
  outline:3px solid #fff;
  outline-offset:2px;
}
.a11y-fab svg{width:30px;height:30px;fill:currentColor}

@media(max-width:640px){
  .a11y-fab{bottom:90px;right:18px;width:48px;height:48px}
  .a11y-fab svg{width:26px;height:26px}
}

/* ============ PANEL ============ */
.a11y-panel{
  position:fixed !important;
  top:0;right:0;bottom:0;
  width:380px;max-width:92vw;
  background:var(--a11y-bg);
  color:var(--a11y-ink);
  z-index:9999;
  box-shadow:-20px 0 60px rgba(0,0,0,.45);
  transform:translateX(105%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  font-family:Arial,'Heebo',sans-serif !important;
  direction:rtl;
}
.a11y-panel.open{transform:translateX(0)}
.a11y-panel *{box-sizing:border-box}

.a11y-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--a11y-line);
  background:#fff;
}
.a11y-head h2{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:var(--a11y-gold);
  font-family:Arial,sans-serif !important;
}
.a11y-close{
  width:36px;height:36px;
  border:none;background:transparent;
  cursor:pointer;
  font-size:22px;color:var(--a11y-ink);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:background .2s ease;
}
.a11y-close:hover,.a11y-close:focus-visible{background:linear-gradient(180deg, var(--a11y-tile-h1) 0%, var(--a11y-tile-h2) 100%);outline:2px solid var(--a11y-gold)}

.a11y-body{
  flex:1;
  overflow-y:auto;
  padding:18px 18px 24px;
  scrollbar-width:thin;
}
.a11y-body::-webkit-scrollbar{width:8px}
.a11y-body::-webkit-scrollbar-thumb{background:var(--a11y-line);border-radius:4px}

/* ====== FEATURE BUTTON GRID ====== */
.a11y-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}
.a11y-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 6px;
  background:linear-gradient(180deg, var(--a11y-tile-1) 0%, var(--a11y-tile-2) 100%);
  border:1px solid var(--a11y-line);
  border-radius:10px;
  cursor:pointer;
  font-family:Arial,sans-serif !important;
  font-size:12px;font-weight:500;
  color:var(--a11y-ink);
  text-align:center;
  line-height:1.3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(120,90,20,.08);
  transition:background .25s ease, border-color .25s ease, transform .15s ease, box-shadow .25s ease;
  min-height:80px;
}
.a11y-btn:hover{
  background:linear-gradient(180deg, var(--a11y-tile-h1) 0%, var(--a11y-tile-h2) 100%);
  border-color:var(--a11y-gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(168,127,36,.18);
}
.a11y-btn:focus-visible{outline:3px solid var(--a11y-gold);outline-offset:2px}
.a11y-btn:active{transform:scale(.97)}
.a11y-btn.active{
  background:linear-gradient(180deg, var(--a11y-active-1) 0%, var(--a11y-active-2) 100%);
  border-color:var(--a11y-active);
  border-width:2px;
  font-weight:700;
  color:#3a2a06;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 6px rgba(120,80,10,.18), 0 2px 8px rgba(168,127,36,.25);
}
.a11y-btn svg{width:26px;height:26px;color:var(--a11y-gold);stroke-width:1.5}
.a11y-btn.active svg{color:var(--a11y-active)}

/* ====== SLIDER GROUP ====== */
.a11y-slider-group{margin:14px 0}
.a11y-slider-group .title{
  text-align:center;
  font-size:14px;font-weight:700;color:var(--a11y-gold);
  margin-bottom:10px;
  font-family:Arial,sans-serif !important;
}
.a11y-slider-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;
  padding:8px 4px;
}
.a11y-slider-row .lbl{font-size:11px;color:var(--a11y-ink-2);flex:1;text-align:center}
.a11y-slider-row .val{
  min-width:64px;
  padding:8px 12px;
  border:1px solid var(--a11y-line);
  border-radius:20px;
  text-align:center;
  font-weight:700;
  font-size:13px;
  color:var(--a11y-ink);
  background:#fff;
}
.a11y-slider-row button{
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--a11y-line);
  background:#fff;
  cursor:pointer;
  font-size:18px;font-weight:700;
  color:var(--a11y-gold);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.a11y-slider-row button:hover{background:linear-gradient(180deg, var(--a11y-tile-h1) 0%, var(--a11y-tile-h2) 100%);border-color:var(--a11y-gold)}
.a11y-slider-row button:focus-visible{outline:3px solid var(--a11y-gold);outline-offset:2px}

/* ====== FOOTER ====== */
.a11y-foot{
  padding:14px 22px;
  border-top:1px solid var(--a11y-line);
  background:linear-gradient(180deg, var(--a11y-tile-1) 0%, var(--a11y-tile-2) 100%);
  text-align:center;
  font-size:12px;
  color:var(--a11y-ink-2);
}
.a11y-foot a{color:var(--a11y-gold);text-decoration:underline;font-weight:600}
.a11y-foot a:hover{color:#7a5c14}

/* ====== BACKDROP ====== */
.a11y-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:9997;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.a11y-backdrop.open{opacity:1;visibility:visible;transition:opacity .3s ease}

/* ============================================================
   FEATURE MODIFIERS (applied to <html>)
   ============================================================ */

/* ---- Filter overlay ----
   We do NOT apply CSS `filter:` to <body> or to any wrapper that
   contains the page content, because filter on an ancestor creates
   a new containing block and breaks position:fixed for ALL descendants
   (the floating widget and the WhatsApp button would "drop" to the
   bottom of the document).

   Instead we use a fixed-position overlay with `backdrop-filter`, which
   filters whatever is rendered behind the overlay (i.e. the entire
   viewport view of the page) without touching the DOM. The a11y widget
   sits ABOVE this overlay (higher z-index) so it stays unfiltered. */
.a11y-filter-overlay{
  position:fixed !important;
  inset:0;
  pointer-events:none;
  z-index:9990;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
}

/* Grayscale */
html.a11y-grayscale .a11y-filter-overlay{
  backdrop-filter:grayscale(100%) !important;
  -webkit-backdrop-filter:grayscale(100%) !important;
}

/* Inverted colors */
html.a11y-invert .a11y-filter-overlay{
  backdrop-filter:invert(100%) hue-rotate(180deg) !important;
  -webkit-backdrop-filter:invert(100%) hue-rotate(180deg) !important;
}

/* High contrast (light) */
html.a11y-contrast body{
  background:#000 !important;
  color:#fff !important;
}
html.a11y-contrast body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-fab):not(.a11y-fab *):not(.a11y-backdrop){
  background-color:transparent !important;
  color:#fff !important;
  border-color:#ffd700 !important;
}
html.a11y-contrast body a:not(.a11y-fab):not(.a11y-panel a){color:#ffd700 !important;text-decoration:underline !important}
html.a11y-contrast body h1,
html.a11y-contrast body h2,
html.a11y-contrast body h3,
html.a11y-contrast body h4{color:#ffd700 !important}

/* Black & white */
html.a11y-bw .a11y-filter-overlay{
  backdrop-filter:grayscale(100%) contrast(1.3) !important;
  -webkit-backdrop-filter:grayscale(100%) contrast(1.3) !important;
}

/* Highlight links */
html.a11y-highlight-links body a:not(.a11y-fab):not(.a11y-panel a){
  background:#ffff00 !important;
  color:#000 !important;
  text-decoration:underline !important;
  outline:2px solid #000 !important;
  padding:2px 4px !important;
}

/* Highlight headings */
html.a11y-highlight-headings body h1,
html.a11y-highlight-headings body h2,
html.a11y-highlight-headings body h3,
html.a11y-highlight-headings body h4,
html.a11y-highlight-headings body h5,
html.a11y-highlight-headings body h6{
  outline:2px dashed #ffd700 !important;
  outline-offset:4px !important;
  background:rgba(255,215,0,.12) !important;
}

/* Readable font */
html.a11y-readable-font body,
html.a11y-readable-font body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-fab):not(.a11y-fab *){
  font-family:Arial,Verdana,'Heebo',sans-serif !important;
  font-style:normal !important;
}

/* Hide images */
html.a11y-hide-images body img,
html.a11y-hide-images body video,
html.a11y-hide-images body picture,
html.a11y-hide-images body [style*="background-image"]:not(.a11y-panel):not(.a11y-panel *):not(.a11y-fab):not(.a11y-fab *){
  visibility:hidden !important;
}
html.a11y-hide-images body [style*="background-image"]:not(.a11y-panel):not(.a11y-panel *){background-image:none !important}

/* Disable animations */
html.a11y-no-animation body,
html.a11y-no-animation body *{
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}

/* Large cursor — light */
html.a11y-cursor-light,
html.a11y-cursor-light body,
html.a11y-cursor-light body *{
  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='M6 2 L6 38 L16 30 L22 44 L28 42 L22 28 L36 28 Z' fill='white' stroke='black' stroke-width='2'/></svg>") 4 2, auto !important;
}

/* Large cursor — dark */
html.a11y-cursor-dark,
html.a11y-cursor-dark body,
html.a11y-cursor-dark body *{
  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='M6 2 L6 38 L16 30 L22 44 L28 42 L22 28 L36 28 Z' fill='black' stroke='white' stroke-width='2'/></svg>") 4 2, auto !important;
}

/* Font / spacing variables */
html[data-a11y-font]:not([data-a11y-font="100"]) body,
html[data-a11y-font]:not([data-a11y-font="100"]) body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-fab):not(.a11y-fab *){
  font-size:calc(1em * var(--a11y-font-scale, 1)) !important;
}
html[data-a11y-letter]:not([data-a11y-letter="0"]) body,
html[data-a11y-letter]:not([data-a11y-letter="0"]) body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-fab):not(.a11y-fab *){
  letter-spacing:calc(0.05em * var(--a11y-letter-scale, 0)) !important;
}
html[data-a11y-word]:not([data-a11y-word="0"]) body,
html[data-a11y-word]:not([data-a11y-word="0"]) body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-fab):not(.a11y-fab *){
  word-spacing:calc(0.15em * var(--a11y-word-scale, 0)) !important;
}

/* Reading guide */
.a11y-reading-guide{
  position:fixed;
  left:0;right:0;
  height:36px;
  background:rgba(0,0,0,.75);
  border-top:2px solid #ffd700;
  border-bottom:2px solid #ffd700;
  z-index:9996;
  pointer-events:none;
  display:none;
}
html.a11y-reading-guide-on .a11y-reading-guide{display:block}

/* Make sure panel and fab are not affected by any inversions / filters */
.a11y-panel,.a11y-fab,.a11y-backdrop,.a11y-reading-guide{
  filter:none !important;
}