/* =====================================================================
   NexEuro · "Comment ça marche" — INTERACTIVE STEP DEMO
   ---------------------------------------------------------------------
   A self-contained interactive player: a sticky phone mockup on the right
   plays an animated screen for the currently-selected step, while the
   steps list on the left lets the user click through (or it auto-advances).
   Pairs with nexeuro-how.js. Degrades gracefully without JS and under
   prefers-reduced-motion (shows all steps, no auto-play).
   ===================================================================== */

.nx-how {
  --nx-navy: #0B2545;
  --nx-blue: #1769C4;
  --nx-blue-2: #4A9EFF;
  --nx-green: #00B87A;
  --nx-gold: #C9A24B;
  --nx-ink: #0B1F35;
  --nx-mut: #4A5C72;
  --nx-line: #E1E8F2;
  --nx-soft: #F5F7FB;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 5%;
}

.nx-how-head { max-width: 720px; margin: 0 0 clamp(34px, 5vw, 56px); }
.nx-how-head .htag { color: var(--nx-blue); }
.nx-how-head h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 900;
  letter-spacing: -1.8px;
  line-height: 1.04;
  color: var(--nx-ink);
  margin: 12px 0 14px;
}
.nx-how-head p { color: var(--nx-mut); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.65; }

/* ---- Layout: steps list + sticky phone ---------------------------- */
.nx-how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* ---- Steps list (left) -------------------------------------------- */
.nx-steps { display: flex; flex-direction: column; gap: 14px; }
.nx-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 22px 22px 22px 20px;
  border-radius: 18px;
  border: 1px solid var(--nx-line);
  background: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: border-color .35s, box-shadow .35s, transform .35s, background .35s;
}
.nx-step:hover { border-color: #C4D6EE; transform: translateY(-2px); }
.nx-step.is-active {
  border-color: transparent;
  background: linear-gradient(180deg, #fff, #FAFCFF);
  box-shadow: 0 22px 50px -28px rgba(11,37,69,.45), 0 0 0 1.5px var(--nx-blue) inset;
}
.nx-step-n {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--nx-soft);
  color: var(--nx-blue);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900; font-size: 18px;
  transition: background .35s, color .35s;
}
.nx-step.is-active .nx-step-n { background: var(--nx-blue); color: #fff; }
.nx-step-t {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 800; letter-spacing: -.4px;
  color: var(--nx-ink);
  margin-bottom: 6px;
}
.nx-step-p { color: var(--nx-mut); font-size: 14.5px; line-height: 1.6; }
.nx-step-meta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  font-size: 12px; font-weight: 800;
  color: var(--nx-green);
  background: #E6FBF4;
  padding: 5px 11px; border-radius: 999px;
}
.nx-step-meta.blue { color: var(--nx-blue); background: #EBF4FF; }
.nx-step-meta.gold { color: #A87419; background: #FFF4D6; }

/* progress bar inside the active step */
.nx-step-prog {
  position: absolute; left: 0; right: auto; bottom: 0; height: 3px; width: 0;
  max-width: 100%;
  background: linear-gradient(90deg, var(--nx-blue), var(--nx-blue-2));
  border-radius: 0 0 18px 18px;
  transition: width .2s linear;
  pointer-events: none;
}
.nx-step:not(.is-active) .nx-step-prog { width: 0 !important; }

/* ---- Sticky phone (right) ----------------------------------------- */
.nx-phone-col { position: sticky; top: 96px; }
.nx-phone-stage {
  position: relative;
  border-radius: 36px;
  background:
    radial-gradient(120% 90% at 50% 0%, #173a66 0%, #0B2545 55%, #081a33 100%);
  padding: clamp(26px, 4vw, 44px) 0 clamp(30px, 4vw, 48px);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(11,37,69,.6);
}
.nx-phone-stage::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000, transparent 75%);
          mask-image: radial-gradient(120% 80% at 50% 30%, #000, transparent 75%);
}
.nx-phone {
  position: relative; z-index: 2;
  width: 264px;
  background: #060e1a;
  border-radius: 42px;
  padding: 9px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.nx-phone-notch {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 22px; background: #060e1a; border-radius: 100px; z-index: 5;
}
.nx-screen {
  position: relative;
  border-radius: 34px; overflow: hidden;
  background: #fff;
  height: 520px;
}

/* shared screen chrome */
.nx-sc-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px 18px 10px;
  font-size: 11px; font-weight: 700; color: var(--nx-ink);
}
.nx-sc-body { padding: 6px 18px 18px; height: calc(100% - 52px); position: relative; }

/* === screen panels: only the active one is shown === */
.nx-panel { position: absolute; inset: 0; padding: 8px 18px 18px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.nx-panel.is-on { opacity: 1; pointer-events: auto; }

/* generic helpers used inside panels */
.nx-lbl { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: #93a1b3; font-weight: 800; }
.nx-h3 { font-family:'Bricolage Grotesque',sans-serif; font-weight: 900; color: var(--nx-ink); }

/* Step 1 — phone number entry */
.nx-num-field {
  margin-top: 14px; display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--nx-blue); border-radius: 14px; padding: 14px 14px;
  font-size: 17px; font-weight: 800; color: var(--nx-ink);
  font-variant-numeric: tabular-nums;
}
.nx-num-flag { font-size: 20px; }
.nx-caret { display:inline-block; width: 2px; height: 20px; background: var(--nx-blue); animation: nxBlink 1s steps(1) infinite; }
@keyframes nxBlink { 50% { opacity: 0; } }
.nx-otp { display:flex; gap:8px; margin-top:16px; }
.nx-otp span { flex:1; height: 46px; border-radius: 11px; background: var(--nx-soft); display:grid; place-items:center; font-weight:900; font-size:20px; color:var(--nx-ink); border:1.5px solid var(--nx-line); }
.nx-ok-banner {
  margin-top: 16px; display:flex; align-items:center; gap:8px;
  background: #E6FBF4; color: #009766; border-radius: 12px; padding: 12px 14px;
  font-weight: 800; font-size: 13px;
}

/* Step 2 — link bank */
.nx-bank { display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:13px; border:1.5px solid var(--nx-line); margin-top:10px; background:#fff; }
.nx-bank.is-sel { border-color: var(--nx-blue); background: #EBF4FF; }
.nx-bank-ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:12px; flex-shrink:0; }
.nx-bank-n { font-weight:800; color: var(--nx-ink); font-size: 14px; }
.nx-bank-tag { margin-left:auto; font-size:12px; font-weight:800; color:var(--nx-blue); }
.nx-secure { margin-top:14px; display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--nx-mut); font-weight:700; }

/* Step 3 — pay */
.nx-pay-center { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; gap:12px; }
.nx-pay-amount { font-family:'Bricolage Grotesque',sans-serif; font-size:40px; font-weight:900; color:var(--nx-ink); letter-spacing:-1.5px; }
.nx-pay-to { font-size:13px; color:var(--nx-mut); font-weight:700; }
.nx-pay-check {
  width:88px; height:88px; border-radius:50%;
  background: radial-gradient(circle at 50% 40%, #E6FBF4, #C8F4E4);
  display:grid; place-items:center;
  box-shadow: 0 0 0 8px rgba(0,184,122,.12);
  animation: nxPop .5s cubic-bezier(.2,.9,.3,1.4) both;
}
.nx-pay-check svg { width:42px; height:42px; }
@keyframes nxPop { 0%{transform:scale(.4);opacity:0} 100%{transform:scale(1);opacity:1} }
.nx-pay-note { background: rgba(0,184,122,.12); border:1px solid rgba(0,184,122,.3); color:#009766; border-radius:12px; padding:10px 14px; font-size:12.5px; font-weight:800; }

/* dark mode */
@media (prefers-color-scheme: dark) {
  .nx-how-head h2, .nx-step-t { color: #e6edf3; }
  .nx-how-head p, .nx-step-p { color: #9aa4b2; }
  .nx-step { background: #0d1117; border-color: #21262d; }
  .nx-step.is-active { background: #11161d; box-shadow: 0 22px 50px -28px rgba(0,0,0,.6), 0 0 0 1.5px var(--nx-blue-2) inset; }
  .nx-step-n { background: #161b22; color: var(--nx-blue-2); }
  .nx-step.is-active .nx-step-n { background: var(--nx-blue); color:#fff; }
}

/* responsive */
@media (max-width: 920px) {
  .nx-how-grid { grid-template-columns: 1fr; }
  .nx-phone-col { position: relative; top: 0; order: -1; margin-bottom: 8px; }
  .nx-phone-stage { max-width: 420px; margin: 0 auto; }
}

/* reduced motion: reveal all, no animation */
@media (prefers-reduced-motion: reduce) {
  .nx-caret, .nx-pay-check { animation: none; }
  .nx-step-prog { transition: none; }
}