/* Button with Icon Block Styles */
.wp-block-soaf-button-with-icon {
    margin: 0.5rem 0;
    background: transparent !important; /* Override any WordPress color classes */
    color: inherit !important; /* Override any WordPress color classes */
    display: flex; /* Use flexbox for modern alignment */
    flex-direction: column; /* Stack elements vertically */
}

/* Reset any WordPress-applied color classes on the wrapper */
.wp-block-soaf-button-with-icon[class*="has-background"],
.wp-block-soaf-button-with-icon[class*="has-text-color"] {
    background: transparent !important;
    color: inherit !important;
}

.wp-block-soaf-button-with-icon .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    width: auto !important; /* Ensure button doesn't stretch full width */
    max-width: fit-content; /* Only take space needed */
    /* Colors, padding, borders are now handled by inline styles */
    /* Hover effects are inherited from .wp-block-button__link:hover in custom.css */
}

/* Remove custom hover effects to use standard button hover from custom.css */
.wp-block-soaf-button-with-icon .wp-block-button__link:hover {
    /* All hover effects removed - will inherit from .wp-block-button__link:hover */
}

.wp-block-soaf-button-with-icon .wp-block-button__link img {
    flex-shrink: 0;
    max-width: none;
    border: none;
    box-shadow: none;
}

/* Custom button styling classes */
.btn-primary-with-icon {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
    border: none !important;
}

.btn-primary-with-icon:hover {
    background-color: var(--wp--preset--color--btn) !important;
    color: var(--wp--preset--color--white) !important;
}

.btn-secondary-with-icon {
    background-color: var(--wp--preset--color--secondary) !important;
    color: var(--wp--preset--color--white) !important;
    border: none !important;
}

.btn-secondary-with-icon:hover {
    background-color: var(--wp--preset--color--dark) !important;
    color: var(--wp--preset--color--white) !important;
}

.btn-outline-with-icon {
    background-color: transparent !important;
    color: var(--wp--preset--color--primary) !important;
    border: 2px solid var(--wp--preset--color--primary) !important;
}

.btn-outline-with-icon:hover {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
}

.btn-light-with-icon {
    background-color: var(--wp--preset--color--light) !important;
    color: var(--wp--preset--color--dark) !important;
    border: none !important;
}

.btn-light-with-icon:hover {
    background-color: #e5e7eb !important;
    color: var(--wp--preset--color--dark) !important;
}

.btn-dark-with-icon {
    background-color: var(--wp--preset--color--dark) !important;
    color: var(--wp--preset--color--white) !important;
    border: none !important;
}

.btn-dark-with-icon:hover {
    background-color: #1f2937 !important;
    color: var(--wp--preset--color--white) !important;
}

/* Size variations */
.btn-small {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
}

.btn-large {
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
}

/* Shape variations */
.btn-rounded {
    border-radius: 9999px !important;
}

.btn-square {
    border-radius: 0 !important;
}

/* Width variations */
.btn-full-width {
    width: 100% !important;
    justify-content: center !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-block-soaf-button-with-icon .wp-block-button__link {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .wp-block-soaf-button-with-icon .wp-block-button__link img {
        max-width: 18px;
        max-height: 18px;
    }

    .btn-full-width-mobile {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Modern flexbox-based alignment */
.wp-block-soaf-button-with-icon.has-text-align-left,
.wp-block-soaf-button-with-icon.alignleft {
    align-items: flex-start;
}

.wp-block-soaf-button-with-icon.has-text-align-center,
.wp-block-soaf-button-with-icon.aligncenter {
    align-items: center;
}

.wp-block-soaf-button-with-icon.has-text-align-right,
.wp-block-soaf-button-with-icon.alignright {
    align-items: flex-end;
}