/* Ekran logowania Knopka.
 *
 * Moduł przeniesiony z profiart-shop razem z widokami — zmieniona jest tylko
 * oprawa: zdjęcie na całe okno i biała karta z formularzem na środku, jak na
 * dawnym ekranie z LoginPress. Barwy i krój z reszty serwisu.
 */

:root {
	/* Tło karty. Etykiety pól zasłaniają nim obramowanie, więc musi się
	   zgadzać z tym, na czym leży formularz. */
	--pa-bg: #fff;
	--pa-page: #1b1b1b;
	--pa-red: #c20403;
	--pa-red-dark: #a10302;
	--pa-ink: #1d2327;
	--pa-black: #000;
	--pa-grey: #6b7280;
	--pa-grey-help: #667080;
	--pa-dark-link: #13171f;
	--pa-foot: #0f172a;
	/* Obramowanie pola w spoczynku.
	   W projekcie jest to #d1d5db, ale na tle #f6f7f7 daje kontrast 1,45:1
	   — kreska ledwo widoczna, a pionowe krawędzie, krótkie i cienkie, giną
	   wtedy zupełnie. Krok ciemniej daje 1,8:1: pole widać, a jasności
	   formularza to nie zmienia. Wymagane dla pól 3:1 oznaczałoby dopiero
	   #8e939b, czyli widocznie ciemniejszą ramkę — to decyzja projektowa,
	   nie poprawka. */
	--pa-border: #c2c8d0;
	--pa-seg-bg: #f3f4f6;
	--pa-chip-bg: #f8f9fa;
	--pa-chip-border: #e5ebf0;
	--pa-alert-bg: #fff6f5;
	--pa-alert-border: #f0bfba;
	--pa-alert-ink: #9e2926;

	/* Wariantu potwierdzenia nie ma w projekcie — te trzy barwy są zielonym
	   odpowiednikiem czerwonych wyżej. Zieleń przy tej samej nasyconości co
	   czerwień wygląda bledziej, niż jest, bo oko rozdziela ją słabiej od
	   bieli; stąd ramka i tekst o stopień mocniejsze niż sam przeliczony
	   odpowiednik. */
	--pa-ok-bg: #edf8f1;
	--pa-ok-border: #8fcca6;
	--pa-ok-ink: #11643a;

	--pa-font: "pragmatica-extended", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Czas i krzywa zamiany sposobu logowania.
	   Jedna para na biały wskaźnik, napisy zakładek, wejście panelu i wysokość
	   ramki — gdyby każde szło własnym tempem, zamiana rozjechałaby się na
	   cztery osobne ruchy. Krzywa rusza żwawo i długo wyhamowuje. */
	--pa-swap: .38s;
	--pa-ease: cubic-bezier(.32, .72, 0, 1);
}

body.profiart-auth {
	margin: 0;
	background: var(--pa-page);
	color: var(--pa-ink);
	font-family: var(--pa-font);
	-webkit-font-smoothing: antialiased;
}

body.profiart-auth *,
body.profiart-auth *::before,
body.profiart-auth *::after {
	box-sizing: border-box;
}

/* Zdjęcie na całe okno.
   Kadr trzyma środek, bo na zdjęciu postać stoi w środku — tak samo jak
   karta. Gdy zdjęcia nie ma, zostaje ciemne tło strony. */
.pa {
	display: flex;
	min-height: 100vh;
	background-color: var(--pa-page);
	background-image: var(--pa-art, none);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Karta zaczepiona u góry, nie wyśrodkowana w pionie.
   Przy zamianie sposobu logowania formularz zmienia wysokość o pole hasła —
   wyśrodkowana karta podskakiwałaby wtedy górą razem z logo. Zaczepiona
   rośnie tylko w dół. */
.pa__form {
	display: flex;
	flex: 1 1 100%;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(16px, 4vh, 40px) 16px 48px;
}

.pa__inner {
	width: 100%;
	max-width: 400px;
	padding: 32px 24px 28px;
	border-radius: 8px;
	background: var(--pa-bg);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

/* Logo i nagłówek */

.pa__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-bottom: 28px;
}

.pa__logo {
	display: block;
	width: 136px;
	height: auto;
}

.pa__title {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	line-height: normal;
	color: #000;
	text-align: center;
}

/* Treść */

.pa-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.pa-body--center {
	gap: 20px;
	text-align: center;
}

.pa-heading {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--pa-ink);
}

.pa-lead {
	margin: 0;
	width: 100%;
	font-size: 14px;
	line-height: 1.3;
	color: var(--pa-ink);
	text-align: center;
}

