.swp-cta-container {
    /* text-align is now set by block attribute */
    overflow: hidden;
}

.swp-cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    font-weight: bold;
    color: inherit;
}

.swp-cta-content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    color: inherit;
}

.swp-cta-buttons {
    display: flex;
    /* justify-content will be controlled by text-align of parent or inline styles if needed */
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.swp-cta-button {
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.swp-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.swp-cta-arrow {
    margin-left: 8px;
}

.swp-cta-button-secondary {
    border: 2px solid currentColor;
    color: inherit;
    background-color: transparent;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    justify-content: center;
    padding: 0;
}

.swp-cta-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* Styles for CTA with side image */
.swp-cta-container.has-image {
    display: flex;
    align-items: center; /* Vertically align items in the center */
    gap: 20px; /* Space between image and content */
}

.swp-cta-container.has-image.image-position-right {
    flex-direction: row-reverse; /* Image on the right */
}

.swp-cta-image-column {
    flex: 1 1 auto; /* Grow/shrink enabled, basis is set inline via PHP */
    /* Consider min-width: 0; if content within causes overflow issues */
}

.swp-cta-content-column {
    flex: 1 1 auto; /* Grow/shrink enabled, basis is set inline via PHP */
    /* Consider min-width: 0; if content within causes overflow issues */
}

.swp-cta-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: if you want rounded corners on the image */
}

/* Styles for CTA with cover image */
.swp-cta-container.has-cover-image {
    position: relative; /* For potential overlay or z-index management */
    /* background-image, background-size, background-position are set inline via PHP */
    padding: 40px 20px; /* Ensure padding so text is visible */
    /* Consider adding a pseudo-element for an overlay if text readability is an issue */
}

.swp-cta-container.has-cover-image .swp-cta-content-column {
    position: relative; /* To ensure content is above any pseudo-element overlay */
    z-index: 1;
    width: 100%; /* Ensure content column takes full width inside cover */
}

/* Responsive adjustments for side images */
@media (max-width: 768px) {
    /* Default stacking behavior for mobile */
    .swp-cta-container.has-image:not(.swp-cta-no-mobile-stack) {
        flex-direction: column;
    }

    .swp-cta-container.has-image.image-position-right:not(.swp-cta-no-mobile-stack) {
        flex-direction: column; /* Ensure stacking even if right-aligned */
    }

    .swp-cta-container.has-image:not(.swp-cta-no-mobile-stack) .swp-cta-image-column,
    .swp-cta-container.has-image:not(.swp-cta-no-mobile-stack) .swp-cta-content-column {
        flex-basis: 100% !important; /* Override inline style for stacking, ensure full width */
        max-width: 100%;
    }

    .swp-cta-container.has-image:not(.swp-cta-no-mobile-stack) .swp-cta-image-column {
        margin-bottom: 20px; /* Space below image when stacked */
        margin-right: 0; /* Remove right margin if image was on left */
    }

    /* If .swp-cta-no-mobile-stack is present, the desktop flex-basis (set inline) will apply. 
       We might still want to adjust gaps or other properties for smaller screens if not stacking. 
       For example, to reduce the gap on mobile when not stacking: 
       .swp-cta-container.has-image.swp-cta-no-mobile-stack {
           gap: 10px; 
       }
    */

    /* Hide on mobile if class is present */
    .swp-cta-image-column.swp-cta-image-hide-on-mobile {
        display: none !important;
    }

    .swp-cta-container.swp-cta-image-is-hidden-on-mobile.swp-cta-no-mobile-stack .swp-cta-content-column {
        flex-basis: 100% !important;
        width: 100% !important; /* Ensure it takes full width */
        margin-left: 0; /* Reset any margins if image was on left */
        margin-right: 0; /* Reset any margins if image was on right */
    }
} /* Closes @media (max-width: 768px) */

/* justify-content for .swp-cta-buttons is now handled by inline style in PHP based on text-align attribute, so no specific rule is needed here for responsive stacking. */