/* Global banner */
.probance-newsletter-banner .probance-newsletter-global[data-newsletter-name="banner"] {
    background-color: #f8f9fa; /* Light background color */
    padding: 2rem; /* Internal padding */
    border-radius: 0.5rem; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    margin: 2rem auto; /* Vertical spacing and centered */
    max-width: 900px; /* Maximum width */
}

/* Global class for popup named "My Popup Name" */
.probance-newsletter-popup .modal .probance-newsletter-global[data-newsletter-name="My Popup Name"] {
}

/* Centered content */
.probance-newsletter-popup .probance-newsletter-content,
.probance-newsletter-banner .probance-newsletter-content {
    max-width: 700px; /* Limit content width */
    margin: 0 auto; /* Center horizontally */
}

/* Title */
.probance-newsletter-popup .probance-newsletter-title,
.probance-newsletter-banner.probance-newsletter-title {
    font-size: 2rem; /* Title font size */
    font-weight: 600; /* Bold text */
    text-align: center; /* Center text */
    color: #cc5c44; /* Dark color */
    margin-bottom: 0px; /* Bottom margin, remove margin from title */
}

/* Subtitle/Description */
.probance-newsletter-popup .probance-newsletter-subtitle,
.probance-newsletter-banner.probance-newsletter-subtitle {
    font-size: 1.25rem; /* Subtitle font size */
    color: #6c757d; /* Grey color for subtitle */
    text-align: center; /* Center text */
    margin-bottom: 0.5rem; /* Bottom margin */
}

/* Gender form */
.probance-newsletter-popup .probance-newsletter-gender-form,
.probance-newsletter-banner.probance-newsletter-gender-form {
    margin-bottom: 0.5rem; /* Bottom margin */
    display: flex; /* Align label and select input horizontally */
    align-items: center;
    justify-content: flex-start; /* Align items to the left */
}

/* Gender label */
.probance-newsletter-popup .probance-newsletter-gender-label,
.probance-newsletter-banner.probance-newsletter-gender-label {
    font-size: 1rem; /* Label font size */
    color: #495057; /* Label color */
    margin-right: 0.5rem; /* Space between label and select */
}

/* Gender select input */
.probance-newsletter-popup .probance-newsletter-gender-select,
.probance-newsletter-banner.probance-newsletter-gender-select {
    font-size: 1rem; /* Font size */
    border: 1px solid #ced4da; /* Border */
    border-radius: 0.25rem; /* Rounded corners */
    width: auto; /* Adjust width to content */
    max-width: 200px; /* Maximum width for select input */
}

/* Name form */
.probance-newsletter-popup .probance-newsletter-name-form,
.probance-newsletter-banner.probance-newsletter-name-form {
    display: flex;
    gap: 1rem; /* Space between fields */
    flex-wrap: wrap; /* Add line if screen too small */
}
.probance-newsletter-popup .probance-newsletter-firstname-label,
.probance-newsletter-banner.probance-newsletter-firstname-label,
.probance-newsletter-popup .probance-newsletter-lastname-label,
.probance-newsletter-banner.probance-newsletter-lastname-label {
    font-size: 1rem; /* Label font size */
    color: #495057; /* Label color */
    align-self: center; /* Center label vertically */
}
.probance-newsletter-popup .probance-newsletter-firstname-input,
.probance-newsletter-banner.probance-newsletter-firstname-input,
.probance-newsletter-popup .probance-newsletter-lastname-input,
.probance-newsletter-banner.probance-newsletter-lastname-input {
    width: 100%; /* Full width */
    border: 1px solid #ced4da; /* Border */
    border-radius: 0.25rem; /* Rounded corners */
    font-size: 1rem; /* Font size */
    flex: 1; /* Flex-grow to fill space */
}

/* Birthdate form */
.probance-newsletter-popup .probance-newsletter-birthdate-form,
.probance-newsletter-banner.probance-newsletter-birthdate-form {
    margin-bottom: 0.5rem; /* Bottom margin */
}
.probance-newsletter-popup .probance-newsletter-birthdate-label,
.probance-newsletter-banner.probance-newsletter-birthdate-label {
    font-size: 1rem; /* Label font size */
    color: #495057; /* Label color */
}
.probance-newsletter-popup .probance-newsletter-birthdate-input,
.probance-newsletter-banner.probance-newsletter-birthdate-input {
    width: 100%; /* Full width */
    border: 1px solid #ced4da; /* Border */
    border-radius: 0.25rem; /* Rounded corners */
    font-size: 1rem; /* Font size */
}

