/**
 * Ekrany wejścia do konta: logowanie i rejestracja.
 *
 * Adaptacja węzła Figma 93:670. Makieta była modalem na przyciemnionym tle;
 * tu są to strony, więc karta stoi na tle motywu, bez przyciemnienia
 * i bez przycisku zamknięcia.
 *
 * Obie strony dzielą jedną ramę (`.bo-authpage`), żeby przejście
 * „zaloguj się ↔ załóż konto" nie wyglądało jak przejście między dwoma
 * różnymi serwisami. Rama trzyma szerokość kontenera — tę samą, co menu —
 * a treść w środku ma własną, węższą miarę: formularz rozciągnięty na 1280 px
 * byłby nieczytelny.
 */

/* --- wspólna rama --------------------------------------------------------- */

.bo-authpage {
	width: 100%;
	/*
	 * Rama szła na całą szerokość kontenera. Przy makiecie 1280 px wyglądało
	 * to na kompozycję; po poszerzeniu układu do 1600 px robił się z tego
	 * biały slab z wyspą treści pośrodku i 390 px pustki po bokach.
	 * Rama dostaje więc własny sufit, liczony od miary treści w środku —
	 * formularz zostaje wąski (czytelna długość wiersza), a rama go obejmuje
	 * zamiast rozpychać się na cały ekran.
	 */
	--bo-auth-inner: 820px;

	max-inline-size: calc(var(--bo-auth-inner) + 2 * clamp(20px, 4vw, 56px) + 160px);
	margin: 0 auto 72px;
	padding: 40px clamp(20px, 4vw, 56px) 36px;
	border-radius: 26px;
	background: var(--bo-white, #fff);
	box-shadow: 0 24px 64px rgb(10 51 28 / 0.10);
}

/* Logowanie i odzyskiwanie hasła mają węższą kolumnę — rama idzie za nią. */
.bo-authpage:has(.bo-authpage__inner--narrow) { --bo-auth-inner: 560px; }

/* Rejestracja pokazuje dwie karty ról obok siebie i potrzebuje szerokości;
   logowanie to jedna kolumna pól — rozciągnięta na 820 px czytałaby się źle. */
.bo-authpage__inner {
	width: min(820px, 100%);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Tytuł strony powtarzałby nagłówek karty, a stojąc do lewej rozbijałby
   wyśrodkowaną kompozycję. Zostaje dla czytników ekranu. */
body.woocommerce-account:not(.logged-in) .bo-entry > h1,
body.bo-authscreen .bo-entry > h1,
body.bo-apppage .bo-entry > h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bo-authgate { display: flex; flex-direction: column; gap: 16px; }

.bo-authgate__head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bo-authgate__logo img { height: 64px; width: auto; }

.bo-authgate__lead { color: var(--bo-text-soft, #53565a); text-align: center; max-width: 46ch; }

.bo-authgate__title {
	font-family: var(--bo-font-heading), sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bo-ink, #1f2421);
	text-align: center;
}

/* --- formularz logowania ---------------------------------------- */

.bo-authgate__form { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.bo-authgate__field { display: flex; flex-direction: column; gap: 6px; }

.bo-authgate__field label {
	font-size: 14px;
	font-weight: 500;
	color: var(--bo-text-soft, #53565a);
}

.bo-authgate__field .bo-input,
.bo-authgate__form input[type="text"],
.bo-authgate__form input[type="email"],
.bo-authgate__form input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--bo-stroke, #d7dad8);
	border-radius: 10px;
	background: var(--bo-card);
	font: inherit;
	color: var(--bo-ink, #1f2421);
}

.bo-authgate__form input:focus {
	outline: none;
	border-color: var(--bo-green-contrast, #007737);
	box-shadow: 0 0 0 3px rgb(0 119 55 / 0.18);
}

.bo-authgate__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
}

.bo-authgate__remember { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--bo-text-soft, #53565a); }
.bo-authgate__check { width: 16px; height: 16px; accent-color: var(--bo-green-contrast, #007737); }
.bo-authgate__lost { display: inline-flex; align-items: center; min-height: 24px; font-weight: 700; color: var(--bo-green-contrast, #007737); }

/* --- paski pod kartami ---------------------------------------------------- */

.bo-gatebar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-radius: 14px;
	border: 1.5px solid var(--bo-stroke, #d7dad8);
	background: var(--bo-gray-100, #f1f3f2);
	color: var(--bo-ink, #1f2421);
	transition: border-color 150ms ease, background-color 150ms ease;
}

.bo-gatebar:hover { border-color: var(--bo-green-contrast, #007737); }

.bo-gatebar--accent {
	background: var(--bo-green-50, #e8f5ee);
	border-color: var(--bo-green-contrast, #007737);
}

.bo-gatebar__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: var(--bo-card);
	color: var(--bo-green-contrast, #007737);
}

.bo-gatebar__icon--plain { border: 1px solid var(--bo-stroke, #d7dad8); color: var(--bo-text-soft, #53565a); }
.bo-gatebar__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bo-gatebar__title { font-weight: 700; }
.bo-gatebar__lead { font-size: 14px; color: var(--bo-text-soft, #53565a); }
.bo-gatebar__go { flex: 0 0 auto; color: var(--bo-text-soft, #53565a); }
.bo-gatebar:hover .bo-gatebar__go { color: var(--bo-green-contrast, #007737); }

@media (max-width: 860px) {
	.bo-authpage { padding: 28px 18px 24px; border-radius: 20px; }
}

/* --- neutralizacja domyślnych stylów WooCommerce ---------------------------
   `woocommerce.css` rysuje wokół `form.login` własną ramkę z zaokrągleniem
   i marginesem — wewnątrz naszej karty wyglądało to jak pudełko w pudełku.
   -------------------------------------------------------------------------- */

.woocommerce .bo-authgate__form.login,
.woocommerce-page .bo-authgate__form.login,
.bo-authgate__form.woocommerce-form-login {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: left;
}

.bo-authgate__form p { margin: 0; }
.bo-authgate__submit { width: 100%; justify-content: center; margin-top: 4px; }

/*
 * „Zapamiętaj mnie" przychodzi z WooCommerce jako pole 16×16 px — poniżej
 * minimum, które da się pewnie trafić palcem (WCAG 2.5.8 mówi o 24 px).
 * Powiększamy sam znacznik i rozciągamy etykietę, żeby dotknięcie w tekst
 * też przełączało pole.
 */
.bo-authgate__remember {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-space-2);
	min-height: 32px;
	cursor: pointer;
}

.bo-authgate__check {
	width: 24px;
	height: 24px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--bo-green-contrast);
}

/* Ikona przejmuje kolor kafla. Część ikon motywu ma wpisany `stroke="white"`,
   bo służy na ciemnym przycisku — tutaj musi się dostosować do tła. */
.bo-gatebar__icon svg,
.bo-gatebar__icon svg * { stroke: currentColor; }

/* Ten sam jeden plik co w nagłówku — patrz komentarz przy `.bo-logo`. */
.bo-authgate__logo { display: block; width: 150px; height: auto; }

/* Wersja ciemna znaku — przełączana tą samą regułą co w nagłówku. */
.bo-authgate__logo.bo-logo--dark { display: none; }
:root[data-theme="dark"] .bo-authgate__logo.bo-logo--light { display: none; }
:root[data-theme="dark"] .bo-authgate__logo.bo-logo--dark { display: block; }

@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] .bo-authgate__logo.bo-logo--light { display: none; }
	:root[data-theme="system"] .bo-authgate__logo.bo-logo--dark { display: block; }
}


/* --- rejestracja w tej samej ramie -----------------------------------------
   Aplikacja React ma własną kartę (`.bo-reg`). Wewnątrz ramy byłaby kartą
   w karcie, więc zdejmujemy jej obudowę i zostawiamy sam układ treści.
   -------------------------------------------------------------------------- */

.bo-authpage .bo-regshell {
	min-height: 0;
	display: block;
	padding: 0;
}

.bo-authpage .bo-reg {
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* Nagłówek kreatora dostaje tę samą rangę, co „Zaloguj się lub załóż konto". */
.bo-authpage .bo-reg__title {
	font-family: var(--bo-font-heading), sans-serif;
	font-size: 24px;
	font-weight: 600;
	text-align: center;
}

.bo-authpage .bo-reg__lead { text-align: center; }

.bo-authpage__inner--narrow { width: min(560px, 100%); }

/* --- odzyskiwanie hasła ---------------------------------------------------- */

/* Potwierdzenie wysyłki nie ma formularza, więc zamiast logo daje znak,
   że coś się udało — inaczej ekran wyglądałby jak kolejny krok do wypełnienia. */
.bo-authgate__badge {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--bo-green-50, #e8f5ee);
	color: var(--bo-green-contrast, #007737);
}

.bo-authgate__badge svg,
.bo-authgate__badge svg * { stroke: currentColor; }

/* WooCommerce rysuje własną ramkę także wokół formularzy odzyskiwania hasła. */
.woocommerce .bo-authgate__form.lost_reset_password,
.woocommerce-page .bo-authgate__form.lost_reset_password {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Pasek powrotu bez strzałki po prawej nie może rezerwować na nią miejsca. */
.bo-gatebar__icon svg { transform: none; }

/* --- panel kupującego w stronie --------------------------------------------
   Aplikacja ma własny nagłówek i własny rytm, więc domyślne odstępy sekcji
   dokładały nad nią i pod nią pustą przestrzeń.
   -------------------------------------------------------------------------- */

body.bo-apppage .bo-section { padding-block: var(--bo-space-8) var(--bo-space-10); }
body.bo-apppage .bo-entry__content { display: block; }

/* --- panel kupującego: szeroki obszar roboczy ------------------------------
   Konto kupującego to narzędzie, nie strona treściowa — miara czytelności
   1280 px, dobra dla artykułu, dusiła tu tabele zamówień i rozmowę.

   Świadomie NIE robimy z niego pełnego ekranu jak panel sprzedawcy. Sprzedawca
   pracuje, kupujący wciąż kupuje: zabranie mu paska z wyszukiwarką, katalogiem
   i koszykiem zostawiłoby go bez drogi powrotnej do zakupów. Zamiast tego
   poszerzamy obszar roboczy i zdejmujemy z tej strony stopkę marketingową,
   która w widoku konta jest samym szumem.
   ------------------------------------------------------------------------- */

body.bo-apppage {
	/* Szerokość bierzemy globalną (`--bo-container` w style.css) — nadpisanie
	   było potrzebne, dopóki reszta serwisu trzymała 1280 px.
	   Margines zostaje węższy: w widoku roboczym 2×80 px zjadało całą kolumnę
	   listy rozmów. */
	--bo-gutter: 40px;
}

/* Nagłówek i pasek nawigacji idą tą samą miarą, żeby panel się z nimi
   równał — inaczej treść stałaby szerzej niż logo i wyszukiwarka. */
body.bo-apppage .bo-section { padding-block: var(--bo-space-6) var(--bo-space-10); }

/* Newsletter i kolumny odnośników nie należą do widoku konta. Pasek prawny
   zostaje — to informacja o operatorze, nie reklama. */
body.bo-apppage .bo-newsletter,
body.bo-apppage .bo-footer__main { display: none; }

body.bo-apppage .bo-footer__legal { padding-block: var(--bo-space-6); }

/* --- pole hasła z podglądem ------------------------------------------------
   Ten sam wzorzec co w panelu (`shared/ui/PasswordField.jsx`): oko w prawej
   krawędzi pola, bez zmiany wysokości kontrolki.
   -------------------------------------------------------------------------- */

.bo-pass { position: relative; display: block; }

/*
 * WooCommerce dokłada do pól hasła WŁASNY przełącznik (`.show-password-input`)
 * — nieopisany dla czytnika ekranu i w swoim własnym stylu, a do tego leżący
 * dokładnie na naszym. Zostaje jeden, opisany i zgodny z panelem.
 */
.bo-pass .show-password-input { display: none; }

.bo-pass__input { padding-right: 48px; }

.bo-pass__eye {
	position: absolute;
	top: 50%;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--bo-text-soft, #53565a);
	cursor: pointer;
}

.bo-pass__eye:hover { background: var(--bo-surface, #f9f9f9); color: var(--bo-ink, #1f2421); }

/*
 * Ikona mówi, co się stanie po kliknięciu: oko — pokaż, oko przekreślone —
 * ukryj. Obie są w kodzie, a wybiera je stan przycisku, więc skrypt nie musi
 * podmieniać grafiki.
 */
.bo-pass__ico { display: inline-flex; }
.bo-pass__ico--hide { display: none; }
.bo-pass__eye[aria-pressed="true"] .bo-pass__ico--show { display: none; }
.bo-pass__eye[aria-pressed="true"] .bo-pass__ico--hide { display: inline-flex; }
.bo-pass__eye:focus-visible { outline: 2px solid var(--bo-green-contrast, #007737); outline-offset: 2px; }