/* Karykatury — strony klienta. Kolory i odstępy z tokenów motywu (docs/02). */

.fk-kar {
	padding-block: var(--fk-space-7) var(--fk-space-9);
	color: var(--fk-ink);
	font-size: 16px;
}

.fk-kar__narrow {
	max-width: 760px;
}

.fk-kar__eyebrow {
	margin: 0 0 var(--fk-space-2);
	color: var(--fk-ink-soft);
	font-size: 14px;
}

.fk-kar__title {
	margin: 0 0 var(--fk-space-4);
	font-size: clamp(28px, 5vw, 40px);
	line-height: 1.15;
}

.fk-kar__lead {
	margin: 0 0 var(--fk-space-6);
	color: var(--fk-ink-soft);
	font-size: 18px;
}

.fk-kar h2 {
	margin: 0 0 var(--fk-space-3);
	font-size: 20px;
}

.fk-kar-step {
	margin: 0 0 var(--fk-space-6);
	padding: var(--fk-space-5);
	border: 1px solid var(--fk-line);
	border-radius: var(--fk-radius-card);
	background: var(--fk-white);
}

.fk-kar-step > legend {
	padding: 0 var(--fk-space-2);
	font-weight: 700;
	font-size: 18px;
}

.fk-kar-field {
	display: block;
	margin: 0 0 var(--fk-space-4);
	font-weight: 600;
}

.fk-kar-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--fk-space-2);
	padding: 12px 14px;
	border: 1px solid var(--fk-line);
	border-radius: var(--fk-radius-btn);
	background: var(--fk-white);
	color: var(--fk-ink);
	font: inherit;
	font-weight: 400;
}

.fk-kar-input:focus {
	outline: 2px solid var(--fk-ink);
	outline-offset: 1px;
}

.fk-kar-input--short { max-width: 9em; }
.fk-kar-input--mid { max-width: 16em; }

.fk-kar-row {
	display: grid;
	grid-template-columns: 9em 1fr;
	gap: var(--fk-space-4);
}

.fk-kar-hint {
	margin: calc(-1 * var(--fk-space-2)) 0 var(--fk-space-4);
	color: var(--fk-ink-soft);
	font-size: 15px;
}

.fk-kar-req { color: var(--fk-error); }

/* Format wybrany w cenniku na /karykatury/: jedna linia „… · zmień”, siatka po rozwinięciu. */
.fk-kar-picked > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fk-space-2) var(--fk-space-4);
	min-height: 44px;
	padding: var(--fk-space-3) var(--fk-space-4);
	border: 2px solid var(--fk-yellow-dark);
	border-radius: var(--fk-radius-card);
	background: #FFFBE0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.fk-kar-picked > summary::-webkit-details-marker { display: none; }
.fk-kar-picked > summary:focus-visible { outline: 2px solid var(--fk-ink); outline-offset: 2px; }
.fk-kar-picked__change { font-weight: 400; text-decoration: underline; }
.fk-kar-picked[open] > summary { margin-bottom: var(--fk-space-4); }
.fk-kar-picked[open] .fk-kar-picked__change { display: none; }

.fk-kar-next { margin-bottom: 0; font-size: 15px; }

.fk-kar-error {
	margin: 0 0 var(--fk-space-3);
	color: var(--fk-error);
	font-weight: 600;
}

/* Kafelki formatów i wybory. */
.fk-kar-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--fk-space-3);
}

.fk-kar-tile,
.fk-kar-choice {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--fk-space-4);
	border: 2px solid var(--fk-line);
	border-radius: var(--fk-radius-card);
	cursor: pointer;
}

.fk-kar-tile input,
.fk-kar-choice input[type="radio"] {
	position: absolute;
	opacity: 0;
}

.fk-kar-tile:has(input:checked),
.fk-kar-choice:has(input:checked) {
	border-color: var(--fk-yellow-dark);
	background: #FFFBE0;
	/* Grubsza ramka: stan widać też bez rozróżniania kolorów. */
	box-shadow: inset 0 0 0 2px var(--fk-ink);
}

