/* ==========================================================================
   WizBrand — Influencer marketplace (/influencers) — professional theme.
   One stylesheet for the whole page: hero (username-booking Livewire), the
   filter bar + influencer cards + pagination (searchinfluencer.social-cart
   Livewire). STYLING ONLY — no Livewire/Alpine bindings, ids or markup are
   changed, so all filter/search/cart/pagination logic keeps working.
   Matches the site's navy/blue theme.
   ========================================================================== */

:root {
    --inf-navy: #0b1f44;
    --inf-navy-2: #0d2552;
    --inf-blue: #1d4ed8;
    --inf-blue-2: #3b82f6;
    --inf-ink: #0f1b34;
    --inf-text: #41506b;
    --inf-muted: #6b7894;
    --inf-line: #e6ecf5;
    --inf-bg: #f4f7fc;
    --inf-radius: 16px;
}

/* ---- HERO (username-booking) -------------------------------------------- */
.lt-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(32px, 4vw, 56px);
    min-height: auto;
    padding-block: clamp(44px, 6vw, 84px);
    padding-inline: max(clamp(20px, 5vw, 40px), calc((100% - 1140px) / 2));
    background: linear-gradient(125deg, #0b1f44 0%, #14336e 55%, #1d4ed8 100%);
    color: #fff;
    font-family: 'Inter', 'Poppins', Arial, sans-serif;
    overflow: hidden;
}

.lt-main::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -220px;
    right: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, .4), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* subtle grid texture over the blue */
.lt-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(circle at 65% 40%, #000, transparent 78%);
    mask-image: radial-gradient(circle at 65% 40%, #000, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

.lt-left {
    position: relative;
    z-index: 1;
    flex: 1 1 540px;
    max-width: 600px;
    margin: 0;
}

.lt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding: .42rem 1rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #cfe0ff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
}

.lt-headline {
    margin: 0 0 1.2rem;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
}

.lt-subtext {
    max-width: 520px;
    margin: 0 0 2rem;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.7;
    color: #cddcf5;
    font-weight: 400;
}

.lt-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin: 0;
}

.lt-input-wrap {
    flex: 1 1 280px;
    min-width: 240px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(2, 13, 40, .22);
}

.lt-input-wrap:focus-within {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .5), 0 10px 28px rgba(2, 13, 40, .24);
}

.lt-input-prefix {
    padding: 0 .25rem 0 1rem;
    font-size: .96rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

.username-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .95rem 1rem .95rem .2rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: #1e293b;
    background: transparent;
    border: none;
    outline: none;
}

.claim-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .98rem 1.8rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(120deg, #3b82f6, #1d4ed8);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(29, 78, 216, .45);
    transition: transform .18s, filter .18s;
}

.claim-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.claim-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.lt-availability {
    margin: .7rem 0 0;
    min-height: 1.1em;
    font-size: .9rem;
    color: #cddcf5;
}

.lt-availability.available {
    color: #6ee7b7;
}

.lt-availability.unavailable {
    color: #fca5a5;
}

/* link-in-bio preview card (replaces the old collage image) */
.lt-preview {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

/* ---- PAGE CONTAINER + FILTER controls ---------------------------------- */
.container-fluid1 {
    max-width: 1240px;
    margin: clamp(24px, 4vw, 48px) auto;
    padding: 0 16px;
    font-family: 'Inter', 'Poppins', sans-serif;
}

/* Filter labels (used by the .inf-field selects/inputs) */
.container-fluid1 label {
    margin-bottom: 7px;
    font-size: .82rem !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--inf-muted) !important;
}

/* Inputs & selects */
.container-fluid1 select.form-control,
.container-fluid1 input.form-control {
    height: 46px;
    padding: 8px 14px !important;
    font-size: .98rem !important;
    color: var(--inf-ink);
    background: #f8fafc;
    border: 1.5px solid var(--inf-line) !important;
    border-radius: 10px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.container-fluid1 select.form-control:focus,
.container-fluid1 input.form-control:focus {
    border-color: var(--inf-blue) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
    background: #fff;
}

/* ---- Social-media multiselect ------------------------------------------- */
.msa-wrapper {
    position: relative;
    min-height: 46px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1.5px solid var(--inf-line);
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .95rem;
}

.msa-wrapper .input-presentation {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    /* Room for the arrow, which is drawn with ::after at right: 6px and so
       takes no space of its own. Without this the placeholder ran under it
       and "Choose social media..." read as "Choose social media▾.." */
    padding-right: 24px;
    cursor: pointer;
}

/* The placeholder stops at the arrow rather than sliding beneath it. */
.msa-wrapper .input-presentation .placeholder {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Full-area transparent toggle button: keeps a real <button> for opening the
   dropdown (a11y) while selected tag chips sit above it and stay clickable. */
.msa-wrapper .input-presentation .msa-toggle-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
}

.msa-wrapper .input-presentation .placeholder,
.msa-wrapper .input-presentation .tag-badge {
    position: relative;
    z-index: 2;
}

.msa-wrapper .input-presentation .placeholder {
    color: var(--inf-muted);
    font-weight: 400;
    background: transparent;
    /* clicks pass through to the toggle overlay → dropdown opens on clicking
       anywhere in the field, not only the arrow */
    pointer-events: none;
}

.msa-wrapper .input-presentation:after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid var(--inf-muted);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.msa-wrapper.input-presentation.active,
.input-presentation.active {
    border-color: var(--inf-blue);
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin: 2px 4px 2px 0;
    font-size: .85rem;
    color: #fff;
    background: var(--inf-blue);
    border-radius: 8px;
}

.tag-badge button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, .85);
    font-size: .9rem;
    cursor: pointer;
    padding: 0 0 0 2px;
}

.tag-badge button:hover {
    color: #fff;
}

#tag-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--inf-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 27, 52, .18);
    z-index: 1000;
}

/* search row pinned at the top of the dropdown */
.msa-search {
    position: sticky;
    top: -6px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -6px -6px 6px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #f0f4fa;
    cursor: default;
}

.msa-search i {
    color: var(--inf-muted);
    font-size: .9rem;
}

.msa-search input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: .95rem;
    color: var(--inf-ink);
}

.msa-option {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    font: inherit;
    padding: 9px 12px;
    border-radius: 8px;
    text-transform: capitalize;
    cursor: pointer;
    color: var(--inf-text);
}

.msa-option:hover {
    background: #eef4ff;
    color: var(--inf-blue);
}

.msa-noresult {
    padding: 14px 12px;
    text-align: center;
    color: var(--inf-muted);
    font-size: .9rem;
    cursor: default;
}

/* ---- Success alert ------------------------------------------------------ */
.container-fluid1 .alert-success {
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 500;
    margin-bottom: 18px;
}

.container-fluid1 .alert-success .close {
    color: #fff;
    opacity: 1;
}

