/**
 * ELBIN R2 — структурний CSS монолітного елемента футера «Footer Main».
 * Лейаут 5 зон: брендова смужка → підписка → 3 колонки → способи оплати →
 * копірайт. Кольори/фон/падінги керуються CSS-змінними з dynamic-styles.php
 * (--footer-*), з дефолтами на темну палітру (--elbin-r2-ink / accent …).
 * Портовано з фінального дизайну (styles.css 576–675): токени → r2,
 * @container page → @media (брейкпоінти футера 900/560 — свідомі винятки).
 */

/* Full-bleed футера: нейтралізація boxed-рамки рядка (data-footer type-1).
   Blocksy у boxed-режимі друкує на footer.ct-container бокові
   --footer-container-padding (35px / 4vw / 5vw) + --footer-container-bottom-offset
   50px → крізь ці поля просвічує світлий фон body навколо темного .ct-footer-main.
   Обнуляємо рамку, щоб темний блок ішов впритул до країв вікна і низу.
   Одне правило покриває всі брейкпоінти, бо медіа-варіанти читають ту саму змінну. */
.ct-footer[data-id="type-1"] {
	--footer-container-bottom-offset: 0px;
	--footer-container-padding: 0px;
}

/* Фон wrapper'а .ct-footer = той самий токен, що й тіло (--elbin-surface-dark),
   інакше на мобільному просвіт під копірайтом (перед нижнім меню) світиться
   іншим відтінком (баг 10.07: хардкод #0D0D0D розійшовся з тілом #1A1A1A).
   Blocksy ставить світлий --theme-palette через [data-footer] .ct-footer
   (специфічність 0,2,0, виграє порядком завантаження!), тож перебиваємо
   html-префіксом (0,2,1). */
