/* Super Muslim Academy — careers page. Brand: navy #0B1F3A · gold #D4A017 · sky #1E9BE0 (from the logo and the Instructor Work Policy). */
#sma-join{--navy:#0B1F3A;--navy2:#123463;--gold:#D4A017;--gold2:#E8C25A;--gold-d:#8A6200;--sky:#1E9BE0;--sky-d:#0E6FB0;
  --ivory:#FFF8E7;--ink:#1C2B3A;--muted:#5A6B80;--line:#DCE4EE;--bg:#F5F7FA;--ok:#1E7E34;--bad:#C0392B;
  font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100vw}
#sma-join *{box-sizing:border-box}
#sma-join [hidden]{display:none!important}
#sma-join button,#sma-join .btn{text-transform:none!important;letter-spacing:normal!important}
#sma-join .wrap{max-width:780px;margin:0 auto;padding:0 18px}
#sma-join a{color:var(--sky-d)}

/* header: big centred logo, links home */
#sma-join .top{background:#fff;border-bottom:1px solid var(--line)}
#sma-join .top .wrap{position:relative;display:flex;align-items:center;justify-content:center;padding-top:14px;padding-bottom:12px}
#sma-join .brand{display:block;line-height:0}
#sma-join .logo{height:96px;width:auto;display:block}
#sma-join .lang{position:absolute;inset-inline-end:18px;top:50%;transform:translateY(-50%);border:1px solid var(--line);background:#fff;color:var(--navy);
  font:inherit;font-weight:700;font-size:13.5px;padding:6px 13px;border-radius:999px;cursor:pointer}
#sma-join .lang:hover{border-color:var(--navy)}

/* hero — mirrors the policy cover: navy panel between gold rules */
#sma-join .hero{background:radial-gradient(120% 140% at 50% 0%,var(--navy2) 0%,var(--navy) 62%);color:#fff;padding:34px 0 32px;
  border-top:6px solid var(--gold);border-bottom:6px solid var(--gold);text-align:center}
#sma-join .hero .eyebrow{color:var(--sky);font-weight:700;font-size:14px;letter-spacing:.3px;margin:0 0 8px}
#sma-join h1{font-size:28px;line-height:1.35;margin:0 0 12px;font-weight:800;color:#fff}
#sma-join .hero h1:after{content:"";display:block;width:64px;height:3px;background:var(--gold);border-radius:3px;margin:14px auto 0}
#sma-join .hero .lead{margin:0 auto;color:#D8E4F2;font-size:16.5px;max-width:600px}

/* message + why */
#sma-join .section{padding:26px 0}
#sma-join .msg-s{padding-bottom:6px}
#sma-join .hero-img{display:block;width:100%;height:auto;aspect-ratio:1200/946;object-fit:cover;border-radius:16px;margin:-8px 0 22px;box-shadow:0 10px 28px rgba(11,31,58,.14)}
#sma-join h2{font-size:21px;margin:0 0 14px;color:var(--navy);font-weight:800}
#sma-join .msg{background:var(--ivory);border:2px solid var(--gold);border-inline-start-width:6px;border-radius:14px;padding:18px 20px;margin-bottom:24px}
#sma-join .msg h2{color:var(--gold-d);font-size:18px;margin:0 0 8px;text-align:center}
#sma-join .msg p{margin:0;font-size:16px;color:#2A3A4C}
#sma-join .why-h{text-align:center}
#sma-join .why{display:grid;grid-template-columns:1fr;gap:10px}
#sma-join .why-i{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
#sma-join .why-i .wi{flex:0 0 40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--sky),var(--sky-d));color:#fff}
#sma-join .why-i:nth-child(even) .wi{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--navy)}
#sma-join .why-i b{color:var(--navy);font-size:16px}
#sma-join .why-i p{margin:2px 0 0;color:var(--muted);font-size:14.5px;line-height:1.6}

/* role cards — each role its own brand tone */
#sma-join .roles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#sma-join .role{--c:var(--navy);--cb:#EEF2F8;position:relative;background:#fff;border:2px solid var(--line);border-top:5px solid var(--c);border-radius:14px;
  padding:16px 14px 14px;text-align:start;cursor:pointer;font:inherit;color:inherit;display:flex;flex-direction:column;gap:6px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
