.spinner-wrapper{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

}

.spinner{

    border-radius:50%;

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

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

    animation:spinnerRotate .7s linear infinite;

    box-shadow:
        0 0 18px rgba(47,107,255,.35);

}

.spinner-sm{

    width:18px;

    height:18px;

}

.spinner-md{

    width:30px;

    height:30px;

}

.spinner-lg{

    width:52px;

    height:52px;

}

.spinner-label{

    color:var(--text-secondary);

    font-size:14px;

    font-weight:500;

}

@keyframes spinnerRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
/* ==========================================================
   BUTTON
========================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border:1px solid transparent;

    border-radius:var(--radius-md);

    font-weight:600;

    cursor:pointer;

    user-select:none;

    white-space:nowrap;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

/* ---------- Sizes ---------- */

.btn-sm{
    height:34px;
    padding:0 14px;
    font-size:13px;
}

.btn-md{
    height:42px;
    padding:0 18px;
    font-size:14px;
}

.btn-lg{
    height:48px;
    padding:0 24px;
    font-size:15px;
}

/* ---------- Variants ---------- */

.btn-primary{
    background:var(--primary);
    color:#fff;
}

.btn-primary:hover{
    background:#1d4ed8;
}

.btn-secondary{
    background:var(--surface-2);
    color:var(--text-primary);
    border-color:var(--glass-border);
}

.btn-secondary:hover{
    background:var(--surface-3);
}

.btn-success{
    background:var(--success);
    color:#fff;
}

.btn-warning{
    background:var(--warning);
    color:#fff;
}

.btn-danger{
    background:var(--danger);
    color:#fff;
}

.btn-outline{
    background:transparent;
    border-color:var(--glass-border-strong);
    color:var(--text-primary);
}

.btn-outline:hover{
    background:rgba(255,255,255,.05);
}

.btn-ghost{
    background:transparent;
    color:var(--text-primary);
}

.btn-ghost:hover{
    background:rgba(255,255,255,.05);
}

/* ---------- States ---------- */

.btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.btn-full{
    width:100%;
}

.btn-icon{
    display:flex;
    align-items:center;
}

.btn-label{
    display:flex;
    align-items:center;
}