{"id":8374,"date":"2026-02-27T15:45:46","date_gmt":"2026-02-27T12:45:46","guid":{"rendered":"https:\/\/roayae.org\/?page_id=8374"},"modified":"2026-06-10T21:01:44","modified_gmt":"2026-06-10T18:01:44","slug":"camps","status":"publish","type":"page","link":"https:\/\/roayae.org\/en\/camps\/","title":{"rendered":"Camps"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8374\" class=\"elementor elementor-8374\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-aba2532 elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"aba2532\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d669628\" data-id=\"d669628\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6865747 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"6865747\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-51a9614\" data-id=\"51a9614\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0b1c89b elementor-widget elementor-widget-html\" data-id=\"0b1c89b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&family=Material+Icons+Outlined&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script>\r\n        tailwind.config = {\r\n            theme: {\r\n                extend: {\r\n                    fontFamily: { 'tajawal': ['Tajawal', 'sans-serif'] },\r\n                    colors: {\r\n                        'brand-blue': '#0b6fb8',\r\n                        'brand-dark': '#094d7e',\r\n                        'brand-accent': '#00d4ff'\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    <\/script>\r\n    <style>\r\n        .glass-panel { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px); }\r\n        .hover-lift { transition: all 0.3s ease; }\r\n        .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 15px 30px -10px rgba(11, 111, 184, 0.3); }\r\n        .hero-gradient { background: linear-gradient(135deg, #0b6fb8 0%, #094d7e 100%); }\r\n        @keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\r\n        .animate-fade { animation: fade-in 0.8s ease-out forwards; }\r\n        [lang=\"en\"] { direction: ltr; font-family: sans-serif; }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 font-tajawal antialiased\">\r\n\r\n    <section class=\"max-w-7xl mx-auto my-6 md:my-12 px-4\">\r\n        <div class=\"relative overflow-hidden bg-brand-blue rounded-[2rem] md:rounded-[3rem] shadow-2xl flex flex-col lg:flex-row min-h-[600px]\">\r\n            \r\n            <!-- Decorative Elements -->\r\n            <div class=\"absolute top-0 right-0 w-80 h-80 bg-white\/5 rounded-full -mr-40 -mt-40 blur-3xl\"><\/div>\r\n            <div class=\"absolute bottom-0 left-0 w-64 h-64 bg-brand-accent\/10 rounded-full -ml-32 -mb-32 blur-2xl\"><\/div>\r\n\r\n            <!-- Left: Text Content -->\r\n            <div class=\"lg:w-7\/12 p-8 md:p-16 z-10 text-white flex flex-col justify-center animate-fade\">\r\n                <div class=\"flex items-center gap-3 mb-6\">\r\n                    <span data-i18n=\"badge\" class=\"px-4 py-1.5 bg-brand-accent\/20 text-brand-accent rounded-full text-xs font-bold uppercase tracking-widest border border-brand-accent\/30\">\u0627\u0644\u062a\u0645\u064a\u0632 \u0627\u0644\u0637\u0628\u064a<\/span>\r\n                    <div class=\"h-[1px] w-12 bg-white\/30\"><\/div>\r\n                <\/div>\r\n                \r\n                <h1 class=\"text-3xl md:text-5xl lg:text-6xl font-extrabold mb-6 leading-[1.2]\">\r\n                    <span data-i18n=\"title1\">\u0631\u0639\u0627\u064a\u0629 \u0637\u0628\u064a\u0629 \u062a\u062e\u0635\u0635\u064a\u0629<\/span><br>\r\n                    <span data-i18n=\"title2\" class=\"text-brand-accent\">\u0628\u0645\u0639\u0627\u064a\u064a\u0631 \u0639\u0627\u0644\u0645\u064a\u0629 \u062d\u062f\u064a\u062b\u0629<\/span>\r\n                <\/h1>\r\n                \r\n                <p data-i18n=\"description\" class=\"text-blue-50\/90 text-lg md:text-xl mb-10 max-w-2xl leading-relaxed\">\r\n                    \u0646\u0644\u062a\u0632\u0645 \u0641\u064a \u0645\u0633\u062a\u0634\u0641\u064a\u0627\u062a \u0631\u0624\u064a\u0629 \u0628\u062a\u0642\u062f\u064a\u0645 \u0623\u0641\u0636\u0644 \u0627\u0644\u062d\u0644\u0648\u0644 \u0627\u0644\u062c\u0631\u0627\u062d\u064a\u0629 \u0644\u0644\u0639\u064a\u0648\u0646 \u0648\u0627\u0644\u0634\u0628\u0643\u064a\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0637\u0628\u064a\u0629\u060c \u0645\u0639 \u0631\u0624\u064a\u0629 \u0625\u0646\u0633\u0627\u0646\u064a\u0629 \u062a\u0645\u062a\u062f \u0644\u062a\u0635\u0644 \u0625\u0644\u0649 \u0643\u0644 \u0645\u062d\u062a\u0627\u062c.\r\n                <\/p>\r\n\r\n                <!-- Feature Card -->\r\n                <div class=\"glass-panel rounded-3xl p-6 md:p-8 text-slate-800 shadow-2xl mb-10 border border-white\/20 hover-lift\">\r\n                    <div class=\"flex flex-col md:flex-row items-start gap-5\">\r\n                        <div class=\"bg-brand-blue\/10 p-4 rounded-2xl shrink-0\">\r\n                            <span class=\"material-icons-outlined text-brand-blue text-4xl\">volunteer_activism<\/span>\r\n                        <\/div>\r\n                        <div class=\"flex-grow\">\r\n                            <h3 data-i18n=\"card-title\" class=\"text-xl md:text-2xl font-bold text-brand-blue mb-3\">\u0627\u0644\u0645\u062e\u064a\u0645\u0627\u062a \u0627\u0644\u0639\u0644\u0627\u062c\u064a\u0629 \u0627\u0644\u0625\u0646\u0633\u0627\u0646\u064a\u0629<\/h3>\r\n                            <p data-i18n=\"card-text\" class=\"text-slate-600 text-base leading-relaxed mb-6\">\r\n                                \u0646\u0648\u0641\u0631 \u062e\u062f\u0645\u0627\u062a \u0641\u062d\u0635 \u0648\u0639\u0644\u0627\u062c \u0645\u062c\u0627\u0646\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0646\u0627\u0626\u064a\u0629 \u0644\u0636\u0645\u0627\u0646 \u0648\u0635\u0648\u0644 \u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u0629 \u0644\u0644\u062c\u0645\u064a\u0639 \u0628\u0623\u0639\u0644\u0649 \u062c\u0648\u062f\u0629 \u0645\u0645\u0643\u0646\u0629.\r\n                            <\/p>\r\n                            <div class=\"flex flex-wrap gap-4 items-center\">\r\n                                <a href=\"#\" class=\"bg-brand-blue text-white px-7 py-3.5 rounded-xl font-bold text-sm hover:bg-brand-dark transition-all flex items-center gap-2 shadow-lg shadow-brand-blue\/20\">\r\n                                    <span class=\"material-icons-outlined text-lg\">calendar_today<\/span>\r\n                                    <span data-i18n=\"btn-book\">\u062d\u062c\u0632 \u0645\u0648\u0639\u062f<\/span>\r\n                                <\/a>\r\n                                <a href=\"#\" class=\"bg-slate-100 text-brand-blue px-7 py-3.5 rounded-xl font-bold text-sm hover:bg-slate-200 transition-all\">\r\n                                    <span data-i18n=\"btn-news\">\u0622\u062e\u0631 \u0627\u0644\u0623\u062e\u0628\u0627\u0631<\/span>\r\n                                <\/a>\r\n                                \r\n                                <div class=\"hidden xl:block h-10 w-[1px] bg-slate-200 mx-2\"><\/div>\r\n                                \r\n                                <div class=\"flex items-center gap-3\">\r\n                                    <a href=\"https:\/\/www.facebook.com\/roayae1\" target=\"_blank\" class=\"w-11 h-11 rounded-full bg-[#1877F2] text-white flex items-center justify-center hover:scale-110 transition-transform\">\r\n                                        <span class=\"material-icons-outlined text-xl\">facebook<\/span>\r\n                                    <\/a>\r\n                                    <a href=\"https:\/\/www.youtube.com\/@Roayae1\" target=\"_blank\" class=\"w-11 h-11 rounded-full bg-[#FF0000] text-white flex items-center justify-center hover:scale-110 transition-transform\">\r\n                                        <span class=\"material-icons-outlined text-xl\">smart_display<\/span>\r\n                                    <\/a>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"flex items-center gap-5\">\r\n                    <div class=\"flex -space-x-4 space-x-reverse\">\r\n                        <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/100?img=11\" class=\"w-12 h-12 rounded-full border-4 border-brand-blue ring-2 ring-white\/10\">\r\n                        <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/100?img=12\" class=\"w-12 h-12 rounded-full border-4 border-brand-blue ring-2 ring-white\/10\">\r\n                        <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/100?img=13\" class=\"w-12 h-12 rounded-full border-4 border-brand-blue ring-2 ring-white\/10\">\r\n                        <div class=\"w-12 h-12 rounded-full bg-brand-accent border-4 border-brand-blue flex items-center justify-center text-xs font-black text-brand-blue shadow-lg\">+20k<\/div>\r\n                    <\/div>\r\n                    <p data-i18n=\"stats\" class=\"text-sm md:text-base text-blue-100 font-medium\">\u0623\u0643\u062b\u0631 \u0645\u0646 20,000 \u0645\u0631\u064a\u0636 \u062a\u0645 \u0639\u0644\u0627\u062c\u0647\u0645 \u0628\u0646\u062c\u0627\u062d \u062a\u0627\u0645<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Right: Image Section (Fixed Alignment) -->\r\n            <div class=\"lg:w-5\/12 relative min-h-[450px] lg:min-h-full group overflow-hidden\">\r\n                <img decoding=\"async\" src=\"https:\/\/roayae.org\/wp-content\/uploads\/2023\/11\/ft.jpg\" \r\n                     alt=\"Roaya Center\" \r\n                     class=\"absolute inset-0 w-full h-full object-cover object-center transition-transform duration-1000 group-hover:scale-110\">\r\n                \r\n                <!-- Advanced Overlay -->\r\n                <div class=\"absolute inset-0 bg-gradient-to-t from-brand-dark\/90 via-brand-blue\/20 to-transparent\"><\/div>\r\n                <div class=\"absolute inset-0 bg-gradient-to-r from-brand-dark\/40 to-transparent lg:from-transparent lg:bg-none\"><\/div>\r\n                \r\n                <div class=\"absolute bottom-10 left-0 right-0 text-center transform transition-all duration-500 group-hover:-translate-y-2\">\r\n                    <div class=\"inline-block px-6 py-2 bg-white\/10 backdrop-blur-md border border-white\/20 rounded-full\">\r\n                         <p data-i18n=\"img-label\" class=\"text-white font-bold text-lg tracking-wide\">\u0645\u0631\u0643\u0632 \u0631\u0624\u064a\u0629 \u0644\u0637\u0628 \u0627\u0644\u0639\u064a\u0648\u0646<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <script>\r\n        const translations = {\r\n            ar: {\r\n                badge: \"\u0627\u0644\u062a\u0645\u064a\u0632 \u0627\u0644\u0637\u0628\u064a\",\r\n                title1: \"\u0631\u0639\u0627\u064a\u0629 \u0637\u0628\u064a\u0629 \u062a\u062e\u0635\u0635\u064a\u0629\",\r\n                title2: \"\u0628\u0645\u0639\u0627\u064a\u064a\u0631 \u0639\u0627\u0644\u0645\u064a\u0629 \u062d\u062f\u064a\u062b\u0629\",\r\n                description: \"\u0646\u0644\u062a\u0632\u0645 \u0641\u064a \u0645\u0633\u062a\u0634\u0641\u064a\u0627\u062a \u0631\u0624\u064a\u0629 \u0628\u062a\u0642\u062f\u064a\u0645 \u0623\u0641\u0636\u0644 \u0627\u0644\u062d\u0644\u0648\u0644 \u0627\u0644\u062c\u0631\u0627\u062d\u064a\u0629 \u0644\u0644\u0639\u064a\u0648\u0646 \u0648\u0627\u0644\u0634\u0628\u0643\u064a\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0637\u0628\u064a\u0629\u060c \u0645\u0639 \u0631\u0624\u064a\u0629 \u0625\u0646\u0633\u0627\u0646\u064a\u0629 \u062a\u0645\u062a\u062f \u0644\u062a\u0635\u0644 \u0625\u0644\u0649 \u0643\u0644 \u0645\u062d\u062a\u0627\u062c.\",\r\n                \"card-title\": \"\u0627\u0644\u0645\u062e\u064a\u0645\u0627\u062a \u0627\u0644\u0639\u0644\u0627\u062c\u064a\u0629 \u0627\u0644\u0625\u0646\u0633\u0627\u0646\u064a\u0629\",\r\n                \"card-text\": \"\u0646\u0648\u0641\u0631 \u062e\u062f\u0645\u0627\u062a \u0641\u062d\u0635 \u0648\u0639\u0644\u0627\u062c \u0645\u062c\u0627\u0646\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0646\u0627\u0626\u064a\u0629 \u0644\u0636\u0645\u0627\u0646 \u0648\u0635\u0648\u0644 \u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u0629 \u0644\u0644\u062c\u0645\u064a\u0639 \u0628\u0623\u0639\u0644\u0649 \u062c\u0648\u062f\u0629 \u0645\u0645\u0643\u0646\u0629.\",\r\n                \"btn-book\": \"\u062d\u062c\u0632 \u0645\u0648\u0639\u062f\",\r\n                \"btn-news\": \"\u0622\u062e\u0631 \u0627\u0644\u0623\u062e\u0628\u0627\u0631\",\r\n                stats: \"\u0623\u0643\u062b\u0631 \u0645\u0646 20,000 \u0645\u0631\u064a\u0636 \u062a\u0645 \u0639\u0644\u0627\u062c\u0647\u0645 \u0628\u0646\u062c\u0627\u062d \u062a\u0627\u0645\",\r\n                \"img-label\": \"\u0645\u0631\u0643\u0632 \u0631\u0624\u064a\u0629 \u0644\u0637\u0628 \u0627\u0644\u0639\u064a\u0648\u0646\"\r\n            },\r\n            en: {\r\n                badge: \"MEDICAL EXCELLENCE\",\r\n                title1: \"Specialized Medical Care\",\r\n                title2: \"Modern Global Standards\",\r\n                description: \"At Roaya Hospitals, we are committed to providing the best surgical solutions for eyes and retina using the latest medical technologies, with a humanitarian vision.\",\r\n                \"card-title\": \"Humanitarian Medical Camps\",\r\n                \"card-text\": \"We provide free examination and treatment services in remote areas to ensure healthcare accessibility for all with the highest quality.\",\r\n                \"btn-book\": \"Book Appointment\",\r\n                \"btn-news\": \"Latest News\",\r\n                stats: \"More than 20,000 patients treated successfully\",\r\n                \"img-label\": \"Roaya Eye Center\"\r\n            }\r\n        };\r\n\r\n        function updateLanguage() {\r\n            const lang = document.documentElement.getAttribute('lang') || 'ar';\r\n            const elements = document.querySelectorAll('[data-i18n]');\r\n            elements.forEach(el => {\r\n                const key = el.getAttribute('data-i18n');\r\n                if (translations[lang] && translations[lang][key]) {\r\n                    el.innerText = translations[lang][key];\r\n                }\r\n            });\r\n        }\r\n\r\n        const observer = new MutationObserver((mutations) => {\r\n            mutations.forEach((mutation) => {\r\n                if (mutation.type === 'attributes' && mutation.attributeName === 'lang') {\r\n                    updateLanguage();\r\n                }\r\n            });\r\n        });\r\n\r\n        observer.observe(document.documentElement, { attributes: true });\r\n        document.addEventListener('DOMContentLoaded', updateLanguage);\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d61844a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d61844a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b716993\" data-id=\"b716993\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9800ae9 elementor-widget elementor-widget-html\" data-id=\"9800ae9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\r\n    <title>\u0646\u0638\u0627\u0645 \u062d\u062c\u0632 \u0627\u0644\u0645\u062e\u064a\u0645 \u0627\u0644\u0637\u0628\u064a \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a<\/title>\r\n    \r\n    <!-- Fonts & Style -->\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"\/>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\"><\/script>\r\n    \r\n    <script>\r\n        tailwind.config = {\r\n            theme: {\r\n                extend: {\r\n                    fontFamily: { sans: ['Tajawal', 'sans-serif'] },\r\n                    colors: {\r\n                        brand: { 50: '#f0f9ff', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1' }\r\n                    },\r\n                    animation: {\r\n                        'fade-in': 'fadeIn 0.5s ease-out',\r\n                        'slide-up': 'slideUp 0.6s ease-out'\r\n                    },\r\n                    keyframes: {\r\n                        fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },\r\n                        slideUp: { '0%': { transform: 'translateY(10px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    <\/script>\r\n\r\n    <style>\r\n        .custom-scrollbar::-webkit-scrollbar { width: 5px; }\r\n        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }\r\n        .iso-generator-root { position: fixed; left: -9999px; top: 0; z-index: -1; }\r\n        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800 antialiased min-h-screen selection:bg-brand-500 selection:text-white\">\r\n\r\n    <!-- ADMIN LOGIN BAR -->\r\n    <div class=\"w-full bg-slate-900 text-white sticky top-0 z-[100] shadow-xl\">\r\n        <div class=\"max-w-7xl mx-auto px-4 h-14 flex items-center justify-between\">\r\n            <div class=\"flex items-center gap-3\">\r\n                <div class=\"w-8 h-8 rounded-full bg-brand-500 flex items-center justify-center text-white text-xs\">\r\n                    <i class=\"fas fa-lock\"><\/i>\r\n                <\/div>\r\n                <span class=\"text-xs font-bold tracking-wide\">\u0628\u0648\u0627\u0628\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u0645\u0631\u0643\u0632\u064a\u0629<\/span>\r\n            <\/div>\r\n            \r\n            <div id=\"adminLoginForm\" class=\"flex items-center gap-2\">\r\n                <div class=\"relative\">\r\n                    <input type=\"password\" id=\"adminPassword\" placeholder=\"\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631\" class=\"bg-slate-800 border border-slate-700 rounded-lg px-4 py-1.5 text-xs focus:ring-2 focus:ring-brand-500 outline-none w-36 md:w-48 transition-all\">\r\n                    <button type=\"button\" onclick=\"togglePasswordVisibility()\" class=\"absolute left-2 top-1\/2 -translate-y-1\/2 text-slate-500 hover:text-white text-xs\">\r\n                        <i id=\"eyeIcon\" class=\"fas fa-eye\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n                <button onclick=\"handleLogin()\" class=\"bg-brand-600 hover:bg-brand-500 text-white text-xs px-5 py-1.5 rounded-lg transition-all font-bold\">\u062f\u062e\u0648\u0644<\/button>\r\n            <\/div>\r\n\r\n            <div id=\"adminStatus\" class=\"hidden flex items-center gap-4\">\r\n                <div class=\"flex items-center gap-2\">\r\n                    <span class=\"w-2 h-2 bg-green-500 rounded-full animate-pulse\"><\/span>\r\n                    <span class=\"text-xs font-bold\">\u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u0646\u0634\u0637 (\u0627\u0644\u0645\u062f\u064a\u0631)<\/span>\r\n                <\/div>\r\n                <button onclick=\"openAdminModal()\" class=\"bg-white\/10 hover:bg-white\/20 text-xs px-3 py-1 rounded-md\">\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/button>\r\n                <button onclick=\"logout()\" class=\"text-xs text-red-400 hover:text-red-300 font-bold\">\u062e\u0631\u0648\u062c<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- MAIN UI -->\r\n    <main class=\"py-10 px-4 max-w-7xl mx-auto\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-10 items-start\">\r\n            \r\n            <!-- Info Side -->\r\n            <div class=\"lg:col-span-5 space-y-6\">\r\n                <div class=\"bg-white rounded-[2rem] p-8 shadow-2xl shadow-slate-200\/50 border border-slate-100 relative overflow-hidden animate-slide-up\">\r\n                    <div class=\"absolute top-0 right-0 w-full h-2 bg-gradient-to-r from-brand-500 to-indigo-600\"><\/div>\r\n                    \r\n                    <div class=\"flex items-center gap-5 mb-8\">\r\n                        <div class=\"p-1 bg-slate-50 rounded-2xl shadow-inner\">\r\n                            <img decoding=\"async\" id=\"headerLogo\" src=\"\" class=\"w-24 h-24 rounded-xl object-cover\" alt=\"Logo\">\r\n                        <\/div>\r\n                        <div>\r\n                            <h1 id=\"headerTitle\" class=\"text-2xl font-black text-slate-900 leading-tight\"><\/h1>\r\n                            <p id=\"headerSubtitle\" class=\"text-sm text-brand-600 font-bold mt-1\"><\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"space-y-6\">\r\n                        <div>\r\n                            <h2 class=\"text-3xl font-extrabold text-slate-900 mb-3\">\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u0627\u0644\u062d\u062c\u0632<\/h2>\r\n                            <div class=\"flex items-center gap-2 text-slate-500\">\r\n                                <i class=\"fas fa-map-marker-alt text-brand-500\"><\/i>\r\n                                <span id=\"displayLocationName\" class=\"text-sm font-bold\"><\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"bg-slate-900 rounded-3xl p-6 text-white shadow-xl relative overflow-hidden\">\r\n                            <div class=\"relative z-10\">\r\n                                <div class=\"flex justify-between items-center mb-4\">\r\n                                    <span class=\"text-xs font-bold opacity-70 uppercase tracking-widest\">\u062d\u0627\u0644\u0629 \u0627\u0644\u0645\u0642\u0627\u0639\u062f<\/span>\r\n                                    <i class=\"fas fa-hospital-user text-brand-500\"><\/i>\r\n                                <\/div>\r\n                                <div class=\"flex items-baseline gap-3\">\r\n                                    <span id=\"seatsLeft\" class=\"text-6xl font-black tracking-tighter\"><\/span>\r\n                                    <span class=\"text-lg font-bold opacity-50\">\u0645\u0642\u0639\u062f \u0645\u062a\u0628\u0642\u064a<\/span>\r\n                                <\/div>\r\n                                <div class=\"mt-6 w-full bg-white\/10 h-3 rounded-full overflow-hidden\">\r\n                                    <div id=\"seatProgress\" class=\"h-full bg-brand-500 transition-all duration-1000 shadow-[0_0_15px_rgba(14,165,233,0.5)]\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"absolute -bottom-6 -left-6 w-32 h-32 bg-brand-500\/10 rounded-full blur-2xl\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Form Side -->\r\n            <div class=\"lg:col-span-7\">\r\n                <div class=\"bg-white rounded-[2rem] p-10 shadow-2xl border border-slate-100 animate-slide-up\" style=\"animation-delay: 0.1s\">\r\n                    <div class=\"mb-8\">\r\n                        <h3 class=\"text-xl font-black text-slate-800 flex items-center gap-3\">\r\n                            <span class=\"w-10 h-10 rounded-xl bg-brand-50 text-brand-500 flex items-center justify-center shadow-sm\"><i class=\"fas fa-id-card\"><\/i><\/span>\r\n                            \u0625\u0635\u062f\u0627\u0631 \u0628\u0637\u0627\u0642\u0629 \u062d\u062c\u0632 \u0630\u0643\u064a\u0629\r\n                        <\/h3>\r\n                        <p class=\"text-slate-400 text-sm mt-2 mr-13\">\u064a\u0631\u062c\u0649 \u0625\u062f\u062e\u0627\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0628\u062f\u0642\u0629 \u0644\u0636\u0645\u0627\u0646 \u0635\u062d\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0629<\/p>\r\n                    <\/div>\r\n\r\n                    <form id=\"bookingForm\" class=\"space-y-6\">\r\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n                            <div class=\"space-y-2\">\r\n                                <label class=\"text-[11px] font-black text-slate-500 mr-2 uppercase\">\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0631\u0628\u0627\u0639\u064a \u0644\u0644\u0645\u0631\u064a\u0636<\/label>\r\n                                <div class=\"relative\">\r\n                                    <input type=\"text\" id=\"fullName\" required class=\"w-full pr-12 pl-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-brand-500\/20 focus:border-brand-500 outline-none transition-all font-bold\" placeholder=\"\u0645\u062b\u0627\u0644: \u0645\u062d\u0645\u062f \u0639\u0644\u064a \u0633\u0627\u0644\u0645\">\r\n                                    <i class=\"fas fa-user absolute right-5 top-1\/2 -translate-y-1\/2 text-slate-300\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"space-y-2\">\r\n                                <label class=\"text-[11px] font-black text-slate-500 mr-2 uppercase\">\u0631\u0642\u0645 \u0627\u0644\u062c\u0648\u0627\u0644 (\u0648\u0627\u062a\u0633\u0627\u0628)<\/label>\r\n                                <div class=\"relative\">\r\n                                    <input type=\"tel\" id=\"phone\" required class=\"w-full pr-12 pl-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-brand-500\/20 focus:border-brand-500 outline-none transition-all font-bold\" placeholder=\"00967\">\r\n                                    <i class=\"fas fa-phone absolute right-5 top-1\/2 -translate-y-1\/2 text-slate-300\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n                            <div class=\"space-y-2\">\r\n                                <label class=\"text-[11px] font-black text-slate-500 mr-2 uppercase\">\u0627\u0644\u0645\u0648\u0642\u0639 \/ \u0627\u0644\u0641\u0631\u0639<\/label>\r\n                                <div class=\"relative\">\r\n                                    <select id=\"branchSelect\" required class=\"w-full pr-12 pl-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-brand-500\/20 focus:border-brand-500 outline-none transition-all appearance-none font-bold cursor-pointer\">\r\n                                    <\/select>\r\n                                    <i class=\"fas fa-hospital absolute right-5 top-1\/2 -translate-y-1\/2 text-slate-300\"><\/i>\r\n                                    <i class=\"fas fa-chevron-down absolute left-5 top-1\/2 -translate-y-1\/2 text-slate-400 text-[10px]\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"space-y-2\">\r\n                                <label class=\"text-[11px] font-black text-slate-500 mr-2 uppercase\">\u0646\u0648\u0639 \u0627\u0644\u062d\u0627\u0644\u0629 \/ \u0645\u0644\u0627\u062d\u0638\u0627\u062a<\/label>\r\n                                <div class=\"relative\">\r\n                                    <input type=\"text\" id=\"description\" class=\"w-full pr-12 pl-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-brand-500\/20 focus:border-brand-500 outline-none transition-all font-bold\" placeholder=\"\u0645\u062b\u0627\u0644: \u0641\u062d\u0635 \u0639\u064a\u0648\u0646\u060c \u0633\u0643\u0631\u064a...\">\r\n                                    <i class=\"fas fa-notes-medical absolute right-5 top-1\/2 -translate-y-1\/2 text-slate-300\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <button type=\"submit\" class=\"w-full bg-slate-900 hover:bg-brand-600 text-white font-black py-5 rounded-2xl shadow-xl transition-all active:scale-[0.98] flex items-center justify-center gap-3 group mt-4\">\r\n                            \u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062d\u062c\u0632 \u0648\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629\r\n                            <i class=\"fas fa-download group-hover:animate-bounce\"><\/i>\r\n                        <\/button>\r\n                    <\/form>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/main>\r\n\r\n    <!-- ADMIN MODAL -->\r\n    <div id=\"adminModal\" class=\"fixed inset-0 z-[200] hidden flex items-center justify-center p-4 overflow-y-auto\">\r\n        <div class=\"fixed inset-0 bg-slate-900\/90 backdrop-blur-md\" onclick=\"closeAdminModal()\"><\/div>\r\n        <div class=\"bg-white w-full max-w-3xl rounded-[2.5rem] shadow-2xl relative overflow-hidden animate-slide-up flex flex-col max-h-[90vh]\">\r\n            <div class=\"p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50\">\r\n                <h3 class=\"font-black text-slate-800\">\u0625\u062f\u0627\u0631\u0629 \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0646\u0638\u0627\u0645<\/h3>\r\n                <button onclick=\"closeAdminModal()\" class=\"text-slate-400 hover:text-red-500 transition-colors\"><i class=\"fas fa-times\"><\/i><\/button>\r\n            <\/div>\r\n            <div class=\"p-8 overflow-y-auto custom-scrollbar flex-1 space-y-8\">\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n                    <div>\r\n                        <label class=\"block text-[11px] font-bold text-slate-400 mb-2 uppercase mr-1\">\u0627\u0633\u0645 \u0627\u0644\u0645\u0631\u0643\u0632 \/ \u0627\u0644\u0645\u062e\u064a\u0645<\/label>\r\n                        <input type=\"text\" id=\"confTitle\" class=\"w-full p-4 bg-slate-50 border rounded-2xl outline-none focus:border-brand-500 font-bold\">\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-[11px] font-bold text-slate-400 mb-2 uppercase mr-1\">\u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0641\u0631\u0639\u064a<\/label>\r\n                        <input type=\"text\" id=\"confSubtitle\" class=\"w-full p-4 bg-slate-50 border rounded-2xl outline-none focus:border-brand-500 font-bold\">\r\n                    <\/div>\r\n                    <div class=\"md:col-span-2\">\r\n                        <label class=\"block text-[11px] font-bold text-slate-400 mb-2 uppercase mr-1\">\u0631\u0627\u0628\u0637 \u0627\u0644\u0634\u0639\u0627\u0631 (URL)<\/label>\r\n                        <input type=\"text\" id=\"confLogo\" class=\"w-full p-4 bg-slate-50 border rounded-2xl outline-none focus:border-brand-500 font-bold\">\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-[11px] font-bold text-slate-400 mb-2 uppercase mr-1\">\u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u062c\u063a\u0631\u0627\u0641\u064a<\/label>\r\n                        <input type=\"text\" id=\"confLocation\" class=\"w-full p-4 bg-slate-50 border rounded-2xl outline-none focus:border-brand-500 font-bold\">\r\n                    <\/div>\r\n                    <div class=\"grid grid-cols-2 gap-4\">\r\n                        <div>\r\n                            <label class=\"block text-[11px] font-bold text-slate-400 mb-2 uppercase mr-1\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0642\u0627\u0639\u062f<\/label>\r\n                            <input type=\"number\" id=\"confTotalSeats\" class=\"w-full p-4 bg-slate-50 border rounded-2xl outline-none focus:border-brand-500 font-bold\">\r\n                        <\/div>\r\n                        <div>\r\n                            <label class=\"block text-[11px] font-bold text-slate-400 mb-2 uppercase mr-1\">\u0627\u0644\u0645\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062a\u0628\u0642\u064a\u0629<\/label>\r\n                            <input type=\"number\" id=\"confCurrentSeats\" class=\"w-full p-4 bg-slate-50 border rounded-2xl outline-none focus:border-brand-500 font-bold\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"space-y-4\">\r\n                    <h4 class=\"text-sm font-black text-slate-800 flex items-center gap-2\">\r\n                        \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0641\u0631\u0648\u0639 \u0648\u0648\u0627\u062a\u0633\u0627\u0628 \u0627\u0644\u062a\u0648\u0627\u0635\u0644\r\n                        <span class=\"text-[10px] bg-brand-100 text-brand-600 px-2 py-0.5 rounded-full\">\u062a\u0639\u062f\u064a\u0644 \u0645\u0628\u0627\u0634\u0631<\/span>\r\n                    <\/h4>\r\n                    <div id=\"adminBranchList\" class=\"grid grid-cols-1 gap-3\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"p-6 bg-slate-50 border-t border-slate-100 grid grid-cols-2 gap-4\">\r\n                <button onclick=\"closeAdminModal()\" class=\"py-4 rounded-2xl font-bold text-slate-500 bg-white border border-slate-200 transition-all hover:bg-slate-100\">\u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u062a\u063a\u064a\u064a\u0631\u0627\u062a<\/button>\r\n                <button onclick=\"saveAdminSettings()\" class=\"py-4 rounded-2xl font-bold text-white bg-brand-600 shadow-xl transition-all hover:bg-brand-700\">\u062d\u0641\u0638 \u0643\u0627\u0641\u0629 \u0627\u0644\u062a\u0639\u062f\u064a\u0644\u0627\u062a<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- LOADING -->\r\n    <div id=\"loadingOverlay\" class=\"fixed inset-0 z-[300] bg-slate-900\/90 hidden items-center justify-center flex-col\">\r\n        <div class=\"w-16 h-16 border-4 border-white\/10 border-t-brand-500 rounded-full animate-spin\"><\/div>\r\n        <p class=\"mt-6 font-bold text-white tracking-widest\">\u062c\u0627\u0631\u064a \u0645\u0639\u0627\u0644\u062c\u0629 \u0637\u0644\u0628\u0643 \u0648\u0625\u0635\u062f\u0627\u0631 \u0627\u0644\u0628\u0637\u0627\u0642\u0629...<\/p>\r\n    <\/div>\r\n\r\n    <!-- HIDDEN CANVAS TARGET -->\r\n    <div id=\"canvasContainer\" class=\"iso-generator-root\"><\/div>\r\n\r\n    <script>\r\n        const ADMIN_PWD = 'aT6R9d';\r\n        const LOGO_DEFAULT = 'https:\/\/yt3.googleusercontent.com\/ytc\/AIdro_n6w4nU4g08-YHA6evXLzuCtJtJRbGZRO4rNPn71R6xng=s160-c-k-c0x00ffffff-no-rj';\r\n        \r\n        const DEFAULT_CONFIG = {\r\n            title: '\u0645\u0631\u0643\u0632 \u0631\u0624\u064a\u0629 \u0644\u0637\u0628 \u0648\u062c\u0631\u0627\u062d\u0629 \u0627\u0644\u0639\u064a\u0648\u0646',\r\n            subtitle: '\u0627\u0644\u0645\u062e\u064a\u0645 \u0627\u0644\u0637\u0628\u064a \u0627\u0644\u0645\u062c\u0627\u0646\u064a \u0627\u0644\u0645\u062a\u0642\u062f\u0645',\r\n            logo: LOGO_DEFAULT,\r\n            location: '\u0627\u0644\u064a\u0645\u0646 - \u0641\u0631\u0648\u0639\u0646\u0627 (\u0633\u064a\u0626\u0648\u0646\u060c \u0627\u0644\u0645\u0643\u0644\u0627\u060c \u0627\u0644\u0634\u062d\u0631\u060c \u0639\u062f\u0646)',\r\n            totalSeats: 200,\r\n            currentSeats: 145,\r\n            branches: [\r\n                { id: 1, name: '\u0641\u0631\u0639 \u0633\u064a\u0626\u0648\u0646', phone: '967733333333', active: true },\r\n                { id: 2, name: '\u0641\u0631\u0639 \u0639\u062f\u0646', phone: '967711111111', active: true },\r\n                { id: 3, name: '\u0641\u0631\u0639 \u0627\u0644\u0645\u0643\u0644\u0627', phone: '967700000000', active: true },\r\n                { id: 4, name: '\u0641\u0631\u0639 \u0627\u0644\u0634\u062d\u0631', phone: '967744444444', active: true }\r\n            ]\r\n        };\r\n\r\n        let appConfig = JSON.parse(localStorage.getItem('medical_camp_v2')) || DEFAULT_CONFIG;\r\n\r\n        function init() {\r\n            renderUI();\r\n        }\r\n\r\n        function renderUI() {\r\n            document.getElementById('headerLogo').src = appConfig.logo;\r\n            document.getElementById('headerTitle').textContent = appConfig.title;\r\n            document.getElementById('headerSubtitle').textContent = appConfig.subtitle;\r\n            document.getElementById('displayLocationName').textContent = appConfig.location;\r\n            document.getElementById('seatsLeft').textContent = appConfig.currentSeats;\r\n            \r\n            const progress = (appConfig.currentSeats \/ appConfig.totalSeats) * 100;\r\n            document.getElementById('seatProgress').style.width = progress + '%';\r\n\r\n            const select = document.getElementById('branchSelect');\r\n            select.innerHTML = '<option value=\"\" disabled selected>\u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639 \u0627\u0644\u0623\u0642\u0631\u0628 \u0644\u0625\u062c\u0631\u0627\u0621 \u0627\u0644\u0641\u062d\u0635<\/option>';\r\n            appConfig.branches.filter(b => b.active).forEach(b => {\r\n                const opt = document.createElement('option');\r\n                opt.value = b.id;\r\n                opt.textContent = b.name;\r\n                select.appendChild(opt);\r\n            });\r\n        }\r\n\r\n        function togglePasswordVisibility() {\r\n            const pwd = document.getElementById('adminPassword');\r\n            const icon = document.getElementById('eyeIcon');\r\n            if(pwd.type === 'password') { pwd.type = 'text'; icon.className = 'fas fa-eye-slash'; } \r\n            else { pwd.type = 'password'; icon.className = 'fas fa-eye'; }\r\n        }\r\n\r\n        function handleLogin() {\r\n            const pwd = document.getElementById('adminPassword').value;\r\n            if(pwd === ADMIN_PWD) {\r\n                document.getElementById('adminLoginForm').classList.add('hidden');\r\n                document.getElementById('adminStatus').classList.remove('hidden');\r\n                openAdminModal();\r\n            } else {\r\n                alert('\u0639\u0630\u0631\u0627\u064b! \u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631 \u063a\u064a\u0631 \u0635\u062d\u064a\u062d\u0629');\r\n            }\r\n        }\r\n\r\n        function logout() {\r\n            document.getElementById('adminPassword').value = '';\r\n            document.getElementById('adminLoginForm').classList.remove('hidden');\r\n            document.getElementById('adminStatus').classList.add('hidden');\r\n            closeAdminModal();\r\n        }\r\n\r\n        function openAdminModal() {\r\n            document.getElementById('adminModal').classList.remove('hidden');\r\n            document.body.style.overflow = 'hidden';\r\n            \r\n            document.getElementById('confTitle').value = appConfig.title;\r\n            document.getElementById('confSubtitle').value = appConfig.subtitle;\r\n            document.getElementById('confLogo').value = appConfig.logo;\r\n            document.getElementById('confLocation').value = appConfig.location;\r\n            document.getElementById('confTotalSeats').value = appConfig.totalSeats;\r\n            document.getElementById('confCurrentSeats').value = appConfig.currentSeats;\r\n\r\n            renderAdminBranches();\r\n        }\r\n\r\n        function renderAdminBranches() {\r\n            const list = document.getElementById('adminBranchList');\r\n            list.innerHTML = '';\r\n            appConfig.branches.forEach((b, i) => {\r\n                const div = document.createElement('div');\r\n                div.className = `p-4 border rounded-2xl flex flex-wrap md:flex-nowrap items-center gap-4 transition-all ${b.active ? 'bg-white border-brand-200' : 'bg-slate-50 border-slate-200 opacity-60'}`;\r\n                div.innerHTML = `\r\n                    <input type=\"checkbox\" ${b.active ? 'checked' : ''} onchange=\"updateBranchActive(${i}, this.checked)\" class=\"w-5 h-5 accent-brand-600\">\r\n                    <input type=\"text\" value=\"${b.name}\" onchange=\"updateBranchName(${i}, this.value)\" class=\"flex-1 min-w-[120px] bg-transparent border-b font-bold outline-none\">\r\n                    <input type=\"text\" value=\"${b.phone}\" onchange=\"updateBranchPhone(${i}, this.value)\" class=\"flex-1 min-w-[120px] bg-transparent border-b font-mono text-sm outline-none\" dir=\"ltr\">\r\n                `;\r\n                list.appendChild(div);\r\n            });\r\n        }\r\n\r\n        function updateBranchActive(i, val) { appConfig.branches[i].active = val; }\r\n        function updateBranchName(i, val) { appConfig.branches[i].name = val; }\r\n        function updateBranchPhone(i, val) { appConfig.branches[i].phone = val; }\r\n\r\n        function closeAdminModal() {\r\n            document.getElementById('adminModal').classList.add('hidden');\r\n            document.body.style.overflow = 'auto';\r\n        }\r\n\r\n        function saveAdminSettings() {\r\n            appConfig.title = document.getElementById('confTitle').value;\r\n            appConfig.subtitle = document.getElementById('confSubtitle').value;\r\n            appConfig.logo = document.getElementById('confLogo').value || LOGO_DEFAULT;\r\n            appConfig.location = document.getElementById('confLocation').value;\r\n            appConfig.totalSeats = parseInt(document.getElementById('confTotalSeats').value);\r\n            appConfig.currentSeats = parseInt(document.getElementById('confCurrentSeats').value);\r\n            \r\n            localStorage.setItem('medical_camp_v2', JSON.stringify(appConfig));\r\n            renderUI();\r\n            closeAdminModal();\r\n            alert('\u062a\u0645 \u062d\u0641\u0638 \u0643\u0627\u0641\u0629 \u0627\u0644\u062a\u0639\u062f\u064a\u0644\u0627\u062a \u0628\u0646\u062c\u0627\u062d');\r\n        }\r\n\r\n        document.getElementById('bookingForm').onsubmit = async function(e) {\r\n            e.preventDefault();\r\n            if(appConfig.currentSeats <= 0) return alert('\u0639\u0630\u0631\u0627\u064b\u060c \u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0642\u0627\u0639\u062f \u0645\u062a\u0627\u062d\u0629 \u062d\u0627\u0644\u064a\u0627\u064b');\r\n\r\n            const overlay = document.getElementById('loadingOverlay');\r\n            overlay.classList.remove('hidden');\r\n            overlay.classList.add('flex');\r\n\r\n            const branchId = document.getElementById('branchSelect').value;\r\n            const branch = appConfig.branches.find(b => b.id == branchId);\r\n            \r\n            const data = {\r\n                name: document.getElementById('fullName').value,\r\n                phone: document.getElementById('phone').value,\r\n                branch: branch.name,\r\n                desc: document.getElementById('description').value || '\u0641\u062d\u0635 \u0639\u0627\u0645',\r\n                regNo: 'C' + Math.floor(10000 + Math.random() * 90000),\r\n                date: new Date().toLocaleDateString('ar-YE')\r\n            };\r\n\r\n            \/\/ Create professional card element\r\n            const cardHtml = `\r\n                <div id=\"printableCard\" style=\"width: 800px; height: 450px; background: white; border: 2px solid #e2e8f0; border-right: 25px solid #0284c7; padding: 50px; font-family: 'Tajawal', sans-serif; direction: rtl; display: flex; flex-direction: column; justify-content: space-between; position: relative;\">\r\n                    <div style=\"display: flex; justify-content: space-between; align-items: start;\">\r\n                        <div>\r\n                            <h1 style=\"font-size: 42px; font-weight: 900; color: #0f172a; margin: 0;\">\u062d\u062c\u0632 \u0628\u0627\u0644\u0645\u062e\u064a\u0645<\/h1>\r\n                            <p style=\"font-size: 18px; color: #0284c7; font-weight: 800; margin-top: 5px;\">${appConfig.title}<\/p>\r\n                        <\/div>\r\n                        <img decoding=\"async\" src=\"${appConfig.logo}\" style=\"width: 100px; height: 100px; border-radius: 15px; border: 4px solid #f8fafc; shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1);\">\r\n                    <\/div>\r\n\r\n                    <div style=\"display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; margin-top: 30px;\">\r\n                        <div style=\"padding: 15px; background: #f8fafc; border-radius: 12px;\">\r\n                            <p style=\"margin: 0; color: #64748b; font-size: 12px; font-weight: bold;\">\u0631\u0642\u0645 \u0627\u0644\u062d\u062c\u0632 \u0627\u0644\u0645\u0648\u062d\u062f<\/p>\r\n                            <p style=\"margin: 0; color: #0284c7; font-size: 32px; font-weight: 900; letter-spacing: 2px;\">#${data.regNo}<\/p>\r\n                        <\/div>\r\n                        <div style=\"display: grid; grid-template-columns: 1fr; gap: 10px;\">\r\n                            <p style=\"margin: 0; font-size: 16px;\"><strong style=\"color:#0284c7;\">\u0627\u0644\u0627\u0633\u0645:<\/strong> ${data.name}<\/p>\r\n                            <p style=\"margin: 0; font-size: 16px;\"><strong style=\"color:#0284c7;\">\u0627\u0644\u0647\u0627\u062a\u0641:<\/strong> ${data.phone}<\/p>\r\n                            <p style=\"margin: 0; font-size: 16px;\"><strong style=\"color:#0284c7;\">\u0627\u0644\u0641\u0631\u0639:<\/strong> ${data.branch}<\/p>\r\n                            <p style=\"margin: 0; font-size: 16px;\"><strong style=\"color:#0284c7;\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a:<\/strong> ${data.desc}<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div style=\"margin-top: 40px; padding: 15px 25px; border: 2px dashed #fca5a5; border-radius: 15px; background: #fff1f2;\">\r\n                        <p style=\"color: #dc2626; font-size: 14px; font-weight: 900; text-align: center; margin: 0;\">\r\n                            \u0647\u0630\u0647 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0644\u064a\u0633\u062a \u0645\u0644\u0632\u0645\u0629 \u0644\u0644\u0645\u0631\u0643\u0632 \u0648\u0644\u0643\u0646 \u0627\u0644\u063a\u0631\u0636 \u0645\u0646\u0647\u0627 \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u062d\u062c\u0648\u0632\u0627\u062a.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                    <div style=\"display: flex; justify-content: space-between; font-size: 11px; color: #94a3b8; font-weight: bold; border-top: 1px solid #f1f5f9; padding-top: 15px;\">\r\n                        <span>\u0646\u0638\u0627\u0645 \u0627\u0644\u062d\u062c\u0632 \u0627\u0644\u0630\u0643\u064a - v2.0.4<\/span>\r\n                        <span>\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0625\u0635\u062f\u0627\u0631: ${data.date}<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            `;\r\n\r\n            const container = document.getElementById('canvasContainer');\r\n            container.innerHTML = cardHtml;\r\n\r\n            try {\r\n                const canvas = await html2canvas(container.querySelector('#printableCard'), { scale: 2, useCORS: true });\r\n                const link = document.createElement('a');\r\n                link.download = `\u0628\u0637\u0627\u0642\u0629_\u062d\u062c\u0632_${data.name}.png`;\r\n                link.href = canvas.toDataURL('image\/png');\r\n                link.click();\r\n                \r\n                appConfig.currentSeats--;\r\n                localStorage.setItem('medical_camp_v2', JSON.stringify(appConfig));\r\n                renderUI();\r\n\r\n                setTimeout(() => {\r\n                    const waMsg = `*\u0637\u0644\u0628 \u062d\u062c\u0632 \u0645\u062e\u064a\u0645 \u0637\u0628\u064a*%0A*\u0627\u0644\u0627\u0633\u0645:* ${data.name}%0A*\u0631\u0642\u0645 \u0627\u0644\u062d\u062c\u0632:* ${data.regNo}%0A*\u0627\u0644\u0641\u0631\u0639:* ${data.branch}%0A*\u0627\u0644\u063a\u0631\u0636:* ${data.desc}`;\r\n                    window.location.href = `https:\/\/wa.me\/${branch.phone}?text=${waMsg}`;\r\n                }, 1000);\r\n            } catch(e) {\r\n                console.error(e);\r\n                alert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0625\u0635\u062f\u0627\u0631 \u0627\u0644\u0628\u0637\u0627\u0642\u0629');\r\n            } finally {\r\n                overlay.classList.add('hidden');\r\n                document.getElementById('bookingForm').reset();\r\n            }\r\n        };\r\n\r\n        init();\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b461430 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b461430\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5b87aab\" data-id=\"5b87aab\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u062a\u0645\u064a\u0632 \u0627\u0644\u0637\u0628\u064a \u0631\u0639\u0627\u064a\u0629 \u0637\u0628\u064a\u0629 \u062a\u062e\u0635\u0635\u064a\u0629 \u0628\u0645\u0639\u0627\u064a\u064a\u0631 \u0639\u0627\u0644\u0645\u064a\u0629 \u062d\u062f\u064a\u062b\u0629 \u0646\u0644\u062a\u0632\u0645 \u0641\u064a \u0645\u0633\u062a\u0634\u0641\u064a\u0627\u062a \u0631\u0624\u064a\u0629 \u0628\u062a\u0642\u062f\u064a\u0645 \u0623\u0641\u0636\u0644 \u0627\u0644\u062d\u0644\u0648\u0644 \u0627\u0644\u062c\u0631\u0627\u062d\u064a\u0629 \u0644\u0644\u0639\u064a\u0648\u0646 \u0648\u0627\u0644\u0634\u0628\u0643\u064a\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0637\u0628\u064a\u0629\u060c \u0645\u0639 \u0631\u0624\u064a\u0629 \u0625\u0646\u0633\u0627\u0646\u064a\u0629 \u062a\u0645\u062a\u062f \u0644\u062a\u0635\u0644 \u0625\u0644\u0649 \u0643\u0644 \u0645\u062d\u062a\u0627\u062c. volunteer_activism \u0627\u0644\u0645\u062e\u064a\u0645\u0627\u062a \u0627\u0644\u0639\u0644\u0627\u062c\u064a\u0629 \u0627\u0644\u0625\u0646\u0633\u0627\u0646\u064a\u0629 \u0646\u0648\u0641\u0631 \u062e\u062f\u0645\u0627\u062a \u0641\u062d\u0635 \u0648\u0639\u0644\u0627\u062c \u0645\u062c\u0627\u0646\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0646\u0627\u0626\u064a\u0629 \u0644\u0636\u0645\u0627\u0646 \u0648\u0635\u0648\u0644 \u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u0629 \u0644\u0644\u062c\u0645\u064a\u0639 \u0628\u0623\u0639\u0644\u0649 \u062c\u0648\u062f\u0629 \u0645\u0645\u0643\u0646\u0629. calendar_today \u062d\u062c\u0632 \u0645\u0648\u0639\u062f \u0622\u062e\u0631 \u0627\u0644\u0623\u062e\u0628\u0627\u0631 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8327,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-8374","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/pages\/8374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/comments?post=8374"}],"version-history":[{"count":100,"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/pages\/8374\/revisions"}],"predecessor-version":[{"id":9118,"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/pages\/8374\/revisions\/9118"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/media\/8327"}],"wp:attachment":[{"href":"https:\/\/roayae.org\/en\/wp-json\/wp\/v2\/media?parent=8374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}