/* ==========================================================================
   WeReferAgents — new light "networking platform" design system.
   Namespace: --wr-* tokens / .wr-* classes. Deliberately separate from
   marketing.css's --wra- / .wra- dark theme, which stays untouched so every
   page not yet migrated to this system keeps rendering exactly as before.
   Palette validated with the dataviz skill's validate_palette.js against a
   #ffffff card surface (categorical CVD floor 21.6 tritan / worst-pair 47.2;
   aqua + yellow slots need the relief rule — always paired with a direct
   label or legend text, never color alone).
   ========================================================================== */

:root {
    /* Neutral scale (light) */
    --wr-bg: #f7f8fa;
    --wr-surface: #ffffff;
    --wr-surface-2: #f2f4f7;
    --wr-border: #e6e8ec;
    --wr-border-strong: #d8dbe1;
    --wr-ink-900: #14161a;
    --wr-ink-600: #5b6270;
    --wr-ink-400: #8b91a0;

    /* Accent — "Voltage", electric blue. Round-3 design-language rollout (approved concept:
       Abyss/Voltage/Signal/Bullion/Mint/Ember). Same role as the old --wr-accent (#2a78d6), just
       a more saturated, confident blue -- every existing consumer of --wr-accent picks this up
       automatically, nothing else needs to change. */
    --wr-accent: #3e7bfa;
    --wr-accent-2: #69a0ff;
    --wr-accent-soft: #eaf1fc;
    --wr-accent-ink: #184f95;

    /* "Signal" -- violet, reserved for AI-specific surfaces only (never a plain CTA color).
       Replaces the old --wr-cat-4 violet as the AI accent; --wr-cat-4 itself is unchanged below
       since it's still a fixed categorical slot used by existing charts. */
    --wr-ai: #8b6bff;
    --wr-ai-2: #b39cff;

    /* "Bullion" -- gold, strictly commission/money figures. New semantic token (previously
       commission amounts had no dedicated color and just used ink/accent). */
    --wr-money: #e7a83d;
    --wr-money-ink: #8a5a10;
    --wr-money-soft: rgba(231, 168, 61, 0.14);

    /* "Ember" -- orange, strictly time-sensitive/urgency badges (expiring opportunities, stalled
       referrals). Distinct from --wr-warning/--wr-danger below, which stay as general-purpose
       status colors. */
    --wr-urgent: #ff7a50;
    --wr-urgent-ink: #c1481f;
    --wr-urgent-soft: rgba(255, 122, 80, 0.12);

    /* Premium-polish aliases (Phase 1 redesign) — point at the existing
       validated palette above rather than introducing new colors, so every
       rule elsewhere in this file keeps working unchanged. */
    --wr-primary: var(--wr-accent);
    --wr-primary-dark: var(--wr-accent-ink);
    --wr-surface-alt: var(--wr-surface-2);
    --wr-primary-gradient: linear-gradient(135deg, var(--wr-accent) 0%, var(--wr-accent-ink) 100%);

    /* AI-specific gradient -- now Voltage -> Signal (blue -> violet), matching the approved
       concept exactly, rather than blue -> the general-purpose violet categorical slot. */
    --wr-ai-gradient: linear-gradient(135deg, var(--wr-accent) 0%, var(--wr-ai) 100%);
    --wr-ai-soft: rgba(139, 107, 255, 0.08);

    /* Premium motion curve (a Linear/Vercel-style ease-out) -- used in place of plain "ease" for
       hover/entrance transitions so movement feels considered rather than linear. */
    --wr-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Categorical (donut / multi-series), fixed order — never cycled/reassigned */
    --wr-cat-1: #2a78d6; /* blue */
    --wr-cat-2: #1baf7a; /* aqua */
    --wr-cat-3: #eda100; /* yellow */
    --wr-cat-4: #4a3aa7; /* violet */
    --wr-cat-5: #e34948; /* red */

    /* Status (fixed, never reused as a series color) — Mint replaces the old flat green for
       "success" so it matches the approved palette; --wr-warning/--wr-danger unchanged. */
    --wr-success: #2fd48a;
    --wr-warning: #c98500;
    --wr-danger: #d03b3b;

    /* Typography scale */
    --wr-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* "Data/mono" role -- every currency, percentage, and timestamp figure app-wide renders in
       this face with tabular figures, the "financial terminal" signal from the approved concept.
       No external font fetch (the app doesn't rely on custom webfonts anywhere), so this is a
       system monospace stack only. */
    --wr-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
    --wr-text-xs: 0.75rem;
    --wr-text-sm: 0.8125rem;
    --wr-text-base: 0.9375rem;
    --wr-text-lg: 1.125rem;
    --wr-text-xl: 1.5rem;
    --wr-text-2xl: 2rem;
    --wr-text-3xl: 2.5rem;
    --wr-heading-tracking: -0.02em;

    /* Spacing scale (4px base) */
    --wr-space-1: 4px;
    --wr-space-2: 8px;
    --wr-space-3: 12px;
    --wr-space-4: 16px;
    --wr-space-5: 24px;
    --wr-space-6: 32px;
    --wr-space-8: 48px;

    /* Radius / elevation */
    --wr-radius-sm: 8px;
    --wr-radius-md: 12px;
    --wr-radius-lg: 16px;
    --wr-shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06);
    --wr-shadow-md: 0 4px 16px rgba(20, 22, 26, 0.08);
    --wr-shadow-lg: 0 12px 32px rgba(20, 22, 26, 0.10);
    --wr-shadow-xl: 0 24px 56px rgba(20, 22, 26, 0.14), 0 4px 12px rgba(20, 22, 26, 0.06);

    /* Dark-navy premium chrome tokens -- from the approved Dashboard V2 "Command Center" mockup
       (dashboard-v2-concept.html), used by SidebarNavV2's dark re-theme and the AI Daily Brief hero's
       glow treatment. Additive only; every existing --wr-* token above is unchanged. */
    --v2-ink-950: #0a0f1e;
    --v2-ink-925: #101830;
    --v2-ink-900b: #161f3d;
    --v2-line-dark: rgba(232, 236, 245, 0.09);
    --v2-on-dark: #e8ecf5;
    --v2-on-dark-muted: #8b93ad;
    --v2-radius-xl: 20px;
    --v2-glow: 0 24px 70px -20px rgba(74, 58, 167, 0.45);

    /* "Abyss" -- the approved concept's command-deck surface names, aliased onto the v2-ink-*
       values above rather than duplicated (same colors, same variables, just the names the
       concept and this rollout's plan use so intent reads clearly at each call site). */
    --wr-deck-950: var(--v2-ink-950);
    --wr-deck-900: var(--v2-ink-925);
    --wr-deck-850: var(--v2-ink-900b);
}

/* .wra-dashboard-shell / .wra-dashboard-main / .wra-dashboard-content are the root wrapper
   classes both DashboardLayout.razor (V1) and DashboardLayoutV2.razor (V2) render -- they
   collide with marketing.css's older, unrelated dark "wra-" theme (marketing.css defines
   .wra-dashboard-shell { background: var(--wra-navy) }, a near-black #070c16, and
   marketing.css loads before this file in App.razor's <head>). Nothing here ever overrode
   that background, so it silently bled through wherever the shell's own light content didn't
   fully cover every pixel -- inter-section gaps, the space below the last section when a page
   is shorter than the viewport. Invisible as long as content happened to fill every pixel;
   a real, visible bug (confirmed live: .wra-dashboard-shell computed to rgb(7,12,22) with
   .wra-dashboard-content fully transparent) once any layout has room to breathe. Fixes both
   V1 and V2 uniformly since both share these exact class names. */
.wra-dashboard-shell,
.wra-dashboard-main,
.wra-dashboard-content {
    background: var(--wr-bg);
}

/* ==========================================================================
   Shell chrome — Sidebar / TopBar / Breadcrumbs
   These are single-sourced (SidebarNav.razor / TopBar.razor / the breadcrumb
   markup in DashboardLayout.razor render nowhere else), so it's safe to
   rename their classes outright rather than fork new markup.
   ========================================================================== */

.wr-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--wr-surface);
    border-right: 1px solid var(--wr-border);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    z-index: 100;
}

.wr-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px;
    border-bottom: 1px solid var(--wr-border);
}

.wr-sidebar-brand {
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--wr-ink-900);
    letter-spacing: -0.02em;
}

    .wr-sidebar-brand span {
        color: var(--wr-accent);
    }

.wr-sidebar-collapse-btn {
    background: transparent;
    border: 1px solid var(--wr-border);
    color: var(--wr-ink-400);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .wr-sidebar-collapse-btn:hover {
        color: var(--wr-ink-900);
        border-color: var(--wr-accent);
    }

.wr-sidebar-nav {
    padding: 14px 10px;
    flex: 1;
}

.wr-sidebar-section-label {
    display: block;
    color: var(--wr-ink-400);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0 10px;
    margin-bottom: 6px;
    white-space: nowrap;
}

.wr-sidebar-nav ul {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}

.wr-sidebar-group {
    margin-bottom: 4px;
}

.wr-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border-radius: 8px;
    color: var(--wr-ink-600);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

    .wr-sidebar-link i {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1rem;
        border-radius: 6px;
        transition: background 0.2s var(--wr-ease), color 0.2s var(--wr-ease);
    }

    .wr-sidebar-link:hover {
        background: var(--wr-surface-2);
        color: var(--wr-ink-900);
        transform: translateX(2px);
    }

    .wr-sidebar-link.active {
        position: relative;
        background: linear-gradient(90deg, var(--wr-accent-soft) 0%, rgba(234, 241, 252, 0.35) 100%);
        color: var(--wr-accent-ink);
        font-weight: 700;
        box-shadow: inset 0 0 0 1px rgba(42, 120, 214, 0.12);
    }

        .wr-sidebar-link.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 3px;
            border-radius: 0 999px 999px 0;
            background: var(--wr-primary-gradient);
        }

/* "Setup Assistant" is a <button> (it triggers a real action, not a route), so it needs the same
   reset a plain <a> doesn't -- everything else about it matches .wr-sidebar-link exactly.
   SidebarNavV2.razor's own scoped CSS has a `.wr-sidebar-sublink[b-xxxxx]` rule that only ever
   matches raw elements written directly in that component's markup, never a <NavLink>-rendered
   <a> (NavLink is a separate component, so Blazor's CSS isolation attribute never lands on the
   element it renders) -- every other sublink is NavLink-based and so never actually receives that
   padding-left in practice, but this raw <button> does, making it sit ~28px further right than
   its siblings. !important reproduces the real (lower) padding every other sublink actually gets. */
.wr-sidebar-tour-btn {
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    padding-left: 9px !important;
}

        /* Icon-in-a-chip for the active item -- a small filled badge rather than just
           recoloring the glyph, the pattern premium sidebars (Linear/Notion) use to make
           the current section unmistakable at a glance. */
        .wr-sidebar-link.active i {
            background: var(--wr-primary-gradient);
            color: #fff;
            box-shadow: var(--wr-shadow-sm);
        }

@media (prefers-reduced-motion: reduce) {
    .wr-sidebar-link {
        transition: none;
    }

        .wr-sidebar-link:hover {
            transform: none;
        }
}

/* Collapsed (desktop icon-only) state */
.wra-sidebar-collapsed .wr-sidebar {
    width: 76px;
}

    .wra-sidebar-collapsed .wr-sidebar-brand,
    .wra-sidebar-collapsed .wr-sidebar-section-label,
    .wra-sidebar-collapsed .wr-sidebar-link span {
        display: none;
    }

    .wra-sidebar-collapsed .wr-sidebar-header {
        justify-content: center;
    }

    .wra-sidebar-collapsed .wr-sidebar-collapse-btn i {
        transform: rotate(180deg);
    }

    .wra-sidebar-collapsed .wr-sidebar-link {
        justify-content: center;
    }

    .wra-sidebar-collapsed .wr-sidebar-footer {
        display: none;
    }

    .wra-sidebar-collapsed .wr-sidebar-ask-ai span {
        display: none;
    }

    .wra-sidebar-collapsed .wr-sidebar-ask-ai {
        padding: 10px;
    }

/* ---------- Persistent "Ask AI" sidebar button ---------- */
.wr-sidebar-ask-ai {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: none;
    border-radius: var(--wr-radius-md);
    background: var(--wr-ai-gradient);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--wr-shadow-sm);
    transition: box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease);
}

    .wr-sidebar-ask-ai:hover {
        box-shadow: var(--wr-shadow-md);
        transform: translateY(-1px);
    }

@media (prefers-reduced-motion: reduce) {
    .wr-sidebar-ask-ai {
        transition: none;
    }

        .wr-sidebar-ask-ai:hover {
            transform: none;
        }
}

/* ---------- Sidebar nav groups (collapsible sections, all roles) ---------- */
.wr-sidebar-group > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .wr-sidebar-group > summary::-webkit-details-marker {
        display: none;
    }

    /* margin-left: auto on the trailing pseudo-element is what pins the chevron to the row's
       right edge -- previously the row used justify-content: space-between across exactly 3 flex
       items (icon, label, this chevron), which spread the icon to the far left and the label out
       to the middle/right with a large gap between them instead of sitting next to its icon. */
    .wr-sidebar-group > summary::after {
        content: "▾";
        font-size: 0.65rem;
        color: var(--wr-ink-400);
        margin-left: auto;
        transition: transform 0.15s ease;
    }

.wr-sidebar-group:not([open]) > summary::after {
    transform: rotate(-90deg);
}

.wr-sidebar-lock {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--wr-warning);
    flex-shrink: 0;
}

.wr-sidebar-link-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wr-sidebar-pro-badge {
    margin-left: auto;
    padding: 2px 7px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--wr-warning);
    background: rgba(201, 133, 0, 0.12);
    border-radius: 999px;
    flex-shrink: 0;
}

.wr-sidebar-link-locked {
    color: var(--wr-ink-400);
}

    .wr-sidebar-link-locked:hover {
        color: var(--wr-ink-600);
    }

/* ---------- Sidebar footer (plan glance + upgrade CTA) ---------- */
.wr-sidebar-footer {
    margin-top: auto;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--wr-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wr-sidebar-footer-upgrade {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--wr-radius-sm);
    background: var(--wr-primary-gradient);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

    .wr-sidebar-footer-upgrade:hover {
        opacity: 0.9;
    }

/* ---------- Top bar ---------- */
.wr-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--wr-border);
    position: sticky;
    top: 0;
    z-index: 90;
}

.wr-topbar-mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--wr-border);
    color: var(--wr-ink-900);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.wr-topbar-search {
    flex: 1;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--wr-surface-2);
    border: 1px solid var(--wr-border);
    border-radius: 10px;
    padding: 9px 14px;
    color: var(--wr-ink-400);
}

    .wr-topbar-search input {
        background: transparent;
        border: none;
        outline: none;
        color: var(--wr-ink-900);
        font-size: 0.85rem;
        width: 100%;
    }

        .wr-topbar-search input::placeholder {
            color: var(--wr-ink-400);
        }

.wr-topbar-search-kbd {
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 0.68rem;
    font-family: inherit;
    color: var(--wr-ink-400);
    background: var(--wr-surface);
    border: 1px solid var(--wr-border-strong);
    border-radius: 5px;
}

.wr-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wr-topbar-quick-create {
    background: var(--wr-primary-gradient);
    padding: 9px 16px;
    font-size: 0.82rem;
    white-space: nowrap;
}

    .wr-topbar-quick-create:hover {
        background: var(--wr-primary-gradient);
        opacity: 0.92;
    }

.wr-topbar-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wr-surface-2);
    border: 1px solid var(--wr-border);
    color: var(--wr-ink-400);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .wr-topbar-icon-btn:hover {
        color: var(--wr-ink-900);
        border-color: var(--wr-accent);
    }

.wr-topbar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--wr-accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wr-topbar-dropdown {
    position: relative;
}

.wr-topbar-dropdown-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
    box-shadow: var(--wr-shadow-lg);
    padding: 10px;
    z-index: 200;
}

