/*
 * ---------------------------------------------------------------------------
 * Konto dla gościa: strona rejestracji i logowanie na "Moje konto".
 * Wymiary przez jednostkę --u (tokens.css): poniżej 900px wartości z ramki
 * mobile (360), od 900px z ramki desktop (1728).
 *
 * Rejestracja: Figma TIERE_DESKTOP_rejestracja / TIERE_mobile_shop_rejestracja
 * (page-rejestracja.php). Logowanie nie ma własnej ramki w Figmie - bierze
 * typografię, pola, przyciski i linki z sekcji "Moje konto" projektu koszyka
 * (cart.css, .cart-account), a położenie tytułu, kolumny formularza
 * i zdjęcia ze strony rejestracji, żeby oba widoki konta były ze sobą
 * zgodne (woocommerce/myaccount/form-login.php, wrapper z index.php).
 * Zdjęcie logowania to załącznik z biblioteki mediów (inc/account.php).
 *
 * Pozycje podane w komentarzach to współrzędne z ramek Figmy.
 * ---------------------------------------------------------------------------
 */

/* Mobile: tytuł 13/14.29 w punkcie 17,77 (27px pod nagłówkiem strony);
   pierwsza etykieta na y 119; formularz w polu 19-340px. */
.account-page {
	padding: calc(27 * var(--u)) 0 calc(40 * var(--u));
	color: var(--color-ink);
}

.account-page__title {
	margin: 0 0 calc(27.71 * var(--u)) calc(17 * var(--u));
	font-size: calc(13 * var(--u));
	font-weight: var(--font-weight-bold);
	line-height: calc(14.29 * var(--u));
	text-transform: uppercase;
}

.account-page .account-form,
.account-page .account-form__links,
.account-page .account-page__notices,
.account-page .woocommerce-notices-wrapper,
.account-page .woocommerce-ResetPassword,
.account-page .woocommerce > p {
	margin-right: calc(20 * var(--u));
	margin-left: calc(19 * var(--u));
}

/* Odstępy wstawione blokami w treści strony "Moje konto" (2 x 100px) nie
   należą do tego układu; treść strony w bazie zostaje bez zmian. */
.account-page .wp-block-spacer {
	display: none;
}

/*
 * Pola: etykieta 8/26, pod nią pole z samą dolną linią (szara, 0.5px na
 * mobile). Podpowiedź jasnoszara (#d9d9d9) w rozmiarze z projektu; wpisywany
 * tekst ma na mobile co najmniej 16px (ustalona zasada dla pól formularzy -
 * inaczej iPhone przybliża stronę po dotknięciu pola). Mobile wprost
 * z Figmy: w pierwszym polu wiersz tekstu stoi tuż pod etykietą,
 * w kolejnych 11px niżej; 19px od linii do następnej etykiety.
 */
.account-form {
	margin-top: 0;
	margin-bottom: 0;
}

/* Domyślny arkusz WooCommerce rysuje wokół formularza logowania ramkę
   z odstępami i ustawia przycisk jako pływający - tu nie obowiązuje. */
.account-page .woocommerce form.account-form {
	width: auto;
	max-width: none;
	margin: 0 calc(20 * var(--u)) 0 calc(19 * var(--u));
	padding: 0;
	border: 0;
	border-radius: var(--radius-0);
}

.account-page .woocommerce .account-form .account-form__button {
	float: none;
	margin-right: 0;
}

.account-form__field {
	margin: calc(18.5 * var(--u)) 0 0;
}

.account-form__field:first-of-type {
	margin-top: 0;
}

.account-form__field label {
	display: block;
	font-size: calc(8 * var(--u));
	line-height: calc(26 * var(--u));
}

.account-form__field input {
	display: block;
	box-sizing: content-box;
	width: 100%;
	height: calc(26 * var(--u));
	margin: calc(11 * var(--u)) 0 0;
	padding: 0 0 calc(5 * var(--u));
	border: 0;
	border-bottom: calc(0.5 * var(--u)) solid var(--color-muted);
	border-radius: var(--radius-0);
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: max(16px, calc(8 * var(--u)));
	line-height: calc(26 * var(--u));
	color: var(--color-ink);
}

.account-form__field:first-of-type input {
	margin-top: 0;
}

