/* ============================================================
   Accessibility widget — floating button + panel + body classes
   that drive user-toggled accommodations (font size, contrast,
   dark mode, animations, etc.). Persisted via localStorage.
   ============================================================ */

/* ── Floating launcher button ────────────────────────────── */
.a11y-launcher {
    position: fixed;
    bottom: 20px;
    inset-inline-start: 20px;
    z-index: 10000;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #1e3a8a;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform .2s, background .2s;
    padding: 0;
}
.a11y-launcher:hover,
.a11y-launcher:focus-visible {
    background: #4f46e5;
    transform: scale(1.08);
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* ── Panel ──────────────────────────────────────────────── */
.a11y-panel {
    position: fixed;
    bottom: 88px;
    inset-inline-start: 20px;
    z-index: 10001;
    width: 320px;
    max-width: calc(100vw - 40px);
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    color: #0f172a;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.05);
    transform: translateY(20px) scale(.96);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility 0s linear .2s;
    font-family: inherit;
}
.a11y-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .2s, transform .2s, visibility 0s;
}
.a11y-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1e3a8a, #4f46e5);
    color: #fff;
    border-radius: 14px 14px 0 0;
}
.a11y-panel-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.a11y-panel-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.a11y-panel-close:hover,
.a11y-panel-close:focus-visible {
    background: rgba(255,255,255,.15);
    outline: 2px solid #fbbf24;
}
.a11y-panel-body {
    padding: 16px 20px;
}

/* ── Font-size controls ─────────────────────────────────── */
.a11y-font-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}
.a11y-font-label {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}
.a11y-font-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.a11y-font-btn:hover,
.a11y-font-btn:focus-visible {
    border-color: #4f46e5;
    color: #4f46e5;
    outline: 2px solid #fbbf24;
    outline-offset: 1px;
}

/* ── Toggle row ─────────────────────────────────────────── */
.a11y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
}
.a11y-row:last-of-type { border-bottom: none; }
.a11y-row-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #0f172a;
    flex: 1;
}
.a11y-row-label i {
    width: 22px;
    text-align: center;
    color: #4f46e5;
    font-size: 14px;
    flex-shrink: 0;
}

/* ── Toggle switch ──────────────────────────────────────── */
.a11y-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    background: #d1d5db;
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
    border: none;
    padding: 0;
}
.a11y-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: inset-inline-start .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.a11y-toggle.on { background: #4f46e5; }
.a11y-toggle.on::after { inset-inline-start: 18px; }
.a11y-toggle:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }

/* ── Footer (reset + statement) ─────────────────────────── */
.a11y-panel-foot {
    padding: 12px 20px 18px;
    border-top: 1px solid #e5e7eb;
    background: #fafbff;
    border-radius: 0 0 14px 14px;
}
.a11y-reset-btn {
    width: 100%;
    padding: 9px 14px;
    border-radius: 8px;
    background: #fff;
    border: 1.5px solid #ef4444;
    color: #ef4444;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: .15s;
}
.a11y-reset-btn:hover,
.a11y-reset-btn:focus-visible {
    background: #ef4444;
    color: #fff;
    outline: 2px solid #fbbf24;
}
.a11y-statement-link {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #4f46e5;
    text-decoration: none;
    padding: 6px;
}
.a11y-statement-link:hover,
.a11y-statement-link:focus-visible {
    text-decoration: underline;
    outline: 2px solid #fbbf24;
    outline-offset: 1px;
    border-radius: 4px;
}

/* ============================================================
   Body classes applied by JS based on user preferences
   ============================================================ */

/* Font-size scaling — controls root font size of all platform pages */
body.a11y-font-110 { font-size: 110% !important; }
body.a11y-font-120 { font-size: 120% !important; }
body.a11y-font-130 { font-size: 130% !important; }
body.a11y-font-140 { font-size: 140% !important; }
body.a11y-font-90  { font-size: 90% !important; }

/* High-contrast mode — black bg, yellow text, plain borders */
body.a11y-contrast {
    background: #000 !important;
    color: #fff !important;
}
body.a11y-contrast *,
body.a11y-contrast *::before,
body.a11y-contrast *::after {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.a11y-contrast a,
body.a11y-contrast a * { color: #fbbf24 !important; }
body.a11y-contrast button,
body.a11y-contrast input,
body.a11y-contrast select,
body.a11y-contrast textarea { border: 2px solid #fff !important; }
body.a11y-contrast img,
body.a11y-contrast video,
body.a11y-contrast svg { filter: grayscale(100%) contrast(110%); }
/* The widget itself stays usable in contrast mode */
body.a11y-contrast .a11y-launcher,
body.a11y-contrast .a11y-launcher * { background-color: #fbbf24 !important; color: #000 !important; }
body.a11y-contrast .a11y-panel,
body.a11y-contrast .a11y-panel * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; }
body.a11y-contrast .a11y-toggle.on { background-color: #fbbf24 !important; }

/* Dark mode — softer than high-contrast, full inversion of light surfaces */
body.a11y-dark { background: #0f172a !important; color: #e2e8f0 !important; }
body.a11y-dark .card,
body.a11y-dark .stat-card,
body.a11y-dark .pay-box,
body.a11y-dark section,
body.a11y-dark main,
body.a11y-dark header,
body.a11y-dark footer { background: #1e293b !important; color: #e2e8f0 !important; }
body.a11y-dark input,
body.a11y-dark select,
body.a11y-dark textarea { background: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; }
body.a11y-dark a { color: #93c5fd !important; }

/* Underline links — force every <a> to be underlined */
body.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 2px !important; }

/* Highlight headings — outline around every heading */
body.a11y-highlight-headings h1,
body.a11y-highlight-headings h2,
body.a11y-highlight-headings h3,
body.a11y-highlight-headings h4,
body.a11y-highlight-headings h5,
body.a11y-highlight-headings h6 {
    outline: 2px dashed #fbbf24 !important;
    outline-offset: 4px !important;
    padding: 4px !important;
    border-radius: 4px !important;
}

/* Pause animations — disable all motion */
body.a11y-no-anim *,
body.a11y-no-anim *::before,
body.a11y-no-anim *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Big cursor — large custom-styled cursor on all elements */
body.a11y-big-cursor,
body.a11y-big-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'><path fill='%23000' stroke='%23fff' stroke-width='1.5' d='M5 2 L5 22 L10 17 L13 23 L16 22 L13 16 L19 16 Z'/></svg>") 0 0, auto !important;
}

/* Readable font — switch to Heebo (Hebrew-friendly, high readability) */
body.a11y-readable {
    font-family: 'Heebo', 'Assistant', 'Arial', sans-serif !important;
}
body.a11y-readable * {
    font-family: 'Heebo', 'Assistant', 'Arial', sans-serif !important;
    letter-spacing: .02em !important;
}

/* Keyboard focus indicator — strong outline on every focused element by default */
*:focus-visible {
    outline: 3px solid #fbbf24 !important;
    outline-offset: 2px !important;
}

/* ── Mobile responsive ─────────────────────────────────── */
@media (max-width: 480px) {
    .a11y-panel { width: calc(100vw - 24px); inset-inline-start: 12px; bottom: 80px; }
    .a11y-launcher { bottom: 12px; inset-inline-start: 12px; }
}