/* ============================================================================
   wwwroot/css/marketplace-register.css   (v2 — single-viewport register)
   ----------------------------------------------------------------------------
   Marketplace registration multi-step form, redesigned to match the v2
   landing's single-viewport + horizontal-deck philosophy.

   Layout:
     1. Compact hero strip (eyebrow + title + sub on the left, stepper on
        the right) — ~110px tall
     2. Step panel (fills the remaining height, one panel visible at a
        time, internal content scrolls vertically if it overflows)
     3. Sticky footer with step indicator + Back/Continue

   COLOR INJECTION (per the brief)
     · Charcoal black     #0E0E11 / #1A1A1F   — sticky footer + stepper
     · Sunset orange      #F58220 / #F89622   — primary CTA, current-step
     · Sky blue / cyan    #56C4F8 / #3FA9D9   — accents, eyebrow dot
     · Cloud white-grey   #F4F6F9 / #FAFBFD   — surface backgrounds

   Reuses the tokens from marketplace-landing.css via .mp-page. The
   document-flow geometry is set on .mp-register-page so this file can
   load BEFORE or AFTER the landing CSS — they don't conflict.
   ============================================================================ */


/* ════════════════════════════════════════════════════════════════════════
   PAGE FRAME — single-viewport, no scroll, full width
   ════════════════════════════════════════════════════════════════════════ */

.mp-register-page {
    /* Override the .mp-page block defaults from the landing — register
       is a five-step form, not a deck of cards, so its inner layout is
       different but the outer geometry is the same. */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--mp-page-h);
    overflow: hidden;
    background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(86, 196, 248, 0.10) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(245, 130, 32, 0.08) 0%, transparent 55%), var(--mp-mist);
}

    /* The Razor markup wraps everything in <div data-mp-register-form> so
   that submission goes through fetch() rather than a stray Enter press.
   That wrapper has to flow the page's flex layout through to its
   children (hero / stage track / footer) — otherwise the wrapper
   collapses to content height and the page layout breaks. */
    .mp-register-page > [data-mp-register-form] {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .mp-register-page .mp-shell {
        /* v2: full-width like the landing. Was 920px in v1 — left huge dead
       margins. Forms still read fine because individual field grids cap
       their measure via .mp-form-grid + per-field max-widths. */
        width: 100%;
        max-width: 1600px;
        margin-inline: auto;
        padding-inline: clamp(20px, 3vw, 56px);
    }


/* ════════════════════════════════════════════════════════════════════════
   1. HERO BAR — slim ribbon at top with eyebrow + stepper
   ────────────────────────────────────────────────────────────────────────
   v3 register: the hero is no longer a 2-column "title + stepper" band.
   Instead it's a single horizontal ribbon: eyebrow on the left, stepper
   centred, optional title-hint on the right. The dramatic title moves
   INSIDE each step's panel because every step has its own title — the
   page-level title is redundant.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   HERO RIBBON — REMOVED in v4
   ────────────────────────────────────────────────────────────────────────
   The full-width hero ribbon (eyebrow + stepper + R199 hint) was eating
   a row of vertical space on 1080p viewports and pushing the card grid
   off-screen. The stepper is now rendered as a sibling of
   .mp-step-panels and pinned over the visible stage by the
   `.mp-stepper--in-stage` rules further down. The eyebrow chip and the
   R199 hint are gone — the eyebrow was decorative, and the R199 fee is
   already restated in the step-5 summary and the Marketplace landing.

   The unused .mp-register-hero / .mp-register-eyebrow / .mp-register-hint
   rules are intentionally retained below as inert no-ops in case any
   future markup re-introduces them; if you confirm they're dead you can
   delete this whole block. They're harmless because the markup that
   targeted them no longer exists.
   ════════════════════════════════════════════════════════════════════════ */
.mp-register-hero {
    flex: 0 0 auto;
    --band-accent-rgb: 86, 196, 248;
    padding-block: clamp(10px, 1.4vw, 18px);
}

    .mp-register-hero .mp-shell {
        display: flex;
        align-items: center;
        gap: clamp(16px, 2vw, 32px);
        flex-wrap: wrap;
    }

/* The eyebrow chip — same as the landing's eyebrow */
.mp-register-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 8px;
    border-radius: 100px;
    background: #fff;
    border: 1px solid var(--mp-cloud-2);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mp-ink-2);
    box-shadow: 0 4px 14px rgba(14, 14, 17, 0.05);
    flex-shrink: 0;
}

.mp-register-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mp-sky-2);
    box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.20);
}

/* Legacy hero-ribbon stepper rule — harmless because the hero is gone. */
.mp-register-hero .mp-stepper {
    flex: 1 1 auto;
    min-width: 0;
}

/* Small text on the far right of the hero — "Step 1 of 5" or a hint.
   Optional element — Razor can leave it out and the layout still works. */
.mp-register-hint {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mp-muted);
    letter-spacing: 0.02em;
}

    .mp-register-hint strong {
        color: var(--mp-ink);
        font-weight: 800;
    }


/* ════════════════════════════════════════════════════════════════════════
   2. STAGE TRACK — horizontal pan between the 5 steps
   ────────────────────────────────────────────────────────────────────────
   The stage track is a single horizontal strip with 5 panels laid out
   side-by-side. As the user advances, the track slides left by one
   panel-width (translateX(-100%, -200% …)) to reveal the next step.
   Only ONE panel is visible at a time — the others sit just off-screen
   on either side.

   Each panel has a 2-column inner layout:
     LEFT  — themed illustration (~38% width on desktop, drops below
             content on mobile)
     RIGHT — the step's eyebrow + title + sub + form content (the
             existing field components from sections below)

   No vertical scrolling — when a step's content exceeds the panel
   height, the panel's inner scroll-container takes over. The page
   itself is locked to 100vh.
   ════════════════════════════════════════════════════════════════════════ */

/* Wrap the existing <section class="mp-shell"> around the panels —
   the new layout uses it as the viewport-clipping mask for the pan.
   The Razor markup keeps this structure unchanged from v2; we just
   re-flow the children. The section sits inside the data-mp-register-form
   wrapper, hence the descendant selector.

   IMPORTANT: the landing's global .mp-shell sets `align-items: center`
   (cross-axis centring for horizontal flex). On the register page we
   override both to a vertical column AND stretch the cross-axis so
   the step-panels (which are direct children) consume the full width.
   Without `align-items: stretch`, the step-panels collapse to their
   content width and the deck becomes narrower than the shell. */
/* ════════════════════════════════════════════════════════════════════════
   2. STAGE TRACK — horizontal pan between the 5 steps
   ────────────────────────────────────────────────────────────────────────
   v6 — Visibility / activation model
   ────────────────────────────────────────
   All five panels live in the DOM at all times. The horizontal pan is
   driven by a CSS custom property --mp-step-index, set by JS:

       0 → step 1 (category)
       1 → step 2 (subcategory)
       2 → step 3 (profile)
       3 → step 4 (licence, conditionally skipped)
       4 → step 5 (launch)

   When the licence step is skipped, JS jumps the index by 2 in one go
   (from profile→launch the index goes 2→4); the licence panel still
   exists at slot 3 but is never landed on.

   v6 fix
   ────────
   The previous implementation toggled the `[hidden]` attribute on each
   panel and used `visibility: hidden` + `display: flex` to keep the
   skipped panels in the track. That model fought itself: the
   user-agent's hidden rules clashed with the override, the next panel
   sometimes never rendered because `align-items: stretch` on the track
   was collapsing to the only "visibly-laid-out" panel's height, and
   slid-in panels appeared blank.

   The new model uses `data-active="true|false"` on every panel:
     · data-active="false" → off the accessibility tree, no pointer
                              events, no tab stops, but FULL layout
                              (visibility:hidden, display:flex). The
                              key change: we don't set [hidden] at all
                              so the user-agent default doesn't conflict
                              with our display value.
     · data-active="true"  → the panel currently in view. Receives
                              focus, pointer events, the tab order.

   Result: the track has a stable height (5 equally-sized children),
   the translateX maths is deterministic, and there's no rendering
   ambiguity between "I'm hidden but laid out" and "I'm display:none".
   ════════════════════════════════════════════════════════════════════════ */

.mp-register-page [data-mp-register-form] > section.mp-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding-bottom: 0;
    position: relative;
}

/* The TRACK — a horizontal strip of N panels, each 100% of the parent's
   width. translateX pans across the panels. Important: the track itself
   is `align-items: stretch` so every panel inherits the tallest panel's
   height — that gives us a stable visible frame. */
