/*
 * Иконки-картинки: цвет и ховер.
 * ТЗ десктоп 28.08 — пп. 2d, 2e, 2f, 9.
 *
 * Разметку создаёт assets/js/icon-recolor.js: <img> оборачивается в
 * <span class="ev-icon-recolor"> с CSS-маской по тому же svg-файлу.
 * Размеры и позиция маски считаются в JS от габаритов картинки —
 * здесь только цвета и переходы.
 */

.ev-icon-recolor {
	display: inline-block;
	vertical-align: middle;
	background-color: #4A4A4A;
	transition: background-color 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Картинку прячем, но оставляем в потоке: она держит габариты, и ни
 * строка контактов, ни ряд соцсетей не сдвигаются ни на пиксель.
 */
.ev-icon-recolor > img {
	visibility: hidden;
}

/* --- Ховер ----------------------------------------------------------- */

/*
 * Два красных не перепутаны: #7B1E28 дизайнер назвал точечно для
 * контактов в бургер-меню (п. 2d), #960A19 — общий «фирменный» для
 * светлого фона (пп. 2f и 9).
 */
#elementor-popup-modal-37 .elementor-element-e37a9bd a:hover .ev-icon-recolor,
#elementor-popup-modal-37 .elementor-element-e37a9bd a:focus-visible .ev-icon-recolor,
#elementor-popup-modal-37 .elementor-element-cdea6a5 a:hover .ev-icon-recolor,
#elementor-popup-modal-37 .elementor-element-cdea6a5 a:focus-visible .ev-icon-recolor {
	background-color: #7B1E28;
}

/* Соцсети внизу попапа (п. 2f). */
#elementor-popup-modal-37 .elementor-element-69df471 .ev-icon-recolor:hover,
#elementor-popup-modal-37 .elementor-element-69df471 .ev-icon-recolor:focus-visible {
	background-color: #960A19;
}

/*
 * Футер (п. 9) — те же файлы иконок, что в попапе. Селектор по локации
 * шаблона, а не по id контейнеров: рядов иконок в футере несколько.
 */
.elementor-location-footer .ev-icon-recolor:hover,
.elementor-location-footer .ev-icon-recolor:focus-visible,
.elementor-location-footer a:hover .ev-icon-recolor,
.elementor-location-footer a:focus-visible .ev-icon-recolor {
	background-color: #960A19;
}

@media (prefers-reduced-motion: reduce) {
	.ev-icon-recolor {
		transition: none;
	}
}