/* Panel Dostępności */
#panel-dostepnosci {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(calc(-50% - 50px)); /* Przesunięcie w GÓRĘ */
    background-color: #ffffff00;
    /* border: 1px solid #ccc; */
    border-radius: 0 5px 5px 0;
    z-index: 9999;
    display: flex; /* Ustawienie elementów obok siebie */
    align-items: center; /* Wyrównanie w pionie */
}

/* Przyciski wewnątrz panelu */
#panel-dostepnosci button {
    background: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    border: solid 1px #dddddd;
    border-radius: 10px;
}

#panel-dostepnosci button:hover {
    background-color: #e0e0e0;
}

#przelacznik-panelu {
    border-right: 1px solid #ccc;
    font-size: 24px !important; /* DODAJ !important */
    line-height: 1;
    padding: 6px 0px !important;
}

#opcje-panelu {
    display: flex; /* Ustawienie przycisków opcji obok siebie */
    flex-direction: column; /* Ale w kolumnie, jeden pod drugim */
    max-width: 0; /* Domyślnie schowane */
    overflow: hidden; /* Ukrycie zawartości, która się nie mieści */
    transition: max-width 0.4s ease-in-out; /* Płynna animacja */
}

/* Stan aktywny - panel jest wysunięty */
#panel-dostepnosci.panel-aktywny #opcje-panelu {
    max-width: 150px; /* Szerokość po wysunięciu - można dostosować */
}

/* 1. Ustawia główne tło dla całej strony i domyślny kolor tekstu */
body.wysoki-kontrast {
    background-color: #000 !important;
    color: #ff0 !important;
}

/* 2. Resetuje wszystkie elementy wewnątrz */
.wysoki-kontrast * {
    background-color: transparent !important; /* NAJWAŻNIEJSZE: Tła stają się przezroczyste */
    background-image: none !important;      /* Usuwa obrazki w tle */
    box-shadow: none !important;             /* Usuwa cienie */
    text-shadow: none !important;            /* Usuwa cienie tekstu */
    color: inherit !important;               /* Każdy element dziedziczy kolor po rodzicu */
    border-color: #ff0 !important;           /* Zmienia kolor ramek na żółty */
}

/* 3. Specjalne style dla linków, aby odróżniały się od tekstu */
.wysoki-kontrast a {
    color: #00FFFF !important; /* Cyjanowy (jasnoniebieski) kolor dla linków */
    text-decoration: underline !important;
}

/* 4. Specjalne style dla przycisków */
.wysoki-kontrast button,
.wysoki-kontrast input[type="button"],
.wysoki-kontrast input[type="submit"] {
    background: #000 !important;
    border: 2px solid #ff0 !important;
    color: #ff0 !important;
}

/* 1. Ta reguła blokuje pasek przewijania, gdy tryb szarości jest aktywny */
body.skala-szarosci {
    overflow-x: hidden;
}

/* 2. Ta reguła nakłada filtr na wszystko OPRÓCZ panelu */
body.skala-szarosci > *:not(#panel-dostepnosci) {
    filter: grayscale(100%);
}

/* Styl dla przycisku Reset */
#przycisk-reset {
    background-color: #e0efff; /* Jasnoniebieskie tło dla odróżnienia */
}

#przycisk-reset:hover {
    background-color: #cce0ff;
}

/* Celuje w <img>, których źródło kończy się na .png LUB .svg ORAZ w tagi <svg> wstawione bezpośrednio w kodzie */
.wysoki-kontrast img[src$=".png"],
.wysoki-kontrast img[src$=".svg"],
.wysoki-kontrast svg {
    filter: invert(1) !important;
}