/* Email form */
.probance-newsletter-popup .probance-newsletter-email-form,
.probance-newsletter-banner.probance-newsletter-email-form {
    margin-bottom: 0.5rem; /* Bottom margin */
}
.probance-newsletter-popup .probance-newsletter-email-label,
.probance-newsletter-banner.probance-newsletter-email-label {
    font-size: 1rem; /* Label font size */
    color: #495057; /* Label color */
}
.probance-newsletter-popup .probance-newsletter-email-input,
.probance-newsletter-banner.probance-newsletter-email-input {
    width: 100%; /* Full width */
    border: 1px solid #ced4da; /* Border */
    border-radius: 0.25rem; /* Rounded corners */
    font-size: 1rem; /* Font size */
}

/* Custom field form */
.probance-newsletter-popup .probance-newsletter-customfield-form,
.probance-newsletter-banner.probance-newsletter-customfield-form {
    margin-bottom: 0.5rem; /* Bottom margin */
}
.probance-newsletter-popup .probance-newsletter-customfield-label,
.probance-newsletter-banner.probance-newsletter-customfield-label {
    font-size: 1rem; /* Label font size */
    color: #495057; /* Label color */
}
.probance-newsletter-popup .probance-newsletter-customfield-input,
.probance-newsletter-banner.probance-newsletter-customfield-input {
    width: 100%; /* Full width */
    border: 1px solid #ced4da; /* Border */
    border-radius: 0.25rem; /* Rounded corners */
    font-size: 1rem; /* Font size */
}

/* Privacy Policy */
.probance-newsletter-popup .probance-newsletter-privacy-form,
.probance-newsletter-banner.probance-newsletter-privacy-form {
    /* margin-bottom: 0.5rem; /* Bottom margin */
}

.probance-newsletter-popup .probance-newsletter-privacy-label,
.probance-newsletter-banner.probance-newsletter-privacy-label {
    font-size: 0.7rem; /* Label font size */
    color: #495057; /* Label color */
}

/* Submit button */
.probance-newsletter-popup .probance-newsletter-submit-button,
.probance-newsletter-banner.probance-newsletter-submit-button {
    background-color: transparent !important; /* Primary background */
    border: 2px solid #c84125; /* No border */
    color: #c84125; /* Text color */
    font-size: 1rem; /* Font size */
    border-radius: 0.25rem; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease; /* Smooth transition */
    margin-top: 1rem; /* Space between the email input and the button */
    box-sizing: border-box;
    width: 100%;
    white-space: normal;
}
.probance-newsletter-popup .probance-newsletter-submit-button:hover,
.probance-newsletter-banner.probance-newsletter-submit-button:hover {
    background-color: #c84125; /* Darker background on hover */
    color: #c84125 !important;
}

/* Footer */
.probance-newsletter-popup .probance-newsletter-footer-content,
.probance-newsletter-banner.probance-newsletter-footer-content {
    text-align: center; /* Center the footer content */
    margin-top: 2rem; /* Top margin */
}
.probance-newsletter-popup .probance-newsletter-footer,
.probance-newsletter-banner.probance-newsletter-footer {
    font-size: 0.875rem; /* Footer text size */
    color: #6c757d; /* Grey color for footer */
}

/* Hidden bot prevention field */
.probance-newsletter-popup .probance-newsletter-hp,
.probance-newsletter-banner .probance-newsletter-hp {
    display: none; /* Hidden by default */
}

/* Global Styles for Modal */
.probance-newsletter-popup .modal-content {
    background-color: #ffffff; /* Clean white background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow */
    border: none; /* No border */
    overflow: hidden; /* Ensure everything stays inside */
}

.probance-newsletter-popup .modal-header {
    background-color: #f5f5f5; /* Soft color for header */
    border-bottom: 1px solid #e0e0e0; /* Discreet line */
    padding: 20px; /* Spacing */
    font-size: 18px; /* Font size */
    font-weight: 600; /* Bold title */
    color: #333; /* Text color */
    position: relative; /* Relative position for side image */
}

