/* Popup Modal Styles */
.wsf-popup-modal {
    display: none; /* Hidden by default, shown by JS */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if content is too long */
}

.wsf-popup-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7); /* Dim background */
}

.wsf-popup-content {
    background-color: #000000; /* Black background */
    border: 5px solid #FFFFFF; /* White border */
    border-radius: 15px;      /* Rounded corners */
    color: #FFFFFF;           /* Default text color to white for content */
    padding: 25px;
    margin: 3% auto;          /* Slightly less margin top/bottom */
    width: 90%;
    max-width: 500px;         /* Adjusted max-width */
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Slightly stronger shadow for contrast */
    box-sizing: border-box;
    max-height: 90vh; /* Max height to prevent overflow */
    overflow-y: auto; /* Scroll inside content if it's too tall */
}

.wsf-popup-close {
    background-color: #FFFFFF; /* White background */
    color: #000000;           /* Black 'X' */
    border-radius: 50%;       /* Circular */
    border: 1px solid #000000;/* Optional black border */
    width: 30px;              /* Adjust size */
    height: 30px;             /* Adjust size */
    font-size: 20px;          /* Adjust 'X' size */
    font-weight: bold;
    line-height: 30px;        /* Center 'X' vertically */
    text-align: center;       /* Center 'X' horizontally */
    position: absolute;
    top: 15px;                /* Adjust position */
    right: 15px;              /* Adjust position */
    cursor: pointer;
    padding: 0; /* Remove any default padding */
}

.wsf-popup-close:hover,
.wsf-popup-close:focus {
    background-color: #f0f0f0; /* Slight hover effect */
    color: #000000;
    text-decoration: none;
}

.wsf-popup-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.wsf-popup-profile-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF; /* White border to pop against black */
}

.wsf-popup-salutation {
    background-color: #FFFFFF; /* White background */
    color: #000000;           /* Black text */
    padding: 8px 15px;        /* Padding */
    border-radius: 5px;       /* Rounded corners */
    font-size: 20px;          /* Adjust font size */
    font-weight: bold;
    margin: 0;                /* Remove default h2 margin if styling h2 */
    display: inline-block;    /* To make background fit text */
}

.wsf-popup-body {
    color: #FFFFFF; /* White text */
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.wsf-popup-body p {
    margin-bottom: 10px;
}

.wsf-popup-form-container {
    margin-bottom: 25px;
}

/* Styling for the form inside the popup - using existing classes but scoped if needed */
#wsf-popup-modal .wsf-signup-form {
    /* Default to stacked layout for popup, already handled in PHP */
}
#wsf-popup-modal .wsf-form-field input[type="text"],
#wsf-popup-modal .wsf-form-field input[type="email"] {
    background-color: #E0E0E0; /* Light gray background */
    border: 1px solid #D0D0D0; /* Slightly darker border */
    border-radius: 5px;       /* Slightly more rounded */
    color: #333333;           /* Dark gray text for input */
    padding: 10px 15px;
    height: 48px;
    font-size: 15px;
    line-height: normal; /* Reset line-height */
}

#wsf-popup-modal .wsf-form-field input::placeholder {
    color: #666666;
    opacity: 1; /* Firefox */
}

#wsf-popup-modal .wsf-submit-button {
    background-color: #C82333; /* Specific red from screenshot */
    color: #FFFFFF;           /* White text */
    border: none;
    border-radius: 5px;       /* Slightly more rounded */
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    height: 48px;             /* Match input field height */
    line-height: normal;      /* Remove fixed line-height if padding handles vertical centering */
}


/* Testimonials Section */
.wsf-popup-testimonials {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #444; /* Darker border for black background */
}

/* Container for avatar images if needed */
.wsf-popup-testimonials .avatar-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.wsf-popup-testimonials h3 { /* Assuming this title is not in the screenshot, or style if needed */
    font-size: 18px;
    color: #FFFFFF; /* White text if used */
    margin-bottom: 15px;
    text-align: center;
}

.wsf-testimonials-slider .wsf-testimonial-item {
    background-color: #FFFFFF; /* White background */
    color: #000000;           /* Black text */
    border-radius: 10px;      /* More rounded corners */
    padding: 20px;
    margin-bottom: 15px;
    text-align: left;         /* Screenshot text is left-aligned */
}

.wsf-testimonial-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0; /* Removed margin for inline display in avatar-row */
    border: 2px solid #707070; /* Dark grey border */
}

.wsf-testimonial-desc {
    color: #333333; /* Darker text */
    font-size: 15px;
    font-style: normal; /* Screenshot doesn't look italic */
    line-height: 1.6;
    margin-bottom: 10px;
}

.wsf-testimonial-desc::before {
    content: "\\201C"; /* Left double quotation mark */
    font-size: 28px;  /* Larger quotes */
    margin-right: 5px;
    color: #B0B0B0; /* Lighter gray for quotes */
}
.wsf-testimonial-desc::after {
    content: "\\201D"; /* Right double quotation mark */
    font-size: 28px;  /* Larger quotes */
    margin-left: 5px;
    color: #B0B0B0; /* Lighter gray for quotes */
}

.wsf-testimonial-author {
    background-color: #C82333; /* Red background */
    color: #FFFFFF;           /* White text */
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block; /* To make background fit */
    margin-top: 15px;
    font-size: 14px;
    font-weight: bold;
}

.wsf-testimonial-author .wsf-testimonial-post {
    font-weight: normal;
    color: #FFFFFF; /* Ensure this is also white */
    font-size: 13px;
    display: block; /* Or inline, depending on desired layout with name */
}

/* Body class when popup is open */
body.wsf-popup-open {
    overflow: hidden; /* Prevent background scroll when popup is open */
}

/* Dark mode for popup */
@media (prefers-color-scheme: dark) {
    /* Keeping dark mode for inputs and general text if not overridden by specific styles above */
    /* .wsf-popup-content specific dark mode background is removed to keep the black design */
    /*
    .wsf-popup-content {
        background-color: #2c2c2c; // This would override the #000000 if active
        border-color: #444;
    }
    */
    .wsf-popup-close:not(input) { /* Ensure our new close button style is not overridden too much */
        /* If close button has white bg, it might need adjustment for dark themes if not already handled */
        /* color: #888; // Original dark mode color for 'X' */
    }
    .wsf-popup-close:hover:not(input),
    .wsf-popup-close:focus:not(input) {
        /* color: #eee; // Original dark mode hover color for 'X' */
    }

    /* Text colors inside the black popup are already set to white, so they should be fine. */
    /* Testimonial item is now white, so its dark mode version needs to be considered if it should change */
    .wsf-testimonials-slider .wsf-testimonial-item {
        /* background-color: #3a3a3a; // Original dark mode for testimonial item */
        /* If testimonial item is now #FFFFFF, its text color is #000000, which is fine for dark mode too */
    }
    .wsf-testimonial-desc {
        /* color: #bbb; // Original dark mode for testimonial description */
    }
     .wsf-testimonial-desc::before,
     .wsf-testimonial-desc::after {
        /* color: #555; // Original dark mode for quotes */
    }
    /* Other dark mode styles for elements within the white testimonial box might need review */
    /* For example, if .wsf-testimonial-author was dark text on light bg, it's now white on red, which is fine. */

    /* The main popup background is now black, border white. This should be consistent. */
    /* Input fields have their own light gray background, should be fine. */
}