/* Znak „wybrano" niezależny od koloru (pusty tekst alternatywny, bo stan niesie natywne radio). */
.fk-kar-tile:has(input:checked)::after,
.fk-kar-choice:has(input:checked)::after {
	content: "✓ Wybrano";
	content: "✓ Wybrano" / "";
	color: var(--fk-ink);
	font-size: 14px;
	font-weight: 700;
}

.fk-kar-choice:has(input:checked)::after { margin-left: 8px; }

/* WebKit (Safari, iPhone) nie ustawia :focus-visible na radiu przesuwanym strzalka w grupie,
   wiec obrys dostaje tez :focus (Safari i tak nie fokusuje radia kliknieciem). Osobne reguly:
   nieznany selektor w liscie uniewazniłby cala regule. */
.fk-kar-tile:has(input:focus-visible),
.fk-kar-choice:has(input:focus-visible) {
	outline: 2px solid var(--fk-ink);
	outline-offset: 2px;
}

.fk-kar-tile:has(input:focus),
.fk-kar-choice:has(input:focus) {
	outline: 2px solid var(--fk-ink);
	outline-offset: 2px;
}

.fk-kar-tile__name { font-weight: 700; }
.fk-kar-tile__price { font-size: 18px; }
.fk-kar-tile__meta { color: var(--fk-ink-soft); font-size: 14px; }

.fk-kar-choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fk-space-3);
	margin: 0 0 var(--fk-space-4);
}

.fk-kar-choice {
	flex-direction: row;
	align-items: center;
	padding: 12px 16px;
}

.fk-kar-choice--small {
	padding: 8px 12px;
	border-width: 1px;
	font-size: 15px;
}

.fk-kar-choice[hidden] { display: none; }

.fk-kar-check {
	display: flex;
	gap: var(--fk-space-3);
	align-items: flex-start;
	margin: 0 0 var(--fk-space-4);
}

.fk-kar-check a {
	display: inline-block;
	padding: 12px 4px;
	margin: -12px -4px;
}

.fk-kar-check input {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
}

.fk-kar-summary {
	padding: var(--fk-space-5);
	border-radius: var(--fk-radius-card);
	background: var(--fk-surface);
}

.fk-kar-summary > p:first-child { font-size: 20px; }

/* Terminy przed „Zamawiam i płacę” (2026-10-30): etykieta słowem, kreska z lewej tylko wyróżnia blok. */
.fk-kar-terms {
	max-width: 75ch;
	margin: 0 0 var(--fk-space-4);
	padding-left: var(--fk-space-3);
	border-left: 3px solid var(--fk-ink-soft);
}

/* Zwięzłe „Razem" przy przycisku — tylko na telefonie. */
.fk-kar-pay__total { display: none; margin: 0 0 var(--fk-space-3); font-size: 20px; }

@media (max-width: 768px) {
	.fk-kar-pay__total { display: block; }
	.fk-kar-pay .fk-kar-submit { width: 100%; }
}

.fk-kar-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fk-space-3);
	margin-top: var(--fk-space-4);
}

/* Komunikaty. */
.fk-kar-box {
	margin: 0 0 var(--fk-space-5);
	padding: var(--fk-space-4) var(--fk-space-5);
	border-left: 4px solid var(--fk-ink-faint);
	border-radius: 0 var(--fk-radius-btn) var(--fk-radius-btn) 0;
	background: var(--fk-surface);
}

.fk-kar-box p { margin: 0; }
.fk-kar-box p + p { margin-top: var(--fk-space-2); }
.fk-kar-box--ok { border-color: var(--fk-ok); }
.fk-kar-box--warn { border-color: var(--fk-warn); }
.fk-kar-box--error { border-color: var(--fk-error); }

/*
 * „Przygotowujemy projekt” (generowanie i kontrola AI): stan ładowania
 * słowami, pasek po lewej tylko pulsuje — bez ruchu przy prefers-reduced-motion.
 */
.fk-kar-box--loading { border-color: var(--fk-yellow-dark); }
.fk-kar-box [hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
	.fk-kar-box--loading { animation: fk-kar-pulse 2s ease-in-out infinite; }
}

@keyframes fk-kar-pulse {
	50% { border-left-color: var(--fk-ink-faint); }
}

