/* IEEE PowerTalks 2026 — registration wizard theme.
   Light / white, classy, IEEE-blue accent. Iframe-friendly (no fixed chrome). */

:root{
  /* IEEE PowerTalks brand blue (#1565A5) — the single accent that drives the whole theme */
  --blue:#1565A5; --blue-600:#0f4d80; --blue-050:#e9f1f8; --blue-100:#cfe1f2;
  --grad:linear-gradient(135deg,#1565A5,#2a86cc);
  --ink:#141c2e; --ink-2:#3a465c; --muted:#6b7688; --muted-2:#9aa4b5;
  --bg:#f5f7fb; --card:#ffffff; --line:#e7eaf1; --line-2:#eef1f6;
  --ok:#12b76a; --ok-050:#e9faf1; --warn:#f79009; --danger:#f04438; --danger-050:#fef3f2;
  --r:16px; --r-sm:11px; --r-xs:8px;
  --sh:0 1px 2px rgba(16,24,40,.06),0 8px 30px rgba(16,24,40,.06);
  --sh-lg:0 12px 44px rgba(21,101,165,.14);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
.hidden{display:none !important}
.small{font-size:12.5px;color:var(--muted)}
.mut{color:var(--muted)}

/* ---- app shell (iframe: no nav, just the wizard) ---- */
.app{max-width:960px;margin:0 auto;padding:22px 18px 40px}

/* ---- stepper (inside) ---- */
.stepper{display:flex;align-items:center;justify-content:center;gap:0;margin:6px auto 22px;max-width:560px}
.snode{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto;position:relative;z-index:2}
.snode .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;
  background:#fff;border:2px solid var(--line);color:var(--muted-2);transition:.25s var(--ease)}
.snode .slabel{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.snode.active .dot{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(21,101,165,.35)}
.snode.active .slabel{color:var(--ink)}
.snode.done .dot{background:var(--blue-050);border-color:var(--blue-100);color:var(--blue)}
.sline{flex:1 1 auto;height:2px;background:var(--line);margin:0 8px;position:relative;top:-11px;min-width:24px;border-radius:2px}
.sline.done{background:var(--blue-100)}

/* ---- step blocks ---- */
.wstep{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.head{margin:0 0 4px;font-size:22px;font-weight:800;letter-spacing:-.2px}
.sub{color:var(--muted);font-size:14px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}

/* ---- Lightning arc strip (sits between the stepper and the package cards) ----
   Replaces the earlier ECG "heartbeat" strip: the event is about power, so the line is a jagged
   bolt instead of a cardiac spike. It doubles as a live circuit — the bolt is split into one
   segment per wizard step, separated by switches. Current flows CONTINUOUSLY through every
   connected segment; an open switch stops it dead. Advancing a step closes the next switch, so
   the same flow carries on into the newly connected segment. Sits on the page's own light
   background (no band), so the stroke is the brand blue rather than a neon glow. */
.bolt{width:100%;height:44px;margin:-2px 0 12px;overflow:hidden;pointer-events:none}
.bolt-svg{width:100%;height:100%;display:block}
/* The un-energised conductor, always visible for the full width so the road ahead is legible. */
.bolt-base{fill:none;stroke:var(--line);stroke-width:2;opacity:.9;stroke-linecap:round;stroke-linejoin:round}

/* The live current. The paths carry pathLength="100", so dash values are PERCENTAGES of the path
   and stay correct however wide the strip renders (preserveAspectRatio="none" stretches it).
   Three short dashes chase each other endlessly — this animation NEVER stops; what changes per
   step is how much of the bolt the clip lets you see. */
.bolt-live{fill:none;stroke:#1B7FD1;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;
  stroke-dasharray:14 9;   /* user units, NOT pathLength-normalised, so density is even everywhere */
  filter:drop-shadow(0 0 3px rgba(27,127,209,.7));
  animation:boltFlow 1.1s linear infinite}
@keyframes boltFlow{from{stroke-dashoffset:46}to{stroke-dashoffset:0}}

/* The gate: a clip rectangle that only exposes the connected part of the circuit. Widening it is
   what "closes the switch" — the running current simply carries on into the next segment. */
.bolt-gate{transition:width .8s var(--ease)}

/* Switch markers. Open = hollow grey (circuit broken); closed = filled blue (current passes). */
.bolt-sw{fill:var(--card);stroke:var(--line);stroke-width:2;transition:stroke .5s var(--ease),fill .5s var(--ease)}
.bolt-sw.on{fill:#1B7FD1;stroke:#1B7FD1;filter:drop-shadow(0 0 4px rgba(27,127,209,.6))}

@media (prefers-reduced-motion:reduce){
  .bolt-live{animation:none;stroke-dasharray:none}
  .bolt-gate{transition:none}
}

/* ---- full-width package carousel ---- */
.carousel{position:relative;margin:0 -2px}
.ctrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 16px;scrollbar-width:thin}
.ctrack::-webkit-scrollbar{height:8px}
.ctrack::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.ctrack::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}
.pkg{scroll-snap-align:center;flex:0 0 clamp(260px,30%,300px);background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--r);padding:22px;display:flex;flex-direction:column;cursor:pointer;transition:.2s var(--ease);position:relative;overflow:hidden}
.pkg::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad);opacity:0;transition:.2s}
.pkg:hover{transform:translateY(-5px);border-color:var(--blue-100);box-shadow:var(--sh-lg)}
.pkg:hover::before{opacity:1}
.pkg.selected{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050),var(--sh-lg)}
.pkg.selected::before{opacity:1}
/* tick indicator (checkbox circle, top-right) — shown when the card is selected */
.pkg-tick{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center;transition:.18s var(--ease)}
.pkg-tick::after{content:"";width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) scale(0);transition:.18s var(--ease)}
.pkg.selected .pkg-tick{border-color:transparent;background:var(--grad)}
.pkg.selected .pkg-tick::after{transform:rotate(-45deg) scale(1)}
.pkg.has-badge .pkg-tick{display:none}
/* status badge (top-left) — JS fills "✔ Included" / "⭐ Auto Selected" only in the auto-upgrade state */
.pkg-badge{position:absolute;top:0;left:0;font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:5px 12px;border-bottom-right-radius:10px;color:#fff;display:none;z-index:2}
.pkg-badge.show-included{display:block;background:var(--ok)}
.pkg-badge.show-auto{display:block;background:var(--grad)}
.pkg .pt{font-size:17px;font-weight:800;margin-bottom:3px}
.pkg .pd{font-size:12px;color:var(--blue);font-weight:700;margin-bottom:14px;display:inline-flex;align-items:center;gap:5px}
.pkg .price{font-size:30px;font-weight:800;letter-spacing:-1px}
.pkg .price small{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0}
.pkg .price.free{color:#111}
.pkg .vat{font-size:11px;color:var(--muted-2);margin:2px 0 16px}
.pkg ul{list-style:none;margin:0 0 18px;padding:0;flex:1}
.pkg ul li{padding:6px 0 6px 26px;position:relative;font-size:13.5px;color:var(--ink-2)}
.pkg ul li::before{content:"";position:absolute;left:2px;top:9px;width:14px;height:8px;border-left:2.2px solid var(--blue);border-bottom:2.2px solid var(--blue);transform:rotate(-45deg)}
/* auto-upgrade premium panel (Conference + Masterclass → Full Pass) */
.upgrade-panel{margin-top:14px;padding:20px 18px;border-radius:var(--r);text-align:center;background:linear-gradient(135deg,var(--blue-050),#fff);border:1px solid var(--blue-100);box-shadow:var(--sh-lg)}
.upgrade-panel:not(.hidden){animation:upIn .5s var(--ease)}
@keyframes upIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.upgrade-panel .up-line{font-weight:800;font-size:15px;color:var(--ink)}
.upgrade-panel .up-plus{font-size:18px;color:var(--muted-2);margin:1px 0}
.upgrade-panel .up-arrow{font-size:22px;color:var(--blue);margin:3px 0;animation:upBounce 1.3s ease-in-out infinite}
@keyframes upBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.upgrade-panel .up-result{margin-top:8px;font-size:16px;font-weight:800;color:var(--blue);animation:upGlow 2.2s ease-in-out infinite}
.upgrade-panel .up-result b{color:var(--blue-600)}
@keyframes upGlow{0%,100%{text-shadow:none}50%{text-shadow:0 0 14px rgba(21,101,165,.28)}}
/* bottom action bar (dynamic Continue / Choose Sessions) */
.action-bar{margin-top:16px}
.cnav{display:flex;justify-content:center;gap:10px;margin-top:2px}
.cnav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-size:18px;box-shadow:var(--sh);transition:.15s}
.cnav button:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}

/* ---- back bar + selection chip ---- */
.backbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 14px;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--ink-2);transition:.15s}
.back:hover{border-color:var(--blue);color:var(--blue)}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--blue-050);color:var(--blue-600);border:1px solid var(--blue-100);
  border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px}