/* Przełącznik sposobu logowania.
   Odnośniki, nie przyciski: bez JavaScriptu przeładowują stronę z właściwym
   parametrem, a skrypt zamienia je w przełączanie bez przeładowania. */

.pa-seg {
	position: relative;
	display: flex;
	gap: 1px;
	width: 305px;
	max-width: 100%;
	padding: 2px;
	background: var(--pa-seg-bg);
	border-radius: 10px;
}

/* Biały prostokąt pod aktywną zakładką. Jeden element, który się przesuwa —
   gdyby tłem była sama zakładka, przeskakiwałby z miejsca na miejsce. */
.pa-seg__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(50% - 2.5px);
	height: calc(100% - 4px);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1);
	transition: transform var(--pa-swap) var(--pa-ease);
}

.pa-seg[data-method="password"] .pa-seg__thumb {
	transform: translateX(calc(100% + 1px));
}

@media (prefers-reduced-motion: reduce) {
	.pa-seg__thumb,
	.pa-seg__item,
	.pa-back a,
	.pa-back__button,
	.pa-swap__item,
	.pa-collapse {
		transition: none;
	}
}

.pa-seg__item {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 50%;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 9px;
	border-radius: 8px;
	color: var(--pa-grey);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .15px;
	line-height: 1;
	text-decoration: none;
	transition: color var(--pa-swap) var(--pa-ease);
}

.pa-seg__item.is-active {
	color: var(--pa-ink);
}

/* Tej zakładki, na której się nie stoi, projekt nie opisuje osobno — bierzemy
   tę samą regułę co dla odnośnika powrotnego: szary ciemnieje do czarnego.
   Bez podkreślenia, bo to zakładka, nie odnośnik w zdaniu. */
.pa-seg__item:not(.is-active):hover,
.pa-seg__item:not(.is-active):focus-visible {
	color: var(--pa-ink);
}

/* Zamiana sposobu logowania.
   Formularz jest jeden i przy zamianie rusza się tylko to, co się różni:
   zdanie nad polami, pole hasła z odnośnikiem do resetu i napis na przycisku.

   Teksty, które się zmieniają, leżą jeden na drugim w tej samej komórce
   siatki — przenikają się w miejscu, a wysokość bloku nie drgnie. */

.pa-swap {
	display: grid;
	width: 100%;
}

.pa-swap__item {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	text-align: center;
	transition: opacity .18s ease, visibility 0s linear .18s;
}

.pa-swap__item.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .22s ease .08s, visibility 0s;
}

.pa-swap--lead .pa-swap__item {
	color: var(--pa-ink);
	font-size: 14px;
	line-height: 1.5;
}

/* Odstępy wprost z makiety „Login Form": 32 px pod zdaniem, 12 px między
   polami i nad przyciskiem. Przy zwiniętym haśle zostaje 12 px marginesu
   bloku plus 12 px przycisku, czyli projektowe 24 px między adresem
   a przyciskiem — i to też się płynnie przesuwa. */
.pa-login > * + * {
	margin-top: 12px;
}

.pa-login > .pa-swap--lead + * {
	margin-top: 32px;
}

.pa-login > .pa-btn {
	margin-top: 12px;
}

/* Komunikaty nad przyciskiem — jeden blok w stałym miejscu, z tym samym
   odstępem nad i pod nim bez względu na to, czy pole hasła jest rozwinięte. */
.pa-login > .pa-notices {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

/* „~", nie „+": między nimi stoją ukryte pola z nonce'ami. */
.pa-login > .pa-notices ~ .pa-btn {
	margin-top: 16px;
}

/* Pole hasła z odnośnikiem do resetu — jedyny kawałek, który przyjeżdża
   i odjeżdża. Zwinięcie jest stanem domyślnym, a klasa go otwiera: serwer
   wypisuje to samo, co potem przestawia skrypt, więc bez skryptu przełącznik
   przeładowuje stronę i wychodzi na to samo.

   Wysokość w stanie otwartym przejmuje skrypt, bo „auto" nie da się
   animować. Odstęp nad polem siedzi w środku bloku, żeby zwijał się razem
   z nim. */
.pa-collapse {
	width: 100%;
	height: 0;
	margin-top: 12px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: height var(--pa-swap) var(--pa-ease), margin-top var(--pa-swap) var(--pa-ease), opacity .2s ease, visibility 0s linear var(--pa-swap);
}

.pa-collapse.is-open {
	height: auto;
	margin-top: 0;
	opacity: 1;
	visibility: visible;
	transition: height var(--pa-swap) var(--pa-ease), margin-top var(--pa-swap) var(--pa-ease), opacity .26s ease .06s, visibility 0s;
}

.pa-collapse__inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 12px;
}

/* Formularz */

