// Get React hooks from global React object (loaded from CDN)
const { useState, useMemo, useRef, useEffect } = React;

// Define inline SVG icons (replaces Lucide dependency)
const Search = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.35-4.35"></path>
  </svg>
);

const Globe = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <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>
);

const Users = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
    <circle cx="9" cy="7" r="4"></circle>
    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
  </svg>
);

const ChevronDown = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <polyline points="6 9 12 15 18 9"></polyline>
  </svg>
);

const MapPin = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
    <circle cx="12" cy="10" r="3"></circle>
  </svg>
);

const Calendar = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
    <line x1="16" y1="2" x2="16" y2="6"></line>
    <line x1="8" y1="2" x2="8" y2="6"></line>
    <line x1="3" y1="10" x2="21" y2="10"></line>
  </svg>
);

const X = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
);

const User = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
    <circle cx="12" cy="7" r="4"></circle>
  </svg>
);

const BSFGroupFinder = () => {
  const [selectedDayTimes, setSelectedDayTimes] = useState([]);
  const [showTimeGrid, setShowTimeGrid] = useState(false);
  const [genderFilter, setGenderFilter] = useState('All');
  const [languageFilter, setLanguageFilter] = useState('');
  const [ageFilter, setAgeFilter] = useState('');
  const [searchTerm, setSearchTerm] = useState('');
  const [searchMode, setSearchMode] = useState('byTime'); // 'byTime' or 'byName'
  const [nameSearch, setNameSearch] = useState(''); // For "By Name" mode input
  const [activeNameSearch, setActiveNameSearch] = useState(''); // Activated name search
  const [activeSearchMode, setActiveSearchMode] = useState('byTime'); // Mode when search was clicked
  const [showOptionsModal, setShowOptionsModal] = useState(false);
  const [tabDesign, setTabDesign] = useState('separator'); // 'underline', 'separator', 'pills', 'compact', 'radio', 'attached', 'minimal'
  const [groupsPerPage, setGroupsPerPage] = useState(10);
  const [showJoinModal, setShowJoinModal] = useState(false);
  const [joinModalType, setJoinModalType] = useState(''); // 'join', 'waitlist', 'waitlist-anytime'
  const [joinFlowStep, setJoinFlowStep] = useState('initial'); // 'initial', 'login', 'confirmation', 'removed'
  const [selectedGroupForJoin, setSelectedGroupForJoin] = useState(null); // Group being joined
  const [loginEmail, setLoginEmail] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [tabsInPopup, setTabsInPopup] = useState(true);
  const [showFilterField, setShowFilterField] = useState(false);
  const [showGroupCounts, setShowGroupCounts] = useState(false); // Show counts in section titles
  const [showAgeFilter, setShowAgeFilter] = useState(false); // Show age filter in search card
  const [genderSelectorStyle, setGenderSelectorStyle] = useState('filled'); // 'filled', 'outline', 'underline', 'pill', 'minimal', 'segmented'
  const [dayBadgeStyle, setDayBadgeStyle] = useState('circleFilled'); // 'rounded', 'circle', 'circleFilled', 'minimal', 'underline', 'dot'
  const [circleBorderWidth, setCircleBorderWidth] = useState('medium'); // 'thin', 'medium', 'thick'
  const [timeZone, setTimeZone] = useState('America/Denver (US)');
  const [pendingTimeZone, setPendingTimeZone] = useState('America/Denver (US)'); // For timezone modal
  const [displayCount, setDisplayCount] = useState(10);
  const [sortBy, setSortBy] = useState('day');
  const [sortOrder, setSortOrder] = useState('asc');
  const [selectedAgeGroupsFilter, setSelectedAgeGroupsFilter] = useState([]); // Age group filter in sort modal
  const [showSortMenu, setShowSortMenu] = useState(false);
  const [showSortModal, setShowSortModal] = useState(false);
  const [maxGroupSize, setMaxGroupSize] = useState(20);
  const [waitlistResult, setWaitlistResult] = useState(null);
  const [languageSearchTerm, setLanguageSearchTerm] = useState('');
  const [showLanguageDropdown, setShowLanguageDropdown] = useState(false);
  const [showSearchModeModal, setShowSearchModeModal] = useState(false); // Modal when switching to "By Name" with filters
  const [showHamburgerMenu, setShowHamburgerMenu] = useState(false); // Hamburger menu on mobile
  const [showLanguageFullscreen, setShowLanguageFullscreen] = useState(false); // Fullscreen language picker on mobile
  const [isMobile, setIsMobile] = useState(false); // Track mobile viewport
  
  // Active filters (actually applied to results)
  const [activeGenderFilter, setActiveGenderFilter] = useState('All');
  const [activeLanguageFilter, setActiveLanguageFilter] = useState('');
  const [activeAgeFilter, setActiveAgeFilter] = useState('');
  const [activeSelectedDayTimes, setActiveSelectedDayTimes] = useState([]);
  const [activeSearchTerm, setActiveSearchTerm] = useState('');
  
  const [hasSearched, setHasSearched] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [showTimezoneModal, setShowTimezoneModal] = useState(false);
  
  const timeGridRef = useRef(null);
  const sortMenuRef = useRef(null);
  const languageDropdownRef = useRef(null);
  const languageSearchInputRef = useRef(null);
  const resultsRef = useRef(null); // For scrolling to results on mobile
  const languageFullscreenSearchRef = useRef(null); // For fullscreen language search

  // Track mobile viewport
  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth <= 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  // Get timezone pin position and display info
  const getTimezoneInfo = (tz) => {
    const timezones = {
      // Americas
      'America/Denver (US)': { top: '43%', left: '20%', display: 'Denver, CO - United States', zone: 'Mountain Time (GMT-7)', offset: -7 },
      'America/New_York (US)': { top: '42%', left: '25%', display: 'New York, NY - United States', zone: 'Eastern Time (GMT-5)', offset: -5 },
      'America/Los_Angeles (US)': { top: '44%', left: '15%', display: 'Los Angeles, CA - United States', zone: 'Pacific Time (GMT-8)', offset: -8 },
      'America/Chicago (US)': { top: '42%', left: '22%', display: 'Chicago, IL - United States', zone: 'Central Time (GMT-6)', offset: -6 },
      'America/Sao_Paulo (BR)': { top: '68%', left: '32%', display: 'São Paulo - Brazil', zone: 'Brasília Time (GMT-3)', offset: -3 },
      'America/Mexico_City (MX)': { top: '52%', left: '18%', display: 'Mexico City - Mexico', zone: 'Central Time (GMT-6)', offset: -6 },
      // Europe
      'Europe/London (UK)': { top: '33%', left: '47%', display: 'London - United Kingdom', zone: 'Greenwich Mean Time (GMT+0)', offset: 0 },
      'Europe/Paris (FR)': { top: '36%', left: '49%', display: 'Paris - France', zone: 'Central European Time (GMT+1)', offset: 1 },
      'Europe/Berlin (DE)': { top: '34%', left: '51%', display: 'Berlin - Germany', zone: 'Central European Time (GMT+1)', offset: 1 },
      'Europe/Moscow (RU)': { top: '30%', left: '58%', display: 'Moscow - Russia', zone: 'Moscow Time (GMT+3)', offset: 3 },
      // Africa
      'Africa/Casablanca (MA)': { top: '48%', left: '45%', display: 'Casablanca - Morocco', zone: 'Western European Time (GMT+0)', offset: 0 },
      'Africa/Cairo (EG)': { top: '48%', left: '54%', display: 'Cairo - Egypt', zone: 'Eastern European Time (GMT+2)', offset: 2 },
      'Africa/Lagos (NG)': { top: '55%', left: '50%', display: 'Lagos - Nigeria', zone: 'West Africa Time (GMT+1)', offset: 1 },
      'Africa/Johannesburg (ZA)': { top: '72%', left: '54%', display: 'Johannesburg - South Africa', zone: 'South Africa Time (GMT+2)', offset: 2 },
      // Asia
      'Asia/Hong_Kong (HK)': { top: '46%', left: '80%', display: 'Hong Kong', zone: 'Hong Kong Time (GMT+8)', offset: 8 },
      'Asia/Tokyo (JP)': { top: '40%', left: '85%', display: 'Tokyo - Japan', zone: 'Japan Standard Time (GMT+9)', offset: 9 },
      'Asia/Singapore (SG)': { top: '58%', left: '78%', display: 'Singapore', zone: 'Singapore Time (GMT+8)', offset: 8 },
      'Asia/Dubai (AE)': { top: '48%', left: '62%', display: 'Dubai - UAE', zone: 'Gulf Standard Time (GMT+4)', offset: 4 },
      'Asia/Kolkata (IN)': { top: '50%', left: '68%', display: 'Mumbai - India', zone: 'India Standard Time (GMT+5:30)', offset: 5.5 },
      'Asia/Seoul (KR)': { top: '40%', left: '82%', display: 'Seoul - South Korea', zone: 'Korea Standard Time (GMT+9)', offset: 9 },
      // Oceania
      'Australia/Sydney (AU)': { top: '75%', left: '88%', display: 'Sydney - Australia', zone: 'Australian Eastern Time (GMT+10)', offset: 10 },
      'Pacific/Auckland (NZ)': { top: '80%', left: '95%', display: 'Auckland - New Zealand', zone: 'New Zealand Time (GMT+12)', offset: 12 }
    };
    return timezones[tz] || timezones['America/Denver (US)'];
  };

  // Convert GMT time to selected timezone
  const convertGMTToTimezone = (dayGMT, timeGMT24h, targetTimezone) => {
    const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const dayIndex = daysOfWeek.indexOf(dayGMT);
    
    if (dayIndex === -1 || !timeGMT24h) {
      return { day: dayGMT, time: 'TBD', time24h: '00:00' };
    }
    
    // Parse GMT time (24-hour format HH:MM)
    const [hours, minutes] = timeGMT24h.split(':').map(Number);
    
    // Get timezone offset
    const offset = getTimezoneInfo(targetTimezone).offset || 0;
    
    // Apply offset
    let newHours = hours + offset;
    let newDayIndex = dayIndex;
    
    // Handle day transitions
    while (newHours >= 24) {
      newHours -= 24;
      newDayIndex = (newDayIndex + 1) % 7;
    }
    while (newHours < 0) {
      newHours += 24;
      newDayIndex = (newDayIndex - 1 + 7) % 7;
    }
    
    // Convert to 12-hour format
    const period = newHours >= 12 ? 'PM' : 'AM';
    const hours12 = newHours === 0 ? 12 : (newHours > 12 ? newHours - 12 : newHours);
    const time12h = `${hours12}:${String(minutes).padStart(2, '0')} ${period}`;
    const time24h = `${String(newHours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
    
    return {
      day: daysOfWeek[newDayIndex],
      time: time12h,
      time24h: time24h
    };
  };

  const handleSearch = () => {
    // Check if searching by name with filters set - show confirmation modal
    // Only show modal if user has actually entered a search term
    if (searchMode === 'byName' && nameSearch.trim() !== '') {
      const hasFilters = genderFilter !== 'All' || languageFilter !== '' || selectedDayTimes.length > 0;
      if (hasFilters) {
        setShowSearchModeModal(true);
        return;
      }
    }
    
    performSearch();
  };
  
  // Actually perform the search
  const performSearch = (clearFilters = false) => {
    setIsLoading(true);
    setSelectedAgeGroupsFilter([]); // Clear age filter on new search
    
    // Simulate search delay
    setTimeout(() => {
      if (clearFilters) {
        setActiveGenderFilter('All');
        setActiveLanguageFilter('');
        setActiveSelectedDayTimes([]);
      } else {
        setActiveGenderFilter(genderFilter);
        setActiveLanguageFilter(languageFilter);
        setActiveSelectedDayTimes(selectedDayTimes);
      }
      setActiveAgeFilter(ageFilter);
      setActiveSearchTerm(searchTerm);
      setActiveNameSearch(nameSearch);
      setActiveSearchMode(searchMode);
      setHasSearched(true);
      setIsLoading(false);
      setDisplayCount(groupsPerPage); // Reset pagination
      setShowTimeGrid(false); // Close the popup
      
      // Scroll to results on mobile
      if (window.innerWidth <= 768 && resultsRef.current) {
        setTimeout(() => {
          resultsRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 100);
      }
    }, 800);
  };

  // Search by name only - clear filters and search
  const searchByNameOnly = () => {
    setGenderFilter('All');
    setLanguageFilter('');
    setSelectedDayTimes([]);
    setShowSearchModeModal(false);
    performSearch(true);
  };

  // Search by name with current filters
  const searchByNameWithFilters = () => {
    setShowSearchModeModal(false);
    performSearch(false);
  };

  // Show all groups matching gender/language at any time
  const showAllTimesForGenderLanguage = () => {
    setIsLoading(true);
    setSelectedDayTimes([]); // Clear time selections in UI
    
    setTimeout(() => {
      setActiveSelectedDayTimes([]); // Clear active time filter
      setHasSearched(true);
      setIsLoading(false);
      setDisplayCount(groupsPerPage);
    }, 400);
  };

  const handleStartOver = () => {
    // Reset all filters
    setGenderFilter('All');
    setLanguageFilter('');
    setAgeFilter('');
    setSelectedDayTimes([]);
    setSearchTerm('');
    setNameSearch('');
    
    // Reset active filters
    setActiveGenderFilter('All');
    setActiveLanguageFilter('');
    setActiveAgeFilter('');
    setActiveSelectedDayTimes([]);
    setActiveSearchTerm('');
    setActiveNameSearch('');
    
    // Reset search state
    setHasSearched(false);
    setIsLoading(false);
    
    // Reset pagination
    setAvailableGroupsToShow(20);
    setFullGroupsToShow(20);
  };

  // Auto-refresh results when timezone changes (if user has already searched)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => {
    if (hasSearched) {
      // Trigger immediate update of active filters to refresh with new timezone
      setActiveGenderFilter(genderFilter);
      setActiveLanguageFilter(languageFilter);
      setActiveAgeFilter(ageFilter);
      setActiveSelectedDayTimes([...selectedDayTimes]);
      setActiveSearchTerm(searchTerm);
      setActiveNameSearch(nameSearch);
      setActiveSearchMode(searchMode);
    }
  }, [timeZone]);

  const hasFiltersChanged = () => {
    if (!hasSearched) return false;
    
    const dayTimesChanged = JSON.stringify(selectedDayTimes.sort()) !== JSON.stringify(activeSelectedDayTimes.sort());
    
    return genderFilter !== activeGenderFilter ||
           languageFilter !== activeLanguageFilter ||
           ageFilter !== activeAgeFilter ||
           dayTimesChanged ||
           searchTerm !== activeSearchTerm ||
           nameSearch !== activeNameSearch ||
           searchMode !== activeSearchMode;
  };

  const getWaitlistCriteriaText = () => {
    const parts = [];
    
    // Day/Time
    if (activeSelectedDayTimes.length > 0) {
      const dayTimeGroups = {};
      activeSelectedDayTimes.forEach(dt => {
        const [day, time] = dt.split('-');
        if (!dayTimeGroups[day]) dayTimeGroups[day] = [];
        dayTimeGroups[day].push(time);
      });
      
      const dayTexts = Object.entries(dayTimeGroups).map(([day, times]) => {
        const dayFull = {
          'SUN': 'Sunday',
          'MON': 'Monday', 
          'TUE': 'Tuesday',
          'WED': 'Wednesday',
          'THU': 'Thursday',
          'FRI': 'Friday',
          'SAT': 'Saturday'
        }[day];
        
        const timeRange = times.length > 1 ? 
          `${times[0]} and ${times[1]}` : 
          times[0] === 'Morning' ? 'Morning (6 AM to noon)' :
          times[0] === 'Midday' ? 'Midday (noon to 6 PM)' :
          times[0] === 'Evening' ? 'Evening (6 PM to midnight)' :
          'Night (midnight to 6 AM)';
        
        return `${dayFull}, ${timeRange}`;
      });
      
      parts.push(dayTexts[0]); // Just use first one for simplicity
    }
    
    // Gender
    if (activeGenderFilter && activeGenderFilter !== 'All') {
      parts.push(activeGenderFilter);
    } else {
      parts.push('All Genders');
    }
    
    // Language
    if (activeLanguageFilter && activeLanguageFilter !== 'All' && activeLanguageFilter !== '') {
      parts.push(activeLanguageFilter);
    } else {
      parts.push('All Languages');
    }
    
    // Age
    if (activeAgeFilter && activeAgeFilter !== 'All' && activeAgeFilter !== '') {
      parts.push(activeAgeFilter);
    } else {
      parts.push('All Ages');
    }
    
    return parts.join(', ');
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (timeGridRef.current && !timeGridRef.current.contains(event.target)) {
        setShowTimeGrid(false);
      }
      if (sortMenuRef.current && !sortMenuRef.current.contains(event.target)) {
        setShowSortMenu(false);
      }
      if (languageDropdownRef.current && !languageDropdownRef.current.contains(event.target)) {
        setShowLanguageDropdown(false);
      }
    };

    if (showTimeGrid || showSortMenu || showSortModal || showLanguageDropdown) {
      document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [showTimeGrid, showSortMenu, showSortModal, showLanguageDropdown]);

  // Auto-focus language search input when dropdown opens
  useEffect(() => {
    if (showLanguageDropdown && languageSearchInputRef.current) {
      setTimeout(() => {
        languageSearchInputRef.current.focus();
      }, 50);
    }
  }, [showLanguageDropdown]);

  const daysOfWeek = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
  const timePeriods = [
    { label: 'Morning', time: '6 AM to Noon' },
    { label: 'Midday', time: 'Noon to 6 PM' },
    { label: 'Evening', time: '6 PM to Midnight' },
    { label: 'Night', time: 'Midnight to 6 AM' }
  ];

  const getDaypartIcon = (period, size = 16, isSelected = false) => {
    const iconColor = isSelected ? "#ffffff" : "#000000";
    
    // Morning and Midday = Sun
    if (period === 'Morning' || period === 'Midday') {
      return (
        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4" />
          <path d="M12 2v2" />
          <path d="M12 20v2" />
          <path d="m4.93 4.93 1.41 1.41" />
          <path d="m17.66 17.66 1.41 1.41" />
          <path d="M2 12h2" />
          <path d="M20 12h2" />
          <path d="m6.34 17.66-1.41 1.41" />
          <path d="m19.07 4.93-1.41 1.41" />
        </svg>
      );
    }
    
    // Evening and Night = Moon
    if (period === 'Evening' || period === 'Night') {
      return (
        <svg width={size} height={size} viewBox="0 0 24 24" fill={iconColor} stroke="none">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
        </svg>
      );
    }
    
    return null;
  };

  const toggleDayTime = (day, period) => {
    const key = `${day}-${period}`;
    setSelectedDayTimes(prev => 
      prev.includes(key) 
        ? prev.filter(item => item !== key)
        : [...prev, key]
    );
  };

  // Toggle all dayparts for a specific day (e.g., select all Sunday slots)
  const toggleAllDaypartsForDay = (day) => {
    const daySlots = timePeriods.map(period => `${day}-${period.label}`);
    const allSelected = daySlots.every(slot => selectedDayTimes.includes(slot));
    
    if (allSelected) {
      // Deselect all slots for this day
      setSelectedDayTimes(prev => prev.filter(slot => !daySlots.includes(slot)));
    } else {
      // Select all slots for this day
      setSelectedDayTimes(prev => {
        const newSlots = daySlots.filter(slot => !prev.includes(slot));
        return [...prev, ...newSlots];
      });
    }
  };

  // Toggle all days for a specific daypart (e.g., select all Morning slots)
  const toggleAllDaysForDaypart = (daypart) => {
    const daypartSlots = daysOfWeek.map(day => `${day}-${daypart}`);
    const allSelected = daypartSlots.every(slot => selectedDayTimes.includes(slot));
    
    if (allSelected) {
      // Deselect all slots for this daypart
      setSelectedDayTimes(prev => prev.filter(slot => !daypartSlots.includes(slot)));
    } else {
      // Select all slots for this daypart
      setSelectedDayTimes(prev => {
        const newSlots = daypartSlots.filter(slot => !prev.includes(slot));
        return [...prev, ...newSlots];
      });
    }
  };

  const clearSelections = () => {
    setSelectedDayTimes([]);
  };

  const getSelectedTimesText = () => {
    if (selectedDayTimes.length === 0) return '';
    
    // Group by day
    const grouped = selectedDayTimes.reduce((acc, item) => {
      const [day, period] = item.split('-');
      if (!acc[day]) acc[day] = [];
      acc[day].push(period);
      return acc;
    }, {});
    
    const parts = [];
    for (const [day, periods] of Object.entries(grouped)) {
      // Get period names (capitalize first letter)
      const periodNames = periods.map(p => p.charAt(0).toUpperCase() + p.slice(1) + 's');
      parts.push(`${day} ${periodNames.join(', ')}`);
    }
    
    // Show first 2 items, then "+X more" if needed
    if (parts.length <= 2) {
      return parts.join(', ');
    } else {
      const shown = parts.slice(0, 2).join(', ');
      const remaining = parts.length - 2;
      return `${shown} +${remaining} more`;
    }
  };

  // Format active selected times for waitlist description
  const getActiveTimesDescription = () => {
    if (activeSelectedDayTimes.length === 0) return 'Any day/time';
    
    // Group by day
    const grouped = activeSelectedDayTimes.reduce((acc, item) => {
      const [day, period] = item.split('-');
      if (!acc[day]) acc[day] = [];
      acc[day].push(period);
      return acc;
    }, {});
    
    const parts = [];
    for (const [day, periods] of Object.entries(grouped)) {
      const periodNames = periods.map(p => p.charAt(0).toUpperCase() + p.slice(1));
      parts.push(`${day} (${periodNames.join(', ')})`);
    }
    
    return parts.join(', ');
  };

  const matchesSelectedDayTime = (group) => {
    if (activeSelectedDayTimes.length === 0) return true;
    
    const dayMap = {
      'Sunday': 'SUN',
      'Monday': 'MON',
      'Tuesday': 'TUE',
      'Wednesday': 'WED',
      'Thursday': 'THU',
      'Friday': 'FRI',
      'Saturday': 'SAT'
    };
    
    const groupDay = dayMap[group.day];
    
    // Determine time period based on time
    let groupPeriod = '';
    const hour = parseInt(group.time.split(':')[0]);
    const isPM = group.time.includes('PM');
    const hour24 = isPM && hour !== 12 ? hour + 12 : (!isPM && hour === 12 ? 0 : hour);
    
    if (hour24 >= 6 && hour24 < 12) groupPeriod = 'Morning';
    else if (hour24 >= 12 && hour24 < 18) groupPeriod = 'Midday';
    else if (hour24 >= 18 && hour24 < 24) groupPeriod = 'Evening';
    else groupPeriod = 'Night';
    
    const groupDayTime = `${groupDay}-${groupPeriod}`;
    return activeSelectedDayTimes.includes(groupDayTime);
  };

  const sortGroups = (groups) => {
    const dayOrder = { 'Sunday': 0, 'Monday': 1, 'Tuesday': 2, 'Wednesday': 3, 'Thursday': 4, 'Friday': 5, 'Saturday': 6 };
    
    const convertTo24Hour = (time) => {
      const [timeStr, period] = time.split(' ');
      let [hours, minutes] = timeStr.split(':').map(Number);
      
      if (period === 'PM' && hours !== 12) hours += 12;
      if (period === 'AM' && hours === 12) hours = 0;
      
      return hours * 60 + minutes;
    };
    
    const sorted = [...groups].sort((a, b) => {
      let result = 0;
      
      switch(sortBy) {
        case 'day':
          // Sort by day, then by time
          if (dayOrder[a.day] !== dayOrder[b.day]) {
            result = dayOrder[a.day] - dayOrder[b.day];
          } else {
            result = convertTo24Hour(a.time) - convertTo24Hour(b.time);
          }
          break;
        
        case 'time':
          // Sort by time, then by day
          const timeCompare = convertTo24Hour(a.time) - convertTo24Hour(b.time);
          if (timeCompare !== 0) {
            result = timeCompare;
          } else {
            result = dayOrder[a.day] - dayOrder[b.day];
          }
          break;
        
        case 'language':
          // Sort by language, then by day, then by time
          if (a.language !== b.language) {
            result = a.language.localeCompare(b.language);
          } else if (dayOrder[a.day] !== dayOrder[b.day]) {
            result = dayOrder[a.day] - dayOrder[b.day];
          } else {
            result = convertTo24Hour(a.time) - convertTo24Hour(b.time);
          }
          break;
        
        case 'age':
          // Sort by age group, then by day, then by time
          if (a.ageGroup !== b.ageGroup) {
            result = a.ageGroup.localeCompare(b.ageGroup);
          } else if (dayOrder[a.day] !== dayOrder[b.day]) {
            result = dayOrder[a.day] - dayOrder[b.day];
          } else {
            result = convertTo24Hour(a.time) - convertTo24Hour(b.time);
          }
          break;
        
        default:
          result = 0;
      }
      
      // Apply sort order (ascending or descending)
      return sortOrder === 'desc' ? -result : result;
    });
    
    return sorted;
  };

  // Mock group data
  // FOR PRODUCTION: Replace this array with your 650 groups from bsf-groups-data.js or bsf-groups-data.json
  // See DATA-IMPORT-GUIDE.md for instructions on importing from Excel
  const mockGroups = [
    // Sunday groups
    { id: 1, time: '6:30 PM', day: 'Sunday', name: 'Sunday Evening Fellowship', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'John Smith', members: 16, waitlist: 0 },
    { id: 2, time: '9:00 AM', day: 'Sunday', name: 'Sunday Morning Study', gender: 'Female', ageGroup: 'Adults', language: 'English', leader: 'Sarah Johnson', members: 14, waitlist: 0 },
    { id: 3, time: '7:00 PM', day: 'Sunday', name: 'Grupo Dominical', gender: 'All', ageGroup: 'Mixed Ages', language: 'Español', leader: 'Maria Rodriguez', members: 12, waitlist: 0 },
    { id: 4, time: '10:30 AM', day: 'Sunday', name: 'Late Morning Group', gender: 'Male', ageGroup: 'Young Adults', language: 'English', leader: 'Mike Davis', members: 8, waitlist: 0 },
    { id: 5, time: '8:00 PM', day: 'Sunday', name: 'Evening Explorers', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Emily Chen', members: 20, waitlist: 2 },
    { id: 51, time: '12:30 AM', day: 'Sunday', name: 'Late Night Seekers', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Nathan Pierce', members: 5, waitlist: 0 },
    { id: 52, time: '2:00 AM', day: 'Sunday', name: 'Midnight Warriors', gender: 'Male', ageGroup: 'Adults', language: 'English', leader: 'Marcus Cole', members: 6, waitlist: 0 },
    
    // Monday groups
    { id: 6, time: '6:00 PM', day: 'Monday', name: 'Monday Night Study', gender: 'Male', ageGroup: 'Mixed Ages', language: 'English', leader: 'Robert Wilson', members: 15, waitlist: 0 },
    { id: 7, time: '9:30 AM', day: 'Monday', name: 'Morning Moms', gender: 'Female', ageGroup: 'Adults', language: 'English', leader: 'Jennifer Brown', members: 18, waitlist: 3 },
    { id: 8, time: '7:30 PM', day: 'Monday', name: 'Lunes de Estudio', gender: 'All', ageGroup: 'Mixed Ages', language: 'Español', leader: 'Carlos Martinez', members: 10, waitlist: 0 },
    { id: 9, time: '12:00 PM', day: 'Monday', name: 'Lunch Hour Study', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'David Lee', members: 12, waitlist: 0 },
    { id: 10, time: '10:00 PM', day: 'Monday', name: 'Night Owls', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Alex Turner', members: 6, waitlist: 0 },
    { id: 53, time: '1:00 AM', day: 'Monday', name: 'After Midnight', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'Jordan Hayes', members: 7, waitlist: 0 },
    
    // Tuesday groups
    { id: 11, time: '8:00 AM', day: 'Tuesday', name: 'Early Risers', gender: 'Male', ageGroup: 'Adults', language: 'English', leader: 'James Anderson', members: 14, waitlist: 0 },
    { id: 12, time: '6:30 PM', day: 'Tuesday', name: 'Tuesday Evening Group', gender: 'Female', ageGroup: 'Mixed Ages', language: 'English', leader: 'Lisa Thompson', members: 16, waitlist: 0 },
    { id: 13, time: '9:00 AM', day: 'Tuesday', name: 'Martes Matutino', gender: 'All', ageGroup: 'Adults', language: 'Español', leader: 'Ana Garcia', members: 11, waitlist: 0 },
    { id: 14, time: '1:00 PM', day: 'Tuesday', name: 'Afternoon Connection', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'Mark Williams', members: 9, waitlist: 0 },
    { id: 15, time: '7:00 PM', day: 'Tuesday', name: 'Tuesday Seekers', gender: 'Male', ageGroup: 'Young Adults', language: 'English', leader: 'Chris Martin', members: 15, waitlist: 0 },
    { id: 16, time: '8:30 AM', day: 'Tuesday', name: 'Morning Light', gender: 'Female', ageGroup: 'Adults', language: 'English', leader: 'Patricia Moore', members: 20, waitlist: 1 },
    { id: 54, time: '3:30 AM', day: 'Tuesday', name: 'Pre-Dawn Prayer', gender: 'All', ageGroup: 'Adults', language: 'English', leader: 'Samuel Brooks', members: 4, waitlist: 0 },
    
    // Wednesday groups
    { id: 17, time: '7:00 PM', day: 'Wednesday', name: 'Midweek Study', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'Thomas Taylor', members: 17, waitlist: 0 },
    { id: 18, time: '9:30 AM', day: 'Wednesday', name: 'Wednesday Warriors', gender: 'Male', ageGroup: 'Adults', language: 'English', leader: 'Daniel Jackson', members: 13, waitlist: 0 },
    { id: 19, time: '6:00 PM', day: 'Wednesday', name: 'Miércoles de Fe', gender: 'All', ageGroup: 'Mixed Ages', language: 'Español', leader: 'Luis Hernandez', members: 14, waitlist: 0 },
    { id: 20, time: '12:30 PM', day: 'Wednesday', name: 'Midday Reflections', gender: 'Female', ageGroup: 'Adults', language: 'English', leader: 'Nancy White', members: 10, waitlist: 0 },
    { id: 21, time: '8:00 PM', day: 'Wednesday', name: 'Evening Fellowship', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Ryan Harris', members: 18, waitlist: 0 },
    { id: 22, time: '10:00 AM', day: 'Wednesday', name: 'Mid Morning Group', gender: 'Female', ageGroup: 'Mixed Ages', language: 'English', leader: 'Barbara Clark', members: 12, waitlist: 0 },
    { id: 55, time: '2:30 AM', day: 'Wednesday', name: 'Night Shift Fellowship', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'Diana Reed', members: 8, waitlist: 0 },
    
    // Thursday groups
    { id: 23, time: '6:30 PM', day: 'Thursday', name: 'Thursday Gathering', gender: 'Male', ageGroup: 'Mixed Ages', language: 'English', leader: 'Kevin Lewis', members: 16, waitlist: 0 },
    { id: 24, time: '9:00 AM', day: 'Thursday', name: 'Thursday Morning Circle', gender: 'Female', ageGroup: 'Adults', language: 'English', leader: 'Michelle Robinson', members: 19, waitlist: 0 },
    { id: 25, time: '7:30 PM', day: 'Thursday', name: 'Jueves Unidos', gender: 'All', ageGroup: 'Mixed Ages', language: 'Español', leader: 'Jorge Lopez', members: 13, waitlist: 0 },
    { id: 26, time: '11:00 AM', day: 'Thursday', name: 'Late Morning Fellowship', gender: 'All', ageGroup: 'Adults', language: 'English', leader: 'Steven Walker', members: 11, waitlist: 0 },
    { id: 27, time: '8:30 PM', day: 'Thursday', name: 'Evening Explorers', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Jessica Hall', members: 20, waitlist: 4 },
    { id: 28, time: '6:00 AM', day: 'Thursday', name: 'Dawn Patrol', gender: 'Male', ageGroup: 'Adults', language: 'English', leader: 'Brian Allen', members: 7, waitlist: 0 },
    { id: 56, time: '1:30 AM', day: 'Thursday', name: 'Midnight Study', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Tyler Morgan', members: 9, waitlist: 0 },
    
    // Friday groups
    { id: 29, time: '7:00 PM', day: 'Friday', name: 'Friday Night Lights', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Ashley Young', members: 22, waitlist: 0 },
    { id: 30, time: '9:30 AM', day: 'Friday', name: 'Friday Fellowship', gender: 'Female', ageGroup: 'Mixed Ages', language: 'English', leader: 'Melissa King', members: 14, waitlist: 0 },
    { id: 31, time: '6:30 PM', day: 'Friday', name: 'Viernes de Gloria', gender: 'All', ageGroup: 'Mixed Ages', language: 'Español', leader: 'Ricardo Diaz', members: 16, waitlist: 0 },
    { id: 32, time: '12:00 PM', day: 'Friday', name: 'Friday Noon Group', gender: 'Male', ageGroup: 'Adults', language: 'English', leader: 'Matthew Wright', members: 9, waitlist: 0 },
    { id: 33, time: '8:00 PM', day: 'Friday', name: 'TGIF Study', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'Amanda Scott', members: 17, waitlist: 0 },
    { id: 34, time: '10:00 AM', day: 'Friday', name: 'Friday Morning Group', gender: 'Female', ageGroup: 'Adults', language: 'English', leader: 'Karen Green', members: 21, waitlist: 3 },
    { id: 57, time: '11:30 PM', day: 'Friday', name: 'Late Friday Night', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Derek Stone', members: 12, waitlist: 0 },
    { id: 58, time: '3:00 AM', day: 'Friday', name: 'Early Saturday Morning', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'Casey Bennett', members: 6, waitlist: 0 },
    
    // Saturday groups
    { id: 35, time: '10:00 AM', day: 'Saturday', name: 'Weekend Warriors', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'Timothy Baker', members: 18, waitlist: 0 },
    { id: 36, time: '7:00 PM', day: 'Saturday', name: 'Saturday Evening Study', gender: 'Male', ageGroup: 'Adults', language: 'English', leader: 'Andrew Adams', members: 13, waitlist: 0 },
    { id: 37, time: '9:00 AM', day: 'Saturday', name: 'Sábado Santo', gender: 'All', ageGroup: 'Mixed Ages', language: 'Español', leader: 'Sofia Perez', members: 15, waitlist: 0 },
    { id: 38, time: '1:00 PM', day: 'Saturday', name: 'Saturday Afternoon', gender: 'Female', ageGroup: 'Young Adults', language: 'English', leader: 'Rachel Nelson', members: 12, waitlist: 0 },
    { id: 39, time: '6:00 PM', day: 'Saturday', name: 'Saturday Seekers', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'Joshua Carter', members: 19, waitlist: 0 },
    { id: 40, time: '8:00 AM', day: 'Saturday', name: 'Early Saturday', gender: 'Male', ageGroup: 'Adults', language: 'English', leader: 'Brandon Mitchell', members: 10, waitlist: 0 },
    { id: 59, time: '12:00 AM', day: 'Saturday', name: 'Saturday Midnight', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Morgan Chase', members: 11, waitlist: 0 },
    { id: 60, time: '4:00 AM', day: 'Saturday', name: 'Before Dawn', gender: 'All', ageGroup: 'Adults', language: 'English', leader: 'Adrian Wells', members: 5, waitlist: 0 },
    
    // Additional variety
    { id: 41, time: '11:30 AM', day: 'Sunday', name: 'Late Morning Worship', gender: 'All', ageGroup: 'Adults', language: 'English', leader: 'Gregory Perez', members: 16, waitlist: 0 },
    { id: 42, time: '2:00 PM', day: 'Monday', name: 'Monday Afternoon', gender: 'Female', ageGroup: 'Adults', language: 'English', leader: 'Donna Roberts', members: 11, waitlist: 0 },
    { id: 43, time: '5:00 PM', day: 'Tuesday', name: 'After Work Group', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Eric Turner', members: 14, waitlist: 0 },
    { id: 44, time: '3:00 PM', day: 'Wednesday', name: 'Mid Afternoon Study', gender: 'Female', ageGroup: 'Mixed Ages', language: 'English', leader: 'Carol Phillips', members: 9, waitlist: 0 },
    { id: 45, time: '5:30 PM', day: 'Thursday', name: 'Dinner Hour Group', gender: 'All', ageGroup: 'Mixed Ages', language: 'English', leader: 'Paul Campbell', members: 20, waitlist: 5 },
    { id: 46, time: '4:00 PM', day: 'Friday', name: 'Friday Late Afternoon', gender: 'Male', ageGroup: 'Adults', language: 'English', leader: 'Ronald Parker', members: 8, waitlist: 0 },
    { id: 47, time: '11:00 AM', day: 'Saturday', name: 'Saturday Brunch Study', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Nicole Evans', members: 17, waitlist: 0 },
    { id: 48, time: '4:30 PM', day: 'Sunday', name: 'Sunday Late Afternoon', gender: 'Female', ageGroup: 'Adults', language: 'English', leader: 'Kimberly Edwards', members: 13, waitlist: 0 },
    { id: 49, time: '10:30 PM', day: 'Friday', name: 'Late Night Study', gender: 'All', ageGroup: 'Young Adults', language: 'English', leader: 'Justin Collins', members: 6, waitlist: 0 },
    { id: 50, time: '7:00 AM', day: 'Monday', name: 'Sunrise Study', gender: 'Male', ageGroup: 'Adults', language: 'English', leader: 'Raymond Stewart', members: 8, waitlist: 0 },
    
    // Traditional Chinese groups
    { id: 61, time: '7:00 PM', day: 'Sunday', name: '主日晚間團契', gender: 'All', ageGroup: 'Mixed Ages', language: 'Traditional Chinese', leader: 'Li Wei Chen', members: 18, waitlist: 0 },
    { id: 62, time: '9:30 AM', day: 'Monday', name: '週一早晨研讀', gender: 'Female', ageGroup: 'Adults', language: 'Traditional Chinese', leader: 'Mei Ling Wong', members: 15, waitlist: 0 },
    { id: 63, time: '6:30 PM', day: 'Tuesday', name: '週二晚間小組', gender: 'All', ageGroup: 'Young Adults', language: 'Traditional Chinese', leader: 'David Chang', members: 20, waitlist: 2 },
    { id: 64, time: '8:00 AM', day: 'Wednesday', name: '週三清晨禱告', gender: 'Male', ageGroup: 'Adults', language: 'Traditional Chinese', leader: 'James Liu', members: 12, waitlist: 0 },
    { id: 65, time: '7:30 PM', day: 'Thursday', name: '週四查經班', gender: 'All', ageGroup: 'Mixed Ages', language: 'Traditional Chinese', leader: 'Grace Lin', members: 16, waitlist: 0 },
    { id: 66, time: '10:00 AM', day: 'Friday', name: '週五團契', gender: 'Female', ageGroup: 'Adults', language: 'Traditional Chinese', leader: 'Susan Huang', members: 14, waitlist: 0 },
    { id: 67, time: '2:00 PM', day: 'Saturday', name: '週六午後小組', gender: 'All', ageGroup: 'Young Adults', language: 'Traditional Chinese', leader: 'Kevin Wu', members: 11, waitlist: 0 },
    { id: 68, time: '9:00 AM', day: 'Sunday', name: '主日早晨敬拜', gender: 'All', ageGroup: 'Mixed Ages', language: 'Traditional Chinese', leader: 'Peter Tsai', members: 22, waitlist: 0 },
    { id: 69, time: '1:00 PM', day: 'Wednesday', name: '週三午間研讀', gender: 'All', ageGroup: 'Adults', language: 'Traditional Chinese', leader: 'Amy Chen', members: 10, waitlist: 0 },
    { id: 70, time: '8:00 PM', day: 'Friday', name: '週五晚間團契', gender: 'All', ageGroup: 'Mixed Ages', language: 'Traditional Chinese', leader: 'Daniel Lee', members: 19, waitlist: 0 },
    
    // Mandarin Chinese groups
    { id: 71, time: '6:00 PM', day: 'Monday', name: '周一晚间学习', gender: 'All', ageGroup: 'Mixed Ages', language: 'Mandarin Chinese', leader: 'Wang Xiaomin', members: 17, waitlist: 0 },
    { id: 72, time: '9:00 AM', day: 'Tuesday', name: '周二早晨团契', gender: 'Female', ageGroup: 'Adults', language: 'Mandarin Chinese', leader: 'Zhang Hua', members: 13, waitlist: 0 },
    { id: 73, time: '7:00 PM', day: 'Wednesday', name: '周三晚间查经', gender: 'All', ageGroup: 'Young Adults', language: 'Mandarin Chinese', leader: 'Li Ming', members: 20, waitlist: 3 },
    { id: 74, time: '10:30 AM', day: 'Thursday', name: '周四上午祷告会', gender: 'Male', ageGroup: 'Adults', language: 'Mandarin Chinese', leader: 'Chen Wei', members: 9, waitlist: 0 },
    { id: 75, time: '6:30 PM', day: 'Friday', name: '周五晚间小组', gender: 'All', ageGroup: 'Mixed Ages', language: 'Mandarin Chinese', leader: 'Liu Fang', members: 16, waitlist: 0 },
    { id: 76, time: '8:30 AM', day: 'Saturday', name: '周六早晨敬拜', gender: 'All', ageGroup: 'Adults', language: 'Mandarin Chinese', leader: 'Zhou Jian', members: 21, waitlist: 1 },
    { id: 77, time: '7:30 PM', day: 'Sunday', name: '主日晚间团契', gender: 'All', ageGroup: 'Mixed Ages', language: 'Mandarin Chinese', leader: 'Xu Lin', members: 18, waitlist: 0 },
    { id: 78, time: '11:00 AM', day: 'Monday', name: '周一午间查经', gender: 'Female', ageGroup: 'Adults', language: 'Mandarin Chinese', leader: 'Gao Mei', members: 12, waitlist: 0 },
    { id: 79, time: '5:00 PM', day: 'Tuesday', name: '周二下班后小组', gender: 'All', ageGroup: 'Young Adults', language: 'Mandarin Chinese', leader: 'Sun Wei', members: 15, waitlist: 0 },
    { id: 80, time: '9:30 AM', day: 'Saturday', name: '周六晨间学习', gender: 'All', ageGroup: 'Mixed Ages', language: 'Mandarin Chinese', leader: 'Ma Qiang', members: 14, waitlist: 0 },
  ];

  // Use external data if available (from bsf-groups-data.js), otherwise use mock data
  // Support both 'groupsData' and 'BSF_GROUPS_DATA' variable names
  const externalData = (typeof BSF_GROUPS_DATA !== 'undefined' && BSF_GROUPS_DATA.length > 0) 
    ? BSF_GROUPS_DATA 
    : (typeof groupsData !== 'undefined' && groupsData.length > 0) 
      ? groupsData 
      : null;
  const rawGroups = externalData || mockGroups;
  
  // Convert all groups to selected timezone
  const allGroups = useMemo(() => {
    return rawGroups.map(group => {
      // If group has GMT data, convert it
      if (group.timeGMT24h && group.dayGMT) {
        const converted = convertGMTToTimezone(group.dayGMT, group.timeGMT24h, timeZone);
        return {
          ...group,
          day: converted.day,
          time: converted.time,
          time24h: converted.time24h
        };
      }
      // Otherwise use existing day/time (for mock data)
      return group;
    });
  }, [rawGroups, timeZone]);

  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

  // Extract unique languages and age groups from actual data
  const uniqueLanguages = useMemo(() => {
    const langs = [...new Set(allGroups.map(g => g.language).filter(Boolean))];
    // Fallback to common languages if extraction fails
    if (langs.length === 0) {
      return ['English', 'Spanish', 'Mandarin Chinese', 'Cantonese', 'Arabic', 'French', 'Portuguese', 'Korean', 'Hindi', 'Russian'];
    }
    return langs.sort();
  }, [allGroups]);

  const uniqueAgeGroups = useMemo(() => {
    const ages = [...new Set(allGroups.map(g => g.ageGroup).filter(Boolean))];
    // Fallback to common age groups if extraction fails
    if (ages.length === 0) {
      return ['Mixed Ages', 'Young Adults', 'Adults', 'Seniors'];
    }
    return ages.sort();
  }, [allGroups]);

  // Filter languages based on search term
  const filteredLanguages = useMemo(() => {
    if (!languageSearchTerm.trim()) return uniqueLanguages;
    return uniqueLanguages.filter(lang => 
      lang.toLowerCase().includes(languageSearchTerm.toLowerCase())
    );
  }, [uniqueLanguages, languageSearchTerm]);

  // Calculate waitlist statistics
  const calculateWaitlistStats = () => {
    const groupsWithWaitlist = allGroups.filter(g => g.members > maxGroupSize);
    return {
      total: groupsWithWaitlist.length,
      percentage: ((groupsWithWaitlist.length / allGroups.length) * 100).toFixed(1)
    };
  };

  // Filter groups
  const filteredGroups = useMemo(() => {
    return allGroups.filter(group => {
      const matchesGender = activeGenderFilter === 'All' || group.gender === activeGenderFilter || group.gender === 'All';
      const matchesLanguage = activeLanguageFilter === '' || activeLanguageFilter === 'All' || group.language === activeLanguageFilter;
      const matchesAge = activeAgeFilter === '' || activeAgeFilter === 'All' || group.ageGroup === activeAgeFilter;
      
      // Age group filter from Sort/Filter modal
      const matchesAgeGroupFilter = selectedAgeGroupsFilter.length === 0 || selectedAgeGroupsFilter.includes(group.ageGroup);
      
      // Live filter (from results area) - always applies
      const matchesLiveSearch = activeSearchTerm === '' || 
        group.name.toLowerCase().includes(activeSearchTerm.toLowerCase()) ||
        group.leader.toLowerCase().includes(activeSearchTerm.toLowerCase());
      
      // Initial search filter based on mode
      let matchesInitialSearch = true;
      if (activeSearchMode === 'byName') {
        // In "By Name" mode, filter by name/leader from the top search
        matchesInitialSearch = activeNameSearch === '' || 
          group.name.toLowerCase().includes(activeNameSearch.toLowerCase()) ||
          group.leader.toLowerCase().includes(activeNameSearch.toLowerCase());
      } else {
        // In "By Time" mode, filter by selected day/times
        matchesInitialSearch = matchesSelectedDayTime(group);
      }
      
      return matchesGender && matchesLanguage && matchesAge && matchesAgeGroupFilter && matchesLiveSearch && matchesInitialSearch;
    });
  }, [activeGenderFilter, activeLanguageFilter, activeAgeFilter, activeSearchTerm, activeSelectedDayTimes, activeNameSearch, activeSearchMode, selectedAgeGroupsFilter]);

  const availableGroups = useMemo(() => {
    // Groups with members LESS than maxGroupSize are available
    return sortGroups(filteredGroups.filter(g => g.members < maxGroupSize));
  }, [filteredGroups, sortBy, sortOrder, maxGroupSize]);

  const fullGroups = useMemo(() => {
    // Groups with members >= maxGroupSize are full (need to join waitlist)
    return sortGroups(filteredGroups.filter(g => g.members >= maxGroupSize));
  }, [filteredGroups, sortBy, sortOrder, maxGroupSize]);

  // Groups matching gender and language only (ignoring time) - for "no results" suggestions
  const groupsMatchingGenderLanguage = useMemo(() => {
    return allGroups.filter(group => {
      const matchesGender = activeGenderFilter === 'All' || group.gender === activeGenderFilter || group.gender === 'All';
      const matchesLanguage = activeLanguageFilter === '' || activeLanguageFilter === 'All' || group.language === activeLanguageFilter;
      return matchesGender && matchesLanguage;
    });
  }, [allGroups, activeGenderFilter, activeLanguageFilter]);

  // Count groups by age group in current results (before age filter applied) for Sort/Filter modal
  const ageGroupCounts = useMemo(() => {
    // Get groups matching all filters EXCEPT age group filter
    const baseFilteredGroups = allGroups.filter(group => {
      const matchesGender = activeGenderFilter === 'All' || group.gender === activeGenderFilter || group.gender === 'All';
      const matchesLanguage = activeLanguageFilter === '' || activeLanguageFilter === 'All' || group.language === activeLanguageFilter;
      const matchesAge = activeAgeFilter === '' || activeAgeFilter === 'All' || group.ageGroup === activeAgeFilter;
      const matchesLiveSearch = activeSearchTerm === '' || 
        group.name.toLowerCase().includes(activeSearchTerm.toLowerCase()) ||
        group.leader.toLowerCase().includes(activeSearchTerm.toLowerCase());
      let matchesInitialSearch = true;
      if (activeSearchMode === 'byName') {
        matchesInitialSearch = activeNameSearch === '' || 
          group.name.toLowerCase().includes(activeNameSearch.toLowerCase()) ||
          group.leader.toLowerCase().includes(activeNameSearch.toLowerCase());
      } else {
        matchesInitialSearch = matchesSelectedDayTime(group);
      }
      return matchesGender && matchesLanguage && matchesAge && matchesLiveSearch && matchesInitialSearch;
    });
    
    // Count by age group
    const counts = {};
    baseFilteredGroups.forEach(group => {
      counts[group.ageGroup] = (counts[group.ageGroup] || 0) + 1;
    });
    return counts;
  }, [allGroups, activeGenderFilter, activeLanguageFilter, activeAgeFilter, activeSearchTerm, activeSelectedDayTimes, activeNameSearch, activeSearchMode]);

  const GroupCard = ({ group }) => {
    // Group is full if members >= maxGroupSize setting
    const isFull = group.members >= maxGroupSize;
    
    const dayMap = {
      'Sunday': 'Sun',
      'Monday': 'Mon',
      'Tuesday': 'Tue',
      'Wednesday': 'Wed',
      'Thursday': 'Thu',
      'Friday': 'Fri',
      'Saturday': 'Sat'
    };
    
    const groupDayShort = dayMap[group.day];
    
    // Determine daypart from time
    const hour = parseInt(group.time.split(':')[0]);
    const isPM = group.time.includes('PM');
    const hour24 = isPM && hour !== 12 ? hour + 12 : (!isPM && hour === 12 ? 0 : hour);
    
    let daypart = '';
    if (hour24 >= 6 && hour24 < 12) daypart = 'Morning';
    else if (hour24 >= 12 && hour24 < 18) daypart = 'Midday';
    else if (hour24 >= 18 && hour24 < 24) daypart = 'Evening';
    else daypart = 'Night';
    
    return (
      <div className={`group-card ${isFull ? 'full' : ''}`}>
        <div className="card-content">
          <div className="time-section">
            <div className="meeting-time">
              {getDaypartIcon(daypart, 18)}
              <span className="time">{group.time}, {group.day}</span>
            </div>
            <div className={`day-badges day-badges-${dayBadgeStyle}`}>
              {days.map(day => (
                <span 
                  key={day} 
                  className={`day-badge day-badge-${dayBadgeStyle} ${dayBadgeStyle === 'circle' ? `circle-border-${circleBorderWidth}` : ''} ${day === groupDayShort ? 'active' : ''}`}
                >
                  {dayBadgeStyle === 'dot' ? (day === groupDayShort ? day : '') : day}
                </span>
              ))}
            </div>
          </div>
          
          <div className="group-info">
            <h3 className="group-name">{group.name}</h3>
            <div className="meta-row">
              <div className="meta-info">
                <span className="meta-item">
                  <Users size={14} />
                  {group.gender} • {group.ageGroup}
                  <span className="meta-members-inline"> • {group.members} members{isFull && group.waitlist > 0 ? `, ${group.waitlist} waitlist` : ''}</span>
                </span>
              </div>
              <div className="language-column">
                <span className="meta-item">
                  <Globe size={14} />
                  {group.language}
                </span>
              </div>
            </div>
          </div>
          
          <div className="leader-section">
            <span className="leader-label">Leader: {group.leader}</span>
            <span className="member-count">
              {isFull 
                ? `${group.members} members${group.waitlist > 0 ? `, ${group.waitlist} on waitlist` : ''}`
                : `${group.members} members`
              }
            </span>
          </div>
        </div>
        
        <button 
          className={`join-btn ${isFull ? 'waitlist' : ''}`}
          onClick={() => { 
            setSelectedGroupForJoin(group);
            setJoinModalType(isFull ? 'waitlist' : 'join'); 
            setShowJoinModal(true); 
          }}
        >
          {isFull ? 'Join Waitlist' : 'Join'}
        </button>
      </div>
    );
  };

  return (
    <div className="bsf-container">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        .bsf-container {
          min-height: 100vh;
          background: #fafbfc;
          font-family: 'Roboto', sans-serif;
        }
        
        .header {
          background: linear-gradient(135deg, #0f4c5c 0%, #1a6b7f 100%);
          color: white;
          padding: 2rem 1.5rem;
          box-shadow: 0 4px 20px rgba(15, 76, 92, 0.15);
        }
        
        .header-top {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 2rem;
        }
        
        .logo {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-size: 1.5rem;
          font-weight: 700;
          letter-spacing: -0.5px;
        }
        
        .logo-icon {
          width: 36px;
          height: 36px;
          background: linear-gradient(135deg, #fb8500 0%, #ffb703 100%);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 800;
          font-size: 1.2rem;
          box-shadow: 0 2px 8px rgba(251, 133, 0, 0.3);
        }
        
        .header-links {
          display: flex;
          gap: 1.5rem;
        }
        
        .hamburger-btn {
          display: none;
          background: none;
          border: none;
          cursor: pointer;
          padding: 0.5rem;
          border-radius: 8px;
          transition: background 0.2s;
        }
        
        .hamburger-btn:hover {
          background: rgba(255, 255, 255, 0.15);
        }
        
        .hamburger-menu {
          display: flex;
          flex-direction: column;
          gap: 0;
          margin-top: 1rem;
          border-top: 1px solid rgba(255, 255, 255, 0.15);
          padding-top: 0.5rem;
        }
        
        .hamburger-menu-item {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          background: none;
          border: none;
          color: white;
          font-size: 1rem;
          font-weight: 500;
          font-family: 'Roboto', sans-serif;
          padding: 0.875rem 0.5rem;
          cursor: pointer;
          transition: background 0.2s;
          border-radius: 8px;
          text-align: left;
        }
        
        .hamburger-menu-item:hover {
          background: rgba(255, 255, 255, 0.1);
        }
        
        /* Fullscreen Language Picker */
        .language-fullscreen-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: white;
          z-index: 10000;
          display: flex;
          flex-direction: column;
        }
        
        .language-fullscreen-header {
          display: flex;
          align-items: center;
          padding: 1rem 1.25rem;
          border-bottom: 1px solid #e9ecef;
          gap: 1rem;
          flex-shrink: 0;
        }
        
        .language-fullscreen-close {
          background: none;
          border: none;
          cursor: pointer;
          padding: 0.25rem;
          color: #212529;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .language-fullscreen-title {
          font-size: 1.125rem;
          font-weight: 600;
          color: #212529;
          margin: 0;
        }
        
        .language-fullscreen-search {
          padding: 1rem 1.25rem;
          border-bottom: 1px solid #e9ecef;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          gap: 0.75rem;
          background: #f8f9fa;
        }
        
        .language-fullscreen-search-icon {
          color: #6c757d;
          flex-shrink: 0;
        }
        
        .language-fullscreen-search-input {
          flex: 1;
          border: 2px solid #dee2e6;
          border-radius: 10px;
          padding: 0.75rem 1rem;
          font-size: 1rem;
          font-family: 'Roboto', sans-serif;
          color: #212529;
          outline: none;
          background: white;
        }
        
        .language-fullscreen-search-input:focus {
          border-color: #0f4c5c;
          box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.1);
        }
        
        .language-fullscreen-search-input::placeholder {
          color: #6c757d;
        }
        
        .language-fullscreen-list {
          flex: 1;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }
        
        .language-fullscreen-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 1rem 1.25rem;
          font-size: 1rem;
          font-family: 'Roboto', sans-serif;
          color: #212529;
          cursor: pointer;
          border-bottom: 1px solid #f1f3f5;
          transition: background 0.15s;
        }
        
        .language-fullscreen-item:active {
          background: #f8f9fa;
        }
        
        .language-fullscreen-item.selected {
          color: #0f4c5c;
          font-weight: 600;
          background: #c5e8ee;
        }
        
        .language-check {
          color: #0f4c5c;
          font-size: 1.25rem;
          font-weight: 700;
        }
        
        .header-link {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: white;
          padding: 0.5rem 1.25rem;
          border-radius: 8px;
          font-size: 0.9rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
        }
        
        .header-link:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: translateY(-1px);
        }
        
        .logo {
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .logo:hover {
          opacity: 0.9;
          transform: scale(1.02);
        }
        
        /* Options Modal */
        .options-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
          animation: fadeIn 0.2s ease;
        }
        
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        
        .options-modal {
          background: white;
          padding: 2rem;
          border-radius: 16px;
          max-width: 600px;
          width: 90%;
          max-height: 80vh;
          overflow-y: auto;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
          animation: slideUp 0.3s ease;
        }
        
        @keyframes slideUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .options-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1.5rem;
          padding-bottom: 1rem;
          border-bottom: 2px solid #e9ecef;
        }
        
        .options-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: #0f4c5c;
          margin: 0;
        }
        
        .options-close {
          background: none;
          border: none;
          font-size: 1.75rem;
          color: #6c757d;
          cursor: pointer;
          padding: 0;
          line-height: 1;
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          transition: all 0.2s ease;
        }
        
        .options-close:hover {
          color: #0f4c5c;
          background: #f8f9fa;
        }
        
        .options-section {
          margin-bottom: 2rem;
        }
        
        .options-section-title {
          font-size: 1.1rem;
          font-weight: 600;
          color: #212529;
          margin-bottom: 1rem;
        }
        
        .option-item {
          display: flex;
          align-items: flex-start;
          padding: 1rem;
          border: 2px solid #e9ecef;
          border-radius: 8px;
          margin-bottom: 0.75rem;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .option-item:hover {
          border-color: #b8dce6;
          background: #f8f9fa;
        }
        
        .option-item.selected {
          border-color: #0f4c5c;
          background: #d4eef2;
        }
        
        .option-radio {
          width: 20px;
          height: 20px;
          border: 2px solid #adb5bd;
          border-radius: 50%;
          margin-right: 1rem;
          margin-top: 2px;
          position: relative;
          flex-shrink: 0;
          transition: all 0.2s ease;
        }
        
        .option-item.selected .option-radio {
          border-color: #0f4c5c;
        }
        
        .option-item.selected .option-radio::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 10px;
          height: 10px;
          background: #0f4c5c;
          border-radius: 50%;
        }
        
        .option-label {
          flex: 1;
        }
        
        .option-name {
          font-weight: 600;
          color: #212529;
          margin-bottom: 0.25rem;
          font-size: 0.95rem;
        }
        
        .option-description {
          font-size: 0.85rem;
          color: #6c757d;
          line-height: 1.4;
        }
        
        .logo {
          cursor: pointer;
        }
        
        /* Options Modal */
        .options-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
        }
        
        .options-modal {
          background: white;
          padding: 2rem;
          border-radius: 16px;
          max-width: 600px;
          width: 90%;
          max-height: 80vh;
          overflow-y: auto;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        
        .options-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1.5rem;
        }
        
        .options-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: #0f4c5c;
          margin: 0;
        }
        
        .options-close {
          background: none;
          border: none;
          font-size: 1.5rem;
          color: #6c757d;
          cursor: pointer;
          padding: 0.25rem;
          line-height: 1;
        }
        
        .options-close:hover {
          color: #0f4c5c;
        }
        
        .options-section {
          margin-bottom: 2rem;
        }
        
        .options-section-title {
          font-size: 1rem;
          font-weight: 600;
          color: #212529;
          margin-bottom: 1rem;
        }
        
        .option-item {
          display: flex;
          align-items: center;
          padding: 0.75rem;
          border: 2px solid #e9ecef;
          border-radius: 8px;
          margin-bottom: 0.5rem;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .option-item:hover {
          border-color: #b8dce6;
        }
        
        .option-item.selected {
          border-color: #0f4c5c;
          background: #d4eef2;
        }
        
        .option-radio {
          width: 20px;
          height: 20px;
          border: 2px solid #adb5bd;
          border-radius: 50%;
          margin-right: 1rem;
          position: relative;
          transition: all 0.2s ease;
        }
        
        .option-item.selected .option-radio {
          border-color: #0f4c5c;
        }
        
        .option-item.selected .option-radio::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 10px;
          height: 10px;
          background: #0f4c5c;
          border-radius: 50%;
        }
        
        .option-label {
          flex: 1;
        }
        
        .option-name {
          font-weight: 500;
          color: #212529;
          margin-bottom: 0.25rem;
        }
        
        .option-description {
          font-size: 0.85rem;
          color: #6c757d;
        }
        
        .hero {
          max-width: 1200px;
          margin: 0 auto;
          text-align: center;
        }
        
        .hero-title {
          font-family: 'Roboto', sans-serif;
          font-size: 2.75rem;
          font-weight: 400;
          margin-bottom: 0.75rem;
          letter-spacing: -1px;
          line-height: 1.2;
        }
        
        .current-study {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          font-size: 1rem;
          opacity: 0.95;
          margin-bottom: 2rem;
        }
        
        .search-section {
          background: white;
          padding: 2rem;
          border-radius: 20px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
          max-width: 1200px;
          margin: 0 auto;
        }
        
        /* Tab Design: Base */
        .search-mode-tabs {
          display: flex;
          width: fit-content;
          align-items: center;
        }
        
        /* Design: Underline */
        .search-mode-tabs.underline {
          gap: 1.5rem;
          border-bottom: 2px solid #e9ecef;
          margin-bottom: 1rem;
        }
        
        .search-mode-tabs.underline .mode-tab {
          padding: 0.5rem 0;
          background: none;
          border: none;
          font-size: 0.9rem;
          font-weight: 500;
          color: #6c757d;
          cursor: pointer;
          position: relative;
          font-family: 'Roboto', sans-serif;
          transition: all 0.2s ease;
        }
        
        .search-mode-tabs.underline .mode-tab.active {
          color: #0f4c5c;
        }
        
        .search-mode-tabs.underline .mode-tab.active::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          right: 0;
          height: 2px;
          background: #0f4c5c;
        }
        
        .search-mode-tabs.underline .mode-tab:hover:not(.active) {
          color: #495057;
        }
        
        /* Design: Separator (Text Links) */
        .search-mode-tabs.separator {
          gap: 1rem;
          margin-bottom: 1rem;
        }
        
        .search-mode-tabs.separator .mode-tab {
          padding: 0.25rem 0.5rem;
          background: none;
          border: none;
          font-size: 0.875rem;
          font-weight: 400;
          color: #6c757d;
          cursor: pointer;
          font-family: 'Roboto', sans-serif;
          transition: all 0.2s ease;
        }
        
        .search-mode-tabs.separator .mode-tab.active {
          font-weight: 600;
          color: #0f4c5c;
        }
        
        .search-mode-tabs.separator .mode-tab:hover:not(.active) {
          color: #495057;
        }
        
        .mode-separator {
          color: #dee2e6;
          font-weight: 300;
        }
        
        /* Design: Pills */
        .search-mode-tabs.pills {
          gap: 0.5rem;
          margin-bottom: 1rem;
        }
        
        .search-mode-tabs.pills .mode-tab {
          padding: 0.35rem 0.875rem;
          background: transparent;
          border: 1.5px solid #e9ecef;
          border-radius: 20px;
          font-size: 0.85rem;
          font-weight: 500;
          color: #6c757d;
          cursor: pointer;
          font-family: 'Roboto', sans-serif;
          transition: all 0.2s ease;
        }
        
        .search-mode-tabs.pills .mode-tab.active {
          background: #0f4c5c;
          border-color: #0f4c5c;
          color: white;
        }
        
        .search-mode-tabs.pills .mode-tab:hover:not(.active) {
          border-color: #adb5bd;
          color: #495057;
        }
        
        /* Design: Compact Segmented */
        .search-mode-tabs.compact {
          gap: 0.25rem;
          background: #f8f9fa;
          padding: 0.2rem;
          border-radius: 8px;
          margin-bottom: 1rem;
        }
        
        .search-mode-tabs.compact .mode-tab {
          padding: 0.25rem 0.65rem;
          border: none;
          background: transparent;
          border-radius: 6px;
          font-size: 0.8rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
          color: #495057;
        }
        
        .search-mode-tabs.compact .mode-tab.active {
          background: white;
          color: #0f4c5c;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        }
        
        .search-mode-tabs.compact .mode-tab:hover:not(.active) {
          background: rgba(255, 255, 255, 0.5);
        }
        
        /* Design: Radio */
        .search-mode-tabs.radio {
          gap: 1.5rem;
          margin-bottom: 1rem;
        }
        
        .search-mode-tabs.radio .mode-tab {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          background: none;
          border: none;
          font-size: 0.875rem;
          font-weight: 500;
          color: #495057;
          cursor: pointer;
          font-family: 'Roboto', sans-serif;
          transition: all 0.2s ease;
          padding: 0;
        }
        
        .radio-circle {
          width: 16px;
          height: 16px;
          border: 2px solid #adb5bd;
          border-radius: 50%;
          position: relative;
          transition: all 0.2s ease;
        }
        
        .search-mode-tabs.radio .mode-tab.active {
          color: #0f4c5c;
        }
        
        .search-mode-tabs.radio .mode-tab.active .radio-circle {
          border-color: #0f4c5c;
        }
        
        .search-mode-tabs.radio .mode-tab.active .radio-circle::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 8px;
          height: 8px;
          background: #0f4c5c;
          border-radius: 50%;
        }
        
        .search-mode-tabs.radio .mode-tab:hover:not(.active) {
          color: #0f4c5c;
        }
        
        .search-mode-tabs.radio .mode-tab:hover:not(.active) .radio-circle {
          border-color: #0f4c5c;
        }
        
        /* Design: Attached to Card */
        .search-mode-tabs.attached {
          gap: 0.25rem;
          background: #f8f9fa;
          padding: 0.2rem;
          border-radius: 8px 8px 0 0;
          margin-bottom: 0;
          position: relative;
          top: 0;
        }
        
        .search-mode-tabs.attached .mode-tab {
          padding: 0.35rem 0.875rem;
          border: none;
          background: transparent;
          border-radius: 6px 6px 0 0;
          font-size: 0.85rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
          color: #495057;
        }
        
        .search-mode-tabs.attached .mode-tab.active {
          background: white;
          color: #0f4c5c;
        }
        
        .search-mode-tabs.attached .mode-tab:hover:not(.active) {
          background: rgba(255, 255, 255, 0.5);
        }
        
        .search-section.has-attached-tabs {
          padding-top: 0;
          border-radius: 0 20px 20px 20px;
        }
        
        /* Design: Minimal Spacing */
        .search-mode-tabs.minimal {
          gap: 0.5rem;
          margin-bottom: 0.5rem;
        }
        
        .search-mode-tabs.minimal .mode-tab {
          padding: 0.2rem 0.4rem;
          background: none;
          border: none;
          font-size: 0.8rem;
          font-weight: 500;
          color: #6c757d;
          cursor: pointer;
          font-family: 'Roboto', sans-serif;
          transition: all 0.2s ease;
        }
        
        .search-mode-tabs.minimal .mode-tab.active {
          font-weight: 600;
          color: #0f4c5c;
        }
        
        .search-mode-tabs.minimal .mode-tab:hover:not(.active) {
          color: #495057;
        }
        
        .search-mode-tabs.minimal .mode-separator {
          color: #dee2e6;
          font-weight: 300;
          font-size: 0.8rem;
        }
        
        .search-row-top {
          display: flex;
          gap: 1rem;
          margin-bottom: 1rem;
          flex-wrap: wrap;
          align-items: center;
        }
        
        /* When age filter is hidden, expand other fields */
        .search-row-top.no-age-filter .search-input-wrapper {
          min-width: 320px;
        }
        
        .search-row-top.no-age-filter .custom-dropdown-trigger {
          min-width: 220px;
          max-width: 220px;
        }
        
        .search-input-wrapper {
          flex: 1;
          min-width: 250px;
          position: relative;
        }
        
        .search-input {
          width: 100%;
          padding: 0.875rem 1rem 0.875rem 3rem;
          border: 2px solid #e9ecef;
          border-radius: 12px;
          font-size: 0.95rem;
          font-family: 'Roboto', sans-serif;
          transition: all 0.3s ease;
          cursor: pointer;
          color: #495057;
          height: 52px;
          box-sizing: border-box;
        }
        
        .search-input::placeholder {
          color: #6c757d;
        }
        
        .search-input:focus {
          outline: none;
          border-color: #0f4c5c;
          box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.1);
        }
        
        .time-grid-container {
          position: absolute;
          top: 0;
          left: 0;
          background: white;
          border: 2px solid #e9ecef;
          border-radius: 12px;
          padding: 1.5rem;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
          z-index: 10;
          animation: slideDown 0.2s ease;
          width: 900px;
          max-width: calc(100vw - 3rem);
        }
        
        @keyframes slideDown {
          from {
            opacity: 0;
            transform: translateY(-10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .time-grid-popup-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1.5rem;
        }
        
        .time-grid-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: #212529;
          margin: 0;
        }
        
        .time-grid-close-mobile {
          display: none;
          background: none;
          border: none;
          font-size: 2rem;
          color: #6c757d;
          cursor: pointer;
          padding: 0;
          line-height: 1;
          width: 32px;
          height: 32px;
        }
        
        .time-grid-close-mobile:hover {
          color: #0f4c5c;
        }
        
        .popup-tabs {
          display: flex;
          gap: 0.5rem;
          margin-bottom: 1.5rem;
          border-bottom: 2px solid #e9ecef;
        }
        
        .popup-tabs-as-header {
          margin-bottom: 0;
          border-bottom: none;
          gap: 0;
          width: 100%;
        }
        
        .popup-tab {
          padding: 0.75rem 1.5rem;
          background: none;
          border: none;
          border-bottom: 2px solid transparent;
          margin-bottom: -2px;
          font-size: 1rem;
          font-weight: 500;
          color: #6c757d;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
        }
        
        .popup-tabs-as-header .popup-tab {
          flex: 1;
          font-size: 1.5rem;
          font-weight: 600;
          padding: 0 0 0.75rem 0;
          border-bottom: 3px solid transparent;
          margin-bottom: 0.75rem;
          text-align: center;
          color: #adb5bd;
        }
        
        .popup-tabs-as-header .popup-tab.active {
          color: #0f4c5c;
          border-bottom-color: #0f4c5c;
        }
        
        .popup-tab.active {
          color: #0f4c5c;
          border-bottom-color: #0f4c5c;
        }
        
        .popup-tab:hover:not(.active) {
          color: #495057;
        }
        
        .popup-search-input {
          width: 100%;
          padding: 1rem;
          border: 2px solid #e9ecef;
          border-radius: 12px;
          font-size: 1.1rem;
          font-family: 'Roboto', sans-serif;
          margin-bottom: 1.5rem;
          color: #495057;
        }
        
        .popup-search-input:focus {
          outline: none;
          border-color: #0f4c5c;
        }
        
        .popup-search-input::placeholder {
          color: #adb5bd;
        }
        
        .popup-search-section {
          padding: 1.5rem 0;
        }
        
        .time-grid {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }
        
        .time-grid-desktop {
          display: flex;
        }
        
        .time-grid-mobile {
          display: none;
        }
        
        .time-grid-header {
          display: grid;
          grid-template-columns: 140px repeat(7, minmax(90px, 1fr));
          gap: 0.5rem;
          padding-bottom: 0.5rem;
        }
        
        .time-label-header {
          /* Empty space above time labels */
        }
        
        .day-header {
          text-align: center;
          font-weight: 600;
          font-size: 0.875rem;
          color: #6c757d;
          padding: 0.5rem;
        }
        
        .clickable-label {
          cursor: pointer;
          transition: all 0.2s ease;
          user-select: none;
        }
        
        .clickable-label:hover {
          color: #0f4c5c;
          background: rgba(15, 76, 92, 0.05);
          border-radius: 4px;
        }
        
        .clickable-label:active {
          transform: scale(0.98);
        }
        
        .time-row {
          display: grid;
          grid-template-columns: 140px repeat(7, minmax(90px, 1fr));
          gap: 0.5rem;
          align-items: center;
        }
        
        .time-label {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          gap: 0.125rem;
          padding-right: 1rem;
        }
        
        .time-label-main {
          font-weight: 600;
          color: #212529;
          font-size: 0.9rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        .time-label-main svg {
          flex-shrink: 0;
        }
        
        .time-label-range {
          font-size: 0.75rem;
          color: #9ca3af;
        }
        
        .time-btn {
          padding: 0.625rem 0.75rem;
          border: 1.5px solid #d1d5db;
          background: white;
          border-radius: 20px;
          font-size: 0.875rem;
          font-weight: 400;
          font-family: 'Roboto', sans-serif;
          cursor: pointer;
          transition: all 0.2s ease;
          color: #495057;
          text-align: center;
          width: 100%;
          white-space: nowrap;
        }
        
        .time-btn:hover {
          border-color: #9ca3af;
          background: #f9fafb;
        }
        
        .time-btn svg {
          flex-shrink: 0;
        }
        
        .time-btn.selected {
          background: #0f4c5c;
          border-color: #0f4c5c;
          color: white;
          font-weight: 500;
        }
        
        .time-grid-footer {
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 1rem;
          margin-top: 1.5rem;
          padding-top: 1.5rem;
          border-top: 1px solid #e9ecef;
        }
        
        .clear-link {
          color: #0f4c5c;
          text-decoration: none;
          font-weight: 500;
          font-size: 0.9rem;
          cursor: pointer;
          text-align: center;
        }
        
        .clear-link:hover {
          text-decoration: underline;
        }
        
        .time-grid-done-btn {
          background: #0f4c5c;
          color: white;
          border: none;
          padding: 1rem 2rem;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
          width: 100%;
        }
        
        .time-grid-done-btn:hover {
          background: #0d3f4d;
        }
        
        .input-icon {
          position: absolute;
          left: 1rem;
          top: 50%;
          transform: translateY(-50%);
          color: #6c757d;
          pointer-events: none;
        }
        
        .gender-filters {
          display: flex;
          gap: 0;
          background: #f8f9fa;
          padding: 0.25rem;
          border-radius: 12px;
          height: 52px;
          box-sizing: border-box;
          align-items: center;
        }
        
        /* Style: Filled (default) */
        .gender-filters.style-filled {
          gap: 0.25rem;
        }
        .gender-filters.style-filled .gender-btn {
          padding: 0.5rem 1rem;
          border: none;
          background: transparent;
          border-radius: 8px;
          font-size: 0.9rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
          color: #6c757d;
          height: calc(100% - 4px);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .gender-filters.style-filled .gender-btn.active {
          background: #3d7a8a;
          color: white;
          box-shadow: 0 2px 8px rgba(61, 122, 138, 0.25);
        }
        .gender-filters.style-filled .gender-btn:hover:not(.active) {
          background: rgba(255, 255, 255, 0.7);
          color: #495057;
        }
        
        /* Style: Outline */
        .gender-filters.style-outline {
          background: transparent;
          border: 2px solid #e9ecef;
          gap: 0;
          padding: 0;
        }
        .gender-filters.style-outline .gender-btn {
          padding: 0.5rem 1rem;
          border: none;
          background: transparent;
          border-radius: 0;
          font-size: 0.9rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
          color: #6c757d;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #e9ecef;
        }
        .gender-filters.style-outline .gender-btn:first-child {
          border-radius: 10px 0 0 10px;
        }
        .gender-filters.style-outline .gender-btn:last-child {
          border-radius: 0 10px 10px 0;
          border-right: none;
        }
        .gender-filters.style-outline .gender-btn.active {
          background: #0f4c5c;
          color: white;
          border-color: #0f4c5c;
        }
        .gender-filters.style-outline .gender-btn:hover:not(.active) {
          background: #f8f9fa;
          color: #495057;
        }
        
        /* Style: Underline */
        .gender-filters.style-underline {
          background: transparent;
          border: none;
          gap: 0.5rem;
          padding: 0;
          border-bottom: 2px solid #e9ecef;
          border-radius: 0;
          height: 48px;
        }
        .gender-filters.style-underline .gender-btn {
          padding: 0.5rem 1rem;
          border: none;
          background: transparent;
          border-radius: 0;
          font-size: 0.9rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
          color: #6c757d;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          margin-bottom: -2px;
        }
        .gender-filters.style-underline .gender-btn.active {
          color: #0f4c5c;
          font-weight: 600;
        }
        .gender-filters.style-underline .gender-btn.active::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: #0f4c5c;
          border-radius: 2px 2px 0 0;
        }
        .gender-filters.style-underline .gender-btn:hover:not(.active) {
          color: #495057;
        }
        
        /* Style: Pill */
        .gender-filters.style-pill {
          background: transparent;
          gap: 0.5rem;
          padding: 0;
          height: auto;
        }
        .gender-filters.style-pill .gender-btn {
          padding: 0.625rem 1.25rem;
          border: 2px solid #e9ecef;
          background: white;
          border-radius: 50px;
          font-size: 0.9rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
          color: #6c757d;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .gender-filters.style-pill .gender-btn.active {
          background: #0f4c5c;
          color: white;
          border-color: #0f4c5c;
        }
        .gender-filters.style-pill .gender-btn:hover:not(.active) {
          border-color: #0f4c5c;
          color: #0f4c5c;
        }
        
        /* Style: Minimal */
        .gender-filters.style-minimal {
          background: transparent;
          gap: 0.25rem;
          padding: 0;
          height: auto;
        }
        .gender-filters.style-minimal .gender-btn {
          padding: 0.5rem 0.75rem;
          border: none;
          background: transparent;
          border-radius: 6px;
          font-size: 0.9rem;
          font-weight: 400;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
          color: #adb5bd;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .gender-filters.style-minimal .gender-btn.active {
          color: #0f4c5c;
          font-weight: 600;
        }
        .gender-filters.style-minimal .gender-btn:hover:not(.active) {
          color: #495057;
        }
        
        /* Style: Segmented (iOS-style) */
        .gender-filters.style-segmented {
          background: #d5d8dc;
          gap: 0;
          padding: 3px;
          border-radius: 10px;
          height: 44px;
        }
        .gender-filters.style-segmented .gender-btn {
          padding: 0.5rem 1rem;
          border: none;
          background: transparent;
          border-radius: 8px;
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
          font-family: 'Roboto', sans-serif;
          color: #495057;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
        }
        .gender-filters.style-segmented .gender-btn.active {
          background: white;
          color: #0f4c5c;
          font-weight: 700;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        }
        .gender-filters.style-segmented .gender-btn:hover:not(.active) {
          color: #212529;
        }
        
        /* Style: Chips */
        .gender-filters.style-chips {
          background: transparent;
          gap: 0.5rem;
          padding: 0;
          height: auto;
        }
        .gender-filters.style-chips .gender-btn {
          padding: 0.5rem 1rem;
          border: 1px solid #dee2e6;
          background: #f8f9fa;
          border-radius: 8px;
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
          color: #495057;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .gender-filters.style-chips .gender-btn.active {
          background: #d4eef2;
          color: #0f4c5c;
          border-color: #0f4c5c;
        }
        .gender-filters.style-chips .gender-btn:hover:not(.active) {
          background: #e9ecef;
          border-color: #adb5bd;
        }
        
        .select-wrapper {
          position: relative;
          min-width: 160px;
        }
        
        .select {
          width: 100%;
          padding: 0.875rem 2.5rem 0.875rem 2.75rem;
          border: 2px solid #e9ecef;
          border-radius: 12px;
          font-size: 0.95rem;
          font-family: 'Roboto', sans-serif;
          cursor: pointer;
          appearance: none;
          background: white;
          transition: all 0.3s ease;
          color: #495057;
          height: 52px;
          box-sizing: border-box;
        }
        
        .select.placeholder {
          color: #9ca3af;
        }
        
        .select option {
          color: #495057;
        }
        
        .select option[disabled] {
          color: #9ca3af;
        }
        
        .select:focus {
          outline: none;
          border-color: #0f4c5c;
          box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.1);
        }
        
        .select-icon {
          position: absolute;
          left: 1rem;
          top: 50%;
          transform: translateY(-50%);
          color: #6c757d;
          pointer-events: none;
        }
        
        .chevron-icon {
          position: absolute;
          right: 1rem;
          top: 50%;
          transform: translateY(-50%);
          color: #6c757d;
          pointer-events: none;
        }
        
        .custom-dropdown-wrapper {
          position: relative;
          min-width: 160px;
        }
        
        .custom-dropdown-wrapper .select-icon {
          position: absolute;
          left: 1rem;
          top: 26px;
          transform: translateY(-50%);
          color: #6c757d;
          pointer-events: none;
          z-index: 2;
        }
        
        .custom-dropdown {
          position: relative;
          width: 100%;
        }
        
        .custom-dropdown-trigger {
          width: 100%;
          padding: 0.875rem 2.5rem 0.875rem 2.75rem;
          border: 2px solid #e9ecef;
          border-radius: 12px;
          font-size: 0.95rem;
          font-family: 'Roboto', sans-serif;
          cursor: pointer;
          background: white;
          transition: all 0.3s ease;
          color: #495057;
          height: 52px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          min-width: 180px;
          max-width: 180px;
        }
        
        .custom-dropdown-trigger-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1;
          max-width: calc(100% - 24px);
          text-align: left;
        }
        
        .custom-dropdown-trigger .chevron-icon {
          position: static;
          transform: none;
          margin-left: auto;
        }
        
        .custom-dropdown-trigger.placeholder {
          color: #9ca3af;
        }
        
        .custom-dropdown-trigger:hover {
          border-color: #0f4c5c;
        }
        
        .custom-dropdown-menu {
          position: absolute;
          top: 100%;
          left: 0;
          background: white;
          border: 2px solid #e9ecef;
          border-radius: 12px;
          margin-top: 0.5rem;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          z-index: 1000;
          max-height: 300px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          min-width: 320px;
          width: 320px;
        }
        
        .language-search-input {
          padding: 0.75rem 1rem;
          border: none;
          border-bottom: 2px solid #e9ecef;
          font-size: 0.9rem;
          font-family: 'Roboto', sans-serif;
          outline: none;
          width: 100%;
          box-sizing: border-box;
        }
        
        .language-search-input:focus {
          border-bottom-color: #0f4c5c;
        }
        
        .custom-dropdown-options {
          overflow-y: auto;
          max-height: 250px;
        }
        
        .custom-dropdown-option {
          padding: 0.75rem 1rem;
          cursor: pointer;
          transition: background 0.2s ease;
          font-size: 0.9rem;
          text-align: left;
          color: #333;
        }
        
        .custom-dropdown-option:hover {
          background: #d4eef2;
          color: #0f4c5c;
        }
        
        .custom-dropdown-option.selected {
          background: #c5e8ee;
          color: #0f4c5c;
          font-weight: 600;
        }
        
        .custom-dropdown-option.highlighted {
          background: #e8f4f6;
          color: #0f4c5c;
        }
        
        .custom-dropdown-option .highlight {
          background-color: #fff3cd;
          color: #856404;
          padding: 0 2px;
          border-radius: 2px;
        }
        
        .search-btn {
          padding: 0.875rem 2.5rem;
          background: linear-gradient(135deg, #0f4c5c 0%, #1a6b7f 100%);
          color: white;
          border: none;
          border-radius: 12px;
          font-size: 0.95rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 12px rgba(15, 76, 92, 0.2);
          display: flex;
          align-items: center;
          gap: 0.5rem;
          width: 180px;
          height: 52px;
          justify-content: center;
          box-sizing: border-box;
        }
        
        .search-btn:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(15, 76, 92, 0.3);
        }
        
        .search-btn:disabled {
          background: #adb5bd;
          cursor: not-allowed;
          box-shadow: none;
        }
        
        .search-btn.changed {
          background: linear-gradient(135deg, #0f4c5c 0%, #1a6b7f 100%);
        }
        
        .spinner {
          width: 16px;
          height: 16px;
          border: 2px solid #ffffff;
          border-top: 2px solid transparent;
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
        }
        
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        
        .start-over-link {
          font-size: 0.875rem;
          color: #0f4c5c;
          cursor: pointer;
          text-decoration: none;
          transition: all 0.2s ease;
          font-weight: 500;
        }
        
        .start-over-link:hover {
          text-decoration: underline;
        }
        
        .timezone-info {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.875rem;
          color: #6c757d;
          flex-wrap: wrap;
        }
        
        .timezone-footer {
          margin-top: 1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
        }
        
        .change-link {
          color: #0f4c5c;
          text-decoration: none;
          font-weight: 500;
          cursor: pointer;
        }
        
        .change-link:hover {
          text-decoration: underline;
        }
        
        .main-content {
          max-width: 1200px;
          margin: 0 auto;
          padding: 2rem 1.5rem;
        }
        
        .results-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;
        }
        
        .results-count {
          font-size: 1.125rem;
          font-weight: 600;
          color: #212529;
        }
        
        .results-count span {
          color: #0f4c5c;
        }
        
        .filter-search {
          display: flex;
          gap: 1rem;
          align-items: center;
        }
        
        .filter-input {
          padding: 0.625rem 1rem;
          border: 2px solid #e9ecef;
          border-radius: 10px;
          font-size: 0.9rem;
          font-family: 'Roboto', sans-serif;
          min-width: 280px;
        }
        
        .filter-input:focus {
          outline: none;
          border-color: #0f4c5c;
        }
        
        .sort-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.625rem 1rem;
          background: white;
          border: 2px solid #e9ecef;
          border-radius: 10px;
          font-size: 0.9rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          position: relative;
          -webkit-tap-highlight-color: transparent;
          -webkit-appearance: none;
          outline: none;
        }
        
        .sort-btn:hover {
          border-color: #0f4c5c;
        }
        
        .sort-btn:focus,
        .sort-btn:focus-visible {
          outline: none;
          border-color: #e9ecef;
        }
        
        .sort-btn:active {
          border-color: #e9ecef;
        }
        
        .sort-menu {
          position: absolute;
          top: 100%;
          right: 0;
          margin-top: 0.5rem;
          background: white;
          border: 2px solid #e9ecef;
          border-radius: 10px;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
          z-index: 10;
          min-width: 200px;
          animation: slideDown 0.2s ease;
        }
        
        .sort-option {
          padding: 0.75rem 1rem;
          cursor: pointer;
          transition: all 0.2s ease;
          font-size: 0.9rem;
          color: #495057;
          border-bottom: 1px solid #f1f3f5;
        }
        
        .sort-option:last-child {
          border-bottom: none;
        }
        
        .sort-option:hover {
          background: #f8f9fa;
        }
        
        .sort-option.active {
          background: #e8f4f8;
          color: #0f4c5c;
          font-weight: 600;
        }
        
        .section-title {
          font-family: 'Roboto', sans-serif;
          font-size: 1.75rem;
          font-weight: 400;
          color: #212529;
          margin-bottom: 1.5rem;
          letter-spacing: -0.5px;
        }
        
        .section-title.full-groups-title {
          color: #6c757d;
        }
        
        .groups-grid {
          display: grid;
          gap: 1.25rem;
          margin-bottom: 3rem;
        }
        
        .empty-state {
          text-align: center;
          padding: 4rem 2rem;
          color: #6c757d;
        }
        
        .empty-state-icon {
          font-size: 3rem;
          margin-bottom: 1rem;
          opacity: 0.3;
        }
        
        .empty-state h3 {
          font-size: 1.5rem;
          color: #495057;
          margin-bottom: 0.75rem;
          font-weight: 600;
        }
        
        .empty-state p {
          font-size: 1rem;
          line-height: 1.6;
          max-width: 500px;
          margin: 0 auto;
        }
        
        .no-groups-waitlist {
          background: white;
          border-radius: 16px;
          padding: 2.5rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 1rem;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          margin: 2rem 0;
          max-width: 600px;
          margin-left: auto;
          margin-right: auto;
        }
        
        .no-groups-message {
          font-size: 1rem;
          color: #495057;
          line-height: 1.6;
          margin: 0;
        }
        
        .join-waitlist-btn {
          padding: 0.875rem 2rem;
          background: linear-gradient(135deg, #0f4c5c 0%, #1a6b7f 100%);
          color: white;
          border: none;
          border-radius: 12px;
          font-size: 0.95rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 12px rgba(15, 76, 92, 0.2);
          white-space: nowrap;
        }
        
        .join-waitlist-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(15, 76, 92, 0.3);
        }
        
        .timezone-modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
        }
        
        .timezone-modal {
          background: white;
          border-radius: 16px;
          padding: 2rem;
          max-width: 600px;
          width: 90%;
          max-height: 90vh;
          overflow-y: auto;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        
        .timezone-modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1.5rem;
        }
        
        .timezone-modal-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: #212529;
        }
        
        .timezone-modal-close {
          background: none;
          border: none;
          font-size: 1.5rem;
          color: #6c757d;
          cursor: pointer;
          padding: 0.5rem;
          line-height: 1;
        }
        
        .timezone-modal-close:hover {
          color: #212529;
        }
        
        .timezone-map {
          width: 100%;
          height: 250px;
          background: #e9ecef;
          border-radius: 8px;
          margin-bottom: 1.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6c757d;
          font-size: 0.875rem;
          position: relative;
          overflow: hidden;
        }
        
        .timezone-map-placeholder {
          width: 100%;
          height: 100%;
          background: linear-gradient(180deg, #b8d4e0 0%, #7ca8bd 50%, #5a8ca0 100%);
          position: relative;
        }
        
        .timezone-map-continents {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 90%;
          height: 80%;
          opacity: 0.5;
        }
        
        .timezone-pin {
          position: absolute;
          width: 12px;
          height: 12px;
          background: #0f4c5c;
          border-radius: 50%;
          border: 2px solid white;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
          transition: all 0.3s ease;
        }
        
        .timezone-field {
          margin-bottom: 1rem;
        }
        
        .timezone-field-label {
          display: block;
          font-size: 0.875rem;
          font-weight: 500;
          color: #495057;
          margin-bottom: 0.5rem;
        }
        
        .timezone-field-value {
          width: 100%;
          padding: 0.75rem;
          border: 1px solid #dee2e6;
          border-radius: 8px;
          font-size: 0.95rem;
          color: #495057;
          background: #f8f9fa;
        }
        
        .timezone-field-input {
          width: 100%;
          padding: 0.75rem;
          border: 2px solid #0f4c5c;
          border-radius: 8px;
          font-size: 0.95rem;
          color: #212529;
          outline: none;
        }
        
        .timezone-field-input:focus {
          border-color: #1a6b7f;
        }
        
        .timezone-modal-actions {
          display: flex;
          gap: 1rem;
          margin-top: 1.5rem;
        }
        
        .timezone-modal-btn {
          flex: 1;
          padding: 0.75rem;
          border: none;
          border-radius: 8px;
          font-size: 0.95rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .timezone-modal-btn-primary {
          background: linear-gradient(135deg, #0f4c5c 0%, #1a6b7f 100%);
          color: white;
        }
        
        .timezone-modal-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(15, 76, 92, 0.3);
        }
        
        .timezone-modal-btn-secondary {
          background: white;
          color: #6c757d;
          border: 2px solid #dee2e6;
        }
        
        .timezone-modal-btn-secondary:hover {
          border-color: #adb5bd;
          color: #495057;
        }
        
        /* Sort Modal Styles */
        .sort-modal {
          max-width: 400px;
        }
        
        .sort-modal-content {
          display: flex;
          flex-direction: column;
          gap: 1.25rem;
        }
        
        .sort-section {
          display: flex;
          flex-direction: column;
          gap: 0;
        }
        
        .sort-section-label {
          font-size: 0.9rem;
          font-weight: 600;
          color: #495057;
          margin-bottom: 0.5rem;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        
        .sort-options-list {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
        }
        
        .sort-modal-option {
          display: flex;
          align-items: center;
          padding: 0.875rem 1rem;
          border: none;
          border-radius: 8px;
          background: transparent;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .sort-modal-option:hover {
          background: #f8f9fa;
        }
        
        .sort-modal-option.active {
          background: #d4eef2;
        }
        
        .sort-option-check {
          width: 20px;
          height: 20px;
          margin-right: 0.75rem;
          position: relative;
          flex-shrink: 0;
        }
        
        .sort-modal-option.active .sort-option-check::after {
          content: '✓';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #0f4c5c;
          font-size: 18px;
          font-weight: bold;
        }
        
        .sort-option-label {
          flex: 1;
          font-size: 0.95rem;
          font-weight: 500;
          color: #212529;
        }
        
        /* Filter section styles */
        .filter-section {
          border-top: 1px solid #e9ecef;
          padding-top: 1rem;
          margin-top: 0.5rem;
        }
        
        .filter-options-list {
          display: flex;
          flex-direction: column;
          gap: 0.375rem;
        }
        
        .filter-checkbox-option {
          display: flex;
          align-items: center;
          padding: 0.75rem 1rem;
          border-radius: 8px;
          background: #f8f9fa;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .filter-checkbox-option:hover {
          background: #e9ecef;
        }
        
        .filter-checkbox-option.selected {
          background: #d4eef2;
        }
        
        .filter-checkbox {
          width: 20px;
          height: 20px;
          border: 2px solid #ced4da;
          border-radius: 4px;
          margin-right: 0.75rem;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          background: white;
          transition: all 0.2s ease;
        }
        
        .filter-checkbox.checked {
          background: #0f4c5c;
          border-color: #0f4c5c;
        }
        
        .filter-checkbox.checked span {
          color: white;
          font-size: 12px;
          font-weight: bold;
        }
        
        .filter-option-label {
          flex: 1;
          font-size: 0.95rem;
          font-weight: 500;
          color: #212529;
        }
        
        .filter-option-count {
          font-size: 0.85rem;
          color: #6c757d;
          background: #e9ecef;
          padding: 0.25rem 0.5rem;
          border-radius: 12px;
          min-width: 28px;
          text-align: center;
        }
        
        .clear-filter-btn {
          margin-top: 0.75rem;
          padding: 0.5rem 1rem;
          background: transparent;
          border: 1px solid #ced4da;
          border-radius: 6px;
          color: #6c757d;
          font-size: 0.85rem;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .clear-filter-btn:hover {
          background: #f8f9fa;
          border-color: #adb5bd;
        }
        
        .group-card {
          background: white;
          border-radius: 16px;
          padding: 1.5rem;
          display: grid;
          grid-template-columns: 1fr auto;
          align-items: center;
          gap: 1.5rem;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
          transition: all 0.3s ease;
          border: 1px solid #f1f3f5;
        }
        
        .group-card.full {
          background: #e9ecef;
        }
        
        .group-card:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }
        
        .card-content {
          display: grid;
          grid-template-columns: 260px 1fr 200px;
          gap: 1rem;
          align-items: center;
        }
        
        .time-section {
          min-width: 0;
        }
        
        .meeting-time {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 1.125rem;
          font-weight: 600;
          color: #0f4c5c;
          margin-bottom: 0.75rem;
        }
        
        .meeting-time svg {
          flex-shrink: 0;
        }
        
        .day-badges {
          display: flex;
          gap: 0.375rem;
        }
        
        /* Default/Rounded style */
        .day-badge {
          padding: 0.375rem 0.625rem;
          border-radius: 6px;
          font-size: 0.75rem;
          font-weight: 500;
          background: #e9ecef;
          color: #adb5bd;
          transition: all 0.2s ease;
        }
        
        .day-badge.active {
          background: #0f4c5c;
          color: #ffffff;
          font-weight: 600;
        }
        
        /* Circle style */
        .day-badge-circle {
          width: 32px;
          height: 32px;
          padding: 0;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.65rem;
          background: transparent;
          color: #adb5bd;
          border: 1px solid #dee2e6;
        }
        
        /* Circle border width variations */
        .day-badge-circle.circle-border-thin {
          border-width: 1px;
        }
        
        .day-badge-circle.circle-border-medium {
          border-width: 1.5px;
          border-color: #ced4da;
        }
        
        .day-badge-circle.circle-border-thick {
          border-width: 2px;
          border-color: #adb5bd;
        }
        
        .day-badge-circle.active {
          background: #0f4c5c;
          color: #ffffff;
          border-color: #0f4c5c;
        }
        
        /* Circle Filled style - grey background for inactive */
        .day-badge-circleFilled {
          width: 32px;
          height: 32px;
          padding: 0;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.65rem;
          background: #e9ecef;
          color: #6c757d;
          border: none;
        }
        
        .day-badge-circleFilled.active {
          background: #0f4c5c;
          color: #ffffff;
        }
        
        /* Minimal style - text only */
        .day-badge-minimal {
          padding: 0.25rem 0.375rem;
          border-radius: 0;
          background: transparent;
          color: #adb5bd;
          font-size: 0.7rem;
          font-weight: 400;
        }
        
        .day-badge-minimal.active {
          background: transparent;
          color: #0f4c5c;
          font-weight: 700;
        }
        
        /* Underline style */
        .day-badge-underline {
          padding: 0.25rem 0.5rem;
          border-radius: 0;
          background: transparent;
          color: #adb5bd;
          font-size: 0.7rem;
          border-bottom: 2px solid transparent;
        }
        
        .day-badge-underline.active {
          background: transparent;
          color: #0f4c5c;
          font-weight: 600;
          border-bottom-color: #0f4c5c;
        }
        
        /* Dot style - shows only active day with dot indicator */
        .day-badges-dot {
          gap: 0.25rem;
        }
        
        .day-badge-dot {
          width: 8px;
          height: 8px;
          padding: 0;
          border-radius: 50%;
          background: #dee2e6;
          font-size: 0;
          overflow: hidden;
        }
        
        .day-badge-dot.active {
          width: auto;
          height: auto;
          padding: 0.25rem 0.5rem;
          border-radius: 12px;
          background: #0f4c5c;
          color: #ffffff;
          font-size: 0.7rem;
          font-weight: 600;
        }
        
        .group-info {
          min-width: 0;
          padding-left: 20px;
        }
        
        .group-name {
          font-size: 1.125rem;
          font-weight: 600;
          color: #212529;
          margin-bottom: 0.625rem;
        }
        
        .meta-row {
          display: flex;
          flex-direction: row;
          align-items: center;
        }
        
        .meta-info {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 1.5rem;
          align-items: center;
          width: 180px;
          flex-shrink: 0;
        }
        
        .meta-item {
          display: flex;
          align-items: center;
          gap: 0.375rem;
          font-size: 0.875rem;
          color: #6c757d;
        }
        
        .language-column {
          display: flex;
          align-items: center;
          padding-left: 50px;
        }
        
        .leader-section {
          min-width: 0;
          max-width: 220px;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
        }
        
        .leader-label {
          font-size: 0.875rem;
          color: #495057;
          word-wrap: break-word;
          overflow-wrap: break-word;
          hyphens: auto;
        }
        
        .member-count {
          font-size: 0.875rem;
          color: #6c757d;
        }
        
        .meta-members-inline {
          display: none;
        }
        
        .join-btn {
          padding: 0.875rem 2.5rem;
          background: linear-gradient(135deg, #0f4c5c 0%, #1a6b7f 100%);
          color: white;
          border: none;
          border-radius: 12px;
          font-size: 0.95rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          white-space: nowrap;
          box-shadow: 0 4px 12px rgba(15, 76, 92, 0.2);
        }
        
        .join-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(15, 76, 92, 0.3);
        }
        
        .join-btn.waitlist {
          background: white;
          color: #0f4c5c;
          border: 2px solid #0f4c5c;
          box-shadow: none;
        }
        
        .join-btn.waitlist:hover {
          background: #f8f9fa;
        }
        
        .show-more {
          text-align: center;
          margin: 3rem 0;
        }
        
        .show-more-count {
          font-size: 1.1rem;
          color: #212529;
          margin-bottom: 1.5rem;
          font-weight: 400;
        }
        
        .show-more-btn {
          background: #0f4c5c;
          color: white;
          font-weight: 600;
          font-size: 1.1rem;
          padding: 1.25rem 3rem;
          border: none;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 12px rgba(15, 76, 92, 0.2);
          width: 100%;
          max-width: 800px;
        }
        
        .show-more-btn:hover {
          background: #0d3f4d;
          box-shadow: 0 6px 16px rgba(15, 76, 92, 0.3);
          transform: translateY(-1px);
        }
        
        /* Join Modal */
        .join-modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
          animation: fadeIn 0.2s ease;
        }
        
        .join-modal {
          background: white;
          padding: 2.5rem;
          border-radius: 16px;
          max-width: 480px;
          width: 90%;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
          animation: slideUp 0.3s ease;
          text-align: center;
        }
        
        .join-modal-title {
          font-size: 1.75rem;
          font-weight: 600;
          color: #0f4c5c;
          margin-bottom: 1rem;
        }
        
        .join-modal-message {
          font-size: 1.05rem;
          color: #495057;
          line-height: 1.6;
          margin-bottom: 2rem;
        }
        
        .join-modal-actions {
          display: flex;
          gap: 1rem;
          justify-content: center;
        }
        
        .join-modal-btn {
          padding: 0.875rem 2rem;
          border-radius: 12px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          font-family: 'Roboto', sans-serif;
        }
        
        .join-modal-btn-primary {
          background: #0f4c5c;
          color: white;
          border: 2px solid #0f4c5c;
        }
        
        .join-modal-btn-primary:hover {
          background: #0d3f4d;
          border-color: #0d3f4d;
        }
        
        .join-modal-btn-secondary {
          background: white;
          color: #6c757d;
          border: 2px solid #e9ecef;
        }
        
        .join-modal-btn-secondary:hover {
          border-color: #adb5bd;
          color: #495057;
        }
        
        /* Login Screen */
        .login-screen-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(180deg, #d4e8ec 0%, #b8d4db 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1001;
          animation: fadeIn 0.3s ease;
        }
        
        .login-screen {
          width: 100%;
          max-width: 500px;
          padding: 2rem;
          position: relative;
        }
        
        .login-card {
          background: white;
          padding: 2.5rem;
          border-radius: 16px;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }
        
        .login-logo {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          margin-bottom: 2rem;
        }
        
        .login-logo-text {
          font-size: 1.25rem;
          font-weight: 600;
          color: #0f4c5c;
        }
        
        .login-subtitle {
          font-size: 0.9rem;
          color: #6c757d;
          margin-bottom: 1.5rem;
        }
        
        .login-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: #212529;
          margin-bottom: 1.5rem;
        }
        
        .login-form {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }
        
        .login-input {
          padding: 0.875rem 1rem;
          border: 1px solid #e9ecef;
          border-radius: 8px;
          font-size: 1rem;
          font-family: 'Roboto', sans-serif;
          transition: border-color 0.2s ease;
        }
        
        .login-input:focus {
          outline: none;
          border-color: #0f4c5c;
        }
        
        .login-input::placeholder {
          color: #adb5bd;
        }
        
        .forgot-password-link {
          font-size: 0.875rem;
          color: #0f4c5c;
          text-decoration: underline;
          text-align: left;
          margin-bottom: 0.5rem;
        }
        
        .login-submit-btn {
          background: #0f4c5c;
          color: white;
          padding: 0.875rem 1.5rem;
          border: none;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: background 0.2s ease;
          margin-top: 0.5rem;
          width: fit-content;
        }
        
        .login-submit-btn:hover {
          background: #0d3f4d;
        }
        
        .create-account-text {
          font-size: 0.9rem;
          color: #495057;
          margin-top: 1.5rem;
        }
        
        .create-account-link {
          color: #0f4c5c;
          font-weight: 600;
          text-decoration: underline;
        }
        
        .login-back-btn {
          position: absolute;
          top: 0;
          left: 2rem;
          background: transparent;
          border: none;
          color: #0f4c5c;
          font-size: 0.95rem;
          font-weight: 500;
          cursor: pointer;
          padding: 0.5rem;
        }
        
        .login-back-btn:hover {
          text-decoration: underline;
        }
        
        /* Confirmation Screen */
        .confirmation-screen-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: #f1f3f4;
          z-index: 1001;
          overflow-y: auto;
          animation: fadeIn 0.3s ease;
        }
        
        .confirmation-screen {
          min-height: 100vh;
        }
        
        .confirmation-header {
          background: white;
          padding: 1rem 2rem;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .confirmation-logo {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        .confirmation-logo-text {
          font-size: 1.1rem;
          font-weight: 600;
          color: #0f4c5c;
        }
        
        .confirmation-content {
          max-width: 800px;
          margin: 0 auto;
          padding: 3rem 2rem;
        }
        
        .confirmation-title {
          font-size: 1.75rem;
          font-weight: 400;
          color: #212529;
          margin-bottom: 2rem;
        }
        
        .confirmation-highlight {
          color: #0f4c5c;
          font-weight: 600;
        }
        
        .confirmation-card {
          background: white;
          border-radius: 16px;
          padding: 1.5rem;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          display: grid;
          grid-template-columns: auto 1fr auto auto;
          align-items: center;
          gap: 1.5rem;
          margin-bottom: 2rem;
        }
        
        .confirmation-card-general {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 1.25rem;
        }
        
        .confirmation-card-time {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
        }
        
        .confirmation-time {
          font-size: 1.25rem;
          font-weight: 600;
          color: #0f4c5c;
        }
        
        .confirmation-day-badges {
          display: flex;
          gap: 0.25rem;
        }
        
        .confirmation-day-badge {
          padding: 0.25rem 0.5rem;
          border-radius: 6px;
          font-size: 0.7rem;
          font-weight: 500;
          color: #6c757d;
          background: #f1f3f4;
        }
        
        .confirmation-day-badge.active {
          background: #d4eef2;
          color: #0f4c5c;
        }
        
        .confirmation-card-details {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
        }
        
        .confirmation-group-name {
          font-size: 1.1rem;
          font-weight: 600;
          color: #212529;
        }
        
        .confirmation-group-info {
          font-size: 0.9rem;
          color: #6c757d;
        }
        
        .confirmation-card-leader {
          text-align: right;
          font-size: 0.9rem;
          color: #495057;
        }
        
        .confirmation-card-leader p {
          margin-bottom: 0.25rem;
        }
        
        .remove-waitlist-btn {
          padding: 0.75rem 1.5rem;
          border: 2px solid #0f4c5c;
          background: white;
          color: #0f4c5c;
          border-radius: 24px;
          font-size: 0.95rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          white-space: nowrap;
        }
        
        .remove-waitlist-btn:hover {
          background: #f0f9fa;
        }
        
        .confirmation-timezone {
          display: flex;
          align-items: center;
        }
        
        .confirmation-meeting-times {
          display: flex;
          align-items: center;
          color: #495057;
          font-size: 0.95rem;
        }
        
        .confirmation-time-grid {
          width: 100%;
          margin: 0.5rem 0;
        }
        
        .time-grid-header {
          display: grid;
          grid-template-columns: 100px repeat(7, 1fr);
          gap: 0.5rem;
          margin-bottom: 0.5rem;
        }
        
        .time-grid-day {
          font-size: 0.75rem;
          font-weight: 600;
          color: #6c757d;
          text-align: center;
        }
        
        .time-grid-row {
          display: grid;
          grid-template-columns: 100px repeat(7, 1fr);
          gap: 0.5rem;
          margin-bottom: 0.5rem;
        }
        
        .time-grid-label {
          font-size: 0.75rem;
          color: #6c757d;
          display: flex;
          align-items: center;
        }
        
        .time-grid-cell {
          padding: 0.375rem 0.5rem;
          border: 1px solid #e9ecef;
          border-radius: 16px;
          font-size: 0.7rem;
          text-align: center;
          color: #6c757d;
        }
        
        .time-grid-cell.active {
          background: #d4eef2;
          border-color: #0f4c5c;
          color: #0f4c5c;
        }
        
        .confirmation-selected-times {
          padding: 1rem;
          background: #f8f9fa;
          border-radius: 8px;
          width: 100%;
        }
        
        .confirmation-preferences {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          color: #495057;
          font-size: 0.95rem;
        }
        
        .confirmation-note {
          font-size: 0.95rem;
          color: #6c757d;
          text-align: center;
          margin-bottom: 1.5rem;
        }
        
        .find-different-group-btn {
          display: block;
          margin: 0 auto;
          padding: 1rem 2rem;
          background: #0f4c5c;
          color: white;
          border: none;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: background 0.2s ease;
        }
        
        .find-different-group-btn:hover {
          background: #0d3f4d;
        }
        
        @media (max-width: 768px) {
          .confirmation-card {
            grid-template-columns: 1fr;
            gap: 1rem;
          }
          
          .confirmation-card-leader {
            text-align: left;
          }
          
          .remove-waitlist-btn {
            width: 100%;
          }
          
          .time-grid-header,
          .time-grid-row {
            grid-template-columns: 80px repeat(7, 1fr);
            gap: 0.25rem;
          }
          
          .time-grid-cell {
            padding: 0.25rem;
            font-size: 0.6rem;
          }
        }
        
        .footer {
          background: white;
          padding: 2rem 1.5rem;
          margin-top: 4rem;
          border-top: 1px solid #e9ecef;
        }
        
        .footer-content {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 1.5rem;
        }
        
        .newsletter {
          display: flex;
          gap: 0.75rem;
          align-items: center;
        }
        
        .newsletter-text {
          font-size: 0.9rem;
          color: #495057;
        }
        
        .newsletter-input {
          padding: 0.625rem 1rem;
          border: 2px solid #e9ecef;
          border-radius: 8px;
          font-size: 0.875rem;
          min-width: 220px;
        }
        
        .subscribe-btn {
          padding: 0.625rem 1.5rem;
          background: white;
          color: #0f4c5c;
          border: 2px solid #0f4c5c;
          border-radius: 8px;
          font-size: 0.875rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .subscribe-btn:hover {
          background: #0f4c5c;
          color: white;
        }
        
        .footer-info {
          display: flex;
          gap: 2rem;
          align-items: center;
          font-size: 0.875rem;
          color: #6c757d;
        }
        
        .language-links {
          display: flex;
          gap: 1rem;
        }
        
        .lang-link {
          color: #0f4c5c;
          text-decoration: none;
        }
        
        .lang-link:hover {
          text-decoration: underline;
        }
        
        @media (min-width: 769px) and (max-width: 1200px) {
          .search-section {
            padding: 1.5rem;
          }
          
          .search-row-top {
            flex-direction: column;
          }
          
          .search-input-wrapper {
            width: 100%;
            min-width: unset;
          }
          
          .gender-filters {
            width: 100%;
            justify-content: flex-start;
          }
          
          .select-wrapper {
            width: 100%;
            max-width: unset;
          }
        }
        
        @media (max-width: 768px) {
          .header-top {
            flex-direction: row;
            gap: 0;
            align-items: center;
            justify-content: space-between;
          }
          
          .header-links-desktop {
            display: none;
          }
          
          .hamburger-btn {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .header {
            padding: 1.25rem 1rem;
          }
          
          .hero-title {
            font-size: 1.75rem;
          }
          
          .hero-subtitle {
            font-size: 0.85rem;
          }
          
          /* Expedia-style: stacked full-width fields */
          .header {
            padding: 1.25rem 1rem 0;
          }
          
          .hero {
            max-width: none;
            margin: 0;
          }
          
          .current-study {
            margin-bottom: 1rem;
          }
          
          .search-section {
            padding: 3rem 1.875rem;
            border-radius: 0;
            box-shadow: none;
            max-width: none;
            margin: 0 -1rem;
            width: calc(100% + 2rem);
          }
          
          .search-row-top {
            flex-direction: column;
            gap: 0.75rem;
          }
          
          .search-mode-tabs {
            width: 100%;
            margin-bottom: 0.75rem;
          }
          
          .mode-tab {
            flex: 1;
          }
          
          /* Full-width stacked fields like Expedia */
          .search-input-wrapper {
            width: 100%;
            margin: 0;
          }
          
          .search-input {
            width: 100%;
            border: 2px solid #dee2e6;
            border-radius: 12px;
            padding: 1rem 1rem 1rem 2.75rem;
            font-size: 1rem;
          }
          
          .search-input::placeholder {
            color: #495057;
          }
          
          .gender-filters {
            width: 100%;
            margin: 0;
          }
          
          .gender-btn {
            flex: 1;
          }
          
          .select-wrapper {
            width: 100%;
            margin: 0;
          }
          
          .search-row-top.no-age-filter .search-input-wrapper {
            min-width: 0;
          }
          
          .search-row-top.no-age-filter .custom-dropdown-trigger {
            min-width: 0;
            max-width: none;
          }
          
          .custom-dropdown-trigger,
          .select {
            border: 2px solid #dee2e6;
            border-radius: 12px;
            padding: 1rem 2.5rem 1rem 2.75rem;
            font-size: 1rem;
          }
          
          .custom-dropdown-trigger.placeholder,
          .select.placeholder {
            color: #495057;
          }
          
          .search-btn {
            width: 100%;
            margin: 0 0 1rem 0;
            padding: 1rem;
            font-size: 1.05rem;
            border-radius: 50px;
          }
          
          .start-over-link {
            width: 100%;
            text-align: center;
            display: block;
            order: 0;
            margin-bottom: 0.5rem;
          }
          
          .timezone-footer {
            margin-top: 1rem;
            flex-direction: column;
            gap: 0.5rem;
          }
          
          .timezone-info {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0.5rem;
            order: 1;
          }
          
          .timezone-info span {
            display: block;
          }
          
          .time-grid-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
            max-width: 100vw;
            transform: none;
            border-radius: 0;
            border: none;
            max-height: none;
            display: flex;
            flex-direction: column;
            padding: 0;
            margin: 0;
            overflow: hidden;
          }
          
          .time-grid-close-mobile {
            display: flex;
            align-items: center;
            justify-content: center;
            position: static;
            z-index: 10;
            background: transparent;
            border-radius: 50%;
            width: 44px;
            height: 44px;
            flex-shrink: 0;
            margin-left: auto;
          }
          
          .time-grid-popup-header {
            flex-shrink: 0;
            padding: 0 0.5rem 0 1rem;
            background: white;
            border-bottom: 1px solid #e9ecef;
            position: relative;
            display: flex;
            align-items: center;
          }
          
          /* Mobile: Hotels.com style tabs */
          .popup-tabs-as-header {
            margin: 0;
            padding: 0;
            gap: 0;
            border-bottom: none;
            flex: 1;
          }
          
          .popup-tabs-as-header .popup-tab {
            font-size: 1rem;
            font-weight: 600;
            padding: 1rem 0;
            margin: 0;
            border-bottom: 3px solid transparent;
            color: #6c757d;
          }
          
          .popup-tabs-as-header .popup-tab.active {
            color: #0f4c5c;
            border-bottom-color: #0f4c5c;
          }
          
          .time-grid {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            overflow-x: hidden;
          }
          
          .time-grid-desktop {
            display: none;
          }
          
          .time-grid-mobile {
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 0;
          }
          
          /* Mobile: Flip to rows=days, columns=time periods */
          .time-grid-header {
            grid-template-columns: 50px repeat(4, 1fr);
            gap: 0.5rem;
          }
          
          .time-row {
            grid-template-columns: 50px repeat(4, 1fr);
            gap: 0.5rem;
            padding-bottom: 0.75rem;
            margin-bottom: 0.75rem;
            border-bottom: 1px solid #e9ecef;
          }
          
          .time-row:last-of-type {
            border-bottom: none;
            margin-bottom: 0;
          }
          
          .time-row > *:not(:first-child) {
            border-left: none;
            padding-left: 0;
          }
          
          .time-btn {
            padding: 0.5rem 0.125rem;
            font-size: 0.75rem;
            border-radius: 20px;
            white-space: nowrap;
            min-width: 0;
            border-width: 2px;
            border-style: solid;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            overflow: hidden;
          }
          
          .day-header {
            font-size: 0.75rem;
            padding: 0.5rem 0.25rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
          }
          
          .period-time-range {
            font-size: 0.65rem;
            color: #6c757d;
            font-weight: 400;
          }
          
          .time-label {
            padding-right: 0.25rem;
            font-weight: 600;
            color: #212529;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .time-label-main {
            font-size: 0.7rem;
            gap: 0;
          }
          
          .time-label-main svg {
            display: none;
          }
          
          .time-label-range {
            display: none;
          }
          
          .card-content {
            flex-direction: column;
            gap: 0.25rem;
            align-items: flex-start;
          }
          
          .popup-search-section {
            padding: 1.5rem;
          }
          
          .time-grid-footer {
            flex-shrink: 0;
            padding: 1rem 1.5rem;
            background: white;
            border-top: 1px solid #e9ecef;
          }
          
          .time-grid-done-btn {
            width: 100%;
            padding: 1rem;
            font-size: 1rem;
          }
          
          /* Consistent field widths on mobile - handled above */
          
          .results-header {
            flex-wrap: nowrap;
            gap: 1rem;
            align-items: center;
          }
          
          .results-count {
            white-space: nowrap;
            flex-shrink: 0;
          }
          
          .filter-search {
            margin-left: auto;
            flex-shrink: 0;
          }
          
          .sort-container {
            margin-left: auto;
          }
          
          .group-card {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            padding: 1rem 1.25rem;
            gap: 0.5rem;
          }
          
          .card-content {
            grid-template-columns: 1fr;
            gap: 0.25rem;
            display: flex;
            flex-direction: column;
          }
          
          .time-section {
            width: 100%;
            margin-bottom: 0.25rem;
          }
          
          .meeting-time {
            font-size: 1.25rem;
            margin-bottom: 0.375rem;
          }
          
          .meeting-time svg {
            width: 27px;
            height: 27px;
          }
          
          .meta-item svg {
            width: 11px;
            height: 11px;
          }
          
          .day-badges {
            width: 100%;
            justify-content: flex-start;
          }
          
          .day-badge {
            padding: 0.2rem 0.4rem;
            font-size: 0.65rem;
          }
          
          .day-badge-circle {
            width: 24px;
            height: 24px;
            font-size: 0.6rem;
          }
          
          .group-info {
            padding-left: 0;
          }
          
          .group-name {
            font-size: 1rem;
            margin-bottom: 0.25rem;
          }
          
          .meta-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.125rem;
          }
          
          .meta-info {
            width: auto;
          }
          
          .language-column {
            padding-left: 0;
          }
          
          .meta-item {
            font-size: 0.8rem;
          }
          
          .leader-section {
            width: 100%;
            max-width: none;
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;
            gap: 0.25rem;
            margin-top: 0.125rem;
          }
          
          .leader-label {
            font-size: 0.8rem;
          }
          
          .member-count {
            display: none;
          }
          
          .meta-members-inline {
            display: inline;
          }
          
          .join-btn {
            width: auto;
            padding: 0.65rem 1.625rem;
            font-size: 1.04rem;
            border-radius: 10px;
            box-shadow: none;
            align-self: flex-end;
            margin-top: -2.25rem;
          }
          
          .group-card:hover {
            transform: none;
          }
          
          .filter-input {
            width: 100%;
          }
          
          .sort-menu {
            right: auto;
            left: 0;
          }
          
          .no-groups-waitlist {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
            padding: 1.5rem;
          }
          
          .join-waitlist-btn {
            width: 100%;
          }
          
          .footer-content {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
          }
          
          .newsletter {
            flex-direction: column;
            width: 100%;
          }
          
          .newsletter-input {
            width: 100%;
            min-width: 0;
          }
          
          .subscribe-btn {
            width: 100%;
          }
          
          /* Sort Modal Mobile Styles */
          .sort-modal {
            width: 95%;
            max-width: none;
          }
          
          .sort-modal .join-modal {
            padding: 1.5rem 1.25rem;
            max-height: 85vh;
            overflow-y: auto;
          }
          
          .sort-modal-content {
            gap: 0.75rem;
          }
          
          .sort-section-label {
            margin-bottom: 0.25rem;
            font-size: 0.8rem;
          }
          
          .sort-modal-option {
            padding: 0.625rem 0.75rem;
          }
          
          .age-filter-section {
            padding-top: 0.75rem;
          }
        }
      `}</style>

      <header className="header">
        <div className="header-top">
          <div className="logo" onClick={() => setShowOptionsModal(true)}>
            <div className="logo-icon">B</div>
            BSF Online
          </div>
          <div className="header-links header-links-desktop">
            <button className="header-link">Find an Online Group</button>
            <button className="header-link">Your Account</button>
          </div>
          <button className="hamburger-btn" onClick={() => setShowHamburgerMenu(!showHamburgerMenu)}>
            {showHamburgerMenu ? (
              <X size={24} color="white" />
            ) : (
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
            )}
          </button>
        </div>
        
        {showHamburgerMenu && (
          <div className="hamburger-menu">
            <button className="hamburger-menu-item" onClick={() => setShowHamburgerMenu(false)}>
              <Search size={18} />
              Find an Online Group
            </button>
            <button className="hamburger-menu-item" onClick={() => setShowHamburgerMenu(false)}>
              <User size={18} />
              Your Account
            </button>
          </div>
        )}
        
        {/* Options Modal */}
        {showOptionsModal && (
          <div className="options-overlay" onClick={() => setShowOptionsModal(false)}>
            <div className="options-modal" onClick={(e) => e.stopPropagation()}>
              <div className="options-header">
                <h2 className="options-title">Prototype Options</h2>
                <button className="options-close" onClick={() => setShowOptionsModal(false)}>×</button>
              </div>
              
              <div className="options-section">
                <h3 className="options-section-title">Groups Per Page</h3>
                <div style={{padding: '0 1rem'}}>
                  <input 
                    type="number" 
                    min="1" 
                    max="50" 
                    value={groupsPerPage}
                    onChange={(e) => setGroupsPerPage(parseInt(e.target.value) || 10)}
                    style={{
                      width: '100%',
                      padding: '0.75rem',
                      fontSize: '1rem',
                      border: '2px solid #e9ecef',
                      borderRadius: '8px',
                      fontFamily: 'Roboto, sans-serif'
                    }}
                  />
                  <div style={{fontSize: '0.85rem', color: '#6c757d', marginTop: '0.5rem'}}>
                    Default: 10. Controls how many groups show before "Show More" button appears.
                  </div>
                </div>
              </div>
              
              <div className="options-section">
                <h3 className="options-section-title">Interface Options</h3>
                
                <div 
                  className={`option-item ${tabsInPopup ? 'selected' : ''}`}
                  onClick={() => setTabsInPopup(!tabsInPopup)}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Move Tabs to Popup</div>
                    <div className="option-description">Place "Choose Times" / "Search by Name" tabs inside the popup instead of main search card</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${showFilterField ? 'selected' : ''}`}
                  onClick={() => setShowFilterField(!showFilterField)}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Show Filter Field</div>
                    <div className="option-description">Display the live filter text input in search results</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${showGroupCounts ? 'selected' : ''}`}
                  onClick={() => setShowGroupCounts(!showGroupCounts)}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Show Group Counts in Section Titles</div>
                    <div className="option-description">Display the number of groups in "Available Groups" and "Full Groups" headings</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${showAgeFilter ? 'selected' : ''}`}
                  onClick={() => setShowAgeFilter(!showAgeFilter)}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Show Age Filter</div>
                    <div className="option-description">Display the age range filter in the search card</div>
                  </div>
                </div>
              </div>
              
              <div className="options-section">
                <h3 className="options-section-title">Day Badge Style</h3>
                
                <div 
                  className={`option-item ${dayBadgeStyle === 'rounded' ? 'selected' : ''}`}
                  onClick={() => setDayBadgeStyle('rounded')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Rounded</div>
                    <div className="option-description">Rounded rectangle badges with background color</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${dayBadgeStyle === 'circle' ? 'selected' : ''}`}
                  onClick={() => setDayBadgeStyle('circle')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Circle Outline</div>
                    <div className="option-description">Circular badges with border outline</div>
                  </div>
                </div>
                
                {dayBadgeStyle === 'circle' && (
                  <div style={{ marginLeft: '2rem', marginBottom: '0.75rem', padding: '0.75rem', background: '#f8f9fa', borderRadius: '8px' }}>
                    <div style={{ fontSize: '0.85rem', fontWeight: '500', color: '#495057', marginBottom: '0.5rem' }}>Circle Border Thickness</div>
                    <div style={{ display: 'flex', gap: '0.5rem' }}>
                      <button
                        onClick={() => setCircleBorderWidth('thin')}
                        style={{
                          flex: 1,
                          padding: '0.5rem',
                          border: circleBorderWidth === 'thin' ? '2px solid #0f4c5c' : '1px solid #dee2e6',
                          borderRadius: '6px',
                          background: circleBorderWidth === 'thin' ? '#f0f9fa' : 'white',
                          color: circleBorderWidth === 'thin' ? '#0f4c5c' : '#495057',
                          fontWeight: circleBorderWidth === 'thin' ? '600' : '400',
                          cursor: 'pointer',
                          fontSize: '0.8rem'
                        }}
                      >
                        Thin
                      </button>
                      <button
                        onClick={() => setCircleBorderWidth('medium')}
                        style={{
                          flex: 1,
                          padding: '0.5rem',
                          border: circleBorderWidth === 'medium' ? '2px solid #0f4c5c' : '1px solid #dee2e6',
                          borderRadius: '6px',
                          background: circleBorderWidth === 'medium' ? '#f0f9fa' : 'white',
                          color: circleBorderWidth === 'medium' ? '#0f4c5c' : '#495057',
                          fontWeight: circleBorderWidth === 'medium' ? '600' : '400',
                          cursor: 'pointer',
                          fontSize: '0.8rem'
                        }}
                      >
                        Medium
                      </button>
                      <button
                        onClick={() => setCircleBorderWidth('thick')}
                        style={{
                          flex: 1,
                          padding: '0.5rem',
                          border: circleBorderWidth === 'thick' ? '2px solid #0f4c5c' : '1px solid #dee2e6',
                          borderRadius: '6px',
                          background: circleBorderWidth === 'thick' ? '#f0f9fa' : 'white',
                          color: circleBorderWidth === 'thick' ? '#0f4c5c' : '#495057',
                          fontWeight: circleBorderWidth === 'thick' ? '600' : '400',
                          cursor: 'pointer',
                          fontSize: '0.8rem'
                        }}
                      >
                        Thick
                      </button>
                    </div>
                  </div>
                )}
                
                <div 
                  className={`option-item ${dayBadgeStyle === 'circleFilled' ? 'selected' : ''}`}
                  onClick={() => setDayBadgeStyle('circleFilled')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Circle Filled (Default)</div>
                    <div className="option-description">Circular badges with grey fill for inactive days</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${dayBadgeStyle === 'minimal' ? 'selected' : ''}`}
                  onClick={() => setDayBadgeStyle('minimal')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Minimal</div>
                    <div className="option-description">Text only with bold for active day</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${dayBadgeStyle === 'underline' ? 'selected' : ''}`}
                  onClick={() => setDayBadgeStyle('underline')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Underline</div>
                    <div className="option-description">Text with underline for active day</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${dayBadgeStyle === 'dot' ? 'selected' : ''}`}
                  onClick={() => setDayBadgeStyle('dot')}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Dot Indicator</div>
                    <div className="option-description">Small dots for inactive days, pill for active day</div>
                  </div>
                </div>
              </div>
              
              <div className="options-section">
                <h3 className="options-section-title">Gender Selector Style</h3>
                
                <div 
                  className={`option-item ${genderSelectorStyle === 'filled' ? 'selected' : ''}`}
                  onClick={() => setGenderSelectorStyle('filled')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Filled</div>
                    <div className="option-description">Solid background on selected option</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${genderSelectorStyle === 'outline' ? 'selected' : ''}`}
                  onClick={() => setGenderSelectorStyle('outline')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Outline</div>
                    <div className="option-description">Bordered segments, selected fills with color</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${genderSelectorStyle === 'segmented' ? 'selected' : ''}`}
                  onClick={() => setGenderSelectorStyle('segmented')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Segmented</div>
                    <div className="option-description">iOS-style segmented control with sliding selection</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${genderSelectorStyle === 'pill' ? 'selected' : ''}`}
                  onClick={() => setGenderSelectorStyle('pill')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Pill</div>
                    <div className="option-description">Separate rounded pill buttons</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${genderSelectorStyle === 'chips' ? 'selected' : ''}`}
                  onClick={() => setGenderSelectorStyle('chips')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Chips</div>
                    <div className="option-description">Chip-style buttons with subtle background</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${genderSelectorStyle === 'underline' ? 'selected' : ''}`}
                  onClick={() => setGenderSelectorStyle('underline')}
                  style={{marginBottom: '0.75rem'}}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Underline</div>
                    <div className="option-description">Tab-style with underline indicator</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${genderSelectorStyle === 'minimal' ? 'selected' : ''}`}
                  onClick={() => setGenderSelectorStyle('minimal')}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Minimal</div>
                    <div className="option-description">Text only with color change</div>
                  </div>
                </div>
              </div>
              
              <div className="options-section">
                <h3 className="options-section-title">Waitlist Options</h3>
                
                <div style={{ marginBottom: '1rem' }}>
                  <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', color: '#495057', fontWeight: '500' }}>
                    Maximum Discussion Group Size
                  </label>
                  <input
                    type="number"
                    min="1"
                    max="50"
                    value={maxGroupSize}
                    onChange={(e) => setMaxGroupSize(parseInt(e.target.value) || 20)}
                    style={{
                      width: '100%',
                      padding: '0.75rem',
                      border: '2px solid #e9ecef',
                      borderRadius: '8px',
                      fontSize: '1rem',
                      fontFamily: 'Roboto, sans-serif',
                      color: '#212529',
                      backgroundColor: '#ffffff',
                      boxSizing: 'border-box',
                      WebkitAppearance: 'none',
                      MozAppearance: 'textfield'
                    }}
                  />
                  <div style={{ fontSize: '0.8rem', color: '#6c757d', marginTop: '0.25rem' }}>
                    Groups with more than this number of members will show as full with a waitlist option
                  </div>
                </div>
                
                <div style={{ 
                  padding: '1rem', 
                  backgroundColor: '#f0f9fa', 
                  borderRadius: '8px',
                  border: '1px solid #0f4c5c',
                  color: '#0f4c5c',
                  fontWeight: '500',
                  textAlign: 'center'
                }}>
                  {(() => {
                    const fullCount = allGroups.filter(g => g.members >= maxGroupSize).length;
                    return `${fullCount} of ${allGroups.length} Groups will have a Waitlist (max size: ${maxGroupSize})`;
                  })()}
                </div>
              </div>
              
              <div className="options-section">
                <h3 className="options-section-title">Tab Design Style</h3>
                
                <div 
                  className={`option-item ${tabDesign === 'underline' ? 'selected' : ''}`}
                  onClick={() => setTabDesign('underline')}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Underline Tabs</div>
                    <div className="option-description">Clean minimal design with underline indicator for active tab</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${tabDesign === 'separator' ? 'selected' : ''}`}
                  onClick={() => setTabDesign('separator')}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Text with Separator</div>
                    <div className="option-description">Absolute minimal with "|" separator between options</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${tabDesign === 'pills' ? 'selected' : ''}`}
                  onClick={() => setTabDesign('pills')}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Pill Buttons</div>
                    <div className="option-description">Outlined pills that fill with color when active</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${tabDesign === 'compact' ? 'selected' : ''}`}
                  onClick={() => setTabDesign('compact')}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Compact Segmented</div>
                    <div className="option-description">Connected buttons with grey background container</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${tabDesign === 'radio' ? 'selected' : ''}`}
                  onClick={() => setTabDesign('radio')}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Radio Button Style</div>
                    <div className="option-description">Radio circles with text labels</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${tabDesign === 'attached' ? 'selected' : ''}`}
                  onClick={() => setTabDesign('attached')}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Attached to Card</div>
                    <div className="option-description">Tabs sit at the top edge of the search card</div>
                  </div>
                </div>
                
                <div 
                  className={`option-item ${tabDesign === 'minimal' ? 'selected' : ''}`}
                  onClick={() => setTabDesign('minimal')}
                >
                  <div className="option-radio"></div>
                  <div className="option-label">
                    <div className="option-name">Minimal Spacing</div>
                    <div className="option-description">Reduced vertical and horizontal spacing for compact look</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
        
        <div className="hero">
          <h1 className="hero-title">In-Depth Bible Study. Online. Worldwide.</h1>
          <div className="current-study">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
            </svg>
            Our Current Study: <strong>Exile & Return</strong>
          </div>
          
          <div className={`search-section ${tabDesign === 'attached' ? 'has-attached-tabs' : ''}`}>
            {!tabsInPopup && tabDesign === 'attached' && (
              <div className={`search-mode-tabs ${tabDesign}`}>
                <button 
                  className={`mode-tab ${searchMode === 'byTime' ? 'active' : ''}`}
                  onClick={() => setSearchMode('byTime')}
                >
                  Find by Time
                </button>
                <button 
                  className={`mode-tab ${searchMode === 'byName' ? 'active' : ''}`}
                  onClick={() => setSearchMode('byName')}
                >
                  Find by Name
                </button>
              </div>
            )}
            
            {!tabsInPopup && tabDesign !== 'attached' && (
              <div className={`search-mode-tabs ${tabDesign}`}>
                {tabDesign === 'radio' ? (
                  <>
                    <button 
                      className={`mode-tab ${searchMode === 'byTime' ? 'active' : ''}`}
                      onClick={() => setSearchMode('byTime')}
                    >
                      <span className="radio-circle"></span>
                      <span>Find by Time</span>
                    </button>
                    <button 
                      className={`mode-tab ${searchMode === 'byName' ? 'active' : ''}`}
                      onClick={() => setSearchMode('byName')}
                    >
                      <span className="radio-circle"></span>
                      <span>Find by Name</span>
                    </button>
                  </>
                ) : (
                  <>
                    <button 
                      className={`mode-tab ${searchMode === 'byTime' ? 'active' : ''}`}
                      onClick={() => setSearchMode('byTime')}
                    >
                      Find by Time
                    </button>
                    {(tabDesign === 'separator' || tabDesign === 'minimal') && (
                      <span className="mode-separator">|</span>
                    )}
                    <button 
                      className={`mode-tab ${searchMode === 'byName' ? 'active' : ''}`}
                      onClick={() => setSearchMode('byName')}
                    >
                      Find by Name
                    </button>
                  </>
                )}
              </div>
            )}
            
            <div className={`search-row-top ${!showAgeFilter ? 'no-age-filter' : ''}`}>
              <div className="search-input-wrapper" ref={timeGridRef}>
                {searchMode === 'byTime' ? (
                  <>
                    <Calendar className="input-icon" size={18} />
                    <input 
                      type="text" 
                      className="search-input" 
                      placeholder={tabsInPopup ? "Choose times or search by name" : "Choose Days & Times"}
                      value={getSelectedTimesText()}
                      onClick={() => {
                        setShowTimeGrid(!showTimeGrid);
                        setShowLanguageDropdown(false);
                      }}
                      readOnly
                    />
                  </>
                ) : (
                  <>
                    <Search className="input-icon" size={18} />
                    <input 
                      type="text" 
                      className="search-input" 
                      placeholder={tabsInPopup ? "Search by Name" : "Search by group name or leader name"}
                      value={nameSearch}
                      onChange={(e) => setNameSearch(e.target.value)}
                      onClick={() => {
                        if (tabsInPopup) {
                          setShowTimeGrid(true);
                          setShowLanguageDropdown(false);
                        }
                      }}
                      readOnly={tabsInPopup}
                    />
                  </>
                )}
                
                {showTimeGrid && (
                  <div className="time-grid-container">
                    {tabsInPopup ? (
                      <div className="time-grid-popup-header">
                        <div className="popup-tabs popup-tabs-as-header">
                          <button
                            className={`popup-tab ${searchMode === 'byTime' ? 'active' : ''}`}
                            onClick={(e) => {
                              e.stopPropagation();
                              setSearchMode('byTime');
                            }}
                          >
                            Choose Times
                          </button>
                          <button
                            className={`popup-tab ${searchMode === 'byName' ? 'active' : ''}`}
                            onClick={(e) => {
                              e.stopPropagation();
                              setSearchMode('byName');
                            }}
                          >
                            Search by Name
                          </button>
                        </div>
                        <button 
                          className="time-grid-close-mobile"
                          onClick={() => setShowTimeGrid(false)}
                        >
                          ×
                        </button>
                      </div>
                    ) : (
                      <div className="time-grid-popup-header">
                        <h2 className="time-grid-title">Choose Times</h2>
                        <button 
                          className="time-grid-close-mobile"
                          onClick={() => setShowTimeGrid(false)}
                        >
                          ×
                        </button>
                      </div>
                    )}
                    
                    {(!tabsInPopup || searchMode === 'byTime') && (
                      <>
                    {/* Desktop Grid: Rows = Time Periods, Columns = Days */}
                    <div className="time-grid time-grid-desktop">
                      <div className="time-grid-header">
                        <div className="time-label-header"></div>
                        {daysOfWeek.map(day => (
                          <div 
                            key={day} 
                            className="day-header clickable-label" 
                            onClick={() => toggleAllDaypartsForDay(day)}
                            title={`Select all ${day}`}
                          >
                            {day}
                          </div>
                        ))}
                      </div>
                      
                      {timePeriods.map(period => (
                        <div key={period.label} className="time-row">
                          <div className="time-label">
                            <span 
                              className="time-label-main clickable-label"
                              onClick={() => toggleAllDaysForDaypart(period.label)}
                              title={`Select all ${period.label}`}
                            >
                              {getDaypartIcon(period.label, 18)}
                              {period.label}
                            </span>
                            <span className="time-label-range">{period.time}</span>
                          </div>
                          {daysOfWeek.map(day => (
                            <button
                              key={`${day}-${period.label}`}
                              className={`time-btn ${selectedDayTimes.includes(`${day}-${period.label}`) ? 'selected' : ''}`}
                              onClick={() => toggleDayTime(day, period.label)}
                            >
                              {period.label}
                            </button>
                          ))}
                        </div>
                      ))}
                    </div>
                    
                    {/* Mobile Grid: Rows = Days, Columns = Time Periods */}
                    <div className="time-grid time-grid-mobile">
                      <div className="time-grid-header">
                        <div className="time-label-header"></div>
                        {timePeriods.map(period => (
                          <div 
                            key={period.label} 
                            className="day-header clickable-label"
                            onClick={() => toggleAllDaysForDaypart(period.label)}
                            title={`Select all ${period.label}`}
                          >
                            {getDaypartIcon(period.label, 16)}
                            <span>{period.label}</span>
                            <span className="period-time-range">{period.time}</span>
                          </div>
                        ))}
                      </div>
                      
                      {daysOfWeek.map(day => (
                        <div key={day} className="time-row">
                          <div className="time-label">
                            <span 
                              className="time-label-main clickable-label"
                              onClick={() => toggleAllDaypartsForDay(day)}
                              title={`Select all ${day}`}
                            >
                              {day}
                            </span>
                          </div>
                          {timePeriods.map(period => (
                            <button
                              key={`${day}-${period.label}`}
                              className={`time-btn ${selectedDayTimes.includes(`${day}-${period.label}`) ? 'selected' : ''}`}
                              onClick={() => toggleDayTime(day, period.label)}
                            >
                              {period.label}
                            </button>
                          ))}
                        </div>
                      ))}
                    </div>
                    </>
                    )}
                    
                    {tabsInPopup && searchMode === 'byName' && (
                      <div className="popup-search-section">
                        <input 
                          type="text"
                          className="popup-search-input"
                          placeholder="Enter leader or group name..."
                          value={nameSearch}
                          onChange={(e) => setNameSearch(e.target.value)}
                          onKeyDown={(e) => {
                            if (e.key === 'Enter') {
                              setShowTimeGrid(false);
                              handleSearch();
                            }
                          }}
                          autoFocus
                        />
                        <p style={{
                          fontSize: '0.9rem',
                          color: '#6c757d',
                          marginTop: '0.5rem',
                          marginBottom: 0
                        }}>
                          Search for groups by leader name or group name
                        </p>
                      </div>
                    )}
                    
                    <div className="time-grid-footer">
                      <button 
                        className="time-grid-done-btn"
                        onClick={() => {
                          setShowTimeGrid(false);
                          if (tabsInPopup && searchMode === 'byName') {
                            handleSearch();
                          }
                        }}
                      >
                        {tabsInPopup && searchMode === 'byName' ? 'Search' : 'Done'}
                      </button>
                      {(!tabsInPopup || searchMode === 'byTime') && (
                        <a className="clear-link" onClick={clearSelections}>
                          Clear Times
                        </a>
                      )}
                    </div>
                  </div>
                )}
              </div>
              
              <div className={`gender-filters style-${genderSelectorStyle}`}>
                {['Female', 'Male', 'All'].map(gender => (
                  <button 
                    key={gender}
                    className={`gender-btn ${genderFilter === gender ? 'active' : ''}`}
                    onClick={() => setGenderFilter(gender)}
                  >
                    {gender}
                  </button>
                ))}
              </div>
              
              <div className="select-wrapper custom-dropdown-wrapper" ref={languageDropdownRef}>
                <Globe className="select-icon" size={18} />
                <div className="custom-dropdown">
                  <div 
                    className={`custom-dropdown-trigger ${languageFilter === '' ? 'placeholder' : ''}`}
                    onClick={() => {
                      if (isMobile) {
                        setShowLanguageFullscreen(true);
                        setShowTimeGrid(false);
                        setLanguageSearchTerm('');
                      } else {
                        setShowLanguageDropdown(!showLanguageDropdown);
                        if (!showLanguageDropdown) {
                          setShowTimeGrid(false);
                        }
                      }
                    }}
                  >
                    <span className="custom-dropdown-trigger-text">{languageFilter || 'Language'}</span>
                    <ChevronDown className="chevron-icon" size={18} />
                  </div>
                  {!isMobile && showLanguageDropdown && (
                    <div className="custom-dropdown-menu">
                      <input
                        ref={languageSearchInputRef}
                        type="text"
                        className="language-search-input"
                        placeholder="Search for language..."
                        value={languageSearchTerm}
                        onChange={(e) => {
                          const value = e.target.value;
                          setLanguageSearchTerm(value);
                          
                          // Auto-select if exact match or only one result
                          if (value.trim()) {
                            const matches = uniqueLanguages.filter(lang => 
                              lang.toLowerCase().includes(value.toLowerCase())
                            );
                            const exactMatch = uniqueLanguages.find(lang => 
                              lang.toLowerCase() === value.toLowerCase()
                            );
                            
                            if (exactMatch) {
                              setLanguageFilter(exactMatch);
                            } else if (matches.length === 1) {
                              setLanguageFilter(matches[0]);
                            }
                          }
                        }}
                        onKeyDown={(e) => {
                          if (e.key === 'Enter' && filteredLanguages.length > 0) {
                            setLanguageFilter(filteredLanguages[0]);
                            setShowLanguageDropdown(false);
                            setLanguageSearchTerm('');
                          } else if (e.key === 'Escape') {
                            setShowLanguageDropdown(false);
                            setLanguageSearchTerm('');
                          }
                        }}
                        onClick={(e) => e.stopPropagation()}
                      />
                      <div className="custom-dropdown-options">
                        <div 
                          className={`custom-dropdown-option ${languageFilter === '' ? 'selected' : ''}`}
                          onClick={() => {
                            setLanguageFilter('');
                            setShowLanguageDropdown(false);
                            setLanguageSearchTerm('');
                          }}
                        >
                          All
                        </div>
                        {filteredLanguages.map((lang, index) => {
                          // Highlight matching text
                          const searchTerm = languageSearchTerm.toLowerCase();
                          const langLower = lang.toLowerCase();
                          const matchIndex = searchTerm ? langLower.indexOf(searchTerm) : -1;
                          const isFirstMatch = index === 0 && languageSearchTerm.trim();
                          
                          let displayContent;
                          if (matchIndex >= 0 && searchTerm) {
                            const before = lang.slice(0, matchIndex);
                            const match = lang.slice(matchIndex, matchIndex + searchTerm.length);
                            const after = lang.slice(matchIndex + searchTerm.length);
                            displayContent = <>{before}<span className="highlight">{match}</span>{after}</>;
                          } else {
                            displayContent = lang;
                          }
                          
                          return (
                            <div 
                              key={lang}
                              className={`custom-dropdown-option ${languageFilter === lang ? 'selected' : ''} ${isFirstMatch && languageFilter !== lang ? 'highlighted' : ''}`}
                              onClick={() => {
                                setLanguageFilter(lang);
                                setShowLanguageDropdown(false);
                                setLanguageSearchTerm('');
                              }}
                            >
                              {displayContent}
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  )}
                </div>
              </div>
              
              {showAgeFilter && (
                <div className="select-wrapper">
                  <Users className="select-icon" size={18} />
                  <select 
                    className={`select ${ageFilter === '' ? 'placeholder' : ''}`}
                    value={ageFilter}
                    onChange={(e) => setAgeFilter(e.target.value)}
                  >
                    <option value="" disabled>Age Range</option>
                    {uniqueAgeGroups.map(age => (
                      <option key={age} value={age}>{age}</option>
                    ))}
                    <option>All</option>
                  </select>
                  <ChevronDown className="chevron-icon" size={18} />
                </div>
              )}
              
              <button 
                className={`search-btn ${hasFiltersChanged() ? 'changed' : ''}`}
                onClick={handleSearch}
                disabled={hasSearched && !hasFiltersChanged() && !isLoading}
              >
                {isLoading ? (
                  <>
                    <div className="spinner"></div>
                    Searching...
                  </>
                ) : (
                  hasSearched && !hasFiltersChanged() ? 'Search' : hasFiltersChanged() ? 'Update Search' : 'Search'
                )}
              </button>
            </div>
            
            <div className="timezone-footer">
              <div className="timezone-info">
                <MapPin size={16} />
                <span>{getTimezoneInfo(timeZone).display}</span>
                <a 
                  href="#" 
                  className="change-link" 
                  onClick={(e) => {
                    e.preventDefault();
                    setPendingTimeZone(timeZone); // Initialize pending with current
                    setShowTimezoneModal(true);
                  }}
                >
                  Change time zone
                </a>
                <span style={{color: '#adb5bd', marginLeft: '0.25rem'}}>
                  *All displayed meeting times are converted to the selected time zone.
                </span>
              </div>
              
              {hasSearched && (
                <a 
                  className="start-over-link" 
                  onClick={handleStartOver}
                  style={{ cursor: 'pointer' }}
                >
                  Start Over
                </a>
              )}
            </div>
          </div>
        </div>
      </header>

      <main className="main-content" ref={resultsRef}>
        {hasSearched && !isLoading && (
          <div className="results-header">
            <div className="results-count">
              Found <span>{filteredGroups.length}</span> groups
            </div>
            <div className="filter-search">
            {showFilterField && (
              <input 
                type="text" 
                className="filter-input" 
                placeholder="Filter by day, time, group name or leader"
                value={searchTerm}
                onChange={(e) => {
                  setSearchTerm(e.target.value);
                  if (hasSearched) {
                    setActiveSearchTerm(e.target.value);
                  }
                }}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    handleSearch();
                  }
                }}
              />
            )}
            <button className="sort-btn" onClick={() => setShowSortModal(true)}>
              <span>Sort / Filter</span>
              <ChevronDown size={16} />
            </button>
          </div>
        </div>
        )}

        {!hasSearched ? (
          <div className="empty-state">
            <div className="empty-state-icon">🔍</div>
            <h3>Ready to Find Your Group?</h3>
            <p>Select your preferred days, times, and other search criteria above, then click the Search button to discover groups that match your schedule.</p>
          </div>
        ) : isLoading ? (
          <div className="empty-state">
            <div className="spinner" style={{ margin: '0 auto 1rem', width: '48px', height: '48px', borderWidth: '4px' }}></div>
            <h3>Searching for groups...</h3>
          </div>
        ) : (
          <>
            {(() => {
              const totalGroups = availableGroups.length + fullGroups.length;
              
              // Calculate how many of each type to show based on displayCount
              const availableToShow = Math.min(availableGroups.length, displayCount);
              const remainingSlots = displayCount - availableToShow;
              const fullToShow = Math.min(fullGroups.length, remainingSlots);
              
              const visibleAvailable = availableGroups.slice(0, availableToShow);
              const visibleFull = fullGroups.slice(0, fullToShow);
              const totalVisible = availableToShow + fullToShow;
              const hasMore = totalVisible < totalGroups;
              
              return (
                <>
                  {/* Available Groups Section */}
                  {visibleAvailable.length > 0 && (
                    <section>
                      <h2 className="section-title">
                        Available Groups{showGroupCounts ? ` (${availableGroups.length})` : ''}
                      </h2>
                      <div className="groups-grid">
                        {visibleAvailable.map(group => (
                          <GroupCard key={group.id} group={group} />
                        ))}
                      </div>
                    </section>
                  )}
                  
                  {/* Full Groups Section */}
                  {visibleFull.length > 0 && (
                    <section style={{ marginTop: visibleAvailable.length > 0 ? '2rem' : '0' }}>
                      <h2 className="section-title full-groups-title">
                        Full Groups{showGroupCounts ? ` (${fullGroups.length})` : ''}
                      </h2>
                      <div className="groups-grid">
                        {visibleFull.map(group => (
                          <GroupCard key={group.id} group={group} />
                        ))}
                      </div>
                    </section>
                  )}
                  
                  {/* Show More Button */}
                  {hasMore && (
                    <div className="show-more">
                      <div className="show-more-count">
                        Showing {totalVisible} of {totalGroups} groups.
                      </div>
                      <button 
                        className="show-more-btn"
                        onClick={() => setDisplayCount(prev => Math.min(prev + groupsPerPage, totalGroups))}
                      >
                        Show More
                      </button>
                    </div>
                  )}
                  
                  {totalGroups === 0 && (
                    <div className="no-groups-waitlist">
                      {activeSearchMode === 'byName' ? (
                        <>
                          <h3 style={{ fontSize: '1.25rem', fontWeight: '600', color: '#212529', marginBottom: '0.75rem' }}>
                            No groups match your search.
                          </h3>
                          {(activeGenderFilter !== 'All' || (activeLanguageFilter && activeLanguageFilter !== 'All')) ? (
                            <>
                              <p className="no-groups-message" style={{ fontSize: '0.9rem', color: '#6c757d', marginBottom: '0.5rem' }}>
                                No groups found matching "<strong>{activeNameSearch}</strong>" with your current filters:
                              </p>
                              <p style={{ fontSize: '0.9rem', color: '#495057', fontWeight: '500', marginBottom: '1rem' }}>
                                {activeGenderFilter !== 'All' && <span>{activeGenderFilter}</span>}
                                {activeGenderFilter !== 'All' && activeLanguageFilter && activeLanguageFilter !== 'All' && ' • '}
                                {activeLanguageFilter && activeLanguageFilter !== 'All' && <span>{activeLanguageFilter}</span>}
                              </p>
                              <p className="no-groups-message" style={{ fontSize: '0.9rem', color: '#6c757d' }}>
                                Try a different search term or adjust your filters.
                              </p>
                            </>
                          ) : (
                            <p className="no-groups-message" style={{ fontSize: '0.9rem', color: '#6c757d' }}>
                              No groups found matching "<strong>{activeNameSearch}</strong>". Try a different search term.
                            </p>
                          )}
                        </>
                      ) : (
                        <>
                          <h3 style={{ fontSize: '1.25rem', fontWeight: '600', color: '#212529', marginBottom: '1.25rem' }}>
                            No groups match your search.
                          </h3>
                          
                          {groupsMatchingGenderLanguage.length > 0 ? (
                            <>
                              {/* There ARE other times available - show "other times" box and 1 waitlist option */}
                              <div style={{ 
                                backgroundColor: '#d4eef2', 
                                border: '1px solid #0f4c5c', 
                                borderRadius: '12px', 
                                padding: '1.25rem', 
                                marginBottom: '1.5rem',
                                width: '100%'
                              }}>
                                <p style={{ fontWeight: '500', color: '#0f4c5c', marginBottom: '0.75rem', fontSize: '1rem' }}>
                                  {groupsMatchingGenderLanguage.length} {activeGenderFilter !== 'All' ? activeGenderFilter.toLowerCase() : ''} group{groupsMatchingGenderLanguage.length !== 1 ? 's' : ''} available
                                  {activeLanguageFilter && activeLanguageFilter !== 'All' ? ` in ${activeLanguageFilter}` : ''} at other times
                                </p>
                                <button 
                                  onClick={showAllTimesForGenderLanguage}
                                  style={{
                                    padding: '0.75rem 1.5rem',
                                    background: '#0f4c5c',
                                    color: 'white',
                                    border: 'none',
                                    borderRadius: '8px',
                                    fontSize: '0.95rem',
                                    fontWeight: '500',
                                    cursor: 'pointer'
                                  }}
                                >
                                  Show Groups at All Times
                                </button>
                              </div>
                              
                              {/* Single waitlist option for specific times */}
                              <div style={{ width: '100%', marginTop: '0.5rem' }}>
                                <p style={{ fontSize: '0.95rem', color: '#495057', marginBottom: '1rem', fontWeight: '500' }}>
                                  Or, join a waitlist:
                                </p>
                                <div style={{
                                  background: '#f8f9fa',
                                  borderRadius: '10px',
                                  padding: '1rem 1.25rem',
                                  marginBottom: '0.75rem'
                                }}>
                                  <p style={{ fontSize: '0.95rem', color: '#212529', lineHeight: '1.5' }}>
                                    Join a waitlist for a <strong>{activeGenderFilter !== 'All' ? activeGenderFilter.toLowerCase() : ''}</strong> group
                                    {activeLanguageFilter && activeLanguageFilter !== 'All' ? <> in <strong>{activeLanguageFilter}</strong></> : ''}
                                    {activeSelectedDayTimes.length > 0 ? <>, on <strong>{getActiveTimesDescription()}</strong></> : ''}
                                  </p>
                                </div>
                                <button 
                                  onClick={() => { setSelectedGroupForJoin(null); setJoinModalType('waitlist'); setShowJoinModal(true); }}
                                  style={{
                                    padding: '0.75rem 2rem',
                                    background: '#0f4c5c',
                                    color: 'white',
                                    border: 'none',
                                    borderRadius: '8px',
                                    fontSize: '0.95rem',
                                    fontWeight: '600',
                                    cursor: 'pointer'
                                  }}
                                >
                                  Join Waitlist
                                </button>
                              </div>
                            </>
                          ) : (
                            <>
                              {/* NO other times available - show 2 waitlist options */}
                              <p style={{ fontSize: '0.95rem', color: '#495057', marginBottom: '1.25rem', fontWeight: '500' }}>
                                Here are your options:
                              </p>
                              
                              <div style={{ 
                                width: '100%',
                                display: 'flex',
                                flexDirection: 'column',
                                gap: '1.25rem'
                              }}>
                                {/* Option 1: Waitlist for gender and language (any time) */}
                                <div style={{
                                  background: '#f8f9fa',
                                  borderRadius: '10px',
                                  padding: '1.25rem'
                                }}>
                                  <p style={{ fontSize: '0.9rem', color: '#6c757d', marginBottom: '0.5rem', fontWeight: '500' }}>
                                    Option 1
                                  </p>
                                  <p style={{ fontSize: '0.95rem', color: '#212529', lineHeight: '1.5', marginBottom: '1rem' }}>
                                    Join a waitlist for a <strong>{activeGenderFilter !== 'All' ? activeGenderFilter.toLowerCase() : ''}</strong> group
                                    {activeLanguageFilter && activeLanguageFilter !== 'All' ? <> in <strong>{activeLanguageFilter}</strong></> : ''}, at <strong>any time</strong>
                                  </p>
                                  <button 
                                    onClick={() => { setSelectedGroupForJoin(null); setJoinModalType('waitlist-anytime'); setShowJoinModal(true); }}
                                    style={{
                                      padding: '0.75rem 2rem',
                                      background: '#0f4c5c',
                                      color: 'white',
                                      border: 'none',
                                      borderRadius: '8px',
                                      fontSize: '0.95rem',
                                      fontWeight: '600',
                                      cursor: 'pointer'
                                    }}
                                  >
                                    Join Waitlist
                                  </button>
                                </div>
                                
                                {/* Option 2: Waitlist for gender, language and specific time */}
                                <div style={{
                                  background: '#f8f9fa',
                                  borderRadius: '10px',
                                  padding: '1.25rem'
                                }}>
                                  <p style={{ fontSize: '0.9rem', color: '#6c757d', marginBottom: '0.5rem', fontWeight: '500' }}>
                                    Option 2
                                  </p>
                                  <p style={{ fontSize: '0.95rem', color: '#212529', lineHeight: '1.5', marginBottom: '1rem' }}>
                                    Join a waitlist for a <strong>{activeGenderFilter !== 'All' ? activeGenderFilter.toLowerCase() : ''}</strong> group
                                    {activeLanguageFilter && activeLanguageFilter !== 'All' ? <> in <strong>{activeLanguageFilter}</strong></> : ''}
                                    {activeSelectedDayTimes.length > 0 ? <>, on <strong>{getActiveTimesDescription()}</strong></> : ''}
                                  </p>
                                  <button 
                                    onClick={() => { setSelectedGroupForJoin(null); setJoinModalType('waitlist'); setShowJoinModal(true); }}
                                    style={{
                                      padding: '0.75rem 2rem',
                                      background: '#0f4c5c',
                                      color: 'white',
                                      border: 'none',
                                      borderRadius: '8px',
                                      fontSize: '0.95rem',
                                      fontWeight: '600',
                                      cursor: 'pointer'
                                    }}
                                  >
                                    Join Waitlist
                                  </button>
                                </div>
                              </div>
                            </>
                          )}
                        </>
                      )}
                    </div>
                  )}
                </>
              );
            })()}
          </>
        )}
        
        {/* Join Flow Modal */}
        {showJoinModal && (
          <>
            {joinFlowStep === 'initial' && (
              <div className="join-modal-overlay" onClick={() => { setShowJoinModal(false); setJoinFlowStep('initial'); }}>
                <div className="join-modal" onClick={(e) => e.stopPropagation()}>
                  <h2 className="join-modal-title">
                    {joinModalType === 'join' ? 'Join Group' : 'Join Waitlist'}
                  </h2>
                  {joinModalType === 'join' ? (
                    <>
                      {selectedGroupForJoin && (
                        <div style={{ 
                          background: '#f8f9fa', 
                          borderRadius: '8px', 
                          padding: '1rem', 
                          marginBottom: '1rem',
                          textAlign: 'left'
                        }}>
                          <p style={{ fontSize: '0.85rem', color: '#6c757d', marginBottom: '0.5rem' }}>
                            You're joining:
                          </p>
                          <p style={{ fontSize: '0.95rem', color: '#0f4c5c', fontWeight: '600' }}>
                            {selectedGroupForJoin.time}, {selectedGroupForJoin.day}
                          </p>
                          <p style={{ fontSize: '0.95rem', color: '#212529', fontWeight: '500' }}>
                            {selectedGroupForJoin.name}
                          </p>
                          <p style={{ fontSize: '0.875rem', color: '#6c757d' }}>
                            Leader: {selectedGroupForJoin.leader}
                          </p>
                        </div>
                      )}
                      <p className="join-modal-message">
                        Please login with your existing account or create a new one to join this group.
                      </p>
                    </>
                  ) : selectedGroupForJoin ? (
                    <>
                      {/* Waitlist for a specific full group */}
                      <div style={{ 
                        background: '#f8f9fa', 
                        borderRadius: '8px', 
                        padding: '1rem', 
                        marginBottom: '1rem',
                        textAlign: 'left'
                      }}>
                        <p style={{ fontSize: '0.85rem', color: '#6c757d', marginBottom: '0.5rem' }}>
                          You're joining the waitlist for:
                        </p>
                        <p style={{ fontSize: '0.95rem', color: '#0f4c5c', fontWeight: '600' }}>
                          {selectedGroupForJoin.time}, {selectedGroupForJoin.day}
                        </p>
                        <p style={{ fontSize: '0.95rem', color: '#212529', fontWeight: '500' }}>
                          {selectedGroupForJoin.name}
                        </p>
                        <p style={{ fontSize: '0.875rem', color: '#6c757d' }}>
                          Leader: {selectedGroupForJoin.leader} • {selectedGroupForJoin.members} members
                        </p>
                      </div>
                      <p className="join-modal-message">
                        This group is currently full. Please login with your existing account or create a new one to join the waitlist. You'll be notified when a spot opens up.
                      </p>
                    </>
                  ) : (
                    <>
                      {/* General waitlist from no-results */}
                      <div style={{ 
                        background: '#f8f9fa', 
                        borderRadius: '8px', 
                        padding: '1rem', 
                        marginBottom: '1rem',
                        textAlign: 'left'
                      }}>
                        <p style={{ fontSize: '0.85rem', color: '#6c757d', marginBottom: '0.5rem' }}>
                          You're joining the waitlist for:
                        </p>
                        <p style={{ fontSize: '0.95rem', color: '#212529', fontWeight: '500' }}>
                          {activeGenderFilter !== 'All' ? activeGenderFilter : 'Any gender'} • {activeLanguageFilter && activeLanguageFilter !== 'All' ? activeLanguageFilter : 'Any language'}
                        </p>
                        <p style={{ fontSize: '0.95rem', color: '#212529', fontWeight: '500' }}>
                          {joinModalType === 'waitlist-anytime' ? 'Any day/time' : getActiveTimesDescription()}
                        </p>
                      </div>
                      <p className="join-modal-message">
                        Please login with your existing account or create a new one to join the waitlist. You'll be notified when a matching group becomes available.
                      </p>
                    </>
                  )}
                  <div className="join-modal-actions">
                    <button 
                      className="join-modal-btn join-modal-btn-primary"
                      onClick={() => setJoinFlowStep('login')}
                    >
                      Sign In / Create Account
                    </button>
                    <button 
                      className="join-modal-btn join-modal-btn-secondary"
                      onClick={() => { setShowJoinModal(false); setJoinFlowStep('initial'); }}
                    >
                      Cancel
                    </button>
                  </div>
                </div>
              </div>
            )}
            
            {joinFlowStep === 'login' && (
              <div className="login-screen-overlay">
                <div className="login-screen">
                  <div className="login-card">
                    <div className="login-logo">
                      <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                        <rect width="40" height="40" rx="8" fill="#e5a832"/>
                        <path d="M10 12h8v16h-8v-16zm12 0h8v16h-8v-16z" fill="white"/>
                      </svg>
                      <span className="login-logo-text">Bible Study Fellowship</span>
                    </div>
                    
                    <p className="login-subtitle">Please login with your existing account</p>
                    
                    <h2 className="login-title">Sign in</h2>
                    
                    <div className="login-form">
                      <input 
                        type="email" 
                        className="login-input"
                        placeholder="Email"
                        value={loginEmail}
                        onChange={(e) => setLoginEmail(e.target.value)}
                      />
                      
                      <a href="#" className="forgot-password-link">Forgot your password?</a>
                      
                      <input 
                        type="password" 
                        className="login-input"
                        placeholder="Password"
                        value={loginPassword}
                        onChange={(e) => setLoginPassword(e.target.value)}
                      />
                      
                      <button 
                        className="login-submit-btn"
                        onClick={() => {
                          setJoinFlowStep('confirmation');
                          setLoginEmail('');
                          setLoginPassword('');
                        }}
                      >
                        Sign in
                      </button>
                      
                      <p className="create-account-text">
                        Don't have a BSF account? <a href="#" className="create-account-link">Create an Account</a>
                      </p>
                    </div>
                  </div>
                  
                  <button 
                    className="login-back-btn"
                    onClick={() => setJoinFlowStep('initial')}
                  >
                    ← Back
                  </button>
                </div>
              </div>
            )}
            
            {joinFlowStep === 'confirmation' && (
              <div className="confirmation-screen-overlay">
                <div className="confirmation-screen">
                  <div className="confirmation-header">
                    <div className="confirmation-logo">
                      <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
                        <rect width="40" height="40" rx="8" fill="#e5a832"/>
                        <path d="M10 12h8v16h-8v-16zm12 0h8v16h-8v-16z" fill="white"/>
                      </svg>
                      <span className="confirmation-logo-text">BSF Online</span>
                    </div>
                  </div>
                  
                  <div className="confirmation-content">
                    {joinModalType === 'join' ? (
                      <>
                        <h1 className="confirmation-title">
                          You have joined the group:
                        </h1>
                        
                        {selectedGroupForJoin && (
                          <div className="confirmation-card">
                            <div className="confirmation-card-time">
                              <p className="confirmation-time">{selectedGroupForJoin.time}, {selectedGroupForJoin.day}</p>
                              <div className="confirmation-day-badges">
                                {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => (
                                  <span 
                                    key={d} 
                                    className={`confirmation-day-badge ${d.toUpperCase().slice(0,3) === selectedGroupForJoin.day.toUpperCase().slice(0,3) ? 'active' : ''}`}
                                  >
                                    {d}
                                  </span>
                                ))}
                              </div>
                            </div>
                            
                            <div className="confirmation-card-details">
                              <p className="confirmation-group-name">{selectedGroupForJoin.name}</p>
                              <p className="confirmation-group-info">
                                <Users size={14} style={{marginRight: '0.25rem', verticalAlign: 'middle'}} />
                                {selectedGroupForJoin.gender} • {selectedGroupForJoin.ageGroup}
                                <Globe size={14} style={{marginLeft: '0.75rem', marginRight: '0.25rem', verticalAlign: 'middle'}} />
                                {selectedGroupForJoin.language}
                              </p>
                            </div>
                            
                            <div className="confirmation-card-leader">
                              <p>Leader: {selectedGroupForJoin.leader}</p>
                              <p>{selectedGroupForJoin.members} members</p>
                            </div>
                          </div>
                        )}
                      </>
                    ) : joinModalType === 'waitlist' && selectedGroupForJoin ? (
                      <>
                        <h1 className="confirmation-title">
                          You are <span className="confirmation-highlight">12</span> on a waitlist for the group:
                        </h1>
                        
                        <div className="confirmation-card">
                          <div className="confirmation-card-time">
                            <p className="confirmation-time">{selectedGroupForJoin.time}, {selectedGroupForJoin.day}</p>
                            <div className="confirmation-day-badges">
                              {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => (
                                <span 
                                  key={d} 
                                  className={`confirmation-day-badge ${d.toUpperCase().slice(0,3) === selectedGroupForJoin.day.toUpperCase().slice(0,3) ? 'active' : ''}`}
                                >
                                  {d}
                                </span>
                              ))}
                            </div>
                          </div>
                          
                          <div className="confirmation-card-details">
                            <p className="confirmation-group-name">{selectedGroupForJoin.name}</p>
                            <p className="confirmation-group-info">
                              <Users size={14} style={{marginRight: '0.25rem', verticalAlign: 'middle'}} />
                              {selectedGroupForJoin.gender} • {selectedGroupForJoin.ageGroup}
                              <Globe size={14} style={{marginLeft: '0.75rem', marginRight: '0.25rem', verticalAlign: 'middle'}} />
                              {selectedGroupForJoin.language}
                            </p>
                          </div>
                          
                          <div className="confirmation-card-leader">
                            <p>Leader: {selectedGroupForJoin.leader}</p>
                            <p>{selectedGroupForJoin.members} members</p>
                          </div>
                          
                          <button className="remove-waitlist-btn">
                            Remove from Waitlist
                          </button>
                        </div>
                      </>
                    ) : (
                      <>
                        <h1 className="confirmation-title">
                          You are on a waitlist for a group at:
                        </h1>
                        
                        <div className="confirmation-card confirmation-card-general">
                          <div className="confirmation-timezone">
                            <Globe size={18} style={{marginRight: '0.5rem', color: '#0f4c5c'}} />
                            <span style={{color: '#0f4c5c', fontWeight: '500'}}>
                              {getTimezoneInfo(timeZone).display}
                            </span>
                          </div>
                          
                          <div className="confirmation-meeting-times">
                            <Calendar size={18} style={{marginRight: '0.5rem', color: '#495057'}} />
                            <span>Meeting Day and Time</span>
                          </div>
                          
                          {joinModalType === 'waitlist-anytime' ? (
                            <div className="confirmation-time-grid">
                              <div className="time-grid-header">
                                <span></span>
                                {['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(d => (
                                  <span key={d} className="time-grid-day">{d}</span>
                                ))}
                              </div>
                              {['6 AM to Noon', 'Noon to 6 PM', '6 PM to Midnight', 'Midnight to 6 AM'].map((time, i) => (
                                <div key={time} className="time-grid-row">
                                  <span className="time-grid-label">{time}</span>
                                  {['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(d => (
                                    <span key={d} className="time-grid-cell active">
                                      {['Morning', 'Midday', 'Evening', 'Night'][i]}
                                    </span>
                                  ))}
                                </div>
                              ))}
                            </div>
                          ) : (
                            <div className="confirmation-selected-times">
                              <p style={{fontWeight: '500', color: '#212529'}}>{getActiveTimesDescription()}</p>
                            </div>
                          )}
                          
                          <div className="confirmation-preferences">
                            <p>
                              <Users size={16} style={{marginRight: '0.5rem', verticalAlign: 'middle'}} />
                              {activeGenderFilter !== 'All' ? activeGenderFilter : 'Any gender'} • Mixed Ages
                            </p>
                            <p>
                              <Globe size={16} style={{marginRight: '0.5rem', verticalAlign: 'middle'}} />
                              {activeLanguageFilter && activeLanguageFilter !== 'All' ? activeLanguageFilter : 'Any language'}
                            </p>
                          </div>
                          
                          <button className="remove-waitlist-btn" onClick={() => {
                            setJoinFlowStep('removed');
                          }}>
                            Remove from Waitlist
                          </button>
                        </div>
                      </>
                    )}
                    
                    <p className="confirmation-note">
                      Not sure? Browse through other times and groups, you won't be removed from your {joinModalType === 'join' ? 'group' : 'waitlist'}.
                    </p>
                    
                    <button 
                      className="find-different-group-btn"
                      onClick={() => {
                        setShowJoinModal(false);
                        setJoinFlowStep('initial');
                        setSelectedGroupForJoin(null);
                        handleStartOver();
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                      }}
                    >
                      Find a Different Group
                    </button>
                  </div>
                </div>
              </div>
            )}
            
            {joinFlowStep === 'removed' && (
              <div className="join-modal-overlay" onClick={() => { setShowJoinModal(false); setJoinFlowStep('initial'); }}>
                <div className="join-modal" onClick={(e) => e.stopPropagation()} style={{textAlign: 'center', padding: '2.5rem 2rem'}}>
                  <div style={{fontSize: '2.5rem', marginBottom: '1rem'}}>✓</div>
                  <h2 className="join-modal-title" style={{marginBottom: '0.75rem'}}>Removed from Waitlist</h2>
                  <p style={{color: '#6c757d', fontSize: '0.95rem', marginBottom: '1.5rem'}}>
                    You have been removed from the waitlist for this group.
                  </p>
                  <button 
                    className="find-different-group-btn"
                    onClick={() => {
                      setShowJoinModal(false);
                      setJoinFlowStep('initial');
                      setSelectedGroupForJoin(null);
                      handleStartOver();
                      window.scrollTo({ top: 0, behavior: 'smooth' });
                    }}
                  >
                    Find a Different Group
                  </button>
                </div>
              </div>
            )}
          </>
        )}
      </main>

      <footer className="footer">
        <div className="footer-content">
          <div className="newsletter">
            <span className="newsletter-text">Sign up for our newsletter to stay in the loop.</span>
            <input type="email" className="newsletter-input" placeholder="Enter Your Email Address" />
            <button className="subscribe-btn">Subscribe</button>
          </div>
          
          <div className="footer-info">
            <div className="language-links">
              <span style={{marginRight: '0.5rem'}}>🌐 Language:</span>
              <a href="#" className="lang-link">English</a>
              <a href="#" className="lang-link">Español</a>
              <a href="#" className="lang-link">简体中文</a>
              <a href="#" className="lang-link">繁體中文</a>
            </div>
          </div>
        </div>
      </footer>
      
      {/* Search Mode Confirmation Modal */}
      
      {/* Fullscreen Language Picker (Mobile) */}
      {showLanguageFullscreen && (
        <div className="language-fullscreen-overlay">
          <div className="language-fullscreen-header">
            <button className="language-fullscreen-close" onClick={() => {
              setShowLanguageFullscreen(false);
              setLanguageSearchTerm('');
            }}>
              <X size={24} />
            </button>
            <h2 className="language-fullscreen-title">Language</h2>
          </div>
          <div className="language-fullscreen-search">
            <Search size={18} className="language-fullscreen-search-icon" />
            <input
              ref={languageFullscreenSearchRef}
              type="text"
              className="language-fullscreen-search-input"
              placeholder="Search languages..."
              value={languageSearchTerm}
              onChange={(e) => {
                const value = e.target.value;
                setLanguageSearchTerm(value);
                
                // Auto-select if exact match or only one result (matches desktop behavior)
                if (value.trim()) {
                  const matches = uniqueLanguages.filter(lang => 
                    lang.toLowerCase().includes(value.toLowerCase())
                  );
                  const exactMatch = uniqueLanguages.find(lang => 
                    lang.toLowerCase() === value.toLowerCase()
                  );
                  
                  if (exactMatch) {
                    setLanguageFilter(exactMatch);
                  } else if (matches.length === 1) {
                    setLanguageFilter(matches[0]);
                  }
                }
              }}
              autoFocus
            />
          </div>
          <div className="language-fullscreen-list">
            <div 
              className={`language-fullscreen-item ${languageFilter === '' ? 'selected' : ''}`}
              onClick={() => {
                setLanguageFilter('');
                setShowLanguageFullscreen(false);
                setLanguageSearchTerm('');
              }}
            >
              <span>All Languages</span>
            </div>
            {filteredLanguages.map(lang => (
              <div 
                key={lang}
                className={`language-fullscreen-item ${languageFilter === lang ? 'selected' : ''}`}
                onClick={() => {
                  setLanguageFilter(lang);
                  setShowLanguageFullscreen(false);
                  setLanguageSearchTerm('');
                }}
              >
                <span>{lang}</span>
              </div>
            ))}
          </div>
        </div>
      )}
      
      {showSearchModeModal && (
        <div className="join-modal-overlay" onClick={() => setShowSearchModeModal(false)}>
          <div className="join-modal" onClick={(e) => e.stopPropagation()}>
            <h2 className="join-modal-title">Search by Name</h2>
            <div style={{ 
              background: '#f8f9fa', 
              borderRadius: '8px', 
              padding: '1rem', 
              marginBottom: '1rem',
              textAlign: 'left'
            }}>
              <p style={{ fontSize: '0.85rem', color: '#6c757d', marginBottom: '0.5rem' }}>
                You currently have filters selected:
              </p>
              <p style={{ fontSize: '0.95rem', color: '#212529', fontWeight: '500' }}>
                {genderFilter !== 'All' && <span>{genderFilter}</span>}
                {genderFilter !== 'All' && languageFilter && ' • '}
                {languageFilter && <span>{languageFilter}</span>}
                {(genderFilter !== 'All' || languageFilter) && selectedDayTimes.length > 0 && ' • '}
                {selectedDayTimes.length > 0 && <span>{selectedDayTimes.length} time slot{selectedDayTimes.length !== 1 ? 's' : ''}</span>}
              </p>
            </div>
            <p className="join-modal-message">
              Would you like to search by name only, or continue searching with your current filters?
            </p>
            <div className="join-modal-actions" style={{ flexDirection: 'column', gap: '0.75rem' }}>
              <button 
                className="join-modal-btn join-modal-btn-primary"
                onClick={searchByNameOnly}
                style={{ width: '100%' }}
              >
                Search by Name Only
              </button>
              <button 
                className="join-modal-btn join-modal-btn-secondary"
                onClick={searchByNameWithFilters}
                style={{ width: '100%' }}
              >
                Keep My Filters
              </button>
              <button 
                style={{
                  background: 'transparent',
                  border: 'none',
                  color: '#6c757d',
                  cursor: 'pointer',
                  padding: '0.5rem',
                  fontSize: '0.9rem'
                }}
                onClick={() => setShowSearchModeModal(false)}
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}
      
      {showTimezoneModal && (
        <div className="timezone-modal-overlay" onClick={() => setShowTimezoneModal(false)}>
          <div className="timezone-modal" onClick={(e) => e.stopPropagation()}>
            <div className="timezone-modal-header">
              <h2 className="timezone-modal-title">Select Time Zone</h2>
              <button 
                className="timezone-modal-close"
                onClick={() => setShowTimezoneModal(false)}
              >
                ×
              </button>
            </div>
            
            <div className="timezone-map">
              <div className="timezone-map-placeholder">
                <svg viewBox="0 0 585.43 369.29" style={{
                  width: '100%',
                  height: '100%',
                  opacity: 0.6
                }}>
                  <path fill="#4a5568" fillRule="evenodd" d="M503.39,274.45c.56-5.21-9.55-3.45-9.67-7.22-5.48-4.58,2.48-4.63,3.41.25,6.28-3.14,16.77.22,20.81,6.36,4.4,6.74,3.87,7.65-2.92,1.96-1.89-1.15-3.04.63-4.39,1.63-1.48.59-10.14-1-7.24-2.98ZM183.45,235.05c.24-.04.26.06.24.27,0,0-.24-.27-.24-.27ZM183.45,235.05c-.18.07-.18-.31,0-.24,0,0,0,.24,0,.24ZM183.09,233.62h-.27c.16-.1.32-.42.27,0ZM183.09,233.62h.24c.07.18-.31.18-.24,0ZM167.11,226.35c.18-.06.38.11.48.24-.18.06-.38-.11-.48-.24ZM167.11,226.35v.24c-.18.07-.18-.31,0-.24ZM159.73,223.32c.49-.12.25,1.05-.24.86-.15-.31.11-1.47.24-.86ZM163,222.72c-.21.03-.27-.03-.24-.24.21-.03.27.03.24.24ZM163.24,223.08l.24.24c-.21.03-.27-.03-.24-.24ZM163,222.72c.17.05.29.17.24.36-.06-.07-.3-.24-.24-.36ZM158.66,222.72c-.5,0,.49-.6.24-1.1.89.01.92,2.02-.24,1.1ZM158.03,219.21c-.18.06-.38-.11-.48-.24.18-.06.38.11.48.24ZM158.03,219.21c.13-.09.34-.32.39-.48.46.27-.07.51-.39.48ZM160.59,219.21c-.25-.04-.68-.43-.63-.71.21.19.53.44.63.71ZM160.59,219.21c.43.3-.04.26-.12.6-.02-.16,0-.46.12-.6ZM370.06,87.81c-7.7-10.51,37.16-32.73,17.94-15.48-9.69,1.39-10.42,16.2-17.94,15.48ZM370.65,87.55c4.4,1.55-1.74,7.98,3.14,14.59-4.48,1.33-4.98-4.06-8.64-4.71.32-3.25,1.59-9.25,5.5-9.88ZM484.07,91.38c-.78,4.88-8.49-3.48-3.69-5.56,1.54-1.3,4.53,4.63,4.49,2.52-.03-1.63.9-1.45,2.05-.67,3.47,2.21-3.22,6.11-2.84,3.71ZM298.48,152.5c2.96,1.61-2.97,6.21,2.02,7.46,4.78.06,12.65.77,15.86-3.39-.37-6,1.41-4.95,5.09-6.29-.63-3.27-1.64-6.46,3.34-5.86,15.2-6.32-22.96,6.63-1.97-19.34-4.93-7.68-6.17,5.7-10.34,7.53-5.8,8.59,1.68,8.73-.66,11.64-2.69,3.05-1.7,8.87-5.81,11.07-4.05,2.94-3.87-6.56-5.5-8.9-4.17-.62-9.23,6.85-9.09-4.34.26-11.08,14.37-18.5,17.06-30.01-2.8-1.17,4.48-4.11,5.42-5.89,2.51-.94,4.06-2.76,6.66-3.83,4.23-4.57,1.6,1.59,4.05-.85,1.9-1.17,8.77-1.53,6.29,3.34,10.3.83,28.56,20.24,6.19,14.59-.12,1.43,1.61,5.42,1.99,7.84,1.92,3.01,4.71,2.6,2.49-1.04,1.78-1.82,5.51,3.01,5.1-2.07,6.29-8.78,6.09,2.04,7.23-12.37,3.91-.83,2.31,2.52,1.31,4.54.9,3.12,3.43,1.35,4.35-.65,5.27-6.06,11.65-4.04,18.77-5.67,1.71-7.76,8.01-2.26,12.88,1.23,2.34-4.61-6.2-9.38,2.99-20.43,6.96-4.77,6.4,26.5,2.13,28.27-5.83,1.81,5.89,1.4,5.23-4.1-.35-9.44,5.62-1.15,5.12-4.25-.92-1.99-3.31-2.06-5.18-2.29-1.63-3.83-2.33-10.31.58-14.7,2.47-4.88-.18,4.16,1.7,4.51,2.04.97.44-2.3,1.29-2.83,3.64-3.89,10.21-.2,9.6,4.65.29.72,1.08,3.61,1.24,1.42,1.97-6.07-11.5-15.08.8-15.8,8.05-1.35-.85-6.78,13.25-12.58,4.83-3.26,13.13-.61,14.32-8.63,4.03-8.85,8.45-.41,10.02,3.22,27.19-2.5-10.54,25.7,2.26,20,6.11-7.05,17.31,2.27,25.14,4.19,5.02-.21,7.48,9.31,10.92,7.97,1.21-5.9,7.33-.78,11.85-2.62,2.39-5.53,5.05-7.34,11.6-3.97,9.5,1.82,6.44,8.33,19.96,7.36,2.6,3.41,2.33,7.54,8.09,5.65,3.52.96,6.72-.76,8.81,3.08,6.25-.85-3.09-7.47,11.48-3.61,7.67,3.4,12.13,11.49,18.66,13.14,5.98,3.69-1.08,4.19-1.65,8.48-3.19.48-6.75-3.89-9.46-5.32-1.36-1.49-1.52,5.02-4.34,4.72-2.26,1.27,2.21,5.14,1.13,7.26-8.1,1.32-12.31,8.71-20.55,8.38-5.12-.63-7.15,5.43-5.23,9.43-1.01,5.38-6.14,10.94-9.02,15.51-11.27-11.62,9.32-22.08,10.52-32.61-2.47.4-3.35,7.71-7,3.48-3.18-3.25-5.49,1.49-7.32,3.78-7.91,9.07-17.31-6.37-30.59,15.53,2.58,7.23,12.16-.67,7.46,12.53-3.24,22.59-21.95,10.55-18.9,33.33-6,3.79-1.85-12.01-10.31-8.86-2.08-6.27-12.28,5.86-.47,4.42-8.12,12.6,11.13,19.23-18.81,30.54-15.64-3.84,3.3,11.49-2.71,15.85-5.66,8.9-9.8-7.31-13.88-1.16-3.13,6.41,6.08,8.48,6.23,14.18.7,6.09-5.73-2.21-5.57-4.78-4.99-3.48.37-17.05-6.64-16.56-1.97,1.28-2.54-.29-2.64-2-5.5-20.06-23.26,4.19-25.43,14.02-6.98.5-7.17-15.82-9.87-20.58-3.02,1.63-3.97-1.24-5.32-3.06-5.05-7.05-14.48-.78-19.95-6.63-5.16,2.36-17.09-12.69-10.82-.12,1.17,2.17,3.78,5.53,6.62,4.73,21.93-2.2-3.52,18.72-14.18,19.02-7.06-4.28-9.74-25.07-17.96-26.26,12.36,51.9,49.24,10.13,11.13,51.29-6.85,6.53,4.9,16.89-2.24,22.96-8.62,3.52-4.7,11.99-10.45,17.58-15.09,34.73-35.69-3.68-31.49-23.67,4.42-9.92-7.91-16.86-5.8-27-1.95-2.03-5.41-.31-7.07-3.08-6.4-2.36-14.74,3.04-21.49,1.16-14.67-6.63-17.4-27.53-6.18-38.53,5.1-3.27,5.48-10.16,10.53-14.09,7.64,1.24,15.22-3.92,23.51-3.23,7.71,5.59-4.09,5.21,14.56,12.16,4.36,2.33,2.61-5.66,8.01-3.24,5.19,2.67,12.19,3.14,17.64,2.17,5.81-7.66,2.37-11.35-6.26-9.77-15.6-6.13,5.99-14.53,13.73-9.38,11.91-1.57-5.73-7.16-1.38-12.89-6.03.17-3.44,2.03-3.63,4.11-1.51.84-3.85,1.41-3.8-1.21-6.72-7.71-6.73,9.92-10.7,11-4.41-1.84-6.81,1.51-4.51,5.28-.64,3.23-5.51,1.4-2.29-.46-5.47-3.7-7.16-13.44-14.81-15.51-3.02,7.5,12.16,8.3,5.46,14.99-7.97-13.47-20.15-16.56-27.43,1.11-9.95,11.55-20.33-11.21-8.13-11.83,6.72,2.34,10.11-3.76,5.35-8.48-8.17-3.41,9.25-5.48,13.92-15.19,7.88.22.01-9.53,5.93-9.87ZM298.91,151.97c-1.01-.32-3.62,1.94-2-.17,1.18-.41,4.47-2.3,2,.17ZM165.41,226c-.18.06-.38-.11-.48-.24.18-.06.38.11.48.24ZM165.92,226.12c.11.51-.56.39-.74.71-.11-.51.53-.41.74-.71ZM165.41,226h.51c.06.26-.39.07-.51,0ZM174.97,369.22c-.43-1.22-.03-1.28,1.1-1.19.43,1.22.03,1.28-1.1,1.19ZM172.68,360.7c2.84,1.3,3.1,5.09,5.85,6.59-.64,2.17-4.35-1.45-4.87.65,3.23,3.05-3.82.1-4.33-1.07,5.21-3.08.35-4.06,3.35-6.17ZM104.93,214.63c-.13.34-.2.75-.65.48.15-.42.11-.93.65-.48ZM75.11,156.71c-1.29,1.17-1.37-.25-.89-1.22,0,0,.89,1.22.89,1.22ZM69.41,148.66c-7.06-1.4-17.06-11.69-23.26-5.77-1.39.85-4.89,3.76-4.29.06.32-1.95,2.55-4.94-.1-2.67-.48,6.86-22.17,22.73-14.26,14.07,15.59-8.34-20.27-11.74-4.12-22.3,2.83-.17,5.45-4.79,1.75-5.34-5.59,2.8-12.79-4.58-4.25-6.73,1.3.54,7.95,1.95,5.82-.99-11.42-5.25-6.56-10.27.77-16.7,13.87-9.18,30.67,11.36,44.27,4.24,2.55-2.66,6.78-.51,8.05-3.84,2.26,1.08,1.7,5.91,4.77,3,4.18.44,8.55,1.94,13.06,3.8,4.88-.23,1.5,4.68,5.09,5.27,4.81.26,5.12-2.36,9.08,2.29-2.1-12.27,4.74-2.66,11.27-2.56,8.96.75-1.23-3.1,9.98-2.02,2.79-2.6-.98-5.87-2.6-7.97-2.93-5.12,3.4-12.53,5.36-4.02.88,3.95,2.88,6.78,3.75,10.52.24,2.92,1.15-4.43,3.1-1.34,3.13,16.96,3.34-5.32,7.24-3.9,5.45,2.26,4.58,10.45,1.47,13.91-7.74,1.66-2.03-1.01-7.43,4.06-5.63-1.45-.11.09.43,2.28-3.89,5.67-12.85,10.71-11.59,19.23,3.52,6.29,9.74,8.47,16.34,11.61,3.94-.63,6.81,19.92,8.71,5.49-1.21-4.36.84-4.16,2.95-6.99,2.6-5.58-7.55-21.83,3.52-20.18,8.32-.31,6.28,11.18,12.08,12.49,3.97-2.88,4.12-7.83,7.3-.16-.81,6.17,9.16,10.47,5.36,13.34,14.15-.22-1.43,12.46-10.26,9.46-2.11.7-4.45,3.14-5.87,4.96,1.6.11,5.62-3.88,7.55-1.46-4.4,6.66,10.45,6.98.89,10.73-2.57,1.97-2.97.1-2.13-1.95-5.87-1-7.01,5.93-10.48,8.21-4.29,1.7-6.17,7.62-6.51,11.86-8.08,5-8.01,10.06-7.03,18.33-4.18-.65-2.69-9.15-8.71-8.32-9.08.01-20.56,1.2-18.7,13.57,3.83,15.81,11.14.07,16.78,2.81-2.49,7.32-2.51,8.63,5.33,9.38,1.97,2.82-1.61,11.3,5.16,10.23,1.47-.34,2.65-.51,4,.11,3.57,2.94,10.15-11,10.26-1.14,1.14.83.96-3.71,2.92-3.2,5.67,2.09,37.16,10.37,30.02,19.09-1.23,1.29-.7,1.91.73.66,3.17-1.85,3.55,1.33.65,1.84,11.9-2.45,33.59,5.85,18.21,19.35,1.79,15.57-11.67,13.09-15.72,22.68-1.86,5.45-11.45,21.78-15.46,10.69,4.24,12.8-.39,8.42-8.23,15.77-4.62,1.87,2.26,3.02-3.86,8.74-3.49,2.64-1.54,4.11-.53,6.77-1.77,3.38-4.81,6.55-4.43,10.57-7.94,11.78-10.38-10.8-8.22-14.5,4.89-7.5-2.01-17.58,3.98-26.41,12.71-36.06-27.74-36.13-9.09-63.36.02-11.13-6.8-2.26-12.69-9.14-7.1-13.08-30.6-5.85-33.67-22.05-3.32-2.5-15.8-21.36-11.43-10.53,2.12,3.15,4.64,6.77,5.93,10.2-8.1-8.89-15.79-20.09-22.38-30.72.2-4.97-2.85-17.62,1.89-18.79-6.66-7.64-12.67-17.27-18.55-26.6ZM69.9,148.72c.4.68.77,2.24-.38,2.38-.25-.57-.97-2.72.38-2.38ZM187.8,359.4c-1.22.29-.03-.76,0-1.19,1.76-.24.31.52,0,1.19ZM188.28,360.54c.37-1.11,1.43-3.26,2.89-2.14.56,1.42-1.86,2.43-2.89,2.14ZM392.67,353.38c-.73-1.68,1.04-1.28,1.35-.12.43-.86,2.02-1.66,1.06,0-1.84,1.17-.1,1.98-2.41.12ZM513.78,336.72c-2.63-3.84,2.82-2.42,4.82-2.56,1.97,3.61-4.01,10.1-4.82,2.56ZM548.14,346.3c-1.66-4.47,7.63-6,8.07-10.98.42-2.04,1.18-.75,2.43-.67,4.76,0-6.8,16.3-10.5,11.65ZM560.15,323.36c3.89,8.22,10.79.78,2.22,11.84-2.78,1.31.95-2.87-2.89-4.08,4.82-2.18-3.92-10.53.67-7.76ZM548.98,296.9c.53.41.29.7-.3.6,0,0,.3-.6.3-.6ZM371.59,297.79c-.48-.16-.88-.51-.3-.89.2.28.88.6.3.89ZM546.36,297.53c3.36,2.03,1.33,2.25-.95-.02-2.44-1.5-.02-1.72.95.02ZM374.56,295.41c.51-.22.23.68.3.89-.92.19-.39-.4-.3-.89ZM13.06,293.92l.22-.3c0,.19.04.36-.22.3ZM552.25,293.62h-.6c.22-.3.37-.3.6,0ZM45.49,291.54c.24-.63.43.13.65.3,0,0-.65-.3-.65-.3ZM550.47,291.54c.22-.3.37-.3.6,0,0,0-.6,0-.6,0ZM565.39,291.19c.66-.76,2.15.34,1.72,1.19-.8.13-3.33.3-1.72-1.19ZM568.62,289.16c1.31-.27-.89,1.17-1.49.89.32-.64,1.11-.46,1.49-.89ZM549.28,289.75v-.89c.81.26.43.46,0,.89ZM548.38,286.92c-.05.53,1.24.98,0,1.34-.21-.5-1.03-1.59,0-1.34ZM11.76,285.97l.22-.12c.05.17-.12.11-.22.12ZM.23,285.97c-.1,0-.27.05-.22-.12,0,0,.22.12.22.12ZM9.36,284.51c.52.47.1.73-.43.62-.1-.33.16-.52.43-.62ZM351.93,299.39c2.06-3.18.78-6.35,1.88-9.65,4.38-1.29,8.98-11.88,9.43-2.41-1.63,5.28-6.93,27.77-11.31,12.06ZM352.24,281.24v.86c-.34-.11-.52-1.02,0-.86ZM463.69,301.19c3.55-5.91,12.47-5.44,16.05-12.13,5.47-7.61,6.06.55,12.49-6.86,10.86-4.22,3.51,6.81,13.45,8.58,3.85.67,1.02-9.34,4.17-10.21,4.06,6.81,6.77,13.94,12.73,19.81,15.5,14.37-12.67,46.27-20.89,19.49-4.13,4.93-3.62-1.42-7.32-2.76-22.52-.78-28.29,18.18-30.68-15.92ZM540.35,279.69c.82-.19.82.66,0,.48-.64-.33-.94-1.23,0-.48ZM473.72,277.78c.3.22,1.63.96,1.22,1.44-1.13.5-3.49-1.37-1.22-1.44ZM537.97,278c1.83.85.06.7-.89.59-.86-1.07.17-.58.89-.59ZM479.83,279.45c-1.78-1.02,3.95-3.55,4.46-3.07-.35,1.15-3.29,2.53-4.46,3.07ZM567.73,276.42c.21-.01.35-.02.3.24,0,0-.3-.24-.3-.24ZM538.56,276.42c.1-.59.31,1.11.89,1.1.08,1.23-.94-.65-.89-1.1ZM475.52,276.2c2.18.94-1.38,1.16-1.82.67.14-.65,1.3-.81,1.82-.67ZM471.06,276.06c4.3-.08-2.27,2.35-2.16.78.55-1.29,1.56.74,2.16-.78ZM482.01,276.18l-1.19.24c.15-.48.84-.29,1.19-.24ZM466.83,276.42c-.42.6-.99.34-1.49,0,.55-.44,1.04-.75,1.49,0ZM533.2,275.82c.52-.19,1.22.51.6.83-.03-.61-1.29-.45-.6-.83ZM535.29,275.32c.49-.56,1.19.75,1.79.86.26,1.13-1.44-.69-1.79-.86ZM532.01,273.38c.65.28,1.06,1.08,1.49,1.58-.47-.27-2.11-1.22-1.49-1.58ZM451.38,272.99c3.73-.7,9.11,1.13,12.92,2.27,2.15,2.95-12.38.25-12.92-2.27ZM530.82,273.14c-.65,1.89-.73-.65-1.79-.6.68-1.32,1.06.07,1.79.6ZM524.25,270.67c0-2.61,2.13.82-.46,1.58-1.29.98-4.12.88-4.61-.35,1.12-.34,4.33.04,5.06-1.23ZM371.29,269.63l.6.98c-.59.22-1.19-.64-.6-.98ZM525.47,269.04l1.19.6c-.89.68-1,.35-1.19-.6ZM483.5,267.96c.6-.23,1.9-.4,1.79.6-.4.74-1.95.18-1.79-.6ZM489.22,267.35c5.24,1.63-1.92,2.01-2.33.16.27-.16,1.85.43,2.33-.16ZM455.22,267.46c-.13.45-.33.91-.89.74-.03-.92-.1-1.29.89-.74ZM452,266.66c1.87,1.97-1.07.3-1.49-.37-.36-1.46,1.64-.68,1.49.37ZM398.37,265.52l.3-.24c.06.26-.09.25-.3.24ZM440.34,264.45l.6,1.31c-.62-.12-1.15-.78-.6-1.31ZM399.86,264.1h.3c-.08,0-.37.25-.3,0ZM399.27,263.35c-.21.01-.35.02-.3-.24,0,0,.3.24.3.24ZM138.21,263.35c1.11.4.45,1.37-.48,1.34.35-.55-.03-2.86.48-1.34ZM293.61,262.28c.42.18.17.45,0,.71-.42-.18-.17-.45,0-.71ZM472.55,265.94c.51-6.48,4.84-4.26,9.31-5.3-.04,3.37-11.25-.93-6.86,4.13.7.52,3.65-1.49,2.58.41-.96,1.9,1.45,8.87-2.27,2.84-1.49-1.66-.43,2.85-1.26,3.53-1.65,1.52-1.96-4.49-1.5-5.62ZM485.56,260.84c.14-.77.62-.77,1.1-.27-.25.55-1.17.95.06.45,1.39,2.28-.78,1.56-1.17-.18ZM399.27,258.41c.06.26-.09.25-.3.24-.06-.26.09-.25.3-.24ZM399.86,257.31c-.06-.26.09-.25.3-.24.06.26-.09.25-.3.24ZM296.58,257.67c.03-.44.89-.97.89-.36-.25.18-.59.86-.89.36ZM435.53,254.13c11.07.6,24.22,30.09,7.59,11.56-.69-3.92-9.35-9.34-7.59-11.56ZM470.86,253.12c3.38,2.21-3.34,4.21.64,7.54-1.85,4.66-4.17,10.54-10.63,7.75-3.37-.34-7.67-8.64-1.93-8.33,3.68-1.66,7.82-8.69,11.92-6.96ZM534.39,251.86h.3c-.17.08-.36.44-.3,0ZM496.89,250.79l.3.24c-.32.17-.31.07-.3-.24ZM410.94,247.52c1.86,1.13,3.52,5.66.27,6.04-2.12-.79-1.31-4.81-.27-6.04ZM477,251.5c.54-3.15,4.58-1.23,5.76-3.81,1.45-.09,2.1,4.73.7,4.19-1.69-.85.25,2.42-1.25,2-2.58-.77-2.07-5.04-5.2-2.38ZM480.52,246.8c.95-.21.37.46.3.95-.92-.17-.94-.28-.3-.95ZM479.93,245.7c.49.71.04.87-.6,1.1,0,0,.6-1.1.6-1.1ZM473.38,246.18c-.2.11-.93.76-1.19.62.36-.19.88-1.75,1.19-.62ZM185.5,246.65c-.58-1.13,1.1-1.32.6-.71.95,1.58-1.73.65-.6.71ZM479.32,245.7c-.78.45.11,4.06-1.11,2.27-.65-.51.49-2.73,1.11-2.27ZM179.34,245.34l.24.24c-.21.03-.27-.03-.24-.24ZM181.52,245.11c.73.1-.26.66-.63.48-.17-.54.8.07.63-.48ZM186.58,245.11c-.11-.48.8-.19,0,0h0ZM481.71,244.6c.09.32.37,1.25.3,1.58-.96-.31-1.57-1.22-.3-1.58ZM476.98,244.25c.98.59,2.68.71.83,1.66-1.21.75-.83-.95-.83-1.66ZM185.03,243.77c-.05-.19.07-.31.24-.36,0,.2.06.44-.24.36ZM174.73,243.41v.36c-.04-.1-.26-.42,0-.36ZM173.27,243.41l.27-.24c.04.24-.06.26-.27.24ZM482.62,243.48c.03.79.36,2.99-.63.8-1.85-.77-1.03-2.24.63-.8ZM369.21,242.67c.75.58-.9.94-1.19.27-.27-.5,1.03-.18,1.19-.27ZM188.51,242.07c-.2-.14-.43-.56,0-.48-.1.25.63.46,0,.48ZM186.1,241.59c.03.21-.03.27-.24.24.04-.27-.13-.68.24-.24ZM512.96,241.36c.39-.11.29.23.3.48,0,0-.3-.48-.3-.48ZM475.51,241.25c.69.24,1.41,1.47.36,1.77-.93.11-1.83-2.3-.36-1.77ZM186.1,240.49c.49-.66.13.34.24.51-.36.13-.2-.32-.24-.51ZM186.1,239.18c.26-.06.45.46.48.71-.46-.08-1.11-1.21-.48-.71ZM514.75,238.56c-.06-.26.09-.25.3-.24,0,0-.3.24-.3.24ZM245.48,238.32l.48.48c-.35.5-.72-.08-.48-.48ZM185.86,237.96c-.05.18.15.74-.24.6.05-.35-.37-.69.24-.6ZM185.62,237.25c.21-.03.27.03.24.24-.21.03-.27-.03-.24-.24ZM185.5,236.39c.24-.03,0,.35.36.24.01.53-.52.16-.36-.24ZM185.27,236.86c.49.22-.15-.03,0,.39-.48-.22-.08-1.06,0-.39ZM184.76,235.55c-.15-.35.66-.35.51,0,0,0-.51,0-.51,0ZM180.06,234.45c-.08-.3.15-.24.36-.24.08.3-.15.24-.36.24ZM176.82,233.09c.55.09,3.11-.39,1.69.88-.87.21-3.29.03-1.69-.88ZM179.07,233.62c.09.02.34-.07.27.12-.08-.06-.61.13-.27-.12ZM158.93,233.08c.45-.48,3.72.53,2.53.96-.65.11-2.96.38-2.53-.96ZM477.68,234.68c.77,1.79-3.15,3.94-.67,5.58,1.37-.74,4.9,2.83,2.72,2.08-.71-2.65-4.2-.25-4.74-2.29-2.66-1.58.14-10.77,2.69-5.38ZM153.92,231.56h.39c-.18.15-.29.34-.39,0ZM164.95,233.37c2.05-.88,3.4.5,1.97-2.7,11.64-.5,5.99,5.28-1.97,2.7ZM459.16,230.39c.86.73-.48,2.24-1.08,2.7-3.3,1.65-1.98-3.89,1.08-2.7ZM35.22,230.89c.37-1.6,1.63-.02,1.96.55-.95.5-1.83,1.23-1.96-.55ZM166.04,229c-.2-.83.9-.24,1.07-.71.1.64-.59.79-1.07.71ZM32.01,228.29c-.64-.41-.29-.4.21-.6.08.35.42.72-.21.6ZM168.69,227.19c.21-.03.27.03.24.24,0,0-.24-.24-.24-.24ZM29.39,226.83c.23-.15.48-.32.65,0-.13.4-.79.59-.65,0ZM149.5,226.96c-.77-6.73,24.04,5.83,10.76,3.27-1.87-2.61-7.53-4.82-10.76-3.27ZM164.1,225.25l.24.51c-.36.13-.2-.32-.24-.51ZM163.48,224.18c-.03.06.64.87.24.71.02-.31-.38-.25-.24-.71ZM162.41,224.18c.32-.08.42.26.24.48.1-.37-.33-.11-.24-.48ZM164.82,223.32l.12.24c-.18.06-.11-.14-.12-.24ZM159.97,222.01c-.04-.24.03-.3.27-.27,0,0-.27.27-.27.27ZM473.98,224.39c.46-.72,1.18-2.77,2.2-2.95,2.37,1.05-1.77,8.25-2.2,2.95ZM161.66,221.38c-.18.06-.11-.14-.12-.24,0,0,.12.24.12.24ZM161.9,221.62c-.05-.42.1-.1.27,0,0,0-.27,0-.27,0ZM162.17,222.25c.04.24-.06.26-.27.24-.04-.24.06-.26.27-.24ZM363.25,219.81c.31-.13.48.31.6.51-.45.04-.7.02-.6-.51ZM159.13,218.97l.24-.24c.03.21-.03.27-.24.24ZM160.47,220.07c.04.4-.08.12-.24,0,0,0,.24,0,.24,0ZM254.67,217.04c.12.49-.31.01-.48,0,0,0,.48,0,.48,0ZM258.19,216.8c-.4.13.07-.62.36-.48.54.29,0,1.06-.36.48ZM255.75,216.56c-.42-.37-.02-.08,0-.36.32.06.41.44,0,.36ZM257.32,215.46c.46.27-.94,1.95-.95.48.55.1.68-.09.95-.48ZM260.36,216.32c.46-.14.17-.86.6-1.1.92.06-.59,1.74-.6,1.1ZM254.91,215.1c.49.13-.13.28,0,.6-.05-.19-.51-.71,0-.6ZM261.67,214.63c.34-.52.1.37-.24.48-.53.09-.1-.61.24-.48ZM180.18,208.82c-.03-.21.03-.27.24-.24,0,0-.24.24-.24.24ZM256.37,207.72c.37.07.12.35-.12.36-.54-.42-.64-.33.12-.36ZM489.17,206.9c4.34-4.74,4.06,5.78,1.63,3.19-.23-3-1.78-1.43-1.63-3.19ZM496.35,204.61c2.74,1.65-1.81,1.54-2.31,3.04-.9-2.02,1.21-2.03,2.31-3.04ZM337.09,202.73c-.28,1.37-1.79,2.07-2.68.8.36-.46,2.21-.95,2.68-.8ZM320.66,203.07c.02-1.54,2.32.37,3.26-.09-.13,1.18-2.71-.05-3.26.09ZM242.08,197.93c.05.06,1.27-.13,1.1.12-.12-.02-1.07.08-1.1-.12ZM303.5,197.24c2.26.82,5.25-.91,3.9,2.7-.9.63-5.74-1.92-3.9-2.7ZM285.39,196.11c.4-.04.12.08,0,.24,0,0,0-.24,0-.24ZM240.27,196.11c-.21.41-.84.03-.36-.24.05.17.17.29.36.24ZM233.75,194.66c-.07.33-.33,0-.24-.24,0,0,.24.24.24.24ZM287.56,194.42c-1.54.04.38-.96,1.1-.48.08.79-1.01,1.44-1.1.48ZM289.74,193.35c.19.12.28.38.24.6-.51-.15-1.21-.65-.24-.6ZM494.17,202.95c8.07.38,10.12-7.97,13.2-11.68,4.01,6.46-2.4,13.13-8.55,15.12-1-3.68-11.56,1.34-4.65-3.44ZM296.5,192.82c-.41-2.96,3.32-1.45,2.14,1.13-.6,3.15-3.09,1.3-2.14-1.13ZM298.1,187.91c.32.6.19,2.43-.51,2.72-1.05-.38-.9-3.38.51-2.72ZM508.45,183.06c-.5-3.16,4.75,2.66,5.75,3.49-1.78,1.03-3.73,3.24-6.12,1.77-2.67-.14-.15,1.7-2.52,1.86-1.3-3.04,3.62-3.73,2.88-7.12ZM193.72,178.35c-.2-.14-.43-.56,0-.48,0,0,0,.48,0,.48ZM193.72,178.7c-.21.03-.27-.03-.24-.24.21-.03.27.03.24.24ZM279.11,172.18l.12.24c-.18.06-.11-.14-.12-.24ZM192.03,169.04c.83-1.99,2.72-2.8,2.25.31-.03,4.68,3.53.68,4.32,7.54,2.29,4.48-5.52-1.3-7.62-.19-4.49.55.79-5.69,1.05-7.66ZM557.61,163.23c.63-.13.64.19.6.71,0,0-.6-.71-.6-.71ZM508.48,163.01c3.99-8.2,3.43,17.18.58,16.11-.64-4.91-.21-11.01-.58-16.11ZM276.19,159.95l-.6.51c.22-.2.23-1.38.6-.51ZM301.68,155.56c2.48-2.05,1.03,1.35.23,2.2-1.13-.17-1.6-1.87-.23-2.2ZM67.91,151.5c1.09-.45,1.79,1.73.65,1.93,0,0-.65-1.93-.65-1.93ZM273.43,151.26c.92,1.5-.72.1-1.1-.36.43-.86,1.36-.64,1.1.36ZM311.77,150.59c.17-.46,1.08-1.02,1.45-1.06.35.37-1.08,3.89-1.45,1.06ZM272.09,148.46c2.17-1.18,1.01.82,0,1.58,0,0,0-1.58,0-1.58ZM273.75,151.08c2.66-7.92,2.78-1.42,5.6-.96,1.65,1.72-1.58,4.53,1.28,6.58,7.88,9.78,5.72,13.83-5.55,13.32,2.84-2.56-.88-4.48,2.33-7.53,1.82-4.24-4.79-6.26-3.65-11.41ZM274.26,153.67l-1.1.71c.17-.82.22-1.26,1.1-.71ZM272.09,135.9c.1.15.59.62.48.83-.04-.07-.55-.75-.48-.83ZM155.62,137.09l.48-1.93c1.66.23,1.01,2.33-.48,1.93ZM150.47,133.72c.72-.07,2.31-.93,2.49.14-.7,1.88-3.8,3.11-2.49-.14ZM148.1,132.38c-6.67-10.66,1.44-11.19,6.85-2.45,1.26,3.19-5.53-1.05-6.85,2.45ZM247.28,124.33c-4.17.15-2.13-4.82.84-3.58,1.52,2.78,1.88,2.67,4.27,1.19,23.7-4.84-5.7,22.28-5.11,2.39ZM361.55,107.38c2.58.74-.56,5.06-1.84,2.55.2-.82.72-2.8,1.84-2.55ZM309.98,108.43l1.19-1.55c1.21,1.15.24,2.36-1.19,1.55ZM197.12,107.15c-2.96-.68-.79-5.41,1.68-3.01,3.13,1.34.99,6.06-1.68,3.01ZM376.9,105.51c-.78-.87-1.45-2.15.01-2.73,1.52.93,3.55,5.5-.01,2.73ZM241.56,102.3c-4.2,1.74-1.8-1.54.41-2.29,1.12.1,1.14,2.6-.41,2.29ZM569.27,97.55c3.77-1.32,4.83,3.84.53,2.73-3.57,1.49-3.06-1.04-.53-2.73ZM94.84,97.45c-3.46-3.93,5.71-12.96,7.22-7.24,1.76.16,3.68.91,5.37,2.18.96-.39,1.84-2.18,2.58-.46,3.27,7.24,1.28,1.69,1.38-2.62,6.39-3.15,4.22,9.2,7.06,11.94,8.53,4.78,1.83,11.15-5.17,7.99-7.42,6.41-25.53-4.9-9.16-6.23-4.03-2.54-8.28,1.36-9.28-5.57ZM396.03,87.03c1.66,2.03-.35,2.28-1.77,2.65.05-.9.41-3.07,1.77-2.65ZM156.11,90.48c-3.24-4.69.35-5.38,4.35-3.5,3.59,3.27-1.9,5.1-4.35,3.5ZM142.79,102.94c-9.4-7.25,5.56-30.45,3.57-8.72,2.41-12.03,5.9-9.42,10.92-1.08,3.73-3.58,7.46-.2,8.89,4.14,3.23-.12,5.14,3,8.31,5.15,2.97,2.64-.71,8.29,3.3,10.96,4.06.21,3.18,5.11,6.99,5.31,1.49,4.63-3.22,9.62-7.06,2.74-4.76,1.51,9.34,14.79-1.15,11.99,5.22,10.23-10.99-6.7-17.09-6.07,9.34-8.08,12.03-10.94.56-21.71-4.84-2.56-11.91,1.01-17.23-2.72ZM511.17,87.15c0,2.57-2.91,1.14-4.09.35-.49-3.4,2.8-2.9,4.09-.35ZM139.68,84.92c-1.07,4.53-4.7,6.99-7.28,10.37-3.13-5.76-1.57-15.3,7.28-10.37ZM505.85,83.12c2.48-1.67,1.28,2.75.4,1.31-.08-.34-.44-1.07-.4-1.31ZM461.23,80.96c1.22.48,2.58,1.43,1.42,2.79-1.29-.13-2.63-1.69-1.42-2.79ZM253.1,78.29c-.02-.88-.24-2.74,1.26-2.2.32.88.12,2.84-1.26,2.2ZM134.48,76.7c.64,1.83.26,4.61-2.35,3.46-4.37-1.37-.09-8.81,2.35-3.46ZM501.46,72.41c1.42-2.08,2.92-1.53,4.22.35,2.19-.83,5.62-1,7.53,1.77,1.86,5.23-16.55,8.72-11.75-2.12ZM134.22,65.96c5.47,4.14,8.02,13.05,16.88,7.15,16.3,5.66-5.82,11.54-12.84,7.43-2.55-1.62-1.18-6.35-2.51-9-5.14-1-9.14-9.26-1.53-5.58ZM131.25,59.71c1.59.33,5.42-.49,3.17,2.24-1.72.13-4.73.41-3.17-2.24ZM320.25,57.91c2.89,3.94-.3,5.84-3.65,3.93.14-2.7,1.06-9.16,3.65-3.93ZM318.04,53.35c1.44,3.81-2.84,3.12-2.75.82.71-.18,2.17-.78,2.75-.82ZM132.26,54.7c-.03,5.62-4.69,5.88-5.43-.25-1-5.45,3.25-1.64,5.43.25ZM444.77,47.13c2.4.18,8.68,5.15,3.94,8.33-9.48,4.87-6.71-2.29-3.94-8.33ZM301.19,43.29c5.26,3.22,9.8-7.57,12.01,3.2.12,1.96,1.99,2.86,3.3,3.99-2.13,4.38-4.85,11-6.5,17.3-5.36-1.05-4.95-8.69-2.33-12.39.24-2.27-.96-1.19-1.86-.24-3,3.03-7.36-8.56-4.61-11.86ZM431.97,42.5c-1.1,2.47-4.7,1.02-4.17-1.53.98-.71,4.01.1,4.17,1.53ZM441.05,40.95c5.26,10.69-6.24,14.6-8.96,3.24,2.1-6.46,5.48-3.13,8.96-3.24ZM373.89,40.25c-1.82.09-2.72-.23-1.68-2.15,1.84-.73,2.03.85,1.68,2.15ZM318.38,40.68c.96-7.43,14.78,1.02,2.67,7.5-7.1.16-13.79-12.69-2.67-7.5ZM381.47,32.62c1.72,1.08-.72,3.6-1.14,4.67-3.89.02-2.91-5.32,1.14-4.67ZM359.66,39.8c.04-2.33,3.64-10.42,5.62-5.46-2.1,1.64-3.35,4.73-5.62,5.46ZM130.68,37.01c-.66-6.6,7.34-10.52,7.87-2.21,6.09,3.09,12.5,11.85,5.67,17.96-6.44,9.02-11.77-.35-9.25-5.47-5.22,1.38-5.99-7.18-4.29-10.28ZM430.24,36.23c.63-11.59,9.84-5.88,7.2,2.82-1.62-.19-4.5,2.83-5.54,1.65-.84-2.62-4.3-1.37-1.65-4.47ZM144.99,19.34c2.11-1.25,2.74-4.77,5.47-2.54,2.56-.96,2.96-8.74,7.61-7.45,9.04-4.25,37.2.19,23.69,13.85-8.05,13.34-16.09,25.81-23.3,39.35-1.72,1.74-.11,2.92.68,4.5-1.19,3.55-3.92,3.71-6.61,2.28-6.87,1.79-15.26.68-9.25-6.52-.03-6.47,2.73-1.59,4.98-.15.6-1.67-1.64-3.89-2.62-4.76-5.07-4.5,3.56-5.81,3.27-9.85-5.16-9.48-4.03-8.35,5.28-11.19.16-4.01-6.22-.12-8.42-1.08-7.4-2.4-11.75-15.52-.79-16.45ZM167.16,56.33c.4-5.97,20.92-10.03,9.47-16.58-1.96-4.38,4.98-10.51,9.03-10.16,1.2-2.78-1.05-7.84,3.29-9.48,5.35-8.18,16.71,8.71,13.8-1.65-1.57-2.94,0-5.17,2.91-2.09,16.56,14.1-5.91-20.91,14.54-8.17,4.33-16.45,26.91-5.13,28.16,7.36-1.47,3.83-9.81,1.68-9.72,4.79,1.93.18,4.38.18,4.86,2.59,6.45-6.56,2.83,1.95,8.94,2.38,10.89-8.83,14.18,2.66,5.03,9.25-1.19,9.27-13.08,20.11-5.46,27.43,8.55,4.71-7.1,3.02-1.34,8.27,4.63,4.15-2.08,7.36,1.46,10.95.78,2.22-4.25-.72-3.28,2.36,3.69,4.55-1.55,4.65-4.89,3.74-4.53,3.68,10.46,12.2,3.09,15.54-2.63-2.73-4.37-5.28-7.85-1.34-.88,3.66,7.22.36,6.85,4.47-5.39,6.35-15.92,9.31-21.42,16.31-11.62,2.49-4.89,31.01-20.02,15.07-6.85-10.59-7.11-20.85-2.72-31.3-1.91-1.75-8.91-6.3-1.08-3.47,4.03,1.15-2.55-6.79-5.56-4.94.47-8.13-1.61-16.94-6.35-24.41-4.32-4.69-10.03-.78-14.58-2.03-2.81-3.29-7.09-8.07.27-8.36,4.91-1.63-7.24-1.62-7.44-6.55ZM211.5,19.96c-5.08-4.32-4.86-11.14,1.13-3.8-.4,1.1-1.02,2.77-1.13,3.8ZM386.83,30.17c1.18,2.46-2.71,6.53-4.21,2.94.74-.54,3.41-2.69,4.21-2.94ZM354.9,35.05c1.18-.38,4.14-1.11,5.36-1.44-1.6.85-4.46,5.32-5.36,1.44ZM115.67,47.2c4.53-3.16,13.98,11.5,7.96,11.68-1.48-1.97-2.94-4.61-5.88-3.44-2.23.23.06-2.65.05-4.4.02-1.67-3.61-1.67-2.12-3.84ZM103.59,55.95c-.92-1.2,3.83-3.59,4.05-4.03,4.42,2.85-.81,4.45-4.05,4.03ZM108.07,61.25c-2.38,2.47-5.91,1.1-4.78-2.51,2.55-2.23,7.22-1.97,4.78,2.51ZM89.84,68.81c2.26-5.37,9.21-9.06,8.71-1.74.07,2.9-3.2,2.03-4.48,3.09-.71,4.91-9.85,1.69-4.24-1.36ZM103.06,79.01c-8.07,2.81-7.96-12.32-1.07-8.93,2.88.75,4.09,6.07,7.57,4.65-.14-1.7-2.57-10.14,1.13-7.02-.34,5.29,8.61,5.13,3.04,10.68-3.03-1.09-13.9,7.81-10.67.61ZM123.13,75.9c-7.29-.79,1.52-11.75,4.86-6.74,1.41,4.02-1.66,14-4.86,6.74ZM521.67,77c3.95,5.38-9.47,1.41-5.1-1.28,1.75-.27,3.31,1.58,5.1,1.28ZM84.19,92.22c-1.02-18.11,17.34-9.05,14.45-3.94-4.54,1.22-8,15.46-12.5,9.4-1.89-2.65-4.14-1.72-1.95-5.46ZM120.04,91.3c0-.72.71-2,1.39-.94,5.83,2.55-3.55-8,6.92-5.16,2.13,10.9.67,19.41-8.31,6.1ZM116.06,85.82c1.6.77.28,3.34-.04,4.38-1.52-.94-3.79-5.38.04-4.38ZM244.43,87.52c1.96.39,1.51,1.71-.33,2.16-2.46-.63-1.55-2.04.33-2.16ZM244.35,90.72c2.08-1.26,4.66,3.46,2.7,3.51-.93-.82-3.39-2.07-2.7-3.51ZM486.17,91.88c.7.53,2.4,1.4,2.97,1.99-1.03,1.47-3.82-.52-2.97-1.99ZM549.86,105.71c.55-1.03,1.88-.38,2.38.35-.15,1.43-2.01.05-2.38-.35ZM131.18,110.23c-.52,2.87-4.73.94-5.8-.42.86-5.06,4.4-4.4,5.8.42ZM306.11,111.23c.29-.1,1.19-2.12,1.49-1.1-.12,1.07-.36,1.56-1.49,1.1ZM163.16,116.47c-5.9,2.36-.56-7.54.57-2.65.21.91.16,1.98-.57,2.65ZM14.77,132.65c-.75.32-4.34-.86-2.55-2.07.34.32,2.23,1.69,2.55,2.07ZM17.2,142.39c1-.65,2.7-.65,2.8.85-.75.58-2.47-.07-2.8-.85ZM315.04,142.78l-.6-.83c.57.17,1.14.13.6.83ZM319.2,147.15v-1.1c.41.48.81.78,0,1.1ZM318.06,147.82c2.56-1.04.78.77.02,1.71.32-.35-.02-1.32-.02-1.71ZM67.29,148.45c2.14.43,1.28,1.92-.17,1.93-.24-.54-1.42-2.43.17-1.93ZM37.24,151.22c.51-1.19,1.41-.72,2.42-1.16,3.95-1.59-1.79,4.9-2.42,1.16ZM73.12,156.76c-1.78,2.6-1.63-1.57-1.49-2.59.11.11,1.41,2.24,1.49,2.59ZM298.96,156.32c.96-.65,1.34.57,1.19,1.34-1.01.31-1.05-.62-1.19-1.34ZM273.43,160.65c.68,6.41-7.35,9.94-6.1,1-.62-3.32,9.39-7.27,6.1-1ZM23.29,157.78c.74,1.41-1.3,1.46-1.52.24,0,0,1.52-.24,1.52-.24ZM71.82,161.72c-.15-1.71.94-1.56,2.13-.99.13,1.24-1.24,3.11-2.13.99ZM17.63,160.7l1.31.83c-1.2.36-1.78.79-1.31-.83ZM182.19,172.37c-.56-2.23,1.83.12,2.55.35-.15,1.08-2.05-.2-2.55-.35ZM185.5,180.52c1.5-1.12,1.54-.95,1.46.83-.7,0-1.62.21-1.46-.83ZM285.15,195.76c-.09-.34.34-.19.48-.48.27.25-.22.74-.48.48ZM237.5,196.59c-.45-.36-.04-.19.24-.24.03.21-.03.27-.24.24ZM238.33,196.59c.68.42-.7.4-.48,0,0,0,.48,0,.48,0ZM447.78,260.82h.6c-.13.05-.65.27-.6,0ZM35.05,229.36c-.3.06-.57-.05-.65-.36.22-.06,1.18.16.65.36ZM185.03,234.45c.04.24-.06.26-.27.24-.04-.24.06-.26.27-.24ZM243.3,235.31c.09.23-.2.38-.36.48-.01-.31-.05-.57.36-.48ZM171.72,242.93c.21-.42.51-.12.48.24,0,0-.48-.24-.48-.24ZM399.56,251.86c.37.19.23.35,0,.6,0,0,0-.6,0-.6ZM33.29,260.08c.09.52-.22.05-.42,0,0,0,.42,0,.42,0ZM400.46,261.65c.24.19.39.25,0,.36-.39-.11-.24-.17,0-.36ZM139.79,263.83c-.13.18-.22.52-.48.27.1-.14.28-.33.48-.27ZM468.02,276.06c1.69.44-1.39,1.89-.3.36,0,0,.3-.36.3-.36ZM10.02,285.38c-.16-.6.52.25.65.24,0,0-.65-.24-.65-.24ZM400.16,361.78c-.06.44.8,1.85-.3,1.49,0,0,.3-1.49.3-1.49ZM164.58,352.26c0,.68.3,1.98.16,2.69-1.85.42-.88-2.07-.16-2.69ZM71.63,152.21c.4.9-.04,1.4-.89,1.7.07-.93-.83-2.49.89-1.7ZM166.07,336.8c.61.96-.08,1.06.04,1.88-.31,2.31-2.16-2.53-.04-1.88ZM83.79,170.32c.44,1.21,2,2.18,2.72,3.25.51,4.81-13.44-9.51-2.72-3.25ZM224.79,365.65l1.34,1.19c-1.11-.05-2.11.32-1.34-1.19ZM398.37,274.72c.06.44-.13.08-.3,0,0,0,.3,0,.3,0ZM2.84,262.52c.02.19,0,.28-.22.24,0,0,.22-.24.22-.24ZM398.97,259.72l-.3.12c-.08-.19.21-.1.3-.12ZM243.3,199.63v.24c0-.09-.24-.3,0-.24ZM238.96,196.59c-.22-.07-.74-.26-.86-.48,0,0,.86.48.86.48Z"/>
                </svg>
                <div 
                  className="timezone-pin" 
                  style={{
                    top: getTimezoneInfo(pendingTimeZone).top,
                    left: getTimezoneInfo(pendingTimeZone).left
                  }}
                ></div>
              </div>
            </div>
            
            <div className="timezone-field">
              <label className="timezone-field-label">Time Zone:</label>
              <div className="timezone-field-value">{getTimezoneInfo(pendingTimeZone).zone}</div>
            </div>
            
            <div className="timezone-field">
              <label className="timezone-field-label">Closest City:</label>
              <select 
                className="timezone-field-input"
                value={pendingTimeZone}
                onChange={(e) => setPendingTimeZone(e.target.value)}
                style={{
                  padding: '0.75rem',
                  fontSize: '1rem',
                  border: '2px solid #e9ecef',
                  borderRadius: '8px',
                  fontFamily: 'Roboto, sans-serif',
                  width: '100%',
                  cursor: 'pointer'
                }}
              >
                <optgroup label="Americas">
                  <option value="America/Los_Angeles (US)">Los Angeles, CA - United States (GMT-8)</option>
                  <option value="America/Denver (US)">Denver, CO - United States (GMT-7)</option>
                  <option value="America/Chicago (US)">Chicago, IL - United States (GMT-6)</option>
                  <option value="America/New_York (US)">New York, NY - United States (GMT-5)</option>
                  <option value="America/Sao_Paulo (BR)">São Paulo - Brazil (GMT-3)</option>
                  <option value="America/Mexico_City (MX)">Mexico City - Mexico (GMT-6)</option>
                </optgroup>
                <optgroup label="Europe">
                  <option value="Europe/London (UK)">London - United Kingdom (GMT+0)</option>
                  <option value="Europe/Paris (FR)">Paris - France (GMT+1)</option>
                  <option value="Europe/Berlin (DE)">Berlin - Germany (GMT+1)</option>
                  <option value="Europe/Moscow (RU)">Moscow - Russia (GMT+3)</option>
                </optgroup>
                <optgroup label="Africa">
                  <option value="Africa/Casablanca (MA)">Casablanca - Morocco (GMT+0)</option>
                  <option value="Africa/Cairo (EG)">Cairo - Egypt (GMT+2)</option>
                  <option value="Africa/Lagos (NG)">Lagos - Nigeria (GMT+1)</option>
                  <option value="Africa/Johannesburg (ZA)">Johannesburg - South Africa (GMT+2)</option>
                </optgroup>
                <optgroup label="Asia">
                  <option value="Asia/Dubai (AE)">Dubai - UAE (GMT+4)</option>
                  <option value="Asia/Kolkata (IN)">Mumbai - India (GMT+5:30)</option>
                  <option value="Asia/Hong_Kong (HK)">Hong Kong (GMT+8)</option>
                  <option value="Asia/Singapore (SG)">Singapore (GMT+8)</option>
                  <option value="Asia/Tokyo (JP)">Tokyo - Japan (GMT+9)</option>
                  <option value="Asia/Seoul (KR)">Seoul - South Korea (GMT+9)</option>
                </optgroup>
                <optgroup label="Oceania">
                  <option value="Australia/Sydney (AU)">Sydney - Australia (GMT+10)</option>
                  <option value="Pacific/Auckland (NZ)">Auckland - New Zealand (GMT+12)</option>
                </optgroup>
              </select>
            </div>
            
            <div className="timezone-modal-actions">
              <button 
                className="timezone-modal-btn timezone-modal-btn-secondary"
                onClick={() => {
                  setPendingTimeZone(timeZone); // Reset to current
                  setShowTimezoneModal(false);
                }}
              >
                Cancel
              </button>
              <button 
                className="timezone-modal-btn timezone-modal-btn-primary"
                onClick={() => {
                  setTimeZone(pendingTimeZone); // Apply the pending timezone
                  setShowTimezoneModal(false);
                }}
              >
                Apply
              </button>
            </div>
          </div>
        </div>
      )}
      
      {/* Sort/Filter Modal */}
      {showSortModal && (
        <div className="timezone-modal-overlay" onClick={() => setShowSortModal(false)}>
          <div className="timezone-modal sort-modal" onClick={(e) => e.stopPropagation()}>
            <div className="timezone-modal-header">
              <h2 className="timezone-modal-title">Sort / Filter</h2>
              <button 
                className="timezone-modal-close"
                onClick={() => setShowSortModal(false)}
              >
                ×
              </button>
            </div>
            
            <div className="sort-modal-content">
              <div className="sort-section">
                <h3 className="sort-section-label">Sort By</h3>
                <div className="sort-options-list">
                  <div 
                    className={`sort-modal-option ${sortBy === 'day' ? 'active' : ''}`}
                    onClick={() => setSortBy('day')}
                  >
                    <div className="sort-option-check"></div>
                    <div className="sort-option-label">Day of Week</div>
                  </div>
                  <div 
                    className={`sort-modal-option ${sortBy === 'time' ? 'active' : ''}`}
                    onClick={() => setSortBy('time')}
                  >
                    <div className="sort-option-check"></div>
                    <div className="sort-option-label">Time of Day</div>
                  </div>
                  <div 
                    className={`sort-modal-option ${sortBy === 'language' ? 'active' : ''}`}
                    onClick={() => setSortBy('language')}
                  >
                    <div className="sort-option-check"></div>
                    <div className="sort-option-label">Language</div>
                  </div>
                </div>
              </div>
              
              <div className="sort-section">
                <h3 className="sort-section-label">Order</h3>
                <div className="sort-options-list">
                  <div 
                    className={`sort-modal-option ${sortOrder === 'asc' ? 'active' : ''}`}
                    onClick={() => setSortOrder('asc')}
                  >
                    <div className="sort-option-check"></div>
                    <div className="sort-option-label">Ascending</div>
                  </div>
                  <div 
                    className={`sort-modal-option ${sortOrder === 'desc' ? 'active' : ''}`}
                    onClick={() => setSortOrder('desc')}
                  >
                    <div className="sort-option-check"></div>
                    <div className="sort-option-label">Descending</div>
                  </div>
                </div>
              </div>
              
              <div className="sort-section filter-section">
                <h3 className="sort-section-label">Filter by Age Group</h3>
                <div className="filter-options-list">
                  {uniqueAgeGroups.map(ageGroup => {
                    const count = ageGroupCounts[ageGroup] || 0;
                    const isSelected = selectedAgeGroupsFilter.includes(ageGroup);
                    return (
                      <div 
                        key={ageGroup}
                        className={`filter-checkbox-option ${isSelected ? 'selected' : ''}`}
                        onClick={() => {
                          if (isSelected) {
                            setSelectedAgeGroupsFilter(prev => prev.filter(a => a !== ageGroup));
                          } else {
                            setSelectedAgeGroupsFilter(prev => [...prev, ageGroup]);
                          }
                        }}
                      >
                        <div className={`filter-checkbox ${isSelected ? 'checked' : ''}`}>
                          {isSelected && <span>✓</span>}
                        </div>
                        <div className="filter-option-label">{ageGroup}</div>
                        <div className="filter-option-count">{count}</div>
                      </div>
                    );
                  })}
                </div>
                {selectedAgeGroupsFilter.length > 0 && (
                  <button 
                    className="clear-filter-btn"
                    onClick={() => setSelectedAgeGroupsFilter([])}
                  >
                    Clear Age Filter
                  </button>
                )}
              </div>
            </div>
            
            <div className="timezone-modal-actions">
              <button 
                className="timezone-modal-btn timezone-modal-btn-secondary"
                onClick={() => setShowSortModal(false)}
              >
                Cancel
              </button>
              <button 
                className="timezone-modal-btn timezone-modal-btn-primary"
                onClick={() => setShowSortModal(false)}
              >
                Apply
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};


// Component ready for use - rendered by HTML file