<?php

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly  

include $this->topbar_file;

?>

<div class="wrap pssg_wrap pssg-content">

    <h1 class="wp-heading"></h1>
    <div class="fieldwrap">

        <div class="pssg-section-panel quick-edit-section multiple-site-connection-demo pssg-multisite-modern" id="quick-edit-section" data-icon="pssg_icon-home">
            
            <!-- Modern Header Card -->
            <div class="pssg-multisite-header-card">
                <div class="pssg-multisite-header-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" 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>
                        <line x1="2" y1="12" x2="22" y2="12"></line>
                        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
                    </svg>
                </div>
                <div class="pssg-multisite-header-content">
                    <h2><?php esc_html_e('Multiple Site Connection', 'product-sync-master-sheet'); ?></h2>
                    <p><?php esc_html_e('Sync your WooCommerce stock across multiple WordPress sites seamlessly. Connect your stores and keep inventory synchronized automatically.', 'product-sync-master-sheet'); ?></p>
                </div>
            </div>

            <form action="#" method="post" id="pssg-multisite-form" class="pssg-multisite-form-parent">
                
                <!-- Connection Type Section -->
                <div class="pssg-multisite-section">
                    <div class="pssg-section-header">
                        <div class="pssg-section-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 20h9"></path>
                                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                            </svg>
                        </div>
                        <h3><?php esc_html_e('API Connection Type', 'product-sync-master-sheet'); ?></h3>
                    </div>
                    <div class="pssg-section-body">
                        <div class="pssg-form-group">
                            <label for="connection-type"><?php esc_html_e('Select Connection Mode', 'product-sync-master-sheet'); ?></label>
                            <select name="pssg-connection-setting[type]" id="connection-type" class="site-type-changer-dropdown pssg-modern-select">
                                <option value=""><?php esc_html_e('Disable API Connection', 'product-sync-master-sheet'); ?></option>
                                <option value="child"><?php esc_html_e('Enable as Child (Share permission to Parent)', 'product-sync-master-sheet'); ?></option>
                                <option value="parent" selected="selected"><?php esc_html_e('Enable as Parent (Able to add Child Sites)', 'product-sync-master-sheet'); ?></option>
                            </select>
                            <p class="pssg-field-description"><?php esc_html_e('Choose how this site will participate in the multi-site sync network.', 'product-sync-master-sheet'); ?></p>
                        </div>
                        
                        <div class="pssg-info-box">
                            <div class="pssg-info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
                                    <line x1="12" y1="16" x2="12" y2="12"></line>
                                    <line x1="12" y1="8" x2="12.01" y2="8"></line>
                                </svg>
                            </div>
                            <div class="pssg-info-content">
                                <strong><?php esc_html_e('How it works:', 'product-sync-master-sheet'); ?></strong>
                                <ul>
                                    <li><strong><?php esc_html_e('Parent Site:', 'product-sync-master-sheet'); ?></strong> <?php esc_html_e('The main site connected to Google Sheet. It manages and distributes stock updates to all child sites.', 'product-sync-master-sheet'); ?></li>
                                    <li><strong><?php esc_html_e('Child Site:', 'product-sync-master-sheet'); ?></strong> <?php esc_html_e('Receives stock updates from the parent site. Stock changes sync automatically with the parent.', 'product-sync-master-sheet'); ?></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Site Credentials Section -->
                <div class="pssg-multisite-section">
                    <div class="pssg-section-header">
                        <div class="pssg-section-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                            </svg>
                        </div>
                        <h3><?php esc_html_e('Your Site Credentials', 'product-sync-master-sheet'); ?></h3>
                    </div>
                    <div class="pssg-section-body">
                        <p class="pssg-section-description"><?php esc_html_e('Share these credentials with other sites that need to connect to this site.', 'product-sync-master-sheet'); ?></p>
                        
                        <div class="pssg-credential-row">
                            <div class="pssg-form-group">
                                <label><?php esc_html_e('Site URL', 'product-sync-master-sheet'); ?></label>
                                <div class="pssg-input-with-copy">
                                    <input type="text" class="pssg-modern-input" value="<?php echo esc_attr( site_url() ); ?>" readonly>
                                    <button type="button" class="pssg-copy-btn" title="<?php esc_attr_e('Copy to clipboard', 'product-sync-master-sheet'); ?>">
                                        <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">
                                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                            <div class="pssg-form-group">
                                <label><?php esc_html_e('Access Token', 'product-sync-master-sheet'); ?></label>
                                <div class="pssg-input-with-copy">
                                    <input type="text" class="pssg-modern-input pssg-token-masked" value="97C65B09CCF5814FBDD8B418AD22C*******************************************" readonly>
                                    <button type="button" class="pssg-copy-btn" title="<?php esc_attr_e('Copy to clipboard', 'product-sync-master-sheet'); ?>">
                                        <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">
                                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Parent Site Connection (for Child mode) -->
                <div class="pssg-multisite-section connect-parent-site-area pssg-multisite-setting-panel">
                    <div class="pssg-section-header">
                        <div class="pssg-section-icon pssg-icon-parent">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                <polyline points="9 22 9 12 15 12 15 22"></polyline>
                            </svg>
                        </div>
                        <h3><?php esc_html_e('Connect to Parent Site', 'product-sync-master-sheet'); ?></h3>
                    </div>
                    <div class="pssg-section-body">
                        <div class="pssg-alert pssg-alert-info">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
                                <line x1="12" y1="16" x2="12" y2="12"></line>
                                <line x1="12" y1="8" x2="12.01" y2="8"></line>
                            </svg>
                            <span><?php esc_html_e('Enter the full URL and 68-character Access Token from your parent site apply. Do not include wp-admin or wp-json in the URL.', 'product-sync-master-sheet'); ?></span>
                        </div>
                        
                        <div class="pssg-connected-sites-wrapper" data-my_nonce="demo">
                            <div class="pssg-site-connection-card">
                                <div class="pssg-form-group">
                                    <label><?php esc_html_e('Parent Site URL', 'product-sync-master-sheet'); ?></label>
                                    <input type="url" name="pssg-connection-setting[parent_site_access][url]" class="pssg-modern-input site-url-input" placeholder="https://parent-site.com/">
                                </div>
                                <div class="pssg-form-group">
                                    <label><?php esc_html_e('Parent Site Access Token', 'product-sync-master-sheet'); ?></label>
                                    <input type="text" name="pssg-connection-setting[parent_site_access][token]" class="pssg-modern-input" placeholder="<?php esc_attr_e('68-character Access Token', 'product-sync-master-sheet'); ?>">
                                </div>
                            </div>
                            <div class="pssg-connection-actions">
                                <button type="button" id="pssg-connect-site-check-connection-btn" class="pssg-btn pssg-btn-primary">
                                    <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">
                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                    </svg>
                                    <?php esc_html_e('Check Connection', 'product-sync-master-sheet'); ?>
                                </button>
                            </div>
                            <div class="connection-response-wrapper"></div>
                        </div>
                    </div>
                </div>

                <!-- Child Sites Connection (for Parent mode) -->
                <div class="pssg-multisite-section connect-other-site-area pssg-multisite-setting-panel">
                    <div class="pssg-section-header">
                        <div class="pssg-section-icon pssg-icon-child">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                <circle cx="9" cy="7" r="4"></circle>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                            </svg>
                        </div>
                        <h3><?php esc_html_e('Connected Child Sites', 'product-sync-master-sheet'); ?></h3>
                    </div>
                    <div class="pssg-section-body">
                        <div class="pssg-alert pssg-alert-info">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
                                <line x1="12" y1="16" x2="12" y2="12"></line>
                                <line x1="12" y1="8" x2="12.01" y2="8"></line>
                            </svg>
                            <span><?php esc_html_e('Add your child sites below. Each site needs its full URL and 68-character Access Token apply. You can add up to 5 child sites.', 'product-sync-master-sheet'); ?></span>
                        </div>
                        
                        <div class="pssg-connected-sites-wrapper" data-my_nonce="demo" data-max_connected_site="5">
                            <div class="pssg-site-connection-card pssg-connected-site-single pssg-connected-site-single-1">
                                <div class="pssg-form-group">
                                    <label><?php esc_html_e('Site URL', 'product-sync-master-sheet'); ?></label>
                                    <input type="url" name="pssg-connection-setting[connected_sites][1][url]" class="pssg-modern-input site-url-input" placeholder="https://child-site.com/">
                                </div>
                                <div class="pssg-form-group">
                                    <label><?php esc_html_e('Access Token', 'product-sync-master-sheet'); ?></label>
                                    <input type="text" name="pssg-connection-setting[connected_sites][1][token]" class="pssg-modern-input site-access-token-input" placeholder="<?php esc_attr_e('68-character Access Token', 'product-sync-master-sheet'); ?>">
                                </div>
                                <button type="button" class="pssg-remove-site-btn pssg-remove-connected-site-btn" title="<?php esc_attr_e('Remove this site', 'product-sync-master-sheet'); ?>">
                                    <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">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg>
                                </button>
                            </div>
                            
                            <div class="pssg-connection-actions">
                                <button type="button" id="pssg-connect-site-add-new-btn" class="pssg-btn pssg-btn-secondary">
                                    <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">
                                        <line x1="12" y1="5" x2="12" y2="19"></line>
                                        <line x1="5" y1="12" x2="19" y2="12"></line>
                                    </svg>
                                    <?php esc_html_e('Add New Site', 'product-sync-master-sheet'); ?>
                                </button>
                                <button type="button" id="pssg-connect-site-check-connection-btn" class="pssg-btn pssg-btn-primary">
                                    <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">
                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                    </svg>
                                    <?php esc_html_e('Check Connection', 'product-sync-master-sheet'); ?>
                                </button>
                            </div>
                            <div class="connection-response-wrapper"></div>
                        </div>
                    </div>
                </div>

                <!-- Premium CTA -->
                <div class="pssg-multisite-section pssg-premium-cta">
                    <div class="pssg-premium-cta-content">
                        <div class="pssg-premium-badge">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                            </svg>
                            <span><?php esc_html_e('Premium Feature', 'product-sync-master-sheet'); ?></span>
                        </div>
                        <h3><?php esc_html_e('Unlock Multiple Site Connection', 'product-sync-master-sheet'); ?></h3>
                        <p><?php esc_html_e('Upgrade to Premium to sync your WooCommerce inventory across multiple WordPress sites automatically.', 'product-sync-master-sheet'); ?></p>
                        <a href="https://codeastrology.com/sync-master-sheet/pricing/" target="_blank" class="pssg-btn pssg-btn-premium">
                            <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">
                                <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
                                <line x1="3" y1="6" x2="21" y2="6"></line>
                                <path d="M16 10a4 4 0 0 1-8 0"></path>
                            </svg>
                            <?php esc_html_e('Get Premium Now', 'product-sync-master-sheet'); ?>
                        </a>
                    </div>
                </div>

            </form>

        </div>

    </div>
