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

/* Base Button */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:all .3s ease;

    text-decoration:none;

    border:2px solid transparent;

    white-space:nowrap;

}

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

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

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

}

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

.btn-secondary{

    background:var(--secondary);

    color:#fff;

}

.btn-secondary:hover{

    background:var(--secondary-light);

    transform:translateY(-2px);

}

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

.btn-outline{

    background:#fff;

    border-color:var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/* ==========================================
   Light
========================================== */

.btn-light{

    background:var(--primary-light);

    color:var(--primary-dark);

}

.btn-light:hover{

    background:#D8FFFA;

}

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

.btn-block{

    width:100%;

}

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

.btn-sm{

    padding:10px 20px;

    font-size:14px;

}

.btn-lg{

    padding:18px 34px;

    font-size:18px;

}

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

.btn:disabled{

    opacity:.6;

    cursor:not-allowed;

}