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

.btn-primary-custom,
.btn-secondary-custom,
.btn-outline-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 16px 34px;
    border-radius: var(--radius-round);
    font-size: var(--font-size-base);
    font-weight: var(--fw-semibold);
    transition: var(--transition);
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

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

.btn-primary-custom {
    background: var(--color-accent);
    color: white;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
}
    .btn-primary-custom::before {
        content: "";
        position: absolute;
        width: 0;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(255,255,255,.15);
        transition: .35s;
    }

    .btn-primary-custom:hover::before {
        width: 100%;
    }
    .btn-primary-custom:hover {
        background: var(--color-accent-hover);
        color: white;
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }

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

.btn-secondary-custom {
    background: white;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}

    .btn-secondary-custom:hover {
        background: var(--color-surface-alt);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

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

.btn-outline-custom {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,.35);
}

    .btn-outline-custom:hover {
        background: white;
        color: var(--color-primary);
        border-color: white;
    }

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

.btn-sm {
    padding: 10px 20px;
    font-size: .9rem;
}

.btn-lg {
    padding: 20px 42px;
    font-size: 1.1rem;
}

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

.btn-primary-custom i,
.btn-secondary-custom i,
.btn-outline-custom i {
    transition: var(--transition);
}

.btn-primary-custom:hover i,
.btn-secondary-custom:hover i,
.btn-outline-custom:hover i {
    transform: translateX(5px);
}