.mp-step-panels {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    width: 100%;
    --mp-step-index: 0;
    transform: translateX(calc(var(--mp-step-index) * -100%));
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

/* Each panel: exactly 100% of the track's width, never shrinks or grows.
   `min-width: 0` lets inner flex children (.mp-step-panel-card) compute
   their own min-content without forcing the panel to grow past its
   100% slot. */
.mp-step-panel {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
    padding-block: clamp(6px, 0.8vw, 12px);
    padding-inline: 0;
}

    /* Inactive panels — laid out but invisible to the user and AT. We
   deliberately do NOT use `display: none` because that would remove
   the panel from the flex track and shift the others; nor do we use
   `[hidden]` because the user-agent's display:none default fought our
   override before. `visibility: hidden` keeps the layout box intact
   while suppressing painting, pointer events, and screen-reader output. */
    .mp-step-panel[data-active="false"] {
        visibility: hidden;
        pointer-events: none;
    }

        /* Inactive panels' inputs/buttons/anchors aren't in the tab order */
        .mp-step-panel[data-active="false"] input,
        .mp-step-panel[data-active="false"] button,
        .mp-step-panel[data-active="false"] select,
        .mp-step-panel[data-active="false"] textarea,
        .mp-step-panel[data-active="false"] a,
        .mp-step-panel[data-active="false"] [tabindex] {
            /* Negative tabindex is enforced from JS for elements we already
           manage (chips, pills, cards). This CSS rule is a defence-in-depth
           net via `inert` semantics on browsers that don't fully respect
           visibility:hidden inside the tab order. */
            pointer-events: none;
        }

    /* Defence in depth: if any older markup still ships with the `hidden`
   attribute on a panel, force it back into the flex track so the pan
   maths doesn't break. Keeps the page recoverable on a partial deploy. */
    .mp-step-panel[hidden] {
        display: flex;
        visibility: hidden;
        pointer-events: none;
    }

/* The inner 2-column layout — illustration left, content right.
   v6 — stable grid-template that doesn't change between steps; the
   per-step accent (border + sub-tints) is driven by a custom property
   so it cascades cleanly down. */
.mp-step-panel-card {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: stretch;
    background: #fff;
    --mp-step-accent: var(--mp-sky-2);
    border: 1px solid var(--mp-step-accent);
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 16px 44px rgba(14, 14, 17, 0.05), 0 2px 6px rgba(14, 14, 17, 0.02);
}

    /* v5 — the top stripe (::before) is gone; the new border carries
       the accent on all four sides. */
    .mp-step-panel-card::before {
        content: none;
    }

/* Per-step accent override — licence & launch share the sunset theme. */
.mp-step-panel[data-mp-step-panel="licence"] .mp-step-panel-card,
.mp-step-panel[data-mp-step-panel="launch"] .mp-step-panel-card {
    --mp-step-accent: var(--mp-sunset);
}


/* ── LEFT half: the illustration stage ─────────────────────────────── */

.mp-step-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(86, 196, 248, 0.12) 0%, transparent 70%), linear-gradient(180deg, var(--mp-mist) 0%, #FFFFFF 100%);
    overflow: hidden;
    /* v5 — back to balanced padding. v4 added 72-92px top to clear the
       pinned stepper; the stepper is gone, so the SVG centres normally. */
    padding: clamp(16px, 2vw, 32px);
    border-right: 1px solid var(--mp-line);
}

/* Per-step background variation */
.mp-step-panel[data-mp-step-panel="licence"] .mp-step-stage,
.mp-step-panel[data-mp-step-panel="launch"] .mp-step-stage {
    background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(245, 130, 32, 0.10) 0%, transparent 70%), linear-gradient(180deg, #FFFCF8 0%, #FFFFFF 100%);
}

.mp-step-stage svg {
    width: 100%;
    max-width: 440px;
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 36px rgba(14, 14, 17, 0.10));
}

/* ─────────────────────────────────────────────────────────────────────
   Step-2 per-category stage stack

   Seven SVG illustrations share the stage's central slot — one
   generic default plus one per category (finance-investment,
   legal-ownership, insurance-risk, verification-compliance,
   essential-trades, property-management). Only the layer whose
   `data-mp-stage-active` attribute is "true" is visible; the rest
   sit at opacity:0 and pointer-events:none.

   marketplace-register.js toggles the data attribute in
   applyCategoryStage() whenever the chosen category changes (via
   selectCategory). CSS handles the 220ms opacity crossfade.

   Why position:absolute on the layers? Because each SVG is large
   (~440px max) and we want them to share the same physical slot.
   The parent .mp-step-stage already gives us a sized flexbox slot;
   the layers stack inside it. The first layer (default) defines
   the layout box; absolute layers overlay on top.

   Reduced-motion respects prefers-reduced-motion: transition shortens
   to 0ms so screen-reader and motion-sensitive users see instant swap.
   ───────────────────────────────────────────────────────────────────── */
.mp-step-stage:has(.mp-stage-layer) {
    /* Provide a positioning context for absolutely-stacked layers */
    position: relative;
}

.mp-stage-layer {
    /* Default layer (first child) holds the layout box */
    width: 100%;
    max-width: 440px;
    display: block;
    opacity: 0;
    transition: opacity 220ms ease-in-out;
    pointer-events: none;
}

    /* Each subsequent layer is absolutely positioned on top of the first */
    .mp-stage-layer ~ .mp-stage-layer {
        position: absolute;
        inset: 0;
        margin: auto;
        max-width: 440px;
        height: max-content;
    }

    .mp-stage-layer[data-mp-stage-active="true"] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Inner SVG inherits the existing svg styling, but we override
   max-width on the SVG itself because the layer wrapper now caps it. */
    .mp-stage-layer svg {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 18px 36px rgba(14, 14, 17, 0.10));
    }

@media (prefers-reduced-motion: reduce) {
    .mp-stage-layer {
        transition: none;
    }
}


/* ── RIGHT half: the form content ──────────────────────────────────── */

.mp-step-panel-inner {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: clamp(18px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
    scrollbar-width: thin;
    scrollbar-color: var(--mp-cloud-2) transparent;
}

    .mp-step-panel-inner::-webkit-scrollbar {
        width: 7px;
    }

    .mp-step-panel-inner::-webkit-scrollbar-track {
        background: transparent;
    }

    .mp-step-panel-inner::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(86, 196, 248, 0.4), rgba(245, 130, 32, 0.4));
        border-radius: 100px;
    }

/* ── EYEBROW REMOVED (v4) ──────────────────────────────────────────
   The "Step one / Step two / …" eyebrow was redundant alongside the
   numbered stepcrumb in the left column. Razor no longer renders the
   span, but the rule below stays as a defence-in-depth in case any
   future markup re-introduces it (or a translation override leaves
   one behind). */
.mp-step-panel-eyebrow {
    display: none !important;
}

.mp-step-panel[data-mp-step-panel="licence"] .mp-step-panel-eyebrow,
.mp-step-panel[data-mp-step-panel="launch"] .mp-step-panel-eyebrow {
    display: none !important;
}

/* ── HEADING ROW (v4) ──────────────────────────────────────────────
   The step title and sub-line now share a row when there's room,
   stacking only on narrow viewports. This claws back the vertical
   space the page lost to the centred "What kind of service do you
   offer?" / sub combo and lets the cards below sit fully in viewport
   without a panel-inner scrollbar. */
.mp-step-panel-heading-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 12px;
}

    .mp-step-panel-heading-row .mp-step-panel-title {
        margin: 0;
        flex: 0 1 auto;
    }

    .mp-step-panel-heading-row .mp-step-panel-sub {
        margin: 0;
        flex: 1 1 240px;
        min-width: 0;
    }

/* PANEL TITLE — Outfit. Sized for the compact 2-col layout.
   v4: slightly smaller cap so the heading row fits on one line at
   1280px+ without forcing wrap. */
.mp-step-panel-title {
    font-family: var(--mp-font);
    font-weight: 800;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: var(--mp-ink);
    margin: 0 0 6px;
}

.mp-step-panel-sub {
    font-size: clamp(0.78rem, 0.88vw, 0.85rem);
    color: var(--mp-muted);
    line-height: 1.45;
    margin: 0 0 16px;
    max-width: 64ch;
}


/* ════════════════════════════════════════════════════════════════════════
   PROGRESS STEPPER — full-width horizontal pill in the hero ribbon
   ════════════════════════════════════════════════════════════════════════ */

.mp-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 8px 14px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--mp-cloud-2);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(14, 14, 17, 0.04);
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 56px;
}

    .mp-stepper::-webkit-scrollbar {
        display: none;
    }

/* ── IN-STAGE STEPPER REMOVED in v5 ──────────────────────────────────
   The .mp-stepper--in-stage variant (a 220-320px-wide compact pill
   pinned to the section's top-left so it sat inside the visible
   stage column) is gone. The sticky footer's "Step X of Y" chip
   already communicates progress; two indicators on a 5-step flow
   was redundant. The corresponding <ol class="mp-stepper"> markup
   was removed from Register.cshtml.

   The base .mp-stepper rules above stay in case the seeder ever
   builds a different surface (admin preview, embed) that re-uses
   the stepper component. The 1200/980/720 media-query tweaks
   below for .mp-stepper--in-stage are inert (no element matches)
   and kept as defence-in-depth — feel free to delete once the
   v5 layout has lived in production for a week.
   ──────────────────────────────────────────────────────────────────── */

