/* ========== TRANSITION สำหรับโหมดต่าง ๆ ========== */
#a11y-wrapper.a11y-dark,
#a11y-wrapper.a11y-contrast,
#a11y-wrapper.a11y-gray,
#a11y-wrapper.a11y-colorblind,
body.a11y-bigtext {
    transition: all 0.25s ease;
}

/* ========== NORMAL ========== */
body.a11y-normal,
#a11y-wrapper.a11y-normal {
    filter: none !important;
    background: inherit !important;
    color: inherit !important;
}

/* ========== DARK MODE ========== */
/* Dark mode ใช้กับ body ได้ → ไม่พังเมนู */
body.a11y-dark {
    background: #000 !important;
    color: #fff !important;
}
body.a11y-dark a {
    color: #00ffff !important;
}

/* ========== HIGH CONTRAST ========== */
/* ห้ามใช้กับ body → ใช้กับ wrapper เท่านั้น */
#a11y-wrapper.a11y-contrast {
    filter: contrast(200%) brightness(85%) !important;
}

/* ========== GRAY MODE ========== */
body.a11y-gray {
    filter: grayscale(100%) !important;
}

/* ========== COLOR BLIND MODE ========== */
#a11y-wrapper.a11y-colorblind {
    filter: grayscale(85%) contrast(110%) !important;
}


/* ปุ่มเมนู Accessibility */
.accessibility-menu .btn {
    background: #f1f1f1;
    border: 1px solid #ccc;
    font-size: 16px;
}
.accessibility-menu .btn:hover {
    background: #e1e1e1;
}