/* Modern Button Widget Styles */
.bbw-modern-button {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    outline: none;
    font-family: inherit;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.bbw-modern-button .bbw-button-text {
    position: relative;
    z-index: 2;
    display: block;
    transition: all 0.3s ease;
}

/* Text Animation */
.bbw-modern-button.text-animation-enabled:hover .bbw-button-text {
    transform: translateY(var(--animation-distance, -2px));
    letter-spacing: var(--letter-spacing-hover, 0.5px);
}

/* Ripple Effect */
.bbw-modern-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--ripple-color, rgba(255, 255, 255, 0.3));
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: 0;
    pointer-events: none;
}

.bbw-modern-button:hover::before {
    width: var(--ripple-size, 300px);
    height: var(--ripple-size, 300px);
}

/* Primary Button Style */
.bbw-modern-button.style-primary {
    background: var(--bg-color, #007cba);
    color: var(--text-color, #ffffff);
    border: 2px solid var(--border-color, #007cba);
    border-radius: var(--border-radius, 4px);
    padding: var(--padding-top, 12px) var(--padding-right, 24px) var(--padding-bottom, 12px) var(--padding-left, 24px);
}

.bbw-modern-button.style-primary:hover {
    color: var(--text-color-hover, #ffffff);
    background: var(--bg-color-hover, #005a87);
}

/* Modern Squares Button Style */
.bbw-modern-button.style-modern-squares {
    background: var(--bg-color, #007cba);
    color: var(--text-color, #ffffff);
    border: 2px solid var(--border-color, #007cba);
    padding: var(--padding-top, 12px) var(--padding-right, 24px) var(--padding-bottom, 12px) var(--padding-left, 24px);
    position: relative;
}

.bbw-modern-button.style-modern-squares:hover {
    color: var(--text-color-hover, #ffffff);
    background: var(--bg-color-hover, #005a87);
}

/* Modern Squares Outline Button Style */
.bbw-modern-button.style-modern-squares-outline {
    background: transparent;
    color: var(--text-color, #007cba);
    border: 2px solid var(--border-color, #007cba);
    padding: var(--padding-top, 12px) var(--padding-right, 24px) var(--padding-bottom, 12px) var(--padding-left, 24px);
    position: relative;
}

.bbw-modern-button.style-modern-squares-outline:hover {
    color: var(--text-color-hover, #ffffff);
    background: var(--bg-color-hover, #007cba);
}

/* Corner Squares */
.bbw-modern-button .corner-square {
    position: absolute;
    width: var(--square-size, 12px);
    height: var(--square-size, 12px);
    background: var(--square-color, #ffffff);
    transition: all 0.3s ease;
    z-index: 3;
}

.bbw-modern-button .corner-square.top-left {
    top: var(--square-offset, 12px);
    left: var(--square-offset, 12px);
}

.bbw-modern-button .corner-square.top-right {
    top: var(--square-offset, 12px);
    right: var(--square-offset, 12px);
}

.bbw-modern-button .corner-square.bottom-left {
    bottom: var(--square-offset, 12px);
    left: var(--square-offset, 12px);
}

.bbw-modern-button .corner-square.bottom-right {
    bottom: var(--square-offset, 12px);
    right: var(--square-offset, 12px);
}

.bbw-modern-button:hover .corner-square {
    background: var(--square-color-hover, #ffffff);
}

/* Icon styles */
.bbw-modern-button .bbw-button-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    font-size: var(--icon-size, 16px);
    color: var(--icon-color, inherit);
    transition: color 0.3s ease;
}

.bbw-modern-button:hover .bbw-button-icon {
    color: var(--icon-color-hover, inherit);
}

.bbw-modern-button .bbw-button-icon.bbw-icon-left {
    margin-right: var(--icon-spacing, 8px);
}

.bbw-modern-button .bbw-button-icon.bbw-icon-right {
    margin-left: var(--icon-spacing, 8px);
}

/* Icon size and color styling - targeting actual icon elements */
.bbw-modern-button .bbw-button-icon i,
.bbw-modern-button .bbw-button-icon svg {
    transform: none !important;
    font-size: var(--icon-size, 16px);
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
    color: var(--icon-color, inherit);
    fill: var(--icon-color, currentColor);
    transition: color 0.3s ease, fill 0.3s ease;
}

/* Icon hover colors - targeting actual icon elements */
.bbw-modern-button:hover .bbw-button-icon i,
.bbw-modern-button:hover .bbw-button-icon svg {
    color: var(--icon-color-hover, inherit);
    fill: var(--icon-color-hover, currentColor);
}

/* Ensure SVG paths inherit the color */
.bbw-modern-button .bbw-button-icon svg path {
    fill: inherit;
    transition: fill 0.3s ease;
}

.bbw-modern-button .bbw-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bbw-modern-button {
        font-size: 14px;
    }
    
    .bbw-modern-button .corner-square {
        width: calc(var(--square-size, 12px) * 0.8);
        height: calc(var(--square-size, 12px) * 0.8);
    }
}

@media (max-width: 480px) {
    .bbw-modern-button {
        font-size: 12px;
    }
    
    .bbw-modern-button .corner-square {
        width: calc(var(--square-size, 12px) * 0.6);
        height: calc(var(--square-size, 12px) * 0.6);
    }
}