.wr-topbar-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--wr-border);
    border-radius: 999px;
    padding: 5px 12px 5px 5px;
    color: var(--wr-ink-900);
    cursor: pointer;
}

    .wr-topbar-user-btn img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
    }

    .wr-topbar-user-name {
        font-size: 0.82rem;
        font-weight: 600;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.wr-topbar-user-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .wr-topbar-user-panel a,
    .wr-topbar-user-panel button {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 8px;
        color: var(--wr-ink-600);
        text-decoration: none;
        font-size: 0.85rem;
        background: transparent;
        border: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
    }

        .wr-topbar-user-panel a:hover,
        .wr-topbar-user-panel button:hover {
            background: var(--wr-surface-2);
            color: var(--wr-ink-900);
        }

    .wr-topbar-user-panel form {
        margin: 0;
    }

/* ---------- Plan badge (single-sourced: only TopBar.razor + Dashboard.razor render it) ---------- */
.wr-plan-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.wr-plan-badge.free { background: var(--wr-surface-2); color: var(--wr-ink-600); border: 1px solid var(--wr-border-strong); }
.wr-plan-badge.professional { background: var(--wr-accent-soft); color: var(--wr-accent-ink); }
.wr-plan-badge.elite { background: rgba(237, 161, 0, 0.14); color: #8a6300; }
.wr-plan-badge.platinum {
    background: linear-gradient(135deg, var(--wr-cat-3), #c98500);
    color: #fff;
}

/* ---------- Breadcrumbs ---------- */
.wr-breadcrumbs {
    padding: 14px 24px 0;
    font-size: 0.8rem;
    color: var(--wr-ink-400);
}

    .wr-breadcrumbs a {
        color: var(--wr-ink-400);
        text-decoration: none;
    }

        .wr-breadcrumbs a:hover {
            color: var(--wr-accent);
        }

    .wr-breadcrumb-sep {
        margin: 0 8px;
        opacity: 0.6;
    }

    .wr-breadcrumb-current {
        color: var(--wr-ink-900);
        font-weight: 600;
    }

/* ---------- Mobile drawer (mirrors marketing.css's breakpoint/behavior) ---------- */
@media (max-width: 992px) {
    .wr-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        height: 100vh;
        transition: left 0.25s ease;
        box-shadow: var(--wr-shadow-lg);
    }

    .wr-sidebar-collapse-btn {
        display: none;
    }

    .wra-sidebar-mobile-open .wr-sidebar {
        left: 0;
    }

    .wr-topbar {
        z-index: 150;
    }

    .wr-topbar-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .wr-topbar-search {
        display: none;
    }

    .wr-topbar-user-name {
        display: none;
    }

    .wr-topbar-quick-create span {
        display: none;
    }
}

/* Phone-width overflow fix: at 992px the search box, username, and quick-create label already hide,
   but on real phones (~390px) the remaining row -- mobile toggle + icon-only quick-create + plan
   badge text + notifications + messages + help + avatar -- still doesn't fit, forcing the whole
   page to scroll horizontally. The plan badge's text is the one remaining unbounded-width element
   in that row (every sibling is a fixed-size icon button), so it's what actually needs to go at this
   width; nothing else in .wr-topbar-actions can shrink further without losing a real control. Scoped
   to the topbar specifically -- PlanBadge instances elsewhere (sidebar footer, dashboard hero) are
   unaffected. */
@media (max-width: 480px) {
    .wr-topbar-actions .wr-plan-badge {
        display: none;
    }
}

/* ==========================================================================
   Dashboard page — everything below is scoped under .wr-dashboard-page so it
   never leaks onto (or fights with) a not-yet-redesigned page's .wra-* rules.
   ========================================================================== */

.wr-dashboard-page {
    background: var(--wr-bg);
    min-height: 100%;
    padding: var(--wr-space-6) var(--wr-space-6) var(--wr-space-8);
    font-family: var(--wr-font-sans);
    color: var(--wr-ink-900);
}

/* .wra-header is now position:sticky (not fixed), so it occupies its own space in normal
   document flow and content placed directly under MainLayout needs no manual clearance any
   more -- this class is a no-op kept only so existing usages (ListYourBusiness.razor) don't
   need to be touched. Remove those usages and this rule together if convenient later. */
.wr-public-page-offset {
    padding-top: 0;
}

    .wr-dashboard-page .wra-loading-panel {
        color: var(--wr-ink-600);
    }

    .wr-dashboard-page .wra-loading-spinner {
        border-color: var(--wr-border);
        border-top-color: var(--wr-accent);
    }

    @media (max-width: 768px) {
        .wr-dashboard-page {
            padding: var(--wr-space-4) var(--wr-space-4) var(--wr-space-6);
        }
    }

.wr-dashboard-page .wr-section {
    margin-bottom: var(--wr-space-8);
}

/* Stronger heading hierarchy + tabular numerals wherever digits sit in a KPI/metric context --
   scoped to .wr-dashboard-page rather than global h1-h6 so public/marketing pages are untouched. */
.wr-dashboard-page h1,
.wr-dashboard-page h2,
.wr-dashboard-page h3 {
    letter-spacing: var(--wr-heading-tracking);
    font-weight: 800;
}

.wr-dashboard-page .wr-section-head h2 {
    font-weight: 800;
}

.wr-dashboard-page .wr-kpi-value,
.wr-dashboard-page .wr-pipeline-stage-count,
.wr-dashboard-page .wr-progress-ring-value,
.wr-money-figure {
    font-variant-numeric: tabular-nums;
    font-family: var(--wr-font-mono);
}

/* "Money figure" -- the shared utility class for every commission/fee/revenue number app-wide
   (StatCard, MetricCard, CRMCard, HeroMetric, SparklineCard all apply this to their value slot
   when the figure represents currency). Bullion gold + tabular monospace, matching the approved
   concept's "financial terminal" numeric treatment. Not scoped to .wr-dashboard-page since money
   figures also appear on public-facing agent/vendor profile cards. */
.wr-money-figure {
    color: var(--wr-money-ink);
}

/* 12-column bento grid -- replaces the old 70/30 stacked split-panel. Each section is wrapped in a
   .wr-grid-span-N div (explicit spans, not fragile nth-child ordering); align-items:start keeps
   cells their own natural height instead of stretching to match the tallest neighbor in the row,
   which is what gives a bento layout its varied-height character. */
.wr-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--wr-space-5);
    align-items: start;
}

    /* Grid gap already provides spacing -- the section's own bottom margin (meant for the old
       linear stack) would double up unevenly across cells of different heights. */
    .wr-dashboard-grid .wr-section {
        margin-bottom: 0;
    }

.wr-grid-span-12 { grid-column: span 12; }
.wr-grid-span-8 { grid-column: span 8; }
.wr-grid-span-6 { grid-column: span 6; }
.wr-grid-span-4 { grid-column: span 4; }

.wr-grid-stack {
    display: flex;
    flex-direction: column;
    gap: var(--wr-space-5);
}

@media (max-width: 1024px) {
    .wr-grid-span-8,
    .wr-grid-span-6,
    .wr-grid-span-4 {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {
    .wr-dashboard-grid {
        gap: var(--wr-space-4);
    }
}

.wr-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wr-space-3);
    margin-bottom: var(--wr-space-4);
}

    .wr-section-head h2 {
        font-size: var(--wr-text-lg);
        font-weight: 700;
        color: var(--wr-ink-900);
        margin: 0;
    }

    .wr-section-head p {
        font-size: var(--wr-text-sm);
        color: var(--wr-ink-600);
        margin: 2px 0 0;
    }

.wr-sample-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wr-ink-400);
    background: var(--wr-surface-2);
    border: 1px solid var(--wr-border);
    border-radius: 999px;
    padding: 2px 8px;
}

/* ---------- Buttons ---------- */
.wr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--wr-radius-md);
    font-size: var(--wr-text-sm);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

    .wr-btn:active {
        transform: translateY(1px);
    }

.wr-btn-primary {
    background: var(--wr-accent);
    color: #fff;
}

    .wr-btn-primary:hover {
        background: var(--wr-accent-ink);
    }

.wr-btn-outline {
    background: var(--wr-surface);
    border-color: var(--wr-border-strong);
    color: var(--wr-ink-900);
}

    .wr-btn-outline:hover {
        border-color: var(--wr-accent);
        color: var(--wr-accent-ink);
    }

.wr-btn-lg {
    padding: 13px 24px;
    font-size: var(--wr-text-base);
}

.wr-btn-sm {
    padding: 7px 13px;
    font-size: var(--wr-text-xs);
}

/* ---------- Card / panel primitive ---------- */
.wr-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: var(--wr-space-5);
}

/* ---------- Hero ---------- */
.wr-hero {
    display: flex;
    align-items: center;
    gap: var(--wr-space-6);
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-md);
    padding: var(--wr-space-6);
    margin-bottom: var(--wr-space-6);
}

    @media (max-width: 768px) {
        .wr-hero {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--wr-space-4);
        }
    }

.wr-hero-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--wr-surface);
    box-shadow: 0 0 0 1px var(--wr-border);
    flex-shrink: 0;
}

.wr-hero-ring {
    position: relative;
    flex-shrink: 0;
}

    .wr-hero-ring .wr-hero-avatar {
        /* inset + width/height:auto would look right for a non-replaced element, but per the
           CSS2.1 absolutely-positioned-replaced-element sizing rules, an <img> with width/height
           auto ignores the offsets entirely and falls back to its intrinsic size -- so the fill
           has to be spelled out explicitly instead of relying on offset-solving. */
        position: absolute;
        top: 8px;
        left: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
    }

.wr-hero-body {
    flex: 1;
    min-width: 0;
}

/* Business-style hero variant (Vendor Portal) -- a logo tile, not a personal photo-in-a-ring,
   so the hero itself signals "this is a business account" rather than reusing the Agent hero. */
.wr-hero-logo {
    width: 88px;
    height: 88px;
    border-radius: var(--wr-radius-lg);
    background: var(--wr-surface-2);
    border: 1px solid var(--wr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    color: var(--wr-ink-400);
    font-size: 1.75rem;
    flex-shrink: 0;
}

.wr-status-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    text-transform: capitalize;
}

.wr-status-pill.active { background: rgba(12, 163, 12, 0.10); color: var(--wr-success); }
.wr-status-pill.pending { background: rgba(201, 133, 0, 0.12); color: var(--wr-warning); }
.wr-status-pill.inactive { background: var(--wr-surface-2); color: var(--wr-ink-600); }

.wr-hero-greeting {
    display: flex;
    align-items: center;
    gap: var(--wr-space-3);
    flex-wrap: wrap;
}

    .wr-hero-greeting h1 {
        font-size: var(--wr-text-2xl);
        font-weight: 800;
        margin: 0;
        letter-spacing: -0.01em;
    }

.wr-hero-text {
    color: var(--wr-ink-600);
    font-size: var(--wr-text-base);
    margin: var(--wr-space-2) 0 var(--wr-space-4);
    max-width: 60ch;
}

.wr-hero-ctas {
    display: flex;
    gap: var(--wr-space-3);
    flex-wrap: wrap;
}

/* ---------- KPI row ---------- */
.wr-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--wr-space-4);
}

/* Command Deck overlap seam -- pulls a KPI row up to float over a CommandDeckHero's dark bottom
   edge, the same "glass cards straddle the hero/canvas seam" pattern as KpiStrip.razor.css on the
   Agent dashboard (see that file's own comment on why the blur only reads as "glass" with real
   depth behind it). Opt-in modifier alongside .wr-kpi-row, not a replacement -- every other
   .wr-kpi-row usage (Billing, Seller Leads, Referral Payments, etc.) is unaffected. Flex, not
   grid's auto-fit, for the same reason KpiStrip switched: a lone last-row tile with grid auto-fit
   gets stranded at its minmax width with a dead gap beside it; flex-grow fills the row instead. */
.wr-kpi-row.wr-kpi-row-glass {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
    margin-top: -2.6rem;
}

    .wr-kpi-row.wr-kpi-row-glass .wr-kpi-card {
        flex: 1 1 172px;
    }

@media (max-width: 720px) {
    .wr-kpi-row.wr-kpi-row-glass {
        margin-top: -1.6rem;
    }
}

/* Command Deck hero action row -- CommandDeckHero.razor.css can't style this: it's passed in as
   ChildContent from each caller (AdminDashboard/VendorDashboard/BrokerageDashboard), and Blazor CSS
   isolation scopes ChildContent markup to the CALLING component's own scope attribute, not the
   component it's rendered inside of -- so these classes have to live here, unscoped, to work
   consistently across every CommandDeckHero caller. Same visual recipe as DailyBriefHero.razor.css's
   .wr-brief-btn-primary/.wr-brief-btn-ghost (which don't have this problem, since those buttons are
   written directly inside DailyBriefHero.razor itself, not passed in from elsewhere). */
.wr-cd-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

.wr-cd-hero-btn-primary {
    background: linear-gradient(120deg, var(--wr-accent, #3e7bfa), var(--wr-ai, #8b6bff));
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 22px -8px rgba(62, 123, 250, 0.6);
}

    .wr-cd-hero-btn-primary:hover {
        filter: brightness(1.08);
        color: #fff;
    }

.wr-cd-hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(232, 236, 245, 0.08);
    color: #fff;
    border: 1px solid rgba(232, 236, 245, 0.14);
}

    .wr-cd-hero-btn-ghost:hover {
        background: rgba(232, 236, 245, 0.14);
        color: #fff;
    }

/* Command Deck glass KPI card -- same recipe as KpiStrip.razor.css's .wr-kpi (frosted/blurred,
   floating on the dark hero's bottom edge), reused here so non-Agent dashboards (Admin/Vendor/
   Brokerage) using the plain KpiCard component can opt into the identical visual instead of a
   second, duplicated component. */
.wr-kpi-card.wr-kpi-card-glass {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--wr-radius-lg);
    box-shadow: 0 20px 38px -18px rgba(10, 14, 26, 0.32), 0 0 0 1px rgba(10, 14, 26, 0.02);
}

    .wr-kpi-card.wr-kpi-card-glass:hover {
        box-shadow: 0 26px 48px -18px rgba(10, 14, 26, 0.38), 0 0 0 1px rgba(10, 14, 26, 0.02);
        border-color: rgba(255, 255, 255, 0.6);
    }

.wr-kpi-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: var(--wr-space-4) var(--wr-space-4) var(--wr-space-3);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--wr-space-2);
    transition: box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease), border-color 0.2s var(--wr-ease);
}

    a.wr-kpi-card:hover {
        box-shadow: var(--wr-shadow-md);
        border-color: var(--wr-accent);
        transform: translateY(-2px);
    }

.wr-kpi-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wr-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--wr-accent-soft) 0%, rgba(42, 120, 214, 0.20) 100%);
    color: var(--wr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
}

.wr-kpi-info {
    color: var(--wr-ink-400);
    font-size: 0.85rem;
}

/* Free-plan locked-metric treatment -- see KpiCard's Locked parameter. Subtle: real label kept,
   value dimmed, small corner lock icon + tooltip. No "Upgrade Required" text block. */
.wr-kpi-card.wr-kpi-locked {
    opacity: 0.88;
}

    .wr-kpi-card.wr-kpi-locked:hover {
        border-color: var(--wr-warning);
    }

    .wr-kpi-card.wr-kpi-locked .wr-kpi-info {
        color: var(--wr-warning);
    }

.wr-kpi-value-locked {
    font-size: var(--wr-text-lg, 1.05rem);
    font-weight: 700;
    color: var(--wr-ink-400);
}

/* ---------- Priority Tasks (Dashboard section B) ---------- */
.wr-task-list {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.wr-task-item {
    display: flex;
    align-items: center;
    gap: var(--wr-space-4);
    padding: var(--wr-space-4) var(--wr-space-5);
    border-bottom: 1px solid var(--wr-border);
}

    .wr-task-item:last-child {
        border-bottom: none;
    }

.wr-task-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--wr-radius-md);
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.wr-task-body {
    flex: 1;
    min-width: 0;
}

.wr-task-title {
    font-weight: 700;
    font-size: var(--wr-text-sm, 0.9rem);
    color: var(--wr-ink-900);
}

.wr-task-explanation {
    margin: 2px 0 0;
    font-size: var(--wr-text-xs);
    color: var(--wr-ink-600);
}

.wr-task-urgency {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    white-space: nowrap;
    flex-shrink: 0;
}

.wr-task-action {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .wr-task-item {
        flex-wrap: wrap;
    }

    .wr-task-action {
        margin-left: 46px;
    }
}

/* ---------- Network Activity pending-request badge (Dashboard section D) ---------- */
.wr-network-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wr-text-xs);
    font-weight: 600;
    color: var(--wr-accent-ink);
    background: var(--wr-accent-soft);
    border-radius: 999px;
    padding: 6px 12px;
    margin-bottom: var(--wr-space-3);
}

