/* Чекбокс согласия на обработку персональных данных (работа №182, neftopt.ru) */

.consent_field {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 10px 0 14px;
	text-align: left;
	line-height: 1.4;
}

/* В style.css темы есть глобальное правило
   [type=checkbox]:checked, [type=checkbox]:not(:checked) { position:absolute; left:-9999px;
   width:0; height:0; visibility:hidden }
   — оно прячет ВСЕ чекбоксы (тема рисует свои через псевдоэлементы). Возвращаем видимый
   квадратик именно для поля согласия: селектор специфичнее теминого + !important.
   Скрытый required-чекбокс недопустим: Chrome не может показать на нём подсказку
   («not focusable»), и форма молча перестаёт отправляться. */
.consent_field .consent_field__input[type="checkbox"],
.consent_field .consent_field__input[type="checkbox"]:checked,
.consent_field .consent_field__input[type="checkbox"]:not(:checked) {
	position: static !important;
	left: auto !important;
	top: auto !important;
	visibility: visible !important;
	display: inline-block !important;
	flex: 0 0 auto;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	margin: 1px 0 0 !important;
	padding: 0;
	opacity: 1 !important;
	appearance: auto;
	-webkit-appearance: checkbox;
	accent-color: #ef5c2b;
	cursor: pointer;
}

.consent_field__input:focus-visible {
	outline: 2px solid #ef5c2b;
	outline-offset: 2px;
}

.consent_field__text {
	flex: 1 1 auto;
	display: block;
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: inherit;
	opacity: .85;
	cursor: pointer;
	user-select: none;
}

.consent_field__text a {
	color: inherit;
	text-decoration: underline;
}

.consent_field__text a:hover {
	color: #ef5c2b;
	text-decoration: underline;
}

/* подсветка, если пользователь пытается отправить форму без галочки */
.consent_field.is-error .consent_field__input {
	outline: 2px solid #e03131;
	outline-offset: 2px;
}

.consent_field.is-error .consent_field__text { color: #e03131; opacity: 1; }

/* компактная форма в подвале — чекбокс на всю ширину строки */
.x__form .consent_field {
	flex-basis: 100%;
	width: 100%;
	margin: 8px 0 0;
	order: 10;
}

.x__form .consent_field__text { opacity: .8; }

@media (max-width: 767px) {
	.consent_field { margin: 8px 0 12px; }
	.consent_field__text { font-size: 11.5px; }

	/* на телефоне квадратик крупнее — удобнее попасть пальцем */
	.consent_field .consent_field__input[type="checkbox"],
	.consent_field .consent_field__input[type="checkbox"]:checked,
	.consent_field .consent_field__input[type="checkbox"]:not(:checked) {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px;
	}
}