/* ==========================================================
   BUTTONS
========================================================== */

/* ==========================================================
   Base Button
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    min-width:170px;

    height:56px;

    padding:0 2rem;

    border:none;

    border-radius:999px;

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

    font-size:1rem;

    font-weight:700;

    line-height:1;

    text-decoration:none;

    cursor:pointer;

    user-select:none;

    white-space:nowrap;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease,

        color .35s ease,

        border-color .35s ease;

}

/* ==========================================================
   Primary
========================================================== */

.btn-primary{

    position:relative;

    color:#ffffff;

    background:var(--gradient-primary);

    box-shadow:

        0 12px 35px

        rgba(37,99,235,.30);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 20px 45px

        rgba(37,99,235,.45);

}

.btn-primary:active{

    transform:translateY(-1px);

}

/* ==========================================================
   Secondary
========================================================== */

.btn-secondary{

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

    color:#ffffff;

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.09);

    border-color:rgba(37,99,235,.35);

    transform:translateY(-4px);

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

}

/* ==========================================================
   Outline
========================================================== */

.btn-outline{

    background:transparent;

    color:#ffffff;

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

}

.btn-outline:hover{

    background:var(--color-primary);

    transform:translateY(-4px);

}

/* ==========================================================
   Ghost
========================================================== */

.btn-ghost{

    background:transparent;

    color:var(--text-secondary);

}

.btn-ghost:hover{

    color:#ffffff;

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

}

/* ==========================================================
   White
========================================================== */

.btn-white{

    background:#ffffff;

    color:#08111f;

}

.btn-white:hover{

    transform:translateY(-4px);

    box-shadow:

        0 16px 40px

        rgba(255,255,255,.20);

}

/* ==========================================================
   Gradient Border
========================================================== */

.btn-gradient{

    position:relative;

    background:#08111f;

    color:#ffffff;

    border:1px solid transparent;

    background-clip:padding-box;

}

.btn-gradient::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:var(--gradient-primary);

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

.btn-gradient:hover{

    transform:translateY(-4px);

}

/* ==========================================================
   Icon
========================================================== */

.btn svg,

.btn img{

    width:18px;

    height:18px;

    flex-shrink:0;

}

/* ==========================================================
   Sizes
========================================================== */

.btn-sm{

    height:44px;

    min-width:130px;

    padding:0 1.4rem;

    font-size:.9rem;

}

.btn-lg{

    height:64px;

    min-width:220px;

    padding:0 2.6rem;

    font-size:1.05rem;

}

/* ==========================================================
   Full Width
========================================================== */

.btn-block{

    width:100%;

}

/* ==========================================================
   Rounded Square
========================================================== */

.btn-square{

    width:56px;

    height:56px;

    min-width:56px;

    padding:0;

    border-radius:18px;

}

/* ==========================================================
   Disabled
========================================================== */

.btn:disabled,

.btn.disabled{

    opacity:.55;

    cursor:not-allowed;

    pointer-events:none;

}

/* ==========================================================
   Loading
========================================================== */

.btn-loading{

    pointer-events:none;

}

.btn-loading::after{

    content:"";

    width:18px;

    height:18px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#ffffff;

    animation:buttonSpinner .8s linear infinite;

}

/* ==========================================================
   Focus
========================================================== */

.btn:focus-visible{

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

    outline-offset:4px;

}

/* ==========================================================
   Shine Effect
========================================================== */

.btn-primary{

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:skewX(-25deg);

}

.btn-primary:hover::before{

    left:150%;

    transition:1s;

}

/* ==========================================================
   Spinner
========================================================== */

@keyframes buttonSpinner{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:768px){

    .btn{

        min-width:150px;

        height:52px;

        padding:0 1.6rem;

    }

    .btn-lg{

        height:58px;

        min-width:180px;

    }

}

@media(max-width:576px){

    .btn{

        width:100%;

    }

}