#sma-join .role.tone-gold{--c:var(--gold);--cb:#FFF4D6;--ci:var(--gold-d)}
#sma-join .role.tone-sky{--c:var(--sky);--cb:#E6F4FC;--ci:var(--sky-d)}
#sma-join .role.tone-navy{--c:var(--navy);--cb:#E9EEF6;--ci:var(--navy)}
#sma-join .role.tone-slate{--c:#7A8BA0;--cb:#F0F3F7;--ci:#51627A}
#sma-join .role:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,31,58,.08)}
#sma-join .role[aria-pressed="true"]{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);background:var(--cb)}
#sma-join .role .ic{width:40px;height:40px;border-radius:11px;background:var(--cb);display:grid;place-items:center;color:var(--ci)}
#sma-join .role[aria-pressed="true"] .ic{background:#fff}
#sma-join .role strong{font-size:17px;color:var(--navy)}
#sma-join .role .d{font-size:13.5px;color:var(--muted);line-height:1.5}
#sma-join .role .pop{position:absolute;top:-12px;inset-inline-end:10px;background:var(--gold);color:var(--navy);font-size:11.5px;font-weight:800;
  padding:2px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}

/* requirements */
#sma-join .req{--c:var(--navy);background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:14px;padding:18px;margin-top:16px}
#sma-join .req.tone-gold{--c:var(--gold)} #sma-join .req.tone-sky{--c:var(--sky)} #sma-join .req.tone-slate{--c:#7A8BA0}
#sma-join .req h3{margin:0 0 10px;font-size:17px;color:var(--navy)}
#sma-join .req ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
#sma-join .req li{display:flex;gap:9px;align-items:flex-start;font-size:15px}
#sma-join .req li:before{content:"✓";color:var(--gold-d);font-weight:800;flex:0 0 auto}
#sma-join .req .para{margin:0 0 10px}
#sma-join .chips{display:flex;flex-wrap:wrap;gap:8px}
#sma-join .chips span{background:#F0F3F7;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13.5px;color:var(--navy);font-weight:600}
#sma-join .req .tasks{margin:14px 0 0;color:var(--muted);font-size:14.5px}
#sma-join .req .tasks b{color:var(--navy)}
#sma-join .payline{margin:12px 0 0;background:var(--ivory);border:1px solid #F1DDA0;border-radius:10px;padding:9px 12px;font-size:15px}
#sma-join .payline b{color:var(--gold-d)}
#sma-join .note{font-size:13.5px;color:var(--muted);margin:12px 0 0}

/* buttons */
#sma-join .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;
  border-radius:12px;border:0;font:inherit;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none}
#sma-join .btn-gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--navy);box-shadow:0 3px 0 #B98A0E}
#sma-join .btn-gold:hover{filter:brightness(1.04)}
#sma-join .btn-ghost{background:#fff;color:var(--navy);border:2px solid var(--line)}
#sma-join .btn:disabled{opacity:.6;cursor:wait}
#sma-join .start{margin-top:16px;width:100%}

/* form card + top navigation */
#sma-join .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 16px 22px}
#sma-join .topnav{margin-bottom:16px}
#sma-join .tn-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#sma-join .tn-mid{text-align:center;line-height:1.35}
#sma-join .tn-mid .stepof{display:block;font-size:13px;color:var(--muted)}
#sma-join .tn-mid b{color:var(--navy);font-size:15px}
#sma-join .arrow{width:44px!important;height:44px!important;min-width:0!important;padding:0!important;line-height:1!important;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--navy);font:inherit;font-size:20px;font-weight:800;
  cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
#sma-join .arrow:hover:not(:disabled){border-color:var(--sky);color:var(--sky-d)}
#sma-join .arrow:disabled{opacity:.35;cursor:default}
#sma-join .stepper{list-style:none;margin:14px 0 10px;padding:0;display:flex;gap:4px}
#sma-join .stepper li{flex:1;min-width:0}
#sma-join .st{width:100%;background:none!important;border:0!important;padding:0!important;min-height:0!important;box-shadow:none!important;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted)}
#sma-join .st:disabled{cursor:default}
#sma-join .st i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;
  background:#EEF2F6;color:var(--muted);border:2px solid transparent}
#sma-join .st.done i{background:var(--sky);color:#fff}
#sma-join .st.cur i{background:var(--navy);color:#fff;box-shadow:0 0 0 3px rgba(212,160,23,.45)}
#sma-join .st span{font-size:11.5px;line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#sma-join .st.cur span{color:var(--navy);font-weight:800}
#sma-join .st.done:not(:disabled):hover i{box-shadow:0 0 0 3px rgba(30,155,224,.25)}
#sma-join .pct{font-size:14px;color:var(--muted);margin:2px 0 6px;font-weight:600}
#sma-join .pct b{color:var(--navy);font-size:16px}
#sma-join .bar{height:12px;background:#E9EEF4;border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(11,31,58,.08)}
#sma-join .bar i{display:block;height:100%;min-width:12px;background:linear-gradient(90deg,var(--gold2),var(--gold));border-radius:99px;transition:width .45s ease}
#sma-join .bar.full i{background:linear-gradient(90deg,#2FA34A,var(--ok))}
#sma-join .step-title{font-size:19px;margin:18px 0 16px;color:var(--navy);font-weight:800;padding-bottom:8px;border-bottom:2px solid var(--ivory)}

