/**
 * Login Onboarding — Stripe-style login + magic link + info modal
 *
 * Przejmuje stronę logowania BuddyBoss:
 * – ukrywa split-panel BB
 * – centruje #login jako pojedynczą kartę
 * – dodaje animację fali Lottie na dole ekranu
 * – dodaje magic link + modal informacyjny
 */

/* ================================================================
   Animacja tła — pełny ekran za kartą
   ================================================================ */

.et-lo-bg-lottie {
	position: fixed;
	/* Powiększ i wyśrodkuj — po rotacji 45° pokrywa cały viewport */
	width: 160vmax;
	height: 160vmax;
	top: 50%;
	left: 30%;
	transform: translate(-50%, -50%) rotate(45deg);
	z-index: 0;
	pointer-events: none;
}

/* Wariant: tło z BuddyBoss — pełen ekran bez rotacji */
.et-lo-bg-image {
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	transform: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.et-lo-bg-overlay {
	position: absolute;
	inset: 0;
	background: #000;
}

#et-lo-wave-canvas {
	width: 100%;
	height: 100%;
	display: block;
}

/* ================================================================
   Stripe layout — ukryj BB split panel, wycentruj body
   ================================================================ */

/* Ukryj lewy panel z obrazkiem/animacją BB */
body.login.login-split-page .login-split { display: none !important; }

/* Ukryj animację Lottie z modułu spoti-login */
body.login .user-area-columns { display: none !important; }

/* Body jako flex-kolumna, wycentrowana w pionie i poziomie */
/* Ukryj scrollbar, ale pozwól scrollować */
html.login-page,
body.login {
	scrollbar-width: none !important;        /* Firefox */
	-ms-overflow-style: none !important;     /* IE/Edge */
}
html.login-page::-webkit-scrollbar,
body.login::-webkit-scrollbar {
	display: none !important;
}

body.login {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 100px 20px 100px !important;
	min-height: 100vh !important;
	background: var(--bb-body-background-color, #F2F4F5) !important;
	box-sizing: border-box !important;
	position: relative !important;
}

/* Wygląd karty — działa zawsze (z BB i bez) */
body.login #login {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 2 !important;
	width: min(440px, calc(100vw - 40px)) !important;
	max-width: 440px !important;
	min-height: auto !important;
	height: auto !important;
	padding: 40px 36px 0 !important;
	margin: 0 !important;
	background: var(--bb-content-background-color, #FFFFFF) !important;
	border-radius: var(--bb-block-radius, 12px) !important;
	border: 1px solid var(--bb-content-border-color, #D6D9DD) !important;
	box-shadow:
		0 4px 12px rgba(17, 24, 39, .10),
		0 20px 48px rgba(17, 24, 39, .12) !important;
	overflow: visible !important;
}

/* Reset absolutnego pozycjonowania BB (tylko gdy login-split-page) */
body.login.login-split-page #login {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 500px !important;
	max-width: 90vw !important;
}

/* Karta nie mieści się w viewport — pin do góry + scroll wewnętrzny */
body.login #login.et-lo-card--scroll {
	top: 20px !important;
	transform: translateX(-50%) !important;
	max-height: calc(100vh - 40px) !important;
	overflow-y: auto !important;
}

/* Gdy karta scrolluje — ukryj stopkę (zasłaniałaby dolną część karty) */
body.login:has(#login.et-lo-card--scroll) .et-lo-site-footer {
	display: none !important;
}

/* ================================================================
   h1 (logo) przesunięte nad kartę — Stripe look
   ================================================================ */

h1.et-lo-page-logo {
	text-align: center;
	margin: 0 0 20px !important;
	padding: 0 !important;
}

