/**
 * Questrom Shared Accessibility Tools
 *
 * Shared accessibility controls, preferences,
 * header utilities, and accessibility panel styling.
 */

/* =========================================================
   QTECH ACCESSIBILITY TOOLS
   Isolated from Astra / Elementor button styles.
========================================================= */

/* ---------------------------------------------------------
   HEADER TRIGGER
--------------------------------------------------------- */

button.qtech-accessibility-trigger {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(179, 27, 52, .35) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--qtech-red) !important;
    font: inherit !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transform: none !important;
    transition: color 160ms ease !important;
}

button.qtech-accessibility-trigger .qtech-accessibility-trigger__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: currentColor !important;
    line-height: 1 !important;
}

button.qtech-accessibility-trigger .qtech-accessibility-trigger__icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: currentColor !important;
    stroke: none !important;
    color: currentColor !important;
}

/* Icon-only trigger. Accessible name remains on the button via aria-label. */
.qtech-accessibility-trigger__label {
    display: none !important;
}

/* Remove Astra / Elementor / global button hover treatments. */
button.qtech-accessibility-trigger:hover,
button.qtech-accessibility-trigger:focus,
button.qtech-accessibility-trigger:active,
button.qtech-accessibility-trigger[aria-expanded="true"] {
    background: rgba(179, 27, 52, .06) !important;
    background-color: rgba(179, 27, 52, .06) !important;
    background-image: none !important;

    border-color: var(--qtech-red) !important;
    box-shadow: none !important;

    color: var(--qtech-red) !important;

    text-decoration: none !important;
    transform: none !important;
}

button.qtech-accessibility-trigger:focus-visible {
    outline: 2px solid var(--qtech-red) !important;
    outline-offset: 3px !important;

    background: rgba(179, 27, 52, .06) !important;
    background-color: rgba(179, 27, 52, .06) !important;

    border-color: var(--qtech-red) !important;
    box-shadow: none !important;

    color: var(--qtech-red) !important;
}

