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

.btn-primary,
.btn-secondary,
.btn-outline{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:18px 34px;

    border-radius:999px;

    font-size:16px;
    font-weight:700;

    transition:all var(--transition);

    cursor:pointer;

    position:relative;

    overflow:hidden;

}

/* ===========================================
   BOTÃO PRINCIPAL
=========================================== */

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:var(--white);

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

}

.btn-primary:hover{

    transform:translateY(-3px);

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

}

/* ===========================================
   BOTÃO SECUNDÁRIO
=========================================== */

.btn-secondary{

    background:var(--white);

    color:var(--primary);

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

}

.btn-secondary:hover{

    background:var(--background-alt);

}

/* ===========================================
   BOTÃO OUTLINE
=========================================== */

.btn-outline{

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

    color:white;

    backdrop-filter:blur(14px);

}

.btn-outline:hover{

    background:white;

    color:var(--primary);

}

/* ===========================================
   TAMANHOS
=========================================== */

.btn-sm{

    padding:12px 22px;

    font-size:14px;

}

.btn-lg{

    padding:22px 42px;

    font-size:18px;

}

/* ===========================================
   FOCUS
=========================================== */

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible{

    outline:3px solid var(--accent);

    outline-offset:4px;

}