/*
 * Karta lotu aukcyjnego. Te same zmienne CSS co wyszukiwarka,
 * wiec Divi nadpisuje oba komponenty jednym zestawem.
 */

.cf-lot {
	--cf-tekst: #1a1a1a;
	--cf-tekst-slaby: #6b7280;
	--cf-tlo: #ffffff;
	--cf-tlo-slabe: #f6f7f8;
	--cf-linia: #e3e5e8;
	--cf-akcent: #c8102e;
	--cf-akcent-tekst: #ffffff;
	--cf-radius: 6px;
	--cf-uwaga-tlo: #fff8e6;
	--cf-uwaga-tekst: #8a6100;
	--cf-alarm-tlo: #fdeceb;
	--cf-alarm-tekst: #a11a12;
	--cf-ok-tlo: #eef7ee;
	--cf-ok-tekst: #1f6b2d;

	color: var(--cf-tekst);
}

.cf-lot *, .cf-lot *::before, .cf-lot *::after { box-sizing: border-box; }

/* Galeria na calej szerokosci u gory, pod nia dwie kolumny -
   uklad z Porsche Findera. */
.cf-lot__uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
	gap: 36px;
	align-items: start;
	margin-top: 26px;
}

@media (max-width: 900px) {
	.cf-lot__uklad { grid-template-columns: 1fr; gap: 26px; }
}

.cf-lot__aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
@media (max-width: 900px) { .cf-lot__aside { position: static; } }

/* Blok wstawiony osobno w szablonie Divi - bez marginesow zewnetrznych,
   zeby odstepy ustawial builder, a nie my. */
.cf-lot--blok > .cf-lot__sekcja:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.cf-lot--blok .cf-lot__siatka:last-child,
.cf-lot--blok .cf-lot__blok:last-child { margin-bottom: 0; }

.cf-lot__powrot {
	display: inline-block; margin-bottom: 14px; font-size: 14px;
	color: var(--cf-tekst-slaby); text-decoration: none;
}
.cf-lot__powrot::before { content: "\2190"; margin-right: 6px; }
.cf-lot__powrot:hover { color: var(--cf-tekst); }

/* ------------------------------------------------------------ Galeria */