.mp-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

    .mp-step + .mp-step {
        margin-left: 0;
    }

.mp-step-bullet {
    /* The numbered circle. Three states (default / current / complete)
       are driven by attributes on the parent .mp-step.               */
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mp-mist);
    border: 1.5px solid var(--mp-cloud-2);
    color: var(--mp-muted);
    font-family: var(--mp-font);
    font-weight: 700;
    font-size: 0.78rem;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s cubic-bezier(0.25, 1, 0.5, 1);
}

    .mp-step-bullet svg {
        width: 14px;
        height: 14px;
    }

.mp-step-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mp-muted);
    transition: color 0.22s ease;
}

/* The connector line between steps */
.mp-step-connector {
    flex: 1;
    height: 2px;
    background: var(--mp-cloud-2);
    border-radius: 2px;
    margin-inline: 4px;
    position: relative;
    overflow: hidden;
    min-width: 12px;
}

    .mp-step-connector::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--mp-grad-brand);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    }

/* ── STATES ─────────────────────────────────────────────────────── */

/* CURRENT — the active step (sunset accent) */
.mp-step[data-state="current"] .mp-step-bullet {
    background: var(--mp-grad-sunset);
    border-color: var(--mp-sunset);
    color: #fff;
    box-shadow: 0 6px 18px rgba(245, 130, 32, 0.36);
    transform: scale(1.06);
}

.mp-step[data-state="current"] .mp-step-label {
    color: var(--mp-ink);
    font-weight: 700;
}

/* COMPLETE — bullet filled charcoal, connector after it fills */
.mp-step[data-state="complete"] .mp-step-bullet {
    background: var(--mp-grad-ink);
    border-color: var(--mp-ink);
    color: #fff;
}

.mp-step[data-state="complete"] .mp-step-connector::after {
    transform: scaleX(1);
}

.mp-step[data-state="complete"] .mp-step-label {
    color: var(--mp-ink-2);
}

/* SKIPPED — muted */
.mp-step[data-state="skipped"] .mp-step-bullet {
    background: var(--mp-mist);
    border-color: var(--mp-cloud-2);
    color: var(--mp-cloud-2);
    border-style: dashed;
}

.mp-step[data-state="skipped"] .mp-step-label {
    color: var(--mp-cloud-2);
    text-decoration: line-through;
    text-decoration-color: var(--mp-cloud-2);
}


/* ════════════════════════════════════════════════════════════════════════
   STEP 1 — CATEGORY CARDS
   ════════════════════════════════════════════════════════════════════════ */

.mp-category-grid {
    /* v4: locked 3 columns (was auto-fill). 6 cards = 3×2 grid that
       feels balanced regardless of viewport width within the stage's
       right column. */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* ────────────────────────────────────────────────────────────────────
   FLIP-CARD MECHANISM
   ────────────────────────────────────────────────────────────────────
   Each `.mp-category-card` is now an OUTER perspective container that
   holds an INNER 3D-transformed `.mp-category-card-faces` element. The
   inner element has two faces — `.mp-category-card-face--front`
   (default state) and `.mp-category-card-face--back` (revealed on
   hover, shows the actual services). On hover the inner flips 180°
   around the Y axis.

   Stability rules to prevent flicker:
     · Hover detection is on the OUTER container, not on the inner
       face. If we put :hover on the face, the moment the flip starts
       the cursor enters a different stacking context and the hover
       state may toggle back. The outer container's bounding box is
       constant; the inner flip lives entirely inside it.
     · Both faces are absolutely positioned, same size, sharing the
       outer's footprint. The outer has a fixed min-height so the
       layout doesn't jump when flipping.
     · `backface-visibility: hidden` so the back-of-card text doesn't
       bleed through when the front is showing.
     · `transition` is on transform only — no opacity/visibility races.

   The label/radio/data-attributes stay on the OUTER container so the
   existing JS that wires up category-card click + keyboard navigation
   still works. */

.mp-category-card {
    /* Was a flat card; now the perspective container for the flip.
       Visible chrome (border, shadow, background) moves to the faces. */
    position: relative;
    display: block;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
    /* Lock a minimum height so the layout stays stable through flips.
       v5: 196 → 220 because the top stepper is gone (recovered ~50px
       of vertical room). The flipped back face now shows ~6 service
       rows before scrolling, covering 5 of the 6 categories without
       a scrollbar at all (Verification w/ 8 services still scrolls). */
    min-height: 220px;
    perspective: 1100px;
    /* v4 — NO transform transition. The previous version animated
       transform on hover, which combined with the lift below produced
       a hover-out / hover-in rattle whenever the cursor sat near the
       card's edge or near a scrollbar. The flip still animates via
       .mp-category-card-faces transform; the OUTER element should
       not move at all. */
}

    /* v4 — hover lift REMOVED. The previous translateY(-2px) caused
       a rattle bug: when the user hovered a card near the scrollbar
       gutter, the lift shifted the card up by 2px, the scrollbar
       reflowed, the cursor was no longer over the card, hover ended,
       the card dropped back, the cursor was over it again — and the
       cycle repeated as a visible vibration. Feedback now comes from
       border-colour + shadow on the inner face (already wired in
       .mp-category-card:hover .mp-category-card-face below), which
       don't change geometry so the cursor's hit-box never moves. */
    .mp-category-card:hover {
        /* Intentionally empty — see comment above. Kept as a selector
           so future tweaks have an obvious home. */
    }

    /* Defensive buffer — a transparent extension of the card's
       hit-box on all sides. This covers the gap between siblings in
       the 3-col grid so a cursor crossing slowly doesn't fall into
       dead space (which would otherwise look like a flicker even
       without a lift). */
    .mp-category-card::after {
        content: "";
        position: absolute;
        inset: -6px;
        z-index: -1;
        border-radius: 20px;
        pointer-events: auto;
    }

/* The 3D-transformed pair of faces */
.mp-category-card-faces {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.mp-category-card:hover .mp-category-card-faces,
.mp-category-card:focus-within .mp-category-card-faces,
.mp-category-card[data-flipped="true"] .mp-category-card-faces {
    transform: rotateY(180deg);
}

/* Touch devices: no hover, no flip. The card behaves as a flat
   clickable surface that selects the category on tap. Users who want
   to see services can browse them in step 2 after selecting. */
@media (hover: none) {
    .mp-category-card:hover .mp-category-card-faces,
    .mp-category-card:focus-within .mp-category-card-faces {
        transform: none;
    }

    .mp-category-card-face--back {
        display: none;
    }
}

/* Each face — shared chrome.
   v5: top 3px accent stripe replaced with a 1px full-perimeter border
   tinted to the category's accent colour. Cards now read as
   self-contained tiles in their vertical's colour (sky for Finance,
   sunset for Trades, etc.) without the asymmetric top-bar look. */
.mp-category-card-face {
    position: absolute;
    inset: 0;
    min-height: inherit;
    background: #fff;
    /* v5 — was 1.5px solid var(--mp-cloud-2). Now 1px in the card's
       own accent so the border IS the category colour. Hover state
       below keeps the same hue but adds a deeper shadow for lift. */
    border: 1px solid var(--card-accent, var(--mp-sky-2));
    border-radius: 16px;
    padding: 14px 16px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
    overflow: hidden;
}

    /* v5 — top stripe removed. The full-perimeter border above carries
       the accent now. Kept as `content: none` so any later stylesheet
       cascade doesn't accidentally bring it back. */
    .mp-category-card-face::before {
        content: none;
    }

.mp-category-card:hover .mp-category-card-face {
    border-color: var(--card-accent, var(--mp-sky-2));
    box-shadow: 0 16px 38px rgba(14, 14, 17, 0.08);
}

/* FRONT face — the default-visible side: icon + title + tagline + meta */
.mp-category-card-face--front {
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
    /* When the card is flipped, the back is in front; while
       transitioning, the front rotates AWAY (rotateY changes from 0
       toward -180). Keep both stacked correctly. */
}

/* BACK face — the hover-revealed side: header + list of services */
.mp-category-card-face--back {
    transform: rotateY(180deg);
    background: linear-gradient( 135deg, rgba(var(--card-accent-rgb, 86, 196, 248), 0.06) 0%, rgba(var(--card-accent-rgb, 86, 196, 248), 0.01) 100% ), #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-category-card-face--back-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mp-line);
}

.mp-category-card-face--back-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.012em;
    color: var(--mp-ink);
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-category-card-face--back-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 100px;
    background: rgba(var(--card-accent-rgb, 86, 196, 248), 0.12);
    color: var(--card-accent, var(--mp-sky-2));
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* List of services (anchors — directly clickable) */
.mp-category-card-face--back-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mp-cloud-2) transparent;
}

    .mp-category-card-face--back-list::-webkit-scrollbar {
        width: 4px;
    }

    .mp-category-card-face--back-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .mp-category-card-face--back-list::-webkit-scrollbar-thumb {
        background: var(--mp-cloud-2);
        border-radius: 100px;
    }

