/* =====================================================================
   Register wizard, matching design/register.html as rendered.

   That file is a React bundle, so the markup is rebuilt in Alpine
   (UI_HANDOFF.md §0) — but the layout follows the reference: a hero
   band, a HORIZONTAL step bar, one wide card per step, and a
   collapsible "Listing preview" tab pinned to the right edge.
   ===================================================================== */

/* ---------- Hero band ----------
   Fixed 300px, with the heading and step bar in an absolutely positioned
   block that overhangs the bottom edge by 34px — the same treatment the
   directory hero uses. Values from the reference's data-r="hero"/"head". */
.reg-hero{position:relative;height:300px;background:url(../img/hero-warehouse.jpg) center 65%/cover}
.reg-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 45%,rgba(255,255,255,.2) 100%)}
.reg-hero .head{position:absolute;left:0;right:0;bottom:-34px;z-index:1}
.reg-hero .kick{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.reg-hero h1{font-size:44px;line-height:1;letter-spacing:-.03em;font-weight:800;margin:10px 0 20px}

/* ---------- Horizontal step bar ---------- */
.stepbar{display:flex;background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(15,31,74,.16),0 0 0 1px rgba(15,31,74,.06);padding:8px;gap:4px;overflow-x:auto;scrollbar-width:none}
.stepbar::-webkit-scrollbar{display:none}
.stepbar button{flex:1;min-width:150px;display:flex;gap:10px;align-items:center;justify-content:center;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--mute);padding:10px 14px;border-radius:12px;white-space:nowrap;cursor:default;min-height:48px}
.stepbar button .n{width:26px;height:26px;border-radius:50%;background:#EEF2F9;color:var(--mute);font-size:12px;font-weight:800;display:grid;place-items:center;flex:none}
.stepbar button.on{background:var(--blue);color:#fff}
.stepbar button.on .n{background:#fff;color:var(--blue)}
.stepbar button.is-done{color:var(--green);cursor:pointer}
.stepbar button.is-done .n{background:var(--green);color:#fff}
.stepbar button.is-done:hover{background:var(--bg);transform:none}

/* ---------- Card ---------- */
/* Clears the 34px the hero's head overhangs by, plus the gap.
   Vertical only — the shorthand would wipe .wrap's 48px side padding and
   run the card past the content column. */
.reg-wrap{padding-top:64px;padding-bottom:64px}
.card-step{background:var(--bg);border-radius:24px;padding:34px 38px 38px}
.card-step .h{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card-step h2{margin:0;font-size:26px;letter-spacing:-.02em}
.card-step .meta{font-size:13.5px;color:var(--mute);font-weight:600;white-space:nowrap}
.card-step .sub{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:#475569;text-wrap:pretty}

.banner{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600;line-height:1.45;margin-top:18px}
.banner i{flex:none;width:18px;height:18px;border-radius:50%;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;font-style:normal}
.banner.err{background:#FEF2F2;color:#991B1B}
.banner.err i{background:#DC2626}
.banner.ok{background:var(--green-10);color:#065F46}
.banner.ok i{background:var(--green)}

/* ---------- Fields ---------- */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
.fields .full{grid-column:1/-1}
/* No border: the reference sizes these on padding alone and shows focus
   and validation as box-shadow rings, so a transparent border would make
   every field 2px taller than the design. */
.f{display:block;background:#fff;border-radius:14px;padding:14px 18px;box-shadow:var(--shadow)}
.f:focus-within{box-shadow:0 0 0 2px var(--blue),var(--shadow)}
.f > span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.f input,.f select,.f textarea{width:100%;border:0;background:none;font:inherit;font-size:16px;font-weight:700;margin-top:4px;color:var(--ink);outline:0;padding:0;appearance:none}
/* appearance:none removes the native arrow; put a themed one back so a
   dropdown does not read as a text box. The reference already reserves
   the 24px this needs. */
.f select{background:var(--chevron) no-repeat right center/16px;padding-right:24px;cursor:pointer}
.f textarea{font-weight:600;font-size:15px;resize:vertical;min-height:84px}
/* Country and the other pickers are comboboxes (mesteel.combo). They reuse
   the field shell above; mesteel.css carries the panel and the options.
   Open gets a softer halo outside the focus ring, so the field and the
   panel below it read as one object. */
.f.combo.is-open{box-shadow:0 0 0 2px var(--blue),0 0 0 5px rgba(31,63,143,.12),var(--shadow)}
.f .combo-row{margin-top:4px}
.f .combo-row input{margin-top:0}
/* The dial code field is only 112px wide — the full inset leaves too
   little room and clips "+971". */
.phone-row .combo{--chev-inset:8px}
/* The note is also a direct child span, so it has to undo the label's
   uppercase treatment rather than just restyle the size. */
.f .note{display:block;font-size:12px;font-weight:600;color:var(--mute);margin-top:6px;text-transform:none;letter-spacing:normal}
/* Validation, exactly as the reference does it: ONE field is flagged at a
   time with a red ring and a shake, and the message appears as a toast
   above the Continue button — not as a note under every field. */
[data-field][data-invalid="true"]{box-shadow:0 0 0 2px #DC2626,0 2px 10px rgba(15,31,74,.06)!important;animation:shake .35s ease}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.errmsg{position:absolute;right:0;bottom:calc(100% + 12px);display:flex;gap:10px;align-items:center;background:#DC2626;color:#fff;border-radius:14px;padding:10px 12px 10px 14px;max-width:min(420px,100%);box-shadow:0 12px 30px rgba(220,38,38,.3);z-index:5;font-size:13.5px;font-weight:600;line-height:1.4}
/* Alpine drives both directions now — it can only transition what it
   hides, and the toast has to fade back out after its six seconds. */
.toast-t{transition:opacity .2s ease,transform .2s ease}
.toast-off{opacity:0;transform:translateY(8px)}
.toast-on{opacity:1;transform:none}
.errmsg .x{border:0;background:rgba(255,255,255,.2);color:#fff;width:24px;height:24px;border-radius:8px;cursor:pointer;display:grid;place-items:center;font-size:12px;flex:none}
/* Dial code sits beside the mobile number, as in the reference. */
.phone-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px}

/* ---------- OTP ---------- */
.otp{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.otp input{width:56px;height:66px;text-align:center;font-size:24px;font-weight:800;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);outline:0}
.otp input:focus{border-color:var(--blue)}
.otp input[data-filled=true]{border-color:var(--blue);background:var(--blue-10)}

/* The activity / product picker moved to picker.css — the dashboard
   uses the same control, so it is shared rather than copied. */

.src input{accent-color:var(--blue)}

.link-btn{border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--blue);cursor:pointer;padding:6px 4px;min-height:36px}
.link-btn:hover{color:var(--navy);transform:none}

/* ---------- Listing preview ----------
   Card and pill sit in ONE fixed flex row, so opening the card slides it
   out beside a pill that never moves. Values from the reference's
   data-r="float" / "float-card" / "float-pill". */
.float{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;display:flex;justify-content:flex-end;align-items:center;max-width:calc(100vw - 24px)}
.float-pill{display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid var(--line);border-right:0;background:#fff;color:var(--ink);border-radius:16px 0 0 16px;padding:12px 8px 12px 10px;min-height:44px;cursor:pointer;font:inherit;box-shadow:-8px 0 30px rgba(15,31,74,.12)}
.float-pill:hover{background:var(--bg);transform:none}
/* The company's initials — the reference shows the listing's own icon. */
.float-pill .ini{width:34px;height:34px;border-radius:10px;background:var(--blue-10);color:var(--blue);font-weight:800;font-size:12px;display:grid;place-items:center;flex:none}
.float-pill .lbl{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.float-pill .amt{font-size:13px;font-weight:800;letter-spacing:-.02em;color:var(--blue);font-variant-numeric:tabular-nums}
.float-pill .chev{width:24px;height:24px;border-radius:50%;background:var(--bg);color:var(--mute);display:grid;place-items:center;font-size:10px;flex:none}

.float-card{width:380px;max-width:calc(100vw - 80px);background:#fff;border:1px solid var(--line);border-radius:22px 0 0 22px;border-right:0;box-shadow:0 24px 70px rgba(15,31,74,.22),0 0 0 1px rgba(15,31,74,.04);overflow:hidden;animation:toastIn .22s ease-out;max-height:calc(100vh - 48px);overflow-y:auto}
.float-card .pvh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 10px}
.float-card .pvh span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.float-card .pvh button{border:0;background:var(--bg);color:#334155;width:32px;height:32px;border-radius:10px;cursor:pointer;font-size:14px;display:grid;place-items:center}
.float-card .mini{margin:0 12px 12px;border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;background:#fff}
.float-card .mini .top{display:flex;gap:12px;align-items:center}
.float-card .mini .avatar{width:44px;height:44px;border-radius:12px;background:var(--blue);color:#fff;font-weight:800;display:grid;place-items:center;flex:none}
.float-card .mini .txt{min-width:0;flex:1}
.float-card .mini b{display:block;font-size:16px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.float-card .mini small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.float-card .mini .pill{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;color:var(--blue);background:var(--blue-10);flex:none;margin:0}
.float-card .prods{font-size:13px;line-height:1.6}
.float-card .prods .s{color:var(--green);font-weight:800}
.float-card .prods .b{color:#C2410C;font-weight:800}
.float-card .prods .empty{color:var(--faint)}
.float-card .badges{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;font-weight:700}
.float-card .badges span{background:#F1F5F9;color:var(--mute);padding:3px 8px;border-radius:999px}
.float-card .badges .iso{background:var(--green-10);color:var(--green)}
.float-card .mini .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12.5px;padding-top:10px;border-top:1px solid #F1F5F9}
.float-card .mini .foot span{color:var(--faint)}
.float-card .mini .foot .lnk{font-weight:700;color:var(--blue)}

/* Collapsible Activities / We sell / We buy. A chip here removes its own
   item, so the panel doubles as the edit surface the reference intends. */
.pvsec{margin:0 12px 12px;border:1px solid var(--line);border-radius:18px;padding:8px 16px;display:flex;flex-direction:column}
.pvsec > div > button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px 0;min-height:36px;cursor:pointer;font:inherit;text-align:left}
.pvsec > div > button:hover{transform:none}
.pvsec .h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);flex:1}
.pvsec .h.sell{color:var(--green)}
.pvsec .h.buy{color:#C2410C}
.pvsec .g{font-size:11px;color:var(--faint)}
.pvsec .pills{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 6px}
.pill-opt.sm{min-height:34px;font-size:12.5px;padding:0 10px;white-space:normal;text-align:left}
.pill-opt .rm{margin-left:2px;opacity:.6}

.float-card .cost{margin:0 12px 12px;background:var(--bg);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:7px;font-size:13px;font-variant-numeric:tabular-nums}
.float-card .cost .r{display:flex;justify-content:space-between;gap:12px}
.float-card .cost .r.m{color:var(--mute)}
.float-card .cost .hr{height:1px;background:var(--line);margin:2px 0}
.float-card .cost .t{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.float-card .cost .tot{font-size:20px;letter-spacing:-.02em}
.float-card .cost .fine{margin:0;font-size:11.5px;color:var(--faint);line-height:1.5}

/* ---------- Done ---------- */
.done-card{margin-top:26px;text-align:center;padding:36px 24px;border-radius:22px;background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff}
.done-card .tick{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:26px;margin:0 auto 16px}
.done-card h2{margin:0;font-size:26px}
.done-card p{margin:10px auto 0;max-width:460px;color:#DCE3F5;font-size:14.5px;line-height:1.55}
.done-card .btn{margin-top:20px;background:#fff;color:var(--blue)}
.done-card .btn:hover{background:var(--blue-10)}
.summary{margin-top:20px;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.summary .r{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:12px 18px;border-top:1px solid #F1F5F9;font-size:14px;align-items:center}
.summary .r:first-child{border-top:0}
.summary .r .c{color:var(--mute);font-size:13px}
.summary .r .v{font-weight:800;white-space:nowrap}
.summary .total{background:var(--bg);font-weight:800}
.summary .total .v{color:var(--blue)}

/* ---------- Nav ---------- */
/* position:relative so the error toast can anchor above this row. */
.nav-row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.nav-row .btn{min-height:50px;padding:0 26px}
.spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-2px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  /* The reference releases the fixed height here and puts the head back
     into normal flow, so nothing overhangs on a narrow screen.
     padding-top reserves the 76px header, which sits inside the hero in
     the reference but is absolutely positioned over it here — without it
     the hero measures ~70px short. */
  .reg-hero{height:auto;padding-top:76px;padding-bottom:28px}
  .reg-hero:before{background:rgba(255,255,255,.94)}
  .reg-hero .head{position:relative;bottom:auto;padding-top:28px}
  .card-step{padding:26px 22px 30px;border-radius:20px}
  /* The reference does not hide the preview on narrow screens — it moves
     to the bottom-right corner and stacks, with the pill laid out
     horizontally. Values from its own max-width:1023px block. */
  .float{top:auto;transform:none;right:16px;bottom:16px;width:min(380px,calc(100% - 32px));
         flex-direction:column;align-items:stretch;max-width:none}
  .float-card{width:100%;max-width:none;border-radius:22px;border-right:1px solid var(--line);
              margin-bottom:10px;max-height:calc(100vh - 110px)}
  .float-pill{flex-direction:row;border-radius:16px;border-right:1px solid var(--line);
              padding:6px 12px 6px 6px;box-shadow:0 10px 30px rgba(15,31,74,.14)}
  .float-pill .lbl{writing-mode:horizontal-tb;transform:none;flex:1;text-align:left}
}
@media (max-width:639px){
  .reg-hero h1{font-size:32px}
  .reg-hero:before{background:rgba(255,255,255,.95)}
  .card-step{padding:20px 16px 24px}
  .fields{grid-template-columns:1fr}
  /* 96px in the reference, but its select had no drawn chevron; 112 keeps
     "+971" off the caret. */
  .phone-row{grid-template-columns:112px minmax(0,1fr)}
  .otp input{width:44px;height:56px;font-size:20px}
  .summary .r{grid-template-columns:1fr auto}
  .summary .r .c{grid-column:1/-1}
}

/* The honeypot on step 1.
   NOT display:none and NOT [hidden] — a form-filling script checks for
   both before it decides a field is real, so hiding it the obvious way
   is what makes it useless. Off-screen is invisible to a person and
   still present in the DOM to a bot.

   left:-9999px rather than clip-path or opacity:0 because an
   opacity:0 field still takes space and can be clicked by accident,
   and a zero-size one is another pattern that is looked for.
   aria-hidden and tabindex=-1 in the markup keep it out of the way of
   screen readers and the keyboard. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}