/* =========================================================================
   zk-ui.css — WSPÓLNA WARSTWA KOMPONENTÓW (jedno źródło prawdy)
   -------------------------------------------------------------------------
   Prefiks `.zk-ui-`. Ładowana globalnie (inc/ui/loader.php). Wartości
   przeniesione 1:1 z gotowego landingu lokalnego — to jest kanon dla
   przycisków, etykiet sekcji (eyebrow), nagłówków sekcji i paska zaufania
   (USP). Nowe strony UŻYWAJĄ tych klas — nie odtwarzają ich pod własnym
   prefiksem. Katalog i zasady: wytyczne-design-system.md, sekcja „Warstwa
   wspólna". Tokeny --zk-* z site-header.css.
   ========================================================================= */

/* ------------------------------------------------------- Font serwisu
   Geist (SIL OFL 1.1, self-hosted w motywie — assets/fonts/geist/, licencja
   obok pliku). Font ZMIENNY: jeden plik woff2 pokrywa wagi 100–900.
   Decyzja Wojtka 2026-07-24: Geist zastępuje Intera w nowym stacku
   (charakter San Francisco/Helvetica). JEDNO źródło kroju: token --zk-font —
   podmiana fontu = edycja @font-face + tej jednej zmiennej.
   Stare strony Elementora renderują Intera (kit) do czasu metamorfoz;
   ścieżka zamówienia (produkt/koszyk/checkout) też zostaje na razie bez zmian. */
