/* Share Link Plugin — Frontend Styles */

.share-link-widget {
	/* رنگ‌های پیش‌فرض — از طریق تنظیمات ادمین قابل تغییر */
	--sl-widget-bg:     #ffffff;
	--sl-widget-border: #e2e8f0;
	--sl-input-bg:      #f8fafc;
	--sl-input-text:    #374151;
	--sl-copy-bg:       #3b82f6;
	--sl-copy-text:     #ffffff;
	--sl-label-color:   #64748b;
	--sl-title-color:   #1e293b;

	direction: rtl;
	text-align: right;
	background: var(--sl-widget-bg);
	border: 1.5px solid var(--sl-widget-border);
	border-radius: 14px;
	padding: 20px 22px;
	margin: 20px 0;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
	max-width: 580px;
}

.sl-section-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--sl-title-color);
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1.5px solid var(--sl-widget-border);
}

/* ──── ردیف کپی ──── */
.sl-copy-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 16px;
}

.sl-link-label {
	font-size: 12px;
	color: var(--sl-label-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.sl-input-group {
	display: flex;
	align-items: stretch;
	border: 1.5px solid var(--sl-widget-border);
	border-radius: 9px;
	overflow: hidden;
	transition: border-color 0.18s, box-shadow 0.18s;
}

.sl-input-group:focus-within {
	border-color: var(--sl-copy-bg);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-copy-bg) 14%, transparent);
}

.sl-link-input {
	flex: 1;
	border: none;
	outline: none;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--sl-input-text);
	background: var(--sl-input-bg);
	direction: ltr;
	text-align: left;
	min-width: 0;
}

.sl-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 16px;
	background: var(--sl-copy-bg);
	color: var(--sl-copy-text);
	border: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	min-height: 42px;
	transition: filter 0.18s, transform 0.1s;
	flex-shrink: 0;
}

.sl-copy-btn:hover {
	filter: brightness(1.1);
}

.sl-copy-btn:active {
	transform: scale(0.97);
}

.sl-copy-btn.sl-copied {
	background: #16a34a;
}

.sl-copy-btn svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* ──── ردیف شبکه‌ها ──── */
.sl-share-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.sl-share-label {
	font-size: 12px;
	color: var(--sl-label-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}

.sl-networks {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* ──── دکمه هر شبکه ──── */
.sl-network-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 8px;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 600;
	color: var(--sl-color) !important;
	background: color-mix(in srgb, var(--sl-color) 9%, transparent);
	border: 1.5px solid color-mix(in srgb, var(--sl-color) 22%, transparent);
	transition: background 0.18s, transform 0.15s, box-shadow 0.18s, color 0.18s;
	line-height: 1;
}

.sl-network-btn:hover {
	background: var(--sl-color) !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--sl-color) 30%, transparent);
	text-decoration: none !important;
}

.sl-network-btn:hover .sl-network-icon svg {
	fill: #ffffff;
}

.sl-network-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.sl-network-icon {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sl-network-icon svg {
	width: 20px;
	height: 20px;
	transition: fill 0.18s;
}

.sl-network-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	border-radius: 3px;
	/* آیکون‌های PNG رنگ برند خودشان را دارند */
	filter: none;
}

/* آیکون‌های PNG هنگام hover نباید رنگشان سفید شود */
.sl-network-btn:hover .sl-network-icon img {
	filter: brightness(0) invert(1);
}

/* فقط آیکون */
.sl-style-icon_only .sl-network-btn {
	padding: 8px;
	border-radius: 50%;
}

/* فقط متن */
.sl-style-text_only .sl-network-icon {
	display: none;
}

/* ──── Fallback for older browsers ──── */
@supports not (background: color-mix(in srgb, red 9%, transparent)) {
	.sl-network-btn {
		background: rgba(0, 0, 0, 0.05);
		border-color: rgba(0, 0, 0, 0.10);
	}
	.sl-network-btn:hover {
		background: var(--sl-color) !important;
	}
	.sl-input-group:focus-within {
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
	}
}

/* ──── موبایل ──── */
@media (max-width: 480px) {
	.share-link-widget {
		padding: 16px;
		border-radius: 10px;
	}

	.sl-share-row {
		flex-direction: column;
		align-items: flex-start;
	}

	/* در موبایل همه دکمه‌ها icon-only می‌شوند */
	.sl-network-name {
		display: none;
	}
	.sl-network-btn {
		padding: 8px;
		border-radius: 50%;
	}
}