/* Kontener + przycisk – dopasowane do stylu tyranik_pro_animated */
#a11y-container {
    position: fixed;
    bottom: 80px;
    right: 21px;
    z-index: 99999;
    font-family: inherit;
}
/* ikona – prosty obrazek, można zastąpić SVG lub fontem ikon */
.a11y-icon {
    display: block;
    width: 48px;
    height: 48px;
    background-image: url('/media/plg_system_a11y/images/dost.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Pływający przycisk */
#a11y-toggle {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgb(5 76 248);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s var(--transition, 0.3s ease-in-out),
                box-shadow 0.25s var(--transition, 0.3s ease-in-out),
                background 0.25s var(--transition, 0.3s ease-in-out);
    padding: 0;
}

#a11y-toggle:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 12px rgba(0, 200, 50, 0.25);
    background: rgb(5 76 248);
}

#a11y-toggle .a11y-icon {
    font-size: 22px;
    line-height: 1;
}

/* Panel wysuwany z prawej strony */
#a11y-panel {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 260px;
    padding: 18px 16px 16px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 26px rgba(0, 201, 47, 0.65);
    color: #f3f4f6;
    z-index: 99998;

    opacity: 0;
    transform: translateX(120%);
    pointer-events: none;
    transition: opacity 0.3s var(--transition, 0.3s ease-in-out),
                transform 0.3s var(--transition, 0.3s ease-in-out);
}

/* Gdy aria-hidden="false" – panel wysunięty */
#a11y-panel[aria-hidden="false"] {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Nagłówek panelu */
#a11y-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #f3f4f6;
}

/* Przycisk zamknięcia */
#a11y-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: color 0.2s ease;
}
#a11y-close:hover {
    color: #f3f4f6;
}

/* Przyciski opcji */
.a11y-option {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.a11y-option:hover {
    background: rgba(0, 201, 47, 0.18);
    box-shadow: 0 0 14px rgba(0, 201, 47, 0.6);
    transform: translateY(-1px);
}

/* TRYBY DOSTĘPNOŚCI – globalne, mocne */

body.a11y-contrast,
body.a11y-contrast * {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Większy tekst – globalnie */
body.a11y-large-text,
body.a11y-large-text * {
    font-size: 115% !important;
    line-height: 1.6 !important;
}