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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 20px;

    min-height: 46px;

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;

    border: 2px solid transparent;
    border-radius: 6px;

    text-decoration: none;
    white-space: nowrap;

    transition: all .25s ease;

    cursor: pointer;
}

.btn span {
    transition: transform .25s ease;
}

.btn:hover span {
    transform: translateX(5px);
}


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

.btn-primary {
    color: var(--accent-color);

    background: var(--white);

    border-color: var(--accent-color);

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

.btn-primary:hover {
    color: var(--white);

    background: var(--accent-color);

    transform: translateY(-2px);

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

.btn-primary span {
    color: var(--accent-color);
}

.btn-primary:hover span {
    color: var(--white);
}


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

.btn-secondary {
    color: var(--primary-color);

    background: transparent;

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

.btn-secondary:hover {
    color: var(--white);

    background: var(--primary-color);

    transform: translateY(-2px);

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


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

.btn-outline-light {
    color: var(--white);

    background: transparent;

    border-color: var(--white);
}

.btn-outline-light:hover {
    color: var(--primary-color);

    background: var(--white);

    transform: translateY(-2px);
}


/* ==================================================
   FULL WIDTH
================================================== */

.btn-block {
    width: 100%;
}