/**
 * Salon Hisab - Floating Theme Picker
 * Applies theme ONLY to phone screens, not to page header/body
 */

(function() {
  'use strict';

  // 4 Theme presets - only applied to .phone elements
  const themes = {
    orange: {
      name: 'Orange',
      light: '#f7b755',
      medium: '#f6b24e',
      dark: '#d48a1f',
      css: {
        '--primary': '#d48a1f',
        '--primary-light': '#fff7ed',
        '--primary-mid': '#f6b24e',
        '--primary-dark': '#c27a15',
        '--lavender-light': '#fff7ed',
        '--lavender-medium': '#f6b24e',
        '--lavender-dark': '#d48a1f'
      },
      headerBg: '#fff7ed'
    },
    lavender: {
      name: 'Lavender',
      light: '#e6e1f7',
      medium: '#c5b9f5',
      dark: '#8c7ae6',
      css: {
        '--primary': '#8c7ae6',
        '--primary-light': '#f5f3ff',
        '--primary-mid': '#c5b9f5',
        '--primary-dark': '#7c3aed',
        '--lavender-light': '#f5f3ff',
        '--lavender-medium': '#c5b9f5',
        '--lavender-dark': '#8c7ae6'
      },
      headerBg: '#f5f3ff'
    },
    blue: {
      name: 'Blue',
      light: '#a9c7ec',
      medium: '#8eb5e3',
      dark: '#5d8fcc',
      css: {
        '--primary': '#3b82f6',
        '--primary-light': '#eff6ff',
        '--primary-mid': '#93c5fd',
        '--primary-dark': '#2563eb',
        '--lavender-light': '#eff6ff',
        '--lavender-medium': '#93c5fd',
        '--lavender-dark': '#3b82f6'
      },
      headerBg: '#eff6ff'
    },
    pink: {
      name: 'Pink',
      light: '#eba9ec',
      medium: '#e88aef',
      dark: '#c35dcc',
      css: {
        '--primary': '#ec4899',
        '--primary-light': '#fdf2f8',
        '--primary-mid': '#f9a8d4',
        '--primary-dark': '#db2777',
        '--lavender-light': '#fdf2f8',
        '--lavender-medium': '#f9a8d4',
        '--lavender-dark': '#ec4899'
      },
      headerBg: '#fdf2f8'
    }
  };

  // Dark mode variants - applied to .phone elements only
  const darkModes = {
    off: {
      name: 'Light',
      css: {
        '--surface': '#F9FAFB',
        '--surface-alt': '#F3F4F6',
        '--white': '#FFFFFF',
        '--text-primary': '#111827',
        '--text-secondary': '#6B7280',
        '--border': '#E5E7EB',
        '--border-light': '#F3F4F6',
        '--lavender-light': '#e6e1f7',
        '--blue-light': '#a9c7ec',
        '--orange-light': '#f7b755',
        '--pink-light': '#eba9ec',
        '--primary-light': '#eff6ff'
      },
      phoneBg: '#FFFFFF',
      pageBg: '#1a1a2e'
    },
    slate: {
      name: 'Slate',
      css: {
        '--surface': '#1e293b',
        '--surface-alt': '#334155',
        '--white': '#0f172a',
        '--text-primary': '#f1f5f9',
        '--text-secondary': '#94a3b8',
        '--border': '#475569',
        '--border-light': '#334155',
        '--lavender-light': '#1e293b',
        '--blue-light': '#1e293b',
        '--orange-light': '#1e293b',
        '--pink-light': '#1e293b',
        '--primary-light': '#1e293b'
      },
      phoneBg: '#0f172a',
      pageBg: '#ffffff'
    },
    black: {
      name: 'Black',
      css: {
        '--surface': '#0a0a0a',
        '--surface-alt': '#171717',
        '--white': '#000000',
        '--text-primary': '#FAFAFA',
        '--text-secondary': '#A1A1AA',
        '--border': '#27272a',
        '--border-light': '#3f3f46',
        '--lavender-light': '#171717',
        '--blue-light': '#171717',
        '--orange-light': '#171717',
        '--pink-light': '#171717',
        '--primary-light': '#171717'
      },
      phoneBg: '#000000',
      pageBg: '#ffffff'
    }
  };

  // Font options
  const fonts = {
    inter: {
      name: 'Inter',
      family: "'Inter', sans-serif",
      url: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'
    },
    bricolage: {
      name: 'Bricolage',
      family: "'Bricolage Grotesque', sans-serif",
      url: 'https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap'
    },
    opensans: {
      name: 'Open Sans',
      family: "'Open Sans', sans-serif",
      url: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'
    },
    montserrat: {
      name: 'Montserrat',
      family: "'Montserrat', sans-serif",
      url: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'
    },
    poppins: {
      name: 'Poppins',
      family: "'Poppins', sans-serif",
      url: 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'
    }
  };

  // Default: Blue theme, Light mode, Inter font
  let currentTheme = 'blue';
  let currentDarkMode = 'off';
  let currentFont = 'inter';

  // Load font stylesheet
  function loadFont(fontKey) {
    const font = fonts[fontKey];
    if (!font) return;
    
    // Remove old font link if exists
    const oldLink = document.getElementById('theme-font-link');
    if (oldLink) oldLink.remove();
    
    // Add new font link
    const link = document.createElement('link');
    link.id = 'theme-font-link';
    link.rel = 'stylesheet';
    link.href = font.url;
    document.head.appendChild(link);
  }

  // Apply font
  function applyFont(fontKey) {
    const font = fonts[fontKey];
    if (!font) return;
    
    currentFont = fontKey;
    loadFont(fontKey);
    
    // Apply font to phones
    document.querySelectorAll('.phone').forEach(phone => {
      phone.style.fontFamily = font.family;
    });
    
    // Update CSS variable
    document.documentElement.style.setProperty('--font-family', font.family);
    
    localStorage.setItem('salonFont', fontKey);
    updateActiveButton('font', fontKey);
  }

  // Apply theme to phone screens only
  function applyTheme(themeName) {
    const theme = themes[themeName];
    if (!theme) return;
    
    currentTheme = themeName;
    
    // Apply CSS variables to root (for phone screens)
    Object.entries(theme.css).forEach(([prop, value]) => {
      document.documentElement.style.setProperty(prop, value);
    });
    
    // Update header background
    document.documentElement.style.setProperty('--header-bg', theme.headerBg);
    
    localStorage.setItem('salonTheme', themeName);
    updateActiveButton('theme', themeName);
  }

  // Apply dark mode to phone screens only
  function applyDarkMode(modeName) {
    const mode = darkModes[modeName];
    if (!mode) return;
    
    currentDarkMode = modeName;
    
    // Apply CSS variables
    Object.entries(mode.css).forEach(([prop, value]) => {
      document.documentElement.style.setProperty(prop, value);
    });
    
    // Update phone backgrounds
    document.querySelectorAll('.phone').forEach(phone => {
      phone.style.background = mode.phoneBg;
    });
    
    document.querySelectorAll('.screen').forEach(screen => {
      screen.style.background = mode.phoneBg;
    });
    
    // Update page background (white for dark modes, dark for light mode)
    document.body.style.background = mode.pageBg;
    
    // Update header based on page background
    const header = document.querySelector('.page-top-bar');
    if (header) {
      if (mode.pageBg === '#ffffff') {
        // White page bg - header should match
        header.style.background = '#f8fafc';
        header.style.borderBottom = '1px solid #e2e8f0';
        // Make nav links dark for visibility
        document.querySelectorAll('.page-top-bar nav a').forEach(a => {
          if (!a.classList.contains('active')) {
            a.style.color = '#1a1a2e';
          }
        });
      } else {
        // Dark page bg - use theme color
        header.style.background = '';
        header.style.borderBottom = '';
        document.querySelectorAll('.page-top-bar nav a').forEach(a => {
          a.style.color = '';
        });
      }
    }
    
    // Update section heading text color based on page bg
    const headings = document.querySelectorAll('.section-heading h2, .section-heading p, .phone-label');
    headings.forEach(el => {
      if (mode.pageBg === '#ffffff') {
        el.style.color = el.classList.contains('phone-label') ? 'rgba(0,0,0,0.4)' : 
                         el.tagName === 'H2' ? '#1a1a2e' : 'rgba(0,0,0,0.5)';
      } else {
        el.style.color = '';
      }
    });
    
    // Update role selection cards and other elements for dark mode
    if (modeName !== 'off') {
      // Role selection card backgrounds - directly target elements with lavender-light bg
      document.querySelectorAll('[style*="background:var(--lavender-light)"], [style*="background: var(--lavender-light)"]').forEach(el => {
        el.style.background = 'rgba(255,255,255,0.08)';
      });
      
      // Role card borders
      document.querySelectorAll('[style*="border:1.5px solid var(--border)"], [style*="border: 1.5px solid var(--border)"]').forEach(el => {
        el.style.borderColor = 'rgba(255,255,255,0.15)';
      });
      
      // Role selection titles - make white
      document.querySelectorAll('.screen div').forEach(el => {
        const text = el.textContent.trim();
        if ((text === 'Salon Owner' || text === 'Worker / Employee' || text === 'Admin') && 
            el.style.fontSize === '17px') {
          el.style.color = '#fff';
        }
      });
      
      // Role descriptions - FORCE white/light color
      document.querySelectorAll('.screen div').forEach(el => {
        const text = el.textContent;
        if (text && (text.includes('Manage stores') || 
            text.includes('Log daily work') || 
            text.includes('Full system control'))) {
          el.style.setProperty('color', 'rgba(255,255,255,0.7)', 'important');
        }
      });
      
      // All 12px description texts in screens
      document.querySelectorAll('.screen [style*="font-size:12px"]').forEach(el => {
        el.style.setProperty('color', 'rgba(255,255,255,0.7)', 'important');
      });
      
      // All secondary text in screens
      document.querySelectorAll('.screen [style*="color:var(--text-secondary)"]').forEach(el => {
        el.style.setProperty('color', 'rgba(255,255,255,0.7)', 'important');
      });
      
      // "Choose your role" and similar main titles 
      document.querySelectorAll('.screen div').forEach(el => {
        const text = el.textContent.trim();
        if ((text === 'Choose your role' || text === 'Welcome back' || text.includes('Sign in')) 
            && (el.style.fontSize === '24px' || el.style.fontSize === '13px')) {
          el.style.color = '#fff';
        }
      });
      
      // Add body class for CSS-based dark mode styling
      document.body.classList.add('dark-mode-active');
      
      // Summary strip styling
      document.querySelectorAll('.summary-strip').forEach(el => {
        el.style.background = 'rgba(255,255,255,0.08)';
        el.style.border = '1px solid rgba(255,255,255,0.1)';
      });
      
      // Worker cards and similar - add border styling for dark mode
      document.querySelectorAll('.worker-card, .kpi-card, .revenue-card').forEach(el => {
        el.style.borderBottom = '1px solid rgba(255,255,255,0.1)';
      });
      
      // Page titles and text elements
      document.querySelectorAll('.page-title').forEach(el => {
        el.style.color = '#fff';
      });
      
      document.querySelectorAll('.page-subtitle').forEach(el => {
        el.style.color = 'rgba(255,255,255,0.7)';
      });
      
      // Update status bar icons to white
      document.querySelectorAll('.status-bar svg, .status-icons svg').forEach(svg => {
        svg.querySelectorAll('rect, path, circle').forEach(el => {
          if (el.getAttribute('fill') && el.getAttribute('fill') !== 'none') {
            el.setAttribute('fill', '#fff');
          }
          if (el.getAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
            el.setAttribute('stroke', '#fff');
          }
        });
      });
      
      // Update status bar time
      document.querySelectorAll('.status-bar .time').forEach(el => {
        el.style.color = '#fff';
      });
      
      // Fix notification/header icons - make them white
      document.querySelectorAll('.icon-btn svg, .dash-header svg').forEach(svg => {
        svg.querySelectorAll('path, rect, circle').forEach(el => {
          if (el.getAttribute('stroke') && el.getAttribute('stroke') === '#1A1A2E') {
            el.setAttribute('stroke', '#fff');
          }
        });
      });
      
      // Fix store selector text and similar secondary text elements
      document.querySelectorAll('.store-selector').forEach(el => {
        el.style.color = '#fff';
      });
      
      document.querySelectorAll('.greeting').forEach(el => {
        el.style.color = 'rgba(255,255,255,0.7)';
      });
      
      document.querySelectorAll('.greeting-name').forEach(el => {
        el.style.color = '#fff';
      });
    } else {
      // Remove dark mode class
      document.body.classList.remove('dark-mode-active');
      
      // Reset role card backgrounds
      document.querySelectorAll('[style*="background:var(--lavender-light)"], [style*="background: var(--lavender-light)"]').forEach(el => {
        el.style.background = '';
      });
      
      // Reset role card borders
      document.querySelectorAll('[style*="border:1.5px solid var(--border)"], [style*="border: 1.5px solid var(--border)"]').forEach(el => {
        el.style.borderColor = '';
      });
      
      // Reset role cards for light mode
      document.querySelectorAll('div').forEach(el => {
        const text = el.textContent.trim();
        if ((text === 'Salon Owner' || text === 'Worker / Employee' || text === 'Admin' || text === 'Choose your role' || text === 'Welcome back' || text === 'Sign in with email') && 
            (el.style.fontSize === '17px' || el.style.fontSize === '24px' || el.style.fontSize === '13px')) {
          el.style.color = '';
        }
      });
      
      document.querySelectorAll('div[style*="font-size:12px"]').forEach(el => {
        if (el.textContent.includes('Manage stores') || 
            el.textContent.includes('Log daily work') || 
            el.textContent.includes('Full system control')) {
          el.style.color = '';
        }
      });
      
      // Reset summary strips and other elements
      document.querySelectorAll('.summary-strip, .worker-card, .kpi-card, .revenue-card, .page-title, .page-subtitle').forEach(el => {
        el.style.background = '';
        el.style.border = '';
        el.style.borderBottom = '';
        el.style.color = '';
      });
      
      // Reset status bar icons to dark
      document.querySelectorAll('.status-bar svg, .status-icons svg').forEach(svg => {
        svg.querySelectorAll('rect, path, circle').forEach(el => {
          if (el.getAttribute('fill') && el.getAttribute('fill') !== 'none') {
            el.setAttribute('fill', '#1A1A2E');
          }
          if (el.getAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
            el.setAttribute('stroke', '#1A1A2E');
          }
        });
      });
      
      // Reset status bar time
      document.querySelectorAll('.status-bar .time').forEach(el => {
        el.style.color = '';
      });
      
      // Reset notification/header icons to dark
      document.querySelectorAll('.icon-btn svg, .dash-header svg').forEach(svg => {
        svg.querySelectorAll('path, rect, circle').forEach(el => {
          if (el.getAttribute('stroke') && el.getAttribute('stroke') === '#fff') {
            el.setAttribute('stroke', '#1A1A2E');
          }
        });
      });
      
      // Reset store selector and greeting text
      document.querySelectorAll('.store-selector, .greeting, .greeting-name').forEach(el => {
        el.style.color = '';
      });
    }
    
    localStorage.setItem('salonDarkMode', modeName);
    updateActiveButton('dark', modeName);
  }

  // Update active button state
  function updateActiveButton(type, value) {
    const selectors = {
      theme: '.theme-btn',
      dark: '.dark-btn',
      font: '.font-btn'
    };
    const attrs = {
      theme: 'data-theme',
      dark: 'data-dark',
      font: 'data-font'
    };
    
    document.querySelectorAll(selectors[type]).forEach(btn => {
      btn.classList.toggle('active', btn.getAttribute(attrs[type]) === value);
    });
  }

  // Send to WhatsApp
  function sendToWhatsApp() {
    const theme = themes[currentTheme];
    const darkMode = darkModes[currentDarkMode];
    const font = fonts[currentFont];
    
    const message = `🎨 *Salon Hisab Theme Selection*

━━━━━━━━━━━━━━━━━━━━
*Color Theme:* ${theme.name}
• Light: ${theme.light}
• Medium: ${theme.medium}
• Dark: ${theme.dark}

*Mode:* ${darkMode?.name || 'Light'}
*Font:* ${font?.name || 'Inter'}
━━━━━━━━━━━━━━━━━━━━

I would like to proceed with this theme for my salon app.`;

    const encoded = encodeURIComponent(message);
    const url = `https://wa.me/919353432443?text=${encoded}`;
    window.open(url, '_blank');
  }

  // Create floating theme picker UI
  function createThemePicker() {
    const picker = document.createElement('div');
    picker.id = 'theme-picker';
    picker.innerHTML = `
      <button class="theme-toggle" id="themeToggle" title="Change Theme">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"/>
          <path d="M12 2a10 10 0 0 0 0 20z" fill="currentColor"/>
        </svg>
      </button>
      <div class="theme-options" id="themeOptions">
        <div class="theme-section">
          <div class="theme-title">Color Theme</div>
          <div class="theme-grid">
            <button class="theme-btn" data-theme="orange" title="Orange">
              <span class="theme-swatch" style="background: linear-gradient(135deg, #f7b755 0%, #d48a1f 100%)"></span>
              <span class="theme-name">Orange</span>
            </button>
            <button class="theme-btn" data-theme="lavender" title="Lavender">
              <span class="theme-swatch" style="background: linear-gradient(135deg, #e6e1f7 0%, #8c7ae6 100%)"></span>
              <span class="theme-name">Lavender</span>
            </button>
            <button class="theme-btn" data-theme="blue" title="Blue">
              <span class="theme-swatch" style="background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%)"></span>
              <span class="theme-name">Blue</span>
            </button>
            <button class="theme-btn" data-theme="pink" title="Pink">
              <span class="theme-swatch" style="background: linear-gradient(135deg, #f9a8d4 0%, #ec4899 100%)"></span>
              <span class="theme-name">Pink</span>
            </button>
          </div>
        </div>
        
        <div class="theme-section">
          <div class="theme-title">Appearance</div>
          <div class="dark-grid">
            <button class="dark-btn" data-dark="off" title="Light">
              <span class="dark-swatch" style="background: #fff; border: 1.5px solid #E5E7EB;"></span>
              <span class="dark-name">Light</span>
            </button>
            <button class="dark-btn" data-dark="slate" title="Slate">
              <span class="dark-swatch" style="background: linear-gradient(135deg, #334155 0%, #0f172a 100%)"></span>
              <span class="dark-name">Slate</span>
            </button>
            <button class="dark-btn" data-dark="black" title="Black">
              <span class="dark-swatch" style="background: #000"></span>
              <span class="dark-name">Black</span>
            </button>
          </div>
        </div>
        
        <div class="theme-section">
          <div class="theme-title">Font</div>
          <div class="font-grid">
            <button class="font-btn" data-font="inter">Inter</button>
            <button class="font-btn" data-font="bricolage">Bricolage</button>
            <button class="font-btn" data-font="opensans">Open Sans</button>
            <button class="font-btn" data-font="montserrat">Montserrat</button>
            <button class="font-btn" data-font="poppins">Poppins</button>
          </div>
        </div>
        
        <button class="apply-btn" id="applyBtn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"/>
          </svg>
          Apply Theme
        </button>
        
        <button class="proceed-btn" id="proceedBtn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
            <path d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.832-1.438A9.96 9.96 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z"/>
          </svg>
          Select Theme & Proceed
        </button>
      </div>
    `;

    // Add styles
    const style = document.createElement('style');
    style.textContent = `
      #theme-picker {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 9999;
        font-family: 'Inter', -apple-system, sans-serif;
      }
      .theme-toggle {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--primary, #3b82f6);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        transition: all 0.2s ease;
      }
      .theme-toggle:hover {
        transform: scale(1.08);
        box-shadow: 0 6px 28px rgba(0,0,0,0.3);
      }
      .theme-options {
        position: absolute;
        bottom: 64px;
        right: 0;
        background: white;
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 10px 50px rgba(0,0,0,0.2);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px) scale(0.95);
        transition: all 0.25s ease;
        min-width: 260px;
        max-height: 80vh;
        overflow-y: auto;
      }
      .theme-options.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
      }
      .theme-section {
        margin-bottom: 16px;
      }
      .theme-section:last-of-type {
        margin-bottom: 20px;
      }
      .theme-title {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6B7280;
        margin-bottom: 10px;
      }
      .theme-grid, .dark-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .font-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .theme-btn, .dark-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 8px;
        border: 2px solid #E5E7EB;
        border-radius: 12px;
        background: #F9FAFB;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .theme-btn:hover, .dark-btn:hover {
        border-color: var(--primary, #3b82f6);
        transform: translateY(-2px);
      }
      .theme-btn.active, .dark-btn.active {
        border-color: var(--primary, #3b82f6);
        background: var(--primary-light, #eff6ff);
      }
      .font-btn {
        padding: 8px 12px;
        border: 1.5px solid #E5E7EB;
        border-radius: 8px;
        background: #F9FAFB;
        cursor: pointer;
        font-size: 11px;
        font-weight: 500;
        color: #374151;
        transition: all 0.15s ease;
      }
      .font-btn:hover {
        border-color: var(--primary, #3b82f6);
      }
      .font-btn.active {
        border-color: var(--primary, #3b82f6);
        background: var(--primary-light, #eff6ff);
        color: var(--primary, #3b82f6);
        font-weight: 600;
      }
      .theme-swatch, .dark-swatch {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
      .theme-name, .dark-name {
        font-size: 11px;
        font-weight: 500;
        color: #374151;
      }
      .apply-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 16px;
        background: var(--primary, #3b82f6);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 10px;
      }
      .apply-btn:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
      }
      .apply-btn svg {
        flex-shrink: 0;
      }
      .proceed-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 16px;
        background: #25D366;
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .proceed-btn:hover {
        background: #1fb855;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
      }
      .proceed-btn svg {
        flex-shrink: 0;
      }
    `;

    document.head.appendChild(style);
    document.body.appendChild(picker);

    // Event listeners
    const toggle = document.getElementById('themeToggle');
    const options = document.getElementById('themeOptions');

    toggle.addEventListener('click', (e) => {
      e.stopPropagation();
      options.classList.toggle('open');
    });

    document.addEventListener('click', (e) => {
      if (!picker.contains(e.target)) {
        options.classList.remove('open');
      }
    });

    // Theme buttons
    document.querySelectorAll('.theme-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        applyTheme(btn.dataset.theme);
      });
    });

    // Dark mode buttons
    document.querySelectorAll('.dark-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        applyDarkMode(btn.dataset.dark);
      });
    });

    // Font buttons
    document.querySelectorAll('.font-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        applyFont(btn.dataset.font);
      });
    });

    // Proceed button
    document.getElementById('proceedBtn').addEventListener('click', sendToWhatsApp);
    
    // Apply button - save settings and reload page to apply deeply
    document.getElementById('applyBtn').addEventListener('click', () => {
      // Settings are already saved in localStorage by the apply functions
      // Just reload the page to apply all changes deeply
      window.location.reload();
    });

    // Set active states
    updateActiveButton('theme', currentTheme);
    updateActiveButton('dark', currentDarkMode);
    updateActiveButton('font', currentFont);
  }

  // Load saved settings
  function loadSettings() {
    const savedTheme = localStorage.getItem('salonTheme');
    const savedDark = localStorage.getItem('salonDarkMode');
    const savedFont = localStorage.getItem('salonFont');
    
    if (savedTheme && themes[savedTheme]) {
      currentTheme = savedTheme;
    }
    if (savedDark && darkModes[savedDark]) {
      currentDarkMode = savedDark;
    }
    if (savedFont && fonts[savedFont]) {
      currentFont = savedFont;
    }
  }

  // Initialize
  function init() {
    loadSettings();
    applyTheme(currentTheme);
    applyDarkMode(currentDarkMode);
    applyFont(currentFont);
    createThemePicker();
  }

  // Apply saved theme immediately (before DOM ready) to prevent flash
  loadSettings();
  if (themes[currentTheme]) {
    Object.entries(themes[currentTheme].css).forEach(([prop, value]) => {
      document.documentElement.style.setProperty(prop, value);
    });
    document.documentElement.style.setProperty('--header-bg', themes[currentTheme].headerBg);
  }
  if (darkModes[currentDarkMode]) {
    Object.entries(darkModes[currentDarkMode].css).forEach(([prop, value]) => {
      document.documentElement.style.setProperty(prop, value);
    });
  }

  // Create picker when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  // Expose globally
  window.SalonTheme = { applyTheme, applyDarkMode, applyFont, themes, darkModes, fonts, sendToWhatsApp };
})();