.pa-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Formularz logowania odstępów siatki nie używa — liczy je marginesami (reguły
   przy „.pa-login" wyżej), bo zwinięte pole hasła ma wysokość zero, a odstęp
   siatki należałby mu się mimo to i zostałaby po nim dziura.

   Zerowanie stoi tutaj, zaraz za „.pa-form", a nie przy tamtych regułach:
   jedno i drugie to dwie klasy, więc o wyniku decyduje kolejność w pliku. */
.pa-form.pa-login {
	gap: 0;
}

/* Odzyskiwanie ma jedno pole i przycisk — w projekcie dzieli je 24 px,
   z czego 8 px daje górny margines przycisku. */
.pa-form.lost_reset_password {
	gap: 16px;
}

/* Pole z etykietą „pływającą".
   Etykieta siedzi na obramowaniu i zasłania je kawałkiem tła strony. Puste pole
   pokazuje ją w środku jako podpowiedź — przełącza to :placeholder-shown,
   dzięki czemu działa bez JavaScriptu. */

.pa-field {
	position: relative;
	width: 100%;
}

.pa-field__input {
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--pa-border);
	border-radius: 4px;
	background: transparent;
	color: var(--pa-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: normal;
	box-shadow: none;
}

.pa-field__input::placeholder {
	color: var(--pa-grey);
	opacity: 1;
}

/* Ramka ciemnieje, kiedy w polu coś jest albo stoi w nim kursor — tak opisuje
   to projekt („Default: empty gray; Filled: dark after blur"). Obwódki wokół
   pola nie ma: w projekcie jej nie ma, a odsunięta o piksel wyglądała jak
   przypadek, nie jak decyzja.

   Przy kursorze dochodzi cień grubości piksela, położony dokładnie na ramce.
   Nie odstaje od pola i nie przesuwa układu, a jest po to, żeby wejście
   tabulatorem w pole, które już ma treść (czyli ciemną ramkę), też było
   widoczne. */
.pa-field__input:focus,
.pa-field__input:not(:placeholder-shown) {
	border-color: var(--pa-ink);
}

.pa-field__input:focus {
	outline: none;
	box-shadow: 0 0 0 1px var(--pa-ink);
}

.pa-field__label {
	position: absolute;
	top: -6px;
	left: 10px;
	padding: 0 8px;
	background: var(--pa-bg);
	color: var(--pa-ink);
	font-size: 12px;
	line-height: 1;
	pointer-events: none;
	transition: top .12s ease, font-size .12s ease, color .12s ease;
}

/* Puste i nieaktywne: etykieta wraca do środka i udaje podpowiedź. */
.pa-field__input:placeholder-shown:not(:focus) + .pa-field__label {
	top: 18px;
	font-size: 15px;
	color: var(--pa-grey);
}


.pa-recover {
	margin: 0;
	text-align: right;
}

.pa-recover a {
	color: var(--pa-foot);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.2;
	text-decoration: underline;
}

/* Przycisk główny */

.pa-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	margin: 8px 0 0;
	padding: 0 16px;
	border: 1px solid var(--pa-red);
	border-radius: 8px;
	background: var(--pa-red);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease;
}

.pa-btn:hover,
.pa-btn:focus {
	background: var(--pa-red-dark);
	border-color: var(--pa-red-dark);
	color: #fff;
}

.pa-btn:focus-visible {
	outline: 3px solid rgba(194, 4, 3, .3);
	outline-offset: 2px;
}

/* Ten sam przycisk jako odnośnik. Na ekranach „Link wysłany" i „Link
   nieaktywny" stoi przycisk „Wróć do logowania", a nie ma tam czego
   wysyłać — to zwykłe przejście pod adres. */
.pa-btn--link {
	text-decoration: none;
}

/* Stopka formularza */

.pa-foot {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin: 16px 0 0;
	color: var(--pa-foot);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.2;
}

.pa-foot a {
	color: inherit;
	text-decoration: underline;
}

/* Odnośniki na dole karty: powrót do serwisu i polityka prywatności. */

.pa-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--pa-chip-border);
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
}

.pa-links a {
	color: var(--pa-foot);
	text-decoration: none;
}

.pa-links a:hover,
.pa-links a:focus-visible {
	color: #000;
	text-decoration: underline;
}

/* Adres w ramce — ekran „Sprawdź swoją pocztę" */

.pa-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--pa-chip-border);
	border-radius: 8px;
	background: var(--pa-chip-bg);
	color: var(--pa-dark-link);
	font-size: 15px;
	font-weight: 500;
}

/* Pomoc pod formularzem */

.pa-help {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	line-height: 1.4;
}

