/*
 * Azon Forms — front-end stylesheet.
 * Everything is scoped under .azf so no template rule can reach in and no rule
 * here can leak out. Mobile-first grid, 44px+ tap targets, reduced-motion and
 * print variants included.
 *
 * (C) 2026 Azon Allied Health & Educare Development Sdn. Bhd.
 */
.azf{--ink:#1e2b3d;--mut:#5b6b86;--soft:#8496ae;--ln:#e2e9f3;--ln2:#d3dfef;
--bl:#3f6cb2;--bls:#6c8ac5;--grn:#52be94;--grnd:#2f8f6c;--red:#c0392b;--redbg:#fdf3f2;
--wash:#f6f9fd;--amb:#a8701a;--ambg:#fff8ec;--rad:12px;
max-width:1400px;margin:0;color:var(--ink);font-size:16px;line-height:1.6;text-align:left}
.azf *{box-sizing:border-box}
.azf a{color:var(--bl);text-decoration:none}
.azf a:hover{text-decoration:underline}

/* ---------- shell: sticky nav + body ---------- */
.azf .az-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.azf .az-shell>*{min-width:0}
.azf .az-body{min-width:0}
@media (min-width:1080px){
  .azf .az-shell{grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start}
}

/* ---------- section navigator ---------- */
.azf .az-nav{position:sticky;top:150px;align-self:start}
.azf .az-nav-h{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
color:var(--soft);margin:0 0 14px}
.azf .az-nav ol{list-style:none;margin:0;padding:0}
.azf .az-nav li{margin:0}
.azf .az-nav a{display:flex;gap:12px;align-items:flex-start;padding:9px 12px;border-radius:10px;
font-size:14.5px;font-weight:600;color:var(--mut);line-height:1.35;
transition:background .18s ease,color .18s ease}
.azf .az-nav a:hover{background:var(--wash);color:var(--ink);text-decoration:none}
.azf .az-nav a.is-active{background:#eaf1fb;color:var(--bl)}
.azf .az-nav .az-dot{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--ln2);
display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--soft);
background:#fff;margin-top:0;transition:all .22s ease}
.azf .az-nav a.is-active .az-dot{border-color:var(--bl);color:var(--bl)}
.azf .az-nav a.is-done .az-dot{border-color:var(--grn);background:var(--grn);color:#fff}
.azf .az-nav a.is-done .az-dot span{display:none}
.azf .az-nav a.is-done .az-dot:after{content:"";width:10px;height:6px;border-left:2px solid #fff;
border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.azf .az-prog{margin-top:16px;padding:0 12px}
.azf .az-prog-bar{height:5px;border-radius:99px;background:var(--ln);overflow:hidden}
.azf .az-prog-bar i{display:block;height:100%;width:0;border-radius:99px;
background:linear-gradient(90deg,var(--bls),var(--grn));transition:width .35s cubic-bezier(.3,.9,.3,1)}
.azf .az-prog-t{margin-top:7px;font-size:12.5px;color:var(--soft);font-weight:600}

/* mobile: horizontal chip rail */
@media (max-width:1079.98px){
  .azf .az-nav{position:sticky;top:0;z-index:40;margin:0 0 26px;
    background:#fff;border-bottom:1px solid var(--ln);padding:10px 0 9px;
    box-shadow:0 6px 14px -10px rgba(30,43,61,.35)}
  .azf .az-nav-h{display:none}
  .azf .az-nav{min-width:0;max-width:100%}
  .azf .az-nav ol{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;scroll-snap-type:x proximity}
  .azf .az-nav ol::-webkit-scrollbar{display:none}
  .azf .az-nav li{flex:none;scroll-snap-align:start}
  .azf .az-nav a{white-space:nowrap;border:1px solid var(--ln);padding:7px 13px 7px 9px;font-size:13.5px;
    align-items:center}
  .azf .az-nav a.is-active{border-color:#bcd0ec}
  .azf .az-nav .az-dot{width:19px;height:19px;font-size:10.5px}
  .azf .az-prog{margin-top:9px;padding:0}
}

/* ---------- header ---------- */
.azf .az-head{margin:0 0 30px}
.azf .az-head p{margin-top:12px}
.azf .az-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;
text-transform:uppercase;font-weight:700;color:var(--bl);background:#fff;border:1px solid var(--ln);
border-radius:999px;padding:6px 14px}
.azf .az-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
clip-path:inset(50%);white-space:nowrap}
.azf .az-head h2{margin:15px 0 9px;font-size:31px;line-height:1.25;font-weight:800;color:var(--ink)}
.azf .az-head p{margin:0;color:var(--mut);font-size:16px;max-width:640px}
.azf .az-reqnote{margin-top:14px;font-size:13.5px;color:var(--soft)}
.azf .az-reqnote b{color:var(--red);font-weight:700}

/* ---------- sections ---------- */
.azf .az-sec{border:1px solid var(--ln);border-radius:18px;background:#fff;padding:28px 30px 30px;
margin:0 0 22px;scroll-margin-top:170px;
opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.9,.3,1)}
.azf .az-sec.az-vis{opacity:1;transform:none}
.azf .az-sec-h{display:flex;align-items:center;gap:13px;margin:0 0 4px}
.azf .az-ico{flex:none;width:40px;height:40px;border-radius:11px;background:#eef4fc;color:var(--bl);
display:flex;align-items:center;justify-content:center}
.azf .az-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.azf .az-sec-h h3{margin:0;font-size:19px;font-weight:800;color:var(--ink);line-height:1.3}
.azf .az-sec-hint{margin:0 0 22px 53px;color:var(--soft);font-size:14px}
.azf .az-sec-hint:empty{display:none}