.cf-lot__duze {
	aspect-ratio: 16 / 9;
	background: var(--cf-tlo-slabe);
	border-radius: var(--cf-radius);
	overflow: hidden;
}
.cf-lot__duze img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cf-lot__mini {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.cf-lot__minibtn {
	padding: 0; border: 2px solid transparent; border-radius: 4px;
	background: none; cursor: pointer; overflow: hidden; line-height: 0;
}
.cf-lot__minibtn img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cf-lot__minibtn.is-active { border-color: var(--cf-akcent); }
.cf-lot__minibtn:focus-visible { outline: 2px solid var(--cf-akcent); outline-offset: 2px; }

.cf-lot__galeria--pusta {
	padding: 60px 20px; text-align: center; color: var(--cf-tekst-slaby);
	background: var(--cf-tlo-slabe); border-radius: var(--cf-radius);
}

/* ------------------------------------------------------------- Kolumna */

.cf-lot__main { display: flex; flex-direction: column; }

.cf-lot__tytul { font-size: 30px; line-height: 1.2; margin: 0 0 4px; }
@media (max-width: 600px) { .cf-lot__tytul { font-size: 23px; } }
.cf-lot__wersja { color: var(--cf-tekst-slaby); margin: 0 0 10px; font-size: 15px; }

.cf-lot__plakietki { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.cf-lot__plakietka--nr { background: var(--cf-tlo-slabe); color: var(--cf-tekst-slaby); font-variant-numeric: tabular-nums; }

/* Siatka par etykieta-wartosc */
.cf-lot__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--cf-linia);
	border: 1px solid var(--cf-linia);
	border-radius: var(--cf-radius);
	overflow: hidden;
	margin-bottom: 26px;
}
.cf-lot__para { background: var(--cf-tlo); padding: 13px 15px; }
.cf-lot__para-k { display: block; font-size: 12px; color: var(--cf-tekst-slaby); margin-bottom: 3px; }
.cf-lot__para-v { display: block; font-size: 15px; font-weight: 600; }
.cf-lot__plakietka { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.cf-lot__plakietka--ok { background: var(--cf-ok-tlo); color: var(--cf-ok-tekst); }
.cf-lot__plakietka--uwaga { background: var(--cf-uwaga-tlo); color: var(--cf-uwaga-tekst); }
.cf-lot__plakietka--alarm { background: var(--cf-alarm-tlo); color: var(--cf-alarm-tekst); }
.cf-lot__plakietka--termin { background: var(--cf-tlo-slabe); color: var(--cf-tekst); }

.cf-lot__blok {
	border: 1px solid var(--cf-linia); border-radius: var(--cf-radius);
	padding: 16px; background: var(--cf-tlo);
}
.cf-lot__blok--uwaga { background: var(--cf-uwaga-tlo); border-color: #f0dcae; }
.cf-lot__blok--alarm { background: var(--cf-alarm-tlo); border-color: #f2c2be; }

.cf-lot__etykieta {
	display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--cf-tekst-slaby); margin-bottom: 6px;
}

.cf-lot__cena { font-size: 28px; font-weight: 700; line-height: 1.1; }
.cf-lot__cena-pln { font-size: 16px; color: var(--cf-tekst-slaby); margin-top: 2px; }
.cf-lot__cena-brak { font-size: 17px; font-weight: 600; color: var(--cf-tekst-slaby); }
.cf-lot__ocena { font-size: 19px; font-weight: 700; }

.cf-lot__uwaga, .cf-lot__opis { font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
.cf-lot__uwaga { color: var(--cf-tekst-slaby); }
.cf-lot__drobne { display: block; font-size: 12px; color: var(--cf-tekst-slaby); margin-top: 6px; font-weight: 400; }

/* ---------------------------------------------------------------- CTA */

.cf-lot__blok--cta { display: flex; flex-direction: column; gap: 10px; }

.cf-lot__btn {
	display: block; text-align: center; padding: 13px 18px;
	border-radius: var(--cf-radius); border: 1px solid var(--cf-linia);
	background: var(--cf-tlo); color: var(--cf-tekst);
	text-decoration: none; font-weight: 600; font-size: 15px;
}
.cf-lot__btn:hover { background: var(--cf-tlo-slabe); }
.cf-lot__btn--glowny {
	background: var(--cf-akcent); color: var(--cf-akcent-tekst); border-color: var(--cf-akcent);
}
.cf-lot__btn--glowny:hover { filter: brightness(1.08); background: var(--cf-akcent); color: var(--cf-akcent-tekst); }

/* ------------------------------------------------------------- Tabele */

.cf-lot__sekcja { border-top: 1px solid var(--cf-linia); padding-top: 22px; margin-top: 26px; }
.cf-lot__blok--ocena { margin-bottom: 4px; }
.cf-lot__h3 { font-size: 18px; margin: 0 0 14px; }

.cf-lot__tabela, .cf-lot__mini-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.cf-lot__tabela th, .cf-lot__mini-tabela th {
	text-align: left; font-weight: 600; color: var(--cf-tekst-slaby);
	padding: 9px 12px 9px 0; vertical-align: top; width: 46%;
}
.cf-lot__tabela td, .cf-lot__mini-tabela td { padding: 9px 0; vertical-align: top; }
.cf-lot__tabela tr + tr th, .cf-lot__tabela tr + tr td,
.cf-lot__mini-tabela tr + tr th, .cf-lot__mini-tabela tr + tr td { border-top: 1px solid var(--cf-linia); }

/* --------------------------------------------------------- Kalkulator */

.cf-lot__suwak { display: block; margin-bottom: 14px; font-size: 14px; }
.cf-lot__suwak span { display: block; margin-bottom: 6px; color: var(--cf-tekst-slaby); }
.cf-lot__suwak input {
	width: 100%; padding: 10px; font-size: 16px; font-family: inherit;
	border: 1px solid var(--cf-linia); border-radius: var(--cf-radius);
}

.cf-lot__tabela--kalk td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cf-lot__suma th, .cf-lot__suma td { font-size: 17px; font-weight: 700; color: var(--cf-tekst); border-top: 2px solid var(--cf-tekst) !important; padding-top: 12px; }

.cf-lot__zastrzezenie {
	font-size: 12px; line-height: 1.55; color: var(--cf-tekst-slaby);
	background: var(--cf-tlo-slabe); border-radius: var(--cf-radius);
	padding: 12px 14px; margin: 14px 0 0;
}

/* ------------------------------------------------- Sekcje jak u Porsche */

.cf-lot__h4 {
	font-size: 14px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .04em; color: var(--cf-tekst-slaby);
	margin: 22px 0 8px;
}
.cf-lot__h4:first-of-type { margin-top: 0; }

/* Kroki procesu - odpowiednik bloku dealera i gwarancji */
.cf-lot__kroki { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.cf-lot__krok { display: flex; gap: 12px; align-items: flex-start; }
.cf-lot__krok-nr {
	flex: none; width: 28px; height: 28px; border-radius: 50%;
	background: var(--cf-akcent); color: var(--cf-akcent-tekst);
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 700;
}
.cf-lot__krok strong { display: block; font-size: 15px; margin-bottom: 2px; }
.cf-lot__krok .cf-lot__opis { margin-top: 0; }

/* Podobne aukcje */
.cf-lot__podobne { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.cf-lot__podobny {
	display: block; text-decoration: none; color: inherit;
	border: 1px solid var(--cf-linia); border-radius: var(--cf-radius); overflow: hidden;
}
.cf-lot__podobny:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); }
.cf-lot__podobny-foto { display: block; aspect-ratio: 4 / 3; background: var(--cf-tlo-slabe); }
.cf-lot__podobny-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-lot__podobny-nazwa { display: block; padding: 10px 12px 2px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.cf-lot__podobny-cena { display: block; padding: 0 12px 12px; font-size: 13px; color: var(--cf-tekst-slaby); }

/* ---------------------------------------------------- Odliczanie */

.cf-lot__blok--termin { background: var(--cf-tlo-slabe); }

.cf-lot__odliczanie {
	font-size: 26px; font-weight: 700; line-height: 1.1;
	font-variant-numeric: tabular-nums;
	margin-bottom: 12px;
}
.cf-lot__odliczanie.is-pilne { color: var(--cf-akcent); }
.cf-lot__odliczanie.is-po-terminie { font-size: 18px; color: var(--cf-tekst-slaby); }

/* ------------------------------------------- Legenda karty aukcyjnej */

.cf-lot__legenda { margin-top: 14px; border: 1px solid var(--cf-linia); border-radius: var(--cf-radius); }
.cf-lot__legenda > summary {
	cursor: pointer; padding: 12px 15px; font-weight: 600; font-size: 14px;
	list-style: none;
}
.cf-lot__legenda > summary::-webkit-details-marker { display: none; }
.cf-lot__legenda > summary::before { content: "+ "; color: var(--cf-akcent); font-weight: 700; }
.cf-lot__legenda[open] > summary::before { content: "\2212 "; }
.cf-lot__legenda[open] > summary { border-bottom: 1px solid var(--cf-linia); }

.cf-lot__legenda-tresc {
	padding: 6px 15px 16px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 24px;
}
.cf-lot__legenda-grupa dl { margin: 0; display: grid; grid-template-columns: 42px 1fr; gap: 2px 8px; font-size: 13px; }
.cf-lot__legenda-grupa dt { font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-lot__legenda-grupa dd { margin: 0; color: var(--cf-tekst-slaby); }

/* ------------------------------------------------- Galeria mozaikowa */

.cf-lot__mozaika {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
	border-radius: var(--cf-radius);
	overflow: hidden;
}
@media (max-width: 700px) {
	.cf-lot__mozaika { grid-template-columns: 1fr; }
	.cf-lot__kafelki { grid-template-columns: repeat(4, 1fr) !important; }
}

.cf-lot__kafel {
	position: relative; padding: 0; border: 0; background: var(--cf-tlo-slabe);
	cursor: pointer; overflow: hidden; line-height: 0; display: block; width: 100%;
}
.cf-lot__kafel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.cf-lot__kafel:hover img { transform: scale(1.03); }
.cf-lot__kafel:focus-visible { outline: 3px solid var(--cf-akcent); outline-offset: -3px; }

.cf-lot__kafel--duzy { aspect-ratio: 4 / 3; }
.cf-lot__kafelki { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.cf-lot__kafelki .cf-lot__kafel { aspect-ratio: 4 / 3; height: 100%; }

.cf-lot__odznaki { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.cf-lot__odznaka {
	background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 600;
	padding: 5px 11px; border-radius: 20px; line-height: 1.2;
}
.cf-lot__odznaka--karta { background: var(--cf-akcent); }

.cf-lot__otworz {
	position: absolute; left: 14px; bottom: 14px;
	background: rgba(0,0,0,.78); color: #fff; font-size: 14px; font-weight: 600;
	padding: 11px 18px; border-radius: 4px; line-height: 1.2;
}
.cf-lot__kafel--duzy:hover .cf-lot__otworz { background: #000; }

.cf-lot__wiecej {
	position: absolute; inset: 0; background: rgba(0,0,0,.55); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px; font-weight: 700;
}

/* ------------------------------------------------------- Lightbox */

.cf-lb {
	position: fixed; inset: 0; background: rgba(0,0,0,.92);
	/*
	 * Nagłówek Car Factor wstrzykiwany na subdomenie ma z-index 999999.
	 * Przy niższej wartości menu przebijało się nad galerią pełnoekranową
	 * i wisiało na zdjęciu. Trzymamy się wyżej od wszystkiego, co znamy.
	 */
	z-index: 2147483000;
	display: flex; align-items: center; justify-content: center; padding: 40px;
}
.cf-lb__img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.cf-lb__zamknij, .cf-lb__strzalka {
	position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0;
	cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 28px; line-height: 1;
}
.cf-lb__zamknij:hover, .cf-lb__strzalka:hover { background: rgba(255,255,255,.25); }
.cf-lb__zamknij { top: 18px; right: 18px; }
.cf-lb__strzalka--lewo { left: 18px; }
.cf-lb__strzalka--prawo { right: 18px; }
.cf-lb__licznik { position: absolute; bottom: 22px; color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------- Karta aukcyjna */

.cf-lot__karta-link { position: relative; display: block; max-width: 620px; border: 1px solid var(--cf-linia); border-radius: var(--cf-radius); overflow: hidden; }
.cf-lot__karta-link img { width: 100%; height: auto; display: block; }
.cf-lot__karta-lupa {
	position: absolute; right: 12px; bottom: 12px;
	background: rgba(0,0,0,.75); color: #fff; font-size: 13px; font-weight: 600;
	padding: 7px 13px; border-radius: 4px;
}

/* ------------------------- Siatka danych w stylu Porsche Findera ------ */

.cf-lot__siatka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 40px;
	background: none;
	border: 0;
	border-radius: 0;
	margin-bottom: 30px;
}
@media (max-width: 780px) { .cf-lot__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } }
@media (max-width: 460px) { .cf-lot__siatka { grid-template-columns: 1fr; } }

.cf-lot__para {
	background: none;
	padding: 16px 0;
	border-bottom: 1px solid var(--cf-linia);
}
.cf-lot__para-k { font-size: 13px; color: var(--cf-tekst-slaby); margin-bottom: 4px; }
.cf-lot__para-v { font-size: 16px; font-weight: 700; }

/* Karta boczna jak u Porsche: szare tlo, duza cena, czarny przycisk */

.cf-lot__aside .cf-lot__blok--cena {
	background: var(--cf-tlo-slabe);
	border: 0;
	padding: 22px;
}
.cf-lot__aside .cf-lot__cena { font-size: 32px; letter-spacing: -.01em; }

.cf-lot__blok--cta { background: var(--cf-tlo-slabe); border: 0; padding: 22px; }
.cf-lot__btn--glowny {
	background: #111; border-color: #111; color: #fff;
	padding: 15px 18px; font-size: 16px;
}
.cf-lot__btn--glowny:hover { background: #000; border-color: #000; color: #fff; filter: none; }
.cf-lot__blok--cta .cf-lot__btn:not(.cf-lot__btn--glowny) {
	background: #e4e6e9; border-color: #e4e6e9;
}

.cf-lot__kalk-pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cf-lot__kalk-pola .cf-lot__suwak { margin-bottom: 0; }
.cf-lot__suwak select {
	width: 100%; padding: 10px; font-size: 15px; font-family: inherit;
	border: 1px solid var(--cf-linia); border-radius: var(--cf-radius); background: #fff;
}

/* ====================================================================== */
/* Dociągnięcie do karty Porsche Findera                                  */
/*                                                                        */
/* Różnice wychwycone przy porównaniu zrzutów:                            */
/*  - tytuł u Porsche jest znacznie większy i lżejszy                     */
/*  - panele mają wyraźniejsze zaokrąglenia i więcej powietrza w środku   */
/*  - odstępy pionowe są równe; u nas sumowały się z wypełnieniami Divi   */
/* ====================================================================== */

.cf-lot__tytul {
	font-size: clamp( 26px, 3.4vw, 42px );
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.12;
	margin-bottom: 6px;
}

.cf-lot__wersja { font-size: 16px; margin-bottom: 18px; }

/* Panele boczne: więcej powietrza, wyraźniejsze zaokrąglenie. */
.cf-lot__blok {
	border-radius: 10px;
	padding: 22px;
}
.cf-lot__aside .cf-lot__blok--cena,
.cf-lot__blok--cta,
.cf-lot__blok--termin {
	border-radius: 10px;
	padding: 24px;
}

.cf-lot__cena { font-size: 34px; font-weight: 400; letter-spacing: -0.02em; }
.cf-lot__odliczanie { font-size: 30px; font-weight: 400; letter-spacing: -0.02em; }

.cf-lot__btn { border-radius: 8px; padding: 15px 20px; }

/* Siatka danych: więcej powietrza, jak u Porsche. */
.cf-lot__para { padding: 18px 0; }
.cf-lot__para-v { font-size: 17px; font-weight: 600; }

/*
 * Odstępy między sekcjami.
 *
 * Każdy blok wstawiony przez moduł Kod w Divi dostaje własne wypełnienie
 * od buildera. Nasze marginesy dokładały się do tego i robiły się przepaście.
 * W trybie pojedynczego bloku zerujemy własne marginesy zewnętrzne
 * i zostawiamy sterowanie odstępami builderowi.
 */
.cf-lot--blok .cf-lot__sekcja {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}
.cf-lot--blok > .cf-lot__blok:only-child { margin: 0; }

/* Nagłówki sekcji bliżej stylu Porsche: większe, lżejsze. */
.cf-lot__h3 {
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
}

/* Galeria: łagodniejsze zaokrąglenia kafli. */
.cf-lot__mozaika { border-radius: 10px; gap: 10px; }
.cf-lot__kafelki { gap: 10px; }

/* Tabele danych technicznych: więcej powietrza w wierszach. */
.cf-lot__tabela th, .cf-lot__tabela td { padding: 12px 12px 12px 0; }

/* ------------------------------------------------------- Formularz */

.cf-lot__blok--formularz .wpcf7 { margin: 10px 0 0; }
.cf-lot__blok--formularz .wpcf7 form { margin: 0; }
.cf-lot__blok--formularz p { margin: 0 0 10px; }

.cf-lot__blok--formularz input[type="text"],
.cf-lot__blok--formularz input[type="email"],
.cf-lot__blok--formularz input[type="tel"],
.cf-lot__blok--formularz textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--cf-linia);
	border-radius: var(--cf-radius);
	font: inherit;
	font-size: 15px;
	background: #fff;
}
.cf-lot__blok--formularz textarea { min-height: 110px; resize: vertical; }

.cf-lot__blok--formularz input[type="submit"],
.cf-lot__blok--formularz button[type="submit"] {
	width: 100%;
	padding: 14px 18px;
	border: 0;
	border-radius: 8px;
	background: #111;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.cf-lot__blok--formularz input[type="submit"]:hover,
.cf-lot__blok--formularz button[type="submit"]:hover { background: #000; }

.cf-lot__blok--formularz .wpcf7-response-output {
	margin: 12px 0 0 !important;
	padding: 10px 12px !important;
	border-radius: var(--cf-radius);
	font-size: 14px;
}


/* ---------------------------------------------- Rozwijany formularz */

/*
 * details/summary zamiast wlasnego przelacznika: dziala bez JavaScriptu,
 * obsluguje klawiature i czytniki ekranu bez dopisywania atrybutow ARIA.
 * Summary stylujemy tak samo jak przycisk WhatsApp, zeby oba wygladaly
 * jak jedna grupa dzialan.
 */

.cf-lot__rozw { border: 0; margin: 0; }

.cf-lot__rozw-przycisk {
	display: block;
	width: 100%;
	text-align: center;
	list-style: none;
	cursor: pointer;
	user-select: none;
	background: #111;
	color: #fff;
	border: 1px solid #111;
}
.cf-lot__rozw-przycisk::-webkit-details-marker { display: none; }
.cf-lot__rozw-przycisk::marker { content: ""; }
.cf-lot__rozw-przycisk:hover { background: #000; border-color: #000; color: #fff; }
.cf-lot__rozw-przycisk:focus-visible { outline: 3px solid var(--cf-akcent); outline-offset: 2px; }

.cf-lot__rozw[open] > .cf-lot__rozw-przycisk {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.cf-lot__rozw-tresc {
	border: 1px solid var(--cf-linia);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	padding: 16px;
	background: var(--cf-tlo);
}
.cf-lot__rozw-tresc .cf-lot__etykieta { margin-bottom: 10px; }

/* Blok formularza nie potrzebuje wlasnej ramki, gdy jest zwiniety -
   ramke niesie rozwinieta tresc. */
.cf-lot__blok--formularz { border: 0; padding: 0; background: none; }
.cf-lot__blok--formularz .cf-lot__drobne { padding: 0 2px; }

/*
 * Przycisk otwierający okno.
 *
 * Wymuszenie szerokości jest tu świadome: blok bywa wstawiany do własnych
 * paneli w szablonie Divi, których style mają wyższą szczegółowość
 * i zwężają przycisk do szerokości tekstu. Sąsiednie przyciski WhatsApp
 * i e-mail są odnośnikami i rozciągają się same, więc bez tego jeden
 * z trzech odstawał.
 */
.cf-lot__blok--formularz > .cf-lot__btn,
.cf-lot__blok--formularz > button.cf-lot__btn {
	width: 100% !important;
	max-width: none !important;
	align-self: stretch;
	margin: 0;
}

/* ------------------------------------------------------ Okno modalne */

.cf-lot__modal {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Element dialogowy jest domyslnie ukryty przez przegladarke,
   wiec ustawienie display dotyczy tylko stanu otwartego. */
.cf-lot__modal[open] {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.cf-lot__modal::backdrop {
	background: rgba(0, 0, 0, .68);
}

/* Wersja zapasowa dla przegladarek bez showModal: element nie trafia
   wtedy do warstwy nadrzednej ani nie ma tla, wiec robimy to sami. */
.cf-lot__modal.is-zapas {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: rgba(0, 0, 0, .68);
}

/*
 * Panel. Tlo MUSI byc nieprzezroczyste - bez tego tresc strony
 * przeswituje przez formularz i calosc wyglada na zepsuta.
 */
.cf-lot__modal-okno {
	position: relative;
	box-sizing: border-box;
	background: #fff;
	border-radius: 14px;
	width: min(470px, calc(100% - 32px));
	margin: 7vh 0 48px;
	padding: 26px 26px 28px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
	color: var(--cf-tekst);
}

.cf-lot__modal-naglowek {
	margin: 0 40px 20px 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cf-linia);
}
.cf-lot__modal-tytul { font-size: 18px; font-weight: 700; line-height: 1.25; margin: 0; }
.cf-lot__modal-podtytul { font-size: 12.5px; color: var(--cf-tekst-slaby); margin: 3px 0 0; line-height: 1.35; }

.cf-lot__modal-zamknij {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	background: var(--cf-tlo-slabe);
	font-size: 22px;
	line-height: 1;
	color: var(--cf-tekst-slaby);
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cf-lot__modal-zamknij:hover { background: var(--cf-linia); color: var(--cf-tekst); }

/*
 * Odstępy i pola wewnątrz okna.
 *
 * Contact Form 7 opakowuje każde pole w akapit, a motywy nadają akapitom
 * własne marginesy - w Divi wychodziło z tego kilkadziesiąt pikseli przerwy
 * między etykietą a polem. Dlatego celujemy w konkretne elementy zamiast
 * liczyć na dziedziczenie.
 */

.cf-lot__modal-tresc .wpcf7 p { margin: 0 0 14px; line-height: 1.3; }
.cf-lot__modal-tresc .wpcf7 p:last-of-type { margin-bottom: 0; }
.cf-lot__modal-tresc .wpcf7 br { display: none; }

.cf-lot__modal-tresc label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 5px;
	color: var(--cf-tekst);
}

/* Pola muszą mieć widoczną ramkę. Bez niej użytkownik nie wie,
   gdzie kliknąć - widzi sam tekst podpowiedzi. */
.cf-lot__modal-tresc input[type="text"],
.cf-lot__modal-tresc input[type="email"],
.cf-lot__modal-tresc input[type="tel"],
.cf-lot__modal-tresc textarea,
.cf-lot__blok--formularz input[type="text"],
.cf-lot__blok--formularz input[type="email"],
.cf-lot__blok--formularz input[type="tel"],
.cf-lot__blok--formularz textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #c9ccd1;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	color: var(--cf-tekst);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cf-lot__modal-tresc input:focus,
.cf-lot__modal-tresc textarea:focus,
.cf-lot__blok--formularz input:focus,
.cf-lot__blok--formularz textarea:focus {
	outline: 0;
	border-color: var(--cf-tekst);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}

.cf-lot__modal-tresc input::placeholder,
.cf-lot__blok--formularz input::placeholder { color: #9aa0a6; }

/* Zgoda: pole wyboru obok tekstu, nie pod spodem. */
.cf-lot__modal-tresc .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.cf-lot__modal-tresc .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--cf-tekst-slaby);
	margin: 0;
}
.cf-lot__modal-tresc .wpcf7-acceptance input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	flex: none;
}

.cf-lot__modal-tresc .cf-lot__drobne { margin-top: 14px; }
.cf-lot__modal-tresc .wpcf7-response-output { margin: 14px 0 0 !important; }

@media (max-width: 600px) {
	.cf-lot__modal-okno {
		width: 100%;
		min-height: 100%;
		margin: 0;
		border-radius: 0;
		padding: 24px 18px 36px;
	}
}