/* RWD 1-Forum.net — warstwa na telefon i tablet (projekt, 2026-10-21).
   Ładowana PO styles/style.css (tylko na stronach z <meta name="viewport" content="width=device-width, initial-scale=1">);
   komputer (>= 1024 px) bez zmian. Elementy tylko dla telefonu są domyślnie ukryte w style.css (strony bez RWD).
   Wygląd serwisu zostaje: te same kolory, czcionki, karty i reklamy — zmienia się tylko układ i wielkość pól dotyku.
   Klasy dodawane w PHP: .menu-przycisk (header), .reklama-blok (kontener reklamy 336x280), .karta (karta pytania, questions-list-row.php),
   .ulubione-tytul (gwiazdka przy tytule pytania) i .ulubione-akcje (ten sam przełącznik jako przycisk w wierszu akcji — telefon),
   .komentarze (grupa komentarzy pod odpowiedzią/pytaniem) z przyciskiem .komentarze-wiecej przy > 2,
   .tylko-szeroki (dalsza część napisu przycisku, ukryta na telefonie: „Odpowiedz| na to pytanie”),
   .kolejnosc-lista (lista „Kolejność” na telefonie zamiast trzech przycisków, ta sama funkcja zmienKolejnosc),
   .reklama-boczna (element panelu z reklamą 200x200 — pod „Popularnymi tematami”),
   .boczny-zadaj (przycisk „Dodaj własne Pytanie” w panelu strony pytania — na telefonie i tablecie powtarzałby przycisk z treści), .pasek-odpowiedz (przyklejony pasek na stronie pytania i wizytówce).
   Wizytówka strony (siteDetailsPage.php, 2026-10-22): .wizytowka-miniatura, .wizytowka-ocena, .wizytowka-przyciski (blok nagłówka),
   .przycisk-podobna / .przycisk-zadaj (przyciski drugorzędne), .reklama-728 (#widebar z banerem 728x90), .reklama-telefon (reklama elastyczna
   tylko na telefonie), .reklama-160 (wieżowiec 160x600), .reklama-elastyczna („Zobacz także”), .podobna-akcje (łapki przy stronie podobnej).
   Listing tagu (abstractObjectsListPage.php, 2026-10-22): .formularz-pytania (question-add-form-t04.php; .zwijany/.rozwiniety z JS),
   .karta-strony (sites-list-row.php), .opinie-tematu, .dodaj-temat, .reklama-koncowa (336x280 tuż przed reklamą elastyczną).
   Lista pytań (questions-list.php, 2026-10-22): .kolejnosc.sortowanie (+ .sortowanie-etykieta, select .kolejnosc-lista na telefonie),
   .stronicowanie (.stronicowanie-etykieta, .biezaca, .strona-link — numery stron w kółkach). */

.menu-przycisk { display: none; }
.pasek-odpowiedz { display: none; }
.ulubione-akcje { display: none; }
.kolejnosc-lista { display: none; }
.komentarze-wiecej { display: none; }