@font-face {
	font-family: "Geist";
	src: url("fonts/geist/Geist-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
/* ------------------------------------------------------- Tokeny designu
   KANON dla całego serwisu (Etap 2a, 2026-07-24) — przeniesione z site-header.css
   (redefinicja w .zk-footer usunięta). zk-ui.css ładuje się globalnie prio 5,
   więc tokeny są dostępne wszędzie ZANIM wczytają się style komponentów.
   Zgodne z wytyczne-design-system.md §13. */
:root {
	/* Font */
	--zk-font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Kolory */
	--zk-green: #84BF2A;        /* akcenty graficzne (nie tekst) */
	--zk-green-dark: #487214;   /* zieleń do tekstu/ikon (AA ≥4,5:1) */
	--zk-red: #c0392b;          /* akcja / CTA (biały tekst 5,44:1) */
	--zk-red-dark: #a93226;     /* hover CTA */
	--zk-navy: #212f45;         /* ciemne paski (USP, B2B, stopka) */
	--zk-ink: #23291c;          /* tekst główny */
	--zk-graphite: #4c5346;     /* obramowanie przycisku telefonu */
	--zk-muted: #5b6152;        /* tekst drugorzędny / etykiety */
	--zk-line: #e6e8e1;         /* obramowania / separatory */
	--zk-bg: #ffffff;           /* tło podstawowe */
	--zk-bg-soft: #f2f4ec;      /* podświetlenia / kafelki */
	--zk-bg-green: #e8f2d6;     /* karta konwersji (CTA); obwódka #d7e6bf */
	--zk-bg-green-soft: #eef5e2;/* wyróżnienie treści; obwódka #dcecc4 */
	--zk-gold: #ffc53d;         /* gwiazdki oceny */

	/* Promienie — 3 tokeny wg roli */
	--zk-r-pill: 999px;
	--zk-r-control: 8px;
	--zk-r-card: 12px;

	/* Pozostałe */
	--zk-shadow: 0 18px 40px -12px rgba(20, 32, 4, .26);
	--zk-max: 1240px;
	--zk-header-h: 74px;
}
/* Body: działa wszędzie tam, gdzie kit Elementora nie nadpisuje; po wyłączeniu
   Elementora stanie się jedynym źródłem. Kontenery stron deklarują var() same
   (wygrywają z regułą body kitu na starych stronach). */
body { font-family: var(--zk-font); }

/* ------------------------------------------------------------ Przyciski */
/* Pigułka = przycisk. Primary = akcja (czerwień). Secondary = poboczna.
   PODWÓJNA KLASA (specyficzność 0,2,0) — konieczna, bo motyw/wtyczki stylują
   `button[type=submit]` itp. na (0,1,1) i wygrywały z pojedynczą klasą
   (bug 24.07: biały przycisk w modalu callbacku). Nadpisania stron muszą mieć
   ≥(0,2,0) i ładować się później (kontekstowe reguły to spełniają). */
.zk-ui-btn.zk-ui-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: .85rem 1.65rem;
	border-radius: var(--zk-r-pill, 999px);
	font-weight: 800; font-size: 1rem; line-height: 1.15;
	text-decoration: none; cursor: pointer;
	border: 1.5px solid transparent;
	transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
}
.zk-ui-btn.zk-ui-btn--sm { padding: .55rem 1.1rem; font-size: .92rem; font-weight: 700; }
.zk-ui-btn.zk-ui-btn--primary {
	background: var(--zk-red, #c0392b); color: #fff;
	box-shadow: 0 8px 18px -8px rgba(192, 57, 43, .55);
}
.zk-ui-btn.zk-ui-btn--primary:hover { background: var(--zk-red-dark, #a93226); color: #fff; }
.zk-ui-btn.zk-ui-btn--primary:active { transform: translateY(1px); }
.zk-ui-btn.zk-ui-btn--secondary {
	background: #fff; color: var(--zk-ink, #23291c);
	border-color: var(--zk-graphite, #4c5346);
}
.zk-ui-btn.zk-ui-btn--secondary:hover { background: var(--zk-bg-soft, #f2f4ec); }
.zk-ui-btn-ico { display: inline-flex; }
.zk-ui-btn-ico svg { width: 1.15rem; height: 1.15rem; }
.zk-ui-btn-arrow { font-weight: 800; }
/* Wariant na ciemnym tle (navy/foto) — outline biały. */
.zk-ui-btn.zk-ui-btn--ondark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.zk-ui-btn.zk-ui-btn--ondark:hover { background: rgba(255, 255, 255, .1); color: #fff; }
/* Wariant „narzędzie" (design system §4b): wypełniony --zk-green-dark, biały
   tekst (5,7:1). Czerwień = TYLKO CTA konwersji; akcje narzędzi (kalkulator
   BDO itp.) = zieleń. Dodany 26.07 (pierwsze użycie: sekcja kalkulatora B2B). */
.zk-ui-btn.zk-ui-btn--green { background: var(--zk-green-dark, #487214); color: #fff; }
.zk-ui-btn.zk-ui-btn--green:hover { background: #3a5c10; color: #fff; }
.zk-ui-btn.zk-ui-btn--green:active { transform: translateY(1px); }
/* Telefon (--call) — KANON (korekta Wojtka 24.07 v2): biała pigułka z obwódką
   --zk-line, treść wyśrodkowana, ZIELONA SŁUCHAWKA BEZ kółka (sama ikona
   w kolorze --zk-green-dark). Ikona w wrapperze <span class="zk-ui-btn-ico">.
   Definiowany PO secondary — na markup `--secondary --call` wygrywa call. */
.zk-ui-btn.zk-ui-btn--call {
	background: #fff; color: var(--zk-ink, #23291c);
	border-color: var(--zk-line, #e6e8e1);
	gap: 9px;
	padding: .55rem 1.3rem;
}
.zk-ui-btn.zk-ui-btn--call:hover { background: var(--zk-bg-soft, #f2f4ec); }
.zk-ui-btn--call .zk-ui-btn-ico { color: var(--zk-green-dark, #487214); flex: 0 0 auto; }
.zk-ui-btn--call .zk-ui-btn-ico svg { width: 1.15rem; height: 1.15rem; }
/* Na ZIELONYCH kartach CTA (tło --zk-bg-green) obwódka musi być ciemniejsza
   od tła karty (design system §4c): #bcd39a, hover #a9c47f. Dotyczy kart
   sidebarów: blog (reużywany przez gdzie-wyrzucić i kody), kalkulator, FAQ. */
.zk-blog__cta-card .zk-ui-btn.zk-ui-btn--call,
.zk-kb__cta-card .zk-ui-btn.zk-ui-btn--call,
.zk-fq__cta-card .zk-ui-btn.zk-ui-btn--call { border-color: #bcd39a; }
.zk-blog__cta-card .zk-ui-btn.zk-ui-btn--call:hover,
.zk-kb__cta-card .zk-ui-btn.zk-ui-btn--call:hover,
.zk-fq__cta-card .zk-ui-btn.zk-ui-btn--call:hover { background: #fafcf5; border-color: #a9c47f; }
/* Motyw (custom.css) koloruje linki wewnętrzne — wymuszamy kolor tekstu
   przycisków, inaczej CTA-link wychodzi ciemny (patrz design-system §4). */
.zk-ui-btn.zk-ui-btn--primary, .zk-ui-btn.zk-ui-btn--primary:visited, .zk-ui-btn.zk-ui-btn--primary:hover { color: #fff !important; }
.zk-ui-btn.zk-ui-btn--ondark, .zk-ui-btn.zk-ui-btn--ondark:visited, .zk-ui-btn.zk-ui-btn--ondark:hover { color: #fff !important; }
.zk-ui-btn.zk-ui-btn--secondary, .zk-ui-btn.zk-ui-btn--secondary:visited { color: var(--zk-ink, #23291c) !important; }
.zk-ui-btn.zk-ui-btn--call, .zk-ui-btn.zk-ui-btn--call:visited { color: var(--zk-ink, #23291c) !important; }
.zk-ui-btn.zk-ui-btn--green, .zk-ui-btn.zk-ui-btn--green:visited, .zk-ui-btn.zk-ui-btn--green:hover { color: #fff !important; }

/* ------------------------------------------------------------ Breadcrumb */
/* Wspólny (wzorzec: blog): font .86rem, gap 8px, linki muted, bieżąca zielona.
   Kolory wymuszone `!important`, bo kontenery stron mają regułę
   `.zk-XX a { color: zielony }` (kalkulator, oferta, landing, FAQ, jak-to-działa,
   współpraca, zamów-online) o tej samej specyficzności co `.zk-ui-breadcrumb a`
   — bez !important pierwszy okruszek („Strona główna") robił się zielony. */
.zk-ui-breadcrumb {
	font-size: .86rem; color: var(--zk-muted, #5b6152);
	margin-bottom: 22px;
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.zk-ui-breadcrumb a { color: var(--zk-muted, #5b6152) !important; text-decoration: none; }
.zk-ui-breadcrumb a:hover { color: var(--zk-green-dark, #487214) !important; text-decoration: underline; }
.zk-ui-breadcrumb__sep { color: var(--zk-muted, #5b6152); }
/* Bieżący okruszek zielony 600 — także gdy jest linkiem (kategoria na blogu).
   !important + wyższa specyficzność bije i reset linku, i `.zk-XX a`. */
.zk-ui-breadcrumb .zk-ui-breadcrumb__current { color: var(--zk-green-dark, #487214) !important; font-weight: 600; text-decoration: none; }
.zk-ui-breadcrumb a.zk-ui-breadcrumb__current:hover { color: var(--zk-green-dark, #487214) !important; text-decoration: underline; }

/* ------------------------------------------------ Etykieta sekcji (eyebrow) */
/* Prosta etykieta UPPERCASE nad H2 — NIE chip, NIE zielone tło. */
.zk-ui-eyebrow {
	display: block;
	font-size: .75rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--zk-muted, #5b6152);
	margin-bottom: .5rem;
}
.zk-ui-eyebrow--onDark { color: rgba(255, 255, 255, .75); }

/* ------------------------------------------------------- Nagłówek sekcji */
.zk-ui-section-head { margin: 0 0 clamp(1.5rem, 4vw, 2.2rem); }
.zk-ui-section-head--row {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 1rem; flex-wrap: wrap;
}
.zk-ui-h2 {
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	line-height: 1.15; font-weight: 800; letter-spacing: -.01em;
	margin: 0 0 .5rem; color: var(--zk-ink, #23291c);
}
/* !important: kontenery stron mają generyczne reguły `.zk-XX h2 { color: ink }`
   (0,1,1) bijące `.zk-ui-h2--light` (0,1,0) — na navy nagłówek robił się ciemny
   (bug z landingu, 2026-07-24). Ten sam wzorzec co breadcrumb (22.07). */
.zk-ui-h2--light { color: #fff !important; }
/* Akcent marki pod każdym H2 sekcji — krótka gruba zielona kreska (kanon landingu). */
.zk-ui-h2::after {
	content: ""; display: block;
	width: 34px; height: 4px; margin-top: .7rem;
	border-radius: 2px; background: var(--zk-green, #84bf2a);
}
.zk-ui-section-desc { color: var(--zk-muted, #5b6152); font-size: 1.02rem; margin: 0; max-width: 70ch; }

/* --------------------------------------------------- Pasek zaufania (USP) */
/* Ciemna kotwica navy, pełna szerokość. Układ ikona → hasło → podpis, bez
   pionowych kresek (kanon z landingu, iteracja 3.1). Końcowy „+" akcentowany. */
.zk-ui-trust {
	background: var(--zk-navy, #212f45);
	box-shadow: 0 0 0 100vw var(--zk-navy, #212f45);
	clip-path: inset(0 -100vw);
	color: #fff;
	padding-block: clamp(1.75rem, 4vw, 2.6rem);
}
.zk-ui-trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: start; text-align: center;
}
.zk-ui-trust-item { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.zk-ui-trust-ico { color: var(--zk-green, #84bf2a); }
.zk-ui-trust-ico svg { width: 2.1rem; height: 2.1rem; }
.zk-ui-trust-head {
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	font-weight: 800; line-height: 1.15; color: #fff;
}
.zk-ui-trust-head .zk-ui-trust-plus { color: var(--zk-green, #84bf2a); }
.zk-ui-trust-label { font-size: .88rem; color: rgba(255, 255, 255, .78); line-height: 1.3; }
@media (max-width: 720px) { .zk-ui-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) {
	.zk-ui-trust-grid { grid-template-columns: 1fr; }
	.zk-ui-trust-item + .zk-ui-trust-item { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* ------------------------------------------------------- Pas B2B (navy) */
/* Wspólny komponent — render przez zk_b2b_render(). Wygląd 1:1 z landingiem
   (lewo: nagłówek + punkty z checkami; prawo: panel CTA outline-ondark). */
.zk-ui-b2b {
	background: var(--zk-navy, #212f45);
	box-shadow: 0 0 0 100vw var(--zk-navy, #212f45);
	clip-path: inset(0 -100vw);
	color: #fff;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.zk-ui-b2b-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.zk-ui-b2b-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.zk-ui-b2b-points li { display: flex; gap: .65rem; align-items: flex-start; color: rgba(255, 255, 255, .9); }
.zk-ui-b2b-check { flex: 0 0 auto; color: var(--zk-green, #84bf2a); width: 1.4rem; height: 1.4rem; display: inline-flex; margin-top: .1rem; }
.zk-ui-b2b-check svg { width: 100%; height: 100%; }
.zk-ui-b2b-aside {
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--zk-r-card, 12px); padding: clamp(1.4rem, 3vw, 1.9rem);
	display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
.zk-ui-b2b-aside-lead { margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.02rem; line-height: 1.5; }
.zk-ui-b2b-aside .zk-ui-btn--ondark { width: 100%; justify-content: center; }
.zk-ui-b2b-phone { color: rgba(255, 255, 255, .8); font-size: .95rem; }
/* Biały wymuszony: pas B2B jest granatowy, a kontenery stron (np. `.zk-hm
   a:not(.zk-ui-btn)` 0,2,1) barwią linki na zielono i wygrywały specyficznością. */
.zk-ui-b2b-phone a { color: #fff !important; }
@media (max-width: 820px) { .zk-ui-b2b-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------- Globalny guard overflow
   Przeniesione z custom.css (2026-07-24, Etap 0) — custom.css nie jest już
   ładowany globalnie, a serwis polega na tym guardzie przeciw poziomemu
   przewijaniu. `clip` nie tworzy kontekstu przewijania (sticky działa);
   `hidden` zostaje jako fallback dla starszych przeglądarek. */
html {
    overflow-x: hidden !important;
    overflow-x: clip !important;
    max-width: 100vw !important;
}
body {
    overflow-x: hidden !important;
    overflow-x: clip !important;
    max-width: 100vw !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------- Opinie
   Wspólna sekcja opinii (Trustindex) — Etap 1b. Pas tła per strona przez
   dodatkową klasę przekazaną w zk_ui_reviews_render(['class'=>…]). */
.zk-ui-reviews { margin-block: clamp(2.5rem, 5vw, 4rem); }
.zk-ui-reviews-widget { max-width: 1100px; margin-inline: auto; }

/* ---------------------------------------------------------- „Zobacz też"
   Chipy linkowania wyjściowego (Etap 1b) — wartości 1:1 z kalkulatora
   (wzorzec zgodny z design systemem: tytuł jako <p>, nie h3). */
.zk-ui-see-also { margin-bottom: 1.5rem; }
.zk-ui-see-also__title {
	font-size: .78rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--zk-muted, #5b6152);
	margin: 0 0 .8rem;
}
.zk-ui-see-also__chips {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: .5rem;
}
.zk-ui-see-also__chip {
	display: inline-flex; align-items: center;
	background: var(--zk-bg-soft, #f2f4ec);
	border: 1px solid var(--zk-line, #e6e8e1);
	color: var(--zk-green-dark, #487214);
	padding: .4rem .85rem;
	border-radius: var(--zk-r-control, 8px);
	font-size: .9rem; font-weight: 600; line-height: 1.2;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.zk-ui-see-also__chip:hover,
.zk-ui-see-also__chip:focus-visible {
	border-color: var(--zk-green, #84bf2a);
	background: var(--zk-bg-green-soft, #eef5e2);
}
@media (prefers-reduced-motion: reduce) {
	.zk-ui-see-also__chip { transition: none; }
}

/* ------------------------------------------------------- FAQ / akordeon
   Wspólny akordeon (Etap 2a) — wartości 1:1 z landingu. Sekcja przyjmuje
   dodatkowo klasy strony (pas tła, spacing, kotwice) przez args['class']. */
.zk-ui-faq__list { display: grid; gap: .6rem; }
.zk-ui-faq__item {
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	background: var(--zk-bg, #fff);
	overflow: hidden;
}
.zk-ui-faq__item summary {
	cursor: pointer;
	padding: 1rem 1.2rem;
	font-weight: 700; color: var(--zk-ink, #23291c);
	list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.zk-ui-faq__item summary::-webkit-details-marker { display: none; }
.zk-ui-faq__item summary::after {
	content: "+"; font-size: 1.4rem; line-height: 1; font-weight: 700;
	color: var(--zk-green-dark, #487214);
}
.zk-ui-faq__item[open] summary::after { content: "\2013"; }
.zk-ui-faq__answer { padding: 0 1.2rem 1.2rem; color: var(--zk-ink, #23291c); }
.zk-ui-faq__all { margin: 1.85rem 0 0; }
/* !important: kontenery stron kolorują linki regułami o tej samej/wyższej
   specyficzności (wzorzec jak breadcrumb). */
.zk-ui-faq__all a { font-weight: 700; color: var(--zk-green-dark, #487214) !important; text-decoration: none; }
.zk-ui-faq__all a:hover { text-decoration: underline; }