.account-form__field input::placeholder {
	font-size: calc(8 * var(--u));
	color: var(--color-panel-gray);
	opacity: 1;
}

.account-form__field input:focus-visible {
	border-bottom-color: var(--color-ink);
}

/* Autouzupełnianie przeglądarki nie zamalowuje pola własnym tłem. */
.account-form__field input:-webkit-autofill {
	-webkit-text-fill-color: var(--color-ink);
	box-shadow: 0 0 0 1000px var(--color-cream) inset;
}

/* Miernik siły hasła WooCommerce (pojawia się w trakcie wpisywania hasła
   przy rejestracji i resecie) oraz jego podpowiedź. */
.account-page .woocommerce-password-strength,
.account-page .woocommerce-password-hint {
	display: block;
	margin: calc(4 * var(--u)) 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: calc(8 * var(--u));
	line-height: calc(11 * var(--u));
	text-align: left;
	color: var(--color-muted);
}

.account-page .woocommerce-password-strength.short,
.account-page .woocommerce-password-strength.bad {
	color: var(--color-red-dark);
}

/*
 * Pole wyboru: kwadrat z cienką ciemną ramką bez zaokrągleń, tekst obok
 * (mobile: kwadrat 15.23px, tekst 8/11 od x 47.35, 2px powyżej kwadratu).
 * Natywny checkbox z własnym wyglądem - zaznaczenie rysuje tło.
 */
.account-form__check {
	display: flex;
	align-items: flex-start;
	gap: calc(13.12 * var(--u));
	margin: calc(30.5 * var(--u)) 0 0;
	font-size: calc(8 * var(--u));
	line-height: calc(11 * var(--u));
}

.account-form__check input {
	flex: none;
	box-sizing: border-box;
	width: calc(15.23 * var(--u));
	height: calc(15.23 * var(--u));
	margin: calc(2 * var(--u)) 0 0;
	border: calc(0.42 * var(--u)) solid var(--color-ink);
	border-radius: var(--radius-0);
	background: transparent center / 66% no-repeat;
	cursor: pointer;
	appearance: none;
}

.account-form__check input:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath fill='%231e1e1c' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
}

.account-form__check input:focus-visible {
	outline: 1px solid var(--color-ink);
	outline-offset: 2px;
}

.account-form__check label {
	cursor: pointer;
}

.account-form__check a {
	text-decoration: underline;
}

/* Informacja WooCommerce o przetwarzaniu danych pod polem akceptacji
   (poza projektem Figmy): drobny tekst w kolumnie formularza. */
.account-form .woocommerce-privacy-policy-text {
	margin: calc(10 * var(--u)) 0 0;
	font-size: calc(8 * var(--u));
	line-height: calc(11 * var(--u));
}

.account-form .woocommerce-privacy-policy-text p {
	margin: 0;
}

.account-form .woocommerce-privacy-policy-text a {
	text-decoration: underline;
}

/* Przyciski: bazowy przycisk projektu na całą szerokość kolumny (321x38).
   Rejestracja: 38px pod tekstem akceptacji (y 441). */
