<?php
include_once ESSB3_PLUGIN_ROOT . 'lib/admin/helpers/about-page-header.php';

if (!function_exists('essb_dashboard_feature_card')) {
	function essb_dashboard_feature_card($title, $desc, $icon, $field, $link_url = '')
	{
		$state = '';
		$field_value = essb_option_bool_value($field);
		$value = '';
		if (!$field_value) {
			$state = 'active';
			$value = '';
		} else {
			$state = '';
			$value = 'true';
		}
?>
		<div class="essb-df-card essb-activate-additional-feature <?php echo esc_attr($state); ?> essb-activate-additional-feature-<?php echo esc_attr($field); ?>" data-type="deactivation">
			<input type="hidden" name="essb_options[<?php echo esc_attr($field); ?>]" id="essb_<?php echo esc_attr($field); ?>" class="feature-value" value="<?php echo esc_attr($value); ?>" />
			<div class="essb-ui-icon-frame64">
				<svg class="essb-ui-svg-frame essb-ui-svg-frame-grey" fill="none" height="48" viewBox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
					<path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill=""></path>
					<path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke=""></path>
				</svg>
				<i class="essb-ui-svg-icon essb-ui-svg-dark-icon"><?php echo essb_ui_get_svg_icon($icon); ?></i>
			</div>
			<div class="essb-df-card-title"><?php echo $title; ?></div>
			<div class="essb-df-card-desc"><?php echo $desc; ?></div>
			<?php if (!empty($link_url)) { ?>
				<div class="essb-df-link-wrap"><a class="essb-ui-btn essb-ui-btn-link" href="<?php echo esc_url($link_url); ?>" target="_blank"><?php esc_html_e('Learn more', 'essb'); ?></a></div>
			<?php } ?>
			<div class="essb-df-card-footer">
				<span class="essb-ui-badge essb-ui-badge-sm essb-ui-badge-outline essb-activation-status-notactive"><?php esc_html_e('Not active', 'essb'); ?></span>
				<span class="essb-ui-badge essb-ui-badge-sm essb-ui-badge-primary essb-activation-status-active"><?php esc_html_e('Active', 'essb'); ?></span>
				<span class="essb-ui-switch essb-ui-switch-xl">
					<input class="essb-ui-switch-check" data-field="<?php echo esc_attr($field); ?>" id="essb_ui_switch_<?php echo esc_attr($field); ?>" type="checkbox" value="1" <?php if ($state == 'active') { ?>checked="checked" <?php } ?>>
				</span>
			</div>
		</div>
	<?php
	}
}

if (!function_exists('essb_dashboard_addon_card')) {
	function essb_dashboard_addon_card($title, $desc, $icon, $checks, $link_url = '', $install_slug = '')
	{
		$state = '';
		$is_running = false;
		foreach ($checks as $check) {
			$check_param = isset($check['param']) ? $check['param'] : '';
			$check_type = isset($check['type']) ? $check['type'] : '';
			if (!empty($check_type) && !empty($check_param)) {
				if ($check_type == 'param' && defined($check_param)) {
					$is_running = true;
				}
				if ($check_type == 'function' && function_exists($check_param)) {
					$is_running = true;
				}
				if ($check_type == 'class' && class_exists($check_param)) {
					$is_running = true;
				}
			}
		}
		if ($is_running) {
			$state = 'active';
		}
	?>
		<div class="essb-df-card essb-df-card-addon <?php echo esc_attr($state); ?>">
			<div class="essb-ui-icon-frame64">
				<svg class="essb-ui-svg-frame essb-ui-svg-frame-grey" fill="none" height="48" viewBox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
					<path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill=""></path>
					<path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke=""></path>
				</svg>
				<i class="essb-ui-svg-icon essb-ui-svg-dark-icon"><?php echo essb_ui_get_svg_icon($icon); ?></i>
			</div>
			<div class="essb-df-card-title"><?php echo $title; ?></div>
			<div class="essb-df-card-desc"><?php echo $desc; ?></div>
			<?php if (!empty($link_url)) { ?>
				<div class="essb-df-link-wrap"><a class="essb-ui-btn essb-ui-btn-link" href="<?php echo esc_url($link_url); ?>" target="_blank"><?php esc_html_e('Learn more', 'essb'); ?></a></div>
			<?php } ?>
			<div class="essb-df-card-footer essb-df-card-footer-addon">
				<?php if ($is_running) { ?>
					<span class="essb-ui-badge essb-ui-badge-sm essb-ui-badge-primary"><?php esc_html_e('Active', 'essb'); ?></span>
					<?php } elseif (!empty($install_slug)) {
					$addon_state = essb_addon_get_state($install_slug);
					if ($addon_state === 'active') { ?>
						<span class="essb-ui-badge essb-ui-badge-sm essb-ui-badge-primary"><?php esc_html_e('Active', 'essb'); ?></span>
					<?php } elseif ($addon_state === 'installed') { ?>
						<button type="button" class="essb-ui-btn essb-ui-btn-link" data-install="<?php echo esc_attr($install_slug); ?>"><?php esc_html_e('Activate', 'essb'); ?></button>
					<?php } else { ?>
						<button type="button" class="essb-ui-btn essb-ui-btn-link" data-install="<?php echo esc_attr($install_slug); ?>"><?php esc_html_e('Install', 'essb'); ?></button>
					<?php } ?>
				<?php } else { ?>
					<span class="essb-ui-badge essb-ui-badge-sm essb-ui-badge-outline"><?php esc_html_e('Not active', 'essb'); ?></span>
					<a class="essb-ui-btn essb-ui-btn-link" href="<?php echo esc_url(admin_url('admin.php?page=essb_redirect_addons')); ?>" style="margin-left: 1em;">Activate Add-On</a>
				<?php } ?>
			</div>
		</div>
<?php
	}
}

?>

