/* ===========================================================
   Согласие на обработку ПДн: обязательный чекбокс в формах.
   Валидацию делает app.js (data-required на чекбоксе):
   при незаполненном чекбоксе он вешает _form-error на инпут
   и на родителя (label.form-agree) на 700 мс.
   =========================================================== */

.form-agree {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	flex: 1 1 18.125rem;
	font-size: .9375rem;
	line-height: 1.3;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

/* инпут скрыт визуально, но НЕ display:none —
   иначе app.js пропустит его при валидации (offsetParent === null) */
.form-agree__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.form-agree__box {
	flex-shrink: 0;
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: .0625rem;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	transition: background .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out;
}

.form-agree__box::after {
	content: "";
	position: absolute;
	top: .1875rem;
	left: .375rem;
	width: .375rem;
	height: .625rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .15s ease-out;
}

.form-agree__input:checked + .form-agree__box {
	background: #3840ff;
	border-color: #3840ff;
}

.form-agree__input:checked + .form-agree__box::after {
	transform: rotate(45deg) scale(1);
}

.form-agree__input:focus-visible + .form-agree__box {
	box-shadow: 0 0 0 3px rgba(56, 64, 255, .35);
}

.form-agree:hover .form-agree__box {
	border-color: rgba(255, 255, 255, .6);
}

/* ошибка валидации: чекбокс не отмечен */
.form-agree._form-error .form-agree__box {
	border-color: #ff4d4d;
	box-shadow: 0 0 12px rgba(255, 77, 77, .45);
}

.form-agree__label a {
	text-decoration-line: underline;
	text-decoration-color: #3840ff;
	text-underline-offset: .125rem;
}

.form-agree__label a:hover {
	text-decoration: none;
}