/* =============================================================================
   new-listing.css — the New Listing intake wizard (/new-listing).

   Guided, one-step-per-screen flow an agent walks after winning a listing.
   Standalone page (own <head>, own inline JS) served straight off disk by
   nginx from /application/javascript/pages/new-listing/ — NOT a Webflow
   fragment, so inline <script> runs normally and no bundle is needed.

   Namespaced nlw- (new listing wizard). Scoped under .lp-wrapper like the
   other lp-* pages. Loaded AFTER h2v-theme.css and lp.css; writes NO rules
   against shared lp-* visual classes.

   Deliberately reuses the lp-build-request visual language (two-tone navy
   bands, white cards, gold CTA) so the two intakes feel like one product:
     header band  #16304c
     content band #193758

   MOBILE-FIRST: every control is >=44px touch target, the wizard is a single
   ~700px column, and nothing depends on hover. This page is served to
   Facebook in-app browser traffic, so it avoids anything that browser handles
   badly — no position:sticky footers, no backdrop-filter, no dvh units.
============================================================================= */

/* ---- Top gap below the Webflow site nav ------------------------------------
   lp.css gives .lp-wrapper 36px of top padding ("breathing room below the site
   header"). The standalone version of this page zeroed it because it owned the
   whole viewport and its own header band sat flush at the top. Embedded in a
   Webflow page it must NOT sit flush, or the dark hero butts straight into the
   site nav.

   The gap is a MARGIN on the outermost dark column, not padding inside it:
   padding would just make the hero taller and stay dark, whereas a margin
   reveals the host page's background above the block — matching the background
   already showing down the left and right sides.

   Mobile-first: a slightly tighter gap on phones (screen space is scarce), then
   24px from 560px up — the same breakpoint the rest of this file uses. 24px, not
   lp.css's usual 36px, so the gap above the block reads the same weight as the
   host page's gaps down its left and right sides.

   NOTE: the standalone page also set `body { background: #193758 }` so its own
   navy filled the viewport. That is deliberately gone — as an embedded fragment
   this page has no business repainting the host page's body, and leaving it
   would paint the new gap the same navy as the hero, making it invisible. */
.lp-wrapper { padding-top: 0; }
html { scroll-behavior: smooth; }

.nlw-page { margin-top: 20px; }
@media (min-width: 560px) { .nlw-page { margin-top: 24px; } }

