<?php
/**
 * AeroSpin CSS Loading Spinners - Admin Page Controller
 *
 * Registers and renders the AeroSpin CSS Loading Spinners settings page in the WordPress admin.
 *
 * @package AeroSpin_CSS_Loading_Spinners
 */

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

/*
|--------------------------------------------------------------------------
| SECTION 1: Admin Controller Class
|--------------------------------------------------------------------------
|
| This file owns the admin menu registration, settings page markup, admin
| asset enqueueing, and safe data handoff to the external admin JavaScript.
|
*/

if ( ! class_exists( 'AeroSpin_CSS_Loading_Spinners_Admin' ) ) {

	/**
	 * Admin controller for AeroSpin CSS Loading Spinners.
	 *
	 * @since 1.0.0
	 */
	final class ACLS_Admin {

		/**
		 * Single class instance.
		 *
		 * @since 1.0.0
		 *
		 * @var AeroSpin_CSS_Loading_Spinners_Admin|null
		 */
		private static $instance = null;

		/**
		 * Settings page hook suffix.
		 *
		 * @since 1.0.0
		 *
		 * @var string
		 */
		private $page_hook = '';

		/**
		 * Submenu options page hook suffix.
		 *
		 * @since 1.1.6
		 *
		 * @var string
		 */
		private $settings_page_hook = '';

		/**
		 * Get the single class instance.
		 *
		 * @since 1.0.0
		 *
		 * @return AeroSpin_CSS_Loading_Spinners_Admin
		 */
		public static function get_instance() {
			if ( null === self::$instance ) {
				self::$instance = new self();
			}

			return self::$instance;
		}

		/**
		 * Register admin hooks.
		 *
		 * @since 1.0.0
		 */
		private function __construct() {
			// Register the settings page and load assets only where needed.
			add_action( 'admin_menu', array( $this, 'register_settings_page' ) );
			add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_assets' ) );
			add_action( 'admin_bar_menu', array( $this, 'register_admin_bar_node' ), 90 );
		}

		/**
		 * Prevent cloning.
		 *
		 * @since 1.0.0
		 *
		 * @return void
		 */
		private function __clone() {
			_doing_it_wrong(
				__FUNCTION__,
				esc_html__( 'Cloning this admin controller is forbidden.', 'aerospin-css-loading-spinners' ),
				'1.0.0'
			);
		}

		/**
		 * Prevent unserializing.
		 *
		 * @since 1.0.0
		 *
		 * @return void
		 */
		public function __wakeup() {
			_doing_it_wrong(
				__FUNCTION__,
				esc_html__( 'Unserializing this admin controller is forbidden.', 'aerospin-css-loading-spinners' ),
				'1.0.0'
			);
		}

		/*
		|--------------------------------------------------------------------------
		| SECTION 2: Menu Registration and Assets
		|--------------------------------------------------------------------------
		*/

		/**
		 * Register the AeroSpin CSS Loading Spinners page under Settings.
		 *
		 * @since 1.0.0
		 *
		 * @return void
		 */
		public function register_settings_page() {
			$capability = $this->get_required_capability();
			$page_slug  = $this->get_page_slug();

			// 1. Primary Top-Level Admin Menu Item in the WordPress sidebar navigation.
			$this->page_hook = add_menu_page(
				esc_html__( 'AeroSpin CSS Loading Spinners', 'aerospin-css-loading-spinners' ),
				esc_html__( 'AeroSpin Spinners', 'aerospin-css-loading-spinners' ),
				$capability,
				$page_slug,
				array( $this, 'render_settings_page' ),
				'dashicons-update',
				65
			);

			// 2. Also register under Settings -> AeroSpin CSS Loading Spinners for users checking Settings.
			$this->settings_page_hook = add_options_page(
				esc_html__( 'AeroSpin CSS Loading Spinners', 'aerospin-css-loading-spinners' ),
				esc_html__( 'AeroSpin CSS Loading Spinners', 'aerospin-css-loading-spinners' ),
				$capability,
				$page_slug,
				array( $this, 'render_settings_page' )
			);
		}

		/**
		 * Register a quick shortcut node in the top WordPress admin bar.
		 *
		 * @since 1.1.6
		 *
		 * @param WP_Admin_Bar $wp_admin_bar The WordPress admin bar instance.
		 * @return void
		 */
		public function register_admin_bar_node( $wp_admin_bar ) {
			if ( ! is_object( $wp_admin_bar ) || ! current_user_can( $this->get_required_capability() ) ) {
				return;
			}

			$settings_url = admin_url( 'admin.php?page=' . $this->get_page_slug() );

			$wp_admin_bar->add_node(
				array(
					'id'    => 'aerospin-spinners',
					'title' => '<span class="ab-icon dashicons dashicons-update" style="font-family:dashicons;line-height:inherit;"></span><span class="ab-label">' . esc_html__( 'AeroSpin', 'aerospin-css-loading-spinners' ) . '</span>',
					'href'  => esc_url( $settings_url ),
					'meta'  => array(
						'title' => esc_html__( 'AeroSpin CSS Loading Spinners Settings', 'aerospin-css-loading-spinners' ),
					),
				)
			);
		}

		/**
		 * Enqueue admin assets for the AeroSpin CSS Loading Spinners page only.
		 *
		 * @since 1.0.0
		 *
		 * @param string $hook_suffix Current admin page hook suffix.
		 * @return void
		 */
		public function enqueue_assets( $hook_suffix ) {
			$page_slug   = $this->get_page_slug();
			$valid_hooks = array(
				$this->page_hook,
				$this->settings_page_hook,
				'toplevel_page_' . $page_slug,
				'settings_page_' . $page_slug,
				'toplevel_page_acls-settings',
				'settings_page_acls-settings',
				'toplevel_page_aerospin-css-loading-spinners',
				'settings_page_aerospin-css-loading-spinners',
				'settings_page_pure-css-spinners',
				'settings_page_clearpath-spinners',
				'settings_page_cp-spinners',
			);

			if ( ! in_array( $hook_suffix, array_filter( $valid_hooks ), true ) ) {
				return;
			}

			wp_enqueue_style( 'wp-color-picker' );

			// Load public spinner styles so the admin preview uses the same animation classes.
			wp_enqueue_style(
				'acls-public',
				$this->get_plugin_url( 'public/css/acls-spinners.css' ),
				array(),
				$this->get_plugin_version()
			);

			wp_enqueue_style(
				'acls-admin',
				$this->get_plugin_url( 'admin/css/acls-admin.css' ),
				array( 'wp-color-picker', 'acls-public' ),
				$this->get_plugin_version()
			);

			wp_enqueue_script(
				'acls-admin',
				$this->get_plugin_url( 'admin/js/acls-admin.js' ),
				array( 'jquery', 'wp-color-picker' ),
				$this->get_plugin_version(),
				true
			);
		}

		/*
		|--------------------------------------------------------------------------
		| SECTION 3: Page Rendering
		|--------------------------------------------------------------------------
		*/

		/**
		 * Render the settings page.
		 *
		 * @since 1.0.0
		 *
		 * @return void
		 */
		public function render_settings_page() {
			if ( ! current_user_can( $this->get_required_capability() ) ) {
				wp_die(
					esc_html__( 'You do not have permission to access AeroSpin CSS Loading Spinners settings.', 'aerospin-css-loading-spinners' ),
					esc_html__( 'AeroSpin CSS Loading Spinners Permission Error', 'aerospin-css-loading-spinners' ),
					array(
						'response' => 403,
					)
				);
			}

			$settings   = $this->get_settings();
			$spinners   = $this->get_spinners();
			$categories = $this->get_categories( $spinners );

			// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Tab navigation only; no form processing or data mutation occurs.
			$raw_tab    = isset( $_GET['tab'] ) ? sanitize_key( wp_unslash( $_GET['tab'] ) ) : 'settings';
			$active_tab = 'settings';
			if ( 'docs' === $raw_tab || 'documentation' === $raw_tab ) {
				$active_tab = 'documentation';
			} elseif ( 'status' === $raw_tab || 'diagnostics' === $raw_tab ) {
				$active_tab = 'diagnostics';
			}
			?>
			<div class="wrap acls-wrap">
				<?php $this->render_admin_data( $spinners ); ?>
				<?php $this->render_settings_message(); ?>

				<header class="acls-admin-header">
					<div class="acls-header-accent-bar" aria-hidden="true"></div>
					<div class="acls-header-main">
						<a class="acls-admin-logo" href="<?php echo esc_url( $this->get_brand_url() ); ?>" target="_blank" rel="noopener noreferrer" title="<?php echo esc_attr__( 'WPClearPath.com', 'aerospin-css-loading-spinners' ); ?>" aria-label="<?php echo esc_attr__( 'Visit WPClearPath.com', 'aerospin-css-loading-spinners' ); ?>">
							<svg viewBox="0 0 40 40" class="acls-apex-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="28" height="28">
								<path d="M 8,30 L 20,12" stroke="#7fd4ff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
								<path d="M 16,14 L 32,30" stroke="#ffffff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
							</svg>
							<span class="acls-brand-monogram" aria-hidden="true">CP</span>
						</a>
						<div class="acls-header-title">
							<div class="acls-header-title-row">
								<h1 class="acls-admin-title"><?php echo esc_html__( 'AeroSpin CSS Loading Spinners', 'aerospin-css-loading-spinners' ); ?></h1>
								<span class="acls-brand-tag">&#128640; <?php echo esc_html__( 'Standard Edition', 'aerospin-css-loading-spinners' ); ?></span>
								<span class="acls-header-version">v<?php echo esc_html( $this->get_plugin_version() ); ?></span>
							</div>
							<p class="acls-header-sub"><?php echo esc_html__( 'A lightweight, accessible frontend loading utility.', 'aerospin-css-loading-spinners' ); ?></p>
						</div>
					</div>
				</header>

				<?php $this->render_nav_tabs( $active_tab ); ?>

				<form id="acls-settings-form" method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
					<input type="hidden" name="action" value="acls_save_settings" />
					<input type="hidden" name="AeroSpin_CSS_Loading_Spinners_current_tab" id="acls-current-tab" value="<?php echo esc_attr( $active_tab ); ?>" />
					<input type="hidden" name="Pure_CSS_Spinners_current_tab" value="<?php echo esc_attr( $active_tab ); ?>" />
					<?php wp_nonce_field( 'acls_save_settings', 'acls_nonce' ); ?>
					<?php wp_nonce_field( 'Pure_CSS_Spinners_save_settings', 'Pure_CSS_Spinners_nonce' ); ?>

					<div class="acls-layout">
						<main class="acls-main-column">
							<!-- Tab 1: Settings -->
							<div id="acls-tab-pane-settings" class="acls-tab-pane <?php echo 'settings' === $active_tab ? 'acls-tab-active' : ''; ?>" role="tabpanel" aria-labelledby="acls-tab-settings">
								<?php $this->render_general_card( $settings ); ?>
								<?php $this->render_spinner_card( $settings, $spinners, $categories ); ?>
								<?php $this->render_appearance_card( $settings ); ?>
								<?php $this->render_behavior_card( $settings ); ?>
								<?php $this->render_exclusions_card( $settings ); ?>
								<?php $this->render_custom_css_card( $settings ); ?>

								<div class="acls-form-actions-bottom">
									<?php submit_button( esc_html__( 'Save Settings', 'aerospin-css-loading-spinners' ), 'primary button-hero acls-save-btn', 'submit', false ); ?>
								</div>
							</div>

							<!-- Tab 2: Documentation -->
							<div id="acls-tab-pane-documentation" class="acls-tab-pane <?php echo 'documentation' === $active_tab ? 'acls-tab-active' : ''; ?>" role="tabpanel" aria-labelledby="acls-tab-documentation">
								<?php $this->render_documentation_tab(); ?>
							</div>

							<!-- Tab 3: Diagnostics -->
							<div id="acls-tab-pane-diagnostics" class="acls-tab-pane <?php echo 'diagnostics' === $active_tab ? 'acls-tab-active' : ''; ?>" role="tabpanel" aria-labelledby="acls-tab-diagnostics">
								<?php $this->render_diagnostics_tab( $settings, $spinners ); ?>
							</div>
						</main>

						<aside class="acls-sidebar-column">
							<?php $this->render_preview_card( $settings, $spinners ); ?>
							<?php $this->render_status_card( $settings, $spinners ); ?>
							<?php $this->render_tips_card(); ?>
							<?php $this->render_ecosystem_card(); ?>
						</aside>
					</div>
				</form>
			</div>
			<?php
		}

		/**
		 * Render safe JSON configuration for the external admin script.
		 *
		 * @since 1.1.4
		 *
		 * @param array $spinners Spinner definitions.
		 * @return void
		 */
		private function render_admin_data( $spinners ) {
			$data = array(
				'spinnersMap' => $this->get_script_spinners_map( $spinners ),
				'i18n'        => array(
					'invalidSpinnerStyle' => esc_html__( 'Invalid spinner style selected.', 'aerospin-css-loading-spinners' ),
					'selectedSpinner'     => esc_html__( 'Selected spinner style', 'aerospin-css-loading-spinners' ),
					'previewUpdated'      => esc_html__( 'Preview updated.', 'aerospin-css-loading-spinners' ),
					'rangeUpdated'        => esc_html__( 'Value updated.', 'aerospin-css-loading-spinners' ),
				),
			);

			printf(
				'<textarea id="acls-admin-data" class="acls-screen-reader-text" tabindex="-1" aria-hidden="true" readonly="readonly">%s</textarea>',
				esc_textarea( wp_json_encode( $data ) )
			);
		}

		/**
		 * Render redirect-based settings messages.
		 *
		 * @since 1.1.4
		 *
		 * @return void
		 */
		private function render_settings_message() {
			$message = get_transient( 'AeroSpin_CSS_Loading_Spinners_settings_messages' );
			if ( false === $message ) {
				$message = get_transient( 'Pure_CSS_Spinners_settings_messages' );
			}

			if ( ! is_array( $message ) || empty( $message['message'] ) ) {
				return;
			}

			delete_transient( 'AeroSpin_CSS_Loading_Spinners_settings_messages' );
			delete_transient( 'Pure_CSS_Spinners_settings_messages' );

			$type = isset( $message['type'] ) ? sanitize_key( $message['type'] ) : 'success';

			if ( ! in_array( $type, array( 'success', 'info', 'warning', 'error' ), true ) ) {
				$type = 'info';
			}

			printf(
				'<div class="notice notice-%1$s is-dismissible"><p>%2$s</p></div>',
				esc_attr( $type ),
				esc_html( $message['message'] )
			);
		}

		/**
		 * Render the general settings card.
		 *
		 * @since 1.0.0
		 *
		 * @param array $settings Normalized settings.
		 * @return void
		 */
		private function render_general_card( $settings ) {
			$is_active = ! empty( $settings['enabled'] );
			?>
			<section class="acls-card" id="acls-card-general">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'General Settings', 'aerospin-css-loading-spinners' ); ?></h2>
					<span class="acls-status-pill <?php echo $is_active ? 'acls-status-pill--active' : 'acls-status-pill--inactive'; ?>">
						<span class="acls-status-dot" aria-hidden="true"></span>
						<?php echo $is_active ? esc_html__( 'Loader Active', 'aerospin-css-loading-spinners' ) : esc_html__( 'Loader Disabled', 'aerospin-css-loading-spinners' ); ?>
					</span>
				</div>
				<div class="acls-card-body">
					<div class="acls-section-intro">
						<p><?php echo esc_html__( 'Control primary loading overlay activation across your WordPress frontend. When enabled, AeroSpin CSS Loading Spinners monitors internal clicks and displays an elegant overlay while the browser requests and parses destination pages.', 'aerospin-css-loading-spinners' ); ?></p>
					</div>
					<?php
					$this->render_toggle_field(
						'cps_enabled',
						esc_html__( 'Enable Loader', 'aerospin-css-loading-spinners' ),
						$is_active,
						esc_html__( 'Display the loading overlay for qualifying frontend navigation events.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'When enabled, clicking standard internal links activates the transition screen. Anchor jumps (#), email/phone links, right clicks, downloads, and new tabs (target="_blank") are intelligently ignored.', 'aerospin-css-loading-spinners' )
					);
					?>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the spinner picker card.
		 *
		 * @since 1.0.0
		 *
		 * @param array $settings   Normalized settings.
		 * @param array $spinners   Spinner definitions.
		 * @param array $categories Spinner categories.
		 * @return void
		 */
		private function render_spinner_card( $settings, $spinners, $categories ) {
			$current_style = isset( $settings['spinner_style'] ) ? sanitize_key( $settings['spinner_style'] ) : 'ring';
			$spinner_count = count( $spinners );
			?>
			<section class="acls-card" id="acls-card-spinner-style">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Spinner Style', 'aerospin-css-loading-spinners' ); ?></h2>
					<span class="acls-card-count-badge">
						<?php
						/* translators: %d: Total number of spinner animations available. */
						printf( esc_html__( '%d Animations Available', 'aerospin-css-loading-spinners' ), (int) $spinner_count );
						?>
					</span>
				</div>
				<div class="acls-card-body">
					<div class="acls-section-intro">
						<p><?php echo esc_html__( 'Select an animation style that matches your website brand. All spinners are rendered with pure CSS and vector SVG for smooth 60fps rendering without bulky script libraries.', 'aerospin-css-loading-spinners' ); ?></p>
						<p class="acls-section-subtext"><span class="dashicons dashicons-info" aria-hidden="true"></span> <?php echo esc_html__( 'Tip: Click any spinner card below to immediately preview its movement, color mapping, and scale in the Live Preview.', 'aerospin-css-loading-spinners' ); ?></p>
					</div>

					<div class="acls-category-tabs" role="tablist" aria-label="<?php echo esc_attr__( 'Spinner categories', 'aerospin-css-loading-spinners' ); ?>">
						<button type="button" class="acls-cat-tab" data-category="all" role="tab" aria-selected="true">
							<?php echo esc_html__( 'All Spinners', 'aerospin-css-loading-spinners' ); ?>
						</button>
						<?php foreach ( $categories as $category ) : ?>
							<button type="button" class="acls-cat-tab" data-category="<?php echo esc_attr( sanitize_title( $category ) ); ?>" role="tab" aria-selected="false">
								<?php echo esc_html( $category ); ?>
							</button>
						<?php endforeach; ?>
					</div>

					<div id="acls-spinners-grid" class="acls-spinners-grid" role="radiogroup" aria-label="<?php echo esc_attr__( 'Spinner styles', 'aerospin-css-loading-spinners' ); ?>">
						<?php foreach ( $spinners as $key => $spinner ) : ?>
							<?php
							$key         = sanitize_key( $key );
							$label       = isset( $spinner['label'] ) ? $spinner['label'] : $key;
							$description = isset( $spinner['description'] ) ? $spinner['description'] : '';
							$category    = isset( $spinner['category'] ) ? $spinner['category'] : esc_html__( 'General', 'aerospin-css-loading-spinners' );
							$is_selected = $key === $current_style;
							?>
							<label class="acls-spinner-card<?php echo $is_selected ? ' selected' : ''; ?>" data-category="<?php echo esc_attr( sanitize_title( $category ) ); ?>">
								<input type="radio" name="cps_spinner_style" value="<?php echo esc_attr( $key ); ?>" <?php checked( $is_selected ); ?> />
								<span class="acls-spinner-preview-wrap" aria-hidden="true">
									<?php echo $this->get_spinner_html( $spinner ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Sanitized by get_spinner_html(). ?>
								</span>
								<span class="acls-spinner-info">
									<span class="acls-spinner-name"><?php echo esc_html( $label ); ?></span>
									<span class="acls-spinner-category-tag"><?php echo esc_html( $category ); ?></span>
									<span class="acls-spinner-desc"><?php echo esc_html( $description ); ?></span>
								</span>
								<span class="acls-spinner-check" aria-hidden="true">&#10003;</span>
							</label>
						<?php endforeach; ?>
					</div>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the appearance card.
		 *
		 * @since 1.0.0
		 *
		 * @param array $settings Normalized settings.
		 * @return void
		 */
		private function render_appearance_card( $settings ) {
			?>
			<section class="acls-card" id="acls-card-appearance">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Colors and Appearance', 'aerospin-css-loading-spinners' ); ?></h2>
				</div>
				<div class="acls-card-body">
					<div class="acls-section-intro">
						<p><?php echo esc_html__( 'Customize the colors, dimensions, and backdrop blur of your loading overlay. Changes reflect in real time in the Live Preview.', 'aerospin-css-loading-spinners' ); ?></p>
					</div>
					<?php
					$this->render_color_field(
						'cps_spinner_color',
						esc_html__( 'Primary Color', 'aerospin-css-loading-spinners' ),
						$settings['spinner_color'],
						esc_html__( 'Main spinner animation color.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Used for primary lines, rings, dots, and foreground shapes. Recommended: Select your primary brand color with sufficient contrast against the overlay.', 'aerospin-css-loading-spinners' )
					);
					$this->render_color_field(
						'cps_spinner_secondary',
						esc_html__( 'Secondary Color', 'aerospin-css-loading-spinners' ),
						$settings['spinner_secondary'],
						esc_html__( 'Secondary spinner accent color.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Utilized by dual-tone spinners (rings, pulse waves, track rings, and multi-dot loaders) for track backgrounds or contrasting segments.', 'aerospin-css-loading-spinners' )
					);
					$this->render_range_field(
						'cps_spinner_size',
						esc_html__( 'Spinner Size', 'aerospin-css-loading-spinners' ),
						$settings['spinner_size'],
						16,
						240,
						1,
						'px',
						esc_html__( 'Size of the loader animation.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Controls the bounding size of the spinner icon. Recommended sweet spot: 40px–64px for desktop balance, and 32px–48px for compact mobile layouts.', 'aerospin-css-loading-spinners' )
					);
					$this->render_color_field(
						'cps_overlay_color',
						esc_html__( 'Overlay Color', 'aerospin-css-loading-spinners' ),
						$settings['overlay_color'],
						esc_html__( 'Background color behind the spinner.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'The full-screen canvas color that covers the viewport during navigation. Pure white (#ffffff) or dark obsidian (#0f172a / #1a202c) are common choices.', 'aerospin-css-loading-spinners' )
					);
					$this->render_range_field(
						'cps_overlay_opacity',
						esc_html__( 'Overlay Opacity', 'aerospin-css-loading-spinners' ),
						$settings['overlay_opacity'],
						0,
						100,
						1,
						'%',
						esc_html__( 'Opacity level for the loading overlay.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Recommended: 75%–90%. This gently masks the old page layout without feeling totally opaque, preserving spatial context for visitors.', 'aerospin-css-loading-spinners' )
					);
					$this->render_range_field(
						'cps_overlay_blur',
						esc_html__( 'Overlay Blur', 'aerospin-css-loading-spinners' ),
						$settings['overlay_blur'],
						0,
						30,
						1,
						'px',
						esc_html__( 'Backdrop blur applied behind the overlay.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Applies a modern frosted-glass blur to elements behind the loading veil. Note: 0px offers maximum GPU performance; 4px–10px yields a refined glassmorphic aesthetic.', 'aerospin-css-loading-spinners' )
					);
					$this->render_number_field(
						'cps_z_index',
						esc_html__( 'Z-Index', 'aerospin-css-loading-spinners' ),
						$settings['z_index'],
						1,
						2147483647,
						esc_html__( 'Stacking order for the frontend overlay.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Default is 99999. If your theme has floating chat widgets, sticky headers, or modals that appear above the loader, increase this number.', 'aerospin-css-loading-spinners' )
					);
					?>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the behavior card.
		 *
		 * @since 1.0.0
		 *
		 * @param array $settings Normalized settings.
		 * @return void
		 */
		private function render_behavior_card( $settings ) {
			?>
			<section class="acls-card" id="acls-card-behavior">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Timing and Behavior', 'aerospin-css-loading-spinners' ); ?></h2>
				</div>
				<div class="acls-card-body">
					<div class="acls-section-intro">
						<p><?php echo esc_html__( 'Adjust timing parameters and event triggers to prevent flicker and maintain a snappy user experience across varying network speeds.', 'aerospin-css-loading-spinners' ); ?></p>
					</div>
					<?php
					$this->render_range_field(
						'cps_fade_out_speed',
						esc_html__( 'Fade Out Speed', 'aerospin-css-loading-spinners' ),
						$settings['fade_out_speed'],
						0,
						5000,
						50,
						'ms',
						esc_html__( 'Time used when hiding the overlay after a page is ready.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Transition duration as the overlay vanishes. 250ms–350ms provides a natural fade. Setting to 0ms hides the spinner instantaneously.', 'aerospin-css-loading-spinners' )
					);
					$this->render_range_field(
						'cps_min_display_time',
						esc_html__( 'Minimum Display Time', 'aerospin-css-loading-spinners' ),
						$settings['min_display_time'],
						0,
						10000,
						50,
						'ms',
						esc_html__( 'Minimum time the overlay should remain visible.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Prevents jarring micro-flashes on fast cache hits or rapid page loads. Setting this to 200ms–350ms ensures transitions look intentional without creating artificial wait times.', 'aerospin-css-loading-spinners' )
					);
					$this->render_toggle_field(
						'cps_show_on_external',
						esc_html__( 'External Links', 'aerospin-css-loading-spinners' ),
						! empty( $settings['show_on_external'] ),
						esc_html__( 'Show the loader when visitors follow external links.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'When active, clicking a link pointing to an external domain displays the loader until the browser unloads to that destination.', 'aerospin-css-loading-spinners' )
					);
					$this->render_toggle_field(
						'cps_show_on_admin_bar',
						esc_html__( 'Admin Bar Links', 'aerospin-css-loading-spinners' ),
						! empty( $settings['show_on_admin_bar'] ),
						esc_html__( 'Allow the loader on frontend admin bar links.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Disabled by default so administrators can navigate directly into the WordPress admin toolbar without triggering frontend loading screens.', 'aerospin-css-loading-spinners' )
					);
					$this->render_toggle_field(
						'cps_show_on_forms',
						esc_html__( 'Form Submissions', 'aerospin-css-loading-spinners' ),
						! empty( $settings['show_on_forms'] ),
						esc_html__( 'Show the loader for qualifying frontend form submissions.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Activates the overlay when visitors submit standard POST forms. Forms targeting new windows or with excluded selectors are safely ignored.', 'aerospin-css-loading-spinners' )
					);
					?>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the exclusions card.
		 *
		 * @since 1.0.0
		 *
		 * @param array $settings Normalized settings.
		 * @return void
		 */
		private function render_exclusions_card( $settings ) {
			$selector_examples = array(
				'.no-loader',
				'.popup-trigger',
				'a[download]',
				'.woocommerce-cart-link',
				'.add_to_cart_button',
				'.elementor-clickable',
			);
			$path_examples     = array(
				'/cart/',
				'/checkout/',
				'/my-account/',
				'/wp-admin/',
				'/wp-login.php',
				'?wc-ajax=',
			);
			?>
			<section class="acls-card" id="acls-card-exclusions">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Exclusions', 'aerospin-css-loading-spinners' ); ?></h2>
				</div>
				<div class="acls-card-body">
					<div class="acls-section-intro">
						<p><?php echo esc_html__( 'Specify CSS selectors or URL paths where the loading spinner should never trigger. Essential for interactive components, AJAX buttons, popups, and checkout flows.', 'aerospin-css-loading-spinners' ); ?></p>
					</div>
					<?php
					$this->render_textarea_field(
						'cps_exclude_selectors',
						esc_html__( 'Exclude Link Selectors', 'aerospin-css-loading-spinners' ),
						$settings['exclude_selectors'],
						esc_html__( 'Enter one CSS selector per line for links or containers that should not trigger the loader.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Use this to bypass in-page AJAX tabs, modal buttons, popups, and file downloads. Matching links or links inside matching containers will not trigger the overlay.', 'aerospin-css-loading-spinners' ),
						$selector_examples
					);
					$this->render_textarea_field(
						'cps_exclude_pages',
						esc_html__( 'Exclude Paths', 'aerospin-css-loading-spinners' ),
						$settings['exclude_pages'],
						esc_html__( 'Enter one path or URL fragment per line where the loader should stay disabled.', 'aerospin-css-loading-spinners' ),
						esc_html__( 'Any page matching one of these URL fragments will completely suppress the loading overlay on both page entry and page departure.', 'aerospin-css-loading-spinners' ),
						$path_examples
					);
					?>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the custom CSS status card.
		 *
		 * @since 1.1.4
		 *
		 * @param array $settings Normalized settings.
		 * @return void
		 */
		private function render_custom_css_card( $settings = array() ) {
			$custom_css = isset( $settings['custom_css'] ) ? (string) $settings['custom_css'] : '';
			?>
			<section class="acls-card" id="acls-card-custom-css">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Custom CSS Status', 'aerospin-css-loading-spinners' ); ?></h2>
				</div>
				<div class="acls-card-body">
					<input type="hidden" name="AeroSpin_CSS_Loading_Spinners_custom_css" value="<?php echo esc_attr( $custom_css ); ?>" />
					<input type="hidden" name="Pure_CSS_Spinners_custom_css" value="<?php echo esc_attr( $custom_css ); ?>" />
					<input type="hidden" name="cps_custom_css" value="<?php echo esc_attr( $custom_css ); ?>" />
					<div class="acls-help-callout acls-help-callout--info">
						<span class="acls-help-callout-icon" aria-hidden="true">&#8505;&#65039;</span>
						<div class="acls-help-callout-content">
							<strong><?php echo esc_html__( 'Stylesheet Architecture Note:', 'aerospin-css-loading-spinners' ); ?></strong>
							<p><?php echo esc_html__( 'In accordance with WPClearPath.com security and performance standards, raw inline database CSS editing is paused in this release. All spinner animations and layouts are served from compiled external stylesheets to optimize caching and prevent Content Security Policy (CSP) issues.', 'aerospin-css-loading-spinners' ); ?></p>
							<p><?php echo esc_html__( 'To apply custom visual overrides, add rules targeting #acls-overlay or .acls-spinner to your child theme style.css or the WordPress Customizer (Appearance -> Customize -> Additional CSS).', 'aerospin-css-loading-spinners' ); ?></p>
						</div>
					</div>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the comprehensive inline guide card with accordion panels.
		 *
		 * @since 1.1.6
		 *
		 * @return void
		 */
		private function render_guide_card() {
			?>
			<section class="acls-card acls-guide-card" id="acls-card-guide">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Inline Guide & Developer Reference', 'aerospin-css-loading-spinners' ); ?></h2>
					<span class="acls-card-badge acls-card-badge--blue"><?php echo esc_html__( 'Documentation', 'aerospin-css-loading-spinners' ); ?></span>
				</div>
				<div class="acls-card-body">
					<div class="acls-section-intro">
						<p><?php echo esc_html__( 'Explore implementation guidelines, developer hooks, CSS customization selectors, and common plugin exclusion patterns.', 'aerospin-css-loading-spinners' ); ?></p>
					</div>

					<div class="acls-guide-accordions">
						<!-- Accordion 1: Quick-Start Guide -->
						<details class="acls-accordion" open>
							<summary class="acls-accordion-summary">
								<span class="acls-accordion-title">&#9889; <?php echo esc_html__( 'Quick-Start Setup Guide (3 Steps)', 'aerospin-css-loading-spinners' ); ?></span>
								<span class="acls-accordion-chevron" aria-hidden="true">&#9662;</span>
							</summary>
							<div class="acls-accordion-content">
								<ol class="acls-steps-list">
									<li>
										<strong><?php echo esc_html__( '1. Enable the Loader:', 'aerospin-css-loading-spinners' ); ?></strong>
										<span><?php echo esc_html__( 'Toggle the "Enable Loader" switch in General Settings above.', 'aerospin-css-loading-spinners' ); ?></span>
									</li>
									<li>
										<strong><?php echo esc_html__( '2. Pick Style & Theme Colors:', 'aerospin-css-loading-spinners' ); ?></strong>
										<span><?php echo esc_html__( 'Select an animation style and set the Primary Color to match your theme accent. Adjust size and opacity to your liking in the Live Preview.', 'aerospin-css-loading-spinners' ); ?></span>
									</li>
									<li>
										<strong><?php echo esc_html__( '3. Configure Critical Exclusions:', 'aerospin-css-loading-spinners' ); ?></strong>
										<span><?php echo esc_html__( 'If your site uses WooCommerce, add /cart/ and /checkout/ to Exclude Paths so checkout flows are never hindered.', 'aerospin-css-loading-spinners' ); ?></span>
									</li>
								</ol>
							</div>
						</details>

						<!-- Accordion 2: Common Plugin Recipes -->
						<details class="acls-accordion">
							<summary class="acls-accordion-summary">
								<span class="acls-accordion-title">&#129513; <?php echo esc_html__( 'Recommended Exclusions for Popular Plugins', 'aerospin-css-loading-spinners' ); ?></span>
								<span class="acls-accordion-chevron" aria-hidden="true">&#9662;</span>
							</summary>
							<div class="acls-accordion-content">
								<p class="acls-text-muted"><?php echo esc_html__( 'Copy and paste these suggested selectors into the "Exclude Link Selectors" box for seamless compatibility:', 'aerospin-css-loading-spinners' ); ?></p>
								<div class="acls-recipe-grid">
									<div class="acls-recipe-item">
										<h4><?php echo esc_html__( 'WooCommerce & Stores', 'aerospin-css-loading-spinners' ); ?></h4>
										<code>.add_to_cart_button</code>
										<code>.single_add_to_cart_button</code>
										<code>.woocommerce-cart-link</code>
										<code>.wc-block-components-checkout-place-order-button</code>
									</div>
									<div class="acls-recipe-item">
										<h4><?php echo esc_html__( 'Page Builders & Modals', 'aerospin-css-loading-spinners' ); ?></h4>
										<code>.elementor-clickable</code>
										<code>.dialog-close-button</code>
										<code>.et_pb_button</code>
										<code>.fl-button</code>
									</div>
									<div class="acls-recipe-item">
										<h4><?php echo esc_html__( 'Form & Media Popups', 'aerospin-css-loading-spinners' ); ?></h4>
										<code>.gform_button</code>
										<code>.wpcf7-submit</code>
										<code>.fancybox-active</code>
										<code>.lightbox-trigger</code>
									</div>
								</div>
							</div>
						</details>

						<!-- Accordion 3: Developer Reference -->
						<details class="acls-accordion">
							<summary class="acls-accordion-summary">
								<span class="acls-accordion-title">&#128736;&#65039; <?php echo esc_html__( 'Developer Reference & CSS / JS Hooks', 'aerospin-css-loading-spinners' ); ?></span>
								<span class="acls-accordion-chevron" aria-hidden="true">&#9662;</span>
							</summary>
							<div class="acls-accordion-content">
								<p><?php echo esc_html__( 'AeroSpin CSS Loading Spinners provides clean frontend HTML IDs, CSS custom properties, and JavaScript events for custom scripting:', 'aerospin-css-loading-spinners' ); ?></p>
								<table class="acls-guide-table">
									<thead>
										<tr>
											<th><?php echo esc_html__( 'Hook / Selector', 'aerospin-css-loading-spinners' ); ?></th>
											<th><?php echo esc_html__( 'Type', 'aerospin-css-loading-spinners' ); ?></th>
											<th><?php echo esc_html__( 'Description', 'aerospin-css-loading-spinners' ); ?></th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><code>#acls-overlay</code> <small>(legacy: <code>#cps-overlay</code>)</small></td>
											<td><span class="acls-badge-code">DOM ID</span></td>
											<td><?php echo esc_html__( 'The full-screen viewport container element.', 'aerospin-css-loading-spinners' ); ?></td>
										</tr>
										<tr>
											<td><code>.acls-spinner</code> <small>(legacy: <code>.cps-spinner</code>)</small></td>
											<td><span class="acls-badge-code">CSS Class</span></td>
											<td><?php echo esc_html__( 'The active animated spinner icon wrapper.', 'aerospin-css-loading-spinners' ); ?></td>
										</tr>
										<tr>
											<td><code>--acls-color</code> <small>(legacy: <code>--cps-color</code>)</small></td>
											<td><span class="acls-badge-code">CSS Var</span></td>
											<td><?php echo esc_html__( 'CSS custom property controlling the primary spinner stroke/fill.', 'aerospin-css-loading-spinners' ); ?></td>
										</tr>
										<tr>
											<td><code>--acls-secondary</code> <small>(legacy: <code>--cps-secondary</code>)</small></td>
											<td><span class="acls-badge-code">CSS Var</span></td>
											<td><?php echo esc_html__( 'CSS custom property controlling secondary tracks and accents.', 'aerospin-css-loading-spinners' ); ?></td>
										</tr>
										<tr>
											<td><code>acls:shown</code> <small>(legacy: <code>aerospin_css_loading_spinners:shown</code>)</small></td>
											<td><span class="acls-badge-code">JS Event</span></td>
											<td><?php echo esc_html__( 'Dispatched on document when the loading overlay becomes visible.', 'aerospin-css-loading-spinners' ); ?></td>
										</tr>
										<tr>
											<td><code>aerospin_css_loading_spinners:hidden</code> <small>(legacy: <code>pure_css_spinners:hidden</code>)</small></td>
											<td><span class="acls-badge-code">JS Event</span></td>
											<td><?php echo esc_html__( 'Dispatched on document when the overlay completes its fade-out.', 'aerospin-css-loading-spinners' ); ?></td>
										</tr>
										<tr>
											<td><code>window.AeroSpin_CSS_Loading_Spinners.hide()</code> <small>(legacy: <code>window.Pure_CSS_Spinners.hide()</code>)</small></td>
											<td><span class="acls-badge-code">JS API</span></td>
											<td><?php echo esc_html__( 'Method to manually hide the overlay via custom JavaScript or AJAX callbacks.', 'aerospin-css-loading-spinners' ); ?></td>
										</tr>
									</tbody>
								</table>
							</div>
						</details>

						<!-- Accordion 4: Troubleshooting FAQ -->
						<details class="acls-accordion">
							<summary class="acls-accordion-summary">
								<span class="acls-accordion-title">&#10067; <?php echo esc_html__( 'Troubleshooting & FAQ', 'aerospin-css-loading-spinners' ); ?></span>
								<span class="acls-accordion-chevron" aria-hidden="true">&#9662;</span>
							</summary>
							<div class="acls-accordion-content">
								<div class="acls-faq-item">
									<strong><?php echo esc_html__( 'Q: Why does the spinner stay visible on an external link or slow download?', 'aerospin-css-loading-spinners' ); ?></strong>
									<p><?php echo esc_html__( 'If a link initiates a browser download (.pdf, .zip) rather than navigating to a new HTML page, add the link or its class to "Exclude Link Selectors" or add a[download]. AeroSpin CSS Loading Spinners automatically times out after 10 seconds as a failsafe.', 'aerospin-css-loading-spinners' ); ?></p>
								</div>
								<div class="acls-faq-item">
									<strong><?php echo esc_html__( 'Q: Does AeroSpin CSS Loading Spinners respect visitors who prefer reduced motion?', 'aerospin-css-loading-spinners' ); ?></strong>
									<p><?php echo esc_html__( 'Yes! When a visitor enables "Reduce Motion" in their operating system accessibility settings, CSS animations are automatically converted to static indicators to prevent discomfort.', 'aerospin-css-loading-spinners' ); ?></p>
								</div>
								<div class="acls-faq-item">
									<strong><?php echo esc_html__( 'Q: How can I temporarily test with the loader off without losing my colors?', 'aerospin-css-loading-spinners' ); ?></strong>
									<p><?php echo esc_html__( 'Simply toggle "Enable Loader" to OFF and save. All your configured styles, colors, opacity, and exclusion lists are safely preserved in the database.', 'aerospin-css-loading-spinners' ); ?></p>
								</div>
							</div>
						</details>
					</div>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the live preview card.
		 *
		 * @since 1.0.0
		 *
		 * @param array $settings Normalized settings.
		 * @param array $spinners Spinner definitions.
		 * @return void
		 */
		private function render_preview_card( $settings, $spinners ) {
			$current_style = isset( $settings['spinner_style'] ) ? sanitize_key( $settings['spinner_style'] ) : 'ring';
			$spinner       = isset( $spinners[ $current_style ] ) ? $spinners[ $current_style ] : reset( $spinners );
			?>
			<section class="acls-card" id="acls-card-preview">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Live Preview', 'aerospin-css-loading-spinners' ); ?></h2>
					<span class="acls-card-badge"><?php echo esc_html__( 'Interactive', 'aerospin-css-loading-spinners' ); ?></span>
				</div>
				<div class="acls-card-body">
					<div id="acls-live-preview" class="acls-live-preview" aria-live="polite">
						<div id="acls-preview-overlay" class="acls-preview-overlay">
							<div id="acls-preview-spinner">
								<?php echo $this->get_spinner_html( $spinner ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Sanitized by get_spinner_html(). ?>
							</div>
						</div>
					</div>
					<div class="acls-preview-stats">
						<span class="acls-preview-stat-item"><span class="acls-stat-label"><?php echo esc_html__( 'Size:', 'aerospin-css-loading-spinners' ); ?></span> <strong id="acls-stat-size"><?php echo (int) $settings['spinner_size']; ?>px</strong></span>
						<span class="acls-preview-stat-item"><span class="acls-stat-label"><?php echo esc_html__( 'Opacity:', 'aerospin-css-loading-spinners' ); ?></span> <strong id="acls-stat-opacity"><?php echo (int) $settings['overlay_opacity']; ?>%</strong></span>
						<span class="acls-preview-stat-item"><span class="acls-stat-label"><?php echo esc_html__( 'Blur:', 'aerospin-css-loading-spinners' ); ?></span> <strong id="acls-stat-blur"><?php echo (int) $settings['overlay_blur']; ?>px</strong></span>
					</div>
					<p class="acls-preview-caption"><?php echo esc_html__( 'Preview automatically reflects style, scale, color, opacity, and blur changes.', 'aerospin-css-loading-spinners' ); ?></p>
					<div id="acls-admin-announcer" class="acls-screen-reader-text" aria-live="polite" aria-atomic="true"></div>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the system status diagnostic card.
		 *
		 * @since 1.1.6
		 *
		 * @param array $settings Normalized settings.
		 * @param array $spinners Spinner definitions.
		 * @return void
		 */
		private function render_status_card( $settings, $spinners ) {
			$current_style = isset( $settings['spinner_style'] ) ? sanitize_key( $settings['spinner_style'] ) : 'ring';
			$style_label   = isset( $spinners[ $current_style ]['label'] ) ? $spinners[ $current_style ]['label'] : ucfirst( $current_style );
			$is_active     = ! empty( $settings['enabled'] );
			?>
			<section class="acls-card" id="acls-card-status">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'System Diagnostics', 'aerospin-css-loading-spinners' ); ?></h2>
				</div>
				<div class="acls-card-body">
					<ul class="acls-diagnostics-list">
						<li>
							<span class="acls-diag-label"><?php echo esc_html__( 'Overlay Engine:', 'aerospin-css-loading-spinners' ); ?></span>
							<strong class="<?php echo $is_active ? 'acls-text-success' : 'acls-text-muted'; ?>">
								<?php echo $is_active ? esc_html__( 'Active & Ready', 'aerospin-css-loading-spinners' ) : esc_html__( 'Standby (Disabled)', 'aerospin-css-loading-spinners' ); ?>
							</strong>
						</li>
						<li>
							<span class="acls-diag-label"><?php echo esc_html__( 'Active Style:', 'aerospin-css-loading-spinners' ); ?></span>
							<strong id="acls-diag-active-style"><?php echo esc_html( $style_label ); ?></strong>
						</li>
						<li>
							<span class="acls-diag-label"><?php echo esc_html__( 'Minimum Display:', 'aerospin-css-loading-spinners' ); ?></span>
							<span><?php echo (int) $settings['min_display_time']; ?>ms</span>
						</li>
						<li>
							<span class="acls-diag-label"><?php echo esc_html__( 'Fade Transition:', 'aerospin-css-loading-spinners' ); ?></span>
							<span><?php echo (int) $settings['fade_out_speed']; ?>ms</span>
						</li>
					</ul>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the UX and accessibility tips sidebar card.
		 *
		 * @since 1.1.6
		 *
		 * @return void
		 */
		private function render_tips_card() {
			?>
			<section class="acls-card" id="acls-card-tips">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Best Practices', 'aerospin-css-loading-spinners' ); ?></h2>
				</div>
				<div class="acls-card-body">
					<ul class="acls-tips-list">
						<li>
							<span class="acls-tip-badge">&#9889; <?php echo esc_html__( 'Snappy UX', 'aerospin-css-loading-spinners' ); ?></span>
							<p><?php echo esc_html__( 'Keep minimum display time between 200ms&ndash;350ms so fast pages still feel quick and responsive.', 'aerospin-css-loading-spinners' ); ?></p>
						</li>
						<li>
							<span class="acls-tip-badge">&#127912; <?php echo esc_html__( 'Color Contrast', 'aerospin-css-loading-spinners' ); ?></span>
							<p><?php echo esc_html__( 'Ensure your primary spinner color has at least a 3:1 contrast ratio against the overlay background.', 'aerospin-css-loading-spinners' ); ?></p>
						</li>
						<li>
							<span class="acls-tip-badge">&#9855; <?php echo esc_html__( 'Reduced Motion', 'aerospin-css-loading-spinners' ); ?></span>
							<p><?php echo esc_html__( 'AeroSpin CSS Loading Spinners automatically pauses CSS keyframes if the visitor specifies reduced motion in OS preferences.', 'aerospin-css-loading-spinners' ); ?></p>
						</li>
						<li>
							<span class="acls-tip-badge">&#128722; <?php echo esc_html__( 'Exclusions', 'aerospin-css-loading-spinners' ); ?></span>
							<p><?php echo esc_html__( 'Always exclude payment gateways, checkout routes, and interactive customer cart drawers.', 'aerospin-css-loading-spinners' ); ?></p>
						</li>
					</ul>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the discrete WPClearPath.com Ecosystem card without using the word Support.
		 *
		 * @since 1.1.6
		 *
		 * @return void
		 */
		private function render_ecosystem_card() {
			?>
			<section class="acls-card acls-brand-card" id="acls-card-ecosystem">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'WPClearPath.com Ecosystem', 'aerospin-css-loading-spinners' ); ?></h2>
				</div>
				<div class="acls-card-body">
					<div class="acls-brand-card-content">
						<div class="acls-brand-logo-small">
							<svg viewBox="0 0 40 40" class="acls-apex-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="22" height="22">
								<path d="M 8,30 L 20,12" stroke="#7fd4ff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
								<path d="M 16,14 L 32,30" stroke="#ffffff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
							</svg>
							<span class="acls-brand-initials">CP</span>
						</div>
						<h3 class="acls-brand-card-title"><?php echo esc_html__( 'WPClearPath.com Solutions', 'aerospin-css-loading-spinners' ); ?></h3>
						<p class="acls-brand-tagline"><?php echo esc_html__( 'Crafted with precision by WPClearPath.com to provide faster, cleaner, and smarter solutions for WordPress.', 'aerospin-css-loading-spinners' ); ?></p>
						<div class="acls-brand-card-footer">
							<a class="acls-brand-discrete-link" href="<?php echo esc_url( $this->get_brand_url() ); ?>" target="_blank" rel="noopener noreferrer" title="<?php echo esc_attr__( 'Visit WPClearPath.com', 'aerospin-css-loading-spinners' ); ?>">
								wpclearpath.com <span aria-hidden="true">&#8599;</span>
								<span class="screen-reader-text"><?php echo esc_html__( '(opens in a new tab)', 'aerospin-css-loading-spinners' ); ?></span>
							</a>
						</div>
					</div>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the top-level tabbed navigation bar.
		 *
		 * @since 1.1.6
		 *
		 * @param string $active_tab Currently active tab key.
		 * @return void
		 */
				private function render_nav_tabs( $active_tab ) {
			$tabs = array(
				'settings'      => array(
					'icon'  => '&#9881;',
					'label' => esc_html__( 'Settings', 'aerospin-css-loading-spinners' ),
					'title' => esc_attr__( 'Configure loading spinners, appearance, and exclusions', 'aerospin-css-loading-spinners' ),
				),
				'documentation' => array(
					'icon'  => '&#128218;',
					'label' => esc_html__( 'Documentation', 'aerospin-css-loading-spinners' ),
					'title' => esc_attr__( 'Quick start guide, plugin recipes, developer hooks, and FAQ', 'aerospin-css-loading-spinners' ),
				),
				'diagnostics'   => array(
					'icon'  => '&#129658;',
					'label' => esc_html__( 'Diagnostics', 'aerospin-css-loading-spinners' ),
					'title' => esc_attr__( 'Server environment, active configuration, and cache health', 'aerospin-css-loading-spinners' ),
				),
			);
			?>
			<nav class="nav-tab-wrapper acls-nav-tab-wrapper" aria-label="<?php echo esc_attr__( 'AeroSpin CSS Loading Spinners sections', 'aerospin-css-loading-spinners' ); ?>">
				<?php foreach ( $tabs as $tab_key => $tab_data ) : ?>
					<a href="<?php echo esc_url( add_query_arg( array( 'page' => $this->get_page_slug(), 'tab' => $tab_key ), admin_url( 'options-general.php' ) ) ); ?>" id="acls-tab-<?php echo esc_attr( $tab_key ); ?>" class="nav-tab <?php echo $active_tab === $tab_key ? 'nav-tab-active' : ''; ?>" data-tab="<?php echo esc_attr( $tab_key ); ?>" title="<?php echo esc_attr( $tab_data['title'] ); ?>" <?php echo $active_tab === $tab_key ? 'aria-current="page"' : ''; ?>>
						<span aria-hidden="true"><?php echo $tab_data['icon']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static safe entity. ?></span> <?php echo esc_html( $tab_data['label'] ); ?>
					</a>
				<?php endforeach; ?>
			</nav>
			<?php
		}

/**
		 * Render the Documentation tab content.
		 *
		 * @since 1.1.6
		 *
		 * @return void
		 */
		private function render_documentation_tab() {
			$this->render_guide_card();
			$this->render_testing_checklist_card();
		}

		/**
		 * Render the Testing Checklist card.
		 *
		 * @since 1.1.6
		 *
		 * @return void
		 */
		private function render_testing_checklist_card() {
			?>
			<section class="acls-card" id="acls-card-checklist">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Recommended Testing Checklist', 'aerospin-css-loading-spinners' ); ?></h2>
					<span class="acls-card-badge acls-card-badge--green"><?php echo esc_html__( 'QA & Verification', 'aerospin-css-loading-spinners' ); ?></span>
				</div>
				<div class="acls-card-body">
					<div class="acls-section-intro">
						<p><?php echo esc_html__( 'Follow this verified testing sequence on staging or production to confirm your loading transitions behave predictably across all visitors and devices.', 'aerospin-css-loading-spinners' ); ?></p>
					</div>
					<ul class="acls-checklist">
						<li>
							<span class="acls-check-box" aria-hidden="true">&#10004;</span>
							<div>
								<strong><?php echo esc_html__( '1. Standard Internal Navigation:', 'aerospin-css-loading-spinners' ); ?></strong>
								<p><?php echo esc_html__( 'Click standard menu links and post links. The overlay should appear immediately with your chosen spinner and smooth backdrop.', 'aerospin-css-loading-spinners' ); ?></p>
							</div>
						</li>
						<li>
							<span class="acls-check-box" aria-hidden="true">&#10004;</span>
							<div>
								<strong><?php echo esc_html__( '2. File Downloads & New-Tab Links:', 'aerospin-css-loading-spinners' ); ?></strong>
								<p><?php echo esc_html__( 'Verify that clicking download links (.pdf, .zip) and links opening in new tabs (target="_blank") do NOT trigger the overlay.', 'aerospin-css-loading-spinners' ); ?></p>
							</div>
						</li>
						<li>
							<span class="acls-check-box" aria-hidden="true">&#10004;</span>
							<div>
								<strong><?php echo esc_html__( '3. Hash Anchors & In-Page Jumps:', 'aerospin-css-loading-spinners' ); ?></strong>
								<p><?php echo esc_html__( 'Confirm that clicking table-of-contents links or #anchor jumps scroll smoothly without launching the loading screen.', 'aerospin-css-loading-spinners' ); ?></p>
							</div>
						</li>
						<li>
							<span class="acls-check-box" aria-hidden="true">&#10004;</span>
							<div>
								<strong><?php echo esc_html__( '4. Ecommerce Cart & Checkout Isolation:', 'aerospin-css-loading-spinners' ); ?></strong>
								<p><?php echo esc_html__( 'Add items to your cart and proceed to checkout. Verify AJAX cart updates and payment submissions process uninterrupted.', 'aerospin-css-loading-spinners' ); ?></p>
							</div>
						</li>
						<li>
							<span class="acls-check-box" aria-hidden="true">&#10004;</span>
							<div>
								<strong><?php echo esc_html__( '5. Accessibility & Reduced Motion:', 'aerospin-css-loading-spinners' ); ?></strong>
								<p><?php echo esc_html__( 'Enable "Reduce Motion" in your operating system settings. The overlay will display with animations safely paused.', 'aerospin-css-loading-spinners' ); ?></p>
							</div>
						</li>
					</ul>
				</div>
			</section>
			<?php
		}

		/**
		 * Render the Diagnostics tab content.
		 *
		 * @since 1.1.6
		 *
		 * @param array $settings Normalized settings.
		 * @param array $spinners Spinner definitions.
		 * @return void
		 */
		private function render_diagnostics_tab( $settings, $spinners ) {
			$this->render_system_info_card();
			$this->render_active_config_card( $settings, $spinners );
			$this->render_transients_card();
		}

		/**
		 * Render server and WordPress environment diagnostics.
		 *
		 * @since 1.1.6
		 *
		 * @return void
		 */
		private function render_system_info_card() {
			global $wp_version;

			$server_software = isset( $_SERVER['SERVER_SOFTWARE'] ) ? sanitize_text_field( wp_unslash( $_SERVER['SERVER_SOFTWARE'] ) ) : 'N/A';
			$php_memory      = ini_get( 'memory_limit' ) ? ini_get( 'memory_limit' ) : 'N/A';
			$max_execution   = ini_get( 'max_execution_time' ) ? ini_get( 'max_execution_time' ) . 's' : 'N/A';
			$ob_level        = ob_get_level();
			$debug_mode      = defined( 'WP_DEBUG' ) && WP_DEBUG ? esc_html__( 'Enabled', 'aerospin-css-loading-spinners' ) : esc_html__( 'Disabled', 'aerospin-css-loading-spinners' );
			$textdomain_stat = is_textdomain_loaded( 'aerospin-css-loading-spinners' ) ? esc_html__( 'Loaded', 'aerospin-css-loading-spinners' ) : esc_html__( 'Default', 'aerospin-css-loading-spinners' );
			?>
			<section class="acls-card" id="acls-card-diag-sys">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'System & Environment Diagnostics', 'aerospin-css-loading-spinners' ); ?></h2>
					<span class="acls-card-badge acls-card-badge--blue"><?php echo esc_html__( 'Environment', 'aerospin-css-loading-spinners' ); ?></span>
				</div>
				<div class="acls-card-body">
					<div class="acls-section-intro">
						<p><?php echo esc_html__( 'Detailed runtime environment specifications verified against AeroSpin CSS Loading Spinners baseline requirements.', 'aerospin-css-loading-spinners' ); ?></p>
					</div>
					<table class="acls-diag-table widefat striped">
						<tbody>
							<tr>
								<th><?php echo esc_html__( 'WordPress Version', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code><?php echo esc_html( $wp_version ); ?></code> (<?php echo esc_html__( 'Minimum: 5.8', 'aerospin-css-loading-spinners' ); ?>)</td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'PHP Version', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code><?php echo esc_html( PHP_VERSION ); ?></code> (<?php echo esc_html__( 'Minimum: 7.4', 'aerospin-css-loading-spinners' ); ?>)</td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'Web Server', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code><?php echo esc_html( $server_software ); ?></code></td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'PHP Memory Limit', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code><?php echo esc_html( $php_memory ); ?></code></td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'Max Execution Time', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code><?php echo esc_html( $max_execution ); ?></code></td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'Output Buffering Level', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code><?php echo esc_html( (string) $ob_level ); ?></code></td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'WP_DEBUG', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code><?php echo esc_html( $debug_mode ); ?></code></td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'Translation Domain', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code>aerospin-css-loading-spinners</code> (<?php echo esc_html( $textdomain_stat ); ?>)</td>
							</tr>
						</tbody>
					</table>
				</div>
			</section>
			<?php
		}

		/**
		 * Render active loader configuration overview.
		 *
		 * @since 1.1.6
		 *
		 * @param array $settings Normalized settings.
		 * @param array $spinners Spinner definitions.
		 * @return void
		 */
		private function render_active_config_card( $settings, $spinners ) {
			$current_style = isset( $settings['spinner_style'] ) ? sanitize_key( $settings['spinner_style'] ) : 'ring';
			$style_label   = isset( $spinners[ $current_style ]['label'] ) ? $spinners[ $current_style ]['label'] : ucfirst( $current_style );
			$is_active     = ! empty( $settings['enabled'] );

			$num_selectors = ! empty( $settings['exclude_selectors'] ) ? count( array_filter( array_map( 'trim', explode( "\n", $settings['exclude_selectors'] ) ) ) ) : 0;
			$num_paths     = ! empty( $settings['exclude_pages'] ) ? count( array_filter( array_map( 'trim', explode( "\n", $settings['exclude_pages'] ) ) ) ) : 0;
			?>
			<section class="acls-card" id="acls-card-diag-cfg">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Active Loader Configuration', 'aerospin-css-loading-spinners' ); ?></h2>
					<span class="acls-card-badge <?php echo $is_active ? 'acls-card-badge--green' : 'acls-card-badge--amber'; ?>">
						<?php echo $is_active ? esc_html__( 'Active', 'aerospin-css-loading-spinners' ) : esc_html__( 'Standby', 'aerospin-css-loading-spinners' ); ?>
					</span>
				</div>
				<div class="acls-card-body">
					<table class="acls-diag-table widefat striped">
						<tbody>
							<tr>
								<th><?php echo esc_html__( 'Loader Engine Status', 'aerospin-css-loading-spinners' ); ?></th>
								<td>
									<strong class="<?php echo $is_active ? 'acls-text-success' : 'acls-text-muted'; ?>">
										<?php echo $is_active ? esc_html__( 'Enabled (Listening on qualifying links)', 'aerospin-css-loading-spinners' ) : esc_html__( 'Disabled (No frontend overlay output)', 'aerospin-css-loading-spinners' ); ?>
									</strong>
								</td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'Selected Spinner', 'aerospin-css-loading-spinners' ); ?></th>
								<td><strong><?php echo esc_html( $style_label ); ?></strong> (<code><?php echo esc_html( $current_style ); ?></code>)</td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'Spinner Dimensions', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code><?php echo (int) $settings['spinner_size']; ?>px</code></td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'Primary & Secondary Color', 'aerospin-css-loading-spinners' ); ?></th>
								<td>
									<span class="acls-color-chip" style="background-color: <?php echo esc_attr( $settings['spinner_color'] ); ?>;"></span> <code><?php echo esc_html( $settings['spinner_color'] ); ?></code>
									&nbsp;/&nbsp;
									<span class="acls-color-chip" style="background-color: <?php echo esc_attr( $settings['spinner_secondary'] ); ?>;"></span> <code><?php echo esc_html( $settings['spinner_secondary'] ); ?></code>
								</td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'Overlay Backdrop & Opacity', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code><?php echo esc_html( $settings['overlay_color'] ); ?></code> @ <code><?php echo (int) $settings['overlay_opacity']; ?>%</code> (Blur: <code><?php echo (int) $settings['overlay_blur']; ?>px</code>)</td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'Timing Thresholds', 'aerospin-css-loading-spinners' ); ?></th>
								<td>Min Display: <code><?php echo (int) $settings['min_display_time']; ?>ms</code> | Fade-Out: <code><?php echo (int) $settings['fade_out_speed']; ?>ms</code></td>
							</tr>
							<tr>
								<th><?php echo esc_html__( 'Configured Exclusions', 'aerospin-css-loading-spinners' ); ?></th>
								<td><code><?php echo (int) $num_selectors; ?></code> selectors | <code><?php echo (int) $num_paths; ?></code> URL paths</td>
							</tr>
						</tbody>
					</table>
				</div>
			</section>
			<?php
		}

		/**
		 * Render cache and transient health card.
		 *
		 * @since 1.1.6
		 *
		 * @return void
		 */
		private function render_transients_card() {
			$settings_cached   = ( false !== get_transient( 'aerospin_css_loading_spinners_settings_cache' ) ) || ( false !== get_transient( 'Pure_CSS_Spinners_settings_cache' ) ) || ( false !== get_transient( 'cp_spinners_settings_cache' ) );
			$categories_cached = ( false !== get_transient( 'aerospin_css_loading_spinners_spinner_categories' ) ) || ( false !== get_transient( 'Pure_CSS_Spinners_spinner_categories' ) ) || ( false !== get_transient( 'cp_spinners_spinner_categories' ) );
			?>
			<section class="acls-card" id="acls-card-diag-cache">
				<div class="acls-card-header">
					<h2><?php echo esc_html__( 'Cache & Transient Status', 'aerospin-css-loading-spinners' ); ?></h2>
					<span class="acls-card-badge acls-card-badge--blue"><?php echo esc_html__( 'Optimization', 'aerospin-css-loading-spinners' ); ?></span>
				</div>
				<div class="acls-card-body">
					<div class="acls-section-intro">
						<p><?php echo esc_html__( 'AeroSpin CSS Loading Spinners caches compiled categories and normalized options in WordPress transients to eliminate redundant queries on high-traffic sites.', 'aerospin-css-loading-spinners' ); ?></p>
					</div>
					<table class="acls-diag-table widefat striped">
						<tbody>
							<tr>
								<th><code>aerospin_css_loading_spinners_settings_cache</code> <small>(legacy: <code>Pure_CSS_Spinners_settings_cache</code>)</small></th>
								<td>
									<span class="acls-status-pill <?php echo $settings_cached ? 'acls-status-pill--active' : ''; ?>">
										<span class="acls-status-dot"></span>
										<?php echo $settings_cached ? esc_html__( 'Cached (12h TTL)', 'aerospin-css-loading-spinners' ) : esc_html__( 'Not Cached (Fresh Query)', 'aerospin-css-loading-spinners' ); ?>
									</span>
								</td>
							</tr>
							<tr>
								<th><code>aerospin_css_loading_spinners_spinner_categories</code> <small>(legacy: <code>Pure_CSS_Spinners_spinner_categories</code>)</small></th>
								<td>
									<span class="acls-status-pill <?php echo $categories_cached ? 'acls-status-pill--active' : ''; ?>">
										<span class="acls-status-dot"></span>
										<?php echo $categories_cached ? esc_html__( 'Cached (24h TTL)', 'aerospin-css-loading-spinners' ) : esc_html__( 'Not Cached (Fresh Query)', 'aerospin-css-loading-spinners' ); ?>
									</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</section>
			<?php
		}


		/*
		|--------------------------------------------------------------------------
		| SECTION 4: Field Renderers
		|--------------------------------------------------------------------------
		*/

		/**
		 * Render a toggle field.
		 *
		 * @since 1.0.0
		 *
		 * @param string $name          Field name.
		 * @param string $label         Field label.
		 * @param bool   $checked       Checked state.
		 * @param string $description   Field description.
		 * @param string $extended_help Optional extended inline help.
		 * @return void
		 */
		private function render_toggle_field( $name, $label, $checked, $description, $extended_help = '' ) {
			?>
			<div class="acls-field-row">
				<div class="acls-field-label">
					<label for="<?php echo esc_attr( $name ); ?>"><?php echo esc_html( $label ); ?></label>
				</div>
				<div class="acls-field-control">
					<label class="acls-toggle">
						<input id="<?php echo esc_attr( $name ); ?>" type="checkbox" name="<?php echo esc_attr( $name ); ?>" value="1" <?php checked( $checked ); ?> />
						<span class="acls-toggle-slider" aria-hidden="true"></span>
					</label>
					<p class="description"><?php echo esc_html( $description ); ?></p>
					<?php if ( ! empty( $extended_help ) ) : ?>
						<div class="acls-inline-help">
							<span class="acls-inline-help-icon" aria-hidden="true">&#128161;</span>
							<p><?php echo esc_html( $extended_help ); ?></p>
						</div>
					<?php endif; ?>
				</div>
			</div>
			<?php
		}

		/**
		 * Render a color field.
		 *
		 * @since 1.0.0
		 *
		 * @param string $name          Field name.
		 * @param string $label         Field label.
		 * @param string $value         Field value.
		 * @param string $description   Field description.
		 * @param string $extended_help Optional extended inline help.
		 * @return void
		 */
		private function render_color_field( $name, $label, $value, $description, $extended_help = '' ) {
			?>
			<div class="acls-field-row">
				<div class="acls-field-label">
					<label for="<?php echo esc_attr( $name ); ?>"><?php echo esc_html( $label ); ?></label>
				</div>
				<div class="acls-field-control">
					<input id="<?php echo esc_attr( $name ); ?>" class="acls-color-picker" type="text" name="<?php echo esc_attr( $name ); ?>" value="<?php echo esc_attr( $value ); ?>" />
					<p class="description"><?php echo esc_html( $description ); ?></p>
					<?php if ( ! empty( $extended_help ) ) : ?>
						<div class="acls-inline-help">
							<span class="acls-inline-help-icon" aria-hidden="true">&#128161;</span>
							<p><?php echo esc_html( $extended_help ); ?></p>
						</div>
					<?php endif; ?>
				</div>
			</div>
			<?php
		}

		/**
		 * Render a range field.
		 *
		 * @since 1.0.0
		 *
		 * @param string $name          Field name.
		 * @param string $label         Field label.
		 * @param mixed  $value         Field value.
		 * @param int    $min           Minimum value.
		 * @param int    $max           Maximum value.
		 * @param int    $step          Step value.
		 * @param string $unit          Display unit.
		 * @param string $description   Field description.
		 * @param string $extended_help Optional extended inline help.
		 * @return void
		 */
		private function render_range_field( $name, $label, $value, $min, $max, $step, $unit, $description, $extended_help = '' ) {
			$value = (int) $value;
			?>
			<div class="acls-field-row">
				<div class="acls-field-label">
					<label for="<?php echo esc_attr( $name ); ?>"><?php echo esc_html( $label ); ?></label>
				</div>
				<div class="acls-field-control">
					<div class="acls-range-wrap">
						<input id="<?php echo esc_attr( $name ); ?>" class="acls-range" type="range" name="<?php echo esc_attr( $name ); ?>" min="<?php echo esc_attr( $min ); ?>" max="<?php echo esc_attr( $max ); ?>" step="<?php echo esc_attr( $step ); ?>" value="<?php echo esc_attr( $value ); ?>" data-unit="<?php echo esc_attr( $unit ); ?>" />
						<span class="acls-range-value"><?php echo esc_html( $value . $unit ); ?></span>
					</div>
					<p class="description"><?php echo esc_html( $description ); ?></p>
					<?php if ( ! empty( $extended_help ) ) : ?>
						<div class="acls-inline-help">
							<span class="acls-inline-help-icon" aria-hidden="true">&#128161;</span>
							<p><?php echo esc_html( $extended_help ); ?></p>
						</div>
					<?php endif; ?>
				</div>
			</div>
			<?php
		}

		/**
		 * Render a number field.
		 *
		 * @since 1.0.0
		 *
		 * @param string $name          Field name.
		 * @param string $label         Field label.
		 * @param mixed  $value         Field value.
		 * @param int    $min           Minimum value.
		 * @param int    $max           Maximum value.
		 * @param string $description   Field description.
		 * @param string $extended_help Optional extended inline help.
		 * @return void
		 */
		private function render_number_field( $name, $label, $value, $min, $max, $description, $extended_help = '' ) {
			?>
			<div class="acls-field-row">
				<div class="acls-field-label">
					<label for="<?php echo esc_attr( $name ); ?>"><?php echo esc_html( $label ); ?></label>
				</div>
				<div class="acls-field-control">
					<input id="<?php echo esc_attr( $name ); ?>" class="small-text" type="number" name="<?php echo esc_attr( $name ); ?>" min="<?php echo esc_attr( $min ); ?>" max="<?php echo esc_attr( $max ); ?>" value="<?php echo esc_attr( (int) $value ); ?>" />
					<p class="description"><?php echo esc_html( $description ); ?></p>
					<?php if ( ! empty( $extended_help ) ) : ?>
						<div class="acls-inline-help">
							<span class="acls-inline-help-icon" aria-hidden="true">&#128161;</span>
							<p><?php echo esc_html( $extended_help ); ?></p>
						</div>
					<?php endif; ?>
				</div>
			</div>
			<?php
		}

		/**
		 * Render a textarea field with optional inline examples.
		 *
		 * @since 1.0.0
		 *
		 * @param string $name          Field name.
		 * @param string $label         Field label.
		 * @param string $value         Field value.
		 * @param string $description   Field description.
		 * @param string $extended_help Optional extended inline help.
		 * @param array  $examples      Optional example items.
		 * @return void
		 */
		private function render_textarea_field( $name, $label, $value, $description, $extended_help = '', $examples = array() ) {
			?>
			<div class="acls-field-row acls-field-row--full">
				<div class="acls-field-label">
					<label for="<?php echo esc_attr( $name ); ?>"><?php echo esc_html( $label ); ?></label>
				</div>
				<div class="acls-field-control">
					<textarea id="<?php echo esc_attr( $name ); ?>" class="large-text" name="<?php echo esc_attr( $name ); ?>" rows="6"><?php echo esc_textarea( $value ); ?></textarea>
					<p class="description"><?php echo esc_html( $description ); ?></p>
					<?php if ( ! empty( $extended_help ) ) : ?>
						<div class="acls-inline-help">
							<span class="acls-inline-help-icon" aria-hidden="true">&#128161;</span>
							<p><?php echo esc_html( $extended_help ); ?></p>
						</div>
					<?php endif; ?>
					<?php if ( ! empty( $examples ) ) : ?>
						<div class="acls-examples-box">
							<span class="acls-examples-title"><?php echo esc_html__( 'Common reference patterns:', 'aerospin-css-loading-spinners' ); ?></span>
							<div class="acls-examples-chips">
								<?php foreach ( $examples as $example ) : ?>
									<code class="acls-code-chip"><?php echo esc_html( $example ); ?></code>
								<?php endforeach; ?>
							</div>
						</div>
					<?php endif; ?>
				</div>
			</div>
			<?php
		}

		/*
		|--------------------------------------------------------------------------
		| SECTION 5: Data Helpers
		|--------------------------------------------------------------------------
		*/

		/**
		 * Retrieve normalized plugin settings.
		 *
		 * @since 1.0.0
		 *
		 * @return array
		 */
		private function get_settings() {
			if ( function_exists( 'aerospin_css_loading_spinners_get_settings' ) ) {
				$settings = aerospin_css_loading_spinners_get_settings();
				return is_array( $settings ) ? $settings : array();
			} elseif ( function_exists( 'Pure_CSS_Spinners_get_settings' ) ) {
				$settings = Pure_CSS_Spinners_get_settings();
				return is_array( $settings ) ? $settings : array();
			} elseif ( function_exists( 'cp_spinners_get_settings' ) ) {
				$settings = cp_spinners_get_settings();
				return is_array( $settings ) ? $settings : array();
			}

			return array();
		}

		/**
		 * Retrieve registered spinners.
		 *
		 * @since 1.0.0
		 *
		 * @return array
		 */
		private function get_spinners() {
			if ( function_exists( 'aerospin_css_loading_spinners_get_spinners' ) ) {
				$spinners = aerospin_css_loading_spinners_get_spinners();
				return is_array( $spinners ) ? $spinners : array();
			} elseif ( function_exists( 'Pure_CSS_Spinners_get_spinners' ) ) {
				$spinners = Pure_CSS_Spinners_get_spinners();
				return is_array( $spinners ) ? $spinners : array();
			} elseif ( function_exists( 'cp_spinners_get_spinners' ) ) {
				$spinners = cp_spinners_get_spinners();
				return is_array( $spinners ) ? $spinners : array();
			}

			return array();
		}

		/**
		 * Retrieve sorted spinner categories.
		 *
		 * @since 1.0.0
		 *
		 * @param array $spinners Spinner definitions.
		 * @return array
		 */
		private function get_categories( $spinners ) {
			if ( function_exists( 'aerospin_css_loading_spinners_get_categories' ) ) {
				$categories = aerospin_css_loading_spinners_get_categories();
				if ( is_array( $categories ) && ! empty( $categories ) ) {
					return $categories;
				}
			} elseif ( function_exists( 'Pure_CSS_Spinners_get_categories' ) ) {
				$categories = Pure_CSS_Spinners_get_categories();
				if ( is_array( $categories ) && ! empty( $categories ) ) {
					return $categories;
				}
			} elseif ( function_exists( 'cp_spinners_get_categories' ) ) {
				$categories = cp_spinners_get_categories();
				if ( is_array( $categories ) && ! empty( $categories ) ) {
					return $categories;
				}
			}

			$categories = array();

			foreach ( $spinners as $spinner ) {
				if ( empty( $spinner['category'] ) || in_array( $spinner['category'], $categories, true ) ) {
					continue;
				}

				$categories[] = $spinner['category'];
			}

			sort( $categories, SORT_NATURAL | SORT_FLAG_CASE );

			return $categories;
		}

		/**
		 * Build the sanitized spinner map consumed by the external admin script.
		 *
		 * @since 1.1.4
		 *
		 * @param array $spinners Spinner definitions.
		 * @return array
		 */
		private function get_script_spinners_map( $spinners ) {
			$map = array();

			foreach ( $spinners as $key => $spinner ) {
				$key = sanitize_key( $key );

				if ( '' === $key ) {
					continue;
				}

				$map[ $key ] = array(
					'label'       => isset( $spinner['label'] ) ? wp_strip_all_tags( $spinner['label'] ) : $key,
					'description' => isset( $spinner['description'] ) ? wp_strip_all_tags( $spinner['description'] ) : '',
					'category'    => isset( $spinner['category'] ) ? wp_strip_all_tags( $spinner['category'] ) : '',
					'html'        => $this->get_spinner_html( $spinner ),
				);
			}

			return $map;
		}

		/**
		 * Return sanitized spinner HTML.
		 *
		 * @since 1.0.0
		 *
		 * @param array $spinner Spinner definition.
		 * @return string
		 */
		private function get_spinner_html( $spinner ) {
			$html = isset( $spinner['html'] ) ? $spinner['html'] : '';

			if ( function_exists( 'aerospin_css_loading_spinners_kses_spinner_html' ) ) {
				return aerospin_css_loading_spinners_kses_spinner_html( $html );
			} elseif ( function_exists( 'Pure_CSS_Spinners_kses_spinner_html' ) ) {
				return Pure_CSS_Spinners_kses_spinner_html( $html );
			} elseif ( function_exists( 'cp_spinners_kses_spinner_html' ) ) {
				return cp_spinners_kses_spinner_html( $html );
			}

			return wp_kses_post( $html );
		}

		/**
		 * Get the required capability.
		 *
		 * @since 1.0.0
		 *
		 * @return string
		 */
		private function get_required_capability() {
			$capability = 'manage_options';
			if ( defined( 'AEROSPIN_CSS_LOADING_SPINNERS_REQUIRED_CAPABILITY' ) ) {
				$capability = AEROSPIN_CSS_LOADING_SPINNERS_REQUIRED_CAPABILITY;
			} elseif ( defined( 'PURE_CSS_SPINNERS_REQUIRED_CAPABILITY' ) ) {
				$capability = PURE_CSS_SPINNERS_REQUIRED_CAPABILITY;
			}

			/**
			 * Filter the capability required to access AeroSpin CSS Loading Spinners admin settings.
			 *
			 * @since 1.1.6
			 *
			 * @param string $capability Required capability. Default 'manage_options'.
			 */
			return apply_filters( 'aerospin_css_loading_spinners_required_capability', $capability );
		}

		/**
		 * Get the settings page slug.
		 *
		 * @since 1.0.0
		 *
		 * @return string
		 */
		private function get_page_slug() {
			$page_slug = defined( 'ACLS_SETTINGS_PAGE_SLUG' ) ? ACLS_SETTINGS_PAGE_SLUG : 'aerospin-css-loading-spinners';
			$page_slug = sanitize_key( $page_slug );

			return '' !== $page_slug ? $page_slug : 'aerospin-css-loading-spinners';
		}

		/**
		 * Get the plugin version.
		 *
		 * @since 1.0.0
		 *
		 * @return string
		 */
		private function get_plugin_version() {
			if ( defined( 'AEROSPIN_CSS_LOADING_SPINNERS_VERSION' ) ) {
				return AEROSPIN_CSS_LOADING_SPINNERS_VERSION;
			}
			return '1.1.6';
		}

		/**
		 * Build a plugin asset URL.
		 *
		 * @since 1.0.0
		 *
		 * @param string $relative_path Relative asset path.
		 * @return string
		 */
		private function get_plugin_url( $relative_path ) {
			$relative_path = ltrim( (string) $relative_path, '/\\' );
			if ( defined( 'ACLS_PLUGIN_URL' ) ) {
				$plugin_url = ACLS_PLUGIN_URL;
			} elseif ( defined( 'AEROSPIN_CSS_LOADING_SPINNERS_PLUGIN_URL' ) ) {
				$plugin_url = AEROSPIN_CSS_LOADING_SPINNERS_PLUGIN_URL;
			} else {
				$plugin_url = plugin_dir_url( dirname( __DIR__ ) );
			}

			return $plugin_url . $relative_path;
		}

		/**
		 * Get the brand website URL.
		 *
		 * @since 1.1.6
		 *
		 * @return string
		 */
		private function get_brand_url() {
			if ( defined( 'ACLS_BRAND_URL' ) ) {
				return ACLS_BRAND_URL;
			} elseif ( defined( 'AEROSPIN_CSS_LOADING_SPINNERS_BRAND_URL' ) ) {
				return AEROSPIN_CSS_LOADING_SPINNERS_BRAND_URL;
			}

			return defined( 'AEROSPIN_CSS_LOADING_SPINNERS_SUPPORT_URL' ) ? AEROSPIN_CSS_LOADING_SPINNERS_SUPPORT_URL : 'https://wpclearpath.com';
		}

		/**
		 * Get the support URL (backward compatibility).
		 *
		 * @since 1.0.0
		 *
		 * @return string
		 */
		private function get_support_url() {
			return $this->get_brand_url();
		}
	}
}

if ( ! class_exists( 'AeroSpin_CSS_Loading_Spinners_Admin' ) ) {
	class_alias( 'ACLS_Admin', 'AeroSpin_CSS_Loading_Spinners_Admin' );
}
if ( ! class_exists( 'Pure_CSS_Spinners_Admin' ) ) {
	class_alias( 'ACLS_Admin', 'Pure_CSS_Spinners_Admin' );
}
if ( ! class_exists( 'AreoSpin_Css_Loading_Spinners_Admin' ) ) {
	class_alias( 'ACLS_Admin', 'AreoSpin_Css_Loading_Spinners_Admin' );
}

/*
|--------------------------------------------------------------------------
| SECTION 6: Initialize Admin Controller
|--------------------------------------------------------------------------
*/

// Initialize the admin controller so WordPress can register the settings page and admin bar.
ACLS_Admin::get_instance();