.account-form__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(38 * var(--u));
	margin: calc(38 * var(--u)) 0 0;
	padding: 0 calc(7.45 * var(--u));
	border-radius: var(--radius-0);
	background-color: var(--color-brand-red);
	color: var(--color-white);
	font-size: calc(9.646 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: calc(16.69 * var(--u));
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.account-form__button:hover,
.account-form__button:focus-visible {
	background-color: var(--color-ink);
	color: var(--color-white);
}

/* Przycisk drugorzędny ("Załóż konto" na stronie logowania): przezroczyste
   tło, ciemny tekst i ramka 1px; po najechaniu i w fokusie czerwony
   z białym tekstem. Wymiary, typografia i odstępy jak w przycisku głównym. */
.account-form__button--secondary {
	box-sizing: border-box;
	border: 1px solid var(--color-ink);
	background-color: transparent;
	color: var(--color-ink);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.account-form__button--secondary:hover,
.account-form__button--secondary:focus-visible {
	border-color: var(--color-brand-red);
	background-color: var(--color-brand-red);
	color: var(--color-white);
}

/* WooCommerce wyłącza przycisk, dopóki hasło jest zbyt słabe. */
.account-form__button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* Logowanie (wg koszyka): przycisk 30.5px pod polem "Zapamiętaj mnie",
   drugi przycisk 15px pod pierwszym, pod nimi linki 8/26 z szewronem. */
.account-form--login .account-form__check {
	margin-top: calc(18.5 * var(--u));
}

.account-form--login .account-form__button {
	margin-top: calc(30.5 * var(--u));
}

.account-form--login .account-form__button + .account-form__button {
	margin-top: calc(15 * var(--u));
}

.account-form__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: calc(15 * var(--u));
	margin-bottom: 0;
}

.account-form__link {
	display: inline-flex;
	align-items: center;
	font-size: calc(8 * var(--u));
	line-height: calc(26 * var(--u));
	color: var(--color-ink);
}

.account-form__link::after {
	content: "";
	flex: none;
	width: calc(3.5 * var(--u));
	height: calc(3.5 * var(--u));
	margin-left: calc(10 * var(--u));
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.account-form__link:hover,
.account-form__link:focus-visible {
	text-decoration: underline;
}

/*
 * Komunikaty WooCommerce (błąd logowania, błąd rejestracji, potwierdzenia):
 * zwykły tekst w typografii strony nad formularzem, błąd ciemnoczerwony -
 * tak jak komunikat logowania w koszyku.
 */
.account-page .account-page__notices,
.account-page .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: calc(16 * var(--u));
}

.account-page .woocommerce-error,
.account-page .woocommerce-message,
.account-page .woocommerce-info {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
	font-size: calc(8 * var(--u));
	line-height: calc(13.6 * var(--u));
	color: var(--color-ink);
}

.account-page .woocommerce-error {
	color: var(--color-red-dark);
}

.account-page .woocommerce-error::before,
.account-page .woocommerce-message::before,
.account-page .woocommerce-info::before {
	content: none;
}

.account-page .woocommerce-error a,
.account-page .woocommerce-message a,
.account-page .woocommerce-info a {
	text-decoration: underline;
}

/*
 * Reset hasła (formularze WooCommerce "Zapomniane hasło" i "Nowe hasło"):
 * bez własnego projektu, te same pola i przycisk co logowanie.
 */
.account-page .woocommerce > p,
.account-page .woocommerce-ResetPassword > p:not(.form-row) {
	font-size: calc(8 * var(--u));
	line-height: calc(13.6 * var(--u));
}

.account-page .woocommerce-ResetPassword .form-row {
	float: none;
	width: auto;
	margin: calc(18.5 * var(--u)) 0 0;
	padding: 0;
}

.account-page .woocommerce-ResetPassword label {
	display: block;
	font-size: calc(8 * var(--u));
	line-height: calc(26 * var(--u));
}

.account-page .woocommerce-ResetPassword .password-input {
	display: block;
}

.account-page .woocommerce-ResetPassword .show-password-input {
	display: none;
}

.account-page .woocommerce-ResetPassword input.input-text {
	display: block;
	box-sizing: content-box;
	width: 100%;
	height: calc(26 * var(--u));
	margin: 0;
	padding: 0 0 calc(5 * var(--u));
	border: 0;
	border-bottom: calc(0.5 * var(--u)) solid var(--color-muted);
	border-radius: var(--radius-0);
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: max(16px, calc(8 * var(--u)));
	line-height: calc(26 * var(--u));
	color: var(--color-ink);
}

.account-page .woocommerce-ResetPassword input.input-text:focus-visible {
	border-bottom-color: var(--color-ink);
}

.account-page .woocommerce-ResetPassword button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(38 * var(--u));
	margin: calc(12 * var(--u)) 0 0;
	padding: 0 calc(7.45 * var(--u));
	border: 0;
	border-radius: var(--radius-0);
	background-color: var(--color-brand-red);
	color: var(--color-white);
	font-size: calc(9.646 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: calc(16.69 * var(--u));
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.account-page .woocommerce-ResetPassword button.button:hover,
.account-page .woocommerce-ResetPassword button.button:focus-visible {
	background-color: var(--color-ink);
}

/*
 * Widoki ze zdjęciem (rejestracja i logowanie), mobile: zdjęcie 360x414 na
 * całą szerokość, 44px pod ostatnim elementem formularza (rejestracja:
 * y 523), dochodzi do stopki. Zdjęcie wypełnia pole bez deformacji.
 */
.account-page--split {
	padding-bottom: 0;
}

.account-page__media {
	margin: calc(44 * var(--u)) 0 0;
}

.account-page__media img {
	display: block;
	width: 100%;
	height: calc(414 * var(--u));
	object-fit: cover;
}

/*
 * ---------------------------------------------------------------------------
 * Desktop: kompozycja 1728px (wyśrodkowana na szerszych oknach). Tytuł
 * 44/50 od x 67, formularz x 70-814, pierwsza etykieta 82px pod tytułem;
 * zdjęcie od x 867 do prawej krawędzi, y 90-1057 (od razu pod nagłówkiem
 * strony). W widokach ze zdjęciem blok formularza jest wyśrodkowany
 * w pionie względem zdjęcia (ustalenie z 8.10.2026) - w ramce Figmy tytuł
 * rejestracji stoi na y 298, odstępy wewnątrz bloku są z Figmy.
 * ---------------------------------------------------------------------------
 */
@media (min-width: 900px) {
	.account-page {
		max-width: calc(1728 * var(--u));
		margin-inline: auto;
		padding: calc(208 * var(--u)) 0 calc(110 * var(--u));
	}

	.account-page__title {
		margin: 0 0 calc(82 * var(--u)) calc(67 * var(--u));
		font-size: calc(44 * var(--u));
		line-height: calc(50 * var(--u));
	}

	.account-page .account-form,
	.account-page .account-form__links,
	.account-page .account-page__notices,
	.account-page .woocommerce-notices-wrapper,
	.account-page .woocommerce-ResetPassword,
	.account-page .woocommerce > p {
		width: calc(744 * var(--u));
		margin-right: 0;
		margin-left: calc(70 * var(--u));
	}

	.account-page .woocommerce form.account-form {
		width: calc(744 * var(--u));
		margin: 0 0 0 calc(70 * var(--u));
	}

	/* Pola: etykieta 18/26, wiersz tekstu 26px 11px pod etykietą, linia 1px;
	   49px od linii do następnej etykiety. */
	.account-form__field {
		margin-top: calc(49 * var(--u));
	}

	.account-form__field label {
		font-size: calc(18 * var(--u));
	}

	.account-form__field input,
	.account-form__field:first-of-type input {
		margin-top: calc(11 * var(--u));
		border-bottom-width: 1px;
		font-size: calc(18 * var(--u));
	}

	.account-form__field input::placeholder {
		font-size: calc(18 * var(--u));
	}

	.account-page .woocommerce-password-strength,
	.account-page .woocommerce-password-hint {
		margin-top: calc(8 * var(--u));
		font-size: calc(14 * var(--u));
		line-height: calc(20 * var(--u));
	}

	/* Pole wyboru: kwadrat 36px z ramką 1px (y 776), tekst 18/26 od x 137,
	   4px powyżej kwadratu. */
	.account-form__check {
		gap: calc(31 * var(--u));
		margin-top: calc(41 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.account-form__check input {
		width: calc(36 * var(--u));
		height: calc(36 * var(--u));
		margin-top: calc(4 * var(--u));
		border-width: 1px;
	}

	.account-form .woocommerce-privacy-policy-text {
		margin-top: calc(20 * var(--u));
		font-size: calc(14 * var(--u));
		line-height: calc(20 * var(--u));
	}

	/* Przycisk 746x62 w punkcie 65,875: 5px w lewo od kolumny pól i 2px
	   szerszy od niej, 51px pod tekstem akceptacji - tak jak w projekcie. */
	.account-form__button {
		width: calc(746 * var(--u));
		min-height: calc(62.32 * var(--u));
		margin: calc(51 * var(--u)) 0 0 calc(-5 * var(--u));
		padding: 0 calc(20.39 * var(--u));
		color: var(--color-cream);
		font-size: calc(20 * var(--u));
		line-height: calc(45.68 * var(--u));
	}

	.account-form__button:hover,
	.account-form__button:focus-visible {
		color: var(--color-cream);
	}

	.account-form__button--secondary {
		color: var(--color-ink);
	}

	.account-form__button--secondary:hover,
	.account-form__button--secondary:focus-visible {
		color: var(--color-white);
	}

	/* Logowanie (wg koszyka): przycisk 63px pod polem, drugi 24.68px niżej,
	   linki 18/26. */
	.account-form--login .account-form__check {
		margin-top: calc(41 * var(--u));
	}

	.account-form--login .account-form__button {
		margin-top: calc(63 * var(--u));
	}

	.account-form--login .account-form__button + .account-form__button {
		margin-top: calc(24.68 * var(--u));
	}

	.account-form__links {
		flex-direction: row;
		gap: calc(65.5 * var(--u));
		margin-top: calc(24.68 * var(--u));
	}

	.account-form__link {
		font-size: calc(18 * var(--u));
	}

	.account-form__link::after {
		width: calc(8.3 * var(--u));
		height: calc(8.3 * var(--u));
		margin-left: calc(16 * var(--u));
	}

	.account-page .account-page__notices,
	.account-page .woocommerce-notices-wrapper:not(:empty) {
		margin-bottom: calc(30 * var(--u));
	}

	.account-page .woocommerce-error,
	.account-page .woocommerce-message,
	.account-page .woocommerce-info,
	.account-page .woocommerce > p,
	.account-page .woocommerce-ResetPassword > p:not(.form-row) {
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.account-page .woocommerce-ResetPassword .form-row {
		margin-top: calc(49 * var(--u));
	}

	.account-page .woocommerce-ResetPassword label {
		font-size: calc(18 * var(--u));
	}

	.account-page .woocommerce-ResetPassword input.input-text {
		margin-top: calc(11 * var(--u));
		border-bottom-width: 1px;
		font-size: calc(18 * var(--u));
	}

	.account-page .woocommerce-ResetPassword button.button {
		width: calc(746 * var(--u));
		min-height: calc(62.32 * var(--u));
		margin: calc(14 * var(--u)) 0 0 calc(-5 * var(--u));
		padding: 0 calc(20.39 * var(--u));
		color: var(--color-cream);
		font-size: calc(20 * var(--u));
		line-height: calc(45.68 * var(--u));
	}

	/*
	 * Widoki ze zdjęciem (rejestracja i logowanie): układ na pełną szerokość
	 * okna, dwie równe kolumny (Figma: 864 + 864 w ramce 1728) - formularz
	 * po lewej, zdjęcie po prawej, od razu pod nagłówkiem strony i do samej
	 * prawej krawędzi okna. Kontener tych widoków nie ma więc ograniczenia
	 * szerokości, które obowiązuje pozostałe widoki konta.
	 *
	 * Zdjęcie zajmuje całą szerokość swojej kolumny i trzyma proporcje pola
	 * z Figmy (864:967), więc kadr jest ten sam przy każdej szerokości okna.
	 * Cały blok formularza - tytuł, pola, pola wyboru, tekst informacyjny,
	 * przyciski i linki - jest wyśrodkowany w pionie względem zdjęcia;
	 * odstępy wewnątrz bloku i jego położenie od lewej są bez zmian. Gdy blok
	 * jest wyższy od zdjęcia (np. długie komunikaty walidacji), sekcja rośnie
	 * razem z nim; odstęp nad i pod blokiem jest wtedy równy dopełnieniu
	 * kolumny.
	 */
	.account-page--split {
		max-width: none;
		padding: 0;
	}

	.account-split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}

	.account-page--split .account-page__main {
		padding: calc(60 * var(--u)) 0;
	}

	.account-page__media {
		align-self: start;
		margin: 0;
	}

	.account-page__media img {
		height: auto;
		aspect-ratio: 864 / 967;
	}

	/* Imię i nazwisko obok siebie: dwie kolumny po 330px z odstępem 84px
	   (linie na y 498); e-mail 46px pod linią, hasło 50px. W tych dwóch
	   polach wiersz tekstu stoi 10px pod etykietą, linia 6px pod nim. */
	.account-form--register {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: calc(84 * var(--u));
	}

	.account-form--register > * {
		grid-column: 1 / -1;
	}

	.account-form--register > .account-form__field--half {
		grid-column: auto;
		margin-top: 0;
	}

	.account-form--register .account-form__field--half input {
		margin-top: calc(10 * var(--u));
		padding-bottom: calc(6 * var(--u));
	}

	.account-form--register .account-form__field--email {
		margin-top: calc(45 * var(--u));
	}
}