<!--
                                                                                                                                    
 ▓██▓   ▓█░  ▒██████    ▒██████   ░███████              ▓██░  ███   ▒██████   ▓█▒    ██     ███▓    ▓██░  ███   ███████▓  ████████  
 ▓███▒  ▓█░ ▓█▓    ██░ ▓█▓    ██░ ░██   ▓█▓             ▓█▓█ ▒█▒█  ▓█▓    ██░ ▓█▒    ██    ▓█ ██    ▓█▓█ ▒█▒█   ██▒       ██░   ▒██ 
 ▓█░██  ▓█░ ██     ▓█▓ ██     ▓█▓ ░██   ██▒             ██ █░█▒▒█░ ██     ▓█▓ ▓█▒    ██    █▓ ▒█▓   ██ █░█▒▒█░  ██▒       ██░    ██▒
 ▓█░░██ ▓█░ ██     ▓█▓ ██     ▓█▓ ░██████░              ██ ███ ░█░ █▓     ▓█▓ ▓███▓████   ▓█░  ██   ██ ███ ░█░  ███████░  ██░    ▓█▓
 ▓█░ ▒█▓▓█░ ██     ▓█▓ ██     ▓█▓ ░██  ██▒              ██  █▒ ░█▒ ██     ▓█▓ ▓█▒    ██   ██   ▓█▓  ██  █▒ ░█▒  ██▒       ██░    ██▒
 ▓█░  ████░ ██▓    ██  ██▓    ██  ░██  ░██              █▓     ░█▓ ██▓    ██  ▓█▒    ██  ▓████████  █▓     ░█▓  ██▒       ██░   ▒██ 
 ▓█░   ███░  ███████░   ███████░  ░██   ▓██             █▓      █▓  ███████░  ▓█▒    ██  ██     ██▓ █▓      █▓  ███████▓  ████████  
 ▓█░   ▒██░    ▓█▓░       ▓█▓░    ░██    ██▒            █▓      █▓    ▓█▓░    ▓█▒    ██ ▓█▓     ▒██ █▓      █▓  ██████▓▓  ████▓▒    
                                                                                                                                    
                                                                                                                                    
   ▓████▒      ▓██░     ███████    ███████      ▓████░    █████▓    ██████░    ░█████        ▓███      ▓████░    █████▓             
  ██▓  ██▓  ▒██▓██░     ██         ██         ▒██▓       ██░  ▓██   ▒   ▒██░   ▓▓  ▓██░     ▓████    ▒██▓       ██░  ▓██            
 ██░   ░██▒     ██░     ██         ██        ░██         ██   ▓█▓        ██         ██▓    ▓█░░██   ░██         ██   ▓█▓            
 ██  ▓████▓     █▓░     ██████░    ██████░   ▓███████     █████░     ▓███▓         ░██    ▓█▒ ░██   ▓███████     █████░             
 █████░ ▓█▓     ██░         ▒██▓       ▒██▓  ▓██░  ▓██   ▒██▓███░       ▒██▓      ▒██    ▒█▓  ░██   ▓██░  ▓██   ▒██▓███░            
 ██▒    ██░     ██░          ░██        ░██  ▒█▓    ██░ ▓█▓    ██         ██    ░▓█░    ░█████████▓ ▒█▓    ██░ ▓█▓    ██            
  ██▓  ██▓      ██░     ▒   ▓██░   ▒   ▓██░   ██▓  ▓██  ▒██░  ▓██  ░░   ▒██▓   ▓█▓            ░██    ██▓  ▓██  ▒██░  ▓██            
   ▓████░    ████████   █████▓     █████▓      ▓████▒    ░█████▓   ░██████    ░████████       ░██     ▓████▒    ░█████▓             
                                                                                                                                    