.nlw-page {
	--nlw-head:#16304c; --nlw-body:#193758; --nlw-gold:#c9a24c; --nlw-gold-dk:#b0872f;
	--nlw-ink:#1c2530; --nlw-muted:#69737e; --nlw-line:#e5e9ed; --nlw-card:#ffffff;
	--nlw-onnavy:#c8d3dd; --nlw-ok:#2f6f62; --nlw-warn:#d97706; --nlw-bad:#b42318;
	/* No min-height: the card sizes to its content. 100vh was a holdover from the
	   standalone page, where this block owned the viewport and had to fill it. As
	   an inset card it just padded short steps (step 1) with a slab of dead navy
	   below the footer. Tall steps grow past the viewport on their own. */
	background: var(--nlw-body); color: #fff;

	/* Rounded card, not a full-bleed slab: the block is inset from the host page
	   on all four sides, so square corners read as a broken full-width section.
	   overflow:hidden is load-bearing — the head/body bands are full-width
	   children painting their own backgrounds right out to the edge, and without
	   the clip they square the corners back off. Slightly larger than the inner
	   white .nlw-card (14px) so the nesting reads correctly. */
	border-radius: 16px;
	overflow: hidden;
}
.nlw-page, .nlw-page * {
	box-sizing: border-box;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.nlw-page * { margin: 0; padding: 0; }

/* ---- Full-width bands; inner column centred at 700px ----------------------- */
.nlw-band-head { background: var(--nlw-head); width: 100%; }
.nlw-band-body { background: var(--nlw-body); width: 100%; padding-bottom: 56px; }
.nlw-col { max-width: 700px; margin: 0 auto; padding: 0 20px; }

/* ---- Header ----------------------------------------------------------------
   No in-panel topbar: the Webflow site header already carries the logo directly
   above this block, so repeating it here just pushed the hero down. Its logo row
   used to contribute ~70px above the eyebrow, so the top padding here carries
   the whole gap now — 22px alone left the eyebrow crowded against the panel's
   (now rounded) top edge. */
.nlw-head-inner { padding: 30px 0 26px; }
.nlw-eyebrow { color: var(--nlw-gold); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 10px; }
.nlw-page h1 { font-size: 25px; line-height: 1.16; font-weight: 800; letter-spacing: -.5px; margin-bottom: 10px; }
@media (min-width: 560px) { .nlw-page h1 { font-size: 31px; } }
.nlw-lede { font-size: 15.5px; line-height: 1.6; color: var(--nlw-onnavy); }
.nlw-lede b { color: #fff; }

/* ---- Progress rail --------------------------------------------------------- */
.nlw-rail { display: flex; gap: 6px; padding: 0 0 16px; }
.nlw-rail-seg { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.16); }
.nlw-rail-seg.is-done { background: var(--nlw-gold); }
.nlw-rail-seg.is-now  { background: #fff; }
.nlw-stepnum { font-size: 12px; font-weight: 700; color: var(--nlw-onnavy); padding-bottom: 8px; letter-spacing: .3px; }

/* ---- Steps ----------------------------------------------------------------- */
.nlw-step { display: none; }
.nlw-step.is-active { display: block; }

/* ---- First-time explainer (new agents only) --------------------------------
   Sits on the navy, ABOVE the white cards, so it reads as the wizard talking
   rather than as another form section. Same heading/lede treatment as the intro
   panel, scaled down — this is a mid-flow aside, not a second hero. */
.nlw-intro { padding: 2px 0 16px; }
.nlw-intro-h { font-size: 19px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 6px; }
.nlw-intro-p { font-size: 14.5px; line-height: 1.6; color: var(--nlw-onnavy); }
@media (min-width: 560px) { .nlw-intro-h { font-size: 21px; } }

.nlw-card { background: var(--nlw-card); color: var(--nlw-ink); border-radius: 14px; padding: 22px 20px; margin-top: 4px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); }
.nlw-card + .nlw-card { margin-top: 16px; }
.nlw-card h2 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 4px; }
.nlw-card-sub { font-size: 13px; color: var(--nlw-muted); margin-bottom: 16px; line-height: 1.5; }
.nlw-sect { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--nlw-muted); margin: 20px 0 10px; }
.nlw-sect:first-child { margin-top: 0; }

/* ---- Fields ---------------------------------------------------------------- */
.nlw-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .nlw-grid-2 { grid-template-columns: 1fr 1fr; } .nlw-grid-3 { grid-template-columns: 2fr 1fr 1fr; } }
.nlw-field { display: flex; flex-direction: column; min-width: 0; }
.nlw-label { font-size: 13px; font-weight: 700; color: var(--nlw-ink); margin-bottom: 6px; }
.nlw-req { color: var(--nlw-bad); }
.nlw-input, .nlw-textarea {
	width: 100%; padding: 12px 13px; border-radius: 9px; border: 1px solid #cfd6dd;
	background: #fff; font-size: 16px; color: var(--nlw-ink);	/* 16px: stops iOS zoom-on-focus */
}
.nlw-textarea { min-height: 96px; resize: vertical; }
.nlw-input:focus, .nlw-textarea:focus { outline: none; border-color: var(--nlw-gold); box-shadow: 0 0 0 3px rgba(201,162,76,.18); }
.nlw-input.nlw-invalid, .nlw-textarea.nlw-invalid { border-color: var(--nlw-bad); }
.nlw-err { display: none; font-size: 12px; font-weight: 600; color: var(--nlw-bad); margin-top: 5px; }
.nlw-err.nlw-show { display: block; }
.nlw-hint { font-size: 12px; color: var(--nlw-muted); margin-top: 5px; }

