/* Button specific styles extracted from styles.css */
.category-btn {
    background: var(--white);
    border: 2px solid var(--light-gray);
    color: var(--dark);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.category-btn.active, .category-btn:hover {
    background: var(--magic-gradient);
    color: var(--white);
    border-color: transparent;
}

.carousel-arrow {
    background: var(--white);
    border: none;
    color: var(--primary);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 5;
}

.carousel-arrow:hover {
    background: var(--primary);
    color: var(--white);
}

/* Additional button styles */
.call-btn {
    background: var(--white);
    color: var(--primary);
}

.call-btn:hover {
    background: var(--light);
}

.invoke-button {
    color: var(--primary) !important; /* Purple text for better visibility */
    background: var(--white);
}

.close-btn, .close-modal {
    color: var(--gray);
}

button {
    color: var(--dark);
}

/* Ensuring all buttons in specific contexts have white text */
.modal-buttons .cta-button,
.fleet-card .cta-button,
#booking-form .cta-button,
.contact-cta .cta-button,
.pricing-note .cta-button {
    color: var(--white);
}