/* =============================================================================
   stay-host-journey.css   (wwwroot/css/stay-host-journey.css)
   -----------------------------------------------------------------------------
   The "Become a host" registration journey — a premium, on-theme multi-step
   flow that mounts INSIDE the Stay tab (#tab-stay). Consistent with the Stay
   brand: charcoal text, sunset orange #F58220/#F89622, sky #56C4F8, cloud
   greys, generous whitespace, soft shadows. Namespaced .shj-*.

   Steps: intro → details → address (Street View) → photos (editor) →
          video (sources) → commission → review/submit → done.
   ============================================================================= */

.shj-root {
    --shj-orange: #F58220;
    --shj-orange-2: #F89622;
    --shj-sky: #56C4F8;
    --shj-ink: #0E0E11;
    --shj-ink-2: #42454D;
    --shj-muted: #6C757D;
    --shj-line: rgba(14, 14, 17, 0.10);
    --shj-cloud: #F6F7F9;
    /* ── Width: match the shared Stay envelope (tokens defined on #tab-stay in
       stay.css) so the host journey spans the SAME width as the landing search
       strip and the List/Sell wrapper. We FILL the tab and balance the panel's
       90px left gutter with a mirrored right gutter — identical mechanic to
       .stay-landing — rather than centering a narrow 1140px column. The actual
       width cap (for ultra-wide screens) lives on .shj-card below, exactly as the
       landing caps its hero/search children. */
    width: 100%;
    margin: 0;
    /* Fill the journey mount (which overlays the Stay tab as position:absolute;
       inset:0 — a definite, viewport-bounded height). As a flex column whose
       only child (.shj-card) caps to this height, the card head + foot stay put
       and only the body scrolls: the whole flow fits one viewport on any frame,
       no hardcoded offsets. */
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Left gutter matches the Stay landing; right gutter reduced to a small fixed
       value so the card stretches much further right toward the panel edge. */
    padding: 10px 16px 14px var(--stay-gutter-l, 24px);
    color: var(--shj-ink);
    /* Match the site font used across the platform (and the private-seller
       journey): Outfit. Previously this overrode to DM Sans, which made the
       Stay host flow read in a different typeface to the rest of the site. */
    font-family: 'Outfit', 'DM Sans', system-ui, sans-serif;
}

/* ── Progress rail — dotted (mirrors the private-seller journey) ─────────────
   A row of dots: upcoming = small muted dot, completed = filled green dot,
   current = an elongated orange pill. Purely visual; the per-step eyebrow names
   the current step. */
.shj-rail {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px;
    flex-wrap: wrap;
}

.shj-rail-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(14, 14, 17, 0.14); /* upcoming */
    flex: 0 0 auto;
    transition: width 240ms cubic-bezier(.22, 1, .36, 1), background 200ms ease, box-shadow 200ms ease;
}

    .shj-rail-dot.is-done {
        background: #10A65A; /* completed */
    }

    .shj-rail-dot.is-active {
        width: 30px; /* current → elongated pill */
        background: linear-gradient(135deg, var(--shj-orange), var(--shj-orange-2));
        box-shadow: 0 3px 10px rgba(245, 130, 32, 0.34);
    }

@media (max-width: 720px) {
    .shj-rail {
        gap: 6px;
    }

    .shj-rail-dot {
        width: 8px;
        height: 8px;
    }

        .shj-rail-dot.is-active {
            width: 26px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .shj-rail-dot {
        transition: none;
    }
}

/* ── Card / panel ───────────────────────────────────────────────────────────
   A flex column that fills a CONSISTENT height on every step. The head (rail +
   title) and the foot (Back / Continue) are flex-none — they stay put — while the
   body is the only scrolling region. Every step renders at the same card height
   so the flow never jumps between steps (e.g. "Pin your property" used to be much
   shorter than "Your details"); the card is held to ~90% of the tab so its footer
   sits ~10% off the bottom and never collides with the floating chat assistant. */
.shj-card {
    /* Width cap for the shared Stay envelope — mirrors how the landing caps its
       hero/search. On normal desktops the padded root content box is narrower
       than the cap, so the card simply fills it (matching the List wrapper); the
       cap + centering only engage on ultra-wide screens. */
    width: 100%;
    max-width: var(--stay-wrap-max, 1880px);
    align-self: center;
    /* Slightly translucent so the beach scene reads faintly behind the form.
       The blur keeps text crisp and legible over the busy illustration. */
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
    backdrop-filter: blur(12px) saturate(115%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(14,14,17,0.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* Raised from 90% → 96% so the intro step content (two-column hero +
       bullet points + footer) fits in one viewport without a scrollbar. */
    max-height: 96%;
}

/* Sticky header — dotted rail + the current step's eyebrow/title. */
.shj-card-head {
    flex: 0 0 auto;
    padding: 10px 28px 8px;
    background: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid var(--shj-line);
}

    .shj-card-head .shj-head-text .shj-eyebrow {
        margin: 0 0 3px;
    }

    .shj-card-head .shj-head-text .shj-title {
        margin: 0;
    }

    /* Intro/done carry their own heading — show the rail only up here. */
    .shj-card-head.is-bare {
        border-bottom: none;
        padding-bottom: 4px;
    }

        .shj-card-head.is-bare .shj-head-text {
            display: none;
        }

/* Scrollable body — the ONLY region that moves. */
.shj-card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

    /* The per-step eyebrow/title are mirrored into the sticky head, so hide the
   in-body copies for every form step. The intro (hero) and done (success card)
   keep their own headings. */
    .shj-card-body .shj-step:not([data-step="intro"]):not([data-step="done"]) .shj-eyebrow,
    .shj-card-body .shj-step:not([data-step="intro"]):not([data-step="done"]) .shj-title {
        display: none;
    }

.shj-step {
    display: none;
    padding: 10px 28px 14px;
    animation: shjFade 240ms ease;
}

    .shj-step.is-active {
        display: block;
    }

@keyframes shjFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shj-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shj-orange);
    margin: 0 0 6px;
}

.shj-title {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--shj-ink);
    margin: 0 0 6px;
    line-height: 1.18;
}

.shj-lede {
    font-size: 0.86rem;
    color: var(--shj-ink-2);
    line-height: 1.5;
    margin: 0 0 10px;
    max-width: 620px;
}

/* ── Intro / hero step ──────────────────────────────────────────────────── */
.shj-intro-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
    align-items: center;
}

.shj-intro-points {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

    .shj-intro-points li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 0.86rem;
        color: var(--shj-ink-2);
    }

    .shj-intro-points i {
        color: var(--shj-orange);
        font-size: 1.05rem;
        margin-top: 1px;
    }

.shj-intro-art {
    border-radius: 16px;
    overflow: hidden;
    background: #1A1820;
    min-height: 140px;
    position: relative;
}

@media (max-width: 720px) {
    .shj-intro-hero {
        grid-template-columns: 1fr;
    }

    .shj-intro-art {
        min-height: 150px;
    }
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.shj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Tighter gutters keep the whole details step inside one viewport. */
    gap: 11px 18px;
    /* Align items to the top so each field's label row starts at the same y;
       combined with the fixed-height label row below, every input across a row
       lines up horizontally AND vertically. */
    align-items: start;
}

.shj-grid--1 {
    grid-template-columns: 1fr;
}

/* The wider card holds 3 columns much further down before stepping to 2, then 1
   — the "grid grows with the wrapper" behaviour. Below these the journey behaves
   like a native mobile form (single, thumb-reachable column). */