html [data-footer*="type-1"] .ct-footer {
	background-color: var(--elbin-surface-dark, #0D0D0D);
}
.ct-footer[data-id="type-1"] [data-row="middle"] > .ct-container {
	/* Blocksy дає .ct-container width:var(--theme-container-width) (≈viewport−edge,
	   ~68px справа) + max-width — обидва перебиваємо на повну ширину рядка. */
	width: 100%;
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	/* Grid-рядок має padding-block 70px (--container-spacing) → під темним
	   .ct-footer-main лишалась світла смуга 70px фону самого footer. Обнуляємо —
	   вертикальні відступи контенту вже всередині зон .sf-body / .sf-topband. */
	--container-spacing: 0px;
	padding-top: 0;
	padding-bottom: 0;
}

/* Сам елемент тепер просто на всю ширину свого (вже full-width) контейнера —
   трюк calc(50% - 50vw) більше не потрібен (давав ризик гориз. overflow через
   100vw зі смугою прокрутки). Темний фон + базовий колір тексту/шрифт. */
.ct-footer-main {
	width: 100%;
	max-width: 100%;
	background: var(--footer-background, var(--elbin-r2-ink));
	color: var(--footer-text-color, rgba(255, 255, 255, 0.66));
	font-family: var(--elbin-r2-font-ui);
}

/* Внутрішній контейнер контенту. На планшеті/мобільному (<1000px) — кап 1280
   з бічними гутерами (24/16px). На десктопі ≥1000px вирівнюємо ВЛІВО/ВПРАВО
   по краю ХЕДЕРА: footer-лого має стояти там, де й лого хедера (рішення Данила
   24.06). Десктопний оверрайд — нижче у @media(min-width:1000px). */
.ct-footer-main .sf-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Десктоп ≥1000px: контент футера тягнеться до краю хедера (calc(100vw - 60px)
   → 30px поле), бічний padding знімаємо, щоб лого/копірайт лягли рівно на 30px
   в одну лінію з лого хедера. Стеля maxSiteWidth тримає центрування на ultrawide.
   Full-bleed темного фону (на .ct-footer-main) це НЕ зачіпає — змінюємо лише
   внутрішній кап контенту. Мобільний (<1000) лишається з гутерами вище. */
@media (min-width: 1000px) {
	.ct-footer-main .sf-inner {
		max-width: var(--elbin-r2-edge-container);
		padding-left: 0;
		padding-right: 0;
	}
}

/* ── Світла брендова смужка ─────────────────────────────────────────── */
/* Топбенд (лого+таглін+соц) ПРИБРАНО 2026-06-29 — лого дублювало хедер на
   коротких сторінках, Telegram дублював бургер. Соц-іконки перенесено в
   .sf-bottom (див. нижче). */

/* Падінг контенту на тілі футера (керується --footer-padding) */
.ct-footer-main .sf-body {
	padding: var(--footer-padding, 0);
}

/* ── Підписка ───────────────────────────────────────────────────────── */
.ct-footer-main .sf-newsletter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 34px 0;
	border-bottom: 1px solid var(--footer-line-color, rgba(255, 255, 255, 0.1));
	flex-wrap: wrap;
}
.ct-footer-main .sf-newsletter-copy {
	max-width: 440px;
}
.ct-footer-main .sf-newsletter-copy h3 {
	margin: 0;
	font: 800 24px/1.15 var(--elbin-r2-font-ui);
	letter-spacing: -0.01em;
	color: var(--footer-title-color, var(--elbin-r2-header-text, #F4F4F5));
}
.ct-footer-main .sf-newsletter-copy h3 .sf-news-dot {
	color: var(--footer-accent-color, var(--elbin-r2-accent));
}
.ct-footer-main .sf-newsletter-copy p {
	margin: 8px 0 0;
	font: 400 14px/1.5 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.ct-footer-main .sf-news-form {
	display: flex;
	gap: 10px;
	flex: 1;
	min-width: 280px;
	max-width: 460px;
}
.ct-footer-main .sf-news-input {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 16px;
	border-radius: var(--elbin-r2-r-control);
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.05);
	color: var(--elbin-r2-header-text, #F4F4F5);
	font: 400 15px/1 var(--elbin-r2-font-ui);
	outline: none;
	transition: border-color 0.15s, background 0.15s;
}
.ct-footer-main .sf-news-input::placeholder {
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.ct-footer-main .sf-news-input:focus {
	border-color: var(--footer-accent-color, var(--elbin-r2-accent));
	background: rgba(26, 208, 202, 0.08);
}
.ct-footer-main .sf-news-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}
/* Повідомлення AJAX-підписки (subscribe.js вставляє після форми) */
.ct-footer-main .sf-news-msg {
	margin: 0;
	flex: 1;
	min-width: 280px;
	max-width: 460px;
	font: 600 15px/1.4 var(--elbin-r2-font-ui);
}
.ct-footer-main .sf-news-msg.is-ok {
	color: var(--footer-accent-color, var(--elbin-r2-accent));
}
.ct-footer-main .sf-news-msg.is-err {
	color: #FF6B6B;
}

/* ── Колонки ────────────────────────────────────────────────────────── */
.ct-footer-main .sf-cols {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 40px;
	padding: 52px 0;
}
.ct-footer-main .sf-col-title {
	margin: 0 0 18px;
	font: 700 12px/1 var(--elbin-r2-font-ui);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--footer-title-color, var(--elbin-r2-header-text, #F4F4F5));
}
.ct-footer-main .sf-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ct-footer-main .sf-links a {
	font: 400 14px/1.3 var(--elbin-r2-font-ui);
	color: var(--footer-text-color, var(--elbin-r2-header-text-3, #A1A1A6));
	text-decoration: none;
	transition: color 0.15s;
}
.ct-footer-main .sf-links a:hover {
	color: var(--footer-link-hover-color, var(--elbin-r2-accent));
}

/* ── Контакти ───────────────────────────────────────────────────────── */
.ct-footer-main .sf-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-bottom: 14px;
}
.ct-footer-main .sf-contact-row .sf-ci {
	color: var(--footer-accent-color, var(--elbin-r2-accent));
	margin-top: 1px;
	flex-shrink: 0;
	display: inline-flex;
}
.ct-footer-main .sf-contact-row .sf-cv {
	font: 400 14px/1.45 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text, #F4F4F5);
	text-decoration: none;
}
.ct-footer-main .sf-contact-row a.sf-cv:hover {
	color: var(--footer-link-hover-color, var(--elbin-r2-accent));
}
.ct-footer-main .sf-contact-row .sf-cv .sf-mono {
	font: 700 15px/1.3 var(--elbin-r2-font-mono);
	color: var(--elbin-r2-header-text, #F4F4F5);
	letter-spacing: -0.01em;
}

/* ── Соцмережі (тіло) ───────────────────────────────────────────────── */
.ct-footer-main .sf-social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}
.ct-footer-main .sf-social a {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--elbin-r2-header-text, #F4F4F5);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ct-footer-main .sf-social a:hover {
	background: var(--footer-accent-color, var(--elbin-r2-accent));
	border-color: var(--footer-accent-color, var(--elbin-r2-accent));
	color: var(--elbin-r2-ink-on-accent);
}

/* ── Способи оплати / доставки ──────────────────────────────────────── */
.ct-footer-main .sf-pay {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 22px 0;
	border-top: 1px solid var(--footer-line-color, rgba(255, 255, 255, 0.1));
}
.ct-footer-main .sf-pay-label {
	font: 400 13px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text-3, #A1A1A6);
	margin-right: 6px;
}
.ct-footer-main .sf-pay-chip {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 12px;
	border-radius: var(--elbin-r2-r-control);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	font: 700 11px/1 var(--elbin-r2-font-mono);
	letter-spacing: 0.04em;
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}

/* Чіп-лого: кольорові брендові марки (Visa/MC/Нова Пошта/LiqPay) на світлій
   пігулці, щоб читались на темному фоні футера. Однакова висота з текстовими
   чіпами; зображення вписується по висоті, ширина — авто. */
.ct-footer-main .sf-pay-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 12px;
	border-radius: var(--elbin-r2-r-control);
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.ct-footer-main .sf-pay-logo img {
	height: 22px;
	width: auto;
	max-width: 104px;
	display: block;
	object-fit: contain;
}

/* ── Мобільний (<1000px): лейбл окремим рядком, 4 лого — в один рівний ряд ──
   Інакше лейбл «Оплата та доставка:» стояв в одному ряду з лого і зміщував
   перенесення → лого виходили криво. Лейбл на всю ширину (свій рядок), а лого
   ділять рядок порівну (flex:1), масштабуючись, щоб гарантовано влізти в один
   ряд на будь-якій ширині телефона. */
@media (max-width: 999px) {
	.ct-footer-main .sf-pay {
		gap: 8px;
	}
	.ct-footer-main .sf-pay-label {
		flex-basis: 100%;
		margin: 0 0 12px;
	}
	.ct-footer-main .sf-pay-logo {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 8px;
	}
	.ct-footer-main .sf-pay-logo img {
		max-width: 100%;
		max-height: 20px;
		width: auto;
		height: auto;
	}
}

/* ── Копірайт ───────────────────────────────────────────────────────── */
.ct-footer-main .sf-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 22px 0 28px;
	border-top: 1px solid var(--footer-line-color, rgba(255, 255, 255, 0.1));
	font: 400 12.5px/1.5 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.ct-footer-main .sf-bottom .sf-legal {
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
/* Соц-іконки в копірайт-ряді (перенесені з прибраного топбенду): без верхнього
   відступу базового .sf-social, трохи менші. Фірмовий колір (бірюза) у спокої,
   біло-чорний на ховері (білий кружок + чорний гліф). */
.ct-footer-main .sf-bottom .sf-social {
	margin-top: 0;
}
.ct-footer-main .sf-bottom .sf-social a {
	width: 36px;
	height: 36px;
	background: transparent;
	/* 2px — щоб товщина кільця збігалась зі stroke-width гліфів іконок футера. */
	border: 2px solid var(--footer-accent-color, var(--elbin-r2-accent));
	color: var(--footer-accent-color, var(--elbin-r2-accent));
}
.ct-footer-main .sf-bottom .sf-social a:hover {
	background: #fff;
	border-color: #fff;
	color: var(--elbin-r2-ink, #0D0D0D);
}
.ct-footer-main .sf-bottom-links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
.ct-footer-main .sf-bottom-links a {
	color: var(--elbin-r2-header-text-3, #A1A1A6);
	text-decoration: none;
	transition: color 0.15s;
}
.ct-footer-main .sf-bottom-links a:hover {
	color: var(--elbin-r2-accent, #1AD0CA);
}

/* ─── Футер · планшет/мобільний (<900) ─── */
@media (max-width: 900px) {
	.ct-footer-main .sf-cols {
		grid-template-columns: 1fr 1fr;
		gap: 28px 24px;
		padding: 36px 0;
	}
	.ct-footer-main .sf-social {
		justify-content: center;
	}
	.ct-footer-main .sf-newsletter {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.ct-footer-main .sf-newsletter-copy {
		max-width: none;
	}
	.ct-footer-main .sf-news-form {
		max-width: none;
	}
	.ct-footer-main .sf-bottom {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 560px) {
	.ct-footer-main .sf-cols {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}
	.ct-footer-main .sf-contact-row {
		justify-content: center;
	}
	.ct-footer-main .sf-links {
		align-items: center;
	}
	.ct-footer-main .sf-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}