/*
 * Nasze drobne poprawki wyglądu (etap "tylko front").
 * NIE ruszamy oryginalnych style.css / modules.css — to warstwa 1:1 z produkcją.
 */

/* Sub-newsy: stała wysokość kadru (jak na produkcji ~197px), żeby nakładka z
   tytułem nie wychodziła poza obrazek i kafle się nie nakładały niezależnie od
   proporcji zdjęcia. */
section.main-news .col-lg-4 .element img.pic {
    height: 197px;
    object-fit: cover;
    object-position: top center;
}

/* Duży news — spójny, ładny kadr na szerokich ekranach. */
section.main-news .col-lg-8 .element img.pic {
    height: 412px;
    object-fit: cover;
    object-position: top center;
}

/* Miniatury "pozostałych wiadomości" — równe kadry w liście. */
section.contents .other-news .element .col-lg-5 img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

/* Miniatury "najnowszych wiadomości" — równe kadry. */
section.latest-news .element img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

/* Mini-tabela: wiersz Tottenhamu (tr.club) — podświetlenie (brak w oryginalnym CSS). */
section.contents .right-box .mini-table table tr.club {
    background: #fdf3d1;
    font-weight: bold;
}
section.contents .right-box .mini-table table tr.club td.team {
    box-shadow: inset 4px 0 0 #55b7e5;
}

/* Slider meczów — strzałki Splide czytelne na ciemnym tle. */
section.matches { margin: 30px 0; }
section.matches .splide__arrow {
    background: rgba(85, 183, 229, .9);
    opacity: 1;
    width: 2.2em;
    height: 2.2em;
}
section.matches .splide__arrow:hover:not(:disabled) {
    background: #f9cb00;
}
section.matches .splide__arrow svg { fill: #fff; }
section.matches .splide__arrow--prev { left: -0.5em; }
section.matches .splide__arrow--next { right: -0.5em; }
section.matches .badge img { height: 60px; object-fit: contain; }

/*
 * Komentarze — uzupełnienia do oryginalnego `modules.css`.
 *
 * Stary CMS pozwalał komentować wyłącznie zalogowanym, więc nie ma reguł na
 * pola gościa, komunikaty ani pułapkę na boty. Reszta wyglądu (`.comment`,
 * `.subcomment`, `.comment_form`) jest z oryginału i jej NIE dotykamy.
 */
.contents .news .comments .comment-guest-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 10px 0;
}
.contents .news .comments .comment-guest-fields input {
    flex: 1 1 220px;
    padding: 10px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    font-size: 14px;
}
.contents .news .comments .comment-guest-fields input:focus {
    outline: 2px solid #55b7e5;
    outline-offset: -2px;
}

/* Honeypot: musi zostać w drzewie dostępności poza zasięgiem wzroku,
   dlatego zsuwamy go z ekranu zamiast `display:none` (część botów pomija ukryte). */
.contents .news .comments .comment-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contents .news .comments .comment-flash,
.contents .news .comments .comment-error {
    margin: 15px 0;
    padding: 12px 15px;
    border-radius: 4px;
    font-size: 14px;
}
.contents .news .comments .comment-flash {
    background: #eff8fd;
    border: 1px solid #55b7e5;
    color: #173c4e;
}
.contents .news .comments .comment-error {
    background: #fdeeee;
    border: 1px solid #e05555;
    color: #7a1f1f;
}
.contents .news .comments .comment-note {
    margin: 20px 0;
    font-size: 14px;
    color: #6f6f6f;
}
.contents .news .comments .comment-note a { font-weight: bold; }