@media (max-width: 900px) {
    .shj-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .shj-grid {
        grid-template-columns: 1fr;
    }
}

.shj-field {
    display: grid;
    /* Three fixed rows: label · control · hint/error. The label row has a
       consistent min-height so fields WITH and WITHOUT hints still align their
       input boxes on the same baseline across the row. */
    grid-template-rows: auto 1fr auto;
    gap: 4px;
    align-content: start;
}

.shj-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--shj-ink);
}

    .shj-label .shj-req {
        color: var(--shj-orange);
    }

.shj-hint {
    font-size: 0.76rem;
    color: var(--shj-muted);
}

.shj-input, .shj-select, .shj-textarea {
    width: 100%;
    border: 1.5px solid var(--shj-line);
    border-radius: 11px;
    padding: 8px 12px;
    font-size: 0.9rem;
    color: var(--shj-ink);
    background: #FBFBFC;
    font-family: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.shj-textarea {
    resize: vertical;
    min-height: 58px;
}

    .shj-input:focus, .shj-select:focus, .shj-textarea:focus {
        outline: none;
        border-color: var(--shj-orange);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(245,130,32,0.12);
    }

.shj-field.is-invalid .shj-input,
.shj-field.is-invalid .shj-select {
    border-color: #E0524A;
    box-shadow: 0 0 0 4px rgba(224,82,74,0.12);
}

.shj-field-error {
    font-size: 0.74rem;
    color: #C0392B;
    font-weight: 600;
}

/* ── Input with a descriptive left icon ─────────────────────────────────────
   The control is wrapped so a Bootstrap-icon glyph can sit inside the field on
   the left (mirrors the private-seller core-identity inputs). The wrapper is a
   flex box so the control still stretches to fill the field's control row,
   keeping input boxes aligned across a grid of fields. */
.shj-input-wrap {
    position: relative;
    display: flex;
    min-width: 0;
}

    .shj-input-wrap > .shj-input,
    .shj-input-wrap > .shj-select,
    .shj-input-wrap > .shj-textarea {
        flex: 1 1 auto;
        min-width: 0;
    }

.shj-input-ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--shj-muted);
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
    transition: color 140ms ease;
}

/* Reserve room for the glyph. */
.shj-input--icon {
    padding-left: 38px;
}

/* Tint the glyph to brand on focus, and to the error colour when invalid. */
.shj-input-wrap:focus-within .shj-input-ico {
    color: var(--shj-orange);
}

.shj-field.is-invalid .shj-input-ico {
    color: #E0524A;
}

/* Textarea: pin the glyph to the top line, not the vertical centre. */
.shj-input-wrap--textarea .shj-input-ico {
    top: 12px;
    transform: none;
}

/* ── Locked / auto-filled select (Province) ─────────────────────────────────
   Province is derived from the chosen town, so it's read-only: the user can't
   open or change it. We strip the native dropdown arrow, swap in a lock glyph,
   and give it a faintly distinct fill so it reads as "auto-filled" rather than
   "disabled/broken" — the text stays full-strength and legible. The value is
   carried in state, so locking the control never affects submission. */
.shj-select--locked {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: none;
    cursor: default;
    background: #F4F5F7;
    color: var(--shj-ink);
    /* room for the lock glyph on the right */
    padding-right: 36px;
}

.shj-lock-ico {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--shj-muted);
    font-size: 0.85rem;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

/* Read-only / auto-filled text input (e.g. company registration number).
   Same "auto-filled, not broken" treatment as the locked select: full-strength
   text, a faint fill, a lock glyph, and no caret/interaction. */
.shj-input--locked {
    background: #F4F5F7;
    color: var(--shj-ink);
    cursor: default;
    padding-right: 36px;
}

    .shj-input--locked:focus {
        outline: none;
        border-color: var(--shj-line);
        box-shadow: none;
        background: #F4F5F7;
    }

/* Tiny inline spinner shown in the business-name field while looking up. */
.shj-ac-spin {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(14,14,17,0.15);
    border-top-color: var(--shj-orange);
    animation: shjSpin 0.7s linear infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes shjSpin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* ── Company status indicator (robot + register status) ─────────────────────
   A read-only chip the user can't edit; colour + the robot's expression track
   the normalised status bucket set on data-state. */
.shj-cstatus {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1.5px solid var(--shj-line);
    border-radius: 11px;
    padding: 8px 12px;
    background: #FBFBFC;
    min-height: 38px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--shj-muted);
}

.shj-cstatus-bot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(14,14,17,0.06);
    color: var(--shj-muted);
    font-size: 0.95rem;
    flex: 0 0 auto;
}

.shj-cstatus-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Active / trading — green */
.shj-cstatus[data-state="active"] {
    border-color: #B7E3C6;
    background: #EAF8EF;
    color: #1E7D45;
}

    .shj-cstatus[data-state="active"] .shj-cstatus-bot {
        background: #1E7D45;
        color: #fff;
    }

/* Caution — reserved / forming / business rescue — amber */
.shj-cstatus[data-state="caution"] {
    border-color: #F6DFAE;
    background: #FFF7E6;
    color: #B5780C;
}

    .shj-cstatus[data-state="caution"] .shj-cstatus-bot {
        background: #E8A317;
        color: #fff;
    }

/* Inactive — deregistered / liquidated / dissolved — red */
.shj-cstatus[data-state="inactive"] {
    border-color: #F3C9C5;
    background: #FDEDEB;
    color: #C0392B;
}

    .shj-cstatus[data-state="inactive"] .shj-cstatus-bot {
        background: #C0392B;
        color: #fff;
    }

/* Checking — transient, while the detail call is in flight (gentle pulse). */
.shj-cstatus[data-state="checking"] {
    border-color: var(--shj-line);
    background: #FBFBFC;
    color: var(--shj-muted);
}

    .shj-cstatus[data-state="checking"] .shj-cstatus-bot {
        animation: shjPulse 1s ease-in-out infinite;
    }

@keyframes shjPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

/* ── Autocomplete status messages (searching / none / error) ────────────────
   Shown inside the results panel so the user always sees what's happening. */
.shj-ac-msg {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--shj-muted);
}

.shj-ac-msg-ico {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--shj-muted);
}

.shj-ac-msg--empty .shj-ac-msg-ico {
    color: #B5780C;
}

.shj-ac-msg--error {
    color: #C0392B;
}

    .shj-ac-msg--error .shj-ac-msg-ico {
        color: #C0392B;
    }

/* "Matched" success affordance on the business-name hint. */
.shj-hint--ok {
    color: #1E7D45;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* The video URL row is a flex row (input + Preview button) — make the wrapped
   input grow exactly as the bare input used to. */
.shj-video-input-row .shj-input-wrap {
    flex: 1;
}

/* Segmented toggle (e.g. individual / business) */
.shj-seg {
    display: inline-flex;
    /* In a grid/flex parent the default justify would stretch this full-width,
       leaving a wide dead grey band beside the buttons that users can mis-click.
       Pin it to its content so the grey pill wraps the tabs only. */
    justify-self: start;
    align-self: start;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    background: var(--shj-cloud);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

/* "I'm hosting as" label sits on the SAME row as the individual/business tabs,
   keeping the details step compact enough to read in a single viewport. */
.shj-hosting-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.shj-hosting-label {
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .shj-hosting-row {
        gap: 8px;
    }
}

.shj-seg-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--shj-muted);
    transition: all 140ms ease;
}

    .shj-seg-btn.is-active {
        background: #fff;
        color: var(--shj-orange);
        box-shadow: 0 2px 8px rgba(14,14,17,0.08);
    }

