/* =====================================================================
   Exalda · Enroll Now pop-up and the enrolment confirmation page
   Loaded only on programme pages (and /training/enrolled).
   Builds on exalda.css (.btn, .fld, .chipsel, .x) and main.css (fonts).
   ===================================================================== */

/* ---------- Pop-up shell ---------- */
/* html carries overflow-x:clip, so body.lock alone does not stop the page scrolling */
html.en-lock,html:has(body.lock){overflow:hidden}
.en{position:fixed;inset:0;z-index:88;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top,0px)) 16px max(20px,env(safe-area-inset-bottom,0px))}
.en[hidden]{display:none}
.en-scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .4s ease}
.en.open .en-scrim{opacity:1}
.en-card{position:relative;width:min(580px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;background:#fff;color:#14223d;border-radius:22px;box-shadow:0 40px 90px rgba(5,12,26,.38);opacity:0;transform:translateY(26px) scale(.97);transition:opacity .35s ease,transform .6s var(--ease-out);--ink:#14223d;--ink-muted:#5b6b86;--border:#dde3ec;--surface-card:#fff}
.en.open .en-card{opacity:1;transform:none}
.en .x{top:14px;right:14px;width:40px;height:40px;--ghost-line:var(--border);background:#fff;z-index:3}
.en-prog{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:18px 70px 0 30px}
.en-prog i{height:4px;border-radius:4px;background:#e8edf4;overflow:hidden;position:relative}
.en-prog i::after{content:"";position:absolute;inset:0;background:#fba412;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.en[data-at="plan"] .en-prog i:first-child::after,
.en[data-at="details"] .en-prog i::after,
.en[data-at="result"] .en-prog i::after{transform:none}

.en-step[hidden]{display:none}
.motion .en.open .en-step:not([hidden]) .en-head,
.motion .en.open .en-step:not([hidden]) .en-body{animation:enIn .55s var(--ease-out) both}
.motion .en.open .en-step:not([hidden]) .en-body{animation-delay:.06s}
@keyframes enIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.en-head{padding:18px 30px 0;display:flex;flex-direction:column;gap:6px}
.en-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b06f00;padding-right:40px}
.en-title{font-family:var(--font-head);font-weight:800;font-size:clamp(1.4rem,1.2rem + .6vw,1.65rem);line-height:1.15;letter-spacing:-.018em;color:#14223d;text-wrap:balance;outline:none}
.en-sub{font-size:14.5px;line-height:1.55;color:#5b6b86}
.en-sub b{color:#14223d;font-weight:600}
.en-body{padding:20px 30px 28px;display:flex;flex-direction:column;gap:16px}

/* ---------- Step 1: plans ---------- */
.en-plans{display:grid;gap:12px}
.en-plan{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:4px 14px;padding:16px 18px;border:1.5px solid #dde3ec;border-radius:16px;background:#fff;cursor:pointer;transition:border-color .25s,background-color .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
.en-plan:hover{border-color:#a9b4c8}
.en-plan input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.en-plan.on{border-color:#14223d;background:#fbfcfe;box-shadow:0 0 0 1px #14223d,0 10px 26px rgba(20,34,61,.08)}
.en-radio{grid-row:1;width:22px;height:22px;border-radius:50%;border:2px solid #a9b4c8;display:grid;place-items:center;transition:border-color .2s}
.en-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:#fba412;transform:scale(0);transition:transform .35s var(--ease-spring)}
.en-plan.on .en-radio{border-color:#14223d}
.en-plan.on .en-radio::after{transform:scale(1)}
.en-plan input:focus-visible~.en-radio{box-shadow:0 0 0 4px var(--amber-soft);border-color:#fba412}
.en-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:16px;font-weight:700;color:#14223d}
.en-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--amber-soft);color:#8a5600}
.en-price{font-family:var(--font-head);font-weight:800;font-size:1.3rem;letter-spacing:-.01em;color:#14223d;text-align:right;white-space:nowrap}
.en-price small{font-family:var(--font);font-size:13px;font-weight:600;color:#5b6b86;letter-spacing:0}
.en-desc{grid-column:2/4;font-size:13.5px;line-height:1.4;color:#5b6b86}
.en-sched{grid-column:1/4;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.en-sched>span{display:block;overflow:hidden;min-height:0}
.en-plan.on .en-sched{grid-template-rows:1fr}
.en-tl{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));margin:14px 0 2px;padding-top:4px;position:relative}
.en-tl::before{content:"";position:absolute;left:calc(50% / var(--n,4));right:calc(50% / var(--n,4));top:10px;border-top:2px dashed #cdd5e1}
.en-tl li{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:12.5px;color:#5b6b86}
.en-tl li::before{content:"";width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #a9b4c8;margin-bottom:4px;position:relative;z-index:1}
.en-tl li.now::before{background:#fba412;border-color:#fba412;box-shadow:0 0 0 4px var(--amber-soft)}
.en-tl b{font-weight:700;color:#14223d;font-size:13px}
.en-tl li.now b{color:#b06f00}
.en-skel{height:78px;border-radius:16px;background:linear-gradient(90deg,#f1f4f8 0%,#f8fafc 50%,#f1f4f8 100%);background-size:200% 100%;animation:enSkel 1.2s linear infinite}
@keyframes enSkel{to{background-position:-200% 0}}

.en-inc{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:#5b6b86;padding:12px 14px;border-radius:12px;background:#f4f6fa}
.en-inc .ic{flex:none;width:18px;height:18px;color:#13805a;margin-top:1px}
.en-actions{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.en-actions .btn{min-width:180px}
.en .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.en .btn[disabled]::before{display:none}
.en .btn.busy[disabled]{opacity:.9;cursor:progress}
.en-secure{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:#5b6b86}
.en-secure .ic{width:15px;height:15px;flex:none}
.en-secure a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.en-secure a:hover{color:#14223d}

/* ---------- Step 2: details ---------- */
.en-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 0;border:0;background:none;font:600 13.5px/1.2 var(--font);color:#5b6b86;cursor:pointer;transition:color .2s}
.en-back:hover{color:#14223d}
.en-back .ic{width:16px;height:16px;transform:rotate(90deg)}
.en-chosen{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:4px;padding:10px 14px;border-radius:12px;background:#fff8ec;border:1px solid #f6dfb0;font-size:14px;color:#14223d}
.en-chosen b{font-weight:700}
.en-chosen button{margin-left:auto;border:0;background:none;padding:0;font:600 13px/1 var(--font);color:#b06f00;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.en-google{display:flex;flex-direction:column;gap:14px}
.en-google[hidden],.en-who[hidden],.en-alert[hidden],.en-ids[hidden]{display:none}
.en-gbtn{min-height:44px;display:flex;justify-content:center}
.en-or{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;color:#7a879c}
.en-or::before,.en-or::after{content:"";flex:1;border-top:1px solid #e3e8ef}
.en-who{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid #dde3ec;border-radius:12px}
.en-av{position:relative;overflow:hidden;width:38px;height:38px;border-radius:50%;flex:none;background:#14223d;color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.en-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.en-who-t{min-width:0;display:flex;flex-direction:column;font-size:13px;color:#5b6b86}
.en-who-t b{font-size:14.5px;color:#14223d;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.en-who-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.en-who button{margin-left:auto;flex:none;border:0;background:none;font:600 13px/1 var(--font);color:#b06f00;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.en-form{gap:14px}
.en-form .frow{gap:12px}
.en-lbl{font-size:13.5px;font-weight:600}
.en-lbl em{font-style:normal;font-weight:400;color:#5b6b86}
.en .fld .hint{font-size:12.5px;line-height:1.45}
.en .fld.bad .hint{display:none}
.en .needs{gap:8px}
.en .chipsel{cursor:pointer}
.en-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.en-alert{font-size:13.5px;line-height:1.5;color:#8f2424;background:#fdeeee;border:1px solid #f4cccc;border-radius:12px;padding:11px 14px}
.en-alert a{color:inherit;font-weight:700}
.en-form .btn.en-go,.en .btn.en-next{align-self:stretch;width:100%;height:54px;font-size:15px}
.en-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:enSpin .7s linear infinite;flex:none}
@keyframes enSpin{to{transform:rotate(360deg)}}
.en .btn .en-spin,.enp .btn .en-spin{display:none}
.en .btn.busy .en-spin,.enp .btn.busy .en-spin{display:block}
.en .btn.busy .ic,.enp .btn.busy .ic{display:none}

/* ---------- Step 3: result ---------- */
.en-res{padding-bottom:28px;gap:12px}
.en-res .en-ic{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:var(--amber-soft);color:#14223d;margin-bottom:6px}
.en-res .en-ic .ic{width:28px;height:28px;stroke-width:2.4}
.en-res .en-ic.ok{background:#e7f6ef;color:#13805a}
.en-res .en-ic.wait .en-spin{width:26px;height:26px;border-width:3px;color:#c77f00}
.en-res p{font-size:15px;line-height:1.6;color:#5b6b86}
.en-res p b{color:#14223d}
.en-res .en-actions{margin-top:8px}
.en-res .btn{min-width:0}

/* ---------- Phones: a sheet from the bottom ---------- */
@media (max-width:640px){
  .en{place-items:end stretch;padding:0}
  .en-card{width:100%;max-height:calc(100dvh - 24px);border-radius:22px 22px 0 0;transform:translateY(100%);opacity:1;transition:transform .55s var(--ease-out)}
  .en-card::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:#d5dce6}
  .en-prog{padding:22px 64px 0 20px}
  .en .x{top:12px;right:12px}
  .en-head{padding:16px 20px 0}
  .en-body{padding:16px 20px calc(22px + env(safe-area-inset-bottom,0px))}
  .en-res{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .en-plan{padding:14px 14px;gap:4px 12px}
  .en-price{font-size:1.15rem}
  .en-actions .btn{flex:1 1 100%}
  .en-form .frow{grid-template-columns:minmax(0,1fr)}
  .en-tl li{font-size:11.5px}
  .en-tl b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .en-card,.en-sched,.en-prog i::after{transition:none}
  .en-skel{animation:none}
}

/* ---------- Confirmation page (/training/enrolled) ---------- */
.enp .hs-in{align-items:start;row-gap:28px}
.enp .hs-vis{grid-row:span 2}
.enp-after{max-width:520px;min-width:0}
.enp-after:empty{display:none}
.enp-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--amber-soft);color:#14223d}
.enp-ic .ic{width:30px;height:30px;stroke-width:2.4}
.enp-ic.ok{background:#e7f6ef;color:#13805a}
.enp-ic.bad{background:#fdeeee;color:#b33a3a}
.enp-ic .en-spin{width:28px;height:28px;border-width:3px;color:#c77f00}
.enp-lead{font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.6;color:#22314d;max-width:46ch}
.enp-lead b{color:#14223d}
.enp-next{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid rgba(20,34,61,.1)}
.enp-next h2{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5b6b86}
.enp-next li{display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:#22314d}
.enp-next li .ic{flex:none;width:18px;height:18px;margin-top:3px;color:#13805a}
.enp-card{position:relative;z-index:1;background:#fff;border:1px solid #e6ebf2;border-radius:20px;box-shadow:0 2px 6px rgba(20,34,61,.05),0 24px 60px rgba(20,34,61,.12);padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:4px;max-width:480px;margin-left:auto}
.enp-card h2{font-family:var(--font-head);font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:#14223d;margin-bottom:8px}
.enp-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px dashed #e1e6ee;font-size:14.5px}
.enp-row:last-of-type{border-bottom:0}
.enp-row span{color:#5b6b86}
.enp-row b{font-weight:700;color:#14223d;text-align:right}
.enp-row b.code{font-family:var(--mono);font-size:14px;letter-spacing:.02em;background:#fff8ec;padding:3px 8px;border-radius:6px}
.enp-bar{height:8px;border-radius:8px;background:#eef2f8;overflow:hidden;margin:6px 0 4px}
.enp-bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,#fba412,#f5b740);border-radius:inherit;transition:width 1s var(--ease-out)}
.enp-card .btn{margin-top:14px;align-self:stretch}
.enp-card small{font-size:12.5px;color:#5b6b86;text-align:center;margin-top:6px}
.enp .hs-vis .hs-e{left:auto;right:-6%;top:-12%;width:70%}
@media (max-width:980px){
  .enp-card{margin-left:0;max-width:none}
  .enp .hs-e{display:none}
}
@media print{
  .hdr,.foot,.mnav,.pbar,.drawer,.modal,.en{display:none!important}
  .enp-card{box-shadow:none}
}
.enp [data-p="actions"]:empty{display:none}