/* Social Pulse — floating widget styles */

.social-pulse-widget {
	position: fixed;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.social-pulse-icons {
	display: flex;
	gap: var(--sp-gap, 8px);
}

/* ---------- Sidebar style ---------- */
.sp-style-sidebar .social-pulse-icons { flex-direction: column; }
.sp-style-sidebar.sp-pos-left  { left: 0; }
.sp-style-sidebar.sp-pos-right { right: 0; }
.sp-style-sidebar.sp-v-top     { top: 100px; }
.sp-style-sidebar.sp-v-middle  { top: 50%; transform: translateY(-50%); }
.sp-style-sidebar.sp-v-bottom  { bottom: 100px; }

/* ---------- Bottom bar style ---------- */
.sp-style-bar {
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(17, 24, 39, 0.92);
	padding: 10px 16px;
}
.sp-style-bar .social-pulse-icons { justify-content: center; flex-wrap: wrap; }

/* ---------- Bubble style ---------- */
.sp-style-bubble { bottom: 24px; }
.sp-style-bubble.sp-pos-left  { left: 24px; }
.sp-style-bubble.sp-pos-right { right: 24px; }
.sp-style-bubble .social-pulse-icons {
	flex-direction: column;
	position: absolute;
	bottom: 60px;
	display: none;
	gap: var(--sp-gap, 8px);
}
.sp-style-bubble.sp-pos-left .social-pulse-icons  { left: 0; }
.sp-style-bubble.sp-pos-right .social-pulse-icons { right: 0; }
.sp-style-bubble.is-open .social-pulse-icons { display: flex; }

.social-pulse-toggle {
	width: var(--sp-size, 42px);
	height: var(--sp-size, 42px);
	border-radius: 50%;
	border: none;
	background: var(--sp-bg, #111827);
	color: var(--sp-color, #fff);
	font-size: 18px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Inline (shortcode) style ---------- */
.sp-style-inline { position: static; display: inline-block; }
.sp-style-inline .social-pulse-icons { flex-wrap: wrap; }

/* ---------- Icon base ---------- */
.social-pulse-icon {
	position: relative;
	width: var(--sp-size, 42px);
	height: var(--sp-size, 42px);
	min-width: var(--sp-size, 42px);
	border-radius: var(--sp-radius, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sp-color, #fff) !important;
	text-decoration: none !important;
	font-size: calc(var(--sp-size, 42px) * 0.42);
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
	transition: transform 0.15s ease, filter 0.15s ease;
}
.social-pulse-label {
	font-size: 13px;
	margin-left: 8px;
	white-space: nowrap;
	color: inherit;
}
.sp-style-sidebar .social-pulse-icon,
.sp-style-bubble .social-pulse-icon { width: var(--sp-size, 42px); }

.hover-zoom:hover   { transform: scale(1.12); }
.hover-darken:hover { filter: brightness(0.8); }

/* ---------- "New" badge + attention animations ---------- */
.social-pulse-dot {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 12px;
	height: 12px;
	background: #ff3b30;
	border: 2px solid #fff;
	border-radius: 50%;
}
.anim-pulse  { animation: sp-pulse 1.6s infinite; }
.anim-bounce { animation: sp-bounce 1.6s infinite; }
.anim-shake  { animation: sp-shake 2.4s infinite; }

@keyframes sp-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,59,48,0.5); }
	70%  { box-shadow: 0 0 0 10px rgba(255,59,48,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
@keyframes sp-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
@keyframes sp-shake {
	0%, 90%, 100% { transform: rotate(0); }
	92% { transform: rotate(-8deg); }
	94% { transform: rotate(8deg); }
	96% { transform: rotate(-8deg); }
	98% { transform: rotate(8deg); }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	/* Sidebar icons can crowd narrow viewports when stacked at full size — scale down instead of hiding.
	   Visibility on mobile at all is already controlled by the "Show on mobile" setting in PHP. */
	.sp-style-sidebar .social-pulse-icon { width: 36px; height: 36px; min-width: 36px; font-size: 15px; }
	.social-pulse-label { display: none; }
}