.mp-category-card-face--back-service {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mp-ink-2);
    text-decoration: none;
    line-height: 1.3;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .mp-category-card-face--back-service::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--card-accent, var(--mp-sky-2));
        flex-shrink: 0;
    }

    .mp-category-card-face--back-service:hover,
    .mp-category-card-face--back-service:focus-visible {
        background: rgba(var(--card-accent-rgb, 86, 196, 248), 0.12);
        color: var(--card-accent, var(--mp-sky-2));
        outline: none;
        /* v4 — NO transform on hover. The list scrolls vertically
           inside the flipped card; a translateX shift on a row that
           sits next to the thin scrollbar caused the same rattle
           bug as the outer card. Hover feedback is colour-only. */
    }

/* Footer of the back face — small "Pick this category" button */
.mp-category-card-face--back-pick {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    margin-top: 2px;
    border-radius: 100px;
    background: var(--card-accent, var(--mp-sky-2));
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

    .mp-category-card-face--back-pick:hover {
        transform: translateY(-1px);
        opacity: 0.92;
    }

    .mp-category-card-face--back-pick svg {
        width: 10px;
        height: 10px;
    }

/* SELECTED state — applies to the front face when card is the chosen
   category. The flip behaviour still applies. */
.mp-category-card[data-selected="true"] .mp-category-card-face--front {
    border-color: var(--card-accent, var(--mp-sky-2));
    background: linear-gradient( 135deg, rgba(var(--card-accent-rgb, 86, 196, 248), 0.06) 0%, rgba(var(--card-accent-rgb, 86, 196, 248), 0.02) 100% );
    box-shadow: 0 18px 42px rgba(var(--card-accent-rgb, 86, 196, 248), 0.18), 0 0 0 2px var(--card-accent, var(--mp-sky-2));
}

.mp-category-radio {
    /* visually hidden but focusable */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

    .mp-category-radio:focus-visible + .mp-category-card-body {
        outline: 2px solid var(--card-accent, var(--mp-sky-2));
        outline-offset: 4px;
        border-radius: 16px;
    }

.mp-category-card-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--card-accent-rgb, 86, 196, 248), 0.12);
    color: var(--card-accent, var(--mp-sky-2));
    border-radius: 10px;
    flex-shrink: 0;
}

    .mp-category-card-icon svg {
        width: 18px;
        height: 18px;
    }

.mp-category-card-title {
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: -0.012em;
    color: var(--mp-ink);
    line-height: 1.2;
    margin: 0;
}

.mp-category-card-tagline {
    font-size: 0.74rem;
    color: var(--mp-muted);
    line-height: 1.4;
    margin: 0;
    /* Cap to 2 lines so cards stay balanced height-wise */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-category-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--mp-line);
    font-size: 0.66rem;
    color: var(--mp-muted);
}

.mp-category-card-meta-num {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--card-accent, var(--mp-sky-2));
}

/* "Hover →" hint — hidden on touch devices where hover doesn't work */
.mp-category-card-hover-hint {
    margin-left: auto;
    font-weight: 700;
    color: var(--card-accent, var(--mp-sky-2));
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (hover: none) {
    .mp-category-card-hover-hint {
        display: none;
    }
}

/* Tick on selected card — top-right of front face */
.mp-category-card-tick {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card-accent, var(--mp-sky-2));
    color: #fff;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 3;
}

    .mp-category-card-tick svg {
        width: 12px;
        height: 12px;
    }

.mp-category-card[data-selected="true"] .mp-category-card-tick {
    opacity: 1;
    transform: scale(1);
}


/* ════════════════════════════════════════════════════════════════════════
   STEP 2 — SUBCATEGORY CHIPS
   ════════════════════════════════════════════════════════════════════════
   Reuses the .mp-sub-chip pattern from marketplace-landing.css but adds a
   selection state. The chips are wrapped in a <label> here (the radio
   input is hidden). Only chips matching the chosen category are rendered
   — the view emits all chips with a data-category attribute and the JS
   filters on the client.
   ════════════════════════════════════════════════════════════════════════ */

.mp-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.mp-subcategory-chip {
    /* same anchor reset as label, but it's a <label> here */
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1.5px solid var(--mp-cloud-2);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

    .mp-subcategory-chip[hidden] {
        display: none;
    }

    .mp-subcategory-chip:hover {
        transform: translateY(-2px);
        border-color: var(--card-accent, var(--mp-sky-2));
        box-shadow: 0 10px 24px rgba(14, 14, 17, 0.06);
    }

    .mp-subcategory-chip[data-selected="true"] {
        border-color: var(--card-accent, var(--mp-sky-2));
        background: linear-gradient( 135deg, rgba(var(--card-accent-rgb, 86, 196, 248), 0.10) 0%, rgba(var(--card-accent-rgb, 86, 196, 248), 0.04) 100% );
        box-shadow: 0 0 0 2px var(--card-accent, var(--mp-sky-2));
    }

.mp-subcategory-chip-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--card-accent-rgb, 86, 196, 248), 0.10);
    color: var(--card-accent, var(--mp-sky-2));
    border-radius: 12px;
}

    .mp-subcategory-chip-icon svg {
        width: 22px;
        height: 22px;
    }

.mp-subcategory-chip-body {
    flex: 1;
    min-width: 0;
}

.mp-subcategory-chip-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--mp-ink);
    line-height: 1.25;
}

/* ─────────────────────────────────────────────────────────────────────
   Service description — short blurb under the chip label.

   Sourced server-side from the seeded MarketplaceSubcategory.Description
   column; rendered conditionally by Register.cshtml when non-empty.

   Visual rules:
     • Reads as supporting copy: smaller, lower contrast, lighter weight
       so it never competes with the bold label above.
     • Two-line clamp (line-clamp:2) so a long blurb doesn't blow the
       chip out of its 64px tile rhythm. Tested with the longest seeded
       descriptions (Bond Originators, Financial Advisors, etc.) — all
       fit in two lines at chip width.
     • Margin-top is intentionally tight (2px) so the label + desc read
       as a single visual unit.
   ───────────────────────────────────────────────────────────────────── */
.mp-subcategory-chip-desc {
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    font-size: 0.74rem;
    line-height: 1.32;
    font-weight: 500;
    color: var(--mp-muted);
    letter-spacing: 0.005em;
}

/* When the chip is the selected one, the description gets a faint
   accent tint so it visually bonds to the highlighted state without
   shouting. */
.mp-subcategory-chip[data-selected="true"] .mp-subcategory-chip-desc {
    color: var(--mp-ink);
    opacity: 0.72;
}

.mp-subcategory-chip-helper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--mp-muted);
}

.mp-subcategory-chip-licence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 100px;
    background: rgba(245, 130, 32, 0.10);
    color: var(--mp-sunset);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

    .mp-subcategory-chip-licence svg {
        width: 9px;
        height: 9px;
    }

.mp-subcategory-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--mp-muted);
    font-size: 0.96rem;
    line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════════════
   STEP 3-4 — FORM FIELDS
   ════════════════════════════════════════════════════════════════════════ */

.mp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
}

    .mp-form-grid > .mp-field-full {
        grid-column: 1 / -1;
    }

@media (max-width: 700px) {
    .mp-form-grid {
        grid-template-columns: 1fr;
    }
}

.mp-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--mp-ink-2);
    line-height: 1.2;
}

.mp-field-label-req {
    color: var(--mp-sunset);
    font-weight: 800;
}

.mp-field-helper {
    font-size: 0.76rem;
    color: var(--mp-muted);
    line-height: 1.4;
}

/* Input shell — bordered, rounded, glassy on focus */
.mp-input,
.mp-textarea,
.mp-select {
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--mp-cloud-2);
    border-radius: 12px;
    font-family: var(--mp-body);
    font-size: 0.96rem;
    font-weight: 500;
    color: var(--mp-ink);
    line-height: 1.45;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

    .mp-input::placeholder,
    .mp-textarea::placeholder {
        color: var(--mp-muted);
        font-weight: 400;
    }

    .mp-input:hover,
    .mp-textarea:hover,
    .mp-select:hover {
        border-color: var(--mp-line-2);
    }

    .mp-input:focus,
    .mp-textarea:focus,
    .mp-select:focus {
        border-color: var(--mp-sky-2);
        box-shadow: 0 0 0 4px rgba(86, 196, 248, 0.16);
    }

.mp-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

/* Select — custom chevron */
.mp-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 40px;
    cursor: pointer;
}

