/* ══════════════════════════════════════════════════════════════════════════
   Generowanie i ekran fragmentu (etap C3).
   Zmienne dziedziczone z kreator.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Scena generowania ──────────────────────────────────────────────────── */

.gp-kreator .gp-generowanie {
	padding: 44px 22px;
	background: var(--gp-sand-2);
	border-radius: var(--gp-radius-lg);
}

.gp-kreator .gp-generowanie__srodek {
	display: flex;
	gap: 46px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 860px;
	margin: 0 auto;
}

/* Biała kartka na piaskowym tle, odcięta cieniem. Ciemna kartka na ciemnym
   tle czytała się jak awaria renderowania. */
.gp-kreator .gp-kartka {
	position: relative;
	width: 200px;
	aspect-ratio: 1 / 1.414;
	padding: 22px 18px;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 18px 42px rgba(13, 31, 53, 0.16), 0 2px 6px rgba(13, 31, 53, 0.08);
	overflow: hidden;
}

.gp-kreator .gp-kartka::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--gp-accent);
}

/* Abstrakcyjne paski, nie tekst — na tym etapie pismo jeszcze nie istnieje,
   więc nie ma czego udawać. */
.gp-kreator .gp-kartka__linia {
	display: block;
	height: 6px;
	margin-bottom: 9px;
	border-radius: 2px;
	background: #e3e6ea;
	opacity: 0;
	transform: translateY(4px);
	animation: gp-wjazd 0.45s ease forwards;
}

.gp-kreator .gp-kartka__linia--k { width: 52%; }
.gp-kreator .gp-kartka__linia--s { width: 88%; }
.gp-kreator .gp-kartka__linia--d { width: 97%; }

.gp-kreator .gp-kartka__linia--n {
	width: 70%;
	height: 9px;
	background: #cbd1d8;
	margin: 15px 0 14px;
}

.gp-kreator .gp-kartka__linia:nth-child(1) { animation-delay: 0.15s; }
.gp-kreator .gp-kartka__linia:nth-child(2) { animation-delay: 0.5s; }
.gp-kreator .gp-kartka__linia:nth-child(3) { animation-delay: 0.9s; }
.gp-kreator .gp-kartka__linia:nth-child(4) { animation-delay: 1.3s; }
.gp-kreator .gp-kartka__linia:nth-child(5) { animation-delay: 1.7s; }
.gp-kreator .gp-kartka__linia:nth-child(6) { animation-delay: 2.1s; }
.gp-kreator .gp-kartka__linia:nth-child(7) { animation-delay: 2.5s; }
.gp-kreator .gp-kartka__linia:nth-child(8) { animation-delay: 2.9s; }

@keyframes gp-wjazd {
	to { opacity: 1; transform: none; }
}

.gp-kreator .gp-generowanie__opis {
	max-width: 380px;
	text-align: left;
}

.gp-kreator .gp-generowanie__tytul {
	margin: 0 0 6px;
	font-family: var(--gp-font-naglowek);
	font-size: clamp(22px, 4vw, 29px);
	color: var(--gp-navy);
}

.gp-kreator .gp-generowanie__czas {
	margin: 0 0 24px;
	font-size: 14.5px;
	color: var(--gp-muted);
}

.gp-kreator .gp-etapy {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 15px;
}

.gp-kreator .gp-etap {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.45;
	color: #8a9099;
}

.gp-kreator .gp-etap__znak {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	border: 1.5px solid #cbd1d8;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: transparent;
}

.gp-kreator .gp-etap__znak svg {
	width: 11px;
	height: 11px;
}

.gp-kreator .gp-etap__tresc {
	flex: 1;
}

.gp-kreator .gp-etap--zrobiony {
	color: var(--gp-muted);
}

.gp-kreator .gp-etap--zrobiony .gp-etap__znak {
	background: var(--gp-accent);
	border-color: var(--gp-accent);
	color: #fff;
}

.gp-kreator .gp-etap--teraz {
	color: var(--gp-navy);
	font-weight: 600;
}

.gp-kreator .gp-etap--teraz .gp-etap__znak {
	border-color: var(--gp-accent);
	border-top-color: transparent;
	animation: gp-obrot 0.9s linear infinite;
}

@keyframes gp-obrot {
	to { transform: rotate(360deg); }
}

/* Pasek nieokreślony tylko przy etapie, którego długości naprawdę nie znamy.
   Procenty byłyby tu zmyślone. */
.gp-kreator .gp-nieokreslony {
	display: block;
	margin-top: 9px;
	height: 3px;
	border-radius: 2px;
	background: #dfd8cb;
	overflow: hidden;
}

.gp-kreator .gp-etap--teraz .gp-nieokreslony::before {
	content: "";
	display: block;
	width: 38%;
	height: 100%;
	border-radius: 2px;
	background: var(--gp-accent);
	animation: gp-suw 1.5s ease-in-out infinite;
}

