/* Prihlásenie — svetlé ako zvyšok webu.
   Pozor na špecificitu: pravidlo body.fb-portal má element aj triedu, takže
   pozadie sa tu musí prepísať tiež cez body, inak neprebije a biely text
   skôrčí na svetlom podklade. */

body.fb-portal--login{
	padding-bottom:0;
	background:var(--pod);
	color:var(--text);
	min-height:100vh;
	min-height:100dvh;
	display:flex;
	align-items:center;
}

.fb-login{width:100%;max-width:410px;margin:auto;padding:36px 22px 44px}
.fb-login__logo{display:block;margin-bottom:36px;font-weight:800;font-size:22px;text-decoration:none;color:var(--text)}
.fb-login__logo img{height:34px;width:auto}
.fb-login h1{font-size:40px;font-weight:800;letter-spacing:-.035em;line-height:1;margin-bottom:12px;color:var(--text)}
.fb-login .fb-uvod{color:var(--tich);font-size:16px;line-height:1.45;margin-bottom:22px;max-width:34ch}
.fb-login .fb-flash{margin-bottom:16px}

.fb-login .fb-form{background:var(--papier);border:1px solid var(--linka);border-radius:16px;padding:20px}
.fb-login .fb-form label{color:var(--text);margin-top:0}
.fb-login .fb-form input[type=text],
.fb-login .fb-form input[type=email],
.fb-login .fb-form input[type=password]{
	background:var(--pod);border-color:var(--linka);color:var(--text);font-size:16px;
}
.fb-login .fb-form input::placeholder{color:#A29CA0}
.fb-login .fb-form .fb-btn{width:100%;padding:15px 18px;font-size:16px;border-radius:12px}
.fb-login .fb-form .fb-tich{color:var(--tich);margin-top:10px}

/* Druhotné cesty dnu. Vlastný šipkový znak namiesto trojuholníka prehliadača,
   aby to vyzeralo ako tlačidlo a nie ako nedorobok. */
.fb-login .fb-detail{
	margin-top:10px;background:var(--papier);border:1px solid var(--linka);
	border-radius:14px;overflow:hidden;
}
.fb-login .fb-detail summary{
	list-style:none;cursor:pointer;padding:16px 18px;color:var(--text);
	font-weight:700;font-size:15px;
	display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.fb-login .fb-detail summary::-webkit-details-marker{display:none}
.fb-login .fb-detail summary::after{
	content:"";width:8px;height:8px;flex:none;
	border-right:2px solid var(--tich);border-bottom:2px solid var(--tich);
	transform:rotate(-45deg);transition:transform .18s ease;
}
.fb-login .fb-detail[open] summary{border-bottom:1px solid var(--linka)}
.fb-login .fb-detail[open] summary::after{transform:rotate(45deg)}
.fb-login .fb-detail .fb-form{border:0;border-radius:0;background:transparent;padding:4px 18px 20px}
.fb-login .fb-detail .fb-btn{background:transparent;color:var(--text);border:1px solid var(--linka)}

.fb-login__spat{margin-top:30px;text-align:center}
.fb-login__spat a{color:var(--tich);font-size:14px}

.fb-kroky{list-style:none;margin:22px 0 6px;padding:0;counter-reset:krok;display:grid;gap:12px}
.fb-kroky li{position:relative;padding-left:38px;font-size:14px;line-height:1.5;color:#4A4547}
.fb-kroky li strong{color:#141215}
.fb-kroky li::before{counter-increment:krok;content:counter(krok);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:#141215;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}