/*
 * Правки футера поверх темы UpStore.
 * Грузится на всех страницах (OCMOD zoomagazin_footer_shops_button).
 *
 * ЦВЕТА. Ни одного литерала: используются переменные темы, которые она сама
 * собирает из настроек (Модули → UpStore → Дизайн меню). Тот же принцип, что в
 * scripts/theme-brand-color.php — поменяли «Фон основной кнопки» в админке,
 * поменялась и эта кнопка. Захардкоженный оранжевый пришлось бы править руками
 * при каждой смене бренд-цвета.
 */

:root {
	/* Просвет между строками контактов в футере. Тема даёт их вплотную,
	   заказчик просил воздуха. Одно место для подгонки. */
	--zm-footer-contact-gap: 16px;
}

/* ------------------------------------------------------------------ */
/* 1. Воздух между контактами (телефон / почта / режим работы)          */
/* ------------------------------------------------------------------ */

.footer-contact ul.list-unstyled > li + li,
.footer-contact ul.ch-socials > li + li {
	margin-top: var(--zm-footer-contact-gap);
}

/* Режим работы — многострочный, ему нужен читаемый межстрочный интервал,
   иначе три строки слипаются сильнее, чем расстояние между пунктами. */
.footer-contact ul.list-unstyled > li {
	line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* 2. Кнопка «Наши магазины»                                            */
/* ------------------------------------------------------------------ */

/*
 * Кнопка вставляется в начало колонки контактов, а показывается под ними:
 * .footer-contact делаем колоночным флексом и переставляем порядок.
 *
 * Почему так, а не вставкой в конец блока: движок модификаций OpenCart ищет
 * ПОСТРОЧНО, а колонка контактов закрывается двумя подряд идущими </div> —
 * такой якорь не уникален и цеплялся бы куда попало. Открывающий тег
 * .footer-contact уникален, поэтому вставка идёт после него, а порядок
 * отдаётся CSS.
 */
.footer-contact {
	display: flex;
	flex-direction: column;
}

.footer-contact > .d-flex {
	order: 1;
}

.zm-shops {
	order: 2;
	margin-top: 24px;
}

/*
 * Геометрия один в один с кнопкой подписки в этом же футере
 * (`footer .btn-subscribe`): высота 44px, радиус 44px — то есть «таблетка»,
 * рамка 1.5px, отступы 2px/22px. Значения не на глаз, а скопированы из
 * stylesheet.css, чтобы две кнопки в одном подвале не отличались на пиксель.
 *
 * Обычное состояние — контурное, как у подписки. Наведение — сплошная
 * оранжевая заливка с тёмным текстом.
 *
 * ⚠️ СЕЛЕКТОРЫ НАМЕРЕННО ДЛИННЫЕ. Тема красит все ссылки подвала правилом
 * `footer.ch-dark-theme a { color: #B1B1B1 }` — это специфичность (0,1,2),
 * и короткий `.zm-shops__btn` (0,1,0) её проигрывал: цвет текста молча
 * оставался серым. Ровно на этом и не «подтянулся» тёмный шрифт в первой
 * версии кнопки. Поэтому селектор включает тему подвала и тег ссылки —
 * получается (0,2,2), чего хватает и для обычного состояния, и для ховера.
 * Укорачивать нельзя: сломается беззвучно, кнопка просто посереет.
 */
.zm-shops__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 2px 22px;
	border-radius: 44px;
	border: 1.5px solid var(--up-bg-btn-primary);
	background-color: transparent;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: all .2s linear;
}

/*
 * Текст и иконка в обычном состоянии — белые. Оранжевой остаётся только
 * рамка: оранжевый текст на почти чёрном фоне подвала читается хуже белого,
 * а цветовой акцент кнопке уже даёт контур.
 */