@keyframes gp-suw {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(300%); }
}

.gp-kreator .gp-generowanie__stopka {
	margin: 24px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gp-muted);
}

.gp-kreator .gp-generowanie__blad {
	margin-top: 20px;
	padding: 14px 16px;
	background: #fcf0ef;
	border-left: 4px solid var(--gp-error);
	border-radius: var(--gp-radius);
}

.gp-kreator .gp-generowanie__blad p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: #7a1f1a;
}

/* ── Ekran fragmentu ────────────────────────────────────────────────────── */

.gp-kreator .gp-odslona {
	padding: 34px 22px 40px;
	background: var(--gp-sand);
	border-radius: var(--gp-radius-lg);
}

.gp-kreator .gp-odslona__gora {
	text-align: center;
	margin-bottom: 26px;
}

.gp-kreator .gp-odslona__tytul {
	margin: 0 0 8px;
	font-family: var(--gp-font-naglowek);
	font-size: clamp(23px, 4.4vw, 30px);
	line-height: 1.25;
	color: var(--gp-navy);
}

.gp-kreator .gp-odslona__pod {
	margin: 0;
	font-size: 14.5px;
	color: var(--gp-muted);
}

.gp-kreator .gp-odslona__tresc {
	display: grid;
	gap: 26px;
	max-width: 1000px;
	margin: 0 auto;
	align-items: start;
}

@media (min-width: 900px) {
	.gp-kreator .gp-odslona__tresc {
		grid-template-columns: 1fr 340px;
	}
}

/* Kartka A4 z cieniem — ma wyglądać na dokument. */
.gp-kreator .gp-a4 {
	background: #fff;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 20px 46px rgba(13, 31, 53, 0.17), 0 2px 8px rgba(13, 31, 53, 0.07);
	animation: gp-wjazd-a4 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

@keyframes gp-wjazd-a4 {
	from { opacity: 0; transform: translateY(20px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

/* Jawna część pisma — jedyna treść pisma w DOM. */
.gp-kreator .gp-a4__jawne {
	padding: 32px 30px 20px;
	font-family: var(--gp-font-naglowek);
	font-size: 14px;
	line-height: 1.85;
	color: #161616;
	white-space: pre-wrap;
}

/* Złota granica odcięcia — rozmycie nie zaczyna się znikąd. */
.gp-kreator .gp-a4__odciecie {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 30px;
	background: linear-gradient(90deg, rgba(168, 122, 32, 0.14), rgba(168, 122, 32, 0.05));
	border-top: 1px solid var(--gp-accent);
	border-bottom: 1px solid rgba(168, 122, 32, 0.28);
	font-family: var(--gp-font-tresc);
	font-size: 11.5px;
	font-weight: 700;
	color: #6c4e10;
}

.gp-kreator .gp-a4__odciecie svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.gp-kreator .gp-a4__odciecie[hidden],
.gp-kreator .gp-zaslona[hidden] {
	display: none;
}

/* Zasłona: obraz z serwera albo paski CSS. W obu wariantach zero treści. */
.gp-kreator .gp-zaslona {
	position: relative;
	max-height: 420px;
	overflow: hidden;
	background: #fff;
}

.gp-kreator .gp-zaslona::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 92%);
	pointer-events: none;
}

.gp-kreator .gp-zaslona__obraz {
	display: block;
	width: 100%;
	height: auto;
}

.gp-kreator .gp-zaslona__obraz[hidden] {
	display: none;
}

.gp-kreator .gp-zaslona__paski {
	padding: 22px 30px 30px;
	/* 10% mniej rozmycia — na prosbe z 23.08.2026. */
	filter: blur(2.34px);
}

.gp-kreator .gp-zaslona__paski[hidden] {
	display: none;
}

.gp-kreator .gp-zaslona__paski span {
	display: block;
	height: 6px;
	margin-bottom: 11px;
	border-radius: 2px;
	background: #d2d7dd;
}

.gp-kreator .gp-a4__info {
	margin: 0;
	padding: 10px 30px 14px;
	font-family: var(--gp-font-tresc);
	font-size: 10.5px;
	color: #8a9099;
	text-align: center;
}

/* ── Karta zakupu ───────────────────────────────────────────────────────── */

.gp-kreator .gp-zakup {
	padding: 26px 24px;
	background: #fff;
	border-radius: var(--gp-radius-lg);
	box-shadow: 0 10px 30px rgba(13, 31, 53, 0.09);
	text-align: left;
}

.gp-kreator .gp-zakup[hidden] {
	display: none;
}

@media (min-width: 900px) {
	.gp-kreator .gp-zakup {
		position: sticky;
		top: 20px;
	}
}

.gp-kreator .gp-zakup__tytul {
	margin: 0 0 16px;
	font-family: var(--gp-font-naglowek);
	font-size: 19px;
	color: var(--gp-navy);
}

.gp-kreator .gp-zakup__lista {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 11px;
	font-size: 14px;
}

.gp-kreator .gp-zakup__lista li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	color: var(--gp-text);
}

.gp-kreator .gp-zakup__lista svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	color: var(--gp-accent);
}