/* ── Street View address ────────────────────────────────────────────────── */
.shj-addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 760px) {
    .shj-addr-grid {
        grid-template-columns: 1fr;
    }
}

/* The address ("Pin your property") step fills the consistent card height so the
   Street View panel grows to match the taller steps, instead of leaving the card
   half-empty / shorter than "Your details". The left column stays top-aligned;
   the Street View stretches to fill its cell. */
.shj-card-body .shj-step.is-active[data-step="address"] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.shj-step[data-step="address"] .shj-addr-grid {
    flex: 1 1 auto;
    align-items: stretch;
    grid-auto-rows: minmax(240px, 1fr);
    min-height: 0;
}

    .shj-step[data-step="address"] .shj-addr-grid > div:first-child {
        align-self: start; /* form fields hug the top of the tall cell */
    }

.shj-step[data-step="address"] .shj-streetview {
    height: 100%;
}

.shj-addr-search {
    position: relative;
}

.shj-addr-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--shj-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(14,14,17,0.14);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

    .shj-addr-results[hidden] {
        display: none;
    }

.shj-addr-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 10px 14px;
    border-bottom: 1px solid var(--shj-line);
}

    .shj-addr-result > .bi {
        color: var(--shj-orange);
        font-size: 1rem;
        flex: 0 0 auto;
    }

    .shj-addr-result:last-child {
        border-bottom: none;
    }

    .shj-addr-result:hover {
        background: #FFF4E9;
    }

.shj-addr-result--muted {
    cursor: default;
    color: var(--shj-muted);
    gap: 8px;
    font-size: 0.84rem;
}

    .shj-addr-result--muted:hover {
        background: transparent;
    }

    .shj-addr-result--muted > .bi {
        color: var(--shj-muted);
    }

.shj-addr-result-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.shj-addr-result-main {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--shj-ink);
}

.shj-addr-result-sec {
    font-size: 0.76rem;
    color: var(--shj-muted);
}

/* ── City / town autocomplete wrapper ───────────────────────────────────────
   Anchors the results dropdown directly under the input (not under the hint
   row), reusing the .shj-addr-results styling. */
.shj-ac {
    position: relative;
}

/* ── Phone: dial code fused to the number input ─────────────────────────────
   The wrapper carries the border so the <select> and <input> read as one
   control; the dial segment sits on the left with a hairline divider. */
.shj-input-wrap--phone {
    border: 1.5px solid var(--shj-line);
    border-radius: 11px;
    background: #FBFBFC;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

    .shj-input-wrap--phone:focus-within {
        border-color: var(--shj-orange);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(245,130,32,0.12);
    }

/* Country picker — a button that opens a searchable popup. */
.shj-dial {
    position: relative;
    flex: 0 0 auto;
    display: flex;
}

.shj-dial-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    border-right: 1px solid var(--shj-line);
    background: #F2F3F5;
    border-radius: 10px 0 0 10px;
    padding: 0 9px;
    height: 100%;
    min-height: 36px;
    cursor: pointer;
    font-family: inherit;
}

    .shj-dial-btn:hover {
        background: #ECEEF1;
    }

.shj-dial-iso {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--shj-muted);
    background: #fff;
    border: 1px solid var(--shj-line);
    border-radius: 5px;
    padding: 1px 4px;
}

.shj-dial-code {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--shj-ink);
}

.shj-dial-caret {
    font-size: 0.66rem;
    color: var(--shj-muted);
}

/* Popup */
.shj-dial-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: 290px;
    max-width: 78vw;
    background: #fff;
    border: 1px solid var(--shj-line);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(14,14,17,0.18);
    overflow: hidden;
}

    .shj-dial-pop[hidden] {
        display: none;
    }

.shj-dial-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--shj-line);
    color: var(--shj-muted);
}

.shj-dial-search {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--shj-ink);
    min-width: 0;
}

.shj-dial-list {
    max-height: 244px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.shj-dial-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 9px 12px;
    font-family: inherit;
}

    .shj-dial-opt:hover,
    .shj-dial-opt.is-active {
        background: #FFF4E9;
    }

    .shj-dial-opt.is-selected {
        background: #FFF0DF;
    }

.shj-dial-opt-iso {
    flex: 0 0 auto;
    width: 26px;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--shj-muted);
    background: var(--shj-cloud);
    border-radius: 5px;
    padding: 2px 0;
}

.shj-dial-opt-name {
    flex: 1 1 auto;
    font-size: 0.86rem;
    color: var(--shj-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shj-dial-opt-code {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--shj-muted);
}

.shj-input-wrap--phone .shj-input {
    border: none;
    border-radius: 0 11px 11px 0;
    background: transparent;
    flex: 1 1 auto;
    min-width: 0;
}

    .shj-input-wrap--phone .shj-input:focus {
        outline: none;
        box-shadow: none;
        background: transparent;
    }

/* Invalid state mirrors the standard field treatment. */
.shj-field.is-invalid .shj-input-wrap--phone {
    border-color: #E0524A;
    box-shadow: 0 0 0 4px rgba(224,82,74,0.12);
}

/* ── Continue gate tooltip ──────────────────────────────────────────────────
   Disabled buttons don't emit hover events, so the tooltip lives on a wrapper
   span around the button. It only appears while the step is blocked. */
.shj-foot-next {
    position: relative;
    display: inline-flex;
}

    .shj-foot-next.is-blocked {
        cursor: not-allowed;
    }

.shj-gate-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: max-content;
    max-width: 280px;
    background: #fff;
    border: 1px solid var(--shj-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(14,14,17,0.16);
    padding: 11px 14px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    z-index: 30;
}

    /* Little caret pointing down at the button. */
    .shj-gate-tip::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 28px;
        border: 6px solid transparent;
        border-top-color: #fff;
        filter: drop-shadow(0 1px 0 var(--shj-line));
    }

.shj-foot-next.is-blocked:hover .shj-gate-tip,
.shj-foot-next.is-blocked:focus-within .shj-gate-tip {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.shj-gate-tip-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--shj-ink);
    margin-bottom: 5px;
}

.shj-gate-tip ul {
    margin: 0;
    padding-left: 16px;
}

.shj-gate-tip li {
    font-size: 0.8rem;
    color: var(--shj-ink-2);
    margin: 2px 0;
}

.shj-streetview {
    border: 1px solid var(--shj-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--shj-cloud);
    display: flex;
    flex-direction: column;
}

.shj-streetview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--shj-ink);
    border-bottom: 1px solid var(--shj-line);
    background: #fff;
}

.shj-streetview-status {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--shj-muted);
}

.shj-streetview-stage {
    position: relative;
    min-height: 220px;
    flex: 1 1 auto; /* grow to fill the (now taller) Street View panel */
}

.shj-streetview-pano {
    position: absolute;
    inset: 0;
}

.shj-streetview-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--shj-muted);
    font-size: 0.84rem;
    text-align: center;
    padding: 20px;
}

    .shj-streetview-placeholder i {
        font-size: 1.6rem;
        color: var(--shj-orange);
    }