.chip .x{cursor:pointer;opacity:.6}.chip .x:hover{opacity:1}

/* ---- masterclass modal ---- */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(20,28,46,.5);backdrop-filter:blur(3px)}
.modal.show{display:flex;animation:fade .25s var(--ease)}
.modal .box{background:#fff;border-radius:var(--r);max-width:640px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 24px 70px rgba(16,24,40,.28)}
.modal .mhead{padding:22px 24px 6px}
.modal .mhead h3{margin:0;font-size:19px;font-weight:800}
.modal .mbody{padding:8px 24px 20px}
.modal .mfoot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line-2);padding:16px 24px;display:flex;gap:10px;justify-content:flex-end}
.slot{margin:16px 0}
.slot .sh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.slot .sh .time{background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:6px}
.slot .sh .lab{font-weight:700;font-size:14px}
.mc-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mc-opt{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px;cursor:pointer;transition:.15s;background:#fff;position:relative}
.mc-opt:hover{border-color:var(--blue-100);background:var(--blue-050)}
.mc-opt.selected{border-color:var(--blue);background:var(--blue-050);box-shadow:0 0 0 2px var(--blue-050)}
.mc-opt .rad{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.mc-opt.selected .rad{border-color:var(--blue)}
.mc-opt.selected .rad::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--grad)}
.mc-opt .track{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.3px}
.mc-opt .nm{font-weight:700;font-size:14px;margin:3px 0}
.mc-opt .tp{font-size:12px;color:var(--muted);line-height:1.4}

