@charset "UTF-8";

/* ==========================================================
   Influence+
   button.css
========================================================== */

/* ----------------------------------------------------------
   Base Button
---------------------------------------------------------- */

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

    min-width:180px;
    height:52px;

    padding:0 28px;

    border:2px solid transparent;
    border-radius:999px;

    font-size:0.95rem;
    font-weight:700;
    text-decoration:none;

    cursor:pointer;

    transition:all .3s ease;
}

/* ----------------------------------------------------------
   Primary
---------------------------------------------------------- */

.btn-primary{
    background:var(--primary);
    color:var(--white);
    box-shadow:0 8px 20px rgba(37,99,235,.25);
}

.btn-primary:hover{
    background:var(--primary-dark);
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(37,99,235,.35);
}

/* ----------------------------------------------------------
   Outline
---------------------------------------------------------- */

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

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

/* ----------------------------------------------------------
   White
---------------------------------------------------------- */

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

.btn-white:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow);
}

/* ----------------------------------------------------------
   Gray
---------------------------------------------------------- */

.btn-gray{
    background:#f1f5f9;
    color:var(--text);
}

.btn-gray:hover{
    background:#e2e8f0;
}

/* ----------------------------------------------------------
   Success
---------------------------------------------------------- */

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

.btn-success:hover{
    filter:brightness(.95);
}

/* ----------------------------------------------------------
   Danger
---------------------------------------------------------- */

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

.btn-danger:hover{
    filter:brightness(.95);
}

/* ----------------------------------------------------------
   Size
---------------------------------------------------------- */

.btn-lg{
    min-width:220px;
    height:60px;
    font-size:1rem;
}

.btn-sm{
    min-width:120px;
    height:42px;
    padding:0 20px;
    font-size:.85rem;
}

/* ----------------------------------------------------------
   Full Width
---------------------------------------------------------- */

.btn-block{
    width:100%;
}

/* ----------------------------------------------------------
   Icon
---------------------------------------------------------- */

.btn svg{
    width:18px;
    height:18px;
}

.btn img{
    width:18px;
    height:18px;
}

/* ----------------------------------------------------------
   Disabled
---------------------------------------------------------- */

.btn:disabled,
.btn.disabled{
    opacity:.5;
    cursor:not-allowed;
    pointer-events:none;
}

/* ----------------------------------------------------------
   Focus
---------------------------------------------------------- */

.btn:focus-visible{
    outline:3px solid rgba(37,99,235,.25);
    outline-offset:3px;
}