/* Zdjęcia klienta. */
.fk-kar-photos {
	display: grid;
	gap: var(--fk-space-3);
	margin: 0 0 var(--fk-space-4);
	padding: 0;
	list-style: none;
}

.fk-kar-photo {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	grid-template-areas: "img name remove" "img role role";
	gap: var(--fk-space-1) var(--fk-space-3);
	align-items: center;
	padding: var(--fk-space-2);
	border: 1px solid var(--fk-line);
	border-radius: var(--fk-radius-btn);
}

.fk-kar-photo img,
.fk-kar-photo__nothumb {
	grid-area: img;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	object-fit: cover;
}

.fk-kar-photo__nothumb {
	display: grid;
	place-items: center;
	background: var(--fk-surface);
	color: var(--fk-ink-soft);
	font-size: 13px;
}

.fk-kar-photo__name {
	grid-area: name;
	overflow: hidden;
	font-size: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fk-kar-photo select { grid-area: role; padding: 6px; font: inherit; }
.fk-kar-photo [data-remove] { grid-area: remove; }
.fk-kar-photo progress { grid-area: role; width: 100%; }
.fk-kar-photo.is-uploading { grid-template-areas: "name name name" "role role role"; }

.fk-kar-link {
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--fk-error);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.fk-kar-upload {
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
	cursor: pointer;
}

/* WebKit (iPhone) liczy szerokość pola pliku nawet przy position: absolute — bez tego przycisk miał 389 px na 320 px. */
.fk-kar-upload input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.fk-kar-inscription {
	min-height: 1.4em;
	margin: 0 0 var(--fk-space-4);
	padding: var(--fk-space-3) var(--fk-space-4);
	border: 1px dashed var(--fk-line);
	border-radius: var(--fk-radius-btn);
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	white-space: pre-wrap;
}

.fk-kar-inscription:empty { display: none; }

/* Projekt do decyzji. */
.fk-kar-preview {
	margin: 0 0 var(--fk-space-5);
	text-align: center;
}

.fk-kar-preview img {
	display: block;
	width: 100%;
	max-height: 75vh;
	max-height: 75svh;
	border-radius: var(--fk-radius-card);
	background: var(--fk-surface);
	object-fit: contain;
}

.fk-kar-preview figcaption {
	margin-top: var(--fk-space-2);
	color: var(--fk-ink-soft);
	font-size: 14px;
}

.fk-kar-preview--muted img { max-height: 40vh; max-height: 40svh; opacity: 0.6; }

.fk-kar-decision { margin: 0 0 var(--fk-space-3); }

.fk-kar-decision > summary {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	list-style: none;
	cursor: pointer;
}

.fk-kar-decision > summary::-webkit-details-marker { display: none; }

.fk-kar-decision[open] > summary { margin-bottom: var(--fk-space-4); }

.fk-kar-decision > form {
	padding: var(--fk-space-5);
	border: 1px solid var(--fk-line);
	border-radius: var(--fk-radius-card);
}

.fk-kar-thumbs {
	display: flex;
	gap: var(--fk-space-3);
	overflow-x: auto;
	padding-bottom: var(--fk-space-2);
}

.fk-kar-thumbs a {
	flex: none;
	width: 96px;
	color: var(--fk-ink);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
}

.fk-kar-thumbs img {
	display: block;
	width: 96px;
	height: 96px;
	border: 2px solid var(--fk-line);
	border-radius: 8px;
	object-fit: cover;
}

.fk-kar-thumbs a.is-current img { border-color: var(--fk-yellow); }

.fk-kar-aside {
	margin-top: var(--fk-space-7);
	padding: var(--fk-space-5);
	border-radius: var(--fk-radius-card);
	background: var(--fk-surface);
}

.fk-kar-aside dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--fk-space-2) var(--fk-space-4);
	margin: 0;
}

.fk-kar-aside dt { color: var(--fk-ink-soft); }
.fk-kar-aside dd { margin: 0; }

@media (max-width: 639px) {
	.fk-kar-step { padding: var(--fk-space-4); }
	.fk-kar-row { grid-template-columns: 1fr; gap: 0; }
	.fk-kar-buttons .fk-btn { width: 100%; }
}