/* Mobile / tablet trigger matches the 41px hamburger control. */
button.qtech-accessibility-trigger--mobile {
    flex: 0 0 41px !important;
    flex-basis: 41px !important;

    width: 41px !important;
    min-width: 41px !important;
    max-width: 41px !important;

    height: 41px !important;
    min-height: 41px !important;
    max-height: 41px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   DESKTOP HEADER ORDER / SEARCH EXPANSION
   Keep the accessibility control to the right of Search so
   Astra's expanding search field does not cover it.
--------------------------------------------------------- */

@media (min-width: 1200px) {

    #ast-desktop-header
    .site-header-primary-section-right {
        display: flex !important;
        align-items: center !important;
    }

    #ast-desktop-header
    .site-header-primary-section-right
    .ast-header-search {
        order: 1 !important;
    }

    #ast-desktop-header
    .site-header-primary-section-right
    .qtech-accessibility-trigger {
        order: 2 !important;
        position: relative !important;
        z-index: 3 !important;

        margin-left: 12px !important;
    }

    #ast-desktop-header
    .site-header-primary-section-right
    .qtech-theme-toggle {
        order: 3 !important;
        position: relative !important;
        z-index: 3 !important;
    }

    #ast-desktop-header
    .site-header-primary-section-right
    .ast-header-button-1 {
        order: 4 !important;
    }

    #ast-desktop-header
    .site-header-primary-section-right
    .ast-header-html-1 {
        order: 5 !important;
    }
}



/* ---------------------------------------------------------
   TABLET / MOBILE HEADER ORDER
   Astra switches to its compact header below 1200px.
   Keep Accessibility immediately to the left of the hamburger.
--------------------------------------------------------- */

@media (max-width: 1199px) {

    #ast-mobile-header
    .site-header-primary-section-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #ast-mobile-header
    .qtech-accessibility-trigger--mobile {
        order: 1 !important;
        position: relative !important;
        z-index: 3 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #ast-mobile-header
    .qtech-theme-toggle--mobile {
        order: 2 !important;
        position: relative !important;
        z-index: 3 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #ast-mobile-header
    [data-section="section-header-mobile-trigger"] {
        order: 3 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}



/* ---------------------------------------------------------
   TABLET HEADER RIGHT GUTTER
   Astra's compact header needs a little breathing room before
   the viewport edge in the 922-1199px range.
--------------------------------------------------------- */

@media (min-width: 922px) and (max-width: 1199px) {
    #ast-mobile-header .site-header-primary-section-right {
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }
}


/* ---------------------------------------------------------
   PANEL WRAPPER
--------------------------------------------------------- */

.qtech-a11y-panel[hidden] {
    display: none !important;
}

.qtech-a11y-panel {
    position: fixed !important;

    top: 78px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;

    z-index: 100100 !important;

    width: min(340px, calc(100vw - 32px)) !important;
    max-width: 340px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

.qtech-a11y-panel .qtech-a11y-panel__backdrop {
    position: fixed !important;
    inset: 0 !important;

    background: rgba(7, 17, 31, .18) !important;

    z-index: 100099 !important;
    cursor: default;
}

.qtech-a11y-panel .qtech-a11y-panel__dialog {
    position: relative !important;
    z-index: 100100 !important;
}


/* ---------------------------------------------------------
   PANEL CARD
--------------------------------------------------------- */

.qtech-a11y-panel .qtech-a11y-panel__dialog {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 20px !important;

    background: var(--qtech-surface) !important;

    border: 1px solid var(--qtech-border) !important;
    border-radius: 12px !important;

    box-shadow: var(--qtech-component-shadow) !important;

    color: var(--qtech-text) !important;

    text-align: left !important;
}


/* ---------------------------------------------------------
   PANEL HEADER
--------------------------------------------------------- */

.qtech-a11y-panel .qtech-a11y-panel__header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.qtech-a11y-panel .qtech-a11y-panel__eyebrow {
    margin: 0 0 5px !important;
    padding: 0 !important;

    color: var(--qtech-red) !important;

    font-family: inherit !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

.qtech-a11y-panel .qtech-a11y-panel__title {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--qtech-heading) !important;

    font-family: inherit !important;
    font-size: 20px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}


/* ---------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------- */

.qtech-a11y-panel button.qtech-a11y-panel__close {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 32px !important;

    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;

    margin: -4px -4px 0 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 6px !important;

    box-shadow: none !important;

    color: var(--qtech-text-muted) !important;

    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    text-decoration: none !important;

    cursor: pointer !important;
}

.qtech-a11y-panel button.qtech-a11y-panel__close:hover,
.qtech-a11y-panel button.qtech-a11y-panel__close:focus,
.qtech-a11y-panel button.qtech-a11y-panel__close:active {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;

    margin: -4px -4px 0 0 !important;
    padding: 0 !important;

    background: var(--qtech-surface-hover) !important;

    border: 0 !important;
    box-shadow: none !important;

    color: var(--qtech-heading) !important;

    transform: none !important;
}

.qtech-a11y-panel button.qtech-a11y-panel__close:focus-visible {
    outline: 2px solid var(--qtech-red) !important;
    outline-offset: 2px !important;
}


/* ---------------------------------------------------------
   INTRO
--------------------------------------------------------- */

.qtech-a11y-panel .qtech-a11y-panel__intro {
    margin: 8px 0 18px !important;
    padding: 0 !important;

    color: var(--qtech-text-muted) !important;

    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}


/* ---------------------------------------------------------
   TEXT SIZE CONTROL
--------------------------------------------------------- */

.qtech-a11y-panel .qtech-a11y-text-size {
    margin: 0 !important;
    padding: 13px !important;

    background: var(--qtech-surface-soft) !important;

    border: 1px solid var(--qtech-border) !important;
    border-radius: 9px !important;
}

.qtech-a11y-panel .qtech-a11y-setting__label {
    display: block !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    color: var(--qtech-heading) !important;

    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.qtech-a11y-panel .qtech-a11y-text-size__controls {
    display: grid !important;
    grid-template-columns: 42px minmax(72px, 1fr) 42px !important;
    align-items: center !important;
    gap: 9px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.qtech-a11y-panel button.qtech-a11y-size-button {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--qtech-surface) !important;
    background-image: none !important;

    border: 1px solid var(--qtech-input-border) !important;
    border-radius: 6px !important;

    box-shadow: none !important;

    color: var(--qtech-heading) !important;

    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-decoration: none !important;

    cursor: pointer !important;
}

.qtech-a11y-panel button.qtech-a11y-size-button:hover:not(:disabled),
.qtech-a11y-panel button.qtech-a11y-size-button:focus:not(:disabled),
.qtech-a11y-panel button.qtech-a11y-size-button:active:not(:disabled) {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--qtech-surface-hover) !important;

    border-color: var(--qtech-red) !important;

    box-shadow: none !important;

    color: var(--qtech-heading) !important;

    transform: none !important;
}

.qtech-a11y-panel button.qtech-a11y-size-button:focus-visible {
    outline: 2px solid var(--qtech-red) !important;
    outline-offset: 2px !important;
}

.qtech-a11y-panel button.qtech-a11y-size-button:disabled {
    opacity: .42 !important;
    cursor: not-allowed !important;
}

.qtech-a11y-panel .qtech-a11y-size-value {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--qtech-heading) !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-align: center !important;
}


/* ---------------------------------------------------------
   CHECKBOX SETTINGS
--------------------------------------------------------- */

.qtech-a11y-panel .qtech-a11y-settings {
    display: grid !important;
    gap: 0 !important;

    margin: 12px 0 0 !important;
    padding: 0 !important;

    border-top: 1px solid var(--qtech-divider) !important;
}

.qtech-a11y-panel label.qtech-a11y-setting {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    min-height: 44px !important;

    margin: 0 !important;
    padding: 8px 2px !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid var(--qtech-divider) !important;
    border-radius: 0 !important;

    color: var(--qtech-heading) !important;

    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    text-transform: none !important;

    cursor: pointer !important;
}

.qtech-a11y-panel label.qtech-a11y-setting:hover {
    background: transparent !important;
}

.qtech-a11y-panel .qtech-a11y-setting input[type="checkbox"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;

    flex: 0 0 17px !important;

    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;

    margin: 0 !important;
    padding: 0 !important;

    accent-color: var(--qtech-red) !important;
}

.qtech-a11y-panel .qtech-a11y-setting input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--qtech-red) !important;
    outline-offset: 2px !important;
}

.qtech-a11y-panel .qtech-a11y-setting span {
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font: inherit !important;
}



/* Visual state feedback for settings */

.qtech-a11y-panel label.qtech-a11y-setting {
    position: relative !important;
    padding-left: 14px !important;
    padding-right: 10px !important;
    transition:
        background-color 160ms ease,
        border-color 160ms ease !important;
}

.qtech-a11y-panel label.qtech-a11y-setting.is-active {
    background: var(--qtech-cyan-soft) !important;
}

.qtech-a11y-panel label.qtech-a11y-setting.is-active::before {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    bottom: 8px !important;
    left: 2px !important;
    width: 3px !important;
    border-radius: 999px !important;
    background: var(--qtech-red) !important;
}


.qtech-a11y-panel label.qtech-a11y-setting > span:not(.qtech-a11y-setting__state) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.qtech-a11y-panel .qtech-a11y-setting__state {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    min-width: 32px !important;

    margin-left: 12px !important;
    padding: 3px 7px !important;

    border-radius: 999px !important;

    background: var(--qtech-surface-soft) !important;
    border: 1px solid var(--qtech-border) !important;

    color: var(--qtech-text-muted) !important;

    font-family: inherit !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.qtech-a11y-panel label.qtech-a11y-setting.is-active .qtech-a11y-setting__state {
    background: var(--qtech-surface) !important;
    border-color: rgba(179, 27, 52, .28) !important;
    color: var(--qtech-red) !important;
}

.qtech-a11y-panel .qtech-a11y-text-size.is-active {
    background: var(--qtech-cyan-soft) !important;
    border-color: rgba(179, 27, 52, .24) !important;
}

.qtech-a11y-panel .qtech-a11y-text-size.is-active .qtech-a11y-size-value {
    color: var(--qtech-red) !important;
}


/* ---------------------------------------------------------
   RESET
--------------------------------------------------------- */

.qtech-a11y-panel .qtech-a11y-panel__actions {
    margin: 15px 0 0 !important;
    padding: 0 !important;
}

.qtech-a11y-panel button.qtech-a11y-reset {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: inline !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: var(--qtech-red) !important;

    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;

    cursor: pointer !important;
}

.qtech-a11y-panel button.qtech-a11y-reset:hover,
.qtech-a11y-panel button.qtech-a11y-reset:focus,
.qtech-a11y-panel button.qtech-a11y-reset:active {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    color: var(--qtech-red-hover) !important;

    transform: none !important;
}

.qtech-a11y-panel button.qtech-a11y-reset:focus-visible {
    outline: 2px solid var(--qtech-red) !important;
    outline-offset: 3px !important;
}



/* ---------------------------------------------------------
   ACCESSIBILITY DISCLAIMER
--------------------------------------------------------- */

.qtech-a11y-panel .qtech-a11y-panel__disclaimer {
    margin: 15px 0 0 !important;
    padding: 12px 0 0 !important;

    border-top: 1px solid var(--qtech-divider) !important;

    color: var(--qtech-text-muted) !important;

    font-family: inherit !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}


/* ---------------------------------------------------------
   FOOTER LINKS
--------------------------------------------------------- */

.qtech-a11y-panel .qtech-a11y-panel__footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;

    margin: 17px 0 0 !important;
    padding: 13px 0 0 !important;

    border-top: 1px solid var(--qtech-divider) !important;

    color: var(--qtech-text-muted) !important;

    font-family: inherit !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

.qtech-a11y-panel .qtech-a11y-panel__footer a {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--qtech-red) !important;

    font: inherit !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

.qtech-a11y-panel .qtech-a11y-panel__footer a:hover,
.qtech-a11y-panel .qtech-a11y-panel__footer a:focus-visible {
    color: var(--qtech-red-hover) !important;

    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}


/* =========================================================
   GLOBAL FLOATING UTILITIES
========================================================= */

@media (min-width: 641px) {
    #ast-scroll-top {
        right: 24px !important;
        bottom: 92px !important;
    }
}

@media (max-width: 640px) {
    #ast-scroll-top {
        right: 20px !important;
        bottom: 22px !important;
    }
}


