<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

function acewpcf_get_admin_menu_icon_url() {
	static $icon_url = null;

	if ( null !== $icon_url ) {
		return $icon_url;
	}

	$icon_path = ACEWPCF_PLUGIN_PATH . 'assets/images/awp-icon.svg';
	$svg       = is_readable( $icon_path ) ? file_get_contents( $icon_path ) : '';

	if ( ! is_string( $svg ) || '' === trim( $svg ) ) {
		$icon_url = 'dashicons-filter';
		return $icon_url;
	}

	$icon_url = 'data:image/svg+xml;base64,' . base64_encode( trim( $svg ) );

	return $icon_url;
}

function acewpcf_filters_hub_is_registered() {
	global $menu;

	if ( ! is_array( $menu ) ) {
		return false;
	}

	foreach ( $menu as $item ) {
		if ( isset( $item[2] ) && 'ace-filters' === $item[2] ) {
			return true;
		}
	}

	return false;
}

function acewpcf_register_admin_menu() {
	if ( acewpcf_filters_hub_is_registered() ) {
		add_submenu_page(
			'ace-filters',
			__( 'Contents', 'ace-content-filters' ),
			__( 'Contents', 'ace-content-filters' ),
			'manage_options',
			'acewpcf-settings',
			'acewpcf_render_settings_page'
		);
		return;
	}

	add_menu_page(
		esc_html__( 'ACE Content Filters', 'ace-content-filters' ),
		esc_html__( 'ACE Content Filters', 'ace-content-filters' ),
		'manage_options',
		'acewpcf-settings',
		'acewpcf_render_settings_page',
		acewpcf_get_admin_menu_icon_url(),
		56
	);
}
add_action( 'admin_menu', 'acewpcf_register_admin_menu', 10 );

function acewpcf_get_admin_query_arg( $key, $default = '' ) {
	$value = acewpcf_get_request_query_value( $key, null );
	if ( null === $value ) {
		return $default;
	}

	return is_scalar( $value ) ? (string) $value : $default;
}

function acewpcf_get_admin_posted_array( $key ) {
	$value = array();

	// phpcs:disable WordPress.Security.NonceVerification.Missing, WordPress.Security.NonceVerification.Recommended, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized -- Save handlers validate nonces before calling this helper and sanitize fields downstream.
	if ( '' !== $key && isset( $_POST[ $key ] ) ) {
		$value = wp_unslash( $_POST[ $key ] );
	}
	// phpcs:enable WordPress.Security.NonceVerification.Missing, WordPress.Security.NonceVerification.Recommended, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized

	return is_array( $value ) ? $value : array();
}

function acewpcf_has_admin_posted_key( $key ) {
	// phpcs:disable WordPress.Security.NonceVerification.Missing, WordPress.Security.NonceVerification.Recommended -- Save handlers validate nonces before using these presence checks.
	return '' !== $key && isset( $_POST[ $key ] );
	// phpcs:enable WordPress.Security.NonceVerification.Missing, WordPress.Security.NonceVerification.Recommended
}

function acewpcf_enqueue_admin_assets( $hook_suffix ) {
	$current_page = sanitize_key( acewpcf_get_admin_query_arg( 'page' ) );

	if ( 'acewpcf-settings' !== $current_page ) {
		return;
	}

	wp_enqueue_style( 'wp-color-picker' );
	wp_enqueue_style(
		'acewpcf-admin-style',
		ACEWPCF_PLUGIN_URL . 'assets/css/admin.css',
		array( 'wp-color-picker' ),
		acewpcf_get_asset_version( 'assets/css/admin.css' )
	);
	wp_add_inline_style(
		'acewpcf-admin-style',
		'.cpcf-admin .cpcf-sortable-item.cpcf-sortable-item--heading{padding:16px !important;box-sizing:border-box !important;overflow:visible !important;height:auto !important;min-width:0 !important;}'
		. '.cpcf-admin .cpcf-sortable-item--heading .cpcf-sortable-item__body,.cpcf-admin .cpcf-sortable-item--heading .cpcf-sortable-item__heading-field,.cpcf-admin .cpcf-sortable-item--heading .cpcf-sortable-item__toolbar{min-width:0 !important;max-width:100% !important;}'
		. '.cpcf-admin .cpcf-sortable-item--heading input[type="text"]{width:100% !important;max-width:100% !important;min-width:0 !important;margin:0 !important;padding:8px 12px !important;box-sizing:border-box !important;min-height:40px !important;line-height:1.4 !important;}'
	);

	wp_enqueue_script(
		'acewpcf-admin-script',
		ACEWPCF_PLUGIN_URL . 'assets/js/admin.js',
		array( 'jquery', 'jquery-ui-sortable', 'wp-color-picker' ),
		acewpcf_get_asset_version( 'assets/js/admin.js' ),
		true
	);

	wp_add_inline_script(
		'acewpcf-admin-script',
		'window.acewpcfAdminSettings = ' . wp_json_encode(
			array(
				'googleFontsEnabled' => acewpcf_google_fonts_are_enabled(),
				'ajaxUrl'            => admin_url( 'admin-ajax.php' ),
				'previewNonce'       => wp_create_nonce( 'acewpcf_preview_filter' ),
				'contentTaxonomies'  => acewpcf_get_admin_content_taxonomy_map(),
				'i18n'               => array(
					'previewUpdating' => __( 'Updating preview...', 'ace-content-filters' ),
					'previewUpdated'  => __( 'Preview updated.', 'ace-content-filters' ),
					'previewFailed'   => __( 'Preview could not be refreshed. Try again, or save the filter if the problem persists.', 'ace-content-filters' ),
					'noTaxonomies'    => __( 'No taxonomies found', 'ace-content-filters' ),
				),
			)
		) . ';',
		'before'
	);
}
add_action( 'admin_enqueue_scripts', 'acewpcf_enqueue_admin_assets' );

function acewpcf_get_admin_page_url( $args = array() ) {
	$args = wp_parse_args(
		$args,
		array(
			'page' => 'acewpcf-settings',
		)
	);

	return add_query_arg( $args, admin_url( 'admin.php' ) );
}

function acewpcf_get_admin_logo_url() {
	return ACEWPCF_PLUGIN_URL . 'assets/images/awp-logo.svg';
}

function acewpcf_get_admin_taxonomy_label( $taxonomy ) {
	$taxonomy = sanitize_key( (string) $taxonomy );

	$taxonomy_object = get_taxonomy( $taxonomy );

	if ( $taxonomy_object instanceof WP_Taxonomy && ! empty( $taxonomy_object->labels->singular_name ) ) {
		return (string) $taxonomy_object->labels->singular_name;
	}

	return ucwords( str_replace( array( 'pa_', '-', '_' ), array( '', ' ', ' ' ), $taxonomy ) );
}

function acewpcf_get_admin_terms_for_taxonomy( $taxonomy ) {
	static $terms_cache = array();

	$taxonomy = sanitize_key( (string) $taxonomy );

	if ( '' === $taxonomy || ! taxonomy_exists( $taxonomy ) ) {
		return array();
	}

	if ( isset( $terms_cache[ $taxonomy ] ) ) {
		return $terms_cache[ $taxonomy ];
	}

	$terms = get_terms(
		array(
			'taxonomy'   => $taxonomy,
			'hide_empty' => false,
			'orderby'    => 'name',
			'order'      => 'ASC',
		)
	);

	if ( is_wp_error( $terms ) ) {
		$terms_cache[ $taxonomy ] = array();
		return array();
	}

	$terms_cache[ $taxonomy ] = $terms;

	return $terms;
}

function acewpcf_get_admin_term_map( $terms ) {
	$term_map = array();

	foreach ( $terms as $term ) {
		$term_map[ (int) $term->term_id ] = $term;
	}

	return $term_map;
}

function acewpcf_get_admin_term_path( $term, $term_map, $taxonomy ) {
	$taxonomy = sanitize_key( (string) $taxonomy );

	if ( ! is_taxonomy_hierarchical( $taxonomy ) ) {
		return '';
	}

	$ancestor_ids   = array_reverse( get_ancestors( $term->term_id, $taxonomy, 'taxonomy' ) );
	$ancestor_names = array();

	foreach ( $ancestor_ids as $ancestor_id ) {
		if ( isset( $term_map[ $ancestor_id ] ) ) {
			$ancestor_names[] = $term_map[ $ancestor_id ]->name;
		}
	}

	return implode( ' / ', $ancestor_names );
}

function acewpcf_get_admin_term_options( $taxonomy, $terms ) {
	$taxonomy = sanitize_key( (string) $taxonomy );
	$terms    = is_array( $terms ) ? $terms : array();

	if ( empty( $terms ) || ! taxonomy_exists( $taxonomy ) ) {
		return array();
	}

	$term_map       = acewpcf_get_admin_term_map( $terms );
	$taxonomy_label = acewpcf_get_admin_taxonomy_label( $taxonomy );
	$options        = array();

	if ( ! is_taxonomy_hierarchical( $taxonomy ) ) {
		usort(
			$terms,
			static function ( $left, $right ) {
				return strcasecmp( $left->name, $right->name );
			}
		);

		foreach ( $terms as $term ) {
			$options[] = array(
				'taxonomy'      => $taxonomy,
				'taxonomy_label' => $taxonomy_label,
				'term'          => $term,
				'depth'         => 0,
				'path'          => '',
				'search_text'   => strtolower( trim( $term->name . ' ' . $term->slug . ' ' . $taxonomy_label ) ),
			);
		}

		return $options;
	}

	$children = array();
	$seen_ids = array();

	foreach ( $terms as $term ) {
		$parent_id = isset( $term_map[ (int) $term->parent ] ) ? (int) $term->parent : 0;

		if ( ! isset( $children[ $parent_id ] ) ) {
			$children[ $parent_id ] = array();
		}

		$children[ $parent_id ][] = $term;
	}

	foreach ( $children as $parent_id => $child_terms ) {
		usort(
			$child_terms,
			static function ( $left, $right ) {
				return strcasecmp( $left->name, $right->name );
			}
		);

		$children[ $parent_id ] = $child_terms;
	}

	$walk_terms = static function ( $parent_id, $depth ) use ( &$walk_terms, &$options, &$children, &$seen_ids, $taxonomy, $taxonomy_label, $term_map ) {
		if ( empty( $children[ $parent_id ] ) ) {
			return;
		}

		foreach ( $children[ $parent_id ] as $term ) {
			$seen_ids[ (int) $term->term_id ] = true;
			$path                            = acewpcf_get_admin_term_path( $term, $term_map, $taxonomy );

			$options[] = array(
				'taxonomy'       => $taxonomy,
				'taxonomy_label' => $taxonomy_label,
				'term'           => $term,
				'depth'          => $depth,
				'path'           => $path,
				'search_text'    => strtolower( trim( $term->name . ' ' . $term->slug . ' ' . $path . ' ' . $taxonomy_label ) ),
			);

			$walk_terms( (int) $term->term_id, $depth + 1 );
		}
	};

	$walk_terms( 0, 0 );

	foreach ( $terms as $term ) {
		if ( isset( $seen_ids[ (int) $term->term_id ] ) ) {
			continue;
		}

		$path = acewpcf_get_admin_term_path( $term, $term_map, $taxonomy );

		$options[] = array(
			'taxonomy'       => $taxonomy,
			'taxonomy_label' => $taxonomy_label,
			'term'           => $term,
			'depth'          => 0,
			'path'           => $path,
			'search_text'    => strtolower( trim( $term->name . ' ' . $term->slug . ' ' . $path . ' ' . $taxonomy_label ) ),
		);
	}

	return $options;
}

function acewpcf_get_admin_content_taxonomy_map() {
	$map = array();

	foreach ( acewpcf_get_content_type_choices() as $content_type => $label ) {
		unset( $label );
		$map[ $content_type ] = acewpcf_get_content_taxonomy_choices( $content_type );
	}

	return $map;
}

function acewpcf_get_admin_filter_taxonomies( $filter = array() ) {
	$filter       = is_array( $filter ) ? $filter : array();
	$content_type = acewpcf_get_filter_content_type( $filter );

	return acewpcf_get_content_taxonomy_choices( $content_type );
}

function acewpcf_get_admin_term_option_groups( $taxonomies ) {
	$taxonomies = is_array( $taxonomies ) ? $taxonomies : array();
	$groups     = array();

	foreach ( $taxonomies as $taxonomy => $label ) {
		$groups[ $taxonomy ] = acewpcf_get_admin_term_options( $taxonomy, acewpcf_get_admin_terms_for_taxonomy( $taxonomy ) );
	}

	return $groups;
}

function acewpcf_get_filter_mode_label( $selection_mode, $filter = array() ) {
	unset( $filter );

	return 'multiple' === $selection_mode
		? __( 'Multiple / Checkboxes', 'ace-content-filters' )
		: __( 'Single / Buttons', 'ace-content-filters' );
}

function acewpcf_get_filter_source_label( $filter ) {
	$filter = is_array( $filter ) ? $filter : array();
	$source_type = isset( $filter['source_type'] ) ? acewpcf_sanitize_filter_source_type( $filter['source_type'] ) : 'category';
	$choices     = acewpcf_get_filter_source_choices();

	if ( isset( $choices[ $source_type ] ) && ! acewpcf_is_taxonomy_filter_source_type( $source_type ) ) {
		return $choices[ $source_type ];
	}

	$taxonomy = acewpcf_get_filter_taxonomy( $filter );

	if ( '' !== $taxonomy ) {
		return acewpcf_get_admin_taxonomy_label( $taxonomy );
	}

	return isset( $choices[ $source_type ] ) ? $choices[ $source_type ] : $source_type;
}

function acewpcf_get_filter_display_summary_label( $filter ) {
	$filter = is_array( $filter ) ? $filter : array();

	$show_label = ! empty( $filter['show_label'] );
	$show_count = ! empty( $filter['show_count'] );

	if ( function_exists( 'acewpcf_filter_uses_swatches' ) && acewpcf_filter_uses_swatches( $filter ) ) {
		if ( $show_label && $show_count ) {
			return __( 'Swatches + label + count', 'ace-content-filters' );
		}

		if ( $show_label ) {
			return __( 'Swatches + label', 'ace-content-filters' );
		}

		if ( $show_count ) {
			return __( 'Swatches + count', 'ace-content-filters' );
		}

		return __( 'Colour swatches', 'ace-content-filters' );
	}

	if ( $show_label && $show_count ) {
		return __( 'Title + count', 'ace-content-filters' );
	}

	if ( $show_count ) {
		return __( 'Count only', 'ace-content-filters' );
	}

	return __( 'Title only', 'ace-content-filters' );
}

function acewpcf_get_filter_orientation_label( $orientation ) {
	$orientation = acewpcf_sanitize_filter_orientation( $orientation );

	return 'vertical' === $orientation
		? __( 'Vertical / Left bar', 'ace-content-filters' )
		: __( 'Horizontal / Top bar', 'ace-content-filters' );
}

function acewpcf_get_filter_item_summary_label( $filter, $term_ids = array() ) {
	$term_ids = is_array( $term_ids ) ? $term_ids : array();

	if ( acewpcf_is_search_filter( $filter ) ) {
		return __( 'Search box', 'ace-content-filters' );
	}

	if ( acewpcf_is_author_filter( $filter ) || acewpcf_is_date_filter( $filter ) ) {
		$option_count = count( $term_ids );
		/* translators: %d: number of options included in the filter. */
		$option_count_text = _n( '%d option', '%d options', $option_count, 'ace-content-filters' );

		return sprintf( $option_count_text, $option_count );
	}

	/* translators: %d: number of terms included in the filter. */
	$term_count_text = _n( '%d term', '%d terms', count( $term_ids ), 'ace-content-filters' );

	return sprintf( $term_count_text, count( $term_ids ) );
}

function acewpcf_get_filter_term_preview_labels( $filter ) {
	$labels = array();
	$filter = is_array( $filter ) ? $filter : array();

	$terms    = acewpcf_get_filter_terms( isset( $filter['id'] ) ? $filter['id'] : '' );
	$taxonomy = acewpcf_get_filter_taxonomy( $filter );

	if ( empty( $terms ) ) {
		return $labels;
	}

	$term_map       = acewpcf_get_admin_term_map( $terms );
	$taxonomy_label = acewpcf_get_admin_taxonomy_label( $taxonomy );

	foreach ( $terms as $term ) {
		$path  = acewpcf_get_admin_term_path( $term, $term_map, $taxonomy );
		$label = $term->name;

		if ( '' !== $path ) {
			$label = $path . ' / ' . $label;
		}

		$labels[] = $label;

		if ( count( $labels ) >= 3 ) {
			break;
		}
	}

	return $labels;
}

function acewpcf_get_filter_term_preview_label_map( $filter_sets ) {
	$filter_sets     = is_array( $filter_sets ) ? $filter_sets : array();
	$preview_map     = array();
	$terms_by_filter = array();
	$term_ids_by_tax = array();
	$term_maps       = array();

	foreach ( $filter_sets as $filter ) {
		$filter_id                = sanitize_key( isset( $filter['id'] ) ? $filter['id'] : '' );
		$preview_map[ $filter_id ] = array();

		if ( '' === $filter_id || ! acewpcf_filter_uses_terms( $filter ) ) {
			continue;
		}

		$taxonomy = acewpcf_get_filter_taxonomy( $filter );

		if ( ! taxonomy_exists( $taxonomy ) ) {
			continue;
		}

		$term_ids = isset( $filter['term_ids'] ) && is_array( $filter['term_ids'] ) ? $filter['term_ids'] : array();

		if ( empty( $term_ids ) ) {
			continue;
		}

		$term_order = isset( $filter['term_order'] ) && is_array( $filter['term_order'] ) ? $filter['term_order'] : $term_ids;
		$term_ids   = acewpcf_sort_term_ids_by_order( $term_ids, $term_order );
		$term_ids   = array_values( array_filter( array_map( 'absint', $term_ids ) ) );

		if ( empty( $term_ids ) ) {
			continue;
		}

		$terms_by_filter[ $filter_id ] = array(
			'taxonomy' => $taxonomy,
			'term_ids' => $term_ids,
		);

		if ( ! isset( $term_ids_by_tax[ $taxonomy ] ) ) {
			$term_ids_by_tax[ $taxonomy ] = array();
		}

		$term_ids_by_tax[ $taxonomy ] = array_merge( $term_ids_by_tax[ $taxonomy ], $term_ids );
	}

	foreach ( $term_ids_by_tax as $taxonomy => $term_ids ) {
		$term_ids = array_values( array_unique( array_filter( array_map( 'absint', $term_ids ) ) ) );

		if ( empty( $term_ids ) ) {
			$term_maps[ $taxonomy ] = array();
			continue;
		}

		$terms = get_terms(
			array(
				'taxonomy'   => $taxonomy,
				'hide_empty' => false,
				'include'    => $term_ids,
				'orderby'    => 'include',
			)
		);

		$term_maps[ $taxonomy ] = array();

		if ( is_wp_error( $terms ) ) {
			continue;
		}

		foreach ( $terms as $term ) {
			if ( $term instanceof WP_Term ) {
				$term_maps[ $taxonomy ][ (int) $term->term_id ] = $term;
			}
		}
	}

	foreach ( $terms_by_filter as $filter_id => $filter_config ) {
		$taxonomy = $filter_config['taxonomy'];
		$term_map = isset( $term_maps[ $taxonomy ] ) ? $term_maps[ $taxonomy ] : array();
		$labels   = array();

		foreach ( $filter_config['term_ids'] as $term_id ) {
			if ( ! isset( $term_map[ $term_id ] ) ) {
				continue;
			}

			$term  = $term_map[ $term_id ];
			$path  = acewpcf_get_admin_term_path( $term, $term_map, $taxonomy );
			$label = $term->name;

			if ( '' !== $path ) {
				$label = $path . ' / ' . $label;
			}

			$labels[] = $label;

			if ( count( $labels ) >= 3 ) {
				break;
			}
		}

		$preview_map[ $filter_id ] = $labels;
	}

	return $preview_map;
}

function acewpcf_get_filter_panel_preview_labels( $panel, $filter_sets ) {
	$panel       = is_array( $panel ) ? $panel : array();
	$filter_sets = is_array( $filter_sets ) ? $filter_sets : array();
	$labels      = array();
	$filter_ids  = isset( $panel['filter_ids'] ) ? acewpcf_parse_filter_id_list( $panel['filter_ids'] ) : array();

	foreach ( $filter_ids as $filter_id ) {
		if ( ! isset( $filter_sets[ $filter_id ]['name'] ) ) {
			continue;
		}

		$labels[] = $filter_sets[ $filter_id ]['name'];

		if ( count( $labels ) >= 4 ) {
			break;
		}
	}

	return $labels;
}

function acewpcf_render_color_style_field( $field_id, $field_name, $label, $value, $placeholder, $description = '' ) {
	?>
	<div class="cpcf-field cpcf-field--color">
		<label class="cpcf-field__label" for="<?php echo esc_attr( $field_id ); ?>"><?php echo esc_html( $label ); ?></label>
		<input
			type="text"
			class="cpcf-color-field"
			id="<?php echo esc_attr( $field_id ); ?>"
			name="<?php echo esc_attr( $field_name ); ?>"
			value="<?php echo esc_attr( $value ); ?>"
			placeholder="<?php echo esc_attr( $placeholder ); ?>"
		/>
		<?php if ( '' !== $description ) : ?>
			<p class="description"><?php echo esc_html( $description ); ?></p>
		<?php endif; ?>
	</div>
	<?php
}

function acewpcf_render_number_style_field( $field_id, $field_name, $label, $value, $placeholder, $args = array() ) {
	$args = wp_parse_args(
		$args,
		array(
			'min'         => '0',
			'max'         => '',
			'step'        => '1',
			'description' => '',
		)
	);

	?>
	<label class="cpcf-field cpcf-field--number" for="<?php echo esc_attr( $field_id ); ?>">
		<span class="cpcf-field__label"><?php echo esc_html( $label ); ?></span>
		<input
			type="number"
			min="<?php echo esc_attr( $args['min'] ); ?>"
			<?php if ( '' !== (string) $args['max'] ) : ?>max="<?php echo esc_attr( $args['max'] ); ?>"<?php endif; ?>
			step="<?php echo esc_attr( $args['step'] ); ?>"
			class="small-text"
			id="<?php echo esc_attr( $field_id ); ?>"
			name="<?php echo esc_attr( $field_name ); ?>"
			value="<?php echo esc_attr( $value ); ?>"
			placeholder="<?php echo esc_attr( $placeholder ); ?>"
		/>
		<?php if ( '' !== $args['description'] ) : ?>
			<p class="description"><?php echo esc_html( $args['description'] ); ?></p>
		<?php endif; ?>
	</label>
	<?php
}

