/* ============================================================
   Momentum — Registration wizard + login (shared shell)
   Colour is driven by --reg-* vars set per theme class:
     .reg-purple  → suppliers
     .reg-orange  → resellers
     .reg-neutral → login / generic
   ============================================================ */
.reg-purple{
  --reg-accent:#7C3AED;
  --reg-accent-soft:rgba(124,58,237,.16);
  --reg-grad:linear-gradient(120deg,#8B5CF6 0%,#7C3AED 55%,#6D28D9 100%);
  --reg-scrim:linear-gradient(160deg,rgba(20,10,35,.90),rgba(76,29,149,.80) 55%,rgba(124,58,237,.64));
  --reg-glow:rgba(124,58,237,.45);
}
.reg-orange{
  --reg-accent:#EA6A0C;
  --reg-accent-soft:rgba(234,106,12,.16);
  --reg-grad:linear-gradient(120deg,#F9A94B 0%,#F97316 52%,#EA580C 100%);
  --reg-scrim:linear-gradient(160deg,rgba(34,17,7,.90),rgba(154,52,18,.80) 55%,rgba(249,115,22,.60));
  --reg-glow:rgba(249,115,22,.45);
}
.reg-neutral{
  --reg-accent:#E85D9B;
  --reg-accent-soft:rgba(232,93,155,.16);
  --reg-grad:var(--grad-accent);
  --reg-scrim:linear-gradient(160deg,rgba(14,7,20,.90),rgba(120,40,110,.74) 55%,rgba(139,92,246,.58));
  --reg-glow:rgba(217,69,155,.4);
}

.reg{ padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,96px); }
.reg-shell{
  width:min(1040px,94vw);margin-inline:auto;background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-md);display:grid;grid-template-columns:.85fr 1.15fr;min-height:600px;border:1px solid var(--line);
}

