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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 26px;

    min-height:46px;

    border:2px solid transparent;

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

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

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

    font-weight:var(--fw-semibold);

    text-decoration:none;

    cursor:pointer;

    transition:var(--transition);

    white-space:nowrap;

}

/*==================================
    PRIMARY
==================================*/

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

    color:var(--title);

}

.btn-primary:hover{

    background:var(--primary-dark);

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

    color:var(--white);

    transform:translateY(-2px);

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

}

/*==================================
    SECONDARY
==================================*/

.btn-secondary{

    background:var(--secondary);

    border-color:var(--secondary);

    color:var(--white);

}

.btn-secondary:hover{

    background:var(--secondary-dark);

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

    color:var(--white);

    transform:translateY(-2px);

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

}

/*==================================
    OUTLINE LIGHT
==================================*/

.btn-outline-light{

    background:transparent;

    border-color:rgba(255,255,255,.35);

    color:var(--white);

    backdrop-filter:blur(8px);

}

.btn-outline-light:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:var(--title);

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

}

/*==================================
    OUTLINE PRIMARY
==================================*/

.btn-outline-primary{

    background:transparent;

    border-color:var(--primary);

    color:var(--primary);

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:var(--title);

}

/*==================================
    SIZES
==================================*/

.btn-sm{

    padding:10px 22px;

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

}

.btn-lg{

    padding:15px 34px;

    min-height:52px;

    font-size:var(--fs-md);

}

/*==================================
    ICON
==================================*/

.btn i{

    transition:var(--transition);

}

.btn:hover i{

    transform:translateX(4px);

}

/*==================================
    DISABLED
==================================*/

.btn:disabled,
.btn.disabled{

    opacity:.6;

    cursor:not-allowed;

    pointer-events:none;

}

/*==================================
    RESPONSIVE
==================================*/

@media(max-width:768px){

    .btn{

        padding:12px 24px;

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

    }

}