/* ==========================================================
   THE AI ACE
   BADGES
   ========================================================== */

/* ---------- BASE ---------- */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:6px 12px;

    border-radius:999px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    white-space:nowrap;

    border:1px solid transparent;

}

/* ---------- COLORS ---------- */

.badge-primary{

    background:rgba(255,180,0,.12);

    color:var(--color-primary);

    border-color:rgba(255,180,0,.25);

}

.badge-blue{

    background:rgba(0,183,255,.12);

    color:var(--color-accent);

    border-color:rgba(0,183,255,.25);

}

.badge-success{

    background:rgba(29,215,91,.12);

    color:var(--color-success);

    border-color:rgba(29,215,91,.25);

}

.badge-danger{

    background:rgba(255,82,82,.12);

    color:var(--color-danger);

    border-color:rgba(255,82,82,.25);

}

.badge-dark{

    background:var(--bg-card);

    color:var(--text-secondary);

    border-color:var(--border-color);

}

/* ---------- PREMIUM ---------- */

.badge-premium{

    background:var(--gradient-gold);

    color:#000;

    font-weight:800;

}

/* ---------- BETA ---------- */

.badge-beta{

    background:linear-gradient(135deg,#008cff,#00d4ff);

    color:#fff;

}

/* ---------- NEW ---------- */

.badge-new{

    animation:badgePulse 2s infinite;

}

/* ---------- OUTLINE ---------- */

.badge-outline{

    background:transparent;

    border:1px solid var(--color-primary);

    color:var(--color-primary);

}

/* ---------- SIZES ---------- */

.badge-sm{

    padding:4px 10px;

    font-size:.65rem;

}

.badge-lg{

    padding:8px 16px;

    font-size:.82rem;

}

/* ---------- ICON ---------- */

.badge svg{

    width:14px;

    height:14px;

}

/* ---------- ANIMATION ---------- */

@keyframes badgePulse{

0%{

box-shadow:0 0 0 rgba(255,180,0,.4);

}

50%{

box-shadow:0 0 16px rgba(255,180,0,.45);

}

100%{

box-shadow:0 0 0 rgba(255,180,0,.4);

}

}