/* Reveal address toggle */
.shj-reveal {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.shj-reveal-pills {
    display: inline-flex;
    gap: 6px;
}

/* ── Photo grid + editor ────────────────────────────────────────────────── */
.shj-drop {
    border: 2px dashed rgba(245,130,32,0.4);
    border-radius: 16px;
    /* Taller, centred empty state so the "Show it off" step fills the consistent
       card height to match the other steps rather than reading as a short card.
       (When photos are added, the grid flows beneath at natural height.) */
    padding: 30px;
    min-height: clamp(180px, 26vh, 300px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    background: #FFFBF6;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

    .shj-drop.is-over {
        background: #FFF1E0;
        border-color: var(--shj-orange);
    }

    .shj-drop[hidden] {
        display: none;
    }

    .shj-drop i {
        font-size: 2rem;
        color: var(--shj-orange);
    }

.shj-drop-title {
    font-weight: 700;
    margin: 8px 0 2px;
}

.shj-drop-hint {
    font-size: 0.8rem;
    color: var(--shj-muted);
}

/* Compact, dense gallery — square tiles that pack tightly so the whole set
   stays in one viewport until there are genuinely many photos. The first cell
   is the "add" tile so photos visually wrap around the upload affordance. */
.shj-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}

    .shj-photos.is-populated {
        margin-top: 16px;
    }

.shj-photo {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--shj-cloud);
    border: 1px solid var(--shj-line);
    cursor: grab;
}

    .shj-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Compact "add more" tile — same footprint as a photo, sits first in the grid. */
.shj-add-tile {
    aspect-ratio: 1 / 1;
    border: 2px dashed rgba(245,130,32,0.45);
    border-radius: 12px;
    background: #FFFBF6;
    color: var(--shj-orange);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    font-family: inherit;
    transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
}

    .shj-add-tile i {
        font-size: 1.5rem;
    }

.shj-add-tile-label {
    font-size: 0.8rem;
    font-weight: 700;
}

.shj-add-tile-count {
    font-size: 0.66rem;
    color: var(--shj-muted);
    font-weight: 600;
}

.shj-add-tile:hover,
.shj-add-tile.is-over {
    background: #FFF1E0;
    border-color: var(--shj-orange);
}

.shj-add-tile:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.shj-photo-cover-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    background: var(--shj-orange);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* Action bar — top of the tile so the maximise control is always reachable
   (and never overlaps the cover badge at the top-left). Hidden on hover for
   desktop; always visible on touch devices where there is no hover. */
.shj-photo-actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
    padding: 6px;
    opacity: 0;
    background: linear-gradient(rgba(14,14,17,0.5), transparent);
    transition: opacity 140ms ease;
}

.shj-photo:hover .shj-photo-actions,
.shj-photo:focus-within .shj-photo-actions {
    opacity: 1;
}

@media (hover: none) {
    .shj-photo-actions {
        opacity: 1;
        background: linear-gradient(rgba(14,14,17,0.42), transparent);
    }
}

.shj-photo-btn {
    border: none;
    background: rgba(255,255,255,0.94);
    color: var(--shj-ink);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex: 0 0 auto;
}

    .shj-photo-btn:hover {
        background: #fff;
        color: var(--shj-orange);
    }

    .shj-photo-btn.is-on {
        color: var(--shj-orange);
    }

    .shj-photo-btn.danger:hover {
        color: #E0524A;
    }

.shj-photo-edited-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 2;
    background: rgba(14,14,17,0.62);
    color: #fff;
    font-size: 0.66rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.shj-photo.is-dragging {
    opacity: 0.45;
}

.shj-photo.is-drop {
    outline: 2px dashed var(--shj-orange);
    outline-offset: -2px;
}