<style>
	.essb-control-btn-activate {
		background: #e74c3c !important;
		color: #fff !important;
		padding: 5px 10px !important;
		border-radius: 3px;
	}

	.essb-news-typetag {
		display: inline-block;
		padding: 3px 5px;
		border-radius: 5px;
		margin-right: 5px;
		font-size: 11px;
		text-transform: uppercase;
		line-height: 1em;
		font-weight: 600;
		color: #fff;
	}

	.essb-df-wrap {
		padding: 0;
		max-width: 1100px;
		margin: 2em auto;
	}

	.essb-df-welcome {
		margin-bottom: 28px;
	}

	.essb-df-welcome-heading {
		font-size: 22px;
		font-weight: 600;
		color: #172153;
		margin: 0 0 8px;
		padding: 0;
		line-height: 1.3;
	}

	.essb-df-welcome-text {
		font-size: 14px;
		color: #6b7280;
		margin: 0 0 18px;
		line-height: 1.6;
	}

	.essb-df-toast {
		position: fixed;
		bottom: 24px;
		right: 24px;
		background: #6b7280;
		color: #fff;
		padding: 10px 20px;
		border-radius: 4px;
		font-size: 13px;
		font-weight: 500;
		box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .25s ease, transform .25s ease;
		z-index: 99999999;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.essb-df-toast-show {
		opacity: 1;
		transform: translateY(0);
	}

	.essb-df-toast-success {
		background: #1b84ff;
		box-shadow: 0 4px 12px rgba(27, 132, 255, .3);
	}

	.essb-df-toast-error {
		background: #dc2626;
		box-shadow: 0 4px 12px rgba(220, 38, 38, .3);
	}

	.essb-df-spinner {
		display: inline-block;
		width: 14px;
		height: 14px;
		border: 2px solid rgba(255, 255, 255, .3);
		border-top-color: #fff;
		border-radius: 50%;
		animation: essb-df-spin .6s linear infinite;
	}

	@keyframes essb-df-spin {
		to {
			transform: rotate(360deg);
		}
	}

	.essb-df-wrap .essb-ui-btn:not(.essb-ui-btn-link) {
		height: 2.5em;
	}

	.essb-df-wrap-bottom-text {
		margin-top: 2em;
	}

	.essb-df-wrap-cards {
		margin-bottom: 2.5em;
	}

	.essb-df-section-title {
		font-size: 18px;
		font-weight: 500;
		color: #172153;
		margin: 0 0 12px;
		padding: 0;
		margin-top: 24px;
	}

	.essb-df-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		margin-bottom: 32px;
	}

	.essb-df-card {
		background: #fff;
		border: 1px solid #e4e9f5;
		border-radius: 6px;
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		box-shadow: 0 1px 2px rgba(23, 33, 83, .04);
		transition: box-shadow .16s ease, border-color .16s ease;
	}

	.essb-df-card.active {
		border-color: rgba(27, 132, 255, .5);
		background-color: #f4f9ff;
	}

	.essb-df-card:hover {
		box-shadow: 0 6px 20px rgba(27, 132, 255, .08);
		border-color: rgba(27, 132, 255, .18);
	}

	.essb-df-card .essb-ui-icon-frame64 {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin: 0 auto 4px;
	}

	.essb-df-card .essb-ui-icon-frame64 i {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
	}

	.essb-df-card .essb-ui-icon-frame64 i svg {
		width: 32px;
		height: 32px;
		display: block;
	}

	.essb-df-card-title {
		font-size: 15px;
		font-weight: 700;
		color: #172153;
		line-height: 1.3;
		text-align: center;
	}

	.essb-df-card-desc {
		font-size: 12px;
		color: #6b7280;
		line-height: 1.5;
		text-align: center;
		flex: 1;
	}

	.essb-df-card .essb-df-link-wrap {
		text-align: center;
	}

	.essb-df-card .essb-ui-btn-link {
		font-size: 12px;
	}

	.essb-df-card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 10px;
		border-top: 1px solid #f0f3fa;
		margin-top: auto;
	}

	.essb-df-card-footer-addon {
		justify-content: center;
	}

	.essb-df-card.active .essb-activation-status-notactive {
		display: none;
	}

	.essb-df-card:not(.active) .essb-activation-status-active {
		display: none;
	}

	.essb-df-card.active .essb-ui-svg-frame-grey {
		fill: var(--primary-light, #e8f3ff);
		stroke: var(--primary-clarity, #b8d6f5);
	}

	.essb-df-card.active .essb-ui-svg-dark-icon .essb-ui-svg-mode-fill {
		fill: var(--primary, #1b84ff);
	}

	.essb-df-card.active .essb-ui-svg-dark-icon .essb-ui-svg-mode-stroke {
		stroke: var(--primary, #1b84ff);
	}

	/* === Featured Add-Ons Carousel === */
	.essb-df-carousel {
		margin-bottom: 32px;
		position: relative;
		overflow: hidden;
	}

	.essb-df-carousel-track {
		display: flex;
		transition: opacity .4s ease;
	}

	.essb-df-carousel-slide {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		flex: 0 0 100%;
		min-width: 0;
	}

	.essb-df-addon-card {
		border-radius: 10px;
		padding: 24px;
		color: #fff;
		display: flex;
		align-items: flex-start;
		gap: 16px;
	}

	.essb-df-addon-purple { background: linear-gradient(135deg, #3858E9 0%, #5a75f0 100%); }
	.essb-df-addon-violet  { background: linear-gradient(135deg, #6c47ff 0%, #8b6cff 100%); }
	.essb-df-addon-blue    { background: linear-gradient(135deg, #136EF8 0%, #3b8cf7 100%); }

	.essb-df-addon-icon {
		width: 48px;
		height: 48px;
		border-radius: 12px;
		background: rgba(255,255,255,.18);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.essb-df-addon-icon svg { width: 24px; height: 24px; display: block; }

	.essb-df-addon-body { flex: 1; min-width: 0; }

	.essb-df-addon-name {
		font-size: 15px;
		font-weight: 600;
		color: #fff;
		margin-bottom: 4px;
	}

	.essb-df-addon-desc {
		font-size: 13px;
		color: rgba(255,255,255,.85);
		line-height: 1.5;
		margin-bottom: 14px;
	}

	.essb-df-addon-btn {
		display: inline-block;
		font-size: 12px;
		font-weight: 600;
		padding: 7px 16px;
		border-radius: 5px;
		text-decoration: none;
		background: rgba(255,255,255,.2);
		color: #fff;
		transition: background .2s;
	}

	.essb-df-addon-btn:hover {
		background: rgba(255,255,255,.35);
		color: #fff;
	}

	.essb-df-carousel-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 16px;
	}

	.essb-df-carousel-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #d1d9e8;
		border: none;
		cursor: pointer;
		padding: 0;
		transition: background .2s, transform .2s;
	}

	.essb-df-carousel-dot.active {
		background: #3858E9;
		transform: scale(1.3);
	}

	@media (max-width: 700px) {
		.essb-df-carousel-slide { grid-template-columns: 1fr; }
	}

	@media (max-width: 1200px) {
		.essb-df-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 782px) {
		.essb-df-grid {
			grid-template-columns: 1fr;
		}
	}

	/* === Optimization callout === */
	.essb-df-optimization {
		background: linear-gradient(135deg, #f4f9ff 0%, #fff 60%);
		border: 1px solid #d4e5fc;
		border-radius: 6px;
		padding: 20px 24px;
		display: flex;
		align-items: center;
		gap: 18px;
		margin-bottom: 28px;
		box-shadow: 0 1px 2px rgba(23, 33, 83, .04);
		flex-wrap: wrap;
	}

	.essb-df-optimization-icon {
		flex-shrink: 0;
		width: 48px;
		height: 48px;
		background: #e1f0ff;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.essb-df-optimization-text {
		flex: 1;
		min-width: 0;
	}

	.essb-df-optimization-title {
		font-size: 15px;
		font-weight: 600;
		color: #172153;
		margin: 0 0 4px;
		padding: 0;
		line-height: 1.3;
	}

	.essb-df-optimization-desc {
		font-size: 13px;
		color: #6b7280;
		margin: 0;
		line-height: 1.5;
	}

	.essb-df-optimization-btn {
		flex-shrink: 0;
		white-space: nowrap;
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	/* === Wizard Overlay === */
	.essb-ow-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(23, 33, 83, .45);
		z-index: 99990;
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease;
	}

	.essb-ow-overlay-show {
		opacity: 1;
		pointer-events: auto;
	}

	/* === Dashboard Main + News Sidebar === */
	.essb-df-main-content {
		display: flex;
		gap: 24px;
		align-items: flex-start;
		margin-top: 20px;
	}

	.essb-df-main-left {
		flex: 1;
		min-width: 0;
	}

	.essb-df-main-left .essb-df-optimization {
		margin-top: 0;
	}

	.essb-df-main-left .essb-df-optimization+.essb-df-optimization {
		margin-top: 16px;
	}

	.essb-df-main-right {
		width: 400px;
		flex-shrink: 0;
	}

	.essb-df-news-widget {
		background: #fff;
		border: 1px solid #e4e9f5;
		border-radius: 6px;
		padding: 20px;
		box-shadow: 0 1px 2px rgba(23, 33, 83, .04);
	}

	.essb-df-news-heading {
		font-size: 15px;
		font-weight: 600;
		color: #172153;
		margin-bottom: 14px;
		padding-bottom: 14px;
		border-bottom: 1px solid #f0f3fa;
	}

	.essb-news-row {
		margin-bottom: 14px;
		padding-bottom: 14px;
		border-bottom: 1px solid #f5f7fb;
		line-height: 1.4;
	}

	.essb-news-row:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.essb-news-title a {
		font-size: 13px;
		font-weight: 500;
		color: #6b7280;
		text-decoration: none;
	}

	.essb-news-title a:hover {
		text-decoration: none;
		color: #1b84ff;
	}

	.essb-news-date {
		font-size: 11px;
		color: #9ca3af;
		display: block;
		margin-top: 4px;
	}

	.essb-df-news-footer {
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid #f0f3fa;
		text-align: center;
	}

	@media (max-width: 900px) {
		.essb-df-main-content {
			flex-direction: column;
		}

		.essb-df-main-right {
			width: 100%;
			position: static;
		}
	}

	/* === Activation Form === */
	.essb-activation-form {
		background: #fff;
		border: 1px solid #e4e9f5;
		border-radius: 6px;
		padding: 35px;
		margin-top: 20px;
		box-shadow: 0 1px 2px rgba(23, 33, 83, .04);
		margin: 48px auto;
		max-width: 640px
	}

	.essb-activation-form-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.essb-activation-title {
		font-size: 18px;
		font-weight: 600;
	}

	.essb-activation-title.color-activated {
		color: #22c55e;
	}

	.essb-activation-title.color-notactivated {
		color: #ef4444;
	}

	.essb-activation-state {
		font-size: 13px;
		font-weight: 600;
		padding: 4px 12px;
		border-radius: 4px;
	}

	.essb-activation-state.background-activated {
		background: #dcfce7;
		color: #166534;
	}

	.essb-activation-state.background-notactivated {
		background: #fef2f2;
		color: #991b1b;
	}

	.essb-activate-localhost {
		font-size: 12px;
		color: #6b7280;
		margin-top: 12px;
		padding: 8px 12px;
		background: #fef9c3;
		border-radius: 4px;
		line-height: 1.4;
	}

	.essb-activation-form-code {
		margin-top: 16px;
	}

	.essb-activation-form-header {
		margin-bottom: 8px;
	}

	.essb-activation-form-header strong {
		font-size: 13px;
		color: #172153;
	}

	.essb-activation-form-header a {
		font-size: 12px;
		color: #1b84ff;
		text-decoration: none;
	}

	.essb-activation-form-header a:hover {
		text-decoration: underline;
	}

	.essb-purchase-code {
		width: 100%;
		padding: 8px 12px;
		font-size: 13px;
		border: 1px solid #d1d5db;
		border-radius: 4px;
		background: #f9fafb;
		color: #374151;
		box-sizing: border-box;
	}

	.essb-purchase-code:focus {
		border-color: #1b84ff;
		box-shadow: 0 0 0 1px #1b84ff;
		outline: none;
	}

	.essb-activation-buttons {
		margin-top: 16px;
	}

	.essb-activation-button {
		display: inline-block;
		padding: 8px 16px;
		font-size: 13px;
		font-weight: 500;
		border-radius: 4px;
		text-decoration: none;
		cursor: pointer;
		border: none;
	}

	.essb-activation-button-default {
		background: #1b84ff;
		color: #fff;
	}

	.essb-activation-button-default:hover {
		background: #1671d9;
		color: #fff;
	}

	/* === Wizard Modal === */
	.essb-ow-wrap {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(.96);
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 16px 48px rgba(23, 33, 83, .2);
		width: 100%;
		max-width: 620px;
		max-height: 85vh;
		display: flex;
		flex-direction: column;
		z-index: 99991;
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease, transform .3s ease;
	}

	.essb-ow-wrap-show {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, -50%) scale(1);
	}

	.essb-ow-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 28px 0;
		flex-shrink: 0;
	}

	.essb-ow-title {
		font-size: 16px;
		font-weight: 700;
		color: #172153;
	}

	.essb-ow-close {
		width: 32px;
		height: 32px;
		border-radius: 6px;
		border: none;
		background: transparent;
		font-size: 20px;
		color: #8a94b5;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background .15s ease, color .15s ease;
	}

	.essb-ow-close:hover {
		background: #f4f7fc;
		color: #172153;
	}

	.essb-ow-step-indicator {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 28px 16px;
		flex-shrink: 0;
		font-size: 13px;
		color: #8a94b5;
	}

	.essb-ow-step-dots {
		display: flex;
		gap: 8px;
	}

	.essb-ow-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #d1d5e0;
		transition: background .3s ease;
		display: inline-block;
	}

	.essb-ow-dot-active {
		background: #1b84ff;
	}

	.essb-ow-body {
		padding: 4px 28px 0;
		overflow-y: auto;
		flex: 1;
	}

	.essb-ow-pane {
		display: none;
		padding-bottom: 20px;
	}

	.essb-ow-pane-active {
		display: block;
		animation: essbFadeIn .3s ease;
	}

	@keyframes essbFadeIn {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.essb-ow-pane-title {
		font-size: 19px;
		font-weight: 600;
		color: #172153;
		margin: 0 0 8px;
		padding: 0;
	}

	.essb-ow-pane-desc {
		font-size: 13px;
		color: #6b7280;
		line-height: 1.6;
		margin: 0 0 20px;
	}

	.essb-ow-pane-desc a {
		color: #1b84ff;
		text-decoration: none;
		font-weight: 500;
	}

	.essb-ow-pane-desc a:hover {
		text-decoration: underline;
	}

	.essb-ow-note {
		background: #fff8e6;
		border-left: 3px solid #f5a623;
		padding: 10px 14px;
		border-radius: 4px;
		font-size: 12px;
		color: #7a6213;
		line-height: 1.5;
		margin-bottom: 16px;
	}

	.essb-ow-note strong {
		color: #5a4a0f;
	}

	.essb-ow-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.essb-ow-list-item {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding: 14px 16px;
		border: 2px solid #e4e9f5;
		border-radius: 8px;
		cursor: pointer;
		transition: border-color .2s ease, box-shadow .2s ease;
	}

	.essb-ow-list-item:hover {
		border-color: #b8d6f5;
	}

	.essb-ow-list-selected {
		border-color: #1b84ff;
		box-shadow: 0 0 0 3px rgba(27, 132, 255, .12);
	}

	.essb-ow-list-item input {
		display: none;
	}

	.essb-ow-list-radio {
		width: 20px;
		height: 20px;
		border: 2px solid #d1d5e0;
		border-radius: 50%;
		flex-shrink: 0;
		margin-top: 1px;
		transition: border-color .2s ease;
		position: relative;
	}

	.essb-ow-list-selected .essb-ow-list-radio {
		border-color: #1b84ff;
	}

	.essb-ow-list-selected .essb-ow-list-radio::after {
		content: '';
		position: absolute;
		top: 5px;
		left: 5px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #1b84ff;
	}

	.essb-ow-list-content {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.essb-ow-list-title {
		font-size: 14px;
		font-weight: 700;
		color: #172153;
	}

	.essb-ow-list-desc {
		font-size: 12px;
		color: #6b7280;
		line-height: 1.5;
	}

	.essb-ow-toggle {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding: 12px 16px;
		border-radius: 6px;
		cursor: pointer;
		transition: background .15s ease;
	}

	.essb-ow-toggle:hover {
		background: #f8faff;
	}

	.essb-ow-toggle input {
		display: none;
	}

	.essb-ow-toggle-track {
		position: relative;
		width: 36px;
		height: 20px;
		flex-shrink: 0;
		border-radius: 10px;
		background: #d1d5e0;
		transition: background .2s ease;
		margin-top: 2px;
	}

	.essb-ow-toggle-track::after {
		content: '';
		position: absolute;
		top: 2px;
		left: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #fff;
		transition: transform .2s ease;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	}

	.essb-ow-toggle input:checked+.essb-ow-toggle-track {
		background: #1b84ff;
	}

	.essb-ow-toggle input:checked+.essb-ow-toggle-track::after {
		transform: translateX(16px);
	}

	.essb-ow-toggle-content {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.essb-ow-toggle-label {
		font-size: 13px;
		font-weight: 600;
		color: #172153;
	}

	.essb-ow-toggle-desc {
		font-size: 12px;
		color: #8a94b5;
		line-height: 1.5;
	}

	.essb-ow-toggle-large {
		padding: 14px 16px;
		background: #f8faff;
		border-radius: 8px;
		margin-bottom: 0;
		transition: opacity .2s ease;
	}

	.essb-ow-toggle-disabled {
		opacity: .55;
	}

	.essb-ow-options {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin-top: 4px;
		padding-left: 50px;
	}

	.essb-ow-field {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 12px 16px;
		margin-bottom: 2px;
	}

	.essb-ow-field-label {
		font-size: 13px;
		color: #172153;
		font-weight: 600;
		min-width: 140px;
	}

	.essb-ow-select {
		font-size: 13px;
		padding: 6px 10px;
		border: 1px solid #d1d5e0;
		border-radius: 4px;
		background: #fff;
		color: #172153;
		cursor: pointer;
	}

	.essb-ow-select:focus {
		outline: none;
		border-color: #1b84ff;
		box-shadow: 0 0 0 2px rgba(27, 132, 255, .15);
	}

	.essb-ow-summary {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin-bottom: 24px;
	}

	.essb-ow-summary-item {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding: 14px 16px;
		background: #f8faff;
		border-radius: 6px;
	}

	.essb-ow-summary-check {
		flex-shrink: 0;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: #e1f0ff;
		color: #1b84ff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 1px;
	}

	.essb-ow-summary-item strong {
		display: block;
		font-size: 13px;
		color: #172153;
		margin-bottom: 2px;
	}

	.essb-ow-summary-item p {
		font-size: 12px;
		color: #6b7280;
		margin: 0;
	}

	.essb-ow-apply-wrap {
		text-align: center;
		padding: 8px 0 12px;
	}

	.essb-ow-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 9px 20px;
		font-size: 13px;
		font-weight: 600;
		border-radius: 6px;
		border: none;
		cursor: pointer;
		transition: all .2s ease;
		text-decoration: none;
		font-family: inherit;
	}

	.essb-ow-btn-primary {
		background: #1b84ff;
		color: #fff;
	}

	.essb-ow-btn-primary:hover {
		background: #056ee9;
		box-shadow: 0 4px 12px rgba(27, 132, 255, .3);
	}

	.essb-ow-btn-ghost {
		background: transparent;
		color: #6b7280;
	}

	.essb-ow-btn-ghost:hover {
		color: #172153;
		background: #f4f7fc;
	}

	.essb-ow-btn:disabled {
		opacity: .4;
		cursor: not-allowed;
	}

	.essb-ow-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 28px 18px;
		border-top: 1px solid #eef2f8;
		flex-shrink: 0;
	}

	.essb-ow-footer-right {
		display: flex;
		gap: 10px;
	}

	/* === Quick Share Buttons Setup === */
	.essb-sw-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(23, 33, 83, .45);
		z-index: 99990;
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease;
	}

	.essb-sw-overlay-show {
		opacity: 1;
		pointer-events: auto;
	}

	.essb-sw-wrap {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(.96);
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 16px 48px rgba(23, 33, 83, .2);
		width: 100%;
		max-width: 680px;
		max-height: 88vh;
		display: flex;
		flex-direction: column;
		z-index: 99991;
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease, transform .3s ease;
	}

	.essb-sw-wrap-show {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, -50%) scale(1);
	}

	.essb-sw-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 28px 0;
		flex-shrink: 0;
	}

	.essb-sw-header-title {
		font-size: 16px;
		font-weight: 700;
		color: #172153;
	}

	.essb-sw-close {
		width: 32px;
		height: 32px;
		border-radius: 6px;
		border: none;
		background: transparent;
		font-size: 20px;
		color: #8a94b5;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background .15s, color .15s;
	}

	.essb-sw-close:hover {
		background: #f4f7fc;
		color: #172153;
	}

	.essb-sw-steps {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 28px 14px;
		flex-shrink: 0;
		font-size: 13px;
		color: #8a94b5;
	}

	.essb-sw-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #d1d5e0;
		transition: background .3s;
		display: inline-block;
	}

	.essb-sw-dot-active {
		background: #1b84ff;
	}

	.essb-sw-dot-done {
		background: #1b84ff;
		opacity: .5;
	}

	.essb-sw-step-label {
		margin-left: auto;
		white-space: nowrap;
	}

	.essb-sw-body {
		padding: 4px 28px 0;
		overflow-y: auto;
		flex: 1;
	}

	.essb-sw-pane {
		display: none;
		padding-bottom: 20px;
	}

	.essb-sw-pane-active {
		display: block;
		animation: essbSwFadeIn .3s ease;
	}

	@keyframes essbSwFadeIn {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.essb-sw-pane-title {
		font-size: 19px;
		font-weight: 600;
		color: #172153;
		margin: 0 0 6px;
		padding: 0;
	}

	.essb-sw-pane-desc {
		font-size: 13px;
		color: #6b7280;
		line-height: 1.6;
		margin: 0 0 18px;
	}

	.essb-sw-section-title {
		font-size: 14px;
		font-weight: 600;
		color: #172153;
		margin: 20px 0 10px;
		padding: 0;
	}

	.essb-sw-section-desc {
		font-size: 12px;
		color: #8a94b5;
		margin: -6px 0 12px;
		line-height: 1.5;
	}

	.essb-sw-note {
		background: #fff8e6;
		border-left: 3px solid #f5a623;
		padding: 10px 14px;
		border-radius: 4px;
		font-size: 12px;
		color: #7a6213;
		line-height: 1.5;
		margin-bottom: 16px;
	}

	.essb-sw-note-fb {
		background: #eaf4ff;
		border-left-color: #1b84ff;
		color: #1a4a7a;
		margin-top: -10px;
	}

	/* Network grid - Step 1 */
	.essb-sw-network-search {
		width: 100%;
		padding: 8px 12px;
		font-size: 13px;
		border: 1px solid #d1d5e0;
		border-radius: 6px;
		background: #fff;
		color: #172153;
		outline: none;
		transition: border-color .2s;
		box-sizing: border-box;
		margin-bottom: 10px;
	}

	.essb-sw-network-search:focus {
		border-color: #1b84ff;
		box-shadow: 0 0 0 2px rgba(27, 132, 255, .12);
	}

	.essb-sw-network-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
		max-height: 260px;
		overflow-y: auto;
		padding: 2px;
		margin-top: 8px;
	}

	.essb-sw-network-item {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 10px;
		border: 1px solid #e4e9f5;
		border-radius: 6px;
		cursor: pointer;
		transition: all .15s;
		font-size: 12px;
		color: #172153;
	}

	.essb-sw-network-item:hover {
		border-color: #b8d6f5;
		background: #f8faff;
	}

	.essb-sw-network-selected {
		border-color: #1b84ff;
		background: #eaf4ff;
	}

	.essb-sw-network-check {
		width: 16px;
		height: 16px;
		border: 2px solid #d1d5e0;
		border-radius: 3px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		color: #fff;
		transition: all .15s;
	}

	.essb-sw-network-selected .essb-sw-network-check {
		background: #1b84ff;
		border-color: #1b84ff;
	}

	.essb-sw-network-icon {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		font-weight: 700;
		color: #fff;
		flex-shrink: 0;
		cursor: grab;
	}

	.essb-sw-network-name {
		font-weight: 500;
	}

	.essb-sw-selected-info {
		font-size: 12px;
		color: #8a94b5;
		margin-top: 8px;
		margin-bottom: 8px;
	}

	/* Toggle switches */
	.essb-sw-list-horizontal {
		flex-direction: row !important;
		_flex-wrap: wrap;
	}

	.essb-sw-list-horizontal .essb-sw-list-item {
		flex: 1;
		_min-width: 60px;
		padding: 10px 12px;
		text-align: center;
	}

	.essb-sw-list-horizontal .essb-sw-list-item .essb-sw-list-item-content {
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.essb-sw-toggle {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding: 12px 16px;
		border-radius: 6px;
		cursor: pointer;
		user-select: none;
		transition: background .15s ease;
	}

	.essb-sw-toggle:hover {
		background: #f8faff;
	}

	.essb-sw-toggle input {
		display: none;
	}

	.essb-sw-toggle-track {
		position: relative;
		width: 36px;
		height: 20px;
		border-radius: 10px;
		background: #d1d5e0;
		transition: background .2s;
		flex-shrink: 0;
	}

	.essb-sw-toggle-track::after {
		content: "";
		position: absolute;
		top: 2px;
		left: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #fff;
		transition: transform .2s;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	}

	.essb-sw-toggle input:checked+.essb-sw-toggle-track {
		background: #1b84ff;
	}

	.essb-sw-toggle input:checked+.essb-sw-toggle-track::after {
		transform: translateX(16px);
	}

	.essb-sw-toggle-content {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.essb-sw-toggle-desc {
		font-size: 11px;
		color: #8a94b5;
		line-height: 1.5;
	}

	.essb-sw-toggle-label {
		font-size: 13px;
		font-weight: 600;
		color: #172153;
	}

	.essb-sw-toggle-large {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding: 14px 16px;
		background: #f8faff;
		border-radius: 8px;
		margin-bottom: 0;
	}

	.essb-sw-toggle-disabled {
		opacity: .55;
	}

	/* Visibility controls - Step 2 */
	.essb-sw-visibility-table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 8px;
		border: 1px solid #e4e9f5;
		border-radius: 6px;
		overflow: hidden;
	}

	.essb-sw-visibility-table td,
	.essb-sw-visibility-table th {
		padding: 8px 14px;
		text-align: left;
		border-bottom: 1px solid #f0f3fa;
		font-size: 13px;
	}

	.essb-sw-visibility-table th {
		background: #f8faff;
		font-size: 12px;
		font-weight: 600;
		color: #6b7280;
	}

	.essb-sw-visibility-table tr:last-child td {
		border-bottom: none;
	}

	.essb-sw-visibility-table .essb-sw-toggle {
		padding: 0;
	}

	.essb-sw-visibility-table .essb-sw-toggle-track {
		width: 32px;
		height: 18px;
	}

	.essb-sw-visibility-table .essb-sw-toggle-track::after {
		width: 14px;
		height: 14px;
	}

	.essb-sw-visibility-table .essb-sw-toggle input:checked+.essb-sw-toggle-track::after {
		transform: translateX(14px);
	}

	/* Lists (template, display mode, counters) */
	.essb-sw-list {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.essb-sw-list-item {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 12px 14px;
		border: 2px solid #e4e9f5;
		border-radius: 8px;
		cursor: pointer;
		transition: border-color .2s, box-shadow .2s;
	}

	.essb-sw-list-item:hover {
		border-color: #b8d6f5;
	}

	.essb-sw-list-selected {
		border-color: #1b84ff;
		box-shadow: 0 0 0 3px rgba(27, 132, 255, .12);
	}

	.essb-sw-list-item input[type="radio"] {
		display: none;
	}

	.essb-sw-list-item-content {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.essb-sw-list-item-title {
		font-size: 13px;
		font-weight: 700;
		color: #172153;
	}

	.essb-sw-list-item-desc {
		font-size: 11px;
		color: #6b7280;
		line-height: 1.4;
	}

	/* Inline fields */
	.essb-sw-inline-fields {
		display: flex;
		gap: 16px;
		margin-bottom: 8px;
	}

	.essb-sw-field {
		display: flex;
		flex-direction: column;
		gap: 6px;
		flex: 1;
	}

	.essb-sw-field-label {
		font-size: 13px;
		font-weight: 600;
		color: #172153;
	}

	.essb-sw-select {
		padding: 8px 12px;
		font-size: 13px;
		border: 1px solid #d1d5e0;
		border-radius: 6px;
		background: #fff;
		color: #172153;
		outline: none;
		cursor: pointer;
	}

	/* Post type grid - Step 6 */
	.essb-sw-type-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 8px;
	}

	.essb-sw-type-item {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 14px 8px 12px;
		border: 2px solid #e4e9f5;
		border-radius: 8px;
		cursor: pointer;
		transition: all .15s;
		font-size: 13px;
		font-weight: 500;
		color: #6b7280;
		user-select: none;
	}

	.essb-sw-type-item:hover {
		border-color: #b8d6f5;
		background: #fafcff;
	}

	.essb-sw-type-selected {
		border-color: #1b84ff;
		background: #eaf4ff;
		color: #172153;
	}

	/* Position rows - Step 6 */
	.essb-sw-pos-row {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		border: 1px solid #e4e9f5;
		border-radius: 6px;
		margin-bottom: 4px;
	}

	.essb-sw-pos-toggle {
		flex-shrink: 0;
	}

	.essb-sw-pos-check {
		display: none !important;
	}

	.essb-sw-pos-toggle-slider {
		position: relative;
		width: 36px;
		height: 20px;
		border-radius: 10px;
		background: #1b84ff;
		transition: background .2s;
		display: block;
		cursor: pointer;
	}

	.essb-sw-pos-toggle-slider::after {
		content: "";
		position: absolute;
		top: 2px;
		left: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #fff;
		transition: transform .2s;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	}

	.essb-sw-pos-check:not(:checked)+.essb-sw-pos-toggle-slider {
		background: #d1d5e0;
	}

	.essb-sw-pos-check:not(:checked)+.essb-sw-pos-toggle-slider::after {
		transform: none;
	}

	.essb-sw-pos-info {
		flex: 1;
		min-width: 0;
	}

	.essb-sw-pos-name {
		font-size: 13px;
		font-weight: 600;
		color: #172153;
	}

	.essb-sw-pos-desc {
		font-size: 11px;
		color: #8a94b5;
		margin-top: 1px;
	}

	/* Device chips */
	.essb-sw-device-chips {
		display: flex;
		gap: 4px;
		flex-shrink: 0;
	}

	.essb-sw-device-chip {
		font-size: 11px;
		font-weight: 500;
		color: #8a94b5;
		background: #f4f7fc;
		border: 1px solid #e4e9f5;
		padding: 4px 10px;
		border-radius: 5px;
		cursor: pointer;
		user-select: none;
		transition: all .15s;
	}

	.essb-sw-device-chip:hover {
		border-color: #b8d6f5;
	}

	.essb-sw-device-chip-active {
		color: #172153;
		background: #eaf4ff;
		border-color: #1b84ff;
	}

	/* Position grid (Pinterest) */
	.essb-sw-position-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 6px;
	}

	.essb-sw-position-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 10px 8px;
		border: 2px solid #e4e9f5;
		border-radius: 8px;
		cursor: pointer;
		transition: all .15s;
		font-size: 12px;
		font-weight: 500;
		color: #6b7280;
		text-align: center;
	}

	.essb-sw-position-item:hover {
		border-color: #b8d6f5;
	}

	.essb-sw-position-selected {
		border-color: #1b84ff;
		background: #eaf4ff;
		color: #172153;
	}

	/* Advanced options */
	.essb-sw-advanced-options {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: 12px;
	}

	.essb-sw-advanced-row {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	/* Summary */
	.essb-sw-summary {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin-bottom: 24px;
	}

	.essb-sw-summary-item {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding: 14px 16px;
		background: #f8faff;
		border-radius: 6px;
	}

	.essb-sw-summary-check {
		flex-shrink: 0;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: #e1f0ff;
		color: #1b84ff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 1px;
	}

	.essb-sw-summary-item strong {
		display: block;
		font-size: 13px;
		color: #172153;
		margin-bottom: 2px;
	}

	.essb-sw-summary-item p {
		font-size: 12px;
		color: #6b7280;
		margin: 0;
	}

	.essb-sw-apply-wrap {
		text-align: center;
		padding: 8px 0 12px;
	}

	/* Buttons */
	.essb-sw-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 9px 20px;
		font-size: 13px;
		font-weight: 600;
		border-radius: 6px;
		border: none;
		cursor: pointer;
		transition: all .2s;
		text-decoration: none;
		font-family: inherit;
	}

	.essb-sw-btn-primary {
		background: #1b84ff;
		color: #fff;
	}

	.essb-sw-btn-primary:hover {
		background: #056ee9;
		box-shadow: 0 4px 12px rgba(27, 132, 255, .3);
	}

	.essb-sw-btn-ghost {
		background: transparent;
		color: #6b7280;
	}

	.essb-sw-btn-ghost:hover {
		color: #172153;
		background: #f4f7fc;
	}

	.essb-sw-btn:disabled {
		opacity: .4;
		cursor: not-allowed;
	}

	/* Footer */
	.essb-sw-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 28px 18px;
		border-top: 1px solid #eef2f8;
		flex-shrink: 0;
	}

	.essb-sw-footer-right {
		display: flex;
		gap: 10px;
	}

	/* Scrollbar */
	.essb-sw-body::-webkit-scrollbar {
		width: 4px;
	}

	.essb-sw-body::-webkit-scrollbar-thumb {
		background: #d1d5e0;
		border-radius: 2px;
	}

	.essb-sw-network-grid::-webkit-scrollbar {
		width: 4px;
	}

	.essb-sw-network-grid::-webkit-scrollbar-thumb {
		background: #d1d5e0;
		border-radius: 2px;
	}

	/* Mobile only badge */
	.essb-sw-badge-mobile {
		font-size: 10px;
		font-weight: 600;
		color: #fff;
		background: #7239ea;
		padding: 2px 8px;
		border-radius: 4px;
		text-transform: uppercase;
		letter-spacing: .3px;
		margin-left: 6px;
		vertical-align: middle;
	}

	/* Mobile only tag */
	.essb-sw-mobile-tag {
		font-size: 10px;
		font-weight: 600;
		color: #fff;
		background: #7239ea;
		padding: 2px 8px;
		border-radius: 4px;
		text-transform: uppercase;
		letter-spacing: .3px;
		margin-left: 6px;
	}

	/* Visibility section */
	#essb-sw-visibility-section .essb-sw-btn {
		margin-top: 10px;
		background: #f0f4ff;
		color: #1b84ff;
		border: 1px solid #d0deff;
		padding: 8px 16px;
		font-size: 12px;
	}

	#essb-sw-visibility-section .essb-sw-btn:hover {
		background: #e0ebff;
		color: #056ee9;
		border-color: #1b84ff;
	}

	/* === Initial Config Wizard === */
	/* === Initial Config Wizard (full-screen) === */
	.essb-iw-overlay {
		position: fixed;
		inset: 0;
		background: #f4f9ff;
		z-index: 999998;
		display: none;
	}

	.essb-iw-wrap {
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		background: #fff;
		width: 720px;
		max-width: 100vw;
		display: none;
		flex-direction: column;
		min-height: 100vh;
		z-index: 999999;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: 14px;
		line-height: 1.5;
		color: #1e293b;
	}

	.essb-iw-header {
		background-color: #f4f9ff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px;
		flex-shrink: 0;
	}

	.essb-iw-header-title {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		font-weight: 600;
		color: #1e293b;
	}

	.essb-iw-header-title svg {
		flex-shrink: 0;
	}

	.essb-iw-close {
		background: #fff;
		border: 1px solid #dbe0e6;
		font-size: 13px;
		cursor: pointer;
		color: #1e293b;
		padding: 6px 12px;
		line-height: 1;
		border-radius: 6px;
		font-family: inherit;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.essb-iw-close:hover {
		background: #f5f7fa;
		border-color: #6b7280;
	}

	.essb-iw-step-indicator {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 24px;
		border-bottom: 1px solid #dbe0e6;
		background: #f4f9ff;
		flex-shrink: 0;
	}

	.essb-iw-step-indicator>span:first-child {
		font-size: 12px;
		color: #6b7280;
		font-weight: 500;
	}

	.essb-iw-step-dots {
		display: flex;
		gap: 6px;
	}

	.essb-iw-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #d4d8dd;
		transition: all 0.2s ease;
		cursor: pointer;
	}

	.essb-iw-dot-active {
		background: #1b84ff;
		transform: scale(1.3);
	}

	.essb-iw-body {
		padding: 24px;
		overflow-y: auto;
		flex: 1;
		min-height: 260px;
	}

	.essb-iw-pane {
		display: none;
	}

	.essb-iw-pane-active {
		display: block;
	}

	.essb-iw-pane-title {
		font-size: 18px;
		font-weight: 700;
		margin: 0 0 4px;
		letter-spacing: -0.01em;
		color: #0f172a;
	}

	.essb-iw-pane-desc {
		font-size: 13px;
		color: #6b7280;
		margin: 0 0 18px;
		line-height: 1.5;
	}

	.essb-iw-welcome {
		text-align: center;
		padding: 20px 16px;
	}

	.essb-iw-welcome svg {
		display: block;
		margin: 0 auto 16px;
	}

	.essb-iw-welcome h2 {
		font-size: 20px;
		font-weight: 700;
		margin: 0 0 10px;
		letter-spacing: -0.01em;
		color: #0f172a;
	}

	.essb-iw-welcome p {
		font-size: 14px;
		color: #6b7280;
		line-height: 1.7;
		margin: 0 0 8px;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}

	.essb-iw-welcome-note {
		font-size: 12.5px;
		color: #9ca3af;
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid #eef2f6;
	}

	.essb-iw-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 8px 18px;
		border-radius: 6px;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		border: none;
		transition: all 0.2s ease;
		text-decoration: none;
		font-family: inherit;
	}

	.essb-iw-btn-primary {
		background: #1b84ff;
		color: #fff;
	}

	.essb-iw-btn-primary:hover {
		background: #1a7ae6;
	}

	.essb-iw-btn-ghost {
		background: #f0f6ff;
		color: #1b84ff;
	}

	.essb-iw-btn-ghost:hover {
		background: #e8f3ff;
	}

	.essb-iw-btn-sm {
		padding: 5px 12px;
		font-size: 11px;
	}

	.essb-iw-btn-lg {
		padding: 10px 26px;
		font-size: 14px;
	}

	.essb-iw-btn:disabled {
		opacity: 0.4;
		cursor: not-allowed;
	}

	.essb-iw-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 24px;
		border-top: 1px solid #dbe0e6;
		background: #f4f9ff;
		flex-shrink: 0;
	}

	.essb-iw-toggle {
		display: flex;
		align-items: center;
		gap: 12px;
		cursor: pointer;
		padding: 10px 14px;
		border-radius: 8px;
		border: 1px solid #dbe0e6;
		transition: all 0.2s ease;
		background: #fff;
		user-select: none;
	}

	.essb-iw-toggle:hover {
		border-color: #1b84ff;
		background: #f0f6ff;
	}

	.essb-iw-toggle input[type="checkbox"] {
		display: none;
	}

	.essb-iw-toggle-track {
		position: relative;
		flex-shrink: 0;
		width: 36px;
		height: 20px;
		border-radius: 10px;
		background: #d4d8dd;
		transition: background 0.2s ease;
	}

	.essb-iw-toggle-track::after {
		content: '';
		position: absolute;
		top: 2px;
		left: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
		transition: transform 0.2s ease;
	}

	.essb-iw-toggle input:checked+.essb-iw-toggle-track {
		background: #1b84ff;
	}

	.essb-iw-toggle input:checked+.essb-iw-toggle-track::after {
		transform: translateX(16px);
	}

	.essb-iw-toggle-content {
		display: flex;
		flex-direction: column;
		gap: 1px;
		flex: 1;
		min-width: 0;
	}

	.essb-iw-toggle-label {
		font-size: 13px;
		font-weight: 600;
		color: #0f172a;
	}

	.essb-iw-toggle-desc {
		font-size: 11.5px;
		color: #6b7280;
		line-height: 1.4;
	}

	.essb-iw-toggle-large {
		padding: 11px 16px;
	}

	.essb-iw-field-info {
		font-size: 11.5px;
		color: #6b7280;
		margin: 3px 0 0;
		line-height: 1.4;
	}

	.essb-iw-options {
		margin: 10px 0 0;
		padding: 18px 18px 16px;
		background: #fafcfe;
		border: 1px solid #dbe0e6;
		border-left: 3px solid #1b84ff;
		border-radius: 0 8px 8px 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.essb-iw-options-item {
		background: #fff;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		padding: 15px;
	}

	.essb-iw-options-item+.essb-iw-options-item {
		margin-top: 10px;
	}

	.essb-iw-options-item-label {
		font-size: 13px;
		font-weight: 600;
		color: #0f172a;
	}

	.essb-iw-options-item-desc {
		font-size: 11.5px;
		color: #6b7280;
		line-height: 1.4;
		margin: 0 0 4px;
	}

	.essb-iw-mode-info {
		padding: 12px 16px;
		background: #f0f6ff;
		border: 1px solid #b7d6ff;
		border-radius: 8px;
		font-size: 13px;
		line-height: 1.6;
		color: #1e293b;
		margin-bottom: 16px;
	}

	.essb-iw-mode-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.essb-iw-mode-card {
		border: 2px solid #dbe0e6;
		border-radius: 8px;
		padding: 18px 16px 16px;
		cursor: pointer;
		transition: all 0.2s ease;
		background: #fff;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.essb-iw-mode-card:hover {
		border-color: #1b84ff;
		box-shadow: 0 2px 8px rgba(27, 132, 255, 0.08);
	}

	.essb-iw-mode-selected {
		border-color: #1b84ff;
		background: #f0f6ff;
		box-shadow: 0 0 0 1px #1b84ff;
	}

	.essb-iw-mode-name {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.2;
	}

	.essb-iw-mode-desc {
		font-size: 12.5px;
		color: #6b7280;
		line-height: 1.4;
	}

	.essb-iw-mode-help {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: 16px;
		padding: 10px 14px;
		background: #f8fafc;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		color: #6b7280;
	}

	.essb-iw-mode-help-link {
		color: #1b84ff;
		font-weight: 600;
		text-decoration: none;
		margin-left: auto;
	}

	.essb-iw-mode-help-link:hover {
		text-decoration: underline;
	}

	.essb-iw-image-input-wrap {
		display: flex;
		gap: 6px;
	}

	.essb-iw-image-input-wrap .essb-iw-input {
		flex: 1;
	}

	.essb-iw-input {
		width: 100%;
		padding: 7px 10px;
		border: 1px solid #dbe0e6;
		border-radius: 5px;
		font-size: 13px;
		font-family: inherit;
		color: #1e293b;
		background: #fff;
	}

	.essb-iw-input:focus {
		outline: none;
		border-color: #1b84ff;
		box-shadow: 0 0 0 2px rgba(27, 132, 255, 0.1);
	}

	.essb-iw-input[readonly] {
		background: #fafbfc;
		cursor: pointer;
	}

	.essb-iw-image-preview {
		position: relative;
		display: inline-block;
		margin-top: 4px;
		border: 1px solid #dbe0e6;
		border-radius: 5px;
		overflow: hidden;
		max-width: 180px;
	}

	.essb-iw-image-preview img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 80px;
		object-fit: cover;
	}

	.essb-iw-remove-img {
		position: absolute;
		top: 2px;
		right: 2px;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		border: none;
		border-radius: 50%;
		width: 18px;
		height: 18px;
		font-size: 13px;
		cursor: pointer;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.essb-iw-sso-note {
		display: flex;
		align-items: flex-start;
		gap: 6px;
		padding: 10px 14px;
		background: #fff7ed;
		border: 1px solid #fed7aa;
		border-radius: 6px;
		font-size: 12px;
		color: #1e293b;
		line-height: 1.5;
	}

	.essb-iw-counter-notice {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		padding: 12px 14px;
		background: #fffbeb;
		border: 1px solid #fde68a;
		border-radius: 6px;
		font-size: 12.5px;
		color: #1e293b;
		line-height: 1.5;
		margin-bottom: 8px;
	}

	.essb-iw-analytics-details {
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.essb-iw-analytics-card {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		line-height: 1.5;
	}

	.essb-iw-analytics-card svg {
		flex-shrink: 0;
		margin-top: 1px;
	}

	.essb-iw-analytics-card strong {
		display: block;
		font-size: 13px;
		margin-bottom: 1px;
	}

	.essb-iw-analytics-card span {
		color: #6b7280;
	}

	.essb-iw-analytics-more {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 10px 14px;
		background: #f8fafc;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		color: #6b7280;
	}

	.essb-iw-analytics-more a {
		color: #1b84ff;
		font-weight: 600;
		text-decoration: none;
		margin-left: auto;
	}

	.essb-iw-analytics-more a:hover {
		text-decoration: underline;
	}

	.essb-iw-pinterest-details {
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.essb-iw-pinterest-card {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		line-height: 1.5;
	}

	.essb-iw-pinterest-card svg {
		flex-shrink: 0;
		margin-top: 1px;
	}

	.essb-iw-pinterest-card strong {
		display: block;
		font-size: 13px;
		margin-bottom: 1px;
	}

	.essb-iw-pinterest-card span {
		color: #6b7280;
	}

	.essb-iw-pinterest-more {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 10px 14px;
		background: #f8fafc;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		color: #6b7280;
	}

	.essb-iw-pinterest-more a {
		color: #1b84ff;
		font-weight: 600;
		text-decoration: none;
		margin-left: auto;
	}

	.essb-iw-pinterest-more a:hover {
		text-decoration: underline;
	}

	.essb-iw-quotes-details {
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.essb-iw-quotes-card {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		line-height: 1.5;
	}

	.essb-iw-quotes-card svg {
		flex-shrink: 0;
		margin-top: 1px;
	}

	.essb-iw-quotes-card strong {
		display: block;
		font-size: 13px;
		margin-bottom: 1px;
	}

	.essb-iw-quotes-card span {
		color: #6b7280;
	}

	.essb-iw-quotes-more {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 10px 14px;
		background: #f8fafc;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		color: #6b7280;
	}

	.essb-iw-quotes-more a {
		color: #1b84ff;
		font-weight: 600;
		text-decoration: none;
		margin-left: auto;
	}

	.essb-iw-quotes-more a:hover {
		text-decoration: underline;
	}

	.essb-iw-shorty-row {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		background: #f0f6ff;
		border: 1px solid #b7d6ff;
		border-radius: 6px;
		margin-top: 18px;
	}

	.essb-iw-shorty-info {
		flex: 1;
		min-width: 0;
	}

	.essb-iw-shorty-info strong {
		display: block;
		font-size: 13px;
		margin-bottom: 1px;
		color: #1e293b;
	}

	.essb-iw-shorty-info span {
		font-size: 12px;
		color: #6b7280;
		line-height: 1.4;
		display: block;
	}

	.essb-iw-shorty-learn {
		display: inline-block;
		margin-top: 4px;
		font-size: 12px;
		font-weight: 600;
		color: #1b84ff;
		text-decoration: none;
	}

	.essb-iw-shorty-learn:hover {
		text-decoration: underline;
	}

	.essb-iw-shorty-more {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: 16px;
		padding: 10px 14px;
		background: #f8fafc;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		color: #6b7280;
	}

	.essb-iw-shorty-more a {
		color: #1b84ff;
		font-weight: 600;
		text-decoration: none;
		margin-left: auto;
	}

	.essb-iw-shorty-more a:hover {
		text-decoration: underline;
	}

	.essb-iw-profiles-details {
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.essb-iw-profiles-card {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		line-height: 1.5;
	}

	.essb-iw-profiles-card svg {
		flex-shrink: 0;
		margin-top: 1px;
	}

	.essb-iw-profiles-card strong {
		display: block;
		font-size: 13px;
		margin-bottom: 1px;
	}

	.essb-iw-profiles-card span {
		color: #6b7280;
	}

	.essb-iw-profiles-more {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 10px 14px;
		background: #f8fafc;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		color: #6b7280;
	}

	.essb-iw-profiles-more a {
		color: #1b84ff;
		font-weight: 600;
		text-decoration: none;
		margin-left: auto;
	}

	.essb-iw-profiles-more a:hover {
		text-decoration: underline;
	}

	.essb-iw-subscribe-details {
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.essb-iw-subscribe-card {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		line-height: 1.5;
	}

	.essb-iw-subscribe-card svg {
		flex-shrink: 0;
		margin-top: 1px;
	}

	.essb-iw-subscribe-card strong {
		display: block;
		font-size: 13px;
		margin-bottom: 1px;
	}

	.essb-iw-subscribe-card span {
		color: #6b7280;
	}

	.essb-iw-subscribe-more {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 10px 14px;
		background: #f8fafc;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		color: #6b7280;
	}

	.essb-iw-subscribe-more a {
		color: #1b84ff;
		font-weight: 600;
		text-decoration: none;
		margin-left: auto;
	}

	.essb-iw-subscribe-more a:hover {
		text-decoration: underline;
	}

	.essb-iw-chat-details {
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.essb-iw-chat-card {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		line-height: 1.5;
	}

	.essb-iw-chat-card svg {
		flex-shrink: 0;
		margin-top: 1px;
	}

	.essb-iw-chat-card strong {
		display: block;
		font-size: 13px;
		margin-bottom: 1px;
	}

	.essb-iw-chat-card span {
		color: #6b7280;
	}

	.essb-iw-chat-hero {
		flex-direction: column;
		gap: 6px;
		background: #f0f6ff;
		border: 1px solid #b7d6ff;
	}

	.essb-iw-chat-hero strong {
		font-size: 14px;
		text-align: center;
	}

	.essb-iw-chat-hero span {
		font-size: 12px;
		line-height: 1.5;
	}

	.essb-iw-chat-actions {
		display: flex;
		gap: 6px;
		margin-top: 4px;
	}

	.essb-iw-chat-more {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 10px 14px;
		background: #f8fafc;
		border: 1px solid #eef2f6;
		border-radius: 6px;
		font-size: 12.5px;
		color: #6b7280;
	}

	.essb-iw-chat-more a {
		color: #1b84ff;
		font-weight: 600;
		text-decoration: none;
		margin-left: auto;
	}

	.essb-iw-chat-more a:hover {
		text-decoration: underline;
	}

	.essb-iw-additional-item {
		margin-bottom: 8px;
	}

	#wp-media-modal {
		z-index: 999999;
	}

	.essb-iw-badge {
		display: inline-flex;
		align-items: center;
		padding: 4px 14px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.4;
		white-space: nowrap;
	}

	.essb-iw-badge-active {
		background: #ecfdf5;
		color: #059669;
		border: 1px solid #a7f3d0;
	}

	.essb-iw-btn-success {
		background: #059669 !important;
		border-color: #059669 !important;
		color: #fff !important;
		cursor: default !important;
		opacity: 0.85;
	}

	.essb-iw-btn[disabled] {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.mask-activation .essb-purchase-code {
		display: none;
	}

	.mask-activation .essb-masked-purchase-code {
		width: 100%;
	}
</style>

<div class="essb-df-wrap">

	<?php
	ESSB_MyAPI::dismiss_promotion();

	if (isset($_GET['essb_dismiss_wizard']) && $_GET['essb_dismiss_wizard'] == '1') {
		if (wp_verify_nonce($_GET['_wpnonce'], 'essb_dismiss_wizard')) {
			ESSB_Plugin_Options::set('wizard_dismissed', 'true');
			ESSB_Plugin_Options::save();
		}
	}

	$current_user = wp_get_current_user();
	$show_wizard_popup = !essb_option_bool_value('wizard_dismissed');


	?>


	<?php echo ESSB_MyAPI::render_promotion_banner(); ?>

	<?php if ($show_wizard_popup) { ?>
	<div class="essb-gs-overlay" id="essb-gs-overlay"></div>
	<div class="essb-gs-modal" id="essb-gs-modal">
		<div class="essb-gs-header">
			<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:#1b84ff"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
			<h2><?php esc_html_e('Thank you for choosing Easy Social Share Buttons for WordPress!', 'essb'); ?></h2>
		</div>
		<div class="essb-gs-body">
			<p><?php esc_html_e('Start the initial getting started wizard to help you determine the functions you need from the plugin. This will help keep only what you need active, and any function can be enabled later at any time.', 'essb'); ?></p>
		</div>
		<div class="essb-gs-footer">
			<button type="button" class="essb-ui-btn essb-ui-btn-primary essb-gs-start" id="essb-gs-start"><?php esc_html_e('Open Setup Wizard', 'essb'); ?></button>
			<a href="<?php echo esc_url(wp_nonce_url(add_query_arg('essb_dismiss_wizard', '1'), 'essb_dismiss_wizard')); ?>" class="essb-gs-dismiss"><?php esc_html_e('Dismiss', 'essb'); ?></a>
		</div>
	</div>
	<style>
		.essb-gs-overlay {
			position: fixed; top: 0; left: 0; width: 100%; height: 100%;
			background: rgba(23, 33, 83, .45); z-index: 999992;
		}
		.essb-gs-modal {
			position: fixed; top: 50%; left: 50%;
			transform: translate(-50%, -50%);
			background: #fff; border-radius: 12px;
			box-shadow: 0 16px 48px rgba(23, 33, 83, .2);
			width: 100%; max-width: 440px;
			z-index: 999993; padding: 0;
		}
		.essb-gs-header {
			padding: 28px 28px 0;
			text-align: center;
		}
		.essb-gs-header svg {
			margin-bottom: 12px;
		}
		.essb-gs-header h2 {
			font-size: 18px; font-weight: 600; color: #172153;
			margin: 0 0 16px; padding: 0; line-height: 1.3;
		}
		.essb-gs-body {
			padding: 0 28px;
		}
		.essb-gs-body p {
			font-size: 13px; color: #6b7280; line-height: 1.5; margin: 0;
		}
		.essb-gs-footer {
			padding: 20px 28px 28px;
			text-align: center;
		}
		.essb-gs-footer .essb-gs-start {
			display: block; width: 100%; margin-bottom: 10px;
			padding: 10px 20px; font-size: 14px; font-weight: 600;
			border: none; border-radius: 4px; cursor: pointer;
		}
		.essb-gs-dismiss {
			display: inline-block; font-size: 12px; color: #9ca3af;
			text-decoration: none;
		}
		.essb-gs-dismiss:hover {
			color: #6b7280;
		}
	</style>
	<script>
	jQuery(function($) {
		var wizardNonce = '<?php echo wp_create_nonce('essb_dismiss_wizard_ajax'); ?>';
		$('#essb-gs-start').on('click', function() {
			$('#essb-gs-overlay, #essb-gs-modal').fadeOut(200, function() {
				$('#essb-gs-overlay, #essb-gs-modal').remove();
			});
			$.post(ajaxurl, {
				action: 'essb_dismiss_wizard_popup',
				nonce: wizardNonce
			});
			document.getElementById('essb-df-open-iwizard').click();
		});
	});
	</script>
	<?php } ?>

	<div class="essb-df-main-content">
		<div class="essb-df-main-left">
			<div class="essb-df-welcome">
				<h2 class="essb-df-welcome-heading"><?php echo esc_html__('Hi', 'essb') . ' ' . esc_html($current_user->display_name) . ','; ?></h2>
				<p class="essb-df-welcome-text"><?php esc_html_e('Welcome to your dashboard! Easily enable or disable the most popular sharing and social features below.', 'essb'); ?> <a class="essb-ui-btn essb-ui-btn-link" href="<?php echo esc_url(admin_url('admin.php?page=essb_redirect_social')); ?>"><?php esc_html_e('Continue to Share Buttons Settings', 'essb'); ?></a></p>
			</div>

			<div class="essb-df-optimization essb-df-swcard" style="margin-top:20px">
				<div class="essb-df-optimization-icon">
					<svg width="32" height="32" viewBox="0 0 44 44" fill="#1b84ff" xmlns="http://www.w3.org/2000/svg">
						<path d="m15,19c-1.1,0-2,0.9-2,2s0.9,2 2,2c0.6,0 1.2-0.3 1.6-0.8 0.2-0.2 0.4-0.6 0.4-1.2 0-0.3-0.1-0.5-0.2-0.8-0.3-0.7-1-1.2-1.8-1.2z" />
						<path d="m26,31c1.1,0 2-0.9 2-2s-0.9-2-2-2c-0.6,0-1.2,0.3-1.6,0.8-0.2,0.2-0.4,0.6-0.4,1.2 0,1.1 0.9,2 2,2z" />
						<path d="m22,0c-12.2,0-22,9.8-22,22s9.8,22 22,22 22-9.8 22-22-9.8-22-22-22zm7,21c-1.6,0-3.1-0.7-4.2-1.7-0.1-0.1-0.4-0.2-0.5-0.1l-3,1.3c-0.2,0.1-0.3,0.3-0.3,0.5 0,0.5-0.1,1-0.2,1.4 0,0.2 0,0.4 0.2,0.5l1.3,.9c0.2,0.1 0.4,0.1 0.6,0 0.9-0.5 2-0.9 3.1-0.9 3.3,0 6,2.7 6,6s-2.7,6-6,6-6-2.7-6-6c0-0.5 0.1-0.9 0.2-1.4 0-0.2 0-0.4-0.2-0.5l-1.3-1c-0.2-0.1-0.4-0.1-0.6,0-0.9,0.6-2,0.9-3.1,0.9-3.3,0-6-2.7-6-6s2.7-6 6-6c1.6,0 3.1,0.7 4.2,1.7 0.1,0.1 0.4,0.2 0.5,0.1l3-1.3c0.2-0.1 0.3-0.3 0.3-0.5 0,0 0,0 0-0.1 0-3.3 2.7-6 6-6s6,2.7 6,6-2.7,6.2-6,6.2z" />
						<path d="m29,13c-1.1,0-2,0.9-2,2 0,0.3 0.1,0.5 0.2,0.8 0.3,0.7 1,1.2 1.8,1.2 1.1,0 2-0.9 2-2s-0.9-2-2-2z" />
					</svg>
				</div>
				<div class="essb-df-optimization-text">
					<h3 class="essb-df-optimization-title"><?php esc_html_e('Getting Started Configuration Wizard', 'essb'); ?></h3>
					<p class="essb-df-optimization-desc"><?php esc_html_e('Walk through the main features of the plugin step by step. Choose what you need and disable what you don\'t — keeping the plugin lightweight and focused on your needs. Recommended for first-time users.', 'essb'); ?></p>
				</div>
				<button type="button" class="essb-ui-btn essb-ui-btn-primary essb-df-optimization-btn" id="essb-df-open-iwizard"><?php esc_html_e('Launch the Setup Wizard', 'essb'); ?></button>
			</div>

			<div class="essb-df-optimization essb-df-swcard" style="margin-top:20px">
				<div class="essb-df-optimization-icon">
					<svg height="32" viewBox="0 0 32 32" width="32" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#1b84ff">
						<path d="M26.7,21.3c-1.6,0-3.1,0.8-4,1.9l-9.8-4.9c0.3-0.8,0.4-1.5,0.4-2.3s-0.1-1.6-0.4-2.3l9.8-4.9c0.9,1.1,2.4,1.9,4,1.9c2.9,0,5.3-2.4,5.3-5.4S29.6,0,26.7,0s-5.4,2.4-5.4,5.3c0,0.4,0.1,0.8,0.1,1.1l-9.9,5l0,0c-1.2-1.3-2.9-2.1-4.8-2.1C3,9.3,0,12.3,0,16s3,6.7,6.7,6.7c1.9,0,3.6-0.8,4.8-2.1l0,0l9.9,5c-0.1,0.4-0.1,0.8-0.1,1.1c0,2.9,2.4,5.3,5.4,5.3s5.3-2.4,5.3-5.3S29.6,21.3,26.7,21.3z M26.7,2.7c1.4,0,2.6,1.2,2.6,2.6c0,1.5-1.2,2.7-2.6,2.7C25.2,8,24,6.8,24,5.3C24,3.9,25.2,2.7,26.7,2.7z M6.7,20c-2.3,0-4-1.8-4-4s1.8-4,4-4c2.2,0,4,1.8,4,4S8.9,20,6.7,20z M26.7,29.3c-1.5,0-2.7-1.2-2.7-2.6c0-1.5,1.2-2.7,2.7-2.7c1.4,0,2.6,1.2,2.6,2.7C29.3,28.1,28.1,29.3,26.7,29.3z" />
					</svg>
				</div>
				<div class="essb-df-optimization-text">
					<h3 class="essb-df-optimization-title"><?php esc_html_e('Quick Share Buttons Setup', 'essb'); ?></h3>
					<p class="essb-df-optimization-desc"><?php esc_html_e('A quick setup wizard for configuring your social networks, button styles, and display positions. Perfect for those who want to get started without diving into advanced settings.', 'essb'); ?></p>
				</div>
				<button type="button" class="essb-ui-btn essb-ui-btn-primary essb-df-optimization-btn" id="essb-df-open-swizard"><?php esc_html_e('Open Quick Setup Wizard', 'essb'); ?></button>
			</div>


			<div class="essb-df-optimization">
				<div class="essb-df-optimization-icon">
					<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#1b84ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
						<path d="M12 2L2 7l10 5 10-5-10-5z" />
						<path d="M2 17l10 5 10-5" />
						<path d="M2 12l10 5 10-5" />
					</svg>
				</div>
				<div class="essb-df-optimization-text">
					<h3 class="essb-df-optimization-title"><?php esc_html_e('Optimize Plugin Performance', 'essb'); ?></h3>
					<p class="essb-df-optimization-desc"><?php esc_html_e('Configure asset modes, script and style loading methods, and file combining to improve your site speed. The Optimization Wizard will guide you through the best settings for your setup.', 'essb'); ?></p>
				</div>
				<button type="button" class="essb-ui-btn essb-ui-btn-primary essb-df-optimization-btn" id="essb-df-open-wizard"><?php esc_html_e('Open Optimization Wizard', 'essb'); ?></button>
			</div>

		</div>
		<div class="essb-df-main-right">
			<div class="essb-df-news-widget">
				<div class="essb-df-news-heading"><?php esc_html_e('Latest News', 'essb'); ?></div>
				<?php
				$current_news = ESSB_MyAPI::get_latest_news();
				if (is_array($current_news)) {
					echo ESSB_MyAPI::generate_news_output($current_news);
				}
				?>
				<div class="essb-df-news-footer"><a href="https://socialsharingplugin.com/news/" target="_blank" class="essb-ui-btn essb-ui-btn-link"><?php esc_html_e('Read All News', 'essb'); ?> <span class="screen-reader-text"><?php esc_html_e('(opens in a new window)', 'essb'); ?></span><span aria-hidden="true" class="dashicons dashicons-external" style="font-size:14px;width:14px;height:14px;"></span></a></div>
			</div>
		</div>
	</div>

	<?php

	if (essb_is_envato_version()) {
	?>
		<div class="essb-activation-form" id="activate">
			<div class="essb-activation-form-title">
				<div class="essb-activation-title<?php if (ESSB_Envato_Activation_Manager::isActivated()) {
														echo " color-activated";
													} else {
														echo " color-notactivated";
													} ?>"><?php echo esc_html__('Plugin Activation', 'essb'); ?></div>
				<div class="essb-activation-state<?php if (ESSB_Envato_Activation_Manager::isActivated()) {
														echo " background-activated";
													} else {
														echo " background-notactivated";
													} ?>">
					<i class="fa fa-<?php if (ESSB_Envato_Activation_Manager::isActivated() || ESSB_Envato_Activation_Manager::isThemeIntegrated()) {
										echo "check";
									} else {
										echo "ban";
									} ?>"></i> <?php echo ESSB_Envato_Activation_Manager::isActivated() ? esc_html__('Activated', 'essb') : esc_html__('Not Activated', 'essb'); ?>
				</div>
			</div>

			<?php if (!ESSB_Envato_Activation_Manager::isActivated() && !ESSB_Envato_Activation_Manager::isThemeIntegrated() && ESSB_Envato_Activation_Manager::isDevelopment()): ?>
				<div class="essb-activate-localhost">
					<?php esc_html_e('You are running the plugin in a development environment. Activation is optional and allows you to use locked plugin features without affecting the activation status of your live site.', 'essb'); ?>
				</div>
			<?php endif; ?>

			<div class="essb-activation-form-code">
				<div class="essb-activation-form-header">
					<strong><?php echo esc_html__('Purchase code', 'essb'); ?></strong>
					<br />You can learn how to find your purchase code <a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-" target="_blank">here</a>

				</div>
				<?php if (ESSB_Envato_Activation_Manager::isActivated()) {
					echo '<div class="mask-activation">';
				} ?>
				<input type="text" class="essb-purchase-code" id="essb-automatic-purchase-code" value="<?php echo ESSB_Envato_Activation_Manager::getPurchaseCode(); ?>" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" />

				<?php if (ESSB_Envato_Activation_Manager::isActivated()) { ?>
					<input type="text" class="essb-masked-purchase-code" disabled value="<?php echo ESSB_Envato_Activation_Manager::getMaskedPurchaseCode(); ?>" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" />
				<?php echo '</div>';
				} ?>
			</div>


			<div class="essb-activation-buttons">
				<?php if (!ESSB_Envato_Activation_Manager::isActivated()) { ?>
					<a href="#" id="essb-activate" class="essb-activation-button essb-activation-button-default essb-activate-plugin"><?php echo esc_html__('Register the code', 'essb'); ?></a>
				<?php } ?>
				<?php if (ESSB_Envato_Activation_Manager::isActivated()) { ?>
					<a href="#" id="essb-deactivate" class="essb-activation-button essb-activation-button-default essb-deactivate-plugin"><?php echo esc_html__('Deregister the code', 'essb'); ?></a>
				<?php } ?>
			</div>
		</div>
	<?php
	}

	?>

	<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;margin-top:24px;">
		<h3 style="margin:0;padding:0;font-size:18px;font-weight:500;color:#172153;"><?php esc_html_e('Featured Add-Ons', 'essb'); ?></h3>
		<a href="<?php echo esc_url(admin_url('admin.php?page=essb_redirect_addons')); ?>" class="essb-ui-btn essb-ui-btn-link"><?php esc_html_e('View All Add-ons', 'essb'); ?> <span aria-hidden="true" class="dashicons dashicons-external" style="font-size:14px;width:14px;height:14px;"></span></a>
	</div>
	<div class="essb-df-carousel">
		<div class="essb-df-carousel-track" id="essb-df-carousel-track">
			<!-- Slide 1: Social Chat + AI Social Booster -->
			<div class="essb-df-carousel-slide">
				<div class="essb-df-addon-card essb-df-addon-purple">
					<div class="essb-df-addon-icon">
						<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
							<path fill="#FFFFFF" d="M218,98c0-9.2-7.5-16.7-16.7-16.7H178V58c0-9.2-7.5-16.7-16.7-16.7H54.7C45.5,41.3,38,48.8,38,58v106.7 c0,5.5,4.5,10,10,10c2.3,0,4.5-0.8,6.3-2.2L78,153.3l0,18.1c0,9.2,7.5,16.7,16.7,16.7h76.8l30.2,24.4c4.3,3.5,10.6,2.8,14.1-1.5 c1.4-1.8,2.2-4,2.2-6.3L218,98z M58,143.7V61.3h100v30l0,0l0,0V128H81c-2.3,0-4.5,0.8-6.3,2.2L58,143.7z M181.3,170.2 c-1.8-1.4-4-2.2-6.3-2.2H98l0-20h63.3c9.2,0,16.7-7.5,16.7-16.7v-30h20l0,82.4L181.3,170.2z"></path>
						</svg>
					</div>
					<div class="essb-df-addon-body">
						<div class="essb-df-addon-name"><?php esc_html_e('Social Chat', 'essb'); ?></div>
						<div class="essb-df-addon-desc"><?php esc_html_e('Add WhatsApp, Telegram, Viber, Signal, Line, and more chat buttons to your site.', 'essb'); ?></div>
						<a href="https://socialsharingplugin.com/social-chat/?utm_source=plugin&utm_medium=dashboard_banner&utm_campaign=social-chat" target="_blank" class="essb-df-addon-btn"><?php esc_html_e('Learn More', 'essb'); ?></a>
					</div>
				</div>
				<div class="essb-df-addon-card essb-df-addon-purple">
					<div class="essb-df-addon-icon">
						<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
							<path fill="#ffffff" d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"></path>
						</svg>
					</div>
					<div class="essb-df-addon-body">
						<div class="essb-df-addon-name"><?php esc_html_e('AI Social Booster', 'essb'); ?></div>
						<div class="essb-df-addon-desc"><?php esc_html_e('Generate scroll-stopping social media titles, tweets, and share messages directly from your content using AI.', 'essb'); ?></div>
						<a href="https://socialsharingplugin.com/addons/ai-social-booster/?utm_source=plugin&utm_medium=dashboard_banner&utm_campaign=ai-social-booster" target="_blank" class="essb-df-addon-btn"><?php esc_html_e('Learn More', 'essb'); ?></a>
					</div>
				</div>
			</div>
			<!-- Slide 2: Proofly + Shorty -->
			<div class="essb-df-carousel-slide">
				<div class="essb-df-addon-card essb-df-addon-violet">
					<div class="essb-df-addon-icon">
						<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 772 772">
							<path fill="#ffffff" d="M720.4,287.7l-10.7-7.7c-11.8-8.4-18.2-22.7-16.6-37.2l3.8-34.2c4.1-36.7-8.5-72.7-34.6-98.8 S600.2,71,563.5,75.1l-34.2,3.8c-14.5,1.6-28.7-4.7-37.2-16.6l-7.7-10.7C461.8,19.9,425,1,386.1,1c-38.9,0-75.7,18.9-98.3,50.6 l-7.7,10.7c-8.5,11.8-22.7,18.2-37.2,16.6l-34.2-3.8c-36.7-4-72.7,8.6-98.8,34.7c-26.1,26.1-38.8,62.1-34.7,98.8l3.8,34.2 c1.6,14.5-4.7,28.7-16.6,37.2l-10.7,7.7C20,310.3,1.1,347.1,1.1,386c0,38.9,18.9,75.7,50.6,98.4l10.7,7.7 c11.8,8.4,18.2,22.7,16.6,37.2l-3.8,34.2c-4,36.7,8.6,72.7,34.7,98.8c26.1,26,62.1,38.7,98.8,34.6l34.2-3.8 c14.5-1.6,28.7,4.7,37.2,16.6l7.7,10.7c22.6,31.7,59.4,50.6,98.3,50.6c38.9,0,75.7-18.9,98.3-50.7l7.7-10.7 c8.4-11.8,22.7-18.2,37.2-16.6l34.2,3.8c36.7,4.1,72.7-8.5,98.8-34.6c26-26.1,38.7-62.1,34.6-98.8l-3.8-34.2 c-1.6-14.5,4.7-28.7,16.6-37.2l10.7-7.7C752,461.7,771,424.9,771,386C771,347.1,752.1,310.3,720.4,287.7z M553.1,330.2L381,502.2 c-11.1,11.1-25.5,16.6-40.1,16.6c-14.5,0-29-5.5-40.1-16.6l-82-82c-17.6-17.6-17.6-46.1,0-63.8c17.6-17.6,46.1-17.6,63.8,0 l58.3,58.3l148.4-148.3c17.6-17.6,46.1-17.6,63.8,0C570.7,284,570.7,312.5,553.1,330.2z"></path>
						</svg>
					</div>
					<div class="essb-df-addon-body">
						<div class="essb-df-addon-name"><?php esc_html_e('Proofly - Social Proof Notifications', 'essb'); ?></div>
						<div class="essb-df-addon-desc"><?php esc_html_e('Add FOMO-driven social proof notifications showing real purchase alerts, share counts, and custom messages.', 'essb'); ?></div>
						<a href="https://socialsharingplugin.com/addons/proofly-social-proof-notifications/?utm_source=plugin&utm_medium=dashboard_banner&utm_campaign=proofly" target="_blank" class="essb-df-addon-btn"><?php esc_html_e('Learn More', 'essb'); ?></a>
					</div>
				</div>
				<div class="essb-df-addon-card essb-df-addon-blue">
					<div class="essb-df-addon-icon">
						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path stroke="#ffffff" d="M9 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H9M15 17H17C19.7614 17 22 14.7614 22 12C22 9.23858 19.7614 7 17 7H15M7 12L17 12" stroke-width="2"></path>
						</svg>
					</div>
					<div class="essb-df-addon-body">
						<div class="essb-df-addon-name"><?php esc_html_e('Shorty - Self Hosted Short URLs', 'essb'); ?></div>
						<div class="essb-df-addon-desc"><?php esc_html_e('Create and manage your own self-hosted short URLs directly on your WordPress site.', 'essb'); ?></div>
						<a href="https://socialsharingplugin.com/addons/shorty-self-hosted-shorturls/?utm_source=plugin&utm_medium=dashboard_banner&utm_campaign=shorty" target="_blank" class="essb-df-addon-btn"><?php esc_html_e('Learn More', 'essb'); ?></a>
					</div>
				</div>
			</div>
		</div>
		<div class="essb-df-carousel-dots" id="essb-df-carousel-dots">
			<button type="button" class="essb-df-carousel-dot active" data-slide="0"></button>
			<button type="button" class="essb-df-carousel-dot" data-slide="1"></button>
		</div>
	</div>

	<h3 class="essb-df-section-title"><?php esc_html_e('Popular Share Features', 'essb'); ?></h3>
	<div class="essb-df-grid">
		<?php
		essb_dashboard_feature_card(
			esc_html__('Pinterest Pro', 'essb'),
			esc_html__('Add hover-activated Pin buttons to images with customizable positioning and styling. Supports lazy-loaded images and page builders.', 'essb'),
			'pinterest',
			'deactivate_module_pinterestpro',
			'https://socialsharingplugin.com/pinterest-pro-image-hover-pins/'
		);
		essb_dashboard_feature_card(
			esc_html__('Sharable Quotes', 'essb'),
			esc_html__('Boost shares with beautifully designed click-to-share quotes for X (formerly Twitter). No coding needed.', 'essb'),
			'twitter_x',
			'deactivate_ctt',
			'https://socialsharingplugin.com/click-to-tweet/'
		);
		essb_dashboard_feature_card(
			esc_html__('WooCommerce', 'essb'),
			esc_html__('Unlock additional WooCommerce integrations and display methods to maximize social sharing on your store.', 'essb'),
			'cart',
			'deactivate_method_woocommerce',
			'https://socialsharingplugin.com/woocommerce-social-sharing/'
		);
		essb_dashboard_feature_card(
			esc_html__('Share Optimizations', 'essb'),
			esc_html__('Add social share optimization meta tags for precise control over how your content appears when shared.', 'essb'),
			'share_optimization',
			'deactivate_module_shareoptimize'
		);
		essb_dashboard_feature_card(
			esc_html__('Share Counters', 'essb'),
			esc_html__('Display and update share counters on your buttons. Disabling this also turns off features that depend on share values.', 'essb'),
			'numbers',
			'deactivate_share_counters'
		);
		essb_dashboard_feature_card(
			esc_html__('Plugin Analytics', 'essb'),
			esc_html__('Track social sharing performance with privacy-safe analytics. Gain real-time insights to optimize engagement.', 'essb'),
			'analytics',
			'deactivate_module_analytics',
			'https://socialsharingplugin.com/social-sharing/advanced-privacy-safe-analytics-for-wordpress-share-buttons/'
		);
		essb_dashboard_feature_card(
			esc_html__('Short URL', 'essb'),
			esc_html__('Generate short URLs for sharing your content across social networks.', 'essb'),
			'short_url',
			'deactivate_module_shorturl'
		);
		essb_dashboard_addon_card(
			esc_html__('Shorty - Self Hosted Short URLs', 'essb'),
			esc_html__('Create and manage your own self-hosted short URLs on your WordPress site with no third-party dependency.', 'essb'),
			'short_url',
			array(array('param' => 'SHORTY_VERSION', 'type' => 'param')),
			'https://socialsharingplugin.com/addons/shorty-self-hosted-shorturls/',
			'shorty'
		);

		essb_dashboard_addon_card(
			esc_html__('AI Social Booster'),
			esc_html__('Generate scroll-stopping social media titles, tweets, and share messages directly from your content using AI.', 'essb'),
			'affiliate',
			array(array('param' => 'ESSB_AI_BOOSTER_VERSION', 'type' => 'param')),
			'https://socialsharingplugin.com/addons/ai-social-booster/',
			'ai-social-booster'
		);
		?>
	</div>

	<h3 class="essb-df-section-title"><?php esc_html_e('Popular Social Features', 'essb'); ?></h3>
	<div class="essb-df-grid">
		<?php
		essb_dashboard_feature_card(
			esc_html__('Social Profile Links', 'essb'),
			esc_html__('Add plain buttons linking to your social profiles using shortcode, widget, or sidebar.', 'essb'),
			'user_heart',
			'deactivate_module_profiles',
			'https://socialsharingplugin.com/social-profiles/'
		);
		essb_dashboard_feature_card(
			esc_html__('Social Followers Counter', 'essb'),
			esc_html__('Display follower counts for 30+ social networks to showcase your social proof.', 'essb'),
			'heart',
			'deactivate_module_followers',
			'https://socialsharingplugin.com/social-followers-counter/'
		);
		essb_dashboard_feature_card(
			esc_html__('Subscribe Forms', 'essb'),
			esc_html__('Add easy-to-use subscribe forms to grow your mailing list with minimal effort.', 'essb'),
			'mail',
			'deactivate_module_subscribe',
			'https://socialsharingplugin.com/grow-your-mailing-list-subscribers/'
		);
		essb_dashboard_addon_card(
			esc_html__('Social Chat', 'essb'),
			esc_html__('Add WhatsApp, Telegram, Viber, Signal, Line, and other chat buttons to your site.', 'essb'),
			'chat',
			array(array('param' => 'ESSC_VERSION', 'type' => 'param')),
			'https://socialsharingplugin.com/social-chat/',
			'social-chat'
		);
		essb_dashboard_addon_card(
			esc_html__('Proofly - Social Proof Notifications', 'essb'),
			esc_html__('Add FOMO-driven social proof notifications showing real purchase alerts, share counts, and custom messages.', 'essb'),
			'notification',
			array(array('param' => 'PROOFLY_VERSION', 'type' => 'param')),
			'https://socialsharingplugin.com/addons/proofly-social-proof-notifications/'
		);
		essb_dashboard_feature_card(
			esc_html__('Custom Network Buttons', 'essb'),
			esc_html__('Add custom network buttons to your share or follow dialogs.', 'essb'),
			'buttons',
			'deactivate_custombuttons'
		);
		essb_dashboard_feature_card(
			esc_html__('Custom Display / Positions', 'essb'),
			esc_html__('Create custom display positions you can show anywhere via shortcode or function call.', 'essb'),
			'content',
			'deactivate_custompositions'
		);
		essb_dashboard_feature_card(
			esc_html__('Functions Translate', 'essb'),
			esc_html__('Translate preset plugin texts into your language for a fully localized experience.', 'essb'),
			'translate',
			'deactivate_module_translate'
		);
		?>
	</div>

	<div class="essb-df-wrap-bottom-text">
		<p><?php esc_html_e('These are the most popular features. You can manage all available plugin features from the features manager.', 'essb'); ?> <a class="essb-ui-btn essb-ui-btn-link essb-head-featuresbtn" href="#"><?php esc_html_e('Manage All Features', 'essb'); ?></a> <?php esc_html_e('or', 'essb'); ?> <a class="essb-ui-btn essb-ui-btn-link essb-head-positionsbtn" href="#"><?php esc_html_e('Manage All Display Positions', 'essb'); ?></a></p>
	</div>
</div>

<!-- Optimization Wizard Overlay -->
<div class="essb-ow-overlay" id="essb-ow-overlay"></div>

<!-- Optimization Wizard Modal -->
<div class="essb-ow-wrap" id="essb-ow-wizard">
	<div class="essb-ow-header">
		<div class="essb-ow-title"><?php esc_html_e('Optimization Wizard', 'essb'); ?></div>
		<button type="button" class="essb-ow-close" id="essb-ow-close" title="<?php esc_attr_e('Close', 'essb'); ?>">&times;</button>
	</div>
	<div class="essb-ow-step-indicator">
		<span class="essb-ow-step-label" id="essb-ow-step-label"><?php esc_html_e('Step 1 of 4', 'essb'); ?></span>
		<span class="essb-ow-step-dots" id="essb-ow-step-dots">
			<span class="essb-ow-dot essb-ow-dot-active" data-step="1"></span>
			<span class="essb-ow-dot" data-step="2"></span>
			<span class="essb-ow-dot" data-step="3"></span>
			<span class="essb-ow-dot" data-step="4"></span>
			<span class="essb-ow-dot" data-step="5"></span>
		</span>
	</div>
	<div class="essb-ow-body">

		<!-- Step 1: Share Button Assets Mode -->
		<div class="essb-ow-pane essb-ow-pane-active" data-pane="1">
			<h2 class="essb-ow-pane-title"><?php esc_html_e('Share Button Assets Mode', 'essb'); ?></h2>
			<p class="essb-ow-pane-desc">
				<?php esc_html_e('Choose how the plugin loads its CSS and JavaScript files. If you need every feature and maximum flexibility, choose Full. If performance is your priority, choose Light. Modes different from Full will automatically disable some features to reduce file size and improve load times.', 'essb'); ?>
				<a href="https://docs.socialsharingplugin.com/knowledgebase/how-to-choose-the-right-css-js-mode-for-your-share-buttons/" target="_blank"><?php esc_html_e('Learn more about asset modes.', 'essb'); ?></a>
			</p>
			<div class="essb-ow-list">
				<label class="essb-ow-list-item essb-ow-list-selected">
					<input type="radio" name="essb-ow-css-mode" value="" checked hidden>
					<span class="essb-ow-list-radio"></span>
					<span class="essb-ow-list-content">
						<span class="essb-ow-list-title"><?php esc_html_e('Full', 'essb'); ?></span>
						<span class="essb-ow-list-desc"><?php esc_html_e('All features and networks loaded. No optimization applied. Best for sites that need every available option.', 'essb'); ?></span>
					</span>
				</label>
				<label class="essb-ow-list-item">
					<input type="radio" name="essb-ow-css-mode" value="slim" hidden>
					<span class="essb-ow-list-radio"></span>
					<span class="essb-ow-list-content">
						<span class="essb-ow-list-title"><?php esc_html_e('Slim', 'essb'); ?></span>
						<span class="essb-ow-list-desc"><?php esc_html_e('Optimized file sizes with minification. Some non-essential features are disabled. Recommended for most sites.', 'essb'); ?></span>
					</span>
				</label>
				<label class="essb-ow-list-item">
					<input type="radio" name="essb-ow-css-mode" value="mini" hidden>
					<span class="essb-ow-list-radio"></span>
					<span class="essb-ow-list-content">
						<span class="essb-ow-list-title"><?php esc_html_e('Mini', 'essb'); ?></span>
						<span class="essb-ow-list-desc"><?php esc_html_e('Minimal footprint. Only popular networks remain active. Majority of advanced features are disabled.', 'essb'); ?></span>
					</span>
				</label>
				<label class="essb-ow-list-item">
					<input type="radio" name="essb-ow-css-mode" value="light" hidden>
					<span class="essb-ow-list-radio"></span>
					<span class="essb-ow-list-content">
						<span class="essb-ow-list-title"><?php esc_html_e('Light', 'essb'); ?></span>
						<span class="essb-ow-list-desc"><?php esc_html_e('Maximum performance with the smallest file size. Only essential features are kept. Best for speed-critical sites.', 'essb'); ?></span>
					</span>
				</label>
			</div>
		</div>

		<!-- Step 2: Script Loading Method -->
		<div class="essb-ow-pane" data-pane="2">
			<h2 class="essb-ow-pane-title"><?php esc_html_e('Script Loading Method', 'essb'); ?></h2>
			<p class="essb-ow-pane-desc"><?php esc_html_e('Control how plugin JavaScript files are loaded.', 'essb'); ?></p>
			<div class="essb-ow-note"><strong><?php esc_html_e('Note:', 'essb'); ?></strong> <?php esc_html_e('If your site uses an optimization or cache plugin, leave this set to Default to prevent conflicts with button behavior.', 'essb'); ?></div>
			<div class="essb-ow-list">
				<label class="essb-ow-list-item essb-ow-list-selected">
					<input type="radio" name="essb-ow-js-mode" value="" checked hidden>
					<span class="essb-ow-list-radio"></span>
					<span class="essb-ow-list-content">
						<span class="essb-ow-list-title"><?php esc_html_e('Default', 'essb'); ?></span>
						<span class="essb-ow-list-desc"><?php esc_html_e('JavaScript loads in the page footer. Provides the widest compatibility with themes, plugins, and cache solutions.', 'essb'); ?></span>
					</span>
				</label>
				<label class="essb-ow-list-item">
					<input type="radio" name="essb-ow-js-mode" value="async" hidden>
					<span class="essb-ow-list-radio"></span>
					<span class="essb-ow-list-content">
						<span class="essb-ow-list-title"><?php esc_html_e('Asynchronous', 'essb'); ?></span>
						<span class="essb-ow-list-desc"><?php esc_html_e('Scripts load in the background without blocking page rendering. Pages feel faster but some features may delay appearing.', 'essb'); ?></span>
					</span>
				</label>
				<label class="essb-ow-list-item">
					<input type="radio" name="essb-ow-js-mode" value="defer" hidden>
					<span class="essb-ow-list-radio"></span>
					<span class="essb-ow-list-content">
						<span class="essb-ow-list-title"><?php esc_html_e('Deferred', 'essb'); ?></span>
						<span class="essb-ow-list-desc"><?php esc_html_e('Scripts execute after the full page has loaded. Best for non-critical features where timing is not important.', 'essb'); ?></span>
					</span>
				</label>
			</div>
		</div>

		<!-- Step 3: Style Loading Method -->
		<div class="essb-ow-pane" data-pane="3">
			<h2 class="essb-ow-pane-title"><?php esc_html_e('Style Loading Method', 'essb'); ?></h2>
			<p class="essb-ow-pane-desc"><?php esc_html_e('Choose how plugin stylesheets are delivered to balance visual stability and page speed.', 'essb'); ?></p>
			<div class="essb-ow-note"><strong><?php esc_html_e('Note:', 'essb'); ?></strong> <?php esc_html_e('If your site uses an optimization or cache plugin, leave this set to Default to avoid conflicts with button styling.', 'essb'); ?></div>
			<div class="essb-ow-list">
				<label class="essb-ow-list-item essb-ow-list-selected">
					<input type="radio" name="essb-ow-style-mode" value="" checked hidden>
					<span class="essb-ow-list-radio"></span>
					<span class="essb-ow-list-content">
						<span class="essb-ow-list-title"><?php esc_html_e('Default', 'essb'); ?></span>
						<span class="essb-ow-list-desc"><?php esc_html_e('Minified stylesheets load normally. Best compatibility. No risk of unstyled content flashes.', 'essb'); ?></span>
					</span>
				</label>
				<label class="essb-ow-list-item">
					<input type="radio" name="essb-ow-style-mode" value="defer" hidden>
					<span class="essb-ow-list-radio"></span>
					<span class="essb-ow-list-content">
						<span class="essb-ow-list-title"><?php esc_html_e('Deferred', 'essb'); ?></span>
						<span class="essb-ow-list-desc"><?php esc_html_e('Dynamically generated CSS moves to the footer so the browser renders content sooner. May cause a brief flash of unstyled content on slower connections.', 'essb'); ?></span>
					</span>
				</label>
			</div>
		</div>

		<!-- Step 4: Combine CSS & JS Files -->
		<div class="essb-ow-pane" data-pane="4">
			<h2 class="essb-ow-pane-title"><?php esc_html_e('Combine CSS &amp; JS Files', 'essb'); ?></h2>
			<p class="essb-ow-pane-desc"><?php esc_html_e('Combine all CSS and JavaScript into single cached files to reduce HTTP requests. This can improve load time.', 'essb'); ?></p>
			<div class="essb-ow-note"><strong><?php esc_html_e('Note:', 'essb'); ?></strong> <?php esc_html_e('Do not enable this if your site already uses an optimization or cache plugin - it may cause visual issues or missing buttons.', 'essb'); ?></div>
			<label class="essb-ow-toggle essb-ow-toggle-large">
				<input type="checkbox" id="essb-ow-precompiled-enable">
				<span class="essb-ow-toggle-track"></span>
				<span class="essb-ow-toggle-content">
					<span class="essb-ow-toggle-label"><?php esc_html_e('Enable combining of CSS and JavaScript files', 'essb'); ?></span>
					<span class="essb-ow-toggle-desc"><?php esc_html_e('Combine all used CSS and JavaScript files into one file each to reduce the number of HTTP requests.', 'essb'); ?></span>
				</span>
			</label>
			<div class="essb-ow-options" id="essb-ow-precompiled-options" style="display:none;">
				<div class="essb-ow-field">
					<label class="essb-ow-field-label"><?php esc_html_e('Combine type', 'essb'); ?></label>
					<select class="essb-ow-select" id="essb-ow-precompiled-mode">
						<option value=""><?php esc_html_e('CSS and JavaScript', 'essb'); ?></option>
						<option value="css"><?php esc_html_e('CSS only', 'essb'); ?></option>
						<option value="js"><?php esc_html_e('JavaScript only', 'essb'); ?></option>
					</select>
				</div>
				<label class="essb-ow-toggle">
					<input type="checkbox" id="essb-ow-precompiled-unique">
					<span class="essb-ow-toggle-track"></span>
					<span class="essb-ow-toggle-content">
						<span class="essb-ow-toggle-label"><?php esc_html_e('Generate unique filename per cache clear', 'essb'); ?></span>
						<span class="essb-ow-toggle-desc"><?php esc_html_e('Creates a new filename each time the cache is refreshed. Recommended when using a CDN to bypass stale cached files.', 'essb'); ?></span>
					</span>
				</label>
				<label class="essb-ow-toggle">
					<input type="checkbox" id="essb-ow-precompiled-post">
					<span class="essb-ow-toggle-track"></span>
					<span class="essb-ow-toggle-content">
						<span class="essb-ow-toggle-label"><?php esc_html_e('Generate separate cache file per post or page', 'essb'); ?></span>
						<span class="essb-ow-toggle-desc"><?php esc_html_e('Creates individual cache files per page. Useful for large sites but may generate many stored files in the cache folder.', 'essb'); ?></span>
					</span>
				</label>
				<label class="essb-ow-toggle">
					<input type="checkbox" id="essb-ow-precompiled-footer">
					<span class="essb-ow-toggle-track"></span>
					<span class="essb-ow-toggle-content">
						<span class="essb-ow-toggle-label"><?php esc_html_e('Move CSS styles to footer', 'essb'); ?></span>
						<span class="essb-ow-toggle-desc"><?php esc_html_e('Makes CSS non-render-blocking by loading it in the footer. Improves page load metrics but may cause a flash of unstyled content.', 'essb'); ?></span>
					</span>
				</label>
				<label class="essb-ow-toggle">
					<input type="checkbox" id="essb-ow-precompiled-preload-css">
					<span class="essb-ow-toggle-track"></span>
					<span class="essb-ow-toggle-content">
						<span class="essb-ow-toggle-label"><?php esc_html_e('Load CSS asynchronously (rel=preload)', 'essb'); ?></span>
						<span class="essb-ow-toggle-desc"><?php esc_html_e('Instructs the browser to preload CSS files in the background without blocking page rendering.', 'essb'); ?></span>
					</span>
				</label>
			</div>
		</div>

		<!-- Step 5: Summary -->
		<div class="essb-ow-pane" data-pane="5">
			<h2 class="essb-ow-pane-title"><?php esc_html_e('Review and Apply', 'essb'); ?></h2>
			<p class="essb-ow-pane-desc"><?php esc_html_e('Review the optimizations below. Once applied, you can change any setting later from the Advanced settings page.', 'essb'); ?></p>
			<div class="essb-ow-note"><strong><?php esc_html_e('Important:', 'essb'); ?></strong> <?php esc_html_e('Changes are not saved until you click the Apply Optimization button below.', 'essb'); ?></div>
			<div class="essb-ow-summary" id="essb-ow-summary">
				<div class="essb-ow-summary-item">
					<div class="essb-ow-summary-check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
							<path d="M13.3 4.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L5.6 11l6.3-6.3a1 1 0 0 1 1.4 0z" fill="currentColor" />
						</svg></div>
					<div><strong><?php esc_html_e('Share Button Assets Mode', 'essb'); ?></strong>
						<p id="essb-ow-summary-css"><?php esc_html_e('Full - all features, no optimization', 'essb'); ?></p>
					</div>
				</div>
				<div class="essb-ow-summary-item">
					<div class="essb-ow-summary-check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
							<path d="M13.3 4.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L5.6 11l6.3-6.3a1 1 0 0 1 1.4 0z" fill="currentColor" />
						</svg></div>
					<div><strong><?php esc_html_e('Script Loading Method', 'essb'); ?></strong>
						<p id="essb-ow-summary-js"><?php esc_html_e('Default - footer, best compatibility', 'essb'); ?></p>
					</div>
				</div>
				<div class="essb-ow-summary-item">
					<div class="essb-ow-summary-check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
							<path d="M13.3 4.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L5.6 11l6.3-6.3a1 1 0 0 1 1.4 0z" fill="currentColor" />
						</svg></div>
					<div><strong><?php esc_html_e('Style Loading Method', 'essb'); ?></strong>
						<p id="essb-ow-summary-style"><?php esc_html_e('Default - minified CSS', 'essb'); ?></p>
					</div>
				</div>
				<div class="essb-ow-summary-item">
					<div class="essb-ow-summary-check"><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
							<path d="M13.3 4.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L5.6 11l6.3-6.3a1 1 0 0 1 1.4 0z" fill="currentColor" />
						</svg></div>
					<div><strong><?php esc_html_e('Combine CSS &amp; JS Files', 'essb'); ?></strong>
						<p id="essb-ow-summary-precompiled"><?php esc_html_e('Disabled', 'essb'); ?></p>
					</div>
				</div>
			</div>
			<div class="essb-ow-apply-wrap">
				<button type="button" class="essb-ow-btn essb-ow-btn-primary" id="essb-ow-apply"><?php esc_html_e('Apply Optimization', 'essb'); ?></button>
			</div>
		</div>

	</div>
	<div class="essb-ow-footer">
		<button type="button" class="essb-ow-btn essb-ow-btn-ghost" id="essb-ow-prev" disabled>&larr; <?php esc_html_e('Previous', 'essb'); ?></button>
		<div class="essb-ow-footer-right">
			<button type="button" class="essb-ow-btn essb-ow-btn-primary" id="essb-ow-next"><?php esc_html_e('Next', 'essb'); ?> &rarr;</button>
		</div>
	</div>
</div>


<div class="essb-sw-overlay" id="essb-sw-overlay"></div>
<div class="essb-sw-wrap" id="essb-sw-wizard">
	<div class="essb-sw-header">
		<div class="essb-sw-header-title"><?php esc_html_e('Quick Share Buttons Setup', 'essb'); ?></div>
		<button type="button" class="essb-sw-close" id="essb-sw-close">&times;</button>
	</div>
	<div class="essb-sw-steps">
		<?php for ($i = 1; $i <= 8; $i++): ?>
			<span class="essb-sw-dot<?php echo $i === 1 ? ' essb-sw-dot-active' : ''; ?>" data-step="<?php echo $i; ?>"></span>
		<?php endfor; ?>
		<span class="essb-sw-step-label" id="essb-sw-step-label"><?php esc_html_e('Step 1 of 7', 'essb'); ?></span>
	</div>
	<div class="essb-sw-body">

		<!-- Step 1: Networks -->
		<div class="essb-sw-pane essb-sw-pane-active" data-pane="1">
			<h3 class="essb-sw-pane-title"><?php esc_html_e('Choose Your Networks', 'essb'); ?></h3>
			<p class="essb-sw-pane-desc"><?php esc_html_e('Select the social networks you want to display. Drag to reorder. The first 4 are pre-selected.', 'essb'); ?></p>
			<input type="text" class="essb-sw-network-search" id="essb-sw-network-search" placeholder="<?php esc_attr_e('Search networks...', 'essb'); ?>">
			<div class="essb-sw-network-grid" id="essb-sw-network-grid">
				<?php
				$all_networks = essb_available_social_networks(true);
				$network_colors = array(
					'facebook' => '#1877F2',
					'twitter' => '#000000',
					'linkedin' => '#0A66C2',
					'pinterest' => '#E60023',
					'whatsapp' => '#25D366',
					'telegram' => '#26A5E4',
					'messenger' => '#0078FF',
					'mail' => '#EA4335',
					'reddit' => '#FF4500',
					'tumblr' => '#36465D',
					'vk' => '#4680C2',
					'xing' => '#006567',
					'pocket' => '#EF3F56',
					'flipboard' => '#E12828',
					'digg' => '#000000',
					'ok' => '#EE8208',
					'weibo' => '#E6162D',
					'print' => '#6b7280',
					'copy' => '#6b7280',
					'love' => '#FF6B6B',
					'buffer' => '#231F20',
					'more' => '#6b7280',
					'hackernews' => '#FF6600',
					'evernote' => '#00A82D',
					'blogger' => '#F57D00',
					'gmail' => '#D44638',
					'yahoomail' => '#6001D2',
					'line' => '#00C300',
					'viber' => '#665CAC',
					'flattr' => '#000000',
					'meneame' => '#FF6400',
					'skype' => '#00AFF0',
					'kakaotalk' => '#FFE500',
					'sms' => '#6b7280',
					'subscribe' => '#6b7280',
					'livejournal' => '#00B0EA',
					'yammer' => '#0072C6',
					'mix' => '#FF8126',
					'instapaper' => '#1E1E1E',
					'comments' => '#6b7280',
					'share' => '#6b7280',
					'amazon' => '#FF9900',
					'aol' => '#3399FF',
					'newsvine' => '#075B8A',
					'myspace' => '#030303',
					'mailru' => '#168DE2',
					'viadeo' => '#F07355',
					'del' => '#3399FF',
					'meetedgar' => '#6b7280',
					'fintel' => '#6b7280',
					'yummly' => '#E16220',
				);
				$default_selected = array('facebook', 'twitter', 'linkedin', 'pinterest');
				foreach ($all_networks as $id => $data):
					$color = isset($network_colors[$id]) ? $network_colors[$id] : '#6b7280';
				?>
					<div class="essb-sw-network-item<?php echo in_array($id, $default_selected) ? ' essb-sw-network-selected' : ''; ?>" data-id="<?php echo esc_attr($id); ?>">
						<span class="essb-sw-network-check">&#10003;</span>
						<span class="essb-sw-network-icon" style="background:<?php echo esc_attr($color); ?>"><?php echo esc_html(substr($data['name'], 0, 1)); ?></span>
						<span class="essb-sw-network-name"><?php echo esc_html($data['name']); ?></span>
					</div>
				<?php endforeach; ?>
			</div>
			<div class="essb-sw-selected-info" id="essb-sw-selected-info"><?php esc_html_e('4 networks selected. Drag to reorder.', 'essb'); ?></div>
			<label class="essb-sw-toggle">
				<input type="checkbox" id="essb-sw-only-selected">
				<span class="essb-sw-toggle-track"></span>
				<span class="essb-sw-toggle-content">
					<span class="essb-sw-toggle-label"><?php esc_html_e('I will use only selected networks on the site', 'essb'); ?></span>
					<span class="essb-sw-toggle-desc"><?php esc_html_e('Unselected networks will not appear anywhere on your site', 'essb'); ?></span>
				</span>
			</label>
		</div>

		<!-- Step 2: Network Device Visibility -->
		<div class="essb-sw-pane" data-pane="2">
			<h3 class="essb-sw-pane-title"><?php esc_html_e('Network Device Visibility', 'essb'); ?></h3>
			<p class="essb-sw-pane-desc"><?php esc_html_e('Control per-network visibility by device type.', 'essb'); ?></p>
			<label class="essb-sw-toggle">
				<input type="checkbox" id="essb-sw-enable-visibility">
				<span class="essb-sw-toggle-track"></span>
				<span class="essb-sw-toggle-content">
					<span class="essb-sw-toggle-label"><?php esc_html_e('Control per-network visibility by device', 'essb'); ?></span>
					<span class="essb-sw-toggle-desc"><?php esc_html_e('Choose which social networks to hide on desktop vs mobile devices', 'essb'); ?></span>
				</span>
			</label>
			<div id="essb-sw-visibility-section" style="display:none">
				<div class="essb-sw-note"><strong><?php esc_html_e('How it works:', 'essb'); ?></strong> <?php esc_html_e('Check "Hide on Desktop" to remove a network from desktop screens, or "Hide on Mobile" to remove it from phones and tablets. Leave both unchecked to show a network everywhere.', 'essb'); ?></div>
				<table class="essb-sw-visibility-table">
					<thead>
						<tr>
							<th><?php esc_html_e('Network', 'essb'); ?></th>
							<th><?php esc_html_e('Hide on Desktop', 'essb'); ?></th>
							<th><?php esc_html_e('Hide on Mobile', 'essb'); ?></th>
						</tr>
					</thead>
					<tbody id="essb-sw-visibility-body"></tbody>
				</table>
				<button type="button" class="essb-sw-btn essb-sw-btn-ghost" id="essb-sw-suggest-visibility"><?php esc_html_e('Auto-hide mobile apps on desktop & desktop apps on mobile', 'essb'); ?></button>
			</div>
		</div>

		<!-- Step 3: Button Style & Appearance -->
		<div class="essb-sw-pane" data-pane="3">
			<h3 class="essb-sw-pane-title"><?php esc_html_e('Button Style & Appearance', 'essb'); ?></h3>
			<p class="essb-sw-pane-desc"><?php esc_html_e('Choose a button template and display mode.', 'essb'); ?></p>
			<div class="essb-sw-section-title"><?php esc_html_e('Button Template', 'essb'); ?></div>
			<div class="essb-sw-list">
				<?php
				$templates = array(
					'59' => array('Glow', 'Glow - Rounded buttons with a soft glow effect'),
					'6'  => array('Metro', 'Metro - Modern flat design with vibrant colors'),
					'7'  => array('Big', 'Big - Large buttons for maximum visibility'),
					'8'  => array('Light', 'Light - Minimal buttons with light backgrounds'),
					'14' => array('Blocks', 'Blocks - Outline flat design style buttons'),
					'13' => array('Circles', 'Circles - Rounded ouline style buttons'),
					'15' => array('Dark', 'Dark - Dark theme optimized buttons'),
				);
				$first = true;
				foreach ($templates as $val => $data):
				?>
					<div class="essb-sw-list-item<?php echo $first ? ' essb-sw-list-selected' : ''; ?>">
						<input type="radio" name="essb-sw-template" value="<?php echo esc_attr($val); ?>" <?php echo $first ? 'checked' : ''; ?>>
						<div class="essb-sw-list-item-content">
							<span class="essb-sw-list-item-title"><?php echo esc_html($data[1]); ?></span>
							<span class="essb-sw-list-item-desc" style="display: none;"><?php echo esc_html($data[1]); ?></span>
						</div>
					</div>
				<?php $first = false;
				endforeach; ?>
			</div>
			<p class="essb-sw-section-desc"><?php esc_html_e('More templates are available in the full settings page after setup.', 'essb'); ?></p>
			<div class="essb-sw-section-title"><?php esc_html_e('Button Display Mode', 'essb'); ?></div>
			<div class="essb-sw-list">
				<?php
				$modes = array(
					'' => array('Icon + Name', 'Show network icon and name on buttons'),
					'icon' => array('Icon Only', 'Show network icon only — compact buttons'),
					'icon_hover' => array('Icon + Name on Hover', 'Show icon by default, name appears on hover'),
					'name' => array('Name Only', 'Show network name only without icons'),
				);
				$first2 = true;
				foreach ($modes as $val => $data):
				?>
					<div class="essb-sw-list-item<?php echo $first2 ? ' essb-sw-list-selected' : ''; ?>">
						<input type="radio" name="essb-sw-display-mode" value="<?php echo esc_attr($val); ?>" <?php echo $first2 ? 'checked' : ''; ?>>
						<div class="essb-sw-list-item-content">
							<span class="essb-sw-list-item-title"><?php echo esc_html($data[0]); ?></span>
							<span class="essb-sw-list-item-desc"><?php echo esc_html($data[1]); ?></span>
						</div>
					</div>
				<?php $first2 = false;
				endforeach; ?>
			</div>
		</div>

		<!-- Step 4: Size & Layout -->
		<div class="essb-sw-pane" data-pane="4">
			<h3 class="essb-sw-pane-title"><?php esc_html_e('Size & Layout', 'essb'); ?></h3>
			<p class="essb-sw-pane-desc"><?php esc_html_e('Set the size and alignment of your share buttons.', 'essb'); ?></p>
			<div class="essb-sw-section-title"><?php esc_html_e('Desktop Size', 'essb'); ?></div>
			<div class="essb-sw-list essb-sw-list-horizontal" id="essb-sw-size-desktop-list">
				<?php
				$sizes = array('' => 'Default', 'xs' => 'XS', 's' => 'S', 'm' => 'M', 'l' => 'L', 'xl' => 'XL', 'xxl' => '2XL');
				$size_first = true;
				foreach ($sizes as $val => $label):
				?>
					<div class="essb-sw-list-item<?php echo $size_first ? ' essb-sw-list-selected' : ''; ?>" data-value="<?php echo esc_attr($val); ?>">
						<input type="radio" name="essb-sw-size-desktop" value="<?php echo esc_attr($val); ?>" <?php echo $size_first ? ' checked' : ''; ?>>
						<div class="essb-sw-list-item-content">
							<span class="essb-sw-list-item-title"><?php echo esc_html($label); ?></span>
						</div>
					</div>
				<?php $size_first = false;
				endforeach; ?>
			</div>
			<div class="essb-sw-section-title" style="margin-top:14px"><?php esc_html_e('Mobile Size', 'essb'); ?></div>
			<div class="essb-sw-list essb-sw-list-horizontal" id="essb-sw-size-mobile-list">
				<?php
				$size_first = true;
				foreach ($sizes as $val => $label):
				?>
					<div class="essb-sw-list-item<?php echo $size_first ? ' essb-sw-list-selected' : ''; ?>" data-value="<?php echo esc_attr($val); ?>">
						<input type="radio" name="essb-sw-size-mobile" value="<?php echo esc_attr($val); ?>" <?php echo $size_first ? ' checked' : ''; ?>>
						<div class="essb-sw-list-item-content">
							<span class="essb-sw-list-item-title"><?php echo esc_html($label); ?></span>
						</div>
					</div>
				<?php $size_first = false;
				endforeach; ?>
			</div>
			<div class="essb-sw-section-title" style="margin-top:14px"><?php esc_html_e('Alignment', 'essb'); ?></div>
			<div class="essb-sw-list essb-sw-list-horizontal" id="essb-sw-alignment-list">
				<?php
				$alignments = array('' => 'Left', 'center' => 'Center', 'right' => 'Right', 'stretched' => 'Stretched');
				$align_first = true;
				foreach ($alignments as $val => $label):
				?>
					<div class="essb-sw-list-item<?php echo $align_first ? ' essb-sw-list-selected' : ''; ?>" data-value="<?php echo esc_attr($val); ?>">
						<input type="radio" name="essb-sw-alignment" value="<?php echo esc_attr($val); ?>" <?php echo $align_first ? ' checked' : ''; ?>>
						<div class="essb-sw-list-item-content">
							<span class="essb-sw-list-item-title"><?php echo esc_html($label); ?></span>
						</div>
					</div>
				<?php $align_first = false;
				endforeach; ?>
			</div>
			<label class="essb-sw-toggle" style="margin-top:16px">
				<input type="checkbox" id="essb-sw-nospace">
				<span class="essb-sw-toggle-track"></span>
				<span class="essb-sw-toggle-content">
					<span class="essb-sw-toggle-label"><?php esc_html_e('Remove spacing between buttons', 'essb'); ?></span>
					<span class="essb-sw-toggle-desc"><?php esc_html_e('Buttons will appear next to each other without gaps for a compact look', 'essb'); ?></span>
				</span>
			</label>
		</div>

		<!-- Step 5: Counter Settings -->
		<div class="essb-sw-pane" data-pane="5">
			<h3 class="essb-sw-pane-title"><?php esc_html_e('Counter Settings', 'essb'); ?></h3>
			<p class="essb-sw-pane-desc"><?php esc_html_e('Configure how share counters are displayed on your buttons.', 'essb'); ?></p>
			<label class="essb-sw-toggle essb-sw-toggle-large" id="essb-sw-counters-toggle-wrap">
				<input type="checkbox" id="essb-sw-show-counters">
				<span class="essb-sw-toggle-track"></span>
				<span class="essb-sw-toggle-content">
					<span class="essb-sw-toggle-label"><?php esc_html_e('Show Counters', 'essb'); ?></span>
					<span class="essb-sw-toggle-desc"><?php esc_html_e('Display share counts next to each button to show social engagement', 'essb'); ?></span>
				</span>
			</label>
			<div id="essb-sw-counter-options" style="display:none;margin-top:12px">
				<div class="essb-sw-note essb-sw-note-fb"><strong><?php esc_html_e('Facebook API Notice:', 'essb'); ?></strong> <?php esc_html_e('Facebook no longer provides share counts. Internal counters are recommended as a privacy-safe alternative.', 'essb'); ?></div>
				<label class="essb-sw-toggle">
					<input type="checkbox" id="essb-sw-internal-counters" checked>
					<span class="essb-sw-toggle-track"></span>
					<span class="essb-sw-toggle-content">
						<span class="essb-sw-toggle-label"><?php esc_html_e('Use internal counters (recommended)', 'essb'); ?></span>
						<span class="essb-sw-toggle-desc"><?php esc_html_e('Count shares using the plugin\'s own database tracking - no external API required', 'essb'); ?></span>
					</span>
				</label>
				<div class="essb-sw-section-title"><?php esc_html_e('Counter Position on Each Button', 'essb'); ?></div>
				<div class="essb-sw-list">
					<?php
					$counter_positions = array(
						'hidden' => array('Hidden', 'Hide individual button counters'),
						'inside' => array('Inside', 'Show counter inside the button'),
						'insidem' => array('Inside Mini', 'Show counter inside — compact mode'),
						'insidename' => array('Inside After Name', 'Show counter after network name'),
						'insidenamem' => array('Inside After Name Mini', 'Show counter after name — compact'),
						'topm' => array('Top Mini', 'Counter appears above the button — mini style'),
					);
					$first3 = true;
					foreach ($counter_positions as $val => $data):
					?>
						<div class="essb-sw-list-item<?php echo $first3 ? ' essb-sw-list-selected' : ''; ?>">
							<input type="radio" name="essb-sw-counter-pos" value="<?php echo esc_attr($val); ?>" <?php echo $first3 ? 'checked' : ''; ?>>
							<div class="essb-sw-list-item-content">
								<span class="essb-sw-list-item-title"><?php echo esc_html($data[0]); ?></span>
								<span class="essb-sw-list-item-desc"><?php echo esc_html($data[1]); ?></span>
							</div>
						</div>
					<?php $first3 = false;
					endforeach; ?>
				</div>
				<div class="essb-sw-section-title"><?php esc_html_e('Total Counter Position', 'essb'); ?></div>
				<div class="essb-sw-list">
					<?php
					$total_counter_positions = array(
						'' => array('Hide total counter', 'Do not display a total share counter'),
						'leftbig' => array('Left Big Number', 'Large total counter on the left side'),
						'rightbig' => array('Right Big Number', 'Large total counter on the right side'),
						'leftbigicon' => array('Left Big Number with Icon', 'Total counter with shares icon on the left'),
						'rightbigicon' => array('Right Big Number with Icon', 'Total counter with shares icon on the right'),
					);
					$first4 = true;
					foreach ($total_counter_positions as $val => $data):
					?>
						<div class="essb-sw-list-item<?php echo $first4 ? ' essb-sw-list-selected' : ''; ?>">
							<input type="radio" name="essb-sw-total-counter-pos" value="<?php echo esc_attr($val); ?>" <?php echo $first4 ? 'checked' : ''; ?>>
							<div class="essb-sw-list-item-content">
								<span class="essb-sw-list-item-title"><?php echo esc_html($data[0]); ?></span>
								<span class="essb-sw-list-item-desc"><?php echo esc_html($data[1]); ?></span>
							</div>
						</div>
					<?php $first4 = false;
					endforeach; ?>
				</div>
			</div>
		</div>

		<!-- Step 6: Where to Display -->
		<div class="essb-sw-pane" data-pane="6">
			<h3 class="essb-sw-pane-title"><?php esc_html_e('Where to Display', 'essb'); ?></h3>
			<p class="essb-sw-pane-desc"><?php esc_html_e('Choose which post types and positions to show share buttons on.', 'essb'); ?></p>
			<div class="essb-sw-section-title"><?php esc_html_e('Post Types', 'essb'); ?></div>
			<div class="essb-sw-type-grid" id="essb-sw-type-grid">
				<?php
				$pts = get_post_types(array('show_ui' => true), 'objects');
				foreach ($pts as $pt):
					if ($pt->name === 'homepage' || $pt->name === 'all_lists' || $pt->name === 'attachment') continue;
				?>
					<div class="essb-sw-type-item<?php echo $pt->name === 'post' ? ' essb-sw-type-selected' : ''; ?>" data-id="<?php echo esc_attr($pt->name); ?>"><?php echo esc_html($pt->label); ?></div>
				<?php endforeach; ?>
			</div>
			<div class="essb-sw-section-title"><?php esc_html_e('Display Positions', 'essb'); ?></div>
			<?php
			$positions = array(
				'top' => array('Content Top', 'Show buttons at the top of your content', true, 'any'),
				'bottom' => array('Content Bottom', 'Show buttons at the bottom of your content', true, 'any'),
				'sidebar' => array('Sidebar', 'Floating sidebar with vertical buttons', false, 'any'),
				//'sharebutton' => array('Share Button', 'Floating share button on the side of the screen', false, 'any'),
				'sharebottom' => array('Mobile Share Bar', 'Fixed bottom bar - appears on mobile devices', false, 'mobile'),
			);
			foreach ($positions as $id => $data):
			?>
				<div class="essb-sw-pos-row" data-pos="<?php echo esc_attr($id); ?>">
					<label class="essb-sw-pos-toggle">
						<input type="checkbox" class="essb-sw-pos-check" <?php echo $data[2] ? 'checked' : ''; ?>>
						<span class="essb-sw-pos-toggle-slider"></span>
					</label>
					<div class="essb-sw-pos-info">
						<span class="essb-sw-pos-name"><?php echo esc_html($data[0]); ?> <?php if ($data[3] === 'mobile'): ?><span class="essb-sw-badge-mobile"><?php esc_html_e('MOBILE ONLY', 'essb'); ?></span><?php endif; ?></span>
						<span class="essb-sw-pos-desc"><?php echo esc_html($data[1]); ?></span>
					</div>
					<?php if ($data[3] !== 'mobile'): ?>
						<div class="essb-sw-device-chips">
							<span class="essb-sw-device-chip<?php echo $data[3] === 'any' ? ' essb-sw-device-chip-active' : ''; ?>" data-device="any"><?php esc_html_e('Any device', 'essb'); ?></span>
							<span class="essb-sw-device-chip" data-device="desktop"><?php esc_html_e('Desktop', 'essb'); ?></span>
							<span class="essb-sw-device-chip" data-device="mobile"><?php esc_html_e('Mobile', 'essb'); ?></span>
						</div>
					<?php endif; ?>
				</div>
			<?php endforeach; ?>
		</div>

		<!-- Step 7: Pinterest Image Pins -->
		<div class="essb-sw-pane" data-pane="7">
			<h3 class="essb-sw-pane-title"><?php esc_html_e('Pinterest Image Pins', 'essb'); ?></h3>
			<p class="essb-sw-pane-desc"><?php esc_html_e('Add hover-activated Pin It buttons over your images.', 'essb'); ?></p>
			<label class="essb-sw-toggle essb-sw-toggle-large" id="essb-sw-pinterest-toggle-wrap">
				<input type="checkbox" id="essb-sw-pinterest-enable">
				<span class="essb-sw-toggle-track"></span>
				<span class="essb-sw-toggle-content">
					<span class="essb-sw-toggle-label"><?php esc_html_e('Show Pinterest Pin button over images', 'essb'); ?></span>
					<span class="essb-sw-toggle-desc"><?php esc_html_e('Adds a Pin It button when users hover over images on your site', 'essb'); ?></span>
				</span>
			</label>
			<div id="essb-sw-pinterest-options" style="display:none;margin-top:12px">
				<div class="essb-sw-section-title"><?php esc_html_e('Button Position on Image', 'essb'); ?></div>
				<div class="essb-sw-position-grid" id="essb-sw-pinterest-position-grid">
					<?php
					$pin_positions = array(
						'top-left' => array('Top Left', '&#8598;'),
						'top-right' => array('Top Right', '&#8599;'),
						'center' => array('Center', '&#8596;'),
						'bottom-left' => array('Bottom Left', '&#8601;'),
						'bottom-right' => array('Bottom Right', '&#8600;'),
					);
					$first5 = true;
					foreach ($pin_positions as $val => $data):
					?>
						<div class="essb-sw-position-item<?php echo $first5 ? ' essb-sw-position-selected' : ''; ?>" data-value="<?php echo esc_attr($val); ?>">
							<span style="font-size:24px;line-height:1"><?php echo $data[1]; ?></span>
							<span style="font-size:11px;font-weight:600;margin-top:4px"><?php echo esc_html($data[0]); ?></span>
						</div>
					<?php $first5 = false;
					endforeach; ?>
				</div>
				<div class="essb-sw-section-title"><?php esc_html_e('Visibility Mode', 'essb'); ?></div>
				<div class="essb-sw-list">
					<div class="essb-sw-list-item essb-sw-list-selected">
						<input type="radio" name="essb-sw-pin-visibility" value="" checked>
						<div class="essb-sw-list-item-content">
							<span class="essb-sw-list-item-title"><?php esc_html_e('Show on hover', 'essb'); ?></span>
							<span class="essb-sw-list-item-desc"><?php esc_html_e('Pin button appears when hovering over the image', 'essb'); ?></span>
						</div>
					</div>
					<div class="essb-sw-list-item">
						<input type="radio" name="essb-sw-pin-visibility" value="always">
						<div class="essb-sw-list-item-content">
							<span class="essb-sw-list-item-title"><?php esc_html_e('Always visible', 'essb'); ?></span>
							<span class="essb-sw-list-item-desc"><?php esc_html_e('Pin button is always shown on images', 'essb'); ?></span>
						</div>
					</div>
				</div>
				<div class="essb-sw-section-title"><?php esc_html_e('Advanced', 'essb'); ?></div>
				<div class="essb-sw-advanced-options">
					<div class="essb-sw-advanced-row">
						<label class="essb-sw-toggle">
							<input type="checkbox" id="essb-sw-pin-nolinks">
							<span class="essb-sw-toggle-track"></span>
							<span class="essb-sw-toggle-content">
								<span class="essb-sw-toggle-label"><?php esc_html_e("Don't show on linked images", 'essb'); ?></span>
								<span class="essb-sw-toggle-desc"><?php esc_html_e('Skip images that are already wrapped in a link', 'essb'); ?></span>
							</span>
						</label>
					</div>
					<div class="essb-sw-advanced-row">
						<label class="essb-sw-toggle">
							<input type="checkbox" id="essb-sw-pin-lazyload">
							<span class="essb-sw-toggle-track"></span>
							<span class="essb-sw-toggle-content">
								<span class="essb-sw-toggle-label"><?php esc_html_e('Images use lazy loading', 'essb'); ?></span>
								<span class="essb-sw-toggle-desc"><?php esc_html_e('Delay the Pin It button for lazy-loaded images to ensure proper positioning', 'essb'); ?></span>
							</span>
						</label>
					</div>
				</div>
			</div>
		</div>

		<!-- Step 8: Review & Apply -->
		<div class="essb-sw-pane" data-pane="8">
			<h3 class="essb-sw-pane-title"><?php esc_html_e('Review & Apply', 'essb'); ?></h3>
			<p class="essb-sw-pane-desc"><?php esc_html_e('Review your configuration before applying.', 'essb'); ?></p>
			<div class="essb-sw-summary" id="essb-sw-summary">
				<div class="essb-sw-summary-item">
					<div class="essb-sw-summary-check"><svg width="14" height="14" viewBox="0 0 16 16" fill="none">
							<path d="M13.3 4.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L5.6 11l6.3-6.3a1 1 0 0 1 1.4 0z" fill="currentColor" />
						</svg></div>
					<div><strong><?php esc_html_e('Networks', 'essb'); ?></strong>
						<p id="essb-sw-summary-networks"><?php esc_html_e('4 networks selected', 'essb'); ?></p>
					</div>
				</div>
				<div class="essb-sw-summary-item">
					<div class="essb-sw-summary-check"><svg width="14" height="14" viewBox="0 0 16 16" fill="none">
							<path d="M13.3 4.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L5.6 11l6.3-6.3a1 1 0 0 1 1.4 0z" fill="currentColor" />
						</svg></div>
					<div><strong><?php esc_html_e('Button Style', 'essb'); ?></strong>
						<p id="essb-sw-summary-style"><?php esc_html_e('Glow template, Icon + Name', 'essb'); ?></p>
					</div>
				</div>
				<div class="essb-sw-summary-item">
					<div class="essb-sw-summary-check"><svg width="14" height="14" viewBox="0 0 16 16" fill="none">
							<path d="M13.3 4.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L5.6 11l6.3-6.3a1 1 0 0 1 1.4 0z" fill="currentColor" />
						</svg></div>
					<div><strong><?php esc_html_e('Size & Layout', 'essb'); ?></strong>
						<p id="essb-sw-summary-size"><?php esc_html_e('Default sizes, Left aligned', 'essb'); ?></p>
					</div>
				</div>
				<div class="essb-sw-summary-item">
					<div class="essb-sw-summary-check"><svg width="14" height="14" viewBox="0 0 16 16" fill="none">
							<path d="M13.3 4.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L5.6 11l6.3-6.3a1 1 0 0 1 1.4 0z" fill="currentColor" />
						</svg></div>
					<div><strong><?php esc_html_e('Counters', 'essb'); ?></strong>
						<p id="essb-sw-summary-counters"><?php esc_html_e('Disabled', 'essb'); ?></p>
					</div>
				</div>
				<div class="essb-sw-summary-item">
					<div class="essb-sw-summary-check"><svg width="14" height="14" viewBox="0 0 16 16" fill="none">
							<path d="M13.3 4.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L5.6 11l6.3-6.3a1 1 0 0 1 1.4 0z" fill="currentColor" />
						</svg></div>
					<div><strong><?php esc_html_e('Display Positions', 'essb'); ?></strong>
						<p id="essb-sw-summary-positions"><?php esc_html_e('Content Top, Content Bottom', 'essb'); ?></p>
					</div>
				</div>
				<div class="essb-sw-summary-item">
					<div class="essb-sw-summary-check"><svg width="14" height="14" viewBox="0 0 16 16" fill="none">
							<path d="M13.3 4.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L5.6 11l6.3-6.3a1 1 0 0 1 1.4 0z" fill="currentColor" />
						</svg></div>
					<div><strong><?php esc_html_e('Pinterest Image Pins', 'essb'); ?></strong>
						<p id="essb-sw-summary-pinterest"><?php esc_html_e('Disabled', 'essb'); ?></p>
					</div>
				</div>
			</div>
			<div class="essb-sw-apply-wrap">
				<button type="button" class="essb-sw-btn essb-sw-btn-primary" id="essb-sw-apply"><?php esc_html_e('Apply Configuration', 'essb'); ?></button>
			</div>
		</div>

	</div>
	<div class="essb-sw-footer">
		<button type="button" class="essb-sw-btn essb-sw-btn-ghost" id="essb-sw-prev" disabled>&larr; <?php esc_html_e('Previous', 'essb'); ?></button>
		<div class="essb-sw-footer-right">
			<button type="button" class="essb-sw-btn essb-sw-btn-primary" id="essb-sw-next"><?php esc_html_e('Next', 'essb'); ?> &rarr;</button>
		</div>
	</div>
</div>

<!-- ===== Initial Config Wizard ===== -->
<div class="essb-iw-overlay" id="essb-iw-overlay"></div>

<div class="essb-iw-wrap" id="essb-iw-wizard" style="display:none" data-install-nonce="<?php echo esc_attr(wp_create_nonce('essb_install_free_addon')); ?>">

	<div class="essb-iw-header">
		<div class="essb-iw-header-title">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="20" height="20">
				<g>
					<path d="m15,19c-1.1,0-2,0.9-2,2s0.9,2 2,2c0.6,0 1.2-0.3 1.6-0.8 0.2-0.2 0.4-0.6 0.4-1.2 0-0.3-0.1-0.5-0.2-0.8-0.3-0.7-1-1.2-1.8-1.2z" fill="#1b84ff" />
					<path d="m26,31c1.1,0 2-0.9 2-2s-0.9-2-2-2c-0.6,0-1.2,0.3-1.6,0.8-0.2,0.2-0.4,0.6-0.4,1.2 0,1.1 0.9,2 2,2z" fill="#1b84ff" />
					<path d="m22,0c-12.2,0-22,9.8-22,22s9.8,22 22,22 22-9.8 22-22-9.8-22-22-22zm7,21c-1.6,0-3.1-0.7-4.2-1.7-0.1-0.1-0.4-0.2-0.5-0.1l-3,1.3c-0.2,0.1-0.3,0.3-0.3,0.5 0,0.5-0.1,1-0.2,1.4 0,0.2 0,0.4 0.2,0.5l1.3,.9c0.2,0.1 0.4,0.1 0.6,0 0.9-0.5 2-0.9 3.1-0.9 3.3,0 6,2.7 6,6s-2.7,6-6,6-6-2.7-6-6c0-0.5 0.1-0.9 0.2-1.4 0-0.2 0-0.4-0.2-0.5l-1.3-1c-0.2-0.1-0.4-0.1-0.6,0-0.9,0.6-2,0.9-3.1,0.9-3.3,0-6-2.7-6-6s2.7-6 6-6c1.6,0 3.1,0.7 4.2,1.7 0.1,0.1 0.4,0.2 0.5,0.1l3-1.3c0.2-0.1 0.3-0.3 0.3-0.5 0,0 0,0 0-0.1 0-3.3 2.7-6 6-6s6,2.7 6,6-2.7,6.2-6,6.2z" fill="#1b84ff" />
					<path d="m29,13c-1.1,0-2,0.9-2,2 0,0.3 0.1,0.5 0.2,0.8 0.3,0.7 1,1.2 1.8,1.2 1.1,0 2-0.9 2-2s-0.9-2-2-2z" fill="#1b84ff" />
				</g>
			</svg>
			Getting Started
		</div>
		<button type="button" class="essb-iw-close" id="essb-iw-close" title="Close">&times; Exit the wizard</button>
	</div>

	<div class="essb-iw-step-indicator">
		<span id="stepLabel">Welcome</span>
		<span class="essb-iw-step-dots" id="stepDots">
			<span class="essb-iw-dot" data-step="1"></span>
			<span class="essb-iw-dot" data-step="2"></span>
			<span class="essb-iw-dot" data-step="3"></span>
			<span class="essb-iw-dot" data-step="4"></span>
			<span class="essb-iw-dot" data-step="5"></span>
			<span class="essb-iw-dot" data-step="6"></span>
			<span class="essb-iw-dot" data-step="7"></span>
			<span class="essb-iw-dot" data-step="8"></span>
			<span class="essb-iw-dot" data-step="9"></span>
			<span class="essb-iw-dot" data-step="10"></span>
			<span class="essb-iw-dot essb-iw-dot-last" data-step="11"></span>
		</span>
	</div>

	<div class="essb-iw-body">

		<!-- ===== Welcome ===== -->
		<div class="essb-iw-pane essb-iw-pane-active" data-pane="welcome">
			<div class="essb-iw-welcome">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44" height="44">
					<g>
						<path d="m15,19c-1.1,0-2,0.9-2,2s0.9,2 2,2c0.6,0 1.2-0.3 1.6-0.8 0.2-0.2 0.4-0.6 0.4-1.2 0-0.3-0.1-0.5-0.2-0.8-0.3-0.7-1-1.2-1.8-1.2z" fill="#1b84ff" />
						<path d="m26,31c1.1,0 2-0.9 2-2s-0.9-2-2-2c-0.6,0-1.2,0.3-1.6,0.8-0.2,0.2-0.4,0.6-0.4,1.2 0,1.1 0.9,2 2,2z" fill="#1b84ff" />
						<path d="m22,0c-12.2,0-22,9.8-22,22s9.8,22 22,22 22-9.8 22-22-9.8-22-22-22zm7,21c-1.6,0-3.1-0.7-4.2-1.7-0.1-0.1-0.4-0.2-0.5-0.1l-3,1.3c-0.2,0.1-0.3,0.3-0.3,0.5 0,0.5-0.1,1-0.2,1.4 0,0.2 0,0.4 0.2,0.5l1.3,.9c0.2,0.1 0.4,0.1 0.6,0 0.9-0.5 2-0.9 3.1-0.9 3.3,0 6,2.7 6,6s-2.7,6-6,6-6-2.7-6-6c0-0.5 0.1-0.9 0.2-1.4 0-0.2 0-0.4-0.2-0.5l-1.3-1c-0.2-0.1-0.4-0.1-0.6,0-0.9,0.6-2,0.9-3.1,0.9-3.3,0-6-2.7-6-6s2.7-6 6-6c1.6,0 3.1,0.7 4.2,1.7 0.1,0.1 0.4,0.2 0.5,0.1l3-1.3c0.2-0.1 0.3-0.3 0.3-0.5 0,0 0,0 0-0.1 0-3.3 2.7-6 6-6s6,2.7 6,6-2.7,6.2-6,6.2z" fill="#1b84ff" />
						<path d="m29,13c-1.1,0-2,0.9-2,2 0,0.3 0.1,0.5 0.2,0.8 0.3,0.7 1,1.2 1.8,1.2 1.1,0 2-0.9 2-2s-0.9-2-2-2z" fill="#1b84ff" />
					</g>
				</svg>
				<h2>Welcome to Easy Social Share Buttons for WordPress</h2>
				<p>Before diving into the settings, let's run through the initial configuration wizard. It will walk you through the main features of the plugin - one step at a time - so you can choose what fits your needs.</p>
				<p>Anything you don't need will be turned off automatically, keeping the plugin lightweight and focused on what matters to you. No bloated menus, no confusing options - just the features you actually use.</p>
				<p class="essb-iw-welcome-note">This only takes a few minutes. You can always come back and change everything later.</p>
			</div>
		</div>

		<!-- ===== Step 1: CSS Mode ===== -->
		<div class="essb-iw-pane" data-pane="1">
			<h2 class="essb-iw-pane-title">Choose your share buttons mode</h2>
			<p class="essb-iw-pane-desc">The mode controls which button styles, templates, and features are available. You can change this anytime from the Advanced Settings.</p>

			<div class="essb-iw-mode-info">
				<strong>Full</strong> - all features, templates, and maximum flexibility. Great if you want full control over the design and functionality.
				<strong>Light</strong> - essential features only with the smallest resource footprint. Ideal for performance-focused or simple sites.
				Slim and Mini offer a middle ground - reduced features with a smaller footprint.
			</div>

			<div class="essb-iw-mode-grid" id="modeGrid">
				<div class="essb-iw-mode-card essb-iw-mode-selected" data-mode="">
					<div class="essb-iw-mode-name">Full</div>
					<div class="essb-iw-mode-desc">Maximum flexibility, custom designs, all platforms</div>
				</div>
				<div class="essb-iw-mode-card" data-mode="slim">
					<div class="essb-iw-mode-name">Slim</div>
					<div class="essb-iw-mode-desc">Clean UI, performance-focused, standard layouts</div>
				</div>
				<div class="essb-iw-mode-card" data-mode="mini">
					<div class="essb-iw-mode-name">Mini</div>
					<div class="essb-iw-mode-desc">Core networks only, speed-critical sites</div>
				</div>
				<div class="essb-iw-mode-card" data-mode="light">
					<div class="essb-iw-mode-name">Light</div>
					<div class="essb-iw-mode-desc">Ultra-lightweight, maximum performance</div>
				</div>
			</div>

			<div class="essb-iw-mode-help">
				<svg width="16" height="16" viewBox="0 0 20 20" fill="#6b7280">
					<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
				</svg>
				<span>Learn more about each mode in the</span>
				<a href="https://docs.socialsharingplugin.com/knowledgebase/how-to-choose-the-right-css-js-mode-for-your-share-buttons/" target="_blank" class="essb-iw-mode-help-link">documentation &rarr;</a>
			</div>
		</div>

		<!-- ===== Step 2: Social Optimization ===== -->
		<div class="essb-iw-pane" data-pane="2">
			<h2 class="essb-iw-pane-title">Social media optimization tags</h2>
			<p class="essb-iw-pane-desc">Control how your content looks when shared on Facebook, X (Twitter), LinkedIn, and other social networks.</p>

			<label class="essb-iw-toggle essb-iw-toggle-large">
				<input type="checkbox" id="enableSSO" checked>
				<span class="essb-iw-toggle-track"></span>
				<span class="essb-iw-toggle-content">
					<span class="essb-iw-toggle-label">Add Open Graph meta tags to your site</span>
					<span class="essb-iw-toggle-desc">When someone shares your content, social networks use these tags to show the right title, description, and image instead of picking random content.</span>
				</span>
			</label>

			<div class="essb-iw-options" id="ssoOptions">
				<div class="essb-iw-options-item">
					<div class="essb-iw-options-item-label">Default social image (optional)</div>
					<p class="essb-iw-options-item-desc">Used when a post or page doesn't have its own featured image. Ensures shared links always look polished.</p>
					<div class="essb-iw-image-input-wrap">
						<input type="text" class="essb-iw-input" id="ssoDefaultImage" placeholder="Enter image URL or click to select" readonly>
						<button type="button" class="essb-iw-btn essb-iw-btn-sm essb-iw-btn-ghost" id="ssoSelectImage">Select</button>
					</div>
					<div id="ssoImagePreview" class="essb-iw-image-preview" style="display:none">
						<img src="" alt="" id="ssoPreviewImg">
						<button type="button" class="essb-iw-remove-img" id="ssoRemoveImage">&times;</button>
					</div>
				</div>

				<div class="essb-iw-sso-note">
					<span>If you use an SEO plugin (Yoast, Rank Math, etc.), it already handles most meta tags and the information you have set there will be used automatically. The plugin extends those tags with additional ones specific to social sharing - for example, product-specific tags for WooCommerce.</span>
				</div>

				<div class="essb-iw-shorty-row">
					<div class="essb-iw-shorty-info">
						<strong>AI Social Booster</strong>
						<span>Generate scroll-stopping social media titles, tweets, and share messages directly from your content using AI.</span>
						<a href="https://socialsharingplugin.com/addons/ai-social-booster/" target="_blank" class="essb-iw-shorty-learn">Learn more &rarr;</a>
					</div>
					<?php $aisb_state = essb_addon_get_state('ai-social-booster'); ?>
					<?php if ($aisb_state === 'active'): ?>
						<span class="essb-iw-badge essb-iw-badge-active">Active</span>
					<?php elseif ($aisb_state === 'installed'): ?>
						<button type="button" class="essb-iw-btn essb-iw-btn-primary essb-iw-btn-sm" data-install="ai-social-booster">Activate</button>
					<?php else: ?>
						<button type="button" class="essb-iw-btn essb-iw-btn-primary essb-iw-btn-sm" data-install="ai-social-booster">Install</button>
					<?php endif; ?>
				</div>
			</div>
		</div>

		<!-- ===== Step 3: Share Counters ===== -->
		<div class="essb-iw-pane" data-pane="3">
			<h2 class="essb-iw-pane-title">Share counters</h2>
			<p class="essb-iw-pane-desc">Display how many times each article has been shared. Social proof encourages more visitors to share your content.</p>

			<label class="essb-iw-toggle essb-iw-toggle-large">
				<input type="checkbox" id="enableCounters">
				<span class="essb-iw-toggle-track"></span>
				<span class="essb-iw-toggle-content">
					<span class="essb-iw-toggle-label">I will display share counters on my website</span>
					<span class="essb-iw-toggle-desc">Displays the number of shares next to each button. Can also show a total share count across all networks.</span>
				</span>
			</label>

			<div class="essb-iw-options" id="countersOptions" style="display:none">

				<div class="essb-iw-counter-notice">
					<div>
						<strong>Note about share counters:</strong> Facebook requires an access token to display share counts, otherwise it shows zero. Other networks display counts without additional setup. Internal share counters (below) solve this by counting clicks on your site instead of relying on external APIs.
					</div>
				</div>

				<div class="essb-iw-options-item">
					<label class="essb-iw-toggle essb-iw-toggle-large">
						<input type="checkbox" id="enableInternalCounters">
						<span class="essb-iw-toggle-track"></span>
						<span class="essb-iw-toggle-content">
							<span class="essb-iw-toggle-label">Internal share counters</span>
							<span class="essb-iw-toggle-desc">Counts every click on your share buttons and stores it in your database. Works for all networks - no API keys needed. Recommended if you want to see share numbers for Facebook, which requires a token for its native counter.</span>
						</span>
					</label>
				</div>

				<div class="essb-iw-options-item">
					<label class="essb-iw-toggle essb-iw-toggle-large">
						<input type="checkbox" id="enableAvoidNegative" checked>
						<span class="essb-iw-toggle-track"></span>
						<span class="essb-iw-toggle-content">
							<span class="essb-iw-toggle-label">Avoid negative social proof</span>
							<span class="essb-iw-toggle-desc">Hides share counters until they reach a minimum number of shares (default: 10). This prevents showing "0 shares" which can discourage visitors from sharing.</span>
						</span>
					</label>
				</div>
			</div>
		</div>

		<!-- ===== Step 4: Analytics ===== -->
		<div class="essb-iw-pane" data-pane="4">
			<h2 class="essb-iw-pane-title">Internal analytics</h2>
			<p class="essb-iw-pane-desc">Track how your share buttons perform - which networks get the most clicks and which content resonates with your audience.</p>

			<label class="essb-iw-toggle essb-iw-toggle-large">
				<input type="checkbox" id="enableAnalytics">
				<span class="essb-iw-toggle-track"></span>
				<span class="essb-iw-toggle-content">
					<span class="essb-iw-toggle-label">Analytics dashboard for share buttons</span>
					<span class="essb-iw-toggle-desc">Records every click on your share buttons and displays reports in your WordPress dashboard. Fully privacy-safe - no external services, no data sent to third parties.</span>
				</span>
			</label>

			<div class="essb-iw-analytics-details">
				<div class="essb-iw-analytics-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zm6-4a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zm6-3a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
					</svg>
					<div>
						<strong>See which networks perform best</strong>
						<span>Identify which social networks drive the most shares from your site. Use this data to focus your social strategy.</span>
					</div>
				</div>
				<div class="essb-iw-analytics-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
						<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
					</svg>
					<div>
						<strong>Find your top content</strong>
						<span>Discover which posts and pages get shared the most. Create more of what your audience loves.</span>
					</div>
				</div>
				<div class="essb-iw-analytics-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
					</svg>
					<div>
						<strong>Privacy safe, no setup required</strong>
						<span>All data stays on your server. No external API calls, no third-party services, no GDPR headaches. Works immediately.</span>
					</div>
				</div>
				<div class="essb-iw-analytics-more">
					<svg width="16" height="16" viewBox="0 0 20 20" fill="#6b7280">
						<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
					</svg>
					<a href="https://socialsharingplugin.com/social-sharing/advanced-privacy-safe-analytics-for-wordpress-share-buttons/" target="_blank">Learn more about analytics &rarr;</a>
				</div>
			</div>
		</div>

		<!-- ===== Step 5: Pinterest Pro ===== -->
		<div class="essb-iw-pane" data-pane="5">
			<h2 class="essb-iw-pane-title">Pinterest Pro</h2>
			<p class="essb-iw-pane-desc">Pinterest is a powerful visual discovery engine. If it's a key platform for your audience, the Pro features give you more ways to engage pinners.</p>

			<label class="essb-iw-toggle essb-iw-toggle-large">
				<input type="checkbox" id="enablePinterestPro">
				<span class="essb-iw-toggle-track"></span>
				<span class="essb-iw-toggle-content">
					<span class="essb-iw-toggle-label">Pinterest Pro tools</span>
					<span class="essb-iw-toggle-desc">Extends Pinterest integration with Pin-it buttons over images, Pinterest Follow Box, and Follow Bar widgets.</span>
				</span>
			</label>

			<div class="essb-iw-pinterest-details">
				<div class="essb-iw-pinterest-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M9 0a9 9 0 00-3.5 17.3 8.7 8.7 0 01.3-2.2l1.1-4.5a3.5 3.5 0 01-.3-1.4c0-1.3.8-2.3 1.7-2.3.8 0 1.2.6 1.2 1.3 0 .8-.5 2-.8 3.1-.2.9.5 1.7 1.4 1.7 1.7 0 3-1.8 3-4.4 0-2.3-1.7-3.9-4-3.9a4.2 4.2 0 00-4.4 4.2 3.8 3.8 0 00.7 2.2.6.6 0 01.2.7l-.3 1.1c-.1.3-.3.4-.6.3a5 5 0 01-2-4c0-3.2 2.4-6.2 6.8-6.2 3.6 0 6.4 2.6 6.4 6 0 3.6-2.3 6.5-5.4 6.5-1 0-2-.5-2.3-1.2l-.6 2.4a8 8 0 01-1 2.4A9 9 0 109 0z" />
					</svg>
					<div>
						<strong>Pin button over images</strong>
						<span>A Pin-it button appears when visitors hover over images on your site. Makes it easy for them to save your content to their Pinterest boards - driving traffic back to you.</span>
					</div>
				</div>
				<div class="essb-iw-pinterest-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M2 5h16a1 1 0 00-1-1H3a1 1 0 00-1 1zm0 5h16v-1H2v1zm0 4h16v-1H2v1zm0 4h16v-1H2v1z" />
						<rect x="2" y="5" width="16" height="4" rx="1" />
						<rect x="2" y="11" width="16" height="4" rx="1" />
						<rect x="2" y="17" width="16" height="4" rx="1" />
					</svg>
					<div>
						<strong>Pinterest Follow widgets</strong>
						<span>Display a Follow Box or Follow Bar so visitors can follow your Pinterest profile directly from your site. A great way to grow your Pinterest audience.</span>
					</div>
				</div>
				<div class="essb-iw-pinterest-more">
					<svg width="16" height="16" viewBox="0 0 20 20" fill="#6b7280">
						<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
					</svg>
					<a href="https://socialsharingplugin.com/pinterest-pro-image-hover-pins/" target="_blank">Learn more about Pinterest Pro &rarr;</a>
				</div>
			</div>
		</div>

		<!-- ===== Step 6: Shareable Quotes ===== -->
		<div class="essb-iw-pane" data-pane="6">
			<h2 class="essb-iw-pane-title">Shareable Quotes</h2>
			<p class="essb-iw-pane-desc">Let visitors turn highlighted text into a tweet with one click. A simple way to make your content more shareable on X (Twitter).</p>

			<label class="essb-iw-toggle essb-iw-toggle-large">
				<input type="checkbox" id="enableQuotes">
				<span class="essb-iw-toggle-track"></span>
				<span class="essb-iw-toggle-content">
					<span class="essb-iw-toggle-label">Shareable quotes for X (Twitter)</span>
					<span class="essb-iw-toggle-desc">Adds a "Click to Tweet" button when visitors select text on your site. They can share highlighted passages directly to X with a single click.</span>
				</span>
			</label>

			<div class="essb-iw-quotes-details">
				<div class="essb-iw-quotes-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M18 2a1 1 0 00-1-1H3a1 1 0 00-1 1v12a1 1 0 001 1h5l3 3 3-3h3a1 1 0 001-1V2z" />
						<path d="M7 8h6M10 5v6" stroke="#fff" stroke-width="1.5" stroke-linecap="round" />
					</svg>
					<div>
						<strong>One-click sharing</strong>
						<span>Visitors highlight any text on your site and a tweet is pre-composed with the selected passage and a link back to your page.</span>
					</div>
				</div>
				<div class="essb-iw-quotes-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M10 1a1 1 0 011 1v1h1a1 1 0 110 2h-1v1a1 1 0 11-2 0V5H8a1 1 0 010-2h1V2a1 1 0 011-1z" />
						<path d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5z" />
					</svg>
					<div>
						<strong>Increase engagement</strong>
						<span>Quote tweets get more visibility on X. By making it easy to share quotable moments, you increase your content's reach.</span>
					</div>
				</div>
				<div class="essb-iw-quotes-more">
					<svg width="16" height="16" viewBox="0 0 20 20" fill="#6b7280">
						<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
					</svg>
					<a href="https://socialsharingplugin.com/click-to-tweet/" target="_blank">Learn more about shareable quotes &rarr;</a>
				</div>
			</div>
		</div>

		<!-- ===== Step 7: Short URLs ===== -->
		<div class="essb-iw-pane" data-pane="7">
			<h2 class="essb-iw-pane-title">Short URLs for sharing</h2>
			<p class="essb-iw-pane-desc">Short URLs make your shared links cleaner, trackable, and more trustworthy on social media. They also save character space on platforms like X.</p>

			<label class="essb-iw-toggle essb-iw-toggle-large">
				<input type="checkbox" id="enableShortUrls">
				<span class="essb-iw-toggle-track"></span>
				<span class="essb-iw-toggle-content">
					<span class="essb-iw-toggle-label">Short URL support for shared links</span>
					<span class="essb-iw-toggle-desc">Replaces long post URLs with shortened versions when sharing on social networks. Supported providers: bit.ly, Rebrandly, po.st, Premium URL Shortener, and self-hosted.</span>
				</span>
			</label>

			<div class="essb-iw-shorty-row">
				<div class="essb-iw-shorty-info">
					<strong>Shorty - Self-hosted Short URLs</strong>
					<span>Keep your short URLs on your own domain. The free version of Shorty integrates seamlessly and requires no external API keys.</span>
					<a href="https://socialsharingplugin.com/addons/shorty-self-hosted-shorturls/" target="_blank" class="essb-iw-shorty-learn">Learn more &rarr;</a>
				</div>
				<?php $shorty_state = essb_addon_get_state('shorty'); ?>
				<?php if ($shorty_state === 'active'): ?>
					<span class="essb-iw-badge essb-iw-badge-active">Active</span>
				<?php elseif ($shorty_state === 'installed'): ?>
					<button type="button" class="essb-iw-btn essb-iw-btn-primary essb-iw-btn-sm" data-install="shorty">Activate</button>
				<?php else: ?>
					<button type="button" class="essb-iw-btn essb-iw-btn-primary essb-iw-btn-sm" data-install="shorty">Install</button>
				<?php endif; ?>
			</div>

			<div class="essb-iw-shorty-more">
				<svg width="16" height="16" viewBox="0 0 20 20" fill="#6b7280">
					<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
				</svg>
				<a href="https://docs.socialsharingplugin.com/knowledgebase/setup-short-urls-for-sharing-bit-ly-rebrandly-com-po-st-premium-url-shortener-sharing-short-url/" target="_blank">Learn more about setup of short URLs &rarr;</a>
			</div>
		</div>

		<!-- ===== Step 8: Social Profiles ===== -->
		<div class="essb-iw-pane" data-pane="8">
			<h2 class="essb-iw-pane-title">Social profile links</h2>
			<p class="essb-iw-pane-desc">Display your social media profiles as a link panel on your site. A great way to grow your follower base across all your networks.</p>

			<label class="essb-iw-toggle essb-iw-toggle-large">
				<input type="checkbox" id="enableProfiles">
				<span class="essb-iw-toggle-track"></span>
				<span class="essb-iw-toggle-content">
					<span class="essb-iw-toggle-label">Social profile link buttons</span>
					<span class="essb-iw-toggle-desc">Adds a configurable social profile panel to your site. Supports 60+ networks with 25+ display templates.</span>
				</span>
			</label>

			<div class="essb-iw-profiles-details">
				<div class="essb-iw-profiles-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M9 0a9 9 0 100 18A9 9 0 009 0zM6.5 7a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm5 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z" />
					</svg>
					<div>
						<strong>60+ social networks supported</strong>
						<span>From Facebook and X to TikTok, Telegram, and beyond. Add links to every platform your brand is on.</span>
					</div>
				</div>
				<div class="essb-iw-profiles-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm0 2h12v1H4V6zm0 3h12v4H4V9z" />
					</svg>
					<div>
						<strong>25+ display templates</strong>
						<span>Choose from icons-only, buttons with labels, grid layouts, widget styles, and more. Match your site's design perfectly.</span>
					</div>
				</div>
				<div class="essb-iw-profiles-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M11 3a1 1 0 100 2h2.59l-6.3 6.3a1 1 0 101.42 1.42L15 6.41V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
						<path d="M3 5a2 2 0 012-2h3a1 1 0 010 2H5v10h10v-3a1 1 0 112 0v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" />
					</svg>
					<div>
						<strong>Add anywhere on your site</strong>
						<span>Place profiles using automated display locations, shortcodes, the Elementor widget, or the Block builder. Fits any WordPress setup.</span>
					</div>
				</div>
				<div class="essb-iw-profiles-more">
					<svg width="16" height="16" viewBox="0 0 20 20" fill="#6b7280">
						<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
					</svg>
					<a href="https://socialsharingplugin.com/social-profiles/" target="_blank">Learn more about social profiles &rarr;</a>
				</div>
			</div>
		</div>

		<!-- ===== Step 9: Subscribe Forms ===== -->
		<div class="essb-iw-pane" data-pane="9">
			<h2 class="essb-iw-pane-title">Subscribe forms</h2>
			<p class="essb-iw-pane-desc">Grow your mailing list directly from your site. Choose from pop-ups, fly-ins, inline forms, and more - all integrated with your email service.</p>

			<label class="essb-iw-toggle essb-iw-toggle-large">
				<input type="checkbox" id="enableSubscribe">
				<span class="essb-iw-toggle-track"></span>
				<span class="essb-iw-toggle-content">
					<span class="essb-iw-toggle-label">Email subscribe forms</span>
					<span class="essb-iw-toggle-desc">Add email subscription forms to capture leads. Supports 12 mailing services, 9 ready designs, pop-ups, fly-ins, inline forms, and unlock-to-subscribe.</span>
				</span>
			</label>

			<div class="essb-iw-subscribe-details">
				<div class="essb-iw-subscribe-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm2 0v1.5l8 4.5 8-4.5V5l-8 4.5L4 5z" />
					</svg>
					<div>
						<strong>12 mailing services &amp; 9 ready designs</strong>
						<span>Connect with Mailchimp, MailerLite, ConvertKit, and more. Pick from 9 pre-built form designs or customize your own with the built-in customizer.</span>
					</div>
				</div>
				<div class="essb-iw-subscribe-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M10 1l-3 6-7 1 5 5-1 7 6-3 6 3-1-7 5-5-7-1-3-6z" />
					</svg>
					<div>
						<strong>Multiple display modes</strong>
						<span>Pop-up forms, fly-out panels, automatic forms below content, subscribe button in share buttons, and unlock-to-subscribe for premium content.</span>
					</div>
				</div>
				<div class="essb-iw-subscribe-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M11 3a1 1 0 100 2h2.59l-6.3 6.3a1 1 0 101.42 1.42L15 6.41V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
						<path d="M3 5a2 2 0 012-2h3a1 1 0 010 2H5v10h10v-3a1 1 0 112 0v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" />
					</svg>
					<div>
						<strong>Place anywhere</strong>
						<span>Widget, shortcode, Elementor widget, Block builder element, or automatic triggers (scroll, delay, exit intent). Fits any site layout.</span>
					</div>
				</div>
				<div class="essb-iw-subscribe-more">
					<svg width="16" height="16" viewBox="0 0 20 20" fill="#6b7280">
						<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
					</svg>
					<a href="https://socialsharingplugin.com/grow-your-mailing-list-subscribers/" target="_blank">Learn more about subscribe forms &rarr;</a>
				</div>
			</div>
		</div>

		<!-- ===== Step 10: Social Chat ===== -->
		<div class="essb-iw-pane" data-pane="10">
			<h2 class="essb-iw-pane-title">Social Chat</h2>
			<p class="essb-iw-pane-desc">An engaging way to communicate with your visitors in real time. Perfect for WooCommerce stores - add WhatsApp, Telegram, Viber, Signal, Line, and more chat buttons to your site. Works standalone or alongside Easy Social Share Buttons.</p>

			<div class="essb-iw-chat-card essb-iw-chat-hero">
				<strong>Social Chat - Free Standalone Plugin</strong>
				<span>A dedicated chat plugin that works on its own or integrated with Easy Social Share Buttons. The free version is fully functional on unlimited sites.</span>
				<div class="essb-iw-chat-actions">
					<?php $schat_state = essb_addon_get_state('social-chat'); ?>
					<?php if ($schat_state === 'active'): ?>
						<span class="essb-iw-badge essb-iw-badge-active">Active</span>
					<?php elseif ($schat_state === 'installed'): ?>
						<button type="button" class="essb-iw-btn essb-iw-btn-primary essb-iw-btn-sm" data-install="social-chat">Activate</button>
					<?php else: ?>
						<button type="button" class="essb-iw-btn essb-iw-btn-primary essb-iw-btn-sm" data-install="social-chat">Install Free</button>
					<?php endif; ?>
					<a href="https://socialsharingplugin.com/social-chat/" target="_blank" class="essb-iw-btn essb-iw-btn-ghost essb-iw-btn-sm">Learn more</a>
				</div>
			</div>

			<div class="essb-iw-chat-details">
				<div class="essb-iw-chat-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm2 0v10h12V5H4z" />
						<circle cx="10" cy="10" r="3" />
					</svg>
					<div>
						<strong>Chat Popup - Simple, Smart, and Stylish</strong>
						<span>A floating button that opens a popup listing your team members. Supports Same Network (all WhatsApp) and Different Networks (mixed platforms with accent colors) modes. Free version includes core functionality.</span>
					</div>
				</div>
				<div class="essb-iw-chat-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 9l2 2 4-4" />
					</svg>
					<div>
						<strong>Operator Popup - Full Chat Experience</strong>
						<span>A sleek popup with welcome message, suggested replies, and chat input - like live chat, powered by your messaging apps. Pro adds greeting messages and pre-defined reply options.</span>
					</div>
				</div>
				<div class="essb-iw-chat-card">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="#1b84ff">
						<path d="M11 3a1 1 0 100 2h2.59l-6.3 6.3a1 1 0 101.42 1.42L15 6.41V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
						<path d="M3 5a2 2 0 012-2h3a1 1 0 010 2H5v10h10v-3a1 1 0 112 0v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" />
					</svg>
					<div>
						<strong>Direct Chat Button - One Click, One Connection</strong>
						<span>A single button that links directly to an operator's chat. Place it in headers, footers, or alongside products. Fully available in the free version.</span>
					</div>
				</div>
			</div>
		</div>

		<!-- ===== Step 11: Additional Features ===== -->
		<div class="essb-iw-pane" data-pane="11">
			<h2 class="essb-iw-pane-title">Additional features</h2>
			<p class="essb-iw-pane-desc">A few more powerful features to round out your setup. Enable what you need, skip what you don't.</p>

			<div class="essb-iw-additional-item">
				<label class="essb-iw-toggle essb-iw-toggle-large">
					<input type="checkbox" id="enableCustomButtons">
					<span class="essb-iw-toggle-track"></span>
					<span class="essb-iw-toggle-content">
						<span class="essb-iw-toggle-label">Custom network buttons</span>
						<span class="essb-iw-toggle-desc">Add your own custom network buttons to the share or follow button lists. Useful for linking to custom URLs, apps, or any destination you choose.</span>
					</span>
				</label>
			</div>

			<div class="essb-iw-additional-item">
				<label class="essb-iw-toggle essb-iw-toggle-large">
					<input type="checkbox" id="enableCustomPositions">
					<span class="essb-iw-toggle-track"></span>
					<span class="essb-iw-toggle-content">
						<span class="essb-iw-toggle-label">Custom display positions</span>
						<span class="essb-iw-toggle-desc">Create a custom display position inside the plugin. Show it anywhere on your site using a shortcode or a direct function call - perfect for theme integration.</span>
					</span>
				</label>
			</div>

			<div class="essb-iw-additional-item">
				<label class="essb-iw-toggle essb-iw-toggle-large">
					<input type="checkbox" id="enableTranslate">
					<span class="essb-iw-toggle-track"></span>
					<span class="essb-iw-toggle-content">
						<span class="essb-iw-toggle-label">Customize and translate plugin texts</span>
						<span class="essb-iw-toggle-desc">Translate or customize preset plugin texts (like "Share", "Shares", "Send via Email", etc.) directly in the plugin settings. No translation files needed.</span>
					</span>
				</label>
			</div>
		</div>

	</div>

	<div class="essb-iw-footer">
		<button type="button" class="essb-iw-btn essb-iw-btn-ghost" id="essb-iw-prev" disabled>&larr; <?php esc_html_e('Previous', 'essb'); ?></button>
		<button type="button" class="essb-iw-btn essb-iw-btn-primary" id="essb-iw-next"><?php esc_html_e('Next', 'essb'); ?> &rarr;</button>
	</div>

</div>


<script>
	<?php
	if (essb_is_envato_version()) {
	?>
		var essb_api_activate_domain = "<?php echo esc_attr(ESSB_Envato_Activation_Manager::domain()); ?>";
		var essb_api_activate_url = "<?php echo esc_url(ESSB_Envato_Activation_Manager::getSiteURL()); ?>";
		var essb_api_url = "<?php echo esc_url(ESSB_Envato_Activation_Manager::getApiUrl('api')); ?>";
		var essb_ajax_url = "<?php echo esc_url(admin_url('admin-ajax.php')); ?>";

		var essb_api_security_token = "<?php echo wp_create_nonce('essb_activate_nonce_token'); ?>";

		var essb_used_purchasecode = "<?php echo esc_url(ESSB_Envato_Activation_Manager::getPurchaseCode()); ?>";
		var essb_used_activationcode = "<?php echo esc_url(ESSB_Envato_Activation_Manager::getActivationCode()); ?>";

	<?php
	}
	?>

	jQuery(document).ready(function($) {

		// ---- Feature toggle save ----
		$('.essb-df-grid').on('change', '.essb-activate-additional-feature .essb-ui-switch-check', function() {
			var state = $(this).is(':checked'),
				field = $(this).data('field') || '',
				rootElement = $('.essb-activate-additional-feature-' + field),
				rootType = rootElement.data('type') || '',
				value = '';

			if (state) {
				rootElement.addClass('active');
				value = (rootType == 'deactivation') ? '' : 'true';
			} else {
				rootElement.removeClass('active');
				value = (rootType == 'deactivation') ? 'true' : '';
			}

			rootElement.find('.feature-value').val(value);

			var $toast = $('<div class="essb-df-toast essb-df-toast-saving"><span class="essb-df-spinner"></span> <?php echo esc_js(esc_html__('Saving', 'essb')); ?>&hellip;</div>').appendTo('body');
			setTimeout(function() {
				$toast.addClass('essb-df-toast-show');
			}, 10);

			var options = {};
			options[field] = value;

			$.ajax({
				type: "POST",
				url: ajaxurl,
				data: {
					action: 'essb_advanced_options',
					cmd: 'save',
					group: 'essb_options',
					advanced_options: options,
					essb_advancedoptions_token: $('#essb_advancedoptions_token').val()
				},
				success: function() {
					$toast.removeClass('essb-df-toast-saving').addClass('essb-df-toast-success').html('<?php echo esc_js(esc_html__('Settings saved', 'essb')); ?>');
					setTimeout(function() {
						$toast.removeClass('essb-df-toast-show');
						setTimeout(function() {
							$toast.remove();
						}, 300);
					}, 1500);
				}
			});
		});

		// ---- Wizard: state ----
		var owStep = 1;
		var owTotalSteps = 5;

		// ---- Wizard: open / close ----
		$('#essb-df-open-wizard').on('click', function(e) {
			e.preventDefault();
			$('#essb-ow-overlay').addClass('essb-ow-overlay-show');
			$('#essb-ow-wizard').addClass('essb-ow-wrap-show');
			owGoTo(1);
		});
		$('#essb-ow-close').on('click', function(e) {
			e.preventDefault();
			owClose();
		});
		$('#essb-ow-overlay').on('click', owClose);

		function owClose() {
			$('#essb-ow-overlay').removeClass('essb-ow-overlay-show');
			$('#essb-ow-wizard').removeClass('essb-ow-wrap-show');
		}

		// ---- Wizard: list selection ----
		$('.essb-ow-list-item').on('click', function() {
			$(this).closest('.essb-ow-list').find('.essb-ow-list-item').removeClass('essb-ow-list-selected');
			$(this).addClass('essb-ow-list-selected');
			$(this).find('input[type="radio"]').prop('checked', true);
			owUpdateSummary();
		});

		// ---- Wizard: precompiled toggle ----
		$('#essb-ow-precompiled-enable').on('change', function() {
			var opts = $('#essb-ow-precompiled-options');
			var label = $(this).closest('.essb-ow-toggle-large');
			if ($(this).is(':checked')) {
				opts.show();
				label.removeClass('essb-ow-toggle-disabled');
			} else {
				opts.hide();
				label.addClass('essb-ow-toggle-disabled');
			}
			owUpdateSummary();
		});
		$('#essb-ow-precompiled-mode, #essb-ow-precompiled-unique, #essb-ow-precompiled-post, #essb-ow-precompiled-footer, #essb-ow-precompiled-preload-css').on('change', owUpdateSummary);

		// ---- Wizard: navigation ----
		$('#essb-ow-prev').on('click', function(e) {
			e.preventDefault();
			if (owStep > 1) owGoTo(owStep - 1);
		});
		$('#essb-ow-next').on('click', function(e) {
			e.preventDefault();
			if (owStep < owTotalSteps) owGoTo(owStep + 1);
		});

		function owGoTo(step) {
			owStep = step;
			$('.essb-ow-pane').each(function() {
				$(this).toggleClass('essb-ow-pane-active', parseInt($(this).data('pane')) === step);
			});
			$('.essb-ow-dot').each(function() {
				$(this).toggleClass('essb-ow-dot-active', parseInt($(this).data('step')) === step);
			});
			$('#essb-ow-step-label').text(step <= 4 ? '<?php echo esc_js(esc_html__('Step', 'essb')); ?> ' + step + ' <?php echo esc_js(esc_html__('of', 'essb')); ?> 4' : '<?php echo esc_js(esc_html__('Summary', 'essb')); ?>');
			$('#essb-ow-prev').prop('disabled', step === 1);
			if (step === owTotalSteps) {
				$('#essb-ow-next').hide();
			} else {
				$('#essb-ow-next').show().text(step === owTotalSteps - 1 ? '<?php echo esc_js(esc_html__('Review Summary', 'essb')); ?> \u2192' : '<?php echo esc_js(esc_html__('Next', 'essb')); ?> \u2192');
			}
		}

		// ---- Wizard: update summary ----
		function owUpdateSummary() {
			// Step 1 - CSS Mode
			var cssItem = $('.essb-ow-pane[data-pane="1"] .essb-ow-list-selected');
			var cssVal = cssItem.length ? cssItem.find('input').val() : '';
			var cssLabels = {
				'': '<?php echo esc_js(esc_html__('Full - all features, no optimization', 'essb')); ?>',
				'slim': '<?php echo esc_js(esc_html__('Slim - optimized files, minified', 'essb')); ?>',
				'mini': '<?php echo esc_js(esc_html__('Mini - minimal footprint', 'essb')); ?>',
				'light': '<?php echo esc_js(esc_html__('Light - maximum performance', 'essb')); ?>'
			};
			$('#essb-ow-summary-css').text(cssLabels[cssVal] || cssLabels['']);

			// Step 2 - JS Mode
			var jsItem = $('.essb-ow-pane[data-pane="2"] .essb-ow-list-selected');
			var jsVal = jsItem.length ? jsItem.find('input').val() : '';
			var jsLabels = {
				'': '<?php echo esc_js(esc_html__('Default - footer, best compatibility', 'essb')); ?>',
				'async': '<?php echo esc_js(esc_html__('Asynchronous - non-render-blocking', 'essb')); ?>',
				'defer': '<?php echo esc_js(esc_html__('Deferred - after page render', 'essb')); ?>'
			};
			$('#essb-ow-summary-js').text(jsLabels[jsVal] || '');

			// Step 3 - Style Mode
			var styleItem = $('.essb-ow-pane[data-pane="3"] .essb-ow-list-selected');
			var styleVal = styleItem.length ? styleItem.find('input').val() : '';
			var styleLabels = {
				'': '<?php echo esc_js(esc_html__('Default - minified CSS', 'essb')); ?>',
				'defer': '<?php echo esc_js(esc_html__('Deferred - dynamic CSS moved to footer', 'essb')); ?>'
			};
			$('#essb-ow-summary-style').text(styleLabels[styleVal] || '');

			// Step 4 - Precompiled
			var preParts = [];
			if ($('#essb-ow-precompiled-enable').is(':checked')) {
				preParts.push('<?php echo esc_js(esc_html__('Enabled', 'essb')); ?>');
				var modeVal = $('#essb-ow-precompiled-mode').val();
				var modeMap = {
					'': '<?php echo esc_js(esc_html__('CSS + JavaScript', 'essb')); ?>',
					'css': '<?php echo esc_js(esc_html__('CSS only', 'essb')); ?>',
					'js': '<?php echo esc_js(esc_html__('JavaScript only', 'essb')); ?>'
				};
				preParts.push(modeMap[modeVal] || modeMap['']);
				if ($('#essb-ow-precompiled-unique').is(':checked')) preParts.push('<?php echo esc_js(esc_html__('Unique filenames', 'essb')); ?>');
				if ($('#essb-ow-precompiled-post').is(':checked')) preParts.push('<?php echo esc_js(esc_html__('Per-post cache', 'essb')); ?>');
				if ($('#essb-ow-precompiled-footer').is(':checked')) preParts.push('<?php echo esc_js(esc_html__('CSS to footer', 'essb')); ?>');
				if ($('#essb-ow-precompiled-preload-css').is(':checked')) preParts.push('<?php echo esc_js(esc_html__('Async CSS preload', 'essb')); ?>');
			} else {
				preParts.push('<?php echo esc_js(esc_html__('Disabled', 'essb')); ?>');
			}
			$('#essb-ow-summary-precompiled').text(preParts.join(', '));
		}

		// ---- Wizard: Apply ----
		$('#essb-ow-apply').on('click', function() {
			var btn = $(this);
			btn.prop('disabled', true).text('<?php echo esc_js(esc_html__('Applying', 'essb')); ?>&hellip;');

			// Build options object
			var options = {};

			// Step 1: css_mode
			var cssMode = $('.essb-ow-pane[data-pane="1"] .essb-ow-list-selected input').val() || '';
			options.css_mode = cssMode;

			// Step 2: js_mode -> load_js_async, load_js_defer, scripts_in_head
			var jsMode = $('.essb-ow-pane[data-pane="2"] .essb-ow-list-selected input').val() || '';
			options.load_js_async = jsMode === 'async' ? 'true' : '';
			options.load_js_defer = jsMode === 'defer' ? 'true' : '';
			options.scripts_in_head = '';

			// Step 3: style_mode -> use_minified_css, load_css_footer
			var styleMode = $('.essb-ow-pane[data-pane="3"] .essb-ow-list-selected input').val() || '';
			options.use_minified_css = 'true';
			options.load_css_footer = styleMode === 'defer' ? 'true' : '';

			// Step 4: precompiled
			var preEnabled = $('#essb-ow-precompiled-enable').is(':checked');
			options.precompiled_resources = preEnabled ? 'true' : '';
			if (preEnabled) {
				options.precompiled_mode = $('#essb-ow-precompiled-mode').val() || '';
				options.precompiled_unique = $('#essb-ow-precompiled-unique').is(':checked') ? 'true' : '';
				options.precompiled_post = $('#essb-ow-precompiled-post').is(':checked') ? 'true' : '';
				options.precompiled_footer = $('#essb-ow-precompiled-footer').is(':checked') ? 'true' : '';
				options.precompiled_preload_css = $('#essb-ow-precompiled-preload-css').is(':checked') ? 'true' : '';
			} else {
				options.precompiled_mode = '';
				options.precompiled_unique = '';
				options.precompiled_post = '';
				options.precompiled_footer = '';
				options.precompiled_preload_css = '';
			}

			// Always set optimization_level to custom
			options.optimization_level = '';

			// Toast: saving state
			var $toast = $('<div class="essb-df-toast essb-df-toast-saving"><span class="essb-df-spinner"></span> <?php echo esc_js(esc_html__('Saving', 'essb')); ?>&hellip;</div>').appendTo('body');
			setTimeout(function() {
				$toast.addClass('essb-df-toast-show');
			}, 10);

			$.ajax({
				type: "POST",
				url: ajaxurl,
				data: {
					action: 'essb_advanced_options',
					cmd: 'save',
					group: 'essb_options',
					advanced_options: options,
					essb_advancedoptions_token: $('#essb_advancedoptions_token').val()
				},
				success: function() {
					// Close wizard
					owClose();
					// Update toast to success
					$toast.removeClass('essb-df-toast-saving').addClass('essb-df-toast-success').html('<?php echo esc_js(esc_html__('Settings saved', 'essb')); ?>');
					setTimeout(function() {
						$toast.removeClass('essb-df-toast-show');
						setTimeout(function() {
							$toast.remove();
						}, 300);
					}, 1500);
					btn.prop('disabled', false).text('<?php echo esc_js(esc_html__('Apply Optimization', 'essb')); ?>');
				},
				error: function() {
					$toast.removeClass('essb-df-toast-saving').addClass('essb-df-toast-success').html('<?php echo esc_js(esc_html__('Error saving settings', 'essb')); ?>');
					setTimeout(function() {
						$toast.removeClass('essb-df-toast-show');
						setTimeout(function() {
							$toast.remove();
						}, 300);
					}, 2000);
					btn.prop('disabled', false).text('<?php echo esc_js(esc_html__('Apply Optimization', 'essb')); ?>');
				}
			});
		});

		// ---- Init summary ----
		owUpdateSummary();


		// ---- Quick Share Buttons Setup ----
		var swStep = 1;
		var swTotalSteps = 8;

		$('#essb-df-open-swizard').on('click', function(e) {
			e.preventDefault();
			$('#essb-sw-overlay').addClass('essb-sw-overlay-show');
			$('#essb-sw-wizard').addClass('essb-sw-wrap-show');
			swGoTo(1);
			swUpdateVisibilityTable();
		});
		$('#essb-sw-close').on('click', function(e) {
			e.preventDefault();
			swClose();
		});
		$('#essb-sw-overlay').on('click', swClose);

		function swClose() {
			$('#essb-sw-overlay').removeClass('essb-sw-overlay-show');
			$('#essb-sw-wizard').removeClass('essb-sw-wrap-show');
		}

		$('#essb-sw-prev').on('click', function(e) {
			e.preventDefault();
			if (swStep > 1) swGoTo(swStep - 1);
		});
		$('#essb-sw-next').on('click', function(e) {
			e.preventDefault();
			if (swStep < swTotalSteps) swGoTo(swStep + 1);
		});

		function swGoTo(step) {
			swStep = step;
			$('.essb-sw-pane').each(function() {
				$(this).toggleClass('essb-sw-pane-active', parseInt($(this).data('pane')) === step);
			});
			$('.essb-sw-dot').each(function() {
				var s = parseInt($(this).data('step'));
				$(this).toggleClass('essb-sw-dot-active', s === step);
				$(this).toggleClass('essb-sw-dot-done', s < step);
			});
			var label = step < 8 ? '<?php echo esc_js(esc_html__('Step', 'essb')); ?> ' + step + ' <?php echo esc_js(esc_html__('of', 'essb')); ?> 7' : '<?php echo esc_js(esc_html__('Review & Apply', 'essb')); ?>';
			$('#essb-sw-step-label').text(label);
			$('#essb-sw-prev').prop('disabled', step === 1);
			if (step === swTotalSteps) {
				$('#essb-sw-next').hide();
				swUpdateSummary();
			} else {
				$('#essb-sw-next').show().text(step === swTotalSteps - 1 ? '<?php echo esc_js(esc_html__('Review Summary', 'essb')); ?> \u2192' : '<?php echo esc_js(esc_html__('Next', 'essb')); ?> \u2192');
			}
		}

		// Network grid
		$('#essb-sw-network-grid').on('click', '.essb-sw-network-item', function() {
			$(this).toggleClass('essb-sw-network-selected');
			swUpdateNetworkCount();
		});
		$('#essb-sw-network-search').on('input', function() {
			var q = $(this).val().toLowerCase();
			$('#essb-sw-network-grid .essb-sw-network-item').each(function() {
				var name = $(this).find('.essb-sw-network-name').text().toLowerCase();
				$(this).toggle(name.indexOf(q) > -1);
			});
		});

		function swUpdateNetworkCount() {
			var count = $('#essb-sw-network-grid .essb-sw-network-selected').length;
			$('#essb-sw-selected-info').text(count + ' <?php echo esc_js(esc_html__('network', 'essb')); ?>' + (count !== 1 ? 's' : '') + ' <?php echo esc_js(esc_html__('selected. Drag to reorder.', 'essb')); ?>');
		}
		if ($.fn.sortable) {
			$('#essb-sw-network-grid').sortable({
				placeholder: 'ui-sortable-placeholder',
				tolerance: 'pointer',
				containment: 'parent'
			});
		}
		$('#essb-sw-only-selected').on('change', function() {
			swUpdateVisibilityTable();
		});

		// Network device visibility
		$('#essb-sw-enable-visibility').on('change', function() {
			if ($(this).is(':checked')) {
				$('#essb-sw-visibility-section').show();
				swUpdateVisibilityTable();
			} else {
				$('#essb-sw-visibility-section').hide();
			}
		});

		function swUpdateVisibilityTable() {
			if (!$('#essb-sw-enable-visibility').is(':checked')) return;
			var selected = [];
			$('#essb-sw-network-grid .essb-sw-network-selected').each(function() {
				selected.push($(this).data('id'));
			});
			if (selected.length === 0) {
				$('#essb-sw-network-grid .essb-sw-network-item').each(function() {
					selected.push($(this).data('id'));
				});
			}
			var tbody = $('#essb-sw-visibility-body');
			tbody.empty();
			selected.forEach(function(id) {
				var name = $('#essb-sw-network-grid .essb-sw-network-item[data-id="' + id + '"] .essb-sw-network-name').text();
				tbody.append(
					'<tr>' +
					'<td>' + name + '</td>' +
					'<td><label class="essb-sw-toggle"><input type="checkbox" class="essb-sw-visibility-desktop" data-id="' + id + '"><span class="essb-sw-toggle-track"></span></label></td>' +
					'<td><label class="essb-sw-toggle"><input type="checkbox" class="essb-sw-visibility-mobile" data-id="' + id + '"><span class="essb-sw-toggle-track"></span></label></td>' +
					'</tr>'
				);
			});
		}
		$('#essb-sw-suggest-visibility').on('click', function(e) {
			e.preventDefault();
			var mobileOnly = ['whatsapp', 'telegram', 'messenger', 'viber', 'sms', 'line', 'kakaotalk', 'skype'];
			var desktopPreferred = ['print'];
			$('.essb-sw-visibility-desktop').each(function() {
				var id = $(this).data('id');
				$(this).prop('checked', mobileOnly.indexOf(id) !== -1);
			});
			$('.essb-sw-visibility-mobile').each(function() {
				var id = $(this).data('id');
				$(this).prop('checked', desktopPreferred.indexOf(id) !== -1);
			});
		});

		// List selection (template, display mode, counter positions, pin visibility)
		$('#essb-sw-wizard').on('click', '.essb-sw-list-item', function() {
			$(this).closest('.essb-sw-list').find('.essb-sw-list-item').removeClass('essb-sw-list-selected');
			$(this).addClass('essb-sw-list-selected');
			$(this).find('input[type="radio"]').prop('checked', true);
		});

		// Counter toggle
		$('#essb-sw-show-counters').on('change', function() {
			if ($(this).is(':checked')) {
				$('#essb-sw-counter-options').show();
				$('#essb-sw-counters-toggle-wrap').removeClass('essb-sw-toggle-disabled');
			} else {
				$('#essb-sw-counter-options').hide();
				$('#essb-sw-counters-toggle-wrap').addClass('essb-sw-toggle-disabled');
			}
		});

		// Device chips
		$('.essb-sw-pos-row').on('click', '.essb-sw-device-chip', function() {
			$(this).addClass('essb-sw-device-chip-active');
			$(this).siblings().removeClass('essb-sw-device-chip-active');
		});

		// Post type selection
		$('.essb-sw-type-item').on('click', function() {
			$(this).toggleClass('essb-sw-type-selected');
		});

		// Pinterest toggle
		$('#essb-sw-pinterest-enable').on('change', function() {
			if ($(this).is(':checked')) {
				$('#essb-sw-pinterest-options').show();
				$('#essb-sw-pinterest-toggle-wrap').removeClass('essb-sw-toggle-disabled');
			} else {
				$('#essb-sw-pinterest-options').hide();
				$('#essb-sw-pinterest-toggle-wrap').addClass('essb-sw-toggle-disabled');
			}
		});

		// Pinterest position grid
		$('#essb-sw-pinterest-position-grid').on('click', '.essb-sw-position-item', function() {
			$(this).addClass('essb-sw-position-selected');
			$(this).siblings().removeClass('essb-sw-position-selected');
		});

		// Summary
		function swUpdateSummary() {
			var nCount = $('#essb-sw-network-grid .essb-sw-network-selected').length;
			$('#essb-sw-summary-networks').text(nCount + ' <?php echo esc_js(esc_html__('networks selected', 'essb')); ?>');

			var template = $('.essb-sw-pane[data-pane="3"] .essb-sw-list:first .essb-sw-list-selected .essb-sw-list-item-title').text();
			var mode = $('.essb-sw-pane[data-pane="3"] .essb-sw-list:last .essb-sw-list-selected .essb-sw-list-item-title').text();
			$('#essb-sw-summary-style').text(template + ', ' + mode);

			var deskSize = $('#essb-sw-size-desktop-list .essb-sw-list-selected .essb-sw-list-item-title').text() || '<?php echo esc_js(esc_html__('Default', 'essb')); ?>';
			var mobSize = $('#essb-sw-size-mobile-list .essb-sw-list-selected .essb-sw-list-item-title').text() || '<?php echo esc_js(esc_html__('Default', 'essb')); ?>';
			var align = $('#essb-sw-alignment-list .essb-sw-list-selected .essb-sw-list-item-title').text() || '<?php echo esc_js(esc_html__('Left', 'essb')); ?>';
			var nospace = $('#essb-sw-nospace').is(':checked') ? ', <?php echo esc_js(esc_html__('No spacing', 'essb')); ?>' : '';
			$('#essb-sw-summary-size').text('<?php echo esc_js(esc_html__('Desktop', 'essb')); ?>: ' + deskSize + ', <?php echo esc_js(esc_html__('Mobile', 'essb')); ?>: ' + mobSize + ', ' + align + nospace);

			var showCounters = $('#essb-sw-show-counters').is(':checked');
			if (showCounters) {
				var cPos = $('[name="essb-sw-counter-pos"]:checked').closest('.essb-sw-list-item').find('.essb-sw-list-item-title').text();
				var tPos = $('[name="essb-sw-total-counter-pos"]:checked').closest('.essb-sw-list-item').find('.essb-sw-list-item-title').text();
				$('#essb-sw-summary-counters').text(cPos + ', ' + tPos);
			} else {
				$('#essb-sw-summary-counters').text('<?php echo esc_js(esc_html__('Disabled', 'essb')); ?>');
			}

			var posNames = [];
			$('.essb-sw-pos-row').each(function() {
				if ($(this).find('.essb-sw-pos-check').is(':checked')) {
					var nameText = $(this).find('.essb-sw-pos-name').clone().children().remove().end().text().trim();
					posNames.push(nameText);
				}
			});
			$('#essb-sw-summary-positions').text(posNames.length > 0 ? posNames.join(', ') : '<?php echo esc_js(esc_html__('None', 'essb')); ?>');

			var pinEnabled = $('#essb-sw-pinterest-enable').is(':checked');
			$('#essb-sw-summary-pinterest').text(pinEnabled ? '<?php echo esc_js(esc_html__('Enabled', 'essb')); ?>' : '<?php echo esc_js(esc_html__('Disabled', 'essb')); ?>');
		}

		// Apply
		$('#essb-sw-apply').on('click', function() {
			var btn = $(this);
			btn.prop('disabled', true).text('<?php echo esc_js(esc_html__('Applying', 'essb')); ?>&hellip;');

			var options = {};

			// Step 1: Networks
			var selectedNetworks = [];
			$('#essb-sw-network-grid .essb-sw-network-selected').each(function() {
				selectedNetworks.push($(this).data('id'));
			});
			var allNetworks = [];
			$('#essb-sw-network-grid .essb-sw-network-selected').each(function() {
				allNetworks.push($(this).data('id'));
			});
			options.activate_networks_manage = $('#essb-sw-only-selected').is(':checked') ? 'true' : '';
			options.functions_networks = selectedNetworks;
			options.networks = allNetworks;

			// Step 2: Network visibility
			var enableVisibility = $('#essb-sw-enable-visibility').is(':checked');
			options.activate_networks_responsive = enableVisibility ? 'true' : '';
			if (enableVisibility) {
				$('.essb-sw-visibility-desktop').each(function() {
					options['responsive_' + $(this).data('id') + '_desktop'] = $(this).is(':checked') ? 'true' : '';
				});
				$('.essb-sw-visibility-mobile').each(function() {
					options['responsive_' + $(this).data('id') + '_mobile'] = $(this).is(':checked') ? 'true' : '';
				});
			}

			// Step 3: Style
			options.style = $('[name="essb-sw-template"]:checked').val();
			options.button_style = $('[name="essb-sw-display-mode"]:checked').val();

			// Step 4: Size & layout
			options.button_size = $('#essb-sw-size-desktop-list .essb-sw-list-selected').data('value') || '';
			options.button_size_mobile = $('#essb-sw-size-mobile-list .essb-sw-list-selected').data('value') || '';
			var alignment = $('#essb-sw-alignment-list .essb-sw-list-selected').data('value') || '';
			if (alignment === 'stretched') {
				options.button_width = 'full';
				options.button_pos = '';
			} else {
				options.button_pos = alignment;
			}
			options.nospace = $('#essb-sw-nospace').is(':checked') ? 'true' : '';

			// Step 5: Counters
			var showCounters = $('#essb-sw-show-counters').is(':checked');
			options.show_counter = showCounters ? 'true' : '';
			if (showCounters) {
				options.counter_pos = $('[name="essb-sw-counter-pos"]:checked').val();
				options.total_counter_pos = $('[name="essb-sw-total-counter-pos"]:checked').val();
				options.active_internal_counters = $('#essb-sw-internal-counters').is(':checked') ? 'true' : '';
			} else {
				options.counter_pos = '';
				options.total_counter_pos = '';
				options.active_internal_counters = '';
			}

			// Step 6: Positions
			var postTypes = [];
			$('.essb-sw-type-selected').each(function() {
				postTypes.push($(this).data('id'));
			});
			options.display_in_types = postTypes;

			var contentTop = $('.essb-sw-pos-row[data-pos="top"] .essb-sw-pos-check').is(':checked');
			var contentBottom = $('.essb-sw-pos-row[data-pos="bottom"] .essb-sw-pos-check').is(':checked');
			if (contentTop && contentBottom) {
				options.content_position = 'content_both';
			} else if (contentTop) {
				options.content_position = 'content_top';
			} else if (contentBottom) {
				options.content_position = 'content_bottom';
			} else {
				options.content_position = '';
			}

			var btnPositions = [];
			['sidebar', 'sharebutton'].forEach(function(pos) {
				if ($('.essb-sw-pos-row[data-pos="' + pos + '"] .essb-sw-pos-check').is(':checked')) {
					btnPositions.push(pos);
				}
			});
			options.button_position = btnPositions;

			// Sidebar position settings
			var sidebarChecked = btnPositions.indexOf('sidebar') !== -1;
			if (sidebarChecked) {
				options.sidebar_activate = 'true';
				options.sidebar_template = $('[name="essb-sw-template"]:checked').val();
				options.sidebar_button_style = 'icon';
				if (showCounters) {
					options.sidebar_show_counter = 'true';
					options.sidebar_counter_pos = 'hidden';
					options.sidebar_total_counter_pos = $('[name="essb-sw-total-counter-pos"]:checked').val();
				} else {
					options.sidebar_show_counter = '';
					options.sidebar_counter_pos = '';
					options.sidebar_total_counter_pos = '';
				}
			} else {
				options.sidebar_activate = '';
				options.sidebar_template = '';
				options.sidebar_button_style = '';
				options.sidebar_show_counter = '';
				options.sidebar_counter_pos = '';
				options.sidebar_total_counter_pos = '';
			}

			// Share Button display method - enable/disable
			var shareButtonChecked = btnPositions.indexOf('sharebutton') !== -1;
			options.deactivate_method_sharebutton = shareButtonChecked ? '' : 'true';

			var shareBottomChecked = $('.essb-sw-pos-row[data-pos="sharebottom"] .essb-sw-pos-check').is(':checked');
			options.functions_mode_mobile_auto_responsive = shareBottomChecked ? ['sharebottom'] : [];

			// Calculate mobile share bar button count
			if (shareBottomChecked) {
				var mobileNetworks = [];
				$('#essb-sw-network-grid .essb-sw-network-selected').each(function() {
					mobileNetworks.push($(this).data('id'));
				});
				if (mobileNetworks.length === 0) {
					$('#essb-sw-network-grid .essb-sw-network-item').each(function() {
						mobileNetworks.push($(this).data('id'));
					});
				}
				if (enableVisibility) {
					var hiddenMobile = [];
					$('.essb-sw-visibility-mobile').each(function() {
						if ($(this).is(':checked')) {
							hiddenMobile.push($(this).data('id'));
						}
					});
					mobileNetworks = mobileNetworks.filter(function(id) {
						return hiddenMobile.indexOf(id) === -1;
					});
				}
				var mobileCount = mobileNetworks.length;
				options.mobile_sharebuttonsbar_count = String(mobileCount < 6 ? mobileCount : 6);
			}

			['top', 'bottom', 'sidebar', 'sharebutton'].forEach(function(pos) {
				var chip = $('.essb-sw-pos-row[data-pos="' + pos + '"] .essb-sw-device-chip-active');
				var device = chip.length ? chip.data('device') : 'any';
				options[pos + '_mobile_deactivate'] = (device === 'desktop') ? 'true' : '';
				options[pos + '_tablet_deactivate'] = (device === 'desktop') ? 'true' : '';
				options[pos + '_desktop_deactivate'] = (device === 'mobile') ? 'true' : '';
			});

			// Step 7: Pinterest
			var pinEnabled = $('#essb-sw-pinterest-enable').is(':checked');
			options.pinterest_images = pinEnabled ? 'true' : '';
			if (pinEnabled) {
				options.pinterest_position = $('#essb-sw-pinterest-position-grid .essb-sw-position-selected').data('value') || 'top-left';
				options.pinterest_visibility = $('[name="essb-sw-pin-visibility"]:checked').val();
				options.pinterest_nolinks = $('#essb-sw-pin-nolinks').is(':checked') ? 'true' : '';
				options.pinterest_lazyload = $('#essb-sw-pin-lazyload').is(':checked') ? 'true' : '';
			} else {
				options.pinterest_position = '';
				options.pinterest_visibility = '';
				options.pinterest_nolinks = '';
				options.pinterest_lazyload = '';
			}

			var $toast = $('<div class="essb-df-toast essb-df-toast-saving"><span class="essb-df-spinner"></span> <?php echo esc_js(esc_html__('Saving', 'essb')); ?>&hellip;</div>').appendTo('body');
			setTimeout(function() {
				$toast.addClass('essb-df-toast-show');
			}, 10);

			$.ajax({
				type: "POST",
				url: ajaxurl,
				data: {
					action: 'essb_advanced_options',
					cmd: 'save',
					group: 'essb_options',
					advanced_options: options,
					essb_advancedoptions_token: $('#essb_advancedoptions_token').val()
				},
				success: function() {
					swClose();
					$toast.removeClass('essb-df-toast-saving').addClass('essb-df-toast-success').html('<?php echo esc_js(esc_html__('Settings saved', 'essb')); ?>');
					setTimeout(function() {
						$toast.removeClass('essb-df-toast-show');
						setTimeout(function() {
							$toast.remove();
						}, 300);
					}, 1500);
					btn.prop('disabled', false).text('<?php echo esc_js(esc_html__('Apply Configuration', 'essb')); ?>');
				},
				error: function() {
					$toast.removeClass('essb-df-toast-saving').addClass('essb-df-toast-success').html('<?php echo esc_js(esc_html__('Error saving settings', 'essb')); ?>');
					setTimeout(function() {
						$toast.removeClass('essb-df-toast-show');
						setTimeout(function() {
							$toast.remove();
						}, 300);
					}, 2000);
					btn.prop('disabled', false).text('<?php echo esc_js(esc_html__('Apply Configuration', 'essb')); ?>');
				}
			});
		});

		// ======== Initial Config Wizard ========
		(function() {
			'use strict';

			var currentPane = 'welcome';
			var totalSteps = 11;

			var el = {
				closeBtn: document.getElementById('essb-iw-close'),
				prevBtn: document.getElementById('essb-iw-prev'),
				nextBtn: document.getElementById('essb-iw-next'),
				stepLabel: document.getElementById('stepLabel'),
				dots: document.querySelectorAll('.essb-iw-dot'),
				panes: document.querySelectorAll('.essb-iw-pane'),
			};

			function showPane(pane) {
				currentPane = pane;
				el.panes.forEach(function(p) {
					p.classList.toggle('essb-iw-pane-active', p.getAttribute('data-pane') == pane);
				});
				if (pane === 'welcome') {
					el.stepLabel.textContent = 'Welcome';
					el.prevBtn.disabled = true;
					el.nextBtn.style.display = '';
					el.nextBtn.textContent = 'Next \u2192';
					el.nextBtn.className = 'essb-iw-btn essb-iw-btn-primary';
					el.dots.forEach(function(d) {
						d.classList.remove('essb-iw-dot-active');
					});
				} else {
					var step = parseInt(pane, 10);
					el.stepLabel.textContent = 'Step ' + step + ' of ' + totalSteps;
					el.prevBtn.disabled = false;
					if (step === totalSteps) {
						el.nextBtn.style.display = '';
						el.nextBtn.textContent = 'Save Settings';
						el.nextBtn.className = 'essb-iw-btn essb-iw-btn-primary';
					} else {
						el.nextBtn.style.display = '';
						el.nextBtn.textContent = 'Next \u2192';
						el.nextBtn.className = 'essb-iw-btn essb-iw-btn-primary';
					}
					el.dots.forEach(function(d) {
						d.classList.toggle('essb-iw-dot-active', d.getAttribute('data-step') == step);
					});
				}
			}

			function nextStep() {
				if (currentPane === 'welcome') {
					showPane('1');
				} else {
					var step = parseInt(currentPane, 10);
					if (step === totalSteps) {
						saveSettings();
					} else if (step < totalSteps) {
						showPane(String(step + 1));
					}
				}
			}

			function saveSettings() {
				var modeCard = document.querySelector('#modeGrid .essb-iw-mode-selected');
				var cssMode = modeCard ? modeCard.getAttribute('data-mode') : '';
				var ssoEnabled = document.getElementById('enableSSO').checked;
				var ssoImage = document.getElementById('ssoDefaultImage').value || '';

				var countersEnabled = document.getElementById('enableCounters').checked;
				var internalCounters = document.getElementById('enableInternalCounters').checked;
				var avoidNegative = document.getElementById('enableAvoidNegative').checked;
				var analyticsEnabled = document.getElementById('enableAnalytics').checked;
				var pinterestPro = document.getElementById('enablePinterestPro').checked;
				var quotesEnabled = document.getElementById('enableQuotes').checked;
				var shortUrlsEnabled = document.getElementById('enableShortUrls').checked;
				var profilesEnabled = document.getElementById('enableProfiles').checked;
				var subscribeEnabled = document.getElementById('enableSubscribe').checked;
				var customButtons = document.getElementById('enableCustomButtons').checked;
				var customPositions = document.getElementById('enableCustomPositions').checked;
				var translateEnabled = document.getElementById('enableTranslate').checked;

				var options = {};
				options.css_mode = cssMode;
				options.deactivate_module_shareoptimize = ssoEnabled ? '' : 'true';
				options.opengraph_tags = ssoEnabled ? 'true' : '';
				options.sso_default_image = ssoImage;

				options.deactivate_share_counters = countersEnabled ? '' : 'true';
				options.deactivate_postcount = countersEnabled ? '' : 'true';
				options.deactivate_ansp = countersEnabled ? '' : 'true';
				options.deactivate_ssr = countersEnabled ? '' : 'true';
				options.deactivate_fakecounters = 'true';
				options.deactivate_expertcounters = 'true';

				if (countersEnabled && internalCounters) {
					options.active_internal_counters = 'true';
					options.active_internal_counters_advanced = 'true';
				} else {
					options.active_internal_counters = 'false';
					options.active_internal_counters_advanced = 'false';
				}

				if (countersEnabled && avoidNegative) {
					options.social_proof_enable = 'true';
					options.button_counter_hidden_till = '10';
					options.total_counter_hidden_till = '10';
				} else {
					options.social_proof_enable = 'false';
				}

				options.deactivate_module_analytics = analyticsEnabled ? '' : 'true';
				options.stats_active = analyticsEnabled ? 'true' : 'false';

				options.deactivate_module_pinterestpro = pinterestPro ? '' : 'true';
				options.pinterest_images = pinterestPro ? 'true' : 'false';
				if (pinterestPro) {
					options.pinterest_lazyload = 'true';
				}

				options.deactivate_ctt = quotesEnabled ? '' : 'true';
				options.deactivate_module_shorturl = shortUrlsEnabled ? '' : 'true';
				options.deactivate_module_profiles = profilesEnabled ? '' : 'true';
				options.deactivate_module_subscribe = subscribeEnabled ? '' : 'true';
				options.deactivate_custombuttons = customButtons ? '' : 'true';
				options.deactivate_custompositions = customPositions ? '' : 'true';
				options.deactivate_module_translate = translateEnabled ? '' : 'true';

				// Always-applied defaults
				var alwaysTrue = [
					'deactivate_fakecounters', 'deactivate_expertcounters',
					'deactivate_module_aftershare', 'deactivate_module_google_analytics',
					'deactivate_module_affiliate', 'deactivate_module_message',
					'deactivate_module_metrics', 'deactivate_stylelibrary',
					'deactivate_method_float', 'deactivate_method_postfloat',
					'deactivate_method_topbar', 'deactivate_method_bottombar',
					'deactivate_method_popup', 'deactivate_method_flyin',
					'deactivate_method_heroshare', 'deactivate_method_postbar',
					'deactivate_method_point', 'deactivate_method_image',
					'deactivate_method_followme', 'deactivate_method_corner',
					'deactivate_method_booster', 'deactivate_method_sharebutton',
					'deactivate_method_except', 'deactivate_method_widget',
					'deactivate_method_advanced_mobile', 'deactivate_module_followers',
					'deactivate_module_instagram', 'deactivate_module_conversions',
					'deactivate_method_integrations', 'deactivate_settings_post_type'
				];
				for (var i = 0; i < alwaysTrue.length; i++) {
					options[alwaysTrue[i]] = 'true';
				}
				options.deactivate_method_woocommerce = <?php echo class_exists('WooCommerce') ? "'false'" : "'true'"; ?>;

				var alwaysFalse = [
					'activate_customcode_share_methods', 'activate_fake',
					'activate_hooks', 'activate_minimal'
				];
				for (var i = 0; i < alwaysFalse.length; i++) {
					options[alwaysFalse[i]] = 'false';
				}

				var iwNextBtn = document.getElementById('essb-iw-next');
				iwNextBtn.disabled = true;
				iwNextBtn.textContent = '<?php echo esc_js(esc_html__('Saving', 'essb')); ?>...';

				var $toast = $('<div class="essb-df-toast essb-df-toast-saving"><span class="essb-df-spinner"></span> <?php echo esc_js(esc_html__('Saving', 'essb')); ?>&hellip;</div>').appendTo('body');
				setTimeout(function() {
					$toast.addClass('essb-df-toast-show');
				}, 10);

				$.ajax({
					type: "POST",
					url: ajaxurl,
					data: {
						action: 'essb_advanced_options',
						cmd: 'save',
						group: 'essb_options',
						advanced_options: options,
						essb_advancedoptions_token: $('#essb_advancedoptions_token').val()
					},
					success: function() {
						document.getElementById('essb-iw-wizard').style.display = 'none';
						document.getElementById('essb-iw-overlay').style.display = 'none';
						$toast.removeClass('essb-df-toast-saving essb-df-toast-success').html('<?php echo esc_js(esc_html__('Page is reloading', 'essb')); ?>&hellip;');
						setTimeout(function() {
							location.reload();
						}, 800);
					},
					error: function() {
						$toast.removeClass('essb-df-toast-saving').addClass('essb-df-toast-success').html('<?php echo esc_js(esc_html__('Error saving settings', 'essb')); ?>');
						setTimeout(function() {
							$toast.removeClass('essb-df-toast-show');
							setTimeout(function() {
								$toast.remove();
							}, 300);
						}, 2000);
						iwNextBtn.disabled = false;
						iwNextBtn.textContent = 'Save Settings';
					}
				});
			}

			function prevStep() {
				if (currentPane === '1') {
					showPane('welcome');
				} else if (currentPane !== 'welcome') {
					var step = parseInt(currentPane, 10);
					if (step > 1) showPane(String(step - 1));
				}
			}

			el.nextBtn.addEventListener('click', function(e) {
				e.preventDefault();
				nextStep();
			});
			el.prevBtn.addEventListener('click', function(e) {
				e.preventDefault();
				prevStep();
			});
			el.closeBtn.addEventListener('click', function(e) {
				e.preventDefault();
				document.getElementById('essb-iw-wizard').style.display = 'none';
				document.getElementById('essb-iw-overlay').style.display = 'none';
			});

			document.getElementById('essb-df-open-iwizard').addEventListener('click', function(e) {
				e.preventDefault();
				document.getElementById('essb-iw-wizard').style.display = 'flex';
				document.getElementById('essb-iw-overlay').style.display = 'block';
				showPane('welcome');
			});

			el.dots.forEach(function(dot) {
				dot.addEventListener('click', function(e) {
					var step = parseInt(this.getAttribute('data-step'), 10);
					if (step >= 1 && step <= parseInt(currentPane, 10)) showPane(String(step));
				});
			});

			document.getElementById('modeGrid').addEventListener('click', function(e) {
				var card = e.target.closest('.essb-iw-mode-card');
				if (!card) return;
				this.querySelectorAll('.essb-iw-mode-card').forEach(function(c) {
					c.classList.remove('essb-iw-mode-selected');
				});
				card.classList.add('essb-iw-mode-selected');
			});

			document.getElementById('enableSSO').addEventListener('change', function() {
				document.getElementById('ssoOptions').style.display = this.checked ? 'block' : 'none';
			});

			document.getElementById('ssoSelectImage').addEventListener('click', function(e) {
				e.preventDefault();
				if (typeof wp !== 'undefined' && wp.media) {
					var frame = wp.media({
						title: 'Select Social Image',
						button: {
							text: 'Use this image'
						},
						multiple: false
					});
					frame.on('select', function() {
						var attachment = frame.state().get('selection').first().toJSON();
						document.getElementById('ssoDefaultImage').value = attachment.url;
						var preview = document.getElementById('ssoImagePreview');
						document.getElementById('ssoPreviewImg').src = attachment.url;
						preview.style.display = 'inline-block';
					});
					frame.open();
				}
			});
			document.getElementById('ssoRemoveImage').addEventListener('click', function() {
				document.getElementById('ssoDefaultImage').value = '';
				document.getElementById('ssoImagePreview').style.display = 'none';
				document.getElementById('ssoPreviewImg').src = '';
			});

			document.getElementById('enableCounters').addEventListener('change', function() {
				document.getElementById('countersOptions').style.display = this.checked ? 'block' : 'none';
			});

			(function() {
				var installNonce = document.getElementById('essb-iw-wizard').getAttribute('data-install-nonce');

				document.querySelectorAll('[data-install]').forEach(function(btn) {
					btn.addEventListener('click', function(e) {
						e.preventDefault();
						var slug = this.getAttribute('data-install');
						var originalText = this.textContent;

						this.disabled = true;
						this.textContent = 'Processing\u2026';

						var $btn = this;

						$.ajax({
							url: ajaxurl,
							type: 'POST',
							data: {
								action: 'essb_install_free_addon',
								slug: slug,
								nonce: installNonce
							},
							success: function(response) {
								if (response.success) {
									$btn.textContent = 'Active';
									$btn.className = 'essb-iw-btn essb-iw-btn-sm essb-iw-btn-success';
									$btn.disabled = true;

									var $toast = $('<div class="essb-df-toast essb-df-toast-success">Plugin installed and activated</div>').appendTo('body');
									setTimeout(function() {
										$toast.addClass('essb-df-toast-show');
									}, 10);
									setTimeout(function() {
										$toast.removeClass('essb-df-toast-show');
										setTimeout(function() {
											$toast.remove();
										}, 300);
									}, 2000);
								} else {
									var msg = response.data && response.data.message ? response.data.message : 'Installation failed';
									$btn.textContent = originalText;
									$btn.disabled = false;

									var $toast = $('<div class="essb-df-toast essb-df-toast-error">' + msg + '</div>').appendTo('body');
									setTimeout(function() {
										$toast.addClass('essb-df-toast-show');
									}, 10);
									setTimeout(function() {
										$toast.removeClass('essb-df-toast-show');
										setTimeout(function() {
											$toast.remove();
										}, 300);
									}, 3000);
								}
							},
							error: function() {
								$btn.textContent = originalText;
								$btn.disabled = false;

								var $toast = $('<div class="essb-df-toast essb-df-toast-error">Connection error. Please try again.</div>').appendTo('body');
								setTimeout(function() {
									$toast.addClass('essb-df-toast-show');
								}, 10);
								setTimeout(function() {
									$toast.removeClass('essb-df-toast-show');
									setTimeout(function() {
										$toast.remove();
									}, 300);
								}, 3000);
							}
						});
					});
				});
			})();

			if ($('.essb-head-positionsbtn').length) {
				$('.essb-head-positionsbtn').on('click', function(e) {
					e.preventDefault();

					var settings = 'features',
						title = 'Manage Plugin Features';

					essbAdvancedOptions.settings = settings;
					essbAdvancedOptions.requireReload = true;
					essbAdvancedOptions.withoutSave = false;

					essbAdvancedOptions.correctWidthAndPosition('');

					$('#essb-advancedoptions .advancedoptions-save').show();

					$('#essb-advanced-options-form').html('');
					$('.advancedoptions-modal').fadeIn();
					$('#essb-advancedoptions').fadeIn();
					$('#advancedOptions-title').text(title);
					essbAdvancedOptions.read('get', {
						'settings': settings,
						'loadingOptions': {}
					}, function(content) {
						essbAdvancedOptions.load(content);

						$('.features-container .navigation [data-tab="display"]').trigger('click');
					});
				});
			}

		})();

		if ($('#essb-activate').length) {
			$('#essb-activate').on('click', function(e) {
				e.preventDefault();

				var purchase_code = $('#essb-automatic-purchase-code').val();

				if (purchase_code == '') {
					var $toast = $('<div class="essb-df-toast essb-df-toast-error">Missing Purchase Code - Please fill purchase code before processing with activation</div>').appendTo('body');
					setTimeout(function() {
						$toast.addClass('essb-df-toast-show');
					}, 10);
					setTimeout(function() {
						$toast.removeClass('essb-df-toast-show');
						setTimeout(function() {
							$toast.remove();
						}, 300);
					}, 3000);
					return;
				}

				$('#essb-cc-preloader').fadeIn(100);
				$.ajax({
					type: "POST",
					url: essb_api_url,
					data: {
						'code': purchase_code,
						'domain': essb_api_activate_domain,
						'url': essb_api_activate_url
					},
					success: function(data) {
						$('#essb-cc-preloader').fadeOut(400);
						if (typeof(data) == "string") data = JSON.parse(data);

						var code = data['code'] || '';
						var activation_message = data['message'] || '';
						var activation_code = data['hash'] || '';

						if (parseInt(code) > 0 && parseInt(code) < 10) {
							$.ajax({
								type: "POST",
								url: ajaxurl,
								data: {
									'action': 'essb_process_activation',
									'purchase_code': purchase_code,
									'activation_code': activation_code,
									'activation_state': 'activate',
									'activate_nonce': essb_api_security_token
								},
								success: function() {
									var $toast = $('<div class="essb-df-toast essb-df-toast-success">Activation Successful — Thank you! Reloading page.</div>').appendTo('body');
									setTimeout(function() {
										$toast.addClass('essb-df-toast-show');
									}, 10);
									setTimeout(function() {
										window.location.reload();
									}, 1000);
								}
							});
						} else {
							var $toast = $('<div class="essb-df-toast essb-df-toast-error">Activation Error - ' + activation_message + '</div>').appendTo('body');
							setTimeout(function() {
								$toast.addClass('essb-df-toast-show');
							}, 10);
							setTimeout(function() {
								$toast.removeClass('essb-df-toast-show');
								setTimeout(function() {
									$toast.remove();
								}, 300);
							}, 4000);
						}
					},
					error: function() {
						$('#essb-cc-preloader').fadeOut(400);
						var $toast = $('<div class="essb-df-toast essb-df-toast-error">Connection Error - Cannot connect to registration server. Please try again.</div>').appendTo('body');
						setTimeout(function() {
							$toast.addClass('essb-df-toast-show');
						}, 10);
						setTimeout(function() {
							$toast.removeClass('essb-df-toast-show');
							setTimeout(function() {
								$toast.remove();
							}, 300);
						}, 4000);
					}
				});
			});
		}

		if ($('#essb-deactivate').length) {
			$('#essb-deactivate').on('click', function(e) {
				e.preventDefault();

				if (typeof essb_used_purchasecode === 'undefined' || essb_used_purchasecode == '') {
					var $toast = $('<div class="essb-df-toast essb-df-toast-error">Missing Purchase Code - Please fill purchase code before processing with deactivation</div>').appendTo('body');
					setTimeout(function() {
						$toast.addClass('essb-df-toast-show');
					}, 10);
					setTimeout(function() {
						$toast.removeClass('essb-df-toast-show');
						setTimeout(function() {
							$toast.remove();
						}, 300);
					}, 3000);
					return;
				}

				$('#essb-cc-preloader').fadeIn(100);
				$.ajax({
					type: "POST",
					url: essb_api_url + 'deactivate.php',
					data: {
						'hash': essb_used_activationcode,
						'code': essb_used_purchasecode
					},
					success: function(data) {
						$('#essb-cc-preloader').fadeOut(400);
						if (typeof(data) == "string") data = JSON.parse(data);

						var code = data['code'] || '';
						var activation_message = data['message'] || '';

						if (parseInt(code) > 0 && parseInt(code) < 10) {
							$.ajax({
								type: "POST",
								url: ajaxurl,
								data: {
									'action': 'essb_process_activation',
									'activation_state': 'deactivate',
									'activate_nonce': essb_api_security_token
								},
								success: function() {
									var $toast = $('<div class="essb-df-toast essb-df-toast-success">Deactivation Successful — Reloading page.</div>').appendTo('body');
									setTimeout(function() {
										$toast.addClass('essb-df-toast-show');
									}, 10);
									setTimeout(function() {
										window.location.reload();
									}, 1000);
								}
							});
						} else {
							var $toast = $('<div class="essb-df-toast essb-df-toast-error">Deactivation Error - ' + activation_message + '</div>').appendTo('body');
							setTimeout(function() {
								$toast.addClass('essb-df-toast-show');
							}, 10);
							setTimeout(function() {
								$toast.removeClass('essb-df-toast-show');
								setTimeout(function() {
									$toast.remove();
								}, 300);
							}, 4000);
						}
					},
					error: function() {
						$('#essb-cc-preloader').fadeOut(400);
						var $toast = $('<div class="essb-df-toast essb-df-toast-error">Connection Error - Cannot connect to registration server. Please try again.</div>').appendTo('body');
						setTimeout(function() {
							$toast.addClass('essb-df-toast-show');
						}, 10);
						setTimeout(function() {
							$toast.removeClass('essb-df-toast-show');
							setTimeout(function() {
								$toast.remove();
							}, 300);
						}, 4000);
					}
				});
			});
		}

		// Featured Add-Ons Carousel
		(function() {
			var track = document.getElementById('essb-df-carousel-track');
			var dots = document.querySelectorAll('.essb-df-carousel-dot');
			var slides = document.querySelectorAll('.essb-df-carousel-slide');
			if (!track || !slides.length) return;
			var current = 0;
			var interval;

			function showSlide(index) {
				slides.forEach(function(s, i) {
					s.style.display = i === index ? 'grid' : 'none';
				});
				dots.forEach(function(d, i) {
					d.classList.toggle('active', i === index);
				});
				current = index;
			}

			function nextSlide() {
				showSlide((current + 1) % slides.length);
			}

			function startRotation() {
				if (interval) clearInterval(interval);
				interval = setInterval(nextSlide, 12000);
			}

			dots.forEach(function(dot) {
				dot.addEventListener('click', function(e) {
					e.preventDefault();
					showSlide(parseInt(this.getAttribute('data-slide')));
					startRotation();
				});
			});

			showSlide(0);
			startRotation();
		})();
	});
</script>