.gp-kreator .gp-zakup__cena {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	border-top: 1px solid var(--gp-hair);
	border-bottom: 1px solid var(--gp-hair);
	margin-bottom: 20px;
	font-size: 13px;
	color: var(--gp-muted);
}

.gp-kreator .gp-zakup__cena strong {
	font-family: var(--gp-font-naglowek);
	font-size: 29px;
	color: var(--gp-navy);
}

.gp-kreator .gp-btn--pelny {
	width: 100%;
}

.gp-kreator .gp-btn--zielony {
	background: #14532d;
	color: #fff;
	box-shadow: none;
}

.gp-kreator .gp-btn--zielony[disabled] {
	background: #d7ded9;
	color: #6d7a72;
}

.gp-kreator .gp-zakup__drobne {
	margin: 12px 0 0;
	text-align: center;
	font-size: 11.5px;
	color: var(--gp-muted);
}

.gp-kreator .gp-zakup__zastrzezenie {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--gp-hair);
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--gp-muted);
}

/* ── Pakiety ────────────────────────────────────────────────────────────── */

.gp-kreator .gp-pakiety {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--gp-hair);
}

.gp-kreator .gp-pakiety__tytul {
	margin: 0 0 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gp-navy);
}

.gp-kreator .gp-pakiety__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.gp-kreator .gp-pakiet {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: baseline;
	gap: 10px;
	padding: 12px 14px;
	border: 1.5px solid var(--gp-field-line);
	border-radius: var(--gp-radius);
	background: var(--gp-field);
	text-decoration: none;
	transition: border-color 0.12s, background 0.12s;
}

.gp-kreator .gp-pakiet:hover,
.gp-kreator .gp-pakiet:focus-visible {
	border-color: var(--gp-accent);
	background: #fff;
}

.gp-kreator .gp-pakiet__ile {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--gp-navy);
}

.gp-kreator .gp-pakiet__cena {
	font-family: var(--gp-font-naglowek);
	font-size: 16px;
	color: var(--gp-navy);
}

.gp-kreator .gp-pakiet__za {
	justify-self: end;
	font-size: 12px;
	color: var(--gp-muted);
	white-space: nowrap;
}

.gp-kreator .gp-pakiety__nota {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--gp-muted);
}

/* ── Kod pakietu ────────────────────────────────────────────────────────── */

.gp-kreator .gp-kod {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--gp-hair);
}

.gp-kreator .gp-kod summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--gp-primary);
	list-style: none;
}

.gp-kreator .gp-kod summary::-webkit-details-marker {
	display: none;
}

.gp-kreator .gp-kod summary::before {
	content: "▸ ";
}

.gp-kreator .gp-kod[open] summary::before {
	content: "▾ ";
}

.gp-kreator .gp-kod__pole {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.gp-kreator .gp-kod__pole .gp-btn {
	flex: 0 0 auto;
	min-height: 52px;
	padding: 0 16px;
	font-size: 14px;
}

.gp-kreator .gp-kod__input {
	font: 600 16px/1.2 ui-monospace, Consolas, monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gp-kreator .gp-kod__info {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #14532d;
}

.gp-kreator .gp-kod__info--blad {
	color: var(--gp-error);
}

.gp-kreator .gp-kod__info[hidden],
.gp-kreator .gp-kod__zgoda[hidden],
.gp-kreator .gp-kod__odzysk[hidden] {
	display: none;
}

.gp-kreator .gp-kod__zgoda {
	margin-top: 14px;
	padding: 14px;
	background: #edf6f1;
	border-radius: var(--gp-radius);
}

.gp-kreator .gp-kod__zgoda label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 12px;
	font-size: 12.5px;
	line-height: 1.55;
	color: #14532d;
	cursor: pointer;
}

.gp-kreator .gp-kod__zgoda input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.gp-kreator .gp-kod__link {
	display: inline-block;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	color: var(--gp-primary);
	text-decoration: underline;
	cursor: pointer;
}

.gp-kreator .gp-kod__odzysk {
	margin-top: 12px;
}

.gp-kreator .gp-zakup__pakiety {
	margin: 18px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gp-muted);
	text-align: center;
}

.gp-kreator .gp-zakup__pakiety strong {
	color: var(--gp-navy);
}

/* ── Po odblokowaniu ────────────────────────────────────────────────────── */

.gp-kreator .gp-odblokowane {
	max-width: 1000px;
	margin: 24px auto 0;
	padding: 20px 24px;
	background: #edf6f1;
	border-left: 4px solid #1a7f4b;
	border-radius: var(--gp-radius);
}

.gp-kreator .gp-odblokowane[hidden] {
	display: none;
}

.gp-kreator .gp-odblokowane__tekst {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #14532d;
}