/* Char counter — right-aligned under a textarea */
.mp-field-counter {
    align-self: flex-end;
    font-size: 0.72rem;
    color: var(--mp-muted);
    font-variant-numeric: tabular-nums;
}

    .mp-field-counter[data-state="warn"] {
        color: var(--mp-sunset);
    }

    .mp-field-counter[data-state="error"] {
        color: #DC2626;
        font-weight: 700;
    }


/* ── Error state ─────────────────────────────────────────────────── */

.mp-field[data-error="true"] .mp-input,
.mp-field[data-error="true"] .mp-textarea,
.mp-field[data-error="true"] .mp-select {
    border-color: #DC2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}

.mp-field-error {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #DC2626;
}

.mp-field[data-error="true"] .mp-field-error {
    display: flex;
}

.mp-field-error svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════════
   LICENCE-PROOF NOTICE — the regulated-trades callout at the top of step 4
   ════════════════════════════════════════════════════════════════════════ */

.mp-licence-callout {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 28px;
    background: linear-gradient( 135deg, rgba(245, 130, 32, 0.06) 0%, rgba(245, 130, 32, 0.02) 100% );
    border: 1px solid rgba(245, 130, 32, 0.20);
    border-radius: 16px;
}

.mp-licence-callout-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 130, 32, 0.14);
    color: var(--mp-sunset);
    border-radius: 14px;
}

    .mp-licence-callout-icon svg {
        width: 24px;
        height: 24px;
    }

.mp-licence-callout-title {
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--mp-ink);
    margin: 0 0 4px;
}

.mp-licence-callout-body {
    font-size: 0.84rem;
    color: var(--mp-muted);
    line-height: 1.5;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════
   STEP 5 — MEDIA UPLOADERS
   ════════════════════════════════════════════════════════════════════════ */

.mp-uploader {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: var(--mp-mist);
    border: 1.5px dashed var(--mp-cloud-2);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color 0.22s ease, background 0.22s ease, transform 0.18s ease;
}

    .mp-uploader:hover {
        border-color: var(--mp-sky-2);
        background: rgba(86, 196, 248, 0.04);
    }

    .mp-uploader[data-dragover="true"] {
        border-color: var(--mp-sky-2);
        background: rgba(86, 196, 248, 0.10);
        transform: scale(1.005);
    }

    .mp-uploader[data-has-file="true"] {
        border-style: solid;
        background: #fff;
    }

.mp-uploader-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.mp-uploader-preview {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(86, 196, 248, 0.08);
    color: var(--mp-sky-2);
    border-radius: 14px;
    overflow: hidden;
}

    .mp-uploader-preview svg {
        width: 28px;
        height: 28px;
    }

    .mp-uploader-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mp-uploader-body {
    flex: 1;
    min-width: 0;
}

.mp-uploader-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--mp-ink);
}

.mp-uploader-sub {
    font-size: 0.78rem;
    color: var(--mp-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-uploader-remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--mp-cloud-2);
    border-radius: 10px;
    color: var(--mp-muted);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

    .mp-uploader-remove:hover {
        background: rgba(220, 38, 38, 0.08);
        color: #DC2626;
        border-color: rgba(220, 38, 38, 0.30);
    }

    .mp-uploader-remove svg {
        width: 16px;
        height: 16px;
    }

.mp-uploader[data-has-file="false"] .mp-uploader-remove {
    display: none;
}


/* ════════════════════════════════════════════════════════════════════════
   TERMS + PRICING SUMMARY (step 5 right side)
   ════════════════════════════════════════════════════════════════════════ */

.mp-launch-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    margin-top: 8px;
}

@media (max-width: 800px) {
    .mp-launch-grid {
        grid-template-columns: 1fr;
    }
}

.mp-summary-card {
    align-self: start;
    position: sticky;
    top: 28px;
    padding: 24px;
    background: linear-gradient(135deg, var(--mp-ink) 0%, var(--mp-ink-2) 100%);
    color: #fff;
    border-radius: 20px;
    overflow: hidden;
}

    .mp-summary-card::before {
        content: "";
        position: absolute;
        right: -80px;
        top: -80px;
        width: 220px;
        height: 220px;
        background: radial-gradient( circle at center, rgba(245, 130, 32, 0.30) 0%, rgba(86, 196, 248, 0.15) 45%, transparent 70% );
        filter: blur(20px);
        pointer-events: none;
    }

.mp-summary-label {
    position: relative;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mp-sky);
    margin-bottom: 10px;
}

.mp-summary-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
}

    .mp-summary-row:last-of-type {
        border-bottom: 0;
    }

    .mp-summary-row strong {
        color: #fff;
        font-weight: 700;
    }

.mp-summary-total {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
}

.mp-summary-total-label {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.70);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 700;
}

.mp-summary-total-num {
    font-family: var(--mp-display);
    font-weight: 400;
    font-size: 2.2rem;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}

    .mp-summary-total-num .currency {
        font-size: 0.86rem;
        font-weight: 600;
        font-family: var(--mp-body);
        color: rgba(255, 255, 255, 0.66);
        margin-right: 2px;
        vertical-align: 6px;
    }

/* Terms agreement checkbox */
.mp-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    background: var(--mp-mist);
    border: 1px solid var(--mp-cloud-2);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.22s ease, background 0.22s ease;
    margin-top: 20px;
}

    .mp-consent:hover {
        border-color: var(--mp-line-2);
    }

    .mp-consent[data-error="true"] {
        border-color: #DC2626;
        background: rgba(220, 38, 38, 0.04);
    }

.mp-consent-check {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 1.5px solid var(--mp-line-2);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.22s ease, border-color 0.22s ease;
    position: relative;
}

    .mp-consent-check:checked {
        background: var(--mp-sky-2);
        border-color: var(--mp-sky-2);
    }

        .mp-consent-check:checked::after {
            content: "";
            width: 6px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2.5px 2.5px 0;
            transform: rotate(45deg) translate(-1px, -1px);
        }

    .mp-consent-check:focus-visible {
        box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.32);
    }

.mp-consent-text {
    font-size: 0.86rem;
    color: var(--mp-ink-2);
    line-height: 1.5;
}

    .mp-consent-text a {
        color: var(--mp-sky-2);
        font-weight: 700;
        text-decoration: none;
    }

        .mp-consent-text a:hover {
            text-decoration: underline;
        }


/* ════════════════════════════════════════════════════════════════════════
   3. FOOTER NAV BAR — sits at the bottom of the single-viewport page
   ────────────────────────────────────────────────────────────────────────
   v1 was `position: sticky` because the page scrolled. In v2 the page
   doesn't scroll — the footer is a fixed-position flex item at the
   bottom of the .mp-register-page column.
   ════════════════════════════════════════════════════════════════════════ */

.mp-form-footer {
    flex: 0 0 auto;
    position: relative;
    bottom: auto;
    z-index: 4;
    padding: 10px 0 clamp(10px, 1.4vw, 16px);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--mp-line);
}

.mp-form-footer-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mp-form-footer-step {
    /* v5 — was a plain text node ("Step 1 of 4") on the far left.
       Now styled as a soft chip so it reads as an intentional status
       pill, sitting alongside the Back/Continue buttons rather than
       getting lost. Padding adds the breathing room requested and the
       background separates it visually from the page background. */
    flex: 0 0 auto;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mp-muted);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(86, 196, 248, 0.10);
    border: 1px solid rgba(86, 196, 248, 0.28);
    border-radius: 100px;
    letter-spacing: 0.01em;
}

    .mp-form-footer-step strong {
        color: var(--mp-ink);
        font-weight: 800;
    }

/* Spacer between the step chip and the action buttons. Was implicit
   via the previous `flex: 1` on .mp-form-footer-step; with the chip
   now sized to content, we anchor the button cluster to the right
   edge via margin-left:auto on whichever button comes first. */
.mp-form-footer-inner > [data-mp-prev] {
    margin-left: auto;
}

    /* When Back is disabled (i.e. user is on step 1), don't show it at
   all — the breadcrumb "Marketplace › Register your business" already
   gives them a way back, and showing a dead button right next to a
   live Continue button reads as noise. The button reappears on step
   2 onwards because the JS clears the `disabled` attribute. */
    .mp-form-footer-inner > [data-mp-prev][disabled] {
        display: none;
    }

        /* If Back is hidden, Continue picks up the right-anchor margin so
   the button still floats right (instead of butting against the
   step chip). */
        .mp-form-footer-inner > [data-mp-prev][disabled] + [data-mp-next] {
            margin-left: auto;
        }

/* Tiny progress bar inline with the step text */
.mp-form-footer-progress {
    display: inline-flex;
    align-items: center;
    height: 4px;
    width: 80px;
    background: var(--mp-cloud-2);
    border-radius: 100px;
    overflow: hidden;
}

    .mp-form-footer-progress > span {
        display: block;
        height: 100%;
        background: var(--mp-grad-brand);
        border-radius: 100px;
        transition: width 0.32s ease;
    }

