/* SP Public Popup Styles */
#sp-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99998; /* Below popup, above content */
    display: none; /* Hidden by default */
}

#sp-popup-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent; /* Make the main wrap transparent */
    color: #333333; /* Default text color for the entire popup wrap */
    padding: 0; /* REMOVED padding from wrap, will be applied to content column */
    border-radius: 0; /* Removed rounded corners */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    width: 90%;
    max-width: 800px; /* Increased max-width for two-column layout */
    box-sizing: border-box;
    text-align: left; /* Default alignment, content column will manage its own */
    display: none; /* Hidden by default */
    /* overflow: hidden; */ /* May not be needed without border-radius, review if shadow is clipped */
    max-height: 90vh; /* Max height to prevent overflow on small screens */
}

#sp-popup-inner {
    display: flex;
    width: 100%;
    height: 100%; /* Allow columns to stretch if wrap has fixed height or for align-items:stretch */
    background-color: transparent; /* Ensure inner flex container is also transparent */
    overflow-y: auto; /* Scrollbar appears on inner if content overflows */
}

.sp-popup-image-column {
    flex: 0 0 33%; /* Image column takes 33% of width, doesn't grow or shrink */
    position: relative;
    background-color: transparent; /* Ensure image column is transparent */
    line-height: 0; /* Attempt to remove any potential small gaps around the image */
}

.sp-popup-image-column img.sp-popup-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
}

.sp-popup-content-column {
    flex: 1 1 67%; /* Content column takes remaining 67%, can grow/shrink */
    background-color: #ffffff; /* Default background for the content column */
    padding: 30px; /* Padding for the content area */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content in this column */
    overflow-y: auto; /* If content here is too long, it scrolls */
}

#sp-popup-wrap.sp-popup-visible,
#sp-popup-overlay.sp-popup-visible {
    display: block;
}

#sp-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 5px; /* Added some padding for easier clicking */
    z-index: 10; /* Ensure close button is above columns */
    outline: none; /* Remove focus outline/border */
}
#sp-popup-close:hover {
    color: #333;
}

#sp-popup-inner h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 2rem; /* Slightly adjusted */
    font-weight: 600;
}

/* This style is now more specific within .gocp-popup-image-column */
/* #sp-popup-inner img.sp-popup-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 4px;
} */

#sp-popup-inner .sp-popup-content-text {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.6;
}
#sp-popup-inner .sp-popup-content-text p:last-child {
    margin-bottom: 0;
}


#sp-optin-form input[type="email"],
#sp-optin-form button[type="submit"] { /* Added button here for 100% width */
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    display: block; /* Ensure button is block-level for 100% width */
}

#sp-optin-form button[type="submit"] {
    background-color: #000000; /* Black background */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

#sp-optin-form button[type="submit"]:hover {
    background-color: #333333; /* Slightly lighter black on hover */
}
#sp-optin-form button[type="submit"]:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}


#sp-popup-message {
    margin-top: 15px;
    font-size: 14px;
}

#sp-popup-message .success-message {
    color: green;
    font-weight: bold;
}

#sp-popup-message .error-message {
    color: red;
    font-weight: bold;
}

.sp-terms-conditions {
    margin-top: 15px; /* Space above the terms */
    font-size: 0.8em; /* Small text */
    line-height: 1.4; /* Readability */
    color: #666666; /* A slightly muted color, adjust as needed */
    text-align: left; /* Or 'center' if you prefer */
}

/* Handle cases where image column might be empty (no image URL provided) */
.sp-popup-image-column:empty {
    display: none;
}
.sp-popup-image-column:empty + .sp-popup-content-column {
    flex-basis: 100%; /* Content column takes full width if no image */
}


/* Responsive adjustments */
@media (max-width: 768px) { /* Adjusted breakpoint for tablets */
    #sp-popup-wrap {
        width: 95%;
        max-width: 500px; /* Revert to smaller max-width for single column */
        text-align: center; /* Center align text for the wrap on mobile */
    }
    #gocp-popup-inner {
        flex-direction: column; /* Stack columns vertically */
    }

    .sp-popup-image-column {
        display: none; /* Hide image column on mobile */
    }

    .sp-popup-content-column {
        flex-basis: auto; /* Allow content to determine height */
        padding: 25px; /* Slightly reduced padding for mobile */
        justify-content: flex-start; /* Align content to top on mobile */
        text-align: center; /* Center text within the content column on mobile */
    }

    #sp-popup-inner h2 {
        font-size: 20px;
    }
    #sp-popup-inner .sp-popup-content-text {
        font-size: 15px;
    }
}

/* Styles for the CTA button in the content area (applies to both custom CTA and text-based Close) */
.sp-cta-button {
    display: block; /* Or inline-block if you prefer */
    width: auto; /* Or 100% if you want it full-width */
    margin: 20px auto 0; /* Center it if auto width, provide top margin */
    padding: 10px 20px;
    font-size: 16px;
    border: 1px solid transparent; /* Default border, can be overridden by dynamic styles */
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    /* Default colors will be overridden by CPT settings if provided */
    background-color: #f0f0f0; 
    color: #333;
    text-decoration: none; /* Ensure <a> tags styled as buttons don't have underlines */
}

/* Generic hover for any CTA button in the content */
.sp-cta-button:hover {
    opacity: 0.9;
}