/* 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: #343a40; /* 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: #007bff; /* Primary background */
    border: none; /* No border */
    color: #fff; /* 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: #0056b3; /* Darker background on hover */
}

/* 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;
    }
}






/* Popup "Visual" */
.probance-newsletter-popup[data-newsletter-name="pop_up_psy"] {
   --probance-background-color: black;


 .probance-newsletter-popup-medium {
       max-width: 700px;
       width: 90%;
       min-height: 420px;
   }


   input {
       background-color: var(--probance-background-color);
       margin-bottom: 0;
       border-radius: 8px;
   }


   .probance-newsletter-global {
       font-family: Arial, sans-serif;
       background-color: var(--probance-background-color);


       span,
       h2,
       label {
           color: black;
       }


       .probance-newsletter-popup-medium {
           max-width: 700px;
           width: 90%;
           min-height: 420px;
       }


       .probance-newsletter-side-image {
           margin: 12px;


           img {
               border-radius: 12px;
           }
       }


       .modal-header {
           background-color: var(--probance-background-color);
           border-bottom: none;
           position: relative;


           > button {
               font-size: 2rem;
           }


           .probance-newsletter-title {
               font-weight: bold;
               margin-top: 20%;
               text-align: left;
               font-size: 3rem;
			   color: white;
           }
       }


       .probance-newsletter-content {
           display: flex;
           flex-wrap: wrap;


           .probance-newsletter-subtitle {
               flex: 0 0 100%;
               text-align: left;
               font-size: 1rem;
               font-weight: bold;
               color: white;
           }


           > div:nth-child(2) {
               width: 80%;
			}


           .probance-newsletter-email-form {
               width: 100%;
               margin-bottom: 5%;
           }




           .probance-newsletter-email-label {
               display: none;
           }

           .probance-newsletter-submit-button {
               flex: 0 0 30%;
               box-sizing: border-box;
               background-color: #fc3467;
               text-transform: none;
               color: var(--probance-background-color);
               border: none;
               border-radius: 8px;
               font-size: 1rem;
               cursor: pointer;
               margin: 0;
               transition: background-color 0.3s;


               &:hover {
                   background-color: #fc3466be;
               }
			   
			   
			.probance-newsletter-customfield-form {
               color: black;
               width: 100%;
               }  
           }
       }


       .modal-footer {
           background-color: var(--probance-background-color);
           border-top: none;
           padding-top: 0;
           padding-left: 5%;
           padding-right: 5%;


           .probance-newsletter-footer {
               text-align: left;
               color: #c9c9c9;
               font-size: small;
           }
       }
   }
}


  /* === Responsive Mobile === */
@media (max-width: 768px) {

 .probance-newsletter-popup .modal-content.probance-newsletter-global {
  display: block !important;       /* on repasse en flux normal */
  grid-template-columns: 1fr !important;  /* au cas où le grid reste */
  width: 100% !important;
 }

.probance-newsletter-popup .probance-newsletter-side-image {
  display: none;
 }

 .probance-newsletter-popup .modal-content.probance-newsletter-global > div {
  grid-column: 1 / -1 !important;
  width: 100% !important;
 }

 .probance-newsletter-popup .modal-header,
 .probance-newsletter-popup .modal-body,
 .probance-newsletter-popup .modal-footer {
  padding: 14px 16px !important;
 }

 .probance-newsletter-popup .modal-dialog {
  max-width: 100% !important;
  margin: 10px !important;
 }
  
 .probance-newsletter-submit-button {
        width: 100%;             /* prend toute la largeur */
        align-self: stretch;     /* s’étire pour correspondre au champ */
    }
  
}