/**
 * Share Counter Social — Redesigned frontend styles.
 * Flex column for sidebars, row for bottom; all auto bars float fixed to viewport.
 * Features: design tokens, dark mode, glassmorphism, entrance animations,
 * accessibility, refined micro-interactions, and responsive breakpoints.
 */

/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
	/* --- Sizing --- */
	--scs-button-size: 48px;
	--scs-radius: 8px;
	--scs-gap: 0.5rem;

	/* --- Colors: Brand / Custom --- */
	--scs-custom-color: #1877f2;

	/* --- Colors: Surfaces --- */
	--scs-bg-bar-bottom: rgba(255, 255, 255, 0.82);
	--scs-bg-bar-bottom-border: rgba(0, 0, 0, 0.06);
	--scs-bg-bar-vertical: transparent;

	/* --- Colors: Text --- */
	--scs-color-text: #1d2327;
	--scs-color-text-muted: #6b7280;
	--scs-color-btn: #fff;

	/* --- Colors: Shadows --- */
	--scs-shadow-btn-hover: 0 4px 14px rgba(0, 0, 0, 0.18);
	--scs-shadow-btn-active: 0 1px 4px rgba(0, 0, 0, 0.12);
	--scs-shadow-bar-bottom: 0 -1px 8px rgba(0, 0, 0, 0.06), 0 -4px 24px rgba(0, 0, 0, 0.08);
	--scs-shadow-bar-vertical: 0 2px 12px rgba(0, 0, 0, 0.08);

	/* --- Colors: Borders --- */
	--scs-border-color: rgba(0, 0, 0, 0.06);
	--scs-border-top-gradient: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.08) 20%,
		rgba(0, 0, 0, 0.08) 80%,
		rgba(0, 0, 0, 0) 100%
	);

	/* --- Z-index --- */
	--scs-z-fixed: 9999;

	/* --- Transitions --- */
	--scs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--scs-duration: 0.2s;
	--scs-transition-btn: transform var(--scs-duration) var(--scs-ease-out),
		box-shadow var(--scs-duration) var(--scs-ease-out),
		opacity var(--scs-duration) var(--scs-ease-out),
		filter var(--scs-duration) var(--scs-ease-out);

	/* --- Spacing --- */
	--scs-space-xs: 0.25rem;
	--scs-space-sm: 0.5rem;
	--scs-space-md: 0.75rem;
	--scs-space-lg: 1.5rem;

	/* --- Focus --- */
	--scs-focus-color: var(--scs-custom-color);
	--scs-focus-offset: 2px;
	--scs-focus-width: 2px;

	/* --- Touch target (WCAG 2.5.5) --- */
	--scs-min-touch: 44px;

	/* --- Share count --- */
	--scs-count-font-size: 0.75rem;
	--scs-count-value-size: 1.3rem;
	--scs-count-separator-color: rgba(0, 0, 0, 0.1);

	/* --- Backdrop blur --- */
	--scs-blur: 16px;
}

/* ==========================================================================
   2. DARK MODE TOKENS
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--scs-bg-bar-bottom: rgba(23, 23, 23, 0.82);
		--scs-bg-bar-bottom-border: rgba(255, 255, 255, 0.06);
		--scs-color-text: #e5e7eb;
		--scs-color-text-muted: #9ca3af;
		--scs-shadow-btn-hover: 0 4px 14px rgba(0, 0, 0, 0.4);
		--scs-shadow-btn-active: 0 1px 4px rgba(0, 0, 0, 0.3);
		--scs-shadow-bar-bottom: 0 -1px 8px rgba(0, 0, 0, 0.2), 0 -4px 24px rgba(0, 0, 0, 0.35);
		--scs-shadow-bar-vertical: 0 2px 12px rgba(0, 0, 0, 0.25);
		--scs-border-color: rgba(255, 255, 255, 0.06);
		--scs-border-top-gradient: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.08) 20%,
			rgba(255, 255, 255, 0.08) 80%,
			rgba(255, 255, 255, 0) 100%
		);
		--scs-count-separator-color: rgba(255, 255, 255, 0.1);
		--scs-focus-color: #60a5fa;
	}
}

/* ==========================================================================
   3. BASE COMPONENT
   ========================================================================== */

.scs-share-bar {
	--scs-button-size: 48px;
	--scs-radius: 8px;
	--scs-gap: 0.5rem;
	--scs-custom-color: #1877f2;
	box-sizing: border-box;
}

.scs-share-bar *,
.scs-share-bar *::before,
.scs-share-bar *::after {
	box-sizing: border-box;
}

.scs-share-bar.scs-device--mobile {
	display: none;
}

/* ==========================================================================
   4. FLOATING VERTICAL SIDEBAR
   ========================================================================== */

/* Floating vertical sidebar */
.scs-share-bar--vertical.scs-is-vertical {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--scs-z-fixed);
	max-height: 90vh;
	overflow: auto;
	padding: var(--scs-space-md);
	background: var(--scs-bg-bar-vertical);
	box-shadow: var(--scs-shadow-bar-vertical);
	animation: scs-slide-in-side var(--scs-duration) var(--scs-ease-out) both;
}

