/* =====================================================================
   RETRO Chorten — wspólne style widoków /authenticate/*
   Dołączać globalnie (min.js / <link>) na stronach:
     login, remind-password, new-password-setter, logout.
   Selektory formularza scopowane pod .retro-login (klasa jest na
   <form> każdego z tych widoków), więc nie wpływają na resztę aplikacji.
   Motyw strony (reset.css/style.css/ourstyles.css) nadpisujemy tu
   celowo przez !important + wyższą specyficzność.
   ===================================================================== */

/* ---- Tło strony + układ (treść nieco wyżej, wyśrodkowana w poziomie) ---- */
body#login{ background:#0B0C0F !important; background-image:none !important; }
#login-wrapper, #login-wrapper.png_bg{
	background:transparent !important; background-image:none !important;
	min-height:100vh !important; box-sizing:border-box; position:relative; z-index:1;
	display:flex !important; flex-direction:column; align-items:center; justify-content:flex-start;
	gap:22px !important; padding:6vh 20px 40px !important;
}

/* ---- Logo + pulsujący glow + baza pod magnes 3D ---- */
#login-top{ margin:0 !important; padding:0 !important; height:auto !important; min-height:0 !important; text-align:center !important; float:none !important; position:relative; }
#login-top a{ position:relative; z-index:1; display:inline-block !important; margin:0 !important; padding:0 !important; }
#login-top #logo{ display:block !important; width:124px !important; height:auto !important; margin:0 auto !important; transition:transform .16s ease-out; transform-origin:center; will-change:transform; }
#login-top::before{ content:''; position:absolute; left:50%; top:52%; width:230px; height:150px; transform:translate(-50%,-50%) scale(1); transform-origin:center; background:radial-gradient(ellipse at center, rgba(242,132,60,.38), transparent 70%); filter:blur(24px); pointer-events:none; z-index:0; animation:rlGlow 4.5s ease-in-out infinite; }
@keyframes rlGlow{ 0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(.9); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); } }
#login-content{ margin:0 !important; padding:0 !important; float:none !important; width:auto !important; height:auto !important; min-height:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }

/* ---- Canvas equalizera (dodawany z JS) ---- */
#rlBg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* ==== RESET stylów motywu w obrębie formularza ==== */
.retro-login, .retro-login *{ box-sizing:border-box; }
.retro-login{ float:none !important; width:auto !important; background:none !important; border:0 !important; box-shadow:none !important; margin:0 !important; padding:0 !important; font-family:'Poppins','Quicksand','Open Sans',sans-serif; }
.retro-login p, .retro-login div, .retro-login span, .retro-login label{ float:none !important; }

