/* CMS Social Share — front-end */
.wss {
	--wss-h: 40px;
	--wss-r: 6px;
	--wss-gap: 8px;
	--wss-font: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wss-gap);
	margin: 1.5em 0;
	font-size: var(--wss-font);
	line-height: 1;
}
.wss--size-small { --wss-h: 32px; --wss-font: 13px; --wss-gap: 6px; }
.wss--size-large { --wss-h: 48px; --wss-font: 16px; --wss-gap: 10px; }
.wss--shape-square { --wss-r: 0; }
.wss--shape-circle { --wss-r: 999px; }
.wss--align-center { justify-content: center; }
.wss--align-right { justify-content: flex-end; }

.wss__title { font-weight: 600; margin-right: 4px; }
.wss__total { display: inline-flex; flex-direction: column; align-items: center; margin-right: 6px; }
.wss__total strong { font-size: 1.3em; }
.wss__total small { font-size: .7em; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-top: 2px; }

.wss__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wss-gap);
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.wss__item { margin: 0 !important; padding: 0 !important; }
.wss__item::before, .wss__item::marker { content: none !important; }
.wss__item[hidden] { display: none !important; }

.wss__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--wss-h);
	min-width: var(--wss-h);
	padding: 0 calc(var(--wss-h) / 3.2);
	border: 2px solid var(--wss-c);
	border-radius: var(--wss-r);
	background: var(--wss-c);
	color: #fff !important;
	font: inherit;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease, background-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.wss--icons .wss__btn { padding: 0; width: var(--wss-h); }
.wss--icons .wss__btn:has(.wss__count) { width: auto; padding: 0 10px; }
.wss__btn:hover, .wss__btn:focus-visible { filter: brightness(1.1); transform: translateY(-2px); color: #fff !important; }
.wss__btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--wss-c) 45%, transparent); outline-offset: 2px; }
.wss__btn .wss-icon { flex: none; width: calc(var(--wss-h) * .45); height: calc(var(--wss-h) * .45); }
.wss__count { font-size: .85em; opacity: .9; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .35); }

.wss--mode-dark .wss__btn { --wss-c: #1f2937 !important; }
.wss--mode-outline .wss__btn { background: transparent; color: var(--wss-c) !important; }
.wss--mode-outline .wss__btn:hover, .wss--mode-outline .wss__btn:focus-visible { background: var(--wss-c); color: #fff !important; filter: none; }
.wss--mode-outline .wss__count { border-left-color: currentColor; }

/* "Copied!" feedback */
.wss__btn--copy { position: relative; }
.wss__btn--copy[data-copied]::after {
	content: attr(data-copied);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 10px;
	border-radius: 6px;
	background: #111;
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
}

/* Floating sidebar (desktop) */
.wss--floating {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9990;
	flex-direction: column;
	margin: 0;
	gap: 0;
}
.wss--floating.wss--side-left { left: 0; }
.wss--floating.wss--side-right { right: 0; }
.wss--floating .wss__list { flex-direction: column; gap: 0; }
.wss--floating .wss__btn { border-radius: 0; width: 48px; height: 48px; flex-direction: column; gap: 2px; }
.wss--floating .wss__btn:hover { transform: none; width: 56px; }
.wss--floating .wss__count { border: 0; padding: 0; font-size: 10px; }
.wss--floating .wss__total { margin: 0 0 6px; }
.wss--floating.wss--side-left .wss__item:first-child .wss__btn { border-top-right-radius: 6px; }
.wss--floating.wss--side-left .wss__item:last-child .wss__btn { border-bottom-right-radius: 6px; }
.wss--floating.wss--side-right .wss__item:first-child .wss__btn { border-top-left-radius: 6px; }
.wss--floating.wss--side-right .wss__item:last-child .wss__btn { border-bottom-left-radius: 6px; }
.wss--floating.wss--side-right .wss__list { align-items: flex-end; }

/* Mobile sticky bar */
.wss--mobile { display: none; }

@media (max-width: 782px) {
	.wss--floating { display: none; }
	.wss--mobile {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		margin: 0;
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
		transition: transform .25s ease;
	}
	.wss--mobile.is-hidden { transform: translateY(110%); }
	.wss--mobile .wss__list { flex-wrap: nowrap; gap: 0; }
	.wss--mobile .wss__item { flex: 1 1 0; }
	.wss--mobile .wss__btn { width: 100%; height: 50px; border-radius: 0; border: 0; }
	.wss--mobile .wss__btn:hover { transform: none; }
	.wss--mobile.wss--mode-outline .wss__btn { background: #fff; }
	body.wss-has-mobile-bar { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
	.wss__btn, .wss--mobile { transition: none; }
	.wss__btn:hover, .wss__btn:focus-visible { transform: none; }
}

@media print {
	.wss { display: none !important; }
}