/*
 * The marketplace design system.
 *
 * One file, one set of tokens, used by every public screen. It deliberately
 * does NOT depend on the bundled Bootstrap theme: that theme was written for a
 * generic Western property brochure, and every screen here has to read as a
 * Nigerian property app first — naira, per-year rent, LGAs, verification, and
 * a thumb-reachable bottom bar, because almost everyone arrives on a phone.
 */

:root {
    /* Deep teal is the brand surface: headers, hero, anything that frames. */
    --nm-teal: #0b5c56;
    --nm-teal-deep: #084a45;
    --nm-teal-ink: #0f6b5c;

    /* Green is action and money: buttons, prices, the active tab. */
    --nm-green: #1b8a4b;
    --nm-green-dark: #14713c;
    --nm-green-soft: #e6f4ec;
    --nm-verified: #22a45b;

    --nm-ink: #10151a;
    --nm-ink-soft: #3d4650;
    --nm-muted: #6b7280;
    --nm-line: #e6e9ec;
    --nm-line-strong: #cfd6dc;
    --nm-bg: #ffffff;
    --nm-bg-alt: #f6f8f8;
    --nm-danger: #c0392b;
    --nm-warn: #b8860b;

    /*
     * The type scale. Six steps and nothing between them — a seventh size two
     * hundredths of a rem from an existing one is how a stylesheet ends up with
     * thirty-two sizes that all look like a mistake.
     *
     *   .75rem   uppercase labels, badges, chips
     *   .82rem   hints, meta lines, captions, table headers
     *   .88rem   specs, secondary body, dense tables
     *   .94rem   controls, buttons, most UI text
     *   1rem     body copy
     *   1.05rem  panel headings
     *   1.18rem  card price, page head
     *   1.35rem  section titles
     *
     * Above that only the hero (2.6rem/2rem) and the detail-page price
     * (1.85rem), which are deliberately singular.
     */

    --nm-r-sm: 8px;
    --nm-r: 12px;
    --nm-r-lg: 16px;
    --nm-r-pill: 999px;

    --nm-shadow: 0 1px 2px rgba(16, 21, 26, .04), 0 8px 24px rgba(16, 21, 26, .06);
    --nm-shadow-lift: 0 4px 10px rgba(16, 21, 26, .07), 0 16px 40px rgba(16, 21, 26, .10);

    /* Room for the fixed bottom bar so nothing hides behind it. */
    --nm-tabbar: 72px;
}

* { box-sizing: border-box; }