.scs-share-bar--vertical.scs-is-fixed-left {
	left: var(--scs-space-md);
	--scs-slide-from: -12px;
}

.scs-share-bar--vertical.scs-is-fixed-right {
	right: var(--scs-space-md);
	--scs-slide-from: 12px;
}

/* Vertical bar scrollbar */
.scs-share-bar--vertical.scs-is-vertical::-webkit-scrollbar {
	width: 4px;
}

.scs-share-bar--vertical.scs-is-vertical::-webkit-scrollbar-track {
	background: transparent;
}

.scs-share-bar--vertical.scs-is-vertical::-webkit-scrollbar-thumb {
	background: var(--scs-border-color);
	border-radius: 2px;
}

.scs-share-bar--vertical.scs-is-vertical::-webkit-scrollbar-thumb:hover {
	background: var(--scs-color-text-muted);
}

/* ==========================================================================
   5. FLOATING HORIZONTAL BAR (BOTTOM)
   ========================================================================== */

/* Floating horizontal bar (all horizontal placements) */
.scs-share-bar--horizontal.scs-is-horizontal.scs-is-floating-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--scs-z-fixed);
	margin: 0;
	padding: var(--scs-space-sm) var(--scs-space-md) calc(var(--scs-space-sm) + env(safe-area-inset-bottom));
	background: var(--scs-bg-bar-bottom);
	border-top: 1px solid var(--scs-bg-bar-bottom-border);
	box-shadow: var(--scs-shadow-bar-bottom);
	backdrop-filter: blur(var(--scs-blur));
	-webkit-backdrop-filter: blur(var(--scs-blur));
	animation: scs-slide-in-bottom var(--scs-duration) var(--scs-ease-out) both;
}

/* Gradient border overlay on bottom bar */
.scs-share-bar--horizontal.scs-is-horizontal.scs-is-floating-bottom::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--scs-border-top-gradient);
	pointer-events: none;
}

.scs-share-bar--horizontal.scs-sticky-mobile {
	padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
}

/* ==========================================================================
   6. INLINE / SHORTCODE BAR
   ========================================================================== */

/* Inline / shortcode — not fixed */
.scs-share-bar--inline.scs-share-bar--horizontal {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	clear: both;
	margin-top: var(--scs-space-lg);
	padding: var(--scs-space-md) 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

/* ==========================================================================
   7. INNER CONTAINER
   ========================================================================== */

.scs-share-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--scs-gap);
}

.scs-share-bar--vertical .scs-share-bar__inner {
	flex-direction: column;
}

.scs-share-bar--horizontal .scs-share-bar__inner {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.scs-share-bar--horizontal.scs-is-floating-bottom .scs-share-bar__inner {
	justify-content: center;
}

/* ==========================================================================
   8. SHARE COUNT
   ========================================================================== */

.scs-share-count {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 3.5rem;
	font-size: var(--scs-count-font-size);
	line-height: 1.2;
	color: var(--scs-color-text);
	position: relative;
}

/* Separator between count and buttons */
.scs-share-bar--horizontal .scs-share-count {
	border-right: 1px solid var(--scs-count-separator-color);
	padding-right: var(--scs-space-sm);
	margin-right: var(--scs-space-xs);
}

.scs-share-bar--vertical .scs-share-count {
	border-bottom: 1px solid var(--scs-count-separator-color);
	padding-bottom: var(--scs-space-sm);
	margin-bottom: var(--scs-space-xs);
}

.scs-share-count__value {
	font-size: var(--scs-count-value-size);
	font-weight: 700;
	line-height: 1.1;
	transition: opacity 0.15s ease;
}

/* Flash effect when count updates */
.scs-share-count__value--updated {
	animation: scs-count-flash 0.4s var(--scs-ease-out);
}

.scs-share-count__label {
	color: var(--scs-color-text-muted);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 2px;
}

/* ==========================================================================
   9. SHARE BUTTONS LIST
   ========================================================================== */

.scs-share-buttons {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--scs-gap);
	flex-direction: inherit;
	align-items: center;
	justify-content: inherit;
}

.scs-share-bar--vertical .scs-share-buttons {
	flex-direction: column;
}

.scs-share-bar--horizontal .scs-share-buttons {
	flex-direction: row;
	flex-wrap: wrap;
}

.scs-share-buttons__item {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   10. SHARE BUTTON
   ========================================================================== */

.scs-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--scs-button-size);
	height: var(--scs-button-size);
	min-width: var(--scs-min-touch);
	min-height: var(--scs-min-touch);
	color: var(--scs-color-btn);
	text-decoration: none;
	transition: var(--scs-transition-btn);
	outline: none;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}

.scs-shape--rectangle .scs-share-btn {
	width: calc(var(--scs-button-size) * 1.85);
	min-width: calc(var(--scs-button-size) * 1.6);
	min-height: var(--scs-min-touch);
	padding: 0 0.65rem;
}

