/* Global banner */
.probance-newsletter-banner .probance-newsletter-global[data-newsletter-name='banner'] {
    background-color: #f8f9fa; /* Light background color */
    padding: 32px; /* Internal padding */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    margin: 32px 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 {
    /* px instead of rem: rem depends on the host theme's html font-size
       (Presta 1.6 default theme sets 62.5%, shrinking every rem value) */
    font-size: 32px; /* Title font size (fallback without var() support) */
    font-size: var(--pnl-fs-title, 32px);
    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: 20px; /* Subtitle font size (fallback without var() support) */
    font-size: calc(var(--pnl-fs-text, 16px) * 1.25);
    color: #6c757d; /* Grey color for subtitle */
    text-align: center; /* Center text */
    margin-bottom: 8px; /* Bottom margin */
}

/* Gender form */
.probance-newsletter-popup .probance-newsletter-gender-form,
.probance-newsletter-banner .probance-newsletter-gender-form {
    margin-bottom: 8px; /* 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: 16px; /* Label font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
    color: #495057; /* Label color */
    margin-right: 8px; /* Space between label and select */
}

/* Gender select input */
.probance-newsletter-popup .probance-newsletter-gender-select,
.probance-newsletter-banner .probance-newsletter-gender-select {
    font-size: 16px; /* Font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
    border: 1px solid #ced4da; /* Border */
    border-radius: 4px; /* 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: 16px; /* 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: 16px; /* Label font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
    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: 4px; /* Rounded corners */
    font-size: 16px; /* Font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
    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: 8px; /* Bottom margin */
}
.probance-newsletter-popup .probance-newsletter-birthdate-label,
.probance-newsletter-banner .probance-newsletter-birthdate-label {
    font-size: 16px; /* Label font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
    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: 4px; /* Rounded corners */
    font-size: 16px; /* Font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
}

/* Email form */
.probance-newsletter-popup .probance-newsletter-email-form,
.probance-newsletter-banner .probance-newsletter-email-form {
    margin-bottom: 8px; /* Bottom margin */
}
.probance-newsletter-popup .probance-newsletter-email-label,
.probance-newsletter-banner .probance-newsletter-email-label {
    font-size: 16px; /* Label font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
    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: 4px; /* Rounded corners */
    font-size: 16px; /* Font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
}

/* Custom field form */
.probance-newsletter-popup .probance-newsletter-customfield-form,
.probance-newsletter-banner .probance-newsletter-customfield-form {
    margin-bottom: 8px; /* Bottom margin */
}
.probance-newsletter-popup .probance-newsletter-customfield-label,
.probance-newsletter-banner .probance-newsletter-customfield-label {
    font-size: 16px; /* Label font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
    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: 4px; /* Rounded corners */
    font-size: 16px; /* Font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
}

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

.probance-newsletter-popup .probance-newsletter-privacy-label,
.probance-newsletter-banner .probance-newsletter-privacy-label {
    font-size: 11px; /* Label font size (fallback without var() support) */
    font-size: calc(var(--pnl-fs-text, 16px) * 0.7);
    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: 16px; /* Font size (fallback without var() support) */
    font-size: var(--pnl-fs-text, 16px);
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease; /* Smooth transition */
    margin-top: 16px; /* 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: 32px; /* Top margin */
}
.probance-newsletter-popup .probance-newsletter-footer,
.probance-newsletter-banner .probance-newsletter-footer {
    font-size: 14px; /* Footer text size (fallback without var() support) */
    font-size: calc(var(--pnl-fs-text, 16px) * 0.875);
    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 */
    }

    /* Scoped: a bare .popup-content selector would leak onto host themes
       that use the same generic class name */
    .probance-newsletter-popup .popup-content {
        width: 90vw;
        max-width: 90vw;
    }
}

/* ------------------------------------------------------------------ */
/* Defensive reset (2.4.1): shield the popup/banner from theme-wide    */
/* resets and heading rules (e.g. h2 { margin-top } or font: inherit). */
/* Same-specificity rules win here because this block comes last.      */
/* Values encode the intended final state of the components above.     */
/* ------------------------------------------------------------------ */
.probance-newsletter-popup .modal-dialog,
.probance-newsletter-popup .modal-content,
.probance-newsletter-popup .modal-header,
.probance-newsletter-popup .modal-body,
.probance-newsletter-popup .modal-footer,
.probance-newsletter-popup .probance-newsletter-content,
.probance-newsletter-banner .probance-newsletter-content {
    box-sizing: border-box;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
    float: none;
}

.probance-newsletter-popup .probance-newsletter-title,
.probance-newsletter-banner .probance-newsletter-title {
    margin: 0; /* pins margin-top against theme h1/h2/h3 rules */
    padding: 0;
    line-height: 1.3;
    font-weight: 600; /* re-pin against font: inherit resets */
    font-family: inherit; /* themes set font-family directly on h1-h6, beating inheritance */
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
}

.probance-newsletter-popup .probance-newsletter-subtitle,
.probance-newsletter-banner .probance-newsletter-subtitle {
    margin: 0 0 8px 0;
    padding: 0;
    line-height: 1.5;
    font-weight: normal;
    font-family: inherit;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
}

/* Form controls do not inherit the font by default */
.probance-newsletter-popup .modal-content label,
.probance-newsletter-popup .modal-content input,
.probance-newsletter-popup .modal-content select,
.probance-newsletter-popup .modal-content button,
.probance-newsletter-banner label,
.probance-newsletter-banner input,
.probance-newsletter-banner select,
.probance-newsletter-banner button {
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
    text-transform: none;
    letter-spacing: normal;
}

.probance-newsletter-popup .probance-newsletter-footer,
.probance-newsletter-banner .probance-newsletter-footer,
.probance-newsletter-popup .probance-newsletter-privacy-label,
.probance-newsletter-banner .probance-newsletter-privacy-label {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-weight: normal;
    font-family: inherit;
}

/* ------------------------------------------------------------------ */
/* Defensive reset (2.4.2): host themes from the Bootstrap 2 era ship  */
/* an unscoped `.modal-body { max-height: 200px; overflow-y: auto }`   */
/* (seen on beautify-theme716). At (0,1,0) it lands on our popup and   */
/* turns the form into a scrollable box — the popup must always show   */
/* in one block. Our own rule above is (0,2,0) but declares neither    */
/* property, so nothing opposed it.                                    */
/* ------------------------------------------------------------------ */
.probance-newsletter-popup .modal-body {
    max-height: none;
    overflow: visible;
}

/* Checkbox group (2.5.0): boxes flow and wrap, each box + label is one
   inline-flex item so a long label wraps under its text, not under the box.
   The input selector repeats the wrapper class to outrank the generic
   `.probance-newsletter-popup .modal-body input` rule. */
.probance-newsletter-popup .probance-newsletter-customfield-checkbox-form,
.probance-newsletter-banner .probance-newsletter-customfield-checkbox-form {
    display: block;
    text-align: left;
}

.probance-newsletter-popup .probance-newsletter-customfield-group-label,
.probance-newsletter-banner .probance-newsletter-customfield-group-label {
    display: block;
    margin: 0 0 4px 0;
    font-weight: normal;
}

.probance-newsletter-popup .probance-newsletter-customfield-checkbox-list,
.probance-newsletter-banner .probance-newsletter-customfield-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 16px;
}

.probance-newsletter-popup .probance-newsletter-customfield-checkbox-item,
.probance-newsletter-banner .probance-newsletter-customfield-checkbox-item {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
}

.probance-newsletter-popup
    .probance-newsletter-customfield-checkbox-form
    input.probance-newsletter-customfield-checkbox,
.probance-newsletter-banner
    .probance-newsletter-customfield-checkbox-form
    input.probance-newsletter-customfield-checkbox {
    width: auto;
    height: auto;
    margin: 2px 0 0 0;
    padding: 0;
    border: none;
    background: none;
    flex: none;
}

.probance-newsletter-popup .probance-newsletter-customfield-checkbox-form label,
.probance-newsletter-banner .probance-newsletter-customfield-checkbox-form label {
    display: inline;
    width: auto;
    margin: 0;
    font-weight: normal;
    line-height: 1.5;
}

/* Safety net against jQuery Uniform (1.6 default theme): it wraps checkboxes
   in div.checker>span and relies on the transparent input covering the sprite
   to catch clicks. Our sizing collapsed that input, making consent boxes
   untickable. The templates opt out via `not_uniform`; this covers themes that
   wrap anyway by restoring a native box. */
.probance-newsletter-popup div.checker,
.probance-newsletter-banner div.checker {
    width: auto !important;
    height: auto !important;
    position: static !important;
    vertical-align: baseline !important;
}

.probance-newsletter-popup div.checker > span,
.probance-newsletter-banner div.checker > span {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
}

.probance-newsletter-popup div.checker input[type='checkbox'],
.probance-newsletter-banner div.checker input[type='checkbox'] {
    opacity: 1 !important;
    filter: none !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: auto !important;
    width: 13px !important;
    height: 13px !important;
    position: static !important;
}