/* ---- Helpers kept from the original markup ------------------------------ */
[hidden] { display: none !important; }
.notLoggedInClass,
.nothingLoggedInClass,
.hideCheckboxes { display: none; }
.messages { color: #dc3545; }

/* ---- Responsive (hero) -------------------------------------------------- */
@media (max-width: 900px) {
    .lt-main {
        flex-direction: column;
        /* stretch (not flex-start) so children fill the viewport width and text
           wraps inside it instead of taking content-width and overflowing. */
        align-items: stretch;
        text-align: left;
        overflow-x: hidden;
    }

    .lt-left {
        flex-basis: auto;
        max-width: 100%;
    }

    .lt-subtext {
        max-width: 100%;
    }

    .lt-preview {
        align-self: center;
        margin-top: 12px;
        max-width: 100%;
    }

    .lt-card {
        width: min(86vw, 340px);
    }
}

@media (max-width: 640px) {
    /* The panel stays on phones.

       It was hidden here, correctly, while it was "the decorative
       link-in-bio preview card" -- a mock of a page belonging to nobody,
       worth the space it saved. It now carries three real creators, their
       measured audiences and three crawlable links to their profiles, and
       most of this page's readers are on a phone. Hiding the proof from
       them to save 390px is the wrong trade. */
    .lt-preview {
        width: 100%;
        display: block;
    }

    .lt-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .lt-input-wrap,
    .claim-btn {
        width: 100%;
        min-width: 0;
        /* reset flex so the base "flex: 1 1 280px" doesn't become a 280px HEIGHT
           once the row stacks into a column (that made the input box huge). */
        flex: 0 0 auto;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .lt-main {
        padding-inline: 16px;
    }

    .lt-headline {
        font-size: clamp(1.55rem, 7.5vw, 2rem);
    }

    .lt-card {
        width: 100%;
        max-width: 320px;
    }
}

/* ==========================================================================
   NEW STRUCTURE (inf-*) — modern filter bar, cards, social chips, pagination
   ========================================================================== */
.inf-wrap {
    max-width: 1240px;
    margin: clamp(24px, 4vw, 48px) auto;
    padding: 0 16px;
}

/* ---- Filter bar ---- */
.inf-filterbar {
    display: grid;
    /* Five columns for five fields: Country, State, City, Search, and the
       social-media picker.

       Search and the picker are the two wide ones. Search because it is the
       control most people reach for first and its placeholder has to fit --
       at an equal share it read "Name, city or count", clipped mid-word; the
       picker because it holds tags.

       It was six tracks while "Your area" was a column here; moving that
       button up to the head left the sixth empty, and an empty track is not
       nothing -- it is a block of white down the right of the panel. */
    grid-template-columns: repeat(3, 1fr) 1.45fr 1.35fr;
    gap: 16px;
    padding: 20px 22px;
    margin-bottom: 22px;
    background: #fff;
    border: 1px solid var(--inf-line);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(15, 27, 52, .07);
}

/* The search box: an icon inside it, and room made for the icon.

   It was a plain text input labelled "Keyword" -- a word from the code, not
   from the person reading it. A magnifying glass says what the box is before
   the label is read, and type="search" lets the browser draw its own clear
   cross so a search can be undone without selecting the text. */
.inf-search {
    position: relative;
    display: block;
}

.inf-search__ic {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    font-size: .82rem;
    color: var(--inf-muted);
    pointer-events: none;
}

/* Matched to `.container-fluid1 input.form-control` above, which sets the
   whole padding shorthand with !important -- a one-class rule loses to it
   however important it declares itself, and the text was starting at 14px,
   on top of an icon sitting at 13. */
.container-fluid1 input.inf-search__input {
    padding-left: 34px !important;
}

.inf-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inf-field > label {
    margin-bottom: 7px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--inf-muted);
}

/* ---- List + empty ---- */
.inf-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inf-empty {
    padding: 50px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--inf-line);
    border-radius: 16px;
    color: var(--inf-muted);
}

.inf-empty i {
    font-size: 2.4rem;
    color: var(--inf-blue-2);
    margin-bottom: 12px;
}

.inf-empty h5 {
    margin: 0 0 6px;
    font-weight: 700;
    color: var(--inf-ink);
}

.inf-empty p {
    margin: 0;
}

/* ---- Influencer card ---- */
.inf-card {
    background: #fff;
    border: 1px solid var(--inf-line);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 27, 52, .06);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.inf-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 27, 52, .12);
    border-color: #cdddfb;
}

.inf-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid #f0f4fa;
}

.inf-avatar {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(15, 27, 52, .18);
}

.inf-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.inf-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--inf-ink);
    text-decoration: none;
}

.inf-name:hover {
    color: var(--inf-blue);
}

.inf-loc {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: .85rem;
    color: var(--inf-muted);
}

.inf-loc i {
    color: var(--inf-blue-2);
}

.inf-card__view {
    flex: 0 0 auto;
}

/* head right-side action cluster: Go-to-Cart + View Profile together */
.inf-card__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.inf-card__body {
    padding: 14px 22px 16px;
}

.inf-selectall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--inf-text);
    cursor: pointer;
}

/* ---- Social chips ---- */
.inf-socials {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.inf-chip {
    display: flex;
    background: #fff;
    border: 1px solid var(--inf-line);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.inf-chip:hover {
    border-color: #cdddfb;
    background: #fafcff;
    box-shadow: 0 4px 12px rgba(15, 27, 52, .07);
}

.inf-chip__inner {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    cursor: pointer;
}

.inf-chip__check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.inf-chip__check:empty {
    display: none;
}

.inf-chip__check input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--inf-blue);
}

.inf-chip__incart {
    color: #059669;
}

.inf-chip__ic {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    font-size: .95rem;
    color: var(--brand, var(--inf-blue));
    background: #f4f6fa;
}

.inf-chip__link {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--inf-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inf-chip__link:hover {
    color: var(--inf-blue);
}

.inf-chip__price {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 9px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--inf-blue);
    background: #eef4ff;
    border-radius: 6px;
}

/* ---- Buttons ---- */
.inf-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: .9rem;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s, filter .18s, background .18s, color .18s;
}

.inf-btn--primary {
    color: #fff;
    background: linear-gradient(120deg, #3b82f6, #1d4ed8);
    box-shadow: 0 8px 18px rgba(29, 78, 216, .28);
}

.inf-btn--primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    color: #fff;
}

.inf-btn--ghost {
    color: var(--inf-blue);
    background: #eef4ff;
    border-color: #d8e4ff;
}

.inf-btn--ghost:hover {
    background: var(--inf-blue);
    border-color: var(--inf-blue);
    color: #fff;
}

/* ---- Pagination ---- */
.inf-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 6px;
}

.inf-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--inf-text);
    background: #fff;
    border: 1px solid var(--inf-line);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
}

.inf-page-btn:hover:not(:disabled) {
    background: #eef4ff;
    border-color: var(--inf-blue);
    color: var(--inf-blue);
}

.inf-page-btn.is-active {
    color: #fff;
    background: var(--inf-blue);
    border-color: var(--inf-blue);
    box-shadow: 0 8px 18px rgba(29, 78, 216, .28);
}

.inf-page-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

[x-cloak] {
    display: none !important;
}

/* results count header */
.inf-resulthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    padding: 0 4px;
}

.inf-count {
    font-size: .95rem;
    color: var(--inf-text);
}

.inf-count b {
    font-size: 1.05rem;
    color: var(--inf-ink);
}

.inf-pageinfo {
    font-size: .85rem;
    color: var(--inf-muted);
}

.inf-pageinfo b {
    color: var(--inf-ink);
}

/* smart pagination — ellipsis gap + jump box */
.inf-page-btn.is-gap,
.inf-page-btn.is-gap:hover,
.inf-page-btn.is-gap:disabled {
    min-width: 24px;
    padding: 0 4px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--inf-muted);
    opacity: 1;
    cursor: default;
}

/* Jump-to-page: a single tidy pill (label + input + Go) */
.inf-page-jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    padding: 5px 6px 5px 14px;
    background: #fff;
    border: 1px solid var(--inf-line);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 27, 52, .05);
    font-size: .85rem;
    font-weight: 600;
    color: var(--inf-muted);
    white-space: nowrap;
}

.inf-page-input {
    width: 58px;
    height: 38px;
    padding: 0 8px;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    color: var(--inf-ink);
    background: #f7f9fd;
    border: 1px solid var(--inf-line);
    border-radius: 9px;
    -moz-appearance: textfield;
}

.inf-page-input::-webkit-outer-spin-button,
.inf-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inf-page-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--inf-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

.inf-page-go {
    height: 38px;
    padding: 0 18px;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    background: var(--inf-blue);
    border: none;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(29, 78, 216, .26);
    transition: background .15s, transform .15s;
}

.inf-page-go:hover {
    background: #1741b6;
    transform: translateY(-1px);
}