/* ---------- Date-range selector (Dashboard KPI row) ---------- */
.wr-range-selector {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.wr-range-btn {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    color: var(--wr-ink-600);
    border-radius: var(--wr-radius-md);
    padding: 6px 12px;
    font-size: var(--wr-text-xs);
    font-weight: 600;
    cursor: pointer;
}

    .wr-range-btn:hover {
        border-color: var(--wr-accent);
        color: var(--wr-accent-ink);
    }

    .wr-range-btn.active {
        background: var(--wr-accent);
        border-color: var(--wr-accent);
        color: #fff;
    }

    .wr-range-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.wr-range-date {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    color: var(--wr-ink-900);
    border-radius: var(--wr-radius-md);
    padding: 5px 8px;
    font-size: var(--wr-text-xs);
}

.wr-kpi-value {
    font-size: var(--wr-text-2xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}

.wr-kpi-label {
    font-size: var(--wr-text-xs);
    color: var(--wr-ink-600);
    font-weight: 600;
}

.wr-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--wr-text-xs);
    font-weight: 700;
}

    .wr-kpi-trend.up { color: var(--wr-success); }
    .wr-kpi-trend.down { color: var(--wr-danger); }

.wr-kpi-spark {
    width: 100%;
    height: 28px;
}

/* ---------- AI Networking Center ---------- */
.wr-ai-panel {
    background: linear-gradient(155deg, var(--wr-accent-soft) 0%, var(--wr-surface) 55%);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-md);
    padding: var(--wr-space-5);
}

.wr-ai-panel-head {
    display: flex;
    align-items: center;
    gap: var(--wr-space-3);
    margin-bottom: var(--wr-space-4);
}

.wr-ai-panel-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--wr-radius-md);
    background: var(--wr-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.wr-ai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--wr-space-3);
}

.wr-ai-item {
    display: flex;
    gap: var(--wr-space-3);
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
    padding: var(--wr-space-3) var(--wr-space-4);
}

.wr-ai-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.wr-ai-item p {
    margin: 0;
    font-size: var(--wr-text-sm);
    color: var(--wr-ink-900);
}

/* ---------- Networking feed ---------- */
.wr-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--wr-space-4);
}

.wr-feed-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: var(--wr-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--wr-space-3);
    transition: box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease);
}

    .wr-feed-card:hover {
        box-shadow: var(--wr-shadow-md);
        transform: translateY(-2px);
    }

.wr-feed-card-top {
    display: flex;
    align-items: center;
    gap: var(--wr-space-3);
}

.wr-feed-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.wr-feed-name {
    font-size: var(--wr-text-base);
    font-weight: 700;
    margin: 0;
}

.wr-feed-loc {
    font-size: var(--wr-text-xs);
    color: var(--wr-ink-600);
}

.wr-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wr-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--wr-surface-2);
    color: var(--wr-ink-600);
    border: 1px solid var(--wr-border);
}

.wr-match-chip {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--wr-accent-ink);
    background: var(--wr-accent-soft);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------- Agent profile: favorite button, activity list, testimonials ---------- */
.wr-favorite-btn.active {
    color: var(--wr-danger);
    border-color: var(--wr-danger);
}

.wr-agent-activity-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wr-agent-activity-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

    .wr-agent-activity-item i {
        color: var(--wr-accent-ink);
        background: var(--wr-accent-soft);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .wr-agent-activity-item p {
        margin: 0;
        color: var(--wr-ink-900);
        font-size: 0.88rem;
    }

    .wr-agent-activity-item span {
        color: var(--wr-ink-400);
        font-size: 0.76rem;
    }

.wr-testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .wr-testimonial-card i {
        color: var(--wr-accent-soft);
        font-size: 1.4rem;
    }

    .wr-testimonial-card p {
        margin: 0;
        color: var(--wr-ink-900);
        font-style: italic;
        line-height: 1.5;
    }

.wr-testimonial-author {
    color: var(--wr-ink-600);
    font-size: 0.82rem;
    font-weight: 600;
}

/* ---------- My Network carousel ---------- */
.wr-carousel {
    display: flex;
    gap: var(--wr-space-4);
    overflow-x: auto;
    padding-bottom: var(--wr-space-2);
    scroll-snap-type: x proximity;
}

    .wr-carousel::-webkit-scrollbar {
        height: 6px;
    }

    .wr-carousel::-webkit-scrollbar-thumb {
        background: var(--wr-border-strong);
        border-radius: 999px;
    }

.wr-network-card {
    scroll-snap-align: start;
    flex: 0 0 200px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: var(--wr-space-4);
    text-align: center;
    transition: border-color 0.2s var(--wr-ease), box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease);
}

    .wr-network-card:hover {
        border-color: var(--wr-accent);
        box-shadow: var(--wr-shadow-md);
        transform: translateY(-2px);
    }

@media (prefers-reduced-motion: reduce) {
    .wr-network-card {
        transition: none;
    }

        .wr-network-card:hover {
            transform: none;
        }
}

.wr-network-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--wr-space-2);
}

.wr-network-name {
    font-size: var(--wr-text-sm);
    font-weight: 700;
    margin: 0;
}

.wr-network-role {
    font-size: var(--wr-text-xs);
    color: var(--wr-ink-600);
    margin: 2px 0 var(--wr-space-2);
}

.wr-network-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--wr-success);
    background: rgba(12, 163, 12, 0.08);
    padding: 2px 8px;
    border-radius: 999px;
}

/* ---------- Support: FAQ accordion (reuses .wra-faq-item content/markup from the public FAQ
   page; scoped-repainted here since Support is the second, in-app consumer) ---------- */
.wr-dashboard-page .wra-faq-item {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
}

.wr-dashboard-page .wra-faq-item summary {
    color: var(--wr-ink-900);
}

.wr-dashboard-page .wra-faq-item summary::after {
    color: var(--wr-accent-ink);
}

.wr-dashboard-page .wra-faq-item p {
    color: var(--wr-ink-600);
}

/* ==========================================================================
   Shared dashboard primitives re-theme (Round-3 design-language rollout).

   11 of 13 components in Components/Shared/ (CRMCard, PageHeader, SectionHeader,
   EmptyState, StatCard, MetricCard, DataTable, ChartCard, SparklineCard,
   HeroMetric, Timeline) render root classes from marketing.css's dark --wra-*
   theme (.wra-panel, .wra-stat-tile, .wra-table, etc.) even though they're the
   connective tissue reused across nearly every authenticated screen -- Admin,
   Vendor, Brokerage, Billing, Referrals, Seller Opportunities, and both
   Dashboard layouts all render them. Same "wra- vs wr-" collision class of bug
   already fixed twice for Dashboard V2 specifically, applied once here for the
   whole app: every rule below is scoped under .wr-dashboard-page (confirmed
   present on all ~58 authenticated page components) so public pages using the
   same class names (e.g. .wra-page-hero on Pricing/About) are untouched --
   those get their own pass in the public-pages phase of this rollout, not here.
   marketing.css itself is left alone; these are additive overrides only,
   loaded after it in App.razor so they win on specificity + source order,
   the same mechanism the .wra-dashboard-shell background fix already uses.
   ========================================================================== */

/* ---------- CRMCard (.wra-panel) ---------- */
.wr-dashboard-page .wra-panel {
    background: var(--wr-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
}

.wr-dashboard-page .wra-panel-elevated {
    border-top: 2px solid var(--wr-accent);
}

.wr-dashboard-page .wra-hoverable:hover {
    box-shadow: var(--wr-shadow-md);
}

/* ---------- SectionHeader / CRMCard title (.wra-panel-title) ---------- */
.wr-dashboard-page .wra-panel-title {
    color: var(--wr-ink-900);
}

/* ---------- PageHeader (.wra-page-hero), only the in-dashboard usage ---------- */
.wr-dashboard-page .wra-page-hero {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    color: var(--wr-ink-900);
    padding: 32px 28px;
    text-align: left;
}

.wr-dashboard-page .wra-page-hero h1 {
    letter-spacing: var(--wr-heading-tracking);
}

.wr-dashboard-page .wra-page-hero p {
    color: var(--wr-ink-600);
    margin: 0;
}

/* ---------- EmptyState (.wra-empty-state) ---------- */
.wr-dashboard-page .wra-empty-state {
    background: var(--wr-surface-2);
    border-color: var(--wr-border);
    color: var(--wr-ink-600);
}

.wr-dashboard-page .wra-empty-state-icon {
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
}

.wr-dashboard-page .wra-empty-state h3 {
    color: var(--wr-ink-900);
}

/* ---------- StatCard / MetricCard / SparklineCard (.wra-stat-tile family) ---------- */
.wr-dashboard-page .wra-stat-tile {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
}

.wr-dashboard-page .wra-stat-tile .value {
    color: var(--wr-ink-900);
    font-variant-numeric: tabular-nums;
    font-family: var(--wr-font-mono);
}

.wr-dashboard-page .wra-stat-tile .label {
    color: var(--wr-ink-600);
}

.wr-dashboard-page .wra-stat-tile a {
    color: var(--wr-accent-ink);
}

.wr-dashboard-page .wra-stat-tile-icon {
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
}

.wr-dashboard-page .wra-metric-trend.up {
    color: var(--wr-success);
}

.wr-dashboard-page .wra-metric-trend.down {
    color: var(--wr-danger);
}

.wr-dashboard-page .wra-preview-chip {
    background: var(--wr-surface-2);
    color: var(--wr-ink-400);
    border-color: var(--wr-border);
}

/* ---------- DataTable (.wra-table) ---------- */
.wr-dashboard-page .wra-table-wrap {
    border-color: var(--wr-border);
}

.wr-dashboard-page .wra-table th,
.wr-dashboard-page .wra-table td {
    border-bottom-color: var(--wr-border);
    color: var(--wr-ink-900);
}

.wr-dashboard-page .wra-table th {
    color: var(--wr-ink-600);
    background: var(--wr-surface-2);
}

.wr-dashboard-page .wra-status-pill.green { background: rgba(47, 212, 138, 0.14); color: #0f8a5a; }
.wr-dashboard-page .wra-status-pill.gold { background: var(--wr-money-soft); color: var(--wr-money-ink); }
.wr-dashboard-page .wra-status-pill.red { background: rgba(208, 59, 59, 0.10); color: var(--wr-danger); }
.wr-dashboard-page .wra-status-pill.blue { background: var(--wr-accent-soft); color: var(--wr-accent-ink); }

.wr-dashboard-page .wra-form-row label {
    color: var(--wr-ink-600);
}

.wr-dashboard-page .wra-form-row .wra-form-control {
    background: var(--wr-surface);
    border-color: var(--wr-border);
    color: var(--wr-ink-900);
}

/* ---------- ChartCard (.wra-chart-card), gradient area + Voltage line ---------- */
.wr-dashboard-page .wra-chart-axis {
    stroke: var(--wr-border);
}

.wr-dashboard-page .wra-chart-bar-fill {
    fill: var(--wr-accent);
}

.wr-dashboard-page .wra-chart-value-label,
.wr-dashboard-page .wra-chart-category-label,
.wr-dashboard-page .wra-chart-caption {
    fill: var(--wr-ink-400);
    color: var(--wr-ink-400);
}

.wr-dashboard-page .wra-chart-line-area {
    fill: var(--wr-accent);
    opacity: 0.14;
}

.wr-dashboard-page .wra-chart-line-stroke {
    stroke: var(--wr-accent);
}

.wr-dashboard-page .wra-chart-line-marker {
    fill: var(--wr-surface);
    stroke: var(--wr-accent);
}

.wr-dashboard-page .wra-sparkline-stroke {
    stroke: var(--wr-accent);
}

/* ---------- HeroMetric (.wra-hero-metric) ---------- */
.wr-dashboard-page .wra-hero-metric-label {
    color: var(--wr-ink-600);
}

.wr-dashboard-page .wra-hero-metric-value {
    color: var(--wr-ink-900);
    font-family: var(--wr-font-mono);
    font-variant-numeric: tabular-nums;
}

.wr-dashboard-page .wra-hero-metric-trend.up {
    color: var(--wr-success);
}

.wr-dashboard-page .wra-hero-metric-trend.down {
    color: var(--wr-danger);
}

/* ---------- Timeline (.wra-timeline) ---------- */
.wr-dashboard-page .wra-timeline::before {
    background: var(--wr-border);
}

.wr-dashboard-page .wra-timeline-marker {
    background: var(--wr-accent-soft);
    border-color: var(--wr-accent);
    color: var(--wr-accent-ink);
}

.wr-dashboard-page .wra-timeline-content p {
    color: var(--wr-ink-900);
}

.wr-dashboard-page .wra-timeline-date {
    color: var(--wr-ink-400);
}

.wr-support-kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.wr-support-kb-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
    padding: 20px;
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

    .wr-support-kb-card:hover {
        box-shadow: var(--wr-shadow-md);
        border-color: var(--wr-accent);
    }

    .wr-support-kb-card i {
        font-size: 1.3rem;
        color: var(--wr-accent-ink);
        background: var(--wr-accent-soft);
        width: 44px;
        height: 44px;
        border-radius: var(--wr-radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wr-support-kb-card h4 {
        margin: 0;
        font-size: 0.95rem;
        color: var(--wr-ink-900);
    }

    .wr-support-kb-card p {
        margin: 0;
        font-size: 0.82rem;
        color: var(--wr-ink-600);
    }

.wr-status-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wr-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--wr-border);
    font-size: 0.88rem;
}

    .wr-status-row:last-child {
        border-bottom: none;
    }

/* ---------- Settings: notification/AI/referral preference toggles, appearance picker ---------- */
.wr-settings-toggle-list {
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
    max-width: 640px;
}

.wr-settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--wr-border);
}

    .wr-settings-toggle-row:last-child {
        border-bottom: none;
    }

.wr-settings-toggle-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--wr-ink-900);
}

.wr-settings-toggle-desc {
    font-size: 0.8rem;
    color: var(--wr-ink-600);
    margin-top: 2px;
}

.wr-appearance-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.wr-appearance-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--wr-surface);
    border: 2px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
    padding: 16px;
    width: 140px;
    cursor: pointer;
}

    .wr-appearance-option.active {
        border-color: var(--wr-accent);
    }

    .wr-appearance-option:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

.wr-appearance-swatch {
    width: 100%;
    height: 64px;
    border-radius: var(--wr-radius-sm);
    border: 1px solid var(--wr-border);
}

    .wr-appearance-swatch.light { background: linear-gradient(135deg, #ffffff 50%, #f2f4f7 50%); }
    .wr-appearance-swatch.dark { background: linear-gradient(135deg, #23262d 50%, #14161a 50%); }
    .wr-appearance-swatch.system { background: linear-gradient(135deg, #ffffff 50%, #14161a 50%); }

/* ---------- Auth layout (Login/Register/Forgot Password/etc.) ---------- */
.wr-auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--wr-surface);
}

.wr-auth-form-side {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px clamp(20px, 6vw, 64px);
    overflow-x: hidden;
    background: var(--wr-bg);
    min-height: 100vh;
}

.wr-auth-logo {
    position: absolute;
    top: 28px;
    left: clamp(20px, 6vw, 64px);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--wr-ink-900);
    letter-spacing: -0.01em;
}

    .wr-auth-logo span {
        color: var(--wr-accent);
    }

.wr-auth-body {
    width: 100%;
    max-width: 440px;
    margin: 56px auto 0;
}

    .wr-auth-body h1 {
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0 0 4px;
        color: var(--wr-ink-900);
    }

    .wr-auth-body > div, .wr-auth-body > section {
        width: 100%;
    }

.wr-auth-card {
    background: var(--wr-surface);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-md);
    padding: 32px;
}

.wr-auth-subhead {
    color: var(--wr-ink-600);
    margin: 0 0 20px;
    font-size: 0.92rem;
}

.wr-auth-field {
    margin-bottom: 14px;
}

    .wr-auth-field label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--wr-ink-900);
        margin-bottom: 6px;
    }

    .wr-auth-field .wra-form-control {
        margin-bottom: 0;
    }

    .wr-auth-field .wra-form-control:focus,
    .wr-auth-card .wra-form-control:focus {
        outline: none;
        border-color: var(--wr-accent);
        box-shadow: 0 0 0 3px var(--wr-accent-soft);
    }

.wr-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 0.85rem;
}

.wr-auth-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wr-ink-600);
}

.wr-auth-links {
    margin-top: 22px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--wr-ink-600);
}

    .wr-auth-links a {
        color: var(--wr-accent-ink);
        font-weight: 600;
        text-decoration: none;
    }

