/* browse-profiles modal styles — extracted from includes/browse-profiles-modal.php */
@keyframes bpSpin { to { transform:rotate(360deg); } }
@keyframes bpGlow { 0%,100%{opacity:1}50%{opacity:0.5} }

#browseProfilesModal.meetgle-modal { padding:0!important; }
.bpm-wrap {
    margin:0;background:#0c0c14;border:none;border-radius:0;
    width:100vw;max-width:100vw;height:100vh;height:100svh;
    display:flex;flex-direction:column;position:relative;
}
.bpm-head { padding:12px 14px 0;flex-shrink:0; }
.bpm-close {
    background:rgba(255,255,255,0.08);border:none;color:white;
    width:30px;height:30px;border-radius:50%;font-size:16px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background 0.15s;
}
.bpm-close:hover { background:rgba(255,255,255,0.14); }

.bpm-scroll {
    padding:8px 12px;overflow-y:auto;flex:1;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent;
}
.bpm-scroll::-webkit-scrollbar { width:5px; }
.bpm-scroll::-webkit-scrollbar-track { background:transparent; }
.bpm-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08);border-radius:3px; }

/* Filters */
.bpf-row { display:flex;align-items:center;gap:5px;padding:8px 0 10px;overflow-x:auto;scrollbar-width:none; }
.bpf-row::-webkit-scrollbar { display:none; }
.bpf {
    background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.06)!important;
    color:rgba(255,255,255,0.35)!important;padding:5px 10px!important;border-radius:14px!important;
    font-size:11px!important;font-weight:600!important;cursor:pointer!important;white-space:nowrap!important;
    transition:all 0.15s!important;font-family:inherit!important;display:flex!important;align-items:center!important;gap:4px!important;
    box-shadow:none!important;outline:none!important;text-transform:none!important;letter-spacing:normal!important;
    line-height:1.4!important;margin:0!important;min-width:auto!important;text-decoration:none!important;
    flex-shrink:0!important;height:auto!important;min-height:0!important;max-height:none!important;
    width:auto!important;max-width:none!important;-webkit-appearance:none!important;appearance:none!important;
    -webkit-tap-highlight-color:transparent!important;
}
.bpf:hover { background:rgba(255,255,255,0.07)!important;color:rgba(255,255,255,0.5)!important; }
.bpf:focus { outline:none!important;box-shadow:none!important; }
.bpf-on { background:rgba(236,72,153,0.1)!important;border-color:rgba(236,72,153,0.22)!important;color:#EC4899!important; }
.bpf-dot { width:5px;height:5px;border-radius:50%;background:#10B981;animation:bpGlow 2s ease-in-out infinite; }
.bpf-sep { width:1px;height:14px;background:rgba(255,255,255,0.05);flex-shrink:0; }

/* List grid — 1 column on mobile, 2 on tablet, 3 on desktop */
.bpg {
    display:grid;gap:4px;
    grid-template-columns:1fr;
}
@media(min-width:600px) { .bpg{grid-template-columns:1fr 1fr;} }
@media(min-width:1024px) { .bpg{grid-template-columns:1fr 1fr 1fr;} }

/* Profile row card */
.bpl {
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;border-radius:12px;
    cursor:pointer;transition:background 0.15s;
    position:relative;
}
.bpl:hover { background:rgba(255,255,255,0.04); }
.bpl:active { background:rgba(255,255,255,0.06); }

/* Avatar */
.bpl-av {
    width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
    max-width:48px!important;max-height:48px!important;
    border-radius:50%!important;object-fit:cover!important;flex-shrink:0!important;
    background:rgba(255,255,255,0.04);
    border:2px solid rgba(255,255,255,0.06)!important;
    display:block!important;
}
.bpl:hover .bpl-av { border-color:rgba(236,72,153,0.25); }

/* No-avatar fallback */
.bpl-noav {
    width:48px;height:48px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,#1e1e35,#1a1a2e);
    display:flex;align-items:center;justify-content:center;
    border:2px solid rgba(255,255,255,0.06);
}
.bpl-init { font-size:18px;font-weight:800;color:rgba(255,255,255,0.12);text-transform:uppercase; }

/* Online dot on avatar */
.bpl-on {
    position:absolute;left:46px;top:10px;
    width:10px;height:10px;border-radius:50%;
    background:#10B981;border:2px solid #0c0c14;
    z-index:1;
}

/* Info */
.bpl-info { flex:1;min-width:0; }
.bpl-name {
    font-size:13px;font-weight:700;color:#f1f0f5;
    display:flex;align-items:center;gap:4px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bpl-vb {
    width:13px;height:13px;border-radius:50%;display:inline-flex;
    align-items:center;justify-content:center;font-size:7px;flex-shrink:0;color:#fff;
}
.bpl-vb-g { background:linear-gradient(135deg,#F59E0B,#D97706); }
.bpl-vb-b { background:linear-gradient(135deg,#3B82F6,#2563EB); }

.bpl-tags { display:flex;gap:4px;margin-top:3px;flex-wrap:wrap; }
.bpl-t {
    font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;
    background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.45);
    line-height:1.5;
}
.bpl-tf { background:rgba(236,72,153,0.12);color:#EC4899; }
.bpl-tm { background:rgba(96,165,250,0.1);color:#60A5FA; }
.bpl-tp { background:rgba(245,158,11,0.12);color:#F59E0B; }

.bpl-bio {
    font-size:11px;color:rgba(255,255,255,0.3);margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Arrow */
.bpl-arrow { color:rgba(255,255,255,0.1);flex-shrink:0; }

/* Spinner & load more */
.bpm-spin {
    width:20px;height:20px;border:2px solid rgba(255,255,255,0.06);
    border-top-color:rgba(255,255,255,0.3);border-radius:50%;
    margin:0 auto;animation:bpSpin 0.7s linear infinite;
}
.bpm-more-btn {
    background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.35);
    border:1px solid rgba(255,255,255,0.06);border-radius:10px;
    padding:8px 20px;font-size:11px;font-weight:600;cursor:pointer;
    font-family:inherit;transition:background 0.15s;
}
.bpm-more-btn:hover { background:rgba(255,255,255,0.08); }

/* Demo rows */
.bpl-demo {
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;
}
.bpl-demo img {
    width:48px;height:48px;border-radius:50%;object-fit:cover;
    border:2px solid rgba(255,255,255,0.06);
}
.bpl-demo-lines { flex:1; }
.bpl-demo-l1 { height:12px;width:60%;background:rgba(255,255,255,0.06);border-radius:6px;margin-bottom:6px; }
.bpl-demo-l2 { height:10px;width:40%;background:rgba(255,255,255,0.04);border-radius:5px; }

/* Country Picker */
.bpc-overlay {
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
    z-index:10;display:flex;align-items:center;justify-content:center;
}
.bpc-panel {
    background:#14141e;border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;width:100%;max-width:420px;
    padding:18px;max-height:70vh;display:flex;flex-direction:column;margin:0 16px;
}
@media(max-width:600px) {
    .bpc-overlay { align-items:flex-end; }
    .bpc-panel { border-radius:18px 18px 0 0;margin:0;max-height:80vh; }
}
.bpc-search {
    width:100%;padding:10px 12px;background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);border-radius:10px;
    color:#fff;font-size:14px;font-family:inherit;outline:none;
    margin-bottom:10px;box-sizing:border-box;
}
.bpc-search::placeholder { color:rgba(255,255,255,0.2); }
.bpc-search:focus { border-color:rgba(236,72,153,0.3); }
.bpc-list {
    flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.06) transparent;
}
.bpc-list::-webkit-scrollbar { width:4px; }
.bpc-list::-webkit-scrollbar-track { background:transparent; }
.bpc-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.06);border-radius:2px; }
.bpc-opt {
    padding:9px 12px;border-radius:8px;cursor:pointer;
    font-size:13px;font-weight:500;color:rgba(255,255,255,0.7);
    transition:background 0.1s;border:none;background:none;
    text-align:left;width:100%;font-family:inherit;
}
.bpc-opt:hover { background:rgba(255,255,255,0.06); }
.bpc-opt-on { background:rgba(236,72,153,0.12);color:#EC4899; }
.bpc-opt-on:hover { background:rgba(236,72,153,0.18); }
.bpc-clear {
    margin-top:8px;padding:10px;border-radius:10px;
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.4);font-size:12px;font-weight:600;
    cursor:pointer;font-family:inherit;transition:background 0.15s;
}
.bpc-clear:hover { background:rgba(255,255,255,0.08); }