/* ============================================ */
/* MODERN SOCIAL SHARE BUTTONS */
/* Clean, Minimal, Non-Intrusive */
/* ============================================ */

.modern-share-wrapper {
	margin: 20px 0;
	padding: 15px 0;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}

.modern-share-label {
	font-size: 13px;
	color: #666;
	margin-bottom: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

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

.modern-share-buttons li {
	margin: 0;
	padding: 0;
}

.modern-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.3s ease;
	border: 1px solid transparent;
	white-space: nowrap;
	min-width: 100px;
	position: relative;
	overflow: hidden;
}

.modern-share-btn i {
	margin-right: 6px;
	font-size: 14px;
}

.modern-share-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	text-decoration: none;
}

.modern-share-btn:active {
	transform: translateY(0);
}

/* Facebook */
.modern-share-btn.facebook {
	background-color: #1877f2;
	color: #fff;
	border-color: #1877f2;
}

.modern-share-btn.facebook:hover {
	background-color: #166fe5;
	border-color: #166fe5;
	color: #fff;
}

/* Twitter */
.modern-share-btn.twitter {
	background-color: #1da1f2;
	color: #fff;
	border-color: #1da1f2;
}

.modern-share-btn.twitter:hover {
	background-color: #1a91da;
	border-color: #1a91da;
	color: #fff;
}

/* WhatsApp */
.modern-share-btn.whatsapp {
	background-color: #25d366;
	color: #fff;
	border-color: #25d366;
}

.modern-share-btn.whatsapp:hover {
	background-color: #20ba5a;
	border-color: #20ba5a;
	color: #fff;
}

/* LinkedIn */
.modern-share-btn.linkedin {
	background-color: #0077b5;
	color: #fff;
	border-color: #0077b5;
}

.modern-share-btn.linkedin:hover {
	background-color: #006399;
	border-color: #006399;
	color: #fff;
}

/* Telegram */
.modern-share-btn.telegram {
	background-color: #0088cc;
	color: #fff;
	border-color: #0088cc;
}

.modern-share-btn.telegram:hover {
	background-color: #0077b3;
	border-color: #0077b3;
	color: #fff;
}

/* Copy Link */
.modern-share-btn.copylink {
	background-color: #6c757d;
	color: #fff;
	border-color: #6c757d;
}

.modern-share-btn.copylink:hover {
	background-color: #5a6268;
	border-color: #5a6268;
	color: #fff;
}

.modern-share-btn.copylink.copied {
	background-color: #28a745;
	border-color: #28a745;
}

/* Responsive */
@media (max-width: 768px) {
	.modern-share-buttons {
		flex-direction: column;
	}
	
	.modern-share-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Compact version (untuk sidebar atau space terbatas) */
.modern-share-buttons.compact {
	gap: 6px;
}

.modern-share-buttons.compact .modern-share-btn {
	padding: 6px 12px;
	font-size: 12px;
	min-width: auto;
}

.modern-share-buttons.compact .modern-share-btn i {
	margin-right: 4px;
	font-size: 13px;
}

/* Icon-only version */
.modern-share-buttons.icon-only .modern-share-btn {
	min-width: 40px;
	padding: 8px;
}

.modern-share-buttons.icon-only .modern-share-btn span {
	display: none;
}

.modern-share-buttons.icon-only .modern-share-btn i {
	margin-right: 0;
}