.mp-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: #fff;
    color: var(--mp-ink-2);
    border: 1.5px solid var(--mp-cloud-2);
    border-radius: 100px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
}

    .mp-btn-secondary:hover:not([disabled]) {
        border-color: var(--mp-ink);
        background: var(--mp-ink);
        color: #fff;
        transform: translateY(-1px);
    }

    .mp-btn-secondary[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.mp-form-footer .mp-btn-primary {
    padding: 11px 22px;
    font-size: 0.86rem;
    background: var(--mp-grad-sunset);
    box-shadow: 0 6px 18px rgba(245, 130, 32, 0.36);
}

    .mp-form-footer .mp-btn-primary:hover:not([disabled]) {
        box-shadow: 0 10px 24px rgba(245, 130, 32, 0.5);
        transform: translateY(-1px);
    }

    .mp-form-footer .mp-btn-primary[disabled] {
        opacity: 0.55;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }


/* ════════════════════════════════════════════════════════════════════════
   AUTH PROMPT — surfaces when an anonymous user hits Launch
   ════════════════════════════════════════════════════════════════════════ */

.mp-auth-prompt {
    margin-top: 16px;
    padding: 16px 18px;
    background: rgba(86, 196, 248, 0.06);
    border: 1px solid rgba(86, 196, 248, 0.20);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.88rem;
    color: var(--mp-ink-2);
    line-height: 1.5;
}

.mp-auth-prompt-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(86, 196, 248, 0.16);
    color: var(--mp-sky-2);
    border-radius: 10px;
}

    .mp-auth-prompt-icon svg {
        width: 18px;
        height: 18px;
    }

.mp-auth-prompt button {
    margin-left: auto;
    flex-shrink: 0;
    appearance: none;
    background: var(--mp-sky-2);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 100px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .mp-auth-prompt button:hover {
        background: var(--mp-sky);
    }


/* ════════════════════════════════════════════════════════════════════════
   EXISTING-LISTING BANNER (when user already has one)
   ════════════════════════════════════════════════════════════════════════ */

.mp-existing-listing {
    margin-top: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(86, 196, 248, 0.06) 0%, rgba(245, 130, 32, 0.04) 100%);
    border: 1px solid var(--mp-cloud-2);
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.mp-existing-listing-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mp-sky-2);
    color: #fff;
    border-radius: 14px;
}

.mp-existing-listing-body {
    flex: 1;
    min-width: 0;
}

.mp-existing-listing-title {
    font-size: 1.04rem;
    font-weight: 800;
    color: var(--mp-ink);
    margin: 0 0 4px;
}

.mp-existing-listing-sub {
    font-size: 0.88rem;
    color: var(--mp-muted);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 1 — PROFESSION-AWARE FORM COMPONENTS  (v5)
   ────────────────────────────────────────────────────────────────────────
   New components introduced when step 3 and step 4 became
   profession-aware. None of these touch the existing form-grid /
   field / input classes — they sit alongside them.

   Composition:
     · .mp-pill-group + .mp-pill        Company-type selector (step 3)
     · .mp-form-grid--compact           Tighter spacing for the new
                                        compact forms in steps 3 + 5
     · .mp-textarea--compact            Shorter textarea (description
                                        is now 600 chars, not 2000)
     · .mp-regulator-card               Read-only regulator chip at the
                                        top of step 4
     · .mp-checkbox-fieldset etc.       FAIS multi-select on step 4
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. COMPANY-TYPE PILL GROUP  (step 3) ────────────────────────────
   Seven options laid out as a flowing grid that wraps to 2-3 rows on
   a 1280px viewport. Each pill is two-line: label (e.g. "Pty (Ltd)")
   above a hint (e.g. "Private company") in muted text. Active pill
   gets a coloured border + tint matching the step accent. */
.mp-pill-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.mp-pill {
    /* Reset button defaults */
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid var(--mp-cloud-2);
    border-radius: 12px;
    padding: 9px 12px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--mp-ink);
    display: flex;
    flex-direction: column;
    gap: 1px;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    /* No transform on hover — same anti-rattle policy as the category
       cards. Border + background + shadow do the work. */
}

    .mp-pill:hover {
        border-color: var(--mp-step-accent, var(--mp-sky-2));
        background: rgba(86, 196, 248, 0.04);
    }

    .mp-pill:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.28);
    }

    .mp-pill[data-selected="true"] {
        border-color: var(--mp-step-accent, var(--mp-sky-2));
        background: rgba(86, 196, 248, 0.10);
        box-shadow: 0 0 0 1px var(--mp-step-accent, var(--mp-sky-2)) inset;
    }

.mp-pill-label {
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.mp-pill-hint {
    font-size: 0.7rem;
    color: var(--mp-muted);
    line-height: 1.3;
}


/* ── 2. COMPACT FORM GRID + TEXTAREA  (steps 3 + 5) ──────────────────
   The original .mp-form-grid uses generous gap and 2-column layout.
   The compact variant tightens both for the shorter v5 forms. */
.mp-form-grid--compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

    .mp-form-grid--compact .mp-field-full {
        grid-column: 1 / -1;
    }

.mp-textarea--compact {
    min-height: 80px;
    /* The old .mp-textarea was 130px+. 80px fits one paragraph of body
       text comfortably without pushing the next field off-screen. */
}

/* When a CIPC-only or sole-prop-only field cluster is hidden via
   [data-mp-show-when], the JS toggles `hidden` on the .mp-field
   wrapper itself. The grid auto-flow re-packs the remaining fields
   smoothly; no extra rule needed.

   But the FIELDSET version of the FAIS block uses `mp-field` as a
   modifier, and fieldsets render differently — reset that to behave
   like a normal grid cell. */
fieldset.mp-field {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}


/* ── 2.5. ADDITIONAL CREDENTIALS  (step 4, v5 / Phase 2+) ────────────
   The container that holds dynamically-rendered secondary credential
   inputs (conveyancer FFC, future inspectors' wireman's licence, etc.).
   When the active profession has none, [data-empty=true] hides it
   entirely. When it has credentials, a thin top border + small label
   make it read as "additional" rather than "another required field
   in the same flat list". */
.mp-additional-credentials {
    /* Behaves as a sub-grid within the parent mp-form-grid so its
       inputs flow naturally beside the primary licence number on
       wide screens and stack below on narrow. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
    /* Visual grouping: a hairline above + a hint that these are
       additional to the regulator licence already captured. */
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed var(--mp-cloud-2);
}

    .mp-additional-credentials[data-empty="true"] {
        display: none;
    }

    .mp-additional-credentials::before {
        content: "Additional credentials required";
        grid-column: 1 / -1;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--mp-muted);
        margin-bottom: -4px;
    }
/* Inputs inside this container reuse all the standard .mp-input
       chrome, so no extra input styling is needed. */


/* ── 3. REGULATOR CARD  (step 4) ─────────────────────────────────────
   The full-width card at the top of step 4 that displays the
   profession's regulator (FSCA / NCR / PPRA / …). Read-only — drives
   user confidence that we know who their regulator is. */
.mp-regulator-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.06) 0%, rgba(245, 130, 32, 0.01) 100%), #fff;
    border: 1px solid var(--mp-sunset);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(245, 130, 32, 0.08);
}

.mp-regulator-card-crest {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 130, 32, 0.12);
    color: var(--mp-sunset);
}

.mp-regulator-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mp-regulator-card-eyebrow {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mp-muted);
}

.mp-regulator-card-name {
    font-family: var(--mp-font);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--mp-ink);
    letter-spacing: -0.018em;
    line-height: 1.15;
}

.mp-regulator-card-full {
    font-size: 0.78rem;
    color: var(--mp-ink-2);
    line-height: 1.3;
}


/* ── 4. FAIS-CATEGORIES MULTI-SELECT  (step 4) ───────────────────────
   Five chips rendered as a horizontally-flowing strip. Each chip is
   a `<label>` wrapping the actual checkbox (visually hidden) plus a
   visible pill. Active state mirrors the company-type pill style for
   visual coherence across the form. */
.mp-checkbox-fieldset {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: none;
    padding: 0;
    margin: 0;
}

.mp-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.mp-checkbox-chip {
    /* The visible chip — wraps the input. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid var(--mp-cloud-2);
    border-radius: 100px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    font-size: 0.78rem;
    color: var(--mp-ink-2);
}

    .mp-checkbox-chip:hover {
        border-color: var(--mp-sunset);
        background: rgba(245, 130, 32, 0.04);
    }

    .mp-checkbox-chip input[type="checkbox"] {
        /* Visually hide but keep accessible. The chip's :has(:checked)
           selector below paints the checked state. */
        position: absolute;
        opacity: 0;
        pointer-events: none;
        width: 0;
        height: 0;
    }

    .mp-checkbox-chip:has(input:checked) {
        border-color: var(--mp-sunset);
        background: rgba(245, 130, 32, 0.10);
        box-shadow: 0 0 0 1px var(--mp-sunset) inset;
        color: var(--mp-ink);
    }

    .mp-checkbox-chip:has(input:focus-visible) {
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.28);
        outline: none;
    }