.probance-newsletter-popup .modal-header .btn-close {
    background-color: transparent;
    border: none;
    color: #666; /* Neutral close button color */
    font-size: 20px;
    opacity: 0.8;
}

.probance-newsletter-popup .modal-header .btn-close:hover {
    opacity: 1;
}

.probance-newsletter-popup .modal-body {
    padding: 20px; /* Internal spacing */
    font-size: 16px; /* Comfortable reading size */
    color: #555; /* Slightly greyed text */
    line-height: 1.6; /* Line spacing */
}

.probance-newsletter-popup .modal-body label {
    font-weight: 600; /* Emphasize labels */
    margin-bottom: 10px; /* Spacing with fields */
    color: #333; /* Text color */
}

.probance-newsletter-popup .modal-body input {
    padding: 10px; /* Internal spacing */
    margin-bottom: 15px; /* External spacing */
    border: 1px solid #ddd; /* Discreet grey border */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px; /* Comfortable size */
    color: #333; /* Dark text */
}

.probance-newsletter-popup .modal-body select {
    padding: 3px; /* Internal spacing */
    margin-bottom: 15px; /* External spacing */
    border: 1px solid #ddd; /* Discreet grey border */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px; /* Comfortable size */
    color: #333; /* Dark text */
}

.probance-newsletter-popup .modal-body input:focus,
.probance-newsletter-popup .modal-body select:focus {
    border-color: #007bff; /* Blue border on focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue glow */
    outline: none;
}

.probance-newsletter-popup .modal-footer {
    background-color: #f5f5f5; /* Soft background */
    border-top: 1px solid #e0e0e0; /* Discreet line */
    padding: 15px; /* Spacing */
    text-align: right; /* Buttons aligned to the right */
    position: relative; /* Relative position for side image */
}

.probance-newsletter-popup .modal-footer button {
    padding: 10px 20px; /* Spacious buttons */
    font-size: 14px; /* Comfortable text size */
    border-radius: 5px; /* Rounded corners */
    border: none; /* No border */
    cursor: pointer;
}

.probance-newsletter-popup .modal-footer .btn-primary {
    background-color: #007bff; /* Blue for primary button */
    color: #fff; /* White text */
    transition: background-color 0.3s ease;
}

.probance-newsletter-popup .modal-footer .btn-primary:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.probance-newsletter-popup .modal-footer .btn-secondary {
    background-color: #6c757d; /* Grey for secondary button */
    color: #fff; /* White text */
    transition: background-color 0.3s ease;
}

.probance-newsletter-popup .modal-footer .btn-secondary:hover {
    background-color: #5a6268; /* Darker grey on hover */
}

.probance-newsletter-popup .modal.fade {
    opacity: 1;
}
.probance-newsletter-popup .modal.fade .modal-dialog {
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    transform: translate(0);
}

.probance-newsletter-popup-info {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
}

.probance-newsletter-main-image {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

@media (min-width: 768px) {
    /* Do not edit - Start */
    .probance-newsletter-popup-small {
        width: 300px;
    }

    .probance-newsletter-popup-medium {
        width: 500px;
        max-width: none;
    }

    .probance-newsletter-popup-large {
        width: 800px;
        max-width: none;
    }

    .probance-newsletter-popup-left {
        left: 20px;
        position: fixed;
    }
    .probance-newsletter-popup-right {
        right: 20px;
        position: fixed;
    }
    .probance-newsletter-popup-x-center {
        right: 0;
        left: 0;
        position: fixed;
    }
    .probance-newsletter-popup-top {
        top: 20px;
        position: fixed;
    }
    .probance-newsletter-popup-bottom {
        bottom: 20px;
        position: fixed;
    }
    .probance-newsletter-popup-y-center {
        top: 0;
        bottom: 0;
        position: fixed;
    }
    /* Do not edit - End */
}

/* Responsive Modal */
@media (max-width: 768px) {
    .probance-newsletter-popup .modal-dialog {
        margin: 10px; /* Reduced spacing on small screens */
        max-width: fit-content;
    }

    .probance-newsletter-popup .modal-content {
        font-size: 14px; /* Slightly smaller text */
    }

    .probance-newsletter-popup .modal-header,
    .probance-newsletter-popup .modal-body,
    .probance-newsletter-popup .modal-footer {
        padding: 15px; /* Reduce margins */
    }

    .popup-content {
        width: 90vw;
        max-width: 90vw;
    }
}