.wr-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: var(--wr-ink-400);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .wr-auth-divider::before, .wr-auth-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--wr-border);
    }

.wr-dev-accounts-card {
    max-width: 440px;
    margin: 20px auto 0;
    background: var(--wr-surface-2);
    border: 1px dashed var(--wr-border-strong);
    border-radius: var(--wr-radius-md);
    padding: 16px 18px;
}

.wr-dev-accounts-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wr-ink-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

    .wr-dev-accounts-header i {
        color: var(--wra-gold-dark);
    }

.wr-dev-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wr-dev-account-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 0.78rem;
    padding: 4px 0;
}

.wr-dev-account-role {
    font-weight: 700;
    color: var(--wr-ink-900);
}

.wr-dev-account-email {
    color: var(--wr-ink-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wr-dev-account-password {
    font-family: "SFMono-Regular", Consolas, monospace;
    color: var(--wr-accent-ink);
    background: var(--wr-accent-soft);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.wr-auth-marketing {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: linear-gradient(160deg, var(--wra-navy) 0%, var(--wra-navy-2) 55%, #241a06 130%);
    color: #fff;
}

.wr-auth-marketing-content {
    max-width: 420px;
}

.wr-auth-network-graphic {
    width: 220px;
    margin: 0 0 28px;
}

.wr-auth-marketing-content h2 {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 28px;
}

.wr-auth-benefit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wr-auth-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.98rem;
    font-weight: 600;
}

    .wr-auth-benefit i {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(242, 182, 50, 0.15);
        color: var(--wra-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1rem;
    }

/* Register: conditional Agent/Vendor/Brokerage field sections. This page has no live
   interactivity (Identity components render as non-interactive SSR), so which section shows
   is driven entirely by CSS :has() against the checked account-type radio -- no JS needed. */
.wr-account-type-section {
    padding-top: 4px;
}

.wr-register-form:not(:has(#acctAgent:checked)) .wr-agent-only { display: none; }
.wr-register-form:not(:has(#acctVendor:checked)) .wr-vendor-only { display: none; }
.wr-register-form:not(:has(#acctBrokerage:checked)) .wr-brokerage-only { display: none; }

/* Register: Vendor's inline two-step mini-wizard (category, then the rest of the business
   fields). Same CSS-only-toggle trick as the account-type sections above -- a hidden checkbox
   (#vendorStep2) plus :has() drives which step is visible, so "Continue"/"Back" are plain
   <label for="vendorStep2"> elements and never touch the network or reset any field value. */
.wr-reg-step-toggle { display: none; }
.wr-reg-step-2 { display: none; }

.wr-vendor-only:has(.wr-reg-step-toggle:checked) .wr-reg-step-1 { display: none; }
.wr-vendor-only:has(.wr-reg-step-toggle:checked) .wr-reg-step-2 {
    display: block;
    animation: wrRegStepIn 0.25s ease;
}

@keyframes wrRegStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.wr-reg-step-continue {
    display: inline-block;
    margin-top: 4px;
    cursor: pointer;
    text-align: center;
}

.wr-reg-step-back {
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    color: var(--wr-ink-400);
    font-size: 0.85rem;
    font-weight: 600;
}

.wr-auth-optional {
    font-weight: 400;
    color: var(--wr-ink-400);
    font-size: 0.78rem;
}

.wr-auth-section-title {
    margin: 18px 0 6px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wr-ink-400);
}

/* Account-type / plan picker cards on Register */
.wr-auth-option-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.wr-auth-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 2px solid var(--wr-border);
    border-radius: var(--wr-radius-sm);
    background: var(--wr-surface);
    color: var(--wr-ink-600);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
}

    .wr-auth-option i {
        font-size: 1.1rem;
        color: var(--wr-ink-400);
    }

    .wr-auth-option:has(input:checked) {
        border-color: var(--wra-gold);
        background: rgba(242, 182, 50, 0.08);
        color: var(--wr-ink-900);
    }

        .wr-auth-option:has(input:checked) i {
            color: var(--wra-gold-dark);
        }

@media (max-width: 900px) {
    .wr-auth-shell {
        grid-template-columns: 1fr;
    }

    .wr-auth-marketing {
        display: none;
    }

    .wr-auth-form-side {
        padding: 28px 20px;
    }

    .wr-auth-body {
        margin-top: 64px;
    }

    .wr-dev-account-row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 0;
        border-bottom: 1px solid var(--wr-border);
    }

        .wr-dev-account-row:last-child {
            border-bottom: none;
        }
}

/* ---------- Find Agents: loading skeleton + pagination ---------- */
@keyframes wr-skeleton-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.wr-agent-card-skeleton {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: var(--wr-space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: wr-skeleton-pulse 1.4s ease-in-out infinite;
}

.wr-skeleton-circle {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--wr-surface-2);
}

.wr-skeleton-line {
    height: 10px;
    border-radius: 5px;
    background: var(--wr-surface-2);
}

.wr-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--wr-ink-600);
}

.wr-pagination-buttons {
    display: flex;
    gap: 8px;
}

.wr-find-agents-plan-hint {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--wr-ink-400);
    text-align: center;
}

.wr-find-agents-error {
    text-align: center;
    padding: 40px 24px;
    color: var(--wr-ink-600);
}

    .wr-find-agents-error p {
        margin: 0 0 16px;
        font-size: 0.95rem;
    }

    .wr-find-agents-plan-hint a {
        font-weight: 600;
        color: var(--wra-gold-dark, #a97a12);
    }

/* ---------- Messages: two-pane conversation UI ---------- */
.wr-messages-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 560px;
}

.wr-messages-threads {
    border-right: 1px solid var(--wr-border);
    overflow-y: auto;
    max-height: 640px;
}

.wr-messages-threads-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--wr-border);
}

.wr-thread-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--wr-border);
    text-align: left;
    cursor: pointer;
    position: relative;
}

    .wr-thread-item:hover {
        background: var(--wr-surface-2);
    }

    .wr-thread-item.active {
        background: var(--wr-accent-soft);
    }

    .wr-thread-item img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

.wr-thread-item-body {
    min-width: 0;
    flex: 1;
}

.wr-thread-item-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.wr-thread-item-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--wr-ink-900);
}

.wr-thread-item-time {
    font-size: 0.72rem;
    color: var(--wr-ink-400);
    white-space: nowrap;
}

.wr-thread-item-preview {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--wr-ink-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wr-thread-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wr-accent);
    flex-shrink: 0;
}

.wr-messages-panel {
    display: flex;
    flex-direction: column;
}

.wr-messages-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--wr-border);
}

    .wr-messages-panel-header img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
    }

.wr-messages-card {
    padding: 0;
    overflow: hidden;
}

.wr-messages-panel-name {
    font-weight: 700;
    color: var(--wr-ink-900);
}

.wr-messages-panel-subtext {
    font-size: var(--wr-text-xs);
    color: var(--wr-ink-400);
}

.wr-messages-thread-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 420px;
}

/* ---------- AI Referral Copilot: chat UI ---------- */
.wr-copilot-card {
    max-width: 900px;
}

.wr-copilot-chat {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 4px;
}

.wr-chat-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

    .wr-chat-message.user {
        justify-content: flex-end;
    }

.wr-chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    font-size: 0.9rem;
}

.wr-chat-bubble {
    max-width: 82%;
    border-radius: var(--wr-radius-md);
    padding: 12px 16px;
}

    .wr-chat-bubble p {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.5;
    }

.wr-chat-bubble.assistant {
    background: var(--wr-surface-2);
    color: var(--wr-ink-900);
    border-top-left-radius: 4px;
}

.wr-chat-bubble.user {
    background: var(--wr-accent);
    color: #fff;
    border-top-right-radius: 4px;
}

.wr-copilot-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.wr-copilot-prompt-chip {
    background: var(--wr-surface-2);
    border: 1px solid var(--wr-border);
    color: var(--wr-accent-ink);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

    .wr-copilot-prompt-chip:hover {
        border-color: var(--wr-accent);
        background: var(--wr-accent-soft);
    }

.wr-copilot-input-row {
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--wr-border);
    padding-top: 16px;
}

    .wr-copilot-input-row .wra-form-control {
        flex: 1;
        margin-bottom: 0;
    }

.wr-messages-input-row {
    padding: 14px 20px;
}

.wr-messages-ai-draft-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 0;
}

.wr-messages-ai-draft-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--wr-ai-soft);
    color: var(--wr-ai);
    border: 1px solid rgba(139, 107, 255, 0.25);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s var(--wr-ease, ease), transform 0.15s var(--wr-ease, ease);
}

    .wr-messages-ai-draft-btn:hover:not(:disabled) {
        background: rgba(139, 107, 255, 0.16);
        transform: translateY(-1px);
    }

    .wr-messages-ai-draft-btn:disabled {
        opacity: 0.7;
        cursor: default;
    }

.wr-messages-ai-draft-error {
    font-size: 0.76rem;
    color: var(--wr-danger);
}

/* ---------- Analytics: conversion funnel ---------- */
.wr-funnel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wr-funnel-stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 140px;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    border-radius: var(--wr-radius-sm);
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: width 0.3s ease;
}

.wr-funnel-value {
    font-weight: 800;
}

.wr-network-match-reason {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--wr-border);
    font-size: 0.78rem;
    color: var(--wr-accent-ink);
}

/* ---------- Featured agents ---------- */
.wr-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--wr-space-4);
}

.wr-featured-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease);
}

    .wr-featured-card:hover {
        box-shadow: var(--wr-shadow-lg);
        transform: translateY(-2px);
    }

.wr-featured-photo {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: var(--wr-surface-2);
}

.wr-featured-body {
    padding: var(--wr-space-4);
}

    .wr-featured-body h4 {
        margin: 0 0 2px;
        font-size: var(--wr-text-base);
        font-weight: 700;
    }

.wr-featured-brokerage {
    font-size: var(--wr-text-xs);
    color: var(--wr-ink-600);
    margin-bottom: var(--wr-space-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wr-featured-rating {
    font-size: var(--wr-text-xs);
    color: var(--wr-warning);
    font-weight: 700;
    margin-bottom: var(--wr-space-3);
}

/* ---------- Progress ring / donut (inline SVG components) ---------- */
.wr-progress-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wr-progress-ring-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wr-progress-ring-value {
    font-size: var(--wr-text-lg);
    font-weight: 800;
    color: var(--wr-ink-900);
    line-height: 1.1;
}

.wr-progress-ring-label {
    font-size: 0.68rem;
    color: var(--wr-ink-600);
    font-weight: 600;
}

.wr-donut-chart {
    display: flex;
    align-items: center;
    gap: var(--wr-space-5);
    flex-wrap: wrap;
}

    .wr-donut-chart svg text {
        font-family: var(--wr-font-sans);
        font-weight: 800;
        fill: var(--wr-ink-900);
    }

.wr-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wr-donut-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wr-text-sm);
    color: var(--wr-ink-600);
}

.wr-donut-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ---------- Chart restyle (reuses ChartCard/existing components via .wr-chart-card) ---------- */
.wr-chart-card.wra-chart-card {
    background: transparent;
    padding: 0;
}

.wr-chart-card .wra-chart-bar-fill {
    fill: var(--wr-accent);
}

.wr-chart-card .wra-chart-axis {
    stroke: var(--wr-border-strong);
}

.wr-chart-card .wra-chart-value-label,
.wr-chart-card .wra-chart-category-label {
    fill: var(--wr-ink-600);
    font-family: var(--wr-font-sans);
}

.wr-chart-card .wra-chart-line-stroke {
    stroke: var(--wr-accent);
    stroke-width: 2.5;
    fill: none;
    /* Draw-in reveal on first paint -- a fixed dasharray/dashoffset larger than any realistic chart
       width (real charts here run ~600-700px of path length) rather than measuring each polyline's
       exact length via JS; short paths just finish drawing a little before the full animation
       duration elapses, which reads as fine in practice. */
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: wrChartDrawIn 1s var(--wr-ease, ease) forwards;
}

@keyframes wrChartDrawIn {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wr-chart-card .wra-chart-line-stroke {
        animation: none;
        stroke-dashoffset: 0;
    }
}

.wr-chart-card .wra-chart-line-area {
    fill: var(--wr-accent);
    opacity: 0.10;
}

.wr-chart-card .wra-chart-line-marker {
    fill: var(--wr-surface);
    stroke: var(--wr-accent);
    stroke-width: 2;
}

.wr-chart-card .wra-chart-caption {
    color: var(--wr-ink-600);
    font-size: var(--wr-text-xs);
}

/* ---------- Market coverage (restyles MarketIntelligenceMap in place; sole consumer) ---------- */
.wr-dashboard-page .wra-market-map-tile {
    background: var(--wr-surface-2);
    color: var(--wr-ink-600);
    border: 1px solid var(--wr-border);
}

    .wr-dashboard-page .wra-market-map-tile.claimed {
        background: var(--wr-accent);
        color: #fff;
        border-color: var(--wr-accent);
    }

    .wr-dashboard-page .wra-market-map-tile.available {
        background: var(--wr-accent-soft);
        color: var(--wr-accent-ink);
        border-color: var(--wr-accent-soft);
    }

.wr-dashboard-page .wra-market-map-legend {
    color: var(--wr-ink-600);
}

    .wr-dashboard-page .wra-market-map-dot.claimed { background: var(--wr-accent); }
    .wr-dashboard-page .wra-market-map-dot.available { background: var(--wr-accent-soft); border: 1px solid var(--wr-accent); }
    .wr-dashboard-page .wra-market-map-dot.none { background: var(--wr-surface-2); border: 1px solid var(--wr-border); }

/* ---------- Find Agents distribution map (AgentDistributionMap; sole consumer) ---------- */
.wr-dashboard-page .wr-agent-map-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--wr-accent-ink);
    background: var(--wr-surface-2);
    border: 1px solid var(--wr-border);
    cursor: pointer;
    transition: transform 0.15s ease;
    position: relative;
}

    .wr-dashboard-page .wr-agent-map-tile:hover {
        transform: scale(1.08);
    }

    .wr-dashboard-page .wr-agent-map-tile.empty {
        color: var(--wr-ink-400);
        cursor: default;
    }

    .wr-dashboard-page .wr-agent-map-tile.empty:hover {
        transform: none;
    }

/* Real custom tooltip (see AgentDistributionMap.razor) -- pure CSS hover, no JS needed. */
.wr-dashboard-page .wr-agent-map-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--wr-ink-900, #111);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    z-index: 20;
    pointer-events: none;
}

    .wr-dashboard-page .wr-agent-map-tooltip strong {
        font-weight: 700;
    }

    .wr-dashboard-page .wr-agent-map-tile:hover .wr-agent-map-tooltip {
        display: block;
    }

.wr-agent-map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--wr-ink-600);
}

.wr-agent-map-ramp {
    display: inline-block;
    width: 100px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(42,120,214,0.15), rgba(42,120,214,0.80));
}

/* ---------- EmptyState (scoped override only inside the dashboard page; EmptyState has many
   other out-of-scope consumers elsewhere, so its base .wra-empty-state rules stay untouched) ---------- */
.wr-dashboard-page .wra-empty-state {
    background: var(--wr-surface-2);
    border-color: var(--wr-border);
    color: var(--wr-ink-600);
}

    .wr-dashboard-page .wra-empty-state h3 {
        color: var(--wr-ink-900);
    }

    .wr-dashboard-page .wra-empty-state-icon {
        background: var(--wr-accent-soft);
        color: var(--wr-accent-ink);
    }

/* ---------- Activity timeline (restyles Timeline in place; sole consumer) ---------- */
.wr-dashboard-page .wra-timeline::before {
    background: var(--wr-border);
}

.wr-dashboard-page .wra-timeline-item .wra-timeline-marker {
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    border-color: var(--wr-accent);
}

.wr-dashboard-page .wra-timeline-content p {
    color: var(--wr-ink-900);
}

.wr-dashboard-page .wra-timeline-date {
    color: var(--wr-ink-400);
}

/* ---------- Tabs (Agent Details, etc.) ---------- */
.wr-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--wr-border);
    margin-bottom: var(--wr-space-5);
    overflow-x: auto;
}

.wr-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: var(--wr-text-sm);
    font-weight: 700;
    color: var(--wr-ink-600);
    cursor: pointer;
    white-space: nowrap;
}

    .wr-tab:hover {
        color: var(--wr-ink-900);
    }

/* Keeps the page from collapsing/expanding sharply when switching to a short empty-state panel
   (Listings/Similar Agents with no data) vs. a taller one (Overview/Coverage) -- see the comment
   at .wr-tab-panel's usage in AgentProfile.razor. */
