/* =========================================================================
   Zamów online — zamow-kontener.pl (strona funnelowa)
   Zgodne z „Wytyczne designu". Tokeny --zk-* pochodzą z :root (custom.css,
   globalnie na każdej stronie); tu je KONSUMUJEMY przez var() z fallbackami.
   Prefiks klas .zk-zo__. Wzorzec wizualny: wspolpraca.css / oferta.css.

   Zasady kluczowe:
   - #84BF2A (--zk-green) = tylko akcent graficzny; NIGDY tło pod biały tekst
     ani kolor tekstu. Zieleń tekstowa/ikony = --zk-green-dark (#487214).
   - Kolor akcji = --zk-red. Pigułka (--zk-r-pill) = WYŁĄCZNIE przyciski.
   - Chipy/kontrolki = --zk-r-control (8px). Karty = --zk-r-card (12px).
   - Kontrast ≥ 4,5:1. Focus-visible = outline 2px --zk-green-dark.
   - Pasek kroków (.zamowienie-steps) stylowany GLOBALNIE w custom.css —
     tu tylko odstępy wrappera.
   ========================================================================= */

.zk-zo {
	font-family: var(--zk-font, sans-serif); /* kanon: zk-ui.css (Geist) */
	color: var(--zk-ink, #23291c);
	font-size: 1.02rem;
	line-height: 1.6;
}
.zk-zo, .zk-zo *, .zk-zo *::before, .zk-zo *::after { box-sizing: border-box; }

.zk-zo > section {
	max-width: var(--zk-max, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 20px);
	padding-block: clamp(2rem, 4.5vw, 3.5rem);
	border-bottom: 1px solid var(--zk-line, #e6e8e1);
}
.zk-zo > section:last-of-type { border-bottom: 0; }
/* Nie dublujemy linii wokół pasów, które same się odcinają tłem: zielony pas
   „W każdej cenie" i zielona sekcja „Jak to działa" nie potrzebują separatora. */
.zk-zo > section.zk-zo__cities,
.zk-zo > section.zk-zo__incl-section { border-bottom: 0; }
/* Mniejszy odstęp między listą miast a pasem „W każdej cenie" (był za duży). */
.zk-zo > section.zk-zo__cities { padding-bottom: clamp(1rem, 2vw, 1.4rem); }

.zk-zo h2 {
	font-size: clamp(1.35rem, 2.8vw, 1.85rem);
	line-height: 1.2;
	font-weight: 800;
	margin: 0 0 1.35rem;
	color: var(--zk-ink, #23291c);
}
.zk-zo p { margin: 0 0 1rem; }
.zk-zo p:last-child { margin-bottom: 0; }
.zk-zo a { color: var(--zk-green-dark, #487214); }

/* Zielona kreska pod H2 sekcji (akcent marki) */
.zk-zo > section > h2::after {
	content: ""; display: block;
	width: 34px; height: 4px; margin-top: .7rem;
	border-radius: 2px;
	background: var(--zk-green, #84bf2a);
}

.zk-zo__eyebrow {
	display: block;
	font-size: .75rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .07em;
	color: var(--zk-muted, #5b6152);
	margin: 0 0 1rem;
}

.zk-zo a:focus-visible,
.zk-zo button:focus-visible,
.zk-zo summary:focus-visible,
.zk-zo [tabindex]:focus-visible {
	outline: 2px solid var(--zk-green-dark, #487214);
	outline-offset: 2px;
}

/* Pełnoszerokościowy pas tła (trik box-shadow — bez poziomego scrolla) */
.zk-zo > section.zk-zo__band--soft {
	background: var(--zk-bg-soft, #f2f4ec);
	box-shadow: 0 0 0 100vw var(--zk-bg-soft, #f2f4ec);
	clip-path: inset(0 -100vw);
	border-bottom: 0;
}
.zk-zo > section.zk-zo__band--soft + section { border-top: 0; }

/* Notice (tylko edytorzy) */
.zk-zo__notice {
	background: var(--zk-bg-soft, #f2f4ec);
	border: 1px dashed var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-control, 8px);
	padding: .8rem 1rem;
	font-size: .92rem;
	color: var(--zk-muted, #5b6152);
}
.zk-zo__notice--warn { border-color: var(--zk-red, #c0392b); }

/* ------------------------------------------------------------------ Buttons */
.zk-ui-btn svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.zk-zo .zk-ui-btn--secondary,
.zk-zo .zk-ui-btn--secondary:hover,
.zk-zo .zk-ui-btn--secondary:visited { color: var(--zk-ink, #23291c); text-decoration: none; }


/* --------------------------------------------------------- 01 Pasek kroków */
/* Pasek sam w sobie stylowany globalnie (custom.css). Tu tylko oddech. */
.zk-zo__steps-wrap {
	max-width: var(--zk-max, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 20px);
	padding-top: clamp(1rem, 2.5vw, 1.75rem);
}

/* ----------------------------------------------------------------- 02 Hero */
.zk-zo__hero { text-align: center; }

.zk-zo__rating {
	display: inline-flex; align-items: center; gap: .5rem;
	margin-bottom: 1rem; font-size: .92rem;
}
.zk-zo__stars { position: relative; display: inline-block; font-size: 1.05rem; line-height: 1; }
.zk-zo__stars-bg { color: #d9dccf; }
.zk-zo__stars-fill {
	position: absolute; inset: 0;
	overflow: hidden; white-space: nowrap;
	color: var(--zk-gold, #ffc53d);
}
.zk-zo__rating strong { color: var(--zk-ink, #23291c); }
.zk-zo__rating-label { color: var(--zk-muted, #5b6152); }

.zk-zo__h1 {
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	line-height: 1.15;
	font-weight: 800;
	color: var(--zk-ink, #23291c);
	margin: 0 0 .8rem;
}
/* .zk-zo prefix podnosi specyficzność ponad reset „.zk-zo p" (0,1,1),
   inaczej margin:auto nie działa i lead ucieka do lewej. */
.zk-zo .zk-zo__lead {
	max-width: 640px;
	margin: 0 auto 1.75rem;
	text-align: center;
	color: var(--zk-muted, #5b6152);
	font-size: 1.06rem;
}

/* Karta wyszukiwarki — jedyny dominujący punkt akcji na widoku */
.zk-zo__search-card {
	max-width: 720px;
	margin: 0 auto;
	background: var(--zk-bg-green, #e8f2d6);
	border: 1px solid #d7e6bf;
	border-radius: var(--zk-r-card, 12px);
	padding: clamp(1.25rem, 3vw, 2rem);
	scroll-margin-top: 120px; /* kotwica #zk-zo-search pod sticky nagłówkiem */
}
.zk-zo__search-label {
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--zk-ink, #23291c);
	margin: 0 0 .8rem;
}
.zk-zo__search-widget { max-width: 560px; margin: 0 auto; }

/* Pole „Wpisz miasto lub gminę" = autouzupełnianie z wyborem miasta z
   podpowiedzi (NIE wyszukiwarka z przejściem do listingu wyników). Dlatego
   chowamy lupy FiboSearch: submit po prawej prowadziłby donikąd i był mylący,
   a lupa dekoracyjna „skakała" empty→typed i nachodziła na placeholder.
   Zostaje czyste pole na pełną szerokość + „×" do czyszczenia wpisu. */
.zk-zo__search-widget .dgwt-wcas-search-wrapp,
.zk-zo__search-widget .dgwt-wcas-search-form,
.zk-zo__search-widget .dgwt-wcas-sf-wrapp { width: 100% !important; max-width: none !important; }
.zk-zo__search-widget .dgwt-wcas-sf-wrapp { position: relative; }
.zk-zo__search-widget .dgwt-wcas-search-submit,
.zk-zo__search-widget .dgwt-wcas-ico-magnifier { display: none !important; }
.zk-zo__search-widget .dgwt-wcas-search-input {
	width: 100% !important;
	box-sizing: border-box;
	padding-left: 1.1rem !important;
	padding-right: 2.6rem !important;
}
/* Przycisk „×" (czyszczenie) przypięty do prawej krawędzi pola (po ukryciu
   submitu FiboSearch domyślnie „wisiał" w połowie). */
.zk-zo__search-widget .dgwt-wcas-close {
	right: .8rem !important;
	left: auto !important;
}

.zk-zo__hero-alt {
	display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;
	gap: .75rem;
	margin-top: 1.5rem;
}
.zk-zo__hero-alt-label { color: var(--zk-muted, #5b6152); font-weight: 600; }
.zk-zo__hero-hours {
	margin-top: .7rem;
	font-size: .9rem;
	color: var(--zk-muted, #5b6152);
}

/* --------------------------------------------------------------- 03 Miasta */
.zk-zo__cities-list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .7rem;
}
.zk-zo__city-chip {
	display: flex; align-items: center; gap: .55rem;
	background: var(--zk-bg, #fff);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-control, 8px);
	padding: .7rem .9rem;
	font-weight: 600; font-size: .95rem;
	color: var(--zk-ink, #23291c);
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.zk-zo .zk-zo__city-chip,
.zk-zo .zk-zo__city-chip:visited { color: var(--zk-ink, #23291c); }
.zk-zo__city-chip:hover {
	border-color: var(--zk-green-dark, #487214);
	box-shadow: 0 12px 30px -14px rgba(20, 32, 4, .28);
	transform: translateY(-2px);
	text-decoration: none;
}
.zk-zo__city-ico {
	flex: 0 0 auto;
	display: inline-flex;
	width: 1.2rem; height: 1.2rem;
	color: var(--zk-green-dark, #487214);
}
.zk-zo__city-ico svg { width: 100%; height: 100%; }

/* --------------------------------------------------------- 04 Reasekuracja */
/* Wzorzec: .zk-of__incl-bar (oferta, moduł cennika) */
.zk-zo__incl-section { padding-block: clamp(1.25rem, 2.5vw, 1.75rem); }
.zk-zo__incl-bar {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: .6rem 1.5rem;
	background: var(--zk-bg-green-soft, #eef5e2);
	border: 1px solid #dcecc4;
	border-radius: var(--zk-r-card, 12px);
	padding: .9rem 1.25rem;
}
/* .zk-zo prefix — bije reset „.zk-zo p" (0,1,1), inaczej etykieta dostaje
   margin-bottom i „ucieka" w górę względem ikon (align-items:center). */
.zk-zo .zk-zo__incl-label { font-weight: 800; color: var(--zk-ink, #23291c); margin: 0; line-height: 1.3; }
.zk-zo__incl {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;
	gap: .6rem 1.5rem;
}
.zk-zo__incl li {
	display: flex; align-items: center; gap: .5rem;
	color: var(--zk-ink, #23291c);
	font-weight: 600; font-size: .95rem;
}
.zk-zo__incl-ico {
	flex: 0 0 auto;
	color: var(--zk-green-dark, #487214);
	display: inline-flex;
	width: 1.4rem; height: 1.4rem;
}
.zk-zo__incl-ico svg { width: 100%; height: 100%; }

/* -------------------------------------------------------------- 06 Mini-FAQ */
/* .zk-zo prefix — bije reset „.zk-zo p" (0,1,1); większy odstęp odsuwa link
   od ostatniego akordeonu (był zbyt blisko). */

/* ------------------------------------------------------------- Breakpoints */
@media (max-width: 1200px) {
	.zk-zo__cities-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.zk-zo__incl { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	.zk-zo__incl-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
	.zk-zo__cities-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.zk-zo__cities-list,
	.zk-zo__incl { grid-template-columns: 1fr; }
	.zk-zo__hero-alt { flex-direction: column; gap: .5rem; }
}

/* ------------------------------------------------------------------ Motion */
@media (prefers-reduced-motion: reduce) {
	.zk-zo *,
	.zk-zo *::before,
	.zk-zo *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.zk-zo__city-chip:hover { transform: none; }
}