/**
 * Betformatics Button Shortcode Styles
 *
 * Dependencies: betformatics-variables (loaded via PHP)
 *
 * @package Betformatics
 * @subpackage Assets/CSS
 */

.bf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bf-btn-padding-y) var(--bf-btn-padding-x);
    margin: var(--bf-spacing-xs) 0;
    background-color: var(--bf-primary);
    color: var(--bf-white) !important;
    font-size: var(--bf-font-size-base);
    font-weight: var(--bf-font-weight-semibold);
    text-decoration: none !important;
    text-align: center;
    border-radius: var(--bf-radius-base);
    border: none;
    cursor: pointer;
    transition: background-color var(--bf-transition-base), transform var(--bf-transition-base), box-shadow var(--bf-transition-base);
    box-shadow: var(--bf-shadow-primary);
}

.bf-button:hover {
    background-color: var(--bf-primary-hover);
    color: var(--bf-white) !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: var(--bf-shadow-primary-hover);
}

.bf-button:active {
    transform: translateY(0);
    box-shadow: var(--bf-shadow-primary);
}

.bf-button:visited,
.bf-button:focus {
    color: var(--bf-white) !important;
}

.bf-button:focus {
    outline: 2px solid var(--bf-primary);
    outline-offset: 2px;
}

.bf-button:focus:not(:focus-visible) {
    outline: none;
}

.bf-button:focus-visible {
    outline: 2px solid var(--bf-primary);
    outline-offset: 2px;
}

/* Icon */
.bf-button-icon {
    flex-shrink: 0;
    margin-left: var(--bf-spacing-sm);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .bf-button {
        transition: none;
    }

    .bf-button:hover {
        transform: none;
    }
}