/* Pole-pułapka na boty (Wp\Guard) — poza ekranem, nie display:none, bo część botów to sprawdza. */
.fk-kar-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Nagłówek grupy formatów (płótno / wydruk). */
.fk-kar-tiles__title {
	margin: 1rem 0 0.5rem;
	font-size: 1rem;
}

.fk-kar-tiles + .fk-kar-tiles__title {
	margin-top: 1.5rem;
}

/* Długie etykiety przycisków („Potwierdzam — tak ma być”) na 320 px: zawijanie zamiast wyjścia poza ekran. */
.fk-kar-buttons .fk-btn,
.fk-kar-step .fk-btn {
	height: auto;
	min-height: 48px;
	padding-block: 12px;
	white-space: normal;
	text-align: center;
}

.fk-kar-buttons .fk-btn--primary { min-height: 52px; }

/* Brief v2 (docs/06 wersja 3): osoby, zwinięte pola opcjonalne, styl, karta „Zrozumieliśmy tak”. */
.fk-kar-hint--under {
	margin: 0 0 var(--fk-space-4);
	font-weight: 400;
}

.fk-kar-field .fk-kar-hint--under { margin: var(--fk-space-1) 0 0; }

.fk-kar-subtitle {
	margin: var(--fk-space-5) 0 var(--fk-space-2);
	font-size: 18px;
}

.fk-kar-persons {
	display: grid;
	gap: var(--fk-space-3);
	margin: 0 0 var(--fk-space-4);
	padding: 0;
	list-style: none;
}

.fk-kar-person fieldset {
	min-width: 0;
	margin: 0;
	padding: var(--fk-space-3) var(--fk-space-4);
	border: 1px solid var(--fk-line);
	border-radius: var(--fk-radius-btn);
}

.fk-kar-person legend {
	padding: 0 var(--fk-space-2);
	font-weight: 700;
}

.fk-kar-person__count { margin: 0 0 var(--fk-space-3); font-size: 15px; }

/* Brak zdjęcia: tekst mówi to wprost, znak i pogrubienie dochodzą do koloru. */
.fk-kar-person__count.is-missing { color: var(--fk-error); font-weight: 600; }
.fk-kar-person__count.is-missing::before { content: "! "; content: "! " / ""; }

.fk-kar-person .fk-kar-choices { margin-bottom: var(--fk-space-3); }

.fk-kar-link.fk-kar-person__remove,
.fk-kar-photo [data-remove] { min-height: 44px; }

.fk-kar-photo select { min-height: 44px; max-width: 100%; }

.fk-kar-more { margin: 0 0 var(--fk-space-4); }

.fk-kar-more > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.fk-kar-more > summary:focus-visible { outline: 2px solid var(--fk-ink); outline-offset: 2px; }
.fk-kar-more[open] > summary { margin-bottom: var(--fk-space-3); }

.fk-kar-fieldset {
	min-width: 0;
	margin: 0 0 var(--fk-space-4);
	padding: 0;
	border: 0;
}

.fk-kar-fieldset > legend { margin-bottom: var(--fk-space-2); padding: 0; font-weight: 600; }

/* Przykład stylu: szary blok do czasu zdjęć od pracowni (CLAUDE.md, zasada 5). */
.fk-kar-style__example {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--fk-space-2);
	padding: 4px;
	border-radius: 8px;
	background: var(--fk-surface);
	color: var(--fk-ink-soft);
	font-size: 12px;
	text-align: center;
	overflow-wrap: anywhere;
}

.fk-kar-understood__persons {
	display: grid;
	gap: var(--fk-space-3);
	margin: 0 0 var(--fk-space-4);
	padding: 0;
	list-style: none;
}

.fk-kar-understood__persons p { margin: 0 0 var(--fk-space-2); }

.fk-kar-understood__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fk-space-2);
}

.fk-kar-understood__thumbs img {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
}

.fk-kar-understood__list {
	display: grid;
	grid-template-columns: minmax(8em, max-content) 1fr;
	gap: var(--fk-space-2) var(--fk-space-4);
	margin: 0 0 var(--fk-space-4);
}

