/* ==========================================================
   HASHVIX BADGES
========================================================== */


/* ==========================================================
   BASE
========================================================== */

.hx-badge{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

padding:8px 16px;

border-radius:999px;

font-size:13px;

font-weight:700;

letter-spacing:.2px;

line-height:1;

white-space:nowrap;

transition:.3s;

}


/* ==========================================================
   VERIFIED
========================================================== */

.hx-badge-verified{

background:rgba(59,130,246,.15);

color:#60A5FA;

border:1px solid rgba(59,130,246,.35);

}


/* ==========================================================
   PREMIUM
========================================================== */

.hx-badge-premium{

background:rgba(250,204,21,.15);

color:#FACC15;

border:1px solid rgba(250,204,21,.35);

}


/* ==========================================================
   PRO
========================================================== */

.hx-badge-pro{

background:rgba(168,85,247,.15);

color:#C084FC;

border:1px solid rgba(168,85,247,.35);

}


/* ==========================================================
   AI
========================================================== */

.hx-badge-ai{

background:rgba(79,140,255,.14);

color:#58A6FF;

border:1px solid rgba(79,140,255,.35);

}


/* ==========================================================
   NEW
========================================================== */

.hx-badge-new{

background:rgba(16,185,129,.15);

color:#34D399;

border:1px solid rgba(16,185,129,.35);

}


/* ==========================================================
   HOT
========================================================== */

.hx-badge-hot{

background:rgba(239,68,68,.15);

color:#F87171;

border:1px solid rgba(239,68,68,.35);

}


/* ==========================================================
   TRENDING
========================================================== */

.hx-badge-trending{

background:rgba(249,115,22,.15);

color:#FB923C;

border:1px solid rgba(249,115,22,.35);

}


/* ==========================================================
   EXPLICIT
========================================================== */

.hx-badge-explicit{

background:#ef4444;

color:white;

padding:5px 10px;

font-size:11px;

}


/* ==========================================================
   FREE
========================================================== */

.hx-badge-free{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

color:white;

}


/* ==========================================================
   CREDIT
========================================================== */

.hx-badge-credit{

background:linear-gradient(135deg,#2563eb,#7c3aed);

color:white;

}


/* ==========================================================
   FOLLOWERS
========================================================== */

.hx-badge-followers{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.06);

color:var(--hx-text);

}


/* ==========================================================
   PLAYS
========================================================== */

.hx-badge-plays{

background:rgba(255,255,255,.05);

color:#d1d5db;

}


/* ==========================================================
   LIKES
========================================================== */

.hx-badge-likes{

background:rgba(255,59,107,.14);

color:#ff4d8d;

}


/* ==========================================================
   GENRE
========================================================== */

.hx-badge-genre{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.05);

color:#d1d5db;

font-weight:600;

}


/* ==========================================================
   STATUS
========================================================== */

.hx-status{

display:inline-flex;

align-items:center;

gap:8px;

font-size:13px;

}

.hx-status::before{

content:"";

width:9px;

height:9px;

border-radius:50%;

}


/* ==========================================================
   STATUS COLORS
========================================================== */

.hx-status-online::before{

background:#10B981;

box-shadow:0 0 12px rgba(16,185,129,.5);

}

.hx-status-offline::before{

background:#6B7280;

}

.hx-status-busy::before{

background:#EF4444;

}

.hx-status-away::before{

background:#F59E0B;

}


/* ==========================================================
   RANK
========================================================== */

.hx-rank{

display:inline-flex;

align-items:center;

justify-content:center;

width:34px;

height:34px;

border-radius:50%;

font-weight:800;

background:var(--hx-gradient-primary);

color:white;

}


/* ==========================================================
   LEVEL
========================================================== */

.hx-level{

padding:7px 14px;

border-radius:999px;

background:linear-gradient(

135deg,

#0ea5e9,

#2563eb);

color:white;

font-size:12px;

font-weight:700;

}


/* ==========================================================
   LIVE
========================================================== */

.hx-live{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 14px;

border-radius:999px;

background:#ef4444;

color:white;

font-size:12px;

font-weight:700;

}

.hx-live::before{

content:"";

width:8px;

height:8px;

border-radius:50%;

background:white;

animation:hxLive 1s infinite;

}


/* ==========================================================
   HOVER
========================================================== */

.hx-badge:hover{

transform:translateY(-2px);

}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes hxLive{

0%{

opacity:1;

transform:scale(1);

}

50%{

opacity:.35;

transform:scale(1.4);

}

100%{

opacity:1;

transform:scale(1);

}

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

.hx-badge{

font-size:12px;

padding:7px 12px;

}

}