/* 1. Określenie szerokości całego paska (musi być, aby aktywować custom scrollbar) */
::-webkit-scrollbar {
    width: 12px;               /* Szerokość paska pionowego */
    height: 12px;              /* Wysokość paska poziomego */
    background-color: #f1f1f1; /* Jasne tło ścieżki paska */
}

/* 2. NAPRAWA DLA CHROME: Definicja samego suwaka (ruchomego elementu) */
::-webkit-scrollbar-thumb {
    background-color: #8a8a8a; /* Kolor suwaka (szary, widoczny) */
    border-radius: 6px;        /* Zaokrąglenie krawędzi suwaka */
    border: 3px solid #f1f1f1; /* Niewidzialny margines wokół suwaka */
}

/* 3. Efekt po najechaniu myszą na suwak (dobra praktyka UX) */
::-webkit-scrollbar-thumb:hover {
    background-color: #787878; /* Przyciemnienie suwaka przy najechaniu */
}