/* ══════════════════════════════════════════════════════
   User Directory Pro — Frontend Styles v3.1
══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --wlzdp-accent:      #1e40af;
    --wlzdp-card-bg:     #ffffff;
    --wlzdp-card-text:   #1e293b;
    --wlzdp-card-border: #e2e8f0;
    --wlzdp-modal-bg:    #ffffff;
    --wlzdp-modal-text:  #1e293b;
    --wlzdp-link:        #1e40af;
    --wlzdp-page-bg:     #f1f5f9;
    --wlzdp-image-bg:    #e8edf5;

    /* Static tokens */
    --wlzdp-muted:       #64748b;
    --wlzdp-border:      #e2e8f0;
    --wlzdp-radius:      10px;
    --wlzdp-shadow-sm:   0 1px 6px rgba(0,0,0,.07);
    --wlzdp-shadow-md:   0 4px 20px rgba(0,0,0,.10);
    --wlzdp-shadow-lg:   0 12px 48px rgba(0,0,0,.20);
    --wlzdp-ease:        cubic-bezier(.4,0,.2,1);
}

/* ── #wlzdp-root: layout & typography (colors come from :root above, overridden inline by PHP) ── */
#wlzdp-root {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--wlzdp-card-text);
    background: var(--wlzdp-page-bg);
    padding: 28px 20px 52px;
    border-radius: 16px;
    box-sizing: border-box;
}
#wlzdp-root *, #wlzdp-root *::before, #wlzdp-root *::after { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════
   FILTER BAR  — two-row layout
   Row 1: Location filters + Sort  |  Reset
   Row 2: Role tabs
══════════════════════════════════════════════════════ */
.wlzdp-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--wlzdp-card-bg);
    border: 1px solid var(--wlzdp-card-border);
    border-radius: var(--wlzdp-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--wlzdp-shadow-sm);
}

/* Row 1: filters + sort side by side */
.wlzdp-filter-row-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
}

/* Row 2: role tabs */
.wlzdp-filter-row-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--wlzdp-card-border);
}

/* Each filter cell sits side-by-side */
.wlzdp-filter-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 auto;
}
.wlzdp-filter-cell--reset {
    margin-left: auto;
    align-self: flex-end;
}

.wlzdp-filter-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--wlzdp-muted);
}

/* Role tabs */
.wlzdp-role-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.wlzdp-role-tab {
    padding: 7px 16px;
    border: 1.5px solid var(--wlzdp-card-border);
    border-radius: 50px;
    background: transparent;
    color: var(--wlzdp-muted);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s var(--wlzdp-ease);
    white-space: nowrap;
    font-family: inherit;
}
.wlzdp-role-tab:hover { border-color: var(--wlzdp-accent); color: var(--wlzdp-accent); }
.wlzdp-role-tab.active {
    background: var(--wlzdp-accent);
    border-color: var(--wlzdp-accent);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--wlzdp-accent) 35%, transparent);
}

/* Select */
.wlzdp-select-wrap { position: relative; min-width: 148px; }
.wlzdp-select {
    width: 100%;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding: 8px 32px 8px 11px;
    border: 1.5px solid var(--wlzdp-card-border);
    border-radius: 7px;
    background: var(--wlzdp-card-bg);
    background-image: none !important;
    font-size: .83rem;
    font-family: inherit;
    color: var(--wlzdp-card-text);
    cursor: pointer;
    transition: border-color .16s;
}
.wlzdp-select:focus { outline: none; border-color: var(--wlzdp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wlzdp-accent) 18%, transparent); }
.wlzdp-chevron { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; width: 14px; height: 14px; color: var(--wlzdp-muted); }

/* Reset button */
.wlzdp-reset-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px;
    border: 1.5px solid var(--wlzdp-card-border);
    border-radius: 7px;
    background: transparent;
    font-size: .8rem; font-family: inherit;
    color: var(--wlzdp-muted);
    cursor: pointer;
    transition: all .16s;
    white-space: nowrap;
}
.wlzdp-reset-btn:hover { border-color: #ef4444; color: #ef4444; }

/* Utility */
.wlzdp-hidden { display: none !important; }

/* ══════════════════════════════════════════════════════
   META ROW
══════════════════════════════════════════════════════ */
.wlzdp-meta-row { margin-bottom: 14px; min-height: 20px; }
.wlzdp-count { font-size: .8rem; color: var(--wlzdp-muted); font-weight: 500; }

/* ══════════════════════════════════════════════════════
   LOADING
══════════════════════════════════════════════════════ */
.wlzdp-loading-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 20px;
    color: var(--wlzdp-muted);
}
.wlzdp-loading-state p { margin: 10px 0 0; font-size: .9rem; }
.wlzdp-spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--wlzdp-border);
    border-top-color: var(--wlzdp-accent);
    border-radius: 50%;
    animation: wlzdp-spin .65s linear infinite;
    margin: 0 auto;
}
@keyframes wlzdp-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════
   GRID — 4 columns desktop
