/* ==========================================================================
   WizBrand — Influencer HTML Sitemap (public, SEO page)
   ========================================================================== */
.wz-sm {
    --sm-ink: #0f1b34;
    --sm-ink2: #41506b;
    --sm-dim: #6b7894;
    --sm-line: #e6ecf5;
    --sm-blue: #1d4ed8;
    background: #f4f7fc;
    padding: 0 0 60px;
}

.wz-sm__wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- Hero ---- */
.wz-sm-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: clamp(36px, 6vw, 64px) 0;
    text-align: center;
    background:
        radial-gradient(60% 80% at 12% 18%, rgba(99, 179, 255, .35) 0, transparent 55%),
        radial-gradient(55% 75% at 88% 90%, rgba(124, 58, 237, .30) 0, transparent 55%),
        linear-gradient(135deg, #0b1f44 0%, #14306e 45%, #1d4ed8 100%);
}

/* dotted texture overlay */
.wz-sm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
    background-size: 22px 22px;
    opacity: .55;
    pointer-events: none;
}

/* soft glow rings */
.wz-sm-hero::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .10) 0, transparent 70%);
    pointer-events: none;
}

.wz-sm-hero > .wz-sm__wrap {
    position: relative;
    z-index: 1;
}

.wz-sm-hero h1 {
    margin: 0 0 10px;
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    letter-spacing: -.02em;
}

.wz-sm-hero p {
    margin: 0 auto;
    max-width: 640px;
    font-size: 1.02rem;
    line-height: 1.6;
    opacity: .9;
}

.wz-sm-hero__stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: .5rem 1.1rem;
    font-size: .92rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
}

/* ---- Search ---- */
.wz-sm-search {
    position: relative;
    max-width: 540px;
    margin: -28px auto 30px;
}

.wz-sm-search i {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: #9fb0cc;
    pointer-events: none;
}

.wz-sm-search input {
    width: 100%;
    height: 56px;
    padding: 0 1.2rem 0 3.1rem;
    font-size: 1.05rem;
    color: var(--sm-ink);
    background: #fff;
    border: 1px solid var(--sm-line);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 27, 52, .12);
    transition: border-color .18s, box-shadow .18s;
}

.wz-sm-search input:focus {
    outline: none;
    border-color: var(--sm-blue);
    box-shadow: 0 0 0 4px rgba(29, 78, 216, .12), 0 18px 44px rgba(15, 27, 52, .12);
}

/* ---- Collapsible country tree ---- */
.wz-sm-tree {
    background: #fff;
    border: 1px solid var(--sm-line);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 27, 52, .05);
    overflow: hidden;
}

.wz-sm-node + .wz-sm-node { border-top: 1px solid #eef2f8; }

.wz-sm-node__head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 18px 22px;
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}

.wz-sm-node__head:hover { background: #f7faff; }

.wz-sm-node__arrow {
    color: var(--sm-blue);
    font-size: 1rem;
    transition: transform .18s ease;
    flex: 0 0 auto;
}

.wz-sm-node__head.is-open .wz-sm-node__arrow { transform: rotate(90deg); }

.wz-sm-node__title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--sm-ink);
}

.wz-sm-node__meta {
    margin-left: auto;
    font-size: .85rem;
    font-weight: 700;
    color: var(--sm-dim);
    white-space: nowrap;
}

/* only top-level country rows get a divider between them */
.wz-sm-tree > .wz-sm-node + .wz-sm-node { border-top: 1px solid #eef2f8; }

/* nested container — the vertical tree connector line */
.wz-sm-branch {
    margin-left: 26px;
    padding: 2px 0 6px;
    border-left: 1.5px solid #e6ecf5;
}

/* nested nodes (state / city) — lighter, smaller, no card divider */
.wz-sm-node--state > .wz-sm-node__head,
.wz-sm-node--city > .wz-sm-node__head {
    padding: 8px 14px;
}

.wz-sm-node--state .wz-sm-node__title {
    font-size: .98rem;
    font-weight: 700;
    color: var(--sm-blue);
}

.wz-sm-node--city .wz-sm-node__title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--sm-ink2);
}

.wz-sm-node--state .wz-sm-node__arrow,
.wz-sm-node--city .wz-sm-node__arrow {
    font-size: .85rem;
    color: #9fb0cc;
}

.wz-sm-node--state .wz-sm-node__meta,
.wz-sm-node--city .wz-sm-node__meta {
    font-size: .8rem;
    font-weight: 600;
}

/* influencer leaf links */
.wz-sm-leaves {
    display: flex;
    flex-direction: column;
    padding: 2px 0 8px 30px;
}

.wz-sm-leaf {
    padding: 4px 0;
    font-size: .93rem;
    font-weight: 600;
    color: var(--sm-blue);
    text-decoration: none;
    width: fit-content;
}

.wz-sm-leaf:hover { text-decoration: underline; }

/* ---- XML link (for search engines) ---- */
.wz-sm-xml {
    margin: 28px 0 0;
    text-align: center;
    font-size: .95rem;
    color: var(--sm-dim);
}

.wz-sm-xml a {
    color: var(--sm-blue);
    font-weight: 700;
    text-decoration: none;
}

.wz-sm-xml a:hover { text-decoration: underline; }

/* ---- Breadcrumb (in hero) ---- */
.wz-sm-crumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: .85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
}

.wz-sm-crumb a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.wz-sm-crumb a:hover { color: #fff; text-decoration: underline; }
.wz-sm-crumb .cur { color: #fff; }

/* ---- Pagination ---- */
.wz-sm-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 28px;
}

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

.wz-sm-page-btn:hover:not(:disabled):not(.is-gap) {
    border-color: var(--sm-blue);
    color: var(--sm-blue);
    background: #f3f7ff;
}

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

.wz-sm-page-btn:disabled { opacity: .45; cursor: not-allowed; }
.wz-sm-page-btn.is-gap { border: none; background: transparent; cursor: default; min-width: 24px; }

.wz-sm-jump {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 10px;
    padding: 5px 6px 5px 14px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--sm-dim);
    background: #fff;
    border: 1px solid var(--sm-line);
    border-radius: 12px;
}

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

.wz-sm-jump input::-webkit-outer-spin-button,
.wz-sm-jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wz-sm-jump > button {
    height: 36px;
    padding: 0 14px;
    font-weight: 700;
    color: #fff;
    background: var(--sm-blue);
    border: none;
    border-radius: 9px;
    cursor: pointer;
}

.wz-sm-jump > button:hover { background: #1741b6; }

/* ---- Empty / no-result ---- */
.wz-sm-empty {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.wz-sm-empty i { font-size: 2.6rem; color: #cbd5e1; }

.wz-sm-empty h3 { margin: 14px 0 4px; color: #64748b; font-weight: 800; }

@media (max-width: 560px) {
    .wz-sm-node__head { flex-wrap: wrap; }
    .wz-sm-node__meta { margin-left: 30px; width: 100%; }
    .wz-sm-branch { margin-left: 16px; }
}