<?php
/**
 * Premium Currency Converter for WordPress
 * Compatible with Code Snippets plugin
 * Use shortcode: [currency_converter]
 */

function premium_currency_converter_shortcode($atts) {
    // Generate unique ID for this instance
    $converter_id = 'currency_converter_' . uniqid();
    
    // Comprehensive currencies list with country flags
    $currencies = [
        'USD' => ['name' => 'US Dollar', 'flag' => '🇺🇸', 'country' => 'United States'],
        'EUR' => ['name' => 'Euro', 'flag' => '🇪🇺', 'country' => 'European Union'],
        'GBP' => ['name' => 'British Pound', 'flag' => '🇬🇧', 'country' => 'United Kingdom'],
        'JPY' => ['name' => 'Japanese Yen', 'flag' => '🇯🇵', 'country' => 'Japan'],
        'AUD' => ['name' => 'Australian Dollar', 'flag' => '🇦🇺', 'country' => 'Australia'],
        'CAD' => ['name' => 'Canadian Dollar', 'flag' => '🇨🇦', 'country' => 'Canada'],
        'CHF' => ['name' => 'Swiss Franc', 'flag' => '🇨🇭', 'country' => 'Switzerland'],
        'CNY' => ['name' => 'Chinese Yuan', 'flag' => '🇨🇳', 'country' => 'China'],
        'SEK' => ['name' => 'Swedish Krona', 'flag' => '🇸🇪', 'country' => 'Sweden'],
        'NZD' => ['name' => 'New Zealand Dollar', 'flag' => '🇳🇿', 'country' => 'New Zealand'],
        'MXN' => ['name' => 'Mexican Peso', 'flag' => '🇲🇽', 'country' => 'Mexico'],
        'SGD' => ['name' => 'Singapore Dollar', 'flag' => '🇸🇬', 'country' => 'Singapore'],
        'HKD' => ['name' => 'Hong Kong Dollar', 'flag' => '🇭🇰', 'country' => 'Hong Kong'],
        'NOK' => ['name' => 'Norwegian Krone', 'flag' => '🇳🇴', 'country' => 'Norway'],
        'TRY' => ['name' => 'Turkish Lira', 'flag' => '🇹🇷', 'country' => 'Turkey'],
        'RUB' => ['name' => 'Russian Ruble', 'flag' => '🇷🇺', 'country' => 'Russia'],
        'INR' => ['name' => 'Indian Rupee', 'flag' => '🇮🇳', 'country' => 'India'],
        'BRL' => ['name' => 'Brazilian Real', 'flag' => '🇧🇷', 'country' => 'Brazil'],
        'ZAR' => ['name' => 'South African Rand', 'flag' => '🇿🇦', 'country' => 'South Africa'],
        'KRW' => ['name' => 'South Korean Won', 'flag' => '🇰🇷', 'country' => 'South Korea'],
        'AED' => ['name' => 'UAE Dirham', 'flag' => '🇦🇪', 'country' => 'United Arab Emirates'],
        'AFN' => ['name' => 'Afghan Afghani', 'flag' => '🇦🇫', 'country' => 'Afghanistan'],
        'ALL' => ['name' => 'Albanian Lek', 'flag' => '🇦🇱', 'country' => 'Albania'],
        'AMD' => ['name' => 'Armenian Dram', 'flag' => '🇦🇲', 'country' => 'Armenia'],
        'ANG' => ['name' => 'Netherlands Antillean Guilder', 'flag' => '🇳🇱', 'country' => 'Netherlands Antilles'],
        'AOA' => ['name' => 'Angolan Kwanza', 'flag' => '🇦🇴', 'country' => 'Angola'],
        'ARS' => ['name' => 'Argentine Peso', 'flag' => '🇦🇷', 'country' => 'Argentina'],
        'AWG' => ['name' => 'Aruban Florin', 'flag' => '🇦🇼', 'country' => 'Aruba'],
        'AZN' => ['name' => 'Azerbaijani Manat', 'flag' => '🇦🇿', 'country' => 'Azerbaijan'],
        'BAM' => ['name' => 'Bosnia and Herzegovina Mark', 'flag' => '🇧🇦', 'country' => 'Bosnia and Herzegovina'],
        'BBD' => ['name' => 'Barbadian Dollar', 'flag' => '🇧🇧', 'country' => 'Barbados'],
        'BDT' => ['name' => 'Bangladeshi Taka', 'flag' => '🇧🇩', 'country' => 'Bangladesh'],
        'BGN' => ['name' => 'Bulgarian Lev', 'flag' => '🇧🇬', 'country' => 'Bulgaria'],
        'BHD' => ['name' => 'Bahraini Dinar', 'flag' => '🇧🇭', 'country' => 'Bahrain'],
        'BIF' => ['name' => 'Burundian Franc', 'flag' => '🇧🇮', 'country' => 'Burundi'],
        'BMD' => ['name' => 'Bermudian Dollar', 'flag' => '🇧🇲', 'country' => 'Bermuda'],
        'BND' => ['name' => 'Brunei Dollar', 'flag' => '🇧🇳', 'country' => 'Brunei'],
        'BOB' => ['name' => 'Bolivian Boliviano', 'flag' => '🇧🇴', 'country' => 'Bolivia'],
        'BSD' => ['name' => 'Bahamian Dollar', 'flag' => '🇧🇸', 'country' => 'Bahamas'],
        'BTN' => ['name' => 'Bhutanese Ngultrum', 'flag' => '🇧🇹', 'country' => 'Bhutan'],
        'BWP' => ['name' => 'Botswana Pula', 'flag' => '🇧🇼', 'country' => 'Botswana'],
        'BYN' => ['name' => 'Belarusian Ruble', 'flag' => '🇧🇾', 'country' => 'Belarus'],
        'BZD' => ['name' => 'Belize Dollar', 'flag' => '🇧🇿', 'country' => 'Belize'],
        'CDF' => ['name' => 'Congolese Franc', 'flag' => '🇨🇩', 'country' => 'Democratic Republic of Congo'],
        'CLP' => ['name' => 'Chilean Peso', 'flag' => '🇨🇱', 'country' => 'Chile'],
        'COP' => ['name' => 'Colombian Peso', 'flag' => '🇨🇴', 'country' => 'Colombia'],
        'CRC' => ['name' => 'Costa Rican Colón', 'flag' => '🇨🇷', 'country' => 'Costa Rica'],
        'CUP' => ['name' => 'Cuban Peso', 'flag' => '🇨🇺', 'country' => 'Cuba'],
        'CVE' => ['name' => 'Cape Verdean Escudo', 'flag' => '🇨🇻', 'country' => 'Cape Verde'],
        'CZK' => ['name' => 'Czech Koruna', 'flag' => '🇨🇿', 'country' => 'Czech Republic'],
        'DJF' => ['name' => 'Djiboutian Franc', 'flag' => '🇩🇯', 'country' => 'Djibouti'],
        'DKK' => ['name' => 'Danish Krone', 'flag' => '🇩🇰', 'country' => 'Denmark'],
        'DOP' => ['name' => 'Dominican Peso', 'flag' => '🇩🇴', 'country' => 'Dominican Republic'],
        'DZD' => ['name' => 'Algerian Dinar', 'flag' => '🇩🇿', 'country' => 'Algeria'],
        'EGP' => ['name' => 'Egyptian Pound', 'flag' => '🇪🇬', 'country' => 'Egypt'],
        'ERN' => ['name' => 'Eritrean Nakfa', 'flag' => '🇪🇷', 'country' => 'Eritrea'],
        'ETB' => ['name' => 'Ethiopian Birr', 'flag' => '🇪🇹', 'country' => 'Ethiopia'],
        'FJD' => ['name' => 'Fijian Dollar', 'flag' => '🇫🇯', 'country' => 'Fiji'],
        'FKP' => ['name' => 'Falkland Islands Pound', 'flag' => '🇫🇰', 'country' => 'Falkland Islands'],
        'GEL' => ['name' => 'Georgian Lari', 'flag' => '🇬🇪', 'country' => 'Georgia'],
        'GGP' => ['name' => 'Guernsey Pound', 'flag' => '🇬🇬', 'country' => 'Guernsey'],
        'GHS' => ['name' => 'Ghanaian Cedi', 'flag' => '🇬🇭', 'country' => 'Ghana'],
        'GIP' => ['name' => 'Gibraltar Pound', 'flag' => '🇬🇮', 'country' => 'Gibraltar'],
        'GMD' => ['name' => 'Gambian Dalasi', 'flag' => '🇬🇲', 'country' => 'Gambia'],
        'GNF' => ['name' => 'Guinean Franc', 'flag' => '🇬🇳', 'country' => 'Guinea'],
        'GTQ' => ['name' => 'Guatemalan Quetzal', 'flag' => '🇬🇹', 'country' => 'Guatemala'],
        'GYD' => ['name' => 'Guyanese Dollar', 'flag' => '🇬🇾', 'country' => 'Guyana'],
        'HNL' => ['name' => 'Honduran Lempira', 'flag' => '🇭🇳', 'country' => 'Honduras'],
        'HRK' => ['name' => 'Croatian Kuna', 'flag' => '🇭🇷', 'country' => 'Croatia'],
        'HTG' => ['name' => 'Haitian Gourde', 'flag' => '🇭🇹', 'country' => 'Haiti'],
        'HUF' => ['name' => 'Hungarian Forint', 'flag' => '🇭🇺', 'country' => 'Hungary'],
        'IDR' => ['name' => 'Indonesian Rupiah', 'flag' => '🇮🇩', 'country' => 'Indonesia'],
        'ILS' => ['name' => 'Israeli New Shekel', 'flag' => '🇮🇱', 'country' => 'Israel'],
        'IMP' => ['name' => 'Isle of Man Pound', 'flag' => '🇮🇲', 'country' => 'Isle of Man'],
        'IQD' => ['name' => 'Iraqi Dinar', 'flag' => '🇮🇶', 'country' => 'Iraq'],
        'IRR' => ['name' => 'Iranian Rial', 'flag' => '🇮🇷', 'country' => 'Iran'],
        'ISK' => ['name' => 'Icelandic Króna', 'flag' => '🇮🇸', 'country' => 'Iceland'],
        'JEP' => ['name' => 'Jersey Pound', 'flag' => '🇯🇪', 'country' => 'Jersey'],
        'JMD' => ['name' => 'Jamaican Dollar', 'flag' => '🇯🇲', 'country' => 'Jamaica'],
        'JOD' => ['name' => 'Jordanian Dinar', 'flag' => '🇯🇴', 'country' => 'Jordan'],
        'KES' => ['name' => 'Kenyan Shilling', 'flag' => '🇰🇪', 'country' => 'Kenya'],
        'KGS' => ['name' => 'Kyrgyzstani Som', 'flag' => '🇰🇬', 'country' => 'Kyrgyzstan'],
        'KHR' => ['name' => 'Cambodian Riel', 'flag' => '🇰🇭', 'country' => 'Cambodia'],
        'KMF' => ['name' => 'Comorian Franc', 'flag' => '🇰🇲', 'country' => 'Comoros'],
        'KPW' => ['name' => 'North Korean Won', 'flag' => '🇰🇵', 'country' => 'North Korea'],
        'KWD' => ['name' => 'Kuwaiti Dinar', 'flag' => '🇰🇼', 'country' => 'Kuwait'],
        'KYD' => ['name' => 'Cayman Islands Dollar', 'flag' => '🇰🇾', 'country' => 'Cayman Islands'],
        'KZT' => ['name' => 'Kazakhstani Tenge', 'flag' => '🇰🇿', 'country' => 'Kazakhstan'],
        'LAK' => ['name' => 'Lao Kip', 'flag' => '🇱🇦', 'country' => 'Laos'],
        'LBP' => ['name' => 'Lebanese Pound', 'flag' => '🇱🇧', 'country' => 'Lebanon'],
        'LKR' => ['name' => 'Sri Lankan Rupee', 'flag' => '🇱🇰', 'country' => 'Sri Lanka'],
        'LRD' => ['name' => 'Liberian Dollar', 'flag' => '🇱🇷', 'country' => 'Liberia'],
        'LSL' => ['name' => 'Lesotho Loti', 'flag' => '🇱🇸', 'country' => 'Lesotho'],
        'LYD' => ['name' => 'Libyan Dinar', 'flag' => '🇱🇾', 'country' => 'Libya'],
        'MAD' => ['name' => 'Moroccan Dirham', 'flag' => '🇲🇦', 'country' => 'Morocco'],
        'MDL' => ['name' => 'Moldovan Leu', 'flag' => '🇲🇩', 'country' => 'Moldova'],
        'MGA' => ['name' => 'Malagasy Ariary', 'flag' => '🇲🇬', 'country' => 'Madagascar'],
        'MKD' => ['name' => 'Macedonian Denar', 'flag' => '🇲🇰', 'country' => 'North Macedonia'],
        'MMK' => ['name' => 'Myanmar Kyat', 'flag' => '🇲🇲', 'country' => 'Myanmar'],
        'MNT' => ['name' => 'Mongolian Tugrik', 'flag' => '🇲🇳', 'country' => 'Mongolia'],
        'MOP' => ['name' => 'Macanese Pataca', 'flag' => '🇲🇴', 'country' => 'Macau'],
        'MRU' => ['name' => 'Mauritanian Ouguiya', 'flag' => '🇲🇷', 'country' => 'Mauritania'],
        'MUR' => ['name' => 'Mauritian Rupee', 'flag' => '🇲🇺', 'country' => 'Mauritius'],
        'MVR' => ['name' => 'Maldivian Rufiyaa', 'flag' => '🇲🇻', 'country' => 'Maldives'],
        'MWK' => ['name' => 'Malawian Kwacha', 'flag' => '🇲🇼', 'country' => 'Malawi'],
        'MYR' => ['name' => 'Malaysian Ringgit', 'flag' => '🇲🇾', 'country' => 'Malaysia'],
        'MZN' => ['name' => 'Mozambican Metical', 'flag' => '🇲🇿', 'country' => 'Mozambique'],
        'NAD' => ['name' => 'Namibian Dollar', 'flag' => '🇳🇦', 'country' => 'Namibia'],
        'NGN' => ['name' => 'Nigerian Naira', 'flag' => '🇳🇬', 'country' => 'Nigeria'],
        'NIO' => ['name' => 'Nicaraguan Córdoba', 'flag' => '🇳🇮', 'country' => 'Nicaragua'],
        'NPR' => ['name' => 'Nepalese Rupee', 'flag' => '🇳🇵', 'country' => 'Nepal'],
        'OMR' => ['name' => 'Omani Rial', 'flag' => '🇴🇲', 'country' => 'Oman'],
        'PAB' => ['name' => 'Panamanian Balboa', 'flag' => '🇵🇦', 'country' => 'Panama'],
        'PEN' => ['name' => 'Peruvian Sol', 'flag' => '🇵🇪', 'country' => 'Peru'],
        'PGK' => ['name' => 'Papua New Guinean Kina', 'flag' => '🇵🇬', 'country' => 'Papua New Guinea'],
        'PHP' => ['name' => 'Philippine Peso', 'flag' => '🇵🇭', 'country' => 'Philippines'],
        'PKR' => ['name' => 'Pakistani Rupee', 'flag' => '🇵🇰', 'country' => 'Pakistan'],
        'PLN' => ['name' => 'Polish Złoty', 'flag' => '🇵🇱', 'country' => 'Poland'],
        'PYG' => ['name' => 'Paraguayan Guaraní', 'flag' => '🇵🇾', 'country' => 'Paraguay'],
        'QAR' => ['name' => 'Qatari Riyal', 'flag' => '🇶🇦', 'country' => 'Qatar'],
        'RON' => ['name' => 'Romanian Leu', 'flag' => '🇷🇴', 'country' => 'Romania'],
        'RSD' => ['name' => 'Serbian Dinar', 'flag' => '🇷🇸', 'country' => 'Serbia'],
        'RWF' => ['name' => 'Rwandan Franc', 'flag' => '🇷🇼', 'country' => 'Rwanda'],
        'SAR' => ['name' => 'Saudi Riyal', 'flag' => '🇸🇦', 'country' => 'Saudi Arabia'],
        'SBD' => ['name' => 'Solomon Islands Dollar', 'flag' => '🇸🇧', 'country' => 'Solomon Islands'],
        'SCR' => ['name' => 'Seychellois Rupee', 'flag' => '🇸🇨', 'country' => 'Seychelles'],
        'SDG' => ['name' => 'Sudanese Pound', 'flag' => '🇸🇩', 'country' => 'Sudan'],
        'SHP' => ['name' => 'Saint Helena Pound', 'flag' => '🇸🇭', 'country' => 'Saint Helena'],
        'SLE' => ['name' => 'Sierra Leonean Leone', 'flag' => '🇸🇱', 'country' => 'Sierra Leone'],
        'SOS' => ['name' => 'Somali Shilling', 'flag' => '🇸🇴', 'country' => 'Somalia'],
        'SRD' => ['name' => 'Surinamese Dollar', 'flag' => '🇸🇷', 'country' => 'Suriname'],
        'STN' => ['name' => 'São Tomé and Príncipe Dobra', 'flag' => '🇸🇹', 'country' => 'São Tomé and Príncipe'],
        'SYP' => ['name' => 'Syrian Pound', 'flag' => '🇸🇾', 'country' => 'Syria'],
        'SZL' => ['name' => 'Swazi Lilangeni', 'flag' => '🇸🇿', 'country' => 'Eswatini'],
        'THB' => ['name' => 'Thai Baht', 'flag' => '🇹🇭', 'country' => 'Thailand'],
        'TJS' => ['name' => 'Tajikistani Somoni', 'flag' => '🇹🇯', 'country' => 'Tajikistan'],
        'TMT' => ['name' => 'Turkmenistani Manat', 'flag' => '🇹🇲', 'country' => 'Turkmenistan'],
        'TND' => ['name' => 'Tunisian Dinar', 'flag' => '🇹🇳', 'country' => 'Tunisia'],
        'TOP' => ['name' => 'Tongan Paʻanga', 'flag' => '🇹🇴', 'country' => 'Tonga'],
        'TTD' => ['name' => 'Trinidad and Tobago Dollar', 'flag' => '🇹🇹', 'country' => 'Trinidad and Tobago'],
        'TVD' => ['name' => 'Tuvaluan Dollar', 'flag' => '🇹🇻', 'country' => 'Tuvalu'],
        'TWD' => ['name' => 'New Taiwan Dollar', 'flag' => '🇹🇼', 'country' => 'Taiwan'],
        'TZS' => ['name' => 'Tanzanian Shilling', 'flag' => '🇹🇿', 'country' => 'Tanzania'],
        'UAH' => ['name' => 'Ukrainian Hryvnia', 'flag' => '🇺🇦', 'country' => 'Ukraine'],
        'UGX' => ['name' => 'Ugandan Shilling', 'flag' => '🇺🇬', 'country' => 'Uganda'],
        'UYU' => ['name' => 'Uruguayan Peso', 'flag' => '🇺🇾', 'country' => 'Uruguay'],
        'UZS' => ['name' => 'Uzbekistani Som', 'flag' => '🇺🇿', 'country' => 'Uzbekistan'],
        'VED' => ['name' => 'Venezuelan Bolívar Digital', 'flag' => '🇻🇪', 'country' => 'Venezuela'],
        'VES' => ['name' => 'Venezuelan Bolívar Soberano', 'flag' => '🇻🇪', 'country' => 'Venezuela'],
        'VND' => ['name' => 'Vietnamese Dong', 'flag' => '🇻🇳', 'country' => 'Vietnam'],
        'VUV' => ['name' => 'Vanuatu Vatu', 'flag' => '🇻🇺', 'country' => 'Vanuatu'],
        'WST' => ['name' => 'Samoan Tala', 'flag' => '🇼🇸', 'country' => 'Samoa'],
        'XAF' => ['name' => 'Central African CFA Franc', 'flag' => '🌍', 'country' => 'Central Africa'],
        'XCD' => ['name' => 'East Caribbean Dollar', 'flag' => '🌍', 'country' => 'Eastern Caribbean'],
        'XDR' => ['name' => 'Special Drawing Rights', 'flag' => '🌍', 'country' => 'International'],
        'XOF' => ['name' => 'West African CFA Franc', 'flag' => '🌍', 'country' => 'West Africa'],
        'XPF' => ['name' => 'CFP Franc', 'flag' => '🌍', 'country' => 'French Pacific'],
        'YER' => ['name' => 'Yemeni Rial', 'flag' => '🇾🇪', 'country' => 'Yemen'],
        'ZMW' => ['name' => 'Zambian Kwacha', 'flag' => '🇿🇲', 'country' => 'Zambia'],
        'ZWL' => ['name' => 'Zimbabwean Dollar', 'flag' => '🇿🇼', 'country' => 'Zimbabwe']
    ];
    
    ob_start();
    ?>
    
    <div id="<?php echo $converter_id; ?>" class="premium-currency-converter">
        <style>
            .premium-currency-converter {
                max-width: 900px;
                margin: 0 auto;
                padding: 20px;
                background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
                border-radius: 16px;
                box-sizing: border-box;
                overflow: visible;
            }
            
            .converter-container {
                background: #FFFFFF;
                border-radius: 20px;
                padding: 32px;
                box-shadow: 0 20px 50px rgba(100, 59, 223, 0.1), 0 8px 20px rgba(0, 0, 0, 0.06);
                position: relative;
                overflow: visible;
                border: 1px solid rgba(100, 59, 223, 0.1);
            }
            
            .converter-container::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg, #643BDF, #8B5CF6, #A855F7);
            }
            
            .converter-title {
                text-align: center;
                margin: 0 0 32px 0;
                color: #1F2937;
                font-size: 28px;
                font-weight: 700;
                letter-spacing: -0.02em;
            }
            
            .converter-form {
                display: grid;
                grid-template-columns: 1fr 60px 1fr;
                gap: 16px;
                margin-bottom: 32px;
                align-items: end;
            }
            
            .form-group {
                display: flex;
                flex-direction: column;
            }
            
            .form-group.amount-group {
                grid-column: 1 / -1;
                order: -1;
            }
            
            .form-label {
                font-size: 14px;
                font-weight: 600;
                color: #643BDF;
                margin-bottom: 8px;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                display: flex;
                align-items: center;
                gap: 6px;
            }
            
            .search-hint {
                font-size: 12px;
                color: #9CA3AF;
                font-weight: 400;
                text-transform: none;
                letter-spacing: normal;
                margin-left: auto;
            }
            
            .form-select,
            .form-input {
                padding: 16px 20px;
                border: 2px solid #E5E7EB;
                border-radius: 12px;
                font-size: 16px;
                color: #1F2937;
                background: #FFFFFF;
                transition: all 0.3s ease;
                outline: none;
                font-family: inherit;
            }
            
            .amount-group .form-input {
                padding: 17px 22px;
                font-size: 17px;
                font-weight: 500;
                text-align: left;
                background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
                border: 2px solid #643BDF;
                color: #000000;
                letter-spacing: 0.3px;
                box-shadow: 0 2px 8px rgba(100, 59, 223, 0.08);
                border-radius: 12px;
            }
            
            .amount-group .form-input:focus {
                border-color: #8B5CF6;
                box-shadow: 0 0 0 3px rgba(100, 59, 223, 0.15), 0 3px 10px rgba(100, 59, 223, 0.15);
                transform: translateY(-1px);
                background: linear-gradient(135deg, #FFFFFF, #F8FAFC);
                color: #000000;
            }
            
            .amount-group .form-input:hover {
                border-color: #8B5CF6;
                box-shadow: 0 3px 12px rgba(100, 59, 223, 0.12);
                transform: translateY(-0.5px);
            }
            
            .amount-group .form-input::placeholder {
                color: #A855F7;
                opacity: 0.6;
            }
            
            .currency-select-container {
                position: relative;
                overflow: visible;
                z-index: 1;
            }
            
            .currency-search-input {
                width: 100%;
                padding: 16px 50px 16px 20px;
                border: 2px solid #E5E7EB;
                border-radius: 12px;
                font-size: 16px;
                color: #1F2937;
                background: #FFFFFF;
                transition: all 0.1s ease;
                outline: none;
                font-family: inherit;
                cursor: pointer;
            }
            
            .currency-search-input:not([readonly]) {
                cursor: text;
            }
            
            .currency-search-input:focus {
                border-color: #643BDF;
                box-shadow: 0 0 0 3px rgba(100, 59, 223, 0.1);
            }
            
            .currency-dropdown-icon {
                position: absolute;
                right: 16px;
                top: 50%;
                transform: translateY(-50%);
                color: #6B7280;
                pointer-events: none;
                transition: transform 0.1s ease;
            }
            
            .currency-dropdown {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: #FFFFFF;
                border: 2px solid #643BDF;
                border-top: none;
                border-radius: 0 0 12px 12px;
                max-height: 300px;
                overflow-y: auto;
                z-index: 9999;
                display: none;
                box-shadow: 0 8px 25px rgba(100, 59, 223, 0.15);
            }
            
            .currency-option {
                padding: 14px 20px;
                cursor: pointer;
                transition: all 0.2s ease;
                border-bottom: 1px solid #F3F4F6;
                display: flex;
                justify-content: space-between;
                align-items: center;
                pointer-events: auto;
                position: relative;
                z-index: 10;
                user-select: none;
                -webkit-user-select: none;
                -webkit-tap-highlight-color: transparent;
                touch-action: manipulation;
            }
            
            .currency-option:hover {
                background: #F8F6FF;
                border-left: 3px solid #643BDF;
                padding-left: 17px;
            }
            
            .currency-option:last-child {
                border-bottom: none;
            }
            
            .currency-option.selected {
                background: #F0EBFF;
                color: #643BDF;
                border-left: 3px solid #643BDF;
                padding-left: 17px;
                font-weight: 600;
            }
            
            .currency-dropdown::-webkit-scrollbar {
                width: 6px;
            }
            
            .currency-dropdown::-webkit-scrollbar-track {
                background: #F3F4F6;
            }
            
            .currency-dropdown::-webkit-scrollbar-thumb {
                background: #643BDF;
                border-radius: 3px;
            }
            
            .currency-dropdown::-webkit-scrollbar-thumb:hover {
                background: #5A32D3;
            }
            
            .currency-code {
                font-weight: 600;
                color: #1F2937;
            }
            
            .currency-name {
                font-size: 14px;
                color: #6B7280;
            }
            
            .currency-select-container.open .currency-search-input {
                border-radius: 12px 12px 0 0;
                border-color: #643BDF;
                box-shadow: 0 0 0 3px rgba(100, 59, 223, 0.1);
            }
            
            .currency-select-container.open .currency-dropdown-icon {
                transform: translateY(-50%) rotate(180deg);
            }
            
            .currency-select-container.open .currency-dropdown {
                display: block;
            }
            
            .form-select:focus,
            .form-input:focus {
                border-color: #4A90E2;
                box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
                transform: translateY(-1px);
            }
            
            .form-select:hover,
            .form-input:hover {
                border-color: #9CA3AF;
            }
            
            .convert-button {
                background: linear-gradient(135deg, #4A90E2, #357ABD);
                color: #FFFFFF;
                border: none;
                padding: 18px 40px;
                border-radius: 12px;
                font-size: 18px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                width: 100%;
                position: relative;
                overflow: hidden;
            }
            
            .convert-button:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(74, 144, 226, 0.3);
            }
            
            .convert-button:active {
                transform: translateY(0);
            }
            
            .convert-button:disabled {
                opacity: 0.7;
                cursor: not-allowed;
                transform: none;
            }
            
            .loading-spinner {
                display: none;
                width: 20px;
                height: 20px;
                border: 2px solid rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                border-top-color: #FFFFFF;
                animation: spin 1s ease-in-out infinite;
                margin: 0 auto;
            }
            
            @keyframes spin {
                to { transform: rotate(360deg); }
            }
            
            .result-section {
                background: linear-gradient(135deg, #F3F0FF, #EDE9FE);
                border: 2px solid #643BDF;
                border-radius: 16px;
                padding: 32px;
                text-align: center;
                margin-top: 32px;
                display: none;
                position: relative;
                overflow: hidden;
            }
            
            .result-section::before {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                background: linear-gradient(135deg, #643BDF, #8B5CF6);
                border-radius: 16px;
                z-index: -1;
            }
            
            .result-section::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, #F3F0FF, #EDE9FE);
                border-radius: 14px;
                z-index: -1;
            }
            
            .result-title {
                font-size: 18px;
                color: #1F2937;
                margin: 0 0 16px 0;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .result-title-mobile {
                display: none;
            }
            
            .result-title-desktop {
                display: inline;
            }
            
            .result-amount {
                font-size: 36px;
                font-weight: 700;
                color: #643BDF;
                margin: 0 0 12px 0;
                line-height: 1.2;
            }
            
            .result-details {
                font-size: 14px;
                color: #6B7280;
                margin: 0 0 20px 0;
            }
            
            .rate-trend-section {
                background: #DEFCED;
                border-radius: 12px;
                padding: 16px;
                margin-top: 20px;
                border: 1px solid rgba(16, 185, 129, 0.2);
            }
            
            .rate-trend-title {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-bottom: 12px;
                font-size: 14px;
                font-weight: 600;
                color: #374151;
                gap: 12px;
            }
            
            .rate-trend-content {
                display: flex;
                align-items: center;
                gap: 16px;
            }
            
            .rate-trend-change {
                font-size: 12px;
                font-weight: 600;
                padding: 4px 8px;
                border-radius: 6px;
            }
            
            .rate-trend-change.positive {
                color: #059669;
                background: #D1FAE5;
            }
            
            .rate-trend-change.negative {
                color: #DC2626;
                background: #FEE2E2;
            }
            
            .rate-chart {
                height: 80px;
                width: 140px;
                background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
                border-radius: 8px;
                position: relative;
                overflow: hidden;
                display: flex;
                align-items: end;
                padding: 12px 8px 8px 8px;
                gap: 2px;
            }
            
            .rate-bar {
                background: linear-gradient(135deg, #10B981, #059669);
                border-radius: 2px 2px 0 0;
                min-height: 6px;
                width: 12px;
                transition: all 0.3s ease;
                box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
            }
            
            .rate-bar:hover {
                background: linear-gradient(135deg, #059669, #047857);
                transform: translateY(-2px);
            }
            
            .error-message {
                background: #FEF2F2;
                border: 2px solid #FCA5A5;
                color: #DC2626;
                padding: 16px 20px;
                border-radius: 12px;
                margin-top: 16px;
                font-weight: 500;
                display: none;
            }
            
            .result-title-desktop {
                display: block;
                font-size: 18px;
                font-weight: 600;
                color: #643BDF;
                margin-bottom: 16px;
            }
            
            .result-title-mobile {
                display: none;
            }
            
            .form-group.amount-group {
                grid-column: 1 / -1;
                order: -1;
            }
            
            .form-group:nth-child(2) {
                grid-column: 1;
            }
            
            .form-group:nth-child(4) {
                grid-column: 3;
            }
            
            .swap-currencies {
                grid-column: 2;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                padding-top: 32px;
                min-height: 60px;
            }
            
            .swap-button {
                background: transparent;
                border: none;
                border-radius: 50%;
                width: 48px;
                height: 48px;
                cursor: pointer;
                transition: none;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #643BDF;
                position: relative;
                padding: 8px;
            }
            
            .swap-button:hover {
                background: transparent;
                color: #643BDF;
                transform: none;
            }
            
            .swap-button:active {
                background: transparent;
                transform: none;
            }
            
            .swap-icon {
                width: 24px;
                height: 24px;
                fill: currentColor;
                transition: none;
            }
            
            .swap-button:hover .swap-icon {
                transform: none;
            }
            
            /* Mobile Responsive */
            @media (max-width: 768px) {
                .premium-currency-converter {
                    padding: 12px;
                }
                
                .converter-container {
                    padding: 24px 20px;
                    width: 100%;
                    max-width: 500px;
                    margin: 0 auto;
                }
                
                .converter-title {
                    font-size: 24px;
                    margin-bottom: 24px;
                }
                
                .converter-form {
                    display: flex;
                    flex-direction: column;
                    gap: 0px;
                    width: 100%;
                    align-items: center;
                }
                
                .form-group {
                    width: 100%;
                    max-width: 460px;
                    display: flex;
                    flex-direction: column;
                    align-items: stretch;
                }
                
                .swap-currencies {
                    width: 100%;
                    max-width: 460px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: -28px 0 -28px 0;
                    position: relative;
                    z-index: 5;
                }
                
                .result-amount {
                    font-size: 28px;
                }
                
                .result-title-desktop {
                    display: block;
                }
                
                .result-title-mobile {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }
                
                .result-title {
                    font-size: 16px;
                    margin: 0 0 12px 0;
                }
                
                .form-select,
                .form-input,
                .currency-search-input {
                    padding: 18px 16px !important;
                    font-size: 18px !important;
                    height: 76px !important;
                    width: 100% !important;
                    box-sizing: border-box !important;
                    border-radius: 12px !important;
                    border: 2px solid #E5E7EB !important;
                    background: white !important;
                }
                
                .amount-group .form-input {
                    padding: 18px 16px !important;
                    font-size: 18px !important;
                    height: 76px !important;
                    width: 100% !important;
                    box-sizing: border-box !important;
                    text-align: left !important;
                    border-radius: 12px !important;
                    border: 2px solid #E5E7EB !important;
                    background: white !important;
                }
                
                .currency-search-input {
                    cursor: pointer !important;
                    touch-action: manipulation !important;
                    font-size: 18px !important;
                    padding: 18px 16px !important;
                    height: 76px !important;
                }
                
                .currency-dropdown-container {
                    width: 100%;
                }
                
                .form-group {
                    width: 100%;
                }
                
                .convert-button {
                    padding: 16px 32px;
                    font-size: 16px;
                }
            }
            
            @media (max-width: 480px) {
                .converter-container {
                    padding: 20px 16px;
                }
                
                .converter-title {
                    font-size: 22px;
                }
                
                .result-section {
                    padding: 24px 16px;
                }
                
                /* Enhanced mobile optimizations */
                .currency-search-input {
                    padding: 16px 44px 16px 16px;
                    font-size: 16px;
                    touch-action: manipulation;
                }
                
                .currency-dropdown {
                    max-height: 200px;
                    -webkit-overflow-scrolling: touch;
                }
                
                .currency-option {
                    padding: 14px 16px;
                    min-height: 48px;
                    touch-action: manipulation;
                    font-size: 15px;
                }
                
                .swap-button {
                    width: 48px;
                    height: 48px;
                    touch-action: manipulation;
                }
                
                .currency-dropdown-container.open .currency-dropdown {
                    max-height: 300px;
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                }
                
                /* Ensure dropdowns work on mobile */
                .currency-search-input[readonly] {
                    cursor: pointer !important;
                    pointer-events: auto !important;
                    touch-action: manipulation !important;
                    -webkit-user-select: none !important;
                    user-select: none !important;
                    -webkit-appearance: none !important;
                    appearance: none !important;
                }
                
                /* Force input refresh on mobile */
                .currency-search-input {
                    -webkit-text-fill-color: #1F2937 !important;
                    opacity: 1 !important;
                }
                
                /* Prevent accidental popup opening during scroll */
                .premium-currency-converter {
                    touch-action: pan-y;
                }
                
                .currency-dropdown-container {
                    touch-action: manipulation;
                }
                
                /* Mobile specific click handling */
                .currency-dropdown-container {
                    position: relative;
                    z-index: 10;
                }
            }
            
            /* Extra small mobile devices */
            @media (max-width: 360px) {
                .converter-container {
                    padding: 12px 8px;
                    margin: 4px;
                }
                
                .converter-title {
                    font-size: 18px;
                    margin-bottom: 12px;
                }
                
                .form-input,
                .currency-search-input {
                    padding: 14px 12px;
                    font-size: 16px;
                }
                
                .amount-group .form-input {
                    padding: 16px 14px;
                    font-size: 17px;
                    text-align: left;
                }
                
                .currency-search-input {
                    padding-right: 40px;
                }
                
                .currency-option {
                    padding: 12px 14px;
                    font-size: 14px;
                    min-height: 44px;
                }
                
                .result-amount {
                    font-size: 20px;
                }
                
                .result-details {
                    font-size: 12px;
                }
            }
            
            /* Touch device specific optimizations */
            @media (hover: none) and (pointer: coarse) {
                .form-input:focus,
                .currency-search-input:focus,
                .amount-group .form-input:focus {
                    transform: none;
                    box-shadow: 0 0 0 3px rgba(100, 59, 223, 0.2);
                }
                
                .swap-button:hover {
                    background: rgba(145, 92, 246, 0.1);
                    transform: none;
                }
                
                .swap-button:active {
                    background: rgba(145, 92, 246, 0.2);
                    transform: scale(0.95);
                }
                
                .currency-option:hover {
                    background: rgba(100, 59, 223, 0.06);
                }
                
                .currency-option:active {
                    background: rgba(100, 59, 223, 0.12);
                }
            }
            
            /* iOS Safari fixes */
            @supports (-webkit-touch-callout: none) {
                .form-input,
                .currency-search-input {
                    -webkit-appearance: none;
                    border-radius: 10px;
                }
                
                .currency-dropdown {
                    -webkit-overflow-scrolling: touch;
                }
                
                input[type="number"] {
                    -moz-appearance: textfield;
                }
                
                input[type="number"]::-webkit-outer-spin-button,
                input[type="number"]::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }
            }
            
            /* Mobile popup overlay for currency selection */
            .mobile-currency-popup {
                display: none !important;
            }
            
            @media (max-width: 768px) {
                .mobile-currency-popup {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.5);
                    z-index: 9999;
                    display: none !important;
                    backdrop-filter: blur(4px);
                }
                
                .mobile-currency-popup.active {
                    display: flex !important;
                    align-items: stretch;
                }
                
                .mobile-popup-content {
                    background: #FFFFFF;
                    border-radius: 0;
                    width: 100%;
                    height: 100vh;
                    display: flex;
                    flex-direction: column;
                    animation: slideUp 0.15s ease-out;
                }
                
                @keyframes slideUp {
                    from {
                        transform: translateY(100%);
                    }
                    to {
                        transform: translateY(0);
                    }
                }
                
                .mobile-popup-list {
                    flex: 1;
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                    padding: 0 0 max(env(safe-area-inset-bottom), 20px) 0;
                }
                
                .mobile-popup-option {
                    padding: 16px 20px;
                    border-bottom: 1px solid #F3F4F6;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    min-height: 60px;
                    touch-action: manipulation;
                }
                
                .mobile-popup-option:hover,
                .mobile-popup-option:active {
                    background: rgba(100, 59, 223, 0.05);
                }
                
                .mobile-popup-option.selected {
                    background: rgba(100, 59, 223, 0.1);
                    border-left: 4px solid #643BDF;
                }
                
                .mobile-popup-close {
                    background: #F3F4F6;
                    border: none;
                    width: 36px;
                    height: 36px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 18px;
                    font-weight: 400;
                    color: #6B7280;
                    touch-action: manipulation;
                    border-radius: 8px;
                    transition: all 0.2s ease;
                    flex-shrink: 0;
                }
                
                .mobile-popup-close:active {
                    background: #E5E7EB;
                    color: #374151;
                    transform: scale(0.95);
                }
                
                .mobile-popup-search-container {
                    padding: 15px 20px;
                    border-bottom: 1px solid #E5E7EB;
                    background: #FFFFFF;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }
                
                .mobile-popup-search {
                    flex: 1;
                    padding: 12px 16px;
                    border: 1px solid #D1D5DB;
                    border-radius: 8px;
                    font-size: 16px;
                    background: #F9FAFB;
                    outline: none;
                    transition: all 0.2s ease;
                    box-sizing: border-box;
                    margin-right: 8px;
                }
                
                .mobile-popup-search:focus {
                    border-color: #4A90E2;
                    background: white;
                    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
                }
            }
        </style>
        
        <div class="converter-container">
            <h2 class="converter-title">Currency Converter</h2>
            
            <form class="converter-form" id="converter-form-<?php echo $converter_id; ?>">
                <div class="form-group amount-group">
                    <label class="form-label" for="amount-<?php echo $converter_id; ?>">Amount</label>
                    <input 
                        type="number" 
                        class="form-input" 
                        id="amount-<?php echo $converter_id; ?>" 
                        placeholder="Enter amount to convert" 
                        min="0" 
                        step="0.01" 
                        value="1"
                        required
                    >
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="from-currency-<?php echo $converter_id; ?>">From Currency</label>
                    <div class="currency-select-container" id="from-currency-container-<?php echo $converter_id; ?>">
                        <input 
                            type="text" 
                            class="currency-search-input" 
                            id="from-currency-<?php echo $converter_id; ?>" 
                            placeholder="🇺🇸 USD - US Dollar" 
                            value="🇺🇸 USD - US Dollar"
                            data-search-placeholder="Type to search currencies..."
                            readonly
                            required
                        >
                        <div class="currency-dropdown-icon">▼</div>
                        <div class="currency-dropdown" id="from-currency-dropdown-<?php echo $converter_id; ?>">
                            <?php foreach ($currencies as $code => $data): ?>
                                <div class="currency-option <?php echo $code === 'USD' ? 'selected' : ''; ?>" data-code="<?php echo $code; ?>" data-flag="<?php echo $data['flag']; ?>" data-name="<?php echo $data['name']; ?>">
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <span style="font-size: 18px;"><?php echo $data['flag']; ?></span>
                                        <span class="currency-code"><?php echo $code; ?></span>
                                    </div>
                                    <span class="currency-name"><?php echo $data['name']; ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
                
                <div class="swap-currencies">
                    <button type="button" class="swap-button" id="swap-button-<?php echo $converter_id; ?>" title="Swap currencies">
                        <svg class="swap-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"></path>
                        </svg>
                    </button>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="to-currency-<?php echo $converter_id; ?>">To Currency</label>
                    <div class="currency-select-container" id="to-currency-container-<?php echo $converter_id; ?>">
                        <input 
                            type="text" 
                            class="currency-search-input" 
                            id="to-currency-<?php echo $converter_id; ?>" 
                            placeholder="🇪🇺 EUR - Euro" 
                            value="🇪🇺 EUR - Euro"
                            data-search-placeholder="Type to search currencies..."
                            readonly
                            required
                        >
                        <div class="currency-dropdown-icon">▼</div>
                        <div class="currency-dropdown" id="to-currency-dropdown-<?php echo $converter_id; ?>">
                            <?php foreach ($currencies as $code => $data): ?>
                                <div class="currency-option <?php echo $code === 'EUR' ? 'selected' : ''; ?>" data-code="<?php echo $code; ?>" data-flag="<?php echo $data['flag']; ?>" data-name="<?php echo $data['name']; ?>">
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <span style="font-size: 18px;"><?php echo $data['flag']; ?></span>
                                        <span class="currency-code"><?php echo $code; ?></span>
                                    </div>
                                    <span class="currency-name"><?php echo $data['name']; ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            </form>
            
            <div class="result-section" id="result-section-<?php echo $converter_id; ?>">
                <h3 class="result-title">
                    <span class="result-title-desktop">Conversion Result</span>
                    <span class="result-title-mobile">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
                        </svg>
                    </span>
                </h3>
                <div class="result-amount" id="result-amount-<?php echo $converter_id; ?>"></div>
                <p class="result-details" id="result-details-<?php echo $converter_id; ?>"></p>
                
                <div class="rate-trend-section" id="rate-trend-section-<?php echo $converter_id; ?>">
                    <div class="rate-trend-title">
                        <span>Rate Trend (7 days)</span>
                        <span class="rate-trend-change" id="rate-trend-change-<?php echo $converter_id; ?>">📈 +0.0%</span>
                    </div>
                    <div class="rate-trend-content">
                        <div class="rate-chart" id="rate-chart-<?php echo $converter_id; ?>">
                            <!-- Chart bars will be generated dynamically -->
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="error-message" id="error-message-<?php echo $converter_id; ?>"></div>
        </div>
        
        <!-- Mobile Currency Popup -->
        <div class="mobile-currency-popup" id="mobile-popup-<?php echo $converter_id; ?>">
            <div class="mobile-popup-content">
                <div class="mobile-popup-search-container">
                    <input type="text" class="mobile-popup-search" id="mobile-popup-search-<?php echo $converter_id; ?>" placeholder="Type to search...">
                    <button class="mobile-popup-close" id="mobile-popup-close-<?php echo $converter_id; ?>">×</button>
                </div>
                <div class="mobile-popup-list" id="mobile-popup-list-<?php echo $converter_id; ?>">
                    <?php foreach ($currencies as $code => $data): ?>
                        <div class="mobile-popup-option" data-code="<?php echo $code; ?>" data-flag="<?php echo $data['flag']; ?>" data-name="<?php echo $data['name']; ?>" data-country="<?php echo strtolower($data['country']); ?>">
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <span style="font-size: 20px;"><?php echo $data['flag']; ?></span>
                                <div>
                                    <div style="font-weight: 600; color: #1F2937;"><?php echo $code; ?></div>
                                    <div style="font-size: 13px; color: #6B7280;"><?php echo $data['name']; ?></div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
    
    <script>
    (function() {
        const converterId = '<?php echo $converter_id; ?>';
        const form = document.getElementById('converter-form-' + converterId);
        const fromCurrencyInput = document.getElementById('from-currency-' + converterId);
        const toCurrencyInput = document.getElementById('to-currency-' + converterId);
        const fromCurrencyContainer = document.getElementById('from-currency-container-' + converterId);
        const toCurrencyContainer = document.getElementById('to-currency-container-' + converterId);
        const fromCurrencyDropdown = document.getElementById('from-currency-dropdown-' + converterId);
        const toCurrencyDropdown = document.getElementById('to-currency-dropdown-' + converterId);
        const amount = document.getElementById('amount-' + converterId);
        const swapBtn = document.getElementById('swap-button-' + converterId);
        const resultSection = document.getElementById('result-section-' + converterId);
        const resultAmount = document.getElementById('result-amount-' + converterId);
        const resultDetails = document.getElementById('result-details-' + converterId);
        const errorMessage = document.getElementById('error-message-' + converterId);
        const rateTrendSection = document.getElementById('rate-trend-section-' + converterId);
        const rateTrendChange = document.getElementById('rate-trend-change-' + converterId);
        const rateChart = document.getElementById('rate-chart-' + converterId);
        const mobilePopup = document.getElementById('mobile-popup-' + converterId);
        const mobilePopupClose = document.getElementById('mobile-popup-close-' + converterId);
        const mobilePopupList = document.getElementById('mobile-popup-list-' + converterId);
        
        const API_KEY = '5aba9026958820941ae3d6e2';
        const API_BASE_URL = 'https://v6.exchangerate-api.com/v6';
        
        // Mobile detection - check for mobile viewport size
        function isMobileDevice() {
            return window.innerWidth <= 768;
        }
        
        // Store selected currency data
        let selectedFromCurrency = {code: 'USD', flag: '🇺🇸', name: 'US Dollar'};
        let selectedToCurrency = {code: 'EUR', flag: '🇪🇺', name: 'Euro'};
        
        // Format number to English numerals
        function formatNumber(num) {
            return new Intl.NumberFormat('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(num);
        }
        
        // Show loading state (simplified for auto-conversion)
        function showLoading() {
            resultSection.style.opacity = '0.6';
            hideError();
        }
        
        // Hide loading state
        function hideLoading() {
            resultSection.style.opacity = '1';
        }
        
        // Mobile popup functions
        function openMobilePopup(isFromCurrency) {
            if (!isMobileDevice()) return false;
            
            // Clear search and reset visibility
            mobilePopupSearch.value = '';
            
            // Update popup options selection
            const popupOptions = mobilePopupList.querySelectorAll('.mobile-popup-option');
            const currentCode = isFromCurrency ? selectedFromCurrency.code : selectedToCurrency.code;
            
            popupOptions.forEach(option => {
                option.classList.toggle('selected', option.dataset.code === currentCode);
                option.style.display = 'flex'; // Reset visibility
            });
            
            mobilePopup.classList.add('active');
            mobilePopup.setAttribute('data-target', isFromCurrency ? 'from' : 'to');
            document.body.style.overflow = 'hidden';
            
            // Focus on search input after popup animation
            setTimeout(() => mobilePopupSearch.focus(), 50);
            
            return true;
        }
        
        function closeMobilePopup() {
            mobilePopup.classList.remove('active');
            mobilePopup.removeAttribute('data-target');
            document.body.style.overflow = '';
        }
        
        // Setup dropdown functionality
        function setupDropdown(container, input, dropdown, selectedCurrency) {
            const options = dropdown.querySelectorAll('.currency-option');
            let filteredOptions = Array.from(options);
            let currentFocus = -1;
            const isFromCurrency = container === fromCurrencyContainer;
            
            // Click to open/close dropdown
            let touchStartY = 0;
            let touchStartTime = 0;
            
            function handleTouchStart(e) {
                touchStartY = e.touches[0].clientY;
                touchStartTime = Date.now();
            }
            
            function handleTouchEnd(e) {
                const touchEndY = e.changedTouches[0].clientY;
                const touchEndTime = Date.now();
                const touchDuration = touchEndTime - touchStartTime;
                const touchDistance = Math.abs(touchEndY - touchStartY);
                
                // Only trigger dropdown if it's a quick tap (not a scroll)
                if (touchDuration < 300 && touchDistance < 10) {
                    handleDropdownClick(e);
                }
            }
            
            function handleDropdownClick(e) {
                e.preventDefault();
                e.stopPropagation();
                
                // Always try mobile popup first on mobile viewport
                if (window.innerWidth <= 768) {
                    if (openMobilePopup(isFromCurrency)) {
                        return;
                    }
                }
                
                // Fallback to regular dropdown
                container.classList.toggle('open');
                if (container.classList.contains('open')) {
                    input.removeAttribute('readonly');
                    input.placeholder = input.getAttribute('data-search-placeholder') || "Type to search currencies...";
                    input.value = '';
                    setTimeout(() => input.focus(), 10);
                } else {
                    input.setAttribute('readonly', 'true');
                    input.value = `${selectedCurrency.flag} ${selectedCurrency.code} - ${selectedCurrency.name}`;
                    input.placeholder = input.value;
                }
            }
            
            input.addEventListener('click', handleDropdownClick);
            input.addEventListener('touchstart', handleTouchStart);
            input.addEventListener('touchend', handleTouchEnd);
            
            // Enhanced search functionality with country names
            input.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                filteredOptions = [];
                
                // Get country name from our data structure
                const currencyData = {
                    'USD': {country: 'united states'}, 'EUR': {country: 'european union'}, 'GBP': {country: 'united kingdom'},
                    'JPY': {country: 'japan'}, 'AUD': {country: 'australia'}, 'CAD': {country: 'canada'},
                    'CHF': {country: 'switzerland'}, 'CNY': {country: 'china'}, 'SEK': {country: 'sweden'},
                    'NZD': {country: 'new zealand'}, 'MXN': {country: 'mexico'}, 'SGD': {country: 'singapore'},
                    'HKD': {country: 'hong kong'}, 'NOK': {country: 'norway'}, 'TRY': {country: 'turkey'},
                    'RUB': {country: 'russia'}, 'INR': {country: 'india'}, 'BRL': {country: 'brazil'},
                    'ZAR': {country: 'south africa'}, 'KRW': {country: 'south korea'}, 'AED': {country: 'united arab emirates'},
                    'AFN': {country: 'afghanistan'}, 'ALL': {country: 'albania'}, 'AMD': {country: 'armenia'},
                    'ANG': {country: 'netherlands antilles'}, 'AOA': {country: 'angola'}, 'ARS': {country: 'argentina'},
                    'AWG': {country: 'aruba'}, 'AZN': {country: 'azerbaijan'}, 'BAM': {country: 'bosnia'},
                    'BBD': {country: 'barbados'}, 'BDT': {country: 'bangladesh'}, 'BGN': {country: 'bulgaria'},
                    'BHD': {country: 'bahrain'}, 'BIF': {country: 'burundi'}, 'BMD': {country: 'bermuda'},
                    'BND': {country: 'brunei'}, 'BOB': {country: 'bolivia'}, 'BSD': {country: 'bahamas'},
                    'BTN': {country: 'bhutan'}, 'BWP': {country: 'botswana'}, 'BYN': {country: 'belarus'},
                    'BZD': {country: 'belize'}, 'CDF': {country: 'congo'}, 'CLP': {country: 'chile'},
                    'COP': {country: 'colombia'}, 'CRC': {country: 'costa rica'}, 'CUP': {country: 'cuba'},
                    'CVE': {country: 'cape verde'}, 'CZK': {country: 'czech republic'}, 'DJF': {country: 'djibouti'},
                    'DKK': {country: 'denmark'}, 'DOP': {country: 'dominican republic'}, 'DZD': {country: 'algeria'},
                    'EGP': {country: 'egypt'}, 'ERN': {country: 'eritrea'}, 'ETB': {country: 'ethiopia'},
                    'FJD': {country: 'fiji'}, 'FKP': {country: 'falkland islands'}, 'GEL': {country: 'georgia'},
                    'GGP': {country: 'guernsey'}, 'GHS': {country: 'ghana'}, 'GIP': {country: 'gibraltar'},
                    'GMD': {country: 'gambia'}, 'GNF': {country: 'guinea'}, 'GTQ': {country: 'guatemala'},
                    'GYD': {country: 'guyana'}, 'HNL': {country: 'honduras'}, 'HRK': {country: 'croatia'},
                    'HTG': {country: 'haiti'}, 'HUF': {country: 'hungary'}, 'IDR': {country: 'indonesia'},
                    'ILS': {country: 'israel'}, 'IMP': {country: 'isle of man'}, 'IQD': {country: 'iraq'},
                    'IRR': {country: 'iran'}, 'ISK': {country: 'iceland'}, 'JEP': {country: 'jersey'},
                    'JMD': {country: 'jamaica'}, 'JOD': {country: 'jordan'}, 'KES': {country: 'kenya'},
                    'KGS': {country: 'kyrgyzstan'}, 'KHR': {country: 'cambodia'}, 'KMF': {country: 'comoros'},
                    'KPW': {country: 'north korea'}, 'KWD': {country: 'kuwait'}, 'KYD': {country: 'cayman islands'},
                    'KZT': {country: 'kazakhstan'}, 'LAK': {country: 'laos'}, 'LBP': {country: 'lebanon'},
                    'LKR': {country: 'sri lanka'}, 'LRD': {country: 'liberia'}, 'LSL': {country: 'lesotho'},
                    'LYD': {country: 'libya'}, 'MAD': {country: 'morocco'}, 'MDL': {country: 'moldova'},
                    'MGA': {country: 'madagascar'}, 'MKD': {country: 'macedonia'}, 'MMK': {country: 'myanmar'},
                    'MNT': {country: 'mongolia'}, 'MOP': {country: 'macau'}, 'MRU': {country: 'mauritania'},
                    'MUR': {country: 'mauritius'}, 'MVR': {country: 'maldives'}, 'MWK': {country: 'malawi'},
                    'MYR': {country: 'malaysia'}, 'MZN': {country: 'mozambique'}, 'NAD': {country: 'namibia'},
                    'NGN': {country: 'nigeria'}, 'NIO': {country: 'nicaragua'}, 'NPR': {country: 'nepal'},
                    'OMR': {country: 'oman'}, 'PAB': {country: 'panama'}, 'PEN': {country: 'peru'},
                    'PGK': {country: 'papua new guinea'}, 'PHP': {country: 'philippines'}, 'PKR': {country: 'pakistan'},
                    'PLN': {country: 'poland'}, 'PYG': {country: 'paraguay'}, 'QAR': {country: 'qatar'},
                    'RON': {country: 'romania'}, 'RSD': {country: 'serbia'}, 'RWF': {country: 'rwanda'},
                    'SAR': {country: 'saudi arabia'}, 'SBD': {country: 'solomon islands'}, 'SCR': {country: 'seychelles'},
                    'SDG': {country: 'sudan'}, 'SHP': {country: 'saint helena'}, 'SLE': {country: 'sierra leone'},
                    'SOS': {country: 'somalia'}, 'SRD': {country: 'suriname'}, 'STN': {country: 'sao tome'},
                    'SYP': {country: 'syria'}, 'SZL': {country: 'eswatini'}, 'THB': {country: 'thailand'},
                    'TJS': {country: 'tajikistan'}, 'TMT': {country: 'turkmenistan'}, 'TND': {country: 'tunisia'},
                    'TOP': {country: 'tonga'}, 'TTD': {country: 'trinidad'}, 'TVD': {country: 'tuvalu'},
                    'TWD': {country: 'taiwan'}, 'TZS': {country: 'tanzania'}, 'UAH': {country: 'ukraine'},
                    'UGX': {country: 'uganda'}, 'UYU': {country: 'uruguay'}, 'UZS': {country: 'uzbekistan'},
                    'VED': {country: 'venezuela'}, 'VES': {country: 'venezuela'}, 'VND': {country: 'vietnam'},
                    'VUV': {country: 'vanuatu'}, 'WST': {country: 'samoa'}, 'YER': {country: 'yemen'},
                    'ZMW': {country: 'zambia'}, 'ZWL': {country: 'zimbabwe'}
                };
                
                options.forEach(option => {
                    const code = option.dataset.code.toLowerCase();
                    const name = option.dataset.name.toLowerCase();
                    const country = currencyData[option.dataset.code]?.country || '';
                    
                    if (code.includes(searchTerm) || 
                        name.includes(searchTerm) || 
                        country.includes(searchTerm)) {
                        option.style.display = 'flex';
                        filteredOptions.push(option);
                    } else {
                        option.style.display = 'none';
                    }
                });
                
                currentFocus = -1;
            });
            
            // Keyboard navigation (only when dropdown is open)
            input.addEventListener('keydown', function(e) {
                if (!container.classList.contains('open')) {
                    return; // Don't handle navigation when dropdown is closed
                }
                
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    currentFocus = Math.min(currentFocus + 1, filteredOptions.length - 1);
                    setActiveOption();
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    currentFocus = Math.max(currentFocus - 1, 0);
                    setActiveOption();
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if (currentFocus >= 0 && filteredOptions[currentFocus]) {
                        selectOption(filteredOptions[currentFocus]);
                    }
                } else if (e.key === 'Escape') {
                    closeDropdown();
                }
            });
            
            function setActiveOption() {
                filteredOptions.forEach((option, index) => {
                    option.classList.toggle('selected', index === currentFocus);
                });
            }
            
            function selectOption(option) {
                console.log('selectOption called for:', option.dataset.code);
                
                const code = option.dataset.code;
                const flag = option.dataset.flag;
                const name = option.dataset.name;
                
                // Update the correct global currency object
                if (isFromCurrency) {
                    selectedFromCurrency.code = code;
                    selectedFromCurrency.flag = flag;
                    selectedFromCurrency.name = name;
                } else {
                    selectedToCurrency.code = code;
                    selectedToCurrency.flag = flag;
                    selectedToCurrency.name = name;
                }
                
                selectedCurrency.code = code;
                selectedCurrency.flag = flag;
                selectedCurrency.name = name;
                
                // Force update the input display immediately
                const displayValue = `${flag} ${code} - ${name}`;
                
                // Immediately update input field - multiple approaches for mobile compatibility
                input.value = displayValue;
                input.defaultValue = displayValue;
                input.setAttribute('value', displayValue);
                input.placeholder = displayValue;
                input.setAttribute('placeholder', displayValue);
                input.setAttribute('readonly', 'true');
                
                // Force visual refresh
                input.style.display = 'none';
                input.offsetHeight; // Force reflow
                input.style.display = '';
                
                // Additional forced update
                input.blur();
                input.focus();
                input.blur();
                
                console.log('Updated input value to:', displayValue);
                
                // Update selection visual state first
                options.forEach(opt => opt.classList.remove('selected'));
                option.classList.add('selected');
                
                // Close dropdown and convert
                closeDropdown();
                
                // Force another update after dropdown closes
                setTimeout(() => {
                    input.value = displayValue;
                    console.log('Final input value:', input.value);
                }, 100);
                
                autoConvert();
            }
            
            function closeDropdown() {
                container.classList.remove('open');
                input.setAttribute('readonly', 'true');
                
                // Don't override the value in closeDropdown - let selectOption handle it
                // Just ensure the dropdown closes properly
                currentFocus = -1;
            }
            
            // Click on option - Enhanced for mobile
            options.forEach(option => {
                // Add click event
                option.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('Option clicked:', this.dataset.code);
                    selectOption(this);
                });
                
                // Add touch events for better mobile support
                option.addEventListener('touchstart', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                });
                
                option.addEventListener('touchend', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('Option touched:', this.dataset.code);
                    selectOption(this);
                });
                
                // Add mousedown for immediate response
                option.addEventListener('mousedown', function(e) {
                    e.preventDefault();
                    console.log('Option mousedown:', this.dataset.code);
                    selectOption(this);
                });
            });
            
            // Close on outside click
            document.addEventListener('click', function(e) {
                if (!container.contains(e.target)) {
                    closeDropdown();
                }
            });
        }
        
        // Generate rate trend chart
        function generateRateTrendChart(rates) {
            rateChart.innerHTML = '';
            
            if (!rates || rates.length < 2) {
                // Generate sample trend data for demo
                rates = [1.0, 1.02, 0.98, 1.05, 1.03, 1.08, 1.06];
            }
            
            const maxRate = Math.max(...rates);
            const minRate = Math.min(...rates);
            const range = maxRate - minRate || 0.1;
            
            rates.forEach((rate, index) => {
                const bar = document.createElement('div');
                bar.className = 'rate-bar';
                const height = ((rate - minRate) / range) * 40 + 4; // 4px minimum height
                bar.style.height = `${height}px`;
                bar.title = `Day ${index + 1}: ${formatNumber(rate)}`;
                rateChart.appendChild(bar);
            });
            
            // Calculate trend percentage
            const firstRate = rates[0];
            const lastRate = rates[rates.length - 1];
            const changePercent = ((lastRate - firstRate) / firstRate) * 100;
            
            const icon = changePercent >= 0 ? '📈' : '📉';
            rateTrendChange.textContent = `${icon} ${changePercent >= 0 ? '+' : ''}${changePercent.toFixed(1)}%`;
            rateTrendChange.className = `rate-trend-change ${changePercent >= 0 ? 'positive' : 'negative'}`;
        }
        
        // Show result
        function showResult(convertedAmount, fromCode, toCode, originalAmount, rate) {
            resultAmount.textContent = `${selectedToCurrency.flag} ${formatNumber(convertedAmount)} ${toCode}`;
            resultDetails.textContent = `${formatNumber(originalAmount)} ${fromCode} = ${formatNumber(convertedAmount)} ${toCode} (Rate: ${formatNumber(rate)})`;
            
            // Generate rate trend chart (using current rate as base for demo)
            const baseRate = rate;
            const trendRates = [
                baseRate * 0.995,
                baseRate * 1.002,
                baseRate * 0.998,
                baseRate * 1.005,
                baseRate * 1.001,
                baseRate * 1.008,
                baseRate
            ];
            generateRateTrendChart(trendRates);
            
            // Show result section
            resultSection.style.display = 'block';
            hideError();
        }
        
        // Show default result state - removed as we want to hide initially
        
        // Show error
        function showError(message) {
            errorMessage.textContent = message;
            errorMessage.style.display = 'block';
            hideResult();
        }
        
        // Hide error
        function hideError() {
            errorMessage.style.display = 'none';
        }
        
        // Hide result
        function hideResult() {
            resultSection.style.display = 'none';
        }
        
        // Swap currencies
        swapBtn.addEventListener('click', function() {
            // Add visual feedback
            this.style.transform = 'scale(0.9) rotate(180deg)';
            setTimeout(() => {
                this.style.transform = '';
            }, 200);
            
            // Swap the selected currency objects
            const tempCurrency = {...selectedFromCurrency};
            selectedFromCurrency = {...selectedToCurrency};
            selectedToCurrency = tempCurrency;
            
            // Force update input displays and placeholders
            const fromValue = `${selectedFromCurrency.flag} ${selectedFromCurrency.code} - ${selectedFromCurrency.name}`;
            const toValue = `${selectedToCurrency.flag} ${selectedToCurrency.code} - ${selectedToCurrency.name}`;
            
            // Direct approach - force the visible text to change
            fromCurrencyInput.value = '';
            toCurrencyInput.value = '';
            
            // Force immediate update
            setTimeout(() => {
                fromCurrencyInput.value = fromValue;
                fromCurrencyInput.setAttribute('value', fromValue);
                fromCurrencyInput.placeholder = fromValue;
                
                toCurrencyInput.value = toValue;
                toCurrencyInput.setAttribute('value', toValue);
                toCurrencyInput.placeholder = toValue;
                
                // Update dropdown selections
                updateDropdownSelections();
                autoConvert();
            }, 50);
        });
        
        function updateDropdownSelections() {
            // Update from currency dropdown
            fromCurrencyDropdown.querySelectorAll('.currency-option').forEach(option => {
                option.classList.toggle('selected', option.dataset.code === selectedFromCurrency.code);
            });
            
            // Update to currency dropdown
            toCurrencyDropdown.querySelectorAll('.currency-option').forEach(option => {
                option.classList.toggle('selected', option.dataset.code === selectedToCurrency.code);
            });
        }
        
        // Convert currency with auto-conversion
        async function autoConvert() {
            const fromCode = selectedFromCurrency.code;
            const toCode = selectedToCurrency.code;
            const amountValue = parseFloat(amount.value);
            
            // Only convert if we have valid data
            if (!fromCode || !toCode || !amountValue || amountValue <= 0) {
                // Hide result section when no valid amount
                hideResult();
                return;
            }
            
            if (fromCode === toCode) {
                showResult(amountValue, fromCode, toCode, amountValue, 1);
                return;
            }
            
            showLoading();
            
            try {
                const response = await fetch(`${API_BASE_URL}/${API_KEY}/pair/${fromCode}/${toCode}/${amountValue}`);
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                
                if (data.result === 'success') {
                    const convertedAmount = data.conversion_result;
                    const rate = data.conversion_rate;
                    showResult(convertedAmount, fromCode, toCode, amountValue, rate);
                } else {
                    throw new Error(data['error-type'] || 'Conversion failed');
                }
                
            } catch (error) {
                console.error('Currency conversion error:', error);
                
                if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
                    showError('Network error. Please check your internet connection and try again.');
                } else if (error.message.includes('429')) {
                    showError('Too many requests. Please wait a moment and try again.');
                } else if (error.message.includes('401')) {
                    showError('API authentication failed. Please contact support.');
                } else {
                    showError('Currency conversion failed. Please try again later.');
                }
            } finally {
                hideLoading();
            }
        }
        
        // Debounced auto-conversion
        let debounceTimer;
        function debounceAutoConvert() {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(autoConvert, 50);
        }
        
        // Get mobile popup search element
        const mobilePopupSearch = document.getElementById('mobile-popup-search-<?php echo $converter_id; ?>');
        
        // Mobile popup event handlers
        mobilePopupClose.addEventListener('click', closeMobilePopup);
        
        mobilePopup.addEventListener('click', function(e) {
            if (e.target === mobilePopup) {
                closeMobilePopup();
            }
        });
        
        // Mobile popup search functionality
        mobilePopupSearch.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const popupOptions = mobilePopupList.querySelectorAll('.mobile-popup-option');
            
            popupOptions.forEach(option => {
                const code = option.dataset.code.toLowerCase();
                const name = option.dataset.name.toLowerCase();
                const country = option.dataset.country.toLowerCase();
                
                if (code.includes(searchTerm) || 
                    name.includes(searchTerm) || 
                    country.includes(searchTerm)) {
                    option.style.display = 'flex';
                } else {
                    option.style.display = 'none';
                }
            });
        });
        
        // Mobile popup option selection
        mobilePopupList.addEventListener('click', function(e) {
            const option = e.target.closest('.mobile-popup-option');
            if (!option) return;
            
            const code = option.dataset.code;
            const flag = option.dataset.flag;
            const name = option.dataset.name;
            const target = mobilePopup.getAttribute('data-target');
            
            if (target === 'from') {
                selectedFromCurrency = {code, flag, name};
                fromCurrencyInput.value = `${flag} ${code} - ${name}`;
                updateDropdownSelections();
            } else if (target === 'to') {
                selectedToCurrency = {code, flag, name};
                toCurrencyInput.value = `${flag} ${code} - ${name}`;
                updateDropdownSelections();
            }
            
            closeMobilePopup();
            autoConvert();
        });
        
        // Initialize dropdowns
        setupDropdown(fromCurrencyContainer, fromCurrencyInput, fromCurrencyDropdown, selectedFromCurrency);
        setupDropdown(toCurrencyContainer, toCurrencyInput, toCurrencyDropdown, selectedToCurrency);
        
        // Add event listeners for amount input
        amount.addEventListener('input', debounceAutoConvert);
        amount.addEventListener('keydown', function() {
            // Immediate response on first keypress
            setTimeout(autoConvert, 10);
        });
        
        // Prevent form submission
        form.addEventListener('submit', function(e) {
            e.preventDefault();
        });
        
        // Result section starts hidden - will show when user enters amount
    })();
    </script>
    
    <?php
    return ob_get_clean();
}

// Register the shortcode (only when WordPress is available)
if (function_exists('add_shortcode')) {
    add_shortcode('currency_converter', 'premium_currency_converter_shortcode');
}

// Optional: Add admin notice for Code Snippets users
if (function_exists('is_admin') && function_exists('add_action') && function_exists('current_user_can') && is_admin()) {
    add_action('admin_notices', function() {
        if (current_user_can('manage_options')) {
            echo '<div class="notice notice-success is-dismissible">';
            echo '<p><strong>Currency Converter Ready!</strong> Use the shortcode <code>[currency_converter]</code> to display the currency converter on any page or post.</p>';
            echo '</div>';
        }
    });
}