.xls-wrapper {
	--xls-like-bg: #e74c3c;
	--xls-like-text: #ffffff;
	--xls-share-label: #555555;
	--xls-icon-text: #ffffff;

	/* Left indent so the block lines up with your post text.
	   Change ONLY this value if it doesn't line up in your theme. */
	--xls-left-indent: 70px;

	margin: 24px 0;
	padding-left: var(--xls-left-indent);
	border: none;
	background: transparent;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: inherit;
}

.xls-like-block,
.xls-share-block {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ---------- Like button base ---------- */
.xls-like-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	background: var(--xls-like-bg);
	border: 2px solid var(--xls-like-bg);
	color: var(--xls-like-text);
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	transition: all 0.2s ease;
}

.xls-like-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.xls-like-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Liked state stays visually identical to the base filled look by default;
   outline/minimal styles below dim it back to an accent-only look until liked. */
.xls-like-btn.is-liked {
	background: var(--xls-like-bg);
	color: var(--xls-like-text);
}

.xls-like-count {
	background: rgba(127, 127, 127, 0.18);
	border-radius: 10px;
	padding: 1px 8px;
	font-size: 12px;
	color: inherit;
}

/* ---------- Style variants ---------- */
.xls-style-flat .xls-like-btn {
	border-radius: 0;
}

.xls-style-rounded .xls-like-btn {
	border-radius: 999px;
}

.xls-style-outline .xls-like-btn {
	background: transparent;
	color: var(--xls-like-bg);
	border-radius: 6px;
}

.xls-style-outline .xls-like-btn.is-liked {
	background: var(--xls-like-bg);
	color: var(--xls-like-text);
}

.xls-style-3d .xls-like-btn {
	border-radius: 6px;
	border-bottom-width: 4px;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
}

.xls-style-3d .xls-like-btn:active {
	transform: translateY(2px);
	box-shadow: none;
}

.xls-style-minimal .xls-like-btn {
	border: none;
	background: transparent;
	color: var(--xls-like-bg);
	padding: 4px 6px;
}

.xls-style-minimal .xls-like-btn.is-liked {
	background: transparent;
	color: var(--xls-like-bg);
}

/* ---------- Share icons ---------- */
.xls-share-label {
	font-weight: 600;
	font-size: 13px;
	color: var(--xls-share-label);
}

.xls-share-icons {
	display: flex;
	gap: 8px;
}

.xls-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--xls-icon-color, #666);
	color: var(--xls-icon-text, #fff);
	text-decoration: none;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

/* ---------- Icon shape (independent control) ---------- */
.xls-icon-shape-circle .xls-share-icon {
	border-radius: 50%;
}

.xls-icon-shape-rounded .xls-share-icon {
	border-radius: 8px;
}

.xls-icon-shape-square .xls-share-icon {
	border-radius: 0;
}

/* ---------- Icon size ---------- */
.xls-icon-size-small .xls-share-icon {
	width: 28px;
	height: 28px;
}

.xls-icon-size-medium .xls-share-icon {
	width: 34px;
	height: 34px;
}

.xls-icon-size-large .xls-share-icon {
	width: 42px;
	height: 42px;
}

/* ---------- Wide button layout (matches classic "Share this:" bars) ---------- */
/* Stack the whole block: Like button on its own row, Share block on the next. */
.xls-wrapper.xls-icon-shape-button {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

/* Within the share block, the "Share this:" label sits above the buttons. */
.xls-icon-shape-button .xls-share-block {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.xls-icon-shape-button .xls-share-icons {
	gap: 10px;
	flex-wrap: wrap;
}

/* Box hugs the icon (no wasted space), with a bigger glyph. */
.xls-icon-shape-button .xls-share-icon {
	width: auto;
	height: 40px;
	min-width: 0;
	padding: 0 16px;
	border-radius: 6px;
}

/* Match the Like button to the same compact box height. */
.xls-icon-shape-button .xls-like-btn {
	height: 40px;
	padding: 0 16px;
}

.xls-icon-shape-button.xls-icon-size-small .xls-share-icon,
.xls-icon-shape-button.xls-icon-size-small .xls-like-btn {
	height: 34px;
	padding: 0 12px;
}

.xls-icon-shape-button.xls-icon-size-large .xls-share-icon,
.xls-icon-shape-button.xls-icon-size-large .xls-like-btn {
	height: 46px;
	padding: 0 20px;
}

.xls-icon-shape-button .xls-share-icon svg {
	width: 26px;
	height: 26px;
}

.xls-icon-shape-button .xls-like-icon svg {
	width: 20px;
	height: 20px;
}

.xls-style-outline .xls-share-icon {
	background: transparent;
	border: 2px solid var(--xls-icon-color, #666);
	color: var(--xls-icon-color, #666);
}

.xls-style-minimal .xls-share-icon {
	background: transparent;
	color: var(--xls-icon-color, #666);
	width: auto;
	height: auto;
}

.xls-share-icon svg {
	width: 55%;
	height: 55%;
	display: block;
}

.xls-style-minimal .xls-share-icon svg {
	width: 20px;
	height: 20px;
}

.xls-share-icon:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

.xls-share-count {
	font-size: 12px;
	color: var(--xls-share-label);
	opacity: 0.85;
}

/* ---------- Animations ---------- */
@keyframes xls-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.18); }
	100% { transform: scale(1); }
}

@keyframes xls-bounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-8px); }
	50% { transform: translateY(0); }
	70% { transform: translateY(-4px); }
}

@keyframes xls-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}

@keyframes xls-fade {
	0% { opacity: 0.3; }
	100% { opacity: 1; }
}

@keyframes xls-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.3) rotate(-8deg); }
	70% { transform: scale(0.95) rotate(4deg); }
	100% { transform: scale(1) rotate(0); }
}

.xls-anim-pulse .xls-like-btn.xls-animating .xls-like-icon { animation: xls-pulse 0.4s ease; }
.xls-anim-bounce .xls-like-btn.xls-animating .xls-like-icon { animation: xls-bounce 0.5s ease; }
.xls-anim-shake .xls-like-btn.xls-animating .xls-like-icon { animation: xls-shake 0.4s ease; }
.xls-anim-fade .xls-like-btn.xls-animating .xls-like-icon { animation: xls-fade 0.4s ease; }
.xls-anim-pop .xls-like-btn.xls-animating .xls-like-icon { animation: xls-pop 0.45s ease; }

.xls-share-icon.xls-animating {
	animation: xls-pop 0.4s ease;
}

@media (max-width: 600px) {
	.xls-wrapper {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media (max-width: 1024px) {
	.xls-wrapper {
		padding-left: 17px;
	}
}