/* Zmienne wspólne dla obu komponentów. Ładowane raz, jako zależność. */

.ks-widget {
	--ks-granat: #0B1B33;
	--ks-granat-jasny: #14294A;
	--ks-czerwony: #D6142B;
	--ks-czerwony-ciemny: #B90F23;
	--ks-bursztyn: #E4A014;
	--ks-bursztyn-tekst: #8A6A17;
	--ks-krem: #FBF6EA;
	--ks-szary: #ECEBE6;
	--ks-biel: #fff;
	--ks-tekst: #0B1B33;
	--ks-tekst-2: #3C4A62;
	--ks-tekst-3: #5A6779;
	--ks-linia: rgba(11, 27, 51, 0.14);
	--ks-linia-mocna: rgba(11, 27, 51, 0.22);

	--ks-odstep-1: 6px;
	--ks-odstep-2: 10px;
	--ks-odstep-3: 14px;
	--ks-odstep-4: 20px;
	--ks-odstep-5: 28px;
	--ks-odstep-6: 40px;

	--ks-promien-1: 8px;
	--ks-promien-2: 12px;
	--ks-promien-3: 18px;
	--ks-promien-4: 24px;

	--ks-kontrolka-w: 140px;
	--ks-kontrolka-h: 44px;

	container-type: inline-size;
	color: var(--ks-tekst);
	font-family: inherit;
	line-height: 1.5;
}

.ks-widget *,
.ks-widget *::before,
.ks-widget *::after {
	box-sizing: border-box;
}

.ks-widget button:focus-visible,
.ks-widget input:focus-visible {
	outline: 2px solid var(--ks-granat);
	outline-offset: 2px;
}

.ks-widget .ks-liczba {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.ks-widget .ks-etykieta-grupy {
	display: flex;
	align-items: center;
	gap: var(--ks-odstep-3);
}

.ks-widget .ks-etykieta-grupy > span:first-child {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ks-bursztyn-tekst);
	white-space: nowrap;
}

.ks-widget .ks-etykieta-grupy > span:last-child {
	flex: 1;
	height: 1px;
	background: rgba(228, 160, 20, 0.45);
}

.ks-widget .ks-brak-danych {
	background: var(--ks-krem);
	border: 1px solid rgba(228, 160, 20, 0.45);
	border-radius: var(--ks-promien-2);
	padding: var(--ks-odstep-4);
	font-size: 15px;
	color: var(--ks-tekst-2);
}

.ks-widget .ks-brak-danych a {
	color: var(--ks-granat);
	font-weight: 700;
}

/* Miniatury formatów: proporcje liczone w PHP, wspólna skala. */
.ks-widget .ks-miniatura {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 62px;
}

.ks-widget .ks-miniatura span {
	display: block;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.5;
}

.ks-widget .ks-miniatura--aktywna span {
	opacity: 1;
}

.ks-widget .ks-miniatura--spirala {
	align-items: flex-end;
}

.ks-widget .ks-miniatura--spirala i {
	display: block;
	height: 3px;
	margin-bottom: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.55;
}

/* ============================================================
   SEKCJA — cała sekcja z jednego shortcode'a.
   Wspólne dla konfiguratora i cennika, dlatego mieszkają w tokenach,
   a nie w CSS jednego komponentu. Tło, promień, etykieta i tytuł żyją
   TUTAJ, nie w Elementorze — sekcja nie zależy od ustawień kontenera.
   ============================================================ */

.ks-sekcja {
	border-radius: var(--ks-promien-4);
	padding: clamp(22px, 5cqi, 56px);
}

.ks-sekcja--krem {
	background: var(--ks-krem);
}

.ks-sekcja--biel {
	background: var(--ks-biel);
}

.ks-sekcja--granat {
	background: var(--ks-granat);
	color: var(--ks-biel);
}

.ks-sekcja--brak {
	background: none;
	padding-inline: 0;
}

/* Na telefonie sekcja oddaje szerokość widżetowi. cqi liczy się względem
   samej sekcji, więc dolna granica clamp() nigdy by tu nie zadziałała —
   dlatego wartość wprost, w media query. */