/* ---------- telefon i tablet (do 1023 px) ---------- */
@media (max-width: 1023px) {
	body { background: #ffffff; }
	/* nic nie poszerza strony: reklamy auto ads po obrocie telefonu zostawały z szerokością/marginesem z poziomu i Chrome oddalał całą
	   stronę (zgłoszenie 2026-10-22); clip zamiast hidden — przy hidden okno dalej się poszerzało, clip nie tworzy kontenera przewijania */
	html, body { overflow-x: clip; }
	#wrapper { width: auto; }

	#header { height: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: #357ebd; padding: 0 24px; }
	#logo { float: none; padding: 16px 0; font-size: 26px; }
	#menu-with-search { float: none; height: auto; margin: 0; }
	#menu-with-search > div { display: none; }
	#menu-with-search table, #menu-with-search tbody, #menu-with-search tr, #menu-with-search td { display: block; }
	#menu-with-search td { padding: 0 !important; }
	#menu-with-search .option4 > div[style] { display: none; }

	/* okruszki: odstęp od nagłówka, pełna widoczność (na ekranie dotykowym nie ma :hover), długie zawijają się do kolejnych linii */
	div.bcrumbs { padding: 16px 24px 0 !important; opacity: 1; font-size: 13px; line-height: 1.5; }
	div.bcrumbs div.bcrumb_path { float: none; width: auto; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; }
	div.bcrumbs a, div.bcrumbs span.raquo, div.bcrumbs span.bcrumb_item { float: none; }
	div.bcrumbs a { display: inline-block; padding: 3px 0; }
	div.bcrumbs span.raquo { margin: 0 6px; color: #999999; }
	div.bcrumbs span.bcrumb_item { padding: 3px 0 !important; color: #666666; }
	#content, #content-sitedetails { float: none; width: auto; padding: 0 24px; }
	#sidebar { float: none; width: auto; padding: 32px 24px 0; }

	.question-meta-posted, .answer-meta-posted { height: auto; line-height: 1.5; }
	.question-row-details { float: none; width: auto; margin-left: 100px; }

	/* pola dotyku >= 44 px */
	.glos, .przycisk-drugi, .kolejnosc button { min-height: 44px; border-radius: 22px; }
	.glos svg { width: 18px; height: 18px; }
	.przycisk-odpowiedz { min-height: 44px; }
	.button { min-height: 44px; }
	.liked-add, .liked-remove { width: 44px; height: 44px; background-position: center; }

	/* komentarze pod odpowiedzią: jedna szara grupa, przy > 2 widać dwa pierwsze i „Pokaż wszystkie komentarze (N)” */
	.komentarze { margin: 4px 0 14px; padding: 2px 12px; background: #f5f6f7; border-radius: 8px; }
	.komentarze .comment { padding: 10px 0; border-top: 1px solid #e2e2e2; font-size: 14px; line-height: 1.5; }
	.komentarze .comment:first-child { border-top: none; }
	.komentarze .comment:hover { background: none; }
	.komentarze .comment .author { display: block; margin-top: 2px; font-size: 12px; color: #666666; }
	.komentarze.zwiniete .comment:nth-child(n+3) { display: none; }
	.komentarze-wiecej { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: none; border-top: 1px solid #e2e2e2; width: 100%; color: #1f5f99; font-family: inherit; font-size: 14px; font-weight: bold; cursor: pointer; }
	.komentarze .gdy-rozwiniete, .komentarze.zwiniete .gdy-zwiniete { display: inline; }
	.komentarze .gdy-zwiniete, .komentarze.zwiniete .gdy-rozwiniete { display: none; }

	#footer { height: auto; padding-bottom: 24px; }
	#footer p { padding: 28px 24px 0; }
	#sidebar .boczny-zadaj { display: none; }
	/* panel pod treścią: najpierw „Popularne tematy” na całą szerokość, pod nimi wyśrodkowana reklama (komentarz właściciela 2026-10-22) */
	#sidebar > ul { display: flex; flex-direction: column; }
	#sidebar li.reklama-boczna { order: 2; text-align: center; }

	/* reklama 336x280 w treści: wyśrodkowana; na tablecie obrazek ze strzałką tuż obok (na telefonie ukryty) */
	.reklama-blok { margin: 28px 0 0 !important; text-align: center; }
	.reklama-blok > img { float: none !important; display: inline-block; vertical-align: top; margin: 0 0 0 16px !important; }

	/* nagłówki sekcji pod treścią w jednym stylu (nagłówek h2 serwisu): „Zobacz powiązane pytania na Forum”, „Popularne tematy” —
	   na komputerze panel boczny zostaje jak dziś (wyśrodkowany, pogrubiony) */
	h2.title, #sidebar h3 { margin: 32px 0 10px; padding: 0; border: none; font-size: 22px; font-weight: bold; letter-spacing: 0; line-height: 1.25; text-align: left; color: #222222; }
	#sidebar h3 + p { text-align: left !important; }
	/* zasada bliskości: nagłówek bliżej swojej treści niż sekcji powyżej (tekst–tekst: ok. 56 px nad, 16 px pod) */
	h2.title { margin-top: 52px; margin-bottom: 0; }
	h2.title + .post { padding-top: 0; }
	h2.title + .post > .entry { margin-top: 10px; }
}

/* ---------- tablet (768–1023 px): menu w jednym wierszu, panel pod treścią w dwóch kolumnach ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
	#menu-with-search { flex: 1 1 0%; min-width: 0; }
	#menu-with-search tr { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 22px; }
	#menu-with-search td a { display: inline-flex; align-items: center; min-height: 44px; }
	#menu-with-search .option4 { flex-basis: 100%; display: flex; justify-content: flex-end; padding: 0 0 14px !important; }
	#cse-search-box input[name="q"] { min-height: 36px; box-sizing: border-box; font-size: 15px; }
	#cse-search-box input[name="sa"] { min-height: 36px; }

}

/* ---------- telefon (do 767 px): jedna kolumna, menu pod przyciskiem ---------- */
@media (max-width: 767px) {
	body { font-size: 16px; }
	p, ul, ol { line-height: 160%; }

	#header { padding: 0 16px; }
	#logo { padding: 12px 0; font-size: 24px; }
	.menu-przycisk { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid #ffffff; border-radius: 4px; color: #ffffff; font-family: inherit; font-size: 15px; font-weight: bold; cursor: pointer; }
	.menu-przycisk svg { width: 18px; height: 18px; }
	#menu-with-search { display: none; flex-basis: 100%; padding: 0 0 16px; }
	#menu-with-search.otwarte { display: block; }
	#menu-with-search td a { display: flex; align-items: center; min-height: 48px; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
	#menu-with-search .optionX a { border-bottom: none; }
	#menu-with-search .option4 { padding-top: 8px !important; }
	#cse-search-box div { display: flex; gap: 8px; }
	#cse-search-box input[name="q"] { flex: 1 1 auto; min-width: 0; min-height: 44px; box-sizing: border-box; font-size: 16px; border-radius: 4px; }
	#cse-search-box input[name="sa"] { min-height: 44px; padding: 0 14px; background: #ffffff; color: #2a6496; border: none; border-radius: 4px; font-size: 15px; font-weight: bold; }

	div.bcrumbs { padding: 4px 16px 0 !important; }
	div[style*="clear"]:has(+ div.bcrumbs) { font-size: 0; line-height: 0; }   /* pusty wiersz &nbsp; nad okruszkami (strona pytania) */
	/* okruszki w jednej linii: tylko najbliższa kategoria jako „‹ powrót” (cała ścieżka zostaje w HTML i schema.org, od 768 px widać ją
	   całą). Reguły z :has() — przeglądarka bez :has() pomija je i pokazuje zawijaną ścieżkę jak dotąd (2026-10-22) */
	div.bcrumbs div.bcrumb_path:has(> div > a) > * { display: none; }
	div.bcrumbs div.bcrumb_path > div:has(> a):not(:has(~ div > a)) { display: block; flex: 1 1 auto; min-width: 0; }
	div.bcrumbs div.bcrumb_path > div:has(> a):not(:has(~ div > a)) > a { display: block; overflow: hidden; padding: 10px 0; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
	div.bcrumbs div.bcrumb_path > div:has(> a):not(:has(~ div > a)) > a::before { content: "\2039\00a0"; }
	#content, #content-sitedetails { padding: 0 16px; }
	#sidebar { padding: 28px 16px 0; }
	#sidebar li { margin-bottom: 28px; }
	#sidebar p { line-height: 2.2; }

	#footer p { padding: 20px 16px 0; }
	h1 { margin-top: 12px; font-size: 24px; line-height: 1.25; }
	/* przyciski pod pytaniem: główne „Odpowiedz” jest w przyklejonym pasku, tu obrysowane i krótkie (jak „Skomentuj”) */
	.tylko-szeroki { display: none; }
	.post .akcje-wiersz { gap: 8px; }
	.post .akcje-wiersz .przycisk-drugi { padding: 0 12px; }
	.post .akcje-wiersz .przycisk-odpowiedz { padding: 0 12px; background: #ffffff; color: #1f5f99 !important; border: 1px solid #1f5f99; border-radius: 22px; font-size: 14px; font-weight: normal; }
	.post .akcje-wiersz .przycisk-odpowiedz:hover { background: #f0f6fb; }

	/* kolejność odpowiedzi: jedna linia „4 odpowiedzi … [Najlepsze ▾]” z natywną listą (jak Stack Overflow, Allegro, Amazon);
	   liczba komentarzy drugim, mniejszym wierszem pod liczbą odpowiedzi (.naglowek-komentarze) */
	.odpowiedzi-naglowek h2 { flex: 1 1 auto; }
	.odpowiedzi-naglowek .kolejnosc { display: contents; }
	.kolejnosc > span, .kolejnosc button { display: none; }
	.kolejnosc-lista { display: block; min-height: 44px; padding: 0 10px; border: 1px solid #1f5f99; border-radius: 6px; background: #ffffff; color: #1f5f99; font-family: inherit; font-size: 16px; }
	.odpowiedzi-naglowek .kolejnosc a { display: none; }
	.naglowek-komentarze { display: block; margin-top: 2px; font-size: 13px; font-weight: normal; letter-spacing: 0; color: #666666; }  /* „Przejdź do najnowszej” — na telefonie zastępuje je „Najnowsze” w liście */

	/* gwiazdka ulubionych: na telefonie nie zabiera szerokości tytułowi — przycisk z podpisem w wierszu akcji pytania */
	.ulubione-tytul { display: none; }
	.ulubione-akcje { display: inline-flex; gap: 6px; }
	.ulubione-akcje svg { width: 18px; height: 18px; }
	.ulubione-akcje[aria-pressed="true"] { border-color: #b37800; color: #7a5200; background: #fff8e1; }
	.ulubione-akcje[aria-pressed="true"] svg { fill: #e0a800; stroke: #b37800; }
	.tag-title { margin-bottom: 16px; }
	h2 { font-size: 19px; }
	h2.title, #sidebar h3 { font-size: 20px; }   /* nagłówki sekcji pogrubione — wyraźniejsze (komentarz 2026-10-22) */

	.formularz-odpowiedzi { padding: 14px 12px; }   /* 12 px z boku: reCAPTCHA (304 px) mieści się także przy 360 px */
	.formularz-odpowiedzi textarea, .formularz-odpowiedzi input[type="text"] { font-size: 16px; }
	.formularz-odpowiedzi input[type="text"] { min-height: 44px; }
	.formularz-odpowiedzi .wyslij input { width: 100%; min-height: 48px; }

	/* reklama 336x280 mieści się w 358 px; obrazek ze strzałką na telefonie niepokazywany */
	.reklama-blok > img { display: none; }

	/* karta pytania: liczniki w jednym szarym rzędzie pod treścią */
	.karta { display: flex; flex-direction: column; }
	.karta .question-row-details { order: 1; margin-left: 0; }
	/* liczniki: trzy równe kolumny „liczba nad podpisem” (jak dziś na komputerze, tylko obok siebie) — mieszczą się nawet
	   65 / 1392 / 125884 przy 360 px; pierwszy licznik we wdrożeniu też w <div> (questions-list-row.php) */
	.karta .question-row-votes { order: 2; float: none; width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; margin: 0 0 12px; padding: 6px 4px; text-align: center; font-size: 12px; line-height: 1.25; }
	.karta .question-row-votes br { display: none; }
	.karta .question-row-votes b { display: block; font-size: 15px; }
	.karta .question-row-votes div { margin: 0 !important; }
	.karta .question-row-details h2 { padding-top: 6px; font-size: 18px; }
	.karta .question-row-details p { margin-bottom: 0.6em; }
	/* gwiazdka karty nie zabiera miejsca tytułowi: na prawym końcu szarego wiersza liczników */
	.karta { position: relative; }
	.karta .question-row-votes { min-height: 44px; box-sizing: border-box; padding-right: 56px; }
	.karta .question-row-details [id^="lqa"] { position: absolute; right: 4px; bottom: 12px; float: none; margin: 0; }

	/* przyklejony pasek na stronie pytania */
	.pasek-odpowiedz { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 10px 16px 14px; background: #ffffff; border-top: 1px solid #dddddd; }
	.pasek-odpowiedz .przycisk-odpowiedz { flex: 1 1 auto; justify-content: center; min-height: 48px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
	.pasek-odpowiedz.ukryty { display: none; }
	body:has(.pasek-odpowiedz) #footer { padding-bottom: 96px; }
	.pasek-odpowiedz .pasek-zadaj { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; white-space: nowrap; border: 1px solid #d46f00; border-radius: 4px; color: #a35400; font-weight: bold; text-decoration: none; }
}


/* ========== Wizytówka strony (siteDetailsPage.php, 2026-10-22) ========== */

/* wszystkie szerokości */
.reklama-telefon { display: none; }
.reklama-elastyczna { margin: 30px 0 0 !important; }             /* „Zobacz także” na całą szerokość treści, bez wcięcia 55 px */
.wizytowka-miniatura img { width: 185px; height: auto; }          /* plik 185x175 bez powiększania (było 290x275) */
#welcome-site-details p { clear: left; }   /* opis pod nazwą i oceną (float 580 px), obok miniatury — przy węższej miniaturze nie wciska się w lukę między nimi */

.entry .similar-site-details { float: none; width: auto; }        /* bez kolumny ▲▼ po lewej */
.entry .similar-site-details h3 { display: block !important; margin: 0 0 6px; padding: 0; }
.entry .similar-site-details .snapshot { width: 185px; height: auto; }
.podobna-akcje { margin: 6px 0 4px; }
.podobna-akcje .podobna-ocena { font-size: 13px; color: #666666; }

/* hierarchia: „Dodaj opinię” główny (zielony), pozostałe obrysowane */
.wizytowka-przyciski .button.przycisk-podobna { background: #ffffff; color: #1f5f99 !important; border: 1px solid #1f5f99; }
.wizytowka-przyciski .button.przycisk-zadaj { background: #ffffff; color: #a35400 !important; border: 1px solid #d46f00; font-size: 16px; font-family: inherit; }

/* telefon i tablet */
@media (max-width: 1023px) {
	div.bcrumbs { float: none !important; width: auto !important; margin: 0 !important; }

	#widebar-main { margin: 8px 24px 0; padding: 20px 20px 4px; }
	#welcome-site-details h1.title { float: none !important; width: auto !important; margin-bottom: 12px; overflow-wrap: anywhere; }
	.wizytowka-ocena { float: none !important; width: auto !important; padding-bottom: 12px !important; }
	.wizytowka-przyciski { float: none !important; margin-top: 4px !important; }
	.wizytowka-przyciski form { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0; }
	.wizytowka-przyciski .button { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; margin: 0 !important; }

	#widebar.reklama-728 { margin: 24px 0 0 !important; padding: 0; }
	#stick-box, #sidebar .reklama-160 { display: none !important; }   /* bez wieżowca i przyklejanego kwadratu */

	#content-sitedetails .post .opinion .questionForm textarea { width: 100%; box-sizing: border-box; }
	#add-opinion #nick, #add-similar-site #siteUrlId { width: 100%; max-width: 420px; box-sizing: border-box; }
	#add-opinion #opinion { width: 100%; box-sizing: border-box; height: auto; min-height: calc(3 * 1.5em + 14px); line-height: 1.5; field-sizing: content; }

	/* „Zadaj Pytanie na Forum” wyśrodkowane, opis pod przyciskiem — jak na stronie pytania */
	#content-sitedetails #add-own-question { text-align: center; }
	#content-sitedetails #add-own-question .button { display: block; margin: 0 auto 8px; min-height: 48px; }
}

/* telefon */
@media (max-width: 767px) {
	/* nazwa i opis strony bez ramki — cała szerokość jak na stronie pytania (komentarz właściciela 2026-10-22) */
	#widebar-main { margin: 0 16px; padding: 0; background: none; border-radius: 0; }
	#welcome-site-details h1.title { margin-top: 10px !important; font-size: 24px; line-height: 1.25; }
	.wizytowka-miniatura { float: right !important; margin: 0 0 8px 12px !important; }
	.wizytowka-miniatura img { width: 120px; }
	.wizytowka-ocena { font-size: 16px !important; }
	#welcome-site-details p { line-height: 1.55; }

	/* gwiazdka ulubionych nie przy nazwie strony, tylko jako „☆ Ulubione” wśród przycisków (jak na stronie pytania) */
	#welcome-site-details h1.title [id^="lwww"] { display: none; }

	/* przyciski w nagłówku obrysowane i krótkie — główne „Dodaj opinię” jest w przyklejonym pasku */
	/* clear: przy krótkim opisie (albo większym tekście w telefonie) miniatura sięgała niżej niż tekst i przyciski stawały obok niej w pasku
	   ok. 209 px — każdy w osobnym wierszu (zrzut właściciela, xtb.com, 2026-10-22); teraz zawsze pod miniaturą, po dwa w wierszu */
	.wizytowka-przyciski { width: 100%; clear: both; }
	.wizytowka-przyciski form { gap: 8px; }
	.wizytowka-przyciski .button, .wizytowka-przyciski .button.przycisk-podobna, .wizytowka-przyciski .button.przycisk-zadaj {
		padding: 0 14px !important; border-radius: 22px; font-size: 15px !important; font-weight: normal;
		background: #ffffff !important; color: #1f5f99 !important; border: 1px solid #1f5f99 !important; }

	/* baner 728x90 nie mieści się — zamiast niego reklama elastyczna (ukrycie display:none nie wysyła zapytania) */
	#widebar.reklama-728 { display: none; }
	.reklama-telefon { display: block; margin: 20px 0 0; text-align: center; }

	#content-sitedetails { padding: 0 16px; }
	#content-sitedetails .post .opinion { margin-top: 24px; }
	#content-sitedetails .post .opinion > div:first-child { margin-bottom: 8px !important; line-height: 1.75; }
	#content-sitedetails .post .opinion .contentOdd, #content-sitedetails .post .opinion .contentEven { padding: 10px 12px; line-height: 1.55; }
	/* opinia: nick i data w pierwszej linii, gwiazdki i „ocena N” w drugiej */
	#content-sitedetails .post .opinion > div:first-child time::after { content: "\A"; white-space: pre; }
	#content-sitedetails .post .opinion > div:first-child .opinion-rank { margin-left: 0; vertical-align: middle; }

	/* formularze opinii i strony podobnej: pola na całą szerokość, 16 px (iOS nie powiększa) */
	#content-sitedetails .post .opinion .questionForm { padding: 14px; }
	#add-opinion #nick, #add-similar-site #siteUrlId, #add-opinion #opinion, #content-sitedetails .post .opinion .questionForm #email {
		display: block; width: 100%; max-width: none; min-height: 44px; margin-top: 4px; box-sizing: border-box; font-size: 16px; }
	#add-opinion #opinion { min-height: calc(3 * 1.5em + 14px); }   /* 3 wiersze na start (reguła wyżej dałaby 44 px) */
	#content-sitedetails .post .opinion .questionForm select { min-height: 44px; font-size: 16px; }
	#content-sitedetails .post .opinion .questionForm input[type="submit"] { width: 100%; min-height: 48px; }

	/* strony podobne: miniatura mniejsza, „Zobacz opinie i podobne” w osobnej linii */
	.entry .similar-site-details .snapshot { width: 110px; margin-left: 10px; }
	.entry .similar-site-details .permalink { display: none; }   /* bez dodatkowych linków na telefonie — nazwa i tytuł prowadzą tam samo (2026-10-22) */

	#content-sitedetails #add-own-question .button { width: 100%; }
}


/* ========== Listing tagu (abstractObjectsListPage.php, 2026-10-22) ========== */

/* ---------- telefon i tablet ---------- */
@media (max-width: 1023px) {
	#panel-c2a-button .entry { padding: 20px 24px; }
	#panel-c2a-button + br, #panel-c2a-button > br { display: none; }
}

/* ---------- telefon ---------- */
@media (max-width: 767px) {
	/* formularz „Dodaj swoje pytanie”: bez tabeli, pola na całą szerokość; na start samo pole treści (3 wiersze),
	   nick, reCAPTCHA i przycisk pokazują się po dotknięciu pola (klasy .zwijany i .rozwiniety z JS w abstractObjectsListPage.php) */
	#panel-c2a-button .entry { margin-top: 12px; padding: 14px 14px 16px; }
	#panel-c2a-button .entry > span { display: block; margin-bottom: 8px; font-size: 18px !important; font-weight: bold; color: #222222; }
	#panel-c2a-button .questionForm { margin-top: 0 !important; }
	.formularz-pytania table, .formularz-pytania tbody, .formularz-pytania tr, .formularz-pytania td { display: block; width: auto; padding: 0; }
	.formularz-pytania tr:first-child td:first-child { display: none; }          /* „Treść:” — nagłówek „Dodaj swoje pytanie” wystarcza */
	.formularz-pytania tr + tr td:first-child { margin: 12px 0 4px; font-weight: bold; }
	.formularz-pytania textarea { display: block; width: 100% !important; box-sizing: border-box; min-height: calc(3 * 1.5em + 14px);
		padding: 6px 8px; font-size: 16px; line-height: 1.5; field-sizing: content; }
	.formularz-pytania td > span { display: block; margin-top: 4px; font-size: 13px !important; color: #666666; }
	.formularz-pytania #nick { width: 100% !important; min-height: 44px; box-sizing: border-box; font-size: 16px; }
	.formularz-pytania .g-recaptcha { margin-top: 12px; }
	.formularz-pytania td > br { display: none; }
	.formularz-pytania .button { float: none !important; display: block; width: 100%; min-height: 48px; margin-top: 12px; font-size: 17px; }
	.formularz-pytania.zwijany:not(.rozwiniety) tr + tr, .formularz-pytania.zwijany:not(.rozwiniety) td > span { display: none; }   /* .zwijany z JS — bez JS formularz rozwinięty */

	/* karta strony: miniatura 110 px zawsze po prawej obok tytułu (dziś 185 px na przemian z lewej i z prawej) — jak strony podobne na wizytówce */
	.karta-strony h2 { margin-bottom: 10px; padding-right: 48px; font-size: 20px; overflow-wrap: anywhere; }
	.karta-strony h2 .opinion-rank { display: block; margin: 6px 0 0; }
	.karta-strony img.snapshot, .karta-strony img.snapshot-left { float: right; width: 110px; height: auto; margin: 2px 0 8px 12px; }
	.karta-strony p { line-height: 1.55; }
	.post .karta-strony + .meta, .opinie-tematu .meta { display: flow-root; height: auto; padding: 8px 0 22px; }   /* „dodano” i „Zobacz…” pływają — wiersz bez flow-root miał 0 px */
	.opinie-tematu .meta { padding-top: 6px; }
	/* bez dodatkowych linków na telefonie (komentarz 2026-10-22): nazwa strony i tytuł prowadzą w to samo miejsce */
	.karta-strony + .meta .permalink, .opinie-tematu .meta .permalink { display: none; }

	/* opinie o stronach z tematu: nazwa strony, link, treść w ramce jak opinie na wizytówce */
	.opinie-tematu .entry { margin-top: 32px; }
	.opinie-tematu h2.title + .entry { margin-top: 24px; }
	.opinie-tematu .entry > strong { display: block; margin-bottom: 6px; }          /* nazwa strony, pod nią link (dziś sklejone) — komentarz 2026-10-22 */
	.opinie-tematu .entry > p:first-of-type { margin: 0; line-height: 1.45; }
	.opinie-tematu .entry > p:nth-of-type(2) { margin-top: 12px; padding: 10px 12px; background: #fafafa; border: 1px solid #dddddd; line-height: 1.55; }

	.reklama-koncowa { display: none; }   /* 336x280 tuż przed reklamą elastyczną — na telefonie dwie reklamy pod rząd */
	.dodaj-temat .button { width: 100%; min-height: 48px; font-size: 18px !important; }
}


/* ========== Lista pytań (questions-list.php, 2026-10-22) ========== */

/* sortowanie jak kolejność odpowiedzi na stronie pytania (.kolejnosc: przyciski-pigułki; telefon — lista rozwijana) */
.sortowanie { margin: 24px 0 4px; }
.sortowanie-etykieta { color: #666666; }

/* numery stron w kółkach (dziś drobne linki w nagłówku), bieżąca wypełniona — komputer 36 px, tablet i telefon 44 px */
.stronicowanie { margin-top: 32px; }
.stronicowanie h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: none; font-size: 15px; font-weight: normal; letter-spacing: 0; }
.stronicowanie-etykieta { flex: 0 0 100%; margin-bottom: 2px; font-weight: bold; color: #222222; }
.stronicowanie h2 a, .stronicowanie h2 .strona-link, .stronicowanie .biezaca { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
	box-sizing: border-box; padding: 0 8px; border: 1px solid #1f5f99; border-radius: 18px; background: #ffffff; color: #1f5f99; font: inherit; text-decoration: none; cursor: pointer; }
.stronicowanie h2 a:hover, .stronicowanie h2 .strona-link:hover { background: #f0f6fb; }
.stronicowanie .biezaca { background: #1f5f99; color: #ffffff; font-weight: bold; cursor: default; }

@media (max-width: 1023px) {
	.stronicowanie h2 a, .stronicowanie h2 .strona-link, .stronicowanie .biezaca { min-width: 44px; height: 44px; border-radius: 22px; }
}

@media (max-width: 767px) {
	.sortowanie { margin-top: 22px; gap: 10px; }
	.sortowanie > span.sortowanie-etykieta { display: inline; font-size: 15px; }
}


/* ========== Poprawki z komentarzy 2026-10-22 (wszystkie strony z RWD) ========== */

/* tablet: logo, menu i wyszukiwarka w jednej linii; „Strona główna” na tablecie ukryta (logo i „Start” w okruszkach),
   na komputerze i w menu telefonu zostaje */
@media (min-width: 768px) and (max-width: 1023px) {
	#menu-with-search td.option1 { display: none; }
	#menu-with-search tr { flex-wrap: nowrap; column-gap: 18px; }
	#menu-with-search td.option4 { flex: 0 1 230px; min-width: 150px; padding: 0 !important; }
	#menu-with-search td.option4 > * { flex: 1 1 auto; min-width: 0; }
	#menu-with-search td.option4 #cse-search-box > div { display: flex; align-items: center; gap: 6px; }
	#menu-with-search td.option4 input[name="q"] { flex: 1 1 auto; min-width: 0; width: auto; }
	#menu-with-search td.option4 input[name="sa"] { flex: 0 0 auto; }

	/* formularz „Dodaj swoje pytanie”: pole na szerokość boksu, z prawej 73 px jak na komputerze (było 144 px przez stałe 470 px) */
	#panel-c2a-button .entry { padding-right: 73px; }
	.formularz-pytania table { width: 100%; }
	.formularz-pytania textarea { width: 100% !important; box-sizing: border-box; }
	.formularz-pytania td:first-child { width: 1%; white-space: nowrap; }
}

@media (max-width: 767px) {
	.menu-gwiazdka { width: 18px; height: 18px; margin-right: 8px; flex: 0 0 auto; }

	/* liczniki w kartach pytań większe: etykiety 12 → 15 px, liczby 15 → 18 px; gwiazdka dokładnie na środku paska (60 px) */
	.karta .question-row-votes { min-height: 60px; padding-top: 8px; padding-bottom: 8px; font-size: 15px; line-height: 1.3; }
	.karta .question-row-votes b { font-size: 18px; }
	.karta .question-row-details [id^="lqa"] { bottom: 20px; }

	/* karta strony (listing tagu): odstępy jak w karcie pytania (nazwa → tytuł 15 px, akapity 0,6 em, opis → „dodano” ~10 px) */
	.post .entry.karta-strony h2 { padding-top: 6px; padding-bottom: 10px; margin-bottom: 5px; }
	.post .entry.karta-strony p { margin-bottom: 0.6em; }
	.post .entry.karta-strony + .meta { padding-top: 0; }

	/* opinie z tematu: „dodał(a) Nick” 8 px pod ramką z treścią (było 30 px) */
	.opinie-tematu .entry > p:nth-of-type(2) { margin-bottom: 0; }
	.opinie-tematu .meta { padding-top: 8px; }
}


/* ========== Poprawki z komentarzy 2026-10-22, cz. 2 ========== */

/* opinie z tematu (listing tagu) na wszystkich szerokościach jak na telefonie: nazwa → link 6 px (było 0), treść w jasnej ramce
   12 px pod linkiem, „dodał(a)” 8 px pod ramką (było 33), kolejna opinia 32 px niżej */
.opinie-tematu .entry { margin-top: 32px; }
.opinie-tematu h2.title + .entry { margin-top: 24px; }
.opinie-tematu .entry > strong { display: block; margin-bottom: 6px; }
.opinie-tematu .entry > p:first-of-type { margin: 0; line-height: 1.45; }
.opinie-tematu .entry > p:nth-of-type(2) { margin: 12px 0 0; padding: 10px 12px; background: #fafafa; border: 1px solid #dddddd; line-height: 1.55; }
.opinie-tematu .meta { display: flow-root; height: auto; padding: 8px 0 22px; }

/* komputer: reklama 336x280 i obrazek „A czy ten temat cię interesuje?” razem, wyśrodkowane, jak na tablecie (było: wcięcie 115 px
   i obrazek przy prawej krawędzi kolumny) */
@media (min-width: 1024px) {
	.reklama-blok { margin: 45px 0 0 !important; text-align: center; }
	.reklama-blok > img { float: none !important; display: inline-block; vertical-align: top; margin: 0 0 0 16px !important; }
}

/* tablet: tytuł i opis karty pytania 25 px od boksu liczników, jak na komputerze (było 10 px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.question-row-details { margin-left: 115px; }
}

/* telefon: tytuł karty pytania 20 px (było 18), wysokość linii 27 px (było ~21 px przy opisie 25,6 px), bez ściśniętych liter */
@media (max-width: 767px) {
	.karta .question-row-details h2 { font-size: 20px; line-height: 1.35; letter-spacing: 0; }
}


/* ========== Katalog stron WWW (allSitesListPage.php → abstractSitesListPage.php, /firmy-instytucje), 2026-10-22 ========== */
/* Karty stron, reklamy, numery stron i panel — te same klasy co na listingu tagu i liście pytań (abstractSiteRow.php: .karta-strony,
   „dodano”; abstractSitesListPage.php: .reklama-blok, .stronicowanie, .reklama-boczna, .reklama-160). */

/* telefon: formularz „Podaj adres strony” w kolumnie — napis, pole i przycisk na całą szerokość (tylko w katalogu: ten sam id
   ma formularz w powitaniu na stronie głównej) */
@media (max-width: 767px) {
	#panel-c2a-button #welcome-page-site-options-form { font-size: 0; }
	#panel-c2a-button #welcome-page-site-options-form > span { display: block; margin-bottom: 8px; font-size: 18px !important; font-weight: bold; color: #222222; }
	#panel-c2a-button #welcome-page-site-options-form #welcome-search-field { display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 12px; font-size: 16px !important; }
	#panel-c2a-button #welcome-page-site-options-form .button { display: block; width: 100%; min-height: 48px; margin-top: 12px; font-size: 18px !important; }
}

/* gwiazdka ulubionych w kartach stron i pytań na osi pierwszej linii nazwy / tytułu (komentarz 2026-10-22; było: na telefonie
   10 px niżej, na tablecie 4 px niżej, na komputerze 2 px wyżej). Na telefonie gwiazdka karty pytania stoi w pasku liczników — bez zmian. */
.karta-strony > [id^="lwww"], .question-row-details > [id^="lqa"] { margin-top: 7px; }
@media (min-width: 768px) and (max-width: 1023px) {
	.karta-strony > [id^="lwww"], .question-row-details > [id^="lqa"] { margin-top: 1px; }
}
@media (max-width: 767px) {
	.karta-strony > [id^="lwww"] { margin-top: -5px; }
}

/* ========== Strona główna (welcomePage.php), 2026-10-22 ========== */
/* Klasy w PHP: sekcje .post — .glowna-przyciski („Dodaj własne pytanie / temat”, „Zobacz wszystkie”), .kategorie, .nowe-opinie, .indeks-liter,
   .podobienstwa, .ostatnie-strony; h1.naglowek-glowna, h2.title.naglowek-nowe; panel — .reklama-160 (oba wieżowce), .popularne-tematy (.temat),
   .popularne-strony; pasek .pasek-odpowiedz: „Zadaj pytanie” → /dodaj-pytanie i .pasek-strona „Dodaj stronę” → pole adresu w powitaniu. */

/* ---------- wszystkie szerokości ---------- */
/* nowe opinie jak opinie na listingu tagu: nazwa strony, link, treść w jasnej ramce, podpis 8 px pod ramką */
.nowe-opinie .entry h3 { margin-bottom: 6px; }
.nowe-opinie .entry > p:first-of-type { margin: 0; line-height: 1.45; }
.nowe-opinie .entry > p:nth-of-type(2) { display: flow-root; margin: 12px 0 0; padding: 10px 12px; background: #fafafa; border: 1px solid #dddddd; line-height: 1.55; }
.nowe-opinie .meta { display: flow-root; height: auto; padding: 8px 0 22px; }

/* „Gorące pytania i tematy na Forum” (zostaje h1 dla wyszukiwarek) wygląda jak nagłówek sekcji — tak jak „Nowe tematy na Forum” i pozostałe
   (komentarz 2026-10-22 „Czy ten nagłówek ma być taki duży?”: na stronie głównej to pierwsza z równorzędnych sekcji, nie tytuł strony):
   20 px pogrubione na telefonie, 22 px na tablecie (pogrubione) i komputerze, bez kreski; 65 px pod powitaniem (komputer 43 px), 24 px do karty */
.naglowek-glowna { margin: 31px 0 -11px !important; padding: 0; border-bottom: none; font-size: 22px; line-height: 1.25; letter-spacing: -0.035em; font-weight: normal; color: #333333; }
@media (min-width: 768px) and (max-width: 1023px) {
	.naglowek-glowna { margin-top: 31px !important; font-weight: bold; letter-spacing: 0; color: #222222; }
}
@media (max-width: 767px) {
	.naglowek-glowna { margin-top: 30px !important; margin-bottom: -9px !important; font-size: 20px; font-weight: bold; letter-spacing: 0; color: #222222; }
}

/* linki do stron w nowych opiniach i podobieństwach: ten sam ciemniejszy niebieski co tytuły kart, panel i okruszki (#2A6496,
   komentarz 2026-10-22 — był jasny #428BCA) */
.nowe-opinie .entry a, .podobienstwa a { color: #2A6496; }
.nowe-opinie .entry a:hover, .podobienstwa a:hover { color: #2A6496; text-decoration: underline; }

/* powitanie na tablecie i komputerze: odstępy w żółtym panelu równe u góry i u dołu (komentarz 2026-10-22; było: do tekstu 26 / 31 px,
   pod ostatnim przyciskiem 45 / 41 px — margines ostatniego akapitu i powitania doklejał się na dole). Teraz tablet: do tekstu 26 px,
   pod przyciskiem 26 px; komputer: 31 px nad tekstem i ok. 31 px pod najniższym wierszem (lewa kolumna jest dłuższa). */
@media (min-width: 768px) and (max-width: 1023px) {
	#widebar-main:has(#welcome-intro) { padding-top: 20px; padding-bottom: 24px; }
	#widebar-main #welcome-intro { margin-bottom: 0; }
	#welcome-intro form > p:last-child { margin-bottom: 0; }
	#welcome-intro form > p:first-child { margin-top: 0; }
}
@media (min-width: 1024px) {
	#widebar-main:has(#welcome-intro) { padding-top: 25px; padding-bottom: 25px; }
	#widebar-main #welcome-intro { margin-bottom: 0; }
	#welcome-intro form > p:last-child { margin-bottom: 0; }
	#welcome-intro form > p:first-child { margin-top: 0; }
}

/* nagłówki sekcji (h2.title) jak „Wypożyczalnia Aut Opinie” na listingu tagu (komentarz 2026-10-22): pogrubione, bez kreski. Odstępy (komentarz
   „uspójnij odstępy nad nagłówkami”): 48 px nad (od widocznej rzeczy powyżej — tekstu, przycisku, kreski) i 24 px pod, na każdej szerokości. „Nowe tematy na Forum” (dziś h2 bez klasy, mniejszy) to też nagłówek sekcji: h2.title.naglowek-nowe */
@media (max-width: 1023px) {
	.kategorie > h2.title, .nowe-opinie > h2.title, .indeks-liter > h2.title, .podobienstwa > h2.title, .ostatnie-strony > h2.title { margin-top: 43px; margin-bottom: 24px; }
	.kategorie > h2.title { margin-top: 16px; }
	h2.title.naglowek-nowe { margin-top: 31px; margin-bottom: -1px; }
}
@media (min-width: 1024px) {
	.kategorie > h2.title, .nowe-opinie > h2.title, .indeks-liter > h2.title, .podobienstwa > h2.title, .ostatnie-strony > h2.title { margin-top: 43px; margin-bottom: 24px; }
	.kategorie > h2.title { margin-top: 16px; }
	.indeks-liter > h2.title { margin-bottom: 29px; }
	h2.title.naglowek-nowe { margin-top: 31px; margin-bottom: -11px; }
}

/* kategorie: etykiety jak tagi pytania, w równych kolumnach (komentarz 2026-10-22: „większy porządek”) — 3 kolumny na tablecie i komputerze
   (kolejność jak w dzisiejszej tabeli 3 × 13), 2 na telefonie; nazwa po lewej, liczba wątków szarym po prawej (na telefonie bez słowa „wątków”) */
.kategorie table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100% !important; line-height: 1.3 !important; font-size: 15px !important; }
.kategorie tbody, .kategorie tr { display: contents; }
.kategorie td { display: block; min-width: 0; padding: 0; }
.kategorie td a { display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; height: 100%; min-height: 40px; padding: 6px 12px;
	background: #e3f0f8; color: #1f5f99; border-radius: 20px; text-decoration: none; }
.kategorie td a span { flex: none; font-size: 13px !important; color: #5f6f7f !important; }
.kategorie td a:hover { background: #1f5f99; color: #ffffff; text-decoration: none; }
.kategorie td a:hover span { color: #d6e6f2 !important; }

/* ---------- telefon i tablet ---------- */
@media (max-width: 1023px) {
	/* tło białe jak na innych stronach (body { background: #ffffff } wyżej — tu wygrywał #main-page-body ze zdjęciem krajobrazu
	   bckgrn-journey-blue.jpg 1800×500, które na telefonie wchodziło pod powitanie, a na tablecie prześwitywało wokół panelu) */
	#main-page-body { background: #ffffff; }

	/* powitanie: pole adresu i przyciski wygodne do dotknięcia */
	#welcome-intro #welcome-search-field { box-sizing: border-box; width: 100%; max-width: 320px; min-height: 44px; padding: 0 10px; font-size: 16px; }
	#welcome-intro .button { min-height: 44px; }

	.kategorie .entry + .entry { margin-top: 20px; }

	/* indeks liter: kwadraty 44 px */
	.indeks-liter .entry { display: flex; flex-wrap: wrap; gap: 8px; }
	.indeks-liter .entry br { display: none; }
	.indeks-liter .entry .button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 17px; }
	.podobienstwa p, .ostatnie-strony p { overflow-wrap: anywhere; }
}

/* ---------- telefon ---------- */
@media (max-width: 767px) {
	/* powitanie: dwie kolumny jedna pod drugą, bez żółtego panelu — treść na całą szerokość jak opis na wizytówce (komentarz 2026-10-22:
	   panel wymuszał marginesy dookoła i zwężał obszar roboczy) */
	#widebar-main:has(#welcome-intro) { margin: 0 16px; padding: 20px 0 30px; background: none !important; border-radius: 0;
		border-bottom: 1px solid #ababab; }   /* kreska pod powitaniem jak pod kartami (30 px pod przyciskiem, komentarz 2026-10-22) */
	#widebar-main #welcome-intro { margin-bottom: 0; text-align: left; line-height: 1.5; }
	#welcome-intro table, #welcome-intro tbody, #welcome-intro tr, #welcome-intro td { display: block; width: auto; padding: 0; }
	#welcome-intro td + td { margin-top: 18px; padding-top: 18px; border-top: 1px solid #dddddd; }
	#welcome-intro p { margin: 0 0 10px; }
	#welcome-intro td:last-child form > p:last-child { margin-bottom: 0; }   /* bez panelu margines ostatniego akapitu wychodził pod powitanie */
	#welcome-intro b { font-size: 18px; color: #222222; }
	#welcome-intro .button { display: block; width: 100%; min-height: 48px; white-space: normal; }
	#welcome-page-add-question-form .button { font-size: 18px !important; }
	#welcome-intro #welcome-page-site-options-form { font-size: 16px; }
	#welcome-intro #welcome-search-field { max-width: none; min-height: 48px; margin-top: 6px; }
	#welcome-intro #welcome-page-site-options-form .button { margin-top: 0; font-size: 17px !important; }

	.kategorie table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	h2.title.naglowek-nowe { margin-top: 30px; margin-bottom: 1px; }
	.kategorie > h2.title { margin-top: 31px; }

	/* przyciski pod kartami i w sekcjach: na całą szerokość */
	.glowna-przyciski .entry { margin-bottom: 12px !important; }
	.glowna-przyciski p { margin: 0 0 12px; }
	.glowna-przyciski br { display: none; }
	.glowna-przyciski .button, .kategorie form .button, .nowe-opinie form .button { display: flex; align-items: center; justify-content: center; width: 100%;
		min-height: 48px; margin: 0 !important; font-size: 18px !important; }
	.kategorie .entry + .entry, .nowe-opinie .entry:has(form) { margin-bottom: 12px !important; }

	/* nowe opinie: miniatura 110 px po prawej obok nazwy i linku (jak karty stron), treść pod nimi, bez „Zobacz…”; 4 z 7 */
	.nowe-opinie .entry h3 { font-size: 18px; overflow-wrap: anywhere; }
	.nowe-opinie .entry img.snapshot, .nowe-opinie .entry img.snapshot-left { float: right; width: 110px; height: auto; margin: 2px 0 8px 12px; }
	.nowe-opinie .entry > p:nth-of-type(2) { clear: both; }
	.nowe-opinie .meta .permalink { display: none; }
	.nowe-opinie .entry:has(> h3):nth-of-type(n+5), .nowe-opinie .entry:has(> h3):nth-of-type(n+5) + .meta { display: none; }

	/* ostatnio dodane strony (sam tytuł i opis, bez linków): 5 pierwszych */
	.ostatnie-strony .entry:nth-of-type(n+6) { display: none; }
	.ostatnie-strony .entry p { line-height: 1.55; }
	.podobienstwa .entry p { margin-bottom: 10px; line-height: 1.5; }
	.podobienstwa .entry p:last-child { margin-bottom: 0; }
}

/* ---------- przyklejony pasek (telefon): „Zadaj pytanie” (główny) + „Dodaj stronę” obrysowany na niebiesko jak przyciski stron na wizytówce ---------- */
@media (max-width: 767px) {
	.pasek-odpowiedz .pasek-strona { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; white-space: nowrap; border: 1px solid #1f5f99;
		border-radius: 4px; background: #ffffff; color: #1f5f99; font-weight: bold; text-decoration: none; }
}

/* ---------- panel pod treścią (telefon i tablet) ---------- */
@media (max-width: 1023px) {
	/* nagłówki jak w panelu innych stron (tu <h2>, gdzie indziej <h3>): pogrubione, do lewej */
	#sidebar:has(.popularne-tematy) { padding-top: 0; }
	#sidebar:has(.popularne-tematy) li { margin-bottom: 0; }
	.popularne-strony p { margin-bottom: 0; }
	.popularne-strony > h2 { margin-bottom: 16px !important; }   /* wiersze listy mają 2,2 wysokości — tekst i tak 24 px pod nagłówkiem */
	#sidebar li > h2 { margin: 24px 0 24px; padding: 0; border: none; font-size: 22px; font-weight: bold; letter-spacing: 0; line-height: 1.25; text-align: left; color: #222222; }
	/* „Popularne tematy”: etykiety jak kategorie (temat + liczba szarym), zamiast jednego tematu w wierszu */
	/* … w równych kolumnach jak kategorie (komentarz 2026-10-22): 3 na tablecie, 2 na telefonie; nazwa po lewej, liczba po prawej;
	   cała etykieta klikalna (link rozciągnięty na etykietę) */
	.popularne-tematy p { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: left !important; line-height: 1.3 !important; }
	.popularne-tematy p > br { display: none; }
	.popularne-tematy .temat { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; box-sizing: border-box;
		min-height: 40px; padding: 6px 12px; background: #e3f0f8; border-radius: 20px; }
	.popularne-tematy .temat a { color: #1f5f99; text-decoration: none; overflow-wrap: anywhere; }
	.popularne-tematy .temat a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
	.popularne-tematy .temat span { flex: none; font-size: 13px !important; color: #5f6f7f !important; }
	.popularne-tematy .temat:hover { background: #1f5f99; }
	.popularne-tematy .temat:hover a { color: #ffffff; }
	.popularne-tematy .temat:hover span { color: #d6e6f2 !important; }
	/* „Popularne strony”: lista w kolumnach, do lewej */
	.popularne-strony p { columns: 3 180px; column-gap: 24px; text-align: left !important; line-height: 2.2; }
}
@media (max-width: 767px) {
	#sidebar li > h2 { font-size: 20px; }
	.popularne-tematy p { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.popularne-strony p { columns: 2; overflow-wrap: anywhere; }
}


/* ========== Listing tagu — poprawki z komentarzy do strony głównej, 2026-10-22 ========== */
/* listing tagu, opinie z tematu: link do strony (tytuł pod nazwą) ciemniejszym niebieskim jak tytuły kart, panel i okruszki
   (komentarz 2026-10-22 do „Nowych opinii” na stronie głównej — ten sam element) */
.opinie-tematu .entry a { color: #2A6496; }
.opinie-tematu .entry a:hover { color: #2A6496; text-decoration: underline; }

/* listing tagu: nagłówek sekcji „… Opinie” — 48 px nad (od kreski ostatniej karty) i 24 px pod, jak nagłówki sekcji strony głównej
   (komentarz 2026-10-22 „uspójnij odstępy nad nagłówkami”; było 65 px na telefonie i tablecie, 43 px na komputerze) */
.opinie-tematu > h2.title { margin-top: 35px; }


/* ========== Reklamy elastyczne na wizytówce w stałym rozmiarze (2026-10-22) ========== */
/* Pod nagłówkiem na telefonie (.reklama-telefon) i „Zobacz także”: przy rozmiarze automatycznym AdSense rezerwował 375×375 / 375×280 px,
   a niższa reklama zostawiała puste pasy nad i pod sobą (zrzut właściciela). Rozmiar z CSS — AdSense wypełnia dokładnie ten prostokąt. */
.reklama-prostokat { display: inline-block; width: 336px; height: 280px; vertical-align: top; }   /* top: bez 3 px na ogonki liter pod reklamą */
@media (max-width: 374px) {
	.reklama-prostokat { width: 300px; height: 250px; }   /* 336 px nie mieści się między marginesami 16 px */
}
/* odstępy wokół reklam jak przy nagłówkach: od nagłówka do reklamy 24 px, od reklamy do następnego nagłówka 48 px, nad reklamą pod przyciskami
   ok. 32 px (było: 53 px nad i 55 px pod reklamą pod nagłówkiem, 30 / 45 px pod „Zobacz także” i 63 px do „Popularne tematy”) */
.reklama-blok.reklama-elastyczna { margin-top: 24px !important; }
.reklama-blok > ins.adsbygoogle { vertical-align: top; }   /* reklamy 336×280 na innych stronach: też bez 3 px pod spodem */
@media (max-width: 1023px) {
	#page:has(#content-sitedetails) #sidebar { padding-top: 16px; }
}
@media (max-width: 767px) {
	.reklama-telefon { margin: 0; }
	#content-sitedetails > #Opinions { margin-top: 48px; }
}

/* Niewypełnione reklamy (AdSense nie ma czego pokazać — data-ad-status="unfilled") bez pustego miejsca: sposób z pomocy AdSense; z kontenerem,
   żeby nie zostawały marginesy ani obrazek „A czy ten temat cię interesuje?” wskazujący pustkę (2026-10-22) */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.reklama-telefon:has(> ins.adsbygoogle[data-ad-status="unfilled"]), .reklama-blok:has(> ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; }
/* „Zobacz także” na wizytówce to sam nagłówek nad reklamą — bez reklamy chowamy też nagłówek */
h2.title:has(+ .post > .reklama-elastyczna > ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; }
@media (max-width: 767px) {
	/* bez reklamy pod nagłówkiem wizytówki: od przycisków do „Opinie o …” 48 px jak nad innymi nagłówkami (było 82 px) */
	.reklama-telefon:has(> ins.adsbygoogle[data-ad-status="unfilled"]) + #content-sitedetails > #Opinions { margin-top: 14px; }
}

/* ========== Wizytówka: przyciski w nagłówku równej wysokości na tablecie i komputerze (komentarz 2026-10-22) ========== */
/* na produkcji 47 / 49 / 41 px: inline padding 14 / 14 / 10 px i zielony bez ramki; teraz 44 px, odstęp 10 px (telefon bez zmian) */
.wizytowka-przyciski .button { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle; }
.wizytowka-przyciski .button.button-green:not(.przycisk-podobna) { border: 1px solid #4cae4c; }
@media (min-width: 1024px) {
	.wizytowka-przyciski form { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0; }
	.wizytowka-przyciski .button { margin: 0 !important; font-size: 16px; }
}


/* ========== Podstrony: „Dodaj pytanie” (question-add.php), „Ulubione” (liked-list.php), „Wyniki wyszukiwania” (search.php),
   strony na literę (letterPage.php), regulamin (rules.php), potwierdzenia po wysłaniu formularza (*-save.php), 2026-10-22 ========== */

/* ---------- Dodaj pytanie i Wyniki wyszukiwania: tytuł tyle pod okruszkami co na innych stronach (12 / 18 / 21 px) ---------- */
/* tytuł jest tu w .post, a #content .post ma 5 px u góry; na wynikach dodatkowo było inline padding-top: 15px (usunięte w PHP) */
#content .post.dodaj-pytanie, #content.wyniki-szukania > .post { padding-top: 0; }

/* ---------- Dodaj pytanie ---------- */
/* tytuł jak na innych stronach (h1.tag-title z kreską, bez dwukropka; było inline 28 px bez kreski), okruszki „‹ Start”, pole treści 5 wierszy
   z podpowiedzią; pod formularzem bez pustych <br/><br/> */
@media (max-width: 1023px) {
	#content:has(> .dodaj-pytanie) > div > br, #sidebar li.reklama-boczna > br { display: none; }
	.dodaj-pytanie .questionForm .entry, .dodaj-pytanie .opinion { margin-top: 0; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* pole treści: z prawej tyle miejsca co na komputerze (98 px; było 12 px — pole na całą szerokość panelu), komentarz 2026-10-22 */
	.dodaj-pytanie .questionForm { padding-right: 96px; }
}
@media (max-width: 767px) {
	.dodaj-pytanie .questionForm { padding: 14px 14px 16px; }   /* pole równo od obu krawędzi panelu (było 15 / 10 px) */
}

/* ---------- Ulubione ---------- */
/* stan pusty (większość odwiedzających): jasna ramka z gwiazdką i linkiem, gdzie szukać tematów */
.ulubione-puste { margin: 0 0 8px; padding: 14px 16px; background: #f5f9fc; border: 1px solid #d6e4f0; border-radius: 8px; line-height: 1.6; }
.ulubione-puste img { vertical-align: middle; }
.ulubione-puste .ulubione-link { display: inline-block; margin-top: 6px; font-weight: bold; color: #2A6496; }

/* ---------- Wyniki wyszukiwania ---------- */
#content.wyniki-szukania { width: 820px; }   /* komputer jak dziś (było inline) */
.szukaj-ponownie { display: none; }
@media (max-width: 1023px) {
	#content.wyniki-szukania { width: auto; }
	#cse-search-results iframe { max-width: 100%; }
}
@media (max-width: 767px) {
	/* wyszukiwarka nad wynikami — w nagłówku jest schowana pod „Menu”; z wpisanym zapytaniem */
	.szukaj-ponownie { display: flex; gap: 8px; margin: 0 0 24px; }
	.szukaj-ponownie input[name="q"] { flex: 1 1 auto; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0 12px; font-size: 16px;
		background: #ffffff; border: 1px solid #cfd8e0; border-radius: 4px; }
	.szukaj-ponownie button { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid #1f5f99; border-radius: 4px; background: #ffffff;
		color: #1f5f99; font-size: 15px; font-weight: bold; }
}

/* Ulubione — tylko pytania i strony oznaczone gwiazdką (komentarz 2026-10-22: bez wyszukiwarek „→ wyszukaj pytanie / firmę”; w PHP usunięte).
   Nagłówki sekcji 48 px nad, 24 px pod (zasada ze strony głównej; było 52–70 px nad, 0–35 px pod) */
.ulubione-puste { margin-top: 24px; margin-bottom: 0; }
#content.ulubione > h2.title { padding-top: 0; padding-bottom: 0; margin-top: 48px; }
@media (min-width: 1024px) {
	/* karty mają 35 px u góry — do 24 px (dwie reguły: przecinek w :has() psuje generator makiety) */
	#content.ulubione > h2.title:has(+ .post .karta) { margin-bottom: -11px; }
	#content.ulubione > h2.title:has(+ .post .karta-strony) { margin-bottom: -11px; }
}

/* ---------- Strona na literę (letterPage.php) ---------- */
/* tematy jako etykiety w kolumnach, jak kategorie na stronie głównej: 3 kolumny (tablet, komputer), 2 na telefonie (dziś tabela 3 × N
   zwykłych linków, na telefonie wychodziła poza ekran) */
.litera-tematy table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100% !important; line-height: 1.3 !important; font-size: 15px; }
.litera-tematy tbody, .litera-tematy tr { display: contents; }
.litera-tematy td { display: block; min-width: 0; padding: 0; }
.litera-tematy td a { display: flex; align-items: center; box-sizing: border-box; height: 100%; min-height: 40px; padding: 6px 12px; background: #e3f0f8;
	color: #1f5f99; border-radius: 20px; text-decoration: none; overflow-wrap: anywhere; }
.litera-tematy td a:hover { background: #1f5f99; color: #ffffff; text-decoration: none; }
/* „Zmień na:” — litery jako kwadraty jak „Indeks alfabetyczny” na stronie głównej, bieżąca wypełniona ciemniej */
.zmien-litere { margin-top: 32px; padding-top: 0; }
.zmien-litere h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: none; font-size: 15px; font-weight: normal; letter-spacing: 0; }
.zmien-litere .zmien-etykieta { flex: 0 0 100%; margin-bottom: 2px; font-weight: bold; color: #222222; }   /* jak „Przejdź do strony:” */
.zmien-litere h2 a, .zmien-litere h2 .biezaca { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; height: 36px;
	border-radius: 6px; background: #5BC0DE; color: #ffffff; font-size: 16px; text-decoration: none; }
.zmien-litere h2 .biezaca { background: #1f5f99; }
@media (max-width: 1023px) {
	.zmien-litere h2 a, .zmien-litere h2 .biezaca { width: 44px; height: 44px; font-size: 17px; }
	#widebar-main:has(.litera-tematy) { background: none !important; }
}
#widebar-main:has(.litera-tematy) { padding-left: 0; padding-right: 0; }   /* treść równo z okruszkami (było: tablet 44 px zamiast 24, komputer +28 px) */
/* bloki .post są tu w #widebar-main (nie w #content) i mają 40 px u góry z ogólnej reguły .post — zerujemy; odstępy wg zasady 48 / 24 */
#widebar-main:has(.litera-tematy) .post { padding-top: 0; }
#widebar-main:has(.litera-tematy) .stronicowanie { margin-top: 48px; }
#widebar-main:has(.litera-tematy) .post > h2.title { margin-top: 48px; padding-top: 0; }
@media (max-width: 767px) {
	.litera-tematy table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Regulamin (rules.php) ---------- */
#content.regulamin { width: 505px; }          /* komputer jak dziś (było inline) */
#sidebar.regulamin-panel { width: 302px; }
.regulamin .entry h2 { margin: 48px 0 24px; padding: 0; }   /* nagłówki rozdziałów 48 px nad, 24 px pod — na każdej szerokości */
@media (max-width: 1023px) {
	#content.regulamin, #sidebar.regulamin-panel { width: auto; }
	.regulamin-panel .reklama-300 { display: none; }   /* 2 × 300×600 pod tekstem regulaminu — jak wieżowce na innych stronach */
	.regulamin p { line-height: 1.6; overflow-wrap: anywhere; }
	.regulamin .entry h2 { font-size: 20px; font-weight: bold; letter-spacing: 0; line-height: 1.25; color: #222222; border: none; }
}

/* ---------- Potwierdzenia po wysłaniu pytania, odpowiedzi, komentarza (*-save.php) ---------- */
.potwierdzenie .alert a { color: #2A6496; }
@media (max-width: 767px) {
	.potwierdzenie .alert { padding: 14px 16px; font-size: 16px; line-height: 1.55; }
	.potwierdzenie-dalej { float: none; margin: 16px 0 0; }
	.potwierdzenie-dalej .button { display: block; width: 100%; min-height: 48px; font-size: 18px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.potwierdzenie-dalej { float: none; text-align: right; }
	.potwierdzenie-dalej .button { min-height: 44px; }
}
@media (min-width: 1024px) {
	.potwierdzenie-dalej { float: none; text-align: right; }
}
/* tytuł: na telefonie 12 px pod okruszkami jak na innych stronach, na tablecie i komputerze ok. 48 px pod banerem 728×90 */
#widebar-main:has(.litera-tematy) h1.tag-title { margin-top: 0 !important; }
@media (min-width: 768px) and (max-width: 1023px) {
	#widebar-main:has(.litera-tematy) h1.tag-title { margin-top: 3px !important; }
}