/* ── Full-size viewer (lightbox) ──────────────────────────────────────────── */
.shj-lightbox-backdrop {
    --shj-orange: #F58220;
    --shj-ink: #0E0E11;
    position: fixed;
    inset: 0;
    z-index: 100040;
    background: rgba(8,8,12,0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Outfit', 'DM Sans', system-ui, sans-serif;
    animation: shjLbFade 160ms ease;
}

@keyframes shjLbFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.shj-lightbox {
    position: relative;
    width: min(1100px, 96vw);
    height: min(86vh, 880px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.shj-lightbox-stage {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

    .shj-lightbox-stage img {
        max-width: 100%;
        max-height: calc(100% - 56px);
        object-fit: contain;
        border-radius: 10px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }

.shj-lightbox-cover {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--shj-orange);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.shj-lightbox-close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.14);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 3;
    transition: background 140ms ease;
}

    .shj-lightbox-close:hover {
        background: rgba(255,255,255,0.28);
    }

.shj-lightbox-nav {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.14);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background 140ms ease;
}

    .shj-lightbox-nav:hover {
        background: rgba(255,255,255,0.30);
    }

.shj-lightbox-bar {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(20,20,26,0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 8px 12px;
    max-width: calc(100% - 110px);
    flex-wrap: wrap;
    justify-content: center;
}

.shj-lightbox-counter {
    color: rgba(255,255,255,0.82);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.shj-lightbox-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .shj-lightbox-actions .shj-btn {
        background: rgba(255,255,255,0.10);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.14);
    }

        .shj-lightbox-actions .shj-btn:hover {
            background: rgba(255,255,255,0.20);
        }

        .shj-lightbox-actions .shj-btn:disabled {
            opacity: 0.5;
            cursor: default;
        }

    .shj-lightbox-actions .shj-btn--danger:hover {
        background: rgba(224,82,74,0.28);
        border-color: rgba(224,82,74,0.5);
    }

body.shj-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .shj-lightbox-nav {
        width: 38px;
        height: 38px;
    }

    .shj-lightbox-bar {
        gap: 8px;
        padding: 8px;
    }

    .shj-lightbox-actions .shj-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

/* Editor overlay */
/* Editor overlay — appended to <body>, OUTSIDE .shj-root, so the scoped
   palette variables must be redeclared here or the primary button (gradient)
   and range accents render with no colour. */
.shj-editor-backdrop {
    --shj-orange: #F58220;
    --shj-orange-2: #F89622;
    --shj-ink: #0E0E11;
    --shj-ink-2: #42454D;
    --shj-muted: #6C757D;
    --shj-line: rgba(14, 14, 17, 0.10);
    --shj-cloud: #F6F7F9;
    font-family: 'Outfit', 'DM Sans', system-ui, sans-serif;
    color: var(--shj-ink);
    position: fixed;
    inset: 0;
    z-index: 100060;
    background: rgba(14,14,17,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .shj-editor-backdrop[hidden] {
        display: none;
    }

.shj-editor {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    max-width: 860px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.shj-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--shj-line);
}

.shj-editor-title {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .shj-editor-title .bi {
        color: var(--shj-orange);
    }

.shj-editor-body {
    display: grid;
    grid-template-columns: 1fr 272px;
    gap: 0;
    min-height: 0;
}

@media (max-width: 680px) {
    .shj-editor-body {
        grid-template-columns: 1fr;
    }
}

.shj-editor-stage {
    position: relative;
    background: #15151A;
    background-image: radial-gradient(circle at 50% 40%, #23232B, #131318);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 14px;
}

    .shj-editor-stage canvas {
        max-width: 100%;
        max-height: 60vh;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        cursor: grab;
        touch-action: none;
    }

        .shj-editor-stage canvas.is-grabbing {
            cursor: grabbing;
        }

.shj-editor-compare {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    background: rgba(255,255,255,0.16);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

    .shj-editor-compare:hover {
        background: rgba(255,255,255,0.26);
    }

.shj-editor-controls {
    padding: 16px 18px;
    display: grid;
    gap: 14px;
    align-content: start;
    border-left: 1px solid var(--shj-line);
    overflow-y: auto;
}

@media (max-width: 680px) {
    .shj-editor-controls {
        border-left: none;
        border-top: 1px solid var(--shj-line);
        max-height: 42vh;
    }
}

.shj-editor-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--shj-cloud);
    padding: 4px;
    border-radius: 10px;
}

.shj-editor-tab {
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--shj-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
}

    .shj-editor-tab.is-active {
        background: #fff;
        color: var(--shj-orange);
        box-shadow: 0 1px 4px rgba(14,14,17,0.08);
    }

.shj-editor-panel {
    display: grid;
    gap: 14px;
}

    .shj-editor-panel[hidden] {
        display: none;
    }

.shj-editor-sublabel {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--shj-muted);
}

.shj-editor-presets,
.shj-editor-aspects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.shj-editor-preset,
.shj-editor-aspect {
    border: 1.5px solid var(--shj-line);
    background: #fff;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--shj-ink-2);
    font-family: inherit;
}

    .shj-editor-preset.is-active,
    .shj-editor-aspect.is-active {
        border-color: var(--shj-orange);
        color: var(--shj-orange);
        background: #FFF4E9;
    }

.shj-editor-rotate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .shj-editor-rotate .shj-btn {
        padding: 9px 10px;
        font-size: 0.8rem;
        justify-content: center;
    }

.shj-slider-row {
    display: grid;
    gap: 4px;
}

    .shj-slider-row label {
        font-size: 0.76rem;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
    }

        .shj-slider-row label span {
            color: var(--shj-muted);
            font-weight: 600;
        }

    .shj-slider-row input[type=range] {
        width: 100%;
        accent-color: var(--shj-orange);
    }

.shj-editor-foot {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-top: 1px solid var(--shj-line);
}

.shj-editor-foot-right {
    display: flex;
    gap: 10px;
}

/* ── Video sources ──────────────────────────────────────────────────────── */
.shj-video-sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px,1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.shj-video-source {
    border: 1.5px solid var(--shj-line);
    background: #fff;
    border-radius: 12px;
    padding: 11px 8px;
    cursor: pointer;
    text-align: center;
    transition: border-color 140ms ease, background 140ms ease;
}

    .shj-video-source.is-active {
        border-color: var(--shj-orange);
        background: #FFF4E9;
    }

    .shj-video-source i {
        font-size: 1.35rem;
    }

.shj-video-source-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 3px;
}

.shj-video-input-row {
    display: flex;
    gap: 8px;
}

    .shj-video-input-row .shj-input {
        flex: 1;
    }

.shj-video-preview {
    margin-top: 14px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--shj-line);
    aspect-ratio: 16/9;
    background: #000;
}

    .shj-video-preview iframe, .shj-video-preview video {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
    }

/* Direct-upload drop zone (compact so the strip + zone fit one viewport). */
.shj-video-drop {
    border: 2px dashed rgba(245,130,32,0.4);
    border-radius: 14px;
    padding: 22px;
    min-height: clamp(140px, 20vh, 220px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    background: #FFFBF6;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

    .shj-video-drop:hover,
    .shj-video-drop.is-over,
    .shj-video-drop:focus-visible {
        background: #FFF1E0;
        border-color: var(--shj-orange);
        outline: none;
    }

    .shj-video-drop i {
        font-size: 1.9rem;
        color: var(--shj-orange);
    }

/* Native player shown after a successful direct upload. */
.shj-video-player {
    border: 1px solid var(--shj-line);
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.shj-video-el {
    width: 100%;
    max-height: 46vh;
    display: block;
    background: #000;
}

.shj-video-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    font-size: 0.82rem;
    color: var(--shj-ink-2);
    flex-wrap: wrap;
}

    .shj-video-meta i {
        color: var(--shj-orange);
    }

.shj-video-meta-name {
    font-weight: 700;
    color: var(--shj-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
}

.shj-video-meta-sep {
    color: var(--shj-muted);
}

.shj-video-remove {
    margin-left: auto;
    border: 1px solid rgba(224,82,74,0.4);
    background: #fff;
    color: #E0524A;
    border-radius: 9px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: background 140ms ease;
}

    .shj-video-remove:hover {
        background: #FDECEC;
    }

/* ── Commission accept ──────────────────────────────────────────────────── */
.shj-commission {
    border: 1px solid var(--shj-line);
    border-radius: 16px;
    overflow: hidden;
}

.shj-commission-head {
    background: linear-gradient(135deg, #FFF4E9, #FFE9D2);
    padding: 20px 22px;
    border-bottom: 1px solid var(--shj-line);
}

.shj-commission-rate {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--shj-orange);
    line-height: 1;
}

.shj-commission-body {
    padding: 20px 22px;
}

.shj-commission-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--shj-line);
    font-size: 0.9rem;
}

    .shj-commission-row:last-child {
        border-bottom: none;
        font-weight: 700;
    }

    .shj-commission-row .pos {
        color: #10A65A;
    }

    .shj-commission-row .neg {
        color: #E0524A;
    }

.shj-accept {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 16px;
    background: var(--shj-cloud);
    border-radius: 12px;
}

    .shj-accept input {
        margin-top: 3px;
        width: 18px;
        height: 18px;
        accent-color: var(--shj-orange);
        flex: 0 0 auto;
    }

    .shj-accept label {
        font-size: 0.86rem;
        color: var(--shj-ink-2);
        line-height: 1.5;
    }

/* ── Footer nav ─────────────────────────────────────────────────────────── */
.shj-foot {
    flex: 0 0 auto; /* pinned footer — never scrolls with the body */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 24px;
    border-top: 1px solid var(--shj-line);
    background: rgba(252, 252, 253, 0.55);
}

.shj-btn {
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    transition: filter 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.shj-btn--primary {
    background: linear-gradient(135deg, var(--shj-orange), var(--shj-orange-2));
    color: #fff;
    box-shadow: 0 10px 24px rgba(245,130,32,0.3);
}

    .shj-btn--primary:hover {
        filter: brightness(1.03);
    }

    .shj-btn--primary:disabled {
        opacity: 0.55;
        cursor: default;
        filter: none;
        box-shadow: none;
    }

.shj-btn--ghost {
    background: transparent;
    color: var(--shj-muted);
}

    .shj-btn--ghost:hover {
        color: var(--shj-ink);
        background: var(--shj-cloud);
    }

/* Browse-available-homes (shown on the intro in place of Back). */
.shj-btn--browse {
    gap: 8px;
    color: var(--shj-ink-2);
}

    .shj-btn--browse .bi {
        font-size: 0.95rem;
        color: var(--shj-orange);
    }

    .shj-btn--browse:hover {
        color: var(--shj-ink);
        background: var(--shj-cloud);
    }

/* The hidden attribute must win over .shj-btn's inline-flex display. */
.shj-btn[hidden] {
    display: none !important;
}

.shj-btn--spin .shj-btn-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    border-top-color: #fff;
    animation: shjSpin 0.7s linear infinite;
    display: inline-block;
}

@keyframes shjSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Done step ──────────────────────────────────────────────────────────── */
.shj-done {
    text-align: center;
    padding: 20px 0;
}

.shj-done-badge {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, #10A65A, #34C759);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    box-shadow: 0 12px 30px rgba(16,166,90,0.32);
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.shj-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1A1A1F;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    z-index: 100070;
    transition: opacity 200ms ease, transform 200ms ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .shj-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .shj-toast i {
        color: #34C759;
    }

@media (prefers-reduced-motion: reduce) {
    .shj-step, .shj-toast, .shj-btn {
        animation: none;
        transition: none;
    }
}

/* =============================================================================
   ANTI-SCAM VERIFICATION (stay-host-verify.js)
   ============================================================================= */
.shj-verify-rail {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.shj-verify-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: 1.5px solid var(--shj-line);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--shj-muted);
    background: #fff;
    transition: all 140ms ease;
}

    .shj-verify-pill.is-active {
        border-color: var(--shj-orange);
        color: var(--shj-orange);
        background: #FFF4E9;
    }

    .shj-verify-pill.is-done {
        border-color: #10A65A;
        color: #10A65A;
        background: #EAF8F0;
    }

    .shj-verify-pill i {
        font-size: 0.95rem;
    }

.shj-verify-card {
    border: 1px solid var(--shj-line);
    border-radius: 16px;
    padding: 22px;
    background: #fff;
}

.shj-verify-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #F2FAFE;
    border: 1px solid #CDEBFB;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.86rem;
    color: #1A1A1F;
    line-height: 1.5;
    margin: 0 0 18px;
}

    .shj-verify-note i {
        color: var(--shj-sky);
        font-size: 1.1rem;
        margin-top: 1px;
    }

.shj-verify-files {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.shj-verify-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--shj-cloud);
    border-radius: 10px;
    font-size: 0.84rem;
}

    .shj-verify-file i {
        color: #10A65A;
    }

    .shj-verify-file em {
        margin-left: auto;
        font-style: normal;
        color: var(--shj-muted);
        font-size: 0.76rem;
        text-transform: capitalize;
    }

