/* input(735,1): run-time error CSS1019: Unexpected token, found '}' */
/* ============================================================================
   wwwroot/css/marketplace-experience.css   (v1 — Marketplace Experience layer)
   ----------------------------------------------------------------------------
   Loaded AFTER marketplace-landing.css on /marketplace. Three concerns:

     1. CATEGORY BUBBLES — the "who you'll find here" chat bubble floating
        LEFT of each category row (desktop hover/focus; touch toggled by
        marketplace-landing.js via [data-bubble-open]).

     2. INTELLIGENT SEARCH PANEL — the Gemini suggestion dropdown under the
        landing search bar.

     3. NATIVE-APP MOBILE SHELL (≤720px) — the landing stops pretending to
        be a shrunken desktop page. It becomes an app home screen: compact
        hero, pinned search, category rows as full-bleed tappable cells
        with accent glyph dots + inline profession previews, illustration
        demoted to a small ambient badge, safe-area aware.

   Tokens come from .mp-page (marketplace-landing.css). Everything here is
   scoped under .mp-page so nothing leaks into the rest of the site.
   ============================================================================ */


/* ════════════════════════════════════════════════════════════════════════
   1. CATEGORY BUBBLES (desktop-first)
   ════════════════════════════════════════════════════════════════════════ */

.mp-page .mp-cat-item {
    position: relative;
}

.mp-page .mp-cat-bubble {
    position: absolute;
    right: calc(100% + 22px);
    top: 50%;
    transform: translateY(-50%) translateX(10px) scale(0.96);
    width: 280px;
    padding: 16px 18px 14px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px 20px 4px 20px;
    box-shadow: 0 24px 48px -18px rgba(14, 14, 17, 0.22), 0 4px 14px rgba(14, 14, 17, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s linear 0.22s;
    z-index: 30;
}

    /* Accent halo — the category's own brand colour breathes at the edge */
    .mp-page .mp-cat-bubble::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg, var(--mp-cat-accent, #F58220), transparent 55%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.55;
        pointer-events: none;
    }

.mp-page .mp-cat-item:hover .mp-cat-bubble,
.mp-page .mp-cat-item:focus-within .mp-cat-bubble,
.mp-page .mp-cat-item[data-bubble-open="true"] .mp-cat-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* Speech-bubble tail pointing at the row */
.mp-page .mp-cat-bubble-tail {
    position: absolute;
    right: -7px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%) rotate(45deg);
    background: rgba(255, 255, 255, 0.94);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

.mp-page .mp-cat-bubble-eyebrow {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mp-cat-accent, var(--mp-sunset));
    margin-bottom: 9px;
}

.mp-page .mp-cat-bubble-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

    .mp-page .mp-cat-bubble-list li {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--mp-ink-2);
        line-height: 1.3;
    }

.mp-page .mp-cat-bubble-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mp-cat-accent, var(--mp-sunset));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-cat-accent, #F58220) 18%, transparent);
}

.mp-page .mp-cat-bubble-count {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 100px;
    background: var(--mp-cloud);
    color: var(--mp-muted);
}

.mp-page .mp-cat-bubble-more {
    display: block;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--mp-line-2);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mp-muted);
}

/* Left-bubble needs horizontal room — inside 1100px it flips BELOW the
   row instead of overlapping the illustration. */
@media (max-width: 1280px) and (min-width: 721px) {
    .mp-page .mp-cat-bubble {
        right: auto;
        left: 44px;
        top: calc(100% + 10px);
        transform: translateY(-4px) scale(0.97);
        border-radius: 4px 20px 20px 20px;
    }

    .mp-page .mp-cat-item:hover .mp-cat-bubble,
    .mp-page .mp-cat-item:focus-within .mp-cat-bubble,
    .mp-page .mp-cat-item[data-bubble-open="true"] .mp-cat-bubble {
        transform: translateY(0) scale(1);
    }

    .mp-page .mp-cat-bubble-tail {
        right: auto;
        left: 18px;
        top: -7px;
        border: none;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
}


/* ════════════════════════════════════════════════════════════════════════
   2. INTELLIGENT SEARCH PANEL
   ════════════════════════════════════════════════════════════════════════ */

.mp-page .mp-search-wrap {
    position: relative;
    width: 100%;
    /* 2026-07 fix — the .mp-reveal entrance animation leaves a filled
       transform on this element AND on the later .mp-cats sibling. Both
       become stacking contexts, and since .mp-cats comes later in the DOM
       it painted OVER the suggestion panel (category rows bled through).
       Lifting the wrap's own context above the categories guarantees the
       panel always sits on top, regardless of lingering transforms. */
    z-index: 120;
}

.mp-page .mp-intel-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    /* 2026-07 fix — fully opaque white so nothing behind the panel can
       show through; the backdrop blur is redundant on a solid surface. */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    box-shadow: 0 28px 56px -20px rgba(14, 14, 17, 0.32), 0 6px 18px rgba(14, 14, 17, 0.10);
    padding: 12px 10px 10px;
    z-index: 999;
    animation: mp-intel-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

@keyframes mp-intel-pop {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
    }

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

.mp-page .mp-intel-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 10px 8px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mp-muted);
}

