/* ============================================================
   Living Extra — New Listing wizard
   Builds on livingextra.css tokens + shared .page-hero. Prefix: nl-
   ============================================================ */

.nl-wrap{padding:34px 0 64px}

/* ---------- Submit message ---------- */
.nl-msg{display:none;font-size:14px;font-weight:600;line-height:1.5;border-radius:11px;margin:0 0 4px}
.nl-msg.show{display:block;padding:12px 15px;margin:0 0 16px}
.nl-msg.err{background:#fdecef;color:#b0173b;border:1px solid #f6c3ce}
.nl-msg.ok{background:#e9f9f0;color:#0d7a45;border:1px solid #b8eccd}
.nl-next.loading{opacity:.75;cursor:progress}

/* Honeypot */
.le-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- Stepper ---------- */
.nl-steps{display:flex;align-items:center;gap:0;max-width:760px;margin:0 auto 34px}
.nl-stepitem{display:flex;align-items:center;gap:12px;flex:1}
.nl-stepitem:last-child{flex:0}
.nl-stepdot{width:40px;height:40px;border-radius:50%;background:var(--card);border:2px solid var(--line);color:var(--ink-3);font-family:var(--disp);font-weight:800;font-size:15px;display:grid;place-items:center;flex-shrink:0;transition:.25s}
.nl-stepitem .lbl{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--ink-3);white-space:nowrap;transition:.25s}
.nl-stepbar{height:2px;background:var(--line);flex:1;margin:0 12px;transition:.3s}
.nl-stepitem.active .nl-stepdot{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:0 10px 22px -8px rgba(236,30,92,.6)}
.nl-stepitem.active .lbl{color:var(--ink)}
.nl-stepitem.done .nl-stepdot{background:var(--rose-l);border-color:var(--rose);color:var(--rose)}
.nl-stepitem.done .lbl{color:var(--ink-2)}
.nl-stepitem.done+.nl-stepbar,.nl-stepbar.fill{background:var(--rose)}
@media(max-width:680px){.nl-stepitem .lbl{display:none}.nl-steps{max-width:340px}}

/* ---------- Layout: form + preview ---------- */
.nl-grid{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start}

/* form card */
.nl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:34px}
.nl-panel{display:none}
.nl-panel.active{display:block;animation:nlFade .3s ease}
@keyframes nlFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nl-panel h2{font-size:22px;margin-bottom:4px}
.nl-panel .desc{color:var(--ink-2);font-size:14.5px;margin-bottom:24px}

/* choice tiles (sale/rent, property type) */
.nl-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.nl-choice.types{grid-template-columns:repeat(4,1fr)}
.nl-tile{border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:16px 12px;cursor:pointer;text-align:center;transition:.2s;font-family:var(--sans)}
.nl-tile:hover{border-color:var(--rose)}
.nl-tile .ti{width:40px;height:40px;margin:0 auto 8px;border-radius:11px;background:var(--rose-l);color:var(--rose);display:grid;place-items:center;transition:.2s}
.nl-tile .nm{font-weight:700;font-size:14px;color:var(--ink)}
.nl-tile.active{border-color:var(--rose);background:var(--rose-l)}
.nl-tile.active .ti{background:var(--rose);color:#fff}

/* fields */
.nl-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.nl-field label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.nl-field .hint{font-size:12px;color:var(--ink-3);font-weight:500}
.nl-field input,.nl-field select,.nl-field textarea{background:var(--bg);border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--ink);outline:none;transition:.18s;width:100%}
.nl-field input:focus,.nl-field select:focus,.nl-field textarea:focus{border-color:var(--rose);background:var(--card);box-shadow:0 0 0 3px var(--rose-l)}
.nl-field textarea{resize:vertical;min-height:120px}
.nl-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nl-row.three{grid-template-columns:1fr 1fr 1fr}
.nl-inline{position:relative}
.nl-inline .unit{position:absolute;top:50%;right:14px;transform:translateY(-50%);font-size:13px;font-weight:700;color:var(--ink-3);pointer-events:none}
.nl-inline input{padding-right:46px}

