<?php

namespace USTT;

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

/**
 * The admin-specific functionality of the plugin.
 */
class Admin
{

    /**
     * The ID of this plugin.
     *
     * @var      string    $plugin_name    The ID of this plugin.
     */
    private $plugin_name;

    /**
     * The version of this plugin.
     *
     * @var      string    $version    The current version of this plugin.
     */
    private $version;

    /**
     * Initialize the class and set its properties.
     *
     * @param      string    $plugin_name       The name of this plugin.
     * @param      string    $version    The version of this plugin.
     */
    public function __construct($plugin_name, $version)
    {

        $this->plugin_name = $plugin_name;
        $this->version = $version;

    }

    /**
     * Register the stylesheets for the admin area.
     */
    public function enqueue_styles()
    {

        // Only load on our settings page and sub-pages
        $screen = get_current_screen();
        if (!$screen || strpos($screen->id, 'ustt-') === false) {
            return;
        }

        wp_enqueue_style($this->plugin_name, USTT_URL . 'plugin-assets/admin/css/ustt-admin.css', array(), $this->version . time(), 'all');
        wp_enqueue_style('ustt-templates', USTT_URL . 'plugin-assets/public/css/ustt-templates.css', array(), $this->version . time(), 'all');
        wp_enqueue_style('ustt-read-time', USTT_URL . 'plugin-assets/public/css/ustt-read-time.css', array(), $this->version . time(), 'all');
        wp_enqueue_style('wp-color-picker');

    }

