:root {
    --ag-a11y-bg: #871333;
    --ag-a11y-text: #ffffff;
    --ag-a11y-menu-bg: #ffffff;
    --ag-a11y-menu-text: #333333;
    --ag-a11y-border: #f0f0f0;
    --ag-a11y-hover: #f9f9f9;
}

#ag-accessibility-widget {
    position: fixed !important;
    top: 25%;
    z-index: 2147483647;
    width: 260px;
}

/* Base states: Offscreen */
#ag-accessibility-widget.ag-a11y-right {
    right: -260px;
    transition: right 400ms cubic-bezier(.23, 1, .32, 1);
}

#ag-accessibility-widget.ag-a11y-left {
    left: -260px;
    transition: left 400ms cubic-bezier(.23, 1, .32, 1);
}

/* Active states: Onscreen */
#ag-accessibility-widget.ag-a11y-active.ag-a11y-right {
    right: 0;
}

#ag-accessibility-widget.ag-a11y-active.ag-a11y-left {
    left: 0;
}

#ag-accessibility-toggle {
    background-color: var(--ag-a11y-bg);
    color: var(--ag-a11y-text);
    border: none;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    border-radius: 0;
    outline: none !important;
}

#ag-accessibility-toggle:focus,
#ag-accessibility-toggle:active {
    outline: none !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.15) !important;
}

/* Button protrudes out of the hidden container */
#ag-accessibility-widget.ag-a11y-right #ag-accessibility-toggle {
    right: 260px;
}

#ag-accessibility-widget.ag-a11y-left #ag-accessibility-toggle {
    left: 260px;
}

#ag-accessibility-menu {
    background: var(--ag-a11y-menu-bg);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    width: 260px;
    border-radius: 0;
}

#ag-accessibility-widget.ag-a11y-right #ag-accessibility-menu,
#ag-accessibility-widget.ag-a11y-left #ag-accessibility-menu {
    border-radius: 0;
}

.ag-a11y-header {
    padding: 20px 20px 10px 20px;
    border-bottom: none;
}

.ag-a11y-header p {
    margin: 0;
    font-size: 16px;
    color: var(--ag-a11y-menu-text);
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    letter-spacing: -0.3px;
}

.ag-a11y-options {
    list-style: none;
    margin: 0;
    padding: 0 0 15px 0;
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.ag-a11y-options::-webkit-scrollbar {
    width: 4px;
}
.ag-a11y-options::-webkit-scrollbar-track {
    background: transparent;
}
.ag-a11y-options::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.ag-a11y-options li {
    border-bottom: none;
    padding: 0;
}

.ag-a11y-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ag-a11y-menu-text);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
    white-space: nowrap;
}

.ag-a11y-btn .ag-a11y-icon-container {
    width: 18px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.ag-a11y-btn:hover {
    background: var(--ag-a11y-hover);
}

.ag-a11y-btn:focus,
.ag-a11y-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.ag-a11y-btn.active {
    font-weight: 600;
    color: var(--ag-a11y-menu-text);
}

.ag-a11y-btn.active svg {
    /* active SVG styles if needed */
}

/* Accessibility Modifications applied to HTML or Body */

html.ag-a11y-grayscale {
    filter: grayscale(100%) !important;
}

html.ag-a11y-high-contrast {
    filter: contrast(150%) saturate(150%) !important;
}

html.ag-a11y-negative {
    filter: invert(100%) hue-rotate(180deg) !important;
    background-color: #000 !important;
}
html.ag-a11y-negative body {
    background-color: transparent !important;
}

html.ag-a11y-light-bg,
html.ag-a11y-light-bg body,
html.ag-a11y-light-bg div,
html.ag-a11y-light-bg span {
    background-color: #ffffff !important;
    color: #111111 !important;
    border-color: #cccccc !important;
}

html.ag-a11y-underline a {
    text-decoration: underline !important;
}

html.ag-a11y-readable-font, 
html.ag-a11y-readable-font body,
html.ag-a11y-readable-font * {
    font-family: Arial, Helvetica, sans-serif !important;
}