footer.ch-dark-theme a.zm-shops__btn,
footer.ch-light-theme a.zm-shops__btn {
	color: var(--color-white, #FFFFFF);
}

/*
 * Наведение — заливка фирменным оранжевым.
 * Текст и иконка тёмные: штатная переменная кнопки (up-color-btn-primary) —
 * белый #FFFFFF, и на оранжевом #FA6F36 он почти не читается. Берём тёмный
 * из палитры темы, а не литералом.
 */
footer.ch-dark-theme a.zm-shops__btn:hover,
footer.ch-dark-theme a.zm-shops__btn:focus,
footer.ch-light-theme a.zm-shops__btn:hover,
footer.ch-light-theme a.zm-shops__btn:focus {
	background-color: var(--up-bg-btn-primary);
	border-color: var(--up-bg-btn-primary);
	color: var(--color-dark-1, #0F0F0F);
	text-decoration: none;
}

/* Иконка — инлайновый SVG, а не картинка и не иконочный шрифт:
   отдельного запроса не создаёт и красится currentColor вместе с текстом. */
.zm-shops__btn svg {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

@media (max-width: 767px) {
	.zm-shops__btn {
		width: 100%;
		justify-content: center;
	}
}

/* ------------------------------------------------------------------ */
/* 3. Круглые иконки соцсетей под столбцом «Клиенту»                    */
/* ------------------------------------------------------------------ */

/*
 * Блок живёт последним пунктом списка «Клиенту» (валидный <li> внутри <ul>) —
 * так у мода получился уникальный якорь. Маркер и типографику списка гасим,
 * чтобы пункт не читался как ещё одна ссылка.
 */
.zm-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	/*
	 * Отбивка от списка «Клиенту». Соцсети — другая сущность, а не ещё один
	 * пункт меню, и без заметного зазора читались как продолжение списка.
	 */
	margin-top: 32px;
	list-style: none;
}

.zm-socials__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/*
	 * Обычное состояние — контурное, как у кнопки подписки и кнопки
	 * «Наши магазины»: прозрачный фон и фирменная оранжевая рамка 1.5px.
	 * Рамка задана и здесь, и в ховере одним цветом — иначе кружок
	 * прыгал бы на 3px в момент наведения.
	 */
	background-color: transparent;
	border: 1.5px solid var(--up-bg-btn-primary);
	transition: all .2s linear;
}

/* Наведение — сплошная оранжевая заливка. */
.zm-socials__item:hover,
.zm-socials__item:focus {
	background-color: var(--up-bg-btn-primary);
	border-color: var(--up-bg-btn-primary);
}

.zm-socials__item img {
	width: 22px;
	height: 22px;
}

/*
 * Иконки — белые SVG, вставленные картинкой, поэтому currentColor на них
 * не действует и в обоих состояниях они остаются белыми. Это осознанно:
 * белое читается и на тёмном фоне подвала внутри оранжевого контура,
 * и на сплошной оранжевой заливке при наведении.
 *
 * Селектор с темой подвала — по той же причине, что у кнопки выше:
 * `footer.ch-dark-theme a` перебивает короткий классовый селектор.
 */
footer.ch-dark-theme a.zm-socials__item i,
footer.ch-light-theme a.zm-socials__item i {
	font-size: 20px;
	line-height: 1;
	color: var(--up-bg-btn-primary);
}

footer.ch-dark-theme a.zm-socials__item:hover i,
footer.ch-light-theme a.zm-socials__item:hover i {
	color: var(--color-dark-1, #0F0F0F);
}

/* ------------------------------------------------------------------ */
/* 4. Иконки платёжных систем                                           */
/* ------------------------------------------------------------------ */

/*
 * Тема жёстко проставляет в разметке width="46" height="32" всем иконкам
 * подряд (footer.twig:206). У логотипов пропорции разные — Plata 4.8:1,
 * Visa 3.1:1, Mastercard 1.6:1 — и в общей рамке 1.44:1 их бы раздавило.
 *
 * Фиксируем ВЫСОТУ, ширину отдаём содержимому. Атрибуты в разметке при этом
 * остаются: они нужны браузеру, чтобы зарезервировать место до загрузки
 * и не дёрнуть вёрстку (CLS).
 */
/*
 * Иконки оплат живут под соцсетями, в правой колонке — их туда переносит
 * мод zoomagazin_footer_socials, а штатный блок в полосе копирайта при этом
 * гаснет. Поэтому здесь стилизуется наш `.zm-payments`, а не `.ch-payments`
 * темы: последнего в разметке больше нет.
 */
.zm-payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	/* Отбивка от ряда соцсетей — чтобы читались как два разных блока,
	   а не как одна каша из иконок. Одно место для подгонки. */
	margin-top: 34px;
	list-style: none;
}

/*
 * Размеры разные, потому что логотипы разной формы: Plata — широкая плашка
 * (4.8:1), Visa — вытянутая надпись (3.1:1), Mastercard — два круга (1.6:1).
 * При одинаковой высоте Mastercard выглядит вдвое крупнее остальных.
 * Поэтому высота задаётся каждому отдельно, на глаз по видимому весу.
 *
 * Ширину отдаём содержимому: в разметке у всех жёстко стоит width="46",
 * атрибут оставлен ради резерва места до загрузки (CLS).
 */
.zm-payments img {
	width: auto;
	height: 26px;
	max-width: 110px;
	object-fit: contain;
	border-radius: 0;
	/*
	 * Лёгкое притенение: логотипы платёжных систем — социальное
	 * доказательство, они не должны спорить по яркости с копирайтом
	 * и кнопками.
	 */
	opacity: .65;
}

.zm-payments img[src*="visa"] {
	height: 17px;
}

.zm-payments img[src*="mastercard"] {
	height: 22px;
}

/*
 * Полоса копирайта: он в ней теперь один, центрируем.
 *
 * ⚠️ `!important` ВЫНУЖДЕННЫЙ, а не небрежность. Полосу тема собирает
 * утилитами `flex-md-row` и `justify-content-between`, а они объявлены
 * в stylesheet.css с `!important` (bootstrap-подобные хелперы). Без него
 * правило не применится ни при какой специфичности. Ограничено ровно
 * двумя свойствами.
 */
footer .copyright__payments {
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center;
}

/* ------------------------------------------------------------------ */
/* 5. Копирайт                                                          */
/* ------------------------------------------------------------------ */

.zm-copyright {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/*
 * Фирменный знак перед копирайтом.
 *
 * ⚠️ Это ТОТ ЖЕ файл, что и favicon сайта (`image/catalog/favicon.svg`),
 * намеренно: браузер уже забирает его для иконки вкладки, поэтому повторное
 * использование того же адреса не создаёт второго запроса — попадание в тот же
 * кэш. Не заменять на копию с другим именем и не встраивать инлайном: файл
 * весит 45 КБ, инлайн добавил бы их в HTML КАЖДОЙ страницы.
 */
.zm-copyright__mark {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
}