.mp-checkbox-chip-label {
    font-weight: 700;
    font-size: 0.78rem;
}

.mp-checkbox-chip-hint {
    font-size: 0.66rem;
    color: var(--mp-muted);
    letter-spacing: 0.01em;
}


/* ── 5. RESPONSIVE TWEAKS ──────────────────────────────────────────── */
@media (max-width: 980px) {
    /* On medium screens collapse the compact grid to one column —
       the right-column space is too narrow to render two fields
       comfortably alongside the stage illustration. */
    .mp-form-grid--compact {
        grid-template-columns: 1fr;
    }

    /* Pill group: smaller min-width keeps it from going single-column
       too aggressively. */
    .mp-pill-group {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    /* Regulator card on tighter screens — drop the crest down a notch
       and reflow the body. */
    .mp-regulator-card {
        padding: 12px 14px;
    }

    .mp-regulator-card-crest {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 720px) {
    /* Mobile — pills wrap to single-column, FAIS chips stay flowing
       (they're small enough to fit 2-3 per row). */
    .mp-pill-group {
        grid-template-columns: 1fr;
    }

    .mp-regulator-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ANIMATIONS — restrained step transitions
   ════════════════════════════════════════════════════════════════════════ */

@keyframes mp-panel-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.mp-step-panel[data-active="true"] {
    animation: mp-panel-in 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}


/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — five tiers from desktop down to small phones
   ────────────────────────────────────────────────────────────────────────
   v3 register layout has a 2-col stage-card (illustration | content).
   Each tier tapers cosmetics and finally collapses to single column.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .mp-register-hero .mp-shell {
        gap: clamp(12px, 1.8vw, 24px);
    }

    .mp-stepper {
        padding: 6px 10px;
        min-height: 50px;
    }

    .mp-step-label {
        font-size: 0.7rem;
    }
    /* Tighten the 2-col gap so the content has more room */
    .mp-step-panel-card {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
        gap: clamp(16px, 2vw, 32px);
    }

    .mp-step-stage svg {
        max-width: 280px;
    }

    /* v4 — narrower stage column at this tier; pull the in-stage
       stepper width down accordingly so it doesn't overhang into
       the form column. */
    .mp-stepper--in-stage {
        width: clamp(200px, 24vw, 280px);
    }
}

@media (max-width: 980px) {
    /* Hero ribbon: wrap if needed but keep horizontal */
    .mp-register-hero .mp-shell {
        gap: 10px;
    }
    /* Hide the "R199 once-off" hint to give the stepper room */
    .mp-register-hint {
        display: none;
    }

    .mp-stepper {
        flex: 1 1 100%;
    }

    .mp-category-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    /* Stage card narrower illustration column */
    .mp-step-panel-card {
        grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
    }

    .mp-step-stage svg {
        max-width: 220px;
    }

    .mp-step-stage {
        padding: 12px;
    }

    /* v4 — stage column ~330px here; stepper sized to comfortably
       sit inside it with labels still visible. */
    .mp-stepper--in-stage {
        width: clamp(180px, 26vw, 240px);
        top: 14px;
        left: 12px;
    }

        .mp-stepper--in-stage .mp-step-label {
            font-size: 0.62rem;
        }
}

@media (max-width: 720px) {
    /* Phone — stack the stage card vertically: ILLUSTRATION below
       content (the form is what the user came for; illustration is
       decoration). Allow natural vertical scroll because the touch
       keyboard takes 40% of the screen. */
    .mp-register-page {
        height: auto;
        min-height: var(--mp-page-h);
        overflow: visible;
    }

        .mp-register-page > [data-mp-register-form] {
            min-height: var(--mp-page-h);
        }

    /* v4 — the in-stage stepper goes back to flowing above the
       panels as a normal block element on phone. The stage column
       sits BELOW the form content here (order:2), so pinning the
       stepper to the section's top-left would land it inside the
       form column. Static placement is simplest and keeps the
       stepper close to the page title where the user expects it. */
    .mp-stepper--in-stage {
        position: static;
        width: auto;
        margin: 0 0 8px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 6px 18px rgba(14, 14, 17, 0.04);
    }

    /* (Stage padding tweak for phone lives further down where the
       original .mp-step-stage phone rule sets order/border/padding.
       Don't duplicate it here.) */

    .mp-register-hero {
        padding-block: 10px 6px;
    }

    /* Stepper labels disappear on phone — bullets + connectors remain */
    .mp-step-label {
        display: none;
    }

    .mp-step-bullet {
        width: 26px;
        height: 26px;
        font-size: 0.72rem;
    }

    .mp-stepper {
        gap: 2px;
        padding: 5px 10px;
        min-height: 40px;
    }

    .mp-step-connector {
        margin-inline: 2px;
        min-width: 6px;
    }

    .mp-register-page [data-mp-register-form] > section.mp-shell {
        overflow: visible;
    }

    .mp-step-panels {
        flex: 0 0 auto;
    }

    .mp-step-panel {
        flex: 0 0 100%;
        border-radius: 18px;
    }

    /* STACK the card 1-col: content on TOP, illustration below */
    .mp-step-panel-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 0;
    }

    .mp-step-panel-inner {
        order: 1;
        overflow-y: visible;
        padding: 18px 16px;
    }

    .mp-step-stage {
        order: 2;
        border-right: none;
        border-top: 1px solid var(--mp-line);
        padding: 18px;
    }

        .mp-step-stage svg {
            max-width: 200px;
        }

    .mp-step-panel-title {
        font-size: clamp(1.15rem, 5vw, 1.4rem);
    }

    .mp-step-panel-sub {
        font-size: 0.84rem;
    }

    .mp-category-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mp-category-card {
        padding: 12px;
    }

    .mp-category-card-icon {
        width: 36px;
        height: 36px;
    }

        .mp-category-card-icon svg {
            width: 18px;
            height: 18px;
        }

    .mp-category-card-title {
        font-size: 0.86rem;
    }

    .mp-category-card-tagline {
        font-size: 0.72rem;
    }

    /* Footer stays at the bottom of the page on phone */
    .mp-form-footer {
        position: sticky;
        bottom: 0;
        padding: 10px 0 12px;
    }

    .mp-form-footer-inner {
        gap: 8px;
        flex-wrap: wrap;
    }

    .mp-form-footer-step {
        /* v5 — was full-width on phone (flex: 1 1 100%) because the
           old plain-text indicator needed a row of its own. Now it's
           a compact chip; let it sit inline with the buttons on the
           same row, smaller padding for the tighter footer. */
        flex: 0 0 auto;
        order: -1;
        font-size: 0.72rem;
        padding: 6px 12px;
    }

    .mp-form-footer-progress {
        margin-left: auto;
    }

    .mp-btn-secondary,
    .mp-form-footer .mp-btn-primary {
        padding: 9px 14px;
        font-size: 0.8rem;
    }
}

/* HIDE FLOATING ENGAGEMENT ICONS on mobile.
   Mirrors the landing rule — the left-edge dock collides with the
   sticky footer + register stage on small screens. */
@media (max-width: 900px) {
    body:has(.mp-register-page) .floating-engagement,
    body:has(.mp-register-page) .floating-settings-wrapper {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .mp-category-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mp-step-stage svg {
        max-width: 160px;
    }
}

@media (max-width: 380px) {
    .mp-step-panel-title {
        font-size: 1.2rem;
    }

    .mp-step-panel-inner {
        padding: 14px 12px;
    }

    .mp-step-stage {
        padding: 12px;
    }

        .mp-step-stage svg {
            max-width: 140px;
        }
}


@media (prefers-reduced-motion: reduce) {
    .mp-step-panels {
        transition: none !important;
    }

    .mp-step-panel[data-active="true"] {
        animation: none !important;
    }

    .mp-category-card,
    .mp-subcategory-chip,
    .mp-step-bullet,
    .mp-step-connector::after {
        transition: none !important;
    }
}


/* ============================================================================
   CIPC AUTOCOMPLETE  (Phase 3 of step-3 enhancements, 2026-05)
   ----------------------------------------------------------------------------
   Activated when JS marks <input data-mp-cipc-autocomplete> and appends a
   <div class="mp-cipc-panel"> sibling underneath. The input's closest
   [data-mp-field] wrapper gets position:relative below; that pins the
   panel's position:absolute to drop right under the field.

   Visual language matches the rest of the register form:
     • White panel on shadow + 1px line border, sky-blue accent on hover
     • Sunset for registered-status pill, sky-blue for reserved
     • Spinner is a 14px ring in sunset
     • The "Source: CIPC BizPortal" footnote sits at panel bottom in muted
       ink, mirroring chip-helper styling on step 2

   Mobile rules:
     • Panel becomes 100% width of its parent (overrides max-width 460px)
     • Item rows widen tap targets to 44px min-height (Apple guideline)
     • Pills wrap below name on narrow widths so long company names
       aren't truncated
   ============================================================================ */

/* The field wrapper hosts position:relative so the panel can be absolute
   without escaping its column. We target the .mp-field wrapper (NOT
   [data-mp-field] which is also on the input itself). */
.mp-field:has([data-mp-cipc-autocomplete]) {
    position: relative;
}

/* The declaration line that always sits under the field */
.mp-cipc-declaration {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.74rem;
    line-height: 1.32;
    color: var(--mp-muted);
    letter-spacing: 0.005em;
}

.mp-cipc-declaration-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--mp-sky);
}

    .mp-cipc-declaration-icon svg {
        width: 14px;
        height: 14px;
        stroke-width: 2;
    }