.fk-kar-understood__list dt { color: var(--fk-ink-soft); }
.fk-kar-understood__list dd { margin: 0; overflow-wrap: anywhere; }
.fk-kar-understood__list ul { margin: 0; padding-left: 1.2em; }

@media (max-width: 479px) {
	.fk-kar-understood__list { grid-template-columns: 1fr; gap: 0; }
	.fk-kar-understood__list dd { margin-bottom: var(--fk-space-3); }
}

/* Poprawka v2 (docs/06 wersja 3): rodzaj, „zostaw bez zmian”, obszar 3 × 3 na podglądzie, lista uwag. */
.fk-kar-revise__types {
	display: grid;
	gap: var(--fk-space-3);
}

.fk-kar-choice--type {
	flex-wrap: wrap;
	align-items: flex-start;
	min-height: 44px;
	box-sizing: border-box;
}

.fk-kar-choice__hint {
	display: block;
	color: var(--fk-ink-soft);
	font-size: 15px;
}

/* Pola wyboru „bez zmian”: natywny znacznik widoczny (stan nie tylko kolorem), cały kafelek ≥ 44 px. */
.fk-kar-choice--check {
	gap: var(--fk-space-2);
	min-height: 44px;
	box-sizing: border-box;
}

.fk-kar-choice--check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
}

.fk-kar-choice--check:has(input:focus-visible) {
	outline: 2px solid var(--fk-ink);
	outline-offset: 2px;
}

.fk-kar-choice--check:has(input:focus) {
	outline: 2px solid var(--fk-ink);
	outline-offset: 2px;
}

.fk-kar-area {
	margin: 0 0 var(--fk-space-3);
}

/* Ramka o proporcjach formatu z zamówienia (pion 4/5, poziom 5/4, kwadrat 1):
   siatka 3 × 3 ma stałe pole i nie wystaje, także gdy obraz się nie wczytał. */
.fk-kar-area__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-width: 420px;
	margin-inline: auto;
	user-select: none;
	-webkit-user-select: none;
}

.fk-kar-area__frame--poziom { aspect-ratio: 5 / 4; }
.fk-kar-area__frame--kwadrat { aspect-ratio: 1; }

.fk-kar-area__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--fk-radius-card);
	background: var(--fk-surface);
}

.fk-kar-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.fk-kar-grid__cell {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	/* Linie siatki widoczne na jasnym i ciemnym obrazie: biała i atramentowa. */
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.85), inset 0 0 0 2px rgb(23 23 26 / 0.35);
	cursor: pointer;
}

.fk-kar-grid__cell input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fk-kar-grid__cell:has(input:checked) {
	background: rgb(255 212 0 / 0.35);
	box-shadow: inset 0 0 0 3px var(--fk-white), inset 0 0 0 6px var(--fk-ink);
}

/* Znak „zaznaczone” niezależny od koloru (stan niesie natywne pole wyboru). */
.fk-kar-grid__cell:has(input:checked)::after {
	content: "✓";
	content: "✓" / "";
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 2px solid var(--fk-ink);
	border-radius: 50%;
	background: var(--fk-white);
	color: var(--fk-ink);
	font-size: 20px;
	font-weight: 700;
}

/* Fokus: podwójny obrys (biały + atrament) — widoczny na każdym tle obrazu. */
.fk-kar-grid__cell:has(input:focus-visible) {
	z-index: 1;
	outline: 3px solid var(--fk-ink);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 6px var(--fk-white), inset 0 0 0 8px var(--fk-ink);
}

.fk-kar-grid__cell:has(input:focus) {
	z-index: 1;
	outline: 3px solid var(--fk-ink);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 6px var(--fk-white), inset 0 0 0 8px var(--fk-ink);
}

/* Prostokąt narysowany myszą (assets/poprawka.js). */
.fk-kar-rect {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	border: 3px dashed var(--fk-ink);
	outline: 2px solid var(--fk-white);
	background: rgb(255 212 0 / 0.2);
	pointer-events: none;
}

.fk-kar-area__summary {
	margin-top: var(--fk-space-2);
	color: var(--fk-ink-soft);
	font-size: 15px;
	text-align: center;
}