/* =========================================================
   USER PREFERENCES
========================================================= */

/* Text size
 * Applied by JavaScript using each text element's computed font size.
 * This works even when Elementor/Astra use explicit px values.
 */

/* Enhanced keyboard focus */

html[data-qtech-focus="true"] body :where(
    a,
    button,
    input,
    textarea,
    select,
    summary,
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 3px solid var(--qtech-red) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px var(--qtech-surface) !important;
}

/* Underline links */
html[data-qtech-underline-links="true"] body a:not(.qtech-accessibility-trigger),
html[data-qtech-underline-links="true"] body a:not(.qtech-accessibility-trigger) * {
    text-decoration-line: underline !important;
    text-underline-offset: .14em !important;
}

/* Keep the accessibility panel's own links visually unchanged. */
html[data-qtech-underline-links="true"] .qtech-a11y-panel a,
html[data-qtech-underline-links="true"] .qtech-a11y-panel a * {
    text-decoration: none !important;
}

html[data-qtech-underline-links="true"] .qtech-a11y-panel a:hover,
html[data-qtech-underline-links="true"] .qtech-a11y-panel a:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* Increased spacing */

html[data-qtech-spacing="true"] body :where(
    p, li, a, button, label, input, textarea, select,
    h1, h2, h3, h4, h5, h6,
    th, td, dt, dd, blockquote, figcaption
) {
    letter-spacing: .045em !important;
    word-spacing: .14em !important;
}