/* ── The dropdown panel ─────────────────────────────────────────────── */
.mp-cipc-panel {
    /* Hidden by default; JS flips data-open=true to show */
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease-out, max-height 160ms ease-out;
    background: #FFFFFF;
    border: 1px solid var(--mp-line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(14, 14, 17, 0.12), 0 2px 6px rgba(14, 14, 17, 0.06);
}

    .mp-cipc-panel[data-open="true"] {
        opacity: 1;
        pointer-events: auto;
        max-height: 380px;
        overflow-y: auto;
        /* Subtle scrollbar in sunset for brand cohesion */
        scrollbar-width: thin;
        scrollbar-color: var(--mp-cloud-2, #D8DCE3) transparent;
    }

        .mp-cipc-panel[data-open="true"]::-webkit-scrollbar {
            width: 6px;
        }

        .mp-cipc-panel[data-open="true"]::-webkit-scrollbar-thumb {
            background: var(--mp-cloud-2, #D8DCE3);
            border-radius: 3px;
        }

/* ── Status messages (loading, error, no-matches) ─────────────────── */
.mp-cipc-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 0.86rem;
    line-height: 1.36;
    color: var(--mp-ink);
}

.mp-cipc-status--loading {
    color: var(--mp-muted);
}

.mp-cipc-status--error {
    color: #B0470F; /* sunset darkened — readable as warning */
    background: rgba(245, 130, 32, 0.06);
    border-radius: 12px;
}

.mp-cipc-status--empty {
    color: var(--mp-muted);
}

.mp-cipc-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 800;
}

.mp-cipc-status--error .mp-cipc-status-icon {
    background: #F58220;
    color: #FFFFFF;
}

/* Spinner — small ring in sunset */
.mp-cipc-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(245, 130, 32, 0.25);
    border-top-color: #F58220;
    border-radius: 50%;
    animation: mp-cipc-spin 720ms linear infinite;
    flex-shrink: 0;
}

@keyframes mp-cipc-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-cipc-spinner {
        animation: none;
    }

    .mp-cipc-panel {
        transition: none;
    }
}

/* ── Result list ──────────────────────────────────────────────────── */
.mp-cipc-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.mp-cipc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    min-height: 44px; /* mobile tap target */
    transition: background-color 120ms ease-out;
    border-left: 3px solid transparent;
}

    .mp-cipc-item:hover,
    .mp-cipc-item[data-active="true"] {
        background-color: rgba(86, 196, 248, 0.08);
        border-left-color: var(--mp-sky, #56C4F8);
    }

.mp-cipc-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mp-ink);
    letter-spacing: 0.005em;
}

.mp-cipc-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mp-cipc-item-reg {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace;
    font-size: 0.78rem;
    color: var(--mp-muted);
    letter-spacing: 0.01em;
}

/* Status pills */
.mp-cipc-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.mp-cipc-pill--registered {
    background: rgba(86, 196, 248, 0.15);
    color: #1F7BAB;
}

.mp-cipc-pill--reserved {
    background: rgba(245, 130, 32, 0.12);
    color: #B0470F;
}

.mp-cipc-pill--other {
    background: rgba(14, 14, 17, 0.08);
    color: var(--mp-muted);
}

/* ── Source footnote ──────────────────────────────────────────────── */
.mp-cipc-foot {
    padding: 8px 16px;
    border-top: 1px solid var(--mp-line);
    font-size: 0.7rem;
    color: var(--mp-muted);
    letter-spacing: 0.01em;
}

/* ── Mobile narrowing ─────────────────────────────────────────────── */
@media (max-width: 560px) {
    .mp-cipc-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mp-cipc-item-name {
        white-space: normal; /* allow wrap on tiny screens */
    }

    .mp-cipc-item-meta {
        width: 100%;
        justify-content: space-between;
    }
}


/* ============================================================================
   STEP 3 — V6 COMPACT LAYOUT  (Phase 4, 2026-05)
   ----------------------------------------------------------------------------
   The v6 step-3 redesign breaks free of the .mp-form-grid 2-column lattice
   for its hero row, in favour of dedicated row containers that can flex
   between 2 and 3 columns. This lets us pack:

     • Top hero row → 3 cols (Enterprise / Trading / RegNum)
     • Company-type row → 2 cols (Company Type select / VAT)
     • Soleprop row → 2 cols (Owner ID / Years operating)
     • Description → full span
     • Service-aware fields slot → full span (Phase 5 populates)

   The wrapper rows sit INSIDE .mp-form-grid as full-span items (via the
   .mp-field-full helper), so we don't need to break the existing 2-col
   container.

   Mobile: every row collapses to single-column at ≤720px, matching the
   .mp-form-grid breakpoint.
   ============================================================================ */

/* Generic flex row container, configurable via modifier classes */
.mp-field-row {
    display: grid;
    gap: clamp(12px, 1.4vw, 18px);
    align-items: start;
    width: 100%;
}

.mp-field-row--2col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mp-field-row--3col {
    /* Three roughly-equal columns; min 0 so long enterprise names don't
       blow out the column on narrow widths */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* Mobile: stack everything */
@media (max-width: 720px) {
    .mp-field-row--2col,
    .mp-field-row--3col {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Readonly variant of mp-input — sky-blue tint on background to signal
   "this is filled for you" without being mistaken for a disabled field
   (disabled is dimmer; readonly stays legible) */
.mp-input--readonly,
.mp-input[readonly] {
    background-color: rgba(86, 196, 248, 0.06);
    border-color: var(--mp-line);
    color: var(--mp-ink);
    cursor: default;
}

    .mp-input--readonly:focus,
    .mp-input[readonly]:focus {
        /* Don't show the sunset focus ring on readonly — we don't want users
       to think they can edit. A sky-blue outline cues "this is system-
       filled" instead. */
        outline: 2px solid rgba(86, 196, 248, 0.4);
        outline-offset: 1px;
        background-color: rgba(86, 196, 248, 0.10);
    }

/* Native <select> styled to match .mp-input */
.mp-select {
    /* Reset Safari/Chrome native chrome so it visually matches inputs */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Inline chevron via SVG background. The 12px gap on the right
       keeps the chevron from sitting on top of the option text on
       longest-option case. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E0E11' 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 14px center;
    padding-right: 36px;
    cursor: pointer;
}

    .mp-select::-ms-expand {
        display: none;
    }

    .mp-select:focus {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F58220' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }

/* "(optional)" label affix — softer than the required asterisk so users
   can quickly scan which fields are mandatory */
.mp-field-label-optional {
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--mp-muted);
    letter-spacing: 0.01em;
}

/* Service-aware fields slot — empty until JS populates it in Phase 5.
   Styled now so the empty state has a stable height (avoids layout
   shift when the first sub is picked). */
.mp-svc-fields {
    /* No min-height when empty — let it collapse cleanly */
}

    .mp-svc-fields:not(:empty) {
        /* When populated, sit in the grid like a normal full-span field
       group. Phase 5 will inject .mp-field children. */
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(12px, 1.4vw, 18px);
        padding-top: 6px;
        border-top: 1px dashed var(--mp-line);
        margin-top: 4px;
    }

@media (max-width: 720px) {
    .mp-svc-fields:not(:empty) {
        grid-template-columns: 1fr;
    }
}


/* ============================================================================
   FOOTER PADDING (per design directive — buttons too close to the white edges)
   ----------------------------------------------------------------------------
   The footer-inner was a flush flex container at the bottom of the form.
   Wraps now in side padding so the step chip + Back/Continue buttons
   breathe properly against the form's outer edge. Vertical padding is
   already on .mp-form-footer; we extend horizontally only.
   ============================================================================ */
.mp-form-footer-inner {
    padding-left: clamp(16px, 2vw, 28px);
    padding-right: clamp(16px, 2vw, 28px);
}