/* Popup "Visual" */
.probance-newsletter-popup[data-newsletterid='1'] .probance-newsletter-popup-medium {
    max-width: 700px;
    width: 90%;
    min-height: 420px;
}

.probance-newsletter-popup[data-newsletterid='1'] .probance-newsletter-global {
    font-family: var(--pnl-font, Arial, sans-serif);
    background-color: var(--pnl-bg, #f9f9f9);
}
.probance-newsletter-popup[data-newsletterid='1'] .probance-newsletter-global span,
.probance-newsletter-popup[data-newsletterid='1'] .probance-newsletter-global h2,
.probance-newsletter-popup[data-newsletterid='1'] .probance-newsletter-global label {
    color: var(--pnl-text, black);
}

/* Inputs & selects — uniform look */
.probance-newsletter-popup[data-newsletterid='1'] input,
.probance-newsletter-popup[data-newsletterid='1'] select {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px; /* fallback without var() support */
    font-size: calc(var(--pnl-fs-text, 16px) * 0.875);
    line-height: 1.5;
    height: auto;
    color: #333;
    margin-bottom: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.probance-newsletter-popup[data-newsletterid='1'] select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23666' d='M6 8.5L1.5 4h9z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}
.probance-newsletter-popup[data-newsletterid='1'] input:focus,
.probance-newsletter-popup[data-newsletterid='1'] select:focus {
    border-color: #fc3467;
    box-shadow: 0 0 0 3px rgba(252, 52, 103, 0.15);
    outline: none;
}

/* Side image */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-side-image {
    margin: 12px;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-side-image
    img {
    border-radius: 12px;
}

/* Header */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .modal-header {
    background-color: var(--pnl-bg, #f9f9f9);
    border-bottom: none;
    position: relative;
    padding-bottom: 0;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .modal-header
    > button {
    font-size: 32px; /* close button: fixed, not tied to the title size */
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .modal-header
    .probance-newsletter-title {
    font-weight: bold;
    margin-top: 8%;
    text-align: left;
    font-size: 32px; /* fallback without var() support */
    font-size: var(--pnl-fs-title, 32px);
    /* themes set font-family directly on h1-h6, which beats inheritance
       of --pnl-font from the container — re-pin to the popup font */
    font-family: inherit;
}

/* Content area: stack vertically */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-subtitle {
    text-align: left;
    font-size: 16px; /* fallback without var() support */
    font-size: var(--pnl-fs-text, 16px);
    font-weight: bold;
    /* Description is user content, not chrome: it must follow the Theme
       text color like the title does. The hardcoded grey outranked the
       generic span/h2/label rule above (5 classes vs 3), so the color
       picker had no visible effect on it. */
    color: #666; /* fallback without var() support */
    color: var(--pnl-text, #666);
    margin: 0;
}

/* Ordered-display: stack of fields, each on its own row */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Each field row — stretch children full width, override base gender-form align-items: center */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    [data-order] {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
}

/* Field labels — small, above the input */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    [data-order]
    label {
    display: block;
    font-weight: normal;
    font-size: 13.6px; /* fallback without var() support */
    font-size: calc(var(--pnl-fs-text, 16px) * 0.85);
    color: #666;
    margin: 0;
}

/* Email is the hero field — hide its label, use placeholder instead */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-email-label {
    display: none;
}

/* Name: firstname + lastname inline on 2 columns */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-name-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    grid-template-areas:
        'firstname-label lastname-label'
        'firstname-input lastname-input';
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-firstname-label {
    grid-area: firstname-label;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-lastname-label {
    grid-area: lastname-label;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-firstname-input {
    grid-area: firstname-input;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-lastname-input {
    grid-area: lastname-input;
}

/* Gender select: full width like the inputs (override max-width from base) */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-gender-select {
    max-width: none;
    width: 100%;
}

/* Submit button — full width below the fields */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-submit-button {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--pnl-btn-bg, #fc3467);
    text-transform: none;
    color: #f9f9f9; /* fallback without var() support */
    color: var(--pnl-btn-text, #f9f9f9);
    border: none;
    border-radius: 8px;
    font-size: 16px; /* fallback without var() support */
    font-size: var(--pnl-fs-text, 16px);
    font-weight: bold;
    cursor: pointer;
    padding: 12px;
    margin: 0;
    transition: background-color 0.3s;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-submit-button:hover {
    background-color: #fc3466be;
}

/* Footer */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .modal-footer {
    background-color: var(--pnl-bg, #f9f9f9);
    border-top: none;
    padding-top: 0;
    padding-left: 5%;
    padding-right: 5%;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .modal-footer
    .probance-newsletter-footer {
    text-align: left;
    color: #c9c9c9;
    font-size: small; /* fallback without var() support (≈13px) */
    font-size: calc(var(--pnl-fs-text, 16px) * 0.8125);
}

/* Privacy opt-in — checkbox + consent text above the submit button.
   The checkbox needs to undo the preset's global input styling
   (appearance: none + width: 100% would make it invisible). */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-privacy-form {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0 0;
    text-align: left;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-privacy-form
    input[type='checkbox'] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: auto;
    width: auto;
    height: auto;
    margin: 2px 0 0 0;
    padding: 0;
    border: none;
    background: none;
    flex: none;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-privacy-label {
    color: #666;
    font-size: 11px; /* fallback without var() support */
    font-size: calc(var(--pnl-fs-text, 16px) * 0.7);
    line-height: 1.5;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-privacy-label
    a {
    color: inherit;
    text-decoration: underline;
}

/* Hide honeypot */
.probance-newsletter-popup[data-newsletterid='1'] .probance-newsletter-hp {
    display: none;
}
/* ------------------------------------------------------------------ */
/* Side image (2.4.2): fill the grid cell instead of driving the popup */
/* height. In flow the <img> carried height:100%, which resolves to    */
/* auto while the grid measures the row — so a portrait image sized    */
/* the row from its own aspect ratio and left dead space under the     */
/* form. Out of flow it no longer contributes to the row height.       */
/* The !important beat the width/height the template writes inline on  */
/* the <img>; in preset mode the per-element "Customization" is        */
/* disabled, so no user CSS is overridden here.                        */
/* ------------------------------------------------------------------ */
.probance-newsletter-popup[data-newsletterid='1'] .probance-newsletter-side-image {
    position: relative;
    overflow: hidden;
    /* Floor: the image no longer sets the height, so a short popup
       (title + one field) would squash it into a sliver. */
    min-height: 280px;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-side-image
    img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    /* Browsers without object-fit stretch the image instead of cropping it;
       it stays inside the cell either way. */
    object-fit: cover;
    object-position: center;
}

/* ------------------------------------------------------------------ */
/* Title lock (2.4.2). Some themes reach the popup title with an       */
/* ID-level selector — beautify-theme716 ships `body:not(#product) h2` */
/* (:not(#product) counts as an ID, so 1,0,1) which repainted   */
/* the title white, 15px, uppercase and indented. No class-based       */
/* selector of ours can outrank that, hence !important.                */
/* This only changes rendering where a theme already beat us, i.e. the */
/* broken cases: where our rules win today, the computed value is      */
/* identical. Values go through the --pnl-* custom properties so the   */
/* Theme settings of the back-office keep applying.                    */
/* Restated as a block (not sprinkled on the rules above) so the       */
/* intended final state stays auditable in one place.                  */
/* ------------------------------------------------------------------ */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .modal-header
    .probance-newsletter-title {
    color: var(--pnl-title, var(--pnl-text, black)) !important;
    font-size: 32px !important; /* fallback without var() support */
    font-size: var(--pnl-fs-title, 32px) !important;
    font-family: inherit !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 8% 0 0 0 !important;
    padding: 0 !important;
}

/* Checkbox group (2.5.0). Undoes three preset rules: the column stacking of
   field rows, the `appearance: none` on inputs that would hide the tick box,
   and the row layout — boxes flow and wrap, each box + label is the flex item.
   Labels are pinned to this preset's field label look: here they are content,
   and Pure hides plain labels. */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    [data-order].probance-newsletter-customfield-checkbox-form {
    display: block;
    text-align: left;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    [data-order].probance-newsletter-customfield-checkbox-form
    .probance-newsletter-customfield-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 16px;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    [data-order].probance-newsletter-customfield-checkbox-form
    .probance-newsletter-customfield-checkbox-item {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    [data-order].probance-newsletter-customfield-checkbox-form
    input[type='checkbox'] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: auto;
    width: auto;
    height: auto;
    margin: 2px 0 0 0;
    padding: 0;
    border: none;
    background: none;
    flex: none;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    [data-order].probance-newsletter-customfield-checkbox-form
    label,
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-customfield-group-label {
    display: inline;
    margin: 0;
    font-weight: normal;
    font-size: 13.6px; /* fallback without var() support */
    font-size: calc(var(--pnl-fs-text, 16px) * 0.85);
    color: #666;
    line-height: 1.5;
}
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .probance-newsletter-content
    .probance-newsletter-customfield-group-label {
    display: block;
    margin: 0 0 4px 0;
}

/* ------------------------------------------------------------------ */
/* Close cross (2.5.0). It sits on the popup background next to the    */
/* title, so it follows the title color rather than the neutral #666   */
/* of newsletter.base.css. Both the button and its <span> are targeted:*/
/* Color paints spans directly, which beats inheritance from the       */
/* button. opacity and text-shadow are pinned because base.css dims    */
/* the cross to .8 and Bootstrap's own .close adds a white shadow —    */
/* both wash out a chosen color.                                       */
/* ------------------------------------------------------------------ */
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .modal-header
    .btn-close,
.probance-newsletter-popup[data-newsletterid='1']
    .probance-newsletter-global
    .modal-header
    .btn-close
    span {
    color: var(--pnl-title, var(--pnl-text, black));
    opacity: 1;
    text-shadow: none;
}