.wr-tab-panel {
    min-height: 420px;
}

    .wr-tab.active {
        color: var(--wr-accent-ink);
        border-bottom-color: var(--wr-accent);
    }

/* ---------- Quick facts panel ---------- */
.wr-quickfacts {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .wr-quickfacts li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--wr-border);
        font-size: var(--wr-text-sm);
    }

    .wr-quickfacts li:last-child {
        border-bottom: none;
    }

    .wr-quickfacts li span:first-child {
        color: var(--wr-ink-600);
    }

    .wr-quickfacts li span:last-child {
        color: var(--wr-ink-900);
        font-weight: 700;
        text-align: right;
    }

/* ---------- Referral fee badge (must be prominent, per product spec) ---------- */
.wr-fee-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--wr-accent-soft), var(--wr-surface));
    border: 1px solid var(--wr-accent);
    border-radius: var(--wr-radius-lg);
    padding: var(--wr-space-4);
}

.wr-fee-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--wr-radius-md);
    background: var(--wr-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wr-fee-badge-value {
    font-size: var(--wr-text-2xl);
    font-weight: 800;
    color: var(--wr-ink-900);
    line-height: 1.1;
}

.wr-fee-badge-label {
    font-size: var(--wr-text-xs);
    color: var(--wr-ink-600);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Find Agents: compact header + unified toolbar ---------- */
.wr-find-agents-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

    .wr-find-agents-toolbar .wr-search-box {
        flex: 1 1 260px;
        min-width: 200px;
    }

.wr-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

    .wr-search-box i {
        position: absolute;
        left: 12px;
        color: var(--wr-ink-400);
        font-size: 0.85rem;
        pointer-events: none;
    }

    .wr-search-box input {
        width: 100%;
        padding-left: 34px !important;
        margin: 0 !important;
    }

.wr-filter-toggle {
    position: relative;
    white-space: nowrap;
}

.wr-filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--wr-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.wr-find-agents-sort {
    width: auto;
    margin: 0 !important;
}

.wr-find-agents-view-tabs {
    margin: 0 0 0 auto;
}

/* ---------- Active filter chips ---------- */
.wr-filter-chip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.wr-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    font-size: 0.8rem;
    font-weight: 600;
}

    .wr-filter-chip button,
    .wr-filter-chip a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border: none;
        background: none;
        color: inherit;
        font-size: 0.95rem;
        line-height: 1;
        cursor: pointer;
        border-radius: 50%;
        text-decoration: none;
    }

        .wr-filter-chip button:hover,
        .wr-filter-chip a:hover {
            background: rgba(0, 0, 0, 0.08);
        }

/* ---------- Advanced filters slide-out panel ---------- */
.wr-filter-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1200;
}

.wr-filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 100vw);
    background: var(--wr-surface);
    box-shadow: var(--wr-shadow-md);
    z-index: 1201;
    padding: var(--wr-space-5);
    overflow-y: auto;
}

.wr-filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

    .wr-filter-panel-head h3 {
        margin: 0;
        font-size: 1.05rem;
    }

.wr-filter-panel-close {
    border: none;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--wr-ink-600);
    cursor: pointer;
    padding: 4px 8px;
}

/* ---------- Filter rail (Find Agents advanced panel / Vendor Directory) ---------- */
.wr-filter-rail {
    display: flex;
    flex-direction: column;
    gap: var(--wr-space-4);
}

.wr-filter-rail-group label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--wr-ink-600);
    margin-bottom: 6px;
}

.wr-filter-rail-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wr-text-sm);
    color: var(--wr-ink-600);
    cursor: pointer;
}

/* ---------- Compare table + map card ---------- */
.wr-find-agents-compare-card,
.wr-find-agents-map-card {
    margin-bottom: 20px;
}

    .wr-find-agents-compare-card h3,
    .wr-find-agents-map-card h3 {
        margin: 0 0 12px;
        font-size: 1rem;
    }

    .wr-find-agents-map-card p {
        margin: 0 0 16px;
        color: var(--wr-ink-600);
        font-size: 0.85rem;
    }

.wr-find-agents-compare-scroll {
    overflow-x: auto;
}

.wr-find-agents-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wr-text-sm);
}

    .wr-find-agents-compare-table th,
    .wr-find-agents-compare-table td {
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid var(--wr-border);
    }

    .wr-find-agents-compare-table th {
        font-weight: 700;
        color: var(--wr-ink-900);
        background: var(--wr-surface-alt);
    }

    .wr-find-agents-compare-table td:first-child {
        color: var(--wr-ink-600);
        font-weight: 600;
    }

@media (max-width: 640px) {
    .wr-find-agents-toolbar .wr-search-box {
        flex-basis: 100%;
    }

    .wr-find-agents-view-tabs {
        margin-left: 0;
    }

    .wr-filter-panel {
        width: 100vw;
    }
}

/* ---------- Agent / vendor directory cards (Find Agents) ---------- */
.wr-agent-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.wr-agent-card {
    position: relative;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: var(--wr-space-4);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .wr-agent-card.selected {
        border-color: var(--wr-accent);
    }

.wr-agent-card-select {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: var(--wr-ink-400);
    z-index: 1;
}

.wr-agent-card-link {
    display: block;
    text-decoration: none;
    text-align: center;
}

    .wr-agent-card-link:hover {
        box-shadow: var(--wr-shadow-md);
    }

    .wr-agent-card-link h3 {
        color: var(--wr-ink-900);
        font-size: 1rem;
        margin: 10px 0 2px;
    }

    .wr-agent-card-brokerage {
        color: var(--wr-ink-600);
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

.wr-agent-card-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: var(--wr-surface-2);
    border: 1px solid var(--wr-border);
    border-radius: 8px;
    overflow: hidden;
}

.wr-agent-card-logo {
    max-width: 28px;
    max-height: 28px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

    .wr-agent-card-link .loc {
        color: var(--wr-ink-600);
        font-size: 0.82rem;
        margin-bottom: 10px;
    }

.wr-agent-card-avatar-wrap {
    position: relative;
    width: 84px;
    margin: 0 auto 14px;
}

.wr-agent-card-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--wr-border);
    display: block;
}

.wr-agent-card-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--wr-ink-400);
    border: 2px solid var(--wr-surface);
}

    .wr-agent-card-status.online {
        background: var(--wr-success);
    }

.wr-agent-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.wr-agent-card-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.wr-agent-card-stat {
    font-size: 0.76rem;
    color: var(--wr-ink-600);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .wr-agent-card-stat i {
        color: var(--wr-accent-ink);
        width: 14px;
    }

.wr-agent-card-license {
    font-size: 0.72rem;
    color: var(--wr-ink-600);
}

.wr-agent-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--wr-border);
}

    .wr-agent-card-actions .wr-btn {
        flex: 1;
    }

.wr-badge-verified, .wr-badge-featured {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.wr-badge-verified {
    background: rgba(12, 163, 12, 0.10);
    color: var(--wr-success);
}

.wr-badge-featured {
    background: rgba(237, 161, 0, 0.14);
    color: #8a6300;
}

.wr-compare-tray {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    box-shadow: var(--wr-shadow-lg);
    padding: 12px 18px;
    border-radius: var(--wr-radius-lg);
    z-index: 200;
}

.wr-compare-tray-avatars {
    display: flex;
}

    .wr-compare-tray-avatars img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid var(--wr-surface);
        margin-left: -10px;
        object-fit: cover;
    }

        .wr-compare-tray-avatars img:first-child {
            margin-left: 0;
        }

.wr-compare-tray-count {
    font-size: 0.82rem;
    color: var(--wr-ink-600);
}

.wr-compare-tray-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 1200px) {
    .wr-agent-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .wr-agent-card-grid {
        grid-template-columns: 1fr;
    }

    .wr-compare-tray {
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: none;
        flex-wrap: wrap;
        border-radius: 16px;
    }
}

.wr-vendor-details-banner {
    border-radius: var(--wr-radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
    height: 180px;
}

    .wr-vendor-details-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ---------- Vendor Marketplace hero ---------- */
.wr-vendor-hero {
    background: linear-gradient(135deg, #101828 0%, #1c2a4a 100%);
    padding: 64px 24px;
    text-align: center;
}

.wr-vendor-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

    .wr-vendor-hero-inner h1 {
        color: #fff;
        font-size: clamp(1.75rem, 3.5vw, 2.5rem);
        font-weight: 800;
        margin: 0 0 14px;
    }

    .wr-vendor-hero-inner p {
        color: rgba(255, 255, 255, 0.78);
        font-size: 1.05rem;
        margin: 0 0 28px;
    }

.wr-vendor-hero-ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.wr-vendor-hero-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    margin: 28px 0 0;
    padding: 0;
}

    .wr-vendor-hero-trust li {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .wr-vendor-hero-trust i {
        color: var(--wr-accent, #d4a94a);
    }

.wr-vendor-hero-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--wr-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .wr-vendor-hero-btn-outline:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.6);
    }

/* ---------- Category cards (Vendor Marketplace) ---------- */
.wr-vendor-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.wr-vendor-category-card {
    text-align: left;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: 20px;
    cursor: pointer;
    transition: box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease), border-color 0.2s var(--wr-ease);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .wr-vendor-category-card:hover {
        box-shadow: var(--wr-shadow-md);
        transform: translateY(-2px);
        border-color: var(--wr-accent);
    }

.wr-vendor-category-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.wr-vendor-category-card h3 {
    font-size: 0.95rem;
    color: var(--wr-ink-900);
    margin: 0;
}

.wr-vendor-category-card p {
    font-size: 0.8rem;
    color: var(--wr-ink-600);
    margin: 0;
    flex: 1;
}

.wr-vendor-category-count {
    font-size: 0.75rem;
    color: var(--wr-ink-400);
    font-weight: 600;
}

.wr-vendor-category-browse {
    font-size: 0.8rem;
    color: var(--wr-accent-ink);
    font-weight: 700;
    margin-top: 6px;
}

/* ---------- Vendor search/filter panel ---------- */
.wr-vendor-search-panel {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: 16px;
    margin-bottom: 20px;
}

.wr-vendor-search-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 10px;
}

    .wr-vendor-search-row + .wr-vendor-search-row {
        margin-top: 12px;
    }

.wr-vendor-search-toggles {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 20px;
}

.wr-vendor-result-count {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--wr-ink-600);
    font-weight: 600;
}

/* ---------- Vendor directory cards (Vendor Marketplace) ---------- */
.wr-vendor-category-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.wr-vendor-category-chip {
    flex: 0 0 auto;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    color: var(--wr-ink-600);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

    .wr-vendor-category-chip.active,
    .wr-vendor-category-chip:hover {
        border-color: var(--wr-accent);
        color: var(--wr-accent-ink);
        background: var(--wr-accent-soft);
    }

.wr-vendor-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.wr-vendor-card {
    display: flex;
    flex-direction: column;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease);
}

    .wr-vendor-card:hover {
        box-shadow: var(--wr-shadow-md);
        transform: translateY(-2px);
    }

.wr-vendor-card-media {
    position: relative;
    display: block;
    height: 96px;
    background: var(--wr-accent-soft);
    text-decoration: none;
}

.wr-vendor-card-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wr-vendor-card-featured-tag {
    position: absolute;
    top: 10px;
    right: 10px;
}

.wr-vendor-card-logo {
    position: absolute;
    left: 16px;
    bottom: -24px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--wr-surface);
    border: 2px solid var(--wr-surface);
    box-shadow: var(--wr-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--wr-accent-ink);
}

    .wr-vendor-card-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

.wr-vendor-card-body {
    padding: 32px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.wr-vendor-card-title-link {
    text-decoration: none;
}

.wr-vendor-card h3 {
    color: var(--wr-ink-900);
    font-size: 1rem;
    margin: 0;
}

.wr-vendor-card .loc {
    color: var(--wr-ink-600);
    font-size: 0.8rem;
}

.wr-vendor-card-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wr-vendor-card-rating {
    font-size: 0.78rem;
    font-weight: 700;
    color: #8a6300;
}

    .wr-vendor-card-rating i {
        color: #eda100;
    }

    .wr-vendor-card-rating span {
        color: var(--wr-ink-400);
        font-weight: 500;
    }

.wr-vendor-card-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wr-vendor-card-desc {
    font-size: 0.82rem;
    color: var(--wr-ink-600);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wr-vendor-card-service-areas {
    font-size: 0.76rem;
    color: var(--wr-ink-400);
    margin: 0;
}

.wr-vendor-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

    .wr-vendor-card-actions .wr-btn {
        flex: 1;
    }

@media (max-width: 1200px) {
    .wr-vendor-card-grid, .wr-vendor-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wr-vendor-search-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .wr-vendor-card-grid, .wr-vendor-category-grid, .wr-vendor-search-row {
        grid-template-columns: 1fr;
    }

    .wr-vendor-search-toggles {
        flex-wrap: wrap;
    }

    .wr-vendor-result-count {
        margin-left: 0;
    }
}

/* ---------- Pricing page (scoped overrides only inside .wr-dashboard-page; these classes are
   shared with public marketing pages -- Home/About/Faq/Privacy/Terms/Billing -- which are out of
   scope this pass and must keep their existing dark-theme appearance) ---------- */
.wr-dashboard-page .wra-price-card,
.wr-dashboard-page .wra-addon-card {
    background: var(--wr-surface);
    border-color: var(--wr-border);
    box-shadow: var(--wr-shadow-sm);
}

    .wr-dashboard-page .wra-price-card:hover {
        border-color: var(--wr-accent);
        box-shadow: var(--wr-shadow-md);
    }

    .wr-dashboard-page .wra-price-card.featured {
        border-color: var(--wr-accent);
        box-shadow: 0 0 0 1px var(--wr-accent), var(--wr-shadow-md);
    }

    .wr-dashboard-page .wra-price-card h3,
    .wr-dashboard-page .wra-addon-card h4 {
        color: var(--wr-ink-900) !important;
    }

    .wr-dashboard-page .wra-price-card-desc,
    .wr-dashboard-page .wra-price-value span,
    .wr-dashboard-page .wra-price-list,
    .wr-dashboard-page .wra-addon-price span {
        color: var(--wr-ink-600);
    }

    .wr-dashboard-page .wra-price-value,
    .wr-dashboard-page .wra-addon-price {
        color: var(--wr-ink-900);
    }

    .wr-dashboard-page .wra-price-list li {
        border-bottom-color: var(--wr-border);
    }

.wr-dashboard-page .wra-pricing-toggle {
    color: var(--wr-ink-600);
}

.wr-dashboard-page .wra-toggle-switch {
    background: var(--wr-surface-2);
    border-color: var(--wr-border-strong);
}

.wr-dashboard-page .wra-toggle-knob {
    background: var(--wr-accent);
}

.wr-dashboard-page .wra-toggle-switch[aria-checked="true"] .wra-toggle-knob {
    background: var(--wr-accent-ink);
}

.wr-dashboard-page .wra-cta-band {
    background: var(--wr-accent-soft);
    border-color: var(--wr-border);
    border-radius: var(--wr-radius-lg);
}

    .wr-dashboard-page .wra-cta-band h2 {
        color: var(--wr-ink-900);
    }

    .wr-dashboard-page .wra-cta-band p {
        color: var(--wr-ink-600);
    }

/* ---------- Status pill (scoped override; shared with out-of-scope Admin pages) ---------- */
.wr-dashboard-page .wra-status-pill.green { background: rgba(12, 163, 12, 0.10); color: var(--wr-success); }
.wr-dashboard-page .wra-status-pill.gold { background: rgba(237, 161, 0, 0.14); color: #8a6300; }
.wr-dashboard-page .wra-status-pill.red { background: rgba(208, 59, 59, 0.10); color: var(--wr-danger); }
.wr-dashboard-page .wra-status-pill.blue { background: var(--wr-accent-soft); color: var(--wr-accent-ink); }

/* ---------- Settings nav (Account/Manage/*) ---------- */
.wr-settings-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 24px;
}

.wr-settings-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--wr-radius-sm);
    color: var(--wr-ink-600);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}

    .wr-settings-nav-link i {
        width: 18px;
        text-align: center;
        flex-shrink: 0;
    }

    .wr-settings-nav-link:hover {
        background: var(--wr-surface-2);
        color: var(--wr-ink-900);
    }

    .wr-settings-nav-link.active {
        background: var(--wr-accent-soft);
        color: var(--wr-accent-ink);
    }

