/* MA Accessibility Loader 3.2.2 */
#ma-accessibility-loader-button.mw-accessibility-button {
    all: initial !important;
    position: fixed !important;
    cursor: pointer !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    background-image: none !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    transition: transform .2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font: inherit !important;
    line-height: 1 !important;
}

/*
 * Position and color are driven by classes/CSS variables printed directly on
 * the button. This does not depend on wp_add_inline_style(), which makes it
 * resilient to LiteSpeed UCSS/critical-CSS optimization and stylesheet
 * reordering. loader.js applies the same values again as a final fallback.
 */
@media screen and (min-width: 768px) {
    #ma-accessibility-loader-button.mw-accessibility-button {
        background-color: var(--ma-desktop-color, #2196f3) !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

    #ma-accessibility-loader-button.ma-desktop-top-left {
        left: var(--ma-desktop-x, 10px) !important;
        top: var(--ma-desktop-y, 10px) !important;
        transform: scale(1) !important;
    }

    #ma-accessibility-loader-button.ma-desktop-middle-left {
        left: var(--ma-desktop-x, 10px) !important;
        top: 50% !important;
        transform: translateY(-50%) scale(1) !important;
    }

    #ma-accessibility-loader-button.ma-desktop-bottom-left {
        left: var(--ma-desktop-x, 10px) !important;
        bottom: var(--ma-desktop-y, 10px) !important;
        transform: scale(1) !important;
    }

    #ma-accessibility-loader-button.ma-desktop-top-right {
        right: var(--ma-desktop-x, 10px) !important;
        top: var(--ma-desktop-y, 10px) !important;
        transform: scale(1) !important;
    }

    #ma-accessibility-loader-button.ma-desktop-middle-right {
        right: var(--ma-desktop-x, 10px) !important;
        top: 50% !important;
        transform: translateY(-50%) scale(1) !important;
    }

    #ma-accessibility-loader-button.ma-desktop-bottom-right {
        right: var(--ma-desktop-x, 10px) !important;
        bottom: var(--ma-desktop-y, 10px) !important;
        transform: scale(1) !important;
    }
}

@media screen and (max-width: 767px) {
    #ma-accessibility-loader-button.mw-accessibility-button {
        background-color: var(--ma-mobile-color, #2196f3) !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

    #ma-accessibility-loader-button.ma-mobile-top-left {
        left: calc(var(--ma-mobile-x, 15px) + env(safe-area-inset-left, 0px)) !important;
        top: calc(var(--ma-mobile-y, 85px) + env(safe-area-inset-top, 0px)) !important;
        transform: scale(1) !important;
    }

    #ma-accessibility-loader-button.ma-mobile-middle-left {
        left: calc(var(--ma-mobile-x, 15px) + env(safe-area-inset-left, 0px)) !important;
        top: 50% !important;
        transform: translateY(-50%) scale(1) !important;
    }

    #ma-accessibility-loader-button.ma-mobile-bottom-left {
        left: calc(var(--ma-mobile-x, 15px) + env(safe-area-inset-left, 0px)) !important;
        bottom: calc(var(--ma-mobile-y, 85px) + env(safe-area-inset-bottom, 0px)) !important;
        transform: scale(1) !important;
    }

    #ma-accessibility-loader-button.ma-mobile-top-right {
        right: calc(var(--ma-mobile-x, 15px) + env(safe-area-inset-right, 0px)) !important;
        top: calc(var(--ma-mobile-y, 85px) + env(safe-area-inset-top, 0px)) !important;
        transform: scale(1) !important;
    }

    #ma-accessibility-loader-button.ma-mobile-middle-right {
        right: calc(var(--ma-mobile-x, 15px) + env(safe-area-inset-right, 0px)) !important;
        top: 50% !important;
        transform: translateY(-50%) scale(1) !important;
    }

    #ma-accessibility-loader-button.ma-mobile-bottom-right {
        right: calc(var(--ma-mobile-x, 15px) + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(var(--ma-mobile-y, 85px) + env(safe-area-inset-bottom, 0px)) !important;
        transform: scale(1) !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    #ma-accessibility-loader-button.ma-desktop-middle-left:hover,
    #ma-accessibility-loader-button.ma-desktop-middle-right:hover,
    #ma-accessibility-loader-button.ma-mobile-middle-left:hover,
    #ma-accessibility-loader-button.ma-mobile-middle-right:hover {
        transform: translateY(-50%) scale(1.12) !important;
    }

}

/*
 * Readabler may style custom trigger pseudo-elements. Keep the MA trigger
 * visually self-contained so opening/closing the panel cannot leave a ghost,
 * tail, halo, or duplicate decorative layer behind the button.
 */
#ma-accessibility-loader-button.mw-accessibility-button::before,
#ma-accessibility-loader-button.mw-accessibility-button::after,
#ma-accessibility-loader-button.mw-accessibility-button.readabler-trigger::before,
#ma-accessibility-loader-button.mw-accessibility-button.readabler-trigger::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    background: none !important;
    transform: none !important;
    pointer-events: none !important;
}

#ma-accessibility-loader-button.mw-accessibility-button.readabler-trigger {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    background-image: none !important;
}

/*
 * Readabler renders its own floating accessibility button when its frontend is
 * active. MA Loader is the site's only visible trigger, so keep Readabler's
 * native floating trigger hidden. The panel itself is not affected.
 */
html body .mdp-readabler-trigger-button-box,
html body #mdp-readabler-trigger-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#ma-accessibility-loader-button.mw-accessibility-button:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}

#ma-accessibility-loader-button.mw-accessibility-button[aria-busy="true"] {
    cursor: progress !important;
}

#ma-accessibility-loader-button.mw-accessibility-button > svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: #fff !important;
    color: #fff !important;
    pointer-events: none !important;
}

#ma-accessibility-loader-button.mw-accessibility-button > svg path {
    fill: #fff !important;
    stroke: none !important;
}