/* Сквозные компоненты темы (SPEC § 4): виджет-агрегатор, sticky-панель,
   слайдер «вьюпорт → рендер». Цвета — только переменные style.css. */

/* ============ Виджет-агрегатор мессенджеров (десктоп) ============ */
.sc-contact { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: none; }

.sc-contact__toggle {
	width: 56px; height: 56px; border-radius: 50%;
	border: 0; cursor: pointer;
	background: var(--btn-bg); color: var(--btn-text);
	font-size: 24px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.sc-contact__toggle:hover { transform: translateY(-2px); }

.sc-contact__list {
	position: absolute; right: 0; bottom: 68px;
	display: flex; flex-direction: column; gap: 8px;
	background: var(--c-bg); border: 1px solid var(--c-border);
	border-radius: var(--radius); padding: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	min-width: 230px;
}
.sc-contact__list[hidden] { display: none; }

.sc-contact__item {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: 8px;
	text-decoration: none; color: var(--c-text); font-size: 15px;
}
.sc-contact__item:hover { background: var(--c-border); } /* работает в обоих режимах */
/* Иконки мессенджеров — фирменные цвета брендов (узнаваемость важнее монохрома) */
.sc-contact__icon {
	width: 34px; height: 34px; border-radius: 50%; flex: none;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 14px; font-weight: 700;
}
.sc-contact__icon--tg  { background: #2aabee; }
.sc-contact__icon--max { background: #7d3df0; }
.sc-contact__icon--tel { background: #34c759; }

/* ============ Мобильная sticky-панель (SPEC § 4) ============ */
.sc-stickybar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	display: flex; background: var(--c-bg);
	border-top: 1px solid var(--c-border);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.sc-stickybar a {
	flex: 1; text-align: center; padding: 13px 4px;
	font-size: 14px; font-weight: 600; text-decoration: none;
	color: var(--c-text);
}
.sc-stickybar a + a { border-left: 1px solid var(--c-border); }
.sc-stickybar a:last-child { background: var(--btn-bg); color: var(--btn-text); } /* CTA контрастом */
body { padding-bottom: 52px; } /* контент не прячется за панелью */

@media (min-width: 900px) {
	.sc-contact { display: block; }   /* виджет — только десктоп */
	.sc-stickybar { display: none; }  /* панель — только мобильные */
	body { padding-bottom: 0; }
}

/* ============ Слайдер «вьюпорт → рендер» (SPEC § 5.1 блок 6) ============ */
/* Разделитель и ручка ⇄ — янтарный штрих (тематический элемент «до/после»). */
.sc-compare {
	position: relative; width: 100%;
	aspect-ratio: 16 / 10; border-radius: var(--radius-lg);
	overflow: hidden; user-select: none;
}
.sc-compare__layer { position: absolute; inset: 0; }
.sc-compare__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-compare__top { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }

/* Заглушки до загрузки реальной пары изображений */
.sc-compare__ph {
	width: 100%; height: 100%; display: flex;
	align-items: center; justify-content: center;
	font-size: clamp(24px, 6vw, 56px); font-weight: 800;
	color: rgba(255, 255, 255, 0.8); letter-spacing: 0.05em;
}
.sc-compare__ph--render   { background: linear-gradient(135deg, #b06e42, #4a3627); }
.sc-compare__ph--viewport {
	background: repeating-linear-gradient(45deg, #3a3f44 0 12px, #33373b 12px 24px);
}

.sc-compare__divider {
	position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
	width: 3px; background: var(--c-accent);
	transform: translateX(-50%); pointer-events: none;
}
.sc-compare__divider::after {
	content: '⇄'; position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: var(--c-accent); color: var(--c-accent-text);
	width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.sc-compare__badge {
	position: absolute; top: 12px; padding: 4px 10px; border-radius: 6px;
	background: rgba(0, 0, 0, 0.63); color: #fff; font-size: 13px;
	pointer-events: none;
}
.sc-compare__badge--left { left: 12px; }
.sc-compare__badge--right { right: 12px; }
.sc-compare__range {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; cursor: ew-resize; margin: 0;
}
.sc-compare:has(.sc-compare__range:focus-visible) {
	outline: 3px solid var(--c-accent); outline-offset: 2px;
}