.mp-page .mp-intel-head-spark {
    display: inline-flex;
    width: 15px;
    height: 15px;
    color: var(--mp-sunset);
}

    .mp-page .mp-intel-head-spark svg {
        width: 100%;
        height: 100%;
        animation: mp-intel-spark 2.4s ease-in-out infinite;
    }

@keyframes mp-intel-spark {
    0%, 100% {
        opacity: 0.55;
        transform: rotate(0deg) scale(0.94);
    }

    50% {
        opacity: 1;
        transform: rotate(22deg) scale(1.06);
    }
}

.mp-page .mp-intel-list {
    display: grid;
    gap: 4px;
}

.mp-page .mp-intel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 13px;
    background: transparent;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--mp-font);
    transition: background 0.15s ease, transform 0.15s ease;
}

    .mp-page .mp-intel-row:hover,
    .mp-page .mp-intel-row.is-active {
        background: color-mix(in srgb, var(--mp-intel-accent, #F58220) 9%, var(--mp-cloud));
        transform: translateX(2px);
    }

.mp-page .mp-intel-row-glyph {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--mp-intel-accent, #F58220) 14%, #fff);
    color: var(--mp-intel-accent, var(--mp-sunset));
}

    .mp-page .mp-intel-row-glyph svg {
        width: 18px;
        height: 18px;
    }

.mp-page .mp-intel-row-text {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.mp-page .mp-intel-row-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-page .mp-intel-row-why {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--mp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-page .mp-intel-row-cat {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
    background: var(--mp-cloud);
    color: var(--mp-muted);
}

/* ── PROVIDER NAME-HITS (2026-07) — businesses matched by name sit at
   the top of the panel in their own group. Same row anatomy as the
   service rows (keyboard nav + hover styles come free), but the search
   glyph becomes an identity: the business logo, or accent-tinted
   initials when no logo is on file. ── */
.mp-page .mp-intel-group {
    padding: 8px 12px 3px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mp-muted-2);
    user-select: none;
}

.mp-page .mp-intel-row-ava {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--mp-intel-accent, #F58220) 16%, #fff);
    color: var(--mp-intel-accent, var(--mp-sunset));
    border: 1px solid color-mix(in srgb, var(--mp-intel-accent, #F58220) 24%, transparent);
}

    .mp-page .mp-intel-row-ava img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.mp-page .mp-intel-row-tick {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--mp-sky-2);
    color: #fff;
    vertical-align: middle;
}

    .mp-page .mp-intel-row-tick svg {
        width: 8px;
        height: 8px;
    }

.mp-page .mp-intel-empty,
.mp-page .mp-intel-loading {
    padding: 10px 12px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mp-muted);
    display: flex;
    align-items: center;
    gap: 9px;
}

.mp-page .mp-intel-loading-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mp-sunset);
    animation: mp-intel-dot 0.9s ease-in-out infinite;
}

    .mp-page .mp-intel-loading-dot:nth-child(2) {
        animation-delay: 0.15s;
        background: var(--mp-sky);
    }

    .mp-page .mp-intel-loading-dot:nth-child(3) {
        animation-delay: 0.3s;
    }

@keyframes mp-intel-dot {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(-4px);
        opacity: 1;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   3. NATIVE-APP MOBILE SHELL  (≤720px)
   ────────────────────────────────────────────────────────────────────────
   The base sheet stacks the desktop layout; here we re-architect it into
   an app home screen. Order: hero copy → pinned search → category cells
   → register banner → ambient shopfront badge. The oversized illustration
   no longer eats the first viewport (that was the core complaint in the
   phone screenshot).
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

    /* 2026-07 v2 SCROLL FIX (the "can't reach category 06" report).
       height:auto + overflow:visible was the broken v4 approach this
       codebase has already retired on the directory, portal, register and
       checkout pages: this page's parent, the site-wide .main-content, is
       overflow:hidden + height:100% (the 100vh single-viewport philosophy),
       so a landing taller than the viewport was CLIPPED with no scrollbar
       and no way to reach the 6th category. Same v5 root-cause fix as the
       siblings: the page becomes its OWN scroll container, pinned to the
       viewport slot, scrolling internally. .main-content stays untouched
       (no shared-component regression). The 100dvh variant tracks the real
       visual viewport when mobile browser chrome collapses. overflow-x is
       clamped so nothing can drag the screen sideways again. */
    .mp-page {
        height: var(--mp-page-h);
        height: calc(100dvh - var(--mp-header-h, 90px));
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-top: 72px; /* the pinned search (sticky top:8px + 52px row) */
        scrollbar-width: thin;
        scrollbar-color: rgba(14, 14, 17, 0.25) transparent;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

        /* Neutralise the base sheet's keyboard rule
           (.mp-page:focus-within { height:auto; overflow-y:auto } in
           marketplace-landing.css). Its class+pseudo specificity beats the
           plain .mp-page above, and height:auto would grow the page past
           .main-content's clip again the moment the search field focuses —
           reintroducing the exact bug while typing. Same declarations at
           the same specificity; this file loads later, so it wins. */
        .mp-page:focus-within {
            height: var(--mp-page-h);
            height: calc(100dvh - var(--mp-header-h, 90px));
            min-height: 0;
            overflow-y: auto;
        }

        .mp-page .mp-shell,
        .mp-page .mp-split {
            display: block;
            height: auto;
            overflow: visible;
        }

        /* ── Content column becomes the app screen ── */
        .mp-page .mp-content {
            display: flex;
            flex-direction: column;
            padding: 6px 18px 0;
            max-width: 100%;
        }

        .mp-page .mp-eyebrow {
            order: 1;
            margin-bottom: 8px;
        }

        .mp-page .mp-headline {
            order: 2;
            font-size: clamp(1.5rem, 6.6vw, 1.9rem);
            line-height: 1.16;
            letter-spacing: -0.02em;
            margin-bottom: 8px;
        }

        .mp-page .mp-sub {
            order: 3;
            font-size: 0.86rem;
            line-height: 1.5;
            margin-bottom: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* ── Search: sticky like an app header, thumb-sized ── */
        .mp-page .mp-search-wrap {
            order: 4;
            position: sticky;
            top: 8px;
            z-index: 50;
            margin-bottom: 16px;
        }

        .mp-page .mp-search {
            border-radius: 18px;
            box-shadow: 0 12px 30px -12px rgba(14, 14, 17, 0.28), 0 2px 8px rgba(14, 14, 17, 0.08);
            background: rgba(255, 255, 255, 0.94);
            -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
        }

        .mp-page .mp-search-input {
            min-height: 52px;
            font-size: 16px; /* stop iOS zoom-on-focus */
        }

        .mp-page .mp-search-submit {
            min-height: 44px;
            border-radius: 14px;
        }

        .mp-page .mp-intel-panel {
            border-radius: 16px;
            max-height: 46vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* ── Category list → app cells ── */
        .mp-page .mp-cats {
            order: 5;
            display: grid;
            gap: 10px;
            margin-bottom: 18px;
        }

        .mp-page .mp-cat-item {
            position: relative;
        }

        .mp-page .mp-cat {
            display: flex;
            align-items: center;
            gap: 13px;
            min-height: 62px;
            padding: 12px 14px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 8px 22px -12px rgba(14, 14, 17, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85);
            transition: transform 0.14s ease, box-shadow 0.14s ease;
            -webkit-tap-highlight-color: transparent;
        }

            .mp-page .mp-cat:active {
                transform: scale(0.985);
                box-shadow: 0 4px 12px -8px rgba(14, 14, 17, 0.2);
            }

        /* Number badge inherits the category's accent — the row reads
       instantly even before the label is parsed. */
        .mp-page .mp-cat-num {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            border-radius: 13px;
            font-size: 0.78rem;
            font-weight: 800;
            color: #fff;
            background: linear-gradient(140deg, var(--mp-cat-accent, #F58220), color-mix(in srgb, var(--mp-cat-accent, #F58220) 68%, #0E0E11));
            box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--mp-cat-accent, #F58220) 65%, transparent);
            flex: 0 0 auto;
        }

        /* HORIZONTAL-OVERFLOW FIX (the "cards not showing responsively" report).
       The base sheet gives .mp-cat-name white-space:nowrap + ellipsis —
       correct inside its desktop grid track (minmax(0,1fr) lets it shrink),
       but this mobile pass rebuilt .mp-cat as a FLEX row, where a nowrap
       text item's min-content size wins (flex min-width:auto default). Long
       labels ("Verification, Inspection & Compliance") therefore forced the
       whole row — and the page — wider than the phone, clipping the arrow
       chips off the right edge. min-width:0 restores shrinkability and the
       label wraps to two lines instead of ellipsising (a directory should
       show its category names in full; the 62px cell absorbs two lines). */
        .mp-page .mp-cat-name {
            flex: 1 1 auto;
            min-width: 0;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            font-size: 0.94rem;
            font-weight: 700;
            line-height: 1.25;
        }

        .mp-page .mp-cat-arrow {
            margin-left: auto;
            width: 30px;
            height: 30px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            background: var(--mp-cloud);
            color: var(--mp-muted);
            flex: 0 0 auto;
        }

            .mp-page .mp-cat-arrow svg {
                width: 15px;
                height: 15px;
            }

        /* ── Bubble on touch → inline expansion UNDER the cell ──
       Hover doesn't exist here; marketplace-landing.js sets
       data-bubble-open on first tap. The bubble becomes part of the
       flow (no absolute overlay = no clipped content on small screens). */
        .mp-page .mp-cat-bubble {
            position: static;
            transform: none;
            width: auto;
            margin: -4px 4px 0;
            border-radius: 0 0 18px 18px;
            border-top: none;
            box-shadow: 0 14px 26px -16px rgba(14, 14, 17, 0.2);
            display: none;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            animation: mp-bubble-drop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.1);
        }

        .mp-page .mp-cat-item[data-bubble-open="true"] .mp-cat-bubble {
            display: block;
            transform: none;
        }

        /* hover/focus alone must NOT open it on touch (sticky-hover trap) */
        .mp-page .mp-cat-item:hover .mp-cat-bubble,
        .mp-page .mp-cat-item:focus-within .mp-cat-bubble {
            opacity: 1;
            visibility: visible;
            transform: none;
        }

        .mp-page .mp-cat-bubble-tail {
            display: none;
        }

    @keyframes mp-bubble-drop {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

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

    /* ── Register banner ── */
    .mp-page .mp-register-link {
        order: 6;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 52px;
        padding: 12px 16px;
        border-radius: 16px;
        background: var(--mp-grad-ink);
        color: #fff;
        box-shadow: 0 14px 30px -14px rgba(14, 14, 17, 0.5);
        margin-bottom: 20px;
    }

        .mp-page .mp-register-link strong {
            color: var(--mp-sunset);
        }

    /* ── Illustration → GONE on phones (2026-07 v2) ──
       The shopfront SVG earns its keep as the desktop split's left half;
       on a phone it was a 200px decoration under the register banner that
       only lengthened the scroll to nowhere. Dropping it entirely makes
       the register banner the natural closing element and shortens the
       page by a full swipe. (721–900px tablet keeps its small stacked
       illustration from the base sheet — untouched.) */
    .mp-page .mp-illustration {
        display: none;
    }

    /* Old stacked order put the picture first — the content wrapper now
       drives order via flex, so make sure the split children obey. */
    .mp-page .mp-split {
        display: flex;
        flex-direction: column;
    }

        .mp-page .mp-split > .mp-illustration {
            order: 2;
        }

        .mp-page .mp-split > .mp-content {
            order: 1;
        }
}

/* ════════════════════════════════════════════════════════════════════════
   3b. STACKED-TABLET SCROLL (721–900px) — same clip bug, one tier up
   ────────────────────────────────────────────────────────────────────────
   At ≤900px the base sheet stacks the split (content above, illustration
   below) but leaves the desktop single-viewport contract in force
   (.mp-page { height: var(--mp-page-h); overflow: hidden }). The stacked
   column — headline + sub + search + six categories + a 260px
   illustration — is taller than one viewport on most tablets-portrait,
   so the tail was clipped exactly like the phone. Same own-scroll-
   container fix, scoped to the tier the ≤720 shell doesn't cover. */
@media (max-width: 900px) and (min-width: 721px) {
    .mp-page {
        height: var(--mp-page-h);
        height: calc(100dvh - var(--mp-header-h, 90px));
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(14, 14, 17, 0.25) transparent;
        padding-bottom: 32px;
    }
}

/* Ultra-narrow (≤380px) — tighten without losing tap targets */
@media (max-width: 380px) {
    .mp-page .mp-content {
        padding-inline: 14px;
    }

    .mp-page .mp-cat {
        min-height: 58px;
        padding: 10px 12px;
    }

    .mp-page .mp-cat-num {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-page .mp-cat-bubble,
    .mp-page .mp-intel-panel,
    .mp-page .mp-intel-head-spark svg,
    .mp-page .mp-intel-loading-dot {
        animation: none !important;
        transition: none !important;
    }
}