.shj-verify-idpreview {
    margin-top: 14px;
}

    .shj-verify-idpreview img {
        max-width: 100%;
        max-height: 220px;
        border-radius: 12px;
        border: 1px solid var(--shj-line);
    }

.shj-verify-status {
    margin-top: 12px;
    min-height: 22px;
}

.shj-verify-ok {
    color: #10A65A;
    font-weight: 700;
    font-size: 0.86rem;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.shj-verify-bad {
    color: #C0392B;
    font-weight: 700;
    font-size: 0.86rem;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.shj-verify-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

    .shj-verify-actions .shj-btn--primary:only-child {
        margin-left: auto;
    }

/* ── POPIA consent stage ─────────────────────────────────────────────────── */
.shj-consent-doc {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--shj-line);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--shj-cloud);
    margin-bottom: 14px;
    scrollbar-width: thin;
}

.shj-consent-h {
    margin: 12px 0 4px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--shj-ink);
    letter-spacing: 0.01em;
}

    .shj-consent-h:first-child {
        margin-top: 0;
    }

.shj-consent-p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--shj-ink-2);
}

.shj-consent-checks {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.shj-consent-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--shj-ink-2);
    cursor: pointer;
}

    .shj-consent-check input {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        accent-color: var(--shj-orange);
        cursor: pointer;
    }

.shj-consent-meta {
    font-weight: 500;
    color: var(--shj-muted);
    font-size: 0.78rem;
}

.shj-sigpad-wrap {
    position: relative;
    border: 1.5px dashed var(--shj-line);
    border-radius: 12px;
    background: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(14,14,17,0.05) 28px), #fff;
    overflow: hidden;
}

.shj-sigpad {
    display: block;
    width: 100%;
    height: 150px;
    touch-action: none;
    cursor: crosshair;
}

.shj-sig-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--shj-line);
    background: #fff;
    color: var(--shj-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .shj-sig-clear:hover {
        color: var(--shj-ink);
        background: var(--shj-cloud);
    }

.shj-consent-date {
    margin: 6px 2px 0;
    font-size: 0.78rem;
    color: var(--shj-muted);
}

.shj-consent-legal {
    align-self: center;
    font-size: 0.74rem;
    color: var(--shj-muted);
    max-width: 60%;
    text-align: right;
}

@media (max-width: 560px) {
    .shj-consent-legal {
        display: none;
    }
}

.shj-linkbtn {
    border: none;
    background: none;
    color: var(--shj-orange);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    text-decoration: underline;
}

/* Face stage */
.shj-face-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 4/3;
    border-radius: 16px;
    overflow: hidden;
    background: #1A1A1F;
}

    .shj-face-stage video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scaleX(-1);
    }

    .shj-face-stage canvas {
        display: none;
    }

.shj-face-ring {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px dashed rgba(255,255,255,0.5);
    transition: border-color 200ms ease;
}

    .shj-face-ring.is-live {
        border-style: solid;
    }

    .shj-face-ring.is-ok {
        border-color: #34C759;
        box-shadow: 0 0 0 4px rgba(52,199,89,0.18);
    }

.shj-face-status {
    text-align: center;
    margin: 14px 0 4px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--shj-ink-2);
    min-height: 22px;
}

.shj-verify-done {
    text-align: center;
    padding: 16px 0;
}

.shj-verify-done-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, #10A65A, #34C759);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
}

.shj-verify-done h3 {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 800;
    margin: 0 0 6px;
}

/* ── Compact, sticky layout for small device frames ─────────────────────────
   The card already caps to the journey mount (one viewport) with a fixed head
   and foot; here we just tighten side/edge padding on phones so the scrollable
   body gets the most room. */
@media (max-width: 560px) {
    .shj-root {
        padding: 8px 10px 10px;
    }

    .shj-card-head {
        padding: 13px 18px 9px;
    }

    .shj-step {
        padding: 14px 18px 18px;
    }

    .shj-foot {
        padding: 11px 18px;
    }

        /* Stack the foot buttons full-width so "Continue" is a comfortable tap
       target without crowding "Back". */
        .shj-foot .shj-btn {
            padding: 11px 18px;
        }
}

/* ============================================================================
   Account step — inline register / sign-in (replaces the old sign-in modal
   pop-up so the host never leaves the multi-form). Mirrors the journey card's
   --shj- palette and the Outfit type system.
   ========================================================================== */
.shj-account {
    max-width: 460px;
    margin: 22px auto 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Segmented toggle: Create account | I already have an account */
.shj-acct-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(14, 14, 17, 0.05);
    border-radius: 12px;
}

.shj-acct-seg-btn {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--shj-muted);
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

    .shj-acct-seg-btn.is-active {
        background: #fff;
        color: var(--shj-ink);
        box-shadow: 0 1px 3px rgba(14, 14, 17, 0.10);
    }

/* Google button */
.shj-acct-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1.5px solid rgba(14, 14, 17, 0.14);
    border-radius: 12px;
    background: #fff;
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--shj-ink);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .shj-acct-google:hover {
        background: #fafbfc;
        border-color: rgba(14, 14, 17, 0.24);
    }

/* "or" divider */
.shj-acct-or {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--shj-muted);
    font-size: 0.78rem;
    font-weight: 500;
}

    .shj-acct-or span {
        flex: 1;
        height: 1px;
        background: rgba(14, 14, 17, 0.10);
    }

/* Error banner */
.shj-acct-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(220, 38, 38, 0.07);
    border: 1px solid rgba(220, 38, 38, 0.22);
    color: #b91c1c;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.85rem;
}

    .shj-acct-error[hidden] {
        display: none;
    }

/* Fields */
.shj-acct-names {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.shj-acct-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shj-acct-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--shj-ink);
    letter-spacing: 0.01em;
}

.shj-acct-input {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.95rem;
    color: var(--shj-ink);
    background: #fff;
    border: 1.5px solid rgba(14, 14, 17, 0.14);
    border-radius: 11px;
    padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .shj-acct-input::placeholder {
        color: #aab0b8;
    }

    .shj-acct-input:focus {
        outline: none;
        border-color: var(--shj-orange);
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.16);
    }