function acewpcf_render_select_style_field( $field_id, $field_name, $label, $value, $options, $description = '' ) {
	?>
	<label class="cpcf-field" for="<?php echo esc_attr( $field_id ); ?>">
		<span class="cpcf-field__label"><?php echo esc_html( $label ); ?></span>
		<select id="<?php echo esc_attr( $field_id ); ?>" name="<?php echo esc_attr( $field_name ); ?>">
			<?php foreach ( $options as $option_value => $option_label ) : ?>
				<option value="<?php echo esc_attr( $option_value ); ?>" <?php selected( (string) $value, (string) $option_value ); ?>><?php echo esc_html( $option_label ); ?></option>
			<?php endforeach; ?>
		</select>
		<?php if ( '' !== $description ) : ?>
			<p class="description"><?php echo esc_html( $description ); ?></p>
		<?php endif; ?>
	</label>
	<?php
}

function acewpcf_render_font_style_field( $field_id, $field_name, $label, $value, $suggestions ) {
	$input_value = acewpcf_get_font_family_input_value( $value );
	$list_id     = $field_id . '-fonts';
	$google_fonts_enabled = acewpcf_google_fonts_are_enabled();
	$placeholder = $google_fonts_enabled
		? __( 'Theme default or type a Google Font', 'ace-content-filters' )
		: __( 'Theme default or type a font family', 'ace-content-filters' );
	$description = $google_fonts_enabled
		? __( 'Type any Google Font family name. Leave blank to keep the theme font.', 'ace-content-filters' )
		: __( 'Leave blank to keep the theme font. Remote Google Fonts stay off until you enable them in Performance & typography.', 'ace-content-filters' );
	?>
	<label class="cpcf-field cpcf-field--font" for="<?php echo esc_attr( $field_id ); ?>">
		<span class="cpcf-field__label"><?php echo esc_html( $label ); ?></span>
		<input
			type="text"
			class="regular-text cpcf-font-family-field"
			id="<?php echo esc_attr( $field_id ); ?>"
			name="<?php echo esc_attr( $field_name ); ?>"
			value="<?php echo esc_attr( $input_value ); ?>"
			placeholder="<?php echo esc_attr( $placeholder ); ?>"
			list="<?php echo esc_attr( $list_id ); ?>"
			autocomplete="off"
		/>
		<datalist id="<?php echo esc_attr( $list_id ); ?>">
			<?php foreach ( $suggestions as $suggestion ) : ?>
				<option value="<?php echo esc_attr( $suggestion ); ?>"></option>
			<?php endforeach; ?>
		</datalist>
		<p class="description"><?php echo esc_html( $description ); ?></p>
	</label>
	<?php
}

function acewpcf_get_responsive_inherited_style_value( $styles, $mode_key, $field_key ) {
	$styles          = is_array( $styles ) ? $styles : array();
	$responsive      = isset( $styles['responsive'] ) && is_array( $styles['responsive'] ) ? $styles['responsive'] : array();
	$inherited_value = isset( $styles[ $field_key ] ) ? (string) $styles[ $field_key ] : '';
	$inheritance_map = array(
		'laptop' => array(),
		'tablet' => array( 'laptop' ),
		'mobile' => array( 'laptop', 'tablet' ),
	);

	if ( ! isset( $inheritance_map[ $mode_key ] ) ) {
		return $inherited_value;
	}

	foreach ( $inheritance_map[ $mode_key ] as $inherit_mode ) {
		if ( ! empty( $responsive[ $inherit_mode ][ $field_key ] ) ) {
			$inherited_value = (string) $responsive[ $inherit_mode ][ $field_key ];
		}
	}

	return $inherited_value;
}

function acewpcf_render_inline_responsive_fields( $filter_id, $field_prefix, $styles, $mode_key, $mode_config, $field_configs ) {
	$styles        = is_array( $styles ) ? $styles : array();
	$responsive    = isset( $styles['responsive'] ) && is_array( $styles['responsive'] ) ? $styles['responsive'] : array();
	$current_values = isset( $responsive[ $mode_key ] ) && is_array( $responsive[ $mode_key ] ) ? $responsive[ $mode_key ] : acewpcf_get_default_responsive_style_overrides();
	$base_name      = $field_prefix . '[styles][responsive][' . $mode_key . ']';
	/* translators: %s: responsive device label. */
	$responsive_override_format = __( '%s override', 'ace-content-filters' );
	$responsive_override_label  = sprintf( $responsive_override_format, $mode_config['label'] );
	?>
	<div class="cpcf-responsive-inline" data-responsive-mode="<?php echo esc_attr( $mode_key ); ?>" hidden>
		<div class="cpcf-responsive-inline__header">
			<span class="cpcf-responsive-inline__badge"><?php echo esc_html( $responsive_override_label ); ?></span>
			<p><?php echo esc_html__( 'Only change values that should differ on this device. Leave a field empty to inherit the larger-screen style.', 'ace-content-filters' ); ?></p>
		</div>
		<div class="cpcf-field-grid cpcf-field-grid--two">
			<?php foreach ( $field_configs as $field_config ) : ?>
				<?php
				$field_key    = $field_config['key'];
				$field_value  = isset( $current_values[ $field_key ] ) ? $current_values[ $field_key ] : '';
				$placeholder  = acewpcf_get_responsive_inherited_style_value( $styles, $mode_key, $field_key );

				if ( '' === $placeholder && isset( $field_config['fallback'] ) ) {
					$placeholder = (string) $field_config['fallback'];
				}

				acewpcf_render_number_style_field(
					'cpcf-' . $mode_key . '-' . $field_key . '-' . $filter_id,
					$base_name . '[' . $field_key . ']',
					$field_config['label'],
					$field_value,
					$placeholder,
					isset( $field_config['args'] ) ? $field_config['args'] : array()
				);
				?>
			<?php endforeach; ?>
		</div>
	</div>
	<?php
}

function acewpcf_render_style_preview( $filter ) {
	$selection_mode = isset( $filter['selection_mode'] ) ? $filter['selection_mode'] : 'single';
	$orientation    = isset( $filter['orientation'] ) ? acewpcf_sanitize_filter_orientation( $filter['orientation'] ) : 'horizontal';
	$preview_class  = 'cpcf-style-preview' . ( 'multiple' === $selection_mode ? ' is-multiple' : '' ) . ( 'vertical' === $orientation ? ' is-vertical' : '' );
	$mode_label     = ( 'multiple' === $selection_mode ? __( 'Checkbox preview', 'ace-content-filters' ) : __( 'Button preview', 'ace-content-filters' ) ) . ' / ' . ( 'vertical' === $orientation ? __( 'Left bar', 'ace-content-filters' ) : __( 'Top bar', 'ace-content-filters' ) );
	$preview_intro  = __( 'Use this preview to check the default, active, and hover samples while you tune the styling below. If a change does not show up straight away, click Update preview.', 'ace-content-filters' );
	$preview_context_title = __( 'Editing global styles', 'ace-content-filters' );
	$preview_context_description = __( 'The three samples below represent the default, active, and hover button states. Switch to Laptop, Tablet, or Mobile to edit that device inline in the same cards below.', 'ace-content-filters' );
	$preview_devices = array(
		'desktop' => __( 'Desktop', 'ace-content-filters' ),
		'laptop'  => __( 'Laptop', 'ace-content-filters' ),
		'tablet'  => __( 'Tablet', 'ace-content-filters' ),
		'mobile'  => __( 'Mobile', 'ace-content-filters' ),
	);
	?>
	<section class="cpcf-style-card cpcf-style-card--wide cpcf-style-card--preview">
		<div class="cpcf-style-card__heading">
			<div>
				<h4><?php echo esc_html__( 'Preview', 'ace-content-filters' ); ?></h4>
				<p><?php echo esc_html( $preview_intro ); ?></p>
			</div>
		</div>

		<div class="cpcf-preview-toolbar">
			<div class="cpcf-preview-switcher" role="group" aria-label="<?php echo esc_attr__( 'Preview device', 'ace-content-filters' ); ?>">
				<?php foreach ( $preview_devices as $device_key => $device_label ) : ?>
					<button
						type="button"
						class="cpcf-preview-switcher__button<?php echo 'desktop' === $device_key ? ' is-active' : ''; ?>"
						data-preview-device="<?php echo esc_attr( $device_key ); ?>"
						aria-pressed="<?php echo 'desktop' === $device_key ? 'true' : 'false'; ?>"
					>
						<?php echo esc_html( $device_label ); ?>
					</button>
				<?php endforeach; ?>
			</div>
			<div class="cpcf-preview-toolbar__actions">
				<button type="button" class="button button-secondary cpcf-preview-refresh"><?php echo esc_html__( 'Update preview', 'ace-content-filters' ); ?></button>
				<span class="cpcf-preview-mode"><?php echo esc_html( $mode_label ); ?></span>
			</div>
		</div>
		<p class="cpcf-preview-feedback" hidden aria-live="polite"></p>

		<div class="cpcf-preview-context">
			<strong class="cpcf-preview-context__title"><?php echo esc_html( $preview_context_title ); ?></strong>
			<p class="cpcf-preview-context__description"><?php echo esc_html( $preview_context_description ); ?></p>
		</div>

			<div class="cpcf-style-preview-frame">
				<div class="<?php echo esc_attr( $preview_class ); ?>" data-preview-device="desktop" data-preview-kind="taxonomy" data-responsive-editing="1">
				<div class="cpcf-style-preview__taxonomy">
					<div class="cpcf-style-preview__choices">
					<label class="cpcf-style-preview__choice">
						<span class="cpcf-style-preview__state"><?php echo esc_html__( 'Default', 'ace-content-filters' ); ?></span>
						<span class="cpcf-style-preview__choice-row">
							<span class="cpcf-style-preview__checkbox" aria-hidden="true"></span>
							<span class="cpcf-style-preview__button">
								<span class="cpcf-style-preview__swatch" style="--cpcf-preview-swatch-color:#d4a017;" hidden aria-hidden="true"></span>
								<span class="cpcf-style-preview__label" data-default-label="<?php echo esc_attr__( 'Category 1', 'ace-content-filters' ); ?>"><?php echo esc_html__( 'Category 1', 'ace-content-filters' ); ?></span>
								<span class="cpcf-style-preview__count">12</span>
							</span>
						</span>
					</label>

					<label class="cpcf-style-preview__choice is-active">
						<span class="cpcf-style-preview__state"><?php echo esc_html__( 'Active', 'ace-content-filters' ); ?></span>
						<span class="cpcf-style-preview__choice-row">
							<span class="cpcf-style-preview__checkbox" aria-hidden="true"></span>
							<span class="cpcf-style-preview__button">
								<span class="cpcf-style-preview__swatch" style="--cpcf-preview-swatch-color:#1d2327;" hidden aria-hidden="true"></span>
								<span class="cpcf-style-preview__label" data-default-label="<?php echo esc_attr__( 'Category 2', 'ace-content-filters' ); ?>"><?php echo esc_html__( 'Category 2', 'ace-content-filters' ); ?></span>
								<span class="cpcf-style-preview__count">7</span>
							</span>
						</span>
					</label>

					<label class="cpcf-style-preview__choice is-hover">
						<span class="cpcf-style-preview__state"><?php echo esc_html__( 'Hover', 'ace-content-filters' ); ?></span>
						<span class="cpcf-style-preview__choice-row">
							<span class="cpcf-style-preview__checkbox" aria-hidden="true"></span>
							<span class="cpcf-style-preview__button">
								<span class="cpcf-style-preview__swatch" style="--cpcf-preview-swatch-color:#c45c26;" hidden aria-hidden="true"></span>
								<span class="cpcf-style-preview__label" data-default-label="<?php echo esc_attr__( 'Category 3', 'ace-content-filters' ); ?>"><?php echo esc_html__( 'Category 3', 'ace-content-filters' ); ?></span>
								<span class="cpcf-style-preview__count">5</span>
							</span>
						</span>
					</label>
					</div>
				</div>

			</div>
		</div>
	</section>
	<?php
}

function acewpcf_handle_settings_save() {
	if ( ! current_user_can( 'manage_options' ) ) {
		wp_die( esc_html__( 'You are not allowed to manage these settings.', 'ace-content-filters' ) );
	}

	check_admin_referer( 'acewpcf_save_settings' );

	$stored_filters = get_option( ACEWPCF_OPTION_FILTER_SETS, array() );
	$stored_filters = is_array( $stored_filters ) ? $stored_filters : array();
	$posted_filter  = acewpcf_get_admin_posted_array( 'acewpcf_filter' );
	$current_filter_id = isset( $posted_filter['current_id'] ) ? sanitize_key( $posted_filter['current_id'] ) : '';
	$requested_filter_id = isset( $posted_filter['id'] ) ? sanitize_key( $posted_filter['id'] ) : '';

	if ( '' === $current_filter_id ) {
		$current_filter_id = $requested_filter_id;
	}
	$stored_filter  = ( '' !== $current_filter_id && isset( $stored_filters[ $current_filter_id ] ) ) ? $stored_filters[ $current_filter_id ] : array();

	if ( acewpcf_has_admin_posted_key( 'acewpcf_delete_filter' ) ) {
		if ( '' !== $current_filter_id && isset( $stored_filters[ $current_filter_id ] ) ) {
			unset( $stored_filters[ $current_filter_id ] );
		}

		update_option( ACEWPCF_OPTION_FILTER_SETS, $stored_filters );

		wp_safe_redirect(
			acewpcf_get_admin_page_url(
				array(
					'acewpcf_notice' => 'deleted',
				)
			)
		);
		exit;
	}

	$is_new_filter = '' === $current_filter_id || ! isset( $stored_filters[ $current_filter_id ] );

	if ( $is_new_filter ) {
		$current_filter_id      = '';
		$posted_filter['current_id'] = '';
	} else {
		$posted_filter['current_id'] = $current_filter_id;
	}

	$posted_filter['id'] = $requested_filter_id;

	$prepared_filter  = acewpcf_prepare_filter_inputs( $posted_filter, $stored_filter );
	$sanitized_filter = acewpcf_sanitize_filter_set( $current_filter_id, $prepared_filter, array_keys( $stored_filters ) );

	if ( '' === trim( $sanitized_filter['name'] ) ) {
		/* translators: %d: next available filter set number. */
		$default_filter_name = __( 'Filter Set %d', 'ace-content-filters' );
		$sanitized_filter['name'] = sprintf( $default_filter_name, count( $stored_filters ) + 1 );
	}

	if ( '' !== $current_filter_id && $current_filter_id !== $sanitized_filter['id'] ) {
		$stored_panels = get_option( ACEWPCF_OPTION_FILTER_PANELS, array() );
		$stored_panels = is_array( $stored_panels ) ? $stored_panels : array();

		foreach ( $stored_panels as $stored_panel_id => $stored_panel ) {
			$panel_filter_ids = acewpcf_parse_filter_id_list( isset( $stored_panel['filter_ids'] ) ? $stored_panel['filter_ids'] : array() );

			if ( empty( $panel_filter_ids ) ) {
				continue;
			}

			$updated_filter_ids = array();

			foreach ( $panel_filter_ids as $panel_filter_id ) {
				$updated_filter_ids[] = $panel_filter_id === $current_filter_id ? $sanitized_filter['id'] : $panel_filter_id;
			}

			$stored_panel['filter_ids'] = $updated_filter_ids;
			$stored_panels[ $stored_panel_id ] = acewpcf_sanitize_filter_panel( $stored_panel_id, $stored_panel, array_keys( $stored_panels ) );
		}

		update_option( ACEWPCF_OPTION_FILTER_PANELS, $stored_panels );
	}

	$stored_filters = acewpcf_replace_associative_entry_preserving_order( $stored_filters, $current_filter_id, $sanitized_filter['id'], $sanitized_filter );

	update_option( ACEWPCF_OPTION_FILTER_SETS, $stored_filters );

	wp_safe_redirect(
		acewpcf_get_admin_page_url(
			array(
				'acewpcf_action' => 'edit',
				'filter_id'      => $sanitized_filter['id'],
				'acewpcf_notice' => 'saved',
			)
		)
	);
	exit;
}
add_action( 'admin_post_acewpcf_save_settings', 'acewpcf_handle_settings_save' );

function acewpcf_handle_display_settings_save() {
	if ( ! current_user_can( 'manage_options' ) ) {
		wp_die( esc_html__( 'You are not allowed to manage these settings.', 'ace-content-filters' ) );
	}

	check_admin_referer( 'acewpcf_save_display_settings' );

	$stored_settings    = get_option( ACEWPCF_OPTION_DISPLAY_SETTINGS, array() );
	$stored_settings    = is_array( $stored_settings ) ? $stored_settings : array();
	$posted_settings    = acewpcf_get_admin_posted_array( 'acewpcf_display_settings' );
	$sanitized_settings = acewpcf_sanitize_display_settings( $posted_settings );

	update_option( ACEWPCF_OPTION_DISPLAY_SETTINGS, array_merge( $stored_settings, $sanitized_settings ) );

	wp_safe_redirect(
		acewpcf_get_admin_page_url(
			array(
				'acewpcf_notice' => 'display_saved',
			)
		)
	);
	exit;
}
add_action( 'admin_post_acewpcf_save_display_settings', 'acewpcf_handle_display_settings_save' );

function acewpcf_handle_filter_preview_ajax() {
	if ( ! current_user_can( 'manage_options' ) ) {
		wp_send_json_error(
			array(
				'message' => __( 'You are not allowed to preview these settings.', 'ace-content-filters' ),
			),
			403
		);
	}

	check_ajax_referer( 'acewpcf_preview_filter', 'nonce' );

	$stored_filters     = get_option( ACEWPCF_OPTION_FILTER_SETS, array() );
	$stored_filters     = is_array( $stored_filters ) ? $stored_filters : array();
	$posted_filter      = acewpcf_get_admin_posted_array( 'acewpcf_filter' );
	$current_filter_id  = isset( $posted_filter['current_id'] ) ? sanitize_key( $posted_filter['current_id'] ) : '';
	$requested_filter_id = isset( $posted_filter['id'] ) ? sanitize_key( $posted_filter['id'] ) : '';
	$stored_filter      = isset( $stored_filters[ $current_filter_id ] ) ? $stored_filters[ $current_filter_id ] : array();

	if ( '' === $current_filter_id ) {
		$current_filter_id = $requested_filter_id;
	}

	if ( '' === $current_filter_id || ! isset( $stored_filters[ $current_filter_id ] ) ) {
		$current_filter_id            = '';
		$posted_filter['current_id'] = '';
	} else {
		$posted_filter['current_id'] = $current_filter_id;
	}

	$posted_filter['id'] = $requested_filter_id;

	$prepared_filter  = acewpcf_prepare_filter_inputs( $posted_filter, $stored_filter );
	$sanitized_filter = acewpcf_sanitize_filter_set( $current_filter_id, $prepared_filter, array_keys( $stored_filters ) );

	wp_send_json_success(
		array(
			'filter' => $sanitized_filter,
		)
	);
}
add_action( 'wp_ajax_acewpcf_preview_filter', 'acewpcf_handle_filter_preview_ajax' );

function acewpcf_handle_panel_save() {
	if ( ! current_user_can( 'manage_options' ) ) {
		wp_die( esc_html__( 'You are not allowed to manage these settings.', 'ace-content-filters' ) );
	}

	check_admin_referer( 'acewpcf_save_panel' );

	$stored_panels = get_option( ACEWPCF_OPTION_FILTER_PANELS, array() );
	$stored_panels = is_array( $stored_panels ) ? $stored_panels : array();
	$posted_panel  = acewpcf_get_admin_posted_array( 'acewpcf_panel' );
	$current_panel_id = isset( $posted_panel['current_id'] ) ? sanitize_key( $posted_panel['current_id'] ) : '';
	$requested_panel_id = isset( $posted_panel['id'] ) ? sanitize_key( $posted_panel['id'] ) : '';

	if ( '' === $current_panel_id ) {
		$current_panel_id = $requested_panel_id;
	}
	$is_existing_panel = '' !== $current_panel_id && isset( $stored_panels[ $current_panel_id ] );

	if ( acewpcf_has_admin_posted_key( 'acewpcf_delete_panel' ) ) {
		if ( '' !== $current_panel_id && isset( $stored_panels[ $current_panel_id ] ) ) {
			unset( $stored_panels[ $current_panel_id ] );
		}

		update_option( ACEWPCF_OPTION_FILTER_PANELS, $stored_panels );

		wp_safe_redirect(
			acewpcf_get_admin_page_url(
				array(
					'acewpcf_notice' => 'panel_deleted',
				)
			)
		);
		exit;
	}

	if ( empty( acewpcf_get_filter_sets() ) ) {
		wp_safe_redirect(
			acewpcf_get_admin_page_url(
				array(
					'acewpcf_notice' => 'panel_needs_filters',
				)
			)
		);
		exit;
	}

	if ( ! $is_existing_panel ) {
		$current_panel_id      = '';
		$posted_panel['current_id'] = '';
	} else {
		$posted_panel = acewpcf_prepare_panel_inputs( $posted_panel, $stored_panels[ $current_panel_id ] );
		$posted_panel['current_id'] = $current_panel_id;
	}

	$posted_panel['id'] = $requested_panel_id;

	$sanitized_panel = acewpcf_sanitize_filter_panel( $current_panel_id, $posted_panel, array_keys( $stored_panels ) );

	if ( empty( $sanitized_panel['filter_ids'] ) ) {
		wp_safe_redirect(
			acewpcf_get_admin_page_url(
				array(
					'acewpcf_action' => $is_existing_panel ? 'panel_edit' : 'panel_new',
					'panel_id'   => $current_panel_id,
					'acewpcf_notice' => 'panel_requires_filters',
				)
			)
		);
		exit;
	}

	if ( '' === trim( $sanitized_panel['name'] ) ) {
		/* translators: %d: next available filter panel number. */
		$default_panel_name = __( 'Filter Panel %d', 'ace-content-filters' );
		$sanitized_panel['name'] = sprintf( $default_panel_name, count( $stored_panels ) + 1 );
	}

	$stored_panels = acewpcf_replace_associative_entry_preserving_order( $stored_panels, $current_panel_id, $sanitized_panel['id'], $sanitized_panel );

	update_option( ACEWPCF_OPTION_FILTER_PANELS, $stored_panels );

	wp_safe_redirect(
		acewpcf_get_admin_page_url(
			array(
				'acewpcf_action' => 'panel_edit',
				'panel_id'      => $sanitized_panel['id'],
				'acewpcf_notice' => 'panel_saved',
			)
		)
		);
	exit;
}
add_action( 'admin_post_acewpcf_save_panel', 'acewpcf_handle_panel_save' );

