/* כפתור וואטסאפ צף + תפריט נגישות (7.10.2026). צבעים קבועים, לא נגררים למעבר בהיר/כהה של הדף. */
/* וואטסאפ בפינה השמאלית, נגישות בימנית (8.10.2026). direction:ltr כדי שגם en.html יישאר באותו סידור */
.dock{position:fixed;left:20px;right:20px;bottom:20px;z-index:80;display:flex;direction:ltr;pointer-events:none;transition:transform .45s var(--ease-out)}
.dock-wa{order:-1}
.dock-a11y{margin-left:auto}
.dock-btn{position:relative;pointer-events:auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:0;padding:0;cursor:pointer;color:#fff;box-shadow:0 10px 28px -10px rgba(14,12,34,.55),0 0 0 1px rgba(255,255,255,.14);transition:background-color .25s var(--ease),transform .25s var(--ease)}
.dock-btn svg{width:23px;height:23px;fill:currentColor}
.dock-wa{background:#25D366}
.dock-a11y{background:#7F65FB}
@media (hover:hover){.dock-wa:hover{background:#128C4B;transform:translateY(-2px)}.dock-a11y:hover{background:#5B41D9;transform:translateY(-2px)}}
.dock-btn:focus-visible{outline:3px solid #FFB340;outline-offset:3px}
@media (max-width:900px){
  .dock-btn{width:40px;height:40px}
  .dock-btn svg{width:22px;height:22px}
  body:has(#mcta.show) .dock{transform:translateY(-68px)}
}

/* תנועה (8.10.2026): כניסה קופצת אחד אחרי השני, וואטסאפ שולח גל ומנענע את האייקון */
.dock-btn{animation:dockIn .6s cubic-bezier(.34,1.56,.64,1) backwards}
.dock-a11y{animation-delay:.9s}
.dock-wa{animation-delay:1.05s}
@keyframes dockIn{from{opacity:0;transform:translateY(16px) scale(.6)}to{opacity:1;transform:none}}
.dock-wa::before,.dock-wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;pointer-events:none;animation:waRing 3.6s ease-out 2s infinite;opacity:0}
.dock-wa::after{animation-delay:2.5s}
@keyframes waRing{0%{opacity:.75;transform:scale(1)}55%,100%{opacity:0;transform:scale(1.75)}}
.dock-wa svg{animation:waWiggle 3.6s ease-in-out 2s infinite;transform-origin:50% 60%}
@keyframes waWiggle{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-14deg)}70%{transform:rotate(12deg)}74%{transform:rotate(-8deg)}78%{transform:rotate(5deg)}82%{transform:rotate(0)}}
.dock-btn:hover svg,.dock-btn[aria-expanded=true] svg{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.dock-btn,.dock-btn svg,.dock-wa::before,.dock-wa::after{animation:none}}

/* הפאנל */
.a11y-panel{position:fixed;right:20px;bottom:78px;z-index:90;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow:auto;background:#1C1A33;color:#F0E9DD;border-radius:20px;padding:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 0 1px rgba(240,233,221,.14);font-family:"Ploni","Heebo",Arial,sans-serif;font-size:16px;line-height:1.4;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s}
.a11y-panel.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.a11y-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.a11y-top h2{margin:0;font-family:"PloniYad","Ploni",Arial,sans-serif;font-size:24px;font-weight:700;line-height:1.1}
.a11y-x{width:36px;height:36px;border-radius:50%;border:0;background:rgba(240,233,221,.1);color:inherit;font-size:20px;cursor:pointer;transition:background-color .2s}
.a11y-x:hover{background:rgba(240,233,221,.22)}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-opt{display:grid;justify-items:center;gap:6px;min-height:84px;padding:12px 8px;border-radius:14px;border:0;background:rgba(240,233,221,.07);color:inherit;font:inherit;font-size:14px;text-align:center;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(240,233,221,.12);transition:background-color .2s,box-shadow .2s}
.a11y-opt svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.a11y-opt:hover{background:rgba(240,233,221,.14)}
.a11y-opt[aria-pressed=true]{background:#7F65FB;color:#fff;box-shadow:none}
.a11y-opt[aria-pressed=true]:hover{background:#5B41D9}
.a11y-opt .lvl{font-size:12px;opacity:.8}
.a11y-opt:focus-visible,.a11y-x:focus-visible,.a11y-foot a:focus-visible,.a11y-foot button:focus-visible{outline:3px solid #FFB340;outline-offset:2px}
.a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(240,233,221,.14);font-size:14px}
.a11y-foot a{color:#F0E9DD;text-decoration:underline;text-underline-offset:3px}
.a11y-foot button{border:0;border-radius:999px;min-height:36px;padding:0 16px;background:#F0E9DD;color:#1C1A33;font:inherit;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s}
.a11y-foot button:hover{background:#7F65FB;color:#fff}
@media (max-width:900px){.a11y-panel{right:20px;bottom:74px;width:calc(100vw - 40px);max-height:calc(100vh - 100px)}}

/* מה שהאפשרויות עושות לדף */
html.a11y-contrast{filter:contrast(1.45)}
html.a11y-gray{filter:grayscale(1)}
html.a11y-contrast.a11y-gray{filter:grayscale(1) contrast(1.45)}
html.a11y-links a:not(.dock-btn){text-decoration:underline !important;text-underline-offset:3px;outline:2px solid #FFB340 !important;outline-offset:2px}
html.a11y-font body *:not(svg):not(svg *){font-family:Arial,"Heebo",sans-serif !important}
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1 4 8-3 1-4-8-5 5z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2,auto !important}
html.a11y-focus *:focus{outline:4px solid #FFB340 !important;outline-offset:3px !important}
