/**
 * ALO Button Element Styles
 */

.alo-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    /* High specificity wrapper to override Publisher theme */
    box-sizing: border-box;
}

/* Solid variant - uses CSS custom property for dynamic color */
.alo-btn--solid {
    background-color: var(--alo-btn-bg, #0080ce) !important;
}

.alo-btn--solid:hover {
    background-color: color-mix(in oklch, var(--alo-btn-bg, #0080ce), black 15%) !important;
    transform: scale(1.03);
}

.alo-btn--solid:active {
    transform: scale(0.98);
}

/* Gradient variant - left-to-right gradient with darker right */
.alo-btn--gradient {
    background: linear-gradient(to right, var(--alo-btn-bg, #0080ce), color-mix(in oklch, var(--alo-btn-bg, #0080ce), black 20%)) !important;
}

.alo-btn--gradient:hover {
    background: linear-gradient(to right, color-mix(in oklch, var(--alo-btn-bg, #0080ce), black 5%), color-mix(in oklch, var(--alo-btn-bg, #0080ce), black 25%)) !important;
    transform: scale(1.03);
}

.alo-btn--gradient:active {
    transform: scale(0.98);
}

/* Focus state for keyboard accessibility */
.alo-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .alo-btn {
        transition: none;
    }

    .alo-btn:hover,
    .alo-btn:active {
        transform: none;
    }
}

.wpb_el_type_alo_media_url {
    display: none;
}