/* WP Share Master — public styles. CSS variables set inline per-request. */
:root {
	--wpsm-radius: 8px;
	--wpsm-gap: 8px;
	--wpsm-icon: 18px;
	--wpsm-padding: 10px;
	--wpsm-transition: 200ms;
	--wpsm-font-size: 14px;
	--wpsm-font-weight: 500;
	--wpsm-accent: #1a73e8;
}

.wpsm-share {
	box-sizing: border-box;
}
.wpsm-share * {
	box-sizing: border-box;
}

.wpsm-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--wpsm-gap);
}

.wpsm-context-inline .wpsm-list {
	margin: 1.5em 0;
}

.wpsm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: var(--wpsm-padding);
	background: transparent;
	color: var(--wpsm-accent);
	text-decoration: none;
	border-radius: var(--wpsm-radius);
	font-size: var(--wpsm-font-size);
	font-weight: var(--wpsm-font-weight);
	line-height: 1;
	transition: transform var(--wpsm-transition) ease, opacity var(--wpsm-transition) ease, box-shadow var(--wpsm-transition) ease, background var(--wpsm-transition) ease;
	outline-offset: 2px;
}

.wpsm-btn:hover,
.wpsm-btn:focus-visible {
	transform: translateY(-2px);
	opacity: 0.92;
}

.wpsm-icon svg {
	width: var(--wpsm-icon);
	height: var(--wpsm-icon);
	fill: currentColor;
	display: block;
}

/* Styles — only Filled, Glassmorphism, and Gradient render a colored
   background behind the icon. Rounded, Square, Circle, and Minimal
   are plain, colored icons with no background box (the base .wpsm-btn
   rule above already covers that). */
.wpsm-style-square .wpsm-btn { border-radius: 0; }
.wpsm-style-circle .wpsm-btn { border-radius: 50%; width: calc(var(--wpsm-icon) + var(--wpsm-padding) * 2); height: calc(var(--wpsm-icon) + var(--wpsm-padding) * 2); padding: 0; }
.wpsm-style-minimal .wpsm-btn { background: transparent; color: var(--wpsm-accent); }
.wpsm-style-filled .wpsm-btn { background: var(--wpsm-accent); color: #fff; }
.wpsm-style-outline .wpsm-btn { background: transparent; color: var(--wpsm-accent); box-shadow: inset 0 0 0 2px var(--wpsm-accent); }
.wpsm-style-glass .wpsm-btn { background: rgba(255,255,255,0.15); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); color: #fff; }
.wpsm-style-gradient .wpsm-btn { background: linear-gradient(135deg, var(--wpsm-accent), #7c3aed); color: #fff; }

/* Sizes */
.wpsm-size-small .wpsm-btn { --wpsm-padding: 6px; --wpsm-icon: 14px; --wpsm-font-size: 12px; }
.wpsm-size-large .wpsm-btn { --wpsm-padding: 14px; --wpsm-icon: 22px; --wpsm-font-size: 16px; }
.wpsm-size-xl .wpsm-btn { --wpsm-padding: 18px; --wpsm-icon: 26px; --wpsm-font-size: 18px; }

/* Floating */
.wpsm-context-floating {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
}
.wpsm-context-floating .wpsm-list { flex-direction: column; }
.wpsm-position-left { left: 12px; }
.wpsm-position-right { right: 12px; }
.wpsm-position-top { top: 12px; left: 50%; transform: translateX(-50%); }
.wpsm-position-top .wpsm-list,
.wpsm-position-bottom .wpsm-list { flex-direction: row; }
.wpsm-position-bottom { bottom: 12px; top: auto; left: 50%; transform: translateX(-50%); }

/* Mobile sticky bar */
.wpsm-context-mobile {
	display: none;
}
@media (max-width: 782px) {
	.wpsm-context-mobile {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
		padding: 8px 10px;
		z-index: 9999;
	}
	.wpsm-context-mobile .wpsm-list { justify-content: space-around; }
	.wpsm-context-floating { display: none; }
}

/* Alignment (shortcode) */
.wpsm-align-center .wpsm-list { justify-content: center; }
.wpsm-align-right .wpsm-list { justify-content: flex-end; }

/* Animations. Pure CSS keyframes with `both` fill-mode: every animation
   starts from its hidden/offset state and always ENDS at fully visible,
   opacity:1 — so icons are guaranteed visible whether or not JavaScript
   runs at all. Nothing here depends on a script adding a reveal class. */
.wpsm-item {
	opacity: 1;
}

@keyframes wpsm-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes wpsm-grow {
	from { opacity: 0; transform: scale(0.6); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes wpsm-slide {
	from { opacity: 0; transform: translateX(-10px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes wpsm-bounce {
	0% { opacity: 0; transform: translateY(-8px); }
	60% { opacity: 1; transform: translateY(2px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes wpsm-rotate {
	from { opacity: 0; transform: rotate(-15deg); }
	to { opacity: 1; transform: rotate(0); }
}
@keyframes wpsm-pulse {
	0% { opacity: 0; transform: scale(0.9); }
	60% { opacity: 1; transform: scale(1.05); }
	100% { opacity: 1; transform: scale(1); }
}

.wpsm-animation-fade .wpsm-item   { animation: wpsm-fade   var(--wpsm-transition) ease both; }
.wpsm-animation-grow .wpsm-item   { animation: wpsm-grow   var(--wpsm-transition) ease both; }
.wpsm-animation-slide .wpsm-item  { animation: wpsm-slide  var(--wpsm-transition) ease both; }
.wpsm-animation-bounce .wpsm-item { animation: wpsm-bounce calc(var(--wpsm-transition) * 2) ease both; }
.wpsm-animation-rotate .wpsm-item { animation: wpsm-rotate var(--wpsm-transition) ease both; }
.wpsm-animation-pulse .wpsm-item  { animation: wpsm-pulse  calc(var(--wpsm-transition) * 2) ease both; }

@media (prefers-color-scheme: dark) {
	.wpsm-context-mobile { background: #1e1e1e; color: #f1f1f1; }
}

/* Focus visibility for accessibility */
.wpsm-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}