.fk-kar-area__summary:empty,
[data-protected-hint]:empty { display: none; }

.fk-kar-area__clear { min-height: 44px; color: var(--fk-ink); }

.fk-kar-revise textarea { font-size: 16px; }

/* Przewoźnicy z wyceny Apaczki (docs/06, 2026-10-29): radia jak „Odbiór”, stan zdaniem pod listą. */
#fk-kar-przewoznik .fk-kar-choices:not(:has(.fk-kar-choice)) { display: none; }
#fk-kar-przewoznik[aria-busy="true"] .fk-kar-choice { opacity: 0.6; }

.fk-kar-retry { margin-bottom: var(--fk-space-4); }

/* .fk-btn ma display: inline-flex, który wygrywa z samym atrybutem hidden. */
.fk-kar-retry[hidden] { display: none; }

/*
 * Odnawianie starych zdjęć (2026-10-29, docs/06): formularz na stronie usługi
 * motywu (blok fk/photo-renewal) i panel zgłoszenia. Formularz stoi poza
 * .fk-kar, więc dostaje te same podstawy (16 px — iOS nie powiększa pól).
 */
.fk-odn {
	color: var(--fk-ink);
	font-size: 16px;
	max-width: 760px;
}

.fk-odn-textarea { min-height: 7em; resize: vertical; }

.fk-odn-pick { display: inline-flex; align-items: center; min-height: 44px; }

.fk-odn-pick:focus-within { outline: 2px solid var(--fk-ink); outline-offset: 2px; }

.fk-odn-file {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name remove";
	padding: var(--fk-space-1) var(--fk-space-1) var(--fk-space-1) var(--fk-space-3);
}

.fk-odn-remove { min-width: 44px; min-height: 44px; }

.fk-odn-progress progress { width: 100%; height: 12px; margin-bottom: var(--fk-space-2); }

.fk-odn-state:empty { display: none; }

.fk-odn-state.is-error { color: var(--fk-error); font-weight: 600; }

.fk-odn-state:focus { outline: 2px solid var(--fk-ink); outline-offset: 2px; }

.fk-odn-form .fk-kar-submit { min-height: 44px; }

@media (max-width: 768px) {
	.fk-odn-form .fk-kar-submit,
	.fk-odn-decision .fk-kar-submit { width: 100%; }
}

.fk-odn-quote__amount { margin: 0 0 var(--fk-space-3); font-size: 28px; font-weight: 700; }
.fk-odn-quote__amount span { color: var(--fk-ink-soft); font-size: 16px; font-weight: 400; }
.fk-odn-quote__comment { margin: 0 0 var(--fk-space-3); }

/* K14 w krótkich wierszach: zdanie, „Wiem, że:”, punkty z wiszącą kreską. */
.fk-odn-k14__line { display: block; }
.fk-odn-k14__line + .fk-odn-k14__line { margin-top: var(--fk-space-2); }
.fk-odn-k14__line--item { padding-left: 1.2em; text-indent: -1.2em; }

/* Opłacone: kwota, data płatności, termin. */
.fk-odn-paid {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--fk-space-1) var(--fk-space-4);
	margin: 0 0 var(--fk-space-3);
}

.fk-odn-paid dt { font-weight: 600; }
.fk-odn-paid dd { margin: 0; }

@media (max-width: 359px) {
	.fk-odn-paid { grid-template-columns: 1fr; }
	.fk-odn-paid dd { margin-bottom: var(--fk-space-2); }
}

.fk-odn-resign { margin-top: var(--fk-space-5); }

.fk-odn-resign > summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: underline;
	cursor: pointer;
}

.fk-odn-resign > summary:focus-visible { outline: 2px solid var(--fk-ink); outline-offset: 2px; }
.fk-odn-resign p { margin: var(--fk-space-2) 0 var(--fk-space-3); }

.fk-odn-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: var(--fk-space-3);
	margin: 0 0 var(--fk-space-5);
	padding: 0;
	list-style: none;
}

.fk-odn-thumbs img,
.fk-odn-thumbs .fk-kar-photo__nothumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 8px;
	object-fit: cover;
}