/* ===========================================
   Button Components
   Extends Bootstrap buttons
   =========================================== */

/* Button with icon */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Button sizes */
.btn-xl {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Arrow button (icon appears on hover) */
.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-arrow .bi {
    transition: transform 0.2s ease;
}

.btn-arrow:hover .bi {
    transform: translateX(4px);
}

/* Ghost button (transparent with border) */
.btn-ghost {
    background-color: transparent;
    border: 1px solid currentColor;
}

.btn-ghost:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* White button (for dark backgrounds) */
.btn-white {
    background-color: #fff;
    color: var(--bs-dark);
    border: none;
}

.btn-white:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--bs-dark);
}