/* ---- form ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;color:var(--ink-2);font-weight:600}
.field label .req{color:var(--danger)}
.field input,.field select{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 13px;color:var(--ink);font-size:14px;width:100%;transition:.15s;font-family:inherit}
.field input::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.field input:disabled{background:var(--line-2);color:var(--muted);cursor:not-allowed}
.field input.invalid{border-color:var(--danger)}
.field input.valid{border-color:var(--ok)}
.field .err{font-size:11.5px;color:var(--danger);min-height:13px}
.phone-row{display:grid;grid-template-columns:158px 1fr;gap:10px}

/* ---- custom flag dropdown ---- */
.dd{position:relative}
.dd-toggle{display:flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 13px;cursor:pointer;font-size:14px;min-height:46px;color:var(--ink)}
.dd-toggle:focus,.dd.open .dd-toggle{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.dd-toggle .flag{font-size:18px;line-height:1}.dd-toggle .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-toggle .caret{margin-left:auto;color:var(--muted-2)}
.dd-menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-lg);max-height:290px;overflow:hidden;display:none;flex-direction:column}
.dd.open .dd-menu{display:flex}
.dd-search{padding:10px;border-bottom:1px solid var(--line-2)}
.dd-search input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px;color:var(--ink);font-size:13px}
.dd-list{overflow-y:auto;max-height:225px}
.dd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;font-size:14px}
.dd-item:hover,.dd-item.active{background:var(--blue-050)}
.dd-item .flag{font-size:18px}.dd-item .dial{color:var(--muted);margin-left:auto;font-size:13px}

