/* ==========================================================
   THE AI ACE
   BUTTON COMPONENTS
   ========================================================== */

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:16px;

    font-family:var(--font-family);

    font-size:.95rem;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

    white-space:nowrap;

}

/* ---------- PRIMARY ---------- */

.btn-primary{

    background:var(--gradient-gold);

    color:#000;

    border:none;

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-gold);

}

/* ---------- SECONDARY ---------- */

.btn-secondary{

    background:transparent;

    color:var(--text-primary);

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

}

.btn-secondary:hover{

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

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

}

/* ---------- BLUE ---------- */

.btn-blue{

    background:var(--gradient-blue);

    color:#fff;

}

.btn-blue:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-blue);

}

/* ---------- SUCCESS ---------- */

.btn-success{

    background:var(--color-success);

    color:#fff;

}

.btn-success:hover{

    transform:translateY(-3px);

}

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

.btn-outline{

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

    color:var(--color-primary);

    background:transparent;

}

.btn-outline:hover{

    background:var(--color-primary);

    color:#000;

}

/* ---------- GHOST ---------- */

.btn-ghost{

    background:transparent;

    color:var(--text-secondary);

}

.btn-ghost:hover{

    color:var(--color-primary);

}

/* ---------- SMALL ---------- */

.btn-sm{

    padding:10px 18px;

    font-size:.85rem;

}

/* ---------- LARGE ---------- */

.btn-lg{

    padding:18px 34px;

    font-size:1rem;

}

/* ---------- FULL ---------- */

.btn-block{

    width:100%;

}

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

.btn-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    padding:0;

}

/* ---------- DISABLED ---------- */

.btn:disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;

}

/* ---------- LOADING ---------- */

.btn-loading{

    position:relative;

    color:transparent;

}

.btn-loading::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.25);

    border-top-color:#fff;

    animation:buttonSpin .7s linear infinite;

}

@keyframes buttonSpin{

to{

transform:rotate(360deg);

}

}