Theme Documentation

Everything you need to install, configure, and launch your casino affiliate empire using Spin Pulse.

1. Theme Installation

Before installing the theme, ensure your server meets the modern WordPress requirements (PHP 8.0+ and WordPress 6.0+).

Important: Do not upload the entire zip file you downloaded from ThemeForest. You must extract it first to locate the installable theme files.

  • 1. Log into your WordPress Dashboard.
  • 2. Navigate to Appearance > Themes and click Add New.
  • 3. Click Upload Theme and choose the spin-pulse.zip file.
  • 4. Click Install Now, but do not activate it yet.
  • 5. Return to the Themes page, click Add New again, and upload the spin-pulse-child.zip file.
  • 6. Install and Activate the Child Theme.

2. Required Plugins

After activating the theme, you will see a prompt at the top of your dashboard to install required plugins.

  • Spin Pulse Core: (Required) Handles custom post types like Casino Reviews and Games.
  • One Click Demo Import: (Required) Used to import the demo layouts.

Click Begin installing plugins, select all of them, choose "Install" from the bulk actions dropdown, and click Apply. Once installed, bulk activate them.


3. Import Demo Data

The easiest way to set up your site is to import our pre-built demo data.

  • 1. Ensure all required plugins are installed and activated.
  • 2. Go to Appearance > Import Demo Data.
  • 3. Click the Import Demo Data button beneath the Spin Pulse screenshot.
  • 4. On the next screen, you can skip the recommended third-party plugins. Click Continue & Import.

Please wait up to 3-5 minutes for the importer to download images and configure the site. Do not refresh the page.


4. Theme Settings Panel

Spin Pulse comes with a powerful custom settings dashboard. Navigate to Spin Pulse Settings in your WordPress admin sidebar.

  • Homepage Hero: Update headings, background images, and trust badges.
  • Footer Settings: Customize column titles, logos, and compliance badges.
  • Colors: Easily change background, text, and accent colors without touching CSS.

5. Homepage Setup

Option A: The Affiliate Landing Page

If you imported the demo data, your site will automatically display the Hero Section, Trust Badges, and Feature Grids configured in the Spin Pulse Settings panel.

Option B: Modern Blog Grid

If you prefer a traditional blog layout:

  • 1. Go to Settings > Reading.
  • 2. Set "Your homepage displays" to Your latest posts.
  • 3. Save changes.

6. Advanced (Tailwind CSS)

Spin Pulse is built using Tailwind CSS. If you are a developer and wish to compile your own utility classes, use the included package.json file.

  • 1. Open terminal and navigate to the theme directory.
  • 2. Run npm install
  • 3. Run npm run build to compile to dist/output.css

7. Developer Reference (functions.php)

Below is the core functions.php file shipped with Spin Pulse. This file handles theme setup, dynamic CSS generation from the options panel, Walker Nav Menus, widget areas, and the integration of the One Click Demo Importer and TGM Plugin Activation.

<?php
/**
 * Spin Pulse functions and definitions
 *
 * @package Spin_Pulse
 */

if (!defined('_S_VERSION')) {
    define('_S_VERSION', filemtime(get_template_directory() . '/style.css') ?: '1.0.0');
}

/**
 * 1. THEME SETUP
 */
function spin_pulse_setup() {
    load_theme_textdomain('spin-pulse', get_template_directory() . '/languages');
    add_theme_support('automatic-feed-links');
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    
    // ThemeForest Requirement: Set content width
    global $content_width;
    if ( ! isset( $content_width ) ) {
        $content_width = 1200;
    }
    
    // Registered Main & Footer Menus
    register_nav_menus(array(
        'menu-1'        => esc_html__('Primary Menu', 'spin-pulse'),
        'footer-menu-1' => esc_html__('Footer Menu 1 (About us)', 'spin-pulse'),
        'footer-menu-2' => esc_html__('Footer Menu 2 (Casino reviews)', 'spin-pulse'),
        'footer-menu-3' => esc_html__('Footer Menu 3 (Game guides)', 'spin-pulse'),
        'footer-menu-5' => esc_html__('Footer Menu 5 (Resources)', 'spin-pulse'),
    ));
    
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script', 'navigation-widgets'));
    add_theme_support('custom-logo', array('height' => 250, 'width' => 250, 'flex-width' => true, 'flex-height' => true));
    add_theme_support('responsive-embeds');
}
add_action('after_setup_theme', 'spin_pulse_setup');


/**
 * 2. CONSOLIDATED ASSETS ENQUEUE & DYNAMIC CSS
 * THEMEFOREST FIX: Combined 6 enqueue hooks into 1 and used wp_add_inline_style
 */
function spin_pulse_enqueue_assets() {
    // Fonts & External Styles
    wp_enqueue_style('spin-pulse-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap', array(), null);
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css', array(), '6.5.0');
    
    // Main Stylesheet
    wp_enqueue_style('spin-pulse-style', get_stylesheet_uri(), array(), _S_VERSION);

    // Scripts
    if (file_exists(get_template_directory() . '/js/navigation.js')) {
        wp_enqueue_script('spin-pulse-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true);
    }
    wp_enqueue_script('spin-pulse-compare', get_template_directory_uri() . '/js/casino-compare.js', array(), _S_VERSION, true);
    wp_enqueue_script('spin-pulse-faq-toggle', get_template_directory_uri() . '/js/faq-toggle.js', array(), _S_VERSION, true);
    wp_enqueue_script('sp-table-expand', get_template_directory_uri() . '/js/sp-table-expand.js', array(), _S_VERSION, true);
    wp_enqueue_script('sp-custom-js', get_template_directory_uri() . '/js/sp-scripts.js', array(), _S_VERSION, true);
    wp_enqueue_script('sp-arrow-scripts', get_template_directory_uri() . '/js/sp-arrow-scripts.js', array(), _S_VERSION, true);
    wp_enqueue_script('sp-admin-media', get_template_directory_uri() . '/js/admin-media.js', array(), _S_VERSION, true);
    wp_enqueue_script('sp-customizer', get_template_directory_uri() . '/js/customizer.js', array(), _S_VERSION, true);
    wp_enqueue_script('sp-progress-bar', get_template_directory_uri() . '/js/progress-bar.js', array(), _S_VERSION, true);

    // --- GENERATE DYNAMIC INLINE CSS ---
    $dynamic_css = '';

    // Menu & Footer Mods
    $h_text = get_theme_mod('spin_pulse_menu_link_color', '#ffffff');
    $sub_bg = get_theme_mod('spin_pulse_submenu_bg_color', '#111827');
    $sub_text = get_theme_mod('spin_pulse_submenu_link_color', '#ffffff');
    $sub_hover = get_theme_mod('spin_pulse_submenu_hover_color', '#a855f7');
    $f_bg = get_theme_mod('spin_pulse_footer_bg_color', '#0B0F1A');
    $f_text = get_theme_mod('spin_pulse_footer_text_color', '#ffffff');
    
    $dynamic_css .= "
        .main-menu-link, .site-title a { color: {$h_text} !important; }
        .sub-menu { background-color: {$sub_bg} !important; }
        .sub-menu-link { color: {$sub_text} !important; }
        .sub-menu-link:hover { color: {$sub_hover} !important; }
        #colophon.site-footer { background-color: {$f_bg} !important; color: {$f_text} !important; }
        #masthead button svg { color: {$h_text}; }
    ";

    // Footer Options
    $f_opts = get_option('spin_pulse_footer_settings', array());
    $c_f_bg = !empty($f_opts['color_footer_bg']) ? $f_opts['color_footer_bg'] : '#0f172a'; 
    $c_f_text = !empty($f_opts['color_footer_text']) ? $f_opts['color_footer_text'] : '#ffff';
    $c_f_head = !empty($f_opts['color_footer_heading']) ? $f_opts['color_footer_heading'] : '#ffff';
    $c_f_link = !empty($f_opts['color_footer_link']) ? $f_opts['color_footer_link'] : '#ffff';
    $c_f_hover = !empty($f_opts['color_footer_hover']) ? $f_opts['color_footer_hover'] : '#4f46e5';
    $c_f_div = !empty($f_opts['color_footer_divider']) ? $f_opts['color_footer_divider'] : '#e2e2ea';

    $dynamic_css .= "
        .sp-footer-wrapper { background-color: {$c_f_bg}; border-top-color: {$c_f_div}; color: {$c_f_text}; }
        .sp-footer-heading, .sp-footer-address-title { color: {$c_f_head}; }
        .sp-footer-desc, .sp-footer-address, .sp-footer-copy-text { color: {$c_f_text}; }
        .sp-footer-menu a { color: {$c_f_link}; }
        .sp-footer-menu a:hover { color: {$c_f_hover}; }
        .sp-footer-divider { background-color: {$c_f_div}; }
        .sp-footer-legacy-menu a { color: {$c_f_text}; }
        .sp-footer-legacy-menu a:hover { color: {$c_f_hover}; }
        .sp-footer-badges-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; align-items: center; margin-bottom: 30px; }
        .sp-footer-badge-img { max-height: 40px; width: auto; object-fit: contain; }
        @media (max-width: 768px) { .sp-footer-badges-row { gap: 15px; } .sp-footer-badge-img { max-height: 30px; } }
    ";

    // Search Card Options
    $s_opts = get_option('spin_pulse_search_settings', array());
    $c_s_bg = !empty($s_opts['search_card_bg']) ? $s_opts['search_card_bg'] : '#ffffff';
    $c_s_title = !empty($s_opts['search_card_title']) ? $s_opts['search_card_title'] : '#0f172a';
    $c_s_hover = !empty($s_opts['search_card_title_hover']) ? $s_opts['search_card_title_hover'] : '#00d67d';
    $c_s_excerpt = !empty($s_opts['search_card_excerpt']) ? $s_opts['search_card_excerpt'] : '#64748b';
    $c_s_badge = !empty($s_opts['search_badge_bg']) ? $s_opts['search_badge_bg'] : '#1e1b4b';

    $dynamic_css .= "
        .sp-search-card { background-color: {$c_s_bg}; }
        .sp-search-card-title { color: {$c_s_title}; }
        .sp-search-card:hover .sp-search-card-title,
        .sp-search-card:hover .sp-search-card-readmore { color: {$c_s_hover}; }
        .sp-search-card-author { color: {$c_s_hover}; }
        .sp-search-card:hover .sp-search-card-icon { background-color: {$c_s_hover}1A; } 
        .sp-search-card-excerpt { color: {$c_s_excerpt}; }
        .sp-search-badge { background-color: {$c_s_badge}; }
    ";

    // Attach dynamic CSS to the main stylesheet safely
    wp_add_inline_style('spin-pulse-style', $dynamic_css);
}
add_action('wp_enqueue_scripts', 'spin_pulse_enqueue_assets');


/**
 * 3. CUSTOM WALKER (Badges & Colors)
 */
