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

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:var(--space-xs);

    min-height:48px;

    padding:12px 24px;

    border:1px solid transparent;

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

    background:var(--primary);

    color:var(--surface);

    font-size:var(--font-size-base);

    font-weight:700;

    line-height:1;

    text-decoration:none;

    cursor:pointer;

    transition:var(--transition);

}

.btn:hover{

    background:var(--primary-dark);

    color:var(--surface);

}

.btn:disabled,

.btn.disabled{

    opacity:.6;

    cursor:not-allowed;

    pointer-events:none;

}

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

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

    color:var(--surface);

}

.btn-primary:hover{

    background:var(--primary-dark);

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

}

/*--------------------------------------
 Secondary
--------------------------------------*/


.btn-secondary{

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

    color:var(--primary);

    background:#fff;

}


.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}



/*--------------------------------------
 Light
--------------------------------------*/

.btn-light{

    background:var(--button-light-bg);

    border-color:var(--button-light-border);

    color:var(--button-light-color);

}

.btn-light:hover{

    background:var(--button-light-hover);

    border-color:var(--button-light-hover);

    color:var(--surface);

}

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

.btn-success{

    background:var(--button-success-bg);

    border-color:var(--button-success-bg);

    color:var(--surface);

}

.btn-success:hover{

    background:var(--button-success-hover);

    border-color:var(--button-success-hover);

}

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

.btn-outline{

    background:transparent;

    border-color:var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:var(--surface);

}

/*--------------------------------------
 Block
--------------------------------------*/

.btn-block{

    display:flex;

    width:100%;

}

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

.btn-sm{

    min-height:40px;

    padding:10px 18px;

    font-size:var(--font-size-sm);

}

.btn-lg{

    min-height:56px;

    padding:16px 32px;

    font-size:var(--font-size-lg);

}

/*--------------------------------------
 Responsive
--------------------------------------*/

@media (max-width:768px){

    .btn{

        width:100%;

    }

}