══════════════════════════════════════════════════════ */
.wlzdp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* ══════════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════════ */
.wlzdp-card {
    position: relative;
    background: var(--wlzdp-card-bg);
    border: 1px solid var(--wlzdp-card-border);
    border-radius: var(--wlzdp-radius);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--wlzdp-shadow-sm);
    transition: transform .22s var(--wlzdp-ease), box-shadow .22s var(--wlzdp-ease);
    color: var(--wlzdp-card-text);
}
.wlzdp-card:hover { transform: translateY(-4px); box-shadow: var(--wlzdp-shadow-md); }
.wlzdp-card:hover .wlzdp-card__overlay { opacity: 1; }

.wlzdp-card__avatar {
    width: 100%; aspect-ratio: 1;
    overflow: hidden;
    background: var(--wlzdp-image-bg);
}
.wlzdp-card__avatar img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .4s ease;
}
.wlzdp-card:hover .wlzdp-card__avatar img { transform: scale(1.05); }

.wlzdp-card__info { padding: 13px 14px 15px; }
.wlzdp-card__name {
    font-size: .95rem; font-weight: 700;
    margin: 0 0 4px;
    color: var(--wlzdp-card-text);
    line-height: 1.35;
}
.wlzdp-card__location {
    display: flex; align-items: center; gap: 3px;
    font-size: .75rem; color: var(--wlzdp-muted); margin: 0;
}

.wlzdp-card__overlay {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--wlzdp-accent) 80%, #000 10%);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .2s var(--wlzdp-ease);
    backdrop-filter: blur(2px);
}
.wlzdp-card__overlay span {
    color: #fff; font-size: .88rem; font-weight: 700;
    border: 2px solid rgba(255,255,255,.55);
    padding: 7px 20px; border-radius: 50px;
    letter-spacing: .03em;
}

/* ══════════════════════════════════════════════════════
   NO RESULTS
══════════════════════════════════════════════════════ */
.wlzdp-no-results {
    grid-column: 1 / -1;
    text-align: center; padding: 60px 20px;
    color: var(--wlzdp-muted);
}
.wlzdp-no-results svg { margin-bottom: 12px; opacity: .4; }
.wlzdp-no-results p { margin: 0; font-size: .95rem; }

/* ══════════════════════════════════════════════════════
   PAGER (load more + pagination)
══════════════════════════════════════════════════════ */
.wlzdp-pager { text-align: center; margin-top: 34px; }

/* Load more button */
.wlzdp-load-more-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 40px;
    background: var(--wlzdp-accent);
    color: #fff; border: none; border-radius: 50px;
    font-size: .92rem; font-weight: 700; font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--wlzdp-accent) 40%, transparent);
    transition: all .2s var(--wlzdp-ease);
}
.wlzdp-load-more-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.wlzdp-load-more-btn:active { transform: none; }
.wlzdp-btn-spin {
    width: 17px; height: 17px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wlzdp-spin .65s linear infinite;
}

/* Page number pagination */
.wlzdp-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; }
.wlzdp-page-btn {
    min-width: 38px; height: 38px; padding: 0 10px;
    border: 1.5px solid var(--wlzdp-card-border);
    border-radius: 7px;
    background: var(--wlzdp-card-bg);
    color: var(--wlzdp-card-text);
    font-size: .85rem; font-weight: 600; font-family: inherit;
    cursor: pointer;
    transition: all .16s;
}
.wlzdp-page-btn:hover:not([disabled]) { border-color: var(--wlzdp-accent); color: var(--wlzdp-accent); }
.wlzdp-page-btn.active { background: var(--wlzdp-accent); border-color: var(--wlzdp-accent); color: #fff; }
.wlzdp-page-btn[disabled] { opacity: .35; cursor: default; }
.wlzdp-page-ellipsis { color: var(--wlzdp-muted); padding: 0 4px; line-height: 38px; }

/* ══════════════════════════════════════════════════════
   MODAL OVERLAY
══════════════════════════════════════════════════════ */
.wlzdp-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(8, 12, 28, 0.75);
    overflow-y: auto;
    isolation: isolate;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.wlzdp-modal-overlay.is-open {
   display: flex;
    justify-content: center;
    padding: 5% 0px;
    align-items: flex-start;
}
/* Flex spacers: push modal to vertical centre but still allow scroll on tall screens */
.wlzdp-modal-overlay.is-open::before,
.wlzdp-modal-overlay.is-open::after {
    content: '';
    display: block;
    flex: 1 0 30px;
}
body.wlzdp-no-scroll { overflow: hidden; }

/* ══════════════════════════════════════════════════════
   MODAL BOX — large photo LEFT, details RIGHT
══════════════════════════════════════════════════════ */
.wlzdp-modal {
    position: relative;
    background: var(--wlzdp-modal-bg);
    border-radius: 12px;
    width: calc(100% - 32px);
    max-width: 860px;
    box-shadow: 0 24px 80px rgba(0,0,0,.32), 0 4px 16px rgba(0,0,0,.12);
    margin: 0;
    flex-shrink: 0;
    animation: wlzdp-pop .25s cubic-bezier(.34,1.46,.64,1) both;
    overflow: hidden;
}
@keyframes wlzdp-pop {
    from { opacity:0; transform: scale(.92) translateY(28px); }
    to   { opacity:1; transform: none; }
}

/* Close button */
.wlzdp-modal-close {
    position: absolute; top: 16px; right: 16px;
    z-index: 20;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.96);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #1f2937;
    font-size: 18px; font-weight: 300; line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: all .15s;
}
.wlzdp-modal-close:hover { background: #fee2e2; color: #dc2626; transform: scale(1.08); }

/* ── grid: photo col (45%) | details col (55%) ── */
.wlzdp-modal-inner {
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: 500px;
}

/* LEFT: photo fills entire left column */
.wlzdp-modal-photo {
    position: relative;
    background: var(--wlzdp-image-bg);
    overflow: hidden;
}
.wlzdp-modal-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* RIGHT: details column — flex column so bio sticks to bottom */
.wlzdp-modal-details {
    display: flex;
    flex-direction: column;
    padding: 40px 36px 36px;
    overflow-y: auto;
    max-height: 85vh;
    background: var(--wlzdp-modal-bg);
    color: var(--wlzdp-modal-text);
}

/* Name — large, bold, uppercase like reference */
.wlzdp-modal-name {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 6px;
    color: var(--wlzdp-modal-text);
    line-height: 1.2;
    padding-right: 40px;
}

/* Location pill */
.wlzdp-modal-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: var(--wlzdp-muted);
    margin-bottom: 24px;
}
.wlzdp-modal-loc svg { opacity: .55; flex-shrink: 0; }

