.ez-button {
    border-radius: 35px;
    border: 0;
    font-size: 18px;
    transition: background-color 0.3s;
    display: flex;
    flex-direction: row;
    cursor: pointer;    
}

.ez-button * {
    cursor: pointer;
}

.ez-button.circle {
    border-radius: 100%;
    padding: 5px;
}

.ez-button.orange {
    background-color: var(--button-orange-color);
    color: var(--white-color);
}

.ez-button.orange.disabled {
    background-color: var(--button-orange-hover-color);
    pointer-events: none;
}

.ez-button.orange:hover {
    background-color: var(--button-orange-hover-color);
}

.ez-button.light {
    background-color: var(--button-light-color);
    color: var(--foreground);
}

.ez-button.light.disabled {
    background-color: var(--button-light-hover-color);
    pointer-events: none;
}

.ez-button.light:hover {
    background-color: var(--button-light-hover-color);
}

.ez-button.lg {
    padding: 15px 45px;
}

.ez-button.md {
    padding: 13px 30px;
}

.ez-button.sm {
    padding: 10px 25px;
    font-size: 15px;
}

.ez-button.xs {
    padding: 5px 20px;
    font-size: 12px;
}

/* Responsive Button Styles */
@media (max-width: 780px) {
    .ez-button {
        font-size: 16px;
        min-height: 44px; /* Touch-friendly minimum height */
    }
    
    .ez-button.lg {
        padding: 12px 36px;
    }
    
    .ez-button.md {
        padding: 10px 24px;
    }
    
    .ez-button.sm {
        padding: 8px 20px;
        font-size: 14px;
    }
}

@media (max-width: 550px) {
    .ez-button {
        font-size: 14px;
    }
    
    .ez-button.lg {
        padding: 12px 32px;
    }
}