:root {
    --tope-a11y-primary: #ff8400;
    --tope-a11y-bg: #0d0d0d;
    --tope-a11y-text: #e4e3e0;
    --tope-a11y-border: rgba(255, 255, 255, 0.18);
    --a11y-text-scale: 1;
    --tope-fab-offset-bottom: 16px;
    --tope-fab-offset-right: 16px;
    --tope-a11y-trigger-size: 52px;
    --tope-fab-gap: 12px;
    --tope-fab-orange: #ff8400;
    --tope-fab-orange-soft: rgba(255, 132, 0, 0.85);
    --tope-fab-orange-border: rgba(255, 132, 0, 0.45);
    --tope-fab-icon-color: #12161c;
    --tope-fab-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --tope-fab-bg: linear-gradient(135deg, var(--tope-fab-orange), var(--tope-fab-orange-soft));
}

html {
    font-size: calc(100% * var(--a11y-text-scale, 1));
}

.tope-a11y-root {
    position: fixed;
    right: var(--tope-fab-offset-right);
    bottom: var(--tope-fab-offset-bottom);
    z-index: 99990;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.tope-a11y-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tope-a11y-trigger-size);
    height: var(--tope-a11y-trigger-size);
    border-radius: 999px;
    border: 1px solid var(--tope-fab-orange-border);
    background: var(--tope-fab-bg);
    color: var(--tope-fab-icon-color);
    box-shadow: var(--tope-fab-shadow);
    cursor: pointer;
}

.tope-a11y-trigger:hover,
.tope-a11y-trigger:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(255, 132, 0, 0.35);
    outline: 2px solid #ccff00;
    outline-offset: 2px;
}

.tope-a11y-trigger-icon {
    font-size: 1.35rem;
    line-height: 1;
}

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

.a11y-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(520px, calc(100vw - 32px));
    background: var(--tope-a11y-bg);
    border: 1px solid var(--tope-a11y-border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    padding: 14px;
    color: var(--tope-a11y-text);
}

.a11y-panel-title {
    margin: 0;
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 700;
}

.a11y-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.a11y-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--tope-a11y-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--tope-a11y-text);
    font-size: 0.92rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.a11y-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.a11y-btn:focus-visible {
    outline: 2px solid var(--tope-a11y-primary);
    outline-offset: 2px;
}

.a11y-btn[aria-pressed="true"] {
    background: rgba(255, 132, 0, 0.25);
    border-color: var(--tope-a11y-primary);
}

.a11y-btn-reset {
    border-style: dashed;
    grid-column: 1 / -1;
    justify-content: center;
}

html.a11y-high-contrast,
body.a11y-high-contrast {
    filter: contrast(1.15);
}

html.a11y-high-contrast a,
body.a11y-high-contrast a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

html.a11y-dark-mode,
body.a11y-dark-mode {
    background: #000 !important;
    color: #f5f5f5 !important;
}

html.a11y-dyslexia-font,
html.a11y-dyslexia-font *,
body.a11y-dyslexia-font,
body.a11y-dyslexia-font * {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    letter-spacing: 0.04em;
    word-spacing: 0.12em;
}

html.a11y-links-underline a,
body.a11y-links-underline a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

html.a11y-reduce-motion *,
body.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after,
body.a11y-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

body.a11y-reduce-motion .elementor-background-slideshow,
body.a11y-reduce-motion .swiper-wrapper,
body.a11y-reduce-motion .swiper-slide {
    animation: none !important;
    transition: none !important;
}

@media (max-width: 600px) {
    :root {
        --tope-fab-offset-bottom: 12px;
        --tope-fab-offset-right: 12px;
    }

    .a11y-grid {
        grid-template-columns: 1fr 1fr;
    }

    .a11y-panel {
        width: min(100vw - 24px, 420px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tope-a11y-trigger {
        transition: none;
    }
}