/*
 * Ranking pages of the new plugin (szablony/*.php), from the Standard template of the old plugin. Everything is scoped
 * to .rr, so theme styles outside the ranking stay untouched. The accent comes from the settings as --rr-akcent on the
 * section. Layout follows the width of the ranking (container queries): a theme with a sidebar gets the phone layout in
 * a narrow column.
 */
.rr {
	--rr-akcent: #24568a;
	--rr-akcent-tekst: var(--rr-akcent);
	--rr-na-akcencie: #fff;
	--rr-tusz: #1d2733;
	--rr-szary: #55626f;
	--rr-linia: #dde3e9;
	--rr-tlo: #f4f6f8;
	--rr-plus: #1f7a4d;
	--rr-minus: #a33a2b;
	--rr-promien: 10px;
	color: var(--rr-tusz);
	font-size: 16px;
	line-height: 1.55;
	min-width: 0;
	container: rr / inline-size;
	position: relative;
}
.rr *, .rr *::before, .rr *::after { box-sizing: border-box; }
.rr img { max-width: 100%; height: auto; border: 0; box-shadow: none; }
.rr h2 { margin: 2em 0 .75em; line-height: 1.25; }
.rr p, .rr li { margin: 0; text-align: left; }
.rr a:focus-visible, .rr summary:focus-visible { outline: 3px solid #d48800; outline-offset: 2px; }
.rr-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.rr-podpis { margin: 0 0 12px !important; color: var(--rr-szary); font-size: 14px; }
.rr-wstep { margin: 0 0 12px !important; }
.rr-wynik { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--rr-linia); border-left: 4px solid var(--rr-akcent); border-radius: var(--rr-promien); background: var(--rr-tlo); }
.rr-wynik h2 { margin-top: 0; }
.rr ul.rr-najlepsze { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rr-najlepsze span { display: inline-block; min-width: 12em; color: var(--rr-szary); font-size: 14px; }

/* List: cards on phones, rows from 720px of the ranking's width. */
.rr ol.rr-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rr-linia); }
.rr ol.rr-lista > li { margin: 0; padding: 0; }
.rr ol.rr-lista > li::before { content: none; }
.rr .rr-poz { display: grid; grid-template-columns: 40px 72px minmax(0, 1fr); grid-template-areas: "miejsce foto opis" "ocena ocena ocena" "zakup zakup zakup"; gap: 10px 12px; align-items: start; padding: 16px 0 !important; border-bottom: 1px solid var(--rr-linia); }
.rr .rr-poz--prosta { grid-template-areas: "miejsce foto opis" "zakup zakup zakup"; }
.rr .rr-poz--prosta.rr-poz--opis { grid-template-areas: "miejsce foto opis" "zakup zakup zakup" "tresc tresc tresc"; }
.rr-poz__miejsce { grid-area: miejsce; display: flex; justify-content: center; }
.rr-miejsce { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rr-tlo); font-weight: 700; }
.rr-poz--top .rr-miejsce { background: var(--rr-akcent); color: var(--rr-na-akcencie); }
.rr-poz__foto { grid-area: foto; }
.rr-poz__foto img { display: block; width: 72px; height: 72px; object-fit: contain; }
.rr-poz__opis { grid-area: opis; min-width: 0; }
/* Editorial card: name, score and shop link on top, the description with parameters below at full width. */
.rr .rr-poz--redakcyjna { grid-template-areas: "miejsce foto opis" "ocena ocena ocena" "zakup zakup zakup" "tresc tresc tresc"; }
.rr-poz__tresc { grid-area: tresc; min-width: 0; }
.rr h3.rr-poz__nazwa { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; }
.rr-poz__nazwa { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.rr-poz__ocena { grid-area: ocena; }
.rr-poz__zakup { grid-area: zakup; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.rr-poz__zakup .rr-przycisk { margin-left: auto; }
.rr-etykiety { margin: 4px 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.rr-etykieta { padding: 1px 8px; border: 1px solid var(--rr-linia); border-radius: 99px; font-size: 13px; }
.rr-etykieta--cena, .rr-etykieta--odznaka { border-color: var(--rr-akcent); color: var(--rr-akcent-tekst); }
.rr-nota { margin: 6px 0 !important; }
.rr-dla-kogo { margin: 8px 0 !important; padding: 8px 12px; border-radius: 8px; background: var(--rr-tlo); font-size: 15px; }
.rr-argumenty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 4px 16px; margin: 6px 0; font-size: 14px; }
.rr-argumenty ul { margin: 0; padding-left: 18px; }
.rr-plus li::marker { content: "+ "; color: var(--rr-plus); font-weight: 700; }
.rr-minus li::marker { content: "- "; color: var(--rr-minus); font-weight: 700; }
.rr-porownanie { margin: 6px 0 0 !important; color: var(--rr-szary); font-size: 14px; }
.rr dl.rr-fakty { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; font-size: 13px; }
.rr-fakty div { display: flex; gap: 4px; }
.rr dl.rr-fakty dt { margin: 0; color: var(--rr-szary); font-weight: 400; }
.rr dl.rr-fakty dt::after { content: ":"; }
.rr dl.rr-fakty dd { margin: 0; font-weight: 600; }
/* Technical parameters of a position: label and value rows, two columns where the description is wide enough. */
.rr dl.rr-parametry { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 18px; margin: 10px 0; padding: 0; font-size: 14px; }
.rr-parametry div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--rr-linia); }
.rr dl.rr-parametry dt { margin: 0; color: var(--rr-szary); font-weight: 400; }
.rr dl.rr-parametry dd { margin: 0; font-weight: 600; text-align: right; }
.rr-ocena { text-align: center; }
.rr-ocena b { font-size: 26px; }
.rr-ocena span, .rr-ocena small { color: var(--rr-szary); }
.rr-ocena small { display: block; font-size: 12px; }
.rr-cena { font-size: 19px; font-weight: 700; white-space: nowrap; }
.rr-cena small { font-size: 13px; font-weight: 400; color: var(--rr-szary); }
.rr-liczba-ofert, .rr-brak { color: var(--rr-szary); font-size: 13px; }
.rr .rr-przycisk { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 2px solid var(--rr-akcent); border-radius: 8px; background: var(--rr-akcent); color: var(--rr-na-akcencie) !important; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none !important; white-space: nowrap; }
.rr .rr-przycisk:hover { filter: brightness(.9); }

