/**
 * CF Builder Shortcode Block Styles
 *
 * Provides centering and responsive styling for WordPress shortcode output
 */

/* Block wrapper spacing */
.cf-block-shortcode {
    margin: 2rem auto;
}

/* Centered container for shortcode output */
.cf-shortcode-block-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
}

/* Center child elements (social feeds, forms, etc.) */
.cf-shortcode-block-content > * {
    margin-left: auto;
    margin-right: auto;
}

/* Ensure shortcode output is responsive */
.cf-shortcode-block-content iframe,
.cf-shortcode-block-content img {
    max-width: 100%;
    height: auto;
}

/* Debug mode error styles */
.cf-shortcode-error {
    background: #fff5f5;
    border: 1px solid #fcc;
    padding: 1rem;
    border-radius: 4px;
    color: #c00;
    margin: 1rem 0;
}

/* Debug mode info container */
.cf-shortcode-debug {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
    font-family: monospace;
    font-size: 0.875rem;
}

/* Debug mode code blocks */
.cf-shortcode-debug code {
    background: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #ddd;
}

/* Debug mode pre blocks */
.cf-shortcode-debug pre {
    background: #fff;
    padding: 1rem;
    border-radius: 3px;
    border: 1px solid #ddd;
    overflow-x: auto;
    margin: 0.5rem 0;
}