/* Wpis czekający na moderację — widoczny tylko dla swojego autora. */
.contents .news .comments .comment .feed .text .date_update { color: #a06800; }

/* ==========================================================================
   ANKIETY (ETAP 4)
   Oryginalny CSS stylował przycisk jako `span.more` i klikał JS-em. U nas to
   prawdziwy `<button>` w formularzu (działa bez JS), więc te same reguły
   trzeba powtórzyć dla `button.more` — `style.css` zostaje nietknięty.
   ========================================================================== */
.contents .col-lg-4 .poll button.more,
.contents .poll .polls .poll button.more {
    background: #55b7e5;
    color: #173c4e;
    font-weight: bold;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 13px;
    display: block;
    width: 100%;
    margin: 15px 0 30px 0;
    text-align: center;
    border: 0;
    cursor: pointer;
}
.contents .col-lg-4 .poll button.more:hover,
.contents .poll .polls .poll button.more:hover {
    background: #f9cb00;
    color: #554400;
}

/* Cała odpowiedź klikalna — radio jest małe, a palec na telefonie duży. */
.contents .col-lg-4 .poll .answers .element label.answer {
    display: block;
    margin: 0;
    cursor: pointer;
}

/* Własny głos — po powrocie z formularza widać, gdzie się kliknęło. */
.contents .poll .answers .element .answer.poll-mine,
.contents .poll .polls .poll .answer.poll-mine { font-weight: bold; }

.contents .right-box .poll .poll-flash,
.contents .right-box .poll .poll-error,
.poll-flash,
.poll-error {
    margin: 15px 0;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13px;
}
.poll-flash {
    background: #eff8fd;
    border: 1px solid #55b7e5;
    color: #173c4e;
}
.poll-error {
    background: #fdeeee;
    border: 1px solid #e05555;
    color: #7a1f1f;
}
.contents .col-lg-4 .poll .poll-note {
    margin: 10px 0 0 0;
    font-size: 13px;
    color: #6f6f6f;
}

/* Archiwum: nagłówek ankiety i licznik potrzebują oddechu — lista jest gęsta. */
.contents .poll .polls .poll { padding: 0 0 15px 0; font-size: 13px; }
.contents .poll .polls .poll span.counts { display: block; margin: 10px 0 0 0; color: #6f6f6f; }
.contents .poll .polls .poll .answer label { margin: 0; cursor: pointer; font-weight: normal; }

/* ==========================================================================
   PROFIL KIBICA (ETAP 4)
   Bazowe klasy (.profile, .profile_user, .avatar, .info) daje modules.css
   ze starego CMS-a — tu tylko to, czego tam nie było.
   ========================================================================== */
.contents .profile .profile_user .avatar img { width: 100px; height: 100px; object-fit: cover; }
.contents .profile .profile_user .username span.profile-online { color: #2e9e4f; font-size: 12px; margin: 0 0 0 8px; }

.contents .profile h3.profile-heading {
    margin: 30px 0 15px 0;
    font-size: 16px;
    text-transform: uppercase;
}

.contents .profile .profile-comment {
    background: #FFF;
    padding: 12px 15px;
    margin: 0 0 10px 0;
    width: calc(100% - 35px);
    font-size: 13px;
}
.contents .profile .profile-comment a.profile-comment-article { font-weight: bold; }
.contents .profile .profile-comment .profile-comment-date { float: right; color: #6f6f6f; font-size: 11px; }
.contents .profile .profile-comment .profile-comment-body { margin: 8px 0 0 0; color: #383838; clear: both; }
.contents .profile .profile-empty { padding: 20px 0; color: #6f6f6f; }

/* Edycja profilu — przycisk-przełącznik i drobne komunikaty. */
.contents .profile .profile-edit { margin: 20px 0 0 0; }
.contents .profile .profile-edit span.profile-edit-toggle {
    background: #55b7e5;
    color: #173c4e;
    font-weight: bold;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 13px;
    display: inline-block;
    cursor: pointer;
}
.contents .profile .profile-edit span.profile-edit-toggle:hover { background: #f9cb00; color: #554400; }
.contents .profile .profile-edit .profile-error { color: #7a1f1f; font-size: 12px; display: block; margin: -12px 0 12px 0; }
.contents .profile .profile-edit .profile-hint { color: #6f6f6f; font-size: 12px; display: inline-block; margin: 6px 0 0 0; }
.contents .profile .profile-edit .profile-avatar-preview { margin: 10px 0 0 0; }
.contents .profile .profile-edit .profile-avatar-preview img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: block;
    margin: 0 0 5px 0;
}

/* Nagłówek i pustka na profilu leżą na ciemnym zdjęciu tła (nie na białej
   karcie), więc muszą być jasne — inaczej znikają. */
.contents .profile h3.profile-heading { color: #55b7e5; }
.contents .profile .profile-empty { color: #dfe6ee; }

/* Podpis nad mini-tabelą: który sezon i czy już zamknięty. */
.contents .right-box .data-table .table-season {
    padding: 10px 30px 0 30px;
    font-size: 11px;
    color: #6f6f6f;
    text-transform: uppercase;
}

/* Social media na stronie głównej: `style.css` wkleja pod KAŻDY wpis ikonę
   Twittera (blok pokazywał kiedyś wyłącznie tweety). Dziś to lista naszych
   profili, więc ikonę bierzemy z Font Awesome — Facebook z logo Twittera
   wygląda jak pomyłka. */
section.archive-news-social .social-media .element span {
    background: none;
    padding: 0;
    height: auto;
}
section.archive-news-social .social-media .element span i {
    display: inline-block;
    width: 22px;
    color: #55b7e5;
    font-size: 15px;
}
section.archive-news-social .social-media .element a { color: #173c4e; }
section.archive-news-social .social-media .element a:hover { color: #55b7e5; }
section.archive-news-social .social-media .element p { margin: 6px 0 0 22px; color: #6f6f6f; font-size: 12px; }

/* Wyszukiwarka: pole powtórzone nad wynikami, żeby dało się poprawić frazę
   bez wracania do paska w nagłówku. */
.contents .search-form { margin: 0 0 25px 0; display: flex; gap: 8px; max-width: 520px; }
.contents .search-form input[type="search"] {
    flex: 1;
    border: 1px solid #d7dee5;
    padding: 10px 14px;
    font-size: 14px;
    color: #173c4e;
    background: #FFF;
}
.contents .search-form input[type="search"]:focus { border-color: #55b7e5; outline: none; }
.contents .search-form button {
    border: 0;
    background: #55b7e5;
    color: #173c4e;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
}
.contents .search-form button:hover { background: #f9cb00; color: #554400; }

/* Konto kibica: logowanie i rejestracja jako pełne strony serwisu.
   `style.css` opisuje wyłącznie formularze w modalach (.box_login), więc
   wersja na stronie potrzebuje własnych reguł. */
.contents .auth-box { max-width: 560px; }
.contents .auth-box .data .auth-lead { font-size: 14px; line-height: 1.7; color: #444; margin: 0 0 20px 0; }
.contents .auth-box .data label { display: block; font-size: 13px; font-weight: bold; color: #173c4e; margin: 15px 0 6px 0; }
.contents .auth-box .data label.checkbox-line { font-weight: normal; color: #444; }
.contents .auth-box .data label.checkbox-line input { width: auto; margin: 0 8px 0 0; }
.contents .auth-box .data input[type="text"],
.contents .auth-box .data input[type="email"],
.contents .auth-box .data input[type="password"] {
    width: 100%;
    border: 1px solid #d7dee5;
    padding: 10px 12px;
    font-size: 14px;
    color: #173c4e;
    background: #FFF;
}
.contents .auth-box .data input:focus { border-color: #55b7e5; outline: none; }
.contents .auth-box .data .field-hint { display: block; margin: 5px 0 0 0; font-size: 11px; color: #999; }
.contents .auth-box .data input[type="submit"] {
    margin: 22px 0 0 0;
    background: #55b7e5;
    border: 0;
    color: #173c4e;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    padding: 12px 24px;
    cursor: pointer;
}
.contents .auth-box .data input[type="submit"]:hover { background: #f9cb00; color: #554400; }
.contents .auth-box .data .auth-alt { margin: 20px 0 0 0; font-size: 13px; color: #6f6f6f; }
.contents .auth-box .data .auth-alt a { color: #55b7e5; font-weight: bold; }
.contents .auth-box .data .auth-errors {
    border-left: 3px solid #ea1346;
    background: #fdeef1;
    padding: 12px 15px;
    margin: 0 0 20px 0;
    font-size: 13px;
    color: #8a0d2a;
}
.contents .auth-box .data .auth-errors p { margin: 0 0 4px 0; }
.contents .auth-box .data .auth-status {
    border-left: 3px solid #1f9d55;
    background: #eefaf2;
    padding: 12px 15px;
    margin: 0 0 20px 0;
    font-size: 13px;
    color: #14603a;
}

/* Strony błędu (404 i reszta) — treść w tej samej białej karcie co podstrony. */
.contents .right-box .data .error-lead { font-size: 15px; line-height: 1.7; color: #333; margin: 0 0 20px 0; }
.contents .right-box .data .error-links { margin: 0 0 10px 0; }
.contents .right-box .data .error-hint { font-size: 13px; color: #6f6f6f; margin: 25px 0 10px 0; }
.contents .right-box .data .error-list { list-style: none; margin: 0; padding: 0; }
.contents .right-box .data .error-list li { border-top: 1px solid #e9e8e8; padding: 10px 0; font-size: 14px; }
.contents .right-box .data .error-list a { color: #173c4e; font-weight: bold; }
.contents .right-box .data .error-list a:hover { color: #55b7e5; }

/* Podstrony pełnej szerokości (tabela, terminarz). `section.contents` ma
   wcięcie 30px z lewej zaprojektowane pod kolumnę boczną strony głównej —
   na pełnej szerokości zbijałoby treść z nagłówkiem serwisu. Ramka z prawej,
   bo oryginalne `.data-table` obramowuje tylko lewą krawędź i dół. */
section.contents.page { padding: 30px 0; }
section.contents.page .right-box .data-table { border-right: 1px solid #e9e8e8; }

/* Terminarz (strona /terminarz) — lista meczów w białej karcie. */
.contents .fixtures-list { background: #FFF; padding: 15px; width: calc(100% - 35px); }
.contents .fixtures-list .fixture-row { border-bottom: 1px solid #f5f4f4; padding: 10px 0; font-size: 13px; }
.contents .fixtures-list .fixture-date { display: inline-block; width: 210px; color: #6f6f6f; font-size: 12px; }
.contents .fixtures-list .fixture-teams { font-weight: bold; }
.contents .fixtures-list .fixture-score { float: right; font-weight: bold; }
.contents .fixtures-list .fixture-comp { display: block; margin: 4px 0 0 210px; color: #6f6f6f; font-size: 11px; }

/* Terminarz: przełączniki (sezon, rozgrywki, mecze, kolejka). */
.contents .right-box .data .switcher { margin: 0 0 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.contents .right-box .data .switcher-label {
    display: inline-block;
    min-width: 85px;
    color: #6f6f6f;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
}
.contents .right-box .data a.pill,
.contents .right-box .data button.pill {
    display: inline-block;
    border: 1px solid #d7dee5;
    background: #FFF;
    color: #173c4e;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 14px;
    border-radius: 20px;
    line-height: 1.2;
    cursor: pointer;
}
.contents .right-box .data a.pill:hover,
.contents .right-box .data button.pill:hover { border-color: #55b7e5; color: #55b7e5; }
.contents .right-box .data a.pill.on { background: #131837; border-color: #131837; color: #FFF; }
.contents .right-box .data .pill-select {
    border: 1px solid #d7dee5;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    color: #173c4e;
    background: #FFF;
}
.contents .right-box .data .season-summary {
    margin: 18px 0 0 0;
    padding: 12px 15px;
    background: #eef8fc;
    font-size: 13px;
    color: #173c4e;
}

/* Terminarz: wiersz meczu rozwijany w szczegóły. */
.contents .fixtures-list .fixture-row.next { background: #fefae5; }
.contents .fixtures-list a.fixture-toggle { display: block; color: inherit; }
.contents .fixtures-list a.fixture-toggle:hover { text-decoration: none; color: inherit; }
.contents .fixtures-list a.fixture-toggle:hover .fixture-teams { color: #55b7e5; }
.contents .fixtures-list .fixture-next {
    display: inline-block;
    margin-left: 8px;
    background: #55b7e5;
    color: #173c4e;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
}
.contents .fixtures-list .fixture-score.wynik-w { color: #1f9d55; }
.contents .fixtures-list .fixture-score.wynik-l { color: #d1093b; }
.contents .fixtures-list .fixture-score.wynik-d { color: #6f6f6f; }
.contents .fixtures-list .fixture-details {
    margin: 10px 0 4px 210px;
    padding: 12px 15px;
    background: #f7fafc;
    border-left: 3px solid #55b7e5;
    font-size: 12px;
}
.contents .fixtures-list .fixture-details .detail { display: block; padding: 3px 0; color: #333; }
.contents .fixtures-list .fixture-details .detail em {
    display: inline-block;
    width: 95px;
    color: #6f6f6f;
    font-style: normal;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .05em;
}

@media (max-width: 767px) {
    .contents .fixtures-list .fixture-comp,
    .contents .fixtures-list .fixture-details { margin-left: 0; }
    .contents .right-box .data .switcher-label { min-width: 100%; }
}
/* Nagłówek grupy meczów leży na CIEMNYM pasku (`section.contents .right-box h3`),
   więc musi być biały — na białej karcie był ciemny i po przeniesieniu strony
   do `section.contents` zniknął w tle. */
.contents .fixtures-list h3.profile-heading { color: #FFF; margin: 25px 0 0 0; }
.contents .fixtures-list h3.profile-heading:first-child { margin-top: 0; }

/* Bloki bez pokrycia (forum, kontuzje) przestały być odnośnikami — style.css
   opisuje tam wyłącznie <a>, więc te same reguły powtarzamy dla <span>.
   Wygląd bez zmian, znika tylko kursor łapki i klikanie donikąd. */
section.contents .right-box .forum .element span.topic {
    font-size: 14px;
    font-weight: bold;
    display: block;
}
section.contents .right-box .forum .element span.topic.red { color: #d1093b; }
section.contents .right-box .forum .element span.cat {
    font-size: 13px;
    font-weight: normal;
    display: inline-block;
}
section.contents .right-box .injuries .name span.player {
    font-size: 16px;
    font-weight: bold;
}

/* Druga linijka podpisu: skąd ta kolejność, dopóki sezon nie ruszył
   (albo komunikat, gdy tabeli jeszcze nie pobrano). */
.contents .right-box .data-table .table-notice {
    padding: 4px 30px 0 30px;
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: #999;
}

/* Pustka: tabeli jeszcze nie pobrano (brak klucza API albo pierwsza instalacja). */
.contents .right-box .data-table .table-empty {
    padding: 15px 30px 20px 30px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #444;
}

/* ============================================================
   NEWSLETTER (motyw classic)

   Stary CMS newslettera NIE miał, więc `style.css` i `modules.css` nie mają
   dla niego żadnej reguły — nie ma tu czego „reużyć 1:1". Cały wygląd bloku
   jest więc TUTAJ, pod własnym przedrostkiem `sm-nl-`, żeby nie wchodzić
   w drogę selektorom z oryginału.
   ============================================================ */

footer .sm-nl {
    padding: 25px 30px 20px 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

footer .sm-nl h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

footer .sm-nl .sm-nl-lead {
    margin: 0 0 14px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}

/* Komunikat po zapisie — pole znika, zostaje samo zdanie. */
footer .sm-nl .sm-nl-done {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
}

footer .sm-nl .sm-nl-form {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: 560px;
}

/* Etykieta jest dla czytników ekranu — placeholder nie zastępuje etykiety. */
footer .sm-nl .sm-nl-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

footer .sm-nl input[type="email"] {
    width: 260px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 14px;
    color: #fff;
}

footer .sm-nl input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.62); }
footer .sm-nl input[type="email"]:focus {
    outline: none;
    border-color: #1c2b5a;
    background: rgba(255, 255, 255, 0.14);
}

footer .sm-nl button {
    padding: 9px 18px;
    border: 0;
    border-radius: 3px;
    background: #c40e39;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    cursor: pointer;
}

footer .sm-nl button:hover { background: #c60f39; }

/* Oryginalny `style.css` ma globalne `footer span { margin: 30px 0 0 0; }`,
   przez które dopisek odskakiwał od formularza na pół ekranu. Zerujemy jawnie —
   to jest ta rodzina reguł globalnych, o której mówi CLAUDE.md. */
footer .sm-nl .sm-nl-note,
footer .sm-nl .sm-nl-error {
    flex-basis: 100%;
    margin: 4px 0 0 0;
    font-size: 12px;
    line-height: 1.5;
}

footer .sm-nl .sm-nl-note { color: rgba(255, 255, 255, 0.62); }
footer .sm-nl .sm-nl-error { color: #ff8ba7; }

/* Honeypot: pole ukryte przed człowiekiem, widoczne dla bota.
   `display:none` bywa przez boty pomijane, dlatego wynosimy je poza ekran. */
footer .sm-nl .sm-nl-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Ekran potwierdzenia wypisania (`newsletter.blade.php`). */
section.contents .sm-nl-unsub {
    padding: 10px 22px;
    border: 0;
    border-radius: 3px;
    background: #c40e39;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}

section.contents .sm-nl-cancel {
    margin-left: 14px;
    font-size: 13px;
    text-decoration: underline;
}

/* ===================================================================
   OKRUSZKI NAWIGACYJNE (ETAP 6)

   Stary CMS ich nie miał, więc nie ma czego odwzorowywać — styl trzyma
   się typografii reszty serwisu (Ubuntu, wersaliki, szary tekst).
   Pasek siedzi NAD blokiem treści, wewnątrz `section.contents`.
   =================================================================== */
.sm-breadcrumbs {
    margin: 0 0 12px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sm-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sm-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sm-breadcrumbs a {
    color: #5f7085;
    text-decoration: none;
}

.sm-breadcrumbs a:hover {
    color: #1a2c47;
}

/* Pozycja bieżąca — ciemniejsza, bo to „gdzie jestem", nie odsyłacz. */
.sm-breadcrumbs [aria-current="page"] {
    color: #1a2c47;
    font-weight: bold;
}

.sm-breadcrumbs span[aria-hidden="true"] {
    color: #c3cdd8;
}

/* ===================== KADRA (strona /kadra, motyw classic) =====================
   Doszła 2026-08-29, gdy pojawiły się dane: pełny skład z football-data.org.
   Wygląd jest ten sam, co przy tabeli ligowej — te same karty `right-box`
   i ta sama mini-tabela, żeby strona nie wyglądała na doklejoną z innego
   serwisu. Tu dochodzą tylko dwa drobiazgi: licznik przy nagłówku formacji
   i podpis o dacie pobrania. */
.contents .right-box h3 .squad-count {
    font-weight: normal;
    text-transform: none;
    opacity: 0.65;
}

/* Skąd dane i z kiedy — kibic ma prawo wiedzieć, czy patrzy na aktualny skład. */
.contents .squad-updated {
    margin: 6px 0 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #999;
}

/* Zdjęcie i numer w tabeli kadry. Zdjęcia są portretowe (363×433), więc kadr
   `object-position: top` — inaczej okrągła miniatura ucina zawodnikowi głowę. */
.contents .squad-table td.nr {
    width: 42px;
    text-align: center;
    font-weight: bold;
    color: #666;
}

.contents .squad-table .squad-photo {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    vertical-align: middle;
    background: #e8ecf3;
}

/* ===================== PROFIL ZAWODNIKA (classic) ===================== */
.contents .player-profile {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 20px 30px;
}

/* Portret w pełnych proporcjach — kadr 4:3 ucinał zawodnikom głowy. */
.contents .player-profile .player-photo {
    width: 220px;
    border-radius: 6px;
    background: #e8ecf3;
}

.contents .player-profile .player-facts {
    flex: 1;
    min-width: 220px;
    border-collapse: collapse;
}

.contents .player-profile .player-facts th {
    width: 110px;
    padding: 8px 12px 8px 0;
    font-size: 12px;
    font-weight: normal;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: top;
}

.contents .player-profile .player-facts td {
    padding: 8px 0;
    font-size: 15px;
    font-weight: bold;
}

/* Biografia zawodnika — ten sam rytm co treść artykułu. */
.contents .player-bio {
    padding: 15px 30px 20px 30px;
}

.contents .player-bio p {
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.7;
}

/* ===================================================================
   Zero przeskoku układu przy wczytywaniu zdjęć (ETAP 6, CLS)
   ===================================================================
   Herby klubów przychodzą z API i nie znamy ich wymiarów, więc nie da się
   uczciwie wpisać `width`/`height` w HTML — zamiast zgadywać proporcje,
   REZERWUJEMY pudełko i wpasowujemy w nie obrazek. Efekt dla czytelnika
   ten sam (treść nie ucieka w dół), a żaden herb nie zostaje zniekształcony. */
section.matches .element .badge img {
    height: 60px;
    object-fit: contain;
}

/* Awatary są kwadratowe z definicji (kadr 256×256, zastępczy SVG 140×140),
   ale oryginalny CSS ustawia im tylko szerokość — do czasu wczytania pliku
   przeglądarka nie zna wysokości i komentarz podskakuje. `aspect-ratio`
   rezerwuje miejsce, NIE zmieniając wyglądu ani o piksel. */
header .user-panel .avatar img,
header.fixed .user-panel .avatar img,
.contents .profile .profile_user .avatar img,
.contents .news .comments .comment .avatar img,
.contents .news .comments .comment_form .avatar img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ------------------------------------------------------------------
   Stronicowanie (Bootstrap 4)

   Motyw dostał własny widok stronicowania (`themes/classic/partials/
   pagination.blade.php`), bo domyślny widok Laravela wypisuje klasy
   Tailwinda — których ten motyw nie wczytuje — i to po angielsku.

   Bootstrapowy `.page-link` ma domyślnie #007bff, czyli 3,98 na bieli:
   poniżej progu AA. Poniżej barwy z pomiaru, nie z oka.
   ------------------------------------------------------------------ */
.pagination .page-link {
    color: #0b5ed7;
}

.pagination .page-item.active .page-link {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #6f6f6f;
}

/* ------------------------------------------------------------------
   Nagłówki sekcji — przyciemniony błękit (zgoda użytkownika 2026-08-30)

   Oryginalne `style.css` daje `h2 { color: #55b7e5 }`, co na białym tle
   znaczy kontrast 2,26 przy progu 3,0 dla dużego tekstu — nagłówki
   „najnowsze wiadomości" czy „pozostałe wiadomości" ledwo odcinają się od tła.

   #1a7ba8 to TEN SAM odcień (H≈199), tylko ciemniejszy: 4,73 na bieli,
   czyli z zapasem także dla zwykłego tekstu, gdyby nagłówek kiedyś zmalał.
   Wartość z pomiaru, nie z oka.

   `h2.dark` (biały nagłówek na granacie) zostaje bez zmian — jest bardziej
   szczegółowy, więc wygrywa z tą regułą niezależnie od kolejności plików.
   `style.css` NIE jest ruszany; to jedyne dozwolone miejsce na poprawkę.
   ------------------------------------------------------------------ */
h2 {
    color: #1a7ba8;
}

/* ------------------------------------------------------------------
   Pas meczowy zanim Splide wystartuje

   To samo zgłoszenie co w motywie `modern` (2026-08-30): przy odświeżeniu
   strony mecze pokazują się PIONOWO, jeden pod drugim, i dopiero po chwili
   układają się w rząd. Arkusz Splide'a jedzie w paczce JS, więc do jej
   wykonania nic nie mówi przeglądarce, że to karuzela.

   Liczby odpowiadają konfiguracji z `resources/js/legacy.js`: 2 kafelki,
   odstęp 30 px, poniżej 992 px — jeden.
   ------------------------------------------------------------------ */
.matches-splide:not(.is-initialized) .splide__track {
    position: relative;
    overflow: hidden;
}

/* Reset listy jest w pakiecie Splide'a, więc przed startem trzeba go
   powtórzyć — inaczej `ul` pokazuje wcięcie i punktory. */
.matches-splide:not(.is-initialized) .splide__list {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.matches-splide:not(.is-initialized) .splide__slide {
    flex: 0 0 calc((100% - 30px) / 2);
}

@media (max-width: 991px) {
    .matches-splide:not(.is-initialized) .splide__slide { flex-basis: 100%; }
}

/* Przejazd poświaty zamiast kręciołka — treść już jest, tylko czeka na układ. */
.matches-splide:not(.is-initialized) .splide__track:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(85, 183, 229, 0.14) 44%,
        rgba(85, 183, 229, 0.26) 50%,
        rgba(85, 183, 229, 0.14) 56%,
        rgba(255, 255, 255, 0) 80%);
    background-size: 220% 100%;
    animation: sm-pas-laduje 1.15s ease-in-out infinite;
}

@keyframes sm-pas-laduje {
    from { background-position: 120% 0; }
    to { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .matches-splide:not(.is-initialized) .splide__track:after { animation: none; opacity: 0.3; }
}

/* ------------------------------------------------------------------
   Listing (archiwum, kategoria, tag, wyniki wyszukiwania)

   Kontener `.news-last` to NASZA konstrukcja — stary CMS nie miał tych
   podstron (produkcja oddaje na `/archiwum` 404), więc w `style.css`
   nie ma dla niego ani jednej reguły. Efekt: tytuł był zwykłym `<a>`
   w linii, a data lepiła się zaraz za nim („…wraca do Evertonu 30 sierpnia
   2026"). Widać to było dopiero po zdjęciu ucinania tytułów.

   Wzorzec brany z `section.latest-news` w oryginale, żeby listing wyglądał
   jak reszta serwisu — z tą samą ikoną zegara.
   ------------------------------------------------------------------ */
.contents .news-last .element {
    margin: 0 0 30px 0;
}

.contents .news-last .element .info-news {
    margin: 15px 0 0 0;
}

.contents .news-last .element .info-news a.title {
    display: block;
    font-size: 17px;
    line-height: 1.35;
    font-weight: bold;
    color: #000;
}

.contents .news-last .element .info-news a.title:hover {
    color: #f9cb00;
}

.contents .news-last .element .info-news span.date {
    display: block;
    margin: 10px 0 0 0;
    padding: 0 0 0 25px;
    background: url('../images/icon_time_black.png') no-repeat 0 2px;
    font-size: 12px;
    font-weight: lighter;
    color: #6f6f6f;
}

/* ------------------------------------------------------------------
   FORUM — tylko to, czego oryginał NIE MA
   ------------------------------------------------------------------
   Wygląd działów, wątków i postów siedzi w `modules.css` starego CMS-a
   (`.forum_header`, `.forum_category`, `.forum_element`, `.forum_post`)
   i jest reużyty 1:1 — tutaj dochodzi wyłącznie to, czego stary serwis
   nie miał, bo robił to inaczej: formularz w rozwijanym `details`
   (u niego osobna podstrona) i paleta emotek pod polem.
   ------------------------------------------------------------------ */
.contents .forum .forum_new {
    margin: 20px 0 0 0;
}

/* Stary CSS zna tylko `a.link_button`, a nasz przycisk to `summary`
   — bez tego rozwijacz wyglądałby jak goły tekst z trójkątem. */
.contents .forum .forum_new > summary {
    display: inline-block;
    background: #fecb01;
    color: #584600;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 15px;
    list-style: none;
}

.contents .forum .forum_new > summary::-webkit-details-marker {
    display: none;
}

.contents .forum .forum_new > summary:hover {
    background: #000;
    color: #fff;
}

/* Paleta emotek: oryginał dawał jej `float: right` i 40% szerokości przy
   polu na 60%. Zostawiamy ten układ na dużym ekranie, ale na telefonie
   dwie kolumny obok siebie nie mieszczą się — wtedy paleta idzie pod pole. */
.contents .forum fieldset .emots img {
    margin: 0 4px 4px 0;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .contents .forum fieldset textarea,
    .contents .forum fieldset input[type="text"] {
        width: 100%;
    }

    .contents .forum fieldset .emots {
        float: none;
        width: 100%;
        margin: 10px 0 0 0;
    }

    /* Kolumny liczników na telefonie zjadają całą szerokość tytułu.
       Numery zostają, ale pod nazwą działu, a nie obok niej. */
    .contents .forum .forum_header span.topics,
    .contents .forum .forum_header span.posts,
    .contents .forum .forum_header span.last_post,
    .contents .forum .forum_element span.category,
    .contents .forum .forum_element span.topics,
    .contents .forum .forum_element span.posts,
    .contents .forum .forum_element span.last_post {
        width: 100%;
        text-align: left;
    }

    .contents .forum .forum_post .content {
        width: 100%;
        float: none;
    }
}

/* Emotka w treści postu: nigdy większa niż linia tekstu. Stare GIF-y
   bywają różnych rozmiarów, a jeden wysoki rozpychał wiersz. */
.contents .forum .forum_post .content img.emot {
    vertical-align: middle;
    max-height: 24px;
    width: auto;
}

/* Podpis autora nie może rozepchnąć kolumny.
   Oryginał daje `.user_profile` sam `float: left` bez szerokości, a treści
   przydziela `calc(100% - 100px)` — więc pseudonim dłuższy niż 100 px
   („Kibic z Wembley") sumuje się z treścią ponad szerokość i tekst spada
   pod awatar. Na starym forum nie było tego widać tylko dlatego, że nicki
   były krótkie. Szerokość ustalona = układ trzyma się każdego pseudonimu. */
.contents .forum .forum_post .user_profile {
    width: 100px;
}

.contents .forum .forum_post .user_profile span {
    overflow-wrap: anywhere;
}

/* Wzmianka `@pseudonim` w treści wpisu (stary CSS jej nie zna — na starym
   forum wołało się kogoś po prostu tekstem). */
.contents .forum .forum_post .content .forum_mention {
    font-weight: bold;
    color: #1a7ba8;
}

/* Obrazek wklejony przez kibica: stary CSS dawał mu `width: 98%` prosto
   w atrybucie, my ograniczamy szerokość kolumny treści. */
.contents .forum .forum_post .content .forum_img {
    max-width: 100%;
    height: auto;
    margin: 8px 0;
}

/* Zgłoszenie wpisu — przycisk udający odnośnik, obok `[cytuj]`.
   Stary CSS zna w tym miejscu tylko `span`, a zgłoszenie musi być formularzem
   (POST), bo zmienia stan: odnośnikiem dałoby się zgłosić cudzy wpis
   podlinkowanym adresem. */
.contents .forum .forum_post .date .forum-report {
    display: inline;
    float: right;
    margin: 0 0 0 12px;
}

.contents .forum .forum_post .date .forum-report button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: bold;
    font-size: 12px;
    color: inherit;
    cursor: pointer;
}

.contents .forum .forum_post .date .forum-report button:hover {
    color: #b00020;
}

/* Poprawka własnego wpisu — rozwijana pod treścią.
   Stary CMS miał na to osobną podstronę (`forum/edit_post/...`), więc reguł
   dla niej w oryginale nie ma. */
.contents .forum .forum_post .content .forum_edit {
    margin: 10px 0 0 0;
}

.contents .forum .forum_post .content .forum_edit > summary {
    display: inline-block;
    list-style: none;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.contents .forum .forum_post .content .forum_edit > summary::-webkit-details-marker {
    display: none;
}

.contents .forum .forum_post .content .forum_edit > summary:hover {
    color: #1a7ba8;
}

.contents .forum .forum_post .content .forum_edit textarea {
    display: block;
    width: 100%;
    height: 120px;
    margin: 8px 0;
    padding: 5px;
    font-size: 12px;
}

.contents .forum .forum_post .content .forum_edit input[type="submit"] {
    background: #fecb01;
    color: #584600;
    border: 0;
    padding: 3px 15px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
}

/* ------------------------------------------------------------------
   STRONY STATYCZNE („działy" typu „Maradona w Tottenhamie")
   ------------------------------------------------------------------
   Wygląd niesie oryginalne `.contents .infopages .text` z `modules.css`
   (justowanie, interlinia, odstęp przy wpuszczonym zdjęciu). Dokładamy
   jedno: OGRANICZENIE SZEROKOŚCI.

   Na produkcji tekst siedzi w kolumnie 8/12 obok rubryki bocznej, więc
   wiersz ma ~740 px. U nas strona jest pełnej szerokości i ten sam tekst
   rozciągał się na 1110 px, czyli ~150 znaków w wierszu — dwa razy więcej,
   niż da się czytać bez gubienia linii. Zamiast udawać rubrykę z danymi,
   których na tej stronie nie ma, ograniczamy sam tekst.
   ------------------------------------------------------------------ */
.contents .infopages {
    max-width: 760px;
}

.contents .infopages h2 {
    max-width: none;
}

/* Zdjęcie wpuszczone w tekst nie może być szersze niż kolumna — stare wpisy
   mają wymiary zaszyte w atrybucie `style`, także takie z czasów szerokich
   monitorów. */
.contents .infopages .text img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    /* Na telefonie zdjęcie opływane tekstem zostawia kolumnę na 3 wyrazy. */
    .contents .infopages .text img {
        float: none !important;
        display: block;
        margin: 0 auto 15px auto;
        padding: 0;
    }
}

/* Artykuł: `h1` zamiast `h2`.
   Oryginał daje tytuł artykułu jako `h2` (stary CMS nie dbał o strukturę
   nagłówków), a strona ma mieć dokładnie jeden `h1` — inaczej cierpi SEO
   i czytniki ekranu. Przepisujemy więc regułę na `h1`, co do piksela. */
.contents .news .news_more h1 {
    margin: 0 0 30px 0;
    font-size: 30px;
    line-height: 1.25;
    font-weight: bold;
    color: #00225f;
    position: relative;
}

.contents .news .news_more h1:after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #fecb01;
    margin: 12px 0 0 0;
}

/* Ten sam powód co przy stronach statycznych: na produkcji artykuł stoi
   w kolumnie 8/12 obok rubryki, u nas na pełnej szerokości. Justowany
   tekst 18/36 na 1110 px to ~120 znaków w wierszu. */
.contents .news .news_more {
    max-width: 820px;
}

/* Blok odpowiedzi na forum — stary CMS też nie miał dla niego reguły
   (formularz stał tam samotnie na dole strony). */
.contents .forum .forum_answer {
    margin: 25px 0 0 0;
    border-top: 1px solid #f5f4f4;
    padding: 15px 0 0 0;
}

/* Przejście do treści — widoczne dopiero po zaznaczeniu klawiszem Tab.
   Nie chowamy go przez `display:none`: element wyłączony w ten sposób
   wypada z kolejności tabulacji i przycisk przestaje istnieć także dla
   klawiatury, czyli dokładnie dla tych, dla których powstał. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 10px 20px;
    background: #fecb01;
    color: #00225f;
    font-weight: bold;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ------------------------------------------------------------------
   NAGŁÓWEK PIERWSZEGO POZIOMU NA PODSTRONACH
   ------------------------------------------------------------------
   Stary CMS tytułował podstrony `h2` i nie miał na nich ani jednego `h1`
   (HTML sprzed epoki, gdy ktokolwiek się tym przejmował). Dla wyszukiwarki
   i czytnika ekranu strona bez `h1` to strona bez tematu — a `h2` na samej
   górze każe czytnikowi szukać poziomu wyżej, którego nie ma.

   Dlatego podstrony dostają `h1`, a wygląd zostaje CO DO PIKSELA taki sam:
   przepisujemy tu reguły `h2` ze `style.css` (z naszą poprawką kontrastu).
   ------------------------------------------------------------------ */
h1 {
    font-size: 25px;
    font-weight: bold;
    color: #1a7ba8;
    margin: 0 0 40px 0;
    text-transform: uppercase;
}

h1:after {
    content: "";
    display: block;
    width: 15%;
    padding-top: 15px;
    border-bottom: 5px solid #131837;
}

/* Tytuł artykułu i działu mają własne, większe kroje — bez wersalików
   i bez ucinania na 15% szerokości. */
.contents .news .news_more h1,
.contents .infopages h1 {
    text-transform: none;
}

.contents .infopages h1 {
    font-size: 25px;
    color: #1a7ba8;
    margin: 0 0 30px 0;
}

/* Widoczne zaznaczenie klawiaturą.
   Oryginał nie ma żadnego stylu `:focus` — przechodząc Tabem po serwisie nie
   było widać, gdzie się jest. Tylko `:focus-visible`, więc kliknięcie myszą
   nie zostawia ramki. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #fecb01;
    outline-offset: 2px;
}

/* „Zapamiętaj mnie" — pole wyboru z podpisem.
   Podpis MUSI opakowywać pole (albo mieć `for`), inaczej kliknięcie w tekst
   nic nie robi, a czytnik ekranu czyta samo „pole wyboru". W oryginale
   podpis leżał obok, jako goły tekst. */
.remember {
    display: block;
    margin: 5px 0 10px 0;
    font-weight: normal;
    cursor: pointer;
}

.remember input {
    width: auto;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Wcześniejsze komentarze na żądanie

   Po imporcie archiwum najgorętszy artykuł ma 536 komentarzy. Wysyłanie ich
   wszystkich naraz robiło z tej strony 1,2 MB HTML-u, więc pokazujemy
   najnowszą porcję, a resztę dokłada ten przycisk. Stary CMS takiej sytuacji
   nie miał i nie ma dla niej klasy w `modules.css` — stąd reguła tutaj.
--------------------------------------------------------------------------- */
.contents .news .comments .comments_more {
    margin: 0 0 14px;
    text-align: center;
}

.contents .news .comments .comments_more_btn {
    background: #f2f4f7;
    border: 1px solid #d8dde3;
    border-radius: 3px;
    color: #14375e;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 18px;
}

.contents .news .comments .comments_more_btn:hover {
    background: #e6eaf0;
}

/* ---------------------------------------------------------------------------
   Wyniki z forum na stronie wyszukiwania

   Osobny blok pod artykułami — po imporcie starego forum jest tam sto tysięcy
   wpisów i wymieszane z tekstami redakcji zasypywałyby je przy każdej frazie.
   Stary CMS nie przeszukiwał forum w ogóle, więc klas na to w `modules.css`
   nie ma.
--------------------------------------------------------------------------- */
.contents .news .search_forum {
    border-top: 1px solid #e2e6ea;
    margin-top: 35px;
    padding-top: 20px;
}

.contents .news .search_forum h3 {
    color: #14375e;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.contents .news .search_forum_item {
    border-bottom: 1px solid #eef1f4;
    padding: 12px 0;
}

.contents .news .search_forum_item:last-child {
    border-bottom: 0;
}

.contents .news .search_forum_title {
    color: #14375e;
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.contents .news .search_forum_title:hover {
    color: #1f7bc1;
}

.contents .news .search_forum_meta {
    color: #7b8794;
    display: block;
    font-size: 12px;
    margin: 2px 0 6px;
}

.contents .news .search_forum_excerpt {
    color: #444;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Wejście przez serwis społecznościowy

   Powstało po imporcie starego CMS-a: wracają konta sprzed kilkunastu lat,
   a część weteranów nie pamięta hasła i nie ma dostępu do skrzynki z 2008
   roku. Stary CMS miał tylko kolumnę `id_facebook` (pustą u wszystkich),
   więc klas na to w `modules.css` nie ma.

   Kolor serwisu wchodzi zmienną `--serwis` z szablonu — jedna reguła obsługuje
   każdy dołożony serwis, bez dopisywania tu klasy za każdym razem.
--------------------------------------------------------------------------- */
.social-login {
    margin-top: 18px;
    text-align: center;
}

.social-login-sep {
    color: #8a94a0;
    display: block;
    font-size: 12px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.social-login-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #d8dde3;
    border-radius: 4px;
    color: #22303f;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
    padding: 10px 16px;
    transition: border-color .15s, box-shadow .15s;
}

.social-login-btn:hover {
    border-color: var(--serwis, #1f7bc1);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
    color: #22303f;
    text-decoration: none;
}

.social-login-btn i {
    color: var(--serwis, #1f7bc1);
    font-size: 16px;
}

/* ---------------------------------------------------------------------------
   Zaprzyjaźnione serwisy w stopce

   Lista redakcyjna z panelu (Ustawienia → Podstawowe), w boksie „kto jest
   online" — dokładnie tam, gdzie stoi na produkcji. Klasa `sub-online` jest
   ta sama co w starym serwisie, ale `modules.css` nie zna jej w tym miejscu.
--------------------------------------------------------------------------- */
.stats .sub-online {
    margin: 15px 0 0 30px;
}

.stats .sub-online a {
    color: #14375e;
}

.stats .sub-online a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Paleta emotek przy komentarzu

   Stary CMS miał emotki tylko na forum, więc `modules.css` nie zna tych klas.
   Tylko emotki — bez znaczników (decyzja właściciela 2026-09-02).
--------------------------------------------------------------------------- */
.comment-emotki {
    display: inline-block;
    margin: 6px 0 10px;
    position: relative;
}

.comment-emotki-btn {
    background: #f2f4f7;
    border: 1px solid #d8dde3;
    border-radius: 3px;
    color: #14375e;
    cursor: pointer;
    font-size: 12px;
    padding: 5px 12px;
}

.comment-emotki-btn:hover {
    background: #e6eaf0;
}

.comment-emotki-paleta {
    background: #fff;
    border: 1px solid #d8dde3;
    border-radius: 4px;
    bottom: 100%;
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .35);
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(8, 1fr);
    left: 0;
    margin-bottom: 6px;
    padding: 8px;
    position: absolute;
    width: 250px;
    z-index: 30;
}

.comment-emotki-paleta button {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    height: 26px;
    justify-content: center;
    padding: 0;
}

.comment-emotki-paleta button:hover {
    background: #e6eaf0;
}

/* Zgoda na powiadomienia w edycji profilu — pole, którego stary CMS nie miał. */
.profile-check {
    align-items: flex-start;
    color: #333;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 400;
    gap: 8px;
    line-height: 1.5;
}

.profile-check input {
    margin: 2px 0 0;
    width: auto;
}

/* ---------------------------------------------------------------------------
   Pasek „potwierdź adres" (2026-09-05)

   Prośba, nie bramka: widzi go zalogowany z niepotwierdzonym adresem i może
   go zignorować. Powstał dla 530 kont, których stary serwis nigdy nie
   aktywował — kibiców sprzed lat, nie podejrzanych.
--------------------------------------------------------------------------- */
.verify-bar {
    background: #fdf3d7;
    border-bottom: 1px solid #e8d59a;
    color: #5c4a15;
    font-size: 13px;
    padding: 9px 0;
}

.verify-bar .container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    justify-content: center;
    text-align: center;
}

.verify-bar form {
    display: inline;
    margin: 0;
}

.verify-bar-btn {
    background: none;
    border: 0;
    color: #1f7bc1;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 0;
    text-decoration: underline;
}

.verify-bar-btn:hover {
    color: #14547f;
}