.inf-page-go:active {
    transform: translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .inf-filterbar {
        grid-template-columns: repeat(2, 1fr);
    }

    .inf-field--wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .inf-filterbar {
        grid-template-columns: 1fr;
    }

    .inf-card__head {
        flex-wrap: wrap;
    }

    .inf-card__actions {
        width: 100%;
    }

    .inf-card__actions .inf-btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .inf-socials {
        grid-template-columns: 1fr;
    }
}

/* ---- Avatar lightbox / image popup -------------------------------------- */
.inf-avatar {
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

.inf-avatar:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 22px rgba(15, 27, 52, .28);
}

/* Avatar wrapped in a real <button> so the click-to-zoom stays accessible. */
.inf-avatar-btn {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
}

/* Full-screen transparent button = accessible click-outside-to-close backdrop. */
.inf-lightbox__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
    z-index: 0;
}

.inf-lightbox__box {
    z-index: 1;
}

.inf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(11, 31, 68, .82);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.inf-lightbox__box {
    position: relative;
    max-width: 90vw;
    max-height: 86vh;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
    animation: infLightboxIn .22s ease;
}

@keyframes infLightboxIn {
    from { transform: scale(.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.inf-lightbox__box img {
    display: block;
    max-width: 90vw;
    max-height: 86vh;
    object-fit: contain;
    background: #fff;
}

.inf-lightbox__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s;
}

.inf-lightbox__close:hover {
    background: rgba(0, 0, 0, .82);
}

/* Reset-filters button in the public influencer filter bar */
.inf-field--reset {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.inf-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #d2dbe8;
    background: #fff;
    color: #1d4ed8;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
    height: 44px;
}

.inf-reset:hover {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(29, 78, 216, .25);
}

/* ============================================================
   GLOBAL CREATOR MARKETPLACE — intro band + premium cards
   (overrides earlier .inf-* rules; appended last so it wins)
   ============================================================ */

/* ---- Marketplace intro band ---- */
.ifx-intro {
    max-width: 1180px;
    margin: 26px auto 6px;
    padding: 0 18px;
    text-align: center;
}
.ifx-intro__inner {
    position: relative;
    background: linear-gradient(135deg, #f4f8ff 0%, #eef3ff 55%, #f6f0ff 100%);
    border: 1px solid #e3ecfb;
    border-radius: 22px;
    padding: 34px 26px 30px;
    overflow: hidden;
}
.ifx-intro__inner::before {
    content: "";
    position: absolute;
    inset: -40% 60% auto -10%;
    height: 320px;
    background: radial-gradient(circle, rgba(59, 130, 246, .14), transparent 70%);
    pointer-events: none;
}
.ifx-intro__eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1d4ed8;
    background: #fff;
    border: 1px solid #dbe6fb;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(29, 78, 216, .08);
}
.ifx-intro__title {
    position: relative;
    margin: 14px 0 8px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    line-height: 1.18;
    color: #0f1b34;
}
.ifx-intro__sub {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    color: #44557a;
    font-size: 1.02rem;
    line-height: 1.7;
}
.ifx-trust {
    position: relative;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
}
.ifx-trust li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .86rem;
    font-weight: 600;
    color: #1f2d4d;
    background: #fff;
    border: 1px solid #e4ebf7;
    padding: 7px 14px;
    border-radius: 999px;
}
.ifx-trust li i { color: #1d4ed8; }

/* ---- Card list (clean full-width rows, centered) ---- */
.inf-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 960px;
    margin: 0 auto;
}

/* ---- Premium creator card ---- */
.inf-card { position: relative; }

.inf-card__cover {
    display: block;
    height: 60px;
    background: linear-gradient(120deg, #0b2350 0%, #1d4ed8 55%, #6d4bf6 100%);
}
.inf-card__cover::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 160px; height: 60px;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .22), transparent 65%);
}

.inf-card__head {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 0 22px 16px;
    border-bottom: 1px solid #f0f4fa;
}
.inf-avatar-btn { margin-top: -40px; flex: 0 0 auto; }
.inf-avatar {
    width: 74px;
    height: 74px;
    border-radius: 18px;
    border: 4px solid #fff;
    object-fit: cover;
    box-shadow: 0 10px 22px rgba(15, 27, 52, .22);
    background: #fff;
}
.inf-meta { flex: 1 1 auto; min-width: 0; padding-bottom: 2px; }
.inf-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.12rem;
    font-weight: 800;
    color: #0f1b34;
    text-decoration: none;
}
.inf-verified { color: #1d9bf0; font-size: .92rem; }
.inf-niche {
    display: inline-block;
    margin-top: 5px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #1d4ed8;
    background: #eaf1ff;
    border: 1px solid #d7e4fd;
    padding: 3px 10px;
    border-radius: 999px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.inf-loc { margin-top: 6px; }

/* ---- Actions: right side of the head row ---- */
.inf-card__actions {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}
.inf-card__view { white-space: nowrap; }

@media (max-width: 640px) {
    .inf-list { max-width: 100%; }
    .inf-card__head { flex-wrap: wrap; }
    .inf-meta { flex-basis: 60%; }
    .inf-card__actions { margin-left: 0; width: 100%; }
    .inf-card__actions .inf-btn { flex: 1 1 0; justify-content: center; }
    .ifx-intro__inner { padding: 26px 18px; }
}

/* ---- Filter card header (title + Reset, full-width row) ---- */
.inf-filterhead {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef2f9;
}
.inf-filterhead__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.04rem;
    font-weight: 800;
    color: #0f1b34;
}
.inf-filterhead__title i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    font-size: .92rem;
}

/* ============================================================
   INFLUENCER MARKETPLACE — rich content sections (ifx-*)
   ============================================================ */
.ifx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

