/* Główny kontener - klucz do stabilności */
.zespoly-przewijanie {
    border        : 2px solid #ffa51a;
    border-radius : 15px;
    padding       : 10px 0;
    /* Te 3 właściwości izolują panel i zapobiegają "rozjeżdżaniu się" strony */
    position      : relative;
    overflow      : hidden;
    height        : 90px;
    /* 100px na logo + 2x10px paddingu */
}

/* Wewnętrzny kontener z logotypami */
.scroller-inner {
    /* Używamy flexboxa do ułożenia elementów w jednej linii */
    display   : flex;
    flex-wrap : nowrap;
    gap       : 15px;
    /* Odstęp między logami */
    /* Pozycjonowanie absolutne wyjmuje go z normalnego przepływu dokumentu,
       dzięki czemu nie może "pchać" innych elementów na stronie. */
    position  : absolute;
    top       : 5px;
    /* Dopasowanie do paddingu kontenera */
    left      : 0;
}

/* --- Pojedynczy element (logo zespołu) --- */
/* Zwiększamy specyficzność, aby uniknąć konfliktów z innymi stylami na stronie */
.zespoly-przewijanie .zespol {
    position         : relative;
    /* Dla tooltipa */
    flex-shrink      : 0;
    /* Zapobiega kurczeniu się logotypów */
    height           : 100px;
    width            : 100px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    background-color : rgba(255, 255, 255, 0.05);
    border-radius    : 8px;
    cursor           : pointer;
}

.zespoly-przewijanie .zespol img {
    max-width  : 90%;
    max-height : 90%;
    object-fit : contain;
    display    : block;
}

/* --- Tooltip (dymek) oparty na JavaScript --- */
#zespoly-panel-tooltip {
    visibility     : hidden;
    /* Domyślnie ukryty */
    opacity        : 0;
    position       : fixed;
    /* Pozycjonowanie względem okna przeglądarki */
    z-index        : 9999;
    /* Na samym wierzchu */
    pointer-events : none;
    /* Nie przechwytuje zdarzeń myszy */
    transition     : opacity 0.2s ease, visibility 0.2s ease;

    /* Wygląd dymka */
    background-color : #000063;
    color            : #fff;
    border           : 2px solid #ffa51a;
    border-radius    : 6px;
    padding          : 8px 12px;
    text-align       : center;
    max-width        : 220px;
    white-space      : normal;
}

#zespoly-panel-tooltip.visible {
    visibility : visible;
    opacity    : 1;
}

/* Ukrywamy oryginalny element tooltipa, bo jego treść jest czytana przez JS */
.zespoly-przewijanie .zespol .tooltiptext {
    display : none;
}