/* ---- Karta ---- */
.retro-login .rl-card{
	position:relative; width:390px !important; max-width:92vw; margin:0 auto !important;
	background:#1C1E25 !important; border:1px solid rgba(255,255,255,.08) !important;
	border-radius:24px !important; box-shadow:0 30px 70px -34px rgba(0,0,0,.9) !important;
	padding:30px 28px 26px !important; box-sizing:border-box;
	animation:rlCardIn .55s cubic-bezier(.2,.7,.2,1) both; float:none !important; overflow:visible !important;
}
@keyframes rlCardIn{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

/* ---- Nagłówek karty ---- */
.retro-login .rl-head{ text-align:center !important; margin-bottom:18px; }
.retro-login .rl-title{ margin:0 !important; padding:0 !important; border:0 !important; font-size:20px !important; font-weight:800 !important; color:#F4F5F7 !important; letter-spacing:-.01em; line-height:1.15; background:none !important; text-align:center !important; }
.retro-login .rl-sub{ font-size:12.5px !important; color:#8B909A !important; margin-top:2px; text-align:center !important; }
.retro-login .rp-intro, .retro-login .np-hint{ font-size:12.5px !important; color:#8B909A !important; line-height:1.55 !important; margin:0 0 18px !important; text-align:center; }

/* ---- Komunikaty (messages.tpl + walidacja klienta) ---- */
.retro-login .notification, .retro-login .error, .retro-login .success, .retro-login .rl-alert{
	display:block; border-radius:12px !important; padding:10px 13px !important;
	font-size:12.5px !important; font-weight:600 !important; line-height:1.4 !important;
	margin:0 0 16px !important; float:none !important; border:1px solid transparent;
}
/* Motyw dokleja .notification>div{ padding:10px 10px 10px 36px } (miejsce na ikonę-tło) — zerujemy, bo padding daje zewnętrzny boks */
/* Treść powiadomień normalną wagą (nie bold); nagłówki/linki w treści mogą mieć własne <b>/<strong> */
.retro-login .notification > div{ padding:0 !important; font-weight:400 !important; }
/* Boksy 2FA (information/attention) zachowują lekkie podbicie wagi */
.retro-login .notification.information > div, .retro-login .notification.attention > div{ font-weight:500 !important; }
.retro-login .error, .retro-login .notification.error{ background:rgba(224,58,58,.12) !important; border-color:rgba(224,58,58,.4) !important; color:#F19A9A !important; }
.retro-login .success, .retro-login .notification.success{ background:rgba(37,180,99,.12) !important; border-color:rgba(37,180,99,.4) !important; color:#8FE3B4 !important; }
/* Alert błędu z backendu ({$login_error}) i walidacji klienta (.rl-alert-server / .rl-alert-client) — ikona obok treści + kolor błędu */
.retro-login .rl-alert{ display:flex !important; align-items:flex-start; gap:9px; background:rgba(224,58,58,.12) !important; border:1px solid rgba(224,58,58,.4) !important; color:#F19A9A !important; }
.retro-login .rl-alert > i{ margin-top:1px; flex:none; font-size:14px; color:#F19A9A !important; }
.retro-login .rl-alert > div{ font-weight:600 !important; }

/* ---- Sukces "Ustaw nowe hasło" ---- */
.retro-login .np-done{ display:flex; align-items:center; gap:11px; background:rgba(37,180,99,.12); border:1px solid rgba(37,180,99,.4); border-radius:14px; padding:14px 15px; margin-bottom:16px; }
.retro-login .np-done-ic{ width:34px; height:34px; flex:none; border-radius:50%; background:#25B463; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:15px; }
.retro-login .np-done-txt{ font-size:13px; color:#CFEFDD; line-height:1.4; }

/* ---- Pola ---- */
.retro-login .rl-fields{ transition:filter .4s ease, opacity .4s ease; display:block !important; }
.retro-login .rl-field{ position:relative !important; margin-bottom:12px !important; display:block !important; float:none !important; width:100% !important; }
.retro-login .rl-lead{ position:absolute !important; left:16px; top:26px; transform:translateY(-50%); color:#5A6070 !important; font-size:14px !important; pointer-events:none; z-index:2; margin:0 !important; }
.retro-login input.rl-input, .retro-login input.text-input.rl-input{
	display:block !important; width:100% !important; height:52px !important; box-sizing:border-box !important;
	margin:0 !important; padding:0 46px 0 44px !important; background:#111318 !important;
	border:1px solid rgba(255,255,255,.09) !important; border-radius:14px !important;
	color:#F4F5F7 !important; font-family:inherit !important; font-size:15px !important;
	outline:none !important; float:none !important; text-align:left !important; box-shadow:none !important;
	transition:border-color .15s, box-shadow .15s;
}
.retro-login input.rl-input::placeholder{ color:#565C68 !important; }
.retro-login input.rl-input:focus{ border-color:#F2843C !important; box-shadow:0 0 0 3px rgba(242,132,60,.18), 0 0 22px -2px rgba(242,132,60,.45) !important; }

/* Podgląd/ukrycie hasła */
.retro-login .rl-eye{ position:absolute !important; right:8px; top:26px; transform:translateY(-50%); width:34px !important; height:34px !important; display:inline-flex !important; align-items:center; justify-content:center; background:transparent !important; border:none !important; color:#6B7280 !important; cursor:pointer; border-radius:9px; z-index:3; padding:0 !important; box-shadow:none !important; float:none !important; text-transform:none !important; }
.retro-login .rl-eye:hover{ color:#A2A8B2 !important; }

/* Zielony znacznik poprawności — domyślnie z prawej; jeśli w polu jest "oko", przesuń w lewo */
.retro-login .rl-valid{ position:absolute !important; right:15px; top:26px; transform:translateY(-50%); color:#25B463 !important; font-size:15px !important; opacity:0; transition:opacity .2s; pointer-events:none; z-index:2; }
.retro-login .rl-field:has(.rl-eye) .rl-valid{ right:44px; }
.retro-login .rl-field.is-valid .rl-valid{ opacity:1; }

/* Caps Lock */
.retro-login .rl-caps{ display:none; align-items:center; gap:7px; color:#E6B15E !important; font-size:11.5px !important; font-weight:700; margin-top:9px; }
.retro-login .rl-caps.is-on{ display:flex; }

/* Miernik siły hasła + zgodność haseł */
.retro-login .np-meter{ height:5px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin:-2px 2px 12px; }
.retro-login .np-meter span{ display:block; height:100%; width:0; border-radius:999px; background:#D53A3A; transition:width .25s, background .25s; }
.retro-login .np-meter.s1 span{ width:33%; background:#D53A3A; }
.retro-login .np-meter.s2 span{ width:66%; background:#E6B15E; }
.retro-login .np-meter.s3 span{ width:100%; background:#25B463; }
.retro-login .np-match{ min-height:16px; font-size:11.5px; font-weight:700; margin:-4px 2px 0; }
.retro-login .np-match.ok{ color:#8FE3B4; }
.retro-login .np-match.bad{ color:#F19A9A; }

/* ---- Zgoda RODO (#akceptacja) — nagłówek przypięty, scroll tylko treści ---- */
.retro-login #akceptacja.rl-consent{ display:block !important; width:100% !important; margin:22px 0 0 !important; background:#111318 !important; border:1px solid rgba(255,255,255,.07) !important; padding:13px 14px !important; box-sizing:border-box; border-radius:12px !important; float:none !important; height:auto !important; overflow:visible !important; }
.retro-login #akceptacja .rl-consent-head{ margin:0 0 8px !important; font-size:12.5px !important; line-height:1.45 !important; color:#E6E8EB !important; }
.retro-login #akceptacja .rl-consent-body{ height:118px !important; overflow-y:auto !important; font-size:12px !important; color:#8B909A !important; line-height:1.5 !important; text-align:justify !important; padding-right:8px !important; }
.retro-login #akceptacja.rl-consent b{ color:#E6E8EB !important; font-weight:700 !important; }
.retro-login .rl-consent-check{ color:#F2843C !important; cursor:help; }

/* ---- Tooltip zgody (custom, scoped, hover) ---- */
.retro-login .rl-consent-tip{ position:relative; display:inline-block; }
.retro-login .rl-consent-tip .rl-tip{
	position:absolute; left:-8px; bottom:calc(100% + 12px);
	width:290px; max-width:74vw; box-sizing:border-box;
	background:#14161C !important; color:#E7EAF0 !important;
	border:1px solid rgba(255,255,255,.09) !important; border-radius:14px !important;
	padding:12px 15px !important; box-shadow:0 20px 44px -14px rgba(0,0,0,.85);
	font-weight:400 !important; font-size:13px !important; line-height:1.5 !important; text-align:left !important;
	white-space:normal; opacity:0; visibility:hidden; transform:translateY(4px);
	transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:60; pointer-events:none;
}
.retro-login .rl-consent-tip:hover .rl-tip{ opacity:1; visibility:visible; transform:translateY(0); }
.retro-login .rl-tip .rl-tip-head{ display:flex; align-items:center; gap:7px; font-weight:700 !important; color:#F4F5F7 !important; font-size:13.5px !important; margin-bottom:5px; }
.retro-login .rl-tip .rl-tip-head i{ color:#F2843C !important; font-size:13px !important; margin:0 !important; }
.retro-login .rl-consent-tip .rl-tip::after{ content:''; position:absolute; top:100%; left:20px; border:7px solid transparent; border-top-color:#14161C; }

#akceptacja .rl-consent-body::-webkit-scrollbar{ width:6px; }
#akceptacja .rl-consent-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }
#akceptacja .rl-consent-body::-webkit-scrollbar-track{ background:transparent; }

/* ---- Przycisk główny (zwija się do kółka w stanie ładowania) ---- */
.retro-login .rl-actions{ display:flex !important; justify-content:center !important; margin-top:20px !important; float:none !important; width:100% !important; }
.retro-login a.rl-btn, .retro-login button.rl-btn{
	position:relative !important; appearance:none; border:none !important; cursor:pointer;
	font-family:inherit !important; font-weight:700 !important; font-size:15px !important; color:#fff !important;
	background:#F2843C !important; background-image:none !important; text-decoration:none !important;
	height:48px !important; width:100% !important; min-width:0 !important; margin:0 !important;
	display:inline-flex !important; align-items:center; justify-content:center; gap:9px;
	padding:0 24px !important; border-radius:13px !important; overflow:hidden; white-space:nowrap;
	box-shadow:0 10px 24px -8px rgba(242,132,60,.65) !important;
	float:none !important; text-transform:none !important; letter-spacing:normal !important;
	transition:width .5s cubic-bezier(.65,0,.2,1), border-radius .5s cubic-bezier(.65,0,.2,1), background .2s;
}
.retro-login a.rl-btn:hover, .retro-login button.rl-btn:hover{ background:#E5761F !important; }
.retro-login .rl-btn .rl-btn-label{ display:inline-flex !important; align-items:center; gap:9px; }
.retro-login .rl-btn .rl-spinner{ display:none; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:rlSpin .7s linear infinite; }
.retro-login button.rl-btn.is-loading{ width:48px !important; min-width:48px !important; max-width:48px !important; padding:0 !important; border-radius:999px !important; pointer-events:none; }
.retro-login .rl-btn.is-loading .rl-btn-label{ display:none !important; }
.retro-login .rl-btn.is-loading .rl-spinner{ display:block !important; }
@keyframes rlSpin{ to{ transform:rotate(360deg);} }

/* ---- Pod przyciskiem: link / komunikat ładowania ---- */
.retro-login .rl-below{ text-align:center !important; margin-top:15px !important; min-height:18px; float:none !important; width:100% !important; }
.retro-login .rl-forgot{ font-size:13px !important; color:#A2A8B2 !important; text-decoration:none !important; float:none !important; display:inline-flex; align-items:center; gap:6px; }
.retro-login .rl-forgot:hover{ color:#F2843C !important; }
.retro-login .rl-loading-note{ display:none; align-items:center; gap:8px; justify-content:center; font-size:13px; color:#A2A8B2 !important; }
.retro-login .rl-dot{ width:6px; height:6px; border-radius:50%; background:#F2843C; animation:rlPulse 1s infinite; }
@keyframes rlPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} }
.retro-login .rl-card.is-processing .rl-fields{ filter:blur(4px); opacity:.45; pointer-events:none; }
.retro-login .rl-card.is-processing .rl-forgot{ display:none; }
.retro-login .rl-card.is-processing .rl-loading-note{ display:inline-flex; }

/* ==== 2FA (enter-code) ==== */
.retro-login .notification.information, .retro-login .notification.attention{ display:flex; align-items:flex-start; gap:9px; border-radius:12px !important; padding:11px 13px !important; font-size:12.5px !important; font-weight:500 !important; line-height:1.45 !important; margin:0 0 12px !important; float:none !important; border:1px solid transparent; }
.retro-login .notification.information{ background:rgba(88,140,240,.12) !important; border-color:rgba(88,140,240,.35) !important; color:#BFD2F5 !important; }
.retro-login .notification.attention{ background:rgba(242,132,60,.12) !important; border-color:rgba(242,132,60,.38) !important; color:#F2C79C !important; }
.retro-login .notification.information > div::before{ content:'\f0eb'; font-family:'Font Awesome 5 Pro'; font-weight:900; margin-right:7px; color:#8FB0F0; }
.retro-login .notification.attention > div::before{ content:'\f7cd'; font-family:'Font Awesome 5 Pro'; font-weight:900; margin-right:7px; color:#F2843C; }
.retro-login .notification.error.blink_me{ animation:rlBlink 1s ease-in-out 3; }
@keyframes rlBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

.retro-login .rl-otp{ display:flex !important; gap:10px; justify-content:center; margin:6px 0 4px; }
.retro-login .rl-otp input{
	width:56px !important; height:64px !important; text-align:center !important; padding:0 !important; margin:0 !important;
	background:#111318 !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:14px !important;
	color:#F4F5F7 !important; font-family:'Poppins',monospace !important; font-size:26px !important; font-weight:700 !important;
	outline:none !important; box-shadow:none !important; float:none !important; -moz-appearance:textfield;
	transition:border-color .15s, box-shadow .15s, background .15s;
}
.retro-login .rl-otp input::-webkit-outer-spin-button, .retro-login .rl-otp input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.retro-login .rl-otp input:focus{ border-color:#F2843C !important; box-shadow:0 0 0 3px rgba(242,132,60,.18), 0 0 22px -2px rgba(242,132,60,.45) !important; }
.retro-login .rl-otp input.filled{ border-color:rgba(242,132,60,.55) !important; background:#161822 !important; }
.retro-login .rl-otp.err input{ border-color:rgba(224,58,58,.6) !important; }
.retro-login .rl-otp-label{ display:block !important; float:none !important; width:100% !important; text-align:center; font-size:12.5px; color:#8B909A; margin:2px 0 10px; }

/* ==== FAB-y (Fundacja / Kontakt) — jak w oryginale ==== */
#kontaktieren{ display:block; position:absolute; bottom:35px; right:45px; z-index:100; width:70px; height:70px; border-radius:70px; line-height:70px; font-size:40px; text-align:center; border:5px solid #ffffff; background-color:#1c87c9; color:#fff; animation:glowing 1300ms infinite; float:none !important; }
@keyframes glowing{ 0%{ background-color:#2ba805; box-shadow:0 0 3px #2ba805; } 50%{ background-color:#49e819; box-shadow:0 0 10px #49e819; } 100%{ background-color:#2ba805; box-shadow:0 0 3px #2ba805; } }
@keyframes glowingred{ 0%{ background-color:#eb212e; box-shadow:0 0 3px #8d1313; } 50%{ background-color:#c50303; box-shadow:0 0 10px #ff1f1f; } 100%{ background-color:#eb212e; box-shadow:0 0 3px #8d1313; } }
#fundacja{ display:block; position:absolute; bottom:35px; left:45px; z-index:100; width:70px; height:70px; border-radius:70px; line-height:90px; font-size:40px; text-align:center; border:5px solid #ffffff; background-color:#ff0000; color:#fff; animation:glowingred 1300ms infinite; float:none !important; }
a:hover{ color:#F2843C; }