@media (max-width: 767px) {

	.ks-sekcja {
		padding: 16px;
	}

	/* ------------------------------------------------------------------
	   WYŁĄCZENIE KONTENERÓW ZAPYTAŃ NA MOBILE

	   Diagnostyka wykazała, że opakowanie widżetu Elementora liczy sobie
	   na telefonie wysokość ok. 1,9× większą niż jego treść. Wykluczone
	   pomiarem: height, min-height, padding, marginesy, pseudo-elementy,
	   transform, zoom, contain, content-visibility, rozciąganie flexem
	   i wszystkie reguły CSS trafiające w ten element. Bisekcja pokazała,
	   że nadmiar nie siedzi w jednym elemencie, tylko jest rozmazany po
	   całym poddrzewie — a przy prostej treści (zwykły div) układ liczy
	   się poprawnie.

	   Jedyną nietypową właściwością, jaka została w poddrzewie, są DWA
	   ZAGNIEŻDŻONE kontenery zapytań (.ks-sekcja i .ks-konf) wewnątrz
	   flexowego opakowania Elementora. To znany zapalnik błędów układu
	   w starszych WebKitach (iOS Safari 16.x), a pomiar pochodzi
	   z iPhone'a (szerokość 390px).

	   Na mobile kontenery i tak nie są do niczego potrzebne: wszystkie
	   @container mają progi 420/720/900px, a kontener ma tu ~320px —
	   więc żaden i tak nie jest spełniony. Jednostki cqi bez kontenera
	   liczą się względem okna; wartości wychodzą w tych samych
	   przedziałach clamp() (sprawdzone), poza .ks-konf__nadwyzka,
	   którą pinujemy niżej.
	   ------------------------------------------------------------------ */
	.ks-widget {
		container-type: normal;
	}

	/* ------------------------------------------------------------------
	   SEGMENTED CONTROL — komponent wspólny

	   Ten sam przełącznik typu/formatu stoi w sekcji 02 (konfigurator)
	   i w sekcji 08 (cennik). Mieszka TUTAJ, bo ks-tokens.css jest
	   zależnością obu arkuszy — trzymanie go w jednym z komponentów
	   znaczyłoby, że druga sekcja albo go nie dostanie, albo musi mieć
	   własną kopię.

	   SPECYFICZNOŚĆ (0,3,0) jest konieczna. Tokens ładują się PRZED
	   arkuszami komponentów, więc przy remisie wygrywa komponent —
	   a jego reguły desktopowe (`.ks-widget .ks-konf__tab`,
	   `.ks-widget .ks-cennik__typ`) to (0,2,0) i przebiłyby nam
	   wygląd segmentu na telefonie.

	   Komponent istnieje WYŁĄCZNIE poniżej 768px — powyżej obie sekcje
	   mają własne, nietknięte układy.
	   ------------------------------------------------------------------ */
	.ks-widget .ks-segment {
		display: grid;
		/* auto-flow zamiast repeat(3): liczba produktów jest danymi,
		   nie stałą. Segmenty i tak wychodzą równe. */
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 0;
		height: 44px;
		padding: 4px;
		border-radius: 999px;
		background: #EFEFF1;
	}

	.ks-widget .ks-segment .ks-segment__opcja {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 2px;
		border: 0;
		border-radius: 999px;
		background: none;
		font: inherit;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.1;
		/* Najdłuższe hasło ("Jednodzielny") przy trzech kolumnach musi
		   zostać w jednej linii — stąd nowrap. Ściśnięcia liter już nie ma:
		   było kompensacją dla dawnego "Jednoplanszowy", które przy 320px
		   kontenera rozpychało segment poza ekran. "Plakatowy" jest krótszy,
		   więc przy letter-spacing: normal najciaśniejsza kolumna ma ~16px
		   zapasu (zmierzone w Manrope 13px/700, kontener 320px). */
		white-space: nowrap;
		text-transform: capitalize;   /* "jednodzielny" → "Jednodzielny", bezpiecznie dla polskich znaków */
		color: #55555F;
		cursor: pointer;
		transition: background 0.18s ease, color 0.18s ease;
	}

	.ks-widget .ks-segment .ks-segment__opcja[aria-pressed="true"] {
		background: var(--ks-granat);
		color: var(--ks-biel);
	}

	/* Pigułka ma 44px, ale 4px paddingu zostawia samemu segmentowi 36px.
	   Obszar trafienia rozciągamy na pełną wysokość kontenera — rysunek
	   zostaje 36px, palec dostaje 44px. */
	.ks-widget .ks-segment .ks-segment__opcja::after {
		content: "";
		position: absolute;
		inset: -4px 0;
	}

	/* Wszystkie nazwy produktów zaczynają się od "Kalendarz ". Prefiks jest
	   w DOM dokładnie raz i znika na telefonie — bez CSS zostaje poprawna
	   pełna nazwa, więc nic się nie dubluje. */
	.ks-segment__prefiks {
		display: none;
	}
}

.ks-sekcja__naglowek {
	margin-bottom: clamp(20px, 4cqi, 36px);
}

.ks-sekcja__etykieta {
	margin: 0 0 var(--ks-odstep-3);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ks-bursztyn-tekst);
}

.ks-sekcja__tytul {
	margin: 0;
	font-size: clamp(27px, 6cqi, 46px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ks-tekst);
}

.ks-sekcja--granat .ks-sekcja__etykieta {
	color: var(--ks-bursztyn);
}

.ks-sekcja--granat .ks-sekcja__tytul {
	color: var(--ks-biel);
}