/* ---------- grid + fields ---------- */
.azf .az-row{display:grid;gap:16px 18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.azf .az-f{display:flex;flex-direction:column;min-width:0}
.azf .az-f.az-wide{grid-column:1/-1}
.azf .az-lab{font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.4}
.azf .az-lab i{font-style:normal;color:var(--red);margin-left:2px}
.azf .az-hint{font-size:12.5px;color:var(--soft);font-weight:500;margin-left:6px}
.azf .az-in,.azf .az-ta,.azf .az-se{
width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;
border:1.5px solid var(--ln2);border-radius:10px;padding:11px 13px;
transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
-webkit-appearance:none;appearance:none}
.azf .az-ta{min-height:82px;resize:vertical;line-height:1.55}
.azf .az-se{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center;background-size:17px;padding-right:36px}
.azf .az-in:hover,.azf .az-ta:hover,.azf .az-se:hover{border-color:#bccbe2}
.azf .az-in:focus,.azf .az-ta:focus,.azf .az-se:focus{outline:none;border-color:var(--bl);
box-shadow:0 0 0 3.5px rgba(63,108,178,.14)}
.azf .az-f.az-err .az-in,.azf .az-f.az-err .az-ta,.azf .az-f.az-err .az-se{
border-color:var(--red);background:var(--redbg)}
.azf .az-f.az-err .az-in:focus,.azf .az-f.az-err .az-ta:focus,.azf .az-f.az-err .az-se:focus{
box-shadow:0 0 0 3.5px rgba(192,57,43,.13)}
.azf .az-f.az-ok .az-in,.azf .az-f.az-ok .az-se,.azf .az-f.az-ok .az-ta{border-color:#bfe3d3}
.azf .az-msg{display:none;margin-top:6px;font-size:12.5px;color:var(--red);font-weight:600;line-height:1.45}
.azf .az-f.az-err .az-msg{display:block}
.azf .az-count{margin-top:5px;font-size:12px;color:var(--soft);text-align:right}
.azf .az-note-sm{margin-top:6px;font-size:12.5px;color:var(--soft)}

/* segmented control (gender / country) */
.azf .az-seg{display:flex;gap:8px;flex-wrap:wrap}
.azf .az-seg label{flex:1 1 0;min-width:96px;position:relative}
.azf .az-seg input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.azf .az-seg span{display:flex;align-items:center;justify-content:center;gap:7px;
border:1.5px solid var(--ln2);border-radius:10px;padding:11px 10px;font-size:14.5px;font-weight:600;
color:var(--mut);background:#fff;transition:all .16s ease;cursor:pointer;min-height:46px}
.azf .az-seg input:hover+span{border-color:#bccbe2}
.azf .az-seg input:checked+span{border-color:var(--bl);background:#eef4fc;color:var(--bl)}
.azf .az-seg input:focus-visible+span{box-shadow:0 0 0 3.5px rgba(63,108,178,.16)}
.azf .az-f.az-err .az-seg span{border-color:var(--red)}

/* consent checkbox */
.azf .az-consent{border:1px solid var(--ln);background:var(--wash);border-radius:14px;padding:20px 22px;
margin:0 0 20px;font-size:15px;color:var(--mut);line-height:1.68}
.azf .az-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:15.5px;
font-weight:700;color:var(--ink);margin:0 0 4px}
.azf .az-check input{position:absolute;opacity:0;width:1px;height:1px}
.azf .az-box{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--ln2);background:#fff;
display:flex;align-items:center;justify-content:center;transition:all .16s ease;margin-top:1px}
.azf .az-box:after{content:"";width:11px;height:6px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;
transform:rotate(-45deg) translate(1px,-1px) scale(.4);opacity:0;transition:all .18s ease}
.azf .az-check input:checked+.az-box{background:var(--grn);border-color:var(--grn)}
.azf .az-check input:checked+.az-box:after{opacity:1;transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.azf .az-check input:focus-visible+.az-box{box-shadow:0 0 0 3.5px rgba(82,190,148,.25)}
.azf .az-f.az-err .az-box{border-color:var(--red)}

/* ---------- repeating children ---------- */
.azf .az-kids{display:flex;flex-direction:column;gap:16px}
.azf .az-kid{border:1px solid var(--ln);border-radius:14px;background:var(--wash);padding:20px 22px 22px;
animation:azKid .4s cubic-bezier(.22,.9,.3,1) both}
@keyframes azKid{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.azf .az-kid.az-going{animation:azKidOut .28s ease forwards}
@keyframes azKidOut{to{opacity:0;transform:translateY(-6px) scale(.985);margin-bottom:-14px}}
.azf .az-kid-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.azf .az-kid-t{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:800;color:var(--ink)}
.azf .az-kid-n{flex:none;width:26px;height:26px;border-radius:8px;background:#e6eef9;color:var(--bl);
display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.azf .az-rm{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ln2);background:#fff;
color:var(--mut);border-radius:8px;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;
cursor:pointer;transition:all .16s ease}
.azf .az-rm:hover{border-color:#e9bdb7;color:var(--red);background:#fff}
.azf .az-rm svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.azf .az-empty{border:1.5px dashed var(--ln2);border-radius:14px;padding:26px 22px;text-align:center;
color:var(--soft);font-size:14.5px;background:#fcfdff}
.azf .az-add{display:inline-flex;align-items:center;gap:9px;margin-top:16px;border:1.5px solid var(--bls);
background:#fff;color:var(--bl);border-radius:10px;padding:11px 20px;font:inherit;font-size:14.5px;
font-weight:700;cursor:pointer;transition:all .18s ease}
.azf .az-add:hover{background:#eef4fc;transform:translateY(-1px);box-shadow:0 6px 16px rgba(63,108,178,.13)}
.azf .az-add:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.azf .az-add svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.azf .az-cap{margin-top:9px;font-size:12.5px;color:var(--soft)}

/* ---------- info blocks ---------- */
.azf .az-info{border-left:3px solid var(--amb);background:var(--ambg);border-radius:0 12px 12px 0;
padding:16px 20px;margin:0 0 22px;font-size:14.5px;color:#6d4c12;line-height:1.6}
.azf .az-info b{display:block;color:var(--amb);margin-bottom:4px;font-size:14px}
.azf .az-contact{border:1px solid var(--ln);border-radius:16px;padding:22px 24px;background:var(--wash);
font-size:14.5px;color:var(--mut);line-height:1.7;margin-top:26px}
.azf .az-contact b{display:block;color:var(--ink);font-size:15px;margin-bottom:7px}
.azf .az-contact .az-cl{display:flex;gap:9px;align-items:flex-start;margin-top:5px}
.azf .az-contact svg{flex:none;width:16px;height:16px;margin-top:3px;fill:none;stroke:var(--bls);
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- submit ---------- */
.azf .az-foot{margin-top:26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.azf .az-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;
background:linear-gradient(135deg,var(--grn),var(--grnd));color:#fff;border-radius:12px;
padding:15px 34px;font:inherit;font-size:16px;font-weight:700;cursor:pointer;min-height:52px;
box-shadow:0 8px 22px rgba(47,143,108,.26);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.azf .az-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 28px rgba(47,143,108,.32)}
.azf .az-btn:disabled{opacity:.62;cursor:not-allowed;transform:none;box-shadow:none}
.azf .az-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.azf .az-spin{width:18px;height:18px;border:2.4px solid rgba(255,255,255,.35);border-top-color:#fff;
border-radius:50%;animation:azSpin .7s linear infinite;display:none}
@keyframes azSpin{to{transform:rotate(360deg)}}
.azf.is-sending .az-spin{display:block}
.azf.is-sending .az-btn svg{display:none}

/* error summary */
.azf .az-alert{display:none;border:1px solid #f0c8c2;background:var(--redbg);border-radius:12px;
padding:15px 18px;margin:0 0 20px;color:#8f2a1e;font-size:14.5px;font-weight:600}
.azf .az-alert.az-on{display:flex;gap:11px;align-items:flex-start}
.azf .az-alert svg{flex:none;width:19px;height:19px;margin-top:1px;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.azf .az-alert ul{margin:7px 0 0;padding-left:19px;font-weight:500}
.azf .az-alert a{color:#8f2a1e;text-decoration:underline}

/* success panel */
.azf .az-done{display:none;border:1px solid #bfe3d3;background:linear-gradient(135deg,#f0faf6,#e6f6ef);
border-radius:18px;padding:40px 34px;text-align:center}
.azf.is-done .az-done{display:block;animation:azUp .5s cubic-bezier(.22,.9,.3,1) both}
.azf.is-done .az-shell,.azf.is-done .az-head{display:none}
@keyframes azUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.azf .az-done .az-tick{width:62px;height:62px;border-radius:50%;background:var(--grn);margin:0 auto 18px;
display:flex;align-items:center;justify-content:center}
.azf .az-done .az-tick svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round}
.azf .az-done h3{margin:0 0 8px;font-size:23px;font-weight:800;color:var(--ink)}
.azf .az-done p{margin:0 auto;max-width:460px;color:var(--mut);font-size:15.5px}

/* honeypots — off-screen, never display:none (bots detect that) */
.azf .az-hp{position:absolute!important;left:-9999px!important;top:auto!important;
width:1px!important;height:1px!important;overflow:hidden!important}

/* template guards */
.azf .az-head h2{font-size:31px!important;color:var(--ink)!important;font-weight:800!important;line-height:1.25!important;margin:15px 0 9px!important}
.azf .az-sec-h h3{font-size:19px!important;color:var(--ink)!important;font-weight:800!important;margin:0!important;line-height:1.3!important}
.azf .az-done h3{font-size:23px!important;color:var(--ink)!important;font-weight:800!important;margin:0 0 8px!important}
.azf label{display:block;font-weight:inherit}
.azf input[type=checkbox],.azf input[type=radio]{margin:0}
.azf button{font-family:inherit}

@media (max-width:640px){
  .azf{font-size:15.5px}
  .azf .az-head h2{font-size:24px!important}
  .azf .az-sec{padding:22px 18px 24px;border-radius:15px}
  .azf .az-sec-hint{margin-left:0}
  .azf .az-kid{padding:17px 15px 19px}
  .azf .az-consent{padding:16px 17px}
  .azf .az-contact{padding:18px 18px}
  .azf .az-btn{width:100%}
  .azf .az-row{grid-template-columns:1fr;gap:15px}
  .azf .az-done{padding:32px 20px}
}
@media (prefers-reduced-motion:reduce){
  .azf .az-sec{opacity:1!important;transform:none!important;transition:none!important}
  .azf .az-kid{animation:none}
  .azf *{transition-duration:.01ms!important}
}
@media print{
  .azf .az-nav,.azf .az-foot,.azf .az-add,.azf .az-rm{display:none!important}
  .azf .az-sec{opacity:1!important;transform:none!important;break-inside:avoid}
}

.azf .az-in::placeholder,.azf .az-ta::placeholder{color:#a9b6c9;opacity:1}
.azf .az-row{align-items:start}
.azf .az-lab{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 2px}

.azf .az-row-1{grid-template-columns:minmax(0,380px)}
.azf .az-check>span:last-child i{margin-left:3px}

/* static blocks inside a section */
.azf .az-static{width:100%}
.azf .az-static .az-consent{margin:0 0 4px}
.azf .az-f:has(> .az-static){padding:0}

/* ------------------------------------------------------------------ *
 * Result panels rendered by the site template after a submission.
 * ------------------------------------------------------------------ */
.azf-result{max-width:660px;margin:10px 0 30px;border-radius:18px;padding:44px 34px;text-align:center}
.azf-result.azf-good{border:1px solid #bfe3d3;background:linear-gradient(135deg,#f0faf6,#e6f6ef)}
.azf-result.azf-bad{border:1px solid #f0c8c2;background:#fdf5f4;margin-bottom:26px}
.azf-result .azf-tick{width:64px;height:64px;border-radius:50%;margin:0 auto 20px;
display:flex;align-items:center;justify-content:center}
.azf-result.azf-good .azf-tick{background:#52be94}
.azf-result.azf-bad .azf-tick{background:#c0392b}
.azf-result .azf-tick svg{width:31px;height:31px;fill:none;stroke:#fff;stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round}
.azf-result h3{margin:0 0 10px!important;font-size:23px!important;font-weight:800!important;color:#1e2b3d!important}
.azf-result p{margin:0 auto;max-width:470px;color:#5b6b86;font-size:15.5px;line-height:1.65}
.azf-result .azf-ref{margin-top:16px;font-size:14px;color:#8496ae}
.azf-notice{border:1px solid #e2e9f3;background:#f6f9fd;border-radius:12px;padding:18px 22px;
color:#5b6b86;font-size:15px}
@media (max-width:600px){.azf-result{padding:32px 20px}.azf-result h3{font-size:20px!important}}