/* Strona oferty /subskrypcja/ (templates/subskrypcja.php, js/subskrypcja.js).
 *
 * Plik trafia do <head> przez $head_meta, czyli PRZED style.css i responsive.css, dlatego wszystko siedzi pod korzeniem
 * "#subskrypcja.sub" (ID + klasa), żeby wygrywać specyficznością z regułami serwisu typu "#centerblock p" i "#tresc ul".
 * Reguły dotykające <ul>/<li>/<ol> dostają jeszcze przedrostek "#centerblock" (serwis ma "#centerblock #tresc ul").
 * style.css i responsive.css zostają nietknięte; nic stąd nie wpływa na inne podstrony.
 *
 * Bez JavaScriptu (brak klasy .sub-js) widać oba zestawy kart (miesięczny i roczny), z nagłówkami; przełącznik okresu jest ukryty.
 */

/* Układ bez bocznych kolumn: środkowa kolumna zajmuje szerokość #content (jak strony kont). */
#content.sub-bez-bokow #centerblock{float:none;width:100%;max-width:880px;margin:0 auto;padding:10px 10px 0;box-sizing:border-box;text-align:left}

#subskrypcja.sub{
	--blue:#31b2e8; --blue-link:#0a6cb0; --blue-link-hover:#08558c; --blue-deep:#1f78c0; --blue-bar-1:#4aa8e6; --blue-bar-2:#2a85cc;
	--orange-soft:#fff3e6; --orange-ink:#8a4300;
	--ink:#1c1c2e; --muted:#5c6070; --line:#dde3ee; --panel:#f6f9fd; --ok:#1d7a46;
	--display:'Titillium Web',Arial,sans-serif; --text:'Open Sans',Arial,sans-serif;
	/* Własna baza w px: serwis ustawia #tresc na 13pt, a na małych ekranach 1.7em - nie chcemy tego dziedziczyć. */
	font-family:var(--text);font-size:16px;line-height:1.6;color:var(--ink);
	text-align:left;width:100%;min-width:0;box-sizing:border-box;
	/* Biała karta: tło serwisu (niebo z chmurami) pogarsza czytelność długiego tekstu. */
	background:#fff;border-radius:8px;padding:12px 28px 30px;margin:0 0 20px;box-shadow:0 1px 6px rgba(28,28,46,.12);
}
#subskrypcja.sub *,#subskrypcja.sub *::before,#subskrypcja.sub *::after{box-sizing:border-box}
#subskrypcja.sub p{margin:0 0 12px;padding:0}
#subskrypcja.sub a{color:var(--blue-link)}
#subskrypcja.sub a:hover{color:var(--blue-link-hover)}
#subskrypcja.sub :focus-visible{outline:3px solid var(--blue-deep);outline-offset:2px;border-radius:4px}
#subskrypcja.sub .sub-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ pierwszy ekran */

#subskrypcja.sub .sub-hero{padding:14px 0 6px}
#subskrypcja.sub .sub-etykieta{margin:0 0 6px;font:600 15px var(--display);color:var(--blue-deep)}
#subskrypcja.sub h1{margin:0 0 12px;padding:0;font:600 36px/1.15 var(--display);color:var(--ink);max-width:22ch}
#subskrypcja.sub .sub-lead{font-size:18px;line-height:1.55;max-width:60ch}
#subskrypcja.sub .sub-wspiera{max-width:60ch;color:var(--muted)}
#subskrypcja.sub .sub-cta{margin:18px 0 8px}
#subskrypcja.sub .sub-pod-cta{margin:0 0 10px;font-size:15px;color:var(--muted)}
#subskrypcja.sub .sub-konto{margin:0;font-size:15px}

/* Jeden dominujący styl przycisków */
#subskrypcja.sub a.sub-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:8px 24px;border-radius:6px;
	background:linear-gradient(var(--blue-bar-1),var(--blue-bar-2));border:1px solid var(--blue-deep);color:#fff;
	font:600 17px var(--display);text-decoration:none;text-align:center}
#subskrypcja.sub a.sub-btn:hover{color:#fff;filter:brightness(1.07)}