/* Input paired with an inline "Look up" button */
.nlw-inline { display: flex; gap: 8px; align-items: stretch; }
.nlw-inline .nlw-input { flex: 1 1 auto; min-width: 0; }
.nlw-lookup {
	flex: none; padding: 0 15px; min-height: 46px; border-radius: 9px; cursor: pointer;
	border: 1px solid var(--nlw-gold); background: #fffdf6; color: var(--nlw-gold-dk);
	font-size: 13.5px; font-weight: 800; white-space: nowrap;
}
.nlw-lookup:disabled { opacity: .55; cursor: default; }

/* ---- Key features list -----------------------------------------------------
   Mirrors .edit-home-features-* on the member Edit Home Features tab (two-column
   rows collapsing to one on narrow screens, ✖ on the left of each row), redrawn
   in nlw-* tokens so it reads as part of the wizard rather than the app. Empty
   list renders nothing — the grid has no gap to show until a feature exists. */
.nlw-feat-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.nlw-feat-list:not(:empty) { margin-bottom: 10px; }
@media (min-width: 560px) { .nlw-feat-list { grid-template-columns: 1fr 1fr; } }
.nlw-feat-item {
	display: flex; align-items: center; gap: 10px; width: 100%;
	background: #fff; border: 1px solid #cfd6dd; border-radius: 9px;
	padding: 9px 11px; font-size: 14px;
}
.nlw-feat-text { flex: 1; min-width: 0; color: var(--nlw-ink); word-break: break-word; }
.nlw-feat-remove {
	flex: none; min-width: 24px; height: 24px; padding: 0 6px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	border: none; border-radius: 5px; background: var(--nlw-gold); color: #fff;
	font-size: 12px; font-weight: 800; line-height: 1;
}
.nlw-feat-remove:hover { background: var(--nlw-gold-dk); }
.nlw-feat-add-row { display: flex; gap: 8px; align-items: stretch; }
.nlw-feat-add-row .nlw-feat-input { flex: 1 1 auto; min-width: 0; }
.nlw-feat-add {
	flex: none; padding: 0 15px; min-height: 46px; border-radius: 9px; cursor: pointer;
	border: 1px solid var(--nlw-gold); background: #fffdf6; color: var(--nlw-gold-dk);
	font-size: 13.5px; font-weight: 800; white-space: nowrap;
}
@media (max-width: 559px) { .nlw-feat-add-row { flex-direction: column; } }

