← All changes | includes/admin/layouts/woo-builder-page.php +1927 -469 51.1.44 → 51.1.87 View file →

		@@ -1,7 +1,8 @@
1	1	<?php
2	2	/**
3		- * WooCommerce Builder admin page - Modern Design.
	3	+ * WooCommerce Builder Admin Page
	4	+ * Clean, Premium style inspired design
4	5	*
5	6	* @package King_Addons
6	7	*/
7	8
		@@ -11,123 +12,378 @@
11	12
12	13	// Include shared dark theme support
13	14	include KING_ADDONS_PATH . 'includes/admin/shared/dark-theme.php';
14	15
15		-wp_enqueue_style(KING_ADDONS_ASSETS_UNIQUE_KEY . '-woo-builder-style');
	16	+$can_use_pro = king_addons_can_use_pro();
16	17
17		-$can_use_pro = king_addons_can_use_pro();
	18	+// Get WooCommerce categories and tags for conditions
	19	+$product_categories = get_terms([
	20	+ 'taxonomy' => 'product_cat',
	21	+ 'hide_empty' => false,
	22	+]);
	23	+if (is_wp_error($product_categories)) {
	24	+ $product_categories = [];
	25	+}
18	26
19		-$type_filter = isset($_GET['ka_woo_type']) ? sanitize_text_field(wp_unslash($_GET['ka_woo_type'])) : '';
20		-$status_filter = isset($_GET['ka_woo_status']) ? sanitize_text_field(wp_unslash($_GET['ka_woo_status'])) : '';
21		-$enabled_filter = isset($_GET['ka_woo_enabled']) ? sanitize_text_field(wp_unslash($_GET['ka_woo_enabled'])) : '';
	27	+$product_tags = get_terms([
	28	+ 'taxonomy' => 'product_tag',
	29	+ 'hide_empty' => false,
	30	+]);
	31	+if (is_wp_error($product_tags)) {
	32	+ $product_tags = [];
	33	+}
22	34
	35	+// Get all products for specific product conditions
	36	+$products = get_posts([
	37	+ 'post_type' => 'product',
	38	+ 'posts_per_page' => 100,
	39	+ 'post_status' => 'publish',
	40	+ 'orderby' => 'title',
	41	+ 'order' => 'ASC',
	42	+]);
	43	+
	44	+/**
	45	+ * Helper function to deactivate conflicting templates.
	46	+ * Only deactivates templates with EXACTLY the same condition.
	47	+ *
	48	+ * @param int $current_template_id The template being activated.
	49	+ * @param string $template_type The template type.
	50	+ * @param array $new_conditions The new conditions being set.
	51	+ */
	52	+function ka_woo_deactivate_conflicting_templates(int $current_template_id, string $template_type, array $new_conditions): void {
	53	+ $new_condition_type = $new_conditions['rules'][0]['type'] ?? 'all';
	54	+ $new_condition_values = $new_conditions['rules'][0]['values'] ?? [];
	55	+
	56	+ // Get all templates of the same type
	57	+ $query = new WP_Query([
	58	+ 'post_type' => 'elementor_library',
	59	+ 'posts_per_page' => -1,
	60	+ 'post_status' => ['publish', 'draft'],
	61	+ 'post__not_in' => [$current_template_id],
	62	+ 'meta_query' => [
	63	+ [
	64	+ 'key' => 'ka_woo_template_type',
	65	+ 'value' => $template_type,
	66	+ ],
	67	+ ],
	68	+ ]);
	69	+
	70	+ foreach ($query->posts as $post) {
	71	+ $conditions = get_post_meta($post->ID, 'ka_woo_conditions', true);
	72	+ if (empty($conditions['enabled'])) {
	73	+ continue;
	74	+ }
	75	+
	76	+ $existing_type = $conditions['rules'][0]['type'] ?? 'all';
	77	+ $existing_values = $conditions['rules'][0]['values'] ?? [];
	78	+
	79	+ // Check if conditions conflict (same type and overlapping values)
	80	+ $should_deactivate = false;
	81	+
	82	+ $new_is_global = in_array($new_condition_type, ['all', 'always'], true);
	83	+ $existing_is_global = in_array($existing_type, ['all', 'always'], true);
	84	+
	85	+ if ($new_is_global && $existing_is_global) {
	86	+ // Both are "all" - conflict
	87	+ $should_deactivate = true;
	88	+ } elseif ($new_condition_type === $existing_type && !empty($new_condition_values) && !empty($existing_values)) {
	89	+ // Same type with specific values - check for overlap
	90	+ $overlap = array_intersect($new_condition_values, $existing_values);
	91	+ if (!empty($overlap)) {
	92	+ $should_deactivate = true;
	93	+ }
	94	+ }
	95	+
	96	+ if ($should_deactivate) {
	97	+ $conditions['enabled'] = false;
	98	+ update_post_meta($post->ID, 'ka_woo_conditions', $conditions);
	99	+ }
	100	+ }
	101	+}
	102	+
	103	+// Handle create template action - create post and redirect to Elementor editor
	104	+if (!empty($_GET['ka_woo_create']) && !empty($_GET['ka_woo_template_type'])) {
	105	+ $template_type = sanitize_key($_GET['ka_woo_template_type']);
	106	+ $valid_types = ['single_product', 'product_archive', 'cart', 'checkout', 'my_account'];
	107	+
	108	+ if (in_array($template_type, $valid_types, true) && current_user_can('manage_options') && wp_verify_nonce(sanitize_text_field(wp_unslash($_GET['_wpnonce'] ?? '')), 'ka_woo_create_' . $template_type)) {
	109	+
	110	+ // Check Pro restriction
	111	+ if (!$can_use_pro && in_array($template_type, ['cart', 'checkout', 'my_account'], true)) {
	112	+ wp_safe_redirect(remove_query_arg(['ka_woo_create', 'ka_woo_template_type', '_wpnonce']));
	113	+ exit;
	114	+ }
	115	+
	116	+ // Get type label for title
	117	+ $type_labels = [
	118	+ 'single_product' => __('Single Product', 'king-addons'),
	119	+ 'product_archive' => __('Shop & Category', 'king-addons'),
	120	+ 'cart' => __('Cart', 'king-addons'),
	121	+ 'checkout' => __('Checkout', 'king-addons'),
	122	+ 'my_account' => __('My Account', 'king-addons'),
	123	+ ];
	124	+
	125	+ // Create new post
	126	+ $post_id = wp_insert_post([
	127	+ 'post_title' => $type_labels[$template_type] ?? __('WooCommerce Template', 'king-addons'),
	128	+ 'post_type' => 'elementor_library',
	129	+ 'post_status' => 'draft',
	130	+ ]);
	131	+
	132	+ if ($post_id && !is_wp_error($post_id)) {
	133	+ // Set template type meta
	134	+ update_post_meta($post_id, 'ka_woo_template_type', $template_type);
	135	+
	136	+ // Use 'page' as Elementor template type - this ensures Elementor editor works
	137	+ // Our custom document type may not be properly supported
	138	+ update_post_meta($post_id, '_elementor_template_type', 'page');
	139	+
	140	+ // Set default conditions (enabled by default)
	141	+ $default_rule_type = in_array($template_type, ['cart', 'checkout', 'my_account'], true) ? 'always' : 'all';
	142	+ $default_conditions = [
	143	+ 'enabled' => true,
	144	+ 'priority' => 10,
	145	+ 'rules' => [
	146	+ [
	147	+ 'type' => $default_rule_type,
	148	+ 'values' => [],
	149	+ ],
	150	+ ],
	151	+ ];
	152	+ update_post_meta($post_id, 'ka_woo_conditions', $default_conditions);
	153	+
	154	+ // Set _elementor_edit_mode so Elementor knows to use builder
	155	+ update_post_meta($post_id, '_elementor_edit_mode', 'builder');
	156	+
	157	+ // Initialize empty Elementor data
	158	+ update_post_meta($post_id, '_elementor_data', '[]');
	159	+
	160	+ // Redirect to Elementor editor
	161	+ $elementor_url = add_query_arg([
	162	+ 'post' => $post_id,
	163	+ 'action' => 'elementor',
	164	+ ], admin_url('post.php'));
	165	+
	166	+ wp_safe_redirect($elementor_url);
	167	+ exit;
	168	+ }
	169	+ }
	170	+ wp_safe_redirect(remove_query_arg(['ka_woo_create', 'ka_woo_template_type', '_wpnonce']));
	171	+ exit;
	172	+}
	173	+
	174	+// Handle toggle action
