/* Enhanced Button Block - Frontend Styles */

/* Remove the problematic wrapper margin that causes spacing issues */
.wp-block-dbp-templates-enhanced-button {
    /* No margin - let Gutenberg handle spacing */
}

/* WordPress Native Alignment Support */
.wp-block-dbp-templates-enhanced-button.alignleft {
    text-align: left !important;
}

.wp-block-dbp-templates-enhanced-button.aligncenter {
    text-align: center !important;
}

.wp-block-dbp-templates-enhanced-button.alignright {
    text-align: right !important;
}

.wp-block-dbp-templates-enhanced-button .dbp-enhanced-button {
    font-family: inherit;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    vertical-align: top;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.wp-block-dbp-templates-enhanced-button .dbp-enhanced-button:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
    text-decoration: none !important;
}

.wp-block-dbp-templates-enhanced-button .dbp-button-primary-text {
    font-weight: 600;
    display: block;
    line-height: 1.2;
    margin: 0;
}

.wp-block-dbp-templates-enhanced-button .dbp-button-secondary-text {
    opacity: 0.9;
    font-weight: 400;
    display: block;
    line-height: 1.2;
    margin: 0;
    margin-top: 2px;
}

/* Responsive Styles - Remove problematic mobile overrides */
@media (max-width: 768px) {
    .wp-block-dbp-templates-enhanced-button .dbp-enhanced-button {
        /* Remove min-width: 100% that breaks column layouts */
        /* Remove forced text-align: center */
        /* Remove forced padding overrides */
    }
    
    /* Only apply font-size adjustments if needed */
    .wp-block-dbp-templates-enhanced-button .dbp-button-primary-text {
        font-size: 16px !important;
    }
    
    .wp-block-dbp-templates-enhanced-button .dbp-button-secondary-text {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .wp-block-dbp-templates-enhanced-button .dbp-button-primary-text {
        font-size: 14px !important;
    }
    
    .wp-block-dbp-templates-enhanced-button .dbp-button-secondary-text {
        font-size: 12px !important;
    }
}

/* Accessibility Improvements */
.wp-block-dbp-templates-enhanced-button .dbp-enhanced-button:focus-visible {
    outline: 3px solid #007cba;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .wp-block-dbp-templates-enhanced-button .dbp-enhanced-button {
        background-color: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #ccc !important;
    }
    
    .wp-block-dbp-templates-enhanced-button .dbp-button-primary-text,
    .wp-block-dbp-templates-enhanced-button .dbp-button-secondary-text {
        color: #000 !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .wp-block-dbp-templates-enhanced-button .dbp-enhanced-button {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .wp-block-dbp-templates-enhanced-button .dbp-enhanced-button {
        transition: none;
    }
    
    .wp-block-dbp-templates-enhanced-button .dbp-enhanced-button:hover {
        transform: none;
    }
    
    .wp-block-dbp-templates-enhanced-button .dbp-enhanced-button:active {
        transform: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .wp-block-dbp-templates-enhanced-button .dbp-enhanced-button {
        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    }
    
    .wp-block-dbp-templates-enhanced-button .dbp-enhanced-button:hover {
        box-shadow: 0 6px 12px rgba(255, 255, 255, 0.15);
    }
}

/* Icon Styles */
.wp-block-dbp-templates-enhanced-button .dbp-enhanced-button .dbp-button-icon-before,
.wp-block-dbp-templates-enhanced-button .dbp-enhanced-button .dbp-button-icon-after {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.wp-block-dbp-templates-enhanced-button .dbp-enhanced-button .dbp-button-text-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
}

.wp-block-dbp-templates-enhanced-button .dbp-enhanced-button i {
    font-size: inherit;
    line-height: 1;
    display: inline-block;
}