.lanf-open {
	appearance: none;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	background: #4c5aa3;
	color: #f5f7ff;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.lanf {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
	background: rgba(6, 7, 12, 0.72);
}

.lanf[hidden] {
	display: none !important;
}

.lanf__card {
	position: relative;
	width: min(640px, 100%);
	max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px));
	overflow: auto;
	padding: 28px 28px 22px;
	border: 1px solid rgba(125, 163, 255, 0.28);
	border-radius: 16px;
	background: #1f2333;
	color: #e6e8f0;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.lanf__card h2 {
	margin: 0 36px 8px 0;
	font-size: 1.7rem;
	line-height: 1.15;
}

.lanf__lead {
	margin: 0 0 16px;
	color: #9aa3b8;
}

.lanf__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
}

.lanf__close span,
.lanf__close span::before {
	position: absolute;
	left: 12px;
	top: 21px;
	width: 20px;
	height: 2px;
	background: #e6e8f0;
	content: "";
}

.lanf__close span { transform: rotate(45deg); }
.lanf__close span::before { left: 0; top: 0; transform: rotate(90deg); }

.lanf__close:focus-visible,
.lanf__send:focus-visible,
.lanf__card input:focus-visible,
.lanf__card textarea:focus-visible {
	outline: 2px solid rgba(125, 163, 255, 0.7);
	outline-offset: 2px;
}

.lanf__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lanf__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
}

.lanf__span { grid-column: 1 / -1; }

.lanf__grid label,
.lanf__check {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: #c6ccda;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
}

.lanf__req { color: #7da3ff; }

.lanf__card input:not([type="checkbox"]),
.lanf__card textarea {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 14px;
	border: 0;
	border-radius: 10px;
	background: #14161e;
	color: #e6e8f0;
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.lanf__card textarea {
	min-height: 112px;
	resize: vertical;
}

.lanf__check {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	color: #e6e8f0;
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1.45;
}

.lanf__check input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex: none;
	accent-color: #7da3ff;
}

.lanf__check a { color: #c5d4ff; }

.lanf__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
}

.lanf__send {
	appearance: none;
	min-height: 48px;
	padding: 0 20px;
	border: 1px solid #6d7bc4;
	border-radius: 8px;
	background: #4c5aa3;
	color: #f5f7ff;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.lanf__send:hover { background: #5d6cba; color: #fff; }
.lanf__send:disabled { opacity: 0.7; cursor: wait; }

.lanf__status:empty { display: none; }
.lanf__status {
	margin: 0 0 12px;
	color: #ffb4b4;
	font-size: 0.95rem;
}
.lanf__status.is-ok { color: #d5e2ff; }

.lanf.is-done .lanf__form { display: none; }

.lanf--light .lanf__card {
	background: #f6f7fb;
	color: #1c1e26;
	border-color: rgba(36, 48, 86, 0.16);
}
.lanf--light .lanf__lead { color: #5c6474; }
.lanf--light .lanf__grid label { color: #3a4150; }
.lanf--light .lanf__check { color: #1c1e26; }
.lanf--light .lanf__check a { color: #2a3d86; }
.lanf--light .lanf__card input:not([type="checkbox"]),
.lanf--light .lanf__card textarea {
	background: #e7eaf2;
	color: #1c1e26;
}
.lanf--light .lanf__close span,
.lanf--light .lanf__close span::before { background: #1c1e26; }

@media (max-width: 640px) {
	.lanf { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
	.lanf__card { padding: 22px 16px 16px; border-radius: 14px 14px 10px 10px; }
	.lanf__grid { grid-template-columns: 1fr; }
	.lanf__actions, .lanf__send { width: 100%; }
}