/* Password field with show/hide */
.shj-acct-pw {
    position: relative;
    display: block;
}

    .shj-acct-pw .shj-acct-input {
        padding-right: 44px;
    }

.shj-acct-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--shj-muted);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .shj-acct-pw-toggle:hover {
        color: var(--shj-ink);
        background: rgba(14, 14, 17, 0.05);
    }

/* Remember-me */
.shj-acct-remember {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.85rem;
    color: var(--shj-ink-2);
    cursor: pointer;
}

    .shj-acct-remember input {
        width: 16px;
        height: 16px;
        accent-color: var(--shj-orange);
    }

/* Submit */
.shj-acct-submit {
    width: 100%;
    justify-content: center;
    margin-top: 2px;
}

.shj-acct-submit-arrow {
    margin-left: 2px;
}

/* Forgot link */
.shj-acct-forgot {
    align-self: center;
    border: 0;
    background: transparent;
    color: var(--shj-orange);
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.84rem;
    cursor: pointer;
    padding: 2px 6px;
}

    .shj-acct-forgot:hover {
        text-decoration: underline;
    }

/* Legal note */
.shj-acct-legal {
    margin: 2px 0 0;
    text-align: center;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--shj-muted);
}

/* Mode-driven visibility: data-acct-only matches data-acct-mode on the root */
.shj-account[data-acct-mode="register"] [data-acct-only="signin"] {
    display: none;
}

.shj-account[data-acct-mode="signin"] [data-acct-only="register"] {
    display: none;
}

@media (max-width: 520px) {
    .shj-acct-names {
        grid-template-columns: 1fr;
    }
}

/* Inline hint under an account field (e.g. SA phone format) */
.shj-acct-hint {
    font-size: 0.74rem;
    color: var(--shj-muted);
    margin-top: 4px;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADDRESS STEP v3 — two-panel · autocomplete-extract · custom dropdowns ·
   sticky static Street View · staggered reveal. Supersedes the v2 .shj-addr2-*
   block above (those selectors no longer match any markup).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Two-panel macro layout ────────────────────────────────────────────────── */
.shj-addr3 {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 22px;
    align-items: start;
}

.shj-addr3-form {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0; /* let children shrink instead of overflowing the grid cell */
}

/* Right panel stays in view while the left form scrolls. */
.shj-addr3-side {
    position: sticky;
    top: 8px;
    display: grid;
    gap: 12px;
    align-content: start;
}

.shj-step[data-step="address"] .shj-streetview--static {
    height: auto;
}

@media (max-width: 960px) {
    .shj-addr3 {
        grid-template-columns: 1fr;
    }

    .shj-addr3-side {
        position: static;
    }

    .shj-streetview--static .shj-streetview-stage {
        aspect-ratio: auto;
        min-height: 200px;
        max-height: 240px;
    }
}

/* ── Formalities (category + type) + extracted fields grids ────────────────── */
.shj-addr3-formalities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 14px;
}

.shj-addr3-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px 14px;
    align-items: start;
}

.shj-addr3-span3 {
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .shj-addr3-fields {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .shj-addr3-fields, .shj-addr3-formalities {
        grid-template-columns: 1fr;
    }

    .shj-addr3-span3 {
        grid-column: auto;
    }
}

/* ── Custom dropdown (premium, replaces native <select>) ───────────────────── */
.shj-cs {
    position: relative;
}

.shj-cs-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px;
    border: 1.5px solid var(--shj-line);
    border-radius: 11px;
    background: #FBFBFC;
    color: var(--shj-ink);
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

    .shj-cs-btn:hover {
        border-color: rgba(245,130,32,0.5);
        background: #fff;
    }

    .shj-cs.is-open .shj-cs-btn,
    .shj-cs-btn:focus-visible {
        outline: none;
        border-color: var(--shj-orange);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(245,130,32,0.12);
    }

.shj-cs.is-disabled .shj-cs-btn {
    opacity: 0.55;
    cursor: not-allowed;
}

.shj-cs-lead {
    font-size: 1rem;
    color: var(--shj-muted);
    transition: color 140ms ease;
}

.shj-cs.is-open .shj-cs-lead,
.shj-cs-btn.has-val .shj-cs-lead {
    color: var(--shj-orange);
}

.shj-cs-val {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .shj-cs-val.is-ph {
        color: var(--shj-muted);
    }

.shj-cs-caret {
    font-size: 0.8rem;
    color: var(--shj-muted);
    transition: transform 160ms ease;
}

.shj-cs.is-open .shj-cs-caret {
    transform: rotate(180deg);
}

.shj-cs-menu {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--shj-line);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.18);
    animation: shjPopIn 140ms cubic-bezier(0.2,0.8,0.2,1);
}

    /* Flip-up variant — opens above the trigger when there isn't enough room
       below inside the scrolling card body (set by positionCsMenu()). */
    .shj-cs-menu.is-up {
        top: auto;
        bottom: calc(100% + 6px);
        box-shadow: 0 -10px 25px -5px rgba(0,0,0,0.18);
        animation: shjPopUp 140ms cubic-bezier(0.2,0.8,0.2,1);
    }

@keyframes shjPopUp {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes shjPopIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.shj-cs-opt {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.86rem;
    color: var(--shj-ink-2);
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

    .shj-cs-opt:hover {
        background: var(--shj-cloud);
        color: var(--shj-ink);
    }

    .shj-cs-opt.is-sel {
        color: var(--shj-orange);
        font-weight: 600;
    }

.shj-cs-opt-ico {
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--shj-muted);
}

.shj-cs-opt.is-sel .shj-cs-opt-ico {
    color: var(--shj-orange);
}

.shj-cs-opt-label {
    flex: 1 1 auto;
}

.shj-cs-check {
    font-size: 0.9rem;
    color: var(--shj-orange);
    opacity: 0;
}

.shj-cs-opt.is-sel .shj-cs-check {
    opacity: 1;
}

/* ── Address autocomplete (search + floating suggestions) ──────────────────── */
.shj-addr3-search {
    position: relative;
}

.shj-addr-spin {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--shj-orange);
    animation: shjSpin 0.7s linear infinite;
}

@keyframes shjSpin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.shj-addr-results {
    position: absolute;
    z-index: 45;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--shj-line);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.18);
    animation: shjPopIn 140ms cubic-bezier(0.2,0.8,0.2,1);
}

.shj-addr-result {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
}

    .shj-addr-result:hover {
        background: var(--shj-cloud);
    }

.shj-addr-result--muted {
    color: var(--shj-muted);
    cursor: default;
}

    .shj-addr-result--muted:hover {
        background: transparent;
    }

.shj-addr-result-pin {
    font-size: 1rem;
    color: var(--shj-muted);
}

