/* ==========================================================
   REUSABLE FILTER PILLS
========================================================== */

.filter-pills{

    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;

    margin:50px 0;

}

.filter-pills button{

    border:none;

    background:#ffffff;

    color:#334155;

    padding:12px 24px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s ease;

    box-shadow:0 10px 25px rgba(15,23,42,.08);

}

.filter-pills button:hover{

    transform:translateY(-3px);

}

.filter-pills button.active{

    background:linear-gradient(135deg,#FF6B00,#FF8C1A);

    color:#fff;

    box-shadow:0 15px 35px rgba(255,107,0,.30);

}

/* Gaming Variant */

.filter-pills.gaming button.active{

    background:linear-gradient(135deg,#14B8A6,#06B6D4);

    box-shadow:0 15px 35px rgba(20,184,166,.30);

}

/* ==========================================================
   BUTTON SYSTEM
========================================================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 30px;

    border:none;
    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

}

.btn:hover{

    transform:translateY(-3px);

}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#fff;

    box-shadow:
        0 12px 30px rgba(255,107,0,.25);

}

.btn-primary:hover{

    color:#fff;

}

.btn-gaming{

    background:linear-gradient(
        135deg,
        var(--gaming),
        var(--gaming-light)
    );

    color:#fff;

    box-shadow:
        0 12px 30px rgba(20,184,166,.25);

}

.btn-gaming:hover{

    color:#fff;

}

.btn-outline{

    background:transparent;

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}