@container rr (min-width: 720px) {
	.rr .rr-poz { grid-template-columns: 44px 96px minmax(0, 1fr) 120px 160px; grid-template-areas: "miejsce foto opis ocena zakup"; gap: 6px 18px; }
	.rr .rr-poz--prosta { grid-template-columns: 44px 96px minmax(0, 1fr) 160px; grid-template-areas: "miejsce foto opis zakup"; }
	.rr .rr-poz--prosta.rr-poz--opis { grid-template-areas: "miejsce foto opis zakup" ". . tresc tresc"; }
	.rr .rr-poz--redakcyjna { grid-template-columns: 44px 96px minmax(0, 1fr) 100px max-content; grid-template-areas: "miejsce foto opis ocena zakup" ". . tresc tresc tresc"; }
	.rr-poz__foto img { width: 96px; height: 96px; }
	.rr-poz__zakup { flex-direction: column; align-items: flex-end; text-align: right; }
	.rr-poz__zakup .rr-przycisk { margin-left: 0; }
}

.rr ul.rr-kryteria { padding: 0; list-style: none; display: grid; gap: 12px; }
.rr-kryterium { display: flex; justify-content: space-between; gap: 8px; }
.rr-pasek { display: block; height: 6px; margin: 4px 0; border-radius: 3px; background: var(--rr-linia); }
.rr-pasek i { display: block; height: 100%; border-radius: 3px; background: var(--rr-akcent); }
/* Tables (comparison, guide): scroll sideways inside their frame on phones, never the page. */
.rr-tabela-ramka { max-width: 100%; margin: 12px 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rr table.rr-tabela { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; }
.rr .rr-tabela th, .rr .rr-tabela td { padding: 7px 10px; border: 0; border-bottom: 1px solid var(--rr-linia); text-align: left; vertical-align: top; font-size: 14px; line-height: 1.45; letter-spacing: normal; text-transform: none; color: var(--rr-tusz); background: none; }
.rr .rr-tabela thead th { background: var(--rr-tlo); font-weight: 700; }
.rr .rr-tabela tbody th { font-weight: 600; }
.rr .rr-tabela--porownanie tbody th { min-width: 12em; }
.rr .rr-tabela--porownanie td { min-width: 7em; }
.rr p.rr-akapit { margin: 0 0 .9em; }
.rr ul.rr-poradnik-lista { margin: 0 0 1em; padding-left: 1.3em; }
.rr ul.rr-poradnik-lista li { margin: 0 0 .35em; }
.rr h3 { margin: 1.6em 0 .6em; line-height: 1.3; }
.rr-pytanie { padding: 8px 0; border-bottom: 1px solid var(--rr-linia); }
.rr-pytanie summary { cursor: pointer; font-weight: 700; }
.rr-metoda { color: var(--rr-szary); font-size: 14px; }
.rr-rodzic { margin: 16px 0 0 !important; }
.rr-rodzic--wyrozniony { padding: 12px 16px; border-left: 4px solid var(--rr-akcent); background: var(--rr-tlo); }

@media print {
	.rr .rr-przycisk { border: 1px solid #000; background: none; color: #000 !important; }
}