.pa-help__title {
	margin: 0;
	color: var(--pa-grey-help);
}

/* „Sprawdź folder spam lub" i odnośnik stoją w jednej linii — tak jest
   w projekcie. Na bardzo wąskim ekranie wolno im się złamać. */
.pa-help__row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	color: var(--pa-grey);
}

/* Zdanie i adres pod nim trzymają się bliżej niż reszta bloków. */
.pa-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.pa-inline {
	display: inline;
	margin: 0;
}

.pa-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pa-dark-link);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}

/* Odnośniki, które już są podkreślone, na najechaniu tylko ciemnieją — to
   samo, co dzieje się z odnośnikiem powrotnym. */
.pa-link:hover,
.pa-link:focus-visible {
	color: #000;
}

.pa-link[disabled] {
	color: var(--pa-grey);
	text-decoration: none;
	cursor: default;
}

.pa-link[disabled]:hover {
	color: var(--pa-grey);
}

.pa-foot a:hover,
.pa-foot a:focus-visible,
.pa-recover a:hover,
.pa-recover a:focus-visible {
	color: #000;
}

/* Powrót do logowania */

.pa-back {
	margin: 12px 0 0;
}

.pa-back a,
.pa-back__button {
	transition: color .16s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	padding: 0 12px;
	border: 0;
	background: none;
	color: var(--pa-grey);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.pa-back__icon {
	display: block;
	flex: none;
}

/* Najechanie: szary → czarny, napis podkreślony, strzałka zmienia kolor razem
   z nim (bierze go z currentColor). Podkreślenie siedzi na <span>, a nie na
   całym odnośniku — inaczej kreska przeszłaby i pod strzałką. */
.pa-back a:hover,
.pa-back a:focus-visible,
.pa-back__button:hover,
.pa-back__button:focus-visible {
	color: var(--pa-ink);
}

.pa-back a:hover span,
.pa-back a:focus-visible span,
.pa-back__button:hover span,
.pa-back__button:focus-visible span {
	text-decoration: underline;
}

/* Drugi składnik: sześć pól na cyfry */

.pa-form--otp {
	gap: 10px;
	align-items: center;
}

.pa-otp__label {
	margin: 0;
	width: 100%;
	color: var(--pa-ink);
	font-size: 12px;
	font-weight: 500;
	text-align: center;
}

.pa-otp {
	display: flex;
	justify-content: center;
	gap: 12px;
	width: 100%;
}

.pa-otp__box {
	width: 52px;
	height: 56px;
	padding: 0;
	border: 1px solid var(--pa-border);
	border-radius: 8px;
	background: #fff;
	color: var(--pa-ink);
	font-family: inherit;
	font-size: 22px;
	font-weight: 500;
	text-align: center;
}

/* To samo co w polach tekstowych: ramka na ramce, zero obwódki obok. */
.pa-otp__box:focus {
	border-color: var(--pa-ink);
	outline: none;
	box-shadow: 0 0 0 1px var(--pa-ink);
}

.pa-btn--otp {
	height: 48px;
	font-size: 15px;
}

/* Komunikaty */

.pa-alert {
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--pa-chip-border);
	border-radius: 8px;
	background: #fff;
	color: var(--pa-ink);
	font-size: 12px;
	line-height: normal;
	text-align: left;
}

.pa-alert--error {
	border-color: var(--pa-alert-border);
	background: var(--pa-alert-bg);
	color: var(--pa-alert-ink);
}

.pa-alert--success {
	border-color: var(--pa-ok-border);
	background: var(--pa-ok-bg);
	color: var(--pa-ok-ink);
}

.pa-alert p {
	margin: 0;
}

@media (min-width: 1024px) {
	.pa__inner {
		padding: 36px 40px 32px;
	}

	.pa-field__input {
		height: 50px;
		font-size: 14px;
	}

	.pa-field__input:placeholder-shown:not(:focus) + .pa-field__label {
		top: 18px;
		font-size: 14px;
	}

	.pa-seg__item {
		height: 36px;
	}

	.pa-lead {
		line-height: 1.5;
	}
}

/* Na telefonie zdjęcie zostaje, ale karta zasłania prawie całą szerokość —
   kadr przesuwamy w prawo, żeby spod karty wystawała twarz, a nie mikrofon. */
@media (max-width: 640px) {
	.pa {
		background-position: 70% top;
	}

	.pa__inner {
		padding: 28px 20px 24px;
	}

	.pa-otp__box {
		width: 44px;
		height: 52px;
	}
}

@media (max-width: 400px) {
	.pa-otp {
		gap: 8px;
	}

	.pa-otp__box {
		width: 100%;
		height: 52px;
		font-size: 20px;
	}
}