23	175	if (!empty($_GET['ka_woo_toggle']) && !empty($_GET['template_id'])) {
24	176	$template_id = (int) $_GET['template_id'];
25	177	if (current_user_can('manage_options') && wp_verify_nonce(sanitize_text_field(wp_unslash($_GET['_wpnonce'] ?? '')), 'ka_woo_toggle_' . $template_id)) {
26	178	$conditions = get_post_meta($template_id, 'ka_woo_conditions', true);
27	179	if (!is_array($conditions)) {
28		- $conditions = [];
	180	+ $conditions = ['enabled' => false, 'rules' => [['type' => 'all', 'values' => []]]];
29	181	}
30		- $conditions['enabled'] = empty($conditions['enabled']);
	182	+
	183	+ $will_enable = empty($conditions['enabled']);
	184	+ $conditions['enabled'] = $will_enable;
31	185	update_post_meta($template_id, 'ka_woo_conditions', $conditions);
	186	+
	187	+ // If enabling, deactivate conflicting templates
	188	+ if ($will_enable) {
	189	+ $template_type = get_post_meta($template_id, 'ka_woo_template_type', true);
	190	+ ka_woo_deactivate_conflicting_templates($template_id, $template_type, $conditions);
	191	+ }
32	192	}
33	193	wp_safe_redirect(remove_query_arg(['ka_woo_toggle', 'template_id', '_wpnonce']));
34	194	exit;
35	195	}
36	196
37		-$types = [
38		- 'single_product' => esc_html__('Single Product', 'king-addons'),
39		- 'product_archive' => esc_html__('Product Archive', 'king-addons'),
40		- 'cart' => esc_html__('Cart', 'king-addons'),
41		- 'checkout' => esc_html__('Checkout', 'king-addons'),
42		- 'my_account' => esc_html__('My Account', 'king-addons'),
43		-];
	197	+// Handle conditions update action (Pro only)
	198	+if (!empty($_POST['ka_woo_update_conditions']) && !empty($_POST['template_id'])) {
	199	+ $template_id = (int) $_POST['template_id'];
	200	+ if (current_user_can('manage_options') && wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'ka_woo_conditions')) {
	201	+
	202	+ // Only allow in Pro
	203	+ if ($can_use_pro) {
	204	+ $condition_type = sanitize_key($_POST['condition_type'] ?? 'all');
	205	+ $condition_values = [];
	206	+
	207	+ if (!empty($_POST['condition_values']) && is_array($_POST['condition_values'])) {
	208	+ $condition_values = array_map('intval', $_POST['condition_values']);
	209	+ }
44	210
45		-$endpoints_option_name = 'ka_woo_account_endpoints';
46		-$saved_endpoints = get_option($endpoints_option_name, []);
	211	+ $template_type = (string) get_post_meta($template_id, 'ka_woo_template_type', true);
	212	+ $allowed_types = [];
	213	+ if ('single_product' === $template_type) {
	214	+ $allowed_types = ['all', 'product_cat', 'product_tag', 'specific_product'];
	215	+ } elseif ('product_archive' === $template_type) {
	216	+ $allowed_types = ['all', 'shop', 'product_cat', 'product_tag'];
	217	+ } elseif (in_array($template_type, ['cart', 'checkout', 'my_account'], true)) {
	218	+ $allowed_types = ['always'];
	219	+ }
47	220
48		-if (
49		- isset($_POST['ka_account_endpoints_save'])
50		- && current_user_can('manage_options')
51		- && check_admin_referer('ka_account_endpoints')
52		-) {
53		- $endpoints_payload = $_POST['ka_endpoints'] ?? [];
54		- $new_endpoints = [];
	221	+ if (!in_array($condition_type, $allowed_types, true)) {
	222	+ $condition_type = $allowed_types[0] ?? 'all';
	223	+ }
55	224
56		- foreach ($endpoints_payload as $slug => $data) {
57		- $slug = sanitize_title($slug);
58		- if ('' === $slug) {
59		- continue;
	225	+ // If a "specific" selector is chosen but nothing selected, treat it as global.
	226	+ if (in_array($condition_type, ['product_cat', 'product_tag', 'specific_product'], true) && empty($condition_values)) {
	227	+ $condition_type = 'all';
	228	+ }
	229	+
	230	+ $conditions = get_post_meta($template_id, 'ka_woo_conditions', true);
	231	+ if (!is_array($conditions)) {
	232	+ $conditions = ['enabled' => false];
	233	+ }
	234	+
	235	+ $conditions['rules'] = [
	236	+ [
	237	+ 'type' => $condition_type,
	238	+ 'values' => $condition_values,
	239	+ ],
	240	+ ];
	241	+
	242	+ update_post_meta($template_id, 'ka_woo_conditions', $conditions);
	243	+
	244	+ // If enabled, deactivate conflicting templates
	245	+ if (!empty($conditions['enabled'])) {
	246	+ $template_type = get_post_meta($template_id, 'ka_woo_template_type', true);
	247	+ ka_woo_deactivate_conflicting_templates($template_id, $template_type, $conditions);
	248	+ }
60	249	}
61		- $new_endpoints[$slug] = [
62		- 'label' => sanitize_text_field($data['label'] ?? $slug),
63		- 'enabled' => !empty($data['enabled']),
64		- 'position' => isset($data['position']) ? (int) $data['position'] : 20,
65		- 'template_id' => isset($data['template_id']) ? (int) $data['template_id'] : 0,
66		- 'is_custom' => !empty($data['is_custom']),
67		- 'confirm' => !empty($data['confirm']),
68		- 'roles' => array_filter(array_map('sanitize_text_field', explode(',', $data['roles'] ?? ''))),
69		- ];
70	250	}
	251	+ wp_safe_redirect(add_query_arg('page', 'king-addons-woo-builder', admin_url('admin.php')));
	252	+ exit;
	253	+}
71	254
72		- if (!empty($_POST['ka_new_endpoint']['slug'])) {
73		- $slug = sanitize_title($_POST['ka_new_endpoint']['slug']);
74		- if ($slug) {
75		- $new_endpoints[$slug] = [
76		- 'label' => sanitize_text_field($_POST['ka_new_endpoint']['label'] ?? $slug),
77		- 'enabled' => !empty($_POST['ka_new_endpoint']['enabled']),
78		- 'position' => (int) ($_POST['ka_new_endpoint']['position'] ?? 30),
79		- 'template_id' => (int) ($_POST['ka_new_endpoint']['template_id'] ?? 0),
80		- 'is_custom' => true,
81		- 'confirm' => !empty($_POST['ka_new_endpoint']['confirm']),
82		- 'roles' => array_filter(array_map('sanitize_text_field', explode(',', $_POST['ka_new_endpoint']['roles'] ?? ''))),
83		- ];
	255	+// Handle duplicate action
	256	+if (!empty($_GET['ka_woo_duplicate']) && !empty($_GET['template_id'])) {
	257	+ $template_id = (int) $_GET['template_id'];
	258	+ if (current_user_can('manage_options') && wp_verify_nonce(sanitize_text_field(wp_unslash($_GET['_wpnonce'] ?? '')), 'ka_woo_duplicate_' . $template_id)) {
	259	+ $original_post = get_post($template_id);
	260	+ if ($original_post && 'elementor_library' === $original_post->post_type) {
	261	+ // Create duplicate
	262	+ $new_post_id = wp_insert_post([
	263	+ 'post_title' => $original_post->post_title . ' ' . __('(Copy)', 'king-addons'),
	264	+ 'post_type' => 'elementor_library',
	265	+ 'post_status' => 'draft',
	266	+ 'post_content' => $original_post->post_content,
	267	+ ]);
	268	+
	269	+ if ($new_post_id && !is_wp_error($new_post_id)) {
	270	+ // Copy all meta
	271	+ $meta = get_post_meta($template_id);
	272	+ foreach ($meta as $key => $values) {
	273	+ foreach ($values as $value) {
	274	+ add_post_meta($new_post_id, $key, maybe_unserialize($value));
	275	+ }
	276	+ }
	277	+ // Set as inactive by default
	278	+ $conditions = get_post_meta($new_post_id, 'ka_woo_conditions', true);
	279	+ if (!is_array($conditions)) {
	280	+ $conditions = [];
	281	+ }
	282	+ $conditions['enabled'] = false;
	283	+ update_post_meta($new_post_id, 'ka_woo_conditions', $conditions);
	284	+ }
84	285	}
85	286	}
	287	+ wp_safe_redirect(remove_query_arg(['ka_woo_duplicate', 'template_id', '_wpnonce']));
	288	+ exit;
	289	+}
86	290
87		- update_option($endpoints_option_name, $new_endpoints);
88		- flush_rewrite_rules(false);
89		- $saved_endpoints = $new_endpoints;
90		- add_settings_error('ka_account_endpoints', 'saved', esc_html__('My Account endpoints saved.', 'king-addons'), 'updated');
	291	+// Handle rename action (AJAX)
	292	+if (!empty($_POST['ka_woo_rename']) && !empty($_POST['template_id']) && !empty($_POST['new_title'])) {
	293	+ if (current_user_can('manage_options') && wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'ka_woo_rename')) {
	294	+ $template_id = (int) $_POST['template_id'];
	295	+ $new_title = sanitize_text_field(wp_unslash($_POST['new_title']));
	296	+ wp_update_post([
	297	+ 'ID' => $template_id,
	298	+ 'post_title' => $new_title,
	299	+ ]);
	300	+ }
	301	+ wp_safe_redirect(remove_query_arg(['ka_woo_rename', 'template_id', 'new_title', '_wpnonce']));
	302	+ exit;
91	303	}
92	304
93		-$default_account_items = function_exists('wc_get_account_menu_items') ? wc_get_account_menu_items() : [];
	305	+// Handle change type action
	306	+if (!empty($_GET['ka_woo_change_type']) && !empty($_GET['template_id']) && !empty($_GET['new_type'])) {
	307	+ $template_id = (int) $_GET['template_id'];
	308	+ $new_type = sanitize_key($_GET['new_type']);
	309	+ $valid_types = ['single_product', 'product_archive', 'cart', 'checkout', 'my_account'];
	310	+
	311	+ if (current_user_can('manage_options') && wp_verify_nonce(sanitize_text_field(wp_unslash($_GET['_wpnonce'] ?? '')), 'ka_woo_change_type_' . $template_id)) {
	312	+ if (in_array($new_type, $valid_types, true)) {
	313	+ // Check Pro restriction for target type
	314	+ if ($can_use_pro || !in_array($new_type, ['cart', 'checkout', 'my_account'], true)) {
	315	+ update_post_meta($template_id, 'ka_woo_template_type', $new_type);
	316	+ }
	317	+ }
	318	+ }
	319	+ wp_safe_redirect(remove_query_arg(['ka_woo_change_type', 'template_id', 'new_type', '_wpnonce']));
	320	+ exit;
	321	+}
94	322
95		-$rule_labels = [
96		- 'always' => esc_html__('Always', 'king-addons'),
97		- 'all_products' => esc_html__('All products', 'king-addons'),
98		- 'product_in' => esc_html__('Products', 'king-addons'),
99		- 'products' => esc_html__('Products', 'king-addons'),
100		- 'product_cat_in' => esc_html__('Product categories', 'king-addons'),
101		- 'product_categories' => esc_html__('Product categories', 'king-addons'),
102		- 'product_tag_in' => esc_html__('Product tags', 'king-addons'),
103		- 'product_tags' => esc_html__('Product tags', 'king-addons'),
104		- 'product_type_in' => esc_html__('Product types', 'king-addons'),
105		- 'product_types' => esc_html__('Product types', 'king-addons'),
106		- 'is_shop' => esc_html__('Shop page', 'king-addons'),
107		- 'shop' => esc_html__('Shop page', 'king-addons'),
108		- 'product_cat_archive_in' => esc_html__('Product category archives', 'king-addons'),
109		- 'product_cat_archives' => esc_html__('Product category archives', 'king-addons'),
110		- 'cart' => esc_html__('Cart page', 'king-addons'),
111		- 'checkout' => esc_html__('Checkout page', 'king-addons'),
112		- 'my_account' => esc_html__('My Account page', 'king-addons'),
	323	+// Handle delete action
	324	+if (!empty($_GET['ka_woo_delete']) && !empty($_GET['template_id'])) {
	325	+ $template_id = (int) $_GET['template_id'];
	326	+ if (current_user_can('manage_options') && wp_verify_nonce(sanitize_text_field(wp_unslash($_GET['_wpnonce'] ?? '')), 'ka_woo_delete_' . $template_id)) {
	327	+ wp_trash_post($template_id);
	328	+ }
	329	+ wp_safe_redirect(remove_query_arg(['ka_woo_delete', 'template_id', '_wpnonce']));
	330	+ exit;
	331	+}
	332	+
	333	+// Template types
	334	+$types = [
	335	+ 'single_product' => [
	336	+ 'label' => esc_html__('Single Product', 'king-addons'),
	337	+ 'icon' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>',
	338	+ 'desc' => esc_html__('Customize product pages', 'king-addons'),
	339	+ ],
	340	+ 'product_archive' => [
	341	+ 'label' => esc_html__('Shop & Category', 'king-addons'),
	342	+ 'icon' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>',
	343	+ 'desc' => esc_html__('Design shop & category pages', 'king-addons'),
	344	+ ],
	345	+ 'cart' => [
	346	+ 'label' => esc_html__('Cart', 'king-addons'),
	347	+ 'icon' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>',
	348	+ 'desc' => esc_html__('Custom cart layout', 'king-addons'),
	349	+ 'pro' => true,
	350	+ ],
	351	+ 'checkout' => [
	352	+ 'label' => esc_html__('Checkout', 'king-addons'),
	353	+ 'icon' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>',
	354	+ 'desc' => esc_html__('Streamlined checkout', 'king-addons'),
	355	+ 'pro' => true,
	356	+ ],
	357	+ 'my_account' => [
	358	+ 'label' => esc_html__('My Account', 'king-addons'),
	359	+ 'icon' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
	360	+ 'desc' => esc_html__('Account dashboard', 'king-addons'),
	361	+ 'pro' => true,
	362	+ ],
113	363	];
114	364
	365	+// Create links for each type - now uses our custom handler that creates the post and redirects to Elementor
115	366	$create_links = [];
116		-foreach ($types as $slug => $label) {
117		- $create_links[$slug] = add_query_arg(
118		- [
119		- 'post_type' => 'elementor_library',
120		- 'ka_woo_template_type' => $slug,
121		- ],
122		- admin_url('post-new.php')
	367	+foreach ($types as $slug => $data) {
	368	+ $create_links[$slug] = wp_nonce_url(
	369	+ add_query_arg(
	370	+ [
	371	+ 'page' => 'king-addons-woo-builder',
	372	+ 'ka_woo_create' => '1',
	373	+ 'ka_woo_template_type' => $slug,
	374	+ ],
	375	+ admin_url('admin.php')
	376	+ ),
	377	+ 'ka_woo_create_' . $slug
123	378	);
124	379	}
125	380
	381	+// Get existing templates
126	382	$query = new WP_Query([
127	383	'post_type' => 'elementor_library',
128	384	'posts_per_page' => -1,
129		- 'post_status' => ['publish', 'draft', 'pending', 'future'],
	385	+ 'post_status' => ['publish', 'draft'],
130	386	'meta_query' => [
131	387	[
132	388	'key' => 'ka_woo_template_type',
133	389	'compare' => 'EXISTS',
		@@ -135,494 +391,1696 @@
135	391	],
136	392	]);
137	393
138	394	$templates = [];
139		-
140	395	foreach ($query->posts as $post) {
141	396	$type = get_post_meta($post->ID, 'ka_woo_template_type', true);
142		- if (empty($type)) {
143		- continue;
144		- }
	397	+ if (empty($type)) continue;
145	398
146	399	$conditions = get_post_meta($post->ID, 'ka_woo_conditions', true);
	400	+ if (!is_array($conditions)) {
	401	+ $conditions = ['enabled' => false, 'rules' => [['type' => 'all', 'values' => []]]];
	402	+ }
147	403	$enabled = !empty($conditions['enabled']);
148		- $priority = isset($conditions['priority']) ? (int) $conditions['priority'] : 10;
149		- $rules = is_array($conditions['rules'] ?? null) ? $conditions['rules'] : [];
	404	+ $pro_locked = (!$can_use_pro && in_array($type, ['cart', 'checkout', 'my_account'], true));
	405	+
	406	+ // Parse condition for display
	407	+ $condition_type = $conditions['rules'][0]['type'] ?? 'all';
	408	+ $condition_values = $conditions['rules'][0]['values'] ?? [];
	409	+ $condition_label = __('All', 'king-addons');
150	410
151		- $rule_strings = [];
152		- foreach ($rules as $rule) {
153		- $rule_type = $rule['type'] ?? '';
154		- $values = is_array($rule['values'] ?? null) ? $rule['values'] : [];
155		- $label_text = $rule_labels[$rule_type] ?? $rule_type;
156		- $values_display = '';
157		- if (!empty($values)) {
158		- $values_display = implode(', ', array_map('esc_html', array_map('strval', $values)));
	411	+ if (in_array($condition_type, ['always'], true)) {
	412	+ $condition_label = __('Always', 'king-addons');
	413	+ } elseif (in_array($condition_type, ['shop', 'is_shop'], true)) {
	414	+ $condition_label = __('Shop Page Only', 'king-addons');
	415	+ } elseif ('all' === $condition_type) {
	416	+ if ('single_product' === $type) {
	417	+ $condition_label = __('All Products', 'king-addons');
	418	+ } elseif ('product_archive' === $type) {
	419	+ $condition_label = __('All Categories', 'king-addons');
	420	+ } else {
	421	+ $condition_label = __('Always', 'king-addons');
159	422	}
160		- $rule_strings[] = $values_display ? sprintf('%s: %s', $label_text, $values_display) : $label_text;
	423	+ } elseif (!empty($condition_values)) {
	424	+ switch ($condition_type) {
	425	+ case 'product_cat':
	426	+ $cat_names = [];
	427	+ foreach ($condition_values as $cat_id) {
	428	+ $term = get_term($cat_id, 'product_cat');
	429	+ if ($term && !is_wp_error($term)) {
	430	+ $cat_names[] = $term->name;
	431	+ }
	432	+ }
	433	+ $condition_label = !empty($cat_names) ? implode(', ', $cat_names) : __('Categories', 'king-addons');
	434	+ break;
	435	+ case 'product_tag':
	436	+ $tag_names = [];
	437	+ foreach ($condition_values as $tag_id) {
	438	+ $term = get_term($tag_id, 'product_tag');
	439	+ if ($term && !is_wp_error($term)) {
	440	+ $tag_names[] = $term->name;
	441	+ }
	442	+ }
	443	+ $condition_label = !empty($tag_names) ? implode(', ', $tag_names) : __('Tags', 'king-addons');
	444	+ break;
	445	+ case 'specific_product':
	446	+ $product_titles = [];
	447	+ foreach ($condition_values as $product_id) {
	448	+ $product_titles[] = get_the_title($product_id);
	449	+ }
	450	+ $condition_label = !empty($product_titles) ? implode(', ', $product_titles) : __('Specific Products', 'king-addons');
	451	+ break;
	452	+ }
161	453	}
162	454
163		- if (empty($rule_strings)) {
164		- $rule_strings[] = $rule_labels['always'];
165		- }
166		-
167		- if ($type_filter && $type !== $type_filter) {
168		- continue;
169		- }
170		-
171		- if ($status_filter && $post->post_status !== $status_filter) {
172		- continue;
173		- }
174		-
175		- if ($enabled_filter === 'yes' && !$enabled) {
176		- continue;
177		- }
178		-
179		- if ($enabled_filter === 'no' && $enabled) {
180		- continue;
181		- }
182		-
183		- $pro_locked = (!$can_use_pro && in_array($type, ['cart', 'checkout', 'my_account'], true));
184		-
185	455	$templates[] = [
186	456	'id' => $post->ID,
187	457	'title' => get_the_title($post),
188	458	'type' => $type,
189	459	'enabled' => $enabled,
190		- 'priority' => $priority,
191		- 'rules_text' => implode('; ', $rule_strings),
192	460	'status' => $post->post_status,
193		- 'date' => get_the_modified_date('', $post),
	461	+ 'date' => get_the_modified_date('M j, Y', $post),
194	462	'pro_locked' => $pro_locked,
	463	+ 'condition_type' => $condition_type,
	464	+ 'condition_values' => $condition_values,
	465	+ 'condition_label' => $condition_label,
195	466	];
196	467	}
197	468
198		-usort($templates, static function ($a, $b) {
199		- return $a['priority'] <=> $b['priority'];
200		-});
	469	+// Condition options based on template type
	470	+$condition_options = [
	471	+ 'single_product' => [
	472	+ 'all' => __('All Products', 'king-addons'),
	473	+ 'product_cat' => __('Specific Categories', 'king-addons'),
	474	+ 'product_tag' => __('Specific Tags', 'king-addons'),
	475	+ 'specific_product' => __('Specific Products', 'king-addons'),
	476	+ ],
	477	+ 'product_archive' => [
	478	+ 'all' => __('All Categories', 'king-addons'),
	479	+ 'shop' => __('Shop Page Only', 'king-addons'),
	480	+ 'product_cat' => __('Specific Categories (or Archives)', 'king-addons'),
	481	+ 'product_tag' => __('Specific Tags', 'king-addons'),
	482	+ ],
	483	+ 'cart' => [
	484	+ 'always' => __('Always', 'king-addons'),
	485	+ ],
	486	+ 'checkout' => [
	487	+ 'always' => __('Always', 'king-addons'),
	488	+ ],
	489	+ 'my_account' => [
	490	+ 'always' => __('Always', 'king-addons'),
	491	+ ],
	492	+];
	493	+
	494	+// Get Elementor edit URL
	495	+if (!function_exists('ka_woo_get_elementor_edit_url')) {
	496	+ function ka_woo_get_elementor_edit_url(int $post_id): string {
	497	+ return add_query_arg(['post' => $post_id, 'action' => 'elementor'], admin_url('post.php'));
	498	+ }
	499	+}
201	500	?>
202	501	<style>
203		-/* Modern WooCommerce Builder Styles */
204		-.ka-woo-wrap {
205		- max-width: 1400px;
206		- margin: 20px 20px 20px 0;
207		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	502	+/* ================================================
	503	+ WooCommerce Builder - Pro Design
	504	+ ================================================ */
	505	+
	506	+:root {
	507	+ --ka-wb-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
	508	+ --ka-wb-bg: #f5f5f7;
	509	+ --ka-wb-surface: #ffffff;
	510	+ --ka-wb-text: #1d1d1f;
	511	+ --ka-wb-text-secondary: #86868b;
	512	+ --ka-wb-border: rgba(0, 0, 0, 0.06);
	513	+ --ka-wb-accent: #0071e3;
	514	+ --ka-wb-accent-hover: #0077ed;
	515	+ --ka-wb-success: #34c759;
	516	+ --ka-wb-warning: #ff9500;
	517	+ --ka-wb-radius: 20px;
	518	+ --ka-wb-radius-sm: 12px;
	519	+ --ka-wb-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	520	+ --ka-wb-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.1);
	521	+ --ka-wb-transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
208	522	}
209		-.ka-woo-wrap * { box-sizing: border-box; }
210	523
	524	+body.ka-v3-dark {
	525	+ --ka-wb-bg: #000000;
	526	+ --ka-wb-surface: #1c1c1e;
	527	+ --ka-wb-text: #f5f5f7;
	528	+ --ka-wb-text-secondary: #98989d;
	529	+ --ka-wb-border: rgba(255, 255, 255, 0.1);
	530	+ --ka-wb-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
	531	+ --ka-wb-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4);
	532	+}
	533	+
	534	+body.toplevel_page_king-addons-woo-builder #wpcontent,
	535	+body.toplevel_page_king-addons-woo-builder #wpbody,
	536	+body.toplevel_page_king-addons-woo-builder #wpbody-content,
	537	+body.king-addons_page_king-addons-woo-builder #wpcontent,
	538	+body.king-addons_page_king-addons-woo-builder #wpbody,
	539	+body.king-addons_page_king-addons-woo-builder #wpbody-content {
	540	+ background: var(--ka-wb-bg) !important;
	541	+ padding: 0 !important;
	542	+}
	543	+
	544	+.ka-wb {
	545	+ font-family: var(--ka-wb-font);
	546	+ max-width: 1100px;
	547	+ margin: 0 auto;
	548	+ padding: 48px 40px 80px;
	549	+ color: var(--ka-wb-text);
	550	+ -webkit-font-smoothing: antialiased;
	551	+}
	552	+
	553	+.ka-wb * { box-sizing: border-box; }
	554	+
211	555	/* Header */
212		-.ka-woo-header {
213		- background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
	556	+.ka-wb-header {
	557	+ display: flex;
	558	+ justify-content: space-between;
	559	+ align-items: flex-start;
	560	+ margin-bottom: 56px;
	561	+}
	562	+
	563	+.ka-wb-header-content {
	564	+ display: flex;
	565	+ align-items: flex-start;
	566	+ gap: 16px;
	567	+}
	568	+
	569	+.ka-wb-header-titles {
	570	+ display: flex;
	571	+ flex-direction: column;
	572	+ gap: 8px;
	573	+ min-width: 0;
	574	+}
	575	+
	576	+.ka-wb-header-titles h1 {
	577	+ font-size: 56px;
	578	+ font-weight: 700;
	579	+ letter-spacing: -0.025em;
	580	+ margin: 0;
	581	+ line-height: 1;
	582	+}
	583	+
	584	+.ka-wb-header-titles p {
	585	+ font-size: 21px;
	586	+ color: var(--ka-wb-text-secondary);
	587	+ margin: 0;
	588	+ font-weight: 400;
	589	+}
	590	+
	591	+.ka-wb-title-icon {
	592	+ width: 76px;
	593	+ height: 76px;
	594	+ display: inline-flex;
	595	+ align-items: center;
	596	+ justify-content: center;
	597	+ border-radius: 22px;
	598	+ background: rgba(0, 113, 227, 0.12);
	599	+ color: var(--ka-wb-accent);
	600	+ flex: 0 0 auto;
	601	+}
	602	+body.ka-v3-dark .ka-wb-title-icon {
	603	+ background: rgba(10, 132, 255, 0.18);
	604	+ color: #0a84ff;
	605	+}
	606	+.ka-wb-title-icon svg { width: 36px; height: 36px; }
	607	+
	608	+.ka-wb-title-text {
	609	+ background: linear-gradient(135deg, var(--ka-wb-text) 0%, var(--ka-wb-text-secondary) 100%);
	610	+ -webkit-background-clip: text;
	611	+ -webkit-text-fill-color: transparent;
	612	+ background-clip: text;
	613	+}
	614	+
	615	+.ka-wb-header-content p {
	616	+ font-size: 21px;
	617	+ color: var(--ka-wb-text-secondary);
	618	+ margin: 0;
	619	+ font-weight: 400;
	620	+}
	621	+
	622	+.ka-wb-header-actions {
	623	+ display: flex;
	624	+ align-items: center;
	625	+ gap: 12px;
	626	+}
	627	+
	628	+/* Template Types Grid */
	629	+.ka-wb-types {
	630	+ display: grid;
	631	+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	632	+ gap: 16px;
	633	+ margin-bottom: 64px;
	634	+}
	635	+
	636	+.ka-wb-type {
	637	+ position: relative;
	638	+ display: flex;
	639	+ flex-direction: column;
	640	+ align-items: center;
	641	+ padding: 32px 20px;
	642	+ background: var(--ka-wb-surface);
	643	+ border: 1px solid var(--ka-wb-border);
	644	+ border-radius: var(--ka-wb-radius);
	645	+ text-decoration: none;
	646	+ color: var(--ka-wb-text);
	647	+ transition: var(--ka-wb-transition);
	648	+ cursor: pointer;
	649	+ overflow: hidden;
	650	+}
	651	+
	652	+.ka-wb-type:hover {
	653	+ transform: translateY(-4px);
	654	+ box-shadow: var(--ka-wb-shadow-hover);
	655	+ border-color: var(--ka-wb-accent);
	656	+}
	657	+
	658	+.ka-wb-type:hover .ka-wb-type-icon {
	659	+ transform: scale(1.1);
	660	+ color: var(--ka-wb-accent);
	661	+}
	662	+
	663	+.ka-wb-type.is-locked {
	664	+ opacity: 0.6;
	665	+ cursor: not-allowed;
	666	+}
	667	+
	668	+.ka-wb-type.is-locked:hover {
	669	+ transform: none;
	670	+ box-shadow: none;
	671	+ border-color: var(--ka-wb-border);
	672	+}
	673	+
	674	+.ka-wb-type.is-locked .ka-wb-type-icon {
	675	+ transform: none;
	676	+ color: var(--ka-wb-text-secondary);
	677	+}
	678	+
	679	+.ka-wb-type-icon {
	680	+ width: 48px;
	681	+ height: 48px;
	682	+ margin-bottom: 16px;
	683	+ color: var(--ka-wb-text-secondary);
	684	+ transition: var(--ka-wb-transition);
	685	+}
	686	+
	687	+.ka-wb-type-icon svg {
	688	+ width: 100%;
	689	+ height: 100%;
	690	+}
	691	+
	692	+.ka-wb-type-label {
	693	+ font-size: 17px;
	694	+ font-weight: 600;
	695	+ margin-bottom: 4px;
	696	+ text-align: center;
	697	+}
	698	+
	699	+.ka-wb-type-desc {
	700	+ font-size: 13px;
	701	+ color: var(--ka-wb-text-secondary);
	702	+ text-align: center;
	703	+}
	704	+
	705	+.ka-wb-type-badge {
	706	+ position: absolute;
	707	+ top: 12px;
	708	+ right: 12px;
	709	+ padding: 4px 10px;
	710	+ font-size: 11px;
	711	+ font-weight: 600;
	712	+ background: linear-gradient(135deg, #0071e3, #5856d6);
214	713	color: #fff;
215		- padding: 25px 30px;
216		- border-radius: 12px;
217		- margin-bottom: 25px;
	714	+ border-radius: 20px;
	715	+ text-transform: uppercase;
	716	+ letter-spacing: 0.5px;
	717	+}
	718	+
	719	+/* Section */
	720	+.ka-wb-section {
	721	+ margin-bottom: 48px;
	722	+}
	723	+
	724	+.ka-wb-section-header {
218	725	display: flex;
	726	+ justify-content: space-between;
219	727	align-items: center;
220		- justify-content: space-between;
	728	+ margin-bottom: 24px;
221	729	}
222		-.ka-woo-header h1 { margin: 0; font-size: 24px; font-weight: 600; color: #fff; }
223		-.ka-woo-header-content { display: flex; align-items: center; gap: 16px; }
224		-.ka-woo-header-icon {
225		- width: 48px; height: 48px;
226		- background: rgba(255,255,255,0.2);
227		- border-radius: 12px;
228		- display: flex; align-items: center; justify-content: center;
	730	+
	731	+.ka-wb-section-title {
	732	+ font-size: 28px;
	733	+ font-weight: 600;
	734	+ letter-spacing: -0.01em;
	735	+ margin: 0;
229	736	}
230		-.ka-woo-header-icon .dashicons { font-size: 24px; width: 24px; height: 24px; color: #fff; }
231		-.ka-woo-header p { margin: 4px 0 0; font-size: 14px; opacity: 0.9; }
232	737
233		-/* Notices */
234		-.ka-woo-wrap .notice { margin: 0 0 20px; border-radius: 8px; }
	738	+.ka-wb-section-count {
	739	+ font-size: 15px;
	740	+ color: var(--ka-wb-text-secondary);
	741	+ background: var(--ka-wb-surface);
	742	+ padding: 6px 14px;
	743	+ border-radius: 20px;
	744	+ border: 1px solid var(--ka-wb-border);
	745	+}
235	746
236		-/* Cards */
237		-.ka-card {
238		- background: #fff; border-radius: 12px;
239		- box-shadow: 0 1px 3px rgba(0,0,0,0.08);
240		- margin-bottom: 20px; overflow: hidden;
	747	+/* Templates List */
	748	+.ka-wb-templates {
	749	+ background: var(--ka-wb-surface);
	750	+ border-radius: var(--ka-wb-radius);
	751	+ border: 1px solid var(--ka-wb-border);
241	752	}
242		-.ka-card-header {
243		- background: #f8fafc; padding: 16px 24px;
244		- border-bottom: 1px solid #e2e8f0;
245		- display: flex; align-items: center; gap: 10px;
	753	+
	754	+.ka-wb-template {
	755	+ display: grid;
	756	+ grid-template-columns: auto 1fr auto auto;
	757	+ align-items: center;
	758	+ gap: 20px;
	759	+ padding: 20px 24px;
	760	+ border-bottom: 1px solid var(--ka-wb-border);
	761	+ transition: var(--ka-wb-transition);
246	762	}
247		-.ka-card-header h2 { margin: 0; font-size: 15px; font-weight: 600; color: #1e293b; }
248		-.ka-card-header .dashicons { color: #7c3aed; font-size: 18px; width: 18px; height: 18px; }
249		-.ka-card-body { padding: 20px 24px; }
250	763
251		-/* Template Type Buttons */
252		-.ka-type-btns {
253		- display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
	764	+.ka-wb-template:last-child {
	765	+ border-bottom: none;
254	766	}
255		-.ka-type-btn {
256		- display: inline-flex; align-items: center; gap: 8px;
257		- background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
258		- color: #fff; border: none; padding: 10px 18px;
259		- border-radius: 8px; font-size: 13px; font-weight: 500;
260		- text-decoration: none; cursor: pointer;
261		- transition: transform 0.2s, box-shadow 0.2s;
	767	+
	768	+.ka-wb-template:hover {
	769	+ background: rgba(0, 113, 227, 0.03);
262	770	}
263		-.ka-type-btn:hover {
264		- transform: translateY(-1px);
265		- box-shadow: 0 4px 12px rgba(124,58,237,0.3);
	771	+
	772	+body.ka-v3-dark .ka-wb-template:hover {
	773	+ background: rgba(255, 255, 255, 0.03);
	774	+}
	775	+
	776	+.ka-wb-template-info {
	777	+ display: flex;
	778	+ flex-direction: column;
	779	+ gap: 4px;
	780	+ min-width: 0;
	781	+}
	782	+
	783	+.ka-wb-template-title {
	784	+ font-size: 16px;
	785	+ font-weight: 500;
	786	+ color: var(--ka-wb-text);
	787	+ text-decoration: none;
	788	+ display: inline-flex;
	789	+ align-items: center;
	790	+ gap: 8px;
	791	+ min-width: 0;
	792	+ transition: var(--ka-wb-transition);
	793	+}
	794	+
	795	+.ka-wb-template-title-icon {
	796	+ width: 18px;
	797	+ height: 18px;
	798	+ display: inline-flex;
	799	+ align-items: center;
	800	+ justify-content: center;
	801	+ color: var(--ka-wb-text-secondary);
	802	+ flex: 0 0 auto;
	803	+}
	804	+.ka-wb-template-title-icon svg { width: 18px; height: 18px; }
	805	+.ka-wb-template-title-text {
	806	+ min-width: 0;
	807	+ white-space: nowrap;
	808	+ overflow: hidden;
	809	+ text-overflow: ellipsis;
	810	+}
	811	+
	812	+.ka-wb-template-title:hover {
	813	+ color: var(--ka-wb-accent);
	814	+}
	815	+
	816	+.ka-wb-template-meta {
	817	+ display: flex;
	818	+ align-items: center;
	819	+ gap: 12px;
	820	+ font-size: 13px;
	821	+ color: var(--ka-wb-text-secondary);
	822	+}
	823	+
	824	+.ka-wb-template-type {
	825	+ display: inline-flex;
	826	+ align-items: center;
	827	+ gap: 6px;
	828	+}
	829	+
	830	+.ka-wb-template-type::before {
	831	+ content: '';
	832	+ width: 6px;
	833	+ height: 6px;
	834	+ background: var(--ka-wb-accent);
	835	+ border-radius: 50%;
	836	+}
	837	+
	838	+.ka-wb-template-status {
	839	+ display: inline-flex;
	840	+ align-items: center;
	841	+ padding: 6px 14px;
	842	+ font-size: 13px;
	843	+ font-weight: 600;
	844	+ border-radius: 8px;
	845	+ white-space: nowrap;
	846	+ min-width: 80px;
	847	+ justify-content: center;
	848	+ justify-self: start;
	849	+}
	850	+
	851	+.ka-wb-template-status.is-enabled {
	852	+ background: rgba(52, 199, 89, 0.15);
	853	+ color: #30d158;
	854	+}
	855	+
	856	+.ka-wb-template-status.is-disabled {
	857	+ background: rgba(255, 149, 0, 0.15);
	858	+ color: #ff9f0a;
	859	+}
	860	+
	861	+.ka-wb-template-status.is-draft {
	862	+ background: var(--ka-wb-border);
	863	+ color: var(--ka-wb-text-secondary);
	864	+}
	865	+
	866	+/* Condition Badge */
	867	+.ka-wb-template-condition {
	868	+ display: inline-flex;
	869	+ align-items: center;
	870	+ gap: 8px;
	871	+ padding: 10px 18px;
	872	+ min-height: 40px;
	873	+ font-size: 14px;
	874	+ font-weight: 500;
	875	+ border-radius: 980px;
	876	+ background: rgba(0, 113, 227, 0.1);
	877	+ color: var(--ka-wb-accent);
	878	+ max-width: 240px;
	879	+ overflow: hidden;
	880	+ text-overflow: ellipsis;
	881	+ white-space: nowrap;
	882	+ border: none;
	883	+ cursor: pointer;
	884	+ transition: var(--ka-wb-transition);
	885	+}
	886	+
	887	+.ka-wb-template-condition:hover {
	888	+ background: rgba(0, 113, 227, 0.18);
	889	+}
	890	+
	891	+.ka-wb-template-condition svg {
	892	+ width: 18px;
	893	+ height: 18px;
	894	+ flex-shrink: 0;
	895	+ opacity: 0.7;
	896	+}
	897	+
	898	+.ka-wb-template-condition.is-pro-locked {
	899	+ opacity: 0.5;
	900	+ cursor: not-allowed;
	901	+}
	902	+
	903	+.ka-wb-template-condition-btn {
	904	+ background: rgba(0, 113, 227, 0.06);
	905	+ border: 1px solid rgba(0, 113, 227, 0.18);
	906	+ color: var(--ka-wb-accent);
	907	+}
	908	+
	909	+.ka-wb-template-condition-btn:hover {
	910	+ border-color: rgba(0, 113, 227, 0.32);
	911	+ color: var(--ka-wb-accent);
	912	+ background: rgba(0, 113, 227, 0.10);
	913	+}
	914	+
	915	+.ka-wb-template-actions {
	916	+ display: flex;
	917	+ align-items: center;
	918	+ gap: 12px;
	919	+}
	920	+
	921	+.ka-wb-btn {
	922	+ display: inline-flex;
	923	+ align-items: center;
	924	+ justify-content: center;
	925	+ gap: 6px;
	926	+ padding: 10px 18px;
	927	+ font-size: 14px;
	928	+ font-weight: 500;
	929	+ text-decoration: none;
	930	+ border-radius: 980px;
	931	+ border: none;
	932	+ cursor: pointer;
	933	+ transition: var(--ka-wb-transition);
	934	+ white-space: nowrap;
	935	+ font-family: inherit;
	936	+}
	937	+
	938	+.ka-wb-btn-primary {
	939	+ background: var(--ka-wb-accent);
266	940	color: #fff;
267	941	}
268		-.ka-type-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }
269	942
270		-/* Filter Bar */
271		-.ka-filter-bar {
272		- background: #fff; border-radius: 12px;
273		- box-shadow: 0 1px 3px rgba(0,0,0,0.08);
274		- padding: 16px 24px; margin-bottom: 20px;
275		- display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	943	+.ka-wb-btn-primary:visited {
	944	+ color: #fff;
276	945	}
277		-.ka-filter-bar select {
278		- padding: 8px 12px; border: 1px solid #e2e8f0;
279		- border-radius: 6px; font-size: 14px; min-width: 140px;
	946	+
	947	+.ka-wb-btn-primary:hover {
	948	+ background: var(--ka-wb-accent-hover);
	949	+ color: #fff;
	950	+ transform: scale(1.02);
280	951	}
281		-.ka-filter-bar select:focus {
282		- outline: none; border-color: #7c3aed;
283		- box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
	952	+
	953	+.ka-wb-btn-secondary {
	954	+ background: rgba(0, 0, 0, 0.04);
	955	+ color: var(--ka-wb-text);
284	956	}
285		-.ka-filter-bar .button { padding: 8px 16px; border-radius: 6px; }
286	957
287		-/* Tables */
288		-.ka-table {
289		- width: 100%; border-collapse: collapse;
	958	+body.ka-v3-dark .ka-wb-btn-secondary {
	959	+ background: rgba(255, 255, 255, 0.08);
290	960	}
291		-.ka-table th {
292		- background: #f8fafc; padding: 12px 16px;
293		- text-align: left; font-size: 12px; font-weight: 600;
294		- color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;
295		- border-bottom: 2px solid #e2e8f0;
	961	+
	962	+.ka-wb-btn-secondary:hover {
	963	+ background: rgba(0, 0, 0, 0.08);
	964	+ color: var(--ka-wb-text);
296	965	}
297		-.ka-table td {
298		- padding: 12px 16px; border-bottom: 1px solid #f1f5f9;
299		- font-size: 14px; color: #334155;
	966	+
	967	+body.ka-v3-dark .ka-wb-btn-secondary:hover {
	968	+ background: rgba(255, 255, 255, 0.12);
300	969	}
301		-.ka-table tbody tr:hover { background: #f8fafc; }
302		-.ka-table a { color: #7c3aed; text-decoration: none; font-weight: 500; }
303		-.ka-table a:hover { text-decoration: underline; }
304		-.ka-table input[type="text"],
305		-.ka-table input[type="number"],
306		-.ka-table select {
307		- padding: 6px 10px; border: 1px solid #e2e8f0;
308		- border-radius: 6px; font-size: 13px;
	970	+
	971	+.ka-wb-btn-ghost {
	972	+ background: transparent;
	973	+ color: var(--ka-wb-accent);
	974	+ padding: 10px 12px;
309	975	}
310		-.ka-table input[type="checkbox"] { width: 16px; height: 16px; }
311	976
312		-/* Badge */
313		-.ka-badge {
314		- display: inline-block; padding: 4px 10px;
315		- border-radius: 20px; font-size: 11px; font-weight: 500;
	977	+.ka-wb-btn-ghost:hover {
	978	+ background: rgba(0, 113, 227, 0.08);
316	979	}
317		-.ka-badge-success { background: #dcfce7; color: #166534; }
318		-.ka-badge-warning { background: #fef3c7; color: #92400e; }
319		-.ka-badge-neutral { background: #f3f4f6; color: #6b7280; }
320		-.ka-badge-pro { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #fff; }
321	980
322		-/* Status */
323		-.ka-status { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
324		-.ka-status-enabled { color: #059669; }
325		-.ka-status-disabled { color: #dc2626; }
	981	+.ka-wb-btn-danger {
	982	+ color: #ff3b30;
	983	+}
326	984
327		-/* Actions */
328		-.ka-actions { display: flex; gap: 8px; }
329		-.ka-action-btn {
330		- padding: 6px 12px; border-radius: 6px;
331		- font-size: 12px; text-decoration: none;
332		- border: 1px solid #e2e8f0; color: #475569;
333		- background: #fff; cursor: pointer;
334		- transition: all 0.2s;
	985	+.ka-wb-btn-danger:hover {
	986	+ background: rgba(255, 59, 48, 0.08);
335	987	}
336		-.ka-action-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
337		-.ka-action-btn-primary { background: #7c3aed; color: #fff; border-color: #7c3aed; }
338		-.ka-action-btn-primary:hover { background: #6d28d9; color: #fff; }
339	988
340		-/* Lock icon */
341		-.ka-lock { color: #dc2626; margin-left: 6px; }
	989	+.ka-wb-btn svg {
	990	+ width: 16px;
	991	+ height: 16px;
	992	+}
342	993
343		-/* Submit section */
344		-.ka-submit {
345		- padding: 20px 24px;
346		- background: #f8fafc; border-top: 1px solid #e2e8f0;
	994	+/* Dropdown Menu */
	995	+.ka-wb-dropdown {
	996	+ position: relative;
347	997	}
348		-.ka-submit .button-primary {
349		- background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
350		- border: none; padding: 10px 24px;
351		- font-size: 14px; font-weight: 500;
352		- border-radius: 8px; cursor: pointer; color: #fff;
353		- transition: transform 0.2s, box-shadow 0.2s;
	998	+
	999	+.ka-wb-dropdown-trigger {
	1000	+ display: flex;
	1001	+ align-items: center;
	1002	+ justify-content: center;
	1003	+ width: 40px;
	1004	+ height: 40px;
	1005	+ border-radius: 10px;
	1006	+ background: transparent;
	1007	+ border: 1px solid transparent;
	1008	+ cursor: pointer;
	1009	+ transition: var(--ka-wb-transition);
	1010	+ color: var(--ka-wb-text-secondary);
354	1011	}
355		-.ka-submit .button-primary:hover {
356		- transform: translateY(-1px);
357		- box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
358		- background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
	1012	+
	1013	+.ka-wb-dropdown-trigger:hover {
	1014	+ background: var(--ka-wb-surface);
	1015	+ border-color: var(--ka-wb-border);
	1016	+ color: var(--ka-wb-text);
359	1017	}
360	1018
361		-/* Empty state */
362		-.ka-empty {
363		- text-align: center; padding: 40px 20px; color: #64748b;
	1019	+.ka-wb-dropdown-trigger svg {
	1020	+ width: 20px;
	1021	+ height: 20px;
364	1022	}
365		-.ka-empty .dashicons { font-size: 48px; width: 48px; height: 48px; opacity: 0.3; margin-bottom: 16px; }
366	1023
367		-/* Pro hint */
368		-.ka-pro-hint { font-size: 12px; color: #64748b; font-style: italic; }
	1024	+.ka-wb-dropdown-menu {
	1025	+ position: absolute;
	1026	+ top: 100%;
	1027	+ right: 0;
	1028	+ z-index: 100;
	1029	+ min-width: 200px;
	1030	+ padding: 8px 0;
	1031	+ background: var(--ka-wb-surface);
	1032	+ border: 1px solid var(--ka-wb-border);
	1033	+ border-radius: var(--ka-wb-radius-sm);
	1034	+ box-shadow: var(--ka-wb-shadow-hover);
	1035	+ opacity: 0;
	1036	+ visibility: hidden;
	1037	+ transform: translateY(-8px);
	1038	+ transition: var(--ka-wb-transition);
	1039	+}
369	1040
370		-/* Responsive */
371		-@media (max-width: 782px) {
372		- .ka-woo-header { flex-direction: column; text-align: center; gap: 16px; }
373		- .ka-filter-bar { flex-direction: column; align-items: stretch; }
374		- .ka-table { display: block; overflow-x: auto; }
375		- .ka-type-btns { flex-direction: column; }
	1041	+.ka-wb-dropdown.is-open .ka-wb-dropdown-menu {
	1042	+ opacity: 1;
	1043	+ visibility: visible;
	1044	+ transform: translateY(4px);
376	1045	}
377	1046
378		-/* Style Filter and Reset buttons */
379		-.ka-filter-bar .button {
380		- background: #334155;
381		- border-color: #475569;
382		- color: #f1f5f9;
383		- padding: 8px 16px;
384		- border-radius: 6px;
	1047	+.ka-wb-dropdown-item {
	1048	+ display: flex;
	1049	+ align-items: center;
	1050	+ gap: 10px;
	1051	+ padding: 10px 16px;
	1052	+ font-size: 14px;
	1053	+ color: var(--ka-wb-text);
	1054	+ text-decoration: none;
385	1055	cursor: pointer;
386		- transition: all 0.2s;
	1056	+ transition: var(--ka-wb-transition);
	1057	+ border: none;
	1058	+ background: none;
	1059	+ width: 100%;
	1060	+ text-align: left;
	1061	+ font-family: inherit;
387	1062	}
388		-.ka-filter-bar .button:hover {
389		- background: #475569;
390		- border-color: #7c3aed;
	1063	+
	1064	+.ka-wb-dropdown-item:hover {
	1065	+ background: var(--ka-wb-border);
	1066	+}
	1067	+
	1068	+.ka-wb-dropdown-item svg {
	1069	+ width: 16px;
	1070	+ height: 16px;
	1071	+ color: var(--ka-wb-text-secondary);
	1072	+ flex-shrink: 0;
	1073	+}
	1074	+
	1075	+.ka-wb-dropdown-item.is-danger {
	1076	+ color: #ff3b30;
	1077	+}
	1078	+
	1079	+.ka-wb-dropdown-item.is-danger svg {
	1080	+ color: #ff3b30;
	1081	+}
	1082	+
	1083	+.ka-wb-dropdown-divider {
	1084	+ height: 1px;
	1085	+ margin: 8px 0;
	1086	+ background: var(--ka-wb-border);
	1087	+}
	1088	+
	1089	+.ka-wb-dropdown-label {
	1090	+ padding: 8px 16px 4px;
	1091	+ font-size: 11px;
	1092	+ font-weight: 600;
	1093	+ color: var(--ka-wb-text-secondary);
	1094	+ text-transform: uppercase;
	1095	+ letter-spacing: 0.5px;
	1096	+}
	1097	+
	1098	+/* Modal */
	1099	+.ka-wb-modal-overlay {
	1100	+ position: fixed;
	1101	+ top: 0;
	1102	+ left: 0;
	1103	+ right: 0;
	1104	+ bottom: 0;
	1105	+ z-index: 100000;
	1106	+ background: rgba(0, 0, 0, 0.5);
	1107	+ display: flex;
	1108	+ align-items: center;
	1109	+ justify-content: center;
	1110	+ opacity: 0;
	1111	+ visibility: hidden;
	1112	+ transition: var(--ka-wb-transition);
	1113	+ padding: 20px;
	1114	+}
	1115	+
	1116	+.ka-wb-modal-overlay.is-open {
	1117	+ opacity: 1;
	1118	+ visibility: visible;
	1119	+}
	1120	+
	1121	+.ka-wb-modal {
	1122	+ width: 100%;
	1123	+ max-width: 420px;
	1124	+ padding: 36px;
	1125	+ background: var(--ka-wb-surface);
	1126	+ border-radius: var(--ka-wb-radius);
	1127	+ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	1128	+ transform: scale(0.95) translateY(10px);
	1129	+ transition: var(--ka-wb-transition);
	1130	+}
	1131	+
	1132	+body.ka-v3-dark .ka-wb-modal {
	1133	+ border: 1px solid var(--ka-wb-border);
	1134	+}
	1135	+
	1136	+.ka-wb-modal-overlay.is-open .ka-wb-modal {
	1137	+ transform: scale(1) translateY(0);
	1138	+}
	1139	+
	1140	+.ka-wb-modal h3 {
	1141	+ font-size: 24px;
	1142	+ font-weight: 600;
	1143	+ margin: 0 0 8px;
	1144	+ color: var(--ka-wb-text);
	1145	+ letter-spacing: -0.02em;
	1146	+}
	1147	+
	1148	+.ka-wb-modal-input {
	1149	+ width: 100%;
	1150	+ padding: 14px 18px;
	1151	+ font-size: 16px;
	1152	+ font-family: inherit;
	1153	+ border: 1px solid var(--ka-wb-border);
	1154	+ border-radius: var(--ka-wb-radius-sm);
	1155	+ background: var(--ka-wb-surface);
	1156	+ color: var(--ka-wb-text);
	1157	+ transition: var(--ka-wb-transition);
	1158	+}
	1159	+
	1160	+body.ka-v3-dark .ka-wb-modal-input {
	1161	+ background: rgba(255, 255, 255, 0.06);
	1162	+}
	1163	+
	1164	+.ka-wb-modal-input:focus {
	1165	+ outline: none;
	1166	+ border-color: var(--ka-wb-accent);
	1167	+ box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
	1168	+}
	1169	+.ka-wb-modal-actions {
	1170	+ display: flex;
	1171	+ gap: 12px;
	1172	+ margin-top: 28px;
	1173	+ justify-content: flex-end;
	1174	+}
	1175	+
	1176	+/* Conditions Modal */
	1177	+.ka-wb-modal.ka-wb-modal-conditions {
	1178	+ max-width: 480px;
	1179	+}
	1180	+
	1181	+.ka-wb-modal-desc {
	1182	+ font-size: 15px;
	1183	+ color: var(--ka-wb-text-secondary);
	1184	+ margin: -8px 0 28px;
	1185	+ line-height: 1.5;
	1186	+}
	1187	+
	1188	+.ka-wb-form-group {
	1189	+ margin-bottom: 24px;
	1190	+}
	1191	+
	1192	+.ka-wb-form-group:last-of-type {
	1193	+ margin-bottom: 0;
	1194	+}
	1195	+
	1196	+.ka-wb-form-label {
	1197	+ display: block;
	1198	+ font-size: 13px;
	1199	+ font-weight: 600;
	1200	+ color: var(--ka-wb-text-secondary);
	1201	+ margin-bottom: 10px;
	1202	+ text-transform: uppercase;
	1203	+ letter-spacing: 0.5px;
	1204	+}
	1205	+
	1206	+.ka-wb-form-select {
	1207	+ width: 100%;
	1208	+ padding: 14px 18px;
	1209	+ font-size: 16px;
	1210	+ font-family: inherit;
	1211	+ border: 1px solid var(--ka-wb-border);
	1212	+ border-radius: var(--ka-wb-radius-sm);
	1213	+ background: var(--ka-wb-surface);
	1214	+ color: var(--ka-wb-text);
	1215	+ transition: var(--ka-wb-transition);
	1216	+ cursor: pointer;
	1217	+ appearance: none;
	1218	+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	1219	+ background-repeat: no-repeat;
	1220	+ background-position: right 16px center;
	1221	+}
	1222	+
	1223	+body.ka-v3-dark .ka-wb-form-select {
	1224	+ background-color: rgba(255, 255, 255, 0.06);
	1225	+}
	1226	+
	1227	+.ka-wb-form-select:focus {
	1228	+ outline: none;
	1229	+ border-color: var(--ka-wb-accent);
	1230	+ box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
	1231	+}
	1232	+
	1233	+.ka-wb-checkbox-list {
	1234	+ max-height: 220px;
	1235	+ overflow-y: auto;
	1236	+ border: 1px solid var(--ka-wb-border);
	1237	+ border-radius: var(--ka-wb-radius-sm);
	1238	+ padding: 8px;
	1239	+ background: var(--ka-wb-surface);
	1240	+}
	1241	+
	1242	+body.ka-v3-dark .ka-wb-checkbox-list {
	1243	+ background: rgba(255, 255, 255, 0.04);
	1244	+}
	1245	+
	1246	+.ka-wb-checkbox-item {
	1247	+ display: flex;
	1248	+ align-items: center;
	1249	+ gap: 12px;
	1250	+ padding: 10px 14px;
	1251	+ border-radius: 8px;
	1252	+ cursor: pointer;
	1253	+ transition: var(--ka-wb-transition);
	1254	+}
	1255	+
	1256	+.ka-wb-checkbox-item:hover {
	1257	+ background: rgba(0, 113, 227, 0.06);
	1258	+}
	1259	+
	1260	+.ka-wb-checkbox-item input[type="checkbox"] {
	1261	+ width: 20px;
	1262	+ height: 20px;
	1263	+ accent-color: var(--ka-wb-accent);
	1264	+ cursor: pointer;
	1265	+ border-radius: 4px;
	1266	+}
	1267	+
	1268	+.ka-wb-checkbox-item span {
	1269	+ font-size: 15px;
	1270	+ color: var(--ka-wb-text);
	1271	+}
	1272	+
	1273	+.ka-wb-pro-badge-inline {
	1274	+ display: inline-flex;
	1275	+ align-items: center;
	1276	+ gap: 4px;
	1277	+ padding: 2px 8px;
	1278	+ font-size: 10px;
	1279	+ font-weight: 600;
	1280	+ background: linear-gradient(135deg, #0071e3, #5856d6);
391	1281	color: #fff;
	1282	+ border-radius: 12px;
	1283	+ text-transform: uppercase;
	1284	+ letter-spacing: 0.5px;
	1285	+ margin-left: 8px;
392	1286	}
	1287	+
	1288	+.ka-wb-modal-locked {
	1289	+ position: static;
	1290	+}
	1291	+
	1292	+.ka-wb-modal-locked::after {
	1293	+ content: '';
	1294	+ position: absolute;
	1295	+ top: 0;
	1296	+ left: 0;
	1297	+ right: 0;
	1298	+ bottom: 0;
	1299	+ background: rgba(var(--ka-wb-surface), 0.8);
	1300	+ backdrop-filter: blur(3px);
	1301	+ z-index: 1;
	1302	+}
	1303	+
	1304	+.ka-wb-modal-locked-overlay {
	1305	+ position: absolute;
	1306	+ top: 50%;
	1307	+ left: 50%;
	1308	+ transform: translate(-50%, -50%);
	1309	+ z-index: 2;
	1310	+ text-align: center;
	1311	+ padding: 24px;
	1312	+}
	1313	+
	1314	+.ka-wb-modal-locked-overlay svg {
	1315	+ width: 48px;
	1316	+ height: 48px;
	1317	+ color: var(--ka-wb-accent);
	1318	+ margin-bottom: 12px;
	1319	+}
	1320	+
	1321	+.ka-wb-modal-locked-overlay h4 {
	1322	+ font-size: 18px;
	1323	+ font-weight: 600;
	1324	+ margin: 0 0 8px;
	1325	+ color: var(--ka-wb-text);
	1326	+}
	1327	+
	1328	+.ka-wb-modal-locked-overlay p {
	1329	+ font-size: 14px;
	1330	+ color: var(--ka-wb-text-secondary);
	1331	+ margin: 0 0 16px;
	1332	+}
	1333	+
	1334	+/* Empty State */
	1335	+.ka-wb-empty {
	1336	+ text-align: center;
	1337	+ padding: 64px 40px;
	1338	+}
	1339	+
	1340	+.ka-wb-empty-icon {
	1341	+ width: 64px;
	1342	+ height: 64px;
	1343	+ margin: 0 auto 20px;
	1344	+ color: var(--ka-wb-text-secondary);
	1345	+ opacity: 0.4;
	1346	+}
	1347	+
	1348	+.ka-wb-empty-icon svg {
	1349	+ width: 100%;
	1350	+ height: 100%;
	1351	+}
	1352	+
	1353	+.ka-wb-empty h3 {
	1354	+ font-size: 20px;
	1355	+ font-weight: 600;
	1356	+ margin: 0 0 8px;
	1357	+ color: var(--ka-wb-text);
	1358	+}
	1359	+
	1360	+.ka-wb-empty p {
	1361	+ font-size: 15px;
	1362	+ color: var(--ka-wb-text-secondary);
	1363	+ margin: 0;
	1364	+}
	1365	+
	1366	+/* Quick Start */
	1367	+.ka-wb-quickstart {
	1368	+ padding: 24px 28px;
	1369	+ background: var(--ka-wb-surface);
	1370	+ border: 1px solid var(--ka-wb-border);
	1371	+ border-radius: var(--ka-wb-radius);
	1372	+ box-shadow: var(--ka-wb-shadow);
	1373	+ margin-bottom: 32px;
	1374	+}
	1375	+
	1376	+.ka-wb-quickstart-head {
	1377	+ display: flex;
	1378	+ align-items: baseline;
	1379	+ justify-content: space-between;
	1380	+ gap: 16px;
	1381	+ margin-bottom: 18px;
	1382	+}
	1383	+
	1384	+.ka-wb-quickstart-head h3 {
	1385	+ font-size: 16px;
	1386	+ font-weight: 600;
	1387	+ margin: 0;
	1388	+ color: var(--ka-wb-text);
	1389	+}
	1390	+
	1391	+.ka-wb-quickstart-head p {
	1392	+ font-size: 13px;
	1393	+ margin: 0;
	1394	+ color: var(--ka-wb-text-secondary);
	1395	+ white-space: nowrap;
	1396	+}
	1397	+
	1398	+.ka-wb-quickstart-steps {
	1399	+ display: grid;
	1400	+ grid-template-columns: repeat(3, 1fr);
	1401	+ gap: 14px;
	1402	+}
	1403	+
	1404	+.ka-wb-quickstart-step {
	1405	+ display: flex;
	1406	+ gap: 12px;
	1407	+ padding: 14px 16px;
	1408	+ border-radius: var(--ka-wb-radius-sm);
	1409	+ background: rgba(0, 0, 0, 0.02);
	1410	+ border: 1px solid var(--ka-wb-border);
	1411	+}
	1412	+
	1413	+body.ka-v3-dark .ka-wb-quickstart-step {
	1414	+ background: rgba(255, 255, 255, 0.04);
	1415	+}
	1416	+
	1417	+.ka-wb-quickstart-step-number {
	1418	+ width: 28px;
	1419	+ height: 28px;
	1420	+ border-radius: 10px;
	1421	+ display: inline-flex;
	1422	+ align-items: center;
	1423	+ justify-content: center;
	1424	+ font-size: 13px;
	1425	+ font-weight: 700;
	1426	+ color: #fff;
	1427	+ background: linear-gradient(135deg, var(--ka-wb-accent), var(--ka-wb-accent-hover));
	1428	+ flex-shrink: 0;
	1429	+}
	1430	+
	1431	+.ka-wb-quickstart-step-title {
	1432	+ font-size: 14px;
	1433	+ font-weight: 600;
	1434	+ margin: 0 0 3px;
	1435	+ color: var(--ka-wb-text);
	1436	+}
	1437	+
	1438	+.ka-wb-quickstart-step-desc {
	1439	+ font-size: 13px;
	1440	+ margin: 0;
	1441	+ color: var(--ka-wb-text-secondary);
	1442	+ line-height: 1.35;
	1443	+}
	1444	+
	1445	+/* Pro Notice */
	1446	+.ka-wb-pro-notice {
	1447	+ display: flex;
	1448	+ align-items: center;
	1449	+ justify-content: space-between;
	1450	+ gap: 24px;
	1451	+ padding: 24px 28px;
	1452	+ background: linear-gradient(135deg, rgba(0, 113, 227, 0.08), rgba(88, 86, 214, 0.08));
	1453	+ border: 1px solid rgba(0, 113, 227, 0.15);
	1454	+ border-radius: var(--ka-wb-radius);
	1455	+ margin-bottom: 32px;
	1456	+}
	1457	+
	1458	+body.ka-v3-dark .ka-wb-pro-notice {
	1459	+ background: linear-gradient(135deg, rgba(0, 113, 227, 0.12), rgba(88, 86, 214, 0.12));
	1460	+ border-color: rgba(0, 113, 227, 0.2);
	1461	+}
	1462	+
	1463	+.ka-wb-pro-notice-content {
	1464	+ display: flex;
	1465	+ align-items: center;
	1466	+ gap: 16px;
	1467	+}
	1468	+
	1469	+.ka-wb-pro-notice-icon {
	1470	+ width: 40px;
	1471	+ height: 40px;
	1472	+ background: linear-gradient(135deg, #0071e3, #5856d6);
	1473	+ border-radius: 10px;
	1474	+ display: flex;
	1475	+ align-items: center;
	1476	+ justify-content: center;
	1477	+ color: #fff;
	1478	+ flex-shrink: 0;
	1479	+}
	1480	+
	1481	+.ka-wb-pro-notice-icon svg {
	1482	+ width: 22px;
	1483	+ height: 22px;
	1484	+}
	1485	+
	1486	+.ka-wb-pro-notice-text h4 {
	1487	+ font-size: 15px;
	1488	+ font-weight: 600;
	1489	+ margin: 0 0 2px;
	1490	+ color: var(--ka-wb-text);
	1491	+}
	1492	+
	1493	+.ka-wb-pro-notice-text p {
	1494	+ font-size: 14px;
	1495	+ color: var(--ka-wb-text-secondary);
	1496	+ margin: 0;
	1497	+}
	1498	+
	1499	+/* Responsive */
	1500	+@media (max-width: 768px) {
	1501	+ .ka-wb {
	1502	+ padding: 32px 20px 60px;
	1503	+ }
	1504	+
	1505	+ .ka-wb-header {
	1506	+ flex-direction: column;
	1507	+ gap: 24px;
	1508	+ }
	1509	+
	1510	+ .ka-wb-header-titles h1 {
	1511	+ font-size: 36px;
	1512	+ }
	1513	+
	1514	+ .ka-wb-title-icon {
	1515	+ width: 64px;
	1516	+ height: 64px;
	1517	+ border-radius: 18px;
	1518	+ }
	1519	+
	1520	+ .ka-wb-title-icon svg {
	1521	+ width: 30px;
	1522	+ height: 30px;
	1523	+ }
	1524	+
	1525	+ .ka-wb-types {
	1526	+ grid-template-columns: 1fr 1fr;
	1527	+ }
	1528	+
	1529	+ .ka-wb-template {
	1530	+ grid-template-columns: 1fr;
	1531	+ gap: 16px;
	1532	+ }
	1533	+
	1534	+ .ka-wb-template-actions {
	1535	+ justify-content: flex-start;
	1536	+ }
	1537	+
	1538	+ .ka-wb-pro-notice {
	1539	+ flex-direction: column;
	1540	+ text-align: center;
	1541	+ }
	1542	+
	1543	+ .ka-wb-pro-notice-content {
	1544	+ flex-direction: column;
	1545	+ }
	1546	+
	1547	+ .ka-wb-quickstart {
	1548	+ padding: 20px 20px;
	1549	+ }
	1550	+
	1551	+ .ka-wb-quickstart-head {
	1552	+ flex-direction: column;
	1553	+ align-items: flex-start;
	1554	+ gap: 6px;
	1555	+ }
	1556	+
	1557	+ .ka-wb-quickstart-steps {
	1558	+ grid-template-columns: 1fr;
	1559	+ }
	1560	+}
393	1561	</style>
394	1562
395	1563	<?php
396		-// Output dark theme styles
397	1564	ka_render_dark_theme_styles();
398		-
399		-// Apply dark theme immediately if enabled
400	1565	ka_render_dark_theme_init();
401	1566	?>
402	1567
403		-<div class="ka-woo-wrap">
	1568	+<script>
	1569	+if (document.body) {
	1570	+ document.body.classList.add('ka-admin-v3');
	1571	+} else {
	1572	+ document.addEventListener('DOMContentLoaded', function() {
	1573	+ document.body.classList.add('ka-admin-v3');
	1574	+ });
	1575	+}
	1576	+</script>
	1577	+
	1578	+<div class="ka-wb">
404	1579	<!-- Header -->
405		- <div class="ka-woo-header">
406		- <div class="ka-woo-header-content">
407		- <div class="ka-woo-header-icon">
408		- <span class="dashicons dashicons-cart"></span>
	1580	+ <header class="ka-wb-header">
	1581	+ <div class="ka-wb-header-content">
	1582	+ <span class="ka-wb-title-icon" aria-hidden="true">
	1583	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1584	+ <path d="M6 6h15l-1.5 9h-12z" />
	1585	+ <path d="M6 6l-2-3H1" />
	1586	+ <circle cx="9" cy="20" r="1" />
	1587	+ <circle cx="18" cy="20" r="1" />
	1588	+ </svg>
	1589	+ </span>
	1590	+ <div class="ka-wb-header-titles">
	1591	+ <h1><span class="ka-wb-title-text"><?php esc_html_e('WooCommerce Builder', 'king-addons'); ?></span></h1>
	1592	+ <p><?php esc_html_e('Design beautiful store pages with Elementor', 'king-addons'); ?></p>
409	1593	</div>
410		- <div>
411		- <h1><?php esc_html_e('WooCommerce Builder', 'king-addons'); ?></h1>
412		- <p><?php esc_html_e('Build custom WooCommerce pages with Elementor', 'king-addons'); ?></p>
413		- </div>
414	1594	</div>
415		- <?php ka_render_dark_theme_toggle(); ?>
416		- </div>
	1595	+ <div class="ka-wb-header-actions">
	1596	+ <?php ka_render_dark_theme_toggle(); ?>
	1597	+ </div>
	1598	+ </header>
417	1599
418		- <?php settings_errors('ka_account_endpoints'); ?>
419		-
420	1600	<?php if (!$can_use_pro): ?>
421		- <div class="notice notice-warning" style="border-radius: 8px; border-left-color: #f59e0b;">
422		- <p><strong><?php esc_html_e('Pro Feature:', 'king-addons'); ?></strong> <?php esc_html_e('Cart, Checkout, and My Account templates require Pro.', 'king-addons'); ?></p>
	1601	+ <!-- Pro Notice -->
	1602	+ <div class="ka-wb-pro-notice">
	1603	+ <div class="ka-wb-pro-notice-content">
	1604	+ <div class="ka-wb-pro-notice-icon">
	1605	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1606	+ <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"/>
	1607	+ </svg>
	1608	+ </div>
	1609	+ <div class="ka-wb-pro-notice-text">
	1610	+ <h4><?php esc_html_e('Unlock All Templates', 'king-addons'); ?></h4>
	1611	+ <p><?php esc_html_e('Cart, Checkout, and My Account templates require Pro', 'king-addons'); ?></p>
	1612	+ </div>
423	1613	</div>
	1614	+ <a href="https://kingaddons.com/pricing/" target="_blank" class="ka-wb-btn ka-wb-btn-primary">
	1615	+ <?php esc_html_e('Upgrade to Pro', 'king-addons'); ?>
	1616	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1617	+ <path d="M5 12h14M12 5l7 7-7 7"/>
	1618	+ </svg>
	1619	+ </a>
	1620	+ </div>
424	1621	<?php endif; ?>
425	1622
426		- <!-- Create Template Buttons -->
427		- <div class="ka-type-btns">
428		- <?php foreach ($types as $slug => $label): ?>
429		- <a class="ka-type-btn" href="<?php echo esc_url($create_links[$slug]); ?>">
430		- <span class="dashicons dashicons-plus-alt2"></span>
431		- <?php echo esc_html(sprintf(__('Add %s', 'king-addons'), $label)); ?>
432		- </a>
	1623	+ <!-- Template Types -->
	1624	+ <div class="ka-wb-types">
	1625	+ <?php foreach ($types as $slug => $data): ?>
	1626	+ <?php
	1627	+ $is_locked = (!$can_use_pro && !empty($data['pro']));
	1628	+ $tag = $is_locked ? 'div' : 'a';
	1629	+ $href = $is_locked ? '' : ' href="' . esc_url($create_links[$slug]) . '"';
	1630	+ ?>
	1631	+ <<?php echo $tag; ?> class="ka-wb-type <?php echo $is_locked ? 'is-locked' : ''; ?>"<?php echo $href; ?>>
	1632	+ <?php if ($is_locked && !empty($data['pro'])): ?>
	1633	+ <span class="ka-wb-type-badge">Pro</span>
	1634	+ <?php endif; ?>
	1635	+ <div class="ka-wb-type-icon"><?php echo $data['icon']; ?></div>
	1636	+ <div class="ka-wb-type-label"><?php echo esc_html($data['label']); ?></div>
	1637	+ <div class="ka-wb-type-desc"><?php echo esc_html($data['desc']); ?></div>
	1638	+ </<?php echo $tag; ?>>
433	1639	<?php endforeach; ?>
434	1640	</div>
435	1641
436		- <!-- Filter Bar -->
437		- <form method="get" class="ka-filter-bar">
438		- <input type="hidden" name="page" value="king-addons-woo-builder">
439		- <select name="ka_woo_type">
440		- <option value=""><?php esc_html_e('All Types', 'king-addons'); ?></option>
441		- <?php foreach ($types as $slug => $label): ?>
442		- <option value="<?php echo esc_attr($slug); ?>" <?php selected($type_filter, $slug); ?>>
443		- <?php echo esc_html($label); ?>
444		- </option>
445		- <?php endforeach; ?>
446		- </select>
447		- <select name="ka_woo_status">
448		- <option value=""><?php esc_html_e('All Statuses', 'king-addons'); ?></option>
449		- <option value="publish" <?php selected($status_filter, 'publish'); ?>><?php esc_html_e('Published', 'king-addons'); ?></option>
450		- <option value="draft" <?php selected($status_filter, 'draft'); ?>><?php esc_html_e('Draft', 'king-addons'); ?></option>
451		- </select>
452		- <select name="ka_woo_enabled">
453		- <option value=""><?php esc_html_e('All', 'king-addons'); ?></option>
454		- <option value="yes" <?php selected($enabled_filter, 'yes'); ?>><?php esc_html_e('Enabled', 'king-addons'); ?></option>
455		- <option value="no" <?php selected($enabled_filter, 'no'); ?>><?php esc_html_e('Disabled', 'king-addons'); ?></option>
456		- </select>
457		- <button class="button"><?php esc_html_e('Filter', 'king-addons'); ?></button>
458		- <a class="button" href="<?php echo esc_url(remove_query_arg(['ka_woo_type', 'ka_woo_status', 'ka_woo_enabled'])); ?>"><?php esc_html_e('Reset', 'king-addons'); ?></a>
459		- </form>
	1642	+ <!-- Templates Section -->
	1643	+ <section class="ka-wb-section">
	1644	+ <div class="ka-wb-section-header">
	1645	+ <h2 class="ka-wb-section-title"><?php esc_html_e('Your Templates', 'king-addons'); ?></h2>
	1646	+ <span class="ka-wb-section-count"><?php echo count($templates); ?> <?php esc_html_e('templates', 'king-addons'); ?></span>
	1647	+ </div>
460	1648
461		- <!-- Templates Table -->
462		- <div class="ka-card">
463		- <div class="ka-card-header">
464		- <span class="dashicons dashicons-layout"></span>
465		- <h2><?php esc_html_e('Templates', 'king-addons'); ?></h2>
466		- </div>
467		- <div class="ka-card-body" style="padding: 0;">
	1649	+ <div class="ka-wb-templates">
468	1650	<?php if (empty($templates)): ?>
469		- <div class="ka-empty">
470		- <span class="dashicons dashicons-welcome-widgets-menus"></span>
471		- <p><?php esc_html_e('No templates found. Create your first template above.', 'king-addons'); ?></p>
	1651	+ <div class="ka-wb-empty">
	1652	+ <div class="ka-wb-empty-icon">
	1653	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
	1654	+ <rect x="3" y="3" width="18" height="18" rx="2"/>
	1655	+ <line x1="12" y1="8" x2="12" y2="16"/>
	1656	+ <line x1="8" y1="12" x2="16" y2="12"/>
	1657	+ </svg>
	1658	+ </div>
	1659	+ <h3><?php esc_html_e('No templates yet', 'king-addons'); ?></h3>
	1660	+ <p><?php esc_html_e('Create your first template by selecting a type above', 'king-addons'); ?></p>
472	1661	</div>
473	1662	<?php else: ?>
474		- <table class="ka-table">
475		- <thead>
476		- <tr>
477		- <th><?php esc_html_e('Title', 'king-addons'); ?></th>
478		- <th><?php esc_html_e('Type', 'king-addons'); ?></th>
479		- <th><?php esc_html_e('Status', 'king-addons'); ?></th>
480		- <th><?php esc_html_e('Priority', 'king-addons'); ?></th>
481		- <th><?php esc_html_e('Enabled', 'king-addons'); ?></th>
482		- <th><?php esc_html_e('Rules', 'king-addons'); ?></th>
483		- <th><?php esc_html_e('Modified', 'king-addons'); ?></th>
484		- <th><?php esc_html_e('Actions', 'king-addons'); ?></th>
485		- </tr>
486		- </thead>
487		- <tbody>
488		- <?php foreach ($templates as $template): ?>
489		- <tr>
490		- <td>
491		- <a href="<?php echo esc_url(get_edit_post_link($template['id'])); ?>">
492		- <?php echo esc_html($template['title']); ?>
	1663	+ <?php foreach ($templates as $template): ?>
	1664	+ <?php
	1665	+ $elementor_url = ka_woo_get_elementor_edit_url((int) $template['id']);
	1666	+ $title_icon = $types[$template['type']]['icon'] ?? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>';
	1667	+ $duplicate_url = wp_nonce_url(add_query_arg([
	1668	+ 'page' => 'king-addons-woo-builder',
	1669	+ 'template_id' => $template['id'],
	1670	+ 'ka_woo_duplicate' => 1,
	1671	+ ], admin_url('admin.php')), 'ka_woo_duplicate_' . $template['id']);
	1672	+ $delete_url = wp_nonce_url(add_query_arg([
	1673	+ 'page' => 'king-addons-woo-builder',
	1674	+ 'template_id' => $template['id'],
	1675	+ 'ka_woo_delete' => 1,
	1676	+ ], admin_url('admin.php')), 'ka_woo_delete_' . $template['id']);
	1677	+ ?>
	1678	+ <div class="ka-wb-template" data-template-id="<?php echo esc_attr($template['id']); ?>">
	1679	+ <?php if ($template['status'] === 'draft'): ?>
	1680	+ <span class="ka-wb-template-status is-draft"><?php esc_html_e('Draft', 'king-addons'); ?></span>
	1681	+ <?php elseif ($template['enabled']): ?>
	1682	+ <span class="ka-wb-template-status is-enabled"><?php esc_html_e('Active', 'king-addons'); ?></span>
	1683	+ <?php else: ?>
	1684	+ <span class="ka-wb-template-status is-disabled"><?php esc_html_e('Inactive', 'king-addons'); ?></span>
	1685	+ <?php endif; ?>
	1686	+
	1687	+ <div class="ka-wb-template-info">
	1688	+ <a href="<?php echo esc_url($elementor_url); ?>" class="ka-wb-template-title">
	1689	+ <span class="ka-wb-template-title-icon" aria-hidden="true">
	1690	+ <?php echo $title_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
	1691	+ </span>
	1692	+ <span class="ka-wb-template-title-text"><?php echo esc_html($template['title']); ?></span>
	1693	+ </a>
	1694	+ <div class="ka-wb-template-meta">
	1695	+ <span class="ka-wb-template-type">
	1696	+ <?php echo esc_html($types[$template['type']]['label'] ?? $template['type']); ?>
	1697	+ </span>
	1698	+ <span><?php echo esc_html($template['date']); ?></span>
	1699	+ </div>
	1700	+ </div>
	1701	+
	1702	+ <!-- Condition Badge -->
	1703	+ <?php
	1704	+ $has_advanced_conditions = $template['condition_type'] !== 'all';
	1705	+ $template_options = $condition_options[$template['type']] ?? ['all' => __('All', 'king-addons')];
	1706	+ $show_conditions_button = count($template_options) > 1; // Show only if template type supports conditions
	1707	+ ?>
	1708	+ <?php if ($show_conditions_button): ?>
	1709	+ <button type="button"
	1710	+ class="ka-wb-template-condition <?php echo $has_advanced_conditions ? '' : 'ka-wb-template-condition-btn'; ?>"
	1711	+ onclick="kaWbOpenConditions(<?php echo (int) $template['id']; ?>, '<?php echo esc_js($template['type']); ?>', '<?php echo esc_js($template['condition_type']); ?>', <?php echo esc_attr(wp_json_encode($template['condition_values'])); ?>)"
	1712	+ title="<?php echo esc_attr($template['condition_label']); ?>">
	1713	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1714	+ <circle cx="12" cy="12" r="3"/>
	1715	+ <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
	1716	+ </svg>
	1717	+ <?php echo esc_html($template['condition_label']); ?>
	1718	+ <?php if (!$can_use_pro && $has_advanced_conditions): ?>
	1719	+ <span class="ka-wb-pro-badge-inline">Pro</span>
	1720	+ <?php endif; ?>
	1721	+ </button>
	1722	+ <?php else: ?>
	1723	+ <span class="ka-wb-template-condition">
	1724	+ <?php echo esc_html($template['condition_label']); ?>
	1725	+ </span>
	1726	+ <?php endif; ?>
	1727	+
	1728	+ <div class="ka-wb-template-actions">
	1729	+ <a href="<?php echo esc_url($elementor_url); ?>" class="ka-wb-btn ka-wb-btn-primary">
	1730	+ <?php esc_html_e('Edit', 'king-addons'); ?>
	1731	+ </a>
	1732	+
	1733	+ <!-- Dropdown Menu -->
	1734	+ <div class="ka-wb-dropdown">
	1735	+ <button type="button" class="ka-wb-dropdown-trigger" aria-label="<?php esc_attr_e('More actions', 'king-addons'); ?>">
	1736	+ <svg viewBox="0 0 24 24" fill="currentColor">
	1737	+ <circle cx="12" cy="5" r="2"/>
	1738	+ <circle cx="12" cy="12" r="2"/>
	1739	+ <circle cx="12" cy="19" r="2"/>
	1740	+ </svg>
	1741	+ </button>
	1742	+ <div class="ka-wb-dropdown-menu">
	1743	+ <!-- Rename -->
	1744	+ <button type="button" class="ka-wb-dropdown-item" onclick="kaWbRename(<?php echo (int) $template['id']; ?>, '<?php echo esc_js($template['title']); ?>')">
	1745	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1746	+ <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>
	1747	+ </svg>
	1748	+ <?php esc_html_e('Rename', 'king-addons'); ?>
	1749	+ </button>
	1750	+
	1751	+ <!-- Duplicate -->
	1752	+ <a href="<?php echo esc_url($duplicate_url); ?>" class="ka-wb-dropdown-item">
	1753	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1754	+ <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
	1755	+ <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
	1756	+ </svg>
	1757	+ <?php esc_html_e('Duplicate', 'king-addons'); ?>
493	1758	</a>
494		- </td>
495		- <td>
496		- <?php echo esc_html($types[$template['type']] ?? $template['type']); ?>
497		- <?php if (!empty($template['pro_locked'])): ?>
498		- <span class="ka-badge ka-badge-pro"><?php esc_html_e('PRO', 'king-addons'); ?></span>
	1759	+
	1760	+ <?php if (!$template['pro_locked']): ?>
	1761	+ <!-- Toggle Active -->
	1762	+ <a href="<?php echo esc_url(wp_nonce_url(add_query_arg([
	1763	+ 'page' => 'king-addons-woo-builder',
	1764	+ 'template_id' => $template['id'],
	1765	+ 'ka_woo_toggle' => 1,
	1766	+ ], admin_url('admin.php')), 'ka_woo_toggle_' . $template['id'])); ?>" class="ka-wb-dropdown-item">
	1767	+ <?php if ($template['enabled']): ?>
	1768	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1769	+ <rect x="1" y="5" width="22" height="14" rx="7" ry="7"/>
	1770	+ <circle cx="16" cy="12" r="3"/>
	1771	+ </svg>
	1772	+ <?php esc_html_e('Deactivate', 'king-addons'); ?>
	1773	+ <?php else: ?>
	1774	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1775	+ <rect x="1" y="5" width="22" height="14" rx="7" ry="7"/>
	1776	+ <circle cx="8" cy="12" r="3"/>
	1777	+ </svg>
	1778	+ <?php esc_html_e('Activate', 'king-addons'); ?>
	1779	+ <?php endif; ?>
	1780	+ </a>
499	1781	<?php endif; ?>
500		- </td>
501		- <td>
502		- <span class="ka-badge <?php echo $template['status'] === 'publish' ? 'ka-badge-success' : 'ka-badge-neutral'; ?>">
503		- <?php echo esc_html(ucfirst($template['status'])); ?>
504		- </span>
505		- </td>
506		- <td><?php echo esc_html($template['priority']); ?></td>
507		- <td>
508		- <span class="ka-status <?php echo $template['enabled'] ? 'ka-status-enabled' : 'ka-status-disabled'; ?>">
509		- <span class="dashicons dashicons-<?php echo $template['enabled'] ? 'yes' : 'no'; ?>"></span>
510		- <?php echo $template['enabled'] ? esc_html__('Yes', 'king-addons') : esc_html__('No', 'king-addons'); ?>
511		- </span>
512		- </td>
513		- <td><small><?php echo esc_html($template['rules_text']); ?></small></td>
514		- <td><?php echo esc_html($template['date']); ?></td>
515		- <td>
516		- <div class="ka-actions">
517		- <a class="ka-action-btn" href="<?php echo esc_url(get_edit_post_link($template['id'])); ?>"><?php esc_html_e('Edit', 'king-addons'); ?></a>
518		- <?php if (empty($template['pro_locked'])): ?>
519		- <a class="ka-action-btn" href="<?php echo esc_url(wp_nonce_url(add_query_arg([
520		- 'page' => 'king-addons-woo-builder',
521		- 'template_id' => $template['id'],
522		- 'ka_woo_toggle' => 1,
523		- ], admin_url('admin.php')), 'ka_woo_toggle_' . $template['id'])); ?>">
524		- <?php echo $template['enabled'] ? esc_html__('Disable', 'king-addons') : esc_html__('Enable', 'king-addons'); ?>
525		- </a>
526		- <?php endif; ?>
527		- </div>
528		- </td>
529		- </tr>
530		- <?php endforeach; ?>
531		- </tbody>
532		- </table>
	1782	+
	1783	+ <div class="ka-wb-dropdown-divider"></div>
	1784	+
	1785	+ <!-- Change Type -->
	1786	+ <div class="ka-wb-dropdown-label"><?php esc_html_e('Change Type', 'king-addons'); ?></div>
	1787	+ <?php foreach ($types as $type_slug => $type_data): ?>
	1788	+ <?php
	1789	+ if ($type_slug === $template['type']) continue;
	1790	+ $is_type_locked = (!$can_use_pro && !empty($type_data['pro']));
	1791	+ if ($is_type_locked) continue;
	1792	+ $change_type_url = wp_nonce_url(add_query_arg([
	1793	+ 'page' => 'king-addons-woo-builder',
	1794	+ 'template_id' => $template['id'],
	1795	+ 'ka_woo_change_type' => 1,
	1796	+ 'new_type' => $type_slug,
	1797	+ ], admin_url('admin.php')), 'ka_woo_change_type_' . $template['id']);
	1798	+ ?>
	1799	+ <a href="<?php echo esc_url($change_type_url); ?>" class="ka-wb-dropdown-item">
	1800	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1801	+ <polyline points="9 18 15 12 9 6"/>
	1802	+ </svg>
	1803	+ <?php echo esc_html($type_data['label']); ?>
	1804	+ </a>
	1805	+ <?php endforeach; ?>
	1806	+
	1807	+ <div class="ka-wb-dropdown-divider"></div>
	1808	+
	1809	+ <!-- Delete -->
	1810	+ <a href="<?php echo esc_url($delete_url); ?>" class="ka-wb-dropdown-item is-danger" onclick="return confirm('<?php esc_attr_e('Are you sure you want to delete this template?', 'king-addons'); ?>')">
	1811	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1812	+ <polyline points="3 6 5 6 21 6"/>
	1813	+ <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
	1814	+ </svg>
	1815	+ <?php esc_html_e('Delete', 'king-addons'); ?>
	1816	+ </a>
	1817	+ </div>
	1818	+ </div>
	1819	+ </div>
	1820	+ </div>
	1821	+ <?php endforeach; ?>
533	1822	<?php endif; ?>
534	1823	</div>
	1824	+ </section>
	1825	+
	1826	+ <!-- Quick Setup -->
	1827	+ <div class="ka-wb-quickstart">
	1828	+ <div class="ka-wb-quickstart-head">
	1829	+ <h3><?php esc_html_e('Quick setup', 'king-addons'); ?></h3>
	1830	+ <p><?php esc_html_e('3 steps to get started', 'king-addons'); ?></p>
	1831	+ </div>
	1832	+ <div class="ka-wb-quickstart-steps">
	1833	+ <div class="ka-wb-quickstart-step">
	1834	+ <span class="ka-wb-quickstart-step-number" aria-hidden="true">1</span>
	1835	+ <div>
	1836	+ <p class="ka-wb-quickstart-step-title"><?php esc_html_e('Pick a template type', 'king-addons'); ?></p>
	1837	+ <p class="ka-wb-quickstart-step-desc"><?php esc_html_e('Choose what you want to customize: Single Product, Shop & Category, Cart, Checkout, or My Account.', 'king-addons'); ?></p>
	1838	+ </div>
	1839	+ </div>
	1840	+ <div class="ka-wb-quickstart-step">
	1841	+ <span class="ka-wb-quickstart-step-number" aria-hidden="true">2</span>
	1842	+ <div>
	1843	+ <p class="ka-wb-quickstart-step-title"><?php esc_html_e('Design in Elementor', 'king-addons'); ?></p>
	1844	+ <p class="ka-wb-quickstart-step-desc"><?php esc_html_e('You’ll be taken straight into the Elementor editor. Build your layout visually using widgets from "King Addons WooCommerce Builder" category or WooCommerce related widgets provided by other compatible plugins, then save.', 'king-addons'); ?></p>
	1845	+ </div>
	1846	+ </div>
	1847	+ <div class="ka-wb-quickstart-step">
	1848	+ <span class="ka-wb-quickstart-step-number" aria-hidden="true">3</span>
	1849	+ <div>
	1850	+ <p class="ka-wb-quickstart-step-title"><?php esc_html_e('Manage & activate templates', 'king-addons'); ?></p>
	1851	+ <p class="ka-wb-quickstart-step-desc"><?php esc_html_e('Set display conditions in Pro. Activate or deactivate templates, and use the menu to rename, duplicate, or delete them.', 'king-addons'); ?></p>
	1852	+ </div>
	1853	+ </div>
	1854	+ </div>
535	1855	</div>
536	1856
537		- <!-- My Account Endpoints -->
538		- <div class="ka-card">
539		- <div class="ka-card-header">
540		- <span class="dashicons dashicons-admin-users"></span>
541		- <h2><?php esc_html_e('My Account Endpoints', 'king-addons'); ?><?php if (!$can_use_pro): ?><span class="ka-badge ka-badge-pro" style="margin-left: 10px;">PRO</span><?php endif; ?></h2>
542		- </div>
543		- <form method="post">
544		- <?php wp_nonce_field('ka_account_endpoints'); ?>
545		- <div class="ka-card-body" style="padding: 0;">
546		- <table class="ka-table">
547		- <thead>
548		- <tr>
549		- <th><?php esc_html_e('Slug', 'king-addons'); ?></th>
550		- <th><?php esc_html_e('Label', 'king-addons'); ?></th>
551		- <th><?php esc_html_e('Position', 'king-addons'); ?></th>
552		- <th><?php esc_html_e('Enabled', 'king-addons'); ?></th>
553		- <th><?php esc_html_e('Template', 'king-addons'); ?></th>
554		- <th><?php esc_html_e('Roles', 'king-addons'); ?></th>
555		- <th><?php esc_html_e('Logout Confirm', 'king-addons'); ?></th>
556		- <th><?php esc_html_e('Custom', 'king-addons'); ?></th>
557		- </tr>
558		- </thead>
559		- <tbody>
560		- <?php foreach ($default_account_items as $slug => $item_label):
561		- $row = $saved_endpoints[$slug] ?? [
562		- 'label' => $item_label,
563		- 'enabled' => true,
564		- 'position' => 20,
565		- 'template_id' => 0,
566		- 'is_custom' => false,
567		- 'confirm' => false,
568		- 'roles' => [],
569		- ];
570		- ?>
571		- <tr>
572		- <td><code style="background:#f1f5f9;padding:2px 6px;border-radius:4px;"><?php echo esc_html($slug); ?></code></td>
573		- <td><input type="text" name="ka_endpoints[<?php echo esc_attr($slug); ?>][label]" value="<?php echo esc_attr($row['label']); ?>" style="width:120px"></td>
574		- <td><input type="number" name="ka_endpoints[<?php echo esc_attr($slug); ?>][position]" value="<?php echo esc_attr((string) ($row['position'] ?? 20)); ?>" style="width:60px"></td>
575		- <td><input type="checkbox" name="ka_endpoints[<?php echo esc_attr($slug); ?>][enabled]" <?php checked(!empty($row['enabled'])); ?>></td>
576		- <td>
577		- <?php if ($can_use_pro): ?>
578		- <select name="ka_endpoints[<?php echo esc_attr($slug); ?>][template_id]" style="min-width:120px">
579		- <option value="0"><?php esc_html_e('Default', 'king-addons'); ?></option>
580		- <?php foreach ($templates as $template):
581		- if ($template['type'] !== 'my_account') continue;
582		- ?>
583		- <option value="<?php echo esc_attr($template['id']); ?>" <?php selected((int) ($row['template_id'] ?? 0), (int) $template['id']); ?>>
584		- <?php echo esc_html($template['title']); ?>
585		- </option>
586		- <?php endforeach; ?>
587		- </select>
588		- <?php else: ?>
589		- <span class="ka-pro-hint"><?php esc_html_e('Pro only', 'king-addons'); ?></span>
590		- <?php endif; ?>
591		- </td>
592		- <td><input type="text" name="ka_endpoints[<?php echo esc_attr($slug); ?>][roles]" value="<?php echo esc_attr(implode(',', $row['roles'] ?? [])); ?>" style="width:100px" placeholder="role1,role2"></td>
593		- <td><input type="checkbox" name="ka_endpoints[<?php echo esc_attr($slug); ?>][confirm]" <?php checked(!empty($row['confirm'])); ?>></td>
594		- <td><?php echo !empty($row['is_custom']) ? '<span class="ka-badge ka-badge-success">Yes</span>' : '<span class="ka-badge ka-badge-neutral">No</span>'; ?></td>
595		- </tr>
596		- <?php endforeach; ?>
597		- <?php if ($can_use_pro): ?>
598		- <tr style="background: #fefce8;">
599		- <td><input type="text" name="ka_new_endpoint[slug]" placeholder="custom-endpoint" style="width:120px"></td>
600		- <td><input type="text" name="ka_new_endpoint[label]" placeholder="Custom Label" style="width:120px"></td>
601		- <td><input type="number" name="ka_new_endpoint[position]" value="30" style="width:60px"></td>
602		- <td><input type="checkbox" name="ka_new_endpoint[enabled]"></td>
603		- <td>
604		- <select name="ka_new_endpoint[template_id]" style="min-width:120px">
605		- <option value="0"><?php esc_html_e('Default', 'king-addons'); ?></option>
606		- <?php foreach ($templates as $template):
607		- if ($template['type'] !== 'my_account') continue;
608		- ?>
609		- <option value="<?php echo esc_attr($template['id']); ?>"><?php echo esc_html($template['title']); ?></option>
610		- <?php endforeach; ?>
611		- </select>
612		- </td>
613		- <td><input type="text" name="ka_new_endpoint[roles]" placeholder="role1,role2" style="width:100px"></td>
614		- <td><input type="checkbox" name="ka_new_endpoint[confirm]"></td>
615		- <td><span class="ka-badge ka-badge-warning">New</span></td>
616		- </tr>
617		- <?php endif; ?>
618		- </tbody>
619		- </table>
	1857	+</div>
	1858	+
	1859	+<!-- Rename Modal -->
	1860	+<div class="ka-wb-modal-overlay" id="kaWbRenameModal">
	1861	+ <div class="ka-wb-modal">
	1862	+ <h3><?php esc_html_e('Rename Template', 'king-addons'); ?></h3>
	1863	+ <form method="post" action="">
	1864	+ <?php wp_nonce_field('ka_woo_rename', '_wpnonce'); ?>
	1865	+ <input type="hidden" name="ka_woo_rename" value="1">
	1866	+ <input type="hidden" name="template_id" id="kaWbRenameId" value="">
	1867	+ <input type="text" name="new_title" id="kaWbRenameInput" class="ka-wb-modal-input" placeholder="<?php esc_attr_e('Template name', 'king-addons'); ?>">
	1868	+ <div class="ka-wb-modal-actions">
	1869	+ <button type="button" class="ka-wb-btn ka-wb-btn-secondary" onclick="kaWbCloseRename()"><?php esc_html_e('Cancel', 'king-addons'); ?></button>
	1870	+ <button type="submit" class="ka-wb-btn ka-wb-btn-primary"><?php esc_html_e('Save', 'king-addons'); ?></button>
620	1871	</div>
621		- <div class="ka-submit">
622		- <button type="submit" name="ka_account_endpoints_save" class="button button-primary"><?php esc_html_e('Save Endpoints', 'king-addons'); ?></button>
623		- <span class="ka-pro-hint" style="margin-left: 12px;"><?php esc_html_e('Template overrides and custom endpoints require Pro.', 'king-addons'); ?></span>
	1872	+ </form>
	1873	+ </div>
	1874	+</div>
	1875	+
	1876	+<!-- Conditions Modal -->
	1877	+<div class="ka-wb-modal-overlay" id="kaWbConditionsModal">
	1878	+ <div class="ka-wb-modal ka-wb-modal-conditions">
	1879	+ <h3><?php esc_html_e('Display Conditions', 'king-addons'); ?></h3>
	1880	+ <p class="ka-wb-modal-desc"><?php esc_html_e('Choose where this template should be displayed', 'king-addons'); ?></p>
	1881	+
	1882	+ <?php if (!$can_use_pro): ?>
	1883	+ <!-- Pro Lock Overlay -->
	1884	+ <div class="ka-wb-modal-locked">
	1885	+ <div class="ka-wb-modal-locked-overlay">
	1886	+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	1887	+ <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
	1888	+ <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
	1889	+ </svg>
	1890	+ <h4><?php esc_html_e('Pro Feature', 'king-addons'); ?></h4>
	1891	+ <p><?php esc_html_e('Advanced display conditions are available in Pro', 'king-addons'); ?></p>
	1892	+ <a href="https://kingaddons.com/pricing/" target="_blank" class="ka-wb-btn ka-wb-btn-primary">
	1893	+ <?php esc_html_e('Upgrade to Pro', 'king-addons'); ?>
	1894	+ </a>
624	1895	</div>
	1896	+ <?php endif; ?>
	1897	+
	1898	+ <form method="post" action="" id="kaWbConditionsForm">
	1899	+ <?php wp_nonce_field('ka_woo_conditions', '_wpnonce'); ?>
	1900	+ <input type="hidden" name="ka_woo_update_conditions" value="1">
	1901	+ <input type="hidden" name="template_id" id="kaWbConditionsId" value="">
	1902	+
	1903	+ <div class="ka-wb-form-group">
	1904	+ <label class="ka-wb-form-label"><?php esc_html_e('Show template on', 'king-addons'); ?></label>
	1905	+ <select name="condition_type" id="kaWbConditionType" class="ka-wb-form-select" onchange="kaWbUpdateConditionValues()">
	1906	+ <!-- Options filled by JS -->
	1907	+ </select>
	1908	+ </div>
	1909	+
	1910	+ <div class="ka-wb-form-group" id="kaWbConditionValuesGroup" style="display: none;">
	1911	+ <label class="ka-wb-form-label"><?php esc_html_e('Select items', 'king-addons'); ?></label>
	1912	+ <div class="ka-wb-checkbox-list" id="kaWbConditionValues">
	1913	+ <!-- Checkboxes filled by JS -->
	1914	+ </div>
	1915	+ </div>
	1916	+
	1917	+ <div class="ka-wb-modal-actions">
	1918	+ <button type="button" class="ka-wb-btn ka-wb-btn-secondary" onclick="kaWbCloseConditions()"><?php esc_html_e('Cancel', 'king-addons'); ?></button>
	1919	+ <button type="submit" class="ka-wb-btn ka-wb-btn-primary" <?php echo !$can_use_pro ? 'disabled' : ''; ?>><?php esc_html_e('Save', 'king-addons'); ?></button>
	1920	+ </div>
625	1921	</form>
	1922	+
	1923	+ <?php if (!$can_use_pro): ?>
	1924	+ </div>
	1925	+ <?php endif; ?>
626	1926	</div>
627	1927	</div>
	1928	+
	1929	+<script>
	1930	+// Condition options data
	1931	+const kaWbConditionOptions = <?php echo wp_json_encode($condition_options); ?>;
	1932	+const kaWbCategories = <?php echo wp_json_encode(array_map(function($cat) {
	1933	+ return ['id' => $cat->term_id, 'name' => $cat->name];
	1934	+}, $product_categories)); ?>;
	1935	+const kaWbTags = <?php echo wp_json_encode(array_map(function($tag) {
	1936	+ return ['id' => $tag->term_id, 'name' => $tag->name];
	1937	+}, $product_tags)); ?>;
	1938	+const kaWbProducts = <?php echo wp_json_encode(array_map(function($product) {
	1939	+ return ['id' => $product->ID, 'name' => $product->post_title];
	1940	+}, $products)); ?>;
	1941	+const kaWbCanUsePro = <?php echo $can_use_pro ? 'true' : 'false'; ?>;
	1942	+
	1943	+let kaWbCurrentConditionValues = [];
	1944	+
	1945	+// Dropdown toggle
	1946	+document.addEventListener('click', function(e) {
	1947	+ const trigger = e.target.closest('.ka-wb-dropdown-trigger');
	1948	+ const dropdown = e.target.closest('.ka-wb-dropdown');
	1949	+
	1950	+ // Close all dropdowns first
	1951	+ document.querySelectorAll('.ka-wb-dropdown.is-open').forEach(function(d) {
	1952	+ if (d !== dropdown) d.classList.remove('is-open');
	1953	+ });
	1954	+
	1955	+ // Toggle clicked dropdown
	1956	+ if (trigger) {
	1957	+ e.preventDefault();
	1958	+ e.stopPropagation();
	1959	+ dropdown.classList.toggle('is-open');
	1960	+ } else if (!dropdown) {
	1961	+ document.querySelectorAll('.ka-wb-dropdown.is-open').forEach(function(d) {
	1962	+ d.classList.remove('is-open');
	1963	+ });
	1964	+ }
	1965	+});
	1966	+
	1967	+// Rename modal
	1968	+function kaWbRename(id, title) {
	1969	+ document.getElementById('kaWbRenameId').value = id;
	1970	+ document.getElementById('kaWbRenameInput').value = title;
	1971	+ document.getElementById('kaWbRenameModal').classList.add('is-open');
	1972	+ setTimeout(function() {
	1973	+ document.getElementById('kaWbRenameInput').focus();
	1974	+ document.getElementById('kaWbRenameInput').select();
	1975	+ }, 100);
	1976	+}
	1977	+
	1978	+function kaWbCloseRename() {
	1979	+ document.getElementById('kaWbRenameModal').classList.remove('is-open');
	1980	+}
	1981	+
	1982	+// Conditions modal
	1983	+function kaWbOpenConditions(templateId, templateType, conditionType, conditionValues) {
	1984	+ document.getElementById('kaWbConditionsId').value = templateId;
	1985	+
	1986	+ // Build select options
	1987	+ const select = document.getElementById('kaWbConditionType');
	1988	+ select.innerHTML = '';
	1989	+ const options = kaWbConditionOptions[templateType] || {'all': 'All'};
	1990	+
	1991	+ for (const [value, label] of Object.entries(options)) {
	1992	+ const option = document.createElement('option');
	1993	+ option.value = value;
	1994	+ option.textContent = label;
	1995	+ if (value === conditionType) option.selected = true;
	1996	+ select.appendChild(option);
	1997	+ }
	1998	+
	1999	+ // Store current values
	2000	+ kaWbCurrentConditionValues = conditionValues || [];
	2001	+
	2002	+ // Update values list
	2003	+ kaWbUpdateConditionValues();
	2004	+
	2005	+ document.getElementById('kaWbConditionsModal').classList.add('is-open');
	2006	+}
	2007	+
	2008	+function kaWbUpdateConditionValues() {
	2009	+ const select = document.getElementById('kaWbConditionType');
	2010	+ const conditionType = select.value;
	2011	+ const valuesGroup = document.getElementById('kaWbConditionValuesGroup');
	2012	+ const valuesContainer = document.getElementById('kaWbConditionValues');
	2013	+
	2014	+ let items = [];
	2015	+
	2016	+ switch (conditionType) {
	2017	+ case 'product_cat':
	2018	+ items = kaWbCategories;
	2019	+ break;
	2020	+ case 'product_tag':
	2021	+ items = kaWbTags;
	2022	+ break;
	2023	+ case 'specific_product':
	2024	+ items = kaWbProducts;
	2025	+ break;
	2026	+ default:
	2027	+ valuesGroup.style.display = 'none';
	2028	+ return;
	2029	+ }
	2030	+
	2031	+ if (items.length === 0) {
	2032	+ valuesGroup.style.display = 'none';
	2033	+ return;
	2034	+ }
	2035	+
	2036	+ valuesGroup.style.display = 'block';
	2037	+ valuesContainer.innerHTML = '';
	2038	+
	2039	+ items.forEach(function(item) {
	2040	+ const isChecked = kaWbCurrentConditionValues.includes(item.id);
	2041	+ const label = document.createElement('label');
	2042	+ label.className = 'ka-wb-checkbox-item';
	2043	+ label.innerHTML = `
	2044	+ <input type="checkbox" name="condition_values[]" value="${item.id}" ${isChecked ? 'checked' : ''}>
	2045	+ <span>${item.name}</span>
	2046	+ `;
	2047	+ valuesContainer.appendChild(label);
	2048	+ });
	2049	+}
	2050	+
	2051	+function kaWbCloseConditions() {
	2052	+ document.getElementById('kaWbConditionsModal').classList.remove('is-open');
	2053	+}
	2054	+
	2055	+// Form submission for conditions
	2056	+document.getElementById('kaWbConditionsForm').addEventListener('submit', function(e) {
	2057	+ if (!kaWbCanUsePro) {
	2058	+ e.preventDefault();
	2059	+ return false;
	2060	+ }
	2061	+
	2062	+ // Update nonce with actual template ID
	2063	+ const templateId = document.getElementById('kaWbConditionsId').value;
	2064	+ const nonceField = this.querySelector('input[name="_wpnonce"]');
	2065	+ // Nonce is already set, let form submit
	2066	+});
	2067	+
	2068	+// Close modal on overlay click
	2069	+document.getElementById('kaWbRenameModal').addEventListener('click', function(e) {
	2070	+ if (e.target === this) kaWbCloseRename();
	2071	+});
	2072	+
	2073	+document.getElementById('kaWbConditionsModal').addEventListener('click', function(e) {
	2074	+ if (e.target === this) kaWbCloseConditions();
	2075	+});
	2076	+
	2077	+// Close modal on Escape key
	2078	+document.addEventListener('keydown', function(e) {
	2079	+ if (e.key === 'Escape') {
	2080	+ kaWbCloseRename();
	2081	+ kaWbCloseConditions();
	2082	+ }
	2083	+});
	2084	+</script>
	2085	+
628	2086	<?php ka_render_dark_theme_script(); ?>