h1.et-lo-page-logo a {
	display: inline-block;
	color: var(--bb-headings-color, #1E2132) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	background: none !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
}

h1.et-lo-page-logo img {
	max-height: 50px;
	width: auto;
}

/* ================================================================
   Card footer — szary pasek na dole karty (np. "Zarejestruj się")
   ================================================================ */

.et-lo-card-footer {
	margin: 20px -36px 0;
	padding: 16px 36px;
	border-top: 1px solid var(--bb-content-border-color, #D6D9DD);
	background: var(--bb-body-background-color, #F2F4F5);
	border-radius: 0 0 var(--bb-block-radius, 12px) var(--bb-block-radius, 12px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.et-lo-card-footer__text {
	font-size: 16px;
	color: var(--bb-alternate-text-color, #9B9C9F);
}

.et-lo-card-footer__btn {
	display: inline-block;
	padding: 8px 22px;
	border: 1.5px solid var(--bb-primary-color, #587BB6);
	border-radius: var(--bb-button-radius, 6px);
	color: var(--bb-primary-color, #587BB6) !important;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease;
	background: transparent;
}

.et-lo-card-footer__btn:hover {
	background: rgba(var(--bb-primary-color-rgb, 88,123,182), .08);
}

.et-lo-card-footer__btn--ghost {
	border-color: var(--bb-content-border-color, #D6D9DD);
	color: var(--bb-alternate-text-color, #9B9C9F) !important;
}

.et-lo-card-footer__btn--ghost:hover {
	border-color: var(--bb-primary-color, #587BB6);
	color: var(--bb-primary-color, #587BB6) !important;
	background: transparent;
}

/* ================================================================
   Site footer — "footer over content on scroll" pure CSS
   Fixed at bottom, revealed as card scrolls past viewport edge
   ================================================================ */

.et-lo-site-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;         /* ponad kartą (z-index: 2) i animacją (z-index: 0) */
	background: var(--bb-content-background-color, #FFFFFF);
	border-top: 1px solid var(--bb-content-border-color, #D6D9DD);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.et-lo-site-footer.et-lo-footer--visible {
	opacity: 1;
	pointer-events: auto;
}

/* BB footer — reset pozycji i style 1:1 ze strony głównej */
.et-lo-site-footer footer.footer-bottom {
	position: static !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 30px 10px !important;
	background-color: #FFFFFF !important;
	color: rgb(90, 90, 90) !important;
	font-size: 13px !important;
	box-sizing: border-box !important;
}

.et-lo-site-footer .container.flex {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	max-width: 1200px !important;
	width: 100% !important;
	padding: 0 10px !important;
	margin: 0 auto !important;
}

.et-lo-site-footer .footer-bottom-left {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.et-lo-site-footer .copyright {
	font-size: 14px !important;
	color: rgb(90, 90, 90) !important;
	margin: 0 30px 0 0 !important;
}

.et-lo-site-footer .copyright a {
	color: rgb(90, 90, 90) !important;
}

.et-lo-site-footer hr.wp-block-separator {
	margin: 0 0 27px !important;
	border: 0 !important;
	border-bottom: 2px solid rgba(128, 128, 128, 0.5) !important;
	height: 0 !important;
}

/* Floaty obrazków — 1:1 z BB theme (alignleft/alignright) */
.et-lo-site-footer .copyright .alignleft {
	float: left !important;
	margin: 0 20px 10px 0 !important;
}

.et-lo-site-footer .copyright .alignright {
	float: right !important;
	margin: 0 0 10px 20px !important;
}

/* Clearfix tylko na footer-bottom-left, nie na copyright (identycznie jak main page) */
.et-lo-site-footer .footer-bottom-left::after {
	content: '' !important;
	display: block !important;
	clear: both !important;
}

.et-lo-site-footer .copyright img {
	max-width: 100% !important;
	height: auto !important;
}

/* ================================================================
   Page footer — legacy (stary markup)
   ================================================================ */

.et-lo-page-footer {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 24px 20px;
	font-size: 13px;
	color: var(--bb-alternate-text-color, #9B9C9F);
}

.et-lo-page-footer a {
	color: var(--bb-alternate-text-color, #9B9C9F);
	text-decoration: none;
}

.et-lo-page-footer a:hover {
	color: var(--bb-headings-color, #1E2132);
}

/* ================================================================
   BB header na login page — pełny site-header nad kartą
   ================================================================ */

.et-lo-bb-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 100 !important;
	width: 100% !important;
	height: auto !important;
	/* Wyłącz sticky/fixed BB — reset transformów */
	transform: none !important;
	background: var(--bb-content-background-color, #FFFFFF);
	border-bottom: 1px solid var(--bb-content-border-color, #D6D9DD);
}

/* Ukryj mobilne panele i overlaye — są duże i psują layout */
body.login .et-lo-bb-header .bb-mobile-panel-wrapper,
body.login .et-lo-bb-header .bb-mobile-header-wrapper,
body.login .et-lo-bb-header .header-search-wrap,
body.login .et-lo-bb-header #bb-mobile-search,
body.login .et-lo-bb-header .header-inner-right .header-search-wrap {
	display: none !important;
}

/* ================================================================
   Logo / site-branding — 1:1 z theme.css (BB nie ładuje CSS na login page)
   ================================================================ */

/* Ukryj dark i mobile warianty */
body.login .et-lo-bb-header img.bb-logo.bb-logo-dark,
body.login .et-lo-bb-header img.bb-mobile-logo {
	display: none !important;
}

body.login .et-lo-bb-header img.bb-logo:not(.bb-logo-dark) {
	display: block !important;
}

/* .site-header .site-header-container.flex — theme.css ln 6046 */
body.login .et-lo-bb-header .site-header-container {
	-webkit-box-align: center !important;
	    -ms-flex-align: center !important;
	        align-items: center !important;
}

/* .site-branding — theme.css ln 6134 */
body.login .et-lo-bb-header .site-branding {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-align: center !important;
	    -ms-flex-align: center !important;
	        align-items: center !important;
	height: auto !important; /* --bb-header-height nie jest załadowane na login page */
	min-width: 60px !important;
	padding-right: 30px !important;
	-webkit-transition: all linear 0.1s !important;
	        transition: all linear 0.1s !important;
}

/* .site-title — theme.css ln 6188 */
body.login .et-lo-bb-header .site-title {
	font-size: 1.375rem !important;
	font-weight: 500 !important;
	margin: 0 !important;
	color: var(--bb-headings-color) !important;
	height: auto !important;
	display: block !important;
}

/* .site-title a — theme.css ln 6194 */
body.login .et-lo-bb-header .site-title a {
	color: var(--bb-headings-color) !important;
}

/* .site-title img — theme.css ln 6197 */
body.login .et-lo-bb-header .site-title img {
	max-height: 76px !important;
	min-height: 60px !important;
	width: auto !important;
	padding: 10px 0 !important;
	object-fit: contain !important;
}

/* a.custom-logo-link — theme.css ln 6222 */
body.login .et-lo-bb-header a.custom-logo-link {
	display: inline-block !important;
}

body.login .et-lo-bb-header #header-aside,
body.login .et-lo-bb-header .header-aside {
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	margin-left: auto !important;
}

body.login .et-lo-bb-header .header-aside-inner {
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* ================================================================
   BB header buttons — 1:1 z theme.css (BB nie ładuje tego CSS na login page)
   --bb-header-links i --bb-header-links-hover nie są dostępne na login page,
   użyto fallbacków z Puppeteer: #587BB6 primary.
   ================================================================ */

/* Base .button — theme.css ln 1734 */
body.login .et-lo-bb-header .bb-header-buttons .button {
	font-family: inherit !important;
	font-size: 15px !important;
	background-color: var(--bb-primary-button-background-regular, #587BB6) !important;
	color: var(--bb-primary-button-text-regular, #FFFFFF) !important;
	border: 1px solid var(--bb-primary-button-border-regular, #587BB6) !important;
	border-radius: var(--bb-button-radius, 6px) !important;
	padding: 10px 20px !important;
	font-weight: 500 !important;
	font-style: normal !important;
	text-decoration: none !important;
	text-align: center !important;
	cursor: pointer !important;
	display: inline-block !important;
	line-height: 1.3 !important;
	border-width: 1px !important;
	border-style: solid !important;
	outline: none !important;
	vertical-align: middle !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	-webkit-transition: all linear 0.2s !important;
	        transition: all linear 0.2s !important;
}

/* .button:hover, :focus — theme.css ln 1851 */
body.login .et-lo-bb-header .bb-header-buttons .button:hover,
body.login .et-lo-bb-header .bb-header-buttons .button:focus,
body.login .et-lo-bb-header .bb-header-buttons .button:active {
	outline: none !important;
	text-decoration: none !important;
	background-color: var(--bb-primary-button-background-hover, #587BB6) !important;
	color: var(--bb-primary-button-text-hover, #FFFFFF) !important;
	border-color: var(--bb-primary-button-border-hover, #587BB6) !important;
}

/* .button:focus — focus shadow — theme.css ln 1786 */
body.login .et-lo-bb-header .bb-header-buttons .button:focus {
	box-shadow: var(--bb-primary-button-focus-shadow, 0px 0px 0px 2px rgba(88, 123, 182, 0.1)) !important;
}

/* .button.small — theme.css ln 1925 */
body.login .et-lo-bb-header .bb-header-buttons .button.small {
	font-size: 14px !important;
}

/* .button.outline — theme.css ln 2880 */
body.login .et-lo-bb-header .bb-header-buttons .button.outline {
	background: none !important;
	background-color: var(--bb-secondary-button-background-regular, #F2F4F5) !important;
	color: var(--bb-secondary-button-text-regular, #1E2132) !important;
	border: 1px solid var(--bb-secondary-button-border-regular, #F2F4F5) !important;
	box-shadow: none !important;
}

/* .button.outline:focus — theme.css ln 2903 */
body.login .et-lo-bb-header .bb-header-buttons .button.outline:focus {
	box-shadow: var(--bb-secondary-button-focus-shadow, 0px 0px 0px 2px rgba(88, 123, 182, 0.1)) !important;
}

/* .button.outline:hover, :focus, :active — theme.css ln 2921 */
body.login .et-lo-bb-header .bb-header-buttons .button.outline:hover,
body.login .et-lo-bb-header .bb-header-buttons .button.outline:focus,
body.login .et-lo-bb-header .bb-header-buttons .button.outline:active {
	background-color: var(--bb-secondary-button-background-hover, #587BB6) !important;
	color: var(--bb-secondary-button-text-hover, #FFFFFF) !important;
	border-color: var(--bb-secondary-button-border-hover, #587BB6) !important;
}

/* .bb-header-buttons .button.link (Sign in) — theme.css ln 6732 */
body.login .et-lo-bb-header .bb-header-buttons .button.link {
	background: transparent !important;
	border: 0 !important;
	color: inherit !important;
	font-weight: 400 !important;
	display: -webkit-inline-box !important;
	display: -ms-inline-flexbox !important;
	display: inline-flex !important;
	-webkit-box-align: center !important;
	    -ms-flex-align: center !important;
	        align-items: center !important;
	padding: 6px 12px !important;
}

body.login .et-lo-bb-header .bb-header-buttons .button.link:hover,
body.login .et-lo-bb-header .bb-header-buttons .button.link:focus,
body.login .et-lo-bb-header .bb-header-buttons .button.link:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* .bb-header-buttons a.button.outline (Sign up) — theme.css ln 6745
   --bb-header-links nie jest załadowane na login page — fallback: primary color */
body.login .et-lo-bb-header .bb-header-buttons a.button.outline {
	color: var(--bb-header-links, var(--bb-primary-color, #587BB6)) !important;
	box-shadow: none !important;
}

body.login .et-lo-bb-header .bb-header-buttons a.button.outline:hover {
	color: var(--bb-header-links-hover, var(--bb-primary-color, #587BB6)) !important;
}

/* .button.signup — theme.css ln 6477 + .header-aside ln 6482 */
body.login .et-lo-bb-header .bb-header-buttons .button.signup {
	margin-left: 0.3125rem !important;
	min-width: initial !important;
}

/* Ukryj sidebar toggle, nawigację i wyszukiwarkę — niepotrzebne na login page */
body.login .et-lo-bb-header .bb-toggle-panel,
body.login .et-lo-bb-header #primary-navbar,
body.login .et-lo-bb-header #site-navigation,
body.login .et-lo-bb-header .header-search-link,
body.login .et-lo-bb-header .search-separator {
	display: none !important;
}

/* Fallback gdy BB hook nic nie zwraca — pokaż tylko logo */
.et-lo-site-header {
	width: min(440px, calc(100vw - 40px));
	position: relative;
	z-index: 2;
	margin-bottom: 20px;
	padding: 12px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.et-lo-site-header__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	box-shadow: none !important;
	max-width: 100%;
}

.et-lo-site-header__logo .custom-logo,
.et-lo-site-header__logo img {
	max-height: 56px;
	width: auto;
	display: block;
	margin: 0 auto;
}

.et-lo-site-name {
	font-size: 20px;
	font-weight: 700;
	color: var(--bb-headings-color, #1E2132);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 380px;
	letter-spacing: -0.01em;
	display: block;
}

/* ================================================================
   BB registration link inside #loginform — ukryj duplikaty
   Link docelowy jest w #et-lo-card-footer
   ================================================================ */

/* Ukryj wszystkie duplikaty linków rejestracji — link docelowy jest w #et-lo-card-footer */
body.login #nav .wp-login-register,
body.login #nav a[href*="rejestracja"],
body.login #loginform a[href*="rejestracja"],
body.login #loginform a[href*="/register"],
body.login #loginform a[href*="wp-signup"] {
	display: none !important;
}

/* Pokaż link rejestracji w card footer */
body.login #et-lo-card-footer .et-lo-card-footer__btn {
	display: inline-block !important;
}

/* Primary wariant — taki sam kolor jak "Zaloguj się" */
body.login #et-lo-card-footer .et-lo-card-footer__btn--primary {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background-color: var(--bb-primary-button-background-regular, #587BB6) !important;
	color: var(--bb-primary-button-text-regular, #FFFFFF) !important;
	border-color: var(--bb-primary-button-border-regular, #587BB6) !important;
}

body.login #et-lo-card-footer .et-lo-card-footer__btn--primary:hover {
	background-color: var(--bb-primary-button-background-hover, #587BB6) !important;
	color: var(--bb-primary-button-text-hover, #FFFFFF) !important;
	border-color: var(--bb-primary-button-border-hover, #587BB6) !important;
}

.et-lo-card-footer__icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Tytuł karty */
.et-lo-card-title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--bb-headings-color, #1E2132) !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	text-align: left !important;
}

/* Reset margin i overflow formularza — BB ustawia overflow:hidden co ucina floating labels */
body.login #loginform,
body.login #lostpasswordform,
body.login #resetpassform {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	overflow: visible !important;
}

/* Usuń underline z <u> wewnątrz linka rejestracji */
body.login #loginform a u,
body.login #loginform a[href*="rejestracja"] u,
body.login #loginform a[href*="rejestracja"] * {
	text-decoration: none !important;
}

/* ================================================================
   Ukryj h1 wewnątrz karty (BB renderuje własne) — masthead zastępuje
   ================================================================ */

body.login #login h1 {
	display: none !important;
}

/* ================================================================
   Header z logo — nad kartą (stary, legacy)
   ================================================================ */

.et-lo-header {
	text-align: center;
	margin-bottom: 20px;
	width: 100%;
	position: relative;
	z-index: 1;
}

.et-lo-header__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.et-lo-header img,
.et-lo-header .custom-logo {
	max-height: 60px;
	width: auto;
	display: block;
}

.et-lo-header__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--bb-headings-color, #1E2132);
}

/* ================================================================
   Background blobs — ukryj (gradient jest teraz na body)
   ================================================================ */

.et-lo-bg {
	display: none;
}

/* ================================================================
   Info link — obok magic link button (inline, nie absolut)
   ================================================================ */

.et-lo-info-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	background: none;
	border: none;
	color: var(--bb-alternate-text-color, #9B9C9F);
	font-size: 12px;
	cursor: pointer;
	padding: 8px 0 20px;
	text-align: center;
	transition: color .2s ease;
}

.et-lo-info-link:hover {
	color: var(--bb-primary-color, #587BB6);
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

.et-lo-info-link:focus,
.et-lo-info-link:focus-visible {
	outline: none;
	color: var(--bb-primary-color, #587BB6);
}

/* Info button stary (fallback, jeśli jeszcze istnieje) */
.et-lo-info-btn,
.et-lo-help-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--bb-content-border-color, #D6D9DD);
	background: transparent;
	color: var(--bb-alternate-text-color, #9B9C9F);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
	padding: 0;
	font-size: 16px;
	z-index: 10;
}

.et-lo-info-btn:hover,
.et-lo-help-btn:hover {
	background: var(--bb-content-alternate-background-color, #F2F4F5);
	color: var(--bb-headings-color, #1E2132);
}

.et-lo-info-btn:focus,
.et-lo-info-btn:focus-visible,
.et-lo-help-btn:focus,
.et-lo-help-btn:focus-visible {
	outline: none;
	border-color: var(--bb-primary-color, #587BB6);
	box-shadow: 0 0 0 3px rgba(var(--bb-primary-color-rgb, 88,123,182), .15);
}

/* ================================================================
   Magic link section — animowane pojawienie się
   ================================================================ */

.et-lo-magic-section {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition:
		max-height .4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity .3s ease,
		margin-top .4s ease;
	margin-top: 0;
}

.et-lo-magic-section.et-lo-magic--visible {
	max-height: 400px;
	opacity: 1;
	margin-top: 4px;
	overflow: visible;
}

/* ================================================================
   Divider "lub"
   ================================================================ */

.et-lo-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	color: var(--bb-alternate-text-color, #9B9C9F);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.et-lo-divider::before,
.et-lo-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--bb-content-border-color, #D6D9DD);
}

/* ================================================================
   Magic link button
   ================================================================ */

.et-lo-magic-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	border-radius: var(--bb-button-radius, 6px);
	border: 1px solid var(--bb-content-border-color, #D6D9DD);
	background: var(--bb-content-background-color, #FFFFFF);
	color: var(--bb-headings-color, #1E2132);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
	padding: 0 20px;
}

.et-lo-magic-btn:hover {
	background: var(--bb-content-alternate-background-color, #F2F4F5);
	border-color: var(--bb-primary-color, #587BB6);
	color: var(--bb-primary-color, #587BB6);
}

.et-lo-magic-btn:focus,
.et-lo-magic-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--bb-primary-color-rgb, 88,123,182), .15);
	border-color: var(--bb-primary-color, #587BB6);
}

.et-lo-magic-btn .bb-icon-rl::before {
	margin-left: 0;
	margin-right: 0;
}

.et-lo-magic-btn--sent {
	background: rgba(var(--bb-success-color-rgb, 20,181,80), .08) !important;
	border-color: var(--bb-success-color, #14B550) !important;
	color: var(--bb-success-color, #14B550) !important;
	pointer-events: none;
}

.et-lo-magic-btn--error {
	background: rgba(var(--bb-danger-color-rgb, 219,34,42), .06) !important;
	border-color: var(--bb-danger-color, #DB222A) !important;
	color: var(--bb-danger-color, #DB222A) !important;
}

/* ================================================================
   Alerts / notices
   ================================================================ */

.et-lo-alert {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 14px;
	border-radius: var(--bb-input-radius, 6px);
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 2px;
}

.et-lo-alert--success {
	background: rgba(var(--bb-success-color-rgb, 20,181,80), .08);
	color: var(--bb-success-color, #14B550);
	border: 1px solid rgba(var(--bb-success-color-rgb, 20,181,80), .2);
}

.et-lo-alert--error {
	background: rgba(var(--bb-danger-color-rgb, 219,34,42), .08);
	color: var(--bb-danger-color, #DB222A);
	border: 1px solid rgba(var(--bb-danger-color-rgb, 219,34,42), .2);
}

.et-lo-alert .bb-icon-rl::before {
	margin-left: 0;
	margin-right: 0;
}

/* ================================================================
   Modal — backdrop + box
   ================================================================ */

.et-lo-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
}

.et-lo-modal.et-lo-modal--open {
	pointer-events: auto;
	opacity: 1;
}

.et-lo-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, .45);
	backdrop-filter: blur(3px);
}

.et-lo-modal-box {
	position: relative;
	width: 100%;
	max-width: 640px;
	background: var(--bb-content-background-color, #FFFFFF);
	border: 1px solid var(--bb-content-border-color, #D6D9DD);
	border-radius: var(--bb-block-radius, 12px);
	box-shadow:
		0 4px 16px rgba(17, 24, 39, .08),
		0 20px 48px rgba(17, 24, 39, .12);
	padding: 36px 32px 28px;
	transform: translateY(14px) scale(.98);
	transition:
		transform .3s cubic-bezier(.34, 1.56, .64, 1),
		opacity .25s ease;
	opacity: 0;
}

.et-lo-modal.et-lo-modal--open .et-lo-modal-box {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* ================================================================
   Modal — close button
   ================================================================ */

.et-lo-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--bb-content-border-color, #D6D9DD);
	background: transparent;
	color: var(--bb-alternate-text-color, #9B9C9F);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, color .2s ease;
	padding: 0;
}

.et-lo-modal-close:hover {
	background: var(--bb-content-alternate-background-color, #F2F4F5);
	color: var(--bb-headings-color, #1E2132);
}

.et-lo-modal-close:focus,
.et-lo-modal-close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--bb-primary-color-rgb, 88,123,182), .15);
	border-color: var(--bb-primary-color, #587BB6);
}

/* ================================================================
   Modal — content
   ================================================================ */

.et-lo-modal-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(var(--bb-primary-color-rgb, 88,123,182), .10);
	color: var(--bb-primary-color, #587BB6);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: 0 auto 16px;
}

.et-lo-modal-icon-wrap .bb-icon-rl::before {
	margin-left: 0;
	margin-right: 0;
}

.et-lo-modal-title {
	margin: 0 0 14px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: var(--bb-headings-color, #1E2132);
	line-height: 1.3;
}

.et-lo-modal-content {
	font-size: 16px;
	line-height: 1.65;
	color: var(--bb-body-text-color, #5A5A5A);
}

.et-lo-modal-content p {
	margin: 0 0 12px;
}

.et-lo-modal-content p:last-child {
	margin-bottom: 0;
}

.et-lo-modal-content ul,
.et-lo-modal-content ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.et-lo-modal-content li {
	margin-bottom: 6px;
}

.et-lo-modal-text {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bb-body-text-color, #5A5A5A);
	text-align: center;
}

.et-lo-modal-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.et-lo-modal-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bb-body-text-color, #5A5A5A);
}

.et-lo-modal-list li .bb-icon-rl {
	flex-shrink: 0;
	color: var(--bb-primary-color, #587BB6);
	font-size: 16px;
	margin-top: 1px;
}

.et-lo-modal-list li .bb-icon-rl::before {
	margin-left: 0;
	margin-right: 0;
}

.et-lo-modal-hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--bb-alternate-text-color, #9B9C9F);
	text-align: center;
	padding-top: 14px;
	border-top: 1px solid var(--bb-content-border-color, #D6D9DD);
}

/* ================================================================
   Mobile
   ================================================================ */

@media (max-width: 640px) {
	body.login {
		padding: 16px 16px 80px !important;
		justify-content: flex-start !important;
	}

	body.login #login {
		padding: 28px 20px 0 !important;
		width: calc(100vw - 32px) !important;
		max-width: 100% !important;
	}

	.et-lo-site-header {
		width: calc(100vw - 32px) !important;
	}

	body.login {
		padding-top: 97px !important; /* header 77px + 20px odstęp */
	}

	.et-lo-card-footer {
		margin: 20px -20px 0;
		padding: 14px 20px;
	}

	.et-lo-modal-box {
		padding: 28px 20px 22px;
	}

	.et-lo-modal-title {
		font-size: 18px;
	}
}

/* ================================================================
   Modal — contact block
   ================================================================ */

.et-lo-modal-contact {
	margin-top: 20px;
	padding: 16px 18px 18px;
	background: var(--bb-body-background-color, #F2F4F5);
	border-radius: var(--bb-block-radius, 10px);
	border-left: 3px solid var(--bb-primary-color, #587BB6);
}

.et-lo-modal-contact__label {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bb-headings-color, #1E2132);
}

.et-lo-modal-contact__desc {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--bb-body-text-color, #5A5A5A);
	line-height: 1.5;
}

.et-lo-modal-contact__addr {
	display: block;
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--bb-headings-color, #1E2132);
	word-break: break-all;
}

.et-lo-modal-contact__row {
	display: flex;
	gap: 8px;
}

.et-lo-modal-contact__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 14px;
	border-radius: var(--bb-block-radius, 6px);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
	white-space: nowrap;
}

.et-lo-modal-contact__btn--copy {
	border: 1px solid var(--bb-content-border-color, #D6D9DD);
	background: var(--bb-content-background-color, #fff);
	color: var(--bb-body-text-color, #5A5A5A);
}

.et-lo-modal-contact__btn--copy:hover,
.et-lo-modal-contact__btn--copy.et-lo-contact-btn--copied {
	background: var(--bb-primary-color, #587BB6);
	border-color: var(--bb-primary-color, #587BB6);
	color: #fff;
}

.et-lo-modal-contact__btn--mail {
	border: 1px solid var(--bb-primary-color, #587BB6);
	background: var(--bb-primary-color, #587BB6);
	color: #fff !important;
}

.et-lo-modal-contact__btn--mail:hover {
	opacity: .85;
	color: #fff !important;
}

/* ================================================================
   Karta — padding dolny gdy brak card-footer (regulamin/RODO)
   ================================================================ */

body.login #login:not(:has(#et-lo-card-footer)) {
	padding-bottom: 32px !important;
}

/* ================================================================
   Floating labels
   ================================================================ */

/* overflow: visible na wrapperze i jego BB-owych rodzicach — label wynurza się ponad border inputa */
.et-fl-wrap,
.user-login-wrap,
.user-pass-wrap,
.wp-pwd {
	overflow: visible !important;
}

.et-fl-wrap {
	position: relative;
}

.et-fl-label {
	position: absolute;
	left: 36px; /* wyrównanie z padding-left inputa pomniejszone o chip padding */
	top: 17px;  /* center w 52px input: (52 - 18px line-height) / 2 = 17px */
	font-size: 16px;
	color: var(--bb-alternate-text-color, #9B9C9F);
	pointer-events: none;
	transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease,
	            background 0.18s ease, border-color 0.18s ease, padding 0.18s ease;
	white-space: nowrap;
	line-height: 1;
	z-index: 2;
	border-radius: 5px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
}

/* Lostpassword — brak ikony, padding-left: 20px */
#lostpasswordform .et-fl-label {
	left: 16px;
}

/* Stan aktywny: fokus lub wypełnione — chip nad górną krawędzią inputa */
.et-fl-wrap.et-fl--focused .et-fl-label,
.et-fl-wrap.et-fl--has-value .et-fl-label {
	top: -8px;
	font-size: 11px;
	letter-spacing: 0.03em;
	padding: 2px 6px;
	background: #fff;
	border-color: var(--bb-content-border-color, #D6D9DD);
}

.et-fl-wrap.et-fl--focused .et-fl-label {
	color: var(--bb-primary-color, #587BB6);
	border-color: var(--bb-primary-color, #587BB6);
}

/* ================================================================
   Step transitions — krokowy przepływ logowania
   ================================================================ */

.et-lo-step {
	transition: opacity .26s ease, transform .26s ease;
}

.et-lo-step.et-lo-step--1 {
	margin-bottom: 16px;
}

/* ================================================================
   Next button — "Dalej"
   ================================================================ */

.et-lo-next-btn {
	margin-top: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	min-height: 52px !important;
	border-radius: var(--bb-button-radius, 6px) !important;
	background-color: var(--bb-primary-button-background-regular, #587BB6) !important;
	color: var(--bb-primary-button-text-regular, #FFFFFF) !important;
	border: 1px solid var(--bb-primary-button-border-regular, #587BB6) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background .2s ease, border-color .2s ease !important;
	padding: 0 20px !important;
}

.et-lo-next-btn:hover {
	background-color: var(--bb-primary-button-background-hover, #4a6aa3) !important;
	border-color: var(--bb-primary-button-border-hover, #4a6aa3) !important;
}

.et-lo-next-btn:focus,
.et-lo-next-btn:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(var(--bb-primary-color-rgb, 88,123,182), .15) !important;
}

.et-lo-next-btn--loading {
	opacity: .7;
	cursor: wait;
	pointer-events: none;
}

.et-lo-email-error {
	margin-top: 8px;
}

/* ================================================================
   Email badge — krok 2, pokazuje wybrany email z przyciskiem Zmień
   ================================================================ */

.et-lo-email-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--bb-body-background-color, #F2F4F5);
	border-radius: var(--bb-input-radius, 6px);
	border: 1px solid var(--bb-content-border-color, #D6D9DD);
	margin-bottom: 16px;
}

.et-lo-email-badge__icon {
	flex-shrink: 0;
	color: var(--bb-primary-color, #587BB6);
}

.et-lo-email-badge__addr {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	color: var(--bb-headings-color, #1E2132);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.et-lo-email-badge__back {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: 1px solid transparent;
	color: var(--bb-primary-color, #587BB6);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	padding: 3px 6px;
	border-radius: 4px;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* Hover/active: odwróć kolory — biały tekst na niebieskim tle (wysoki kontrast) */
.et-lo-email-badge__back:hover,
.et-lo-email-badge__back:active {
	background: var(--bb-primary-color, #587BB6);
	border-color: var(--bb-primary-color, #587BB6);
	color: #fff;
}

.et-lo-email-badge__back:focus,
.et-lo-email-badge__back:focus-visible {
	outline: none;
	background: var(--bb-primary-color, #587BB6);
	border-color: var(--bb-primary-color, #587BB6);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(var(--bb-primary-color-rgb, 88,123,182), .3);
}

/* ================================================================
   Email input shake — gdy pusty email przy kliknięciu Dalej
   ================================================================ */

@keyframes et-lo-shake {
	0%, 100% { transform: translateX(0); }
	20%       { transform: translateX(-6px); }
	40%       { transform: translateX(6px); }
	60%       { transform: translateX(-4px); }
	80%       { transform: translateX(4px); }
}

.et-lo-input--shake {
	animation: et-lo-shake .6s ease !important;
}

/* ================================================================
   Forgetmenot + lostmenot — font, odstęp i wyrównanie
   ================================================================ */

/* BB ukrywa natywny checkbox opacity:0 i rysuje własny span.checkbox */
body.login #loginform .forgetmenot {
	margin-top: 0 !important;
	font-size: 16px !important;
	float: left !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 !important;
}

/* Wyrównaj tekst "Zapamiętaj mnie" z checkboxem */
body.login #loginform .forgetmenot label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	font-size: 16px !important;
}

/* Natywny checkbox BB — schowany opacity:0, pozycjonowany przez BB */
body.login #loginform .forgetmenot input[type="checkbox"] {
	flex-shrink: 0 !important;
	margin: 0 !important;
	align-self: center !important;
}

/* BB custom checkbox icon — koryguj pozycję checkmark */
body.login #loginform .forgetmenot span.checkbox.on::before,
body.login #loginform .forgetmenot .bb-checkbox.on::before {
	top: -2px !important;
}

/* #nav (WP standard "Nie pamiętasz hasła?") — ukryj, BB ma własny .lostmenot */
body.login #nav {
	display: none !important;
}

/* .lostmenot — BB-owy "Forgot Password?", float prawy, wyrównany z forgetmenot */
body.login #loginform .lostmenot {
	float: right !important;
	margin-top: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	line-height: 1 !important;
}

body.login #loginform .lostmenot a {
	font-size: 16px !important;
	line-height: 1 !important;
}

/* ================================================================
   Krok 2 — hasło: zapewnij widoczność pola i zmniejsz odstępy
   ================================================================ */

/* Pole hasła — reset ewentualnych BB reguł direct-child */
body.login .et-lo-step--2 .user-pass-wrap,
body.login .et-lo-step--2 .wp-pwd {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

body.login .et-lo-step--2 input[type="password"],
body.login .et-lo-step--2 input#user_pass {
	display: block !important;
	width: 100% !important;
	pointer-events: auto !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Ikony przy polach (label ::before + wp-pwd ::before)
   html prefix → specyficzność (0,2,3) bije BB (0,2,2) — bez !important */
html .login form#loginform label[for="user_login"]:before,
html .login form#loginform label[for="user_pass"]:before {
	font-size: 18px;
	width: 18px;
	height: 18px;
	top: 17px;
}

/* .wp-pwd:before ma osobną regułę BB z .login prefix → potrzeba html .login */
html .login .user-pass-wrap .wp-pwd:before {
	font-size: 18px;
	width: 18px;
	height: 18px;
	top: 17px;
}

/* Inputy — wysokość 52px
   Specyficzność #login (id) > BB .login (class) → wygrywa bez !important */
#login form#loginform input[type="text"],
#login form#loginform input[type="password"],
#login form#lostpasswordform input[type="text"],
#login form#loginform input[type="text"]#user_pass {
	height: 52px;
	min-height: 52px;
	box-sizing: border-box;
}

/* Przyciski — wysokość 52px */
#login .button-primary,
#login .wp-generate-pw {
	height: 52px;
	min-height: 52px;
	line-height: 52px;
	padding-top: 0;
	padding-bottom: 0;
}

/* Przycisk "pokaż hasło" — wyrównaj do wysokości inputa */
#login .wp-pwd .button.wp-hide-pw {
	height: 52px;
	top: 0;
}

/* Ikona "pokaż hasło" — wyśrodkowana w 52px polu (20px icon → (52-20)/2 = 16px) */
#login .button.wp-hide-pw .dashicons {
	top: 16px;
	line-height: 1;
}

/* Mniejszy odstęp między hasłem a przyciskiem Zaloguj */
body.login .et-lo-step--2 .user-pass-wrap {
	margin-bottom: 6px !important;
}

body.login .et-lo-step--2 p.submit,
body.login .et-lo-step--2 .submit {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
}

body.login .et-lo-step--2 #wp-submit {
	margin-top: 0 !important;
}

/* Clearfix — forgetmenot (float:left) + #nav (float:right) w step2 */
body.login .et-lo-step--2::after {
	content: '';
	display: block;
	clear: both;
}

/* #nav ukryty globalnie — .lostmenot zastępuje je jako BB-owy link */
/* (reguła powyżej: body.login #nav { display: none !important; }) */

/* Padding-bottom karty po float-content */
body.login .et-lo-step--2 {
	padding-bottom: 20px;
}

/* .et-lo-magic-form — reset BB-owego margin-top z .login form */
body.login .et-lo-magic-form {
	margin-top: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	overflow: visible !important;
}

/* #backtoblog w step2 — ukryj duplikat lostpassword (mamy .lostmenot) */
body.login .et-lo-step--2 #backtoblog a[href*="lostpassword"],
body.login .et-lo-step--2 #backtoblog a[href*="action=lost"] {
	display: none !important;
}

/* Styl #backtoblog w step2 — wyrównanie i rozmiar czcionki */
body.login .et-lo-step--2 #backtoblog {
	clear: both;
	text-align: center;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--bb-content-border-color, #D6D9DD);
	font-size: 13px;
	color: var(--bb-alternate-text-color, #9B9C9F);
}

body.login .et-lo-step--2 #backtoblog a {
	font-size: 13px;
	color: var(--bb-alternate-text-color, #9B9C9F);
	text-decoration: none;
}

body.login .et-lo-step--2 #backtoblog a:hover {
	color: var(--bb-primary-color, #587BB6);
}

/* Privacy policy link — margin zerowy + separator jak w dividerze */
body.login #login .privacy-policy-page-link {
	margin: 0 !important;
	padding: 0 !important;
	text-align: center;
	font-size: 13px;
	color: var(--bb-alternate-text-color, #9B9C9F);
}

body.login #login .privacy-policy-page-link a {
	font-size: 13px;
	color: var(--bb-alternate-text-color, #9B9C9F);
	text-decoration: none;
}

body.login #login .privacy-policy-page-link a:hover {
	color: var(--bb-primary-color, #587BB6);
}