</div>

<style>
/* Modern Multiple Site Connection Styles */
.pssg-multisite-modern {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pssg-multisite-header-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(135deg, #673AB7 0%, #673AB7 100%);
    border-radius: 16px;
    margin-bottom: 24px;
    color: white;
}

.pssg-multisite-header-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pssg-multisite-header-icon svg { color: white; }

.pssg-multisite-header-content h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.pssg-multisite-header-content p {
    margin: 0;
    font-size: 16px;
    opacity: 0.9;
    line-height: 1.6;
}

.pssg-multisite-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.pssg-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e5e7eb;
}

.pssg-section-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #673AB7 0%, #673AB7 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.pssg-section-icon.pssg-icon-parent { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.pssg-section-icon.pssg-icon-child { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

.pssg-section-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: #1e293b; }
.pssg-section-body { padding: 24px; }
.pssg-section-description { margin: 0 0 20px 0; color: #64748b; font-size: 14px; }

.pssg-form-group { margin-bottom: 16px; }
.pssg-form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #374151; font-size: 14px; }

.pssg-modern-input, .pssg-modern-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: #f9fafb;
}

.pssg-modern-input:focus, .pssg-modern-select:focus {
    outline: none;
    border-color: #673AB7;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.pssg-modern-input[readonly] { background: #f1f5f9; color: #475569; }
.pssg-token-masked { font-family: monospace; font-size: 13px; }
.pssg-field-description { margin: 8px 0 0 0; font-size: 13px; color: #6b7280; }

.pssg-input-with-copy { display: flex; gap: 8px; }
.pssg-input-with-copy .pssg-modern-input { flex: 1; }

.pssg-copy-btn {
    padding: 12px 16px;
    background: #f1f5f9;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748b;
}

.pssg-copy-btn:hover { background: #673AB7; border-color: #673AB7; color: white; }
.pssg-credential-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

.pssg-info-box {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    margin-top: 20px;
}

.pssg-info-icon { color: #3b82f6; flex-shrink: 0; }
.pssg-info-content { font-size: 14px; color: #1e40af; }
.pssg-info-content strong { color: #1e3a8a; }
.pssg-info-content ul { margin: 12px 0 0 0; padding-left: 20px; }
.pssg-info-content li { margin-bottom: 8px; line-height: 1.5; }

.pssg-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.pssg-alert svg { flex-shrink: 0; margin-top: 2px; }
.pssg-alert-info { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 1px solid #7dd3fc; color: #0369a1; }
.pssg-alert-info svg { color: #0284c7; }

.pssg-site-connection-card {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    transition: all 0.2s ease;
}

.pssg-site-connection-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
.pssg-site-connection-card .pssg-form-group { margin-bottom: 12px; }
.pssg-site-connection-card .pssg-form-group:last-of-type { margin-bottom: 0; }

.pssg-remove-site-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #fee2e2;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    transition: all 0.2s ease;
}

.pssg-remove-site-btn:hover { background: #dc2626; color: white; }
.pssg-connection-actions { display: flex; gap: 12px; margin-top: 16px; }

.pssg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

.pssg-btn-primary { background: linear-gradient(135deg, #673AB7 0%, #673AB7 100%); color: white; }
.pssg-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }
.pssg-btn-secondary { background: white; color: #374151; border: 2px solid #e5e7eb; }
.pssg-btn-secondary:hover { border-color: #673AB7; color: #673AB7; }

.pssg-btn-premium { background: linear-gradient(135deg, #9C27B0 0%, #9C27B0 100%); color: white; padding: 14px 32px; font-size: 16px; }
.pssg-btn-premium:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(156, 39, 176, 0.4); color: white; }

.pssg-premium-cta { background: white; border: 0 none; text-align: center; }
.pssg-premium-cta-content { padding: 40px; }

.pssg-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #00b894 0%, #00b894 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.pssg-premium-cta h3 { margin: 0 0 12px 0; font-size: 24px; color: #000000; }
.pssg-premium-cta p { margin: 0 0 24px 0; color: #616161; font-size: 16px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; }

.connection-response-wrapper { padding: 20px; background: #f0f9ff; border: 1px solid #7dd3fc; margin: 20px 0 0 0; display: none; border-radius: 10px; }
.connection-response-wrapper > span { color: #0369a1; font-size: 16px; font-weight: 500; }
.connection-response-wrapper > span.error { color: #dc2626; }
.connection-response-wrapper h2 { color: #0c4a6e; font-weight: 700; margin: 0 0 12px 0; font-size: 18px; }
.connection-response-wrapper > div { border: 1px solid #e0f2fe; margin: 12px 0; padding: 16px 20px; border-radius: 8px; background: white; }
.connection-response-wrapper > div.pssg-con-stat-success-box { border-color: #86efac; background: #f0fdf4; }
.pssg-con-stat-success-box li { color: #166534; }
.pssg-con-stat-success-box h4 { font-weight: 600; color: #14532d; margin: 0 0 8px 0; }
.pssg-con-stat-warning-box { color: #9a3412; border-color: #fed7aa !important; background: #fff7ed !important; }
.pssg-con-stat-warning-box h4 { color: #c2410c; font-weight: 600; font-size: 16px; margin: 0 0 8px 0; }

.pssg-multisite-setting-panel { display: none; }
form.pssg-multisite-form-parent .connect-other-site-area.pssg-multisite-setting-panel,
form.pssg-multisite-form-child .connect-parent-site-area.pssg-multisite-setting-panel { display: block; }

@media (max-width: 768px) {
    .pssg-multisite-header-card { flex-direction: column; text-align: center; padding: 24px; }
    .pssg-credential-row { grid-template-columns: 1fr; }
    .pssg-connection-actions { flex-direction: column; }
    .pssg-btn { justify-content: center; }
}
</style>