.shj-addr-result-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shj-addr-result-main {
    font-size: 0.86rem;
    color: var(--shj-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shj-addr-result-sec {
    font-size: 0.75rem;
    color: var(--shj-muted);
}

.shj-hl {
    background: rgba(245,130,32,0.18);
    color: var(--shj-ink);
    border-radius: 3px;
    padding: 0 1px;
    font-weight: 700;
}

/* ── Reveal of extracted fields (performant max-height + opacity) ──────────── */
.shj-addr3-extra {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 420ms cubic-bezier(0.2,0.8,0.2,1), opacity 320ms ease;
}

    .shj-addr3-extra.is-revealed {
        max-height: 920px;
        opacity: 1;
    }
    /* After the expand finishes, let dropdown menus escape the container. */
    .shj-addr3-extra.is-overflow {
        overflow: visible;
    }

/* Staggered fade-in of each extracted field as the panel opens. */
.shj-addr3-fields > * {
    opacity: 0;
    transform: translateY(6px);
}

.shj-addr3-extra.is-revealed .shj-addr3-fields > * {
    animation: shjFieldIn 360ms cubic-bezier(0.2,0.8,0.2,1) forwards;
}

    .shj-addr3-extra.is-revealed .shj-addr3-fields > *:nth-child(1) {
        animation-delay: 40ms;
    }

    .shj-addr3-extra.is-revealed .shj-addr3-fields > *:nth-child(2) {
        animation-delay: 90ms;
    }

    .shj-addr3-extra.is-revealed .shj-addr3-fields > *:nth-child(3) {
        animation-delay: 140ms;
    }

    .shj-addr3-extra.is-revealed .shj-addr3-fields > *:nth-child(4) {
        animation-delay: 190ms;
    }

    .shj-addr3-extra.is-revealed .shj-addr3-fields > *:nth-child(5) {
        animation-delay: 240ms;
    }

    .shj-addr3-extra.is-revealed .shj-addr3-fields > *:nth-child(6) {
        animation-delay: 290ms;
    }

    .shj-addr3-extra.is-revealed .shj-addr3-fields > *:nth-child(7) {
        animation-delay: 340ms;
    }

@keyframes shjFieldIn {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Success micro-copy + green auto-filled field states. */
.shj-extract-flash {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: rgba(40,167,69,0.10);
    border: 1px solid rgba(40,167,69,0.30);
    color: #1e7e34;
    font-size: 0.8rem;
    font-weight: 600;
    animation: shjPopIn 200ms cubic-bezier(0.2,0.8,0.2,1);
}

    .shj-extract-flash i {
        font-size: 0.95rem;
    }

.shj-field.is-autofilled .shj-input,
.shj-field.is-autofilled .shj-cs-btn {
    border-color: rgba(40,167,69,0.6);
    box-shadow: 0 0 0 3px rgba(40,167,69,0.12);
}

/* ── Static Street View: skeleton shimmer + badge ──────────────────────────── */
.shj-sv-skeleton {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    background: linear-gradient(100deg, #e9ebee 30%, #f6f7f9 50%, #e9ebee 70%);
    background-size: 200% 100%;
    animation: shjShimmer 1.2s ease-in-out infinite;
}

@keyframes shjShimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

.shj-streetview-img {
    z-index: 2;
}

.shj-sv-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(14,14,17,0.62);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

    .shj-sv-badge i {
        font-size: 0.8rem;
    }

/* Respect reduced-motion: no shimmer / pop / stagger. */
@media (prefers-reduced-motion: reduce) {
    .shj-sv-skeleton {
        animation: none;
    }

    .shj-cs-menu, .shj-addr-results, .shj-extract-flash {
        animation: none;
    }

    .shj-addr3-fields > * {
        opacity: 1;
        transform: none;
    }

    .shj-addr3-extra.is-revealed .shj-addr3-fields > * {
        animation: none;
    }

    .shj-addr3-extra {
        transition: opacity 200ms ease;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADDRESS v3 — one-viewport refinements
   • lede mirrored into the sticky head (sits with "Pin your property.")
   • compact, height-matched inputs + dropdowns (province aligns to its row)
   • shorter static Street View so the dual preview fits without scrolling
   • styled dual-address preview with an <hr> divider
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lede now rides in the sticky head, directly under the title. */
.shj-head-lede {
    margin: 4px 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--shj-ink-2);
    max-width: 660px;
}

.shj-card-head.is-bare .shj-head-lede {
    display: none;
}

.shj-head-lede:empty {
    display: none;
    margin: 0;
}
/* Hide the in-body lede on the address step — it's mirrored into the head. */
.shj-card-body .shj-step[data-step="address"] .shj-lede {
    display: none;
}

/* Tighter rhythm on the address step. */
.shj-step[data-step="address"] .shj-field {
    gap: 3px;
}

.shj-step[data-step="address"] .shj-addr3-form {
    gap: 11px;
}

.shj-step[data-step="address"] .shj-addr3-side {
    gap: 10px;
}

.shj-step[data-step="address"] .shj-addr3-fields {
    gap: 10px 14px;
}

.shj-step[data-step="address"] .shj-addr3-formalities {
    gap: 10px 14px;
}

/* Compact, consistent control height — the custom dropdown (Province) now
   matches the text inputs exactly, so its row lines up. */
.shj-step[data-step="address"] .shj-input,
.shj-step[data-step="address"] .shj-select {
    min-height: 42px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.shj-step[data-step="address"] .shj-cs-btn {
    min-height: 42px;
}

/* Shorter static Street View: pin the stage height and let the image cover it. */
.shj-step[data-step="address"] .shj-streetview--static .shj-streetview-stage {
    min-height: 0;
    height: 176px;
    flex: 0 0 auto;
}

.shj-step[data-step="address"] .shj-streetview--static .shj-streetview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 960px) {
    .shj-step[data-step="address"] .shj-streetview--static .shj-streetview-stage {
        height: 168px;
    }
}

/* Dual-address preview — readable two-line rows with a divider between them. */
.shj-addr-preview {
    display: grid;
    gap: 0;
}

.shj-addr-preview-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 1px 0;
}

.shj-addr-preview-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--shj-muted);
}

    .shj-addr-preview-tag i {
        font-size: 0.85rem;
        color: var(--shj-orange);
    }

.shj-addr-preview-val {
    font-size: 0.84rem;
    color: var(--shj-ink);
    line-height: 1.35;
}

.shj-addr-preview-sep {
    border: none;
    border-top: 1px solid var(--shj-line);
    margin: 8px 0;
}
/* De-emphasise whichever address is NOT the one guests currently see. */
.shj-addr-preview[data-shows="approx"] .shj-addr-preview-row[data-kind="full"] .shj-addr-preview-val,
.shj-addr-preview[data-shows="full"] .shj-addr-preview-row[data-kind="approx"] .shj-addr-preview-val {
    color: var(--shj-muted);
}

/* ── Address head: title + lede on ONE line (reclaims a row of head height,
      which hands that space back to the scrollable body so the City/Province/
      Postal row fits without a scrollbar). ──────────────────────────────────── */
.shj-card-head.shj-head--inline .shj-head-text .shj-title {
    display: inline;
}

.shj-card-head.shj-head--inline .shj-head-lede {
    display: inline;
    margin: 0;
}

    .shj-card-head.shj-head--inline .shj-head-lede::before {
        content: "\00B7"; /* middot separator, matching the preview voice */
        margin: 0 8px;
        color: var(--shj-muted);
        font-weight: 700;
    }

/* A touch more vertical tightening on the address step to guarantee one viewport. */
.shj-step[data-step="address"] {
    padding-top: 6px;
}

    .shj-step[data-step="address"] .shj-addr3-form {
        gap: 9px;
    }

    .shj-step[data-step="address"] .shj-addr3-fields {
        gap: 8px 14px;
    }

/* On narrow screens the title + lede go back to stacked (no room to share a line). */
@media (max-width: 760px) {
    .shj-card-head.shj-head--inline .shj-head-text .shj-title {
        display: block;
    }

    .shj-card-head.shj-head--inline .shj-head-lede {
        display: block;
        margin-top: 3px;
    }

        .shj-card-head.shj-head--inline .shj-head-lede::before {
            content: none;
        }
}