/* nx-supplier-portal.css — full-page registration shell.
   Layered on top of styles.css; it borrows the palette and type scale rather
   than restating them, so the portal reads as part of Netrecx and not as a
   bolted-on form. */
.sp-wrap{max-width:1180px;margin:0 auto;padding:0 20px 80px}
.sp-head{padding:26px 0 18px;border-bottom:1px solid var(--line)}
.sp-head h1{font-size:1.55rem;margin:6px 0 4px}
.sp-head p{color:var(--slate);margin:0;max-width:62ch}
.sp-progress{height:4px;background:var(--line);border-radius:99px;margin:16px 0 6px;overflow:hidden}
.sp-progress span{display:block;height:100%;background:var(--blue);transition:width .25s ease}
.sp-progress-label{font-size:.74rem;color:var(--slate);font-weight:600}
/* Scoped: styles.css also defines .sp-grid (the supplier profile form, two equal
   columns) and loads after this file, so an unscoped rule here lost — the step
   rail took half the page and the taxonomy picker was squeezed into the other half. */
.sp-wrap .sp-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;margin:26px 0 0;align-items:start}
.sp-rail{position:sticky;top:20px;list-style:none;margin:0;padding:0;font-size:.82rem}
.sp-rail li{padding:8px 10px;border-radius:8px;color:var(--slate);cursor:default;display:flex;gap:9px;align-items:center}
.sp-rail li .n{width:21px;height:21px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:.68rem;font-weight:700;flex:none}
.sp-rail li.is-done{color:var(--ink);cursor:pointer}
.sp-rail li.is-done .n{background:var(--green,#0B804B);border-color:transparent;color:#fff}
.sp-rail li.is-current{background:var(--blue-wash,#EEF3FF);color:var(--ink);font-weight:700}
.sp-rail li.is-current .n{background:var(--blue);border-color:transparent;color:#fff}
.sp-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px}
.sp-step h2{font-size:1.12rem;margin:0 0 4px}
.sp-step .sp-sub{color:var(--slate);font-size:.86rem;margin:0 0 20px;max-width:60ch}
.sp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.sp-fields .span2{grid-column:1/-1}
.sp-fields label{display:block;font-size:.76rem;font-weight:600;margin-bottom:5px}
.sp-fields input:not([type]),.sp-fields input[type=text],.sp-fields input[type=number],.sp-fields input[type=email],.sp-fields input[type=tel],
.sp-fields input[type=url],.sp-fields select,.sp-fields textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:.9rem;font-family:inherit}
.sp-fields textarea{min-height:84px;resize:vertical}
.sp-fields .hint{display:block;font-size:.72rem;color:var(--slate);margin-top:4px}
.is-invalid{border-color:#D9534F !important;background:#FFF7F6}
.sp-checks{display:flex;flex-wrap:wrap;gap:8px}
.sp-checks label{display:inline-flex;gap:6px;align-items:center;font-weight:500;font-size:.84rem;
  border:1px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer}
.sp-err{background:#FDECEA;border:1px solid #F2B2A8;color:#8A1C0A;padding:9px 12px;border-radius:8px;font-size:.82rem;margin-bottom:14px}
.sp-note{background:#FFF8EE;border:1px solid #E8C99A;color:#8A4B00;padding:10px 13px;border-radius:9px;font-size:.82rem}
.sp-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.sp-actions .grow{flex:1}
.sp-saved{font-size:.74rem;color:var(--green,#0B804B);font-weight:600}
/* taxonomy selector */
.sp-tax-search{margin-bottom:16px}
.sp-tax-search input{width:100%;max-width:460px;padding:10px 13px;border:1px solid var(--line);border-radius:9px;font-size:.9rem}
#spSearchResults{margin-top:8px;display:grid;gap:5px;max-height:230px;overflow:auto}
.sp-hit{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;cursor:pointer;font-family:inherit}
.sp-hit b{display:block;font-size:.86rem}
.sp-hit span{display:block;font-size:.7rem;color:var(--slate);margin-top:2px}
.sp-hit em{font-size:.68rem;color:#8A4B00;font-style:normal}
.sp-hit.is-shallow{opacity:.55;cursor:not-allowed}
.sp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.sp-cols.optional{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
.sp-cols.optional .sp-col{height:auto;min-height:90px;max-height:340px}
.sp-level{min-width:0}
.sp-level h5{display:flex;align-items:center;gap:7px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);margin:0 0 7px}
.sp-level h5 .st{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--blue);color:#fff;font-size:.66rem;letter-spacing:0}
.sp-level .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--slate)}
.sp-col{border:1px solid var(--line);border-radius:10px;height:340px;overflow-y:auto;background:#fff;box-shadow:inset 0 -8px 8px -8px rgba(12,22,38,.08)}
.sp-node{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #EEF1F6;
  padding:10px 12px;cursor:pointer;font-family:inherit;font-size:.86rem;line-height:1.35;color:var(--ink)}
.sp-node-l{flex:1;min-width:0}
.sp-node::after{content:"\203A";font-size:1.1rem;color:#9AA5B8;flex:none}
.sp-node.is-leafish::after{content:""}
.sp-node:hover{background:#F3F6FC}
.sp-node.is-picked{background:var(--blue);color:#fff}
.sp-node.is-picked::after{color:#fff}
.sp-node-t{display:inline-block;font-size:.6rem;opacity:.7;margin-left:6px;letter-spacing:.04em;text-transform:uppercase}
.sp-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 10px;padding:11px 13px;border:1px solid #C9DAF8;background:#F4F8FF;border-radius:10px;font-size:.84rem}
.sp-path .lbl{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-right:4px}
.sp-path .crumb{background:#fff;border:1px solid #C9DAF8;border-radius:99px;padding:3px 10px}
.sp-path .crumb:last-child{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.sp-path .sep{color:#9AA5B8}
.sp-path .hint{flex-basis:100%;font-size:.76rem;color:#8A4B00;margin-top:2px}
.sp-path .ok{flex-basis:100%;font-size:.76rem;color:#0B804B;margin-top:2px}
.sp-col-loading,.sp-col-empty{padding:12px;font-size:.78rem;color:var(--slate)}
.sp-selected{display:none}
.sp-caps{margin-top:20px;border:1px solid var(--line);border-radius:11px;padding:14px 16px;background:#FAFBFD}
.sp-caps h4{margin:0 0 10px;font-size:.86rem}
.sp-cap{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:.86rem}
.sp-cap:first-of-type{border-top:0}
.sp-cap-code{font-family:var(--mono,monospace);font-size:.76rem;color:var(--slate);min-width:86px}
.sp-cap-label{flex:1}
.sp-cap-lvl{font-size:.68rem;color:var(--slate);border:1px solid var(--line-2);border-radius:99px;padding:2px 8px}
.sp-cap-x{background:none;border:0;color:#8A1C0A;font-size:.74rem;cursor:pointer;font-family:inherit}
.sp-empty{color:var(--slate);font-size:.82rem;margin:6px 0}
/* review */
.sp-rev-block{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.sp-rev-block h4{margin:0 0 10px;font-size:.88rem;display:flex;justify-content:space-between;align-items:center}
.sp-rev-edit{background:none;border:0;color:var(--blue);font-size:.74rem;cursor:pointer;font-family:inherit}
.sp-rev-row{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:.82rem;border-top:1px dashed var(--line)}
.sp-rev-row span{color:var(--slate)}
.sp-rev-row b{text-align:right;max-width:60%}
@media (max-width:1100px){
  .sp-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .sp-wrap .sp-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .sp-rail{position:static;display:flex;gap:6px;overflow:auto;padding-bottom:8px}
  .sp-rail li{flex:none;white-space:nowrap}
  .sp-rail li span:not(.n){display:none}
  .sp-fields{grid-template-columns:1fr}
  .sp-cols,.sp-cols.optional{grid-template-columns:1fr}
  .sp-col{height:auto;max-height:260px}
}
/* ANY LEVEL (pass 111): every row carries its own "+ Add"; added rows and the
   rows they cover are marked, so a supplier can see at a glance what is in. */
.sp-plus{flex:none;font-size:.7rem;font-weight:700;line-height:1;color:var(--blue);border:1px solid #BFD3F6;background:#fff;border-radius:99px;padding:5px 9px;white-space:nowrap;cursor:pointer}
.sp-plus:hover,.sp-plus:focus{background:var(--blue);color:#fff;border-color:var(--blue);outline:none}
.sp-node.is-picked .sp-plus{border-color:#fff}
.sp-node.is-picked .sp-plus:hover{background:#fff;color:var(--blue)}
.sp-node.is-added,.sp-node.is-covered{box-shadow:inset 3px 0 0 #0E9F6E}
.sp-node.is-covered{box-shadow:inset 3px 0 0 #9ED9BC}
.sp-node.is-added .sp-plus,.sp-node.is-covered .sp-plus{color:#0B804B;border-color:#A6E0C3;background:#ECFDF3;cursor:default}
.sp-node.is-picked.is-added .sp-plus,.sp-node.is-picked.is-covered .sp-plus{color:#0B804B}
.sp-cap-all{display:block;font-size:.7rem;font-weight:400;color:#0B804B;margin-top:1px}
.sp-capnote{margin:10px 0 0;padding:8px 12px;border-radius:8px;background:#ECFDF3;border:1px solid #A6E0C3;color:#0B5C36;font-size:.8rem}
@media(max-width:560px){.sp-plus{padding:5px 7px}}

#spAddCap:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
/* Remove / Exclude (pass 113/114): an Added pill turns into "✕ Remove", a Covered one into "✕ Exclude", on hover */
.sp-plus .off{display:none}
.sp-plus[data-state=added],.sp-plus[data-state=covered]{cursor:pointer}
.sp-plus[data-state=added]:hover,.sp-plus[data-state=covered]:hover,.sp-plus[data-state=added]:focus,.sp-plus[data-state=covered]:focus{background:#FEF3F2!important;border-color:#F4B4AE!important;color:#B42318!important}
.sp-plus[data-state=added]:hover .on,.sp-plus[data-state=covered]:hover .on,.sp-plus[data-state=added]:focus .on,.sp-plus[data-state=covered]:focus .on{display:none}
.sp-plus[data-state=added]:hover .off,.sp-plus[data-state=covered]:hover .off,.sp-plus[data-state=added]:focus .off,.sp-plus[data-state=covered]:focus .off{display:inline}
#spAddCap[data-mode=remove]{background:#fff;color:#B42318;border:1px solid #F4B4AE;box-shadow:none}
@media(hover:none){.sp-plus[data-state=added] .on::after,.sp-plus[data-state=covered] .on::after{content:" \2715";opacity:.6}}
/* Tax & address step (pass 114) */
.sp-gst-row{display:flex;gap:8px;align-items:stretch}
.sp-gst-row input{flex:1;min-width:0}
.sp-gst-row .btn{white-space:nowrap;padding:8px 12px;font-size:.82rem}
.sp-gst-ok{color:#0B804B!important}.sp-gst-bad{color:#B42318!important}.sp-gst-busy{color:var(--slate)!important}
.sp-subhead{margin:14px 0 -4px;font-size:.9rem;color:var(--ink);border-top:1px solid var(--line);padding-top:14px}
.sp-fields select,.sp-fields textarea{width:100%;box-sizing:border-box}
.sp-fields input{box-sizing:border-box}
.sp-in[hidden],.sp-intl[hidden],.sp-fields [hidden]{display:none!important}
/* Documents by country (pass 115) */
.sp-docs{display:flex;flex-direction:column;gap:10px}
.sp-doc{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-left:4px solid #C9D2E0;border-radius:10px;padding:11px 14px;background:#fff}
.sp-doc.is-req{border-left-color:var(--blue)}
.sp-doc-l{flex:1;min-width:220px}
.sp-doc-l b{display:block;font-size:.88rem;font-weight:600;color:var(--ink)}
.sp-doc-t{font-size:.72rem;color:var(--slate)}
.sp-doc.is-req .sp-doc-t{color:var(--blue);font-weight:600}
.sp-doc-f input[type=file]{font-size:.8rem;max-width:100%}
.sp-country select{max-width:420px}

/* ═══ Colour pass (pass 116): a banner header, a gradient progress bar, a
   coloured timeline rail, and a form card in the colour of its step. ═══ */
.sp-head{position:relative;margin-top:18px;padding:24px 26px 20px;border:1px solid #DCE4F2;border-radius:18px;overflow:hidden;
  background:radial-gradient(900px 220px at 100% 0%,rgba(147,51,234,.10),transparent 60%),
             radial-gradient(700px 240px at 0% 100%,rgba(8,145,178,.10),transparent 60%),
             linear-gradient(135deg,#F5F8FF 0%,#FFFFFF 55%,#F7F3FF 100%)}
.sp-head::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#2563EB,#7C3AED,#DB2777,#EA580C,#16A34A)}
.sp-head .eyebrow{display:inline-flex;align-items:center;gap:6px;background:#EEF2FF;color:#3730A3;border:1px solid #C7D2FE;border-radius:99px;padding:3px 11px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sp-head h1{font-size:1.75rem;margin:10px 0 6px;background:linear-gradient(90deg,#0C1626 0%,#1E3A8A 60%,#6D28D9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-perks{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.sp-perks span{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #E3E8F2;border-radius:99px;padding:5px 12px 5px 5px;font-size:.78rem;color:#344054;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.sp-perks i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;font-size:.72rem}
.sp-progress{height:10px;background:#E6EBF3;border-radius:99px;margin:18px 0 8px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(16,24,40,.08)}
.sp-progress span{position:relative;display:block;height:100%;border-radius:99px;transition:width .4s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(90deg,#2563EB 0%,#7C3AED 30%,#DB2777 55%,#EA580C 78%,#16A34A 100%);background-size:1100px 100%}
.sp-progress span::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 60%)}
.sp-progress-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;color:#475467;font-weight:600}
.sp-progress-label .pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 11px;color:#fff;font-weight:700;background:var(--sc,#2563EB)}
.sp-progress-label .pct{margin-left:auto;font-weight:800;color:#0C1626}

.sp-railbox{position:sticky;top:20px;background:#fff;border:1px solid #E3E8F2;border-radius:16px;padding:12px 10px 10px;box-shadow:0 4px 18px rgba(16,24,40,.06)}
.sp-railhead{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 10px;margin-bottom:6px;border-bottom:1px dashed #E3E8F2;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#667085}
.sp-railhead b{font-size:.85rem;letter-spacing:0;color:#0C1626;background:linear-gradient(90deg,#2563EB,#16A34A);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-rail{position:static;font-size:.84rem}
.sp-rail li{position:relative;gap:11px;padding:7px 8px;margin:1px 0;border-radius:10px;border-left:3px solid transparent;transition:background .2s ease}
.sp-rail li:not(:last-child)::after{content:"";position:absolute;left:25px;top:40px;bottom:-9px;width:2px;background:#E6EBF3;border-radius:2px}
.sp-rail li.is-done:not(:last-child)::after{background:linear-gradient(var(--c),#E6EBF3)}
.sp-rail li .n{position:relative;z-index:1;width:32px;height:32px;border:0;border-radius:10px;
  background:#F2F4F7;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);transition:transform .2s ease}
.sp-rail li .n svg{display:block}
.sp-rail li .n .ck{display:none;font-style:normal;font-size:.9rem;font-weight:900}
.sp-rail li .t{display:flex;flex-direction:column;line-height:1.25;color:#667085}
.sp-rail li .t small{font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#98A2B3}
.sp-rail li.is-done .n{background:var(--c);color:#fff}
.sp-rail li.is-done .n svg{display:none}
.sp-rail li.is-done .n .ck{display:block}
.sp-rail li.is-done .t{color:#0C1626}
.sp-rail li.is-done:hover{background:#F8FAFC}
.sp-rail li.is-current{background:#EEF3FF;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 13%,#fff),#fff 85%);border-left-color:var(--c)}
.sp-rail li.is-current .n{background:var(--c);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent);transform:scale(1.04)}
.sp-rail li.is-current .t{color:#0C1626;font-weight:700}
.sp-rail li.is-current .t small{color:var(--c)}

.sp-step{border-top:4px solid var(--sc,#2563EB);box-shadow:0 6px 24px rgba(16,24,40,.06);border-radius:16px}
.sp-step h2{display:flex;align-items:center;gap:11px;font-size:1.2rem}
.sp-step h2 .ico{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;color:#fff;
  background:var(--sc,#2563EB);background:linear-gradient(135deg,var(--sc,#2563EB),color-mix(in srgb,var(--sc,#2563EB) 65%,#000));box-shadow:0 4px 12px color-mix(in srgb,var(--sc,#2563EB) 35%,transparent)}
.sp-step .sp-sub{margin-left:47px}
.sp-fields input:focus,.sp-fields select:focus,.sp-fields textarea:focus{outline:none;border-color:var(--sc,#2563EB);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc,#2563EB) 18%,transparent)}
.sp-fields label{color:#344054}
#spNext,#spSubmit{background:linear-gradient(135deg,var(--sc,#2563EB),color-mix(in srgb,var(--sc,#2563EB) 70%,#000));border-color:transparent;color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--sc,#2563EB) 30%,transparent)}
@media(max-width:860px){
  .sp-head{padding:18px 16px 16px}
  .sp-head h1{font-size:1.4rem}
  .sp-railbox{position:static;padding:8px}
  .sp-railhead{display:none}
  .sp-rail{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .sp-rail li{flex:none;border-left:0;padding:4px}
  .sp-rail li::after{display:none}
  .sp-rail li .t{display:none}
  .sp-rail li.is-current .t{display:flex;padding-right:6px}
  .sp-step .sp-sub{margin-left:0}
}
.sp-actions [hidden],.sp-wrap .btn[hidden]{display:none!important}
.sp-fields select{background-color:#fff}
/* OEM authorisation letters (pass 117) */
.sp-maf{margin-top:6px;border:1px solid #F3D1E4;border-left:4px solid #DB2777;border-radius:12px;padding:12px 14px;background:linear-gradient(90deg,#FFF5FA,#fff 70%)}
.sp-maf-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:10px}
.sp-maf-h b{font-size:.9rem;color:#0C1626}.sp-maf-h span{font-size:.76rem;color:#667085}
.sp-maf-rows{display:flex;flex-direction:column;gap:8px}
.sp-maf-row{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr) auto;gap:10px;align-items:center;background:#fff;border:1px solid #F0E2EA;border-radius:9px;padding:8px 10px}
.sp-maf-row input[type=text]{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.86rem}
.sp-maf-row input[type=file]{font-size:.8rem;max-width:100%}
.sp-maf-tag{font-size:.68rem;font-weight:800;color:#DB2777;background:#FDEAF3;border-radius:99px;padding:3px 9px;white-space:nowrap}
.sp-maf-x{border:1px solid #F4B4AE;background:#fff;color:#B42318;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:1rem;line-height:1}
.sp-maf-add{margin-top:10px;border:1px dashed #DB2777!important;color:#BE185D!important;background:#fff!important;font-size:.84rem;padding:8px 14px}
@media(max-width:620px){.sp-maf-row{grid-template-columns:1fr auto}.sp-maf-row input[type=file]{grid-column:1/-1}}