/* Join / Membership pages — Minhaj Youth League Karachi */
.join-page-hero{background:linear-gradient(150deg,#0a3c5f,#10578a 58%,#2f8fbd);color:#fff;padding:62px 0;text-align:center}
.join-page-hero h2{color:#fff;margin:0 0 10px;font-size:clamp(2rem,4vw,3rem)}
.join-page-hero p{max-width:760px;margin:0 auto;color:#eaf7fd}
.join-breadcrumb{margin-top:15px;font-size:.84rem;color:#cfeaf7}
.join-breadcrumb a{color:#fff;font-weight:700}
.join-verse{background:#fff;border:1px solid #dbe9f1;border-radius:18px;box-shadow:0 10px 30px rgba(16,87,138,.10);padding:30px 34px;text-align:center;max-width:980px;margin:0 auto}
.join-verse .arabic{font-family:"Noto Naskh Arabic","Noto Nastaliq Urdu",serif;font-size:clamp(2rem,4vw,3.3rem);line-height:1.7;color:#111;direction:rtl;margin-bottom:8px}
.join-verse .verse-ref{font-size:.78rem;color:#667;margin-bottom:16px}
.join-verse .urdu{font-family:"Noto Nastaliq Urdu",serif;direction:rtl;font-size:1.05rem;line-height:2.3;color:#222;margin:8px auto;max-width:900px}
.join-verse .english{font-weight:700;color:#182b39;line-height:1.7;margin:8px auto 0;max-width:900px}
.join-primary-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:28px 0 0}
.join-primary-actions .btn{min-width:170px}
.join-copy{max-width:900px;margin:0 auto;color:#3f5564;line-height:1.85}
.join-copy p+p{margin-top:14px}
.join-values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.join-value{background:#fff;border:1px solid #dfeaf1;border-radius:16px;padding:22px 18px;text-align:center;box-shadow:0 8px 24px rgba(16,87,138,.08)}
.join-value h3{font-size:1rem;margin:8px 0;color:#0a4f7d}
.join-value p{font-size:.86rem;color:#647785;margin:0}
.join-value .jicon{width:46px;height:46px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e8f5fb;color:#0a5c91;font-size:1.2rem;font-weight:800}
.join-note{max-width:900px;margin:26px auto 0;background:#f7fbfd;border-left:4px solid #0a5c91;padding:16px 20px;border-radius:10px;color:#48606f;font-size:.9rem}
body.lang-ur .join-note{border-left:0;border-right:4px solid #0a5c91;text-align:right}
.pdf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:24px;justify-content:center;margin-top:30px}
.pdf-card{background:#fff;border:1px solid #dfeaf1;border-radius:18px;padding:28px 22px;text-align:center;box-shadow:0 10px 28px rgba(16,87,138,.10);transition:.2s}
.pdf-card:hover{transform:translateY(-4px);border-color:#63b8e0}
.pdf-icon{width:68px;height:78px;margin:0 auto 12px;display:block;color:#e53935}
.pdf-card h3{margin:0 0 6px;color:#0a4f7d}
.pdf-card .pdf-meta{font-size:.8rem;color:#73828c;margin-bottom:14px}
.pdf-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.video-membership-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.membership-video{background:#fff;border:1px solid #dfeaf1;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(16,87,138,.08)}
.membership-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.membership-video h3{font-size:.98rem;padding:16px 18px;margin:0;color:#0a4f7d;line-height:1.5}
.join-source{font-size:.82rem;color:#71808b;text-align:center;margin-top:24px}
.join-source a{color:#0a5c91;font-weight:700}

/* Online form */
.join-form-shell{max-width:1000px;margin:0 auto;background:#fff;border:1px solid #dfeaf1;border-radius:18px;box-shadow:0 12px 34px rgba(16,87,138,.10);overflow:hidden}
.join-form-head{background:#f0f8fc;padding:22px 26px;border-bottom:1px solid #dfeaf1}
.join-form-head h3{margin:0 0 6px;color:#0a4f7d}
.join-form-head p{margin:0;color:#617481;font-size:.9rem}
.join-form-body{padding:28px}
.jform-section{border:0;margin:0 0 30px;padding:0}
.jform-section legend{font-family:var(--font-en);font-size:1.05rem;font-weight:800;color:#0a4f7d;margin-bottom:16px;width:100%;padding-bottom:8px;border-bottom:1px solid #e3edf2}
body.lang-ur .jform-section legend{font-family:var(--font-ur);text-align:right}
.jform-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.jform-field{display:flex;flex-direction:column;gap:7px}
.jform-field.full{grid-column:1/-1}
.jform-field label{font-size:.83rem;font-weight:700;color:#314a5a}
.jform-field input,.jform-field select,.jform-field textarea{width:100%;border:1px solid #cfdde6;border-radius:10px;padding:11px 12px;background:#fff;color:#1d3442;font:inherit;outline:0;transition:.15s}
.jform-field input:focus,.jform-field select:focus,.jform-field textarea:focus{border-color:#2c95c7;box-shadow:0 0 0 3px rgba(44,149,199,.12)}
.jform-field textarea{min-height:90px;resize:vertical}
.jform-field small{font-size:.72rem;color:#73828c}
.jform-radios,.jform-checks{display:flex;flex-wrap:wrap;gap:12px 20px;padding-top:6px}
.jform-choice{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;color:#344f60}
.jform-choice input{width:auto}
.jform-covenant{background:#f7fbfd;border:1px solid #d8e8f0;border-radius:12px;padding:16px 18px;line-height:1.7;color:#506775;font-size:.86rem}
.jform-submit{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.jform-alert{max-width:1000px;margin:0 auto 22px;padding:14px 18px;border-radius:10px;font-size:.9rem}
.jform-alert.error{background:#fff0f0;border:1px solid #f0b7b7;color:#9e2727}
.jform-alert.success{background:#eefaf2;border:1px solid #b8e1c3;color:#236a37}
.jform-required{color:#b42318}
.jform-privacy{font-size:.78rem;color:#74838d;text-align:center;max-width:760px;margin:14px auto 0}
body.lang-ur .join-copy,body.lang-ur .join-form-shell,body.lang-ur .jform-field{text-align:right}
body.lang-ur .jform-radios,body.lang-ur .jform-checks{direction:rtl;justify-content:flex-start}

@media(max-width:900px){.join-values{grid-template-columns:1fr 1fr}.video-membership-grid{grid-template-columns:1fr}}
@media(max-width:680px){.join-verse{padding:22px 16px}.pdf-grid{grid-template-columns:1fr}.jform-grid{grid-template-columns:1fr}.jform-field.full{grid-column:auto}.join-form-body{padding:20px}.join-values{grid-template-columns:1fr}.join-page-hero{padding:45px 0}}
@media print{.join-page-hero,.navbar,.site-header,.site-footer,.join-primary-actions,.jform-submit,.lang-btn,.switch-btn{display:none!important}.join-form-shell{box-shadow:none;border:0}.join-form-body{padding:0}.section{padding:10px 0}}