/* ═══════════════════════════════════════════════
   Gizli — Online Users Page  (v2 Redesign)
   ═══════════════════════════════════════════════ */

/* ── Shared / Keyframes ── */
@keyframes onCardIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes onPulseRing{0%{transform:scale(.7);opacity:.6}100%{transform:scale(2.2);opacity:0}}
@keyframes onBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes onSpin{to{transform:rotate(360deg)}}
@keyframes promoteSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes onGlow{0%,100%{box-shadow:0 0 18px rgba(243,156,18,.15)}50%{box-shadow:0 0 32px rgba(243,156,18,.35)}}

/* ── Nav online badge (green) ── */
.badge-online{background:#2ecc71 !important;color:#fff !important;font-size:.6rem !important}

/* ── Page Layout ── */
.online-page{padding:20px 0 40px;max-width:1100px;margin:0 auto}

/* ═══════════════════  HERO  ═══════════════════ */
.on-hero{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:24px 28px;border-radius:20px;margin-bottom:18px;
    background:linear-gradient(135deg,rgba(46,204,113,.08) 0%,rgba(var(--primary-rgb),.06) 100%);
    border:1px solid rgba(46,204,113,.18);
    position:relative;overflow:hidden;
}
.on-hero-left{display:flex;align-items:center;gap:16px;position:relative}
.on-hero-pulse-ring{
    position:absolute;left:0;top:50%;width:14px;height:14px;border-radius:50%;
    background:rgba(46,204,113,.35);transform:translate(-50%,-50%);
    pointer-events:none;
}
.on-hero-pulse-ring::after{
    content:'';position:absolute;inset:-4px;border-radius:50%;
    border:2px solid rgba(46,204,113,.4);animation:onPulseRing 2s ease-out infinite;
}
.on-hero-title{margin:0;display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:800;color:var(--text)}
.on-hero-dot{width:10px;height:10px;border-radius:50%;background:#2ecc71;box-shadow:0 0 8px rgba(46,204,113,.5);animation:onBlink 2s infinite}
.on-hero-count{
    font-size:2.6rem;font-weight:900;line-height:1;
    background:linear-gradient(135deg,#2ecc71,#27ae60);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.on-hero-stats{display:flex;gap:18px;flex-wrap:wrap}
.on-hero-stat{
    display:flex;align-items:center;gap:10px;
    padding:10px 16px;border-radius:14px;
    background:var(--card);border:1px solid var(--border);
}
.on-hero-stat > i{font-size:1.1rem;color:var(--text3);width:20px;text-align:center}
.on-hero-stat .on-live-dot{font-size:.5rem;color:#2ecc71;animation:onBlink 2s infinite}
.on-stat-num{display:block;font-weight:900;font-size:1.05rem;color:var(--text);line-height:1.2}
.on-stat-label{display:block;font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}

/* ═══════════════════  TOOLBAR  ═══════════════════ */
.on-toolbar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
/* Search */
.on-search-box{
    position:relative;flex:1;min-width:200px;max-width:340px;display:flex;align-items:center;
}
.on-search-icon{position:absolute;left:14px;color:var(--text3);font-size:.85rem;pointer-events:none}
.on-search-input{
    width:100%;padding:10px 36px 10px 38px;border:1px solid var(--border);border-radius:12px;
    background:var(--card);color:var(--text);font-family:inherit;font-size:.9rem;outline:none;
    transition:border-color .2s;
}
.on-search-input:focus{border-color:var(--primary)}
.on-search-input::placeholder{color:var(--text3)}
.on-search-clear{
    position:absolute;right:12px;color:var(--text3);font-size:.8rem;
    width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--input-bg);text-decoration:none;transition:color .2s;
}
.on-search-clear:hover{color:var(--danger)}

/* Filters */
.on-filters{display:flex;gap:6px;flex-wrap:wrap}
.on-filter-chip{
    display:inline-flex;align-items:center;gap:5px;
    padding:8px 14px;border-radius:999px;font-size:.82rem;font-weight:700;
    border:1px solid var(--border);background:var(--card);color:var(--text2);
    text-decoration:none;transition:all .2s;white-space:nowrap;
}
.on-filter-chip:hover{border-color:var(--primary);color:var(--primary)}
.on-filter-chip.active{
    background:var(--primary);border-color:var(--primary);color:#fff;
}
.on-filter-chip i{font-size:.7rem}

/* Gender Tabs */
.on-gender-tabs{
    display:flex;justify-content:center;gap:0;
    margin-top:12px;
    background:var(--bg2);border-radius:12px;padding:4px;
    max-width:400px;margin-left:auto;margin-right:auto;
}
.on-gender-tab{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:10px 16px;border-radius:10px;font-size:.88rem;font-weight:700;
    color:var(--text2);text-decoration:none;transition:all .25s;
    white-space:nowrap;
}
.on-gender-tab:hover{color:var(--primary)}
.on-gender-tab.active{
    background:var(--primary);color:#fff;
    box-shadow:0 2px 8px rgba(var(--primary-rgb),.35);
}
.on-gender-tab i{font-size:.85rem}

/* Promote toolbar */
.on-toolbar-right{margin-left:auto}
.on-promote-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 20px;border-radius:999px;border:2px solid transparent;
    background:linear-gradient(135deg,#f39c12,#e17055);color:#fff;
    font-weight:800;font-size:.88rem;cursor:pointer;font-family:inherit;
    transition:transform .2s,box-shadow .2s;
}
.on-promote-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(243,156,18,.35)}
.on-promote-active{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 16px;border-radius:12px;
    background:rgba(46,204,113,.08);border:1px solid rgba(46,204,113,.25);
    color:#27ae60;font-size:.82rem;font-weight:700;
}

/* ═══════════════════  LIVE BAR  ═══════════════════ */
.on-live-bar{
    display:flex;align-items:center;gap:12px;margin-bottom:16px;
    padding:0 4px;
}
.on-live-indicator{
    display:inline-flex;align-items:center;gap:6px;
    font-size:.7rem;font-weight:900;letter-spacing:1px;color:#2ecc71;
}
.on-live-blink{
    width:7px;height:7px;border-radius:50%;background:#2ecc71;
    display:inline-block;animation:onBlink 1.5s infinite;
}
.on-live-text{font-size:.75rem;color:var(--text3);font-weight:600}

/* ═══════════════════  EMPTY STATE  ═══════════════════ */
.on-empty{
    padding:70px 20px;text-align:center;
    background:var(--card);border:1px solid var(--border);border-radius:20px;
}
.on-empty-icon{font-size:3.5rem;color:var(--text3);opacity:.2;margin-bottom:18px}
.on-empty h3{margin:0 0 6px;font-size:1.1rem;color:var(--text);font-weight:800}
.on-empty p{margin:0;color:var(--text3);font-size:.9rem}

/* ═══════════════════  CARD GRID  ═══════════════════ */
.on-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:14px;
}

/* ═══════════════════  CARD  ═══════════════════ */
.on-card{
    position:relative;display:flex;flex-direction:column;
    padding:18px 16px 14px;border-radius:18px;
    background:var(--card);border:1px solid var(--border);
    backdrop-filter:blur(16px);
    transition:transform .28s ease,box-shadow .28s ease,border-color .28s;
    animation:onCardIn .45s ease both;
}
.on-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 48px rgba(0,0,0,.1);
    border-color:rgba(var(--primary-rgb),.2);
}

/* Promoted card */
.on-card--promoted{
    border-color:rgba(243,156,18,.35);
    background:linear-gradient(160deg,rgba(243,156,18,.04) 0%,rgba(231,112,85,.03) 100%);
    animation:onCardIn .45s ease both,onGlow 3s ease-in-out infinite;
}
.on-card--promoted:hover{box-shadow:0 16px 48px rgba(243,156,18,.12)}
.on-card-promoted-glow{
    position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;
    border-radius:18px;pointer-events:none;
    background:linear-gradient(135deg,rgba(243,156,18,.12),rgba(231,112,85,.08));
    opacity:.35;z-index:0;
}

/* Me card */
.on-card--me{border-color:rgba(var(--primary-rgb),.25);background:rgba(var(--primary-rgb),.02)}

/* Badges */
.on-card-badge{
    position:absolute;top:10px;z-index:5;
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 10px;border-radius:999px;
    font-size:.68rem;font-weight:900;letter-spacing:.3px;
}
.on-card-badge--rocket{
    right:10px;
    background:linear-gradient(135deg,#f39c12,#e17055);color:#fff;
}
.on-card-badge--me{
    left:10px;
    background:rgba(var(--primary-rgb),.12);color:var(--primary);
    border:1px solid rgba(var(--primary-rgb),.2);
}

/* ── Avatar ── */
.on-card-avatar-link{
    display:block;position:relative;width:130px;height:130px;
    margin:0 auto 12px;text-decoration:none;
}
.on-card-avatar{
    width:130px;height:130px;border-radius:50%;
    background-size:cover;background-position:center;background-color:var(--input-bg);
    border:3px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    color:var(--text3);font-size:2rem;overflow:hidden;
    transition:border-color .25s,transform .25s;
}
.on-card:hover .on-card-avatar{border-color:rgba(var(--primary-rgb),.3);transform:scale(1.04)}
.on-card-dot{
    position:absolute;bottom:2px;right:2px;
    width:16px;height:16px;border-radius:50%;
    background:#2ecc71;border:3px solid var(--card);
    box-shadow:0 0 0 2px rgba(46,204,113,.3);
}

/* ── Body ── */
.on-card-body{flex:1;text-align:center;min-width:0}
.on-card-name{
    display:flex;align-items:center;justify-content:center;gap:5px;
    font-weight:800;font-size:.95rem;margin-bottom:2px;
    flex-wrap:wrap;
}
.on-card-username{color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.on-card-username:hover{text-decoration:underline}
.on-card-verified{color:var(--primary);font-size:.72rem}
.on-card-admin{color:var(--danger);font-size:.68rem}
.pro-badge-sm{
    display:inline-flex;align-items:center;padding:2px 6px;border-radius:6px;
    background:linear-gradient(135deg,#f39c12,#e67e22);color:#fff;
    font-size:.6rem;font-weight:900;
}
.on-card-bio{
    margin:4px 0 0;font-size:.78rem;color:var(--text3);line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    padding:0 8px;
}

/* Stats row */
.on-card-stats{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
    font-size:.75rem;font-weight:700;color:var(--text3);
}
.on-card-stats span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.on-card-stats i{font-size:.65rem}
.on-card-stats .fa-heart{color:#e74c3c}
.on-card-stats .fa-pen-nib{color:var(--primary)}
.on-card-stats .fa-clock{color:#f39c12}

/* ── Actions ── */
.on-card-actions{
    display:flex;gap:8px;margin-top:12px;
}
.on-card-btn{
    flex:1;height:38px;border-radius:10px;
    border:1px solid var(--border);background:var(--input-bg);color:var(--text2);
    display:inline-flex;align-items:center;justify-content:center;
    text-decoration:none;font-size:.85rem;
    transition:all .2s ease;
}
.on-card-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(var(--primary-rgb),.05)}
.on-card-btn--msg:hover{border-color:var(--primary);color:var(--primary)}
.on-card-btn--profile{
    border-color:rgba(var(--primary-rgb),.18);
    background:rgba(var(--primary-rgb),.06);color:var(--primary);
}
.on-card-btn--profile:hover{background:rgba(var(--primary-rgb),.14)}

/* ═══════════════════  LOAD MORE  ═══════════════════ */
.on-loadmore-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin:28px 0 8px}
.on-loadmore-btn{
    min-width:230px;height:46px;border-radius:999px;
    background:var(--card);border:2px solid var(--border);
    color:var(--text);font-weight:800;font-size:.92rem;
    cursor:pointer;font-family:inherit;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    transition:all .22s;
}
.on-loadmore-btn:hover{border-color:var(--primary);background:var(--primary);color:#fff}
.on-loadmore-btn:disabled{opacity:.45;pointer-events:none}
.on-loadmore-btn.is-loading .on-loadmore-spinner{display:inline-block}
.on-loadmore-spinner{
    display:none;width:16px;height:16px;
    border:2.5px solid var(--border);border-top-color:var(--primary);
    border-radius:50%;animation:onSpin .6s linear infinite;
}
.on-loadmore-counter{font-size:.78rem;color:var(--text3);font-weight:600}

/* ═══════════════════  PROMOTE MODAL  ═══════════════════ */
.promote-modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center}
.promote-modal.is-open{display:flex}
.promote-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.promote-modal-box{
    position:relative;z-index:1;width:92%;max-width:420px;
    background:var(--card);border:1px solid var(--border);border-radius:22px;
    padding:28px 24px 22px;
    box-shadow:0 24px 64px rgba(0,0,0,.28);
    animation:promoteSlideUp .25s ease;
}
.promote-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.promote-modal-head h3{margin:0;font-size:1.15rem;display:flex;align-items:center;gap:8px;color:var(--text);font-weight:800}
.promote-modal-head h3 i{color:#f39c12}
.promote-modal-close{background:none;border:none;font-size:1.6rem;color:var(--text);cursor:pointer;opacity:.4;line-height:1}
.promote-modal-close:hover{opacity:1}
.promote-modal-desc{margin:0 0 18px;font-size:.88rem;color:var(--text3);line-height:1.5}

/* ── Promote Options ── */
.promote-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.promote-option{cursor:pointer}
.promote-option input{display:none}
.promote-option-inner{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:16px 10px;border-radius:14px;
    border:2px solid var(--border);background:var(--input-bg);
    transition:border-color .18s,background .18s;gap:4px;
}
.promote-option input:checked + .promote-option-inner{border-color:#f39c12;background:rgba(243,156,18,.08)}
.promote-option-label{font-weight:900;font-size:.95rem;color:var(--text)}
.promote-option-price{font-weight:700;font-size:.85rem;color:#f39c12}
.promote-modal-note{margin:0 0 16px;font-size:.78rem;color:var(--text3);text-align:center}

/* ── Modal Actions ── */
.promote-modal-actions{display:flex;gap:10px}
.promote-submit-btn{
    flex:1;height:46px;border-radius:14px;border:none;
    background:linear-gradient(135deg,#f39c12,#e17055);color:#fff;
    font-weight:900;font-size:.95rem;cursor:pointer;font-family:inherit;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    transition:opacity .2s;
}
.promote-submit-btn:hover{opacity:.9}
.promote-submit-btn:disabled{opacity:.5;pointer-events:none}
.promote-cancel-btn{
    flex:0 0 auto;padding:0 20px;height:46px;border-radius:14px;
    border:1px solid var(--border);background:var(--input-bg);color:var(--text);
    font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit;
}
.promote-cancel-btn:hover{border-color:var(--primary)}

/* ── Modal message ── */
.promote-modal-msg{margin-top:12px;padding:10px 14px;border-radius:10px;font-size:.88rem;font-weight:700;text-align:center}
.promote-msg-ok{background:rgba(46,204,113,.1);color:#27ae60;border:1px solid rgba(46,204,113,.3)}
.promote-msg-err{background:rgba(231,76,60,.1);color:#e74c3c;border:1px solid rgba(231,76,60,.3)}

/* ═══════════════════  MOBILE  ═══════════════════ */
@media (max-width:768px){
    .online-page{padding:12px 0 28px}

    /* Hero */
    .on-hero{flex-direction:column;align-items:flex-start;gap:16px;padding:18px 16px;border-radius:16px}
    .on-hero-count{font-size:2rem}
    .on-hero-stats{gap:8px;width:100%}
    .on-hero-stat{flex:1;padding:8px 10px;border-radius:10px;min-width:0}
    .on-hero-stat > i{font-size:.85rem}
    .on-stat-num{font-size:.9rem}
    .on-stat-label{font-size:.62rem}

    /* Toolbar */
    .on-toolbar{flex-direction:column;gap:10px}
    .on-search-box{max-width:100%}
    .on-filters{width:100%;overflow-x:auto;flex-wrap:nowrap;gap:6px;-webkit-overflow-scrolling:touch}
    .on-filters::-webkit-scrollbar{display:none}
    .on-filter-chip{flex:0 0 auto;padding:7px 12px;font-size:.78rem}
    .on-toolbar-right{margin-left:0;width:100%}
    .on-promote-btn{width:100%;justify-content:center}
    .on-gender-tabs{max-width:100%;margin-top:10px}
    .on-gender-tab{padding:9px 10px;font-size:.82rem}

    /* Grid → single column */
    .on-grid{grid-template-columns:1fr;gap:10px}
    .on-card{padding:14px 12px 10px}
    .on-card-avatar-link{width:100px;height:100px;margin-bottom:8px}
    .on-card-avatar{width:100px;height:100px;font-size:1.8rem;border-width:2px}
    .on-card-dot{width:12px;height:12px;border-width:2px}
    .on-card-name{font-size:.85rem}
    .on-card-bio{font-size:.72rem}
    .on-card-stats{gap:8px;font-size:.68rem;margin-top:8px;padding-top:8px}
    .on-card-actions{gap:6px;margin-top:8px}
    .on-card-btn{height:34px;border-radius:8px;font-size:.78rem}

    /* Badges */
    .on-card-badge{font-size:.6rem;padding:2px 7px;top:6px}
    .on-card-badge--rocket{right:6px}
    .on-card-badge--me{left:6px}

    /* Live bar */
    .on-live-bar{margin-bottom:12px}

    /* Promote modal */
    .promote-modal-box{padding:22px 16px 18px;border-radius:18px}
    .promote-options{gap:8px}
}

@media (max-width:400px){
    .on-card-avatar-link{width:90px;height:90px}
    .on-card-avatar{width:90px;height:90px}
}