@media (max-width: 992px) {
    .wr-settings-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
    }

        .wr-settings-nav li {
            flex: 0 0 auto;
        }
}

/* ---------- Generic light form row (vendor profile team/hours editors, etc.) ---------- */
.wr-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

    .wr-form-row label {
        color: var(--wr-ink-600);
        font-size: 0.78rem;
        min-width: 90px;
    }

    .wr-form-row .wra-form-control {
        flex: 1;
        min-width: 120px;
        margin-bottom: 0;
    }

.wr-referral-detail-card {
    margin-top: 12px;
}

.wr-referral-detail-title {
    margin: 0 0 12px;
    padding-bottom: 10px;
    font-size: var(--wr-text-base);
    font-weight: 700;
    color: var(--wr-ink-900);
    border-bottom: 1px solid var(--wr-border);
}

.wr-referral-detail-card .wr-form-row {
    padding: 6px 0;
    margin-bottom: 0;
}

    .wr-referral-detail-card .wr-form-row strong {
        min-width: 140px;
        color: var(--wr-ink-600);
        font-size: var(--wr-text-sm);
        font-weight: 600;
    }

    .wr-referral-detail-card .wr-form-row span {
        color: var(--wr-ink-900);
        font-size: var(--wr-text-sm);
    }

/* ---------- Admin pages: scoped overrides for legacy dark widgets ----------
   Admin's ~10 subpages (Users/Agents/Vendors/Markets/Subscriptions/Plans/Reports/
   AI Usage/Settings/Coupons) lean heavily on DataTable/SectionHeader/CRMCard plus
   raw .wra-panel/.wra-btn/.wra-table/.wra-filter-bar/.wra-form-row markup. Those
   classes have no other out-of-scope consumers left after the rest of the app's
   redesign, so rather than rewrite every table/row/button in ten files, the
   *legacy dark-theme rules are repainted here* wherever they appear under
   .wr-dashboard-page. New Admin content should still prefer wr-* classes directly. */
.wr-dashboard-page .wra-btn {
    box-shadow: none;
}

.wr-dashboard-page .wra-btn-gold {
    background: var(--wr-accent);
    color: #fff;
    box-shadow: none;
}

    .wr-dashboard-page .wra-btn-gold:hover {
        background: var(--wr-accent-ink);
        box-shadow: none;
    }

.wr-dashboard-page .wra-btn-outline {
    background: var(--wr-surface);
    border-color: var(--wr-border-strong);
    color: var(--wr-ink-600);
}

    .wr-dashboard-page .wra-btn-outline:hover {
        border-color: var(--wr-accent);
        color: var(--wr-accent-ink);
    }

.wr-dashboard-page .wra-panel {
    background: var(--wr-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
    box-shadow: var(--wr-shadow-sm);
}

.wr-dashboard-page .wra-panel-title {
    color: var(--wr-ink-900);
}

.wr-dashboard-page .wra-filter-bar {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
}

    .wr-dashboard-page .wra-filter-bar label {
        color: var(--wr-ink-600);
    }

    .wr-dashboard-page .wra-filter-bar .form-control,
    .wr-dashboard-page .wra-filter-bar .form-select,
    .wr-dashboard-page .wra-filter-bar .wra-form-control {
        background: var(--wr-surface);
        border: 1px solid var(--wr-border-strong);
        color: var(--wr-ink-900);
    }

.wr-dashboard-page .wra-table-wrap {
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
}

.wr-dashboard-page .wra-table th,
.wr-dashboard-page .wra-table td {
    border-bottom: 1px solid var(--wr-border);
    color: var(--wr-ink-900);
}

.wr-dashboard-page .wra-table thead th {
    color: var(--wr-ink-400);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--wr-surface-2);
}

/* ---------- Premium DataTable shell (Toolbar + Table + Pagination) ----------
   Wraps every <DataTable> consumer (Admin Users/Agents/Vendors/Seller Leads and beyond) in a single
   card with a consistent header/toolbar and footer pager, in place of a bare .wra-table with no
   surrounding chrome. Purely additive on top of the existing .wra-table/.wra-table-wrap rules above
   (DataTable.razor keeps both classes), so nothing that already targeted those classes breaks. */
.wr-dt {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    overflow: hidden;
    margin-bottom: 20px;
}

.wr-dt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--wr-border);
}

.wr-dt-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wr-text-base);
    font-weight: 700;
    color: var(--wr-ink-900);
    white-space: nowrap;
}

.wr-dt-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    font-size: var(--wr-text-xs);
    font-weight: 700;
}

.wr-dt-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wr-dt-search {
    position: relative;
    display: flex;
    align-items: center;
}

    .wr-dt-search i {
        position: absolute;
        left: 12px;
        color: var(--wr-ink-400);
        font-size: 0.78rem;
        pointer-events: none;
    }

    .wr-dt-search input {
        padding-left: 32px;
        min-width: 220px;
    }

.wr-dt-wrap {
    border: none;
    border-radius: 0;
    overflow-x: auto;
}

.wr-dt-table {
    width: 100%;
    border-collapse: collapse;
}

    .wr-dt-table thead th {
        text-align: left;
        padding: 10px 18px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--wr-ink-400);
        background: var(--wr-surface-2);
        border-bottom: 1px solid var(--wr-border);
        white-space: nowrap;
    }

    .wr-dt-table td {
        padding: 12px 18px;
        font-size: var(--wr-text-sm);
        color: var(--wr-ink-900);
        border-bottom: 1px solid var(--wr-border);
        vertical-align: middle;
    }

    .wr-dt-table tbody tr.wr-dt-row {
        transition: background 0.12s var(--wr-ease);
    }

        .wr-dt-table tbody tr.wr-dt-row:hover {
            background: var(--wr-surface-2);
        }

@media (prefers-reduced-motion: reduce) {
    .wr-dt-table tbody tr.wr-dt-row {
        transition: none;
    }
}

.wr-dt-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--wr-border);
    background: var(--wr-surface-2);
}

.wr-dt-pagination-info {
    font-size: var(--wr-text-xs);
    color: var(--wr-ink-400);
}

.wr-dt-pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wr-dt-page-indicator {
    font-size: var(--wr-text-xs);
    font-weight: 600;
    color: var(--wr-ink-600);
    min-width: 40px;
    text-align: center;
}

/* Identity cell -- initials-on-a-circle avatar chip (see AvatarChip.razor) used by the Users/
   Agents/Vendors/Seller Leads tables so each row has a scannable visual anchor instead of bare text. */
.wr-dt-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wr-dt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.wr-dt-identity-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wr-dt-identity-name {
    font-weight: 650;
    color: var(--wr-ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wr-dt-identity-sub {
    font-size: var(--wr-text-xs);
    color: var(--wr-ink-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .wr-dt-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .wr-dt-search input {
        min-width: 0;
        width: 100%;
    }
}

/* Action-button groups inside a data table cell (e.g. AdminVendors' boost toggles and
   approve/reject/suspend actions) -- forced onto a single line rather than left to flex-wrap, which
   previously stacked 4-5 short buttons into 2-3 lines inside a cramped cell and inflated every row
   to ~200px tall. .wr-dt-wrap already scrolls horizontally, so a wide row of buttons pushes the
   table wider instead of wrapping vertically. */
.wr-dt-chip-row {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* ---------- Seller Opportunities: action cell + expandable detail/AI-summary rows ---------- */
.wr-opp-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wr-opp-detail-row td {
    background: var(--wr-surface-2);
}

.wr-opp-detail-panel {
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--wr-ink-600);
}

    .wr-opp-detail-panel strong {
        color: var(--wr-ink-900);
        font-weight: 600;
    }

.wr-opp-detail-note {
    margin: 0;
    font-style: italic;
    color: var(--wr-ink-400);
}

/* Generic, non-specific social proof shown under the full-page "Professional Opportunities" block
   (PremiumFeatureModal) on /referral-opportunities -- same trust line used on /seller-opportunities
   and the dashboard's Opportunity Feed, never a real count/city. */
.wr-opp-trust-line {
    font-size: 0.85rem;
    color: var(--wr-ink-600);
    text-align: center;
    margin-top: 0.75rem;
}

.wr-progress-tracker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.wr-progress-step {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wr-surface-2);
    color: var(--wr-ink-400);
    font-size: 0.78rem;
    white-space: nowrap;
}

.wr-progress-step.done {
    background: rgba(12, 163, 12, 0.10);
    color: var(--wr-success);
    font-weight: 600;
}

.wra-featured-admin-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

    .wra-featured-admin-form label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 0.82rem;
        color: var(--wr-ink-600);
    }

    .wra-featured-admin-form small {
        color: var(--wr-ink-400);
        font-weight: 400;
    }

.wra-featured-admin-preview {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--wr-border, #e2e2e2);
}

.wra-featured-admin-preview-card {
    max-width: 220px;
    margin-bottom: 10px;
    color: var(--wr-ink-900);
}

.wr-dashboard-page .wra-form-row label {
    color: var(--wr-ink-600);
}

.wr-dashboard-page .wra-form-row span {
    color: var(--wr-ink-900);
}

.wr-dashboard-page .wra-form-row .wra-form-control {
    background: var(--wr-surface);
    border-color: var(--wr-border-strong);
    color: var(--wr-ink-900);
}

/* Bare .wra-form-control usage in dashboard pages that don't wrap fields in .wra-form-row
   (e.g. EditProfile.razor's Bootstrap-grid form) -- same light-theme treatment, plus a real
   focus ring, since the legacy marketing.css base style has none. */
.wr-dashboard-page .wra-form-control {
    background: var(--wr-surface);
    border-color: var(--wr-border-strong);
    color: var(--wr-ink-900);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .wr-dashboard-page .wra-form-control:focus {
        outline: none;
        border-color: var(--wr-accent);
        box-shadow: 0 0 0 3px var(--wr-accent-soft);
    }

    .wr-dashboard-page label.form-label {
        color: var(--wr-ink-600);
        font-weight: 600;
        font-size: var(--wr-text-sm);
    }

.wr-form-section-title {
    margin: 0 0 16px;
    font-size: var(--wr-text-base);
    font-weight: 700;
    color: var(--wr-ink-900);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wr-border);
}

.wr-form-success-banner {
    background: var(--wr-accent-soft);
    border-color: var(--wr-success);
    margin-bottom: 20px;
}

    .wr-form-success-banner p {
        margin: 0;
        color: var(--wr-ink-900);
        font-weight: 600;
    }

    .wr-form-success-banner i {
        color: var(--wr-success);
        margin-right: 6px;
    }

.wr-alert-banner {
    margin-bottom: 24px;
}

    .wr-alert-banner p {
        margin: 0;
        font-weight: 600;
    }

.wr-alert-banner.wr-alert-success {
    background: var(--wr-accent-soft);
    border-color: var(--wr-success);
}

    .wr-alert-banner.wr-alert-success p {
        color: var(--wr-ink-900);
    }

.wr-alert-banner.wr-alert-danger {
    background: rgba(208, 59, 59, 0.06);
    border-color: var(--wr-danger);
}

    .wr-alert-banner.wr-alert-danger p {
        color: var(--wr-danger);
    }

.wr-billing-plan-card {
    margin-bottom: 24px;
}

.wr-billing-plan-status {
    color: var(--wr-ink-600);
    margin: 0;
}

.wr-billing-plan-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.wr-billing-kpi-row {
    margin-bottom: 24px;
}

.wr-billing-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wr-space-5);
}

@media (max-width: 640px) {
    .wr-billing-features-grid {
        grid-template-columns: 1fr;
    }
}

.wr-billing-feature-heading {
    font-size: var(--wr-text-sm);
    font-weight: 700;
    margin-bottom: 10px;
}

.wr-billing-feature-heading-available {
    color: var(--wr-success);
}

.wr-billing-feature-heading-locked {
    color: var(--wr-ink-400);
}

.wr-billing-feature-list {
    list-style: none;
    margin: 0;
    padding: 14px 16px;
    background: var(--wr-surface-alt);
    border-radius: var(--wr-radius-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .wr-billing-feature-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: var(--wr-text-sm);
        font-weight: 600;
        color: var(--wr-ink-600);
    }

    .wr-billing-feature-list i {
        color: var(--wr-success);
        flex-shrink: 0;
    }

.wr-billing-feature-list-locked i {
    color: var(--wr-ink-400);
}

.wr-billing-upgrade-cta {
    margin-top: 12px;
}

.wr-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--wr-space-4);
}

.wr-quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: var(--wr-space-5) var(--wr-space-3);
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    color: var(--wr-ink-900);
    font-weight: 700;
    font-size: var(--wr-text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s var(--wr-ease), box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease);
}

    .wr-quick-action-btn:hover {
        border-color: var(--wr-accent);
        box-shadow: var(--wr-shadow-md);
        transform: translateY(-2px);
    }

.wr-quick-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wr-primary-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
    .wr-quick-action-btn {
        transition: none;
    }

        .wr-quick-action-btn:hover {
            transform: none;
        }
}

.wr-photo-upload-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.wr-photo-upload-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--wr-surface);
    box-shadow: 0 0 0 2px var(--wr-border);
    flex-shrink: 0;
}

.wr-photo-upload-controls {
    flex: 1 1 auto;
    min-width: 0;
}

.wr-photo-upload-hint {
    color: var(--wr-ink-400);
    font-size: var(--wr-text-xs);
    margin: 8px 0 0;
}

.wr-photo-upload-error {
    color: var(--wr-danger);
    font-size: var(--wr-text-sm);
    margin-top: 8px;
}

@media (max-width: 640px) {
    .wr-photo-upload-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.wr-dashboard-page .wra-admin-subnav a {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    color: var(--wr-ink-600);
}

    .wr-dashboard-page .wra-admin-subnav a:hover,
    .wr-dashboard-page .wra-admin-subnav a.active {
        background: var(--wr-accent-soft);
        border-color: var(--wr-accent);
        color: var(--wr-accent-ink);
    }

.wr-dashboard-page .wra-stat-tile {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
    box-shadow: var(--wr-shadow-sm);
}

    .wr-dashboard-page .wra-stat-tile .value {
        color: var(--wr-ink-900);
    }

    .wr-dashboard-page .wra-stat-tile .label {
        color: var(--wr-ink-600);
    }

    .wr-dashboard-page .wra-stat-tile-icon {
        color: var(--wr-accent-ink);
        background: var(--wr-accent-soft);
    }

/* ---------- Coming soon panel (Messages, etc.) ---------- */
.wr-coming-soon-panel {
    text-align: center;
    padding: var(--wr-space-8) var(--wr-space-5);
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
}

.wr-coming-soon-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.wr-coming-soon-panel h2 {
    font-size: var(--wr-text-xl);
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--wr-ink-900);
}

.wr-coming-soon-panel p {
    color: var(--wr-ink-600);
    max-width: 52ch;
    margin: 0 auto 20px;
}

.wr-coming-soon-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.wr-coming-soon-features {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--wr-border);
}

.wr-coming-soon-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wr-ink-400);
    font-size: var(--wr-text-sm);
    font-weight: 600;
}

/* ---------- Quick actions ---------- */
.wr-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--wr-space-3);
}

.wr-quick-action {
    display: flex;
    flex-direction: column;
    gap: var(--wr-space-3);
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    padding: var(--wr-space-4);
    text-decoration: none;
    color: var(--wr-ink-900);
    box-shadow: var(--wr-shadow-sm);
    transition: box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease), border-color 0.2s var(--wr-ease);
}

    .wr-quick-action:hover {
        box-shadow: var(--wr-shadow-md);
        transform: translateY(-2px);
        border-color: var(--wr-accent);
    }

.wr-quick-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.wr-quick-action span {
    font-size: var(--wr-text-sm);
    font-weight: 700;
}

/* ---------- Vendor onboarding wizard (List Your Business) ---------- */
.wr-wizard {
    max-width: 780px;
    margin: 0 auto;
}

.wr-wizard-stepper {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.wr-wizard-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wr-surface-2);
    border: 1px solid var(--wr-border);
    color: var(--wr-ink-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

    .wr-wizard-step-dot.active {
        background: var(--wr-accent);
        border-color: var(--wr-accent);
        color: #fff;
    }

    .wr-wizard-step-dot.done {
        background: var(--wr-accent-soft);
        border-color: var(--wr-accent);
        color: var(--wr-accent-ink);
    }

.wr-wizard-step-label {
    text-align: center;
    color: var(--wr-ink-600);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 20px;
}

.wr-wizard-card h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    color: var(--wr-ink-900);
}

