/*
 * Prihlasovaci stranka s promo kampanemi (Web Skoly)
 * Kampane se nacitaji z https://auth.web-skoly.cz/promo.php (login-promo.js).
 * Bez promo dat stranka funguje samostatne (tmave pozadi, karta na stredu).
 */

html, body { margin: 0; padding: 0; min-height: 100%; }

body.ws-login {
	background: #1a1d1a;
	font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

/* ---------- pozadi ---------- */
.ws-bg-img { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; z-index: 0; }
.ws-bg-img.on { opacity: 1; animation: wsZoom 12s ease-out both; }
@keyframes wsZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.ws-tint { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
.ws-grad { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
	background: linear-gradient(100deg, rgba(10,14,12,0.72) 0%, rgba(10,14,12,0.45) 42%, rgba(10,14,12,0.15) 70%, rgba(10,14,12,0.35) 100%); }

/* ---------- layout ---------- */
.ws-layout {
	position: relative; z-index: 2;
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	align-content: center;
	gap: 40px;
	padding: 48px 24px 96px;
	box-sizing: border-box;
}
@media (min-width: 1100px) {
	body.ws-has-promo .ws-layout {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		justify-items: start;
		padding: 48px 72px 96px;
	}
	body.ws-has-promo .ws-card { justify-self: end; }
}

/* ---------- promo panel ---------- */
.ws-promo { max-width: 640px; width: 100%; color: #fff; animation: wsFade .7s .15s ease-out both; }
.ws-promo[hidden] { display: none; }
@keyframes wsFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.ws-badge {
	display: inline-flex; align-items: center; gap: 10px;
	background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-radius: 999px; padding: 8px 18px;
	font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.ws-badge .ws-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a623; display: inline-block; }

.ws-claim {
	font-family: 'Bricolage Grotesque', 'Nunito Sans', sans-serif;
	font-weight: 800; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.06;
	margin: 22px 0 16px; letter-spacing: -0.02em;
	text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.ws-sub { font-size: 17px; line-height: 1.55; margin: 0 0 28px; color: rgba(255,255,255,0.88); max-width: 480px; }

.ws-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ws-cta {
	display: inline-flex; align-items: center; gap: 10px;
	background: #f5a623; color: #14170f;
	font-weight: 800; font-size: 15px; padding: 14px 28px; border-radius: 999px;
	text-decoration: none; white-space: nowrap;
	box-shadow: 0 8px 28px rgba(0,0,0,0.35);
	transition: filter .15s;
}
.ws-cta:hover { filter: brightness(1.08); color: #14170f; }
.ws-cta-domain { font-size: 13px; color: rgba(255,255,255,0.65); }

.ws-dots { display: flex; gap: 10px; margin-top: 42px; }
.ws-dotbtn { width: 34px; height: 6px; border-radius: 999px; border: none; cursor: pointer; padding: 0; background: rgba(255,255,255,0.35); }

/* ---------- login karta ---------- */
.ws-card {
	width: 400px; max-width: 100%;
	background: #fff; border-radius: 20px;
	box-shadow: 0 24px 64px rgba(0,0,0,0.35);
	padding: 36px 32px; box-sizing: border-box;
}
.ws-card-head { margin-bottom: 24px; }
.ws-card-title { font-family: 'Bricolage Grotesque', 'Nunito Sans', sans-serif; font-weight: 700; font-size: 23px; color: #1c2126; letter-spacing: -0.01em; }
.ws-card-sub { font-size: 14px; color: #6b7580; margin-top: 4px; }

/* Nette formular (renderer WRAPPED: div.form-group > label + input) */
.ws-card .form-group { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; }
.ws-card .form-group label { font-size: 13px; font-weight: 800; color: #37404a; }
.ws-card input[type=text], .ws-card input[type=password], .ws-card select {
	height: 46px; border: 1.5px solid #dde2e8; border-radius: 10px;
	padding: 0 14px; font-size: 15px; font-family: inherit; color: #1c2126;
	outline: none; width: 100%; box-sizing: border-box; background: #fff;
}
.ws-card input[type=text]:focus, .ws-card input[type=password]:focus, .ws-card select:focus {
	border-color: #f5a623; box-shadow: 0 0 0 3px rgba(245,166,35,0.18);
}
.ws-card input::placeholder { color: #9aa3ad; }
.ws-card input[type=submit], .ws-card button[type=submit] {
	width: 100%; height: 48px; border: none; border-radius: 10px;
	background: #1fa05a; color: #fff; font-size: 16px; font-weight: 800; font-family: inherit;
	cursor: pointer; margin-top: 4px; transition: background .15s;
}
.ws-card input[type=submit]:hover, .ws-card button[type=submit]:hover { background: #178a4c; }

.ws-card .alert { border-radius: 10px; padding: 11px 15px; margin: 0 0 14px; font-size: 14px; border: 1px solid transparent; }
.ws-card .alert-danger { background: #fdecea; border-color: #f5c6c0; color: #8d2f26; }
.ws-card .alert-success, .ws-card .alert-info { background: #e6f7ee; border-color: #b5e5cb; color: #14603a; }
.ws-card .alert .close { float: right; border: none; background: none; font-size: 18px; line-height: 1; color: inherit; opacity: .5; cursor: pointer; }
.ws-card .error-message { color: #c0392b; font-size: 13px; font-weight: 700; }
.ws-card .help-block { font-size: 13px; }

.ws-forgot { display: block; text-align: center; font-size: 14px; color: #6b7580; text-decoration: none; margin-top: 12px; }
.ws-forgot:hover { color: #1c2126; text-decoration: underline; }

.ws-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; }
.ws-divider i { flex: 1; height: 1px; background: #e6eaef; }
.ws-divider span { font-size: 12px; color: #9aa3ad; white-space: nowrap; }

.ws-socials { display: flex; flex-direction: column; gap: 10px; }
.ws-btn-social {
	height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px;
	border-radius: 10px; font-size: 15px; font-weight: 700; font-family: inherit;
	text-decoration: none; transition: background .15s;
}
.ws-btn-google { border: 1.5px solid #dde2e8; background: #fff; color: #1c2126; }
.ws-btn-google:hover { background: #f6f8fa; color: #1c2126; }
.ws-btn-apple { border: none; background: #101418; color: #fff; }
.ws-btn-apple:hover { background: #23282e; color: #fff; }

/* ---------- paticka ---------- */
.ws-foot { position: fixed; z-index: 2; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; pointer-events: none; }
.ws-foot a { pointer-events: auto; }
.ws-foot img { height: 34px; display: block; opacity: 0.95; }

/* ---------- mobil ---------- */
@media (max-width: 560px) {
	.ws-layout { padding: 28px 16px 20px; gap: 26px; align-content: start; }
	.ws-card { padding: 28px 22px; }
	.ws-claim { font-size: clamp(26px, 7.5vw, 38px); margin: 18px 0 12px; }
	.ws-sub { font-size: 15px; margin-bottom: 22px; }
	.ws-dots { margin-top: 26px; }
	.ws-foot { position: static; margin: 18px 0 24px; }
}