/* Fotogadżety — strony klienta. Kolory i odstępy z tokenów motywu (docs/02).
   Najpierw telefon: jedna kolumna, przyciski ≥ 44 px, długie nazwy plików
   łamią się zamiast przewijać stronę w bok. */

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

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

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

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

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

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

.fk-gad-step {
	min-width: 0; /* fieldset domyślnie nie kurczy się poniżej treści — bez tego przewijanie w bok na 320 px */
	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-gad-step > legend {
	padding: 0 var(--fk-space-2);
	font-weight: 700;
	font-size: 18px;
}

.fk-gad-product { margin: 0 0 var(--fk-space-2); font-size: 18px; overflow-wrap: anywhere; }
.fk-gad-product__variant { margin: 0 0 var(--fk-space-3); }

.fk-gad-facts {
	margin: 0 0 var(--fk-space-4);
	padding-left: 1.2em;
	color: var(--fk-ink-soft);
	font-size: 15px;
}

.fk-gad-field {
	display: block;
	margin: var(--fk-space-3) 0 var(--fk-space-2);
	font-weight: 600;
}

.fk-gad-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--fk-ink-soft);
	border-radius: var(--fk-radius-btn);
	background: var(--fk-white);
	color: var(--fk-ink);
	font: inherit;
}

.fk-gad-input:focus-visible {
	outline: 3px solid var(--fk-ink);
	outline-offset: 2px;
}

.fk-gad-input[aria-invalid="true"] { border: 2px solid var(--fk-error); }

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

textarea.fk-gad-input { min-height: 96px; resize: vertical; }

.fk-gad-hint {
	margin: var(--fk-space-2) 0 var(--fk-space-3);
	color: var(--fk-ink-soft);
	font-size: 15px;
}

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

.fk-gad-box {
	margin: 0 0 var(--fk-space-5);
	padding: var(--fk-space-4);
	border: 2px solid var(--fk-line);
	border-radius: var(--fk-radius-card);
	background: var(--fk-white);
}

.fk-gad-box p { margin: 0; }
.fk-gad-box p + p,
.fk-gad-box ul { margin-top: var(--fk-space-2); }
.fk-gad-box ul { padding-left: 1.2em; }
.fk-gad-box a { color: var(--fk-ink); }
.fk-gad-box--warn { border-color: var(--fk-warn); }
.fk-gad-box--error { border-color: var(--fk-error); }
.fk-gad-box--ok { border-color: var(--fk-ok); }

.fk-gad-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fk-space-3);
}

.fk-gad-pay { margin: 0 0 var(--fk-space-5); }

/* Projekt do akceptacji. */
.fk-gad-design {
	margin: 0 0 var(--fk-space-6);
	padding: var(--fk-space-5);
	border: 2px solid var(--fk-ink);
	border-radius: var(--fk-radius-card);
	background: var(--fk-white);
}

.fk-gad-design h2 { margin-top: 0; }

.fk-gad-preview { margin: 0 0 var(--fk-space-4); }

.fk-gad-preview img {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 70vh;
	max-height: 70svh;
	margin-inline: auto;
	border: 1px solid var(--fk-line);
	background: var(--fk-surface);
}

.fk-gad-note { margin: 0 0 var(--fk-space-3); overflow-wrap: anywhere; }

.fk-gad-decision { margin: var(--fk-space-4) 0 0; }

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

.fk-gad-decision > summary:focus-visible { outline: 3px solid var(--fk-ink); outline-offset: 2px; }
.fk-gad-decision .fk-btn { margin-top: var(--fk-space-3); }
.fk-gad-box:focus-visible { outline: 3px solid var(--fk-ink); outline-offset: 2px; }

.fk-gad-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--fk-ink);
	font-weight: 600;
}

/* Zdjęcia: miniatura, nazwa, stan, usuń; ostrzeżenie PPI pod spodem. */
.fk-gad-photos {
	display: grid;
	gap: var(--fk-space-3);
	margin: 0 0 var(--fk-space-4);
	padding: 0;
	list-style: none;
}

.fk-gad-photos:empty { display: none; }

.fk-gad-photo {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name remove"
		"thumb status remove"
		"warn warn warn";
	column-gap: var(--fk-space-3);
	align-items: center;
	padding: var(--fk-space-3);
	border: 1px solid var(--fk-line);
	border-radius: var(--fk-radius-btn);
	background: var(--fk-white);
}

.fk-gad-photo img {
	grid-area: thumb;
	width: 64px;
	height: 64px;
	border-radius: 6px;
	background: var(--fk-surface);
	object-fit: cover;
}