/* ---- Left brand / stepper panel ---- */
.reg-aside{ position:relative;overflow:hidden;background:#140A1E;color:#fff;padding:clamp(28px,3vw,44px); }
.reg-aside .parallax-media{ inset:0; }
.reg-purple .reg-aside-media{ background-image:url("../../pics/image.jpg"); }
.reg-orange .reg-aside-media{ background-image:url("../../pics/dddd.jpg"); }
.reg-neutral .reg-aside-media{ background-image:url("../../pics/d.jpg"); }
.reg-aside-scrim{ position:absolute;inset:0;z-index:1;background:var(--reg-scrim); }
.reg-aside-inner{ position:relative;z-index:2;display:flex;flex-direction:column;height:100%; }
.reg-aside .eyebrow{ color:#fff;opacity:.9; }
.reg-aside h2{ font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.05;letter-spacing:-.02em;margin:.5rem 0 .8rem; }
.reg-aside p{ color:rgba(255,255,255,.82);font-size:.98rem;max-width:34ch; }

/* vertical stepper */
.stepper{ list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:0; }
.stepper li{ display:flex;gap:.9rem;align-items:flex-start;position:relative;padding-bottom:1.6rem; }
.stepper li:last-child{ padding-bottom:0; }
.stepper li::after{ content:"";position:absolute;left:17px;top:36px;bottom:2px;width:2px;background:rgba(255,255,255,.22); }
.stepper li:last-child::after{ display:none; }
.step-dot{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:.9rem;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);color:#fff;transition:.3s;font-family:"JetBrains Mono";
}
.step-txt b{ display:block;font-size:.98rem;font-weight:700; }
.step-txt span{ font-size:.82rem;color:rgba(255,255,255,.72); }
.stepper li.active .step-dot{ background:var(--reg-grad);border-color:transparent;box-shadow:0 8px 20px var(--reg-glow); }
.stepper li.done .step-dot{ background:#1F9254;border-color:transparent; }
.stepper li.done::after{ background:#1F9254; }

/* ---- Right form panel ---- */
.reg-main{ padding:clamp(26px,3vw,46px);display:flex;flex-direction:column; }
.reg-progress{ display:none; }
.reg-head h1{ font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em;margin-bottom:.4rem; }
.reg-head p{ color:var(--ink-soft);margin-bottom:1.6rem;font-size:.98rem; }

/* step panels */
.reg-step{ display:none; animation:regIn .45s cubic-bezier(.2,.8,.3,1); }
.reg-step.active{ display:block; }
@keyframes regIn{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }

/* fields */
.field{ margin-bottom:1.1rem; }
.field > label{ display:block;font-weight:700;font-size:.9rem;margin-bottom:.4rem; }
.field .hint{ font-weight:500;color:var(--ink-soft);font-size:.82rem; }
.field .opt{ color:var(--ink-soft);font-weight:600;font-size:.78rem; }
.inp{
  width:100%;border:1.5px solid var(--line);border-radius:14px;padding:.85rem 1rem;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;transition:border-color .2s,box-shadow .2s;outline:none;
}
.inp:focus{ border-color:var(--reg-accent);box-shadow:0 0 0 4px var(--reg-accent-soft); }
.inp[readonly]{ background:#F6F2EC;color:var(--ink-soft);cursor:not-allowed; }
.inp-group{ display:flex;align-items:stretch; }
.inp-group .prefix{ display:flex;align-items:center;gap:.4rem;padding:0 .9rem;border:1.5px solid var(--line);border-right:0;border-radius:14px 0 0 14px;background:#F6F2EC;font-weight:700;color:var(--ink-soft); }
.inp-group .inp{ border-radius:0 14px 14px 0; }
.pw-wrap{ position:relative; }
.pw-wrap .inp{ padding-right:3rem; }
.pw-toggle{ position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-soft);font-size:1.1rem;cursor:pointer;padding:.3rem; }
.field.invalid .inp,.field.invalid .inp-group .inp,.field.invalid .inp-group .prefix{ border-color:var(--err); }
.field-err{ color:var(--err);font-size:.82rem;font-weight:600;margin-top:.35rem;display:none; }
.field.invalid .field-err{ display:block; }
.row-2{ display:grid;grid-template-columns:1fr 1fr;gap:1rem; }

/* OTP */
.otp{ display:flex;gap:.6rem;margin-bottom:.4rem; }
.otp input{
  width:56px;height:64px;text-align:center;font-size:1.6rem;font-weight:700;font-family:"JetBrains Mono";
  border:1.5px solid var(--line);border-radius:14px;outline:none;transition:.2s;background:#fff;color:var(--ink);
}
.otp input:focus{ border-color:var(--reg-accent);box-shadow:0 0 0 4px var(--reg-accent-soft); }
.otp.invalid input{ border-color:var(--err); }
.otp-meta{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;margin:.6rem 0 1.2rem; }
.otp-meta .muted{ color:var(--ink-soft);font-size:.9rem; }
.linkbtn{ background:none;border:none;color:var(--reg-accent);font-weight:700;cursor:pointer;padding:0;font-size:.92rem; }
.linkbtn:disabled{ color:var(--ink-soft);cursor:not-allowed; }
.testnote{ background:#FFF6E9;border:1px dashed var(--amber);border-radius:12px;padding:.6rem .9rem;font-size:.82rem;color:#8a5a12;margin-bottom:1.2rem; }

/* uploaders */
.uploader{
  border:1.5px dashed var(--line);border-radius:16px;padding:1rem;display:flex;align-items:center;gap:1rem;cursor:pointer;
  transition:border-color .2s,background .2s;background:#FCFAF7;
}
.uploader:hover{ border-color:var(--reg-accent);background:#faf7ff; }
.uploader .u-ic{ width:52px;height:52px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:1.3rem;color:#fff;background:var(--reg-grad); }
.uploader .u-txt b{ display:block;font-size:.92rem; }
.uploader .u-txt span{ font-size:.8rem;color:var(--ink-soft); }
.uploader .u-thumb{ width:52px;height:52px;border-radius:12px;object-fit:cover;flex:none;display:none; }
.uploader.has-file .u-ic{ display:none; }
.uploader.has-file .u-thumb{ display:block; }
.uploader input[type=file]{ display:none; }
.field.invalid .uploader{ border-color:var(--err); }

/* consent */
.consent{ display:flex;gap:.7rem;align-items:flex-start;background:#FCFAF7;border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;margin-bottom:.4rem; }
.consent input{ width:20px;height:20px;margin-top:2px;accent-color:var(--reg-accent);flex:none; }
.consent label{ font-size:.92rem;color:var(--ink);line-height:1.5; }
.consent a{ color:var(--reg-accent);font-weight:700; }

/* nav buttons */
.reg-actions{ display:flex;gap:.8rem;margin-top:1.6rem;align-items:center; }
.reg-actions .spacer{ flex:1; }
.btn-back{ background:none;border:none;color:var(--ink-soft);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem; }
.btn-back:hover{ color:var(--ink); }
.btn-reg{ background:var(--reg-grad);border-color:transparent;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.22); }
.btn-reg:hover{ color:#fff;box-shadow:0 20px 40px rgba(0,0,0,.30); }
.btn-spin{ display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite; }
.is-loading .btn-spin{ display:inline-block; }
.is-loading .btn-label{ opacity:.75; }
@keyframes sp{ to{ transform:rotate(360deg); } }

/* success */
.reg-done{ text-align:center;padding:1rem 0; }
.done-badge{ width:96px;height:96px;border-radius:50%;margin:0 auto 1.4rem;display:grid;place-items:center;font-size:2.6rem;color:#fff;background:linear-gradient(135deg,#1F9254,#12b76a);box-shadow:0 18px 40px rgba(18,183,106,.4);animation:pop .5s cubic-bezier(.2,.9,.3,1); }
@keyframes pop{ 0%{transform:scale(.6);opacity:0;} 100%{transform:scale(1);opacity:1;} }
.reg-done h2{ font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.6rem; }
.reg-done p{ color:var(--ink-soft);max-width:44ch;margin:0 auto 1rem; }
.reg-ref{ display:inline-block;font-family:"JetBrains Mono";font-weight:700;background:#F3E9DD;border:1px solid var(--line);border-radius:100px;padding:.5rem 1.1rem;margin-bottom:1.6rem; }
.reg-timeline{ display:flex;justify-content:center;gap:0;max-width:460px;margin:1.6rem auto 0;text-align:left; }
.reg-timeline .tl{ flex:1;position:relative;padding:0 .4rem; }
.reg-timeline .tl i{ width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);margin-bottom:.5rem; }
.reg-timeline .tl.on i{ background:var(--reg-grad);border-color:transparent;color:#fff; }
.reg-timeline .tl b{ font-size:.82rem;display:block; }
.reg-timeline .tl span{ font-size:.74rem;color:var(--ink-soft); }

/* ---- Login extras ---- */
.login-row{ display:flex;justify-content:space-between;align-items:center;margin:-.2rem 0 1.2rem;flex-wrap:wrap;gap:.5rem; }
.login-row label{ display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:600;color:var(--ink-soft);cursor:pointer; }
.login-row input{ width:18px;height:18px;accent-color:var(--reg-accent); }
.login-sep{ display:flex;align-items:center;gap:1rem;color:var(--ink-soft);font-size:.85rem;margin:1.6rem 0 1.1rem; }
.login-sep::before,.login-sep::after{ content:"";flex:1;height:1px;background:var(--line); }
.login-alt{ display:grid;grid-template-columns:1fr 1fr;gap:.8rem; }
.login-alt a{ text-decoration:none;border:1.5px solid var(--line);border-radius:14px;padding:.8rem 1rem;display:flex;align-items:center;gap:.7rem;color:var(--ink);font-weight:700;font-size:.92rem;transition:.2s;background:#fff; }
.login-alt a:hover{ border-color:var(--reg-accent);transform:translateY(-2px);box-shadow:var(--shadow-sm); }
.login-alt .ic{ width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none; }
.login-alt .ic.sup{ background:linear-gradient(120deg,#8B5CF6,#6D28D9); }
.login-alt .ic.res{ background:linear-gradient(120deg,#F9A94B,#EA580C); }

/* ---- Role chooser ---- */
.choose{ padding:clamp(40px,7vw,90px) 0; }
.choose-head{ text-align:center;max-width:640px;margin:0 auto clamp(28px,4vw,48px); }
.choose-head h1{ font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(2rem,4.5vw,3rem);letter-spacing:-.02em;margin:.4rem 0 .8rem; }
.choose-head p{ color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.14rem); }
.choose-grid{ display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;width:min(880px,92vw);margin:0 auto; }
.choose-card{ position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(28px,3vw,40px);color:#fff;text-decoration:none;box-shadow:var(--shadow-md);transition:transform .3s,box-shadow .3s;min-height:280px;display:flex;flex-direction:column; }
.choose-card:hover{ transform:translateY(-6px);box-shadow:var(--shadow-lg);color:#fff; }
.choose-card.sup{ background:linear-gradient(150deg,#8B5CF6,#6D28D9); }
.choose-card.res{ background:linear-gradient(150deg,#F9A94B,#EA580C); }
.choose-card .cc-ic{ width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.7rem;margin-bottom:1.2rem; }
.choose-card h2{ font-family:"Bricolage Grotesque";font-weight:800;font-size:1.7rem;margin-bottom:.5rem; }
.choose-card p{ color:rgba(255,255,255,.9);margin-bottom:1.4rem; }
.choose-card .cc-go{ margin-top:auto;font-weight:700;display:inline-flex;align-items:center;gap:.5rem; }
.choose-foot{ text-align:center;margin-top:2rem;color:var(--ink-soft); }
.choose-foot a{ color:var(--reg-accent);font-weight:700;text-decoration:none; }

/* ---- Responsive ---- */
@media (max-width:820px){
  .reg-shell{ grid-template-columns:1fr; }
  .reg-aside{ display:none; }
  .reg-progress{ display:flex;gap:.5rem;margin-bottom:1.4rem; }
  .reg-progress .pbar{ flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden; }
  .reg-progress .pbar.on{ background:var(--reg-grad); }
  .choose-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .row-2,.login-alt{ grid-template-columns:1fr; }
  .otp input{ width:100%;height:58px;font-size:1.3rem; }
}