/* pill selectors */
.nl-pills{display:flex;gap:7px;flex-wrap:wrap}
.nl-pill{border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);font-family:var(--sans);font-weight:600;font-size:13px;padding:8px 15px;border-radius:10px;cursor:pointer;transition:.18s}
.nl-pill:hover{border-color:var(--rose);color:var(--rose)}
.nl-pill.active{background:var(--rose);border-color:var(--rose);color:#fff}

/* amenities */
.nl-amen{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.nl-check{position:relative;display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--ink-2);user-select:none}
/* Focusable, not display:none — see the note on .au-check in login.css.
   These are the listing wizard's amenity boxes. */
.nl-check input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nl-check input:focus-visible+.box{outline:2px solid var(--rose);outline-offset:2px}
.nl-check .box{width:19px;height:19px;border-radius:6px;border:2px solid var(--line);flex-shrink:0;display:grid;place-items:center;transition:.18s}
.nl-check .box svg{opacity:0;transform:scale(.6);transition:.18s;color:#fff}
.nl-check input:checked+.box{background:var(--rose);border-color:var(--rose)}
.nl-check input:checked+.box svg{opacity:1;transform:none}

/* photo dropzone */
.nl-drop{border:2px dashed var(--line);border-radius:16px;background:var(--bg);padding:34px 20px;text-align:center;cursor:pointer;transition:.2s}
.nl-drop:hover,.nl-drop.drag{border-color:var(--rose);background:var(--rose-l)}
.nl-drop .di{width:54px;height:54px;margin:0 auto 12px;border-radius:14px;background:var(--rose-l);color:var(--rose);display:grid;place-items:center}
.nl-drop h4{font-size:16px;margin-bottom:5px}
.nl-drop p{color:var(--ink-3);font-size:13px;font-weight:500}
.nl-drop .browse{color:var(--rose);font-weight:700}
.nl-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-top:16px}
.nl-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.nl-thumb img{width:100%;height:100%;object-fit:cover}
.nl-thumb .cover{position:absolute;bottom:4px;left:4px;background:var(--rose);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:100px}

/* nav buttons */
.nl-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line-2)}
.nl-back{background:var(--card);border:1.5px solid var(--line);color:var(--ink-2);border-radius:12px;font-weight:700;font-size:15px;padding:13px 24px;cursor:pointer;transition:.2s;font-family:var(--sans)}
.nl-back:hover{border-color:var(--rose);color:var(--rose)}
.nl-back[hidden]{visibility:hidden}

/* ---------- Live preview aside ---------- */
.nl-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.nl-preview{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.nl-pv-media{position:relative;aspect-ratio:16/11;background:linear-gradient(135deg,var(--rose-100),#E7DCFF);overflow:hidden}
.nl-pv-media img{width:100%;height:100%;object-fit:cover}
.nl-pv-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:13px;font-weight:600;gap:8px;text-align:center;flex-direction:column;display:flex;align-items:center;justify-content:center}
.nl-pv-tag{position:absolute;top:12px;left:12px;background:var(--rose);color:#fff;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:100px}
.nl-pv-b{padding:16px}
.nl-pv-price{font-family:var(--disp);font-size:20px;font-weight:800}
.nl-pv-price small{font-family:var(--sans);font-size:12px;color:var(--ink-3);font-weight:600}
.nl-pv-title{font-weight:700;font-size:15px;margin:5px 0 3px;color:var(--ink)}
.nl-pv-loc{display:flex;align-items:center;gap:5px;color:var(--ink-3);font-size:13px;font-weight:600}
.nl-pv-meta{display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);color:var(--ink-2);font-size:12.5px;font-weight:600}
.nl-pv-meta span{display:flex;align-items:center;gap:5px}
.nl-tipbox{background:var(--rose-l);border:1px solid var(--rose-100);border-radius:16px;padding:16px 18px}
.nl-tipbox h4{font-size:14px;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.nl-tipbox h4 svg{color:var(--rose)}
.nl-tipbox p{color:var(--ink-2);font-size:13px;line-height:1.6}

/* success */
.nl-done{text-align:center;padding:30px 10px}
.nl-done .ok{width:74px;height:74px;margin:0 auto 18px;border-radius:50%;background:var(--rose-l);color:var(--rose);display:grid;place-items:center}
.nl-done h2{font-size:26px;margin-bottom:8px}
.nl-done p{color:var(--ink-2);font-size:15px;max-width:420px;margin:0 auto 24px}
.nl-done .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(max-width:1040px){
  .nl-grid{grid-template-columns:1fr}
  .nl-aside{position:static;flex-direction:row}
  .nl-preview{flex:1}
  .nl-tipbox{flex:1}
}
@media(max-width:680px){
  .nl-card{padding:24px}
  .nl-choice,.nl-choice.types{grid-template-columns:1fr 1fr}
  .nl-row,.nl-row.three{grid-template-columns:1fr}
  .nl-amen{grid-template-columns:1fr 1fr}
  .nl-aside{flex-direction:column}
}