/* ============================================================================
   wwwroot/css/marketplace-landing.css   (v3 — illustrated split-screen)
   ----------------------------------------------------------------------------
   COMPLETE REWRITE from v2.

   Brief:
     · Drop the busy horizontal card-deck. The marketplace landing should
       be quiet — a directory, not a showroom.
     · Two halves:
         LEFT  — large illustrated shopfront (SVG) in brand colours.
         RIGHT — headline, sub, search bar, numbered category list
                 (each item clickable with → arrow), small "register as
                 provider" link beneath.
     · One viewport, no scroll, full width. Phone falls back to stacked.

   BRAND PALETTE (anchored on the Ikhayalami wordmark + sun/house/wave logo)
     · Charcoal black    #0E0E11 / #1A1A1F   — wordmark, house silhouette
     · Sunset orange     #F58220 / #F89622   — the sun, the dot on the
                                                second "I", primary CTA
     · Sky blue / cyan   #56C4F8 / #3FA9D9   — wave detail, the dot on the
                                                "I", focus & active states
     · Cloud white-grey  #F4F6F9 / #FAFBFD   — surface, secondary tints

   The illustrated shop in the LEFT panel uses ALL of the above:
     · charcoal silhouette frame (wordmark colour)
     · sunset awning stripes (matches the sun)
     · sky-blue underwave (matches the wave)
     · sunset dots in the string-lights (matches the dot on the I)
   ============================================================================ */


/* ════════════════════════════════════════════════════════════════════════
   ROOT TOKENS — scoped to .mp-page so they don't leak into the rest of
   the site stylesheet
   ════════════════════════════════════════════════════════════════════════ */

.mp-page {
    --mp-ink: #0E0E11;
    --mp-ink-2: #1A1A1F;
    --mp-sunset: #F58220;
    --mp-sunset-2: #F89622;
    --mp-sky: #56C4F8;
    --mp-sky-2: #3FA9D9;
    --mp-cloud: #F4F6F9;
    --mp-cloud-2: #E8ECF1;
    --mp-mist: #FAFBFD;
    --mp-muted: #6B7280;
    --mp-muted-2: #9CA3AF;
    --mp-line: rgba(0, 0, 0, 0.06);
    --mp-line-2: rgba(0, 0, 0, 0.10);
    --mp-grad-sunset: linear-gradient(135deg, #F58220 0%, #F89622 100%);
    --mp-grad-sky: linear-gradient(135deg, #56C4F8 0%, #3FA9D9 100%);
    --mp-grad-ink: linear-gradient(135deg, #0E0E11 0%, #1A1A1F 100%);
    --mp-grad-brand: linear-gradient(95deg, #56C4F8 0%, #3FA9D9 45%, #F58220 100%);
    --mp-font: 'Outfit', system-ui, sans-serif;
    /* Single-viewport geometry — site header is 90px tall */
    --mp-header-h: 90px;
    --mp-page-h: calc(100vh - var(--mp-header-h));
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--mp-page-h);
    background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(86, 196, 248, 0.10) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 0% 100%, rgba(245, 130, 32, 0.06) 0%, transparent 55%), var(--mp-mist);
    font-family: var(--mp-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--mp-ink);
    overflow: hidden; /* the page lives inside one viewport */
}

    .mp-page * {
        box-sizing: border-box;
    }

/* The site's .main-content has overflow:hidden, which is fine because
   we don't escape it. Nothing to override at the parent level. */


/* ════════════════════════════════════════════════════════════════════════
   BREADCRUMB — sits at the very top of each marketplace page
   ────────────────────────────────────────────────────────────────────────
   Lightweight horizontal bar with the navigation path. Both pages get
   the same component so the user can flip between Browse and Register
   in one click without the marketplace loader firing.

   The links carry `data-no-loader` for the loader interceptor to skip;
   even without that attribute, hard `<a href>` navigation is fine
   because the loader typically only fires on fetch/form-submit paths.
   ════════════════════════════════════════════════════════════════════════ */

.mp-breadcrumb {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px clamp(20px, 3.6vw, 56px) 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mp-muted);
    letter-spacing: 0.01em;
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
}

.mp-breadcrumb-link,
.mp-breadcrumb-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    text-decoration: none;
    color: var(--mp-muted);
    transition: background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.mp-breadcrumb-link {
    background: rgba(14, 14, 17, 0.04);
    border: 1px solid var(--mp-cloud-2);
}

    .mp-breadcrumb-link:hover,
    .mp-breadcrumb-link:focus-visible {
        background: var(--mp-grad-ink);
        color: #fff;
        border-color: var(--mp-ink);
        outline: none;
    }

    .mp-breadcrumb-link svg {
        width: 12px;
        height: 12px;
    }

.mp-breadcrumb-current {
    background: rgba(86, 196, 248, 0.10);
    color: var(--mp-ink);
    font-weight: 700;
    border: 1px solid rgba(86, 196, 248, 0.30);
}

    .mp-breadcrumb-current::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--mp-sunset);
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.20);
    }

