/* NexaBar UI Prototype v16 — scoped interaction refinements.
   All colors, sizing conventions and the Inter font come from assets/styles.css. */

/* The progress rail is physically BEHIND the opaque step badges. */
.nexa-checkout-steps{width:min(100%,670px);margin:0 auto 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;isolation:isolate;padding:4px 2px 0}
.nexa-step-track{position:absolute;top:26px;left:calc(100% / 6);right:calc(100% / 6);height:2px;background:#262932;z-index:0;overflow:hidden;border-radius:5px}
.nexa-step-track i{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue2),var(--mint));transition:width .85s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 14px rgba(111,125,255,.4)}
.nexa-step{display:flex;align-items:center;flex-direction:column;gap:12px;min-width:0;position:relative;z-index:1;color:#858b95;font-size:12px;text-align:center;transition:color .35s}
.nexa-step-badge{height:46px;width:46px;border:1px solid #343842;border-radius:50%;background:#0b0c10;display:grid;place-items:center;color:#848b98;font-size:15px;font-weight:650;position:relative;z-index:2;box-shadow:0 0 0 5px #030304;transition:background .45s,border-color .45s,box-shadow .45s,color .45s,transform .45s}
.nexa-step.is-current .nexa-step-badge{background:linear-gradient(145deg,#1b2035,#10121b);border-color:var(--blue2);color:#f7f7f8;box-shadow:0 0 0 5px #030304,0 0 0 7px #6f7dff24,0 0 30px #6f7dff16;transform:scale(1.025)}
.nexa-step.is-done .nexa-step-badge{color:#07120e;background:#89eed0;border-color:#89eed0;box-shadow:0 0 0 5px #030304,0 0 19px #7bf2cd28}
.nexa-step.is-current,.nexa-step.is-done{color:#e9edf4}.nexa-step-title{font-size:12px;font-weight:550;line-height:1.45}
.nexa-step.is-done .nexa-step-badge::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:18px;animation:nexaStepCheck .5s cubic-bezier(.17,.89,.32,1.35) both}
.nexa-step.is-done .nexa-step-badge{font-size:0}
@keyframes nexaStepCheck{from{opacity:0;transform:scale(.3) rotate(-32deg)}to{opacity:1;transform:scale(1) rotate(0)}}
#checkoutStep1,#checkoutStep2,#checkoutStep3{width:100%}
#checkoutStep2:not(.hidden),#checkoutStep3:not(.hidden){animation:nexaPaneIn .58s cubic-bezier(.16,1,.3,1) both}
@keyframes nexaPaneIn{from{opacity:0;transform:translateY(17px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
#checkoutStep2 .payment-preview{margin-top:22px}
.nexa-confirmation{text-align:center;position:relative;margin:0 auto}
.nexa-confirm-circle{width:114px;height:114px;position:relative;display:grid;place-items:center;margin:0 auto 20px;border-radius:50%;background:radial-gradient(circle,#7bf2cd14,transparent 73%)}
.nexa-confirm-svg{width:104px;height:104px;overflow:visible;filter:drop-shadow(0 0 12px #7bf2cd23)}
.nexa-confirm-ring{stroke:var(--mint);stroke-width:2.7;stroke-dasharray:264;stroke-dashoffset:264;transform-origin:center;transform:rotate(-90deg)}
.nexa-confirm-tick{stroke:#b1ffdd;stroke-width:5.5;stroke-dasharray:65;stroke-dashoffset:65}
.nexa-confirmation.is-playing .nexa-confirm-ring{animation:nexaDrawCircle .9s .13s cubic-bezier(.19,.82,.25,1) forwards}
.nexa-confirmation.is-playing .nexa-confirm-tick{animation:nexaDrawTick .48s .88s cubic-bezier(.11,.8,.27,1) forwards}
.nexa-confirmation.is-playing .nexa-confirm-circle:after{content:'';position:absolute;inset:10px;border:1px solid #7bf2cd5c;border-radius:50%;animation:nexaConfHalo 1.2s 1.1s both}
@keyframes nexaDrawCircle{to{stroke-dashoffset:0}}@keyframes nexaDrawTick{to{stroke-dashoffset:0}}@keyframes nexaConfHalo{from{opacity:.8;transform:scale(.7)}to{opacity:0;transform:scale(1.8)}}
.nexa-delivery-stage{padding:15px 0 0}.nexa-delivery-stage .nexa-confirmation h2{font-size:clamp(30px,3vw,40px);letter-spacing:-.055em;margin:6px 0 10px}.nexa-delivery-stage .nexa-confirmation .lead{margin-bottom:22px}
.nexa-license-reveal{border:1px solid rgba(143,163,255,.19);border-radius:19px;background:linear-gradient(160deg,#141622,#0b0d13 75%);text-align:center;padding:24px 18px 22px;opacity:0;transform:translateY(18px) scale(.98);filter:blur(6px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1),filter .65s;position:relative;overflow:hidden}
.nexa-license-reveal::before{content:'';position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:350px;height:250px;background:radial-gradient(ellipse,#7386ff13,transparent 70%);pointer-events:none}
.nexa-license-reveal.is-visible{opacity:1;transform:none;filter:none}
.nexa-reveal-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;position:relative}.nexa-reveal-heading .eyebrow{margin:0}
.nexa-live-dot{font-size:10px;color:#a4b5c7;white-space:nowrap;border:1px solid #ffffff15;border-radius:999px;padding:6px 10px;background:#ffffff05;font-weight:550}
.nexa-reveal-lock{color:#98a4b5;margin:15px auto 5px;width:53px;height:56px;display:grid;place-items:center;transform-origin:center;transition:transform .7s,color .5s}
.nexa-reveal-lock svg{width:43px;height:43px;overflow:visible}
.nexa-license-reveal.is-unlocked .nexa-reveal-lock{transform:rotate(-13deg) translateY(-3px);color:var(--mint)}
.nexa-license-reveal.is-unlocked .nexa-reveal-lock path{transform-origin:18px 22px;animation:nexaUnlock .72s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes nexaUnlock{50%{transform:translateY(-5px) rotate(-18deg)}100%{transform:translateY(-5px) rotate(-18deg)}}
.nexa-license-token{position:relative;display:block;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:#080a0e;padding:17px 8px;margin:8px auto 18px;max-width:100%;overflow-wrap:anywhere;font:600 clamp(12px,2vw,16px)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.065em;color:#b1c5dc;min-height:57px}
.nexa-license-reveal.is-unlocked .nexa-license-token{border-color:#7bf2cd64;box-shadow:0 0 0 4px #7bf2cd0b,0 0 31px #7bf2cd10}
.nexa-license-reveal .btn{margin:0 auto;font-size:12px}
.nexa-disclaimer{color:#727985;font-size:10px;line-height:1.6;margin:14px 0 0}.nexa-disclaimer a{color:#aebcff;text-decoration:none}
.nexa-delivery-details{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;pointer-events:none;margin-top:19px}
.nexa-delivery-details.is-visible{opacity:1;transform:none;pointer-events:auto}
.nexa-delivery-note{display:flex;gap:13px;align-items:flex-start;border:1px solid #ffffff13;background:#ffffff04;border-radius:13px;padding:17px;margin-bottom:16px}
.nexa-delivery-note-icon{color:var(--mint);font-size:25px}.nexa-delivery-note b{font-size:12px;color:#e3e9f2}.nexa-delivery-note p{font-size:11px;color:#87909c;line-height:1.7;margin:5px 0 0;overflow-wrap:anywhere}.nexa-delivery-note strong{color:#c4d0da}
.nexa-next-links{display:flex;gap:10px;flex-wrap:wrap}.nexa-next-links a{flex:1;justify-content:center;white-space:nowrap;font-size:11px;min-width:140px}
.nexa-success-page-confirm{margin:0 auto 8px}.nexa-success-inline-key{max-width:580px;margin:26px auto 21px}.nexa-success-inline-key .nexa-license-token{max-width:460px}
.success-card .nexa-confirmation+.eyebrow{margin-top:8px}

/* Download: both concentric circles share the SAME SVG viewBox and centre (50,50). */
.nexa-download-scanner{width:112px;height:112px;margin:0 auto 25px;display:grid;place-items:center;position:relative;border-radius:50%;background:radial-gradient(circle,#1b202a,#0b0c10 72%);box-shadow:0 0 38px #6f7dff0c}
.nexa-scanner-ring{width:112px;height:112px;position:absolute;inset:0;overflow:visible;transform:rotate(-90deg)}
.nexa-scanner-track{stroke:#353b48;stroke-width:3.5}
.nexa-scanner-progress{stroke:var(--blue2);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:258;stroke-dashoffset:258;transform-origin:50px 50px;filter:drop-shadow(0 0 5px #8998ff75)}
.nexa-download-scanner.is-loading .nexa-scanner-progress{stroke-dashoffset:193;animation:nexaScanSpin .9s linear infinite}
@keyframes nexaScanSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.nexa-download-scanner.is-done .nexa-scanner-progress{stroke:var(--mint);stroke-dashoffset:0;animation:nexaScannerFinish .65s ease-out both}
@keyframes nexaScannerFinish{from{stroke-dashoffset:258}to{stroke-dashoffset:0}}
.nexa-scanner-center{display:grid;place-items:center;width:64px;height:64px;position:relative;color:#afbbc8}.nexa-scanner-center svg{width:31px;height:31px;position:absolute;transition:opacity .2s,transform .4s}.nexa-scanner-tick{font-size:29px;color:var(--mint);opacity:0;transform:scale(.2);transition:opacity .35s,transform .55s cubic-bezier(.18,.89,.31,1.36)}
.nexa-download-scanner.is-done .nexa-scanner-center svg{opacity:0;transform:scale(.5)}.nexa-download-scanner.is-done .nexa-scanner-tick{opacity:1;transform:scale(1)}
#downloadFiles:not(.hidden){animation:nexaPaneIn .65s both}
#keyForm.is-busy #licenseKey,#keyForm.is-busy button[type=submit]{pointer-events:none;opacity:.65}

/* Device transfer: an illustrative animation; existing Request transfer contact flow is unchanged. */
.nexa-transfer-preview{border:1px solid #ffffff15;background:linear-gradient(150deg,#101219,#080a0f);border-radius:19px;margin:12px 0 26px;padding:25px 25px 21px;overflow:hidden}
.nexa-transfer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.nexa-transfer-head .eyebrow{font-size:9px}.nexa-transfer-head h3{font-size:clamp(21px,2.4vw,29px);letter-spacing:-.04em;margin:10px 0 6px;font-weight:550}.nexa-transfer-head p{font-size:12px;color:#858b95;margin:0;line-height:1.5}
.nexa-transfer-scene{position:relative;display:flex;align-items:center;justify-content:space-around;gap:65px;padding:44px 0 26px;isolation:isolate}
.nexa-machine{position:relative;flex:0 1 200px;text-align:center;z-index:1;transition:opacity .6s,transform .6s}
.nexa-machine-display{height:clamp(65px,9vw,113px);width:100%;max-width:190px;margin:auto;display:grid;place-items:center;border-radius:9px 9px 4px 4px;background:radial-gradient(circle at center,#263558,#111723 65%,#0b1018);border:5px solid #525966;box-shadow:0 12px 32px #0008;position:relative}
.nexa-machine-display img{width:38px;height:38px;opacity:.85}.nexa-machine-base{height:7px;background:linear-gradient(90deg,#45505e,#7c8392,#45505e);width:112%;margin-left:-6%;border-radius:0 0 15px 15px;box-shadow:0 6px 20px #0008}
.nexa-machine strong{display:block;margin-top:19px;font-size:12px;color:#e8edf3}.nexa-machine small{display:block;margin-top:5px;font-size:10px;color:#808794}
.nexa-machine.target .nexa-machine-display{filter:brightness(.58)}.nexa-transfer-line{position:absolute;left:28%;right:28%;top:47%;height:2px;background:#323746;z-index:0;overflow:visible}
.nexa-transfer-line i{display:block;width:0%;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--mint));box-shadow:0 0 18px #7bf2cd89}
.nexa-transfer-scene.is-running .nexa-transfer-line i{animation:nexaTravel 1.5s ease-in-out .15s forwards}
@keyframes nexaTravel{0%{width:0%}75%{width:100%}100%{width:100%}}
.nexa-transfer-scene.is-running .nexa-machine.source{opacity:.34;transform:translateY(3px);transition-delay:1.1s}
.nexa-transfer-scene.is-complete .nexa-machine.source{opacity:.34}
.nexa-transfer-scene.is-complete .nexa-machine.target .nexa-machine-display{filter:none;border-color:#77dabc;box-shadow:0 0 25px #7bf2cd22,0 10px 30px #0008}
.nexa-transfer-scene.is-complete .nexa-transfer-line i{width:100%}
.nexa-transfer-scene.is-complete .nexa-machine.target .nexa-machine-display:after{content:'✓';position:absolute;right:-11px;top:-14px;border-radius:50%;background:#75dfb8;color:#04120a;font-size:16px;font-weight:800;width:26px;height:26px;display:grid;place-items:center;box-shadow:0 0 16px #7bf2cd55;animation:nexaStepCheck .6s both}
.nexa-transfer-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.nexa-transfer-footer .status{margin:0;flex:1;min-width:155px}.nexa-transfer-buttons{display:flex;gap:8px;flex-wrap:wrap}.nexa-transfer-buttons .btn{font-size:11px}.nexa-transfer-buttons button:disabled{opacity:.35;cursor:not-allowed}

/* Customer OTP: original login card + inset trace, six-piece orbit and returning retry. */
.nexa-otp-stage{position:relative;height:168px;display:grid;place-items:center;isolation:isolate;overflow:visible;margin:7px 0 5px}
.nexa-otp-stage .otp-wrap{width:100%;max-width:390px;display:flex;justify-content:center;gap:9px;position:relative;z-index:1;opacity:1;transition:opacity .18s}
.nexa-otp-cell{flex:1 1 0;min-width:0;max-width:60px;height:61px;border-radius:14px;display:grid;place-items:center;position:relative;background:#08090c;isolation:isolate}
.nexa-otp-cell:before{content:'';position:absolute;inset:-2px;border-radius:16px;background:conic-gradient(from 0deg,transparent 0deg,transparent 300deg,var(--blue) 325deg,var(--cyan) 360deg);opacity:0;z-index:-1;pointer-events:none}
.nexa-otp-cell.is-tracing:before{opacity:1;animation:nexaTrace 1.05s linear 2}
@keyframes nexaTrace{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.nexa-otp-cell .otp-input{height:100%;width:100%;font-size:21px;background:#0a0c10;border:1px solid #343840;border-radius:13px;position:relative;z-index:1}
.nexa-otp-cell .otp-input:focus{border-color:var(--blue2);box-shadow:0 0 0 4px #6f7dff16}
.nexa-otp-stage.is-animating .otp-wrap{opacity:0;pointer-events:none}
.nexa-otp-ghost-layer{position:absolute;inset:0;pointer-events:none;z-index:4;transform-origin:50% 50%}
.nexa-otp-ghost{position:absolute;border:1px solid #8795ff93;background:linear-gradient(145deg,#182035,#10131d);border-radius:13px;display:grid;place-items:center;color:#e9eef7;font:700 20px ui-monospace,Menlo,monospace;box-shadow:0 4px 22px #697eff16;will-change:left,top,transform,opacity}
.nexa-otp-core{position:absolute;top:50%;left:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border:1px solid #7bf2cd90;background:radial-gradient(circle,#7bf2cd24,#0d201a);border-radius:17px;box-shadow:0 0 38px #7bf2cd22;display:grid;place-items:center;opacity:0;transform:scale(.35);pointer-events:none;z-index:5;color:var(--mint);transition:opacity .4s,transform .45s cubic-bezier(.18,.89,.3,1.4)}
.nexa-otp-core span{font-size:33px}.nexa-otp-stage.is-correct .nexa-otp-core,.nexa-otp-stage.is-incorrect .nexa-otp-core{opacity:1;transform:scale(1)}
.nexa-otp-stage.is-incorrect .nexa-otp-core{color:#ff9a9a;border-color:#f581818a;background:#29141a;box-shadow:0 0 28px #ff637c13}
.nexa-otp-actions{min-height:44px}.nexa-otp-actions button{width:100%}
#authStatus{min-height:20px}
@media(max-width:810px){.nexa-transfer-scene{gap:25px}.nexa-transfer-preview{padding:20px}.nexa-transfer-head .nexa-live-dot{display:none}}
@media(max-width:600px){.nexa-checkout-steps{margin:0 auto 22px}.nexa-step-badge{width:41px;height:41px;box-shadow:0 0 0 4px #030304}.nexa-step-track{top:24px}.nexa-step-title{font-size:10px}.nexa-step{gap:11px}.nexa-delivery-stage{padding-top:0}.nexa-success-inline-key{padding:20px 13px}.nexa-license-token{font-size:12px;letter-spacing:0}.nexa-transfer-scene{gap:35px;padding:35px 0 24px}.nexa-machine-display{border-width:3px}.nexa-machine-display img{width:25px}.nexa-otp-stage .otp-wrap{gap:6px}.nexa-otp-cell{height:52px}.nexa-otp-cell .otp-input{height:100%;font-size:18px}.nexa-transfer-line{left:28%;right:28%}}
@media(max-width:410px){.nexa-transfer-scene{gap:18px}.nexa-transfer-preview{padding:17px}.nexa-transfer-buttons{width:100%}.nexa-transfer-buttons .btn{flex:1}.nexa-step-title{font-size:9px}}
@media(prefers-reduced-motion:reduce){.nexa-confirmation.is-playing .nexa-confirm-ring,.nexa-confirmation.is-playing .nexa-confirm-tick{stroke-dashoffset:0}.nexa-license-reveal,.nexa-delivery-details{transition:none}.nexa-otp-cell.is-tracing:before{animation:none;opacity:1}.nexa-download-scanner.is-loading .nexa-scanner-progress{animation:none;stroke-dashoffset:65}.nexa-transfer-scene.is-running .nexa-transfer-line i{animation:none;width:100%}}

/* Keep original email-provider delivery help inside step three. */
.nexa-provider-intro{padding:11px 0 6px}.nexa-provider-intro .eyebrow{font-size:9px}.nexa-provider-intro p{color:#87909a;font-size:11px;line-height:1.55;margin:7px 0 13px}
.nexa-delivery-stage #providerBox{margin:0 0 15px;padding:18px;border-radius:15px}
.nexa-delivery-stage .inbox-top{flex-wrap:wrap}.nexa-delivery-stage .inbox-actions{display:flex;flex-wrap:wrap;gap:9px}.nexa-delivery-stage .inbox-actions .btn{flex:1;min-width:150px;font-size:10px;justify-content:center}
.nexa-delivery-stage .success-help{display:grid;grid-template-columns:1fr;gap:9px;margin:0 0 18px}.nexa-delivery-stage .success-help>div{font-size:11px}
.nexa-delivery-stage .nexa-next-links{margin-top:10px}

/* V16: during step 03, the payment confirmation is the entire content.
   The product summary is intentionally only visible on checkout steps 01–02. */
.checkout-grid.is-delivery{grid-template-columns:minmax(0,1fr)}
.checkout-grid.is-delivery>.checkout-main{grid-column:1/-1;width:100%;max-width:920px;justify-self:center}
.checkout-grid.is-delivery>.order-card{display:none!important}

/* V16: six-digit orbit must replace — not overlay — the original input row.
   A taller orbit stage holds the complete rotating circle within the card,
   away from the heading and action button. */
.nexa-otp-stage{height:232px;overflow:hidden}
.nexa-otp-stage.is-animating .otp-wrap{
  opacity:0!important;
  visibility:hidden;
  pointer-events:none;
}
.nexa-otp-stage .otp-wrap{transition:opacity .15s ease}
.nexa-otp-ghost-layer{overflow:visible}
@media(max-width:600px){
  .nexa-otp-stage{height:215px}
  .checkout-grid.is-delivery>.checkout-main{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .nexa-otp-stage .otp-wrap{transition:none}
}