.fk-gad-photo__name {
	grid-area: name;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.fk-gad-photo__status {
	grid-area: status;
	color: var(--fk-ink-soft);
	font-size: 15px;
}

.fk-gad-photo.is-error { border: 2px solid var(--fk-error); }
.fk-gad-photo.is-error .fk-gad-photo__status { color: var(--fk-error); font-weight: 600; }
.fk-gad-photo.is-error .fk-gad-photo__status::before { content: "⚠ "; }
.fk-gad-photo.is-low { border: 2px solid var(--fk-warn); }

.fk-gad-photo__remove,
.fk-gad-photo__retry {
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--fk-space-3);
	border: 1.5px solid var(--fk-ink);
	border-radius: var(--fk-radius-btn);
	background: var(--fk-white);
	color: var(--fk-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.fk-gad-photo__remove { grid-area: remove; }

.fk-gad-photo__retry {
	grid-area: warn;
	justify-self: start;
	margin-top: var(--fk-space-2);
}

.fk-gad-photo__remove:focus-visible,
.fk-gad-photo__retry:focus-visible {
	outline: 3px solid var(--fk-ink);
	outline-offset: 2px;
}

.fk-gad-photo__remove:disabled { opacity: 0.6; cursor: wait; }

.fk-gad-photo__warn {
	grid-area: warn;
	margin-top: var(--fk-space-2);
	color: var(--fk-ink);
}

.fk-gad-photo__warn p { margin: 0 0 var(--fk-space-1); font-weight: 600; }

.fk-gad-photos--readonly .fk-gad-photo {
	grid-template-areas: "thumb name name";
}

/* Wybór plików: etykieta-przycisk, samo pole schowane, ale dostępne z klawiatury. */
.fk-gad-upload { position: relative; }

.fk-gad-upload[hidden] { display: none; }

.fk-gad-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.fk-gad-upload__input:focus-visible + .fk-gad-hint,
.fk-gad-upload:focus-within .fk-gad-upload__button {
	outline: 3px solid var(--fk-ink);
	outline-offset: 2px;
}

.fk-gad-upload__button { min-height: 48px; }

.fk-gad-check {
	display: flex;
	gap: var(--fk-space-3);
	align-items: flex-start;
	min-height: 44px;
	padding-block: var(--fk-space-2);
	cursor: pointer;
}

.fk-gad-check a {
	display: inline-block;
	padding-block: 12px;
	margin-block: -12px; /* obszar dotyku ≥ 44 px bez zmiany wyglądu tekstu */
}

.fk-gad-check input {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--fk-ink);
}

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

/* Potwierdzenie „mam prawo do zdjęć” (K4, 2026-10-22): kilka linii tekstu
   pod zdjęciami — odstęp od listy, długie słowa łamane na 320 px. */
.fk-gad-rights {
	margin-top: var(--fk-space-4);
	overflow-wrap: anywhere;
}

.fk-gad-rights input[aria-invalid="true"]:not(:focus-visible) {
	outline: 2px solid var(--fk-error);
	outline-offset: 2px;
}

/* Odbiór albo wysyłka kurierem (G7b, 2026-10-23): dwie opcje jako duże
   wiersze; wybrana ma zaznaczone pole, grubszą ramkę i pogrubiony tekst
   (stan nie tylko kolorem). Bez JS widać oba zestawy pól pod spodem. */
.fk-gad-options {
	display: grid;
	gap: var(--fk-space-2);
	margin: 0 0 var(--fk-space-3);
}

.fk-gad-option {
	align-items: center;
	padding: var(--fk-space-3);
	border: 1px solid var(--fk-ink-soft);
	border-radius: var(--fk-radius-btn);
	overflow-wrap: anywhere;
}

.fk-gad-option:has(input:checked) {
	border-color: var(--fk-ink);
	box-shadow: inset 0 0 0 1px var(--fk-ink);
	font-weight: 700;
}

.fk-gad-option input[aria-invalid="true"]:not(:focus-visible) {
	outline: 2px solid var(--fk-error);
	outline-offset: 2px;
}

.fk-gad-delivery { margin-top: var(--fk-space-4); }
.fk-gad-delivery[hidden] { display: none; }
.fk-gad-delivery__title { margin: 0; font-weight: 700; }

/* Kurier z Apaczki (2026-10-29): przewoźnicy z cenami pod kodem pocztowym.
   Stan wyceny zdaniem (role=status), nie kolorem; w trakcie liczenia radia
   wyłączone. */
.fk-gad-carriers {
	min-width: 0;
	margin: var(--fk-space-2) 0 0;
	padding: 0;
	border: 0;
}

.fk-gad-carriers > legend { padding: 0; }
.fk-gad-carriers .fk-gad-options:empty { display: none; }
.fk-gad-carriers[aria-busy="true"] .fk-gad-option { opacity: 0.6; }
.fk-gad-carriers .fk-gad-hint:empty { display: none; }
.fk-gad-retry { min-height: 44px; margin: 0 0 var(--fk-space-3); }
.fk-gad-retry[hidden] { display: none; }

.fk-gad-summary__line { margin: 0 0 var(--fk-space-2); }

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

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

.fk-gad-submit { margin-top: var(--fk-space-3); }

.fk-gad-placeholder {
	padding: 0 4px;
	background: #FFF3C4;
	font-family: ui-monospace, monospace;
	font-size: 14px;
	overflow-wrap: anywhere;
}

.fk-gad-details {
	display: grid;
	grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
	gap: var(--fk-space-2) var(--fk-space-4);
	margin: 0 0 var(--fk-space-5);
}

.fk-gad-details dt { color: var(--fk-ink-soft); }
.fk-gad-details dd { margin: 0; overflow-wrap: anywhere; }

/* Napis w ramce: widać, co dokładnie pójdzie do druku. */
.fk-gad-inscription {
	padding: var(--fk-space-2) var(--fk-space-3);
	border: 1px dashed var(--fk-ink-soft);
	border-radius: 6px;
	white-space: pre-wrap;
}

.fk-gad-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 479px) {
	.fk-gad-step { padding: var(--fk-space-4); }
	.fk-gad-details { grid-template-columns: minmax(0, 1fr); }
	.fk-gad-details dd { margin-bottom: var(--fk-space-2); }
}

@media (prefers-reduced-motion: reduce) {
	.fk-gad * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}