.ifx-section { padding: 54px 0; }
.ifx-section--alt { background: #f6f9ff; }

.ifx-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.ifx-kicker {
    display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #1d4ed8; background: #eaf1ff; border: 1px solid #d7e4fd;
    padding: 5px 13px; border-radius: 999px; margin-bottom: 12px;
}
.ifx-kicker--light { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.ifx-h2 {
    margin: 0 0 10px; font-family: 'Plus Jakarta Sans','Inter',sans-serif; font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; color: #0f1b34;
}
.ifx-h2--light { color: #fff; }
.ifx-lead { margin: 0; color: #44557a; font-size: 1.04rem; line-height: 1.7; }
.ifx-lead--light { color: #d7e3fb; }

/* ---- Stats strip ---- */
.ifx-stats { padding: 8px 0 4px; }
.ifx-stats__grid {
    /* auto-fit, not repeat(4, 1fr).

       There were four stats here once; one of them was "100% Verified
       creators", which was removed because nothing in this product verifies
       anybody. The fixed four-column grid stayed, so the band reserved a
       quarter of its width for a cell that no longer exists and drew a
       conspicuous empty space on the right of every page load.

       auto-fit means the band fits whatever it is given -- three now, four
       if an honest fourth figure ever arrives. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;
    background: linear-gradient(120deg, #0b2350, #1d4ed8 60%, #6d4bf6);
    border-radius: 20px; padding: 26px 22px; box-shadow: 0 22px 50px rgba(15,27,52,.18);
}
.ifx-stat { text-align: center; color: #fff; }
.ifx-stat__num { display: block; font-family: 'Plus Jakarta Sans','Inter',sans-serif; font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1; }
.ifx-stat__num small { font-size: .55em; opacity: .85; }
.ifx-stat__lbl { display: block; margin-top: 6px; font-size: .86rem; color: #cfe0ff; }

/* ---- Categories ---- */
.ifx-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.ifx-cat {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none;
    background: #fff; border: 1px solid #e6ecf5; border-radius: 14px;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ifx-cat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,27,52,.1); border-color: #cdddfb; }
.ifx-cat__ic {
    width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px;
    font-size: 1.05rem; color: var(--c, #1d4ed8); background: color-mix(in srgb, var(--c, #1d4ed8) 12%, #fff);
}
.ifx-cat__name { font-weight: 700; font-size: .95rem; color: #0f1b34; }

/* ---- How it works steps ---- */
.ifx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ifx-step {
    position: relative; background: #fff; border: 1px solid #e6ecf5; border-radius: 16px;
    padding: 26px 20px; text-align: center; box-shadow: 0 8px 22px rgba(15,27,52,.05);
}
.ifx-step__no {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
    font-weight: 800; font-size: .9rem; color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 6px 14px rgba(29,78,216,.4);
}
.ifx-step__ic { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 8px 0 12px; border-radius: 16px; font-size: 1.3rem; color: #1d4ed8; background: #eaf1ff; }
.ifx-step h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; color: #0f1b34; }
.ifx-step p { margin: 0; font-size: .92rem; color: #5a6b8c; line-height: 1.6; }

/* ---- Features ---- */
.ifx-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ifx-feature { background: #fff; border: 1px solid #e6ecf5; border-radius: 16px; padding: 26px 24px; text-align: center; transition: transform .18s, box-shadow .18s; }
.ifx-feature:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15,27,52,.09); }
.ifx-feature__ic { display: inline-grid; place-items: center; width: 50px; height: 50px; margin-bottom: 14px; border-radius: 14px; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.ifx-feature h3 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 800; color: #0f1b34; }
.ifx-feature p { margin: 0; font-size: .94rem; color: #5a6b8c; line-height: 1.65; }

/* ---- Platforms ---- */
.ifx-plats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ifx-plat {
    display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; font-weight: 700; font-size: .95rem;
    color: #0f1b34; background: #fff; border: 1px solid #e6ecf5; border-radius: 999px;
    transition: transform .15s, box-shadow .15s;
}
.ifx-plat:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,27,52,.1); }
.ifx-plat i { font-size: 1.15rem; }

/* ---- For creators band ---- */
.ifx-creators { padding: 56px 0; background: linear-gradient(120deg, #0b2350 0%, #1d4ed8 55%, #6d4bf6 100%); }
.ifx-creators__inner { display: grid; grid-template-columns: 1.3fr .9fr; gap: 36px; align-items: center; }
.ifx-creators__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ifx-creators__perks { list-style: none; margin: 0; padding: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; }
.ifx-creators__perks li { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: #eaf1ff; font-weight: 600; }
.ifx-creators__perks li i { color: #6ee7b7; }

/* ---- Buttons ---- */
.ifx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-weight: 700; font-size: .96rem; border-radius: 12px; text-decoration: none; transition: transform .16s, box-shadow .16s, background .16s; }
.ifx-btn--white { background: #fff; color: #1d4ed8 !important; box-shadow: 0 12px 26px rgba(0,0,0,.18); }
.ifx-btn--white:hover { transform: translateY(-2px); background: #f0f5ff; color: #1741b6 !important; }
.ifx-btn--outline { background: transparent; color: #fff !important; border: 1.6px solid rgba(255,255,255,.55); }
.ifx-btn--outline:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff !important; transform: translateY(-2px); }

/* ---- FAQ ---- */
.ifx-faq { max-width: 820px; }
.ifx-faqlist { display: flex; flex-direction: column; gap: 12px; }
.ifx-faqitem { background: #fff; border: 1px solid #e6ecf5; border-radius: 14px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.ifx-faqitem.is-open { border-color: #cdddfb; box-shadow: 0 10px 26px rgba(15,27,52,.08); }
.ifx-faqq { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; background: transparent; border: 0; cursor: pointer; text-align: left; font-weight: 700; font-size: 1rem; color: #0f1b34; }
.ifx-faqq i { color: #1d4ed8; transition: transform .25s; flex: 0 0 auto; }
.ifx-faqitem.is-open .ifx-faqq i { transform: rotate(180deg); }
.ifx-faqa { padding: 0 20px 18px; }
.ifx-faqa p { margin: 0; color: #4a5b7c; line-height: 1.7; }

/* ---- Final CTA ---- */
.ifx-finalcta { padding: 60px 18px; text-align: center; }
.ifx-finalcta__inner { max-width: 760px; margin: 0 auto; background: linear-gradient(120deg, #0b2350, #1d4ed8 60%, #6d4bf6); border-radius: 24px; padding: 46px 28px; box-shadow: 0 30px 70px rgba(15,27,52,.2); }
.ifx-finalcta h2 { margin: 0 0 10px; font-family: 'Plus Jakarta Sans','Inter',sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: #fff; }
.ifx-finalcta p { margin: 0 auto 22px; max-width: 560px; color: #d7e3fb; line-height: 1.7; }
.ifx-finalcta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .ifx-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .ifx-steps { grid-template-columns: repeat(2, 1fr); }
    .ifx-features { grid-template-columns: repeat(2, 1fr); }
    .ifx-creators__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ifx-features { grid-template-columns: 1fr; }
    .ifx-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 430px) {
    /* very narrow phones — single column so cards never overflow the viewport */
    .ifx-cats { grid-template-columns: 1fr; }
    .ifx-steps { grid-template-columns: 1fr; }
}

/* category icon palette (rotating — no inline styles) */
.ifx-cat:nth-child(6n+1) .ifx-cat__ic { color: #e4405f; background: #fdecf1; }
.ifx-cat:nth-child(6n+2) .ifx-cat__ic { color: #1d4ed8; background: #eaf1ff; }
.ifx-cat:nth-child(6n+3) .ifx-cat__ic { color: #7c3aed; background: #f1ebfe; }
.ifx-cat:nth-child(6n+4) .ifx-cat__ic { color: #f59e0b; background: #fef3e2; }
.ifx-cat:nth-child(6n+5) .ifx-cat__ic { color: #16a34a; background: #e7f7ee; }
.ifx-cat:nth-child(6n+6) .ifx-cat__ic { color: #0ea5e9; background: #e6f6fe; }

/* platform brand colours */
.ifx-plat .fa-instagram { color: #E4405F; }
.ifx-plat .fa-youtube { color: #FF0000; }
.ifx-plat .fa-x-twitter { color: #0f1419; }
.ifx-plat .fa-linkedin { color: #0077b5; }
.ifx-plat .fa-tiktok { color: #010101; }
.ifx-plat .fa-facebook { color: #1877F3; }
.ifx-plat .fa-pinterest { color: #E60023; }
.ifx-plat .fa-telegram { color: #0088cc; }
.ifx-plat .fa-quora { color: #B92B27; }
.ifx-plat .fa-wordpress { color: #21759b; }
.ifx-plat .fa-tumblr { color: #36465d; }
.ifx-plat .fa-reddit { color: #FF4500; }

/* ===== Creator directory =====
   Plain, crawlable list of every live creator, grouped by country. Renders
   without JavaScript, which the Alpine-built card grid above cannot do. */

/* ==========================================================================
   Creator search: audience figures, and filters that get out of the way
   on a phone.
   ========================================================================== */

/*
 * The audience line under each platform.
 *
 * A number on its own is a claim. This line is built so the figure, who
 * reported it and when it was read are one block that cannot be split -- see
 * public/new-assets/js/wz-creator-card.js, which returns null rather than a
 * bare number when there is nothing to attribute it to.
 */
.inf-chip {
    flex-direction: column;
}

.inf-chip__stat {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding: 0 12px 8px;
    /* Line up with the platform name above, past the checkbox and the icon. */
    font-size: .78rem;
    color: var(--inf-muted);
}

.inf-chip__stat b {
    font-size: .88rem;
    font-weight: 700;
    color: var(--inf-ink);
}

.inf-chip__stat small {
    /* Provenance, quieter than the number but never absent. */
    flex: 1 1 100%;
    font-size: .7rem;
    line-height: 1.3;
    color: var(--inf-muted);
    /* Long source + date must wrap rather than widen the chip: a grid item
       defaults to min-width:auto, and one nowrap line here would push the whole
       card off a 375px screen. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/*
 * Phone: results first, filters one tap away.
 *
 * The toggle is hidden above this width and does nothing at all until Alpine
 * has set data-filters="ready" on the wrapper, so a visitor with JavaScript
 * turned off still gets the filter bar exactly where it has always been rather
 * than a button that cannot open anything.
 */
.inf-filtertoggle {
    display: none;
}

@media (max-width: 767.98px) {
    .inf-filtertoggle {
        position: sticky;
        top: 8px;
        z-index: 30;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-bottom: 14px;
        padding: 11px 16px;
        font-size: .92rem;
        font-weight: 700;
        color: #fff;
        background: var(--inf-blue, #1d4ed8);
        border: 0;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(15, 27, 52, .18);
    }

    .inf-wrap[data-filters="ready"] .inf-filterbar {
        display: none;
    }

    .inf-wrap[data-filters="ready"].wz-filters-open .inf-filterbar {
        display: grid;
    }

    /* One creator per row, and one platform per row inside it, so nothing has
       to be read sideways. */
    .inf-list {
        grid-template-columns: 1fr;
    }

    .inf-socials {
        grid-template-columns: 1fr;
    }

    .inf-empty .inf-btn {
        margin-top: 14px;
    }
}

/* ---------------------------------------------------------------------------
   Shortlist and saved searches (brief section 16).

   Nothing was stored anywhere before, so a shortlist lasted exactly as long as
   the tab did and a search had to be retyped every visit.
   --------------------------------------------------------------------------- */

/* --- the save-this-creator heart ------------------------------------------ */

.inf-card__save i { color: #c7ced8; transition: color .15s ease; }
.inf-card__save.is-saved i { color: #d23b3b; }
.inf-card__save.is-saved { border-color: #f0c9c9; background: #fdf5f5; }

/* --- saved searches ------------------------------------------------------- */

.inf-saved {
  grid-column: 1 / -1;
  border-top: 1px solid #e8eef6;
  padding-top: 12px;
  margin-top: 4px;
}

.inf-saved__row { display: flex; flex-direction: column; gap: 6px; }

/* Saved creators sit above saved searches, and are told apart on sight.

   They answer different questions and were being read as one thing: the
   keyword box finds everyone called sourav, a creator chip finds THAT
   sourav. Somebody typed a name into the search-name box expecting the
   second and got neither. */
.inf-saved--people {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e8eef6;
}

.inf-saved--people .inf-saved__label i { color: #d14343; }

/* The chip that is doing the filtering says so. */
.inf-saved__chip.is-on {
  border-color: #1a56a8;
  background: #eaf1ff;
}

.inf-saved__chip.is-on .inf-saved__apply { color: #123f7d; }
.inf-saved__chip.is-on .inf-saved__apply:hover { background: #dde8ff; }

.inf-saved__label { font-size: 13px; font-weight: 600; color: #16202e; margin: 0; }
.inf-saved__label i { color: #1a56a8; }

.inf-saved__add { display: flex; gap: 8px; }

.inf-saved__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  font-size: 13.5px;
}

.inf-saved__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
}

/* Name and forget are one visual chip but two real buttons, so a mis-click
   cannot delete a saved search. */
.inf-saved__chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #d8e0ea;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.inf-saved__apply,
.inf-saved__drop {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

/* Two controls in one pill, and they do opposite things: the name SHOWS that
   creator, the cross FORGETS them. They were touching, 34px and 26px wide, so
   a press aimed at a short name like "Raj" could land on the cross instead --
   which unsaves rather than searching. A rule between them, and more room. */
.inf-saved__apply { padding: 9px 12px 9px 15px; color: #1a56a8; font-weight: 600; }
.inf-saved__apply:hover { background: #f4f7fc; }

.inf-saved__drop { padding: 9px 12px; color: #8494a8; border-left: 1px solid #e3e9f2; }
.inf-saved__drop:hover { background: #fdf3f3; color: #a32020; }

/* The sentence next to the count when one creator is being shown. */
.inf-onlyone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  padding: 5px 7px 5px 12px;
  border: 1px solid #f2c6cd;
  border-radius: 999px;
  background: #fdf2f4;
  font-size: 13px;
  color: #16202e;
}

.inf-onlyone i { color: #d6336c; }
.inf-onlyone b { color: #16202e; }

.inf-onlyone__clear {
  border: 0;
  border-radius: 999px;
  padding: 4px 11px;
  background: #fff;
  color: #1a56a8;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.inf-onlyone__clear:hover { background: #eaf1ff; }

@media (max-width: 575.98px) {
  .inf-onlyone { margin: 8px 0 0; }
}

@media (max-width: 575.98px) {
  .inf-saved__add { flex-direction: column; }
  .inf-saved__add .inf-btn { width: 100%; }
}

/* ===================================================================
 * A creator is a row, not a poster.
 *
 * Measured at a 748px viewport before this block: a card with ONE channel
 * was 288px tall and 2.2 creators fitted on a screen. That 288px was
 *
 *     60px  a gradient band holding an empty aria-hidden span
 *     75px  avatar, name, actions
 *    151px  the body — 94px of channel, the rest padding
 *
 * So nearly half of every creator in the list carried no information, and
 * it cost the same whether they had one channel or ten. Ten tiles were drawn
 * even when six held nothing but a name and a price.
 *
 * Nothing is removed. Choosing channels to order is behind a toggle, because
 * it is a separate act from browsing and should only cost height while
 * somebody is doing it.
 *
 * NOTE: this is the file the marketplace loads — pages/influencer.blade.php
 * links assets/css/wizbrand-influencer.css. A second file of the same name
 * lives under new-assets/ and is linked by nothing.
 * =================================================================== */

.inf-card__cover {
    height: 10px;
}

.inf-card__cover::after {
    height: 10px;
}

/* The avatar no longer hangs off a 60px band. */
.inf-avatar-btn {
    margin-top: 0;
}

.inf-card__head {
    align-items: center;
    padding: 12px 18px;
}

.inf-avatar {
    width: 54px;
    height: 54px;
}

.inf-card__body {
    padding: 0 18px 12px;
}

/* ------------------------------------------------------- the summary bar */

.inf-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.inf-bar__sum {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: #5a6782;
    font-size: .86rem;
}

.inf-bar__sum b {
    color: #14204a;
    font-weight: 700;
}

/* The channels worth naming while collapsed. */
.inf-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.inf-mini__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #44506a;
    font-size: .82rem;
}

.inf-mini__item b {
    color: #14204a;
    font-weight: 700;
}

.inf-mini__more {
    color: #8a95a9;
    font-size: .78rem;
}

.inf-bar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    margin-left: auto;
    padding: 8px 15px;
    border: 1px solid #d5dde9;
    border-radius: 9px;
    background: #fff;
    color: #1d4ed8;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.inf-bar__toggle:hover {
    border-color: #1d4ed8;
    background: #f5f8ff;
}

/* --------------------------------------------------- the expanded tiles */

.inf-card.is-open .inf-socials {
    margin-top: 10px;
}

.inf-chip__inner {
    padding: 6px 10px;
}

.inf-chip__stat {
    padding: 0 10px 6px;
    font-size: .74rem;
}

/* A channel with no figure has no second line, so it should not reserve the
   height for one. */
.inf-chip.no-audience .inf-chip__inner {
    padding-top: 7px;
    padding-bottom: 7px;
}

.inf-chip.no-audience {
    opacity: .8;
}

.inf-socials {
    gap: 8px;
}

/*
 * The checkbox is the conversion action and was a 13px target — measured as
 * the smallest hit area on the whole card. The box stays small so the row
 * does not grow; the padding carries the target.
 */
.inf-chip__check {
    margin: -12px 0 -12px -10px;
    padding: 12px 8px 12px 10px;
}

.inf-chip__check input[type=checkbox] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .inf-avatar {
        width: 46px;
        height: 46px;
    }

    .inf-card__head,
    .inf-card__body {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* The toggle goes full width: a 38px pill beside wrapped text is not a
       reliable thumb target. */
    .inf-bar__toggle {
        flex: 1 1 100%;
        justify-content: center;
        min-height: 44px;
        margin-left: 0;
    }

    .inf-chip__check {
        margin: -14px 0 -14px -12px;
        padding: 14px 10px 14px 12px;
    }

    .inf-chip__check input[type=checkbox] {
        width: 20px;
        height: 20px;
    }
}

/* A named channel with no figure: quieter than one carrying a number. */
.inf-mini__name {
    color: #7a879e;
    font-size: .8rem;
}

/*
 * Saved creators, at last reachable.
 *
 * Save wrote a slug to users.shortlists and there was nowhere to see the
 * result — the heart filled in, survived a reload, and that was the whole
 * feature. This is the view of it.
 */
.inf-resulthead {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.inf-savedonly {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid #d5dde9;
    border-radius: 999px;
    background: #fff;
    color: #5a6782;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.inf-savedonly:hover {
    border-color: #e0536d;
    color: #e0536d;
}

.inf-savedonly.is-on {
    border-color: #e0536d;
    background: #fdeef1;
    color: #c13a52;
}

.inf-savedonly__n {
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef2f8;
    font-size: .74rem;
}

.inf-savedonly.is-on .inf-savedonly__n {
    background: #fff;
}

/*
 * The hero preview follows the username being typed.
 *
 * It was a static mockup reading "@yourname" with four hardcoded platform
 * names, sitting inches from the field that asks you to choose a handle —
 * and it did not move while you typed, although the component was already
 * tracking every keystroke.
 */

.lt-card.is-free .lt-card-state {
    color: #1d9a52;
}

.lt-card.is-taken .lt-card-state {
    color: #c13a52;
}

/* The card itself answers the question the form is asking. */
.lt-card.is-free {
    box-shadow: 0 0 0 2px #1d9a52, 0 18px 40px rgba(0, 0, 0, .18);
}

.lt-card.is-taken {
    box-shadow: 0 0 0 2px #c13a52, 0 18px 40px rgba(0, 0, 0, .18);
}

/* The four platforms shown are illustrative, so the card says how many
   there really are rather than implying it is only four. */

/*
 * Category tiles that do something.
 *
 * All twelve were anchors to #browse — they scrolled the page and filtered
 * nothing, and they could not have filtered: there was no category on a
 * creator anywhere in the schema.
 */
.ifx-cat__n {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef2f8;
    color: #5a6782;
    font-size: .74rem;
    font-weight: 700;
}

/*
 * A tile nobody is in says so instead of leading to an empty list.
 *
 * Twelve tiles that all come back empty are worse than no tiles: a brand
 * clicks one, sees nothing, and concludes the marketplace is empty.
 */
.ifx-cat.is-empty {
    opacity: .55;
}

.ifx-cat.is-empty .ifx-cat__n {
    background: #f4f6fa;
    color: #9aa6bd;
}

#creators {
    scroll-margin-top: 80px;
}

/* ==========================================================================
   The creator row, second pass: fewer words, more signal
   --------------------------------------------------------------------------
   Four worded buttons per creator -- Save, Go to Cart, View Profile, Choose
   channels -- meant twenty-eight competing calls to action down one screen of
   seven creators, and none of them won. A brand reading a list is deciding
   one thing: who to open. So one worded button for that, and the repeat
   actions as icons that keep their accessible names.
   ========================================================================== */

.inf-avatar-wrap {
    flex: 0 0 auto;
    display: flex;
}

/* Initials, for a creator with no usable photograph.

   Four of seven were drawing the same stock cartoon and three pointed at
   files that have gone; a column of identical or empty circles is an avatar
   doing the opposite of its job. */
.inf-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    user-select: none;
}

/* Ten tints, all of them carrying white text at better than WCAG AA 4.5:1.
   An even hue sweep was tried first and produced yellows that white cannot
   be read on. */
.inf-avatar--initial[data-tint="0"] { background: #1d4ed8; }
.inf-avatar--initial[data-tint="1"] { background: #7c3aed; }
.inf-avatar--initial[data-tint="2"] { background: #be123c; }
.inf-avatar--initial[data-tint="3"] { background: #0f766e; }
.inf-avatar--initial[data-tint="4"] { background: #b45309; }
.inf-avatar--initial[data-tint="5"] { background: #4338ca; }
.inf-avatar--initial[data-tint="6"] { background: #0369a1; }
.inf-avatar--initial[data-tint="7"] { background: #a21caf; }
.inf-avatar--initial[data-tint="8"] { background: #15803d; }
.inf-avatar--initial[data-tint="9"] { background: #9f1239; }

/* --------------------------------------------------- icon-only actions */

.inf-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 38px, not 32: this is a touch target, and 38 clears the 24px minimum
       WCAG 2.2 asks for with room for a fingertip. */
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #dde3ec;
    border-radius: 10px;
    background: #fff;
    color: #6b7789;
    font-size: .92rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.inf-icon-btn:hover,
.inf-icon-btn:focus-visible {
    border-color: #1d4ed8;
    background: #f5f8ff;
    color: #1d4ed8;
}

.inf-card__save i {
    color: #c3cbd6;
    transition: color .15s ease;
}

.inf-card__save.is-saved {
    border-color: #f2cccc;
    background: #fdf4f4;
}

.inf-card__save.is-saved i {
    color: #d23b3b;
}

.inf-card__save:hover i {
    color: #d23b3b;
}

/* A cart icon alone cannot say "there is already something in it", and the
   button only renders when there is, so the dot carries that. */
.inf-icon-btn__dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: #16a34a;
}

.inf-card__cart {
    border-color: #cfe4d6;
    color: #15803d;
}

.inf-card__cart:hover {
    border-color: #15803d;
    background: #f3fbf5;
    color: #15803d;
}

/* The one worded action left on the row. */
.inf-card__view {
    min-height: 38px;
    padding: 8px 18px;
    white-space: nowrap;
}

/* ------------------------------------------------------ the category chip */

/* This chip used to print `digital_marketer`, a free-text box holding
   "dsdfewfwf" and "dfgdrh" on this installation. It carries the chosen
   category now, so it is worth styling as a fact rather than hiding. */
.inf-niche {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    overflow: hidden;
    padding: 2px 9px;
    border: 1px solid #dbe6fb;
    border-radius: 999px;
    background: #eff4ff;
    color: #2b4a8b;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------- choosing the channels */

/* This was a bordered pill that looked like a select and was not one. It is
   the least of the things on the row -- most brands open the profile instead
   -- so it reads as a quiet control now and only asserts itself on hover. */
.inf-bar__toggle {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #5a6879;
    font-size: .8rem;
    font-weight: 600;
}

.inf-bar__toggle:hover,
.inf-bar__toggle:focus-visible {
    border-color: #d5dde9;
    background: #f5f8ff;
    color: #1d4ed8;
}

.inf-card.is-open .inf-bar__toggle {
    border-color: #d5dde9;
    background: #f5f8ff;
    color: #1d4ed8;
}

/* -------------------------------------------------------------- phones */

@media (max-width: 575.98px) {
    /* The worded button stretches; the icons stay square rather than
       growing into two more full-width bars. */
    .inf-card__actions {
        gap: 8px;
    }

    .inf-card__actions .inf-icon-btn {
        flex: 0 0 38px;
    }

    .inf-card__view {
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
    }
}

/* The photograph sits over the initials and only appears once it has
   decoded, so a lazy-loaded image, a missing file and an empty column all
   look the same -- like a deliberate avatar -- instead of a white hole. */
.inf-avatar-wrap {
    position: relative;
}

.inf-avatar-wrap .inf-avatar-btn {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    opacity: 0;
    transition: opacity .18s ease;
}

.inf-avatar-wrap .inf-avatar-btn.is-ready {
    opacity: 1;
    cursor: zoom-in;
}

/* A creator with no resolvable profile page still has a name; it just is not
   a link. Same weight and colour, no pointer, no underline on hover. */
.inf-name.is-plain {
    cursor: default;
    text-decoration: none;
}

/* ==========================================================================
   The hero preview card
   --------------------------------------------------------------------------
   A white box with four grey pills in a column, under a grey cartoon person
   that never changed. It is the only picture on the page and it is supposed
   to make a creator want the thing; it read as a disabled menu.
   ========================================================================== */

/* The initial, in place of the identical grey person.

   position/z-index because the cover above had to become positioned to hold
   the badge, and a positioned element paints over an unpositioned sibling
   however late that sibling comes in the document -- which cropped the top
   half of the avatar clean off. */

/* --------------------------------------------------------- the link rows */

/* The arrow makes the row read as somewhere to go rather than as a label.
   Quiet until the row is hovered. */

/* Each platform in its own colour: a column of identical grey is the reason
   the card looked switched off. Icon only -- a full brand-coloured row four
   times over would fight the hero behind it. */

/* ------------------------------------------------------ the other eleven */

/* "and 11 more platforms" asked the reader to take a number on trust. */

@media (max-width: 991.98px) {
    /* Six loose icons wrap badly in a narrow card. */
    .lt-card-more {
        gap: 10px;
        font-size: .92rem;
    }
}

/* ==========================================================================
   Hero: the two calls to action, and the creator strip
   --------------------------------------------------------------------------
   The first creator card on this page sits roughly two thousand pixels down.
   Somebody who arrived from a search for "find influencers" should not have
   to discover that by scrolling, so the hero offers the list directly.
   ========================================================================== */

.lt-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 22px;
}

.lt-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #fff;
    color: #0f1b34;
    font-size: .98rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.lt-cta:hover,
.lt-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(2, 13, 40, .3);
    color: #0f1b34;
    text-decoration: none;
}

/* Over a dark hero, so a white outline rather than a grey one. */
.lt-cta--quiet {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .08);
    color: #e8eefc;
}

.lt-cta--quiet:hover,
.lt-cta--quiet:focus-visible {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

/* The heading is now about hiring creators, so the claim box below it needs
   to say who it is for; without the label it reads as the brand's own signup. */
.lt-claim-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    color: #b9c9e8;
    font-size: .88rem;
    font-weight: 600;
}

.lt-claim-label i {
    color: #7ea2e8;
}

@media (max-width: 575.98px) {
    .lt-cta,
    .lt-cta--quiet {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Category tiles: colour, and the empty state
   --------------------------------------------------------------------------
   The icon colour was written into the markup as style="color: ...". This
   project does not put inline styles in templates, so the twelve colours
   live here, keyed on data-cat. CreatorCategories::ALL remains the single
   source of truth and CreatorCategoriesTest asserts that every key it
   declares has a rule below carrying the exact same colour, so the two
   cannot drift apart unnoticed.
   ========================================================================== */
.ifx-cat[data-cat="fashion"] .ifx-cat__ic { color: #e4405f; }
.ifx-cat[data-cat="technology"] .ifx-cat__ic { color: #1d4ed8; }
.ifx-cat[data-cat="gaming"] .ifx-cat__ic { color: #7c3aed; }
.ifx-cat[data-cat="food"] .ifx-cat__ic { color: #f59e0b; }
.ifx-cat[data-cat="travel"] .ifx-cat__ic { color: #0ea5e9; }
.ifx-cat[data-cat="fitness"] .ifx-cat__ic { color: #16a34a; }
.ifx-cat[data-cat="lifestyle"] .ifx-cat__ic { color: #db2777; }
.ifx-cat[data-cat="business"] .ifx-cat__ic { color: #0d9488; }
.ifx-cat[data-cat="education"] .ifx-cat__ic { color: #2563eb; }
.ifx-cat[data-cat="entertainment"] .ifx-cat__ic { color: #dc2626; }
.ifx-cat[data-cat="music"] .ifx-cat__ic { color: #9333ea; }
.ifx-cat[data-cat="photography"] .ifx-cat__ic { color: #475569; }

/* Said once, above the grid, instead of a brand discovering it by clicking
   twelve tiles that each lead to an empty list. */
.ifx-cats__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 680px;
    margin: 0 auto 22px;
    padding: 11px 15px;
    border: 1px solid #dbe6fb;
    border-radius: 12px;
    background: #f4f8ff;
    color: #3d5270;
    font-size: .88rem;
    line-height: 1.55;
    text-align: left;
}

.ifx-cats__note i {
    margin-top: 3px;
    color: #2563eb;
}

.ifx-cats__note a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: underline;
}

/* ==========================================================================
   The profile link
   --------------------------------------------------------------------------
   "View profile" as a filled blue pill, once per creator, was the loudest
   thing on a page of quiet rows. It is an arrow now, matching Save and Cart.
   That is only safe because the arrow is not the only way in: the creator's
   name is a link and its hit area covers the whole name/location column, so
   most of the row opens the profile.
   ========================================================================== */

.inf-meta {
    position: relative;
}

/* The name's hit area, stretched over its column. Nothing else in .inf-meta
   is interactive, so there is no z-index contest here -- the action buttons
   live outside it, in .inf-card__actions. */
.inf-name::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

.inf-card__head:hover .inf-name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Blue, because it is still the action the row is for -- just no longer
   shouting it in words. */
.inf-card__view {
    width: 38px;
    min-height: 38px;
    padding: 0;
    border-color: #bcd2f7;
    background: #f1f6ff;
    color: #1d4ed8;
}

.inf-card__view:hover,
.inf-card__view:focus-visible {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.inf-card__view i {
    transition: transform .15s ease;
}

.inf-card__view:hover i {
    transform: translateX(2px);
}

@media (max-width: 575.98px) {
    /* It no longer has words to stretch, so it stays square like the rest. */
    .inf-card__view {
        flex: 0 0 38px;
    }
}

/* ==========================================================================
   The creator index
   --------------------------------------------------------------------------
   It exists for crawlers and for JavaScript-off: the cards above are Alpine
   <template> blocks, so nothing in the delivered HTML links to a creator.
   That makes it a genuine index, and it should look like one -- a compact
   reference block -- rather than like a second copy of the listing, which is
   how it read at full card-pill size directly under the real list.
   ========================================================================== */

/* ==========================================================================
   Hero: live creators, in place of the mock profile card
   --------------------------------------------------------------------------
   What sat here was an invented page -- "@yourname" over four grey platform
   pills. Under a heading that now reads "Find and hire influencers", showing
   a brand a person who does not exist is the weakest thing the page could
   do. These are the three largest real audiences on the marketplace.

   Built in CSS rather than shipped as an image: it stays sharp at every
   density, costs no request, reflows on a phone, and the names inside it are
   real links a crawler can follow.
   ========================================================================== */

.wz-live {
    width: min(42vw, 390px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    /* Not flat white. Against a deep blue hero a plain white panel reads as
       a hole punched in the page; this sits on it. */
    background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(243, 247, 255, .97));
    box-shadow: 0 40px 80px rgba(2, 13, 40, .45);
}

/* ------------------------------------------------------------- the bar */

.wz-live__bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 17px;
    border-bottom: 1px solid #e8edf6;
    background: #fff;
}

.wz-live__title {
    flex: 1 1 auto;
    color: #0f1b34;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.wz-live__count {
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: .74rem;
    font-weight: 800;
}

/* A green dot that breathes. The only motion on the card, and it is what
   says these are live records rather than a screenshot. */
.wz-live__pulse {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
}

.wz-live__pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(22, 163, 74, .5);
    border-radius: 50%;
    animation: wz-live-pulse 2.2s ease-out infinite;
}

@keyframes wz-live-pulse {
    0%   { transform: scale(.6); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Anybody who has asked not to see movement, does not. */
@media (prefers-reduced-motion: reduce) {
    .wz-live__pulse::after {
        animation: none;
        opacity: .5;
    }
}

/* ------------------------------------------------------------ the rows */

.wz-live__row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 17px;
    border-bottom: 1px solid #eef2f8;
    color: #0f1b34;
    text-decoration: none;
    transition: background .15s ease;
}

.wz-live__row:hover,
.wz-live__row:focus-visible {
    background: #f4f8ff;
    color: #0f1b34;
    text-decoration: none;
}

.wz-live__av {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .02em;
}

/* The same ten tints the listing card uses, so a creator is the same colour
   in the hero as in the list below it. */
.wz-live__av[data-tint="0"] { background: #1d4ed8; }
.wz-live__av[data-tint="1"] { background: #7c3aed; }
.wz-live__av[data-tint="2"] { background: #be123c; }
.wz-live__av[data-tint="3"] { background: #0f766e; }
.wz-live__av[data-tint="4"] { background: #b45309; }
.wz-live__av[data-tint="5"] { background: #4338ca; }
.wz-live__av[data-tint="6"] { background: #0369a1; }
.wz-live__av[data-tint="7"] { background: #a21caf; }
.wz-live__av[data-tint="8"] { background: #15803d; }
.wz-live__av[data-tint="9"] { background: #9f1239; }

.wz-live__who {
    flex: 1 1 auto;
    min-width: 0;
}

.wz-live__name {
    display: block;
    overflow: hidden;
    font-size: .9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wz-live__tick {
    color: #1d9bf0;
    font-size: .74rem;
}

.wz-live__meta {
    display: block;
    margin-top: 1px;
    color: #64748b;
    font-size: .78rem;
}

.wz-live__meta b {
    color: #0f1b34;
}

.wz-live__nets {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
    font-size: .84rem;
}

/* Brand colours, muted. At this size a full-strength row of five brand
   marks fights everything around it. */
.wz-live__nets i { color: #97a3b6; }
.wz-live__nets i[data-net="youtube"]   { color: #ff0000; }
.wz-live__nets i[data-net="instagram"] { color: #e4405f; }
.wz-live__nets i[data-net="facebook"]  { color: #1877f3; }
.wz-live__nets i[data-net="twitter"]   { color: #1da1f2; }
.wz-live__nets i[data-net="linkedin"]  { color: #0a66c2; }
.wz-live__nets i[data-net="tiktok"]    { color: #111; }
.wz-live__nets i[data-net="quora"]     { color: #b92b27; }

/* ---------------------------------------------------------- the footer */

.wz-live__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    color: #1d4ed8;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}

.wz-live__all:hover,
.wz-live__all:focus-visible {
    background: #eef4ff;
    color: #1d4ed8;
    text-decoration: none;
}

.wz-live__all i {
    transition: transform .15s ease;
}

.wz-live__all:hover i {
    transform: translateX(3px);
}

.wz-live__none {
    margin: 0;
    padding: 26px 18px;
    color: #64748b;
    font-size: .86rem;
    text-align: center;
}

@media (max-width: 991.98px) {
    .wz-live {
        width: 100%;
        max-width: 420px;
    }
}

/* The one number on the card with weight. A panel of three quiet rows had
   no presence against a hero headline three times its size. */
.wz-live__hero {
    padding: 18px 17px 16px;
    border-bottom: 1px solid #e8edf6;
    background:
        radial-gradient(120% 160% at 50% -40%, rgba(37, 99, 235, .1), transparent 62%),
        #fbfcff;
    text-align: center;
}

.wz-live__big {
    display: block;
    background: linear-gradient(100deg, #1d4ed8, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 2.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
}

.wz-live__cap {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: .76rem;
    letter-spacing: .01em;
}

/* A soft bloom behind the panel so it sits in the hero rather than on it. */
.lt-preview {
    position: relative;
}

.lt-preview::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -14% -10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(99, 102, 241, .38), transparent 72%);
    filter: blur(26px);
    pointer-events: none;
}

.lt-preview > .wz-live {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   The creator index
   --------------------------------------------------------------------------
   Eight links had been given a full marketing section: a kicker, a 40px
   heading and a two-line paragraph explaining JavaScript to people who do
   not care, over most of a screen of white space. It exists so a crawler can
   reach a creator profile at all -- the cards above are Alpine templates and
   the delivered HTML has no link in it -- which is plumbing, and plumbing
   belongs at the foot of the page in small type.
   ========================================================================== */

.ifx-index {
    padding: 26px 0 34px;
    border-top: 1px solid #e6ecf5;
    background: #fbfcfe;
}

.ifx-index__title {
    margin: 0 0 14px;
    color: #8b97ab;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ifx-index__groups {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The country label and its names on one line, wrapping together. */
.ifx-index__group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 5px 0;
    line-height: 1.7;
}

.ifx-index__where {
    flex: 0 0 120px;
    color: #94a2b8;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ifx-index__names {
    flex: 1 1 260px;
    font-size: .84rem;
}

.ifx-index__names a {
    color: #46618f;
    text-decoration: none;
}

.ifx-index__names a:hover,
.ifx-index__names a:focus-visible {
    color: #1d4ed8;
    text-decoration: underline;
}

.ifx-index__sep {
    margin: 0 3px 0 5px;
    color: #c3ccdb;
}

@media (max-width: 575.98px) {
    /* The label goes above its names rather than stealing a third of a
       narrow line. */
    .ifx-index__where {
        flex: 1 1 100%;
    }
}

/* The wrap centres its text for the marketing sections above; an index is
   read down the left edge, not from the middle. */
.ifx-index,
.ifx-index .ifx-wrap,
.ifx-index .ifx-index__title {
    /* The heading is centred by a rule further up that targets h2 inside a
       section; measured, not assumed -- the wrap and the section both
       compute to left while the h2 alone computes to center. */
    text-align: left;
}

/* The chip row sits in the page, outside the listing component, so it needs
   the listing's own container or it runs the full width of the viewport
   while everything under it stops at 1240px. Matches .container-fluid1. */


/* ==========================================================================
   Use my location
   --------------------------------------------------------------------------
   In place of a row of chips listing the places the marketplace happened to
   have creators in. Two countries fitted; two hundred would not, and the row
   charged every visitor screen space for something most of them did not
   want. It sits with the Country filter, because that is where location
   filtering lives.
   ========================================================================== */

/* The two panel-wide controls sit together at the right of the head. */
.inf-filterhead__acts {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inf-nearme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* The same height as Reset filters, which it now stands beside. It used
       to match the selects, because it used to sit in the filter row. */
    height: 44px;
    padding: 10px 16px;
    border: 1px solid #cfdcf3;
    border-radius: 10px;
    background: #f4f8ff;
    color: #1d4ed8;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.inf-nearme:hover:not(:disabled),
.inf-nearme:focus-visible {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.inf-nearme:disabled {
    cursor: progress;
    opacity: .75;
}

/* The arrow turns while the browser is asking, so a permission prompt the
   reader has not noticed yet still looks like something is happening. */
.inf-nearme.is-busy i {
    animation: inf-nearme-spin 1.1s linear infinite;
}

@keyframes inf-nearme-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .inf-nearme.is-busy i {
        animation: none;
    }
}

/* Always says what happened -- including "no creators near you", which is
   the answer this feature exists to give out loud rather than by showing
   an empty list. */
/* Across the whole panel, not squeezed under one column: it is the answer to
   an action on the panel, and at one column wide every sentence it says wraps
   to four lines. */
.inf-nearme__said {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-size: .8rem;
    line-height: 1.5;
    color: #5a6879;
}

.inf-nearme__said.is-ok {
    color: #15803d;
}

.inf-nearme__said.is-warn {
    color: #9a6212;
}

@media (max-width: 575.98px) {
    /* On a phone the head stacks, so both buttons take the full width and
       neither is a thin tap target beside the other. */
    .inf-filterhead__acts {
        width: 100%;
    }

    .inf-nearme,
    .inf-filterhead__acts .inf-reset {
        flex: 1 1 100%;
    }
}