.wr-wizard-subhead {
    color: var(--wr-ink-600);
    font-size: 0.88rem;
    margin: 0 0 16px;
}

.wr-wizard-error {
    background: rgba(208, 59, 59, 0.08);
    color: var(--wr-danger);
    border-radius: var(--wr-radius-sm);
    padding: 10px 14px;
    font-size: 0.85rem;
    margin: 0 0 16px;
}

.wr-wizard-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.wr-wizard-category-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: var(--wr-radius-md);
    border: 1px solid var(--wr-border);
    background: var(--wr-surface);
    color: var(--wr-ink-600);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .wr-wizard-category-option i {
        font-size: 1.2rem;
        color: var(--wr-accent);
    }

    .wr-wizard-category-option.active {
        border-color: var(--wr-accent);
        background: var(--wr-accent-soft);
        color: var(--wr-accent-ink);
    }

.wr-wizard-branding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.wr-wizard-logo-preview {
    width: 72px;
    height: 72px;
    border-radius: var(--wr-radius-sm);
    object-fit: cover;
    display: block;
    margin-bottom: 10px;
}

.wr-wizard-logo-placeholder {
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.wr-wizard-banner-preview {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: var(--wr-radius-sm);
    display: block;
    margin-bottom: 10px;
}

.wr-wizard-gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.wr-wizard-gallery-item {
    position: relative;
}

    .wr-wizard-gallery-item img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: var(--wr-radius-sm);
    }

    .wr-wizard-gallery-item button {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: none;
        background: rgba(20, 22, 26, 0.7);
        color: #fff;
        cursor: pointer;
        line-height: 1;
    }

.wr-wizard-service-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wr-wizard-service-chip {
    border: 1px solid var(--wr-border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.82rem;
}

    .wr-wizard-service-chip.active {
        border-color: var(--wr-accent);
        background: var(--wr-accent-soft);
    }

.wr-wizard-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.wr-wizard-plan-card {
    position: relative;
    text-align: left;
    background: var(--wr-surface);
    border: 2px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .wr-wizard-plan-card.active {
        border-color: var(--wr-accent);
        box-shadow: var(--wr-shadow-md);
    }

    .wr-wizard-plan-card h3 {
        margin: 0 0 6px;
        font-size: 1.05rem;
        color: var(--wr-ink-900);
    }

    .wr-wizard-plan-card ul {
        list-style: none;
        margin: 12px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .wr-wizard-plan-card li {
        font-size: 0.8rem;
        color: var(--wr-ink-600);
    }

        .wr-wizard-plan-card li i {
            color: var(--wr-success);
            margin-right: 6px;
        }

.wr-wizard-plan-price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--wr-accent-ink);
}

.wr-wizard-plan-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--wra-gold);
    color: #3a2c00;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
}

.wr-wizard-boost-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wr-wizard-boost-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .wr-wizard-boost-card.active {
        border-color: var(--wr-accent);
        background: var(--wr-accent-soft);
    }

    .wr-wizard-boost-card input {
        margin-top: 4px;
    }

    .wr-wizard-boost-card strong {
        color: var(--wr-ink-900);
        margin-right: 8px;
    }

    .wr-wizard-boost-card p {
        margin: 4px 0 0;
        font-size: 0.8rem;
        color: var(--wr-ink-600);
    }

.wr-wizard-boost-price {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wr-accent-ink);
}

.wr-wizard-review-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

    .wr-wizard-review-hero h3 {
        margin: 0;
        color: var(--wr-ink-900);
    }

    .wr-wizard-review-hero p {
        margin: 2px 0 0;
        color: var(--wr-ink-600);
        font-size: 0.85rem;
    }

.wr-wizard-review-description {
    color: var(--wr-ink-600);
    font-size: 0.88rem;
}

.wr-wizard-review-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--wr-border);
}

    .wr-wizard-review-facts span {
        font-size: 0.82rem;
        color: var(--wr-ink-600);
    }

    .wr-wizard-review-facts i {
        color: var(--wr-accent);
        margin-right: 6px;
    }

.wr-wizard-auth-gate {
    margin-top: 20px;
    padding: 20px;
    border-radius: var(--wr-radius-md);
    background: var(--wr-accent-soft);
}

    .wr-wizard-auth-gate h3 {
        margin: 0 0 6px;
        color: var(--wr-ink-900);
    }

    .wr-wizard-auth-gate p {
        margin: 0 0 14px;
        color: var(--wr-ink-600);
        font-size: 0.85rem;
    }

.wr-wizard-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--wr-border);
}

.wr-wizard-confirmation {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 32px;
}

.wr-wizard-confirmation-icon {
    font-size: 2.5rem;
    color: var(--wr-success);
    margin-bottom: 16px;
}

.wr-wizard-confirmation h2 {
    margin: 0 0 8px;
}

.wr-wizard-confirmation p {
    color: var(--wr-ink-600);
    margin: 0 0 20px;
}

@media (max-width: 768px) {
    .wr-wizard-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wr-wizard-branding-grid, .wr-wizard-plan-grid {
        grid-template-columns: 1fr;
    }

    .wr-wizard-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .wr-wizard-nav {
        flex-direction: column-reverse;
        gap: 10px;
    }

        .wr-wizard-nav .wr-btn {
            width: 100%;
        }
}

/* ---------- Vendor card: agent-only actions (Save/Compare/Quote/Review) ---------- */
.wr-vendor-card-save {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--wr-ink-400);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--wr-shadow-sm);
}

    .wr-vendor-card-save.active {
        color: #e34948;
    }

.wr-vendor-card-actions-secondary {
    border-top: 1px solid var(--wr-border);
    padding-top: 8px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wr-vendor-card-compare {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--wr-ink-600);
    font-weight: 600;
}

.wr-vendor-card-link-action {
    font-size: 0.78rem;
    color: var(--wr-accent-ink);
    font-weight: 600;
    text-decoration: none;
}

    .wr-vendor-card-link-action:hover {
        text-decoration: underline;
    }

/* ---------- Public marketing variant of Vendor Marketplace ---------- */
.wr-vendor-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.wr-vendor-benefit-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: 20px;
    text-align: left;
}

    .wr-vendor-benefit-card h3 {
        font-size: 0.95rem;
        color: var(--wr-ink-900);
        margin: 4px 0;
    }

    .wr-vendor-benefit-card p {
        font-size: 0.82rem;
        color: var(--wr-ink-600);
        margin: 0;
    }

.wr-vendor-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wr-vendor-testimonial-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: 20px;
}

    .wr-vendor-testimonial-card p {
        font-size: 0.88rem;
        color: var(--wr-ink-900);
        font-style: italic;
        margin: 10px 0;
    }

    .wr-vendor-testimonial-card span {
        font-size: 0.78rem;
        color: var(--wr-ink-400);
        font-weight: 600;
    }

.wr-vendor-testimonial-stars {
    color: #eda100;
    font-size: 0.85rem;
}

.wr-vendor-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #101828 0%, #1c2a4a 100%);
    border-radius: var(--wr-radius-lg);
    padding: 32px 40px;
    margin: 32px 0;
}

    .wr-vendor-cta-banner h2 {
        color: #fff;
        margin: 0 0 6px;
        font-size: 1.3rem;
    }

    .wr-vendor-cta-banner p {
        color: rgba(255, 255, 255, 0.78);
        margin: 0;
        font-size: 0.9rem;
    }

.wr-vendor-star-picker button {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--wr-border-strong);
    cursor: pointer;
    padding: 2px;
}

    .wr-vendor-star-picker button.active {
        color: #eda100;
    }

/* ---------- Vendor comparison table ---------- */
.wr-vendor-compare-table {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    overflow-x: auto;
    padding: 16px;
}

    .wr-vendor-compare-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .wr-vendor-compare-table th, .wr-vendor-compare-table td {
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--wr-border);
        font-size: 0.85rem;
        color: var(--wr-ink-600);
        white-space: nowrap;
    }

    .wr-vendor-compare-table th {
        color: var(--wr-ink-900);
        font-weight: 700;
    }

    .wr-vendor-compare-table td:first-child {
        font-weight: 600;
        color: var(--wr-ink-900);
    }

@media (max-width: 1200px) {
    .wr-vendor-benefits-grid, .wr-vendor-testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .wr-vendor-benefits-grid, .wr-vendor-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .wr-vendor-cta-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================================================
   List Your Business (/vendors/list-your-business) -- premium onboarding redesign.
   Namespaced wr-onboard-* throughout: these are NEW, page-specific classes, deliberately
   not reusing .wr-wizard-* (still used by Vendor Marketplace's pricing preview section).
   ===================================================================================== */

@keyframes wrOnboardFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero ---------- */
.wr-onboard-hero {
    background: linear-gradient(135deg, #101828 0%, #1c2a4a 100%);
    padding: 72px 24px;
    overflow: hidden;
}

.wr-onboard-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 48px;
}

.wr-onboard-eyebrow {
    display: inline-block;
    color: var(--wra-gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.wr-onboard-hero-copy h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 18px;
}

.wr-onboard-hero-copy p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 560px;
}

.wr-onboard-hero-copy .wra-btn i {
    margin-left: 8px;
}

.wr-onboard-hero-graphic {
    position: relative;
    height: 320px;
}

.wr-onboard-hero-tile {
    position: absolute;
    width: 76px;
    height: 76px;
    border-radius: var(--wr-radius-lg);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--wra-gold);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    animation: wrOnboardFadeUp 0.6s ease both;
}

.wr-onboard-hero-tile-1 { top: 6%; left: 8%; animation-delay: 0.05s; }
.wr-onboard-hero-tile-2 { top: 4%; right: 10%; animation-delay: 0.15s; }
.wr-onboard-hero-tile-3 { bottom: 12%; left: 2%; animation-delay: 0.25s; }
.wr-onboard-hero-tile-4 { bottom: 6%; right: 6%; animation-delay: 0.35s; }
.wr-onboard-hero-tile-5 { top: 44%; right: 32%; animation-delay: 0.45s; }

.wr-onboard-hero-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wra-gold) 0%, var(--wra-gold-dark, #c98500) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    color: #101828;
    box-shadow: 0 20px 48px rgba(242, 182, 50, 0.35);
}

@media (max-width: 900px) {
    .wr-onboard-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .wr-onboard-hero-copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .wr-onboard-hero-graphic {
        height: 220px;
    }

    .wr-onboard-hero-tile {
        width: 56px;
        height: 56px;
        font-size: 1.2rem;
    }

    .wr-onboard-hero-center {
        width: 96px;
        height: 96px;
        font-size: 2rem;
    }
}

/* ---------- Benefits ---------- */
.wr-onboard-benefits-section {
    background: var(--wr-bg);
    padding: 56px 24px;
}

.wr-onboard-benefits {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.wr-onboard-benefit {
    display: flex;
    gap: 16px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-sm);
    padding: 24px;
    transition: box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease);
}

    .wr-onboard-benefit:hover {
        box-shadow: var(--wr-shadow-md);
        transform: translateY(-2px);
    }

.wr-onboard-benefit-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wr-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.wr-onboard-benefit h3 {
    font-size: 1rem;
    color: var(--wr-ink-900);
    margin: 0 0 6px;
}

.wr-onboard-benefit p {
    font-size: 0.85rem;
    color: var(--wr-ink-600);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .wr-onboard-benefits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .wr-onboard-benefits { grid-template-columns: 1fr; }
}

/* ---------- Wizard shell ---------- */
.wr-onboard-wizard {
    /* .wra-body (the public MainLayout body wrapper) defaults to dark navy -- without an
       explicit light background spanning the full row here, that shows through on either side
       of the centered .wr-onboard-wizard-inner column on wide viewports. */
    background: var(--wr-bg);
}

.wr-onboard-wizard-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

/* ---------- Large horizontal stepper ---------- */
.wr-onboard-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 48px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.wr-onboard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 108px;
}

.wr-onboard-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wr-surface);
    border: 2px solid var(--wr-border-strong);
    color: var(--wr-ink-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.wr-onboard-step-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wr-ink-400);
    text-align: center;
    line-height: 1.3;
}

.wr-onboard-step.active .wr-onboard-step-circle {
    background: var(--wr-accent);
    border-color: var(--wr-accent);
    color: #fff;
    box-shadow: 0 0 0 5px var(--wr-accent-soft);
}

.wr-onboard-step.active .wr-onboard-step-label {
    color: var(--wr-accent-ink);
}

.wr-onboard-step.done .wr-onboard-step-circle {
    background: var(--wr-success);
    border-color: var(--wr-success);
    color: #fff;
}

.wr-onboard-step.done .wr-onboard-step-label {
    color: var(--wr-ink-600);
}

.wr-onboard-step-connector {
    flex: 1 1 auto;
    height: 2px;
    background: var(--wr-border-strong);
    margin-top: 20px;
    min-width: 20px;
    transition: background 0.3s ease;
}

.wr-onboard-step-connector.done {
    background: var(--wr-success);
}

@media (max-width: 900px) {
    .wr-onboard-step-label { display: none; }
    .wr-onboard-step { width: auto; }
}

/* ---------- Two-column layout: main content + sticky summary ---------- */
.wr-onboard-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}

.wr-onboard-main {
    min-width: 0;
}

.wr-onboard-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-md);
    padding: 40px;
    animation: wrOnboardFadeUp 0.35s ease both;
}

    .wr-onboard-card h2 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--wr-ink-900);
        margin: 0 0 8px;
    }

.wr-onboard-subhead {
    color: var(--wr-ink-600);
    font-size: 0.95rem;
    margin: 0 0 28px;
}

.wr-onboard-optional {
    font-weight: 400;
    color: var(--wr-ink-400);
}

.wr-onboard-field-block {
    margin-top: 20px;
}

.wr-onboard-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

@media (max-width: 1000px) {
    .wr-onboard-layout {
        grid-template-columns: 1fr;
    }

    .wr-onboard-summary {
        position: static;
        order: -1;
    }
}

@media (max-width: 640px) {
    .wr-onboard-card {
        padding: 24px;
    }
}

/* ---------- Category cards (Step 1) ---------- */
.wr-onboard-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wr-onboard-category-card {
    text-align: left;
    background: var(--wr-surface);
    border: 2px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    padding: 22px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s var(--wr-ease), box-shadow 0.2s var(--wr-ease), transform 0.2s var(--wr-ease);
}

    .wr-onboard-category-card:hover {
        box-shadow: var(--wr-shadow-md);
        transform: translateY(-2px);
    }

    .wr-onboard-category-card.active {
        border-color: var(--wr-accent);
        box-shadow: 0 0 0 4px var(--wr-accent-soft);
    }