/* --- Hover --- */
.scs-share-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--scs-shadow-btn-hover);
}

.scs-theme--official .scs-share-btn:hover {
	filter: brightness(1.12);
}

.scs-theme--custom .scs-share-btn:hover {
	filter: brightness(1.1);
}

/* --- Focus --- */
.scs-share-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--scs-shadow-btn-hover);
	outline: var(--scs-focus-width) solid var(--scs-focus-color);
	outline-offset: var(--scs-focus-offset);
}

/* --- Active (pressed) --- */
.scs-share-btn:active {
	transform: scale(0.94);
	box-shadow: var(--scs-shadow-btn-active);
	filter: brightness(0.92);
}

/* ==========================================================================
   11. BUTTON THEMES
   ========================================================================== */

.scs-theme--official .scs-share-btn {
	background-color: var(--scs-btn-official, #555);
}

.scs-theme--custom .scs-share-btn {
	background-color: var(--scs-custom-color);
}

/* ==========================================================================
   12. BUTTON SIZES
   ========================================================================== */

.scs-size--small {
	--scs-button-size: 32px;
}

.scs-size--medium {
	--scs-button-size: 48px;
}

.scs-size--large {
	--scs-button-size: 64px;
}

/* ==========================================================================
   13. BUTTON SHAPES
   ========================================================================== */

.scs-shape--square .scs-share-btn {
	border-radius: 0;
}

.scs-shape--rounded .scs-share-btn {
	border-radius: var(--scs-radius);
}

.scs-shape--circle .scs-share-btn {
	border-radius: 50%;
}

/* Rectangle: wider control with modest corner radius */
.scs-shape--rectangle .scs-share-btn {
	border-radius: var(--scs-radius);
}

/* ==========================================================================
   14. BUTTON ICON
   ========================================================================== */

.scs-share-btn__icon svg {
	display: block;
	width: 55%;
	height: 55%;
}

/* ==========================================================================
   15. BODY PADDING (for floating bottom bar)
   ========================================================================== */

body.scs-share-float-bottom-desktop {
	padding-bottom: 5.75rem;
}

/* ==========================================================================
   16. ENTRANCE ANIMATIONS
   ========================================================================== */

@keyframes scs-slide-in-side {
	from {
		opacity: 0;
		transform: translateY(-50%) translateX(var(--scs-slide-from, 0));
	}
	to {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

@keyframes scs-slide-in-bottom {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scs-count-flash {
	0% {
		opacity: 1;
	}
	30% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}

/* ==========================================================================
   17. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --- Small mobile (≤480px) --- */
@media (max-width: 480px) {
	.scs-size--medium {
		--scs-button-size: 40px;
	}

	.scs-size--large {
		--scs-button-size: 52px;
	}

	.scs-share-bar--vertical.scs-is-vertical {
		padding: var(--scs-space-sm);
	}

	.scs-share-bar--horizontal.scs-is-horizontal.scs-is-floating-bottom {
		padding: var(--scs-space-xs) var(--scs-space-sm) calc(var(--scs-space-xs) + env(safe-area-inset-bottom));
	}

	.scs-share-count {
		min-width: 2.75rem;
	}

	.scs-share-count__value {
		font-size: 1.1rem;
	}
}

/* --- Standard mobile (≤767px) --- */
@media (max-width: 767px) {
	body.scs-share-float-bottom-desktop {
		padding-bottom: 0;
	}

	body.scs-share-float-bottom-mobile {
		padding-bottom: 5.75rem;
	}

	.scs-share-bar.scs-device--desktop {
		display: none;
	}

	.scs-share-bar.scs-device--mobile {
		display: block;
	}
}

/* --- Tablet (768px–1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
	.scs-size--large {
		--scs-button-size: 56px;
	}
}

/* ==========================================================================
   18. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.scs-share-btn {
		transition: none;
	}

	.scs-share-bar--vertical.scs-is-vertical,
	.scs-share-bar--horizontal.scs-is-horizontal.scs-is-floating-bottom {
		animation: none;
	}

	.scs-share-count__value--updated {
		animation: none;
	}
}

/* ==========================================================================
   19. HIGH CONTRAST / FORCED COLORS (Accessibility)
   ========================================================================== */

@media (forced-colors: active) {
	.scs-share-btn {
		border: 1px solid ButtonText;
	}

	.scs-share-btn:focus-visible {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}

	.scs-share-btn__icon svg {
		forced-color-adjust: none;
	}
}

/* ==========================================================================
   20. PRINT STYLES
   ========================================================================== */

@media print {
	.scs-share-bar,
	body.scs-share-float-bottom-desktop,
	body.scs-share-float-bottom-mobile {
		display: none !important;
		padding-bottom: 0 !important;
	}
}

/* ==========================================================================
   21. SCREEN READER UTILITIES
   ========================================================================== */

.scs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}