function acewpcf_render_admin_notice( $notice ) {
	if ( '' === $notice ) {
		return;
	}

	$messages = array(
		'saved'   => array(
			'class'   => 'notice notice-success is-dismissible',
			'message' => __( 'Filter set saved.', 'ace-content-filters' ),
		),
		'display_saved' => array(
			'class'   => 'notice notice-success is-dismissible',
			'message' => __( 'Typography settings saved.', 'ace-content-filters' ),
		),
		'deleted' => array(
			'class'   => 'notice notice-success is-dismissible',
			'message' => __( 'Filter set deleted.', 'ace-content-filters' ),
		),
		'missing' => array(
			'class'   => 'notice notice-warning is-dismissible',
			'message' => __( 'That filter set no longer exists.', 'ace-content-filters' ),
		),
		'panel_saved' => array(
			'class'   => 'notice notice-success is-dismissible',
			'message' => __( 'Filter panel saved.', 'ace-content-filters' ),
		),
		'panel_deleted' => array(
			'class'   => 'notice notice-success is-dismissible',
			'message' => __( 'Filter panel deleted.', 'ace-content-filters' ),
		),
		'panel_missing' => array(
			'class'   => 'notice notice-warning is-dismissible',
			'message' => __( 'That filter panel no longer exists.', 'ace-content-filters' ),
		),
		'panel_needs_filters' => array(
			'class'   => 'notice notice-warning is-dismissible',
			'message' => __( 'Create at least one filter set before creating a filter panel.', 'ace-content-filters' ),
		),
		'panel_requires_filters' => array(
			'class'   => 'notice notice-warning is-dismissible',
			'message' => __( 'Choose at least one filter set for this panel.', 'ace-content-filters' ),
		),
		'search_saved' => array(
			'class'   => 'notice notice-success is-dismissible',
			'message' => __( 'Content search saved.', 'ace-content-filters' ),
		),
		'search_deleted' => array(
			'class'   => 'notice notice-success is-dismissible',
			'message' => __( 'Content search deleted.', 'ace-content-filters' ),
		),
		'search_missing' => array(
			'class'   => 'notice notice-warning is-dismissible',
			'message' => __( 'That content search no longer exists.', 'ace-content-filters' ),
		),
	);

	$messages = apply_filters( 'acewpcf_admin_notice_messages', $messages );

	if ( ! isset( $messages[ $notice ] ) ) {
		return;
	}
	?>
	<div class="<?php echo esc_attr( $messages[ $notice ]['class'] ); ?>">
		<p><?php echo esc_html( $messages[ $notice ]['message'] ); ?></p>
	</div>
	<?php
}

function acewpcf_render_empty_state() {
	?>
	<section class="cpcf-empty-state">
		<div class="cpcf-empty-state__icon" aria-hidden="true">
			<span class="dashicons dashicons-filter"></span>
		</div>
		<h2><?php echo esc_html__( 'Create the first filter set', 'ace-content-filters' ); ?></h2>
		<p><?php echo esc_html__( 'Start by creating your first filter set, then combine filter sets into a sidebar or top bar panel.', 'ace-content-filters' ); ?></p>
		<a class="button button-primary button-hero" href="<?php echo esc_url( acewpcf_get_admin_page_url( array( 'acewpcf_action' => 'new' ) ) ); ?>"><?php echo esc_html__( 'Create Filter Set', 'ace-content-filters' ); ?></a>
	</section>
	<?php
}

function acewpcf_render_display_settings_panel() {
	$display_settings = acewpcf_get_display_settings();
	?>
	<section class="cpcf-list-panel cpcf-list-panel--settings">
		<div class="cpcf-list-panel__header">
			<div>
				<h2><?php echo esc_html__( 'Performance & Typography', 'ace-content-filters' ); ?></h2>
				<p><?php echo esc_html__( 'Keep remote fonts optional. By default the plugin inherits the site or dashboard font stack and makes no Google Fonts requests.', 'ace-content-filters' ); ?></p>
			</div>
		</div>

		<form class="cpcf-settings-form" method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
			<input type="hidden" name="action" value="acewpcf_save_display_settings" />
			<?php wp_nonce_field( 'acewpcf_save_display_settings' ); ?>

			<div class="cpcf-toggle-grid cpcf-toggle-grid--single">
				<label class="cpcf-toggle-card cpcf-toggle-card--compact">
					<input type="hidden" name="acewpcf_display_settings[enable_google_fonts]" value="0" />
					<input type="checkbox" name="acewpcf_display_settings[enable_google_fonts]" value="1" <?php checked( ! empty( $display_settings['enable_google_fonts'] ) ); ?> />
					<span>
						<strong><?php echo esc_html__( 'Enable Google Fonts loading', 'ace-content-filters' ); ?></strong>
						<small><?php echo esc_html__( 'Turn this on only if you want the plugin to fetch Google Fonts for frontend typography choices or live preview. Leave it off for the best performance and privacy.', 'ace-content-filters' ); ?></small>
					</span>
				</label>
			</div>

			<div class="cpcf-settings-form__actions">
				<?php submit_button( esc_html__( 'Save Typography Settings', 'ace-content-filters' ), 'secondary', 'submit', false ); ?>
			</div>
		</form>
	</section>
	<?php
}


function acewpcf_render_filter_list( $filter_sets ) {
	?>
	<section class="cpcf-list-panel">
		<div class="cpcf-list-panel__header">
			<div>
				<h2><?php echo esc_html__( 'Filter sets', 'ace-content-filters' ); ?></h2>
				<p><?php echo esc_html__( 'Each filter set is reusable. Create focused filters for different content types, archives, or listing sections.', 'ace-content-filters' ); ?></p>
			</div>
			<a class="button button-primary" href="<?php echo esc_url( acewpcf_get_admin_page_url( array( 'acewpcf_action' => 'new' ) ) ); ?>"><?php echo esc_html__( 'New Filter Set', 'ace-content-filters' ); ?></a>
		</div>

		<div class="cpcf-filter-grid">
			<?php foreach ( $filter_sets as $filter ) : ?>
				<?php
				$term_ids           = isset( $filter['term_ids'] ) && is_array( $filter['term_ids'] ) ? $filter['term_ids'] : array();
				$source_label       = acewpcf_get_filter_source_label( $filter );
				$mode_label         = acewpcf_get_filter_mode_label( $filter['selection_mode'], $filter );
				$item_ids           = ( acewpcf_is_author_filter( $filter ) || acewpcf_is_date_filter( $filter ) ) && isset( $filter['option_keys'] ) && is_array( $filter['option_keys'] ) ? $filter['option_keys'] : $term_ids;
				$item_summary_label = acewpcf_get_filter_item_summary_label( $filter, $item_ids );
				$detail_label       = acewpcf_is_search_filter( $filter ) ? __( 'Search', 'ace-content-filters' ) : ( ( acewpcf_is_author_filter( $filter ) || acewpcf_is_date_filter( $filter ) ) ? __( 'Options', 'ace-content-filters' ) : __( 'Terms', 'ace-content-filters' ) );
				?>
				<article class="cpcf-filter-card">
					<div class="cpcf-filter-card__header">
						<div class="cpcf-filter-card__summary">
							<h3><?php echo esc_html( $filter['name'] ); ?></h3>
							<p class="cpcf-filter-card__type"><?php echo esc_html( $mode_label ); ?></p>
							<div class="cpcf-filter-card__details">
								<div class="cpcf-filter-card__detail">
									<span class="cpcf-filter-card__detail-label"><?php echo esc_html__( 'Source', 'ace-content-filters' ); ?></span>
									<span class="cpcf-filter-card__detail-value"><?php echo esc_html( $source_label ); ?></span>
								</div>
								<div class="cpcf-filter-card__detail">
									<span class="cpcf-filter-card__detail-label"><?php echo esc_html( $detail_label ); ?></span>
									<span class="cpcf-filter-card__detail-value"><?php echo esc_html( $item_summary_label ); ?></span>
								</div>
							</div>
						</div>
						<div class="cpcf-filter-card__actions">
							<a class="button button-primary" href="<?php echo esc_url( acewpcf_get_admin_page_url( array( 'acewpcf_action' => 'edit', 'filter_id' => $filter['id'] ) ) ); ?>"><?php echo esc_html__( 'Edit', 'ace-content-filters' ); ?></a>
							<?php do_action( 'acewpcf_filter_card_actions', $filter ); ?>
							<form class="cpcf-inline-form" method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
								<input type="hidden" name="action" value="acewpcf_save_settings" />
								<input type="hidden" name="acewpcf_filter[id]" value="<?php echo esc_attr( $filter['id'] ); ?>" />
								<?php wp_nonce_field( 'acewpcf_save_settings' ); ?>
								<button type="submit" name="acewpcf_delete_filter" value="1" class="button cpcf-button-danger" onclick="return window.confirm('<?php echo esc_js( __( 'Delete this filter set?', 'ace-content-filters' ) ); ?>');"><?php echo esc_html__( 'Delete', 'ace-content-filters' ); ?></button>
							</form>
						</div>
					</div>
				</article>
			<?php endforeach; ?>
		</div>
	</section>
	<?php
}

function acewpcf_render_filter_panel_list( $filter_panels, $filter_sets ) {
	$filter_panels = is_array( $filter_panels ) ? $filter_panels : array();
	$filter_sets   = is_array( $filter_sets ) ? $filter_sets : array();
	$has_filters   = ! empty( $filter_sets );
	?>
	<section class="cpcf-list-panel cpcf-list-panel--panels">
		<div class="cpcf-list-panel__header">
			<div>
				<h2><?php echo esc_html__( 'Filter panels', 'ace-content-filters' ); ?></h2>
				<p><?php echo esc_html__( 'Build your filter sets first, then group them into one panel for combinations like category, color, and size.', 'ace-content-filters' ); ?></p>
				<?php if ( ! $has_filters ) : ?>
					<p class="cpcf-plan-note"><?php echo esc_html__( 'Create at least one filter set before creating a panel.', 'ace-content-filters' ); ?></p>
				<?php endif; ?>
			</div>
			<?php if ( $has_filters ) : ?>
				<a class="button button-primary" href="<?php echo esc_url( acewpcf_get_admin_page_url( array( 'acewpcf_action' => 'panel_new' ) ) ); ?>"><?php echo esc_html__( 'New Filter Panel', 'ace-content-filters' ); ?></a>
			<?php else : ?>
				<button type="button" class="button button-primary" disabled aria-disabled="true"><?php echo esc_html__( 'New Filter Panel', 'ace-content-filters' ); ?></button>
			<?php endif; ?>
		</div>

		<?php if ( empty( $filter_panels ) ) : ?>
			<p class="cpcf-list-panel__empty"><?php echo esc_html__( 'No filter panels yet. Create one panel to keep multiple filters together in one reusable block.', 'ace-content-filters' ); ?></p>
		<?php else : ?>
			<div class="cpcf-filter-grid">
				<?php foreach ( $filter_panels as $panel ) : ?>
					<?php
					$filter_ids = isset( $panel['filter_ids'] ) ? acewpcf_parse_filter_id_list( $panel['filter_ids'] ) : array();
					/* translators: %d: number of filter sets included in the panel. */
					$filter_count_text      = _n( '%d filter set', '%d filter sets', count( $filter_ids ), 'ace-content-filters' );
					$filter_summary_label   = sprintf( $filter_count_text, count( $filter_ids ) );
					?>
					<article class="cpcf-filter-card">
						<div class="cpcf-filter-card__header">
							<div class="cpcf-filter-card__summary">
								<h3><?php echo esc_html( $panel['name'] ); ?></h3>
								<p class="cpcf-filter-card__type"><?php echo esc_html__( 'Filter panel', 'ace-content-filters' ); ?></p>
								<div class="cpcf-filter-card__details cpcf-filter-card__details--single">
									<div class="cpcf-filter-card__detail">
										<span class="cpcf-filter-card__detail-label"><?php echo esc_html__( 'Includes', 'ace-content-filters' ); ?></span>
										<span class="cpcf-filter-card__detail-value"><?php echo esc_html( $filter_summary_label ); ?></span>
									</div>
								</div>
							</div>
							<div class="cpcf-filter-card__actions">
								<a class="button button-primary" href="<?php echo esc_url( acewpcf_get_admin_page_url( array( 'acewpcf_action' => 'panel_edit', 'panel_id' => $panel['id'] ) ) ); ?>"><?php echo esc_html__( 'Edit', 'ace-content-filters' ); ?></a>
								<form class="cpcf-inline-form" method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
									<input type="hidden" name="action" value="acewpcf_save_panel" />
									<input type="hidden" name="acewpcf_panel[id]" value="<?php echo esc_attr( $panel['id'] ); ?>" />
									<?php wp_nonce_field( 'acewpcf_save_panel' ); ?>
									<button type="submit" name="acewpcf_delete_panel" value="1" class="button cpcf-button-danger" onclick="return window.confirm('<?php echo esc_js( __( 'Delete this filter panel?', 'ace-content-filters' ) ); ?>');"><?php echo esc_html__( 'Delete', 'ace-content-filters' ); ?></button>
								</form>
							</div>
						</div>
					</article>
				<?php endforeach; ?>
			</div>
		<?php endif; ?>
	</section>
	<?php
}