body.nm {
    margin: 0;
    background: var(--nm-bg);
    color: var(--nm-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Room for the fixed bottom bar, and only while that bar exists. Above 900px
   the top nav takes over and the tab bar goes away, so reserving space for it
   would leave a dead strip under every page. */
@media (max-width: 899px) {
    body.nm { padding-bottom: calc(var(--nm-tabbar) + env(safe-area-inset-bottom, 0px)); }
}

body.nm a { color: inherit; text-decoration: none; }
body.nm h1, body.nm h2, body.nm h3, body.nm h4, body.nm h5 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
body.nm p { margin: 0 0 .75rem; }
body.nm img { max-width: 100%; }

.nm-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.nm-wrap--narrow { max-width: 760px; }

/* ---------------------------------------------------------------- top bar */

.nm-topbar {
    background: var(--nm-teal);
    color: #fff;
    padding: 14px 0;
}

.nm-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Brand lockup: a mark plus the wordmark, both inside the home link. The mark
   matters more than the words — on a phone the wordmark is the first thing to
   go, and a roof shape is recognisable at 32px where six syllables are not. */
.nm-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }

.nm-brand__mark {
    width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
    background: #fff; color: var(--nm-teal);
    display: flex; align-items: center; justify-content: center;
}

.nm-brand__word { font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.nm-brand:hover .nm-brand__mark { background: var(--nm-green-soft); }

@media (max-width: 380px) { .nm-brand__word { display: none; } }

.nm-topbar__links { display: none; gap: 22px; align-items: center; }
.nm-topbar__links a { color: rgba(255, 255, 255, .88); font-weight: 500; font-size: .94rem; }
.nm-topbar__links a:hover, .nm-topbar__links a.is-active { color: #fff; }

/* Specificity matters here: `.nm-topbar__links a` is (0,1,1) and would beat a
   bare `.nm-topbar__cta` at (0,1,0), which rendered the call to action as white
   text on a white pill — invisible. Scoping it to the same depth fixes it. */
.nm-topbar__links a.nm-topbar__cta,
.nm-topbar__cta {
    background: #fff; color: var(--nm-teal); font-weight: 700; font-size: .88rem;
    padding: 9px 16px; border-radius: var(--nm-r-pill);
}

.nm-topbar__links a.nm-topbar__cta:hover { background: var(--nm-green-soft); color: var(--nm-teal-deep); }

@media (min-width: 900px) { .nm-topbar__links { display: flex; } }

/* ------------------------------------------------------------------- hero */

.nm-hero { background: var(--nm-teal); color: #fff; padding: 28px 0 34px; }
.nm-hero h1 { font-size: 2rem; line-height: 1.18; margin-bottom: 22px; max-width: 15ch; }
.nm-hero__sub { color: rgba(255, 255, 255, .82); font-size: .94rem; margin: -14px 0 20px; max-width: 52ch; }

@media (min-width: 768px) { .nm-hero { padding: 44px 0 48px; } .nm-hero h1 { font-size: 2.6rem; } }

/* Segmented purpose switch — rent / sale / shortlet. */
.nm-segment {
    display: flex; background: rgba(0, 0, 0, .22); border-radius: var(--nm-r);
    padding: 5px; gap: 4px; margin-bottom: 18px;
}

.nm-segment a {
    flex: 1; text-align: center; padding: 10px 8px; border-radius: 8px;
    color: rgba(255, 255, 255, .85); font-weight: 600; font-size: .88rem;
    white-space: nowrap; transition: background .15s ease, color .15s ease;
}

.nm-segment a.is-active { background: #fff; color: var(--nm-teal); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.nm-segment a:not(.is-active):hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* The pill search field that sits under the hero heading. */
.nm-searchbar { position: relative; }

.nm-searchbar input {
    width: 100%; border: 0; border-radius: var(--nm-r-pill);
    padding: 15px 20px 15px 52px; font-size: .94rem; color: var(--nm-ink);
    background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); outline: none;
}

.nm-searchbar input::placeholder { color: #9aa3ab; }
.nm-searchbar svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #6b7280; }

/* ---------------------------------------------------------------- page head */

.nm-pagehead {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 0 8px; border-bottom: 1px solid var(--nm-line); margin-bottom: 20px;
}

.nm-pagehead h1 { font-size: 1.18rem; flex: 1; text-align: center; }
.nm-pagehead .nm-back { width: 34px; display: flex; align-items: center; color: var(--nm-ink); }
.nm-pagehead .nm-spacer { width: 34px; }

.nm-section { padding: 24px 0; }
.nm-section__title { font-size: 1.35rem; margin-bottom: 14px; }
.nm-section__title--sm { font-size: 1.05rem; }

/* ------------------------------------------------------------------ cards */

.nm-card {
    display: flex; gap: 13px; background: #fff; border: 1px solid var(--nm-line);
    border-radius: var(--nm-r-lg); padding: 12px; margin-bottom: 12px;
    box-shadow: var(--nm-shadow);
    transition: box-shadow .16s ease, border-color .16s ease;
}

.nm-card:hover { box-shadow: var(--nm-shadow-lift); border-color: var(--nm-line-strong); }

.nm-card__media {
    /* flex-start, or the default stretch overrides the aspect ratio: a card
       whose title wraps to three lines dragged its thumbnail into a tall grey
       column instead of a square. */
    align-self: flex-start;
    width: 104px; min-width: 104px; aspect-ratio: 1; border-radius: 10px;
    background: var(--nm-bg-alt); overflow: hidden; display: flex; align-items: center;
    justify-content: center; color: #9aa4ac; font-size: .75rem;
    border: 1px solid var(--nm-line);
}

.nm-card__media img { width: 100%; height: 100%; object-fit: cover; }
.nm-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/*
 * Price and badge share a row rather than the badge floating over the card.
 * It was absolutely positioned at top-right, which put it straight on top of
 * the price — "₦4,800,000" read as "₦4,800,00" behind a Verified pill.
 */
.nm-card__pricerow {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
}

.nm-price { color: var(--nm-teal-ink); font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; }
.nm-price__period { color: var(--nm-muted); font-size: .82rem; font-weight: 500; letter-spacing: 0; }

.nm-card__title {
    font-size: .94rem; font-weight: 600; line-height: 1.35; margin: 0; color: var(--nm-ink);
}

.nm-meta { display: flex; align-items: center; gap: 5px; color: var(--nm-muted); font-size: .82rem; }
.nm-meta svg { flex: 0 0 auto; }

/* One line, dot-separated, and it truncates rather than reflowing the card. */
.nm-specs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-top: 3px;
    font-size: .82rem; color: var(--nm-ink-soft);
}

.nm-specs strong { font-weight: 600; }
.nm-specs__sep { color: var(--nm-line-strong); }

.nm-badge-verified {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--nm-green-soft); color: var(--nm-green-dark);
    font-size: .75rem; font-weight: 700; letter-spacing: .01em;
    padding: 3px 9px 3px 7px; border-radius: var(--nm-r-pill);
}

.nm-tag {
    display: inline-block; background: var(--nm-green-soft); color: var(--nm-green-dark);
    font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--nm-r-pill);
}

.nm-tag--muted { background: #eef1f3; color: var(--nm-muted); }
.nm-tag--warn { background: #fdf3e0; color: var(--nm-warn); }
.nm-tag--danger { background: #fdeceb; color: var(--nm-danger); }

/* -------------------------------------------------------------- listing page */

.nm-gallery { position: relative; background: #0a0a0a; }
.nm-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.nm-gallery__track::-webkit-scrollbar { display: none; }

/* Capped: 4/3 of the viewport is most of a phone screen given to one photo —
   or, with no photo at all, to a grey rectangle. */
.nm-gallery__track > * { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 3; max-height: 300px; }
.nm-gallery__track img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* On a laptop the gallery joins the page instead of bleeding across it: a
   full-width 4/3 image at 1400px would be taller than the window. */
@media (min-width: 768px) {
    .nm-gallery { max-width: 1200px; margin: 16px auto 0; padding: 0 20px; background: transparent; }
    .nm-gallery__track { border-radius: var(--nm-r-lg); }
    .nm-gallery__track > * { aspect-ratio: 21 / 9; max-height: 440px; }
    .nm-gallery__empty { aspect-ratio: 21 / 9; max-height: 300px; border-radius: var(--nm-r-lg); }
    .nm-gallery__count { right: 34px; }
}

.nm-gallery__count {
    position: absolute; right: 14px; bottom: 14px; background: rgba(0, 0, 0, .62);
    color: #fff; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: var(--nm-r-sm);
}

.nm-gallery__empty {
    aspect-ratio: 4 / 3; max-height: 220px; background: #d9dde1; display: flex;
    align-items: center; justify-content: center; color: #8b949c; width: 100%;
}

.nm-detail { padding: 20px 0 8px; }
.nm-detail .nm-price { font-size: 1.85rem; color: var(--nm-ink); display: block; }
.nm-detail .nm-price__period { display: block; font-size: 1rem; margin-top: -2px; }
.nm-detail h1 { font-size: 1.35rem; line-height: 1.32; margin: 12px 0 6px; }

.nm-badge-verified--inline {
    background: var(--nm-verified); color: #fff;
    font-size: .82rem; padding: 5px 12px 5px 9px; margin-bottom: 14px;
}

/* The three round facts — beds, baths, type. */
.nm-facts { display: flex; gap: 20px; margin: 20px 0 6px; }
.nm-facts__item { text-align: center; flex: 1; max-width: 120px; }

.nm-facts__icon {
    width: 50px; height: 50px; margin: 0 auto 7px; border-radius: 50%;
    background: var(--nm-green-soft); color: var(--nm-teal); display: flex;
    align-items: center; justify-content: center;
}

.nm-facts__label { font-size: .88rem; font-weight: 600; }

.nm-actions { display: flex; gap: 12px; margin: 20px 0 14px; }
.nm-actions > * { flex: 1; }

/* Stacked action rows read as one control group, not two paragraphs — the gap
   between rows matches the gap within them. */
.nm-actions + .nm-actions { margin-top: -2px; }

/* ---------------------------------------------------------------- buttons */

.nm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; border: 0; cursor: pointer; background: var(--nm-green); color: #fff;
    font-family: inherit; font-size: .94rem; font-weight: 700; padding: 13px 18px;
    border-radius: var(--nm-r); transition: background .15s ease;
}

.nm-btn:hover { background: var(--nm-green-dark); color: #fff; }
.nm-btn--sm { padding: 9px 14px; font-size: .88rem; width: auto; }

.nm-btn--outline {
    background: #fff; color: var(--nm-green-dark); border: 1.5px solid var(--nm-green);
}

.nm-btn--outline:hover { background: var(--nm-green-soft); color: var(--nm-green-dark); }

.nm-btn--quiet {
    background: #fff; color: var(--nm-ink-soft); border: 1.5px solid var(--nm-line-strong);
}

.nm-btn--quiet:hover { background: var(--nm-bg-alt); color: var(--nm-ink); }
.nm-btn--danger { background: #fff; color: var(--nm-danger); border: 1.5px solid #f0c4bf; }
.nm-btn--danger:hover { background: #fdeceb; color: var(--nm-danger); }
.nm-btn[disabled] { opacity: .55; cursor: not-allowed; }

/*
 * Half the buttons on the site are <a> tags, and `body.nm a { color: inherit }`
 * is specificity (0,1,2) against .nm-btn's (0,1,0) — so every anchor-shaped
 * button rendered ink-dark text on its green fill while <button> elements
 * stayed white. Same-depth selectors win the colour back for each variant.
 */
body.nm a.nm-btn,
body.nm a.nm-btn:hover { color: #fff; }

body.nm a.nm-btn--outline { color: var(--nm-green-dark); }
body.nm a.nm-btn--outline:hover { background: var(--nm-green-soft); color: var(--nm-green-dark); }

body.nm a.nm-btn--quiet { color: var(--nm-ink-soft); }
body.nm a.nm-btn--quiet:hover { color: var(--nm-ink); }

body.nm a.nm-btn--danger,
body.nm a.nm-btn--danger:hover { color: var(--nm-danger); }

/* ----------------------------------------------------------------- fields */

.nm-field {
    width: 100%; border: 1.5px solid var(--nm-line-strong); border-radius: var(--nm-r);
    padding: 12px 14px; font-family: inherit; font-size: .94rem; color: var(--nm-ink);
    background: #fff; outline: none; appearance: none;
}

/* Spinners on a naira field are noise — nobody steps a rent up by one. */
.nm-field[type="number"] { -moz-appearance: textfield; }

.nm-field[type="number"]::-webkit-outer-spin-button,
.nm-field[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.nm-field:focus { border-color: var(--nm-green); box-shadow: 0 0 0 3px rgba(27, 138, 75, .12); }
.nm-field::placeholder { color: #9aa3ab; }
textarea.nm-field { min-height: 110px; resize: vertical; }

select.nm-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b5c56' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px;
}

.nm-field-icon { position: relative; }
.nm-field-icon .nm-field { padding-left: 50px; }
.nm-field-icon svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #6b7280; }

.nm-label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 7px; }
.nm-hint { font-size: .82rem; color: var(--nm-muted); margin-top: 6px; line-height: 1.45; }
.nm-error { font-size: .82rem; color: var(--nm-danger); margin-top: 6px; }

.nm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.nm-stack > * { margin-bottom: 12px; }

/* The pill switch — used for "Verified listings only". */
.nm-switch { display: flex; align-items: center; gap: 11px; cursor: pointer; margin: 2px 0 14px; }
.nm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.nm-switch__track {
    width: 46px; height: 26px; border-radius: var(--nm-r-pill); background: #ccd2d8;
    position: relative; transition: background .18s ease; flex: 0 0 auto;
}

.nm-switch__track::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; transition: transform .18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

.nm-switch input:checked + .nm-switch__track { background: var(--nm-green); }
.nm-switch input:checked + .nm-switch__track::after { transform: translateX(20px); }
.nm-switch input:focus-visible + .nm-switch__track { box-shadow: 0 0 0 3px rgba(27, 138, 75, .25); }
.nm-switch__label { font-size: .88rem; font-weight: 500; }

/* ---------------------------------------------------------------- panels */

.nm-panel {
    background: #fff; border: 1px solid var(--nm-line); border-radius: var(--nm-r-lg);
    padding: 16px 18px; margin-bottom: 14px;
}

.nm-panel--flat { box-shadow: none; background: var(--nm-bg-alt); border-color: transparent; }
.nm-panel h2, .nm-panel h3 { font-size: 1.05rem; margin-bottom: 10px; }

.nm-rows { width: 100%; border-collapse: collapse; font-size: .88rem; }
.nm-rows td { padding: 9px 0; border-bottom: 1px solid var(--nm-line); vertical-align: top; }
.nm-rows tr:last-child td { border-bottom: 0; }
.nm-rows td:first-child { color: var(--nm-muted); }
.nm-rows td:last-child { text-align: right; font-weight: 600; }
.nm-rows tr.is-total td { border-top: 2px solid var(--nm-ink); font-size: .94rem; font-weight: 800; }

.nm-alert { border-radius: var(--nm-r); padding: 11px 14px; font-size: .88rem; margin-bottom: 14px; line-height: 1.5; }
.nm-alert--ok { background: var(--nm-green-soft); color: #14603a; }
.nm-alert--bad { background: #fdeceb; color: #8e2a20; }
.nm-alert--warn { background: #fdf3e0; color: #7a5b06; }
.nm-alert--info { background: #e8f1f5; color: #1c4a5c; }

.nm-empty {
    border: 1px dashed var(--nm-line-strong); border-radius: var(--nm-r-lg);
    padding: 34px 20px; text-align: center; color: var(--nm-muted);
}

.nm-empty h3 { color: var(--nm-ink); margin-bottom: 8px; font-size: 1.05rem; }

.nm-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }

.nm-chip {
    display: inline-block; background: var(--nm-bg-alt); border: 1px solid var(--nm-line);
    border-radius: var(--nm-r-pill); padding: 7px 13px; font-size: .88rem; font-weight: 500;
}

.nm-chip:hover { border-color: var(--nm-green); color: var(--nm-green-dark); }

.nm-stars { color: #e8a020; letter-spacing: 1px; }
.nm-muted { color: var(--nm-muted); }
.nm-small { font-size: .88rem; }
.nm-strong { font-weight: 700; }
.nm-center { text-align: center; }

.nm-score {
    display: inline-flex; align-items: baseline; gap: 8px;
    background: var(--nm-green-soft); color: var(--nm-teal); border-radius: var(--nm-r);
    padding: 8px 14px; font-weight: 800; font-size: 1.05rem;
}

.nm-score small { font-weight: 500; font-size: .82rem; color: var(--nm-ink-soft); }

/* ------------------------------------------------------------- filter panel */

/*
 * A <details> rather than a JS drawer. On a phone the filters collapse to one
 * line and stay out of the way of the results; on a laptop they are forced open
 * as a sidebar. No script, so it works before anything has loaded.
 */
.nm-filters { border: 1px solid var(--nm-line); border-radius: var(--nm-r-lg); background: #fff; }

.nm-filters__toggle {
    display: flex; align-items: center; gap: 9px; padding: 13px 16px;
    font-weight: 600; font-size: .94rem; cursor: pointer; list-style: none;
}

.nm-filters__toggle::-webkit-details-marker { display: none; }
.nm-filters__toggle::after { content: '\203A'; margin-left: auto; font-size: 1.35rem; color: var(--nm-muted); transform: rotate(90deg); }
.nm-filters[open] .nm-filters__toggle::after { transform: rotate(-90deg); }
.nm-filters[open] .nm-filters__toggle { border-bottom: 1px solid var(--nm-line); }
.nm-filters__body { padding: 16px; }

/*
 * Inside a 272px sidebar, two selects to a row leaves ~120px each — enough to
 * render "Any propert…" and nothing more. Full-width controls read better and
 * cost one scroll, which a filter panel can afford.
 */
.nm-split__side .nm-filters__body .nm-grid2 { grid-template-columns: 1fr; }

.nm-resulthead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 0 14px; flex-wrap: wrap;
}

.nm-resulthead__count { font-size: .94rem; }
.nm-field--sm { width: auto; padding: 9px 36px 9px 12px; font-size: .88rem; border-radius: var(--nm-r-sm); }

@media (min-width: 992px) {
    /* Always open on a wide screen, so the summary stops being a control and
       becomes the panel's heading — with the chevron and the pointer gone,
       because nothing happens when you click it. */
    .nm-filters__body { display: block !important; }
    .nm-filters .nm-filters__toggle { pointer-events: none; cursor: default; }
    .nm-filters .nm-filters__toggle::after { display: none; }
    .nm-filters:not([open]) .nm-filters__body { display: none !important; }

    .nm-filters .nm-filters__toggle {
        font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
        color: var(--nm-muted); padding-bottom: 0; border-bottom: 0;
    }

    .nm-filters[open] .nm-filters__toggle { border-bottom: 0; }
    .nm-split__side .nm-filters__body { padding-top: 12px; }
}

/* A light variant of the segmented switch, for tabs on a white page. */
.nm-segment--light { background: var(--nm-bg-alt); margin-bottom: 22px; }
.nm-segment--light a { color: var(--nm-muted); }
.nm-segment--light a.is-active { background: #fff; color: var(--nm-teal); box-shadow: 0 1px 3px rgba(16, 21, 26, .12); }
.nm-segment--light a:not(.is-active):hover { color: var(--nm-ink); background: rgba(16, 21, 26, .04); }

.nm-empty .nm-btn { width: auto; margin-top: 16px; }

/* Visually hidden, but read out. The dot alone tells a screen reader nothing. */
.nm-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- account hub */

.nm-account {
    display: flex; align-items: center; gap: 16px; padding: 4px 0 22px;
}

.nm-account__avatar {
    width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto;
    background: var(--nm-green-soft); color: var(--nm-teal);
    display: flex; align-items: center; justify-content: center;
}

.nm-rowlinks {
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-lg);
    overflow: hidden; margin-bottom: 22px; background: #fff;
}

.nm-rowlink {
    display: flex; align-items: center; gap: 14px; padding: 15px 18px;
    border-bottom: 1px solid var(--nm-line); color: var(--nm-ink);
}

.nm-rowlink:last-child { border-bottom: 0; }
.nm-rowlink:hover { background: var(--nm-bg-alt); }

.nm-rowlink__icon {
    width: 40px; height: 40px; border-radius: var(--nm-r); flex: 0 0 auto;
    background: var(--nm-green-soft); color: var(--nm-teal);
    display: flex; align-items: center; justify-content: center;
}

.nm-rowlink__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nm-rowlink__label { font-weight: 600; }
.nm-rowlink__hint { font-size: .82rem; color: var(--nm-muted); }

.nm-rowlink__count {
    flex: 0 0 auto; min-width: 24px; text-align: center;
    background: var(--nm-bg-alt); color: var(--nm-ink-soft);
    font-size: .82rem; font-weight: 700; padding: 3px 9px; border-radius: var(--nm-r-pill);
}

/* Unread messages and reviews awaiting an answer are the two things worth
   colouring: everything else is a count, these are a prompt. */
.nm-rowlink__count.is-alert { background: var(--nm-green); color: #fff; }

/* A dot on the tab bar, so an unread message is visible from any screen. */
.nm-tabbar a { position: relative; }

.nm-tabbar__dot {
    position: absolute; top: 7px; left: 50%; margin-left: 5px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--nm-green); border: 2px solid #fff;
}

/* ----------------------------------------------------------- star selector */

.nm-stars-input { display: flex; gap: 8px; }

.nm-stars-input label {
    flex: 1; text-align: center; cursor: pointer;
    border: 1.5px solid var(--nm-line-strong); border-radius: var(--nm-r);
    padding: 10px 4px; transition: border-color .12s ease, background .12s ease;
}

.nm-stars-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.nm-stars-input span { display: block; font-weight: 700; font-size: 1.05rem; }
.nm-stars-input small { display: block; font-size: .75rem; color: var(--nm-muted); line-height: 1.25; }
.nm-stars-input label:hover { border-color: var(--nm-green); }

.nm-stars-input input:checked + span,
.nm-stars-input input:checked ~ small { color: var(--nm-green-dark); }

.nm-stars-input label:has(input:checked) {
    border-color: var(--nm-green); background: var(--nm-green-soft);
}

.nm-stars-input label:has(input:focus-visible) { outline: 2px solid var(--nm-green); outline-offset: 2px; }

/* ------------------------------------------------------------------ threads */

.nm-thread {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 15px 16px; margin-bottom: 10px;
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-lg);
    background: #fff; color: var(--nm-ink);
}

.nm-thread:hover { box-shadow: var(--nm-shadow); }
.nm-thread.is-unread { border-color: var(--nm-green); background: var(--nm-green-soft); }

.nm-thread__avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
    background: var(--nm-teal); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.05rem;
}

.nm-thread__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nm-thread__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.nm-thread__subject { font-size: .88rem; color: var(--nm-muted); }

.nm-thread__preview {
    font-size: .88rem; color: var(--nm-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nm-thread__count {
    flex: 0 0 auto; background: var(--nm-green); color: #fff;
    font-size: .75rem; font-weight: 700; min-width: 22px; text-align: center;
    padding: 2px 8px; border-radius: var(--nm-r-pill);
}

.nm-thread-subject {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--nm-bg-alt); border-radius: var(--nm-r-lg);
    margin-bottom: 18px; color: var(--nm-ink);
}

.nm-thread-subject__body { flex: 1; min-width: 0; }
.nm-thread-subject__title { display: block; font-size: .88rem; color: var(--nm-ink-soft); margin-top: 2px; }

/* --------------------------------------------------------------------- chat */

.nm-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.nm-chat__system {
    align-self: center; text-align: center;
    font-size: .82rem; color: var(--nm-muted);
    background: var(--nm-bg-alt); padding: 6px 14px; border-radius: var(--nm-r-pill);
}

.nm-bubble {
    max-width: 78%; align-self: flex-start;
    background: var(--nm-bg-alt); border-radius: var(--nm-r-lg);
    border-bottom-left-radius: 4px; padding: 11px 14px;
}

.nm-bubble--mine {
    align-self: flex-end; background: var(--nm-green-soft);
    border-bottom-left-radius: var(--nm-r-lg); border-bottom-right-radius: 4px;
}

.nm-bubble__body { white-space: pre-line; }
.nm-bubble__meta { font-size: .75rem; color: var(--nm-muted); margin-top: 4px; }

.nm-composer { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.nm-composer .nm-field { flex: 1; min-height: 52px; }
.nm-composer .nm-btn { width: auto; flex: 0 0 auto; padding: 15px 22px; }

/* --------------------------------------------------------- progress + steps */

.nm-meter {
    height: 10px; border-radius: var(--nm-r-pill);
    background: var(--nm-bg-alt); overflow: hidden;
}

.nm-meter__fill { height: 100%; background: var(--nm-green); border-radius: var(--nm-r-pill); }

.nm-meter__legend {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: .88rem; color: var(--nm-muted); margin-top: 8px;
}

.nm-steps { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }

.nm-steps__item {
    display: flex; align-items: center; gap: 12px;
    font-size: .94rem; color: var(--nm-muted);
    padding: 7px 0; position: relative;
}

.nm-steps__dot {
    width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
    background: #fff; border: 2px solid var(--nm-line-strong);
}

/* The connector is drawn from each dot upward, so it never dangles below the
   last step. */
.nm-steps__item:not(:first-child) .nm-steps__dot::before {
    content: ''; position: absolute; left: 5px; top: -9px; height: 16px;
    width: 2px; background: var(--nm-line-strong);
}

.nm-steps__item.is-done { color: var(--nm-ink-soft); }
.nm-steps__item.is-done .nm-steps__dot { background: var(--nm-green); border-color: var(--nm-green); }
.nm-steps__item.is-done .nm-steps__dot::before { background: var(--nm-green); }

.nm-steps__item.is-now { color: var(--nm-ink); font-weight: 600; }

.nm-steps__item.is-now .nm-steps__dot {
    background: var(--nm-green); border-color: var(--nm-green);
    box-shadow: 0 0 0 4px var(--nm-green-soft);
}

/* ---------------------------------------------------------------- documents */

.nm-doc {
    border: 1px solid var(--nm-line); border-radius: var(--nm-r-lg);
    margin-bottom: 10px; background: #fff;
}

.nm-doc__head {
    display: flex; align-items: center; gap: 12px; justify-content: space-between;
    padding: 14px 16px; cursor: pointer; list-style: none;
}

.nm-doc__head::-webkit-details-marker { display: none; }
.nm-doc__name { font-weight: 600; }
.nm-doc[open] .nm-doc__head { border-bottom: 1px solid var(--nm-line); }
.nm-doc__body { padding: 14px 16px; }

/* ------------------------------------------------------------ status chips */

/*
 * The tone is decided once, in statusTone(), and rendered once, in
 * partials/status.blade.php. Colour encodes meaning and nothing else:
 * green worked, amber is waiting on a person, red needs attention now,
 * grey ended without incident.
 */
.nm-status {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.nm-status--good { background: #e6f4ec; color: #14713c; }
.nm-status--warn { background: #fbf2e2; color: #8a6410; }
.nm-status--bad { background: #fbeceb; color: #a8281c; }
.nm-status--neutral { background: #eef1f3; color: #5b656e; }
.nm-status--info { background: #e8f1f5; color: #1c5468; }

/* An unmapped status is a gap in the tone list, and it should look like one
   rather than blending in with "paused". */
.nm-status--unknown {
    background: repeating-linear-gradient(45deg, #f3f0e6, #f3f0e6 5px, #ece7d6 5px, #ece7d6 10px);
    color: #6b5b1f;
    border: 1px dashed #c9b978;
}

/* ------------------------------------------------------------- phone scale */

/*
 * One step down for the whole sheet on a phone: everything here is in rem, so
 * shrinking the root shrinks the lot in proportion and the scale's ratios
 * survive. The targeted rules below are the few places proportion is not
 * enough.
 */
@media (max-width: 600px) {
    html { font-size: 15px; }

    .nm-hero { padding: 22px 0 26px; }
    .nm-hero h1 { font-size: 1.7rem; margin-bottom: 16px; }

    .nm-detail { padding-top: 16px; }
    .nm-detail .nm-price { font-size: 1.5rem; }
    .nm-detail h1 { font-size: 1.12rem; }

    .nm-facts { gap: 10px; margin: 16px 0 4px; }
    .nm-facts__item { max-width: none; }
    .nm-facts__icon { width: 42px; height: 42px; }
    .nm-facts__icon svg { width: 20px; height: 20px; }
    .nm-facts__label { font-size: .75rem; }

    /* Two buttons share ~330px here. At the desktop padding "Contact Agent"
       breaks into two lines and the pair reads as four stacked words. */
    .nm-actions { gap: 8px; margin: 16px 0 8px; }
    .nm-actions + .nm-actions { margin-top: 0; }
    .nm-actions .nm-btn { padding: 12px 8px; font-size: .82rem; gap: 6px; }
    .nm-actions .nm-btn svg { width: 15px; height: 15px; }

    .nm-section { padding: 18px 0; }
    .nm-section__title { font-size: 1.18rem; margin-bottom: 10px; }

    .nm-panel { padding: 14px; }
    .nm-card__media { width: 92px; min-width: 92px; }
    .nm-price { font-size: 1.05rem; }

    .nm-pagehead { padding: 12px 0 6px; margin-bottom: 14px; }
    .nm-wrap { padding: 0 16px; }
}

/* ------------------------------------------------------------- bottom bar */

/*
 * Phone only. It exists because a top nav on a five-inch screen is a nav
 * nobody uses; on a laptop the top nav is right there and a bar pinned to the
 * bottom of a 1400px window is just a strip of chrome in the way.
 *
 * The breakpoint is the same 900px at which .nm-topbar__links appears, so there
 * is never a width with neither navigation, or with both.
 */
.nm-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--nm-line);
    display: flex; padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 900px) { .nm-tabbar { display: none; } }

.nm-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 11px 4px 10px; color: var(--nm-ink-soft); font-size: .75rem; font-weight: 500;
}

.nm-tabbar a.is-active { color: var(--nm-green); font-weight: 600; }

/* ----------------------------------------------------------------- layout */

.nm-split { display: block; }
.nm-split__side { margin-bottom: 20px; }

@media (min-width: 992px) {
    .nm-split { display: grid; grid-template-columns: 272px 1fr; gap: 24px; align-items: start; }
    .nm-split--right { grid-template-columns: 1fr 340px; }
    .nm-split__side { position: sticky; top: 20px; margin-bottom: 0; }
    .nm-cards--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .nm-cards--grid .nm-card { margin-bottom: 0; }
}

.nm-pager { display: flex; justify-content: center; margin: 26px 0 6px; }
.nm-pager .pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }

.nm-pager .page-link {
    display: block; padding: 9px 14px; border: 1px solid var(--nm-line-strong);
    border-radius: var(--nm-r-sm); color: var(--nm-ink); font-size: .94rem;
}

.nm-pager .active .page-link { background: var(--nm-green); border-color: var(--nm-green); color: #fff; }
.nm-pager .disabled .page-link { color: var(--nm-line-strong); }
.nm-pager svg { display: none; }

/* -------------------------------------------------------------------- footer */

/*
 * Deep teal rather than a generic dark navy: it is the same surface as the
 * header, so the page closes with the colour it opened with instead of landing
 * in somebody else's design system.
 *
 * The "popular places" column is not filler — state and LGA pages are the
 * indexable surface of a Nigerian property marketplace, and this is how they
 * get linked.
 */
.nm-footer {
    background: var(--nm-teal-deep);
    color: rgba(255, 255, 255, .74);
    margin-top: 56px;
    padding: 52px 0 0;
    font-size: .94rem;
}

.nm-footer a { color: rgba(255, 255, 255, .74); }
.nm-footer a:hover { color: #fff; }

.nm-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    padding-bottom: 40px;
}

@media (min-width: 620px) { .nm-footer__grid { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 980px) {
    .nm-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: 40px; }
}

.nm-footer__about { max-width: 42ch; line-height: 1.62; margin: 16px 0 20px; }

.nm-footer .nm-brand__mark { background: var(--nm-green); color: #fff; }
.nm-footer .nm-brand { margin-bottom: 2px; }

.nm-footer h3 {
    font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 18px;
    padding-bottom: 10px; position: relative;
}

/* A short rule under each heading, the width of the word rather than the
   column, so it reads as an underline and not a divider. */
.nm-footer h3::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 34px; height: 2px; background: var(--nm-green);
}

.nm-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }

.nm-footer__contact { display: flex; flex-direction: column; gap: 14px; }
.nm-footer__contact li { display: flex; gap: 11px; align-items: flex-start; list-style: none; }
.nm-footer__contact svg { flex: 0 0 auto; margin-top: 2px; color: var(--nm-green); }

.nm-socials { display: flex; gap: 10px; }

.nm-socials a {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255, 255, 255, .09);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .8);
    transition: background .15s ease, color .15s ease;
}

.nm-socials a:hover { background: var(--nm-green); color: #fff; }

/* The safety line belongs in the chrome of a marketplace where the commonest
   loss is a fee paid before a viewing. It is not a marketing strapline. */
.nm-footer__warning {
    display: flex; gap: 12px; align-items: flex-start;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 18px 0; margin-bottom: 4px;
    color: rgba(255, 255, 255, .84); font-size: .88rem;
}

.nm-footer__warning svg { flex: 0 0 auto; color: #f0b429; margin-top: 1px; }

.nm-footer__bar {
    display: flex; flex-wrap: wrap; gap: 12px 26px;
    justify-content: space-between; align-items: center;
    padding: 20px 0 26px;
    font-size: .88rem; color: rgba(255, 255, 255, .6);
}

.nm-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 22px; }

/* Clear of the phone tab bar, which is fixed over the bottom of the page. */
@media (max-width: 899px) { .nm-footer__bar { padding-bottom: 34px; } }