class Spin_Pulse_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = null) {
        $sub_bg = get_theme_mod('spin_pulse_submenu_bg_color', '#111827');
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu absolute left-0 top-[calc(100%-2px)] hidden group-hover:block w-60 border-t-2 border-purple-500 shadow-2xl py-3 z-50 rounded-b-xl animate-slide-down\" style=\"background-color: " . esc_attr($sub_bg) . ";\">\n";
    }

    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $classes = empty($item->classes) ? array() : (array) $item->classes;
        $has_children = in_array('menu-item-has-children', $classes);
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $output .= '<li class="' . esc_attr($class_names) . ' relative group">';

        $title = apply_filters('the_title', $item->title, $item->ID);
        $badges = ['{New}' => 'bg-emerald-500', '{Top}' => 'bg-rose-500', '{Best}' => 'bg-amber-500'];
        
        foreach ($badges as $tag => $bg_class) {
            if (strpos($title, $tag) !== false) {
                $clean_tag = str_replace(['{', '}'], '', $tag);
                $badge_html = '<span class="absolute -top-1 left-4 px-1.5 py-0.5 rounded text-[9px] font-black uppercase ' . esc_attr($bg_class) . ' text-white shadow-sm z-10">' . esc_html($clean_tag) . '</span>';
                $title = str_replace($tag, '', $title) . $badge_html;
            }
        }

        $arrow = ($depth === 0 && $has_children) ? '<svg class="w-4 h-4 ml-1.5 opacity-60 group-hover:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>' : '';

        $h_text = get_theme_mod('spin_pulse_menu_link_color', '#ffffff');
        $sub_text = get_theme_mod('spin_pulse_submenu_link_color', '#ffffff');
        $attributes = !empty($item->url) ? ' href="' . esc_url($item->url) . '"' : '';

        if ($depth > 0) {
            $link_style = "color: " . esc_attr($sub_text) . ";";
            $link_class = 'block px-6 py-2.5 text-[13px] font-medium hover:bg-white/5 hover:pl-7 transition-all duration-200 sub-menu-link';
        } else {
            $link_style = "color: " . esc_attr($h_text) . ";";
            $link_class = 'flex items-center font-bold px-4 py-5 transition-colors main-menu-link';
        }

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . ' class="' . esc_attr($link_class) . '" style="' . esc_attr($link_style) . '">';
        $item_output .= $args->link_before . $title . $arrow . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}


/**
 * 4. BACK TO TOP BUTTON
 */
function sp_add_back_to_top_button() {
    echo '<button id="sp-back-to-top" class="sp-scroll-button" title="' . esc_attr__('Go to top', 'spin-pulse') . '">&uarr;</button>';
}
add_action('wp_footer', 'sp_add_back_to_top_button');


/**
 * 5. ADMIN STYLING FIX
 */
function spin_pulse_admin_style_fix() {
    // THEMEFOREST FIX: Proper inline injection for admin
    wp_add_inline_style( 'wp-admin', '#wpbody { background: #f0f2f5; }' );
}
add_action('admin_enqueue_scripts', 'spin_pulse_admin_style_fix');


/**
 * 6. WIDGETS INIT & LIMITS
 */
function sp_limit_widget_pages( $args ) {
    $args['number'] = 5; 
    return $args;
}
add_filter( 'widget_pages_args', 'sp_limit_widget_pages' );

function spin_pulse_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Left Sidebar', 'spin-pulse' ),
        'id'            => 'sidebar-left',
        'description'   => esc_html__( 'Add widgets here to appear in your left sidebar.', 'spin-pulse' ),
        'before_widget' => '<section id="%1$s" class="widget sp-left-sidebar-widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title sp-left-sidebar-title">',
        'after_title'   => '</h2>',
    ));
    register_sidebar( array(
        'name'          => esc_html__( 'Right Sidebar', 'spin-pulse' ),
        'id'            => 'sidebar-right',
        'description'   => esc_html__( 'Add widgets here to appear in your right sidebar.', 'spin-pulse' ),
        'before_widget' => '<section id="%1$s" class="widget sp-right-sidebar-widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title sp-right-sidebar-title">',
        'after_title'   => '</h2>',
    ));
}
add_action( 'widgets_init', 'spin_pulse_widgets_init' );


/**
 * 7. USER PROFILE ADDITIONS (Social & Custom Avatar)
 */
function sp_custom_user_social_fields( $contactmethods ) {
    $contactmethods['twitter']   = esc_html__( 'X (Twitter) Profile URL', 'spin-pulse' );
    $contactmethods['facebook']  = esc_html__( 'Facebook Profile URL', 'spin-pulse' );
    $contactmethods['instagram'] = esc_html__( 'Instagram Profile URL', 'spin-pulse' );
    $contactmethods['linkedin']  = esc_html__( 'LinkedIn Profile URL', 'spin-pulse' );
    $contactmethods['youtube']   = esc_html__( 'YouTube Channel URL', 'spin-pulse' );
    return $contactmethods;
}
add_filter( 'user_contactmethods', 'sp_custom_user_social_fields' );

function sp_custom_user_avatar_field( $user ) {
    if ( ! current_user_can( 'edit_user', $user->ID ) ) { return; }
    $avatar_url = get_user_meta( $user->ID, 'sp_custom_avatar', true );
    ?>
    <h3><?php esc_html_e( 'Custom Avatar', 'spin-pulse' ); ?></h3>
    <table class="form-table">
        <tr>
            <th><label for="sp_custom_avatar"><?php esc_html_e( 'Profile Picture', 'spin-pulse' ); ?></label></th>
            <td>
                <div class="sp-avatar-preview" style="margin-bottom: 15px;">
                    <img src="<?php echo esc_url( $avatar_url ? $avatar_url : get_avatar_url( $user->ID ) ); ?>" 
                         style="width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid #e0ddd5;" 
                         id="sp-avatar-image-preview" alt="Avatar Preview" />
                </div>
                <input type="hidden" name="sp_custom_avatar" id="sp_custom_avatar" value="<?php echo esc_attr( $avatar_url ); ?>" />
                <button type="button" class="button button-secondary" id="sp-upload-avatar-btn">
                    <?php esc_html_e( 'Upload / Select Image', 'spin-pulse' ); ?>
                </button>
                <button type="button" class="button button-link-delete" id="sp-remove-avatar-btn" style="<?php echo empty( $avatar_url ) ? 'display:none;' : ''; ?>">
                    <?php esc_html_e( 'Remove Custom Avatar', 'spin-pulse' ); ?>
                </button>
                <p class="description"><?php esc_html_e( 'Upload a custom image to override the default Gravatar. Recommended size: 250x250 pixels.', 'spin-pulse' ); ?></p>
            </td>
        </tr>
    </table>
    <?php
}
add_action( 'show_user_profile', 'sp_custom_user_avatar_field' );
add_action( 'edit_user_profile', 'sp_custom_user_avatar_field' );

function sp_save_custom_user_avatar_field( $user_id ) {
    if ( ! current_user_can( 'edit_user', $user_id ) ) return false;
    if ( isset( $_POST['sp_custom_avatar'] ) ) { update_user_meta( $user_id, 'sp_custom_avatar', esc_url_raw( $_POST['sp_custom_avatar'] ) ); }
}
add_action( 'personal_options_update', 'sp_save_custom_user_avatar_field' );
add_action( 'edit_user_profile_update', 'sp_save_custom_user_avatar_field' );

function sp_override_get_avatar_url( $args, $id_or_email ) {
    $user_id = 0;
    if ( is_numeric( $id_or_email ) ) { $user_id = (int) $id_or_email; } 
    elseif ( is_string( $id_or_email ) && ( $user = get_user_by( 'email', $id_or_email ) ) ) { $user_id = $user->ID; } 
    elseif ( is_object( $id_or_email ) && ! empty( $id_or_email->user_id ) ) { $user_id = (int) $id_or_email->user_id; }

    if ( $user_id ) {
        $custom_avatar = get_user_meta( $user_id, 'sp_custom_avatar', true );
        if ( $custom_avatar ) { $args['url'] = $custom_avatar; }
    }
    return $args;
}
add_filter( 'get_avatar_data', 'sp_override_get_avatar_url', 10, 2 );