.mp-breadcrumb-sep {
    color: var(--mp-muted-2);
    font-size: 0.82rem;
    user-select: none;
}

/* MOBILE breadcrumb — chip-only, horizontal-scroll if needed.
   The "Register your business" / "Marketplace" labels are too long for
   320px phones, so we compact the chips, allow horizontal scroll, and
   hide the home-icon label (icon-only). */
@media (max-width: 720px) {
    .mp-breadcrumb {
        gap: 4px;
        padding: 8px 16px 0;
        font-size: 0.68rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

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

    .mp-breadcrumb-link,
    .mp-breadcrumb-current {
        padding: 4px 8px;
        font-size: 0.68rem;
    }

        .mp-breadcrumb-link svg {
            width: 11px;
            height: 11px;
        }

    .mp-breadcrumb-sep {
        font-size: 0.72rem;
    }

    /* Home link: keep only the icon on phones — saves the most width
       while still being recognizable. */
    .mp-breadcrumb-home-label {
        display: none;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   SHELL — the centred container, wide enough to give the illustration
   real presence
   ════════════════════════════════════════════════════════════════════════ */

.mp-shell {
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: clamp(20px, 3.6vw, 56px);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
}


/* ════════════════════════════════════════════════════════════════════════
   SPLIT — illustration left, content right
   ════════════════════════════════════════════════════════════════════════ */

.mp-split {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 5vw, 88px);
    align-items: center;
}


/* ────────────────────────────────────────────────────────────────────────
   LEFT — the illustrated shop. SVG fills the column, max ~520px.
   ──────────────────────────────────────────────────────────────────────── */

.mp-illustration {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

    .mp-illustration svg {
        width: 100%;
        max-width: 540px;
        height: auto;
        display: block;
        /* Slight tilt for hand-drawn character */
        filter: drop-shadow(0 24px 48px rgba(14, 14, 17, 0.10));
    }

    /* Subtle ambient halo behind the illustration — sky-blue wash, ties
   to the wave detail on the wordmark. */
    .mp-illustration::before {
        content: "";
        position: absolute;
        inset: 8% 6%;
        background: radial-gradient( ellipse 70% 60% at 50% 50%, rgba(86, 196, 248, 0.14) 0%, transparent 70% );
        z-index: -1;
        pointer-events: none;
    }


/* ────────────────────────────────────────────────────────────────────────
   RIGHT — content column: eyebrow, headline, sub, search, categories
   ──────────────────────────────────────────────────────────────────────── */

.mp-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 16px);
}

/* ── Eyebrow chip ─────────────────────────────────────────────────── */
.mp-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);
    align-self: flex-start;
}

.mp-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mp-sunset);
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.20);
}

/* ── HEADLINE — Outfit, NOT Signature. Big, tight, dramatic by weight. ── */
.mp-headline {
    font-family: var(--mp-font);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--mp-ink);
    margin: 0;
    max-width: 22ch;
}

.mp-headline-pivot {
    /* Brand gradient on "verified" */
    background: var(--mp-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: relative;
    white-space: nowrap;
}

    .mp-headline-pivot::after {
        content: "";
        position: absolute;
        left: 4%;
        right: 4%;
        bottom: -0.04em;
        height: 0.1em;
        background: var(--mp-grad-brand);
        border-radius: 100px;
        opacity: 0.8;
    }

.mp-sub {
    font-size: clamp(0.82rem, 0.9vw, 0.9rem);
    color: var(--mp-muted);
    line-height: 1.5;
    margin: 0;
    max-width: 60ch;
}

/* ── Search bar ──────────────────────────────────────────────────── */
.mp-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
    background: #fff;
    border: 1px solid var(--mp-cloud-2);
    border-radius: 100px;
    padding: 4px 4px 4px 18px;
    box-shadow: 0 10px 30px rgba(14, 14, 17, 0.06), 0 2px 6px rgba(14, 14, 17, 0.03);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

    .mp-search:focus-within {
        border-color: var(--mp-sky);
        box-shadow: 0 0 0 4px rgba(86, 196, 248, 0.18), 0 10px 30px rgba(14, 14, 17, 0.08);
    }

.mp-search-icon {
    display: inline-flex;
    color: var(--mp-muted);
    margin-right: 8px;
    flex-shrink: 0;
}

.mp-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.86rem;
    color: var(--mp-ink);
}

    .mp-search-input::placeholder {
        color: var(--mp-muted-2);
    }