/* fields */
#sma-join .f{margin-bottom:16px}
#sma-join .f>label,#sma-join .f>.lbl{display:block;font-weight:700;font-size:15px;margin-bottom:6px;color:var(--ink)}
#sma-join .req-star{color:var(--bad)}
#sma-join .hint{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
#sma-join input[type=text],#sma-join input[type=email],#sma-join input[type=tel],#sma-join input[type=url],
#sma-join input[type=number],#sma-join select,#sma-join textarea{width:100%;min-height:50px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:11px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
#sma-join textarea{min-height:120px;resize:vertical}
#sma-join input:focus,#sma-join select:focus,#sma-join textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(30,155,224,.15)}
#sma-join [dir=ltr]{direction:ltr;text-align:left}
#sma-join .opts{display:grid;gap:8px}
#sma-join .opts.two{grid-template-columns:1fr 1fr}
#sma-join .opt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:11px;padding:11px 12px;cursor:pointer;min-height:48px;font-size:15px}
/* own radio / checkbox drawing — the theme's bullet sat off-centre */
#sma-join .opt input{-webkit-appearance:none!important;appearance:none!important;width:22px!important;height:22px!important;min-width:22px;margin:0!important;padding:0!important;
  flex:0 0 22px;display:grid!important;place-content:center;background:#fff!important;border:2px solid #9AA8BA!important;border-radius:6px!important;
  cursor:pointer;position:relative;box-shadow:none!important;transition:background .15s,border-color .15s}
#sma-join .opt input[type=radio]{border-radius:50%!important}
#sma-join .opt input::after{display:none!important;content:none!important}
#sma-join .opt input::before{content:""!important;display:block!important;margin:0!important;padding:0!important;font-size:0!important;background:transparent!important;
  position:static!important;transform:scale(0);transition:transform .12s ease}
#sma-join .opt input[type=radio]::before{width:10px!important;height:10px!important;border-radius:50%!important;background:var(--navy)!important}
#sma-join .opt input[type=checkbox]::before{width:6px!important;height:11px!important;border:solid #fff!important;border-width:0 2.5px 2.5px 0!important;
  border-radius:0!important;transform:rotate(45deg) scale(0);margin-top:-2px!important}
#sma-join .opt input:checked{border-color:var(--navy)!important}
#sma-join .opt input[type=checkbox]:checked{background:var(--navy)!important}
#sma-join .opt input[type=radio]:checked::before{transform:scale(1)}
#sma-join .opt input[type=checkbox]:checked::before{transform:rotate(45deg) scale(1)}
#sma-join .opt input:focus-visible{outline:3px solid rgba(30,155,224,.35);outline-offset:2px}
#sma-join .opt small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;line-height:1.45}
#sma-join .opts.desc .opt>span{font-weight:700}
#sma-join .opt:has(input:checked){border-color:var(--navy);background:#F2F6FB}
#sma-join .err{display:none;color:var(--bad);font-size:13.5px;margin-top:6px;font-weight:600}
#sma-join .f.bad .err{display:block}
#sma-join .f.bad input,#sma-join .f.bad select,#sma-join .f.bad textarea,#sma-join .f.bad .opt{border-color:var(--bad)}
#sma-join .count{font-size:12.5px;color:var(--muted);text-align:end;margin-top:4px}
#sma-join .nav{display:flex;gap:10px;margin-top:22px}
#sma-join .sub{font-size:14px;font-weight:800;color:var(--gold-d);letter-spacing:.2px;margin:24px 0 12px;padding-bottom:6px;border-bottom:1px dashed #EAD9A6;display:flex;align-items:center;gap:8px}
#sma-join .sub:before{content:"";width:6px;height:16px;border-radius:3px;background:var(--gold)}
#sma-join form>.sub:first-child{margin-top:0}
#sma-join .consent .pv{display:inline-block;margin-inline-start:4px;font-weight:700;color:var(--sky-d);text-decoration:underline}
/* mobile: the Next / Back bar stays in reach at the bottom of the screen */
@media (max-width:719px){
  #sma-join .nav{position:sticky;bottom:0;z-index:40;background:#fff;margin:22px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);box-shadow:0 -6px 16px rgba(11,31,58,.08)}
  #sma-join.in-form .hr-fab{bottom:92px}
}
#sma-join .nav .btn-gold{flex:1}
#sma-join .file{border:2px dashed var(--line);border-radius:12px;padding:16px;text-align:center;cursor:pointer;display:block}
#sma-join .file input{display:none}
#sma-join .file b{display:block;color:var(--navy)}
#sma-join .file small{color:var(--muted)}
#sma-join .file.has{border-style:solid;border-color:var(--ok);background:#F1F9F3}
#sma-join .consent{font-size:14px;align-items:flex-start}
/* honeypot: visually hidden without pushing the page sideways (an off-screen offset widened RTL pages) */
#sma-join .hp{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
#sma-join .alert{background:#FDECEA;border:1px solid #F5C2BC;color:#8A2317;border-radius:11px;padding:12px 14px;margin-top:14px;font-size:14.5px}