/* ------------------------------------------------------------------ sekcje */

#subskrypcja.sub .sub-sekcja{margin:30px 0 0;padding:22px 0 0;border-top:2px solid var(--line)}
#subskrypcja.sub h2{margin:0 0 12px;padding:0;font:600 26px/1.2 var(--display);color:var(--ink)}
#subskrypcja.sub h3{margin:0 0 6px;padding:0;font:600 19px/1.3 var(--display);color:var(--ink)}
#subskrypcja.sub .sub-sekcja>p{max-width:68ch}
#subskrypcja.sub .sub-podpis{font-size:15px;color:var(--muted)}

/* Trzy korzyści */
#centerblock #subskrypcja.sub ul.sub-korzysci-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#centerblock #subskrypcja.sub ul.sub-korzysci-lista li{margin:0;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:6px;list-style:none}
#subskrypcja.sub .sub-korzysci-lista h2{margin:0 0 6px;font:600 20px/1.25 var(--display)}
#subskrypcja.sub .sub-korzysci-lista p{margin:0;font-size:15px}

/* ------------------------------------------------------------------ wybór kwoty i okresu */

#subskrypcja.sub .sub-twoj-wybor{margin:0 0 14px;padding:10px 14px;border-left:4px solid var(--blue);background:var(--panel);font-size:15px}

/* Przełącznik okresu: natywne radio (strzałki), widoczny tylko z JS. Wybór oznaczony obramowaniem, tłem i znakiem ✓, nie tylko kolorem. */
#subskrypcja.sub .sub-przelacznik{display:none;margin:0 0 16px;padding:0;border:0;min-width:0}
#subskrypcja.sub.sub-js .sub-przelacznik{display:flex;flex-wrap:wrap;gap:8px}
#subskrypcja.sub .sub-przelacznik label{position:relative;display:block}
#subskrypcja.sub .sub-przelacznik input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
#subskrypcja.sub .sub-przelacznik span{display:flex;align-items:center;min-height:46px;padding:8px 18px;border:2px solid var(--line);border-radius:999px;background:#fff;
	font:600 16px var(--display);color:var(--muted)}
#subskrypcja.sub .sub-przelacznik input:checked+span{border-color:var(--blue-deep);background:#e8f3fb;color:var(--ink)}
#subskrypcja.sub .sub-przelacznik input:checked+span::before{content:"\2713";margin-right:8px;color:var(--blue-deep);font-weight:700}
#subskrypcja.sub .sub-przelacznik input:focus-visible+span{outline:3px solid var(--blue-deep);outline-offset:2px}

/* Zestawy kart: z JS pokazany jest jeden, bez JS oba (z nagłówkami) */
#subskrypcja.sub .sub-wariant{margin:0 0 12px}
#subskrypcja.sub.sub-js .sub-wariant[data-ukryty-js]{display:none}
#subskrypcja.sub.sub-js .sub-wariant-tytul{display:none}
#subskrypcja.sub .sub-wariant-tytul{margin:14px 0 8px}

#centerblock #subskrypcja.sub ul.sub-ceny{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
#centerblock #subskrypcja.sub ul.sub-ceny li.sub-karta{display:flex;flex-direction:column;margin:0;padding:16px 16px 14px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:6px;list-style:none}
/* Proponowana kwota: subtelnie mocniejsza ramka i etykieta (bez twierdzeń o popularności) */
#centerblock #subskrypcja.sub ul.sub-ceny li.sub-karta-polecana{border-color:var(--blue-deep);border-width:2px;border-top-width:4px;background:#fff}
#subskrypcja.sub .sub-karta p{margin:0}
#subskrypcja.sub .sub-znacznik{margin:0 0 6px!important;font:600 13px var(--text);color:var(--blue-deep)}
#subskrypcja.sub .sub-cena strong{font:700 32px/1.1 var(--display);color:var(--ink);white-space:nowrap}
#subskrypcja.sub .sub-cena span{font-size:15px;color:var(--muted);white-space:nowrap}
#subskrypcja.sub .sub-oszcz{margin-top:4px!important;color:var(--ok);font-size:14px;font-weight:600}
#subskrypcja.sub .sub-opis{margin:8px 0 14px!important;font-size:14px;color:var(--muted)}
#subskrypcja.sub .sub-karta a.sub-btn{margin-top:auto;width:100%;padding:8px 8px;font-size:16px}