function sp_enqueue_avatar_uploader_script( $hook ) {
    if ( 'profile.php' !== $hook && 'user-edit.php' !== $hook ) { return; }
    wp_enqueue_media(); 
    wp_add_inline_script( 'media-upload', '
        jQuery(document).ready(function($){
            var mediaUploader;
            $("#sp-upload-avatar-btn").on("click", function(e){
                e.preventDefault();
                if(mediaUploader){ mediaUploader.open(); return; }
                mediaUploader = wp.media.frames.file_frame = wp.media({ title: "Choose a Profile Picture", button: { text: "Use this image" }, multiple: false });
                mediaUploader.on("select", function(){
                    var attachment = mediaUploader.state().get("selection").first().toJSON();
                    $("#sp_custom_avatar").val(attachment.url);
                    $("#sp-avatar-image-preview").attr("src", attachment.url);
                    $("#sp-remove-avatar-btn").show();
                });
                mediaUploader.open();
            });
            $("#sp-remove-avatar-btn").on("click", function(e){
                e.preventDefault();
                $("#sp_custom_avatar").val("");
                $("#sp-avatar-image-preview").attr("src", ""); 
                $(this).hide();
            });
        });
    ' );
}
add_action( 'admin_enqueue_scripts', 'sp_enqueue_avatar_uploader_script' );


/**
 * 8. HOMEPAGE TEMPLATE LOCK
 */
function sp_lock_homepage_template( $templates, $theme, $post, $post_type ) {
    $front_page_id = get_option( 'page_on_front' );
    if ( $post && $post->ID == $front_page_id ) { return array(); }
    return $templates;
}
add_filter( 'theme_page_templates', 'sp_lock_homepage_template', 10, 4 );


// ==========================================================================
// UNIFIED SPIN PULSE SETTINGS DASHBOARD
// ==========================================================================
add_action('admin_menu', 'sp_theme_settings_menu');
function sp_theme_settings_menu() {
    add_menu_page('Spin Pulse Settings', 'Spin Pulse Settings', 'manage_options', 'spin-pulse-settings', 'sp_theme_settings_page', 'dashicons-admin-generic', 59);
}

function sp_theme_settings_page() {
    if (isset($_POST['sp_settings_save']) && check_admin_referer('sp_settings_nonce')) {
        
        // 1. Save Hero Options
        $hero_options = array(
            'heading'         => sanitize_text_field(wp_unslash($_POST['heading'] ?? '')),
            'subtitle'        => sanitize_textarea_field(wp_unslash($_POST['subtitle'] ?? '')),
            'bg_img'          => esc_url_raw(wp_unslash($_POST['bg_img'] ?? '')),
            'gift_img'        => esc_url_raw(wp_unslash($_POST['gift_img'] ?? '')),
            'author_1_name'   => sanitize_text_field(wp_unslash($_POST['author_1_name'] ?? '')),
            'author_1_title'  => sanitize_text_field(wp_unslash($_POST['author_1_title'] ?? '')),
            'author_1_img'    => esc_url_raw(wp_unslash($_POST['author_1_img'] ?? '')),
            'author_1_date'   => sanitize_text_field(wp_unslash($_POST['author_1_date'] ?? '')),
            'author_1_url'    => esc_url_raw(wp_unslash($_POST['author_1_url'] ?? '')),
            'a1_fb'           => esc_url_raw(wp_unslash($_POST['a1_fb'] ?? '')),
            'a1_tw'           => esc_url_raw(wp_unslash($_POST['a1_tw'] ?? '')),
            'a1_ig'           => esc_url_raw(wp_unslash($_POST['a1_ig'] ?? '')),
            'a1_li'           => esc_url_raw(wp_unslash($_POST['a1_li'] ?? '')),
            'a1_yt'           => esc_url_raw(wp_unslash($_POST['a1_yt'] ?? '')),
            'author_2_name'   => sanitize_text_field(wp_unslash($_POST['author_2_name'] ?? '')),
            'author_2_title'  => sanitize_text_field(wp_unslash($_POST['author_2_title'] ?? '')),
            'author_2_img'    => esc_url_raw(wp_unslash($_POST['author_2_img'] ?? '')),
            'author_2_date'   => sanitize_text_field(wp_unslash($_POST['author_2_date'] ?? '')),
            'author_2_url'    => esc_url_raw(wp_unslash($_POST['author_2_url'] ?? '')),
            'a2_fb'           => esc_url_raw(wp_unslash($_POST['a2_fb'] ?? '')),
            'a2_tw'           => esc_url_raw(wp_unslash($_POST['a2_tw'] ?? '')),
            'a2_ig'           => esc_url_raw(wp_unslash($_POST['a2_ig'] ?? '')),
            'a2_li'           => esc_url_raw(wp_unslash($_POST['a2_li'] ?? '')),
            'a2_yt'           => esc_url_raw(wp_unslash($_POST['a2_yt'] ?? '')),
            'feat_1_icon'     => sanitize_text_field(wp_unslash($_POST['feat_1_icon'] ?? '')),
            'feat_1_title'    => sanitize_text_field(wp_unslash($_POST['feat_1_title'] ?? '')),
            'feat_1_desc'     => sanitize_text_field(wp_unslash($_POST['feat_1_desc'] ?? '')),
            'feat_2_icon'     => sanitize_text_field(wp_unslash($_POST['feat_2_icon'] ?? '')),
            'feat_2_title'    => sanitize_text_field(wp_unslash($_POST['feat_2_title'] ?? '')),
            'feat_2_desc'     => sanitize_text_field(wp_unslash($_POST['feat_2_desc'] ?? '')),
            'feat_3_icon'     => sanitize_text_field(wp_unslash($_POST['feat_3_icon'] ?? '')),
            'feat_3_title'    => sanitize_text_field(wp_unslash($_POST['feat_3_title'] ?? '')),
            'feat_3_desc'     => sanitize_text_field(wp_unslash($_POST['feat_3_desc'] ?? '')),
            'feat_4_icon'     => sanitize_text_field(wp_unslash($_POST['feat_4_icon'] ?? '')),
            'feat_4_title'    => sanitize_text_field(wp_unslash($_POST['feat_4_title'] ?? '')),
            'feat_4_desc'     => sanitize_text_field(wp_unslash($_POST['feat_4_desc'] ?? '')),
            'badge_1_text'    => sanitize_text_field(wp_unslash($_POST['badge_1_text'] ?? '')),
            'badge_2_text'    => sanitize_text_field(wp_unslash($_POST['badge_2_text'] ?? '')),
            'badge_3_text'    => sanitize_text_field(wp_unslash($_POST['badge_3_text'] ?? '')),
            'badge_4_text'    => sanitize_text_field(wp_unslash($_POST['badge_4_text'] ?? '')),
            'offer_badge'     => sanitize_text_field(wp_unslash($_POST['offer_badge'] ?? '')),
            'offer_logo'      => esc_url_raw(wp_unslash($_POST['offer_logo'] ?? '')),
            'offer_title'     => sanitize_text_field(wp_unslash($_POST['offer_title'] ?? '')),
            'offer_details'   => sanitize_text_field(wp_unslash($_POST['offer_details'] ?? '')),
            'offer_btn_text'  => sanitize_text_field(wp_unslash($_POST['offer_btn_text'] ?? '')),
            'offer_btn_link'  => esc_url_raw(wp_unslash($_POST['offer_btn_link'] ?? '')),
            'offer_footer'    => sanitize_text_field(wp_unslash($_POST['offer_footer'] ?? '')),
            'color_heading'   => sanitize_hex_color(wp_unslash($_POST['color_heading'] ?? '')),
            'color_subtitle'  => sanitize_hex_color(wp_unslash($_POST['color_subtitle'] ?? '')),
            'color_btn_bg'    => sanitize_hex_color(wp_unslash($_POST['color_btn_bg'] ?? '')),
            'color_btn_hover' => sanitize_hex_color(wp_unslash($_POST['color_btn_hover'] ?? '')),
            'color_btn_text'  => sanitize_hex_color(wp_unslash($_POST['color_btn_text'] ?? '')),
        );
        update_option('spin_pulse_homepage_hero', $hero_options);

        // 2. Save Footer Options
        $footer_options = array(
            'footer_col_1_title'   => sanitize_text_field(wp_unslash($_POST['footer_col_1_title'] ?? '')),
            'footer_col_2_title'   => sanitize_text_field(wp_unslash($_POST['footer_col_2_title'] ?? '')),
            'footer_col_3_title'   => sanitize_text_field(wp_unslash($_POST['footer_col_3_title'] ?? '')),
            'footer_col_4_title'   => sanitize_text_field(wp_unslash($_POST['footer_col_4_title'] ?? '')),
            'footer_col_5_title'   => sanitize_text_field(wp_unslash($_POST['footer_col_5_title'] ?? '')),
            'footer_logo'          => esc_url_raw(wp_unslash($_POST['footer_logo'] ?? '')),
            'footer_desc'          => sanitize_textarea_field(wp_unslash($_POST['footer_desc'] ?? '')),
            'social_tw'            => esc_url_raw(wp_unslash($_POST['social_tw'] ?? '')),
            'social_fb'            => esc_url_raw(wp_unslash($_POST['social_fb'] ?? '')),
            'social_yt'            => esc_url_raw(wp_unslash($_POST['social_yt'] ?? '')),
            'social_ig'            => esc_url_raw(wp_unslash($_POST['social_ig'] ?? '')),
            'social_blog'          => esc_url_raw(wp_unslash($_POST['social_blog'] ?? '')),
            'address_title'        => sanitize_text_field(wp_unslash($_POST['address_title'] ?? '')),
            'address_1'            => sanitize_textarea_field(wp_unslash($_POST['address_1'] ?? '')),
            'address_2'            => sanitize_textarea_field(wp_unslash($_POST['address_2'] ?? '')),
            'color_footer_bg'      => sanitize_hex_color(wp_unslash($_POST['color_footer_bg'] ?? '')),
            'color_footer_text'    => sanitize_hex_color(wp_unslash($_POST['color_footer_text'] ?? '')),
            'color_footer_heading' => sanitize_hex_color(wp_unslash($_POST['color_footer_heading'] ?? '')),
            'color_footer_link'    => sanitize_hex_color(wp_unslash($_POST['color_footer_link'] ?? '')),
            'color_footer_hover'   => sanitize_hex_color(wp_unslash($_POST['color_footer_hover'] ?? '')),
            'color_footer_divider' => sanitize_hex_color(wp_unslash($_POST['color_footer_divider'] ?? '')),
            'footer_badge_1'       => esc_url_raw(wp_unslash($_POST['footer_badge_1'] ?? '')),
            'footer_badge_2'       => esc_url_raw(wp_unslash($_POST['footer_badge_2'] ?? '')),
            'footer_badge_3'       => esc_url_raw(wp_unslash($_POST['footer_badge_3'] ?? '')),
            'footer_badge_4'       => esc_url_raw(wp_unslash($_POST['footer_badge_4'] ?? '')),
            'footer_badge_5'       => esc_url_raw(wp_unslash($_POST['footer_badge_5'] ?? '')),
            'footer_badge_6'       => esc_url_raw(wp_unslash($_POST['footer_badge_6'] ?? '')),
        );
        update_option('spin_pulse_footer_settings', $footer_options);

        // 3. Save Game Settings
        $game_options = array(
            'game_card_bg'    => sanitize_hex_color(wp_unslash($_POST['game_card_bg'] ?? '')),
            'game_card_title' => sanitize_hex_color(wp_unslash($_POST['game_card_title'] ?? '')),
            'game_btn_bg'     => sanitize_hex_color(wp_unslash($_POST['game_btn_bg'] ?? '')),
            'game_btn_text'   => sanitize_hex_color(wp_unslash($_POST['game_btn_text'] ?? '')),
        );
        update_option('spin_pulse_game_settings', $game_options);

        // 4. Save Search Card Settings
        $search_options = array(
            'search_card_bg'          => sanitize_hex_color(wp_unslash($_POST['search_card_bg'] ?? '')),
            'search_card_title'       => sanitize_hex_color(wp_unslash($_POST['search_card_title'] ?? '')),
            'search_card_title_hover' => sanitize_hex_color(wp_unslash($_POST['search_card_title_hover'] ?? '')),
            'search_card_excerpt'     => sanitize_hex_color(wp_unslash($_POST['search_card_excerpt'] ?? '')),
            'search_badge_bg'         => sanitize_hex_color(wp_unslash($_POST['search_badge_bg'] ?? '')),
        );
        update_option('spin_pulse_search_settings', $search_options);

        // 5. Save Header Search Settings
        $header_search_options = array(
            'search_input_bg'    => sanitize_hex_color(wp_unslash($_POST['search_input_bg'] ?? '')),
            'search_input_text'  => sanitize_hex_color(wp_unslash($_POST['search_input_text'] ?? '')),
            'search_input_focus' => sanitize_hex_color(wp_unslash($_POST['search_input_focus'] ?? '')),
            'search_btn_bg'      => sanitize_hex_color(wp_unslash($_POST['search_btn_bg'] ?? '')),
            'search_btn_hover'   => sanitize_hex_color(wp_unslash($_POST['search_btn_hover'] ?? '')),
            'search_btn_text'    => sanitize_hex_color(wp_unslash($_POST['search_btn_text'] ?? '')),
        );
        update_option('spin_pulse_header_search_settings', $header_search_options);

        // 6. Save Article Hero Settings
        $article_hero_options = array(
            'article_hero_bg'      => sanitize_hex_color(wp_unslash($_POST['article_hero_bg'] ?? '')),
            'article_hero_title'   => sanitize_hex_color(wp_unslash($_POST['article_hero_title'] ?? '')),
            'article_hero_text'    => sanitize_hex_color(wp_unslash($_POST['article_hero_text'] ?? '')),
            'article_hero_accent'  => sanitize_hex_color(wp_unslash($_POST['article_hero_accent'] ?? '')),
            'article_hero_border'  => sanitize_hex_color(wp_unslash($_POST['article_hero_border'] ?? '')),
            'article_hero_card_bg' => sanitize_hex_color(wp_unslash($_POST['article_hero_card_bg'] ?? '')),
        );
        update_option('spin_pulse_article_hero_settings', $article_hero_options);

        // 7. Save Review Hero Settings
        $review_hero_options = array(
            'review_hero_bg'         => sanitize_hex_color(wp_unslash($_POST['review_hero_bg'] ?? '')),
            'review_hero_border_btm' => sanitize_hex_color(wp_unslash($_POST['review_hero_border_btm'] ?? '')),
            'review_hero_title'      => sanitize_hex_color(wp_unslash($_POST['review_hero_title'] ?? '')),
            'review_hero_text'       => sanitize_hex_color(wp_unslash($_POST['review_hero_text'] ?? '')),
            'review_hero_accent'     => sanitize_hex_color(wp_unslash($_POST['review_hero_accent'] ?? '')),
            'review_hero_badge_bg'   => sanitize_hex_color(wp_unslash($_POST['review_hero_badge_bg'] ?? '')),
            'review_hero_badge_text' => sanitize_hex_color(wp_unslash($_POST['review_hero_badge_text'] ?? '')),
        );
        update_option('spin_pulse_review_hero_settings', $review_hero_options);

        // 8. Save Game Hero Settings
        $game_hero_options = array(
            'game_hero_bg'         => sanitize_hex_color(wp_unslash($_POST['game_hero_bg'] ?? '')),
            'game_hero_border_btm' => sanitize_hex_color(wp_unslash($_POST['game_hero_border_btm'] ?? '')),
            'game_hero_title'      => sanitize_hex_color(wp_unslash($_POST['game_hero_title'] ?? '')),
            'game_hero_text'       => sanitize_hex_color(wp_unslash($_POST['game_hero_text'] ?? '')),
            'game_hero_accent'     => sanitize_hex_color(wp_unslash($_POST['game_hero_accent'] ?? '')),
            'game_hero_badge_bg'   => sanitize_hex_color(wp_unslash($_POST['game_hero_badge_bg'] ?? '')),
            'game_hero_badge_text' => sanitize_hex_color(wp_unslash($_POST['game_hero_badge_text'] ?? '')),
        );
        update_option('spin_pulse_game_hero_settings', $game_hero_options);

        echo '<div class="notice notice-success is-dismissible" style="margin-top:20px; border-radius:8px;"><p>' . esc_html__('All Theme Settings Saved Successfully!', 'spin-pulse') . '</p></div>';
    }

    // Retrieve Hero Options
    $opts = get_option('spin_pulse_homepage_hero', array());
    $heading = isset($opts['heading']) ? $opts['heading'] : '';
    $subtitle = isset($opts['subtitle']) ? $opts['subtitle'] : '';
    $bg_img = isset($opts['bg_img']) ? $opts['bg_img'] : '';
    $gift_img = isset($opts['gift_img']) ? $opts['gift_img'] : '';
    $a1_name = isset($opts['author_1_name']) ? $opts['author_1_name'] : '';
    $a1_title = isset($opts['author_1_title']) ? $opts['author_1_title'] : '';
    $a1_img = isset($opts['author_1_img']) ? $opts['author_1_img'] : '';
    $a1_date = isset($opts['author_1_date']) ? $opts['author_1_date'] : '';
    $a1_url = isset($opts['author_1_url']) ? $opts['author_1_url'] : '';
    $a1_fb = isset($opts['a1_fb']) ? $opts['a1_fb'] : '';
    $a1_tw = isset($opts['a1_tw']) ? $opts['a1_tw'] : '';
    $a1_ig = isset($opts['a1_ig']) ? $opts['a1_ig'] : '';
    $a1_li = isset($opts['a1_li']) ? $opts['a1_li'] : '';
    $a1_yt = isset($opts['a1_yt']) ? $opts['a1_yt'] : '';
    $a2_name = isset($opts['author_2_name']) ? $opts['author_2_name'] : '';
    $a2_title = isset($opts['author_2_title']) ? $opts['author_2_title'] : '';
    $a2_img = isset($opts['author_2_img']) ? $opts['author_2_img'] : '';
    $a2_date = isset($opts['author_2_date']) ? $opts['author_2_date'] : '';
    $a2_url = isset($opts['author_2_url']) ? $opts['author_2_url'] : '';
    $a2_fb = isset($opts['a2_fb']) ? $opts['a2_fb'] : '';
    $a2_tw = isset($opts['a2_tw']) ? $opts['a2_tw'] : '';
    $a2_ig = isset($opts['a2_ig']) ? $opts['a2_ig'] : '';
    $a2_li = isset($opts['a2_li']) ? $opts['a2_li'] : '';
    $a2_yt = isset($opts['a2_yt']) ? $opts['a2_yt'] : '';
    $f1_icon = isset($opts['feat_1_icon']) ? $opts['feat_1_icon'] : '';
    $f1_title = isset($opts['feat_1_title']) ? $opts['feat_1_title'] : '';
    $f1_desc = isset($opts['feat_1_desc']) ? $opts['feat_1_desc'] : '';
    $f2_icon = isset($opts['feat_2_icon']) ? $opts['feat_2_icon'] : '';
    $f2_title = isset($opts['feat_2_title']) ? $opts['feat_2_title'] : '';
    $f2_desc = isset($opts['feat_2_desc']) ? $opts['feat_2_desc'] : '';
    $f3_icon = isset($opts['feat_3_icon']) ? $opts['feat_3_icon'] : '';
    $f3_title = isset($opts['feat_3_title']) ? $opts['feat_3_title'] : '';
    $f3_desc = isset($opts['feat_3_desc']) ? $opts['feat_3_desc'] : '';
    $f4_icon = isset($opts['feat_4_icon']) ? $opts['feat_4_icon'] : '';
    $f4_title = isset($opts['feat_4_title']) ? $opts['feat_4_title'] : '';
    $f4_desc = isset($opts['feat_4_desc']) ? $opts['feat_4_desc'] : '';
    $b1 = isset($opts['badge_1_text']) ? $opts['badge_1_text'] : '';
    $b2 = isset($opts['badge_2_text']) ? $opts['badge_2_text'] : '';
    $b3 = isset($opts['badge_3_text']) ? $opts['badge_3_text'] : '';
    $b4 = isset($opts['badge_4_text']) ? $opts['badge_4_text'] : '';
    $offer_badge = isset($opts['offer_badge']) ? $opts['offer_badge'] : '';
    $offer_logo = isset($opts['offer_logo']) ? $opts['offer_logo'] : '';
    $offer_title = isset($opts['offer_title']) ? $opts['offer_title'] : '';
    $offer_details = isset($opts['offer_details']) ? $opts['offer_details'] : '';
    $offer_btn_text = isset($opts['offer_btn_text']) ? $opts['offer_btn_text'] : '';
    $offer_btn_link = isset($opts['offer_btn_link']) ? $opts['offer_btn_link'] : '';
    $offer_footer = isset($opts['offer_footer']) ? $opts['offer_footer'] : '';
    $c_heading = isset($opts['color_heading']) && $opts['color_heading'] !== '' ? $opts['color_heading'] : '#0A1F44';
    $c_subtitle = isset($opts['color_subtitle']) && $opts['color_subtitle'] !== '' ? $opts['color_subtitle'] : '#000000';
    $c_btn_bg = isset($opts['color_btn_bg']) && $opts['color_btn_bg'] !== '' ? $opts['color_btn_bg'] : '#0A1F44';
    $c_btn_hover = isset($opts['color_btn_hover']) && $opts['color_btn_hover'] !== '' ? $opts['color_btn_hover'] : '#051024';
    $c_btn_text = isset($opts['color_btn_text']) && $opts['color_btn_text'] !== '' ? $opts['color_btn_text'] : '#ffffff';

    // Retrieve Footer Options
    $f_opts = get_option('spin_pulse_footer_settings', array());
    $col1_title = isset($f_opts['footer_col_1_title']) ? $f_opts['footer_col_1_title'] : '';
    $col2_title = isset($f_opts['footer_col_2_title']) ? $f_opts['footer_col_2_title'] : '';
    $col3_title = isset($f_opts['footer_col_3_title']) ? $f_opts['footer_col_3_title'] : '';
    $col4_title = isset($f_opts['footer_col_4_title']) ? $f_opts['footer_col_4_title'] : '';
    $col5_title = isset($f_opts['footer_col_5_title']) ? $f_opts['footer_col_5_title'] : '';
    $f_logo = isset($f_opts['footer_logo']) ? $f_opts['footer_logo'] : '';
    $f_desc = isset($f_opts['footer_desc']) ? $f_opts['footer_desc'] : '';
    $s_tw = isset($f_opts['social_tw']) ? $f_opts['social_tw'] : '';
    $s_fb = isset($f_opts['social_fb']) ? $f_opts['social_fb'] : '';
    $s_yt = isset($f_opts['social_yt']) ? $f_opts['social_yt'] : '';
    $s_ig = isset($f_opts['social_ig']) ? $f_opts['social_ig'] : '';
    $s_blog = isset($f_opts['social_blog']) ? $f_opts['social_blog'] : '';
    $addr_title = isset($f_opts['address_title']) ? $f_opts['address_title'] : '';
    $addr_1 = isset($f_opts['address_1']) ? $f_opts['address_1'] : '';
    $addr_2 = isset($f_opts['address_2']) ? $f_opts['address_2'] : '';
    $c_f_bg = isset($f_opts['color_footer_bg']) && $f_opts['color_footer_bg'] !== '' ? $f_opts['color_footer_bg'] : '#f5f5fa';
    $c_f_text = isset($f_opts['color_footer_text']) && $f_opts['color_footer_text'] !== '' ? $f_opts['color_footer_text'] : '#ffff';
    $c_f_head = isset($f_opts['color_footer_heading']) && $f_opts['color_footer_heading'] !== '' ? $f_opts['color_footer_heading'] : '#1a1a2e';
    $c_f_link = isset($f_opts['color_footer_link']) && $f_opts['color_footer_link'] !== '' ? $f_opts['color_footer_link'] : '#ffff';
    $c_f_hover = isset($f_opts['color_footer_hover']) && $f_opts['color_footer_hover'] !== '' ? $f_opts['color_footer_hover'] : '#4f46e5';
    $c_f_div = isset($f_opts['color_footer_divider']) && $f_opts['color_footer_divider'] !== '' ? $f_opts['color_footer_divider'] : '#e2e2ea';
    
    $f_b1 = isset($f_opts['footer_badge_1']) ? $f_opts['footer_badge_1'] : '';
    $f_b2 = isset($f_opts['footer_badge_2']) ? $f_opts['footer_badge_2'] : '';
    $f_b3 = isset($f_opts['footer_badge_3']) ? $f_opts['footer_badge_3'] : '';
    $f_b4 = isset($f_opts['footer_badge_4']) ? $f_opts['footer_badge_4'] : '';
    $f_b5 = isset($f_opts['footer_badge_5']) ? $f_opts['footer_badge_5'] : '';
    $f_b6 = isset($f_opts['footer_badge_6']) ? $f_opts['footer_badge_6'] : '';

    // Retrieve Game Options
    $g_opts = get_option('spin_pulse_game_settings', array());
    $c_g_bg = isset($g_opts['game_card_bg']) && $g_opts['game_card_bg'] !== '' ? $g_opts['game_card_bg'] : '#ffffff';
    $c_g_title = isset($g_opts['game_card_title']) && $g_opts['game_card_title'] !== '' ? $g_opts['game_card_title'] : '#0f172a';
    $c_g_btn_bg = isset($g_opts['game_btn_bg']) && $g_opts['game_btn_bg'] !== '' ? $g_opts['game_btn_bg'] : '#0f172a';
    $c_g_btn_text = isset($g_opts['game_btn_text']) && $g_opts['game_btn_text'] !== '' ? $g_opts['game_btn_text'] : '#ffffff';

    // Retrieve Search Card Options
    $s_opts = get_option('spin_pulse_search_settings', array());
    $c_s_bg = isset($s_opts['search_card_bg']) && $s_opts['search_card_bg'] !== '' ? $s_opts['search_card_bg'] : '#ffffff';
    $c_s_title = isset($s_opts['search_card_title']) && $s_opts['search_card_title'] !== '' ? $s_opts['search_card_title'] : '#0f172a';
    $c_s_title_hover = isset($s_opts['search_card_title_hover']) && $s_opts['search_card_title_hover'] !== '' ? $s_opts['search_card_title_hover'] : '#00d67d';
    $c_s_excerpt = isset($s_opts['search_card_excerpt']) && $s_opts['search_card_excerpt'] !== '' ? $s_opts['search_card_excerpt'] : '#64748b';
    $c_s_badge = isset($s_opts['search_badge_bg']) && $s_opts['search_badge_bg'] !== '' ? $s_opts['search_badge_bg'] : '#1e1b4b';

    // Retrieve Header Search Options
    $hs_opts = get_option('spin_pulse_header_search_settings', array());
    $c_hs_in_bg = isset($hs_opts['search_input_bg']) && $hs_opts['search_input_bg'] !== '' ? $hs_opts['search_input_bg'] : '#ffffff';
    $c_hs_in_text = isset($hs_opts['search_input_text']) && $hs_opts['search_input_text'] !== '' ? $hs_opts['search_input_text'] : '#0f172a';
    $c_hs_in_focus = isset($hs_opts['search_input_focus']) && $hs_opts['search_input_focus'] !== '' ? $hs_opts['search_input_focus'] : '#00d67d';
    $c_hs_btn_bg = isset($hs_opts['search_btn_bg']) && $hs_opts['search_btn_bg'] !== '' ? $hs_opts['search_btn_bg'] : '#00d67d';
    $c_hs_btn_hover = isset($hs_opts['search_btn_hover']) && $hs_opts['search_btn_hover'] !== '' ? $hs_opts['search_btn_hover'] : '#00b368';
    $c_hs_btn_text = isset($hs_opts['search_btn_text']) && $hs_opts['search_btn_text'] !== '' ? $hs_opts['search_btn_text'] : '#0f172a';

    // Retrieve Article Hero Options
    $ah_opts = get_option('spin_pulse_article_hero_settings', array());
    $c_ah_bg = isset($ah_opts['article_hero_bg']) && $ah_opts['article_hero_bg'] !== '' ? $ah_opts['article_hero_bg'] : '#f8fafc';
    $c_ah_title = isset($ah_opts['article_hero_title']) && $ah_opts['article_hero_title'] !== '' ? $ah_opts['article_hero_title'] : '#0f172a';
    $c_ah_text = isset($ah_opts['article_hero_text']) && $ah_opts['article_hero_text'] !== '' ? $ah_opts['article_hero_text'] : '#475569';
    $c_ah_accent = isset($ah_opts['article_hero_accent']) && $ah_opts['article_hero_accent'] !== '' ? $ah_opts['article_hero_accent'] : '#00d67d';
    $c_ah_border = isset($ah_opts['article_hero_border']) && $ah_opts['article_hero_border'] !== '' ? $ah_opts['article_hero_border'] : '#e2e8f0';
    $c_ah_card_bg = isset($ah_opts['article_hero_card_bg']) && $ah_opts['article_hero_card_bg'] !== '' ? $ah_opts['article_hero_card_bg'] : '#ffffff';

    // Retrieve Review Hero Options
    $rh_opts = get_option('spin_pulse_review_hero_settings', array());
    $c_rh_bg = isset($rh_opts['review_hero_bg']) && $rh_opts['review_hero_bg'] !== '' ? $rh_opts['review_hero_bg'] : '#0f172a'; 
    $c_rh_border_btm = isset($rh_opts['review_hero_border_btm']) && $rh_opts['review_hero_border_btm'] !== '' ? $rh_opts['review_hero_border_btm'] : '#00d67d';
    $c_rh_title = isset($rh_opts['review_hero_title']) && $rh_opts['review_hero_title'] !== '' ? $rh_opts['review_hero_title'] : '#ffffff';
    $c_rh_text = isset($rh_opts['review_hero_text']) && $rh_opts['review_hero_text'] !== '' ? $rh_opts['review_hero_text'] : '#94a3b8'; 
    $c_rh_accent = isset($rh_opts['review_hero_accent']) && $rh_opts['review_hero_accent'] !== '' ? $rh_opts['review_hero_accent'] : '#00d67d';
    $c_rh_badge_bg = isset($rh_opts['review_hero_badge_bg']) && $rh_opts['review_hero_badge_bg'] !== '' ? $rh_opts['review_hero_badge_bg'] : '#1e293b'; 
    $c_rh_badge_text = isset($rh_opts['review_hero_badge_text']) && $rh_opts['review_hero_badge_text'] !== '' ? $rh_opts['review_hero_badge_text'] : '#ffffff';

    // Retrieve Game Hero Options
    $gh_opts = get_option('spin_pulse_game_hero_settings', array());
    $c_gh_bg = isset($gh_opts['game_hero_bg']) && $gh_opts['game_hero_bg'] !== '' ? $gh_opts['game_hero_bg'] : '#0f172a'; 
    $c_gh_border_btm = isset($gh_opts['game_hero_border_btm']) && $gh_opts['game_hero_border_btm'] !== '' ? $gh_opts['game_hero_border_btm'] : '#00d67d'; 
    $c_gh_title = isset($gh_opts['game_hero_title']) && $gh_opts['game_hero_title'] !== '' ? $gh_opts['game_hero_title'] : '#ffffff'; 
    $c_gh_text = isset($gh_opts['game_hero_text']) && $gh_opts['game_hero_text'] !== '' ? $gh_opts['game_hero_text'] : '#94a3b8'; 
    $c_gh_accent = isset($gh_opts['game_hero_accent']) && $gh_opts['game_hero_accent'] !== '' ? $gh_opts['game_hero_accent'] : '#00d67d'; 
    $c_gh_badge_bg = isset($gh_opts['game_hero_badge_bg']) && $gh_opts['game_hero_badge_bg'] !== '' ? $gh_opts['game_hero_badge_bg'] : '#1e293b'; 
    $c_gh_badge_text = isset($gh_opts['game_hero_badge_text']) && $gh_opts['game_hero_badge_text'] !== '' ? $gh_opts['game_hero_badge_text'] : '#ffffff'; 
    ?>

    <style>
        /* Modern Vertical Tab UI */
        .sp-admin-wrap { max-width: 1200px; margin: 30px 20px 20px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; display: flex; gap: 30px; }
        .sp-admin-sidebar { width: 250px; flex-shrink: 0; background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); padding: 15px 0; height: fit-content; }
        .sp-admin-sidebar h2 { margin: 0; padding: 10px 25px 20px; font-size: 16px; font-weight: 800; color: #0f172a; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 10px;}
        .sp-tab-link { display: block; padding: 15px 25px; color: #475569; text-decoration: none; font-weight: 600; font-size: 14px; border-left: 4px solid transparent; transition: all 0.2s; }
        .sp-tab-link:hover { background: #f8fafc; color: #0f172a; }
        .sp-tab-link.active { border-left-color: #4f46e5; background: #f1f5f9; color: #4f46e5; }
        
        .sp-admin-main { flex-grow: 1; }
        .sp-tab-content { display: none; animation: spFadeIn 0.3s ease; }
        .sp-tab-content.active { display: block; }
        @keyframes spFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

        .sp-admin-card { background: #ffffff; padding: 30px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); margin-bottom: 25px; }
        .sp-admin-card h3 { margin: 0 0 20px 0; border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; font-size: 18px; font-weight: 700; color: #1e293b; }
        .sp-admin-card table.form-table { margin: 0; }
        .sp-admin-card table.form-table th { width: 220px; font-weight: 600; color: #475569; padding: 15px 10px 15px 0; vertical-align: top; }
        .sp-admin-card table.form-table td { padding: 10px 10px 10px 0; }
        .sp-admin-card input[type="text"], .sp-admin-card input[type="url"], .sp-admin-card textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px 14px; font-size: 14px; color: #334155; background-color: #f8fafc; transition: all 0.2s ease; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); }
        .sp-admin-card input:focus, .sp-admin-card textarea:focus { border-color: #3b82f6; outline: none; background-color: #ffffff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
        .sp-admin-card input[type="color"] { cursor: pointer; border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px; width: 60px; height: 35px; }
        .sp-admin-card .small-text { width: 220px !important; margin-right: 10px; }
        .sp-save-btn { background: #4f46e5; color: #ffffff; border: none; padding: 14px 30px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); }
        .sp-save-btn:hover { background: #4338ca; transform: translateY(-1px); }
        .sp-save-btn:active { transform: translateY(0); }
    </style>

    <div class="sp-admin-wrap">
        
        <div class="sp-admin-sidebar">
            <h2><span class="dashicons dashicons-admin-generic"></span> <?php esc_html_e('Theme Settings', 'spin-pulse'); ?></h2>
            <a href="#" class="sp-tab-link active" data-target="tab-hero"><?php esc_html_e('Homepage Hero', 'spin-pulse'); ?></a>
            <a href="#" class="sp-tab-link" data-target="tab-footer"><?php esc_html_e('Footer Settings', 'spin-pulse'); ?></a>
            <a href="#" class="sp-tab-link" data-target="tab-games"><?php esc_html_e('Game Cards', 'spin-pulse'); ?></a>
            <a href="#" class="sp-tab-link" data-target="tab-search"><?php esc_html_e('Search Cards', 'spin-pulse'); ?></a>
            <a href="#" class="sp-tab-link" data-target="tab-header-search"><?php esc_html_e('Header Search Bar', 'spin-pulse'); ?></a>
            <a href="#" class="sp-tab-link" data-target="tab-article-hero"><?php esc_html_e('Article Hero', 'spin-pulse'); ?></a>
            <a href="#" class="sp-tab-link" data-target="tab-review-hero"><?php esc_html_e('Review Hero', 'spin-pulse'); ?></a>
            <a href="#" class="sp-tab-link" data-target="tab-game-hero"><?php esc_html_e('Game Hero', 'spin-pulse'); ?></a>
        </div>

        <div class="sp-admin-main">
            <form method="post" action="">
                <?php wp_nonce_field('sp_settings_nonce'); ?>
                
                <div id="tab-hero" class="sp-tab-content active">
                    <div class="sp-admin-card">
                        <h3>1. General & Background Images</h3>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Main Heading</label></th><td><input name="heading" type="text" value="<?php echo esc_attr($heading); ?>" placeholder="Global Online Casino 2026"></td></tr>
                            <tr><th scope="row"><label>Subtitle</label></th><td><textarea name="subtitle" rows="3" placeholder="Our guide focuses on what international players need..."><?php echo esc_textarea($subtitle); ?></textarea></td></tr>
                            <tr><th scope="row"><label>Background Image URL</label></th><td><input name="bg_img" type="url" value="<?php echo esc_attr($bg_img); ?>" placeholder="/wp-content/uploads/2026/03/background.jpg"></td></tr>
                            <tr><th scope="row"><label>Gift Icon URL</label></th><td><input name="gift_img" type="url" value="<?php echo esc_attr($gift_img); ?>" placeholder="/wp-content/uploads/2026/03/gift.webp"></td></tr>
                        </table>
                    </div>

                    <div class="sp-admin-card">
                        <h3>2. Author 1 (Authored By)</h3>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Name</label></th><td><input name="author_1_name" type="text" value="<?php echo esc_attr($a1_name); ?>" placeholder="Sarah Sterling"></td></tr>
                            <tr><th scope="row"><label>Profile Link (URL)</label></th><td><input name="author_1_url" type="url" value="<?php echo esc_attr($a1_url); ?>" placeholder="https://yoursite.com/author/sarah/"></td></tr>
                            <tr><th scope="row"><label>Title</label></th><td><input name="author_1_title" type="text" value="<?php echo esc_attr($a1_title); ?>" placeholder="Casino Review Specialist"></td></tr>
                            <tr><th scope="row"><label>Image URL</label></th><td><input name="author_1_img" type="url" value="<?php echo esc_attr($a1_img); ?>" placeholder="/wp-content/uploads/2026/03/author2.webp"></td></tr>
                            <tr><th scope="row"><label>Date Text</label></th><td><input name="author_1_date" type="text" value="<?php echo esc_attr($a1_date); ?>" placeholder="Published: March 10, 2026"></td></tr>
                            <tr><th scope="row"><label>Facebook Link</label></th><td><input name="a1_fb" type="url" value="<?php echo esc_attr($a1_fb); ?>" placeholder="https://facebook.com/..."></td></tr>
                            <tr><th scope="row"><label>Twitter Link</label></th><td><input name="a1_tw" type="url" value="<?php echo esc_attr($a1_tw); ?>" placeholder="https://twitter.com/..."></td></tr>
                            <tr><th scope="row"><label>Instagram Link</label></th><td><input name="a1_ig" type="url" value="<?php echo esc_attr($a1_ig); ?>" placeholder="https://instagram.com/..."></td></tr>
                            <tr><th scope="row"><label>LinkedIn Link</label></th><td><input name="a1_li" type="url" value="<?php echo esc_attr($a1_li); ?>" placeholder="https://linkedin.com/..."></td></tr>
                            <tr><th scope="row"><label>YouTube Link</label></th><td><input name="a1_yt" type="url" value="<?php echo esc_attr($a1_yt); ?>" placeholder="https://youtube.com/..."></td></tr>
                        </table>
                    </div>

                    <div class="sp-admin-card">
                        <h3>3. Author 2 (Reviewed By)</h3>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Name</label></th><td><input name="author_2_name" type="text" value="<?php echo esc_attr($a2_name); ?>" placeholder="Deric Clarke"></td></tr>
                            <tr><th scope="row"><label>Profile Link (URL)</label></th><td><input name="author_2_url" type="url" value="<?php echo esc_attr($a2_url); ?>" placeholder="https://yoursite.com/author/deric/"></td></tr>
                            <tr><th scope="row"><label>Title</label></th><td><input name="author_2_title" type="text" value="<?php echo esc_attr($a2_title); ?>" placeholder="Fair Play Auditor"></td></tr>
                            <tr><th scope="row"><label>Image URL</label></th><td><input name="author_2_img" type="url" value="<?php echo esc_attr($a2_img); ?>" placeholder="/wp-content/uploads/2026/03/author1.jpg"></td></tr>
                            <tr><th scope="row"><label>Date Text</label></th><td><input name="author_2_date" type="text value="<?php echo esc_attr($a2_date); ?>" placeholder="Updated: March 12, 2026"></td></tr>
                            <tr><th scope="row"><label>Facebook Link</label></th><td><input name="a2_fb" type="url" value="<?php echo esc_attr($a2_fb); ?>" placeholder="https://facebook.com/..."></td></tr>
                            <tr><th scope="row"><label>Twitter Link</label></th><td><input name="a2_tw" type="url" value="<?php echo esc_attr($a2_tw); ?>" placeholder="https://twitter.com/..."></td></tr>
                            <tr><th scope="row"><label>Instagram Link</label></th><td><input name="a2_ig" type="url" value="<?php echo esc_attr($a2_ig); ?>" placeholder="https://instagram.com/..."></td></tr>
                            <tr><th scope="row"><label>LinkedIn Link</label></th><td><input name="a2_li" type="url" value="<?php echo esc_attr($a2_li); ?>" placeholder="https://linkedin.com/..."></td></tr>
                            <tr><th scope="row"><label>YouTube Link</label></th><td><input name="a2_yt" type="url" value="<?php echo esc_attr($a2_yt); ?>" placeholder="https://youtube.com/..."></td></tr>
                        </table>
                    </div>

                    <div class="sp-admin-card">
                        <h3>4. Features Grid (FontAwesome Icons)</h3>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Feature 1</label></th><td style="display:flex; gap:10px;"><input name="feat_1_icon" type="text" value="<?php echo esc_attr($f1_icon); ?>" placeholder="fas fa-map-marked-alt" class="small-text"> <input name="feat_1_title" type="text" value="<?php echo esc_attr($f1_title); ?>" placeholder="Global Casino Guide"> <input name="feat_1_desc" type="text" value="<?php echo esc_attr($f1_desc); ?>" placeholder="Multi-Currency Support"></td></tr>
                            <tr><th scope="row"><label>Feature 2</label></th><td style="display:flex; gap:10px;"><input name="feat_2_icon" type="text" value="<?php echo esc_attr($f2_icon); ?>" placeholder="fas fa-search-dollar" class="small-text"> <input name="feat_2_title" type="text" value="<?php echo esc_attr($f2_title); ?>" placeholder="Comprehensive Reviews"> <input name="feat_2_desc" type="text" value="<?php echo esc_attr($f2_desc); ?>" placeholder="100+ Brands Analyzed"></td></tr>
                            <tr><th scope="row"><label>Feature 3</label></th><td style="display:flex; gap:10px;"><input name="feat_3_icon" type="text" value="<?php echo esc_attr($f3_icon); ?>" placeholder="fas fa-chart-line" class="small-text"> <input name="feat_3_title" type="text" value="<?php echo esc_attr($f3_title); ?>" placeholder="Game Odds Analytics"> <input name="feat_3_desc" type="text" value="<?php echo esc_attr($f3_desc); ?>" placeholder="RTP & Volatility Reports"></td></tr>
                            <tr><th scope="row"><label>Feature 4</label></th><td style="display:flex; gap:10px;"><input name="feat_4_icon" type="text" value="<?php echo esc_attr($f4_icon); ?>" placeholder="fas fa-gift" class="small-text"> <input name="feat_4_title" type="text" value="<?php echo esc_attr($f4_title); ?>" placeholder="Exclusive Offers Hub"> <input name="feat_4_desc" type="text" value="<?php echo esc_attr($f4_desc); ?>" placeholder="Updated Daily Bonuses"></td></tr>
                        </table>
                    </div>

                    <div class="sp-admin-card">
                        <h3>5. Trust Badges</h3>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Badges (Text)</label></th><td style="display:flex; flex-direction:column; gap:10px;">
                                <input name="badge_1_text" type="text" value="<?php echo esc_attr($b1); ?>" placeholder="Licensed Solutions">
                                <input name="badge_2_text" type="text" value="<?php echo esc_attr($b2); ?>" placeholder="Proven Fairness">
                                <input name="badge_3_text" type="text" value="<?php echo esc_attr($b3); ?>" placeholder="Player Privacy">
                                <input name="badge_4_text" type="text" value="<?php echo esc_attr($b4); ?>" placeholder="Global Casino Advisory">
                            </td></tr>
                        </table>
                    </div>

                    <div class="sp-admin-card">
                        <h3>6. Offer Card (Right Column)</h3>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Badge Text</label></th><td><input name="offer_badge" type="text" value="<?php echo esc_attr($offer_badge); ?>" placeholder="Exclusive Network Access"></td></tr>
                            <tr><th scope="row"><label>Offer Title</label></th><td><input name="offer_title" type="text" value="<?php echo esc_attr($offer_title); ?>" placeholder="Premium Gaming Starter Kit"></td></tr>
                            <tr><th scope="row"><label>Offer Details</label></th><td><input name="offer_details" type="text" value="<?php echo esc_attr($offer_details); ?>" placeholder="Includes Deposit Boosts & Free Spins"></td></tr>
                            <tr><th scope="row"><label>Casino Logo URL</label></th><td><input name="offer_logo" type="url" value="<?php echo esc_attr($offer_logo); ?>" placeholder="/wp-content/uploads/..."></td></tr>
                            <tr><th scope="row"><label>Button Text</label></th><td><input name="offer_btn_text" type="text" value="<?php echo esc_attr($offer_btn_text); ?>" placeholder="Unlock My Welcome Package"></td></tr>
                            <tr><th scope="row"><label>Button Link</label></th><td><input name="offer_btn_link" type="url" value="<?php echo esc_attr($offer_btn_link); ?>" placeholder="https://..."></td></tr>
                            <tr><th scope="row"><label>Footer Text</label></th><td><input name="offer_footer" type="text" value="<?php echo esc_attr($offer_footer); ?>" placeholder="Data Privacy Certified & Audited"></td></tr>
                        </table>
                    </div>

                    <div class="sp-admin-card">
                        <h3>7. Theme Colors</h3>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Main Heading Color</label></th><td><input name="color_heading" type="color" value="<?php echo esc_attr($c_heading); ?>"></td></tr>
                            <tr><th scope="row"><label>Subtitle Color</label></th><td><input name="color_subtitle" type="color" value="<?php echo esc_attr($c_subtitle); ?>"></td></tr>
                            <tr><th scope="row"><label>Button Background</label></th><td><input name="color_btn_bg" type="color" value="<?php echo esc_attr($c_btn_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Button Hover Background</label></th><td><input name="color_btn_hover" type="color" value="<?php echo esc_attr($c_btn_hover); ?>"></td></tr>
                            <tr><th scope="row"><label>Button Text Color</label></th><td><input name="color_btn_text" type="color" value="<?php echo esc_attr($c_btn_text); ?>"></td></tr>
                        </table>
                    </div>
                </div>

                <div id="tab-footer" class="sp-tab-content">
                    <div class="sp-admin-card">
                        <h3>Footer Column Titles</h3>
                        <p style="color:#64748b; margin-top:-10px; margin-bottom: 20px;">Set the titles for the footer columns. Note: Column 4 automatically displays your 5 most recent blog posts. Columns left completely empty (no menu items/posts) will be hidden automatically.</p>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Column 1 Title</label></th><td><input name="footer_col_1_title" type="text" value="<?php echo esc_attr($col1_title); ?>" placeholder="About us"></td></tr>
                            <tr><th scope="row"><label>Column 2 Title</label></th><td><input name="footer_col_2_title" type="text" value="<?php echo esc_attr($col2_title); ?>" placeholder="Casino reviews"></td></tr>
                            <tr><th scope="row"><label>Column 3 Title</label></th><td><input name="footer_col_3_title" type="text" value="<?php echo esc_attr($col3_title); ?>" placeholder="Game guides"></td></tr>
                            <tr><th scope="row"><label>Column 4 Title (Latest News)</label></th><td><input name="footer_col_4_title" type="text" value="<?php echo esc_attr($col4_title); ?>" placeholder="News"></td></tr>
                            <tr><th scope="row"><label>Column 5 Title</label></th><td><input name="footer_col_5_title" type="text" value="<?php echo esc_attr($col5_title); ?>" placeholder="Resources"></td></tr>
                        </table>
                    </div>

                    <div class="sp-admin-card">
                        <h3>Bottom Footer Details</h3>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Footer Logo URL</label></th><td><input name="footer_logo" type="url" value="<?php echo esc_attr($f_logo); ?>" placeholder="/wp-content/uploads/..."></td></tr>
                            <tr><th scope="row"><label>About Text</label></th><td><textarea name="footer_desc" rows="3" placeholder="Spin Pulse is the world's leading independent online gaming authority..."><?php echo esc_textarea($f_desc); ?></textarea></td></tr>
                            <tr><th scope="row" colspan="2" style="padding-top:30px;"><strong style="font-size:16px;">Social Links</strong><br><span style="font-weight:normal; font-size:12px; color:#666;">Leave blank to hide the icon</span></th></tr>
                            <tr><th scope="row"><label>Twitter (X)</label></th><td><input name="social_tw" type="url" value="<?php echo esc_attr($s_tw); ?>" placeholder="https://twitter.com/..."></td></tr>
                            <tr><th scope="row"><label>Facebook</label></th><td><input name="social_fb" type="url" value="<?php echo esc_attr($s_fb); ?>" placeholder="https://facebook.com/..."></td></tr>
                            <tr><th scope="row"><label>YouTube</label></th><td><input name="social_yt" type="url" value="<?php echo esc_attr($s_yt); ?>" placeholder="https://youtube.com/..."></td></tr>
                            <tr><th scope="row"><label>Instagram</label></th><td><input name="social_ig" type="url" value="<?php echo esc_attr($s_ig); ?>" placeholder="https://instagram.com/..."></td></tr>
                            <tr><th scope="row"><label>Blog</label></th><td><input name="social_blog" type="url" value="<?php echo esc_attr($s_blog); ?>" placeholder="https://.../blog"></td></tr>
                            <tr><th scope="row" colspan="2" style="padding-top:30px;"><strong style="font-size:16px;">Addresses Block</strong></th></tr>
                            <tr><th scope="row"><label>Title</label></th><td><input name="address_title" type="text" value="<?php echo esc_attr($addr_title); ?>" placeholder="Correspondence Addresses"></td></tr>
                            <tr><th scope="row"><label>Address Column 1</label></th><td><textarea name="address_1" rows="3" placeholder="4 Redheughs Rigg..."><?php echo esc_textarea($addr_1); ?></textarea></td></tr>
                            <tr><th scope="row"><label>Address Column 2</label></th><td><textarea name="address_2" rows="3" placeholder="111 2nd Avenue South..."><?php echo esc_textarea($addr_2); ?></textarea></td></tr>
                        </table>
                    </div>

                    <div class="sp-admin-card">
                        <h3>Trust & Compliance Badges (Bottom Row)</h3>
                        <p style="color:#64748b; margin-top:-10px; margin-bottom: 20px;">Upload image URLs for compliance logos (e.g., 18+, eCogra, GambleAware). These appear horizontally above the copyright text.</p>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Badge 1 Image URL</label></th><td><input name="footer_badge_1" type="url" value="<?php echo esc_attr($f_b1); ?>" placeholder="https://yoursite.com/wp-content/uploads/..."></td></tr>
                            <tr><th scope="row"><label>Badge 2 Image URL</label></th><td><input name="footer_badge_2" type="url" value="<?php echo esc_attr($f_b2); ?>" placeholder="https://yoursite.com/wp-content/uploads/..."></td></tr>
                            <tr><th scope="row"><label>Badge 3 Image URL</label></th><td><input name="footer_badge_3" type="url" value="<?php echo esc_attr($f_b3); ?>" placeholder="https://yoursite.com/wp-content/uploads/..."></td></tr>
                            <tr><th scope="row"><label>Badge 4 Image URL</label></th><td><input name="footer_badge_4" type="url" value="<?php echo esc_attr($f_b4); ?>" placeholder="https://yoursite.com/wp-content/uploads/..."></td></tr>
                            <tr><th scope="row"><label>Badge 5 Image URL</label></th><td><input name="footer_badge_5" type="url" value="<?php echo esc_attr($f_b5); ?>" placeholder="https://yoursite.com/wp-content/uploads/..."></td></tr>
                            <tr><th scope="row"><label>Badge 6 Image URL</label></th><td><input name="footer_badge_6" type="url" value="<?php echo esc_attr($f_b6); ?>" placeholder="https://yoursite.com/wp-content/uploads/..."></td></tr>
                        </table>
                    </div>

                    <div class="sp-admin-card">
                        <h3>Footer Colors</h3>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Background Color</label></th><td><input name="color_footer_bg" type="color" value="<?php echo esc_attr($c_f_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Text & Paragraphs</label></th><td><input name="color_footer_text" type="color" value="<?php echo esc_attr($c_f_text); ?>"></td></tr>
                            <tr><th scope="row"><label>Column Headings</label></th><td><input name="color_footer_heading" type="color" value="<?php echo esc_attr($c_f_head); ?>"></td></tr>
                            <tr><th scope="row"><label>Link Color</label></th><td><input name="color_footer_link" type="color" value="<?php echo esc_attr($c_f_link); ?>"></td></tr>
                            <tr><th scope="row"><label>Link Hover Color</label></th><td><input name="color_footer_hover" type="color" value="<?php echo esc_attr($c_f_hover); ?>"></td></tr>
                            <tr><th scope="row"><label>Divider Line Color</label></th><td><input name="color_footer_divider" type="color" value="<?php echo esc_attr($c_f_div); ?>"></td></tr>
                        </table>
                    </div>
                </div>

                <div id="tab-games" class="sp-tab-content">
                    <div class="sp-admin-card">
                        <h3>Game Recommendations Colors</h3>
                        <p style="color:#64748b; margin-top:-10px; margin-bottom: 20px;">Customize the appearance of the horizontal Game Recommendation cards that appear at the bottom of single game pages.</p>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Card Background</label></th><td><input name="game_card_bg" type="color" value="<?php echo esc_attr($c_g_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Game Title</label></th><td><input name="game_card_title" type="color" value="<?php echo esc_attr($c_g_title); ?>"></td></tr>
                            <tr><th scope="row"><label>Play Button Background</label></th><td><input name="game_btn_bg" type="color" value="<?php echo esc_attr($c_g_btn_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Play Button Text</label></th><td><input name="game_btn_text" type="color" value="<?php echo esc_attr($c_g_btn_text); ?>"></td></tr>
                        </table>
                    </div>
                </div>

                <div id="tab-search" class="sp-tab-content">
                    <div class="sp-admin-card">
                        <h3>Search Card Colors</h3>
                        <p style="color:#64748b; margin-top:-10px; margin-bottom: 20px;">Customize the appearance of the horizontal Search Result cards.</p>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Card Background</label></th><td><input name="search_card_bg" type="color" value="<?php echo esc_attr($c_s_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Title Color</label></th><td><input name="search_card_title" type="color" value="<?php echo esc_attr($c_s_title); ?>"></td></tr>
                            <tr><th scope="row"><label>Title Hover Color (Also used for Read More link)</label></th><td><input name="search_card_title_hover" type="color" value="<?php echo esc_attr($c_s_title_hover); ?>"></td></tr>
                            <tr><th scope="row"><label>Excerpt Color</label></th><td><input name="search_card_excerpt" type="color" value="<?php echo esc_attr($c_s_excerpt); ?>"></td></tr>
                            <tr><th scope="row"><label>Category Badge Background</label></th><td><input name="search_badge_bg" type="color" value="<?php echo esc_attr($c_s_badge); ?>"></td></tr>
                        </table>
                    </div>
                </div>

                <div id="tab-header-search" class="sp-tab-content">
                    <div class="sp-admin-card">
                        <h3>Header Search Bar Colors</h3>
                        <p style="color:#64748b; margin-top:-10px; margin-bottom: 20px;">Customize the colors of the dropdown search bar in your site header.</p>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Input Field Background</label></th><td><input name="search_input_bg" type="color" value="<?php echo esc_attr($c_hs_in_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Input Text Color</label></th><td><input name="search_input_text" type="color" value="<?php echo esc_attr($c_hs_in_text); ?>"></td></tr>
                            <tr><th scope="row"><label>Input Focus Ring Color</label></th><td><input name="search_input_focus" type="color" value="<?php echo esc_attr($c_hs_in_focus); ?>"></td></tr>
                            <tr><th scope="row"><label>Button Background</label></th><td><input name="search_btn_bg" type="color" value="<?php echo esc_attr($c_hs_btn_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Button Hover Background</label></th><td><input name="search_btn_hover" type="color" value="<?php echo esc_attr($c_hs_btn_hover); ?>"></td></tr>
                            <tr><th scope="row"><label>Button Text Color</label></th><td><input name="search_btn_text" type="color" value="<?php echo esc_attr($c_hs_btn_text); ?>"></td></tr>
                        </table>
                    </div>
                </div>

                <div id="tab-article-hero" class="sp-tab-content">
                    <div class="sp-admin-card">
                        <h3>Article Hero Colors (Single Posts & Pages)</h3>
                        <p style="color:#64748b; margin-top:-10px; margin-bottom: 20px;">Customize the colors of the top section (Title, Author, Meta Data) on your standard blog posts and static pages.</p>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Background Color</label></th><td><input name="article_hero_bg" type="color" value="<?php echo esc_attr($c_ah_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Title & Dark Text</label></th><td><input name="article_hero_title" type="color" value="<?php echo esc_attr($c_ah_title); ?>"></td></tr>
                            <tr><th scope="row"><label>Secondary Text (Meta)</label></th><td><input name="article_hero_text" type="color" value="<?php echo esc_attr($c_ah_text); ?>"></td></tr>
                            <tr><th scope="row"><label>Accent Color (Links & Hover)</label></th><td><input name="article_hero_accent" type="color" value="<?php echo esc_attr($c_ah_accent); ?>"></td></tr>
                            <tr><th scope="row"><label>Border & Divider Lines</label></th><td><input name="article_hero_border" type="color" value="<?php echo esc_attr($c_ah_border); ?>"></td></tr>
                            <tr><th scope="row"><label>Icon & Badge Background</label></th><td><input name="article_hero_card_bg" type="color" value="<?php echo esc_attr($c_ah_card_bg); ?>"></td></tr>
                        </table>
                    </div>
                </div>

                <div id="tab-review-hero" class="sp-tab-content">
                    <div class="sp-admin-card">
                        <h3>Review Hero Colors (Casino Reviews)</h3>
                        <p style="color:#64748b; margin-top:-10px; margin-bottom: 20px;">Customize the colors of the dark top section specifically on your Casino Review pages.</p>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Background Color</label></th><td><input name="review_hero_bg" type="color" value="<?php echo esc_attr($c_rh_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Thick Bottom Border</label></th><td><input name="review_hero_border_btm" type="color" value="<?php echo esc_attr($c_rh_border_btm); ?>"></td></tr>
                            <tr><th scope="row"><label>Main Text & Title</label></th><td><input name="review_hero_title" type="color" value="<?php echo esc_attr($c_rh_title); ?>"></td></tr>
                            <tr><th scope="row"><label>Secondary Text (Meta)</label></th><td><input name="review_hero_text" type="color" value="<?php echo esc_attr($c_rh_text); ?>"></td></tr>
                            <tr><th scope="row"><label>Accent Color (Stars, Links)</label></th><td><input name="review_hero_accent" type="color" value="<?php echo esc_attr($c_rh_accent); ?>"></td></tr>
                            <tr><th scope="row"><label>Verified Badge Background</label></th><td><input name="review_hero_badge_bg" type="color" value="<?php echo esc_attr($c_rh_badge_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Verified Badge Text</label></th><td><input name="review_hero_badge_text" type="color" value="<?php echo esc_attr($c_rh_badge_text); ?>"></td></tr>
                        </table>
                    </div>
                </div>

                <div id="tab-game-hero" class="sp-tab-content">
                    <div class="sp-admin-card">
                        <h3>Game Hero Colors (Casino Games)</h3>
                        <p style="color:#64748b; margin-top:-10px; margin-bottom: 20px;">Customize the colors of the dark top section specifically on your Casino Game pages.</p>
                        <table class="form-table" role="presentation">
                            <tr><th scope="row"><label>Background Color</label></th><td><input name="game_hero_bg" type="color" value="<?php echo esc_attr($c_gh_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Thick Bottom Border</label></th><td><input name="game_hero_border_btm" type="color" value="<?php echo esc_attr($c_gh_border_btm); ?>"></td></tr>
                            <tr><th scope="row"><label>Main Text & Title</label></th><td><input name="game_hero_title" type="color" value="<?php echo esc_attr($c_gh_title); ?>"></td></tr>
                            <tr><th scope="row"><label>Secondary Text (Meta)</label></th><td><input name="game_hero_text" type="color" value="<?php echo esc_attr($c_gh_text); ?>"></td></tr>
                            <tr><th scope="row"><label>Accent Color (Stars, Links)</label></th><td><input name="game_hero_accent" type="color" value="<?php echo esc_attr($c_gh_accent); ?>"></td></tr>
                            <tr><th scope="row"><label>Verified Badge Background</label></th><td><input name="game_hero_badge_bg" type="color" value="<?php echo esc_attr($c_gh_badge_bg); ?>"></td></tr>
                            <tr><th scope="row"><label>Verified Badge Text</label></th><td><input name="game_hero_badge_text" type="color" value="<?php echo esc_attr($c_gh_badge_text); ?>"></td></tr>
                        </table>
                    </div>
                </div>

                <p class="submit" style="margin-bottom: 50px;">
                    <input type="submit" name="sp_settings_save" id="submit" class="sp-save-btn" value="Save All Settings">
                </p>
            </form>
        </div>
    </div>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const links = document.querySelectorAll('.sp-tab-link');
        const contents = document.querySelectorAll('.sp-tab-content');

        links.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Remove active from all
                links.forEach(l => l.classList.remove('active'));
                contents.forEach(c => c.classList.remove('active'));

                // Add active to clicked
                this.classList.add('active');
                document.getElementById(this.getAttribute('data-target')).classList.add('active');
            });
        });
    });
    </script>
    <?php
}

/* ==========================================================================
   SPIN PULSE: ONE CLICK DEMO IMPORT INTEGRATION
   ========================================================================== */

// 1. Define the Demo Files
function spin_pulse_import_files() {
    return array(
        array(
            'import_file_name'             => 'Spin Pulse Default Demo',
            'categories'                   => array( 'Casino Affiliate' ),
            'local_import_file'            => trailingslashit( get_template_directory() ) . 'demo-data/content.xml',
            'local_import_widget_file'     => trailingslashit( get_template_directory() ) . 'demo-data/widgets.wie',
            'import_preview_image_url'     => '/screenshot.png',
            'import_notice'                => __( 'Please ensure you have installed all required plugins before running this import. This will replicate the live demo layout.', 'spin-pulse' ),
        ),
    );
}
add_filter( 'pt-ocdi/import_files', 'spin_pulse_import_files' );

// 2. Automate Post-Import Setup (Set Home Page & Menus)
function spin_pulse_after_import_setup() {
    // Assign menus to their locations automatically
    $main_menu = get_term_by( 'name', 'Primary Menu', 'nav_menu' ); 
    $footer_menu_1 = get_term_by( 'name', 'Footer Menu 1', 'nav_menu' ); 

    if ( $main_menu || $footer_menu_1 ) {
        set_theme_mod( 'nav_menu_locations', array(
            'menu-1' => $main_menu ? $main_menu->term_id : '',
            'footer-menu-1' => $footer_menu_1 ? $footer_menu_1->term_id : '',
        ) );
    }

    // IMPORTANT: Ensure "Home" exactly matches the post_title in your content.xml
    $front_page = get_page_by_title( 'Home' );
    $blog_page  = get_page_by_title( 'News' );

    if ( $front_page ) {
        update_option( 'show_on_front', 'page' );
        update_option( 'page_on_front', $front_page->ID );
    }

    if ( $blog_page ) {
        update_option( 'page_for_posts', $blog_page->ID );
    }
}
add_action( 'pt-ocdi/after_import', 'spin_pulse_after_import_setup' );

// 3. Disable OCDI branding to keep your theme looking professional
add_filter( 'pt-ocdi/disable_pt_branding', '__return_true' );



/* ==========================================================================
   TGM PLUGIN ACTIVATION
   ========================================================================== */
$tgm_path = get_template_directory() . '/inc/class-tgm-plugin-activation.php';

// Only load TGM if the file actually exists to prevent fatal errors
if ( file_exists( $tgm_path ) ) {
    require_once $tgm_path;
    add_action( 'tgmpa_register', 'spin_pulse_register_required_plugins' );
}

function spin_pulse_register_required_plugins() {
    $plugins = array(
        // 1. bundled Core Plugin (Required)
        array(
            'name'               => 'Spin Pulse Core',
            'slug'               => 'spin-pulse-core',
            'source'             => get_template_directory() . '/plugins/spin-pulse-core.zip',
            'required'           => true,
            'version'            => '1.0.0',
            'force_activation'   => false,
            'force_deactivation' => false,
        ),
        // 2. One Click Demo Import (Recommended/Required for setup)
        array(
            'name'      => 'One Click Demo Import',
            'slug'      => 'one-click-demo-import',
            'required'  => true,
        ),
    );

    $config = array(
        'id'           => 'spin-pulse',            // Unique ID for hashing notices for multiple instances of TGMPA.
        'default_path' => '',                      // Default absolute path to bundled plugins.
        'menu'         => 'tgmpa-install-plugins', // Menu slug.
        'has_notices'  => true,                    // Show admin notices or not.
        'dismissable'  => true,                    // If false, a user cannot dismiss the nag message.
        'dismiss_msg'  => '',                      // If 'dismissable' is false, this message will be output at top of nag.
        'is_automatic' => true,                    // Automatically activate plugins after installation or not.
        'message'      => '',                      // Message to output right before the plugins table.
    );

    tgmpa( $plugins, $config );
}

8. Credits & Licenses

We have used the following open-source projects, fonts, and assets in the creation of Spin Pulse. We are deeply grateful to these authors for their work.

Tailwind CSS

Used for utility styling. Licensed under the MIT License. tailwindcss.com

Font Awesome

Used for theme icons. Licensed under Font Awesome Free License / CC BY 4.0. fontawesome.com

Google Fonts

Plus Jakarta Sans & Inter used for typography. Licensed under the SIL Open Font License (OFL). fonts.google.com

Demo Images (Unsplash)

Images used in the live preview and One Click Demo Import are free for commercial use under the Unsplash License. unsplash.com

TGM Plugin Activation

Used for requiring bundled plugins. Licensed under the GNU General Public License v2.0. tgmpluginactivation.com


9. Support

We provide extensive support for all verified Envato buyers. Support includes bug fixes, theme functionality clarification, and help with bundled plugins.

Support does not include custom coding, server configurations, or third-party plugin conflicts.

Visit the Support Center