.ssb-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0.5em 0;
	color: #4a4a4a;
}

.ssb-share--floating {
	position: fixed;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	flex-direction: column;
	z-index: 100;
}

.ssb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.ssb-toast {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 6px;
	padding: 4px 8px;
	background: #222;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
	border-radius: 4px;
	pointer-events: none;
	z-index: 10;
}

.ssb-btn:hover {
	opacity: 0.8;
	transform: translateY(-1px);
}

.ssb-btn svg {
	flex: 0 0 auto;
}

/* Три типоразмера (2.4). Размер кнопки (плитки) и размер самой иконки внутри
 * заданы напрямую для каждого типоразмера — не через паддинг — чтобы на
 * маленьком размере логотип не «тонул» в пустом поле плитки. */
.ssb-size-small .ssb-btn {
	width: 24px;
	height: 24px;
}

.ssb-size-small .ssb-btn svg {
	width: 18px;
	height: 18px;
}

.ssb-size-medium .ssb-btn {
	width: 30px;
	height: 30px;
}

.ssb-size-medium .ssb-btn svg {
	width: 23px;
	height: 23px;
}

.ssb-size-large .ssb-btn {
	width: 36px;
	height: 36px;
}

.ssb-size-large .ssb-btn svg {
	width: 28px;
	height: 28px;
}

.ssb-show-labels .ssb-btn {
	width: auto;
	height: auto;
	padding: 4px 10px 4px 4px;
}

.ssb-label {
	font-size: 13px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Стиль «Цветной» (2.4) — квадраты со скруглёнными углами, заливка
 * официальным фирменным цветом сети, пиктограмма белым поверх.
 * ------------------------------------------------------------------ */
.ssb-style-color {
	gap: 4px;
}

.ssb-style-color .ssb-btn {
	border-radius: 6px;
	background-color: var(--ssb-brand, #4a4a4a);
	color: #fff;
}

.ssb-style-color .ssb-btn-vk { --ssb-brand: #0077ff; }
.ssb-style-color .ssb-btn-telegram { --ssb-brand: #26a5e4; }
.ssb-style-color .ssb-btn-whatsapp { --ssb-brand: #25d366; }
.ssb-style-color .ssb-btn-ok { --ssb-brand: #ee8208; }
.ssb-style-color .ssb-btn-facebook { --ssb-brand: #1877f2; }
.ssb-style-color .ssb-btn-x { --ssb-brand: #000000; }
.ssb-style-color .ssb-btn-linkedin { --ssb-brand: #0a66c2; }
.ssb-style-color .ssb-btn-pinterest { --ssb-brand: #e60023; }
.ssb-style-color .ssb-btn-email { --ssb-brand: #6b7280; }
.ssb-style-color .ssb-btn-copylink { --ssb-brand: #6b7280; }

/* ---------------------------------------------------------------------
 * Стиль «Серый» (2.4) — квадраты со скруглёнными углами, заливка серым,
 * пиктограмма белым поверх.
 * ------------------------------------------------------------------ */
.ssb-style-gray {
	gap: 4px;
}

.ssb-style-gray .ssb-btn {
	border-radius: 6px;
	background-color: #9e9e9e;
	color: #fff;
}

/* ---------------------------------------------------------------------
 * Стиль «Чёрно-белый» (2.4) — квадраты со скруглёнными углами, заливка
 * чёрным, пиктограмма белым — без фирменных цветов и полутонов.
 * ------------------------------------------------------------------ */
.ssb-style-bw {
	gap: 4px;
}

.ssb-style-bw .ssb-btn {
	border-radius: 6px;
	background-color: #000000;
	color: #fff;
}

/* ---------------------------------------------------------------------
 * Мобильная нижняя панель (раздел 3.4). Показывается только внутри
 * media query с порогом ширины, которая генерируется динамически в PHP
 * (SSB_Frontend::render_mobile_bar) — там же порог из настройки 2.3.
 * ------------------------------------------------------------------ */
.ssb-share--mobilebar {
	display: none;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	margin: 0;
	z-index: 9999;
	background: #fff;
	box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.15);
	flex-wrap: nowrap;
	justify-content: space-between;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: 4px;
	padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
	box-sizing: border-box;
}

.ssb-share--mobilebar .ssb-btn {
	flex: 0 0 auto;
}

.ssb-share--mobilebar::-webkit-scrollbar {
	height: 3px;
}

.ssb-mobilebar-spacer {
	height: 0;
}

/* Нижняя мобильная панель — палец, а не курсор (см. reports/plugin-audit.md,
 * решение по замечанию о переносе кнопок в тему): выбранный в настройках
 * типоразмер (small/medium/large, 2.3) относится к обычным местам показа
 * кнопок в статье, а сама нижняя панель — отдельный, всегда достаточно
 * крупный элемент, независимо от этой настройки. Раньше на "small" кнопки
 * оставались 24px, а space-between растягивал их по всей ширине экрана —
 * между иконками было много пустого места и мимо было легко промахнуться. */
@media (max-width: 782px) {
	.ssb-share--mobilebar {
		justify-content: center;
		gap: 14px;
	}

	.ssb-share--mobilebar .ssb-btn {
		width: 42px;
		height: 42px;
	}

	.ssb-share--mobilebar .ssb-btn svg {
		width: 24px;
		height: 24px;
	}
}