<?php

namespace USTT;

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

/**
 * The public-facing functionality of the plugin.
 */
class Frontend
{

    /**
     * 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;

    /**
     * The plugin options.
     */
    private $options;

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

        $this->plugin_name = $plugin_name;
        $this->version = $version;
        $this->options = get_option('ustt_options', array());

    }

    /**
     * Register the stylesheets for the public-facing side of the site.
     */
    public function enqueue_styles()
    {
        wp_enqueue_style($this->plugin_name, USTT_URL . 'plugin-assets/public/css/ustt-public.css', array(), $this->version, 'all');
        wp_enqueue_style('ustt-templates', USTT_URL . 'plugin-assets/public/css/ustt-templates.css', array(), $this->version, 'all');
        wp_enqueue_style('ustt-read-time', USTT_URL . 'plugin-assets/public/css/ustt-read-time.css', array(), $this->version, 'all');

        // Inline styles for dynamic settings
        $custom_css = '';

        // Progress Bar Height & Position
        $pb_color = isset($this->options['pb_color']) ? sanitize_hex_color($this->options['pb_color']) : '#4F46E5';
        $pb_height = isset($this->options['pb_height']) ? intval($this->options['pb_height']) : 5;
        $pb_position = isset($this->options['pb_position']) ? $this->options['pb_position'] : 'top';
        $pb_custom_mode = isset($this->options['pb_custom_mode']) && $this->options['pb_custom_mode'] === '1';

        // Only set pb-color in custom builder mode; templates override background via their own CSS class
        if ($pb_custom_mode) {
            $custom_css .= ":root { --ustt-pb-color: {$pb_color}; --ustt-pb-height: {$pb_height}px; }";
        } else {
            $custom_css .= ":root { --ustt-pb-height: {$pb_height}px; }";
        }

        $pb_space_above = isset($this->options['pb_space_above']) ? intval($this->options['pb_space_above']) : 0;
        $pb_space_below = isset($this->options['pb_space_below']) ? intval($this->options['pb_space_below']) : 0;

        if ($pb_position === 'top') {
            if ($pb_space_above > 0) {
                $custom_css .= ".ustt-progress-bar { top: {$pb_space_above}px; }";
            }
        } elseif ($pb_position === 'bottom') {
            $bottom_val = $pb_space_below > 0 ? "{$pb_space_below}px" : "0";
            $custom_css .= ".ustt-progress-bar { top: auto; bottom: {$bottom_val}; }";
        }

        // Scroll to Top Position
        $stt_position = isset($this->options['stt_position']) ? $this->options['stt_position'] : 'right';
        if ($stt_position === 'left') {
            $custom_css .= ".ustt-scroll-to-top { right: auto; left: 20px; }";
        }

        // Mobile Visibility
        if (!isset($this->options['stt_mobile']) || $this->options['stt_mobile'] !== '1') {
            $custom_css .= "@media (max-width: 768px) { .ustt-scroll-to-top { display: none !important; } }";
        }

        // --- INJECT SCROLL TO TOP SCALING CSS ---
        // Moved here from render_global_elements because wp_add_inline_style must run before styles are printed.
        
        $stt_icon = isset($this->options['stt_icon']) ? $this->options['stt_icon'] : 'ustt-btn-1';
        
        // Base Sizes Map (Must match Admin)
        $base_sizes = array(
            'ustt-btn-1' => 60, 'ustt-btn-2' => 65, 'ustt-btn-3' => 70, 'ustt-btn-4' => 70, 'ustt-btn-5' => 80,
            'ustt-btn-6' => 70, 'ustt-btn-7' => 75, 'ustt-btn-8' => 70, 'ustt-btn-9' => 70, 'ustt-btn-10' => 65,
            'ustt-btn-11' => 75, 'ustt-btn-12' => 70, 'ustt-btn-13' => 70, 'ustt-btn-14' => 75, 'ustt-btn-15' => 60,
            'ustt-btn-16' => 70, 'ustt-btn-17' => 75, 'ustt-btn-18' => 75,
            // New Black & White Collection
            'ustt-btn-19' => 65, 'ustt-btn-20' => 70, 'ustt-btn-21' => 68, 'ustt-btn-22' => 70, 'ustt-btn-23' => 65,
            'ustt-btn-24' => 70, 'ustt-btn-25' => 70, 'ustt-btn-26' => 70, 'ustt-btn-27' => 70, 'ustt-btn-28' => 65,
            'ustt-btn-29' => 70, 'ustt-btn-30' => 68, 'ustt-btn-31' => 70, 'ustt-btn-32' => 70, 'ustt-btn-33' => 68,
            'ustt-btn-34' => 70, 'ustt-btn-35' => 70, 'ustt-btn-36' => 68, 'ustt-btn-37' => 70, 'ustt-btn-38' => 65,
            
            // Scroll Progress Collection (39-70)
            // Set 1
            'ustt-btn-39' => 80, 'ustt-btn-40' => 100, 'ustt-btn-41' => 75, 'ustt-btn-42' => 85, 'ustt-btn-43' => 88,
            'ustt-btn-44' => 85, 'ustt-btn-45' => 90, 'ustt-btn-46' => 90, 'ustt-btn-47' => 100, 'ustt-btn-48' => 85,
            'ustt-btn-49' => 85, 'ustt-btn-50' => 100,
            // Set 2
            'ustt-btn-51' => 80, 'ustt-btn-52' => 100, 'ustt-btn-53' => 75, 'ustt-btn-54' => 85, 'ustt-btn-55' => 88,
            'ustt-btn-56' => 88, 'ustt-btn-57' => 90, 'ustt-btn-58' => 90, 'ustt-btn-59' => 100, 'ustt-btn-60' => 85,
            'ustt-btn-61' => 85, 'ustt-btn-62' => 100, 'ustt-btn-63' => 85, 'ustt-btn-64' => 95, 'ustt-btn-65' => 85,
            'ustt-btn-66' => 85, 'ustt-btn-67' => 85, 'ustt-btn-68' => 85, 'ustt-btn-69' => 100, 'ustt-btn-70' => 88
        );
        
        $base_size = isset($base_sizes[$stt_icon]) ? $base_sizes[$stt_icon] : 60;
        $user_size = isset($this->options['stt_size']) ? intval($this->options['stt_size']) : 48;
        
        // Calculate Scale
        $scale = $user_size / $base_size;
        
        // Determine Transform Origin based on position
        $origin = ($stt_position === 'left') ? 'bottom left' : 'bottom right'; // $stt_position is defined above

        $margin_bottom = isset($this->options['stt_margin_bottom']) ? intval($this->options['stt_margin_bottom']) : 20;
        $margin_side = isset($this->options['stt_margin_side']) ? intval($this->options['stt_margin_side']) : 20;
        
        $side_prop = ($stt_position === 'left') ? 'left' : 'right';
        $side_css = "{$side_prop}: {$margin_side}px;";

        // Update: Apply transform to the NEW SCALE WRAPPER (.ustt-scale-wrapper)
        $custom_css .= "
            #ustt-scroll-to-top {
                bottom: {$margin_bottom}px;
                {$side_css}
            }
            #ustt-scroll-to-top .ustt-scale-wrapper {
                transform: scale({$scale});
                transform-origin: {$origin};
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }
        ";

        // --- READ TIME CUSTOMIZATION ---
        if ($this->should_display_feature('rt')) {
            $rt_font_size = isset($this->options['rt_font_size']) ? intval($this->options['rt_font_size']) : 16;
            $rt_margin = isset($this->options['rt_margin']) ? $this->options['rt_margin'] : '10px 0';
            $rt_padding = isset($this->options['rt_padding']) ? $this->options['rt_padding'] : '5px';
            $rt_text_color = isset($this->options['rt_text_color']) ? $this->options['rt_text_color'] : '';
            $rt_bg_color = isset($this->options['rt_bg_color']) ? $this->options['rt_bg_color'] : '';

            $custom_css .= "
                .ustt-read-time {
                    font-size: {$rt_font_size}px;
                    margin: {$rt_margin};
                    padding: {$rt_padding};
            ";
            
            if ($rt_text_color) {
                $custom_css .= "color: {$rt_text_color} !important;";
            }
            if ($rt_bg_color) {
                $custom_css .= "background-color: {$rt_bg_color} !important;";
                $custom_css .= "border-color: {$rt_bg_color} !important;"; 
            }
            
            $custom_css .= "}";

            // Force color on children elements to override template specifics
            if ($rt_text_color) {
                $custom_css .= "
                    .ustt-read-time .ustt-rt-icon,
                    .ustt-read-time .ustt-rt-text,
                    .ustt-read-time .ustt-rt-prefix,
                    .ustt-read-time .ustt-rt-time,
                    .ustt-read-time span,
                    .ustt-read-time svg {
                        color: {$rt_text_color} !important;
                        fill: {$rt_text_color} !important; /* For SVGs explicitly filled */
                        stroke: {$rt_text_color} !important; /* For SVGs explicitly stroked */
                    }
                    /* Reset fill for icon if it relies on none */
                    .ustt-read-time .ustt-rt-icon svg {
                         fill: none !important;
                         stroke: {$rt_text_color} !important;
                    }
                ";
            }
        }

        wp_add_inline_style($this->plugin_name, $custom_css);
    }

    /**
     * Register the JavaScript for the public-facing side of the site.
     */
    public function enqueue_scripts()
    {
        wp_enqueue_script($this->plugin_name, USTT_URL . 'plugin-assets/public/js/ustt-public.js', array('jquery'), $this->version, true);
    }

    /**
     * Render Scroll to Top and Progress Bar.
     */
    public function render_global_elements()
    {
        $is_pro = false;
        if (function_exists(__NAMESPACE__ . '\\usttapb_fs')) {
            $is_pro = usttapb_fs()->can_use_premium_code();
        }

        // Render Scroll to Top
        if ($this->should_display_feature('stt')) {
            // Get selected icon template
            $stt_icon = isset($this->options['stt_icon']) ? $this->options['stt_icon'] : 'ustt-btn-1';

            // Gating: If not pro, enforce a free template if current selection is pro
            // Gating: If not pro, enforce a free template if current selection is pro
            $free_stt_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');
            if (!$is_pro && !in_array($stt_icon, $free_stt_keys)) {
                $stt_icon = 'ustt-btn-1'; // Fallback to first free template
            }
            
            // Templates Configuration (Must match Admin)
            // WRAPPER STRATEGY: 
            // - #ustt-scroll-to-top (Wrapper): Handles position (fixed), opacity, visibility, and Y-translation.
            // - .ustt-scale-wrapper (Scale): Handles the user-defined sizing (transform: scale).
            // - .ustt-template-inner (Inner): Handles the specific design and hover animations.
            $templates = array(
                'ustt-btn-1' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-1 ustt-template-inner"></button></div></div>',
                'ustt-btn-2' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-2 ustt-template-inner"></button></div></div>',
                'ustt-btn-3' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-3 ustt-template-inner"><div class="ustt-btn-3-glow"></div></button></div></div>',
                'ustt-btn-4' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-4 ustt-template-inner"></button></div></div>',
                'ustt-btn-5' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-5 ustt-template-inner"></button></div></div>',
                'ustt-btn-6' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-6 ustt-template-inner"></button></div></div>',
                'ustt-btn-7' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-7 ustt-template-inner"></button></div></div>',
                'ustt-btn-8' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-8 ustt-template-inner"></button></div></div>',
                'ustt-btn-9' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-10' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-10 ustt-template-inner">↑</button></div></div>',
                'ustt-btn-11' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-11 ustt-template-inner"></button></div></div>',
                'ustt-btn-12' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-12 ustt-template-inner"><span class="ustt-btn-12-arrow">↑</span></button></div></div>',
                'ustt-btn-13' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-13 ustt-template-inner"></button></div></div>',
                'ustt-btn-14' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-14 ustt-template-inner"></button></div></div>',
                'ustt-btn-15' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-15 ustt-template-inner"></button></div></div>',
                'ustt-btn-16' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-16 ustt-template-inner"></button></div></div>',
                'ustt-btn-17' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-17 ustt-template-inner"></button></div></div>',
                'ustt-btn-18' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-18 ustt-template-inner"><span class="ustt-btn-18-arrow">↑</span></button></div></div>',
                // New Black & White Collection (19-38)
                'ustt-btn-19' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-19 ustt-template-inner"></button></div></div>',
                'ustt-btn-20' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-20 ustt-template-inner"></button></div></div>',
                'ustt-btn-21' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-21 ustt-template-inner"></button></div></div>',
                'ustt-btn-22' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-22 ustt-template-inner"></button></div></div>',
                'ustt-btn-23' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-23 ustt-template-inner"></button></div></div>',
                'ustt-btn-24' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-24 ustt-template-inner"></button></div></div>',
                'ustt-btn-25' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-25 ustt-template-inner"></button></div></div>',
                'ustt-btn-26' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-26 ustt-template-inner"></button></div></div>',
                'ustt-btn-27' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-27 ustt-template-inner"></button></div></div>',
                'ustt-btn-28' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-28 ustt-template-inner"></button></div></div>',
                'ustt-btn-29' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-29 ustt-template-inner"></button></div></div>',
                'ustt-btn-30' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-30 ustt-template-inner"></button></div></div>',
                'ustt-btn-31' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-31 ustt-template-inner"></button></div></div>',
                'ustt-btn-32' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-32 ustt-template-inner"><div class="ustt-btn-32-arrow2"></div></button></div></div>',
                'ustt-btn-33' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-33 ustt-template-inner"><span class="ustt-btn-33-arrow">↑</span></button></div></div>',
                'ustt-btn-34' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-34 ustt-template-inner"></button></div></div>',
                'ustt-btn-35' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-35 ustt-template-inner"><span class="ustt-btn-35-arrow">↑</span></button></div></div>',
                'ustt-btn-36' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-36 ustt-template-inner"></button></div></div>',
                'ustt-btn-37' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-37 ustt-template-inner"></button></div></div>',
                'ustt-btn-38' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-wrapper"><button class="ustt-btn-38 ustt-template-inner"></button></div></div>',

                // Scroll Progress Collection (39-70)
                // Set 1: Black & White
                'ustt-btn-39' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-40' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-41' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-42' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-43' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-44' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-45' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-46' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-47' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-48' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-49' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-50' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',

                // Set 2: Off-White
                'ustt-btn-51' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-52' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-53' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-54' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-55' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-56' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-57' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-58' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-59' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-60' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-61' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-62' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-63' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-64' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-65' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-66' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-67' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-68' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-69' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
                'ustt-btn-70' => '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top" aria-label="' . esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar') . '"><div class="ustt-scale-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></div>',
            );

            // Check if custom mode is enabled
            $custom_mode = isset($this->options['stt_custom_mode']) && $this->options['stt_custom_mode'] === '1';
            
            if ($custom_mode) {
                // CUSTOM BUTTON MODE
                $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>',
                );
                
                $selected_icon_key = isset($this->options['stt_custom_icon']) ? $this->options['stt_custom_icon'] : 'rocket-solid';
                $selected_icon_svg = isset($custom_icons[$selected_icon_key]) ? $custom_icons[$selected_icon_key] : $custom_icons['rocket-solid'];
                
                $icon_color = isset($this->options['stt_custom_icon_color']) ? $this->options['stt_custom_icon_color'] : '#ffffff';
                $bg_enable = isset($this->options['stt_custom_bg_enable']) && $this->options['stt_custom_bg_enable'] === '1';
                $bg_color = isset($this->options['stt_custom_bg_color']) ? $this->options['stt_custom_bg_color'] : '#3b82f6';
                $bg_radius = isset($this->options['stt_custom_bg_radius']) ? intval($this->options['stt_custom_bg_radius']) : 8;
                
                $border_enable = isset($this->options['stt_custom_border_enable']) && $this->options['stt_custom_border_enable'] === '1';
                $border_color = isset($this->options['stt_custom_border_color']) ? $this->options['stt_custom_border_color'] : '#ffffff';
                $border_width = isset($this->options['stt_custom_border_width']) ? intval($this->options['stt_custom_border_width']) : 2;
                
                $hover_icon_color = isset($this->options['stt_custom_hover_icon_color']) ? $this->options['stt_custom_hover_icon_color'] : '#000000';
                $hover_bg_color = isset($this->options['stt_custom_hover_bg_color']) ? $this->options['stt_custom_hover_bg_color'] : '#60a5fa';
                
                $user_size = isset($this->options['stt_size']) ? intval($this->options['stt_size']) : 48;
                $icon_size = $user_size * 0.5;
                
                $border_style = $border_enable ? "{$border_width}px solid {$border_color}" : 'none';
                $final_bg_color = $bg_enable ? $bg_color : 'transparent';
                
                // Build custom button HTML
                $html = sprintf(
                    '<div id="ustt-scroll-to-top" class="ustt-scroll-to-top ustt-custom-button" aria-label="%s">
                        <div class="ustt-scale-wrapper">
                            <button class="ustt-custom-btn ustt-template-inner" style="background-color:%s;color:%s;width:%spx;height:%spx;border-radius:%spx;border:%s;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;padding:0;box-sizing:border-box;">
                                <span class="ustt-custom-icon" style="width:%spx;height:%spx;display:flex;align-items:center;justify-content:center;">%s</span>
                            </button>
                        </div>
                        <style>
                            .ustt-custom-btn:hover {
                                background-color: %s !important;
                                color: %s !important;
                            }
                            .ustt-custom-icon svg {
                                width: 100%%;
                                height: 100%%;
                            }
                        </style>
                    </div>',
                    esc_attr__('Scroll to Top', 'uply-scroll-to-top-and-progress-bar'),
                    esc_attr($final_bg_color),
                    esc_attr($icon_color),
                    esc_attr($user_size),
                    esc_attr($user_size),
                    esc_attr($bg_radius),
                    esc_attr($border_style),
                    esc_attr($icon_size),
                    esc_attr($icon_size),
                    $selected_icon_svg, 
                    esc_attr($bg_enable ? $hover_bg_color : 'transparent'),
                    esc_attr($hover_icon_color)
                );
                
                echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- All dynamic values are escaped individually via esc_attr() above.
            } else {
                // TEMPLATE MODE (existing logic)
                // Default fallback
                $html = isset($templates[$stt_icon]) ? $templates[$stt_icon] : $templates['ustt-btn-1'];
                
                echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Hardcoded template HTML array with no user input.
            } 
        }

        // Render Progress Bar
        if ($this->should_display_feature('pb')) {
            $pb_custom_mode_val = isset($this->options['pb_custom_mode']) && $this->options['pb_custom_mode'] === '1';
            $pb_template = isset($this->options['pb_template']) ? sanitize_html_class($this->options['pb_template']) : 'ustt-pb-1';

            // Gating: If not pro, enforce a free template if current selection is pro
            $free_pb_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');
            if (!$is_pro && !in_array($pb_template, $free_pb_keys)) {
                $pb_template = 'ustt-pb-1'; // Fallback to first free template
            }

            if ($pb_custom_mode_val) {
                // Custom mode: plain bar with user-selected color via CSS variable
                echo '<div class="ustt-progress-bar" id="ustt-progress-bar"></div>';
            } else {
                // Template mode: add the template class for styled animations
                echo '<div class="ustt-progress-bar ' . esc_attr($pb_template) . '" id="ustt-progress-bar"></div>';
            }
        }
    }

    /**
     * Inject Read Time.
     */
    public function inject_read_time($content)
    {
        if (!$this->should_display_feature('rt')) {
            return $content;
        }

        // Only inject on single posts/pages as configured, loops can be messy unless specifically targeted
        if (!is_singular() && !in_the_loop()) {
             return $content;
        }

        // Generate HTML
        $html = $this->generate_read_time_html($content);

        // Position
        $position = isset($this->options['rt_position']) ? $this->options['rt_position'] : 'before_content';

        // Prepend/Append based on position
        if ($position === 'before_content') {
            return $html . $content;
        } elseif ($position === 'after_content') {
            return $content . $html;
        } else {
            return $html . $content . $html;
        }
    }

    /**
     * Shortcode for Read Time.
     * Usage: [ustt_read_time]
     */
    public function read_time_shortcode($atts)
    {
        // Force calculation on current post content
        $content = get_the_content();
        
        // Use existing logic but don't append/prepend to content, just return HTML
        return $this->generate_read_time_html($content);
    }

    /**
     * Generate HTML for Read Time.
     * Helper to reuse logic for both auto-inject and shortcode.
     */
    private function generate_read_time_html($content)
    {
        // Calculate Time
        $wpm = isset($this->options['rt_wpm']) ? intval($this->options['rt_wpm']) : 200;
        if ($wpm < 1) $wpm = 200; 

        $text_only = wp_strip_all_tags($content);
        $word_count = str_word_count($text_only);
        $time = ceil($word_count / $wpm);
        $time_str = $time . ' ' . (isset($this->options['rt_postfix']) ? $this->options['rt_postfix'] : __('mins', 'uply-scroll-to-top-and-progress-bar'));

        $prefix = isset($this->options['rt_prefix']) ? $this->options['rt_prefix'] : __('Reading Time:', 'uply-scroll-to-top-and-progress-bar');
        
        $template_id = isset($this->options['rt_template']) ? $this->options['rt_template'] : 'ustt-rt-1';

        // Gating: If not pro, enforce a free template if current selection is pro
        $is_pro = false;
        if (function_exists(__NAMESPACE__ . '\\usttapb_fs')) {
            $is_pro = usttapb_fs()->can_use_premium_code();
        }
        $free_rt_keys = array('ustt-rt-1', 'ustt-rt-3', 'ustt-rt-18', 'ustt-rt-24', 'ustt-rt-15');
        if (!$is_pro && !in_array($template_id, $free_rt_keys)) {
            $template_id = 'ustt-rt-1'; // Fallback to first free template
        }
        
        $html = '<p class="ustt-rt-wrapper">';
        $html .= '<span class="ustt-read-time ' . esc_attr($template_id) . '">';
        $html .= '<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>';
        $html .= '<span class="ustt-rt-text">';
        if ($prefix) {
            $html .= '<span class="ustt-rt-prefix">' . esc_html($prefix) . ' </span>';
        }
        $html .= '<span class="ustt-rt-time">' . esc_html($time_str) . '</span>';
        $html .= '</span>'; 
        $html .= '</span>';
        $html .= '</p>';
        
        return $html;
    }

    /**
     * Check if current page is excluded.
     * 
     * @param string $feature 'stt', 'pb', or 'rt'
     */
    private function is_page_excluded($feature)
    {
        $key = $feature . '_exclude_ids';
        if (!isset($this->options[$key]) || empty($this->options[$key])) {
            return false;
        }

        $current_id = get_the_ID();
        $excluded_ids_raw = $this->options[$key]; 

        // The option might be stored as a comma-separated string or array depending on save logic, 
        // but now our Admin class saves exclusion IDs as a string "1, 2, 3".
        if (is_string($excluded_ids_raw)) {
            $excluded_ids = explode(',', $excluded_ids_raw);
        } elseif (is_array($excluded_ids_raw)) {
             $excluded_ids = $excluded_ids_raw;
        } else {
            return false;
        }

        $excluded_ids = array_map('trim', $excluded_ids);
        
        // Check both string and integer matches
        return in_array((string) $current_id, $excluded_ids) || in_array($current_id, $excluded_ids);
    }

    /**
     * Determine if a feature should be displayed on the current page/post.
     * Checks: Enable, Display On Mode, Excluded Post Types, Excluded IDs.
     *
     * @param string $feature 'stt', 'pb', or 'rt'
     * @return bool
     */
    private function should_display_feature($feature)
    {
        // 1. Check Enable
        $key_enable = $feature . '_enable';
        if (!isset($this->options[$key_enable]) || $this->options[$key_enable] !== '1') {
            return false;
        }

        $current_post_type = get_post_type();
        if (!$current_post_type) {
             // Fallback for 404 or unknown scenarios where get_post_type() returns false
             if (is_404()) return false;
             $current_post_type = 'page'; 
        }

        // 2. Display On Condition (all, pages, posts)
        $key_display = $feature . '_display_on';
        $display_on = isset($this->options[$key_display]) ? $this->options[$key_display] : 'all';
        
        if ($display_on === 'pages') {
            if (!is_page()) return false;
        } elseif ($display_on === 'posts') {
            if (!is_single() || $current_post_type !== 'post') return false;
        }

        // 3. Exclude Post Types
        $key_exclude_types = $feature . '_exclude_post_types';
        $excluded_types = isset($this->options[$key_exclude_types]) ? $this->options[$key_exclude_types] : array();
        
        if (is_array($excluded_types) && in_array($current_post_type, $excluded_types)) {
            return false;
        }

        // 4. Exclude Specific IDs
        if ($this->is_page_excluded($feature)) {
            return false;
        }

        return true;
    }

}