function acewpcf_render_filter_form( $filter, $category_options, $is_new ) {
	$filter_id    = $filter['id'];
	$styles       = isset( $filter['styles'] ) && is_array( $filter['styles'] ) ? wp_parse_args( $filter['styles'], acewpcf_get_default_filter_styles() ) : acewpcf_get_default_filter_styles();
	$ajax_enabled = ! empty( $filter['ajax_enabled'] );
	$results_selector = isset( $filter['results_selector'] ) ? (string) $filter['results_selector'] : '';
	$empty_results_message = isset( $filter['empty_results_message'] ) ? (string) $filter['empty_results_message'] : '';
	$source_type  = isset( $filter['source_type'] ) ? acewpcf_sanitize_filter_source_type( $filter['source_type'] ) : 'category';
	$source_taxonomy = acewpcf_get_filter_taxonomy( $filter );
	$content_type = acewpcf_get_filter_content_type( $filter );
	$is_search_filter = 'search' === $source_type;
	$is_options_filter = acewpcf_is_option_list_filter_source_type( $source_type );
	$option_keys  = isset( $filter['option_keys'] ) && is_array( $filter['option_keys'] ) ? $filter['option_keys'] : array();
	$orientation  = isset( $filter['orientation'] ) ? acewpcf_sanitize_filter_orientation( $filter['orientation'] ) : 'horizontal';
	$term_ids     = isset( $filter['term_ids'] ) && is_array( $filter['term_ids'] ) ? $filter['term_ids'] : array();
	$source_choices             = acewpcf_get_filter_source_choices();
	$orientation_choices        = acewpcf_get_filter_orientation_choices();
	$content_taxonomies         = acewpcf_get_content_taxonomy_choices( $content_type );
	$has_registered_content_taxonomies   = ! empty( $content_taxonomies );
	$term_option_groups         = is_array( $category_options ) ? $category_options : array();
	$source_taxonomy_choices    = $content_taxonomies;
	$term_panel_title           = __( 'Filter terms', 'ace-content-filters' );
	$term_panel_description     = __( 'Choose which terms should appear in this filter.', 'ace-content-filters' );
	$source_description         = __( 'Choose whether this filter uses categories, tags, a custom taxonomy, search, author, or date.', 'ace-content-filters' );
	$source_taxonomy_description = __( 'Choose which taxonomy this filter should use for the selected content type.', 'ace-content-filters' );
	$content_type_choices       = acewpcf_get_content_type_choices();
	$date_granularity           = isset( $filter['date_granularity'] ) ? acewpcf_sanitize_date_granularity( $filter['date_granularity'] ) : 'month';
	$search_placeholder         = isset( $filter['search_placeholder'] ) ? (string) $filter['search_placeholder'] : '';

	if ( $is_search_filter ) {
		$term_panel_title       = __( 'Search field', 'ace-content-filters' );
		$term_panel_description = __( 'This filter adds a search box that narrows the current content listing while keeping other active filters.', 'ace-content-filters' );
		$source_description     = acewpcf_get_virtual_filter_source_description( 'search' );
	} elseif ( $is_options_filter ) {
		$term_panel_title       = __( 'Filter options', 'ace-content-filters' );
		$term_panel_description = __( 'Choose which options should appear in this filter.', 'ace-content-filters' );
		$source_description     = acewpcf_get_virtual_filter_source_description( $source_type );
	} elseif ( 'tag' === $source_type ) {
		$source_description = __( 'Use tags assigned to the selected content type.', 'ace-content-filters' );
	} elseif ( 'custom_taxonomy' === $source_type ) {
		$source_description = __( 'Use a custom taxonomy registered for the selected content type, such as portfolio types, event topics, or course categories.', 'ace-content-filters' );
		$source_taxonomy_description = __( 'Choose the taxonomy this filter should use.', 'ace-content-filters' );
	} elseif ( 'category' === $source_type ) {
		$source_description = __( 'Use the categories available for the selected content type.', 'ace-content-filters' );
	}

	if ( 'custom_taxonomy' === $source_type && ! $has_registered_content_taxonomies ) {
		$term_panel_description = __( 'No taxonomies are available yet for this content type. Register a public taxonomy, then return here to choose its terms.', 'ace-content-filters' );
	}
	$responsive_styles      = isset( $styles['responsive'] ) && is_array( $styles['responsive'] ) ? $styles['responsive'] : acewpcf_get_default_responsive_style_settings();
	$responsive_modes       = acewpcf_get_responsive_style_modes();
	$responsive_layouts     = isset( $filter['responsive_layouts'] ) && is_array( $filter['responsive_layouts'] ) ? wp_parse_args( $filter['responsive_layouts'], acewpcf_get_default_filter_responsive_layouts() ) : acewpcf_get_default_filter_responsive_layouts();
	$layout_choices         = acewpcf_get_filter_layout_choices();
	$font_suggestions       = acewpcf_get_font_family_suggestions();
	$font_weight_choices    = acewpcf_get_font_weight_choices();
	$text_transform_choices = acewpcf_get_text_transform_choices();
	$count_display_choices  = acewpcf_get_filter_count_display_mode_choices();
	$term_search_mode_choices = acewpcf_get_filter_term_search_mode_choices();
	$term_search_mode       = isset( $filter['term_search_mode'] ) ? acewpcf_sanitize_filter_term_search_mode( $filter['term_search_mode'] ) : 'terms';
	$term_search_placeholder = isset( $filter['term_search_placeholder'] ) ? (string) $filter['term_search_placeholder'] : '';
	$term_search_empty_message = isset( $filter['term_search_empty_message'] ) ? (string) $filter['term_search_empty_message'] : '';
	$display_mode           = isset( $filter['display_mode'] ) ? acewpcf_sanitize_filter_display_mode( $filter['display_mode'] ) : 'buttons';
	$swatch_shape           = isset( $filter['swatch_shape'] ) ? acewpcf_sanitize_filter_swatch_shape( $filter['swatch_shape'] ) : 'square';
	$swatch_layout          = isset( $filter['swatch_layout'] ) ? acewpcf_sanitize_filter_swatch_layout( $filter['swatch_layout'] ) : 'wrap';
	$term_colors            = isset( $filter['term_colors'] ) && is_array( $filter['term_colors'] ) ? $filter['term_colors'] : array();
	$uses_swatches          = ! $is_options_filter && ! $is_search_filter && 'swatches' === $display_mode;
	$field_prefix         = 'acewpcf_filter';
	$shortcode            = sprintf( '[acewpcf_filter id="%s"]', $filter_id );
	$title                = $is_new ? __( 'Create Filter Set', 'ace-content-filters' ) : __( 'Edit Filter Set', 'ace-content-filters' );
	$responsive_size_args = array(
		'min'  => '0',
		'max'  => '100',
		'step' => '1',
	);
	$responsive_spacing_args = array(
		'min'  => '0',
		'max'  => '60',
		'step' => '1',
	);
	?>
	<form class="cpcf-editor" method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
		<input type="hidden" name="action" value="acewpcf_save_settings" />
		<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[current_id]' ); ?>" value="<?php echo esc_attr( $filter_id ); ?>" />
		<?php wp_nonce_field( 'acewpcf_save_settings' ); ?>

		<section class="cpcf-admin__hero cpcf-editor__hero">
			<div class="cpcf-admin__hero-brand">
				<div class="cpcf-admin__hero-copy">
					<a class="cpcf-back-link" href="<?php echo esc_url( acewpcf_get_admin_page_url() ); ?>">
						<span class="dashicons dashicons-arrow-left-alt2" aria-hidden="true"></span>
						<?php echo esc_html__( 'Back to filters', 'ace-content-filters' ); ?>
					</a>
					<p class="cpcf-admin__eyebrow"><?php echo esc_html__( 'Filter Editor', 'ace-content-filters' ); ?></p>
					<h2 class="cpcf-admin__hero-title"><?php echo esc_html( $title ); ?></h2>
					<p class="cpcf-admin__hero-description"><?php echo esc_html__( 'Build the filter in the same order a site owner thinks about it: identify it, define its behaviour, choose its data, then refine the appearance.', 'ace-content-filters' ); ?></p>
				</div>
			</div>
			<div class="cpcf-admin__hero-actions cpcf-editor__actions">
				<a class="button button-secondary" href="<?php echo esc_url( acewpcf_get_admin_page_url() ); ?>"><?php echo esc_html__( 'Cancel', 'ace-content-filters' ); ?></a>
				<?php submit_button( esc_html__( 'Save Filter Set', 'ace-content-filters' ), 'primary', 'submit', false ); ?>
			</div>
		</section>

		<div class="cpcf-editor__grid">
			<div class="cpcf-editor__main">
				<section id="cpcf-editor-settings" class="cpcf-panel cpcf-panel--primary">
					<div class="cpcf-panel__header cpcf-panel__header--sectioned">
						<div class="cpcf-panel__header-main">
							<div class="cpcf-panel__header-top">
								<h3><?php echo esc_html__( 'Filter settings', 'ace-content-filters' ); ?></h3>
								<span class="cpcf-section-count"><?php echo esc_html__( 'Essential', 'ace-content-filters' ); ?></span>
							</div>
							<p><?php echo esc_html__( 'Set the core configuration here: naming, content type, source, shortcode identity, and how this filter connects to your results.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-editor-section-grid cpcf-editor-section-grid--two">
						<label class="cpcf-field" for="cpcf-filter-name">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Filter set name', 'ace-content-filters' ); ?></span>
							<input type="text" class="regular-text" id="cpcf-filter-name" name="<?php echo esc_attr( $field_prefix . '[name]' ); ?>" value="<?php echo esc_attr( $filter['name'] ); ?>" placeholder="<?php echo esc_attr__( 'Blog Category Filter', 'ace-content-filters' ); ?>" />
						</label>

						<label class="cpcf-field" for="cpcf-filter-shortcode-id">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Shortcode ID', 'ace-content-filters' ); ?></span>
							<input type="text" class="regular-text" id="cpcf-filter-shortcode-id" name="<?php echo esc_attr( $field_prefix . '[id]' ); ?>" value="<?php echo esc_attr( $filter_id ); ?>" placeholder="<?php echo esc_attr__( 'blog-category-filter', 'ace-content-filters' ); ?>" />
							<p class="description"><?php echo esc_html__( 'This is the changeable ID used inside the filter shortcode. Leave it blank to auto-generate one from the filter set name.', 'ace-content-filters' ); ?></p>
						</label>

						<label class="cpcf-field" for="cpcf-filter-content-type">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Content type', 'ace-content-filters' ); ?></span>
							<select id="cpcf-filter-content-type" name="<?php echo esc_attr( $field_prefix . '[content_type]' ); ?>">
								<?php foreach ( $content_type_choices as $content_type_key => $content_type_label ) : ?>
									<option value="<?php echo esc_attr( $content_type_key ); ?>" <?php selected( $content_type, $content_type_key ); ?>><?php echo esc_html( $content_type_label ); ?></option>
								<?php endforeach; ?>
							</select>
							<p class="description"><?php echo esc_html__( 'Choose the posts, pages, or custom post type this filter should target.', 'ace-content-filters' ); ?></p>
						</label>

						<label class="cpcf-field cpcf-filter-source-field" for="cpcf-filter-source-type">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Filter source', 'ace-content-filters' ); ?></span>
							<select id="cpcf-filter-source-type" name="<?php echo esc_attr( $field_prefix . '[source_type]' ); ?>">
								<?php foreach ( $source_choices as $source_key => $source_label ) : ?>
									<option value="<?php echo esc_attr( $source_key ); ?>" <?php selected( $source_type, $source_key ); ?>><?php echo esc_html( $source_label ); ?></option>
								<?php endforeach; ?>
							</select>
							<p class="description"><?php echo esc_html( $source_description ); ?></p>
						</label>

						<label class="cpcf-field" for="cpcf-filter-panel-heading">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Panel heading', 'ace-content-filters' ); ?></span>
							<input type="text" class="regular-text" id="cpcf-filter-panel-heading" name="<?php echo esc_attr( $field_prefix . '[panel_heading]' ); ?>" value="<?php echo esc_attr( isset( $filter['panel_heading'] ) ? $filter['panel_heading'] : '' ); ?>" placeholder="<?php echo esc_attr__( 'Category', 'ace-content-filters' ); ?>" />
							<p class="description"><?php echo esc_html__( 'Shown above this filter. Leave empty if you do not want a heading. An empty heading stays blank, including when the filter is collapsible.', 'ace-content-filters' ); ?></p>
						</label>

						<label class="cpcf-field" for="cpcf-empty-results-message-<?php echo esc_attr( $filter_id ); ?>">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Empty results message', 'ace-content-filters' ); ?></span>
							<input type="text" class="regular-text" id="cpcf-empty-results-message-<?php echo esc_attr( $filter_id ); ?>" name="<?php echo esc_attr( $field_prefix . '[empty_results_message]' ); ?>" value="<?php echo esc_attr( $empty_results_message ); ?>" placeholder="<?php echo esc_attr__( 'No results were found matching your selection.', 'ace-content-filters' ); ?>" />
							<p class="description"><?php echo esc_html__( 'Add custom text to show when no content matches the selected filters.', 'ace-content-filters' ); ?></p>
						</label>
					</div>

					<div class="cpcf-basics-section">
						<span class="cpcf-field__label"><?php echo esc_html__( 'AJAX and results selector', 'ace-content-filters' ); ?></span>
						<p class="description"><?php echo esc_html__( 'Turn on AJAX when this filter targets one specific results area on the page. Reuse it on other pages only if the layout and selector are the same.', 'ace-content-filters' ); ?></p>
						<div class="cpcf-toggle-grid cpcf-toggle-grid--single">
							<label class="cpcf-toggle-card cpcf-toggle-card--compact">
								<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[ajax_enabled]' ); ?>" value="0" />
								<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[ajax_enabled]' ); ?>" value="1" <?php checked( $ajax_enabled ); ?> />
								<span><?php echo esc_html__( 'Enable AJAX filtering for this filter set', 'ace-content-filters' ); ?></span>
							</label>
						</div>
						<label class="cpcf-field" for="cpcf-results-selector-<?php echo esc_attr( $filter_id ); ?>">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Results wrapper selector', 'ace-content-filters' ); ?></span>
							<input type="text" class="regular-text" id="cpcf-results-selector-<?php echo esc_attr( $filter_id ); ?>" name="<?php echo esc_attr( $field_prefix . '[results_selector]' ); ?>" value="<?php echo esc_attr( $results_selector ); ?>" placeholder="#content-results" />
							<p class="description"><?php echo esc_html__( 'Enter one unique CSS selector for your content results area. Example: #content-results or .ace-posts-grid.', 'ace-content-filters' ); ?></p>
							<p class="description"><?php echo esc_html__( 'If you set a CSS ID in Elementor, enter only the raw ID there, for example content-results. Then enter #content-results here. Do not include # in Elementor\'s CSS ID field.', 'ace-content-filters' ); ?></p>
						</label>
					</div>
				</section>

				<section id="cpcf-editor-behaviour" class="cpcf-panel">
					<div class="cpcf-panel__header cpcf-panel__header--sectioned">
						<div class="cpcf-panel__header-main">
							<div class="cpcf-panel__header-top">
								<h3><?php echo esc_html__( 'Behaviour', 'ace-content-filters' ); ?></h3>
								<span class="cpcf-section-count cpcf-section-count--soft"><?php echo esc_html__( 'Workflow', 'ace-content-filters' ); ?></span>
							</div>
							<p><?php echo esc_html__( 'Control how visitors interact with the filter and how it behaves inside larger panels.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-editor-stack">
						<div class="cpcf-editor-section-grid cpcf-editor-section-grid--two">
							<label class="cpcf-field" for="cpcf-filter-orientation">
								<span class="cpcf-field__label"><?php echo esc_html__( 'Layout direction', 'ace-content-filters' ); ?></span>
								<select id="cpcf-filter-orientation" name="<?php echo esc_attr( $field_prefix . '[orientation]' ); ?>">
									<?php foreach ( $orientation_choices as $orientation_key => $orientation_label ) : ?>
										<option value="<?php echo esc_attr( $orientation_key ); ?>" <?php selected( $orientation, $orientation_key ); ?>><?php echo esc_html( $orientation_label ); ?></option>
									<?php endforeach; ?>
								</select>
								<p class="description"><?php echo esc_html__( 'Use horizontal for top bars, or vertical for sidebars and left columns.', 'ace-content-filters' ); ?></p>
							</label>

							<label class="cpcf-field cpcf-filter-count-display-mode" for="cpcf-filter-count-display-mode-<?php echo esc_attr( $filter_id ); ?>">
								<span class="cpcf-field__label"><?php echo esc_html__( 'Count display mode', 'ace-content-filters' ); ?></span>
								<select id="cpcf-filter-count-display-mode-<?php echo esc_attr( $filter_id ); ?>" name="<?php echo esc_attr( $field_prefix . '[count_display_mode]' ); ?>">
									<?php foreach ( $count_display_choices as $count_mode_key => $count_mode_label ) : ?>
										<option value="<?php echo esc_attr( $count_mode_key ); ?>" <?php selected( isset( $filter['count_display_mode'] ) ? $filter['count_display_mode'] : 'contextual', $count_mode_key ); ?>><?php echo esc_html( $count_mode_label ); ?></option>
									<?php endforeach; ?>
								</select>
								<p class="description"><?php echo esc_html__( 'Contextual counts react to other active filters. Static counts always show the stored totals for each term.', 'ace-content-filters' ); ?></p>
							</label>
						</div>

						<div class="cpcf-choice-grid cpcf-filter-behavior-settings">
							<label class="cpcf-choice-card">
								<input type="radio" name="<?php echo esc_attr( $field_prefix . '[selection_mode]' ); ?>" value="single" <?php checked( 'single', $filter['selection_mode'] ); ?> />
								<span>
									<strong><?php echo esc_html__( 'Single selection', 'ace-content-filters' ); ?></strong>
									<small><?php echo esc_html__( 'Shows buttons and allows one choice at a time.', 'ace-content-filters' ); ?></small>
								</span>
							</label>

							<label class="cpcf-choice-card">
								<input type="radio" name="<?php echo esc_attr( $field_prefix . '[selection_mode]' ); ?>" value="multiple" <?php checked( 'multiple', $filter['selection_mode'] ); ?> />
								<span>
									<strong><?php echo esc_html__( 'Multiple selection', 'ace-content-filters' ); ?></strong>
									<small><?php echo esc_html__( 'Shows checkboxes so visitors can combine multiple choices.', 'ace-content-filters' ); ?></small>
								</span>
							</label>
						</div>

						<div class="cpcf-filter-display-mode-settings"<?php echo $is_options_filter ? ' hidden' : ''; ?>>
							<span class="cpcf-field__label"><?php echo esc_html__( 'Display style', 'ace-content-filters' ); ?></span>
							<div class="cpcf-choice-grid">
								<label class="cpcf-choice-card">
									<input type="radio" name="<?php echo esc_attr( $field_prefix . '[display_mode]' ); ?>" value="buttons" <?php checked( 'buttons', $display_mode ); ?> />
									<span>
										<strong><?php echo esc_html__( 'Text buttons', 'ace-content-filters' ); ?></strong>
										<small><?php echo esc_html__( 'The current list of labelled buttons or checkboxes.', 'ace-content-filters' ); ?></small>
									</span>
								</label>

								<label class="cpcf-choice-card cpcf-filter-swatch-mode-option"<?php echo $is_options_filter ? ' hidden' : ''; ?>>
									<input type="radio" name="<?php echo esc_attr( $field_prefix . '[display_mode]' ); ?>" value="swatches" <?php checked( 'swatches', $display_mode ); ?> />
									<span>
										<strong><?php echo esc_html__( 'Colour swatches', 'ace-content-filters' ); ?></strong>
										<small><?php echo esc_html__( 'Show a colour chip for each term. Works on any category, attribute, or taxonomy filter — not only Colour. Set the hex colour in the Data section.', 'ace-content-filters' ); ?></small>
									</span>
								</label>
							</div>

							<div class="cpcf-filter-swatch-extra-settings"<?php echo $uses_swatches ? '' : ' hidden'; ?>>
							<div class="cpcf-filter-swatch-shape-settings">
								<span class="cpcf-field__label"><?php echo esc_html__( 'Swatch shape', 'ace-content-filters' ); ?></span>
								<div class="cpcf-choice-grid">
									<label class="cpcf-choice-card">
										<input type="radio" name="<?php echo esc_attr( $field_prefix . '[swatch_shape]' ); ?>" value="square" <?php checked( 'square', $swatch_shape ); ?> />
										<span>
											<strong><?php echo esc_html__( 'Square', 'ace-content-filters' ); ?></strong>
											<small><?php echo esc_html__( 'Rounded square colour chips.', 'ace-content-filters' ); ?></small>
										</span>
									</label>

									<label class="cpcf-choice-card">
										<input type="radio" name="<?php echo esc_attr( $field_prefix . '[swatch_shape]' ); ?>" value="circle" <?php checked( 'circle', $swatch_shape ); ?> />
										<span>
											<strong><?php echo esc_html__( 'Circle', 'ace-content-filters' ); ?></strong>
											<small><?php echo esc_html__( 'Round colour chips.', 'ace-content-filters' ); ?></small>
										</span>
									</label>
								</div>
							</div>

							<div class="cpcf-filter-swatch-layout-settings">
								<span class="cpcf-field__label"><?php echo esc_html__( 'Swatch layout', 'ace-content-filters' ); ?></span>
								<div class="cpcf-choice-grid">
									<label class="cpcf-choice-card">
										<input type="radio" name="<?php echo esc_attr( $field_prefix . '[swatch_layout]' ); ?>" value="wrap" <?php checked( 'wrap', $swatch_layout ); ?> />
										<span>
											<strong><?php echo esc_html__( 'Spread', 'ace-content-filters' ); ?></strong>
											<small><?php echo esc_html__( 'Chips sit next to each other and wrap onto extra rows.', 'ace-content-filters' ); ?></small>
										</span>
									</label>

									<label class="cpcf-choice-card">
										<input type="radio" name="<?php echo esc_attr( $field_prefix . '[swatch_layout]' ); ?>" value="stack" <?php checked( 'stack', $swatch_layout ); ?> />
										<span>
											<strong><?php echo esc_html__( 'Column', 'ace-content-filters' ); ?></strong>
											<small><?php echo esc_html__( 'Chips stack in a single column, one under the other.', 'ace-content-filters' ); ?></small>
										</span>
									</label>
								</div>
							</div>
							</div>
						</div>

						<div class="cpcf-toggle-grid cpcf-toggle-grid--single cpcf-filter-match-logic-settings"<?php echo ( $is_options_filter || 'multiple' !== $filter['selection_mode'] ) ? ' hidden' : ''; ?>>
							<label class="cpcf-toggle-card cpcf-toggle-card--compact">
								<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[match_logic]' ); ?>" value="or" />
								<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[match_logic]' ); ?>" value="and" <?php checked( 'and', isset( $filter['match_logic'] ) ? $filter['match_logic'] : 'or' ); ?> />
								<span>
									<strong><?php echo esc_html__( 'Require all selected terms (AND)', 'ace-content-filters' ); ?></strong>
									<small><?php echo esc_html__( 'Only for multi-select. When on, content must match every checked term. When off, matching any one term is enough.', 'ace-content-filters' ); ?></small>
								</span>
							</label>
						</div>

						<div class="cpcf-toggle-grid cpcf-toggle-grid--single cpcf-filter-child-terms-settings"<?php echo ( $is_options_filter || 'multiple' !== $filter['selection_mode'] || ! is_taxonomy_hierarchical( $source_taxonomy ) ) ? ' hidden' : ''; ?>>
							<label class="cpcf-toggle-card cpcf-toggle-card--compact">
								<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[include_child_terms]' ); ?>" value="0" />
								<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[include_child_terms]' ); ?>" value="1" <?php checked( ! empty( $filter['include_child_terms'] ) ); ?> />
								<span>
									<strong><?php echo esc_html__( 'Auto-include child terms', 'ace-content-filters' ); ?></strong>
									<small><?php echo esc_html__( 'Only for multi-select hierarchical taxonomies. Checking a parent also checks its child terms in this filter. Works best with OR matching.', 'ace-content-filters' ); ?></small>
								</span>
							</label>
						</div>

						<div class="cpcf-toggle-grid cpcf-toggle-grid--single cpcf-filter-hierarchy-display-settings"<?php echo ( $is_options_filter || ! is_taxonomy_hierarchical( $source_taxonomy ) ) ? ' hidden' : ''; ?>>
							<label class="cpcf-toggle-card cpcf-toggle-card--compact">
								<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[show_term_hierarchy]' ); ?>" value="0" />
								<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[show_term_hierarchy]' ); ?>" value="1" <?php checked( ! empty( $filter['show_term_hierarchy'] ) ); ?> />
								<span>
									<strong><?php echo esc_html__( 'Show nested term indentation', 'ace-content-filters' ); ?></strong>
									<small><?php echo esc_html__( 'Indent child terms under their parents on the frontend. When this is off, terms stay in a flat list using your custom order.', 'ace-content-filters' ); ?></small>
								</span>
							</label>
						</div>

						<div class="cpcf-toggle-grid cpcf-filter-display-settings">
							<label class="cpcf-toggle-card cpcf-filter-show-label-setting">
								<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[show_label]' ); ?>" value="0" />
								<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[show_label]' ); ?>" value="1" <?php checked( ! empty( $filter['show_label'] ) ); ?> />
								<span><?php echo esc_html__( 'Show label', 'ace-content-filters' ); ?></span>
							</label>

							<label class="cpcf-toggle-card cpcf-filter-show-count-setting">
								<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[show_count]' ); ?>" value="0" />
								<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[show_count]' ); ?>" value="1" <?php checked( ! empty( $filter['show_count'] ) ); ?> />
								<span><?php echo esc_html__( 'Show count', 'ace-content-filters' ); ?></span>
							</label>
						</div>

						<div class="cpcf-toggle-grid cpcf-toggle-grid--single cpcf-filter-hide-empty-settings">
							<label class="cpcf-toggle-card cpcf-toggle-card--compact">
								<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[hide_zero_count_terms]' ); ?>" value="0" />
								<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[hide_zero_count_terms]' ); ?>" value="1" <?php checked( ! empty( $filter['hide_zero_count_terms'] ) ); ?> />
								<span>
									<strong><?php echo esc_html__( 'Hide terms with no matching content', 'ace-content-filters' ); ?></strong>
									<small><?php echo esc_html__( 'When other filters narrow the results, hide options whose current count is 0. Selected options stay visible so they can be cleared.', 'ace-content-filters' ); ?></small>
								</span>
							</label>
						</div>

						<div class="cpcf-filter-term-search-settings"<?php echo $is_options_filter ? ' hidden' : ''; ?>>
							<div class="cpcf-editor-section-grid cpcf-editor-section-grid--two">
								<label class="cpcf-field" for="cpcf-filter-term-search-mode-<?php echo esc_attr( $filter_id ); ?>">
									<span class="cpcf-field__label"><?php echo esc_html__( 'In-filter term search', 'ace-content-filters' ); ?></span>
									<select id="cpcf-filter-term-search-mode-<?php echo esc_attr( $filter_id ); ?>" name="<?php echo esc_attr( $field_prefix . '[term_search_mode]' ); ?>">
										<?php foreach ( $term_search_mode_choices as $term_search_key => $term_search_label ) : ?>
											<option value="<?php echo esc_attr( $term_search_key ); ?>" <?php selected( $term_search_mode, $term_search_key ); ?>><?php echo esc_html( $term_search_label ); ?></option>
										<?php endforeach; ?>
									</select>
									<p class="description"><?php echo esc_html__( 'Terms only keeps the current list. Search box and terms adds a search field above the list. Typing matches the start of any word, so C or K finds Calvin Klein, but E does not. Long vertical lists scroll instead of stretching the page.', 'ace-content-filters' ); ?></p>
								</label>
							</div>

							<div class="cpcf-editor-section-grid cpcf-editor-section-grid--two cpcf-filter-term-search-fields"<?php echo ( $is_options_filter || 'terms' === $term_search_mode ) ? ' hidden' : ''; ?>>
								<label class="cpcf-field" for="cpcf-filter-term-search-placeholder-<?php echo esc_attr( $filter_id ); ?>">
									<span class="cpcf-field__label"><?php echo esc_html__( 'Search placeholder', 'ace-content-filters' ); ?></span>
									<input type="text" class="regular-text" id="cpcf-filter-term-search-placeholder-<?php echo esc_attr( $filter_id ); ?>" name="<?php echo esc_attr( $field_prefix . '[term_search_placeholder]' ); ?>" value="<?php echo esc_attr( $term_search_placeholder ); ?>" placeholder="<?php echo esc_attr__( 'Search…', 'ace-content-filters' ); ?>" />
									<p class="description"><?php echo esc_html__( 'Leave blank to use the default Search… label.', 'ace-content-filters' ); ?></p>
								</label>

								<label class="cpcf-field" for="cpcf-filter-term-search-empty-<?php echo esc_attr( $filter_id ); ?>">
									<span class="cpcf-field__label"><?php echo esc_html__( 'No matches message', 'ace-content-filters' ); ?></span>
									<input type="text" class="regular-text" id="cpcf-filter-term-search-empty-<?php echo esc_attr( $filter_id ); ?>" name="<?php echo esc_attr( $field_prefix . '[term_search_empty_message]' ); ?>" value="<?php echo esc_attr( $term_search_empty_message ); ?>" placeholder="<?php echo esc_attr__( 'No matching terms', 'ace-content-filters' ); ?>" />
									<p class="description"><?php echo esc_html__( 'Shown when the typed search does not match any terms. Leave blank to use the default message.', 'ace-content-filters' ); ?></p>
								</label>
							</div>
						</div>

						<div class="cpcf-toggle-grid cpcf-toggle-grid--single cpcf-toggle-grid--after-basics">
							<label class="cpcf-toggle-card cpcf-toggle-card--compact">
								<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[show_panel_heading]' ); ?>" value="0" />
								<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[show_panel_heading]' ); ?>" value="1" <?php checked( ! empty( $filter['show_panel_heading'] ) ); ?> />
								<span>
									<strong><?php echo esc_html__( 'Show panel heading', 'ace-content-filters' ); ?></strong>
									<small><?php echo esc_html__( 'Turn this off to keep the heading saved without showing it in the panel.', 'ace-content-filters' ); ?></small>
								</span>
							</label>
						</div>

						<div class="cpcf-toggle-grid cpcf-toggle-grid--two cpcf-filter-panel-collapse-settings">
							<label class="cpcf-toggle-card cpcf-toggle-card--compact">
								<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[panel_collapsible]' ); ?>" value="0" />
								<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[panel_collapsible]' ); ?>" value="1" <?php checked( ! empty( $filter['panel_collapsible'] ) ); ?> />
								<span>
									<strong><?php echo esc_html__( 'Collapsible inside panels', 'ace-content-filters' ); ?></strong>
									<small><?php echo esc_html__( 'Adds an expand/collapse toggle for this filter. The toggle still works when the panel heading is empty.', 'ace-content-filters' ); ?></small>
								</span>
							</label>

							<label class="cpcf-toggle-card cpcf-toggle-card--compact cpcf-filter-panel-collapse-default">
								<input type="hidden" name="<?php echo esc_attr( $field_prefix . '[panel_collapsed_by_default]' ); ?>" value="0" />
								<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[panel_collapsed_by_default]' ); ?>" value="1" <?php checked( ! empty( $filter['panel_collapsed_by_default'] ) ); ?> <?php disabled( empty( $filter['panel_collapsible'] ) ); ?> />
								<span>
									<strong><?php echo esc_html__( 'Start collapsed', 'ace-content-filters' ); ?></strong>
									<small><?php echo esc_html__( 'Starts this filter closed until a visitor opens it.', 'ace-content-filters' ); ?></small>
								</span>
							</label>
						</div>

					</div>
				</section>

				<section id="cpcf-editor-data" class="cpcf-panel cpcf-panel--categories cpcf-panel--terms">
					<div class="cpcf-panel__header cpcf-panel__header--with-tools cpcf-panel__header--sectioned">
						<div class="cpcf-panel__header-main">
							<div class="cpcf-panel__header-top">
								<h3><?php echo esc_html( $term_panel_title ); ?></h3>
								<span class="cpcf-section-count cpcf-section-count--soft"><?php echo esc_html__( 'Data', 'ace-content-filters' ); ?></span>
							</div>
							<p><?php echo esc_html( $term_panel_description ); ?></p>
							<p class="cpcf-term-color-hint"<?php echo $uses_swatches ? '' : ' hidden'; ?>><?php echo esc_html__( 'Colour swatches are on. Choose a hex colour for each selected term.', 'ace-content-filters' ); ?></p>
						</div>
						<input type="search" class="cpcf-category-search" placeholder="<?php echo esc_attr__( 'Search by name, slug, or path', 'ace-content-filters' ); ?>" />
					</div>

					<div class="cpcf-editor-stack">
						<label class="cpcf-field cpcf-source-taxonomy-field" for="cpcf-filter-source-taxonomy"<?php echo in_array( $source_type, array( 'custom_taxonomy', 'tag' ), true ) ? '' : ' hidden'; ?>>
							<span class="cpcf-field__label"><?php echo esc_html__( 'Source taxonomy', 'ace-content-filters' ); ?></span>
							<select id="cpcf-filter-source-taxonomy" name="<?php echo esc_attr( $field_prefix . '[source_taxonomy]' ); ?>" data-content-taxonomy-options="<?php echo esc_attr( wp_json_encode( $content_taxonomies ) ); ?>">
								<?php if ( empty( $source_taxonomy_choices ) ) : ?>
									<option value=""><?php echo esc_html__( 'No taxonomies found', 'ace-content-filters' ); ?></option>
								<?php else : ?>
									<?php foreach ( $source_taxonomy_choices as $taxonomy_key => $taxonomy_label ) : ?>
										<option value="<?php echo esc_attr( $taxonomy_key ); ?>" <?php selected( $source_taxonomy, $taxonomy_key ); ?>><?php echo esc_html( $taxonomy_label ); ?></option>
									<?php endforeach; ?>
								<?php endif; ?>
							</select>
							<p class="description"><?php echo esc_html( $source_taxonomy_description ); ?></p>
							<?php if ( 'custom_taxonomy' === $source_type && ! $has_registered_content_taxonomies ) : ?>
								<p class="description"><?php echo esc_html__( 'This source becomes available when the selected content type has registered taxonomies.', 'ace-content-filters' ); ?></p>
							<?php endif; ?>
						</label>

						<label class="cpcf-field cpcf-search-placeholder-field" for="cpcf-filter-search-placeholder"<?php echo $is_search_filter ? '' : ' hidden'; ?>>
							<span class="cpcf-field__label"><?php echo esc_html__( 'Search placeholder', 'ace-content-filters' ); ?></span>
							<input type="text" class="regular-text" id="cpcf-filter-search-placeholder" name="<?php echo esc_attr( $field_prefix . '[search_placeholder]' ); ?>" value="<?php echo esc_attr( $search_placeholder ); ?>" placeholder="<?php echo esc_attr__( 'Search articles…', 'ace-content-filters' ); ?>" />
							<p class="description"><?php echo esc_html__( 'Shown inside the search box on the frontend.', 'ace-content-filters' ); ?></p>
						</label>

						<label class="cpcf-field cpcf-date-granularity-field" for="cpcf-filter-date-granularity"<?php echo 'date' === $source_type ? '' : ' hidden'; ?>>
							<span class="cpcf-field__label"><?php echo esc_html__( 'Date grouping', 'ace-content-filters' ); ?></span>
							<select id="cpcf-filter-date-granularity" name="<?php echo esc_attr( $field_prefix . '[date_granularity]' ); ?>">
								<option value="month" <?php selected( $date_granularity, 'month' ); ?>><?php echo esc_html__( 'Month and year', 'ace-content-filters' ); ?></option>
								<option value="year" <?php selected( $date_granularity, 'year' ); ?>><?php echo esc_html__( 'Year only', 'ace-content-filters' ); ?></option>
							</select>
							<p class="description"><?php echo esc_html__( 'Choose how publish dates are grouped in this filter.', 'ace-content-filters' ); ?></p>
						</label>

						<div class="cpcf-term-panel-meta"<?php echo ( $is_search_filter || $is_options_filter ) ? ' hidden' : ''; ?>>
							<span class="cpcf-badge cpcf-badge--subtle"><?php echo esc_html( $is_options_filter ? acewpcf_get_filter_source_label( $filter ) : acewpcf_get_admin_taxonomy_label( $source_taxonomy ) ); ?></span>
						</div>

						<?php $stored_term_order = isset( $filter['term_order'] ) && is_array( $filter['term_order'] ) ? $filter['term_order'] : $term_ids; ?>
						<?php $term_order_map = array_flip( array_map( 'intval', $stored_term_order ) ); ?>
						<?php if ( empty( $term_option_groups ) && ! $is_options_filter && ! $is_search_filter ) : ?>
							<p><?php echo esc_html__( 'No filter terms found.', 'ace-content-filters' ); ?></p>
						<?php elseif ( ! empty( $term_option_groups ) ) : ?>
							<div class="cpcf-term-list-panels"<?php echo ( $is_options_filter || $is_search_filter ) ? ' hidden' : ''; ?>>
								<?php foreach ( $term_option_groups as $taxonomy => $term_options ) : ?>
									<?php $is_active_taxonomy = $taxonomy === $source_taxonomy; ?>
									<div class="cpcf-term-list-panel" data-source-taxonomy="<?php echo esc_attr( $taxonomy ); ?>" data-hierarchical="<?php echo is_taxonomy_hierarchical( $taxonomy ) ? '1' : '0'; ?>"<?php echo $is_active_taxonomy ? '' : ' hidden'; ?>>
										<?php if ( empty( $term_options ) ) : ?>
											<p class="cpcf-term-list-empty"><?php echo esc_html__( 'No terms found for this source.', 'ace-content-filters' ); ?></p>
										<?php else : ?>
											<div class="cpcf-terms-workspace">
												<div class="cpcf-terms-workspace__list">
													<div class="cpcf-category-list">
														<?php
														/* translators: %s: term name. */
														$colour_picker_aria_format = __( 'Colour for %s', 'ace-content-filters' );
														/* translators: %s: term name. */
														$colour_hex_aria_format = __( 'Hex colour for %s', 'ace-content-filters' );
														?>
														<?php foreach ( $term_options as $option ) : ?>
															<?php
															$term       = $option['term'];
															$path       = $option['path'];
															if ( '' !== $path ) {
																$path_label = $path;
															} elseif ( 'category' === $taxonomy ) {
																$path_label = __( 'Top level category', 'ace-content-filters' );
															} else {
																/* translators: %s: taxonomy label. */
																$taxonomy_term_label = __( '%s term', 'ace-content-filters' );
																$path_label          = sprintf( $taxonomy_term_label, $option['taxonomy_label'] );
															}
															$checked    = $is_active_taxonomy && in_array( (int) $term->term_id, $term_ids, true );
															$order_position = isset( $term_order_map[ (int) $term->term_id ] ) ? (string) ( $term_order_map[ (int) $term->term_id ] + 1 ) : '';
															$term_color = '';
															if ( ! empty( $term_colors[ (int) $term->term_id ] ) ) {
																$term_color = acewpcf_normalize_hex_color( $term_colors[ (int) $term->term_id ] );
															} elseif ( ! empty( $term_colors[ (string) $term->term_id ] ) ) {
																$term_color = acewpcf_normalize_hex_color( $term_colors[ (string) $term->term_id ] );
															}
															$picker_value = $term_color ? $term_color : '#d0d5dd';
															$show_color_wrap = $uses_swatches && $checked;
															?>
															<div class="cpcf-category-option" data-search="<?php echo esc_attr( $option['search_text'] ); ?>">
																<label class="cpcf-category-option__select">
																	<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[term_ids][]' ); ?>" value="<?php echo esc_attr( $term->term_id ); ?>" data-order-title="<?php echo esc_attr( $term->name ); ?>" data-order-meta="<?php echo esc_attr( $path_label ); ?>" data-order-position="<?php echo esc_attr( $order_position ); ?>" <?php checked( $checked ); ?> <?php disabled( ! $is_active_taxonomy ); ?> />
																	<span class="cpcf-category-option__body" style="--cpcf-depth: <?php echo esc_attr( (string) $option['depth'] ); ?>;">
																		<span class="cpcf-category-option__topline">
																			<span class="cpcf-category-option__name"><?php echo esc_html( $term->name ); ?></span>
																			<span class="cpcf-category-option__slug"><?php echo esc_html( $term->slug ); ?></span>
																		</span>
																		<span class="cpcf-category-option__path"><?php echo esc_html( $path_label ); ?></span>
																	</span>
																</label>
																<span class="cpcf-term-color-wrap"<?php echo $show_color_wrap ? '' : ' hidden'; ?>>
																	<span class="cpcf-term-color-wrap__label"><?php echo esc_html__( 'Colour', 'ace-content-filters' ); ?></span>
																	<input
																		type="color"
																		class="cpcf-term-color-picker"
																		value="<?php echo esc_attr( $picker_value ); ?>"
																		<?php disabled( ! $is_active_taxonomy ); ?>
																		aria-label="<?php echo esc_attr( sprintf( $colour_picker_aria_format, $term->name ) ); ?>"
																	/>
																	<input
																		type="text"
																		class="cpcf-term-color-hex"
																		name="<?php echo esc_attr( $field_prefix . '[term_colors][' . $term->term_id . ']' ); ?>"
																		value="<?php echo esc_attr( $term_color ); ?>"
																		maxlength="7"
																		placeholder="#d0d5dd"
																		spellcheck="false"
																		autocomplete="off"
																		<?php disabled( ! $is_active_taxonomy ); ?>
																		aria-label="<?php echo esc_attr( sprintf( $colour_hex_aria_format, $term->name ) ); ?>"
																	/>
																</span>
															</div>
														<?php endforeach; ?>
													</div>
												</div>
												<div class="cpcf-terms-workspace__order">
													<div class="cpcf-selection-order-panel cpcf-selection-order-panel--side">
														<span class="cpcf-field__label"><?php echo esc_html__( 'Selected terms', 'ace-content-filters' ); ?></span>
														<p class="description"><?php echo esc_html__( 'Drag selected terms to choose their display order. Only selected terms appear here.', 'ace-content-filters' ); ?></p>
														<div class="cpcf-sortable-list cpcf-sortable-list--terms" data-order-input-name="<?php echo esc_attr( $field_prefix . '[term_order]' ); ?>" data-empty-label="<?php echo esc_attr__( 'Select terms above to reorder them.', 'ace-content-filters' ); ?>"></div>
													</div>
												</div>
											</div>
										<?php endif; ?>
									</div>
								<?php endforeach; ?>
							</div>
							<p class="cpcf-category-search-empty" hidden><?php echo esc_html__( 'No terms match your search.', 'ace-content-filters' ); ?></p>
						<?php endif; ?>

						<div class="cpcf-option-list-panels"<?php echo $is_options_filter ? '' : ' hidden'; ?>>
							<?php
							$option_source_types = acewpcf_get_option_list_filter_source_types();
							$stored_option_order   = isset( $filter['option_order'] ) && is_array( $filter['option_order'] ) ? $filter['option_order'] : $option_keys;
							$option_order_map      = array();

							foreach ( array_values( $stored_option_order ) as $option_order_index => $option_order_key ) {
								$option_order_key = sanitize_title( (string) $option_order_key );

								if ( '' !== $option_order_key && ! isset( $option_order_map[ $option_order_key ] ) ) {
									$option_order_map[ $option_order_key ] = $option_order_index + 1;
								}
							}
							?>
							<?php foreach ( $option_source_types as $option_source_type ) : ?>
								<?php
								$option_definitions = acewpcf_get_virtual_option_definitions(
									array(
										'source_type'      => $option_source_type,
										'content_type'     => $content_type,
										'date_granularity' => $date_granularity,
									)
								);
								$is_active_options  = $option_source_type === $source_type;
								$active_option_keys = $is_active_options ? $option_keys : array_keys( $option_definitions );
								?>
								<div class="cpcf-term-list-panel cpcf-option-list-panel" data-source-type="<?php echo esc_attr( $option_source_type ); ?>" data-hierarchical="0"<?php echo $is_active_options ? '' : ' hidden'; ?>>
									<div class="cpcf-terms-workspace">
										<div class="cpcf-terms-workspace__list">
											<div class="cpcf-category-list">
												<?php foreach ( $option_definitions as $option_key => $option_label ) : ?>
													<?php
													$checked        = in_array( $option_key, $active_option_keys, true );
													$order_position = isset( $option_order_map[ $option_key ] ) ? (string) $option_order_map[ $option_key ] : '';
													$order_title = $option_label;
													?>
													<div class="cpcf-category-option" data-search="<?php echo esc_attr( strtolower( $order_title . ' ' . $option_key ) ); ?>">
														<label class="cpcf-category-option__select">
															<input type="checkbox" name="<?php echo esc_attr( $field_prefix . '[option_keys][]' ); ?>" value="<?php echo esc_attr( $option_key ); ?>" data-order-title="<?php echo esc_attr( $order_title ); ?>" data-order-meta="<?php echo esc_attr( $option_key ); ?>" data-order-position="<?php echo esc_attr( $order_position ); ?>" <?php checked( $checked ); ?> <?php disabled( ! $is_active_options ); ?> />
															<span class="cpcf-category-option__body" style="--cpcf-depth: 0;">
																<span class="cpcf-category-option__topline">
																	<span class="cpcf-category-option__name"><?php echo esc_html( $option_label ); ?></span>
																	<span class="cpcf-category-option__slug"><?php echo esc_html( $option_key ); ?></span>
																</span>
															</span>
														</label>
													</div>
												<?php endforeach; ?>
											</div>
										</div>
										<div class="cpcf-terms-workspace__order">
											<div class="cpcf-selection-order-panel cpcf-selection-order-panel--side">
												<span class="cpcf-field__label"><?php echo esc_html__( 'Selected options', 'ace-content-filters' ); ?></span>
												<p class="description"><?php echo esc_html__( 'Drag selected options to choose their display order. Only selected options appear here.', 'ace-content-filters' ); ?></p>
												<div class="cpcf-sortable-list cpcf-sortable-list--terms" data-order-input-name="<?php echo esc_attr( $field_prefix . '[option_order]' ); ?>" data-empty-label="<?php echo esc_attr__( 'Select options above to reorder them.', 'ace-content-filters' ); ?>"></div>
											</div>
										</div>
									</div>
								</div>
							<?php endforeach; ?>
						</div>
					</div>
				</section>

				<section id="cpcf-editor-appearance" class="cpcf-panel cpcf-panel--styles">
					<div class="cpcf-panel__header cpcf-panel__header--sectioned">
						<div class="cpcf-panel__header-main">
							<div class="cpcf-panel__header-top">
								<h3><?php echo esc_html__( 'Appearance', 'ace-content-filters' ); ?></h3>
								<span class="cpcf-section-count cpcf-section-count--soft"><?php echo esc_html__( 'Preview', 'ace-content-filters' ); ?></span>
							</div>
							<p><?php echo esc_html__( 'Preview the filter first, then fine-tune layout, typography, surfaces, and interaction styles in grouped cards below.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-style-grid">
				<?php acewpcf_render_style_preview( $filter ); ?>

				<section class="cpcf-style-card cpcf-style-card--wide cpcf-style-card--taxonomy-only">
					<div class="cpcf-style-card__heading">
						<div>
							<h4><?php echo esc_html__( 'Responsive layout', 'ace-content-filters' ); ?></h4>
							<p><?php echo esc_html__( 'Choose how single-selection filters switch between the full list and the compact dropdown pattern on smaller devices.', 'ace-content-filters' ); ?></p>
						</div>
					</div>
					<div class="cpcf-field-grid cpcf-field-grid--two">
						<label class="cpcf-field" for="cpcf-tablet-layout-<?php echo esc_attr( $filter_id ); ?>">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Tablet layout', 'ace-content-filters' ); ?></span>
							<select id="cpcf-tablet-layout-<?php echo esc_attr( $filter_id ); ?>" name="<?php echo esc_attr( $field_prefix . '[responsive_layouts][tablet]' ); ?>">
								<?php foreach ( $layout_choices as $layout_key => $layout_label ) : ?>
									<option value="<?php echo esc_attr( $layout_key ); ?>" <?php selected( $responsive_layouts['tablet'], $layout_key ); ?>><?php echo esc_html( $layout_label ); ?></option>
								<?php endforeach; ?>
							</select>
							<p class="description"><?php echo esc_html__( 'Choose whether tablet visitors see the full list or a compact dropdown.', 'ace-content-filters' ); ?></p>
						</label>

						<label class="cpcf-field" for="cpcf-mobile-layout-<?php echo esc_attr( $filter_id ); ?>">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Mobile layout', 'ace-content-filters' ); ?></span>
							<select id="cpcf-mobile-layout-<?php echo esc_attr( $filter_id ); ?>" name="<?php echo esc_attr( $field_prefix . '[responsive_layouts][mobile]' ); ?>">
								<?php foreach ( $layout_choices as $layout_key => $layout_label ) : ?>
									<option value="<?php echo esc_attr( $layout_key ); ?>" <?php selected( $responsive_layouts['mobile'], $layout_key ); ?>><?php echo esc_html( $layout_label ); ?></option>
								<?php endforeach; ?>
							</select>
							<p class="description"><?php echo esc_html__( 'Use dropdown mode when the full list feels too long on phones.', 'ace-content-filters' ); ?></p>
						</label>
					</div>
				</section>

				<section class="cpcf-style-card">
					<div class="cpcf-style-card__heading">
						<div>
							<h4><?php echo esc_html__( 'Panel heading', 'ace-content-filters' ); ?></h4>
							<p><?php echo esc_html__( 'These styles affect the optional heading shown above this filter when it is used inside a saved panel. When collapsible mode is enabled, the toggle icon sits on this same row.', 'ace-content-filters' ); ?></p>
						</div>
					</div>
					<div class="cpcf-field-grid cpcf-field-grid--two">
						<?php acewpcf_render_color_style_field( 'cpcf-panel-heading-color-' . $filter_id, $field_prefix . '[styles][panel_heading_color]', __( 'Color', 'ace-content-filters' ), $styles['panel_heading_color'], '#1d2327' ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-panel-heading-size-' . $filter_id, $field_prefix . '[styles][panel_heading_font_size]', __( 'Font size (px)', 'ace-content-filters' ), $styles['panel_heading_font_size'], '18' ); ?>
						<?php acewpcf_render_color_style_field( 'cpcf-panel-toggle-color-' . $filter_id, $field_prefix . '[styles][panel_toggle_icon_color]', __( 'Toggle icon color', 'ace-content-filters' ), $styles['panel_toggle_icon_color'], '#1d2327' ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-panel-toggle-size-' . $filter_id, $field_prefix . '[styles][panel_toggle_icon_size]', __( 'Toggle icon size (px)', 'ace-content-filters' ), $styles['panel_toggle_icon_size'], '18', array( 'min' => '10', 'max' => '40', 'step' => '1' ) ); ?>
						<?php acewpcf_render_color_style_field( 'cpcf-panel-toggle-hover-color-' . $filter_id, $field_prefix . '[styles][panel_toggle_hover_icon_color]', __( 'Toggle hover color', 'ace-content-filters' ), $styles['panel_toggle_hover_icon_color'], '#1d2327' ); ?>
						<?php acewpcf_render_color_style_field( 'cpcf-panel-toggle-hover-background-' . $filter_id, $field_prefix . '[styles][panel_toggle_hover_background_color]', __( 'Toggle hover background', 'ace-content-filters' ), $styles['panel_toggle_hover_background_color'], '#f8f2e7' ); ?>
						<?php acewpcf_render_color_style_field( 'cpcf-panel-toggle-active-color-' . $filter_id, $field_prefix . '[styles][panel_toggle_active_icon_color]', __( 'Toggle active color', 'ace-content-filters' ), $styles['panel_toggle_active_icon_color'], '#1d2327' ); ?>
						<?php acewpcf_render_color_style_field( 'cpcf-panel-toggle-active-background-' . $filter_id, $field_prefix . '[styles][panel_toggle_active_background_color]', __( 'Toggle active background', 'ace-content-filters' ), $styles['panel_toggle_active_background_color'], '#f8f2e7' ); ?>
						<?php acewpcf_render_font_style_field( 'cpcf-panel-heading-font-' . $filter_id, $field_prefix . '[styles][panel_heading_font_family]', __( 'Font family', 'ace-content-filters' ), $styles['panel_heading_font_family'], $font_suggestions ); ?>
						<?php acewpcf_render_select_style_field( 'cpcf-panel-heading-weight-' . $filter_id, $field_prefix . '[styles][panel_heading_font_weight]', __( 'Font weight', 'ace-content-filters' ), $styles['panel_heading_font_weight'], $font_weight_choices ); ?>
						<?php acewpcf_render_select_style_field( 'cpcf-panel-heading-transform-' . $filter_id, $field_prefix . '[styles][panel_heading_text_transform]', __( 'Text transform', 'ace-content-filters' ), $styles['panel_heading_text_transform'], $text_transform_choices ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-panel-heading-spacing-' . $filter_id, $field_prefix . '[styles][panel_heading_letter_spacing]', __( 'Letter spacing (px)', 'ace-content-filters' ), $styles['panel_heading_letter_spacing'], '0', array( 'min' => '-10', 'max' => '20', 'step' => '0.1' ) ); ?>
					</div>
					<?php foreach ( $responsive_modes as $mode_key => $mode_config ) : ?>
						<?php
						acewpcf_render_inline_responsive_fields(
							$filter_id,
							$field_prefix,
							$styles,
							$mode_key,
							$mode_config,
							array(
								array(
									'key'      => 'panel_heading_font_size',
									'label'    => __( 'Heading size (px)', 'ace-content-filters' ),
									'fallback' => $styles['panel_heading_font_size'],
									'args'     => $responsive_size_args,
								),
							)
						);
						?>
					<?php endforeach; ?>
				</section>

				<section class="cpcf-style-card cpcf-style-card--taxonomy-only cpcf-style-card--label-styles">
					<div class="cpcf-style-card__heading">
						<div>
							<h4><?php echo esc_html__( 'Term label', 'ace-content-filters' ); ?></h4>
							<p><?php echo esc_html__( 'Styles the name shown on each option, including colour swatch labels when Show label is on.', 'ace-content-filters' ); ?></p>
						</div>
					</div>
					<div class="cpcf-field-grid cpcf-field-grid--two">
						<?php acewpcf_render_color_style_field( 'cpcf-label-color-' . $filter_id, $field_prefix . '[styles][label_color]', __( 'Color', 'ace-content-filters' ), $styles['label_color'], '#1d2327' ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-label-size-' . $filter_id, $field_prefix . '[styles][label_font_size]', __( 'Font size (px)', 'ace-content-filters' ), $styles['label_font_size'], '18' ); ?>
						<?php acewpcf_render_font_style_field( 'cpcf-label-font-' . $filter_id, $field_prefix . '[styles][label_font_family]', __( 'Font family', 'ace-content-filters' ), $styles['label_font_family'], $font_suggestions ); ?>
						<?php acewpcf_render_select_style_field( 'cpcf-label-weight-' . $filter_id, $field_prefix . '[styles][label_font_weight]', __( 'Font weight', 'ace-content-filters' ), $styles['label_font_weight'], $font_weight_choices ); ?>
						<?php acewpcf_render_select_style_field( 'cpcf-label-transform-' . $filter_id, $field_prefix . '[styles][label_text_transform]', __( 'Text transform', 'ace-content-filters' ), $styles['label_text_transform'], $text_transform_choices ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-label-spacing-' . $filter_id, $field_prefix . '[styles][label_letter_spacing]', __( 'Letter spacing (px)', 'ace-content-filters' ), $styles['label_letter_spacing'], '0', array( 'min' => '-10', 'max' => '20', 'step' => '0.1' ) ); ?>
					</div>
					<?php foreach ( $responsive_modes as $mode_key => $mode_config ) : ?>
						<?php
						acewpcf_render_inline_responsive_fields(
							$filter_id,
							$field_prefix,
							$styles,
							$mode_key,
							$mode_config,
							array(
								array(
									'key'      => 'label_font_size',
									'label'    => __( 'Label size (px)', 'ace-content-filters' ),
									'fallback' => $styles['label_font_size'],
									'args'     => $responsive_size_args,
								),
							)
						);
						?>
					<?php endforeach; ?>
				</section>

				<section class="cpcf-style-card cpcf-style-card--taxonomy-only">
					<div class="cpcf-style-card__heading">
						<div>
							<h4><?php echo esc_html__( 'Count', 'ace-content-filters' ); ?></h4>
						</div>
					</div>
					<div class="cpcf-field-grid cpcf-field-grid--two">
						<?php acewpcf_render_color_style_field( 'cpcf-count-color-' . $filter_id, $field_prefix . '[styles][count_color]', __( 'Color', 'ace-content-filters' ), $styles['count_color'], '#666666' ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-count-size-' . $filter_id, $field_prefix . '[styles][count_font_size]', __( 'Font size (px)', 'ace-content-filters' ), $styles['count_font_size'], '14' ); ?>
						<?php acewpcf_render_font_style_field( 'cpcf-count-font-' . $filter_id, $field_prefix . '[styles][count_font_family]', __( 'Font family', 'ace-content-filters' ), $styles['count_font_family'], $font_suggestions ); ?>
						<?php acewpcf_render_select_style_field( 'cpcf-count-weight-' . $filter_id, $field_prefix . '[styles][count_font_weight]', __( 'Font weight', 'ace-content-filters' ), $styles['count_font_weight'], $font_weight_choices ); ?>
						<?php acewpcf_render_select_style_field( 'cpcf-count-transform-' . $filter_id, $field_prefix . '[styles][count_text_transform]', __( 'Text transform', 'ace-content-filters' ), $styles['count_text_transform'], $text_transform_choices ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-count-spacing-' . $filter_id, $field_prefix . '[styles][count_letter_spacing]', __( 'Letter spacing (px)', 'ace-content-filters' ), $styles['count_letter_spacing'], '0', array( 'min' => '-10', 'max' => '20', 'step' => '0.1' ) ); ?>
					</div>
					<?php foreach ( $responsive_modes as $mode_key => $mode_config ) : ?>
						<?php
						acewpcf_render_inline_responsive_fields(
							$filter_id,
							$field_prefix,
							$styles,
							$mode_key,
							$mode_config,
							array(
								array(
									'key'      => 'count_font_size',
									'label'    => __( 'Count size (px)', 'ace-content-filters' ),
									'fallback' => $styles['count_font_size'],
									'args'     => $responsive_size_args,
								),
							)
						);
						?>
					<?php endforeach; ?>
				</section>

				<section class="cpcf-style-card cpcf-style-card--wide cpcf-style-card--taxonomy-source"<?php echo $is_options_filter ? ' hidden' : ''; ?>>
					<div class="cpcf-style-card__heading">
						<div>
							<h4><?php echo esc_html__( 'Term search box', 'ace-content-filters' ); ?></h4>
							<p><?php echo esc_html__( 'Style the in-filter search field used to narrow the listed terms. These styles apply whenever a search box is shown.', 'ace-content-filters' ); ?></p>
						</div>
					</div>
					<div class="cpcf-field-grid cpcf-field-grid--two">
						<?php acewpcf_render_color_style_field( 'cpcf-term-search-text-' . $filter_id, $field_prefix . '[styles][term_search_text_color]', __( 'Text', 'ace-content-filters' ), $styles['term_search_text_color'], '#1d2327' ); ?>
						<?php acewpcf_render_color_style_field( 'cpcf-term-search-placeholder-' . $filter_id, $field_prefix . '[styles][term_search_placeholder_color]', __( 'Placeholder', 'ace-content-filters' ), $styles['term_search_placeholder_color'], '#8a8f94' ); ?>
						<?php acewpcf_render_color_style_field( 'cpcf-term-search-background-' . $filter_id, $field_prefix . '[styles][term_search_background_color]', __( 'Background', 'ace-content-filters' ), $styles['term_search_background_color'], '#ffffff' ); ?>
						<?php acewpcf_render_color_style_field( 'cpcf-term-search-border-' . $filter_id, $field_prefix . '[styles][term_search_border_color]', __( 'Border', 'ace-content-filters' ), $styles['term_search_border_color'], '#c7c7c7' ); ?>
						<?php acewpcf_render_color_style_field( 'cpcf-term-search-focus-border-' . $filter_id, $field_prefix . '[styles][term_search_focus_border_color]', __( 'Focus border', 'ace-content-filters' ), $styles['term_search_focus_border_color'], '#1d2327' ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-term-search-border-width-' . $filter_id, $field_prefix . '[styles][term_search_border_width]', __( 'Border width (px)', 'ace-content-filters' ), $styles['term_search_border_width'], '1', array( 'min' => '0', 'max' => '8', 'step' => '1' ) ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-term-search-radius-' . $filter_id, $field_prefix . '[styles][term_search_border_radius]', __( 'Corner radius (px)', 'ace-content-filters' ), $styles['term_search_border_radius'], '10', array( 'min' => '0', 'max' => '999', 'step' => '1' ) ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-term-search-size-' . $filter_id, $field_prefix . '[styles][term_search_font_size]', __( 'Font size (px)', 'ace-content-filters' ), $styles['term_search_font_size'], '14' ); ?>
						<?php acewpcf_render_font_style_field( 'cpcf-term-search-font-' . $filter_id, $field_prefix . '[styles][term_search_font_family]', __( 'Font family', 'ace-content-filters' ), $styles['term_search_font_family'], $font_suggestions ); ?>
						<?php acewpcf_render_select_style_field( 'cpcf-term-search-weight-' . $filter_id, $field_prefix . '[styles][term_search_font_weight]', __( 'Font weight', 'ace-content-filters' ), $styles['term_search_font_weight'], $font_weight_choices ); ?>
						<?php acewpcf_render_select_style_field( 'cpcf-term-search-transform-' . $filter_id, $field_prefix . '[styles][term_search_text_transform]', __( 'Text transform', 'ace-content-filters' ), $styles['term_search_text_transform'], $text_transform_choices ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-term-search-spacing-' . $filter_id, $field_prefix . '[styles][term_search_letter_spacing]', __( 'Letter spacing (px)', 'ace-content-filters' ), $styles['term_search_letter_spacing'], '0', array( 'min' => '-10', 'max' => '20', 'step' => '0.1' ) ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-term-search-padding-y-' . $filter_id, $field_prefix . '[styles][term_search_padding_y]', __( 'Vertical padding (px)', 'ace-content-filters' ), $styles['term_search_padding_y'], '10', array( 'min' => '0', 'max' => '48', 'step' => '1' ) ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-term-search-padding-x-' . $filter_id, $field_prefix . '[styles][term_search_padding_x]', __( 'Horizontal padding (px)', 'ace-content-filters' ), $styles['term_search_padding_x'], '12', array( 'min' => '0', 'max' => '64', 'step' => '1' ) ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-term-search-list-max-height-' . $filter_id, $field_prefix . '[styles][term_search_list_max_height]', __( 'List max height (px)', 'ace-content-filters' ), $styles['term_search_list_max_height'], '320', array( 'min' => '0', 'max' => '800', 'step' => '1', 'description' => __( 'On vertical filters, long term lists scroll inside this height. Leave blank for 320px. Use 0 for no limit.', 'ace-content-filters' ) ) ); ?>
					</div>
				</section>

				<section class="cpcf-style-card cpcf-style-card--wide cpcf-style-card--taxonomy-only">
					<div class="cpcf-style-card__heading">
						<div>
							<h4><?php echo esc_html__( 'Button surface and state colors', 'ace-content-filters' ); ?></h4>
							<p><?php echo esc_html__( 'Term label and count typography are configured above. Use these controls for button background, border, spacing, and interactive state colors.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-style-groups">
						<section class="cpcf-style-group">
							<div class="cpcf-style-group__intro">
								<h5><?php echo esc_html__( 'Default button', 'ace-content-filters' ); ?></h5>
								<p><?php echo esc_html__( 'These settings drive the first preview sample and the default button surface, border, and spacing on the frontend.', 'ace-content-filters' ); ?></p>
							</div>
							<div class="cpcf-field-grid cpcf-field-grid--two">
								<?php acewpcf_render_color_style_field( 'cpcf-button-background-' . $filter_id, $field_prefix . '[styles][button_background_color]', __( 'Background', 'ace-content-filters' ), $styles['button_background_color'], '#ffffff' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-button-border-' . $filter_id, $field_prefix . '[styles][button_border_color]', __( 'Border', 'ace-content-filters' ), $styles['button_border_color'], '#c7c7c7' ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-button-border-width-' . $filter_id, $field_prefix . '[styles][button_border_width]', __( 'Border width (px)', 'ace-content-filters' ), $styles['button_border_width'], '1', array( 'min' => '0', 'max' => '12', 'step' => '1' ) ); ?>
								<div class="cpcf-filter-checkbox-style-settings"<?php echo ( 'multiple' !== $filter['selection_mode'] ) ? ' hidden' : ''; ?>>
									<?php acewpcf_render_number_style_field( 'cpcf-checkbox-size-' . $filter_id, $field_prefix . '[styles][checkbox_size]', __( 'Checkbox size (px)', 'ace-content-filters' ), $styles['checkbox_size'], '18', array( 'min' => '10', 'max' => '36', 'step' => '1' ) ); ?>
									<?php acewpcf_render_number_style_field( 'cpcf-checkbox-border-width-' . $filter_id, $field_prefix . '[styles][checkbox_border_width]', __( 'Checkbox border width (px)', 'ace-content-filters' ), $styles['checkbox_border_width'], '1', array( 'min' => '1', 'max' => '8', 'step' => '1' ) ); ?>
									<?php acewpcf_render_number_style_field( 'cpcf-checkbox-radius-' . $filter_id, $field_prefix . '[styles][checkbox_border_radius]', __( 'Checkbox radius (px)', 'ace-content-filters' ), $styles['checkbox_border_radius'], '4', array( 'min' => '0', 'max' => '16', 'step' => '1' ) ); ?>
								</div>
								<div class="cpcf-filter-swatch-style-settings"<?php echo $uses_swatches ? '' : ' hidden'; ?>>
									<?php acewpcf_render_number_style_field( 'cpcf-swatch-size-' . $filter_id, $field_prefix . '[styles][swatch_size]', __( 'Colour swatch size (px)', 'ace-content-filters' ), $styles['swatch_size'], '28', array( 'min' => '12', 'max' => '64', 'step' => '1' ) ); ?>
									<?php acewpcf_render_color_style_field( 'cpcf-swatch-background-' . $filter_id, $field_prefix . '[styles][swatch_background_color]', __( 'Swatch area background', 'ace-content-filters' ), $styles['swatch_background_color'], '#ffffff', __( 'Sits behind the chips so they stay visible on a coloured sidebar or panel.', 'ace-content-filters' ) ); ?>
								</div>
								<?php acewpcf_render_number_style_field( 'cpcf-button-padding-y-' . $filter_id, $field_prefix . '[styles][button_padding_y]', __( 'Button vertical padding (px)', 'ace-content-filters' ), $styles['button_padding_y'], '10', $responsive_spacing_args ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-button-padding-x-' . $filter_id, $field_prefix . '[styles][button_padding_x]', __( 'Button horizontal padding (px)', 'ace-content-filters' ), $styles['button_padding_x'], '14', $responsive_spacing_args ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-button-gap-' . $filter_id, $field_prefix . '[styles][gap]', __( 'Gap between items (px)', 'ace-content-filters' ), $styles['gap'], '12', $responsive_spacing_args ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-border-radius-' . $filter_id, $field_prefix . '[styles][border_radius]', __( 'Border radius (px)', 'ace-content-filters' ), $styles['border_radius'], '4' ); ?>
							</div>
							<?php foreach ( $responsive_modes as $mode_key => $mode_config ) : ?>
								<?php
								acewpcf_render_inline_responsive_fields(
									$filter_id,
									$field_prefix,
									$styles,
									$mode_key,
									$mode_config,
									array(
										array(
											'key'      => 'gap',
											'label'    => __( 'Gap between items (px)', 'ace-content-filters' ),
											'fallback' => $styles['gap'],
											'args'     => $responsive_spacing_args,
										),
										array(
											'key'      => 'button_padding_y',
											'label'    => __( 'Button vertical padding (px)', 'ace-content-filters' ),
											'fallback' => $styles['button_padding_y'],
											'args'     => $responsive_spacing_args,
										),
										array(
											'key'      => 'button_padding_x',
											'label'    => __( 'Button horizontal padding (px)', 'ace-content-filters' ),
											'fallback' => $styles['button_padding_x'],
											'args'     => $responsive_spacing_args,
										),
									)
								);
								?>
							<?php endforeach; ?>
						</section>

						<section class="cpcf-style-group cpcf-style-group--states">
							<div class="cpcf-style-group__intro">
								<h5><?php echo esc_html__( 'Active and hover states', 'ace-content-filters' ); ?></h5>
								<p><?php echo esc_html__( 'Keep the selected and hover colors together so you can tune the interactive states without jumping between separate cards.', 'ace-content-filters' ); ?></p>
							</div>
							<div class="cpcf-style-state-grid">
								<section class="cpcf-style-state-panel">
									<h6><?php echo esc_html__( 'Active', 'ace-content-filters' ); ?></h6>
									<p><?php echo esc_html__( 'These colors affect the middle preview sample and the selected frontend state.', 'ace-content-filters' ); ?></p>
									<div class="cpcf-field-grid cpcf-field-grid--three">
										<?php acewpcf_render_color_style_field( 'cpcf-active-text-' . $filter_id, $field_prefix . '[styles][active_text_color]', __( 'Text', 'ace-content-filters' ), $styles['active_text_color'], '#ffffff' ); ?>
										<?php acewpcf_render_color_style_field( 'cpcf-active-background-' . $filter_id, $field_prefix . '[styles][active_background_color]', __( 'Background', 'ace-content-filters' ), $styles['active_background_color'], '#1d2327' ); ?>
										<?php acewpcf_render_color_style_field( 'cpcf-active-border-' . $filter_id, $field_prefix . '[styles][active_border_color]', __( 'Border', 'ace-content-filters' ), $styles['active_border_color'], '#1d2327' ); ?>
									</div>
								</section>

								<section class="cpcf-style-state-panel">
									<h6><?php echo esc_html__( 'Hover', 'ace-content-filters' ); ?></h6>
									<p><?php echo esc_html__( 'These colors affect the third preview sample and the hover state on the frontend.', 'ace-content-filters' ); ?></p>
									<div class="cpcf-field-grid cpcf-field-grid--three">
										<?php acewpcf_render_color_style_field( 'cpcf-hover-text-' . $filter_id, $field_prefix . '[styles][button_hover_text_color]', __( 'Text', 'ace-content-filters' ), $styles['button_hover_text_color'], '#1d2327' ); ?>
										<?php acewpcf_render_color_style_field( 'cpcf-hover-background-' . $filter_id, $field_prefix . '[styles][button_hover_background_color]', __( 'Background', 'ace-content-filters' ), $styles['button_hover_background_color'], '#f8f2e7' ); ?>
										<?php acewpcf_render_color_style_field( 'cpcf-hover-border-' . $filter_id, $field_prefix . '[styles][button_hover_border_color]', __( 'Border', 'ace-content-filters' ), $styles['button_hover_border_color'], '#b98a32' ); ?>
									</div>
								</section>
							</div>
						</section>
					</div>
				</section>

						<section class="cpcf-style-card cpcf-style-card--wide">
							<div class="cpcf-style-card__heading">
								<div>
									<h4><?php echo esc_html__( 'Empty results notice', 'ace-content-filters' ); ?></h4>
									<p><?php echo esc_html__( 'Use these styles only if you show a custom message when AJAX filtering returns no results.', 'ace-content-filters' ); ?></p>
								</div>
							</div>
							<div class="cpcf-field-grid cpcf-field-grid--two">
								<?php acewpcf_render_color_style_field( 'cpcf-empty-results-text-' . $filter_id, $field_prefix . '[styles][empty_results_text_color]', __( 'Notice text', 'ace-content-filters' ), $styles['empty_results_text_color'], '#1d2327' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-empty-results-background-' . $filter_id, $field_prefix . '[styles][empty_results_background_color]', __( 'Notice background', 'ace-content-filters' ), $styles['empty_results_background_color'], '#f6f4ef' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-empty-results-border-' . $filter_id, $field_prefix . '[styles][empty_results_border_color]', __( 'Notice border', 'ace-content-filters' ), $styles['empty_results_border_color'], '#d7dde3' ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-empty-results-size-' . $filter_id, $field_prefix . '[styles][empty_results_font_size]', __( 'Text size (px)', 'ace-content-filters' ), $styles['empty_results_font_size'], '15', array( 'min' => '10', 'max' => '32', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-empty-results-padding-y-' . $filter_id, $field_prefix . '[styles][empty_results_padding_y]', __( 'Vertical padding (px)', 'ace-content-filters' ), $styles['empty_results_padding_y'], '16', array( 'min' => '0', 'max' => '48', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-empty-results-padding-x-' . $filter_id, $field_prefix . '[styles][empty_results_padding_x]', __( 'Horizontal padding (px)', 'ace-content-filters' ), $styles['empty_results_padding_x'], '18', array( 'min' => '0', 'max' => '64', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-empty-results-radius-' . $filter_id, $field_prefix . '[styles][empty_results_border_radius]', __( 'Corner radius (px)', 'ace-content-filters' ), $styles['empty_results_border_radius'], '14', array( 'min' => '0', 'max' => '999', 'step' => '1' ) ); ?>
							</div>
						</section>
			</div>
				</section>

			</div>

			<aside class="cpcf-panel cpcf-panel--sidebar">
				<div class="cpcf-sidebar-card cpcf-sidebar-card--nav">
					<span class="cpcf-field__label"><?php echo esc_html__( 'Jump to', 'ace-content-filters' ); ?></span>
					<nav class="cpcf-editor-nav" aria-label="<?php echo esc_attr__( 'Editor sections', 'ace-content-filters' ); ?>">
						<a href="#cpcf-editor-settings"><?php echo esc_html__( 'Filter settings', 'ace-content-filters' ); ?></a>
						<a href="#cpcf-editor-behaviour"><?php echo esc_html__( 'Behaviour', 'ace-content-filters' ); ?></a>
						<a href="#cpcf-editor-data"><?php echo esc_html__( 'Data', 'ace-content-filters' ); ?></a>
						<a href="#cpcf-editor-appearance"><?php echo esc_html__( 'Appearance', 'ace-content-filters' ); ?></a>
					</nav>
				</div>

				<div class="cpcf-sidebar-card">
					<span class="cpcf-field__label"><?php echo esc_html__( 'Placement', 'ace-content-filters' ); ?></span>
					<div class="cpcf-shortcode-box cpcf-shortcode-box--stacked">
						<code><?php echo esc_html( $shortcode ); ?></code>
						<button type="button" class="button button-small cpcf-copy-shortcode" data-shortcode="<?php echo esc_attr( $shortcode ); ?>"><?php echo esc_html__( 'Copy shortcode', 'ace-content-filters' ); ?></button>
					</div>
					<p><?php echo esc_html__( 'Use this shortcode when you want to place the filter manually.', 'ace-content-filters' ); ?></p>
					<span class="cpcf-field__label"><?php echo esc_html__( 'Elementor', 'ace-content-filters' ); ?></span>
					<p><?php echo esc_html__( 'In Elementor, select this filter set in the ACE Content Filters widget. Your saved AJAX target is used automatically.', 'ace-content-filters' ); ?></p>
				</div>
			</aside>
		</div>

		<div class="cpcf-editor__footer">
			<div class="cpcf-editor__footer-secondary">
				<?php do_action( 'acewpcf_filter_form_secondary_actions', $filter, $is_new ); ?>
				<?php if ( ! $is_new ) : ?>
					<button type="submit" name="acewpcf_delete_filter" value="1" class="button cpcf-button-danger" onclick="return window.confirm('<?php echo esc_js( __( 'Delete this filter set?', 'ace-content-filters' ) ); ?>');"><?php echo esc_html__( 'Delete Filter Set', 'ace-content-filters' ); ?></button>
				<?php endif; ?>
				<?php do_action( 'acewpcf_filter_form_secondary_feedback', $filter, $is_new ); ?>
			</div>
			<div class="cpcf-editor__footer-primary">
				<a class="button button-secondary" href="<?php echo esc_url( acewpcf_get_admin_page_url() ); ?>"><?php echo esc_html__( 'Cancel', 'ace-content-filters' ); ?></a>
				<?php submit_button( esc_html__( 'Save Filter Set', 'ace-content-filters' ), 'primary', 'submit', false ); ?>
			</div>
		</div>
	</form>
	<?php
}

function acewpcf_render_filter_panel_form( $panel, $filter_sets, $is_new ) {
	$panel            = wp_parse_args( is_array( $panel ) ? $panel : array(), acewpcf_get_default_filter_panel() );
	$panel_id         = $panel['id'];
	$panel_filter_ids = isset( $panel['filter_ids'] ) ? acewpcf_parse_filter_id_list( $panel['filter_ids'] ) : array();
	$panel_filter_order = array_flip( $panel_filter_ids );
	$available_filters  = array_values( $filter_sets );
	$ajax_enabled     = ! empty( $panel['ajax_enabled'] );
	$results_selector = isset( $panel['results_selector'] ) ? (string) $panel['results_selector'] : '';
	$empty_results_message = isset( $panel['empty_results_message'] ) ? (string) $panel['empty_results_message'] : '';
	$clear_all_mode   = isset( $panel['clear_all_mode'] ) ? acewpcf_sanitize_filter_panel_clear_all_mode( $panel['clear_all_mode'] ) : 'auto';
	$panel_styles     = isset( $panel['styles'] ) && is_array( $panel['styles'] ) ? wp_parse_args( $panel['styles'], acewpcf_get_default_filter_panel_styles() ) : acewpcf_get_default_filter_panel_styles();
	$font_suggestions        = acewpcf_get_font_family_suggestions();
	$font_weight_choices     = acewpcf_get_font_weight_choices();
	$text_transform_choices  = acewpcf_get_text_transform_choices();
	$clear_all_choices = acewpcf_get_filter_panel_clear_all_choices();
	$count_display_choices = acewpcf_get_panel_count_display_mode_choices();
	$hide_zero_count_choices = acewpcf_get_panel_hide_zero_count_terms_choices();
	$term_search_mode_choices = acewpcf_get_panel_term_search_mode_choices();
	$mobile_toggle_label = isset( $panel['mobile_toggle_label'] ) ? (string) $panel['mobile_toggle_label'] : '';
	$custom_clear_all_label = isset( $panel['clear_all_label'] ) ? (string) $panel['clear_all_label'] : '';
	$panel_count_display_mode = isset( $panel['count_display_mode'] ) ? acewpcf_sanitize_panel_count_display_mode( $panel['count_display_mode'] ) : 'inherit';
	$panel_hide_zero_count_terms = isset( $panel['hide_zero_count_terms'] ) ? acewpcf_sanitize_panel_hide_zero_count_terms( $panel['hide_zero_count_terms'] ) : 'inherit';
	$panel_term_search_mode = isset( $panel['term_search_mode'] ) ? acewpcf_sanitize_panel_term_search_mode( $panel['term_search_mode'] ) : 'inherit';
	$title            = $is_new ? __( 'Create Filter Panel', 'ace-content-filters' ) : __( 'Edit Filter Panel', 'ace-content-filters' );
	$shortcode = sprintf( '[acewpcf_filter_panel id="%s"]', $panel_id );

	usort(
		$available_filters,
		static function ( $left, $right ) use ( $panel_filter_order ) {
			$left_id       = isset( $left['id'] ) ? $left['id'] : '';
			$right_id      = isset( $right['id'] ) ? $right['id'] : '';
			$left_selected = isset( $panel_filter_order[ $left_id ] );
			$right_selected = isset( $panel_filter_order[ $right_id ] );

			if ( $left_selected && $right_selected ) {
				return $panel_filter_order[ $left_id ] <=> $panel_filter_order[ $right_id ];
			}

			if ( $left_selected !== $right_selected ) {
				return $left_selected ? -1 : 1;
			}

			return strcasecmp( isset( $left['name'] ) ? $left['name'] : '', isset( $right['name'] ) ? $right['name'] : '' );
		}
	);
	?>
	<form class="cpcf-editor" method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
		<input type="hidden" name="action" value="acewpcf_save_panel" />
		<input type="hidden" name="acewpcf_panel[current_id]" value="<?php echo esc_attr( $panel_id ); ?>" />
		<?php wp_nonce_field( 'acewpcf_save_panel' ); ?>

		<section class="cpcf-admin__hero cpcf-editor__hero">
			<div class="cpcf-admin__hero-brand">
				<div class="cpcf-admin__hero-copy">
					<a class="cpcf-back-link" href="<?php echo esc_url( acewpcf_get_admin_page_url() ); ?>">
						<span class="dashicons dashicons-arrow-left-alt2" aria-hidden="true"></span>
						<?php echo esc_html__( 'Back to filters', 'ace-content-filters' ); ?>
					</a>
					<p class="cpcf-admin__eyebrow"><?php echo esc_html__( 'Filter Panel Editor', 'ace-content-filters' ); ?></p>
					<h2 class="cpcf-admin__hero-title"><?php echo esc_html( $title ); ?></h2>
					<p class="cpcf-admin__hero-description"><?php echo esc_html__( 'Build one reusable panel in a clear workflow: configure it, choose the filter sets it includes, define panel behaviour, then tune the appearance.', 'ace-content-filters' ); ?></p>
				</div>
			</div>
			<div class="cpcf-admin__hero-actions cpcf-editor__actions">
				<a class="button button-secondary" href="<?php echo esc_url( acewpcf_get_admin_page_url() ); ?>"><?php echo esc_html__( 'Cancel', 'ace-content-filters' ); ?></a>
				<?php submit_button( esc_html__( 'Save Filter Panel', 'ace-content-filters' ), 'primary', 'submit', false ); ?>
			</div>
		</section>

		<div class="cpcf-editor__grid">
			<div class="cpcf-editor__main">
				<section id="cpcf-panel-editor-settings" class="cpcf-panel cpcf-panel--primary">
					<div class="cpcf-panel__header cpcf-panel__header--sectioned">
						<div class="cpcf-panel__header-main">
							<div class="cpcf-panel__header-top">
								<h3><?php echo esc_html__( 'Panel settings', 'ace-content-filters' ); ?></h3>
								<span class="cpcf-section-count"><?php echo esc_html__( 'Essential', 'ace-content-filters' ); ?></span>
							</div>
							<p><?php echo esc_html__( 'Start with the saved panel identity and the shared AJAX target that all included filter sets will use together.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-editor-section-grid cpcf-editor-section-grid--two">
						<label class="cpcf-field" for="cpcf-panel-name">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Panel name', 'ace-content-filters' ); ?></span>
							<input type="text" class="regular-text" id="cpcf-panel-name" name="acewpcf_panel[name]" value="<?php echo esc_attr( $panel['name'] ); ?>" placeholder="<?php echo esc_attr__( 'Archive Sidebar Panel', 'ace-content-filters' ); ?>" />
						</label>

						<label class="cpcf-field" for="cpcf-panel-shortcode-id">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Shortcode ID', 'ace-content-filters' ); ?></span>
							<input type="text" class="regular-text" id="cpcf-panel-shortcode-id" name="acewpcf_panel[id]" value="<?php echo esc_attr( $panel_id ); ?>" placeholder="<?php echo esc_attr__( 'archive-sidebar-panel', 'ace-content-filters' ); ?>" />
							<p class="description"><?php echo esc_html__( 'This is the changeable ID used inside the panel shortcode. Leave it blank to auto-generate one from the panel name.', 'ace-content-filters' ); ?></p>
						</label>

						<label class="cpcf-field" for="cpcf-panel-empty-results-message-<?php echo esc_attr( $panel_id ); ?>">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Empty results message', 'ace-content-filters' ); ?></span>
							<input type="text" class="regular-text" id="cpcf-panel-empty-results-message-<?php echo esc_attr( $panel_id ); ?>" name="acewpcf_panel[empty_results_message]" value="<?php echo esc_attr( $empty_results_message ); ?>" placeholder="<?php echo esc_attr__( 'No results were found matching your selection.', 'ace-content-filters' ); ?>" />
							<p class="description"><?php echo esc_html__( 'Add custom text to show when this panel returns no matching content.', 'ace-content-filters' ); ?></p>
						</label>
					</div>

					<div class="cpcf-basics-section">
						<span class="cpcf-field__label"><?php echo esc_html__( 'AJAX and results selector', 'ace-content-filters' ); ?></span>
						<p class="description"><?php echo esc_html__( 'Set AJAX once at panel level so every filter in this panel updates the same results area.', 'ace-content-filters' ); ?></p>
						<div class="cpcf-toggle-grid cpcf-toggle-grid--single">
							<label class="cpcf-toggle-card cpcf-toggle-card--compact">
								<input type="hidden" name="acewpcf_panel[ajax_enabled]" value="0" />
								<input type="checkbox" name="acewpcf_panel[ajax_enabled]" value="1" <?php checked( $ajax_enabled ); ?> />
								<span><?php echo esc_html__( 'Enable AJAX for this filter panel', 'ace-content-filters' ); ?></span>
							</label>
						</div>
						<label class="cpcf-field" for="cpcf-panel-results-selector-<?php echo esc_attr( $panel_id ); ?>">
							<span class="cpcf-field__label"><?php echo esc_html__( 'Results wrapper selector', 'ace-content-filters' ); ?></span>
							<input type="text" class="regular-text" id="cpcf-panel-results-selector-<?php echo esc_attr( $panel_id ); ?>" name="acewpcf_panel[results_selector]" value="<?php echo esc_attr( $results_selector ); ?>" placeholder="#content-results" />
							<p class="description"><?php echo esc_html__( 'Enter one unique CSS selector for the shared results area. Every filter in this panel will use this target.', 'ace-content-filters' ); ?></p>
						</label>
					</div>
				</section>

				<section id="cpcf-panel-editor-filters" class="cpcf-panel">
					<div class="cpcf-panel__header cpcf-panel__header--sectioned">
						<div class="cpcf-panel__header-main">
							<div class="cpcf-panel__header-top">
								<h3><?php echo esc_html__( 'Included filter sets', 'ace-content-filters' ); ?></h3>
								<span class="cpcf-section-count cpcf-section-count--soft"><?php echo esc_html__( 'Selection', 'ace-content-filters' ); ?></span>
							</div>
							<p><?php echo esc_html__( 'Choose which saved filter sets belong in this panel, then drag them into display order. Add heading blocks in the selected list to group filters under one label.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-terms-workspace">
						<div class="cpcf-terms-workspace__list">
							<div class="cpcf-filter-reference-list">
								<?php foreach ( $available_filters as $filter ) : ?>
									<?php
									$term_ids       = isset( $filter['term_ids'] ) && is_array( $filter['term_ids'] ) ? $filter['term_ids'] : array();
									$source_label   = acewpcf_get_filter_source_label( $filter );
									$mode_label     = acewpcf_get_filter_mode_label( $filter['selection_mode'], $filter );
									$checked        = in_array( $filter['id'], $panel_filter_ids, true );
									$checkbox_id    = 'cpcf-panel-filter-' . $panel_id . '-' . $filter['id'];
									$filter_meta    = $source_label . ' / ' . $mode_label . ' / ' . acewpcf_get_filter_item_summary_label( $filter, $term_ids );
									$order_position = isset( $panel_filter_order[ $filter['id'] ] ) ? (string) ( $panel_filter_order[ $filter['id'] ] + 1 ) : '';
									?>
									<div class="cpcf-filter-reference">
										<label class="cpcf-filter-reference__selection" for="<?php echo esc_attr( $checkbox_id ); ?>">
											<input id="<?php echo esc_attr( $checkbox_id ); ?>" type="checkbox" name="acewpcf_panel[filter_ids][]" value="<?php echo esc_attr( $filter['id'] ); ?>" data-order-title="<?php echo esc_attr( $filter['name'] ); ?>" data-order-meta="<?php echo esc_attr( $filter_meta ); ?>" data-order-position="<?php echo esc_attr( $order_position ); ?>" <?php checked( $checked ); ?> />
											<span class="cpcf-filter-reference__body">
												<strong><?php echo esc_html( $filter['name'] ); ?></strong>
												<small class="cpcf-filter-reference__meta"><?php echo esc_html( $filter_meta ); ?></small>
											</span>
										</label>
									</div>
								<?php endforeach; ?>
							</div>
						</div>
						<div class="cpcf-terms-workspace__order">
							<div class="cpcf-selection-order-panel cpcf-selection-order-panel--filters cpcf-selection-order-panel--side">
								<span class="cpcf-field__label"><?php echo esc_html__( 'Selected filter sets', 'ace-content-filters' ); ?></span>
								<p class="description"><?php echo esc_html__( 'Drag filters into the order visitors should see. Add a heading block above a group of filters; everything below it stays in that section until the next heading.', 'ace-content-filters' ); ?></p>
								<button type="button" class="button button-secondary cpcf-add-panel-heading"><?php echo esc_html__( 'Add heading', 'ace-content-filters' ); ?></button>
								<div
									class="cpcf-sortable-list cpcf-sortable-list--panel-filters"
									data-order-input-name="acewpcf_panel[filter_order]"
									data-empty-label="<?php echo esc_attr__( 'Select filter sets on the left to reorder them.', 'ace-content-filters' ); ?>"
									data-heading-placeholder="<?php echo esc_attr__( 'Heading text, e.g. Main Filters', 'ace-content-filters' ); ?>"
									data-heading-remove-label="<?php echo esc_attr__( 'Remove heading', 'ace-content-filters' ); ?>"
									data-heading-badge-label="<?php echo esc_attr__( 'Heading', 'ace-content-filters' ); ?>"
									data-panel-items="<?php echo esc_attr( wp_json_encode( acewpcf_get_panel_layout_items( $panel ) ) ); ?>"
								></div>
							</div>
						</div>
					</div>
				</section>

				<section id="cpcf-panel-editor-behaviour" class="cpcf-panel">
					<div class="cpcf-panel__header cpcf-panel__header--sectioned">
						<div class="cpcf-panel__header-main">
							<div class="cpcf-panel__header-top">
								<h3><?php echo esc_html__( 'Behaviour', 'ace-content-filters' ); ?></h3>
								<span class="cpcf-section-count cpcf-section-count--soft"><?php echo esc_html__( 'Display', 'ace-content-filters' ); ?></span>
							</div>
							<p><?php echo esc_html__( 'Decide how the panel behaves as a shared filter container, including counts, clear-all behavior, and mobile labels.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-editor-stack">
						<div class="cpcf-editor-section-grid cpcf-editor-section-grid--two">
							<label class="cpcf-field" for="cpcf-panel-count-display-mode-<?php echo esc_attr( $panel_id ); ?>">
								<span class="cpcf-field__label"><?php echo esc_html__( 'Count display mode', 'ace-content-filters' ); ?></span>
								<select id="cpcf-panel-count-display-mode-<?php echo esc_attr( $panel_id ); ?>" name="acewpcf_panel[count_display_mode]">
									<?php foreach ( $count_display_choices as $count_mode_key => $count_mode_label ) : ?>
										<option value="<?php echo esc_attr( $count_mode_key ); ?>" <?php selected( $panel_count_display_mode, $count_mode_key ); ?>><?php echo esc_html( $count_mode_label ); ?></option>
									<?php endforeach; ?>
								</select>
								<p class="description"><?php echo esc_html__( 'Leave this on Use each filter setting for full per-filter control. Switch it here when you want one panel to force all included filters to use contextual or static counts together.', 'ace-content-filters' ); ?></p>
							</label>

							<label class="cpcf-field" for="cpcf-panel-hide-zero-count-terms-<?php echo esc_attr( $panel_id ); ?>">
								<span class="cpcf-field__label"><?php echo esc_html__( 'Empty terms', 'ace-content-filters' ); ?></span>
								<select id="cpcf-panel-hide-zero-count-terms-<?php echo esc_attr( $panel_id ); ?>" name="acewpcf_panel[hide_zero_count_terms]">
									<?php foreach ( $hide_zero_count_choices as $hide_zero_key => $hide_zero_label ) : ?>
										<option value="<?php echo esc_attr( $hide_zero_key ); ?>" <?php selected( $panel_hide_zero_count_terms, $hide_zero_key ); ?>><?php echo esc_html( $hide_zero_label ); ?></option>
									<?php endforeach; ?>
								</select>
								<p class="description"><?php echo esc_html__( 'Leave this on Use each filter setting to honour each set. Hide empty terms forces every filter in this panel to drop zero-count options. Keep empty terms visible forces them all to stay listed.', 'ace-content-filters' ); ?></p>
							</label>

							<label class="cpcf-field" for="cpcf-panel-term-search-mode-<?php echo esc_attr( $panel_id ); ?>">
								<span class="cpcf-field__label"><?php echo esc_html__( 'In-filter term search', 'ace-content-filters' ); ?></span>
								<select id="cpcf-panel-term-search-mode-<?php echo esc_attr( $panel_id ); ?>" name="acewpcf_panel[term_search_mode]">
									<?php foreach ( $term_search_mode_choices as $term_search_key => $term_search_label ) : ?>
										<option value="<?php echo esc_attr( $term_search_key ); ?>" <?php selected( $panel_term_search_mode, $term_search_key ); ?>><?php echo esc_html( $term_search_label ); ?></option>
									<?php endforeach; ?>
								</select>
								<p class="description"><?php echo esc_html__( 'Leave this on Use each filter setting to honour each set. Terms only hides the search box. Search box and terms shows it above every taxonomy filter in this panel.', 'ace-content-filters' ); ?></p>
							</label>

							<label class="cpcf-field" for="cpcf-panel-clear-all-mode-<?php echo esc_attr( $panel_id ); ?>">
								<span class="cpcf-field__label"><?php echo esc_html__( 'Clear all control', 'ace-content-filters' ); ?></span>
								<select id="cpcf-panel-clear-all-mode-<?php echo esc_attr( $panel_id ); ?>" name="acewpcf_panel[clear_all_mode]">
									<?php foreach ( $clear_all_choices as $clear_all_key => $clear_all_mode_label ) : ?>
										<option value="<?php echo esc_attr( $clear_all_key ); ?>" <?php selected( $clear_all_mode, $clear_all_key ); ?>><?php echo esc_html( $clear_all_mode_label ); ?></option>
									<?php endforeach; ?>
								</select>
								<p class="description"><?php echo esc_html__( 'Auto shows Clear all for multi-filter panels and enables it only after a selection. Always keeps it visible. Off hides it.', 'ace-content-filters' ); ?></p>
							</label>
						</div>

						<div class="cpcf-editor-section-grid cpcf-editor-section-grid--two">
							<label class="cpcf-field" for="cpcf-panel-mobile-toggle-label-<?php echo esc_attr( $panel_id ); ?>">
								<span class="cpcf-field__label"><?php echo esc_html__( 'Mobile open button label', 'ace-content-filters' ); ?></span>
								<input type="text" class="regular-text" id="cpcf-panel-mobile-toggle-label-<?php echo esc_attr( $panel_id ); ?>" name="acewpcf_panel[mobile_toggle_label]" value="<?php echo esc_attr( $mobile_toggle_label ); ?>" placeholder="<?php echo esc_attr__( 'Filters', 'ace-content-filters' ); ?>" />
								<p class="description"><?php echo esc_html__( 'Shown on the mobile button that opens this panel drawer. Leave blank to use the default Filters label.', 'ace-content-filters' ); ?></p>
							</label>

							<label class="cpcf-field" for="cpcf-panel-clear-all-label-<?php echo esc_attr( $panel_id ); ?>">
								<span class="cpcf-field__label"><?php echo esc_html__( 'Clear all label', 'ace-content-filters' ); ?></span>
								<input type="text" class="regular-text" id="cpcf-panel-clear-all-label-<?php echo esc_attr( $panel_id ); ?>" name="acewpcf_panel[clear_all_label]" value="<?php echo esc_attr( $custom_clear_all_label ); ?>" placeholder="<?php echo esc_attr__( 'Clear all', 'ace-content-filters' ); ?>" />
								<p class="description"><?php echo esc_html__( 'Leave blank to use the default Clear all text.', 'ace-content-filters' ); ?></p>
							</label>
						</div>
					</div>
				</section>

				<section id="cpcf-panel-editor-appearance" class="cpcf-panel cpcf-panel--styles">
					<div class="cpcf-panel__header cpcf-panel__header--sectioned">
						<div class="cpcf-panel__header-main">
							<div class="cpcf-panel__header-top">
								<h3><?php echo esc_html__( 'Appearance', 'ace-content-filters' ); ?></h3>
								<span class="cpcf-section-count cpcf-section-count--soft"><?php echo esc_html__( 'Style', 'ace-content-filters' ); ?></span>
							</div>
							<p><?php echo esc_html__( 'Tune the empty-state notice, group headings, panel-level clear-all control, mobile trigger, and separator styling in one place.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-style-grid cpcf-style-grid--single-column">
						<section class="cpcf-style-card cpcf-style-card--wide">
							<div class="cpcf-style-card__heading">
								<div>
									<h4><?php echo esc_html__( 'Empty results notice', 'ace-content-filters' ); ?></h4>
									<p><?php echo esc_html__( 'Style the message visitors see when the selected filters return no matching content.', 'ace-content-filters' ); ?></p>
								</div>
							</div>
							<div class="cpcf-field-grid cpcf-field-grid--two">
								<?php acewpcf_render_color_style_field( 'cpcf-panel-empty-results-text-' . $panel_id, 'acewpcf_panel[styles][empty_results_text_color]', __( 'Notice text', 'ace-content-filters' ), $panel_styles['empty_results_text_color'], '#1d2327' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-panel-empty-results-background-' . $panel_id, 'acewpcf_panel[styles][empty_results_background_color]', __( 'Notice background', 'ace-content-filters' ), $panel_styles['empty_results_background_color'], '#f6f4ef' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-panel-empty-results-border-' . $panel_id, 'acewpcf_panel[styles][empty_results_border_color]', __( 'Notice border', 'ace-content-filters' ), $panel_styles['empty_results_border_color'], '#d7dde3' ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-empty-results-size-' . $panel_id, 'acewpcf_panel[styles][empty_results_font_size]', __( 'Text size (px)', 'ace-content-filters' ), $panel_styles['empty_results_font_size'], '15', array( 'min' => '10', 'max' => '32', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-empty-results-padding-y-' . $panel_id, 'acewpcf_panel[styles][empty_results_padding_y]', __( 'Vertical padding (px)', 'ace-content-filters' ), $panel_styles['empty_results_padding_y'], '16', array( 'min' => '0', 'max' => '48', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-empty-results-padding-x-' . $panel_id, 'acewpcf_panel[styles][empty_results_padding_x]', __( 'Horizontal padding (px)', 'ace-content-filters' ), $panel_styles['empty_results_padding_x'], '18', array( 'min' => '0', 'max' => '64', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-empty-results-radius-' . $panel_id, 'acewpcf_panel[styles][empty_results_border_radius]', __( 'Corner radius (px)', 'ace-content-filters' ), $panel_styles['empty_results_border_radius'], '14', array( 'min' => '0', 'max' => '999', 'step' => '1' ) ); ?>
							</div>
						</section>

						<section class="cpcf-style-card cpcf-style-card--wide cpcf-style-card--panel-clear">
					<div class="cpcf-style-card__heading">
						<div>
							<h4><?php echo esc_html__( 'Clear all button', 'ace-content-filters' ); ?></h4>
							<p><?php echo esc_html__( 'Style the panel-level Clear all control shown below the grouped filters on the frontend.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-style-groups cpcf-style-groups--stacked cpcf-style-groups--compact">
						<section class="cpcf-style-group">
							<div class="cpcf-style-group__intro">
								<h5><?php echo esc_html__( 'Default state', 'ace-content-filters' ); ?></h5>
								<p><?php echo esc_html__( 'These values control the normal Clear all button appearance before hover or keyboard focus.', 'ace-content-filters' ); ?></p>
							</div>
							<div class="cpcf-field-grid cpcf-field-grid--two">
								<?php acewpcf_render_color_style_field( 'cpcf-panel-clear-all-text-' . $panel_id, 'acewpcf_panel[styles][clear_all_text_color]', __( 'Text', 'ace-content-filters' ), $panel_styles['clear_all_text_color'], '#1d2327' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-panel-clear-all-background-' . $panel_id, 'acewpcf_panel[styles][clear_all_background_color]', __( 'Background', 'ace-content-filters' ), $panel_styles['clear_all_background_color'], '#ffffff' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-panel-clear-all-border-' . $panel_id, 'acewpcf_panel[styles][clear_all_border_color]', __( 'Border', 'ace-content-filters' ), $panel_styles['clear_all_border_color'], '#d7dde3' ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-clear-all-size-' . $panel_id, 'acewpcf_panel[styles][clear_all_font_size]', __( 'Text size (px)', 'ace-content-filters' ), $panel_styles['clear_all_font_size'], '14', array( 'min' => '10', 'max' => '32', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-clear-all-padding-y-' . $panel_id, 'acewpcf_panel[styles][clear_all_padding_y]', __( 'Vertical padding (px)', 'ace-content-filters' ), $panel_styles['clear_all_padding_y'], '7', array( 'min' => '0', 'max' => '32', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-clear-all-padding-x-' . $panel_id, 'acewpcf_panel[styles][clear_all_padding_x]', __( 'Horizontal padding (px)', 'ace-content-filters' ), $panel_styles['clear_all_padding_x'], '12', array( 'min' => '0', 'max' => '48', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-clear-all-radius-' . $panel_id, 'acewpcf_panel[styles][clear_all_border_radius]', __( 'Corner radius (px)', 'ace-content-filters' ), $panel_styles['clear_all_border_radius'], '999', array( 'min' => '0', 'max' => '999', 'step' => '1' ) ); ?>
							</div>
						</section>

						<section class="cpcf-style-group">
							<div class="cpcf-style-group__intro">
								<h5><?php echo esc_html__( 'Hover and focus', 'ace-content-filters' ); ?></h5>
								<p><?php echo esc_html__( 'Optional colors for the hovered and keyboard-focused Clear all button state.', 'ace-content-filters' ); ?></p>
							</div>
							<div class="cpcf-field-grid cpcf-field-grid--two">
								<?php acewpcf_render_color_style_field( 'cpcf-panel-clear-all-hover-text-' . $panel_id, 'acewpcf_panel[styles][clear_all_hover_text_color]', __( 'Text', 'ace-content-filters' ), $panel_styles['clear_all_hover_text_color'], '#1d2327' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-panel-clear-all-hover-background-' . $panel_id, 'acewpcf_panel[styles][clear_all_hover_background_color]', __( 'Background', 'ace-content-filters' ), $panel_styles['clear_all_hover_background_color'], '#ffffff' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-panel-clear-all-hover-border-' . $panel_id, 'acewpcf_panel[styles][clear_all_hover_border_color]', __( 'Border', 'ace-content-filters' ), $panel_styles['clear_all_hover_border_color'], '#1d2327' ); ?>
							</div>
						</section>
					</div>
						</section>

						<section class="cpcf-style-card cpcf-style-card--wide cpcf-style-card--panel-mobile">
					<div class="cpcf-style-card__heading">
						<div>
							<h4><?php echo esc_html__( 'Mobile panel trigger', 'ace-content-filters' ); ?></h4>
							<p><?php echo esc_html__( 'Style the mobile Filters button so it matches your site design.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-style-groups cpcf-style-groups--stacked cpcf-style-groups--compact">
						<section class="cpcf-style-group">
							<div class="cpcf-style-group__intro">
								<h5><?php echo esc_html__( 'Filters trigger', 'ace-content-filters' ); ?></h5>
								<p><?php echo esc_html__( 'Controls the button that opens the panel on screens up to 782px wide.', 'ace-content-filters' ); ?></p>
								<div class="cpcf-panel-mobile-preview" aria-hidden="true">
									<button type="button" class="cpcf-panel-mobile-preview__toggle">
										<span class="cpcf-panel-mobile-preview__toggle-main">
											<span class="cpcf-panel-mobile-preview__icon" aria-hidden="true">
												<svg viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M3 6.75C3 6.33579 3.33579 6 3.75 6H20.25C20.6642 6 21 6.33579 21 6.75C21 7.16421 20.6642 7.5 20.25 7.5H3.75C3.33579 7.5 3 7.16421 3 6.75ZM6 12C6 11.5858 6.33579 11.25 6.75 11.25H17.25C17.6642 11.25 18 11.5858 18 12C18 12.4142 17.6642 12.75 17.25 12.75H6.75C6.33579 12.75 6 12.4142 6 12ZM9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25Z" fill="currentColor"/></svg>
											</span>
											<span class="cpcf-panel-mobile-preview__label"><?php echo esc_html__( 'Filters', 'ace-content-filters' ); ?></span>
										</span>
										<span class="cpcf-panel-mobile-preview__arrow" aria-hidden="true"></span>
									</button>
								</div>
							</div>
							<div class="cpcf-field-grid cpcf-field-grid--two">
								<?php acewpcf_render_color_style_field( 'cpcf-panel-mobile-toggle-text-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_text_color]', __( 'Text', 'ace-content-filters' ), $panel_styles['mobile_toggle_text_color'], '#ffffff' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-panel-mobile-toggle-background-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_background_color]', __( 'Background', 'ace-content-filters' ), $panel_styles['mobile_toggle_background_color'], '#1d2327' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-panel-mobile-toggle-border-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_border_color]', __( 'Border', 'ace-content-filters' ), $panel_styles['mobile_toggle_border_color'], '#1d2327' ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-mobile-toggle-border-width-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_border_width]', __( 'Border width (px)', 'ace-content-filters' ), $panel_styles['mobile_toggle_border_width'], '1', array( 'min' => '0', 'max' => '8', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-mobile-toggle-size-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_font_size]', __( 'Text size (px)', 'ace-content-filters' ), $panel_styles['mobile_toggle_font_size'], '18', array( 'min' => '10', 'max' => '40', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-mobile-toggle-padding-y-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_padding_y]', __( 'Vertical padding (px)', 'ace-content-filters' ), $panel_styles['mobile_toggle_padding_y'], '14', array( 'min' => '0', 'max' => '40', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-mobile-toggle-padding-x-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_padding_x]', __( 'Horizontal padding (px)', 'ace-content-filters' ), $panel_styles['mobile_toggle_padding_x'], '16', array( 'min' => '0', 'max' => '60', 'step' => '1' ) ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-mobile-toggle-radius-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_border_radius]', __( 'Corner radius (px)', 'ace-content-filters' ), $panel_styles['mobile_toggle_border_radius'], '12', array( 'min' => '0', 'max' => '999', 'step' => '1' ) ); ?>
								<?php acewpcf_render_font_style_field( 'cpcf-panel-mobile-toggle-font-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_font_family]', __( 'Font family', 'ace-content-filters' ), $panel_styles['mobile_toggle_font_family'], $font_suggestions ); ?>
								<?php acewpcf_render_select_style_field( 'cpcf-panel-mobile-toggle-weight-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_font_weight]', __( 'Font weight', 'ace-content-filters' ), $panel_styles['mobile_toggle_font_weight'], $font_weight_choices ); ?>
								<?php acewpcf_render_select_style_field( 'cpcf-panel-mobile-toggle-transform-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_text_transform]', __( 'Text transform', 'ace-content-filters' ), $panel_styles['mobile_toggle_text_transform'], $text_transform_choices ); ?>
								<?php acewpcf_render_number_style_field( 'cpcf-panel-mobile-toggle-spacing-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_letter_spacing]', __( 'Letter spacing (px)', 'ace-content-filters' ), $panel_styles['mobile_toggle_letter_spacing'], '0', array( 'min' => '-10', 'max' => '20', 'step' => '0.1' ) ); ?>
							</div>
						</section>

						<section class="cpcf-style-group">
							<div class="cpcf-style-group__intro">
								<h5><?php echo esc_html__( 'Filters trigger hover and focus', 'ace-content-filters' ); ?></h5>
								<p><?php echo esc_html__( 'Optional colors for the hovered and keyboard-focused state of the mobile trigger.', 'ace-content-filters' ); ?></p>
							</div>
							<div class="cpcf-field-grid cpcf-field-grid--two">
								<?php acewpcf_render_color_style_field( 'cpcf-panel-mobile-toggle-hover-text-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_hover_text_color]', __( 'Text', 'ace-content-filters' ), $panel_styles['mobile_toggle_hover_text_color'], '#ffffff' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-panel-mobile-toggle-hover-background-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_hover_background_color]', __( 'Background', 'ace-content-filters' ), $panel_styles['mobile_toggle_hover_background_color'], '#0f1417' ); ?>
								<?php acewpcf_render_color_style_field( 'cpcf-panel-mobile-toggle-hover-border-' . $panel_id, 'acewpcf_panel[styles][mobile_toggle_hover_border_color]', __( 'Border', 'ace-content-filters' ), $panel_styles['mobile_toggle_hover_border_color'], '#0f1417' ); ?>
							</div>
						</section>
					</div>

						</section>

						<section class="cpcf-style-card cpcf-style-card--wide cpcf-style-card--panel-separators">
					<div class="cpcf-style-card__heading">
						<div>
							<h4><?php echo esc_html__( 'Filter separators', 'ace-content-filters' ); ?></h4>
							<p><?php echo esc_html__( 'Style the divider and spacing shown between each filter set inside the panel. This also controls how airy or compact collapsed stacks feel.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-field-grid cpcf-field-grid--two">
						<?php acewpcf_render_color_style_field( 'cpcf-panel-separator-color-' . $panel_id, 'acewpcf_panel[styles][separator_color]', __( 'Separator color', 'ace-content-filters' ), $panel_styles['separator_color'], '#e5dcc8' ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-panel-separator-width-' . $panel_id, 'acewpcf_panel[styles][separator_width]', __( 'Separator width (px)', 'ace-content-filters' ), $panel_styles['separator_width'], '1', array( 'min' => '0', 'max' => '8', 'step' => '1' ) ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-panel-separator-spacing-' . $panel_id, 'acewpcf_panel[styles][separator_spacing]', __( 'Separator spacing (px)', 'ace-content-filters' ), $panel_styles['separator_spacing'], '18', array( 'min' => '0', 'max' => '48', 'step' => '1' ) ); ?>
					</div>
						</section>

						<section class="cpcf-style-card cpcf-style-card--wide">
					<div class="cpcf-style-card__heading">
						<div>
							<h4><?php echo esc_html__( 'Group headings', 'ace-content-filters' ); ?></h4>
							<p><?php echo esc_html__( 'Style the optional section labels shown above grouped filter sets in this panel.', 'ace-content-filters' ); ?></p>
						</div>
					</div>

					<div class="cpcf-field-grid cpcf-field-grid--two">
						<?php acewpcf_render_color_style_field( 'cpcf-panel-group-header-color-' . $panel_id, 'acewpcf_panel[styles][group_header_color]', __( 'Color', 'ace-content-filters' ), $panel_styles['group_header_color'], '#1d2327' ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-panel-group-header-size-' . $panel_id, 'acewpcf_panel[styles][group_header_font_size]', __( 'Font size (px)', 'ace-content-filters' ), $panel_styles['group_header_font_size'], '12', array( 'min' => '10', 'max' => '32', 'step' => '1' ) ); ?>
						<?php acewpcf_render_font_style_field( 'cpcf-panel-group-header-font-' . $panel_id, 'acewpcf_panel[styles][group_header_font_family]', __( 'Font family', 'ace-content-filters' ), $panel_styles['group_header_font_family'], $font_suggestions ); ?>
						<?php acewpcf_render_select_style_field( 'cpcf-panel-group-header-weight-' . $panel_id, 'acewpcf_panel[styles][group_header_font_weight]', __( 'Font weight', 'ace-content-filters' ), $panel_styles['group_header_font_weight'], $font_weight_choices ); ?>
						<?php acewpcf_render_select_style_field( 'cpcf-panel-group-header-transform-' . $panel_id, 'acewpcf_panel[styles][group_header_text_transform]', __( 'Text transform', 'ace-content-filters' ), $panel_styles['group_header_text_transform'], $text_transform_choices ); ?>
						<?php acewpcf_render_number_style_field( 'cpcf-panel-group-header-spacing-' . $panel_id, 'acewpcf_panel[styles][group_header_letter_spacing]', __( 'Letter spacing (px)', 'ace-content-filters' ), $panel_styles['group_header_letter_spacing'], '0.8', array( 'min' => '-10', 'max' => '20', 'step' => '0.1' ) ); ?>
					</div>
						</section>
					</div>
				</section>
			</div>

			<aside class="cpcf-panel cpcf-panel--sidebar">
				<div class="cpcf-sidebar-card cpcf-sidebar-card--nav">
					<span class="cpcf-field__label"><?php echo esc_html__( 'Jump to', 'ace-content-filters' ); ?></span>
					<nav class="cpcf-editor-nav" aria-label="<?php echo esc_attr__( 'Panel editor sections', 'ace-content-filters' ); ?>">
						<a href="#cpcf-panel-editor-settings"><?php echo esc_html__( 'Panel settings', 'ace-content-filters' ); ?></a>
						<a href="#cpcf-panel-editor-filters"><?php echo esc_html__( 'Included filter sets', 'ace-content-filters' ); ?></a>
						<a href="#cpcf-panel-editor-behaviour"><?php echo esc_html__( 'Behaviour', 'ace-content-filters' ); ?></a>
						<a href="#cpcf-panel-editor-appearance"><?php echo esc_html__( 'Appearance', 'ace-content-filters' ); ?></a>
					</nav>
				</div>

				<div class="cpcf-sidebar-card">
					<span class="cpcf-field__label"><?php echo esc_html__( 'Placement', 'ace-content-filters' ); ?></span>
					<p><?php echo esc_html__( 'Place this panel with shortcode or select it in Elementor for a clean multi-filter layout.', 'ace-content-filters' ); ?></p>
					<span class="cpcf-field__label"><?php echo esc_html__( 'Shortcode', 'ace-content-filters' ); ?></span>
					<div class="cpcf-shortcode-box cpcf-shortcode-box--stacked">
						<code><?php echo esc_html( $shortcode ); ?></code>
						<button type="button" class="button button-small cpcf-copy-shortcode" data-shortcode="<?php echo esc_attr( $shortcode ); ?>"><?php echo esc_html__( 'Copy shortcode', 'ace-content-filters' ); ?></button>
					</div>
					<p><?php echo esc_html__( 'Use this shortcode to show the panel exactly as saved.', 'ace-content-filters' ); ?></p>
					<p><?php echo esc_html__( 'Elementor also supports selecting a saved filter panel directly.', 'ace-content-filters' ); ?></p>
				</div>
			</aside>
		</div>

		<div class="cpcf-editor__footer">
			<div class="cpcf-editor__footer-secondary">
				<?php do_action( 'acewpcf_panel_form_secondary_actions', $panel, $is_new ); ?>
				<?php if ( ! $is_new ) : ?>
					<button type="submit" name="acewpcf_delete_panel" value="1" class="button cpcf-button-danger" onclick="return window.confirm('<?php echo esc_js( __( 'Delete this filter panel?', 'ace-content-filters' ) ); ?>');"><?php echo esc_html__( 'Delete Filter Panel', 'ace-content-filters' ); ?></button>
				<?php endif; ?>
				<?php do_action( 'acewpcf_panel_form_secondary_feedback', $panel, $is_new ); ?>
			</div>
			<div class="cpcf-editor__footer-primary">
				<a class="button button-secondary" href="<?php echo esc_url( acewpcf_get_admin_page_url() ); ?>"><?php echo esc_html__( 'Cancel', 'ace-content-filters' ); ?></a>
				<?php submit_button( esc_html__( 'Save Filter Panel', 'ace-content-filters' ), 'primary', 'submit', false ); ?>
			</div>
		</div>
	</form>
	<?php
}

function acewpcf_render_settings_page() {
	if ( ! current_user_can( 'manage_options' ) ) {
		return;
	}

	$filter_sets          = acewpcf_get_filter_sets();
	$filter_panels        = acewpcf_get_filter_panels();
	$content_searches     = acewpcf_get_content_searches();
	$notice               = sanitize_key( acewpcf_get_admin_query_arg( 'acewpcf_notice', '' ) );
	$action               = sanitize_key( acewpcf_get_admin_query_arg( 'acewpcf_action', 'list' ) );
	$requested_filter     = sanitize_key( acewpcf_get_admin_query_arg( 'filter_id' ) );
	$requested_panel      = sanitize_key( acewpcf_get_admin_query_arg( 'panel_id' ) );
	$requested_search     = sanitize_key( acewpcf_get_admin_query_arg( 'search_id' ) );
	$active_filter        = array();
	$active_panel         = array();
	$active_search        = array();
	$is_new               = false;
	$is_new_panel         = false;
	$is_new_search        = false;
	$term_option_groups     = array();

	if ( 'new' === $action ) {
		$active_filter = acewpcf_get_default_filter_set();
		/* translators: %d: next available filter set number. */
		$default_filter_name   = __( 'Filter Set %d', 'ace-content-filters' );
		$active_filter['name'] = sprintf( $default_filter_name, count( $filter_sets ) + 1 );
		$active_filter['id']   = acewpcf_generate_filter_id( $active_filter['name'], array_keys( $filter_sets ), 'filter' );
		$is_new                = true;
	} elseif ( 'edit' === $action ) {
		if ( '' !== $requested_filter && isset( $filter_sets[ $requested_filter ] ) ) {
			$active_filter = $filter_sets[ $requested_filter ];
		} else {
			$notice = 'missing';
			$action = 'list';
		}
	} elseif ( 'panel_new' === $action ) {
		if ( ! empty( $filter_sets ) ) {
			$active_panel = acewpcf_get_default_filter_panel();
			/* translators: %d: next available filter panel number. */
			$default_panel_name   = __( 'Filter Panel %d', 'ace-content-filters' );
			$active_panel['name'] = sprintf( $default_panel_name, count( $filter_panels ) + 1 );
			$active_panel['id']   = acewpcf_generate_filter_id( 'panel-' . $active_panel['name'], array_keys( $filter_panels ), 'panel' );
			$is_new_panel         = true;
		} else {
			$notice = 'panel_needs_filters';
			$action = 'list';
		}
	} elseif ( 'panel_edit' === $action ) {
		if ( '' !== $requested_panel && isset( $filter_panels[ $requested_panel ] ) ) {
			$active_panel = $filter_panels[ $requested_panel ];
		} else {
			$notice = 'panel_missing';
			$action = 'list';
		}
	} elseif ( 'search_new' === $action ) {
		$active_search = acewpcf_get_default_content_search();
		/* translators: %d: next available content search number. */
		$default_search_name   = __( 'Content Search %d', 'ace-content-filters' );
		$active_search['name'] = sprintf( $default_search_name, count( $content_searches ) + 1 );
		$active_search['id']   = acewpcf_generate_filter_id( $active_search['name'], array_keys( $content_searches ), 'search' );
		$is_new_search         = true;
	} elseif ( 'search_edit' === $action ) {
		if ( '' !== $requested_search && isset( $content_searches[ $requested_search ] ) ) {
			$active_search = $content_searches[ $requested_search ];
		} else {
			$notice = 'search_missing';
			$action = 'list';
		}
	}
	?>
	<div class="wrap cpcf-admin">
		<h1 class="screen-reader-text"><?php echo esc_html__( 'Content Filter Dashboard', 'ace-content-filters' ); ?></h1>

		<div class="cpcf-admin__notice-stack">
			<?php acewpcf_render_admin_notice( $notice ); ?>
			<?php do_action( 'acewpcf_render_settings_page_notices', $action, $filter_sets ); ?>
		</div>

		<?php if ( 'list' === $action ) : ?>
			<div class="cpcf-admin__dashboard">
				<section class="cpcf-admin__hero">
					<div class="cpcf-admin__hero-brand">
						<div class="cpcf-admin__hero-copy">
						<p class="cpcf-admin__eyebrow"><?php echo esc_html__( 'ACE Content Filters', 'ace-content-filters' ); ?></p>
						<p class="cpcf-admin__hero-title"><?php echo esc_html__( 'Content Filter Dashboard', 'ace-content-filters' ); ?></p>
						<p class="cpcf-admin__hero-description"><?php echo esc_html__( 'Build reusable filters for posts, pages, and custom post types, group them into panels, and add instant content search for headers and landing pages.', 'ace-content-filters' ); ?></p>
						</div>
					</div>
					<div class="cpcf-admin__hero-actions">
						<a class="button button-primary button-hero" href="<?php echo esc_url( acewpcf_get_admin_page_url( array( 'acewpcf_action' => 'new' ) ) ); ?>"><?php echo esc_html__( 'Create Filter Set', 'ace-content-filters' ); ?></a>
						<a class="button button-secondary button-hero" href="<?php echo esc_url( acewpcf_get_admin_page_url( array( 'acewpcf_action' => 'search_new' ) ) ); ?>"><?php echo esc_html__( 'New Content Search', 'ace-content-filters' ); ?></a>
					</div>
				</section>

				<?php acewpcf_render_display_settings_panel(); ?>

				<?php if ( empty( $filter_sets ) ) : ?>
					<?php acewpcf_render_empty_state(); ?>
				<?php else : ?>
					<?php acewpcf_render_filter_list( $filter_sets ); ?>
				<?php endif; ?>
				<?php acewpcf_render_filter_panel_list( $filter_panels, $filter_sets ); ?>
				<?php acewpcf_render_content_search_list( $content_searches ); ?>
				<?php do_action( 'acewpcf_render_settings_page_after_list', $filter_sets, array() ); ?>
			</div>
		<?php elseif ( 'search_new' === $action || 'search_edit' === $action ) : ?>
			<?php acewpcf_render_content_search_form( $active_search, $is_new_search ); ?>
		<?php elseif ( 'panel_new' === $action || 'panel_edit' === $action ) : ?>
			<?php acewpcf_render_filter_panel_form( $active_panel, $filter_sets, $is_new_panel ); ?>
		<?php else : ?>
			<?php $term_option_groups = acewpcf_get_admin_term_option_groups( acewpcf_get_admin_filter_taxonomies( $active_filter ) ); ?>
			<?php acewpcf_render_filter_form( $active_filter, $term_option_groups, $is_new ); ?>
		<?php endif; ?>
	</div>
	<?php
}

require_once ACEWPCF_PLUGIN_PATH . 'includes/content-search-admin.php';