/* ---- student upload ---- */
.upload{border:2px dashed var(--line);border-radius:var(--r);padding:24px;text-align:center;cursor:pointer;transition:.15s;background:var(--bg)}
.upload:hover,.upload.drag{border-color:var(--blue);background:var(--blue-050)}
.upload .ic{font-size:28px}.upload .files{margin-top:10px;font-size:13px;color:var(--ok);font-weight:600}

/* ---- promo ---- */
.promo-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.promo-row button{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:0 18px;cursor:pointer;font-weight:700}
.promo-row button:hover{border-color:var(--blue);color:var(--blue)}
.promo-msg{font-size:12.5px;margin-top:6px}.promo-msg.ok{color:var(--ok)}.promo-msg.no{color:var(--danger)}

/* ---- summary ---- */
.summary{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:8px}
.summary .row{display:flex;justify-content:space-between;padding:6px 0;font-size:13.5px;color:var(--ink-2)}
.summary .row.total{border-top:1px dashed var(--line);margin-top:6px;padding-top:12px;font-size:18px;font-weight:800;color:var(--ink)}
.summary .row .free{color:#111}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--r-sm);padding:14px 26px;font-size:15px;font-weight:700;cursor:pointer;transition:.15s var(--ease);font-family:inherit}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(21,101,165,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(21,101,165,.36)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-block{width:100%}
.actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

/* ---- alerts ---- */
.alert{padding:12px 15px;border-radius:var(--r-sm);font-size:13.5px;margin:10px 0}
.alert-danger{background:var(--danger-050);border:1px solid #fecdc9;color:#b42318}
.alert-ok{background:var(--ok-050);border:1px solid #b6f0d0;color:#087443}

/* ---- confirmation step ---- */
.confirm{text-align:center;padding:10px 0}
.confirm .mark{width:78px;height:78px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:38px;background:var(--ok-050);color:var(--ok);animation:pop .4s var(--ease)}
.confirm .mark.warn{background:#fff7e8;color:var(--warn)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.qrbox{display:inline-block;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);margin:8px 0}
.confirm h2{margin:4px 0 6px;font-size:24px;font-weight:800}

/* ---- badge (profile) ---- */
.badge-card{text-align:center;background:linear-gradient(180deg,var(--blue-050),#fff);border:1px solid var(--blue-100);border-radius:var(--r);padding:24px}

/* ---- payment overlay ---- */
.overlay{position:fixed;inset:0;background:rgba(20,28,46,.55);z-index:100;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:16px}
.overlay.show{display:flex}
.overlay .obox{background:#fff;border-radius:var(--r);padding:32px;text-align:center;max-width:420px;width:100%;box-shadow:0 24px 70px rgba(16,24,40,.3)}
.spinner{width:46px;height:46px;border:4px solid var(--line);border-top-color:var(--blue);border-radius:50%;margin:0 auto 18px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- OTP input ---- */
.otp{text-align:center;letter-spacing:12px;font-size:24px;font-weight:700;padding:12px;border:1.5px solid var(--line);border-radius:var(--r-sm);width:100%}
.otp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}

/* ---- standalone fallback pages (success / profile / already_registered / ompay) ---- */
:root{--accent2:#1565A5}
.container{max-width:720px;margin:0 auto;padding:0 18px}
.site-header{padding:16px 0;border-bottom:1px solid var(--line);background:#fff;margin-bottom:10px}
.site-header .brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-header .t1{font-weight:800;font-size:17px}
.site-header .t2{font-size:12px;color:var(--muted)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.site-footer{padding:24px 0;text-align:center;color:var(--muted-2);font-size:12.5px}

/* ---- responsive ---- */
@media(max-width:680px){
  .app{padding:16px 14px 32px}
  .head{font-size:20px}
  .grid,.mc-opts{grid-template-columns:1fr}
  .pkg{flex-basis:84%}
  .phone-row{grid-template-columns:130px 1fr}
  .snode .slabel{display:none}
  .stepper{max-width:280px}
}