/* Contact rows */
.wlzdp-mcontacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wlzdp-mcontact {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: .84rem;
    color: var(--wlzdp-card-text);
    text-decoration: none;
    padding: 9px 13px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--wlzdp-accent) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--wlzdp-accent) 12%, transparent);
    transition: all .15s;
    word-break: break-all;
}
.wlzdp-mcontact:hover {
    background: color-mix(in srgb, var(--wlzdp-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--wlzdp-accent) 28%, transparent);
    color: var(--wlzdp-accent);
    transform: translateX(2px);
}
.wlzdp-mcontact__icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    background: var(--wlzdp-accent);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
}
.wlzdp-mcontact__icon svg { width: 13px; height: 13px; stroke: #fff; }

/* Socials */
.wlzdp-msocials {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.wlzdp-msocial {
    height: 34px; padding: 0 14px;
    border-radius: 7px;
    display: inline-flex; align-items: center; gap: 6px;
    color: #fff; font-size: .76rem; font-weight: 600;
    font-family: inherit; text-decoration: none;
    transition: all .15s;
}
.wlzdp-msocial:hover { transform: translateY(-2px); filter: brightness(1.1); }
.wlzdp-msocial--fb { background: #1877f2; }
.wlzdp-msocial--tw { background: #1da1f2; }

/* Bio — pushed to bottom with margin-top: auto */
.wlzdp-modal-bio {
    font-size: .85rem;
    line-height: 1.8;
    color: var(--wlzdp-muted);
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--wlzdp-border);
}

/* No-photo: single column */
.wlzdp-modal-inner.wlzdp-modal--no-photo {
    grid-template-columns: 1fr;
    min-height: 0;
}
.wlzdp-modal-inner.wlzdp-modal--no-photo .wlzdp-modal-details {
    padding-top: 40px;
}
.wlzdp-modal-inner.wlzdp-modal--no-photo .wlzdp-modal-details {
    padding-top: 36px;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Desktop breakpoints
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .wlzdp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .wlzdp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 600px)
   • Cards: 2 columns
   • Filter row 1: selects fill width, sort inline
   • Filter row 2: role pills wrap naturally
══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    #wlzdp-root {
        padding: 16px 12px 36px;
    }

    /* Grid: always 2 columns on mobile */
    .wlzdp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Filter bar */
    .wlzdp-filter-bar {
        padding: 14px 14px;
        gap: 10px;
    }

    /* Row 1: selects + sort side by side, wrapping */
    .wlzdp-filter-row-1 {
        gap: 8px 10px;
    }

    .wlzdp-filter-cell {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

    .wlzdp-filter-cell--reset {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .wlzdp-select-wrap {
        min-width: 0;
        width: 100%;
    }

    /* Row 2: role pills — label + pills */
    .wlzdp-filter-row-2 {
        gap: 6px;
    }

    .wlzdp-role-tabs {
        gap: 4px;
        flex-wrap: wrap;
    }

    .wlzdp-role-tab {
        padding: 5px 12px;
        font-size: .78rem;
    }

    /* Modal: stack vertically on mobile */
    .wlzdp-modal { border-radius: 14px; max-width: 100%; }
    .wlzdp-modal-inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .wlzdp-modal-photo {
        position: relative;
        height: 350px;
    }
    .wlzdp-modal-photo img {
        position: absolute;
        inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .wlzdp-modal-details {
        padding: 20px 18px 24px;
        max-height: none;
    }
    .wlzdp-modal-name { font-size: 1.15rem; }
}