.wr-onboard-category-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--wr-accent-soft);
    color: var(--wr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.wr-onboard-category-card h3 {
    font-size: 1.02rem;
    color: var(--wr-ink-900);
    margin: 0;
}

.wr-onboard-category-desc {
    font-size: 0.82rem;
    color: var(--wr-ink-600);
    margin: 0;
    flex: 1;
}

.wr-onboard-category-examples {
    font-size: 0.76rem;
    color: var(--wr-ink-400);
    margin: 0;
    font-style: italic;
}

.wr-onboard-category-popularity {
    font-size: 0.72rem;
    color: #eda100;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}

    .wr-onboard-category-popularity span {
        color: var(--wr-ink-400);
        font-weight: 600;
        margin-left: 6px;
    }

.wr-onboard-category-select {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--wr-surface-2);
    color: var(--wr-ink-600);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.wr-onboard-category-card.active .wr-onboard-category-select {
    background: var(--wr-accent);
    color: #fff;
}

.wr-onboard-category-card-other {
    justify-content: center;
    align-items: flex-start;
}

@media (max-width: 1000px) {
    .wr-onboard-category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .wr-onboard-category-grid { grid-template-columns: 1fr; }
}

/* ---------- Branding upload tiles (Step 3) ---------- */
.wr-onboard-branding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.wr-onboard-upload-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wr-onboard-logo-preview {
    width: 96px;
    height: 96px;
    border-radius: var(--wr-radius-md);
    object-fit: cover;
}

.wr-onboard-banner-preview {
    width: 100%;
    height: 110px;
    border-radius: var(--wr-radius-md);
    object-fit: cover;
}

.wr-onboard-upload-placeholder {
    width: 96px;
    height: 96px;
    border-radius: var(--wr-radius-md);
    background: var(--wr-surface-2);
    color: var(--wr-ink-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    border: 2px dashed var(--wr-border-strong);
}

.wr-onboard-upload-placeholder-wide {
    width: 100%;
    height: 110px;
}

@media (max-width: 640px) {
    .wr-onboard-branding-grid { grid-template-columns: 1fr; }
}

/* ---------- Gallery (Step 6) ---------- */
.wr-onboard-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.wr-onboard-gallery-item {
    position: relative;
}

    .wr-onboard-gallery-item img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: var(--wr-radius-sm);
    }

    .wr-onboard-gallery-item button {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: none;
        background: rgba(20, 22, 26, 0.7);
        color: #fff;
        cursor: pointer;
        line-height: 1;
    }

.wr-onboard-gallery-upload {
    border: 2px dashed var(--wr-border-strong);
    border-radius: var(--wr-radius-lg);
    padding: 32px;
    text-align: center;
    color: var(--wr-ink-600);
}

    .wr-onboard-gallery-upload i {
        font-size: 1.8rem;
        color: var(--wr-accent);
        margin-bottom: 8px;
    }

    .wr-onboard-gallery-upload p {
        margin: 0 0 14px;
        font-size: 0.88rem;
    }

@media (max-width: 640px) {
    .wr-onboard-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Services (Step 5) ---------- */
.wr-onboard-service-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wr-onboard-service-chip {
    border: 1px solid var(--wr-border);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 0.86rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .wr-onboard-service-chip.active {
        border-color: var(--wr-accent);
        background: var(--wr-accent-soft);
        color: var(--wr-accent-ink);
        font-weight: 600;
    }

/* ---------- Membership plan cards (Step 7) ---------- */
.wr-onboard-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.wr-onboard-plan-card {
    position: relative;
    text-align: left;
    background: var(--wr-surface);
    border: 2px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    padding: 24px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .wr-onboard-plan-card:hover {
        box-shadow: var(--wr-shadow-md);
    }

    .wr-onboard-plan-card.active {
        border-color: var(--wr-accent);
        box-shadow: 0 0 0 4px var(--wr-accent-soft);
    }

    .wr-onboard-plan-card h3 {
        margin: 0 0 4px;
        font-size: 1.1rem;
        color: var(--wr-ink-900);
    }

.wr-onboard-plan-subtitle {
    font-size: 0.8rem;
    color: var(--wr-ink-600);
    margin: 0 0 10px;
    line-height: 1.4;
}

.wr-onboard-plan-feature-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    max-height: 260px;
    overflow-y: auto;
    /* A soft fade at the bottom hints there's more to scroll, without a hard cutoff line. */
    mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent 100%);
}

    .wr-onboard-plan-feature-list li {
        font-size: 0.82rem;
        color: var(--wr-ink-600);
    }

        .wr-onboard-plan-feature-list li i {
            color: var(--wr-success);
            margin-right: 8px;
        }

    .wr-onboard-plan-feature-heading {
        font-weight: 700;
        color: var(--wr-ink-900);
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px dashed var(--wr-border);
    }

        .wr-onboard-plan-feature-heading:first-child {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }

.wr-onboard-plan-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--wr-accent-ink);
}

.wr-onboard-plan-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--wra-gold);
    color: #3a2c00;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 999px;
}

@media (max-width: 640px) {
    .wr-onboard-plan-grid { grid-template-columns: 1fr; }
}

/* ---------- Why Join (Step 7, above pricing) ---------- */
.wr-onboard-whyjoin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}

.wr-onboard-whyjoin-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--wr-accent-soft);
    border-radius: var(--wr-radius-md);
    padding: 16px;
    transition: transform 0.15s ease;
}

    .wr-onboard-whyjoin-card:hover {
        transform: translateY(-2px);
    }

.wr-onboard-whyjoin-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wr-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
}

.wr-onboard-whyjoin-card p {
    margin: 0;
    font-size: 0.86rem;
    color: var(--wr-ink-900);
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 1000px) {
    .wr-onboard-whyjoin-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .wr-onboard-whyjoin-grid { grid-template-columns: 1fr; }
}

/* ---------- Comparison table (Step 7, below pricing) ---------- */
.wr-onboard-comparison {
    margin-top: 40px;
}

    .wr-onboard-comparison h3 {
        font-size: 1.15rem;
        color: var(--wr-ink-900);
        margin: 0 0 16px;
    }

.wr-onboard-comparison-scroll {
    overflow-x: auto;
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
}

.wr-onboard-comparison table {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
}

.wr-onboard-comparison thead th {
    background: var(--wr-surface-2);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wr-ink-600);
    font-weight: 800;
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid var(--wr-border);
}

    .wr-onboard-comparison thead th:first-child {
        text-align: left;
    }

.wr-onboard-comparison tbody td {
    padding: 12px 16px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--wr-ink-900);
    border-bottom: 1px solid var(--wr-border);
}

.wr-onboard-comparison tbody tr:last-child td {
    border-bottom: none;
}

.wr-onboard-comparison-row-label {
    text-align: left !important;
    font-weight: 600;
    color: var(--wr-ink-600);
}

.wr-onboard-comparison-yes {
    color: var(--wr-success);
}

.wr-onboard-comparison-no {
    color: var(--wr-ink-400);
}

/* ---------- Vendor Dashboard preview (Step 7, below comparison table) ---------- */
.wr-onboard-dashboard-preview {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 28px;
    align-items: center;
    background: var(--wr-surface-2);
    border-radius: var(--wr-radius-lg);
    padding: 28px;
}

.wr-onboard-dashboard-preview-copy h3 {
    font-size: 1.15rem;
    color: var(--wr-ink-900);
    margin: 0 0 8px;
}

.wr-onboard-dashboard-preview-copy p {
    font-size: 0.88rem;
    color: var(--wr-ink-600);
    margin: 0 0 16px;
    line-height: 1.5;
}

.wr-onboard-dashboard-preview-copy .wra-btn i {
    margin-left: 6px;
}

.wr-onboard-dashboard-mockup {
    position: relative;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-md);
    padding: 20px;
}

.wr-onboard-dashboard-mockup-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--wr-ink-400);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wr-onboard-dashboard-mockup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.wr-onboard-dashboard-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--wr-bg);
    border-radius: var(--wr-radius-md);
    padding: 16px 8px;
    text-align: center;
    animation: wrOnboardFadeUp 0.3s ease both;
}

    .wr-onboard-dashboard-kpi i {
        color: var(--wr-accent);
        font-size: 1rem;
    }

    .wr-onboard-dashboard-kpi strong {
        font-size: 1.15rem;
        color: var(--wr-ink-900);
    }

    .wr-onboard-dashboard-kpi span {
        font-size: 0.68rem;
        color: var(--wr-ink-600);
        font-weight: 600;
        line-height: 1.2;
    }

@media (max-width: 900px) {
    .wr-onboard-dashboard-preview { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .wr-onboard-dashboard-mockup-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Review (Step 8) ---------- */
.wr-onboard-review-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

    .wr-onboard-review-hero h3 {
        margin: 0;
        color: var(--wr-ink-900);
        font-size: 1.15rem;
    }

    .wr-onboard-review-hero p {
        margin: 2px 0 0;
        color: var(--wr-ink-600);
        font-size: 0.85rem;
    }

.wr-onboard-review-description {
    color: var(--wr-ink-600);
    font-size: 0.9rem;
    line-height: 1.6;
}

.wr-onboard-review-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 16px 0 24px;
    padding: 16px 0;
    border-top: 1px solid var(--wr-border);
    border-bottom: 1px solid var(--wr-border);
}

    .wr-onboard-review-facts span {
        font-size: 0.85rem;
        color: var(--wr-ink-600);
    }

    .wr-onboard-review-facts i {
        color: var(--wr-accent);
        margin-right: 6px;
    }

.wr-onboard-auth-gate {
    margin-top: 8px;
    padding: 24px;
    border-radius: var(--wr-radius-lg);
    background: var(--wr-accent-soft);
}

    .wr-onboard-auth-gate h3 {
        margin: 0 0 6px;
        color: var(--wr-ink-900);
    }

    .wr-onboard-auth-gate p {
        margin: 0 0 16px;
        color: var(--wr-ink-600);
        font-size: 0.88rem;
    }

.wr-onboard-consent-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

/* ---------- Sticky summary panel ---------- */
.wr-onboard-summary {
    position: sticky;
    top: 24px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-md);
    padding: 24px;
}

    .wr-onboard-summary h4 {
        margin: 0 0 16px;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--wr-ink-400);
        font-weight: 800;
    }

.wr-onboard-summary-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
    border-bottom: 1px solid var(--wr-border);
}

.wr-onboard-summary-label {
    font-size: 0.72rem;
    color: var(--wr-ink-400);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wr-onboard-summary-value {
    font-size: 0.92rem;
    color: var(--wr-ink-900);
    font-weight: 600;
}

.wr-onboard-summary-block {
    padding: 12px 0;
    border-bottom: 1px solid var(--wr-border);
}

.wr-onboard-summary-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .wr-onboard-summary-list li {
        font-size: 0.82rem;
        color: var(--wr-ink-600);
    }

    .wr-onboard-summary-list i {
        color: var(--wr-success);
        margin-right: 6px;
    }

.wr-onboard-summary-progress {
    margin-top: 16px;
}

.wr-onboard-summary-progress-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--wr-ink-600);
    font-weight: 700;
    margin-bottom: 8px;
}

.wr-onboard-summary-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--wr-surface-2);
    overflow: hidden;
}

    .wr-onboard-summary-progress-bar div {
        height: 100%;
        background: linear-gradient(90deg, var(--wr-accent), var(--wra-gold));
        border-radius: 999px;
        transition: width 0.35s ease;
    }

/* ---------- Confirmation / already-listed screens ---------- */
.wr-onboard-confirmation-shell {
    background: var(--wr-bg);
    display: flex;
    justify-content: center;
    padding: 64px 24px 96px;
    min-height: 60vh;
}

.wr-onboard-confirmation {
    max-width: 560px;
    text-align: center;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-lg);
    box-shadow: var(--wr-shadow-lg);
    padding: 56px 40px;
    animation: wrOnboardFadeUp 0.4s ease both;
}

.wr-onboard-confirmation-icon {
    font-size: 3rem;
    color: var(--wr-success);
    margin-bottom: 20px;
}

.wr-onboard-confirmation h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--wr-ink-900);
    margin: 0 0 12px;
}

.wr-onboard-confirmation p {
    color: var(--wr-ink-600);
    margin: 0 0 28px;
    line-height: 1.6;
}

.wr-onboard-confirmation-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Page demo guide (guided tour) -- PageDemoGuide.razor. Works across every
   layout (dashboard, auth, seller marketing) since it's a fixed overlay.
   ========================================================================== */

.wr-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    outline: none;
}

.wr-tour-spotlight {
    position: absolute;
    z-index: 2001;
    border-radius: var(--wr-radius-md, 12px);
    box-shadow: 0 0 0 9999px rgba(10, 12, 16, 0.6), 0 0 0 3px var(--wr-accent, #2a78d6);
    pointer-events: none;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.wr-tour-card {
    position: fixed;
    z-index: 2002;
    max-width: 340px;
    background: var(--wr-surface, #fff);
    border-radius: var(--wr-radius-lg, 16px);
    box-shadow: var(--wr-shadow-lg, 0 12px 32px rgba(20,22,26,.24));
    padding: 20px;
    bottom: 32px;
    right: 32px;
}

    .wr-tour-card.wr-tour-placement-top { bottom: auto; top: 90px; }
    .wr-tour-card.wr-tour-placement-left { right: auto; left: 32px; }

    .wr-tour-card h3 {
        margin: 4px 0 8px;
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--wr-ink-900, #14161a);
    }

    .wr-tour-card p {
        margin: 0 0 16px;
        color: var(--wr-ink-600, #5b6270);
        font-size: 0.9rem;
        line-height: 1.5;
    }

.wr-tour-step-indicator {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wr-accent-ink, #184f95);
}

.wr-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.wr-tour-nav-buttons {
    display: flex;
    gap: 8px;
}

.wr-btn-text {
    background: none;
    border: none;
    color: var(--wr-ink-400, #8b91a0);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .wr-tour-card {
        left: 16px;
        right: 16px;
        bottom: 16px;
        top: auto;
        max-width: none;
    }

        .wr-tour-card.wr-tour-placement-top {
            top: auto;
            bottom: 16px;
        }
}

/* Help menu trigger on AuthLayout (Registration) -- that layout has no persistent header/nav row
   to place a dropdown trigger into, so it floats instead. */
.wr-auth-help-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 500;
}

.wr-auth-help-fab-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--wr-accent, #2a78d6);
    color: #fff;
    border: none;
    box-shadow: var(--wr-shadow-lg, 0 12px 32px rgba(20,22,26,.24));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
}

    .wr-auth-help-fab-btn:hover {
        filter: brightness(1.08);
    }

/* ==========================================================================
   Page AI Assistant -- PageAiAssistant.razor. A slide-in side panel (ongoing
   conversation), distinct from PageDemoGuide's spotlight overlay (one-shot
   walkthrough).
   ========================================================================== */

.wr-ai-assistant-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(10, 12, 16, 0.35);
    display: flex;
    justify-content: flex-end;
}

.wr-ai-assistant-panel {
    width: 380px;
    max-width: 100vw;
    height: 100%;
    background: var(--wr-surface, #fff);
    box-shadow: var(--wr-shadow-lg, 0 12px 32px rgba(20,22,26,.24));
    display: flex;
    flex-direction: column;
}

.wr-ai-assistant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--wr-border, #e6e8ec);
}

    .wr-ai-assistant-header h3 {
        margin: 0;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.wr-ai-assistant-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--wr-ink-400, #8b91a0);
    cursor: pointer;
}

.wr-ai-assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wr-ai-turn p {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--wr-radius-md, 12px);
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 90%;
}

.wr-ai-turn-user {
    display: flex;
    justify-content: flex-end;
}

    .wr-ai-turn-user p {
        background: var(--wr-accent, #2a78d6);
        color: #fff;
    }

.wr-ai-turn-assistant p {
    background: var(--wr-surface-2, #f2f4f7);
    color: var(--wr-ink-900, #14161a);
}

.wr-ai-typing p {
    color: var(--wr-ink-400, #8b91a0);
    font-style: italic;
}

.wr-ai-assistant-input {
    border-top: 1px solid var(--wr-border, #e6e8ec);
    padding: 12px 16px;
}

    .wr-ai-assistant-input textarea {
        width: 100%;
        resize: none;
        min-height: 60px;
        border: 1px solid var(--wr-border, #e6e8ec);
        border-radius: var(--wr-radius-md, 12px);
        padding: 8px 12px;
        font-family: inherit;
        font-size: 0.85rem;
    }

.wr-ai-assistant-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.wr-ai-char-count {
    font-size: 0.72rem;
    color: var(--wr-ink-400, #8b91a0);
}

/* ---------- Find Agents directory hero stats row ---------- */
.wr-find-agents-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-space-6);
    margin-top: var(--wr-space-2);
}

.wr-find-agents-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .wr-find-agents-stat strong {
        font-size: var(--wr-text-2xl);
        font-weight: 800;
        color: var(--wr-accent-ink);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .wr-find-agents-stat span {
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--wr-ink-600);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

@media (max-width: 768px) {
    .wr-find-agents-stats-row {
        gap: var(--wr-space-4);
    }
}

/* ---------- Agent card specialty chips ---------- */
.wr-agent-card-specialties {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.wr-chip-muted {
    background: transparent;
    color: var(--wr-ink-400);
    border-style: dashed;
}

/* ---------- Filter rail: multi-select specialty groups ---------- */
.wr-filter-rail-group-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--wr-ink-600);
    margin-bottom: 6px;
}

.wr-filter-rail-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---------- Find Agents pin map (Leaflet + markercluster) ---------- */
.wr-agent-pin-map {
    height: 480px;
    width: 100%;
    border-radius: var(--wr-radius-md);
    overflow: hidden;
    border: 1px solid var(--wr-border);
}

.wr-agent-pin-map-loading {
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wr-ink-600);
    font-size: 0.9rem;
    background: var(--wr-surface-2);
    border-radius: var(--wr-radius-md);
}

.wr-map-popup {
    font-size: 0.82rem;
    line-height: 1.5;
}

    .wr-map-popup strong {
        font-size: 0.88rem;
        color: var(--wr-ink-900);
    }

    .wr-map-popup a {
        color: var(--wr-accent-ink);
        font-weight: 600;
    }

@media (max-width: 640px) {
    .wr-ai-assistant-panel {
        width: 100%;
    }
}