/*
====================================================
Flipper AI
Buttons
====================================================
*/

.btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;

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

    font-family: var(--font-family);
    font-size: var(--font-md);
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: all var(--transition-normal);

    border: none;

    user-select: none;

}

.btn:hover {

    transform: translateY(-2px);

}

.btn:active {

    transform: translateY(0);

}

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

.btn-primary {

    background: var(--primary);

    color: white;

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

}

.btn-primary:hover {

    background: var(--primary-hover);

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

}

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

.btn-secondary {

    background: white;

    color: var(--text);

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

}

.btn-secondary:hover {

    background: var(--surface-light);

}

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

@media (max-width:768px){

    .btn{

        width:100%;

    }

}