.share-post {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center !important;
	gap: 10px;
	margin: 0 0 1.75em;
	padding: 14px 16px;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	background: #fafafa;
}

/* The bar is injected inside the theme's content area, so theme rules like
   `.td-post-content span { line-height: 1.7 }` are more specific than ours and
   knock items off-center. Normalize line-height and force centering with
   selectors specific enough (and !important) to beat the theme. */
.share-post,
.share-post * {
	box-sizing: border-box;
	line-height: 1 !important;
}

.share-post .share-post__heading {
	display: flex !important;
	align-items: center !important;
	align-self: center !important;
}

.share-post .share-post__list {
	align-items: center !important;
	align-self: center !important;
	/* Newsmag adds `.td-post-content ul { margin: 0 0 27px 19px }`, which
	   pushes the icons up inside the centered row. Reset it hard. */
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.share-post .share-post__list li {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.share-post .share-post__list li::before,
.share-post .share-post__list li::marker {
	content: none !important;
}

.share-post .share-post__btn {
	align-self: center !important;
}

/* When repositioning above the featured image, keep the bar hidden until
   JS has moved it into place to avoid a flash at the wrong spot. */
.share-post--reposition {
	visibility: hidden;
}

.share-post--reposition.is-ready {
	visibility: visible;
}

.share-post__heading {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1;
	margin: 0 4px 0 0;
}

.share-post__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.share-post__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.share-post__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border: 0;
	border-radius: 6px;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.05s ease;
}

.share-post__btn:hover {
	opacity: 0.88;
	color: #fff;
}

.share-post__btn:active {
	transform: translateY(1px);
}

.share-post__btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	flex-shrink: 0;
}

.share-post__btn--whatsapp { background: #25d366; }
.share-post__btn--facebook { background: #1877f2; }
.share-post__btn--twitter  { background: #000; }
.share-post__btn--email    { background: #6b7280; }
.share-post__btn--copy     { background: #374151; }

.share-post__btn--copy.is-copied {
	background: #16a34a;
}

/* Icon-only buttons on all screen sizes — compact, single row, never
   overflow the content width. The text labels stay in the markup for
   screen readers but are hidden visually (aria-label provides the name). */
.share-post__btn span {
	display: none;
}

.share-post__btn {
	padding: 10px;
}

.share-post__btn svg {
	width: 18px;
	height: 18px;
}

@media (min-width: 601px) {
	.share-post,
	.share-post__list {
		flex-wrap: nowrap;
	}

	.share-post__heading {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.share-post__btn {
		flex-shrink: 0;
	}
}