/* ---- DBPR status badge (WARN-ONLY — never gates the flow) ------------------ */
.nlw-dbpr { display: none; margin-top: 10px; border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.5; border: 1px solid; }
.nlw-dbpr.nlw-show { display: block; }
.nlw-dbpr-t { font-weight: 800; }
.nlw-dbpr.is-ok   { background: #f2f8f6; border-color: #bcd9d1; color: #1e4d43; }
.nlw-dbpr.is-warn { background: #fff8ec; border-color: #f0d8a8; color: #7a4a06; }
.nlw-dbpr ul { margin: 6px 0 0 17px; }
.nlw-dbpr li { margin-top: 3px; }

/* ---- Returner "welcome back" summary --------------------------------------- */
.nlw-known { display: flex; gap: 13px; align-items: center; background: #f2f8f6; border: 1px solid #bcd9d1; border-radius: 11px; padding: 13px; }
.nlw-known-pic { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #dbe6ea; border: 1px solid var(--nlw-line); }
.nlw-known-n { font-size: 15px; font-weight: 800; color: #1e4d43; }
.nlw-known-s { font-size: 12.5px; color: #3d6a60; margin-top: 2px; }

/* ---- Broker on file: confirm / update -------------------------------------- */
.nlw-onfile { background: #f8fafc; border: 1px solid var(--nlw-line); border-radius: 11px; padding: 14px; }
.nlw-onfile-n { font-size: 15px; font-weight: 800; color: var(--nlw-ink); }
.nlw-onfile-s { font-size: 12.5px; color: var(--nlw-muted); margin-top: 3px; }
.nlw-choice2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.nlw-chip {
	min-height: 46px; border-radius: 9px; cursor: pointer; padding: 11px 12px;
	border: 1.5px solid #cfd6dd; background: #fff; color: var(--nlw-ink);
	font-size: 14px; font-weight: 800; text-align: center;
}
.nlw-chip.is-on { border-color: var(--nlw-gold); background: #fffdf6; color: var(--nlw-gold-dk); }

/* ---- Path chooser ---------------------------------------------------------- */
.nlw-paths { display: grid; grid-template-columns: 1fr; gap: 12px; }
.nlw-path {
	display: block; width: 100%; text-align: left; cursor: pointer;
	border: 1.5px solid #cfd6dd; background: #fff; border-radius: 12px; padding: 17px 16px;
}
.nlw-path.is-on { border-color: var(--nlw-gold); background: #fffdf6; box-shadow: 0 0 0 3px rgba(201,162,76,.15); }
.nlw-path-t { font-size: 16px; font-weight: 800; color: var(--nlw-ink); }
.nlw-path-s { font-size: 13px; color: var(--nlw-muted); margin-top: 5px; line-height: 1.5; }
.nlw-path-tag { display: inline-block; margin-top: 9px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--nlw-gold-dk); background: #fdf6e6; border-radius: 99px; padding: 5px 10px; }

/* ---- Single-asset uploads (headshot / logo) -------------------------------- */
.nlw-asset { display: flex; gap: 13px; align-items: center; }
.nlw-asset-prev { flex: none; width: 62px; height: 62px; border-radius: 10px; border: 1px solid var(--nlw-line); background: #eef1f4 center/cover no-repeat; }
.nlw-asset-prev.is-round { border-radius: 50%; }
.nlw-asset-btn {
	min-height: 44px; padding: 0 15px; border-radius: 9px; cursor: pointer;
	border: 1.5px solid #cfd6dd; background: #fff; color: var(--nlw-ink); font-size: 14px; font-weight: 800;
}
.nlw-asset-name { font-size: 12px; color: var(--nlw-muted); margin-top: 5px; word-break: break-all; }

/* ---- Categorized uploader -------------------------------------------------- */
.nlw-grp { border: 1px solid var(--nlw-line); border-radius: 11px; overflow: hidden; margin-top: 10px; }
.nlw-grp-h {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; cursor: pointer; padding: 14px; min-height: 52px;
	background: #f8fafc; border: none; text-align: left;
}
.nlw-grp-t { font-size: 14.5px; font-weight: 800; color: var(--nlw-ink); }
.nlw-grp-n { font-size: 12px; font-weight: 800; color: var(--nlw-muted); }
.nlw-grp-caret { font-size: 12px; color: var(--nlw-muted); }
.nlw-grp-b { display: none; padding: 4px 14px 14px; }
.nlw-grp.is-open .nlw-grp-b { display: block; }

.nlw-cat { border-top: 1px solid var(--nlw-line); padding: 12px 0 4px; }
.nlw-cat:first-child { border-top: none; }
.nlw-cat-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nlw-cat-l { font-size: 13.5px; font-weight: 700; color: var(--nlw-ink); }
.nlw-cat-l .nlw-cat-req { color: var(--nlw-gold-dk); font-size: 11px; font-weight: 800; margin-left: 6px; }
.nlw-cat-add {
	flex: none; min-height: 40px; padding: 0 14px; border-radius: 9px; cursor: pointer;
	border: 1.5px dashed #cfd6dd; background: #fff; color: var(--nlw-ink); font-size: 13px; font-weight: 800;
}
.nlw-cat-add:hover { border-color: var(--nlw-gold); background: #fffdf6; }
/* Drag-and-drop target (desktop). The whole row highlights, since .nlw-strip is
   display:none until a category holds a photo — there'd be nothing to aim at on
   an empty one. pointer-events on the children is what stops the highlight
   flickering as the cursor crosses the label and the + Add button; it only
   applies while a drag is actually over the row. */
.nlw-cat.is-drop { background: #fffdf6; box-shadow: inset 0 0 0 2px var(--nlw-gold); border-radius: 9px; }
.nlw-cat.is-drop * { pointer-events: none; }

.nlw-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 9px; margin-top: 11px; }
.nlw-strip:empty { display: none; }
.nlw-thumb { position: relative; border-radius: 9px; overflow: hidden; border: 1px solid var(--nlw-line); background: #eef1f4; aspect-ratio: 4 / 3; }
.nlw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nlw-thumb-x {
	position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%;
	border: none; background: rgba(16,24,32,.78); color: #fff; font-size: 16px; line-height: 22px;
	cursor: pointer; padding: 0; text-align: center;
}
.nlw-thumb-x:hover { background: var(--nlw-bad); }

.nlw-count { font-size: 12.5px; font-weight: 700; color: var(--nlw-muted); margin-top: 14px; }
.nlw-file-input { display: none; }
.nlw-bar { height: 6px; border-radius: 99px; background: #e5e9ed; overflow: hidden; margin-top: 12px; display: none; }
.nlw-bar.nlw-show { display: block; }
.nlw-bar-fill { height: 100%; width: 0%; background: var(--nlw-gold); transition: width .2s ease; }

/* ---- Review list ----------------------------------------------------------- */
.nlw-rev { border: 1px solid var(--nlw-line); border-radius: 11px; overflow: hidden; }
.nlw-rev-r { display: flex; gap: 12px; padding: 10px 13px; border-top: 1px solid var(--nlw-line); font-size: 13.5px; }
.nlw-rev-r:first-child { border-top: none; }
.nlw-rev-k { flex: none; width: 108px; color: var(--nlw-muted); font-weight: 700; }
.nlw-rev-v { flex: 1; color: var(--nlw-ink); font-weight: 700; word-break: break-word; }

/* ---- Permission ------------------------------------------------------------ */
.nlw-perm { display: flex; gap: 11px; align-items: flex-start; background: #f8fafc; border: 1px solid var(--nlw-line); border-radius: 10px; padding: 14px; cursor: pointer; }
.nlw-perm input[type="checkbox"] { flex: none; width: 21px; height: 21px; margin-top: 1px; accent-color: var(--nlw-gold); cursor: pointer; }
.nlw-perm-text { font-size: 13px; line-height: 1.55; color: var(--nlw-ink); }

/* ---- Nav buttons ----------------------------------------------------------- */
.nlw-nav { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.nlw-next {
	flex: 1; display: flex; align-items: center; justify-content: center; min-height: 54px;
	background: var(--nlw-gold); color: #22150a; font-size: 17px; font-weight: 800;
	padding: 15px; border: none; border-radius: 11px; cursor: pointer;
	box-shadow: 0 10px 26px rgba(201,162,76,.30);
}
.nlw-next:disabled { background: #6d7a88; color: #d6dde4; cursor: not-allowed; box-shadow: none; }
.nlw-next:not(:disabled):active { transform: translateY(1px); }
.nlw-back {
	flex: none; min-height: 54px; padding: 0 18px; border-radius: 11px; cursor: pointer;
	border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff;
	font-size: 15px; font-weight: 800;
}
.nlw-sub-note { text-align: center; font-size: 12.5px; color: var(--nlw-onnavy); margin-top: 12px; }
.nlw-form-err { display: none; font-size: 13.5px; font-weight: 700; color: #ffd9d6; margin-top: 12px; text-align: center; }
.nlw-form-err.nlw-show { display: block; }
.nlw-note { display: none; font-size: 12.5px; color: var(--nlw-onnavy); margin-top: 10px; text-align: center; }
.nlw-note.nlw-show { display: block; }

/* ---- Success --------------------------------------------------------------- */
.nlw-done { display: none; background: var(--nlw-card); color: var(--nlw-ink); border-radius: 14px; padding: 34px 22px; margin-top: 4px; text-align: center; }
.nlw-done.nlw-show { display: block; }
.nlw-done-check { font-size: 34px; color: var(--nlw-ok); }
.nlw-done h2 { font-size: 21px; font-weight: 800; margin: 8px 0 8px; }
.nlw-done p { font-size: 14.5px; color: var(--nlw-muted); line-height: 1.6; }

/* ---- Footer ---------------------------------------------------------------- */
.nlw-footer { text-align: center; padding: 26px 0 8px; font-size: 12px; color: #8ea2b5; line-height: 1.7; }
.nlw-footer a { color: #8ea2b5; }