    /**
     * Register the JavaScript for the admin area.
     */
    public function enqueue_scripts()
    {

        // Only load on our settings page and sub-pages
        $screen = get_current_screen();
        if (!$screen || strpos($screen->id, 'ustt-') === false) {
            return;
        }

        wp_enqueue_script($this->plugin_name, USTT_URL . 'plugin-assets/admin/js/ustt-admin.js', array('jquery', 'wp-color-picker'), $this->version . time(), true);

        // Define Templates HTML Data with Base Sizes
        // Base sizes are derived from ustt-templates.css (e.g. width/height)
        $templates_config = array(
            'ustt-btn-1' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-1 ustt-template-inner"></button></div>', 'baseSize' => 60),
            'ustt-btn-2' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-2 ustt-template-inner"></button></div>', 'baseSize' => 65),
            'ustt-btn-3' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-3 ustt-template-inner"><div class="ustt-btn-3-glow"></div></button></div>', 'baseSize' => 70),
            'ustt-btn-4' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-4 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-5' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-5 ustt-template-inner"></button></div>', 'baseSize' => 80),
            'ustt-btn-6' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-6 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-7' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-7 ustt-template-inner"></button></div>', 'baseSize' => 75),
            'ustt-btn-8' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-8 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-9' =>  array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-9-container ustt-template-inner"><div class="ustt-btn-9"><div class="ustt-btn-9-face ustt-btn-9-front">↑</div><div class="ustt-btn-9-face ustt-btn-9-back">⬆</div></div></div></div>', 'baseSize' => 70),
            'ustt-btn-10' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-10 ustt-template-inner">↑</button></div>', 'baseSize' => 65),
            'ustt-btn-11' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-11 ustt-template-inner"></button></div>', 'baseSize' => 75),
            'ustt-btn-12' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-12 ustt-template-inner"><span class="ustt-btn-12-arrow">↑</span></button></div>', 'baseSize' => 70),
            'ustt-btn-13' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-13 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-14' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-14 ustt-template-inner"></button></div>', 'baseSize' => 75),
            'ustt-btn-15' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-15 ustt-template-inner"></button></div>', 'baseSize' => 60),
            'ustt-btn-16' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-16 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-17' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-17 ustt-template-inner"></button></div>', 'baseSize' => 75),
            'ustt-btn-18' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-18 ustt-template-inner"><span class="ustt-btn-18-arrow">↑</span></button></div>', 'baseSize' => 75),
            // New Black & White Collection (19-38)
            'ustt-btn-19' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-19 ustt-template-inner"></button></div>', 'baseSize' => 65),
            'ustt-btn-20' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-20 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-21' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-21 ustt-template-inner"></button></div>', 'baseSize' => 68),
            'ustt-btn-22' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-22 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-23' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-23 ustt-template-inner"></button></div>', 'baseSize' => 65),
            'ustt-btn-24' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-24 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-25' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-25 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-26' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-26 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-27' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-27 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-28' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-28 ustt-template-inner"></button></div>', 'baseSize' => 65),
            'ustt-btn-29' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-29 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-30' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-30 ustt-template-inner"></button></div>', 'baseSize' => 68),
            'ustt-btn-31' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-31 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-32' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-32 ustt-template-inner"><div class="ustt-btn-32-arrow2"></div></button></div>', 'baseSize' => 70),
            'ustt-btn-33' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-33 ustt-template-inner"><span class="ustt-btn-33-arrow">↑</span></button></div>', 'baseSize' => 68),
            'ustt-btn-34' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-34 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-35' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-35 ustt-template-inner"><span class="ustt-btn-35-arrow">↑</span></button></div>', 'baseSize' => 70),
            'ustt-btn-36' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-36 ustt-template-inner"></button></div>', 'baseSize' => 68),
            'ustt-btn-37' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-37 ustt-template-inner"></button></div>', 'baseSize' => 70),
            'ustt-btn-38' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-38 ustt-template-inner"></button></div>', 'baseSize' => 65),

            // Scroll Progress Collection (39-70)
            // Set 1: Black & White
            'ustt-btn-39' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-39-wrapper"><svg class="ustt-btn-39-progress" viewBox="0 0 80 80"><circle class="ustt-btn-39-circle" cx="40" cy="40" r="38"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="40" cy="40" r="38"></circle></svg><button class="ustt-btn-39 ustt-template-inner"></button></div></div>', 'baseSize' => 80),
            'ustt-btn-40' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-40-wrapper"><div class="ustt-btn-40-bar"><div class="ustt-btn-40-fill ustt-progress-indicator" data-type="width"></div></div><button class="ustt-btn-40 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
            'ustt-btn-41' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-41-wrapper"><button class="ustt-btn-41 ustt-template-inner"><div class="ustt-btn-41-fill ustt-progress-indicator" data-type="height"></div></button></div></div>', 'baseSize' => 75),
            'ustt-btn-42' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-42-wrapper"><svg class="ustt-btn-42-progress" viewBox="0 0 85 85"><rect class="ustt-btn-42-bg" x="2" y="2" width="81" height="81" rx="2"></rect><rect class="ustt-progress-indicator" data-type="stroke" x="2" y="2" width="81" height="81" rx="2"></rect></svg><button class="ustt-btn-42 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-43' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-43-wrapper"><div class="ustt-btn-43-bar"><div class="ustt-btn-43-fill ustt-progress-indicator" data-type="height"></div></div><button class="ustt-btn-43 ustt-template-inner"></button></div></div>', 'baseSize' => 88),
            'ustt-btn-44' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-44-wrapper"><svg class="ustt-btn-44-outer" viewBox="0 0 85 85"><circle class="ustt-btn-44-bg" cx="42.5" cy="42.5" r="40.5"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="42.5" cy="42.5" r="40.5"></circle></svg><svg class="ustt-btn-44-inner" viewBox="0 0 65 65"><circle class="ustt-btn-44-bg" cx="32.5" cy="32.5" r="30.5"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="32.5" cy="32.5" r="30.5"></circle></svg><button class="ustt-btn-44 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-45' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-45-wrapper"><div class="ustt-btn-45-lines ustt-progress-container" data-type="steps"><div class="ustt-btn-45-line"></div><div class="ustt-btn-45-line"></div><div class="ustt-btn-45-line"></div><div class="ustt-btn-45-line"></div></div><button class="ustt-btn-45 ustt-template-inner"></button></div></div>', 'baseSize' => 90),
            'ustt-btn-46' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-46-wrapper"><div class="ustt-btn-46-corners ustt-progress-container" data-type="steps"><div class="ustt-btn-46-corner ustt-btn-46-corner-tl"></div><div class="ustt-btn-46-corner ustt-btn-46-corner-tr"></div><div class="ustt-btn-46-corner ustt-btn-46-corner-bl"></div><div class="ustt-btn-46-corner ustt-btn-46-corner-br"></div></div><button class="ustt-btn-46 ustt-template-inner"></button></div></div>', 'baseSize' => 90),
            'ustt-btn-47' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-47-wrapper"><div class="ustt-btn-47-text ustt-progress-indicator" data-type="text">0%</div><button class="ustt-btn-47 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
            'ustt-btn-48' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-48-wrapper"><div class="ustt-btn-48-dots ustt-progress-container" data-type="steps-dots" data-dots="16" data-radius="40"></div><button class="ustt-btn-48 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-49' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-49-wrapper"><svg class="ustt-btn-49-progress" viewBox="0 0 85 85"><circle class="ustt-btn-49-bg" cx="42.5" cy="42.5" r="40"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="42.5" cy="42.5" r="40"></circle></svg><button class="ustt-btn-49 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-50' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-50-wrapper"><div class="ustt-btn-50-container"><div class="ustt-btn-50-bar"><div class="ustt-btn-50-fill ustt-progress-indicator" data-type="width"></div></div><div class="ustt-btn-50-text ustt-progress-indicator" data-type="text">0%</div></div><button class="ustt-btn-50 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
            
            // Set 2: Off-White
            'ustt-btn-51' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-51-wrapper"><svg class="ustt-btn-51-progress" viewBox="0 0 80 80"><circle class="ustt-btn-51-bg" cx="40" cy="40" r="38"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="40" cy="40" r="38"></circle></svg><button class="ustt-btn-51 ustt-template-inner"></button></div></div>', 'baseSize' => 80),
            'ustt-btn-52' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-52-wrapper"><div class="ustt-btn-52-bar"><div class="ustt-btn-52-fill ustt-progress-indicator" data-type="width"></div></div><button class="ustt-btn-52 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
            'ustt-btn-53' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-53-wrapper"><button class="ustt-btn-53 ustt-template-inner"><div class="ustt-btn-53-fill ustt-progress-indicator" data-type="height"></div></button></div></div>', 'baseSize' => 75),
            'ustt-btn-54' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-54-wrapper"><svg class="ustt-btn-54-progress" viewBox="0 0 85 85"><rect class="ustt-btn-54-bg" x="2" y="2" width="81" height="81" rx="4"></rect><rect class="ustt-progress-indicator" data-type="stroke" x="2" y="2" width="81" height="81" rx="4"></rect></svg><button class="ustt-btn-54 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-55' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-55-wrapper"><div class="ustt-btn-55-bar"><div class="ustt-btn-55-fill ustt-progress-indicator" data-type="height"></div></div><button class="ustt-btn-55 ustt-template-inner"></button></div></div>', 'baseSize' => 88),
            'ustt-btn-56' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-56-wrapper"><svg class="ustt-btn-56-outer" viewBox="0 0 88 88"><circle class="ustt-btn-56-bg" cx="44" cy="44" r="42"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="44" cy="44" r="42"></circle></svg><svg class="ustt-btn-56-inner" viewBox="0 0 68 68"><circle class="ustt-btn-56-bg" cx="34" cy="34" r="32"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="34" cy="34" r="32"></circle></svg><button class="ustt-btn-56 ustt-template-inner"></button></div></div>', 'baseSize' => 88),
            'ustt-btn-57' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-57-wrapper"><div class="ustt-btn-57-lines ustt-progress-container" data-type="steps"><div class="ustt-btn-57-line"></div><div class="ustt-btn-57-line"></div><div class="ustt-btn-57-line"></div><div class="ustt-btn-57-line"></div></div><button class="ustt-btn-57 ustt-template-inner"></button></div></div>', 'baseSize' => 90),
            'ustt-btn-58' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-58-wrapper"><div class="ustt-btn-58-corners ustt-progress-container" data-type="steps"><div class="ustt-btn-58-corner ustt-btn-58-corner-tl"></div><div class="ustt-btn-58-corner ustt-btn-58-corner-tr"></div><div class="ustt-btn-58-corner ustt-btn-58-corner-bl"></div><div class="ustt-btn-58-corner ustt-btn-58-corner-br"></div></div><button class="ustt-btn-58 ustt-template-inner"></button></div></div>', 'baseSize' => 90),
            'ustt-btn-59' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-59-wrapper"><div class="ustt-btn-59-text ustt-progress-indicator" data-type="text">0%</div><button class="ustt-btn-59 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
            'ustt-btn-60' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-60-wrapper"><div class="ustt-btn-60-dots ustt-progress-container" data-type="steps-dots" data-dots="16" data-radius="40"></div><button class="ustt-btn-60 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-61' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-61-wrapper"><svg class="ustt-btn-61-progress" viewBox="0 0 85 85"><circle class="ustt-btn-61-bg" cx="42.5" cy="42.5" r="40.5"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="42.5" cy="42.5" r="40.5"></circle></svg><button class="ustt-btn-61 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-62' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-62-wrapper"><div class="ustt-btn-62-container"><div class="ustt-btn-62-bar"><div class="ustt-btn-62-fill ustt-progress-indicator" data-type="width"></div></div><div class="ustt-btn-62-text ustt-progress-indicator" data-type="text">0%</div></div><button class="ustt-btn-62 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
            'ustt-btn-63' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-63-wrapper"><svg class="ustt-btn-63-progress" viewBox="0 0 85 85"><polygon class="ustt-btn-63-bg" points="42.5,8 72.5,25.5 72.5,60.5 42.5,78 12.5,60.5 12.5,25.5"></polygon><polygon class="ustt-progress-indicator" data-type="stroke" points="42.5,8 72.5,25.5 72.5,60.5 42.5,78 12.5,60.5 12.5,25.5"></polygon></svg><button class="ustt-btn-63 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-64' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-64-wrapper"><div class="ustt-btn-64-bar"><div class="ustt-btn-64-fill ustt-progress-indicator" data-type="width"></div></div><button class="ustt-btn-64 ustt-template-inner"></button></div></div>', 'baseSize' => 95),
            'ustt-btn-65' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-65-wrapper"><svg class="ustt-btn-65-progress" viewBox="0 0 85 85"><polygon class="ustt-btn-65-bg" points="42.5,10 75,70 10,70"></polygon><polygon class="ustt-progress-indicator" data-type="stroke" points="42.5,10 75,70 10,70"></polygon></svg><button class="ustt-btn-65 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-66' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-66-wrapper"><svg class="ustt-btn-66-progress" viewBox="0 0 85 85"><polygon class="ustt-btn-66-bg" points="42.5,8 77,32 65,72 20,72 8,32"></polygon><polygon class="ustt-progress-indicator" data-type="stroke" points="42.5,8 77,32 65,72 20,72 8,32"></polygon></svg><button class="ustt-btn-66 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-67' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-67-wrapper"><svg class="ustt-btn-67-progress" viewBox="0 0 85 85"><polygon class="ustt-btn-67-bg" points="30,8 55,8 77,30 77,55 55,77 30,77 8,55 8,30"></polygon><polygon class="ustt-progress-indicator" data-type="stroke" points="30,8 55,8 77,30 77,55 55,77 30,77 8,55 8,30"></polygon></svg><button class="ustt-btn-67 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-68' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-68-wrapper"><svg class="ustt-btn-68-progress" viewBox="0 0 85 85"><rect class="ustt-btn-68-bg" x="18" y="18" width="49" height="49" transform="rotate(45 42.5 42.5)"></rect><rect class="ustt-progress-indicator" data-type="stroke" x="18" y="18" width="49" height="49" transform="rotate(45 42.5 42.5)"></rect></svg><button class="ustt-btn-68 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
            'ustt-btn-69' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-69-wrapper"><div class="ustt-btn-69-bar"><div class="ustt-btn-69-fill ustt-progress-indicator" data-type="width"></div></div><button class="ustt-btn-69 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
            'ustt-btn-70' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-70-wrapper"><svg class="ustt-btn-70-progress" viewBox="0 0 88 88"><circle class="ustt-btn-70-bg" cx="44" cy="44" r="42"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="44" cy="44" r="42"></circle></svg><button class="ustt-btn-70 ustt-template-inner"></button></div></div>', 'baseSize' => 88),
        );

        // Get Read Time Templates
        $rt_templates = $this->get_read_time_templates();

        // Check Pro Status for JS
        $is_pro = function_exists(__NAMESPACE__ . '\\usttapb_fs') && usttapb_fs()->can_use_premium_code();
        $upgrade_url = (function_exists(__NAMESPACE__ . '\\usttapb_fs')) ? usttapb_fs()->get_upgrade_url() : '#';

        wp_localize_script($this->plugin_name, 'usttObj', array(
            'nonce' => wp_create_nonce('ustt_admin_nonce'),
            'ajax_url' => admin_url('admin-ajax.php'),
            'is_pro' => $is_pro,
            'upgrade_url' => $upgrade_url,
            'templates' => $templates_config,
            'rt_templates' => $rt_templates,
            'strings' => array(
                'saving' => __('Saving...', 'uply-scroll-to-top-and-progress-bar'),
                'saved' => __('Settings Saved!', 'uply-scroll-to-top-and-progress-bar'),
                'error' => __('Error saving settings.', 'uply-scroll-to-top-and-progress-bar'),
            ),
            'active_tab' => $this->get_active_tab_from_page(),
        ));

    }

    public function add_plugin_admin_menu()
    {
        add_menu_page(
            __('Uply Settings', 'uply-scroll-to-top-and-progress-bar'),
            __('Uply', 'uply-scroll-to-top-and-progress-bar'),
            'manage_options',
            'ustt-settings',
            array($this, 'display_plugin_admin_page'),
            'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjMjI3MUIxIj48cGF0aCBkPSJNMTcgMy4zNGExMCAxMCAwIDEgMSAtMTQuOTk1IDguOTg0bC0uMDA1IC0uMzI0bC4wMDUgLS4zMjRhMTAgMTAgMCAwIDEgMTQuOTk1IC04LjMzNnptLTQuOTggMy42NmwtLjE2MyAuMDFsLS4wODYgLjAxNmwtLjE0MiAuMDQ1bC0uMTEzIC4wNTRsLS4wNyAuMDQzbC0uMDk1IC4wNzFsLS4wNTggLjA1NGwtNCA0bC0uMDgzIC4wOTRhMSAxIDAgMCAwIDEuNDk3IDEuMzJsMi4yOTMgLTIuMjkzdjUuNTg2bC4wMDcgLjExN2ExIDEgMCAwIDAgMS45OTMgLS4xMTd2LTUuNTg1bDIuMjkzIDIuMjkybC4wOTQgLjA4M2ExIDEgMCAwIDAgMS4zMiAtMS40OTdsLTQgLTRsLS4wODIgLS4wNzNsLS4wODkgLS4wNjRsLS4xMTMgLS4wNjJsLS4wODEgLS4wMzRsLS4xMTMgLS4wMzRsLS4xMTIgLS4wMmwtLjA5OCAtLjAwNnoiIC8+PC9zdmc+',
            100
        );

        // Sub-menus for direct access
        add_submenu_page(
            'ustt-settings',
            __('Overview', 'uply-scroll-to-top-and-progress-bar'),
            __('Overview', 'uply-scroll-to-top-and-progress-bar'),
            'manage_options',
            'ustt-settings',
            array($this, 'display_plugin_admin_page')
        );

        add_submenu_page(
            'ustt-settings',
            __('Scroll to Top', 'uply-scroll-to-top-and-progress-bar'),
            __('Scroll to Top', 'uply-scroll-to-top-and-progress-bar'),
            'manage_options',
            'ustt-stt',
            array($this, 'display_plugin_admin_page')
        );

        add_submenu_page(
            'ustt-settings',
            __('Progress Bar', 'uply-scroll-to-top-and-progress-bar'),
            __('Progress Bar', 'uply-scroll-to-top-and-progress-bar'),
            'manage_options',
            'ustt-pb',
            array($this, 'display_plugin_admin_page')
        );

        add_action('admin_enqueue_scripts', array($this, 'enqueue_styles'));
        add_action('admin_enqueue_scripts', array($this, 'enqueue_scripts'));
        
        // Add settings link to plugin list
        add_filter('plugin_action_links_' . plugin_basename(dirname(__DIR__) . '/uply-scroll-to-top-and-progress-bar.php'), array($this, 'add_action_links'));

        // Activation Redirect
        add_action('admin_init', array($this, 'activation_redirect'));
        add_submenu_page(
            'ustt-settings',
            __('Read Time', 'uply-scroll-to-top-and-progress-bar'),
            __('Read Time', 'uply-scroll-to-top-and-progress-bar'),
            'manage_options',
            'ustt-rt',
            array($this, 'display_plugin_admin_page')
        );
    }

    /**
     * AJAX handler to save settings.
     */
    public function save_settings()
    {
        // 1. Check Nonce
        if (!isset($_POST['nonce']) || !wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['nonce'])), 'ustt_admin_nonce')) {
            wp_send_json_error(array('message' => __('Security check failed. Please refresh the page.', 'uply-scroll-to-top-and-progress-bar')));
        }

        // 2. Check Permissions
        if (!current_user_can('manage_options')) {
            wp_send_json_error(array('message' => __('Permission denied.', 'uply-scroll-to-top-and-progress-bar')));
        }

        // 3. Clean Input
        // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized -- Sanitization is handled in the loop below.
        $options = isset($_POST['options']) ? wp_unslash($_POST['options']) : array();

        // 4. Sanitize and Save
        $ustt_options = get_option('ustt_options', array());

        foreach ($options as $key => $value) {
            
            // Allow listing of specific keys that are arrays
            if (is_array($value)) {
                // Sanitize array values (like selected post types or IDs)
                $ustt_options[sanitize_text_field($key)] = array_map('sanitize_text_field', $value);
            } else {
                $ustt_options[sanitize_text_field($key)] = sanitize_text_field($value);
            }
        }

        // Handle unchecked checkboxes (if not present in POST, set to 0/empty)
        // We defined specific boolean keys we expect
        $booleans = array('stt_enable', 'stt_mobile', 'pb_enable', 'rt_enable', 'stt_custom_bg_enable', 'stt_custom_border_enable');
        foreach ($booleans as $bool_key) {
            if (!isset($options[$bool_key])) {
                $ustt_options[$bool_key] = '0';
            }
        }

        update_option('ustt_options', $ustt_options);

        wp_send_json_success(array('message' => __('Settings saved successfully.', 'uply-scroll-to-top-and-progress-bar')));
    }

    public function display_plugin_admin_page()
    {
        // Check permissions again for page view
        if (!current_user_can('manage_options')) {
            return;
        }

        $options = get_option('ustt_options', array());
        
        // Define is_pro for use in templates
        $is_pro = function_exists(__NAMESPACE__ . '\\usttapb_fs') && usttapb_fs()->can_use_premium_code();

        // Get public post types
        $post_types = get_post_types(array('public' => true), 'objects');

        // Helper to retrieve option safely
        $get_opt = function ($key, $default) use ($options) {
            return isset($options[$key]) ? $options[$key] : $default;
        };

        // Defaults
        $stt_enable = $get_opt('stt_enable', '0');
        $stt_position = $get_opt('stt_position', 'right');
        $stt_mobile = $get_opt('stt_mobile', '1');
        $stt_post_types = $get_opt('stt_post_types', array('post', 'page'));
        $stt_exclude_ids = $get_opt('stt_exclude_ids', '');

        $pb_enable = $get_opt('pb_enable', '0');
        $pb_position = $get_opt('pb_position', 'top');
        $pb_color = $get_opt('pb_color', '#137fec');
        $pb_height = $get_opt('pb_height', '5');
        $pb_post_types = $get_opt('pb_post_types', array('post', 'page'));
        $pb_exclude_ids = $get_opt('pb_exclude_ids', '');

        $rt_enable = $get_opt('rt_enable', '0');
        $rt_wpm = $get_opt('rt_wpm', '200');
        $rt_prefix = $get_opt('rt_prefix', 'Reading Time:');
        $rt_postfix = $get_opt('rt_postfix', 'mins');
        $rt_post_types = $get_opt('rt_post_types', array('post'));
        $rt_exclude_ids = $get_opt('rt_exclude_ids', '');
        
        $rt_template = $get_opt('rt_template', 'ustt-rt-1');
        $rt_position = $get_opt('rt_position', 'before_content');
        $rt_font_size = $get_opt('rt_font_size', '16');
        $rt_margin = $get_opt('rt_margin', '10');
        $rt_padding = $get_opt('rt_padding', '5');
        $rt_text_color = $get_opt('rt_text_color', '');
        $rt_bg_color = $get_opt('rt_bg_color', '');

        // If IDs are stored as array, convert to string for display
        if (is_array($stt_exclude_ids)) $stt_exclude_ids = implode(', ', $stt_exclude_ids);
        if (is_array($pb_exclude_ids)) $pb_exclude_ids = implode(', ', $pb_exclude_ids);
        if (is_array($rt_exclude_ids)) $rt_exclude_ids = implode(', ', $rt_exclude_ids);

        // Get Read Time Templates (Reused)
        $rt_templates = $this->get_read_time_templates();

        ?>
        <div class="ustt-wrap dark">
            <!-- Top Navigation -->
            <header class="ustt-header">
                <div class="ustt-header-inner">
                    <div class="ustt-brand">
                        <div class="ustt-logo" style="background: transparent; box-shadow: none; padding: 0;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-4.98 3.66l-.163 .01l-.086 .016l-.142 .045l-.113 .054l-.07 .043l-.095 .071l-.058 .054l-4 4l-.083 .094a1 1 0 0 0 1.497 1.32l2.293 -2.293v5.586l.007 .117a1 1 0 0 0 1.993 -.117v-5.585l2.293 2.292l.094 .083a1 1 0 0 0 1.32 -1.497l-4 -4l-.082 -.073l-.089 -.064l-.113 -.062l-.081 -.034l-.113 -.034l-.112 -.02l-.098 -.006z" />
                            </svg>
                        </div>
                        <h2><?php esc_html_e('Uply', 'uply-scroll-to-top-and-progress-bar'); ?></h2>
                    </div>
                    <nav class="ustt-nav">
                        <a href="#" class="ustt-nav-link active" data-tab="overview"><?php esc_html_e('Overview', 'uply-scroll-to-top-and-progress-bar'); ?></a>
                        <a href="#" class="ustt-nav-link" data-tab="scroll-to-top"><?php esc_html_e('Scroll to Top', 'uply-scroll-to-top-and-progress-bar'); ?></a>
                        <a href="#" class="ustt-nav-link" data-tab="progress-bar"><?php esc_html_e('Progress Bar', 'uply-scroll-to-top-and-progress-bar'); ?></a>
                        <a href="#" class="ustt-nav-link" data-tab="read-time"><?php esc_html_e('Read Time', 'uply-scroll-to-top-and-progress-bar'); ?></a>
                    </nav>
                    <div class="ustt-header-actions">
                        <?php if (!$is_pro && function_exists(__NAMESPACE__ . '\\usttapb_fs')): ?>
                            <a href="<?php echo esc_url(usttapb_fs()->get_upgrade_url()); ?>" class="ustt-btn-upgrade">
                                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                    <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-4.98 3.66l-.163 .01l-.086 .016l-.142 .045l-.113 .054l-.07 .043l-.095 .071l-.058 .054l-4 4l-.083 .094a1 1 0 0 0 1.497 1.32l2.293 -2.293v5.586l.007 .117a1 1 0 0 0 1.993 -.117v-5.585l2.293 2.292l.094 .083a1 1 0 0 0 1.32 -1.497l-4 -4l-.082 -.073l-.089 -.064l-.113 -.062l-.081 -.034l-.113 -.034l-.112 -.02l-.098 -.006z" />
                                </svg>
                                <?php esc_html_e('Upgrade to Pro', 'uply-scroll-to-top-and-progress-bar'); ?>
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
            </header>

            <main class="ustt-main">
                <form class="ustt-form">


                    
                    <!-- Overview Tab -->
                    <div id="ustt-tab-overview" class="ustt-tab-content active">
                        <div class="ustt-page-heading">
                            <h1><?php esc_html_e('Welcome to Uply', 'uply-scroll-to-top-and-progress-bar'); ?></h1>
                            <p><?php esc_html_e('Enhance your website experience with advanced reading and navigation tools. Uply provides seamless scroll-to-top functionality, dynamic progress bars, and accurate reading time estimates.', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                        </div>

                        <!-- Intro Section -->
                        <div class="ustt-intro-grid">
                            <div class="ustt-card">
                                <h3 class="ustt-card-title">
                                    <span class="dashicons dashicons-controls-play"></span>
                                    <?php esc_html_e('Getting Started Video', 'uply-scroll-to-top-and-progress-bar'); ?>
                                </h3>
                                <div class="ustt-video-placeholder">
                                    <div class="ustt-play-btn">
                                        <span class="dashicons dashicons-controls-play"></span>
                                    </div>
                                    <p><?php esc_html_e('Video coming soon', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                                </div>
                            </div>
                            <div class="ustt-card">
                                <h3 class="ustt-card-title">
                                    <span class="dashicons dashicons-dashboard"></span>
                                    <?php esc_html_e('Quick Start Guide', 'uply-scroll-to-top-and-progress-bar'); ?>
                                </h3>
                                <table class="ustt-table">
                                    <thead>
                                        <tr>
                                            <th><?php esc_html_e('Step', 'uply-scroll-to-top-and-progress-bar'); ?></th>
                                            <th><?php esc_html_e('Action', 'uply-scroll-to-top-and-progress-bar'); ?></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="step-num">01</td>
                                            <td><?php esc_html_e('Configure your Scroll to Top button behavior.', 'uply-scroll-to-top-and-progress-bar'); ?></td>
                                        </tr>
                                        <tr>
                                            <td class="step-num">02</td>
                                            <td><?php esc_html_e('Set the Progress Bar color to match your brand.', 'uply-scroll-to-top-and-progress-bar'); ?></td>
                                        </tr>
                                        <tr>
                                            <td class="step-num">03</td>
                                            <td><?php esc_html_e('Enable Reading Time for your blog posts.', 'uply-scroll-to-top-and-progress-bar'); ?></td>
                                        </tr>
                                        <tr class="highlight">
                                            <td class="step-num primary">04</td>
                                            <td class="bold"><?php esc_html_e('Click "Save Changes" to apply your settings.', 'uply-scroll-to-top-and-progress-bar'); ?></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Features Section -->
                        <div class="ustt-section-header">
                            <h2><?php esc_html_e('Explore Key Features', 'uply-scroll-to-top-and-progress-bar'); ?></h2>
                        </div>
                        <div class="ustt-features-grid">
                            <div class="ustt-feature-card" data-goto="scroll-to-top">
                                <div class="ustt-feature-icon">
                                    <span class="dashicons dashicons-arrow-up-alt"></span>
                                </div>
                                <h3><?php esc_html_e('Scroll to Top', 'uply-scroll-to-top-and-progress-bar'); ?></h3>
                                <p><?php esc_html_e('Customize icons, animations, and positions for the ultimate navigation button.', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                                <span class="ustt-feature-link"><?php esc_html_e('Configure', 'uply-scroll-to-top-and-progress-bar'); ?> →</span>
                            </div>
                            <div class="ustt-feature-card" data-goto="progress-bar">
                                <div class="ustt-feature-icon">
                                    <span class="dashicons dashicons-minus"></span>
                                </div>
                                <h3><?php esc_html_e('Progress Bar', 'uply-scroll-to-top-and-progress-bar'); ?></h3>
                                <p><?php esc_html_e('Visual feedback for readers to know exactly how much they\'ve read.', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                                <span class="ustt-feature-link"><?php esc_html_e('Configure', 'uply-scroll-to-top-and-progress-bar'); ?> →</span>
                            </div>
                            <div class="ustt-feature-card" data-goto="read-time">
                                <div class="ustt-feature-icon">
                                    <span class="dashicons dashicons-clock"></span>
                                </div>
                                <h3><?php esc_html_e('Reading Time', 'uply-scroll-to-top-and-progress-bar'); ?></h3>
                                <p><?php esc_html_e('Automatically calculate and display estimated reading time on your posts.', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                                <span class="ustt-feature-link"><?php esc_html_e('Configure', 'uply-scroll-to-top-and-progress-bar'); ?> →</span>
                            </div>
                        </div>

                        <!-- Support Section -->
                        <div class="ustt-support-grid">
                            <div class="ustt-support-card">
                                <div class="ustt-support-icon">
                                    <span class="dashicons dashicons-book"></span>
                                </div>
                                <div class="ustt-support-content">
                                    <h4><?php esc_html_e('Documentation', 'uply-scroll-to-top-and-progress-bar'); ?></h4>
                                    <p><?php esc_html_e('Need deeper details? Browse our extensive knowledge base for tips and advanced usage.', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                                    <a href="https://developer.wordpress.org/" target="_blank" rel="noopener" class="ustt-btn-secondary"><?php esc_html_e('Read Docs', 'uply-scroll-to-top-and-progress-bar'); ?></a>
                                </div>
                            </div>
                            <div class="ustt-support-card">
                                <div class="ustt-support-icon">
                                    <span class="dashicons dashicons-format-chat"></span>
                                </div>
                                <div class="ustt-support-content">
                                    <h4><?php esc_html_e('Need Support?', 'uply-scroll-to-top-and-progress-bar'); ?></h4>
                                    <p><?php esc_html_e('Our team is here to help you. Open a ticket and we will get back to you within 24 hours.', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                                    <a href="https://wordpress.org/support/plugin/uply-scroll-to-top-and-progress-bar/" target="_blank" rel="noopener" class="ustt-btn-secondary"><?php esc_html_e('Contact Us', 'uply-scroll-to-top-and-progress-bar'); ?></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Scroll to Top Tab -->
                    <div id="ustt-tab-scroll-to-top" class="ustt-tab-content">
                        




                        <!-- Design Layout (Matches React Reference) -->
                        <!-- Design Layout (Matches React Reference) -->

                        <div class="ustt-designer-wrap">
                            
                            <!-- 1. Templates Section -->
                            <div class="ustt-designer-col">
                                <h3 class="ustt-section-label"><?php esc_html_e('TEMPLATES', 'uply-scroll-to-top-and-progress-bar'); ?></h3>
                                
                                <?php 
                                $stt_custom_mode = $get_opt('stt_custom_mode', '0'); 
                                ?>
                                <!-- Sub-Tab Navigation -->
                                <div class="ustt-template-tabs">
                                    <button type="button" class="ustt-template-tab <?php echo esc_attr($stt_custom_mode === '0' ? 'active' : ''); ?>" data-tab="templates">
                                        <?php esc_html_e('Templates', 'uply-scroll-to-top-and-progress-bar'); ?>
                                    </button>
                                    <button type="button" class="ustt-template-tab <?php echo esc_attr($stt_custom_mode === '1' ? 'active' : ''); ?>" data-tab="custom">
                                        <?php esc_html_e('Custom Builder', 'uply-scroll-to-top-and-progress-bar'); ?>
                                    </button>
                                </div>

                                <!-- Templates Tab Content -->
                                <div class="ustt-template-tab-content <?php echo esc_attr($stt_custom_mode === '0' ? 'active' : ''); ?>" id="ustt-templates-tab">
                                    <div class="ustt-template-grid">
                                    <?php 
                                    // Reuse the same config as passed to JS to ensure consistency
                                    $templates = array(
                                        // FREE TEMPLATES (1-5, 31-34, 11, 15, 16 as requested)
                                        'ustt-btn-1' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-1 ustt-template-inner"></button></div>', 'baseSize' => 60),
                                        'ustt-btn-2' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-2 ustt-template-inner"></button></div>', 'baseSize' => 65),
                                        'ustt-btn-3' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-3 ustt-template-inner"><div class="ustt-btn-3-glow"></div></button></div>', 'baseSize' => 70),
                                        'ustt-btn-4' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-4 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-5' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-5 ustt-template-inner"></button></div>', 'baseSize' => 80),
                                        'ustt-btn-31' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-31 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-32' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-32 ustt-template-inner"><div class="ustt-btn-32-arrow2"></div></button></div>', 'baseSize' => 70),
                                        'ustt-btn-33' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-33 ustt-template-inner"><span class="ustt-btn-33-arrow">↑</span></button></div>', 'baseSize' => 68),
                                        'ustt-btn-34' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-34 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-11' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-11 ustt-template-inner"></button></div>', 'baseSize' => 75),
                                        'ustt-btn-15' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-15 ustt-template-inner"></button></div>', 'baseSize' => 60),
                                        'ustt-btn-16' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-16 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        
                                        // PRO TEMPLATES
                                        'ustt-btn-6' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-6 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-7' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-7 ustt-template-inner"></button></div>', 'baseSize' => 75),
                                        'ustt-btn-8' =>  array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-8 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-9' =>  array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-9-container ustt-template-inner"><div class="ustt-btn-9"><div class="ustt-btn-9-face ustt-btn-9-front">↑</div><div class="ustt-btn-9-face ustt-btn-9-back">⬆</div></div></div></div>', 'baseSize' => 70),
                                        'ustt-btn-10' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-10 ustt-template-inner">↑</button></div>', 'baseSize' => 65),
                                        'ustt-btn-12' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-12 ustt-template-inner"><span class="ustt-btn-12-arrow">↑</span></button></div>', 'baseSize' => 70),
                                        'ustt-btn-13' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-13 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-14' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-14 ustt-template-inner"></button></div>', 'baseSize' => 75),
                                        'ustt-btn-17' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-17 ustt-template-inner"></button></div>', 'baseSize' => 75),
                                        'ustt-btn-18' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-18 ustt-template-inner"><span class="ustt-btn-18-arrow">↑</span></button></div>', 'baseSize' => 75),
                                        'ustt-btn-19' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-19 ustt-template-inner"></button></div>', 'baseSize' => 65),
                                        'ustt-btn-20' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-20 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-21' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-21 ustt-template-inner"></button></div>', 'baseSize' => 68),
                                        'ustt-btn-22' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-22 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-23' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-23 ustt-template-inner"></button></div>', 'baseSize' => 65),
                                        'ustt-btn-24' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-24 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-25' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-25 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-26' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-26 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-27' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-27 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-28' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-28 ustt-template-inner"></button></div>', 'baseSize' => 65),
                                        'ustt-btn-29' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-29 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-30' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-30 ustt-template-inner"></button></div>', 'baseSize' => 68),
                                        'ustt-btn-35' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-35 ustt-template-inner"><span class="ustt-btn-35-arrow">↑</span></button></div>', 'baseSize' => 70),
                                        'ustt-btn-36' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-36 ustt-template-inner"></button></div>', 'baseSize' => 68),
                                        'ustt-btn-37' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-37 ustt-template-inner"></button></div>', 'baseSize' => 70),
                                        'ustt-btn-38' => array('html' => '<div class="ustt-admin-wrapper"><button class="ustt-btn-38 ustt-template-inner"></button></div>', 'baseSize' => 65),

                                        // Scroll Progress Collection (39-70)
                                        // Set 1: Black & White
                                        'ustt-btn-39' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-39-wrapper"><svg class="ustt-btn-39-progress" viewBox="0 0 80 80"><circle class="ustt-btn-39-circle" cx="40" cy="40" r="38"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="40" cy="40" r="38"></circle></svg><button class="ustt-btn-39 ustt-template-inner"></button></div></div>', 'baseSize' => 80),
                                        'ustt-btn-40' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-40-wrapper"><div class="ustt-btn-40-bar"><div class="ustt-btn-40-fill ustt-progress-indicator" data-type="width"></div></div><button class="ustt-btn-40 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
                                        'ustt-btn-41' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-41-wrapper"><button class="ustt-btn-41 ustt-template-inner"><div class="ustt-btn-41-fill ustt-progress-indicator" data-type="height"></div></button></div></div>', 'baseSize' => 75),
                                        'ustt-btn-42' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-42-wrapper"><svg class="ustt-btn-42-progress" viewBox="0 0 85 85"><rect class="ustt-btn-42-bg" x="2" y="2" width="81" height="81" rx="2"></rect><rect class="ustt-progress-indicator" data-type="stroke" x="2" y="2" width="81" height="81" rx="2"></rect></svg><button class="ustt-btn-42 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-43' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-43-wrapper"><div class="ustt-btn-43-bar"><div class="ustt-btn-43-fill ustt-progress-indicator" data-type="height"></div></div><button class="ustt-btn-43 ustt-template-inner"></button></div></div>', 'baseSize' => 88),
                                        'ustt-btn-44' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-44-wrapper"><svg class="ustt-btn-44-outer" viewBox="0 0 85 85"><circle class="ustt-btn-44-bg" cx="42.5" cy="42.5" r="40.5"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="42.5" cy="42.5" r="40.5"></circle></svg><svg class="ustt-btn-44-inner" viewBox="0 0 65 65"><circle class="ustt-btn-44-bg" cx="32.5" cy="32.5" r="30.5"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="32.5" cy="32.5" r="30.5"></circle></svg><button class="ustt-btn-44 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-45' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-45-wrapper"><div class="ustt-btn-45-lines ustt-progress-container" data-type="steps"><div class="ustt-btn-45-line"></div><div class="ustt-btn-45-line"></div><div class="ustt-btn-45-line"></div><div class="ustt-btn-45-line"></div></div><button class="ustt-btn-45 ustt-template-inner"></button></div></div>', 'baseSize' => 90),
                                        'ustt-btn-46' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-46-wrapper"><div class="ustt-btn-46-corners ustt-progress-container" data-type="steps"><div class="ustt-btn-46-corner ustt-btn-46-corner-tl"></div><div class="ustt-btn-46-corner ustt-btn-46-corner-tr"></div><div class="ustt-btn-46-corner ustt-btn-46-corner-bl"></div><div class="ustt-btn-46-corner ustt-btn-46-corner-br"></div></div><button class="ustt-btn-46 ustt-template-inner"></button></div></div>', 'baseSize' => 90),
                                        'ustt-btn-47' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-47-wrapper"><div class="ustt-btn-47-text ustt-progress-indicator" data-type="text">0%</div><button class="ustt-btn-47 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
                                        'ustt-btn-48' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-48-wrapper"><div class="ustt-btn-48-dots ustt-progress-container" data-type="steps-dots" data-dots="16" data-radius="40"></div><button class="ustt-btn-48 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-49' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-49-wrapper"><svg class="ustt-btn-49-progress" viewBox="0 0 85 85"><circle class="ustt-btn-49-bg" cx="42.5" cy="42.5" r="40"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="42.5" cy="42.5" r="40"></circle></svg><button class="ustt-btn-49 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-50' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-50-wrapper"><div class="ustt-btn-50-container"><div class="ustt-btn-50-bar"><div class="ustt-btn-50-fill ustt-progress-indicator" data-type="width"></div></div><div class="ustt-btn-50-text ustt-progress-indicator" data-type="text">0%</div></div><button class="ustt-btn-50 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
                                        
                                        // Set 2: Off-White
                                        'ustt-btn-51' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-51-wrapper"><svg class="ustt-btn-51-progress" viewBox="0 0 80 80"><circle class="ustt-btn-51-bg" cx="40" cy="40" r="38"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="40" cy="40" r="38"></circle></svg><button class="ustt-btn-51 ustt-template-inner"></button></div></div>', 'baseSize' => 80),
                                        'ustt-btn-52' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-52-wrapper"><div class="ustt-btn-52-bar"><div class="ustt-btn-52-fill ustt-progress-indicator" data-type="width"></div></div><button class="ustt-btn-52 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
                                        'ustt-btn-53' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-53-wrapper"><button class="ustt-btn-53 ustt-template-inner"><div class="ustt-btn-53-fill ustt-progress-indicator" data-type="height"></div></button></div></div>', 'baseSize' => 75),
                                        'ustt-btn-54' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-54-wrapper"><svg class="ustt-btn-54-progress" viewBox="0 0 85 85"><rect class="ustt-btn-54-bg" x="2" y="2" width="81" height="81" rx="4"></rect><rect class="ustt-progress-indicator" data-type="stroke" x="2" y="2" width="81" height="81" rx="4"></rect></svg><button class="ustt-btn-54 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-55' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-55-wrapper"><div class="ustt-btn-55-bar"><div class="ustt-btn-55-fill ustt-progress-indicator" data-type="height"></div></div><button class="ustt-btn-55 ustt-template-inner"></button></div></div>', 'baseSize' => 88),
                                        'ustt-btn-56' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-56-wrapper"><svg class="ustt-btn-56-outer" viewBox="0 0 88 88"><circle class="ustt-btn-56-bg" cx="44" cy="44" r="42"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="44" cy="44" r="42"></circle></svg><svg class="ustt-btn-56-inner" viewBox="0 0 68 68"><circle class="ustt-btn-56-bg" cx="34" cy="34" r="32"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="34" cy="34" r="32"></circle></svg><button class="ustt-btn-56 ustt-template-inner"></button></div></div>', 'baseSize' => 88),
                                        'ustt-btn-57' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-57-wrapper"><div class="ustt-btn-57-lines ustt-progress-container" data-type="steps"><div class="ustt-btn-57-line"></div><div class="ustt-btn-57-line"></div><div class="ustt-btn-57-line"></div><div class="ustt-btn-57-line"></div></div><button class="ustt-btn-57 ustt-template-inner"></button></div></div>', 'baseSize' => 90),
                                        'ustt-btn-58' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-58-wrapper"><div class="ustt-btn-58-corners ustt-progress-container" data-type="steps"><div class="ustt-btn-58-corner ustt-btn-58-corner-tl"></div><div class="ustt-btn-58-corner ustt-btn-58-corner-tr"></div><div class="ustt-btn-58-corner ustt-btn-58-corner-bl"></div><div class="ustt-btn-58-corner ustt-btn-58-corner-br"></div></div><button class="ustt-btn-58 ustt-template-inner"></button></div></div>', 'baseSize' => 90),
                                        'ustt-btn-59' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-59-wrapper"><div class="ustt-btn-59-text ustt-progress-indicator" data-type="text">0%</div><button class="ustt-btn-59 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
                                        'ustt-btn-60' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-60-wrapper"><div class="ustt-btn-60-dots ustt-progress-container" data-type="steps-dots" data-dots="16" data-radius="40"></div><button class="ustt-btn-60 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-61' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-61-wrapper"><svg class="ustt-btn-61-progress" viewBox="0 0 85 85"><circle class="ustt-btn-61-bg" cx="42.5" cy="42.5" r="40.5"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="42.5" cy="42.5" r="40.5"></circle></svg><button class="ustt-btn-61 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-62' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-62-wrapper"><div class="ustt-btn-62-container"><div class="ustt-btn-62-bar"><div class="ustt-btn-62-fill ustt-progress-indicator" data-type="width"></div></div><div class="ustt-btn-62-text ustt-progress-indicator" data-type="text">0%</div></div><button class="ustt-btn-62 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
                                        'ustt-btn-63' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-63-wrapper"><svg class="ustt-btn-63-progress" viewBox="0 0 85 85"><polygon class="ustt-btn-63-bg" points="42.5,8 72.5,25.5 72.5,60.5 42.5,78 12.5,60.5 12.5,25.5"></polygon><polygon class="ustt-progress-indicator" data-type="stroke" points="42.5,8 72.5,25.5 72.5,60.5 42.5,78 12.5,60.5 12.5,25.5"></polygon></svg><button class="ustt-btn-63 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-64' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-64-wrapper"><div class="ustt-btn-64-bar"><div class="ustt-btn-64-fill ustt-progress-indicator" data-type="width"></div></div><button class="ustt-btn-64 ustt-template-inner"></button></div></div>', 'baseSize' => 95),
                                        'ustt-btn-65' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-65-wrapper"><svg class="ustt-btn-65-progress" viewBox="0 0 85 85"><polygon class="ustt-btn-65-bg" points="42.5,10 75,70 10,70"></polygon><polygon class="ustt-progress-indicator" data-type="stroke" points="42.5,10 75,70 10,70"></polygon></svg><button class="ustt-btn-65 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-66' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-66-wrapper"><svg class="ustt-btn-66-progress" viewBox="0 0 85 85"><polygon class="ustt-btn-66-bg" points="42.5,8 77,32 65,72 20,72 8,32"></polygon><polygon class="ustt-progress-indicator" data-type="stroke" points="42.5,8 77,32 65,72 20,72 8,32"></polygon></svg><button class="ustt-btn-66 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-67' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-67-wrapper"><svg class="ustt-btn-67-progress" viewBox="0 0 85 85"><polygon class="ustt-btn-67-bg" points="30,8 55,8 77,30 77,55 55,77 30,77 8,55 8,30"></polygon><polygon class="ustt-progress-indicator" data-type="stroke" points="30,8 55,8 77,30 77,55 55,77 30,77 8,55 8,30"></polygon></svg><button class="ustt-btn-67 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-68' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-68-wrapper"><svg class="ustt-btn-68-progress" viewBox="0 0 85 85"><rect class="ustt-btn-68-bg" x="18" y="18" width="49" height="49" transform="rotate(45 42.5 42.5)"></rect><rect class="ustt-progress-indicator" data-type="stroke" x="18" y="18" width="49" height="49" transform="rotate(45 42.5 42.5)"></rect></svg><button class="ustt-btn-68 ustt-template-inner"></button></div></div>', 'baseSize' => 85),
                                        'ustt-btn-69' => array('html' => '<div class="ustt-admin-wrapper"><div class="ustt-btn-69-wrapper"><div class="ustt-btn-69-bar"><div class="ustt-btn-69-fill ustt-progress-indicator" data-type="width"></div></div><button class="ustt-btn-69 ustt-template-inner"></button></div></div>', 'baseSize' => 100),
                                        'ustt-btn-70' => array('html'=> '<div class="ustt-admin-wrapper"><div class="ustt-btn-70-wrapper"><svg class="ustt-btn-70-progress" viewBox="0 0 88 88"><circle class="ustt-btn-70-bg" cx="44" cy="44" r="42"></circle><circle class="ustt-progress-indicator" data-type="stroke" cx="44" cy="44" r="42"></circle></svg><button class="ustt-btn-70 ustt-template-inner"></button></div></div>', 'baseSize' => 88),
                                                                            );
                                    
                                    $current_icon = $get_opt('stt_icon', 'ustt-btn-1'); 
                                    // Fallback if old value (e.g. 'chevron') is present
                                    if (!array_key_exists($current_icon, $templates)) {
                                        $current_icon = 'ustt-btn-1';
                                    }
                                    ?>
                                    <div class="ustt-template-grid">
                                    <?php
                                    foreach ($templates as $key => $data): 
                                        // Define free keys based on user request (STT: 1-5, 31-34, 11, 15, 16)
                                        $free_keys = array('ustt-btn-1', 'ustt-btn-2', 'ustt-btn-3', 'ustt-btn-4', 'ustt-btn-5', 'ustt-btn-31', 'ustt-btn-32', 'ustt-btn-33', 'ustt-btn-34', 'ustt-btn-11', 'ustt-btn-15', 'ustt-btn-16');
                                        
                                        $is_premium_template = !in_array($key, $free_keys);
                                        $locked = $is_premium_template && !$is_pro;
                                    ?>
                                    <label class="ustt-template-item <?php echo esc_attr($locked ? 'ustt-locked' : ''); ?>" data-premium="<?php echo esc_attr($is_premium_template ? '1' : '0'); ?>">
                                        <input type="radio" name="stt_icon" value="<?php echo esc_attr($key); ?>" <?php checked($current_icon, $key); ?> <?php echo esc_attr($locked ? 'disabled' : ''); ?>>
                                        <div class="ustt-template-box">
                                            <?php if ($locked): ?>
                                                <div class="ustt-lock-overlay">
                                                    <span class="dashicons dashicons-lock"></span>
                                                </div>
                                            <?php endif; ?>
                                            <!-- Render the Complex Button HTML -->
                                            <?php echo wp_kses_post($data['html']); ?>
                                        </div>
                                    </label>
                                    <?php endforeach; ?>
                                    </div>
                                </div>
                                </div>
                                <!-- End Templates Tab -->

                                <!-- Custom Builder Tab Content -->
                                <div class="ustt-template-tab-content <?php echo esc_attr($stt_custom_mode === '1' ? 'active' : ''); ?>" id="ustt-custom-tab">
                                    <?php
                                    // Define custom icons
                                    $custom_icons = array(
                                        'arrow-up-thin'     => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>',
                                        'arrow-up-bold'     => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>',
                                        'chevron-up-thin'   => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>',
                                        'chevron-up-bold'   => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>',
                                        'double-chevron-up' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13l5-5 5 5M7 17l5-5 5 5"/></svg>',
                                        'arrow-up-circle'   => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M16 12l-4-4-4 4M12 16V8"/></svg>',
                                        'arrow-up-square'   => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><path d="M16 12l-4-4-4 4M12 16V8"/></svg>',
                                        'arrow-up-long'     => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21V3M5 10l7-7 7 7"/></svg>',
                                        'arrow-up-minimal'  => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M7 10l5-5 5 5"/></svg>',
                                        'caret-up-solid'    => '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14l5-5 5 5z"/></svg>',
                                        'triangle-up-solid' => '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l10 18H2z"/></svg>',
                                        'rocket-solid'      => '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.13 22.19L11.5 18.35L9.87 22.19L11.5 20.5L13.13 22.19M11.5 2L5.87 18.35L11.5 16.5L17.13 18.35L11.5 2Z"/></svg>',
                                        'arrow-arc-up'      => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/><path d="M12 19c-4 0-7-3-7-7"/></svg>',
                                        'arrow-modern-1'    => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/><circle cx="12" cy="19" r="0.5"/></svg>',
                                        'arrow-modern-2'    => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M17 11l-5-5-5 5M17 18l-5-5-5 5"/></svg>',
                                        'paper-plane'       => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>',
                                        'arrow-creative'    => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7M12 5v14c0 1.1-.9 2-2 2s-2-.9-2-2"/></svg>',
                                        'arrow-curved-up'   => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12M5 10l7-7 7 7c0 4.4-3.6 8-8 8"/></svg>',
                                    );
                                    
                                    $current_custom_icon = $get_opt('stt_custom_icon', 'arrow-up');
                                    ?>
                                    
                                    <!-- Icon Selector -->
                                    <div class="ustt-custom-icon-grid">
                                        <?php foreach ($custom_icons as $icon_key => $icon_svg): ?>
                                        <label class="ustt-custom-icon-item">
                                            <input type="radio" name="stt_custom_icon" value="<?php echo esc_attr($icon_key); ?>" <?php checked($current_custom_icon, $icon_key); ?>>
                                            <div class="ustt-custom-icon-preview">
                                                <?php echo wp_kses($icon_svg, ustt_get_svg_allowed_html()); ?>
                                            </div>
                                        </label>
                                        <?php endforeach; ?>
                                    </div>

                                    <!-- Hidden field to track custom mode -->
                                    <input type="hidden" name="stt_custom_mode" id="stt-custom-mode" value="<?php echo esc_attr($get_opt('stt_custom_mode', '0')); ?>">
                                </div>
                                <!-- End Custom Builder Tab -->
                            </div>



                            <!-- 3. Customization Section -->
                            <div class="ustt-designer-col ustt-customize-col">
                                <h3 class="ustt-section-label"><?php esc_html_e('CUSTOMIZATION', 'uply-scroll-to-top-and-progress-bar'); ?></h3>

                                <!-- Enable & Save -->
                                <div class="ustt-sticky-actions">
                                    <div class="ustt-sticky-actions-inner">
                                        <div class="ustt-sticky-actions-left">
                                            <label class="ustt-switch">
                                                <input type="checkbox" name="stt_enable" value="1" <?php checked($stt_enable, '1'); ?>>
                                                <span class="ustt-slider round"></span>
                                            </label>
                                            <span class="ustt-toggle-label"><?php esc_html_e('Enable Scroll to Top', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                        </div>
                                        <button type="button" class="ustt-btn-primary" id="ustt-stt-save">
                                            <span class="dashicons dashicons-saved"></span>
                                            <?php esc_html_e('Save Changes', 'uply-scroll-to-top-and-progress-bar'); ?>
                                        </button>
                                    </div>
                                </div>

                                <!-- 3. SETTINGS CARD (Starting here) -->
                                <div class="ustt-card ustt-settings-card" id="ustt-stt-settings-card">

                                <!-- Position Toggle -->
                                <div class="ustt-control-group">
                                    <label><?php esc_html_e('Position', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                    <div class="ustt-toggle-btns">
                                        <label class="ustt-toggle-btn">
                                            <input type="radio" name="stt_position" value="right" <?php checked($stt_position, 'right'); ?>>
                                            <span><?php esc_html_e('RIGHT', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                        </label>
                                        <label class="ustt-toggle-btn">
                                            <input type="radio" name="stt_position" value="left" <?php checked($stt_position, 'left'); ?>>
                                            <span><?php esc_html_e('LEFT', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                        </label>
                                    </div>
                                </div>

                                <!-- Margins -->
                                <div class="ustt-control-row">
                                    <div class="ustt-control-group">
                                        <label><?php esc_html_e('Bottom Margin (px)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                        <input type="number" name="stt_margin_bottom" value="<?php echo esc_attr($get_opt('stt_margin_bottom', '20')); ?>" class="ustt-input-glass">
                                    </div>
                                    <div class="ustt-control-group">
                                        <label><?php esc_html_e('Side Margin', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                        <input type="number" name="stt_margin_side" value="<?php echo esc_attr($get_opt('stt_margin_side', '20')); ?>" class="ustt-input-glass">
                                    </div>
                                </div>

                                <!-- Button Size -->
                                <div class="ustt-control-group">
                                    <div class="ustt-label-row">
                                        <label><?php esc_html_e('Button Size', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                        <div class="ustt-size-controls">
                                            <span class="ustt-value-display" id="stt-size-value"><?php echo esc_html($get_opt('stt_size', '48')); ?>px</span>
                                            <button type="button" class="ustt-btn-reset" id="stt-size-reset" title="<?php esc_attr_e('Reset to Default Size', 'uply-scroll-to-top-and-progress-bar'); ?>">
                                                <span class="dashicons dashicons-image-rotate"></span>
                                            </button>
                                        </div>
                                    </div>
                                    <input type="range" name="stt_size" value="<?php echo esc_attr($get_opt('stt_size', '48')); ?>" min="32" max="80" class="ustt-range-slider" id="stt-size-slider">
                                </div>

                                <!-- Display On -->
                                <div class="ustt-control-group">
                                    <label><?php esc_html_e('Display On', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                    <div class="ustt-radio-group" style="flex-wrap: wrap; gap: 8px;">
                                        <label class="ustt-radio-pill">
                                            <input type="radio" name="stt_display_on" value="all" <?php checked($get_opt('stt_display_on', 'all'), 'all'); ?>>
                                            <?php esc_html_e('All Pages', 'uply-scroll-to-top-and-progress-bar'); ?>
                                        </label>
                                        <label class="ustt-radio-pill">
                                            <input type="radio" name="stt_display_on" value="pages" <?php checked($get_opt('stt_display_on', 'all'), 'pages'); ?>>
                                            <?php esc_html_e('Pages Only', 'uply-scroll-to-top-and-progress-bar'); ?>
                                        </label>
                                        <label class="ustt-radio-pill">
                                            <input type="radio" name="stt_display_on" value="posts" <?php checked($get_opt('stt_display_on', 'all'), 'posts'); ?>>
                                            <?php esc_html_e('Posts Only', 'uply-scroll-to-top-and-progress-bar'); ?>
                                        </label>
                                    </div>
                                </div>

                                <!-- Exclude Section -->
                                <div class="ustt-control-group">
                                    <label><?php esc_html_e('Exclude', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                    <div class="ustt-accordion-wrapper" style="margin-top: 5px;">
                                        <!-- Exclude by ID -->
                                        <div class="ustt-accordion-item">
                                            <div class="ustt-accordion-header">
                                                <span><?php esc_html_e('Specific Page IDs', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                                <span class="dashicons dashicons-arrow-down-alt2"></span>
                                            </div>
                                            <div class="ustt-accordion-body">
                                                <p class="description"><?php esc_html_e('Enter comma-separated IDs', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                                                <input type="text" name="stt_exclude_ids" value="<?php echo esc_attr($stt_exclude_ids); ?>" class="regular-text" placeholder="e.g. 5, 12" style="width: 100%; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2); color: #fff;">
                                            </div>
                                        </div>

                                        <!-- Exclude by Post Type -->
                                        <div class="ustt-accordion-item">
                                            <div class="ustt-accordion-header">
                                                <span><?php esc_html_e('By Post Type', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                                <span class="dashicons dashicons-arrow-down-alt2"></span>
                                            </div>
                                            <div class="ustt-accordion-body">
                                                <?php 
                                                $excluded_types = $get_opt('stt_exclude_post_types', array());
                                                foreach ($post_types as $pt): 
                                                ?>
                                                <label class="ustt-checkbox-block" style="color: #94a3b8;">
                                                    <input type="checkbox" name="stt_exclude_post_types[]" value="<?php echo esc_attr($pt->name); ?>" <?php checked(in_array($pt->name, $excluded_types)); ?>>
                                                    <?php echo esc_html($pt->label); ?>
                                                </label>
                                                <?php endforeach; ?>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>

                                <!-- Custom Builder Settings (Conditional) -->
                                <div id="ustt-custom-builder-settings" style="display: <?php echo esc_attr($get_opt('stt_custom_mode', '0') === '1' ? 'block' : 'none'); ?>; margin-top: 15px;">
                                    
                                    <!-- 1. Icon Settings -->
                                    <div class="ustt-card ustt-settings-card ustt-compact">
                                        <div class="ustt-settings-section-title">
                                            <span class="dashicons dashicons-admin-appearance"></span>
                                            <?php esc_html_e('Icon', 'uply-scroll-to-top-and-progress-bar'); ?>
                                        </div>
                                        <div class="ustt-control-row">
                                            <div class="ustt-control-group">
                                                <label><?php esc_html_e('Color', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                <div class="ustt-color-picker">
                                                    <input type="color" name="stt_custom_icon_color" value="<?php echo esc_attr($get_opt('stt_custom_icon_color', '#ffffff')); ?>">
                                                    <span class="ustt-color-value"><?php echo esc_html($get_opt('stt_custom_icon_color', '#ffffff')); ?></span>
                                                </div>
                                            </div>
                                            <div class="ustt-control-group">
                                                <label><?php esc_html_e('Hover Color', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                <div class="ustt-color-picker">
                                                    <input type="color" name="stt_custom_hover_icon_color" value="<?php echo esc_attr($get_opt('stt_custom_hover_icon_color', '#ffffff')); ?>">
                                                    <span class="ustt-color-value"><?php echo esc_html($get_opt('stt_custom_hover_icon_color', '#ffffff')); ?></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ustt-control-group" style="margin-top: 12px;">
                                            <label><?php esc_html_e('Icon Size (px)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                            <input type="number" name="stt_custom_icon_size" value="<?php echo esc_attr($get_opt('stt_custom_icon_size', '24')); ?>" min="10" max="64" class="ustt-input-glass">
                                        </div>
                                    </div>

                                    <!-- 2. Background Settings -->
                                    <div class="ustt-card ustt-settings-card ustt-compact">
                                        <div class="ustt-settings-section-header">
                                            <div class="ustt-settings-section-title">
                                                <span class="dashicons dashicons-art"></span>
                                                <?php esc_html_e('Background', 'uply-scroll-to-top-and-progress-bar'); ?>
                                            </div>
                                            <label class="ustt-switch">
                                                <input type="checkbox" name="stt_custom_bg_enable" value="1" <?php checked($get_opt('stt_custom_bg_enable', '1'), '1'); ?>>
                                                <span class="ustt-slider round"></span>
                                            </label>
                                        </div>
                                        
                                        <div id="ustt-custom-bg-options" style="<?php echo esc_attr($get_opt('stt_custom_bg_enable', '1') === '1' ? '' : 'display: none;'); ?>">
                                            <div class="ustt-control-row">
                                                <div class="ustt-control-group">
                                                    <label><?php esc_html_e('Color', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                    <div class="ustt-color-picker">
                                                        <input type="color" name="stt_custom_bg_color" value="<?php echo esc_attr($get_opt('stt_custom_bg_color', '#3b82f6')); ?>">
                                                        <span class="ustt-color-value"><?php echo esc_html($get_opt('stt_custom_bg_color', '#3b82f6')); ?></span>
                                                    </div>
                                                </div>
                                                <div class="ustt-control-group">
                                                    <label><?php esc_html_e('Hover Color', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                    <div class="ustt-color-picker">
                                                        <input type="color" name="stt_custom_hover_bg_color" value="<?php echo esc_attr($get_opt('stt_custom_hover_bg_color', '#2563eb')); ?>">
                                                        <span class="ustt-color-value"><?php echo esc_html($get_opt('stt_custom_hover_bg_color', '#2563eb')); ?></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ustt-control-row" style="margin-top: 12px;">
                                                <div class="ustt-control-group">
                                                    <label><?php esc_html_e('Padding (px)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                    <input type="number" name="stt_custom_bg_padding" value="<?php echo esc_attr($get_opt('stt_custom_bg_padding', '12')); ?>" min="0" max="60" class="ustt-input-glass">
                                                </div>
                                                <div class="ustt-control-group">
                                                    <label><?php esc_html_e('Radius (px)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                    <input type="number" name="stt_custom_bg_radius" value="<?php echo esc_attr($get_opt('stt_custom_bg_radius', '8')); ?>" min="0" max="100" class="ustt-input-glass">
                                                    <span class="ustt-hint"><?php esc_html_e('Use 50 for circle', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 3. Border Settings -->
                                    <div class="ustt-card ustt-settings-card ustt-compact">
                                        <div class="ustt-settings-section-header">
                                            <div class="ustt-settings-section-title">
                                                <span class="dashicons dashicons-editor-contract"></span>
                                                <?php esc_html_e('Border', 'uply-scroll-to-top-and-progress-bar'); ?>
                                            </div>
                                            <label class="ustt-switch">
                                                <input type="checkbox" name="stt_custom_border_enable" value="1" <?php checked($get_opt('stt_custom_border_enable', '0'), '1'); ?>>
                                                <span class="ustt-slider round"></span>
                                            </label>
                                        </div>
                                        
                                        <div id="ustt-custom-border-options" style="<?php echo esc_attr($get_opt('stt_custom_border_enable', '0') === '1' ? '' : 'display: none;'); ?>">
                                            <div class="ustt-control-row">
                                                <div class="ustt-control-group">
                                                    <label><?php esc_html_e('Color', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                    <div class="ustt-color-picker">
                                                        <input type="color" name="stt_custom_border_color" value="<?php echo esc_attr($get_opt('stt_custom_border_color', '#ffffff')); ?>">
                                                        <span class="ustt-color-value"><?php echo esc_html($get_opt('stt_custom_border_color', '#ffffff')); ?></span>
                                                    </div>
                                                </div>
                                                <div class="ustt-control-group">
                                                    <label><?php esc_html_e('Width (px)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                    <input type="number" name="stt_custom_border_width" value="<?php echo esc_attr($get_opt('stt_custom_border_width', '1')); ?>" min="0" max="10" class="ustt-input-glass">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- END Settings Wrapper -->
                            </div>
                        </div>
                    </div>

                    <!-- Progress Bar Tab -->
                    <div id="ustt-tab-progress-bar" class="ustt-tab-content">



                        <div class="ustt-designer-wrap">

                            <!-- 1. Templates Column -->
                            <div class="ustt-designer-col">
                                <h3 class="ustt-section-label"><?php esc_html_e('TEMPLATES', 'uply-scroll-to-top-and-progress-bar'); ?></h3>

                                <?php 
                                $pb_custom_mode = $get_opt('pb_custom_mode', '0');
                                $pb_template = $get_opt('pb_template', 'ustt-pb-1');
                                ?>

                                <!-- Sub-Tab Navigation -->
                                <div class="ustt-template-tabs" id="ustt-pb-template-tabs">
                                    <button type="button" class="ustt-template-tab <?php echo esc_attr($pb_custom_mode === '0' ? 'active' : ''); ?>" data-pb-tab="pb-templates">
                                        <?php esc_html_e('Templates', 'uply-scroll-to-top-and-progress-bar'); ?>
                                    </button>
                                    <button type="button" class="ustt-template-tab <?php echo esc_attr($pb_custom_mode === '1' ? 'active' : ''); ?>" data-pb-tab="pb-custom">
                                        <?php esc_html_e('Custom Builder', 'uply-scroll-to-top-and-progress-bar'); ?>
                                    </button>
                                </div>

                                <!-- Templates Tab Content -->
                                <div class="ustt-template-tab-content <?php echo esc_attr($pb_custom_mode === '0' ? 'active' : ''); ?>" id="ustt-pb-templates-tab">
                                    <div class="ustt-pb-template-grid">
                                        <?php
                                        $pb_templates = array(
                                            // FREE TEMPLATES (5, 25-32 as requested)
                                            'ustt-pb-5'  => array('name' => 'Minimalist'),
                                            'ustt-pb-25' => array('name' => 'Dark Slate'),
                                            'ustt-pb-26' => array('name' => 'Charcoal Wave'),
                                            'ustt-pb-27' => array('name' => 'Warm Beige'),
                                            'ustt-pb-28' => array('name' => 'Soft Gray'),
                                            'ustt-pb-29' => array('name' => 'Forest Green'),
                                            'ustt-pb-30' => array('name' => 'Deep Burgundy'),
                                            'ustt-pb-31' => array('name' => 'Navy Depths'),
                                            'ustt-pb-32' => array('name' => 'Teal Accent'),
                                            
                                            // PRO TEMPLATES
                                            'ustt-pb-1'  => array('name' => 'Neon Glow'),
                                            'ustt-pb-2'  => array('name' => 'Gradient Wave'),
                                            'ustt-pb-3'  => array('name' => 'Particle Trail'),
                                            'ustt-pb-4'  => array('name' => 'Segmented'),
                                            'ustt-pb-6'  => array('name' => 'Double Line'),
                                            'ustt-pb-7'  => array('name' => 'Gradient Mesh'),
                                            'ustt-pb-8'  => array('name' => 'Glitch'),
                                            'ustt-pb-9'  => array('name' => 'Rainbow'),
                                            'ustt-pb-10' => array('name' => 'Neumorphic'),
                                            'ustt-pb-11' => array('name' => 'Liquid Metal'),
                                            'ustt-pb-12' => array('name' => 'Fire Trail'),
                                            'ustt-pb-13' => array('name' => 'Striped Diagonal'),
                                            'ustt-pb-14' => array('name' => 'Pulse Glow'),
                                            'ustt-pb-15' => array('name' => 'Ocean Tide'),
                                            'ustt-pb-16' => array('name' => 'Sunset Fade'),
                                            'ustt-pb-17' => array('name' => 'Electric Spark'),
                                            'ustt-pb-18' => array('name' => 'Frosted Glass'),
                                            'ustt-pb-19' => array('name' => 'Matrix Code'),
                                            'ustt-pb-20' => array('name' => 'Aurora'),
                                            'ustt-pb-21' => array('name' => 'Candy Stripe'),
                                            'ustt-pb-22' => array('name' => 'Lava Flow'),
                                            'ustt-pb-23' => array('name' => 'Ice Crystal'),
                                            'ustt-pb-24' => array('name' => 'Holographic'),
                                            'ustt-pb-33' => array('name' => 'Amber Glow'),
                                            'ustt-pb-34' => array('name' => 'Slate Gradient'),
                                            'ustt-pb-35' => array('name' => 'Espresso'),
                                            'ustt-pb-36' => array('name' => 'Obsidian Pulse'),
                                            'ustt-pb-37' => array('name' => 'Void Ripple'),
                                            'ustt-pb-38' => array('name' => 'Midnight Storm'),
                                            'ustt-pb-39' => array('name' => 'Carbon Fiber'),
                                        );

                                        foreach ($pb_templates as $key => $data):
                                            // Define free keys for Progress Bar (5, 25-32)
                                            $free_keys = array('ustt-pb-5', 'ustt-pb-25', 'ustt-pb-26', 'ustt-pb-27', 'ustt-pb-28', 'ustt-pb-29', 'ustt-pb-30', 'ustt-pb-31', 'ustt-pb-32');
                                            $is_premium_template = !in_array($key, $free_keys);
                                            $locked = $is_premium_template && !$is_pro;
                                        ?>
                                        <label class="ustt-pb-template-item <?php echo esc_attr(($pb_template === $key) ? 'selected' : ''); ?> <?php echo esc_attr($locked ? 'ustt-locked' : ''); ?>" data-premium="<?php echo esc_attr($is_premium_template ? '1' : '0'); ?>">
                                            <input type="radio" name="pb_template" value="<?php echo esc_attr($key); ?>" <?php checked($pb_template, $key); ?> <?php echo esc_attr($locked ? 'disabled' : ''); ?>>
                                            <div class="ustt-pb-preview-card">
                                                <?php if ($locked): ?>
                                                    <div class="ustt-lock-overlay">
                                                        <span class="dashicons dashicons-lock"></span>
                                                    </div>
                                                <?php endif; ?>
                                                <div class="ustt-pb-preview-viewport">
                                                    <div class="ustt-pb-preview-bar <?php echo esc_attr($key); ?>"></div>
                                                </div>
                                                <span class="ustt-pb-template-name"><?php echo esc_html($data['name']); ?></span>
                                            </div>
                                        </label>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                                <!-- End Templates Tab -->

                                <!-- Custom Builder Tab Content -->
                                <div class="ustt-template-tab-content <?php echo esc_attr($pb_custom_mode === '1' ? 'active' : ''); ?>" id="ustt-pb-custom-tab">
                                    
                                    <div class="ustt-card ustt-settings-card ustt-compact">
                                        <div class="ustt-settings-section-title">
                                            <span class="dashicons dashicons-art"></span>
                                            <?php esc_html_e('Bar Color', 'uply-scroll-to-top-and-progress-bar'); ?>
                                        </div>
                                        <div class="ustt-control-group" style="margin-top: 12px;">
                                            <label><?php esc_html_e('Color', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                            <div class="ustt-color-picker">
                                                <input type="color" name="pb_color" value="<?php echo esc_attr($pb_color); ?>">
                                                <span class="ustt-color-value"><?php echo esc_html($pb_color); ?></span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Hidden field to track custom mode -->
                                    <input type="hidden" name="pb_custom_mode" id="pb-custom-mode" value="<?php echo esc_attr($get_opt('pb_custom_mode', '0')); ?>">
                                </div>
                                <!-- End Custom Builder Tab -->
                            </div>

                            <!-- 2. Customization Column -->
                            <div class="ustt-designer-col ustt-customize-col">
                                <h3 class="ustt-section-label"><?php esc_html_e('CUSTOMIZATION', 'uply-scroll-to-top-and-progress-bar'); ?></h3>

                                <!-- Enable & Save -->
                                <div class="ustt-sticky-actions">
                                    <div class="ustt-sticky-actions-inner">
                                        <div class="ustt-sticky-actions-left">
                                            <label class="ustt-switch">
                                                <input type="checkbox" name="pb_enable" value="1" <?php checked($pb_enable, '1'); ?>>
                                                <span class="ustt-slider round"></span>
                                            </label>
                                            <span class="ustt-toggle-label"><?php esc_html_e('Enable Progress Bar', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                        </div>
                                        <button type="button" class="ustt-btn-primary" id="ustt-pb-save">
                                            <span class="dashicons dashicons-saved"></span>
                                            <?php esc_html_e('Save Changes', 'uply-scroll-to-top-and-progress-bar'); ?>
                                        </button>
                                    </div>
                                </div>

                                <div class="ustt-card ustt-settings-card" id="ustt-pb-settings-card">

                                    <!-- Position Toggle -->
                                    <div class="ustt-control-group">
                                        <label><?php esc_html_e('Position', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                        <div class="ustt-toggle-btns">
                                            <label class="ustt-toggle-btn">
                                                <input type="radio" name="pb_position" value="top" <?php checked($pb_position, 'top'); ?>>
                                                <span><?php esc_html_e('TOP', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                            </label>
                                            <label class="ustt-toggle-btn">
                                                <input type="radio" name="pb_position" value="bottom" <?php checked($pb_position, 'bottom'); ?>>
                                                <span><?php esc_html_e('BOTTOM', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                            </label>
                                        </div>
                                    </div>

                                    <!-- Height -->
                                    <div class="ustt-control-group">
                                        <div class="ustt-label-row">
                                            <label><?php esc_html_e('Bar Height', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                            <span class="ustt-value-display" id="pb-height-value"><?php echo esc_html($pb_height); ?>px</span>
                                        </div>
                                        <input type="range" name="pb_height" value="<?php echo esc_attr($pb_height); ?>" min="1" max="20" class="ustt-range-slider" id="pb-height-slider">
                                    </div>

                                    <!-- Space Above -->
                                    <div class="ustt-control-row">
                                        <div class="ustt-control-group">
                                            <label><?php esc_html_e('Space Above (px)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                            <input type="number" name="pb_space_above" value="<?php echo esc_attr($get_opt('pb_space_above', '0')); ?>" min="0" max="100" class="ustt-input-glass">
                                        </div>
                                        <div class="ustt-control-group">
                                            <label><?php esc_html_e('Space Below (px)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                            <input type="number" name="pb_space_below" value="<?php echo esc_attr($get_opt('pb_space_below', '0')); ?>" min="0" max="100" class="ustt-input-glass">
                                        </div>
                                    </div>

                                    <hr class="ustt-divider" style="margin: 20px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.06);">

                                    <!-- Display On -->
                                    <div class="ustt-control-group">
                                        <label><?php esc_html_e('Display On', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                        <div class="ustt-radio-group">
                                            <label class="ustt-radio-pill">
                                                <input type="radio" name="pb_display_on" value="all" <?php checked($get_opt('pb_display_on', 'all'), 'all'); ?>>
                                                <?php esc_html_e('All Pages', 'uply-scroll-to-top-and-progress-bar'); ?>
                                            </label>
                                            <label class="ustt-radio-pill">
                                                <input type="radio" name="pb_display_on" value="pages" <?php checked($get_opt('pb_display_on', 'all'), 'pages'); ?>>
                                                <?php esc_html_e('Pages Only', 'uply-scroll-to-top-and-progress-bar'); ?>
                                            </label>
                                            <label class="ustt-radio-pill">
                                                <input type="radio" name="pb_display_on" value="posts" <?php checked($get_opt('pb_display_on', 'all'), 'posts'); ?>>
                                                <?php esc_html_e('Posts Only', 'uply-scroll-to-top-and-progress-bar'); ?>
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <!-- Exclude Section -->
                                    <div class="ustt-control-group">
                                        <label><?php esc_html_e('Exclude', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                        
                                        <div class="ustt-accordion-wrapper">
                                            <!-- Exclude by ID -->
                                            <div class="ustt-accordion-item">
                                                <div class="ustt-accordion-header">
                                                    <span><?php esc_html_e('Specific Page IDs', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                                                </div>
                                                <div class="ustt-accordion-body">
                                                    <p class="description"><?php esc_html_e('Enter comma-separated IDs (e.g. 10, 25)', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                                                    <input type="text" name="pb_exclude_ids" value="<?php echo esc_attr($pb_exclude_ids); ?>" class="regular-text" placeholder="e.g. 5, 12">
                                                </div>
                                            </div>
                                            
                                            <!-- Exclude by Post Type -->
                                            <div class="ustt-accordion-item">
                                                <div class="ustt-accordion-header">
                                                    <span><?php esc_html_e('By Post Type', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                                                </div>
                                                <div class="ustt-accordion-body">
                                                    <?php 
                                                    $pb_excluded_types = $get_opt('pb_exclude_post_types', array());
                                                    foreach ($post_types as $pt): 
                                                    ?>
                                                    <label class="ustt-checkbox-block">
                                                        <input type="checkbox" name="pb_exclude_post_types[]" value="<?php echo esc_attr($pt->name); ?>" <?php checked(in_array($pt->name, $pb_excluded_types)); ?>>
                                                        <?php echo esc_html($pt->label); ?>
                                                    </label>
                                                    <?php endforeach; ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Read Time Tab -->
                    <div id="ustt-tab-read-time" class="ustt-tab-content">
                        


                        <div class="ustt-designer-wrap">
                            
                            <!-- Left Column: Templates -->
                            <div class="ustt-designer-col">
                                <h3 class="ustt-section-label"><?php esc_html_e('TEMPLATES', 'uply-scroll-to-top-and-progress-bar'); ?></h3>
                                <div class="ustt-template-grid ustt-rt-template-grid">
                                    <?php 
                                    foreach ($rt_templates as $key => $data): 
                                        // Define free keys for Read Time (1, 3, 18, 24, 15)
                                        $free_keys = array('ustt-rt-1', 'ustt-rt-3', 'ustt-rt-18', 'ustt-rt-24', 'ustt-rt-15');
                                        $is_premium_template = !in_array($key, $free_keys);
                                        $locked = $is_premium_template && !$is_pro;
                                    ?>
                                    <label class="ustt-template-item <?php echo esc_attr($locked ? 'ustt-locked' : ''); ?>" data-premium="<?php echo esc_attr($is_premium_template ? '1' : '0'); ?>">
                                        <input type="radio" name="rt_template" value="<?php echo esc_attr($key); ?>" <?php checked($rt_template, $key); ?> <?php echo esc_attr($locked ? 'disabled' : ''); ?>>
                                        <div class="ustt-template-box">
                                            <?php if ($locked): ?>
                                                <div class="ustt-lock-overlay">
                                                    <span class="dashicons dashicons-lock"></span>
                                                </div>
                                            <?php endif; ?>
                                            <?php echo wp_kses_post($data['html']); ?>
                                        </div>
                                    </label>
                                    <?php endforeach; ?>
                                </div>
                            </div>

                            <!-- Right Column: Customization -->
                            <div class="ustt-designer-col ustt-customize-col">
                                <h3 class="ustt-section-label"><?php esc_html_e('CUSTOMIZATION', 'uply-scroll-to-top-and-progress-bar'); ?></h3>

                                <!-- Enable & Save -->
                                <div class="ustt-sticky-actions">
                                    <div class="ustt-sticky-actions-inner">
                                        <div class="ustt-sticky-actions-left">
                                            <label class="ustt-switch">
                                                <input type="checkbox" name="rt_enable" value="1" <?php checked($rt_enable, '1'); ?>>
                                                <span class="ustt-slider round"></span>
                                            </label>
                                            <span class="ustt-toggle-label"><?php esc_html_e('Enable Reading Time', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                        </div>
                                        <button type="button" class="ustt-btn-primary" id="ustt-rt-save">
                                            <span class="dashicons dashicons-saved"></span>
                                            <?php esc_html_e('Save Changes', 'uply-scroll-to-top-and-progress-bar'); ?>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Settings Card -->
                                <div class="ustt-card ustt-settings-card">
                                    <div class="ustt-settings-header">
                                        <h3><?php esc_html_e('Settings', 'uply-scroll-to-top-and-progress-bar'); ?></h3>
                                    </div>
                                    <div class="ustt-settings-body">
                                        
                                        <!-- Color Pickers -->
                                        <div class="ustt-control-row">
                                            <div class="ustt-control-group">
                                                <label><?php esc_html_e('Text Color', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                <input type="text" name="rt_text_color" value="<?php echo esc_attr($rt_text_color); ?>" class="ustt-color-picker">
                                            </div>
                                            <div class="ustt-control-group">
                                                <label><?php esc_html_e('Background Color', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                <input type="text" name="rt_bg_color" value="<?php echo esc_attr($rt_bg_color); ?>" class="ustt-color-picker">
                                            </div>
                                        </div>
                                        
                                        <!-- Position -->
                                        <div class="ustt-control-group">
                                            <label><?php esc_html_e('Position', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                            <select name="rt_position" class="ustt-select">
                                                <option value="before_content" <?php selected($rt_position, 'before_content'); ?>><?php esc_html_e('Before Content', 'uply-scroll-to-top-and-progress-bar'); ?></option>
                                                <option value="after_content" <?php selected($rt_position, 'after_content'); ?>><?php esc_html_e('After Content', 'uply-scroll-to-top-and-progress-bar'); ?></option>
                                                <option value="both" <?php selected($rt_position, 'both'); ?>><?php esc_html_e('Both', 'uply-scroll-to-top-and-progress-bar'); ?></option>
                                            </select>
                                        </div>

                                        <!-- Typography & Spacing -->
                                        <div class="ustt-control-row">
                                            <div class="ustt-control-group">
                                                <label><?php esc_html_e('Font Size (px)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                <input type="number" name="rt_font_size" value="<?php echo esc_attr($rt_font_size); ?>" class="ustt-input-glass">
                                            </div>
                                            <div class="ustt-control-group">
                                                <label><?php esc_html_e('Padding (px)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                <input type="text" name="rt_padding" value="<?php echo esc_attr($rt_padding); ?>" class="ustt-input-glass">
                                            </div>
                                        </div>
                                        <div class="ustt-control-group">
                                            <label><?php esc_html_e('Margin (e.g. 10px 0)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                            <input type="text" name="rt_margin" value="<?php echo esc_attr($rt_margin); ?>" class="ustt-input-glass">
                                        </div>

                                        <hr class="ustt-divider" style="margin: 20px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.06);">

                                        <!-- WPM -->
                                        <div class="ustt-control-group">
                                            <label><?php esc_html_e('Reading Speed (WPM)', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                            <input type="number" name="rt_wpm" value="<?php echo esc_attr($rt_wpm); ?>" class="ustt-input-glass">
                                            <p class="ustt-description"><?php esc_html_e('Average is 200-250.', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                                        </div>
                                        
                                        <!-- Labels -->
                                        <div class="ustt-control-row">
                                            <div class="ustt-control-group">
                                                <label><?php esc_html_e('Prefix', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                <input type="text" name="rt_prefix" value="<?php echo esc_attr($rt_prefix); ?>" class="ustt-input-glass">
                                            </div>
                                            <div class="ustt-control-group">
                                                <label><?php esc_html_e('Postfix', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                                <input type="text" name="rt_postfix" value="<?php echo esc_attr($rt_postfix); ?>" class="ustt-input-glass">
                                            </div>
                                        </div>

                                        <hr class="ustt-divider" style="margin: 20px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.06);">

                                        <!-- Display On -->
                                        <div class="ustt-control-group">
                                            <label><?php esc_html_e('Display On', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                            <div class="ustt-radio-group">
                                                <label class="ustt-radio-pill">
                                                    <input type="radio" name="rt_display_on" value="all" <?php checked($get_opt('rt_display_on', 'all'), 'all'); ?>>
                                                    <?php esc_html_e('All', 'uply-scroll-to-top-and-progress-bar'); ?>
                                                </label>
                                                <label class="ustt-radio-pill">
                                                    <input type="radio" name="rt_display_on" value="pages" <?php checked($get_opt('rt_display_on', 'all'), 'pages'); ?>>
                                                    <?php esc_html_e('Pages', 'uply-scroll-to-top-and-progress-bar'); ?>
                                                </label>
                                                <label class="ustt-radio-pill">
                                                    <input type="radio" name="rt_display_on" value="posts" <?php checked($get_opt('rt_display_on', 'all'), 'posts'); ?>>
                                                    <?php esc_html_e('Posts', 'uply-scroll-to-top-and-progress-bar'); ?>
                                                </label>
                                            </div>
                                        </div>

                                        <!-- Exclude Section -->
                                        <div class="ustt-control-group">
                                            <label><?php esc_html_e('Exclude', 'uply-scroll-to-top-and-progress-bar'); ?></label>
                                            
                                            <div class="ustt-accordion-wrapper">
                                                <!-- Exclude by ID -->
                                                <div class="ustt-accordion-item">
                                                    <div class="ustt-accordion-header">
                                                        <span><?php esc_html_e('Specific Page IDs', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                                        <span class="dashicons dashicons-arrow-down-alt2"></span>
                                                    </div>
                                                    <div class="ustt-accordion-body">
                                                        <p class="description"><?php esc_html_e('Enter comma-separated IDs (e.g. 10, 25)', 'uply-scroll-to-top-and-progress-bar'); ?></p>
                                                        <input type="text" name="rt_exclude_ids" value="<?php echo esc_attr($rt_exclude_ids); ?>" class="regular-text" placeholder="e.g. 5, 12">
                                                    </div>
                                                </div>
                                                
                                                <!-- Exclude by Post Type -->
                                                <div class="ustt-accordion-item">
                                                    <div class="ustt-accordion-header">
                                                        <span><?php esc_html_e('By Post Type', 'uply-scroll-to-top-and-progress-bar'); ?></span>
                                                        <span class="dashicons dashicons-arrow-down-alt2"></span>
                                                    </div>
                                                    <div class="ustt-accordion-body">
                                                        <?php 
                                                        $rt_excluded_types = $get_opt('rt_exclude_post_types', array());
                                                        foreach ($post_types as $pt): 
                                                        ?>
                                                        <label class="ustt-checkbox-block">
                                                            <input type="checkbox" name="rt_exclude_post_types[]" value="<?php echo esc_attr($pt->name); ?>" <?php checked(in_array($pt->name, $rt_excluded_types)); ?>>
                                                            <?php echo esc_html($pt->label); ?>
                                                        </label>
                                                        <?php endforeach; ?>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </main>

            <!-- Footer -->
            <footer class="ustt-footer">
                <div class="ustt-footer-inner">
                    <div class="ustt-footer-brand">
                        <span class="dashicons dashicons-arrow-up-alt2"></span>
                        <span><?php esc_html_e('Uply WordPress Plugin', 'uply-scroll-to-top-and-progress-bar'); ?> © <?php echo esc_html(gmdate('Y')); ?></span>
                    </div>
                    <div class="ustt-footer-links">
                        <a href="#"><?php esc_html_e('Privacy Policy', 'uply-scroll-to-top-and-progress-bar'); ?></a>
                        <a href="#"><?php esc_html_e('Changelog', 'uply-scroll-to-top-and-progress-bar'); ?></a>
                    </div>
                </div>
            </footer>
        </div>
        <?php
    }

    /**
     * Helper to get Read Time Templates.
     */
    private function get_read_time_templates()
    {
        $rt_templates = array();
        // Define free IDs for Read Time (1, 3, 18, 24, 15 as requested)
        $free_ids = array(1, 3, 18, 24, 15);
        $pro_ids = array();
        for ($i = 1; $i <= 30; $i++) {
            if (!in_array($i, $free_ids)) {
                $pro_ids[] = $i;
            }
        }
        
        // Combine: Free first, then Pro
        $ordered_ids = array_merge($free_ids, $pro_ids);

        foreach ($ordered_ids as $id) {
            $rt_templates['ustt-rt-' . $id] = array(
                'html' => '<div class="ustt-read-time ustt-rt-' . $id . '"><span class="ustt-rt-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></span><span class="ustt-rt-text"><span class="ustt-rt-prefix">Reading Time:</span> <span class="ustt-rt-time">5 mins</span></span></div>',
                'id' => 'ustt-rt-' . $id
            );
        }
        return $rt_templates;
    }



    /**
     * Helper to get active tab based on current page slug.
     */
    private function get_active_tab_from_page()
    {
        $page = isset($_GET['page']) ? sanitize_text_field($_GET['page']) : '';
        
        switch ($page) {
            case 'ustt-stt':
                return 'scroll-to-top';
            case 'ustt-pb':
                return 'progress-bar';
            case 'ustt-rt':
                return 'read-time';
            case 'ustt-settings':
            default:
                // Return empty string to let JS handle localStorage or default
                return ''; 
        }
    }

    /**
     * Redirect to settings page upon activation.
     */
    public function activation_redirect()
    {
        if (get_transient('ustt_activation_redirect')) {
            delete_transient('ustt_activation_redirect');
            if (!isset($_GET['activate-multi'])) {
                wp_safe_redirect(admin_url('admin.php?page=ustt-settings&tab=overview'));
                exit;
            }
        }
    }

    /**
     * Add settings link to the plugin action links.
     *
     * @param array $links Array of links.
     * @return array Modified array of links.
     */
    public function add_action_links($links)
    {
        $settings_link = '<a href="' . admin_url('admin.php?page=ustt-settings') . '">' . __('Settings', 'uply-scroll-to-top-and-progress-bar') . '</a>';
        array_unshift($links, $settings_link);
        return $links;
    }

}