-->

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-TXND73W4HB"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-TXND73W4HB');
    </script>

    <!-- ================= BASIC SEO META ================= -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>مجلس الشباب المصري | استمارة الانضمام</title>
    <meta
      name="description"
      content="استمارة الانضمام لمجلس الشباب المصري — قدّم طلبك إلكترونيًا."
    />
    <meta
      name="keywords"
      content="مجلس الشباب المصري, Egyptian Youth Council, استمارة انضمام, عضوية, تطوع"
    />
    <meta name="author" content="Egyptian Youth Council" />
    <meta name="language" content="ar" />

    <!-- ================= INDEXING / ROBOTS ================= -->
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
    <meta name="googlebot" content="index, follow" />
    <meta name="bingbot" content="index, follow" />

    <!-- ================= CANONICAL ================= -->
    <link rel="canonical" href="https://egy-youthcouncil.org/join.html" />

    <!-- ================= FAVICON ================= -->
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="apple-touch-icon" href="/favicon.ico" />

    <!-- ================= THEME COLOR ================= -->
    <meta name="theme-color" content="#083b8a" />

    <!-- ================= OPEN GRAPH ================= -->
    <meta property="og:locale" content="ar_EG" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="مجلس الشباب المصري" />
    <meta property="og:title" content="مجلس الشباب المصري | استمارة الانضمام" />
    <meta property="og:description" content="استمارة الانضمام لمجلس الشباب المصري — قدّم طلبك إلكترونيًا." />
    <meta property="og:url" content="https://egy-youthcouncil.org/join.html" />
    <meta property="og:image" content="https://egy-youthcouncil.org/images/logo.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <!-- ================= TWITTER CARDS ================= -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="مجلس الشباب المصري | استمارة الانضمام" />
    <meta name="twitter:description" content="قدّم طلبك إلكترونيًا للانضمام لمجلس الشباب المصري." />
    <meta name="twitter:image" content="https://egy-youthcouncil.org/images/logo.png" />

    <!-- ================= STRUCTURED DATA ================= -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "مجلس الشباب المصري",
        "alternateName": "Egyptian Youth Council",
        "url": "https://egy-youthcouncil.org/",
        "logo": "https://egy-youthcouncil.org/images/logo.png",
        "description": "مؤسسة مجتمعية تعمل على تمكين الشباب ودعم حقوق الإنسان وتعزيز التنمية المستدامة في مصر."
      }
    </script>

    <!-- ================= GOOGLE FONT ================= -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />

    <!-- ================= ICONS ================= -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    />

    <!-- ================= CSS ================= -->
    <link rel="stylesheet" href="scrollbar.css" />

    <!-- ================= HEADER SCRIPT ================= -->
    <script src="/assets/js/header.js" defer></script>
    <script src="/assets/js/cookie.js" defer></script>

    <meta name="sitemap" content="https://egy-youthcouncil.org/sitemap.xml" />

    <style>
      /* ================= RESET ================= */
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { height: 100%; }

      /* ================= BASE ================= */
      body{
        font-family: "Cairo", sans-serif;
        background: #f3f6fb;
        color: #111;
        direction: rtl;
        line-height: 1.9;
      }
      .layout-root{ min-height: 100vh; display:flex; flex-direction:column; }
      main{ flex:1; width:100%; }

      .container{
        width: min(1320px, calc(100% - 48px));
        margin: 0 auto;
      }

      /* ================= HERO ================= */
      .hero{
        padding: 110px 0 34px;
        text-align: center;
      }
      .hero h1{
        font-size: 38px;
        color: #083b8a;
        margin-bottom: 10px;
        letter-spacing: .2px;
      }
      .hero p{
        max-width: 980px;
        margin: 0 auto;
        font-size: 17px;
        color: #334155;
        text-align: right;
      }

      /* ================= FORM ================= */
      .form-wrap{
        padding: 10px 0 90px;
      }

      /* بدون بطاقات مزعجة: مجرد تخطيط + خطوط خفيفة */
      form.eyc-form{
        width: 100%;
      }

      .section{
        padding: 26px 0;
      }
      .section + .section{
        border-top: 1px solid rgba(8, 59, 138, .12);
      }

      .section-head{
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 14px;
      }

      .section-title{
        display:flex;
        align-items:center;
        gap: 12px;
        color:#083b8a;
        font-weight: 900;
        font-size: 20px;
      }

      .badge{
        font-size: 12px;
        font-weight: 800;
        color:#0f172a;
        background: rgba(8,59,138,.08);
        border: 1px solid rgba(8,59,138,.18);
        padding: 6px 10px;
        border-radius: 999px;
        white-space: nowrap;
      }

      .section-title i{
        width: 36px;
        height: 36px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius: 12px;
        border: 1px solid rgba(8,59,138,.18);
        background: rgba(8,59,138,.06);
        color: #083b8a;
      }

      .grid{
        display:grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 14px;
      }

      .field{
        position: relative;
        min-width: 0;
      }

      .field label{
        display:block;
        font-size: 13px;
        font-weight: 800;
        color:#0f172a;
        margin-bottom: 6px;
      }

      .control{
        position: relative;
      }

      .control i{
        position:absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        opacity: .95;
      }

      /* أيقونات الحقول ملونة */
      .c1{ color:#0ea5e9; } /* sky */
      .c2{ color:#8b5cf6; } /* violet */
      .c3{ color:#10b981; } /* emerald */
      .c4{ color:#f59e0b; } /* amber */
      .c5{ color:#ef4444; } /* red */
      .c6{ color:#06b6d4; } /* cyan */

      input, select, textarea{
        width: 100%;
        padding: 12px 12px 12px 38px; /* مساحة للأيقونة */
        border-radius: 12px;
        border: 1px solid rgba(15, 23, 42, .12);
        background: rgba(255,255,255,.7);
        outline: none;
        transition: border-color .15s ease, background .15s ease;
        font-family: inherit;
        font-size: 15px;
      }
      textarea{ min-height: 110px; resize: vertical; padding-top: 12px; }

      input:focus, select:focus, textarea:focus{
        border-color: rgba(8,59,138,.35);
        background: rgba(255,255,255,.92);
      }

      .hint{
        margin-top: 6px;
        font-size: 12px;
        color:#64748b;
      }

      .row-2{ grid-column: span 2; }
      .row-3{ grid-column: span 3; }

      /* ================= ACTIONS ================= */
      .actions{
        padding-top: 18px;
        border-top: 1px solid rgba(8, 59, 138, .12);
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 22px;
      }

      .btn{
        display:inline-flex;
        align-items:center;
        gap:10px;
        padding: 12px 18px;
        border-radius: 12px;
        background: #083b8a;
        color:#fff;
        border: 1px solid rgba(8,59,138,.2);
        text-decoration:none;
        font-weight: 900;
        cursor: pointer;
        transition: transform .15s ease, filter .15s ease;
        white-space: nowrap;
      }
      .btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
      .btn:active{ transform: translateY(0); filter: brightness(.98); }

      .btn.secondary{
        background: rgba(255,255,255,.65);
        color:#083b8a;
        border-color: rgba(8,59,138,.22);
      }

      .note{
        font-size: 13px;
        color:#334155;
      }
      .note i{ color:#10b981; margin-left: 6px; }

      /* ================= RESPONSIVE ================= */
      @media (max-width: 992px){
        .container{ width: min(1100px, calc(100% - 32px)); }
        .hero{ padding: 90px 0 24px; }
        .hero h1{ font-size: 30px; }
        .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
        .row-3{ grid-column: span 2; }
      }
      @media (max-width: 576px){
        .container{ width: calc(100% - 24px); }
        .grid{ grid-template-columns: 1fr; }
        .row-2, .row-3{ grid-column: span 1; }
      }
      /* ================= SUCCESS DIALOG ================= */
.eyc-dialog-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.eyc-dialog{
  background: #fff;
  width: min(420px, calc(100% - 32px));
  padding: 28px 26px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
  animation: dialogPop .25s ease;
}

@keyframes dialogPop{
  from{
    transform: scale(.92) translateY(10px);
    opacity: 0;
  }
  to{
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.eyc-dialog-icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(16,185,129,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.eyc-dialog-icon i{
  font-size: 38px;
  color: #10b981;
}

.eyc-dialog h3{
  font-size: 20px;
  color: #083b8a;
  margin-bottom: 8px;
  font-weight: 900;
}

.eyc-dialog p{
  font-size: 14.5px;
  color: #334155;
  margin-bottom: 18px;
}

    </style>
  </head>

  <body class="layout-root">
    <div id="site-header"></div>

    <main>
      <!-- HERO -->
      <section class="hero">
        <div class="container">
          <h1>استمارة الانضمام</h1>
          <p>
            املأ البيانات التالية بدقة. سيتم مراجعة الطلب والتواصل معك في أقرب وقت.
          </p>
        </div>
      </section>

      <!-- FORM -->
      <section class="form-wrap">
        <div class="container">
          <form class="eyc-form" id="joinForm" autocomplete="on">

            <!-- ================= 1) البيانات الأساسية ================= -->
            <div class="section" id="basic">
              <div class="section-head">
                <div class="section-title">
                  <i class="fa-solid fa-id-card"></i>
                  البيانات الأساسية
                </div>
                <div class="badge">Basic Info</div>
              </div>

              <div class="grid">
                <div class="field">
                  <label>الاسم (بالعربي)</label>
                  <div class="control">
                    <i class="fa-solid fa-user c1"></i>
                    <input name="name_ar" type="text" placeholder="اكتب الاسم بالعربي" required />
                  </div>
                </div>

                <div class="field">
                  <label>Name (English)</label>
                  <div class="control">
                    <i class="fa-solid fa-user c2"></i>
                    <input name="name_en" type="text" placeholder="Full name in English" />
                  </div>
                </div>

                <div class="field">
                  <label>تاريخ الميلاد</label>
                  <div class="control">
                    <i class="fa-solid fa-cake-candles c4"></i>
                    <input name="dob" type="date" required />
                  </div>
                </div>

                <div class="field">
                  <label>الرقم القومي</label>
                  <div class="control">
                    <i class="fa-solid fa-fingerprint c6"></i>
                    <input name="national_id" type="text" inputmode="numeric" maxlength="14" placeholder="14 رقم" required />
                  </div>
                  <div class="hint">مثال: 298xxxxxxxxxxxx</div>
                </div>

                <div class="field">
                  <label>الجنسية</label>
                  <div class="control">
                    <i class="fa-solid fa-flag c3"></i>
                    <input name="nationality" type="text" placeholder="مصري / ..." required />
                  </div>
                </div>

                <div class="field">
                  <label>السن</label>
                  <div class="control">
                    <i class="fa-solid fa-hashtag c5"></i>
                    <input name="age" type="number" min="12" max="90" placeholder="مثال: 22" required />
                  </div>
                </div>
              </div>
            </div>

            <!-- ================= 2) بيانات الاتصال ================= -->
            <div class="section" id="contact">
              <div class="section-head">
                <div class="section-title">
                  <i class="fa-solid fa-address-book"></i>
                  بيانات الاتصال
                </div>
                <div class="badge">Contact</div>
              </div>

              <div class="grid">
                <div class="field">
                  <label>المحافظة</label>
                  <div class="control">
                    <i class="fa-solid fa-map-location-dot c1"></i>
                    <input name="governorate" type="text" placeholder="القاهرة / الجيزة / ..." required />
                  </div>
                </div>

                <div class="field">
                  <label>القسم / المركز</label>
                  <div class="control">
                    <i class="fa-solid fa-location-crosshairs c2"></i>
                    <input name="district_center" type="text" placeholder="مثال: مدينة نصر /..." />
                  </div>
                </div>

                <div class="field">
                  <label>الحي / القرية</label>
                  <div class="control">
                    <i class="fa-solid fa-location-dot c6"></i>
                    <input name="area_village" type="text" placeholder="مثال: الحي السابع /..." />
                  </div>
                </div>

                <div class="field row-2">
                  <label>العنوان الحالي</label>
                  <div class="control">
                    <i class="fa-solid fa-house c4"></i>
                    <input name="current_address" type="text" placeholder="اكتب العنوان بالتفصيل" required />
                  </div>
                </div>

                <div class="field">
                  <label>رقم الهاتف</label>
                  <div class="control">
                    <i class="fa-solid fa-phone c3"></i>
                    <input name="phone" type="tel" inputmode="tel" placeholder="01xxxxxxxxx" required />
                  </div>
                </div>

                <div class="field">
                  <label>البريد الإلكتروني</label>
                  <div class="control">
                    <i class="fa-solid fa-envelope c1"></i>
                    <input name="email" type="email" placeholder="name@email.com" required />
                  </div>
                </div>

                <div class="field">
                  <label>Facebook</label>
                  <div class="control">
                    <i class="fa-brands fa-facebook c2"></i>
                    <input name="facebook" type="url" placeholder="رابط الحساب" />
                  </div>
                </div>

                <div class="field">
                  <label>Twitter / X</label>
                  <div class="control">
                    <i class="fa-brands fa-x-twitter c6"></i>
                    <input name="twitter" type="url" placeholder="رابط الحساب" />
                  </div>
                </div>

                <div class="field">
                  <label>الوظيفة (الحالية)</label>
                  <div class="control">
                    <i class="fa-solid fa-briefcase c4"></i>
                    <input name="job_title_general" type="text" placeholder="مثال: طالب / موظف / ..." />
                  </div>
                </div>
              </div>
            </div>

            <!-- ================= 3) بيانات العمل (عام / خاص) ================= -->
            <div class="section" id="work">
              <div class="section-head">
                <div class="section-title">
                  <i class="fa-solid fa-building-user"></i>
                  بيانات العمل (عام / خاص)
                </div>
                <div class="badge">Work</div>
              </div>

              <div class="grid">
                <div class="field">
                  <label>نوع القطاع</label>
                  <div class="control">
                    <i class="fa-solid fa-layer-group c3"></i>
                    <select name="work_sector_type" required>
                      <option value="" selected disabled>اختر</option>
                      <option value="خاص">خاص</option>
                      <option value="عام">عام</option>
                      <option value="لا يوجد">لا يوجد</option>
                    </select>
                  </div>
                </div>

                <div class="field">
                  <label>اسم جهة العمل</label>
                  <div class="control">
                    <i class="fa-solid fa-building c1"></i>
                    <input name="workplace_name" type="text" placeholder="اسم جهة العمل" />
                  </div>
                </div>

                <div class="field">
                  <label>نوع جهة العمل</label>
                  <div class="control">
                    <i class="fa-solid fa-diagram-project c2"></i>
                    <input name="workplace_type" type="text" placeholder="شركة / مؤسسة / ..."/>
                  </div>
                </div>

                <div class="field">
                  <label>المسمى الوظيفي</label>
                  <div class="control">
                    <i class="fa-solid fa-user-tie c6"></i>
                    <input name="job_title" type="text" placeholder="مثال: مسؤول تدريب" />
                  </div>
                </div>

                <div class="field">
                  <label>مدة العمل</label>
                  <div class="control">
                    <i class="fa-solid fa-clock c4"></i>
                    <input name="work_duration" type="text" placeholder="مثال: سنتين" />
                  </div>
                </div>

                <div class="field">
                  <label>هل أنت عضو نقابة؟</label>
                  <div class="control">
                    <i class="fa-solid fa-id-badge c3"></i>
                    <select name="union_member">
                      <option value="" selected>غير محدد</option>
                      <option value="نعم">نعم</option>
                      <option value="لا">لا</option>
                    </select>
                  </div>
                </div>

                <div class="field">
                  <label>الموقع القيادي (إن وجد)</label>
                  <div class="control">
                    <i class="fa-solid fa-chess-king c5"></i>
                    <input name="leadership_role" type="text" placeholder="مثال: قائد فريق" />
                  </div>
                </div>

                <div class="field">
                  <label>تنظيم / عمل قيادي (إن وجد)</label>
                  <div class="control">
                    <i class="fa-solid fa-sitemap c2"></i>
                    <input name="org_leadership" type="text" placeholder="مثال: مسؤول لجنة" />
                  </div>
                </div>

                <div class="field">
                  <label>العمل السياسي (إن وجد)</label>
                  <div class="control">
                    <i class="fa-solid fa-scale-balanced c4"></i>
                    <input name="political_work" type="text" placeholder="اكتب إن وجد" />
                  </div>
                </div>

                <div class="field">
                  <label>عضو مؤسسة خيرية؟</label>
                  <div class="control">
                    <i class="fa-solid fa-hand-holding-heart c3"></i>
                    <select name="charity_member">
                      <option value="" selected>غير محدد</option>
                      <option value="نعم">نعم</option>
                      <option value="لا">لا</option>
                    </select>
                  </div>
                </div>

                <div class="field">
                  <label>عضو حزب سياسي؟</label>
                  <div class="control">
                    <i class="fa-solid fa-people-group c6"></i>
                    <select name="party_member">
                      <option value="" selected>غير محدد</option>
                      <option value="نعم">نعم</option>
                      <option value="لا">لا</option>
                    </select>
                  </div>
                </div>

                <div class="field row-3">
                  <label>مهاراتك (إن وجد)</label>
                  <div class="control">
                    <i class="fa-solid fa-star c1"></i>
                    <input name="skills" type="text" placeholder="مثال: إدارة مشاريع، تصميم، تدريب..." />
                  </div>
                </div>

                <div class="field row-3">
                  <label>الدورات التدريبية</label>
                  <div class="control">
                    <i class="fa-solid fa-graduation-cap c2"></i>
                    <input name="courses" type="text" placeholder="اكتب أهم الدورات التي حصلت عليها" />
                  </div>
                </div>

                <div class="field row-3">
                  <label>العمل التطوعي</label>
                  <div class="control">
                    <i class="fa-solid fa-hands-helping c3"></i>
                    <input name="volunteer_work" type="text" placeholder="خبرات تطوعية سابقة" />
                  </div>
                </div>

                <div class="field">
                  <label>القسم الوظيفي بالمؤسسة الشبابية</label>
                  <div class="control">
                    <i class="fa-solid fa-people-arrows c4"></i>
                    <input name="org_department" type="text" placeholder="مثال: التدريب / الإعلام /..." />
                  </div>
                </div>
              </div>
            </div>

            <!-- ================= 4) المؤهلات الدراسية ================= -->
            <div class="section" id="edu">
              <div class="section-head">
                <div class="section-title">
                  <i class="fa-solid fa-user-graduate"></i>
                  المؤهلات الدراسية
                </div>
                <div class="badge">Education</div>
              </div>

              <div class="grid">
                <div class="field">
                  <label>المؤهل</label>
                  <div class="control">
                    <i class="fa-solid fa-certificate c1"></i>
                    <input name="qualification" type="text" placeholder="بكالوريوس / ثانوي / ..." required />
                  </div>
                </div>

                <div class="field">
                  <label>جامعة</label>
                  <div class="control">
                    <i class="fa-solid fa-school c2"></i>
                    <input name="university" type="text" placeholder="اسم الجامعة" />
                  </div>
                </div>

                <div class="field">
                  <label>كلية</label>
                  <div class="control">
                    <i class="fa-solid fa-building-columns c6"></i>
                    <input name="college" type="text" placeholder="اسم الكلية" />
                  </div>
                </div>

                <div class="field">
                  <label>تخصص</label>
                  <div class="control">
                    <i class="fa-solid fa-book-open c4"></i>
                    <input name="major" type="text" placeholder="التخصص" />
                  </div>
                </div>

                <div class="field">
                  <label>تاريخ التخرج</label>
                  <div class="control">
                    <i class="fa-solid fa-calendar-check c3"></i>
                    <input name="graduation_date" type="month" />
                  </div>
                </div>
              </div>
            </div>

            <!-- ================= 5) الخبرات السابقة ================= -->
            <div class="section" id="exp">
              <div class="section-head">
                <div class="section-title">
                  <i class="fa-solid fa-list-check"></i>
                  الخبرات السابقة
                </div>
                <div class="badge">Experience</div>
              </div>

              <div class="grid">
                <div class="field row-3">
                  <label>اكتب خبراتك السابقة</label>
                  <div class="control">
                    <i class="fa-solid fa-pen-nib c5"></i>
                    <textarea name="experience" placeholder="اكتب الخبرات بإيجاز..."></textarea>
                  </div>
                </div>
              </div>
            </div>

            <!-- ================= 6) سبب الانضمام + أسئلة ================= -->
            <div class="section" id="reasons">
              <div class="section-head">
                <div class="section-title">
                  <i class="fa-solid fa-circle-question"></i>
                  سبب الانضمام والأسئلة
                </div>
                <div class="badge">Motivation</div>
              </div>

              <div class="grid">
                <div class="field row-3">
                  <label>سبب الانضمام إلى القطاع الذي يمكن الاختيار</label>
                  <div class="control">
                    <i class="fa-solid fa-bullseye c1"></i>
                    <textarea name="join_reason" placeholder="اكتب السبب..."></textarea>
                  </div>
                </div>

                <div class="field row-3">
                  <label>ماذا تعرف عن مجلس الشباب المصري؟</label>
                  <div class="control">
                    <i class="fa-solid fa-lightbulb c4"></i>
                    <textarea name="what_you_know" placeholder="اكتب إجابتك..."></textarea>
                  </div>
                </div>

                <div class="field row-3">
                  <label>ماذا تتوقع أن تقدمه من خلال عضويتك بالمجلس؟</label>
                  <div class="control">
                    <i class="fa-solid fa-handshake-angle c3"></i>
                    <textarea name="what_you_offer" placeholder="اكتب إجابتك..."></textarea>
                  </div>
                </div>
              </div>

              <div class="hint">
                <i class="fa-solid fa-shield-heart c3"></i>
                بالضغط على إرسال، أنت تقر بصحة البيانات وأنه سيتم التواصل معك بعد المراجعة.
              </div>
            </div>

            <!-- ================= ACTIONS ================= -->
            <div class="actions">
              <div class="note">
                <i class="fa-solid fa-circle-check"></i>
                البيانات تُرسل إلكترونيًا</div>

              <div style="display:flex; gap:10px; flex-wrap:wrap;">
                <button type="submit" class="btn">
                  <i class="fa-solid fa-paper-plane"></i>
                  إرسال الطلب
                </button>
              </div>
            </div>

          </form>
        </div>
      </section>
    </main>
    <!-- ================= SUCCESS DIALOG ================= -->
<div id="successDialog" class="eyc-dialog-overlay">
  <div class="eyc-dialog">
    <div class="eyc-dialog-icon">
      <i class="fa-solid fa-circle-check"></i>
    </div>

    <h3>تم إرسال طلب الانضمام بنجاح</h3>
    <p>
      سيتم التواصل معك بعد مراجعة البيانات.
    </p>

    <button class="btn" onclick="closeSuccessDialog()">حسنًا</button>
  </div>
</div>


    <div id="site-footer"></div>

    <!-- ================= HEADER/FOOTER + NAV + DRAWER SCRIPTS ================= -->
    <script>
      function markActiveNavLink() {
        let currentPage = window.location.pathname.split("/").pop();
        if (!currentPage || currentPage === "") currentPage = "index.html";

        document
          .querySelectorAll(".desktop-nav a, .eyc-drawer-nav a")
          .forEach((link) => {
            const href = link.getAttribute("href");
            if (!href) return;

            const linkPage = href.split("/").pop();
            if (linkPage === currentPage) link.classList.add("active");
          });
      }

      function initDrawerMenuFallback() {
        const drawer = document.querySelector(".eyc-drawer, #eycDrawer, .mobile-drawer");
        const overlay = document.querySelector(".eyc-drawer-overlay, #eycDrawerOverlay, .drawer-overlay") || null;
        const openBtn = document.querySelector(".eyc-burger, #eycBurger, .menu-toggle, .hamburger") || null;
        const closeBtn = document.querySelector(".eyc-drawer-close, #eycDrawerClose, .drawer-close") || null;

        if (!drawer) return;

        const open = () => {
          drawer.classList.add("open");
          if (overlay) overlay.classList.add("open");
          document.body.style.overflow = "hidden";
        };

        const close = () => {
          drawer.classList.remove("open");
          if (overlay) overlay.classList.remove("open");
          document.body.style.overflow = "";
        };

        if (openBtn) openBtn.addEventListener("click", open);
        if (closeBtn) closeBtn.addEventListener("click", close);
        if (overlay) overlay.addEventListener("click", close);

        document.addEventListener("keydown", (e) => { if (e.key === "Escape") close(); });
        drawer.querySelectorAll("a").forEach((a) => a.addEventListener("click", close));
      }

      fetch("/header.html")
        .then((r) => r.text())
        .then((h) => {
          document.getElementById("site-header").innerHTML = h;
          if (window.initHeaderMenu) window.initHeaderMenu();
          markActiveNavLink();
          initDrawerMenuFallback();
        });

      fetch("/footer.html")
        .then((r) => r.text())
        .then((f) => {
          document.getElementById("site-footer").innerHTML = f;
          if (window.initCookieConsent) window.initCookieConsent();
        });
    </script>
    <script>
  const WEB_APP_URL =
    "https://script.google.com/macros/s/AKfycbwIPstCByw5G5VVJGfeYi7kXlhYu9-7zXR5P7fm9F9jIAJFnp8pRQR7R3U0ywLZJYUtKg/exec";

  const form = document.getElementById("joinForm");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();

    const submitBtn = form.querySelector('button[type="submit"]');
    const oldBtnHtml = submitBtn ? submitBtn.innerHTML : "";

    if (submitBtn) {
      submitBtn.disabled = true;
      submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> جاري الإرسال...';
    }

    try {
      // ✅ إرسال بدون JSON وبدون Headers (لتجنب CORS preflight)
      const fd = new FormData(form);
      const params = new URLSearchParams();
      for (const [k, v] of fd.entries()) params.append(k, v);

      const res = await fetch(WEB_APP_URL, {
        method: "POST",
        body: params, // form-urlencoded
      });

      // Apps Script أحيانًا بيرجع JSON عادي — وأحيانًا ممكن يجي نص
      const text = await res.text();
      let out = {};
      try { out = JSON.parse(text); } catch {}

      if (!out.ok) {
  throw new Error(out.error || "Submission failed");
}

form.reset();
openSuccessDialog();


    } catch (err) {
      console.error("Submit Error:", err);
      alert("❌ حصل خطأ أثناء الإرسال\nراجع Console لمعرفة التفاصيل");
    } finally {
      if (submitBtn) {
        submitBtn.disabled = false;
        submitBtn.innerHTML = oldBtnHtml;
      }
    }
  });
</script>
<script>
  function openSuccessDialog(){
    document.getElementById("successDialog").style.display = "flex";
  }

  function closeSuccessDialog(){
    document.getElementById("successDialog").style.display = "none";
  }
</script>

  </body>
</html>