/* ------------------------------------------------------------------ znaczenie wsparcia */

#centerblock #subskrypcja.sub ul.sub-obszary{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#centerblock #subskrypcja.sub ul.sub-obszary li{margin:0;padding:0 0 0 14px;border-left:3px solid var(--blue);list-style:none;background:none}
#subskrypcja.sub .sub-obszary h3{font-size:18px}
#subskrypcja.sub .sub-obszary p{margin:0;font-size:15px}

/* ------------------------------------------------------------------ kroki (to prawdziwa kolejność, więc numeracja) */

#centerblock #subskrypcja.sub ol.sub-kroki{margin:0;padding:0;list-style:none;counter-reset:krok}
#centerblock #subskrypcja.sub ol.sub-kroki li{position:relative;counter-increment:krok;margin:0 0 14px;padding:2px 0 2px 48px;min-height:36px;max-width:68ch;background:none}
#centerblock #subskrypcja.sub ol.sub-kroki li::before{content:counter(krok);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
	background:var(--blue-deep);color:#fff;font:700 17px/34px var(--display);text-align:center}

/* ------------------------------------------------------------------ FAQ (natywne details/summary) */

#subskrypcja.sub .sub-faq details{border-bottom:1px solid var(--line);max-width:760px}
#subskrypcja.sub .sub-faq summary{display:flex;align-items:center;min-height:48px;padding:8px 28px 8px 0;position:relative;cursor:pointer;
	font:600 17px/1.35 var(--display);color:var(--ink);list-style:none}
#subskrypcja.sub .sub-faq summary::-webkit-details-marker{display:none}
#subskrypcja.sub .sub-faq summary::after{content:"+";position:absolute;right:4px;top:50%;margin-top:-14px;font:600 24px/28px var(--display);color:var(--blue-deep)}
#subskrypcja.sub .sub-faq details[open] summary::after{content:"\2212"}
#subskrypcja.sub .sub-faq details p{margin:0 0 14px;font-size:15px;max-width:68ch}

/* ------------------------------------------------------------------ zakończenie i sprzedawca */

#subskrypcja.sub .sub-sprzedawca{background:var(--panel);padding:20px 18px;border:1px solid var(--line);border-radius:6px}
#subskrypcja.sub .sub-sprzedawca h2{font-size:21px}
#subskrypcja.sub .sub-sprzedawca p{font-size:15px}

/* ------------------------------------------------------------------ mniejsze ekrany */

@media (max-width:760px){
	#centerblock #subskrypcja.sub ul.sub-ceny{grid-template-columns:repeat(2,1fr)}
	#centerblock #subskrypcja.sub ul.sub-korzysci-lista,#centerblock #subskrypcja.sub ul.sub-obszary{grid-template-columns:1fr}
}
@media (max-width:600px){
	#subskrypcja.sub{padding:6px 16px 24px}
	#subskrypcja.sub h1{font-size:28px}
	#subskrypcja.sub .sub-lead{font-size:17px}
	#subskrypcja.sub h2{font-size:22px}
	#subskrypcja.sub .sub-hero{padding-top:8px}
	#subskrypcja.sub a.sub-btn{width:100%}
	#subskrypcja.sub .sub-przelacznik label{flex:1 1 100%}
	#subskrypcja.sub .sub-przelacznik span{width:100%;justify-content:center;text-align:center}
}
@media (max-width:480px){
	#centerblock #subskrypcja.sub ul.sub-ceny{grid-template-columns:1fr}
}
@media print{
	#subskrypcja.sub .sub-cta,#subskrypcja.sub .sub-przelacznik{display:none}
	#subskrypcja.sub.sub-js .sub-wariant[data-ukryty-js]{display:block}
}