/* review */
#sma-join .rv-lead{color:var(--muted);margin:-6px 0 14px}
#sma-join .rv{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
#sma-join .rv-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
#sma-join .rv-h h3{margin:0;font-size:16px;color:var(--navy)}
#sma-join .edit{min-height:0!important;line-height:1.4!important;background:#E6F4FC;color:var(--sky-d);border:0;border-radius:999px;padding:5px 14px;font:inherit;font-weight:800;font-size:13.5px;cursor:pointer}
#sma-join dl{margin:0;display:grid;grid-template-columns:minmax(0,42%) 1fr;gap:6px 12px;font-size:14.5px}
#sma-join dt{color:var(--muted)}
#sma-join dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
#sma-join .miss{color:var(--bad);font-weight:700}

/* thank you */
#sma-join .done{text-align:center;padding:30px 18px}
#sma-join .done .tick{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--navy);display:grid;place-items:center;margin:0 auto 16px;font-size:34px;font-weight:800}
#sma-join .done-img{width:100%;max-width:420px;height:auto;border-radius:14px;margin:0 auto 16px;display:block}
#sma-join .done h2{font-size:22px;line-height:1.5}
#sma-join .done p{color:#3A4B5E;margin:8px auto 0;max-width:540px}
#sma-join .done-note{background:var(--ivory);border:1px solid #F1DDA0;border-radius:12px;padding:12px 16px;margin:16px auto 0;max-width:560px}
#sma-join .done-note p{margin:0;color:#5A4A1E;font-size:15px}
#sma-join .done .dua{color:var(--gold-d);font-weight:800;margin-top:14px}
#sma-join .done .mailnote{font-size:13.5px;color:var(--muted)}

/* HR WhatsApp */
#sma-join .foot{text-align:center;color:#94A3B8;font-size:12.5px;padding:26px 0 96px;margin:0}
#sma-join .hr-line{margin:14px 0 0;font-size:14.5px;color:#D6E3F2}
#sma-join .hr-line a{color:var(--gold2);font-weight:700;text-decoration:none;border-bottom:1px dashed rgba(232,194,90,.6)}
#sma-join .done .hr-line{color:var(--muted);margin-top:16px}
#sma-join .done .hr-line a{color:var(--ok);border-color:rgba(30,126,52,.4)}
#sma-join .hr-fab{position:fixed;bottom:18px;right:18px;z-index:50;display:flex;align-items:center;gap:8px;background:#25D366;color:#fff;
  text-decoration:none;font-weight:800;font-size:15px;height:56px;min-width:56px;padding:0 16px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
#sma-join .hr-fab:hover{filter:brightness(1.05)}
#sma-join .hr-fab svg{flex:0 0 auto}

@media (max-width:520px){
  #sma-join .hr-fab span{display:none} #sma-join .hr-fab{padding:0;justify-content:center;width:56px}
  #sma-join .lang{top:14px;transform:none}
  #sma-join .st span{display:none}
  #sma-join .st.cur span{display:block;overflow:visible;max-width:none}
}
@media (min-width:720px){
  #sma-join .logo{height:124px}
  #sma-join h1{font-size:36px}
  #sma-join .hero{padding:48px 0 44px}
  #sma-join .why{grid-template-columns:1fr 1fr}
  #sma-join .roles{grid-template-columns:repeat(4,1fr)}
  #sma-join .card{padding:26px 30px 30px}
}
@media (max-width:340px){ #sma-join .opts.two{grid-template-columns:1fr} #sma-join h1{font-size:24px} #sma-join .logo{height:80px} }
@media (prefers-reduced-motion:reduce){ #sma-join *{transition:none!important} }