.mp-search-submit {
    flex-shrink: 0;
    height: 38px;
    padding: 0 20px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    background: var(--mp-grad-sunset);
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(245, 130, 32, 0.34);
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}

    .mp-search-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(245, 130, 32, 0.46);
    }


/* ════════════════════════════════════════════════════════════════════════
   THE CATEGORY LIST — numbered, clickable, with arrow on the right
   ────────────────────────────────────────────────────────────────────────
   Each row is a full-width anchor. On hover the number takes the brand
   gradient and the arrow slides right. Premium understated.
   ════════════════════════════════════════════════════════════════════════ */

.mp-cats {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mp-cat {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
    border-radius: 10px;
    color: var(--mp-ink);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

    .mp-cat:hover,
    .mp-cat:focus-visible {
        background: #fff;
        border-color: var(--mp-cloud-2);
        transform: translateX(2px);
        box-shadow: 0 6px 18px rgba(14, 14, 17, 0.04);
        outline: none;
    }

    .mp-cat:focus-visible {
        border-color: var(--mp-sky);
        box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.18);
    }

.mp-cat-num {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--mp-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    transition: color 0.22s ease;
}

.mp-cat:hover .mp-cat-num,
.mp-cat:focus-visible .mp-cat-num {
    background: var(--mp-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.mp-cat-name {
    font-size: clamp(0.92rem, 1.05vw, 1.04rem);
    font-weight: 700;
    color: var(--mp-ink);
    letter-spacing: -0.012em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-cat-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mp-cloud);
    color: var(--mp-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
    flex-shrink: 0;
}

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

.mp-cat:hover .mp-cat-arrow,
.mp-cat:focus-visible .mp-cat-arrow {
    background: var(--mp-ink);
    color: #fff;
    transform: translateX(2px);
}


/* ════════════════════════════════════════════════════════════════════════
   REGISTER LINK — tiny ghost link below the category list
   ════════════════════════════════════════════════════════════════════════ */

.mp-register-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(14, 14, 17, 0.04);
    border: 1px solid var(--mp-cloud-2);
    color: var(--mp-ink-2);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.18s ease;
}

    .mp-register-link svg {
        width: 14px;
        height: 14px;
    }

    .mp-register-link:hover,
    .mp-register-link:focus-visible {
        background: var(--mp-grad-ink);
        color: #fff;
        border-color: var(--mp-ink);
        transform: translateY(-1px);
        outline: none;
    }

    .mp-register-link strong {
        background: var(--mp-grad-sunset);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: 800;
    }

    .mp-register-link:hover strong,
    .mp-register-link:focus-visible strong {
        /* On dark background, swap the gradient text for a clean sunset
           fill — text-fill-color: transparent + clip on a dark surface
           looks washed out otherwise. */
        -webkit-text-fill-color: var(--mp-sunset);
        color: var(--mp-sunset);
        background: none;
    }


/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — five tiers from desktop down to small phones
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .mp-split {
        gap: clamp(20px, 3.6vw, 48px);
    }

    .mp-illustration svg {
        max-width: 460px;
    }

    .mp-headline {
        font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    }
}

@media (max-width: 900px) {
    /* Tablet-landscape & below: stack — CONTENT on top (headline +
       search + categories are what the user came for), illustration
       below as decoration. This matches the mobile flow the brief
       asked for. */
    .mp-split {
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: start;
    }

    .mp-content {
        order: 1; /* show CONTENT above illustration on mobile */
    }

    .mp-illustration {
        order: 2;
    }

        .mp-illustration svg {
            max-width: 260px;
            margin-inline: auto;
        }

    .mp-shell {
        padding-block: 10px;
        align-items: flex-start;
    }
}

@media (max-width: 720px) {
    /* Phone — stay single-viewport. The brief is firm: everything must
       fit one screen, no vertical scroll. We do this by:
         · shrinking the illustration aggressively (200px max)
         · compacting category rows (5px padding)
         · hiding the eyebrow + sub paragraph (the headline + search are
           the verbs the user came for; the eyebrow + sub are decoration
           that's cheap to drop on small screens)
         · hiding the "Register here" pill (still accessible via the
           header CTA + the register icon on the bottom dock — the
           landing doesn't need to ask twice).
       If the search input is focused and the on-screen keyboard appears
       we ALLOW the body to scroll because the keyboard takes 40% of
       the viewport. The keyboard focus is detected via :focus-within
       on the page. */
    .mp-page {
        height: var(--mp-page-h);
        overflow: hidden;
    }

        .mp-page:focus-within {
            height: auto;
            min-height: var(--mp-page-h);
            overflow-y: auto;
        }

    .mp-shell {
        padding-block: 8px;
        padding-inline: 16px;
    }

    .mp-content {
        gap: 8px;
    }

    /* Drop the decorative bits */
    .mp-eyebrow,
    .mp-sub,
    .mp-register-link {
        display: none;
    }

    .mp-headline {
        font-size: clamp(1.3rem, 5.4vw, 1.6rem);
        max-width: 100%;
    }

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

    .mp-search {
        height: 44px;
    }

    .mp-search-submit {
        height: 36px;
        padding: 0 14px;
        font-size: 0.78rem;
    }

    .mp-search-input {
        font-size: 0.84rem;
    }

    .mp-cats {
        gap: 0;
    }

    .mp-cat {
        padding: 6px 10px;
        gap: 10px;
        grid-template-columns: 22px minmax(0, 1fr) auto;
    }

    .mp-cat-name {
        font-size: 0.9rem;
    }

    .mp-cat-num {
        font-size: 0.74rem;
    }

    .mp-cat-arrow {
        width: 24px;
        height: 24px;
    }

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

/* HIDE THE FLOATING ENGAGEMENT ICONS on mobile.
   On marketplace pages the left-edge floating dock (location pin,
   email, video play) crashes into the bottom of our category list
   and the search bar — the user's screenshot showed cat 04 vanishing
   behind those icons. Hide them on small viewports across both
   marketplace pages. */
@media (max-width: 900px) {
    body:has(.mp-page) .floating-engagement,
    body:has(.mp-page) .floating-settings-wrapper {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .mp-illustration svg {
        max-width: 170px;
    }

    .mp-headline {
        font-size: 1.25rem;
    }

    .mp-cat {
        padding: 5px 8px;
    }

    .mp-cat-name {
        font-size: 0.84rem;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ENTRANCE — staggered fade-in on load
   ════════════════════════════════════════════════════════════════════════ */

.mp-reveal {
    opacity: 0;
    transform: translateY(10px);
    animation: mp-rise 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

    .mp-reveal[data-delay="1"] {
        animation-delay: 0.05s;
    }

    .mp-reveal[data-delay="2"] {
        animation-delay: 0.12s;
    }

    .mp-reveal[data-delay="3"] {
        animation-delay: 0.19s;
    }

    .mp-reveal[data-delay="4"] {
        animation-delay: 0.26s;
    }

    .mp-reveal[data-delay="5"] {
        animation-delay: 0.33s;
    }

    .mp-reveal[data-delay="6"] {
        animation-delay: 0.40s;
    }

@keyframes mp-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mp-illustration svg {
    opacity: 0;
    animation: mp-shop-in 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.08s forwards;
}

@keyframes mp-shop-in {
    to {
        opacity: 1;
    }
}

/* Gentle sway on the awning string-lights — uses the existing class
   .mp-light-bulb in the SVG markup. Stops when the user prefers
   reduced motion. */
.mp-light-bulb {
    animation: mp-light-pulse 2.4s ease-in-out infinite;
    transform-origin: center;
}

    .mp-light-bulb:nth-child(2n) {
        animation-delay: 0.6s;
    }

    .mp-light-bulb:nth-child(3n) {
        animation-delay: 1.2s;
    }

@keyframes mp-light-pulse {
    0%, 100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   A11Y — reduced motion + high contrast
   ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .mp-reveal,
    .mp-illustration svg,
    .mp-light-bulb {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .mp-cat,
    .mp-cat-arrow,
    .mp-register-link {
        transition: none !important;
    }
}

@media (prefers-contrast: more) {
    .mp-page {
        --mp-line: rgba(0, 0, 0, 0.18);
        --mp-line-2: rgba(0, 0, 0, 0.30);
        --mp-muted: #4B5563;
    }
}