/**
 * Ошибки заполнения форм: плашка у поля и красная подсветка поля.
 * Формы: Contact Form 7 (все), комментарии, оформление заказа WooCommerce.
 * Подключение — dedodet_form_errors_assets() в functions.php, логика — js/form-errors.js.
 *
 * Плашки позиционируются абсолютно — высота формы при ошибках не меняется.
 * Цвета зависят от фона формы: светлый фон — красная плашка, тёмный
 * (фото в слайдере и в блоке .obr-fon, белый текст .ld-form) — белая плашка.
 * Специфичность и !important нужны, чтобы перебить «Дополнительные стили»
 * из настройщика (выводятся позже) и стили формы в article-lead.css.
 */

:root {
	--dddt-fe-red: #e12530;
	--dddt-fe-tip-color: #fff;
	--dddt-fe-tip-bg: #e12530;
	--dddt-fe-tip-shadow: 0 2px 6px rgba(225, 37, 48, .3);
	--dddt-fe-ring: inset 0 0 0 2px #e12530;
	--dddt-fe-check-shadow: none;
}

/* Тёмный фон: белая плашка, вокруг красной рамки поля — белая обводка */
.ld-form:not(.shop-grid-home-form):not(.article-lead__form) {
	--dddt-fe-tip-color: #c4101c;
	--dddt-fe-tip-bg: #fff;
	--dddt-fe-tip-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	--dddt-fe-ring: inset 0 0 0 2px #e12530, 0 0 0 2px #fff;
	--dddt-fe-check-shadow: 0 0 0 6px #fff;
}

/* Контейнеры, от которых отсчитывается плашка */
.wpcf7 form .wpcf7-form-control-wrap,
.dddt-fe-anchor {
	position: relative;
}

.woocommerce-checkout .woocommerce-input-wrapper {
	position: relative;
	display: block;
}

/* Плашка: на верхней границе поля, слева */
.wpcf7 form .wpcf7-form-control-wrap > .wpcf7-not-valid-tip,
.dddt-fe-tip {
	position: absolute;
	top: 0;
	right: auto;
	bottom: auto;
	left: 12px;
	z-index: 5;
	display: block;
	max-width: calc(100% - 24px);
	margin: 0;
	padding: 3px 8px;
	border: 0;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	color: var(--dddt-fe-tip-color);
	background: var(--dddt-fe-tip-bg);
	box-shadow: var(--dddt-fe-tip-shadow);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	animation: dddt-fe-in .2s ease-out;
	pointer-events: none;
	transform: translateY(-50%);
}

/* Справа — где слева над полем подпись (оформление заказа) */
.dddt-fe-tip--right {
	right: 8px;
	left: auto;
	max-width: calc(100% - 16px);
	white-space: normal;
}

/* Чекбокс согласия: плашка под текстом, стрелка на чекбокс */
.wpcf7 form .wpcf7-form-control-wrap > .wpcf7-acceptance ~ .wpcf7-not-valid-tip,
.dddt-fe-tip--below,
.dddt-fe-tip--above {
	top: 100%;
	left: 0;
	max-width: 100%;
	margin-top: 6px;
	overflow: visible;
	white-space: normal;
	animation-name: dddt-fe-in-static;
	transform: none;
}

/* Над текстом — где под чекбоксом сразу кнопка (оформление заказа) */
.dddt-fe-tip--above {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: 6px;
}

.wpcf7 form .wpcf7-form-control-wrap > .wpcf7-acceptance ~ .wpcf7-not-valid-tip::before,
.dddt-fe-tip--below::before,
.dddt-fe-tip--above::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: var(--dddt-fe-arrow, 2px);
	border: 5px solid transparent;
	border-bottom-color: var(--dddt-fe-tip-bg);
}

.dddt-fe-tip--above::before {
	top: 100%;
	bottom: auto;
	border-color: transparent;
	border-top-color: var(--dddt-fe-tip-bg);
}

/* Подсветка полей */
.wpcf7 form .wpcf7-not-valid:not(.wpcf7-acceptance),
.dddt-fe-invalid:not([type="checkbox"]),
.woocommerce-checkout .woocommerce-invalid .input-text {
	border-color: var(--dddt-fe-red) !important;
	box-shadow: var(--dddt-fe-ring) !important;
}

.wpcf7 form .wpcf7-acceptance.wpcf7-not-valid input[type="checkbox"],
input[type="checkbox"].dddt-fe-invalid {
	outline: 2px solid var(--dddt-fe-red);
	outline-offset: 2px;
	box-shadow: var(--dddt-fe-check-shadow);
}

/* Общее «Одно или несколько полей содержат ошибочные данные» не нужно:
   ошибки показаны у полей, а строка под формой меняла её высоту */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	display: none;
}

@keyframes dddt-fe-in {
	from {
		opacity: 0;
		transform: translateY(-20%);
	}

	to {
		opacity: 1;
		transform: translateY(-50%);
	}
}

@keyframes dddt-fe-in-static {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (max-width: 767px) {
	.wpcf7 form .wpcf7-form-control-wrap > .wpcf7-not-valid-tip,
	.dddt-fe-tip {
		padding: 2px 7px;
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7 form .wpcf7-form-control-wrap > .wpcf7-not-valid-tip,
	.dddt-fe-tip {
		animation: none;
	}
}