/* Dialog Obronny — zaślepka z hasłem. */

html,
body.do-gate {
	background: #000;
	min-height: 100%;
}

body.do-gate {
	margin: 0;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.do-gate .admin-bar { display: none; }

.do-gate__in {
	width: min(100%, 360px);
	padding: 40px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
}

.do-gate__logo {
	display: flex;
	justify-content: center;
}

.do-gate__logo img {
	display: block;
	width: auto;
	height: 36px;
}

.do-gate__form {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 28px;
}

.do-gate__field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.do-gate__lbl {
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--do-lbl);
}

.do-gate__input {
	width: 100%;
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: none;
	padding: 12px 0;
	color: var(--do-tx);
	font-size: 16px;
	font-weight: 400;
	font-family: inherit;
	letter-spacing: .08em;
}

.do-gate__line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--do-line2);
}

.do-gate__line::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: var(--do-grad);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s var(--do-ease);
}

.do-gate__field:focus-within .do-gate__lbl { color: var(--do-tx); }
.do-gate__field:focus-within .do-gate__line::after { transform: scaleX(1); }

.do-gate__form.is-error .do-gate__lbl { color: var(--do-or); }
.do-gate__form.is-error .do-gate__line::after {
	background: var(--do-rd);
	transform: scaleX(1);
}

.do-gate__form .do-btn { align-self: flex-start; }

.do-gate__err {
	margin: -12px 0 0;
	font-size: 13px;
	color: var(--do-or);
}

@media (max-width: 420px) {
	.do-gate__logo img { height: 28px; }
	.do-gate__in { gap: 44px; }
}