html[data-qtech-spacing="true"] body :where(p, li, blockquote) {
    line-height: 1.85 !important;
}

/* Comfortable reading width */

html[data-qtech-reading-width="true"] body :where(
    .elementor-widget-text-editor,
    .elementor-widget-theme-post-content p,
    .elementor-widget-theme-post-content ul,
    .elementor-widget-theme-post-content ol,
    .elementor-widget-theme-post-content blockquote
) {
    max-width: 72ch !important;
}

/* Do not enlarge spacing inside the accessibility controls themselves. */

html[data-qtech-spacing="true"] .qtech-a11y-panel,
html[data-qtech-spacing="true"] .qtech-a11y-panel *,
html[data-qtech-spacing="true"] .qtech-accessibility-trigger,
html[data-qtech-spacing="true"] .qtech-accessibility-trigger * {
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* High contrast */
html[data-qtech-contrast="true"] {
    --qtech-text: var(--qtech-heading);
    --qtech-text-muted: var(--qtech-heading);
    --qtech-border: var(--qtech-heading);
    --qtech-divider: var(--qtech-border);
    --qtech-input-border: var(--qtech-heading);
}


/* Reduce motion */
html[data-qtech-reduce-motion="true"] {
    scroll-behavior: auto !important;
}

html[data-qtech-reduce-motion="true"] *,
html[data-qtech-reduce-motion="true"] *::before,
html[data-qtech-reduce-motion="true"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 921px) {

    .qtech-a11y-panel {
        top: 68px !important;
        right: 14px !important;

        width: min(340px, calc(100vw - 28px)) !important;
        max-width: none !important;
    }

    .qtech-a11y-panel .qtech-a11y-panel__dialog {
        padding: 18px !important;
    }

}

@media (max-width: 767px) {

    .qtech-a11y-panel {
        z-index: 100100 !important;
   }

    .qtech-a11y-panel .qtech-a11y-panel__dialog {
        max-height: calc(100vh -  140px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}

@media (max-width: 480px) {

    .qtech-a11y-panel {
        top: 70px !important;
        right: 16px !important;

        width: calc(100vw - 32px) !important;
        max-width: none !important;
    }

    .qtech-a11y-panel .qtech-a11y-panel__dialog {
        max-height: calc(100vh - 92px) !important;
        overflow-y: auto !important;

        padding: 14px 16px !important;
    }

    .qtech-a11y-panel .qtech-a11y-panel__eyebrow {
        margin-bottom: 3px !important;
        font-size: 9px !important;
    }

    .qtech-a11y-panel .qtech-a11y-panel__title {
        font-size: 18px !important;
    }

    .qtech-a11y-panel .qtech-a11y-panel__intro {
        margin: 6px 0 14px !important;
        font-size: 12px !important;
    }

    .qtech-a11y-panel .qtech-a11y-text-size {
        padding: 11px !important;
    }

    .qtech-a11y-panel .qtech-a11y-setting__label {
        margin-bottom: 6px !important;
    }

    .qtech-a11y-panel .qtech-a11y-settings {
        margin-top: 10px !important;
    }

    .qtech-a11y-panel label.qtech-a11y-setting {
        min-height: 40px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .qtech-a11y-panel .qtech-a11y-panel__actions {
        margin-top: 11px !important;
    }

    .qtech-a11y-panel .qtech-a11y-panel__disclaimer {
        margin-top: 11px !important;
        padding-top: 10px !important;
    }

    .qtech-a11y-panel .qtech-a11y-panel__footer {
        margin-top: 11px !important;
        padding-top: 10px !important;
    }
}


/* =========================================================
   REDUCED MOTION PREFERENCE
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .qtech-a11y-panel,
    .qtech-a11y-panel *,
    .qtech-accessibility-trigger {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

}

/* ---------------------------------------------------------
   LIGHT / DARK THEME TRIGGER
--------------------------------------------------------- */

button.qtech-theme-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;

    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 38px !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 0 0 8px !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;

    border: 1px solid rgba(179, 27, 52, .35) !important;
    border-radius: 6px !important;

    box-shadow: none !important;

    color: var(--qtech-red) !important;

    font: inherit !important;
    line-height: 1 !important;

    cursor: pointer !important;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease !important;
}

/* Hover and pressed state */

button.qtech-theme-toggle:hover,
button.qtech-theme-toggle:active {
    background: rgba(179, 27, 52, .06) !important;
    border-color: var(--qtech-red) !important;
    color: var(--qtech-red) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Keyboard focus only */

button.qtech-theme-toggle:focus-visible {
    outline: 2px solid var(--qtech-red) !important;
    outline-offset: 3px !important;
}

/* Remove persistent mouse-click focus styling */

button.qtech-theme-toggle:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.qtech-theme-toggle__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    height: 20px !important;

    color: currentColor !important;
}

.qtech-theme-toggle__icon svg {
    display: block !important;

    width: 20px !important;
    height: 20px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.qtech-theme-toggle__icon svg circle {
    fill: none !important;
}

.qtech-theme-toggle__icon svg path {
    fill: none !important;
}


/* Moon uses a filled silhouette. */
.qtech-theme-toggle[aria-pressed="false"]
.qtech-theme-toggle__icon svg path {
    fill: currentColor !important;
    stroke: none !important;
}


/* Match compact Astra hamburger dimensions. */
button.qtech-theme-toggle--mobile {
    flex: 0 0 41px !important;

    width: 41px !important;
    min-width: 41px !important;
    max-width: 41px !important;

    height: 41px !important;
    min-height: 41px !important;
    max-height: 41px !important;

    margin: 0 !important;
}